/* dennis-cyrus.de · Gestaltung in einer Datei.
   Aufbau: Schriften · Tokens · Grundlagen · Bausteine · Seiten.
   Regeln: keine Inline-Styles im HTML, Farben nur über Tokens, hell und dunkel über prefers-color-scheme. */

/* ---------- Schriften (selbst gehostet, SIL Open Font License) ---------- */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/archivo-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --flaeche: #F4F3EE;
  --flaeche-2: #EAE8E0;
  --flaeche-3: #DDD9CE;
  --text: #15191D;
  --text-2: #4B525B;
  --rand: #CFCBC0;
  --akzent: #355DF4;
  --akzent-text: #FFFFFF;
  --akzent-dunkel: #2443C4;
  --akzent-weich: #E3E9FF;
  --amber: #D9A34A;
  --amber-weich: #F6E7C8;
  --buehne: #15191D;
  --buehne-2: #1E242B;
  --buehne-text: #F4F3EE;
  --buehne-text-2: #B9BFC8;
  --buehne-rand: #2F3740;
  --buehne-akzent: #8FA6FF;
  --schrift-titel: "Archivo", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --schrift-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --radius: 0.85rem;
  --radius-klein: 0.45rem;
  --breite: 86rem;
  --breite-schmal: 46rem;
  --abstand: clamp(3.5rem, 8vw, 7rem);
  --abstand-klein: clamp(1.5rem, 3vw, 2.5rem);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --flaeche: #121518;
    --flaeche-2: #1A1F25;
    --flaeche-3: #262D35;
    --text: #F1EFE8;
    --text-2: #B3BAC3;
    --rand: #343C46;
    --akzent: #8FA6FF;
    --akzent-text: #0C1333;
    --akzent-dunkel: #B1C0FF;
    --akzent-weich: #1C2540;
    --amber: #E1B263;
    --amber-weich: #3A2F18;
    --buehne: #1C2127;
    --buehne-2: #262D35;
    --buehne-rand: #3A434E;
    --buehne-akzent: #9FB3FF;
  }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Sanftes Scrollen nur bei Sprunglinks und Tastaturfokus, nicht bei programmatischem Scrollen (Screenshots, Tests). */
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
p, ul, ol, dl { margin: 0 0 1em; }
ul, ol { padding-left: 1.25rem; }
a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--akzent-dunkel); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }
img, svg, video { max-width: 100%; height: auto; }
code, pre { font-family: var(--schrift-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--rand); margin: var(--abstand-klein) 0; }
table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; font-size: 0.97rem; }
th, td { text-align: left; padding: 0.55em 0.6em; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-weight: 600; }

.rahmen { width: min(100% - 2rem, var(--breite)); margin-inline: auto; }
.rahmen--schmal { max-width: var(--breite-schmal); }
.visuell-versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.dachzeile { font-family: var(--schrift-mono); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 0.9em; }
.dachzeile a { color: inherit; }
.einleitung { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--text-2); max-width: 38em; text-wrap: pretty; }
.gross { font-size: 1.2rem; line-height: 1.5; }
.sprung { position: absolute; left: 1rem; top: -4rem; background: var(--akzent); color: var(--akzent-text); padding: 0.6rem 1rem; border-radius: var(--radius-klein); z-index: 100; }
.sprung:focus { top: 1rem; }
.entwurf { background: var(--amber); color: #15191D; text-align: center; font-family: var(--schrift-mono); font-size: 0.8rem; padding: 0.35rem 1rem; }

/* ---------- Kopf und Navigation ---------- */
/* Bleibt oben; wird nach dem Einstieg kompakter (Klasse aus kopf.js); Anker landen unterhalb der Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--rand); background: var(--flaeche); }
.kopf__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.9rem 0; transition: padding 0.2s ease; }
.kopf--kompakt .kopf__zeile { padding: 0.45rem 0; }
.kopf--kompakt .wortmarke__zusatz { display: none; }
.kopf--kompakt .wortmarke__name { font-size: 1.1rem; }
section[id], div[id], article[id] { scroll-margin-top: 4.75rem; }
/* Menüknopf: drei Linien, die sich beim Öffnen zum Kreuz drehen */
.nav__menue { display: none; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; cursor: pointer; padding: 0; border-radius: 50%; border: 1px solid var(--rand); background: transparent; color: var(--text); position: relative; }
.nav__menue:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.nav__balken, .nav__balken::before, .nav__balken::after { display: block; width: 1.15rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; }
.nav__balken { position: relative; }
.nav__balken::before, .nav__balken::after { content: ""; position: absolute; left: 0; }
.nav__balken::before { top: -0.36rem; }
.nav__balken::after { top: 0.36rem; }
.nav__menue[aria-expanded="true"] .nav__balken { background: transparent; }
.nav__menue[aria-expanded="true"] .nav__balken::before { transform: translateY(0.36rem) rotate(45deg); }
.nav__menue[aria-expanded="true"] .nav__balken::after { transform: translateY(-0.36rem) rotate(-45deg); }
.wortmarke { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--text); text-decoration: none; }
.wortmarke__zeichen { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--akzent); box-shadow: 0.95rem 0 0 -0.2rem var(--amber); margin-right: 0.8rem; flex: none; }
.wortmarke__text { display: flex; flex-direction: column; line-height: 1.15; }
.wortmarke__name { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
.wortmarke__zusatz { font-size: 0.78rem; color: var(--text-2); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; }
.nav__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; }
.nav__liste a { color: var(--text); text-decoration: none; font-weight: 500; padding: 0.35rem 0; border-bottom: 2px solid transparent; }
.nav__liste a:hover { border-bottom-color: var(--rand); }
.nav__liste a[aria-current="page"], .nav__liste a[aria-current="true"] { border-bottom-color: var(--akzent); }
@media (max-width: 48rem) {
  /* Schmal: eine Zeile mit Wortmarke, Menüknopf und Knopf; Untertitel entfällt */
  .kopf__zeile { padding: 0.65rem 0; flex-wrap: nowrap; gap: 0.5rem; }
  .wortmarke__zusatz { display: none; }
  .wortmarke__name { font-size: 1.1rem; }
  .wortmarke__zeichen { margin-right: 0.5rem; }
  .nav { gap: 0.5rem; flex-wrap: nowrap; flex: none; }
  .nav .knopf--klein { padding: 0.5rem 0.85rem; font-size: 0.88rem; white-space: nowrap; }
  /* Mit JavaScript: Menüknopf statt Liste, Liste klappt unter der Kopfzeile auf. Ohne JavaScript: Liste wie bisher. */
  .hat-js .nav__menue { display: inline-flex; order: 3; }
  .hat-js .nav .knopf--klein { order: 1; }
  .hat-js .nav__liste { order: 2; }
  .hat-js .nav__liste { display: none; }
  .hat-js .nav--offen .nav__liste { display: grid; gap: 0.25rem; position: absolute; left: 0; right: 0; top: 100%; padding: 0.75rem 1rem 1rem; background: var(--flaeche); border-bottom: 1px solid var(--rand); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.35); }
  .hat-js .nav--offen .nav__liste a { display: block; padding: 0.55rem 0; font-size: 1.05rem; }
  .kopf:not(.hat-js) .kopf__zeile, .kopf:not(.hat-js) .nav { flex-wrap: wrap; }
  .kopf:not(.hat-js) .nav { width: 100%; justify-content: space-between; }
  .kopf:not(.hat-js) .nav__liste { gap: 0.2rem 0.9rem; font-size: 0.95rem; }
}
@media (max-width: 26rem) {
  .nav .knopf--klein { padding: 0.4rem 0.65rem; font-size: 0.8rem; }
  .nav { gap: 0.4rem; }
  .nav__menue { width: 2.5rem; height: 2.5rem; }
  .wortmarke { gap: 0.5rem; }
  .wortmarke__zeichen { margin-right: 0.4rem; }
  .wortmarke__name { font-size: 1rem; white-space: nowrap; }
}
@media (max-width: 21.5rem) {
  .kopf__zeile { flex-wrap: wrap; }
  .hat-js .nav { margin-left: auto; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-block; padding: 0.8rem 1.35rem; border-radius: 999px; font-weight: 600; text-decoration: none;
  background: var(--akzent); color: var(--akzent-text); border: 1px solid transparent; line-height: 1.2; transition: background 0.15s ease, transform 0.15s ease;
}
.knopf:hover { background: var(--akzent-dunkel); color: var(--akzent-text); transform: translateY(-1px); }
.knopf--zweit { background: transparent; color: var(--text); border-color: var(--text); }
.knopf--zweit:hover { background: var(--flaeche-2); color: var(--text); }
.knopf--hell { background: var(--buehne-text); color: var(--buehne); }
.knopf--hell:hover { background: #fff; color: var(--buehne); }
.knopf--klein { padding: 0.55rem 1rem; font-size: 0.95rem; }
.knopf--rand { background: transparent; color: var(--buehne-text); border-color: var(--buehne-text-2); }
.knopf--rand:hover { background: var(--buehne-2); color: var(--buehne-text); }
.aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.5rem 0 1rem; }
.aktionen .hinweis-klein { flex-basis: 100%; }
.hinweis-klein { font-size: 0.9rem; color: var(--text-2); margin: 0; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--abstand) 0; }
.abschnitt--eng { padding: var(--abstand-klein) 0; }
.abschnitt__kopf { max-width: 42em; margin-bottom: var(--abstand-klein); }
.abschnitt__kopf .einleitung { margin-bottom: 0; }
.verbindung { position: relative; height: var(--abstand-klein); width: 2px; margin-inline: auto; background: linear-gradient(var(--rand), transparent); }

/* ---------- Held (Startseite): Text links, echte Produktansicht rechts ---------- */
.held { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); }
.held__raster { display: grid; gap: 1.25rem clamp(2rem, 5vw, 4.5rem); align-items: end; }
@media (min-width: 56rem) {
  .held__raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .held__raster .film { grid-column: 1 / -1; }
  .held__text { padding-bottom: 0.4rem; }
}
.held h1 { max-width: 10em; font-size: clamp(2.5rem, 5.6vw, 4.4rem); margin-bottom: 0; }
.held__dachzeile { font-family: var(--schrift-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--akzent); margin: 0 0 1rem; }
.held .einleitung { max-width: 26em; margin-top: 0; margin-bottom: 1.25rem; }
/* Breite Bildschirme: Text links, Film rechts, beides in einem Blick */
@media (min-width: 72rem) {
  .held__raster { grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); grid-template-areas: "titel film" "text film"; align-items: center; column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: 0; }
  .held__titel { grid-area: titel; align-self: end; }
  .held__text { grid-area: text; align-self: start; padding-bottom: 0; }
  .held__raster .film { grid-area: film; margin-top: 0; }
  .held h1 { font-size: clamp(2.4rem, 3.5vw, 3.8rem); max-width: 9em; }
}

/* Leistungen als drei Stufen: laufen von selbst (data-auto), Fortschritt in Amber, Standbild aus dem Film */
.stufen { margin-top: var(--abstand-klein); background: var(--buehne); color: var(--buehne-text); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 56rem) { .stufen { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); align-items: center; } }
.stufen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.stufen__liste button { width: 100%; font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.15rem; padding: 0.95rem 1.1rem 1.05rem; border-radius: var(--radius-klein); border: 1px solid var(--buehne-rand); background: transparent; color: var(--buehne-text-2); line-height: 1.35; transition: border-color 0.15s ease, background 0.15s ease; }
.stufen__liste button strong { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.15rem; color: var(--buehne-text); }
.stufen__kurz { grid-column: 2; font-size: 0.9rem; }
.stufen__nr { font-family: var(--schrift-mono); font-size: 0.8rem; color: var(--buehne-text-2); grid-row: 1 / 3; padding-top: 0.3rem; }
.stufen__liste button:hover { border-color: var(--buehne-text-2); }
.stufen__liste button[aria-selected="true"] { background: var(--buehne-2); border-color: var(--amber); }
.stufen__liste button[aria-selected="true"] .stufen__nr { color: var(--amber); }
.stufen__liste button:focus-visible { outline: 3px solid var(--buehne-akzent); outline-offset: 2px; }
.stufen__tafel[hidden] { display: none; }
.hat-js .stufen__tafel { animation: stufen-wechsel 0.35s ease; }
@keyframes stufen-wechsel { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
.stufen__bild { border-radius: var(--radius-klein); overflow: hidden; aspect-ratio: 16 / 9; background: #0A1B3C; }
.stufen__bild picture, .stufen__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stufen__text { margin: 0.9rem 0 0; color: var(--buehne-text-2); }
.stufen__text strong { color: var(--amber); font-weight: 600; }
.stufen:not(.hat-js) .stufen__tafel + .stufen__tafel { margin-top: 1.5rem; }
.leistungen__satz { margin: var(--abstand-klein) 0 0; max-width: 32em; font-family: var(--schrift-titel); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }

/* Fortschrittsbalken für Reiter, die von selbst weiterblättern (Klasse laeuft aus start.js, Dauer aus --auto) */
[data-auto] [role="tab"] { position: relative; overflow: hidden; }
[data-auto] [role="tab"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--amber); transform: scaleX(0); transform-origin: left center; }
.laeuft [role="tab"][aria-selected="true"]::after { animation: auto-fuellen var(--auto, 8s) linear forwards; }
@keyframes auto-fuellen { to { transform: scaleX(1); } }

/* Prozesslabor-Einstieg: zwei Bildkarten aus dem Film */
.labor { display: grid; gap: var(--abstand-klein); align-items: start; }
@media (min-width: 56rem) { .labor { grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 4vw, 3.5rem); } }
.labor__kopf .einleitung { margin-bottom: 0; }
.labor__karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .labor__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.labor__karte { display: grid; text-decoration: none; color: var(--text); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; background: var(--flaeche); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.labor__karte:hover { transform: translateY(-3px); border-color: var(--akzent); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.45); }
.labor__karte:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
.labor__bild { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0A1B3C; }
.labor__bild picture, .labor__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.labor__karte:hover .labor__bild img { transform: scale(1.03); }
.labor__text { display: grid; gap: 0.3rem; padding: 1rem 1.2rem 1.2rem; }
.labor__art { font-family: var(--schrift-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--akzent); }
.labor__text strong { font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 600; }
.labor__text > span:not(.labor__art):not(.labor__cta) { color: var(--text-2); font-size: 0.95rem; }
.labor__cta { margin-top: 0.4rem; font-weight: 600; color: var(--akzent); }

/* Showroom: ein dunkler Block mit drei Projekten */
.showroom__kopf { padding-top: var(--abstand); }
.showroom__kopf .einleitung { max-width: 40em; margin-bottom: 0; }
.showroom .projektbuehne + .projektbuehne > .rahmen { border-top: 1px solid var(--buehne-rand); padding-top: var(--abstand); }
.showroom .projektbuehne { padding-bottom: 0; }
.showroom .projektbuehne:last-of-type { padding-bottom: var(--abstand-klein); }
.showroom__fuss { padding: 0 0 var(--abstand); margin: 0 auto; }
.showroom__fuss a { font-weight: 600; text-decoration: none; }
.showroom__fuss a:hover { text-decoration: underline; }
.buehne .chips button { border-color: var(--buehne-rand); background: transparent; color: var(--buehne-text); }
.buehne .chips button:hover { border-color: var(--buehne-text-2); }
.buehne .chips button[aria-selected="true"] { background: var(--buehne-text); color: var(--buehne); border-color: var(--buehne-text); }
.buehne .chips button:focus-visible { outline-color: var(--buehne-akzent); }
.held .film { margin-top: clamp(1.25rem, 3vw, 2.5rem); }
.held__orientierung { font-family: var(--schrift-mono); font-size: 0.85rem; color: var(--text-2); letter-spacing: 0.03em; margin: 0; }
.held__orientierung a { color: inherit; }

/* Produktansicht: ein Rahmen für echte Screenshots, hell auch im Dunkelmodus */
.produkt { position: relative; border-radius: var(--radius); overflow: hidden; background: #FBFAF6; border: 1px solid var(--rand); box-shadow: 0 28px 60px -32px rgba(0, 0, 0, 0.55); }
.produkt picture, .produkt img { display: block; width: 100%; height: auto; }
.produkt--blende::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(rgba(251, 250, 246, 0), #FBFAF6); pointer-events: none; }
.produkt--hoch { border-radius: 1.1rem; }

/* Komposition: Board der Küche hinten, Fahrer-App vorn, ein Zustand verbindet beide */
.zustand__punkt { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--amber); margin-right: 0.5rem; vertical-align: 0.05em; }

/* Kurzfilm im Hero: Video in voller Rahmenbreite, Textebene oben links (Desktop) bzw. unter dem Bild (schmal),
   darunter eine schlanke Steuerung mit Pause, Kapitel-Fortschritt und Kinoansicht */
.film { margin: 0; container-type: inline-size; }
.film__rahmen { position: relative; }
.film__buehne { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0A1B3C; box-shadow: 0 34px 80px -40px rgba(0, 0, 0, 0.6); }
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.film--kino .film__video { cursor: pointer; }
.film__texte { position: absolute; left: 4.5%; top: 7%; width: 36%; pointer-events: none; }
.film__text { position: absolute; left: 0; top: 0; margin: 0; max-width: 100%; opacity: 0; transform: translateY(0.5rem); transition: opacity 0.55s ease, transform 0.55s ease; }
.film__text.aktiv { opacity: 1; transform: none; }
.film__text strong { display: block; font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(0.85rem, 2.4cqi, 1.75rem); line-height: 1.2; text-wrap: balance; }
.film__text > span { display: block; margin-top: 0.35em; font-size: clamp(0.75rem, 1.6cqi, 1.15rem); line-height: 1.35; }
.film__text .punkt { color: var(--film-akzent); }
.film__text[data-ton="dunkel"] { color: #15191D; --film-akzent: #355DF4; }
.film__text[data-ton="hell"] { color: #FFFFFF; text-shadow: 0 1px 14px rgba(0, 18, 60, 0.5); --film-akzent: #5EE6FF; }
.film__text--schluss { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 8%; max-width: none; transform: none; background: rgba(6, 20, 52, 0); transition: opacity 0.9s ease, background 0.9s ease; }
.film__text--schluss.aktiv { background: rgba(6, 20, 52, 0.55); }
.film__text--schluss strong { font-size: clamp(1.05rem, 3.6cqi, 2.8rem); letter-spacing: 0.08em; line-height: 1.25; }
.film__knopf { position: absolute; right: 3.5%; bottom: 7%; font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; padding: 0.65rem 1.15rem 0.65rem 2.4rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(10, 27, 60, 0.7); color: #fff; backdrop-filter: blur(6px); }
.film__knopf::before { content: ""; position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); border-style: solid; border-width: 0.4rem 0 0.4rem 0.65rem; border-color: transparent transparent transparent #fff; }
.film__knopf:hover { background: rgba(10, 27, 60, 0.9); }
.film__knopf:focus-visible, .film__schliessen:focus-visible { outline: 3px solid #5EE6FF; outline-offset: 2px; }
.film__schliessen { position: absolute; top: 0.9rem; right: 0.9rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(10, 27, 60, 0.7); color: #fff; cursor: pointer; }
.film__schliessen::before, .film__schliessen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 2px; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
.film__schliessen::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* Steuerung: Pause, fünf Kapitelsegmente mit Fortschritt, aktueller Kapitelname, Kinoansicht */
.film__steuerung { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pause verlauf kino" "pause name kino"; column-gap: 0.9rem; row-gap: 0.35rem; align-items: center; margin-top: 0.85rem; }
.film__pause { grid-area: pause; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--rand); background: var(--flaeche); cursor: pointer; position: relative; }
.film__pause::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 0.4rem 0 0.4rem 0.65rem; border-color: transparent transparent transparent var(--text); }
.film__pause--laeuft::before { transform: translate(-50%, -50%); border: 0; width: 0.6rem; height: 0.8rem; border-left: 0.2rem solid var(--text); border-right: 0.2rem solid var(--text); }
.film__pause:hover, .film__kino:hover { border-color: var(--text); }
.film__pause:focus-visible, .film__kino:focus-visible, .film__verlauf button:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.film__verlauf { grid-area: verlauf; list-style: none; margin: 0; padding: 0; display: flex; gap: 0.3rem; }
.film__verlauf li { flex: 1; display: flex; }
.film__verlauf button { flex: 1; height: 1.4rem; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.film__verlauf button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 999px; background: var(--flaeche-3); }
.film__verlauf .film__fuellung { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%) scaleX(var(--f, 0)); transform-origin: left center; border-radius: 999px; background: var(--akzent); }
.film__verlauf button:hover::before { background: var(--rand); }
.film__kapitelname { grid-area: name; margin: 0; font-family: var(--schrift-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.film__nr { color: var(--akzent); }
.film__kino { grid-area: kino; font: inherit; font-family: var(--schrift-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; padding: 0.5rem 0.8rem 0.5rem 2rem; border-radius: 999px; border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); position: relative; }
.film__kino::before { content: ""; position: absolute; left: 0.75rem; top: 50%; width: 0.8rem; height: 0.6rem; transform: translateY(-50%); border: 2px solid currentColor; border-radius: 2px; }
.film:not(.film--js) .film__steuerung { display: none; }

/* Kinoansicht: Rahmen füllt das Fenster, Video so groß wie möglich im 16:9, Steuerung darunter */
body.kino-offen { overflow: hidden; }
.film--kino .film__rahmen { position: fixed; inset: 0; z-index: 60; background: #050D1E; display: grid; grid-template-rows: 1fr auto; align-items: center; padding: clamp(0.75rem, 2.5vh, 2rem) clamp(0.75rem, 3vw, 2.5rem); }
.film--kino .film__buehne { width: min(100%, calc((100vh - 8rem) * 16 / 9)); margin-inline: auto; border-radius: var(--radius-klein); box-shadow: none; }
.film--kino .film__texte { left: calc(50% - min(50%, (100vh - 8rem) * 8 / 9) + 4.5%); top: calc(clamp(0.75rem, 2.5vh, 2rem) + 7%); }
.film--kino .film__steuerung { width: min(100%, calc((100vh - 8rem) * 16 / 9)); margin-inline: auto; --text: #F4F3EE; --text-2: #B9BFC8; --rand: #3A434E; --flaeche: #1A2233; --flaeche-3: #2A3344; --akzent: #8FA6FF; }
.film--kino .film__rahmen:fullscreen { padding: clamp(0.75rem, 2.5vh, 2rem) clamp(0.75rem, 3vw, 2.5rem); }
@media (max-width: 40rem) {
  /* Schmal: Video randlos, Texte unter dem Bild statt darüber, damit nichts verdeckt wird */
  .film { margin-inline: -1rem; }
  .film__buehne { border-radius: 0; box-shadow: none; }
  .film__texte { position: relative; left: auto; top: auto; width: auto; min-height: 4.9rem; }
  .film__text { left: 1rem; right: 1rem; top: 0.8rem; max-width: none; color: var(--text) !important; text-shadow: none !important; --film-akzent: var(--akzent) !important; }
  .film__text strong { font-size: 1.05rem; }
  .film__text > span { font-size: 0.92rem; }
  .film__text--schluss { position: absolute; left: 0; right: 0; top: 0; color: #fff !important; --film-akzent: #5EE6FF !important; }
  .film__text--schluss strong { font-size: clamp(1.1rem, 5.5cqi, 1.6rem); }
  .film__steuerung { padding-inline: 1rem; grid-template-columns: auto minmax(0, 1fr) auto; }
  .film__kino span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .film__kino { padding: 0.5rem 0.75rem 0.5rem 1.9rem; width: 2.6rem; height: 2.4rem; }
  .film__knopf { bottom: 6%; }
  .film--kino .film__rahmen { display: grid; grid-template-rows: auto auto auto; align-content: center; padding: 0.75rem 0; }
  .film--kino .film__buehne { width: 100%; border-radius: 0; }
  .film--kino .film__texte { left: auto; top: auto; }
  .film--kino .film__text { color: #F4F3EE !important; }
  .film--kino .film__steuerung { width: 100%; }
}

/* Projektbühne: ein Projekt groß, drei Stationen, echte Ansichten */
.projektbuehne { padding: var(--abstand) 0; }
.projektbuehne__raster { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "ansichten" "fuss"; }
@media (min-width: 56rem) { .projektbuehne__raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; grid-template-areas: "text ansichten" "fuss ansichten"; } }
.projektbuehne__text { grid-area: text; }
.projektbuehne__ansichten { grid-area: ansichten; }
.projektbuehne__fuss { grid-area: fuss; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin: 0; }
.projektbuehne__fuss a { font-weight: 600; text-decoration: none; }
.projektbuehne__fuss a:hover { text-decoration: underline; }
.projektbuehne h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.projektbuehne .einleitung { margin-bottom: 1.5rem; }
.projektbuehne .produkt { border-color: rgba(255, 255, 255, 0.1); }
.stationen { display: grid; gap: 0.5rem; margin: 0; }
.stationen button { font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px solid var(--buehne-rand); background: transparent; color: var(--buehne-text-2); line-height: 1.4; transition: border-color 0.15s ease, background 0.15s ease; }
.stationen button strong { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.05rem; color: var(--buehne-text); overflow-wrap: anywhere; hyphens: auto; }
.stationen button > span:last-child { grid-column: 2; font-size: 0.92rem; }
.stationen__nr { font-family: var(--schrift-mono); font-size: 0.78rem; color: var(--buehne-akzent); grid-row: 1 / 3; padding-top: 0.25rem; }
.stationen button:hover { border-color: var(--buehne-text-2); }
.stationen button[aria-selected="true"] { background: var(--buehne-2); border-color: var(--buehne-akzent); }
.stationen button:focus-visible { outline-color: var(--buehne-akzent); }
.hat-js .stationen button:not([aria-selected="true"]) strong { color: var(--buehne-text-2); }
.ansicht { display: grid; gap: 1rem; }
.ansicht[hidden] { display: none; }
.ansicht__text { color: var(--buehne-text-2); margin: 0; max-width: 42em; }
.ansicht__text strong { color: var(--buehne-text); }
.ansicht--hoch .produkt { max-width: 20rem; margin-inline: auto; width: 100%; }
.projektbuehne:not(.hat-js) .ansicht + .ansicht { margin-top: var(--abstand-klein); }
@media (max-width: 56rem) {
  .stationen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .stationen button { grid-template-columns: minmax(0, 1fr); padding: 0.6rem 0.65rem; }
  .stationen button > span:last-child { display: none; }
  .stationen button strong { font-size: 0.9rem; line-height: 1.25; }
  .stationen__nr { grid-row: auto; padding: 0 0 0.2rem; }
  .ansicht--hoch .produkt { max-width: 18rem; }
}

/* ---------- Bühnen (dunkle Projektflächen) ---------- */
.buehne { background: var(--buehne); color: var(--buehne-text); }
.buehne a { color: var(--buehne-akzent); }
.buehne .dachzeile, .buehne .einleitung { color: var(--buehne-text-2); }
.buehne h2, .buehne h3 { color: var(--buehne-text); }
.buehne--kopf { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.buehne__inhalt h1 { max-width: 14em; }
.buehne__aktion { margin-top: 1.5rem; }
.buehnen { padding: var(--abstand) 0; }
.buehnen__liste { display: grid; gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 52rem) { .buehnen__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.buehnen__karte { background: var(--buehne-2); border: 1px solid var(--buehne-rand); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 100%; }
.buehnen__karte h3 { margin: 0; font-size: 1.6rem; }
.buehnen__karte .dachzeile { margin: 0; }
.buehnen__karte p { margin: 0; color: var(--buehne-text-2); }
.buehnen__karte .etikett { align-self: flex-start; }
.buehnen__karte a.weiter { margin-top: auto; padding-top: 0.75rem; font-weight: 600; text-decoration: none; }
.buehnen__karte a.weiter:hover { text-decoration: underline; }
.buehnen__karte .funktionen { color: var(--buehne-text-2); font-size: 0.95rem; margin: 0.25rem 0 0; padding-left: 1.1rem; }

/* Bild oben auf der Bühnenkarte */
.karte__bild { display: block; margin: -1.5rem -1.5rem 0.9rem; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--buehne); border-bottom: 1px solid var(--buehne-rand); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.3s ease; }
.karte__bild--oben img { object-position: top; }
.buehnen__karte:hover .karte__bild img { transform: scale(1.02); }

/* Galerie auf der Projektseite */
.galerie { padding-top: var(--abstand-klein); }
.galerie__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.galerie__liste--breit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.galerie__liste--hoch { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.galerie figure { margin: 0; }
.galerie picture, .galerie img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--rand); }
.galerie figcaption { font-size: 0.92rem; color: var(--text-2); margin-top: 0.5rem; }

/* ---------- Projektabschnitte alvea (hell) und CYDAS (dunkel, Datenkarten) ---------- */
.projektbuehne--hell { background: var(--flaeche-2); color: var(--text); }
.projektbuehne--hell .dachzeile, .projektbuehne--hell .einleitung, .projektbuehne--hell .ansicht__text { color: var(--text-2); }
.projektbuehne--hell h2, .projektbuehne--hell .ansicht__text strong { color: var(--text); }
.projektbuehne--hell .produkt { border-color: var(--rand); }
.projektbuehne--hell .projektbuehne__fuss .etikett { border-color: var(--rand); color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.chips button { font: inherit; cursor: pointer; padding: 0.55rem 1.05rem; border-radius: 999px; border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); font-weight: 500; transition: border-color 0.15s ease, background 0.15s ease; }
.chips button:hover { border-color: var(--text); }
.chips button[aria-selected="true"] { background: var(--text); color: var(--flaeche); border-color: var(--text); }
.chips button:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.ansicht--handy { justify-items: center; text-align: center; }
.ansicht--handy .produkt { max-width: 17rem; width: 100%; border-radius: 1.4rem; }
.ansicht--handy .ansicht__text { max-width: 30em; }
.datenkarte { border: 1px solid var(--buehne-rand); border-radius: var(--radius); background: var(--buehne-2); padding: 1.25rem 1.5rem; }
.datenkarte__titel { font-family: var(--schrift-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--buehne-akzent); margin: 0 0 1rem; }
.datenzeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.datenzeilen li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; border-bottom: 1px solid var(--buehne-rand); padding-bottom: 0.75rem; }
.datenzeilen li:last-child { border-bottom: 0; padding-bottom: 0; }
.datenzeilen .wert { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.3rem); letter-spacing: -0.02em; line-height: 1; color: var(--buehne-text); }
.datenzeilen strong { display: block; color: var(--buehne-text); font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 24rem) { .datenzeilen li { grid-template-columns: 4.5rem minmax(0, 1fr); } }
.datenzeilen div > span { color: var(--buehne-text-2); font-size: 0.95rem; }
.datenkarte__fuss { margin: 1rem 0 0; font-family: var(--schrift-mono); font-size: 0.74rem; color: var(--buehne-text-2); }
/* Report-Schema: Aufbau eines Management-Reports mit Platzhaltern, bewusst ohne Werte */
.report { background: #FBFAF6; color: #15191D; border-radius: var(--radius-klein); padding: 1.1rem 1.25rem 1rem; border: 1px solid var(--rand); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.6); display: grid; gap: 0.9rem; }
.report__kopf { display: grid; gap: 0.15rem; border-bottom: 1px solid #DDD9CE; padding-bottom: 0.7rem; }
.report__kopf strong { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.report__kopf span { font-family: var(--schrift-mono); font-size: 0.72rem; color: #4B525B; }
.report__zeilen { display: grid; gap: 0.4rem; }
.report__zeilen span { display: block; height: 0.5rem; border-radius: 999px; background: #DDD9CE; }
.report__zeilen span:nth-child(2) { width: 88%; }
.report__zeilen span:nth-child(3) { width: 64%; }
.report__kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.report__kacheln li { border: 1px solid #DDD9CE; border-radius: var(--radius-klein); padding: 0.6rem 0.7rem; display: grid; gap: 0.4rem; }
.report__wert { display: block; height: 1.3rem; width: 2.6rem; border-radius: 0.25rem; background: #E3E9FF; border-bottom: 3px solid var(--akzent); }
.report__kacheln li:nth-child(2) .report__wert { background: var(--amber-weich); border-bottom-color: var(--amber); }
.report__kacheln strong { font-size: 0.82rem; font-weight: 600; color: #4B525B; line-height: 1.25; }
.report__diagramm { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; align-items: end; height: 3.4rem; border-bottom: 1px solid #DDD9CE; }
.report__diagramm span { display: block; border-radius: 0.2rem 0.2rem 0 0; background: #355DF4; opacity: 0.75; }
.report__diagramm .s1 { height: 55%; } .report__diagramm .s2 { height: 85%; } .report__diagramm .s3 { height: 40%; } .report__diagramm .s4 { height: 70%; } .report__diagramm .s5 { height: 30%; opacity: 0.45; } .report__diagramm .s6 { height: 60%; }
.report__stempel { margin: 0; font-family: var(--schrift-mono); font-size: 0.76rem; color: #15191D; }
.report__stempel .zustand__punkt { background: var(--amber); }

/* ---------- Zwei Ansichten je Projekt: „Was man sieht“ und „Was dahintersteckt“ ---------- */
.ansichten__etikett { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.85rem; font-family: var(--schrift-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--buehne-text-2); }
.ansichten__etikett::after { content: ""; flex: 1; height: 1px; background: var(--buehne-rand); }
.projektbuehne--hell .ansichten__etikett { color: var(--text-2); }
.projektbuehne--hell .ansichten__etikett::after { background: var(--rand); }

/* Diagramm: Farben über eigene Variablen, damit dunkle und helle Abschnitte dasselbe Markup nutzen */
.dahinter { margin: var(--abstand-klein) 0 0; --d-linie: #3D4652; --d-aktiv: var(--buehne-akzent); --d-puls: #2C3A5E; --d-knoten: var(--buehne-2); --d-rand: #4C5663; --d-text: var(--buehne-text); --d-text-2: var(--buehne-text-2); --d-punkt: #6B7686; --d-block: rgba(255, 255, 255, 0.035); }
.projektbuehne--hell .dahinter { --d-linie: #BDB8AB; --d-aktiv: var(--akzent); --d-puls: var(--akzent-weich); --d-knoten: var(--flaeche); --d-rand: #ADA89B; --d-text: var(--text); --d-text-2: var(--text-2); --d-punkt: #9A958A; --d-block: rgba(21, 25, 29, 0.035); }
@media (prefers-color-scheme: dark) {
  .projektbuehne--hell .dahinter { --d-linie: #3A434E; --d-rand: #4C5663; --d-knoten: var(--flaeche-2); --d-puls: #2C3A5E; --d-punkt: #6B7686; --d-block: rgba(255, 255, 255, 0.035); }
}
.dahinter__rollen { max-width: 42rem; }
.dahinter__bild { display: block; width: 100%; height: auto; overflow: visible; }
.dahinter text { font-family: var(--schrift-text); font-size: 14px; font-weight: 500; fill: var(--d-text); }
.dahinter text.klein { font-family: var(--schrift-mono); font-size: 12.5px; font-weight: 400; fill: var(--d-text-2); }
.dahinter text.titel { font-family: var(--schrift-titel); font-size: 15.5px; font-weight: 600; }
.dahinter text.winzig { font-family: var(--schrift-mono); font-size: 11px; font-weight: 400; fill: var(--d-text-2); }
.dahinter .knoten--klein text { font-size: 12.5px; }
/* Rahmen: Instanz je Betrieb (Mourys) und Engine-Blöcke (alvea) */
.dahinter .instanz { fill: none; stroke: var(--d-linie); stroke-width: 1.25; stroke-dasharray: 5 6; }
.dahinter .block { fill: var(--d-block); stroke: var(--d-linie); stroke-width: 1; stroke-dasharray: 4 5; }
.dahinter .knoten rect, .dahinter .knoten circle { fill: var(--d-knoten); stroke: var(--d-rand); stroke-width: 1.25; }
.dahinter .knoten--hub rect, .dahinter .knoten--hub circle { stroke: var(--d-aktiv); stroke-width: 1.75; }
.dahinter .knoten--eingang rect { fill: transparent; }
.dahinter .knoten--neuron circle { stroke-width: 1; }
.dahinter .knoten--punkt circle { fill: var(--d-punkt); stroke: none; }
.dahinter .knoten--punkt.art-0 circle { fill: var(--d-aktiv); opacity: 0.85; }
.dahinter .knoten--punkt.art-2 circle { fill: var(--amber); opacity: 0.8; }
.dahinter .knoten--mensch circle { stroke: var(--amber); stroke-width: 1.75; }
.dahinter .haken { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dahinter .knoten--report rect:first-child { fill: #FBFAF6; stroke: var(--d-rand); }
.dahinter .knoten .report__balken { fill: #DDD9CE; stroke: none; }
.dahinter .knoten .report__balken--titel { fill: #15191D; }
.dahinter .knoten .report__saeule { fill: #355DF4; stroke: none; opacity: 0.75; }
.dahinter .zeile { fill: none; stroke: #DDD9CE; stroke-width: 4; stroke-linecap: round; }
.dahinter .linie { fill: none; stroke: var(--d-linie); stroke-width: 1.5; stroke-linecap: round; }
.dahinter .fluss { fill: none; stroke: var(--d-aktiv); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 16; opacity: 0; }
.dahinter .fluss--rueck { stroke: var(--amber); }
.dahinter__text { margin-top: 0.9rem; }
.dahinter__text p { margin: 0; color: var(--buehne-text-2); font-size: 0.95rem; max-width: 42em; }
.dahinter__text p + p { margin-top: 0.5rem; }
.projektbuehne--hell .dahinter__text p { color: var(--text-2); }

/* Kopplung an die Stationen: Teile außerhalb der gewählten Station treten zurück, der passende Satz bleibt */
.hat-js .dahinter [data-fuer] { transition: opacity 0.35s ease; }
.hat-js[data-station] .dahinter [data-fuer] { opacity: 0.42; }
.hat-js[data-station="1"] .dahinter [data-fuer~="1"], .hat-js[data-station="2"] .dahinter [data-fuer~="2"], .hat-js[data-station="3"] .dahinter [data-fuer~="3"] { opacity: 1; }
.hat-js[data-station] .dahinter__text p { display: none; }
.hat-js[data-station="1"] .dahinter__text p[data-fuer="1"], .hat-js[data-station="2"] .dahinter__text p[data-fuer="2"], .hat-js[data-station="3"] .dahinter__text p[data-fuer="3"] { display: block; }

/* Aufbau beim Hereinscrollen: Linien zeichnen sich, Knoten erscheinen, dann fließen die Verbindungen */
.hat-js .dahinter.sichtbar .linie { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 0.9s ease-out forwards; }
.hat-js .dahinter.sichtbar .zeile { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 0.6s ease-out forwards; }
.hat-js .dahinter.sichtbar .knoten { transform-box: fill-box; transform-origin: center; animation: erscheinen 0.5s ease-out both; }
.hat-js .dahinter.sichtbar .report__balken, .hat-js .dahinter.sichtbar .report__saeule, .hat-js .dahinter.sichtbar text.klein, .hat-js .dahinter.sichtbar .instanz, .hat-js .dahinter.sichtbar .block { animation: einblenden 0.5s ease-out both; }
.hat-js .dahinter.sichtbar .fluss { opacity: 1; transition: opacity 0.6s ease 1.6s; animation: fliessen 1.4s linear infinite; }
.hat-js .dahinter.sichtbar .t1 { animation-delay: 0.1s; }
.hat-js .dahinter.sichtbar .t2 { animation-delay: 0.45s; }
.hat-js .dahinter.sichtbar .t3 { animation-delay: 0.8s; }
.hat-js .dahinter.sichtbar .t4 { animation-delay: 1.1s; }
.hat-js .dahinter.sichtbar .t5 { animation-delay: 1.4s; }
.hat-js .dahinter.sichtbar .t6 { animation-delay: 1.7s; }
/* alvea: Schichten leuchten nacheinander auf, wie ein Signal durch das Netz */
.hat-js .dahinter.sichtbar .schicht-0 { --v: 0.1s; } .hat-js .dahinter.sichtbar .schicht-1 { --v: 0.4s; } .hat-js .dahinter.sichtbar .schicht-2 { --v: 0.7s; } .hat-js .dahinter.sichtbar .schicht-3 { --v: 1s; } .hat-js .dahinter.sichtbar .schicht-4 { --v: 1.3s; } .hat-js .dahinter.sichtbar .schicht-5 { --v: 1.6s; }
.hat-js .dahinter.sichtbar [class*="schicht-"] { animation-delay: var(--v); }
.hat-js .dahinter.sichtbar [class*="schicht-"] circle, .hat-js .dahinter.sichtbar [class*="schicht-"] rect { animation: leuchten-weich 3.6s ease-in-out infinite; animation-delay: calc(var(--v) + 1.6s); }
.hat-js .dahinter.sichtbar .knoten--neuron circle { animation-name: leuchten; }
.hat-js .dahinter.sichtbar .knoten--hub circle, .hat-js .dahinter.sichtbar .knoten--hub rect { animation: leuchten-hub 3.6s ease-in-out infinite; animation-delay: calc(var(--v, 0s) + 1.6s); }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes fliessen { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@keyframes erscheinen { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
/* Knoten ohne Text leuchten voll auf, Knoten mit Text nur sanft, damit die Beschriftung lesbar bleibt */
@keyframes leuchten { 0%, 30%, 100% { fill: var(--d-knoten); stroke: var(--d-rand); } 9% { fill: var(--d-aktiv); stroke: var(--d-aktiv); } }
@keyframes leuchten-weich { 0%, 30%, 100% { fill: var(--d-knoten); stroke: var(--d-rand); } 9% { fill: var(--d-puls); stroke: var(--d-aktiv); } }
@keyframes leuchten-hub { 0%, 30%, 100% { fill: var(--d-knoten); } 9% { fill: var(--d-puls); } }
@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung: alles sofort und vollständig sichtbar, keine fließenden Verbindungen */
  .dahinter .fluss { display: none; }
  .hat-js .dahinter.sichtbar .linie, .hat-js .dahinter.sichtbar .zeile { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@media (max-width: 40rem) {
  /* Auf schmalen Bildschirmen bleibt das Diagramm lesbar und lässt sich seitlich schieben */
  .dahinter__rollen { overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.35rem; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .dahinter__bild { min-width: 30rem; }
  .dahinter text { font-size: 15px; }
  .dahinter text.klein { font-size: 13px; }
  .dahinter text.titel { font-size: 16.5px; }
}
.wahl { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--buehne-rand); border-radius: 999px; padding: 0.25rem; gap: 0.25rem; margin: 0; }
.wahl button { font: inherit; cursor: pointer; padding: 0.5rem 1rem; border-radius: 999px; border: 0; background: transparent; color: var(--buehne-text-2); font-weight: 500; }
.wahl button:hover { color: var(--buehne-text); }
.wahl button[aria-selected="true"] { background: var(--buehne-text); color: var(--buehne); }
.wahl button:focus-visible { outline: 3px solid var(--buehne-akzent); outline-offset: 2px; }
@media (max-width: 40rem) {
  /* Schmal: zwei gleich breite Felder statt einer umbrechenden Pille */
  .wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: var(--radius-klein); }
  .wahl button { border-radius: calc(var(--radius-klein) - 0.15rem); padding: 0.55rem 0.5rem; font-size: 0.9rem; line-height: 1.2; text-align: center; }
}

/* ---------- Spanne: Größenordnungen in einer Zeile ---------- */
.spanne { padding: var(--abstand-klein) 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); display: grid; gap: 0.75rem 2rem; align-items: center; }
@media (min-width: 52rem) { .spanne { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.spanne p { margin: 0; color: var(--text-2); }
.spanne p strong { color: var(--text); }
.spanne__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.spanne__liste a { display: inline-block; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--rand); text-decoration: none; font-weight: 500; color: var(--text); font-size: 0.95rem; }
.spanne__liste a:hover { border-color: var(--text); color: var(--text); }

/* ---------- Einstieg in Abläufe erleben ---------- */
.einstieg { display: grid; gap: var(--abstand-klein); align-items: start; }
@media (min-width: 52rem) { .einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); } }
.einstieg .einleitung { margin-bottom: 0; }
.einstieg__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.einstieg__liste a { display: grid; gap: 0.2rem; padding: 1rem 1.25rem; border: 1px solid var(--rand); border-radius: var(--radius); text-decoration: none; color: var(--text); background: var(--flaeche); transition: border-color 0.15s ease; }
.einstieg__liste a:hover { border-color: var(--akzent); }
.einstieg__liste strong { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.1rem; }
.einstieg__liste span { color: var(--text-2); font-size: 0.95rem; }

/* ---------- Person auf der Startseite ---------- */
.abschnitt--grau { background: var(--flaeche-2); }
.person { display: grid; gap: var(--abstand-klein); align-items: start; }
@media (min-width: 52rem) { .person { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); } }
.person__portraet { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--flaeche-3); max-width: 18rem; box-shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.5); }
.person__portraet picture, .person__portraet img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.person .einleitung { margin-bottom: 1.25rem; }
.haltung { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.6rem; }
.haltung li { padding-left: 1rem; border-left: 2px solid var(--akzent); color: var(--text-2); }
.haltung strong { color: var(--text); font-weight: 600; }

/* ---------- Etiketten, Status ---------- */
.etikett { display: inline-block; font-family: var(--schrift-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--buehne-rand); color: var(--buehne-text-2); }
.etikett--hell { border-color: var(--rand); color: var(--text-2); }
.etiketten { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.etiketten li { font-family: var(--schrift-mono); font-size: 0.8rem; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--rand); }
.etiketten li a { color: inherit; text-decoration: none; }

/* ---------- Karten, Raster ---------- */
.karten { display: grid; gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 48rem) { .karten { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.karte { border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.5rem; background: var(--flaeche); display: flex; flex-direction: column; gap: 0.5rem; }
.karte h3 { margin: 0; }
.karte p { margin: 0; color: var(--text-2); }
.karte .etikett--hell { align-self: flex-start; }
.karte--gedaempft { background: var(--flaeche-2); border-style: dashed; }
.zweispaltig { display: grid; gap: var(--abstand-klein); align-items: start; }
@media (min-width: 52rem) { .zweispaltig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Hinweise ---------- */
.hinweis { border-left: 4px solid var(--amber); background: var(--amber-weich); padding: 0.9rem 1.1rem; border-radius: 0 var(--radius-klein) var(--radius-klein) 0; margin: 1.5rem 0; }
.hinweis p:last-child { margin-bottom: 0; }
.hinweis--ruhig { border-left-color: var(--akzent); background: var(--akzent-weich); }
.offen { background: var(--amber-weich); border-bottom: 2px dotted var(--amber); padding: 0 0.2em; font-style: normal; }

/* ---------- Seiten (Standardlayout) ---------- */
.seite__kopf { padding: clamp(2.5rem, 6vw, 5rem) 0 var(--abstand-klein); }
.seite__kopf .einleitung { margin-bottom: 0; }
.fliesstext { padding-bottom: var(--abstand); }
.fliesstext > * + h2 { margin-top: 2.2em; }
.fliesstext > * + h3 { margin-top: 1.6em; }
.fliesstext p, .fliesstext li { max-width: 68ch; text-wrap: pretty; }
.fliesstext li + li { margin-top: 0.35em; }
.fliesstext figure { margin: 2rem 0; }
.fliesstext figcaption { font-size: 0.9rem; color: var(--text-2); margin-top: 0.5rem; }

/* ---------- Projektseite ---------- */
.fakten { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 2rem 0 0; }
.fakten dt { font-family: var(--schrift-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--buehne-text-2); margin-bottom: 0.2rem; }
.fakten dd { margin: 0; }
.projekt__untertitel { display: block; font-weight: 500; font-size: 0.5em; letter-spacing: 0; color: var(--buehne-text-2); margin-top: 0.4em; max-width: 24em; line-height: 1.25; }
.projekt__text { padding-top: var(--abstand-klein); padding-bottom: var(--abstand-klein); }
.projekt__raster { display: grid; gap: var(--abstand-klein) 3rem; padding-bottom: var(--abstand-klein); }
@media (min-width: 52rem) { .projekt__raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.projekt__raster h2 { font-size: 1.3rem; margin-top: 0; }
.projekt__raster h2 + p { color: var(--text-2); }
.projekt__raster div > h2:not(:first-child) { margin-top: 1.75rem; }
.haken { list-style: none; padding: 0; margin: 0; }
.haken li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; }
.haken li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--akzent); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.zahlen { list-style: none; padding: 0; margin: 0 0 var(--abstand-klein); display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.zahlen li { border-top: 2px solid var(--text); padding-top: 0.8rem; display: flex; flex-direction: column; }
.zahlen__wert { font-family: var(--schrift-titel); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.02em; line-height: 1; }
.zahlen__text { margin-top: 0.35rem; color: var(--text-2); }
.zahlen__stand { font-family: var(--schrift-mono); font-size: 0.75rem; color: var(--text-2); margin-top: 0.4rem; }
.gespraech { margin: var(--abstand-klein) auto; padding: 1.75rem; border-radius: var(--radius); background: var(--flaeche-2); }
.gespraech h2 { font-size: 1.4rem; }
.projekt__weiter { display: flex; justify-content: space-between; gap: 1rem; padding: var(--abstand-klein) 0 var(--abstand); border-top: 1px solid var(--rand); }
.projekt__weiter a { text-decoration: none; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.15rem; }
.projekt__weiter a .dachzeile { display: block; margin-bottom: 0.2rem; }
.projekt__weiter--rechts { text-align: right; margin-left: auto; }

/* ---------- Über mich ---------- */
.portraet { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--flaeche-2); }
.portraet picture, .portraet img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.werdegang { list-style: none; padding: 0; margin: 0 0 2rem; border-left: 2px solid var(--rand); }
.werdegang li { position: relative; padding: 0 0 1.5rem 1.5rem; }
.werdegang li::before { content: ""; position: absolute; left: -0.45rem; top: 0.45rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--akzent); }
.werdegang li:first-child::before { background: var(--akzent); }
.werdegang .zeit { font-family: var(--schrift-mono); font-size: 0.8rem; color: var(--text-2); display: block; margin-bottom: 0.15rem; }
.werdegang strong { display: block; font-weight: 600; }
.werdegang p { margin: 0.3rem 0 0; color: var(--text-2); font-size: 0.97rem; }
.schritte { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); counter-reset: schritt; }
.schritte li { counter-increment: schritt; border-top: 2px solid var(--akzent); padding-top: 0.8rem; }
.schritte li::before { content: counter(schritt, decimal-leading-zero); font-family: var(--schrift-mono); font-size: 0.8rem; color: var(--akzent); display: block; margin-bottom: 0.35rem; }
.schritte strong { display: block; font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 650; margin-bottom: 0.3rem; }
.schritte p { margin: 0; color: var(--text-2); font-size: 0.97rem; max-width: none; }

/* ---------- Kontakt ---------- */
.formular { display: grid; gap: 1.25rem; margin: 0 0 2rem; }
.formular fieldset { border: 0; padding: 0; margin: 0; }
.formular legend, .formular label.block { font-weight: 600; margin-bottom: 0.5rem; display: block; }
.auswahl { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.auswahl label { position: relative; }
.auswahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.auswahl span { display: inline-block; padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--rand); background: var(--flaeche); cursor: pointer; }
.auswahl input:checked + span { background: var(--text); color: var(--flaeche); border-color: var(--text); }
.auswahl input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 2px; }
.formular textarea, .formular input[type="text"] { width: 100%; font: inherit; padding: 0.8rem 0.9rem; border-radius: var(--radius-klein); border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); }
.formular textarea { min-height: 9rem; resize: vertical; }
.formular .ehrlich { font-size: 0.92rem; color: var(--text-2); margin: 0; }
.formular .honig { position: absolute; left: -10000px; }
.entwurf-ausgabe { display: none; }
.entwurf-ausgabe.sichtbar { display: block; }
.entwurf-ausgabe textarea { width: 100%; min-height: 10rem; font: inherit; font-family: var(--schrift-mono); font-size: 0.9rem; padding: 0.8rem; border-radius: var(--radius-klein); border: 1px solid var(--rand); background: var(--flaeche-2); color: var(--text); }
.kontaktwege { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.75rem; }
.kontaktwege li { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; border-bottom: 1px solid var(--rand); padding-bottom: 0.75rem; }
.kontaktwege .dachzeile { margin: 0; align-self: center; }
.ablauf { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .ablauf { grid-template-columns: 1fr 1fr; } }

/* ---------- Gedanken ---------- */
.beitragsliste { list-style: none; padding: 0; margin: 0 0 var(--abstand); display: grid; gap: 1.5rem; }
.beitragsliste li { border-top: 1px solid var(--rand); padding-top: 1.25rem; }
.beitragsliste h2 { font-size: 1.6rem; margin-bottom: 0.3rem; }
.beitragsliste h2 a { color: inherit; text-decoration: none; }
.beitragsliste h2 a:hover { color: var(--akzent); }
.beitragsliste p { margin: 0.25rem 0 0; color: var(--text-2); }
.beitrag__fuss { padding-bottom: var(--abstand); border-top: 1px solid var(--rand); padding-top: 1.5rem; }
.beitrag__teilen { font-size: 0.95rem; word-break: break-all; }
.leer { border: 1px dashed var(--rand); border-radius: var(--radius); padding: 2rem; text-align: center; color: var(--text-2); margin-bottom: var(--abstand); }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--rand); background: var(--flaeche-2); margin-top: var(--abstand-klein); padding: var(--abstand-klein) 0 1.5rem; font-size: 0.95rem; color: var(--text-2); }
.fuss a { color: var(--text); }
.fuss__raster { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 1.3fr 1fr 1.3fr; } }
.fuss__name { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.15rem; color: var(--text); margin-bottom: 0.3rem; }
.fuss__titel { font-family: var(--schrift-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.6rem; }
.fuss__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.fuss__klein { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rand); font-size: 0.85rem; }
.fuss__klein p { margin: 0; }

/* ---------- Druck ---------- */
@media print {
  .kopf, .fuss, .entwurf, .sprung, .gespraech, .projekt__weiter { display: none; }
  body { background: #fff; color: #000; }
  a { color: inherit; }
}