/* ============================================================================
   FinanzMehrwert — CI-Schicht nach Design Guide v5.6  (fmw-ci.css)
   Wird als LETZTES <link> im <head> geladen und gewinnt so die Kaskade.
   Befunde: G-01..G-04 (Fonts), G-08 (Headline-Farbe), G-20..G-26 (Buttons),
            B-01 (Fokus), G-34 (Reduced Motion), G-40 (Orange-Linie), Tokens A.1
   ========================================================================== */

/* ---- Webfonts, self-hosted, relativ = same-origin ------------------------ */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/dm-sans-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/inter-400-italic.woff2") format("woff2")}
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/dm-serif-display-400.woff2") format("woff2")}

/* ---- Tokens (Anhang A.1) ------------------------------------------------- */
:root{
  --fmw-navy:#101550; --fmw-navy-light:#3f4eab; --fmw-navy-lighter:#707ecf; --fmw-navy-dark:#060a37;
  --fmw-surface:#e6e9f7; --fmw-surface-light:#f5f6fa;
  --fmw-orange:#ffa006; --fmw-orange-light:#ffb133; --fmw-orange-active:#d48300;
  --fmw-aqua:#039be5; --fmw-aqua-text:#0277bd; --fmw-aqua-surface:#e8f6fe;
  --fmw-green:#059669; --fmw-berry:#ba3d7e;
  --fmw-text:#2d3142; --fmw-text-secondary:#5c6378;
  --fmw-sans:"DM Sans","Segoe UI","SF Pro Display",system-ui,sans-serif;
  --fmw-body:"Inter",Arial,Helvetica,sans-serif;
  --fmw-serif:"DM Serif Display",Georgia,serif;
}

/* ---- Typografie-Familien (G-01..G-04) ------------------------------------ */
/* Body = Inter, Headlines/Nav/Buttons = DM Sans 700 */
html body{font-family:var(--fmw-body)!important}
body h1, body h2, body h3, body h4, body h5, body h6,
body .dm, body nav a, body .btn, body [class*="btn"], body button, body .fmw-cta,
body .eyebrow, body th{font-family:var(--fmw-sans)!important}
body h1, body h2, body h3, body h4, body h5, body h6{font-weight:700!important;letter-spacing:-.01em}
/* Größen-Skala (G-05/G-06): Headlines auf Guide-Skala kappen, responsiv */
body h1{font-size:clamp(36px, 6vw, 66px)!important; line-height:1.12!important}
body h2{font-size:clamp(26px, 3.8vw, 40px)!important; line-height:1.25!important}
body h3{font-size:clamp(18px, 2.2vw, 22px)!important; line-height:1.35!important}
body h4{font-size:clamp(16px, 1.6vw, 18px)!important; line-height:1.4!important}

/* ---- Buttons (G-20..G-26, Anhang A.2) ------------------------------------ */
/* CTA Grundform: BEIDE Varianten – 6px, KEIN Drop-Shadow, KEIN transform-Lift (beides wollte User weg).
   ABER: Inset-Bevel (Glanz oben + Schatten unten) wie bei den .mko-Icons = der „Border-Effekt", den der
   User auf allen Buttons wollte. Hover = nur Hintergrundfarbe wechselt, Bevel bleibt. Struktur unverändert. */
body .fmw-cta, body a.fmw-cta{
  border:0!important; border-radius:999px!important; box-shadow:none!important;
  padding:15px 30px!important; min-width:130px; width:auto!important; white-space:nowrap!important;
  font-weight:700!important; font-size:16px!important; letter-spacing:.02em!important;
  transition:filter .2s ease!important;
}
/* Primär-CTA: Orange-Verlauf + marginaler Glas-Glanz (Gradient-Overlay, KEIN Shadow) */
body .fmw-cta:not(.fmw-alt), body a.fmw-cta:not(.fmw-alt){
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.07) 42%,rgba(255,255,255,0) 55%,rgba(0,0,0,.05)),linear-gradient(135deg,#ffb733,#ffa006 45%,#d48300)!important;
  color:var(--fmw-navy)!important; box-shadow:none!important;
}
/* Sekundär-CTAs (fmw-alt) = Navy-Verlauf + Glas-Glanz; dunkle Variante .fmw-alt-dark bleibt hellblau (Override) */
body .fmw-cta.fmw-alt:not(.fmw-alt-dark){
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 55%,rgba(0,0,0,.08)),linear-gradient(135deg,#2b338f,#101550)!important;
  color:#fff!important; box-shadow:none!important;
}
/* Hover: nur aufhellen – NIE Shadow, NIE Lift */
body .fmw-cta:hover{ filter:brightness(1.06)!important; box-shadow:none!important; transform:none!important; }
body .fmw-cta.fmw-alt:hover{ filter:brightness(1.14)!important; box-shadow:none!important; transform:none!important; }
body .fmw-cta:active{ filter:brightness(.97)!important; box-shadow:none!important; }
/* Pfeil ohne weißen Kreis/Kasten (G-24) – hohe Spezifität gegen Legacy-Override */
body .fmw-cta .a, body .fmw-cta.fmw-alt .a, body .fmw-cta.fmw-alt.fmw-alt-dark .a,
body .btn .a, body .btn-primary .a, body [class*="btn"] .a, body a[class*="cta"] .a, body .mkcta .a{
  background:transparent!important; background-image:none!important; box-shadow:none!important;
  border:0!important; border-radius:0!important; width:auto!important; height:auto!important;
  min-width:0!important; min-height:0!important; padding:0 0 0 8px!important; color:inherit!important;
}
body .fmw-cta .a svg{color:inherit!important}
body .fmw-cta .a svg [stroke]{stroke:currentColor!important}
body .fmw-cta .a svg [fill]:not([fill="none"]){fill:currentColor!important}

/* Primary: flach Navy #101550, weiße Schrift, RUND (Pille), KEIN Shadow */
body .btn-primary:not(.fmw-cta), body .cbtn.btn-primary:not(.fmw-cta){
  background:var(--fmw-navy)!important; background-image:none!important; color:#fff!important;
  border:0!important; border-radius:999px!important; box-shadow:none!important;
  font-weight:700!important; letter-spacing:.02em!important; transition:filter .2s ease!important;
}
body .btn-primary:not(.fmw-cta):hover{filter:brightness(1.12)!important; box-shadow:none!important; transform:none!important}
body .btn-primary:not(.fmw-cta):active{filter:brightness(.97)!important; box-shadow:none!important}

/* ALLE Buttons: rund + NIE Box-Shadow (Kundenwunsch, absolut) */
body .btn, body .btn-primary, body .btn-secondary, body .cbtn, body .mkcta, body .rgx-btn,
body .rg-cta, body .fl-cta, body .pr-btn, body button.rgx-btn, body .toc-cta{
  border-radius:999px!important; box-shadow:none!important;
}
body .btn:hover, body .btn-primary:hover, body .btn-secondary:hover, body .cbtn:hover, body .mkcta:hover,
body .rgx-btn:hover, body .rg-cta:hover, body .fl-cta:hover, body .pr-btn:hover, body .toc-cta:hover{box-shadow:none!important}
/* Cookie-Consent- + sonstige höher-spezifische Buttons rund + schattenlos */
body .cookie-actions .cbtn, body .cookie-inner .cbtn, body .mobile-menu .fmw-cta, body .mobile-menu a.mm-cta{border-radius:999px!important; box-shadow:none!important}

/* ---- Skip-Link (B-02, a11y 3.4) ------------------------------------------ */
.fmw-skip{position:absolute; left:-9999px; top:0; z-index:100000; background:var(--fmw-navy); color:#fff!important;
  padding:12px 20px; font-family:var(--fmw-sans); font-weight:700; font-size:14px; text-decoration:none; border-radius:0 0 6px 0}
.fmw-skip:focus{left:0}

/* ---- Fokus (B-01, a11y 3.1) ---------------------------------------------- */
:focus-visible{outline:2px solid var(--fmw-aqua)!important; outline-offset:2px; border-radius:4px}
.fmw-on-navy :focus-visible, .dark :focus-visible{outline-color:#fff!important}

/* ---- Header: full-width statt schwebende Pille (G-60) -------------------- */
body #hdr{background:#fff!important; border-bottom:1px solid var(--fmw-surface)!important;
  box-shadow:none!important; padding:0!important; margin:0!important; border-radius:0!important;
  position:sticky; top:0; left:0; right:0; width:100%!important; max-width:none!important}
body #hdr .wrap.nav, body #hdr > .wrap, body #hdr .nav{
  background:transparent!important; border-radius:0!important; box-shadow:none!important; border:0!important;
  max-width:1280px!important; margin:0 auto!important; padding:14px 24px!important; min-height:72px;
}
/* Linke/rechte Kante bündig: Header + Hero + Sektionen auf einen 40px-Gutter (nur Desktop; mobil 24px) */
@media(min-width:900px){
  body #hdr .wrap.nav, body #hdr > .wrap, body #hdr .nav{padding-left:40px!important; padding-right:40px!important}
  body .sec .wrap, body section > .wrap, body .sec > .wrap{padding-left:40px!important; padding-right:40px!important}
}

/* Radien off-scale → Skala (G-30/G-31): Cards 12px, Dropdown 8px */
body .stv-card, body .stv-call, body .vs-col, body .tm-card, body .doc,
body .lf-cardinner, body .map-box, body .kal-card, body .kal-img,
body .tl-media, body .tl-mock, body .vd-frame, body .kal-img{border-radius:12px!important}
body .drop-panel{border-radius:8px!important}
/* Transparente .sec / Footer bleiben full-bleed flach; farbige Panels (dark/soft/alt) gerundet
   (User-Regel: Radius überall, IMMER gleich = 12px, keine eckigen Boxen) */
body section.sec:not(.dark):not(.soft):not(.alt){border-radius:0!important}
body .sec.dark, body .sec.soft, body .sec.alt, body footer.footer{border-radius:12px!important}
body .mobile-menu{border-radius:12px!important}
/* Off-scale Komponenten-Radien auf Skala (G-30) */
body .m3-it, body .stv-opt, body .stv-row, body .stv-row.hl, body .dseal{border-radius:8px!important}
body .nav-toggle, body .cookie-ic, body .ck-cat, body .rev-link, body .faq-morebtn{border-radius:6px!important}
/* Keine Inset-/Schwarz-3D-Schatten (G-32) – nur Navy-Basis erlaubt */
body .num, body span.num, body .glassbox, body .vs-off, body .ski-cd, body .ski-cd.sel{box-shadow:none!important}
body .doc{box-shadow:0 4px 16px rgba(16,21,80,.08)!important; background:var(--fmw-surface)!important} /* leichter Schatten = User-Ausnahme */

/* ---- Logo-Sizing (G-61 Header Horizontal 32–40px, G-72 Footer) ----------- */
#hdr .logo-img, header#hdr .logo-img, header .logo .logo-img{
  height:34px!important; width:auto!important; max-width:none!important;
  aspect-ratio:3605 / 458; object-fit:contain!important;
}
.footer .logo-img, .fmw-footer .fmw-foot-logo{height:84px!important; width:auto!important; max-height:84px!important;
  aspect-ratio:1504 / 468; object-fit:contain!important}

/* ---- Orange-Akzentlinie unter Seitentitel-H1 (G-40) ---------------------- */
.fmw-title-line::after{content:""; display:block; width:60px; height:3px; margin-top:6px; background:var(--fmw-orange); border-radius:0}

/* ---- Links im Fließtext (G-50) ------------------------------------------- */
body .rgx-body a:not(.fmw-cta):not(.btn):not([class*="btn"]),
body .post-content a:not(.fmw-cta):not(.btn):not([class*="btn"]){color:var(--fmw-aqua-text)!important; text-decoration:none}
body .rgx-body a:not(.fmw-cta):hover, body .post-content a:not(.fmw-cta):hover{text-decoration:underline}

/* ---- Aqua-Pinselbogen entfernen (G-41: war 5–7x/Seite, Soll max 1x) ------ */
/* Der Legacy-Layer legte den Aqua-Bogen unter viele Headlines. Raus damit;
   der Marken-Akzent ist die Orange-Linie unter H1 (G-40), nicht der Aqua-Bogen. */
body .grad-orange, body .grad-blue,
body .kz-h2 b, body .mk-h2 b, body .mk-h2 .grad-blue,
body .heroX h1 .o,
body .fl-h1 .grad-orange, body .fl-h1 .grad-blue,
body .mk-h1 .grad-blue, body .mk-h1 .grad-orange,
body .kz-u{
  background:none!important; background-image:none!important;
  -webkit-text-fill-color:currentColor!important; color:inherit!important;
  padding-bottom:0!important; display:inline!important;
}
body .kz-u::after{display:none!important; content:none!important}

/* ---- Navy-Verläufe → flache Flächen (G-10/G-11) -------------------------- */
/* Verläufe gibt es nur im Logo. Hero flach Navy + ohne Rundung (G-10). */
body .heroX{background:var(--fmw-navy)!important; border-radius:0!important}
body .heroX .ov{display:none!important}
body .vd-frame{background:var(--fmw-navy)!important}
body .tl-media.tl-mock, body .tl-mock, body .tl-media{background:var(--fmw-navy)!important; background-image:none!important}
/* Navy-Icon-Kacheln / Badges / Nav-Buttons → flach (G-11, G-95) */
body .kz-ritem-ic, body .kz-lev-ic, body .kz-feat-nav button, body .kz-fcard a,
body .kal-badge, body .mm-cta, body .ski-cd.sel, body .kz-piece.o{
  background:var(--fmw-navy)!important; background-image:none!important;
}
body .kz-fit-img{background:var(--fmw-surface)!important; background-image:none!important}
/* Zahlen nie Orange (G-51): Orange→Navy-Gradient-Text → solid Aqua */
body .pn, body .kz-piece:not(.o) .pn{background:none!important; -webkit-text-fill-color:var(--fmw-aqua)!important; color:var(--fmw-aqua)!important}

/* ---- Keine gekippten Elemente (G-33) – NICHT .kz-piece (Scroll-Montage-Transform!) */
body .rev-diag, body .ueb-pola, body .vs-card{transform:none!important}

/* ---- Bewertungssterne Orange statt Aqua/Grün (G-15, Ausnahme Trustpilot) -- */
body .stars:not(.trustpilot) svg, body .rating:not(.trustpilot) svg{color:var(--fmw-orange)!important;fill:var(--fmw-orange)!important}

/* ========================================================================== */
/* Komponenten (G-43..G-55)                                                    */
/* ========================================================================== */
/* Status-/Highlight-Box „Das Wichtigste in Kürze" (G-43): Navy-Fläche →
   Surface + 4px Balken links, kein Radius/Schatten */
body .rg-callout{
  background:var(--fmw-surface)!important; background-image:none!important;
  border:0!important;
  border-radius:12px!important; box-shadow:none!important;
}
body .rg-callout, body .rg-callout p, body .rg-callout li, body .rg-callout span,
body .rg-callout div{color:var(--fmw-text)!important}
body .rg-callout h2, body .rg-callout h3, body .rg-callout h4,
body .rg-callout b, body .rg-callout strong{color:var(--fmw-navy)!important}

/* Tabellen (G-48): Navy-Kopf, weiße Versalien, Zebra, Zahlen rechts */
body .rg-table th, body table th{
  background:var(--fmw-navy)!important; color:#fff!important;
  font-family:var(--fmw-sans)!important; font-weight:700!important; font-size:12px!important;
  letter-spacing:.01em;
}
body .rg-table tbody tr:nth-child(even) td, body table tbody tr:nth-child(even) td{background:var(--fmw-surface)!important}
body .rg-table td.num, body .rg-table td[align="right"]{text-align:right; font-variant-numeric:tabular-nums}

/* Fließtext-Links im Artikel (G-50): Aqua ohne Unterstreichung */
body .rg-body a:not(.fmw-cta):not([class*="btn"]):not([class*="cta"]),
body article a:not(.fmw-cta):not([class*="btn"]):not([class*="cta"]){color:var(--fmw-aqua-text)!important; text-decoration:none}
body .rg-body a:not(.fmw-cta):hover, body article a:not(.fmw-cta):hover{text-decoration:underline}

/* Checklisten-Häkchen grün (G-49) */
body .checklist .m{color:var(--fmw-green)!important}

/* FAQ-Akkordeon Radius 8px (G-47) */
body .faq-item, body .rgx-faq .faq-item, body .kz-faq .faq-item{border-radius:12px!important}

/* Boxen: gefüllte Fläche #e6e9f7, NIE Rahmen, NIE Schatten (User-Regel, override G-46/44).
   .vs-col NICHT (weißer Text auf Navy). Auf .sec.soft (lavendel) → weiß, sonst unsichtbar. */
body .rev-card, body .dw-card, body .frh-card, body .rgx-card, body .rgx-fcard,
body .team-card, body .pcard, body .lcard, body .svc-card,
body .lf-cardinner, body .stv-card, body .kal-card, body .tm-card{
  background:var(--fmw-surface)!important; background-image:none!important;
  border:0!important; box-shadow:none!important; border-radius:12px!important;
}
body .sec.soft .rev-card, body .sec.soft .dw-card, body .sec.soft .frh-card,
body .sec.soft .rgx-card, body .sec.soft .rgx-fcard, body .sec.soft .team-card,
body .sec.soft .pcard, body .sec.soft .lcard, body .sec.soft .svc-card,
body .sec.soft .lf-cardinner, body .sec.soft .stv-card, body .sec.soft .kal-card,
body .sec.soft .tm-card{ background:#fff!important; }
/* Karten-Headlines (h3) etwas größer */
body .rev-card h3, body .dw-card h3, body .lf-cardinner h3, body .stv-card h3,
body .kal-card h3, body .tm-card h3, body .svc-card h3, body .team-card h3,
body .frh-card h3, body .rgx-card h3, body .pcard h3, body .lcard h3{
  font-size:clamp(23px, 2.2vw, 26px)!important;
}
/* Testimonial-Sterne Orange (G-44); echte Trustpilot-Sterne bleiben grün (E-10) */
body .rev-card .stars:not(.trustpilot) svg, body .rev-card .star:not(.trustpilot){color:var(--fmw-orange)!important; fill:var(--fmw-orange)!important}

/* Formularfelder (G-53): weiß, 1px navy-lighter, 6px */
body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
body select, body textarea{
  background:#fff!important; border:1px solid var(--fmw-navy-lighter)!important; border-radius:6px!important;
}

/* TOC aktiver Punkt Aqua-Link statt Aqua-KEY (G-13) */
body .rgx-toc a.active, body .rgx-toc .active{color:var(--fmw-aqua-text)!important}

/* Eyebrows einheitlich Aqua-Pill (G-42) */
body .eyebrow{
  display:inline-block!important; background:var(--fmw-aqua-surface)!important;
  color:var(--fmw-navy)!important; -webkit-text-fill-color:var(--fmw-navy)!important;
  border:0!important; border-radius:9999px!important; padding:4px 12px!important;
  font-family:var(--fmw-body)!important; font-weight:500!important; font-size:12px!important; letter-spacing:.04em;
}

/* Touch-Ziele ≥44px (B-07) */
@media (hover:none), (max-width:900px){
  body [class*="share"] a, body [class*="share"] button,
  body [class*="toggle"] button, body .teilen a, body .toc-toggle{min-width:44px!important; min-height:44px!important}
}

/* Floating Widgets mobil kompakt, nichts verdecken (G-97, B-05) */
@media (max-width:600px){
  body .fab{bottom:10px!important; right:10px!important; gap:8px!important; max-width:64vw!important}
}
body{scroll-padding-top:84px}

/* Cookie-Banner: Bottom-Bar full-width, Buttons gleich gewichtet (P0-10) */
body .cookie{align-items:flex-end!important; background:rgba(16,21,80,.22)!important}
body .cookie-inner{max-width:none!important; width:100%!important; border-radius:0!important;
  border-top:1px solid var(--fmw-surface)!important; box-shadow:0 -8px 32px rgba(16,21,80,.12)!important}
body .cookie-actions{justify-content:flex-end!important}
body .cookie-actions a, body .cookie-actions button, body .cookie-actions .fmw-cta{
  background:#fff!important; background-image:none!important; color:var(--fmw-navy)!important;
  border:1px solid var(--fmw-navy)!important; border-radius:6px!important; box-shadow:none!important;
  font-weight:700!important; padding:12px 24px!important; min-width:150px;
}
body .cookie-actions a:hover, body .cookie-actions button:hover{background:var(--fmw-surface)!important}

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

/* ====== User-Wünsche (v24) ====== */
/* Scroll-Hinweis: Fade an der rechten Kante des „Du willst"-Sliders */
body .dw-track{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 90px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 90px),transparent);
}
/* Team-Cards größer + Namen in Navy (nicht Aqua) */
body .ueb-polas{flex-wrap:wrap!important; justify-content:center!important}
body .ueb-pola{min-width:230px!important}
body .ueb-pola img{width:205px!important; height:auto!important}
/* Team-Name navy – MUSS text-fill-color überschreiben (Zeile 165 macht .pn aqua) */
body .ueb-pola .pn{color:var(--fmw-navy)!important; -webkit-text-fill-color:var(--fmw-navy)!important; background:none!important}
/* FAQ-Fragen einzeilig: kleiner + kein Umbruch (Desktop) */
body .faq-head h3, body .faq-item h3{font-size:clamp(14px,1.5vw,17px)!important; line-height:1.3!important}
@media(min-width:600px){ body .faq-head h3, body .faq-item h3{white-space:nowrap!important} }
/* Boxen nie Rahmen/Schatten: Rest-Fälle (Konzept, Bild-Frames) */
body .kal-img{border:0!important}
/* Johannes-Namensbadge (.kz-jbadge-card): Original-Border zurück, definiert die abgerundete Karte
   (User „border-radius richtig machen" – ohne Border wirkte der 12px-Radius unfertig). */
body .kz-jbadge-card{border:1px solid #e6e9f7!important; border-radius:12px!important; background:#fff!important}
body .kz-piece{box-shadow:none!important}
/* Bild-Ecken sauber an den Karten-Radius klippen */
body .kal-card, body .lf-cardinner{overflow:hidden!important}
/* „Mit FinanzMehrwert"-Vergleichskarte: weniger Neigung + mehr Abstand zur Headline */
/* KEINE Drehung mehr: rotate() rastert den Text → unscharf (User). Karte bleibt durch Rand/Schatten/margin hervorgehoben */
body .vs-col.vs-on{transform:none!important; margin-top:28px!important}
/* SCHÄRFERE SCHRIFT (User „font teilweise unscharf, global"): das global gesetzte -webkit-font-smoothing:antialiased
   rendert auf Windows-Chrome grayscale/dünn (wirkt weich, v.a. weiße Schrift auf Navy) → zurück auf Browser-Default
   (Subpixel-Rendering) = scharf. */
html, body, body *{-webkit-font-smoothing:auto!important; -moz-osx-font-smoothing:auto!important}
/* Doc-Mockup-Karten einheitlich 12px (Radius überall gleich) */
body .doc{border-radius:12px!important}
/* Blog-Boxen alle einheitlich 12px (Infobox, Side-/Mid-CTA, Autorenbox, Tabelle) */
body .rgx-info, body .rgx-sidecta, body .rgx-midcta, body .rgx-authorbox, body .rg-table{border-radius:12px!important}
body .rgx-midcta{overflow:hidden!important}
/* LP-Tarifkarte (.stv-cmp auf Navy): graue Texte #5c6378 → weiß */
body .stv-cmp b, body .stv-cmp .p span{color:#fff!important}
body .stv-cmp u.no{color:rgba(255,255,255,.72)!important}
body .stv-cmp u.no .stv-dash{background:rgba(255,255,255,.72)!important}
/* Newsletter-Box (Ratgeber): Radius 12px, Input ohne Rahmen */
body .rgx-news{border-radius:12px!important}
body .rgx-news-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]){border:0!important; box-shadow:none!important}
/* Sort-Select: appearance:none hatte KEINEN Chevron → eigener Chevron rechts */
/* === Blog-Artikel-Feinschliff === */
/* Artikel-H1 moderater als der Home-Hero */
body .rgx-arthero-tx h1{font-size:clamp(30px,4.6vw,46px)!important}
/* H2 im Blog IMMER klar kleiner als H1 (Hierarchie H1 46 > H2 ~31 > H3 22); lief vorher auf 38.9px = fast gleich groß */
body .rg-prose h2, body .rgx-artbody h2, body article .rg-prose h2{font-size:clamp(25px,2.8vw,31px)!important; line-height:1.25!important}
/* Header-CTA kompakter (CTA-Grundform war fürs Blog/Header zu groß) */
body #hdr .fmw-cta{padding:10px 20px!important; font-size:14px!important; min-width:0!important}
/* Sticky/Floating-Fab = Banner-Tier: Text kleiner (14px) als Content-Buttons (16px) */
body .fab .fab-cta, body .fab-cta{font-size:14px!important}
/* Fab „Beratungstermin vereinbaren": Hintergrund = Marken-Hellblau statt Weiß (User) */
body .fab-cta{background:#e6e9f7!important}
/* Leistungs-Hero-Checkliste (.mk-chips): Text NICHT fett, gleiche Schriftstärke wie der Absatz drüber (400) */
body .mk-chips, body .mk-chips li, body .mk-chips span{font-weight:400!important}
/* Sidebar-CTA: kurzes Label „Erstgespräch buchen", KLEIN + EINZEILIG (nowrap, KEIN Umbruch),
   volle Breite zentriert in der schmalen Spalte; Pfeil weg = clean */
body .rgx-sidecta .fmw-cta, body .rgx-sidecta a[class*="cta"], body .rgx-sidecta .btn{
  display:flex!important; width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important;
  padding:10px 16px!important; font-size:14px!important; line-height:1.2!important;
  white-space:nowrap!important; text-align:center!important; justify-content:center!important; align-items:center!important;
  overflow:hidden!important; height:auto!important;
}
body .rgx-sidecta .fmw-cta .a, body .rgx-sidecta a[class*="cta"] .a{display:none!important}
/* In-Beitrag-CTA-Box: Button niedriger; Überschrift größer; Subtext zwischen Headline & Liste raus */
body .rgx-midcta .fmw-cta, body .rgx-midcta a[class*="cta"], body .rgx-midcta .btn{padding:13px 26px!important; font-size:14px!important; min-width:0!important; white-space:nowrap!important}
body .rgx-midcta h4{font-size:clamp(22px,2.5vw,27px)!important}
body .rgx-midcta h4 + p{display:none!important}
/* Callout-Close-Icon in Navy (war weiß = unsichtbar auf Surface) */
body .rgx-callout-x, body .rgx-callout-x svg{color:var(--fmw-navy)!important; stroke:var(--fmw-navy)!important; background:transparent!important}
/* Callout-Toggle-Kreuz größer + smoothere Drehung (Bounce raus) */
body .rgx-callout-x svg{width:26px!important; height:26px!important; transition:transform .42s cubic-bezier(.22,1,.36,1)!important}
/* „Wusstest Du"-Badge: Icon optisch vertikal mittig (saß minimal zu tief) */
body .rgx-info-badge svg{transform:translateY(-1.5px)!important}
/* Blog-Prosa-Listen: weniger eingerückt + Marker in Navy (unser dunkleres Blau) */
body .rg-prose ul, body .rg-prose ol{padding-left:22px!important}
body .rg-prose li::marker{color:var(--fmw-navy)!important}
/* CTA-Box-Checklisten NICHT einrücken (sie liegen z.T. in .rg-prose → sonst 22px Einzug) */
body .rgx-ctachk, body .rg-prose .rgx-ctachk{padding-left:0!important}
body .rgx-ctachk li::marker{color:transparent!important}
/* Blog-Listen-Karten-Titel exakt so groß wie Featured 22px (Konsistenz; war durch Card-H3-Regel zu groß) */
body .rgx-card h3{font-size:22px!important}

/* ===================== MOBILE-MENÜ (on-brand Navy-Panel) ===================== */
/* Hamburger-Linien → X wenn offen */
body .nav-toggle{z-index:10000!important; position:relative!important}
body .nav-toggle span{transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .2s ease!important; transform-origin:center!important}
body.mm-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
body.mm-open .nav-toggle span:nth-child(2){opacity:0!important}
body.mm-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}

@media(max-width:900px){
  /* Panel: vollflächig unter dem Header, Navy, slide-down + fade */
  body .mobile-menu{
    position:fixed!important; left:0!important; right:0!important; top:72px!important; bottom:0!important;
    width:100%!important; max-width:none!important; height:auto!important; max-height:none!important;
    background:var(--fmw-navy)!important; z-index:9998!important; border-radius:0!important;
    display:flex!important; flex-direction:column!important; align-items:stretch!important;
    padding:22px 24px calc(26px + env(safe-area-inset-bottom))!important; gap:0!important;
    overflow-y:auto!important; -webkit-overflow-scrolling:touch!important;
    opacity:0!important; visibility:hidden!important; transform:translateY(-14px)!important;
    transition:opacity .34s ease, transform .42s cubic-bezier(.22,1,.36,1), visibility .34s!important;
    pointer-events:none!important;
  }
  body.mm-open .mobile-menu{opacity:1!important; visibility:visible!important; transform:none!important; pointer-events:auto!important}
  body.mm-open{overflow:hidden!important}

  /* Links */
  body .mobile-menu a{
    color:#fff!important; font-family:var(--fmw-sans)!important; font-weight:700!important;
    font-size:20px!important; letter-spacing:.005em!important; line-height:1.2!important;
    padding:16px 2px!important; text-decoration:none!important; background:transparent!important;
    border-bottom:1px solid rgba(255,255,255,.1)!important; display:flex!important; align-items:center!important;
    border-radius:0!important; -webkit-text-fill-color:#fff!important;
    /* gestaffelte Einblendung */
    opacity:0!important; transform:translateY(12px)!important;
    transition:opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1), background .15s!important;
  }
  body.mm-open .mobile-menu a{opacity:1!important; transform:none!important}
  body .mobile-menu a:active{background:rgba(255,255,255,.06)!important}
  /* Leistungs-Unterpunkte: kleiner, eingerückt, leicht gedimmt */
  body .mobile-menu a.mm-sub{
    font-size:16px!important; font-weight:500!important; color:rgba(255,255,255,.80)!important;
    -webkit-text-fill-color:rgba(255,255,255,.80)!important;
    padding:12px 2px 12px 20px!important; border-bottom:1px solid rgba(255,255,255,.06)!important;
  }
  body .mobile-menu a.mm-sub::before{content:""!important; width:5px!important; height:5px!important; border-radius:50%!important;
    background:var(--fmw-aqua)!important; margin-right:12px!important; flex:0 0 auto!important}
  /* CTA */
  body .mobile-menu a.mm-cta{
    margin-top:24px!important; background:var(--fmw-orange)!important; color:var(--fmw-navy)!important;
    -webkit-text-fill-color:var(--fmw-navy)!important; border:0!important; border-radius:8px!important;
    justify-content:center!important; padding:17px!important; font-size:17px!important; border-bottom:0!important;
    box-shadow:none!important;
  }
  body .mobile-menu a.mm-cta:active{background:var(--fmw-orange-active)!important}
  /* Stagger-Delays */
  body.mm-open .mobile-menu a:nth-child(1){transition-delay:.06s}
  body.mm-open .mobile-menu a:nth-child(2){transition-delay:.10s}
  body.mm-open .mobile-menu a:nth-child(3){transition-delay:.13s}
  body.mm-open .mobile-menu a:nth-child(4){transition-delay:.16s}
  body.mm-open .mobile-menu a:nth-child(5){transition-delay:.19s}
  body.mm-open .mobile-menu a:nth-child(6){transition-delay:.22s}
  body.mm-open .mobile-menu a:nth-child(7){transition-delay:.25s}
  body.mm-open .mobile-menu a:nth-child(8){transition-delay:.28s}
  body.mm-open .mobile-menu a:nth-child(9){transition-delay:.31s}
  body.mm-open .mobile-menu a:nth-child(n+10){transition-delay:.34s}
}
/* GLOBALE 12px-Radius-Normalisierung: Hero-Card/Body/Media/Bilder + Dropdown.
   (Full-bleed .heroX/Marquee + Buttons 6px + Pills/Kreise bleiben wie sie sind.) */
body .rgx-herocard, body .rgx-artbody, body .rgx-arthero-img,
body .tl-media, body .tl-mock, body .vd-frame,
body .rgx-herocard img, body .rgx-artbody img, body .rgx-body img, body .post-content img,
body .mk-ans2-card, body .mk-splitimg, body .mko-p, body .pkv-schritt-bild, body .stv-cmp .c,
body .drop-panel{border-radius:12px!important}
/* Artikel-Autoren-Avatar bleibt rund (nicht von der 12px-Content-Bild-Regel erfassen) */
body .rgx-arthero .rgx-arthero-au>img{border-radius:50%!important}
/* Sidebar-CTA-Liste IMMER einzeilig (kein Umbruch) */
body .rgx-sidecta li, body .rgx-sidecta ul li{white-space:nowrap!important; font-size:12.5px!important}
/* .mk-splitimg: IMMER nur das Bild, randfüllend, KEIN Hintergrund, keine Skalierung
   (User-Regel, ALLE Leistungsseiten). Bild füllt die Box via object-fit:cover. */
body .mk-splitimg{overflow:hidden!important; background:transparent!important}
body .mk-splitimg img{transform:none!important; width:100%!important; height:100%!important; object-fit:cover!important}
/* Konzept-Levels (.kz-lev-img): Cutout-Personen sind hochformatig (~2:1), die Box aber ~quadratisch
   → contain = schmale Figur mit viel Lavendel-Rand. Deshalb FÜLLEN via cover, oben verankert (Kopf bleibt). */
/* Headroom: Lavendel-Streifen OBEN, damit der Kopf nicht an der Box-Kante klebt (User-Wunsch).
   padding-top schiebt das Bild runter; Bild füllt weiter die volle Breite, unten beschnitten. */
body .kz-lev-img{overflow:visible!important; background:transparent!important; padding-top:0!important}
body .kz-lev-img img{width:auto!important; max-width:100%!important; height:auto!important; max-height:540px!important; object-fit:contain!important; border-radius:28px!important}
/* Sekundär-CTA auf dunklem Grund (.fmw-alt-dark) = WEISSE Pille, Navy-Text (G-22) – sichtbar auf Navy */
body .fmw-cta.fmw-alt.fmw-alt-dark{background:#fff!important; color:var(--fmw-navy)!important}
body .fmw-cta.fmw-alt.fmw-alt-dark:hover{background:var(--fmw-surface)!important; color:var(--fmw-navy)!important}
/* Hero: animierte Logo-Treppe, HINTER Text/Personen (via JS eingefügt). Home + Unterseiten.
   Die 7 Stufen leuchten als ruhige Welle von unten nach oben (Wachstums-Motiv, on-brand).
   Farbe auto per data-steps: weiß auf Navy-Heroes, navy auf hellen Heroes. */
body .hero-steps{
  position:absolute!important; z-index:1!important; pointer-events:none!important;
  height:auto; overflow:visible;
  /* unten weich ausfaden, damit die Treppe nicht hart abschneidet (User-Wunsch) */
  -webkit-mask-image:linear-gradient(to bottom, #000 40%, rgba(0,0,0,0) 90%);
          mask-image:linear-gradient(to bottom, #000 40%, rgba(0,0,0,0) 90%);
}
body .hero-steps[data-steps="white"] path{fill:#fff; animation:fmwStairsW 4.6s ease-in-out infinite}
body .hero-steps[data-steps="navy"] path{fill:var(--fmw-navy,#101550); animation:fmwStairsN 4.6s ease-in-out infinite}
body .hero-steps path:nth-child(7){animation-delay:0s}
body .hero-steps path:nth-child(6){animation-delay:.26s}
body .hero-steps path:nth-child(5){animation-delay:.52s}
body .hero-steps path:nth-child(4){animation-delay:.78s}
body .hero-steps path:nth-child(3){animation-delay:1.04s}
body .hero-steps path:nth-child(2){animation-delay:1.30s}
body .hero-steps path:nth-child(1){animation-delay:1.56s}
@keyframes fmwStairsW{0%,100%{opacity:.08} 7%{opacity:.32} 22%{opacity:.08}}   /* weiß auf Navy */
@keyframes fmwStairsN{0%,100%{opacity:.05} 7%{opacity:.17} 22%{opacity:.05}}   /* navy auf hell – subtiler */
/* Platzierung je Hero: dunkle Marketing-Heroes (Home/Leistung) = rechts, mittig, groß */
body .heroX .hero-steps, body .mk-hero .hero-steps{right:clamp(-20px,4vw,90px); top:50%; transform:translateY(-54%); width:clamp(320px,38vw,660px)}
/* Konzept (hell, kompakt) = rechts, mittig, etwas kleiner; Kontext + Clip sicherstellen */
body .kz-hero{position:relative; overflow:hidden}
/* Konzept-Treppe größer (User), aber immer rechts vom zentrierten Text: Breite wächst mit dem
   rechten Rand mit (calc(50vw - …)), schmal bei 1280, groß auf breiten Screens */
body .kz-hero .hero-steps{right:clamp(-20px,1vw,20px); top:clamp(12px,2vw,40px); transform:none; width:clamp(150px,calc(50vw - 530px),440px)}
/* Über-uns (hell, hohe Section, zentrierter Text) = oben-rechts, kompakt, damit sie neben dem Text bleibt */
body .ueb-hero{position:relative}
body .ueb-hero .hero-steps{right:clamp(-20px,1vw,20px); top:clamp(16px,2.5vw,44px); transform:none; width:clamp(150px,13vw,360px)}
@media (max-width:900px){body .hero-steps{display:none!important}}
@media (prefers-reduced-motion:reduce){body .hero-steps path{animation:none!important; opacity:.12!important}}
/* Home-Hero-H1 größer (soll weiterhin 2 Zeilen bleiben) — NUR Startseite, bleibt so */
body .heroX h1{font-size:clamp(42px,6.3vw,74px)!important}
/* Unterseiten-Hero-H1 KLEINER = max 3 Zeilen (User-Regel „Headline immer ≤3 Zeilen"; Home bleibt groß).
   Leistung `.mk-h1`: langer Text neben Person-Spalte → am kleinsten (lief auf 4 Zeilen). */
body .mk-h1{font-size:clamp(32px,3.75vw,48px)!important}
/* Konzept + Über-uns: etwas kleiner als Home (immer <6.3vw/74 ⇒ nie größer als Base) */
body .kz-hero h1, body .ueb-hero h1{font-size:clamp(32px,4.3vw,56px)!important}
/* Hero: Patricks Bild etwas kleiner (am Boden verankert) */
body .hero-team img[src*="patrick"]{transform:scale(.9)!important; transform-origin:bottom center!important}
/* Hero-H1: high-class Editorial-Reveal – Wörter steigen maskiert hinter der Kante hervor,
   Expo-Easing + sanfter Blur-in. JS wrappt: <span.fmw-w><span.fmw-wi --i>Wort</span></span> */
/* Wort-Reveal am 14.11.2026 entfernt: er startete mit opacity:0,
   translateY(118%) und blur(7px) bei fill-mode "both", dazu overflow:hidden am
   Wrapper. Die H1 war dadurch beim ersten Paint unsichtbar und Lighthouse fand
   keinen Largest Contentful Paint. Die Wrapper-Spans setzt das JS weiterhin,
   hier werden sie neutralisiert. Die @keyframes unten bleiben ungenutzt stehen. */
body h1 .fmw-w{display:inline; overflow:visible; vertical-align:baseline;
  padding-bottom:0; margin-bottom:0}
body h1 .fmw-wi{display:inline; opacity:1; transform:none;
  filter:none; animation:none}
@keyframes fmwRise{
  0%{opacity:0; transform:translateY(118%); filter:blur(7px)}
  55%{opacity:1; filter:blur(0)}
  100%{opacity:1; transform:translateY(0); filter:blur(0)}
}
/* Mega-Menü: Untertitel nicht an der rechten Kante kleben */
body .m3-it{padding-right:18px!important}
body .m3-it small, body .m3-it b{padding-right:4px!important}

/* ===== Footer-Logo: Filter weg → native Farben (weiß + orange "mehrwert") ===== */
body .footer .logo .logo-img, body .footer .logo img{filter:none!important}


/* ===== Newsletter-Banner im Ratgeber vorerst ausblenden ===== */
body section:has(> .rg-wrap > .rgx-news){display:none!important}
body .rgx-news{display:none!important}

/* ===== Mobile-Menü (eigenständig, modern & clean) ===== */
.fmw-burger{display:none}
@media(max-width:900px){
  body .nav-toggle, body .mobile-menu{display:none!important}
  body #hdr .nav-cta, body #hdr .fmw-cta, body header .nav-cta{display:none!important}
  .fmw-burger{display:inline-flex;position:fixed;top:13px;right:16px;z-index:99999;width:48px;height:48px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:#fff;border:1px solid #e6e9f7;border-radius:14px;box-shadow:0 6px 18px rgba(16,21,80,.16);cursor:pointer;padding:0}
  .fmw-burger span{display:block;width:22px;height:2.5px;border-radius:2px;background:#101550;transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .2s}
  html.fmw-mopen .fmw-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  html.fmw-mopen .fmw-burger span:nth-child(2){opacity:0}
  html.fmw-mopen .fmw-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}
.fmw-mpanel{position:fixed;inset:0;z-index:99998;background:#fff;display:flex;flex-direction:column;padding:92px 26px 34px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s ease,transform .38s cubic-bezier(.2,.7,.2,1),visibility .3s;overflow-y:auto;-webkit-overflow-scrolling:touch}
html.fmw-mopen .fmw-mpanel{opacity:1;visibility:visible;transform:none}
.fmw-mpanel .fmw-mlink{display:flex;align-items:center;justify-content:space-between;padding:19px 4px;font-family:"Cabinet Grotesk",sans-serif;font-weight:600;font-size:23px;letter-spacing:-.01em;color:#101550;text-decoration:none;border-bottom:1px solid #eef0f8;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*.045s)}
html.fmw-mopen .fmw-mpanel .fmw-mlink{opacity:1;transform:none}
.fmw-mpanel .fmw-mlink svg{width:20px;height:20px;color:#039be5;flex:none}
.fmw-mpanel .fmw-mcta{margin-top:30px;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*.045s)}
html.fmw-mopen .fmw-mpanel .fmw-mcta{opacity:1;transform:none}
.fmw-mpanel .fmw-mcta .fmw-cta{display:flex!important;width:100%!important;justify-content:center;font-size:17px!important}
body.fmw-mlock{overflow:hidden}

/* ===== Floating-Pille: originales Trustpilot-Logo + originale Sterne ===== */
.fab-rev{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid #e6e9f7;border-radius:999px;padding:10px 20px 10px 18px;text-decoration:none;box-shadow:none;transition:border-color .2s}
.fab-rev:hover{border-color:#00b67a}
.fab-rev .fr-logo{display:block;height:23px;width:auto}
.fab-rev .fr-sep{display:block;width:1px;height:30px;background:#e6e9f7}
.fab-rev .fr-right{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.fab-rev .fr-stars{display:block;height:16px;width:auto}
.fab-rev .fr-count{font-size:12px;line-height:1;color:#5c6378;font-weight:500;white-space:nowrap}
.fab-rev .fr-count b{font-family:var(--fmw-sans);font-weight:700;color:#101550}
@media(max-width:480px){.fab-rev{gap:10px;padding:8px 14px 8px 12px}.fab-rev .fr-logo{height:18px}.fab-rev .fr-sep{height:26px}.fab-rev .fr-stars{height:14px}.fab-rev .fr-count{font-size:11px}}

/* ---- Buttons im Stil der Icon-Kacheln (Konzept .kz-ritem-ic): flache Vollfarbe + Innenkanten, rund ---- */
body .fmw-cta:not(.fmw-alt), body a.fmw-cta:not(.fmw-alt), body .mkcta, body .fl-cta, body .rg-cta, body .toc-cta,
body .pr-btn.solid, body .btn-secondary, body .mm-cta, body a.mm-cta{
  background:#ffa006!important; background-image:none!important; color:#101550!important; border:0!important;
  border-radius:999px!important; box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(150,85,0,.32)!important;
}
body .fmw-cta.fmw-alt:not(.fmw-alt-dark), body .btn-primary:not(.fmw-cta), body .cbtn.btn-primary:not(.fmw-cta),
body .rgx-btn, body .btn-dark, body .rev-link, body a.rev-link{
  background:#101550!important; background-image:none!important; color:#fff!important; border:0!important;
  border-radius:999px!important; box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(6,10,55,.5)!important;
}
body .fmw-cta:not(.fmw-alt):hover, body .mkcta:hover, body .fl-cta:hover, body .rg-cta:hover, body .toc-cta:hover,
body .pr-btn.solid:hover, body .btn-secondary:hover, body .mm-cta:hover{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(150,85,0,.32)!important; filter:brightness(1.05)!important; transform:none!important;
}
body .fmw-cta.fmw-alt:not(.fmw-alt-dark):hover, body .btn-primary:not(.fmw-cta):hover, body .cbtn.btn-primary:not(.fmw-cta):hover,
body .rgx-btn:hover, body .btn-dark:hover, body .rev-link:hover{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(6,10,55,.5)!important; filter:brightness(1.25)!important; transform:none!important;
}
body .fmw-cta:not(.fmw-alt) .a svg, body .pr-btn.solid svg{color:#101550!important}

/* Button-Schrift: Inter gibt es nur bis 500, stärkere Schnitte würde der Browser künstlich fetten und unscharf zeichnen */
body .ski-slot, body .rev-link, body a.rev-link, body .mm-cta, body .fl-cta, body .rg-cta, body .toc-cta, body .rgx-btn, body .pr-btn, body .cbtn, body .mkcta{
  font-family:var(--fmw-sans)!important; font-weight:700!important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Hover ohne filter, damit die Schrift scharf bleibt */
body .fmw-cta:not(.fmw-alt):hover, body .mkcta:hover, body .fl-cta:hover, body .rg-cta:hover, body .toc-cta:hover,
body .pr-btn.solid:hover, body .btn-secondary:hover, body .mm-cta:hover{filter:none!important; background:#ffb133!important}
body .fmw-cta.fmw-alt:not(.fmw-alt-dark):hover, body .btn-primary:not(.fmw-cta):hover, body .cbtn.btn-primary:not(.fmw-cta):hover,
body .rgx-btn:hover, body .btn-dark:hover, body .rev-link:hover{filter:none!important; background:#1c2470!important; color:#fff!important}

/* Freisteller: Layout darf nie von der Originalgroesse der Bilddatei abhaengen */
body .split>*, body .kz-story2>*{min-width:0}
body .about-solo, body .kz-story2-img{width:100%;min-width:0;max-width:100%}
body .about-solo img, body .kz-story2-img img{max-width:100%!important;min-width:0}

/* ---- Mobil: nur der WhatsApp-Knopf bleibt, rechts und kleiner ---- */
@media (max-width:768px){
  body .fab{left:auto!important;right:12px!important;bottom:12px!important;width:auto!important;align-items:flex-end!important;gap:0!important}
  body .fab>*:not(.fab-wa){display:none!important}
  body .fab-wa{width:48px!important;height:48px!important}
  body .fab-wa svg{width:25px!important;height:25px!important}
}

/* CLS-Fix Laufband 14.11.2026 */
/* Die Logos haben keine Masse im Markup. Hoehe plus Seitenverhaeltnis
   reservieren die Box schon vor dem Laden, sonst springt die Seite. */
body .mq-track img{height:38px!important; width:auto!important}
body .mq-track img[src*="allianz.svg"]{aspect-ratio:300/134}
body .mq-track img[src*="axa.svg"]{aspect-ratio:106/106}
body .mq-track img[src*="arag.webp"]{aspect-ratio:150/150}
body .mq-track img[src*="continentale.svg"]{aspect-ratio:286/174}
body .mq-track img[src*="dkv.svg"]{aspect-ratio:152/150}
body .mq-track img[src*="hallesche.svg"]{aspect-ratio:400/146}
body .mq-track img[src*="hansemerkur.svg"]{aspect-ratio:300/143}
body .mq-track img[src*="nuernberger.png?v=2"]{aspect-ratio:2683/640}
body .mq-track img[src*="signal-iduna.svg"]{aspect-ratio:1024/191}
body .mq-track img[src*="universa.svg"]{aspect-ratio:279/40}
body .mq-track img[src*="barmenia.svg"]{aspect-ratio:234/150}
body .mq-track img[src*="gothaer.svg"]{aspect-ratio:749/245}
