@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════
   tonstudio.ai — style2026.css
   ----------------------------------------------------------------------
   Design-SCHICHT   : ansagen.ai v6 (Rhythmus, eine Kartensignatur,
                      ruhige Typo, Chrome mit Blur-Nav + USP-Band)
   Design-CHARAKTER : tonstudio.ai (Petrol-Navy + Teal + Rot-CTA, Geist)

   Diese Datei ERSETZT die alte style.css vollstaendig (die alte hatte
   9.399 Zeilen und 481 !important — dagegen anzuschreiben haette
   dauerhaft Spezifitaetskaempfe bedeutet). Sie bedient alle 187 im
   Markup tatsaechlich verwendeten Klassen.

   Aufbau:
     1  Tokens
     2  Reset-Ergaenzung + Grundtypografie
     3  Utilities (Spacing-Klassen aus dem Bestand!)
     4  Chrome: Kopf (Nav, Beratungsband, Mobilmenue)
     5  Sektionen + Flaechen-Rhythmus
     6  Karten, Grids, Listen, CTAs
     7  Content-Module (FAQ, Ansagetexte, Steps, Preise, Hero)
     8  Seiten-Unikate (Sprechzeit-Rechner, Konverter, Exit-Intent)
     9  Chrome: Fuss
    10  Vue-Overlay + Consent
    11  Responsive
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 0  HAUSSCHRIFT GEIST ════════════════════════════════════════════
   Lokal ausgeliefert (assets/css/fonts/geist/, 9 Schnitte à ~30 KB).
   Bewusst nicht von einem fremden Host — das Rendering darf nicht an
   api.brenner-medien.de haengen. Pfade sind relativ zu DIESER Datei,
   gelten also unabhaengig von der Seitentiefe.                    */
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:100;src:url("fonts/geist/geist-100.woff2") format("woff2");}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:200;src:url("fonts/geist/geist-200.woff2") format("woff2");}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:300;src:url("fonts/geist/geist-300.woff2") format("woff2");}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:400;src:url("fonts/geist/geist-400.woff2") format("woff2");}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:500;src:url("fonts/geist/geist-500.woff2") format("woff2");}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:600;src:url("fonts/geist/geist-600.woff2") format("woff2");}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:700;src:url("fonts/geist/geist-700.woff2") format("woff2");}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:800;src:url("fonts/geist/geist-800.woff2") format("woff2");}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:900;src:url("fonts/geist/geist-900.woff2") format("woff2");}

/* ══ 1  TOKENS ═══════════════════════════════════════════════════════ */
:root{
  /* Marke — 1:1 aus dem v2-Token-Block der alten style.css */
  --main-dark:#0F2E3D;        /* navy      — Headlines            */
  --navy-soft:#2A5468;        /* navy-soft — H3-Ebene             */
  --navy-muted:#6A8A9B;       /* navy-muted— Sekundaerinfo        */
  --main-light:#0E9AA0;       /* teal      — Interaktionsfarbe    */
  --teal-deep:#077C82;        /* teal-deep — Links, Akzenttext    */
  --teal-tint:#E6F6F7;        /* teal-tint — Flaechen             */
  --main-cta:#EF233C;         /* Signalfarbe                      */
  /* Hausregel: nie flaechiges Flat-Color — immer leichter Verlauf */
  --cta-grad:linear-gradient(135deg,#F5445A 0%,#E11B33 100%);
  --fliesstext:#34515F;
  --gray-100:#F1F4F6;
  --gray-300:#DDE6EA;
  --gray-500:#7C919C;
  --gray-600:#5A727F;
  --hairline:#EAF0F2;

  --font-headlines:"Geist";
  --font-fliesstext:"Geist";
  --site-width:1400px;

  --transition-base:200ms cubic-bezier(.4,0,.2,1);
  --ease:cubic-bezier(.4,0,.2,1);

  /* Eine Kartensignatur fuer die ganze Site */
  --card-radius:16px;
  --card-border:1px solid var(--gray-300);
  --card-shadow:0 2px 4px rgba(15,46,61,.04),0 12px 32px rgba(15,46,61,.08);
  --radius-sm:8px;
  --radius-pill:999px;

  /* Spacing-Rhythmus */
  --sect-y:clamp(3rem,6vw,4.75rem);
  --sect-x:2rem;
}

/* ══ 2  RESET-ERGAENZUNG + GRUNDTYPOGRAFIE ═══════════════════════════ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-fliesstext),system-ui,sans-serif;font-weight:300;
  color:var(--fliesstext);line-height:1.7;background:#fff;
  font-size:1.02rem;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* 🚨 clip, NICHT hidden: hidden macht den Body zum Scroll-Container
     und killt jedes position:sticky sowie scroll-getriebene Animation
     (real erlebt 06.08.2026). */
  overflow-x:clip;
}
a{color:var(--teal-deep);text-decoration:none;
  transition:color var(--transition-base),border-color var(--transition-base),opacity var(--transition-base);}
a:hover{color:var(--main-light);}
:focus-visible{outline:2px solid var(--main-light);outline-offset:2px;border-radius:2px;}
img{display:block;max-width:100%;height:auto;}
ul{list-style:none;}
strong{font-weight:500;}
[v-cloak]{display:none;}

h1,h2,h3,h4{font-family:var(--font-headlines),system-ui,sans-serif;}
h1{
  color:var(--main-dark);font-weight:200;
  font-size:clamp(1.9rem,1.4rem + 1.9vw,2.75rem);
  line-height:1.15;letter-spacing:-.025em;margin-bottom:1.2rem;
}
h1 strong{font-weight:600;}
h2{
  color:var(--main-dark);font-weight:200;
  font-size:clamp(1.55rem,1.25rem + 1.3vw,2.15rem);
  line-height:1.2;letter-spacing:-.02em;margin-bottom:1.1rem;
  max-width:34ch;text-wrap:balance;
}
h2 strong{font-weight:600;}
h3{color:var(--navy-soft);font-weight:600;font-size:1.1rem;line-height:1.35;margin-bottom:.6rem;}
h4{color:var(--navy-soft);font-weight:500;font-size:1.02rem;margin-bottom:.4rem;}
p{margin-bottom:1rem;}
p:last-child{margin-bottom:0;}
p strong{color:inherit;font-weight:500;}
blockquote{margin:0 0 1rem;}
.small{font-size:.88rem;color:var(--gray-500);}
.small strong{color:inherit;font-weight:500;}
.center,.div-center{text-align:center;}
.font-bigger{font-size:1.1rem;}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.slogan{
  text-align:center;font-size:1.1rem;color:var(--main-dark);
  margin:2.5rem auto 1.5rem;max-width:60ch;
}

/* ══ 3  UTILITIES ════════════════════════════════════════════════════
   🚨 Diese Klassen haengen ~1.000× direkt an den Sektions-Divs des
   Bestands-Markups. Sie MUESSEN vollstaendig bedient werden, sonst
   zerfaellt der vertikale Rhythmus jeder Seite. Liste ist die
   vollstaendige Inventur aus dem Markup (inkl. Tippfehler-Variante
   "margin-bottom-0-rem" und der negativen Werte).            */
.margin-top-0rem{margin-top:0 !important;}
.margin-top-0-5rem{margin-top:.5rem !important;}
.margin-top-1rem{margin-top:1rem !important;}
.margin-top-1-5rem{margin-top:1.5rem !important;}
.margin-top-2rem{margin-top:2rem !important;}
.margin-top-3rem{margin-top:3rem !important;}
.margin-top--1rem{margin-top:-1rem !important;}
.margin-top--2rem{margin-top:-2rem !important;}
.margin-bottom-0rem,.margin-bottom-0-rem{margin-bottom:0 !important;}
.margin-bottom-0-5rem{margin-bottom:.5rem !important;}
.margin-bottom-1rem{margin-bottom:1rem !important;}
.margin-bottom-1-5rem{margin-bottom:1.5rem !important;}
.margin-bottom-2rem{margin-bottom:2rem !important;}
.margin-bottom--1rem{margin-bottom:-1rem !important;}
.margin-bottom--2rem{margin-bottom:-2rem !important;}
.margin-bottom--3rem{margin-bottom:-3rem !important;}
.no-padding{padding:0 !important;}
.no-padding-top{padding-top:0 !important;}
.no-padding-bottom{padding-bottom:0 !important;}

/* Sichtbarkeits-Schalter des Bestands */
.only-mobile{display:none;}
@media (max-width:900px){
  .no-mobile{display:none !important;}
  .only-mobile{display:block;}
}

/* ══ 4  CHROME — KOPF ════════════════════════════════════════════════ */

/* Leere Platzhalter aus der Joomla-Aera: nehmen sonst Hoehe weg */
.section[role="pre-head"],
.section[role="post-head"]{display:none;}

/* ── Nav: sticky, Blur, schrumpft beim Scrollen ── */
.section.nav-section,
.section[role="head"]{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  position:sticky;top:0;z-index:60;
  /* 🚨 KLASSE A (Andreas 14.08., gemessen bei 3688px): Nav und Band
     sind SELBST das Flex-Layout — im Markup gibt es keinen inneren
     Container, der die Breite begrenzt (anders als beim Vorbild).
     Dadurch klebte das Logo bei x=0 und das Menue bei x=2436, waehrend
     der Inhalt erst bei x=1128 begann: der Kopf hatte keine gemeinsame
     Fluchtlinie mit der Seite → "Seite ist zu breit".
     Die Kanten-Formel setzt das Innenleben auf die Inhaltsspalte, die
     Hintergrundflaeche laeuft weiter randlos durch. */
  padding-inline:max(var(--sect-x),calc((100% - var(--site-width))/2));
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  /* KLASSE A: Nav 74px + Band 66px = 140px Kopfzone fraßen den ersten
     Screen an. Zusammen jetzt ~108px. */
  height:4rem;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),height .35s var(--ease);
}
/* JS setzt .logo_sticky am body/Logo beim Scrollen — als stuck nutzen */
.section[role="head"].stuck{
  border-bottom-color:var(--gray-300);
  box-shadow:0 1px 20px -8px rgba(15,46,61,.2);
  height:3.9rem;
}
.section[role="head"] > .logo{
  transform-origin:left center;
  transition:transform .35s var(--ease);
  flex:0 0 auto;
}
.section[role="head"].stuck > .logo{transform:scale(.78);}
.section[role="head"] .logo img{height:2.4rem;width:auto;max-width:13rem;}

.section[role="head"] .navigation{flex:1;display:flex;justify-content:flex-end;}
.section[role="head"] .wrapper-nav{width:100%;display:flex;justify-content:flex-end;}
.section[role="head"] .nav-desktop{display:flex;}
.section[role="head"] .nav-mobil{display:none;}
.section[role="head"] ul.mod-menu{
  display:flex;gap:1.5rem;align-items:center;margin:0;padding:0;
}
.section[role="head"] ul.mod-menu > li{margin:0;}
.section[role="head"] ul.mod-menu a{
  position:relative;color:var(--main-dark);font-size:.95rem;font-weight:400;
  padding-bottom:.3rem;display:inline-block;
  transition:color var(--transition-base);
}
.section[role="head"] ul.mod-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--main-dark) 0%,var(--teal-deep) 55%,var(--main-light) 100%);
  transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--ease);
  /* ohne will-change rastert Chrome den Balken am Transition-Ende neu
     — er "springt" sichtbar duenner (real erlebt auf ansagen.ai) */
  will-change:transform;
}
.section[role="head"] ul.mod-menu a:hover{color:var(--teal-deep);}
.section[role="head"] ul.mod-menu a:hover::after{transform:scaleX(1);}
/* aktiver Menuepunkt */
.section[role="head"] ul.mod-menu li.active > a,
.section[role="head"] ul.mod-menu li.current > a{color:var(--teal-deep);font-weight:500;}
.section[role="head"] ul.mod-menu li.active > a::after{transform:scaleX(1);opacity:.5;}

/* ── Beratungsband / Konto-Zeile ──
   KLASSE A (Andreas + Messung): Das Band war 66px hoch — fast so hoch
   wie die Nav (74px) — und als Vollton-Navy die visuell schwerste
   Flaeche im ersten Screen. Eine Servicezeile darf den Markenkopf
   nicht ueberstimmen (0.5 Anker: ein primaeres Blickziel je Screen).
   Jetzt: 44px, hellerer Grund, leisere Schrift. */
.section[role="head-mein-konto"]{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;
  /* gleiche Kanten-Formel wie die Nav — beide muessen auf der
     Inhaltsflucht sitzen, die Flaeche laeuft randlos durch */
  padding-block:.3rem;
  padding-inline:max(var(--sect-x),calc((100% - var(--site-width))/2));
  min-height:2.75rem;
  background:linear-gradient(90deg,#123748 0%,#16455A 55%,#1A4E66 100%);
  color:rgba(255,255,255,.72);
  font-size:.82rem;
  position:relative;z-index:59;
}
.section[role="head-mein-konto"] a{color:rgba(255,255,255,.92);}
.section[role="head-mein-konto"] a:hover{color:#5FE0E5;}
.section[role="head-mein-konto"] p{margin:0;}
.section[role="head-mein-konto"] .reseller,
.section[role="head-mein-konto"] .help,
.section[role="head-mein-konto"] .login{display:flex;align-items:center;gap:.75rem;}
/* 🚨 0.2 Weissraum-Ungleichheit auf /generator (live gemessen):
   Hinweis, H1/Zwischentitel und Generator-Tool liegen in DREI eigenen
   Sektionen mit je 76px oben+unten — zwischen H1 und Tool klafften
   dadurch ~300px, obwohl die drei Bloecke EINE Sinneinheit sind.
   Der Abstand innerhalb der Gruppe muss kleiner sein als der zur
   naechsten Gruppe. Gilt fuer jede Seite, die den Generator einbindet. */
/* Gemessen auf /generator: zwischen H1 (Ende y=274) und Tool (Start
   y=621) lagen 347px, davon nur 41px echter Inhalt — drei Sektionen
   mit je 76px oben+unten stiessen aneinander.
   Umsetzung ueber body:has() + die ERSTEN beiden Content-Sektionen:
   Geschwister-Selektoren mit :has() waren hier unzuverlaessig. */
body:has(ai-generator) .section[role="content"]:has(h1){
  padding-bottom:0;
}
body:has(ai-generator) .section[role="content"]:has(> h2){
  padding-top:2rem;padding-bottom:.5rem;
}
.section[role="content"]:has(> .gen-live){padding-top:1.5rem;}

/* ── GENERATOR-KARTE (Muster: ansagen.ai/generator) ───────────────────
   Rahmen + Kopfleiste geben dem Tool einen Ort, statt es nackt auf der
   Seite stehen zu lassen. Farben aus der tonstudio-DNA: Teal-Rahmen
   und -Glow, Navy-Leiste, Teal-Puls (ansagen.ai nutzt Cyan/Gruen). */
.gen-live{
  scroll-margin-top:5.5rem;background:#fff;
  border:1px solid var(--main-light);border-radius:var(--card-radius);
  box-shadow:0 18px 50px -14px rgba(14,154,160,.38),var(--card-shadow);
  overflow:hidden;
  max-width:var(--site-width);margin-inline:auto;
}
.gen-live-bar{
  display:flex;justify-content:space-between;align-items:center;
  gap:.75rem 1.5rem;flex-wrap:wrap;
  background:linear-gradient(90deg,#0B2632 0%,#0F2E3D 55%,#16455A 100%);
  color:#fff;padding:.7rem 1.4rem;
}
.gen-live-live{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.82rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;
}
.gen-live-dot{
  width:.55rem;height:.55rem;border-radius:50%;background:#3FD3D8;
  box-shadow:0 0 0 0 rgba(63,211,216,.6);animation:gen-pulse 2s infinite;
  flex:0 0 auto;font-style:normal;
}
@keyframes gen-pulse{
  0%{box-shadow:0 0 0 0 rgba(63,211,216,.6);}
  70%{box-shadow:0 0 0 .55rem rgba(63,211,216,0);}
  100%{box-shadow:0 0 0 0 rgba(63,211,216,0);}
}
.gen-live-hint{color:rgba(255,255,255,.85);font-size:.82rem;}
.gen-live-body{padding:1.25rem 1.5rem 1.5rem;}
/* Das Shadow-DOM des Generators bringt eigenes padding-bottom mit —
   von aussen nicht stylbar, daher den Host hochziehen; .gen-live hat
   overflow:hidden und schneidet sauber ab. Nur Desktop: mobil hat die
   Flow-CSS des Tools andere Paddings. */
@media(min-width:761px){
  .gen-live-body ai-generator{display:block;margin-bottom:-3.5rem;}
}
@media(max-width:760px){
  .gen-live-body{padding:.75rem;}
  .gen-live-hint{display:none;}
}
@media(prefers-reduced-motion:reduce){.gen-live-dot{animation:none;}}

/* 🚨 Bandhoehe: .reseller/.hero-glow streckten sich als Flex-Kinder auf
   volle Zeilenhoehe (gemessen 64px) und trieben das Band, unabhaengig
   vom padding. align-self bricht das. */
.section[role="head-mein-konto"] > *{align-self:center;}
.section[role="head-mein-konto"] .hero-glow{display:flex;align-items:center;}
.section[role="head-mein-konto"] .help{flex:1;justify-content:center;}
.section[role="head-mein-konto"] .login{justify-content:flex-end;}
/* Rahmen-Links (Reseller / Kundenkonto) als leise Ghost-Pills */
.section[role="head-mein-konto"] a.mitrahmen{
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-pill);
  padding:.25rem .85rem;font-size:.75rem;white-space:nowrap;
  transition:var(--transition-base);
}
.section[role="head-mein-konto"] a.mitrahmen:hover{
  border-color:#5FE0E5;background:rgba(255,255,255,.06);
}
.section[role="head-mein-konto"] i{font-style:normal;}
/* 🚨 KLASSE A (mobil): Das Logo im Band ist selbst ein <img class=
   "only-mobile"> — nicht ein Container MIT img. Die alte Regel
   (".only-mobile img") traf deshalb nichts, das Logo rendert mit
   378px Breite und sprengte die Kopfzeile. Beide Faelle abdecken. */
.section[role="head-mein-konto"] img.only-mobile,
.section[role="head-mein-konto"] .only-mobile img{
  height:1.5rem;width:auto;max-width:9rem;
}
.hero-glow{display:inline-block;}

/* ── Burger (nur mobil sichtbar) ── */
i#mobile_menu_btn.menu{
  display:none;width:26px;height:20px;cursor:pointer;position:relative;
  font-style:normal;
}
i#mobile_menu_btn.menu::before,
i#mobile_menu_btn.menu::after,
i#mobile_menu_btn.menu > span{content:"";}
i#mobile_menu_btn.menu::before,
i#mobile_menu_btn.menu::after{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:#fff;transition:var(--transition-base);
}
i#mobile_menu_btn.menu::before{top:3px;box-shadow:0 7px 0 #fff;}
i#mobile_menu_btn.menu::after{bottom:3px;}
i#mobile_menu_btn.menu.active::before{top:9px;box-shadow:none;transform:rotate(45deg);}
i#mobile_menu_btn.menu.active::after{bottom:9px;transform:rotate(-45deg);}

/* ══ 5  SEKTIONEN + FLAECHEN-RHYTHMUS ════════════════════════════════ */
.section{
  width:100%;position:relative;
  padding:var(--sect-y) var(--sect-x);
}
.section > *{max-width:var(--site-width);margin-left:auto;margin-right:auto;}
/* 🚨 INVENTUR 0.6 — Headline-Satzspiegel.
   `.section > *` (Spezifitaet 0,1,1) stach die max-width der H2 aus:
   gemessen liefen 9 von 15 Ueberschriften ueber die vollen 1400px und
   zerfielen dadurch als Form. Ueberschriften brauchen eigenen Satz
   (25–30ch), Fliesstext bleibt bei 60–75. */
.section > h2,
.section > h3{
  max-width:32ch;
  margin-left:max(0px,calc((100% - var(--site-width))/2));
  margin-right:auto;
}
/* zentrierte Sektionskoepfe behalten ihre Mitte */
.section.center > h2,.section .div-center > h2,
.cta-final > h2,.section[role="content"] > h2.center{
  margin-inline:auto;
}
/* 🚨 INVENTUR 1 — Vertikaler Rhythmus.
   Gemessen schwankte der Abstand H2→Folgeinhalt zwischen 0 / 12,8 /
   16 / 32px, je nachdem welche margin-Utility am Element hing.
   EIN Wert fuer denselben Zweck. Die Utilities steuern weiterhin die
   SEKTIONS-Abstaende, nicht den Kopf-Innenabstand. */
.section > h2{margin-bottom:1.4rem !important;}
/* 0.2 Weissraum-Ungleichheit: Kopf + Lead gehoeren zusammen (eng),
   die Inhaltsgruppe darunter steht ab (Aussen ≥ 2× Innen). */
.section > p:not(.slogan) + .grid-2,
.section > p:not(.slogan) + .grid-3,
.section > p:not(.slogan) + .grid-4,
.section > p:not(.slogan) + .vergleich-grid,
.section > p:not(.slogan) + .wrapper__mustertexte,
.section > p:not(.slogan) + .faq__wrapper{margin-top:2.75rem;}
/* Lesebreite fuer Intro-Absaetze; margin-left haelt sie auf der
   Flucht der zentrierten Inhaltsspalte — auch >1400px Viewport. */
.section[role="content"] > p:not(.slogan):not(.small){
  max-width:74ch;
  margin-left:max(0px,calc((100% - var(--site-width))/2));
  margin-right:auto;
  font-size:1.02rem;line-height:1.75;
}
/* Chrome-Sektionen tragen den Sektions-Rhythmus NICHT */
.section.nav-section,.section[role="head"],
.section[role="head-mein-konto"],
.section[role="footer"]{padding-block:0;}

/* Hausregel: nie Flat-Color — immer ein leichter Verlauf */
.bg-white{background:linear-gradient(180deg,#ffffff 0%,#FCFDFD 100%);}
.bg-gray100{background:linear-gradient(180deg,#F3F6F8 0%,#EBF1F3 100%);}
/* 🚨 5a FAST-IDENTISCHE FLAECHEN — Klasse A.
   Zwei bg-gray100-Sektionen stehen direkt hintereinander. Der Verlauf
   endet bei #EBF1F3 und startet sofort wieder bei #F3F6F8 → gemessene
   Kante bei y=8108 (235,241,243 → 243,246,248) mitten in einer Flaeche,
   die als EINE gelesen werden soll. Folgezone laeuft flach weiter. */
.bg-gray100 + .bg-gray100{
  background:#EBF1F3;
  /* der Sektionsabstand wuerde die Fuge wieder aufreissen */
  margin-top:0 !important;
}
/* Naht zwischen Verlaufsende und Folgezone glaetten */
.bg-gray100:has(+ .bg-gray100){background:linear-gradient(180deg,#F3F6F8 0%,#EBF1F3 100%);}
.bg-main-dark{background:linear-gradient(180deg,#0F2E3D 0%,#0B2632 100%);color:#fff;}
.bg-main-dark h1,.bg-main-dark h2,.bg-main-dark h3{color:#fff;}
.bg-purple{
  background:linear-gradient(135deg,#7A2E8F 0%,#63237A 100%);
  color:#fff;padding-block:1rem .75rem !important;line-height:1.5;
}
.bg-purple p{color:#fff;margin:0 0 .4rem;text-align:center;font-weight:400;}
.bg-purple p strong{font-weight:600;}
.bg-purple a{color:#fff;text-decoration:underline;}
.transluzent{opacity:.85;}

/* Anker unter der sticky Nav landen lassen */
[id]{scroll-margin-top:6.5rem;}

/* ══ 6  KARTEN, GRIDS, LISTEN, CTAs ══════════════════════════════════ */
.grid-2,.grid-3,.grid-4{display:grid;gap:1.5rem;align-items:stretch;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-40-60{
  display:grid;grid-template-columns:47% 1fr;gap:3rem;align-items:start;
  max-width:var(--site-width);margin:0 auto;
}

/* Eine Kartensignatur fuer die ganze Site */
.contentbox_text{
  background:linear-gradient(180deg,#ffffff 0%,#FAFCFC 100%);
  border-radius:var(--card-radius);border:var(--card-border);
  box-shadow:var(--card-shadow);padding:1.75rem;
}
.contentbox_text p{font-size:.95rem;line-height:1.65;}
.contentbox_text p:last-child{margin-bottom:0;}
.contentbox_text .small{margin-top:.75rem;}
.contentbox_text h3{margin-bottom:.5rem;}
/* Akzent-Variante: Teal-Kante oben */
.contentbox_text--akzent{position:relative;overflow:hidden;}
.contentbox_text--akzent::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--teal-deep) 0%,var(--main-light) 100%);
}
.mitrahmen{border-radius:var(--radius-pill);}
/* 🚨 INVENTUR 0.4 — EINE Kartensignatur.
   Gemessen drei Varianten, die sich NUR im Padding unterschieden
   (30,4/28 · 28 · 28/25,6px). Radius, Border und Schatten waren
   bereits einheitlich. Nach der ersten Karte hat das Auge das Muster
   gelernt; jede Abweichung zwingt es, neu zu sortieren. */
.contentbox_text,.step-karte,.ansagetext,.kategorie{
  padding:1.75rem;
}
/* Ausnahme bleibt: .kategorie ist in den Mustertexten nur Gruppierung
   (Regel weiter unten setzt padding:0 — steht spaeter, gewinnt). */

/* Karten-Icons: Outline-SVG in Markenfarbe */
.contentbox_text > i{
  display:block;width:2.3rem;height:2.3rem;margin-bottom:1rem;
  background:no-repeat center/contain;font-style:normal;
}
i.voicemail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.5' cy='12' r='3'/%3E%3Ccircle cx='17.5' cy='12' r='3'/%3E%3Cpath d='M6.5 15h11'/%3E%3C/svg%3E");}
i.clock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");}
i.music{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");}
i.calendar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");}
i.convert{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h13'/%3E%3Cpath d='M14 4l3 3-3 3'/%3E%3Cpath d='M20 17H7'/%3E%3Cpath d='M10 14l-3 3 3 3'/%3E%3C/svg%3E");}
i.einfach{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E");}
i.file{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8l-5-5z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");}
i.telefon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h3l2 5-2.5 1.5a12 12 0 005 5L15 12l5 2v3a2 2 0 01-2 2A16 16 0 014 6a2 2 0 012-3z'/%3E%3C/svg%3E");}
i.email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5l8.5 6 8.5-6'/%3E%3C/svg%3E");}
i.building{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h3M8 11h3M8 15h3M14 7h2M14 11h2M14 15h2'/%3E%3C/svg%3E");}
i.handshake{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9AA0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l4-4 5 4 5-4 4 4'/%3E%3Cpath d='M7 12l3.5 3.5a2 2 0 002.8 0L17 12'/%3E%3C/svg%3E");}
i.account{background-image:none;}

/* 🚨 Listen OHNE Klasse: 328× im Bestands-Markup (Karten-Inhalte,
   Aufzaehlungen im Fliesstext). Die alte style.css hat sie global
   bestueckt — ohne eigene Regel stuenden sie hier voellig nackt da.
   Bewusst dezenter als .check: Teal-Punkt statt Haken, damit die
   echten Vorteils-Listen ihre Signalwirkung behalten. */
.section[role="content"] li{
  position:relative;padding-left:1.15rem;margin-bottom:.45rem;
  font-size:.95rem;line-height:1.6;
}
.section[role="content"] li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.34em;height:.34em;border-radius:50%;
  background:var(--main-light);
}
/* Verschachtelte Listen etwas leiser */
.section[role="content"] li li::before{background:var(--navy-muted);}

/* 🚨 INVENTUR 5 — Massenverteilung.
   Lange Aufzaehlungen (ab ~6 Eintraegen) liefen einspaltig ueber die
   halbe Seitenbreite, rechts daneben blieb eine grosse leere Flaeche.
   Zweispaltig gesetzt: Inhalt und Reihenfolge bleiben unveraendert,
   nur der Satzspiegel wird gefuellt (5c erlaubt Umverteilung). */
.section[role="content"] > ul{
  columns:2;column-gap:3.5rem;
  max-width:var(--site-width);
}
.section[role="content"] > ul > li{
  break-inside:avoid;-webkit-column-break-inside:avoid;
}
@media (max-width:900px){
  .section[role="content"] > ul{columns:1;}
}
/* Chrome-Listen (Nav, Footer, Subnav) tragen das NICHT */
.section[role="head"] li::before,
.section[role="footer"] li::before,
.themen-spalte li::before{content:none;}
.section[role="head"] li,
.section[role="footer"] li,
.themen-spalte li{padding-left:0;}

/* Haekchen-/Plus-Listen */
.check li,.liste-plus li{
  position:relative;padding-left:1.6rem;margin-bottom:.55rem;
  font-size:.95rem;line-height:1.6;
}
/* Spezifitaet muss die generische Punkt-Regel oben schlagen */
.section[role="content"] .check li::before,
.section[role="content"] .liste-plus li::before,
.check li::before,.liste-plus li::before{
  content:"";position:absolute;left:.1rem;top:.55em;
  width:.6em;height:.32em;border-radius:0;background:none;
  border-left:2px solid var(--main-light);border-bottom:2px solid var(--main-light);
  transform:rotate(-45deg);
}
.check li strong{color:inherit;font-weight:500;}
.liste-plus li{margin-bottom:1rem;}
.liste-plus li strong{color:var(--main-dark);font-weight:500;}
/* Minus-Variante fuer Gegenueberstellungen */
.check.minus li::before{
  border:0;width:.62em;height:2px;background:var(--gray-500);
  transform:none;top:.82em;border-radius:2px;
}

/* ── CTA ── */
.cto{
  display:inline-block;border:0;color:#FFF;
  padding:.7rem 1.45rem;text-transform:uppercase;letter-spacing:.04em;
  font-size:.82rem;font-weight:500;background:var(--cta-grad);
  border-radius:var(--radius-pill);cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(239,35,60,.5);
  transition:var(--transition-base);
}
.cto::after{content:"→";font-weight:300;padding-left:.5rem;display:inline-block;transition:transform var(--transition-base);}
/* 🚨 CTA-Text IMMER weiss — auch im Hover (Regel Andreas 08.08.) */
.cto:hover{
  transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(239,35,60,.55);
  filter:brightness(1.05);color:#fff;
}
.cto:hover::after{transform:translateX(3px);}
.cto:active{transform:translateY(0) scale(.985);}
/* 🚨 INVENTUR 0.4 — Buttonstile rationieren.
   Gemessen liefen drei fast identische Primaer-Groessen nebeneinander
   (pad 11.2/23.2 · 12.48/25.6 · 8/16) — der Unterschied war nicht
   ablesbar, also kein System, sondern Rauschen. Jetzt zwei klare
   Groessen: Standard und .big; .small bleibt fuer Inline-CTAs. */
.cto.big{padding:.85rem 1.75rem;font-size:.88rem;}
.cto.small{padding:.5rem 1.1rem;font-size:.75rem;}
.cto + .small{display:block;margin-top:.65rem;}
/* Sekundaer = Teal-Ghost (nie Rot-auf-Rot) */
.cto.secondary{
  background:linear-gradient(180deg,#fff 0%,var(--teal-tint) 100%);
  color:var(--teal-deep);border:1px solid rgba(14,154,160,.4);
  box-shadow:none;
}
.cto.secondary:hover{color:var(--teal-deep);border-color:var(--main-light);filter:none;}

/* ══ 7  CONTENT-MODULE ═══════════════════════════════════════════════ */

/* ── FAQ (57 Seiten, ~6 Items je Seite) ──
   JS toggelt .active am .faq__wrapper--frage. Kollaps ueber
   grid-template-rows 0fr→1fr; 🚨 Kind-Padding und p-margin muessen
   MIT einklappen, sonst bleibt die Zeile offen. */
/* 🚨 0.2/5a — Das FAQ lief ueber die vollen 1400px: bei ~40 Zeichen
   Fragetext stand das Plus-Icon isoliert am rechten Rand, die Zeile
   zerfiel in zwei weit auseinanderliegende Pole. Antworttext lag
   zudem weit ueber dem Lesekorridor. Auf Lesebreite begrenzt. */
.faq__wrapper{
  max-width:min(var(--site-width),68rem);
  margin-left:max(0px,calc((100% - var(--site-width))/2));
  margin-right:auto;
}
.faq__wrapper--frage{border-bottom:1px solid var(--hairline);}
p.faq-frage{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  cursor:pointer;padding:1.15rem 0;margin:0;
  font-size:1.02rem;font-weight:500;color:var(--main-dark);
  transition:color var(--transition-base);
}
p.faq-frage:hover{color:var(--teal-deep);}
/* Plus/Minus aus zwei CSS-Balken statt Icon-Font */
p.faq-frage > i.faq{
  flex:0 0 auto;width:.85rem;height:.85rem;position:relative;font-style:normal;
  background:
    linear-gradient(var(--main-light),var(--main-light)) center/100% 2px no-repeat,
    linear-gradient(var(--main-light),var(--main-light)) center/2px 100% no-repeat;
  transition:transform .3s var(--ease);
}
.faq__wrapper--frage.active p.faq-frage > i.faq{
  transform:rotate(90deg);
  background:linear-gradient(var(--main-light),var(--main-light)) center/100% 2px no-repeat;
}
/* 🚨 Kollaps ueber max-height, NICHT ueber grid-template-rows 0fr→1fr.
   Grund (gemessen): Die Antwort ist ein <div> mit direktem <p>-Kind —
   die fr-Technik braucht ein echtes Grid-Item, das auf 0 schrumpfen
   darf; hier blieb die Zeile konstant bei 18px stehen.
   Das Bestands-JS setzt ZWEI Klassen: .active am .faq__wrapper--frage
   UND .open an der Antwort — beide Zustaende bedienen. */
.faq__wrapper--antwort{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .35s var(--ease),opacity .3s var(--ease);
}
.faq__wrapper--frage.active .faq__wrapper--antwort,
.faq__wrapper--antwort.open{
  max-height:60rem;opacity:1;
}
p.faq-antwort{
  font-size:.95rem;padding-bottom:1.15rem;margin-bottom:0;
  max-width:82ch;color:var(--gray-600);
}

/* ── Ansagetext-Bausteine (Mustertexte mit Copy/Generator) ── */
.wrapper__mustertexte{max-width:var(--site-width);margin-inline:auto;}
.ansagetext{
  background:linear-gradient(180deg,#ffffff 0%,#FAFCFC 100%);
  border:var(--card-border);border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  padding:1.6rem 1.6rem 1.25rem;margin-bottom:1.25rem;
}
.ansagetext h3{margin-bottom:.75rem;}
.ansagetext blockquote{
  border-left:3px solid var(--main-light);
  background:linear-gradient(180deg,var(--teal-tint) 0%,#F4FBFB 100%);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:.9rem 1.1rem;margin-bottom:1rem;
}
.ansagetext blockquote p{margin:0;font-size:.95rem;line-height:1.65;color:var(--navy-soft);}
p.ansagetext-meta{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin:0;font-size:.82rem;
}
.dauer{color:var(--gray-500);margin-right:auto;}
.btn-copy,.btn-gen{
  display:inline-block;cursor:pointer;font-family:inherit;
  font-size:.75rem;font-weight:500;letter-spacing:.03em;
  padding:.42rem 1rem;border-radius:var(--radius-pill);
  transition:var(--transition-base);white-space:nowrap;
}
.btn-copy{
  background:#fff;border:1px solid var(--gray-300);color:var(--navy-soft);
}
.btn-copy:hover{border-color:var(--main-light);color:var(--teal-deep);}
.btn-copy.copied{border-color:var(--main-light);background:var(--teal-tint);color:var(--teal-deep);}
.btn-gen{
  background:linear-gradient(180deg,#fff 0%,var(--teal-tint) 100%);
  border:1px solid rgba(14,154,160,.4);color:var(--teal-deep);
}
.btn-gen:hover{border-color:var(--main-light);color:var(--teal-deep);transform:translateY(-1px);}

/* ── Schritt-Karten ── */
.step-karte{
  background:linear-gradient(180deg,#ffffff 0%,#FAFCFC 100%);
  border:var(--card-border);border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);padding:1.75rem 1.6rem;position:relative;
}
/* Zahl als Teal-Chip: als reine 200er-Ziffer ging sie optisch unter */
.step-karte__zahl{
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:linear-gradient(140deg,var(--teal-tint) 0%,#D3EEEF 100%);
  border:1px solid rgba(14,154,160,.35);
  font-size:1.2rem;font-weight:500;line-height:1;color:var(--teal-deep);
  margin-bottom:.9rem;font-variant-numeric:tabular-nums;
}
.step-karte h3{margin-bottom:.45rem;}
.step-karte p{font-size:.95rem;line-height:1.6;color:var(--gray-600);}

/* ── Kategorie-Teaser (Branchen-/Ratgeber-Uebersichten) ── */
.kategorie{
  display:block;
  background:linear-gradient(180deg,#ffffff 0%,#FAFCFC 100%);
  border:var(--card-border);border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);padding:1.6rem 1.5rem;
  transition:var(--transition-base);color:var(--fliesstext);
}
.kategorie:hover{
  border-color:var(--main-light);transform:translateY(-2px);
  box-shadow:0 6px 12px rgba(15,46,61,.06),0 28px 64px rgba(15,46,61,.12);
  color:var(--fliesstext);
}
.kategorie h3{margin-bottom:.4rem;}
.kategorie p{font-size:.95rem;color:var(--gray-600);margin-bottom:0;}
.kategorie-intro{margin-bottom:1.5rem;}
/* 🚨 In den Mustertext-Listen umschliesst .kategorie mehrere
   .ansagetext-Karten → Karte-in-Karte. Dort ist .kategorie nur
   Gruppierung, keine eigene Flaeche. */
.wrapper__mustertexte > .kategorie{
  background:none;border:0;box-shadow:none;padding:0;
}
.wrapper__mustertexte > .kategorie:hover{transform:none;box-shadow:none;}
.anzahl{
  display:inline-block;font-size:.75rem;font-weight:500;
  color:var(--teal-deep);background:var(--teal-tint);
  border-radius:var(--radius-pill);padding:.12rem .6rem;margin-left:.4rem;
}

/* ── Hero (nur Startseite) ── */
.hero-glow{position:relative;}
.wrapper_img-screen{position:sticky;top:7rem;}
.wrapper_img-screen img{
  border-radius:var(--card-radius);
  box-shadow:0 6px 12px rgba(15,46,61,.06),0 28px 64px rgba(15,46,61,.14);
}
/* 🚨 Die zweite Hero-Spalte ist ein <iframe> (assets/hero-animation.html).
   Ein iframe hat Default-Masse 300×150 und ignoriert das Grid — ohne
   explizite Groesse + aspect-ratio bleibt die Animation briefmarkengross. */
.hero-anim{position:relative;width:100%;}
.hero-anim iframe{
  display:block;width:100%;border:0;
  aspect-ratio:3371 / 2435;   /* Seitenverhaeltnis der Laptop-Grafik */
  background:transparent;
}
.hero-anim-link{position:absolute;inset:0;z-index:2;}

/* Hero-Flaeche: heller Verlauf + Teal-Glow, damit der Kopf traegt */
.section#hero{
  background:
    radial-gradient(50rem 24rem at 82% 108%,rgba(14,154,160,.10) 0%,transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#FBFDFD 45%,#F2FAFA 100%);
}
/* Hero-Absaetze: die generische Lesebreiten-Regel (72ch + margin-left-
   Offset) wuerde sie aus der Grid-Spalte schieben. */
.section#hero .grid-40-60 p{
  max-width:none;margin-left:0;margin-right:0;
}
.section#hero h1 + p{color:var(--main-dark);}
h2.hero{
  font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-deep);max-width:100%;margin:2rem 0 .8rem;
}
.grid-hero-audio{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;}
.contentbox_hero_audioplayer{
  display:flex;align-items:center;gap:.85rem;cursor:pointer;
  background:#fff;border-radius:12px;border:var(--card-border);
  box-shadow:0 2px 8px rgba(15,46,61,.05);
  padding:.7rem .95rem;transition:var(--transition-base);
  position:relative;overflow:hidden;
}
.contentbox_hero_audioplayer:hover{
  border-color:var(--main-light);box-shadow:var(--card-shadow);transform:translateY(-1px);
}
.contentbox_hero_audioplayer .inhalt{
  margin:0;font-size:.95rem;font-weight:500;color:var(--main-dark);line-height:1.3;
}
.contentbox_hero_audioplayer.playing{border-color:var(--main-light);}
.audio-progress{
  position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--teal-deep) 0%,var(--main-light) 100%);
  transform:scaleX(0);transform-origin:left;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.contentbox_hero_audioplayer.playing .audio-progress{opacity:1;}
.play-circle,.pause-circle{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;border-radius:50%;
  background:#fff;border:1px solid var(--main-light);
  transition:var(--transition-base);font-style:normal;
}
.play-circle::after{
  content:"";border-style:solid;border-width:.38rem 0 .38rem .6rem;
  border-color:transparent transparent transparent var(--main-light);margin-left:.12rem;
}
.contentbox_hero_audioplayer:hover .play-circle{background:var(--main-light);}
.contentbox_hero_audioplayer:hover .play-circle::after{border-left-color:#fff;}
.pause-circle{background:var(--main-light);border-color:var(--main-light);}
.pause-circle::after{
  content:"";width:.52rem;height:.78rem;
  border-left:.16rem solid #fff;border-right:.16rem solid #fff;border-radius:1px;
}
.demo-success-nudge{
  display:none;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  background:#fff;border:1px dashed var(--main-light);
  border-radius:var(--card-radius);padding:1.4rem 1.5rem;margin-top:1.25rem;
}
.demo-success-nudge.visible{display:block;opacity:1;transform:none;}
.demo-success-nudge h2.hero{margin-top:0;}

/* ── Seitenbild-Sektion (Foto-Break) ── */
.section.seitenbild{padding-inline:0;}
.section.seitenbild img{width:100%;object-fit:cover;max-height:26rem;}

/* ── Preistabelle + Preis-Angebot (poffer) ── */
.preistabelle{
  width:100%;border-collapse:collapse;
  background:#fff;border-radius:var(--card-radius);overflow:hidden;
  box-shadow:var(--card-shadow);border:var(--card-border);
  /* 🚨 Mobil sprengte die Tabelle sonst den Viewport (gemessen +128px
     bei 390px). Sie darf schmaler nicht weiter zusammenlaufen,
     sondern bekommt unten einen eigenen Scroll-Container. */
  min-width:34rem;
}
/* Wrapper-freier Scroll: die Tabelle steht im Bestand ohne Huelle */
@media (max-width:700px){
  .section[role="content"] .preistabelle{
    display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    min-width:0;width:100%;
  }
  .section[role="content"] .preistabelle > *{min-width:34rem;}
}
.preistabelle th,.preistabelle td{
  padding:.85rem 1rem;text-align:left;font-size:.95rem;
  border-bottom:1px solid var(--hairline);
}
.preistabelle thead th{
  background:linear-gradient(180deg,#0F2E3D 0%,#0B2632 100%);
  color:#fff;font-weight:500;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;
}
.preistabelle tbody tr:hover td,.preistabelle tbody tr:hover th{background:var(--teal-tint);}
.preistabelle tbody tr:last-child td{border-bottom:0;}

.poffer{max-width:var(--site-width);margin-inline:auto;}
.poffer__card{
  background:linear-gradient(180deg,#ffffff 0%,var(--teal-tint) 100%);
  border:1px solid rgba(14,154,160,.35);border-radius:var(--card-radius);
  box-shadow:0 6px 12px rgba(15,46,61,.06),0 28px 64px rgba(15,46,61,.10);
  padding:2rem 1.85rem;text-align:center;position:relative;overflow:hidden;
}
.poffer__card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--teal-deep) 0%,var(--main-light) 100%);
}
.poffer__name,.poffer__label{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--teal-deep);font-weight:600;margin-bottom:.6rem;
}
.poffer__big,.poffer__amount{
  font-size:3rem;font-weight:200;color:var(--main-dark);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.poffer__cur{font-size:1.3rem;font-weight:300;vertical-align:super;}
/* 🚨 .poffer__meta liegt INNERHALB von .poffer__amount und wuerde
   sonst in der 3rem-Zeile mitlaufen ("59 €netto · pro Ansage").
   Als eigene Zeile darunter setzen. */
.poffer__meta{
  display:block;font-size:.82rem;font-weight:300;color:var(--gray-600);
  letter-spacing:normal;line-height:1.5;margin:.55rem 0 0;
}
.poffer__name{
  display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--teal-deep);font-weight:600;margin-bottom:.75rem;line-height:1.5;
}
/* Karte nicht ueber die volle Sektionsbreite laufen lassen */
.poffer__card{max-width:44rem;margin-inline:auto;}
.poffer__rule{border:0;border-top:1px solid var(--hairline);margin:1.1rem 0;}
.poffer__intro,.poffer__head{margin-bottom:1rem;}
.preis-teaser__card{
  background:linear-gradient(180deg,#ffffff 0%,var(--teal-tint) 100%);
  border:1px solid rgba(14,154,160,.35);border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);padding:1.75rem;
}
.preis-teaser__text{margin-bottom:.5rem;}
.preis-teaser__hint{font-size:.82rem;color:var(--gray-500);}

/* ── Hinweis-Box "Neue Stimmen" ──
   KLASSE A (Andreas + Messung): war 73px hoch und stand als erstes,
   flaechig getoentes Element ueber der H1 — ein Service-Hinweis
   konkurrierte damit gegen die Markenaussage (0.5 Anker).
   Jetzt: Ein-Zeilen-Notiz mit Teal-Kante statt Kasten, ~40px.
   Wortlaut unveraendert (5c). */
.hinweis-generator{
  background:linear-gradient(90deg,rgba(230,246,247,.75) 0%,rgba(244,251,251,.35) 100%);
  border:0;border-left:2px solid var(--main-light);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:.5rem .9rem;
}
.hinweis-generator-lead{
  font-weight:400;color:var(--navy-soft);margin-bottom:0;
  font-size:.82rem;line-height:1.5;
}
.hinweis-generator-lead strong{font-weight:500;color:var(--main-dark);}
.hinweis-generator-cta{font-weight:500;white-space:nowrap;}
/* 🚨 0.2 Weissraum-Ungleichheit: Hinweiszeile und H1 klebten mit
   gemessenen 0px aneinander — zwei getrennte Sinneinheiten brauchen
   Trennung, sonst liest sich der Hinweis als Dachzeile der H1. */
.section#hero .hinweis-generator{margin-bottom:2.25rem;}
.hinweis-neu-inline{
  display:inline-block;font-size:.75rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal-deep);
  border:1px solid rgba(14,154,160,.35);border-radius:var(--radius-pill);
  padding:.1rem .55rem;margin-right:.5rem;
}
.hinweis-b2b,.footer-b2b{font-size:.82rem;color:var(--gray-500);}

/* ── Ledger: Kennzahlen-Liste in den Preiskarten ──
   🚨 Das ist eine <dl> mit <div class="ledger__row"><dt>/<dd>/<small>,
   KEINE Tabelle. Ohne eigene Regeln laufen dt und dd ineinander
   ("Fertig inMinuten") und erben die Karten-Zentrierung. */
.ledger{width:100%;margin:0 0 1.25rem;text-align:left;}
.ledger__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;
  padding:.6rem 0;border-bottom:1px solid var(--hairline);
}
.ledger__row:last-child{border-bottom:0;}
.ledger__row dt{
  flex:0 0 auto;font-size:.88rem;color:var(--gray-600);font-weight:400;
}
.ledger__row dd{
  margin:0;text-align:right;font-size:.95rem;font-weight:500;color:var(--main-dark);
}
/* Erlaeuterung unter den Wert, nicht daneben */
.ledger__row dd small{
  display:block;font-size:.75rem;font-weight:300;
  color:var(--gray-500);line-height:1.4;margin-top:.1rem;
}

/* ══ 8  SEITEN-UNIKATE ═══════════════════════════════════════════════ */
/* Sprechzeit-Rechner */
.sz-textarea{
  width:100%;min-height:9rem;padding:1rem;font-family:inherit;font-size:1.02rem;
  border:1px solid var(--gray-300);border-radius:var(--radius-sm);
  background:#fff;color:var(--fliesstext);resize:vertical;
  transition:var(--transition-base);
}
.sz-textarea:focus{outline:0;border-color:var(--main-light);box-shadow:0 0 0 4px var(--teal-tint);}
.sz-ergebnis{
  display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.25rem;
  background:linear-gradient(180deg,#ffffff 0%,var(--teal-tint) 100%);
  border:1px solid rgba(14,154,160,.3);border-radius:var(--card-radius);
  padding:1.35rem 1.6rem;
}
.sz-label{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-500);}
.sz-wert{font-size:1.5rem;font-weight:300;color:var(--main-dark);font-variant-numeric:tabular-nums;}
.sz-wert--haupt{font-size:2.4rem;font-weight:200;color:var(--teal-deep);}
/* Audiokonverter */
.ak-select,.ak-file{
  padding:.6rem .9rem;font-family:inherit;font-size:.95rem;
  border:1px solid var(--gray-300);border-radius:var(--radius-sm);background:#fff;
}
.ak-select:focus,.ak-file:focus{outline:0;border-color:var(--main-light);}
/* Exit-Intent-Layer (nur /preise) */
.bmg-exi-card{
  background:#fff;border-radius:var(--card-radius);
  box-shadow:0 28px 64px rgba(15,46,61,.28);padding:2rem;
}
.bmg-exi-h{color:var(--main-dark);font-weight:300;margin-bottom:.5rem;}
.bmg-exi-code{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.1rem;letter-spacing:.08em;color:var(--teal-deep);
  background:var(--teal-tint);border:1px dashed rgba(14,154,160,.45);
  border-radius:var(--radius-sm);padding:.5rem 1rem;
}
.bmg-exi-note,.bmg-exi-sub{font-size:.82rem;color:var(--gray-500);}
.bmg-exi-decline{
  background:none;border:0;color:var(--gray-500);font-size:.82rem;
  text-decoration:underline;cursor:pointer;font-family:inherit;
}
/* Mischpult-Sektion */
.section-mischpult{overflow:hidden;}
/* 🚨 INVENTUR 5 — Spaltenbalance.
   Gemessen 187px Text gegen 453px Bild = 59 % Differenz: der Text
   schwebte in der Mitte einer hohen Spalte, darunter ein Loch.
   Bildhoehe an die Textspalte binden statt umgekehrt. */
/* Textspalte gibt die Hoehe vor, das Bild fuellt sie per object-fit.
   Ohne die absolute Positionierung diktiert das Bild-Seitenverhaeltnis
   die Zeilenhoehe und der Text schwebt in der Mitte (gemessen 47 %
   Differenz — Inventur 5 erlaubt maximal ein Drittel). */
.gema-split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:stretch;}
.gema-split > *{align-self:center;}
.gema-split__bild{position:relative;align-self:stretch;min-height:14rem;}
.gema-split__bild img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  border-radius:var(--card-radius);box-shadow:var(--card-shadow);
}

/* ══ 9  CHROME — FUSS ════════════════════════════════════════════════ */
.section[role="footer"]{
  background:linear-gradient(180deg,#0B2632 0%,#081D26 100%);
  color:rgba(255,255,255,.78);font-size:.88rem;
  /* 🚨 Gleiche Kanten-Formel wie Nav und Band: die Footer-Zeilen
     (.top/.middle/.bottom) sind selbst Flex-Container ohne eigene
     max-width und liefen sonst ueber die volle Fensterbreite — auf
     breiten Monitoren stand das Footer-Logo weit links vom Inhalt. */
  padding-inline:max(var(--sect-x),calc((100% - var(--site-width))/2));
}
.section[role="footer"] a{color:rgba(255,255,255,.78);}
/* Teal nur als Hover — nicht als Vollton-Linkwand (Finetuning V7) */
.section[role="footer"] a:hover{color:#5FE0E5;}
.section[role="footer"] h3{
  color:#fff;font-size:.88rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.9rem;
}

/* Themen-Footer (5 Spalten, 53 Links) */
.section.themen-footer{padding-top:3.5rem;padding-bottom:2.5rem;}
.themen-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;
  max-width:var(--site-width);margin-inline:auto;
}
.themen-spalte ul{margin:0;padding:0;}
.themen-spalte li{margin-bottom:.5rem;}
.themen-spalte a{font-size:.88rem;}
.themen-spalte h3 a{color:#fff;font-size:inherit;}

/* Logo-Zeile "Starke Stimmen" */
.section[role="footer"].top{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  padding-top:2rem;padding-bottom:1.25rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.section[role="footer"].top > *{margin:0;max-width:none;}
.section[role="footer"].top p{color:rgba(255,255,255,.7);font-size:.95rem;}
.section[role="footer"].top p strong{color:#fff;font-weight:500;}
/* Logo per CSS-Background — der <a> im Markup ist leer.
   🚨 Absoluter Pfad ab Web-Root: die CSS wird von Seiten dreier
   Tiefen geladen (./, ../, ../../) — ein relativer Pfad waere nur
   auf einer davon korrekt. */
.section[role="footer"] .logo.logo_sticky a{
  display:block;width:11rem;height:2.2rem;
  background:url("/images/logo_main.svg") no-repeat left center/contain;
  filter:brightness(0) invert(1);opacity:.9;
}
.section[role="footer"].middle{
  padding-block:.5rem 1rem;font-size:.82rem;color:rgba(255,255,255,.6);
}
.section[role="footer"].bottom{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding-top:1.25rem;padding-bottom:2.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;
}
.section[role="footer"].bottom > *{margin:0;max-width:none;}
.section[role="footer"] .subnav ul{display:flex;gap:1.25rem;flex-wrap:wrap;margin:0;padding:0;}
.section[role="footer"] .subnav{flex:1;}
.section[role="footer"] .bmgruppe a.memberof{display:inline-flex;align-items:center;gap:.5rem;}
.section[role="footer"] .icon-svg{width:1rem;height:1rem;fill:currentColor;}
.cookie-settings-link{cursor:pointer;}
.footer-b2b{width:100%;color:rgba(255,255,255,.5);margin:0;}

/* ══ 10  VUE-OVERLAY + DIVERSES ══════════════════════════════════════ */
#main_page_wrapper{width:100%;}
.curtain__dialogbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(15,46,61,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.curtain__dialogbox .rahmen{
  background:#fff;border-radius:var(--card-radius);
  box-shadow:0 28px 64px rgba(15,46,61,.28);
  padding:2.5rem 3rem;text-align:center;
}
.wrapper_popup_content.laden img{margin:0 auto 1rem;height:2.4rem;width:auto;}
.loading .text{color:var(--navy-soft);font-size:.95rem;}
.animation-float{animation:float 2.4s var(--ease) infinite alternate;}
@keyframes float{from{transform:translateY(-3px);}to{transform:translateY(3px);}}
body.no-scroll{overflow:hidden;}

/* ══ 11  RESPONSIVE ══════════════════════════════════════════════════ */
@media (max-width:1200px){
  .themen-grid{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1000px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-40-60,.gema-split{grid-template-columns:1fr;gap:2.5rem;}
  .wrapper_img-screen{position:static;}
}
@media (max-width:900px){
  /* Nav → Burger-Overlay.
     🚨 Das Menue liegt im normalen Fluss; ohne fixed waere es nach dem
     Scrollen unsichtbar (Bug bis V9). z-index UNTER dem Band, damit
     der Burger zum Schliessen bedienbar bleibt. */
  .section[role="head"] .navigation{
    display:none;
    position:fixed;inset:0;z-index:50;
    background:linear-gradient(180deg,#0F2E3D 0%,#0B2632 100%);
    padding:6rem var(--sect-x) 2rem;
    overflow-y:auto;
  }
  .section[role="head"].active .navigation{display:block;}
  .section[role="head"] .wrapper-nav{flex-direction:column;}
  .section[role="head"] ul.mod-menu{
    flex-direction:column;align-items:flex-start;gap:1.15rem;background:transparent;
  }
  .section[role="head"] ul.mod-menu a{color:#fff;font-size:1.1rem;}
  .section[role="head"] ul.mod-menu a:hover{color:#5FE0E5;}
  .section[role="head"] .nav-mobil{
    display:block;margin-top:2rem;color:rgba(255,255,255,.7);font-size:.88rem;
  }
  .section[role="head"] .nav-mobil a{color:#fff;}
  i#mobile_menu_btn.menu{display:block;}
  .section[role="head-mein-konto"] .help{display:none;}
  .section[role="head-mein-konto"]{justify-content:space-between;}
  .themen-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:700px){
  :root{--sect-x:1.25rem;}
  .grid-2,.grid-3,.grid-4,.grid-hero-audio,.themen-grid{grid-template-columns:1fr;}
  .section[role="footer"].bottom{flex-direction:column;align-items:flex-start;gap:1rem;}
  p.ansagetext-meta{gap:.5rem;}
  .dauer{width:100%;margin-bottom:.25rem;}
  .sz-ergebnis{gap:1rem;}
}

/* ── Mobiles Sicherheitsnetz ──────────────────────────────────────────
   🚨 Die alte style.css hatte diesen Block (Zeilen ~5800/5884) — ohne
   ihn sprengt alles, was eine Eigenbreite mitbringt, den Viewport.
   Real gemessen: <ai-generator> (Shadow DOM, von aussen nicht
   stylbar) lief auf /generator um +154px ueber.
   `min-width:0` ist der eigentliche Wirkstoff: Flex-/Grid-Kinder
   weigern sich sonst, unter ihre Inhaltsbreite zu schrumpfen. */
@media (max-width:900px){
  body > *,
  #main_page_wrapper > *{min-width:0;max-width:100%;}
  .section > *{max-width:100%;}
  ai-generator,offer-form{display:block;max-width:100%;overflow-x:auto;}
  img,video,iframe,table,pre{max-width:100%;}
  /* Lange URLs/Codes duerfen umbrechen statt zu schieben */
  .ansagetext blockquote p,.bmg-exi-code{overflow-wrap:anywhere;}
}

/* ── ZUSTAENDE (4a reaktiv) ───────────────────────────────────────────
   🚨 KLASSE A: 19 Hover-Regeln standen nur EINER Focus-Regel gegenüber.
   Tastaturnutzer sahen auf Karten, FAQ-Zeilen und Hoerproben gar
   nichts. Reaktive Bewegung soll flaechendeckend und konsistent sein. */
.faq-frage:focus-visible,
.contentbox_hero_audioplayer:focus-visible,
.kategorie:focus-visible,
.btn-copy:focus-visible,
.btn-gen:focus-visible,
.cto:focus-visible,
.cto-ghost:focus-visible{
  outline:2px solid var(--main-light);outline-offset:3px;
  border-radius:var(--radius-sm);
}
/* Klickbare Karten/Zeilen brauchen einen sichtbaren Tastatur-Fokus,
   der dem Hover entspricht — nicht nur einen Ring. */
.kategorie:focus-visible{border-color:var(--main-light);transform:translateY(-2px);}
.contentbox_hero_audioplayer:focus-visible{border-color:var(--main-light);}
/* Aktiv-Feedback einheitlich (bisher nur an .cto) */
.btn-copy:active,.btn-gen:active,.cto-ghost:active,
.section[role="head-mein-konto"] a.mitrahmen:active{transform:translateY(0) scale(.985);}

/* Motion-Guard */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}