/* ==========================================================================
   Valoora · Im Licht · Stylesheet
   Ein dunkler Raum, eine Schrift (Satoshi). Mobil zuerst, ab 821 px Desktop.
   Alle Werte kommen aus tokens.css (wird vorher geladen).
   Bewusste Ausnahmen, jeweils markiert und in design-system.md begründet:
   die Kundenstimmen, die erfundene Beispielseite und der Inhalt der Bühne in Szene 4.
   ========================================================================== */

@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Stimme Topbody"; src: url("../fonts/stimmen/topbody.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Stimme Castangolf"; src: url("../fonts/stimmen/castangolf.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: block; }
@font-face { font-family: "Stimme Esencia"; src: url("../fonts/stimmen/esencia.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Stimme FOB"; src: url("../fonts/stimmen/finnolebauer.woff2") format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "Beispiel Serif"; src: url("../fonts/beispiel/instrument-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Stimme Social Fuerst"; src: url("../fonts/stimmen/socialfuerst.woff2") format("woff2"); font-weight: 500; font-display: block; }

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nacht); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--nacht); color: var(--weiss); font-family: var(--schrift); font-size: var(--t-text); line-height: var(--zeile-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: var(--a-1); border-radius: var(--r-s); }
.sprung { position: fixed; left: var(--a-3); top: var(--a-3); z-index: 200; padding: var(--a-3) var(--a-5); border-radius: var(--r-pille); background: var(--mint); color: var(--tinte);
  font-size: var(--t-ui); font-weight: 700; text-decoration: none; transform: translateY(-160%); }
.sprung:focus { transform: none; }
/* Nur für Screenreader sichtbar */
.unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Der Raum ---------- */
/* Der feste Hintergrund: Raum (3D, nur Startseite), Atmosphäre (Vignette und Korn) und Raumlicht (Arbeiten).
   Er bleibt stehen, nur der Inhalt scrollt darüber. Alle drei liegen in der Hülle .hintergrund.

   Safari ab iOS 26 (Philip, 03.10.2026): Was mitscrollt, läuft hinter Safaris Leisten oben und unten weiter, feste
   Ebenen aber nicht. WebKit gibt jeder festen Ebene, die direkt auf der Seite liegt, einen Rahmen in der Größe des
   Bereichs zwischen den Leisten (RenderLayerCompositor::viewportConstrainedSublayers, ClippingAndAnchor) und kappt
   außerdem ihre Fläche auf diesen Bereich (RenderLayerBacking::updateCompositedBounds). Darunter wäre nur Schwarz.
   Dagegen helfen zwei Dinge zusammen:
   - Die Hülle ist eine eigene zusammengesetzte Ebene (will-change: opacity). Dann liegen die festen Ebenen nicht mehr
     direkt auf der Seite, und der Rahmen entfällt. will-change: opacity macht die Hülle nicht zum Bezugsrahmen für
     fixed, die Ebenen bleiben also fest. Darum darf die Hülle nie fixed oder sticky werden und keine Transformation,
     keinen Filter und kein contain bekommen: Dann würden Raum und Licht mitscrollen.
   - Jede Ebene hat eine eigene Transformation (translateZ(0)). Dann kappt WebKit ihre Fläche nicht.
   Auf Touch-Geräten reichen die Ebenen um --ueberstand über das Fenster hinaus (oben und unten), damit hinter den
   Leisten etwas zu sehen ist. Die Verläufe rechnen in lvh und svh statt %, sehen im Fenster also aus wie ohne
   Überstand; raum.js zeichnet die 3D-Bühne unverzerrt weiter (setViewOffset). Siehe auch .kante. */
:root { --ueberstand: 0px; }
@media (hover: none) and (pointer: coarse) { :root { --ueberstand: 100px; } }
.hintergrund { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 0; will-change: opacity; }
.raum, .atmosphaere, .raumlicht { position: fixed; left: 0; right: 0; top: calc(var(--ueberstand) * -1); transform: translateZ(0);
  height: calc(100vh + 2 * var(--ueberstand)); height: calc(100lvh + 2 * var(--ueberstand)); }
.raum { width: 100%; z-index: 0; }
.atmosphaere { z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90vh at 50% calc(var(--ueberstand) + 42vh), var(--schleier-0) 58%, var(--schleier-2) 100%);
  background: radial-gradient(120% 90lvh at 50% calc(var(--ueberstand) + 42lvh), var(--schleier-0) 58%, var(--schleier-2) 100%); }
.atmosphaere::after { content: ""; position: absolute; inset: -50%; opacity: .08; mix-blend-mode: overlay;
  background-image: url("../img/korn.png"); background-size: 160px 160px; animation: korn 1s steps(6) infinite; }
@keyframes korn { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
main, .fuss { position: relative; z-index: 2; }
/* ---------- Intro ---------- */
.intro { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.intro__v { position: absolute; left: var(--v-x, 50%); top: var(--v-y, 45%); width: 92px; height: auto; margin: -40px 0 0 -46px; overflow: visible; filter: var(--glut-v); }
.intro__v path { fill: none; stroke: var(--weiss); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .intro__v path { animation: v-notfall 0s 4s forwards; }
@keyframes v-notfall { to { stroke-dashoffset: 0; } }
.bereit .intro__v path { animation: none; }

/* ==========================================================================
   Bauteile
   ========================================================================== */

/* ---------- Kopf ---------- */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--kopf); padding-inline: var(--rand-aussen);
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-6); transition: transform var(--dauer-2) var(--weich); }
.kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--dauer-2) ease;
  background: linear-gradient(to bottom, var(--schleier-3), var(--schleier-1)); -webkit-backdrop-filter: var(--glas); backdrop-filter: var(--glas);
  border-bottom: 1px solid var(--linie-1); }
.kopf--belegt::before, :root:not(.js) .kopf::before { opacity: 1; } /* ohne JavaScript immer mit Grund, sonst liegt Text darunter */
.kopf--weg { transform: translateY(-100%); }
.kopf__logo { display: flex; align-items: center; min-height: var(--ziel); }
.kopf__logo img { height: 15px; width: auto; }
.kopf__nav { display: none; }
.kopf__rechts { display: flex; align-items: center; gap: var(--a-4); }
.kopf .kopf__kontakt { display: none; }

/* Sprachwahl (Desktop): ein eigener Knopf ganz rechts, durch eine feine Linie von Navigation und
   „Gespräch anfragen“ abgesetzt. Ein <details>, damit sie auch ohne JavaScript aufgeht.
   Auf dem Handy steht die Sprache unten im Menü (.menue__sprache). */
.sprachwahl { display: none; position: relative; }
.sprachwahl__knopf { display: inline-flex; align-items: center; gap: var(--a-2); min-height: var(--ziel); padding: 0 var(--a-4); border-radius: var(--r-pille);
  border: 1px solid var(--linie-3); list-style: none; cursor: pointer; font-size: var(--t-klein); font-weight: 700; letter-spacing: var(--sperrung-meta); color: var(--text-1);
  transition: background-color var(--dauer-1), border-color var(--dauer-1), color var(--dauer-1); }
.sprachwahl__knopf::-webkit-details-marker { display: none; }
.sprachwahl__knopf:hover, .sprachwahl[open] .sprachwahl__knopf { background: var(--flaeche-2); border-color: var(--linie-5); color: var(--weiss); }
.sprachwahl__erde { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sprachwahl__liste { position: absolute; right: 0; top: calc(100% + var(--a-2)); min-width: calc(var(--a-20) * 2.7); padding: var(--a-2) 0; border-radius: var(--r-l);
  background: var(--ebene-2); border: 1px solid var(--linie-2); box-shadow: var(--schatten); }
.sprachwahl__liste a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-4); padding: var(--a-3) var(--a-4);
  font-size: var(--t-ui); font-weight: 500; text-decoration: none; color: var(--text-1); transition: background-color var(--dauer-1), color var(--dauer-1); }
.sprachwahl__liste a:hover { background: var(--flaeche-1); color: var(--weiss); }
.sprachwahl__liste a[aria-current] { font-weight: 700; color: var(--weiss); }
.sprachwahl__liste a[aria-disabled="true"] { color: var(--text-3); cursor: default; }
.sprachwahl__liste a[aria-disabled="true"]:hover { background: none; color: var(--text-3); }
.sprachwahl__kurz { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); color: var(--text-3); white-space: nowrap; }
.sprachwahl__liste a[aria-current] .sprachwahl__kurz { color: var(--mint); }
@media (min-width: 821px) {
  .kopf__logo img { height: 18px; }
  .kopf__nav { display: flex; gap: var(--a-8); margin-left: auto; font-size: var(--t-ui); font-weight: 500; }
  /* Die Zeile reserviert unter der Grundlinie Platz fuer Unterlaengen, den "Arbeiten"
     fast nicht nutzt. Mittig gesetzt sitzt die sichtbare Schrift dadurch 0,93px zu
     hoch gegenueber dem Logo. Ein Pixel tiefer gleicht das aus. */
  .kopf__nav a { position: relative; top: 1px; text-decoration: none; opacity: .72; transition: opacity var(--dauer-1); }
  .kopf__nav a:hover { opacity: 1; }
  /* Die Seite, auf der man ist (oder ihr Bereich, etwa eine Fallstudie unter Arbeiten): voll hell, darunter ein Lichtpunkt */
  .kopf__nav a[aria-current] { position: relative; opacity: 1; }
  .kopf__nav a[aria-current]::after { content: ""; position: absolute; left: 50%; top: calc(100% + var(--a-2)); width: var(--a-1); height: var(--a-1); margin-left: calc(var(--a-1) / -2); border-radius: 50%; background: var(--mint); box-shadow: var(--schein-punkt); }
  .kopf .kopf__kontakt { display: inline-flex; }
  .kopf .kopf__menue { display: none; }
  /* Abgesetzt: Abstand und eine feine senkrechte Linie trennen die Sprache von der Navigation */
  .kopf .sprachwahl { display: block; padding-left: var(--a-6); }
  .kopf .sprachwahl::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: var(--a-6); margin-top: calc(var(--a-6) / -2); background: var(--linie-3); }
}

/* ---------- Knopf ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--a-3); min-height: var(--ziel); padding: 0 var(--a-5); border-radius: var(--r-pille);
  font-weight: 700; font-size: var(--t-ui); text-decoration: none; cursor: pointer; white-space: nowrap; border: 0;
  transition: background-color var(--dauer-1) var(--weich), border-color var(--dauer-1), transform var(--dauer-0) var(--weich); }
/* Drücken: der Knopf gibt kurz nach, so spürt man, dass der Tipp angekommen ist (Philip, 04.10.2026) */
.knopf:active, .pfeil:active { transform: scale(.97); }
.knopf--glas { background: var(--flaeche-2); border: 1px solid var(--linie-3); -webkit-backdrop-filter: var(--glas); backdrop-filter: var(--glas); }
.knopf--glas:hover { background: var(--flaeche-3); border-color: var(--linie-5); }
.striche { position: relative; width: 14px; height: 10px; }
.striche::before, .striche::after { content: ""; position: absolute; left: 0; right: 0; height: 1.6px; border-radius: var(--r-pille); background: currentColor; }
.striche::before { top: 1px; } .striche::after { bottom: 1px; }

/* ---------- Pfeil und Punkte (Steuerung) ---------- */
.pfeil { width: var(--ziel); height: var(--ziel); border-radius: 50%; border: 1px solid var(--linie-3); background: var(--flaeche-1); cursor: pointer; display: grid; place-items: center;
  transition: background var(--dauer-1), border-color var(--dauer-1), transform var(--dauer-0) var(--weich); }
.pfeil:hover { background: var(--flaeche-3); border-color: var(--linie-5); }
.pfeil span { width: 14px; height: 10px; background: currentColor;
  -webkit-mask: var(--pfeil-zeichen) center / contain no-repeat;
          mask: var(--pfeil-zeichen) center / contain no-repeat; }
.pfeil--zurueck span { transform: scaleX(-1); }
.punkte { display: none; gap: var(--a-05); }
.punkt { width: var(--a-6); height: var(--ziel); padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; }
.punkt::before { content: ""; display: block; width: 100%; height: 2px; border-radius: var(--r-pille); background: var(--linie-3); transition: background var(--dauer-2) ease; }
.punkt.is-on::before { background: rgb(var(--licht)); }

/* ---------- Direkte Wege: Telefon, WhatsApp, E-Mail (Anfrage, Menü, Fuß) ---------- */
.direkt { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-4); margin: 0; padding: 0; list-style: none; }
.direkt a { text-decoration-color: var(--linie-4); text-underline-offset: .2em; overflow-wrap: anywhere; }
.direkt a:hover { text-decoration-color: var(--mint); }

/* ---------- Label (Versalien über einem Titel) ----------
   Davor das V aus dem Logo in Violett, wie auf der bisherigen Seite, die Schrift grau.
   .label--nr: Nummern (Schritte, Kapitel, Projekte, Prinzipien, Rechtstexte), ohne V, in Violett: Wegweiser im Licht von Valoora.
   .label--mint: Bauteil-Labels für das, was an ist oder was man wählen kann („Immer dabei“, „Auf Wunsch“), ohne V, in Mint. */
.label { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--text-2); }
.label::before { content: ""; display: inline-block; width: 1em; height: .82em; margin-right: .7em; vertical-align: -.04em; background: var(--violett-hell);
  -webkit-mask: var(--v-zeichen) center / contain no-repeat;
          mask: var(--v-zeichen) center / contain no-repeat; }
.label--nr { color: var(--violett-hell); }
.label--mint { color: var(--mint); }
.label--nr::before, .label--mint::before { content: none; }
::selection { background: var(--auswahl); color: var(--weiss); }

/* ---------- Weiter-Link ---------- */
.mehr { display: inline-flex; align-items: center; gap: var(--a-3); min-height: var(--ziel); font-size: var(--t-text); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--linie-4); padding-bottom: var(--a-2); transition: border-color var(--dauer-1); }
.mehr:hover { border-color: var(--mint); }
.mehr__pfeil { width: 16px; height: 12px; background: currentColor; transition: translate var(--dauer-0) var(--weich);
  -webkit-mask: var(--pfeil-zeichen) center / contain no-repeat;
          mask: var(--pfeil-zeichen) center / contain no-repeat; }

/* ---------- Hinzeigen nur mit Maus (Philip, 04.10.2026) ----------
   Was sich beim Hinzeigen bewegt oder aufleuchtet, gilt nur für Maus und Trackpad. Auf dem Handy löst ein Tippen sonst
   „Hover“ aus, und der Zustand bleibt stehen (angehobene Handys, vergrößerter Griff, leuchtender Knopf). */
@media (hover: hover) and (pointer: fine) {
  .knopf--mint:hover::after { opacity: 1; }
  .knopf--mint:hover .mehr__pfeil, .mehr:hover .mehr__pfeil { translate: var(--a-1) 0; }
  .zurueck:hover .mehr__pfeil { translate: calc(var(--a-1) * -1) 0; }
  .ende__liste a:hover::after { transform: rotate(-45deg) translateX(3px); }
  .reihe__punkt a:hover .reihe__handy { transform: translateY(calc(var(--a-2) * -1)); box-shadow: var(--ring), 0 30px 70px -18px rgba(var(--kunde-licht), .95); }
  .weiter-arbeit__link:hover .weiter-arbeit__handy { transform: translateY(calc(var(--a-2) * -1)); }
  .roentgen__griff:hover::before { transform: scale(1.12); }
}

/* ---------- Menü (Handy) ---------- */
.menue { position: fixed; inset: 0; z-index: 90; background: var(--nacht); display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--kopf) + var(--a-6)) var(--rand) calc(var(--a-7) + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; } /* scrollt, wenn der Platz nicht reicht (Querformat) */
.menue[hidden] { display: none; }
/* Schwarzer Streifen hinter dem Kopf: Scrollt das Menü (Querformat), laufen die Links darunter weg statt durch Logo
   und Knopf. Gehört zum Menü, öffnet sich also mit dem V. */
.menue::before { content: ""; position: fixed; z-index: 1; left: 0; right: 0; top: 0; height: var(--kopf); background: var(--nacht); pointer-events: none; }
/* Offen liegt der Kopf über dem Menü: Sein Knopf heißt dann „Schließen“ und zeigt ein X, man schließt also oben, wo man
   geöffnet hat (Philip, 04.10.2026). Die Sprachleiste der Sprachfassungen verdeckt das offene Menü nicht. */
body.menue-offen .kopf { z-index: 95; transform: none; }
.striche::before, .striche::after { transition: transform var(--dauer-0) var(--weich), top var(--dauer-0) var(--weich), bottom var(--dauer-0) var(--weich); }
.kopf__menue[aria-expanded="true"] .striche::before { top: 4.2px; transform: rotate(45deg); }
.kopf__menue[aria-expanded="true"] .striche::after { bottom: 4.2px; transform: rotate(-45deg); }
body.menue-offen [data-sprachhinweis] { display: none !important; }
.menue__nav { display: flex; flex-direction: column; gap: var(--a-1); }
.menue__nav a { font-size: var(--t-titel); line-height: var(--zeile-titel); font-weight: 900; letter-spacing: var(--sperrung-titel); text-decoration: none; }
.menue__nav a[aria-current] { color: var(--mint); }
.menue__fuss { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--a-4); font-size: var(--t-text); }
.menue__direkt { flex-direction: column; min-width: 0; }
/* Sprache im Menü: eine Leiste DE | EN | PT direkt unter den Links (das auto unten schiebt den Fuß nach unten) */
.menue__sprache { display: flex; align-self: flex-start; margin: var(--a-8) 0 auto; border: 1px solid var(--linie-3); border-radius: var(--r-pille); overflow: hidden; }
.menue__sprache a { display: grid; place-items: center; min-width: var(--a-16); min-height: var(--ziel); padding: 0 var(--a-4);
  font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-meta); text-decoration: none; color: var(--text-2); }
.menue__sprache a + a { border-left: 1px solid var(--linie-3); }
.menue__sprache a[aria-current] { background: var(--flaeche-2); color: var(--weiss); }
.menue__sprache a[aria-disabled="true"] { color: var(--text-4); }

/* ---------- Abschnitt (Typ): Textabschnitt mit Label, Titel, Inhalt ---------- */
.abschnitt { position: relative; padding: var(--abschnitt-oben) var(--rand-aussen) var(--abschnitt-unten); }
.abschnitt__zeile { display: block; overflow: hidden; padding: .04em 0 .1em; margin: -.04em 0 -.1em; }
.abschnitt__zeile > span { display: inline-block; }

/* ==========================================================================
   Szene 1 und 2: Einstieg, dann öffnet sich der Raum
   ========================================================================== */
/* Eigene Geometrie der Bühne (Fensteranteile), siehe design-system.md */
.einstieg { position: relative; height: 330svh; --galerie-oben: 43svh; --galerie-unten: 8svh; --bruecke-oben: var(--takt-2); }
/* Das Licht von Valoora ganz oben: ein sehr leiser Schein im Hintergrund, wie im Kopf von Leistungen. Nur seine Ausläufer
   liegen hinter der Navigation, er gehört zur Seite und scrollt mit weg (die Bühne bleibt stehen). Am 03.10.2026 kurz Teil
   des festen Hintergrunds, seit 04.10.2026 wieder so (Philip: das Licht soll mit dem Seitenanfang wegscrollen). */
.einstieg::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 90svh; pointer-events: none;
  background: radial-gradient(48% 60% at 14% 0%, rgba(var(--licht-violett), .2), rgba(var(--licht-violett), 0) 72%),
              radial-gradient(36% 46% at 84% 0%, rgba(var(--licht-leer), .12), rgba(var(--licht-leer), 0) 72%);
  animation: licht-treiben 28s ease-in-out infinite alternate; }
.einstieg__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--kopf) + var(--takt-1)); }

.einstieg__kopf { width: 100%; padding-inline: var(--rand-aussen); text-align: center; }
.titel { font-weight: 900; font-size: var(--t-held); line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel); }
.titel__zeile { display: block; overflow: hidden; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
.titel__innen { display: inline-block; }
.einstieg__unter { margin: var(--a-3) auto 0; max-width: var(--mass-s); font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-2); }

/* „wer du bist.“ in wechselnden Stimmen.
   AUSNAHME: Schriften und Farben der Kunden, bewusst außerhalb der Valoora-Palette. */
.stimme { display: inline-block; white-space: nowrap; text-align: center; transition: color var(--dauer-2) ease; }
.stimme__innen { display: inline-block; }
.stimme--valoora { font-family: var(--schrift); font-weight: 900; letter-spacing: var(--sperrung-titel); color: var(--mint); }
.stimme--topbody { font-family: "Stimme Topbody", var(--schrift); font-weight: 700; letter-spacing: -.035em; color: #F5C518; }
.stimme--castangolf { font-family: "Stimme Castangolf", var(--schrift); font-style: italic; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.stimme--castangolf .stimme__innen { line-height: 1.08; background: #19602B; padding: 0 .16em .04em .12em; border-radius: var(--r-xs); }
.stimme--esencia { font-family: "Stimme Esencia", Georgia, serif; font-weight: 400; letter-spacing: -.01em; color: #5C2A18; }
.stimme--esencia .stimme__innen { line-height: 1; font-size: 1.14em; background: #F6EBE3; padding: .02em .18em .06em; border-radius: var(--r-xs); }
.stimme--finnolebauer { font-family: "Stimme FOB", var(--schrift); font-weight: 300; letter-spacing: -.05em; color: #fff;
  text-decoration: underline; text-decoration-color: #F3682F; text-decoration-thickness: .06em; text-underline-offset: .14em; }
.stimme--socialfuerst { font-family: "Stimme Social Fuerst", var(--schrift); font-weight: 500; text-transform: uppercase; letter-spacing: -.03em; color: #EFEBE2; }
.stimme--socialfuerst .stimme__innen { box-shadow: 0 -.1em 0 #E6141F inset; }

/* Name und Steuerung über der Website */
.gesicht-info { width: var(--platz-b); margin-top: var(--a-4); display: flex; justify-content: space-between; align-items: center; gap: var(--a-3); min-height: var(--ziel); }
.gesicht-info__name { display: flex; align-items: baseline; gap: var(--a-2); min-width: 0; font-size: var(--t-ui); white-space: nowrap; overflow: hidden; }
.gesicht-info__name b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.gesicht-info__nr, .gesicht-info__typ { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.gesicht-info__nr { color: rgb(var(--licht)); transition: color var(--dauer-2) ease; }
.gesicht-info__typ { display: none; }
.gesicht-info__steuer { display: flex; align-items: center; gap: var(--a-2); flex-shrink: 0; }

/* Der Platz der Website (die Fläche selbst zeichnet der Raum) */
.platz { position: relative; flex-shrink: 0; width: var(--platz-b); aspect-ratio: var(--platz-seite); margin-top: var(--a-2); cursor: pointer; touch-action: pan-y; }
.platz__ersatz { position: absolute; inset: 0; display: none; border-radius: var(--r-l); overflow: hidden; background: var(--ebene-2); box-shadow: var(--ring), var(--schein-seite); }
.platz__ersatz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity var(--dauer-3) ease; }
.platz__ersatz img.is-on { opacity: 1; }
.ohne-3d .platz__ersatz { display: block; }
.ohne-3d .galerie { display: flex; align-items: center; gap: var(--a-4); padding: 0 var(--rand); overflow-x: auto; scroll-snap-type: x mandatory; opacity: 0; scrollbar-width: none; }
.ersatz-seite { flex: 0 0 46vw; scroll-snap-align: center; display: flex; flex-direction: column; gap: var(--a-1); text-decoration: none; }
.ersatz-seite img { width: 100%; aspect-ratio: var(--platz-seite); object-fit: cover; object-position: top; border-radius: var(--r-m); box-shadow: var(--ring), var(--schatten); margin-bottom: var(--a-2); }
.ersatz-seite b { font-size: var(--t-ui); }
.ersatz-seite span { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
@media (min-width: 821px) { .ohne-3d .galerie { justify-content: center; overflow: visible; } .ersatz-seite { flex: 0 1 17vw; } }
.ohne-3d body, .ohne-3d .raum { background: radial-gradient(80% 60% at 50% 60%, rgba(var(--licht), .18), var(--schleier-0) 70%), var(--nacht); }

/* Szene 2 */
.bruecke { position: absolute; left: var(--rand); right: var(--rand); top: calc(var(--kopf) + var(--bruecke-oben)); text-align: center; pointer-events: none; }
.bruecke__gross { font-weight: 900; font-size: var(--t-held); line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel); }
.bruecke__zeile { display: block; opacity: 0; text-wrap: balance; }
.bruecke__zeile--mint { color: var(--mint); }
.bruecke__klein { text-wrap: balance; margin: var(--a-4) auto 0; max-width: var(--mass-m); font-size: var(--t-ui); line-height: var(--zeile-mittel); color: var(--text-2); opacity: 0; }
.galerie { position: absolute; left: 0; right: 0; top: var(--galerie-oben); bottom: var(--galerie-unten); pointer-events: none; }
.namen { position: absolute; inset: 0; pointer-events: none; }
.name { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: var(--a-1); padding: var(--a-1) var(--a-2); white-space: nowrap;
  text-decoration: none; opacity: 0; visibility: hidden; will-change: transform, opacity; pointer-events: auto; border-radius: var(--r-m); }
.name b { font-size: var(--t-ui); font-weight: 700; }
.name span { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); transition: color var(--dauer-1); }
.name i { font-style: normal; }
.name:hover span, .name.is-hover span, .name:focus-visible span { color: rgb(var(--name-licht, 255, 255, 255)); }

.scroll-hinweis { position: absolute; left: calc(var(--rand) * .7); bottom: var(--a-6); display: none; flex-direction: column; align-items: center; gap: var(--a-3);
  font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--text-3); opacity: 0; transition: opacity var(--dauer-3) ease; }
.scroll-hinweis span { writing-mode: vertical-rl; transform: rotate(180deg); }
.hinweis-an .scroll-hinweis { opacity: 1; }
.hinweis-an .scroll-hinweis.is-weg { opacity: 0; transition-duration: var(--dauer-1); }
.scroll-hinweis i { display: block; width: 1px; height: 36px; background: linear-gradient(var(--weiss), transparent); transform-origin: top; animation: linie 2.4s cubic-bezier(.76, 0, .18, 1) infinite; }
@keyframes linie { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.gesichter { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 821px) {
  .einstieg { height: 300svh; --galerie-oben: 46svh; --galerie-unten: 11svh; --bruecke-oben: 7svh; }
  .einstieg__buehne { padding-top: calc(var(--kopf) + var(--takt-2)); }
  .einstieg__unter { margin-top: var(--a-4); max-width: none; font-size: var(--t-text); }
  .gesicht-info { margin-top: var(--a-6); }
  .gesicht-info__name { gap: var(--a-3); }
  .gesicht-info__typ { display: inline; }
  .punkte { display: flex; }
  .punkt { width: var(--a-8); }
  .bruecke__klein { margin-top: var(--a-6); max-width: var(--breite-schmal); font-size: var(--t-text); }
  .galerie { left: 2vw; right: 2vw; }
  .scroll-hinweis { display: flex; }
}
/* niedrige Desktop-Fenster: Titel etwas kleiner */
@media (min-width: 821px) and (max-height: 760px) {
  .titel { font-size: var(--t-held-niedrig); }
  .einstieg__unter { margin-top: var(--a-3); }
}

/* ==========================================================================
   Szene 3: Haltung. Große Schrift, das V korrigiert, was bequem wäre.
   ========================================================================== */
/* AUSNAHME: Haltung folgt direkt auf die Bühne, auf dem Handy mit mehr Luft */
@media (max-width: 820px) { .haltung { padding-top: 22svh; padding-bottom: 14svh; } }
.haltung__titel { margin-top: var(--takt-1); font-size: var(--t-display); font-weight: 900; line-height: var(--zeile-display); letter-spacing: var(--sperrung-display); }
.haltung__text { margin-top: var(--takt-2); max-width: var(--mass-s); font-size: var(--t-lead); line-height: var(--zeile-mittel); color: var(--text-2); }

.prinzipien { margin: var(--takt-6) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11svh; }
.prinzip__linie { display: flex; align-items: center; gap: var(--a-4); margin-bottom: var(--takt-1); }
.prinzip__linie i { flex: 1; height: 1px; background: var(--linie-3); transform-origin: left center; }
.prinzip__name { position: relative; font-size: var(--t-prinzip); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-prinzip); }
.prinzip__neu { display: inline-block; }
.prinzip__alt { position: relative; display: inline-block; white-space: nowrap; color: var(--text-4); transition: color var(--dauer-3) ease; }
.prinzip__strich { position: absolute; left: -.04em; right: -.04em; top: 53%; height: .075em; border-radius: .05em; background: var(--weiss); transform: scaleX(0); transform-origin: left center;
  box-shadow: var(--glut-strich); }
.prinzip.ist-korrigiert .prinzip__strich { background: var(--mint); box-shadow: var(--glut-strich-ruhig); transition: background var(--dauer-3) ease, box-shadow var(--dauer-3) ease; }
.prinzip.ist-korrigiert .prinzip__alt { color: var(--text-aus); }
.prinzip__text { margin-top: var(--takt-1); max-width: var(--mass-m); font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }
.korrektur { position: absolute; left: 0; top: 0; width: .46em; height: auto; overflow: visible; pointer-events: none; opacity: 0; z-index: 2;
  fill: var(--weiss); filter: var(--glut-korrektur); }
.haltung > .korrektur { display: none; }
.haltung .mehr { margin-top: var(--takt-5); }

@media (min-width: 821px) {
  .haltung__text { margin: 4svh 0 0 auto; }
  .prinzipien { margin-top: 14svh; }
  .prinzip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 30%); column-gap: 6vw; }
  .prinzip__linie { grid-column: 1 / -1; }
  .prinzip__name { grid-column: 1 / -1; }
  .prinzip__text { grid-column: 2; }
  .prinzip:nth-child(2) .prinzip__name { text-align: right; }
  .prinzip:nth-child(2) .prinzip__text { grid-column: 1; }
}

/* ==========================================================================
   Szene 4: Wie wir arbeiten. Eine Bühne, vier Schritte, ein Beispiel.
   Beispiel-Seite „Obhut Immobilien“ (erfunden): Serif nur innerhalb des Beispiels.
   ========================================================================== */
.arbeit__titel { margin-top: var(--takt-1); font-size: var(--t-titel); font-weight: 900; line-height: var(--zeile-display); letter-spacing: var(--sperrung-display); }
.arbeit__beispiel { margin-top: var(--takt-1); max-width: var(--mass-l); font-size: var(--t-ui); line-height: var(--zeile-mittel); color: var(--text-2); }
.arbeit__marke { display: inline-block; margin-right: var(--a-2); padding: var(--a-05) var(--a-2); border-radius: var(--r-pille); border: 1px solid var(--linie-4);
  font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--weiss); vertical-align: 1px; }

.arbeit__modul { margin-top: var(--takt-3); display: flex; flex-direction: column; gap: var(--a-4); }

/* Reiter: auf dem Handy eine Reihe zum Wischen */
.reiter { display: flex; gap: var(--a-2); overflow-x: auto; margin: 0 calc(var(--rand) * -1); padding: var(--a-05) var(--rand); scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter__knopf { position: relative; flex-shrink: 0; display: flex; align-items: baseline; gap: var(--a-2); min-height: var(--ziel); padding: var(--a-2) var(--a-4); overflow: hidden;
  border-radius: var(--r-pille); border: 1px solid var(--linie-2); background: var(--flaeche-1); color: var(--text-3); cursor: pointer;
  font-size: var(--t-ui); font-weight: 700; letter-spacing: var(--sperrung-ui); transition: color var(--dauer-2), border-color var(--dauer-2), background var(--dauer-2); }
.reiter__knopf:hover { color: var(--text-2); }
.reiter__knopf.is-on { color: var(--weiss); border-color: var(--mint-rand); background: var(--mint-hauch); }
.reiter__nr { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-meta); color: var(--violett-hell); }
.reiter__zeit { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mint); transform: scaleX(0); transform-origin: left center; }

.felder { order: 3; }
.feld p { max-width: var(--mass-l); font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }
.arbeit .mehr { margin-top: 6svh; }

/* Die Bühne. Ihr Licht kommt von der Beispielseite (Obhut, erfunden). */
.spiel { position: relative; margin: 0; --leiste: 36px; --spiel-licht: 167, 123, 69; }
.spiel::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 55%, rgba(var(--spiel-licht), .2), rgba(var(--spiel-licht), 0) 70%); }
.spiel__rahmen, .spiel__leiste, .spiel__flaeche { position: relative; }
.spiel > .spiel__leiste { height: var(--leiste); display: flex; align-items: center; gap: var(--a-2); padding: 0 var(--a-4);
  background: var(--ebene-2); border: 1px solid var(--linie-1); border-bottom-color: var(--linie-1); border-radius: var(--r-l) var(--r-l) 0 0; }
.spiel__leiste > i { width: 8px; height: 8px; border-radius: 50%; background: var(--ebene-4); }
.spiel__titel { min-width: 0; margin-left: var(--a-2); padding: var(--a-1) var(--a-3); border-radius: var(--r-pille); background: var(--flaeche-1);
  font-size: var(--t-label); font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spiel__fiktiv { flex-shrink: 0; margin-left: auto; font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-meta); text-transform: uppercase; white-space: nowrap; color: var(--text-3); }
.spiel__flaeche { aspect-ratio: 4 / 5.3; max-width: 100%; overflow: hidden; container-type: inline-size; background: var(--ebene-1);
  border: 1px solid var(--linie-1); border-top: 0; border-radius: 0 0 var(--r-l) var(--r-l);
  box-shadow: 0 40px 110px -40px rgba(var(--spiel-licht), .45), 0 0 0 1px var(--kante-dunkel); }
.spiel__unter { margin-top: var(--a-3); font-size: var(--t-klein); line-height: var(--zeile-knapp); color: var(--text-3); }
/* Szene 4: Unter der Bühne steht der Satz zum Schritt, bei Gestalten an seiner Stelle die Zeitleiste. Beide liegen übereinander. */
.spiel__unter--stufen { display: grid; grid-template-columns: minmax(0, 1fr); }
.spiel__unter--stufen > * { grid-area: 1 / 1; transition: opacity var(--dauer-2) ease, visibility var(--dauer-2); }
.spiel__unter--stufen .stufen { opacity: 0; visibility: hidden; }
.spiel__unter--stufen.zeigt-stufen > [data-spiel-unter] { opacity: 0; }
.spiel__unter--stufen.zeigt-stufen .stufen { opacity: 1; visibility: visible; }
/* Die Zeitleiste: Konzept, Texte, Design, Handy. Jede Station geht an und bleibt an, die Linie dazwischen füllt sich (--fuellung).
   Fortschritt ist Mint, wie der Balken unter dem Reiter und die Punkte im V-Weg. */
.stufen { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; font-weight: 600; }
.stufen[hidden] { display: none; }
.stufen li { display: flex; align-items: center; gap: var(--a-2); white-space: nowrap; transition: color var(--dauer-2) ease; }
.stufen li[hidden] { display: none; }
.stufen li + li { flex: 1 1 0; }
.stufen li::after { content: ""; order: -1; flex-shrink: 0; width: var(--a-2); height: var(--a-2); border-radius: 50%; border: 1px solid var(--linie-4);
  transition: background-color var(--dauer-2) ease, border-color var(--dauer-2) ease, box-shadow var(--dauer-2) ease; }
.stufen li + li::before { content: ""; order: -2; flex: 1; min-width: var(--a-3); height: 1px; margin-left: var(--a-2);
  background: linear-gradient(90deg, var(--mint) var(--fuellung, 0%), var(--linie-2) var(--fuellung, 0%)); }
.stufen li.ist-an { color: var(--weiss); }
.stufen li.ist-an::after { background: var(--mint); border-color: var(--mint); box-shadow: var(--schein-punkt); animation: punkt-an .5s var(--weich); }
@keyframes punkt-an { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.spiel__licht { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; overflow: visible; opacity: 0; }
.spiel__licht polyline { fill: none; stroke: var(--weiss); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: var(--glut-linie); }

/* --------------------------------------------------------------------------
   AUSNAHME Bühneninhalt: Die Bilder auf der Bühne sind Bildschirme im Kleinen.
   Ihre Maße folgen der Bühnenbreite (cqw), nicht der Seitenskala.
   Valoora-Farben kommen trotzdem aus den Tokens, die Beispielseite hat eigene.
   -------------------------------------------------------------------------- */
/* Jedes Bild ist deckend: Beim Wechsel schneidet das V das neue Bild über das alte, ohne dass das alte durchscheint */
.bild { position: absolute; inset: 0; visibility: hidden; background: var(--ebene-1); }
.bild.is-on { visibility: visible; }

/* 01 Verstehen */
.bild--verstehen { display: flex; flex-direction: column; align-items: center; padding: 6% 6% 7%; }
.fragen { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
.frage { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; background: var(--flaeche-1); border: 1px solid var(--linie-1); }
.frage:nth-child(n+5) { display: none; }
.frage__f { font-size: 11px; color: var(--text-3); }
.frage__a { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
/* V und Erkenntnis stehen zusammen in der Mitte des freien Raums unter den Antworten (margin auto oben und unten) */
.trichter { flex-shrink: 0; width: 44px; height: auto; margin: auto 0 0; overflow: visible; fill: none; stroke: var(--weiss); stroke-width: 1.4; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: var(--glut-v); }
/* Die Erkenntnis: ein Zitat in Mint (das Ergebnis der Analyse), wie auf der Leistungsseite. Im Fenster ist nur das V violett. */
.erkenntnis { margin: 12px 0 auto; padding: 12px 16px 14px; border-radius: 12px; text-align: center;
  background: var(--mint-flaeche); border: 1px solid var(--mint-rand); box-shadow: 0 18px 50px -20px var(--schein-mint); }
.erkenntnis__label { font-size: 10.5px; font-weight: 700; letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--mint); }
.erkenntnis__satz { margin-top: 6px; max-width: 28ch; font-size: 16.5px; font-weight: 800; line-height: 1.24; letter-spacing: -.02em; color: var(--weiss); text-wrap: balance; }

/* 02 Gestalten: die Beispiel-Seite (Farben der erfundenen Marke) */
.bild--gestalten, .obhut-farben { --obhut-grund: #F3EEE6; --obhut-tinte: #1D2B3A; --obhut-gold: #A77B45; --obhut-grau: #4A5563; --obhut-sand: #E7DCCB; --obhut-linie: rgba(29, 43, 58, .14); }
.mock { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.5cqw 6cqw; font-family: var(--schrift); }
.mock--fertig { background: var(--obhut-grund); color: var(--obhut-tinte); }
.mock__raster { position: absolute; inset: 0 6cqw; opacity: 0; pointer-events: none; transition: opacity .6s;
  background: repeating-linear-gradient(90deg, var(--mint-flaeche) 0 1px, transparent 1px calc(100% / 6)); border-right: 1px solid var(--mint-flaeche); }
.mock__kopf { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; font-size: max(10px, 3.2cqw); }
.mock__logo { display: inline-flex; align-items: baseline; gap: 1.2cqw; font-family: "Beispiel Serif", Georgia, serif; font-size: max(16px, 6.4cqw); line-height: 1; letter-spacing: -.01em; }
.mock__logo small { font-family: var(--schrift); font-size: max(7px, 2cqw); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.mock__nav { display: none; gap: 2.2cqw; font-weight: 500; }
.mock__knopf { display: inline-flex; align-items: center; padding: 1.6cqw 3.2cqw; border-radius: var(--r-pille); background: var(--obhut-tinte); color: var(--obhut-grund); font-size: max(10px, 3.2cqw); font-weight: 700; white-space: nowrap; }
.mock__knopf--klein { display: none; }
.mock__held { flex: 1; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 5cqw; margin-top: 5cqw; }
.mock__kicker { font-size: max(8px, 2.6cqw); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--obhut-gold); }
.mock__titel { margin: 2cqw 0 3cqw; font-family: "Beispiel Serif", Georgia, serif; font-size: max(22px, 10.4cqw); line-height: 1.02; letter-spacing: -.01em; color: var(--obhut-tinte); }
.mock__unter { max-width: 32ch; font-size: max(11px, 3.6cqw); line-height: 1.45; color: var(--obhut-grau); }
.mock__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 3cqw; margin-top: 4.5cqw; }
.mock__link { font-size: max(10px, 3.2cqw); font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.mock__bild { position: relative; aspect-ratio: 16 / 9; border-radius: 2.6cqw; overflow: hidden; background: var(--obhut-sand); }
.mock__bild .fassade { position: absolute; inset: 0; width: 100%; height: 100%; }
.mock__fakten { display: none; }

/* Skizze: gleiche Geometrie, im Dunkeln, Stufe für Stufe */
.mock--skizze { color: var(--weiss); }
.mock--skizze .mock__logo, .mock--skizze .mock__nav, .mock--skizze .mock__knopf, .mock--skizze .mock__kicker, .mock--skizze .mock__titel,
.mock--skizze .mock__unter, .mock--skizze .mock__link, .mock--skizze .mock__bild, .mock--skizze .mock__fakten > span,
.mock--skizze .mock__logo small, .mock--skizze .mock__fakten b {
  transition: color .5s ease, background-color .5s ease, border-color .5s ease; }
.mock--skizze .mock__knopf { background: transparent; border: 1px solid var(--linie-5); color: var(--text-1); }
.mock--skizze .mock__kicker { color: var(--mint); }
.mock--skizze .mock__titel { color: var(--weiss); }
.mock--skizze .mock__unter, .mock--skizze .mock__nav, .mock--skizze .mock__link, .mock--skizze .mock__fakten { color: var(--text-2); }
.mock--skizze .mock__bild { background: var(--flaeche-1); border: 1px dashed var(--linie-4); }
.mock--skizze .mock__bild::before, .mock--skizze .mock__bild::after { content: ""; position: absolute; left: 50%; top: 50%; width: 140%; height: 1px; background: var(--linie-2); }
.mock--skizze .mock__bild::before { transform: translate(-50%, -50%) rotate(29deg); }
.mock--skizze .mock__bild::after { transform: translate(-50%, -50%) rotate(-29deg); }
.mock--skizze[data-stufe="leer"] > :not(.mock__raster, .mock__scan) { opacity: 0; }
.mock--skizze[data-stufe="raster"] > :not(.mock__raster, .mock__scan) { opacity: 0; }
.mock--skizze[data-stufe="raster"] .mock__raster, .mock--skizze[data-stufe="struktur"] .mock__raster { opacity: 1; }
/* Die Balken der Struktur gelten schon, solange die Skizze noch unsichtbar ist (leer, Raster).
   Sonst blendet der Text beim Wechsel zur Struktur erst aus und blitzt kurz auf, bevor er getippt wird. */
.mock--skizze:is([data-stufe="leer"], [data-stufe="raster"], [data-stufe="struktur"]) :is(.mock__logo, .mock__nav > span, .mock__knopf, .mock__kicker, .mock__titel, .mock__unter, .mock__link, .mock__fakten > span) {
  color: transparent; background: var(--flaeche-2); border-color: transparent; border-radius: .6cqw; }
.mock--skizze:is([data-stufe="leer"], [data-stufe="raster"], [data-stufe="struktur"]) :is(.mock__logo small, .mock__fakten b) { color: transparent; }
/* Vorlauf, damit man sieht, dass gearbeitet wird: Das Raster zieht sich hinter einer Lichtlinie auf (arbeit.js),
   die Platzhalter schimmern, im Titel blinkt der Cursor, bevor er sich tippt. */
.mock__scan { position: absolute; inset: 0 6cqw; z-index: 2; pointer-events: none; opacity: 0; }
.mock__scan::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--scan, 0%); width: 2px; margin-left: -1px; background: var(--weiss); filter: var(--glut-linie); }
.mock--skizze[data-stufe="struktur"] :is(.mock__logo, .mock__nav > span, .mock__knopf, .mock__kicker, .mock__titel, .mock__unter, .mock__link, .mock__fakten > span, .mock__bild) {
  background-image: linear-gradient(100deg, transparent 35%, var(--flaeche-2) 50%, transparent 65%); background-size: 250% 100%; background-repeat: no-repeat; animation: skelett 1.4s ease-in-out infinite; }
@keyframes skelett { from { background-position: 100% 0; } to { background-position: 0 0; } }
.tipp__rest { color: transparent; }
.mock--skizze[data-stufe="text"] .tipp__an::after { content: ""; display: inline-block; width: .07em; height: .8em; margin-right: -.07em; vertical-align: -.05em;
  border-radius: var(--r-pille); background: var(--mint); animation: blinken 1.1s steps(1) infinite; }

.mock-handy { display: none; }

/* 03 Gefunden werden: die KI-Oberfläche */
.ki { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 6% 6% 5%; }
.ki__verlauf { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ki__frage { align-self: flex-end; max-width: 86%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--flaeche-2); font-size: 14px; line-height: 1.45; color: var(--weiss); }
.ki__denken { display: flex; flex-direction: column; gap: 8px; }
.ki__schimmer { font-size: 12.5px; font-weight: 600; color: transparent; background: linear-gradient(90deg, var(--text-4) 20%, var(--weiss) 50%, var(--text-4) 80%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; animation: schimmer 1.6s linear infinite; }
@keyframes schimmer { to { background-position: -200% 0; } }
.ki__quellen { display: flex; flex-wrap: wrap; gap: 6px; }
.ki__quellen i { font-style: normal; font-size: 11px; padding: 3px 9px; border-radius: var(--r-pille); border: 1px solid var(--linie-3); color: var(--text-2); }
.ki__text { font-size: 14px; line-height: 1.55; color: var(--text-1); }
.ki__karte { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px;
  background: var(--mint-hauch); border: 1px solid var(--mint-rand-leise); }
.ki__haken { grid-row: 1 / span 3; width: 26px; height: auto; fill: var(--violett-hell); filter: var(--glut-haken); }
.ki__firma { font-size: 15px; font-weight: 800; }
.ki__ort { font-size: 10.5px; font-weight: 700; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.ki__fiktiv { font-size: 11px; font-style: italic; color: var(--text-3); }
.ki__eingabe { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-radius: var(--r-pille); border: 1px solid var(--linie-2);
  font-size: 13px; color: var(--text-3); }
.ki__eingabe i { width: 28px; height: 28px; border-radius: 50%; background: var(--flaeche-2); }

/* 04 Weiterdenken: ein Ablauf */
.fluss { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 6% 7%; }
/* Der Schalter: erst „Von Hand“ (Bernstein), dann legt er sich um auf „Automatisch“ (Mint). Groß, damit man das Umlegen sieht. */
.schalter { --s-b: 58px; --s-h: 32px; --s-k: 24px; align-self: center; display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.schalter__wort { white-space: nowrap; color: var(--text-3); transition: color .45s ease; }
.schalter__wort--hand { color: var(--bernstein); }
.schalter__bahn { position: relative; flex-shrink: 0; width: var(--s-b); height: var(--s-h); border-radius: var(--r-pille); background: var(--bernstein-hauch); border: 1px solid var(--bernstein-rand);
  transition: background-color .45s ease, border-color .45s ease; }
.schalter__knopf { position: absolute; top: 50%; left: calc((var(--s-h) - 2px - var(--s-k)) / 2); width: var(--s-k); height: var(--s-k); margin-top: calc(var(--s-k) / -2); border-radius: 50%;
  background: var(--bernstein); transition: left .5s cubic-bezier(.34, 1.56, .64, 1), background-color .45s ease, box-shadow .45s ease; }
.schalter__bahn::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--mint); opacity: 0; pointer-events: none; }
.fluss.ist-auto .schalter__wort--hand { color: var(--text-3); }
.fluss.ist-auto .schalter__wort--auto { color: var(--mint); }
.fluss.ist-auto .schalter__bahn { background: var(--mint-flaeche); border-color: var(--mint-rand); }
.fluss.ist-auto .schalter__knopf { left: calc(100% - var(--s-k) - (var(--s-h) - 2px - var(--s-k)) / 2); background: var(--mint); box-shadow: 0 0 14px var(--schein-mint); }
.fluss.ist-auto .schalter__bahn::after { animation: schalter-an .8s ease-out .25s; }
@keyframes schalter-an { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7, 2.2); } }
.fluss__bahn { position: relative; }
.fluss__kette { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px; }
.knoten { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  background: var(--ebene-3); border: 1px solid var(--linie-1); transition: border-color .5s, background .5s; }
.knoten__name { font-size: 14px; font-weight: 800; }
.knoten__hand, .knoten__auto { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 600; text-align: right; transition: opacity .4s, transform .4s; }
.knoten__hand { color: var(--bernstein); }
.knoten__auto { color: var(--mint); opacity: 0; transform: translateY(6px); }
.knoten.ist-auto { border-color: var(--mint-rand); }
.knoten.ist-auto .knoten__hand { opacity: 0; transform: translateY(-6px); }
.knoten.ist-auto .knoten__auto { opacity: 1; transform: none; }
.fluss__linie { position: absolute; z-index: 0; left: 26px; top: 20px; bottom: 20px; width: 2px; background: var(--linie-1); }
.fluss__linie b { position: absolute; left: -3px; top: 0; width: 8px; height: 38px; margin-top: -19px; border-radius: 8px; opacity: 0;
  background: linear-gradient(transparent, var(--weiss), transparent); box-shadow: 0 0 14px var(--glut-violett); }
.fluss__fertig { align-self: center; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--weiss); opacity: 0; }
.fluss__fertig svg { width: 18px; height: auto; fill: var(--violett-hell); filter: var(--glut-haken); }

/* Breitere Bühne: Beispiel-Seite als Desktop-Seite, Ablauf waagerecht */
@container (min-width: 560px) {
  .mock { padding: 3.4cqw 4.4cqw; }
  .mock__kopf { font-size: 1.3cqw; }
  .mock__logo { font-size: 2.6cqw; gap: .7cqw; }
  .mock__logo small { font-size: .85cqw; }
  .mock__nav { display: flex; }
  .mock__knopf { padding: .85cqw 1.7cqw; font-size: 1.25cqw; }
  .mock__knopf--klein { display: inline-flex; }
  .mock__held { flex-direction: row; justify-content: space-between; align-items: center; gap: 4cqw; margin-top: 3cqw; }
  .mock__text { flex: 1.05; }
  .mock__bild { flex: .95; aspect-ratio: 4 / 3.3; border-radius: 1.2cqw; }
  .mock__kicker { font-size: 1.05cqw; }
  .mock__titel { margin: .9cqw 0 1.4cqw; font-size: 4.9cqw; }
  .mock__unter { font-size: 1.5cqw; }
  .mock__knoepfe { margin-top: 2.2cqw; gap: 1.6cqw; }
  .mock__link { font-size: 1.25cqw; }
  .mock__fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2cqw; margin-top: 3cqw; padding-top: 1.8cqw; border-top: 1px solid var(--obhut-linie); font-size: 1.1cqw; line-height: 1.4; color: var(--obhut-grau); }
  .mock--skizze .mock__fakten { border-top-color: var(--linie-2); }
  .mock__fakten b { display: block; margin-bottom: .2cqw; font-size: 1.3cqw; color: var(--obhut-tinte); }
  .mock--skizze .mock__fakten b { color: var(--weiss); }
  .mock-handy { display: block; position: absolute; right: 3.2cqw; bottom: -4cqw; z-index: 6; width: 15.5cqw; aspect-ratio: 9 / 18.5; padding: .7cqw; border-radius: 2.6cqw;
    background: var(--ebene-3); box-shadow: var(--ring), var(--schatten), 0 0 40px rgba(var(--spiel-licht), .25); opacity: 0; }
  .mock-handy__schirm { height: 100%; display: flex; flex-direction: column; gap: .9cqw; padding: 1.6cqw 1.3cqw; border-radius: 2cqw; overflow: hidden; background: var(--obhut-grund); color: var(--obhut-tinte); }
  .mock-handy .mock__logo { font-size: 1.6cqw; }
  .mock-handy .mock__logo small { font-size: .55cqw; }
  .mock-handy__bild { aspect-ratio: 4 / 3; border-radius: .9cqw; background: linear-gradient(180deg, #DCE3E6, var(--obhut-sand) 60%, #CBB79B); }
  .mock-handy .mock__kicker { font-size: .62cqw; }
  .mock-handy .mock__titel { margin: 0; font-size: 2.3cqw; }
  .mock-handy .mock__knopf { align-self: flex-start; padding: .6cqw 1.1cqw; font-size: .75cqw; }

  .bild--verstehen { padding: 4.5cqw 5cqw 4cqw; }
  .fragen { grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
  .frage:nth-child(n+5) { display: flex; }
  .frage { padding: 1.3cqw 1.6cqw; border-radius: 1.1cqw; }
  .frage__f { font-size: 1.25cqw; }
  .frage__a { font-size: 1.65cqw; }
  .trichter { width: 5.4cqw; }
  .erkenntnis { margin-top: 1.4cqw; padding: 1.5cqw 3cqw 1.8cqw; border-radius: 1.4cqw; }
  .erkenntnis__label { font-size: 1.05cqw; }
  .erkenntnis__satz { margin-top: .6cqw; font-size: 2.6cqw; max-width: 32ch; }

  .ki { padding: 4.5cqw 7cqw 3.6cqw; gap: 1.8cqw; }
  .ki__verlauf { gap: 1.8cqw; }
  .ki__frage { max-width: 70%; font-size: 1.7cqw; padding: 1.3cqw 1.9cqw; border-radius: 1.8cqw 1.8cqw .5cqw 1.8cqw; }
  .ki__schimmer { font-size: 1.35cqw; }
  .ki__quellen i { font-size: 1.15cqw; }
  .ki__text { max-width: 62ch; font-size: 1.62cqw; }
  .ki__karte { max-width: 60%; padding: 1.4cqw 1.8cqw; border-radius: 1.3cqw; }
  .ki__haken { width: 3cqw; }
  .ki__firma { font-size: 1.8cqw; }
  .ki__ort { font-size: 1.05cqw; }
  .ki__fiktiv { font-size: 1.1cqw; }
  .ki__eingabe { font-size: 1.4cqw; padding: .8cqw .8cqw .8cqw 2cqw; }
  .ki__eingabe i { width: 3.2cqw; height: 3.2cqw; }

  .fluss { padding: 5cqw 4.5cqw; gap: 3.6cqw; }
  .schalter { --s-b: 8cqw; --s-h: 4.3cqw; --s-k: 3.3cqw; gap: 1.8cqw; font-size: 2.4cqw; }
  .fluss__kette { grid-template-columns: repeat(5, 1fr); gap: 1.4cqw; }
  .knoten { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .9cqw; padding: 2.6cqw 1cqw; border-radius: 1.4cqw; }
  .knoten__name { font-size: 2.05cqw; }
  .knoten__hand, .knoten__auto { grid-column: 1; grid-row: 2; font-size: 1.45cqw; text-align: center; }
  .fluss__linie { left: 10%; right: 10%; top: 50%; bottom: auto; width: auto; height: 2px; }
  .fluss__linie b { left: 0; top: -3px; width: 46px; height: 8px; margin: 0 0 0 -23px; background: linear-gradient(90deg, transparent, var(--weiss), transparent); }
  .fluss__fertig { font-size: 1.8cqw; }
  .fluss__fertig svg { width: 2.2cqw; }
}

/* Schmale Bühne (kleine Handys): drei Antworten statt vier und ein knapperer Ablauf, damit V, Erkenntnis und „Erledigt“ ganz zu sehen sind */
@container (max-width: 339px) {
  .frage:nth-child(n+4) { display: none; }
  .schalter { --s-b: 50px; --s-h: 28px; --s-k: 20px; gap: 8px; font-size: 14px; }
  .fluss { gap: 14px; }
  .fluss__kette { gap: 8px; }
  .knoten { padding: 8px 12px; }
  /* KI-Antwort: Auf kleinen Handys lag die Karte sonst über dem Eingabefeld. Das Feld ist nur Kulisse und fällt hier weg. */
  .ki { gap: 10px; }
  .ki__verlauf { gap: 10px; }
  .ki__frage { font-size: 13px; }
  .ki__text { font-size: 13px; line-height: 1.5; }
  .ki__eingabe { display: none; }
}
@container (max-width: 299px) {
  .bild--verstehen { padding: 5% 5% 6%; }
  .fragen { gap: 6px; }
  .frage { padding: 7px 10px; }
  .frage__f { font-size: 10px; }
  .frage__a { font-size: 12.5px; }
  .trichter { width: 36px; }
  .erkenntnis { margin-top: 10px; padding: 10px 12px 12px; }
  .erkenntnis__satz { margin-top: 4px; font-size: 14.5px; }
  .ki { padding: 5% 5% 4%; }
  .ki__frage { max-width: 92%; padding: 8px 12px; font-size: 12.5px; }
  .ki__text { font-size: 12.5px; }
  .ki__karte { padding: 10px 12px; }
}

@media (min-width: 821px) {
  .arbeit__beispiel { font-size: var(--t-text); }
  .arbeit__modul { margin-top: var(--takt-4); display: grid; grid-template-columns: minmax(260px, 29%) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 5vw; row-gap: 0; align-items: start; }
  .reiter { grid-column: 1; grid-row: 1; flex-direction: column; gap: 0; overflow: visible; margin: 0; padding: 0; }
  .reiter__knopf { width: 100%; align-items: baseline; gap: var(--a-3); min-height: 0; padding: var(--a-4) 0; border: 0; border-top: 1px solid var(--linie-2); border-radius: 0; background: transparent;
    font-size: var(--t-h3); font-weight: 800; letter-spacing: var(--sperrung-zwischen); text-align: left; }
  .reiter__knopf.is-on { background: transparent; }
  .reiter__knopf:last-child { border-bottom: 1px solid var(--linie-2); }
  .reiter__zeit { bottom: -1px; }
  .felder { grid-column: 1; grid-row: 2; padding-top: var(--takt-2); }
  .spiel { --leiste: 40px; }
  .arbeit .spiel { grid-column: 2; grid-row: 1 / span 2; }
  .spiel__titel { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .spiel__flaeche { aspect-ratio: 16 / 10.2; }
}

/* ==========================================================================
   Szene 5: Arbeiten. Ein Band zum Ziehen. Licht fällt auf die Karte im Blick.
   Zahlen nur aus den Zitaten, Stimmen im Wortlaut.
   ========================================================================== */
/* Geometrie des Bands (Kartenbreiten in Fensteranteilen), siehe design-system.md */
.arbeiten { --karte-fall: 86vw; --karte-stimme: 86vw; --karte-ende: 78vw; --band-luecke: var(--a-4); --band-licht: 155, 123, 245; }
.arbeiten__titel { margin-top: var(--takt-1); font-size: var(--t-titel); font-weight: 900; line-height: var(--zeile-display); letter-spacing: var(--sperrung-display); }
.arbeiten__leiste { margin-top: var(--takt-1); display: flex; flex-direction: column; gap: var(--a-6); }
.arbeiten__text { max-width: var(--mass-l); font-size: var(--t-ui); line-height: var(--zeile-mittel); color: var(--text-2); }

/* Steuerung: Zähler, Fortschritt, Pfeile */
.band__steuer { display: flex; align-items: center; gap: var(--a-3); }
.band__zaehler { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-meta); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.band__zaehler span:first-child { color: var(--weiss); }
.band__fortschritt { position: relative; display: block; flex: 1; min-width: var(--a-16); height: 1px; margin-right: var(--a-2); background: var(--linie-2); }
.band__fortschritt b { position: absolute; inset: 0; background: var(--weiss); transform-origin: left center; transform: scaleX(.1); }
.pfeil:disabled { opacity: .3; cursor: default; }
.pfeil:disabled:hover { background: var(--flaeche-1); border-color: var(--linie-3); }

/* Das Band */
.band { position: relative; margin: var(--takt-3) calc(var(--rand) * -1) 0; }
.band::before { content: ""; position: absolute; inset: -12% 0 -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 52% at 36% 46%, rgba(var(--band-licht), .13), rgba(var(--band-licht), 0) 72%); }
.band__spur { position: relative; display: flex; align-items: stretch; gap: var(--band-luecke); margin: calc(var(--a-8) * -1) 0 0; padding: var(--a-8) var(--rand) var(--a-16);
  list-style: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
  scrollbar-width: none; outline-offset: calc(var(--a-1) * -1); }
.band__spur::-webkit-scrollbar { display: none; }
.band__spur.zieht, .band__spur.faehrt, .band__spur.rad { scroll-snap-type: none; }
.band__spur.zieht { user-select: none; -webkit-user-select: none; }
.band__spur img { -webkit-user-drag: none; }

/* Karte: Licht an oder aus (--licht-an von 0 bis 1, gesetzt von arbeiten.js) */
.karte { position: relative; flex: 0 0 auto; scroll-snap-align: start; --licht-an: 1; --karte-licht: var(--band-licht); }
.karte img { filter: brightness(calc(.3 + .7 * var(--licht-an))) saturate(calc(.35 + .65 * var(--licht-an))); }
.karte :is(.fall__text, .stimme-karte, .ende__liste, .ende__label, .ende__satz, .karte--ende > .mehr) { opacity: calc(.34 + .66 * var(--licht-an)); }

/* Karte: Fall (Kundenseite mit Ergebnis) */
.karte--fall { width: var(--karte-fall); display: flex; flex-direction: column; gap: var(--a-10); }
.fall__bild { position: relative; }
.fall__bild::after { content: ""; position: absolute; left: 6%; right: 6%; top: 88%; height: 30%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 0%, rgba(var(--karte-licht), calc(.34 * var(--licht-an))), rgba(var(--karte-licht), 0) 72%); }
.fall__seite { position: relative; aspect-ratio: 2538 / 1345; border-radius: var(--r-s); overflow: hidden; background: var(--ebene-1);
  box-shadow: var(--ring), 0 24px 60px -24px rgba(var(--karte-licht), calc(.6 * var(--licht-an))); }
.fall__seite img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fall__licht { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; }
.fall__licht polyline { fill: none; stroke: var(--weiss); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: var(--glut-linie); }
.fall__handy { position: absolute; right: 5%; bottom: -16%; z-index: 3; width: 19%; aspect-ratio: 561 / 1216; padding: 1.3%; border-radius: var(--r-s); background: var(--ebene-3);
  box-shadow: var(--ring), var(--schatten); }
.fall__handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: var(--r-xs); }

.fall__text { display: flex; flex-direction: column; align-items: flex-start; }
.fall__meta { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.fall__name { margin-top: var(--a-2); font-size: var(--t-h3); font-weight: 800; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-zwischen); }
.zahl { margin-top: var(--a-6); font-size: var(--t-titel); font-weight: 900; line-height: var(--zeile-display); letter-spacing: var(--sperrung-display); white-space: nowrap;
  text-shadow: 0 0 .45em rgba(var(--karte-licht), calc(.45 * var(--licht-an))); }
.zahl__vor { font-weight: 400; letter-spacing: var(--sperrung-titel); color: var(--text-2); text-shadow: none; }

/* Balken aus Licht: nur, was das Zitat sagt */
.balken { width: 100%; max-width: var(--breite-schmal); margin-top: var(--a-5); display: flex; flex-direction: column; gap: var(--a-3); }
.balken__reihe { display: flex; flex-direction: column; gap: var(--a-2); }
.balken__name, .balken__legende { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.balken__legende { display: flex; justify-content: space-between; gap: var(--a-4); }
.balken__legende span:first-child { color: rgb(var(--karte-licht)); }
.balken__spur { position: relative; display: block; height: 2px; border-radius: var(--r-pille); background: var(--linie-1); }
.balken__licht { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pille); transform-origin: left center; }
.balken__licht--vorher { width: 50%; background: var(--linie-5); }
.balken__licht--nachher, .balken__licht--website { background: rgb(var(--karte-licht)); box-shadow: 0 0 var(--a-3) rgba(var(--karte-licht), calc(.8 * var(--licht-an))); }
.balken__licht--nachher { width: 97.5%; }
.balken__licht--website { width: 54%; }

.fall__zitat { margin-top: var(--a-6); max-width: var(--mass-l); }
.fall__zitat blockquote { margin: 0; font-size: var(--t-text); line-height: var(--zeile-mittel); color: var(--text-1); }
.fall__zitat figcaption { margin-top: var(--a-2); font-size: var(--t-klein); color: var(--text-3); }
.karte .mehr { margin-top: var(--a-5); }

/* Karte: Stimme (Google-Bewertung im Wortlaut) */
.karte--stimme { width: var(--karte-stimme); display: flex; align-items: flex-end; gap: var(--a-6); }
.karte--stimme::before { content: ""; position: absolute; inset: 0 -4% -8% 30%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 70% 62%, rgba(var(--karte-licht), calc(.16 * var(--licht-an))), rgba(var(--karte-licht), 0) 72%); }
.stimme-karte { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: var(--a-5); margin: 0; }
.sterne { display: flex; gap: var(--a-1); }
.sterne svg { width: 18px; height: 18px; fill: var(--weiss); filter: drop-shadow(0 0 6px rgba(var(--karte-licht), calc(.7 * var(--licht-an)))); }
.stimme-karte__zitat { margin: 0; font-size: var(--t-lead); font-weight: 500; line-height: var(--zeile-mittel); color: var(--weiss); max-width: var(--mass-l); }
.karte--kurz .stimme-karte__zitat { font-size: var(--t-h3); font-weight: 800; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-zwischen); }
.stimme-karte__wer { display: flex; align-items: center; gap: var(--a-3); font-size: var(--t-klein); line-height: var(--zeile-knapp); color: var(--text-3); }
.stimme-karte__wer img { flex-shrink: 0; width: var(--ziel); height: var(--ziel); border-radius: 50%; object-fit: cover; box-shadow: var(--ring); }
.stimme-karte__wer b { display: block; font-size: var(--t-ui); font-weight: 700; color: var(--weiss); }
.stimme-karte__seite { display: none; }

/* Karte: Ende (weitere Arbeiten) */
.karte--ende { width: var(--karte-ende); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--a-5); }
.ende__label { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--text-3); }
.ende__satz { max-width: 18ch; font-size: var(--t-h3); font-weight: 800; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-zwischen); }
.ende__liste { border-top: 1px solid var(--linie-2); }
.ende__liste li { border-bottom: 1px solid var(--linie-2); }
.ende__liste a { position: relative; display: flex; flex-direction: column; gap: var(--a-05); min-height: var(--ziel); padding: var(--a-4) var(--a-8) var(--a-4) 0; text-decoration: none; }
.ende__liste a::after { content: ""; position: absolute; right: var(--a-1); top: 50%; width: 12px; height: 12px; margin-top: -6px; background: currentColor; transform: rotate(-45deg);
  -webkit-mask: var(--pfeil-zeichen) center / contain no-repeat;
          mask: var(--pfeil-zeichen) center / contain no-repeat;
  opacity: .5; transition: opacity var(--dauer-1), transform var(--dauer-2) var(--weich); }
.ende__liste a:hover::after { opacity: 1; }
.ende__liste b { font-size: var(--t-lead); font-weight: 700; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-ui); transition: color var(--dauer-1); }
.ende__liste a:hover b { color: var(--mint); }
.ende__liste span { font-size: var(--t-klein); color: var(--text-3); }

/* Der Zeiger „Ziehen“ (nur mit Maus) */
.band__zeiger { position: absolute; left: 0; top: 0; z-index: 6; margin: 0; pointer-events: none; }
.band__zeiger span { display: grid; place-items: center; width: var(--a-20); height: var(--a-20); margin: calc(var(--a-10) * -1) 0 0 calc(var(--a-10) * -1); border-radius: 50%;
  background: var(--flaeche-2); border: 1px solid var(--linie-3); -webkit-backdrop-filter: var(--glas); backdrop-filter: var(--glas);
  font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--weiss);
  opacity: 0; transform: scale(.5); transition: opacity var(--dauer-1), transform var(--dauer-2) var(--weich); }
.band__zeiger.is-an span { opacity: 1; transform: scale(1); }
.band__spur.zieht ~ .band__zeiger span { transform: scale(.82); }
.band--zeiger .band__spur { cursor: none; }
.band--zeiger .band__spur :is(a, button) { cursor: pointer; }

@media (min-width: 821px) {
  .arbeiten { --karte-fall: min(76vw, 1320px); --karte-stimme: min(42vw, 700px); --karte-ende: 100%; --band-luecke: 5vw; }
  .karte--ende { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); grid-template-rows: auto 1fr auto; column-gap: 6vw; row-gap: var(--a-6); align-items: end; }
  .ende__label { grid-column: 1; grid-row: 1; align-self: start; }
  .ende__satz { grid-column: 1; grid-row: 2; }
  .ende__liste { grid-column: 2; grid-row: 1 / -1; }
  .karte--ende > .mehr { grid-column: 1; grid-row: 3; justify-self: start; }
  .ende__liste a { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--a-6); padding: var(--a-6) var(--a-10) var(--a-6) 0; }
  .ende__liste b { font-size: var(--t-h3); }
  .arbeiten__leiste { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--a-12); }
  .arbeiten__text { font-size: var(--t-text); }
  .band__steuer { flex: 0 0 min(30vw, 440px); }
  .band { margin-top: var(--takt-4); }
  .karte--fall { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 4vw; align-items: center; }
  .fall__seite { border-radius: var(--r-m); }
  .fall__handy { right: -3%; bottom: -14%; width: 18%; border-radius: var(--r-m); }
  .fall__handy img { border-radius: var(--r-s); }
  .zahl { margin-top: var(--a-8); font-size: var(--t-held); }
  .stimme-karte__seite { display: block; flex-shrink: 0; width: clamp(96px, 9vw, 150px); aspect-ratio: 561 / 1216; border-radius: var(--r-m); overflow: hidden; background: var(--ebene-1);
    box-shadow: var(--ring), 0 24px 60px -20px rgba(var(--karte-licht), calc(.55 * var(--licht-an))); }
  .stimme-karte__seite img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
}

/* ==========================================================================
   Szene 6: Abschluss. Wer dahintersteht, dann: Wie heißt deine Firma?
   Der eigene Name erscheint auf der leeren Seite vom Anfang, die sich beim Tippen aufbaut.
   ========================================================================== */
/* Philip */
.philip__bild { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  -webkit-mask-image: radial-gradient(82% 74% at 50% 40%, #000 52%, transparent 100%); mask-image: radial-gradient(82% 74% at 50% 40%, #000 52%, transparent 100%); }
.philip__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(.9) saturate(.92); }
.philip__licht { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; }
.philip__licht polyline { fill: none; stroke: var(--weiss); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: var(--glut-linie); }
.philip__text { margin-top: var(--takt-3); }
.philip__zitat { margin-top: var(--takt-1); font-size: var(--t-held); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel); }
.philip__name { margin-top: var(--a-6); font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-3); }
.philip__name b { display: block; font-weight: 700; color: var(--weiss); }
.philip .mehr { margin-top: var(--takt-2); }

/* Wie heißt deine Firma? */
.abschluss { --leer-b: 76vw; --leer-seite: 561 / 900; text-align: center; }
.abschluss__titel { margin-top: var(--takt-1); font-size: var(--t-display); font-weight: 900; line-height: var(--zeile-display); letter-spacing: var(--sperrung-display); }
.deine { width: var(--leer-b); margin: var(--takt-3) auto 0; text-align: left; }
/* Das Feld: ein Kasten wie das lange Feld im Kontaktformular, darüber „Hier eintippen“. Das ganze Feld ist die Eingabe. */
.deine__tipp { font-size: var(--t-ui); font-weight: 500; line-height: var(--zeile-knapp); color: var(--text-2); }
.deine__zeile { position: relative; display: flex; margin-top: var(--a-2); border: 1px solid var(--linie-3); border-radius: var(--r-m); background: var(--flaeche-1);
  transition: border-color var(--dauer-1), box-shadow var(--dauer-1), background-color var(--dauer-1); }
.deine__zeile:hover { border-color: var(--linie-5); background: var(--flaeche-2); }
.deine__zeile:focus-within { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint); background: var(--flaeche-1); }
.deine__eingabe { flex: 1; min-width: 0; min-height: var(--ziel); padding: var(--a-3) var(--a-5); border: 0; border-radius: var(--r-m); background: transparent; color: var(--weiss); outline: none;
  font: inherit; font-size: var(--t-h3); font-weight: 800; letter-spacing: var(--sperrung-zwischen); caret-color: var(--mint); }
.deine__eingabe::placeholder { color: var(--text-3); opacity: 1; }
/* Vorführung: Solange niemand tippt, tippt sich „Deine Firma“ ins Feld, mit demselben Mint-Cursor wie auf der Seite darunter.
   Liegt genau über dem Feld (gleiche Schrift und Innenabstände), der Platzhalter ist dann unsichtbar. Klicks gehen durch ins Feld. */
.deine__beispiel { position: absolute; inset: 0; display: none; align-items: center; padding: var(--a-3) var(--a-5); pointer-events: none; overflow: hidden;
  font-size: var(--t-h3); font-weight: 800; letter-spacing: var(--sperrung-zwischen); color: var(--text-3); white-space: pre; }
.deine__beispiel > span::after { content: ""; display: inline-block; width: .09em; height: .78em; margin-left: .06em; vertical-align: -.04em; border-radius: var(--r-pille);
  background: var(--mint); animation: blinken 1.1s steps(1) infinite; }
.zeigt-beispiel .deine__beispiel { display: flex; }
.zeigt-beispiel .deine__eingabe::placeholder { color: transparent; }
.deine__hinweis { margin-top: var(--a-4); font-size: var(--t-klein); color: var(--text-3); }

/* Die leere Seite, wie die Textur in raum.js (Szene 1).
   AUSNAHME: eigene Grautöne und Maße in Anteilen der Seite, damit sie der Textur gleicht. */
.leer { position: relative; margin-top: var(--a-6); --licht-an: 0;
  --leer-1: #141419; --leer-2: #0D0D10; --leer-balken: #27272F; --leer-logo: #2A2A31; --leer-nav: #24242A; --leer-knopf: #3A3A43; --leer-zeile: #1F1F25;
  --leer-cta: #40404A; --leer-bildrand: #383841; --leer-kreuz: #27272E; --leer-karte: #16161B; --leer-kartenrand: #222229; }
.leer__seite { position: relative; aspect-ratio: var(--leer-seite); border-radius: var(--r-l); overflow: hidden; container-type: inline-size;
  background: linear-gradient(var(--leer-1), var(--leer-2));
  box-shadow: var(--ring), 0 40px 120px -40px rgba(var(--licht-leer), calc(.3 + .45 * var(--licht-an))); transition: box-shadow var(--dauer-3) ease; }
.leer__seite > i, .leer__titel { position: absolute; display: block; }
/* Geht das Licht an (--licht-an von 0 bis 1, abschluss.js), bekommt die Seite Farbe: Logo, Menüpunkt, Bild und Karten im Violett von Valoora,
   die Knöpfe in Mint (Handlung). Aus dem Gerüst wird eine Website. Die Grautöne bleiben die der Textur, die Farben kommen aus --licht-leer,
   --licht-violett und --licht-mint. */
.leer__logo { left: 4.28%; top: 4%; width: 19.61%; height: 2.22%; border-radius: .9cqw; background: color-mix(in srgb, var(--leer-logo), rgb(var(--licht-leer)) calc(85% * var(--licht-an))); }
.leer__seite > .leer__nav { left: 87.88%; top: 4%; width: 7.84%; height: 2.44%; display: flex; flex-direction: column; justify-content: space-between; }
.leer__nav b { display: block; height: 18%; border-radius: var(--r-pille); background: color-mix(in srgb, var(--leer-nav), var(--weiss) calc(45% * var(--licht-an))); }
.leer__seite > .leer__knopf, .leer__seite > .leer__karte { display: none; }
.leer__titel { left: 4.28%; top: 16.67%; width: 78.43%; height: 17.78%; }
.leer__balken { position: absolute; left: 0; top: 0; width: 100%; height: 27.5%; border-radius: 1.4cqw; background: var(--leer-balken); transition: opacity var(--dauer-2) ease; }
.leer__balken:nth-child(2) { top: 36.25%; width: 81.82%; }
.leer__balken:nth-child(3) { top: 72.5%; width: 52.27%; }
.leer__balken:nth-child(3)::after { content: ""; position: absolute; left: calc(100% + 3.48%); top: 0; width: 1.74%; height: 100%; border-radius: var(--r-pille); background: var(--mint); animation: blinken 1.1s steps(1) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.leer__name { position: absolute; inset: 0; margin: 0; overflow: hidden; font-size: 8.2cqw; font-weight: 900; line-height: 1.12; letter-spacing: var(--sperrung-titel); color: var(--weiss);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; opacity: 0;
  text-shadow: 0 0 .5em rgba(var(--licht-leer), calc(.55 * var(--licht-an))); }
.leer__name::after { content: ""; display: inline-block; width: .09em; height: .78em; margin-left: .08em; vertical-align: -.04em; border-radius: var(--r-pille); background: var(--mint); animation: blinken 1.1s steps(1) infinite; }
.leer.hat-name .leer__balken { opacity: 0; }
.leer.hat-name .leer__name { opacity: 1; }
/* Während der Vorführung steht der Beispielname grau auf der Seite, der eigene Name weiß */
.zeigt-beispiel .leer__name { color: var(--text-3); text-shadow: none; }
/* Aufbau (nur mit JavaScript und Bewegung): Die Seite fängt fast leer an (Logo und Titel).
   Jeder getippte Buchstabe baut ein Stück dazu, in der Reihenfolge von data-aufbau. Geht das Licht an, ist alles da. */
.leer--baut [data-aufbau] { opacity: 0; translate: 0 1.2cqw; transition: opacity var(--dauer-2) ease, translate var(--dauer-2) var(--weich); }
.leer--baut [data-aufbau].ist-da { opacity: 1; translate: 0 0; }
.leer__zeile { left: 4.28%; height: 1.33%; border-radius: var(--r-pille); background: color-mix(in srgb, var(--leer-zeile), var(--weiss) calc(12% * var(--licht-an))); }
.leer__zeile:nth-of-type(4) { top: 37.33%; width: 74.87%; }
.leer__zeile:nth-of-type(5) { top: 40%; width: 58.82%; }
.leer__cta { left: 4.28%; top: 44.44%; width: 32.09%; height: 5.33%; border: 1px solid color-mix(in srgb, var(--leer-cta), rgb(var(--licht-mint)) calc(100% * var(--licht-an))); border-radius: var(--r-pille);
  background: rgba(var(--licht-mint), calc(.92 * var(--licht-an))); box-shadow: 0 0 calc(5cqw * var(--licht-an)) rgba(var(--licht-mint), calc(.35 * var(--licht-an))); }
.leer__bild { left: 4.28%; top: 54.44%; width: 91.44%; height: 44.44%; overflow: hidden; border: 1px dashed color-mix(in srgb, var(--leer-bildrand), transparent calc(100% * var(--licht-an))); border-radius: 2.9cqw;
  background: radial-gradient(70% 80% at 72% 22%, rgba(var(--licht-leer), calc(.55 * var(--licht-an))), rgba(var(--licht-leer), 0) 70%),
    linear-gradient(160deg, rgba(var(--licht-violett), calc(.38 * var(--licht-an))), rgba(var(--licht-violett), calc(.06 * var(--licht-an)))); }
.leer__bild::before, .leer__bild::after { content: ""; position: absolute; left: 50%; top: 50%; width: 126.8%; height: 1px; background: var(--leer-kreuz); opacity: calc(1 - var(--licht-an)); }
.leer__bild::before { transform: translate(-50%, -50%) rotate(37.95deg); }
.leer__bild::after { transform: translate(-50%, -50%) rotate(-37.95deg); }
.leer__glanz { inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dauer-3) ease;
  background: radial-gradient(90% 70% at 28% 30%, rgba(var(--licht-leer), .2), rgba(var(--licht-leer), 0) 70%); }
.leer.ist-an .leer__glanz { opacity: 1; }
.leer__licht { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; opacity: 0; }
.leer__licht polyline { fill: none; stroke: var(--weiss); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: var(--glut-linie); }
.leer__v { position: absolute; left: 50%; top: -9%; z-index: 4; width: var(--a-20); height: auto; margin-left: calc(var(--a-20) / -2); overflow: visible; opacity: 0; pointer-events: none; filter: var(--glut-v); }
.leer__v path { fill: none; stroke: var(--weiss); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* Die Anfrage */
.anfrage { margin: var(--takt-5) auto 0; max-width: var(--breite-text); display: flex; flex-direction: column; align-items: center; }
.anfrage__titel { max-width: 18ch; font-size: var(--t-held); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel); text-wrap: balance; overflow-wrap: anywhere; }
.anfrage__text { margin-top: var(--a-5); max-width: var(--mass-m); font-size: var(--t-text); line-height: var(--zeile-mittel); color: var(--text-2); }
/* Zwei Wege als Knöpfe (Kennenlernen buchen, Gespräch anfragen; die Haupthandlung in Mint), darunter Philip mit den direkten Wegen */
.anfrage__wege { margin-top: var(--a-8); display: flex; flex-direction: column; align-items: center; gap: var(--a-6); }
.anfrage__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-3); }
.knopf--mint { position: relative; background: var(--mint); color: var(--tinte); gap: var(--a-3); padding: 0 var(--a-6); }
/* Schein beim Hinzeigen: liegt fertig auf ::after und wird nur eingeblendet (Philip, 04.10.2026). Vorher wuchs der Abstand im
   Knopf, der Text rückte dabei zur Seite, und auf dem Handy blieb der Zustand nach dem Tippen stehen. */
.knopf--mint::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 10px 40px -8px var(--schein-mint); opacity: 0; transition: opacity var(--dauer-1) ease; }
.anfrage__philip { display: flex; align-items: center; gap: var(--a-3); text-align: left; font-size: var(--t-klein); line-height: var(--zeile-knapp); color: var(--text-2); }
.anfrage__philip img { flex-shrink: 0; width: var(--ziel); height: var(--ziel); border-radius: 50%; object-fit: cover; box-shadow: var(--ring); }
.anfrage__philip .direkt { margin-top: var(--a-05); }
.anfrage__philip a { color: var(--weiss); }

@media (min-width: 821px) {
  .philip { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--spalten-luecke); align-items: center; }
  .philip__text { margin-top: 0; }
  .abschluss { --leer-b: min(64vw, 1180px); --leer-seite: 1887 / 1000; }
  .leer__logo { left: 3.39%; top: 4%; width: 7.95%; height: 2.6%; border-radius: .32cqw; }
  .leer__seite > .leer__nav { left: 64.12%; top: 4.7%; width: 16.96%; height: 1.2%; flex-direction: row; }
  .leer__nav b { width: 26.25%; height: 100%; }
  .leer__seite > .leer__knopf { display: block; left: 86.38%; top: 3%; width: 10.07%; height: 4.8%; border: 1px solid color-mix(in srgb, var(--leer-knopf), rgb(var(--licht-mint)) calc(80% * var(--licht-an)));
    border-radius: var(--r-pille); background: rgba(var(--licht-mint), calc(.18 * var(--licht-an))); }
  .leer__nav b:first-child { background: color-mix(in srgb, var(--leer-nav), rgb(var(--licht-leer)) calc(90% * var(--licht-an))); }
  .leer__titel { left: 3.39%; top: 25%; width: 41.33%; height: 25%; }
  .leer__balken { height: 26.4%; border-radius: .53cqw; }
  .leer__balken:nth-child(2) { top: 36.8%; width: 83.33%; }
  .leer__balken:nth-child(3) { top: 73.6%; width: 55.13%; }
  .leer__balken:nth-child(3)::after { left: calc(100% + 3.26%); width: 1.4%; }
  .leer__name { font-size: 3.95cqw; }
  .leer__zeile:nth-of-type(4) { left: 3.39%; top: 54.8%; width: 29.68%; height: 1.6%; }
  .leer__zeile:nth-of-type(5) { left: 3.39%; top: 58%; width: 24.91%; height: 1.6%; }
  .leer__cta { left: 3.39%; top: 64%; width: 12.19%; height: 6%; }
  .leer__bild { left: 53.52%; top: 20%; width: 43.03%; height: 53%; border-radius: .95cqw; }
  .leer__bild::before, .leer__bild::after { width: 119.4%; }
  .leer__bild::before { transform: translate(-50%, -50%) rotate(33.1deg); }
  .leer__bild::after { transform: translate(-50%, -50%) rotate(-33.1deg); }
  .leer__seite > .leer__karte { display: block; top: 80%; width: 29.68%; height: 16%; border: 1px solid color-mix(in srgb, var(--leer-kartenrand), rgb(var(--licht-leer)) calc(30% * var(--licht-an))); border-radius: .85cqw;
    background: linear-gradient(rgba(var(--licht-violett), calc(.2 * var(--licht-an))), rgba(var(--licht-violett), 0) 70%), var(--leer-karte); }
  .leer__karte:nth-of-type(8) { left: 3.39%; }
  .leer__karte:nth-of-type(9) { left: 35.08%; }
  .leer__karte:nth-of-type(10) { left: 66.77%; }
}

/* ==========================================================================
   Kontakt (Unterseite): links wer schreibt und was dann passiert, rechts das Formular.
   Auf dem Handy: Text, Formular, dann der Ablauf. Nach dem Senden zieht das
   V-Licht über das Formular, dahinter steht der Dank.
   ========================================================================== */
.kontakt__titel { margin-top: var(--takt-1); font-size: var(--t-held); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel);
  text-wrap: balance; overflow-wrap: anywhere; }
/* Die Firma im Titel: ohne Namen eine leere Stelle, mit Namen im Licht (wie die leere Seite auf der Startseite) */
.kontakt__firma { color: var(--text-3); transition: color var(--dauer-3) ease, text-shadow var(--dauer-3) ease; }
.kontakt__firma.ist-an { color: var(--weiss); text-shadow: var(--glut-name); }
.kontakt__einleitung { margin-top: var(--takt-2); max-width: var(--mass-s); font-size: var(--t-lead); line-height: var(--zeile-mittel); color: var(--text-2); }

/* Person: rundes Foto, Name, Rolle */
.person { display: flex; align-items: center; gap: var(--a-4); margin-top: var(--takt-3); }
.person__bild { flex-shrink: 0; width: var(--a-16); height: var(--a-16); border-radius: 50%; object-fit: cover; box-shadow: var(--ring); }
.person__name { font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-3); }
.person__name b { display: block; font-weight: 700; color: var(--weiss); }

.kontakt__formular { position: relative; display: grid; margin-top: var(--takt-4); }
.kontakt__formular > .formular, .kontakt__formular > .danke { grid-area: 1 / 1; }
.kontakt__licht { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; opacity: 0; }
.kontakt__licht polyline { fill: none; stroke: var(--weiss); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: var(--glut-linie); }

/* Formular */
.formular { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--a-6); scroll-margin-top: calc(var(--kopf) + var(--a-6)); }
.formular[hidden], .danke[hidden] { display: none; }
.formular__falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.formfeld { display: flex; flex-direction: column; min-width: 0; }
.formfeld__label { font-size: var(--t-ui); font-weight: 500; line-height: var(--zeile-knapp); color: var(--text-2); }
.formfeld__pflicht { color: var(--mint); }
.formfeld__eingabe { width: 100%; min-height: var(--ziel); margin: 0; padding: var(--a-2) 0; border: 0; border-bottom: 1px solid var(--linie-3); border-radius: 0; background: transparent;
  color: var(--weiss); font: inherit; font-size: var(--t-lead); font-weight: 600; letter-spacing: var(--sperrung-ui); caret-color: var(--mint); outline: none;
  transition: border-color var(--dauer-1), box-shadow var(--dauer-1); }
.formfeld__eingabe::placeholder { color: var(--text-3); opacity: 1; }
.formfeld__eingabe:hover { border-color: var(--linie-5); }
.formfeld__eingabe:focus { border-color: var(--mint); box-shadow: 0 1px 0 var(--mint); }
/* Autofill ohne hellen Kasten */
.formfeld__eingabe:-webkit-autofill { -webkit-text-fill-color: var(--weiss); box-shadow: inset 0 0 0 100px var(--ebene-1); caret-color: var(--mint); }
.formfeld__eingabe:-webkit-autofill:focus { box-shadow: inset 0 0 0 100px var(--ebene-1), 0 1px 0 var(--mint); }
/* Das lange Feld: ein Kasten zum Schreiben, wächst mit */
.formfeld--text .formfeld__eingabe { margin-top: var(--a-3); padding: var(--a-3) var(--a-4); border: 1px solid var(--linie-3); border-radius: var(--r-m); background: var(--flaeche-1);
  font-size: var(--t-text); font-weight: 500; line-height: var(--zeile-mittel); letter-spacing: 0; resize: vertical;
  field-sizing: content; min-height: calc(6lh + 2 * var(--a-3)); max-height: 60svh; }
.formfeld--text .formfeld__eingabe:focus { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint); }
.formfeld__fehler { margin-top: var(--a-2); font-size: var(--t-klein); line-height: var(--zeile-knapp); color: var(--bernstein); }
.formfeld__fehler:empty { display: none; }
.formfeld.hat-fehler .formfeld__eingabe { border-color: var(--bernstein); }
.formfeld.hat-fehler .formfeld__eingabe:focus { box-shadow: 0 1px 0 var(--bernstein); }
.formfeld--text.hat-fehler .formfeld__eingabe:focus { box-shadow: 0 0 0 1px var(--bernstein); }
.formular__klein { font-size: var(--t-klein); line-height: var(--zeile-knapp); color: var(--text-3); }
.formular__klein a, .formular__status a { color: var(--text-1); text-decoration-color: var(--linie-4); text-underline-offset: .2em; }
.formular__klein a:hover, .formular__status a:hover { color: var(--weiss); text-decoration-color: var(--mint); }
.formular__ende { display: flex; flex-direction: column; align-items: stretch; }
.formular__ende .knopf { transition: background-color var(--dauer-1) var(--weich), transform var(--dauer-0) var(--weich), opacity var(--dauer-1); }
.formular__ende .knopf[aria-disabled="true"] { opacity: .6; cursor: progress; }
.formular__status { margin-top: var(--a-4); font-size: var(--t-klein); line-height: var(--zeile-knapp); color: var(--text-2); }
.formular__status:empty { margin-top: 0; }

/* Danke */
.danke__titel { margin-top: var(--takt-1); font-size: var(--t-held); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel); overflow-wrap: anywhere; }
.danke__titel:focus { outline: none; }
.danke__text { margin-top: var(--takt-2); max-width: var(--mass-s); font-size: var(--t-lead); line-height: var(--zeile-mittel); color: var(--text-2); }
.danke .mehr { margin-top: var(--takt-3); }

/* Wie es weitergeht, und die direkten Wege */
.kontakt__mehr { margin-top: var(--takt-5); }
.ablauf { margin: 0; padding: 0; list-style: none; max-width: var(--mass-l); }
.ablauf li { display: grid; grid-template-columns: var(--a-10) minmax(0, 1fr); align-items: baseline; padding: var(--a-4) 0; border-top: 1px solid var(--linie-2);
  font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-2); }
.ablauf li:last-child { border-bottom: 1px solid var(--linie-2); }
.wege { display: flex; flex-wrap: wrap; gap: var(--a-6) var(--a-12); margin-top: var(--takt-3); font-size: var(--t-ui); line-height: var(--zeile-knapp); }
.wege li { display: flex; flex-direction: column; gap: var(--a-1); }
.wege__art { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.wege a { text-decoration-color: var(--linie-4); text-underline-offset: .2em; }
.wege a:hover { text-decoration-color: var(--mint); }
/* Schnelle Wege oben: Anrufen und WhatsApp (Terminbuchung seit 30.09.2026 zurückgestellt) */
.schnell { margin-top: var(--takt-3); }
.schnell__titel { font-size: var(--t-ui); font-weight: 500; line-height: var(--zeile-knapp); color: var(--text-2); }
.schnell__wege { display: flex; flex-wrap: wrap; gap: var(--a-3); margin: var(--a-3) 0 0; padding: 0; list-style: none; }

@media (min-width: 821px) {
  .kontakt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "text formular" "mehr formular";
    column-gap: var(--spalten-luecke); align-items: start; }
  .kontakt__text { grid-area: text; }
  .kontakt__formular { grid-area: formular; justify-self: end; width: 100%; max-width: var(--breite-text); margin-top: 0; }
  .kontakt__mehr { grid-area: mehr; margin-top: var(--takt-4); }
  .formular { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-8); }
  .formular > * { grid-column: 1 / -1; }
  .formular > .formfeld--halb { grid-column: auto; }
  .formular__ende { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--a-6); }
  .formular__status { flex: 1 1 var(--breite-schmal); margin-top: 0; }
  .formular__ende .formular__status:not(:empty) { padding-block: var(--a-2); }
}

/* ==========================================================================
   Licht von Valoora: im Kopf der Unterseiten (Leistungen, Arbeiten, Kontakt, Über uns, Rechtliches)
   zwei ruhige violette Lichtflächen hinter dem ersten Abschnitt, angelehnt an die Farbflächen
   im Kopf der bisherigen Seite. Sie scrollen mit dem Seitenkopf weg (seit 04.10.2026 wieder, Philip).
   Auf Arbeiten nimmt darunter das Raumlicht die Farbe der Projekte an, die Fallstudien stehen ganz im
   Licht ihres Kunden.
   ========================================================================== */
.abschnitt--licht { isolation: isolate; }
.abschnitt--licht::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: min(120%, 100svh); pointer-events: none;
  background: radial-gradient(45% 55% at 12% 30%, rgba(var(--licht-violett), .24), rgba(var(--licht-violett), 0) 70%),
              radial-gradient(38% 48% at 80% 8%, rgba(var(--licht-leer), .14), rgba(var(--licht-leer), 0) 72%);
  animation: licht-treiben 28s ease-in-out infinite alternate; }
@keyframes licht-treiben { to { transform: translate3d(3%, 4%, 0) scale(1.06); } }

/* ==========================================================================
   Unterseiten: gemeinsame Bauteile
   Seitenkopf (Label, H1, Einleitung), Abschnitt in zwei Spalten (Titel links, klebt
   auf dem Desktop; Inhalt rechts), Abschnittstitel, Hinweis, Liste mit V-Haken,
   nächster Schritt am Ende jeder Seite.
   ========================================================================== */
.seitenkopf__titel { margin-top: var(--takt-1); font-size: var(--t-held); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel); }
.seitenkopf__text { margin-top: var(--takt-2); max-width: var(--mass-s); font-size: var(--t-lead); line-height: var(--zeile-mittel); color: var(--text-2); }
.abschnitt__titel { margin-top: var(--takt-1); font-size: var(--t-titel); font-weight: 900; line-height: var(--zeile-display); letter-spacing: var(--sperrung-display); }
.abschnitt--zweispaltig .abschnitt__inhalt { margin-top: var(--takt-4); }
.hinweis { margin-top: var(--a-5); max-width: var(--mass-m); padding-left: var(--a-4); border-left: 2px solid var(--mint-rand-leise);
  font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-1); }
/* Liste mit kleinen V-Haken (das V aus dem Logo) */
.v-liste { display: grid; gap: var(--a-3); max-width: var(--mass-l); margin-top: var(--a-4); }
.v-liste li { position: relative; padding-left: var(--a-8); font-size: var(--t-text); line-height: var(--zeile-mittel); color: var(--text-1); }
.v-liste li::before { content: ""; position: absolute; left: 0; top: .4em; width: 14px; height: 12px; background: var(--violett-hell); filter: var(--glut-haken);
  -webkit-mask: var(--v-zeichen) center / contain no-repeat;
          mask: var(--v-zeichen) center / contain no-repeat; }
/* Nächster Schritt: das Anfrage-Bauteil vom Ende der Startseite */
.naechster { text-align: center; }
.naechster .anfrage { margin-top: 0; }
@media (min-width: 821px) {
  .abschnitt--zweispaltig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--spalten-luecke); align-items: start; }
  .abschnitt--zweispaltig .abschnitt__kopf { position: sticky; top: calc(var(--kopf) + var(--takt-4)); }
  .abschnitt--zweispaltig .abschnitt__inhalt { margin-top: 0; }
}

/* ==========================================================================
   Leistungen (Unterseite)
   Oben die drei Leistungen (Webdesign und Texte, SEO und KI-Sichtbarkeit, Automatisierung),
   einzeln oder zusammen buchbar. Sie stehen auf dem Fundament „Immer dabei“ (Analyse,
   SEO und KI-Optimierung, ein Ansprechpartner). Die Analyse ist keine Leistung, sondern der
   Grundstein: Sie steht im Fundament und im Ablauf. Der Markenname steht klein über dem
   Fachbegriff. Dann jede Leistung mit Text, einem Beleg auf der Bühne, dem, was man bekommt,
   und einem Punkt „Auf Wunsch“. Danach der Ablauf im V (nummeriert ist nur er), die Betreuung
   nach dem Start (drei Pakete auf dem Fundament Hosting), Zusätzliches, Fragen, Anfrage.
   V-Geometrie (Anteile): Start 10 %/10 %, Grund 48 %/90 %, Ende 86 %/10 %.
   ========================================================================== */

/* ---------- Das V als Weg (Bauteil, in zwei Größen) ----------
   Sieben Stationen, als Anteil des Wegs: 0 Kennenlernen, ¼ Analyse, ½ Erkenntnis (der Grund),
   ⅝ Angebot, ¾ Entwürfe, ⅞ Umsetzung, 1 Livegang. Danach läuft das Licht oben hinaus (Betreuung). */
.vweg { position: relative; display: block; flex-shrink: 0; aspect-ratio: 1; }
.vweg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vweg__weg, .vweg__spur, .vweg__licht { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.vweg__weg { stroke: var(--linie-3); stroke-width: 1.5; }
.vweg__spur { stroke: var(--linie-2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.vweg__licht { stroke: var(--weiss); stroke-width: 2.2; filter: var(--glut-linie); }
.vweg__punkt, .vweg__kopf { position: absolute; border-radius: 50%; pointer-events: none; }
.vweg__punkt { --p: var(--a-3); width: var(--p); height: var(--p); margin: calc(var(--p) / -2) 0 0 calc(var(--p) / -2); background: var(--nacht); box-shadow: inset 0 0 0 1.5px var(--linie-4);
  transition: background-color var(--dauer-2) ease, box-shadow var(--dauer-2) ease; }
.vweg__punkt.ist-an { background: var(--mint); box-shadow: var(--schein-punkt); }
.vweg__punkt--1, .vweg__nr--1 { left: 10%; top: 10%; }
.vweg__punkt--2, .vweg__nr--2 { left: 29%; top: 50%; }
.vweg__punkt--3, .vweg__nr--3 { left: 48%; top: 90%; }
.vweg__punkt--4, .vweg__nr--4 { left: 57.5%; top: 70%; }
.vweg__punkt--5, .vweg__nr--5 { left: 67%; top: 50%; }
.vweg__punkt--6, .vweg__nr--6 { left: 76.5%; top: 30%; }
.vweg__punkt--7, .vweg__nr--7 { left: 86%; top: 10%; }
.vweg__kopf { --p: var(--a-2); left: 10%; top: 10%; z-index: 2; width: var(--p); height: var(--p); margin: calc(var(--p) / -2) 0 0 calc(var(--p) / -2);
  background: var(--weiss); box-shadow: var(--schein-kopf); opacity: 0; }
/* Groß im Ablauf (Desktop): Nummern an den Stationen, links hinab links vom Punkt, am Grund darunter, rechts hinauf rechts davon */
.vweg--ablauf { width: min(100%, calc(var(--a-20) * 5), 50svh); }
.vweg--ablauf .vweg__weg, .vweg--ablauf .vweg__spur { stroke-width: 2; }
.vweg--ablauf .vweg__licht { stroke-width: 3; }
.vweg--ablauf .vweg__kopf { --p: var(--a-3); }
.vweg__nr { position: absolute; font-size: var(--t-label); font-weight: 700; line-height: 1; letter-spacing: var(--sperrung-meta); color: var(--text-3);
  transform: translate(var(--a-4), -50%); transition: color var(--dauer-2) ease; }
.vweg__nr--1, .vweg__nr--2 { transform: translate(calc(-100% - var(--a-4)), -50%); }
.vweg__nr--3 { transform: translate(-50%, var(--a-4)); }
.vweg__nr.ist-an { color: var(--violett-hell); }
/* Klein am Schritt (Handy): das Licht läuft bis zur eigenen Station, nur ihr Punkt ist da */
.vweg--schritt { width: var(--ziel); }
.vweg--schritt .vweg__licht { stroke-width: 2; }
.vweg--schritt .vweg__punkt { --p: var(--a-2); background: var(--mint); box-shadow: var(--schein-punkt); }

/* ---------- Seitenkopf mit Übersicht: die drei Leistungen auf dem Fundament ---------- */
.uebersicht { margin-top: var(--takt-4); }
.uebersicht__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--a-2); }
.uebersicht__punkt a { display: flex; flex-direction: column; gap: var(--a-05); padding: var(--a-3) 0 var(--a-2); border-top: 1px solid var(--linie-2); text-decoration: none;
  transition: border-color var(--dauer-2) ease; }
.uebersicht__punkt.ist-an a { border-top-color: var(--mint-rand); }
.uebersicht__marke { margin-bottom: var(--a-05); } /* Markenname über dem Fachbegriff, Aussehen von .label */
.uebersicht__name { font-size: var(--t-lead); font-weight: 700; line-height: var(--zeile-knapp); letter-spacing: var(--sperrung-ui); color: var(--weiss); }
.uebersicht__satz { font-size: var(--t-klein); line-height: var(--zeile-knapp); color: var(--text-3); transition: color var(--dauer-2) ease; }
.uebersicht__punkt a:hover .uebersicht__satz, .uebersicht__punkt.ist-an .uebersicht__satz { color: var(--text-1); }

/* ---------- Fundament: was immer dabei ist ----------
   Eine Linie, darauf stehen die Leistungen (Seitenkopf) oder die Pakete (Betreuung). Sie geht zuerst an,
   dann alles darauf zugleich (.ist-an an den Teilen mit data-auf-fundament). */
.fundament { position: relative; margin-top: var(--a-8); padding-top: var(--a-5); }
.fundament::before, .fundament__licht { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: var(--r-pille); }
.fundament::before { background: var(--linie-2); }
.fundament__licht { display: block; background: var(--mint); filter: var(--glut-mint-linie); transform-origin: left center; }
.fundament__liste { display: grid; gap: var(--a-2); margin: var(--a-3) 0 0; padding: 0; list-style: none; }
.fundament__liste li { position: relative; max-width: var(--breite-text); padding-left: var(--a-6); font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-2); }
.fundament__liste li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 12px; background: var(--violett-hell); filter: var(--glut-haken);
  -webkit-mask: var(--v-zeichen) center / contain no-repeat;
          mask: var(--v-zeichen) center / contain no-repeat; }
.fundament__liste b { font-weight: 700; color: var(--weiss); }
.fundament__liste a { color: inherit; text-decoration-color: var(--linie-4); text-underline-offset: .2em; }
.fundament__liste a:hover { text-decoration-color: var(--mint); }
/* Ohne JavaScript steht alles auf dem Fundament gleich im Licht (sonst setzt leistungen.js .ist-an) */
:root:not(.js) .uebersicht__punkt a { border-top-color: var(--mint-rand); }
:root:not(.js) .paket::before { opacity: 1; }

/* ---------- Mitlaufende Leiste: drei Punkte, die aktuelle Leistung ---------- */
.schrittleiste { position: fixed; left: 50%; top: calc(var(--kopf) + var(--a-3)); z-index: 70; display: flex; align-items: center; gap: var(--a-3);
  padding: var(--a-2) var(--a-5) var(--a-2) var(--a-4); border-radius: var(--r-pille); background: var(--schleier-3); border: 1px solid var(--linie-2);
  -webkit-backdrop-filter: var(--glas); backdrop-filter: var(--glas); opacity: 0; pointer-events: none; transform: translate(-50%, calc(var(--a-2) * -1));
  transition: opacity var(--dauer-2) ease, transform var(--dauer-2) var(--weich), top var(--dauer-2) var(--weich); }
.schrittleiste.ist-da { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
body:has(.kopf--weg) .schrittleiste { top: var(--a-3); }
body.menue-offen .schrittleiste { opacity: 0; pointer-events: none; }
.schrittleiste__punkte { display: flex; gap: var(--a-1); }
.schrittleiste__punkte i { --p: calc(var(--a-1) * 1.5); width: var(--p); height: var(--p); border-radius: 50%; background: var(--linie-4); transition: background-color var(--dauer-2) ease; }
.schrittleiste__punkte i.ist-an { background: var(--mint); }
.schrittleiste__links { display: none; }
.schrittleiste__jetzt { font-size: var(--t-klein); font-weight: 700; white-space: nowrap; color: var(--weiss); }

/* ---------- Die Leistungen (Klassen heißen noch .schritt) ---------- */
.schritte { position: relative; }
.schritt { scroll-margin-top: calc(var(--kopf) + var(--a-6)); }
.schritt__name { margin-top: var(--takt-1); font-size: var(--t-titel); font-weight: 900; line-height: var(--zeile-display); letter-spacing: var(--sperrung-display); hyphens: manual; }
/* Ein Wort, das beim Umbruch zusammenbleiben soll („KI-Sichtbarkeit“). Passt es allein nicht in die Zeile, bricht es doch am Bindestrich */
.schritt__wort { display: inline-block; }
.schritt__koerper { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--takt-4); margin-top: var(--takt-3); } /* minmax: Die Leiste der Bühne darf die Spalte nicht verbreitern (320 px) */
.schritt__text { max-width: var(--mass-l); }
.schritt__text p { font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }
.schritt__text p + p { margin-top: var(--a-4); }
.schritt__text .schritt__kern { max-width: var(--mass-s); margin-bottom: var(--a-5); font-size: var(--t-h3); font-weight: 800; line-height: var(--zeile-zwischen); letter-spacing: var(--sperrung-zwischen); color: var(--weiss); }
.schritt__text .hinweis { margin-top: var(--a-5); font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-1); }
.schritt__liste-titel { margin-top: var(--takt-4); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
/* Das bekommst du: kleine Karten mit V-Haken */
/* Handy eine Spalte (lange Wörter brauchen Platz), ab --mass-s Breite je Karte zwei, Desktop vier */
.ergebnisse { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mass-s)), 1fr)); gap: var(--a-3); margin: var(--a-4) 0 0; padding: 0; list-style: none; }
.ergebnis { position: relative; padding: var(--a-4) var(--a-4) var(--a-4) calc(var(--a-4) + var(--a-6)); border-radius: var(--r-m); background: var(--flaeche-1); border: 1px solid var(--linie-1);
  font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-1); hyphens: auto; overflow-wrap: break-word; }
.ergebnis::before { content: ""; position: absolute; left: var(--a-4); top: calc(var(--a-4) + .3em); width: 14px; height: 12px; background: var(--violett-hell); filter: var(--glut-haken);
  -webkit-mask: var(--v-zeichen) center / contain no-repeat;
          mask: var(--v-zeichen) center / contain no-repeat; }
/* Auf Wunsch: eine Erweiterung unter „Das bekommst du“ (Onlineshop, Blogbeiträge, eigene App). Bewusst abgesetzt:
   eigene Zeile über die ganze Breite, ohne Fläche, damit sie nicht wie ein fünfter Standardpunkt wirkt */
.auf-wunsch { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--a-4); row-gap: var(--a-1); margin-top: var(--a-3); padding: var(--a-4);
  border-radius: var(--r-m); border: 1px solid var(--linie-2); font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-1); }
.auf-wunsch__label { flex-shrink: 0; } /* Aussehen von .label */
.auf-wunsch a { color: var(--weiss); text-decoration-color: var(--linie-4); text-underline-offset: .2em; }
.auf-wunsch a:hover { text-decoration-color: var(--mint); }

/* ---------- Belege: die Bühne aus Szene 4, hier mit Inhalt, der die Leistung zeigt ----------
   AUSNAHME Bühneninhalt wie in Szene 4: Maße folgen der Bühnenbreite (cqw). */
.beleg { --spiel-licht: var(--licht-mint); }
.beleg .spiel__flaeche { aspect-ratio: auto; }
.beleg--entwurf { --spiel-licht: 46, 170, 80; }    /* Licht der Kundenseite (Castangolf, wie in Szene 2) */
.beleg--roentgen { --spiel-licht: 167, 123, 69; }  /* Licht der erfundenen Beispielseite (Obhut) */

/* 01 Bestandsaufnahme: das Produkt zuerst, alles läuft in eine Erkenntnis */
.analyse { display: flex; flex-direction: column; padding: 5cqw; }
.analyse__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4cqw; }
.analyse__feld { display: flex; flex-direction: column; gap: 1.6cqw; padding: 3.2cqw; border-radius: 2.4cqw; background: var(--ebene-3); border: 1px solid var(--linie-1); }
.analyse__feld--produkt { grid-column: 1 / -1; background: var(--mint-hauch); border-color: var(--mint-rand-leise); }
.analyse__nr { font-size: max(9px, 2.5cqw); font-weight: 700; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--violett-hell); }
.analyse__feld b { font-size: max(12px, 3.7cqw); font-weight: 700; line-height: 1.3; color: var(--weiss); }
.analyse__feld i { display: block; height: max(4px, 1.1cqw); border-radius: var(--r-pille); background: var(--linie-2); transform-origin: left center; }
.analyse__feld i:nth-of-type(1) { width: 92%; }
.analyse__feld i:nth-of-type(2) { width: 70%; }
.analyse__feld i:nth-of-type(3) { width: 52%; }
.analyse__trichter { display: block; width: 100%; height: 12cqw; overflow: visible; }
.analyse__trichter polyline { fill: none; stroke: var(--mint-rand); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.analyse__ziel { position: relative; align-self: center; width: 80%; }
.analyse__erkenntnis { padding: 3.2cqw 4cqw; border-radius: 2.4cqw; text-align: center;
  background: var(--mint-flaeche); border: 1px solid var(--mint-rand); box-shadow: 0 0 0 1px var(--kante-dunkel), 0 24px 60px -24px var(--schein-mint); }
.analyse__erkenntnis span { font-size: max(9px, 2.5cqw); font-weight: 700; letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--mint); }
.analyse__erkenntnis b { display: block; margin-top: 1.2cqw; font-size: max(13px, 3.9cqw); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--weiss); text-wrap: balance; }

/* 02 Vom Konzept zur fertigen Seite: eine echte Kundenseite (castangolf.de), vier Stationen auf einer Welle.
   data-ansicht="weg": die Reise (jede Station als Streifen, weich ineinander, gesteuert von leistungen.js mit zeigt-*).
   data-ansicht="konzept|mockups|prototyp|live": eine Station als ganzes Bild (Knöpfe). Ohne JavaScript: live. */
.entwurf { position: relative; display: flex; flex-direction: column; gap: 3cqw; padding: 4cqw; }
.entwurf__rahmen { position: relative; }
.entwurf__schirm { position: relative; aspect-ratio: 2538 / 1345; overflow: hidden; border-radius: 1.6cqw; background: var(--ebene-2); box-shadow: var(--ring); }
.entwurf__ebene { position: absolute; inset: 0; transition: opacity var(--dauer-2) ease, filter var(--dauer-2) ease; }
.entwurf__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.entwurf:not([data-ansicht="weg"]) .entwurf__ebene { opacity: 0; }
.entwurf[data-ansicht="konzept"] .entwurf__konzept, .entwurf[data-ansicht="mockups"] .entwurf__mockups,
.entwurf[data-ansicht="prototyp"] .entwurf__prototyp, .entwurf[data-ansicht="live"] .entwurf__live { opacity: 1; }
/* Die Reise: vier Streifen, die ineinander übergehen. Jede Station erscheint, wenn das Licht sie erreicht. */
.entwurf[data-ansicht="weg"] .entwurf__ebene { opacity: 0; filter: blur(1cqw); transition: opacity .7s ease, filter .7s ease; }
.entwurf[data-ansicht="weg"].zeigt-konzept .entwurf__konzept, .entwurf[data-ansicht="weg"].zeigt-mockups .entwurf__mockups,
.entwurf[data-ansicht="weg"].zeigt-prototyp .entwurf__prototyp, .entwurf[data-ansicht="weg"].zeigt-live .entwurf__live { opacity: 1; filter: none; }
.entwurf[data-ansicht="weg"] .entwurf__konzept { -webkit-mask-image: linear-gradient(90deg, #000 21%, transparent 28%); mask-image: linear-gradient(90deg, #000 21%, transparent 28%); }
.entwurf[data-ansicht="weg"] .entwurf__mockups { -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 28% 47%, transparent 53%); mask-image: linear-gradient(90deg, transparent 22%, #000 28% 47%, transparent 53%); }
/* Beim Prototyp nur das Bild im Streifen: Die Feedback-Punkte liegen als Anmerkungen darüber, auch über den Rand des Streifens
   (sonst wäre „Feedback“ auf schmalen Bühnen abgeschnitten). Punkt 2 liegt außerhalb des Streifens und fehlt auf der Reise. */
.entwurf[data-ansicht="weg"] .entwurf__prototyp .entwurf__bild { -webkit-mask-image: linear-gradient(90deg, transparent 47%, #000 53% 72%, transparent 78%); mask-image: linear-gradient(90deg, transparent 47%, #000 53% 72%, transparent 78%); }
.entwurf[data-ansicht="weg"] .entwurf__pin--2 { display: none; }
.entwurf[data-ansicht="weg"] .entwurf__live { -webkit-mask-image: linear-gradient(90deg, transparent 72%, #000 78%); mask-image: linear-gradient(90deg, transparent 72%, #000 78%); }

/* 01 Konzept: die Struktur der Seite als Linien */
.dr { position: absolute; display: block; border: 1px solid var(--linie-5); border-radius: .5cqw; }
.dr--bild { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--linie-3) 50%, transparent calc(50% + 1px)),
  linear-gradient(to bottom right, transparent calc(50% - 1px), var(--linie-3) 50%, transparent calc(50% + 1px)); }
.dr--leiste { left: 0; right: 0; top: 0; height: 3.9%; border: 0; border-radius: 0; background: var(--flaeche-2); }
.dr--logo { left: 12.8%; top: 5.1%; width: 8.7%; height: 8.6%; }
.dr--suche { left: 23.8%; top: 7.7%; width: 28.5%; height: 3.9%; }
.dr--icon { top: 7.4%; width: 2.6%; aspect-ratio: 1; border-radius: 50%; }
.dr--i1 { left: 55%; } .dr--i2 { left: 60.6%; } .dr--i3 { left: 66.2%; } .dr--i4 { left: 72%; }
.dr--i5 { left: 78.2%; } .dr--i6 { left: 81.4%; } .dr--i7 { left: 84.6%; }
.dr--nav { left: 13.4%; right: 13.5%; top: 16%; height: 1.6%; border: 0; border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--linie-3) 0 7.5%, transparent 7.5% 11.4%); }
.dr--held { left: 14.1%; top: 22.2%; width: 71.8%; height: 44%; }
.dr--titel { left: 14.1%; top: 76.5%; width: 10.8%; height: 2.6%; border: 0; background: var(--linie-3); }
.dr--ware { top: 81%; width: 9.8%; height: 24%; }
.dr--w1 { left: 18%; } .dr--w2 { left: 34.4%; } .dr--w3 { left: 50.7%; } .dr--w4 { left: 67.1%; }

/* 02 Mockups: drei Ideen, eine gewählt. Auf der Reise gefächert im zweiten Streifen, als ganzes Bild nebeneinander.
   AUSNAHME: Beispielfarben nur für diese Skizzen (wie die Farben von Obhut). Gewählt ist die Idee, aus der die echte Seite wurde.
   Die gewählte Karte hat den Mint-Rand (sie ist die Wahl), ihr Schild „gewählt“ ist eine dunkle Pille mit dem violetten V. */
.variante { position: absolute; top: 13%; left: 29.5%; width: 17%; height: 50%; overflow: hidden; border-radius: 1cqw; background: var(--v-grund);
  box-shadow: var(--ring), var(--schatten); --d: 0s;
  transition: opacity .5s ease var(--d), translate .6s var(--weich) var(--d), left .7s var(--weich), top .7s var(--weich), width .7s var(--weich), height .7s var(--weich),
    transform .7s var(--weich), box-shadow .4s ease; }
.variante--a { --v-grund: #141B22; --v-kopf: #0D1217; --v-bild: linear-gradient(160deg, #2C3947, #17202A); --v-text: #E6EAF0; --v-akzent: #C9A24A; --v-flaeche: #1D2630;
  left: 26%; transform: rotate(-7deg); --i: 0; }
.variante--c { --v-grund: #EFE8DA; --v-kopf: #5E6B3A; --v-bild: linear-gradient(160deg, #A9BB93, #6E8455); --v-text: #2D3322; --v-akzent: #B5623C; --v-flaeche: #E2D8C4;
  left: 33%; transform: rotate(6deg); --i: 1; }
.variante--b { --v-grund: #FFFFFF; --v-kopf: #185B20; --v-bild: radial-gradient(circle at 64% 50%, #AE0A34 0 24%, transparent 25%), #EDEDED; --v-text: #1E2A22; --v-akzent: #185B20; --v-flaeche: #EEEEEE;
  top: 16%; --i: 2; }
.variante > i, .variante__kacheln { position: absolute; display: block; }
.variante__kopf { left: 0; right: 0; top: 0; height: 8%; background: var(--v-kopf); }
.variante__bild { left: 7%; right: 7%; top: 14%; height: 30%; border-radius: .6cqw; background: var(--v-bild); }
.variante__titel { left: 7%; top: 50%; width: 62%; height: 5.5%; border-radius: .3cqw; background: var(--v-text); }
.variante__zeile { left: 7%; top: 59%; width: 78%; height: 2.6%; border-radius: var(--r-pille); background: var(--v-text); opacity: .35; }
.variante__knopf { left: 7%; top: 66%; width: 34%; height: 5.5%; border-radius: var(--r-pille); background: var(--v-akzent); }
.variante__kacheln { left: 7%; right: 7%; top: 76%; bottom: 6%; display: flex; gap: 6%; }
.variante__kacheln i { flex: 1; border-radius: .4cqw; background: var(--v-flaeche); }
.variante__wahl { position: absolute; right: 5%; top: 11%; display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em .3em .5em; border-radius: var(--r-pille);
  background: var(--ebene-3); color: var(--weiss); font-size: clamp(10px, 1.9cqw, 15px); font-weight: 800; line-height: 1.2; opacity: 0; transform: scale(.6);
  transition: opacity .4s ease, transform .5s var(--weich); }
.variante__wahl svg { width: .95em; height: auto; fill: var(--violett-hell); filter: var(--glut-haken); }
.entwurf.zeigt-wahl .variante--gewaehlt, .entwurf[data-ansicht="mockups"] .variante--gewaehlt { box-shadow: 0 0 0 2px var(--mint), 0 0 4cqw var(--schein-mint); }
.entwurf.zeigt-wahl .variante__wahl, .entwurf[data-ansicht="mockups"] .variante__wahl { opacity: 1; transform: none; }
/* Auf der Reise kommen die drei nacheinander */
.entwurf[data-ansicht="weg"] .variante { --d: calc(var(--i) * .14s); opacity: 0; translate: 0 2cqw; }
.entwurf[data-ansicht="weg"].zeigt-mockups .variante { opacity: 1; translate: none; }
/* Als ganzes Bild: nebeneinander */
.entwurf[data-ansicht="mockups"] .variante { top: 9%; width: 28%; height: 74%; transform: none; }
.entwurf[data-ansicht="mockups"] .variante--a { left: 4%; }
.entwurf[data-ansicht="mockups"] .variante--b { left: 36%; }
.entwurf[data-ansicht="mockups"] .variante--c { left: 68%; }

/* 03 Prototyp: die echte Seite mit Rückmeldungen. Punkte und das Schild „gewählt“ sind Anmerkungen über dem Bild: gut lesbar,
   mindestens 12 px (Schild 10 px), mit der Bühne bis 16 px (Schild 15 px) */
.entwurf__pin { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .5em; padding: .35em .9em .35em .35em; border-radius: var(--r-pille);
  background: var(--weiss); color: var(--tinte); font-size: clamp(12px, 2.1cqw, 16px); font-weight: 700; box-shadow: var(--schatten); opacity: 0; transform: scale(.6);
  transition: opacity var(--dauer-2) ease, transform var(--dauer-2) var(--weich); }
.entwurf__pin b { display: grid; place-items: center; width: 1.75em; aspect-ratio: 1; border-radius: 50%; background: var(--violett); color: var(--weiss); font-size: .85em; }
.entwurf__pin--1 { left: 51%; top: 20%; }
.entwurf__pin--2 { left: 13%; top: 42%; }
.entwurf__pin--3 { left: 56%; top: 56%; }
.entwurf.zeigt-pins .entwurf__pin, .entwurf[data-ansicht="prototyp"] .entwurf__pin { opacity: 1; transform: none; }
.entwurf.zeigt-pins .entwurf__pin--3, .entwurf[data-ansicht="prototyp"] .entwurf__pin--3 { transition-delay: .25s; }
.entwurf[data-ansicht="prototyp"] .entwurf__pin--2 { transition-delay: .5s; }

/* Die Welle: Spur (leise) und Licht (so weit, wie die Reise ist, violett), Punkte über den Knöpfen (erreicht: Mint, wie im V-Weg) */
.welle { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.welle polyline { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.welle__spur { stroke: var(--violett-rand); stroke-width: 2; }
.welle__licht { stroke: var(--violett-hell); stroke-width: 2.4; filter: var(--glut-linie); }
.welle__punkt { position: absolute; z-index: 7; width: max(9px, 1.8cqw); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: var(--ebene-2); border: 2px solid var(--linie-4);
  transition: background-color var(--dauer-2) ease, border-color var(--dauer-2) ease, box-shadow var(--dauer-2) ease; }
.welle__punkt.ist-an { background: var(--mint); border-color: var(--mint); box-shadow: var(--schein-punkt); }
.welle__punkt--1 { left: 12.5%; top: 79%; }
.welle__punkt--2 { left: 37.5%; top: 89%; }
.welle__punkt--3 { left: 62.5%; top: 79%; }
.welle__punkt--4 { left: 87.5%; top: 89%; }
.welle__kopf { position: absolute; z-index: 8; left: 0; top: 84%; width: max(11px, 2.2cqw); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: var(--weiss);
  box-shadow: var(--schein-kopf); opacity: 0; pointer-events: none; }
.entwurf__schirm > .spiel__licht { z-index: 9; }

/* 04 Livegang: die fertige Seite, dazu das Handy und eigener Code */
.entwurf__handy { position: absolute; right: 3%; bottom: 5%; z-index: 10; width: 18%; aspect-ratio: 561 / 1216; padding: .8cqw; border-radius: 2.6cqw; background: var(--ebene-3);
  box-shadow: var(--ring), var(--schatten), 0 0 40px rgba(var(--spiel-licht), .3); opacity: 0; transform: translateY(4cqw);
  transition: opacity var(--dauer-3) ease, transform var(--dauer-3) var(--weich); }
.entwurf__handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 1.9cqw; }
.entwurf__code { position: absolute; left: 3%; bottom: 6%; z-index: 10; padding: .9cqw 2cqw; border-radius: var(--r-pille); background: var(--schleier-3); border: 1px solid var(--mint-rand-leise);
  font-family: var(--schrift-code); font-size: max(9px, 1.8cqw); font-weight: 600; color: var(--mint);
  -webkit-backdrop-filter: var(--glas); backdrop-filter: var(--glas); opacity: 0; transition: opacity var(--dauer-3) ease .3s; }
.entwurf[data-ansicht="live"] .entwurf__handy { opacity: 1; transform: none; }
.entwurf[data-ansicht="live"] .entwurf__code { opacity: 1; }

/* Die vier Stationen als Knöpfe, genau unter ihren Streifen */
.entwurf__stationen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entwurf__station { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: var(--ziel); padding: var(--a-2) var(--a-1) 0;
  border: 0; border-top: 2px solid var(--linie-2); background: transparent; color: var(--text-3); cursor: pointer;
  font-size: var(--t-klein); font-weight: 700; line-height: 1.2; transition: color var(--dauer-2) ease, border-color var(--dauer-2) ease; }
.entwurf__station b { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-meta); color: var(--violett-hell); }
.entwurf__station:hover { color: var(--text-1); }
.entwurf__station[aria-pressed="true"] { color: var(--weiss); border-top-color: var(--mint); }
:root:not(.js) .entwurf__stationen { display: none; }

/* 03 Röntgenblick: oben, was Menschen sehen, darunter, was Maschinen lesen (Obhut, erfunden) */
.roentgen { display: grid; gap: 3.5cqw; padding: 4.5cqw; }
.roentgen__fenster { position: relative; overflow: hidden; border-radius: 2cqw; box-shadow: var(--ring); -webkit-user-select: none; user-select: none; }
/* Ziehen: mit der Maus überall im Fenster, auf dem Handy am Griff auf der Lichtkante (nur dort, sonst scrollt die Seite nicht mehr) */
.roentgen[data-ziehbar] .roentgen__fenster { cursor: grab; }
.roentgen.wird-gezogen .roentgen__fenster, .roentgen.wird-gezogen .roentgen__griff { cursor: grabbing; }
.roentgen__griff { position: absolute; left: 50%; top: 41%; z-index: 4; display: none; place-items: center; width: var(--ziel); height: var(--ziel); translate: -50% -50%;
  border-radius: 50%; touch-action: none; cursor: grab; }
.roentgen[data-ziehbar] .roentgen__griff { display: grid; }
.roentgen__griff::before { content: ""; grid-area: 1 / 1; width: 62%; height: 62%; border-radius: 50%; background: var(--weiss); box-shadow: var(--schein-kopf); transition: transform var(--dauer-1) var(--weich); }
.roentgen__griff svg { grid-area: 1 / 1; position: relative; width: 38%; height: auto; fill: none; stroke: var(--tinte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.roentgen.wird-gezogen .roentgen__griff::before { transform: scale(1.12); }
.roentgen__seite { display: flex; flex-direction: column; gap: 2.2cqw; padding: 5cqw; background: var(--obhut-grund); color: var(--obhut-tinte); }
.roentgen__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 3cqw; }
.roentgen__logo { font-family: "Beispiel Serif", Georgia, serif; font-size: max(15px, 5.2cqw); line-height: 1; }
.roentgen__logo small { font-family: var(--schrift); font-size: max(7px, 1.8cqw); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.roentgen__nav { display: flex; gap: 2.4cqw; font-size: max(8px, 2.4cqw); font-weight: 500; }
.roentgen__nav i { font-style: normal; }
.roentgen__kicker { margin-top: 3cqw; font-size: max(8px, 2.2cqw); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--obhut-gold); }
.roentgen__titel { font-family: "Beispiel Serif", Georgia, serif; font-size: max(20px, 7.4cqw); line-height: 1.02; letter-spacing: -.01em; }
.roentgen__unter { max-width: 34ch; font-size: max(10px, 2.9cqw); line-height: 1.45; color: var(--obhut-grau); }
.roentgen__knopf { align-self: flex-start; padding: 1.4cqw 2.8cqw; border-radius: var(--r-pille); background: var(--obhut-tinte); color: var(--obhut-grund); font-size: max(9px, 2.6cqw); font-weight: 700; }
.roentgen__bild { display: block; height: 16cqw; border-radius: 1.6cqw; background: linear-gradient(180deg, var(--obhut-grund), var(--obhut-sand)); box-shadow: inset 0 0 0 1px var(--obhut-linie); }
/* Code-Ansicht: Code-Schrift (--schrift-code), weil sie Code zeigt */
.roentgen__code { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 1.6cqw; padding: 5cqw; background: var(--ebene-1);
  font-family: var(--schrift-code); font-size: max(9px, 2.3cqw); line-height: 1.5; color: var(--text-2);
  clip-path: polygon(0% 0%, 100% 0%, 100% 21%, 50% 55%, 0% 21%); }
.roentgen__code em { font-style: normal; color: var(--mint); }
.roentgen__code .roentgen__h1 { color: var(--weiss); font-weight: 700; }
.roentgen__daten { margin-top: auto; padding: 2.2cqw; border-radius: 1.4cqw; background: var(--mint-hauch); border: 1px solid var(--mint-rand-leise); color: var(--text-1); }
.roentgen__fenster > .spiel__licht { z-index: 3; }
.roentgen__treffer { display: grid; gap: 2.4cqw; }
.roentgen__karte { display: flex; flex-direction: column; gap: 1cqw; padding: 3cqw; border-radius: 2cqw; background: var(--ebene-3); border: 1px solid var(--linie-1);
  font-size: max(10px, 2.8cqw); line-height: 1.45; color: var(--text-2); transition: background-color var(--dauer-3) ease, border-color var(--dauer-3) ease; }
.roentgen__karte small { font-size: max(8px, 2.1cqw); font-weight: 700; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); transition: color var(--dauer-3) ease; }
.roentgen__karte b { font-size: max(11px, 3.1cqw); font-weight: 700; color: var(--weiss); }
.roentgen__karte--ki { background: var(--mint-hauch); border-color: var(--mint-rand-leise); color: var(--text-1); }
.roentgen__karte--ki small { color: var(--mint); }
.roentgen__karte > :not(small) { transition: opacity var(--dauer-3) ease, filter var(--dauer-3) ease; }
/* Mit Bewegung: Erst wenn die Seite gelesen ist, werden Suchergebnis und KI-Antwort scharf */
.roentgen[data-bewegt] .roentgen__karte > :not(small) { opacity: .35; filter: blur(1cqw); }
.roentgen[data-bewegt] .roentgen__karte--ki { background: var(--ebene-3); border-color: var(--linie-1); }
.roentgen[data-bewegt] .roentgen__karte--ki small { color: var(--text-3); }
.roentgen[data-bewegt].ist-treffer .roentgen__karte:not(.roentgen__karte--ki) > :not(small) { opacity: 1; filter: none; }
.roentgen[data-bewegt].ist-ki .roentgen__karte--ki > :not(small) { opacity: 1; filter: none; }
.roentgen[data-bewegt].ist-ki .roentgen__karte--ki { background: var(--mint-hauch); border-color: var(--mint-rand-leise); }
.roentgen[data-bewegt].ist-ki .roentgen__karte--ki small { color: var(--mint); }

/* 04 Bausteine, die sich verbinden: eine Anfrage läuft von allein durch.
   Drei mal drei als Schlange auf jeder Bühnenbreite (Philip, 02.10.2026: auf dem Handy wie am PC): Reihe 1 nach rechts,
   Reihe 2 zurück nach links, Reihe 3 wieder nach rechts. Die schmale Bühne hat knappere Abstände und kleinere Schrift,
   damit auch die längsten Titel („Contabilidade“, „Conversation“) auf 360 px breiten Handys in die Karte passen. */
.bausteine { position: relative; padding: 5cqw 4cqw; }
.bausteine__weg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bausteine__linie, .bausteine__licht { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.bausteine__linie { stroke: var(--linie-2); stroke-width: 2; }
.bausteine__licht { stroke: var(--mint); stroke-width: 2.4; filter: var(--glut-mint-linie); }
.bausteine__liste { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7cqw 4cqw; margin: 0; padding: 0; list-style: none; }
.baustein:nth-child(4) { grid-column: 3; grid-row: 2; }
.baustein:nth-child(5) { grid-column: 2; grid-row: 2; }
.baustein:nth-child(6) { grid-column: 1; grid-row: 2; }
.baustein:nth-child(7) { grid-column: 1; grid-row: 3; }
.baustein:nth-child(8) { grid-column: 2; grid-row: 3; }
.baustein:nth-child(9) { grid-column: 3; grid-row: 3; }
.baustein { display: flex; flex-direction: column; align-items: flex-start; gap: .8cqw; padding: 2.6cqw 2cqw; border-radius: 2cqw; background: var(--ebene-3);
  border: 1px solid var(--mint-rand); transition: background-color var(--dauer-2) ease, border-color var(--dauer-2) ease; }
.baustein b { font-size: max(10.5px, 3cqw); font-weight: 800; }
/* Zwei Zeilen Platz für die Unterzeile: Lange Unterzeilen brechen ausgewogen um, und „immer persönlich“ verschiebt nichts */
.baustein span { min-height: 2.6em; font-size: max(10px, 2.9cqw); font-weight: 600; line-height: 1.3; text-wrap: balance; color: var(--mint); transition: color var(--dauer-2) ease; }
.baustein--persoenlich { border-color: var(--linie-5); }
.baustein--persoenlich span { color: var(--weiss); }
/* Mit Bewegung: aus, bis das Licht ankommt */
.bausteine[data-lauf] .baustein { border-color: var(--linie-1); }
.bausteine[data-lauf] .baustein span { color: var(--text-3); }
/* Deckend, damit die Linie hinter den Karten bleibt */
.bausteine[data-lauf] .baustein.ist-an { border-color: var(--mint-rand); background-color: var(--ebene-mint); }
.bausteine[data-lauf] .baustein.ist-an span { color: var(--mint); }
.bausteine[data-lauf] .baustein--persoenlich.ist-an { border-color: var(--linie-5); background-color: var(--ebene-3); }
.bausteine[data-lauf] .baustein--persoenlich.ist-an span { color: var(--weiss); }
/* Das Gespräch: Das Licht läuft um die Karte herum, sie bleibt grau. Kurz vorher wird aus „persönlich“ „immer persönlich“,
   der Smiley zwinkert einmal, nur Text und Smiley blitzen Mint und werden wieder weiß. Ohne Bewegung steht es gleich so da. */
.baustein__immer { font-style: normal; } /* <i>, damit es die Farbe des Labels erbt (auch beim Blitzen) */
.zwinker { display: inline-block; width: 1.2em; height: auto; margin-left: .35em; vertical-align: -.24em; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.zwinker__auge { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; }
.bausteine[data-lauf] .baustein--persoenlich:not(.ist-immer) :is(.baustein__immer, .zwinker) { display: none; }
.baustein--persoenlich.zwinkert > span { animation: blitzen 1.5s ease; }
.baustein--persoenlich.zwinkert .zwinker__auge--rechts { animation: zwinkern .55s ease .35s; }
@keyframes blitzen { 0%, 45% { color: var(--mint); } 100% { color: var(--weiss); } }
@keyframes zwinkern { 0%, 100% { transform: none; } 40%, 65% { transform: scaleY(.12); } }

/* Breitere Bühne */
@container (min-width: 520px) {
  .analyse { padding: 3.4cqw 3.6cqw; }
  .analyse__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; }
  .analyse__feld--produkt { grid-column: span 2; }
  .analyse__feld { gap: .9cqw; padding: 1.8cqw 2cqw; border-radius: 1.4cqw; }
  .analyse__nr { font-size: 1.25cqw; }
  .analyse__feld b { font-size: 1.95cqw; }
  .analyse__feld i { height: .55cqw; }
  .analyse__trichter { height: 7cqw; }
  .analyse__ziel { width: 58%; }
  .analyse__erkenntnis { padding: 1.8cqw 2.4cqw; border-radius: 1.4cqw; }
  .analyse__erkenntnis span { font-size: 1.25cqw; }
  .analyse__erkenntnis b { margin-top: .7cqw; font-size: 2.2cqw; }

  .entwurf { gap: 2cqw; padding: 3cqw; }
  .entwurf__schirm { border-radius: 1cqw; }
  .variante { border-radius: .7cqw; }
  .welle__punkt { width: 1.3cqw; }
  .welle__kopf { width: 1.6cqw; }
  .entwurf__handy { width: 14%; padding: .55cqw; border-radius: 1.8cqw; }
  .entwurf__handy img { border-radius: 1.3cqw; }
  .entwurf__code { padding: .6cqw 1.4cqw; font-size: 1.2cqw; }
  .entwurf__station { flex-direction: row; align-items: baseline; gap: var(--a-2); }

  .roentgen { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: 2.6cqw; padding: 3cqw; }
  .roentgen__fenster { border-radius: 1.2cqw; }
  .roentgen__seite { gap: 1.3cqw; padding: 3cqw; }
  .roentgen__logo { font-size: 2.9cqw; }
  .roentgen__logo small { font-size: .95cqw; }
  .roentgen__nav { gap: 1.4cqw; font-size: 1.3cqw; }
  .roentgen__kicker { margin-top: 1.6cqw; font-size: 1.15cqw; }
  .roentgen__titel { font-size: 4.2cqw; }
  .roentgen__unter { font-size: 1.55cqw; }
  .roentgen__knopf { padding: .8cqw 1.6cqw; font-size: 1.35cqw; }
  .roentgen__bild { height: 9cqw; border-radius: .9cqw; }
  .roentgen__code { gap: .9cqw; padding: 3cqw; font-size: 1.28cqw; }
  .roentgen__daten { padding: 1.2cqw; border-radius: .8cqw; }
  .roentgen__treffer { gap: 1.4cqw; }
  .roentgen__karte { gap: .6cqw; padding: 1.8cqw; border-radius: 1.2cqw; font-size: 1.45cqw; }
  .roentgen__karte small { font-size: 1.05cqw; }
  .roentgen__karte b { font-size: 1.6cqw; }

  .bausteine { padding: 4cqw 4.5cqw; }
  .bausteine__liste { gap: 5cqw 5cqw; }
  .baustein { justify-content: center; gap: .5cqw; padding: 1.9cqw 2.2cqw; border-radius: 1.3cqw; }
  .baustein b { font-size: 2cqw; }
  .baustein span { min-height: auto; font-size: 1.5cqw; line-height: inherit; }
}

/* ---------- Ablauf: der Weg im V ----------
   Kopf über die ganze Breite. Desktop: links das große V (klebt, das Licht folgt dem Lesen, darunter der aktuelle
   Schritt), rechts die sieben Schritte. Handy: nur die Schritte, jeder mit kleinem V. Der Schritt, der gerade
   gelesen wird, hat eine Mint-Linie oben (.ist-jetzt). */
.abschnitt__einleitung { margin-top: var(--takt-2); max-width: var(--mass-l); font-size: var(--t-lead); line-height: var(--zeile-mittel); color: var(--text-2); }
.prozess__raster { margin-top: var(--takt-4); }
.prozess__karte { display: none; }
.prozess__jetzt { display: flex; align-items: baseline; gap: var(--a-3); margin-top: var(--a-8); visibility: hidden; }
.js .prozess__jetzt { visibility: visible; }
.prozess__jetzt b { font-size: var(--t-lead); font-weight: 700; line-height: var(--zeile-knapp); letter-spacing: var(--sperrung-ui); color: var(--weiss); }
.prozess__liste { position: relative; margin: 0; padding: 0; list-style: none; }
.prozess__schritt { padding: var(--a-6) 0 var(--a-12); border-top: 1px solid var(--linie-2); scroll-margin-top: calc(var(--kopf) + var(--a-6)); transition: border-color var(--dauer-2) ease; }
.prozess__schritt:last-child { padding-bottom: 0; }
.prozess__schritt.ist-jetzt { border-top-color: var(--mint-rand); }
.prozess__marke { display: flex; align-items: center; gap: var(--a-3); }
.prozess__titel { margin-top: var(--a-3); font-size: var(--t-h3); font-weight: 800; line-height: var(--zeile-zwischen); letter-spacing: var(--sperrung-zwischen); }
.prozess__text { margin-top: var(--a-3); max-width: var(--mass-l); font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }
.prozess__schritt .mehr { margin-top: var(--a-4); }
.prozess__schritt .beleg { margin-top: var(--a-8); }

/* ---------- Betreuung: drei Pakete auf dem Fundament Hosting ---------- */
.pakete { display: grid; gap: var(--a-4); margin: var(--takt-4) 0 0; padding: 0; list-style: none; }
.paket { position: relative; display: flex; flex-direction: column; padding: var(--a-6); border-radius: var(--r-l); background: var(--flaeche-1); border: 1px solid var(--linie-2); }
.paket::before { content: ""; position: absolute; left: var(--a-6); right: var(--a-6); top: -1px; height: 2px; border-radius: var(--r-pille); background: var(--mint); filter: var(--glut-mint-linie);
  opacity: 0; transition: opacity var(--dauer-3) ease; }
.paket.ist-an::before { opacity: 1; }
/* Stufen: Je mehr drin ist, desto mehr Licht (data-stufe 1 bis 3). Neben dem Namen so viele Striche an, wie die Stufe ist,
   der Lichtstrich oben ein Drittel, zwei Drittel, ganz, dazu ein Schein von oben (Business ein Hauch, Premium deutlicher).
   Anzeige und Schein stehen immer da, damit man die Stufe auch auf dem Handy beim Lesen sieht; der Strich geht mit dem Fundament an. */
.paket__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-4); }
.paket__stufe { display: inline-flex; flex-shrink: 0; gap: var(--a-1); }
.paket__stufe i { width: var(--a-4); height: var(--a-1); border-radius: var(--r-pille); background: var(--linie-3); }
.paket[data-stufe="1"] .paket__stufe i:nth-child(-n+1),
.paket[data-stufe="2"] .paket__stufe i:nth-child(-n+2),
.paket[data-stufe="3"] .paket__stufe i { background: var(--mint); box-shadow: 0 0 var(--a-2) var(--schein-mint); }
.paket[data-stufe="1"]::before { right: auto; width: calc((100% - var(--a-6) * 2) / 3); }
.paket[data-stufe="2"]::before { right: auto; width: calc((100% - var(--a-6) * 2) * 2 / 3); }
.paket[data-stufe="2"] { background: linear-gradient(to bottom, var(--mint-hauch), var(--flaeche-1) 40%); }
.paket[data-stufe="3"] { background: linear-gradient(to bottom, var(--mint-flaeche), var(--flaeche-1) 55%); border-color: var(--linie-3); }
.paket__name { font-size: var(--t-h3); font-weight: 500; line-height: var(--zeile-zwischen); letter-spacing: var(--sperrung-zwischen); color: var(--text-1); }
.paket__name b { font-weight: 800; color: var(--weiss); }
.paket__werte { margin: var(--a-5) 0 0; }
.paket__werte > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-4); padding: var(--a-3) 0; border-top: 1px solid var(--linie-1); }
.paket__werte > div:last-child { border-bottom: 1px solid var(--linie-1); }
.paket__werte dt { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.paket__werte dd { margin: 0; font-size: var(--t-ui); font-weight: 700; text-align: right; color: var(--weiss); }
/* Business und Premium: „Alles aus …“ ist der erste Punkt, gleichwertig und fett, darunter „Zusätzlich“ und die neuen Punkte */
.paket__alles { font-weight: 700; color: var(--weiss); }
.paket__zusaetzlich { margin-top: var(--a-5); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.paket__zusaetzlich + .paket__liste { margin-top: var(--a-3); }
.betreuung .fundament { margin-top: var(--a-10); }
.betreuung .hinweis { margin-top: var(--a-8); }

/* Zusätzlich buchbar: kleine Symbole in Mint */
.extras__liste { margin: 0; padding: 0; list-style: none; }
.extra { display: grid; grid-template-columns: var(--a-10) minmax(0, 1fr); column-gap: var(--a-4); align-items: start; padding: var(--a-6) 0; border-top: 1px solid var(--linie-2); }
.extra:last-child { border-bottom: 1px solid var(--linie-2); }
.extra__icon { grid-row: 1 / span 2; position: relative; width: var(--a-10); height: var(--a-10); border-radius: var(--r-m); background: var(--flaeche-1); border: 1px solid var(--linie-1); }
.extra__icon::before { content: ""; position: absolute; inset: 0; margin: auto; width: var(--a-5); height: var(--a-5); background: var(--mint); -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat; }
.extra__icon--foto { --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 8h4l2-3h6l2 3h4v12H3z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E"); }
.extra__icon--anzeige { --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='.9' fill='%23000'/%3E%3C/svg%3E"); }
.extra__icon--sozial { --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='18' cy='6' r='2.6'/%3E%3Ccircle cx='18' cy='18' r='2.6'/%3E%3Cpath d='M8.3 10.8l7.4-3.6M8.3 13.2l7.4 3.6'/%3E%3C/svg%3E"); }
.extra__icon--mail { --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.8 7l8.2 6.2L20.2 7'/%3E%3C/svg%3E"); }
.extra__titel { font-size: var(--t-lead); font-weight: 700; line-height: var(--zeile-knapp); letter-spacing: var(--sperrung-ui); }
.extra p { margin-top: var(--a-1); font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-2); overflow-wrap: break-word; }

/* Häufige Fragen: aufklappbar, ohne JavaScript (details). Wo der Browser es kann, öffnet es weich. */
.faq { interpolate-size: allow-keywords; }
.faq__text { margin-top: var(--takt-2); font-size: var(--t-text); color: var(--text-2); }
.faq__text a { color: var(--weiss); text-decoration-color: var(--linie-4); text-underline-offset: .2em; }
.faq__text a:hover { text-decoration-color: var(--mint); }
.faq__frage { border-top: 1px solid var(--linie-2); }
.faq__frage:last-child { border-bottom: 1px solid var(--linie-2); }
.faq__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-6); min-height: var(--ziel); padding: var(--a-5) 0; cursor: pointer; list-style: none;
  font-size: var(--t-lead); font-weight: 700; line-height: var(--zeile-knapp); letter-spacing: var(--sperrung-ui); transition: color var(--dauer-1); }
.faq__kopf::-webkit-details-marker { display: none; }
.faq__kopf:hover { color: var(--text-1); }
.faq__zeichen { flex-shrink: 0; width: 14px; height: 12px; background: var(--violett-hell); transition: transform var(--dauer-2) var(--weich);
  -webkit-mask: var(--v-zeichen) center / contain no-repeat;
          mask: var(--v-zeichen) center / contain no-repeat; }
.faq__frage[open] .faq__zeichen { transform: rotate(180deg); }
.faq__antwort { max-width: var(--mass-l); padding-bottom: var(--a-6); font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }
@supports selector(::details-content) {
  .faq__frage::details-content { block-size: 0; overflow: clip; transition: block-size var(--dauer-2) var(--weich), content-visibility var(--dauer-2) allow-discrete; }
  .faq__frage[open]::details-content { block-size: auto; }
}

@media (min-width: 821px) {
  .leistungen-kopf .uebersicht { margin-top: var(--takt-5); }
  .uebersicht__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--a-8); }
  .uebersicht__punkt a { gap: var(--a-1); height: 100%; padding: var(--a-4) 0 0; }
  .fundament { display: flex; align-items: baseline; gap: var(--a-10); }
  .fundament__label { flex-shrink: 0; }
  .fundament__liste { display: flex; flex-wrap: wrap; gap: var(--a-3) var(--a-10); margin-top: 0; }
  .schrittleiste__links { display: flex; gap: var(--a-5); }
  .schrittleiste__jetzt { display: none; }
  .schrittleiste__link { font-size: var(--t-klein); font-weight: 600; white-space: nowrap; color: var(--text-3); text-decoration: none; transition: color var(--dauer-2) ease; }
  .schrittleiste__link:hover, .schrittleiste__link.ist-aktiv { color: var(--weiss); }
  .schritt__koerper { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--spalten-luecke); align-items: start; }
  .ergebnisse { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .prozess__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--spalten-luecke); align-items: start; }
  .prozess__karte { display: block; position: sticky; top: calc(var(--kopf) + var(--takt-4)); padding-left: var(--a-10); }
  .prozess__marke .vweg--schritt { display: none; }
  .pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-6); }
  .extras__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-8); }
  .extra:nth-last-child(2) { border-bottom: 1px solid var(--linie-2); }
}

/* ==========================================================================
   Arbeiten (Unterseite) und Fallstudien
   Jede Kundenseite bringt ihr eigenes Licht mit: Oben stehen alle Gesichter in
   einer Reihe, darunter geht jedes Projekt mit dem V-Lichtschnitt an, und der
   Raum nimmt die Farbe der Seite an, die man gerade sieht.
   ========================================================================== */

/* Kundenfarben (r, g, b). AUSNAHME wie data-licht im Band: Farben der gezeigten Seiten, nicht unsere. */
.kunde--castangolf { --kunde-licht: 46, 170, 80; }
.kunde--topbody { --kunde-licht: 245, 197, 24; }
.kunde--socialfuerst { --kunde-licht: 230, 30, 40; }
.kunde--esencia { --kunde-licht: 226, 150, 105; }
.kunde--finnolebauer { --kunde-licht: 243, 104, 47; }
.kunde--liva { --kunde-licht: 249, 156, 44; }

/* Raumlicht: der Raum nimmt die Farbe der Kundenseite an (ohne Kundenfarbe: das Licht vom Anfang) */
.raumlicht { z-index: 0; pointer-events: none; --raum-licht: var(--kunde-licht, var(--licht-leer));
  background: radial-gradient(70% 55vh at 80% calc(var(--ueberstand) + 92vh), rgba(var(--raum-licht), .16), rgba(var(--raum-licht), 0) 70%),
              radial-gradient(55% 45vh at 6% calc(var(--ueberstand) + 4vh), rgba(var(--raum-licht), .07), rgba(var(--raum-licht), 0) 70%);
  background: radial-gradient(70% 55lvh at 80% calc(var(--ueberstand) + 92lvh), rgba(var(--raum-licht), .16), rgba(var(--raum-licht), 0) 70%),
              radial-gradient(55% 45lvh at 6% calc(var(--ueberstand) + 4lvh), rgba(var(--raum-licht), .07), rgba(var(--raum-licht), 0) 70%); }

/* ---------- Die Reihe: alle Gesichter auf einen Blick ---------- */
.reihe { margin-top: var(--takt-4); }
.reihe__liste { display: flex; gap: var(--a-4); margin: 0 calc(var(--rand) * -1); padding: var(--a-6) var(--rand) var(--a-8); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; }
.reihe__liste::-webkit-scrollbar { display: none; }
/* Ein Streifen wie das Band (kern.js, Valoora.streifen): Während Rad, Ziehen und Fahrt rastet er nicht ein, gezogen wird
   der Streifen, nicht der Link oder das Bild */
.reihe__liste.zieht, .reihe__liste.faehrt, .reihe__liste.rad { scroll-snap-type: none; }
.reihe__liste.zieht { user-select: none; -webkit-user-select: none; }
.reihe__liste.zieht a { cursor: grabbing; }
.reihe__liste a, .reihe__liste img { -webkit-user-drag: none; }
.reihe__punkt { flex: 0 0 36%; scroll-snap-align: start; }
.reihe__punkt a { display: flex; flex-direction: column; gap: var(--a-4); text-decoration: none; }
.reihe__handy { display: block; aspect-ratio: 1 / 2; padding: var(--a-1); border-radius: var(--r-l); overflow: hidden; background: var(--ebene-3);
  box-shadow: var(--ring), 0 24px 60px -26px rgba(var(--kunde-licht), .75); transition: transform var(--dauer-2) var(--weich), box-shadow var(--dauer-2) var(--weich); }
.reihe__handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: var(--r-m); }
.reihe__punkt a:focus-visible .reihe__handy { transform: translateY(calc(var(--a-2) * -1)); box-shadow: var(--ring), 0 30px 70px -18px rgba(var(--kunde-licht), .95); }
.reihe__name { display: flex; flex-direction: column; gap: var(--a-05); }
.reihe__name b { display: flex; align-items: center; gap: var(--a-2); font-size: var(--t-ui); font-weight: 700; line-height: var(--zeile-knapp); }
.reihe__name b::before { content: ""; flex-shrink: 0; width: var(--a-2); height: var(--a-2); border-radius: 50%; background: rgb(var(--kunde-licht)); box-shadow: 0 0 var(--a-3) rgba(var(--kunde-licht), .8); }
.reihe__name span { font-size: var(--t-klein); line-height: var(--zeile-knapp); color: var(--text-3); }
.reihe__name b, .reihe__name span { hyphens: auto; overflow-wrap: break-word; }

/* ---------- Ein Projekt: die Seite auf der Bühne, daneben die Idee ---------- */
.projekt { --karte-licht: var(--kunde-licht); --licht-an: 1; display: grid; row-gap: var(--takt-4); scroll-margin-top: var(--kopf); }
.projekt__bild { position: relative; margin: 0; padding-bottom: 34%; }
.projekt__buehne { --spiel-licht: var(--kunde-licht); }
.projekt__buehne .spiel__flaeche { aspect-ratio: 2538 / 1345; }
.projekt__seite { position: absolute; inset: 0; }
.projekt__seite img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.projekt__handy { position: absolute; right: 5%; bottom: 0; z-index: 10; width: 32%; aspect-ratio: 561 / 1216; padding: 1.4%; border-radius: var(--r-l); background: var(--ebene-3);
  box-shadow: var(--ring), var(--schatten), 0 30px 80px -30px rgba(var(--kunde-licht), .6); }
.projekt__handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: var(--r-m); }
.projekt__text { display: flex; flex-direction: column; align-items: flex-start; }
.projekt__name { margin-top: var(--a-3); font-size: var(--t-held); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel); text-wrap: balance; }
.projekt__meta { margin-top: var(--a-3); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.projekt__idee { margin-top: var(--takt-2); max-width: var(--mass-m); font-size: var(--t-lead); line-height: var(--zeile-mittel); color: var(--text-1); }
.projekt__beleg { width: 100%; }
.projekt__beleg .zahl { margin-top: var(--takt-2); font-size: var(--t-held); }
.projekt__stimme { margin: var(--takt-2) 0 0; display: flex; flex-direction: column; gap: var(--a-4); }
.projekt__stimme-zitat { margin: 0; max-width: var(--mass-m); font-size: var(--t-h3); font-weight: 800; line-height: var(--zeile-zwischen); letter-spacing: var(--sperrung-zwischen); }
.projekt__wege { margin-top: var(--takt-3); display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-8); }
.mehr--extern .mehr__pfeil { transform: rotate(-45deg); }

/* ---------- Fallstudie: Kopf mit Fakten, Kapitel, Vergleich ---------- */
.zurueck { display: inline-flex; align-items: center; gap: var(--a-3); min-height: var(--ziel); margin-bottom: var(--takt-2); font-size: var(--t-ui); font-weight: 600; color: var(--text-2);
  text-decoration: none; transition: color var(--dauer-1); }
.zurueck .mehr__pfeil { transform: scaleX(-1); }
.zurueck:hover { color: var(--weiss); }
.fall-kopf__titel { margin-top: var(--takt-1); font-size: var(--t-titel); font-weight: 900; line-height: var(--zeile-display); letter-spacing: var(--sperrung-display); overflow-wrap: anywhere; }
.fall-kopf__text { margin-top: var(--takt-2); max-width: var(--mass-s); font-size: var(--t-lead); line-height: var(--zeile-mittel); color: var(--text-2); }
.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-5) var(--a-6); margin: var(--takt-3) 0 0; }
.fakten div { display: flex; flex-direction: column; gap: var(--a-1); padding-top: var(--a-3); border-top: 1px solid var(--linie-2); }
.fakten dt { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.fakten dd { margin: 0; font-size: var(--t-ui); font-weight: 600; line-height: var(--zeile-knapp); color: var(--weiss); overflow-wrap: anywhere; }
.fakten a { text-decoration-color: var(--linie-4); text-underline-offset: .2em; }
.fakten a:hover { text-decoration-color: rgb(var(--kunde-licht)); }
.fall-kopf__bild { margin-top: var(--takt-4); }

/* Kapitel folgen dichter aufeinander als Abschnitte: eine Fallstudie liest sich wie ein Artikel */
.kapitel { padding-top: var(--takt-5); padding-bottom: var(--takt-4); }
.kapitel__titel { margin-top: var(--takt-1); font-size: var(--t-held); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel); text-wrap: balance; }
.kapitel__inhalt { display: flex; flex-direction: column; gap: var(--a-6); max-width: var(--breite-text); }
.kapitel__inhalt > p:not([class]) { max-width: var(--mass-l); font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }
.kapitel--breit .vergleich { margin-top: var(--takt-4); }

/* Platzhalter: sichtbar, bis echte Inhalte da sind. Vor dem Livegang ersetzen. */
.platzhalter { max-width: var(--mass-l); padding: var(--a-5) var(--a-6); border: 1px dashed var(--bernstein); border-radius: var(--r-m); background: var(--bernstein-hauch);
  font-size: var(--t-text); line-height: var(--zeile-mittel); color: var(--bernstein); }

/* Die Erkenntnis: ein Satz im Licht des Kunden */
.erkenntnis-satz { margin: 0; padding: var(--a-8) var(--a-6); border-radius: var(--r-l); border: 1px solid rgba(var(--kunde-licht), .5); background: rgba(var(--kunde-licht), .06);
  box-shadow: 0 40px 100px -50px rgba(var(--kunde-licht), .6); text-align: center; }
.erkenntnis-satz__label { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-label); text-transform: uppercase; color: rgb(var(--kunde-licht)); }
.erkenntnis-satz__text { margin: var(--a-3) auto 0; max-width: var(--mass-m); font-size: var(--t-h3); font-weight: 800; line-height: var(--zeile-zwischen); letter-spacing: var(--sperrung-zwischen); text-wrap: balance; }
.erkenntnis-satz__platz { color: var(--bernstein); }

/* Bildplatz: die richtige Größe schon da, mit Bildauftrag */
.bildplatz { margin: 0; }
.bildplatz__flaeche { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--a-2); aspect-ratio: 3 / 2; padding: var(--a-6);
  border: 1px dashed var(--bernstein); border-radius: var(--r-l); background: var(--bernstein-hauch); text-align: center; }
.bildplatz__marke { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--bernstein); }
.bildplatz__was { max-width: var(--mass-m); font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-1); }
.bildauftrag { margin-top: var(--a-3); font-size: var(--t-klein); line-height: var(--zeile-knapp); color: var(--text-2); }
.bildauftrag summary { display: flex; align-items: center; min-height: var(--ziel); cursor: pointer; font-weight: 700; color: var(--bernstein); }
.bildauftrag p { max-width: var(--mass-l); }

/* Vorher und nachher: ziehen, tippen oder mit den Pfeiltasten */
.vergleich { margin: 0; }
.vergleich__buehne { --teil: 50%; position: relative; aspect-ratio: 2538 / 1345; border-radius: var(--r-l); overflow: hidden; background: var(--ebene-1); touch-action: pan-y;
  user-select: none; -webkit-user-select: none; box-shadow: var(--ring), 0 40px 110px -40px rgba(var(--kunde-licht), .45); }
.js .vergleich__buehne { cursor: ew-resize; }
.vergleich__buehne:has(.vergleich__regler:focus-visible) { outline: 2px solid var(--mint); outline-offset: var(--a-1); }
.vergleich__bild { position: absolute; inset: 0; }
.vergleich__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; -webkit-user-drag: none; }
.vergleich__bild--nachher { clip-path: inset(0 0 0 var(--teil)); }
.vergleich__platz { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--a-2); padding: var(--a-4) 52% var(--a-4) var(--a-4);
  background: repeating-linear-gradient(135deg, var(--ebene-2) 0 var(--a-3), var(--ebene-1) var(--a-3) var(--a-6)); }
.vergleich__platz-text { font-size: var(--t-klein); line-height: var(--zeile-knapp); color: var(--text-1); }
.vergleich__marke { position: absolute; top: var(--a-3); z-index: 3; padding: var(--a-1) var(--a-3); border-radius: var(--r-pille); background: var(--schleier-3);
  -webkit-backdrop-filter: var(--glas); backdrop-filter: var(--glas); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-meta); text-transform: uppercase; }
.vergleich__marke--vorher { left: var(--a-3); color: var(--text-2); }
.vergleich__marke--nachher { right: var(--a-3); color: var(--weiss); }
.vergleich__griff { position: absolute; top: 0; bottom: 0; left: var(--teil); z-index: 4; width: 0; pointer-events: none; }
.vergleich__griff::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--weiss); box-shadow: 0 0 var(--a-2) var(--glut-weiss), 0 0 var(--a-6) rgba(var(--kunde-licht), .9); }
.vergleich__griff i { position: absolute; top: 50%; left: 0; width: var(--ziel); height: var(--ziel); margin: calc(var(--ziel) / -2) 0 0 calc(var(--ziel) / -2); border-radius: 50%;
  background: var(--schleier-3); border: 1px solid var(--linie-4); -webkit-backdrop-filter: var(--glas); backdrop-filter: var(--glas); }
.vergleich__griff i::before, .vergleich__griff i::after { content: ""; position: absolute; top: 50%; width: 10px; height: 8px; margin-top: -4px; background: var(--weiss);
  -webkit-mask: var(--pfeil-zeichen) center / contain no-repeat; mask: var(--pfeil-zeichen) center / contain no-repeat; }
.vergleich__griff i::before { left: var(--a-2); transform: scaleX(-1); }
.vergleich__griff i::after { right: var(--a-2); }

/* Ergebnis und Kundenstimme in der Fallstudie */
.fall-ergebnis { --karte-licht: var(--kunde-licht); --licht-an: 1; gap: 0; }
.fall-ergebnis .zahl { margin-top: 0; }
.fall-ergebnis > .platzhalter { margin-top: var(--takt-3); }
.fall-stimme { margin: var(--takt-4) 0 0; padding-top: var(--takt-3); border-top: 1px solid var(--linie-2); display: flex; flex-direction: column; gap: var(--a-5); }
.fall-stimme__zitat { margin: 0; max-width: var(--mass-l); font-size: var(--t-lead); font-weight: 500; line-height: var(--zeile-mittel); color: var(--weiss); }

/* Nächste Arbeit */
.weiter-arbeit { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a-6); padding-top: var(--takt-5); border-top: 1px solid var(--linie-2); }
.weiter-arbeit__link { align-self: stretch; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--a-6); text-decoration: none; }
.weiter-arbeit__text { display: flex; flex-direction: column; gap: var(--a-3); min-width: 0; }
.weiter-arbeit__name { font-size: var(--t-titel); font-weight: 900; line-height: var(--zeile-display); letter-spacing: var(--sperrung-display); overflow-wrap: anywhere; transition: color var(--dauer-2) ease; }
.weiter-arbeit__link:hover .weiter-arbeit__name, .weiter-arbeit__link:focus-visible .weiter-arbeit__name { color: rgb(var(--kunde-licht)); }
.weiter-arbeit__art { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.weiter-arbeit__handy { flex-shrink: 0; width: var(--a-20); aspect-ratio: 1 / 2; padding: var(--a-05); border-radius: var(--r-m); overflow: hidden; background: var(--ebene-3);
  box-shadow: var(--ring), 0 24px 60px -20px rgba(var(--kunde-licht), .7); transition: transform var(--dauer-2) var(--weich); }
.weiter-arbeit__handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: var(--r-s); }
.weiter-arbeit__link:focus-visible .weiter-arbeit__handy { transform: translateY(calc(var(--a-2) * -1)); }

@media (min-width: 821px) {
  /* Handys wie ein iPhone (1 : 2), höchstens --breite-handy breit, der Platz dazwischen wächst mit */
  .reihe__liste { display: grid; grid-template-columns: repeat(6, minmax(0, var(--breite-handy))); justify-content: space-between; gap: var(--a-6); margin: 0; padding: var(--a-6) 0 0; overflow: visible; }
  .projekt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--spalten-luecke); align-items: center; }
  .projekt:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .projekt:nth-child(even) .projekt__bild { order: 2; }
  .projekt__bild { padding-bottom: 0; }
  .projekt__handy { right: -3%; bottom: -12%; width: 21%; }
  .projekt__beleg .zahl { font-size: var(--t-held); }
  .fall-kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--spalten-luecke); }
  .fall-kopf__intro { grid-column: 1; }
  .fall-kopf .fakten { grid-column: 2; align-self: end; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .fall-kopf__bild { grid-column: 1 / -1; margin-top: var(--takt-5); }
  .fall-kopf__bild .projekt__handy { right: 4%; bottom: -10%; width: 17%; }
  .vergleich__platz { padding: var(--a-8) 55% var(--a-8) var(--a-8); }
  .vergleich__platz-text { font-size: var(--t-ui); }
  .vergleich__marke { top: var(--a-5); }
  .vergleich__marke--vorher { left: var(--a-5); }
  .vergleich__marke--nachher { right: var(--a-5); }
  .weiter-arbeit__handy { width: calc(var(--a-20) * 1.6); }
}

/* ==========================================================================
   Über uns (Unterseite)
   Wer dahintersteht, woher der Name kommt, die drei Prinzipien ausführlich und
   wie ein Ansprechpartner mit einem Netzwerk zusammenarbeitet.
   ========================================================================== */
.gruender { display: grid; row-gap: var(--takt-4); }
.gruender__foto { position: absolute; inset: 0; }
.gruender__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(.9) saturate(.92); }
.gruender__titel { margin-top: var(--takt-1); font-size: var(--t-held); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel); }
.gruender__rolle { margin-top: var(--a-2); font-size: var(--t-ui); line-height: var(--zeile-knapp); color: var(--text-3); }
.gruender__satz { margin: var(--takt-3) 0 0; max-width: var(--mass-m); font-size: var(--t-h3); font-weight: 800; line-height: var(--zeile-zwischen); letter-spacing: var(--sperrung-zwischen); }
.gruender__absatz { margin-top: var(--takt-2); max-width: var(--mass-l); font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }

/* Der Name: aus „valor“ wird Valoora */
.name-herkunft { text-align: center; }
.name-herkunft__wort { margin-top: var(--takt-2); font-size: var(--t-display); font-weight: 900; line-height: var(--zeile-display); letter-spacing: var(--sperrung-display); white-space: nowrap; }
.name-herkunft__anfang { display: inline-grid; }
.name-herkunft__anfang > span { grid-area: 1 / 1; justify-self: end; transition: opacity var(--dauer-3) ease; }
.name-herkunft__klein { opacity: 0; }
.name-herkunft__gross { color: var(--weiss); } /* aus v wird V, in derselben Farbe: neu sind nur o und a */
.name-herkunft__neu { display: inline-block; max-width: .7em; overflow: hidden; vertical-align: bottom; color: var(--violett-hell);
  transition: max-width var(--dauer-3) var(--weich), opacity var(--dauer-3) ease; }
/* Mit JavaScript steht erst „valor“ da, beim Hereinscrollen wird daraus Valoora */
.js .name-herkunft:not(.ist-valoora) .name-herkunft__neu { max-width: 0; opacity: 0; }
.js .name-herkunft:not(.ist-valoora) .name-herkunft__gross { opacity: 0; }
.js .name-herkunft:not(.ist-valoora) .name-herkunft__klein { opacity: 1; }
.bereit .name-herkunft .name-herkunft__neu { max-width: .7em; opacity: 1; }
.bereit .name-herkunft .name-herkunft__gross { opacity: 1; }
.bereit .name-herkunft .name-herkunft__klein { opacity: 0; }
.name-herkunft__text { margin: var(--takt-3) auto 0; max-width: var(--mass-m); }
.name-herkunft__satz { font-size: var(--t-h3); font-weight: 800; line-height: var(--zeile-zwischen); letter-spacing: var(--sperrung-zwischen); }
.name-herkunft__absatz { margin-top: var(--a-4); font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }

/* Die drei Prinzipien, ausführlich (Namen wie in Szene 3, das Bequeme durchgestrichen) */
.grundsaetze__liste { margin: var(--takt-5) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--takt-6); }
.grundsatz__kopf { display: flex; align-items: center; gap: var(--a-4); margin-bottom: var(--takt-1); }
.grundsatz__linie { flex: 1; height: 1px; background: var(--linie-3); transform-origin: left center; }
.grundsatz__name { font-size: var(--t-prinzip); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-prinzip); }
.grundsatz__alt { position: relative; display: inline-block; white-space: nowrap; color: var(--text-aus); }
.grundsatz__strich { position: absolute; left: -.04em; right: -.04em; top: 53%; height: .075em; border-radius: .05em; background: var(--mint); box-shadow: var(--glut-strich-ruhig); transform-origin: left center; }
.grundsatz__koerper { display: grid; row-gap: var(--takt-2); margin-top: var(--takt-3); }
.grundsatz__kern { max-width: var(--mass-s); font-size: var(--t-h3); font-weight: 800; line-height: var(--zeile-zwischen); letter-spacing: var(--sperrung-zwischen); }
.grundsatz__text > p { max-width: var(--mass-l); font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }
.grundsatz__text > p + p { margin-top: var(--a-4); }
.grundsatz__text > .grundsatz__fuer { margin-top: var(--a-8); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.grundsatz .v-liste { margin-top: var(--a-3); }
/* Mit JavaScript: erst steht das Bequeme da, beim Hereinscrollen wird es durchgestrichen */
.grundsatz__alt { transition: color var(--dauer-3) ease; }
.grundsatz__strich, .grundsatz__linie { transition: transform var(--dauer-3) var(--weich); }
.js .grundsatz:not(.ist-korrigiert) .grundsatz__alt { color: var(--text-4); }
.js .grundsatz:not(.ist-korrigiert) .grundsatz__strich, .js .grundsatz:not(.ist-korrigiert) .grundsatz__linie { transform: scaleX(0); }

/* Zusammenarbeit: ein Ansprechpartner, Spezialisten je nach Projekt */
.netzwerk__koerper { display: grid; row-gap: var(--takt-4); margin-top: var(--takt-4); }
.netzwerk__text p { max-width: var(--mass-l); font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }
.netzwerk__text p + p { margin-top: var(--a-4); color: var(--weiss); font-weight: 600; }
.netz { margin: 0; container: netz / inline-size; }
.netz__feld { --netz-linie: var(--linie-3); display: flex; flex-direction: column; align-items: center; }
.netz__knoten { display: flex; align-items: center; justify-content: center; gap: var(--a-3); min-height: var(--ziel); padding: var(--a-2) var(--a-5); border-radius: var(--r-pille);
  border: 1px solid var(--linie-3); background: var(--ebene-2); font-size: var(--t-ui); font-weight: 700; line-height: var(--zeile-knapp); text-align: center;
  transition: border-color var(--dauer-2) ease, background-color var(--dauer-2) ease, color var(--dauer-2) ease, box-shadow var(--dauer-2) ease; }
.netz__knoten--du { border-color: var(--linie-5); }
.netz__knoten--philip { padding: var(--a-2) var(--a-5) var(--a-2) var(--a-2); border-color: var(--mint-rand); background: var(--ebene-mint); box-shadow: 0 0 var(--a-10) var(--mint-hauch); text-align: left; }
.netz__knoten--philip img { width: var(--ziel); height: var(--ziel); border-radius: 50%; object-fit: cover; }
.netz__knoten--philip span { display: flex; flex-direction: column; font-size: var(--t-klein); font-weight: 500; color: var(--text-2); }
.netz__knoten--philip b { font-size: var(--t-ui); font-weight: 700; color: var(--weiss); }
/* Linien: grau, das Licht fährt hinein (--an von 0 bis 1, ohne JavaScript ganz an) */
.netz__linie { position: relative; display: block; width: 2px; height: var(--a-10); background: var(--netz-linie); }
.netz__linie::after { content: ""; position: absolute; inset: 0; background: var(--mint); box-shadow: 0 0 var(--a-2) var(--schein-mint); transform-origin: top center; transform: scaleY(var(--an, 1)); }
.netz__spezial { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-2); width: 100%; margin: 0; padding: var(--a-6) 0 0; list-style: none; }
.netz__spezial::before { content: ""; position: absolute; top: 0; left: 16.66%; right: 16.66%; height: 2px; background: var(--netz-linie); }
.netz__knoten--spezial { position: relative; padding: var(--a-2) var(--a-2); border-style: dashed; color: var(--text-3); font-size: var(--t-klein); }
.netz__knoten--spezial::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: var(--a-6); margin-left: -1px; background: var(--netz-linie); transition: background-color var(--dauer-2) ease; }
.netz__knoten--spezial.ist-an { border-style: solid; border-color: var(--mint-rand); color: var(--weiss); }
.netz__knoten--spezial.ist-an::before { background: var(--mint); }
.netz__spezial:has(.ist-an)::before { background: var(--mint); transition: background-color var(--dauer-2) ease; }
.netz .spiel__unter { text-align: center; }
/* Genug Platz (Container-Abfrage am Bauteil, kein neuer Breakpoint): waagerecht, die Spezialisten an einer Klammer */
@container netz (min-width: 560px) {
  .netz__feld { flex-direction: row; justify-content: center; }
  .netz__linie { width: var(--a-12); height: 2px; flex-shrink: 0; }
  .netz__linie::after { transform-origin: left center; transform: scaleX(var(--an, 1)); }
  .netz__spezial { grid-template-columns: minmax(0, 1fr); gap: var(--a-3); width: auto; padding: 0 0 0 var(--a-6); }
  .netz__spezial::before { top: calc(var(--ziel) / 2); bottom: calc(var(--ziel) / 2); left: 0; right: auto; width: 2px; height: auto; }
  .netz__knoten--spezial { padding: var(--a-2) var(--a-5); font-size: var(--t-ui); white-space: nowrap; }
  .netz__knoten--spezial::before { left: auto; right: 100%; bottom: auto; top: 50%; width: var(--a-6); height: 2px; margin: -1px 0 0; }
}

@media (min-width: 821px) {
  .gruender { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--spalten-luecke); align-items: center; }
  .grundsatz__koerper { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--spalten-luecke); align-items: start; }
  .netzwerk__koerper { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--spalten-luecke); align-items: center; }
}

/* ==========================================================================
   Rechtliches (Impressum, Datenschutz): schlicht, im selben System
   ========================================================================== */
.recht__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mass-s)), 1fr)); gap: var(--a-8) var(--a-12); margin-top: var(--takt-4); padding-top: var(--takt-2); border-top: 1px solid var(--linie-2); }
.recht__kopf { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--sperrung-label); text-transform: uppercase; color: var(--mint); }
.recht__block p, .recht__text p, .recht__text li { max-width: var(--mass-l); font-size: var(--t-text); line-height: var(--zeile-text); color: var(--text-2); }
.recht__block p { margin-top: var(--a-3); }
.recht__block a, .recht__text a { color: var(--weiss); text-decoration-color: var(--linie-4); text-underline-offset: .2em; overflow-wrap: anywhere; }
.recht__block a:hover, .recht__text a:hover { text-decoration-color: var(--mint); }
.recht__block--breit { margin-top: var(--takt-4); padding-top: var(--takt-2); border-top: 1px solid var(--linie-2); }
.recht__liste { margin-top: var(--takt-4); }
.recht__abschnitt { padding: var(--takt-2) 0; border-top: 1px solid var(--linie-2); }
.recht__abschnitt h2 { display: flex; align-items: baseline; gap: var(--a-4); font-size: var(--t-lead); font-weight: 700; line-height: var(--zeile-knapp); letter-spacing: var(--sperrung-ui); }
.recht__abschnitt h2 .label { flex-shrink: 0; }
.recht__text { margin-top: var(--a-4); }
.recht__text p + p, .recht__text ul + p, .recht__text p + ul { margin-top: var(--a-4); }
.recht__text ul { padding-left: var(--a-5); list-style: disc; }
.recht__text li::marker { color: var(--mint); }
.recht__weiter { margin-top: var(--takt-4); }
/* Eingeschobener Rechtstext im Rechtstext: Widerrufsbelehrung und Muster-Widerrufsformular in den AGB (seit 01.10.2026) */
.recht__einschub { margin-top: var(--a-6); padding: var(--a-6); border: 1px solid var(--linie-2); border-radius: var(--r-m); background: var(--flaeche-1); }
.recht__einschub + p { margin-top: var(--a-6); }
.recht__einschub h3 { font-size: var(--t-lead); font-weight: 700; line-height: var(--zeile-knapp); letter-spacing: var(--sperrung-ui); color: var(--weiss); }
.recht__einschub h4 { margin-top: var(--a-6); font-size: var(--t-ui); font-weight: 700; line-height: var(--zeile-knapp); color: var(--weiss); }
.recht__einschub h3 + p, .recht__einschub h3 + h4 { margin-top: var(--a-4); }
.recht__einschub h4 + p { margin-top: var(--a-2); }
.recht__einschub ul + p { margin-top: var(--a-4); }
/* Hinweis auf die verbindliche deutsche Fassung, setzt _werkzeuge/bauen.py in den Rechtstexten auf Englisch und Portugiesisch ein */
.recht__hinweis { max-width: var(--mass-l); margin-top: var(--a-6); padding: var(--a-4) var(--a-5); border-left: 2px solid var(--mint); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--flaeche-1); font-size: var(--t-klein); line-height: var(--zeile-text); color: var(--text-2); }
@media (min-width: 821px) {
  .recht__abschnitt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--spalten-luecke); }
  .recht__text { margin-top: 0; }
}

/* ---------- Fuß ---------- */
.fuss { padding: var(--a-12) var(--rand-aussen) calc(var(--a-10) + env(safe-area-inset-bottom)); color: var(--text-2); font-size: var(--t-klein); }
/* Jede Seite endet im Licht von Valoora: ein leichter Schein von unten, keine Linie */
.fuss::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(70% 95% at 50% 100%, rgba(var(--licht-violett), .2), rgba(var(--licht-violett), 0) 72%),
              radial-gradient(35% 60% at 8% 100%, rgba(var(--licht-leer), .12), rgba(var(--licht-leer), 0) 70%); }
/* Kein eigener schwarzer Grund (Philip, 03.10.2026): Am Seitenende soll die Seite bis hinter Safaris Leiste weiterlaufen
   statt in einem schwarzen Block zu enden. Damit auf der Startseite und bei Referenzen die 3D-Galerie nicht hinter
   Adresse und Links steht, liegt unter dem Fuss ein Glasschleier wie in der Kopfzeile (--glas, Verlauf umgedreht).
   Er setzt im oberen Innenabstand weich ein, bevor der Text beginnt. Das ersetzt die fruehere harte Linie. */
.fuss::after { content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--schleier-1), var(--schleier-3));
  -webkit-backdrop-filter: var(--glas); backdrop-filter: var(--glas);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--a-12)); mask-image: linear-gradient(to bottom, transparent, #000 var(--a-12)); }
.fuss__raster { display: flex; flex-direction: column; gap: var(--a-4); }
.fuss a { text-decoration: none; }
.fuss a:hover, .fuss a[aria-current] { color: var(--weiss); }
.fuss__recht { display: flex; gap: var(--a-6); }
.fuss__direkt { flex-direction: column; gap: 0; } /* Zeilen wie die Adresse daneben */
@media (min-width: 821px) { .fuss__raster { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
/* Seitenende auf Touch-Geräten (Philip, 03.10.2026, zweiter Test am iPhone): Unter das Ende der Seite kann sie selbst
   nichts malen, dort zeigt Safari hinter seiner Leiste die Seitenfarbe (--nacht). Damit an dieser Kante kein Balken
   entsteht, läuft der Fuß im unteren Innenabstand weich in genau diese Farbe aus: Der Schein wird nach unten
   ausgeblendet, der Schleier wird deckend. Mitten auf der Seite läuft sie weiter hinter der Leiste durch. */
@media (hover: none) and (pointer: coarse) {
  .fuss::before { -webkit-mask-image: linear-gradient(to top, transparent, #000 var(--a-16)); mask-image: linear-gradient(to top, transparent, #000 var(--a-16)); }
  .fuss::after { background: linear-gradient(to bottom, var(--schleier-1), var(--schleier-3) calc(100% - var(--a-16)), var(--nacht)); }
}

/* ---------- Textseite (Zwischenseite, Danke ohne JavaScript) ---------- */
.seite-text { min-height: 100svh; background: radial-gradient(70% 55% at 50% 60%, var(--violett-hauch), var(--schleier-0) 70%), var(--nacht); }
.textseite { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--a-4); padding: calc(var(--kopf) + var(--a-10)) var(--rand) var(--a-16); max-width: var(--breite-text); margin: 0 auto; }
.textseite__label { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--sperrung-meta); text-transform: uppercase; color: var(--text-3); }
.textseite__titel { font-size: var(--t-held); font-weight: 900; line-height: var(--zeile-titel); letter-spacing: var(--sperrung-titel); }
.textseite__text { font-size: var(--t-text); color: var(--text-2); max-width: var(--mass-l); margin-bottom: var(--a-2); }

/* ---------- Seitenwechsel: der Schnitt ---------- */
/* Die Farbe liegt auf ::before: so zaehlt der Schnitt fuer Safari nicht als eigene Farbflaeche (siehe .kante). */
.schnitt { position: fixed; inset: 0; z-index: 150; pointer-events: none; clip-path: polygon(50% 100%, 50% 100%, 50% 100%); }
.schnitt::before { content: ""; position: absolute; inset: 0; background: var(--nacht); }
.schnitt-kommt .schnitt { clip-path: none; }

/* ---------- Safaris Leisten auf dem iPhone ---------- */
/* Safari ab iOS 26 prüft genau in der Mitte des oberen und unteren Randes, welches feste Element (fixed/sticky) dort
   ganz oben liegt. Ist es breit (Kopf, Vignette, Bühne der Startseite), malt Safari unter seine Leiste einen festen
   Farbblock in der Farbe des Elements, bei Glas (backdrop-filter) in der Seitenfarbe. Liegt dort kein solches Element,
   läuft die Seite sichtbar hinter der Leiste weiter (WebKit, LocalFrameView::fixedContainerEdges).
   Unten (Philip, 03.10.2026): Die Seite läuft hinter Safaris Leiste weiter. Dafür liegt dort ein kleiner, unsichtbarer
   Punkt über allem. Safari stößt zuerst auf ihn, hält ihn für zu klein und sucht nicht weiter. Er muss klein bleiben,
   braucht den (durchsichtigen) Hintergrund, sonst zählt er als leer, und darf kein Pseudo-Element sein. Nicht entfernen.
   Oben am Desktop genauso.
   Oben auf Touch-Geräten (Philip, 04.10.2026): Hinter der Uhr steht immer die Seitenfarbe, mit harter Kante direkt unter
   der Uhr wie auf der Live-Seite, der Inhalt verschwindet einfach dahinter. Ist der Kopf da, trifft Safari auf ihn: Sein
   Glas ergibt die Seitenfarbe. Fährt der Kopf weg, wird der obere Punkt zur schmalen Kante in --nacht über die ganze
   Breite (unter Kopf und Schrittleiste), auf die Safari dann trifft. Sie ragt zur Hälfte über den oberen Rand, sichtbar
   bleiben 8 px; Safari braucht für die Farbe eine Fläche über 10 px Höhe, gemessen 4 px unter dem Rand. Sie verschwindet
   erst, wenn der Kopf wieder ganz da ist (Verzögerung = Dauer der Kopf-Bewegung), sonst blitzt Inhalt auf.
   Menü offen: Der untere Punkt geht aus, Safari trifft dann unten auf das Menü und malt seine Leiste in --nacht. */
.kante { position: fixed; left: 50%; width: 24px; height: 24px; margin-left: -12px; z-index: 195; pointer-events: none;
  background-image: linear-gradient(transparent, transparent); }
.kante--oben { top: 0; }
.kante--unten { bottom: 0; }
body.menue-offen .kante--unten { visibility: hidden; transition: visibility 0s var(--dauer-2); }
@media (hover: none) and (pointer: coarse) {
  .kante--oben { left: 0; width: 100%; top: calc(var(--a-2) * -1); height: var(--a-4); margin-left: 0; z-index: 65; background: var(--nacht);
    visibility: hidden; transition: visibility 0s var(--dauer-2); }
  .kopf--weg ~ .kante--oben { visibility: visible; transition-delay: 0s; }
}

/* ---------- Startzustände nur mit JS, mit Notfall-Freigabe (nur Startseite: dort blendet einstieg.js sie ein) ---------- */
.js .titel__innen, .js .einstieg__unter, .js .gesicht-info, .js .seite-start .kopf { opacity: 0; animation: notfall 0s 4s forwards; }
.bereit .titel__innen, .bereit .einstieg__unter, .bereit .gesicht-info, .bereit .seite-start .kopf { animation: none; }
@keyframes notfall { to { opacity: 1; transform: none; } }
/* Unterseiten: der Seitenkopf startet verdeckt (kern.js übernimmt, sonst Freigabe nach 4 s) */
.js [data-auftritt="sofort"] .abschnitt__zeile > span { transform: translateY(112%); animation: notfall 0s 4s forwards; }
.js [data-auftritt="sofort"] [data-auftritt-teil] { opacity: 0; transform: translateY(18px); animation: notfall 0s 4s forwards; }
.bereit [data-auftritt="sofort"] .abschnitt__zeile > span, .bereit [data-auftritt="sofort"] [data-auftritt-teil] { opacity: 1; transform: none; animation: none; }
/* Bühnen, die beim Laden mit dem V-Licht angehen (Fallstudien), starten verdeckt */
.js [data-v-sofort] [data-v-seite] { clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); animation: notfall-frei 0s 4s forwards; }
.bereit [data-v-sofort] [data-v-seite] { clip-path: none; animation: none; }
@keyframes notfall-frei { to { clip-path: none; } }

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .atmosphaere::after { animation: none; }
  .intro { display: none; }
  .prinzip__strich { transform: none; background: var(--mint); box-shadow: none; }
  .band__zeiger { display: none; }
  .leer__balken:nth-child(3)::after, .leer__name::after { animation: none; }
  .leer__v { display: none; }
}