/* ==========================================================================
   RE-CARE — Design-System
   Eine einzige Stildatei. Reihenfolge: Schriften, Tokens, Dunkelmodus, Reset,
   Typografie, Layout, Kopfzeile, Logo-Auftritt, Startseite, Detailseiten,
   Fußzeile, Hilfsklassen.

   Die Farben stammen ausnahmslos aus dem Logo. Sie wurden pixelweise aus
   re-care-logo-v2.webp ausgelesen, nicht geschätzt — die Werte stehen in
   inhalt/00-bestandsaufnahme.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (selbst gehostet, kein Google-CDN — DSGVO)
   Beide Familien sind Variable Fonts: eine Datei deckt alle Strichstärken ab.
   latin-ext wird per unicode-range nur geladen, wenn Zeichen wie ō, ä, é
   tatsächlich vorkommen — bei den japanischen Namen und Umlauten also oft.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens

   Hell ist der Ausgangszustand. Dunkel wird an zwei Stellen gesetzt: einmal
   für "System steht auf dunkel und der Nutzer hat nichts gewählt", einmal für
   "Nutzer hat dunkel gewählt". Die Wiederholung ist Absicht — light-dark()
   wäre kürzer, würde aber auf älteren Browsern die gesamte Farbgebung
   ausfallen lassen.

   Ein neues Farb-Token gehört in ALLE DREI Blöcke.
   -------------------------------------------------------------------------- */

:root {
  /* Das Logospektrum. Unveränderlich — es ist das Logo. */
  --s1: #34267b;   /* Violett     — linke Hand, äußerer Bogen */
  --s2: #292977;
  --s3: #173678;   /* Indigo      — Wortmarke links */
  --s4: #044678;
  --s5: #035985;
  --s6: #037797;   /* Petrolblau  — häufigster Farbwert im Logo */
  --s7: #028aa6;
  --s8: #03a6b9;
  --s9: #03b7c6;   /* Cyan        — rechte Hand, Wortmarke rechts */

  --spektrum: linear-gradient(90deg,
      var(--s1) 0%, var(--s3) 22%, var(--s4) 40%,
      var(--s6) 62%, var(--s7) 80%, var(--s9) 100%);

  /* Flächen */
  --bg: #fbfbfd;
  --bg-subtle: #f2f4f9;
  --bg-raised: #ffffff;

  /* Text */
  --text: #14182b;
  --text-muted: #4d5573;
  /* Nicht heller wählen: ab hier reißt der Kontrast von 4.5:1 für Kleintext
     (Jahreszahlen, DOIs, Kennzeilen) nach WCAG AA. */
  --text-faint: #5e6683;

  /* Linien */
  --border: #e2e5ef;
  --border-strong: #c6cbdc;

  /* Akzent */
  --accent: #044678;
  --accent-hover: #03325a;
  --accent-subtle: #eaf0f6;
  --accent-contrast: #ffffff;

  /* Verlauf für Text. Auf hellem Grund trägt das Logospektrum selbst; auf
     dunklem Grund säuft das Violett ab, deshalb dort eine aufgehellte
     Fassung derselben Farbtöne (siehe Dunkelmodus). */
  --spektrum-text: var(--spektrum);

  /* Wirkung auf dem Logo-Zeichen */
  --mark-filter: none;

  /* Fokusring */
  --focus: #037797;

  /* Überfahren: das Petrolblau des Logos, der häufigste Farbwert darin. */
  --hover: #037797;

  /* Weiß der Partnerlogos. Drei der vier Bilder haben einen deckend weißen
     Hintergrund; der Abschnitt muss denselben Ton tragen, sonst zeichnen sich
     die Bildkanten als Kästen ab. */
  --plate: #ffffff;

  /* Schrift */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Fließende Schriftgrößen: skalieren zwischen 22rem und 80rem Viewport */
  /* Die Schlagzeile ist ein ganzer Satz, keine drei Wörter. Entsprechend
     zurückhaltender skaliert — sonst steht sie über sieben Zeilen. */
  --size-display: clamp(1.85rem, 1.35rem + 2.3vw, 3.05rem);
  --size-h1: clamp(1.95rem, 1.45rem + 2.2vw, 3rem);
  --size-h2: clamp(1.55rem, 1.25rem + 1.5vw, 2.4rem);
  --size-h3: clamp(1.1rem, 1.02rem + 0.4vw, 1.32rem);
  --size-lead: clamp(1.1rem, 1.02rem + 0.45vw, 1.36rem);
  --size-body: clamp(1rem, 0.975rem + 0.11vw, 1.0625rem);
  --size-nav: 0.95rem;
  --size-small: 0.875rem;
  --size-tiny: 0.8125rem;

  /* Maße */
  --wrap: 74rem;
  --measure: 40rem;        /* Lesemaß für Fließtext, ca. 68 Zeichen */
  --gap: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);
  --section-pad: clamp(3.5rem, 2rem + 6vw, 7rem);
  --radius: 0.75rem;

  color-scheme: light;
}

/* Dunkel — System steht auf dunkel, nichts ausdrücklich gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #080d24;
    --bg-subtle: #0d1330;
    --bg-raised: #121a3c;

    --text: #eef1fa;
    --text-muted: #a8b2d4;
    --text-faint: #8e99c0;

    --border: #232c58;
    --border-strong: #33407a;

    --accent: #45c8dc;
    --accent-hover: #6ee4e9;
    --accent-subtle: #10203f;
    --accent-contrast: #061024;

    --spektrum-text: linear-gradient(90deg,
        #9b8ef0 0%, #7f96ec 22%, #5aa8dd 42%,
        #35bcd2 66%, #45d0da 84%, #6ee4e9 100%);

    --mark-filter: brightness(1.28) saturate(1.05);

    --focus: #45c8dc;
    --hover: #45c8dc;
    /* Im Dunkelmodus tragen die Logos eine eigene helle Fläche, der Abschnitt
       bleibt dunkel. */
    --plate: #ffffff;

    color-scheme: dark;
  }
}

/* Dunkel — ausdrücklich gewählt */
:root[data-theme='dark'] {
  --bg: #080d24;
  --bg-subtle: #0d1330;
  --bg-raised: #121a3c;

  --text: #eef1fa;
  --text-muted: #a8b2d4;
  --text-faint: #8e99c0;

  --border: #232c58;
  --border-strong: #33407a;

  --accent: #45c8dc;
  --accent-hover: #6ee4e9;
  --accent-subtle: #10203f;
  --accent-contrast: #061024;

  --spektrum-text: linear-gradient(90deg,
      #9b8ef0 0%, #7f96ec 22%, #5aa8dd 42%,
      #35bcd2 66%, #45d0da 84%, #6ee4e9 100%);

  --mark-filter: brightness(1.28) saturate(1.05);

  --focus: #45c8dc;
  --hover: #45c8dc;
  --plate: #ffffff;

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Die Kopfzeile klebt oben; Sprungziele müssen darunter landen. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }

strong { font-weight: 600; }

.lead {
  font-size: var(--size-lead);
  color: var(--text-muted);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.measure { max-width: var(--measure); }

.section { padding-block: var(--section-pad); }
.section-subtle { background-color: var(--bg-subtle); }

.section-head {
  display: grid;
  gap: 0.9rem;
  margin-block-end: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
}
.section-head h2 { font-size: var(--size-h2); max-width: 24ch; }
.section-head p { color: var(--text-muted); font-size: var(--size-lead); max-width: var(--measure); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--size-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
}
.eyebrow::before {
  content: '';
  width: 1.8rem;
  height: 2px;
  border-radius: 2px;
  background-image: var(--spektrum);
}

/* Sprungmarke für die Tastaturbedienung */
.skip-link {
  position: absolute;
  inset-inline-start: 0.6rem;
  inset-block-start: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  background-color: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--size-small);
  font-weight: 600;
  text-decoration: none;
  transition: inset-block-start 0.18s ease;
}
.skip-link:focus {
  inset-block-start: 0;
  color: var(--accent-contrast);
}

/* --------------------------------------------------------------------------
   6. Kopfzeile
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background-color: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color 0.25s ease;
}
/* Ohne backdrop-filter (ältere Browser) wäre die Kopfzeile durchsichtig und
   der Text darunter läge frei. Dann lieber deckend. */
@supports not (backdrop-filter: blur(1px)) {
  .site-head { background-color: var(--bg); }
}
.site-head[data-stuck='true'] { border-block-end-color: var(--border); }

.site-head > .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.25rem;
}

.head-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
}
/* Zwei Vergrößerungen auf Wunsch des Betreibers: erst von 1,85rem auf 2,4rem,
   dann noch einmal 20 % — macht 2,88rem. */
.head-mark > svg:first-child { width: 2.88rem; height: 2.88rem; flex: none; }
/* Die Wortmarke behält ihr Seitenverhältnis von 1030:176. Höhe an der
   Versalhöhe ausgerichtet, damit sie neben dem Zeichen ruhig steht. */
.head-word { width: auto; height: 1.05rem; flex: none; }

.site-nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 1.35rem;
  font-size: var(--size-nav);
}
.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding-block: 0.35rem;
  border-block-end: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.site-nav a:hover { color: var(--hover); border-block-end-color: var(--hover); }
.site-nav a[aria-current='true'],
.site-nav a[aria-current='page'] {
  color: var(--text);
  border-block-end-color: var(--s6);
}

.head-tools { display: flex; align-items: center; gap: 0.4rem; margin-inline-start: 0.5rem; }

/* Gilt für Schaltflächen wie für Verweise (LinkedIn, E-Mail).
   2,76rem = 2,4rem + 15 %, auf Wunsch des Betreibers. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.76rem;
  height: 2.76rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background-color: transparent;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.icon-btn:hover {
  color: var(--hover);
  border-color: var(--hover);
  background-color: var(--accent-subtle);
}
.icon-btn svg { width: 1.32rem; height: 1.32rem; }

/* Der Umschalter zeigt immer das Ziel, nicht den Zustand. */
.theme-toggle .icon-dark { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-dark { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-dark { display: block; }
  :root:not([data-theme='light']) .theme-toggle .icon-light { display: none; }
}

.nav-toggle { display: none; }

@media (max-width: 54rem) {
  .nav-toggle { display: inline-grid; }
  .site-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.5rem 1.25rem 1.25rem;
    background-color: var(--bg);
    border-block-end: 1px solid var(--border);
    font-size: 1.05rem;
  }
  .site-nav[data-open='false'] { display: none; }
  .site-nav a {
    padding-block: 0.75rem;
    border-block-end: 1px solid var(--border);
  }
  .site-nav a:last-child { border-block-end: 0; }
  .site-nav a[aria-current='true'],
  .site-nav a[aria-current='page'] { border-block-end-color: var(--border); color: var(--s6); }
  .head-tools { margin-inline-start: auto; }
}

/* --------------------------------------------------------------------------
   7. Das Logo und sein Auftritt

   Aufbau: ein SVG-Zeichen (Ring, zwei Hände, Netz aus Knoten und Kanten,
   Pulslinie) und daneben die Wortmarke als Text. Beim ersten Betreten setzt
   sich das Zeichen Teil für Teil zusammen, danach steht es sofort.

   Ohne JavaScript, beim zweiten Besuch und bei reduzierter Bewegung greift
   der Endzustand weiter unten.
   -------------------------------------------------------------------------- */

.logo-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.4rem + 2.4vw, 2.6rem);
  flex-wrap: wrap;
}

/* Kein Filter mehr: der Dunkelmodus hebt die Verlaufsstufen direkt an
   (siehe Abschnitt 7), das erhält die Farbabstufung besser als brightness(). */
.logo-mark {
  width: clamp(8.5rem, 5.5rem + 13vw, 14rem);
  height: auto;
}

.wordmark { display: grid; gap: 0.5rem; justify-items: start; text-align: start; }

/* Die Wortmarke ist seit der Überarbeitung ein SVG, kein Text mehr. Grund:
   das "A" trägt im Original keinen Querbalken, sondern einen Punkt — mit
   einer Systemschrift ist das nicht darstellbar. Nebeneffekt: der frühere
   Ärger mit background-clip:text entfällt vollständig. */
.wordmark-word {
  display: block;
  width: clamp(15rem, 8.5rem + 26vw, 26rem);
  height: auto;
}

.wordmark-rule {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-image: var(--spektrum-text);
  opacity: 0.75;
}

.wordmark-sub {
  font-size: clamp(0.62rem, 0.55rem + 0.3vw, 0.82rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 46rem) {
  .logo-lockup { flex-direction: column; }
  .wordmark { justify-items: center; text-align: center; }
}

/* Der Ruhezustand ist der Endzustand: ohne die Klasse .intro-run steht alles
   fertig da. Das ist Absicht — läge der verborgene Zustand im Grundstil,
   bliebe der Kopfbereich ohne JavaScript dauerhaft leer.

   Gesetzt wird .intro-run von einem kurzen Inline-Skript im <head> der
   Startseite, also noch vor dem ersten Anstrich. Kein Aufblitzen. */

.intro-run .logo-mark [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.intro-run .logo-mark [data-pop] {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}

/* Die Verzögerung jedes Teils steckt als --d im Markup. */
.intro-run .logo-mark #ring  { animation: draw 1.15s cubic-bezier(.35,.7,.3,1) 0.05s forwards; }
.intro-run .logo-mark .edge  { animation: draw 0.55s ease-out var(--d, 0.7s) forwards; }

/* Die Hände sind Flächen, keine Striche — sie lassen sich nicht "zeichnen".
   Sie steigen stattdessen von unten herein, so wie zwei Hände, die etwas
   auffangen. */
.intro-run .logo-mark .hand {
  opacity: 0;
  transform: translateY(26px);
  animation: handRise 0.85s cubic-bezier(.2,.8,.3,1) var(--d, 0.3s) forwards;
}
.intro-run .logo-mark .node  { animation: pop 0.5s cubic-bezier(.2,1.5,.4,1) var(--d, 1s) forwards; }
.intro-run .logo-mark #pulse { animation: draw 0.8s cubic-bezier(.4,.1,.2,1) 1.45s forwards; }

/* Die Wortmarke wischt als Ganzes von links herein — die Buchstaben treten
   dabei nacheinander aus dem Farbverlauf hervor. */
.intro-run .wordmark-word {
  clip-path: inset(0 100% 0 0);
  animation: wipe 1.25s cubic-bezier(.2,.8,.3,1) 1.15s forwards;
}

.intro-run .wordmark-rule {
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: grow 0.8s cubic-bezier(.2,.8,.3,1) 1.9s forwards;
}

.intro-run .wordmark-sub  { opacity: 0; animation: fade 0.8s ease 2.05s forwards; }
/* Die beiden Fragen treten nacheinander auf — sie sollen gelesen, nicht
   überflogen werden. */
.intro-run .hero-questions span:nth-child(1) { opacity: 0; animation: rise 0.8s cubic-bezier(.2,.8,.3,1) 2.20s forwards; }
.intro-run .hero-questions span:nth-child(2) { opacity: 0; animation: rise 0.8s cubic-bezier(.2,.8,.3,1) 2.45s forwards; }
.intro-run .hero-actions  { opacity: 0; animation: rise 0.9s cubic-bezier(.2,.8,.3,1) 2.72s forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop  { to { opacity: 1; transform: scale(1); } }
@keyframes handRise { to { opacity: 1; transform: none; } }
@keyframes rise { from { transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }

/* --------------------------------------------------------------------------
   Das Logo im Dunkelmodus

   Die Farben des Originals sind für weißen Grund gemacht; das Violett am
   linken Ende säuft auf dunklem Grund ab. Die Verlaufsstufen werden deshalb
   angehoben — über die Klassen an den <stop>-Elementen, nicht über einen
   Filter, damit die Farbabstufung erhalten bleibt.
   -------------------------------------------------------------------------- */

:root[data-theme='dark'] .logo-mark .g0,
:root[data-theme='dark'] .head-mark .g0 { stop-color: #a48ef2; }
:root[data-theme='dark'] .logo-mark .g1,
:root[data-theme='dark'] .head-mark .g1 { stop-color: #7d95ea; }
:root[data-theme='dark'] .logo-mark .g2,
:root[data-theme='dark'] .head-mark .g2 { stop-color: #4aa6d9; }
:root[data-theme='dark'] .logo-mark .g3,
:root[data-theme='dark'] .head-mark .g3 { stop-color: #35bcd2; }
:root[data-theme='dark'] .logo-mark .g4,
:root[data-theme='dark'] .head-mark .g4 { stop-color: #6ee4e9; }

:root[data-theme='dark'] .wordmark-word .w0,
:root[data-theme='dark'] .head-mark .w0 { stop-color: #9b8ef0; }
:root[data-theme='dark'] .wordmark-word .w1,
:root[data-theme='dark'] .head-mark .w1 { stop-color: #6f9ae8; }
:root[data-theme='dark'] .wordmark-word .w2,
:root[data-theme='dark'] .head-mark .w2 { stop-color: #3fb4cf; }
:root[data-theme='dark'] .wordmark-word .w3,
:root[data-theme='dark'] .head-mark .w3 { stop-color: #6ee4e9; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo-mark .g0,
  :root:not([data-theme='light']) .head-mark .g0 { stop-color: #a48ef2; }
  :root:not([data-theme='light']) .logo-mark .g1,
  :root:not([data-theme='light']) .head-mark .g1 { stop-color: #7d95ea; }
  :root:not([data-theme='light']) .logo-mark .g2,
  :root:not([data-theme='light']) .head-mark .g2 { stop-color: #4aa6d9; }
  :root:not([data-theme='light']) .logo-mark .g3,
  :root:not([data-theme='light']) .head-mark .g3 { stop-color: #35bcd2; }
  :root:not([data-theme='light']) .logo-mark .g4,
  :root:not([data-theme='light']) .head-mark .g4 { stop-color: #6ee4e9; }

  :root:not([data-theme='light']) .wordmark-word .w0 { stop-color: #9b8ef0; }
  :root:not([data-theme='light']) .wordmark-word .w1 { stop-color: #6f9ae8; }
  :root:not([data-theme='light']) .wordmark-word .w2 { stop-color: #3fb4cf; }
  :root:not([data-theme='light']) .wordmark-word .w3 { stop-color: #6ee4e9; }
}

/* Das kleine Zeichen in der Kopfzeile ist ein eigenes, vereinfachtes SVG —
   der volle Netzaufbau ist bei 30 px nicht mehr lesbar. Es wird nie animiert. */

/* --------------------------------------------------------------------------
   8. Kopfbereich der Startseite
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(3rem, 1rem + 8vw, 6.5rem) clamp(3rem, 1rem + 6vw, 5.5rem);
  background-image: linear-gradient(180deg, var(--bg-subtle), var(--bg));
}

.hero-inner {
  display: grid;
  gap: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  justify-items: center;
}

/* Drei Fragen untereinander statt eines Aussagesatzes. Sie sind zusammen die
   Überschrift der Seite — deshalb ein einziges h1 mit drei Zeilen, nicht drei
   Überschriften. */
.hero-questions {
  font-family: var(--font-serif);
  font-size: var(--size-display);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.015em;
  display: grid;
  gap: 0.35em;
  justify-items: center;
  /* Keine Breitenbegrenzung: jede Frage soll in eine Zeile passen. Die
     längste braucht rund 1000 px, der Seitencontainer bietet 1184 px.
     Auf schmalen Geräten bricht sie umgehend um, das ist gewollt. */
  max-width: none;
}
.hero-questions span { display: block; }
/* Die letzte Frage ist die, auf die das Netzwerk hinauswill. */
.hero-questions span:last-child {
  background-image: var(--spektrum-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  font-size: var(--size-lead);
  color: var(--text-muted);
  max-width: 48ch;
  margin: 0;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* Rund 20 % größer als zuvor, Schrift eingeschlossen (0,875rem → 1,05rem). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.86rem 1.62rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 1.05rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--text);
  background-color: transparent;
  transition: transform 0.18s ease, border-color 0.18s ease,
              background-color 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--s6); color: var(--text); }
.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); }

/* --------------------------------------------------------------------------
   9. Forschungsfelder
   -------------------------------------------------------------------------- */

.areas {
  display: grid;
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Vier Felder in zwei Spalten gehen glatt auf — anders als die fünf zuvor,
   die eine leere Zelle hinterließen. */
@media (min-width: 52rem) {
  .areas { grid-template-columns: repeat(2, 1fr); }
}

.area {
  position: relative;
  background-color: var(--bg-raised);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  display: grid;
  gap: 0.7rem;
  align-content: start;
}
/* Die Leiste über den Feldern trägt denselben Verlauf wie die Linie unter der
   Wortmarke — und zwar EINEN durchgehenden über alle vier Felder, nicht vier
   einzelne. Jedes Feld zeigt ein Viertel davon: der Verlauf wird auf 400 %
   gestreckt, und die Hintergrundposition wählt den passenden Ausschnitt.

   Zu den Werten 0 / 33,3 / 66,7 / 100: bei vierfacher Breite blendet die
   Position p den Ausschnitt von 3p/400 bis 3p/400 + 1/4 ein. Das ergibt
   genau die vier aufeinanderfolgenden Viertel. */
.area::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background-image: var(--spektrum-text);
  background-size: 400% 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s cubic-bezier(.2,.8,.25,1);
}
.area:nth-child(1)::before { background-position: 0% 0; }
.area:nth-child(2)::before { background-position: 33.333% 0; }
.area:nth-child(3)::before { background-position: 66.667% 0; }
.area:nth-child(4)::before { background-position: 100% 0; }
.area.is-in::before { transform: scaleX(1); }

/* Zwei Farben je Feld: --area-tint für die Leiste am oberen Rand, die rein
   dekorativ ist und deshalb das Logospektrum unverändert zeigen darf, und
   --area-ink für die Ziffer. Am Cyan-Ende reicht das Spektrum auf weißem
   Grund nur 2,4:1 — die Ziffern laufen deshalb auf abgedunkelten Werten
   derselben Farbtöne.

   Vier Felder, deshalb vier Stützstellen quer durch das Spektrum. */
.area:nth-child(1) { --area-tint: var(--s1); --area-ink: #34267b; }
.area:nth-child(2) { --area-tint: var(--s4); --area-ink: #044678; }
.area:nth-child(3) { --area-tint: var(--s6); --area-ink: #026c92; }
.area:nth-child(4) { --area-tint: var(--s9); --area-ink: #05707f; }

.area-no {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--area-ink);
}

/* Auf dunklem Grund kehrt sich das Problem um: dort ist das Violett zu dunkel. */
:root[data-theme='dark'] .area:nth-child(1) { --area-ink: #9b8ef0; }
:root[data-theme='dark'] .area:nth-child(2) { --area-ink: #5aa8dd; }
:root[data-theme='dark'] .area:nth-child(3) { --area-ink: #35bcd2; }
:root[data-theme='dark'] .area:nth-child(4) { --area-ink: #6ee4e9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .area:nth-child(1) { --area-ink: #9b8ef0; }
  :root:not([data-theme='light']) .area:nth-child(2) { --area-ink: #5aa8dd; }
  :root:not([data-theme='light']) .area:nth-child(3) { --area-ink: #35bcd2; }
  :root:not([data-theme='light']) .area:nth-child(4) { --area-ink: #6ee4e9; }
}

.area h3 { font-size: var(--size-h3); }
/* Ohne :not() gewinnt diese Regel gegen .area-no — gleiche Spezifität plus
   Kindselektor — und die Ziffern verlören Größe wie Farbe. */
.area > p:not(.area-no) { color: var(--text-muted); font-size: var(--size-small); margin: 0; }

.area-pubs { margin-block-start: 0.4rem; }
.area-pubs > summary {
  cursor: pointer;
  font-size: var(--size-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.area-pubs > summary::-webkit-details-marker { display: none; }
.area-pubs > summary::before {
  content: '▸';
  transition: transform 0.2s ease;
  display: inline-block;
}
.area-pubs[open] > summary::before { transform: rotate(90deg); }
.area-pubs > summary:hover { color: var(--text); }

.pub-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
  margin-block-start: 0.9rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--border);
}
.pub-list li { font-size: var(--size-tiny); color: var(--text-muted); line-height: 1.55; }
.pub-list a { word-break: break-word; }
/* Journal- und Buchtitel in echter Kursive. Ohne diese Regel setzt der Browser
   die Grotesk schräg, weil von Inter nur der aufrechte Schnitt vorliegt —
   und die Newsreader-Kursive läge ungenutzt auf dem Server. */
.pub-list em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08em;
}

/* --------------------------------------------------------------------------
   10. Mitglieder
   -------------------------------------------------------------------------- */

.members {
  list-style: none;
  display: grid;
  gap: var(--gap);
}
@media (min-width: 44rem) { .members { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .members { grid-template-columns: repeat(3, 1fr); } }

/* Die Leiste am oberen Rand trägt denselben Verlauf wie die Linie unter der
   Wortmarke. Als Hintergrundbild statt als Rahmen — ein Rahmen kann keinen
   Verlauf tragen, und border-image würde alle vier Seiten betreffen. */
.member {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.4rem;
  background-color: var(--bg-raised);
  background-image: var(--spektrum-text);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 0;
  border: 1px solid var(--border);
  border-block-start: 0;
  border-radius: var(--radius);
}
.member h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.member .role {
  font-size: var(--size-tiny);
  color: var(--s6);
  font-weight: 600;
}
:root[data-theme='dark'] .member .role { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .member .role { color: var(--accent); }
}

.member dl { margin: 0; display: grid; gap: 0.45rem; font-size: var(--size-small); }
.member dt {
  font-size: var(--size-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
}
.member dd { margin: 0; color: var(--text-muted); }
.member dd a { word-break: break-word; }
.member ul { list-style: none; display: grid; gap: 0.15rem; }
.member ul li { position: relative; padding-inline-start: 0.85rem; }
.member ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--border-strong);
}

/* Sichtbar sind zunächst der Gründer und die beiden Kooperationspartner.
   Die übrigen 26 stecken in einem <details>: das klappt auch ohne
   JavaScript auf, der Browser kann das von sich aus. */
.members-more { margin-block-start: var(--gap); }

.members-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  list-style: none;
  padding: 0.72rem 1.35rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: var(--size-small);
  font-weight: 550;
  color: var(--text);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.members-more > summary::-webkit-details-marker { display: none; }
.members-more > summary:hover { border-color: var(--s6); background-color: var(--bg-raised); }

.members-more > summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}
.members-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

/* Zwei Beschriftungen, eine je Zustand — so muss JavaScript nichts umbenennen. */
.members-more > summary .label-open { display: none; }
.members-more[open] > summary .label-open { display: inline; }
.members-more[open] > summary .label-closed { display: none; }

.members-more .members { margin-block-start: var(--gap); }

/* --------------------------------------------------------------------------
   11. Neuigkeiten
   -------------------------------------------------------------------------- */

.updates { list-style: none; display: grid; gap: 1.6rem; }

.update {
  display: grid;
  gap: 1.1rem;
  align-items: start;
  padding-block-end: 1.6rem;
  border-block-end: 1px solid var(--border);
}
.update:last-child { padding-block-end: 0; border-block-end: 0; }

@media (min-width: 46rem) {
  .update { grid-template-columns: 16rem 1fr; gap: 2rem; align-items: center; }
}

.update-media {
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--bg-subtle);
}
.update-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.update-body { display: grid; gap: 0.5rem; justify-items: start; }
.update-body time {
  font-size: var(--size-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
}
.update-body h3 { font-size: var(--size-h3); }
.update-body p { color: var(--text-muted); font-size: var(--size-small); margin: 0; }

.more {
  font-size: var(--size-small);
  font-weight: 550;
  text-decoration: none;
}
.more:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   12. Partner
   -------------------------------------------------------------------------- */

/* Vier Logos in einem Raster, dessen Spalten den Seitenverhältnissen der
   Bilder folgen: 3.74 / 3.84 / 3.55 / 5.63. Nur so wirken alle vier gleich
   groß. Bei gleich breiten Spalten fällt das DFG-Logo ab — es ist mit 1024×182
   das mit Abstand flachste und würde von der Spaltenbreite gedeckelt, während
   die anderen ihre volle Höhe ausschöpfen. */
.partners {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  /* Die Reihe nimmt die volle Satzspiegelbreite ein: das erste Logo sitzt
     bündig am linken Rand, das letzte am rechten. Über die Abstände wird
     zugleich die Größe gesteuert — je mehr Luft zwischen den Logos, desto
     kleiner werden sie, weil die Spalten sich den Rest teilen.

     Eine frühere Fassung begrenzte stattdessen die Reihenbreite und zentrierte
     sie. Das rückte die Logos eng zusammen und ließ links und rechts leere
     Ränder stehen — deutlich schlechter. Nicht zurückbauen. */
  gap: clamp(1.5rem, 0.6rem + 4.4vw, 4.5rem);
}
@media (min-width: 52rem) {
  /* Die letzte Spalte trägt 5.63 × 1.15 = 6.47 — dadurch steht das DFG-Logo
     15 % größer als die übrigen, wie gewünscht. */
  .partners { grid-template-columns: 3.74fr 3.84fr 3.55fr 6.47fr; }
}
/* Im hellen Modus trägt der ganze Abschnitt dasselbe Weiß wie die Bilder.
   Sonst zeichnen sich deren deckende Hintergründe als Rechtecke gegen den
   leicht getönten Seitenhintergrund ab — genau das war zu sehen. */
#partners { background-color: var(--plate); }
:root[data-theme='dark'] #partners { background-color: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) #partners { background-color: var(--bg); }
}

.partners li { display: grid; place-items: center; width: 100%; }

/* Auf schmalen Geräten (zwei gleiche Spalten) bestimmt die Höhe die Größe.
   Ab Desktopbreite füllt jedes Logo seine Spalte aus — weil die Spalten den
   Seitenverhältnissen folgen, stehen dann alle exakt gleich hoch, und das
   DFG-Logo genau 15 % höher. Eine feste Höhe wäre dort falsch: sie würde mit
   max-width kollidieren und die Bilder verzerren. */
.partners img {
  height: clamp(2.2rem, 1.4rem + 2.4vw, 3rem);
  width: auto;
  max-width: 100%;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
@media (min-width: 52rem) {
  .partners img { width: 100%; height: auto; max-width: none; }
}
.partners img:hover { opacity: 1; }

/* Im Dunkelmodus KEIN Filter. Drei der vier Logos haben einen deckend weißen
   Hintergrund (70–84 % der Fläche); brightness(0) invert(1) färbt dann das
   ganze Rechteck ein und macht aus dem Logo einen hellen Kasten. Nur das
   DFG-Logo ist freigestellt. Stattdessen bekommen alle vier eine helle
   Trägerfläche — das ist ohnehin die korrektere Behandlung, Instituts-
   logos sollen ihre Farben behalten. */
:root[data-theme='dark'] .partners li,
:root[data-theme='dark'] .partners img { border-radius: 0.5rem; }
:root[data-theme='dark'] .partners li {
  background-color: #ffffff;
  padding: 0.7rem 0.9rem;
  width: auto;
}
:root[data-theme='dark'] .partners img { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .partners li,
  :root:not([data-theme='light']) .partners img { border-radius: 0.5rem; }
  :root:not([data-theme='light']) .partners li {
    background-color: #ffffff;
    padding: 0.7rem 0.9rem;
    width: auto;
  }
  :root:not([data-theme='light']) .partners img { opacity: 1; }
}

/* --------------------------------------------------------------------------
   13. Kontakt
   -------------------------------------------------------------------------- */

.contact-card {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  background-color: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Nur noch ein Kasten, seit die Postanschrift entfallen ist — die steht
   ohnehin vollständig im Impressum. Rund 30 % kleiner als zuvor. */
.contact-card-solo { max-width: 24rem; padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); }

.contact-list { list-style: none; display: grid; gap: 0.7rem; }
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  word-break: break-word;
}
.contact-list a:hover { text-decoration: underline; }
.contact-list svg { width: 1.25em; height: 1.25em; flex: none; }

/* --------------------------------------------------------------------------
   14. Detail- und Textseiten
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1rem, 0.8rem + 1vw, 1.6rem);
  background-image: linear-gradient(180deg, var(--bg-subtle), var(--bg));
}
.page-head .wrap { display: grid; gap: 0.9rem; }
/* 34ch, damit auch der längste Titel ("Resilient Societies in Times of
   Uncertainty") auf Desktopbreite in eine Zeile passt. */
.page-head h1 { font-size: var(--size-h1); max-width: 34ch; }
/* Die Unterzeile ist eine Ortsangabe mit Datum und soll in eine Zeile passen —
   das Lesemaß von 40rem würde sie umbrechen. */
.page-head .kicker {
  font-size: var(--size-lead);
  color: var(--text-muted);
  max-width: 62rem;
  text-wrap: pretty;
}
.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: var(--size-tiny);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-faint);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--size-small);
  font-weight: 550;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* Berichtsseiten: Bild links, Text rechts daneben.

   Vorher stand das Bild in voller Breite über dem Text. Das riss eine große
   Lücke zwischen Datum und Bild auf und ließ Bild und Text unbündig
   nebeneinanderstehen. Jetzt beginnen beide Spalten auf derselben Höhe.

   Das Bild bleibt beim Scrollen stehen (position: sticky) — bei den langen
   Konferenzberichten sonst nach zwei Absätzen aus dem Blick. */
.article-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.8rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .article-grid { grid-template-columns: 19rem minmax(0, 1fr); }
  .article-figure { position: sticky; inset-block-start: 6rem; }
}
/* Auf schmalen Geräten das Bild nicht über den halben Bildschirm ziehen. */
@media (max-width: 56rem) {
  .article-figure img { max-height: 15rem; object-fit: cover; }
}

.article-figure { margin: 0; }
.article-figure img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
}

/* Beim Überfahren wächst der ganze Rahmen auf das Doppelte und legt sich
   über den Text — man sieht also mehr vom Bild, nicht weniger.

   Zwischenzeitlich wuchs das Bild stattdessen nach links in den Seitenrand,
   damit der Text frei bleibt. Das sah schlecht aus und ist wieder heraus:
   für ein echtes Doppeltes ist links kein Platz, es blieb ein zaghaftes
   1,3-faches. Der Betreiber hat sich bewusst für die Überdeckung entschieden.

   Ursprung links oben, damit das Bild nach rechts unten aufgeht und nicht
   unter die klebende Kopfzeile rutscht. Nur ab Desktopbreite und nur auf
   Geräten mit echtem Zeigegerät. */
@media (min-width: 56rem) and (hover: hover) {
  /* position: sticky steht schon weiter oben — hier nur das Verhalten. */
  .article-figure {
    z-index: 1;
    transform-origin: left top;
    transition: transform 0.45s cubic-bezier(.2,.7,.3,1),
                filter 0.45s ease;
  }
  .article-figure:hover,
  .article-figure:focus-within {
    transform: scale(2);
    z-index: 20;
    filter: drop-shadow(0 18px 40px rgba(10, 20, 40, 0.35));
  }
}
.article-figure figcaption {
  margin-block-start: 0.6rem;
  font-size: var(--size-tiny);
  color: var(--text-faint);
}

/* Der Text hat schon eine eigene Spalte, das Lesemaß darf hier großzügiger
   ausfallen als im einspaltigen Satz. */
.article-grid .prose { max-width: 44rem; }

/* Wenig Luft nach oben: Titel, Datum und Bild sollen zusammengehören. */
.article-body { padding-block-start: clamp(1rem, 0.7rem + 0.9vw, 1.5rem); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: 1.1em; }
.prose h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
  margin-block-start: 2.2em;
}
.prose h3 { font-size: var(--size-h3); margin-block-start: 1.8em; }
.prose ul, .prose ol { padding-inline-start: 1.3rem; display: grid; gap: 0.4rem; }
.prose li { padding-inline-start: 0.2rem; }
.prose figure { margin: 2rem 0; }
.prose figure img { border-radius: var(--radius); width: 100%; }
.prose figcaption {
  margin-block-start: 0.6rem;
  font-size: var(--size-tiny);
  color: var(--text-faint);
}
.prose dl { display: grid; gap: 0.9rem; }
.prose dt { font-weight: 600; }
.prose dd { margin: 0.2rem 0 0; color: var(--text-muted); }


/* Hervorgehobener Kasten, etwa für den Programmdownload */
.note {
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--s6);
  background-color: var(--bg-subtle);
  font-size: var(--size-small);
}

/* --------------------------------------------------------------------------
   15. Fußzeile
   -------------------------------------------------------------------------- */

/* Eine Zeile, mehr braucht es nicht: Kontakt und Rechtliches nebeneinander.
   Der frühere dreispaltige Block wiederholte nur, was oben schon steht. */
.site-foot {
  border-block-start: 1px solid var(--border);
  padding-block: 2.2rem 2rem;
  font-size: var(--size-small);
  background-color: var(--bg-subtle);
}

.foot-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  margin: 0;
  color: var(--text-muted);
}
.foot-line a { color: var(--text-muted); text-decoration: none; }
.foot-line a:hover { color: var(--text); text-decoration: underline; }
/* Trenner sind Dekoration; im Umbruch stören sie und verschwinden dann. */
.foot-line .sep { color: var(--border-strong); }
@media (max-width: 34rem) {
  .foot-line { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .foot-line .sep { display: none; }
}

/* Der Förderhinweis läuft über die volle Seitenbreite, nicht auf Lesemaß —
   er ist eine Fußnote, kein Fließtext, und soll in eine Zeile passen. Auf
   schmalen Geräten bricht er selbstverständlich um. */
.funding {
  margin-block-start: 1.5rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--border);
  color: var(--text-faint);
  font-size: var(--size-tiny);
  max-width: none;
}

/* --------------------------------------------------------------------------
   16. Auftritt beim Scrollen

   Zurückhaltend: einmal einblenden, dann nie wieder. Kein Mitwandern, kein
   Dauerpulsieren — die Seite soll auch beim zehnten Besuch nicht nerven.
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.75,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay='1'] { transition-delay: 0.08s; }
.reveal[data-delay='2'] { transition-delay: 0.16s; }
.reveal[data-delay='3'] { transition-delay: 0.24s; }

/* --------------------------------------------------------------------------
   17. Hilfsklassen
   -------------------------------------------------------------------------- */

.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;
}

/* --------------------------------------------------------------------------
   18. Reduzierte Bewegung

   Alles abschalten, was sich bewegt — und zwar so, dass der Endzustand
   sichtbar bleibt. Ein !important ist hier richtig: die Animationsregeln
   oben sind spezifischer und würden sonst gewinnen.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Das Kopfskript setzt .intro-run bei reduzierter Bewegung gar nicht erst.
     Diese Regeln sind das Netz darunter, falls jemand die Einstellung erst
     nach dem Laden ändert. */
  .intro-run .logo-mark [data-draw] { stroke-dashoffset: 0 !important; animation: none !important; }
  .intro-run .logo-mark [data-pop]  { opacity: 1 !important; transform: none !important; animation: none !important; }
  .intro-run .logo-mark .hand       { opacity: 1 !important; transform: none !important; animation: none !important; }
  .intro-run .wordmark-word         { clip-path: none !important; animation: none !important; }
  .intro-run .wordmark-rule         { transform: scaleX(1) !important; animation: none !important; }
  .intro-run .wordmark-sub,
  .intro-run .hero-questions span,
  .intro-run .hero-actions          { opacity: 1 !important; transform: none !important; animation: none !important; }

  .article-figure:hover,
  .article-figure:focus-within { transform: none !important; }

  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .area::before { transform: scaleX(1) !important; transition: none !important; }
  .btn:hover { transform: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   19. Druck
   -------------------------------------------------------------------------- */

@media print {
  .site-head, .hero-actions, .skip-link, .icon-btn { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .area, .member, .contact-card { break-inside: avoid; border: 1px solid #bbb; }
  .reveal { opacity: 1 !important; transform: none !important; }
}