/* ═══════════════════════════════════════════════════════════════════
   LOUSMONT DESIGN SYSTEM v2 — Richtung R3 "Produkt-Buehne" (User-Wahl 2026-08-14)
   Design-These (User-Feedback 14.08.): EIN Rueckgrat — die FASER als gerichtetes
   Band (bewaehrtes Rezept der Live-Site), im Hero gross, an Sektionsgrenzen als
   schmale fliessende Linie (.faser-rule). Nur ZWEI Bewegungen auf der Seite:
   Faser + Anruf-Buehne. Sonst absolute Ruhe — kein Korn, kein Sweep, kein
   Stagger, keine Hover-Spielereien.
   Kein Inline-CSS auf Seiten (Ziel-CSP: style-src 'self').
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F6F1E5; --paper-2:#EDE5D2; --ink:#1A0E14; --ink-2:#2E1F26; --ink-3:#5A4A50;
  --wine:#5A2030; --bordeaux:#8A3848; --coral:#C56F6E; --amber:#E8B984; --champagne:#F4DCAE;
  --rule:rgba(26,14,20,.14); --ease:cubic-bezier(.32,.72,0,1);
  --dark:#120912; --dark-2:#1E0F1A; --on-dark:#F4DCAE; --on-dark-dim:#C9B3A6;
  --wrap:1280px; --pad:42px;
  --faser-grad:linear-gradient(95deg,var(--wine),var(--bordeaux) 14%,var(--coral) 30%,var(--amber) 46%,var(--champagne) 50%,var(--amber) 54%,var(--coral) 70%,var(--bordeaux) 86%,var(--wine));
}

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
.mono{font-family:"JetBrains Mono",monospace}

/* ── DIE FASER — das eine Rueckgrat ─────────────────────────────────
   Band: palindromischer Verlauf, background-position-Flow (24s Band / 43s Halo
   gegenlaeufig — Loop-Sprung-Fix 15.08.: exakt 1 Kachel = -150 %-Punkte), CSS-blur,
   vertikale Maske, ragt seitlich ueber die Raender (Kanten nie sichtbar). */
.faser{position:absolute;left:-35%;right:-35%;pointer-events:none;z-index:-1;
  animation:faser-sway 47s ease-in-out infinite alternate}
.faser .band,.faser .halo{position:absolute;inset:0;background:var(--faser-grad);background-size:300% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.03) 8%,rgba(0,0,0,.14) 20%,rgba(0,0,0,.38) 35%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.38) 65%,rgba(0,0,0,.14) 80%,rgba(0,0,0,.03) 92%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.03) 8%,rgba(0,0,0,.14) 20%,rgba(0,0,0,.38) 35%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.38) 65%,rgba(0,0,0,.14) 80%,rgba(0,0,0,.03) 92%,transparent 100%)}
.faser .halo{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.04) 12%,rgba(0,0,0,.18) 28%,rgba(0,0,0,.50) 50%,rgba(0,0,0,.22) 72%,rgba(0,0,0,.05) 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.04) 12%,rgba(0,0,0,.18) 28%,rgba(0,0,0,.50) 50%,rgba(0,0,0,.22) 72%,rgba(0,0,0,.05) 88%,transparent 100%)}
.faser .band{filter:blur(28px);opacity:.62;animation:faser-flow 24s linear infinite}
.faser .halo{filter:blur(52px);opacity:.30;transform:scaleY(1.6);animation:faser-halo 43s linear infinite}
@keyframes faser-flow{from{background-position:0% 50%}to{background-position:-150% 50%}}
@keyframes faser-halo{from{background-position:-150% 50%}to{background-position:0% 50%}}
@keyframes faser-sway{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
/* ── Unterseiten-Kopf (page-hero) ── */
.page-hero{padding:150px var(--pad) 30px;max-width:var(--wrap);margin:0 auto;position:relative;z-index:0}
.page-hero .hero-faser{top:44%;height:170px}
.page-hero .lede{margin:14px 0 8px;max-width:56ch}
.page-hero .sub{font-size:15px;line-height:1.65;color:var(--ink-3);max-width:60ch;margin-bottom:26px}
.page-hero .hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
/* Runde 7: 92px wie der Startseiten-Hero — die Unterseiten hatten 120px,
   der Abstand ueber dem Eyebrow war inkonsistent (User-Fund auf /voice/) */
/* Runde 8: die Faser ragt bewusst -35%/+35% raus (siehe .faser) und machte
   jede Unterseite 168px breiter als den Viewport — auf dem Handy wandern
   fixe Elemente (Burger!) dadurch aus dem Bild. overflow:hidden NUR mobil:
   dort ist .page-hero bildschirmbreit, die Schnittkante liegt exakt auf dem
   Rand und bleibt unsichtbar. AUF DESKTOP VERBOTEN — .page-hero ist dort
   1280px zentriert, der Clip macht aus der Faser ein Rechteck mit harten
   Kanten (nachgemessen 1600px: sichtbarer Kasten = "Fleck statt Faser"). */
@media (max-width:900px){.page-hero{padding:92px var(--pad) 20px;overflow:hidden}}

/* Die Faser als schmale Linie: derselbe Verlauf, derselbe Fluss — der rote
   Faden taucht an den Sektionsgrenzen wieder auf. */
.faser-rule{height:3px;border-radius:99px;max-width:calc(var(--wrap) - 2*var(--pad));margin:0 auto;
  background:var(--faser-grad);background-size:300% 100%;opacity:.55;
  animation:faser-flow 24s linear infinite}

/* ── Topstrip ── */
/* Handy-Review 17.08.: color-mix() liess die Kopfzeile auf Browsern ohne
   Support transparent werden. Runde 2 (390px-Audit): auch rgba .94 liess fette
   Headlines als Geistertext durchscheinen — jetzt VOLL deckend (backdrop-filter
   ist ueber der Faser tabu, also schlicht Papierfarbe). */
.top{position:fixed;inset:0 0 auto 0;z-index:90;display:flex;align-items:center;gap:26px;
  padding:14px var(--pad);background:var(--paper);border-bottom:1px solid var(--rule);
  /* Runde 5 ("URL-Header verschwindet immer noch", Android): fixe Elemente
     koennen beim Compositor-Scroll ueber grossen animierten Blur-Layern
     (Faser!) gedroppt werden — eigene Ebene erzwingen. BEWUSST ohne
     transform/will-change:transform: das machte .top zum containing block
     der fixen Drawer-Kinder und braeche das Burger-Menue. */
  backface-visibility:hidden;will-change:opacity}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:34px;height:34px;flex:none}
.brand .word b{display:block;font-weight:800;font-size:14px;letter-spacing:.24em}
.brand .word span{display:block;font-weight:500;font-size:9.5px;letter-spacing:.31em;color:var(--ink-2)}
nav.main{display:flex;gap:24px;margin-left:auto;font-size:14px;font-weight:600;color:var(--ink-2)}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--wine)}
.cta-pill{background:var(--wine);color:var(--champagne);font-size:13.5px;font-weight:700;padding:10px 20px;border-radius:99px;flex:none}
.cta-pill:hover{background:var(--ink)}

/* ── Typo-Bausteine ── */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:"JetBrains Mono",monospace;font-size:11.5px;
  letter-spacing:.14em;color:var(--ink-3);border:1px solid var(--rule);border-radius:99px;padding:7px 15px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--coral)}
.kicker{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.16em;color:var(--bordeaux);margin-bottom:12px}
.h-display{font-weight:300;font-size:clamp(40px,4.2vw,62px);line-height:1.07;letter-spacing:-.015em}
.h-section{font-weight:300;font-size:clamp(30px,3vw,44px);line-height:1.1}
.accent{font-family:"Fraunces",serif;font-style:italic;font-weight:500;color:var(--wine)}
.lede{font-weight:500;font-size:clamp(16px,1.4vw,21px);color:var(--ink-2)}
.copy{font-size:15px;line-height:1.65;color:var(--ink-3)}
.meta-line{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.12em;color:var(--ink-3)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:14px 26px;border-radius:12px;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--wine)}
.btn-ghost{border:1.5px solid var(--rule);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--coral)}

/* ── Layout-Huellen ── */
.blk{max-width:var(--wrap);margin:0 auto;padding:90px var(--pad) 10px}
.blk .desc{font-size:15.5px;line-height:1.7;color:var(--ink-2);max-width:60ch;margin:12px 0 34px}
.pillars{display:flex;align-items:center;justify-content:center;padding:15px 0 17px;
  max-width:var(--wrap);margin:0 auto;width:100%}
.pillars a{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--ink-3);padding:4px 20px;position:relative}
.pillars a+a::before{content:"·";position:absolute;left:-4px;color:var(--coral)}
.pillars a:hover{color:var(--wine)}

/* ── Anruf-Panel (Buehne) — die zweite, inhaltliche Bewegung ── */
.phone{background:linear-gradient(165deg,var(--dark-2),var(--dark) 60%);border-radius:26px;padding:26px 26px 22px;
  color:var(--champagne);box-shadow:0 40px 90px -40px rgba(26,14,20,.75),0 0 0 1px rgba(244,220,174,.08);max-width:470px}
.ph-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.ph-status{display:flex;align-items:center;gap:9px;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;color:var(--on-dark-dim)}
.ph-status .liv{width:8px;height:8px;border-radius:50%;background:var(--coral)}
.ph-brand{display:flex;align-items:center;gap:8px;opacity:.9}
.ph-brand svg{width:22px;height:22px}
.ph-brand span{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.2em}
.caller{display:flex;align-items:center;gap:14px;background:rgba(244,220,174,.06);border:1px solid rgba(244,220,174,.12);
  border-radius:16px;padding:14px 16px;margin-bottom:18px}
.caller .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--bordeaux),var(--coral));
  display:flex;align-items:center;justify-content:center;font-family:"Fraunces",serif;font-style:italic;font-size:20px;color:var(--paper);flex:none;position:relative}
  /* overflow:hidden entfernt (AI-Chip ragt ueber den Rand); Rundung traegt das img */
.caller .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.caller .who b{display:block;font-size:15px;font-weight:700;color:var(--paper)}
.caller .who span{font-size:12px;color:var(--on-dark-dim)}
.caller .dur{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--on-dark-dim)}
.script{display:flex;flex-direction:column;gap:10px;min-height:188px}
.line{max-width:88%;padding:10px 14px;border-radius:13px;font-size:13.5px;line-height:1.5;opacity:0;animation:ph-speak .7s var(--ease) forwards}
.line.su{background:rgba(197,111,110,.2);border:1px solid rgba(197,111,110,.3);align-self:flex-start;color:#F6E9D8}
.line.ca{background:rgba(244,220,174,.09);border:1px solid rgba(244,220,174,.14);align-self:flex-end;color:#E8DCC8}
.line small{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.12em;opacity:.65;margin-bottom:3px}
.line:nth-child(1){animation-delay:.3s}.line:nth-child(2){animation-delay:1.2s}
.line:nth-child(3){animation-delay:2.1s}.line:nth-child(4){animation-delay:3s}
@keyframes ph-speak{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ph-result{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.chip{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;color:var(--champagne);
  border:1px solid rgba(244,220,174,.25);border-radius:99px;padding:6px 12px}
.chip.hot{background:rgba(197,111,110,.22);border-color:rgba(197,111,110,.4)}
.ph-switch{display:flex;gap:8px;margin-top:18px;border-top:1px solid rgba(244,220,174,.1);padding-top:16px}
.sw{flex:1;text-align:center;font-size:12.5px;font-weight:700;padding:9px 0;border-radius:10px;border:1px solid rgba(244,220,174,.16);color:var(--on-dark-dim)}
.sw.on{background:var(--champagne);color:var(--ink);border-color:var(--champagne)}

/* Choreografie-Bausteine (JS-gesteuert) */
.speakwave{display:inline-flex;align-items:center;gap:2.5px;height:14px;margin-left:10px;opacity:0;transition:opacity .3s}
.speakwave i{width:2.5px;height:30%;border-radius:2px;background:var(--coral)}
.phone.talking .speakwave{opacity:1}
.phone.talking .speakwave i{animation:sw .9s ease-in-out infinite}
.phone.talking .speakwave i:nth-child(2){animation-delay:.15s}
.phone.talking .speakwave i:nth-child(3){animation-delay:.3s}
.phone.talking .speakwave i:nth-child(4){animation-delay:.45s}
@keyframes sw{0%,100%{height:30%}50%{height:100%}}
.typing{align-self:flex-start;display:none;gap:5px;padding:12px 16px;border-radius:13px;
  background:rgba(197,111,110,.14);border:1px solid rgba(197,111,110,.22)}
.typing.on{display:inline-flex}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--coral);opacity:.5;animation:typ 1.1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes typ{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.js .script .line{animation:none;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .script .line.show{opacity:1;transform:none}
.js .ph-result .chip{opacity:0;transform:translateY(6px) scale(.96);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .ph-result .chip.show{opacity:1;transform:none}
.script,.ph-result{transition:opacity .45s var(--ease)}
.phone.swap .script,.phone.swap .ph-result{opacity:0}

/* ── Preis-Buehne ── */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price{background:rgba(255,255,255,.5);border:1px solid var(--rule);border-radius:20px;padding:28px;position:relative;display:flex;flex-direction:column}
.price.hot{background:linear-gradient(170deg,var(--dark-2),var(--dark) 70%);color:var(--paper);border:0;
  box-shadow:0 30px 70px -34px rgba(26,14,20,.7);transform:translateY(-10px)}
.price.hot .pconv,.price.hot .pwas,.price.hot .pmeta{color:var(--on-dark-dim)}
.pname{font-weight:800;font-size:15px}
.pconv{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-3);margin:4px 0 18px}
.pnow{font-weight:300;font-size:44px;letter-spacing:-.02em}
.pnow small{font-size:15px;font-weight:500;opacity:.7}
.pwas{font-size:13px;color:var(--ink-3)}
.pwas s{opacity:.75}
.pfound{position:absolute;top:-12px;left:26px;background:var(--coral);color:var(--ink);
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;padding:6px 13px;border-radius:99px;font-weight:600}
.pmeta{font-size:13px;color:var(--ink-3);margin-top:14px;line-height:1.55;flex:1}
.pgo{margin-top:18px;text-align:center;font-weight:700;font-size:14px;border:1.5px solid var(--rule);border-radius:11px;padding:11px 0}
.price.hot .pgo{background:var(--champagne);color:var(--ink);border-color:var(--champagne)}
.price .pgo:hover{border-color:var(--coral)}
.pnote{font-size:13px;color:var(--ink-3);margin-top:22px}
.pnote b{color:var(--wine)}

/* ── Kachel-Reihe ── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{border:1px solid var(--rule);border-radius:20px;padding:26px;background:rgba(255,255,255,.4);display:flex;flex-direction:column;gap:10px}
.tile .ic{width:46px;height:46px;border-radius:13px;background:var(--paper-2);display:flex;align-items:center;justify-content:center}
.tile .ic svg{width:26px;height:26px}
.tile h3{font-size:17px;font-weight:800}
.tile p{font-size:13.5px;color:var(--ink-2);line-height:1.6;flex:1}
.tile .go{font-weight:700;font-size:13.5px;color:var(--wine)}
.tile .tag{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--wine)}

/* ── Werte + Abschluss-CTA ── */
.values{padding:70px var(--pad) 40px;text-align:center}
.values p{max-width:62ch;margin:0 auto;font-weight:500;font-size:clamp(17px,1.7vw,23px);line-height:1.6;color:var(--ink-2)}
.final{text-align:center;padding:20px var(--pad) 90px}
.final .meta-line{margin-top:16px}

/* ── Footer ── */
.site-footer{border-top:1px solid var(--rule);padding:28px var(--pad);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.site-footer .fb{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3)}
.site-footer svg{width:24px;height:24px}
/* 390px-Audit 17.08.: ohne wrap lief die Zeile aus dem Viewport ("Intern"
   abgeschnitten + unerreichbar, "Ueber uns" brach mitten im Link) */
.site-footer nav{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:13px;color:var(--ink-3);margin-left:auto}
.site-footer nav a{white-space:nowrap}
/* Matrix-Audit: beim Umbruch der Saeulen-Zeile begann Zeile 2 mit dem
   Trennpunkt ("· GOVERNANCE") — mobil sauberes 2x2-Raster ohne Punkte */
@media (max-width:560px){
  .pillars{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:6px 28px}
  .pillars a{padding:4px 0;text-align:center}
  .pillars a+a::before{display:none}
}
/* Handy-Runde 3 (User: "Fusszeile zweizeilig geht gar nicht"): mobil wird der
   Footer eine zentrierte Spalte, die Link-Zeile traegt NUR die vier
   Rechts-Links (Methode + Ueber uns stecken im Burger-Drawer) -> einzeilig. */
@media (max-width:560px){
  .site-footer{flex-direction:column;align-items:center;gap:10px;text-align:center;padding:24px var(--pad)}
  .site-footer nav{margin-left:0;justify-content:center;gap:2px 14px}
  .site-footer nav a[href="/methode/"],
  .site-footer nav a[href="/ueber-uns/"]{display:none}
}
/* Runde 8 (User-Fund Desktop): das Badge stand in der Flex-Zeile direkt
   hinter den Footer-Links und las sich wie ein 7. Nav-Eintrag. Wie auf
   der Live-Site (v1 .footer-meta) bekommt es eine eigene Zeile: volle
   Breite, rechtsbuendig unter der Nav. Mobil (Spalten-Footer) aendert
   flex-basis nichts an der zentrierten Stapelung. */
.site-footer .badge{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink-3);
  flex-basis:100%;text-align:right}

/* ── Reveal (dezent; ohne JS bleibt alles sichtbar) ── */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ── Responsive ── */
@media (max-width:900px){
  :root{--pad:20px}
  nav.main{display:none}
  .pillars{flex-wrap:wrap;gap:4px 0}
  /* Handy-Review 17.08.: Sektionslaengen passten nicht zum Screen — straffer */
  .blk{padding:48px var(--pad) 8px}
  .blk .desc{margin-bottom:24px}
  .pricing,.tiles{grid-template-columns:1fr}
  .price.hot{transform:none}
  .values{padding:44px var(--pad) 24px}
  .final{padding:12px var(--pad) 60px}
  .faser .band{filter:blur(22px);opacity:.5}
  .faser .halo{opacity:.24}
}

/* ── Ruhe fuer Bewegungs-Empfindliche ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faser,.faser .band,.faser .halo,.faser-rule{animation:none}
  .line,.js .script .line{animation:none;opacity:1;transform:none;transition:none}
  .js .ph-result .chip{opacity:1;transform:none;transition:none}
  .ph-status .liv,.typing i{animation:none}
  .typing{display:none !important}
  .phone.talking .speakwave i{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* Review-Fixes: Utility statt Inline-Style; sichtbarer Tastatur-Fokus (Muster aus base.css);
   mobil: Platz fuer den Hamburger neben der CTA-Pill */
.gap-top{margin-top:30px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--bordeaux);outline-offset:3px}
@media (max-width:900px){.top .cta-pill{margin-right:52px}}
/* Handy-Runde 2 (17.08., echtes 390px-Harness): unter ~560px rutschte die
   CTA-Pille unter den fixen Burger — dunkle Striche auf Wein = unsichtbares
   Menue — und quetschte die Marke dreizeilig. Die Pille steckt ohnehin im
   Drawer (nav-cta): hier weg, Marke bleibt einzeilig. */
@media (max-width:560px){
  .top .cta-pill{display:none}
  .brand .word b,.brand .word span{white-space:nowrap}
}
/* Utility gegen haessliche Umbrueche in Komposita (z.B. "EU-KI-VO ART. 50") */
.nw{white-space:nowrap}

/* KI-Kennzeichnung direkt am Portraet (User 2026-08-17: "ein kleines AI
   an die Bilder dran") — kleiner Mono-Chip am Kreisrand. Dekorativ
   (aria-hidden), die maschinenlesbare Kennzeichnung tragen alt-Texte
   und die EU-KI-VO-Zeilen. .hell = Variante fuer dunkle Flaechen. */
.ai-tag{position:absolute;right:-6px;bottom:-3px;z-index:1;font-family:"JetBrains Mono",monospace;
  font-style:normal;font-weight:500;font-size:8px;letter-spacing:.1em;line-height:1;
  padding:3px 5px;border-radius:6px;background:var(--ink);color:var(--champagne);
  box-shadow:0 0 0 1.5px var(--paper)}
.ai-tag.hell{background:var(--champagne);color:var(--ink);box-shadow:0 0 0 1.5px rgba(26,14,20,.55)}
/* Schmale Phones: Eyebrow-Pille bricht sonst in sich um.
   Runde 7: Breakpoint 390->430 — Pixel-Geraete sind 393px breit,
   die Kompakt-Regel griff dort nicht (User-Fund: Umbruch auf /voice/)
   Runde 8: 10px/.1em reichten bei 360px immer noch nicht (gemessen:
   /voice/ braucht 330px, Platz sind 320px). Groesster Hebel ist das
   TRACKING (.1em = 1px pro Zeichen bei 41 Zeichen!), nicht der Grad —
   darum .1em->.04em + 9.5px statt eines weiteren Breakpoints. */
@media (max-width:430px){
  .eyebrow{font-size:9.5px;letter-spacing:.04em;gap:6px;padding:6px 10px}
}