/* ============================================================================
   Hauptseite Raffael Weiss intu.AI: Seiten-CSS
   Engine: scrollcraft.css (unverändert). Hier stehen nur Marke und eigenes Markup.
   Markenwerte: wissen/person/marke.md und assets/intu-ai/design-system/ im Repo
   personal-ai-assistant. Academy-Werte: assets/iba/design-system/colors_and_type.css.
   ========================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-semibold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/inter-extrabold.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-weight: 200 1000; font-style: normal; font-display: swap; src: url("../fonts/mulish-var.woff2") format("woff2"); }

:root {
  --sc-canvas: #0A0A0F;
  --sc-surface: #1A1A24;
  --sc-ink: #E8ECEF;
  --sc-ink-soft: #B4AEC9;          /* getönt statt #6B7280: 8,9:1 auf dem Grund */
  --sc-accent: #22D3EE;
  --sc-accent-ink: #06141A;
  --sc-font-display: "Inter", system-ui, sans-serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --sc-shadow-color: 250 45% 3%;

  --weiss: #FFFFFF;
  --violett: #6023a8;
  --magenta: #8f11a8;
  --verlauf-1: linear-gradient(173deg, #0a0a0a 0%, #6023a8 100%);
  --verlauf-2: linear-gradient(173deg, #8f11a8 0%, #0a0a0a 100%);
  --flur-wand: #0d0c14;
  --flur-boden: #15121f;
  --rand: var(--sc-gutter);
  --h1: clamp(2.5rem, 5.8vw, 5.25rem);   /* „KI für deine Arbeit.“ passt damit neben dem Portrait in eine Zeile */
  --leiste-h: 68px;
}

h1, h2, h3, p, ul, dl, dd, figure, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { text-decoration: none; }
img { height: auto; }
[tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------------------ Schrift -- */
.titel { font-weight: 800; color: var(--weiss); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.titel--xl { font-size: var(--h1); }
.titel--lg { font-size: clamp(2.1rem, 1.25rem + 3.4vw, 4.25rem); line-height: 1.04; }
.titel--md { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem); line-height: 1.08; letter-spacing: -0.028em; }
.titel--sm { font-size: clamp(1.25rem, 1.12rem + 0.55vw, 1.6rem); line-height: 1.15; letter-spacing: -0.02em; }
.satz { font-size: clamp(1.06rem, 0.95rem + 0.55vw, 1.32rem); line-height: 1.5; color: var(--sc-ink); max-width: 34em; text-wrap: pretty; }
.text { max-width: 62ch; text-wrap: pretty; }
.klein { font-size: var(--sc-t-sm); line-height: 1.5; }
.leise { color: var(--sc-ink-soft); }

.sprung { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 14px; background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 800; border-radius: 10px; }
.sprung:focus { top: 12px; }

/* -------------------------------------------------------------- Knopf -- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 800; font-size: 1rem; line-height: 1; white-space: nowrap; letter-spacing: -0.005em;
  box-shadow: var(--sc-e1), inset 0 1px 0 rgba(255,255,255,.4);
  transition: background-color 150ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.knopf--klein { min-height: 40px; padding: 0 18px; font-size: .94rem; }
.knopf:active { transform: translateY(1px) scale(.985); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: #6BE3F5; } }

.weg {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: 600; color: var(--weiss); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.24em;
  transition: color 150ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .weg:hover { color: var(--sc-accent); } }

/* ------------------------------------------------------------- Leiste -- */
.leiste {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--leiste-h);
  padding-inline: var(--rand); display: flex; align-items: center; gap: clamp(16px, 2.6vw, 36px);
  background: var(--sc-canvas); border-bottom: 1px solid rgba(255,255,255,.08);
}
.leiste__marke { display: block; flex: none; }
.leiste__marke img { height: 38px; width: auto; }
.leiste__tueren { display: flex; gap: clamp(16px, 2.2vw, 28px); margin-left: auto; font-size: .94rem; font-weight: 600; }
.leiste__tueren a { display: inline-flex; align-items: center; min-height: 40px; color: var(--sc-ink); box-shadow: 0 2px 0 transparent; transition: color 150ms var(--sc-ease-out), box-shadow 150ms var(--sc-ease-out); }
.leiste__tueren a[aria-current="true"] { color: var(--weiss); box-shadow: 0 2px 0 var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .leiste__tueren a:hover { color: var(--weiss); } }

/* ============================================================ 1 · Flur == */
/* --tuer-oben: Oberkante der drei Türen. Sie rückt nach unten, wenn Überschrift und Satz
   auf einem niedrigen Bildschirm mehr Platz brauchen als 46 % der Höhe. */
.flur__buehne { background: var(--sc-canvas); --tuer-oben: max(46%, calc(13.5% + var(--h1) * 2.04 + 7.5rem)); --tuer-hoehe: 20%; }
.flur__wand {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #07070b 0%, var(--flur-wand) calc(var(--tuer-oben) + var(--tuer-hoehe)), var(--flur-boden) calc(var(--tuer-oben) + var(--tuer-hoehe) + 2px), var(--sc-canvas) 100%);
}
.flur__schein {
  position: absolute; left: -14%; bottom: -30%; width: 66%; height: 120%; z-index: 1;
  background: radial-gradient(closest-side, rgba(143,17,168,.26), rgba(96,35,168,.10) 55%, transparent 74%);
}
.flur__portrait {
  position: absolute; left: -2vw; bottom: 0; z-index: 5; height: min(80%, 56vw);
  transform-origin: 30% 100%; transform: scale(calc(1 + var(--sc-p, 0) * 0.05));
}
.flur__portrait img { display: block; height: 100%; width: auto; max-width: none; }
.flur__boden { position: absolute; inset: auto 0 0 0; height: 20%; z-index: 6; pointer-events: none; background: linear-gradient(to top, var(--sc-canvas) 4%, transparent); }

.flur__kopf, .flur__zeile { position: absolute; left: 44vw; right: var(--rand); z-index: 8; }
.flur__kopf { top: 13.5%; }
.flur__kopf .satz { margin-top: 2.2vh; }
.flur__zeile { top: 15%; max-width: 15em; }
.flur__zeile--wende { color: #93BBFF; }

/* Die drei Türen: Fernebene des Flurs und zugleich die Auswahl */
.tueren { position: absolute; left: 44vw; right: var(--rand); top: var(--tuer-oben); height: var(--tuer-hoehe); z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2vw; }
.wahl { position: relative; display: block; --licht: var(--violett); --hell: #b88cff; border-radius: 4px; }
.wahl--2 { --licht: var(--magenta); --hell: #e78cff; }
.wahl--3 { --licht: #c06848; --hell: #eeb499; }
.wahl__blatt {
  position: absolute; left: 0; top: 0; width: min(8.2vw, 62%); height: 100%;
  background: linear-gradient(to right, #15141d, #1c1a27);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset -1px 0 0 rgba(255,255,255,.04);
}
.wahl__blatt::before { /* Lichtspalt: die Tür steht einen Finger breit offen */
  content: ""; position: absolute; top: 0; bottom: 0; right: -5px; width: 5px;
  background: linear-gradient(to bottom, var(--hell), var(--licht));
  box-shadow: 14px 0 46px 6px color-mix(in oklab, var(--licht) 62%, transparent);
  transform-origin: 0 50%; transition: transform 240ms var(--sc-ease-out);
}
.wahl__blatt::after { content: ""; position: absolute; right: 12%; top: 52%; width: 16%; height: 3px; border-radius: 2px; background: #6d6a80; }
.wahl__keil { /* Lichtkeil auf dem Boden, Mittelebene: wandert leicht mit dem Scrollen */
  position: absolute; left: min(7.4vw, 56%); top: 100%; width: 16vw; height: 200%; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--licht) 58%, transparent), transparent 82%);
  clip-path: polygon(0 0, 9% 0, 100% 100%, 22% 100%); filter: blur(10px); opacity: .85;
  transform-origin: 0 0; transform: skewX(calc(var(--sc-p, 0) * -9deg));
}
.wahl__name { position: absolute; left: 0; top: calc(100% + 3.4vh); width: 100%; z-index: 2; font-weight: 800; font-size: clamp(.94rem, .7rem + .62vw, 1.2rem); line-height: 1.2; color: var(--weiss); }
.wahl__name small { display: block; margin-top: 6px; font-weight: 400; font-size: .875rem; line-height: 1.35; color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) { .wahl:hover .wahl__blatt::before { transform: scaleX(2.6); } }
.wahl:focus-visible { outline-offset: 10px; }

.flur__rahmen { /* Nahebene: Kante eines Türrahmens, unscharf */
  position: absolute; right: -3vw; top: -12%; width: 6vw; height: 130%; z-index: 9; pointer-events: none;
  background: linear-gradient(to left, #050508, #0c0b12); filter: blur(7px); opacity: .92;
}

/* ============================================== Räume: fester Grund ==== */
.raum { position: relative; }
/* Der Grund bleibt am Bildschirm stehen, solange der Raum dauert. Der erste Abschnitt
   rückt mit negativem Abstand darüber. (Den Abstand am Grund selbst abzuziehen ließe
   ihn am Raumende einen Bildschirm weit in den nächsten Abschnitt hängen.) */
.raum__grund { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100lvh; }
.raum__grund + section { margin-top: -100vh; margin-top: -100lvh; }
.raum > section { position: relative; z-index: 1; }
.raum--1 .raum__grund { background: var(--verlauf-1); }
.raum--2 .raum__grund { background: var(--verlauf-2); }
.raum--3 .raum__grund {
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(1000px 700px at 90% 90%, rgba(238,180,153,0.06), transparent 55%),
    linear-gradient(135deg, #4e6b7a 0%, #5a6e78 22%, #8a7a70 48%, #b57a63 72%, #c06848 100%);
}
.raum--1, .raum--2 { --sc-ink-soft: #D8D3EA; }

/* ================================================ Schwelle: die Tür ==== */
/* --l --t --w --h: Türöffnung in Prozent der Bühne. --winkel, --auf, --weit und
   die Lochkanten --hl --ht --hr --hb schreibt seite.js aus dem Scrollstand.
   Ohne Skript steht die Tür einen Spalt offen. */
.schwelle, .schluss { --l: 9; --t: 14; --w: 34; --h: 74; --winkel: 10; --auf: 0; --weit: 0; --licht: var(--violett); }
.schwelle { --hl: calc(var(--l) * 1%); --ht: calc(var(--t) * 1%); --hr: calc((100 - var(--l) - var(--w)) * 1%); --hb: calc((100 - var(--t) - var(--h)) * 1%); }
.schwelle--2 { --l: 57; --licht: var(--magenta); }
.schwelle--3 { --l: 55; --w: 32; --licht: #c06848; }

.schwelle__flur {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, #07070b 0%, var(--flur-wand) calc((var(--t) + var(--h)) * 1%), var(--flur-boden) calc((var(--t) + var(--h)) * 1% + 2px), var(--sc-canvas) 100%);
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    var(--hl) var(--ht), var(--hl) calc(100% - var(--hb)), calc(100% - var(--hr)) calc(100% - var(--hb)), calc(100% - var(--hr)) var(--ht), var(--hl) var(--ht));
}
.schwelle__zimmer { /* Platzhalter, bis das Foto des Arbeitszimmers da ist (Welle 1) */
  position: absolute; z-index: 1; overflow: hidden;
  left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  opacity: calc(1 - var(--weit) * 1.7);
  transform-origin: 60% 62%; transform: scale(calc(1 + var(--weit) * 0.9));
}
.zimmer__lampe { position: absolute; left: 30%; top: 26%; width: 78%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255,214,150,.40), transparent 70%); }
.zimmer__tisch { position: absolute; left: 20%; right: 0; bottom: 20%; height: 9px; background: #120c1f; }
.zimmer__stapel { position: absolute; left: 34%; bottom: calc(20% + 9px); width: 22%; height: 7.5%; background: repeating-linear-gradient(to top, #efe9dc 0 3px, #cfc7b6 3px 4px); transform: rotate(-1.5deg); }

.schwelle__keil {
  position: absolute; z-index: 3; pointer-events: none;
  left: calc(var(--l) * 1%); top: calc((var(--t) + var(--h)) * 1%); width: 70%; height: calc((100 - var(--t) - var(--h)) * 1%);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--licht) 70%, transparent), transparent);
  clip-path: polygon(0 0, 48% 0, 100% 100%, 12% 100%); filter: blur(8px);
  opacity: calc((0.25 + var(--auf) * 0.75) * (1 - var(--weit)));
}
.schwelle--2 .schwelle__keil, .schwelle--3 .schwelle__keil { left: auto; right: calc((100 - var(--l) - var(--w)) * 1%); transform: scaleX(-1); }

.tuer {
  position: absolute; z-index: 4; perspective: 1500px; perspective-origin: 100% 50%; /* Fluchtpunkt an der Griffseite: der Lichtspalt öffnet sich vom ersten Grad an */
  left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  opacity: calc(1 - var(--weit) * 2.6);
}
.tuer__zarge { position: absolute; inset: -11px -11px 0 -11px; border: 11px solid #14131b; border-bottom: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 -1px 0 rgba(255,255,255,.05); pointer-events: none; }
.tuer__blatt {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: rotateY(calc(var(--winkel) * -1deg));
  background: linear-gradient(to right, #23202f, #15141d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 30px 0 60px -10px rgba(0,0,0,.7);
  cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.tuer__blatt.zieht { cursor: grabbing; }
.tuer__griff { position: absolute; right: 8%; top: 50%; width: 15%; height: 6px; border-radius: 3px; background: var(--sc-accent); }
.tuer--rechts { perspective-origin: 0% 50%; }
.tuer--rechts .tuer__blatt { transform-origin: 100% 50%; transform: rotateY(calc(var(--winkel) * 1deg)); background: linear-gradient(to left, #23202f, #15141d); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), -30px 0 60px -10px rgba(0,0,0,.7); }
.tuer--rechts .tuer__griff { right: auto; left: 8%; }
.schwelle .tuer__griff { opacity: calc(1 - var(--auf) * 1.25); } /* hochkant gesehen wäre der Griff nur ein loser Strich */

.schwelle__text { position: absolute; z-index: var(--sc-z-copy); left: 51vw; right: var(--rand); top: 52%; translate: 0 -50%; }
.schwelle--2 .schwelle__text, .schwelle--3 .schwelle__text { left: var(--rand); right: auto; width: min(44vw, 40rem); }
/* Raum 3 ist hell. Ein weicher Schatten in Academy-Navy trägt die Schrift, sobald die
   Öffnung unter ihr ankommt. Eigenes Element neben dem Text, ohne harte Kante. */
.schwelle__schutz { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: min(1, calc(var(--weit) * 4));
  background: radial-gradient(ellipse 62% 58% at 20% 52%, rgba(18, 29, 48, .40), rgba(18, 29, 48, .22) 55%, transparent 80%); }
.schwelle__marke { font-weight: 600; font-size: .94rem; color: #D9C4FF; margin-bottom: 14px; }
.schwelle--3 .schwelle__marke { color: #fcfcfc; }

/* „Bewegung reduzieren“: die Tür steht offen, der Raum ist sichtbar, keine Scrollstrecke */
.schwelle--steht > [data-sc-stage] { position: relative; height: 100vh; height: 100svh; overflow: clip; }

/* ====================================== 3 · Raum 1: Angebot (Lesefluss) == */
.angebot { padding-top: clamp(2rem, 5vw, 5rem); }
.angebot__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); row-gap: var(--sc-8); }
.angebot__einleitung { grid-column: 1 / span 7; }
.angebot__einleitung > * + * { margin-top: var(--sc-4); }
.leit {
  grid-column: 1 / span 8; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--sc-7);
  padding: clamp(1.5rem, 3vw, 3rem); border-radius: 12px; background: rgba(10, 10, 15, .66);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.haken { margin-top: var(--sc-5); display: grid; gap: var(--sc-3); }
.haken li { position: relative; padding-left: 1.6em; }
.haken li::before { content: ""; position: absolute; left: 0; top: .72em; width: .8em; height: 2px; background: var(--sc-accent); }
.leit__preis { display: flex; flex-direction: column; gap: var(--sc-4); align-items: flex-start; justify-content: flex-end; }
.preis { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.preis__netto { font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--weiss); }
.preis__brutto { color: var(--sc-ink-soft); }
.preis--klein .preis__netto { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -0.02em; }
.zweit { grid-column: 9 / -1; align-self: end; display: grid; gap: var(--sc-3); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }

.ausserdem { grid-column: 1 / -1; }
.reihen { margin-top: var(--sc-5); }
.reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) auto; column-gap: var(--sc-6); row-gap: var(--sc-2); align-items: baseline; padding-block: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.reihe dt { font-weight: 800; font-size: var(--sc-t-lg); line-height: 1.2; letter-spacing: -0.015em; color: var(--weiss); }
.reihe dd { max-width: 60ch; }
.reihe__preis { font-weight: 600; color: var(--weiss); white-space: nowrap; }
.ausserdem > .text { padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); max-width: none; }

/* ================================================= 4 · Rechne nach ==== */
.rechner { position: relative; isolation: isolate; background: var(--sc-canvas); --anteil: .5; --sc-ink-soft: #CFC9E3; }
.rechner__farbe { position: absolute; inset: 0; z-index: -1; background: var(--verlauf-1); opacity: calc(var(--anteil) * .9); }
.rechner__raster { display: grid; gap: var(--sc-7); }
.rechner__kopf > * + * { margin-top: var(--sc-4); }
.rechner__kopf .titel { max-width: 22ch; }
.rechner__flaeche { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--sc-8); row-gap: var(--sc-7); }
.feld legend, .feld > label { display: block; padding: 0; font-weight: 800; font-size: var(--sc-t-lg); line-height: 1.25; letter-spacing: -0.015em; color: var(--weiss); margin-bottom: var(--sc-4); }
.feld__schritt { display: block; font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: 0; color: var(--sc-ink-soft); margin-bottom: 4px; }
.feld--aufgaben { grid-row: span 2; }
.feld--anteil, .ergebnis { grid-column: 1 / -1; }

.aufgaben { display: flex; flex-wrap: wrap; gap: 10px; }
.aufgabe { position: relative; display: block; cursor: pointer; }
.aufgabe input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.aufgabe span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 10px;
  background: rgba(10,10,15,.5); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); color: var(--sc-ink);
  transition: box-shadow 150ms var(--sc-ease-out), background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out);
}
.aufgabe span::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--sc-ink-soft); transition: background-color 150ms var(--sc-ease-out), box-shadow 150ms var(--sc-ease-out); }
.aufgabe input:checked + span { background: rgba(34, 211, 238, .12); box-shadow: inset 0 0 0 1.5px var(--sc-accent); color: var(--weiss); }
.aufgabe input:checked + span::before { background: var(--sc-accent); box-shadow: inset 0 0 0 3px var(--sc-canvas), 0 0 0 1.5px var(--sc-accent); }
.aufgabe input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .aufgabe:hover span { box-shadow: inset 0 0 0 1px var(--sc-ink-soft); } .aufgabe:hover input:checked + span { box-shadow: inset 0 0 0 1.5px var(--sc-accent); } }

/* Schieber: natives <input type="range">, mit Tastatur bedienbar */
.schieber { display: grid; gap: var(--sc-2); }
.schieber__wert { font-weight: 800; font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: -0.025em; color: var(--weiss); font-variant-numeric: tabular-nums; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
  --f: 50%; --griff: 26px;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--sc-accent) var(--f), rgba(255,255,255,.24) var(--f)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--sc-accent) var(--f), rgba(255,255,255,.24) var(--f)); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: var(--griff); height: var(--griff); margin-top: calc(2px - var(--griff) / 2); border: 0; border-radius: 50%;
  background: var(--sc-accent); box-shadow: 0 0 0 5px rgba(10,10,15,.9), 0 8px 18px -4px rgba(0,0,0,.8);
}
input[type="range"]::-moz-range-thumb { width: var(--griff); height: var(--griff); border: 0; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 5px rgba(10,10,15,.9), 0 8px 18px -4px rgba(0,0,0,.8); }
input[type="range"]:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 10px; }

/* Der Regler aus Richtung C: ein Griff, der die Fläche einfärbt */
.regler { position: relative; padding-top: var(--sc-2); }
.regler__wert { display: block; font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -0.04em; color: var(--weiss); font-variant-numeric: tabular-nums; margin-bottom: var(--sc-3); }
.regler input[type="range"] { --griff: 36px; height: 56px; background: repeating-linear-gradient(to right, rgba(255,255,255,.3) 0 1px, transparent 1px 10%) center / calc(100% - var(--griff)) 16px no-repeat; }
.regler__enden { display: flex; justify-content: space-between; gap: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.regler__enden span:last-child { text-align: right; }
.feld--anteil > .text { margin-top: var(--sc-3); }

.ergebnis { display: grid; gap: var(--sc-4); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
.ergebnis__titel { font-weight: 600; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }
.ergebnis__zahlen { display: flex; flex-wrap: wrap; gap: var(--sc-5) clamp(2rem, 6vw, 6rem); }
.ergebnis__zahlen div { display: flex; flex-direction: column; }
.ergebnis__zahlen dd { font-weight: 800; font-size: clamp(2rem, 1.3rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -0.04em; color: var(--weiss); font-variant-numeric: tabular-nums; }
.ergebnis__zahlen dt { margin-top: 6px; color: var(--sc-ink-soft); }
.ergebnis__wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-6); margin-top: var(--sc-2); }

/* ============================================ 6 · Raum 2: Seitwärtsfahrt == */
.teams__buehne { display: flex; }
.schiene { align-items: center; gap: clamp(2.5rem, 6vw, 6rem); height: 100%; padding: calc(var(--leiste-h) + 3vh) 14vw 5vh var(--rand); }
.tafel { flex: none; width: clamp(20rem, 38vw, 34rem); display: grid; gap: var(--sc-4); align-content: center; }
.tafel--auftakt { width: clamp(20rem, 46vw, 42rem); }
.tafel--auftakt .satz { font-size: clamp(1.3rem, 1rem + 1.5vw, 2.1rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--weiss); max-width: none; }
.tafel--leit { width: clamp(21rem, 44vw, 40rem); padding: clamp(1.5rem, 3vw, 3rem); border-radius: 12px; background: rgba(10,10,15,.6); box-shadow: var(--sc-e2), var(--sc-edge); }
.tafel__preis { font-weight: 600; color: var(--weiss); }
.tafel--bild figure { border-radius: 12px; overflow: hidden; background: var(--sc-surface); box-shadow: var(--sc-e2); }
.tafel--bild img { display: block; width: 100%; height: auto; max-height: 42vh; object-fit: cover; object-position: 50% 30%; }
.tafel--bild figcaption { padding: 10px 14px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.tafel--paar { gap: var(--sc-7); }
.tafel--paar article { display: grid; gap: var(--sc-3); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.tafel--schluss .knopf { justify-self: start; }

/* ===================================== 7 · Wer dir gegenübersitzt ==== */
.wer { background: var(--sc-canvas); }
.wer__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.wer__bild { border-radius: 12px; overflow: hidden; background: var(--verlauf-1); aspect-ratio: 4 / 5; max-height: 76vh; box-shadow: var(--sc-e2); }
.wer__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.wer__text > * + * { margin-top: var(--sc-4); }
.wer__name { font-weight: 800; font-size: var(--sc-t-lg); color: #93BBFF; letter-spacing: -0.015em; margin-top: var(--sc-6); }

/* ================================= 9 · Raum 3: intu.Business Academy ==== */
/* Eigene Marke, eigene Werte: Mulish, Text #fcfcfc auf dem Academy-Verlauf.
   Fließtext steht halbfett und groß, damit er auf dem Verlauf lesbar bleibt. */
.academy {
  --sc-ink: #fcfcfc; --sc-ink-soft: #fcfcfc; --weiss: #fcfcfc;
  --sc-hairline-strong: rgba(252, 252, 252, .34);
  color: var(--sc-ink); font-family: "Mulish", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.17rem, 1.1rem + 0.3vw, 1.3rem); line-height: 1.5; letter-spacing: 0;
  padding-top: clamp(2rem, 5vw, 5rem);
}
.academy__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 6rem); row-gap: var(--sc-7); }
.academy__kopf { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.academy__logo { width: clamp(96px, 12vw, 160px); height: auto; }
.academy__satz { font-weight: 800; font-size: clamp(1.4rem, 1.05rem + 1.7vw, 2.4rem); line-height: 1.22; letter-spacing: -0.01em; max-width: 30em; text-wrap: balance; }
.reihen--academy { grid-column: 1 / -1; margin-top: 0; }
.reihen--academy .reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }
.reihen--academy .reihe dt { font-weight: 900; }
.academy__wege { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-6); }
.knopf--academy { background: #db6522; color: #fcfcfc; font-family: inherit; font-weight: 900; font-size: 1.2rem; min-height: 52px; border-radius: 9999px; padding: 0 28px; box-shadow: 0 12px 32px -12px rgba(18, 29, 48, 0.25); }
@media (hover: hover) and (pointer: fine) { .knopf--academy:hover { background: #c45a1d; } }
.academy .weg { font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .academy .weg:hover { color: #121d30; } }
.academy :focus-visible { outline-color: #121d30; }
.academy__titel { font-weight: 900; font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.geschenk, .julia { display: grid; gap: var(--sc-3); align-content: start; justify-items: start; padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }

/* ====================================================== 10 · Schluss ==== */
.schluss { --l: 63; --t: 16; --w: 24; --h: 70; --winkel: 12; --licht: var(--sc-accent); }
.schluss__buehne { background: var(--sc-canvas); }
.schluss__flur { clip-path: none; }
.schluss__licht { /* der Raum hinter der vierten Tür: das Gespräch */
  position: absolute; z-index: 3; left: calc(var(--l) * 1%); top: calc(var(--t) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  background: linear-gradient(to bottom, #E8FBFF, #7FE6F6 55%, #22D3EE);
}
.schluss__licht::after { content: ""; position: absolute; right: 0; top: 100%; width: 260%; height: 60%; background: linear-gradient(to bottom, rgba(34,211,238,.42), transparent); clip-path: polygon(62% 0, 100% 0, 88% 100%, 0 100%); filter: blur(10px); }
.schluss__text { position: absolute; z-index: var(--sc-z-copy); left: var(--rand); top: 24%; width: min(50vw, 44rem); }
.schluss__text .satz { margin-top: var(--sc-5); }
.schluss__wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); margin-top: var(--sc-6); }
.schluss__mail a { color: var(--weiss); text-decoration: underline; text-underline-offset: 0.24em; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.fuss { position: absolute; z-index: var(--sc-z-copy); inset: auto var(--rand) 0 var(--rand); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px var(--sc-6); padding-block: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.fuss nav { display: flex; gap: var(--sc-5); }
.fuss a { display: inline-flex; align-items: center; min-height: 40px; color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.24em; }

/* ========================================== Rechtstexte (Unterseiten) ==== */
.recht { max-width: 46rem; margin-inline: auto; padding: calc(var(--leiste-h) + 3rem) var(--rand) 5rem; }
.recht h1 { font-size: var(--sc-t-2xl); margin-bottom: var(--sc-5); }
.recht h2 { font-weight: 800; font-size: var(--sc-t-lg); color: var(--weiss); letter-spacing: -0.015em; margin-top: var(--sc-7); margin-bottom: var(--sc-3); }
.recht p + p, .recht ul { margin-top: var(--sc-3); }
.recht ul { list-style: disc; padding-left: 1.2em; }
.recht a { text-decoration: underline; }
.recht__stand { color: var(--sc-ink-soft); }

/* ================================================================ Handy ==== */
@media (max-width: 1000px) {
  .angebot__einleitung, .leit, .zweit { grid-column: 1 / -1; }
  .rechner__flaeche { grid-template-columns: minmax(0, 1fr); }
  .feld--aufgaben { grid-row: auto; }
}

/* Einstieg bis 900 px Breite: Portrait oben, Schrift darunter, Türen als drei große Tasten */
@media (max-width: 900px) {
  /* Einstieg: eigene Komposition. Portrait oben, Schrift darunter, Türen als drei große Tasten. */
  .flur__buehne { --tuer-oben: 79%; --tuer-hoehe: 10%; }
  .flur__schein { left: -30%; bottom: auto; top: 0; width: 150%; height: 60%; }
  .flur__portrait { left: -7vw; bottom: auto; top: var(--leiste-h); height: 35%; transform-origin: 30% 0; }
  .flur__boden, .flur__rahmen { display: none; }
  .flur__kopf, .flur__zeile { left: var(--rand); top: calc(var(--leiste-h) + 36.5%); }
  .flur__kopf .titel { font-size: clamp(1.8rem, 8.7vw, 4rem); }
  .flur__kopf .satz { margin-top: 10px; font-size: clamp(.97rem, 2.6vw, 1.3rem); }
  .flur__zeile { font-size: clamp(1.8rem, 8.2vw, 3.6rem); max-width: none; }
  .tueren { left: var(--rand); gap: 12px; }
  .wahl__blatt { width: 44%; }
  .wahl__keil { display: none; }
  .wahl__name { top: calc(100% + 8px); font-size: .8rem; }
  .wahl__name small { display: none; }
  /* Tippfläche über Tür und Beschriftung */
  .wahl::after { content: ""; position: absolute; inset: -6px -4px -52px -4px; }
}

@media (max-width: 760px) {
  :root { --leiste-h: 98px; }
  .leiste { height: var(--leiste-h); display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 0 12px; padding-top: 6px; }
  .leiste__marke img { height: 30px; }
  .leiste__tueren { grid-column: 1 / -1; grid-row: 2; margin: 0; justify-content: space-between; gap: 8px; font-size: .86rem; }

  /* Schwellen: Tür oben, Schrift darunter */
  .schwelle, .schwelle--2, .schwelle--3 { --l: 16; --t: 16; --w: 68; --h: 44; }
  .schwelle__text, .schwelle--2 .schwelle__text, .schwelle--3 .schwelle__text { left: var(--rand); right: var(--rand); width: auto; top: 66%; translate: none; }
  .schwelle__marke { font-size: .86rem; margin-bottom: 8px; }
  .schwelle__text .titel { font-size: clamp(1.7rem, 7.6vw, 2.2rem); }
  .schwelle__keil { width: 84%; }
  .schwelle__schutz { background: radial-gradient(ellipse 120% 34% at 40% 74%, rgba(18, 29, 48, .48), rgba(18, 29, 48, .28) 55%, transparent 82%); }

  .leit { grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); }
  .reihe, .reihen--academy .reihe { grid-template-columns: minmax(0, 1fr); }
  .regler__enden { font-size: .8rem; }

  .schiene { padding-right: 9vw; gap: 9vw; }
  .tafel, .tafel--auftakt, .tafel--leit { width: 82vw; }
  .tafel--paar { gap: var(--sc-5); }
  .tafel--bild img { max-height: 30vh; }
  .tafel .text { font-size: .97rem; }

  .wer__raster { grid-template-columns: minmax(0, 1fr); }
  .wer__bild { max-height: 54vh; }

  .academy__raster { grid-template-columns: minmax(0, 1fr); }
  .academy__kopf { grid-template-columns: minmax(0, 1fr); }

  .schluss { --l: 60; --t: 15; --w: 30; --h: 27; }
  .schluss__text { top: 47%; width: auto; right: var(--rand); }
  .schluss__text .satz { margin-top: var(--sc-4); }
  .schluss__wege { margin-top: var(--sc-5); gap: var(--sc-2) var(--sc-6); }
  .schluss__mail { flex-basis: 100%; }
  .schluss__mail a { display: flex; }
  .fuss { padding-block: 8px; }
}

/* Niedrige Handys (zum Beispiel 360 × 640) */
@media (max-width: 900px) and (max-height: 700px) {
  .flur__portrait { height: 27%; }
  .flur__kopf, .flur__zeile { top: calc(var(--leiste-h) + 28%); }
  .flur__kopf .satz { font-size: .9rem; line-height: 1.42; }
  .flur__buehne { --tuer-oben: 81%; --tuer-hoehe: 8.5%; }
  .schluss { --t: 16; --h: 20; }
  .schluss__text { top: 38%; }
  .schluss__text .satz { margin-top: var(--sc-3); }
  .schluss__wege { margin-top: var(--sc-4); }
}

@media (prefers-reduced-motion: reduce) {
  .flur__portrait, .wahl__keil { transform: none; }
  .knopf, .wahl__blatt::before { transition: none; }
}