/* =============================================================================
 * style.css – RISP Website
 * Imports tokens.css and builds the base layout, typography, and components.
 * ========================================================================== */

/* tokens.css wird in head.php vor style.css geladen (Cache-Busting). */

/* === CSS Reset (minimal) === */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a {
  color: var(--color-link);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

ul,
ol {
  list-style-position: inside;
}

/* Zeilenbreite auf den reinen Textseiten (default, Impressum, Datenschutz).
 *
 * `p` ist global auf --max-width-text begrenzt, Listen waren es nicht — sie
 * liefen bis zur vollen Containerbreite von --max-width. Auf der Datenschutz-
 * seite ergab das Aufzählungspunkte von 200 Zeichen neben Absätzen, die bei
 * rund 75 umbrechen: derselbe Textblock in zwei verschiedenen Satzbreiten.
 *
 * Die Regel steht bewusst NICHT global auf ul/ol. Dort sind Listen vielfach
 * Struktur statt Text — Navigation, Kartenraster, Personen- und Publikations-
 * listen —, und eine Breitengrenze würde deren Layout zerlegen.
 *
 * Nur ul/ol, nicht der ganze Rumpf: dieselbe Grenze auf .text-page__body zu
 * legen würde auch alles künftige Breite mitfassen — Bilder, Tabellen, eine
 * eingebettete Karte. Heute enthält keine der drei Seiten so etwas (die
 * Anfahrtskarte ist bewusst nur ein Link, damit keine fremde Ressource lädt),
 * aber die engere Regel bleibt richtig, wenn sich das ändert. */
.text-page__body ul,
.text-page__body ol {
  max-width: var(--max-width-text);
}

/* === Typography === */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--type-h1);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}

h2 {
  font-size: var(--type-h2);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--type-h3);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-4);
  max-width: var(--max-width-text);
}

/* === Layout === */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  flex: 1;
  padding-block: var(--space-8);
}

/* === Sprunglink (WCAG 2.4.1) ==============================================
   Bewusst NICHT display:none — das nähme ihn auch Screenreadern. Stattdessen
   aus dem Sichtfeld geschoben und bei Tastaturfokus zurückgeholt. Er ist das
   erste Element im Body (siehe snippets/header.php), also der erste Tab-Stopp
   jeder Seite. */

.skip-link {
  position: absolute;
  z-index: 100;
  top: 0;
  left: var(--gutter);
  transform: translateY(-110%);
  padding: var(--space-2) var(--space-4);
  background: var(--indigo);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--type-small);
  text-decoration: none;
  border: 2px solid var(--color-focus);
  border-top: 0;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Sprunglink MITTEN im Dokument (Projekt-Zeitstrahl, snippets/projekt-zeitstrahl.php).
   Die Technik oben taugt hier nicht: translateY(-110%) schiebt den Link aus dem
   Viewport, solange er am Seitenanfang steht — mitten im Dokument landete er
   sichtbar auf dem Abschnitt darüber. Deshalb weggeschnitten statt verschoben
   und bei Fokus zurückgeholt. Kein display:none, sonst wäre er auch für
   Screenreader und die Tab-Reihenfolge weg — genau das soll er ja nicht sein. */

.skip-anchor {
  position: relative;
}

.skip-link--inline {
  top: 0;
  left: 0;
  transform: none;
  border: 2px solid var(--color-focus);
  border-radius: var(--border-radius);
  clip-path: inset(50%);
}

.skip-link--inline:focus {
  transform: none;
  clip-path: none;
}

/* === Masthead (Phase-1, v1b editorial) ====================================
   Two-row layout: full institute name on row 1, navigation on row 2.
   Replaces the previous indigo .site-header band. */

.masthead {
  border-top: 4px solid var(--indigo);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
}

.masthead__row {
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.masthead__row--brand {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-4);
}

.masthead__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--indigo);
  flex: 0 0 auto;
}

.masthead__logo svg {
  width: 3.5rem;
  height: auto;
  display: block;
  fill: var(--indigo);
  transition: opacity var(--dur-quick) var(--ease-quill);
}

.masthead__logo:hover svg,
.masthead__logo:focus-visible svg {
  opacity: 0.7;
}

.masthead__name {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--indigo);
  margin: 0;
  line-height: 1.18;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-width: none;
}

.masthead__name-line {
  font-size: clamp(1.05rem, 1.4vw + 0.4rem, 1.5rem);
  font-style: italic;
}

/* Namenszusatz „an der Universität Duisburg-Essen“ — Teil des offiziellen
   Namens, deshalb in derselben kursiven Serif wie die Namenszeile, nur
   kleiner und zurückgenommen. Bewusst keine Versalien: der Zusatz soll den
   Namen tragen, nicht mit ihm konkurrieren. */
.masthead__name-affil {
  font-size: clamp(0.85rem, 0.5vw + 0.6rem, 1rem);
  font-style: italic;
  color: var(--ink-soft);
}

.masthead__name-suffix {
  /* Sitzt seit 03.08. inline in der Namenszeile statt als eigene versale
     Zeile darunter — gleiche Behandlung wie im Namenszug der Startseite
     (.institute__name-suffix): kleiner und in derselben kursiven Serif,
     also untergeordnet, aber als Teil des Vereinsnamens lesbar. Der Wert
     ist größer als die 0.46em dort, weil die Kopfzeile ohnehin klein
     setzt und das Kürzel sonst unter die Lesbarkeitsgrenze fiele. */
  font-size: 0.66em;
  color: var(--ink-soft);
  /* Hält „(RISP) e.V." als Einheit zusammen; der Umbruch fällt davor. */
  white-space: nowrap;
}

.masthead__row--nav {
  display: flex;
  gap: var(--space-6);
  font-family: var(--sans);
  font-size: var(--type-small);
  font-weight: 500;
  padding-block: var(--space-3);
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}

.masthead__row--nav a {
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur-quick) var(--ease-quill),
              border-color var(--dur-quick) var(--ease-quill);
}

.masthead__row--nav a:hover,
.masthead__row--nav a:focus-visible,
.masthead__row--nav a[aria-current="page"] {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

/* Startseite: die Navigation steht allein im Kopf, ohne Markenzeile darüber.
   Die Trennlinie hätte dort nichts zu trennen — die Leiste sitzt direkt unter
   der blauen Signaturkante. Etwas mehr Polster hält sie davon frei. */
.masthead--home .masthead__row--nav {
  border-top: 0;
  padding-block: var(--space-4) var(--space-3);
}

@media (max-width: 720px) {
  .masthead__row--brand { gap: var(--space-4); padding-block: var(--space-4) var(--space-3); }
  .masthead__logo svg { width: 2.5rem; }
  .masthead__row--nav { gap: var(--space-4); }
}

/* Hamburger-Toggle bleibt unsichtbar / unbenutzt im Editorial-Layout —
   die Navigation rückt schon im Editorial-Stil unter den Titel und
   wickelt dort. Toggle-CSS bleibt aber stehen, falls wir später eine
   Mobile-Drawer-Variante brauchen. */

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

.nav-toggle-label {
  display: none;
}

/* === Colophon / Footer (Phase-1, v1b editorial) =========================== */

.colophon {
  background: var(--paper-warm);
  color: var(--ink);
  padding: var(--space-12) 0 var(--space-6);
  margin-top: var(--space-16);
  border-top: 1px solid var(--indigo-pale);
}

.colophon__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-12);
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  align-items: start;
}

@media (max-width: 760px) {
  .colophon__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .colophon__group a { overflow-wrap: anywhere; }
}

.colophon__brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--indigo);
  letter-spacing: -0.01em;
  margin: 0;
  max-width: none;
}

.colophon__brand-line {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--space-3);
  font-style: normal;
  display: block;
  /* Seit Task 033 ein Link auf die UDE (Mari 10) — Optik der Zeile bleibt,
     nur die Hover-Affordanz kommt dazu (gleiche Geste wie .colophon__group a). */
  width: fit-content;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-quick), color var(--dur-quick);
}

a.colophon__brand-line:hover,
a.colophon__brand-line:focus-visible {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

.colophon__group h3 {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

.colophon__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.colophon__group li {
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--ink);
}

.colophon__group a {
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-quick);
}

.colophon__group a:hover {
  border-bottom-color: var(--indigo);
  color: var(--indigo);
}

.colophon__legal {
  border-top: 1px solid rgba(21, 23, 58, 0.12);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

/* === News Listing === */

.news-list {
  display: grid;
  gap: var(--space-8);
}

.news-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.news-card__image img {
  border-radius: var(--border-radius);
  width: 100%;
  object-fit: cover;
}

.news-card__date {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-faint);
  margin-bottom: var(--space-1);
}

/* (alte .news-card__title-Box-Regeln entfernt — die v1b-Variante weiter
   unten mit animierter Gradient-Unterstreichung ist maßgeblich.) */

.news-card__teaser {
  max-width: var(--max-width-text);
  margin-bottom: var(--space-3);
}

.news-card__link {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
}

/* === Hero ===
   Composition: brand-mark stretched generously across the top, then a
   thin tagline, then the page title. The brand sets a single confident
   mood-note before any reading happens. The mark crops to a max of
   ~440px so it never dominates wide screens, but stays prominent on
   mobile. A light Uni-Hellblau backdrop keeps the multi-tone bildmarke
   readable and grounds it visually. */

/* === Container (v1b editorial) ============================================
   .contain ist die maßgebliche Wide-Wrapper-Klasse aus v1b. .container
   bleibt parallel bestehen, solange Detail-Templates es noch verwenden
   — beide haben dieselbe Breite, nur unterschiedliche Tokens. */

.contain {
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* === Sections (editorial — uniform paper, no per-section backgrounds) === */

.section {
  padding-block: clamp(var(--space-12), 6vw, var(--space-24));
  border-bottom: 1px solid var(--rule);
}

.section:last-of-type {
  border-bottom: none;
}

/* Department-Header: kleine Caps-Marke + Counter, getrennt durch eine
   krättige Hairline. Das ist der Strukturträger des v1b-Layouts. */
.dept {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule-strong);
}

.dept__label {
  /* Auch als <h2> (Heading-Outline) verwendet — Browser-h2-Defaults
     (margin, große font-size, bold, line-height) hier explizit
     neutralisieren, damit span und h2 identisch rendern. */
  margin: 0;
  font-family: var(--sans);
  font-size: var(--type-rubrik);
  font-weight: 600;
  line-height: inherit;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--indigo);
}

/* Inhaltstragende Rubriküberschriften (z. B. „Arbeitsbereich I: Politik,
   Bürger und Verwaltung" auf /forschungsgruppen): lange Titel sind als
   Versal-Eyebrow schwer lesbar (Mari 6, Task 034) — gemischte Schreibung
   im H3-Grad, das Layout der dept-Zeile bleibt unverändert. */
.dept__label--title {
  font-size: var(--type-h3);
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Label + erklärende Beizeile als linke Spalte der dept-Zeile. Der
   Wrapper erbt die Baseline seines ersten Kindes, das Label bleibt also
   mit dem rechten Count auf einer Linie. */
.dept__lede {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.dept__sub {
  margin: 0;
  font-family: var(--sans);
  /* --type-small statt --type-meta (Mari 6, Task 034): die Beizeilen
     tragen teils mehrzeilige Sätze (Arbeitsbereichs-Intros), 0.75rem war
     dafür zu klein. */
  font-size: var(--type-small);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-faint);
  max-width: none;
}

.dept__count {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.dept__count a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* === Namenszug des Instituts (Startseite, Variante B) ====================
   Sichtbare H1 über der Lead-News. Die Obergrenze (4rem) liegt deutlich über
   dem Hero-News-Titel (2.75rem), die Untergrenze (2.1rem) über dessen
   Minimum (1.75rem) — der Name ist damit auf jeder Breite die größte
   Nennung. Der Masthead bleibt unangetastet klein.

   STRAFF GESETZT (Auflage Fredson, 31.07.): Der Namenszug darf die Lead-News
   nicht unter die Bildschirmkante drücken — bei 1440x900 muss ihre Überschrift
   sichtbar bleiben. Die Abstände hier, an .institute__lede und am oberen Rand
   von .hero-news sind deshalb bewusst knapp. Vor dem Aufweiten nachmessen.
   (Der vorgelegte Entwurf nutzte hier --space-10, das es im Token-Satz nicht
   gibt — die Deklaration war ungültig und fiel auf 0 zurück.) */

.institute {
  /* Oben kein eigenes Polster: main bringt bereits --space-8 mit. */
  padding-block: 0 var(--space-6);
}

/* Logo im Titelblock (seit 31.07.). Steht über dem Namenszug, linksbündig
   auf derselben Kante. Rund 90px breit — es soll die Marke setzen, aber die
   Höhe nicht auffressen: die Lead-News muss auf 1440x900 angeschnitten
   sichtbar bleiben. Der Wegfall der Kopfzeile hat rund 70px freigemacht,
   davon gibt das Logo etwa die Hälfte wieder aus. */
.institute__logo {
  display: block;
  width: fit-content;
  margin-bottom: var(--space-3);
  text-decoration: none;
  transition: opacity var(--dur-quick) var(--ease-quill);
}

.institute__logo svg {
  width: clamp(4.5rem, 7vw, 7rem);
  height: auto;
  display: block;
}

.institute__logo:hover,
.institute__logo:focus-visible {
  opacity: 0.7;
}

.institute__name {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  color: var(--indigo);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* LUFT FÜR DEN ZUSATZ (Fredson, 31.07.): Mit --space-1 saß „an der
     Universität Duisburg-Essen“ in den Unterlängen von „Politikberatung“.
     --space-2 löst die Zeile ab, bleibt aber deutlich unter dem Abstand zur
     Haarlinie darunter (--space-3 plus Unterlängenraum) — der Zusatz gehört
     sichtbar zum Namen, nicht zur Kurzbeschreibung. */
  gap: var(--space-2);
  /* BREITE STATT GRÖSSE (Fredson, 31.07.): Der Namenszug lief über drei
     Zeilen und ließ die rechte Seitenhälfte leer stehen. Er nutzt jetzt die
     volle Inhaltsbreite und kommt auf breitem Desktop mit zwei Zeilen aus.
     Die Schriftgröße ist unverändert — sie ist der Kern der Variante. */
  max-width: none;
}

/* Der Namenszug ist seit Task 033 ein Link auf „Über das RISP" (Mari 11).
   Das <a> übernimmt das Spalten-Layout der H1, damit Haupt- und Ortszeile
   wie zuvor untereinander stehen; die Farbe bleibt die des Namenszugs,
   als Hover-Affordanz genügt eine dezente Unterstreichung der Hauptzeile. */
.institute__name a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}

.institute__name a:hover .institute__name-main,
.institute__name a:focus-visible .institute__name-main {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

.institute__name-main {
  font-size: clamp(2.1rem, 4.5vw + 0.5rem, 4rem);
  /* Verteilt die Zeilen gleichmäßig, statt die erste bis zum Anschlag zu
     füllen und ein einzelnes Wort hängen zu lassen. Keine erzwungenen
     Umbrüche: fällt die Eigenschaft aus, bricht der Text ganz normal um. */
  text-wrap: balance;
}

/* Ortszusatz — eigene Zeile unter dem Namen. Erbt Kursive und Serif von
   .institute__name; als Flex-Item von .institute__name ohnehin auf eigener
   Zeile. Seit Variante B (02.08.) steht hier NICHT mehr das Rechtsform-
   Kürzel: das gehört in die Hauptzeile zum Vereinsnamen. */
.institute__name-place {
  font-size: clamp(1rem, 1vw + 0.6rem, 1.5rem);
  color: var(--ink-soft);
}

/* „(RISP) e.V." — Bestandteil des Vereinsnamens, deshalb in der Hauptzeile
   direkt hinter dem Institutsnamen (Variante B, Entscheidung 02.08.). Erbt
   Serif und Kursive vom Namenszug und bleibt damit sichtbar Teil desselben
   Namens; nur der Grad ist zurückgenommen, damit der ausgeschriebene
   Institutsname die größte Nennung der Startseite bleibt. Der Grad ist
   relativ (em) gesetzt, damit er die clamp()-Skalierung der Hauptzeile über
   alle Breiten mitnimmt. */
.institute__name-suffix {
  font-size: 0.46em;
  color: var(--ink-soft);
  /* Hält „(RISP) e.V." als Einheit zusammen — ein Umbruch mitten im Kürzel
     wäre falsch. Der Umbruch fällt dadurch vor das Kürzel. */
  white-space: nowrap;
}

.institute__lede {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: var(--leading-body);
  color: var(--ink);
  max-width: var(--measure-text);
  /* Oben eine Stufe mehr als unten (31.07.): Nachdem der Zusatz „an der
     Universität …“ Luft bekommen hat, saß er gemessen fast mittig zwischen
     Namenszug und Haarlinie. Mit --space-4 über und --space-3 unter der Linie
     ist der Zusatz doppelt so nah am Namen wie an der Linie; die Linie
     schließt damit den Namen ab und eröffnet die Kurzbeschreibung.
     Kostet 4px Höhe — bei 1440x900 nachgemessen, die Überschrift der
     Lead-News bleibt weit im sichtbaren Bereich. */
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}

.institute__lede p {
  margin: 0;
  max-width: none;
}

@media (max-width: 720px) {
  .institute { padding-block: var(--space-8) var(--space-6); }
  .institute__name { max-width: none; }
}

/* === Hero — illustrierte Lead-News (above the fold) ====================== */

.hero-news {
  /* Oben knapp: der Namenszug darüber (Variante B) kostet Höhe, die
     Lead-News muss auf 1440x900 angeschnitten sichtbar bleiben. */
  padding-block: var(--space-4) var(--space-12);
  border-bottom: 1px solid var(--rule);
}

.hero-news__kicker {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--carmine);
  margin: 0 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
}

.hero-news__kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.hero-news__article {
  display: grid;
  grid-template-columns: 7fr 6fr;
  gap: var(--space-12);
  align-items: center;
}

.hero-news__figure {
  margin: 0;
  position: relative;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.hero-news__figure img,
.hero-news__figure svg {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.hero-news__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(to top, rgba(21, 23, 58, 0.75), transparent);
  padding: var(--space-6) var(--space-4) var(--space-3);
}

.hero-news__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero-news__date {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
}

.hero-news__live {
  color: var(--carmine);
  font-size: 0.85em;
  animation: hn-pulse 2.4s ease-in-out infinite;
}

@keyframes hn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-news__live { animation: none; }
}

.hero-news__title {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.3vw + 0.6rem, 2.75rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}

.hero-news__title a {
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(var(--indigo), var(--indigo));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size var(--dur-page) var(--ease-quill),
              color var(--dur-quick);
}

.hero-news__title a:hover,
.hero-news__title a:focus-visible {
  color: var(--indigo);
  background-size: 100% 2px;
}

.hero-news__teaser {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: var(--leading-body);
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}

.hero-news__more {
  margin: var(--space-2) 0 0;
  font-family: var(--sans);
  font-size: var(--type-small);
  max-width: none;
}

.hero-news__more a {
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid var(--indigo);
  padding-bottom: 2px;
  transition: opacity var(--dur-quick);
}

.hero-news__more a:hover { opacity: 0.7; }

@media (max-width: 900px) {
  .hero-news__article { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* === News-Grid (Editorial 2-up oder 3-up) ================================
   Ersetzt .teaser-grid für News-Karten. Die alte .teaser-grid bleibt
   bis Phase 3 für Projekt-Teaser bestehen. */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
}

.news-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.news-grid > .news-card + .news-card {
  border-left: 1px solid var(--rule);
  padding-left: var(--space-8);
  margin-left: calc(-1 * var(--space-4));
}

.news-card__date {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
  display: block;
  max-width: none;
}

.news-card__title {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 500;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.005em;
  color: var(--ink);
}

.news-card__title a {
  text-decoration: none;
  color: var(--ink);
  background-image: linear-gradient(var(--indigo), var(--indigo));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-quick) var(--ease-quill),
              color var(--dur-quick);
}

.news-card__title a:hover,
.news-card__title a:focus-visible {
  color: var(--indigo);
  background-size: 100% 1px;
}

.news-card__teaser {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: var(--leading-body);
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}

.news-card__media {
  display: block;
  align-self: start;
}

.news-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1px;
}

/* Eleganter, leicht gerundeter Karmin-Rahmen beim Auswählen einer Meldung
   (Maus oder Tastatur) — der Fokus-Indikator der Karte. */
.news-card:focus-within {
  outline: 1.5px solid var(--carmine);
  outline-offset: var(--space-3);
  border-radius: 8px;
}

@media (max-width: 900px) {
  .news-grid,
  .news-grid--two {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .news-grid > .news-card + .news-card {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    margin-left: 0;
    padding-top: var(--space-8);
  }
}

/* === Projects (Feature + Side, v1b editorial) ============================ */

.projects-grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: var(--space-12);
  align-items: start;
}

.project-feature {
  border-top: 2px solid var(--indigo);
  padding-top: var(--space-4);
}

/* Großes Feature-Projekt: eleganter, leicht gerundeter Karmin-Rahmen beim
   Auswählen — wie bei den News-Karten. */
.project-feature:focus-within {
  outline: 1.5px solid var(--carmine);
  outline-offset: var(--space-3);
  border-radius: 8px;
}

.project-feature__meta,
.project-side__meta {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.project-feature__meta .live,
.project-side__meta .live {
  color: var(--carmine);
  font-weight: 700;
}

.project-feature__title {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 500;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.project-feature__title a {
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(var(--indigo), var(--indigo));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size var(--dur-page) var(--ease-quill), color var(--dur-quick);
}

.project-feature__title a:hover,
.project-feature__title a:focus-visible {
  color: var(--indigo);
  background-size: 100% 2px;
}

.project-feature__excerpt {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: var(--leading-body);
  color: var(--ink-soft);
  max-width: var(--measure-text);
  margin: 0;
}

.project-feature__funding {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--type-small);
  color: var(--ink-soft);
  max-width: none;
}

.project-feature__funding strong {
  font-weight: 600;
  color: var(--ink);
}

.projects-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.project-side {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4);
}

.project-side__title {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 500;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}

.project-side__title a {
  text-decoration: none;
  color: var(--ink);
  background-image: linear-gradient(var(--indigo), var(--indigo));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-quick) var(--ease-quill), color var(--dur-quick);
}

.project-side__title a:hover,
.project-side__title a:focus-visible {
  color: var(--indigo);
  background-size: 100% 1px;
}

.project-side__funder {
  font-family: var(--sans);
  font-size: var(--type-small);
  color: var(--ink-faint);
  margin: 0;
  max-width: none;
}

@media (max-width: 900px) {
  .projects-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* === Forschungsgruppen — Index =========================================== */

.groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-12);
  border-top: 1px solid var(--rule);
}

.group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-quick) var(--ease-quill),
              color     var(--dur-quick) var(--ease-quill);
}

.group:hover,
.group:focus-visible {
  background: var(--paper-warm);
  color: var(--indigo);
  outline: none;
}

.group__body {
  min-width: 0;
}

/* Die Übersicht /forschungsgruppen setzt drei Zellen nebeneinander:
   Akronym · Titel · Pfeil. Ohne eigene Spaltenvorgabe fiel der Pfeil in
   eine zweite Zeile und der Titel rutschte an den rechten Rand — die
   Zwei-Spalten-Vorgabe von .group ist auf die Startseite gemünzt, deren
   Eintrag nur zwei Zellen hat. */
.group--index {
  grid-template-columns: auto 1fr auto;
}

.group__title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: inherit;
}

/* Statushinweis im Kopf einer ehemaligen Gruppe. Ordnet ein, ohne die
   Seite zu entwerten — sie bleibt vollständig erreichbar. */
.researchgroup-detail__status {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  max-width: var(--measure-text);
  margin: var(--space-3) 0 var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}

/* Zeilenbreite für den redaktionellen Fließtext der Forschungsgruppen.
 *
 * Dieser Block war der einzige Rich-Text-Container ohne eigene Regel. Die
 * Absatzbreite kam deshalb allein aus `p { max-width: … }` im Grundgerüst —
 * `ul` und `ol` haben dort keine, und Listenpunkte liefen entsprechend über
 * die Textspalte hinaus. Auf /forschungsgruppen/abs war der Unterschied
 * augenfällig: Absätze brachen bei rund 1050 px um, die nummerierte Liste
 * lief bis 1740 px.
 *
 * Die Grenze gehört an den CONTAINER, nicht an die Listen: dann gilt sie für
 * jede Auszeichnung, die die Redaktion künftig verwendet — Tabellen,
 * Zitatblöcke, Überschriften — ohne dass jemand die Regel nachpflegen muss.
 * Dasselbe Muster steht bereits bei .news-detail__text und
 * .project-detail__abstract; hier war schlicht die Lücke. */
.researchgroup-detail__description {
  max-width: var(--max-width-text);
}

/* Untertitel: die Funktion, die der Name nicht trägt. Kursiv und in der
   Sekundärfarbe, damit er sich vom Titel absetzt, ohne mit ihm zu konkurrieren. */
.researchgroup-detail__subtitle {
  max-width: var(--max-width-text);
  margin-top: var(--space-2);
  font-style: italic;
  color: var(--ink-faint);
}

/* Ausführliche Darstellung, aufklappbar. Bewusst <details> statt eines
   nachgebauten Aufklappers: Tastaturbedienung, Screenreader-Ansage und das
   Auffinden per Seitensuche des Browsers gibt es dann geschenkt.

   Die Hairline oben ordnet den Block der Seite zu, ohne ihn einzukästeln —
   dieselbe Sprache wie im übrigen Layout. */
.researchgroup-detail__more {
  max-width: var(--max-width-text);
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.researchgroup-detail__more > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--type-meta);
  color: var(--color-link);
}

.researchgroup-detail__more > summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.researchgroup-detail__more-body {
  margin-top: var(--space-4);
}

/* h2 im aufgeklappten Text: die Abschnitte sind Zwischenüberschriften eines
   Fließtextes, keine Seitenabschnitte — deshalb kleiner als ein normales h2. */
.researchgroup-detail__more-body h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

/* Statusvermerk ehemaliger Gruppen — bewusst leise: die Gruppe steht in
   der Übersicht, ist aber nicht mehr aktuell. Kein Karmin, keine Box. */
.group__status {
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.group__status::before {
  content: "· ";
}

/* Der Abschnitt der ehemaligen Gruppen tritt insgesamt zurück. */
.groups--former .group__title {
  color: var(--ink-soft);
}

/* Kürzel nur noch als kleiner, dezenter Marker neben dem Namen. */
.group__short {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--type-meta);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
  white-space: nowrap;
}

/* FG-Leitung als ruhige Sans-Zeile unter dem Gruppentitel. */
.group__lead {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.group__arrow {
  font-family: var(--serif);
  color: var(--ink-faint);
  transition: transform var(--dur-quick) var(--ease-quill),
              color     var(--dur-quick) var(--ease-quill);
}

.group:hover .group__arrow,
.group:focus-visible .group__arrow {
  transform: translateX(0.25rem);
  color: var(--indigo);
}

@media (max-width: 700px) {
  .groups { grid-template-columns: 1fr; }
}

/* === Personen — typografische Liste auf der Frontpage ==================== */

.staff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.staff__group { min-width: 0; }

.staff__heading {
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}

.staff__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.staff__list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}

.staff__list li:last-child { border-bottom: none; }

/* Blocklink: das <a> umfasst Name UND Rolle — dieselbe Geste wie die
   Forschungsgruppen-Kacheln (Mari-Feedback 9, Beschluss 31.08.). Die
   Unterstreichungs-Animation wandert dafür vom <a> auf den Namens-Span. */
.staff__list a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.staff__list a .staff__name {
  background-image: linear-gradient(var(--indigo), var(--indigo));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-quick) var(--ease-quill),
              color var(--dur-quick);
  width: fit-content;
}

.staff__list a:hover .staff__name,
.staff__list a:focus-visible .staff__name {
  color: var(--indigo);
  background-size: 100% 1px;
}

.staff__name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.staff__role {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .staff { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* === Publikationen — Bibliographie ====================================== */

.bib {
  display: grid;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  max-width: var(--measure-narrow);
  margin: 0;
  counter-reset: bib;
}

.bib__entry {
  counter-increment: bib;
  padding-left: 3rem;
  position: relative;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}

.bib__entry:last-child { border-bottom: none; padding-bottom: 0; }

.bib__entry::before {
  content: counter(bib, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}

.bib__authors  { font-weight: 500; color: var(--ink); }
.bib__year     { color: var(--indigo); font-feature-settings: "lnum"; }
.bib__title    { font-style: italic; color: var(--ink); }
.bib__title a  { color: inherit; text-decoration: none;
                 background-image: linear-gradient(var(--indigo), var(--indigo));
                 background-repeat: no-repeat; background-size: 0% 1px;
                 background-position: 0 100%;
                 transition: background-size var(--dur-quick) var(--ease-quill); }
.bib__title a:hover,
.bib__title a:focus-visible { background-size: 100% 1px; color: var(--indigo); }
.bib__source   { color: var(--ink-soft); }

/* Bibliografie nach Jahr + Aktions-Links (Listing /publikationen) */
.bib-year {
  margin-bottom: var(--space-16);
  max-width: var(--measure-narrow);
}

.bib-year__head {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-feature-settings: "lnum";
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--rule-strong);
}

.bib__links {
  display: block;
  margin-top: var(--space-2);
}

.bib__links a {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid var(--indigo-pale);
  transition: border-color var(--dur-quick);
}

.bib__links a:hover { border-bottom-color: var(--indigo); }

/* News-Feed (Listing /news) — einspaltige Hairline-Liste */
.news-feed {
  display: grid;
  gap: 0;
  max-width: var(--measure-narrow);
}

.news-feed > .news-card {
  padding-block: var(--space-8);
  border-top: 1px solid var(--rule);
}

.news-feed > .news-card:first-child {
  border-top: none;
  padding-top: 0;
}

/* dept-Header mit Abstand zur vorigen Gruppe (Listing-Seiten) */
.dept--spaced { margin-top: var(--space-16); }

/* Screenreader-only (visuell verborgen, für Heading-Outline o. ä.) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Bildschirm- bzw. Druckfassung desselben Inhalts. Verwendet für gekürzte
   Kacheltitel: am Bildschirm die knappe Fassung, auf Papier der vollständige
   Titel — ein Tooltip nützt im Ausdruck nichts. Umschaltung im @media-print-
   Block am Ende dieser Datei. */
.print-only {
  display: none;
}

/* === Personen-Grid (Listing-Seite) — editorial Karten =================== */

.persons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-12);
}

.person-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-strong);
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur-quick);
}

.person-card:hover,
.person-card:focus-visible {
  color: var(--indigo);
  outline: none;
}

.person-card__avatar {
  width: 100%;
  aspect-ratio: 1 / 1.15;
  background: var(--paper-warm);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.5rem;
  color: var(--indigo);
}

.person-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.person-card__name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.25;
  font-weight: 500;
  margin: 0;
  color: inherit;
}

.person-card__role {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.35;
  margin: 0;
  max-width: none;
}

@media (max-width: 1100px) { .persons-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .persons-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .persons-grid { grid-template-columns: 1fr; } }

/* === Ehemalige Mitarbeitende — Namensregister ===========================
   Nebenrubrik, kein zweiter Personenblock: keine Avatare, keine Rollen-
   zeile, kleinerer Grad und zurückgenommene Farbe (--ink-soft statt --ink).
   Der mehrspaltige Satz ist hier funktional — rund 45 Namen stehen so auf
   gut zehn Zeilen statt auf einer halben Bildschirmseite und erschlagen
   die Karten darüber nicht. `columns: 4 14rem` regelt die Spaltenzahl
   ohne eigene Media Queries: unter ~60rem Textbreite fällt der Satz von
   selbst auf drei, zwei und schließlich eine Spalte zurück. */

.persons-former {
  columns: 4 14rem;
  column-gap: var(--space-12);
  list-style: none;
  margin: 0;
  padding: 0;
}

.persons-former__item {
  break-inside: avoid;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}

.persons-former__link {
  display: block;
  font-family: var(--serif);
  font-size: var(--type-small);
  line-height: 1.3;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-quill);
}

.persons-former__link:hover {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.persons-former__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  color: var(--indigo);
}

/* === Archive head (Listing-Seiten Hero) ================================== */

.archive-head {
  padding: var(--space-16) 0 var(--space-8);
  border-bottom: 1px solid var(--rule);
}

.archive-head__count {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--type-display);
  color: var(--indigo);
  line-height: 1;
  margin: 0;
  font-feature-settings: "lnum";
  max-width: none;
}

.archive-head__label {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: var(--space-4) 0 var(--space-2);
  max-width: none;
}

.archive-head__title {
  font-family: var(--serif);
  font-size: var(--type-h1);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  max-width: 24ch;
}

.archive-head__title em {
  font-style: italic;
  color: var(--indigo);
}

/* Erklärende Beizeile unter der Archiv-Überschrift. Bewusst ohne
   Versalien und Sperrung, damit sie nicht mit dem Rubriklabel darüber
   konkurriert — sie benennt eine Tatsache, sie ist kein Blickfang. */
.archive-head__subline {
  margin: var(--space-3) 0 0;
  font-family: var(--sans);
  font-size: var(--type-small);
  color: var(--ink-faint);
  max-width: var(--measure-text);
}

.archive-head__intro {
  margin: var(--space-6) 0 0;
  max-width: var(--measure-text);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* === Platzhalter ======================================================== */

.placeholder-hint {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
}

/* === Person Profile === */

.person-profile__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.person-profile__photo {
  flex-shrink: 0;
  width: 12rem;
  /* Seit 05.08. ein <figure>; der Browser-Standard bringt dort einen
     Außenabstand mit, der die Spalte verschieben würde. */
  margin: 0;
}

.person-profile__photo img {
  border-radius: 1px;
  width: 100%;
  height: auto;
}

/* Bildnachweis unter dem Porträt. Gleiche Behandlung wie der Nachweis unter
   Nachrichtenbildern (.news-detail__credit) — er soll lesbar sein, aber dem
   Bild nicht die Aufmerksamkeit nehmen. */
.person-profile__credit {
  margin-top: var(--space-1);
  font-family: var(--sans);
  font-size: var(--type-meta);
  line-height: 1.35;
  color: var(--color-muted, #6b6b6b);
}

.person-profile__info {
  flex: 1;
  min-width: 15rem;
}

.person-profile__role {
  font-size: var(--text-xl);
  color: var(--color-primary-65);
  margin-bottom: var(--space-4);
}

.person-profile__contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
}

.person-profile__contact dt {
  font-weight: 700;
  font-family: var(--font-heading);
}

.person-profile__bio,
.person-profile__research {
  margin-bottom: var(--space-8);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.tag-list li {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--border-radius);
}

.person-profile__back {
  margin-top: var(--space-8);
}

/* === Publications === */

.publications-intro {
  margin-bottom: var(--space-8);
  max-width: var(--max-width-text);
}

.publications-filter {
  margin-bottom: var(--space-8);
  padding: var(--space-4);
  background-color: var(--color-bg-alt, #f5f5f5);
  border-radius: var(--border-radius);
}

.publications-filter form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.publications-filter label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* === News Detail === */

/* Eine gemeinsame Spalte für Datum, Titel, Bild und Text (Mari 1, Task 034):
   vorher liefen Titel und Bild bis zur vollen Containerbreite, der Text
   stoppte bei --measure-text — in der breiten Ansicht standen drei
   verschiedene rechte Kanten untereinander. Die Kappung wirkt nur dort:
   auf schmalen Viewports ist der Container ohnehin schmaler, die mobile
   Ansicht bleibt unverändert. Wirkt die Spalte in der Abnahme zu eng, ist
   --measure-narrow der nächste Kandidat — nur diesen einen Wert ändern. */
.news-detail {
  max-width: var(--measure-text);
}

.news-detail__back {
  display: inline-block;
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.news-detail__date {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-light, #666);
  margin-bottom: var(--space-2);
}

.news-detail__image {
  margin-block: var(--space-6);
}

/* Wie beim Projekt-Kopfbild: nie über die Naturgröße hinaus strecken.
 *
 * Zusätzlich seit 10.08. eine HÖHENGRENZE. Vorher war nur die Breite
 * gedeckelt; ein Hochformat füllte damit die Spaltenbreite und wurde
 * entsprechend hoch — der NachhaltigH2-Newsletter (1200×1696, Verhältnis
 * 0,71) ergab rund 1100 px, also mehr als einen Bildschirm.
 *
 * Der Wert ist so gewählt, dass er QUERFORMATE NICHT ANFASST: ein 4:3-Bild
 * über die volle Inhaltsbreite bleibt darunter. Getroffen werden nur die
 * Formate, die tatsächlich aus dem Rahmen laufen. Deshalb ein fester
 * rem-Wert und kein vh — vh würde auf einem quer gehaltenen Telefon
 * absurd klein und auf einem hohen Bildschirm wirkungslos.
 *
 * `width: auto` ist hier nicht Kosmetik: ohne das würde das Bild bei
 * greifender Höhengrenze verzerrt statt proportional verkleinert. */
.news-detail__image img {
  border-radius: var(--border-radius);
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 38rem;
}

/* Grafiken, die den Eignungstest für Kopfbilder nicht bestehen (Logos,
   zu kleine Motive): klein und in Naturgröße im Textfluss. */
.news-detail__image--small {
  max-width: 20rem;
}

.news-detail__image--small img {
  border-radius: 0;
}

/* Bildnachweis dezent unter dem Bild (Sans-Label-Vokabular). */
.news-detail__credit {
  margin-top: var(--space-2);
  font-family: var(--sans);
  font-size: var(--type-meta);
  color: var(--color-muted, #6b6b6b);
}

.news-detail__text {
  max-width: var(--max-width-text);
  margin-bottom: var(--space-8);
}

/* BLOCKSATZ-EXPERIMENT (Mari 3, Task 034 — Abnahme ausstehend): nur auf
   News-Detailseiten und nur ab breiten Viewports; linksbündig bleibt der
   gewollte Default der Site. Silbentrennung ist Voraussetzung, sonst reißt
   der Blocksatz Löcher in schmale Zeilen — lang="de" steht in head.php.
   Fällt die Abnahme negativ aus: diesen Block ersatzlos löschen. */
@media (min-width: 60rem) {
  .news-detail__text p {
    text-align: justify;
    hyphens: auto;
  }
}

/* Aufzählungen im redaktionellen Fließtext.
   Global steht `list-style-position: inside` (siehe Reset) — das setzt den
   Punkt in den Textfluss, sodass umbrechende Zeilen bündig unter dem Punkt
   beginnen statt unter dem Text. Bei einzeiligen Listen fällt das nicht auf,
   bei den aus REDAXO nachgezogenen Meldungen schon: dort steht der halbe
   Text in Listenpunkten, und die zweite Zeile war vom Folgeabsatz nicht mehr
   zu unterscheiden. In Prosa-Kontexten deshalb hängender Einzug. */
.news-detail__text ul,
.news-detail__text ol,
.person-profile__bio ul,
.person-profile__bio ol {
  list-style-position: outside;
  padding-left: var(--space-5);
  margin-bottom: var(--space-4);
}

.news-detail__text li,
.person-profile__bio li {
  margin-bottom: var(--space-2);
}

.news-detail__related {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border, #e0e0e0);
  font-size: var(--text-sm);
}

.publications-filter select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.publications-filter button {
  padding: var(--space-1) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.publications-filter button:hover {
  background-color: var(--indigo-soft);
}

.publications-filter button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.publications-year-group {
  margin-bottom: var(--space-8);
}

.publications-year-group h2 {
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--space-2);
}

.publications-list {
  list-style: none;
}

.publication-entry {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.publication-entry:last-child {
  border-bottom: none;
}

.publication-citation {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: var(--max-width-text);
}

.publication-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.publication-type {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-secondary);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  border-radius: var(--border-radius);
}

.publication-link {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--color-primary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.publication-link:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.publications-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted, #666);
  font-style: italic;
}

/* Publication detail page */

/* === Breadcrumb Navigation === */

.breadcrumb {
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: var(--space-1);
}

/* Sicherheitsnetz: gekappt wird schon in breadcrumb.php (60 Zeichen), aber
   ein einzelnes überlanges Wort soll die Leiste auf schmalen Schirmen nicht
   horizontal aufreißen. */
.breadcrumb__item {
  min-width: 0;
  overflow-wrap: break-word;
}

.breadcrumb__item:not(:last-child)::after {
  content: '›';
  margin-left: var(--space-1);
  color: var(--color-primary-65);
}

.breadcrumb__item span[aria-current="page"] {
  color: var(--color-text);
  font-weight: 700;
}

.publication-detail header {
  margin-bottom: var(--space-6);
}

.publication-detail h1 {
  margin-top: var(--space-2);
}

/* Publikationstitel sind so lang wie Projekttitel (Pub_title: Median 80
   Zeichen, 224 von 373 über 70, Maximum 271 — gemessen 2026-07-28), also
   dieselbe Abstufung. Modifier kommt aus publication.php. */
.publication-detail__title {
  max-width: var(--measure-narrow);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.publication-detail__title--long {
  font-size: var(--type-h2);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  text-wrap: pretty;
}

.publication-detail__title--xlong {
  font-size: var(--text-xl);
  line-height: var(--leading-body);
  letter-spacing: 0;
  text-wrap: pretty;
}

.publication-authors {
  font-size: var(--text-lg);
  color: var(--color-text-muted, #555);
}

.publication-source {
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
  max-width: var(--max-width-text);
}

.publication-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.publication-link--pdf {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.publication-link--pdf:hover {
  background-color: var(--color-primary-dark, #003a70);
  border-color: var(--color-primary-dark, #003a70);
}

.publication-abstract {
  max-width: var(--max-width-text);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border, #e0e0e0);
}

/* Verweise auf Projekt und beteiligte Personen (Publikations-Detailseite). */

.publication-project,
.publication-persons {
  margin-bottom: var(--space-6);
  max-width: var(--measure-narrow);
}

.publication-project__label,
.publication-persons__label {
  display: block;
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-1);
}

.publication-project a,
.publication-persons a {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid var(--indigo-pale);
}

.publication-project a:hover,
.publication-project a:focus-visible,
.publication-persons a:hover,
.publication-persons a:focus-visible {
  border-bottom-color: var(--indigo);
}

/* Publikationsliste als abgesetzter Block — Rückrichtung der Verknüpfung
   auf Projekt- und Personen-Detailseite (Snippet publikation-liste). */

.project-detail__publications,
.person-profile__publications {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}

.project-detail__publications h2,
.person-profile__publications h2 {
  margin-bottom: var(--space-6);
}

/* === Section "More" Link === */

.section__more {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
}

/* === Person Projects === */

.person-profile__projects {
  margin-bottom: var(--space-8);
}

.person-profile__projects ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* === 404 — Auffangseite ================================================= */
/* Ersetzt die frühere .error-page aus Phase 1 (zentrierte Button-Optik mit
   Alt-Tokens). Linksbündig und typografisch wie die übrigen v1b-Seiten:
   wer hier landet, ist auf der Suche und braucht Orientierung, keine
   Werbefläche. */

.notfound {
  padding-block: var(--space-12) var(--space-8);
  max-width: var(--measure-text);
}

.notfound__code {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--type-display);
  line-height: 1;
  color: var(--indigo);
  margin: 0;
  font-feature-settings: "lnum";
  max-width: none;
}

.notfound__title {
  font-family: var(--serif);
  font-size: var(--type-h1);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--space-3) 0 0;
}

.notfound__title em {
  font-style: italic;
  color: var(--indigo);
}

.notfound__lede {
  margin: var(--space-6) 0 0;
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.notfound__nav {
  margin-top: var(--space-12);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-strong);
}

.notfound__list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

.notfound__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.notfound__link {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  align-self: start;
  transition: color var(--dur-quick) var(--ease-quill),
              border-color var(--dur-quick) var(--ease-quill);
}

.notfound__link:hover,
.notfound__link:focus-visible {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

.notfound__hint {
  font-family: var(--sans);
  font-size: var(--type-small);
  color: var(--ink-faint);
}

.notfound__help,
.notfound__home {
  margin: var(--space-8) 0 0;
  font-family: var(--sans);
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

.notfound__home {
  margin-top: var(--space-6);
}

.notfound__help a,
.notfound__home a {
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* === Responsive: Tablet (768px) === */

@media (min-width: 48rem) {
  .teaser-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer .container {
    grid-template-columns: 1fr 1fr;
  }

  .footer-legal {
    grid-column: 1 / -1;
  }

  .news-card--media {
    grid-template-columns: 1fr minmax(150px, 210px);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: start;
  }
  .news-card--media .news-card__date   { grid-column: 1; grid-row: 1; }
  .news-card--media .news-card__title  { grid-column: 1; grid-row: 2; }
  .news-card--media .news-card__media  { grid-column: 2; grid-row: 1 / span 2; }
  .news-card--media .news-card__teaser { grid-column: 1 / -1; grid-row: 3; margin-top: var(--space-2); }
}

/* === Responsive: Desktop (1024px) === */

@media (min-width: 64rem) {
  .teaser-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero .container {
    flex-direction: row;
    align-items: center;
  }

  .hero__image {
    flex: 0 0 50%;
    max-height: none;
  }

  .hero__content {
    flex: 1;
  }

  .site-footer .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* === Responsive: Mobile (max 767px) === */

@media (max-width: 47.999rem) {
  .nav-toggle-label {
    display: block;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--color-primary);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
  }

  .nav-toggle:checked ~ .main-nav {
    max-height: 30rem;
  }

  .main-nav__list {
    flex-direction: column;
    padding: var(--space-4);
    gap: var(--space-2);
  }

  .main-nav__list a {
    display: block;
    padding: var(--space-2) var(--space-4);
  }

  /* Hamburger animation */
  .nav-toggle:checked + .nav-toggle-label span {
    background-color: transparent;
  }

  .nav-toggle:checked + .nav-toggle-label span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  h1 {
    font-size: var(--text-3xl);
  }

  h2 {
    font-size: var(--text-2xl);
  }
}

/* === Projects === */

.projects-section {
  margin-bottom: var(--space-12);
}

.projects-section h2 {
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--space-2);
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

@media (min-width: 48rem) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Project Card */

.project-card {
  border-top: 1px solid var(--rule-strong);
  transition: border-color var(--dur-quick);
}

.project-card:hover {
  border-top-color: var(--carmine);
}

.project-card__link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

.project-card__image img {
  width: 100%;
  height: auto;
  display: block;
}

.project-card__body {
  padding: var(--space-4);
}

.project-card__title {
  font-size: var(--text-lg);
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

.project-card__funding {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.project-card__duration {
  font-size: var(--text-sm);
  color: var(--color-text);
  opacity: 0.7;
}

/* Project Detail */

.project-detail__header {
  margin-bottom: var(--space-6);
}

.project-detail__meta {
  margin-bottom: var(--space-3);
}

.project-detail__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-detail__status--aktiv {
  color: var(--carmine);
}

.project-detail__status--aktiv::before {
  content: "\25CF";
  font-size: 0.7em;
  line-height: 1;
}

.project-detail__status--abgeschlossen {
  color: var(--ink-faint);
}

/* Überlange Projekttitel typografisch bändigen (Befund 2026-07-28,
   RIRA-Projektseite). Der Titel bleibt vollständig; gedeckelt werden
   Zeilenlänge, Umbruchverhalten und Schriftgrad. Die Stufen kommen als
   Modifier-Klasse aus project.php, weil CSS keine Zeichen zählen kann und
   das Projekt ohne JS und ohne Build-Step arbeitet:
     Grundstufe   ≤  70 Zeichen  → --type-h1
     --long       >  70 Zeichen  → --type-h2
     --xlong      > 120 Zeichen  → --text-xl
   Ausschließlich Tokens aus tokens.css. */
.project-detail__title {
  max-width: var(--measure-narrow);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Ab dieser Länge ist `balance` wirkungslos (Browser balancieren nur wenige
   Zeilen); `pretty` verhindert stattdessen Schusterjungen. */
.project-detail__title--long {
  font-size: var(--type-h2);
  line-height: var(--leading-tight);
  letter-spacing: 0;
  text-wrap: pretty;
}

.project-detail__title--xlong {
  font-size: var(--text-xl);
  line-height: var(--leading-body);
  letter-spacing: 0;
  text-wrap: pretty;
}

.project-detail__short-title {
  display: block;
  font-size: var(--text-lg);
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.project-detail__image {
  margin-bottom: var(--space-6);
}

/* Kopfbild nie über seine Naturgröße hinaus aufblasen: `width: auto`
   lässt das width-Attribut (= Pixelbreite der ausgelieferten Datei)
   gelten, `max-width: 100%` deckelt es auf die Containerbreite.
   Vorher stand hier `width: 100%` — das streckte auch ein 200px-Logo
   auf ~1200px (Befund 2026-07-28, RIRA-Projektseite). */
/* Zusätzlich eine HÖHENGRENZE, gleicher Wert und gleiche Begründung wie bei
   .news-detail__image img (siehe dort): Die Breite war gedeckelt, die Höhe
   nicht — ein Hochformat füllte damit die Spaltenbreite und wurde entsprechend
   hoch. Bei den Meldungen ist das am NachhaltigH2-Bild aufgefallen; hier fiel
   es bisher nur deshalb nicht auf, weil im Bestand kein einziges Projektbild
   liegt. Der Fehler war also latent, nicht abwesend, und hätte beim ersten
   hochformatigen Panel-Upload zugeschlagen. */
.project-detail__image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 38rem;
  border-radius: var(--border-radius);
}

/* Grafiken, die den Eignungstest für Kopfbilder nicht bestehen
   (Förder- und Projektlogos aus der Migration): klein und in
   Naturgröße im Textfluss statt als aufgeblasenes Kopfband. */
.project-detail__image--small {
  max-width: 20rem;
}

.project-detail__image--small img {
  border-radius: 0;
}

.project-detail__abstract {
  max-width: var(--max-width-text);
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.project-detail__facts {
  margin-bottom: var(--space-8);
  max-width: var(--measure-narrow);
  border-top: 1px solid var(--rule-strong);
}

.project-detail__fact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.project-detail__fact:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.project-detail__fact:first-child {
  padding-top: 0;
}

.project-detail__fact dt {
  font-weight: 700;
  font-family: var(--font-heading);
  min-width: 12rem;
  color: var(--color-heading);
}

.project-detail__fact dd {
  flex: 1;
  min-width: 0;
}

.project-detail__team-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.project-detail__back {
  margin-top: var(--space-6);
}

.project-detail__back a {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
}

/* === Focus States for Interactive Cards === */

.person-card:focus-visible,
.project-card:focus-within,
.teaser-card:focus-within {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.project-card__link:focus-visible,
.teaser-card a:focus-visible {
  outline: none;
}

/* (Fokus der News-Karte: gerundeter Karmin-Rahmen via .news-card:focus-within
   weiter oben — kein separater Link-Outline mehr.) */

.about-subpages a:focus-visible,
.notfound__link:focus-visible,
.notfound__help a:focus-visible,
.notfound__home a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.publications-filter select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.publication-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* === Writer Output (Kirby blocks / rich text) === */

main blockquote {
  border-left: 4px solid var(--color-primary);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-bg-alt);
  font-style: italic;
  max-width: var(--max-width-text);
}

main blockquote p {
  margin-bottom: var(--space-2);
}

main blockquote p:last-child {
  margin-bottom: 0;
}

main table {
  width: 100%;
  max-width: var(--max-width-text);
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}

main th,
main td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: left;
}

main th {
  background-color: var(--color-bg-alt);
  font-family: var(--font-heading);
  font-weight: 700;
}

main tr:nth-child(even) {
  background-color: var(--color-secondary-45);
}

main pre {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--border-radius);
  overflow-x: auto;
  margin-bottom: var(--space-4);
  max-width: var(--max-width-text);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

main code {
  font-size: 0.9em;
  background-color: var(--color-bg-alt);
  padding: 0.15em 0.35em;
  border-radius: var(--border-radius);
}

main pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

main hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-8);
}

/* === Wide Viewport (1440px) === */

@media (min-width: 90rem) {
  .container {
    padding-inline: var(--space-8);
  }
}

/* === Print Styles === */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  .site-header,
  .site-footer,
  .nav-toggle-label,
  .main-nav,
  .breadcrumb,
  .section__more,
  .person-profile__back,
  .project-detail__back,
  .news-detail__back,
  .publications-filter {
    display: none !important;
  }

  main {
    padding-block: 0;
  }

  a {
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }

  .person-card,
  .project-card,
  .teaser-card,
  .news-card {
    break-inside: avoid;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
  }

  img {
    max-width: 100% !important;
  }

  .persons-grid,
  .project-grid,
  .teaser-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gekürzte Kacheltitel werden auf Papier vollständig gesetzt: eine
     ausgedruckte Projekt- oder Publikationsliste ist bei einem Institut
     kein Randfall, und der Tooltip mit dem vollen Titel fehlt dort. */
  .screen-only {
    display: none;
  }

  .print-only {
    display: inline;
  }

  /* Kacheltitel im Druck an die Grundschrift binden: --type-h2 und --text-xl
     rechnen mit vw bzw. rem und lösen auf Papier (1vw ≈ 8px bei A4) zu rund
     18pt auf, während der Fließtext bei 12pt steht. Das ist für eine Liste
     zu laut. */
  .project-card__title,
  .teaser-card__title,
  .news-card__title,
  .project-feature__title,
  .project-side__title {
    font-size: 13pt !important;
    line-height: 1.3;
  }
}

/* === Über uns =============================================================
   Editoriale Instituts-Rubrik. Struktur ausschließlich über Hairlines und
   Weißraum (keine Boxen/Schatten/Radien). Karmin erscheint genau einmal:
   am Live-Marker der laufenden Projekte (.about-figure--live). */

/* Kennzahlen-Reihe — große Serif-Ziffern über kleiner Sans-Caps-Marke,
   jeweils von einer Hairline getragen. */
.about-figures {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-8) var(--space-6);
}

.about-figure {
  display: flex;
  flex-direction: column-reverse; /* Ziffer optisch oben, Marke darunter */
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

.about-figure__value {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--type-display);
  line-height: 1;
  color: var(--indigo);
  font-feature-settings: "lnum";
}

.about-figure__value a {
  color: inherit;
  text-decoration: none;
}

.about-figure__value a:hover,
.about-figure__value a:focus-visible {
  color: var(--indigo-soft);
}

/* Der eine erlaubte Akzent: laufende Projekte = „lebt gerade". */
.about-figure--live .about-figure__value { color: var(--carmine); }
.about-figure--live .about-figure__value a:hover,
.about-figure--live .about-figure__value a:focus-visible { color: var(--carmine-soft); }

.about-figure__label {
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Vorstand — ruhige typografische Liste, keine Karten. Geschäftsführender
   Vorstand und Beisitz stehen als getrennte Gruppen nebeneinander, weil das
   vereinsrechtlich zwei verschiedene Rollen sind. */
.about-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-8) var(--space-16);
  max-width: var(--measure-wide);
}

.about-board__group-label {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.about-board__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-board__item + .about-board__item {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

.about-board__name {
  display: block;
  font-family: var(--sans);
  font-size: var(--type-h3);
  font-weight: 600;
  color: var(--indigo);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-quill);
}

.about-board__name:hover,
.about-board__name:focus-visible {
  color: var(--indigo-soft);
}

.about-board__name:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.about-board__role {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--serif);
  color: var(--ink-soft);
  line-height: var(--leading-body);
}

/* Lesesektionen — schmales Lesemaß für editoriale Ruhe. */
.about-prose {
  max-width: var(--measure-narrow);
}

.about-section + .about-section {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--rule);
}

.about-section__title {
  font-family: var(--sans);
  font-size: var(--type-h2);
  font-weight: 600;
  color: var(--indigo);
  margin: 0 0 var(--space-4);
}

.about-orgchart {
  margin: var(--space-6) 0 0;
}

.about-orgchart img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

/* Querverweise — Hairline-Liste mit live abgeleiteten Stückzahlen. */
.about-links {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure-narrow);
}

.about-links__item {
  border-top: 1px solid var(--rule);
}

.about-links__item:last-child {
  border-bottom: 1px solid var(--rule);
}

.about-link {
  display: block;
  padding: var(--space-6) 0;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur-quick) var(--ease-quill);
}

.about-link__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.about-link__title {
  font-family: var(--sans);
  font-size: var(--type-h3);
  font-weight: 600;
  color: var(--indigo);
}

.about-link__count {
  font-family: var(--sans);
  font-size: var(--type-meta);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-left: auto;
  font-feature-settings: "lnum";
}

.about-link__desc {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--serif);
  color: var(--ink-soft);
  line-height: var(--leading-body);
}

.about-link:hover .about-link__title,
.about-link:focus-visible .about-link__title {
  color: var(--indigo-soft);
}

.about-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Weitere Seiten zum Institut (z. B. Anfahrt) — schlichte Textlinks. */
.about-subpages {
  margin-top: var(--space-8);
}

.about-subpages ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.about-subpages a {
  font-family: var(--sans);
  font-size: var(--type-small);
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}

.about-subpages a:hover {
  color: var(--indigo-soft);
  border-bottom-color: var(--indigo);
}

/* ── Arbeitsbereiche ──────────────────────────────────────────────────────
   Gliederungsebene über den Forschungsgruppen. Auf /ueber-das-risp als
   Textliste (so wie in der Vorlage von Lange), auf /forschungsgruppen als
   Überschrift über den Gruppenkacheln. Bewusst ruhig gehalten: die
   Arbeitsbereiche ordnen, sie konkurrieren nicht mit den Gruppen um
   Aufmerksamkeit. */
.workareas {
  display: grid;
  gap: var(--space-8);
  max-width: var(--measure-wide);
}

.workarea + .workarea {
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}

.workarea__title {
  margin: 0 0 var(--space-3);
  font-family: var(--sans);
  font-size: var(--type-h3);
  font-weight: 600;
  color: var(--indigo);
}

/* „Arbeitsbereich II" steht als Kenner über der Bezeichnung, nicht in
   derselben Zeile — die Ziffer ist Ordnung, kein Name. */
.workarea__numeral {
  display: block;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.workarea__intro {
  margin: 0 0 var(--space-4);
  max-width: var(--measure-narrow);
  font-family: var(--serif);
  color: var(--ink-soft);
  line-height: var(--leading-body);
}

.workarea__groups {
  list-style: none;
  margin: 0;
  padding: 0;
}

.workarea__group + .workarea__group {
  margin-top: var(--space-2);
}

.workarea__group a {
  font-family: var(--sans);
  font-size: var(--type-small);
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}

.workarea__group a:hover,
.workarea__group a:focus-visible {
  color: var(--indigo-soft);
  border-bottom-color: var(--indigo);
}

.workarea__status {
  margin-left: var(--space-2);
  font-family: var(--sans);
  font-size: var(--type-meta);
  color: var(--ink-faint);
}

/* Direktorium — dieselbe Liste wie der Vorstand, aber einspaltig: es ist
   ein Gremium, keine zwei getrennten Rollen. */
.about-directorate {
  max-width: var(--measure-narrow);
}

/* Ehemalige Gruppen, nach dem Arbeitsbereich gruppiert, dem sie zu ihrer
   Zeit angehörten. */
.groups-former-area + .groups-former-area {
  margin-top: var(--space-8);
}

.groups-former-area__title {
  margin: 0 0 var(--space-3);
  font-family: var(--sans);
  /* --type-small statt --type-meta (Mari 6, Task 034): der Kicker trägt
     den vollen früheren Arbeitsbereichstitel. */
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Leitung unter der Gruppe — nachgeordnete Information, deshalb eigene
   Zeile in der Grundschrift und nicht verlinkt: der Link der Zeile führt
   zur Gruppe, ein zweiter zur Person würde das Ziel unklar machen. */
.workarea__lead {
  display: block;
  margin-top: 2px;
  font-family: var(--serif);
  font-size: var(--type-small);
  color: var(--ink-soft);
}

/* === Lageplan (Anfahrtsseite) ===
   Selbst gehostetes Kartenbild statt des früheren OpenStreetMap-iframes.
   Die Breite ist bewusst schmaler als der Container: bei voller Containerbreite
   würde das 1000-px-Bild hochskaliert und die Beschriftungen würden unscharf. */
.lageplan {
  max-width: var(--measure-narrow);
  margin: 0 0 var(--space-4);
}

.lageplan img {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

/* Der Lizenzhinweis ist Pflicht (ODbL), aber keine Aussage über das RISP —
   deshalb klein und zurückgenommen, wie die übrigen Bildunterschriften. */
.lageplan figcaption {
  margin-top: var(--space-2);
  font-family: var(--sans);
  font-size: var(--type-meta);
  color: var(--ink-soft);
}