/* ==========================================================================
   Palatius – Stylesheet
   Schriften selbst gehostet (assets/fonts), keine externen Requests. Light + Dark.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
}
/* Nur für den Schriftzug "Palatius" in Kopfzeile/Seitenleiste, sonst nirgends
   – noch ohne kommerzielle Lizenz von Fontfabric, siehe CLAUDE.md. */
@font-face {
  font-family: "Petrov Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/petrov-sans-bold.woff2") format("woff2");
}

:root {
  --bg:          #ffffff;
  --bg-alt:      #f8fafc;
  --surface:     #ffffff;
  --ink:         #0f172a;
  --ink-soft:    #1e293b;
  --muted:       #64748b;
  --line:        #e2e8f0;
  --line-soft:   rgba(15, 23, 42, 0.06);

  --primary:     #2563eb;
  --secondary:   #0f172a;
  --tertiary:    #06b6d4;
  --neutral:     #64748b;

  --accent:      #2563eb;
  --accent-ink:  #2563eb;
  --g1:          #2563eb;
  --g2:          #06b6d4;
  --g3:          #2563eb;

  /* Nur für die Farbakzente der öffentlichen Seiten (.grad-Textmarkierung,
     Icon-Akzente, Hero) – bewusst getrennt von --g1/g2/g3, weil die auch der
     Nutzerbereich (portal.css) für sein eigenes, blaues Farbschema nutzt. */
  --h1: #2563eb;
  --h2: #06b6d4;
  --h3: #2563eb;

  --ok:          #1f7a5a;
  --ok-bg:       rgba(31, 122, 90, 0.10);
  --warn:        #b47b18;
  --warn-bg:     rgba(180, 123, 24, 0.10);
  --bad:         #9b2c2c;
  --bad-bg:      rgba(155, 44, 44, 0.10);

  --dark:        #0f172a;
  --dark-2:      #182338;
  --on-dark:     #f8fafc;
  --on-dark-mut: #94a3b8;
  --on-dark-line: rgba(255, 255, 255, 0.14);

  --nav-h: 64px;
  --wrap: 1120px;
  --radius: 16px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-head: "Plus Jakarta Sans", var(--font);
  --font-logo: "Petrov Sans", var(--font-head);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --glass-highlight: rgba(255, 255, 255, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0b1220;
    --bg-alt:    #0f172a;
    --surface:   #131c30;
    --ink:       #f8fafc;
    --ink-soft:  #e2e8f0;
    --muted:     #94a3b8;
    --line:      rgba(255, 255, 255, 0.14);
    --line-soft: rgba(255, 255, 255, 0.08);
    --accent:    #5b8def;
    --accent-ink:#5b8def;
    --g1:        #5b8def;
    --g2:        #22d3ee;
    --g3:        #5b8def;
    --h1:        #5b8def;
    --h2:        #22d3ee;
    --h3:        #5b8def;
    --ok:        #45c78a;
    --ok-bg:     rgba(69, 199, 138, 0.14);
    --warn:      #e0a33a;
    --warn-bg:   rgba(224, 163, 58, 0.14);
    --bad:       #ff6b5e;
    --bad-bg:    rgba(255, 107, 94, 0.14);
    --dark:      #06090f;
    --dark-2:    #0f1524;
    --glass-highlight: rgba(255, 255, 255, 0.08);
  }
}

/* Dieselben Werte noch einmal, damit die Einstellung „Dunkel“ auch dann greift,
   wenn das System auf Hell steht. Beide Blöcke müssen gleich bleiben. */
:root[data-theme="dark"] {
  --bg:        #0b1220;
  --bg-alt:    #0f172a;
  --surface:   #131c30;
  --ink:       #f8fafc;
  --ink-soft:  #e2e8f0;
  --muted:     #94a3b8;
  --line:      rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --accent:    #5b8def;
  --accent-ink:#5b8def;
  --g1:        #5b8def;
  --g2:        #22d3ee;
  --g3:        #5b8def;
  --h1:        #5b8def;
  --h2:        #22d3ee;
  --h3:        #5b8def;
  --ok:        #45c78a;
  --ok-bg:     rgba(69, 199, 138, 0.14);
  --warn:      #e0a33a;
  --warn-bg:   rgba(224, 163, 58, 0.14);
  --bad:       #ff6b5e;
  --bad-bg:    rgba(255, 107, 94, 0.14);
  --dark:      #06090f;
  --dark-2:    #0f1524;
  --glass-highlight: rgba(255, 255, 255, 0.08);
}


/* ---------- Basis ---------- */

* { box-sizing: border-box; }

/* Muss nach den Layout-Regeln greifen: display-Angaben wie `grid` würden
   das hidden-Attribut sonst überstimmen. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: rgba(10, 132, 255, 0.22); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.narrow { max-width: 760px; }

/* ---------- Typografie ---------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.07;
}

/* Zweifarbige Headlines: zweiter Teil gedämpft grau statt Vollkontrast */
.h-dim { color: var(--muted); }

h1 { font-size: clamp(2.7rem, 7.2vw, 5.1rem); letter-spacing: -0.042em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); letter-spacing: -0.038em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); letter-spacing: -0.024em; }

p { margin: 0; }

.lede {
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: -0.014em;
  font-weight: 400;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}

.grad {
  background-image: linear-gradient(96deg, var(--h1) 0%, var(--h2) 52%, var(--h3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Fallback, falls background-clip nicht greift */
  padding-bottom: 0.06em;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad { color: var(--accent-ink); -webkit-text-fill-color: currentColor; }
}

.mono {
  font-family: var(--mono);
  font-size: 0.86em;
  letter-spacing: -0.01em;
}

/* ---------- Navigation ---------- */

/* "Liquid Glass": stark durchscheinend statt getönt, damit auf der
   Startseite wirklich das Hero-Foto durchschimmert, nicht nur eine
   halbtransparente Fläche in --bg. Die Kopfzeile ist immer sticky – der
   Weichzeichner blendet also fortlaufend das ein, was gerade darunterliegt,
   ganz ohne eigene Scroll-Logik. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: saturate(200%) blur(26px);
  -webkit-backdrop-filter: saturate(200%) blur(26px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-size: 1.32rem;
  color: var(--ink);
}
.brand:hover { text-decoration: none; opacity: 0.72; }

/* Nur der Schriftzug trägt die Logo-Schrift – das gilt auch für den
   Markennamen in der Seitenleiste des Nutzerbereichs (.side-brand), die ihre
   eigene, kleinere Schriftgröße behält. */
.brand-name {
  font-family: var(--font-logo);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 7px;
  background: linear-gradient(140deg, var(--g1), var(--g2) 55%, var(--g3));
  display: grid;
  place-items: center;
}
.brand-mark svg { width: 13px; height: 13px; stroke: #fff; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.83rem;
  letter-spacing: -0.005em;
}
.nav-links a { color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* Icons stehen nur im aufgeklappten Burger-Menü, siehe @media unten. */
.nav-links a svg { display: none; }

@media (max-width: 560px) {
  .brand { font-size: 1.08rem; }
  .nav-inner { gap: 12px; }
}

/* ---------- Burger-Menü (schmale Fenster) ---------- */

.nav-burger {
  display: none;
  width: 36px; height: 36px; flex: none;
  align-items: center; justify-content: center;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}
.nav-burger:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.nav-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-burger svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

@media (max-width: 660px) {
  .nav-burger { display: flex; }

  /* Dasselbe Liquid-Glass-Prinzip wie die Kopfzeile, aber bewusst dunkel
     getönt und mit weißer Schrift/Icons – unabhängig vom Hell/Dunkel-Modus
     der Seite, wie ein Kontrollzentrum-Panel auf dem Handy, das sich klar
     vom Seiteninhalt abhebt statt mit ihm zu verschmelzen. */
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: color-mix(in srgb, var(--dark) 72%, transparent);
    backdrop-filter: saturate(200%) blur(26px);
    -webkit-backdrop-filter: saturate(200%) blur(26px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    padding: 4px 20px 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.22s ease, opacity 0.18s ease;
  }
  .nav-links.open { max-height: 420px; opacity: 1; pointer-events: auto; }
  .nav-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.82);
  }
  .nav-links a:hover,
  .nav-links a[aria-current="page"] { color: #fff; }
  .nav-links a svg {
    display: block;
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .nav-links .btn-nav {
    margin: 14px 0 4px;
    justify-content: center;
    padding-block: 11px;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  padding-inline: 24px;
  border: 0;
  border-radius: 980px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, #000); }

.btn-ghost {
  background: transparent;
  color: var(--accent-ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--accent); }

.btn-on-dark { background: #fff; color: #06070a; }
.btn-on-dark:hover { background: #e8e8ea; }

.btn-arrow svg { width: 15px; height: 15px; transition: transform 0.18s ease; }
.btn-arrow:hover svg { transform: translateX(3px); }

/* ---------- Sections ---------- */

section { position: relative; }

.sec {
  padding-block: clamp(72px, 11vw, 132px);
}
.sec-tight { padding-block: clamp(56px, 8vw, 92px); }

.sec-alt { background: var(--bg-alt); }

.sec-dark {
  background: var(--dark);
  color: var(--on-dark);
}
.sec-dark .lede,
.sec-dark .eyebrow,
.sec-dark .h-dim { color: var(--on-dark-mut); }
.sec-dark .card {
  background: var(--dark-2);
  border-color: var(--on-dark-line);
}
.sec-dark .card p { color: var(--on-dark-mut); }
.sec-dark .icon-box {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--on-dark-line);
}
.sec-dark .icon-box svg { stroke: var(--on-dark); }

.sec-head { max-width: 720px; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head h2 + .lede { margin-top: 20px; }

#problem .sec-head { max-width: 1060px; }
#problem .lede { max-width: 1040px; margin-top: 20px; }

/* ---------- Lösung: Text + Verbindungsgrafik ---------- */

.loesung-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 860px) { .loesung-grid { grid-template-columns: 1fr; } }

.loesung-text .eyebrow { margin-bottom: 18px; }
.loesung-text h2 { margin-bottom: 20px; }
.loesung-text .lede { color: var(--muted); }

.loesung-bild {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  /* Oben reichlich Platz: die ruhenden Objekte (Münzen, Ladekreis) ragen bis
     zu top:-30px über die eigentliche Szene hinaus. 88px statt nur knapp
     genug lassen ihnen spürbar Luft zum Kartenrand statt sie zu streifen. */
  padding: 88px 20px 28px;
}

.szene { position: relative; height: 148px; }

/* Verbindung besteht immer (durchgezogen); wird nur während des jeweiligen
   Schritts gestrichelt und fließt dann in Richtung des Informationsflusses –
   Aktivierung weiter unten je Schritt. */
.szene-linie {
  position: absolute;
  top: 30px;
  height: 2px;
  background-color: var(--line);
}
.szene-linie-links  { left: 16.6%; width: 33.4%; }
.szene-linie-rechts { left: 50%;   width: 33.3%; }

.szene-knoten {
  position: absolute;
  top: 0;
  width: 96px;
  margin-left: -48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.szene-knoten-hochschule  { left: 16.6%; }
.szene-knoten-palatius    { left: 50%; }
.szene-knoten-unternehmen { left: 83.3%; }
.szene-knoten span { font-size: 0.8rem; font-weight: 500; color: var(--muted); text-align: center; }

.loesung-icon {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
}
.loesung-icon svg { width: 26px; height: 26px; color: var(--ink); }
.szene-knoten-palatius .loesung-icon { width: 68px; height: 68px; }
.loesung-icon-marke {
  background: linear-gradient(140deg, var(--h1), var(--h2) 55%, var(--h3));
  border-color: transparent;
}
.loesung-icon-marke svg { color: #fff; }

/* Ladekreis über Palatius (nicht im Icon selbst), nur in Schritt 2 sichtbar */
.szene-ladekreis {
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  color: var(--tertiary);
  opacity: 0;
}
.szene-ladekreis svg { width: 100%; height: 100%; }
.szene[data-step="2"].spielt .szene-ladekreis {
  opacity: 1;
  animation: szeneDreh 1.2s linear infinite;
}
@keyframes szeneDreh { to { transform: translateX(-50%) rotate(360deg); } }

/* Fliegende Objekte: per Schritt ein-/ausgeblendet, Position via left in % der Szenenbreite */
.szene-objekt {
  position: absolute;
  top: 30px; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
  color: var(--accent-ink);
  opacity: 0;
  pointer-events: none;
}
.szene-objekt svg { width: 16px; height: 16px; }

/* ---- Fliegende Objekte je Schritt ---- */

@keyframes szeneHsZuPal {
  0%   { left: 16.6%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 50%; opacity: 0; }
}
@keyframes szeneUntZuPal {
  0%   { left: 83.3%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 50%; opacity: 0; }
}
@keyframes szenePalZuUnt {
  0%   { left: 50%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 83.3%; opacity: 0; }
}
@keyframes szenePalHinUndZurueck {
  0%   { left: 50%; opacity: 0; }
  15%  { opacity: 1; }
  45%  { left: 16.6%; }
  55%  { left: 16.6%; }
  85%  { left: 50%; opacity: 1; }
  100% { opacity: 0; }
}

.szene[data-step="1"].spielt .szene-dokument   { animation: szeneHsZuPal 2.4s ease-in-out forwards; }
.szene[data-step="3"].spielt .szene-frage      { animation: szeneUntZuPal 2.4s ease-in-out forwards; }
.szene[data-step="4"].spielt .szene-schluessel { animation: szenePalHinUndZurueck 2.4s ease-in-out forwards; }
.szene[data-step="5"].spielt .szene-antwort    { animation: szenePalZuUnt 2.4s ease-in-out forwards; }

/* ---- Schritt 6: drei einzelne Münzen, zwei davon weiter zur Hochschule ----
   a1/a2/a3 fliegen gemeinsam zu Palatius; a3 bleibt dort sichtbar liegen
   (Anteil der Plattform), a1/a2 blenden genau dort aus, wo b1/b2 einblenden
   und zur Hochschule weiterfliegen. Am Ende bleiben alle drei Münzen und das
   Ergebnis-Symbol stehen, bis der nächste Durchlauf (Schritt 1) sie zurücksetzt. */
@keyframes szeneMuenzeA1 {
  0%   { left: 83.3%; top: 16px; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 50%; top: 22px; opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes szeneMuenzeA2 {
  0%   { left: 83.3%; top: 30px; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 50%; top: 30px; opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes szeneMuenzeA3 {
  0%   { left: 83.3%; top: 44px; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 50%; top: 38px; opacity: 1; }
  60%  { left: 50%; top: -30px; opacity: 1; }
  100% { left: 50%; top: -30px; opacity: 1; }
}
@keyframes szeneMuenzeB1 {
  0%   { left: 50%; top: 30px; opacity: 0; }
  50%  { opacity: 0; }
  58%  { left: 50%; top: 30px; opacity: 1; }
  85%  { left: calc(16.6% - 9px); top: -26px; opacity: 1; }
  100% { left: calc(16.6% - 9px); top: -26px; opacity: 1; }
}
@keyframes szeneMuenzeB2 {
  0%   { left: 50%; top: 30px; opacity: 0; }
  50%  { opacity: 0; }
  58%  { left: 50%; top: 30px; opacity: 1; }
  85%  { left: calc(16.6% + 9px); top: -26px; opacity: 1; }
  100% { left: calc(16.6% + 9px); top: -26px; opacity: 1; }
}
@keyframes szeneErgebnisUnternehmen {
  0%   { opacity: 0; }
  70%  { opacity: 0; }
  85%  { opacity: 1; }
  100% { opacity: 1; }
}

.szene[data-step="6"].spielt .szene-muenze-a1 { animation: szeneMuenzeA1 2.4s ease-in-out forwards; }
.szene[data-step="6"].spielt .szene-muenze-a2 { animation: szeneMuenzeA2 2.4s ease-in-out forwards; }
.szene[data-step="6"].spielt .szene-muenze-a3 { animation: szeneMuenzeA3 2.4s ease-in-out forwards; }
.szene[data-step="6"].spielt .szene-muenze-b1 { animation: szeneMuenzeB1 2.4s ease-in-out forwards; }
.szene[data-step="6"].spielt .szene-muenze-b2 { animation: szeneMuenzeB2 2.4s ease-in-out forwards; }
.szene[data-step="6"].spielt .szene-ergebnis-unternehmen {
  left: 83.3%; top: -26px;
  animation: szeneErgebnisUnternehmen 2.4s ease-in-out forwards;
}

/* ---- Verbindungen: durchgezogen im Ruhezustand, gestrichelt und in
   Flussrichtung laufend, während auf dieser Strecke etwas unterwegs ist ---- */
@keyframes szeneFliesstRechts { from { background-position: 0 0; } to { background-position: 28px 0; } }
@keyframes szeneFliesstLinks  { from { background-position: 0 0; } to { background-position: -28px 0; } }

.szene[data-step="1"].spielt .szene-linie-links,
.szene[data-step="3"].spielt .szene-linie-rechts,
.szene[data-step="4"].spielt .szene-linie-links,
.szene[data-step="5"].spielt .szene-linie-rechts,
.szene[data-step="6"].spielt .szene-linie-links,
.szene[data-step="6"].spielt .szene-linie-rechts {
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 14px);
  background-size: 28px 2px;
}
.szene[data-step="1"].spielt .szene-linie-links,
.szene[data-step="5"].spielt .szene-linie-rechts {
  animation: szeneFliesstRechts 0.7s linear infinite;
}
.szene[data-step="3"].spielt .szene-linie-rechts,
.szene[data-step="4"].spielt .szene-linie-links,
.szene[data-step="6"].spielt .szene-linie-links,
.szene[data-step="6"].spielt .szene-linie-rechts {
  animation: szeneFliesstLinks 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .szene-objekt, .szene-ladekreis { display: none; }
  .szene-linie { background-image: none !important; animation: none !important; }
}

.szene-text {
  margin-top: 14px;
  /* Zwei volle Zeilen bei line-height:1.55 (geerbt) – 2.6em war zu knapp
     und ließ die ganze Karte je nach Zeilenzahl der Bildunterschrift
     springen. */
  min-height: 3.1em;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.szene-punkte {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.szene-punkt {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
}
.szene-punkt[aria-current="true"] { background: var(--primary); }

/* ---------- Datenschutz: Sicherheitskonzept zur Datenspeicherung ----------
   Eigenständige, breitere Variante derselben Technik wie die Lösung-Szene
   oben (Knoten, fließende Linien, Objekte per Schritt) – der Schlüssel
   steht hier bewusst als eigener, dauerhaft sichtbarer Knoten oberhalb des
   Sicherheitsmoduls, weil "physisch getrennt gespeichert" die Kernaussage
   dieses Abschnitts ist. Acht statt fünf Schritte: 1–5 zeigen die
   Übermittlung durch die Hochschule, 6–8 zusätzlich die Abfrage durch ein
   Unternehmen, damit im Ablauf einmal alle Akteure auftauchen. */

.ds-bild {
  /* .sec-head hat kein eigenes margin-bottom (anders als bei der Lösung-
     Szene, die als Grid-Spalte neben ihrem Text steht) – ohne diesen Abstand
     überlappt die Szene das Wort "Datenspeicherung" in der Überschrift. */
  margin-top: 54px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 190px 24px 44px;
}

.ds-szene { position: relative; height: 120px; }

.ds-linie {
  position: absolute;
  background-color: var(--line);
}
.ds-linie-links      { top: 30px; left: 8%;  width: 28%; height: 2px; }
.ds-linie-rechts     { top: 30px; left: 36%; width: 28%; height: 2px; }
.ds-linie-weiter     { top: 30px; left: 64%; width: 28%; height: 2px; }
.ds-linie-schluessel { top: -84px; left: 36%; width: 2px; height: 84px; }

.ds-knoten {
  position: absolute;
  top: 0;
  width: 110px;
  margin-left: -55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ds-knoten-rohdaten    { left: 8%; }
.ds-knoten-modul       { left: 36%; }
.ds-knoten-index       { left: 64%; }
.ds-knoten-unternehmen { left: 92%; }
.ds-knoten-schluessel  { left: 36%; top: -144px; }
.ds-knoten span { font-size: 0.8rem; font-weight: 500; color: var(--muted); text-align: center; }
.ds-knoten .loesung-icon { width: 64px; height: 64px; }
.ds-knoten .loesung-icon svg { width: 27px; height: 27px; }
.ds-knoten-modul .loesung-icon { width: 76px; height: 76px; }
.ds-knoten-modul .loesung-icon svg { width: 32px; height: 32px; }

.ds-ladekreis {
  position: absolute;
  top: -30px;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  color: var(--tertiary);
  opacity: 0;
}
.ds-ladekreis svg { width: 100%; height: 100%; }
.ds-ladekreis-berechnung { left: 36%; }
.ds-ladekreis-abgleich   { left: 50%; }
.ds-szene[data-schritt="3"].spielt .ds-ladekreis-berechnung {
  opacity: 1;
  animation: szeneDreh 1.2s linear infinite;
}
.ds-szene[data-schritt="7"].spielt .ds-ladekreis-abgleich {
  opacity: 1;
  animation: szeneDreh 1.2s linear infinite;
}

.ds-objekt {
  position: absolute;
  top: 30px; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
  color: var(--accent-ink);
  opacity: 0;
  pointer-events: none;
}
.ds-objekt svg { width: 16px; height: 16px; }

@keyframes dsRohdatenZuModul {
  0%   { left: 8%; opacity: 0; }
  12%  { opacity: 1; }
  85%  { left: 36%; opacity: 1; }
  100% { left: 36%; opacity: 0; }
}
@keyframes dsSchluesselZuModul {
  0%   { left: 36%; top: -110px; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 36%; top: 22px; opacity: 1; }
}
@keyframes dsModulZuIndex {
  0%   { left: 36%; top: 30px; opacity: 0; }
  15%  { opacity: 1; }
  70%  { left: 64%; top: 30px; opacity: 1; }
  90%  { left: 64%; top: -30px; opacity: 1; }
  100% { left: 64%; top: -30px; opacity: 1; }
}
@keyframes dsGeloescht {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Löschen findet an Ort und Stelle statt, es gibt nichts, wohin ein Symbol
   fliegen könnte – statt eines reinen Fade-ins pulsiert deshalb zusätzlich
   das Rohdaten-Icon kurz, damit Schritt 5 sichtbar etwas tut. */
@keyframes dsRohdatenPuls {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@keyframes dsAnfrageZuModul {
  0%   { left: 92%; opacity: 0; }
  12%  { opacity: 1; }
  85%  { left: 36%; opacity: 1; }
  100% { left: 36%; opacity: 0; }
}
@keyframes dsErgebnisZuUnternehmen {
  0%   { left: 36%; top: 30px; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 92%; top: -30px; opacity: 1; }
}

.ds-szene[data-schritt="1"].spielt .ds-rohdaten-symbol  { animation: dsRohdatenZuModul 2.4s ease-in-out forwards; }
.ds-szene[data-schritt="2"].spielt .ds-schluessel-symbol { animation: dsSchluesselZuModul 2.4s ease-in-out forwards; }
.ds-szene[data-schritt="4"].spielt .ds-pruefwert-symbol {
  animation: dsModulZuIndex 2.4s ease-in-out forwards;
}
.ds-szene[data-schritt="5"].spielt .ds-geloescht-symbol {
  left: 8%; top: -30px;
  animation: dsGeloescht 0.7s ease-out forwards;
}
.ds-szene[data-schritt="5"].spielt .ds-knoten-rohdaten .loesung-icon {
  animation: dsRohdatenPuls 0.6s ease-in-out 2;
}
.ds-szene[data-schritt="6"].spielt .ds-anfrage-symbol {
  animation: dsAnfrageZuModul 2.4s ease-in-out forwards;
}
.ds-szene[data-schritt="8"].spielt .ds-ergebnis-symbol {
  animation: dsErgebnisZuUnternehmen 2.4s ease-in-out forwards;
}
/* Jede Zwischenstation muss den Ruhezustand bereits abgeschlossener Schritte
   von Hand wiederholen, weil eine Animation an genau ein data-schritt
   gebunden ist und sonst beim Weiterschalten sofort wieder verschwindet. */
.ds-szene[data-schritt="5"].spielt .ds-pruefwert-symbol,
.ds-szene[data-schritt="6"].spielt .ds-pruefwert-symbol,
.ds-szene[data-schritt="7"].spielt .ds-pruefwert-symbol,
.ds-szene[data-schritt="8"].spielt .ds-pruefwert-symbol {
  left: 64%; top: -30px; opacity: 1;
}
.ds-szene[data-schritt="6"].spielt .ds-geloescht-symbol,
.ds-szene[data-schritt="7"].spielt .ds-geloescht-symbol,
.ds-szene[data-schritt="8"].spielt .ds-geloescht-symbol {
  left: 8%; top: -30px; opacity: 1;
}

@keyframes dsFliesstRunter { from { background-position: 0 0; } to { background-position: 0 20px; } }

.ds-szene[data-schritt="1"].spielt .ds-linie-links,
.ds-szene[data-schritt="4"].spielt .ds-linie-rechts,
.ds-szene[data-schritt="8"].spielt .ds-linie-rechts,
.ds-szene[data-schritt="8"].spielt .ds-linie-weiter {
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 14px);
  background-size: 28px 2px;
  animation: szeneFliesstRechts 0.7s linear infinite;
}
/* Schritt 6: die Anfrage kommt vom Unternehmen und läuft bis zum
   Sicherheitsmodul, also über beide Teilstrecken (Prüfindex↔Unternehmen UND
   Sicherheitsmodul↔Prüfindex) – vorher leuchtete nur die hintere Teilstrecke,
   obwohl das Symbol über die ganze Strecke unterwegs war. Fluss nach links,
   wie das Symbol selbst. */
.ds-szene[data-schritt="6"].spielt .ds-linie-rechts,
.ds-szene[data-schritt="6"].spielt .ds-linie-weiter {
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 14px);
  background-size: 28px 2px;
  animation: szeneFliesstLinks 0.7s linear infinite;
}
.ds-szene[data-schritt="2"].spielt .ds-linie-schluessel {
  background-color: transparent;
  background-image: repeating-linear-gradient(180deg, var(--primary) 0 6px, transparent 6px 14px);
  background-size: 2px 20px;
  animation: dsFliesstRunter 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ds-objekt, .ds-ladekreis { display: none; }
  .ds-linie { background-image: none !important; animation: none !important; }
}

.ds-text {
  margin-top: 14px;
  /* Zwei volle Zeilen bei line-height:1.55 (geerbt) – 2.6em war zu knapp,
     dieselbe Korrektur wie bei .szene-text. */
  min-height: 3.1em;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Anklickbare Schrittnummern statt kleiner Punkte, plus ein Play/Pause-Button
   zum manuellen Anhalten und Fortsetzen. Als runde Leiste statt eckiger
   Kästchen, passend zum Kreis-Motiv der Seite (siehe .ablauf-num). Play-Button
   sitzt bewusst außerhalb der Schrittleiste (eigener Kreis, sichtbarer
   Abstand), damit klar ist, dass er kein neunter Schritt ist, sondern eine
   eigene Funktion. */
.ds-steuerung {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.ds-schritte {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.ds-play {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ds-play:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 45%, transparent);
}
.ds-play svg { width: 13px; height: 13px; }
.ds-play .ds-play-symbol { display: none; margin-left: 1px; }
.ds-play.ds-play--pausiert .ds-play-symbol { display: block; }
.ds-play.ds-play--pausiert .ds-pause-symbol { display: none; }
.ds-nr {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ds-nr:hover { background: var(--bg-alt); color: var(--ink); }
.ds-nr[aria-current="true"] {
  background: var(--primary);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* Autoplay widerspricht reduzierter Bewegung – der Button bliebe ohne
   Funktion, die Schrittnummern bleiben trotzdem einzeln anklickbar. */
@media (prefers-reduced-motion: reduce) {
  .ds-play { display: none; }
}

@media (max-width: 640px) {
  .ds-bild { padding-top: 210px; }
  .ds-knoten { width: 84px; margin-left: -42px; }
  .ds-steuerung { gap: 8px; }
  .ds-nr { min-width: 26px; height: 26px; font-size: 0.7rem; }
  .ds-play { width: 26px; height: 26px; }
}

/* ---------- Hero ---------- */

.hero {
  padding-top: clamp(76px, 12vw, 140px);
  padding-bottom: clamp(64px, 10vw, 112px);
  text-align: center;
  overflow: hidden;
}

.hero-inner { max-width: 880px; margin-inline: auto; }

.hero h1 {
  font-size: clamp(2.1rem, 5.8vw, 4.2rem);
  margin-bottom: 26px;
}
.hero .lede { max-width: 620px; margin-inline: auto; }

.hero-actions {
  margin-top: 38px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Karten-Raster ---------- */

.grid {
  display: grid;
  gap: 18px;
  margin-top: 54px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
}
.card h3 { margin-bottom: 11px; }
.card p { color: var(--muted); font-size: 0.97rem; line-height: 1.55; }

.icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}
.icon-box svg {
  width: 21px;
  height: 21px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Ablauf: Timeline mit mittiger Linie, nach Hochschule/Arbeitgeber
   gesplittet. Jede Schrittzahl trägt einen Ring, dessen zwei Halbbögen sich
   beim Durchscrollen des jeweiligen Schritts von oben gleichzeitig links und
   rechts herunter auffüllen und sich unten treffen (assets/app.js).
   Die senkrechte Linie selbst ist statisch, nur die Ringe animieren. ---------- */

.ablauf {
  position: relative;
  margin-top: 56px;
}

.ablauf-linie {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.ablauf-fill {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--tertiary), var(--primary));
}
html.js .ablauf-fill { transition: height 0.12s linear; }

.ablauf-schritt {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(84px, 150px) 1fr;
  align-items: center;
  gap: 20px;
  padding-block: 48px;
}
.ablauf-schritt:first-child { padding-top: 12px; }
.ablauf-schritt:last-child { padding-bottom: 12px; }

.ablauf-num {
  grid-column: 2;
  position: relative;
  width: 108px;
  height: 108px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 50%;
  user-select: none;
}
.ablauf-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Pfade sind direkt so gezeichnet, dass sie oben (12 Uhr) beginnen –
     keine Rotation nötig, im Unterschied zum früheren Vollkreis-Trick. */
}
.ablauf-ring .ring-bg {
  fill: none;
  stroke: var(--line);
  stroke-width: 4.5;
}
.ablauf-ring .ring-fill-links,
.ablauf-ring .ring-fill-rechts {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4.5;
  stroke-linecap: round;
  /* Halber Kreisumfang (π × 46 ≈ 144.5) – beide Halbbögen starten oben und
     laufen unten zusammen, statt eines einzelnen Bogens im Uhrzeigersinn. */
  stroke-dasharray: 144.5;
  stroke-dashoffset: 144.5;
}
html.js .ablauf-ring .ring-fill-links,
html.js .ablauf-ring .ring-fill-rechts { transition: stroke-dashoffset 0.12s linear; }

.ablauf-num-text {
  position: relative;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--muted);
}

.ablauf-seite { max-width: 420px; }
.ablauf-links  { justify-self: end;   text-align: right; }
.ablauf-rechts { justify-self: start; text-align: left; }

.ablauf-wer {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.ablauf-seite h3 { color: var(--ink); font-size: 1.26rem; margin-bottom: 10px; }
.ablauf-seite p  { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin-bottom: 16px; }

.ablauf-links .step-video { margin-left: auto; }
.ablauf-rechts .step-video { margin-right: auto; }

@media (max-width: 860px) {
  .ablauf-linie { left: 22px; }
  .ablauf-schritt {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-left: 52px;
    padding-block: 36px;
  }
  .ablauf-num {
    grid-column: 1;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
  }
  .ablauf-num-text { font-size: 0.86rem; }
  .ablauf-seite,
  .ablauf-links, .ablauf-rechts {
    max-width: none;
    justify-self: stretch;
    text-align: left;
  }
  .ablauf-links .step-video, .ablauf-rechts .step-video { margin-inline: 0; }
}

/* ---------- Feature-Liste ---------- */

.flist {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.flist li {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.flist li:first-child { border-top: 1px solid var(--line-soft); }
.flist svg {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  stroke: var(--h3); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.flist strong { font-weight: 600; letter-spacing: -0.014em; }
.flist span { color: var(--muted); }

/* ---------- Nutzergruppen ---------- */

.audience {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  padding: 38px 34px 40px;
  display: flex;
  flex-direction: column;
}
.audience .icon-box { margin-bottom: 22px; }
.audience h3 { font-size: 1.6rem; letter-spacing: -0.03em; margin-bottom: 12px; }
.audience > p { color: var(--muted); }
.audience ul {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.audience li {
  display: flex;
  gap: 12px;
  font-size: 0.96rem;
  line-height: 1.45;
  align-items: flex-start;
}
.audience li svg {
  width: 18px; height: 18px; flex: none; margin-top: 3px;
  stroke: var(--h3); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Zitat / Aussage ---------- */

.statement {
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.2;
  max-width: 820px;
}

/* ---------- CTA ---------- */

.cta { text-align: center; }
.cta h2 { margin-bottom: 20px; }
.cta .lede { max-width: 540px; margin-inline: auto; }
.cta .hero-actions { margin-top: 34px; }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 40px 48px;
  font-size: 0.82rem;
  color: var(--muted);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }
.footer-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  max-width: 640px;
  line-height: 1.55;
}

/* ---------- Team ---------- */

.person {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 52px;
  align-items: start;
  margin-top: 56px;
}
@media (max-width: 760px) {
  .person { grid-template-columns: 1fr; gap: 32px; }
  .portrait { max-width: 220px; }
}

.portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  position: relative;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--h1), var(--h2) 55%, var(--h3));
  color: #fff;
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.person-role {
  color: var(--muted);
  font-size: 1.02rem;
  margin-top: 8px;
}
.person-body { display: grid; gap: 18px; margin-top: 26px; }
.person-body p { color: var(--ink-soft); line-height: 1.65; }
.person-links {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Formular ---------- */

.form {
  margin-top: 44px;
  display: grid;
  gap: 20px;
  max-width: 620px;
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 620px) { .row2 { grid-template-columns: 1fr; } }

.field { display: grid; gap: 8px; }
.field label {
  font-size: 0.87rem;
  font-weight: 500;
  letter-spacing: -0.008em;
}
.field .req { color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }

.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
  padding-right: 42px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.field input::placeholder,
.field textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.87rem;
  color: var(--muted);
  line-height: 1.5;
}
.consent input {
  width: 18px; height: 18px; flex: none; margin-top: 2px;
  accent-color: var(--accent);
}

.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.form-msg {
  font-size: 0.9rem;
  padding: 14px 16px;
  border-radius: 12px;
  display: none;
  line-height: 1.5;
}
.form-msg.show { display: block; }
.form-msg.ok  { background: var(--ok-bg);  color: var(--ok);  }
.form-msg.err { background: var(--bad-bg); color: var(--bad); }

.contact-side {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px 26px 28px;
  height: fit-content;
}
.contact-side h3 { font-size: 1.05rem; margin-bottom: 14px; }
.contact-side p { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }
.contact-side dl { margin: 0; display: grid; gap: 16px; }
.contact-side dt {
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 3px;
}
.contact-side dd { margin: 0; font-size: 0.95rem; }

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 54px;
  align-items: start;
  margin-top: 44px;
}
.contact-layout .form { margin-top: 0; }
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Scroll-Reveal ---------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

/* ---------- Rechtstexte ---------- */

.legal { max-width: 720px; }
.legal h2 { font-size: 1.5rem; margin-top: 44px; margin-bottom: 14px; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.65; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  z-index: 200;
}
.skip:focus { left: 0; }

/* ==========================================================================
   Nutzerzugang – Nav-Button, Zwischenseite, Login
   ========================================================================== */

/* ---------- Nav-Button ---------- */

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding-inline: 15px;
  border-radius: 980px;
  background: var(--accent);
  color: #fff !important;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn-nav:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--accent) 86%, #000);
  transform: translateY(-1px);
}
.btn-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-nav svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-links .btn-nav { margin-left: 4px; }

/* ---------- Zwischenseite Zugang ---------- */

.access-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
  margin-top: clamp(40px, 6vw, 64px);
}
@media (max-width: 900px) {
  .access-layout { grid-template-columns: 1fr; gap: 40px; }
}

.access-figure {
  margin: 0;
  border-radius: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  padding: 28px;
  display: grid;
  place-items: center;
}
.access-figure svg { width: 100%; height: auto; max-width: 420px; }
@media (max-width: 900px) {
  .access-figure { max-width: 460px; margin-inline: auto; }
}

.access-list { display: grid; gap: 16px; }

.access-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.access-card:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
}
.access-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.access-card h3 { margin-bottom: 8px; }
.access-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

/* Zwei Icons nebeneinander, leicht überlappend */
.access-icons { display: flex; align-items: center; flex: none; }
.access-icons .icon-box { margin-bottom: 0; }
.access-icons .icon-box + .icon-box {
  margin-left: -12px;
  background: var(--surface);
  box-shadow: -4px 0 0 0 var(--surface);
}
.access-card:hover .access-icons .icon-box {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.access-icons .icon-box svg { stroke: var(--accent-ink); }

.access-go {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.access-go svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.access-card:hover .access-go {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

@media (max-width: 560px) {
  .access-card { grid-template-columns: auto 1fr; gap: 16px; padding: 20px; }
  .access-card .access-go { display: none; }
  .access-icons { grid-row: 1; }
  .access-card > div:not(.access-icons) { grid-column: 1 / -1; }
}

.access-foot {
  margin-top: 28px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- Login ---------- */

.auth {
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  place-items: center;
  padding-block: clamp(40px, 8vw, 88px);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(28px, 5vw, 40px);
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.45);
}


.auth-card h1 {
  font-size: clamp(1.6rem, 3.4vw, 2rem);
  letter-spacing: -0.032em;
  margin-bottom: 10px;
}
.auth-sub { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

.auth-card .form { margin-top: 28px; max-width: none; gap: 18px; }
.auth-card .btn { width: 100%; }

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.86rem;
}
.auth-row .consent { font-size: 0.86rem; }

.auth-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.auth-sep::before, .auth-sep::after {
  content: ""; height: 1px; flex: 1; background: var(--line);
}

.auth-alt {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
}

.auth-note {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 440px;
}
.auth-note svg {
  width: 15px; height: 15px; flex: none; margin-top: 2px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.auth-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  margin-bottom: 26px;
}
.auth-switch a {
  text-align: center;
  padding: 9px 8px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
}
.auth-switch a:hover { text-decoration: none; color: var(--ink); }
.auth-switch a[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

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

/* ==========================================================================
   Bausteine für „Für Hochschulen“ und „Sicherheit & Datenschutz“
   ========================================================================== */

/* ---------- Gebäude-Illustration mit Parallax (hochschulen.html) ----------
   Zwei getrennte Bewegungen auf zwei Elementen, damit sie sich nicht
   gegenseitig überschreiben: .geb-bild fliegt einmalig per .reveal/.in
   (CSS-Übergang) ins Bild, das <img> darin bekommt zusätzlich fortlaufend
   einen von app.js berechneten Versatz (Inline-Style) für den eigentlichen
   Parallax-Effekt beim Scrollen. */
.geb-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
}
.geb-bild { overflow: visible; }
html.js .geb-bild.reveal { transform: translateX(70px); }
html.js .geb-bild.reveal.in { transform: none; }
.geb-bild img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(15, 23, 42, 0.18));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .geb-bild img { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5)); }
}
:root[data-theme="dark"] .geb-bild img { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5)); }

@media (max-width: 860px) {
  .geb-wrap { grid-template-columns: 1fr; }
  .geb-bild { order: -1; max-width: 380px; margin-inline: auto; }
  html.js .geb-bild.reveal { transform: translateY(18px); }
}

/* ---------- Hinweiskasten ---------- */

.hinweiskasten {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-top: 36px;
  max-width: 720px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 14px;
}
.hinweiskasten svg {
  width: 19px; height: 19px; flex: none; margin-top: 2px;
  fill: none; stroke: var(--accent-ink); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.hinweiskasten p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- Fließtext in Abschnitten ---------- */

.fliess { max-width: 62ch; display: grid; gap: 18px; margin-top: 34px; }
.fliess p { color: var(--ink-soft); line-height: 1.7; }
.sec-dark .fliess p { color: var(--on-dark-mut); }
.fliess code, .card code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  padding: 1px 6px;
  border-radius: 6px;
}
.sec-dark .fliess code { background: rgba(255, 255, 255, 0.08); border-color: var(--on-dark-line); }

/* ---------- Ablauf mit hervorgehobenem Schritt ---------- */

.fluss {
  margin: 54px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.sec-dark .fluss { background: var(--on-dark-line); border-color: var(--on-dark-line); }

.fluss li {
  background: var(--surface);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 24px 22px;
}
.sec-dark .fluss li { background: var(--dark-2); }

.fluss-n {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.sec-dark .fluss-n {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--on-dark-line);
  color: var(--on-dark-mut);
}

.fluss strong { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.014em; margin-bottom: 5px; }
.fluss span { display: block; color: var(--muted); font-size: 0.94rem; line-height: 1.6; max-width: 58ch; }
.sec-dark .fluss span { color: var(--on-dark-mut); }

/* Der Löschschritt ist der Kern der Aussage und wird hervorgehoben. */
.fluss-loeschung { position: relative; background: var(--ok-bg) !important; }
.sec-dark .fluss-loeschung { background: color-mix(in srgb, var(--ok) 16%, var(--dark-2)) !important; }
.fluss-loeschung .fluss-n { background: var(--ok); border-color: var(--ok); color: #fff; }
.fluss-loeschung strong { color: var(--ok); }
.sec-dark .fluss-loeschung strong { color: var(--ok); }

@media (max-width: 560px) {
  .fluss li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ---------- Kurzlisten in Karten ---------- */

ul.mini { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
ul.mini li {
  font-size: 0.94rem;
  color: var(--ink-soft);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
ul.mini li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
ul.mini li span { color: var(--muted); }

/* ---------- Häufige Fragen ---------- */

.faq { margin-top: 44px; max-width: 760px; display: grid; gap: 2px; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq details:first-child { border-top: 1px solid var(--line-soft); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 25px;
  width: 9px; height: 9px;
  border-right: 1.8px solid var(--muted);
  border-bottom: 1.8px solid var(--muted);
  rotate: 45deg;
  transition: rotate 0.18s ease;
}
.faq details[open] summary::after { rotate: -135deg; top: 29px; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.faq details p {
  padding: 0 40px 22px 0;
  color: var(--muted);
  line-height: 1.7;
  max-width: 64ch;
}

/* ---------- Ehrlicher Stand ---------- */

.stand {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 860px) { .stand { grid-template-columns: minmax(0, 1fr); } }

.stand-spalte {
  background: var(--dark-2);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  padding: 22px 24px 26px;
}
.stand-kopf {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-dark-mut);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--on-dark-line);
}
.stand-spalte:nth-child(1) .stand-kopf { color: var(--ok); }
.stand-spalte:nth-child(2) .stand-kopf { color: var(--warn); }
.stand-spalte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.stand-spalte li {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--on-dark-mut);
  padding-left: 16px;
  position: relative;
}
.stand-spalte li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.stand-spalte li strong { color: var(--on-dark); }

/* ---------- Hero-Hintergrund (Startseite) ---------- */

/* Reicht bewusst bis unter die sticky, durchsichtige Kopfzeile (negativer
   Rand um deren Höhe), damit dort das Foto zu sehen ist statt einer
   Kante – der zusätzliche Top-Abstand unten gleicht das für den Inhalt
   wieder aus, damit die Überschrift nicht unter der Kopfzeile verschwindet. */
.hero-bg {
  min-height: 100vh;
  margin-top: calc(-1 * var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 8vw, 96px);
  padding-top: calc(clamp(48px, 8vw, 96px) + var(--nav-h));
  text-align: left;
  overflow: hidden;
  position: relative;
  color: var(--on-dark);
  background-color: var(--dark);
  background-image: url("hero_banner.jpg");
  background-size: cover;
  background-position: center bottom;
}
/* Zwei Verläufe übereinander: der diagonale dunkelt links für die weiße
   Überschrift ab, der senkrechte blendet unten in die Hintergrundfarbe über
   – sonst bleibt von der hellen Wolkenunterkante des Fotos nur ein
   dunkelgrauer Streifen übrig und die Naht zum weißen Abschnitt darunter
   ist sichtbar, egal wie hell das Foto an der Kante eigentlich ist. */
/* Blendet unten in --dark über, nicht in --bg: die auf den Hero folgende
   Sektion (#warum) ist absichtlich ebenfalls dunkel (.sec-dark), damit aus
   Foto und Abschnitt ein durchgehender dunkler Übergang wird statt eines
   harten Schnitts auf helles Seiten-Weiß. */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 65%, var(--dark) 100%),
    linear-gradient(100deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.22) 55%, rgba(15, 23, 42, 0.05) 100%);
  pointer-events: none;
}

.hero-bg .wrap { position: relative; z-index: 1; }
.hero-bg h1 {
  color: #fff;
  max-width: 1400px;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 6px 22px rgba(0, 0, 0, 0.4);
}
.hero-bg .hero-actions { justify-content: flex-start; align-items: center; margin-top: 40px; }

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding-inline: 22px;
  border-radius: var(--radius);
  color: var(--on-dark);
  font-weight: 500;
  background: color-mix(in srgb, #fff 14%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: background 0.18s ease, transform 0.18s ease;
}
.hero-link:hover {
  background: color-mix(in srgb, #fff 22%, transparent);
  text-decoration: none;
  transform: translateY(-1px);
}
.hero-link svg { width: 15px; height: 15px; transition: transform 0.18s ease; }
.hero-link:hover svg { transform: translateX(3px); }

/* ---------- „Warum Palatius“ – auto-rotierende Karten ----------
   Karten liegen untereinander statt nebeneinander. Jede Karte hat einen
   Kopf mit fester Höhe (Icon + Überschrift, bei inaktiven Karten grau) und
   einen Inhaltsbereich mit fester Höhe (Text + Vergleichszeile), der nur bei
   der aktiven Karte sichtbar ist. Beide Höhen sind feste Pixelwerte, kein
   Messen zur Laufzeit – zu jedem Zeitpunkt ist genau eine Karte aktiv und
   zwei inaktiv, macht in Summe immer dieselbe Gesamthöhe, egal welche der
   drei gerade aktiv ist. Vorher (nebeneinander, per line-clamp gebremster
   Text) sprang beim Kartenwechsel trotzdem die Zeilenzahl und damit die
   ganze Seite darunter. */
.warum {
  margin-top: 54px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warum-karte {
  position: relative;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.warum-karte:hover { border-color: var(--primary); }
.warum-karte:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.warum-karte[aria-selected="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.warum-kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 78px;
  padding: 0 26px;
}
.warum-kopf .icon-box { margin-bottom: 0; flex: none; }
.warum-karte h3 {
  font-size: 1.05rem;
  margin: 0;
  color: var(--muted);
  transition: color 0.2s ease;
}
.warum-karte[aria-selected="true"] h3 { color: var(--ink); }

/* Fest auf 0 bzw. auf einen Pixelwert mit Puffer – nie auto/content-basiert,
   sonst wäre die Höhe wieder vom Textumbruch abhängig. */
.warum-body {
  height: 0;
  padding: 0 26px;
  opacity: 0;
  visibility: hidden;
  transition: height 0.25s ease, opacity 0.15s ease, padding-bottom 0.25s ease;
}
.warum-karte[aria-selected="true"] .warum-body {
  height: 148px;
  padding-bottom: 24px;
  opacity: 1;
  visibility: visible;
}
.warum-body p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.warum-vergleich {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.86rem;
}
.warum-vergleich .alt { color: var(--muted); text-decoration: line-through; }
.warum-vergleich .neu { color: var(--primary); font-weight: 700; }
.warum-vergleich svg { width: 15px; height: 15px; stroke: var(--muted); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .warum-body { transition: none; }
}

.warum-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--line-soft);
  overflow: hidden;
}
.warum-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--primary);
}
.warum-karte[aria-selected="true"] .warum-progress span.run {
  animation: warumFill var(--warum-dauer, 5.5s) linear forwards;
}
@keyframes warumFill { from { width: 0%; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .warum-karte[aria-selected="true"] .warum-progress span.run { animation: none; width: 100%; }
}

/* #warum liegt jetzt auf .sec-dark (Übergang vom Hero-Foto) – dieselbe
   Behandlung wie .sec-dark .card an anderer Stelle. */
.sec-dark .warum-karte { background: var(--dark-2); border-color: var(--on-dark-line); }
.sec-dark .warum-karte h3 { color: var(--on-dark-mut); }
.sec-dark .warum-karte[aria-selected="true"] h3 { color: var(--on-dark); }
.sec-dark .warum-body p { color: var(--on-dark-mut); }
.sec-dark .warum-vergleich { border-top-color: var(--on-dark-line); }
.sec-dark .warum-vergleich .alt { color: var(--on-dark-mut); }
.sec-dark .warum-progress { background: var(--on-dark-line); }

/* ---------- Video-Platzhalter in den Ablaufschritten ---------- */

.step-video {
  margin-top: 16px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
}
.step-video svg {
  width: 30px; height: 30px; margin: 0;
  stroke: var(--muted); fill: none; stroke-width: 1.4;
}
.step-video span {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}