/* assets/css/tasten-glas.css */
/* =========================================================================
   Zero One IT — Schaltflaechen in Glas
   =========================================================================
   Eine Haut fuer alle Knoepfe der Seite. Kein neues Markup, keine neuen
   Klassen an den bestehenden Schaltflaechen: die Datei liegt im Kopf NACH
   den seiteneigenen <style>-Bloecken und ueberschreibt deren Flaechen.

   Was "Glas" hier heisst — vier Schichten, immer in dieser Reihenfolge:

     1. Traeger      die eigentliche Flaeche, leicht durchscheinend
     2. Schleier     backdrop-filter: was dahinter liegt, wird unscharf
                     und saftiger; das ist der Unterschied zwischen
                     "halbtransparent" und "Glas"
     3. Kante        eine Haarlinie, oben hell, unten dunkel. Licht bricht
                     sich an der Oberkante und sammelt sich an der Unterseite
     4. Glanz        ein Lichtfleck, der dem Zeiger folgt (::after) und
                     ein ruhiger Verlauf von oben (::before)

   Der Glanz braucht zwei Zahlen vom Zeiger. Die setzt assets/js/tasten-glas.js
   als --zeiger-x / --zeiger-y. Ohne Skript stehen sie auf ihrem Standardwert
   und der Knopf sieht still, aber vollstaendig aus.

   Farben kommen ausnahmslos aus theme.css. Einzige Ausnahme ist --glas-glanz:
   eine Spiegelung ist in beiden Themen weiss, nicht "hell" oder "dunkel".
   ========================================================================= */

:root{
  --glas-glanz:255,255,255;            /* Spiegelung — in beiden Themen weiss */
  --glas-kurve:cubic-bezier(.22,1,.28,1);
  --glas-druck:cubic-bezier(.34,1.56,.64,1);   /* der elastische Ruecksprung */
  --glas-schleier:blur(18px) saturate(180%);
}

/* Auf hellem Grund liegt der Knopf auf Off-White statt auf Nachtblau. Ein
   weisser Glanz darauf ist unsichtbar — die Tiefe muss von der Kante und
   vom Schlagschatten kommen, nicht vom Licht. */
:root[data-theme="light"]{
  --glas-schleier:blur(16px) saturate(140%);
}

/* =========================================================================
   1. Der gemeinsame Koerper
   ========================================================================= */

:root .btn,
:root .cc-btn{
  position:relative;
  isolation:isolate;
  border:0;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .34s var(--glas-kurve),
    box-shadow .34s var(--glas-kurve),
    background-color .24s var(--glas-kurve),
    color .24s var(--glas-kurve),
    filter .24s var(--glas-kurve);
}

/* Der Inhalt liegt ueber beiden Lichtschichten. Ohne diese Regel legt sich
   der Glanz auf die Schrift. */
:root .btn > *,
:root .cc-btn > *{position:relative;z-index:2}

/* --- Schicht 4a: der ruhige Verlauf von oben ---
   Erbt den Radius, deshalb beschneidet er sich selbst an den Rundungen —
   overflow:hidden am Knopf ist nicht noetig und wuerde nur den Pfeil und
   den Ladekreis stoeren. */
:root .btn::before,
:root .cc-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:linear-gradient(
    180deg,
    rgba(var(--glas-glanz),.26) 0,
    rgba(var(--glas-glanz),.07) 38%,
    rgba(var(--glas-glanz),0) 62%);
  pointer-events:none;
  transition:opacity .3s var(--glas-kurve);
}

/* --- Schicht 4b: der Lichtfleck unter dem Zeiger ---
   Ruht auf 0 und kommt erst bei Beruehrung. Die Mitte sitzt dort, wo der
   Zeiger steht; ohne Skript in der Mitte oben. */
:root .btn::after,
:root .cc-btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
  background:radial-gradient(
    120px 90px at var(--zeiger-x,50%) var(--zeiger-y,0%),
    rgba(var(--glas-glanz),.34) 0,
    rgba(var(--glas-glanz),.10) 42%,
    rgba(var(--glas-glanz),0) 72%);
  opacity:0;
  pointer-events:none;
  transition:opacity .34s var(--glas-kurve);
}
:root .btn:hover::after,
:root .btn:focus-visible::after,
:root .cc-btn:hover::after,
:root .cc-btn:focus-visible::after{opacity:1}

/* =========================================================================
   2. Gefuellt — der Hauptweg
   =========================================================================
   Teal bleibt Teal. Neu ist, dass die Flaeche nicht mehr flach ist: oben
   der aufgehellte Ton, unten der satte, dazwischen ein Lichtsaum. Der
   Schlagschatten traegt die Akzentfarbe, nicht Schwarz — sonst wirkt der
   Knopf auf dunklem Grund wie ausgeschnitten statt wie aufgelegt. */

:root .btn-primary,
:root .cc-btn-primary{
  background:
    linear-gradient(180deg,
      var(--accent-hell) 0,
      var(--accent) 56%,
      var(--accent) 100%);
  color:var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgba(var(--glas-glanz),.58),
    inset 0 0 0 1px rgba(var(--glas-glanz),.16),
    inset 0 -8px 16px -12px rgba(0,38,31,.5),
    0 1px 2px rgba(var(--schatten-rgb),.30),
    0 14px 30px -16px rgba(var(--akzent-rgb),.72);
}

:root .btn-primary:hover,
:root .cc-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(var(--glas-glanz),.70),
    inset 0 0 0 1px rgba(var(--glas-glanz),.22),
    inset 0 -8px 16px -12px rgba(0,38,31,.42),
    0 2px 4px rgba(var(--schatten-rgb),.26),
    0 20px 40px -18px rgba(var(--akzent-rgb),.85);
}

/* Der Hero-Knopf bringt seinen eigenen Schatten mit (0,2,0) und stuende
   sonst ueber der Regel hier. Gleiche Bildsprache, eine Spur weiter. */
:root .hero-epic-actions .btn-primary{
  box-shadow:
    inset 0 1px 0 rgba(var(--glas-glanz),.58),
    inset 0 0 0 1px rgba(var(--glas-glanz),.16),
    inset 0 -8px 16px -12px rgba(0,38,31,.5),
    0 1px 2px rgba(var(--schatten-rgb),.30),
    0 18px 38px -16px rgba(var(--akzent-rgb),.70);
}
:root .hero-epic-actions .btn-primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(var(--glas-glanz),.70),
    inset 0 0 0 1px rgba(var(--glas-glanz),.22),
    inset 0 -8px 16px -12px rgba(0,38,31,.42),
    0 2px 4px rgba(var(--schatten-rgb),.26),
    0 24px 48px -18px rgba(var(--akzent-rgb),.88);
}

/* =========================================================================
   3. Offen — der Nebenweg
   =========================================================================
   Hier wird das Glas zur eigentlichen Sache: die Flaeche ist durchscheinend,
   der Hintergrund darunter wird unscharf. Der Knopf traegt keinen Rahmen
   mehr, sondern eine Kante aus Licht — innen oben hell, rundum eine
   Haarlinie in Waeschefarbe. */

:root .btn-outline,
:root .cc-btn-outline{
  background:rgba(var(--hoch-rgb),.42);
  -webkit-backdrop-filter:var(--glas-schleier);
  backdrop-filter:var(--glas-schleier);
  color:var(--text-1);
  border:0;
  /* 13px + 1px Rahmen waren 14px - der Rahmen ist weg, der Abstand nimmt
     seinen Platz ein. Die Aussenmasse bleiben damit auf das Pixel gleich. */
  padding:14px 28px;
  box-shadow:
    inset 0 1px 0 rgba(var(--glas-glanz),.20),
    inset 0 0 0 1px rgba(var(--waesche-rgb),.12),
    inset 0 -10px 20px -14px rgba(var(--glas-glanz),.16),
    0 1px 2px rgba(var(--schatten-rgb),.26),
    0 12px 28px -20px rgba(var(--schatten-rgb),.8);
}

:root .btn-outline:hover,
:root .cc-btn-outline:hover{
  transform:translateY(-2px);
  background:rgba(var(--hoch-rgb),.62);
  color:var(--accent-text);
  box-shadow:
    inset 0 1px 0 rgba(var(--glas-glanz),.28),
    inset 0 0 0 1px var(--border-accent),
    inset 0 -10px 20px -14px rgba(var(--glas-glanz),.22),
    0 2px 4px rgba(var(--schatten-rgb),.22),
    0 18px 36px -20px rgba(var(--schatten-rgb),.9);
}

/* Im Hero liegt der offene Knopf ueber der Netzanlage und braucht etwas
   mehr Deckung, sonst liest sich die Schrift nicht. */
:root .hero-epic-actions .btn-outline{background:rgba(var(--flaeche-rgb),.58)}
:root .hero-epic-actions .btn-outline:hover{background:rgba(var(--hoch-rgb),.72)}

/* Der Rahmen ist entfallen, also muss der Innenabstand ihn ersetzen: vorher
   15px + 1px Linie, jetzt 16px glatt. Damit steht der offene Knopf im Hero
   wieder genau so hoch wie der gefuellte daneben.

   Die Begrenzung auf 640px ist der Grund, warum diese Zeile nicht oben bei
   der Flaeche steht: unter 640px setzt der Seitenkopf mit
   .hero-epic-actions .btn beide Knoepfe auf 14px/22px. Diese Regel hier hat
   ein Gewicht mehr und wuerde sie sonst auch am Telefon uebersteuern. */
@media (min-width:640px){
  :root .hero-epic-actions .btn-outline{padding:16px 30px}
}
/* Und darunter ausdruecklich der Wert des Seitenkopfs. Ohne diese Zeile
   gaebe schon die Grundregel :root .btn-outline (ein Gewicht mehr als
   .hero-epic-actions .btn) dem Knopf am Telefon 28px statt 22px. */
@media (max-width:639.98px){
  :root .hero-epic-actions .btn-outline{padding:14px 22px}
}

/* =========================================================================
   4. Gedrueckt
   =========================================================================
   Glas gibt nach und federt zurueck. Die Flaeche sinkt ein: der aeussere
   Schatten geht fast weg, der innere kommt dazu. */

:root .btn:active,
:root .cc-btn:active{
  transform:scale(.965);
  transition-duration:.09s;
}
:root .btn-primary:active{
  box-shadow:
    inset 0 2px 6px rgba(0,38,31,.34),
    inset 0 0 0 1px rgba(var(--glas-glanz),.14),
    0 1px 2px rgba(var(--schatten-rgb),.24),
    0 6px 14px -12px rgba(var(--akzent-rgb),.6);
}
:root .btn-outline:active{
  box-shadow:
    inset 0 2px 6px rgba(var(--schatten-rgb),.30),
    inset 0 0 0 1px rgba(var(--waesche-rgb),.14),
    0 1px 2px rgba(var(--schatten-rgb),.2);
}

/* =========================================================================
   5. Gesperrt
   =========================================================================
   Die alte Regel .btn:disabled:hover faerbte JEDEN gesperrten Knopf beim
   Ueberfahren teal — auch den offenen. Sie steht mit (0,3,0) ueber allem
   hier, deshalb wird sie an gleicher Stelle geradegerueckt. */

:root .btn:disabled,
:root .cc-btn:disabled{
  filter:saturate(.35);
  box-shadow:
    inset 0 0 0 1px rgba(var(--waesche-rgb),.10),
    0 1px 2px rgba(var(--schatten-rgb),.18);
}
:root .btn:disabled::after,
:root .btn:disabled::before{opacity:0}
:root .btn:disabled:hover{transform:none}
:root .btn-primary:disabled:hover{
  background:linear-gradient(180deg,var(--accent-hell) 0,var(--accent) 56%,var(--accent) 100%);
}
:root .btn-outline:disabled:hover{
  background:rgba(var(--hoch-rgb),.42);
  color:var(--text-1);
}

/* =========================================================================
   6. Zuruck-nach-oben
   =========================================================================
   Der kleine runde Knopf unten rechts liegt dauerhaft ueber dem Inhalt und
   ist damit die Stelle, an der Glas am meisten leistet: er verdeckt nichts,
   sondern traegt das Darunterliegende weich weiter. */

:root .back-to-top{
  background:rgba(var(--flaeche-rgb),.5);
  -webkit-backdrop-filter:var(--glas-schleier);
  backdrop-filter:var(--glas-schleier);
  border:0;
  box-shadow:
    inset 0 1px 0 rgba(var(--glas-glanz),.22),
    inset 0 0 0 1px rgba(var(--waesche-rgb),.12),
    0 2px 6px rgba(var(--schatten-rgb),.3),
    0 14px 30px -18px rgba(var(--schatten-rgb),.9);
}
:root .back-to-top:hover{
  background:rgba(var(--hoch-rgb),.66);
  color:var(--accent-text);
  box-shadow:
    inset 0 1px 0 rgba(var(--glas-glanz),.3),
    inset 0 0 0 1px var(--border-accent),
    0 2px 6px rgba(var(--schatten-rgb),.26),
    0 18px 36px -18px rgba(var(--schatten-rgb),.9);
}

/* =========================================================================
   7. HELL
   =========================================================================
   Auf Off-White traegt kein weisser Glanz mehr. Der Knopf wird stattdessen
   heller als sein Grund und bekommt eine sichtbare Kante in Navy — das ist
   dieselbe Physik, nur andersherum gelesen: das Licht kommt jetzt von der
   Flaeche, der Schatten von der Kante. */

:root[data-theme="light"] .btn-outline,
:root[data-theme="light"] .cc-btn-outline{
  background:rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(var(--waesche-rgb),.14),
    0 1px 2px rgba(var(--schatten-rgb),.10),
    0 10px 24px -16px rgba(var(--schatten-rgb),.34);
}
:root[data-theme="light"] .btn-outline:hover,
:root[data-theme="light"] .cc-btn-outline:hover{
  background:rgba(255,255,255,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px var(--border-accent),
    0 2px 4px rgba(var(--schatten-rgb),.10),
    0 16px 32px -16px rgba(var(--schatten-rgb),.4);
}
:root[data-theme="light"] .hero-epic-actions .btn-outline{background:rgba(255,255,255,.78)}
:root[data-theme="light"] .hero-epic-actions .btn-outline:hover{background:rgba(255,255,255,.95)}

:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .cc-btn-primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 0 0 1px rgba(var(--glas-glanz),.24),
    inset 0 -8px 16px -12px rgba(0,38,31,.4),
    0 1px 2px rgba(var(--schatten-rgb),.14),
    0 12px 26px -14px rgba(var(--akzent-rgb),.5);
}

:root[data-theme="light"] .back-to-top{
  background:rgba(255,255,255,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(var(--waesche-rgb),.14),
    0 2px 6px rgba(var(--schatten-rgb),.12),
    0 14px 30px -18px rgba(var(--schatten-rgb),.4);
}

/* Der Zeigerglanz ist auf hellem Grund ein Schleier, kein Licht —
   sonst waescht er die Flaeche aus, statt sie zu woelben. */
:root[data-theme="light"] .btn-outline::before,
:root[data-theme="light"] .cc-btn-outline::before{opacity:.35}
:root[data-theme="light"] .btn-outline::after,
:root[data-theme="light"] .cc-btn-outline::after{opacity:0}
:root[data-theme="light"] .btn-outline:hover::after,
:root[data-theme="light"] .btn-outline:focus-visible::after{opacity:.5}

/* =========================================================================
   8. Ohne backdrop-filter
   =========================================================================
   Aeltere Firefox-Staende und abgeschaltete Beschleunigung. Dort wird aus
   dem Glas eine geschlossene Flaeche — richtig ist hier nicht "so aehnlich
   wie moeglich", sondern lesbar. */

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root .btn-outline,
  :root .cc-btn-outline,
  :root .back-to-top{background:var(--surface-up)}
  :root .btn-outline:hover,
  :root .cc-btn-outline:hover{background:var(--surface-up)}
  :root[data-theme="light"] .btn-outline,
  :root[data-theme="light"] .cc-btn-outline,
  :root[data-theme="light"] .back-to-top{background:#fff}
}

/* =========================================================================
   9. PAKET-TASTE — die Schaltflaeche zum Buchen
   =========================================================================
   Vorbild sind die beiden Referenzen: eine helle Glasplatte mit abgerundeten
   Ecken, links eine kleine Teal-Marke mit Rasterpunkten, rechts die
   Beschriftung. Beim Klick waechst die Marke ueber die ganze Breite und
   laeuft als Leiste nach rechts durch — dieselbe Flaeche, nur gedehnt.
   Deshalb ist es EIN Element und kein zweiter Balken darueber: eine Marke,
   die zur Leiste wird, bleibt dieselbe Sache; zwei Elemente waeren ein
   Wechsel.

   Die Klasse liegt zusaetzlich zu .btn am Knopf, damit die Breiten- und
   Abstandsregeln aus preis-flip.css und hosting-tarife.css (.pf-hinten-fuss
   > .btn, #hostingRate .rate-col > a.btn) weiter greifen.
   ========================================================================= */

:root .paket-taste{
  /* 32 + 2x7 = 46 px Gesamthoehe. Die 44 px der Empfehlung fuer Beruehrungs-
     ziele sind damit auch dann erreicht, wenn die Beschriftung einzeilig
     bleibt - vorher haette genau dieser Fall 42 px ergeben. */
  --pt-marke:32px;                  /* Kantenlaenge der ruhenden Marke */
  --pt-luft:7px;                    /* Abstand der Marke zum Rand */
  --pt-lauf:760ms;                  /* Dauer des Durchlaufs */
  /* Eine eigene Kurve fuer die Leiste. --glas-kurve ist sehr kopflastig -
     richtig fuer einen Knopf, der beim Ueberfahren aufspringt, falsch fuer
     eine Leiste: die waere nach einem Fuenftel der Zeit schon fast durch
     und wuerde den Rest nur noch kriechen. Diese hier faehrt an, nimmt die
     Mitte mit gleichmaessigem Tempo und laeuft am Ende aus. */
  --pt-kurve:cubic-bezier(.62,.04,.3,1);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  width:100%;
  min-height:calc(var(--pt-marke) + var(--pt-luft) * 2);
  padding:var(--pt-luft);
  border:0;
  border-radius:16px;
  background:rgba(var(--waesche-rgb),.94);
  color:#0B1426;
  font-family:var(--font-display);
  font-size:.9375rem;
  font-weight:600;
  cursor:pointer;
  overflow:hidden;                  /* die Leiste darf nicht aus dem Glas laufen */
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(11,20,38,.08),
    0 1px 2px rgba(var(--schatten-rgb),.34),
    0 16px 34px -20px rgba(var(--schatten-rgb),.9);
  transition:
    transform .34s var(--glas-kurve),
    box-shadow .34s var(--glas-kurve);
}

/* Die Grundregel .btn setzt beide Schichten auf JEDEN Knopf. Auf der hellen
   Platte haben sie nichts zu suchen — das Licht sitzt hier in der Kante. */
:root .paket-taste::before{
  background:linear-gradient(180deg,
    rgba(255,255,255,.7) 0,
    rgba(255,255,255,0) 54%);
}
:root .paket-taste::after{display:none}

:root .paket-taste:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(11,20,38,.10),
    0 2px 4px rgba(var(--schatten-rgb),.3),
    0 24px 46px -20px rgba(var(--schatten-rgb),.95);
}
:root .paket-taste:active{transform:scale(.985)}

/* --- HELL ---
   Die Vorlage zeigt eine helle Platte, weil die Seite dort dunkel ist. Das
   Weiss ist nicht die Aussage - der Abstand zum Grund ist es. Auf Off-White
   waere eine weisse Platte auf einer weissen Karte zwei Mal dasselbe Weiss
   und die Buchung saehe aus wie der Knopf darueber, obwohl sie der Hauptweg
   ist. Dieselbe Beziehung, andersherum gelesen: die Platte wird Navy, die
   Schrift hell, die Marke bleibt Teal. */
:root[data-theme="light"] .paket-taste{
  background:rgba(11,20,38,.95);
  color:#F0F5FF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 2px 4px rgba(var(--schatten-rgb),.16),
    0 16px 34px -18px rgba(var(--schatten-rgb),.5);
}
:root[data-theme="light"] .paket-taste::before{
  background:linear-gradient(180deg,
    rgba(255,255,255,.16) 0,
    rgba(255,255,255,0) 54%);
}
:root[data-theme="light"] .paket-taste:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px var(--border-accent),
    0 3px 6px rgba(var(--schatten-rgb),.16),
    0 24px 46px -18px rgba(var(--schatten-rgb),.58);
}

/* preis-flip.css formt den Fokusring aller Knoepfe in einer Wendekarte auf
   8 px (.pf-buehne :is(button,a,input):focus-visible, Gewicht 0,2,1). Die
   Paket-Taste hat 16 px - ohne diese Regel zoegen ihre Ecken beim Fokus
   sichtbar zusammen. */
:root .pf-buehne .paket-taste:focus-visible{border-radius:16px}

/* --- Die Marke ---
   Ruhend ein Quadrat mit weichen Ecken. Sie steht absolut, damit ihr
   Wachsen nichts daneben verschiebt; der Platz, den sie im Ruhezustand
   braucht, kommt vom Einzug der Beschriftung. */
:root .pt-marke{
  position:absolute;
  left:var(--pt-luft);
  top:var(--pt-luft);
  bottom:var(--pt-luft);
  z-index:1;
  width:var(--pt-marke);
  border-radius:9px;
  background:var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -6px 12px -8px rgba(0,38,31,.5),
    0 1px 3px rgba(0,38,31,.28);
  overflow:hidden;
  transition:
    width var(--pt-lauf) var(--pt-kurve),
    border-radius var(--pt-lauf) var(--pt-kurve),
    background-color .24s var(--glas-kurve);
}

/* Das Raster. Zwei versetzte Punktgitter ergeben die feine Koernung der
   Vorlage, ohne dass ein Bild geladen werden muss. Es sitzt in einer
   eigenen Schicht, weil nur IT sich bewegen soll — nicht der Glanz. */
:root .pt-marke::before{
  content:"";
  position:absolute;
  inset:-2px;
  background-image:
    radial-gradient(circle at 50% 50%,rgba(0,38,31,.55) 1.05px,transparent 1.45px),
    radial-gradient(circle at 50% 50%,rgba(0,38,31,.34) 1.05px,transparent 1.45px);
  background-size:6px 6px,6px 6px;
  background-position:0 0,3px 3px;
}

/* Der Glanz auf der Marke — eine Kante Licht oben, wie auf gewoelbtem Glas. */
:root .pt-marke::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.42) 0,
    rgba(255,255,255,0) 52%);
}

/* --- Die Beschriftung --- */
:root .pt-text{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  min-width:0;
  padding-left:calc(var(--pt-marke) + 12px);
  padding-right:12px;
  text-align:left;
  line-height:1.25;
  transition:opacity .26s linear,transform .3s var(--glas-kurve);
}

/* --- Der Durchlauf ---
   Die Marke dehnt sich auf die volle Innenbreite, ihre Ecken werden zum
   Radius der Platte, das Raster wandert nach rechts. Die Beschriftung geht
   vorher weg: sie stuende sonst kurz auf Teal und waere dort nicht lesbar. */
:root .paket-taste.ist-laeuft{pointer-events:none}
:root .paket-taste.ist-laeuft .pt-marke{
  width:calc(100% - var(--pt-luft) * 2);
  border-radius:11px;
}
:root .paket-taste.ist-laeuft .pt-marke::before{
  animation:ptRaster var(--pt-lauf) linear infinite;
}

/* Die vordere Kante. Ohne sie waechst nur ein Rechteck; mit ihr laeuft
   etwas. Der Lichtsaum sitzt immer am rechten Rand der Marke - und weil
   die Marke waechst, wandert er mit nach rechts. */
:root .paket-taste.ist-laeuft .pt-marke::after{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 68%,
      rgba(255,255,255,.30) 93%,
      rgba(255,255,255,.62) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.42) 0,
      rgba(255,255,255,0) 52%);
}
:root .paket-taste.ist-laeuft .pt-text{
  opacity:0;
  transform:translateX(10px);
  transition-duration:.18s;
}

@keyframes ptRaster{
  from{background-position:0 0,3px 3px}
  to{background-position:24px 0,27px 3px}
}

/* --- Ohne Zeiger ---
   Auf dem Telefon gibt es kein Hover. Damit die Marke dort nicht wie ein
   totes Quadrat wirkt, bekommt sie einen einmaligen, sehr ruhigen Atem,
   sobald die Karte ins Bild kommt — mehr nicht. */
@media (hover:none){
  :root .paket-taste:active{transform:scale(.975)}
}

/* =========================================================================
   10. Bewegung reduzieren
   =========================================================================
   Der Zustand bleibt vollstaendig: Glas, Kante, Farbe, Fokus. Es entfaellt
   nur, was sich bewegt. Der Durchlauf faellt damit ganz weg — das Skript
   fragt dieselbe Einstellung ab und oeffnet das Fenster sofort.
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  :root .btn,
  :root .cc-btn,
  :root .btn::before,
  :root .btn::after,
  :root .back-to-top,
  :root .paket-taste,
  :root .pt-marke,
  :root .pt-text{transition:none !important}
  :root .btn:hover,
  :root .cc-btn:hover,
  :root .paket-taste:hover{transform:none}
  :root .btn:active,
  :root .cc-btn:active,
  :root .paket-taste:active{transform:none}
  :root .paket-taste.ist-laeuft .pt-marke::before{animation:none}
}

/* assets/css/reference-cases.css */
.ref-case{max-width:68ch;padding:4px 0 22px}.ref-case h4{font:600 17px/1.4 "Space Grotesk",sans-serif;margin:20px 0 8px}.ref-case p{font-size:14px;line-height:1.75;margin:0 0 14px}.ref-case a{text-underline-offset:4px}.ref-detail-inner dl{margin-top:0}