/* ==================================================================
   NEO MAKLER · site-ext.css
   v14: MOBILE, LESBARKEIT, GEO & STRUKTUR (24.09.2026)
   Wird auf jeder Seite als LETZTES Stylesheet geladen und ergänzt
   site.css, layout-*.css und seiteneigene <style>-Blöcke gezielt.
   Tokens (:root) bleiben unverändert – hier werden nur vorhandene
   Tokens anders zugeordnet. Neue globale Regeln als neuen Block
   mit Versionsmarker unten anhängen.
   ================================================================== */

/* ---- 1 · Kurzantwort-Boxen (GEO) ----------------------------------
   Waren nur auf Startseite, Über uns und im Blog gestylt; auf acht
   Themenseiten erschienen sie als unformatierter Fließtext. */
.geo-answer{border:1px solid rgba(229,150,67,.4);background:rgba(229,150,67,.05);padding:20px 22px;margin:0 0 30px;max-width:780px}
.geo-answer .ga-t{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.22em;color:var(--ember);margin-bottom:9px;text-transform:uppercase}
.geo-answer p{color:var(--ink);font-size:1rem;line-height:1.65;margin:0}

/* ---- 2 · Lesbarkeit: relevante Kleintexte auf Ink Dim --------------
   Ink Faint (#5E7692) erreicht auf Void nur 3,95:1 (WCAG AA: 4,5:1).
   Einschränkungen („bis zu“), Kleingedrucktes, Formular-, Einwilligungs-
   und Rechtstexte, Quellen und Tabellenköpfe nutzen deshalb Ink Dim
   (7,6:1). Rein dekorative HUD-Labels bleiben Ink Faint. */
.upto,.hero-fine,.hero-note,.page-hero .note,.pay .fine,.courtage-note,.courtage .sub,.courtage th,
table.cmp thead th,table.cmp .no,.src-note,.src-note a,.markt .mk .src,.markt .mk .src a,
.calc-note,.cr-formula,.cr-label,.cfield label,.field label,.lab-opt,.consent,.form-note,.form-trust,
.ck-note,.bl-note,.cmp-note,.crumbs,.legal,.foot-claim,.pr-item .d,.quote .who .wtxt span,
.case .c-col b,.related .r-t,.bmeta,.art-meta,.tline .v small,.cr-cmp-fine,
.pg-title,.group-cap,.cmp .tag{color:var(--ink-dim)}

/* ---- 3 · Mobile Mindestgrößen (≤ 680 px) ---------------------------
   Mono-Labels ≥ 11 px, Text-Links und Kleingedrucktes ≥ 12 px.
   Nur Elemente, die mobil sonst kleiner wären – nichts wird verkleinert. */
@media (max-width:680px){
  .sec-link,.calc-cta,.bread,.hub .hub-go,.pcard a,.legal,.hero-fine,.field label,.cfield label,.form-note{font-size:.75rem}
  .crumbs,.upto,.cr-label,.foot h2,.geo-answer .ga-t,.bmeta,.art-meta .bchip,.bchip,.form-trust,.ck-note,
  .markt .mk .src,table.cmp thead th,.dkm-grid .dk .k,.case .c-col b,.rcard .rc-c,.bio .b-tag,
  .factbox .fb-t,.related .r-t,.hub .hub-k{font-size:.7rem}
  .legal{letter-spacing:.08em}
}

/* ---- 4 · Touch-Ziele ≥ 44 px (Touch-Geräte) ------------------------
   Text-Links behalten ihr Aussehen; eine unsichtbare Fläche vergrößert
   den Tippbereich. Bedienelemente wachsen direkt. */
@media (pointer:coarse){
  .sec-link,.calc-cta,.bread,.crumbs a,.loc .l a,.foot .adr a,.sk,.pcard>a{position:relative}
  .sec-link::after,.calc-cta::after,.bread::after,.crumbs a::after,
  .loc .l a::after,.foot .adr a::after,.sk::after,.pcard>a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .foot ul{gap:0}
  .foot ul a{display:block;padding:11px 0}
  .cr-cmp-row input,.cfield input[type=number]{min-height:44px}
  input[type=range]::-webkit-slider-thumb{width:26px;height:30px}
  input[type=range]::-moz-range-thumb{width:26px;height:30px}
  .consent input[type=checkbox]{width:22px;height:22px;flex-shrink:0}
}

/* ---- 5 · Mobil-Menü: ganze Höhe, scrollbar, CTA als Button ---------
   Vorher endete es auf 667-px-Displays (iPhone SE) unterhalb des
   Bildschirms – „FAQ“ und „Erstgespräch“ waren nicht erreichbar.
   Höhe über dvh statt bottom:0: #header hat backdrop-filter und ist
   damit Bezugsrahmen für position:fixed. */
@media (max-width:680px){
  .mobile-menu{height:calc(100vh - 76px);height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:var(--void);padding:8px 24px calc(28px + env(safe-area-inset-bottom))}
  .mobile-menu.open{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-content:start}
  .mobile-menu a{grid-column:1/-1}
  .mobile-menu a.mm-sub{grid-column:auto;font-family:var(--f-body);font-weight:500;font-size:.95rem;color:var(--ink-dim);padding:13px 0}
  .mobile-menu a.mm-sub[aria-current="page"]{color:var(--signal)}
  .mobile-menu a.mm-cta,.mobile-menu a.mm-cta:last-child{display:flex;justify-content:center;align-items:center;margin-top:20px;
    padding:15px 18px;border:none;background:var(--ember);color:var(--void);text-transform:uppercase;letter-spacing:.05em;
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
  html.mm-open{overflow:hidden}
}

/* ---- 6 · Sticky-CTA verdeckt das Seitenende nicht mehr -------------
   Die Leiste (76 px) lag über der Rechtszeile „Erlaubnis nach § 34d“. */
@media (max-width:680px){
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ---- 7 · Footer mit Ressourcen-Spalte ------------------------------ */
.foot-grid{grid-template-columns:1.2fr .8fr .8fr 1fr .8fr;gap:36px}
@media (max-width:1020px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-logo{grid-column:1/-1}
}
@media (max-width:680px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px 20px}
  .foot-logo,.foot-kontakt,.foot-recht{grid-column:1/-1}
}

/* ---- 8 · Schmale Displays (320 px): lange Komposita brechen um ------ */
.sparten>*,.agenda>li,.agenda>li>div{min-width:0}
p,li,dd,td{overflow-wrap:break-word}
@media (max-width:680px){
  .sparte h3,.agenda b{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
}

/* ---- 9 · Tastatur & Screenreader: „Direkt zum Inhalt“ auf allen Seiten ----
   Gab es bisher nur auf Blog- und Rechtsseiten (layout-2/-3). */
.skip{position:absolute;left:-9999px;top:0;background:var(--ember);color:var(--void);padding:10px 18px;z-index:300;font-family:var(--f-mono)}
.skip:focus{left:12px;top:12px}

/* ---- 10 · Hero-CTAs auf Unterseiten (z. B. /dkm/) ------------------ */
.page-hero .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
@media (max-width:680px){
  .page-hero .hero-ctas .btn{width:100%;justify-content:center}
}

/* ---- 11 · Konditionen-Tabelle mobil als Zeilenkarten ---------------
   Vorher 556 px breit bei 280–375 px Platz: die Spalte „Laufend“ lag
   ohne Hinweis rechts außerhalb. Jetzt: Sparte oben, darunter
   Abschluss | Laufend. Kopfzeile bleibt für Screenreader erhalten. */
@media (max-width:680px){
  table.courtage,.courtage tbody{display:block;width:100%;overflow:visible}
  .courtage thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .courtage tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 16px;padding:14px 4px;border-bottom:1px solid var(--line-soft)}
  .courtage tbody tr:last-child{border-bottom:none}
  .courtage td,.courtage th,.courtage .upto{white-space:normal}
  .courtage tbody td{display:block;padding:0;border:none}
  .courtage tbody td.sp{grid-column:1/-1}
  .courtage tr td:first-child{border-left:none}
  .courtage tbody td:nth-child(2)::before,.courtage tbody td:nth-child(3)::before{display:block;font-family:var(--f-mono);
    font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px}
  .courtage tbody td:nth-child(2)::before{content:"Abschluss"}
  .courtage tbody td:nth-child(3)::before{content:"Laufend"}
}

/* ---- 12 · Modellvergleich (/vergleich/) mobil ----------------------
   5 Spalten brauchen seitliches Wischen: Hinweis einblenden und die
   Kriterienspalte beim Wischen stehen lassen. */
@media (max-width:680px){
  .tbl-scroll::before{content:"// Tabelle seitlich wischen →";display:block;font-family:var(--f-mono);font-size:.7rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
  table.cmp th:first-child,table.cmp td:first-child{position:sticky;left:0;z-index:1;background:var(--void);
    min-width:118px;max-width:130px;box-shadow:1px 0 0 var(--line);hyphens:auto;-webkit-hyphens:auto}
}

/* ---- 13 · Footer-Spaltentitel als <h2> -----------------------------
   Vorher <h4> direkt nach <h2>-Abschnitten (Sprung in der Überschriften-
   Hierarchie). Aussehen wie bisher; Mono in 500 statt künstlichem Fett. */
.foot h2{font-family:var(--f-mono);font-size:.66rem;font-weight:500;line-height:1.65;letter-spacing:.24em;
  text-transform:uppercase;color:var(--signal);margin-bottom:18px}
@media (max-width:680px){.foot h2{font-size:.7rem}}

/* ---- 14 · Team-Bio: Name im Overlay ist Wiederholung, keine Überschrift -- */
.bio .b-name{font-family:var(--f-display);font-size:1rem;font-weight:700;color:var(--ink);line-height:1.65}

/* ---- 15 · Mobile Mindestgrößen, Nachtrag ---------------------------
   DKM-Band (Link, QR-Zielgruppe!), Artikel-Metazeile mit Datum,
   Glossar-/Fallbeispiel-Labels, „bis zu“ in der Hero-Konsole u. a. */
@media (max-width:680px){
  .ribbon,.art-meta,.gl dt .k,.case .c-k,.cmp .tag,.tline .v small,.member .role,.loc .l .k{font-size:.7rem}
  .art-meta{gap:4px 10px;letter-spacing:.1em}
}

/* ==================================================================
   v15: INTERAKTIVES HEXAGON-FELD (Startseiten-Hero, 25.09.2026)
   Canvas hinter dem Hero-Inhalt, Logik in /assets/js/hexfield.js.
   Nur Desktop mit Maus; mobil und bei reduzierter Bewegung ausgeblendet.
   ================================================================== */
.hero{overflow:hidden}
.hero > .wrap{position:relative;z-index:1}
.hexfield{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background-size:100% 100%}
@media (max-width:1020px),(pointer:coarse),(prefers-reduced-motion:reduce){.hexfield{display:none}}

/* ==================================================================
   v16: STARTSEITE VERKAUFSPSYCHOLOGISCH VERDICHTET (25.09.2026)
   Kernargumente auf der Startseite, Tiefe auf den Unterseiten.
   ================================================================== */
/* Vorteilskarten: ganze Karte ist der Link zur Vertiefung */
.adv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px}
.adv{display:flex;flex-direction:column;gap:10px;padding:26px 24px;text-decoration:none;color:inherit;
  background:rgba(17,38,62,.45);border:1px solid var(--line-soft);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  transition:border-color .25s,background .25s,transform .25s}
.adv:hover,.adv:focus-visible{border-color:rgba(0,230,230,.35);background:rgba(22,48,76,.6);transform:translateY(-3px)}
.adv-k{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--signal)}
.adv h3{font-size:1.2rem;line-height:1.2;color:var(--ink)}
.adv p{color:var(--ink-dim);font-size:.94rem;line-height:1.6;margin:0}
.adv-go{margin-top:auto;padding-top:6px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ember)}
.adv:hover .adv-go{color:var(--ember-hot)}
#vorteile .geo-answer{margin:0 0 28px!important}
/* Im selben Boot */
.boot-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:6px 0 22px}
.boot-p{display:flex;align-items:center;gap:14px;margin:0}
.boot-p img{width:64px;height:64px;object-fit:cover;object-position:50% 20%;flex-shrink:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.boot-p figcaption{display:flex;flex-direction:column;gap:3px}
.boot-p b{font-family:var(--f-display);font-weight:600;color:var(--ink)}
.boot-p span{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.boot-facts{font-size:.72rem;letter-spacing:.12em;color:var(--ink-dim);text-transform:uppercase}
.boot-facts b{color:var(--signal);font-weight:500}
/* Ausstieg */
.exit-box{margin-top:26px;padding:20px 22px;border:1px solid var(--line);background:rgba(0,230,230,.03);max-width:860px}
.exit-box p{margin:8px 0 0;color:var(--ink-dim)}
.exit-box p b{color:var(--ink)}
.exit-box .exit-fine{font-size:.78rem}
@media (max-width:1020px){
  .adv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .boot-team{grid-template-columns:1fr}
}
@media (max-width:680px){
  .adv-grid{grid-template-columns:1fr;gap:12px}
  .adv{padding:20px 18px;gap:8px}
  .adv h3{font-size:1.08rem}
  .adv-k,.adv-go{font-size:.7rem}
  .boot-p span{font-size:.7rem}
  /* Hero kompakt: Konsole ist Desktop-Signatur, Zahlen stehen in den Kennzahlen */
  .hero .term{display:none}
  .hero{padding:118px 0 56px}
  .hero-grid{gap:0}
  .hero ~ section{padding:60px 0}
}
/* Statische Vorteilskarten (z. B. /wechsel/#sicherheit) */
.adv-grid.adv-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.adv-static:hover{transform:none;border-color:var(--line-soft);background:rgba(17,38,62,.45)}
@media (max-width:680px){.adv-grid.adv-2{grid-template-columns:1fr}}
/* v16 · Startseite mobil verdichten (Inhalte bleiben, nur kompakter) */
@media (max-width:680px){
  #vergleich .compare{grid-template-columns:1fr 1fr;gap:10px}
  #vergleich .cmp-neo{grid-column:1/-1}
  #vergleich .cmp{padding:18px 14px}
  #vergleich .cmp h3{font-size:.9rem}
  #vergleich .cmp li{font-size:.82rem;padding-left:18px}
  #vorteile .adv-grid{grid-template-columns:1fr 1fr;gap:10px}
  #vorteile .adv{padding:16px 14px;gap:6px}
  #vorteile .adv p{display:none}
  #vorteile .adv h3{font-size:.98rem;hyphens:auto;-webkit-hyphens:auto}
  #vorteile .geo-answer{padding:16px 16px}
  #vorteile .geo-answer p:not(.ga-t){font-size:.94rem}
  #prozess .steps{gap:10px}
  #prozess .step{padding:18px 16px}
  .hero ~ #kontakt .loc{display:none}
  .hero ~ #courtagen .cr-badges,.hero ~ #courtagen .res-cta + .calc-cta{display:none}
}
@media (max-width:680px){
  .cmp-note{display:block}
  .cmp-note::before{margin-right:8px}
  #prozess .step{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
  #prozess .step .s-num{font-size:1.3rem;grid-row:1 / span 2}
  #prozess .step h3{margin:0 0 4px}
  #prozess .step p{font-size:.9rem;margin:0}
}
@media (max-width:680px){
  .hero ~ #vergleich .sec-head > p{display:none}
  .hero ~ #produktgeber{display:none} /* v20: nur Startseite – auf /netzwerk/ bleibt das Register sichtbar */
}
@media (max-width:680px){
  #vorteile .wrap{display:flex;flex-direction:column}
  #vorteile .adv-grid{order:1}
  #vorteile .geo-answer{order:2;margin:22px 0 0!important}
}
.cmp-note{display:block}
.cmp-note::before{margin-right:8px}

/* ==================================================================
   v17: KERNBOTSCHAFT, 90 = 100, LESEFLUSS (25.09.2026)
   ================================================================== */
/* Hero: Kernaussage als eigene Zeile */
.hero-lead{font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.22;
  color:var(--ink);margin:24px 0 14px;text-wrap:balance}
.hero-lead span{color:var(--ink-dim)}
/* Bänder: abwechselnde Flächen gliedern die Startseite */
.band{background:linear-gradient(180deg,rgba(17,38,62,.55),rgba(17,38,62,.22));border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
/* 90 = 100: Vergleichsbalken */
.eq{--lab:230px;--pad:26px;position:relative;display:grid;gap:18px;margin:6px 0 24px;padding:30px var(--pad);
  border:1px solid var(--line);background:rgba(10,20,32,.55);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.eq-row{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:center;gap:18px}
.eq-l{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.eq-bar{display:flex;height:48px;background:rgba(0,230,230,.035)}
.eq-seg{display:flex;align-items:center;padding:0 14px;min-width:0;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.eq-solo{background:rgba(147,169,194,.14);box-shadow:inset 0 0 0 1px rgba(147,169,194,.45);color:var(--ink)}
.eq-you{background:var(--ember);color:var(--void);font-weight:500}
.eq-neo{background:rgba(0,230,230,.22);color:var(--signal);justify-content:center;padding:0}
.eq-mark{position:absolute;top:18px;bottom:8px;
  left:calc(var(--pad) + var(--lab) + 18px + (100% - 2 * var(--pad) - var(--lab) - 18px) * .9);
  border-left:1px dashed var(--signal);pointer-events:none}
.eq-mark span{position:absolute;bottom:-2px;left:8px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);white-space:nowrap;transform:translateX(-100%) translateX(-16px)}
.eq-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.eq-facts div{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--line)}
.eq-facts b{font-family:var(--f-display);font-weight:600;color:var(--ink)}
.eq-facts span{color:var(--ink-dim);font-size:.9rem;line-height:1.5}
.eq-fine{margin-top:16px;font-size:.78rem;color:var(--ink-dim)}
/* CTA-Band in der Seitenmitte */
.cta-band-in{text-align:center;padding:48px 32px;border:1px solid rgba(229,150,67,.45);
  background:radial-gradient(600px 220px at 50% 0%,rgba(229,150,67,.10),transparent 70%),rgba(17,38,62,.45);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.cta-band-in h2{margin:10px 0 12px}
.cta-band-in p:not(.adv-k){color:var(--ink-dim);max-width:560px;margin:0 auto}
.cta-band-in .hero-ctas{justify-content:center;margin-top:24px}
@media (max-width:1020px){.eq{--lab:170px}}
@media (max-width:680px){
  .eq{--pad:16px;padding:22px var(--pad) 36px;gap:14px}
  .eq-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .eq-bar{height:42px}
  .eq-seg{font-size:.68rem;padding:0 10px}
  .eq-mark{top:44px;bottom:26px;left:calc(var(--pad) + (100% - 2 * var(--pad)) * .9)}
  .eq-mark span{bottom:-20px;font-size:.62rem}
  .eq-facts{grid-template-columns:1fr;gap:10px}
  .cta-band-in{padding:30px 18px}
  .cta-band-in .hero-ctas .btn{width:100%;justify-content:center}
  .hero-lead{margin:18px 0 10px}
}
@media (max-width:680px){.eq-neo span{display:none}.hero-note{display:none}}
@media (max-width:680px){#vergleich .compare{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#vergleich .cmp{min-width:0}}
@media (max-width:680px){#vorteile .adv-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.adv{min-width:0}.adv-k,.adv-go{letter-spacing:.14em}}

/* ==================================================================
   v18: HIGH-END-FEINSCHLIFF, MOBILES HEXAGON-FELD, TOOLS (25.09.2026)
   ================================================================== */
/* Hexagon-Feld jetzt auch mobil (ruhiger Lichtpunkt, Logik in hexfield.js) */
@media (max-width:1020px),(pointer:coarse),(prefers-reduced-motion:reduce){.hexfield{display:block}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--void))}

/* Atmosphäre: Hexagon-Raster driftet kaum merklich, Körnung gegen „flache“ Flächen */
.atmo::before{inset:-90px 0 0 0;animation:hexdrift 60s linear infinite;will-change:transform}
@keyframes hexdrift{to{transform:translate3d(0,90px,0)}}
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media print{body::after{display:none}}

/* Presse: Originalfarben auf einheitlichen hellen Kacheln mit Eckschnitt */
.press-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;max-width:980px;margin:0 auto;padding:8px 0 4px}
.press-strip img{width:100%;height:58px;object-fit:contain;padding:10px 14px;background:#fff;opacity:1;filter:none;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:0 0 0 1px rgba(0,230,230,.18);transition:transform .3s cubic-bezier(.2,.7,.3,1),filter .3s}
.press-strip img:hover{transform:translateY(-3px);filter:drop-shadow(0 6px 18px rgba(0,230,230,.28))}
@media (max-width:1020px){.press-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.press-strip{gap:8px}.press-strip img{height:46px;padding:8px 10px}}

/* Karten: Lichtkegel folgt dem Zeiger (Variablen setzt site.js) */
.spot{position:relative}
.spot-l{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .35s;mix-blend-mode:screen;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0),rgba(0,230,230,.1),transparent 62%)}
.spot-l.is-ember{background:radial-gradient(340px circle at var(--mx,50%) var(--my,0),rgba(229,150,67,.13),transparent 62%)}
.spot:hover > .spot-l{opacity:1}

/* Kennzahlen: Glanzkante beim Einblenden */
.stats{position:relative;overflow:hidden}
.stats::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(0,230,230,.08),transparent);transform:skewX(-18deg)}
.stats.on::after{animation:statsweep 2.4s .6s cubic-bezier(.4,0,.2,1) both}
@keyframes statsweep{to{left:130%}}

/* 90 = 100: Balken fahren beim Einblenden aus */
.eq .eq-bar{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.2,.7,.3,1)}
.eq .eq-row:nth-of-type(2) .eq-bar{transition-delay:.35s}
.eq.on .eq-bar{clip-path:inset(0 0 0 0)}
.eq .eq-mark{opacity:0;transition:opacity .6s 1.3s}
.eq.on .eq-mark{opacity:1}
.eq-you{box-shadow:0 0 24px rgba(229,150,67,.35)}

/* Bänder: Hexagon-Ornament an der Kante */
.band{position:relative;overflow:hidden}
.band::before{content:"";position:absolute;top:0;right:0;width:420px;height:320px;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%2300E6E6' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M26 0v30M26 30L0 45v30l26 15M26 30l26 15v30L26 90'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(closest-side at 100% 0,#000,transparent);mask-image:radial-gradient(closest-side at 100% 0,#000,transparent)}
.band > .wrap{position:relative;z-index:1}
.cta-band-in{position:relative;overflow:hidden}
.cta-band-in::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  background:radial-gradient(520px 200px at 50% 0,rgba(229,150,67,.14),transparent 70%)}
.cta-band-in > :not(.spot-l){position:relative;z-index:1}

/* Hero: Headline-Akzent atmet, Primär-Button glänzt auch ohne Hover (Touch) */
.hero h1 .hl{animation:lineup .7s .4s cubic-bezier(.2,.7,.3,1) both,hlglow 5s 1.6s ease-in-out infinite}
@keyframes hlglow{50%{text-shadow:0 0 52px rgba(255,138,0,.55)}}
@media (hover:none){.hero-ctas .btn-primary::before,.cta-band-in .btn-primary::before{animation:btnshine 6s 2.4s ease-in-out infinite}}
@keyframes btnshine{0%,72%{left:-80%}100%{left:125%}}

/* Fußnoten am Seitenende */
.page-notes{max-width:880px;margin:0 auto;padding:26px 0 44px;border-top:1px solid var(--line-soft);
  font-size:.8rem;line-height:1.6;color:var(--ink-dim)}

/* Formular: Prototyp-Hinweis weg, sobald ein Dienst aktiv ist; Fehlermeldung */
#contactForm.is-live .proto-note{display:none}
.form-error{grid-column:1/-1;margin:4px 0 0;padding:12px 14px;border:1px solid rgba(229,150,67,.5);color:var(--ink);font-size:.9rem}
.form-error a{color:var(--signal)}

@media (prefers-reduced-motion:reduce){
  .eq .eq-bar{clip-path:none!important}.eq .eq-mark{opacity:1!important}
  .atmo::before{animation:none!important}
}

/* ==================================================================
   v19: PRODUKTWELT & CROSS-SELLING (/produktwelt/, Startseite #produktwelt, 25.09.2026)
   ================================================================== */
.pw-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:8px}
.pw-tile{display:flex;flex-direction:column;gap:8px;padding:20px 16px;text-decoration:none;color:inherit;
  border:1px solid var(--line-soft);background:rgba(17,38,62,.45);min-width:0;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:border-color .25s,background .25s,transform .25s}
.pw-tile:hover,.pw-tile:focus-visible{border-color:rgba(0,230,230,.4);background:rgba(22,48,76,.65);transform:translateY(-3px)}
.pw-tile .hexi{width:40px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--signal);
  background:rgba(0,230,230,.08);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.pw-tile .hexi svg{width:18px;height:18px}
.pw-tn{font-family:var(--f-display);font-weight:600;font-size:1rem;line-height:1.2;color:var(--ink);hyphens:auto;-webkit-hyphens:auto}
.pw-td{font-size:.84rem;line-height:1.45;color:var(--ink-dim)}
.pw-sp{scroll-margin-top:80px}
.pw-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}
.pw-main h2{margin:6px 0 14px}
.pw-txt{color:var(--ink-dim);font-size:1.02rem;line-height:1.75;max-width:620px}
.pw-txt b{color:var(--ink);font-weight:600}
.pw-kond{margin-top:22px;padding:14px 16px;border-left:2px solid var(--ember);background:rgba(229,150,67,.06);
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;color:var(--ink);max-width:620px}
.pw-kond span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px}
.pw-res{margin-top:22px;padding:16px 18px;border:1px solid var(--line);background:rgba(0,230,230,.04);max-width:620px}
.pw-res ul{list-style:none;display:grid;gap:8px;margin-top:10px}
.pw-res li{position:relative;padding-left:20px;color:var(--ink-dim);font-size:.92rem}
.pw-res li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:9px;background:var(--signal);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.pw-card .hx-in{padding:26px 24px}
.pw-list{list-style:none;display:grid;gap:10px;margin-top:14px}
.pw-list li{position:relative;padding-left:22px;color:var(--ink);font-size:.95rem;line-height:1.45}
.pw-list li::before{content:"◆";position:absolute;left:0;top:1px;color:var(--ember);font-size:.7rem}
.pw-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:10px}
.pw-step{position:relative;padding:24px 22px;border:1px solid var(--line-soft);background:rgba(17,38,62,.4)}
.pw-sn{font-family:var(--f-mono);font-size:1.6rem;color:var(--signal);text-shadow:0 0 18px rgba(0,230,230,.35)}
.pw-step h3{font-size:1.1rem;margin:8px 0 8px}
.pw-step p{color:var(--ink-dim);font-size:.93rem;line-height:1.6}
.pw-step:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);color:var(--ember);z-index:1}
.pw-anls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pw-anl{padding:20px 20px 18px;border:1px solid var(--line-soft);background:rgba(10,20,32,.5)}
.pw-anl h3{font-size:1rem;margin-bottom:12px;color:var(--ink)}
.pw-anl .cross{border:none;padding:0;background:none}
.pw-note{margin-top:22px;color:var(--ink-dim);font-size:.92rem;max-width:780px}
/* Startseite: Produktwelt-Kachelband */
#produktwelt .pw-tiles{margin-top:22px}
#produktwelt .cross{margin-top:14px}
@media (max-width:1020px){
  .pw-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pw-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .pw-steps{grid-template-columns:minmax(0,1fr)}
  .pw-step:not(:last-child)::after{content:"↓";right:auto;left:24px;top:auto;bottom:-15px;transform:none}
}
@media (max-width:680px){
  .pw-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pw-tile{padding:14px 12px;gap:6px}
  .pw-tile .hexi{width:34px;height:38px}
  .pw-tn{font-size:.92rem}
  .pw-td{font-size:.78rem}
  .pw-anls{grid-template-columns:minmax(0,1fr)}
  .pw-card .hx-in{padding:20px 18px}
  .pw-list{gap:8px}
  .pw-list li{font-size:.92rem}
  .pw-kond{font-size:.76rem}
  .pw-kond span{font-size:.7rem}
}
a.sparte{display:block;text-decoration:none;color:inherit}
a.sparte:focus-visible{border-color:rgba(229,150,67,.5)}
@media (max-width:680px){#produktwelt .cross{padding:14px;gap:6px}#produktwelt .cross span{font-size:.78rem;padding:5px 9px}}
/* v19: Navigation mit 7 Punkten – Menü-Button schon unter 1020 px (Tablet), vorher lief die Leiste bei 768 px über */
@media (min-width:681px) and (max-width:1020px){
  .nav-links{display:none}
  .burger{display:block}
  .mobile-menu{display:none;position:fixed;top:76px;left:0;right:0;z-index:99;border-bottom:1px solid var(--line);
    height:calc(100vh - 76px);height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:var(--void);padding:8px 40px calc(28px + env(safe-area-inset-bottom))}
  .mobile-menu.open{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-content:start}
  .mobile-menu a{grid-column:1/-1;display:block;padding:14px 0;color:var(--ink);text-decoration:none;
    font-family:var(--f-display);font-weight:600;border-bottom:1px solid var(--line-soft)}
  .mobile-menu a[aria-current="page"]{color:var(--signal)}
  .mobile-menu a.mm-sub{grid-column:auto;font-family:var(--f-body);font-weight:500;font-size:.95rem;color:var(--ink-dim);padding:13px 0}
  .mobile-menu a.mm-sub[aria-current="page"]{color:var(--signal)}
  .mobile-menu a.mm-cta{display:flex;justify-content:center;align-items:center;margin-top:20px;
    padding:15px 18px;border:none;background:var(--ember);color:var(--void);text-transform:uppercase;letter-spacing:.05em;
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
  html.mm-open{overflow:hidden}
}

/* ==================================================================
   v20: QUALITÄTS-DURCHGANG & WOW-EBENE (25.09.2026)
   Hex-Feld in allen Themen-Heros, Zeitleiste (Wechsel/Kontakt/Guide),
   Für-wen-Karten, Orbit-Grafik (Produktwelt), Netzwerk-Kennzahlen, Links
   ================================================================== */
/* Hex-Feld auch in den Unterseiten-Heros */
.page-hero{position:relative;overflow:hidden}
.page-hero > .wrap{position:relative;z-index:1}
.page-hero .hexfield{z-index:0}
.page-hero h1{animation:lineup .8s .05s cubic-bezier(.2,.7,.3,1) both}

/* Links im Fließtext: nie Browser-Blau */
main p a:not([class]),main li a:not([class]),.faq-a a:not([class]){color:var(--signal);text-decoration:underline;
  text-decoration-color:rgba(0,230,230,.4);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
main p a:not([class]):hover,main li a:not([class]):hover{color:var(--ink);text-decoration-color:var(--signal)}
.sk{display:inline-block;margin-top:14px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);text-decoration:none;border-bottom:1px solid rgba(229,150,67,.45);padding-bottom:3px;transition:color .2s,border-color .2s}
.sk:hover{color:var(--ember-hot);border-color:var(--ember-hot)}

/* Zeitleiste mit Scroll-Fortschritt (JS setzt --p und .is-on) */
.steps.tl{display:block;position:relative;max-width:920px;margin-top:12px}
.tl::before,.tl-fill{content:"";position:absolute;left:31px;top:36px;width:2px}
.tl::before{bottom:36px;background:var(--line)}
.tl-fill{height:calc((100% - 72px) * var(--p,0));background:linear-gradient(180deg,var(--signal),var(--ember));
  box-shadow:0 0 14px rgba(0,230,230,.55);z-index:1}
.tl .step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:26px;padding:0 0 28px;border:none;background:none}
.tl .step::after{display:none}
.tl .step:hover{transform:none;box-shadow:none}
.tl .sn{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px}
.sn-hex{position:relative;z-index:0;width:64px;height:72px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:1.1rem;color:var(--ink-dim);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(155deg,rgba(0,230,230,.45),rgba(0,230,230,.08) 50%,rgba(229,150,67,.3));transition:color .4s,background .4s}
.sn-hex::after{content:"";position:absolute;inset:1px;z-index:-1;background:var(--void);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tl .sn small{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;color:var(--signal);text-align:center;background:var(--void);padding:3px 2px}
.tl .step.is-on .sn-hex{color:var(--ember);background:linear-gradient(155deg,var(--ember),var(--ember-hot));
  filter:drop-shadow(0 0 12px rgba(255,138,0,.45))}
.tl .step > div:last-child{padding:26px 28px;border:1px solid var(--line-soft);background:rgba(17,38,62,.42);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));transition:border-color .4s,background .4s}
.tl .step.is-on > div:last-child{border-color:rgba(0,230,230,.22);background:rgba(22,48,76,.5)}
.tl .step h2,.tl .step h3{font-size:clamp(1.2rem,2.2vw,1.5rem);margin:0 0 10px;line-height:1.2}
.tl .step p{color:var(--ink-dim);font-size:.96rem;line-height:1.65}
.tl .step p + p{margin-top:10px}
.tl .step p strong{color:var(--ink)}
@media (max-width:680px){
  .tl::before,.tl-fill{left:21px;top:26px}
  .tl::before{bottom:26px}.tl-fill{height:calc((100% - 52px) * var(--p,0))}
  .tl .step{grid-template-columns:44px minmax(0,1fr);gap:14px;padding-bottom:18px}
  .sn-hex{width:44px;height:50px;font-size:.9rem}
  .tl .sn small{display:none}
  .tl .step > div:last-child{padding:18px 16px}
}

/* Für wen: Segmentkarten mit großer Ziffer */
.seg{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;margin:0 0 22px;padding:34px 34px 30px;
  border:1px solid var(--line-soft);background:linear-gradient(160deg,rgba(22,48,76,.55),rgba(10,20,32,.6));
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));overflow:hidden}
.seg[data-n]::after{content:attr(data-n);position:absolute;right:18px;top:-18px;font-family:var(--f-display);font-weight:700;
  font-size:7.5rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(0,230,230,.14);pointer-events:none}
.seg .sk-k{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;color:var(--signal);margin-bottom:12px}
.seg h2{font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.18;margin:0 0 14px;position:relative;z-index:1}
.seg-main p{color:var(--ink-dim);line-height:1.7}
.seg-main .sec-link{margin-top:18px}
.seg-get{position:relative;z-index:1;align-self:start;padding:22px 22px 18px;border:1px solid rgba(229,150,67,.28);background:rgba(229,150,67,.05)}
.seg-get ul{list-style:none;display:grid;gap:10px;margin-top:12px}
.seg-get li{position:relative;padding-left:22px;color:var(--ink);font-size:.94rem;line-height:1.5}
.seg-get li::before{content:"◆";position:absolute;left:0;top:1px;color:var(--ember);font-size:.7rem}
.seg-no{display:block;border-color:rgba(229,150,67,.3)}
.seg-no h2{max-width:720px}
.no-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.no-card{position:relative;padding:20px 18px 18px;border:1px solid var(--line-soft);background:rgba(10,20,32,.55)}
.no-card h3{font-size:1.02rem;margin:8px 0 8px}
.no-card p{color:var(--ink-dim);font-size:.92rem;line-height:1.6}
.no-x{font-family:var(--f-mono);font-size:1.4rem;line-height:1;color:var(--ember)}
@media (max-width:1020px){.seg{grid-template-columns:minmax(0,1fr);gap:20px}.no-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){.seg{padding:24px 18px 20px}.seg[data-n]::after{font-size:5rem;top:-10px;right:10px}.seg-get{padding:18px 16px 14px}}

/* Produktwelt: Orbit-Grafik */
.orbit{max-width:440px;margin:34px auto 30px}
.orbit svg{display:block;width:100%;height:auto;overflow:visible}
.orb-ring{fill:none;stroke:rgba(0,230,230,.14);stroke-dasharray:3 7;transform-box:fill-box;transform-origin:center;animation:orbspin 80s linear infinite}
.orb-ring.r2{stroke:rgba(229,150,67,.18);animation-duration:50s;animation-direction:reverse}
@keyframes orbspin{to{transform:rotate(360deg)}}
.orb-l{stroke:rgba(0,230,230,.5);stroke-width:1.2;stroke-dasharray:4 6;animation:orbflow 1.4s linear infinite}
@keyframes orbflow{to{stroke-dashoffset:-20}}
.orb-c{fill:rgba(229,150,67,.14);stroke:var(--ember);stroke-width:1.5;filter:drop-shadow(0 0 14px rgba(255,138,0,.45))}
.orb-ct{font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.08em;fill:var(--ink)}
.orb-n{color:var(--signal);text-decoration:none}
.orb-n polygon{fill:var(--void);stroke:rgba(0,230,230,.6);stroke-width:1.3;transition:fill .3s,stroke .3s;animation:orbglow 5.4s var(--d,0s) ease-in-out infinite}
.orb-n text{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.06em;fill:var(--ink-dim);transition:fill .3s}
.orb-n:hover polygon,.orb-n:focus-visible polygon{fill:rgba(0,230,230,.14);stroke:var(--signal)}
.orb-n:hover text{fill:var(--ink)}
@keyframes orbglow{0%,70%,100%{stroke:rgba(0,230,230,.6);filter:none}80%{stroke:var(--signal);filter:drop-shadow(0 0 10px rgba(0,230,230,.8))}}
.orbit figcaption{margin-top:10px;text-align:center;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-dim)}

/* Netzwerk: Kennzahlen-Leiste */
.nw-stats{margin:34px 0 10px}
/* v20: Produktgeber-Band – Titel über den Randverläufen, mobil umbrechend */
.pg-title{position:relative;z-index:3;flex-wrap:wrap;padding:0 16px;color:var(--ink-dim);text-align:center}
@media (max-width:680px){.pg-band{margin-top:40px}.pg-band::before,.pg-band::after{width:40px}.pg-title{gap:6px 10px;letter-spacing:.16em;font-size:.7rem}}

/* ==================================================================
   v22: EINWILLIGUNG NACH KATEGORIEN, ZWEI-KLICK-VIDEOS, TERMIN-LINKS (25.09.2026)
   Logik: /assets/js/consent.js (Banner) und /assets/js/integrations.js (Videos, Buchung, Formular)
   ================================================================== */
.cookie [hidden]{display:none!important}
/* mit mehreren Kategorien wird der Banner höher – nie über den Bildschirm hinaus, sondern in sich scrollbar */
.cookie{max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain}
.video-ph.is-2click{padding:24px 22px;text-align:center;background-size:cover;background-position:center}
.video-ph.is-2click .play{padding:0;background:none;font:inherit;font-size:1.4rem;cursor:pointer;transition:background .2s,color .2s}
.video-ph.is-2click .play:hover,.video-ph.is-2click .play:focus-visible{background:var(--ember);color:var(--void);outline:none}
.vid-t{margin:0;max-width:560px;font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.vid-n{margin:0;max-width:520px;font-size:.82rem;line-height:1.55;color:var(--ink-dim)}
.vid-n a{color:var(--signal)}
.vid-rem{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;cursor:pointer;text-align:left;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink-dim)}
.vid-rem input{width:16px;height:16px;accent-color:var(--ember)}
.video-ph.is-live{display:block;padding:0;background:#000}
.video-ph.is-live iframe,.video-ph.is-live video{display:block;width:100%;height:100%;border:0}
.cf-turnstile{min-height:65px;margin:6px 0 14px}
@media (max-width:680px){
  .cookie{max-height:calc(100vh - 100px - env(safe-area-inset-bottom));max-height:calc(100dvh - 100px - env(safe-area-inset-bottom))}
  .video-ph.is-2click{aspect-ratio:auto;min-height:300px}
  .vid-n{font-size:.78rem}
  .vid-rem{letter-spacing:.02em}
}

/* ==================================================================
   v23: WEITERE 3D-EBENE (25.09.2026) – Logik: /assets/js/fx3d.js
   · /plattform/: FinanzCockpit-Handy als 3D-Objekt (richtet sich beim Scrollen auf, Maus neigt, HUD-Schilder in der Tiefe)
   · /netzwerk/: rotierende Netzwerkkugel im Hero (Canvas .netz3d)
   · Startseite #cta-mitte: perspektivischer Hexagon-Boden im CTA-Band
   Alles dekorativ (aria-hidden), bei prefers-reduced-motion ruhend.
   ================================================================== */
.ph3d{position:relative;perspective:1100px;perspective-origin:50% 40%;padding:26px 0 34px;width:100%;display:flex;justify-content:center}
.ph3d-rig{--rx:10deg;--ry:-22deg;position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));will-change:transform}
.ph3d .fcphone{animation:none;transform:translateZ(0);
  box-shadow:-18px 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,230,230,.1),0 0 60px rgba(0,230,230,.1)}
.ph3d .fcphone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.2) 45%,transparent 58%) calc(var(--gx,50) * 1%) 0/260% 100% no-repeat;mix-blend-mode:screen}
.ph3d-tag{position:absolute;white-space:nowrap;padding:7px 11px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
  color:var(--signal);background:rgba(10,20,32,.86);border:1px solid rgba(0,230,230,.35);box-shadow:0 0 22px rgba(0,230,230,.12);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.ph3d-tag.t1{top:14%;left:-22%;transform:translateZ(90px);color:var(--ember);border-color:rgba(229,150,67,.5)}
.ph3d-tag.t2{top:50%;right:-26%;transform:translateZ(130px)}
.ph3d-tag.t3{bottom:14%;left:-18%;transform:translateZ(60px)}
.ph3d-shadow{position:absolute;left:50%;bottom:6px;width:210px;height:26px;margin-left:-105px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,230,230,.22),transparent);filter:blur(6px);pointer-events:none}
@media (max-width:680px){
  .ph3d{perspective:900px;padding:18px 0 26px}
  .ph3d-tag{font-size:.7rem;letter-spacing:.08em;padding:6px 9px}
  .ph3d-tag.t1{left:-12%}.ph3d-tag.t2{right:-14%}.ph3d-tag.t3{left:-8%}
}
@media (max-width:360px){.ph3d-tag.t2,.ph3d-tag.t3{display:none}}

/* Netzwerkkugel: Desktop rechts im Hero, mobil unter der Überschrift */
.page-hero .netz3d{position:absolute;right:max(0px,calc((100vw - var(--maxw)) / 2 - 40px));top:50%;width:min(520px,44vw);height:min(520px,44vw);
  transform:translateY(-44%);pointer-events:auto;z-index:1}
.page-hero:has(.netz3d) .wrap{position:relative;z-index:2}
.page-hero:has(.netz3d) h1{max-width:min(640px,56%)}
@media (max-width:1020px){
  .page-hero:has(.netz3d){display:flex;flex-direction:column}
  .page-hero .netz3d{order:2;position:relative;right:auto;top:auto;transform:none;display:block;width:min(340px,86vw);height:min(340px,86vw);margin:-10px auto -20px}
  .page-hero:has(.netz3d) h1{max-width:none}
}

/* CTA-Band: Hexagon-Boden fährt auf den Betrachter zu */
.hero ~ #cta-mitte .cta-band-in::before{content:"";position:absolute;left:-40%;right:-40%;bottom:0;height:100%;pointer-events:none;z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23E59643' stroke-opacity='.55' stroke-width='1'%3E%3Cpath d='M26 0v30M26 30L0 45v30l26 15M26 30l26 15v30L26 90'/%3E%3C/g%3E%3C/svg%3E") 50% 0/52px 90px;
  transform:perspective(420px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask:linear-gradient(to top,#000 0%,transparent 85%);mask:linear-gradient(to top,#000 0%,transparent 85%);
  animation:ctafloor 7s linear infinite;opacity:.8}
@keyframes ctafloor{to{background-position:50% 90px}}
@media (prefers-reduced-motion:reduce){.hero ~ #cta-mitte .cta-band-in::before{animation:none}}

/* ==================================================================
   v24: „90 = 100“ ALS 3D-BALKEN (Startseite #neunzig, 25.09.2026)
   Jeder Balken bekommt Oberseite (::before) und Stirnseite (::after am letzten Segment); die Grafik
   neigt sich mit der Maus (data-tilt, /assets/js/fx3d.js). Aufbau-Animation deckt die Tiefe mit ab.
   ================================================================== */
.hero ~ #neunzig .eq{--d:12px}
.hero ~ #neunzig .eq-bar{position:relative;margin-top:var(--d);margin-right:var(--d)}
.hero ~ #neunzig .eq-seg{position:relative;overflow:visible}
.hero ~ #neunzig .eq-seg::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--d);
  background:inherit;filter:brightness(1.3);transform:skewX(-45deg);transform-origin:0 100%;pointer-events:none}
.hero ~ #neunzig .eq-seg:last-child::after{content:"";position:absolute;left:100%;top:0;width:var(--d);height:100%;
  background:inherit;filter:brightness(.62);transform:skewY(-45deg);transform-origin:0 0;pointer-events:none}
.hero ~ #neunzig .eq-solo::before,.hero ~ #neunzig .eq-solo::after{background:rgba(147,169,194,.26)}
.hero ~ #neunzig .eq .eq-bar{clip-path:inset(calc(var(--d) * -1 - 2px) 100% -2px -2px)}
.hero ~ #neunzig .eq.on .eq-bar{clip-path:inset(calc(var(--d) * -1 - 2px) calc(var(--d) * -1 - 2px) -2px -2px)}
.hero ~ #neunzig .eq-you{box-shadow:0 14px 30px rgba(229,150,67,.22)}
@media (max-width:680px){.hero ~ #neunzig .eq{--d:8px}}
@media (prefers-reduced-motion:reduce){.hero ~ #neunzig .eq .eq-bar{clip-path:none!important}}
/* v24: Balken sind um die Tiefe schmaler – Markierung „gleiches Niveau“ sitzt wieder genau am 90-%-Punkt */
.hero ~ #neunzig .eq-mark{left:calc(var(--pad) + var(--lab) + 18px + (100% - 2 * var(--pad) - var(--lab) - 18px - var(--d)) * .9)}
@media (max-width:680px){.hero ~ #neunzig .eq-mark{left:calc(var(--pad) + (100% - 2 * var(--pad) - var(--d)) * .9)}}

/* ==================================================================
   v25: RECHT, SEO & GEO (25.09.2026) – B2B-Hinweis im Footer aller Seiten
   ================================================================== */
.legal .b2b-note{flex-basis:100%;color:var(--ink-dim);letter-spacing:.06em}
/* v25: Listen in Blogartikeln mit Rauten statt runder Punkte (Corporate Design) */
.art-body .art-list{list-style:none;margin:0 0 22px;padding:0}
.art-body .art-list li{position:relative;padding-left:24px;margin-bottom:9px}
.art-body .art-list li::before{content:"◆";position:absolute;left:2px;top:.5em;font-size:.62rem;line-height:1;color:var(--ember)}
/* v26: Umsteiger-Hinweis (Hero + Kontakt) und Fußnoten statt Klammertext im Verkaufssatz */
.switch-note{margin:18px 0 0;max-width:620px}
.switch-note a{display:block;padding:14px 16px 14px 18px;border-left:2px solid var(--ember);background:rgba(229,150,67,.07);
  color:var(--ink-dim)!important;text-decoration:none!important;font-size:.95rem;line-height:1.55;transition:background .25s,color .25s}
.switch-note a b{color:var(--ink);font-weight:600}
.switch-note a:hover,.switch-note a:focus-visible{background:rgba(229,150,67,.14);color:var(--ink)!important}
.switch-note a b{text-decoration:none}
sup.fn{font-size:.7em;line-height:0;vertical-align:super;color:var(--ember)}
.page-fn{margin:36px 0 10px;font-size:.8rem;line-height:1.6;color:var(--ink-dim)}
@media (max-width:680px){.switch-note a{font-size:.9rem;padding:12px 14px}.page-fn{font-size:.78rem}}

/* v27: Umstieg & Lead-Architektur – Standort-Auswahl, Schnell-Check, Rhythmusbrecher (Leitsatz, Community, Guide),
   Vertraulichkeit, WhatsApp/Anruf im Sticky, BCA-insider-Kachel */
.mcta{display:none}
@media (max-width:680px){
  .mcta{gap:8px;align-items:stretch}
  .mcta.show,.mcta{display:flex}
  .mcta .btn{flex:1 1 auto;width:auto;min-width:0}
  .mcta-ic{flex:0 0 48px;display:flex;align-items:center;justify-content:center;min-height:48px;color:var(--signal);
    background:rgba(0,230,230,.06);box-shadow:inset 0 0 0 1px rgba(0,230,230,.35);
    clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
  .mcta-ic svg{width:22px;height:22px}
  .mcta-ic:active{background:rgba(0,230,230,.16)}
}
.press-bca{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:58px;background:#fff;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 0 1px rgba(0,230,230,.18)}
.press-strip .press-bca img{height:30px;padding:0;background:none;clip-path:none;box-shadow:none;width:auto}
.press-bca small{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.08em;color:#0A1420;text-transform:uppercase;white-space:nowrap}
@media (max-width:680px){.press-bca{height:46px}.press-strip .press-bca img{height:22px}.press-bca small{font-size:.5rem}}

/* Standort-Auswahl direkt nach dem Hero */
.st-sec{padding:34px 0 10px!important;border-top:none!important}
.st-q{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.2em;color:var(--signal);text-transform:uppercase;margin-bottom:14px}
.st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.st-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 44px 18px 18px;min-height:44px;text-decoration:none;
  background:linear-gradient(180deg,rgba(17,38,62,.8),rgba(17,38,62,.45));box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:background .25s,box-shadow .25s,transform .25s}
.st-card b{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:1.04rem}
.st-card span{color:var(--ink-dim);font-size:.9rem;line-height:1.45}
.st-card .st-n{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--ember)}
.st-card .st-go{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--ember);font-size:1.2rem;transition:transform .25s}
.st-card:hover,.st-card:focus-visible{box-shadow:inset 0 0 0 1px rgba(229,150,67,.6);background:linear-gradient(180deg,rgba(229,150,67,.12),rgba(17,38,62,.5))}
.st-card:hover .st-go{transform:translate(4px,-50%)}
@media (max-width:1020px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.st-grid{grid-template-columns:1fr;gap:8px}.st-card{padding:14px 44px 14px 16px}.st-card span:not(.st-n):not(.st-go){font-size:.86rem}}

.hgb-heisst{color:var(--ember);font-weight:600}

/* Rhythmusbrecher 1: Leitsatz groß, viel Luft */
.rb-claim{padding:120px 0!important;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(60% 80% at 50% 50%,rgba(229,150,67,.10),transparent 70%)}
.rb-claim::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(0,230,230,.05) 79px 80px)}
.rb-k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.28em;color:var(--signal);margin-bottom:22px;text-transform:uppercase}
.rb-big{position:relative;font-family:var(--f-display);font-weight:600;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.12;color:var(--ink);max-width:980px;margin:0 auto}
.rb-big .sig{color:var(--signal)}
.rb-row{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin-top:38px;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.08em;color:var(--ink-dim);text-transform:uppercase}
.rb-row b{font-weight:500;color:var(--ember);font-size:1.3em;margin-right:6px}
@media (max-width:680px){.rb-claim{padding:80px 0!important}.rb-row{gap:10px 18px;font-size:.72rem}}

/* Schnell-Check */
.qc{margin-bottom:26px}
.qc .hx-in{padding:32px 34px 26px;background:linear-gradient(160deg,rgba(22,48,76,.92),rgba(10,20,32,.92))}
.qc-k{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.18em;color:var(--signal);text-transform:uppercase;margin-bottom:18px}
.qc-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.qc-l{display:block;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase;margin:0 0 8px}
.qc-in .qc-l + input{margin-bottom:22px}
.qc input{width:100%;font-size:1.1rem;min-height:50px;padding:10px 14px;background:rgba(10,20,32,.85);color:var(--ink);border:1px solid var(--line);font-family:var(--f-mono)}
.qc input:focus{outline:none;border-color:var(--ember)}
.qc-chips{display:flex;flex-wrap:wrap;gap:8px}
.qc-chips button{min-height:44px;min-width:62px;padding:8px 12px;font-family:var(--f-mono);font-size:.9rem;color:var(--ink);cursor:pointer;
  background:rgba(0,230,230,.05);border:1px solid var(--line);transition:background .2s,border-color .2s,color .2s}
.qc-chips button:hover{border-color:rgba(0,230,230,.5)}
.qc-chips button.on{background:var(--ember);border-color:var(--ember);color:#0A1420}
.qc-own{flex:1 1 130px}
.qc-own input{min-height:44px;font-size:1rem}
.qc-hint{margin-top:12px;font-size:.82rem;color:var(--ink-dim);line-height:1.5}
.qc-out{border-left:1px solid var(--line);padding-left:34px}
.qc-ol,.qc-per{display:block;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase}
.qc-num{font-family:var(--f-mono);font-weight:500;font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.05;color:var(--ink-faint);margin:6px 0 4px;transition:color .3s}
.qc.has-result .qc-num{color:var(--ember);text-shadow:0 0 30px rgba(229,150,67,.35)}
.qc-txt{margin:14px 0 18px;color:var(--ink-dim);font-size:.95rem;line-height:1.55}
.qc-txt b{color:var(--ink);font-weight:600}
.qc-ctas{display:flex;flex-wrap:wrap;gap:10px}
.qc-ctas .btn{min-height:48px}
.qc-fine{margin-top:22px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:.78rem;line-height:1.55;color:var(--ink-dim)}
.qc-detail.is-closed{display:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:680px){
  .qc .hx-in{padding:24px 18px 20px}
  .qc-grid{grid-template-columns:1fr;gap:22px}
  .qc-out{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
  .qc-chips button{flex:1 1 calc(33% - 8px);min-width:0}
  .qc-own{flex:1 1 100%}
  .qc-ctas .btn{width:100%;justify-content:center}
  .qc-fine{font-size:.75rem}
}

/* Rhythmusbrecher 2: Community – Hexagon-Mosaik */
.rb-com-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.rb-com-txt > p:not(.eyebrow){color:var(--ink-dim);font-size:1.06rem;margin-top:18px;max-width:600px}
.rb-com-list{list-style:none;margin:26px 0 22px;padding:0;display:grid;gap:14px}
.rb-com-list li{padding:0 0 0 22px;position:relative}
.rb-com-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--ember);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.rb-com-list b{display:block;color:var(--ink);font-weight:600}
.rb-com-list span{color:var(--ink-dim);font-size:.95rem;line-height:1.5}
.hexmo{--hw:150px;--g:4px;position:relative;display:grid;justify-content:center;padding:10px 0 calc(var(--hw)*.29 + 10px);
  grid-template-columns:repeat(6,calc(var(--hw)/2 + var(--g)));grid-auto-rows:calc(var(--hw)*1.1547*.75 + var(--g))}
.hm{grid-row-end:span 1;width:var(--hw);height:calc(var(--hw)*1.1547);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--surface);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;color:var(--ink-dim);text-transform:uppercase;
  animation:hmIn .7s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i)*80ms)}
.hm:nth-child(1){grid-area:1/2/2/4}.hm:nth-child(2){grid-area:1/4/2/6}
.hm:nth-child(3){grid-area:2/1/3/3}.hm:nth-child(5){grid-area:2/3/3/5}.hm:nth-child(6){grid-area:2/5/3/7}
.hm:nth-child(4){grid-area:3/2/4/4}.hm:nth-child(7){grid-area:3/4/4/6}
.hm b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.9rem;letter-spacing:0;color:var(--signal);margin-bottom:2px;text-transform:none}
.hm-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.hm-num b{color:var(--ember)}
.hm-you{background:linear-gradient(160deg,var(--ember),var(--ember-hot));color:#0A1420}
.hm-you b{color:#0A1420}
@keyframes hmIn{from{opacity:0;transform:scale(.85)}}
@media (prefers-reduced-motion:reduce){.hm{animation:none}}
@media (max-width:1020px){.rb-com-grid{grid-template-columns:1fr;gap:34px}.hexmo{--hw:130px}}
@media (max-width:680px){.hexmo{--hw:100px;--g:3px}.hm{font-size:.56rem;letter-spacing:.08em}.hm b{font-size:1.3rem}}
@media (max-width:360px){.hexmo{--hw:88px}}

/* Rhythmusbrecher 3: Guide als Objekt */
.rb-guide{position:relative;overflow:hidden}
.rb-guide-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.gd-cover{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;aspect-ratio:1/1.35;max-width:320px;margin:0 auto;padding:30px 26px;text-decoration:none;
  background:linear-gradient(165deg,#16304C 0%,#0A1420 70%);box-shadow:inset 0 0 0 1px rgba(0,230,230,.3),30px 40px 60px -20px rgba(0,0,0,.6),0 0 60px -10px rgba(229,150,67,.25);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));transform:perspective(900px) rotateY(-12deg) rotateX(4deg);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.gd-cover::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(30deg,transparent 48%,rgba(0,230,230,.25) 49% 51%,transparent 52%),linear-gradient(150deg,transparent 48%,rgba(0,230,230,.25) 49% 51%,transparent 52%);background-size:46px 80px}
.gd-cover::after{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--ember)}
.gd-cover:hover{transform:perspective(900px) rotateY(-4deg) rotateX(2deg) translateY(-4px)}
.gd-k,.gd-m{position:relative;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;color:var(--signal)}
.gd-t{position:relative;font-family:var(--f-display);font-weight:700;font-size:2rem;line-height:1.05;color:var(--ink);text-transform:uppercase}
.gd-s{position:relative;color:var(--ember);font-size:1rem}
.gd-m{color:var(--ink-dim);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.rb-guide-txt > p:not(.eyebrow){color:var(--ink-dim);font-size:1.06rem;margin-top:18px;max-width:560px}
.rb-guide-txt .hero-ctas{margin-top:26px}
@media (prefers-reduced-motion:reduce){.gd-cover,.gd-cover:hover{transform:none}}
@media (max-width:1020px){.rb-guide-grid{grid-template-columns:1fr;gap:40px}.gd-cover{max-width:250px}}
@media (max-width:680px){.gd-cover{max-width:210px;padding:22px 18px;transform:perspective(900px) rotateY(-8deg)}.gd-t{font-size:1.5rem}.rb-guide-txt .hero-ctas .btn{width:100%;justify-content:center}}

/* Vertraulichkeit am Formular */
.conf-note{margin:14px 0 0;max-width:620px;padding:12px 16px 12px 42px;position:relative;font-size:.92rem;line-height:1.55;color:var(--ink-dim);
  border:1px solid var(--line);background:rgba(0,230,230,.04)}
.conf-note::before{content:"";position:absolute;left:16px;top:15px;width:14px;height:16px;background:var(--signal);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.conf-note b{color:var(--ink);font-weight:600}
/* v27: /umstieg/ – Vertraulichkeitsleiste, zwei Wege, 5 Fragen */
.conf-strip{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:26px 0 0;padding:0}
.conf-strip li{position:relative;padding-left:22px;color:var(--ink-dim);font-size:.92rem}
.conf-strip li::before{content:"";position:absolute;left:0;top:.35em;width:11px;height:12px;background:var(--signal);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.conf-strip b{color:var(--ink);font-weight:600;margin-right:6px}
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.path .hx-in{padding:30px 28px 26px;height:100%;background:linear-gradient(170deg,rgba(22,48,76,.85),rgba(10,20,32,.9))}
.path{scroll-margin-top:90px}
.path-k{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;color:var(--ember);text-transform:uppercase}
.path h3{margin:10px 0 18px;font-size:1.3rem}
.path-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px}
.path-l{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--ink-dim);text-transform:uppercase;margin-bottom:10px}
.path-l2{color:var(--signal)}
.path-x,.path-ok{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.path-x li,.path-ok li{position:relative;padding-left:20px;font-size:.93rem;line-height:1.5;color:var(--ink-dim)}
.path-x li::before{content:"×";position:absolute;left:2px;top:0;color:var(--ink-faint)}
.path-ok li{color:var(--ink)}
.path-ok li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:10px;background:var(--ember);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.q5 .faq-item summary{justify-content:flex-start!important;gap:14px;text-align:left}
.q5 .faq-item summary .q5-n{margin-right:2px}
.q5-n{font-family:var(--f-mono);font-size:.8rem;color:var(--ember);letter-spacing:.08em;flex:0 0 auto}
.q5 .faq-a a{color:var(--signal)}
@media (max-width:1020px){.path-grid{grid-template-columns:1fr}}
@media (max-width:680px){.path .hx-in{padding:24px 18px 20px}.path-cols{grid-template-columns:1fr;gap:16px}.conf-strip{flex-direction:column;gap:8px}.conf-strip li{font-size:.88rem}}
@media (max-width:680px){.kontakt-page .contact-grid > .form{order:-1}.kontakt-page .contact-side{margin-top:10px}}
.pr-cover{display:inline-block;margin-right:8px;padding:1px 8px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#0A1420;background:var(--ember);vertical-align:2px}
#berichte .pr-item a{color:var(--signal)}
#berichte .pr-item .d{color:var(--ink-dim);letter-spacing:.08em}
@media (max-width:680px){#berichte .pr-item{grid-template-columns:1fr;gap:4px}}
.q5 .faq-item summary .ind{margin-left:auto;padding-left:12px}
/* v27: Hero mobil – CTA im ersten Bildschirm */
@media (max-width:680px){
  .hero{padding-top:96px!important}
  .hero .eyebrow{margin-bottom:16px}
  .hero .hero-lead{margin-top:14px}
  .hero .hero-sub{margin-top:12px;font-size:.98rem;line-height:1.55}
  .hero .hero-ctas{margin-top:20px}
}
@media (max-width:680px){.mcta .btn{white-space:nowrap;font-size:.84rem;letter-spacing:.06em;padding-left:12px;padding-right:12px;min-height:48px}}
@media (max-width:360px){.mcta .btn{font-size:.74rem;letter-spacing:.03em}.mcta-ic{flex-basis:44px}}

/* v28: Hero ohne Zahlen, Schnell-Check mit Sparten, Sync-Animation, Vergleich heute ⇄ neo */
.stats-w .num{font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,1.9vw,1.55rem);letter-spacing:0;line-height:1.15}
@media (max-width:680px){.stats-w .num{font-size:1.05rem}.stats-w .lbl{font-size:.78rem}}
.qc-skip{margin-top:10px!important;font-size:.9rem}
.qc-skip a{color:var(--signal);text-decoration:none;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.qc .hx-in{position:relative;overflow:hidden}
.qc-modes{margin-bottom:20px}
.qc-modes button{min-width:0;font-family:var(--f-display);font-weight:600;font-size:.88rem;letter-spacing:.04em;text-transform:uppercase;padding:10px 16px}
.qc-grid3{display:grid;grid-template-columns:1fr .7fr 1fr;gap:16px}
.qc-grid3 [hidden]{display:none}
.qc-grid3 input{margin:0}
.qc-ctas{align-items:center;margin-top:18px}
.qc-ctas .btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.6)}
.qc-err{color:var(--ember);font-size:.85rem}
.qc-sum{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.06em;color:var(--ink)}
.qc-sum[hidden]{display:none}
.qc-sum-k{color:var(--signal);text-transform:uppercase;letter-spacing:.16em}
.qc-edit{margin-left:auto;min-height:44px;padding:8px 14px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);background:rgba(0,230,230,.06);border:1px solid rgba(0,230,230,.35);cursor:pointer}
.qc.is-done .hx-in{padding-top:18px;padding-bottom:18px}
/* Sync-Overlay */
.qc-sync{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:28px 34px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,20,32,.94),rgba(10,20,32,.97)),repeating-linear-gradient(0deg,rgba(0,230,230,.06) 0 1px,transparent 1px 3px)}
.qc-sync::before{content:"";position:absolute;left:0;right:0;height:2px;top:0;background:var(--signal);box-shadow:0 0 18px 4px rgba(0,230,230,.55);opacity:0}
.qc-sync::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:linear-gradient(30deg,transparent 48%,rgba(0,230,230,.18) 49% 51%,transparent 52%),linear-gradient(150deg,transparent 48%,rgba(0,230,230,.18) 49% 51%,transparent 52%);background-size:46px 80px}
.qs-l{font-family:var(--f-mono);font-size:.9rem;letter-spacing:.06em;color:var(--signal);opacity:0;transform:translateX(-8px);white-space:nowrap;overflow:hidden}
.qs-l.l3{color:var(--ember)}
.qs-bar{position:relative;height:6px;margin-top:10px;max-width:420px;background:rgba(0,230,230,.12);overflow:hidden}
.qs-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--ember),var(--ember-hot));box-shadow:0 0 12px rgba(229,150,67,.6)}
.is-syncing .qc-sync{opacity:1;pointer-events:auto;animation:qsIn .18s steps(2) both}
.is-syncing .qc-sync::before{animation:qsScan 1.1s linear both}
.is-syncing .qc-sync::after{animation:qsHex 1.2s ease-out both}
.is-syncing .qs-l{animation:qsType .28s steps(12) both}
.is-syncing .qs-l.l1{animation-delay:.05s}.is-syncing .qs-l.l2{animation-delay:.3s}.is-syncing .qs-l.l3{animation-delay:.55s}.is-syncing .qs-l.l4{animation-delay:.8s}
.is-syncing .qs-bar i{animation:qsBar 1.1s cubic-bezier(.6,.1,.3,1) both}
@keyframes qsIn{0%{opacity:0;filter:hue-rotate(80deg)}50%{opacity:.6;transform:translateX(3px)}100%{opacity:1;transform:none}}
@keyframes qsScan{0%{top:0;opacity:1}100%{top:100%;opacity:.2}}
@keyframes qsHex{0%{opacity:0}40%{opacity:1}100%{opacity:.25}}
@keyframes qsType{from{opacity:1;max-width:0;transform:none}to{opacity:1;max-width:100%;transform:none}}
@keyframes qsBar{from{width:0}to{width:100%}}
/* Detailrechner erscheint mit Glitch-Wischer */
.qc-detail.qc-in,#rechner .hx-in.qc-in{animation:qcReveal .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes qcReveal{0%{clip-path:inset(0 0 100% 0);filter:brightness(1.8) hue-rotate(-30deg)}35%{clip-path:inset(0 0 40% 0)}60%{filter:brightness(1.2)}100%{clip-path:inset(0 0 0 0);filter:none}}
#rechner .hx-in{position:relative}
.qc-sync-detail{border:none}
@media (prefers-reduced-motion:reduce){.qc-detail.qc-in,#rechner .hx-in.qc-in{animation:none}.qc-sync{display:none}}
/* Vergleichsbalken heute ⇄ neo */
.cr-or{margin:0 6px;color:var(--ink-dim)}
.cmp-viz{margin:14px 0 6px;display:grid;gap:8px}
.cmp-viz[hidden]{display:none}
.cv-row{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.cv-l{color:var(--ink-dim)}
.cv-bar{height:12px;background:rgba(0,230,230,.07);box-shadow:inset 0 0 0 1px var(--line-soft)}
.cv-bar i{display:block;height:100%;width:0;transition:width .6s cubic-bezier(.2,.7,.3,1)}
.cv-own{background:repeating-linear-gradient(90deg,var(--ink-faint) 0 6px,rgba(94,118,146,.6) 6px 8px)}
.cv-neo{background:linear-gradient(90deg,var(--ember),var(--ember-hot));box-shadow:0 0 12px rgba(229,150,67,.45)}
.cv-row b{font-weight:500;color:var(--ink);min-width:78px;text-align:right}
@media (max-width:680px){
  .qc-grid3{grid-template-columns:1fr 1fr;gap:12px}
  .qc-grid3 > div:last-child{grid-column:1/-1}
  .qc-modes button{flex:1 1 calc(50% - 8px);font-size:.82rem}
  .qc-sync{padding:20px 18px}.qs-l{font-size:.78rem}
  .qc-edit{margin-left:0}
}
#rechner,#rechner .calc-result{scroll-margin-top:90px}

/* v29: 90 = 100 – Stornoreserve der Einzelanbindung schraffiert, Legende; Lesbarkeit */
.eq-res{justify-content:center;padding:0;color:var(--ink);font-size:.6rem;letter-spacing:.08em;
  background:repeating-linear-gradient(135deg,rgba(147,169,194,.42) 0 3px,rgba(147,169,194,.08) 3px 7px);box-shadow:inset 0 0 0 1px rgba(147,169,194,.55)}
.hero ~ #neunzig .eq-res::before{background:rgba(147,169,194,.3)}
.eq-legend{display:flex;align-items:center;gap:10px;margin-top:14px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-dim)}
.eq-legend .lg{display:inline-block;width:22px;height:12px;flex:0 0 auto;
  background:repeating-linear-gradient(135deg,rgba(147,169,194,.55) 0 3px,rgba(147,169,194,.1) 3px 7px);box-shadow:inset 0 0 0 1px rgba(147,169,194,.6)}
@media (max-width:680px){.eq-res span{display:none}.eq-legend{font-size:.72rem;align-items:flex-start}.eq-legend .lg{margin-top:2px}}
/* v29: Lesbarkeit – Mono-Labels auf dem Desktop mindestens .7rem (11,2 px); lesepflichtige HUD-Texte in --ink-dim */
@media (min-width:681px){
  .foot > h2,.crumbs > a,.crumbs > span,.art-meta > span,.art-meta time,.legal > span,p.ga-t,span.rc-c,dt > span.k,.sn > small,
  span.upto,span.adv-k,p.adv-k,a.sec-link,.field > label,.cfield > label,.l > span.k,span.bchip,.bmeta > span,a.bread,p.r-t,.c-col > b,
  .pr-item > span.d,.wtxt > span,.wtxt > em,p.fb-t,span.pidx,.pcard > a,span.adv-go,.pw-kond > span,th,.dk > span.k,.dl-row > a,
  figcaption > span,div.ph-slot,.bio > span.b-tag,p.b-ph,p.role,span.src,.src > a,span.c-k,p.tag,.cross > span.lbl,p.pg-title,
  .pg-title > span,span.gd-k,span.gd-m,span.lab-opt,p.form-trust,span.proto-note,.form-note > a,div.calc-bar,.calc-bar > span,
  .cr-badges > span,a.calc-cta,div.term-bar,.term-bar > span,div.term-foot,.term-foot > span,p.note,span.chip-hl,.cr-per,
  .cr-cmp-l,.story-fine,.group-cap,.plate-sub,.b2b-note{font-size:.7rem!important}
  .eq-seg > span{font-size:.68rem}
}
.term-bar,.term-foot,.hero .cmd,.split-label span:not(.you),.calc-bar,.group-cap,.cell > span.id{color:var(--ink-dim)!important}
.pr-cover{color:#0A1420!important;font-size:.66rem!important}
@media (max-width:680px){
  .group-cap,.story-fine,p.b-ph,.wtxt > span,div.ph-slot,span.gd-m,span.gd-k,p.note,div.calc-bar,.pr-item > span.d,.cr-cmp-fine,.cr-label,.boot-p span{font-size:.7rem!important}
}
@media (min-width:681px){.cr-label,.sx-seg > button,.sx-how > li,.sx-ct > small,.sx-f > label{font-size:.7rem!important}}
.eq-legend{margin:10px 0 26px}
.eq-x{font-style:normal}@media (max-width:680px){.eq-x{display:none}}

/* v30: Unterseiten entschlackt – Produktwelt-Leistungslisten mobil zweispaltig */
@media (max-width:680px){
  .pw-list{grid-template-columns:1fr 1fr;gap:8px 14px}
  .pw-list li{font-size:.86rem}
}
@media (max-width:680px){main > section:not(.page-hero):not(.hero):not(.art-hero){padding-top:56px;padding-bottom:56px}}   /* v32: .art-hero ausgenommen – Brotkrumen lagen unter der Kopfzeile */
/* Über uns mobil: Name/Funktion stehen in der Bildunterschrift – im Bio-Teil nicht doppelt */
@media (max-width:1020px){.member .bio .b-tag,.member .bio .b-name{display:none}}

/* v31: Orbit-Grafik (Produktwelt #cross-selling) auch mobil – größere Beschriftung, volle Breite */
@media (max-width:680px){
  #cross-selling .orbit{margin:26px auto 22px;max-width:380px}
  .orb-n text{font-size:15px}
  .orb-ct{font-size:17px}
}

/* v31: Produktgeber-Band der Startseite auch mobil; Partner-Konsole im Hero entfernt (Kunde) – Hero einspaltig */
@media (max-width:680px){
  .hero ~ #produktgeber{display:block}
}
.hero .hero-grid{grid-template-columns:1fr;max-width:860px}
@media (min-width:1021px){.hero{padding-top:128px!important;padding-bottom:84px}.hero h1{font-size:clamp(2.4rem,4.6vw,3.8rem)}}
@media (max-width:680px){.hexmo .hm{font-size:.7rem;letter-spacing:.02em}}
@media (max-width:680px){.ph3d-tag.t1{top:3%}}
@media (max-width:360px){.ph3d{padding-top:34px}.ph3d-tag.t1{top:-22px;left:4%}}
@media (max-width:360px){.hexmo .hm{letter-spacing:0}}
@media (max-width:680px){.steps.tl p{hyphens:auto;-webkit-hyphens:auto}}

/* v31: Vertrieb – Zwischen-Aufrufe (.inl-cta) und Hinweis statt Einwilligungshäkchen im Formular */
.inl-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:34px}
.inl-cta p{margin:0;color:var(--ink-dim);font-size:.95rem;max-width:460px}
p.consent{display:block;margin:0;color:var(--ink-dim);font-size:.82rem;line-height:1.55}
@media (max-width:680px){.inl-cta{flex-direction:column;align-items:stretch;text-align:left}.inl-cta .btn{width:100%;justify-content:center}p.consent{font-size:.78rem}}
.art-mid{margin:30px 0 8px;padding:18px 20px;border:1px solid var(--line);background:rgba(17,38,62,.45);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.art-mid p{font-size:.92rem}
/* v31: Trefferfläche kleiner Textlinks mobil auf 44 px – ohne Layoutverschiebung */
@media (max-width:680px){
  a.sk,.crumbs a,.pcard > a,a.bread,.loc a,a[data-track="presse-link"]{display:inline-block;padding-top:10px;padding-bottom:10px;margin-top:-10px;margin-bottom:-10px}   /* v32: .sec-link raus – die Linie lief durch den nächsten Link; Trefferfläche hat sie per ::after */
}

/* v31: Hero-Signatur „Deine Marke“ (nur Desktop ab 1021 px) – 3D-Szene in fx3d.js Block 4: Kern-Prisma, Drahtgitter-Hülle,
   Hexagon-Boden mit Scan, Bahnen, Datenstrahlen; Karten (DOM) liegen je nach Tiefe hinter oder vor dem Prisma-Canvas (Ebenen siehe v32-Block unten) */
.ho-wrap{display:none}
@media (min-width:1021px){
  .hero .hero-grid{grid-template-columns:minmax(600px,1.1fr) .9fr;max-width:none;gap:24px}
  .ho-wrap{display:block;position:relative;margin-right:-16px}
}
.ho{position:relative;height:540px}
.ho-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ho-back{z-index:0}.ho-front{z-index:2}
.ho-card{position:absolute;left:0;top:0;z-index:1;padding:9px 14px 9px 30px;white-space:nowrap;text-align:left;will-change:transform,opacity;
  background:linear-gradient(180deg,rgba(22,48,76,.92),rgba(12,28,46,.92));border:1px solid rgba(0,230,230,.22);backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.ho-card b{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem;color:var(--ink)}
.ho-card::before{content:"";position:absolute;left:12px;top:15px;width:9px;height:8px;background:var(--signal);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.ho-card.ho-x::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--signal)}
.ho-card .ho-own{display:block;max-height:0;opacity:0;overflow:hidden;font-family:var(--f-body);font-size:.76rem;line-height:1.35;color:var(--ink-dim);transition:max-height .5s,opacity .5s,margin .5s}
.ho-card.hit{border-color:rgba(0,230,230,.8);box-shadow:0 0 0 1px rgba(0,230,230,.25),0 0 34px rgba(0,230,230,.22),inset 0 0 22px rgba(0,230,230,.12)}
.ho-card.hit .ho-own{max-height:24px;opacity:1;margin-top:3px;color:var(--ink)}
.ho-cap{margin:0;min-height:2.6em;text-align:center;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink-dim)}
.hero .ho-cap a{color:var(--ember)!important;text-decoration:none;border-bottom:1px solid rgba(229,150,67,.4);white-space:nowrap}
.hero .ho-cap a:hover{border-bottom-color:var(--ember)}
/* v31: Legende der Hero-Signatur – Schichten Vertriebsfelder · Deine Struktur (White-Label) · Netzwerk & Community */
.ho-leg{display:flex;justify-content:center;gap:8px;margin:-6px 0 10px}
.ho-leg button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;white-space:nowrap;background:rgba(17,38,62,.6);border:1px solid var(--line);
  color:var(--ink-dim);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s,background .3s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.ho-leg button:hover,.ho-leg button:focus-visible,.ho-leg button.on{color:var(--ink);border-color:rgba(0,230,230,.6);background:rgba(0,230,230,.08)}
.ho-leg i{width:9px;height:8px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.ho-leg .lg-f{background:var(--signal)}.ho-leg .lg-s{background:var(--ember)}.ho-leg .lg-n{background:transparent;box-shadow:inset 0 0 0 1.5px var(--signal)}
.ho-txt{transition:opacity .35s}
/* v31: nicht gewählte Ebenen laden zum Antippen ein – „+“ und Leuchtpuls, bis einmal gewählt wurde */
.ho-leg button::after{content:"+";margin-left:2px;color:var(--signal);font-size:.85rem;line-height:1;transition:opacity .3s}
.ho-leg button.on::after{content:"";margin:0}
.ho-leg:not(.used) button:not(.on){animation:holeg 2.2s ease-in-out infinite;color:var(--ink)}
.ho-leg:not(.used) button:not(.on):nth-child(3){animation-delay:1.1s}
@keyframes holeg{0%,100%{border-color:rgba(0,230,230,.25);box-shadow:none}50%{border-color:rgba(0,230,230,.9);box-shadow:0 0 18px rgba(0,230,230,.35),inset 0 0 12px rgba(0,230,230,.15)}}
@media (prefers-reduced-motion:reduce){.ho-leg button{animation:none!important}}
/* v32: Hero-Signatur größer und ohne Ränder – Zeichenfläche ragt über die Box hinaus und läuft weich aus;
   Ebenen: Hinten-Canvas 0 · hintere Karten 1–8 · Vorn-Canvas (Kern, vordere Hüllkanten, vordere Strahlen) 10 · vordere Karten 11–18 · aktive Karte 20 */
.ho{height:600px}
.ho-cv{inset:auto;top:-70px;left:-50px;width:calc(100% + 140px);height:calc(100% + 100px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70px,#000 calc(100% - 80px),transparent),linear-gradient(180deg,transparent,#000 70px,#000 calc(100% - 40px),transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 70px,#000 calc(100% - 80px),transparent),linear-gradient(180deg,transparent,#000 70px,#000 calc(100% - 40px),transparent);mask-composite:intersect}
.ho-front{z-index:10}
@media (min-width:1021px){
  /* v32: rechte Spalte darf schrumpfen (vorher ragte sie bei 1021–1100 px aus dem Bild); die Szene skaliert in fx3d.js mit */
  .hero .hero-grid{grid-template-columns:minmax(540px,1.1fr) minmax(0,.9fr)}
  .ho-wrap{min-width:0}
  .ho-leg{flex-wrap:wrap}
}
/* v32: Desktop-Navigation bricht zwischen 1021 und 1199 px nicht mehr um („White-/Label“, „Über/uns“) */
@media (min-width:1021px) and (max-width:1199px){.nav-links{gap:18px}.nav-links a{font-size:.82rem;white-space:nowrap}}
.ho-card{padding:7px 12px 7px 26px}
.ho-card b{font-size:.9rem}
.ho-card::before{left:10px;top:13px}
.ho-card .ho-own{font-size:.72rem}

/* v31: Customer-Journey-Audit – Einblendungen schneller, Header macht mobil Platz, Menü-CTA oben,
   Fußnoten antippbar (Hinweis direkt am Claim), Kleingedrucktes in lesbarer Größe und Zeilenlänge */
.reveal{transition-duration:.5s}
@media (max-width:1020px){
  header{transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s,border-color .3s}
  header.hdr-up{transform:translateY(-100%)}
  .mobile-menu a.mm-cta,.mobile-menu a.mm-cta:last-child{order:-1;margin:6px 0 10px}
}
@media (prefers-reduced-motion:reduce){header{transition:none}}
.fn-ref{cursor:pointer;color:var(--ember);position:relative}
.fn-ref::after{content:"";position:absolute;left:-8px;right:-8px;top:-12px;bottom:-10px}
.fn-ref:hover{color:var(--ember-hot)}
.fn-ref:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.fn-pop{position:absolute;z-index:150;width:min(340px,calc(100vw - 32px));padding:14px 44px 15px 16px;background:var(--surface);
  border:1px solid rgba(0,230,230,.5);box-shadow:0 18px 44px rgba(0,0,0,.5);color:var(--ink);text-align:left;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.fn-pop-k{margin:0 0 6px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;color:var(--signal)}
.fn-pop-t{margin:0;font-family:var(--f-body);font-size:.88rem;line-height:1.55;color:var(--ink)}
.fn-pop-x{position:absolute;top:4px;right:4px;width:40px;height:40px;background:none;border:0;color:var(--ink-dim);font-size:1.2rem;cursor:pointer}
.fn-pop-x:hover,.fn-pop-x:focus-visible{color:var(--ink)}
.eq-fine,.cmp-note,.qc-hint,.courtage-note,.calc-note,.sx-info,.src-note,.page-fn,.page-notes{max-width:78ch}
.cr-cmp-fine,.cfield label small{font-size:.75rem}
.sx-total > span{font-size:.72rem}
.dk-next{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dk-next li{display:grid;gap:2px;padding-left:18px;position:relative}
.dk-next li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:7px;background:var(--signal);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.dk-next a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(0,230,230,.4);justify-self:start;padding:4px 0}
.dk-next a:hover{border-bottom-color:var(--signal)}
.dk-next span{color:var(--ink-dim);font-size:.9rem}

/* v31: Gründer-Bios (/ueber-uns/#gruender) – Kurz-Bio im Karten-Overlay, Lang-Bio mit Statement, 4 Chips, Aufklappen */
.lb-list{display:grid;gap:22px}
.lb{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:36px;padding:32px 34px;border:1px solid var(--line-soft);background:rgba(17,38,62,.35);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.lb h3{font-family:var(--f-display);font-weight:600;font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em;line-height:1.25}
.lb-role{margin-top:10px;font-size:.7rem;letter-spacing:.16em;line-height:1.6;color:var(--signal)}
.lb-chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.lb-chips li{font-size:.7rem;letter-spacing:.12em;line-height:1.45;color:var(--signal);border:1px solid var(--line);background:rgba(0,230,230,.04);padding:7px 10px}
.lb-quote{margin:0;padding:2px 0 2px 20px;border-left:2px solid var(--signal)}
.lb-quote p{font-family:var(--f-display);font-weight:500;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.4;color:var(--ink)}
.lb-quote .em{color:var(--ember)}
.lb-more{margin-top:20px;border-top:1px solid var(--line-soft)}
.lb-more summary{min-height:44px;display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.lb-more summary::-webkit-details-marker{display:none}
.lb-more summary::before{content:"+";font-size:1rem;width:14px}
.lb-more[open] summary::before{content:"–"}
.lb-more summary:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.lb-more p{color:var(--ink-dim);font-size:.95rem;line-height:1.72;max-width:70ch;margin-top:14px}
@media (max-width:1020px){.lb{grid-template-columns:1fr;gap:22px}.lb-chips{flex-direction:row;flex-wrap:wrap}}
@media (max-width:680px){.lb{padding:24px 20px}.lb h3{font-size:1.15rem}}

/* v31: Presse – Highlights zuerst */
.pr-item.pr-hl{border-left:2px solid var(--signal);padding-left:16px;background:linear-gradient(90deg,rgba(0,230,230,.05),transparent 60%)}
.pr-item .pr-badge{display:inline-block;margin-right:8px;padding:0 8px;font-family:var(--f-mono);font-weight:400;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);border:1px solid rgba(0,230,230,.5);vertical-align:2px}
/* v31: Presse-Logoband der Startseite – jedes Logo verlinkt auf den Artikel */
.press-strip > a:not(.press-bca){display:block;min-width:0}
.press-strip > a:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
/* v31: Bio-Kasten der Teamkarten – zwischen 1021 und ~1100 px reicht die Höhe knapp nicht (Bios v4, Punkt 9) */
.member .photo .bio{overflow-y:auto}

/* v32: Audit – Aufrufe in langen Strecken (Leitsatz-Band „Partner werden“, Glossar-Mitte, Für-wen je Segment) */
.rb-cta{position:relative;display:flex;justify-content:center;margin-top:34px}
.gl .gl-cta{grid-column:1/-1;margin:4px 0;padding:20px 22px;border:1px solid var(--line);background:rgba(17,38,62,.55)}
.seg-main .seg-cta{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;margin-right:10px;background:var(--ember);color:#0A1420;border:0;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.seg-main .seg-cta:hover{background:var(--ember-hot);color:#0A1420}
@media (max-width:680px){.seg-main .seg-cta{display:flex;justify-content:center;width:100%;margin-right:0}}
/* v32: Audit – Startseite gestrafft: Partnerstimmen im Netzwerk-Block, „Termin direkt buchen“ am Formular, Vertrauenszeile über volle Breite */
.hero ~ #nicht-allein .com-quotes,.hero ~ #nicht-allein .inl-cta{grid-column:1/-1}
.quote .who .wtxt em{display:none}   /* „[ Porträt folgt ]“ nicht zeigen – Platzhalter bleibt im Quelltext */
.conf-book{margin:18px 0 0}
.form-grid > .form-trust{grid-column:1/-1}
@media (hover:none){.group-cap span{display:none}}
@media (max-width:680px){.hero ~ #nicht-allein .hexmo{display:none}}
/* v32: Absende-Button bricht mobil nicht mehr um (Formular nutzt die Kartenbreite, schmalere Button-Ränder) */
@media (max-width:680px){
  .hx-in > #contactForm{margin-left:-14px;margin-right:-14px}
  #contactForm button[type=submit]{padding-left:16px;padding-right:16px;letter-spacing:.03em}
}
@media (max-width:360px){#contactForm button[type=submit]{font-size:.9rem}}
/* v32: ausgeblendete Slots und Datumsvarianten bleiben aus, auch wenn die Klasse ein display setzt (.btn, .video-ph) */
[data-ab][hidden],.video-ph[hidden],#faelle[hidden]{display:none!important}
/* v32: zwei Partnerstimmen (/netzwerk/) füllen am Desktop die ganze Zeile */
@media (min-width:1021px){.quotes.q2 .quote{grid-column:span 3}}
/* v32: Audit – visuelle Korrekturen aus der Sichtprüfung (375 + 1280 px) */
.sec-head p.eyebrow{color:var(--signal);font-size:.72rem;margin-top:0}   /* Abschnitts-Eyebrows wie überall klein und cyan (die Fließtext-Regel griff mit) */
.page-hero::before,.art-hero::before{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 92%);mask-image:linear-gradient(180deg,#000 55%,transparent 92%)}
.page-hero:has(.netz3d)::before{display:none}
.pr-item{grid-template-columns:190px 1fr}
.cr-cmp-l{font-size:.7rem}
.cr-cmp-row input{width:170px}
.cr-badges .fn-ref{border:0;padding:0;margin-left:2px}
.res-cta{margin-top:18px}
.res-cta + .calc-cta{display:table;margin-top:16px}
@media (min-width:1021px){.bento .cell-hl{grid-column:1/-1}}
.seg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:20px}
.seg-acts .sec-link{margin-top:0}
.seg-jump{flex-wrap:wrap;gap:10px}
.seg-jump .btn{padding:10px 16px}
.b2b-note{max-width:78ch}
body:has(.dk-next) .mcta{display:none!important}
.plate-sub,.pcard .pidx,.cell-hl .chip-hl,.cell .id,.bl-badge,.cr-badges > span,.gl dt .k,table.cmp thead th{font-size:.7rem}
.plate-sub{letter-spacing:.1em}
.foot .adr b,.gl dt .k,table.cmp thead th,.courtage th,.q5-n{font-weight:500}
.faq-item summary .ind{font-weight:400}
@media (max-width:680px){
  .ctabox .btn,.seg-acts .btn{width:100%;justify-content:center;margin:8px 0 0!important}
  .member .photo .bio{position:relative;z-index:2;background:var(--surface)}
  .dl-row a{font-size:.75rem}
  .cr-cmp-row input{flex:1 1 150px;width:auto}
  .seg-jump .btn{flex:1 1 calc(50% - 10px);justify-content:center}
}
.quote .qtext::before{content:"»\00a0"}
.quote .qtext::after{content:"\00a0«"}   /* schließendes « steht nie allein in einer Zeile */
.par{text-transform:none;white-space:nowrap}   /* „§ 34d“ bleibt in Großbuchstaben-Labels richtig geschrieben */
@media (max-width:680px){.hero ~ #presse .eyebrow{letter-spacing:.16em}.hero ~ #presse .eyebrow::after{display:none}}
/* v32: Porträts der Partnerstimmen im Hexagon (statt Initialen) */
.avx.avx-img{width:56px;height:64px;background:var(--surface);overflow:hidden}
.avx.avx-img img{display:block;width:100%;height:100%;object-fit:cover}
/* v32: Imagefilm (selbst gehostet, ohne Einwilligung) – Startseite #nicht-allein, /netzwerk/, /erfahrungen/ */
.film{display:grid;grid-template-columns:1.55fr 1fr;gap:34px;align-items:center;margin:8px 0 44px}
.hero ~ #nicht-allein .film{grid-column:1/-1;margin:0}
.film-v{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.film-v video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.film-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;padding:0;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ember);background:rgba(10,20,32,.62);color:var(--ember);font:inherit;font-size:1.6rem;cursor:pointer;
  clip-path:polygon(16% 0,100% 0,100% 84%,84% 100%,0 100%,0 16%);transition:background .2s,color .2s}
.film-play:hover,.film-play:focus-visible{background:var(--ember);color:var(--void);outline:none}
.film-play[hidden]{display:none}
.film-txt h3,.film-txt h2{font-family:var(--f-display);font-size:1.35rem;line-height:1.25;margin:8px 0 10px}
.film-txt p{margin:0;color:var(--ink-dim)}
.film-txt .film-k,.ev-t-body .film-k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--signal)}
.quotes + .film{margin-top:44px}
@media (max-width:1020px){.film{grid-template-columns:1fr;gap:18px}}
@media (max-width:680px){.film{margin:4px 0 36px}.film-play{width:64px;height:64px;font-size:1.4rem}.film-txt h3,.film-txt h2{font-size:1.15rem}}
/* v32: Events (/events/) – nächster Termin, Programm-Schilder */
.film-txt .sec-link{display:inline-block;margin-top:16px}
.ev-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:18px 0 0}
.ev-tags li{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--signal);border:1px solid var(--line);padding:6px 10px}
.ev-next{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;margin:8px 0 12px;padding:28px;border:1px solid var(--line);background:rgba(17,38,62,.45);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.ev-date{text-align:center;padding-right:24px;border-right:1px solid var(--line)}
.ev-date b{display:block;font-family:var(--f-display);font-weight:700;font-size:2rem;line-height:1.1;color:var(--signal)}
.ev-date span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--ink-dim)}
.ev-k{margin:0;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--signal)}
.ev-body h3{font-family:var(--f-display);font-size:1.4rem;line-height:1.25;margin:6px 0 8px}
.ev-body p:not(.ev-k){margin:0;color:var(--ink-dim)}
.ev-body .hero-ctas{margin-top:18px}
#rueckblick .film{margin-bottom:56px}
#warum .quotes{margin-top:34px}
@media (max-width:680px){
  .ev-next{grid-template-columns:1fr;gap:14px;padding:22px}
  .ev-date{text-align:left;padding:0 0 12px;border-right:0;border-bottom:1px solid var(--line)}
  .ev-date b{font-size:1.6rem}
  #rueckblick .film{margin-bottom:44px}
}
/* v32: Events-Unterseite (Workation) – Film 9:16, Programmkarten, Teaser auf /events/ */
.film-v.is-tall{aspect-ratio:9/16}
.film.film-t{grid-template-columns:minmax(0,340px) 1fr;gap:44px}
.ev-teaser{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:center;margin:8px 0 56px;padding:22px;border:1px solid var(--line);background:rgba(17,38,62,.45);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.ev-t-img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#000}
.ev-t-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .5s}
.ev-teaser:hover .ev-t-img img{transform:scale(1.04)}
.ev-t-play{position:absolute;inset:0;margin:auto;width:58px;height:58px;display:flex;align-items:center;justify-content:center;border:2px solid var(--ember);
  background:rgba(10,20,32,.62);color:var(--ember);font-size:1.25rem;clip-path:polygon(16% 0,100% 0,100% 84%,84% 100%,0 100%,0 16%)}
.ev-t-body h3{font-family:var(--f-display);font-size:1.35rem;line-height:1.25;margin:8px 0 10px}
.ev-t-body h3 a{color:var(--ink);text-decoration:none}
.ev-t-body h3 a:hover{color:var(--ember)}
.ev-t-body > p:not(.film-k){margin:0;color:var(--ink-dim)}
.ev-t-btn{margin-top:20px}
.ev-prog{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.ev-pc{border:1px solid var(--line-soft);background:rgba(17,38,62,.4);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.ev-pc img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover}
.ev-pb{padding:16px 18px 22px}
.ev-pb h3{font-family:var(--f-display);font-size:1.05rem;margin:8px 0 6px}
.ev-pb p:not(.ev-k){margin:0;color:var(--ink-dim);font-size:.92rem;line-height:1.6}
@media (max-width:1020px){.film.film-t{grid-template-columns:1fr;gap:18px}.film-t .film-v{max-width:360px;width:100%}.ev-prog{grid-template-columns:1fr 1fr}}
@media (max-width:680px){
  .ev-teaser{grid-template-columns:1fr;gap:18px;padding:16px}
  .ev-t-img{aspect-ratio:16/10}
  .ev-t-img img{object-position:50% 30%}
  .ev-prog{grid-template-columns:1fr;gap:12px}
  .ev-pc{display:grid;grid-template-columns:112px 1fr;align-items:stretch}
  .ev-pc img{aspect-ratio:auto;height:100%;min-height:140px}
  .ev-pb{padding:14px 16px}
}
/* v32: Partnerstimmen-Rondell – alle fünf Stimmen laufen als Endlosband (site.js); ohne JS bzw. bei reduzierter Bewegung wischbare Reihe */
.qr{position:relative;margin:0 0 34px;min-width:0;max-width:100%}
.hero ~ #nicht-allein .com-quotes{min-width:0}
.hero ~ #nicht-allein .qr{margin:0}
#warum .qr{margin:34px 0 0}
.qr + .film{margin-top:44px}
.qr-vp{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;contain:inline-size;   /* Breite nie vom Band ableiten (sonst wächst das Raster mit) */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.qr-vp::-webkit-scrollbar{display:none}
.qr-track{display:flex;gap:22px;width:max-content;padding:6px 0 10px}
.qr .quote{flex:0 0 360px;width:360px;scroll-snap-align:center}
.qr.is-run .qr-vp{overflow:hidden;scroll-snap-type:none;touch-action:pan-y}
.qr.is-run .qr-track{will-change:transform;cursor:grab;-webkit-user-select:none;user-select:none}
.qr.is-drag .qr-track{cursor:grabbing}
.qr.is-drag .quote{transition:none}
.qr-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-top:14px}
.qr-bar .sec-link{margin:0}
.qr-ctl{min-height:44px;padding:0 16px;background:transparent;border:1px solid var(--line);color:var(--ink-dim);cursor:pointer;
  font-family:var(--f-mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:color .2s,border-color .2s}
.qr-ctl:hover,.qr-ctl:focus-visible{color:var(--signal);border-color:var(--signal);outline:none}
.qr-ctl[hidden]{display:none}
@media (max-width:680px){
  .qr .quote{flex-basis:min(300px,80vw);width:min(300px,80vw);padding:24px 22px}
  .qr-track{gap:16px}
  .qr-vp{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
}
/* v32: Hero-Floater (schwebendes Hexagon rechts im Seitenkopf) wächst mit der Kopfhöhe – bei kurzen Köpfen (Rechtsseiten, Artikel)
   wurde es beim Schweben nach unten vom Rand abgeschnitten. Höhe begrenzt, Bild bleibt per contain proportional und mittig. */
.page-hero::before,.art-hero::before{max-height:calc(100% - 96px);
  -webkit-mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.3) 100%);mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.3) 100%)}
@media (max-width:680px){.page-hero::before,.art-hero::before{max-height:calc(100% - 84px)}}
/* v32: /vergleich/ – Handelsvertreter (§ 84 HGB) oder freier Makler, Zeile für Zeile (mobil gestapelt mit Kurzlabel) */
.hgb{margin-top:34px;border:1px solid var(--line-soft);background:rgba(17,38,62,.35)}
.hgb-head,.hgb-row{display:grid;grid-template-columns:210px 1fr 1fr}
.hgb-head{border-bottom:1px solid var(--line)}
.hgb-head b{padding:16px 22px;font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.hgb-head .hgb-hv{color:var(--ink-dim)}
.hgb-head .hgb-mk{color:var(--ember);background:rgba(229,150,67,.07)}
.hgb-row + .hgb-row{border-top:1px solid var(--line-soft)}
.hgb-k{margin:0;padding:18px 22px;font-family:var(--f-display);font-size:1rem;font-weight:600;line-height:1.35;color:var(--ink)}
.hgb-row p{margin:0;padding:18px 22px 18px 44px;position:relative;font-size:.93rem;line-height:1.6}
.hgb-row .hgb-hv{color:var(--ink-dim)}
.hgb-row .hgb-hv::before{content:"×";position:absolute;left:22px;top:18px;color:var(--ink-faint);font-family:var(--f-mono)}
.hgb-row .hgb-mk{color:var(--ink);background:rgba(229,150,67,.07)}
.hgb-row .hgb-mk::before{content:"◆";position:absolute;left:22px;top:23px;color:var(--ember);font-size:.62rem}
.hgb-neo{margin-top:26px;padding:24px 26px;border:1px solid rgba(229,150,67,.4);background:linear-gradient(135deg,rgba(229,150,67,.1),rgba(17,38,62,.4));
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.hgb-neo p:last-child{margin:6px 0 0;color:var(--ink-dim)}
.hgb-neo strong{color:var(--ember);font-weight:600}
.hgb-fn{margin:16px 0 0;max-width:78ch;font-size:.78rem;line-height:1.6;color:var(--ink-dim)}
@media (max-width:1020px){.hgb-head,.hgb-row{grid-template-columns:1fr 1fr}.hgb-head span{display:none}.hgb-k{grid-column:1/-1;padding-bottom:2px}}
@media (max-width:680px){
  .hgb-head{display:none}
  .hgb-row{grid-template-columns:1fr}
  .hgb-k{padding:16px 18px 6px}
  .hgb-row p{padding:10px 18px 12px}
  .hgb-row .hgb-hv::before,.hgb-row .hgb-mk::before{position:static;display:block;margin-bottom:4px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
  .hgb-row .hgb-hv::before{content:"× " attr(data-l)}
  .hgb-row .hgb-mk::before{content:"◆ " attr(data-l);font-size:.7rem}
  .hgb-neo{padding:20px 18px}
}
/* v32: Workation – geladene Gäste und Referenten */
.ev-guests{margin-top:34px;padding:26px 28px;border:1px solid var(--line);background:rgba(17,38,62,.45);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.ev-guests h3{font-family:var(--f-display);font-size:1.25rem;margin:8px 0 18px}
.ev-gl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ev-gl li{border:1px solid var(--line-soft);background:rgba(10,20,32,.5);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.ev-gl b{font-family:var(--f-display);font-size:1.1rem;font-weight:600;color:var(--ink)}
.ev-gl span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
@media (max-width:680px){.ev-gl{grid-template-columns:1fr}.ev-guests{padding:22px 20px}}
/* v32: „90 = 100“ räumlicher (Kunde) – tiefere Quader mit Licht und Schatten, Bodenschatten, gläserne Niveau-Ebene, Lichtlauf */
.hero ~ #neunzig .eq{--d:24px;padding-top:42px}
@media (max-width:680px){.hero ~ #neunzig .eq{--d:13px;padding-top:30px}}
.hero ~ #neunzig .eq-you{background:linear-gradient(180deg,#F2AC63 0%,#E59643 48%,#C67830 100%)}
.hero ~ #neunzig .eq-neo{background:linear-gradient(180deg,rgba(0,230,230,.34),rgba(0,230,230,.15))}
.hero ~ #neunzig .eq-solo{background:linear-gradient(180deg,rgba(147,169,194,.24),rgba(147,169,194,.09))}
.hero ~ #neunzig .eq-you::before{background:linear-gradient(90deg,#FFD9A6,#F6B56C);filter:none}
.hero ~ #neunzig .eq-neo::before{background:rgba(130,255,255,.44);filter:none}
.hero ~ #neunzig .eq-neo::after{background:linear-gradient(180deg,rgba(0,150,160,.62),rgba(0,85,95,.5));filter:none}
.hero ~ #neunzig .eq-solo::before{background:rgba(195,212,232,.34);filter:none}
.hero ~ #neunzig .eq-res::before{background:repeating-linear-gradient(135deg,rgba(147,169,194,.55) 0 3px,rgba(147,169,194,.14) 3px 7px);filter:none}
.hero ~ #neunzig .eq-res::after{background:repeating-linear-gradient(45deg,rgba(90,110,135,.6) 0 3px,rgba(90,110,135,.2) 3px 7px);filter:none}
.hero ~ #neunzig .eq-bar{isolation:isolate}
.hero ~ #neunzig .eq-bar::before{content:"";position:absolute;left:calc(var(--d) * .4);right:calc(var(--d) * -1);top:100%;height:calc(var(--d) * 1.1);
  background:rgba(0,0,0,.6);filter:blur(9px);transform:skewX(-45deg);transform-origin:0 0;pointer-events:none;z-index:-1}
.hero ~ #neunzig .eq .eq-bar{clip-path:inset(calc(var(--d) * -1 - 2px) 100% calc(var(--d) * -2 - 12px) -2px)}
.hero ~ #neunzig .eq.on .eq-bar{clip-path:inset(calc(var(--d) * -1 - 2px) calc(var(--d) * -1 - 4px) calc(var(--d) * -2 - 12px) -2px)}
.hero ~ #neunzig .eq-you::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%);background-size:260% 100%;background-position:120% 0}
.hero ~ #neunzig .eq.on .eq-you::after{animation:eqsheen 4.4s 1.7s ease-in-out infinite}
@keyframes eqsheen{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}
.hero ~ #neunzig .eq-mark::before{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--d);
  background:linear-gradient(180deg,rgba(0,230,230,.03),rgba(0,230,230,.17) 50%,rgba(0,230,230,.03));border-top:1px solid rgba(0,230,230,.5);
  transform:skewY(-45deg);transform-origin:0 0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hero ~ #neunzig .eq.on .eq-you::after{animation:none}}
/* v32: Presse-Kacheln öffnen sich beim Hovern (Tastatur: Fokus, Touch: erstes Antippen) und zitieren aus dem Artikel */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero ~ #presse{position:relative;z-index:6}
.press-strip > a.pt{position:relative}
.pq{--tx:-50%;position:absolute;top:100%;left:50%;width:min(330px,calc(100vw - 32px));z-index:30;
  display:flex;flex-direction:column;gap:8px;padding:18px 20px 16px;text-align:left;white-space:normal;
  background:linear-gradient(160deg,var(--surface-2),var(--void));border:1px solid rgba(0,230,230,.38);
  box-shadow:0 22px 50px rgba(0,0,0,.55);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  transform-origin:50% 0;transform:translateX(var(--tx)) perspective(700px) rotateX(-80deg);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .42s cubic-bezier(.2,.8,.25,1),opacity .22s,visibility 0s .42s}
.press-strip > a.pt:hover .pq,.press-strip > a.pt:focus-visible .pq,.press-strip > a.pt.is-open .pq{
  transform:translateX(var(--tx)) perspective(700px) rotateX(0deg);opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .42s cubic-bezier(.2,.8,.25,1),opacity .18s,visibility 0s}
.press-strip > a.pt.is-open img{transform:translateY(-3px);filter:drop-shadow(0 6px 18px rgba(0,230,230,.28))}
.pq-k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--signal)}
.pq-t{font-family:var(--f-body);font-size:.95rem;line-height:1.5;color:var(--ink);text-transform:none;letter-spacing:0}
.pq-c{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-dim);text-transform:none}
.pq-go{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--ember);margin-top:2px}
.press-bca .pq{text-transform:none}
/* BCA-Kachel: weiße Fläche als Pseudo-Element, damit der Eckschnitt (clip-path) die Zitatkarte nicht mit abschneidet;
   z-index statt isolation, sonst lag die Zitatkarte unter dem Link „Alle Berichte“ (24.10.) */
.press-strip > a.press-bca.pt{clip-path:none;background:transparent;box-shadow:none;z-index:2;text-decoration:none}
.press-strip > a.press-bca.pt::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
@media (min-width:1021px){
  .press-strip > a.pt:nth-child(-n+2) .pq{--tx:0%;left:0;transform-origin:20% 0}
  .press-strip > a.pt:nth-child(n+5) .pq{--tx:0%;left:auto;right:0;transform-origin:80% 0}
}
@media (max-width:1020px){
  .press-strip > a.pt:nth-child(3n+1) .pq{--tx:0%;left:0;transform-origin:20% 0}
  .press-strip > a.pt:nth-child(3n) .pq{--tx:0%;left:auto;right:0;transform-origin:80% 0}
}
@media (prefers-reduced-motion:reduce){.pq{transition:opacity .2s,visibility 0s .2s;transform:translateX(var(--tx))}
  .press-strip > a.pt:hover .pq,.press-strip > a.pt:focus-visible .pq,.press-strip > a.pt.is-open .pq{transform:translateX(var(--tx))}}
/* v32: Produktgeber – Auszug mit Versicherern und Fondsgesellschaften (Text, bis Logos vorliegen) */
.pg-names{max-width:920px;margin:18px auto 0;text-align:center;font-size:.9rem;line-height:1.6;color:var(--ink-dim)}
.pg-nk{display:block;margin-bottom:4px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--signal)}
.pg-groups{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:18px;margin-top:8px}
.pg-groups > div{border:1px solid var(--line-soft);background:rgba(17,38,62,.4);padding:18px 20px}
.pg-gk{margin:0 0 12px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:var(--signal)}
.pg-groups ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pg-groups li{padding:6px 10px;border:1px solid var(--line);background:rgba(10,20,32,.55);font-size:.88rem;color:var(--ink)}
@media (max-width:1020px){.pg-groups{grid-template-columns:1fr}}
/* v32: Produktwelt-Leistungslisten – auf sehr schmalen Handys einspaltig (lange Wörter wurden in der zweiten Spalte abgeschnitten) */
.pw-list li{min-width:0;overflow-wrap:break-word;hyphens:auto}
@media (max-width:400px){.pw-list{grid-template-columns:minmax(0,1fr)}}
/* v32: „und mehr“ am Ende jeder Produktgeber-Gruppe */
.pg-groups li.pg-more-li{border-style:dashed;color:var(--ink-dim);background:transparent;font-style:normal}
/* v32: Zielgruppen-Zeile unter dem Artikelkopf (Makler, Finanzdienstleister, Umsteiger) */
.art-for{margin:12px 0 0;font-family:var(--f-mono);font-weight:400;font-size:.78rem;letter-spacing:.04em;line-height:1.5;color:var(--signal)}
@media (max-width:680px){.art-for{font-size:.74rem}}
/* v32: Produktgeber-Band in drei Reihen – Versicherer · Investment · Pools & Partner (Logos von den Websites der Partner, 24.10.) */
.pg-track.pg-vers{animation:pg-scroll 60s linear infinite}
.pg-track.pg-inv{animation:pg-scroll-rev 56s linear infinite}
.pg-track.pg-pool{animation:pg-scroll 64s linear infinite}
@media (prefers-reduced-motion:reduce){.pg-track.pg-vers,.pg-track.pg-inv,.pg-track.pg-pool{animation:none}}

/* v32: Gesetzestexte als Quellen (GEO) – Blogartikel mit Rechtsbezug, /vergleich/#einordnung, /glossar/ */
p.law-src,.art-body>p.law-src{margin:28px 0 0;max-width:78ch;font-size:.8rem;line-height:2;color:var(--ink-dim)}
p.law-src span{font-family:var(--f-mono);font-weight:400;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-right:8px}
p.law-src a,.art-body>p.law-src a{color:var(--ink-dim);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;white-space:nowrap}
p.law-src a:hover,p.law-src a:focus-visible,.art-body>p.law-src a:hover,.art-body>p.law-src a:focus-visible{color:var(--signal);text-decoration-color:var(--signal)}
@media (max-width:680px){p.law-src span{display:block;font-size:.7rem}}

/* v32: BCA-Kachel wie die übrigen Presse-Kacheln – Label „Insider“ + Abzeichen „Cover“ im Stil von /presse/ (.pr-cover) */
.press-bca small,.plate-sub.pb{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--f-mono);font-weight:400;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#0A1420;text-decoration:none;white-space:nowrap}
.press-bca small b,.plate-sub.pb b{font-weight:400;padding:1px 6px 1px 7px;color:#0A1420;background:var(--ember);clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.plate-sub.pb{margin-left:12px}
@media (max-width:680px){.press-bca small{font-size:.5rem;gap:4px}.press-bca small b{padding:0 5px}}
/* v32: Maklerunternehmen der Gründer auf /ueber-uns/ verlinkt (Story-Panel und Bios) */
a.co-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(0,230,230,.55);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
a.co-link:hover,a.co-link:focus-visible{color:var(--signal);text-decoration-color:var(--signal)}
/* v32: Logos auf den Presse-Platten (/ueber-uns/) mit Luft zum Rand – beschnittene Logos füllten sonst die ganze Breite */
.plate img{max-width:84%}
/* v32 (Kunde 25.10.): Produktgeber-Band wieder als einzelne, getrennte helle Kacheln (Grundregeln .pgl in site.css) – Logos in
   Originalfarben und transparent, daher kein weißer Kasten mehr in der Kachel; fast quadratische Logos etwas größer */
.pgl img.lg-sq{height:36px}
/* v32 (25.10.): Presse-Kacheln auf Touch-Geräten nur über .is-open aufklappen – der :hover-Zustand beim Berühren ließ iOS den Klick verschlucken */
@media (hover:none){
  .press-strip > a.pt:hover:not(.is-open) .pq{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(var(--tx)) perspective(700px) rotateX(-80deg)}
  .press-strip img:hover{transform:none;filter:none}
}
/* v32 (Kunde 25.10.): Geschäftsführer als Autoren – Autorenzeile im Artikelkopf und Autorenbox vor der CTA-Box (tools/authors.py) */
.art-meta a.au-by{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--line);padding:6px 0 2px}
.art-meta a.au-by:hover,.art-meta a.au-by:focus-visible{color:var(--signal);border-bottom-color:var(--signal)}
.au-box{display:grid;grid-template-columns:88px 1fr;column-gap:20px;align-items:start;margin:40px 0 0;padding:22px 24px 12px;
  background:rgba(17,38,62,.5);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.au-box .au-img{grid-row:1 / span 3;width:88px;height:100px;background:var(--surface-2);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.au-box .au-img img{display:block;width:100%;height:100%;object-fit:cover}
.au-box p{margin:0}
.au-box .au-k{font-family:var(--f-mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.au-box .au-n{margin-top:6px;font-family:var(--f-display);font-weight:600;font-size:1.15rem;line-height:1.25;color:var(--ink)}
.au-box .au-r{margin-top:4px;font-family:var(--f-mono);font-weight:400;font-size:.72rem;letter-spacing:.06em;line-height:1.5;text-transform:uppercase;color:var(--ink-dim)}
.au-box .au-t{margin-top:12px;font-size:.94rem;line-height:1.65;color:var(--ink-dim)}
.au-box a.au-l{justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-mono);font-weight:400;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--signal);text-decoration:none}
.au-box a.au-l:hover,.au-box a.au-l:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media (max-width:680px){
  .au-box{grid-template-columns:64px 1fr;column-gap:14px;padding:18px 16px 8px}
  .au-box .au-img{grid-row:auto;width:64px;height:73px}
  .au-box .au-head{align-self:center}
  .au-box .au-t,.au-box a.au-l{grid-column:1 / -1}
  .au-box .au-t{margin-top:14px}
}
@media print{.au-box{clip-path:none;border:1px solid #999}}
/* v32 (25.10.): /ueber-uns/ – aufklappbare Liste „Artikel von …“ je Gründer (tools/authors.py) */
.lb-arts ul{list-style:none;margin:8px 0 0;padding:0;max-width:70ch}
.lb-arts li{margin:0;border-top:1px solid var(--line-soft)}
.lb-arts li:first-child{border-top:none}
.lb-arts a{display:flex;align-items:center;min-height:44px;padding:8px 0;color:var(--ink-dim);text-decoration:none;font-size:.95rem;line-height:1.5}
.lb-arts a::before{content:"◆";flex:0 0 auto;margin-right:12px;font-size:.6rem;color:var(--ember)}
.lb-arts a:hover,.lb-arts a:focus-visible{color:var(--signal)}
/* v32 (25.10.): Vertiefungs-Links zu Blogartikeln auf Themenseiten (/umstieg/, /white-label/) */
.deep-links{margin-top:34px;padding:20px 22px 12px;border:1px solid var(--line);background:rgba(17,38,62,.4);max-width:880px}
.deep-links .dl-t{margin:0 0 6px;font-family:var(--f-mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.deep-links ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.deep-links li{margin:0;border-top:1px solid var(--line-soft)}
.deep-links a{display:flex;align-items:center;min-height:48px;padding:10px 0;color:var(--ink);text-decoration:none;font-size:.95rem;line-height:1.45}
.deep-links a::before{content:"◆";flex:0 0 auto;margin-right:12px;font-size:.6rem;color:var(--ember)}
.deep-links a:hover,.deep-links a:focus-visible{color:var(--signal)}
@media (max-width:680px){.deep-links{padding:16px 16px 8px}.deep-links ul{grid-template-columns:1fr}}
/* v32 (28.10., iPhone 16 Pro): Produktgeber-Band ruckelte beim Öffnen. Abstand am Ende = Lücke zwischen den beiden Hälften, damit
   -50 % genau eine Runde ist (vorher sprang das Band am Schleifenende um eine halbe Lücke); 3D-Verschiebung auf eigener Ebene, damit
   Safari die breite Reihe nicht bei jedem Bild neu zeichnet; das Band selbst ohne Reveal (Safari baute die laufenden Reihen nach dem
   Einblenden neu auf). Auf Touch-Geräten Originalfarben ohne Filter (dort gibt es keinen Hover) */
@keyframes pg-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes pg-scroll-rev{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.pg-track{padding-right:14px;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
@media (hover:none){.pgl img{filter:none}.pgl:hover{transform:none;box-shadow:none}}