/* ══════════════════════════════════════════════════════════════
   ansagen.ai — style2026.css (Relaunch-Preview, generiert aus
   ansagen-ai-v6-light.html via joomla-2026/build.js — Aenderungen
   am Design bitte im Prototyp ODER hier + im Prototyp pflegen)
   ══════════════════════════════════════════════════════════════ */
@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");}

/* ══════════════════════════════════════════════════════════════
   ansagen.ai — Startseite 1:1, Design-Schicht neu ("leicht")
   Inhalte, Klassen und Auszeichnung unverändert von Live.
   Prinzipien: eine Kartensignatur, feste Spacing-Skala ohne
   Negativ-Margins, ruhige Typo (300 + 600er Betonung).
   ══════════════════════════════════════════════════════════════ */
:root{
  /* Marke — 1:1 aus der Live-style.css */
  --main-dark:#0a4d7c;
  --main-light:#0891c2;
  --main-cta:#f05613;
  --cta-grad:linear-gradient(135deg,#f97a2e 0%,#ee5310 100%);
  --fliesstext:#4a4a4a;
  --bg-kontakt:#f2f9fe;
  --green:#3fe0b0;
  --green-tx:rgb(16,185,148);
  --gray-100:#f1f3f8;
  --gray-300:#dee3ed;
  --gray-500:#8f96a3;
  --gray-600:#5e636e;
  --hairline:#eef1f4;
  --site-width:1400px;
  --transition-base:200ms cubic-bezier(.4,0,.2,1);
  --ease:cubic-bezier(.4,0,.2,1);

  /* Eine Kartensignatur für die ganze Seite */
  --card-radius:1rem;
  --card-border:1px solid var(--gray-300);
  --card-shadow:0 10px 30px rgba(10,77,124,.08);

  /* Spacing-Rhythmus */
  --sect-y:clamp(3rem,6vw,4.75rem);
  --sect-x:2rem;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Geist',system-ui,sans-serif;font-weight:300;
  color:var(--fliesstext);line-height:1.7;background:#fff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--main-light);text-decoration:none;
  transition:color var(--transition-base),border-color var(--transition-base),opacity var(--transition-base);}
:focus-visible{outline:2px solid var(--main-light);outline-offset:2px;border-radius:2px;}
img{display:block;max-width:100%;}
ul{list-style:none;}
/* Betonung im Fliesstext bewusst leise: 500 ohne Farbwechsel.
   Nur Ueberschriften, Preise und Zeilen-Anfuehrer duerfen 600. */
strong{font-weight:500;}

/* ── Sektionen ──────────────────────────────────────────────── */
.section{
  padding:var(--sect-y) var(--sect-x);
}
.section > *{max-width:var(--site-width);margin-left:auto;margin-right:auto;}
/* Lesebreite: Intro-Absaetze einer Sektion nie ueber ~72ch laufen lassen
   (auf 1400px liefen sie sonst mit 140+ Zeichen pro Zeile).
   margin-left = Versatz der zentrierten Inhaltsspalte, damit der Absatz
   auf derselben linken Flucht sitzt wie H2 und Folgebloecke — auch auf
   Viewports breiter als 1400px (margin-left:0 riss ihn dort nach links). */
.section > p:not(.slogan){
  max-width:72ch;
  margin-left:max(0px,calc((100% - var(--site-width))/2));
  margin-right:auto;
  /* 5c Lead-Absatz: Einstieg minimal groesser und luftiger als Fliesstext */
  font-size:1.04rem;line-height:1.75;
}
/* Design-Regel: nie flaechiges Flat-Color — immer ein leichter Verlauf */
.bg-gray100{background:linear-gradient(180deg,#f4f6fa 0%,#edf0f6 100%);}
.bg-texture{background:linear-gradient(180deg,#f4fafe 0%,#e9f3fb 100%);}
/* Hintergrund-Rhythmus: Karten-Sektionen immer getoent,
   Ablauf bewusst gruenlich, damit sich die Sektionen klar trennen */
.ablauf-bright{background:linear-gradient(180deg,#eefcf6 0%,#e3f7ee 100%);}

/* ── Typografie ─────────────────────────────────────────────── */
h1{
  color:var(--main-dark);font-weight:300;
  font-size:clamp(1.9rem,1.4rem + 1.9vw,2.6rem);
  line-height:1.15;letter-spacing:-.025em;margin-bottom:1.2rem;
}
h1 strong{font-weight:600;}
h2{
  color:var(--main-dark);font-weight:300;
  font-size:clamp(1.55rem,1.25rem + 1.3vw,2.15rem);
  line-height:1.2;letter-spacing:-.02em;margin-bottom:1.1rem;
  max-width:30ch;text-wrap:balance;
}
h2 strong{font-weight:600;}
h3{color:var(--main-dark);font-weight:600;font-size:1.14rem;line-height:1.35;margin-bottom:.6rem;}
p{margin-bottom:1rem;}
p:last-child{margin-bottom:0;}
p strong{color:inherit;font-weight:500;}
.small{font-size:.87rem;color:var(--gray-500);}
.small strong{color:inherit;font-weight:500;}
.center{text-align:center;}
.slogan{
  text-align:center;font-size:1.15rem;color:var(--main-dark);
  margin:2.5rem auto 1.5rem;
}

/* Sektions-Kopf: H2 zentriert dort, wo die Sektion zentriert ist */
.section > h2{margin-bottom:1.5rem;}
/* Anker-Ziele: unter der sticky Nav landen, nicht dahinter */
#ablauf,#preise,#wer-wir-sind{scroll-margin-top:4.5rem;}

/* ── CTA — Klassen von Live, Ausführung neu ─────────────────── */
.cto{
  display:inline-block;border:0;color:#FFF;
  padding:.7rem 1.45rem;text-transform:uppercase;letter-spacing:.07em;
  font-size:.85rem;font-weight:500;background:var(--cta-grad);
  border-radius:999px;cursor:pointer;
  box-shadow:0 4px 14px -6px rgba(239,78,13,.5);
  transition:var(--transition-base);
}
.cto:after{content:"→";font-weight:300;padding-left:.5rem;display:inline-block;transition:transform var(--transition-base);}
.cto:hover:after{transform:translateX(3px);}
.cto:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(239,78,13,.55);filter:brightness(1.04);}
.cto:active,.cto-ghost:active,.nav-section .navigation li:last-child a:active{transform:translateY(0) scale(.985);}
.cto.big{padding:.78rem 1.45rem;font-size:.87rem;}
.cto.small{padding:.5rem 1rem;font-size:.78rem;}
.cto + .small{display:block;margin-top:.65rem;}

/* ── Häkchenlisten (Live-Klassen .check / .liste-plus) ──────── */
.check li,.liste-plus li{
  position:relative;padding-left:1.6rem;margin-bottom:.55rem;
  font-size:.97rem;line-height:1.6;
}
.check li::before,.liste-plus li::before{
  content:"";position:absolute;left:.1rem;top:.55em;width:.6em;height:.32em;
  border-left:2px solid var(--green-tx);border-bottom:2px solid var(--green-tx);
  transform:rotate(-45deg);
}
.check li strong{color:inherit;font-weight:500;}
/* Zeilen-Anfuehrer (Lead + Umbruch + Erklaerung) duerfen navy bleiben */
.liste-plus li strong{color:var(--main-dark);font-weight:500;}
.liste-plus li{margin-bottom:1rem;}

/* ── Grids ──────────────────────────────────────────────────── */
.grid-2,.grid-3{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-no-mobile-row-gap{align-items:center;}
.margin-top-2rem{margin-top:2rem;}
.margin-top-1rem{margin-top:1rem;}
.div-center{text-align:center;}

/* ── Eine Kartensignatur ────────────────────────────────────── */
.contentbox_text{
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  border-radius:var(--card-radius);border:var(--card-border);
  box-shadow:var(--card-shadow);padding:1.9rem 1.75rem;
}
.contentbox_text p{font-size:.96rem;line-height:1.65;}
.contentbox_text .small{margin-top:.75rem;}
/* Icons aus dem Live-Markup: duenne Outline-SVGs in Markenfarbe
   (Element aus den Mockups — Icon als Einstiegspunkt je Karte) */
.contentbox_text > i,.trust-badge i{
  display:block;width:2.3rem;height:2.3rem;margin-bottom:1rem;
  background:no-repeat center/contain;
}
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='%230891c2' 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.world{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.5 2.5 15.5 0 18'/%3E%3Cpath d='M12 3c-2.5 2.5-2.5 15.5 0 18'/%3E%3C/svg%3E");}
i.volume{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 010 7'/%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='%230891c2' 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.clock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' 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.euro{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 6.5a7 7 0 100 11'/%3E%3Cpath d='M4.5 10.5h8'/%3E%3Cpath d='M4.5 13.5h7'/%3E%3C/svg%3E");}
i.coins{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.5' rx='7' ry='3'/%3E%3Cpath d='M5 6.5v5.5c0 1.7 3.1 3 7 3s7-1.3 7-3V6.5'/%3E%3Cpath d='M5 12v5.5c0 1.7 3.1 3 7 3s7-1.3 7-3V12'/%3E%3C/svg%3E");}
i.comment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5H4v11h4v4l5-4h7V5z'/%3E%3C/svg%3E");}
i.package{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5'/%3E%3Cpath d='M12 12v9'/%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='%230891c2' 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.account{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5'/%3E%3C/svg%3E");}
i.pin{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.7-6.5-10a6.5 6.5 0 1113 0C18.5 15.3 12 21 12 21z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E");}
i.card{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");}
i.shield{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.6-2.9 7.6-7 9.8-4.1-2.2-7-5.2-7-9.8V5.8L12 3z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 9.5'/%3E%3C/svg%3E");}

/* ── Navigation (Ausführung aus v2: Blur, Spektrum-Unterstrich,
     Schrumpfen beim Scrollen, Lesefortschritt) ────────────────── */
.nav-section{
  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:20;padding:0 var(--sect-x);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.nav-section.stuck{border-bottom-color:var(--gray-300);box-shadow:0 1px 20px -8px rgba(10,77,124,.2);}
.nav-section > div:not(.nav-progress){
  max-width:var(--site-width);margin:0 auto;display:flex;
  align-items:center;justify-content:space-between;height:4.6rem;gap:2rem;
  transition:height .35s var(--ease);
}
.nav-section.stuck > div:not(.nav-progress){height:3.9rem;}
.nav-section .logo img{height:2.4rem;width:auto;max-width:13rem;}
/* Logo schrumpft per transform — animiert garantiert in jedem Browser */
.nav-section .logo{
  transform-origin:left center;
  transition:transform .35s var(--ease);
}
.nav-section.stuck .logo{transform:scale(.72);}
/* Burger fuer Mobile */
.nav-burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:0;padding:.45rem;cursor:pointer;
}
.nav-burger span{width:22px;height:2px;background:var(--main-dark);border-radius:2px;transition:var(--transition-base);}
.nav-section.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-section.nav-open .nav-burger span:nth-child(2){opacity:0;}
.nav-section.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-section .navigation ul{display:flex;gap:1.6rem;align-items:center;}
.nav-section .navigation a{
  position:relative;color:var(--main-dark);font-size:.95rem;font-weight:400;
  padding-bottom:.3rem;transition:color var(--transition-base),transform var(--transition-base);
}
.nav-section .navigation li:not(:last-child) 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(--main-light) 55%,var(--green) 100%);
  transform:scaleX(0);transform-origin:center;
  /* var(--transition-base) enthaelt eine Dauer — als Easing-Slot benutzt
     wurde daraus ein 200ms-DELAY. Deshalb reines --ease. */
  transition:transform .3s var(--ease);
  /* Balken dauerhaft auf dem Compositor-Layer halten: ohne will-change
     rastert Chrome ihn nach Transition-Ende neu (knackig-duenner) —
     der Balken "sprang" am Animationsende sichtbar in der Dicke. */
  will-change:transform;
}
.nav-section .navigation li:not(:last-child) a:hover{color:var(--main-light);}
.nav-section .navigation li:not(:last-child) a:hover::after{transform:scaleX(1);}
.nav-progress{
  position:fixed;left:0;top:0;height:3px;width:0;z-index:99;
  background:linear-gradient(90deg,var(--main-dark) 0%,var(--main-light) 55%,var(--green) 100%);
  opacity:0;
  transition:width .08s linear,opacity .25s ease;
}
.nav-progress.on{opacity:1;}
.nav-section .navigation li:last-child a{
  border:0;background:var(--cta-grad);color:#fff;
  padding:.55rem 1.15rem;border-radius:999px;font-size:.82rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  box-shadow:0 3px 10px -4px rgba(239,78,13,.45);
}
.nav-section .navigation li:last-child a:hover{transform:translateY(-1px);}

/* Topbar (Reseller + Beratung, Inhalte von Live) */
.topbar{
  border-bottom:1px solid var(--hairline);background:#fff;
  padding:.75rem var(--sect-x);font-size:.82rem;color:var(--gray-500);
}
.topbar > div{
  max-width:var(--site-width);margin:0 auto;display:flex;
  justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.topbar a{color:var(--main-dark);}
.topbar a:hover{color:var(--main-light);}

/* ── USP-Band unter der Nav (Element aus den Mockups) ───────── */
.usp-band{
  background:linear-gradient(90deg,#083d63 0%,#0a4d7c 55%,#0d5a8f 100%);color:#fff;
  padding:.55rem var(--sect-x);font-size:.82rem;font-weight:400;
}
.usp-band > div{
  max-width:var(--site-width);margin:0 auto;display:flex;
  /* linksbuendig an der Inhaltsspalte (Andreas 08.08., vorher zentriert) */
  justify-content:flex-start;gap:1rem 3rem;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);
}

/* ── Trust-Badges als Mini-Kaertchen (Element aus den Mockups) ─ */
.trust-badges{background:linear-gradient(180deg,#f2f9fe 0%,#e9f3fb 100%);}
.trust-badge{background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);}
.trust-badges-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  max-width:var(--site-width);margin:0 auto;
}
.trust-badge{
  display:flex;align-items:flex-start;gap:.85rem;
  border:1px solid var(--gray-300);border-radius:12px;
  padding:1rem 1.15rem;
}
.trust-badge i{flex:0 0 auto;width:1.8rem;height:1.8rem;margin-bottom:0;margin-top:.1rem;}
.trust-badge p{margin:0;font-size:.82rem;line-height:1.45;color:var(--gray-600);}
.trust-badge p strong{display:block;color:var(--main-dark);font-size:.92rem;font-weight:500;margin-bottom:.15rem;}

/* ── Info-Band (Element aus den Mockups: Icon + Satz + CTA) ──── */
.info-band-section{padding-block:clamp(2.75rem,5vw,4rem);}
.info-band{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  background:linear-gradient(135deg,#f2f9fe 0%,#e9f3fb 100%);
  border:var(--card-border);
  border-radius:var(--card-radius);padding:1.4rem 1.75rem;
}
.info-band i{flex:0 0 auto;width:2.3rem;height:2.3rem;background:no-repeat center/contain;}
.info-band > div{flex:1;min-width:16rem;}
.info-band-head{font-size:1.02rem;font-weight:500;color:var(--main-dark);margin-bottom:.15rem;}
.info-band p{margin:0;}
.info-band > div p:last-child{font-size:.88rem;color:var(--gray-600);}
.info-band .cto{margin-left:auto;}

/* ── Hero: Verlauf gedreht — weiss oben, Blau faedt zum
     Referenz-Streifen hin ein (Wunsch 05.08.); dadurch kann das
     iframe-Weiss oben nahtlos aufliegen ─────────────────────── */
.hero-section{
  position:relative;overflow:hidden;
  background:
    radial-gradient(50rem 24rem at 82% 108%,rgba(8,145,194,.10) 0%,transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 45%,#e9f3fb 100%);
}
.hero-section::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(10,77,124,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,77,124,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(60% 55% at 50% 40%,#000 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 40%,#000 0%,transparent 100%);
}
/* Kein eigener Stacking-Kontext: so blendet das iframe-multiply
   direkt gegen den echten Sektions-Verlauf — kein Fremd-Verlauf */
.hero-section .grid-40-60{position:relative;}
/* Fliesstext im Hero in Marken-Blau */
.hero-section h1 + p{color:var(--main-dark);}
/* Hero-Liste kompakter: weniger Durchschuss als Standard-Checklisten (07.08.) */
.hero-section .check li{color:#2a5f86;margin-bottom:.3rem;line-height:1.5;}
.grid-40-60{
  display:grid;grid-template-columns:47% 1fr;gap:3rem;align-items:start;
  max-width:var(--site-width);margin:0 auto;
}
.hero-section .small{margin-top:.65rem;}
.hero-section .check{margin:0 0 1.75rem;}
.hero-section h1{margin-bottom:1.3rem;}

/* Hero-Animation (Original-iframe von Live) — ohne Kasten,
   multiply blendet das Weiss der Animation in den Hero-Verlauf */
.wrapper_img-screen{position:sticky;top:6rem;}
.hero-anim{
  position:relative;width:100%;
}
/* Sicherheitsnetz: LCD-Flaeche selbst nie als nackter weisser Kasten
   (die App-UI bringt ihr eigenes Weiss mit) */
.hero-section .hero-anim .screen{background:transparent;}
/* Harte Overrides: um den Laptop herum darf NICHTS einen Hintergrund malen */
.hero-section .wrapper_img-screen,
.hero-section .hero-anim,
.hero-section .hero-anim .stage,
.hero-section .hero-anim .mb{background:transparent !important;box-shadow:none !important;border:0 !important;}
/* DER Kasten-Fix: hero-macbook.webp hatte um den Laptop herum deckendes
   Weiss eingebacken (nur das LCD war Alpha-Cutout). Wir nutzen eine lokal
   freigestellte Version (assets/hero-macbook-alpha.png, Flood-Fill vom Rand).
   Blend-Tricks scheitern hier, weil position:sticky einen Stacking-Kontext
   erzeugt und multiply dann nicht gegen den Sektions-Verlauf mischt. */
/* App-Grund + End-Screen leicht getoent statt Reinweiss —
   die inneren Karten bleiben weiss, das LCD wirkt als UI, nicht als Kasten */
.hero-section .hero-anim .app{background:#f4f8fc;}
.hero-section .hero-anim .end-screen{background:#f4f8fc;}
.hero-anim-link{position:absolute;inset:0;z-index:2;}

/* Audio-Demos (Live-Markup, neue Ausführung) */
h2.hero{
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-tx);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:#ffffff;border-radius:12px;border:var(--card-border);
  box-shadow:0 2px 8px rgba(10,77,124,.05);
  padding:.7rem .95rem;transition:var(--transition-base);
  /* Anker + Clip fuer die Abspiel-Progressbar an der Unterkante */
  position:relative;overflow:hidden;
}
/* Progressbar beim Abspielen (JS setzt scaleX ueber timeupdate) */
.contentbox_hero_audioplayer .audio-progress{
  position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--main-light) 0%,var(--green) 100%);
  transform:scaleX(0);transform-origin:left;
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.contentbox_hero_audioplayer.playing .audio-progress{opacity:1;}
.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:.93rem;font-weight:500;color:var(--main-dark);line-height:1.3;
}
.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);
}
.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;
}
.contentbox_hero_audioplayer.playing{border-color:var(--main-light);background:#ffffff;}

/* Nudge: erscheint nach dem ersten Abspielen (Verhalten von Live) */
.demo-success-nudge{
  display:none;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  background:#ffffff;border:1px dashed var(--green);
  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;}
.demo-success-nudge p{font-size:.95rem;}
.demo-success-nudge .small.center{text-align:left;}

/* ── Referenzleiste — CSS 1:1 von Live ──────────────────────── */
.section.referenz-trust{
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  border-top:1px dotted var(--gray-300);
  border-bottom:1px dotted var(--gray-300);
  overflow:hidden;
}
.referenz-trust-flipboard{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0.5rem 1.5rem;
  width:100%;
  max-width:var(--site-width);
  margin:0 auto;
}
@media (min-width:768px){
  .referenz-trust-flipboard{
    justify-content:space-between;
  }
}
.referenz-slot{
  display:grid;
  overflow:hidden;
  width:6.6rem;
  height:3.05rem;
}
.referenz-slot > span{
  grid-column-start:1;
  grid-row-start:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}
.referenz-slot img{
  max-width:6.6rem;
  max-height:3.05rem;
  width:auto;
  height:auto;
  object-fit:contain;
}
.referenz-slot .referenz-enter{
  animation:referenz-logo-enter 0.75s cubic-bezier(0.33,1,0.68,1) both;
}
.referenz-slot .referenz-fade-out{
  animation:referenz-logo-fade-out 0.9s cubic-bezier(0.87,0,0.13,1) forwards;
}
.referenz-slot .referenz-fade-in{
  animation:referenz-logo-fade-in 0.9s cubic-bezier(0.87,0,0.13,1) 0.1s backwards;
}
@keyframes referenz-logo-enter{
  0%{opacity:0;transform:translateY(20px);}
  100%{opacity:1;transform:translateY(0);}
}
@keyframes referenz-logo-fade-out{
  0%{opacity:1;transform:translateY(0);}
  100%{opacity:0;transform:translateY(-50%);}
}
@keyframes referenz-logo-fade-in{
  0%{opacity:0;transform:translateY(50%);}
  100%{opacity:1;transform:translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .referenz-slot .referenz-enter,
  .referenz-slot .referenz-fade-out,
  .referenz-slot .referenz-fade-in{
    animation:none;
    opacity:1;
    transform:translateY(0);
  }
}

/* ── Ablauf: 3 Schritte ─────────────────────────────────────── */
/* Nummern-Kreise + Verbindungspfeile (Element aus den Mockups) */
.step-card{position:relative;}
.step-card .step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:linear-gradient(135deg,var(--main-dark) 0%,var(--main-light) 100%);
  color:#fff;font-size:1rem;font-weight:500;line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:1.05rem;
  box-shadow:0 6px 14px -5px rgba(10,77,124,.45);
}
@media(min-width:901px){
  /* Pfeil exakt auf Kreismitte: Karten-Padding 1.9rem + Kreisradius 1.25rem */
  .ablauf-bright .step-card:not(:last-child)::after{
    content:"";position:absolute;top:calc(3.15rem - 1px);right:-1.45rem;
    width:1.4rem;height:2px;border-radius:2px;background:var(--main-light);opacity:.55;
  }
  .ablauf-bright .step-card:not(:last-child)::before{
    content:"";position:absolute;top:calc(3.15rem - 4.5px);right:-1.45rem;
    width:.55rem;height:.55rem;
    border-top:2px solid var(--main-light);border-right:2px solid var(--main-light);
    transform:rotate(45deg);opacity:.55;
  }
}

/* ── Foto-Break ─────────────────────────────────────────────── */
.section-foto-break{
  background-size:cover;background-position:center;position:relative;
  padding:clamp(3.5rem,7vw,5.5rem) var(--sect-x);
}
.section-foto-break::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(10,77,124,.86) 0%,rgba(10,77,124,.6) 50%,rgba(8,145,194,.4) 100%);
}
.foto-break-card{
  position:relative;max-width:44rem;margin:0 auto;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:var(--card-radius);padding:clamp(1.6rem,3vw,2.5rem);
  box-shadow:0 24px 54px -18px rgba(2,22,38,.45);
}
.foto-break-card h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.85rem);margin-bottom:.9rem;}
.foto-break-card p{font-size:1rem;line-height:1.7;}
.foto-break-card .check{margin:1rem 0 1.5rem;}
.foto-break-card .cto{margin-top:.25rem;}

/* ── Video (yt-lazy von Live) ───────────────────────────────── */
.video-responsive{width:100%;}
.yt-lazy{
  position:relative;cursor:pointer;overflow:hidden;
  border-radius:var(--card-radius);border:var(--card-border);
  box-shadow:var(--card-shadow);aspect-ratio:16/9;background:#000;
}
.yt-lazy img{width:100%;height:100%;object-fit:cover;}
.yt-lazy .play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:4.2rem;height:4.2rem;border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 30px rgba(2,22,38,.4);
  transition:var(--transition-base);
}
.yt-lazy .play-btn::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-42%,-50%);
  border-style:solid;border-width:.7rem 0 .7rem 1.1rem;
  border-color:transparent transparent transparent var(--main-cta);
}
.yt-lazy:hover .play-btn{transform:translate(-50%,-50%) scale(1.07);}

/* ── Preistabelle + Rechner (Live-Klassen, leichte Ausführung) ─ */
.modul{max-width:var(--site-width);margin:0 auto;}

/* ── Was-kosten: eine Sektion, Boxen entkernt zu Spalten ────── */
/* Endton = Startton der folgenden bg-texture (#f4fafe): eine bewusste,
   durchgehende Rampe statt zweier fast identischer Flaechen mit Naht */
.kosten-section{background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 55%,#f4fafe 100%);}
.kosten-cols .contentbox_text{
  display:flex;flex-direction:column;
  background:transparent;border:0;box-shadow:none;border-radius:0;
  padding:0 0 0 0;
}
/* Fussnote der Spalte klebt unten — gleiche Grundlinie in allen Spalten.
   Spezifitaet (0,3,0) noetig: .contentbox_text .small setzt sonst margin-top:.75rem
   und hebelt das margin-top:auto aus (Spalte 3 hing sichtbar hoeher als Spalte 1) */
.kosten-cols .contentbox_text .kosten-foot{margin-top:auto;padding-top:1rem;}
.kosten-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:auto;}
.kosten-table td{padding:.5rem 0;}
.kosten-table tr:not(:last-child){border-bottom:1px solid var(--hairline);}
.kosten-table td:last-child{text-align:right;font-weight:600;color:var(--main-dark);}
.kosten-table td.frei{color:var(--green-tx);}
.kosten-cols > .contentbox_text + .contentbox_text{
  border-left:1px solid var(--gray-300);padding-left:clamp(1.25rem,2vw,2rem);
}

/* ── Preis-Karten (Element aus den Mockups; Preise = Live) ──── */
.price-usps{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;margin:0 auto 2.25rem;}
.price-usps li{position:relative;padding-left:1.45rem;color:var(--main-dark);font-size:.92rem;font-weight:500;}
.price-usps li::before{
  content:"";position:absolute;left:0;top:.5em;width:.6em;height:.32em;
  border-left:2px solid var(--green-tx);border-bottom:2px solid var(--green-tx);
  transform:rotate(-45deg);
}
.price-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;max-width:72rem;margin:0 auto;}
.price-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  border:var(--card-border);border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);padding:1.75rem 1.5rem;
}
.price-card{transition:transform var(--transition-base),box-shadow var(--transition-base);}
.price-card:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(10,77,124,.12);}
.price-card--best:hover{box-shadow:0 22px 48px rgba(10,77,124,.18);}
.price-card h3{font-size:1.28rem;margin-bottom:.15rem;}
.price-card .for{font-size:.85rem;color:var(--gray-500);margin-bottom:1.25rem;}
.price-card .price{font-size:2.6rem;font-weight:300;color:var(--main-dark);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:0;}
.price-card .price .cur{font-size:1.2rem;color:var(--main-light);font-weight:500;margin-left:.15rem;}
.price-card .price .unit{font-size:.95rem;color:var(--fliesstext);font-weight:300;letter-spacing:0;margin-left:.5rem;}
.price-card .per{font-size:.85rem;color:var(--gray-600);margin:.6rem 0 1.25rem;line-height:1.6;}
.price-card .per strong{color:var(--main-dark);font-weight:500;}
.price-card .check{margin:1.2rem 0 1.5rem;}
.price-card .check li{
  font-size:.9rem;line-height:1.5;
  color:var(--gray-600);font-weight:300;
  padding:.42rem 0 .42rem 1.9rem;margin-bottom:0;
  border-bottom:1px solid rgba(10,77,124,.07);
}
.price-card .check li:last-child{border-bottom:0;}
.price-card .check li strong{color:var(--main-dark);font-weight:600;font-variant-numeric:tabular-nums;}
.price-card .check li::before{
  left:0;top:.52rem;width:1.15rem;height:1.15rem;
  border:0;border-radius:50%;transform:none;
  background:linear-gradient(135deg,rgba(16,185,148,.16) 0%,rgba(16,185,148,.05) 100%);
}
.price-card .check li::after{
  content:"";position:absolute;left:.3rem;top:.9rem;width:.55rem;height:.3rem;
  border-left:2px solid var(--green-tx);border-bottom:2px solid var(--green-tx);
  transform:rotate(-45deg);
}
.price-card .cto,.price-card .cto-ghost{margin-top:auto;display:block;text-align:center;}
.cto-ghost{
  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;transition:var(--transition-base);
}
.cto-ghost:hover{border-color:var(--main-light);color:var(--main-light);background:rgba(8,145,194,.05);transform:translateY(-1px);}
.price-card--best{border-color:var(--main-light);box-shadow:0 18px 42px rgba(10,77,124,.14);}
.price-card--best .badge{
  position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);
  background:var(--main-light);color:#fff;font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;border-radius:2rem;padding:.3rem .85rem;white-space:nowrap;
}
.price-more{text-align:center;margin:1.75rem 0 0;font-size:.95rem;}
.price-teaser .small.center{margin-top:1.25rem;}
.price-more a{color:var(--main-dark);font-weight:500;border-bottom:1px solid rgba(8,145,194,.35);}
.price-more a:hover{color:var(--main-light);border-bottom-color:var(--main-light);}
/* Grossbedarf-Zeile unter den Karten (Fussnote von /preise uebernommen, 07.08.) */
.price-custom{text-align:center;margin:.75rem 0 0;font-size:.88rem;color:var(--gray-600);}
.price-custom a{color:var(--main-dark);font-weight:500;border-bottom:1px solid rgba(8,145,194,.35);}
.price-custom a:hover{color:var(--main-light);border-bottom-color:var(--main-light);}

/* ── Foto-Elemente aus dem Live-Bestand ─────────────────────── */
.foto-banner{
  border-radius:var(--card-radius);overflow:hidden;
  box-shadow:var(--card-shadow);margin-bottom:2rem;
}
.foto-banner img{width:100%;height:clamp(180px,26vw,320px);object-fit:cover;display:block;}

/* ── Testimonials (mit Keyvisual von Live) ──────────────────── */
.testimonial-wrap{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,3vw,3rem);
  align-items:center;max-width:70rem;margin:0 auto;
}
.testimonial-foto{border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--card-shadow);}
.testimonial-foto img{width:100%;height:100%;min-height:230px;max-height:320px;object-fit:cover;display:block;}
.testimonial-slider{
  display:grid;text-align:left;
}
.testimonial-slide{
  grid-column:1;grid-row:1;
  opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;
}
.testimonial-slide.active{opacity:1;transform:none;pointer-events:auto;}
.testimonial-slide.instant{transition:none;}
.testimonial-slide .quote{
  font-size:clamp(1.1rem,1rem + .6vw,1.4rem);line-height:1.6;
  color:var(--main-dark);font-weight:300;max-width:44ch;margin:0 0 1rem;
  text-wrap:balance;
}
.testimonial-slide .name{font-size:.85rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.07em;}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-wrap{max-width:60rem;margin:0 auto;}
.faq-card{
  background:#fff;border-radius:var(--card-radius);border:var(--card-border);
  box-shadow:var(--card-shadow);overflow:hidden;margin-top:1.5rem;
}
.faq-row{border-bottom:1px solid var(--hairline);}
.faq-row:last-child{border-bottom:0;}
.faq-q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:1.02rem;font-weight:500;color:var(--main-dark);
  padding:1.2rem 1.7rem;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;transition:background var(--transition-base);
}
.faq-q:hover{background:#fbfdff;}
.faq-q .sign{
  flex:0 0 auto;width:1.55rem;height:1.55rem;border-radius:50%;
  border:1px solid var(--green);color:var(--green-tx);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:400;
  transition:var(--transition-base);
}
.faq-row.open .faq-q{background:#fbfdff;}
.faq-row.open .faq-q .sign{background:var(--green);color:#08422c;transform:rotate(45deg);}
/* Accordion animiert Hoehe+Opazitaet (grid-rows 0fr->1fr) statt display-Toggle */
.faq-a{
  display:grid;grid-template-rows:0fr;opacity:0;
  padding:0 1.7rem;font-size:.97rem;line-height:1.72;max-width:74ch;
  transition:grid-template-rows .32s var(--ease),opacity .32s var(--ease),padding-bottom .32s var(--ease);
}
.faq-a-inner{overflow:hidden;min-height:0;}
.faq-row.open .faq-a{grid-template-rows:1fr;opacity:1;padding-bottom:1.4rem;}

/* ── Abschluss-CTA ──────────────────────────────────────────── */
.cta-final{
  background:linear-gradient(135deg,var(--main-dark) 0%,var(--main-light) 100%);
  text-align:center;
}
.cta-final h2{color:#fff;margin:0 auto 1rem;max-width:24ch;}
.cta-final p{color:rgba(255,255,255,.85);margin-bottom:1.75rem;font-size:1rem;}
.cta-final .cto{box-shadow:0 10px 26px -8px rgba(2,22,38,.55);}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer{background:linear-gradient(180deg,#0a4d7c 0%,#083b5e 100%);color:#fff;padding:3rem var(--sect-x) 1.5rem;}
.site-footer > div{max-width:var(--site-width);margin:0 auto;}
.site-footer .top{text-align:center;}
.site-footer .top img{height:2.5rem;width:auto;margin:0 auto .8rem;filter:brightness(0) invert(1);}
.site-footer .top p{font-size:1.05rem;font-weight:300;color:rgba(255,255,255,.9);}
.site-footer .top p strong{font-weight:600;color:#fff;}
.site-footer .middle{
  text-align:center;margin:1.75rem auto;padding:1.25rem 0;
  border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);
  font-size:.95rem;color:rgba(255,255,255,.85);
}
.site-footer .middle p{margin:0;}
.site-footer a{color:#fff;opacity:.85;transition:opacity var(--transition-base);}
.site-footer a:hover{opacity:1;}
/* B2B-Hinweis + Member-of (Ausführung wie ab24.com) */
/* Spezifitaet (0,2,0): .site-footer > div setzt sonst margin:0 auto
   und frisst den Abstand nach unten komplett */
.site-footer .footer-b2b-notice{text-align:center;margin:0 auto 1.5rem;}
.footer-b2b-notice p{margin:0;font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.6;}
.memberof{display:inline-flex;align-items:center;}
/* Flamme 1:1: FontAwesome-"fire"-Pfad (f06d) — dasselbe Icon, das
   ab24 + ansagen.ai per Icon-Font nutzen. Als SVG eingebettet, weil
   der Font vom Live-Server ohne CORS-Header nicht cross-origin laedt. */
i.brennermedien{
  display:inline-block;width:.95rem;height:1.1rem;margin:0 .3rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-4.5-9-16-9.6-22.5-2l-25.2 29.3c-6.6 7.6-18.5 7.4-24.7-.5c-16.5-21-46-58.5-62.8-79.8c-6.3-8-18.3-8.1-24.7-.1c-33.8 42.5-50.8 69.3-50.8 99.4C112 375.4 162.6 416 225.7 416z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.site-footer .bottom{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;font-size:.85rem;
}
.site-footer .subnav{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;}
.site-footer .subnav ul{display:flex;flex-wrap:wrap;gap:1.2rem;}
.proto-version{opacity:.45;font-size:.7rem;}

/* ── Scroll-Reveal: Karten blenden gestaffelt ein (JS setzt .reveal
     erst zur Laufzeit — ohne JS ist alles sofort sichtbar) ──────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.reveal.in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .faq-a,.nav-section .navigation,.cto:after,.price-card,.testimonial-slide,a{transition:none;}
}

/* ── Subtile Hintergrund-Drift der getoenten Sektionen ──────── */
@keyframes bg-drift{
  0%{background-position:0% 0%;}
  100%{background-position:100% 100%;}
}
.hero-section,.bg-gray100,.bg-texture,.ablauf-bright,
.trust-badges,.usp-band,.cta-final,.site-footer{
  background-size:160% 160%;
  animation:bg-drift 26s ease-in-out infinite alternate;
}
.usp-band{animation-duration:34s;}
/* Hero: nur horizontal driften, damit die blaue Unterkante
   fest am Referenz-Streifen verankert bleibt */
.hero-section{animation-duration:38s;background-size:160% 100%;}
@media (prefers-reduced-motion:reduce){
  .hero-section,.bg-gray100,.bg-texture,.ablauf-bright,
  .trust-badges,.usp-band,.cta-final,.site-footer{animation:none;}
}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1100px){
  .grid-40-60{grid-template-columns:1fr;gap:2.5rem;}
  .wrapper_img-screen{position:static;order:-1;}
  .price-cards{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:700px){
  .price-cards{grid-template-columns:1fr;}
  .info-band .cto{margin-left:0;}
}
@media(max-width:900px){
  /* Burger schon ab 900px: zwischen 760 und 900 passten Logo + 5
     Menuepunkte nicht mehr nebeneinander — der Nav-CTA brach zweizeilig
     um und ragte aus der Leiste */
  .nav-section .logo img{height:1.9rem;}
  .nav-section > div:not(.nav-progress){height:3.9rem;}
  .nav-burger{display:flex;}
  .nav-section .navigation{
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--gray-300);
    box-shadow:0 16px 30px -12px rgba(10,77,124,.18);
    padding:1rem var(--sect-x) 1.25rem;
    visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
  }
  .nav-section.nav-open .navigation{
    visibility:visible;opacity:1;transform:none;pointer-events:auto;
    transition:opacity .25s var(--ease),transform .25s var(--ease);
  }
  .nav-section .navigation ul{flex-direction:column;align-items:flex-start;gap:1rem;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  /* 3 Schritte im 2-Spalten-Raster: Schritt 3 nicht als Waise
     unten links haengen lassen, sondern ueber die volle Breite */
  .ablauf-bright .step-card:last-child{grid-column:1/-1;}
  /* Kosten-Spalten: unter 900px untereinander mit horizontalen
     Trennlinien — 2+1 mit vertikalem Trenner wirkte zerrissen */
  .kosten-cols{grid-template-columns:1fr;}
  .kosten-cols > .contentbox_text + .contentbox_text{
    border-left:0;padding-left:0;border-top:1px solid var(--gray-300);padding-top:1.5rem;
  }
  .trust-badges-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;}
  .testimonial-wrap{grid-template-columns:1fr;}
  .testimonial-foto img{max-height:220px;min-height:0;}
}
@media(max-width:560px){
  .trust-badges-grid{grid-template-columns:1fr;}
  .usp-band span:nth-child(n+2){display:none;}
}
@media(max-width:760px){
  :root{--sect-x:1.25rem;}
  .topbar > div{justify-content:center;}
  /* Footer-Unterbau: gestapelt zentrieren — linksbuendig unter dem
     zentrierten B2B-Hinweis wirkte er unaufgeraeumt */
  .site-footer .bottom{justify-content:center;text-align:center;}
  .site-footer .subnav{justify-content:center;}
  .site-footer .subnav ul{justify-content:center;}
  .grid-3{grid-template-columns:1fr;}
  .grid-hero-audio{grid-template-columns:1fr;}
  .faq-q{padding:1rem 1.2rem;font-size:.95rem;}
  .faq-a{padding:0 1.2rem;}
  .faq-row.open .faq-a{padding-bottom:1.2rem;}
  .contentbox_text{padding:1.4rem 1.3rem;}
}
@media only screen and (max-width:480px){
  .section.referenz-trust{padding-top:1.5rem;padding-bottom:1.5rem;}
  .referenz-slot{width:4.85rem;height:2.29rem;}
  .referenz-slot img{max-width:4.85rem;max-height:2.29rem;}
}
@media only screen and (min-device-width:481px) and (max-device-width:1024px){
  .referenz-slot{width:5.72rem;height:2.64rem;}
  .referenz-slot img{max-width:5.72rem;max-height:2.64rem;}
}

/* ══ Hero-Animation (aus dem Body-Style des Prototyps — muss im
   Head liegen: Vue frisst <style> im Body) ══════════════════ */

/* ── Hero-Animation: direkt eingebettet (statt iframe), CSS auf .hero-anim gescoped, Hintergrund transparent ── */
.hero-anim{
    --ink:      #1f2937;
    --ink-2:    #2b3642;
    --muted:    #9ca5b1;
    --muted-2:  #b4bcc6;
    --line:     #e5e7eb;
    --line-2:   #eef0f3;
    --panel:    #f5f6f8;
    --pause-bg: #f1f3f5;
    --bg:       #ffffff;
    --accent:   #1f2937;       
    --link:     #2a6df4;
    --shadow:   0 20px 40px rgba(20,30,50,.16);
  }.hero-anim *{ box-sizing: border-box; }.hero-anim, .hero-anim{ margin: 0; padding: 0;  color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }.hero-anim{ }.hero-anim .stage{ width: 100%; max-width: 1100px; position: relative; }@media (prefers-reduced-motion: reduce){.hero-anim .cursor, .hero-anim .click-ring{ display: none !important; }
  }.hero-anim .mb{
    position: relative; width: 100%;
    aspect-ratio: 3371 / 2435;
  }.hero-anim .mb-img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 2; 
  }.hero-anim .screen{
    position: absolute;
    left: 11.45%;      
    right: 11.89%;     
    top: 4.85%;        
    height: 69.12%;    
    background: #fff;
    overflow: hidden;
    z-index: 1;
  }.hero-anim .app{
    position: absolute; inset: 0;
    background: #fff;
    padding: 10px 16px 14px;
    font-size: 11px;
    color: var(--ink);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }.hero-anim .app::-webkit-scrollbar{ width: 0; display: none; }.hero-anim .app{ scrollbar-width: none; }.hero-anim .card{
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: visible;
  }.hero-anim .music-top{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 5px 8px;
    align-items: center;
  }.hero-anim .music-top .select{ margin: 0; }.hero-anim .music-bar{
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 8px;
    font-size: 9.5px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }.hero-anim .music-bar .lhs, .hero-anim .music-bar .rhs{
    display: flex; align-items: center; gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }.hero-anim .stepper{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 1px 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-variant-numeric: tabular-nums;
  }.hero-anim .stepper button{
    all: unset;
    width: 14px; height: 14px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--muted);
    font-size: 10px;
    line-height: 1;
  }.hero-anim .stepper .val{ font-weight: 700; font-size: 11px; color: var(--ink); padding: 0 2px; }.hero-anim .block-wrap{
    display: grid;
    grid-template-columns: 1fr 48px;
    gap: 6px;
    align-items: center;
  }.hero-anim .block-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
  }.hero-anim .block-actions .ba{
    width: 20px; height: 20px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    display: grid; place-items: center;
    color: var(--muted);
    font-size: 10px;
  }.hero-anim .block{
    background: var(--panel);
    border-radius: 5px;
    padding: 6px;
    display: flex; flex-direction: column;
    gap: 4px;
  }.hero-anim .row-selects{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }.hero-anim .select{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 3px 7px;
    height: 22px;
    font-size: 10px;
    color: var(--muted);
    display: flex; align-items: center; justify-content: space-between;
    min-width: 0; white-space: nowrap;
    position: relative;
    transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  }.hero-anim .select .chev{ color: var(--muted); font-size: 9px; margin-left: 6px; flex-shrink: 0; }.hero-anim .select.filled{ color: var(--ink); }.hero-anim .select.flash{ box-shadow: 0 0 0 2px rgba(42,109,244,.15); border-color: var(--link); }.hero-anim .select .dropdown{
    position: absolute;
    left: -1px; top: 23px;
    min-width: calc(100% + 2px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    box-shadow: 0 8px 18px rgba(15,30,50,.12);
    padding: 3px;
    z-index: 8;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }.hero-anim .select.open .dropdown{ opacity: 1; transform: translateY(0); }.hero-anim .select .dropdown div{
    padding: 3px 6px; font-size: 9.5px; color: var(--ink);
    border-radius: 3px; white-space: nowrap;
  }.hero-anim .select .dropdown div.hl{ background: #eef3ff; color: var(--link); font-weight: 600; }.hero-anim .textarea{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 5px 7px;
    font-size: 10px;
    line-height: 1.4;
    color: var(--ink);
    min-height: 32px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }.hero-anim .textarea.empty{ color: var(--muted); }.hero-anim .textarea.active{ border-color: var(--link); box-shadow: 0 0 0 2px rgba(42,109,244,.12); }.hero-anim .textarea .caret{
    display: inline-block; width: 1px; height: 11px;
    background: var(--ink); margin-left: 1px; vertical-align: -2px;
    animation: blink 1s steps(2) infinite;
    opacity: 0;
  }.hero-anim .textarea.active .caret{ opacity: 1; }@keyframes blink{ 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }.hero-anim .foot-row{ display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }.hero-anim .icon-group{ display: flex; gap: 6px; }.hero-anim .icon-btn{
    width: 20px; height: 20px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #fff;
    display: grid; place-items: center;
    color: #54606d;
  }.hero-anim .block.pause{
    background: var(--pause-bg);
    flex-direction: row;
    align-items: center;
    padding: 6px 10px;
    gap: 10px;
    font-size: 11.5px;
    color: var(--ink);
  }.hero-anim .block.pause .stepper{ background: #fff; }.hero-anim .add-row{ display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px; margin-top: 0; align-items: start; }.hero-anim .add-btn{
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px dashed var(--muted-2);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }.hero-anim .add-btn .plus{ font-size: 11px; font-weight: 300; color: var(--muted); width: 12px; height: 12px; display: grid; place-items: center; line-height: 1; }.hero-anim .add-btn.hot{ background: #eef4ff; border-color: var(--link); color: var(--link); }.hero-anim .add-btn.hot .plus{ color: var(--link); }.hero-anim .util-stack{ display: flex; flex-direction: column; gap: 4px; }.hero-anim .util-btn{
    padding: 4px 10px;
    border: 1px dashed var(--muted-2);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 9.5px;
    display: inline-flex; align-items: center; gap: 5px;
    justify-content: flex-start;
    min-width: 74px;
  }.hero-anim .util-btn svg{ width: 10px; height: 10px; }.hero-anim .bottom-right{ width: 70%; margin-left: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }.hero-anim .summary{
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 10px 12px;
    align-items: center;
    background: #fff;
  }.hero-anim .summary .divider{ background: var(--line); width: 1px; height: 48px; justify-self: center; }.hero-anim .summary .col{ display: flex; flex-direction: column; align-items: center; gap: 6px; }.hero-anim .summary .lbl{ font-size: 9.5px; color: var(--ink); white-space: nowrap; }.hero-anim .summary .val{ font-size: 10.5px; color: var(--ink); font-weight: 700; white-space: nowrap; }.hero-anim .summary .cta, .hero-anim .summary .ghost{
    width: 78%; text-align: center;
    padding: 6px 0;
    border-radius: 3px;
    font-size: 10px; font-weight: 600;
    position: relative;
  }.hero-anim .summary .ghost{ border: 1px solid var(--line); color: var(--ink); background: #fff; display: flex; align-items: center; justify-content: center; gap: 5px; }.hero-anim .summary .cta{ background: #2a82bf; color: #fff; border: 1px solid #2a82bf; }.hero-anim .summary .cta.idle{ background: #d9dde3; border-color: #d9dde3; color: #fff; }.hero-anim .spinner{
    width: 10px; height: 10px;
    border: 1.5px solid var(--ink);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    display: none;
  }.hero-anim .summary .ghost.loading .spinner{ display: inline-block; }@keyframes spin{ to { transform: rotate(360deg); } }.hero-anim .player{
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 8px 14px 6px;
    display: flex; flex-direction: column; gap: 5px;
    background: #fff;
  }.hero-anim .player .caption{ text-align: center; color: var(--muted); font-size: 9px; margin: 0; }.hero-anim .player .row{ display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }.hero-anim .player .pause{
    width: 20px; height: 20px;
    background: #ea5a1d;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff;
    position: relative;
  }.hero-anim .player .pause::before, .hero-anim .player .pause::after{
    content: ''; display: block; position: absolute;
    width: 2px; height: 8px; background: #fff; border-radius: 1px; top: 50%; transform: translateY(-50%);
  }.hero-anim .player .pause::before{ left: 7px; }.hero-anim .player .pause::after{ right: 7px; }.hero-anim .player .bar{
    position: relative; height: 4px;
    background: #f0f1f3; border-radius: 999px;
    overflow: hidden;
  }.hero-anim .player .bar i{
    display: block; height: 100%; width: 0;
    background: #ea5a1d;
    border-radius: 999px;
  }.hero-anim .player .time{ font-size: 10px; color: var(--ink); font-variant-numeric: tabular-nums; }.hero-anim .player .time b{ color: var(--ink); font-weight: 700; }.hero-anim .player .time .elapsed{ color: var(--muted); font-weight: 400; }.hero-anim .player .links{ display: flex; justify-content: center; gap: 36px; font-size: 9px; color: #ea5a1d; }.hero-anim .player .links a{ color: #ea5a1d; text-decoration: none; }.hero-anim .fade-in{
    transition: opacity .3s ease, transform .3s ease, max-height .35s ease, margin .25s ease, padding .25s ease;
  }.hero-anim .hidden{
    opacity: 0; transform: translateY(8px);
    max-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
    border-width: 0 !important; overflow: hidden;
    pointer-events: none;
  }.hero-anim .modal-overlay{
    position: absolute;
    inset: 0;
    background: rgba(24, 35, 55, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }.hero-anim .modal-overlay.show{ opacity: 1; pointer-events: auto; }.hero-anim .modal-card{
    background: #fff;
    border-left: 5px solid #E86A2A;
    border-radius: 4px;
    width: 72%;
    max-width: 520px;
    padding: 22px 28px 24px 26px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    transform: translateY(6px) scale(.98);
    transition: transform 220ms ease;
  }.hero-anim .modal-overlay.show .modal-card{ transform: translateY(0) scale(1); }.hero-anim .modal-icon{
    width: 40px; height: 40px;
    background: #FBE8DD;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: #E86A2A;
  }.hero-anim .modal-icon svg{ width: 20px; height: 20px; }.hero-anim .modal-title{
    font-size: 15px;
    font-weight: 700;
    color: #19456B;
    margin-bottom: 8px;
    letter-spacing: -0.1px;
  }.hero-anim .modal-text{
    font-size: 12px;
    color: #8a94a0;
    line-height: 1.55;
    margin-bottom: 16px;
  }.hero-anim .modal-btn{
    display: inline-block;
    background: #E86A2A;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 22px;
    border-radius: 3px;
    cursor: default;
    letter-spacing: 0.2px;
  }.hero-anim .end-screen{
    position: absolute;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms ease;
    z-index: 60;
  }.hero-anim .end-screen.show{ opacity: 1; pointer-events: auto; }.hero-anim .end-logo{
    width: 260px;
    height: auto;
    display: block;
  }.hero-anim .end-cta{
    display: inline-block;
    background: #E86A2A;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: background .2s ease, transform .2s ease;
    box-shadow: 0 4px 14px rgba(232, 106, 42, 0.25);
  }.hero-anim .end-cta:hover{ background: #d35e22; transform: translateY(-1px); }.hero-anim .end-replay{
    font-size: 11px;
    color: #8a94a0;
    text-decoration: underline;
    cursor: pointer;
    letter-spacing: 0.1px;
    margin-top: 4px;
  }.hero-anim .end-replay:hover{ color: #19456B; }.hero-anim .cursor{
    position: absolute; left: 0; top: 0;
    width: 22px; height: 22px;
    pointer-events: none; z-index: 9999 !important;
    transform: translate(-50px, -50px);
    transition: transform 900ms cubic-bezier(.42,0,.2,1), opacity .3s ease;
    filter: drop-shadow(0 2px 3px rgba(10,30,60,.3));
  }.hero-anim .cursor.click{ transition: transform 140ms ease-out; }.hero-anim .click-ring{
    position: absolute; left: 0; top: 0;
    width: 22px; height: 22px;
    pointer-events: none; z-index: 9998 !important;
    border: 2px solid #2a6df4;
    border-radius: 50%;
    opacity: 0;
  }.hero-anim .click-ring.fire{ animation: ring .55s ease-out; }@keyframes ring{
    0%   { opacity: 1; transform: translate(var(--rx), var(--ry)) scale(.3); }
    100% { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(2.2); }
  }.hero-anim .ticker{ display: none; }

.hero-anim{background:transparent;}

/* Laptop-Mock auf schmalen Screens: rechte Haelfte der Musikleiste
   ("absenken bei Sprache um") ragt aus dem LCD — ausblenden.
   Muss HIER stehen (nach der .lhs/.rhs-Regel), sonst verliert die
   Regel bei gleicher Spezifitaet gegen das spaetere display:flex. */
@media(max-width:560px){
  .hero-anim .music-bar .rhs{display:none;}
}


/* ══ 2026-Zusaetze fuer den Joomla-Einbau ══════════════════════ */
/* Kein horizontaler Scroll — als clip, damit sticky/fixed leben
   (body overflow-x:hidden macht body zum Scroll-Container) */
html,body{overflow-x:clip;}
/* Topbar (08.08., werbespots-analog): Reseller links, Beratung mittig,
   Shop-Cluster rechts mit Icons. KEINE flex:1-Zonen — der Cluster ist mit
   Credits-Text breiter als die Gegenzone und brach sonst um (Andreas-
   Screenshot); wie werbespots: space-between + natuerliche Breiten. */
.topbar > div{align-items:center;}
.topbar .tb-right{display:flex;align-items:center;gap:1.4rem;white-space:nowrap;}
.topbar .tb-cart i{
  font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  min-width:1.2rem;height:1.2rem;padding:0 .3rem;margin-left:.35rem;border-radius:999px;
  background:var(--main-light);color:#fff;font-size:.66rem;font-weight:600;line-height:1;
  vertical-align:1px;
}
/* Leerer Warenkorb: kein 0-Badge (computed liefert dann leeren String) */
.topbar .tb-cart i:empty{display:none;}
/* Topbar-Hierarchie auf ZONEN-Ebene (Wort-Ebene flackerte grau/navy):
   links+Mitte = eine leise Grau-Familie (Links nur eine Nuance dunkler),
   Navy+Medium NUR fuer das Aktions-Cluster rechts → ein Tonwechsel pro Zeile */
/* 08.08.: Beratung links, Reseller mittig; Grautoene wie urspruenglich
   (Beratung leise gray-500/300 mit Navy-Links, Reseller gray-600/400) */
.topbar .tb-beratung,.topbar .tb-credits{color:var(--gray-500);font-weight:300;}
.topbar .tb-beratung a{color:var(--main-dark);font-weight:400;}
.topbar .tb-reseller{color:var(--gray-600);font-weight:400;}
.topbar .tb-guthaben,.topbar .tb-cart,.topbar .tb-account{color:var(--main-dark);font-weight:500;}
/* Hover muss NACH den Zonen-Farben stehen — gleiche Spezifitaet, Kaskade entschied sonst gegen ihn */
.topbar .tb-beratung a:hover,.topbar .tb-guthaben:hover,
.topbar .tb-cart:hover,.topbar .tb-account:hover,.topbar .tb-reseller:hover{color:var(--main-light);}
/* Shop-Cluster-Links mit Icon (data-URI, navy — analog werbespots-Topbar) */
.topbar .tb-guthaben,.topbar .tb-cart,.topbar .tb-account{display:inline-flex;align-items:center;gap:.4rem;}
.topbar .tb-guthaben::before,.topbar .tb-cart::before,.topbar .tb-account::before{
  content:"";flex:0 0 auto;width:1rem;height:1rem;
  background:no-repeat center/contain;
}
.topbar .tb-guthaben::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a4d7c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}
.topbar .tb-cart::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a4d7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h3l2.5 12a1.4 1.4 0 0 0 1.4 1.1h8.6a1.4 1.4 0 0 0 1.4-1.1L21.5 8H6.1'/%3E%3Ccircle cx='10' cy='20.3' r='1.5' fill='%230a4d7c' stroke='none'/%3E%3Ccircle cx='18' cy='20.3' r='1.5' fill='%230a4d7c' stroke='none'/%3E%3C/svg%3E");
}
.topbar .tb-account::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a4d7c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5'/%3E%3C/svg%3E");
}
@media(max-width:900px){
  .topbar .tb-credits{display:none;}
}
@media(max-width:760px){
  .topbar .tb-beratung{display:none;}
  .topbar > div{justify-content:center;}
}
/* ── Generator above the fold: Hero kompakt + Live-Tool-Karte ── */
.hero-gen{padding-top:clamp(1.5rem,3vw,2.5rem);}
.hero-gen-head{text-align:center;max-width:62rem;margin:0 auto 1.75rem;}
.hero-gen-head h1{margin-bottom:.7rem;text-wrap:balance;}
.hero-gen-sub{font-size:1.05rem;line-height:1.7;color:var(--main-dark);max-width:64ch;margin:0 auto;}
.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(8,145,194,.38),var(--card-shadow);
  overflow:hidden;
}
.gen-live-bar{
  display:flex;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;flex-wrap:wrap;
  background:linear-gradient(90deg,#083d63 0%,#0a4d7c 55%,#0d5a8f 100%);
  color:#fff;padding:.7rem 1.4rem;
}
.gen-live-live{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;
}
.gen-live-dot{
  width:.55rem;height:.55rem;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(63,224,176,.6);animation:gen-pulse 2s infinite;
}
@keyframes gen-pulse{
  0%{box-shadow:0 0 0 0 rgba(63,224,176,.6);}
  70%{box-shadow:0 0 0 .55rem rgba(63,224,176,0);}
  100%{box-shadow:0 0 0 0 rgba(63,224,176,0);}
}
.gen-live-hint{color:rgba(255,255,255,.85);font-size:.8rem;}
.gen-live-body{padding:1.25rem 1.5rem 1.5rem;}
/* Karten-Abstand unten = oben (08.08., Andreas): das Shadow-DOM des
   Generators bringt ~4.5rem eigenes padding-bottom mit (wrapper 2rem +
   konfigurator 2.5rem in styles_flow) — von aussen nicht stylbar, daher
   den Host hochziehen; .gen-live hat overflow:hidden und schneidet sauber.
   Desktop-only: mobil hat die Flow-CSS 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;}}
/* ── /generator-Kopf (08.08., analog werbespots.ai) ──────────────
   Ganzer Kopf lebt server-seitig in _content/generator.php:
   USP-Band (navy, Klassen von der Home) -> Hint-Pill (NEU) -> Kicker ->
   H1 -> Generator-Karte. Alt-Artikel 1 wurde per API entschlackt
   (Kicker/H1/Hinweis-Box raus) — die frueheren :has()-Order-Hacks
   sind damit obsolet und ENTFERNT. */
body.aai2026-sub.menu-102 #main_page_wrapper{display:flex;flex-direction:column;}
body.aai2026-sub.menu-102 .topbar{order:-5;}
body.aai2026-sub.menu-102 .nav-section{order:-4;}
body.aai2026-sub.menu-102 .usp-band{order:-3;}
body.aai2026-sub.menu-102 .gen-intro{order:-2;padding-top:1.6rem;padding-bottom:0;}
body.aai2026-sub.menu-102 .gen2026{order:-1;}
/* Intro linksbuendig im Sektions-Fluss (werbespots-Muster); H1 stylt das
   Haus-CSS (Zwei-Zeilen-Strong in teal) — bewusst NICHT ueberschrieben.
   Nur die 3rem-margin-top der alten h1-Regel kappen. */
.gen-intro h1{margin-top:0;}
/* Kopf linksbuendig auf gemeinsamer Kante (werbespots-Muster): H1 ohne width
   schrumpft in der alten Flex-Column-Sektion auf Textbreite und wirkt
   zentriert; die Leads zentriert sonst die Overlay-Absatzregel (margin:auto) */
body.aai2026-sub.menu-102 .gen-intro > h1{width:100%;}
/* :not(.slogan) nur fuer die Spezifitaet: die Overlay-Absatzregel
   (body.aai2026-sub .section > p:not(.slogan), margin:auto) steht spaeter
   in der Datei und gewann sonst den Kaskaden-Gleichstand. margin-left =
   Versatz der zentrierten Inhaltsspalte (NICHT 0 — das war die Padding-Kante) */
body.aai2026-sub.menu-102 .gen-intro > p:not(.slogan){
  margin-left:max(0px,calc((100% - var(--site-width))/2));
  margin-right:auto;
}
.gen-hint{display:flex;padding:0 0 1.1rem;}
.gen-hint-pill{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.85rem;color:var(--main-dark);
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  border:1px solid rgba(10,77,124,.14);border-radius:999px;
  /* links nur .42rem: NEU-Badge sitzt konzentrisch in der Pill-Rundung
     (Abstand links = Abstand oben/unten, Andreas 08.08.) */
  padding:.42rem 1.1rem .42rem .42rem;box-shadow:0 3px 12px rgba(10,77,124,.06);
}
.gen-hint-pill strong{color:var(--main-dark);font-weight:600;}
.gen-neu{
  background:linear-gradient(135deg,var(--main-light) 0%,var(--green) 100%);
  color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.06em;
  border-radius:99px;padding:.12rem .5rem;
}
/* CTO-Hover auf Overlay-Seiten (Login u. a.): altes .cto:hover macht
   background-color transparent + Text orange — der 2026-VERLAUF ist aber
   background-image und bleibt stehen -> orange auf orange. Text weiss halten. */
body.aai2026-sub a.cto:hover,
body.aai2026-sub button.cto:hover{color:#fff;}
/* Bewusst OHNE .section-Klasse: die alte style.css (Overlay-Modus) zentriert
   .section per Padding-Formel und schob die Karte aus der Flucht. Hier exakt
   dieselbe Kanten-Formel wie Topbar/Nav → buendig zur Site-Kante. */
.gen2026{
  display:block;
  /* padding unten = oben (Trustbar-Abstand .75 + 1.25 = Symmetrie, 08.08.) */
  padding:1.25rem max(var(--sect-x),calc((100% - var(--site-width))/2)) 1.25rem;
}
.gen2026 .gen-live{max-width:var(--site-width);margin:0 auto;}
/* Preis-Teaser-Kopf, pt2026-* (umbenannt wegen Alt-CSS-Head-Injection-
   Kollision; Alt-Klartext-Namen hier NICHT nennen — die Strip-Regex unten
   frisst sonst Kommentar UND die folgende Regel) */
.pt2026-h2{text-align:center;margin:0 auto 1rem;}
.pt2026-sub{color:var(--gray-600);text-align:center;max-width:46rem;margin:0 auto 2rem;}
/* ── Overlay-Seiten (07.08., Andreas-Feedback /preise) ────────────
   Absatzblock mittig: .section > * zentriert alles per margin:auto,
   die Offset-Formel fuer > p riss Absaetze nach links aus der Flucht */
body.aai2026-sub .section > p:not(.slogan){margin-left:auto;margin-right:auto;}
/* Rechnung-Sektion hat zentrierten Kopf → Text ebenfalls mittig */
body.aai2026-sub #rechnung ~ p{text-align:center;}
/* Overlay-Schrumpf-Falle (08.08., /vorlagen): alte .section ist
   display:flex column — die 2026-Kindregel margin-inline:auto laesst
   Flex-Kinder dadurch auf Inhaltsbreite schrumpfen (details-Akkordeons
   je nach Textlaenge verschieden schmal). NUR details strecken —
   div/ul standen kurz mit drin und zerlegten /preise (die Seite wurde
   MIT dem Schrumpf-Verhalten abgenommen, Iteration 4–9). */
body.aai2026-sub .section > details{width:100%;}
/* Alt-Klasse .cto.secondary: bekam Prototyp-Verlauf + altes Orange als
   Textfarbe = unlesbar. Als 2026-Ghost-Button ausfuehren. */
body.aai2026-sub .cto.secondary{background:transparent;color:var(--main-dark);border:1px solid var(--main-dark);box-shadow:none;}
body.aai2026-sub .cto.secondary:hover{background:rgba(8,145,194,.05);color:var(--main-light);border-color:var(--main-light);}
/* Alt-Varianten .cto.tertiary/.quaternary (08.08., Kundenkonto "Download"/
   "Als Vorlage laden"): die alten Regeln setzen nur background-COLOR plus
   blaue Schrift/Border — das 2026-Gradient ist ein background-IMAGE und
   bleibt darunter sichtbar = Blau auf Orange. Voller CTA-Look, inkl. Hover. */
body.aai2026-sub a.cto.tertiary,body.aai2026-sub button.cto.tertiary,
body.aai2026-sub a.cto.quaternary,body.aai2026-sub button.cto.quaternary{
  background:var(--cta-grad);color:#fff;border-color:transparent;}
body.aai2026-sub a.cto.tertiary:hover,body.aai2026-sub button.cto.tertiary:hover,
body.aai2026-sub a.cto.quaternary:hover,body.aai2026-sub button.cto.quaternary:hover{
  background:var(--cta-grad);color:#fff;border-color:transparent;}
/* Doppel-Flamme "Member of BrennerMedienGruppe" (08.08., Footer): altes CSS
   rendert die Font-Glyphe 06d als ::before ZUSAETZLICH zum 2026-SVG. */
i.brennermedien::before{content:none !important;}
/* Karten-Icons auf Overlay-Seiten: alte FontAwesome-Glyphe (::before) und
   neues SVG-Background renderten DOPPELT. Glyphe nur dort abschalten, wo
   ein 2026-SVG existiert — plus zwei fehlende Icons (file, music) ergaenzt. */
body.aai2026-sub .contentbox_text > i.voicemail::before,
body.aai2026-sub .contentbox_text > i.world::before,
body.aai2026-sub .contentbox_text > i.volume::before,
body.aai2026-sub .contentbox_text > i.convert::before,
body.aai2026-sub .contentbox_text > i.clock::before,
body.aai2026-sub .contentbox_text > i.euro::before,
body.aai2026-sub .contentbox_text > i.coins::before,
body.aai2026-sub .contentbox_text > i.comment::before,
body.aai2026-sub .contentbox_text > i.package::before,
body.aai2026-sub .contentbox_text > i.einfach::before,
body.aai2026-sub .contentbox_text > i.account::before,
body.aai2026-sub .contentbox_text > i.pin::before,
body.aai2026-sub .contentbox_text > i.card::before,
body.aai2026-sub .contentbox_text > i.shield::before,
body.aai2026-sub .contentbox_text > i.file::before,
body.aai2026-sub .contentbox_text > i.music::before{content:none;}
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='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6V3z'/%3E%3Cpath d='M14 3v4h4'/%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='%230891c2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V6l8-2v12'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='15' cy='16' r='2'/%3E%3C/svg%3E");}
/* Karten-Icons zu weit oben (07.08., /preise): altes CSS gibt
   .contentbox_text i height:5rem + margin-top:-1.5rem (Glyphe war im
   Flex zentriert) — zieht unsere 2.3rem-SVG-Box nach oben. */
body.aai2026-sub .contentbox_text > i{margin-top:0;height:2.3rem;}
/* ul.check auf Overlay-Seiten (08.08., /reseller): das alte CSS
   (.section[role=content] ul...) gewinnt fast alles per Spezifitaet —
   (a) FA-Glyphe 00c rendert UEBER dem 2026-Border-Haken (Doppel-Icon),
   (b) margin-left:-1.3rem schiebt auch die absolute ::before-Box nach
   links AUS der Inhaltsspalte raus ("Haekchen zu weit links"),
   (c) width:1.3rem verzerrt den Border-Haken.
   Daher komplette Geometrie mit (0,4,4) uebernehmen: */
body.aai2026-sub .section[role=content] ul.check li{padding-left:1.6rem;}
body.aai2026-sub .section[role=content] ul.check li::before{
  content:"" !important;
  margin:0;padding:0;width:.6em;height:.32em;left:.1rem;
}
/* /preise Rechner (08.08.): Die H2 bekam vom 2026-Basis-h2 max-width:30ch
   und klebte links im Block ("nicht mittig") — Box zentrieren. Der Rechner
   selbst lief auf site-width raus und stand breiter als die Tabellen-Flucht. */
body.aai2026-sub .aai-pt-h2,
body.aai2026-sub .aai-calc-h2{margin-left:auto;margin-right:auto;}
body.aai2026-sub .modul.aai-calc{max-width:70rem;}
/* Account-Submenu (08.08., "Guthaben aufladen gequetscht"): 2026 hatte hier
   keine Regeln — alte Chevron-Glyphen + Quetsch-Layout erbten. Als Pill-
   Zeile ausfuehren, nowrap + Luft. */
body.aai2026-sub .section-mein-konto ul.mod-menu{
  display:flex;flex-wrap:wrap;gap:.5rem .65rem;justify-content:center;
  padding:0;margin:0 auto;
}
body.aai2026-sub .section-mein-konto ul.mod-menu li{margin:0;padding:0;}
body.aai2026-sub .section-mein-konto ul.mod-menu li::before{content:none !important;}
body.aai2026-sub .section-mein-konto ul.mod-menu a{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:.4rem 1.1rem;border-radius:999px;background:#fff;
  border:1px solid rgba(10,77,124,.16);color:var(--main-dark);
  font-weight:500;font-size:.85rem;
}
body.aai2026-sub .section-mein-konto ul.mod-menu a:hover{border-color:var(--main-light);color:var(--main-light);}
/* Leistungs-Listen (ul.liste-plus, 07.08., /preise): alte Glyphen-Regel
   (Badge-Zeichen, per CSS-Nesting hoehere Spezifitaet) rendert im SELBEN
   ::before wie der 2026-Haken -> Badge und Haken uebereinander.
   Glyphe hart abschalten, nur der 2026-Haken bleibt. */
body.aai2026-sub ul.liste-plus li::before{
  content:"" !important;font-family:inherit !important;
  display:block !important;margin:0 !important;
  position:absolute;left:.1rem;top:.55em;
  width:.6em !important;height:.32em;
  border-left:2px solid var(--green-tx);border-bottom:2px solid var(--green-tx);
  transform:rotate(-45deg);
}
/* Versions-Kennung im Footer */
.proto-version{opacity:.45;font-size:.7rem;}
/* Lade-Curtain (Popup) minimal gestylt, falls er im Preview aufgeht */
.curtain__dialogbox{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);}