/* ==========================================================================
   ADON Solutions – Design System
   Layout & Motion-Sprache nach Vorbild "Bemox", Farbwelt ADON (Lila/Creme)
   ========================================================================== */

:root{
  /* --- Farben --- */
  --bg:#F7F6F1;
  --white:#FFFFFF;
  --ink:#221B31;
  --night:#161020;
  --night-2:#1F1730;
  --night-3:#0E0A16;
  --body-c:#3E3947;
  --muted:#726C7E;
  --rule:#E4E1D9;
  --rule-dark:rgba(255,255,255,.14);

  --lila:#7C55CE;
  --lila-deep:#6743B4;
  --lila-light:#B394EE;
  --lila-soft:#EFE9FB;

  /* --- Typo --- */
  --head:'Geist',system-ui,-apple-system,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,sans-serif;

  /* --- Layout --- */
  --wrap:1320px;
  --gut:48px;
  --radius:20px;
  --radius-lg:34px;
  --btn-radius:14px;   /* alle Buttons: abgerundetes Rechteck statt Pille (global via Token) */

  /* --- Motion --- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-lux:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  background:var(--bg);color:var(--body-c);
  font-family:var(--body);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
::selection{background:var(--lila);color:#fff}

.in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:780px}

/* ---------- Typografie ---------- */
h1,h2,h3,h4,h5{font-family:var(--head);font-weight:700;color:var(--ink);line-height:1.08;letter-spacing:-.025em}
h1{font-size:clamp(42px,5.6vw,88px);line-height:1;letter-spacing:-.035em}
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
h2{font-size:clamp(30px,3.8vw,58px)}
h3{font-size:clamp(21px,2vw,30px)}
h4{font-size:clamp(19px,1.5vw,23px);letter-spacing:-.015em}
p{margin-bottom:1.1em;max-width:66ch}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}
.lede{font-size:clamp(19px,1.5vw,23px);line-height:1.55}
.lede-sm{font-size:clamp(18px,1.25vw,21px);line-height:1.6;margin-bottom:0;max-width:none}
.accent{color:var(--lila)}
.on-dark .accent,.hero .accent,.sub-hero .accent,.foot .accent{color:var(--lila-light)}
.note-wide{margin-top:44px;color:#635D6E;max-width:none}
/* Definition "qualifiziert" als dezente Klarstellung direkt an der Zusage (belegbar, AGB 5.3). */
.qual-def{font-size:15.5px;line-height:1.6;opacity:.8;margin-top:14px}
.qual-def b{opacity:1}
.note-wide a{color:var(--lila-deep,#6743B4);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.note-wide a:hover{color:var(--lila,#7C55CE)}
/* SEO-Sektion: linksbuendiger Kopf (kein 2-Spalten-sec-head -> kein Zickzack) */
.seo-head{margin-bottom:22px}
.seo-head h2{max-width:640px;margin:8px 0 0}
/* 5 Karten: 6-Spalten-Grid, jede Karte span 2 -> 3 pro Reihe, linksbuendig.
   Reihe 2 (Karte 4/5) steht damit unter 1/2; die leere Zelle rechts ist
   normaler Weissraum (wie rechts von Intro/Notiz) und bricht die Flucht nicht. */
.seo-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px;margin-top:44px}
.seo-cards .dcard{grid-column:span 2;margin:0}
@media(max-width:1000px){
  .seo-cards{grid-template-columns:1fr}
  .seo-cards .dcard{grid-column:auto}
}
/* kurze Kundengeschichte (Maren): Text vertikal zentriert statt grossem
   Leerraum unter dem kurzen Text neben dem hohen Portrait. */
.case.compact{align-items:center}

/* ---------- Eyebrow (Bemox: Halbkreis-Marker + Versalien) ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:0;
  font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#6E6878;
}
.eyebrow::before{
  content:'';width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  background:var(--lila);box-shadow:inset 0 0 0 3px var(--bg),0 0 0 2px var(--lila);
}
.on-dark .eyebrow,.eyebrow.light,.foot .eyebrow{color:#EDE9F6}
.on-dark .eyebrow::before,.eyebrow.light::before,.foot .eyebrow::before{
  background:var(--lila-light);box-shadow:inset 0 0 0 3px var(--night),0 0 0 2px var(--lila-light);
}

/* ---------- Mega-Titel ---------- */
.mega{
  font-weight:900;letter-spacing:-.03em;
  font-size:clamp(48px,8vw,124px);line-height:.95;
  text-transform:uppercase;margin-bottom:64px;
}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  font-family:var(--head);font-weight:700;font-size:16px;color:var(--ink);
  background:transparent;border:1.5px solid var(--ink);border-radius:var(--btn-radius);
  padding:7px 7px 7px 26px;text-decoration:none;cursor:pointer;overflow:hidden;
  transition:color .28s var(--ease),border-color .28s var(--ease),transform .25s var(--ease),box-shadow .3s var(--ease);
  will-change:transform;
}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--ink);border-radius:inherit;
  transform:scaleY(0);transform-origin:bottom;transition:transform .32s var(--ease);z-index:0;
}
.btn>span{position:relative;z-index:1}
.btn .arr{
  width:44px;height:44px;border-radius:50%;background:var(--lila);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;
  transition:transform .3s var(--ease),background .3s;
}
.btn .arr svg{width:17px;height:17px}
/* Ruhige, gerichtete Micro-Interaction (Design-/UI-/CRO-Konsens): sanftes Anheben,
   Pfeil nudged nach rechts (statt Diagonal-Rotation = „extern"), kein Magnet.
   Hover nur bei echten Zeigern (@media hover) -> kein „klebender" Zustand auf Touch. */
@media(hover:hover){
  .btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(34,27,49,.4)}
  .btn:hover::before{transform:scaleY(1)}
  .btn:hover .arr{transform:translateX(4px)}
}
.btn:active{transform:translateY(0) scale(.98);transition:transform .08s}

.btn.solid{background:var(--lila);border-color:var(--lila);color:#fff}
.btn.solid .arr{background:#fff;color:var(--lila)}
.btn.solid::before{background:var(--ink)}
@media(hover:hover){
  /* Haupt-CTA vertieft sich (bleibt lila statt ins Dunkle zu kippen) + Lift/Shadow */
  .btn.solid:hover{background:var(--lila-deep);border-color:var(--lila-deep);box-shadow:0 14px 30px -10px rgba(124,85,206,.55)}
  .btn.solid:hover::before{transform:scaleY(0)}
}

.btn.light{border-color:rgba(255,255,255,.45);color:#fff}
.btn.light .arr{background:#fff;color:var(--lila)}
.btn.light::before{background:#fff}
@media(hover:hover){
  .btn.light:hover{color:var(--ink);border-color:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
  .btn.light:hover .arr{background:var(--lila);color:#fff}
}

.btn.sm{font-size:14px;padding:5px 5px 5px 20px;gap:10px}
.btn.sm .arr{width:36px;height:36px}
.btn.sm .arr svg{width:15px;height:15px}
.btn.wide{margin-top:36px;text-align:left;max-width:640px;line-height:1.35;padding-left:28px}
.btn:focus-visible,nav a:focus-visible,.art:focus-visible,.sticker:focus-visible{outline:3px solid var(--lila);outline-offset:4px}
/* Einheitlicher Marken-Fokusring auf allem Interaktiven, das noch keinen eigenen hat (a11y + „nicht kaputt“). :where() = 0 Spezifität, überschreibt nichts. */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--lila);outline-offset:3px;border-radius:4px}


/* ==========================================================================
   SCROLL-DIAL (Fortschrittskreis)
   ========================================================================== */
.scroll-dial{
  position:fixed;right:26px;bottom:26px;z-index:70;width:54px;height:54px;
  display:grid;place-items:center;opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .4s,transform .4s var(--ease);
}
.scroll-dial.on{opacity:1;transform:scale(1)}
.scroll-dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.scroll-dial circle{fill:none;stroke-width:2.5}
.sd-bg{stroke:rgba(34,27,49,.13)}
.sd-fg{stroke:var(--lila);stroke-linecap:round;stroke-dasharray:126;stroke-dashoffset:126}
.sd-num{
  font-family:var(--head);font-size:11px;font-weight:700;color:var(--ink);
  background:var(--bg);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
}
.to-top{
  position:fixed;right:26px;bottom:92px;z-index:70;width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;transition:.35s var(--ease);
}
.to-top svg{width:18px;height:18px}
.to-top.on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.to-top:hover{background:var(--lila)}

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Der Header liegt transparent über dem dunklen Hero; beim Scrollen wird er
   dunkel-transluzent – so bleibt das helle Lila-Logo immer lesbar. */
header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:transform .45s var(--ease),background .35s,border-color .35s,backdrop-filter .35s;
}
header.stuck{
  border-bottom-color:rgba(255,255,255,.1);box-shadow:0 8px 34px rgba(14,10,22,.28);
}
/* Frosted-Header-Hintergrund auf einem Pseudo-Element statt am <header> selbst:
   backdrop-filter (und transform) direkt am header macht ihn zum "containing
   block" -> die fixed Mobil-Nav (Kind des headers) wird darin eingesperrt und
   bekam auf iOS Safari keinen vollen Panel-Hintergrund. So bleibt der Look, ohne
   die Nav einzusperren. */
header::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  transition:opacity .35s;background:rgba(18,13,28,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
header.stuck::before,body.lp header::before{opacity:1}
/* header.hide entfernt: ungenutzt (JS setzt .hide nie) + iOS-Fixed-Trap-Risiko */
.hd{display:flex;align-items:center;gap:34px;height:88px;white-space:nowrap}
.logo{display:flex;align-items:center;margin-right:auto;flex:0 0 auto;cursor:pointer;text-decoration:none}
.logo img{height:38px;width:auto}
nav{display:flex;gap:32px;flex:0 0 auto}
nav a{
  cursor:pointer;font-family:var(--head);font-size:14px;font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.86);text-decoration:none;padding:6px 0;position:relative;
  transition:color .3s;
}
nav a:hover,nav a.act{color:#fff}
nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--lila-light);
  transition:right .35s var(--ease);
}
nav a:hover::after,nav a.act::after{right:0}
.cta-hd{border-color:rgba(255,255,255,.28)}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:9px}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-back{position:fixed;inset:0;z-index:55;background:rgba(22,16,32,.5);opacity:0;pointer-events:none;transition:opacity .3s}
.nav-back.open{opacity:1;pointer-events:auto}

/* ==========================================================================
   SEKTIONEN
   ========================================================================== */
section{padding:130px 0;position:relative}
.sec-tight{padding:96px 0}
.page{display:none}
.page.on{display:block}

/* Zweispaltiger Sektionskopf: Eyebrow links, Titel rechts (Bemox) */
.sec-head{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:40px;
  align-items:start;margin-bottom:56px;
}
.sec-head h2{margin:0}
.sec-head .eyebrow{margin-top:12px}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.two-col.flip>*:first-child{order:-1}
/* Gleich hohe Spalten (Direktor): Foto streckt sich auf die Texthoehe statt
   als hohes Portrait mit Leerraum daneben. Foto uebernimmt Zeilenhoehe. */
.two-col.even-h{align-items:stretch}
.two-col.even-h .ph-box{aspect-ratio:auto}
.two-col.even-h .ph-box img{object-position:center 22%}
/* Problem-Section fliesst in die Loesungs-Section: kleiner Abstand nach unten,
   damit zwischen den beiden kein Doppel-Padding-Loch klafft (Direktor). */
.sec-into-next{padding-bottom:24px}

/* dunkle Sektion */
.on-dark{background:var(--night);color:rgba(255,255,255,.78)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark strong{color:#fff}
.on-dark p{color:rgba(255,255,255,.76)}
.rounded{border-radius:var(--radius-lg);margin:0 14px;overflow:hidden}

/* Raster-Hintergrund (Bemox-Dunkelflächen) */
.grid-bg::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
}
.grid-bg>*{position:relative;z-index:1}

/* ==========================================================================
   PLATZHALTER  (mit WebGL-Distortion-Hook)
   ========================================================================== */
.ph-box{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(135deg,#EDE7FA 0%,#F7F6F1 55%,#E7E2F5 100%);
  border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
}
.ph-box>span{
  position:relative;z-index:2;
  font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);text-align:center;line-height:2;
}
/* Echtes Foto im Block: füllt die Fläche, der Platzhalter-Text entfällt.
   Fotos in voller Farbe (Direktoren-Entscheidung nach 5-Lupen-Review:
   kein S/W-/Color-Pop-Filter, kein Hover-Zoom – Wärme/Trust der Bilder zählt). */
.ph-box img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
}
.ph-box.has-img{background:var(--night-2);border-color:transparent}
.ph-box.has-img>span{display:none}
.ph-box.shot{aspect-ratio:16/10;margin:36px 0 12px}
.ph-box.wide-shot{aspect-ratio:21/9;margin-top:48px}
/* Standard fuer 21:9-Baender: Ausschnitt leicht nach oben, damit Koepfe nicht abgeschnitten werden (Werbung-Seite etc.). Section-spezifische Regeln unten ueberschreiben. */
.ph-box.wide-shot img{object-position:center 30%}
/* Beratungsfoto (Leistungen): 21:9-Crop schnitt Viktors Kopf oben ab -> Bildausschnitt nach oben (Köpfe im Bild). Nur diese Sektion, nicht das Videocall-Band. */
.s3b .ph-box.wide-shot img{object-position:center 15%}
.s4d .ph-box.wide-shot img{object-position:center 20%}
/* Viktor-blau (Sichtbarkeit, 21:9): Kopf sitzt sehr weit oben im Original -> mehr Luft ueber dem Kopf, sonst klebt die Haarkante an der oberen Kante. Bildspezifisch (dieses Foto kommt nur hier vor). */
.ph-box.wide-shot img[src*="viktor-blau"]{object-position:center 15%}
.fb-shot{aspect-ratio:16/10;margin-bottom:30px;border:0}

/* ---- Foto-Hover „Kombination" (Direktoren-Wahl #4): Sheen + feiner Ring + Mikro-Aufhellung,
   optional sanfter Lift. Gleicher Stil wie in der Kundenstimmen-Galerie, hier fuer weitere
   Fotos (Viktor-Portrait, Beratungsfoto). Ring liegt als ::before ueber dem Vollbild-Foto,
   da ein inset-Schatten sonst hinter dem absoluten Bild verschwaende. ---- */
.fx-photo{position:relative;overflow:hidden}
.fx-photo img{transition:filter .6s var(--ease-lux)}
.fx-photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.26) 50%,transparent 66%);
  transform:translateX(-130%)}
.fx-photo::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 0 0 3px rgba(124,85,206,.22);
  opacity:0;transition:opacity .45s var(--ease-lux)}
.fx-photo.fx-lift{transition:transform .5s var(--ease-lux),box-shadow .5s var(--ease-lux)}
@keyframes fxSheen{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@media(hover:hover){
  .fx-photo:hover::after{animation:fxSheen .95s var(--ease-lux) forwards}
  .fx-photo:hover::before{opacity:1}
  .fx-photo:hover img{filter:saturate(1.06) brightness(1.03) contrast(1.02)}
  .fx-photo.fx-lift:hover{transform:translateY(-6px);box-shadow:0 30px 56px -30px rgba(22,16,32,.5)}
}
@media(prefers-reduced-motion:reduce){
  .fx-photo,.fx-photo.fx-lift,.fx-photo img{transition:none}
  .fx-photo::after,.fx-photo::before{display:none}
  .fx-photo:hover img{filter:none}.fx-photo.fx-lift:hover{transform:none}
}
.ph-hero{aspect-ratio:4/3;border:0;background:linear-gradient(150deg,#2A2140,#3A2C58 55%,#1F1730)}
.ph-hero>span{color:rgba(255,255,255,.5)}
.ba-cap{font-size:14px;color:var(--muted);font-family:var(--head);font-weight:500}

/* ============ Kundengeschichte / Case-Story (Sichtbarkeit) ============
   Loest die links-klebende .narrow-Spalte ab: redaktionelles 2-Spalten-Raster.
   Lesespalte links (linke Kante buendig zu den Vollbreiten-Nachbarn), rechts
   Signatur + belegbare Fakten + Pull-Zitat (fuellt die vorher tote Flaeche mit
   Inhalt), Foto darunter in voller Breite (echot das 21:9-Band). Gleiches
   Muster fuer die lange (Swetlana) und die kurze (Maren) Story. */
.case{display:grid;grid-template-columns:minmax(0,60ch) minmax(240px,1fr);column-gap:72px;align-items:start}
.case-main{min-width:0}
.case-main .eyebrow{margin-bottom:12px}
.case-main h2{margin-bottom:26px}
.case-main p{margin-bottom:20px;max-width:60ch}
.case-main p:last-child{margin-bottom:0}
.case-lede{font-size:clamp(19px,1.4vw,22px);line-height:1.55;color:var(--ink);font-weight:500}
.case-rule{border:0;height:1px;background:var(--rule);margin:30px 0;max-width:60ch}
/* rechte Spalte laeuft am langen Text sticky mit */
.case-side{position:sticky;top:112px;display:flex;flex-direction:column;gap:22px}
.case-sig{font-family:var(--head);font-weight:600;font-size:17px;line-height:1.3;color:var(--ink);margin:0;display:flex;flex-direction:column}
.case-sig span{font-family:var(--body);font-weight:400;font-size:14px;color:var(--muted);margin-top:3px}
.case-sig a{color:var(--lila-deep);text-decoration:none;transition:color .2s}
.case-sig a:hover{color:var(--lila);text-decoration:underline;text-underline-offset:2px}
.case-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.case-facts li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.4;color:var(--ink)}
.case-facts li::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:50%;background:var(--lila);box-shadow:0 0 0 4px var(--lila-soft)}
.case-quote{margin:4px 0 0;padding:2px 0 0 20px;border-left:3px solid var(--lila);font-family:var(--head);font-weight:500;font-size:clamp(19px,1.6vw,24px);line-height:1.32;color:var(--ink)}
.case-quote b{color:var(--lila-deep);font-weight:600}
.case-fig{grid-column:1/-1;margin:52px 0 0}
.case-fig .ph-box.shot{margin:0}
.case-fig .ba-cap{margin:14px 0 0}
@media(max-width:900px){
  .case{grid-template-columns:1fr;row-gap:24px}
  /* case-side einspaltig als ruhiger vertikaler Stapel: Foto, Name, Fakten, Zitat
     (frueher umbrechende Zeile -> Zitat klemmte zwischen Foto und Name, Name
     vertikal gegen die Fakten verschoben). */
  .case-side{position:static;flex-direction:column;align-items:stretch;gap:20px}
  .case-side .ph-box{width:100%;margin:0}
  .case-quote{margin:0}
  .case-fig{margin-top:32px}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;background:var(--night);overflow:hidden;
  padding:180px 0 110px;
}
.hero-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,transparent 0 44px,rgba(255,255,255,.03) 44px 74px),
    radial-gradient(80% 100% at 78% 6%,rgba(124,85,206,.34) 0%,transparent 62%),
    radial-gradient(60% 80% at 12% 90%,rgba(179,148,238,.14) 0%,transparent 60%);
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:64px;align-items:center;
}
.hero-visual{position:relative}
.hero-blob{
  position:absolute;left:-42px;top:-42px;width:170px;height:170px;border-radius:50%;
  background:var(--lila);filter:blur(2px);opacity:.9;z-index:-1;
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
.doodle{position:absolute;width:78px;height:78px;fill:var(--lila-light);opacity:.85}
.doodle-star{right:-24px;top:-30px;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hero h1{color:#fff;max-width:16ch}
.hero .lede{color:rgba(255,255,255,.85);max-width:50ch;margin-bottom:0}
.hero-rule{display:block;margin:28px 0;height:1px;background:rgba(255,255,255,.16);position:relative}
.hero-rule i{position:absolute;left:0;top:-3px;width:0;height:7px;border-radius:4px;background:var(--lila-light)}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}

.hero-foot{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin-top:52px;padding-top:28px;border-top:1px solid rgba(255,255,255,.2);
}
.avatars{display:flex;align-items:center}
.avatars .av-ph{
  width:52px;height:52px;border-radius:50%;
  background:#2A2140;border:2px solid rgba(255,255,255,.28);margin-right:-14px;
}
.avatars .num{
  width:56px;height:56px;border-radius:50%;background:var(--lila);color:#fff;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--head);font-weight:800;font-size:15px;
  border:2.5px solid var(--night);z-index:2;
}
.hero-foot .tag{font-family:var(--head);font-weight:700;color:#fff;font-size:16px}
.hero-fields{
  margin-top:20px;font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.1em;
  text-transform:uppercase;font-family:var(--head);font-weight:600;max-width:none;
}

/* rotierendes Badge */
.badge-rot{
  position:absolute;right:56px;bottom:56px;width:130px;height:130px;z-index:3;
  display:grid;place-items:center;
}
.badge-rot svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.badge-rot text{
  font-family:var(--head);font-size:15px;font-weight:700;letter-spacing:.13em;
  fill:rgba(255,255,255,.72);text-transform:uppercase;
}
.badge-core{
  width:54px;height:54px;border-radius:50%;background:var(--lila);color:#fff;
  display:grid;place-items:center;font-size:20px;
}

/* Unterseiten-Hero */
.sub-hero{
  background:var(--night);color:#fff;padding:190px 0 110px;position:relative;overflow:hidden;
}
@media(max-width:1000px){.sub-hero{padding:150px 0 88px}}
@media(max-width:680px){.sub-hero{padding:120px 0 68px}}
.sub-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 85% 10%,rgba(124,85,206,.3),transparent 62%);
}
.sub-hero>*{position:relative;z-index:2}
.sub-hero h1{color:#fff;margin:22px 0;font-size:clamp(38px,4.8vw,74px)}
.sub-hero .lede{color:rgba(255,255,255,.82);margin-bottom:36px;max-width:52ch}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  background:var(--night-3);padding:16px 0;overflow:hidden;position:relative;
  border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);
}
.mq-track{display:flex;align-items:center;gap:44px;width:max-content;will-change:transform}
.mq-item{
  font-family:var(--head);font-weight:900;letter-spacing:-.02em;line-height:1;
  font-size:clamp(28px,3.6vw,52px);text-transform:uppercase;color:#fff;white-space:nowrap;
}
.mq-item.outline{
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.82);text-stroke:2px rgba(255,255,255,.82);
}
.mq-sep{color:var(--lila-light);font-size:clamp(18px,2vw,28px)}

/* ==========================================================================
   SCHMERZ-/ZIELE-LISTEN
   ========================================================================== */
.pain{margin:30px 0;list-style:none}
.pain li{
  padding:16px 0 16px 42px;position:relative;color:var(--body-c);
  border-bottom:1px solid var(--rule);font-size:19px;
}
.pain li:first-child{border-top:1px solid var(--rule)}
.pain li::before{content:'✦';position:absolute;left:8px;top:16px;color:var(--lila);font-size:15px}
.pain-end{font-family:var(--head);font-weight:700;color:var(--ink);font-size:clamp(20px,1.8vw,26px);line-height:1.35;margin-top:34px}

.ziele{list-style:none;margin-top:28px}
.ziele li{
  padding:12px 0 12px 34px;position:relative;font-size:17px;
}
.ziele li::before{
  content:'';position:absolute;left:0;top:21px;width:16px;height:2px;background:var(--lila);
}
.on-dark .ziele li::before,.fb-card .ziele li::before{background:var(--lila-light)}

/* ==========================================================================
   SERVICE-ZEILEN
   ========================================================================== */
.svc{margin-top:52px;border-top:1px solid var(--rule)}
.svc-row{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:36px;align-items:center;padding:40px 32px;border-bottom:1px solid var(--rule);
  text-decoration:none;cursor:pointer;overflow:hidden;
  transition:color .4s var(--ease);
}
.svc-row::before{
  content:'';position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .55s var(--ease);z-index:0;
}
.svc-row>*{position:relative;z-index:1}
.svc-idx{
  font-family:var(--head);font-weight:800;font-size:15px;letter-spacing:.1em;color:var(--lila);
  transition:color .4s;
}
.svc-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.svc-head h3{margin:0;transition:color .4s}
.pill{
  font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--lila-soft);color:var(--lila-deep);border-radius:50px;padding:6px 14px;
  transition:background .4s,color .4s;
}
.svc-main p{margin:0;color:var(--body-c);transition:color .4s;max-width:82ch}
.go{
  width:56px;height:56px;border-radius:50%;border:1.5px solid var(--rule);
  display:grid;place-items:center;color:var(--ink);flex:0 0 auto;
  transition:transform .45s var(--ease),background .4s,color .4s,border-color .4s;
}
.go svg{width:20px;height:20px}
.svc-row:hover::before{transform:translateY(0)}
.svc-row:hover .svc-head h3{color:#fff}
.svc-row:hover .svc-main p{color:rgba(255,255,255,.72)}
.svc-row:hover .svc-idx{color:var(--lila-light)}
.svc-row:hover .pill{background:rgba(255,255,255,.12);color:#fff}
.svc-row:hover .go{background:var(--lila);border-color:var(--lila);color:#fff;transform:rotate(-45deg)}

/* ==========================================================================
   KARTEN 01/02/03  (Bemox: gekerbte Ecke)
   ========================================================================== */
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:52px}
.dcard{
  position:relative;background:var(--white);border-radius:var(--radius);padding:40px 34px 36px;
  border:1px solid var(--rule);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.dcard::after{
  content:'';position:absolute;right:0;top:0;width:76px;height:76px;
  background:var(--bg);border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);
  border-bottom-left-radius:var(--radius);transition:background .4s,border-color .4s;
}
.dcard .dn{
  position:relative;z-index:2;
  font-family:var(--head);font-weight:900;font-size:34px;letter-spacing:-.03em;
  color:var(--lila);margin-bottom:26px;
}
.dcard h3{margin-bottom:12px;position:relative;z-index:2;font-size:clamp(19px,1.5vw,23px)}
.dcard p{font-size:16.5px;margin:0;position:relative;z-index:2}
/* Hover nur auf echten Hover-Geraeten -> kein klebender Lift/Rahmen nach Tap auf Touch. */
@media(hover:hover){
  .dcard:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(34,27,49,.1);border-color:var(--lila)}
  .dcard:hover::after{background:var(--lila);border-color:var(--lila)}
}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:26px}
.stat-card{position:relative;border-radius:var(--radius);padding:44px 40px;overflow:hidden}
.stat-lila{background:var(--lila);color:rgba(255,255,255,.88)}
.stat-dark{background:var(--night);color:rgba(255,255,255,.76)}
.stripes{
  position:absolute;right:-30px;top:-30px;width:220px;height:220px;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(255,255,255,.22) 12px 14px);
  border-radius:50%;
}
.stat-card .sn{
  position:relative;z-index:2;display:block;
  font-family:var(--head);font-weight:900;font-size:clamp(60px,7vw,96px);line-height:1;
  color:#fff;letter-spacing:-.045em;
}
.stat-card .sn sup{font-size:.42em;vertical-align:super;margin-left:.02em}
.stat-card .sl{
  position:relative;z-index:2;display:block;margin:14px 0 16px;
  font-family:var(--head);font-weight:700;font-size:19px;color:#fff;
}
.stat-card .sd{position:relative;z-index:2;font-size:16.5px;margin:0}
.stat-lila .sd{color:#fff}/* AA-Kontrast auf Lila */
/* Social-Proof-Ribbon direkt unter Hero/Marquee (CRO: fruehes Fremd-Beweis-Signal). */
.proofbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;max-width:var(--wrap);margin:0 auto;padding:20px var(--gut);text-align:center;text-decoration:none;color:var(--body-c);font-size:15px;border-bottom:1px solid var(--rule)}
.proofbar__t b{color:var(--ink);font-weight:600}
.proofbar__go{color:var(--lila-deep,#6743B4);font-weight:600;white-space:nowrap}
@media(hover:hover){.proofbar:hover .proofbar__go{text-decoration:underline}}
#stimmen{scroll-margin-top:100px}

/* ==========================================================================
   VIKTOR / MEDIA-BLOCK
   ========================================================================== */
.vk{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:76px;align-items:start}
.vk-media{position:relative}
.vk-name{
  margin-top:20px;font-family:var(--head);font-weight:700;color:var(--ink);font-size:17px;line-height:1.5;
}
.vk-name span{color:var(--muted);font-weight:500}
.vk-name a{display:inline-block;margin-top:4px;font-size:14px;font-weight:600;color:var(--lila-deep);text-decoration:none;transition:color .2s}
.vk-name a:hover{color:var(--lila);text-decoration:underline;text-underline-offset:2px}
.vk h2{margin:16px 0 22px}
/* Ueber uns: Team-Feature als eigene, zentrierte Sektion (frueher stand das hohe
   Teamfoto in der linken Bio-Spalte -> rechts riesige tote Flaeche). */
.team-block{max-width:680px;margin-inline:auto;text-align:center}
.team-block .eyebrow{margin-bottom:14px}
.team-block h2{margin:0 0 16px}
.team-lead{margin:0 auto;max-width:58ch;color:var(--body-c)}
.team-photo{max-width:440px;margin:40px auto 0}
.team-cap{margin-top:16px;font-size:14px;color:var(--muted);font-family:var(--head);font-weight:500}

/* Sticker-Button mit rotierendem Text */
.sticker{
  position:absolute;right:-34px;bottom:112px;width:132px;height:132px;cursor:pointer;
  display:grid;place-items:center;text-decoration:none;
  background:var(--lila);border-radius:50%;box-shadow:0 16px 44px rgba(124,85,206,.4);
  transition:transform .4s var(--ease),background .3s;
}
.sticker svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.sticker text{
  font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.12em;fill:#fff;text-transform:uppercase;
}
.stick-arr{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--lila);display:grid;place-items:center}
.stick-arr svg{position:static;width:18px;height:18px;animation:none}
.sticker:hover{background:var(--ink);transform:scale(1.06)}
.sticker:hover .stick-arr{color:var(--ink)}

/* ==========================================================================
   STIMMEN-SLIDER
   ========================================================================== */
.slider{position:relative}
.sl-track{
  display:flex;gap:26px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:8px;scrollbar-width:none;
}
.sl-track::-webkit-scrollbar{display:none}
.cell{
  scroll-snap-align:start;flex:0 0 calc(33.333% - 18px);
  background:var(--night-2);border:1px solid var(--rule-dark);border-radius:var(--radius);
  padding:38px 32px 32px;position:relative;
  transition:border-color .4s,transform .5s var(--ease),background .4s;
}
.cell:hover{border-color:var(--lila-light);transform:translateY(-6px);background:#251C3A}
.cell .qm{
  display:block;font-family:var(--head);font-size:64px;line-height:.6;color:var(--lila-light);margin-bottom:18px;
}
.cell p{font-size:17.5px;color:rgba(255,255,255,.86);margin-bottom:24px}
.who{display:flex;flex-direction:column;gap:2px;padding-top:18px;border-top:1px solid var(--rule-dark)}
.who b{font-family:var(--head);font-weight:700;color:#fff;font-size:16px}
.who span{font-size:14px;color:rgba(255,255,255,.5)}
.sl-nav{display:flex;gap:12px;margin-top:34px}
.sl-btn{
  width:52px;height:52px;border-radius:50%;border:1.5px solid var(--rule-dark);
  background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:.35s var(--ease);
}
.sl-btn svg{width:19px;height:19px}
.sl-btn:hover{background:var(--lila);border-color:var(--lila)}

/* Bildstreifen „Vor Ort bei unseren Kund:innen“ */
.vor-ort{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:26px}
.vo .ph-box{aspect-ratio:3/2;border-color:var(--rule-dark)}
.vo figcaption{
  margin-top:14px;font-family:var(--head);font-weight:600;font-size:14px;
  letter-spacing:.06em;color:rgba(255,255,255,.6);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:22px;padding:28px 60px 28px 0;
  font-family:var(--head);font-weight:700;color:var(--ink);
  font-size:clamp(18px,1.5vw,23px);line-height:1.35;
  transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{
  font-style:normal;font-size:14px;font-weight:800;letter-spacing:.08em;color:var(--lila);flex:0 0 auto;
}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;width:16px;height:16px;margin-top:-8px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/16px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 16px no-repeat;
  transition:transform .4s var(--ease);
}
.faq details[open] summary{color:var(--lila)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .ans{padding:0 60px 30px 0;overflow:hidden}
.faq .ans p{font-size:17px;max-width:80ch}

/* ==========================================================================
   ZUSAGE / SCHRITTE / CASES
   ========================================================================== */
.zu-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:72px;align-items:center}
.zu-zahl{
  text-align:center;border:1px solid var(--rule-dark);border-radius:var(--radius-lg);
  padding:56px 30px;background:rgba(255,255,255,.03);
}
.zahl-n{
  font-family:var(--head);font-weight:900;font-size:clamp(88px,11vw,150px);line-height:1;
  color:#fff;letter-spacing:-.05em;display:block;
}
.zahl-n .plus{color:var(--lila-light)}
.zahl-t{
  display:block;margin-top:12px;font-family:var(--head);font-weight:600;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.q{
  margin-top:34px;padding:26px 30px;border-left:3px solid var(--lila);
  background:rgba(124,85,206,.09);border-radius:0 var(--radius) var(--radius) 0;
}
.q p{font-style:italic;font-size:17.5px;margin-bottom:12px}
.q cite{font-style:normal;font-family:var(--head);font-weight:700;font-size:14px;color:var(--lila)}
.on-dark .q{background:rgba(255,255,255,.05);border-left-color:var(--lila-light)}
.on-dark .q cite{color:var(--lila-light)}
.q cite a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:opacity .2s}
@media(hover:hover){.q cite a:hover{opacity:.7}}
.q.light{margin-top:48px}

.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:20px}
.step{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:34px 32px;
  display:flex;gap:24px;align-items:flex-start;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.step-n{
  font-family:var(--head);font-weight:900;font-size:26px;color:var(--lila);flex:0 0 auto;letter-spacing:-.03em;
}
.step p{margin:0;font-size:16.5px}
@media(hover:hover){.step:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(34,27,49,.09);border-color:var(--lila)}}

.bigcase{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:stretch;
  padding:56px 0;border-top:1px solid var(--rule);
}
.bigcase.flip>*:first-child{order:2}
/* flip-Layout: gleiche Spaltenaufteilung wie der Maren-Kasten (Foto = schmale
   Spalte, Text = breite) -> Foto gleich breit wie die Logo-Karte darueber.
   Das Foto fuellt exakt die Texthoehe (aspect-ratio aus). Da der Text hier
   kurz ist, wird die Box eher quadratisch; object-position haelt das Gesicht
   oben, beschnitten wird unten (Haende), der Kopf bleibt komplett. */
.bigcase.flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.bigcase.flip .ph-box{aspect-ratio:auto}
.bigcase.flip .ph-box img{object-position:50% 8%}
/* Bild-Karte fuellt immer die volle Zeilenhoehe (= Textblock), damit sie nie
   niedriger als der Text wirkt; der Text bleibt dabei vertikal zentriert. */
.bigcase>div:first-child{align-self:center}
/* Logo statt Foto: schwarze Karte fuellt Spaltenbreite x Zeilenhoehe
   (aspect-ratio aus, sonst erzwingt 3/4 aus der Streckhoehe eine Ueberbreite),
   Logo vollstaendig sichtbar (contain, kein Beschnitt). */
.bigcase .ph-box.logo-card{aspect-ratio:auto;background:#000}
.bigcase .ph-box.logo-card img{object-fit:contain}
.bigcase .n{
  font-family:var(--head);font-weight:900;font-size:clamp(52px,6.4vw,88px);line-height:1;
  color:var(--ink);letter-spacing:-.045em;
}
.bigcase .n-sub{
  font-family:var(--head);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lila);margin:10px 0 26px;
}
.bigcase h3{margin-bottom:16px}
.bigcase .ph-box{aspect-ratio:3/4}
.bigcase .ph-box img{object-position:center 22%}

/* ==========================================================================
   ABSCHLUSS-CTA
   ========================================================================== */
.fin{padding:110px 0;text-align:center}
.fin h2{max-width:20ch;margin:0 auto 36px}
.fin .btn{margin:0 auto}
/* Mittiger Handlungs-Anker (z. B. nach den Cases, CRO): heller Breakpoint,
   kein zweiter dunkler Kasten, damit der finale .fin-CTA der starke Schluss bleibt. */
.cta-inline{text-align:center}
.cta-inline h2{max-width:20ch;margin:0 auto 26px}
.cta-inline .btn{margin:0 auto}
.cta-inline .cta-note{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.cta-inline .cta-note::before{content:'\2713';color:var(--lila);margin-right:8px;font-weight:800}
.cta-note{
  margin-top:20px;font-family:var(--head);font-size:14px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);max-width:none;
}
/* Hero liegt auf dunklem Grund -> helle Reassurance-Zeile statt muted-dunkel */
.sub-hero .cta-note{margin-top:22px;color:rgba(255,255,255,.68)}
/* Vertrauensanker above the fold (CRO): belegbare Garantie + Leistungsgebiet. */
.sub-hero .hero-trust{margin-top:16px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72);max-width:46ch}
.sub-hero .cta-note::before{content:'\2713';color:var(--lila-light);margin-right:8px;font-weight:800}

/* ==========================================================================
   FOTOBUSINESS-BAND
   ========================================================================== */
.fb-band{background:var(--lila-soft);padding:110px 0}
.fb-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center}
.fb-grid h2{margin:16px 0 24px}
.fb-card{
  background:var(--night);border-radius:var(--radius-lg);padding:48px 44px;color:rgba(255,255,255,.8);
}
.fb-card .ziele{margin:0}
.fb-card .ziele li{color:rgba(255,255,255,.86);border-bottom:1px solid var(--rule-dark);padding:16px 0 16px 34px}
.fb-card .ziele li:last-child{border-bottom:0}
.fb-note{display:block;margin-top:22px;font-size:14.5px;color:var(--muted);max-width:52ch}
.fb-note a{color:var(--lila-deep)}

/* ==========================================================================
   WISSEN: Filter + Artikel-Raster
   ========================================================================== */
.sec-list{padding-top:96px}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:46px}
.fb-btn{
  font-family:var(--head);font-weight:700;font-size:14px;cursor:pointer;
  background:transparent;border:1.5px solid var(--rule);border-radius:50px;padding:11px 24px;color:var(--ink);
  transition:.3s var(--ease);
}
.fb-btn:hover{border-color:var(--ink)}
.fb-btn.on{background:var(--lila);border-color:var(--lila);color:#fff}

.art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
/* Wissens-Hub: 3-spaltige Pillars (volle Reihe), Soft-Band, Rubrik-Sprungnav, Weitere-Themen-Liste. */
.art-grid.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
.pillars-band{background:var(--lila-soft)}
.rubrik-nav{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:26px}
.rubrik-nav a{font-size:14px;font-weight:600;color:var(--lila-deep);text-decoration:none;padding:8px 16px;border:1px solid var(--rule);border-radius:999px;transition:.2s}
.wt-list{list-style:none;columns:2;column-gap:44px;margin:6px 0 0;padding:0}
.wt-list li{margin:0 0 13px;break-inside:avoid}
.wt-list a{color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1px solid var(--rule);padding-bottom:2px;transition:color .2s}
#marketing,#studio-fuehren,#einstieg-recht,#weitere-themen{scroll-margin-top:104px}
@media(hover:hover){.rubrik-nav a:hover{background:var(--lila);color:#fff;border-color:var(--lila)}.wt-list a:hover{color:var(--lila)}}
@media(max-width:900px){.art-grid.pillars{grid-template-columns:1fr}}
@media(max-width:680px){.wt-list{columns:1}.art-thumb{aspect-ratio:16/9}}
.art{
  position:relative;display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  color:var(--body-c);
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:40px 36px 34px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s,opacity .4s,scale .4s;
}
.art.hide{display:none}
.art-thumb{margin:-40px -36px 24px;aspect-ratio:32/15;overflow:hidden;background:var(--lila-soft)}
.art-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.art:hover .art-thumb img{transform:scale(1.045)}
.art-meta{
  font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lila);margin-bottom:16px;
}
.art-title{margin-bottom:14px;transition:color .3s}
.art-sub{font-size:16.5px;margin-bottom:26px;flex:1}
.art-more{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink);
}
.art-more .arr{
  width:40px;height:40px;border-radius:50%;background:var(--lila-soft);color:var(--lila-deep);
  display:grid;place-items:center;transition:.45s var(--ease);
}
.art-more .arr svg{width:16px;height:16px}
.art:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(34,27,49,.11);border-color:var(--lila)}
.art:hover .art-title{color:var(--lila-deep)}
.art:hover .art-more .arr{background:var(--lila);color:#fff;transform:translateX(4px)}

/* ---- Einzel-Artikel (aus der Wissensdatenbank migriert) ---- */
.art-single{padding-top:14px}
.art-single .in{max-width:880px}
/* Inhaltsverzeichnis in langen Artikeln (Sprungmarken auf H2-ids). */
.toc{margin:6px 0 34px;padding:22px 26px;background:var(--lila-soft);border-radius:var(--radius)}
.toc-title{font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lila-deep);margin:0 0 12px}
.toc ul{list-style:none;margin:0;padding:0;columns:2;column-gap:34px}
.toc li{margin:0 0 9px;break-inside:avoid}
.toc a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;border-bottom:1px solid transparent;transition:.2s}
@media(hover:hover){.toc a:hover{color:var(--lila);border-bottom-color:var(--lila)}}
@media(max-width:680px){.toc ul{columns:1}}
.article-content h2[id]{scroll-margin-top:104px}
.art-hero{margin:0 0 40px;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--lila-soft)}
.art-hero img{width:100%;height:100%;object-fit:cover;display:block}
/* Bild im Fliesstext (Artikel) */
.art-figure{margin:34px 0;border-radius:16px;overflow:hidden;background:var(--lila-soft);box-shadow:0 12px 34px rgba(103,67,180,.12)}
.art-figure img{width:100%;height:auto;display:block;margin:0;border-radius:0}
.art-figure figcaption{font-size:14px;color:var(--muted,#6b6577);padding:10px 16px;background:#fff}
.article-content{font-size:18px;line-height:1.75;color:var(--body-c)}
.article-content > *:first-child{margin-top:0}
.article-content h2{font-family:var(--head);color:var(--ink);font-size:clamp(24px,2.5vw,32px);line-height:1.18;letter-spacing:-.02em;margin:48px 0 16px}
.article-content h3{font-family:var(--head);color:var(--ink);font-size:clamp(19px,1.8vw,23px);line-height:1.25;margin:34px 0 12px}
.article-content p{margin:0 0 18px}
.article-content ul,.article-content ol{margin:0 0 20px;padding-left:24px}
.article-content li{margin:0 0 9px}
.article-content li::marker{color:var(--lila)}
.article-content a{color:var(--lila-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.article-content a:hover{color:var(--lila)}
.article-content strong{color:var(--ink);font-weight:700}
.article-content img{max-width:100%;height:auto;border-radius:14px;margin:10px 0}
.article-content table{width:100%;border-collapse:collapse;margin:6px 0 26px;font-size:15.5px;display:block;overflow-x:auto}
.article-content th,.article-content td{border:1px solid var(--rule);padding:11px 15px;text-align:left;vertical-align:top}
.article-content th{background:var(--lila-soft);color:var(--ink);font-family:var(--head);font-weight:700}
.article-content blockquote{margin:26px 0;padding:18px 24px;border-left:3px solid var(--lila);background:#fff;border-radius:0 14px 14px 0;color:var(--ink)}
.article-content blockquote p:last-child{margin-bottom:0}
.article-content h2 a,.article-content h3 a{text-decoration:none;color:inherit}
.art-back{display:inline-flex;align-items:center;gap:12px;margin-top:44px;font-family:var(--head);font-weight:700;font-size:15px;color:var(--ink);text-decoration:none}
.art-back .arr{width:38px;height:38px;border-radius:50%;background:var(--lila-soft);color:var(--lila-deep);display:grid;place-items:center;transition:.4s var(--ease)}
.art-back .arr svg{width:16px;height:16px}
.art-back:hover .arr{background:var(--lila);color:#fff;transform:translateX(-3px)}
.sub-hero .eyebrow a{color:inherit;text-decoration:none}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--night);color:rgba(255,255,255,.7);padding:96px 0 40px;position:relative;overflow:hidden}
.foot h2,.foot h3{color:#fff}
.foot-cta{
  display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap;
  padding-bottom:56px;border-bottom:1px solid var(--rule-dark);
}
.foot-cta h2{max-width:16ch;margin:0}
.foot-cta-action{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot-cta .cta-note{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0}
.foot-cta .cta-note::before{content:'\2713';color:var(--lila-light);margin-right:8px;font-weight:800}
.quick{display:flex;flex-wrap:wrap;gap:34px;padding:36px 0;border-bottom:1px solid var(--rule-dark)}
.ql{
  cursor:pointer;font-family:var(--head);font-weight:700;font-size:15px;color:rgba(255,255,255,.72);
  text-decoration:none;transition:color .3s;
}
.ql:hover{color:var(--lila-light)}
.foot-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;padding:44px 0}
.fi h3{
  font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:12px;
}
.fi>a{
  font-family:var(--head);font-weight:700;font-size:clamp(17px,1.5vw,21px);color:#fff;text-decoration:none;
  transition:color .3s;
}
.fi>a:hover{color:var(--lila-light)}
.soc{display:flex;gap:10px}
.soc a{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-dark);
  display:grid;place-items:center;color:#fff;transition:.35s var(--ease);
}
.soc a:hover{background:var(--lila);border-color:var(--lila);transform:translateY(-3px)}
.foot-base{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid var(--rule-dark);font-size:14px;color:rgba(255,255,255,.5);
}
.foot-base a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .3s}
.foot-base a:hover{color:var(--lila-light)}
@media(max-width:680px){.foot-base a,.foot-base .ck-flink{display:inline-block;padding:6px 0}}
@media(max-width:680px){.case-sig a{display:inline-block;padding:4px 0}}

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-back{position:fixed;inset:0;z-index:100;background:rgba(22,16,32,.62);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
.modal-back.open{opacity:1;pointer-events:auto}
.modal{
  position:fixed;left:50%;top:50%;z-index:101;width:min(640px,calc(100vw - 40px));
  transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;
  background:var(--white);border-radius:var(--radius-lg);padding:48px 44px;
  box-shadow:0 40px 100px rgba(22,16,32,.32);transition:.4s var(--ease);
  max-height:86vh;overflow:auto;
}
.modal.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.modal h3{margin-bottom:20px;padding-right:40px}
.modal p{font-size:16.5px}
.modal .close{
  position:absolute;right:22px;top:20px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--rule);background:transparent;font-size:22px;line-height:1;color:var(--ink);
  cursor:pointer;transition:.3s
}
.modal .close:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- Videoreferenzen: Play-Button auf Kundenstimmen-Karten + Vimeo-Lightbox ---- */
/* Play = beschriftete Pille in der ECKE (nicht auf dem Gesicht), matt/durchscheinend */
/* Video-Pill = staerkster Trust-Beweis -> prominent (Marken-Lila statt dezentem Glas). */
.sg-play{position:absolute;left:14px;bottom:14px;z-index:4;
  display:inline-flex;align-items:center;gap:9px;padding:12px 18px 12px 14px;
  border:0;border-radius:100px;cursor:pointer;min-height:44px;box-sizing:border-box;
  background:var(--lila);
  color:#fff;font-family:var(--head);font-weight:700;font-size:13.5px;line-height:1;
  box-shadow:0 12px 26px -6px rgba(124,85,206,.65),0 2px 6px rgba(0,0,0,.28);
  transition:transform .22s var(--ease-lux),background .22s,box-shadow .22s}
.sg-play svg{width:16px;height:16px;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.sg-play__t{white-space:nowrap}
.sg-play:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(hover:hover){.sg-play:hover{background:var(--lila-deep);transform:translateY(-2px);box-shadow:0 16px 32px -6px rgba(124,85,206,.85),0 2px 6px rgba(0,0,0,.28)}}
/* Note-Karten: kleiner, lila-soft, inline rechts im sg-cred (flex) */
/* Note-Pill: gleiche Video-Affordanz wie die Foto-Pill (Lila+Weiss), nur kleiner -> alle 6 Karten lesen als „Video". */
.sg-play--sm{position:static;margin:14px 0 0;flex:0 0 100%;justify-content:center;padding:11px 14px;font-size:12.5px;text-shadow:none;min-height:44px;
  background:var(--lila);color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 18px -8px rgba(124,85,206,.55)}
.sg-play--sm svg{width:13px;height:13px}
.sg-play--sm:focus-visible{outline:2px solid var(--lila-deep);outline-offset:3px}
@media(hover:hover){.sg-play--sm:hover{background:var(--lila-deep);color:#fff;transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.sg-play{transition:none}}

.vmodal{width:min(960px,calc(100vw - 32px));padding:0;background:transparent;box-shadow:none;overflow:visible;max-height:none}
.vmodal .close{right:0;top:-50px;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);color:#fff}
.vmodal .close:hover{background:#fff;color:var(--ink);border-color:#fff}
.vmodal__frame{position:relative;aspect-ratio:16/9;width:100%;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 40px 100px rgba(0,0,0,.55)}
.vmodal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:560px){.vmodal .close{top:-46px}}
.vmodal__cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:13px 24px;border-radius:var(--btn-radius);background:var(--lila);color:#fff;font-family:var(--head);font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 12px 30px -8px rgba(124,85,206,.75);transition:background .2s,transform .2s}
.vmodal__cta b{font-weight:800}
@media(hover:hover){.vmodal__cta:hover{background:var(--lila-deep);transform:translateY(-2px)}}
.vmodal__cta:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ==========================================================================
   REVEAL / SPLIT-TEXT
   ========================================================================== */
.rv{opacity:0;will-change:transform,opacity}
.rv.shown{opacity:1}
html.no-js .rv,body.noanim .rv{opacity:1!important;transform:none!important}
.fx-fill .word{color:rgba(34,27,49,.16);transition:color .1s linear}
.on-dark .fx-fill .word,.foot .fx-fill .word{color:rgba(255,255,255,.2)}
.fx-fill.done .word{color:inherit}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  :root{--gut:36px}
  .hero-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:44px}
  .badge-rot{width:104px;height:104px;right:28px;bottom:28px}
  .vk{gap:48px}
  .two-col,.zu-grid,.fb-grid{gap:48px}
}
@media (max-width:1000px){
  .hd{gap:20px}
  nav{
    position:fixed;top:0;right:0;bottom:0;width:min(320px,84vw);z-index:58;
    background:var(--night);flex-direction:column;gap:0;padding:110px 32px 32px;
    transform:translateX(101%);transition:transform .45s var(--ease);
    box-shadow:-20px 0 60px rgba(22,16,32,.4);
  }
  nav.open{transform:none}
  nav a{font-size:19px;padding:16px 0;border-bottom:1px solid var(--rule-dark)}
  .burger{display:flex;order:3}
  .cta-hd{display:none}
  .sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}
  .sec-head .eyebrow{margin-top:0}
  .two-col,.vk,.zu-grid,.fb-grid,.bigcase,.hero-grid{grid-template-columns:1fr;gap:44px}
  .two-col.flip>*:first-child,.bigcase.flip>*:first-child{order:0}
  /* Einspaltig hat das even-h-Foto keinen Nachbarn zum Strecken -> eigene Hoehe. */
  .two-col.even-h .ph-box{aspect-ratio:4/5}
  /* flip-Spalten-Override auch einspaltig aufheben (hoehere Spezifitaet). */
  .bigcase.flip{grid-template-columns:1fr}
  /* Einspaltig hat das flip-Foto keinen Nachbarn zum Strecken -> eigene Hoehe. */
  .bigcase.flip .ph-box{aspect-ratio:3/4}
  /* Einspaltig: Logo-Karte braucht wieder eine eigene Hoehe (kein Nachbar zum
     Strecken). Querformat passt zum Logo, kaum schwarzer Rand. */
  .bigcase .ph-box.logo-card{aspect-ratio:3/2}
  .hero-visual{order:2}
  .hero{padding:150px 0 90px}
  .drei{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .cell{flex-basis:calc(50% - 13px)}
  .art-grid{grid-template-columns:1fr}
  .vor-ort{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ph-box.wide-shot{aspect-ratio:16/9}
  .sticker{right:16px;bottom:16px;width:110px;height:110px}
  .badge-rot{display:none}
}
@media (max-width:680px){
  :root{--gut:22px;--radius-lg:24px}
  body{font-size:17px}
  section{padding:84px 0}
  .sec-tight,.fb-band,.fin{padding:70px 0}
  .stats{grid-template-columns:1fr}
  .svc-row{grid-template-columns:auto minmax(0,1fr);gap:18px;padding:30px 18px}
  .svc-row .go{display:none}
  .foot-info{grid-template-columns:1fr;gap:26px}
  .foot-cta{padding-bottom:38px}
  .cell{flex-basis:88%}
  .modal{padding:38px 26px}
  .btn{font-size:15px;padding-left:20px}
  .btn .arr{width:38px;height:38px}
  .scroll-dial{display:none} /* kollidierte mit der Sticky-CTA-Bar auf Mobile */
  .to-top{right:16px;bottom:76px}
  .rounded{margin:0 8px}
  .mq-track{gap:26px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
  .hero-a__bg{animation:none!important}
  .btn:hover,.btn:active,.btn:hover .arr,.art:hover .art-more .arr{transform:none!important}
}

/* Der Sticker lag halb hinter dem Foto – jetzt vollstaendig davor. */
.vk-media{position:relative;z-index:1}
.sticker{z-index:5;right:-18px}

/* Die Kreise waren leere graue Flaechen – jetzt Kundenfotos. */
.avatars .av-ph{overflow:hidden}
.avatars .av-ph img{width:100%;height:100%;object-fit:cover}

/* Nur im Pruefmodus: Hero nicht mit dem Fenster mitwachsen lassen. */
html.adon-audit .hero,
html.adon-audit .sub-hero,
html.adon-audit .v-hero{min-height:760px !important;height:auto !important}

/* ADON: Abstand unter Ueberschriften – die Vorlage setzt margin:0 auf
   alles und stellt ihn nur in einzelnen Bloecken wieder her. Dadurch klebten
   h2/h3 in .narrow, .two-col und .zu-grid direkt auf dem Folgeabsatz. */
.narrow h2,.two-col h2,.zu-grid h2,.narrow h3,.two-col h3{margin-bottom:22px}
.narrow p,.two-col p{margin-bottom:14px}

/* ADON: Ergebnis-Karten oben ausrichten – sie strecken sich auf gleiche
   Hoehe, zentrierten aber den Inhalt, dadurch klaffte unten Leerraum. */
.fact{justify-content:flex-start}

/* ============================================================
   Konsolidierte Sektions-/Komponenten-Styles (ex-inline aus
   home-hero-a.html) – geteilt ueber alle Seiten (Multipage).
   ============================================================ */

.hero-a{position:relative;background:var(--night);overflow:hidden;min-height:88vh;display:flex;align-items:center;padding:112px 0 44px}
/* Hero-Foto „verkleinert": ganzes Bild in voller Hoehe, rechtsbuendig -> Kamera + Stativ
   komplett sichtbar; dunkler Studio-Hintergrund verschmilzt links mit dem Hero-BG (dort steht
   der Text). Kein Ken-Burns-Zoom, der die Kamera wieder anschneiden wuerde. Mobile: siehe unten cover. */
.hero-a__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;
  transform:scale(1.2);transform-origin:right center;
  filter:brightness(1.12) saturate(1.03)}
/* Ken Burns (freigegeben): sehr langsamer Schwenk+Zoom, nur transform =
   Kompositor, kein Repaint -> LCP bleibt geschuetzt. */
@keyframes heroKen{from{transform:scale(1.04)}to{transform:scale(1.15) translate(-2.5%,1.5%)}}
/* Ausserhalb des Viewports anhalten -> keine dauerhafte GPU-Last auf Mobile. */
.hero-a.hero-paused .hero-a__bg{animation-play-state:paused}
.hero-a__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,var(--night) 8%,rgba(22,16,32,.82) 42%,rgba(22,16,32,.25) 78%,transparent),
  linear-gradient(0deg,rgba(14,10,22,.9),transparent 40%)}
.hero-a__inner{position:relative;z-index:2;max-width:890px;margin:0;margin-left:max(24px,calc((100% - 1500px)/2))}
.hero-a .lede{max-width:40ch}
.hero-a h1{color:#fff;max-width:none;margin:16px 0 0;font-size:clamp(38px,6.2vw,82px);text-wrap:balance}
.hero-a .lede{color:rgba(255,255,255,.9);max-width:46ch;margin:22px 0 0}
.hero-a__trust{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.2)}
.hero-a__trust .tag{color:rgba(255,255,255,.8)}
.hero-a__guar{display:flex;align-items:flex-start;gap:9px;margin:0;max-width:46ch;color:rgba(255,255,255,.9);font-size:16px;line-height:1.5;text-wrap:balance}
.hero-a__guar b{color:#fff;font-weight:700}
.hero-a__guar-ic{flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;background:var(--lila);color:#fff;display:grid;place-items:center}
.hero-a__guar-ic svg{width:13px;height:13px}
.hero-a__guar-more{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin-left:2px;font:inherit;font-weight:700;color:var(--lila-light);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.hero-a__guar-more:hover{color:#fff}
.hero-a__guar-more:focus-visible{outline:2px solid var(--lila-light);outline-offset:3px;border-radius:3px}
@media(max-width:680px){.hero-a__bg{object-fit:cover;object-position:72% 14%}.hero-a__scrim{background:linear-gradient(90deg,var(--night) 8%,rgba(22,16,32,.82) 44%,rgba(22,16,32,.55) 92%),linear-gradient(0deg,var(--night) 17%,transparent 58%)}}
html.adon-audit .hero-a{min-height:760px}
.s2p .ap-head{display:block;max-width:900px;margin-bottom:34px}
.s2p .ap-head h2{margin-top:12px}
.s2p .ap-cols{align-items:stretch;gap:64px}
.s2p .ap-lead{margin:0 0 8px}
.s2p .ap-pain{margin:22px 0 0;list-style:none}
.s2p .ap-pain li{position:relative;padding:9px 0 9px 26px;margin-bottom:14px;border:none;font-size:19px;color:var(--ink);line-height:1.45}
.s2p .ap-pain li::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:3px;background:var(--lila)}
.s2p .ap-end{display:flex;gap:16px;align-items:center;background:var(--lila-soft);border-left:5px solid var(--lila);border-radius:16px;padding:24px 28px;margin-top:26px;color:var(--ink);box-shadow:0 20px 44px -26px rgba(124,85,206,.55)}
.s2p .ap-arr{flex:0 0 auto;display:inline-flex;width:38px;height:38px;border-radius:50%;background:var(--lila);color:#fff;align-items:center;justify-content:center}
.s2p .ap-arr svg{width:20px;height:20px}
.s2p a.ap-arr{text-decoration:none;transition:background .2s,transform .2s}
.s2p a.ap-arr:hover{background:var(--lila-deep);transform:translateY(2px)}
.s2p a.ap-arr:focus-visible{outline:2px solid var(--lila);outline-offset:3px}
.s2p .ap-img{align-self:stretch;min-height:340px}
@media(max-width:900px){
  .s2p .ap-cols{grid-template-columns:1fr;gap:36px}
  .s2p .ap-text{order:1}
  .s2p .ap-img{order:2;align-self:auto;aspect-ratio:4/3;min-height:0}
}
.s3b .s3-head{display:block;max-width:900px;margin-bottom:0}
.s3b .s3-head h2{margin-top:12px}
.s3b .b-intro{margin-top:22px}
.s3b .s3-lead{font-size:clamp(18px,1.25vw,21px);line-height:1.6;max-width:68ch}
.s3b .s3-goals{list-style:none;margin-top:26px;display:grid;gap:14px}
.s3b .s3-goals li{display:flex;align-items:center;gap:14px;color:var(--body-c);font-size:18px}
.s3b .s3-goals .zc{width:24px;height:24px;flex:none;border-radius:50%;background:var(--lila);color:#fff;display:grid;place-items:center}
.s3b .s3-goals .zc svg{width:14px;height:14px}
.s3b .s3-goals strong{color:var(--ink);font-weight:700}
.s3b .b-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.s3b .b-card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:20px;padding:34px;box-shadow:0 14px 34px -26px rgba(34,27,49,.42);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;cursor:pointer;text-decoration:none;color:inherit}
.s3b .b-card:focus-visible{outline:2px solid var(--lila);outline-offset:3px}
@media(hover:hover){.s3b .b-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(124,85,206,.5);border-color:var(--lila)}}
.s3b .b-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.s3b .b-ic{flex:0 0 auto;width:54px;height:54px;border-radius:14px;background:var(--lila);color:#fff;display:flex;align-items:center;justify-content:center}
.s3b .b-card + .b-card .b-ic{background:var(--lila-soft);color:var(--lila)}
.s3b .b-ic svg{width:27px;height:27px}
.s3b .b-num{font-family:var(--head);font-weight:800;font-size:15px;color:#6E6878;letter-spacing:.14em}
.s3b .b-th{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.s3b .b-th h3{margin:0;font-size:clamp(23px,1.9vw,30px);color:var(--ink)}
.s3b .b-pill{display:inline-flex;align-items:center;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#4A4553;background:#ECEAE4;border-radius:100px;padding:6px 13px}
.s3b .b-card>p{margin:0 0 26px;color:var(--body-c)}
.s3b .b-go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#43297F;background:var(--lila-soft);border-radius:var(--btn-radius);padding:11px 20px;transition:background .25s,color .25s}
.s3b .b-go svg{width:17px;height:17px;transition:transform .25s}
@media(hover:hover){.s3b .b-card:hover .b-go{background:var(--lila);color:#fff}.s3b .b-card:hover .b-go svg{transform:translateX(4px)}}
@media(max-width:900px){.s3b .b-cards{grid-template-columns:1fr}}
.s4d .d4-flow{list-style:none;padding:0;margin:52px 0 0;display:flex;align-items:stretch;gap:46px}
.s4d .d4-card{position:relative;flex:1;background:var(--white);border:1px solid var(--rule);border-radius:20px;padding:32px 28px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.s4d .d4-card:first-child{border-color:var(--lila);background:#F6F2FC}
/* d4-Prozesskarten sind Info, nicht klickbar – kein Hover-Lift (Affordanz-Klarheit) */
.s4d .d4-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.s4d .d4-ic{width:54px;height:54px;border-radius:14px;background:var(--lila-soft);color:var(--lila);display:flex;align-items:center;justify-content:center}
.s4d .d4-card:first-child .d4-ic{background:var(--lila);color:#fff}
.s4d .d4-ic svg{width:28px;height:28px}
.s4d .d4-n{font-family:var(--head);font-weight:800;font-size:34px;color:#8C8698;letter-spacing:-.03em;line-height:1}
.s4d .d4-card h3{margin-bottom:10px;min-height:2.3em;font-size:clamp(19px,1.4vw,22px)}
.s4d .d4-card p{font-size:16px;color:var(--body-c);margin:0}
.s4d .d4-card:not(:last-child)::after{content:'';position:absolute;top:50%;right:-46px;transform:translateY(-50%);width:46px;height:28px;z-index:2;background:var(--lila-deep);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/28px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/28px no-repeat}
@media(max-width:900px){
  .s4d .d4-flow{flex-direction:column;gap:54px}
  .s4d .d4-card h3{min-height:0}
  .s4d .d4-card:not(:last-child)::after{top:auto;bottom:-42px;right:auto;left:50%;transform:translateX(-50%) rotate(90deg)}
}
.s5d .s5-vk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:66px;align-items:center}
.s5d .d-media{position:relative}
.s5d .d-img{aspect-ratio:4/5;border-radius:22px}
.s5d .d-badge{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:9px;background:var(--lila);color:#fff;border-radius:12px;padding:9px 14px 9px 10px;box-shadow:0 12px 26px -16px rgba(124,85,206,.55);z-index:3}
.s5d .d-bic{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.16);display:grid;place-items:center}
.s5d .d-bic svg{width:15px;height:15px}
.s5d .d-btxt b{display:block;font-family:var(--head);font-weight:800;font-size:19px;line-height:1;letter-spacing:-.02em}
.s5d .d-btxt span{display:block;font-size:10.5px;letter-spacing:.03em;color:#fff;margin-top:2px}
.s5d .d-head{margin-bottom:18px}
.s5d .d-txt{max-width:62ch}
.s5d .d-lead{font-size:clamp(19px,1.5vw,21px);color:var(--ink);font-weight:500;line-height:1.5;margin-bottom:16px}
.s5d .d-txt>p{color:var(--body-c);margin-bottom:14px}
.s5d .name{font-family:var(--head);font-weight:700;color:var(--ink);font-size:18px;margin-top:26px}
.s5d .name span{display:block;font-weight:500;color:var(--muted);font-size:15px;margin-top:2px}
.s5d .btn-ghost{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font-family:var(--head);font-weight:700;font-size:14px;color:var(--lila-deep);background:transparent;border:1.6px solid var(--lila-deep);padding:12px 22px;border-radius:var(--btn-radius);text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.s5d .btn-ghost:hover{background:var(--lila);color:#fff;border-color:var(--lila)}
.s5d .btn-ghost:focus-visible{outline:2px solid var(--lila);outline-offset:3px}
.s5d .btn-ghost svg{width:18px;height:18px}
@media(max-width:900px){.s5d .s5-vk{grid-template-columns:1fr;gap:40px}.s5d .d-txt{max-width:none}}
.bp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.bp-grid figure.bp-card{margin:0;background:var(--night-2);border:1px solid var(--rule-dark);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column}
.bp-grid .bp-q{font-family:var(--head);font-weight:800;font-size:42px;line-height:.7;color:var(--lila-light);margin-bottom:14px}
.bp-grid blockquote{margin:0}
.bp-grid blockquote p{color:rgba(255,255,255,.88);font-size:16.5px;line-height:1.55;margin:0 0 22px;min-height:4.3em}
.bp-grid figcaption{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--rule-dark)}
.bp-grid .av{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--lila);color:#fff;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:13px}
.bp-grid figcaption cite{font-style:normal;display:block;color:#fff;font-family:var(--head);font-weight:700;font-size:15px}
.bp-grid figcaption .st{display:block;color:#B0AABF;font-size:13.5px;margin-top:1px}
.bp-grid .bp-feat{grid-column:span 2;grid-row:span 2;justify-content:center;background:linear-gradient(150deg,rgba(124,85,206,.24),rgba(31,23,48,.35));border-color:rgba(179,148,238,.4)}
.bp-grid .bp-fq{font-family:var(--head);font-weight:800;font-size:64px;line-height:.6;color:var(--lila-light);opacity:.9;margin-bottom:20px}
.bp-grid .bp-feat blockquote p{font-family:var(--head);font-weight:700;font-size:clamp(23px,2.1vw,32px);line-height:1.3;color:#fff;margin-bottom:28px;min-height:0}
.bp-grid .bp-feat figcaption{margin-top:0;padding-top:0;border-top:none}
.bp-grid .bp-feat .hl{color:var(--lila-light)}
.bp-grid .bp-feat .av{width:58px;height:58px;font-size:18px}
.bp-grid .bp-feat cite{font-size:17px}
.bp-grid .bp-feat .st{font-size:14.5px}
@media(max-width:900px){
  .bp-grid{grid-template-columns:1fr}
  .bp-grid .bp-feat{grid-column:auto;grid-row:auto}
  .bp-grid blockquote p{min-height:0}
}
.s8f .c8-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.s8f .c8-side{position:sticky;top:clamp(96px,10vh,112px)}
.s8f .c8-side .sec-head{display:block;margin-bottom:0}
/* Ablauf-Kopf linksbuendig gestapelt (wie s2p/s3b) statt Split-Grid. */
.s4d>.in>.sec-head{display:block;max-width:900px;margin-bottom:34px}
.s4d>.in>.sec-head .eyebrow{margin-top:0}
.s8f .c8-side h2{margin-top:12px}
.s8f .c8-photo{aspect-ratio:4/3;border-radius:18px;overflow:hidden;margin:22px 0 24px}
.s8f .c8-photo img{width:100%;height:100%;object-fit:cover}
.s8f .c8-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:14px;color:#fff;background:var(--lila);padding:14px 24px;border-radius:var(--btn-radius);text-decoration:none;transition:background .2s}
.s8f .c8-cta:hover{background:var(--lila-deep)}
.s8f .c8-cta svg{width:18px;height:18px}
.s8f .c8-phone{display:inline-flex;align-items:center;gap:12px;margin-top:16px;color:var(--ink);font-family:var(--head);font-weight:600;font-size:16px;text-decoration:none}
.s8f .c8-phone .pic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--lila-soft);color:var(--lila);display:grid;place-items:center}
.s8f .c8-phone .pic svg{width:18px;height:18px}
.s8f .c8-phone:hover{color:var(--lila)}
.s8f details{border-bottom:1px solid rgba(34,27,49,.1)}
.s8f details:first-child{border-top:1px solid rgba(34,27,49,.1)}
.s8f summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 4px;min-height:48px}
.s8f summary::-webkit-details-marker{display:none}
.s8f summary:hover h3{color:var(--lila)}
.s8f summary:focus-visible{outline:2px solid var(--lila);outline-offset:4px;border-radius:6px}
.s8f summary i{font-style:normal;font-family:var(--head);font-weight:800;font-size:13px;color:#6E6878;flex:none;width:24px}
.s8f summary h3{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(17px,1.35vw,20px);color:var(--ink);line-height:1.3;transition:color .2s}
.s8f summary::after{content:'';margin-left:auto;flex:none;width:11px;height:11px;border-right:2px solid #8E8899;border-bottom:2px solid #8E8899;transform:rotate(45deg);transition:transform .25s,border-color .2s}
.s8f details[open] summary::after{border-color:var(--lila)}
.s8f details[open] summary::after{transform:rotate(225deg)}
.s8f details[open] summary h3{color:var(--lila)}
.s8f .ans{padding:0 40px 26px 40px}
.s8f .ans p{font-size:16.5px;color:var(--body-c);margin-bottom:12px}
.s8f .ans p:last-child{margin-bottom:0}
@media(max-width:900px){
  .s8f .c8-grid{grid-template-columns:1fr;gap:34px}
  .s8f .c8-side,.s8f .c8-faq{min-width:0}
  .s8f .c8-side{position:static}
  .s8f .c8-photo{max-height:260px}
  .s8f .c8-cta{display:flex;width:fit-content}
  .s8f .c8-phone{display:flex;width:fit-content;margin-top:16px}
  .s8f .ans{padding:0 6px 24px 40px}
}
.fin{position:relative;overflow:hidden;isolation:isolate;margin:44px 14px;border-radius:var(--radius-lg);background:var(--night);padding:100px 40px;text-align:center}
.fin::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;-webkit-mask:radial-gradient(130% 90% at 50% 0,#000,transparent 72%);mask:radial-gradient(130% 90% at 50% 0,#000,transparent 72%)}
.fin::after{content:'';position:absolute;left:50%;top:14%;width:680px;height:360px;max-width:90%;transform:translateX(-50%);z-index:-1;background:radial-gradient(closest-side,rgba(124,85,206,.30),transparent 70%);pointer-events:none}
.fin h1,.fin h2{color:#fff;max-width:20ch;margin:0 auto 28px}
.fin .fx-fill .word{color:rgba(255,255,255,.2)}
.fin .fx-fill.done .word{color:#fff}
.fin .btn{margin:0 auto;box-shadow:0 16px 44px -10px rgba(124,85,206,.6)}
.fin .btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
.fin .cta-note{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:20px}
.fin .cta-note::before{content:'✓' / '';color:var(--lila-light);margin-right:8px;font-weight:800}
/* Risikoumkehr direkt am finalen CTA: Garantie als lesbare Zeile (kein Versal-Micro). */
.fin .cta-guar{color:rgba(255,255,255,.82);font-size:15px;line-height:1.5;max-width:34ch;margin:12px auto 0}
@media(max-width:640px){.fin{padding:60px 24px;margin:32px 12px}}
.s10plus .ziele li{padding:14px 0;display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.92);font-size:16px}
.s10plus .ziele li::before{display:none}
.s10plus .zc{width:24px;height:24px;flex:none;border-radius:50%;background:var(--lila);color:#fff;display:grid;place-items:center}
.s10plus .zc svg{width:14px;height:14px}
.s10plus .fb-shotwrap{position:relative;margin-bottom:30px}
.s10plus .fb-shot{margin-bottom:0}
.s10plus .fb-badge{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:11px;background:#fff;border-radius:13px;padding:9px 15px 9px 11px;box-shadow:0 16px 34px -12px rgba(0,0,0,.55);max-width:calc(100% - 28px)}
.s10plus .fb-badge .bi{width:28px;height:28px;flex:none;border-radius:50%;background:var(--lila);color:#fff;display:grid;place-items:center}
.s10plus .fb-badge .bi svg{width:16px;height:16px}
.s10plus .fb-badge .bt{font-family:var(--head);font-size:13px;color:var(--ink);line-height:1.25}
.s10plus .fb-badge .bt b{font-weight:700}
.s10plus .fb-badge .bt span{color:var(--muted)}
.midcta{text-align:center;margin-top:-46px;padding-bottom:22px}
.midcta--afterdark{margin-top:22px}
.midcta .cta-note{margin-top:14px}
.foot-cta h2{font-size:clamp(23px,2.3vw,30px)}
/* Mobile Sticky-CTA-Bar (nur ≤680px, erscheint nach dem Hero) */
.mcta-bar{display:none;position:fixed;left:12px;right:12px;bottom:12px;z-index:90;align-items:center;justify-content:center;gap:10px;background:var(--lila);color:#fff;font-family:var(--head);font-weight:700;font-size:16px;padding:15px 22px;border-radius:var(--btn-radius);box-shadow:0 16px 34px -10px rgba(124,85,206,.7);text-decoration:none;transform:translateY(150%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s}
.mcta-bar svg{width:18px;height:18px}
.mcta-bar.on{transform:translateY(0);visibility:visible}
.mcta-bar.on:active{transform:translateY(0) scale(.985);transition:transform .08s}
@media(max-width:1000px){.mcta-bar{display:flex}.foot{padding-bottom:96px}.scroll-dial{display:none}}
/* ===== Kontaktseite: voll-bleed dunkle Sektion, 2 Spalten (Formular links / Trust rechts).
   Design-/UI-/CRO-Konsens: Formular zuerst (Nutzer kommt vorverkauft), Trust beruhigt
   peripher; Formular in kontrastreicher Card, damit Felder auf Dunkel nicht verschwimmen. */
#kontakt .fin{margin:0;border-radius:0;padding:112px 40px 92px;text-align:left}
/* Licht/Grid nach LINKS (Inhalt ist linksbuendig) -> gleiche Beleuchtung wie der Hero */
#kontakt .fin::after{left:28%;top:2%;width:780px;height:540px;max-width:none;transform:none}
#kontakt .fin::before{-webkit-mask:radial-gradient(120% 100% at 24% 0,#000,transparent 74%);mask:radial-gradient(120% 100% at 24% 0,#000,transparent 74%)}
.ct-head{margin:0 0 30px;max-width:none}
.ct-head h1{text-align:left;max-width:22ch;margin:10px 0 12px;font-size:clamp(30px,3.3vw,46px);letter-spacing:-.02em}
.ct-sub{max-width:54ch;color:rgba(255,255,255,.8);font-size:clamp(16px,1.3vw,19px);line-height:1.55;margin:0}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:60px;align-items:start;position:relative}
/* Signature: feine vertikale Linie + lila Tick in der Spaltenfuge (Motiv der Startseite) */
@media(min-width:901px){
  .ct-grid::before{content:'';position:absolute;top:8px;bottom:8px;left:54%;width:1px;background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.03))}
  .ct-grid::after{content:'';position:absolute;top:1px;left:54%;transform:translateX(-3px);width:7px;height:7px;border-radius:4px;background:var(--lila-light)}
}

/* Formular-Card (links) – top-lit, lila getoenter Schatten */
.ct-form{background:linear-gradient(180deg,#241B39,#191127);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:38px;box-shadow:0 44px 90px -46px rgba(10,4,24,.85),inset 0 1px 0 rgba(255,255,255,.09)}
.lead-form{max-width:none;margin:0;text-align:left}
.ct-form input,.ct-form textarea{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.32);border-radius:var(--btn-radius)}
.ct-form textarea{min-height:64px}
.ct-form .lf-submit{width:100%;margin:20px 0 0}
/* Consent als abgesetzte Flaeche + sichtbarer leerer Pflicht-Zustand */
.ct-form .lf-consent{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 13px;margin-top:16px}
.ct-form .lf-consent input{outline:1px solid rgba(255,255,255,.42);outline-offset:-1px;border-radius:4px}
.lf-note{text-align:center;margin-top:12px}

/* Trust-Spalte (rechts) */
.ct-trust{padding-top:2px}
.ct-trust h2.eyebrow{margin:0 0 18px}
.ct-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:26px;position:relative}
.ct-steps::before{content:'';position:absolute;left:15px;top:15px;bottom:16px;width:1px;background:rgba(255,255,255,.14)}
.ct-steps li{display:flex;gap:16px;position:relative}
.ct-step-n{width:30px;height:30px;border-radius:50%;background:var(--lila);color:#fff;font-family:var(--head);font-weight:700;font-size:14px;display:grid;place-items:center;flex:none;position:relative;z-index:1;box-shadow:0 0 0 4px var(--night)}
.ct-step-t b{display:block;font-family:var(--head);font-weight:600;font-size:17px;color:#fff;margin-bottom:3px}
.ct-step-t span{font-size:14px;line-height:1.5;color:rgba(255,255,255,.68)}
/* „Mensch"-Gruppe: EINE Trennung darueber, danach einheitlicher Rhythmus */
.ct-person{margin-top:30px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.ct-viktor{display:flex;align-items:center;gap:16px}
.ct-avatar{width:80px;height:80px;flex:none;border-radius:50%;background:url(../img/fotos/viktor-blau.jpg) 57% 20% / 245% no-repeat,var(--night-2);border:2px solid rgba(255,255,255,.2);box-shadow:0 0 0 5px rgba(124,85,206,.16);filter:brightness(1.07) saturate(1.03)}
.ct-viktor-t b{display:block;font-family:var(--head);font-weight:600;font-size:17px;color:#fff}
.ct-viktor-t span{font-size:13.5px;color:rgba(255,255,255,.66)}
.ct-stats{display:flex;gap:26px;margin-top:18px}
.ct-stats b{display:block;font-family:var(--head);font-weight:700;font-size:20px;color:var(--lila-light);line-height:1}
.ct-stats span{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:4px;display:block;max-width:16ch}
/* Garantie-Chip = staerkstes Cold-Call-Argument, jetzt sichtbar (oeffnet Modal) */
.ct-gar{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;margin-top:20px;padding:13px 15px;background:rgba(124,85,206,.12);border:1px solid rgba(124,85,206,.3);border-radius:12px;cursor:pointer;font:inherit;font-size:13.5px;color:rgba(255,255,255,.74);line-height:1.5;transition:background .25s var(--ease)}
.ct-gar svg{flex:none;width:20px;height:20px;color:var(--lila-light);margin-top:1px}
.ct-gar b{color:#fff;font-family:var(--head);font-weight:600}
.ct-gar u{color:var(--lila-light);text-underline-offset:2px}
.ct-gar:hover{background:rgba(124,85,206,.19)}
.ct-gar:hover u{color:#fff}
.ct-alt{margin-top:18px;font-size:14px;color:rgba(255,255,255,.7);line-height:1.7}
.ct-alt a{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.ct-alt a:hover{color:var(--lila-light)}

/* Slim-Header (nur Kontaktseite): Telefon rechts statt Navi */
.hd-phone{margin-left:auto;display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;font-size:15px;color:#fff;text-decoration:none;padding:8px 4px;transition:color .3s}
.hd-phone svg{color:var(--lila-light)}
.hd-phone:hover{color:var(--lila-light)}

@media(max-width:900px){
  #kontakt .fin{padding:92px 20px 68px}
  #kontakt .fin::after{left:50%;transform:translateX(-50%)}
  .ct-head{margin-bottom:22px}
  .ct-grid{grid-template-columns:1fr;gap:28px}
  .ct-form{padding:26px}
}
.lead-form .lf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lead-form .lf-field{display:block;margin-top:14px}
.lead-form .lf-field span{display:block;font-family:var(--head);font-weight:600;font-size:13.5px;color:rgba(255,255,255,.82);margin-bottom:7px}
.lead-form .lf-field em{color:rgba(255,255,255,.5);font-style:normal;font-weight:500}
.lead-form input,.lead-form textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.17);border-radius:var(--btn-radius);padding:13px 15px;color:#fff;font-family:var(--body);font-size:16px;transition:border-color .2s,background .2s}
.lead-form input:focus,.lead-form textarea:focus{outline:none;border-color:var(--lila-light);background:rgba(255,255,255,.1)}
.lead-form input:focus-visible,.lead-form textarea:focus-visible{outline:2px solid var(--lila-light);outline-offset:2px}
.lead-form textarea{resize:vertical;min-height:82px}
.lead-form .lf-gotcha{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-form .lf-consent{display:flex;gap:11px;align-items:flex-start;margin-top:18px;font-size:14px;color:rgba(255,255,255,.82);line-height:1.5}
.lead-form .lf-consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--lila);cursor:pointer}
.lead-form .lf-consent a{color:var(--lila-light)}
.lead-form .lf-submit{margin:22px auto 0}
.lead-form .lf-submit:disabled,.lead-form .lf-submit.is-loading{opacity:.6;cursor:default;pointer-events:none}
.lead-form .lf-note{text-align:center}
.lead-form .lf-status{text-align:center;margin-top:14px;font-size:14.5px;line-height:1.55}
.lead-form .lf-status.err{color:#F6B79A}
.lead-form .lf-status.ok{color:rgba(255,255,255,.85)}
.lead-form .lf-status .lf-mailto{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.lead-form .lf-status a[href^="tel:"]{color:var(--lila-light);font-weight:700;white-space:nowrap}
.lead-form .lf-alt{text-align:center;margin-top:16px;font-size:14px;color:rgba(255,255,255,.72)}
.lead-form .lf-alt a{color:rgba(255,255,255,.88);text-decoration:none;font-weight:600}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--lila);color:#fff;padding:12px 18px;font-family:var(--head);font-weight:700;border-radius:0 0 12px 0}
.skip-link:focus{left:0}
@media(max-width:560px){.lead-form .lf-row{grid-template-columns:1fr}}

/* ===== Rechtstexte (Impressum/Datenschutz/AGB) ===== */
.legal{max-width:820px;margin:0 auto;padding:130px 0 40px}
.legal h1{font-size:clamp(30px,4vw,44px);margin-bottom:26px}
.legal h2{font-size:clamp(19px,1.9vw,25px);margin:34px 0 12px}
.legal p,.legal li{color:var(--body-c);font-size:16.5px;line-height:1.7;margin-bottom:14px}
.legal a{color:var(--lila-deep);text-decoration:underline}
.legal ul{margin:0 0 14px 20px;list-style:disc}
.legal .muted{color:var(--muted);font-size:14.5px}
@media(max-width:680px){.legal{padding:104px 22px 30px}}
/* Rechtstexte/helle Seiten ohne dunklen Hero: Header sofort solide (Nav lesbar) */
body.lp header{border-bottom-color:rgba(255,255,255,.1)}

/* ============ Kundenstimmen: Studio-Galerie (warm, foto-first) – sg- gescopet ============ */
/* schmale dunkle Rahmung um die Cream-Karte + kein grosser Leerraum zur FAQ */
.sg-sec{padding:64px 0}
.s8f{padding-top:72px}
@media(max-width:680px){.sg-sec{padding:44px 0}.s8f{padding-top:56px}}
.sg{--sg-paper:#FAF5EE;--sg-ink:#2B2622;--sg-muted:#655C55;background:var(--sg-paper);color:var(--sg-ink);border-radius:28px;padding:56px clamp(26px,5vw,68px) 60px;overflow:hidden;background-image:radial-gradient(rgba(43,38,34,.025) 1px,transparent 1px);background-size:22px 22px}
.sg-eyebrow{display:flex;width:fit-content;margin-inline:auto;align-items:center;gap:9px;font-family:var(--head);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--lila-deep)}
.sg-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lila)}
.sg > h2{font-family:var(--head);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.01em;margin:12px auto;max-width:26ch;text-wrap:balance;text-align:center;color:var(--sg-ink)}
.sg .sg-sub{margin:0 auto 14px;font-size:16px;line-height:1.5;color:var(--sg-muted);max-width:52ch;text-align:center}
.sg .sg-sub b{color:var(--sg-ink);font-weight:700}
.sg .sg-wallnote{margin:0 auto 42px;max-width:60ch;font-family:var(--head);font-weight:700;font-size:14px;color:var(--sg-muted);text-align:center}
.sg-frame{position:relative;overflow:hidden;background:#fff;padding:12px;border-radius:3px;box-shadow:0 2px 6px rgba(43,38,34,.1),0 26px 50px -12px rgba(43,38,34,.22);transition:box-shadow .45s var(--ease-lux)}
.sg-frame img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px}
.sg-pin{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0%,var(--lila-light) 46%,var(--lila-deep) 100%);box-shadow:0 3px 5px -1px rgba(43,38,34,.45),inset 0 1px 0 rgba(255,255,255,.55);z-index:2}
.sg-hl{color:var(--lila);font-weight:900}
/* Zeit-Betonung „am ersten Tag" — dezenter als das lila-gefuellte „20 Anfragen" (Ergebnis-Paar Zeit+Menge) */
.sg-em{text-decoration:underline;text-decoration-color:var(--lila);text-decoration-thickness:2px;text-underline-offset:4px}
.sg .sg-vhint{margin-top:16px;font-family:var(--head);font-weight:700;font-size:14px;color:var(--lila-deep)}
.sg cite{font-style:normal}
.sg-hero{display:grid;grid-template-columns:.55fr 1fr;gap:clamp(24px,3.5vw,48px);align-items:center;margin-bottom:18px}
.sg-cap{padding-top:0}
.sg-shot{position:relative;transform:rotate(-.9deg)}
.sg-shot img{aspect-ratio:4/5}
.sg-cap blockquote{margin:0}
.sg-cap blockquote p{font-family:var(--head);font-weight:900;font-size:clamp(24px,2.9vw,44px);line-height:1.2;letter-spacing:-.01em;color:var(--sg-ink);margin:0}
.sg-by{display:flex;align-items:center;gap:11px;margin-top:22px}
.sg-by cite{font-family:var(--head);font-weight:800;font-size:16px}
.sg-by span{color:var(--sg-muted);font-size:14px}
/* Brücke Beweis -> Versprechen: unter Kamilas „20 Anfragen" die schriftliche Garantie */
.sg .sg-guar{display:flex;gap:9px;align-items:flex-start;margin:18px 0 0;max-width:40ch;font-size:14.5px;line-height:1.5;color:var(--sg-muted)}
.sg-guar b{color:var(--sg-ink);font-weight:800}
.sg-guar-ic{flex:none;width:20px;height:20px;border-radius:50%;background:var(--lila);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:1px}
.sg-stamp{display:inline-flex;align-items:center;gap:10px;margin-top:20px;background:#fff;border:1px solid rgba(103,67,180,.35);border-radius:12px;padding:11px 16px;box-shadow:0 6px 16px rgba(43,38,34,.08);font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;transition:border-color .15s ease,background .15s ease}
.sg-stamp:hover{border-color:var(--lila);background:#faf7ff}
.sg-stamp:focus-visible{outline:2px solid var(--lila);outline-offset:2px}
.sg-stamp-more{font-family:var(--head);font-weight:700;font-size:12px;color:var(--lila-deep);white-space:nowrap;margin-left:2px}
@media(max-width:520px){.sg-stamp{flex-wrap:wrap}.sg-stamp-more{width:100%;margin-top:2px}}
.sg-stamp .sg-ic{width:26px;height:26px;border-radius:7px;background:var(--lila);color:#fff;display:grid;place-items:center;font-weight:900;font-size:14px;flex:none}
.sg-stamp b{font-family:var(--head);font-weight:800;font-size:14px;color:var(--sg-ink)}
.sg-stamp b span{display:block;font-family:var(--body);font-weight:500;font-size:12px;color:var(--sg-muted);margin-top:1px}
.sg-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(18px,2.4vw,30px);align-items:start;margin-top:16px}
.sg-item{position:relative;margin:0;transition:transform .45s var(--ease-lux)}
.sg-item.sg-photo{grid-column:span 3}
.sg-item.sg-note{grid-column:span 2}
/* Ruhiger, systematischer „auf den Tisch gelegt"-Rhythmus: sanfter Versatz je Reihe, dezente Rotation. */
.sg-item.sg-r1{transform:rotate(1deg)}.sg-item.sg-r2{transform:rotate(-1.1deg);margin-top:14px}.sg-item.sg-r3{transform:rotate(-.6deg)}
.sg-item.sg-r4{transform:rotate(.5deg);margin-top:16px}.sg-item.sg-r5{transform:rotate(-.5deg);margin-top:6px}
.sg-item:hover{transform:rotate(0) translateY(-3px);z-index:3}
.sg-item.sg-photo:hover .sg-frame,.sg-item.sg-note:hover{box-shadow:0 30px 56px rgba(43,38,34,.22)}
.sg-item.sg-photo img{aspect-ratio:3/2}
.sg-tag{position:absolute;left:16px;top:16px;z-index:2;background:rgba(43,38,34,.72);color:#fff;font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:100px}
/* Foto-Zitat auf einen weissen „Zettel-Streifen" unter dem Polaroid -> ganze Wall = ein Papier-Material */
.sg-item.sg-photo .sg-slip{background:#FFFDFA;border-radius:3px;padding:15px 18px;margin-top:12px;box-shadow:0 2px 6px rgba(43,38,34,.1),0 26px 50px -12px rgba(43,38,34,.22)}
.sg-item.sg-photo .sg-qt{margin:0;min-height:44px}
.sg-item.sg-photo .sg-qt p{margin:0;font-size:16px;line-height:1.45;color:var(--sg-ink)}
.sg-item.sg-photo .sg-cred{font-family:var(--head);font-weight:700;font-size:13.5px;color:var(--sg-ink);margin-top:9px}
.sg-item.sg-photo .sg-cred cite{font-style:normal;font-weight:700}
.sg-item.sg-photo .sg-cred span{color:var(--sg-muted);font-weight:500}
.sg-item.sg-note{background:#FFFDFA;border-radius:3px;padding:20px 20px 18px;box-shadow:0 2px 6px rgba(43,38,34,.1),0 26px 50px -12px rgba(43,38,34,.22);transition:box-shadow .45s var(--ease-lux)}
.sg-item.sg-note .sg-qt{margin:0;min-height:2.9em}
.sg-item.sg-note .sg-kick{margin:0 0 9px;font-family:var(--head);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--lila-deep)}
.sg-item.sg-note .sg-qt p{margin:0;font-size:16px;line-height:1.45;color:var(--sg-ink)}
.sg-item.sg-note .sg-cred{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.sg-item.sg-note .sg-cred img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.sg-item.sg-note .sg-cred cite{font-family:var(--head);font-weight:700;font-size:13.5px}
.sg-item.sg-note .sg-cred cite span{display:block;color:var(--sg-muted);font-size:13px;font-weight:500}
.sg-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:linear-gradient(120deg,var(--lila),var(--lila-deep));border-radius:22px;padding:32px clamp(26px,4vw,44px);margin-top:44px;color:#fff}
.sg-cta__t strong{display:block;font-family:var(--head);font-weight:900;font-size:clamp(21px,2.2vw,29px)}
.sg-cta__guar{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-family:var(--head);font-weight:700;font-size:14px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:9px 15px;border-radius:var(--btn-radius);cursor:pointer;text-align:left;-webkit-appearance:none;appearance:none;transition:background .2s}
.sg-cta__guar:hover{background:rgba(255,255,255,.28)}
.sg-cta__guar:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sg-cta__more{font-weight:800;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.sg-cta__a{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.sg-cta__a a{display:inline-flex;align-items:center;gap:11px;background:#fff;color:var(--lila-deep);font-family:var(--head);font-weight:800;font-size:17px;padding:15px 15px 15px 22px;border-radius:var(--btn-radius);text-decoration:none}
.sg-cta__a a .sg-arr{width:32px;height:32px;border-radius:50%;background:var(--lila);color:#fff;display:grid;place-items:center}
.sg-cta__a .sg-micro{font-size:13px;color:rgba(255,255,255,.85)}
@media(max-width:840px){
  .sg-hero{grid-template-columns:1fr;gap:20px}.sg-shot img{aspect-ratio:3/4}
  .sg-wall{grid-template-columns:1fr;gap:26px}.sg-item.sg-photo,.sg-item.sg-note{grid-column:auto;margin-top:0}
  .sg-item.sg-r1,.sg-item.sg-r2,.sg-item.sg-r3,.sg-item.sg-r4,.sg-item.sg-r5,.sg-shot{transform:rotate(0)}
  .sg-cta{flex-direction:column;align-items:flex-start}
  /* CTA-Knopf auf Mobil volle Breite: Text einzeilig links, Pfeil rechts. */
  .sg-cta__a{align-self:stretch}
  .sg-cta__a a{width:100%;justify-content:space-between;font-size:16px;padding-left:18px}
}
/* ---- Luxus-Foto-Hover (dezent, KEIN Zoom): Streiflicht + Mikro-Aufhellung + feiner Ring ---- */
.sg-frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.22) 50%,transparent 66%);
  transform:translateX(-130%);opacity:0}
@keyframes sgSheen{0%{transform:translateX(-130%);opacity:0}14%{opacity:1}100%{transform:translateX(130%);opacity:0}}
@media (hover:hover){
  .sg-frame img{transition:filter .6s var(--ease-lux)}
  .sg-item.sg-photo:hover .sg-frame::after,.sg-shot:hover .sg-frame::after{animation:sgSheen .95s var(--ease-lux) forwards}
  .sg-item.sg-photo:hover .sg-frame img,.sg-shot:hover .sg-frame img{filter:saturate(1.05) brightness(1.03) contrast(1.02)}
  .sg-item.sg-photo:hover .sg-frame{box-shadow:0 30px 56px rgba(43,38,34,.22),inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px rgba(124,85,206,.18)}
  .sg-shot{transition:transform .5s var(--ease-lux)}
  .sg-shot:hover{transform:rotate(-.4deg) translateY(-4px)}
  .sg-shot:hover .sg-frame{box-shadow:0 30px 56px rgba(43,38,34,.22),inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px rgba(124,85,206,.18)}
}
@media (prefers-reduced-motion:reduce){
  .sg-frame,.sg-item,.sg-shot,.sg-frame img{transition:none}.sg-item:hover{transform:none}
  .sg-frame::after{display:none}.sg-frame img{filter:none!important}
  .sg-shot:hover{transform:rotate(-.9deg)}
  .sg-shot,.sg-item.sg-r1,.sg-item.sg-r2,.sg-item.sg-r3,.sg-item.sg-r4,.sg-item.sg-r5{transform:rotate(0)}
}

/* ============================================================
   FOTO-HOVER-EFFEKTE DEAKTIVIERT (Direktor 2026-08-03).
   Schaltet alle Hover-Effekte auf Fotos ab, ohne die Original-
   Regeln zu aendern. Die fx-/sg-Klassen bleiben im HTML als
   Beleg dessen, was war. ZUM REAKTIVIEREN: diesen Block loeschen.
   Karte welcher Effekt auf welchem Foto lag: Memory adon-foto-effekte.
   Betrifft NUR Fotos; Text-Effekt .fx-fill bleibt aktiv.
   Statischer Look (Polaroid-Rahmen + Ruhe-Neigung) bleibt erhalten.
   ============================================================ */
/* A) fx-photo / fx-lift: shooting-outdoor, beratung-im-studio (2x),
      erstgespraech-videocall, viktor-portrait (index + en/index) */
.fx-photo::after,.fx-photo::before{display:none!important}
.fx-photo:hover img{filter:none!important}
.fx-photo,.fx-photo.fx-lift{transition:none!important}
.fx-photo.fx-lift:hover{transform:none!important;box-shadow:none!important}
/* B) Kundenstimmen-Galerie: kunde-kamila-burkhard, studio-photo-design,
      studio-ute-klein. Nur Hover-FX weg; Rahmen/Neigung bleiben. */
.sg-frame::after{display:none!important}
.sg-item.sg-photo:hover .sg-frame img,.sg-shot:hover .sg-frame img{filter:none!important}
.sg-shot:hover .sg-frame{
  box-shadow:0 2px 6px rgba(43,38,34,.1),0 26px 50px -12px rgba(43,38,34,.22)!important}
/* Galerie-Kacheln "an der Nadel": beim Hover ein kurzes Pendeln um den Pin
   (Drehpunkt oben Mitte) statt Lift - wie ein am Nagel haengendes Foto, das
   angetippt wird. Ruhe-Neigung je Kachel via --rot; danach haengt es wieder
   ruhig in seiner Neigung. Weiterhin KEIN Sheen/Ring/Aufhellung. */
.sg-item,.sg-shot{transform-origin:50% 0}
.sg-item.sg-r1{--rot:1deg}.sg-item.sg-r2{--rot:-1.1deg}.sg-item.sg-r3{--rot:-.6deg}
.sg-item.sg-r4{--rot:.5deg}.sg-item.sg-r5{--rot:-.5deg}.sg-shot{--rot:-.9deg}
@keyframes sgSwing{
  0%{transform:rotate(var(--rot,0deg))}
  28%{transform:rotate(calc(var(--rot,0deg) + 2.4deg))}
  52%{transform:rotate(calc(var(--rot,0deg) - 1.5deg))}
  72%{transform:rotate(calc(var(--rot,0deg) + .8deg))}
  88%{transform:rotate(calc(var(--rot,0deg) - .3deg))}
  100%{transform:rotate(var(--rot,0deg))}
}
/* Hover-Endzustand = eigene Neigung (ueberschreibt den alten Lift Z.1365);
   das Pendeln uebernimmt die Animation. */
.sg-item:hover,.sg-shot:hover{transform:rotate(var(--rot,0deg));z-index:4}
@media(hover:hover){
  .sg-item:hover,.sg-shot:hover{animation:sgSwing .9s var(--ease-lux)}
}
@media(prefers-reduced-motion:reduce){
  .sg-item:hover,.sg-shot:hover{animation:none;transform:none}
}

/* ============================================================
   Galerie sg-photo (Karin Himml, Ute Klein): Foto + Zitat als
   EINE Karte statt zwei getrennter Kaertchen (Direktor 2026-08-03).
   Weisse Karte mit EINER Schatten-Ebene = ganze Kachel; Foto oben,
   Zitat als Bildunterschrift darunter, kein Spalt.
   Betrifft nur die kleinen sg-photo-Kacheln, NICHT Kamila (.sg-shot).
   ============================================================ */
.sg-item.sg-photo{background:#fff;border-radius:4px;padding:11px;
  box-shadow:0 2px 6px rgba(43,38,34,.1),0 26px 50px -12px rgba(43,38,34,.22)}
.sg-item.sg-photo .sg-frame{background:none;box-shadow:none;padding:0;border-radius:3px}
.sg-item.sg-photo:hover .sg-frame{box-shadow:none}
.sg-item.sg-photo .sg-slip{background:none;box-shadow:none;margin-top:0;padding:12px 3px 2px;border-radius:0}

/* ============ DANKE-SEITE (Success nach Lead) ============ */
#danke .ct-grid{align-items:start}
.dk-card{background:var(--lila-soft,#EFE9FB);border:1px solid rgba(124,85,206,.16);border-radius:16px;padding:32px 28px}
.dk-card h2{margin:6px 0 18px;font-size:clamp(20px,2.4vw,26px)}
.dk-card .ct-steps{margin:0 0 22px}
.dk-card .ct-alt{margin:18px 0 20px}
.dk-check{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--lila,#7C55CE);color:#fff;box-shadow:0 8px 24px rgba(124,85,206,.32)}
.dk-check svg{width:26px;height:26px}
@media(max-width:680px){.dk-card{padding:24px 18px}}

/* ============ HUB: Brand-Kachel (Artikel ohne aktuelles Banner-Bild) ============ */
.art-thumb.brand{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--lila-deep,#6743B4) 0%,var(--lila,#7C55CE) 58%,var(--lila-light,#B394EE) 100%)}
.art-thumb.brand::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px);background-size:30px 30px}
.art-thumb.brand svg{position:relative;z-index:1;width:52px;height:52px;color:#fff;opacity:.95;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.art-thumb{position:relative}
@media(hover:hover){.art:hover .art-thumb.brand{filter:brightness(1.05)}.art:hover .art-thumb.brand svg{transform:scale(1.06);transition:transform .5s var(--ease,ease)}}
/* Tiefe + Rubrik-Varianten der Brand-Kacheln (Anti-Monotonie, alle innerhalb der Lila-Tokens) */
.art-thumb.brand::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(120% 85% at 16% 12%,rgba(255,255,255,.16),transparent 55%)}
.pillars-band .art-thumb.brand{background:linear-gradient(145deg,#5a37a6 0%,var(--lila-deep,#6743B4) 52%,var(--lila,#7C55CE) 100%)}
#studio-fuehren .art-thumb.brand{background:linear-gradient(162deg,var(--lila-deep,#6743B4) 0%,var(--lila,#7C55CE) 62%,var(--lila-light,#B394EE) 108%)}
#einstieg-recht .art-thumb.brand{background:linear-gradient(120deg,var(--lila,#7C55CE) 0%,#9a78e0 58%,var(--lila-light,#B394EE) 100%)}
@media(prefers-reduced-motion:reduce){.art:hover .art-thumb.brand svg{transform:none}}
/* Hub: 2. Kopf-Block als kompakte Intro statt Zweit-Hero */
.wd-intro{padding-top:66px}
.wd-intro-h{font-size:clamp(24px,3vw,38px);margin-bottom:14px}

/* ============ E-E-A-T Autoren-Box (Artikel) ============ */
.author-box{display:flex;gap:16px;align-items:flex-start;margin:38px 0 6px;padding:20px 22px;background:var(--lila-soft,#EFE9FB);border:1px solid var(--line,#E7E1F0);border-radius:14px}
.author-box .ab-ic{flex:none;width:46px;height:46px;border-radius:50%;background:var(--lila,#7C55CE);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(124,85,206,.25)}
.author-box .ab-ic svg{width:24px;height:24px}
.author-box .ab-name{margin:0 0 5px;font-size:15px;line-height:1.3}
.author-box .ab-name b{font-weight:600}
.author-box .ab-name span{color:var(--ink-3,#8B8399)}
.author-box .ab-bio{margin:0 0 9px;font-size:14.5px;color:var(--ink-2,#5C5470);line-height:1.55}
.author-box .ab-meta{margin:0;font-size:13px;color:var(--ink-3,#8B8399)}
.author-box .ab-meta a{color:var(--lila-deep,#6743B4);text-decoration:none;border-bottom:1px solid rgba(103,67,180,.35)}
@media(max-width:560px){.author-box{padding:16px 16px;gap:12px}.author-box .ab-ic{width:40px;height:40px}}

/* ============ E-E-A-T "Aus der Praxis"-Notiz (First-Party-Experience) ============ */
.practice-note{margin:4px 0 26px;padding:13px 17px;background:var(--lila-soft,#EFE9FB);border-left:3px solid var(--lila,#7C55CE);border-radius:9px;font-size:14.5px;line-height:1.55;color:var(--ink-2,#5C5470)}
.practice-note strong{color:var(--lila-deep,#6743B4);font-weight:600}

/* E-E-A-T: echtes Autoren-Foto in der Box (Viktor) + Byline unter H1 */
.author-box .ab-ic.ab-photo{background:url(../img/fotos/viktor-blau.webp) 57% 20% / 245% no-repeat,var(--lila,#7C55CE);filter:saturate(1.03) brightness(1.04)}
.art-byline{margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.72)}
.art-byline a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);text-decoration:none}
.art-byline a:hover{border-color:#fff}