/* ============ BENCHMARKED BI (Figma 924:3) ============
   Seitenanfang dunkel; mit den Decisions wird die Seite hell, ab „Benchmarked against the market“ wieder dunkel bis zum Footer (Klasse .hell am body, bi.js).
   Farben laufen über Variablen, Hintergrund und Schrift blenden weich über.
   Maße skalieren mit der Fensterbreite wie Skinn (12.10., wie die Startseite): --u = 1 Design-Pixel (Figma 1440) → 1920: 1,1 px, ab 2560: 1,3 px (Deckel).
   Unter 1100 px bleibt --u = 1px (einfaches Fallback unten). */
body.bi-seite{
  --hg:var(--dunkel); --vg:var(--creme); --vg-grau:rgba(247,244,240,.5); --vg-text:rgba(247,244,240,.6); --vg-70:rgba(247,244,240,.7); --linie:rgba(247,244,240,.18); --linie-fein:rgba(247,244,240,.12);
  background:var(--hg); color:var(--vg); transition:background-color .45s ease,color .45s ease;
}
/* --u (Design-Pixel, Skalierung) kommt zentral aus styles.css */
body.bi-seite.hell{--hg:var(--creme); --vg:var(--ink); --vg-grau:var(--gedaempft); --vg-text:rgba(26,26,26,.78); --vg-70:rgba(26,26,26,.7); --linie:rgba(26,26,26,.18); --linie-fein:rgba(26,26,26,.12)}
.bi-seite .label,.bi-seite .seitenkopf h1,.bi-seite .bi-lead,.bi-seite .bi-titel,.bi-seite .bi-statement,.bi-seite .bi-links a{color:var(--vg);transition:color .45s ease}
.bi-seite .grau,.bi-seite .bi-zaehler{color:var(--vg-grau);transition:color .45s ease}
.bi-seite main .label.kerbe{width:calc(170 * var(--u))}

/* Nav: dunkle Leiste auf dem dunklen Anfang, helle ab Decisions; Dropdown-Karte bleibt weiß */
.bi-seite .sub-nav{background:rgba(26,26,24,.92);transition:padding .3s ease,background-color .45s ease}
.bi-seite.hell .sub-nav{background:rgba(247,244,240,.92)}
.bi-seite .sub-nav .wortmarke,.bi-seite .sub-nav .nav-links > a,.bi-seite .sub-nav .nav-dd-ausloeser,.bi-seite .sub-nav .lang{color:var(--vg);transition:color .45s ease}
.bi-seite:not(.hell) .nav-links .nav-dd.offen > .nav-dd-ausloeser{color:var(--vg)}

/* Seitenkopf: wächst mit (sub.css deckelt sonst bei 44 px) */
.bi-seite .seitenkopf{padding-top:calc(230 * var(--u))}
.bi-seite .seitenkopf h1{max-width:calc(1150 * var(--u))}
.bi-seite .seitenkopf .label.kerbe{margin-top:calc(9 * var(--u))}

/* Grafik „How it works“: inline (Webfonts greifen), 80 unter der H1; zeichnet sich beim Reinrutschen auf (zeichnen.js) */
.bi-grafik{margin:calc(80 * var(--u)) var(--rand) 0}
/* bis zeichnen.js den Anfangszustand gesetzt hat, bleiben beide Linien-Grafiken unsichtbar (kein Aufblitzen des fertigen Bilds) */
.js .bi-grafik:not(.bereit) svg,.js .bi-markt:not(.bereit) .bi-markt-ebene{visibility:hidden}
.bi-grafik svg{display:block;width:100%;height:auto}

/* Einleitung: Lead 28/40, Absätze 20/30, Spalte ab x=200, 760 breit */
.bi-intro{padding-top:calc(160 * var(--u))}
.bi-intro-text{margin-left:calc(170 * var(--u));max-width:calc(760 * var(--u))}
.bi-lead{font-family:var(--font-b);font-weight:400;font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead)}
.bi-intro-text p:not(.bi-lead){margin-top:calc(24 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-l);line-height:var(--lh-text-l);letter-spacing:var(--ls-text-l);color:var(--vg-text);transition:color .45s ease}
.bi-intro-text .bi-lead + p{margin-top:calc(48 * var(--u))}

/* Decisions (Ausnahme vom Seitenraster, Maße von Basic/Dept gemessen): je 11,75 % Rand, Text 22,25 %, Abstand 8,75 %, Quadrat 45,5 % der Breite.
   Voll proportional ohne Deckelung (bei 1440: 169 / 320 / 126 / 655). Prozentwerte statt vw, damit eine Scrollleiste nichts verschiebt. */
.bi-decisions{display:grid;grid-template-columns:minmax(0,22.25fr) minmax(0,45.5fr);column-gap:calc(100% * 8.75 / 76.5);padding-left:11.75%;padding-right:11.75%;padding-top:calc(300 * var(--u));padding-bottom:calc(300 * var(--u))}
.bi-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.bi-sticky-inhalt{width:100%}
/* Kopfzeile: Label + Zähler in einer Zeile (Zähler setzt bi.js) */
.bi-kopf{display:flex;column-gap:calc(24 * var(--u));margin:0}
.bi-states{display:grid}
.bi-state{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.bi-state.aktiv{opacity:1;transform:none;pointer-events:auto}
.bi-zaehler{font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label)}
.bi-titel{margin-top:calc(24 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-s);line-height:var(--lh-titel-s);letter-spacing:var(--ls-titel-s)}
.bi-text{margin-top:calc(20 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-m);line-height:var(--lh-text-m);letter-spacing:var(--ls-text-m);color:var(--vg-text);transition:color .45s ease}
/* Kacheln: oben/unten Luft, damit die erste und letzte Kachel die Fenstermitte erreichen (50 % = halbe Kachelbreite).
   Ende gespiegelt zum Anfang (300 + diese Luft): so ist die letzte Kachel aus dem Bild, bevor die Seite am Markt-Band auf Dunkel blendet */
.bi-kacheln{list-style:none;display:grid;row-gap:calc(100 * var(--u));padding:max(0px,calc(50vh - 50%)) 0}
/* Grafik als Objekt im dunklen Quadrat (wie Basic): 55 % der Kachelbreite; Ecken schneiden mit (Export-Radius 12 auf 500 → 2,4 % der Bildbreite) */
.bi-quadrat{--bild:55;aspect-ratio:1/1;background:var(--dunkel);border-radius:0;display:grid;place-items:center;container-type:inline-size}
.bi-quadrat > img{width:calc(var(--bild) * 1%);height:auto;border-radius:calc(var(--bild) * .024cqw)}
.bi-kachel-text{display:none}

/* Animierte Widgets (Code statt Bild, harte Ecken): Koordinaten 1:1 aus Figma (Widget 500 breit), --wp = 1 Figma-px.
   Startet, sobald die Kachel in der Fenstermitte steht (bi.js setzt .laeuft); ist sie ganz aus dem Bild, wird zurückgesetzt. */
.iw{position:relative;width:calc(var(--bild) * 1%);aspect-ratio:500/380;overflow:hidden;background:#fff;color:#0E0E0C;container-type:inline-size;--wp:calc(100cqw / 500);font-family:'Geist','Inter',sans-serif;-webkit-font-smoothing:antialiased}
.iw > *{position:absolute;left:calc(var(--x) * var(--wp));top:calc(var(--y) * var(--wp));margin:0;font-style:normal}
.iw-titel{font-size:calc(16 * var(--wp));line-height:calc(20 * var(--wp));font-weight:600;white-space:nowrap}
.iw-sub{font-size:calc(12 * var(--wp));line-height:calc(16 * var(--wp));color:#6E6A63;white-space:nowrap}
.iw-badge,.iw-linie,.iw-balken,.iw-verbinder{width:calc(var(--w) * var(--wp));height:calc(var(--h) * var(--wp))}
.iw-badge{display:grid;place-items:center;background:#EAF6EC;color:#1E5A2C;font-size:calc(11 * var(--wp));font-weight:500;line-height:1;white-space:nowrap;opacity:0;transform:scale(.92)}
.iw-linie{background:#E8E5DF}
.iw-balken{background:#2B2A27;transform:scaleY(0);transform-origin:bottom}
.iw-balken.minus{background:rgba(196,63,52,.85);transform-origin:top}
.iw-balken.ergebnis{background:#348654}
.iw-verbinder{height:calc(1 * var(--wp));background:#9A958C;transform:scaleX(0);transform-origin:left}
.iw-wert,.iw-achse{display:flex;justify-content:center;width:calc(var(--w) * var(--wp));line-height:calc(14 * var(--wp));white-space:nowrap}
.iw-wert{font-family:'Geist Mono',monospace;font-size:calc(10 * var(--wp));font-weight:500;color:#2B2A27;opacity:0;transform:translateY(calc(4 * var(--wp)))}
.iw-wert.minus{color:#B0302A}
.iw-wert.ergebnis{color:#1E5A2C}
.iw-achse{font-size:calc(10 * var(--wp));color:#6E6A63}
.iw.laeuft .iw-balken{transform:none;transition:transform .45s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .22s)}
.iw.laeuft .iw-wert{opacity:1;transform:none;transition:opacity .3s ease calc(var(--i) * .22s + .25s),transform .3s ease calc(var(--i) * .22s + .25s)}
.iw.laeuft .iw-verbinder{transform:none;transition:transform .25s ease calc(var(--i) * .22s + .3s)}
.iw.laeuft .iw-badge{opacity:1;transform:none;transition:opacity .3s ease 1.55s,transform .3s ease 1.55s}
/* Widgets 02–09 (aus Figma generiert): Grundelemente + Bewegungen. --t = Verzögerung, --dur = Dauer in ms */
.iw{--ue:calc(-6 * var(--wp))}
.iw-t{white-space:nowrap}
.iw-r,.iw-e,.iw-img,.iw-v{width:calc(var(--w) * var(--wp));height:calc(var(--h) * var(--wp))}
.iw-e{border-radius:50%}
.iw-img{display:block;object-fit:cover}
.iw-v{overflow:visible}
.iw .an-hoch{transform:scaleY(0);transform-origin:bottom}
.iw .an-breit{transform:scaleX(0);transform-origin:left}
.iw .an-pop{opacity:0;transform:scale(.4)}
.iw .an-fade{opacity:0;transform:translateY(calc(4 * var(--wp)))}
.iw .an-blende{opacity:0}
.iw .an-wisch{clip-path:inset(var(--ue) 100% var(--ue) var(--ue))}
.iw .an-fall{clip-path:inset(var(--ue) var(--ue) 100% var(--ue))}
.iw.laeuft .an{opacity:1;transform:none;clip-path:inset(var(--ue));transition-property:opacity,transform,clip-path;transition-duration:calc(var(--dur) * 1ms);transition-delay:calc(var(--t) * 1ms);transition-timing-function:cubic-bezier(.2,.8,.2,1)}
.iw.laeuft .an-pop{transition-timing-function:cubic-bezier(.34,1.4,.64,1)}
/* Schleife: nach dem Durchgang kurz halten, ausblenden, neu starten (bi.js) */
.iw.zurueck .an,.iw.zurueck .iw-balken,.iw.zurueck .iw-wert,.iw.zurueck .iw-verbinder,.iw.zurueck .iw-badge{opacity:0 !important;transition:opacity .3s ease !important}
@media (prefers-reduced-motion:reduce){
  .iw .iw-balken,.iw .iw-wert,.iw .iw-verbinder,.iw .iw-badge{opacity:1;transform:none;transition:none}
  .iw .an{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
}

/* ============ BENCHMARKED AGAINST THE MARKET (Figma 935:8) ============
   Dunkles Band 1440 × 760 mit eigener Fläche: harte Kante zu den hellen Decisions, danach bleibt die Seite dunkel (bi.js).
   Text links ab x = 200 (Größen in --u), Grafik füllt das Band (Positionen in %), Linien in Creme. */
.bi-markt{aspect-ratio:1440/760;overflow:hidden;background:var(--dunkel);color:var(--creme)}
.bi-markt-text{position:absolute;z-index:1;left:calc(100% * 200 / 1440);top:calc(100% * 120 / 760);width:calc(480 * var(--u))}
.bi-markt-label{font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(247,244,240,.6)}
.bi-markt-titel{font:inherit}
.bi-markt-zahl{display:block;margin:calc(15 * var(--u)) 0 0 calc(-4 * var(--u));font:500 calc(120 * var(--u))/calc(120 * var(--u)) var(--font-h)}
.bi-markt-kopf{display:block;margin-top:calc(30 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-m);line-height:var(--lh-titel-m);letter-spacing:var(--ls-titel-m)}
.bi-markt-absatz{margin-top:calc(28 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-m);line-height:var(--lh-text-m);letter-spacing:var(--ls-text-m);color:rgba(247,244,240,.6)}
.bi-markt-bild{position:absolute;inset:0;pointer-events:none}
.bi-markt-ebene{position:absolute;inset:0}
.bi-markt-ebene svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.bi-markt-raster{stroke-opacity:.035}
.bi-markt-marke{position:absolute;font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap}
.bi-markt-marke.markt{left:calc(100% * 997 / 1440);top:calc(100% * 120 / 760);color:rgba(247,244,240,.6)}
.bi-markt-marke.marke{left:calc(100% * 700 / 1440);top:calc(100% * 612 / 760)}

/* ============ FUNKTIONEN (Figma 929:2, Voids-Liste) ============
   Volle Trennlinie, Label x = 30, zweifarbige Headline x = 200 (440 breit), Liste ab x = 720; Zeile 105 hoch (24 + 28 + 6 + 22 + 24 + 1). */
.bi-funktionen{display:grid;grid-template-columns:calc(170 * var(--u)) calc(440 * var(--u)) minmax(0,1fr);align-items:start;padding-top:calc(60 * var(--u));padding-bottom:calc(150 * var(--u));border-top:1px solid var(--linie);transition:border-color .45s ease}
.bi-funktionen .label{margin-top:calc(10 * var(--u))}
.bi-funktionen-kopf{font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-m);line-height:var(--lh-titel-m);letter-spacing:var(--ls-titel-m);color:var(--vg);transition:color .45s ease}
.bi-funktionen-liste{list-style:none;margin:calc(-24 * var(--u)) 0 0 calc(80 * var(--u))}
.bi-funktion{display:flex;align-items:flex-start;column-gap:calc(16 * var(--u));padding:calc(24 * var(--u)) 0;border-bottom:1px solid var(--linie-fein);transition:border-color .45s ease}
.bi-funktion-icon{flex:none;width:calc(18 * var(--u));padding-top:calc(5 * var(--u));color:var(--vg);transition:color .45s ease}
.bi-funktion-icon svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.125}
.bi-funktion-text{flex:1;min-width:0}
.bi-funktion h3{font-family:var(--font-h);font-weight:500;font-size:var(--fs-kachel);line-height:var(--lh-kachel);letter-spacing:var(--ls-kachel);color:var(--vg);transition:color .45s ease}
.bi-funktion p{margin-top:calc(6 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-s);line-height:var(--lh-text-s);letter-spacing:var(--ls-text-s);color:var(--vg-70);transition:color .45s ease}
.bi-funktion-pfeil{flex:none;width:calc(16 * var(--u));font:400 calc(16 * var(--u))/1.5 var(--font-b);text-align:right;color:var(--vg-text);transition:color .45s ease}

/* Kontakt: volle Trennlinie, Inhalt 60 darunter */
.bi-kontakt{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,calc(760 * var(--u)));padding-top:calc(60 * var(--u));padding-bottom:calc(150 * var(--u));border-top:1px solid var(--linie);transition:border-color .45s ease}
.bi-kontakt .label{margin-top:calc(10 * var(--u))}
.bi-statement{font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-m);line-height:var(--lh-titel-m);letter-spacing:var(--ls-titel-m)}
.bi-kontakt-link{margin-top:calc(40 * var(--u));color:var(--vg)}
.bi-seite .bi-kontakt-link::after{top:calc(28 * var(--u))}

/* FAQ: volle Trennlinie oben, erste Frage 60 darunter (Rest wie Expertise-Hub, skaliert) */
.bi-faq{grid-template-columns:calc(170 * var(--u)) minmax(0,1fr);padding-top:calc(40 * var(--u));padding-bottom:calc(150 * var(--u));border-top:1px solid var(--linie)}
.bi-faq .s-faq-zeile:first-child{border-top:0}
.bi-faq .label.kerbe{margin-top:calc(28 * var(--u))}
.bi-faq .s-frage button{padding-top:calc(20 * var(--u))}
.bi-faq .s-faq-zeile{padding-bottom:calc(21 * var(--u))}
.bi-faq .s-icon{width:calc(16 * var(--u));font-size:calc(24 * var(--u));line-height:var(--lh-zeile)}
.bi-faq .s-antwort p{max-width:calc(760 * var(--u));color:var(--vg-text)}
.bi-faq{transition:border-color .45s ease}
.bi-faq .s-frage button{color:var(--vg);transition:color .45s ease}
.bi-faq .s-frage button:focus-visible{outline-color:var(--vg)}
.bi-faq .s-faq-liste{border-bottom-color:var(--linie)}
.bi-faq .s-faq-zeile{border-top-color:var(--linie)}

/* Expertise: auf Dunkel mit voller Trennlinie (vorher Saum-Band) */
.bi-expertise{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,1fr);padding-top:calc(116 * var(--u));padding-bottom:calc(116 * var(--u));border-top:1px solid var(--linie);transition:border-color .45s ease}
.bi-expertise .label{margin-top:calc(7 * var(--u))}
.bi-links a{display:inline-block;margin-right:calc(40 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-link);line-height:var(--lh-link);letter-spacing:var(--ls-link);color:var(--vg);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:calc(7 * var(--u))}
.bi-links .bi-links-zeile2{display:table;margin-top:calc(28 * var(--u))}

@media (prefers-reduced-motion:reduce){
  body.bi-seite,.bi-seite .label,.bi-seite .grau,.bi-state,.bi-seite .sub-nav{transition:none}
  .bi-state{transform:none}
}

/* Einfaches Fallback unter 1100px — kein Mitlaufen: Text steht unter jeder Kachel (Mobile ist noch nicht designt) */
@media (max-width:1100px){
  .bi-intro{padding-top:100px}
  .bi-intro-text{margin-left:0}
  .bi-decisions{grid-template-columns:minmax(0,1fr);padding-left:var(--rand);padding-right:var(--rand);padding-top:150px;padding-bottom:150px}
  .bi-quadrat{--bild:80}
  .bi-sticky{display:none}
  .bi-kacheln{padding:0;row-gap:72px}
  .bi-kachel-text{display:block;margin-top:24px}
  .bi-kontakt,.bi-expertise,.bi-faq{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .bi-markt{aspect-ratio:auto;padding-top:100px}
  .bi-markt-text{position:static;width:auto;max-width:560px}
  .bi-markt-zahl{margin:15px 0 0 -3px;font-size:88px;line-height:88px}
  .bi-markt-kopf{margin-top:24px}
  .bi-markt-absatz{margin-top:20px}
  .bi-markt-bild{position:relative;inset:auto;aspect-ratio:880/760;margin:40px calc(-1 * var(--rand)) 0;overflow:hidden}
  .bi-markt-ebene{right:auto;left:calc(-100% * 560 / 880);width:calc(100% * 1440 / 880)}
  .bi-markt-marke{font-size:10px;line-height:13px}
  .bi-funktionen{grid-template-columns:minmax(0,1fr);row-gap:20px;padding-top:60px;padding-bottom:100px}
  .bi-funktionen .label{margin-top:0}
  .bi-funktionen-liste{margin:12px 0 0}
  .bi-funktion{padding:20px 0}
  .bi-funktion p{margin-top:4px}
}