/* =====================================================================
   Black Flag Website 3.0, Design-System "Style 1" (Editorial dunkel)
   ENTSCHIEDEN 19.07.2026 (André): Basis ist die volle Home (styles/1-home)
   mit kompakter Hero-Headline nach Style-1.1-Maß. Poppins durchgängig,
   Sekundärtext aufgehellt (C2C7D0 / 9BA1AC). Extrahiert aus styles/1-home.html.
   Enthält auch die CSS-Bloecke der Entwurfs-Varianten (var-pill, stack, osplit,
   layer-rows, growviz, startsteps, wtl), diese fliegen beim Production-Build raus.
   ===================================================================== */
:root{
  --bg:#15161A; --bg2:#1D1F23; --card:#25272E; --hot:#262533;
  --accent:#7C74F2; --ink:#15161A; --white:#FFFFFF; --text:#E7E8EA;
  --muted:#C2C7D0; --dim:#9BA1AC; /* zweite Aufhellung 19.07. auf Wunsch André (vorher AEB4BE und 8A909B, Original-CI 9AA0AA und 6B7079) */ --cream:#FAF9F5; --line:rgba(255,255,255,.10);
  --f:'Poppins',system-ui,sans-serif; --m:'Poppins',system-ui,sans-serif; /* Label-Schrift testweise Poppins statt JetBrains Mono (André 19.07.) */
}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Anker-Ziele nicht unter den fixierten Header springen lassen (Zuruf Andre 23.08.).
   Der Header ist position:fixed und rund 88px hoch, ungescrollt sogar etwas mehr. */
[id]{scroll-margin-top:104px}
body{background:var(--bg);color:var(--text);font-family:var(--f);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.mono{font-family:var(--m)}
::selection{background:var(--accent);color:var(--ink)}

/* Loader */
#loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:opacity .6s ease,visibility .6s}
#loader.done{opacity:0;visibility:hidden}
#loader .lw{font-family:var(--m);color:var(--dim);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase}
#loader .num{font-family:var(--f);font-weight:800;font-size:clamp(4rem,18vw,13rem);letter-spacing:-.04em;line-height:1;color:var(--white)}
#loader .num b{color:var(--accent)}

/* Nav */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.3s;padding:22px 0}
header.scrolled{background:rgba(21,22,26,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:15px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:1rem}
.nlinks{display:flex;gap:32px;font-size:1.06rem;font-weight:500}
.nlinks a{color:var(--muted);transition:.2s}.nlinks a:hover{color:var(--white)}
.ncta{font-family:var(--m);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);padding:12px 20px;border-radius:999px;transition:.2s}
.ncta:hover{background:var(--accent);color:var(--ink)}
/* Burger-Menue (nachgebaut 20.08.: der Button lag seit dem Prototyp ungestylt im Markup
   und erschien als weisser Standard-Button, Mobile hatte sitewide keine Navigation) */
.nav-actions{display:flex;align-items:center;gap:15px}
/* Sprachumschalter (Variante 2 "Globus mit Kuerzel", Entscheidung Andre 24.08.2026, Auswahl aus
   styles/lang-switcher-varianten.html): sitzt in .nav-actions vor dem CTA, per Trennlinie von der
   Navigation abgesetzt. Auf Mobile faellt die Trennlinie weg, der Umschalter bleibt sichtbar. */
.lang-switch{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.82rem;font-weight:500;letter-spacing:.06em;padding-left:18px;border-left:1px solid var(--line);transition:.2s}
.lang-switch:hover{color:var(--white)}
.lang-switch svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.lang-switch--menu{display:none}
@media(max-width:920px){.lang-switch{border-left:none;padding-left:0}}
.nav-toggle{display:none;width:50px;height:50px;border:1px solid var(--line);border-radius:12px;background:transparent;cursor:pointer;position:relative;flex:none;padding:0}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{position:absolute;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,background .2s}
.nav-toggle span{left:13px;top:23px}
.nav-toggle span::before,.nav-toggle span::after{content:"";left:0}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:920px){
  .nav{position:relative}
  .nav-toggle{display:block}
  .nlinks{display:none}
  .nav.open .nlinks{display:flex;flex-direction:column;position:absolute;top:calc(100% + 14px);left:0;right:0;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;gap:14px;font-size:1rem;box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:99}
}
/* Kopfzeile auf kleinen Handys (Fix 25.08.2026). Befund beim Mobil-Vorcheck: Bei 375px Breite lag der
   Burger-Button ausserhalb des Bildschirms, die mobile Navigation war damit nicht erreichbar. Der Fehler
   bestand schon vor dem Sprachumschalter (Burger 31px abgeschnitten), der Umschalter hat ihn verschaerft.
   Loesung: Ab 560px abwaerts wird die Kopfzeile kompakter. Die Groessen sind am 25.08.2026 auf Zuruf
   Andre um 10 Prozent angehoben worden (Logo 24 auf 26,4px, CTA-Schrift 0,7 auf 0,77rem), am
   Launch-Morgen 25.08. per Mobil-Input erneut angehoben: Logo 30px (rund 14 Prozent mehr; die
   gewuenschten 20 Prozent, also 31,7px, wuerden bei 375px den Burger wieder aus dem Bild schieben,
   das Logo ist 5,17-mal so breit wie hoch). Der Platz dafuer kommt aus Padding, Abstaenden,
   CTA-Padding und Letter-Spacing. Bei 375px Breite bleiben danach 10px Luft rechts, nachgemessen am 25.08.
   Wer hier weiter vergroessert, MUSS bei 375px nachmessen, sonst faellt der
   Burger wieder aus dem Bild. Der Burger bleibt bei 42px, unter 44px wird das Tippziel knapp. Der Audit-CTA bleibt bewusst sichtbar und
   wandert NICHT ins Burger-Menue, weil er laut Design-System auf jeder Seite statisch erreichbar sein muss.
   Das !important ist noetig, weil die Logo-Hoehe als Inline-Style im Markup steht. */
@media(max-width:560px){
  header .wrap{padding-left:10px;padding-right:10px}
  header .brand .brand-logo{height:30px !important}
  header .nav-actions{gap:5px}
  header .nav-actions .lang-switch{padding-left:6px;font-size:0;gap:0}
  header .nav-actions .lang-switch svg{width:17px;height:17px}
  header .nav-actions .ncta{font-size:.77rem;padding:10px 10px;letter-spacing:.02em}
  header .nav-actions .nav-toggle{width:42px;height:42px}
  header .nav-actions .nav-toggle span{left:10px;top:19px}
  header .nav-actions .lang-switch{display:none}
  .nlinks .lang-switch--menu{display:inline-flex;border-left:none;padding-left:0;font-size:.82rem;gap:7px}
  .nlinks .lang-switch--menu svg{width:16px;height:16px}
  header .nav-actions .ncta{white-space:nowrap}
}

/* Hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:140px 0 70px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 78% 12%,rgba(124,116,242,.22),transparent 60%),radial-gradient(50% 40% at 5% 90%,rgba(124,116,242,.08),transparent 70%);z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0);background-size:40px 40px;mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 82%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
.eyebrow{font-family:var(--m);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.tagline{font-family:var(--m);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-weight:600}
.tagline .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(124,116,242,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(124,116,242,.5)}70%{box-shadow:0 0 0 14px rgba(124,116,242,0)}100%{box-shadow:0 0 0 0 rgba(124,116,242,0)}}
.hero h1{font-weight:800;font-size:clamp(2.7rem,8vw,6.4rem);line-height:.92;letter-spacing:-.035em;margin-bottom:30px} /* ENTSCHIEDEN 19.07.: Hero-Headline kompakter nach Style 1.1, Rest bleibt */
/* Clip-Box unten vergroessern, sonst schneidet overflow:hidden bei kompakter line-height
   die Unterlaengen ab (g, p, j). Nur Padding, KEIN negatives Margin: das wuerde den
   Abstand zur Subline schlucken (Befund Andre 20.08. auf karriere). */
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.14em}
.hero h1 .l span{display:block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .l:nth-child(2) span{animation-delay:.12s}
/* Akzent in Ueberschriften. Seit 23.08.2026 nicht mehr auf .hero begrenzt, weil auch
   Uebersichtsseiten wie team.html ihre H1 ausserhalb eines .hero fuehren (Entscheidung Andre).
   <em> wird in H1 ausschliesslich fuer diesen Akzent verwendet, nie fuer echte Kursivsetzung. */
h1 em{font-style:normal;color:var(--accent)}
@keyframes rise{to{transform:translateY(0)}}
/* Block-Rise fuer Seiten-Heros ohne Zeilen-Markup (Vereinheitlichung 20.08.): ganze Headline
   steigt als Block, gleiche Kurve und Dauer wie die Zeilen-Animation der Home. */
.hero h1{overflow:hidden;padding-bottom:.14em}
.hl{display:block;transform:translateY(110%);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .hero-cta{opacity:0;animation:fade 1s .7s forwards}
@keyframes fade{to{opacity:1}}
.hcta{display:flex;gap:16px;flex-wrap:wrap;opacity:0;animation:fade 1s .7s forwards}
.hero .belege{margin-top:34px;font-family:var(--m);font-size:.78rem;color:var(--dim);opacity:0;animation:fade 1s .9s forwards}
.hero h1 .accent-word{color:var(--accent)}
.hero .h2{color:var(--text);font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:500;line-height:1.35;max-width:34ch;margin-bottom:18px}
.hero-proof{font-family:var(--m);font-size:.78rem;color:var(--dim);margin-bottom:18px}
.hero .sub{max-width:600px;color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.35rem);font-weight:300;margin-bottom:34px;opacity:0;animation:fade 1s .5s forwards}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.chips .chip{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-family:var(--m);font-size:.74rem;color:var(--muted);display:inline-flex;align-items:center;gap:8px;background:var(--bg2)}
.chips .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:600;font-size:.95rem;transition:.2s;border:1px solid transparent}
.btn--primary{background:var(--accent);color:var(--ink)}.btn--primary:hover{transform:translateY(-3px)}
.btn--ghost{border-color:var(--line);color:var(--text)}.btn--ghost:hover{border-color:var(--white)}
.arrow{display:inline-block;transition:.2s}
a:hover .arrow{transform:translateX(4px)}

/* OS console: gemeinsame Hero-Huelle fuer growth-engine und performance-pr (Entscheidung Andre 21.08.:
   eine Huelle, je Seite eigener Inhalt, keine erfundenen Werte). Groesse ist die ehemals PR-lokale
   Vergroesserung vom 20.08., jetzt fuer beide Seiten. Seitenlokale Overrides sind damit weg. */
.os-console{background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.os-console__bar{display:flex;align-items:center;gap:7px;margin-bottom:24px;font-family:var(--m);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.os-console__bar i{width:10px;height:10px;border-radius:50%;background:var(--card);display:inline-block}
.os-console__bar span{margin-left:auto}
/* Inhalt A: Layer-Liste (growth-engine). Statt Prozent-Balken ein Stapel-Marker mit vier Segmenten,
   das aktive Segment zeigt die Position des Layers im System. Misst nichts, behauptet nichts. */
.os-layer{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:19px 0;border-top:1px solid var(--line)}
.os-layer:first-of-type{border-top:0}
.os-layer__n{font-family:var(--m);font-size:.74rem;color:var(--dim)}
.os-layer__t{font-weight:600;font-size:1.02rem;display:block;margin-bottom:10px}
.os-layer__seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.os-layer__seg i{display:block;height:4px;border-radius:99px;background:var(--card)}
.os-layer__seg i.on{background:var(--accent);transform-origin:left;animation:grow 1.2s .6s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes grow{from{transform:scaleX(0)}}
.os-layer__m{font-family:var(--m);font-size:.7rem;color:var(--dim);white-space:nowrap}
@media(max-width:560px){.os-layer__m{display:none}}
/* Inhalt B: Medien-zu-KI-Antwort (performance-pr). Vertikaler Fluss, weil die Konsole neben der
   fuenfzeiligen H1 nur rund 390px breit ist: Quellen aus der Medienarbeit, Pfeil, darunter die
   KI-Antwort, in der die Marke aus den Quellen zitiert wird. */
.os-pr{display:flex;flex-direction:column;gap:10px}
.os-pr__lbl{font-family:var(--m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.os-pr__src{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:.9rem;font-weight:600;background:var(--card)}
.os-pr__src small{font-family:var(--m);font-size:.66rem;font-weight:400;color:var(--dim);white-space:nowrap}
.os-pr__flow{display:flex;align-items:center;gap:10px;color:var(--accent);padding:2px 0;font-family:var(--m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.os-pr__flow i{display:block;flex:1;height:1px;background:var(--accent);opacity:.5}
.os-pr__ans{border:1px solid rgba(124,116,242,.4);border-left:3px solid var(--accent);border-radius:12px;padding:14px 16px;background:var(--hot);font-size:.92rem;line-height:1.5}
.os-pr__ans p{margin:0 0 10px}
.os-pr__ans p b{color:var(--accent);font-weight:700}
.os-pr__cite{display:flex;flex-wrap:wrap;gap:6px}
.os-pr__cite span{font-family:var(--m);font-size:.62rem;border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--dim)}
.os-pr__src,.os-pr__flow,.os-pr__ans{animation:fadeup .7s cubic-bezier(.2,.7,.2,1) backwards}
.os-pr__src:nth-of-type(1){animation-delay:.3s}.os-pr__src:nth-of-type(2){animation-delay:.45s}.os-pr__src:nth-of-type(3){animation-delay:.6s}.os-pr__flow{animation-delay:.85s}.os-pr__ans{animation-delay:1.05s}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}}

/* Sections */
.section{padding:clamp(70px,10vw,140px) 0;border-top:1px solid var(--line)}
.section--tight{padding:clamp(50px,7vw,90px) 0}
.section--elev{background:var(--bg2)}
.section-head{max-width:760px;margin-bottom:44px}
.section-head h2,.marquee-head h2{font-weight:800;font-size:clamp(2rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.03em}
.section-head .lead{color:var(--muted);font-weight:300;font-size:1.1rem;margin-top:18px}
.textlink{font-family:var(--m);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);display:inline-flex;gap:8px;align-items:center}
.micro{font-family:var(--m);font-size:.72rem;color:var(--dim);margin-top:16px}

/* Logo marquee */
.marquee-head{margin-bottom:38px}
.marquee-head p{color:var(--muted);font-weight:300;margin-top:14px;max-width:56ch}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex;gap:16px;width:max-content;animation:scroll 60s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.logo-pill{border:1px solid var(--line);border-radius:12px;padding:18px 30px;font-weight:600;font-size:1.15rem;color:var(--muted);white-space:nowrap;background:var(--bg2);display:inline-flex;align-items:center;min-height:68px}

/* OS cards */
.os-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1080px){.os-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.os-grid{grid-template-columns:1fr}}
/* Entwurfs-Marker und Layer-Varianten (nur Vergleich, fliegt nach Entscheidung raus) */
.var-pill{display:inline-flex;align-items:center;gap:9px;border:1px dashed rgba(255,255,255,.22);border-radius:999px;padding:7px 15px;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:24px}
.var-pill i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.os-grid--three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.os-grid--three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.os-grid--three{grid-template-columns:1fr}}
/* Variante C: Stack von unten aufgebaut */
.stack{max-width:900px;margin:0 auto}
.stack__top{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stack__block{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;transition:.25s}
.stack__block:hover{border-color:var(--accent)}
.stack__n{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block}
.stack__block h3,.stack__base h3{font-size:1.08rem;font-weight:700;margin:8px 0}
.stack__block p,.stack__base p{color:var(--muted);font-size:.9rem;font-weight:300}
.stack__conn{display:flex;justify-content:center;gap:38%;height:30px}
.stack__conn i{width:1px;background:rgba(255,255,255,.22);display:block}
.stack__base{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:16px;padding:26px;text-align:center}
.stack__base p{max-width:600px;margin:0 auto}
.stack__caption{text-align:center;color:var(--dim);font-size:.8rem;margin-top:22px;font-weight:300}
@media(max-width:640px){.stack__top{grid-template-columns:1fr}.stack__conn{display:none}.stack__top{gap:12px;margin-bottom:12px}}
/* Variante C2: drei Ebenen übereinander */
.stack2{max-width:820px;margin:0 auto}
.stack2__lvl{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 28px;display:grid;grid-template-columns:auto 1fr;gap:8px 22px;align-items:baseline;transition:.25s}
.stack2__lvl:hover{border-color:var(--accent)}
.stack2__lvl h3{font-size:1.05rem;font-weight:700}
.stack2__lvl p{grid-column:2;color:var(--muted);font-size:.88rem;font-weight:300}
.stack2__lvl .stack__n{align-self:baseline}
.stack2__lvl--top{width:84%;margin:0 auto}
.stack2__lvl--mid{width:92%;margin:0 auto}
.stack2__lvl--base{border-top:3px solid var(--accent)}
.stack2__conn{display:flex;justify-content:center;height:22px}
.stack2__conn i{width:1px;background:rgba(255,255,255,.22);display:block}
@media(max-width:640px){.stack2__lvl--top,.stack2__lvl--mid{width:100%}.stack2__lvl{grid-template-columns:1fr}.stack2__lvl p{grid-column:1}}
/* Variante D: Editorial-Zeilen */
.layer-rows{border-top:1px solid var(--line)}
.layer-row{display:grid;grid-template-columns:90px 1fr 1.1fr;gap:26px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line)}
.layer-row__n{font-size:1.5rem;font-weight:800;color:rgba(255,255,255,.28);letter-spacing:-.02em;transition:.2s}
.layer-row:hover .layer-row__n{color:var(--accent)}
.layer-row h3{font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.02em}
.layer-row__body p{color:var(--muted);font-weight:300;font-size:.95rem;margin-bottom:14px}
@media(max-width:820px){.layer-row{grid-template-columns:52px 1fr}.layer-row__body{grid-column:2}}
/* Variante E: Split, von unten nummeriert */
.osplit{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:start}
.osplit__left{position:sticky;top:110px}
.osplit__right{position:relative;padding-left:34px}
.osplit__right::before{content:"";position:absolute;left:10px;top:12px;bottom:8px;width:1px;background:rgba(255,255,255,.22)}
.osplit__right::after{content:"";position:absolute;left:6px;top:0;border:5px solid transparent;border-bottom:8px solid var(--accent)}
.osplit__item{position:relative;padding:22px 0;border-bottom:1px solid var(--line)}
.osplit__item::before{content:"";position:absolute;left:-28px;top:32px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.osplit__item .n{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:8px}
.osplit__item h3{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.osplit__item p{color:var(--muted);font-weight:300;font-size:.92rem}
.osplit__hint{margin-top:16px;font-size:.74rem;color:var(--dim);font-weight:300}
@media(max-width:900px){.osplit{grid-template-columns:1fr}.osplit__left{position:static}}
.os-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:12px;transition:.25s}
.os-card:hover{transform:translateY(-6px);border-color:var(--accent)}
.os-card__ico{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent)}
.os-card__ico svg{width:22px;height:22px;stroke:currentColor}
.os-card__n{font-family:var(--m);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.os-card h3{font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.os-card p{color:var(--muted);font-weight:300;font-size:.92rem;flex:1}

/* Phasen */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.phases{grid-template-columns:1fr}}
.phase{border-top:1px solid var(--line);padding-top:24px}
.phase__n{font-family:var(--m);font-size:.72rem;color:var(--accent);margin-bottom:14px}
.phase h3{font-weight:800;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em;margin-bottom:14px}
.phase p{color:var(--muted);font-weight:300;font-size:.95rem}
/* Wie-Varianten (Entwurf) */
.pmeta{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.pmeta div{padding:9px 0;font-size:.88rem;color:var(--muted);font-weight:300;border-bottom:1px solid var(--line)}
.pmeta div:last-child{border-bottom:none}
.pmeta b{display:block;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.startsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.startsteps{grid-template-columns:1fr}}
.startstep{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;transition:.25s}
.startstep:hover{border-color:var(--accent)}
.startstep .sn{width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:.9rem;margin-bottom:14px}
.startstep h4{font-weight:700;font-size:1.02rem;margin-bottom:8px}
.startstep p{color:var(--muted);font-size:.88rem;font-weight:300}
.startstep .sdur{display:inline-block;margin-top:14px;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.month{margin-top:30px;border:1px solid var(--line);border-radius:16px;padding:26px}
.month h4{font-weight:700;font-size:1.05rem;margin-bottom:10px}
.mrow{display:grid;grid-template-columns:160px 1fr;gap:18px;padding:12px 0;border-top:1px solid var(--line);font-size:.9rem;align-items:baseline}
.mrow b{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.mrow span{color:var(--muted);font-weight:300}
@media(max-width:640px){.mrow{grid-template-columns:1fr;gap:4px}}
.loopflow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch}
@media(max-width:900px){.loopflow{grid-template-columns:1fr}.looparrow{transform:rotate(90deg);justify-self:center}}
.loopcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;transition:.25s}
.loopcard:hover{border-color:var(--accent)}
.loopcard .phase__n{margin-bottom:8px}
.loopcard h4{font-weight:700;font-size:1.05rem;margin-bottom:8px}
.loopcard p{color:var(--muted);font-size:.88rem;font-weight:300}
.looparrow{display:grid;place-items:center;color:var(--dim);font-size:1.15rem}
.loopback{height:40px;border:1px solid rgba(255,255,255,.22);border-top:none;border-radius:0 0 18px 18px;margin:14px 60px 0;position:relative}
.loopback::before{content:"";position:absolute;left:-5px;top:-8px;border:5px solid transparent;border-bottom:9px solid var(--accent)}
@media(max-width:900px){.loopback{display:none}}
.wtl{position:relative;padding-left:34px;max-width:760px}
.wtl::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.22)}
.wtl__item{position:relative;padding:0 0 28px}
.wtl__item:last-child{padding-bottom:0}
.wtl__item::before{content:"";position:absolute;left:-28px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.wtl__tag{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.wtl__item h4{font-weight:700;font-size:1.05rem;margin-bottom:6px}
.wtl__item p{color:var(--muted);font-size:.9rem;font-weight:300}
/* Variante W-F: der Loop erzeugt Wachstum */
.growviz{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,60px);align-items:center}
@media(max-width:900px){.growviz{grid-template-columns:1fr}}
.growviz__list{display:flex;flex-direction:column;gap:0}
.growviz__item{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.growviz__item:first-child{border-top:1px solid var(--line)}
.growviz__item .gn{font-size:.72rem;font-weight:700;color:var(--accent)}
.growviz__item h4{font-weight:700;font-size:1rem;margin-bottom:4px}
.growviz__item p{color:var(--muted);font-size:.86rem;font-weight:300}
.growviz__chart svg{width:100%;height:auto;display:block}

/* Cases */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1080px){.cases-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.cases-grid{grid-template-columns:1fr}}
.case-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:.25s}
.case-card:hover{transform:translateY(-6px);border-color:var(--accent)}
.case-card__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.case-logo{font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:10px;min-width:0}
/* Logo-Slot in der Karte (Zuruf Andre 20.08.): <span class="case-logo"><img class="case-mark" ...>Name</span>.
   Die Wortmarke bleibt als Text stehen, das Logo laeuft als Mark davor. So bleibt die Karte lesbar,
   auch wo noch kein Logo vorliegt, und die Reihe kippt nicht, wenn nur ein Teil bebildert ist. */
.case-mark{height:22px;width:auto;flex:none;display:block;opacity:.92}
.case-tag{font-family:var(--m);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(124,116,242,.4);border-radius:999px;padding:5px 10px;white-space:nowrap}
.case-desc{color:var(--muted);font-weight:300;font-size:.9rem}
.case-kpi{font-weight:600;font-size:.98rem;line-height:1.4;flex:1}
.case-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.case-ch{font-family:var(--m);font-size:.66rem;color:var(--dim)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.stats{grid-template-columns:1fr}}
.stat{border-top:1px solid var(--line);padding-top:22px}
.stat__n{font-weight:800;font-size:clamp(2.2rem,4.5vw,3.4rem);letter-spacing:-.03em;line-height:1;margin-bottom:14px}
.stat__n .u{color:var(--accent)}
.stat p{color:var(--muted);font-weight:300;font-size:.92rem;max-width:42ch}
.industry-pill{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.industry-pill span{border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-family:var(--m);font-size:.74rem;color:var(--muted)}

/* Personen */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.people--four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.people--four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.people{grid-template-columns:1fr}.people--four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.people--four{grid-template-columns:1fr}}
.person{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.person:hover{transform:translateY(-6px);border-color:var(--accent)}
.person__photo{position:relative;aspect-ratio:4/3;background:var(--bg2)}
.person__body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.person__body h3{font-weight:700;font-size:1.3rem;letter-spacing:-.01em}
.person__role{font-family:var(--m);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.person__axis{font-weight:500;font-size:.9rem}
.person__tag,.person__stations{color:var(--muted);font-weight:300;font-size:.86rem}
.person__body .textlink{margin-top:auto;padding-top:8px}
.people-note{font-family:var(--m);font-size:.76rem;color:var(--dim);margin-top:30px}

/* Service-Bausteine */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:.25s;position:relative}
.tile:hover{transform:translateY(-6px);border-color:var(--accent)}
.tile--hot{background:var(--hot);border-color:rgba(124,116,242,.4)}
.tile__ico{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent)}
.tile__ico svg{width:22px;height:22px;stroke:currentColor}
.tile__sig{font-family:var(--m);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tile h3{font-weight:700;font-size:1.2rem;letter-spacing:-.01em}
.tile p{color:var(--muted);font-weight:300;font-size:.9rem}

/* Numbers Don't Lie */
.ndl{background:var(--cream);color:var(--ink);border-radius:32px;padding:clamp(40px,7vw,90px) clamp(24px,5vw,70px);position:relative;overflow:hidden}
.ndl::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;background:radial-gradient(circle at 80% 20%,rgba(124,116,242,.14),transparent 45%)}
.ndl .eyebrow{color:#6b5bd6}
.ndl h2{font-weight:800;font-size:clamp(1.8rem,4.5vw,3.2rem);line-height:1.02;letter-spacing:-.03em;max-width:22ch;position:relative;z-index:1}
.ndl p{max-width:520px;color:#4a4d55;font-size:1.1rem;margin:22px 0 26px;position:relative;z-index:1}
.ndl .btn--ghost{border-color:rgba(21,22,26,.3);color:var(--ink);position:relative;z-index:1}
.ndl .btn--ghost:hover{border-color:var(--ink)}

/* Long-form */
.longform{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media(max-width:900px){.longform{grid-template-columns:1fr}}
.longform h2{font-weight:800;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.05;letter-spacing:-.03em;max-width:20ch}
.longform__body h3{font-weight:700;font-size:1.15rem;margin:28px 0 12px;letter-spacing:-.01em}
.longform__body h3:first-child{margin-top:0}
.longform__body p{color:var(--muted);font-weight:300;font-size:.98rem;margin-bottom:14px}

/* Badges und Presse */
.badge-row{display:flex;flex-wrap:wrap;gap:12px}
.badge{border:1px solid var(--line);border-radius:12px;padding:14px 20px;font-weight:500;font-size:.92rem;color:var(--text);background:var(--bg2);display:inline-flex;align-items:center;gap:10px}
.badge .ok{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.press-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.press-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.press-row{grid-template-columns:1fr}}
.press{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:20px;font-weight:600;font-size:1rem;display:flex;flex-direction:column;gap:6px}
.press small{font-family:var(--m);font-weight:400;font-size:.68rem;color:var(--dim)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;background:none;border:0;color:var(--text);font-family:var(--f);font-weight:600;font-size:clamp(1rem,1.6vw,1.2rem);text-align:left;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;transition:.2s}
.faq__q:hover{color:var(--accent)}
.faq__q .pm{flex:none;width:22px;height:22px;position:relative}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;top:50%;left:50%;background:var(--accent);transition:.25s}
.faq__q .pm::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq__q .pm::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq__item.open .faq__q .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq__a p{color:var(--muted);font-weight:300;font-size:.95rem;max-width:70ch;padding-bottom:22px}

/* Final CTA */
.final{position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 100% at 50% 0%,rgba(124,116,242,.18),transparent 60%)}
.final .wrap{position:relative}
.final-box{text-align:center;max-width:820px;margin:0 auto}
.final-box .eyebrow{justify-content:center}
.final-box h2{font-weight:800;font-size:clamp(2.4rem,7vw,5.5rem);line-height:.98;letter-spacing:-.04em;margin-bottom:22px}
.final-box p{color:var(--muted);font-weight:300;font-size:1.1rem;max-width:56ch;margin:0 auto 30px}
.final-box .hero-cta{justify-content:center}

/* Footer */
footer{padding:60px 0 20px;background:var(--bg)} /* ENTSCHIEDEN 20.08. (André, Variante B): keine Kante, gleicher Grund wie die Seite. Vorher bg2 mit border-top. */
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fcol h4{font-family:var(--m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.fcol a,.fcol p{display:block;color:var(--muted);font-size:.9rem;font-weight:300;padding:4px 0}
.fcol a:hover{color:var(--white)}
/* Footer-Link "Erstgespraech vereinbaren" in der CTA-Farbe (Zuruf Andre 25.08.2026, Mobil-Input-Nachtrag) */
.fcol a.fcta{color:var(--accent);font-weight:500}
.fcol a.fcta:hover{color:var(--white)}
.fbot{margin-top:34px;padding-top:20px;padding-bottom:0;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--m);font-size:.74rem;color:var(--dim)}
.partner-note{font-family:var(--m);font-size:.7rem;color:var(--dim);margin-top:18px}
.partner-note a{text-decoration:underline}
.exp{position:fixed;bottom:16px;left:16px;z-index:90;font-family:var(--m);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);background:rgba(21,22,26,.7);border:1px solid var(--line);padding:7px 12px;border-radius:999px;backdrop-filter:blur(6px)}

/* =====================================================================
   Mobil-Paket vom Launch-Morgen (Mobil-Input Andre, 25.08.2026).
   Gilt sitewide. index.html fuehrt eine 1:1-Kopie in ihrem Style-Block.
   ===================================================================== */
/* Kuerzung auf kleinen Handys: Text in <span class="mobil-mehr"> ist Zusatz, der auf
   Desktop steht und mobil entfaellt (Zuruf Andre: Body-Texte mobil kuerzen). */
@media(max-width:560px){.mobil-mehr{display:none}}
/* Unterseiten-Hero: kein 100vh-Zentrieren und keine 180px Kopf-Padding mehr, das riss
   zwischen Kopfzeile und Titel eine grosse Luecke (Befund Andre am Beispiel cases).
   section.hero statt .hero, weil fast jede Unterseite lokal ".hero--page{padding:180px ...}"
   definiert und der Seiten-Style nach dieser Datei laedt; die hoehere Spezifitaet setzt
   sich dagegen durch. Die Startseite ist bewusst ausgenommen (eigener Style-Block,
   dort bleibt der Vollbild-Hero). */
@media(max-width:560px){section.hero,section.hero--page{min-height:auto;padding:112px 0 44px}}
/* Footer kompakt: Leistungen und Unternehmen nebeneinander, Schrift kleiner,
   damit der Footer mobil kuerzer wird (Zuruf Andre). Brand und Kontakt volle Breite. */
@media(max-width:560px){
  footer{padding:44px 0 20px}
  .fgrid{grid-template-columns:1fr 1fr;gap:24px 16px}
  .fcol:first-child,.fcol:last-child{grid-column:1/-1}
  .fcol h4{margin-bottom:10px}
  .fcol a,.fcol p{font-size:.82rem;padding:3px 0}
  .fbot{margin-top:24px}
}
/* Abstand zwischen Beweiszeile und Hero-Visual, wenn der Hero einspaltig stapelt (Zuruf Andre
   25.08.2026, einheitlich auf allen Unterseiten): Grid-Gap 30px plus 28px ergibt rund 58px
   sichtbaren Abstand. Betrifft die Konsole (performance-pr), den Layer-Stapel (growth-engine,
   dort gleicht ein lokaler Zuschlag die nach oben herausragende Layer-04-Pille aus) und die
   Portraits der Personen-Hubs. */
@media(max-width:980px){.hero-grid > .os-hero-visual,.hero-grid > .hub-photo{margin-top:28px}}
/* Phasen-Baustein (Der Loop auf growth-engine, So arbeiten wir auf leistungen) mobil kompakt
   (Zuruf Andre 25.08.2026): kleinere Titel, engere Abstaende, die Body-Texte sind in den Seiten
   ueber .mobil-mehr gekuerzt. Desktop unveraendert. */
@media(max-width:560px){
  .phases{gap:10px}
  .phase{padding-top:14px}
  .phase__n{margin-bottom:6px}
  .phase h3{font-size:1.3rem;margin-bottom:8px}
  .phase p{font-size:.88rem}
}
/* Layer-Karten kompakt, mobil STANDARD (ENTSCHIEDEN Andre 25.08.2026): content.js setzt die
   Klasse auf den data-layers-Mount und rendert knappe Texte ohne Icons, hier nur die engeren
   Abstaende. Wirkt ausschliesslich mobil, Desktop unveraendert. */
@media(max-width:560px){
  .layers-kompakt .os-card{padding:16px 18px;gap:6px}
  .layers-kompakt .os-card h3{font-size:1.05rem}
  .layers-kompakt .os-card p{font-size:.84rem}
  .layers-kompakt{gap:10px}
}
/* Long-Form-Bloecke mobil als Ziehharmonika (Zuruf Andre): js/longform.js setzt .lf-zu
   und haengt den Umschalt-Button an. Desktop unveraendert, Inhalt bleibt im Quelltext. */
.lf-toggle{display:none;background:none;border:0;cursor:pointer;padding:0;margin-top:10px}
@media(max-width:560px){
  .longform__body.lf-zu{max-height:11em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
  .lf-toggle{display:inline-flex}
}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important}[data-reveal]{opacity:1;transform:none}.hero h1 .l span,.hl{transform:none}.hero .sub,.hcta,.hero .hero-cta,.hero .belege,.hero-proof{opacity:1}}