/* ==========================================================================
   JARII · Gemeinsame Komponenten: Buttons, Karten, Chips, Mini-Header,
   mobile Bottom-Bar, Footer. Sektionsspezifisches gehört in intro.css,
   product.css oder form.css, nicht hierher.
   ========================================================================== */

/* --- Buttons: Kapselform (Grundform der Marke = Halm im Profil) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;              /* Touch-Ziel, WCAG 2.5.8 verlangt 24, 44 ist Hausstandard */
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.8125rem;          /* 13 px: Label-Stil, einen Tick größer als 12 für Lesbarkeit auf Touch */
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.1em; height: 1.1em; }

/* Auf hellen Flächen: violet mit on-violet (6,2:1) */
.btn-primary {
  background-color: var(--violet);
  color: var(--on-violet);
}
.btn-primary:hover { background-color: var(--violet-hover); } /* Token, damit Theme „Nacht“ eine passende Hover-Farbe bekommt */

/* Auf navy-Flächen: violet auf navy erreicht nur 2,4:1 und wäre als Fläche
   nicht als Button erkennbar (WCAG 1.4.11 verlangt 3:1). Deshalb Porzellan-
   Fläche (on-navy, 13,4:1 zu navy) mit navy-Text. */
.btn-on-navy {
  background-color: var(--on-navy);
  color: var(--navy);
}
.btn-on-navy:hover { background-color: var(--on-navy-accent); }

/* Zweitrangige Aktion: nur Rand. Der Rand ist Dekor, die Erkennbarkeit
   trägt der Text; deshalb darf hairline unter 3:1 liegen. */
.btn-ghost {
  background-color: transparent;
  color: var(--text);
  border-color: var(--hairline);
}
.btn-ghost:hover { border-color: currentColor; }
.surface-navy .btn-ghost { border-color: rgba(247, 244, 238, 0.4); }

/* --- Karten -------------------------------------------------------------- */
.card {
  background-color: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --accent: var(--violet);
  --focus: var(--violet);
}
@media (min-width: 768px) {
  .card { padding: var(--space-8); }
}

/* --- Chips: Kapseln für Auswahl und Status ------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background-color: var(--surface-raised);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.chip .icon { width: 1em; height: 1em; }

/* Statuschips: nur Signalfarben, immer mit Wort und Icon (Markenbuch S. 7) */
.chip-clear { color: var(--signal-clear); border-color: currentColor; }
.chip-alert { color: var(--signal-alert); border-color: currentColor; }

/* ==========================================================================
   Wortmarke JARII mit Farbkapseln (Agent W, 26.10.2026)
   Markup setzt scripts/wordmark.mjs beim Bauen für jedes sichtbare „JARII“:
     <span class="wm">JAR<span class="wm__ii"><span class="wm__txt">II</span>
       <i class="wm__cap wm__cap--a" aria-hidden="true"></i>
       <i class="wm__cap wm__cap--b" aria-hidden="true"></i></span></span>
   „II“ bleibt Text (Screenreader, Suche, Kopieren), sichtbar sind nur die
   Kapseln. Die Wortmarke erbt Schrift und Größe des Kontexts; in Fließtext
   bleibt „JAR“ also Inter, die Kapseln passen sich über --wm-w (Strichstärke),
   --wm-sb (Vorbreite) und --wm-ls (Laufweite) an, gesetzt in tokens.css je
   Typo-Stil. Farben --wm-a/--wm-b je Fläche ebenfalls in tokens.css.
   Geometrie: Höhe = Versalhöhe (1cap), Unterkante auf der Grundlinie
   (leerer Inline-Block mit vertical-align: baseline sitzt mit der Unterkante
   auf der Grundlinie), voll gerundet.
   ========================================================================== */
.wm { white-space: nowrap; }   /* JAR und Kapseln nie auf zwei Zeilen */
.wm__ii {
  /* Abstände rechnen die Kapsel-Ränder selbst. Wichtig auch für .wm__txt:
     Laufweite erbt als fester px-Wert und gäbe dem unsichtbaren „II“ sonst
     Breite. */
  letter-spacing: 0;
}
/* „II“ unsichtbar, aber im Textfluss: font-size 0 statt .sr-only. Mit
   .sr-only (position: absolute) las Chromium „JAR II“ (gemessen 26.10.2026,
   siehe scripts/wordmark.mjs); so ergeben Screenreader-Baum, Auswahl und
   Zwischenablage „JARII“. */
.wm__txt { font-size: 0; }
.wm__cap {
  display: inline-block;
  width: var(--wm-w);
  height: 1cap;
  margin-left: var(--wm-sb);
  border-radius: var(--radius-pill);
  background-color: var(--wm-a);
  vertical-align: baseline;
  font-style: normal;
  /* Kapseln sind Hintergrundfarbe: im Druck sonst weggelassen */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Abstand zwischen den Kapseln wie zwischen zwei „I“: Nachbreite + Laufweite
   + Vorbreite. Nach der zweiten Kapsel nur die Laufweite: Die gerundeten
   Enden wirken schmaler als ein „I“, mit voller Nachbreite stand ein
   folgender Punkt sichtbar ab (Prüfbild _preview/w-wm-test.png, 120 px). */
.wm__cap--b {
  margin-left: calc(2 * var(--wm-sb) + var(--wm-ls));
  margin-right: var(--wm-ls);
  background-color: var(--wm-b);
}
@supports not (height: 1cap) {
  .wm__cap { height: var(--wm-capfb, 0.72em); }
}
/* Windows-Kontrastmodus ersetzt Hintergrundfarben: Kapseln in Textfarbe,
   sonst stünde dort nur „JAR“. */
@media (forced-colors: active) {
  .wm__cap { forced-color-adjust: none; background-color: CanvasText; }
}

/* Kontexte ohne Typo-Klasse, in denen JARII vorkommen kann: Geometrie der
   jeweiligen Schrift (Messwerte siehe tokens.css). Nur Variablen, kein
   Eingriff in die Gestaltung dieser Elemente. */
.wordmark { --wm-w: 0.155em; --wm-sb: 0.066em; --wm-ls: -0.04em; --wm-capfb: 0.745em; }   /* Jakarta 800 */
.faq__q { --wm-w: 0.136em; --wm-sb: 0.072em; --wm-ls: -0.015em; --wm-capfb: 0.745em; }    /* Jakarta 700 */
.btn { --wm-w: 0.136em; --wm-sb: 0.072em; --wm-ls: 0.16em; --wm-capfb: 0.745em; }         /* Jakarta 700, Versalien */
:is(strong, b) { --wm-w: 0.149em; --wm-sb: 0.066em; }                                     /* Inter 700 (bold) */
/* Karten liegen auch auf navy (z. B. als helle Karte): Theme-Grundfarbe neu
   setzen statt Mint/Lila von der Fläche zu erben. */
.card { --wm-a: var(--wm-surface-a); --wm-b: var(--wm-surface-b); }

/* ==========================================================================
   Punkt-, Komma- und Doppelpunkt-Abstand in Plus-Jakarta-Überschriften
   (Agent W, 26.10.2026)
   scripts/typo.mjs wickelt Punkte in h1–h3 und Display-Stilen in
   <span class="pt">. Der Punkt von Plus Jakarta Sans hat viel Vorbreite und
   stand in Display-Größen ab („Press pause .“, „K. -o. -Tropfen“). Gemessen
   (Tinte bei 1000 px, Buchstabe vor „.“ gegen denselben Buchstaben vor „n“):
   800 zu weit um 0,074 em, 700 um 0,061 em; „.-“ zusätzlich 0,085 bzw.
   0,073 em. Werte je Typo-Stil in tokens.css (--pt-l links, --pt-r rechts).
   Grundwert 0: In Inter (0,001 em, kein Problem) ändert sich nichts.
   Inline-Span, kein Inline-Block: Der Text bleibt für Screenreader und
   Kopieren „K.-o.-Tropfen“ ohne zusätzliche Leerzeichen.
   ========================================================================== */
.pt { margin-left: var(--pt-l, 0em); }           /* Punkt und Doppelpunkt */
.pt--c { margin-left: var(--pt-c, 0em); }        /* Komma: 0,055 (800) bzw. 0,042 em (700) */
/* Nach gekernten Buchstaben rückt der Font schon etwa halb heran (Punkt nach
   r f v w y V Y, Komma nach f), in einigen Fällen ganz (Punkt nach P und 7,
   Komma nach r v w y V Y P 7): halbe bzw. keine Korrektur. */
.pt--k { margin-left: calc(var(--pt-l, 0em) / 2); }
.pt--c.pt--k { margin-left: calc(var(--pt-c, 0em) / 2); }
.pt.pt--n { margin-left: 0; }
/* Direkt folgendes Zeichen („K.-o.-“, „6.732“): auch rechts heranrücken */
.pt--eng { margin-right: var(--pt-r, 0em); }
/* Jakarta 700 ohne Typo-Klasse (Faktenseite, Agent K) */
.fact__claim { --pt-l: -0.06em; --pt-r: -0.073em; --pt-c: -0.042em; }

/* Wortmarke als eigenständiges Element (Header, Footer): Plus Jakarta 800, eng */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: none;
  color: var(--navy);
}
.surface-navy .wordmark, .site-footer .wordmark { color: var(--on-navy); }

/* ==========================================================================
   Mini-Header (fixiert). Markenbuch: Wortmarke links, Logo rechts, gleiche
   Oberkante. Daneben die Hauptaktion „Auf die Liste“.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--head-h);
  background-color: var(--surface-100);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  --text: var(--ink);
  --accent: var(--violet);
  --focus: var(--violet);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear 0s;
}

/* Wortmarke, Button und Logo stehen auf einer gemeinsamen Mittellinie
   (Wunsch Tarik 26.10.2026: „Auf die Liste“ mittig mit JARII). Die
   Markenbuch-Regel „gleiche Oberkante“ gilt für Kampagnenmotive; in einer
   Navigationsleiste liest sich die gemeinsame Mitte ruhiger. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 44px;
}

.site-header .wordmark {
  font-size: 1.75rem;               /* ~28 px */
  display: inline-flex;
  align-items: center;              /* Link behält 44 px Zielfläche, Schrift mittig darin */
  min-height: 44px;
}
/* Versalien optisch mittig: Bei line-height 1 liegt die Versal-Oberkante von
   Plus Jakarta 800 0,148 em unter der Zeilenoberkante, die Versalhöhe misst
   0,745 em; die Versalmitte liegt damit 0,0205 em unter der Zeilenmitte.
   Der kleine Versatz nach oben gleicht das aus, damit die Mitte der Buchstaben
   genau auf der Mitte von Button und Logo sitzt. */
.site-header .wordmark .wm {
  position: relative;
  top: -0.02em;
}

.site-header__logo {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;              /* nur für die Fokusform, das Logo bringt eigene Ecken mit */
}
.site-header__logo img { width: 44px; height: 44px; }

/* Auf dem Handy trägt die Bottom-Bar die Hauptaktion; zwei gleiche Buttons
   gleichzeitig wären Ablenkung. */
@media (max-width: 767px) {
  .site-header__cta { display: none; }
}

/* ==========================================================================
   Mobile Bottom-Bar (< 768 px) mit der Hauptaktion
   ========================================================================== */
.sticky-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background-color: var(--surface-100);
  border-top: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  --focus: var(--violet);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear 0s;
}
.sticky-bar .btn { width: 100%; }

@media (max-width: 767px) {
  .sticky-bar { display: block; }
  /* Footer bekommt Luft, damit die Bar nichts verdeckt (Barrierefreiheit) */
  body:has(.sticky-bar) .site-footer {
    padding-bottom: calc(var(--bar-h) + var(--space-8) + env(safe-area-inset-bottom));
  }
  /* Agent E, gemessen 25.10.2026 (390 px, Tab bis in den Footer): Der Browser
     scrollte fokussierte Links genau an den unteren Rand, also unter die Bar
     (WCAG 2.4.11). scroll-padding hält beim Fokus-Scrollen die Bar-Höhe frei;
     auf Anker-Sprünge (oben) wirkt der untere Wert nicht.
     Nur solange die Bar sichtbar ist (ohne JS immer; mit JS ab intro-done und
     nicht über der Liste). Sonst scrollte schon der Fokus auf „Scrollen“ im
     Hero die Seite an, die Header-Animation blendete den Link aus und der
     Fokus fiel auf body zurück (gemessen 25.10.2026). */
  html:not(.js):has(.sticky-bar),
  html.intro-done:not(.bar-aus):has(.sticky-bar) {
    scroll-padding-bottom: calc(var(--bar-h) + var(--space-4) + env(safe-area-inset-bottom));
  }
}

/* --- Sichtbarkeit von Header und Bar ------------------------------------
   Mit JavaScript bleiben beide verborgen, bis die Header-Animation (Agent B,
   intro.js) <html> die Klasse intro-done gibt. Ohne JavaScript fehlt die
   Klasse js, beide sind sofort sichtbar. Rechtsseiten tragen page-static
   und zeigen den Header immer.
   visibility verzögert ausblenden, damit verborgene Links nicht per Tab
   erreichbar sind, die Bewegung aber trotzdem sichtbar abläuft. */
html.js:not(.intro-done):not(.page-static) .site-header {
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
/* bar-aus setzt form.js, solange die Liste (#liste) im Bild ist: dort trägt
   das Formular dieselbe Aktion, und die Bar würde Felder verdecken. */
html.js.bar-aus .sticky-bar,
html.js:not(.intro-done):not(.page-static) .sticky-bar {
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

/* ==========================================================================
   Footer (navy)
   ========================================================================== */
.site-footer {
  padding-block: var(--space-12);
}
.site-footer__inner {
  display: grid;
  gap: var(--space-8);
}
/* Zweitakt oben, ruhig: display-l auf der ganzen Breite, zweite Zeile
   on-navy-accent (tokens.css, .surface-navy .zweitakt .accent).
   Nach unten mehr Luft als zwischen den übrigen Zeilen, damit Headline und
   Wortmarke nicht als ein Block gelesen werden. */
.site-footer__claim { margin-bottom: var(--space-4); }
.site-footer .wordmark { font-size: 2.5rem; }
.site-footer__slogan { color: var(--on-navy); max-width: 28ch; }
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  list-style: none;
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--on-navy);
}
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  color: var(--on-navy-accent);
}
/* Credit dezent, aber als Ziel mindestens 24 px hoch (WCAG 2.5.8) */
.site-footer__credit a {
  display: inline-block;
  min-height: 24px;
  padding-block: 3px;
  color: var(--on-navy-accent);
}

@media (min-width: 768px) {
  .site-footer { padding-block: var(--space-16); }
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .site-footer__meta,
  .site-footer__claim { grid-column: 1 / -1; }
  .site-footer__claim { margin-bottom: var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .site-header, .sticky-bar { transition: none !important; }
  .btn:hover { transform: none; }
}

@media print {
  .site-header, .sticky-bar, .skip-link { display: none !important; }
  .page-static main { padding-top: 0; }
}