/* ─── DESIGN TOKENS · Single Source of Truth ────────────────────────
   Kontrast-Ratios beziehen sich auf das jeweilige --bg.
   Pflicht-Ziele: Body ≥ 4.5:1 · UI/Large ≥ 3:1 (WCAG 2.1 AA).
   Sub-Pages können NICHT mehr eigene :root-Token-Blocks überschreiben —
   Page-Overrides müssen scoped sein (z.B. main.legal { --t2: ... }). */
:root {
  /* Brand-Akzent — zwei Varianten */
  --a:        oklch(67% 0.14 52);   /* #C4843A · UI/Buttons/Hero-BG (5.4:1 weiß auf --a) */
  --a-text:   oklch(54% 0.13 48);   /* #9B5E1F · Body-Links auf --bg (4.62:1 ✓ AA) */
  --a-d:      oklch(67% 0.14 52 / .09);
  --a-r:      oklch(67% 0.14 52 / .25);

  /* Flächen */
  --bg:       #f4f2ef;
  --bg2:      #eceae7;

  /* Text — Light-Mode-Skala */
  --t1:       #131110;              /* 17.8:1 ✓ AAA */
  --t2:       #4a4540;              /* 8.4:1  ✓ AAA */
  --t3:       #6b6258;              /* 5.2:1  ✓ AA   — Footer/Meta */
  --t4:       #8a8278;              /* 3.4:1  Large/UI only */

  /* Linien & Glass */
  --ln:           rgba(150,120,90,0.14);
  --lns:          rgba(150,120,90,0.08);
  --card:         rgba(252,248,242,0.50);
  --glass:        rgba(252,248,242,0.82);
  --glass-card:   linear-gradient(180deg, color-mix(in srgb,var(--t1) 8%,transparent) 0%, color-mix(in srgb,var(--t1) 3%,transparent) 100%);
  --glass-border: rgba(160,130,95,0.22);
  --glass-shine:  rgba(255,252,246,0.88);

  /* Radius-Skala (konzentrisch gestaffelt für Liquid-Glass-Nesting) */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  28px;   /* konzentrische Glas-Shells um Pill-Reihen (badge-menu) */
  --r-pill: 999px;

  /* Schatten-Skala */
  --sh-sm: 0 1px 4px rgba(100,70,30,0.06);
  --sh-md: 0 2px 14px rgba(100,70,30,0.08), 0 1px 4px rgba(100,70,30,0.05);
  --sh-lg: 0 2px 40px rgba(100,70,30,0.10), 0 1px 6px rgba(100,70,30,0.06);

  /* Status-Skala (gut/mittel/schwach · Rating, Badges, Indicator) */
  --ok:      oklch(50% 0.15 145);     /* Grün-Foreground · 5.0:1 ✓ AA */
  --ok-bg:   oklch(66% 0.14 155 / .12);
  --ok-bd:   oklch(66% 0.14 155 / .40);
  --warn:    oklch(58% 0.14 85);      /* Amber-Foreground (anders als --a-text) · 4.7:1 ✓ AA */
  --warn-bg: oklch(70% 0.14 62 / .10);
  --warn-bd: oklch(70% 0.14 62 / .40);
  --err:     oklch(52% 0.2 22);       /* Rot-Foreground · 5.2:1 ✓ AA */
  --err-bg:  oklch(60% 0.2 22 / .12);
  --err-bd:  oklch(60% 0.2 22 / .40);
}
[data-theme="dark"] {
  /* Brand-Akzent — heller auf dunklem BG */
  --a:        oklch(73% 0.13 58);   /* #D89858 · 6.1:1 ✓ AA */
  --a-text:   oklch(78% 0.12 60);   /* #E8B07A · 8.0:1 ✓ AAA — Body-Links */
  --a-d:      oklch(73% 0.13 58 / .12);
  --a-r:      oklch(73% 0.13 58 / .28);

  /* Flächen — EIN einheitlicher Wert (vereint #100e0c / #0c0b0f / #14110d).
     Mai 2026: --bg2 minimal wärmer (#1d1814 statt #1a1714) — User-Feedback
     fragen.html Dark-BG wirkt heller/wärmer, daher leichter Lift in Rot-Anteil. */
  --bg:       #100e0c;
  --bg2:      #1d1814;

  /* Text — Dark-Mode-Skala mit eigenen Werten (NICHT Light-Mode-recyceln!) */
  --t1:       #f0ece8;              /* 16.4:1 ✓ AAA */
  --t2:       #d8cbbf;              /* 11.1:1 ✓ AAA — fixt Impressum-Bug (war #7a7068 = 4.0:1) */
  --t3:       #a89c90;              /* 6.2:1  ✓ AA  — fixt Footer-Bug (war #3a3430 = 1.4:1) */
  --t4:       #7a6f64;              /* 3.5:1  Large/UI only */

  --ln:           rgba(255,255,255,0.10);
  --lns:          rgba(255,255,255,0.06);
  --card:         rgba(24,20,17,0.50);
  --glass:        rgba(24,20,17,0.62);
  --glass-card:   linear-gradient(180deg, color-mix(in srgb,var(--t1) 10%,transparent) 0%, color-mix(in srgb,var(--t1) 4%,transparent) 100%);
  --glass-border: rgba(255,255,255,0.10);
  --glass-shine:  rgba(255,255,255,0.06);

  --sh-sm: 0 1px 6px rgba(0,0,0,0.30);
  --sh-md: 0 2px 16px rgba(0,0,0,0.30), 0 1px 6px rgba(0,0,0,0.18);
  --sh-lg: 0 4px 48px rgba(0,0,0,0.32), 0 2px 10px rgba(0,0,0,0.14);

  /* Status-Skala — Dark-Mode (heller, wärmer) */
  --ok:      oklch(72% 0.16 150);     /* 7.8:1 ✓ AAA */
  --ok-bg:   oklch(72% 0.16 150 / .14);
  --ok-bd:   oklch(72% 0.16 150 / .45);
  --warn:    oklch(76% 0.13 75);      /* 9.2:1 ✓ AAA */
  --warn-bg: oklch(76% 0.13 75 / .12);
  --warn-bd: oklch(76% 0.13 75 / .42);
  --err:     oklch(72% 0.18 24);      /* 6.4:1 ✓ AA */
  --err-bg:  oklch(72% 0.18 24 / .14);
  --err-bd:  oklch(72% 0.18 24 / .45);
}

/* ─── Reduced Motion · global SSOT ───────────────────────────────
   War nur inline in index.html — gilt jetzt für ALLE Seiten, die theme.css
   laden. Respektiert OS-Einstellung „Bewegung reduzieren". */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Body-Link Default · WCAG-AA-konform (--a-text statt --a) ───
   Body-Akzent --a (#C4843A) ist nur 3.05:1 auf --bg → AA-Fail für Body-Text.
   --a-text ist gedunkelt auf 4.62:1 (Light) bzw. 8.0:1 (Dark) — passt für
   normale Schriftgrößen. Hover bleibt auf --a für sichtbares Feedback. */
a { color: var(--a-text); text-decoration: none; }
a:hover { color: var(--a); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; border-radius: 2px; }

/* ─── Text-Markierung · amber-getönt statt Browser-Blau (global, Light+Dark via --a) ───
   Separate Regeln statt Komma: ::selection + ::-moz-selection dürfen NICHT
   kombiniert werden (sonst verwirft der Browser die ganze Regel). Text bleibt
   --t1 für maximale Lesbarkeit über der Tönung. */
::selection { background: color-mix(in srgb, var(--a) 30%, transparent); color: var(--t1); text-shadow: none; }
::-moz-selection { background: color-mix(in srgb, var(--a) 30%, transparent); color: var(--t1); text-shadow: none; }

/* Progress-Dot-Scrollspy (rechte Punkt-Navigation auf themen/standpunkte/fragen/blog)
   entfernt — User: „funktioniert nicht richtig". Zentral ausgeblendet (überschreibt das
   inline-CSS aller Seiten). Toter Markup/JS-Rest wird im Cross-Page-Sweep gestrippt. */
.progress-nav { display: none !important; }

/* Keine Pfeile in CTA-Buttons (User-Wunsch, mehrfach). Killt den ›/→ des
   Badge-Dropdown-CTA zentral auf allen Seiten (inline-::after wird überschrieben).
   Der Badge-Toggle-Caret .badge-chevron bleibt (Dropdown-Affordance, kein CTA-Pfeil). */
.badge-link--cta::after { content: none !important; }

/* Rechtslinks (Impressum/Datenschutz) im Badge-Dropdown — dezent, da der Footer
   global entfernt wurde. Halten Impressum 1-Klick erreichbar (Impressumspflicht
   DDG §5). html-Prefix schlägt das per-Seite-Inline .badge-link. */
/* Höhere Spezifität + !important nötig (Badge-Menü-Links sind mit !important gesetzt).
   Impressum + Datenschutz: nebeneinander (inline-block) + viel kleiner + Sentence-Case
   → dezente Rechtszeile unter der Navigation. Live per Chrome verifiziert. */
/* Legal-Links als dezente, ZENTRIERTE Fußzeile im Menü („Impressum · Datenschutz").
   text-align:center am Menü zentriert nur die inline-block-Legal-Links — alle
   Nav-Items sind display:flex (block-level) und bleiben unberührt. */
/* font-size:0 killt den Whitespace-Textknoten zwischen den Legal-Links (≈4px Links-
   Versatz des Punkts); alle Menü-Kinder setzen eigene font-size — gefahrlos. */
html .badge-menu { text-align: center; font-size: 0; }
/* Der Trenner über der Fußzeile: kurz + mittig statt volle Breite — leiser */
html .badge-menu .badge-divider:last-of-type { width: 38%; margin: .3rem auto; opacity: .65; }
html .badge-menu a.badge-link--legal {
  display: inline-block !important;
  width: auto !important;
  font-size: .52rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: .03em !important;
  color: var(--t3) !important;
  /* Beide Links IDENTISCH breit (feste Breite, Text zentriert) — „Impressum" und
     „Datenschutz" sind sonst textbreit verschieden (User 12.06.2026). Breite trägt
     auch EN („Legal notice"/„Privacy"). Punkt sitzt absolut in der Lückenmitte. */
  width: auto !important; /* auto statt fix 4.3rem: das Paar bleibt schmal genug für EINE Zeile (kein Umbruch → kein Versatz), egal ob „Impressum/Datenschutz" oder EN „Legal notice/Privacy" (User 14.06.2026) */
  text-align: center !important;
  padding: .25rem 0 !important;
  margin: 0 !important;
  position: relative;
  opacity: .85;
  /* Fußzeilen-Links sind bewusst klein — die 44px-Touch-Regel gilt hier NICHT
     (User iPhone 12.06.2026: „viel zu hoch", Geister-Kreis um Privacy). */
  min-height: 0 !important;
}
html .badge-menu a.badge-link--legal:hover {
  color: var(--t1) !important;
  background: transparent !important;
  transform: none !important;
}
/* (Alter App-Footer-Punkt + .9rem-Margin zwischen den Legal-Links entfernt 14.06.2026 —
   die Fußzeile ist jetzt ein 3-Spalten-Grid OHNE Trenner, s. .badge-foot unten.) */

/* ── Touch-Gesten fürs Menü (theme.js „Mobile-Menü-Gesten") ─────────
   touch-action:none: Wisch-Geste auf dem offenen Menü scrollt NICHT die Seite —
   theme.js übersetzt sie in Hover+Auswahl. .finger-hover = Hover-Optik unterm Finger. */
@media (hover: none) {
  html .badge-menu { touch-action: none; }
}
/* .finger-hover trägt die volle Hover-Pille (siehe Pillen-Regel bei .badge-link:hover) */
html .badge-menu .badge-link--cta.finger-hover { filter: brightness(1.07); }
html .badge-menu a.badge-link--legal.finger-hover { color: var(--t1) !important; background: transparent !important; }

/* ── Sekundär-Gruppe „Wissen" (SEO/Ressourcen) ─────────────────────
   Q1-Entscheidung 13.06.2026: Glossar/Rechner/Blog/Themen/Standpunkte sind der
   SEO-Motor, nicht der Verkaufspfad. Im Menü bleiben sie crawlbar + verlinkt, lesen
   sich aber LEISER als die primären Items (Start/Pakete/Fragen + CTA). Kleines
   Caps-Label trennt den Block; die Links sind gedämpft (--t2), Hover/Active geben
   trotzdem die volle Amber-Pille (Regel bei .badge-link:hover greift weiter). */
/* „Wissen" ist jetzt ein ausklappbarer Button (Toggle via theme.js → .wissen-open
   am #nameBadge). Standardmäßig eingeklappt: die 5 SEO-Items verstecken sich, damit
   der Verkaufspfad (Start/Pakete/Fragen + CTA) nicht zwischen ihnen ertrinkt. */
/* „Wissen" sitzt jetzt als kleiner Tap-/Hover-Toggle in der Fußzeile NEBEN Impressum/
   Datenschutz (User 14.06.2026). Optik wie die Legal-Links + Chevron, der beim Ausklappen
   rotiert. Die 5 Wissen-Items klappen darüber auf. */
/* Fußzeile: Wissen · Impressum · Datenschutz — DREI GLEICH breite Spalten (je 1fr),
   zentriert, großzügig verteilt (User 14.06.2026 „alle 3 identisch breit, viel Platz").
   KEIN Trenner-Punkt, KEIN Hover-Pill, KEIN Hover-Ausklappen — „Wissen" klappt
   AUSSCHLIESSLICH per Klick auf/zu (.wissen-open via theme.js). */
html .badge-menu .badge-foot {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center; gap: .28rem;
  margin-top: .55rem; padding-top: .5rem;
  border-top: 1px solid color-mix(in srgb, var(--t1) 10%, transparent);
}
/* Alle drei identisch: gleiche Schrift (Barlow), Größe, Gewicht, Farbe — je 1fr, zentriert. */
html .badge-menu .badge-foot > .badge-group,
html .badge-menu .badge-foot a.badge-link--legal {
  display: inline-flex !important; align-items: baseline; justify-content: center;
  gap: .1rem; width: 100% !important; box-sizing: border-box !important;
  margin: 0 !important; padding: .3rem .05rem !important;
  font-family: 'Barlow', sans-serif !important; font-size: .48rem !important;
  font-weight: 500 !important; letter-spacing: .02em !important; text-transform: none !important;
  text-align: center !important; white-space: nowrap;
  color: var(--t3) !important; opacity: .9;
  background: none !important; border: none !important; border-radius: 6px !important;
  transition: color .16s, opacity .16s !important; cursor: pointer;
}
/* Hover/Focus: NUR Farbwechsel — keine Pille, kein Ausklappen. */
html .badge-menu .badge-foot > .badge-group:hover,
html .badge-menu .badge-foot a.badge-link--legal:hover,
html .badge-menu .badge-foot > .badge-group:focus-visible,
html .badge-menu .badge-foot a.badge-link--legal:focus-visible {
  color: var(--t1) !important; opacity: 1; background: none !important;
}
html .badge-menu .badge-foot > .badge-group:focus-visible,
html .badge-menu .badge-foot a.badge-link--legal:focus-visible {
  outline: 2px solid var(--a); outline-offset: 2px;
}
/* Chevron an „Wissen" = Toggle-Indikator; rotiert NUR bei .wissen-open (= Klick). */
html .badge-menu .badge-foot > .badge-group::after {
  content: '›'; font-style: normal; font-size: .9em; line-height: 1; opacity: .55;
  display: inline-block; transform-origin: center;
  transition: transform .28s cubic-bezier(.5,.1,.2,1), opacity .2s;
}
html .name-badge.wissen-open .badge-menu .badge-foot > .badge-group::after {
  transform: rotate(90deg); opacity: 1;
}
/* Eingeklappt (Default): Wissen-Items unsichtbar + aus dem Fluss gerollt. */
html .name-badge:not(.wissen-open) .badge-menu .badge-link--wissen {
  /* min-height:0 ZWINGEND — der Mobile-Touch-Target gibt .badge-link min-height:44px, und
     min-height schlägt max-height → sonst bleiben die 5 eingeklappten Wissen-Links je 44px
     hoch = ~220px unsichtbare Geisterfläche im Menü (User 17.06.2026 „viel zu viel Leerfläche"). */
  max-height: 0; min-height: 0 !important; opacity: 0; visibility: hidden; overflow: hidden;
  padding-top: 0 !important; padding-bottom: 0 !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
  pointer-events: none;
  /* .28s Verzögerung beim EINklappen: überbrückt den Moment, in dem die Maus von „Wissen"
     zum ersten Item wandert (sonst reißt :has() kurz ab → instant-collapse, User 14.06.2026).
     Das AUSklappen bleibt sofort (transition-delay:0 in der :has-Regel unten). */
  transition: max-height .26s cubic-bezier(.5,.1,.2,1) .28s, opacity .18s .28s,
              padding .2s .28s, margin .2s .28s;
}
/* Ausgeklappt (per Klick): Items sichtbar + volle Item-Größe wie Start/Pakete.
   Die Collapsed-Regel nullt das Padding mit !important → hier zurückholen, sonst
   sind die per Klick ausgeklappten Items gequetscht (früher tat das nur die Hover-Regel). */
html .name-badge.wissen-open .badge-menu .badge-link--wissen {
  max-height: 3rem; opacity: 1; visibility: visible; pointer-events: auto;
  padding-top: .55rem !important; padding-bottom: .55rem !important;
  transition: max-height .26s cubic-bezier(.5,.1,.2,1), opacity .18s,
              padding .2s, margin .2s;
}
html .badge-menu .badge-link--wissen:not(:hover):not(.finger-hover):not(.active):not([aria-current="page"]) {
  color: var(--t2) !important; font-weight: 600 !important;
}
/* (Früher: Desktop-Hover-Ausklappen via :has(). ENTFERNT 14.06.2026 — „beim Drüberhovern
   nichts ausklappen, erst beim Klick auf Wissen, und erst beim erneuten Klick wieder ein".
   Jetzt steuert AUSSCHLIESSLICH .wissen-open (Klick-Toggle via theme.js) das Auf-/Zuklappen
   — auf Touch UND Desktop gleich.) */
@media (prefers-reduced-motion: reduce) {
  html .name-badge:not(.wissen-open) .badge-menu .badge-link--wissen,
  html .name-badge.wissen-open .badge-menu .badge-link--wissen { transition: none; }
  html .badge-menu .badge-group::after { transition: none; }
}

/* Cursor bleibt Pfeil über Text (User-Wunsch) — nur Interaktives zeigt Pointer,
   echte Texteingaben den Text-Cursor. */
body { cursor: default; }
a[href], button, [role="button"], summary, label[for], select,
input[type="checkbox"], input[type="radio"], input[type="range"], input[type="submit"], input[type="button"] { cursor: pointer; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, [contenteditable="true"] { cursor: text; }

/* ─── Seiten-Übergang (Cross-Document View Transitions) · ZENTRAL ───
   Vorher nur inline auf 6 Seiten → Übergänge waren „überall unterschiedlich". Jetzt
   zentral in theme.css → ALLE Seiten (laden theme.css) haben denselben Slide-Übergang.
   nav-back kehrt die Richtung um (Zurück-Navigation), wo der head-Script die Klasse setzt;
   sonst Vorwärts-Slide. Browser ohne MPA-View-Transitions navigieren einfach normal. */
@view-transition { navigation: auto; }
@keyframes vt-in       { from { translate: 28% 0;  opacity: 0; filter: blur(3px); } }
@keyframes vt-out      { to   { translate: -10% 0; opacity: 0; } }
@keyframes vt-in-back  { from { translate: -28% 0; opacity: 0; filter: blur(3px); } }
@keyframes vt-out-back { to   { translate: 10% 0;  opacity: 0; } }
::view-transition-new(root) { animation: 420ms cubic-bezier(.22,1,.36,1) both vt-in; }
::view-transition-old(root) { animation: 260ms ease-in both vt-out; }
html.nav-back ::view-transition-new(root) { animation-name: vt-in-back; }
html.nav-back ::view-transition-old(root) { animation-name: vt-out-back; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root), ::view-transition-old(root) { animation: none !important; }
}

/* ─── Artikel-Lesefläche (Blog + Glossar) · ZENTRAL ────────────────
   User: Artikel „verschwenden Screen-Estate" + „im Dark Mode zu dunkel". Fix: breitere
   Bühne + wärmeres Lese-Sheet (statt nacktem --bg). html-Prefix gewinnt über die
   Per-Page-Inline-Basis (Cascade). grid-template-columns/gap bewusst NICHT zentral
   (würde stundensatz' TOC-Layout brechen) — nur Breite + Sheet + Lese-Maße.
   Greift auf allen ~85 Artikeln (Blog+Glossar); Index-Listen haben kein .art-main. */
html .article-wrap { max-width: 1320px; }
html .art-main {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg2) 55%, var(--bg) 45%) 0%,
    color-mix(in srgb, var(--bg2) 70%, var(--bg) 30%) 100%);
  border: 1px solid var(--ln);
  border-radius: var(--r-xl, 24px);
  padding: 3.2rem clamp(1.6rem, 4.2vw, 4rem) 3rem;
  box-shadow: var(--sh-md);
}
html[data-theme="dark"] .art-main {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg2) 92%, var(--bg) 8%) 0%,
    var(--bg2) 100%);
}
html .art-body > p, html .art-body p { max-width: 68ch; }
html .art-intro { max-width: 74ch; }
html .art-sidebar { top: 6.5rem; }
html .sidebar-block { border-radius: var(--r-lg, 18px); }
@media (max-width: 960px) {
  html .art-main { padding: 0; background: none; border: none; box-shadow: none; border-radius: 0; }
}
@media (max-width: 600px) {
  html .article-wrap { max-width: 100%; }
}

/* ─── Disable double-tap-zoom on touch devices ──────────────
   Pinch-zoom bleibt erhalten (kein user-scalable=no), nur das
   versehentliche Reinzoomen beim Doppel-Tap auf Buttons/Pills
   wird unterbunden. */
html, body { touch-action: manipulation; }

/* ─── Globale Typo-Skala · Single Source ─────────────────
   Pflicht: gilt portfolio-weit. Stellt sicher dass rem-basierte
   Komponenten (name-badge, btn-amber, sec-h via clamp) auf jeder
   Page gleich skalieren. Lokale html{font-size:…} in den Pages
   ist Code-Schuld und braucht's nicht. */
html { font-size: clamp(16px, 1.1vw, 24px); }

/* ─── Globale Sec-DNA · Single Source of Truth ──────────────
   Pflicht: Funnel-Page-Komponenten (Mainpage / Themen / Fragen
   / Standpunkte / Pakete / AECdisc) nutzen alle dieselbe Skala.
   Lokale Überschreibungen in Pages sind Code-Schuld. */

/* Eyebrow */
.sec-label {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  /* --a-text (dunklere Amber-Stufe) statt --a: kleine Caps brauchen 4.5:1, --a (#C4843A)
     liefert nur ~3.2:1. --a-text bleibt klar Amber, besteht aber AA. Der Strich (::before)
     bleibt hell-amber (dekorativ, kein Textkontrast nötig). */
  color: var(--a-text); font-weight: 700; margin-bottom: .7rem;
  display: flex; align-items: center; gap: .5rem;
}
.sec-label::before {
  content: ''; width: 14px; height: 1.5px; background: var(--a); flex-shrink: 0;
}

/* Display Headline */
.sec-h {
  font-family: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  font-weight: 900; letter-spacing: -.02em; line-height: .94;
  text-transform: uppercase; color: var(--t1); margin-bottom: .8rem;
  /* Lange dt. Komposita (z. B. AUSWERTUNGSGESPRÄCH) sonst breiter als die Mobile-Zeile
     → horizontaler Overflow + abgeschnittenes Wort. hyphens:auto greift via <html lang="de">
     nur wenn ein Wort nicht passt, ändert normales Wort-Umbrechen nicht. */
  overflow-wrap: break-word; hyphens: auto;
}
.sec-h .bar {
  display: inline-block; background: var(--a); color: #0c0b0f;
  padding: 0 .12em .04em; line-height: 1.02; border-radius: 4px;
}
/* Note: .sec-h .a hat unterschiedliche Semantik je Page (Index:
   nur Amber-Color, Pakete: Bar-Highlight) → lokal lassen, nicht global. */

/* Globale .bar-Highlight-Utility (Single Source of Truth) ──────────
   Bisher pro Seite (glossar/blog/rechner) bare neu definiert mit leicht
   abweichendem Padding. Jetzt zentral, damit der Amber-Marker site-weit
   identisch sitzt. Headline-spezifische Scopes (.sec-h .bar) bleiben für
   Vererbungs-Feinheiten erhalten. */
html .bar {
  display: inline-block; background: var(--a); color: #0c0b0f;
  padding: 0 .12em .04em; line-height: 1.02; border-radius: 4px;
}

/* Lede */
.sec-intro {
  font-size: .94rem; color: var(--t2); line-height: 1.6;
  text-wrap: balance; max-width: 60ch;
}

/* Big-Number-Background (Schmuck) */
.sec-num {
  position: absolute; top: -.05em; left: -.02em;
  font-family: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1;
  color: var(--a); opacity: .07;
  pointer-events: none; user-select: none; z-index: 0;
}
[data-theme="light"] .sec-num { opacity: .12; }

/* ─── Buttons · .btn-amber / .btn-ghost (Sales-Variants) ────
   Single Source of Truth für CTA-Buttons (Pakete, AECdisc,
   Ueber-mich, 404, leistungen/...). EINE BUTTON-FORM in 3 Größen
   (S/M/L), alle pillen-rund (999px = Halbkreise links+rechts).
   Orange = orange-eingefärbtes Liquid Glass (NICHT solid amber):
   amber-Gradient bei 78–92% opacity + backdrop-blur + top-highlight
   + Amber-Glow-Shadow. Editorial. Apple Liquid Glass DNA. */
html .btn-amber,
html .btn-ghost {
  display: inline-flex !important; position: relative; isolation: isolate; align-items: center; gap: .45rem;
  padding: .7rem 1.5rem;
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: .74rem !important; font-weight: 700 !important;
  letter-spacing: .09em !important; text-transform: uppercase;
  border-radius: 999px !important;
  text-decoration: none !important;
  cursor: pointer; line-height: 1.2;
  white-space: nowrap;
  width: fit-content;
  transition: filter .18s, transform .15s, background .18s, border-color .18s, box-shadow .18s;
}
html .btn-amber {
  /* Orange-Glas, durchscheinend getönt (nicht deckend): Hintergrund schimmert amber durch,
     starker Backdrop-Blur hält den dunklen Label-Kontrast stabil; Fase + Sheen wie bei Glas. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a) 54%, transparent) 0%,
    color-mix(in srgb, var(--a) 72%, transparent) 100%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.85) brightness(1.04);
  backdrop-filter: blur(16px) saturate(1.85) brightness(1.04);
  color: #0c0b0f !important;
  border: 1px solid color-mix(in srgb, var(--a) 55%, transparent) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -1.5px 2px color-mix(in srgb, oklch(45% 0.12 42) 42%, transparent),
    0 8px 20px -6px color-mix(in srgb, var(--a) 38%, transparent),
    0 2px 5px rgba(0,0,0,.16) !important;
}
html .btn-amber:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 12px 30px color-mix(in srgb, var(--a) 42%, transparent),
    0 3px 8px rgba(0,0,0,.1) !important;
}
/* Orange-Glas Sheen: schmaler, weich auslaufender Lichtbogen oben (kein harter Glanz-Lozenge) */
html .btn-amber::before,
html .btn.btn-solid::before,
html .btn-primary::before,
html .analyse-cta-float::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 42%;
  border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, oklch(98% 0.03 85 / .5) 0%, oklch(92% 0.05 75 / .14) 55%, transparent 100%);
  pointer-events: none;
}
html .btn-ghost {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--t1) 9%, transparent) 0%,
    color-mix(in srgb, var(--t1) 3%, transparent) 100%) !important;
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  /* --a-text (gedunkeltes Amber, 4.6:1) statt --a: volles --a auf dem hellen Ghost-Glas
     war nur ~2:1 (amber-on-paper, WCAG-Fail). --a-text bleibt klar Amber, liest aber. */
  color: var(--a-text) !important;
  border: 1px solid color-mix(in srgb, var(--a) 35%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--t1) 24%, transparent),
    0 6px 18px rgba(0,0,0,.06),
    0 1px 3px rgba(0,0,0,.04) !important;
}
html .btn-ghost:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a) 14%, transparent) 0%,
    color-mix(in srgb, var(--a) 6%, transparent) 100%) !important;
  border-color: color-mix(in srgb, var(--a) 60%, transparent) !important;
  transform: translateY(-1px);
}

/* ─── Grain-Overlay · Single Source of Truth ────────────────
   Subtle SVG-Noise als grain over the page. Auf JEDER Page
   die Brand-Optik braucht. Lokale Duplikate in Pages dürfen
   ersatzlos raus. */
.grain {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 9999; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ─── Apple Liquid Glass · .paper-panel (Card-Layer) ─────────
   Stand: 02.06.2026. Für Glass-Cards in den Funnel-Pages
   (themen sec-right paper-panels, fragen FAQ-paper, standpunkte
   thesis-paper, etc.). EINHEITLICH überall. */
.paper-panel {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--t1) 10%, transparent) 0%,
    color-mix(in srgb, var(--t1) 4%, transparent) 100%);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  /* iOS/Safari-Bug: die backdrop-filter-Region wird NICHT mit dem border-radius beschnitten →
     unten ragt ein eckiges „Schatten"-Rechteck raus (User-Screenshot iPhone 05.06.2026).
     Die Maske zwingt WebKit, die gefilterte Fläche zu runden. Chrome/Firefox: no-op. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--t1) 13%, transparent);
  border-radius: var(--r-xl, 24px);
  padding: 1.4rem;
  /* Gerichteter Glas-Rim (hell oben+links, dunkel unten+rechts) = Refraktions-Anmutung */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--t1) 30%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--t1) 16%, transparent),
    inset -1px 0 0 rgba(0,0,0,.05),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 14px 40px rgba(0,0,0,.10),
    0 4px 10px rgba(0,0,0,.05);
}
/* iOS/Safari: gleicher WebKit-Bug wie bei .paper-panel — die backdrop-filter-Region wird
   NICHT mit dem border-radius beschnitten. Sichtbar (iPhone 05.06.2026): Badge-Menü ragt
   unten eckig raus („zu lang"), Badge-Button rendert ein Geister-Pill ins Menü. Die Maske
   zwingt die Glas-Region in die Rundung; Chrome/Firefox: visuell no-op (verifiziert). */
/* (badge-btn/badge-menu NICHT mehr hier: deren Glas liegt jetzt auf geclippten Pseudos —
   Maske/isolation am Host würde die Backdrop-Root kappen und den Blur töten.) */
.seg-toggle, #cookie-banner {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}
/* Specular: Lichtfang in der oberen Ecke + schwacher Gegenpunkt unten rechts.
   Geteilt über alle großen Glas-Flächen (Critic-Top-Hebel: nicht nur paper-panel).
   Eck-verankert + low-alpha → kein Text-Washing. */
.paper-panel::before,
.calc-tool::before,
html .badge-menu::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 0;
  /* Pointer-reaktiver Glas-Shine: der Glanzpunkt folgt der Maus (--gx/--gy per theme.js
     in %, Default obere Ecke). Realistischer Lichtreflex statt statischer Eck-Glanz. */
  background:
    radial-gradient(circle 420px at var(--gx, 12%) var(--gy, -8%), rgba(255,255,255,.26), transparent 64%),
    radial-gradient(70% 60% at 112% 116%, rgba(255,255,255,.07), transparent 60%);
}
/* Inhalt über dem Specular halten */
.calc-tool > *, html .badge-menu > * { position: relative; z-index: 1; }
[data-theme="dark"] .paper-panel {
  background: linear-gradient(180deg,
    rgba(255,255,255,.12) 0%,
    rgba(255,255,255,.05) 100%);
  border-color: rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 18px 48px rgba(0,0,0,.42),
    0 5px 14px rgba(0,0,0,.24);
}

/* ─── .blog-card · Content-Karte (Single Source of Truth) ──────────
   Bisher in glossar UND blog separat inline definiert → driftete auseinander
   (Padding 1.6 vs 1.5, Hover MIT vs OHNE box-shadow). Jetzt zentral. Glas-Tiefe
   auf .paper-panel-Niveau angeglichen (blur 30px / saturate 180%), damit alle
   Content-Karten site-weit gleich tief wirken. Page-spezifische Layout-Bits
   (glossar: flex-column + arrow; blog: stretched-link/position) bleiben inline. */
html .blog-card {
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--sh-md), inset 0 1px 0 var(--glass-shine);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
html .blog-card:hover {
  border-color: color-mix(in srgb, var(--a) 40%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0,0,0,.12), inset 0 1px 0 var(--glass-shine);
}

/* ─── Apple-Style Segmented Toggles (theme + lang) ──────────
   Single Source of Truth. EINE Komponente .seg-toggle für beide:
   Glas-Pille mit zwei Segmenten + gleitendem Amber-Glas-Thumb.
   Theme:  [☀ | ☾]  ·  data-mode="light|dark"
   Sprache:[DE | EN] ·  data-lang="de|en"
   Thumb-Position folgt dem aktiven State (left/right). Labels via
   ::before/::after, aktives Label dunkel (über Amber-Thumb). */
.seg-toggle {
  position: fixed;
  right: 20px;
  z-index: 9999;
  display: block;
  width: 76px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--t1) 13%, transparent);
  cursor: pointer;
  overflow: hidden;
  /* Liquid-Glass-Basis */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--t1) 9%, transparent) 0%,
    color-mix(in srgb, var(--t1) 3%, transparent) 100%);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--t1) 24%, transparent),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 6px 18px rgba(0,0,0,.10),
    0 1px 3px rgba(0,0,0,.05);
  /* Kein width-Transition mehr — Breite ist nach is-collapsible statisch (rund),
     so kein Lade-Schrumpfen + snappy beim Umschalten (User 17.06.2026). */
  transition: box-shadow .2s, transform .15s;
}
.seg-toggle:hover { transform: translateY(-1px); }
.seg-toggle:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
/* DE/EN unten rechts in der Ecke (auf Höhe der Sticky-CTA bottom:16); Theme-Schalter
   gestapelt drüber. Schmale Rechts-Spalte → kollidiert nicht mit der zentrierten .cta-dock. */
.theme-toggle-float, .seg-toggle.theme-seg { bottom: 60px; }
.lang-toggle-float, .seg-toggle.lang-seg  { bottom: 16px; }

/* Gleitender Amber-Glas-Thumb (echtes Element für runde Ecken) */
.seg-thumb {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a) 80%, white 14%) 0%,
    color-mix(in srgb, var(--a) 94%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 2px 6px color-mix(in srgb, var(--a) 38%, transparent),
    0 1px 2px rgba(0,0,0,.12);
  transition: left .26s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.theme-seg[data-mode="dark"] .seg-thumb,
.lang-seg[data-lang="en"] .seg-thumb { left: calc(50% + 1px); }

/* Labels via Pseudo-Elemente (über dem Thumb) */
.seg-toggle::before,
.seg-toggle::after {
  position: absolute; top: 0; height: 100%; width: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 700; letter-spacing: .07em;
  z-index: 1; pointer-events: none;
  transition: color .2s;
}
.seg-toggle::before { left: 0; }
.seg-toggle::after  { right: 0; }
.lang-seg::before { content: 'DE'; font-size: .64rem; }
.lang-seg::after  { content: 'EN'; font-size: .64rem; }
.theme-seg::before { content: '\2600'; font-size: .92rem; }   /* ☀ */
.theme-seg::after  { content: '\263D'; font-size: .92rem; }   /* ☽ */

/* Aktives Label dunkel (über Amber-Thumb), inaktives gedämpft */
.lang-seg[data-lang="de"]::before,
.lang-seg[data-lang="en"]::after,
.theme-seg[data-mode="light"]::before,
.theme-seg[data-mode="dark"]::after { color: #0c0b0f; }
.lang-seg[data-lang="de"]::after,
.lang-seg[data-lang="en"]::before,
.theme-seg[data-mode="light"]::after,
.theme-seg[data-mode="dark"]::before { color: var(--t3); }

/* ── Rund & permanent kompakt (.is-collapsible via theme.js): runder Schalter, der nur
   das aktive Label zeigt; ein Tipp schaltet sofort um. KEIN Ausklappen, kein gleitender
   Thumb (User 17.06.2026: „rund, tippen=umschalten, ohne viel Action").
   Ohne JS bleibt die volle [DE|EN]/[☀|☾]-Pille (graceful). */
.seg-toggle.is-collapsible { width: 36px; }
.seg-toggle.is-collapsible .seg-thumb { opacity: 0; }
.seg-toggle.is-collapsible::before,
.seg-toggle.is-collapsible::after { width: 100%; left: 0; right: 0; }
/* nur das AKTIVE Label sichtbar (das inaktive ausblenden) */
.lang-seg.is-collapsible[data-lang="de"]::after,
.lang-seg.is-collapsible[data-lang="en"]::before,
.theme-seg.is-collapsible[data-mode="light"]::after,
.theme-seg.is-collapsible[data-mode="dark"]::before { opacity: 0; }
/* aktives Label amber (kein Thumb dahinter) */
.lang-seg.is-collapsible[data-lang="de"]::before,
.lang-seg.is-collapsible[data-lang="en"]::after,
.theme-seg.is-collapsible[data-mode="light"]::before,
.theme-seg.is-collapsible[data-mode="dark"]::after { color: var(--a-text, var(--a)); }
@media (prefers-reduced-motion: reduce) { .seg-toggle { transition: box-shadow .2s; } }

/* Mobile: etwas kompakter, gleiche Logik. Höhe ≥44px (WCAG 2.5.5 / Apple HIG —
   der Sprach-/Theme-Toggle ist ein echter Touch-Target, kein Legal-Kleinkram).
   Collapsed-Breite zieht mit auf 44px → bleibt rund + sicher treffbar. */
@media (max-width: 600px) {
  .seg-toggle { right: 12px; width: 70px; height: 44px; }
  .seg-toggle.is-collapsible { width: 44px; }
  .theme-toggle-float, .seg-toggle.theme-seg { bottom: 66px; }
  .lang-toggle-float, .seg-toggle.lang-seg  { bottom: 14px; }
}

/* ─── Unified Button System (Hero-DNA, single source of truth) ────
   All CTA buttons follow the hero button shape & feel:
     999px pill · amber bg · white text · Barlow Condensed 700 · letter-spaced
   Uses `html ` prefix for higher specificity (overrides inline page styles).
─────────────────────────────────────────────────────────────────── */
html .btn,
html .btn-primary,
html .back-link,
html .analyse-cta-float,
html .badge-link--cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .7rem 1.5rem;
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 999px !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: filter .18s, background .18s, border-color .18s, transform .15s, box-shadow .18s, color .18s;
  white-space: nowrap;
  width: fit-content;
  line-height: 1.2;
}

/* SOLID variant — primary CTAs · ORANGE LIQUID GLASS (Apple DNA) */
html .btn.btn-solid,
html .btn-primary,
html .analyse-cta-float {
  position: relative; isolation: isolate;
  /* Gleiches lit-from-within-Radial wie die Selected-Chips (.tog.sel) — der alte
     54–72%-transparente Verlauf wurde auf hellen Panels blass („Termin auswählen sieht
     anders aus", User 02.07.2026). EIN Amber-Rezept für Chips + Solid-CTAs. */
  background: radial-gradient(125% 145% at 50% -12%,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 60%, white 24%) 0%,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 84%, transparent) 46%,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 94%, black 5%) 100%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  color: #0c0b0f !important;
  border: 1px solid color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 68%, transparent) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.6),
    inset 0 -2px 3px rgba(120,55,8,.26),
    0 0 14px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 30%, transparent),
    0 8px 24px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 30%, transparent),
    0 2px 6px rgba(0,0,0,.10) !important;
}
html .btn.btn-solid:hover,
html .btn-primary:hover,
html .analyse-cta-float:hover {
  filter: brightness(1.06);
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 12px 30px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 42%, transparent),
    0 3px 8px rgba(0,0,0,.1) !important;
}

/* GHOST variant — secondary/back actions.
   Kein backdrop-filter hier: diese Regel matcht auch .badge-link--cta, und im Menü ist
   dessen Backdrop bewusst aus (iOS-Leak) — ein Glas hier würde dort durchschlagen.
   .back-link ist ungenutzt; der einzige echte Ghost-Button .btn-ghost trägt sein
   eigenes Glas (oben). Hier nur die Textfarbe AA-fest machen. */
html .back-link,
html .badge-link--cta {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 35%, transparent) !important;
  /* --a-text statt --a: volles Amber auf hellem Grund war ~2:1 (WCAG-Fail) */
  color: var(--a-text, oklch(54% 0.13 48)) !important;
}
html .back-link:hover,
html .badge-link--cta:hover {
  background: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 10%, transparent) !important;
  border-color: var(--a, oklch(67% 0.14 52)) !important;
}

/* Badge-menu CTA: solid amber, full menu width — the "Analyse starten" action
   inside the burger dropdown should read as the primary destination, not as
   another nav-link. Override fit-content from the .btn template above. */
html .badge-menu .badge-link--cta,
html .badge-menu a.badge-link--cta {
  display: block !important;
  width: calc(100% - .5rem) !important;
  text-align: center !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 78%, white 12%) 0%,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 92%, transparent) 100%) !important;
  /* kein eigenes backdrop-filter: liegt eh auf dem Menü-Glas (dort unsichtbar) und
     war auf iOS eine weitere eckige Leak-Quelle */
  color: #0c0b0f !important;
  border: 1px solid color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 70%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 6px 18px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 30%, transparent),
    0 2px 5px rgba(0,0,0,.07) !important;
  margin: .35rem .25rem .15rem !important;
  /* Legacy-Ausgleich (Safari <18.2, Chrome <133): Barlow-Condensed-Linebox sitzt zu
     hoch → ±3px-Padding-Asymmetrie (iPhone-kalibriert 05.06.2026). Moderne Engines
     überschreiben das im @supports-Block darunter. */
  padding: calc(.65rem + 3px) 1rem calc(.65rem - 3px) !important;
}
/* Optische Zentrierung der Caps-Zeile, exakt statt kalibriert: text-box trimmt die
   Linebox auf Cap-Höhe/Baseline → Text sitzt per Konstruktion mittig, in jeder Engine
   und bei jeder rem-Skalierung. Der ±3px-Hack oben war px-fix und überschoss bei
   großen Roots (1.1vw → 24px: Text ~3px zu tief, User-Screenshot 12.06.2026).
   Padding-max(): ersetzt das 44px-min-height-Strecken (Touch-Target) — min-height
   ließ den Block-Content oben kleben; stattdessen füllt symmetrisches Padding auf
   exakt 44px auf (42px = 44 − 2×1px Border; 1cap = getrimmte Texthöhe). Der em-Zweig
   gleicht die wegtrimmte Leading aus, wo die Schrift groß genug ist (Desktop-Roots). */
@supports (text-box: trim-both cap alphabetic) {
  html .badge-menu .badge-link--cta,
  html .badge-menu a.badge-link--cta {
    padding: max(calc(.65rem + .24em), calc((42px - 1cap) / 2)) 1rem !important;
    min-height: 0 !important;
    text-box: trim-both cap alphabetic;
  }
}
html .badge-menu .badge-link--cta:hover,
html .badge-menu a.badge-link--cta:hover {
  filter: brightness(1.06);
  border-color: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 85%, transparent) !important;
}

/* FLOATING CTA → Apple-Style „sticky-then-release" (Apple-Watch-Compare-Pattern):
   Der Button läuft im Flow mit, pinnt am unteren Viewport-Rand solange man durch
   <main> scrollt, und LÖST sich am Ende von <main> (vor dem Footer) — überlappt also
   nie mehr den Footer. Ein Wrapper .cta-dock (von theme.js erzeugt + ans <main>-Ende
   verschoben) trägt sticky + horizontale Zentrierung; der Pill selbst wird static. */
.cta-dock {
  position: -webkit-sticky;
  position: sticky;
  bottom: 20px;
  z-index: 50;
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  padding-bottom: 4px;
  pointer-events: none; /* leere Dock-Fläche blockiert keine Klicks auf Content dahinter */
}
.cta-dock > .analyse-cta-float { pointer-events: auto; }
html .analyse-cta-float {
  position: static;
  transform: none;
  padding: .82rem 1.7rem !important;
  font-size: .76rem !important;
}
html .analyse-cta-float:hover {
  transform: translateY(-2px) scale(1.03);
}
/* Mobil SICHTBAR (vorher ausgeblendet — User 14.06.2026 „auf Content-Seiten fehlt der
   zur-Analyse-Button mobil"). Schwebt unten mittig mit + dockt am <main>-Ende; Safe-Area
   fürs iPhone-Homeindikator-Band, etwas kompakter. */
@media (max-width: 500px) {
  .cta-dock { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin-top: 2rem; }
  html .analyse-cta-float { padding: .8rem 1.6rem !important; font-size: .82rem !important; }
}

/* States — loading, sent, error (preserved from .btn) */
html .btn.loading { opacity: .55; pointer-events: none; }
html .btn.sent    { background: oklch(52% 0.16 145) !important; pointer-events: none; filter: none; }
html .btn.error   { background: oklch(50% 0.18 25) !important; filter: none; }

/* ─── Additional button variants — hero-DNA-aligned ──────────────
   Catches CTAs that were previously styled per-page (themen-CTA,
   glossary-trigger, locked scroll-gate). They now follow the same
   pill / amber / Barlow Condensed system as the hero button. */

/* Themen CTAs ("Selbsteinschätzung starten", "Direkt zum Erstgespräch") */
html .cta-actions a,
html .cta-actions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  padding: .7rem 1.5rem !important;
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: filter .18s, background .18s, border-color .18s, transform .15s !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
/* Primary action (solid amber pill) */
html .cta-actions .cta-primary,
html .cta-actions a.cta-primary,
html .cta-actions button.cta-primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 78%, white 12%) 0%,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 92%, transparent) 100%) !important;
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  color: #0c0b0f !important;
  border: 1px solid color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 70%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 8px 24px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 32%, transparent) !important;
}
html .cta-actions .cta-primary:hover {
  filter: brightness(1.06);
  color: #0c0b0f !important;
}
/* Secondary action in .cta-actions (ghost pill) — --a-text (AA) statt --a (~2:1) */
html .cta-actions .back-link:not(.cta-primary) {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 35%, transparent) !important;
  color: var(--a-text, oklch(54% 0.13 48)) !important;
}
html .cta-actions .back-link:not(.cta-primary):hover {
  background: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 10%, transparent) !important;
  border-color: var(--a, oklch(67% 0.14 52)) !important;
}

/* Glossary trigger — small pill, ghost style, with diamond glyph */
html .glossary-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: .4em !important;
  padding: .35rem .85rem !important;
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 30%, transparent) !important;
  color: var(--a, oklch(67% 0.14 52)) !important;
  cursor: pointer !important;
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  transition: background .15s, border-color .15s, color .15s !important;
  text-decoration: none !important;
  align-self: flex-start !important;
}
html .glossary-trigger:hover {
  background: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 8%, transparent) !important;
  border-color: var(--a, oklch(67% 0.14 52)) !important;
}

/* Scroll-gate sec-cta when unlocked: align to hero pill instead of stroke-only */
html .btn.sec-cta {
  /* Inherits hero pill base from .btn rules above; just ensure consistent padding */
  padding: .65rem 1.4rem !important;
}
html .btn.sec-cta:not(.unlocked) {
  /* Locked: muted ghost. var(--t3) adaptiert (light 5.2:1 / dark 6.2:1) —
     war hardcoded #c0b09e = nur 1.9:1 im Light-Mode (WCAG-Fail). */
  background: transparent !important;
  color: var(--t3) !important;
  border-color: var(--ln, rgba(150,120,90,0.2)) !important;
  filter: saturate(0) !important;
}
html .btn.sec-cta.unlocked {
  /* Unlocked: ORANGE LIQUID GLASS (Apple DNA) — gleiche Form wie alle CTAs */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 78%, white 12%) 0%,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 92%, transparent) 100%) !important;
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  color: #0c0b0f !important;
  border: 1px solid color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 70%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 8px 24px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 32%, transparent),
    0 2px 6px rgba(0,0,0,.08) !important;
  filter: none !important;
}

/* Mobile: tighten cta-actions padding */
@media (max-width: 600px) {
  html .cta-actions a,
  html .cta-actions button { padding: .6rem 1.2rem !important; font-size: .72rem !important; }
}

/* ─── Excel-Mode Easter Egg ────────────────────────────────────
   5× Klick auf das Julian-Avatar-Image im Badge aktiviert "Excel-Modus":
   Spreadsheet-Grid auf Body, Zellgitter unter Headings, kleine Notiz unten.
   ESC oder weitere 5× Klicks deaktivieren wieder. */
body.excel-mode {
  background-image:
    linear-gradient(to right, rgba(120,100,80,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,100,80,0.06) 1px, transparent 1px);
  background-size: 56px 28px;
  background-attachment: fixed;
  position: relative;
}
[data-theme="dark"] body.excel-mode {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
}
body.excel-mode h1,
body.excel-mode h2,
body.excel-mode .art-title,
body.excel-mode .blog-h1,
body.excel-mode .sec-h {
  border-top: 1px solid rgba(120,100,80,0.25);
  border-bottom: 1px solid rgba(120,100,80,0.25);
  padding: .15rem 0;
  position: relative;
}
body.excel-mode h1::before,
body.excel-mode h2::before,
body.excel-mode .art-title::before,
body.excel-mode .blog-h1::before {
  content: 'A1';
  position: absolute;
  left: -2.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Courier New', monospace;
  font-size: .65rem;
  font-weight: 400;
  color: rgba(120,100,80,0.55);
  letter-spacing: 0;
  text-transform: none;
}
/* ─── back-link variants: primary (solid amber) vs ghost ────────
   For sec-foot rows with multiple CTAs (themen.html, fragen.html)
   so the primary funnel link is visually dominant and the
   Cal.com bypass is subordinate. */
html .back-link.back-link--primary,
html a.back-link--primary,
html button.back-link--primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 78%, white 12%) 0%,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 92%, transparent) 100%) !important;
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  color: #0c0b0f !important;
  border: 1px solid color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 70%, transparent) !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 8px 24px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 32%, transparent) !important;
}
html .back-link.back-link--primary:hover,
html a.back-link--primary:hover,
html button.back-link--primary:hover {
  filter: brightness(1.06);
  color: #0c0b0f !important;
}
html .back-link.back-link--ghost,
html a.back-link--ghost,
html button.back-link--ghost {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 30%, transparent) !important;
  color: var(--a, oklch(67% 0.14 52)) !important;
  font-weight: 600 !important;
}
html .back-link.back-link--ghost:hover,
html a.back-link--ghost:hover,
html button.back-link--ghost:hover {
  background: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 8%, transparent) !important;
  border-color: var(--a, oklch(67% 0.14 52)) !important;
}

/* ─── Evergreen badge (timeless blog/glossar articles) ────────── */
.art-evergreen {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .15em .55em;
  margin-left: .5em;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a, oklch(67% 0.14 52));
  background: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 28%, transparent);
  border-radius: 100px;
  white-space: nowrap;
  vertical-align: middle;
}
.art-evergreen::before {
  content: '∞';
  font-family: 'Barlow', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  margin-right: .05em;
  letter-spacing: 0;
}

/* ── Verhindert Auto-Zoom bei Formularfeldern auf iOS/Android ── */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]),
  textarea,
  select {
    font-size: max(16px, 1em);
  }
}

/* ─── Interactive Calculator Tools (used in blog articles) ────────── */
.calc-tool {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb,var(--t1) 9%,transparent) 0%, color-mix(in srgb,var(--t1) 3%,transparent) 100%);
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  border: 1px solid color-mix(in srgb,var(--t1) 13%,transparent);
  border-radius: var(--r-xl, 24px);
  padding: 1.8rem 1.6rem 1.4rem;
  margin: 2.5rem 0;
  box-shadow: var(--sh-lg, 0 2px 40px rgba(100,70,30,0.10)), inset 0 1px 0 color-mix(in srgb,var(--t1) 22%,transparent), 0 6px 18px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
}
.calc-head { margin-bottom: 1.6rem; }
.calc-eyebrow {
  font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--a, oklch(67% 0.14 52)); font-weight: 700;
  margin-bottom: .4rem; display: flex; align-items: center; gap: .5rem;
}
.calc-eyebrow::before {
  content: ''; width: 14px; height: 1.5px;
  background: var(--a, oklch(67% 0.14 52));
}
.calc-h {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 1.35rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: -.005em; color: var(--t1, #131110); line-height: 1.1;
}
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 2rem; margin-bottom: 1.4rem;
}
.calc-inputs { display: flex; flex-direction: column; gap: 1.3rem; }
.calc-field { display: flex; flex-direction: column; gap: .45rem; }
.calc-field-head { display: flex; justify-content: space-between; align-items: baseline; }
.calc-field-head label {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--t1, #131110);
}
.calc-val {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 1.05rem; font-weight: 900;
  color: var(--a, oklch(67% 0.14 52));
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.calc-hint { font-size: .76rem; color: var(--t2, #4a4540); line-height: 1.45; margin: 0; }
/* ─── Slider — Donut-Thumb (touch-tauglich) + WCAG-konformer Track ─── */
input[type="range"].calc-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent;
  outline: none; cursor: pointer; padding: 0; margin: .3rem 0;
}
input[type="range"].calc-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 100px;
  background: linear-gradient(to right,
    var(--a, oklch(67% 0.14 52)) 0%,
    var(--a, oklch(67% 0.14 52)) var(--p, 30%),
    color-mix(in srgb, var(--t3) 25%, transparent) var(--p, 30%),
    color-mix(in srgb, var(--t3) 25%, transparent) 100%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.06);
}
input[type="range"].calc-slider::-moz-range-track {
  height: 4px; border-radius: 100px;
  background: color-mix(in srgb, var(--t3) 25%, transparent);
}
input[type="range"].calc-slider::-moz-range-progress { height: 4px; border-radius: 100px; background: var(--a); }
input[type="range"].calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; margin-top: -11px;
  background: var(--bg, #f4f2ef);
  border: 3px solid var(--a);
  border-radius: 50%; cursor: grab;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 14px color-mix(in srgb, var(--a) 35%, transparent);
  transition: transform .12s ease, box-shadow .15s ease;
}
input[type="range"].calc-slider::-webkit-slider-thumb:hover { transform: scale(1.08); }
input[type="range"].calc-slider:active::-webkit-slider-thumb { cursor: grabbing; }
input[type="range"].calc-slider::-moz-range-thumb {
  width: 26px; height: 26px; background: var(--bg, #f4f2ef);
  border: 3px solid var(--a); border-radius: 50%; cursor: grab;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 14px color-mix(in srgb, var(--a) 35%, transparent);
}
.calc-viz {
  border-radius: 14px;
  padding: 0; display: flex; flex-direction: column; gap: 1.1rem;
}
.calc-viz svg { width: 100%; height: auto; display: block; flex: 1; }

/* ─── Result-Box (hero KPI) ─── Vertical-Gradient + 3px Border-Left,
   Big-Number-Treatment: Zahl dominiert, Eyebrow + Hint umrahmen subtil. */
.calc-result {
  position: relative;
  padding: 1.4rem 1.5rem 1.35rem 1.6rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 7%, transparent) 0%, transparent 100%);
  border-left: 4px solid var(--a);
  border-radius: 0 var(--r-md, 12px) var(--r-md, 12px) 0;
}
/* Specificity-Bump (.calc-result .calc-result-*): nötig weil viele Blog-Artikel
   inline-Styles wie `.art-body p { font-size: .96rem }` haben (Specificity 0,1,1),
   die das einfache `.calc-result-val` (0,1,0) überschreiben würden. */
.calc-result .calc-result-label {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--t3); font-weight: 700; margin: 0 0 .55rem; line-height: 1.1;
}
.calc-result .calc-result-val {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: clamp(3.4rem, 9vw, 5.4rem);
  font-weight: 900;
  color: var(--t1); letter-spacing: -.025em; line-height: .95;
  margin: 0 0 .6rem; font-variant-numeric: tabular-nums;
  /* Subtiler Amber-Glow auf der Zahl — hebt sie aus dem Glass-Flow */
  text-shadow: 0 1px 0 color-mix(in srgb, var(--a) 18%, transparent);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .15em;
}
.calc-result .calc-result-val .calc-result-unit {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: .32em; color: var(--a-text, var(--a)); font-weight: 700;
  letter-spacing: .01em; text-transform: lowercase;
  align-self: baseline; margin-left: 0;
  /* Mikro-Korrektur: visuelle Baseline-Alignment der Unit zur Zahl */
  position: relative; top: -.08em;
}
.calc-result .calc-result-hint {
  font-size: .82rem; font-style: italic;
  color: var(--t2); line-height: 1.55; margin: 0;
}
.calc-result .calc-result-hint strong { font-style: normal; color: var(--t1); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Auf schmalen Screens: weniger Padding, Zahl bleibt prominent */
@media (max-width: 540px) {
  .calc-result { padding: 1.2rem 1.1rem 1.1rem 1.2rem; }
  .calc-result .calc-result-val { font-size: clamp(2.8rem, 13vw, 3.8rem); }
  .calc-result .calc-result-val .calc-result-unit { font-size: .36em; }
}

/* ─── Stack-Bar · monochrome Amber-Tonalität (4 Stufen) ───
   Drei-Spalten-Grid: Label · Track · Wert. Sauberes Spacing, mobile-stack-fähig.
   Ersetzt die alten .ml-stack-*-Klassen die nur in einem File definiert waren. */
.calc-stack {
  display: flex; flex-direction: column; gap: .65rem;
  padding: 1.1rem 1.2rem; margin-top: .2rem;
  background: linear-gradient(180deg, color-mix(in srgb,var(--a) 6%,transparent) 0%, color-mix(in srgb,var(--a) 2%,transparent) 100%);
  backdrop-filter: blur(24px) saturate(175%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  border: 1px solid color-mix(in srgb,var(--a) 30%,transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 24px color-mix(in srgb,var(--a) 18%,transparent);
  border-radius: var(--r-md, 12px);
}
.calc-stack-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--t3); font-weight: 700; margin: 0 0 .2rem;
}
.calc-stack-row {
  display: grid;
  grid-template-columns: 9rem 1fr 5rem;
  align-items: center; gap: .9rem; min-height: 1.7rem;
}
.calc-stack-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .82rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .04em; color: var(--t2); line-height: 1.2;
}
.calc-stack-track {
  position: relative; height: .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t3) 12%, transparent);
  overflow: hidden;
}
.calc-stack-bar { height: 100%; border-radius: 999px; background: var(--a); transition: width .4s ease; }
.calc-stack-bar[data-tone="1"] { opacity: 1; }
.calc-stack-bar[data-tone="2"] { opacity: .70; }
.calc-stack-bar[data-tone="3"] { opacity: .45; }
.calc-stack-bar[data-tone="4"] { opacity: .22; box-shadow: inset 0 0 0 1px var(--a); }
.calc-stack-val {
  font-family: 'Barlow', sans-serif;
  font-size: .92rem; font-weight: 600;
  text-align: right; color: var(--t1);
  font-variant-numeric: tabular-nums;
}
.calc-stack-total {
  margin-top: .3rem; padding-top: .65rem;
  border-top: 1px solid color-mix(in srgb, var(--t3) 28%, transparent);
}
.calc-stack-total .calc-stack-label { color: var(--t1); font-weight: 700; }
.calc-stack-total .calc-stack-val { color: var(--a-text, var(--a)); font-weight: 700; }

/* Formel-Zeile unter dem Stack (z.B. "800 + 24×28 + 24×28×0,55 + 12% = 2.063€") */
.calc-formula {
  font-family: 'Barlow', sans-serif;
  font-size: .76rem; color: var(--t3);
  margin: .8rem 0 0; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

/* Metrics-Cards (für 3-Karten-Layout) — leicht aufgehellt für Hierarchie zu .calc-viz */
.calc-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem; }
.calc-metric {
  background: linear-gradient(180deg, color-mix(in srgb,var(--a) 8%,transparent) 0%, color-mix(in srgb,var(--a) 3%,transparent) 100%);
  backdrop-filter: blur(24px) saturate(175%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  border: 1px solid color-mix(in srgb,var(--a) 30%,transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 24px color-mix(in srgb,var(--a) 18%,transparent);
  border-radius: var(--r-md, 12px); padding: .95rem 1rem; text-align: center;
}
.calc-metric-label {
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--t2); font-weight: 700; margin-bottom: .4rem;
}
.calc-metric-val {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 1.75rem; font-weight: 900; color: var(--t1);
  letter-spacing: -.01em; line-height: 1; margin-bottom: .25rem;
  font-variant-numeric: tabular-nums;
}
.calc-metric-sub { font-size: .7rem; color: var(--t2); letter-spacing: .04em; margin: 0; line-height: 1.3; }

/* Legende — monochrom Amber statt Ampel */
.calc-legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .5rem; justify-content: center; }
.calc-leg { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--t2); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.calc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.calc-dot-rev  { background: var(--a); opacity: 1; }
.calc-dot-cost { background: var(--a); opacity: .45; }
.calc-dot-be   { background: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 25%, transparent); }

/* Insight-Box · runder Check-Badge + Du-Form-Microcopy */
.calc-insight {
  display: grid; grid-template-columns: auto 1fr;
  align-items: start; gap: .9rem;
  padding: 1rem 1.15rem; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 12%, transparent), color-mix(in srgb, var(--a) 5%, transparent));
  backdrop-filter: blur(20px) saturate(175%);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  border: 1px solid color-mix(in srgb, var(--a) 28%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--t1) 18%, transparent), 0 6px 18px color-mix(in srgb, var(--a) 14%, transparent);
  margin-top: 1rem; font-size: .9rem; color: var(--t2); line-height: 1.55;
}
.calc-insight-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: var(--a); color: #0c0b0f;
  border-radius: 50%; font-size: .95rem; font-weight: 900; line-height: 1;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--a) 40%, transparent);
  flex-shrink: 0;
}
.calc-insight-icon::before { content: '✓'; }
.calc-insight-text strong { color: var(--t1); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-insight.is-loss {
  background: color-mix(in srgb, oklch(62% 0.21 30) 7%, transparent);
  border-color: color-mix(in srgb, oklch(62% 0.21 30) 24%, transparent);
}
.calc-insight.is-loss .calc-insight-icon { background: oklch(60% 0.22 30); }
.calc-insight.is-loss .calc-insight-icon::before { content: '!'; }
.calc-insight.is-warn {
  background: color-mix(in srgb, oklch(75% 0.17 90) 9%, transparent);
  border-color: color-mix(in srgb, oklch(75% 0.17 90) 28%, transparent);
}
.calc-insight.is-warn .calc-insight-icon { background: oklch(70% 0.18 80); }
.calc-insight.is-warn .calc-insight-icon::before { content: '!'; }

@media (max-width: 760px) {
  .calc-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .calc-metrics { grid-template-columns: 1fr; }
  .calc-metric-val { font-size: 1.5rem; }
  .calc-tool { padding: 1.4rem 1.1rem 1.1rem; }
  /* Stack-Bar mobile: Label + Wert in einer Zeile, Track darunter */
  .calc-stack-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "track track";
    gap: .25rem .8rem; min-height: 0; padding: .15rem 0;
  }
  .calc-stack-label { grid-area: label; }
  .calc-stack-val   { grid-area: value; }
  .calc-stack-track { grid-area: track; height: .55rem; }
  .calc-insight { grid-template-columns: 1fr; gap: .6rem; padding: .9rem 1rem; }
  .calc-slider { height: 36px; }
  .calc-slider::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
  .calc-slider::-moz-range-thumb { width: 28px; height: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════
   RECHNER v2 · Phase-2-Komponenten — Diskrepanz-Block, Comparator-
   Lineal, Methodik-Drawer, Cal/PDF-Bridge-Footer.
   Editorial-Stil (FT Alphaville / NYT Upshot) statt SaaS-Look.
═══════════════════════════════════════════════════════════════════ */

/* ─── Diskrepanz-Block ENTFERNT (DS-5 Migration, Juni 2026) ───────
   Komponente .kpi-discrepancy + alle Sub-Klassen aus theme.css raus,
   weil alle 8 Blog-Artikel auf .calc-headline migriert wurden.
   Falls jemals .kpi-delta oder .kpi-unit als globale Helper gebraucht
   werden: case-studies/schreinerei-bingen.html und benchmarks/index.html
   haben eigene lokale Defs (anderer Use-Case, anderes Styling). */

/* ─── Comparator-Lineal (SVG-Wrapper) ────────────────────────────── */
.comp-rule { margin: 1.6rem 0 .6rem; }
.comp-svg  { width: 100%; height: auto; display: block; overflow: visible; max-height: 90px; }
.comp-caption {
  font-family: 'Barlow', sans-serif;
  font-style: italic; font-size: .82rem; font-weight: 400;
  color: var(--t2); line-height: 1.5;
  margin-top: .8rem; max-width: 56ch;
}
.comp-caption strong {
  font-style: normal; font-weight: 700; color: var(--t1);
  font-variant-numeric: tabular-nums;
}
.comp-caption::before { content: '— '; opacity: .6; }

/* ─── Methodik-Drawer (Annahmen / Formel) ────────────────────────── */
.calc-method {
  margin: 1.6rem 0 0; padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--t1) 8%, transparent);
}
.calc-method > summary {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--t3);
  padding: .9rem 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .55rem;
  transition: color .15s;
}
.calc-method > summary:hover { color: var(--a-text, var(--a)); }
.calc-method > summary::-webkit-details-marker { display: none; }
.calc-method > summary::after {
  content: '+'; font-size: 1.2em; line-height: 1; margin-left: auto;
  transition: transform .2s;
}
.calc-method[open] > summary::after { transform: rotate(45deg); }
.calc-method-body {
  padding: .2rem 0 1.2rem;
  font-size: .86rem; color: var(--t2); line-height: 1.7;
}
.calc-method-body p { margin: 0 0 .6rem; }
.calc-method-body p:last-child { margin-bottom: 0; }
.calc-method-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .82rem; background: color-mix(in srgb, var(--a) 6%, var(--bg2));
  padding: .12em .35em; border-radius: 3px;
}

/* ─── Bridge-Footer (Cal / PDF / Reminder / Blog) ────────────────── */
.calc-bridge {
  margin: 1.6rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--t1) 12%, transparent);
}
.calc-bridge-meta {
  font-family: 'Barlow', sans-serif;
  font-size: .76rem; color: var(--t3); line-height: 1.55;
  display: flex; align-items: flex-start; gap: .55rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.calc-bridge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--a); flex-shrink: 0; margin-top: .42rem;
}
.calc-bridge-meta a {
  color: var(--a-text, var(--a)); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--a) 35%, transparent);
  text-underline-offset: 2px;
}
.calc-bridge-meta a:hover { text-decoration-color: var(--a); }

.calc-bridge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
.calc-bridge-card {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.05rem 1.15rem;
  background: linear-gradient(180deg, color-mix(in srgb,var(--t1) 9%,transparent) 0%, color-mix(in srgb,var(--t1) 3%,transparent) 100%);
  backdrop-filter: blur(24px) saturate(175%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  border: 1px solid color-mix(in srgb,var(--t1) 13%,transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb,var(--t1) 22%,transparent), 0 6px 18px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  border-radius: 12px;
  text-align: left;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
  position: relative;
  text-decoration: none;
  color: var(--t1);
}
.calc-bridge-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--a) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb,var(--a) 11%,transparent) 0%, color-mix(in srgb,var(--a) 4%,transparent) 100%);
}
.calc-bridge-card--primary {
  background: linear-gradient(180deg, color-mix(in srgb,var(--a) 14%,transparent) 0%, color-mix(in srgb,var(--a) 6%,transparent) 100%);
  backdrop-filter: blur(24px) saturate(175%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  border: 1px solid color-mix(in srgb,var(--a) 30%,transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 24px color-mix(in srgb,var(--a) 18%,transparent);
}
.calc-bridge-card--primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb,var(--a) 20%,transparent) 0%, color-mix(in srgb,var(--a) 9%,transparent) 100%);
  border-color: color-mix(in srgb,var(--a) 50%,transparent);
}
.calc-bridge-eyebrow {
  /* Königsklasse-Disziplin: Eyebrow = Barlow normal, site-weit konsistent
     (war versehentlich Barlow Condensed — einziger Sonderfall im Code) */
  font-family: 'Barlow', sans-serif;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--a-text, var(--a)); font-weight: 700;
}
.calc-bridge-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.005em;
  color: var(--t1); line-height: 1.2;
}
.calc-bridge-sub {
  font-family: 'Barlow', sans-serif;
  font-size: .82rem; color: var(--t2); line-height: 1.45;
}
button.calc-bridge-card {
  font-family: 'Barlow', sans-serif; /* button-Reset */
  appearance: none; outline-offset: 2px;
}

@media (max-width: 540px) {
  .calc-bridge-grid { grid-template-columns: 1fr; }
  .calc-bridge-card { padding: .9rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   RECHNER v3 · Königsklasse-Layout-Refactoring (Mai 2026)
   ─ Hero-Chart full-width (240–300px statt 90px-Sidekick)
   ─ Inputs-Grid 2-spaltig UNTER dem Hero (statt Side-by-Side .calc-grid)
   ─ Sticky-Result-Bar (kondensiert, am Tool-Container-Top)
   ─ Stack-Bar XL: 18px-Bars, 3px-Radius (eckig à Bloomberg/FT)
   ─ Sticky-TOC im Article-Container (ersetzt 260px-Marketing-Sidebar)
═══════════════════════════════════════════════════════════════════ */

/* ─── ART-RELATED · Blog-Footer-Cross-Linking (ersetzt art-pagination)
   Zwei Sektionen: Verwandte Artikel (gleiche Kategorie) + Auch interessant
   (themenfremd). Statisch generiert via scripts/build-related-articles.py. */
.art-related {
  margin-top: 3.5rem; padding-top: 2.5rem;
  border-top: 1px solid var(--ln);
}
.art-related-section { margin-bottom: 2.2rem; }
.art-related-section:last-child { margin-bottom: 0; }
.art-related .art-related-label {
  font-family: 'Barlow', sans-serif;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--a); font-weight: 700; margin: 0 0 1rem;
  display: flex; align-items: center; gap: .5rem;
  max-width: none;
}
.art-related .art-related-label::before {
  content: ''; width: 14px; height: 1.5px;
  background: var(--a); display: block; flex-shrink: 0;
}
.art-related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.art-related-card {
  display: block;
  padding: 1.1rem 1.25rem 1rem;
  background: linear-gradient(180deg, color-mix(in srgb,var(--t1) 9%,transparent) 0%, color-mix(in srgb,var(--t1) 3%,transparent) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid color-mix(in srgb,var(--t1) 13%,transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb,var(--t1) 22%,transparent), 0 6px 18px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  border-radius: 12px;
  text-decoration: none !important;
  transition: border-color .15s, transform .15s, background .15s;
  position: relative; overflow: hidden;
}
.art-related-card:hover {
  border-color: color-mix(in srgb, var(--a) 35%, var(--glass-border));
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--a) 4%, var(--glass));
  text-decoration: none !important;
}
.art-related .art-related-card-cat {
  font-family: 'Barlow', sans-serif;
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--a-text, var(--a)); font-weight: 700;
  margin: 0 0 .5rem;
  display: flex; align-items: center; gap: .4rem;
  max-width: none;
}
.art-related .art-related-card-cat::before {
  content: ''; width: 10px; height: 1.5px;
  background: var(--a); display: block; flex-shrink: 0;
}
.art-related .art-related-card-h {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: 1rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -.005em; text-transform: uppercase;
  color: var(--t1); margin: 0 0 .5rem;
}
.art-related .art-related-card-excerpt {
  font-family: 'Barlow', sans-serif;
  font-size: .78rem; line-height: 1.5;
  color: var(--t2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  max-width: none;
}
@media (max-width: 760px) {
  .art-related-grid { grid-template-columns: 1fr; gap: .75rem; }
  .art-related { margin-top: 2.5rem; padding-top: 2rem; }
}

/* ─── HERO-AUSSAGE · radikale Reduktion (v3, „weniger ist mehr")
   Eine entschiedene Soll-Zahl + ein Beleg-Satz darunter.
   Ersetzt Comparator + Diskrepanz-Block + Sticky-Bar (Doppelung).
   Specificity-Bump (.calc-headline .calc-headline-num): nötig weil
   Blog-Artikel inline-Styles wie `.art-body p {font-size:.96rem}` haben
   (Specificity 0,1,1) — die schlagen das einfache .calc-headline-* (0,1,0). */
.calc-headline {
  text-align: left;
  padding: 2rem 0 2.2rem;
  border-top: 1px solid color-mix(in srgb, var(--t1) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--t1) 12%, transparent);
  margin-bottom: 1.8rem;
}
.calc-headline .calc-headline-label {
  font-family: 'Barlow', sans-serif;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--t3);
  margin: 0 0 .5rem;
  max-width: none;
}
.calc-headline .calc-headline-num {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: clamp(4rem, 12vw, 8.5rem); font-weight: 900;
  letter-spacing: -.03em; line-height: .9;
  color: var(--a-text, var(--a));
  font-variant-numeric: tabular-nums;
  margin: 0; max-width: none;
  display: inline-flex; align-items: baseline;
}
.calc-headline .calc-headline-unit {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: .28em; font-weight: 700; letter-spacing: .01em;
  text-transform: lowercase;
  color: color-mix(in srgb, currentColor 75%, transparent);
  margin-left: .12em;
}
.calc-headline .calc-headline-claim {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.55;
  color: var(--t2);
  margin: 1rem 0 0;
  max-width: 56ch;
}
.calc-headline .calc-headline-claim strong {
  color: var(--t1); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calc-headline-edit {
  /* Ist-Wert inline im Satz editierbar — leichter Amber-Underline statt Box */
  display: inline-block;
  font-weight: 700; color: var(--t1);
  font-variant-numeric: tabular-nums;
  border-bottom: 2px dashed color-mix(in srgb, var(--a) 40%, transparent);
  padding: 0 .12em;
  outline: none; cursor: text;
  min-width: 1.5ch;
  transition: background .15s, border-color .15s;
}
.calc-headline-edit:hover,
.calc-headline-edit:focus {
  background: color-mix(in srgb, var(--a) 10%, transparent);
  border-bottom-color: var(--a);
}

/* ─── INPUTS-GRID · 2-spaltig unter Hero (für Rechner mit calc-headline) ── */
.calc-inputs-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.2rem 2rem; margin: 0 0 1.4rem;
}
@media (max-width: 680px) {
  .calc-inputs-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ─── STACK-BAR XL · eckig (Bloomberg/FT statt Stripe/Linear) ──── */
.calc-stack--xl .calc-stack-track { height: 1.15rem; border-radius: 3px; }
.calc-stack--xl .calc-stack-bar   { border-radius: 3px; }

/* ─── STICKY-TOC · seitliches Inhaltsverzeichnis in langen Artikeln ── */
.art-toc {
  position: sticky; top: 88px;
  width: 200px; align-self: start;
  font-family: 'Barlow', sans-serif;
  font-size: .82rem; line-height: 1.5;
  border-left: 1px solid var(--ln);
  padding-left: 14px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.art-toc-label {
  font-family: 'Barlow', sans-serif;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t3); font-weight: 700;
  margin: 0 0 .7rem;
}
.art-toc-nav a {
  display: block; padding: .35rem 0;
  color: var(--t3); text-decoration: none;
  border-left: 2px solid transparent; margin-left: -16px; padding-left: 14px;
  transition: color .15s, border-color .15s;
}
.art-toc-nav a:hover,
.art-toc-nav a.is-active {
  color: var(--a-text, var(--a));
  border-left-color: var(--a);
  text-decoration: none;
}
@media (max-width: 960px) { .art-toc { display: none; } }

/* Druck: monochrom, dünne Outlines statt Vollflächen */
@media print {
  .calc-stack { background: none; border-color: #999; }
  .calc-stack-track { background: none; box-shadow: inset 0 0 0 1px #999; }
  .calc-stack-bar { background: none !important; box-shadow: inset 0 0 0 1px #333; opacity: 1 !important; }
  .calc-result { background: none; border-left-color: #333; }
  .calc-insight { background: none; border-color: #333; }
  .calc-bridge { display: none; }
  .calc-method[open] > summary::after { display: none; }
  .art-toc { display: none !important; }
}

/* ─── A11y: Visible focus rings (overrides any local outline:none) ─
   Applies to ALL keyboard-focused interactive elements site-wide.
   Mouse clicks still don't show the ring (thanks to :focus-visible).
─────────────────────────────────────────────────────────────────── */
html *:focus-visible {
  outline: 2px solid var(--a, oklch(67% 0.14 52)) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
html input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 30%, transparent),
              0 2px 10px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 50%, transparent) !important;
}
html input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 30%, transparent),
              0 2px 10px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 50%, transparent) !important;
}

/* ─── A11y: Skip-link to main content ──────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: .7rem 1.2rem;
  background: var(--a, oklch(67% 0.14 52));
  color: #0c0b0f; /* WCAG: war var(--a-text)=amber auf amber=1.67:1 FAIL → dark 6.3:1 */
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  z-index: 100000;
  transition: top .15s;
}
.skip-link:focus { top: 0; outline: 2px solid #0c0b0f; outline-offset: -4px; }

/* ─── Touch-Targets ≥44px auf Mobile (Apple HIG / WCAG 2.5.5) ──── */
@media (max-width: 900px) {
  .badge-btn,
  .badge-link,
  .filter-btn,
  .theme-toggle-float,
  .lang-toggle-float,
  .seg-toggle,
  .lang-seg,
  .theme-seg,
  .back-link,
  .reach-chip,
  .svc-tog,
  .bud-chip,
  .rate-btn,
  .tog,
  .k-chip,
  .sort-btn,
  .btn-amber,
  .btn-ghost,
  .btn-solid,
  .btn-primary { min-height: 44px; }
  .badge-link, .filter-btn { padding-top: .65rem; padding-bottom: .65rem; }
  .rate-btn, .tog, .svc-tog, .bud-chip, .k-chip, .sort-btn { padding-top: .7rem; padding-bottom: .7rem; }
}

/* ─── Site-Footer · single source of truth (Task #2) ───────────────
   Lives on EVERY page. Druck-/Tinten-sparend: nur dünner Top-Strich,
   keine Vollfläche. Nutzt zentrale Tokens. */
.site-foot {
  margin-top: 4rem;
  padding: 2rem 1.5rem 6rem; /* extra bottom-padding für floating CTAs */
  border-top: 1px solid var(--ln);
  background: transparent;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--t2);
}
.site-foot-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: center;
  text-align: center;
}
.site-foot-brand {
  margin: 0;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--t1);
}
.site-foot-name { color: var(--a); }
.site-foot-tag { color: var(--t2); font-weight: 500; }
.site-foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.1rem;
}
.site-foot-nav a {
  color: var(--t2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: .15rem 0;
  transition: color .15s, border-color .15s;
}
.site-foot-nav a:hover {
  color: var(--a);
  border-bottom-color: var(--a);
}
.site-foot-nav a:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 3px;
  border-radius: 3px;
}
.site-foot-meta {
  margin: 0;
  font-size: .7rem;
  color: var(--t3);
}
.site-foot-sep { margin: 0 .15rem; color: var(--t3); opacity: .6; }
@media (max-width: 600px) {
  .site-foot { padding: 1.6rem 1rem 5.5rem; }
  .site-foot-nav { gap: .3rem .9rem; font-size: .76rem; }
}
@media print {
  .site-foot { border-top: 1px solid #999; color: #333; padding: 1rem 0; margin-top: 1.5rem; }
  .site-foot-nav a { color: #333; }
}

/* ─── A11y: Visually-hidden utility for screen reader labels ───── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
  border: 0;
}

/* ─── A11y: --t3 contrast fix in light mode ────────────────────────
   Workaround entfernt (Mai 2026): zentrale Token in :root oben sind jetzt
   selbst WCAG-AA-konform. Inline :root-Blocks der Subpages werden
   schrittweise gelöscht (Task #16 P7 Code-Hygiene). */

/* ─── Signature Badge — unified "Julian Weisel" pill + dropdown ───
   Single source of truth (overrides all inline page-level badge CSS).
   Uses `html ` prefix for higher specificity than inline :root rules.

   Structure:
     <div class="name-badge" id="nameBadge">
       <button class="badge-btn" id="badgeBtn">
         <img src="/logo-badge.png" ...>Julian Weisel <span class="badge-chevron">›</span>
       </button>
       <nav class="badge-menu">
         <a class="badge-link">...</a>
         <div class="badge-divider"></div>   (or .badge-sep)
         <a class="badge-link badge-link--cta">...</a>
       </nav>
     </div>
─────────────────────────────────────────────────────────────────── */
html .name-badge {
  position: fixed !important;
  top: 14px !important;
  right: 16px !important;
  z-index: 100 !important;
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  transition: opacity .35s ease;
}
/* Optional fade-in pattern (some pages use .badge-visible after hero scroll) */
html .name-badge:not(.badge-visible):not(.badge-open) {
  /* By default visible — pages that want fade-in add .badge-visible via JS */
}

/* ─── Apple Liquid Glass · Pill DNA ─────────────────────────
   Stand: 02.06.2026 User-Wunsch „Apple Liquid Glass für alle
   Pills, EINHEITLICH überall."
   Visual-Layer für .badge-btn + .k-chip/.reach-chip/.tog/.filter-*
   (Größe/Padding bleibt page-spezifisch — Glass-Schicht ist
   überall identisch). */

/* The pill button (Name-Badge oben rechts) */
html .badge-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .45em !important;
  /* Feste px-Größe + em-Padding statt rem — sonst skaliert die Badge mit der
     responsiven html-Schriftgröße clamp(16px,1.1vw,24px) mit und sieht je nach
     Viewport-Breite anders aus (User: „mach einheitlich"). Avatar (em) + gap (em)
     folgen jetzt der festen Größe → Badge identisch auf allen Breiten. */
  padding: .5em 1em .5em .5em !important;
  /* Wordmark: Barlow Condensed 700 statt 900 — editorial Name, kein Impact-Banner
     (User 02.06.2026: „schrift ein bisschen zu fett"). Tracking entspannt .14→.08. */
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: clamp(16px, 1.15vw, 22px) !important; /* Desktop: skaliert mit Viewport (wie „vorher") → größer auf breiten Screens. Mobile/Tablet → 13px unten. */
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  /* --a-text (gedunkeltes Amber, 4.6:1) statt --a: der Wordmark in vollem --a war nur
     2.3:1 auf dem hellen Glas-Pill (gemessen 13.06.2026) — unter AA. --a-text bleibt klar
     Amber, liest aber sauber. Brand-Pop bleibt über Ring/Glow/Avatar erhalten. */
  color: var(--a-text, oklch(54% 0.13 48)) !important;
  line-height: 1 !important;
  border: 1px solid color-mix(in srgb, var(--t1, #1a1714) 14%, transparent) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--t1, #1a1714) 9%, transparent) 0%,
    color-mix(in srgb, var(--t1, #1a1714) 4%, transparent) 100%) !important;
  /* Glas liegt auf ::before (geclippt) — iOS rendert backdrop-filter sonst eckig
     über die Rundung hinaus (Geister-Pill ins offene Menü, iPhone 05.06.2026). */
  position: relative !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer !important;
  transition: border-color .22s, transform .15s, box-shadow .22s, background .22s !important;
  white-space: nowrap !important;
  /* Liquid Glass shadow stack: inset top-highlight + soft drop + close shadow */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--t1, #1a1714) 25%, transparent),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 8px 28px rgba(0,0,0,.10),
    0 2px 6px rgba(0,0,0,.06) !important;
}
/* Pill auf ALLEN Breiten gleich (Desktop-Größe) — kein Mobile-Font-Shrink mehr.
   (User 05.06.2026: „übernimm die Pill von vor dem Mobile-Umspringen, überall gleich".) */
[data-theme="dark"] html .badge-btn,
html [data-theme="dark"] .badge-btn {
  border-color: rgba(255,255,255,.14) !important;
  background: linear-gradient(180deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.04) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 8px 32px rgba(0,0,0,.40),
    0 2px 8px rgba(0,0,0,.20) !important;
}
/* Glas-Ebene des Buttons: hart in die Pill-Form geclippt (clip-path schneidet auch die
   backdrop-Region — der zuverlässige Weg auf iOS). z-index:-1 + isolation: unter dem Text,
   über dem Pill-Hintergrund. Außen-Schatten bleiben am Host unangetastet. */
html .badge-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-clip-path: inset(0 round 999px);
  clip-path: inset(0 round 999px);
}
html .badge-btn:hover,
html .name-badge.badge-open .badge-btn {
  border-color: var(--a, oklch(67% 0.14 52)) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--t1, #1a1714) 30%, transparent),
    0 10px 32px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 25%, transparent),
    0 2px 8px rgba(0,0,0,.08) !important;
}

/* Wortmarke im OFFENEN Zustand dunkel = klar lesbar (User 17.06.2026 „kann Julian Weisel
   nicht lesen") — das amber `--a-text` ist zwar AA, wirkt auf dem hellen Glas aber zu schwach.
   Geschlossen bleibt sie marken-amber; offen zählt Lesbarkeit. `--t1` ist theme-aware
   (Light: dunkel auf hell, Dark: hell auf dunkel) → in beiden Modi voller Kontrast. */
html .name-badge.badge-open .badge-btn { color: var(--t1, #1a1714) !important; }

/* The avatar img — square it perfectly into a circle */
html .badge-btn > img {
  width: 1.55em !important;
  height: 1.55em !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  /* Logo-Scheibe pur — KEIN Amber-Ring/keine Amber-Füllung (User 05.06.2026: „falsche Version
     mit orangenem Kreis ums Logo"). Das PNG ist eine fertige Scheibe, sitzt direkt auf der Pill. */
}

/* Chevron (rotates 90° when menu open) */
html .badge-chevron {
  font-style: normal !important;
  font-size: .85em !important;
  letter-spacing: 0 !important;
  opacity: .55;
  margin-left: .2em;
  display: inline-block !important;
  transition: transform .28s cubic-bezier(.5,.1,.2,1), opacity .2s !important;
  transform-origin: center;
}
html .badge-btn:hover .badge-chevron,
html .name-badge.badge-open .badge-chevron {
  opacity: 1;
}
html .name-badge.badge-open .badge-chevron {
  transform: rotate(90deg) !important;
}

/* Dropdown menu */
/* ─── Apple Liquid Glass · Badge-Submenu Container ────────────
   Stand: 02.06.2026 User: „submenu auch liquid glass und dann
   ÜBERALL übernehmen". Stärkerer blur + gradient + inset-glow. */
html .badge-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  /* Menü exakt so breit wie die Pill (links+rechts an den Badge-Container gespannt) —
     User 05.06.2026: „mobile genau so breit wie die Pill — im Web auch so". */
  left: 0 !important;
  right: 0 !important;
  min-width: 0 !important;
  /* Lesbares Liquid Glass: warme Papier-Füllung ~85% (NICHT 4–9% --t1-Tönung).
     Grund (User 13.06.2026 „Lesbarkeit lalala"): das Menü öffnet auf der Startseite
     ÜBER Julians Foto — dunkler Text auf fast-transparentem Glas hatte dort
     unkalkulierbaren Kontrast. 85% Papier + Blur garantiert >9:1 für die dunklen
     Items über JEDEM Hintergrund (auch schwarz: 0.85·244≈207 → ~9.5:1), behält aber
     den Frosted-Charakter an den Rändern. Gleiche DNA wie der Cookie-Banner. */
  /* Exakt dieselbe Glas-Füllung wie die Pill (.badge-btn nutzt var(--glass)) — „Menü im
     selben Liquid Glass wie die Pill" (User 14.06.2026). Theme-aware: Light warm-weiß .82,
     Dark dunkel .62. (Zwischenzeitlich 92% Papier probiert — zu opak, der Blur war
     unsichtbar, „kein Liquid Glass mehr", User 02.07.2026 → zurück auf var(--glass);
     die Ruhe über dem Funnel bringt der ::after-Blur 44px.) */
  background: var(--glass) !important;
  /* Glas liegt auf ::after (geclippt) — iOS ließ die backdrop-Region unten eckig
     über die Rundung hinausragen („Menü zu lang", iPhone 05.06.2026). */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid color-mix(in srgb, var(--t1, #1a1714) 12%, transparent) !important;
  /* Konzentrizität (Apple-Regel): außen = innen-Kapsel-Radius + padding.
     Gemessen: Item/CTA 42px hoch → Pill-Radius 21px; + 8px (.5rem) Padding = 29px. */
  border-radius: 29px !important;
  padding: .5rem !important;
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  pointer-events: none;
  transition: opacity .22s, transform .26s cubic-bezier(.5,.1,.2,1) !important;
  transform-origin: top right;
  /* Liquid Glass Shadow Stack — helle Lichtkante oben (Specular), weiche Tiefe unten.
     Auf der opaken Papier-Fläche liest sich die helle Kante als Glas-Material
     (vorher dunkle Haarlinie = passte nur zum transparenten Alt-Glas).
     TIGHT gehalten (kein großer 0 20px 56px-Pool mehr): das Menü sitzt nur 8px über der
     Analyse-Pill — eine große Schlagschatten-Wolke fiel in den Spalt + auf die CTA und ließ
     sie „im Schatten des Menüs" wirken (User 14.06.2026). Jetzt enge Tiefe wie die obere Pill
     (.badge-btn 0 8px 28px) → der Stapel liest sich als saubere Glas-Kacheln. */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.6),
    inset 0 -1.5px 2px rgba(90,60,20,.08),
    0 8px 24px rgba(60,40,15,.10),
    0 2px 6px rgba(0,0,0,.05) !important;
  margin: 0 !important;
}
[data-theme="dark"] html .badge-menu,
html [data-theme="dark"] .badge-menu {
  /* Füllung kommt jetzt aus var(--glass) (Basis-Regel) = gleiche Glas-Füllung wie die Pill;
     im Dark-Mode dunkler/opaker als das alte White-Tint → eher besser lesbar. */
  border-color: rgba(255,255,255,.14) !important;
  /* Ebenfalls eng (kein großer Pool auf die CTA, s. Light-Mode). */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 10px 28px rgba(0,0,0,.34),
    0 2px 6px rgba(0,0,0,.20) !important;
}
html .name-badge.badge-open .badge-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Glas-Ebene des Menüs: hart in die 29px-Rundung geclippt (siehe badge-btn::before). */
html .badge-menu::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(44px) saturate(200%);
  backdrop-filter: blur(44px) saturate(200%);
  -webkit-clip-path: inset(0 round 29px);
  clip-path: inset(0 round 29px);
}

/* ─── Dropdown-Container .badge-pop (User 14.06.2026) ─────────────────
   Drei gestapelte Kapseln: Julian-Weisel-Pill (Button) · Menü · Analyse-Pill.
   Der Pop trägt Position + Öffnen-Animation; Menü und CTA sind Flex-Kinder mit 8px
   Gap (= derselbe Abstand wie Pill→Menü via top:calc(100%+8px)). Gleiche Breite, weil
   beide Flex-Kinder die volle Pop-Breite füllen. */
html .badge-pop {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Geschlossen: nah an der Pill, gestaucht + leicht verschwommen — „geschmolzenes Glas",
     das beim Öffnen aus der Pill quillt und scharf wird (User 14.06.2026). */
  opacity: 0;
  transform: translateY(-10px) scaleY(.82) scaleX(.96);
  filter: blur(2px);
  pointer-events: none;
  transform-origin: top right;
  /* Einklappen .24s verzögert → überbrückt den 8px-Spalt Pill↔Pop beim Runterfahren. */
  transition: opacity .26s ease .24s,
              transform .44s cubic-bezier(.34,1.4,.5,1) .24s,
              filter .3s ease .24s;
}
/* Unsichtbare Brücke über den 8px-Spalt, damit Hover beim Wandern Pill→Pop nicht abreißt. */
html .badge-pop::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
/* Öffnen — sofort, mit Glas-Schmelz-Settle (Overshoot-Kurve): per Klick/Tap (.badge-open)
   UND (Desktop) per Hover auf der Pill. */
html .name-badge.badge-open .badge-pop,
html .name-badge:hover .badge-pop {
  opacity: 1;
  transform: translateY(0) scaleY(1) scaleX(1);
  filter: blur(0);
  pointer-events: auto;
  transition-delay: 0s;
}
/* Touch (kein echtes Hover): nur Tap-Toggle öffnet — Hover-Regel deaktivieren. */
@media (hover: none) {
  html .name-badge:not(.badge-open):hover .badge-pop {
    opacity: 0; pointer-events: none; transform: translateY(-10px) scaleY(.82) scaleX(.96); filter: blur(2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html .badge-pop { transform: none; filter: none; transition: opacity .15s ease; }
  html .name-badge.badge-open .badge-pop,
  html .name-badge:hover .badge-pop { transform: none; filter: none; }
}
/* Menü ist jetzt statisches Flex-Kind im .badge-pop — Position/Animation liegen am Pop,
   die Kapsel-Glas-Optik (Background/Border/Radius/Shadow/::after/::before) bleibt am Menü. */
html .badge-menu {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  opacity: 1 !important;
  transform: none !important;
  /* KEIN pointer-events:auto — sonst fängt das Menü Taps ab, auch wenn der
     .badge-pop geschlossen ist (pointer-events:none). pointer-events wird vererbt:
     geschlossen → none (vom Pop), offen → auto. Sonst liegen die unsichtbaren
     Menü-Links als Tap-Falle über dem Content (z.B. FAQ → springt in Datenschutz). */
  transition: none !important;
}
/* Analyse-CTA als eigene Pill UNTER dem Menü — gleiche Breite, gleiche Kapsel-Rundung (29px),
   dasselbe Amber-Glas wie die Button-Familie. Spiegelbild der Julian-Weisel-Pill oben. */
html .badge-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; box-sizing: border-box;
  /* Über der Menü-Ebene → kein Rest-Schatten des Menüs liegt auf der CTA, sie ist die
     vorderste, präsenteste Kapsel im Stapel (User 14.06.2026). */
  position: relative; z-index: 2;
  padding: .55rem 1rem;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: #0c0b0f;
  /* deckend (kein transparenter Stop) — Seiteninhalt darf nicht durch die Pill scheinen,
     sie muss klar im Vordergrund stehen (User 14.06.2026, mobil). */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 86%, white 10%) 0%,
    var(--a, oklch(67% 0.14 52)) 100%);
  border: 1px solid color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 70%, transparent);
  border-radius: 29px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.5),
    inset 0 -1.5px 2px rgba(90,60,20,.10),
    0 20px 56px rgba(60,40,15,.16),
    0 6px 16px rgba(0,0,0,.08),
    0 2px 5px rgba(0,0,0,.07);
  transition: filter .15s, border-color .15s, transform .15s;
}
html .badge-cta:hover { filter: brightness(1.06); border-color: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 85%, transparent); }
html .badge-cta:active { transform: translateY(1px); }
html .badge-cta:focus-visible { outline: 2px solid var(--a, oklch(67% 0.14 52)); outline-offset: 2px; }
[data-theme="dark"] html .badge-cta {
  color: #1a0d02;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 92%, white 5%) 0%,
    var(--a, oklch(67% 0.14 52)) 100%);
}

/* ── Badge-Stapel: enge Schatten auf Pill + Menü (überschreibt den generischen .lglass-Float)
   Pill · Menü · CTA sind drei eng gestapelte Kapseln (~7px Gap). Der .lglass-Float-Schatten
   (0 28px 56px -22px) ist für STANDALONE-Glas gedacht und fiel hier in die Gaps + auf die
   Analyse-Pill darunter → „Menü wirft Schatten auf den Button, der wirkt dadurch weniger
   präsent" (User 14.06.2026). Auf Safari/iOS greift `.lglass` ohnehin nicht (@supports false)
   → dort fixt schon die Basis-Regel; hier gewinnt die höhere Spezifität (0,2,1 > `html .lglass`
   0,1,1) auch in Chromium. Die CTA (ohne .lglass) behält ihren eigenen Float → sie ist die
   vorderste, präsenteste Kapsel. */
html .badge-btn.lglass,
html .badge-menu.lglass {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.6),
    inset 0 -1.5px 2px rgba(90,60,20,.08),
    0 8px 24px rgba(60,40,15,.10),
    0 2px 6px rgba(0,0,0,.05) !important;
}
[data-theme="dark"] html .badge-btn.lglass,
[data-theme="dark"] html .badge-menu.lglass,
html [data-theme="dark"] .badge-btn.lglass,
html [data-theme="dark"] .badge-menu.lglass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 10px 28px rgba(0,0,0,.34),
    0 2px 6px rgba(0,0,0,.20) !important;
}

/* Dropdown links — refined hover with subtle indent slide */
html .badge-link {
  display: flex !important;
  align-items: center !important;
  gap: .5em !important;
  padding: .55rem .95rem !important;
  font-family: 'Barlow Condensed', Impact, sans-serif !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--t1, #131110) !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: color .16s, background .16s, padding-left .16s !important;
  position: relative;
}
/* Pille folgt der Maus: gehovertes Item ODER — wenn nichts gehovert wird — die
   aktuelle Seite. Kein Dash. Die aktuelle Seite behält IMMER den orangen Text. */
html .badge-link:hover,
html .badge-link.finger-hover,
html .badge-link.active,
html .badge-link[aria-current="page"] {
  /* --a-text (gedunkeltes Amber, AA) statt --a: volles --a auf der Amber-Pille war
     ~2:1 (amber-on-amber-Falle, vgl. DS-15). --a-text bleibt klar Amber, liest aber. */
  color: var(--a-text, oklch(54% 0.13 48)) !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 14%, transparent) 0%,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 6%, transparent) 100%) !important;
  border-color: color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 22%, transparent) !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--t1, #1a1714) 20%, transparent),
    0 2px 8px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 12%, transparent) !important;
}
/* Sobald wirklich ein Item gehovert wird, verliert die aktuelle Seite ihre Pille
   (oranger Text bleibt) — die Pille sitzt nur noch unter der Maus. :has() greift NUR
   wenn ein Link gehovert ist → Maus im Menü-Padding/auf nichts: aktuelle Seite behält Pille. */
html .badge-menu:has(.badge-link:hover) .badge-link.active:not(:hover),
html .badge-menu:has(.badge-link:hover) .badge-link[aria-current="page"]:not(:hover),
html .badge-menu:has(.badge-link.finger-hover) .badge-link.active:not(.finger-hover),
html .badge-menu:has(.badge-link.finger-hover) .badge-link[aria-current="page"]:not(.finger-hover) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Touch: iOS klebt :hover am ZUERST berührten Item fest (bis zum Loslassen) → die Pille
   blieb beim Swipen dort stehen, nur die Farbe wanderte (User 05.06.2026). Auf Touch-Geräten
   trägt NUR .finger-hover die Pille; festgeklebtes :hover wird neutralisiert. */
@media (hover: none) {
  html .badge-menu .badge-link:hover:not(.finger-hover):not(.active):not([aria-current="page"]) {
    color: var(--t1, #131110) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  html .badge-menu .badge-link { -webkit-tap-highlight-color: transparent; }
  /* Doppel-Tap darf Linktexte nicht selektieren (beiger Kasten, User 02.07.2026) */
  html .badge-menu, html .badge-menu a { -webkit-user-select: none; user-select: none; }
}

/* Special "back to overview" / muted variant */
html .badge-link--back {
  color: var(--t3, #6b6258) !important;
  font-size: .72rem !important;
  letter-spacing: .06em !important;
  font-weight: 600 !important;
}
html .badge-link--back:hover {
  color: var(--t1, #131110) !important;
  background: rgba(120,100,80,0.06) !important;
}

/* CTA variant — ORANGE LIQUID GLASS pill inside dropdown (Apple DNA) */
html .badge-link--cta {
  color: #0c0b0f !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 78%, white 12%) 0%,
    color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 92%, transparent) 100%) !important;
  backdrop-filter: blur(22px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
  border: 1px solid color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 70%, transparent) !important;
  border-radius: 999px !important;
  margin: .25rem 0 0 !important;
  justify-content: center !important;
  letter-spacing: .1em !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 8px 24px color-mix(in srgb, var(--a, oklch(67% 0.14 52)) 32%, transparent),
    0 2px 6px rgba(0,0,0,.08) !important;
}
html .badge-link--cta::before { display: none !important; }
html .badge-link--cta:hover {
  filter: brightness(1.06);
  color: #0c0b0f !important;
  padding-left: .85rem !important;
}

/* Divider entfernt (User-Wunsch): der orange CTA hebt sich schon genug ab.
   Beide Klassennamen abgedeckt — Markup darf bleiben, wird nur ausgeblendet. */
html .badge-divider,
html .badge-sep {
  display: none !important;
}

/* Mobile: keep badge fixed but adjust padding + dropdown alignment */
@media (max-width: 600px) {
  html .name-badge { top: 10px !important; right: 10px !important; }
  /* Icon-only-Kollaps (14.06.2026): das ~176px-Text-Badge verdeckte auf 375/390 die
     rechten Headline-/Card-Enden (pakete „loslegen,", rechner Card-Eyebrow). Unter 600px
     bleibt nur ein ~44px-Rund-Button (Touch-OK) — Content cleart die schmale Pille. */
  html .name-badge .badge-btn {
    font-size: 0 !important;
    padding: 0 !important;
    width: 44px !important; height: 44px !important;
    justify-content: center !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  html .name-badge .badge-btn > img {
    width: 22px !important; height: 22px !important;
  }
  html .name-badge .badge-chevron { display: none !important; }
  /* Breite = Pill-Breite (User 17.06.2026 „so breit wie die Name-Pill oben"): die Basis-Regel
     left:0/right:0 greift → der Pop spannt über den name-badge-Container = die OFFENE Pill-Breite
     (die Pill expandiert bei .badge-open zu „Julian Weisel"). Das frühere feste 280px war
     spürbar breiter als die Pill. Nur eine Viewport-Safety als Maximum. */
  html .badge-pop {
    max-width: calc(100vw - 20px) !important;
  }
  /* Liquid Glass auch mobil (User 17.06.2026 „warum nicht mehr liquid glass") — der dunkle
     Scrim dahinter + die ::after-Blur-Ebene des Menüs tragen die Lesbarkeit; var(--glass) ist
     ~82% Papier → dunkler Text bleibt klar lesbar, sieht aber glasig statt flach-deckend aus.
     (Kein background-Override mehr → die Glas-Füllung aus der Basis-Regel greift wieder.) */
  html .badge-menu { font-size: 1rem !important; }

  /* Beim Öffnen fährt die Icon-Pill aus zu „Julian Weisel" (Logo links + Text + Chevron),
     beim Schließen wieder ein zu nur Logo (User 14.06.2026). */
  html .name-badge.badge-open .badge-btn {
    font-size: .9rem !important;
    width: auto !important; height: auto !important;
    padding: .3rem .6rem !important;
    gap: .35em !important;
    overflow: visible !important;
  }
  html .name-badge.badge-open .badge-btn > img { width: 18px !important; height: 18px !important; }
  html .name-badge.badge-open .badge-chevron { display: inline-block !important; }

  /* (Scrim NICHT mehr als ::before hier — der negative-z-index-Pseudo im fixed/z-100-Kontext
     der Pill blurrt auf iOS-WebKit den Seiten-Backdrop nicht, nur das rgba-Dimmen war sichtbar.
     Jetzt eigenständiges Body-Kind `.badge-scrim` (siehe unten) → Backdrop ist die ganze Seite. */
}

/* Mobile-Menü-Scrim — eigenständiges Body-Kind (von theme.js erzeugt, synchron zu .badge-open).
   Body-Kind statt .name-badge::before, damit backdrop-filter auf iOS die SEITE blurrt (nicht nur
   den winzigen Pill-Kontext). z-index 99 < name-badge(100) → Menü + Analyse-Pill bleiben scharf. */
html .badge-scrim {
  position: fixed; inset: 0; z-index: 99;
  /* Kein backdrop-filter (User 17.06.2026 „mach den Blur weg") — reines Abdunkeln reicht
     fürs Fokussieren, funktioniert auf jedem Gerät ohne iOS-WebKit-Zicken, GPU-günstiger. */
  background: rgba(20,14,8,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
html .badge-scrim.show { opacity: 1; pointer-events: auto; }
/* Nur mobil — das Desktop-Dropdown (öffnet auch per Hover) braucht keinen Vollbild-Scrim. */
@media (min-width: 901px) { html .badge-scrim { display: none !important; } }

/* Focus visibility — keyboard navigation */
html .badge-btn:focus-visible,
html .badge-link:focus-visible {
  outline: 2px solid var(--a, oklch(67% 0.14 52)) !important;
  outline-offset: 2px !important;
}

/* ─── Apple Liquid Glass · Filter/Selection Pills ─────────────
   Stand: 02.06.2026. User: „mach überall die julian weisel pill
   ein bisschen mehr wie Apple Liquid Glass und auch alle anderen
   pills aber IMMER ÜBERALL EINHEITLICH."

   Identische Glass-Schicht für alle Filter/Selection-Pills.
   Größe/Padding/font-size bleibt page-spezifisch (Mainpage,
   Blog-Filter, Benchmarks-Filter haben unterschiedliche Bedeutung
   → unterschiedliche Skala). Nur Visual-Surface ist EINHEITLICH.

   Selected-State (.sel / .on / [data-active]) BLEIBT voll-amber
   + #0c0b0f Text + Amber-Drop-Shadow. */

html .k-chip,
html .reach-chip,
html .tog,
html .svc-tog,
html .filter-btn,
html .filter-chip,
html .bud-chip,
html .sort-btn {
  /* Pillen-rund wie Name-Badge — Halbkreise an beiden Seiten */
  border-radius: 999px !important;
  /* Intensiveres Liquid Glass: stärkerer blur + saturate, klarerer gradient */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--t1) 11%, transparent) 0%,
    color-mix(in srgb, var(--t1) 4%, transparent) 100%) !important;
  backdrop-filter: blur(22px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
  border: 1px solid color-mix(in srgb, var(--t1) 13%, transparent) !important;
  /* Liquid-Glass-Shadow stack: prominenter top-highlight + soft drop */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--t1) 26%, transparent),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 6px 18px rgba(0,0,0,.08),
    0 1px 3px rgba(0,0,0,.05) !important;
  transition: background .15s, color .15s, border-color .15s, box-shadow .18s, transform .15s !important;
}
[data-theme="dark"] html .k-chip,
[data-theme="dark"] html .reach-chip,
[data-theme="dark"] html .tog,
[data-theme="dark"] html .filter-btn,
[data-theme="dark"] html .filter-chip,
[data-theme="dark"] html .bud-chip {
  background: linear-gradient(180deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.05) 100%) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 6px 22px rgba(0,0,0,.32),
    0 2px 4px rgba(0,0,0,.18) !important;
}

/* Hover: amber-Tint mit deutlicherem Glow */
html .k-chip:hover,
html .reach-chip:hover,
html .tog:hover,
html .filter-btn:hover,
html .filter-chip:hover,
html .bud-chip:hover,
html .sort-btn:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a) 18%, transparent) 0%,
    color-mix(in srgb, var(--a) 8%, transparent) 100%) !important;
  border-color: color-mix(in srgb, var(--a) 26%, transparent) !important;
  color: var(--t1) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--t1) 28%, transparent),
    inset 0 -1px 0 rgba(0,0,0,.05),
    0 8px 24px color-mix(in srgb, var(--a) 24%, transparent),
    0 2px 4px rgba(0,0,0,.06) !important;
}

/* Selected: ORANGE LIQUID GLASS — gleiche DNA wie alle orange Buttons.
   Amber-Tint bei 78-92% opacity + backdrop-blur + top-highlight + Glow. */
html .k-chip.sel,
html .reach-chip.sel,
html .tog.sel,
html .svc-tog.sel,
html .filter-btn[data-active],
html .filter-chip.on,
html .bud-chip.sel,
html .sort-btn[aria-pressed="true"] {
  /* Liquid Glass (User 14.06.2026 „angeklickt sieht plain orange aus"): lit-from-within
     Amber — heller Glas-Kern oben, satter zum Rand; kräftige weiße Specular-Kante oben +
     innere Tiefe unten + Amber-Halo. Liest als beleuchtetes Glas statt flacher Farbe. */
  background: radial-gradient(125% 145% at 50% -12%,
    color-mix(in srgb, var(--a) 60%, white 24%) 0%,
    color-mix(in srgb, var(--a) 84%, transparent) 46%,
    color-mix(in srgb, var(--a) 94%, black 5%) 100%) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border: 1px solid color-mix(in srgb, var(--a) 68%, transparent) !important;
  color: #0c0b0f !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.6),
    inset 0 -2px 3px rgba(120,55,8,.26),
    0 0 14px color-mix(in srgb, var(--a) 30%, transparent),
    0 8px 24px color-mix(in srgb, var(--a) 30%, transparent),
    0 2px 6px rgba(0,0,0,.10) !important;
}
html .k-chip.sel:hover,
html .reach-chip.sel:hover,
html .tog.sel:hover,
html .filter-btn[data-active]:hover,
html .filter-chip.on:hover,
html .bud-chip.sel:hover,
html .sort-btn[aria-pressed="true"]:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ─── Dark-Mode: Orange-Glass reicher statt ausgewaschen ──────────
   Im Dark-Mode macht der white-12%-Tint + heller Top-Highlight das Amber
   chalky/blass. Hier: kein white-Aufhellen, gedämpfter Highlight, satter
   Amber-Glow. Gilt für ALLE amber-glass Flächen (CTAs + selected Pills). */
[data-theme="dark"] html .btn-amber,
[data-theme="dark"] html .btn.btn-solid,
[data-theme="dark"] html .btn-primary,
[data-theme="dark"] html .analyse-cta-float,
[data-theme="dark"] html .cta-actions .cta-primary,
[data-theme="dark"] html .back-link.back-link--primary,
[data-theme="dark"] html .badge-menu .badge-link--cta,
[data-theme="dark"] html .badge-link--cta,
[data-theme="dark"] html .btn.sec-cta.unlocked,
[data-theme="dark"] html .k-chip.sel,
[data-theme="dark"] html .reach-chip.sel,
[data-theme="dark"] html .tog.sel,
[data-theme="dark"] html .svc-tog.sel,
[data-theme="dark"] html .filter-btn[data-active],
[data-theme="dark"] html .filter-chip.on,
[data-theme="dark"] html .bud-chip.sel,
[data-theme="dark"] html .sort-btn[aria-pressed="true"] {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a) 92%, white 5%) 0%,
    var(--a) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 8px 26px color-mix(in srgb, var(--a) 42%, transparent),
    0 2px 6px rgba(0,0,0,.2) !important;
}
/* Dark Orange-Glas — nur Button-Familie (überschreibt die Sammelregel oben; Pills bleiben wie sie sind) */
[data-theme="dark"] html .btn-amber,
[data-theme="dark"] html .btn.btn-solid,
[data-theme="dark"] html .btn-primary,
[data-theme="dark"] html .analyse-cta-float {
  color: #1a0d02 !important;
  /* Dark: höherer Tint (dunkler BG schimmert durch) + Brightness, damit das dunkle Label lesbar bleibt */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a) 66%, transparent) 0%,
    color-mix(in srgb, var(--a) 84%, transparent) 100%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.7) brightness(1.12);
  backdrop-filter: blur(16px) saturate(1.7) brightness(1.12);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.42),
    inset 0 -1.5px 2px rgba(0,0,0,.35),
    0 8px 24px -4px color-mix(in srgb, var(--a) 48%, transparent),
    0 2px 6px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .seg-thumb,
[data-theme="dark"] .cb-accept {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--a) 92%, white 5%) 0%,
    var(--a) 100%) !important;
}

/* ─── Liquid Glass · Global Blog-Article Components ─────────────────
   signal-box, sidebar-block, art-page-link — used across blog articles.
   Added 02.06.2026: surfaces were either unstyled or missing backdrop-filter.
   color-mix(var(--t1)) auto-adapts light/dark. */

/* Signal-box — informational callout used in blog articles */
/* ─── Blog-Artikel-Content-Boxen · Liquid Glass (zentraler Override) ──────
   Diese Klassen sind pro Artikel inline definiert (~35 Dateien, flach var(--bg2)).
   `html .X` + !important schlägt die Inline-Defs und glassifiziert alle auf einmal.
   Nur die Glas-Oberfläche wird überschrieben — Radius/Padding/Font bleiben inline. */
html .signal-box,
html .sidebar-block,
html .art-page-link,
html .formula-box,
html .example-box,
html .measure-box,
html .checklist-box,
html .timeline-box,
html .kpi-tile {
  background: linear-gradient(180deg, color-mix(in srgb,var(--t1) 9%,transparent) 0%, color-mix(in srgb,var(--t1) 3%,transparent) 100%) !important;
  backdrop-filter: blur(24px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(175%) !important;
  border-color: color-mix(in srgb,var(--t1) 13%,transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb,var(--t1) 22%,transparent), 0 6px 18px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   .lglass — Apple-style SVG-Brechungs-Glas (Opt-in, Chromium-Enhancement)
   ────────────────────────────────────────────────────────────────────────
   Markiert ein Element für liquid-glass.js (echte Kanten-Brechung + Glint).
   • NON-CHROMIUM (Safari/iOS/Firefox): KEINE Regel greift → das Element
     behält sein bestehendes Frosted-Glas (legibel). Kein Risiko.
   • CHROMIUM: Basis-Backdrop bewusst klar (wenig Blur), damit die
     Kanten-Brechung sichtbar ist; weiche Inset-Fase gibt Glas-Dicke.
     liquid-glass.js hängt url(#lg-refract-N) davor + den Cursor-Glint.
   Nur auf wenige prominente Elemente (Hero/Nav/Featured), nie dichte Grids. */
@supports (backdrop-filter: url(#x)) or (-webkit-backdrop-filter: url(#x)) {
  html .lglass {
    /* Blur bewusst moderat (nicht 0): über ruhigen Section-Hintergründen ist die Brechung ohnehin dezent,
       also NICHT die Lesbarkeit für einen kaum sichtbaren Effekt opfern. Fase + Glint + leichte Brechung
       kommen trotzdem durch; über bewegtem Hintergrund (Hero-Foto) ist die Brechung sichtbar stärker. */
    -webkit-backdrop-filter: blur(10px) saturate(1.6) brightness(1.02);
    backdrop-filter: blur(10px) saturate(1.6) brightness(1.02);
    box-shadow:
      inset 0 0.5px 1px rgba(255,255,255,.26),
      inset 0 -1.5px 2px rgba(0,0,0,.16),
      0 1px 1px rgba(0,0,0,.10),
      0 10px 20px -8px rgba(0,0,0,.30),
      0 28px 56px -22px rgba(0,0,0,.42) !important;
  }
  /* Dark Mode: kräftigere obere Lichtkante + tiefere Schatten (helle Fase auf dunklem Glas, deutlicheres Schweben) */
  [data-theme="dark"] html .lglass, html [data-theme="dark"] .lglass {
    -webkit-backdrop-filter: blur(10px) saturate(1.5) brightness(1.08);
    backdrop-filter: blur(10px) saturate(1.5) brightness(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 -1.5px 2px rgba(0,0,0,.32),
      0 1px 1px rgba(0,0,0,.30),
      0 12px 26px -8px rgba(0,0,0,.50),
      0 30px 60px -22px rgba(0,0,0,.55) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   .amber-lit — „Lit-from-within": Amber-Display-Text mit Innen-Glanz.
   Für GROSSE Zahlen / Display-Eyebrows (besteht WCAG-Large). background-clip:text
   → heller warmer Kern oben → tiefes Amber unten; drop-shadow = Anker (Light) / Glow (Dark).
   Fallback ohne background-clip:text → das Element behält seine eigene (Amber-)Farbe. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html .amber-lit {
    background: radial-gradient(125% 85% at 50% 14%,
      oklch(90% 0.105 76), oklch(67% 0.14 52) 50%, oklch(55% 0.13 48)) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent; color: transparent !important;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.16));
  }
  [data-theme="dark"] html .amber-lit {
    background: radial-gradient(125% 85% at 50% 14%,
      oklch(93% 0.10 80), oklch(74% 0.14 58) 48%, oklch(60% 0.14 52)) !important;
    filter: drop-shadow(0 0 12px oklch(72% 0.16 60 / .4)) drop-shadow(0 1px 0 rgba(0,0,0,.45));
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Text-Balance: keine Waisen-Wörter in mehrzeiligen Headlines/Eyebrows/Sublines
   (text-wrap:balance greift nur bei kurzem mehrzeiligem Text → für lange Absätze
   wirkungslos, also unbedenklich breit anwendbar). */
html h1, html h2, html h3,
html .sec-h, html .hero-title, html .hero-promise, html .blog-title, html .art-title,
html .sec-label, html .eyebrow, html .hero-eyebrow, html .cmp-eyebrow, html .ap-label, html .kicker, html .paket-kicker,
html .sec-intro, html .sec-sub, html .hero-intro, html .hero-sub, html .hero-lead,
html .area-question, html .area-focus, html .area-sub, html .form-panel-sub,
html .num-lbl, html .stat-label, html .card-title, html .art-related-card-h, html .quick-list .ap-label {
  text-wrap: balance;
}

/* ── Kleine-Label-AA-Sweep (05.06.2026) ───────────────────────────────────
   Amber-Caps < 14pt brauchen 4.5:1. --a (#C4843A) liefert nur ~3.2:1 → AA-Fail.
   --a-text (#9B5E1F Light · #E8B07A Dark) bleibt klar Amber, besteht aber AA.
   !important schlägt die page-inline `.ap-label{color:var(--a)}`-Duplikate (index/
   fragen/themen/pakete/standpunkte). Marker/Striche bleiben hell-amber (Deko). */
html .ap-label, html .cmp-eyebrow, html .kicker, html .paket-kicker,
html .quick-list .ap-label,
/* Erweiterung 14.06.2026: weitere kleine Amber-Caps/-Labels, die noch var(--a) (~2.8:1)
   nutzten → zentral auf --a-text (4.62:1 AA). Single Source statt Inline-Patch je Seite. */
html .hero-eyebrow, html .page-label, html .alt-eyebrow,
html .prio-panel-lbl, html .pot-refine,
html .pot-note-trigger, html .pot-note-saved, html .sec-teaser strong,
/* 14.06.2026: zwei kleine Amber-Caps-Labels in Blog-Artikeln (calc-eyebrow .58rem,
   art-related-label .6rem) standen noch auf vollem --a (~2.8:1) → AA-Fail. Striche
   (::before) bleiben auf --a (dekorativ, kein Textkontrast nötig). */
html .calc-eyebrow, html .art-related .art-related-label,
html .send-alt-toggle input:checked + span,
/* 14.06.2026: Bereichs-Zähler „BEREICH 0X" der Mobile-progress-nav (themen/standpunkte)
   stand auf --a (.74rem Caps, ~2.8-3.2:1) → AA-Fail. Der border-right-Strich des ::before
   bleibt --a (dekorativ). */
html .progress-nav::before {
  color: var(--a-text) !important;
}
/* .pot-refine: opacity drückte --a-text wieder unter AA → entfernen (volle Deckung). */
html .pot-refine { opacity: 1 !important; }