/* ============================================================================
   mailboxansagen.ai — style2026.css
   Design: v6-Architektur (Vorbild ansagen.ai-Relaunch)
   Farbwelt: mailboxansagen.ai — Teal statt Navy, abgeleitet aus dem Logo
             (#82B3B7) und --main-light: hsl(185,30%,60%) der Bestands-CSS.

   EIN MODUS — Overlay auf ALLEN Seiten:
     body.mba2026-sub   : ueberall gesetzt (alte style.css laeuft mit)
     body.mba2026-home  : zusaetzlich auf der Startseite (Feinsteuerung)
   Grund: saemtliche Inhalte kommen aus Joomla-Artikeln, die auf der
   alten style.css aufbauen. 2026 liefert Chrome + Optik, nie Inhalt.

   🚨 BEIM DEPLOY: $cssVersion2026 in index2026.php hochzaehlen!
      Joomlas 'auto'-MediaVersion aendert sich beim Datei-Upload NICHT.
   ========================================================================= */

:root{
  /* ---- Marke ----------------------------------------------------------- */
  --main-dark:#22515A;              /* Teal dunkel — Headlines, Chrome       */
  --main-darker:#183E46;
  --main-light:#4E9AA3;             /* Teal Akzent — Links, Aktiv            */
  --brand-logo:#82B3B7;             /* Logo-Ton                              */
  --main-cta:#F32E07;               /* CTA-Rot, Bestandswert der mba-CSS     */
  --cta-grad:linear-gradient(135deg,#FF5A2E 0%,#F32E07 100%);
  --fliesstext:#4a4a4a;
  --green:#3fe0b0;
  --green-tx:rgb(16,185,148);
  --gray-100:#F8FBFB;               /* hsl(185,30%,98%) — Bestand            */
  --gray-300:#E1EEEF;               /* hsl(185,30%,91%) — Bestand            */
  --gray-500:#8f96a3;
  --gray-600:#5e636e;
  --hairline:#EAF2F3;

  --card-radius:1rem;
  --card-border:1px solid var(--gray-300);
  --card-shadow:0 10px 30px rgba(34,81,90,.08);

  --sect-y:clamp(3rem,6vw,4.75rem);
  --sect-x:2rem;
  --transition-base:200ms cubic-bezier(.4,0,.2,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ===========================================================================
   1 — CHROME (gilt in BEIDEN Modi)
   Bewusst eigene Klassennamen (.topbar/.nav-section2026/.site-footer2026):
   die alten Chrome-Regeln haengen alle an .section[role=…] und greifen
   hier deshalb nicht ins Layout.
   ======================================================================== */

.topbar{
  background:var(--gray-100);border-bottom:1px solid var(--hairline);
  padding:.4rem max(var(--sect-x),calc((100% - 1400px)/2));
  font-size:.78rem;color:var(--gray-600);font-weight:300;
}
.topbar > div{
  max-width:1400px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.topbar a{text-decoration:none}
.tb-beratung{color:var(--gray-600)}
.tb-beratung a{color:var(--main-dark);font-weight:400}
.tb-beratung a:hover{color:var(--main-light)}
.tb-reseller{color:var(--gray-600);font-weight:400}
.tb-reseller:hover{color:var(--main-light)}
.tb-right{display:flex;align-items:center;gap:1.15rem;white-space:nowrap}
.tb-right a{color:var(--main-dark);font-weight:500}
.tb-right a:hover{color:var(--main-light)}
.tb-credits{color:var(--gray-500)}
/* Badge nur wenn gefuellt — Number() im Template liefert '' bei leerem Korb */
.tb-cart i{
  font-style:normal;background:var(--main-light);color:#fff;border-radius:999px;
  font-size:.68rem;padding:.05rem .4rem;margin-left:.35rem;font-weight:600;
}
.tb-cart i:empty{display:none}

.nav-section2026{
  background:#fff;border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:500;
  padding:0 max(var(--sect-x),calc((100% - 1400px)/2));
}
.nav-section2026 > div{
  max-width:1400px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:2rem;min-height:4.6rem;
}
.logo2026 a{display:block}
.logo2026 img{height:2rem;width:auto;display:block}

.navigation2026 ul{
  display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0;
}
.navigation2026 li{margin:0;padding:0}
.navigation2026 li::before{content:none}          /* Alt-Listenpunkte aus    */
.navigation2026 a{
  position:relative;font-size:.92rem;font-weight:400;color:var(--main-dark);
  padding:.35rem 0;display:inline-block;text-decoration:none;
}
.navigation2026 a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--main-light);transform:scaleX(0);transform-origin:left;
  transition:transform var(--transition-base);will-change:transform;
}
.navigation2026 a:hover::after{transform:scaleX(1)}
.navigation2026 li:last-child a{
  background:var(--cta-grad);color:#fff;border-radius:999px;padding:.55rem 1.2rem;
  font-weight:500;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  box-shadow:0 6px 16px -6px rgba(243,46,7,.5);
  transition:transform var(--transition-base),filter var(--transition-base);
}
.navigation2026 li:last-child a::after{display:none}
.navigation2026 li:last-child a:hover{transform:translateY(-2px);filter:brightness(1.04);color:#fff}

.nav-burger{
  display:none;background:none;border:0;cursor:pointer;padding:.5rem;
  flex-direction:column;gap:5px;
}
.nav-burger span{display:block;width:24px;height:2px;background:var(--main-dark);transition:transform var(--transition-base),opacity var(--transition-base)}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.usp-band{
  background:linear-gradient(90deg,var(--main-darker) 0%,var(--main-dark) 55%,#2B626D 100%);
  color:#fff;padding:.55rem var(--sect-x);font-size:.82rem;font-weight:400;
}
.usp-band > div{
  max-width:1400px;margin:0 auto;display:flex;justify-content:center;
  gap:2.5rem;flex-wrap:wrap;
}
.usp-band span{position:relative;padding-left:1.35rem;white-space:nowrap}
.usp-band span::before{
  content:"";position:absolute;left:.1rem;top:.5em;width:.55em;height:.3em;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}

.site-footer2026{
  background:linear-gradient(135deg,#12333A 0%,#1B454E 100%);
  color:rgba(255,255,255,.72);
  padding:3rem max(var(--sect-x),calc((100% - 1400px)/2)) 2rem;
  font-size:.88rem;font-weight:300;
}
.site-footer2026 > div{max-width:1400px;margin:0 auto}
.site-footer2026 a{color:rgba(255,255,255,.85);text-decoration:none}
.site-footer2026 a:hover{color:#fff}
.site-footer2026 .sf-top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.site-footer2026 .sf-logo{height:1.7rem;width:auto;margin-bottom:1rem;display:block}
.site-footer2026 .sf-claim{color:#fff;font-size:1.05rem;font-weight:300;margin:0 0 .4rem}
.site-footer2026 .sf-claim strong{color:var(--brand-logo);font-weight:400}
.site-footer2026 .sf-kontakt{margin:0}
.site-footer2026 .sf-bottom{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);margin-top:2rem;padding-top:1.25rem;font-size:.8rem;
}
.site-footer2026 .subnav ul{display:flex;gap:1.25rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.site-footer2026 .subnav li::before{content:none}
/* Doppel-Glyphe vermeiden: alte Icon-Font zeichnet ::before zusaetzlich */
.site-footer2026 i.brennermedien::before{content:none}

/* ===========================================================================
   2 — GEMEINSAME BAUSTEINE
   ======================================================================== */

.cto2026{
  display:inline-block;border:0;color:#fff;cursor:pointer;text-decoration:none;
  padding:.7rem 1.45rem;text-transform:uppercase;letter-spacing:.07em;
  font-size:.85rem;font-weight:500;background:var(--cta-grad);
  border-radius:999px;box-shadow:0 6px 16px -6px rgba(243,46,7,.5);
  transition:transform var(--transition-base),box-shadow var(--transition-base),filter var(--transition-base);
}
.cto2026::after{content:"→";font-weight:300;padding-left:.5rem;display:inline-block;transition:transform var(--transition-base)}
.cto2026:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(243,46,7,.55);filter:brightness(1.04);color:#fff}
.cto2026:hover::after{transform:translateX(3px)}
.cto2026:active{transform:translateY(0) scale(.985)}
.cto2026.big{padding:.78rem 1.6rem;font-size:.87rem}

.cto-ghost2026{
  display:inline-block;border:1px solid var(--main-dark);color:var(--main-dark);
  background:transparent;border-radius:999px;padding:calc(.7rem - 1px) 1.2rem;
  font-size:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;
  text-decoration:none;transition:all var(--transition-base);
}
.cto-ghost2026:hover{border-color:var(--main-light);color:var(--main-light);background:rgba(78,154,163,.06);transform:translateY(-1px)}
.site-footer2026 .cto-ghost2026{border-color:rgba(255,255,255,.5);color:#fff}
.site-footer2026 .cto-ghost2026:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* ===========================================================================
   3 — INHALTS-TYPOGRAFIE (Overlay ueber die Artikel-Inhalte)

   🚨 KEIN CSS-Reset hier! Die Inhalte kommen aus Joomla-Artikeln und
      bauen auf der alten style.css auf. Ein Reset (margin/padding/
      list-style) wuerde die Bestandsdarstellung zerstoeren.
      Hier ausschliesslich Farb- und Schrift-Angleichung an die
      2026-Marke — keine Layout-Eingriffe.
   ======================================================================== */

/* Marken-Farbangleichung der Bestandsinhalte.
   Nur Farbe/Gewicht, KEINE Groessen oder Abstaende. */
body.mba2026-sub .section[role="content"] h1,
body.mba2026-sub .section[role="content"] h2,
body.mba2026-sub .section[role="content"] h3{color:var(--main-dark)}
body.mba2026-sub .section[role="content"] h1 strong,
body.mba2026-sub .section[role="content"] h2 strong{color:var(--main-light)}

/* Flaechen der Bestandssektionen auf die Teal-Palette ziehen */
body.mba2026-sub .bg-gray100{background:var(--gray-100)}
body.mba2026-sub .bg-main-dark{
  background:linear-gradient(135deg,var(--main-darker) 0%,var(--main-dark) 60%,#2B626D 100%);
}

/* ---------------------------------------------------------------------------
   MUSTER-ANGLEICHUNG (14.08.) — Andreas: "Sektionen optisch angleichen".
   Die Bestandsinhalte bekommen die Kartensignatur des Musters:
   Rundung, Hairline-Rahmen, weicher Schatten, Lift beim Hover.
   Alt: flach, eckig, harter Schatten (0 2px 6px rgba(67,89,113,.1)).
   🚨 Nur Optik — keine Abstaende/Groessen/Reihenfolge, kein Text.
   ------------------------------------------------------------------------ */

/* Karten */
body.mba2026-sub .contentbox_text{
  background:linear-gradient(180deg,#ffffff 0%,#FBFDFD 100%);
  border:var(--card-border);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
}
body.mba2026-sub .contentbox_text:hover{
  transform:translateY(-2px);
  border-color:var(--main-light);
  box-shadow:0 16px 38px rgba(34,81,90,.12);
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
}
body.mba2026-sub a.contentbox_text:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(34,81,90,.12);
}
/* transluzent bleibt transluzent (liegt auf Fotos) */
body.mba2026-sub .contentbox_text.transluzent{
  background:rgba(255,255,255,.95);
}

/* Hoerproben-Boxen — im Muster kompakter mit Teal-Play-Kreis */
body.mba2026-sub .contentbox_hero_audioplayer{
  background:#fff;
  border:var(--card-border);
  border-radius:.7rem;
  box-shadow:none;
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
}
body.mba2026-sub .contentbox_hero_audioplayer:hover{
  transform:translateY(-1px);
  border-color:var(--main-light);
  box-shadow:0 8px 20px rgba(34,81,90,.09);
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
}
/* Play-Icon in den Teal-Verlaufskreis setzen (Muster-Signatur).
   🚨 i.play-circle rendert als Icon-Font-Glyphe — deshalb ueber
      Groesse/Farbe steuern, nicht ueber background-size. */
body.mba2026-sub .contentbox_hero_audioplayer i{
  color:var(--main-light);
}

/* Preiskarten der Bestandsseite auf die Muster-Signatur */
body.mba2026-sub .contentbox_text.preis{
  border-radius:var(--card-radius);
  border-left:1px solid var(--gray-300) !important;
  border-right:1px solid var(--gray-300) !important;
  border-bottom:1px solid var(--gray-300) !important;
  border-top:6px solid var(--main-light) !important;
  box-shadow:var(--card-shadow);
}
body.mba2026-sub .contentbox_text.preis.highlight{
  border-top:6px solid var(--main-light) !important;
  box-shadow:0 18px 42px rgba(34,81,90,.16);
}
/* Rabatt-Pill in Markenfarbe statt Cyan */
body.mba2026-sub .contentbox_text.preis .rabatt{
  background-color:var(--main-light) !important;
  color:#fff !important;
}

/* Foto-Break-Karten */
body.mba2026-sub .foto-break-card{
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
}

/* Dunkle Weltkugel-Sektion in den Marken-Verlauf */
body.mba2026-sub .contentbox_text-world{
  background-color:transparent;
  background-image:
    linear-gradient(135deg,var(--main-darker) 0%,var(--main-dark) 60%,#2B626D 100%);
}
body.mba2026-sub .contentbox_text-world h2,
body.mba2026-sub .contentbox_text-world h3{color:#fff}
body.mba2026-sub .contentbox_text-world h2 strong{color:var(--brand-logo)}

/* Icons der Bestandskarten in Teal (waren Cyan/Blau der Altpalette) */
body.mba2026-sub .contentbox_text > i,
body.mba2026-sub .contentbox_text i.clock,
body.mba2026-sub .contentbox_text i.convert,
body.mba2026-sub .contentbox_text i.euro{color:var(--main-light)}

/* Check-Listen der Bestandsinhalte auf die Muster-Haken.
   🚨 Nur Farbe — die Glyphe/Position der alten Regel bleibt, sonst
      verschiebt sich der Text (Falle aus dem ansagen.ai-Relaunch). */
body.mba2026-sub ul.check li::before{color:var(--green-tx)}

/* Farbreste der Altpalette auf /preise + Startseite.
   Magenta #BA33AB (--action-purple) und Lila stammen aus der Alt-CSS
   und passen nicht zur Teal-Marke. */
/* 🚨 Die Alt-Regeln liegen VERSCHACHTELT (CSS-Nesting) und sind damit
   spezifischer als ein flacher Selektor. Effektiv gilt:
     .contentbox_text.preis p.preisangabe-contentbox em.preis-neu
   Der Override muss diesen Pfad nachbilden, sonst gewinnt die Alt-Regel. */
body.mba2026-sub .contentbox_text.preis p.preisangabe-contentbox em.preis-neu{
  color:var(--main-dark);
}
/* Streichpreis-Grafik: Original ist fest #B135A8 gezeichnet.
   Teal-Fassung als eigene Datei, Original bleibt unangetastet. */
body.mba2026-sub .contentbox_text.preis p.preisangabe-contentbox em.preis-neu + em.preis::before{
  background-image:url(/images/streichpreis_2026.svg);
}
/* Unlimited-Balken (war --action-purple) */
body.mba2026-sub .contentbox_text.preis .unlimited{
  background-color:var(--main-light);
}
body.mba2026-sub .contentbox_text.preis.unlimited h3,
body.mba2026-sub .contentbox_text.preis.unlimited h2{color:var(--main-dark)}
/* 🚨 Die Unlimited-Headline traegt die Utility `action-purple` fest im
   Vue-Template (PricePackages.js) — die Alt-Regel hat !important, der
   Override braucht es deshalb auch. Nur INNERHALB der Preiskarten,
   damit die Utility anderswo unangetastet bleibt. */
body.mba2026-sub .contentbox_text.preis .preisangabe-headline.action-purple{
  color:var(--main-light) !important;
}

/* ===========================================================================
   3b — MUSTER-BAUSTEINE (Startseite)
   Eigene Klassen, die NUR dort greifen, wo sie im Artikel-Markup gesetzt
   sind. Damit bleibt der Rest der Seite unberuehrt.
   🚨 KEIN Reset, keine nackten Element-Selektoren — die alte style.css
      laeuft mit und traegt weiterhin die Grundtypografie.
   ======================================================================== */

/* ---- Sektions-Huelle -------------------------------------------------- */
body.mba2026-sub .m26{
  padding:var(--sect-y) max(var(--sect-x),calc((100% - 1400px)/2)) !important;
  display:block !important;
}
body.mba2026-sub .m26 > *{width:min(100%,1400px);margin-inline:auto}
body.mba2026-sub .m26-gray{background:var(--gray-100)}
body.mba2026-sub .m26-head{text-align:center;max-width:52rem;margin:0 auto 2.5rem}
body.mba2026-sub .m26-head h2{margin-bottom:.75rem}
body.mba2026-sub .m26-head p{color:var(--gray-600);margin:0}

/* ---- Hero -------------------------------------------------------------- */
body.mba2026-sub .m26-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(50rem 24rem at 82% 108%,rgba(78,154,163,.13) 0%,transparent 60%),
    linear-gradient(180deg,#FBFDFD 0%,#F1F8F9 100%);
}
/* Gitterraster im Hero entfernt (Andreas, 14.08.) — nur Verlauf bleibt. */
body.mba2026-sub .m26-hero > *{position:relative}
body.mba2026-sub .m26-hero-grid{
  display:grid;grid-template-columns:44% 1fr;gap:3.5rem;align-items:start;
}

/* ---- Hoerproben -------------------------------------------------------- */
body.mba2026-sub .m26-audio-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
body.mba2026-sub .m26-audio{
  position:relative;display:flex;align-items:center;gap:.75rem;
  background:#fff;border:var(--card-border);border-radius:.7rem;padding:.7rem .85rem;
  overflow:hidden;
  transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base);
}
body.mba2026-sub .m26-audio:hover{
  border-color:var(--main-light);box-shadow:0 8px 20px rgba(34,81,90,.09);transform:translateY(-1px);
}
body.mba2026-sub .m26-audio .m26-inhalt{
  margin:0;font-size:.88rem;font-weight:500;color:var(--main-dark);line-height:1.3;
}
body.mba2026-sub .m26-audio .m26-meta{margin:0;font-size:.74rem;color:var(--gray-500)}
body.mba2026-sub .m26-audio audio{width:100%;margin-top:.35rem}

/* ---- Hoerproben-Kacheln 2026 (Muster) ---------------------------------- */
/* 🚨 Ersetzen den nackten <audio controls>-Player. Steuerung: home2026.js,
   das auf .audio2026[data-src] hoert und .playing setzt. */
body.mba2026-sub .audio2026{
  position:relative;display:flex;align-items:center;gap:.75rem;
  background:#fff;border:var(--card-border);border-radius:.7rem;
  padding:.7rem .85rem;cursor:pointer;overflow:hidden;
  transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base);
}
body.mba2026-sub .audio2026:hover{
  border-color:var(--main-light);box-shadow:0 8px 20px rgba(34,81,90,.09);transform:translateY(-1px);
}
body.mba2026-sub .audio2026:focus-visible{outline:2px solid var(--main-light);outline-offset:2px}
body.mba2026-sub .audio2026 .play{
  flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;
  background:linear-gradient(135deg,var(--main-light) 0%,var(--main-dark) 100%);
  display:grid;place-items:center;
}
body.mba2026-sub .audio2026 .play::before{
  content:"";border-style:solid;border-width:.36rem 0 .36rem .58rem;
  border-color:transparent transparent transparent #fff;margin-left:.12rem;
}
/* Pause-Symbol waehrend der Wiedergabe */
body.mba2026-sub .audio2026.playing .play::before{
  border:0;width:.5rem;height:.6rem;margin-left:0;
  border-left:.17rem solid #fff;border-right:.17rem solid #fff;
}
body.mba2026-sub .audio2026 .txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
body.mba2026-sub .audio2026 .inhalt{
  font-size:.88rem;font-weight:500;color:var(--main-dark);line-height:1.3;
}
body.mba2026-sub .audio2026 .meta{font-size:.74rem;color:var(--gray-500);line-height:1.3}
body.mba2026-sub .audio2026 .bar{
  position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--main-light);transform:scaleX(0);transform-origin:left;
  opacity:0;transition:opacity .2s;
}
body.mba2026-sub .audio2026.playing .bar{opacity:1}

/* ---- Hinweisband ueber dem Hero (schlank) ------------------------------ */
/* 🚨 Vorher ein Vollbreite-Kasten mit dickem Rahmen, der die H1 nach unten
   gedrueckt hat. Jetzt eine dezente Zeile, die den Hero nicht dominiert. */
body.mba2026-sub .m26-hero .m26-hinweis{
  margin:0 0 2rem;padding:0;border:0;background:none;
}
body.mba2026-sub .m26-hero .m26-hinweis .hinweis-generator-inner{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:.4rem;
  background:rgba(255,255,255,.75);border:1px solid rgba(78,154,163,.28);
  border-radius:2rem;padding:.5rem 1.1rem;
  box-shadow:0 2px 8px rgba(34,81,90,.05);
}
body.mba2026-sub .m26-hero .m26-hinweis p{
  margin:0;font-size:.86rem;line-height:1.45;color:var(--gray-700);
}
body.mba2026-sub .m26-hero .m26-hinweis strong{font-weight:600;color:var(--main-dark)}
body.mba2026-sub .m26-hero .m26-hinweis .hinweis-neu-inline{
  display:inline-block;background:var(--main-light);color:#fff;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;
  border-radius:.7rem;padding:.1rem .45rem;vertical-align:.06em;
}
body.mba2026-sub .m26-hero .m26-hinweis .hinweis-generator-cta{
  font-weight:600;color:var(--main-dark);text-decoration:underline;
  text-underline-offset:.15em;white-space:nowrap;
}

/* ---- Hero-Visual: Handy-Motiv (mba-eigenes Motiv statt MacBook) -------- */
/* 🚨 Rein dekorativ (aria-hidden im Markup). Uebernommen aus dem Muster
   _Relaunch\mailboxansagen-ai-v1-muster.html, Klassen m26-/ps- praefixiert. */
body.mba2026-sub .m26-hero-visual{
  position:relative;display:grid;place-items:center;padding-top:1rem;
}
body.mba2026-sub .m26-phone{
  position:relative;width:min(19rem,100%);aspect-ratio:9/17.5;
  background:linear-gradient(165deg,#25555F 0%,#173C44 100%);
  border-radius:2.4rem;padding:.62rem;
  box-shadow:0 30px 70px -20px rgba(23,60,68,.55),0 0 0 1px rgba(255,255,255,.06) inset;
}
body.mba2026-sub .m26-phone-notch{
  position:absolute;top:.62rem;left:50%;transform:translateX(-50%);
  width:36%;height:1.5rem;background:#173C44;border-radius:0 0 1rem 1rem;z-index:2;
}
body.mba2026-sub .m26-phone-screen{
  width:100%;height:100%;background:linear-gradient(180deg,#FBFDFD 0%,#EFF7F8 100%);
  border-radius:1.95rem;overflow:hidden;display:flex;flex-direction:column;
}
body.mba2026-sub .m26-phone .ps-top{
  padding:2.2rem 1.1rem .8rem;text-align:center;border-bottom:1px solid var(--hairline);
}
body.mba2026-sub .m26-phone .ps-label{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--main-light);font-weight:500;
}
body.mba2026-sub .m26-phone .ps-title{
  font-size:.98rem;color:var(--main-dark);font-weight:500;margin-top:.15rem;
}
body.mba2026-sub .m26-phone .ps-body{
  flex:1;padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.62rem;
}
body.mba2026-sub .m26-phone .ps-field{
  background:#fff;border:1px solid var(--gray-300);border-radius:.6rem;padding:.5rem .6rem;
}
body.mba2026-sub .m26-phone .ps-field .fl{
  font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-500);
}
body.mba2026-sub .m26-phone .ps-field .fv{
  font-size:.78rem;color:var(--main-dark);font-weight:400;
  display:flex;justify-content:space-between;align-items:center;
}
body.mba2026-sub .m26-phone .ps-field .fv::after{content:"\25BE";color:var(--main-light);font-size:.7rem}
body.mba2026-sub .m26-phone .ps-text{
  background:#fff;border:1px solid var(--gray-300);border-radius:.6rem;padding:.6rem;
  font-size:.72rem;line-height:1.5;color:var(--fliesstext);flex:1;min-height:5.5rem;margin:0;
}
body.mba2026-sub .m26-phone .ps-text .caret{
  display:inline-block;width:1px;height:.85em;background:var(--main-light);
  vertical-align:-.12em;animation:m26blink 1s steps(2) infinite;
}
@keyframes m26blink{0%,100%{opacity:1}50%{opacity:0}}
body.mba2026-sub .m26-phone .ps-player{
  background:linear-gradient(135deg,rgba(78,154,163,.12) 0%,rgba(78,154,163,.05) 100%);
  border-radius:.6rem;padding:.55rem .6rem;
}
body.mba2026-sub .m26-phone .ps-player .row{display:flex;align-items:center;gap:.5rem}
body.mba2026-sub .m26-phone .ps-player .pbtn{
  width:1.5rem;height:1.5rem;border-radius:50%;background:var(--main-light);
  display:grid;place-items:center;flex:0 0 auto;
}
body.mba2026-sub .m26-phone .ps-player .pbtn::before{
  content:"";border-style:solid;border-width:.25rem 0 .25rem .4rem;
  border-color:transparent transparent transparent #fff;margin-left:.09rem;
}
body.mba2026-sub .m26-phone .ps-player .bar{
  flex:1;height:3px;background:rgba(34,81,90,.15);border-radius:2px;overflow:hidden;
}
body.mba2026-sub .m26-phone .ps-player .bar i{display:block;height:100%;width:38%;background:var(--main-light)}
body.mba2026-sub .m26-phone .ps-player .t{
  font-size:.62rem;color:var(--gray-600);font-variant-numeric:tabular-nums;
}
body.mba2026-sub .m26-phone .ps-foot{padding:.7rem 1.1rem 1rem}
body.mba2026-sub .m26-phone .ps-cta{
  display:block;text-align:center;background:var(--cta-grad);color:#fff;border-radius:999px;
  padding:.5rem;font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;
}
body.mba2026-sub .m26-phone .ps-hint{
  text-align:center;font-size:.6rem;color:var(--gray-500);margin:.4rem 0 0;
}

/* H2 ueber den Hoerproben in der linken Hero-Spalte */
body.mba2026-sub .m26-hero .m26-h2-hero{
  margin:2.25rem 0 .9rem;font-size:1.15rem;line-height:1.35;
}

/* 🚨 ALT-CSS-FALLE: .hinweis-generator::before ist ein rotierender
   Conic-Gradient (230% breit) als Leuchtrand. Sobald der Kasten schmaler
   wird als die Spalte, ragt er als tuerkiser Balken heraus.
   In der Hero-Pille daher abschalten — der Rand kommt hier vom -inner. */
body.mba2026-sub .m26-hero .m26-hinweis{padding:0;overflow:visible;isolation:auto}
body.mba2026-sub .m26-hero .m26-hinweis::before{display:none;content:none}

/* Handy-Screen: Textfeld fuellt den Rest — wie im Muster.
   (Ein vorheriger Versuch mit flex:0 1 auto hinterliess 143px Loch
   zwischen Player und CTA; per Pixel-Scan gemessen.) */
body.mba2026-sub .m26-phone .ps-text{flex:1 1 auto;min-height:5.5rem}

/* 🚨 MOBIL-UEBERLAUF (gemessen bei 390px: CTA/H2/Kacheln ragten rechts raus).
   Ursache: Grid- und Flex-Kinder haben min-width:auto und schrumpfen daher
   NICHT unter ihre Inhaltsbreite. Zusammen mit Alt-Falle (a) — .section ist
   display:flex/column — laeuft die Startseite ueber den Viewport.
   Fix: min-width:0 entlang der ganzen Kette + Umbruch langer Woerter. */
body.mba2026-sub .m26-hero-grid,
body.mba2026-sub .m26-hero-grid > *,
body.mba2026-sub .m26-audio-grid,
body.mba2026-sub .m26-audio-grid > *,
body.mba2026-sub .m26-grid3 > *,
body.mba2026-sub .m26-grid2 > *,
body.mba2026-sub .m26-begriffe > *,
body.mba2026-sub .m26-trust-grid > *{min-width:0}

body.mba2026-sub .m26-hero .cto.big{
  max-width:100%;white-space:normal;box-sizing:border-box;
}
body.mba2026-sub .m26-hero .m26-h2-hero,
body.mba2026-sub .audio2026 .inhalt,
body.mba2026-sub .audio2026 .meta{overflow-wrap:anywhere}

/* 🚨 "Klebt links" (Andreas, 14.08.): Die Vertrauens-Sektion
   .section-foto-break ist die EINZIGE Sektion der Startseite ohne .m26
   und bekommt daher keine Seitenabstaende — der Text sass auf 0px.
   Gleiche Innenabstaende wie .m26 nachziehen. */
body.mba2026-sub .section-foto-break{
  padding:var(--sect-y) max(var(--sect-x),calc((100% - 1400px)/2)) !important;
  box-sizing:border-box;
}
body.mba2026-sub .section-foto-break .foto-break-card{
  max-width:52rem;box-sizing:border-box;
}

/* ---- Vertrauens-Block: Checkliste auf dunklem Band -------------------- */
/* 🚨 Vorher trug dieser Block .section-foto-break/.foto-break-card/ul.check
   aus dem ansagen.ai-Muster — Klassen, die es in KEINER CSS dieser Site
   gibt. Ergebnis: kein Abstand, keine Haken. Jetzt m26-Bausteine. */
body.mba2026-sub .m26-trust-inner{
  max-width:60rem;margin:0 auto;
}
body.mba2026-sub ul.m26-liste{
  list-style:none;margin:0 0 1.75rem;padding:0;
  display:grid;gap:.6rem;
}
body.mba2026-sub ul.m26-liste li{
  position:relative;padding-left:1.9rem;line-height:1.6;
  color:rgba(255,255,255,.88);font-size:.95rem;
}
body.mba2026-sub ul.m26-liste li::before{
  content:"";position:absolute;left:0;top:.3rem;
  width:1.2rem;height:1.2rem;border-radius:50%;
  background:rgba(255,255,255,.12);
}
body.mba2026-sub ul.m26-liste li::after{
  content:"";position:absolute;left:.34rem;top:.62rem;
  width:.52rem;height:.28rem;
  border-left:2px solid #7FC5CC;border-bottom:2px solid #7FC5CC;
  transform:rotate(-45deg);
}
body.mba2026-sub .m26-trust-inner .m26-btns{justify-content:flex-start}

/* ---- "In Generator uebernehmen" an den Vorlagen-Karten -------------- */
/* Uebergibt den Vorlagentext per /generator?text=... — das aig-SDK liest
   ihn via URLSearchParams.getAll("text") aus (live verifiziert 14.08.). */
body.mba2026-sub .m26-vorlage{position:relative}
body.mba2026-sub .m26-vorlage h3 a{
  color:var(--main-dark);text-decoration:none;border-bottom:0;
}
body.mba2026-sub .m26-vorlage h3 a:hover{color:var(--main-light)}
body.mba2026-sub a.m26-vorlage-gen{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-top:1rem;align-self:flex-start;
  font-size:.82rem;font-weight:600;color:var(--main-dark);
  background:rgba(78,154,163,.10);
  border:1px solid rgba(78,154,163,.30);border-radius:2rem;
  padding:.42rem .95rem;text-decoration:none;
  transition:background var(--transition-base),border-color var(--transition-base),color var(--transition-base);
}
body.mba2026-sub a.m26-vorlage-gen:hover{
  background:var(--main-light);border-color:var(--main-light);color:#fff;
}

/* ---- Anlass-Kacheln ---------------------------------------------------- */
body.mba2026-sub .m26-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
body.mba2026-sub .m26-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
body.mba2026-sub a.m26-anlass,
body.mba2026-sub .m26-anlass{
  display:block;background:#fff;border:var(--card-border);border-radius:.8rem;
  padding:1.15rem 1.2rem;box-shadow:none;text-decoration:none;
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
}
body.mba2026-sub a.m26-anlass:hover,
body.mba2026-sub .m26-anlass:hover{
  transform:translateY(-2px);border-color:var(--main-light);
  box-shadow:0 12px 28px rgba(34,81,90,.10);
}
body.mba2026-sub .m26-anlass h3{font-size:1rem;margin:0 0 .3rem;color:var(--main-dark)}
body.mba2026-sub .m26-anlass p{font-size:.86rem;line-height:1.55;color:var(--gray-600);margin:0}

/* ---- Ablauf (3 Schritte) ----------------------------------------------- */
body.mba2026-sub .m26-ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
body.mba2026-sub .m26-step{position:relative;padding-top:.5rem}
body.mba2026-sub .m26-num{
  width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--main-light) 0%,var(--main-dark) 100%);
  color:#fff;font-size:1.05rem;font-weight:500;margin-bottom:.9rem;
  box-shadow:0 8px 18px -6px rgba(34,81,90,.45);
}
body.mba2026-sub .m26-step h3{margin:0 0 .4rem;font-size:1.15rem;color:var(--main-dark)}
body.mba2026-sub .m26-step p{font-size:.92rem;color:var(--gray-600);margin:0}
body.mba2026-sub .m26-step::after{
  content:"";position:absolute;top:1.8rem;left:3.2rem;right:-1rem;height:1px;
  background:linear-gradient(90deg,var(--gray-300),transparent);
}
body.mba2026-sub .m26-step:last-child::after{display:none}

/* ---- Textvorlagen ------------------------------------------------------ */
body.mba2026-sub a.m26-vorlage{
  display:flex;flex-direction:column;background:#fff;border:var(--card-border);
  border-radius:var(--card-radius);padding:1.4rem 1.45rem;box-shadow:var(--card-shadow);
  text-decoration:none;
  transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
}
body.mba2026-sub a.m26-vorlage:hover{
  transform:translateY(-2px);border-color:var(--main-light);
  box-shadow:0 16px 38px rgba(34,81,90,.12);
}
body.mba2026-sub .m26-vorlage h3{font-size:.98rem;margin:0 0 .7rem;color:var(--main-dark)}
body.mba2026-sub .m26-vorlage p{
  font-size:.86rem;line-height:1.65;color:var(--fliesstext);margin:0;
  border-left:2px solid var(--gray-300);padding-left:.85rem;
}

/* ---- Begriffe ---------------------------------------------------------- */
body.mba2026-sub .m26-begriffe{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
body.mba2026-sub .m26-begriff{
  background:#fff;border:var(--card-border);border-radius:.8rem;padding:1.1rem 1rem;text-align:center;
}
body.mba2026-sub .m26-begriff .m26-b{
  display:block;font-weight:500;color:var(--main-dark);font-size:.95rem;margin-bottom:.3rem;
}
body.mba2026-sub .m26-begriff p{font-size:.82rem;line-height:1.5;color:var(--gray-600);margin:0}

/* ---- Trust-Band (dunkel) ----------------------------------------------- */
body.mba2026-sub .m26-trust{
  background:linear-gradient(135deg,var(--main-darker) 0%,var(--main-dark) 60%,#2B626D 100%);
}
/* 🚨 KONTRAST-PFLICHT: Die alte style.css faerbt Ueberschriften, Absaetze
   und Listen im .section[role=content]-Kontext dunkel — auf dem dunklen
   Band waere das Text auf Text (gemessen 1:1). Alle Textelemente
   innerhalb von .m26-trust muessen deshalb explizit hell gesetzt werden. */
/* 🚨 SPEZIFITAETS-FALLE (selbst gebaut): Weiter oben steht
   `.section[role="content"] h2` — durch das Attribut (0,3,1) schlaegt das
   ein einfaches `.m26-trust h2` (0,2,1). Da die Trust-Sektion selbst
   role="content" traegt, MUSS das Attribut hier mitgefuehrt werden. */
body.mba2026-sub .section[role="content"].m26-trust h2,
body.mba2026-sub .section[role="content"].m26-trust h3,
body.mba2026-sub .section[role="content"].m26-trust h4,
body.mba2026-sub .section[role="content"].m26-trust p,
body.mba2026-sub .section[role="content"].m26-trust li,
body.mba2026-sub .section[role="content"].m26-trust ul,
body.mba2026-sub .section[role="content"].m26-trust strong,
body.mba2026-sub .section[role="content"].m26-trust span{color:#fff}
body.mba2026-sub .section[role="content"].m26-trust h2 strong{color:var(--brand-logo)}
body.mba2026-sub .section[role="content"].m26-trust .m26-head p{color:rgba(255,255,255,.75)}
body.mba2026-sub .section[role="content"].m26-trust li{color:rgba(255,255,255,.88)}
body.mba2026-sub .section[role="content"].m26-trust li strong{color:#fff}
/* Haken der Check-Liste auf dem dunklen Grund sichtbar halten */
body.mba2026-sub .m26-trust ul.check li::before{color:var(--green)}
/* Die Begriffe-Kacheln bleiben helle Karten -> Text dort wieder dunkel */
body.mba2026-sub .section[role="content"].m26-trust .m26-begriff .m26-b{color:var(--main-dark)}
body.mba2026-sub .section[role="content"].m26-trust .m26-begriff p{color:var(--gray-600)}
body.mba2026-sub .m26-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
body.mba2026-sub .m26-badge{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--card-radius);padding:1.4rem 1.3rem;
}
body.mba2026-sub .section[role="content"] .m26-badge h3{font-size:.98rem;margin:0 0 .3rem;color:#fff}
body.mba2026-sub .section[role="content"] .m26-badge p{font-size:.86rem;color:rgba(255,255,255,.72);margin:0;line-height:1.55}

/* ---- CTA-Abschluss ----------------------------------------------------- */
body.mba2026-sub .m26-cta-final{
  background:linear-gradient(135deg,#173C44 0%,#22515A 55%,#2B626D 100%);
  text-align:center;
}
body.mba2026-sub .section[role="content"].m26-cta-final h2{color:#fff;margin-bottom:1rem}
body.mba2026-sub .m26-cta-final h2 strong{color:var(--brand-logo)}
body.mba2026-sub .section[role="content"].m26-cta-final p{color:rgba(255,255,255,.8);max-width:44rem;margin:0 auto 1.75rem}
body.mba2026-sub .m26-cta-final .m26-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
body.mba2026-sub .m26-cta-final .cto.secondary{
  border-color:rgba(255,255,255,.5) !important;color:#fff !important;background:transparent !important;
}
body.mba2026-sub .m26-cta-final .cto.secondary:hover{
  background:rgba(255,255,255,.1) !important;border-color:#fff !important;color:#fff !important;
}
body.mba2026-sub .m26-cta-final .small{color:rgba(255,255,255,.6)}

/* ---- Responsive der Muster-Bausteine ----------------------------------- */
@media (max-width:1100px){
  body.mba2026-sub .m26-trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  body.mba2026-sub .m26-hero-grid{grid-template-columns:1fr;gap:2.5rem}
  body.mba2026-sub .m26-hero-visual{padding-top:0}
  body.mba2026-sub .m26-phone{width:min(16rem,80%)}
  body.mba2026-sub .m26-grid3,
  body.mba2026-sub .m26-begriffe{grid-template-columns:repeat(2,1fr)}
  body.mba2026-sub .m26-ablauf{grid-template-columns:1fr;gap:1.5rem}
  body.mba2026-sub .m26-step::after{display:none}
}
@media (max-width:760px){
  body.mba2026-sub .m26-grid3,
  body.mba2026-sub .m26-grid2,
  body.mba2026-sub .m26-begriffe,
  body.mba2026-sub .m26-audio-grid,
  body.mba2026-sub .m26-trust-grid{grid-template-columns:1fr}
}

/* ===========================================================================
   3c — GENERATOR-SEITE (menu-102), nur der RAHMEN
   Entscheidung Andreas 14.08.: Konfigurator-Widget (aig-SDK) NICHT
   anfassen — nur Ueberschrift, Intro, Abstaende und Sektionsrhythmus.
   🚨 Kein Selektor greift in .studio oder SDK-Klassen hinein.
   ======================================================================== */

/* Intro-Sektion wie ein Hero: weicher Verlauf, mehr Luft */
body.mba2026-sub.menu-102 .section.margin-bottom-0rem:first-of-type{
  background:
    radial-gradient(50rem 24rem at 82% 108%,rgba(78,154,163,.13) 0%,transparent 60%),
    linear-gradient(180deg,#FBFDFD 0%,#F1F8F9 100%);
  padding-top:var(--sect-y);padding-bottom:var(--sect-y);
}

/* Hinweis-Pille statt Vollbreite-Kasten — wie auf der Startseite */
body.mba2026-sub.menu-102 .hinweis-generator{
  padding:0;border:0;background:none;overflow:visible;isolation:auto;
  margin:0 0 2rem;
}
body.mba2026-sub.menu-102 .hinweis-generator::before{display:none;content:none}
body.mba2026-sub.menu-102 .hinweis-generator-inner{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:.4rem;
  background:rgba(255,255,255,.75);border:1px solid rgba(78,154,163,.28);
  border-radius:2rem;padding:.5rem 1.1rem;
  box-shadow:0 2px 8px rgba(34,81,90,.05);
}
body.mba2026-sub.menu-102 .hinweis-generator-lead{
  font-size:.86rem !important;line-height:1.45;color:var(--gray-700);
}

/* Sektionsrhythmus: abwechselnd weiss / zartes Grau, klare Trennung */
body.mba2026-sub.menu-102 .section{
  padding-left:max(var(--sect-x),calc((100% - 1400px)/2));
  padding-right:max(var(--sect-x),calc((100% - 1400px)/2));
  box-sizing:border-box;
}
body.mba2026-sub.menu-102 .section.bg-gray100{
  background:var(--gray-100);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}

/* Ueberschriften auf Marken-Teal */
body.mba2026-sub.menu-102 .section h1,
body.mba2026-sub.menu-102 .section h2{color:var(--main-dark)}
body.mba2026-sub.menu-102 .section h1 strong,
body.mba2026-sub.menu-102 .section h2 strong{
  color:var(--main-light);font-weight:600;
}

/* Konfigurator bekommt Luft nach oben, damit er nicht am Text klebt */
body.mba2026-sub.menu-102 #aig-app,
body.mba2026-sub.menu-102 .section.studio{margin-top:1.5rem}

/* ===========================================================================
   4 — OVERLAY-MODUS (body.mba2026-sub)
   Die alte style.css laeuft mit. Hier NUR die Stellen korrigieren, an denen
   Alt-Regeln in das neue Chrome hineinwirken.

   🚨 Zwei bekannte Alt-Fallen, in dieser style.css nachgewiesen:
      (a) .section ist display:flex/column  -> Kinder schrumpfen auf Inhalt
      (b) strong::before{content:'\A'}      -> Umbruch vor jedem <strong>
   ======================================================================== */

/* (a) Schrumpf-Falle: Flex-Kinder auf volle Breite zwingen.
   Bewusst nur auf Container-Elemente, NICHT pauschal auf > * —
   bei ansagen.ai hat die breite Fassung /preise zerschossen. */
body.mba2026-sub .section > details,
body.mba2026-sub .section > table,
body.mba2026-sub .section > form{width:100%}

/* Das neue Chrome darf von der alten .section-Formel nicht erfasst werden */
body.mba2026-sub .topbar,
body.mba2026-sub .nav-section2026,
body.mba2026-sub .usp-band,
body.mba2026-sub .site-footer2026{display:block;flex-direction:initial}

/* Alte Nav-Reste ausblenden — das 2026-Chrome ersetzt sie vollstaendig */
body.mba2026-sub .section[role="pre-head"],
body.mba2026-sub .section[role="post-head"],
body.mba2026-sub .section[role="head"],
body.mba2026-sub .section[role="head-mein-konto"],
body.mba2026-sub .section[role="footer"]{display:none}

/* CTA-Buttons der Altseiten auf 2026-Look — inkl. Hover.
   🚨 Alter .cto:hover macht bg transparent + Text farbig; der 2026-Verlauf
      ist background-IMAGE und bleibt stehen -> sonst Farbe auf Farbe. */
body.mba2026-sub a.cto,
body.mba2026-sub button.cto,
body.mba2026-sub input.cto{
  background:var(--cta-grad);color:#fff;border:0;border-radius:999px;
  box-shadow:0 6px 16px -6px rgba(243,46,7,.5);
}
body.mba2026-sub a.cto:hover,
body.mba2026-sub button.cto:hover,
body.mba2026-sub input.cto:hover{
  background:var(--cta-grad);color:#fff;filter:brightness(1.04);
  transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(243,46,7,.55);
}
/* Ghost-Varianten der Altseiten lesbar halten (waren sonst Farbe auf Farbe) */
body.mba2026-sub a.cto.secondary,
body.mba2026-sub button.cto.secondary{
  background:transparent;color:var(--main-dark);border:1px solid var(--main-dark);box-shadow:none;
}
body.mba2026-sub a.cto.secondary:hover,
body.mba2026-sub button.cto.secondary:hover{
  background:rgba(78,154,163,.06);color:var(--main-light);border-color:var(--main-light);
}

/* Altfarben auf die neue Marke ziehen (Links/Headlines der Bestandsinhalte) */
body.mba2026-sub{--main-dark:#22515A;--main-light:#4E9AA3}

/* ===========================================================================
   5 — RESPONSIVE
   ======================================================================== */
@media (max-width:1100px){
  .price-cards2026{grid-template-columns:repeat(2,1fr)}
  .trust2026-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .grid-40-60-2026{grid-template-columns:1fr;gap:2.5rem}
  .grid3-2026{grid-template-columns:repeat(2,1fr)}
  .ablauf2026{grid-template-columns:1fr;gap:1.5rem}
  .ablauf2026 .step::after{display:none}
  .navigation2026{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--hairline);box-shadow:0 12px 30px rgba(34,81,90,.10);
    padding:1rem var(--sect-x) 1.5rem;
  }
  .navigation2026.open{display:block}
  .navigation2026 ul{flex-direction:column;align-items:flex-start;gap:.35rem}
  .navigation2026 a{display:block;padding:.6rem 0;width:100%}
  .nav-burger{display:flex}
  .nav-section2026 > div{position:relative;min-height:4rem}
}
@media (max-width:760px){
  :root{--sect-x:1.25rem}
  .topbar > div{justify-content:center;text-align:center;gap:.75rem}
  .tb-beratung{display:none}
  .usp-band span:nth-child(n+2){display:none}
  .grid3-2026,.grid2-2026,.grid-audio2026,
  .price-cards2026,.trust2026-grid{grid-template-columns:1fr}
  .site-footer2026 .sf-top{flex-direction:column}
  .site-footer2026 .sf-bottom,.site-footer2026 .subnav ul{justify-content:center}
}

/* ===========================================================================
   6 — MOTION-ABSICHERUNG (Pflicht)
   ======================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .phone2026 .caret{animation:none}
}