/* ==========================================================================
   Deutsch-Amerikanische Gesellschaft Münster e.V.
   Gestaltungssystem: „Transatlantisches Briefpapier"
   Tinte (Logo-Navy) auf warmem Papier, eine Goldlinie als Akzent.
   Keine externen Anfragen: Schriften und Grafiken liegen lokal.
   ========================================================================== */

/* ---- Schriften (lokal, SIL Open Font License) --------------------------- */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2-variations");
  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: "Source Serif 4";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
  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: "Source Serif 4";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url("../fonts/source-serif-4-latin-wght-italic.woff2") format("woff2-variations");
  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;
}

/* ---- Grundwerte ---------------------------------------------------------- */

:root {
  /* Farben */
  --navy: #012957;            /* Tinte: das Logo-Navy */
  --navy-deep: #001d40;       /* dunkle Fläche, Hover */
  --ink: #22314e;             /* Fließtext */
  --muted: #55617a;           /* Nebentext */
  --paper: #f6f2ea;           /* Briefpapier */
  --card: #fcf9f3;            /* aufliegende Fläche */
  --line: rgba(1, 41, 87, 0.16);      /* Haarlinie */
  --line-soft: rgba(1, 41, 87, 0.1);
  --gold: #c29a3f;            /* Goldlinie, nur Zierde */
  --gold-text: #7a5d1e;       /* Gold für Text und Links (AA-sicher) */
  --gold-on-navy: #cfa64e;    /* Gold auf dunkler Fläche */
  --paper-on-navy: #f6f2ea;

  /* Schriftrollen */
  --font-display: "Jost", "Avenir Next", "Century Gothic", "Futura", sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Schriftgrößen (fluid) */
  --fs-xs: 0.8125rem;
  --fs-s: 0.9375rem;
  --fs-0: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-1: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  --fs-2: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem);
  --fs-3: clamp(2.4rem, 1.7rem + 3.2vw, 3.7rem);

  /* Raum */
  --section: clamp(3.25rem, 5.6vw, 5rem);
}

/* ---- Reset & Basis -------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.7;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Papierkorn: ein Hauch Struktur über allem, rein dekorativ */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.6em;
}

h1 {
  font-size: var(--fs-3);
  font-weight: 600;
  overflow-wrap: break-word;
  hyphens: auto;
}

h2 {
  font-size: var(--fs-2);
  font-weight: 600;
  overflow-wrap: break-word;
  hyphens: auto;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

p {
  margin: 0 0 1em;
  max-inline-size: 65ch;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.2em;
  max-inline-size: 62ch;
}

li {
  margin-bottom: 0.35em;
}

a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--gold-text);
  text-decoration-color: currentColor;
}

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

::selection {
  background: var(--navy);
  color: var(--paper);
}

address {
  font-style: normal;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

.container {
  width: min(100% - 2.75rem, 68rem);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.75rem;
  z-index: 100;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-s);
  padding: 0.6em 1.1em;
  text-decoration: none;
}

.skip-link:focus-visible {
  left: 0.75rem;
}

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

/* ---- Kopfzeile ------------------------------------------------------------ */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 242, 234, 0.92);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line-soft);
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}

.brand img {
  height: 1.9rem;
  width: auto;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--navy);
  border-left: 1px solid var(--line);
  padding-left: 0.9rem;
}

/* Der Zwischenraum war auf vier Punkte gerechnet. Mit sechsen und dem
   ausgeschriebenen Vereinsname daneben braucht die waagerechte Zeile 1072 px,
   der Satzspiegel gibt aber nur 68 rem her (nachgerechnet mit den Jost-Metriken,
   siehe Kommentar bei .brand-name). Der obere Deckel geht deshalb von 1,9 auf
   1,5 rem zurück, der Rest der Skala bleibt. */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
}

.site-nav a {
  text-decoration: none;
  color: var(--navy);
}

.site-nav a:hover {
  color: var(--gold-text);
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.lang {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-left: 1px solid var(--line);
  padding-left: clamp(0.8rem, 2vw, 1.4rem);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.lang a {
  color: var(--muted);
}

.lang .lang-active {
  color: var(--navy);
  font-weight: 600;
}

/* Die beiden Flaggen stecken als Zeichnung direkt hier drin (data-URI): keine
   zusätzliche Anfrage an den Server, und das Bild wächst mit der Schriftgröße
   mit. Beide liegen im selben Rechteck 3:2 und bekommen die Navy-Haarlinie,
   sonst schwämmen die weißen Streifen der US-Flagge im warmen Papier aus.
   Fünfzig Sterne sind bei 16 Pixeln nicht darstellbar; gezeichnet ist deshalb
   ein angedeutetes Sternenfeld aus sechs Punkten, ebenso sieben statt dreizehn
   Streifen. Die Flaggen sind reine Zierde — welche Sprache gemeint ist, steht
   als Wort daneben, und ::before bleibt für Screenreader unsichtbar. */

.lang > * {
  display: flex;
  align-items: center;
  gap: 0.42em;
}

.lang > *::before {
  content: "";
  flex: none;
  width: 1.2em;
  height: 0.8em;
  border-radius: 1px;
  background-size: 100% 100%;
  box-shadow: 0 0 0 1px var(--line);
}

.lang .lang-de::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23ffce00'/><rect width='30' height='13.34' fill='%23dd0000'/><rect width='30' height='6.67' fill='%23000000'/></svg>");
}

.lang .lang-en::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='20' fill='%23ffffff'/><g fill='%23b22234'><rect width='30' height='2.86'/><rect y='5.71' width='30' height='2.86'/><rect y='11.43' width='30' height='2.86'/><rect y='17.14' width='30' height='2.86'/></g><rect width='12' height='11.43' fill='%233c3b6e'/><g fill='%23ffffff'><circle cx='2.6' cy='3.7' r='1.2'/><circle cx='6' cy='3.7' r='1.2'/><circle cx='9.4' cy='3.7' r='1.2'/><circle cx='2.6' cy='7.75' r='1.2'/><circle cx='6' cy='7.75' r='1.2'/><circle cx='9.4' cy='7.75' r='1.2'/></g></svg>");
}

/* Die gerade nicht gewählte Sprache steht ohnehin blasser da; ihre Flagge zieht
   mit, damit die Kopfzeile nicht zwei gleich laute Farbflecken bekommt. */
.lang a::before {
  opacity: 0.72;
  transition: opacity 0.15s ease;
}

.lang a:hover::before,
.lang a:focus-visible::before {
  opacity: 1;
}

/* ---- Klappmenü --------------------------------------------------------------
   Seit die Navigation sechs Punkte hat, passt sie erst oberhalb von 1100 px in
   eine Zeile. Der Knopf steht im HTML als `hidden` und wird erst von
   assets/js/nav.js freigeschaltet, das dabei auch `.has-toggle` setzt. Ohne
   JavaScript bleibt also alles beim Alten: Die Navigation ist sichtbar und
   bricht um, statt hinter einem toten Knopf zu verschwinden.
   ------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.55rem 0.2rem;
  border: 0;
  background: none;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* Drei Striche, gezeichnet aus einem Element plus seinen beiden Pseudoelementen. */
.nav-toggle-striche,
.nav-toggle-striche::before,
.nav-toggle-striche::after {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: currentColor;
}

.nav-toggle-striche {
  position: relative;
}

.nav-toggle-striche::before,
.nav-toggle-striche::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-striche::before {
  top: -0.35rem;
}

.nav-toggle-striche::after {
  top: 0.35rem;
}

@media (max-width: 1100px) {
  .site-head.has-toggle .nav-toggle:not([hidden]) {
    display: inline-flex;
  }

  .site-head.has-toggle .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.4rem clamp(1.375rem, 5vw, 2rem) 1.1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 24px -18px rgba(1, 41, 87, 0.5);
  }

  .site-head.has-toggle .nav-toggle[aria-expanded="true"] + .site-nav {
    display: flex;
  }

  .site-head.has-toggle .site-nav > a {
    width: 100%;
    padding-block: 0.75rem;
    border-top: 1px solid var(--line-soft);
  }

  /* Die Sprachumschaltung ist kein Menüpunkt, sondern eine Einstellung. Sie
     rückt deshalb ab und verliert die senkrechte Trennlinie. */
  .site-head.has-toggle .lang {
    width: 100%;
    margin-top: 0.9rem;
    padding-left: 0;
    padding-top: 0.9rem;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ---- Zwischentitel („Eyebrow": kleine Übersetzungszeile) ------------------ */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1rem;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--gold);
  vertical-align: 0.28em;
  margin-right: 0.7rem;
}

.eyebrow .echo {
  color: rgba(85, 97, 122, 0.62);
}

/* ---- Rubrik: der Abschnittsbalken --------------------------------------------
   Jeder Abschnitt beginnt mit seinem Namen in beiden Sprachen, dazwischen eine
   Linie über die volle Satzbreite. Damit steht keine Überschrift mehr frei im
   Raum, und die Zweisprachigkeit wird zur Struktur statt zur Beigabe.
   Es ist dieselbe Figur wie „Münster — Fresno" und wie die Frist im Navy-Band:
   zwei Punkte, eine Linie. Gold markiert überall auf dieser Seite genau das,
   eine Verbindung. Gewöhnliche Trennung bleibt Navy.
   ------------------------------------------------------------------------- */

.rubrik {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.5rem);
  margin: 0 0 clamp(1.6rem, 3.2vw, 2.5rem);
  max-inline-size: none;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--navy);
}

/* Das Zeichen vor dem Rubriknamen (bisher nur auf „Aktivitäten“). Es ist in
   derselben Hand gezeichnet wie die drei Zeichen auf der Startseite: 24er
   Raster, Strichstärke 1.6, keine Fläche. Navy, nicht Gold: Es benennt einen
   Abschnitt, es verbindet nichts. */
.rubrik-marke {
  flex: none;
  display: inline-flex;
  color: var(--navy);
}

.rubrik-marke svg {
  display: block;
}

.rubrik-line {
  flex: 1 1 3rem;
  min-width: 1.5rem;
  height: 1px;
  background: rgba(194, 154, 63, 0.5);
  transform-origin: left center;
}

.rubrik-en {
  flex: none;
  font-weight: 400;
  color: var(--muted);
}

/* Auf der dunklen Fläche kehrt sich das Verhältnis um. */
.band .rubrik {
  color: var(--paper-on-navy);
}

.band .rubrik-line {
  background: rgba(207, 166, 78, 0.5);
}

.band .rubrik-en {
  color: rgba(246, 242, 234, 0.6);
}

/* Nebeneinander brauchen beide Sprachen rund 24 rem. Darunter fällt die Linie
   weg und die zweite Sprache rückt unter die erste. */
@media (max-width: 700px) {
  .rubrik {
    display: block;
    letter-spacing: 0.13em;
  }

  .rubrik-line {
    display: none;
  }

  .rubrik-en {
    display: block;
    margin-top: 0.35rem;
  }

  /* Im Blockfluss steht das Zeichen über dem Namen statt daneben. */
  .rubrik-marke {
    display: block;
    margin-bottom: 0.6rem;
  }
}

/* ---- Knöpfe & Links -------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 1em 1.75em;
  background: var(--navy);
  color: var(--paper);
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
}

.btn:hover {
  background: var(--navy-deep);
  color: var(--paper);
  transform: translateY(-1px);
}

.btn:active {
  transform: none;
}

/* Umgekehrter Knopf für dunkle Flächen. Der zweite Selektor sticht `.band a`,
   das sonst die Schriftfarbe auf Papierweiß zöge. */
.btn--paper,
.band .btn--paper {
  background: var(--paper);
  color: var(--navy);
}

.btn--paper:hover,
.band .btn--paper:hover {
  background: #fff;
  color: var(--navy);
}

/* Wartestand: Der Knopf sagt, dass es etwas geben wird, aber noch nicht.
   Fehlen soll die Handlungsaufforderung, nicht die Lesbarkeit — die Schrift
   bleibt deshalb voll gedeckt (12,8:1 auf Navy), gedämpft ist nur die Fläche.
   Kontur in Papierton, nicht in Gold: Gold markiert auf diesen Seiten
   ausschließlich Verbindungen, gewöhnliche Umrandung bleibt farblos. */
.btn--wartet {
  background: transparent;
  color: var(--paper-on-navy);
  box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.38);
  cursor: default;
  /* Die Beschriftung ist ein Satz, kein Verb, und damit länger als jede andere
     auf der Seite: Ab etwa 320px Bildschirmbreite bricht sie um. Das geerbte
     `line-height: 1` stimmt für eine Zeile und ließe zwei aufeinanderkleben,
     `balance` teilt sie hälftig statt „… ab" / „1. August". */
  line-height: 1.35;
  text-wrap: balance;
}

/* `.btn:hover` sticht die Grundregel und färbte den Wartestand sonst navy ein
   und höbe ihn an: Genau die Rückmeldung, die er nicht geben darf. */
.btn--wartet:hover {
  background: transparent;
  color: var(--paper-on-navy);
  transform: none;
}

.text-link {
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
}

.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem 1.8rem;
  margin-top: 2rem;
}

/* ---- Held (nur Startseite) ------------------------------------------------- */

.hero {
  /* Knapp gehalten, damit der Horizont beim Laden im Vollbild schon anliegt. */
  padding-top: clamp(2rem, 4vw, 3.25rem);
}

.hero h1 {
  max-width: 22ch;
  margin-bottom: 0.5em;
}

.hero .lede {
  font-size: var(--fs-1);
  line-height: 1.55;
  max-inline-size: 44ch;
  color: var(--ink);
}

/* Flache Fenster (Laptops, Telefone quer): Der Einstieg rückt zusammen, damit
   der Horizont an der Falte schon anschneidet. Sonst endet der erste Blick auf
   leerem Papier, und die Signatur der Seite taucht erst beim Scrollen auf. */
@media (max-height: 800px) {
  .hero {
    padding-top: clamp(1rem, 2vw, 1.75rem);
  }

  .hero .cta-row {
    margin-top: 1.4rem;
  }

  .horizon {
    margin-top: clamp(1rem, 2vw, 1.75rem);
  }
}

/* ---- Der Horizont (Signatur) -------------------------------------------------
   Eine einzige Archivzeichnung, aus vier überlappenden Ausschnitten
   rekonstruiert: Golden Gate, Rocky Mountains, Skyline, Atlantik, Münster.
   Beim Scrollen wandert der Blick an ihr entlang – von Amerika nach Münster.
   Das Blatt liegt per multiply auf dem Briefpapier, ohne Freistellkante.
   ------------------------------------------------------------------------- */

.horizon {
  /* Höhe aus der Fensterbreite abgeleitet, damit immer ~30rem Fahrstrecke
     übrig bleiben. Nach oben gedeckelt: die Vorlage ist 998 px breit, mehr
     als gut zweifache Vergrößerung verträgt die Feder nicht. */
  --horizon-h: clamp(10rem, calc((100vw + 30rem) / 6.1605), 21rem);
  --horizon-w: calc(var(--horizon-h) * 6.1605);   /* Seitenverhältnis 998 : 162 */
  --horizon-travel: max(0px, calc(var(--horizon-w) - 100vw));
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  padding-bottom: 2.75rem;
}

.horizon-window {
  height: var(--horizon-h);
  overflow: hidden;
  /* Papier ausdrücklich hier: die Einblendung erzeugt kurzzeitig einen eigenen
     Stapelkontext, multiply braucht dann einen Untergrund im Element selbst –
     sonst kippt der Ton am Ende der Animation sichtbar um. */
  background: var(--paper);
}

.horizon-track {
  display: block;
  width: var(--horizon-w);
  max-width: none;
  margin-inline: auto;   /* zentriert, falls das Blatt schmaler als der Schirm ist */
  height: var(--horizon-h);
  mix-blend-mode: multiply;
  transform: translate3d(calc(var(--horizon-progress, 0) * var(--horizon-travel) * -1), 0, 0);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

@keyframes horizon-travel {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--horizon-travel) * -1), 0, 0); }
}

/* Scrollgebundene Fahrt, wo der Browser sie nativ kann – sonst springt das
   Bild wegen fehlender Dauer sofort ans Ende, darum das @supports-Gitter. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .horizon-track {
      animation: horizon-travel linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
      will-change: transform;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .horizon-track {
    transform: translate3d(calc(var(--horizon-travel) / -2), 0, 0);
  }
}

.horizon-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.horizon-dist {
  color: var(--gold-text);
}

@media (max-width: 540px) {
  .horizon-labels {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }

  .horizon-dist {
    order: 3;
    width: 100%;
    text-align: center;
    margin-top: 0.15rem;
  }
}

/* ---- Tafeln: die Zeichnungen aus dem Archiv ----------------------------------
   Ein Muster für alle Seiten. Die Scans sind auf reines Weiß normalisiert,
   multiply löst das Papier auf, es bleibt nur die Zeichnung.
   ------------------------------------------------------------------------- */

.plate {
  margin: clamp(2.25rem, 5vw, 3.5rem) 0;
}

.plate:first-child {
  margin-top: 0;
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.plate-caption {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.plate--narrow {
  max-width: 30rem;
}

.plate--portrait {
  max-width: 13rem;
}

/* ---- Abschnitte ------------------------------------------------------------- */

.section {
  padding-block: var(--section);
}

.section + .section {
  border-top: 1px solid var(--line);
}

/* Wer mit einer Rubrik anfängt, trennt sich selbst: Die volle Trennlinie darüber
   wäre eine zweite Waagerechte auf engem Raum. */
.section:has(.rubrik) {
  border-top: 0;
}

/* Auf Unterseiten trennt eine Haarlinie im Container, nicht volle Breite */
.section-rule {
  border-top: 1px solid var(--line);
}

.page-head {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page-head .lede,
.auftakt-kopf .lede {
  font-size: var(--fs-1);
  line-height: 1.55;
  max-inline-size: 52ch;
}

/* ---- Fotoleiste im Seitenkopf (Stipendium) -----------------------------------
   Drei Fotos aus dem Austauschjahr als Auftakt, im Quelltext Teil des
   Seitenkopfs, damit die Abstandsregel `.page-head + .section` weiter greift.
   Es sind Fotos, keine Aquarelle: gerahmt wie die Abzüge auf „Wussten Sie
   schon", ohne `mix-blend-mode`. Kein Gold, das bleibt den Verbindungen
   vorbehalten. Die Unterschrift trägt `.plate-caption` aus dem Tafel-Muster. */

.fotoleiste {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.fotoleiste-reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
}

/* `aspect-ratio` misst bei `border-box` den Rahmen mit; die Fotos selbst sind
   exakt 3:2 (1200x800), `cover` gleicht den kleinen Rest unsichtbar aus. */
.fotoleiste-reihe img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  padding: 0.5rem;
  border: 1px solid var(--line);
  background: var(--card);
}

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

/* ---- Der Auftakt von „Über uns" -----------------------------------------------
   Seitenkopf und Leitsatz sind ein Bild, nicht zwei gestapelte Blöcke. Die
   Zeichnung steht in der rechten Spalte über beide Zeilen und füllt damit die
   Fläche neben dem Leitsatz, die sonst leer bliebe. Unten schließt eine
   Goldlinie als gemeinsame Grundlinie ab: Die Figur steht darauf, der Leitsatz
   sitzt mit seiner letzten Zeile darauf.
   ------------------------------------------------------------------------- */

.auftakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.4vw, 2rem);
  padding-bottom: 0;
  position: relative;
}

/* Die Grundlinie steckt in einem eigenen Element statt in `border-bottom`,
   damit sie sich beim Laden ziehen lässt. */
.auftakt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform-origin: left center;
}

/* Die Rubrik liegt über beiden Spalten und gibt dem Auftakt eine Oberkante,
   so wie die Goldlinie ihm eine Grundlinie gibt. */
.auftakt-rubrik {
  grid-column: 1 / -1;
  grid-row: 1;
}

.auftakt-kopf {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

/* Der Seitentitel benennt nur, was hier steht. Die Aussage der Seite ist der
   Leitsatz, also führt er auch typografisch. Vorher waren beide fast gleich
   groß und stritten sich um den Vortritt. */
.auftakt-kopf h1 {
  font-size: clamp(2.05rem, 1.5rem + 2.1vw, 2.95rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}

.auftakt-satz {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  margin: clamp(1.75rem, 4.5vw, 3.25rem) 0 0;
  font-family: var(--font-body);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.5rem);
  font-weight: 380;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--navy);
  max-inline-size: 22ch;
  text-wrap: balance;
}

.auftakt-figur {
  /* Die Figur ist absichtlich höher als der Text daneben. Damit bestimmt sie die
     Höhe des Auftakts: Der Kopftext hängt oben, der Leitsatz sitzt unten, und die
     Zeichnung reicht von der Überschrift bis zur Grundlinie. Der Deckel gegen die
     Fensterhöhe hält beides zusammen über der Falte. Die Höhe steht als eigene
     Variable, weil die Randausgleiche unten mit ihr rechnen. */
  --figur-hoehe: min(clamp(15rem, 40vw, 40rem), 76vh);
  --figur-hoehe: min(clamp(15rem, 40vw, 40rem), 76svh);
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: end;
  margin: 0;
  /* Der Scan bringt unten 3,4 % und rechts 17 % Weißrand mit. Ohne Ausgleich
     schwebt die Figur über der Grundlinie und klebt zu weit von der Kante weg. */
  margin-bottom: calc(var(--figur-hoehe) * -0.034);
  margin-right: calc(var(--figur-hoehe) * -0.05);
}

.auftakt-figur img {
  display: block;
  width: auto;
  height: var(--figur-hoehe);
  mix-blend-mode: multiply;
}

@media (max-width: 720px) {
  /* Auf schmalen Geräten trägt die Figur den Leitsatz nicht mehr mit. Sie stand
     bisher neben dem Kopftext und drückte die Lede auf 26 Zeichen zusammen. Jetzt
     rückt sie unter den Leitsatz, rechtsbündig, und steht dort auf der Goldlinie:
     Beide Texte bekommen die volle Breite, die Figur behält ihren Boden. */
  .auftakt {
    grid-template-columns: minmax(0, 1fr);
  }

  .auftakt-kopf,
  .auftakt-satz {
    grid-column: 1;
  }

  .auftakt-satz {
    max-inline-size: 24ch;
  }

  .auftakt-figur {
    --figur-hoehe: clamp(9rem, 34vw, 13rem);
    grid-column: 1;
    grid-row: 4;
    justify-self: end;
    margin-top: clamp(0.75rem, 2.5vw, 1.5rem);
  }
}

.page-head + .section {
  padding-top: clamp(1rem, 2.5vw, 2rem);
}

/* Schließt der Seitenkopf mit einer Tafel, trägt sein eigener Innenabstand den
   Rest. Der Rand der Tafel käme sonst obendrauf. */
.page-head > .plate:last-child {
  margin-bottom: 0;
}

/* Dieselbe Verengung wie nach dem Seitenkopf: Die Sprungleiste steht zwischen
   beiden und würde die Regel darüber sonst außer Kraft setzen. */
.toc-leiste + .section {
  padding-top: clamp(1.6rem, 3vw, 2.6rem);
}

.lede {
  text-wrap: pretty;
}

/* Seiteninterne Sprungliste (Über uns) */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  padding: 1rem 0 0;
}

.toc a {
  text-decoration: none;
  color: var(--navy);
}

.toc a::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  margin-right: 0.55em;
  vertical-align: 0.1em;
}

.toc a:hover {
  color: var(--gold-text);
}

section[id],
h2[id] {
  scroll-margin-top: 5.5rem;
}

/* ---- Klebende Sprungliste („Aktivitäten") -------------------------------------
   Die Seite hat sieben gleich gebaute Rubriken und ist zu lang, um die Liste
   nur oben stehen zu lassen. Sie bleibt deshalb beim Blättern unter der
   Kopfzeile hängen.

   `position: sticky` braucht dafür einen festen Abstand nach oben, und die
   Kopfzeile hat genau zwei bekannte Höhen: 4.01 rem, solange die Navigation in
   einer Zeile steht, und 4.54 rem, sobald `nav.js` sie unterhalb von 1100 px
   zum Klappmenü macht und `.has-toggle` setzt. Ohne Skript bricht die
   Navigation dort um und wird beliebig hoch. In diesem einen Fall klebt hier
   nichts, sonst schöbe sich die Leiste hinter die Kopfzeile. Sie steht dann
   einfach da, wo sie im Fluss steht.

   Der Stapelwert bleibt weit unter den 50 der Kopfzeile: Das aufgeklappte
   Menü hängt an ihr und muss über der Leiste liegen.
   ---------------------------------------------------------------------------- */

.toc-leiste {
  position: sticky;
  top: 4.01rem;
  z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.toc-leiste .toc {
  padding-block: 0.8rem;
}

/* Der Sprung muss unter Kopfzeile und Leiste landen, und zwar mit der Rubrik,
   nicht mit der Oberkante des Abschnitts. Dazwischen liegt dessen eigener
   Innenabstand, deshalb wird er hier abgezogen: 4.01 rem Kopfzeile plus
   3.26 rem Leiste plus etwas Luft, minus `--section`. */
.mit-sprungleiste section[id] {
  scroll-margin-top: max(0px, calc(8.5rem - var(--section)));
}

@media (max-width: 1100px) {
  .toc-leiste {
    position: static;
  }

  .site-head.has-toggle ~ main .toc-leiste {
    position: sticky;
    top: 4.54rem;
  }

  /* Eine Zeile statt dreien: Umgebrochen fräße die Liste auf dem Telefon ein
     Drittel des Bildschirms. Sie schiebt sich stattdessen seitlich. */
  .toc-leiste .toc {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .toc-leiste .toc a {
    white-space: nowrap;
  }

  .mit-sprungleiste section[id] {
    scroll-margin-top: max(0px, calc(9.1rem - var(--section)));
  }
}

/* ---- Register: Reihen mit Haarlinien ----------------------------------------- */

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

.register > div {
  padding: 0.4rem 2.4rem 0.4rem 0;
}

.register > div + div {
  border-left: 1px solid var(--line);
  padding-left: 2.4rem;
}

.register .icon {
  margin-bottom: 1.1rem;
  color: var(--navy);
}

.register p {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 0;
}

@media (max-width: 780px) {
  .register {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .register > div {
    padding: 0;
  }

  .register > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 1.6rem;
  }
}

/* Zweispaltige Registerzeilen (Werte, Vorhaben auf „Über uns") */
.rows {
  margin-top: 1.5rem;
}

.row {
  display: grid;
  grid-template-columns: minmax(13rem, 17rem) 1fr;
  gap: 0.4rem 3rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--line);
}

.row:last-child {
  border-bottom: 1px solid var(--line);
}

.row h3 {
  margin: 0;
}

.row p {
  margin: 0;
}

.row .tag {
  margin-top: 0.55rem;
}

@media (max-width: 680px) {
  .row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* ---- Aktivitäten: Einleitung und aufgeklapptes Beispiel -----------------------
   Jede der sieben Rubriken besteht aus einem Absatz und, bis auf das Stipendium,
   einem Beispiel aus dem Archiv. Diese Beispiele sind lang, und untereinander
   ergaben sie eine Textwand. Sie stecken deshalb in `details`-Elementen: Das
   Auf- und Zuklappen erledigt der Browser, JavaScript ist nicht beteiligt, und
   ohne Skript steht der Text genauso zur Verfügung. Dieselbe Bauart wie die
   Fragenliste auf „Wussten Sie schon“, bis hin zum Plus und Minus rechts.
   ---------------------------------------------------------------------------- */

/* Etwas schmaler als die 65 Zeichen der Grundregel: Der Absatz ist der einzige
   dauerhaft sichtbare Fließtext der Rubrik und darf ruhig kurze Zeilen haben. */
.rubrik-text {
  max-inline-size: 60ch;
  margin-bottom: 0;
}

.beispiel {
  margin-top: clamp(1.6rem, 3.4vw, 2.6rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.beispiel > summary {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2.4vw, 1.6rem);
  padding: 1rem 0;
  list-style: none;
  cursor: pointer;
  text-wrap: pretty;
}

.beispiel > summary::-webkit-details-marker {
  display: none;
}

/* „Ein Beispiel“ ist eine Gliederungsangabe und kein Titel. Es behält deshalb
   genau die Auszeichnung, die es als `.row-art` hatte. */
.beispiel-marke {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Drei der sechs Beispiele haben im Altbestand keinen Titel. Dort steht in der
   Zeile nur die Marke, und die Regel darunter greift ins Leere. */
.beispiel-titel {
  font-family: var(--font-display);
  font-size: var(--fs-0);
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy);
}

.beispiel > summary::after {
  content: "+";
  flex: none;
  margin-left: auto;
  align-self: center;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
}

.beispiel[open] > summary::after {
  content: "\2212";
}

.beispiel > summary:hover .beispiel-marke,
.beispiel > summary:hover .beispiel-titel,
.beispiel > summary:hover::after {
  color: var(--navy-deep);
}

.beispiel > summary:focus-visible {
  outline-offset: 2px;
}

.beispiel-text {
  padding-bottom: 1.7rem;
  max-inline-size: 68ch;
}

/* Der Absatz hat sein Maß schon vom Kasten; die Grundregel mit 65 Zeichen würde
   hier ein zweites, engeres Maß darüberlegen. */
.beispiel-text p {
  margin: 0 0 1em;
  max-inline-size: none;
}

.beispiel-text p:last-child {
  margin-bottom: 0;
}

/* Marke und Titel nebeneinander brauchen rund 30 rem. Darunter teilen sie sich
   auf zwei Zeilen: oben die Marke und rechts daneben das Zeichen, darunter der
   Titel über die volle Breite. Im Flusslayout wäre das Zeichen auf eine dritte,
   sonst leere Zeile gerutscht, deshalb hier ein Raster. Rubriken ohne Titel
   legen die zweite Reihe gar nicht erst an. */
@media (max-width: 620px) {
  .beispiel > summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem 1rem;
  }

  .beispiel-marke {
    grid-column: 1;
    grid-row: 1;
  }

  .beispiel > summary::after {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
  }

  .beispiel-titel {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ---- „Über uns": ein Bild im Kopf, danach nur noch Schrift ---------------------
   Die Seite hat außer der Zeichnung im Seitenkopf kein Bildmaterial. Rhythmus
   entsteht deshalb aus drei Mitteln: einem sehr großen Satz, einem Gegenzug im
   Raster und der einen dunklen Fläche. Siehe konzept-ueber-uns.md.
   ------------------------------------------------------------------------- */

/* Die Überzeugungen. Die Trennlinien sind Navy: Sie teilen nur, sie verbinden
   nichts. Gold steht in diesem Abschnitt allein im englischen Zwilling, und der
   ist tatsächlich eine Verbindung. */
/* Keine eigene Oberkante: Die Rubrikzeile darüber ist bereits eine Waagerechte.
   Zwei Linien im Abstand von 50 px lesen sich als Versehen. */
.creed {
  border-top: 0;
}

.creed-item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 3.9vw, 3.25rem);
  border-bottom: 1px solid var(--line);
}

/* Der Gegenzug: beim mittleren Block tauschen Titel und Text die Seite. Das
   ersetzt die abwechselnd links und rechts gesetzten Bilder. */
.creed-item:nth-child(2) .creed-title {
  order: 2;
  text-align: right;
}

.creed-title h3 {
  font-size: var(--fs-2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
}

/* Der zweisprachige Zwilling: jede Überzeugung steht doppelt, weil der Verein
   aus zwei Sprachen besteht. Auf den englischen Seiten dreht sich das um. */
.creed-title .twin {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-s);
  letter-spacing: 0.015em;
  color: var(--gold-text);
}

.creed-body p {
  margin: 0;
  max-inline-size: 46ch;
}

.creed-body p + p {
  margin-top: 0.75em;
}

@media (max-width: 720px) {
  .creed-item {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  /* Auf einer Spalte gibt es keinen Gegenzug mehr, der Titel führt wieder. */
  .creed-item:nth-child(2) .creed-title {
    order: 0;
    text-align: left;
  }
}

/* Münster und Fresno: die Brücke, gezeichnet mit einem Strich. */
.orte {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 2.25rem);
  max-inline-size: none;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.orte-name {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 0.85rem + 2.6vw, 2.9rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}

/* Auf der Linie reitet die Entfernung. Die Startseite beziffert im Horizont die
   Strecke bis zur nächsten US-Küste, hier steht die Strecke bis zur Partnerstadt.
   Dieselbe Sprache, eine andere Zahl. */
.orte-spanne {
  flex: 1 1 auto;
  min-width: 3rem;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.5vw, 1.1rem);
}

.orte-line {
  flex: 1 1 auto;
  min-width: 1rem;
  height: 1px;
  background: var(--gold);
}

.orte-dist {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-text);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .orte {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }

  .orte-spanne {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-left: 0.2rem;
  }

  .orte-line {
    flex: none;
    width: 1px;
    min-width: 0;
    height: 1.5rem;
  }
}

/* Zwei Textspalten statt einer langen Spalte mit leerer Hälfte daneben. */
.spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3.5vw, 3.5rem);
}

/* Die Spalte gibt hier das Maß vor, nicht `max-inline-size`. Ein zusätzlicher
   Deckel ließe den Text schmaler laufen als seine Spalte und risse in jede
   Hälfte noch einmal ein Loch. */
.spalten p {
  margin: 0;
  max-inline-size: none;
}

/* Bisher stand in jeder Spalte genau ein Absatz. Sobald es zwei sind, brauchen
   sie einen Abstand, sonst laufen sie zu einem Block zusammen. */
.spalten p + p {
  margin-top: 1em;
}

/* Unter 900 px messen zwei Spalten nur noch rund 38 Zeichen. Das liest sich als
   Zeitungsspalte, aber nicht mehr als Fließtext, also fallen sie zusammen. */
@media (max-width: 900px) {
  .spalten {
    grid-template-columns: 1fr;
    gap: 1em;
  }

  .spalten p {
    max-inline-size: 65ch;
  }
}

/* Das Siegel von CYE auf der Stipendienseite. Es läuft als Float neben der
   Vorstellung der Austauschorganisation mit, wie auf einem Briefkopf. Die
   Spalte ist ein Grid-Item und schließt den Float damit von selbst ein. */
.cye-siegel {
  float: right;
  width: 6rem;
  height: auto;
  margin: 0.2rem 0 0.75rem 1.1rem;
}

/* Große E-Mail-Zeile auf der Kontaktseite */
.email-hero {
  margin: 1.5rem 0 0.5rem;
  max-inline-size: none;
}

.email-hero a {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 0.28em;
  overflow-wrap: anywhere;
}

.email-hero a:hover {
  color: var(--gold-text);
}

/* ---- „Amerika in Münster": das Register ----------------------------------------
   Die Seite hat kein Bild. Ihren Rhythmus macht das Registerbauteil `.rows` von
   der Kontaktseite: links der Name, rechts der Satz, dazwischen nichts. Die
   Haarlinien sind Navy, denn sie trennen nur. Gold bleibt den Verbindungen
   vorbehalten (siehe Rubrik oben).
   ------------------------------------------------------------------------- */

.row-name h3 {
  margin: 0;
}

/* Die Gattung unter dem Namen: sagt in zwei Wörtern, worum es geht, damit die
   linke Spalte allein schon scannbar ist. */
.row-art {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.row .row-text p + p {
  margin-top: 0.7em;
}

/* Die Quelle steht am Fuß des Eintrags, klein und ohne Schmuck. Sie ist der
   einzige Weg nach draußen und soll den Satz darüber nicht überstimmen. */
.row-quelle {
  margin-top: 0.75em;
  font-family: var(--font-display);
  font-size: var(--fs-s);
}

.row-quelle a {
  text-decoration-thickness: 1px;
}

.row-quelle a::after {
  content: " \2197";
  text-decoration: none;
  color: var(--gold-text);
}

/* Kopf einer Rubrik: ein Satz, der die Rubrik einordnet, bevor die Liste kommt. */
.rubrik-satz {
  margin: -0.6rem 0 1.9rem;
  max-inline-size: 60ch;
  color: var(--muted);
}

/* Der Rückweg am Fuß der langen Registerseite: ein Wort, rechtsbündig, im
   Satzspiegel. Ein schwebender Knopf vertrüge sich nicht mit dem Briefpapier.
   Der Pfeil steht im Jost-Subset (U+2191 ist in der unicode-range benannt). */
.nach-oben {
  display: flex;
  justify-content: flex-end;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  max-inline-size: none;
}

/* ---- Der Anriss auf der Startseite ---------------------------------------------
   Fünf Namen als Beleg dafür, dass die Übersicht etwas enthält. Bewusst ohne
   Links: Wer weiterlesen will, geht auf die Seite, nicht direkt nach draußen.
   ------------------------------------------------------------------------- */

.anriss {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
}

.anriss li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--navy);
}

.anriss li:last-child {
  border-bottom: 1px solid var(--line);
}

.anriss .anriss-art {
  flex: none;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

@media (max-width: 420px) {
  .anriss li {
    display: block;
  }

  .anriss .anriss-art {
    display: block;
    margin-top: 0.2rem;
    text-align: left;
  }
}

/* ---- Kleinteile --------------------------------------------------------------- */

.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  border: 1px solid rgba(194, 154, 63, 0.55);
  border-radius: 2px;
  padding: 0.35em 0.7em;
}

.note {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  padding: 1.5rem 1.75rem;
  margin-top: 2.25rem;
  max-inline-size: 62ch;
}

.note p {
  margin-bottom: 0;
}

.note p + p {
  margin-top: 0.6em;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
}

.badges li {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.5em 0.9em;
  margin: 0;
}

.small {
  font-size: var(--fs-s);
  color: var(--muted);
}

/* Sichtbar markierte Platzhalter, bis die echten Angaben vorliegen */
.todo {
  background: rgba(194, 154, 63, 0.22);
  color: var(--ink);
  padding: 0.05em 0.3em;
  border-radius: 2px;
}

/* ---- Dunkles Band (Stipendium) ------------------------------------------------- */

.band {
  background: var(--navy);
  color: var(--paper-on-navy);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.band .eyebrow {
  color: var(--gold-on-navy);
}

.band .eyebrow::before {
  background: var(--gold-on-navy);
}

/* Das Echo steht sonst in Schiefergrau, gedacht für helles Papier; auf Navy
   verschwände es. Papierton bei 0,6 statt 0,5 wie bei der Frist: halb gedeckt
   stünde die Zeile bei 4,2:1 und fiele unter AA, so steht sie bei 5,5:1. */
.band .eyebrow .echo {
  color: rgba(246, 242, 234, 0.6);
}

.band p {
  color: rgba(246, 242, 234, 0.85);
}

.band a {
  color: var(--paper-on-navy);
  text-decoration-color: var(--gold-on-navy);
}

.band a:hover {
  color: var(--gold-on-navy);
}

/* Überschriften stehen sonst in Navy und wären auf der dunklen Fläche unsichtbar.
   Im Band stehen die News-Überschriften der Startseite und die Zeitraum-Überschrift
   auf „Stipendium“. Das schmale Maß und `pretty` statt des geerbten `balance` halten
   sie kurz und lassen die letzte Zeile nicht als einzelnes Wort stehen. */
.band h2 {
  color: var(--paper-on-navy);
  max-inline-size: 22ch;
  text-wrap: pretty;
  /* Die Silbentrennung hängt am Basis-`h2`; sie rettet lange Komposita auf
     schmalen Geräten. Hier gibt es keine, dafür trennte sie „be-zahlt". */
  hyphens: manual;
}

/* Zwei Spalten im Band: links die Sache, rechts die Frist und der Knopf. Vorher
   stand alles links und die halbe dunkle Fläche blieb leer. */
.band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

.band-haupt > :last-child {
  margin-bottom: 0;
}

/* Die Frist ist die einzige Zahl der Seite, also bekommt sie eine eigene Spalte.
   Zwei Daten, dazwischen ein Goldstrich: dieselbe Figur wie Münster — Fresno,
   nur senkrecht und klein. */
.frist {
  border-top: 1px solid rgba(207, 166, 78, 0.5);
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
}

.frist-label,
.band .frist-label {
  margin: 0 0 1.1rem;
  max-inline-size: none;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gold-on-navy);
}

/* 0,6 statt 0,5: Bei halber Deckung steht die Zeile auf Navy nur bei 4,2:1 und
   fällt damit unter AA. Nachgerechnet, nicht geschätzt. */
.frist-label .echo {
  display: block;
  margin-top: 0.25rem;
  color: rgba(246, 242, 234, 0.6);
}

.frist-spanne,
.band .frist-spanne {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  margin: 0 0 clamp(1.6rem, 3vw, 2.25rem);
  max-inline-size: none;
  color: var(--paper-on-navy);
}

.frist-datum {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.2;
}

.frist-strich {
  width: 1px;
  height: clamp(1.25rem, 2.5vw, 1.9rem);
  background: var(--gold-on-navy);
  margin-left: 0.4rem;
}

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

  .frist {
    max-inline-size: 20rem;
  }
}

/* Wer den Austausch durchführt, steht unter der Frist und hinter derselben
   Goldlinie: erst die Sache und das Datum, dann der Partner. Das Siegel links,
   damit die Textkante mit nichts anderem konkurriert. */
.partner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.25rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.6rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(207, 166, 78, 0.5);
}

/* Der Außenring des Siegels steht in #36479e und käme auf dem Navy auf 1,8:1;
   die runde Kante ginge damit verloren. Die Papierscheibe darunter gibt sie
   zurück, und das Siegel liegt auf Papier wie auf dem Briefbogen. */
.partner-siegel {
  width: clamp(4.75rem, 8vw, 6.25rem);
  aspect-ratio: 1;
  padding: 0.45rem;
  border-radius: 50%;
  background: var(--paper-on-navy);
}

.partner-siegel img {
  display: block;
  width: 100%;
  height: auto;
}

.partner h3 {
  margin: 0 0 0.7rem;
  color: var(--paper-on-navy);
  max-inline-size: 34ch;
}

.partner-text > :last-child {
  margin-bottom: 0;
}

/* Auf schmalen Geräten rutscht das Siegel über den Text, sonst bliebe für ihn
   eine Spalte von knapp zwei Dritteln der Breite. */
@media (max-width: 560px) {
  .partner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ---- Einladung ------------------------------------------------------------------ */

/* Breit genug für eine Zeile: Die Überschrift steckt damit die linke Spalte ab,
   statt schmal darin zu stehen und rechts von ihr ein Loch zu lassen. */
.invite h2 {
  max-width: 30ch;
  hyphens: manual;
}

.invite .lede {
  font-size: var(--fs-1);
  max-inline-size: 44ch;
}

/* Rechts steht das Register bündig an der Containerkante, also genau unter dem
   rechten Ende der Rubrikzeile. Beide Kanten fluchten. */
.invite-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

.invite-grid .cta-row {
  margin-bottom: 0;
}

/* Die drei Merkmale als kleine Hairline-Tabelle. Sie sollen belegen, nicht
   werben, also stehen sie ruhig rechts und nicht quer unter dem Aufruf. */
.siegel {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: none;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--muted);
}

.siegel li {
  margin: 0;
  padding-block: 0.75rem;
  border-top: 1px solid var(--line);
}

.siegel li:last-child {
  border-bottom: 1px solid var(--line);
}

.invite-neben .small {
  margin: 1.1rem 0 0;
}

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

  .siegel {
    max-inline-size: 22rem;
  }
}

/* ---- Fußzeile ------------------------------------------------------------------- */

.site-foot {
  background: var(--navy);
  color: var(--paper-on-navy);
  padding-block: clamp(2.75rem, 5vw, 4rem) 1.75rem;
  font-size: var(--fs-s);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(246, 242, 234, 0.18);
}

.foot-grid img {
  height: 1.6rem;
  width: auto;
  margin-bottom: 0.9rem;
}

.site-foot h2 {
  color: var(--paper-on-navy);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.site-foot p {
  color: rgba(246, 242, 234, 0.8);
  margin-bottom: 0;
  max-inline-size: 34ch;
}

.site-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-foot li {
  margin-bottom: 0.45em;
}

.site-foot a {
  color: var(--paper-on-navy);
  text-decoration-color: rgba(246, 242, 234, 0.35);
}

.site-foot a:hover {
  color: var(--gold-on-navy);
  text-decoration-color: currentColor;
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.5rem;
  font-size: 0.8rem;
  color: rgba(246, 242, 234, 0.62);
}

.foot-legal p {
  color: inherit;
  margin: 0;
  max-inline-size: none;
}

@media (max-width: 780px) {
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ---- Fließtextseiten (Impressum, Datenschutz) ------------------------------------ */

.prose {
  max-inline-size: 65ch;
}

.prose h2 {
  font-size: 1.2rem;
  margin: 2.4em 0 0.5em;
}

.prose ul {
  list-style: none;
  padding-left: 1.1em;
}

.prose ul li::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  margin-right: 0.6em;
  margin-left: -1.1em;
  vertical-align: 0.08em;
}

/* Linkliste mit Goldpunkten (auch außerhalb von .prose) */
.dotlist {
  list-style: none;
  padding-left: 1.1em;
}

.dotlist li::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  margin-right: 0.6em;
  margin-left: -1.1em;
  vertical-align: 0.08em;
}

/* ---- Auftrittsfolge beim Laden ------------------------------------------------------ */

/* „Über uns" bekommt dieselbe Folge wie die Startseite, damit beide Seiten sich
   beim Öffnen gleich anfühlen. Die Goldlinien werden gezogen statt eingeblendet:
   Die Seite baut ihre Verbindungen vor den Augen des Lesers auf. */
@media (prefers-reduced-motion: no-preference) {
  .auftakt-rubrik,
  .auftakt-kopf h1,
  .auftakt-kopf .lede,
  .auftakt-satz {
    animation: rise 0.7s cubic-bezier(0.22, 0.7, 0.25, 1) both;
  }

  .auftakt-kopf h1 {
    animation-delay: 0.07s;
  }

  .auftakt-kopf .lede {
    animation-delay: 0.15s;
  }

  .auftakt-satz {
    animation-delay: 0.26s;
  }

  /* Die Figur wird nicht eingeblendet. Jede Animation auf ihr oder ihrem
     Elternteil erzeugt einen Stapelkontext, und dann blendet `multiply` gegen
     diesen Kontext statt gegen das Papier: Die Zeichnung säße in einem weißen
     Kasten. Sie steht also von Anfang an da, die Worte kommen zu ihr. */

  .auftakt-rubrik .rubrik-line {
    animation: linie 0.8s cubic-bezier(0.3, 0.7, 0.3, 1) 0.2s both;
  }

  .auftakt::after {
    animation: linie 1s cubic-bezier(0.3, 0.7, 0.3, 1) 0.5s both;
  }
}

@keyframes linie {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* Die Brücke Münster — Fresno zeichnet sich beim Heranscrollen als ein Strich,
   von links nach rechts. Wo der Browser scrollgebundene Animationen nicht kann,
   steht sie einfach fertig da. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .orte-spanne .orte-line,
    .orte-dist {
      animation: linie linear both;
      animation-timeline: view();
      transform-origin: left center;
    }

    .orte-spanne .orte-line:first-child {
      animation-range: entry 35% entry 85%;
    }

    .orte-dist {
      animation-name: appear;
      animation-range: entry 70% entry 95%;
    }

    .orte-spanne .orte-line:last-child {
      animation-range: entry 80% cover 12%;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow,
  .hero h1,
  .hero .lede,
  .hero .cta-row {
    animation: rise 0.7s cubic-bezier(0.22, 0.7, 0.25, 1) both;
  }

  .hero h1 {
    animation-delay: 0.08s;
  }

  .hero .lede {
    animation-delay: 0.16s;
  }

  .hero .cta-row {
    animation-delay: 0.26s;
  }

  /* Knapper als die Textfolge darüber: Bis der Horizont da ist, sieht die
     Fläche unter dem Einstieg leer aus — je kürzer dieser Moment, desto
     weniger wirkt er wie ein Ladefehler. */
  .horizon-window {
    animation: appear 0.8s ease 0.2s both;
  }

  .horizon-labels {
    animation: appear 0.7s ease 0.6s both;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---- Kleine Bildschirme -------------------------------------------------------------- */

/* Der ausgeschriebene Vereinsname weicht dem sechsten Navigationspunkt. Mit den
   echten Jost-Metriken nachgerechnet: Logo, Name, Abstand und die waagerechte
   Navigation messen zusammen 1072 px, der Satzspiegel hört bei 68 rem (1088 px)
   auf. Es bleiben 16 px Luft, und die gibt es erst, wenn der Name überhaupt
   stehen darf. Unterhalb von 1100 px übernimmt ohnehin das Klappmenü; dass der
   Name dort mitginge, ist der Preis für eine Zeile, die nirgends überläuft. */
@media (max-width: 1200px) {
  .brand-name {
    display: none;
  }
}

/* Fallback ohne JavaScript: Die Zeile darf umbrechen, statt überzulaufen. */
@media (max-width: 1100px) {
  .head-row {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }

  .site-nav {
    gap: 0.9rem;
  }
}

@media (max-width: 380px) {
  .site-nav {
    gap: 0.8rem;
  }

  .lang {
    padding-left: 0.8rem;
  }
}

/* ---- Druck ----------------------------------------------------------------------------- */

@media print {
  body::before {
    display: none;
  }

  .site-head,
  .site-foot,
  .skip-link,
  .cta-row,
  .toc {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  h1,
  h2,
  h3 {
    color: #000;
  }

  a {
    color: #000;
    text-decoration: none;
  }
}

/* ---- Aktuelles: die News-Galerie auf der Startseite ------------------------------------
   Ohne JavaScript stehen die Einträge untereinander, getrennt von einer Haarlinie.
   Sobald assets/js/news.js läuft, setzt es `.news-rotator`: Dann liegen alle Einträge
   im selben Rasterfeld übereinander und nur der aktive blendet ein.
   Die Galerie steht im dunklen Band, deshalb Gold in der Navy-Fassung.
   ------------------------------------------------------------------------------------- */

.news {
  display: grid;
  gap: 1.6rem;
}

.news-item + .news-item {
  border-top: 1px solid rgba(246, 242, 234, 0.25);
  padding-top: 1.6rem;
}

/* Zwei Klassen, weil `.band p` mit Klasse plus Typ sonst sticht und die Zeile
   papierfarben einfärbte. Die Auszeichnungsschrift ist dieselbe wie bei `.row-art`
   und `.eyebrow`: kleine Versalien, gesperrt, in der Displayschrift. */
.news .news-label {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-on-navy);
}

.news-item h2 {
  margin-top: 0;
}

/* Der Fokusring steht sonst in `--gold-text`, das für helles Papier gerechnet ist
   und auf Navy fast verschwindet. */
.aktuell :focus-visible {
  outline-color: var(--gold-on-navy);
}

.news-rotator {
  grid-template-columns: 100%;
}

/* Unsichtbar heißt auch unantastbar: `inert` erledigt das in neuen Browsern,
   `pointer-events` fängt die älteren ab. Sonst läge der Link des verborgenen
   Eintrags über dem sichtbaren. */
.news-rotator .news-item {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.news-rotator .news-item + .news-item {
  border-top: 0;
  padding-top: 0;
}

/* Die Verzögerung staffelt den Wechsel: Erst verschwindet der alte Eintrag,
   dann erscheint der neue. Eine Kreuzblende zeigte beide Texte kurz
   übereinander, weil alle Einträge im selben Rasterfeld liegen. */
.news-rotator .news-item.aktiv {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .news-rotator .news-item,
  .news-rotator .news-item.aktiv {
    transition: none;
    transition-delay: 0s;
  }
}

.news-controls {
  grid-area: 2 / 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.news-dot {
  width: 0.65rem;
  height: 0.65rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.news-dot[aria-current="true"] {
  background: var(--gold-on-navy);
  border-color: var(--gold-on-navy);
}

.news-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.news-pfeil:hover,
.news-dot:hover {
  border-color: var(--gold-on-navy);
}

.news-pfeil:hover {
  color: var(--gold-on-navy);
}

/* Der Knopf zum Anhalten trägt dieselbe Form wie die Pfeile und steht am Ende
   der Reihe, eine Spur abgesetzt. Die zwei Striche bauen schmaler als ein
   Winkel, deshalb sind sie kleiner gesetzt und gesperrt; der Einzug gleicht den
   Abstand hinter dem zweiten Strich wieder aus, sonst säße das Zeichen zu weit
   links. Ohne JavaScript gibt es den Knopf nicht, assets/js/news.js erzeugt ihn
   wie die übrigen Bedienelemente. */
.news-pause {
  margin-left: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

/* ---- Wussten Sie schon: die Fragenliste --------------------------------------
   Achtundvierzig Fragen, jede ein `details`-Element. Das Auf- und Zuklappen
   erledigt der Browser, JavaScript ist nicht beteiligt; ohne Skript verhält
   sich die Seite genauso. Getrennt wird mit Haarlinien in Navy, wie überall
   sonst auch. Gold bleibt den Verbindungen vorbehalten und taucht hier nur im
   Fokusring und in Links innerhalb der Antworttexte auf.
   ---------------------------------------------------------------------------- */

.wussten-liste {
  border-top: 1px solid var(--line);
  max-inline-size: 62rem;
}

.wussten-eintrag {
  border-bottom: 1px solid var(--line);
}

/* Die Frage ist eine Zeile Auszeichnungsschrift, kein Fließtext: Jost, Navy,
   und mit Platz zum Antippen. `list-style` und der WebKit-Marker nehmen dem
   Browser sein Dreieck ab, der Indikator rechts sagt dasselbe ruhiger. */
.wussten-eintrag > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  padding: 1.05rem 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy);
  cursor: pointer;
  text-wrap: pretty;
}

.wussten-eintrag > summary::-webkit-details-marker {
  display: none;
}

/* Plus und Minus statt Pfeil: Das Zeichen steht still, während der Text
   darunter erscheint, und braucht keine Drehung, die bei `prefers-reduced-motion`
   wieder abgeschaltet werden müsste. */
.wussten-eintrag > summary::after {
  content: "+";
  flex: none;
  align-self: center;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
}

.wussten-eintrag[open] > summary::after {
  content: "\2212";
}

.wussten-eintrag > summary:hover {
  color: var(--navy-deep);
}

.wussten-eintrag > summary:hover::after {
  color: var(--navy-deep);
}

/* Der Fokusring des Browsers liefe sonst um die ganze Breite der Zeile; das
   Zusammenrücken hier hält ihn an der Frage. */
.wussten-eintrag > summary:focus-visible {
  outline-offset: 2px;
}

.wussten-text {
  padding-bottom: 1.7rem;
  max-inline-size: 68ch;
}

.wussten-text p {
  margin: 0 0 1em;
}

.wussten-text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .wussten-eintrag > summary {
    font-size: var(--fs-0);
  }
}

/* ---- Bildstrecken auf „Wussten Sie schon“ -----------------------------------
   Die Bilder stammen von der alten Vereinswebsite und sind klein, zwischen 169
   und 822 px breit. Deshalb steht die Strecke als schmale Spalte neben dem Text
   und wird nie hochskaliert. Anders als die Aquarelle in `.plate` sind das
   Fotos und Drucke; `mix-blend-mode: multiply` würde sie verfärben und bleibt
   hier weg.

   Die Strecke steht im Quelltext vor dem Text, damit sie auf schmalen Geräten
   ohne `order` über ihm landet. Auf breiten Schirmen weist das Raster beiden
   ihre Spalte ausdrücklich zu, sonst käme die Strecke nach links.
   ---------------------------------------------------------------------------- */

.wussten-koerper {
  display: grid;
  grid-template-columns: 1fr clamp(12rem, 28vw, 18rem);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  padding-bottom: 1.7rem;
}

/* Rückfall für einen Eintrag ohne Bilder. Heute hat jeder der 48 eine Strecke,
   aber die Blöcke soll später ein CMS erzeugen. Ohne diese Regel bliebe die
   zweite Spur reserviert und rund 326 px stünden leer neben dem Text. Kennt ein
   Browser `:has` nicht, fällt nur diese Regel weg, nicht das übrige Raster. */
.wussten-koerper:not(:has(.wussten-bilder)) {
  grid-template-columns: 1fr;
}

.wussten-koerper > .wussten-text {
  grid-column: 1;
  grid-row: 1;
  padding-bottom: 0;
}

.wussten-bilder {
  grid-column: 2;
  grid-row: 1;
}

/* Der Rahmen ist keine Zierde: Viele Scans haben weiße oder cremefarbene
   Ränder, die ohne ihn als heller Fleck auf dem Papierton stehen. Mit Rahmen
   liest sich das als aufgezogener Abzug. Kein Gold, das bleibt den
   Verbindungen vorbehalten. */
.wussten-bild {
  margin: 0 0 1.4rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  background: var(--card);
}

.wussten-bild:last-child {
  margin-bottom: 0;
}

/* Der Deckel hält hohe Formate im Zaum, ohne zu beschneiden; die Formate
   reichen von 540x244 bis 365x600. Der Außenabstand rückt schmale Bilder in die
   Mitte ihres Rahmens. `display: block`, `max-width: 100%` und `height: auto`
   stehen schon in der Regel für alle Bilder weiter oben und fehlen hier
   deshalb.

   `inline-size: auto` sieht wie eine Selbstverständlichkeit aus, ist aber
   nötig: Jedes `img` trägt im Markup `width` und `height`, und ohne diese Zeile
   gilt die Breite aus dem Attribut als feste Angabe. Greift dann der Deckel,
   drückt der Browser nur die Höhe zusammen und lässt die Breite stehen; das
   Bild wird verzerrt. Gemessen betraf das 41 der 180 Bilder, das schmalste
   Format 365x600 wurde 37 Prozent zu breit gezeichnet. Mit `auto` rechnet der
   Browser die Breite aus dem Deckel zurück und das Seitenverhältnis bleibt. */
.wussten-bild img {
  margin: 0 auto;
  inline-size: auto;
  max-block-size: 20rem;
}

.wussten-bild figcaption {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
  text-wrap: pretty;
}

/* Erst mit JavaScript wird aus der Liste ein Blätterer. Die Klasse setzt
   assets/js/bildstrecke.js. Damit die Steuerzeile darunter beim Blättern unter
   dem Zeiger stehen bleibt, bekommt der Rahmen ein festes Raster: Die obere
   Zeile ist auf den Deckel von 20 rem genagelt, den ohnehin kein Bild
   überschreitet, die untere trägt die Unterschrift. Ein bloßer Boden genügte
   nicht, weil die Bildhöhe an der Spaltenbreite hängt und ein fester Boden je
   Umbruch anders lauten müsste. Gemessen wurde der Abstand der Steuerzeile von
   der Kastenoberkante, für jedes Bild jeder der 44 Strecken, bei 1280 und bei
   901 px: 43 Strecken stehen völlig still, der Median des Sprungs ist 0, und
   jede Strecke mit drei oder mehr Bildern rührt sich gar nicht. Es bleibt
   Eintrag 19 mit zwei Bildern, dessen zweite Unterschrift aus 145 Zeichen vier
   Zeilen braucht; dort springt die Zeile um 15,66 px. Bei 32 px Knopfhöhe
   behält ein Zeiger in der Knopfmitte den Pfeil, aber nur mit 0,34 px Luft, und
   wer weiter oben auf dem Knopf steht, verliert ihn. Folgenlos bleibt das, weil
   bei zwei Bildern jeder Klick den angeklickten Pfeil sperrt; ein zweiter Klick
   auf ihn ginge ohnehin ins Leere. */
.wussten-bilder.ist-strecke .wussten-bild {
  margin-bottom: 0;
  display: grid;
  grid-template-rows: 20rem auto;
}

.wussten-bilder.ist-strecke .wussten-bild img {
  align-self: center;
}

/* Der Boden für die Unterschrift gehört zur selben Rechnung: Ohne ihn spränge
   die Steuerzeile zwischen einzeiligen und zweizeiligen Unterschriften. Die
   4 rem sind gemessen und nicht geraten: Eine dreizeilige Unterschrift ist
   62,39 px hoch, 3,6 rem sind 57,6 px und lassen sie um 4,79 px überstehen,
   4 rem sind 64 px und fassen sie. Damit fällt der größte Sprung von 22,06 auf
   15,66 px, und die Einträge 6 und 31 kommen ganz zur Ruhe. Die vier Zeilen von
   Eintrag 19 (79,66 px) fasst auch dieser Boden nicht; dafür bräuchte es
   4,98 rem, weitere 15,7 px je Strecke. Gekostet haben die 4 rem 6,4 px je
   Strecke: neben dem Text fast nichts, weil dort die Textspalte die Höhe
   vorgibt (7 px auf der ganzen Seite), unter 900 px, wo die Strecke über dem
   Text steht, 281 px über alle 48 Einträge. Nur innerhalb der
   Strecke, denn ohne JavaScript stehen alle Bilder untereinander, und dort
   bliese der Boden jede kurze Unterschrift unnötig auf. */
.wussten-bilder.ist-strecke .wussten-bild figcaption {
  min-block-size: 4rem;
}

/* Muss stehen bleiben und muss diese Genauigkeit haben: Die Regel
   `.wussten-bilder.ist-strecke .wussten-bild` setzt `display: grid` und schlüge
   sonst das `display: none`, das der Browser dem Attribut `hidden` mitgibt.
   Ohne diese Zeile blieben alle Bilder der Strecke sichtbar, und der Blätterer
   täte nichts. */
.wussten-bilder.ist-strecke .wussten-bild[hidden] {
  display: none;
}

.wussten-strecke-steuer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.wussten-strecke-zaehler {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Form wie die Pfeile des News-Bandes, Maß für Maß: 2 rem im Rund, Zeichen in
   1,15 rem. Nur die Farbe weicht ab, Navy statt Gold, denn auf dem Papierton
   ist Gold den Verbindungen vorbehalten. */
.wussten-strecke-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wussten-strecke-pfeil:hover:not(:disabled) {
  border-color: var(--navy);
  color: var(--navy-deep);
}

.wussten-strecke-pfeil:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 900px) {
  .wussten-koerper {
    grid-template-columns: 1fr;
  }

  /* Die Zuweisung fällt weg. Weil die Strecke im Quelltext vorn steht, kommt
     sie damit von selbst über den Text. */
  .wussten-koerper > .wussten-text,
  .wussten-bilder {
    grid-column: auto;
    grid-row: auto;
  }

  .wussten-bilder {
    max-inline-size: 20rem;
  }
}