/* ============================================================
   btn-arrow.css — „Arrow-Fill-Button" (RUNDE 4)
   ============================================================
   Vanilla-Nachbau einer vorgegebenen React/Tailwind-Komponente.
   Kein React, kein Tailwind, keine Fremdbibliothek, kein lucide — der Pfeil
   ist ein Inline-SVG im Markup, damit er die Textfarbe erbt (currentColor).

   Wird von index.html und den Unterseiten geladen.

   ------------------------------------------------------------
   FARBEN — aus der Brand-Palette, kein Orange
   ------------------------------------------------------------
   Grund   #3B62D9 (--blue-2)   Text darauf #F2F5FC (--text)   = 4,89:1
   Fuellung#F2F5FC (--text)      Text darauf #070C16            = 17,93:1
   Flaeche #3B62D9 gegen den Seitengrund #05080F                = 3,75:1
   Fokusring #7DD3FC (--ice) gegen den Seitengrund              = 12,02:1

   KORREKTUR (gemessen, nicht geschaetzt): Der erste Entwurf nahm --blue
   #4F7DF9 als Grund — damit kommt #F2F5FC nur auf 3,42:1 und reisst die
   Vorgabe 4,5:1. --blue-2 ist der dunklere Ton derselben Palette, den der
   bisherige .btn-primary ohnehin schon traegt: 4,89:1 fuer den Text und
   3,75:1 fuer die Flaeche selbst (WCAG 1.4.11 verlangt 3:1). Beide Zustaende
   liegen damit ueber der Vorgabe.

   ------------------------------------------------------------
   MECHANIK
   ------------------------------------------------------------
   Ruhe:  Pillenform mit Rahmen, rechts ein Kreis (74 % der Knopfhoehe,
          0,55 vw vom rechten Rand) mit Pfeil nach rechts.
   Hover / Fokus / :active:
          Der Kreis waechst auf den ganzen Knopf (inset -> 0), der Text
          wechselt ueber eine clip-path-Maske auf die Fuellfarbe, und der
          Pfeil tauscht: der sichtbare gleitet nach rechts raus und
          schrumpft, ein zweiter kommt von links herein und waechst.
   Dauer 450 ms, cubic-bezier(.785,.135,.15,.86).

   Die Breite darf beim Wechsel NICHT springen: die Beschriftung steht
   zweimal im Markup (einmal sichtbar, einmal als Fuellzustand) mit exakt
   derselben Metrik, uebereinandergelegt per Grid-Stapel. Gemessen in
   r4-check.mjs knopf.
   ============================================================ */

.btn-arrow-fill{
  --baf-h: 54px;                    /* Knopfhoehe (Mindesthoehe der Pille) */
  /* RUNDE 5, KORREKTUR (Pruefung r5, BLOCKER 1): Kurz war hier 3.1vw nach der
     React-Vorlage — falsch. Deren vw-Masse gehoeren zu einem Knopf, der selbst
     4,2vw hoch ist; unsere Pille ist fix 44-54 px hoch. Der Kreis wurde dadurch
     84,5 px (768) bzw. 81,9 px (1024) gross und von overflow:hidden oben und
     unten gekappt — statt Kreis mit Pfeil stand ein weisser Klotz im Knopf.
     Genau das wurde beanstandet; die Pixelmessung hat es als „heller Anteil“
     nicht von einem sauberen Kreis unterscheiden koennen.
     Wieder an die Knopfhoehe gekoppelt, mit Deckelung: der Kreis bleibt immer
     kleiner als die Innenhoehe (Rahmen 2x1 px), also nie beschnitten. */
  --baf-kreis: min(calc(var(--baf-h) * .74), calc(var(--baf-h) - 8px));
  --baf-rand: max(6px, .55vw);
  --baf-grund: var(--blue-2);
  --baf-auf-grund: var(--text);
  --baf-fuellung: var(--text);
  --baf-auf-fuellung: #070C16;
  --baf-dauer: 450ms;
  --baf-kurve: cubic-bezier(.785,.135,.15,.86);

  position:relative; isolation:isolate;
  display:inline-flex; align-items:center;
  /* RUNDE 4: ohne flex-shrink:0 staucht der Flex-Container der Navbar den
     Knopf (gemessen 177 px statt 231) und der Kreis rechts legt sich ueber die
     letzten Buchstaben. nowrap haelt die Beschriftung zusaetzlich einzeilig. */
  flex:0 0 auto; white-space:nowrap;
  min-height:var(--baf-h);
  /* RUNDE 5: rechter Innenabstand nach Vorlage = Kreis + Abstand + 2vw.
     Haelt den Kreis unter allen Breiten vom Text frei. */
  padding:0 calc(var(--baf-kreis) + var(--baf-rand) + 2vw) 0 30px;
  border:1px solid var(--baf-grund);
  border-radius:100px;
  background:var(--baf-grund);
  color:var(--baf-auf-grund);
  font-family:var(--font-d); font-weight:400; font-size:.92rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}

/* Kleine Variante (Navbar, Mobilmenue). .btn-sm steht in index.html und wird
   damit NACH dieser Datei geladen — bei gleicher Spezifitaet gewinnt es und
   setzte padding:10px 22px, wodurch der Kreis rechts auf den letzten
   Buchstaben rutschte (gemessen: Text endete bei 154 px, Kreis begann bei
   129 px). Deshalb hier ausdruecklich die Kombination bedienen. */
.btn-arrow-fill.btn-sm{
  --baf-h:44px;
  font-size:.82rem;
  padding:0 calc(var(--baf-kreis) + var(--baf-rand) + 16px) 0 22px;
}

/* Die wachsende Fuellung. Eigene Ebene unter dem Text, damit der Text nie
   mitskaliert. inset statt width/height: kein Layout, nur Compositing. */
.btn-arrow-fill::before{
  content:""; position:absolute; z-index:-1;
  top:50%; right:var(--baf-rand);
  width:var(--baf-kreis); height:var(--baf-kreis);
  margin-top:calc(var(--baf-kreis) / -2);
  border-radius:100px;
  background:var(--baf-fuellung);
  transition:width var(--baf-dauer) var(--baf-kurve),
             height var(--baf-dauer) var(--baf-kurve),
             margin-top var(--baf-dauer) var(--baf-kurve),
             right var(--baf-dauer) var(--baf-kurve);
}

/* Beschriftung: zwei deckungsgleiche Lagen im selben Raster-Feld — gleiche
   Schrift, gleiche Metrik, also keine Breitenaenderung beim Wechsel. Die
   obere Lage traegt die Fuellfarbe und wird per clip-path von rechts
   freigegeben. */
.btn-arrow-fill .baf-text{
  display:grid; grid-template-areas:"t"; align-items:center;
  pointer-events:none;
}
.btn-arrow-fill .baf-text > span{ grid-area:t; display:block; white-space:nowrap; }
.btn-arrow-fill .baf-t-auf{ color:var(--baf-auf-fuellung);
  clip-path:inset(0 0 0 100%);
  /* RUNDE 4: zusaetzlich visibility. clip-path allein macht den Text zwar
     unsichtbar, aber axe/Lighthouse pruefen ihn trotzdem auf Kontrast und
     melden #070C16 auf blauem Grund als Fehler (A11y fiel dadurch von 100 auf
     97). visibility:hidden nimmt ihn aus der Pruefung; der Wechsel ist
     verzoegerungsfrei beim Einblenden und wartet beim Ausblenden die
     clip-path-Animation ab, damit nichts abrupt verschwindet. */
  visibility:hidden;
  transition:clip-path var(--baf-dauer) var(--baf-kurve),
             visibility 0s linear var(--baf-dauer);
}

/* Kreis mit den zwei Pfeilen. Der Kreis selbst ist nur der Rahmen fuer die
   Pfeilbewegung — die Flaeche macht ::before. */
.btn-arrow-fill .baf-kreis{
  position:absolute; top:50%; right:var(--baf-rand);
  width:var(--baf-kreis); height:var(--baf-kreis);
  margin-top:calc(var(--baf-kreis) / -2);
  display:grid; place-items:center;
  border-radius:100px;
  color:var(--baf-auf-fuellung);
  pointer-events:none; overflow:hidden;
}
.btn-arrow-fill .baf-pfeil{
  grid-area:1/1; width:18px; height:18px; display:block;
  transition:transform var(--baf-dauer) var(--baf-kurve);
}
/* der sichtbare Pfeil */
/* RUNDE 5: Wege und Skalen exakt nach der Vorlage. */
.btn-arrow-fill .baf-pfeil-1{ transform:translate3d(0,0,0) scale(1); }
/* der zweite wartet links ausserhalb */
.btn-arrow-fill .baf-pfeil-2{ transform:translate3d(-170%,0,0) scale(0); }

/* ---------- aktiver Zustand ----------
   Ein einziger Regelblock fuer Hover, Tastaturfokus und Tap, damit die drei
   nie auseinanderlaufen. .is-probe setzt nur das Messskript. */
@media (hover:hover){
  .btn-arrow-fill:hover::before{ width:auto; height:auto; inset:0; margin-top:0; right:0; }
  .btn-arrow-fill:hover .baf-t-auf{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path var(--baf-dauer) var(--baf-kurve), visibility 0s; }
  .btn-arrow-fill:hover .baf-pfeil-1{ transform:translate3d(70%,0,0) scale(0); }
  .btn-arrow-fill:hover .baf-pfeil-2{ transform:translate3d(-50%,0,0) scale(1); }
  .btn-arrow-fill:hover{ color:transparent; }
}
.btn-arrow-fill:focus-visible::before,
.btn-arrow-fill:active::before,
.btn-arrow-fill.is-probe::before{ width:auto; height:auto; inset:0; margin-top:0; right:0; }
.btn-arrow-fill:focus-visible .baf-t-auf,
.btn-arrow-fill:active .baf-t-auf,
.btn-arrow-fill.is-probe .baf-t-auf{ clip-path:inset(0 0 0 0); visibility:visible;
  transition:clip-path var(--baf-dauer) var(--baf-kurve), visibility 0s; }
.btn-arrow-fill:focus-visible .baf-pfeil-1,
.btn-arrow-fill:active .baf-pfeil-1,
.btn-arrow-fill.is-probe .baf-pfeil-1{ transform:translate3d(70%,0,0) scale(0); }
.btn-arrow-fill:focus-visible .baf-pfeil-2,
.btn-arrow-fill:active .baf-pfeil-2,
.btn-arrow-fill.is-probe .baf-pfeil-2{ transform:translate3d(-50%,0,0) scale(1); }
.btn-arrow-fill:focus-visible,
.btn-arrow-fill:active,
.btn-arrow-fill.is-probe{ color:transparent; }

/* Fokusring: aussen, damit ihn die wachsende Fuellung nicht verdeckt.
   --ice auf dem Seitengrund = 9,8:1, klar ueber den 3:1 aus WCAG 1.4.11. */
.btn-arrow-fill:focus-visible{
  outline:2px solid var(--ice);
  outline-offset:3px;
}

/* Touch: ohne Hover-Geraet zeigt der Tap den Zustand kurz (:active oben).
   Der Knopf ist dort etwas hoeher, damit die Trefferflaeche >= 48 px bleibt. */
@media (hover:none){
  /* RUNDE 5 (Befund 7): .btn-arrow-fill.btn-sm hat hoehere Spezifitaet und blieb
     deshalb auch auf Touch bei 44 px. Beide Varianten hier ausdruecklich, damit
     die Trefferflaeche wirklich >= 48 px ist. */
  .btn-arrow-fill{ --baf-h:56px; }
  .btn-arrow-fill.btn-sm{ --baf-h:48px; }
}
/* RUNDE 5: die vw-Kreisgroessen der Vorlage (8vw / 11vw) sind hier ersatzlos
   raus — sie sprengten den Knopf (s. oben). Die Groesse folgt jetzt allein der
   Knopfhoehe und braucht keine Breakpoints. */
@media (max-width:640px){
  .btn-arrow-fill{ padding-left:24px; font-size:.9rem; }
}

/* Reduzierte Bewegung: kein Wachsen, kein Pfeiltausch — nur der Farbwechsel.
   Der Zustand bleibt damit erkennbar, ohne dass sich etwas bewegt. */
@media (prefers-reduced-motion: reduce){
  .btn-arrow-fill::before,
  .btn-arrow-fill .baf-t-auf,
  .btn-arrow-fill .baf-pfeil{ transition:none !important; }
  .btn-arrow-fill:hover::before,
  .btn-arrow-fill:focus-visible::before,
  .btn-arrow-fill:active::before,
  .btn-arrow-fill.is-probe::before{ inset:0; margin-top:0; right:0; }
  .btn-arrow-fill .baf-pfeil-1,
  .btn-arrow-fill .baf-pfeil-2{ transform:none !important; }
  .btn-arrow-fill .baf-pfeil-2{ opacity:0 }
}

/* RUNDE 5 (Befund 8): Im Hochkontrastmodus ersetzt das System alle Farben; beide
   Textlagen lagen dann deckungsgleich sichtbar uebereinander und Ruhe- und
   Hover-Zustand waren kaum zu unterscheiden. Die verdeckte Lage wird hier hart
   ausgeblendet, der Zustandswechsel laeuft ueber den Rahmen. */
@media (forced-colors: active){
  .btn-arrow-fill .baf-t-auf{ display:none; }
  .btn-arrow-fill::before{ display:none; }
  .btn-arrow-fill{ border:2px solid ButtonText; }
  .btn-arrow-fill:hover, .btn-arrow-fill:focus-visible{ border-color:Highlight; }
  .btn-arrow-fill .baf-pfeil-2{ display:none; }
}