/* ============================================================
   ROVERS BOGENSCHÜTZEN HILTRUP e. V. — Design-System
   ------------------------------------------------------------
   Farbwelt : Navy/Blau-Theme (shadcn-Tokenset), hell als Standard,
              dunkle Variante über .dark bzw. Systemeinstellung
   Schriften: Inter (Text/UI) · Fraunces (Display) · System-Mono (Daten)
   Signature: .target-rings — World-Archery-Ringfarben
              (Gold–Rot–Blau–Schwarz–Weiß)

   Aufbau
     1  Theme-Tokens   — unverändert aus dem Design-Tool übernommen
     2  Ergänzungen    — was das Tokenset nicht mitbringt, hergeleitet
     3  Rollen         — semantische Zuordnung, nur hierüber wird gestylt
     4  Flächen        — hell/dunkel/invertiert als Geltungsbereiche
     ab 5 Komponenten

   Die Schriften werden im <head> jeder Seite per <link> geladen
   (preconnect + stylesheet), nicht per @import — sonst entsteht
   eine render-blockierende Request-Kette.
   ============================================================ */

/* ============================================================
   1 · THEME-TOKENS
   1:1 aus dem Design-Tool. Nicht von Hand anpassen — bei einem
   Theme-Wechsel wird dieser Block ersetzt, der Rest bleibt.
   ============================================================ */
:root {
  --card: #ffffff;
  --ring: #324f9a;
  --input: #ffffff;
  --muted: #f5f5f5;
  --accent: #19398d;
  --border: #e3e3e3;
  --radius: 0.5rem;
  --chart-1: #0159b7;
  --chart-2: #13c9aa;
  --chart-3: #cf3fd9;
  --chart-4: #8f3c1e;
  --chart-5: #17ab92;
  --popover: #ffffff;
  --primary: #19398d;
  --sidebar: #001B3C;
  --spacing: 0.24rem;
  /*--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;*/
  --font-mono: Inter, ui-sans-serif, sans-serif, system-ui;
  --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
  --secondary: #0a0a0a;
  --background: #f3f5fb;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --foreground: #010101;
  --destructive: #9b0033;
  --shadow-blur: 2px;
  --shadow-color: #1a2137;
  --sidebar-ring: #19398d;
  --shadow-spread: 0px;
  --letter-spacing: 0em;
  --shadow-opacity: 0.05;
  --sidebar-accent: #19398d;
  --sidebar-border: #d4d4d4;
  --card-foreground: #010101;
  --shadow-offset-x: 0;
  --shadow-offset-y: 1px;
  --sidebar-primary: #19398d;
  --muted-foreground: #454545;
  --accent-foreground: #ffffff;
  --popover-foreground: #010101;
  --primary-foreground: #f3f5f9;
  --sidebar-foreground: #f4f5fc;
  --secondary-foreground: #f5f7fb;
  --destructive-foreground: #ffffff;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-primary-foreground: #ffffff;
}

.dark,
:root[data-theme="dark"] {
  --card: #0a0a0a;
  --ring: #6a8dd8;
  --input: #121212;
  --muted: #262626;
  --accent: #404040;
  --border: #282828;
  --radius: 0.5rem;
  --chart-1: #6a8dd8;
  --chart-2: #2062ce;
  --chart-3: #4c5f00;
  --chart-4: #cc7455;
  --chart-5: #4bb3a1;
  --popover: #171717;
  --primary: #6a8dd8;
  --sidebar: #0a0a0a;
  --spacing: 0.24rem;
  /*--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;*/
  --font-mono: Inter, ui-sans-serif, sans-serif, system-ui;
  --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
  --secondary: #171717;
  --background: #050505;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --foreground: #fafafa;
  --destructive: #cd6e7b;
  --shadow-blur: 2px;
  --shadow-color: #000000;
  --sidebar-ring: #6a8dd8;
  --shadow-spread: 0px;
  --letter-spacing: 0em;
  --shadow-opacity: 0.05;
  --sidebar-accent: #262626;
  --sidebar-border: #282828;
  --card-foreground: #fafafa;
  --shadow-offset-x: 0;
  --shadow-offset-y: 1px;
  --sidebar-primary: #6a8dd8;
  --muted-foreground: #a1a1a1;
  --accent-foreground: #fafafa;
  --popover-foreground: #fafafa;
  --primary-foreground: #0a0a0a;
  --sidebar-foreground: #fafafa;
  --secondary-foreground: #fafafa;
  --destructive-foreground: #fafafa;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-primary-foreground: #fafafa;
}

/* ============================================================
   2 · ERGÄNZUNGEN
   Was das Tokenset nicht abdeckt. Alle Werte gegen die Flächen
   gerechnet, auf denen sie tatsächlich stehen — mindestens 4,5:1
   für Text, 3:1 für Rahmen, die eine Bedienung markieren.
   ============================================================ */
:root {
  /* Text und Akzent auf der invertierten Navy-Fläche */
  --invert-raised:   #0c2a4f;              /* Karte auf Navy */
  --invert-muted:    #b6c2dc;              /* 9,6:1 auf Navy   */
  --invert-accent:   #82a2e0;              /* 6,7:1 auf Navy   */
  --invert-line:     rgba(244,245,252,.16);
  --invert-line-strong: rgba(244,245,252,.30);

  /* Status — das Tokenset kennt nur destructive */
  --success:         #0e6b46;              /* 6,5:1 auf Weiß   */
  --info:            var(--chart-1);       /* 6,7:1 auf Weiß   */
  --success-invert:  #7fd4b3;              /* 9,8:1 auf Navy   */
  --info-invert:     #8fc9ea;              /* 9,6:1 auf Navy   */
  --danger-invert:   #e08a95;              /* 6,7:1 auf Navy   */

  /* Datenschrift: --font-mono aus dem Theme ist ein reiner Systemstack und
     sieht auf jedem Gerät anders aus. IBM Plex Mono davor — humanistisch
     gezeichnet, passt damit zur Fraunces, und bei 13px noch klar lesbar. */
  /*--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;*/
  --font-mono:  Inter, ui-sans-serif, sans-serif, system-ui;

  /* Rahmen, die eine Bedienung begrenzen, brauchen 3:1 —
     --border (#e3e3e3, 1,3:1) reicht dafür nur als Zierlinie. */
  --field-border:    #8a8a8a;              /* 3,5:1 auf Weiß   */

  /* Aufklapp-Pfeil der Auswahlfelder. Als Grafik statt als Systemelement,
     damit ein <select> in jedem Browser genauso hoch ist wie ein Eingabefeld
     daneben. Die Farbe steckt im Data-URI und wird deshalb pro Modus
     getauscht, nicht geerbt. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23454545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --accent-wash:     color-mix(in srgb, var(--primary) 8%, transparent);
  --accent-wash-strong: color-mix(in srgb, var(--primary) 14%, transparent);

  /* World-Archery-Ringfarben: physische Zielscheibe, kein Markenfarbraum —
     bleiben deshalb bei einem Theme-Wechsel unverändert. */
  --wa-gold:  #f2c43d;
  --wa-red:   #d8402f;
  --wa-blue:  #2f9fd0;
  --wa-black: #16181d;
  --wa-white: #ffffff;
}

.dark,
:root[data-theme="dark"] {
  --invert-raised:   #171717;
  --invert-muted:    #a1a1a1;
  --invert-accent:   var(--primary);
  --invert-line:     rgba(250,250,250,.14);
  --invert-line-strong: rgba(250,250,250,.26);

  --success:         #7fd4b3;
  --info:            #8fc9ea;
  --success-invert:  #7fd4b3;
  --info-invert:     #8fc9ea;
  --danger-invert:   var(--destructive);

  --field-border:    #6b6b6b;              /* 3,5:1 auf --input */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ============================================================
   3 · ROLLEN
   Komponenten greifen ausschließlich auf diese Namen zu. Dadurch
   genügt es, sie pro Fläche einmal umzuschalten (Abschnitt 4).
   ============================================================ */
:root {
  --surface:        var(--background);
  --surface-raised: var(--card);
  --surface-sunken: var(--muted);
  --text:           var(--foreground);
  --text-muted:     var(--muted-foreground);
  --accent-color:   var(--primary);
  --line:           var(--border);
  --line-strong:    color-mix(in srgb, var(--foreground) 18%, transparent);
  --focus-ring:     var(--ring);
  --status-ok:      var(--success);
  --status-bad:     var(--destructive);
  --status-info:    var(--info);

  /* --- Schrift --- */
  --font-display: "Fraunces", var(--font-serif);
  --font-body:    var(--font-sans);

  /* Typoskala — Minimum 13px, damit auch Versalien lesbar bleiben */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.125rem, 1.02rem + 0.45vw, 1.3rem);
  --t-xl:   clamp(1.3rem,  1.08rem + 1.0vw,  1.7rem);
  --t-2xl:  clamp(1.8rem,  1.28rem + 2.3vw,  2.8rem);
  --t-3xl:  clamp(2.4rem,  1.5rem  + 4.0vw,  4.4rem);

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  /* --- Abstände: Vielfache von --spacing --- */
  --s1:  calc(var(--spacing) * 1);
  --s2:  calc(var(--spacing) * 2);
  --s3:  calc(var(--spacing) * 3);
  --s4:  calc(var(--spacing) * 4);
  --s5:  calc(var(--spacing) * 5);
  --s6:  calc(var(--spacing) * 6);
  --s8:  calc(var(--spacing) * 8);
  --s10: calc(var(--spacing) * 10);
  --s12: calc(var(--spacing) * 12);
  --s16: calc(var(--spacing) * 16);
  --s20: calc(var(--spacing) * 20);
  --s24: calc(var(--spacing) * 24);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);

  /* --- Maße --- */
  --container: 1200px;
  --container-narrow: 760px;
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-lg: calc(var(--radius) * 1.5);
  --radius-pill: 999px;
  --header-h: 4.5rem;

  /* Logo in der Kopfleiste. Überhang = --brand-top + --brand-size − --header-h.
     Auf Mobil bewusst ohne Überhang: dort läge das Logo sonst hinter dem
     geöffneten Menü-Panel, das im selben Stapelkontext darüber liegt. */
  --brand-size: 3.625rem;  /* 58px — passt vollständig in die 72px-Leiste */
  --brand-top: 0.4375rem;

  /* --- Ebenen --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-panel: 120;
  --z-overlay: 200;
  --z-skip: 400;
  /* Der Mauszeiger-Begleiter liegt über allem, ohne die Stufen
     darunter zu verschieben (Abschnitt 24). */
  --z-cursor: 500;

  /* --- Bewegung --- */
  --dur-fast: 150ms;
  --dur:      220ms;
  --dur-slow: 320ms;
  --ease:    cubic-bezier(.22,.61,.36,1);
  --ease-in: cubic-bezier(.55,.06,.68,.19);

  /* --- Schatten, aus den Theme-Tokens zusammengesetzt --- */
  --shadow-tint: color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
  --elev-1: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-tint);
  --elev-2: var(--shadow-offset-x) 4px 12px var(--shadow-spread) var(--shadow-tint),
            var(--shadow-offset-x) 12px 32px -8px var(--shadow-tint);
}

/* Dunkelmodus: Karten heben sich nach oben ab, nicht nach unten */
.dark,
:root[data-theme="dark"] {
  --surface-sunken: var(--card);
  --surface-raised: var(--popover);
  --line-strong: color-mix(in srgb, var(--foreground) 24%, transparent);
}

/* Systemeinstellung übernehmen, solange nichts anderes gewählt wurde */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --card: #0a0a0a; --ring: #6a8dd8; --input: #121212; --muted: #262626;
    --accent: #404040; --border: #282828;
    --chart-1: #6a8dd8; --chart-2: #2062ce; --chart-3: #4c5f00;
    --chart-4: #cc7455; --chart-5: #4bb3a1;
    --popover: #171717; --primary: #6a8dd8; --sidebar: #0a0a0a;
    --secondary: #171717; --background: #050505; --foreground: #fafafa;
    --destructive: #cd6e7b; --shadow-color: #000000;
    --sidebar-ring: #6a8dd8; --sidebar-accent: #262626; --sidebar-border: #282828;
    --card-foreground: #fafafa; --sidebar-primary: #6a8dd8;
    --muted-foreground: #a1a1a1; --accent-foreground: #fafafa;
    --popover-foreground: #fafafa; --primary-foreground: #0a0a0a;
    --sidebar-foreground: #fafafa; --secondary-foreground: #fafafa;
    --destructive-foreground: #fafafa;
    --sidebar-accent-foreground: #fafafa; --sidebar-primary-foreground: #fafafa;

    --invert-raised: #171717; --invert-muted: #a1a1a1; --invert-accent: #6a8dd8;
    --invert-line: rgba(250,250,250,.14); --invert-line-strong: rgba(250,250,250,.26);
    --success: #7fd4b3; --info: #8fc9ea;
    --success-invert: #7fd4b3; --info-invert: #8fc9ea; --danger-invert: #cd6e7b;
    --field-border: #6b6b6b;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --surface-sunken: #0a0a0a; --surface-raised: #171717;
    --line-strong: color-mix(in srgb, #fafafa 24%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="light"]{ color-scheme: light; }

/* ============================================================
   4 · FLÄCHEN
   Ein Abschnitt schaltet seine Rollen um — Karten, Tabellen und
   Status-Kennzeichnungen darin passen sich ohne Sonderregeln an.
   ============================================================ */
/* Ruhige Alternanz: Seitenfläche ↔ Karte. Karten setzen sich in beiden
   Fällen ab, weil --surface-raised jeweils mitgedreht wird. */
.section--dark{
  background:var(--background); color:var(--foreground);
  --surface-raised: var(--card);
}
.section--light{
  background:var(--card); color:var(--card-foreground);
  --surface-raised: var(--background);
  --surface-sunken: var(--muted);
}
.section--soft{
  background:var(--muted); color:var(--foreground);
  --surface-raised: var(--card);
}

/* Invertierte Fläche: Navy im Hellmodus, Sidebar-Schwarz im Dunkelmodus.
   Trägt Kopf, Fuß, Hero, Bildbänder, CTA-Leiste und Lightbox.
   Achtung: Dieselbe Liste steht in main.js (Abschnitt 11) — der
   Mauszeiger-Begleiter liegt über den Flächen und muss sie erkennen,
   statt ihre Rollen zu erben. Wird hier etwas ergänzt, dort ebenso. */
.on-invert,
.site-header,
.mobile-panel,
.site-footer,
.hero,
.page-hero,
.band,
.cta-band,
.lightbox,
.proto-badge{
  --surface:        var(--sidebar);
  --surface-raised: var(--invert-raised);
  --surface-sunken: var(--invert-raised);
  --text:           var(--sidebar-foreground);
  --text-muted:     var(--invert-muted);
  --accent-color:   var(--invert-accent);
  --line:           var(--invert-line);
  --line-strong:    var(--invert-line-strong);
  --focus-ring:     var(--invert-accent);
  --status-ok:      var(--success-invert);
  --status-bad:     var(--danger-invert);
  --status-info:    var(--info-invert);
  --accent-wash:        color-mix(in srgb, var(--invert-accent) 12%, transparent);
  --accent-wash-strong: color-mix(in srgb, var(--invert-accent) 20%, transparent);
  color-scheme: dark;
  background:var(--sidebar);
  color:var(--sidebar-foreground);
}

/* ============================================================
   5 · RESET & BASIS
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* Sticky-Header darf Sprungziele nicht verdecken */
  scroll-padding-top: calc(var(--header-h) + var(--s6));
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100dvh;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-body);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  letter-spacing:var(--letter-spacing);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,h5{ text-wrap:balance; }
p{ text-wrap:pretty; }

::selection{ background:var(--primary); color:var(--primary-foreground); }

:target{ scroll-margin-top: calc(var(--header-h) + var(--s6)); }

/* Sichtbarer Fokus — nie entfernen */
:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

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

.skip-link{
  position:fixed; left:var(--s4); top:-4rem; z-index:var(--z-skip);
  background:var(--primary); color:var(--primary-foreground);
  padding:var(--s3) var(--s5); border-radius:var(--radius);
  font-weight:600; text-decoration:none; box-shadow:var(--elev-2);
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{ top:var(--s4); }

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

/* ============================================================
   6 · LAYOUT
   ============================================================ */
.wrap{
  width:100%; max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--s5);
}
@media (min-width:768px){ .wrap{ padding-inline:var(--s10); } }
@media (min-width:1280px){ .wrap{ padding-inline:var(--s12); } }
.wrap--narrow{ max-width:var(--container-narrow); }

/* Abschnitts-Blöcke (Hero, Bildband, Abschluss-Band, Seitenkopf, Termin-Leiste)
   reichen mit ihrer Fläche sonst bis zum Bildschirmrand. Eingerahmt bleibt der
   ganze Abschnitt samt Hintergrund, Zierringen und Bild auf Inhaltsbreite.
   overflow:clip haben diese Abschnitte bereits — hier wiederholt, weil die
   Klasse auch auf .section greift, das keines hat. */
.is-boxed{
  max-width:var(--container);
  margin-inline:auto;
  border-radius:var(--radius-lg);
  overflow:clip;
}

section{ position:relative; }

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

.stack{ display:flex; flex-direction:column; gap:var(--s5); }
.stack--tight{ gap:var(--s3); }
.stack--loose{ gap:var(--s8); }

.split{ display:grid; gap:var(--s10); align-items:start; }
@media (min-width:900px){
  .split{ grid-template-columns:1.15fr .85fr; gap:var(--s16); }
  .split--even{ grid-template-columns:1fr 1fr; }
  .split--flip > :first-child{ order:2; }
}

.grid{ display:grid; gap:var(--s6); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
@media (min-width:900px){ .grid--3.grid--fixed{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   7 · TYPOGRAFIE
   ============================================================ */
.eyebrow{
  display:flex; align-items:center; gap:var(--s3);
  font-family:var(--font-body); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-color);
  margin:0 0 var(--s4);
}
.eyebrow::before{
  content:""; width:24px; height:2px; flex:none;
  background:currentColor;
}

/* Meta-Zeile aus Datum und Kennzeichen — in der Newskarte wie im Beitrag */
.kicker{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  margin:0;
}
.kicker time{
  font-family:var(--font-mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; color:var(--accent-color);
  font-variant-numeric:tabular-nums;
}

.display{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-3xl); line-height:var(--lh-tight);
  letter-spacing:-.02em; margin:0 0 var(--s6);
  color:var(--text);
}
.display em{ font-style:normal; color:var(--accent-color); }

.section-head{ max-width:44rem; margin-bottom:var(--s12); }
.section-head h2{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-2xl); line-height:var(--lh-snug);
  letter-spacing:-.015em; margin:0 0 var(--s4);
  color:var(--text);
}
.section-head p{
  font-size:var(--t-md); color:var(--text-muted); margin:0;
  max-width:60ch;
}
/* Die Kopfzeile ist ebenfalls ein <p> — sonst gewinnt die Regel darüber */
.section-head .eyebrow{
  font-size:var(--t-xs); color:var(--accent-color); margin:0 0 var(--s4); max-width:none;
}
.section-head--tight{ margin-bottom:var(--s6); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }

.lede{
  font-size:var(--t-lg); line-height:1.55;
  color:var(--text-muted); max-width:56ch; margin:0 0 var(--s8);
}

.prose{ max-width:68ch; }
.prose p{ color:var(--text-muted); margin:0 0 var(--s4); }
.prose p:last-child{ margin-bottom:0; }
.prose h3{
  font-family:var(--font-display); font-size:var(--t-xl); font-weight:600;
  margin:var(--s10) 0 var(--s3); color:var(--text);
}
.prose ul{ margin:0 0 var(--s4); padding-left:1.25rem; color:var(--text-muted); }
.prose li{ margin-bottom:var(--s2); }
.prose a{ color:var(--accent-color); text-underline-offset:.2em; }
.prose strong{ color:var(--text); font-weight:600; }

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ============================================================
   8 · BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:48px; padding:var(--s3) var(--s6);
  font-family:var(--font-body); font-size:var(--t-sm); font-weight:600;
  text-decoration:none; text-align:center;
  border:1.5px solid transparent; border-radius:var(--radius);
  cursor:pointer;
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn .icon{ width:18px; height:18px; flex:none; }

.btn-primary{
  background:var(--primary); color:var(--primary-foreground);
  border-color:var(--primary); box-shadow:var(--elev-1);
}
.btn-primary:hover{
  background:color-mix(in srgb, var(--primary) 86%, var(--foreground));
  border-color:color-mix(in srgb, var(--primary) 86%, var(--foreground));
  box-shadow:var(--elev-2);
}
.on-invert .btn-primary{
  background:var(--invert-accent); color:var(--sidebar);
  border-color:var(--invert-accent);
}
.on-invert .btn-primary:hover{
  background:color-mix(in srgb, var(--invert-accent) 82%, #ffffff);
  border-color:color-mix(in srgb, var(--invert-accent) 82%, #ffffff);
}

.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--accent-color); color:var(--accent-color); }

.btn-dark{
  background:var(--sidebar); color:var(--sidebar-foreground);
  border-color:var(--sidebar); box-shadow:var(--elev-1);
}
.btn-dark:hover{
  background:color-mix(in srgb, var(--sidebar) 88%, var(--primary));
  border-color:color-mix(in srgb, var(--sidebar) 88%, var(--primary));
  box-shadow:var(--elev-2);
}

.btn-block{ width:100%; }
.btn[aria-disabled="true"],
.btn:disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s4); }

/* Eine eigenständige Schaltflächenreihe unter einem anderen Block: im Editor
   kommt der Abstand aus dem Blockabstand, im Frontend stehen die Blöcke ohne
   Zwischenraum aufeinander. Gleicher Wert wie „mt-8“ am Beitragslisten-Link. */
.section > .wrap > * + .btn-row{ margin-top:var(--s8); }

/* Textlink mit Pfeil */
.link-arrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px;
  font-size:var(--t-sm); font-weight:600; color:var(--accent-color);
  text-decoration:none;
}
.link-arrow .icon{ width:16px; height:16px; transition:transform var(--dur) var(--ease); }
.link-arrow:hover{ text-decoration:underline; text-underline-offset:.25em; }
.link-arrow:hover .icon{ transform:translateX(3px); }

/* Noch nicht verlinkt — sieht bewusst nicht wie ein Link aus */
.link-arrow.is-todo{
  color:var(--text-muted); font-weight:400; font-style:italic; cursor:default;
}
.link-arrow.is-todo:hover{ text-decoration:none; }
.link-arrow.is-todo .icon{ opacity:.6; }

/* ============================================================
   9 · ZIELSCHEIBEN-MOTIV (Signature)
   ============================================================ */
.target-rings{
  background:radial-gradient(circle at center,
    var(--wa-gold)  0   10%,
    var(--wa-red)   10% 30%,
    var(--wa-blue)  30% 50%,
    var(--wa-black) 50% 70%,
    var(--wa-white) 70% 90%,
    transparent     90% 100%);
  border-radius:50%;
  flex:none;
}
/* Nur Linien statt Flächen — ruhiger für Hintergründe */
.target-rings--outline{
  background:radial-gradient(circle at center,
    transparent 0 9.4%,    var(--wa-gold)  9.4% 10%,
    transparent 10% 29.4%, var(--wa-red)   29.4% 30%,
    transparent 30% 49.4%, var(--wa-blue)  49.4% 50%,
    transparent 50% 69.4%, var(--wa-white) 69.4% 70%,
    transparent 70% 89.4%, var(--wa-gold)  89.4% 90%,
    transparent 90%);
}
.ring-dot{ width:12px; height:12px; }

/* Dekoratives Ring-Ornament, absolut positioniert.
   --ring-opacity hält die Zieldeckkraft an einer Stelle, damit der
   Treffer-Impuls unten sie als Endzustand wiederverwenden kann. */
.ring-deco{
  --ring-opacity:.22;
  position:absolute; pointer-events:none; z-index:0;
  opacity:var(--ring-opacity); filter:saturate(.6);
}

/* Treffer-Impuls — die Ringe schwingen beim ersten Sichtbarwerden
   einmal von innen nach außen auf, wie der Moment des Einschlags. */
@keyframes ring-impact{
  0%   { transform:scale(.85);  opacity:0; }
  60%  { transform:scale(1.04); opacity:var(--ring-opacity); }
  100% { transform:scale(1);    opacity:var(--ring-opacity); }
}

/* Statt des allgemeinen [data-reveal]-Versatzes (translateY) bekommt das
   Ornament seinen eigenen, spezifischeren Auftritt. Ohne JS greift keine
   dieser Regeln — dann bleiben die Ringe wie bisher ruhig sichtbar. */
.js .ring-deco[data-reveal]{
  opacity:0; transform:none; transition:none;
}
.js .ring-deco[data-reveal].is-visible{
  opacity:var(--ring-opacity);
  animation:ring-impact calc(var(--dur-slow) + var(--dur)) var(--ease) both;
}
@media (prefers-reduced-motion: reduce){
  .js .ring-deco[data-reveal],
  .js .ring-deco[data-reveal].is-visible{
    opacity:var(--ring-opacity); transform:none; animation:none;
  }
}

/* ============================================================
   10 · HEADER & NAVIGATION
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:color-mix(in srgb, var(--sidebar) 88%, transparent);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
  padding-top:env(safe-area-inset-top);
}
.site-header.is-scrolled{
  background:var(--sidebar);
  border-bottom-color:var(--invert-line);
  box-shadow:var(--elev-2);
}

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s10);
  min-height:var(--header-h);
}

/* Grundform — im Fuß weiterhin Logo plus Schriftzug */
.brand{ display:flex; align-items:center; gap:var(--s3); min-height:44px; text-decoration:none; }
.brand img{ width:40px; height:40px; }

/* Kopfleiste: nur das Logo, größer, und es tritt über die Unterkante hinaus.
   Der Schriftzug entfällt — der Vereinsname steht bereits im Logo und wandert
   damit in dessen alt-Text.
   Die Höhe des Links bleibt bei --header-h, das Bild ist absolut gesetzt.
   Sonst würde das größere Logo die Leiste mitwachsen lassen und alles
   darunter verschieben. */
.site-header .brand{
  position:relative; z-index:2;
  width:var(--brand-size); height:var(--header-h);
  gap:0; flex:none;
}
.site-header .brand img{
  position:absolute; left:0; top:var(--brand-top);
  width:var(--brand-size); height:var(--brand-size);
  border-radius:50%;
  /* Schmaler Ring in Leistenfarbe, damit die Trennlinie des Kopfes beim
     Scrollen nicht direkt an den Kreis stößt. */
  box-shadow:0 0 0 3px var(--sidebar);
  transition:width var(--dur) var(--ease), height var(--dur) var(--ease),
             top var(--dur) var(--ease);
}
/* Bei geöffnetem Menü zieht sich das Logo in die Leiste zurück. Sonst läge
   der überhängende Teil hinter dem Panel — das Panel liegt im selben
   Stapelkontext darüber — oder würde den ersten Menüpunkt verdecken. */
.site-header:has(.nav-toggle[aria-expanded="true"]) .brand img{
  width:2.75rem; height:2.75rem;
  top:calc((var(--header-h) - 2.75rem) / 2);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{
  font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  letter-spacing:.01em; color:var(--sidebar-foreground);
}
.brand-text span{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--invert-accent);
  white-space:nowrap;
}
@media (max-width:420px){ .brand-text span{ display:none; } }

/* --- Desktop-Navigation --- */
.nav-links{
  display:none; align-items:center; gap:var(--s1);
  list-style:none; margin:0 0 0 auto; padding:0;   /* rechtsbündig, seit der CTA fehlt */
}
.nav-links > li{ position:relative; }
.nav-links a,
.nav-links .subnav-toggle{
  display:inline-flex; align-items:center; gap:var(--s1);
  min-height:44px; padding:0 var(--s3);
  font-size:var(--t-sm); font-weight:500; white-space:nowrap;
  color:var(--invert-muted); text-decoration:none;
  background:none; border:0; cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-links a:hover,
.nav-links .subnav-toggle:hover{ color:var(--sidebar-foreground); }
.nav-links a[aria-current="page"],
.nav-links li.is-active > a,
.nav-links li.is-active > .subnav-toggle{
  color:var(--sidebar-foreground); border-bottom-color:var(--invert-accent);
}
.subnav-toggle .chev{
  width:14px; height:14px; flex:none;   /* sonst staucht Flexbox das SVG auf 0 */
  transition:transform var(--dur) var(--ease);
}
.subnav-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.subnav{
  position:absolute; top:calc(100% + 6px); left:0; z-index:var(--z-panel);
  min-width:15rem; margin:0; padding:var(--s2);
  list-style:none;
  background:var(--invert-raised); border:1px solid var(--invert-line-strong);
  border-radius:var(--radius); box-shadow:var(--elev-2);
  display:none;
}
.subnav[data-open="true"]{
  display:block;
  animation:subnav-in var(--dur) var(--ease) both;
}
@keyframes subnav-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
.subnav a{
  display:block; width:100%; padding:var(--s3);
  border-bottom:0; border-radius:var(--radius-sm);
  color:var(--invert-muted); font-weight:500;
}
.subnav a:hover{
  background:color-mix(in srgb, var(--invert-accent) 16%, transparent);
  color:var(--sidebar-foreground);
}
.subnav a[aria-current="page"]{
  color:var(--invert-accent);
  background:color-mix(in srgb, var(--invert-accent) 12%, transparent);
}

.nav-cta{ display:flex; align-items:center; gap:var(--s3); }

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; flex:none;
  background:none; border:1.5px solid var(--invert-line-strong);
  border-radius:var(--radius); color:var(--sidebar-foreground);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-toggle:hover{
  border-color:var(--invert-accent);
  background:color-mix(in srgb, var(--invert-accent) 12%, transparent);
}
.nav-toggle .icon{ width:22px; height:22px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* Farbschema-Umschalter — sitzt im Fuß, wo Platz für ein sichtbares Label ist.
   Ohne JavaScript hätte er keine Wirkung und bleibt deshalb ausgeblendet. */
.theme-toggle{ display:none; }
.js .theme-toggle{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px; padding:var(--s2) var(--s5);
  font-family:var(--font-body); font-size:var(--t-sm); font-weight:500;
  color:var(--text-muted); background:none;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease),
             background-color var(--dur) var(--ease);
}
.theme-toggle:hover{
  color:var(--text); border-color:var(--accent-color);
  background:var(--accent-wash);
}
.theme-toggle .icon{ width:18px; height:18px; }

/* Nur das Symbol des jeweils anderen Modus zeigen */
.theme-toggle .icon-dark{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-dark{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-light{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-dark{ display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-light{ display:none; }
}

/* Ab Tablet darf das Logo über die Unterkante der Leiste hinauslaufen */
@media (min-width:768px){
  :root{ --brand-size: 5.25rem; --brand-top: 0.5rem; }   /* 84px · 20px Überhang */
}
@media (min-width:1180px){
  :root{ --brand-size: 5.75rem; --brand-top: 0.5rem; }   /* 92px · 28px Überhang */
  .nav-links{ display:flex; }
  /* Enthält nur noch das Burger-Symbol — leer würde es rechts eine Lücke lassen */
  .nav-cta{ display:none; }
}

/* --- Mobiles Panel --- */
.mobile-panel{
  position:fixed; inset:var(--header-h) 0 0; z-index:var(--z-panel);
  display:none; flex-direction:column;
  padding:var(--s6) var(--s5) calc(var(--s10) + env(safe-area-inset-bottom));
  background:var(--sidebar);
  border-top:1px solid var(--invert-line);
  overflow-y:auto; overscroll-behavior:contain;
}
.mobile-panel.is-open{
  display:flex;
  animation:panel-in var(--dur-slow) var(--ease) both;
}
@keyframes panel-in{
  from{ opacity:0; transform:translateY(-10px); }
  to{ opacity:1; transform:none; }
}
.mobile-nav{ list-style:none; margin:0 0 var(--s8); padding:0; }
.mobile-nav > li + li{ border-top:1px solid var(--invert-line); }
.mobile-nav a,
.mobile-nav .subnav-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  width:100%; min-height:52px; padding:var(--s3) var(--s1);
  font-size:var(--t-md); font-weight:500;
  color:var(--sidebar-foreground); text-decoration:none;
  background:none; border:0; text-align:left; cursor:pointer;
}
.mobile-nav a[aria-current="page"]{ color:var(--invert-accent); }
.mobile-nav .subnav{
  position:static; display:none; min-width:0;
  margin:0 0 var(--s3); padding:0 0 0 var(--s4);
  background:none; border:0; border-left:2px solid var(--invert-line-strong);
  border-radius:0; box-shadow:none; animation:none;
}
.mobile-nav .subnav[data-open="true"]{ display:block; animation:none; }
.mobile-nav .subnav a{ min-height:48px; font-size:var(--t-sm); color:var(--invert-muted); }
@media (min-width:1180px){ .mobile-panel{ display:none !important; } }

/* ============================================================
   11 · HERO
   ============================================================ */
.hero{
  position:relative; overflow:clip;
  padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,6vw,4.5rem);
  background:
    radial-gradient(1000px 620px at 78% -12%,
      color-mix(in srgb, var(--invert-accent) 18%, transparent), transparent 62%),
    linear-gradient(180deg, var(--sidebar) 0%,
      color-mix(in srgb, var(--sidebar) 88%, var(--primary)) 100%);
}
/* Hintergrundmotiv: Münsteraner Silhouette hinten, Baumreihe davor.

   Beide Ebenen sind über die Hero-Breite hinaus gezogen (112 %). Der Überstand
   ist der Spielraum für die Parallaxe — ohne ihn käme beim Verschieben der
   Seitenrand ins Bild. Sie liegen unter --z-base, auf dem der Inhalt steht.

   Der Verlauf als Maske lässt die Silhouette nach unten ausklingen: Unterhalb
   der Dachlinie ist die Vorlage eine geschlossene Fläche, die sonst als Block
   über dem halben Kopf läge. */
.hero-scenery{
  position:absolute; inset:0; z-index:0;
  overflow:clip; pointer-events:none;
}
.hero-scenery__layer{
  position:absolute; left:-6%; width:112%;
  display:block; max-width:none;
}
/* Höhe des Bands: 76 % des Kopfes — höchstens aber so viel, wie die Vorlage
   auf dieser Breite von sich aus hoch ist (112 vw / Seitenverhältnis 1,834
   ≈ 61 vw). Ohne diese Schranke würde „cover“ auf schmalen, hohen Bildschirmen
   an der Höhe skalieren und die Silhouette ins Riesenhafte ziehen. */
/* Die Silhouette steht ein Stück über der Unterkante: So liegt die Dachlinie
   frei über den Baumwipfeln, statt zwischen ihnen zu verschwinden. */
.hero-scenery__city{
  bottom:14%; height:min(76%, 61vw);
  object-fit:cover; object-position:center top;
  opacity:.3;
  -webkit-mask-image:linear-gradient(180deg, #000 0 40%, transparent 90%);
          mask-image:linear-gradient(180deg, #000 0 40%, transparent 90%);
}
/* Die Baumreihe rutscht über die Unterkante hinaus: Die Wipfel kommen damit
   tiefer zu stehen und geben die Dachlinie darüber frei. */
.hero-scenery__trees{
  bottom:-5%; height:auto;
  opacity:.46;
}
/* Im Dunkelmodus steht das Motiv auf fast schwarzem Grund statt auf Navy —
   dieselbe Deckkraft wirkte dort deutlich lauter. */
:root[data-theme="dark"] .hero-scenery__city,
.dark .hero-scenery__city{ opacity:.2; }
:root[data-theme="dark"] .hero-scenery__trees,
.dark .hero-scenery__trees{ opacity:.32; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero-scenery__city{ opacity:.2; }
  :root:not([data-theme="light"]) .hero-scenery__trees{ opacity:.32; }
}

.hero .ring-deco{ right:-14%; top:-28%; width:min(46rem,90vw); aspect-ratio:1; }

.hero-grid{ position:relative; z-index:var(--z-base); display:grid; gap:var(--s10); align-items:center; }
@media (min-width:900px){
  .hero-grid{ grid-template-columns:1.05fr .95fr; gap:var(--s16); }
}
.hero-copy{ max-width:38rem; }
.hero .display{ margin-bottom:var(--s5); --hero-stagger:calc(var(--dur-fast) / 2); }

/* Kinetische Hero-Headline — die Zeilen schwingen beim Seitenaufruf
   nacheinander von unten ein, die hervorgehobene letzte schwingt nach.
   Bewusst ohne [data-reveal]: der Hero steht über der Falz und ist beim
   Aufruf schon da, ein Scroll-Auslöser käme hier zu spät.
   Nur unter .hero, damit die Styleguide-Seite (<p class="display">) unberührt bleibt. */
.hero .hero-line{ display:block; }

@keyframes hero-line-in{
  0%   { transform:translateY(.4em);   opacity:0; }
  70%  { transform:translateY(-.06em); opacity:1; }
  100% { transform:none;               opacity:1; }
}

/* `backwards` statt eines eigenen Ausgangszustands: der Startwert kommt aus
   dem Keyframe und gilt nur während der Verzögerung. Ohne @keyframes-Unter-
   stützung — oder ohne CSS — steht der Titel damit einfach fertig da. */
.hero .hero-line{
  animation:hero-line-in var(--dur-slow) var(--ease) backwards;
  animation-delay:calc(var(--i, 0) * var(--hero-stagger));
}
/* Das Nachschwingen: einen Takt später und etwas länger unterwegs. */
.hero .hero-line--last{
  animation-duration:calc(var(--dur-slow) + var(--dur));
  animation-delay:calc(var(--i, 0) * var(--hero-stagger) + var(--hero-stagger));
}

/* Die globale Reduced-Motion-Regel kürzt nur die Dauer, nicht die Verzögerung —
   ohne diese Ausnahme hingen die Zeilen der Reihe nach kurz auf opacity:0. */
@media (prefers-reduced-motion: reduce){
  .hero .hero-line,
  .hero .hero-line--last{ animation:none; }
}

/* Bildrahmen mit versetztem Passepartout */
.media-frame{
  position:relative; margin:0;
  border-radius:var(--radius-lg);
  isolation:isolate;
}
.media-frame img{
  width:100%; border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--surface-sunken);
  box-shadow:var(--elev-2);
}
.media-frame::after{
  content:""; position:absolute; z-index:-1;
  inset:var(--s6) calc(-1 * var(--s6)) calc(-1 * var(--s6)) var(--s6);
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
}
.media-frame .ring-badge{
  position:absolute; left:calc(-1 * var(--s6)); bottom:var(--s8);
  width:5.5rem; height:5.5rem;
  box-shadow:var(--elev-2);
}
@media (max-width:899px){
  .media-frame::after{ display:none; }
  .media-frame .ring-badge{ width:4rem; height:4rem; left:calc(-1 * var(--s3)); }
}

/* Kopfbild-Wechsler — mehrere Bilder liegen im selben Rasterfeld übereinander
   und blenden ineinander. Ohne Skript bleibt es beim ersten Bild: es trägt
   .is-active schon vom Server.

   Der Rahmen hat das feste Hochformat des Zuschnitts „rovers-portrait“ und die
   Bilder füllen ihn. Sonst bestimmte jedes Bild seine eigene Höhe: Ein
   Querformat in der Reihe ließe den Rahmen springen — und schon das Laden der
   Seite verschöbe alles darunter. */
.hero-slides{ display:grid; }
.hero-slide{ grid-area:1 / 1; }
.hero-slider .hero-slides{ aspect-ratio:1040 / 1387; }
.hero-slider .hero-slide img{ width:100%; height:100%; object-fit:cover; }

/* visibility wandert mit, damit die ruhenden Bilder auch für Screenreader
   und die Tabulator-Reihenfolge weg sind. Sie schaltet erst am Ende der
   Überblendung um — deshalb die Verzögerung statt einer eigenen Dauer. */
.hero-slider .hero-slide{
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-slow) var(--ease),
             visibility 0s linear var(--dur-slow);
}
.hero-slider .hero-slide.is-active{
  opacity:1; visibility:visible;
  transition-delay:0s;
}
/* Bei „Bewegung reduzieren“ kürzt die globale Regel nur die Dauer — ohne dies
   bliebe das alte Bild danach noch einen Moment im Weg. */
@media (prefers-reduced-motion: reduce){
  .hero-slider .hero-slide{ transition-delay:0s; }
}

/* Die Bedienung erscheint erst, wenn das Skript den Wechsel übernommen hat.
   Der dunkle Steg trägt sie über jedem Motiv — Kontrast darf nicht davon
   abhängen, was gerade im Bild ist. */
.hero-slider__controls{
  position:absolute; z-index:var(--z-base);
  right:var(--s3); bottom:var(--s3);
  display:none; align-items:center;
  padding-inline:var(--s1);
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--sidebar) 72%, transparent);
  border:1px solid var(--line-strong);
  backdrop-filter:blur(8px);
}
.hero-slider.is-ready .hero-slider__controls{ display:flex; }

/* 44px Grundfläche, damit die Punkte auch am Telefon sicher zu treffen sind —
   sichtbar ist davon nur der kleine Punkt in der Mitte. */
.hero-slider__dot,
.hero-slider__toggle{
  width:44px; height:44px; padding:0;
  display:grid; place-items:center;
  border:0; background:none; color:var(--text);
  border-radius:var(--radius-pill); cursor:pointer;
}
.hero-slider__dot span{
  width:9px; height:9px; border-radius:50%;
  background:color-mix(in srgb, var(--text) 45%, transparent);
  transition:background-color var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.hero-slider__dot:hover span{ background:color-mix(in srgb, var(--text) 75%, transparent); }
.hero-slider__dot.is-active span{
  background:var(--accent-color); transform:scale(1.4);
}
.hero-slider__toggle .icon{ width:17px; height:17px; }
.hero-slider__toggle:hover{ color:var(--accent-color); }
/* Ein Knopf, zwei Zustände: zu sehen ist immer nur das Symbol der Handlung,
   die der Klick auslöst. */
.hero-slider__toggle .hero-slider__icon--play,
.hero-slider__toggle.is-paused .hero-slider__icon--pause{ display:none; }
.hero-slider__toggle.is-paused .hero-slider__icon--play{ display:block; }

/* Auf schmalen Bildschirmen sitzt das Ringabzeichen näher am Rand — die
   Bedienung rückt entsprechend mit nach innen. */
@media (max-width:899px){
  .hero-slider__controls{ right:var(--s2); bottom:var(--s2); }
}

/* Kompakter Kopf für Unterseiten */
.page-hero{
  position:relative; overflow:clip;
  padding-block:clamp(2.5rem,5vw,4rem) clamp(2.5rem,5vw,4rem);
  background:
    radial-gradient(820px 460px at 88% -22%,
      color-mix(in srgb, var(--invert-accent) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--sidebar) 0%,
      color-mix(in srgb, var(--sidebar) 88%, var(--primary)) 100%);
}
.page-hero .ring-deco{ right:-10%; top:-42%; width:min(30rem,80vw); aspect-ratio:1; }
.page-hero .wrap{ position:relative; z-index:var(--z-base); }
.page-hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); line-height:1.1;
  letter-spacing:-.02em; margin:0 0 var(--s5); max-width:30ch;
  color:var(--text);
}
.page-hero .lede{ margin-bottom:0; }

.breadcrumb{ margin:0 0 var(--s5); }
.breadcrumb ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  list-style:none; margin:0; padding:0;
  font-size:var(--t-xs); color:var(--text-muted);
}
.breadcrumb li{ display:flex; align-items:center; gap:var(--s2); }
.breadcrumb li + li::before{ content:"/"; color:var(--line-strong); }
.breadcrumb a{ color:var(--text-muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--accent-color); text-decoration:underline; }
.breadcrumb [aria-current="page"]{ color:var(--text); }

/* ============================================================
   12 · SCOREBOARD — nächste Termine wie eine Anzeigetafel
   ============================================================ */
/* Terminzeilen — die nächsten buchbaren Termine, eine Zeile je Terminart.
   Drei Spalten in jeder Zeile: wann (Datum, Uhrzeit, Ort), Motiv, was und zu
   welchem Preis. Eine Liste von Zeilen statt eines Kartenrasters, weil die
   Termine untereinander verglichen werden: Das Datum steht in jeder Zeile an
   derselben Stelle, der Titel bekommt die Breite einer Überschrift, und die
   Trennlinien halten die Liste zusammen, wo vorher jede Karte ihren eigenen
   Rahmen zog. */
.eventcards{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line-strong);
}

.eventcard{
  display:grid; gap:var(--s5);
  padding-block:var(--s8);
  border-bottom:1px solid var(--line-strong);
}

/* Ab hier stehen die drei Spalten nebeneinander: Die Datumsspalte ist auf den
   längsten Fall bemessen — „28.02.2026–01.03.2026“ misst 173px, die 13rem
   lassen ihm Luft, auch solange die Ersatzschrift lädt —, das Motiv behält
   seine 16:9 und weicht als einziges zurück, wenn es eng wird, der Rest geht
   an den Text. Erst ab 1024px bleiben der Textspalte danach noch rund 20rem —
   darunter wäre die Überschrift in einer Schlucht gefangen, und die drei
   Spalten stapeln in Lesereihenfolge.
   Die Spalten werden ausdrücklich zugewiesen: Fehlt einem Termin das Motiv
   (kein Bild, kein Rückfall), rutschte der Text sonst eine Spalte nach links
   und die Liste verlöre ihre Flucht. */
@media (min-width:1024px){
  .eventcard{
    grid-template-columns:13rem minmax(0, 26rem) minmax(22rem, 1fr);
    gap:var(--s8);
    padding-block:var(--s10);
  }
  .eventcard__when{ grid-column:1; text-align:right; }
  .eventcard__media{ grid-column:2; }
  .eventcard__body{ grid-column:3; }
}

/* --- Wann-Spalte ---------------------------------------------------------
   Datum und Uhrzeit oben, der Ort am Fuß der Spalte. Der Akzentstrich darüber
   markiert den Anfang der Zeile: Zwischen zwei Haarlinien braucht die Liste
   einen Punkt, an dem das Auge einsteigt — im Kartenraster tat das der
   Rahmen. */
.eventcard__when{
  display:flex; flex-direction:column; gap:var(--s2);
}
.eventcard__when::before{
  content:""; display:block;
  width:4.5rem; height:5px;
  margin-bottom:var(--s4);
  background:var(--accent-color);
}
@media (min-width:1024px){
  .eventcard__when::before{ margin-left:auto; }
}

/* Das Datum vollständig, mit tabellarischen Ziffern: Untereinander gelesen
   ist die Spalte ein Kalenderauszug, und dort stehen die Ziffern gleicher
   Stellen übereinander. */
.eventcard__date{
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--t-sm); font-weight:700;
  line-height:var(--lh-snug);
  font-variant-numeric:tabular-nums;
  color:var(--text);
}
/* Wochentag und Datum sind je für sich unteilbar, die Fuge dazwischen ist die
   einzige Umbruchstelle: „12.–13.09.“ bricht sonst hinter dem Strich
   auseinander und liest sich als zwei Termine. Umbrechen darf die Zeile aber,
   sonst schiebt sich ein monatsübergreifender Termin über das Motiv. */
.eventcard__date span{ white-space:nowrap; }
.eventcard__time{
  margin:0;
  font-size:var(--t-sm); line-height:var(--lh-snug);
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
/* Der Ort steht am Fuß der Spalte, auf einer Linie mit der Buchungszeile und
   der Unterkante des Motivs. */
.eventcard__place{
  margin:var(--s4) 0 0;
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted);
  text-wrap:balance;
}
@media (min-width:1024px){
  .eventcard__place{ margin-top:auto; padding-top:var(--s5); }
}

/* --- Textspalte ---------------------------------------------------------- */
.eventcard__body{
  display:flex; flex-direction:column; gap:var(--s3);
}
/* Der Titel im Schnitt der übrigen Überschriften — die Vorlage setzt ihn in
   Versalien, das ist die Schrift jener Marke. Hier trüge dieselbe Zeile eine
   fremde Stimme in eine Seite, die ihre Überschriften in Fraunces setzt. */
.eventcard__title{
  margin:0;
  font-family:var(--font-display); font-weight:600;
  font-size:var(--t-xl); line-height:var(--lh-snug);
  letter-spacing:-.015em;
  color:var(--text);
  text-wrap:balance;
}
.eventcard__detail{
  margin:0;
  font-size:var(--t-md); color:var(--text-muted);
  text-wrap:pretty; max-width:52ch;
}

/* --- Motiv --------------------------------------------------------------- */
.eventcard__media{
  position:relative;
  /* Seitenverhältnis reserviert die Höhe vor dem Laden — ohne es rückt beim
     Nachladen die halbe Seite. */
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:var(--radius);
  /* Sichtbar, solange das Motiv lädt, und wenn eines fehlt. */
  background:var(--sidebar);
}
/* Die Maße kommen vom Band, nicht vom Bild: `img{ height:auto }` aus den
   Grundlagen (Abschnitt 5) würde das Motiv sonst in seiner eigenen Höhe in
   den Kasten stellen, und der Hintergrund bliebe darunter stehen. min-height
   fängt zusätzlich Regeln ab, die `height` von außen zurücksetzen. */
.eventcard__media img{
  display:block;
  width:100%; max-width:none;
  height:100%; min-height:100%;
  object-fit:cover; object-position:center;
}

/* --- Fußzeile ------------------------------------------------------------
   Restplätze links, Preis und Buchung rechts, am Fuß der Textspalte. Ohne
   eigene Fläche und ohne Trennlinie: Im Zeilenlayout schließt die Haarlinie
   der Liste die Zeile ab — eine zweite Kante darüber zerschnitte sie. */
.eventcard__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  margin-top:auto; padding-top:var(--s5);
}
/* Schmal untereinander: die Platzleiste über der vollen Breite, darunter
   Preis links und Schaltfläche rechts. Nebeneinander gedrängt bliebe links
   vom Preis ein Loch, sobald die Zeile umbricht. */
.eventcard__seats{ flex:1 1 100%; }
.eventcard__action{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5); flex:1 1 100%;
}
@media (min-width:1024px){
  .eventcard__seats{ flex:0 1 auto; }
  .eventcard__action{ flex:0 0 auto; margin-left:auto; }
}
.eventcard__price{
  margin:0;
  font-family:var(--font-mono); font-size:var(--t-md); font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--text);
  white-space:nowrap;
}
/* Die Buchen-Schaltfläche kommt aus der Terminliste und trägt dort
   `btn-compact` (38px, für Tabellenzeilen gedacht). Hier ist sie die
   Hauptaktion der Zeile und bekommt die volle Größe zurück. */
.eventcard__foot .btn{
  min-height:48px; padding:0 var(--s6); font-size:var(--t-sm);
}
.eventcard__foot .btn .icon{ width:18px; height:18px; }

/* --- Platzleiste ---------------------------------------------------------
   Die eine auffällige Stelle der Karte: Wie viel noch frei ist, soll man
   sehen und nicht erst lesen. Eine Marke je freiem Platz — eine kurze Reihe
   warnt von selbst, ohne eine Gesamtzahl zu behaupten, die niemand kennt.
   Die Farbe wiederholt nur, was die Länge schon sagt; sie trägt die
   Information nicht allein. */
/* Marken und Text nebeneinander — untereinander kostete jede Karte 25px
   Höhe, ohne etwas hinzuzufügen. */
.seatbar{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s1) var(--s3);
}
.seatbar__marks{
  display:flex; flex-wrap:wrap; gap:3px;
}
.seatbar__mark{
  width:6px; height:1.125rem; border-radius:2px;
  /* Viele freie Plätze sind die ruhige Nachricht: eine lange Reihe in der
     Signalfarbe wäre lauter als die kurze, obwohl sie das Gegenteil meint.
     Deshalb trägt nur der knappe Fall Farbe. */
  background:var(--line-strong);
}
.seatbar--knapp .seatbar__mark{ background:var(--status-info); }

.seatbar__text{
  font-size:var(--t-xs); color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.seatbar--knapp .seatbar__text{ color:var(--text); font-weight:600; }

/* ============================================================
   13 · KARTEN
   ============================================================ */
.card{
  position:relative;
  display:flex; flex-direction:column;
  padding:var(--s8);
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--elev-1);
  transition:border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.card h3{
  font-family:var(--font-display); font-size:var(--t-xl); font-weight:600;
  line-height:var(--lh-snug); margin:0 0 var(--s3); color:var(--text);
}
.card p{ color:var(--text-muted); font-size:var(--t-sm); margin:0 0 var(--s4); }
.card .meta{
  display:block; margin-top:auto; padding-top:var(--s4);
  font-family:var(--font-mono); font-size:var(--t-xs);
  color:var(--accent-color); font-weight: 900;
}
.card--link:hover{
  border-color:var(--accent-color);
  transform:translateY(-2px);
  box-shadow:var(--elev-2);
}

/* Karte als Ganzes klickbar, ohne verschachtelte Links */
.card--link{ cursor:pointer; }
.card--link .stretch::after{ content:""; position:absolute; inset:0; z-index:1; }
.card .stretch{ color:inherit; text-decoration:none; }
.card .stretch:focus-visible{ outline-offset:5px; }
.card > .btn{ align-self:flex-start; }

/* Kurzer Hinweistext unter einem Abschnitt */
.note-inline{
  display:flex; gap:var(--s3); align-items:flex-start;
  max-width:64ch; font-size:var(--t-sm); color:var(--text-muted);
}
.note-inline .icon{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--accent-color); }

/* Karte mit Bild oben */
.card--media{ padding:0; overflow:hidden; }
.card--media > img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.card--media .card-body{ padding:var(--s6); }
.card--media .card-body h3{
  font-family:var(--font-display); font-size:var(--t-xl); font-weight:600;
  margin:0 0 var(--s3); color:var(--text);
}
.card--media .card-body p{ color:var(--text-muted); font-size:var(--t-sm); margin:0; }
.card--media .eyebrow{ margin-bottom:var(--s3); }

/* --- Drei gleichwertige Einstiege (keine Reihenfolge!) --- */
.entry-grid{ display:grid; gap:var(--s6); }
@media (min-width:900px){ .entry-grid{ grid-template-columns:repeat(3,1fr); } }
.entry-card{ gap:0; }
.entry-card .entry-mark{
  width:2.75rem; height:2.75rem; margin-bottom:var(--s6);
}
.entry-card > p{ flex:1 1 auto; }          /* schiebt den CTA auf gleiche Höhe */
.entry-card .btn{ margin-top:var(--s6); align-self:flex-start; }
.entry-card .meta{ margin-top:0; padding-top:0; margin-bottom:var(--s2); }

/* --- Feature-Raster --- */
.feature-grid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--elev-1);
}
.feature{ background:var(--surface-raised); padding:var(--s8) var(--s6); }
.feature .icon{
  width:28px; height:28px; margin-bottom:var(--s5);
  color:var(--accent-color); stroke-width:1.6;
}
.feature h3{
  font-family:var(--font-display); font-size:var(--t-lg); font-weight:600;
  margin:0 0 var(--s2); color:var(--text);
}
.feature p{ color:var(--text-muted); font-size:var(--t-sm); margin:0; }

/* --- News --- */
.news-card{
  overflow:hidden; padding:0;
  background:var(--surface-raised);
}
.news-card .thumb{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--surface-sunken);
}
.news-card .thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.news-card--link:hover .thumb img,
.card--link:hover .thumb img{ transform:scale(1.04); }
.news-card .body{ display:flex; flex-direction:column; flex:1; padding:var(--s6); }
.news-card .kicker{ margin-bottom:var(--s3); }
.news-card h3{ font-size:var(--t-lg); margin:0 0 var(--s3); }
.news-card p{ margin-bottom:var(--s5); }
.news-card .link-arrow{ margin-top:auto; }

/* --- Einzelbeitrag ---
   Der Beitrag steht in der vollen Container-Breite, sein Inhalt aber in
   einer begrenzten Spalte an derselben linken Kante wie Brotkrümel,
   Überschrift und Vorspann im Seitenkopf darüber. Ohne das säße der Text
   in einer eigenen, mittig zentrierten Spalte — der Sprung von rund
   220 px ist genau das, was den weißen Bereich vom Kopf abtrennt. */
.article-col{ max-width:44rem; }

/* Datum und Kennzeichen sitzen als ruhige Zeile über dem Beitrag und
   schließen den Abstand zum Seitenkopf. */
.article-col > .kicker{ margin-bottom:var(--s8); }

/* `margin:0` setzt den Vorgaberand des Browsers für <figure> zurück
   (1em 40px) — der schob das Bild sonst gegen die Textkante ein.
   Das 16:10-Fenster ist dasselbe wie in Newskarte und Medienkarte, damit
   das Beitragsbild kein anderes Format hat als die Bilder drumherum. */
.article-figure{ margin:0 0 var(--s10); }
.article-figure img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/10; object-fit:cover;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--elev-1);
}

/* Abschluss des Beitrags: feine Linie statt bloßem Abstand */
.article-nav{
  margin-top:var(--s12); padding-top:var(--s8);
  border-top:1px solid var(--line);
}

/* --- Personen / Ansprechpartner --- */
.person-card{ gap:0; }
.person-card .role{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-color);
  margin:0 0 var(--s3);
}
.person-card h3{ font-size:var(--t-lg); margin:0 0 var(--s3); }
/* Profilbilder sind freiwillig: ohne hinterlegtes Bild bleibt die Karte
   unverändert, statt einen leeren Platzhalter zu zeigen. Das Bereichs-
   kürzel steht immer zuoberst — so beginnt jede Karte im Raster auf
   derselben Linie, ob mit Foto oder ohne. */
.person-portrait{
  display:block; width:7rem; height:7rem;
  margin:var(--s5) 0 var(--s5);
  border-radius:50%; object-fit:cover;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--elev-1);
}
/* Mit Foto führt die Person die Karte an, die Funktion rückt darunter. */
.person-card--focus h3{ font-size:var(--t-xl); margin:0 0 var(--s1); }
.person-card--focus .person-function{
  font-size:var(--t-sm); font-weight:500; color:var(--text);
  margin:0 0 var(--s3);
}
/* Kontaktlisten stehen nicht nur in Personenkarten, sondern auch in der
   Seitenspalte der Kontaktseite — deshalb ohne .person-card davor. */
.contact{
  display:flex; flex-direction:column; gap:var(--s1);
  margin:0; padding:0; list-style:none;
  font-size:var(--t-sm); color:var(--text-muted);
}
.contact a{
  display:inline-flex; align-items:center; gap:var(--s2); min-height:44px;
  color:var(--accent-color); text-decoration:none;
}
.contact a:hover{ text-decoration:underline; }
/* Teilen sich zwei Personen eine Zuständigkeit, ordnet der Name die
   darunter stehenden Kontaktwege zu. */
.contact-name{
  display:flex; align-items:center; gap:var(--s3);
  font-weight:600; color:var(--text);
  margin-top:var(--s3);
}
.contact-name:first-child{ margin-top:0; }
/* Zwei Ansprechpersonen je Karte: Das Bild steht neben dem Namen, damit
   die Zuordnung eindeutig bleibt. */
.contact-name + .contact-name,
.contact li:not(.contact-name) + .contact-name{
  margin-top:var(--s4); padding-top:var(--s4);
  border-top:1px solid var(--line);
}
.contact-avatar{
  width:3.5rem; height:3.5rem; flex:none;
  border-radius:50%; object-fit:cover;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--elev-1);
}

/* --- Preise --- */
.price-card{ gap:0; }
.price-card h3{ font-size:var(--t-lg); margin:0 0 var(--s2); }
.price-card .amount{
  font-family:var(--font-mono); font-size:clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem);
  font-weight:500; color:var(--accent-color); margin:0 0 var(--s3);
  font-variant-numeric:tabular-nums;
}
.price-card .amount small{
  font-family:var(--font-body); font-size:var(--t-sm); font-weight:400;
  color:var(--text-muted);
}

/* --- Kennzahlen --- */
/* Der Zahlenstreifen steht oft direkt unter einem Abschnitt mit derselben
   Hintergrundfläche. Die Linie darüber gibt ihm die Kante, die die Fläche
   allein nicht hergibt — im Hellmodus ebenso wie im Dunkelmodus.
   Aufbau: <dl> aus Beschriftung (dt) und Zahl (dd). Im Quelltext steht die
   Beschriftung zuerst, damit der Screenreader „Gelände: 5 ha“ liest;
   sichtbar steht die Zahl oben (order). */
.stats{ display:grid; }
.stat-row{
  display:grid; margin:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s8) var(--s6);
  padding-top:var(--s6);
  border-top:1px solid var(--line-strong);
}
/* Zwei Spalten bleiben auf dem Telefon: vier Zahlen untereinander wären ein
   Streifen, den niemand mehr als Gruppe wahrnimmt. */
@media (min-width:48rem){
  .stat-row{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
    gap:var(--s8);
  }
}
.stat{ display:grid; gap:var(--s2); }
.stat .num{
  order:-1; margin:0;
  font-family:var(--font-display); font-size:clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--accent-color);
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
}
/* Die Einheit gehört zur Zahl, ist aber nicht die Zahl: kleiner, aus der
   Textschrift und gedämpft — wie das „im Jahr“ an den Preisen. */
.stat .num .unit{
  font-family:var(--font-body); font-size:var(--t-sm); font-weight:400;
  letter-spacing:0; color:var(--text-muted);
}
.stat .lbl{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted);
}
/* Die Zahlen setzen sich versetzt nach oben — der Streifen wird einmal von
   links nach rechts gelesen, statt als Block zu erscheinen. Nur die
   Bewegung ist versetzt; das Einblenden macht der Streifen als Ganzes. */
.js .stats[data-reveal] .stat{
  transform:translateY(10px);
  transition:transform var(--dur-slow) var(--ease);
}
.js .stats[data-reveal].is-visible .stat{ transform:none; }
.js .stats[data-reveal] .stat:nth-child(2){ transition-delay:40ms; }
.js .stats[data-reveal] .stat:nth-child(3){ transition-delay:80ms; }
.js .stats[data-reveal] .stat:nth-child(4){ transition-delay:120ms; }
.js .stats[data-reveal] .stat:nth-child(n+5){ transition-delay:160ms; }
@media (prefers-reduced-motion: reduce){
  .js .stats[data-reveal] .stat{ transform:none; transition:none; }
}

/* ============================================================
   14 · BILDBÄNDER
   ============================================================ */
.band{
  position:relative; overflow:clip;
  min-height:clamp(18rem,38vw,28rem);
  display:grid; align-items:center;
  isolation:isolate;
}
.band > img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
}
.band::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--sidebar) 96%, transparent) 0%,
    color-mix(in srgb, var(--sidebar) 84%, transparent) 42%,
    color-mix(in srgb, var(--sidebar) 46%, transparent) 100%);
}
.band .wrap{ padding-block:var(--section-y); }
.band h2{
  font-family:var(--font-display); font-size:var(--t-2xl); font-weight:600;
  line-height:var(--lh-snug); letter-spacing:-.015em;
  margin:0 0 var(--s5); max-width:22ch; color:var(--text);
}
.band p{ color:var(--text-muted); max-width:48ch; margin:0 0 var(--s8); }

/* Auf schmalen Schirmen läuft der Text über die volle Breite —
   dort braucht es einen gleichmäßig deckenden Schleier, sonst
   konkurriert das Foto mit der Schrift. */
@media (max-width:899px){
  .band::before{
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--sidebar) 92%, transparent) 0%,
      color-mix(in srgb, var(--sidebar) 97%, transparent) 100%);
  }
}

/* Schmales Zierband ohne Text */
.band--rule{ min-height:clamp(9rem,18vw,14rem); }
.band--rule::before{ background:color-mix(in srgb, var(--sidebar) 62%, transparent); }

/* Bildunterschrift / Credit */
.media-credit{
  font-size:var(--t-xs); color:var(--text-muted); margin:var(--s3) 0 0;
}

/* ============================================================
   14b · LANDKARTE (OpenStreetMap)
   Die Bibliothek liegt im Theme, die Kacheln kommen von außen.
   Deshalb steht vor dem Laden eine Zustimmung — bis dahin ist der
   Rahmen eine ganz normale, ruhige Fläche ohne Fremdverbindung.
   ============================================================ */
.mapview{ margin:0; }

.mapview__frame{
  position:relative; isolation:isolate;
  /* Fester Kasten von Anfang an: nichts springt beim Nachladen. */
  aspect-ratio:16 / 9;
  min-height:18rem;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-sunken);
  box-shadow:var(--elev-2);
  overflow:hidden;
}
@media (max-width:599px){
  .mapview__frame{ aspect-ratio:4 / 3; min-height:16rem; }
}

.mapview__canvas{ position:absolute; inset:0; }

/* --- Über die volle Fensterbreite ---------------------------------------- */
/* Bricht aus der Inhaltsbreite aus. Der Abschnitt bekommt overflow-x:clip,
   weil 100vw die Breite der Bildlaufleiste mitzählt und sonst waagerecht
   gescrollt würde. */
.mapview--bleed{
  width:100vw;
  margin-inline:calc(50% - 50vw);
}
/* Eine Karte über die volle Fensterbreite ist selbst schon der Abschnitt.
   Das Abschnittspolster darüber und darunter würde sie als Kasten in der
   Seite absetzen statt sie anschließen zu lassen — deshalb randlos. */
.section:has(.mapview--bleed){ overflow-x:clip; padding-block:0; }

.mapview--bleed .mapview__frame{
  /* So hoch wie ein Bildband. Dessen Höhe ist inhaltsgetrieben — gemessen
     entspricht sie ab 768px Fensterbreite zwei Abschnittspolstern plus
     rund 21,5rem Textblock. Deshalb dieselbe Rechnung statt einer festen
     Zahl: Ändert sich --section-y, wandert die Karte mit. */
  aspect-ratio:auto;
  height:calc(2 * var(--section-y) + 21.5rem);
  min-height:0;
  border-inline:0; border-radius:0;
  box-shadow:none;
}
@media (max-width:599px){
  .mapview--bleed .mapview__frame{ aspect-ratio:auto; height:calc(2 * var(--section-y) + 21.5rem); }
}

/* --- Zustimmung --------------------------------------------------------- */
.mapview__gate{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  padding:var(--s6);
  background:var(--surface-sunken);
  text-align:center;
}
.mapview__gate-inner{ max-width:32rem; }
.mapview__gate-icon{
  width:2rem; height:2rem; color:var(--accent-color);
  margin-bottom:var(--s3);
}
.mapview__gate h3{
  font-size:var(--t-lg); margin:0 0 var(--s2);
}
.mapview__gate p{
  font-size:var(--t-sm); color:var(--text-muted);
  margin:0 0 var(--s5); text-wrap:pretty;
}
.mapview__gate .btn{ margin-inline:auto; }
.mapview__gate-alt{ margin:var(--s4) 0 0; font-size:var(--t-xs); }
.mapview__gate-alt a{ color:var(--text-muted); }
.mapview__gate-alt a:hover{ color:var(--accent-color); }

.mapview__gate[hidden]{ display:none; }

/* --- Markierung --------------------------------------------------------- */
/* Leaflet setzt die Position, das Aussehen kommt vollständig von hier. */
.map-pin{
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  /* Die Icon-Box ist breiter als der Punkt. Sie darf das Ziehen der Karte
     drumherum nicht abfangen — greifbar sind nur Punkt und Beschriftung. */
  pointer-events:none;
}
.map-pin__dot{
  position:relative;
  width:1.125rem; height:1.125rem; border-radius:var(--radius-pill);
  background:var(--accent-color);
  border:2px solid var(--card);
  box-shadow:0 1px 6px rgba(0,0,0,.45);
  transition:transform var(--dur-fast) var(--ease);
  pointer-events:auto;
}
/* Der Punkt ist 18px groß — die Fläche zum Antippen 44px. */
.map-pin__dot::after{
  content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.leaflet-marker-icon:hover .map-pin__dot,
.leaflet-marker-icon:focus-visible .map-pin__dot{ transform:scale(1.12); }
.leaflet-marker-icon:focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:var(--radius-pill);
}
.map-pin__label{
  pointer-events:auto;
  padding:var(--s1) var(--s3);
  border-radius:var(--radius-pill);
  border:1px solid var(--line);
  background:var(--card); color:var(--card-foreground);
  font-size:var(--t-xs); font-weight:600; line-height:1.4;
  white-space:nowrap;
  box-shadow:var(--elev-1);
}

/* --- Leaflet an das Design-System angleichen ----------------------------- */
.mapview .leaflet-container{
  font-family:var(--font-body); font-size:var(--t-xs);
  background:var(--surface-sunken);
}
.mapview .leaflet-container a{ color:var(--accent-color); }

/* Leaflet bringt für Touch-Geräte eigene Maße mit, die genauso spezifisch
   sind wie eine Regel mit zwei Klassen. Da sein Stylesheet erst beim Laden
   der Karte in den <head> kommt, gewinnt es jedes Unentschieden. Deshalb
   hier durchgehend über .leaflet-container mitqualifizieren. */
.mapview .leaflet-container .leaflet-bar a{
  width:2.75rem; height:2.75rem; line-height:2.75rem;   /* 44px statt 30px */
  background:var(--card); color:var(--card-foreground);
  border-bottom-color:var(--line);
  font-size:1.125rem;
}
.mapview .leaflet-container .leaflet-bar a:hover{ background:var(--surface-sunken); }
.mapview .leaflet-container .leaflet-bar a:focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:2px; z-index:1;
}
.mapview .leaflet-container .leaflet-bar{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--elev-1);
}

.mapview .leaflet-container .leaflet-control-attribution{
  background:color-mix(in srgb, var(--card) 88%, transparent);
  color:var(--text-muted);
  padding:2px var(--s2);
  border-top-left-radius:var(--radius-sm);
}

/* Im Dunkelmodus wären die hellen Kacheln ein Scheinwerfer in der Seite.
   Gedämpft wird ausschließlich die Kachelebene — Markierung, Bedienelemente
   und der Herkunftsnachweis behalten ihre Farben und ihren Kontrast. */
:root[data-theme="dark"] .mapview .leaflet-tile-pane{
  filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mapview .leaflet-tile-pane{
    filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8);
  }
}

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

/* Kein :has()? Dann bleibt die Karte in der Inhaltsbreite — lieber etwas
   schmaler als eine Seite, die sich waagerecht schieben lässt. */
@supports not selector(:has(*)){
  .mapview--bleed{ width:auto; margin-inline:0; }
}

/* ============================================================
   15 · TABELLEN
   ============================================================ */
.table-scroll{
  position:relative;
  overflow-x:auto; overscroll-behavior-x:contain;
  background:var(--surface-raised);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--elev-1);
  -webkit-overflow-scrolling:touch;
}
.table-scroll:focus-visible{ outline-offset:2px; }
.table-hint{
  display:block; margin:var(--s3) 0 0;
  font-size:var(--t-xs); color:var(--text-muted);
}
@media (min-width:768px){ .table-hint{ display:none; } }

table.data{
  width:100%; min-width:36rem;
  border-collapse:collapse; font-size:var(--t-sm);
}
table.data caption{
  text-align:left; padding:var(--s4) var(--s6);
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-color);
  border-bottom:1px solid var(--line);
}
table.data th,
table.data td{
  text-align:left; padding:var(--s4) var(--s6);
  border-bottom:1px solid var(--line); vertical-align:top;
}
table.data thead th{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent-color); background:var(--accent-wash);
  white-space:nowrap;
}
table.data tbody tr:last-child td{ border-bottom:0; }
table.data tbody tr:hover{ background:var(--accent-wash); }
table.data .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
table.data th[scope="row"]{
  font-weight:600; color:var(--text);
  font-size:var(--t-sm); letter-spacing:0; text-transform:none;
}

/* ============================================================
   16 · STATUS-KENNZEICHNUNG
   Farbe ist nie das einzige Merkmal — immer Text + Symbol
   ============================================================ */
.tag{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s1) var(--s3);
  font-size:var(--t-xs); font-weight:600;
  white-space:nowrap;
  border:1px solid currentColor; border-radius:var(--radius-pill);
}
.tag .icon{ width:13px; height:13px; flex:none; }
.tag-open{ color:var(--status-ok); }
.tag-full{ color:var(--status-bad); }
.tag-info{ color:var(--status-info); }

.chip-row{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:0 0 var(--s8); padding:0; list-style:none; }
.chip{
  display:inline-flex; align-items:center; min-height:44px;
  padding:var(--s2) var(--s5);
  font-size:var(--t-sm); font-weight:500;
  color:var(--text-muted); text-decoration:none;
  background:var(--surface-raised); border:1px solid var(--line);
  border-radius:var(--radius-pill); cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease),
             background-color var(--dur) var(--ease);
}
.chip:hover{ color:var(--text); border-color:var(--accent-color); }
.chip[aria-pressed="true"]{
  color:var(--primary-foreground); background:var(--primary);
  border-color:var(--primary); font-weight:600;
}
.on-invert .chip[aria-pressed="true"]{
  color:var(--sidebar); background:var(--invert-accent); border-color:var(--invert-accent);
}

.pill-list{
  display:flex; flex-wrap:wrap; gap:var(--s2);
  list-style:none; margin:var(--s6) 0 0; padding:0;
}
.pill-list li{
  padding:var(--s2) var(--s4);
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-muted);
  background:var(--surface-raised);
  border:1px solid var(--line); border-radius:var(--radius-pill);
}

/* Platzhalter für noch fehlende Inhalte (Rechtstexte etc.) */
.todo-note{
  display:flex; gap:var(--s4); align-items:flex-start;
  padding:var(--s5) var(--s6);
  background:var(--accent-wash);
  border:1px dashed var(--accent-color);
  border-radius:var(--radius);
  font-size:var(--t-sm); color:var(--text-muted);
}
.todo-note .icon{ width:20px; height:20px; flex:none; color:var(--accent-color); margin-top:2px; }
.todo-note strong{ color:var(--text); display:block; margin-bottom:var(--s1); }

/* ============================================================
   17 · LISTEN & ABLÄUFE
   ============================================================ */
.step-list{ list-style:none; counter-reset:s; margin:0; padding:0; }
.step-list > li{
  counter-increment:s; position:relative;
  padding-left:3.25rem; padding-bottom:var(--s8);
}
.step-list > li:last-child{ padding-bottom:0; }
.step-list > li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:0;
  display:flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem;
  font-family:var(--font-mono); font-size:var(--t-xs); font-weight:500;
  color:var(--accent-color);
  border:1.5px solid var(--accent-color); border-radius:50%;
}
/* Verbindungslinie zwischen den Schritten */
.step-list > li:not(:last-child)::after{
  content:""; position:absolute; left:calc(1.125rem - 1px); top:2.5rem; bottom:var(--s3);
  width:1px; background:var(--line-strong);
}
.step-list h3{
  font-family:var(--font-display); font-size:var(--t-lg); font-weight:600;
  margin:.25rem 0 var(--s2); color:var(--text);
}
.step-list p{ margin:0; font-size:var(--t-sm); color:var(--text-muted); }

.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.check-list li{
  display:flex; gap:var(--s3); align-items:flex-start;
  font-size:var(--t-sm); color:var(--text-muted);
}
.check-list .icon{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--accent-color); }

.timeline{ list-style:none; margin:0; padding:0; }
.timeline > li{
  position:relative; display:grid; gap:var(--s2);
  padding:0 0 var(--s8) var(--s10);
  border-left:1px solid var(--line-strong);
}
.timeline > li:last-child{ padding-bottom:0; border-left-color:transparent; }
.timeline > li::before{
  content:""; position:absolute; left:-5px; top:.55rem;
  width:9px; height:9px; border-radius:50%;
  background:var(--accent-color);
}
.timeline .year{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-color);
}
.timeline h3{ font-family:var(--font-display); font-size:var(--t-lg); font-weight:600; margin:0; color:var(--text); }
.timeline p{ margin:0; font-size:var(--t-sm); color:var(--text-muted); }

/* --- Wochenraster --- */
.weekgrid{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--elev-1);
}
.weekgrid .day{
  background:var(--surface-raised); padding:var(--s6);
  display:flex; flex-direction:column; gap:var(--s2); position:relative;
}
.weekgrid .when{
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  font-family:var(--font-mono); font-size:var(--t-xs); font-weight:500;
  color:var(--accent-color); font-variant-numeric:tabular-nums;
}
.weekgrid h3{ font-family:var(--font-display); font-size:var(--t-lg); font-weight:600; margin:0; }
.weekgrid p{ margin:0; font-size:var(--t-sm); color:var(--text-muted); }

/* Die Karte, deren Termin heute stattfindet, führt den Blick — eine Kante
   und ein auslaufender Farbschleier, kein zweiter Kartenstil. */
.weekgrid .day--now{ background:linear-gradient(180deg,var(--accent-wash),transparent 42%),var(--surface-raised); }
.weekgrid .day--now::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent-color);
}
.weekgrid .day--pause .when,
.weekgrid .day--pause h3{ opacity:.6; }

/* Fußzeile der Karte: der nächste tatsächliche Termin aus dem Kalender. */
.weekgrid .next{
  margin-top:auto; padding-top:var(--s4);
  border-top:1px dashed var(--line);
  display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  font-family:var(--font-mono); font-size:var(--t-xs);
  font-variant-numeric:tabular-nums; color:var(--text-muted);
}
.weekgrid .next b{ color:var(--text); font-weight:500; }
.weekgrid .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--status-ok); flex:none; }
.weekgrid .dot--pause{ background:var(--wa-gold); }

.weeklegend{
  display:flex; gap:var(--s8); flex-wrap:wrap; align-items:center;
  margin:var(--s5) 0 0; font-size:var(--t-xs); color:var(--text-muted);
}
.weeklegend span{ display:inline-flex; align-items:center; gap:var(--s2); }
.weeklegend .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--status-ok); flex:none; }
.weeklegend .dot--pause{ background:var(--wa-gold); }

/* --- Kennzeichnungen im Wochenraster --- */
.chip{
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:.1rem .5rem; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-size:.6875rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}
.chip--now{ background:var(--accent-color); color:var(--primary-foreground); }
.chip--pause{ background:color-mix(in srgb,var(--wa-gold) 26%,transparent); color:var(--text); }
.chip--irr{ background:var(--surface-sunken); color:var(--text-muted); }

/* --- Terminliste unter dem Wochenraster --- */
.agenda{
  margin-top:var(--s16); overflow:hidden;
  background:var(--surface-raised);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--elev-1);
}
.agenda__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
  flex-wrap:wrap; padding:var(--s5) var(--s6); border-bottom:1px solid var(--line);
}
.agenda__head strong{ font-family:var(--font-display); font-size:var(--t-base); font-weight:600; }
.agenda__head span{ font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-muted); }

.agenda .wk{
  padding:var(--s3) var(--s6); background:var(--surface-sunken);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);
}
.agenda .row{
  display:grid; grid-template-columns:5.5rem 8rem 1fr auto; gap:var(--s4);
  align-items:baseline; padding:var(--s4) var(--s6);
  border-bottom:1px solid var(--line); font-size:var(--t-sm);
}
.agenda .row:last-child{ border-bottom:0; }
.agenda time,
.agenda .hrs{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.agenda time{ font-weight:500; color:var(--text); }
.agenda .hrs{ color:var(--text-muted); }
.agenda .who{ color:var(--text-muted); font-size:var(--t-xs); }
.agenda .kind{ font-size:var(--t-xs); color:var(--text-muted); white-space:nowrap; }
.agenda .row--today{ background:var(--accent-wash); }
/* Arbeitstage und Wettkämpfe: Das Gelände ist belegt — die Zeile soll auffallen,
   ohne wie eine Fehlermeldung zu wirken. */
.agenda .row--blocked{ background:color-mix(in srgb,var(--status-bad) 6%,transparent); }
.agenda .row--blocked .what{ color:var(--status-bad); font-weight:500; }
.agenda .row--blocked .who{ color:var(--status-bad); opacity:.85; }

@media (max-width:640px){
  .agenda .row{ grid-template-columns:1fr; gap:var(--s1); }
  .agenda time,
  .agenda .hrs{ display:inline; }
  .agenda .hrs::before{ content:"· "; }
  .agenda .kind{ margin-top:var(--s1); }
}

/* --- Kalender abonnieren --- */
.subscribe{
  margin-top:var(--s10); display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  padding:var(--s6); border:1px dashed var(--line-strong); border-radius:var(--radius);
  background:var(--accent-wash);
}
.subscribe p{ margin:0; flex:1 1 22rem; font-size:var(--t-sm); color:var(--text-muted); }
.subscribe strong{ color:var(--text); }

.calstamp{
  margin:var(--s5) 0 0; font-family:var(--font-mono);
  font-size:var(--t-xs); color:var(--text-muted);
}

/* ============================================================
   18 · AKKORDEON
   ============================================================ */
.accordion{
  background:var(--surface-raised);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--elev-1);
}
.accordion details + details{ border-top:1px solid var(--line); }
.accordion summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  min-height:56px; padding:var(--s4) var(--s6);
  font-family:var(--font-display); font-size:var(--t-lg); font-weight:600;
  color:var(--text); cursor:pointer; list-style:none;
  transition:background-color var(--dur) var(--ease);
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary:hover{ background:var(--accent-wash); }
.accordion summary .icon{
  width:20px; height:20px; flex:none; color:var(--accent-color);
  transition:transform var(--dur) var(--ease);
}
.accordion details[open] summary .icon{ transform:rotate(45deg); }
.accordion .panel{ padding:0 var(--s6) var(--s6); }
.accordion .panel > :last-child{ margin-bottom:0; }

/* ============================================================
   19 · GALERIE & LIGHTBOX
   ============================================================ */
.gallery{
  display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));
}
.gallery-item{
  position:relative; display:block; margin:0; padding:0; overflow:hidden;
  aspect-ratio:1; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-sunken); cursor:zoom-in;
  box-shadow:var(--elev-1);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.gallery-item:hover{ border-color:var(--accent-color); box-shadow:var(--elev-2); }
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:var(--s6) var(--s4) var(--s3);
  font-size:var(--t-xs); color:#ffffff; text-align:left;
  background:linear-gradient(0deg, rgba(0,10,24,.92), transparent);
}
/* Erstes Bild größer — bricht das gleichförmige Raster auf */
@media (min-width:768px){
  .gallery--feature .gallery-item:first-child{ grid-column:span 2; grid-row:span 2; }
}

.lightbox{
  position:fixed; inset:0; z-index:var(--z-overlay);
  display:none; place-items:center;
  padding:var(--s5); border:0;
  max-width:100%; max-height:100%; width:100%; height:100%;
  background:color-mix(in srgb, var(--sidebar) 94%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--sidebar-foreground);
}
.lightbox[open]{ display:grid; }
.lightbox::backdrop{ background:color-mix(in srgb, var(--sidebar) 90%, transparent); }
.lightbox img{
  max-width:min(96vw,72rem); max-height:82dvh;
  width:auto; height:auto; object-fit:contain;
  border-radius:var(--radius);
}
.lightbox figure{ margin:0; }
.lightbox figcaption{
  margin-top:var(--s4); text-align:center;
  font-size:var(--t-sm); color:var(--invert-muted);
}
.lightbox-close,
.lightbox-nav{
  position:absolute;
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  background:var(--invert-raised); color:var(--sidebar-foreground);
  border:1px solid var(--invert-line-strong); border-radius:50%;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lightbox-close:hover,
.lightbox-nav:hover{
  border-color:var(--invert-accent);
  background:color-mix(in srgb, var(--invert-accent) 22%, var(--invert-raised));
}
.lightbox-close{ top:var(--s5); right:var(--s5); }
.lightbox-nav[data-dir="prev"]{ left:var(--s4); top:50%; transform:translateY(-50%); }
.lightbox-nav[data-dir="next"]{ right:var(--s4); top:50%; transform:translateY(-50%); }
.lightbox .icon{ width:22px; height:22px; }
.lightbox :focus-visible{ outline-color:var(--invert-accent); }

/* ============================================================
   20 · FORMULARE
   ============================================================ */
.form{ display:grid; gap:var(--s6); }
.form-row{ display:grid; gap:var(--s6); }
@media (min-width:640px){ .form-row--2{ grid-template-columns:1fr 1fr; } }

.field{ display:grid; gap:var(--s2); }
.field label{ font-size:var(--t-sm); font-weight:600; color:var(--text); }
.field .req{ color:var(--status-bad); margin-left:2px; }
.field .hint{ font-size:var(--t-xs); color:var(--text-muted); }

.field input,
.field select,
.field textarea{
  width:100%; min-height:48px; padding:var(--s3) var(--s4);
  font-family:var(--font-body); font-size:var(--t-base); /* 16px — verhindert iOS-Auto-Zoom */
  color:var(--foreground);
  background:var(--input);
  border:1.5px solid var(--field-border);   /* 3:1 — --border allein wäre zu schwach */
  border-radius:var(--radius);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Einzeilige Felder auf exakt eine Höhe festnageln.
   `min-height` allein reicht nicht: Safari leitet die Höhe eines <select>
   aus der Schrift ab statt aus der Angabe, und Zahlenfelder wachsen an
   ihren Pfeilchen über die anderen Felder hinaus (gemessen 55px statt 48).
   Deshalb feste Höhe — und beim Select zusätzlich `appearance:none`, sonst
   bleibt die Größe in Safari Sache des Betriebssystems. */
.field input:not([type="checkbox"]),
.field select{ height:48px; }

.field select{
  appearance:none;
  padding-inline-end:2.75rem;
  background-image:var(--select-arrow);
  background-repeat:no-repeat;
  background-position:right var(--s4) center;
  background-size:1.125rem 1.125rem;
}
/* Der eigene Pfeil ersetzt den des Systems — ohne ihn gäbe es keinen
   Hinweis mehr, dass sich das Feld aufklappt. */
.field select::-ms-expand{ display:none; }

.field textarea{ min-height:9rem; resize:vertical; line-height:1.55; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--text-muted); opacity:.75; }
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:var(--primary); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 26%, transparent);
}

.field .error{
  display:none; align-items:center; gap:var(--s2);
  margin:0; font-size:var(--t-sm); color:var(--status-bad);
}
.field .error .icon{ width:16px; height:16px; flex:none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{ border-color:var(--status-bad); }
.field[data-invalid="true"] .error{ display:flex; }

.field--check{ grid-template-columns:auto 1fr; align-items:start; gap:var(--s3); }
.field--check input[type="checkbox"]{
  width:24px; height:24px; min-height:0; margin:0; padding:0;
  accent-color:var(--primary); cursor:pointer;
}
.field--check label{ font-weight:400; font-size:var(--t-sm); color:var(--text-muted); cursor:pointer; }
.field--check .error{ grid-column:1 / -1; }

.form-summary{
  display:none; gap:var(--s3);
  padding:var(--s5) var(--s6);
  border:1.5px solid var(--status-bad); border-radius:var(--radius);
  background:color-mix(in srgb, var(--status-bad) 8%, transparent);
  font-size:var(--t-sm);
}
.form-summary[data-visible="true"]{ display:flex; }
.form-summary .icon{ width:20px; height:20px; flex:none; color:var(--status-bad); margin-top:2px; }
.form-summary strong{ display:block; margin-bottom:var(--s2); color:var(--text); }
.form-summary ul{ margin:0; padding-left:1.1rem; color:var(--text-muted); }
.form-summary a{ color:var(--status-bad); }

.form-status{
  display:none; align-items:flex-start; gap:var(--s3);
  padding:var(--s5) var(--s6);
  border:1.5px solid var(--status-ok); border-radius:var(--radius);
  background:color-mix(in srgb, var(--status-ok) 10%, transparent);
  font-size:var(--t-sm); color:var(--text-muted);
}
.form-status[data-visible="true"]{ display:flex; }
.form-status .icon{ width:20px; height:20px; flex:none; color:var(--status-ok); margin-top:2px; }
.form-status strong{ color:var(--text); }

/* ============================================================
   21 · CTA-BAND
   ============================================================ */
.cta-band{
  position:relative; overflow:clip;
  padding-block:clamp(3rem,6vw,4.5rem);
}
.cta-band .ring-deco{ left:-8rem; bottom:-11rem; width:24rem; aspect-ratio:1; --ring-opacity:.2; }
.cta-band-inner{
  position:relative; z-index:var(--z-base);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s8);
}
.cta-band h2{
  font-family:var(--font-display); font-size:var(--t-xl); font-weight:600;
  line-height:var(--lh-snug); margin:0; max-width:28ch; color:var(--text);
}

/* ============================================================
   22 · FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:var(--s16) var(--s8);
  padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom));
}
.footer-top{ display:grid; gap:var(--s10); margin-bottom:var(--s12); }
@media (min-width:900px){ .footer-top{ grid-template-columns:1fr 2.2fr; gap:var(--s12); } }
@media (min-width:1180px){ .footer-top{ grid-template-columns:1fr 2.6fr; gap:var(--s16); } }
.footer-brand p{ color:var(--text-muted); font-size:var(--t-sm); max-width:34ch; margin:var(--s5) 0 0; }
.footer-grid{
  display:grid; gap:var(--s8) var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
}
@media (min-width:1024px){ .footer-grid{ grid-template-columns:repeat(4,1fr); } }
.footer-grid h2{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-color);
  margin:0 0 var(--s3);
}
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-sm); color:var(--text-muted); text-decoration:none;
}
.footer-grid a:hover{ color:var(--text); text-decoration:underline; text-underline-offset:.2em; }

.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s5);
  padding-top:var(--s6); border-top:1px solid var(--line);
  font-size:var(--t-xs); color:var(--text-muted);
}
.footer-bottom nav{ display:flex; flex-wrap:wrap; gap:var(--s5); }
.footer-bottom-end{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s4) var(--s6);
}
.footer-bottom a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--text-muted); text-underline-offset:.2em;
}
.footer-bottom a:hover{ color:var(--text); }

.social-links{ display:flex; gap:var(--s3); list-style:none; margin:0; padding:0; }
.social-links a{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  color:var(--text-muted);
  border:1px solid var(--line); border-radius:50%;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social-links a:hover{ border-color:var(--accent-color); color:var(--accent-color); }
.social-links .icon{ width:18px; height:18px; }

/* ============================================================
   23 · HILFSKLASSEN & PROTOTYP-KENNZEICHNUNG
   ============================================================ */
/* Icon-Größen als Token, nicht als Zufallswerte */
.icon{ width:20px; height:20px; flex:none; }
.icon-lg{ width:32px; height:32px; flex:none; color:var(--accent-color); }
.icon-xl{ width:44px; height:44px; flex:none; color:var(--accent-color); }

.mt-0{ margin-top:0; }
.mt-3{ margin-top:var(--s3); }
.mt-6{ margin-top:var(--s6); }
.mt-8{ margin-top:var(--s8); }
.mt-12{ margin-top:var(--s12); }
.mb-0{ margin-bottom:0; }
.text-muted{ color:var(--text-muted); }
.sticky-aside{ position:sticky; top:calc(var(--header-h) + var(--s6)); }
@media (max-width:899px){ .sticky-aside{ position:static; } }

/* Sanftes Einblenden beim Scrollen — nur wenn JS aktiv und Motion erlaubt */
.js [data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js [data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transform:none; }
}

.proto-badge{
  position:fixed; z-index:var(--z-sticky);
  left:var(--s4); bottom:calc(var(--s4) + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s4);
  font-size:var(--t-xs); font-weight:500;
  color:var(--sidebar-foreground); background:var(--sidebar);
  border:1px solid var(--invert-line-strong); border-radius:var(--radius-pill);
  box-shadow:var(--elev-2);
}
.proto-badge .icon{ width:14px; height:14px; flex:none; }
@media (max-width:520px){ .proto-badge{ display:none; } }

/* ============================================================
   24 · MAUSZEIGER-BEGLEITER
   Ergänzung, kein Ersatz: Der System-Mauszeiger bleibt überall
   sichtbar (nirgends cursor:none). Ein kleiner Punkt folgt ihm
   nahezu direkt, ein Ring zieht träger nach und wächst über
   bedienbaren Elementen. Die Nachlauf-Bewegung rechnet das Skript
   (Abschnitt 11 in main.js) und schreibt sie als transform —
   hier stehen nur Aussehen und die Zustände.
   ============================================================ */
.cursor-follower{
  position:fixed; inset:0;
  z-index:var(--z-cursor);
  pointer-events:none;                     /* nie im Weg: keine Klicks, kein Hover */

  /* Jede andere Komponente erbt --accent-color von der Fläche, auf der
     sie steht (Abschnitt 4). Der Begleiter schwebt über allen Flächen
     und kann das nicht — deshalb sagt ihm das Skript, worüber er
     gerade liegt. Ohne das wäre das dunkle Blau auf der Navy-Fläche
     von Hero, Kopf, Fuß und CTA-Leiste praktisch unsichtbar. */
  --follower-color: var(--accent-color);
}
.cursor-follower.is-on-invert{ --follower-color: var(--invert-accent); }

/* Die geöffnete Lightbox ist ein <dialog> und liegt damit im Top-Layer,
   über den keine z-index-Stufe reicht. Der Begleiter zieht dort also
   hinter den Abdunkler — gewollt, nicht kaputt: In der Bildansicht
   führt ohnehin der System-Mauszeiger. */

.cursor-follower__dot,
.cursor-follower__ring{
  position:absolute; top:0; left:0;
  border-radius:50%;
  opacity:0;                               /* erst nach der ersten Mausbewegung */
  will-change:transform;
}

/* --wa-gold bliebe dem Zielscheiben-Motiv näher, wäre auf der hellen
   Seitenfläche aber zu blass — der Akzent trägt in beiden Flächen. */
.cursor-follower__dot{
  width:7px; height:7px;
  background:var(--follower-color);
  transition:opacity var(--dur) var(--ease),
             background-color var(--dur) var(--ease);
}

.cursor-follower__ring{
  width:26px; height:26px;
  border:1px solid var(--follower-color);
  transition:width var(--dur) var(--ease),
             height var(--dur) var(--ease),
             border-radius var(--dur) var(--ease),
             border-width var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             opacity var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}

.cursor-follower.is-visible .cursor-follower__dot{ opacity:.6; }
.cursor-follower.is-visible .cursor-follower__ring{ opacity:.4; }

/* Über Links, Schaltflächen und Feldern */
.cursor-follower.is-active .cursor-follower__ring{ width:42px; height:42px; }

/* Eingerastet: Kommt der Zeiger einem Link oder einer Schaltfläche nahe,
   legt sich der Ring als Rahmen darum — dieselbe Lesart wie ein
   Fokus-Zustand, nur mausgeführt. Maße, Rundung und Position schreibt
   das Skript (Abschnitt 11 in main.js) als Inline-Stil; die Übergänge
   oben machen daraus die Verwandlung vom Kreis zum Rahmen. Hier steht
   nur, wie der eingerastete Zustand aussieht. */
.cursor-follower.is-magnetic .cursor-follower__ring{
  opacity:.85;
  border-width:1.5px;
  background:color-mix(in srgb, var(--follower-color) 7%, transparent);
}

/* Der Punkt bleibt am Zeiger und wird dabei zurückhaltender: Der Rahmen
   führt jetzt, der Punkt zeigt nur noch, wo die Maus wirklich steht. */
.cursor-follower.is-magnetic .cursor-follower__dot{ opacity:.35; }

/* Sicherheitsnetz: Das Skript blendet den Begleiter in diesen Fällen
   ohnehin aus (hidden), aber die Seite soll auch dann unverändert
   bleiben, wenn ein Zustand doch einmal hängen bliebe. */
@media (prefers-reduced-motion: reduce){
  .cursor-follower{ display:none; }
}
@media (max-width:1179px), (hover: none), (pointer: coarse){
  .cursor-follower{ display:none; }
}

/* ============================================================
   25 · DISZIPLIN-KARTEN
   Vier Bogenklassen nebeneinander. Die Karte zeigt zunächst nur
   Merkmal und Name; die Erklärung klappt beim Klick in der Karte
   auf, statt die Zeile darunter aufzuschieben — die Nachbarkarten
   bleiben dadurch stehen, wo sie waren.

   Ausgeliefert wird aufgeklappt (siehe rovers_render_block_disciplines).
   Alles, was zuklappt, hängt deshalb an .js: ohne Skript stehen die
   vier Texte einfach da.
   ============================================================ */
/* Feste Spaltenzahlen statt auto-fit: Bei vier Karten ließe eine
   dreispaltige Zwischenstufe die vierte allein in der zweiten Zeile
   stehen. 1 → 2 → 4 geht immer glatt auf. */
.discipline-grid{
  display:grid; gap:var(--s5);
  grid-template-columns:1fr;
}
@media (min-width:640px){
  .discipline-grid{ grid-template-columns:repeat(2,1fr); }
}
/* dvh statt vh: Auf Mobilgeräten wandert die Adressleiste beim Scrollen
   ein und aus — mit vh springt die Kartenhöhe dabei mit. */
@media (max-width:639px){
  .discipline{ min-height:72dvh; }
}
@media (min-width:1180px){
  .discipline-grid{ grid-template-columns:repeat(4,1fr); }
}

.discipline{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:80dvh;
  padding:var(--s8) var(--s6);
  border:1px solid var(--invert-line);
  border-radius:var(--radius);
  box-shadow:var(--elev-1);
  overflow:hidden;
  background:transparent;
  transition:flex-grow var(--dur-slow) var(--ease),
             transform var(--dur-slow) var(--ease),
             opacity var(--dur-slow) var(--ease),
             box-shadow var(--dur-slow) var(--ease),
             border-color var(--dur) var(--ease);
}

/* --- Fläche: Zeichnung oder Foto --- */
.discipline-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.discipline-bg::after{
  /* Abdunkler: hält den Text auch über einem hellen Foto über 4,5:1 und
     legt sich unter der Schrift am dichtesten. */
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--sidebar) 94%, transparent) 0%,
    color-mix(in srgb, var(--sidebar) 88%, transparent) 22%,
    color-mix(in srgb, var(--sidebar) 55%, transparent) 55%,
    color-mix(in srgb, var(--sidebar) 22%, transparent) 100%);
}
.discipline-bg .discipline-photo{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-slow) var(--ease);
}
.discipline:not(.discipline--photo) .discipline-bg{
  background:linear-gradient(168deg,
    color-mix(in srgb, var(--invert-accent) 16%, var(--sidebar)) 0%,
    var(--sidebar) 62%);
}


/* --- Inhalt --- */
.discipline-body{ position:relative; z-index:1; }
.discipline-body .eyebrow{ margin-bottom:var(--s2); }

.discipline-title{
  font-family:var(--font-display); font-size:var(--t-lg); font-weight:600;
  line-height:var(--lh-snug); color:var(--text);
  margin:0;
}

.discipline-trigger{
  display:flex; align-items:baseline; gap:var(--s3);
  width:100%; padding:0; border:0; background:none;
  font:inherit; color:inherit; text-align:left;
  cursor:pointer;
}
/* Die Schaltfläche deckt die ganze Karte ab — ein zweites Klickziel gibt
   es nicht, die Tastaturbedienung bleibt damit eindeutig. */
.discipline .stretch::after{ content:""; position:absolute; inset:0; }
.discipline-name{ flex:1 1 auto; }

/* Das Zeichen sagt, dass hier etwas aufgeht: Plus zu, Minus offen. */
.discipline-sign{
  position:relative; flex:none;
  width:1.5rem; height:1.5rem;
  border:1px solid var(--invert-line-strong);
  border-radius:50%;
  align-self:center;
  transition:border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease);
}
.discipline-sign::before,
.discipline-sign::after{
  content:""; position:absolute; inset:50% 25%;
  border-top:2px solid currentColor;
  transform:translateY(-1px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js .discipline-sign::after{ transform:translateY(-1px) rotate(90deg); }
.js .discipline.is-open .discipline-sign::after{ transform:translateY(-1px) rotate(0deg); opacity:0; }
/* Ohne Skript klappt nichts — dann wäre das Zeichen ein leeres Versprechen. */
html:not(.js) .discipline-sign{ display:none; }
html:not(.js) .discipline-trigger{ cursor:default; }

/* --- Die Erklärung --- */
.discipline-panel{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows var(--dur-slow) var(--ease),
             opacity var(--dur-slow) var(--ease),
             visibility var(--dur-slow) var(--ease);
}
.discipline-panel-inner{ overflow:hidden; min-height:0; }
.discipline-panel p{
  margin:var(--s4) 0 0;
  font-size:var(--t-sm); line-height:var(--lh-body);
  color:var(--text-muted);
}
.js .discipline-panel{
  grid-template-rows:0fr; opacity:0; visibility:hidden;
}
.js .discipline.is-open .discipline-panel{
  grid-template-rows:1fr; opacity:1; visibility:visible;
}

/* --- Zustände --- */
.discipline.is-open{ border-color:var(--invert-accent); }
/* Der Abdunkler zieht an, sobald die Erklärung darüber steht — über einem
   Foto entscheidet das darüber, ob der Text noch zu lesen ist. */
.discipline.is-open .discipline-bg::after{
  background:linear-gradient(to top,
    color-mix(in srgb, var(--sidebar) 96%, transparent) 0%,
    color-mix(in srgb, var(--sidebar) 92%, transparent) 70%,
    color-mix(in srgb, var(--sidebar) 72%, transparent) 100%);
}

/* Die offene Karte tritt hervor, indem die übrigen zurücktreten —
   wer eine davon ansteuert, holt sie sofort zurück. */
.js .discipline-grid.has-open .discipline:not(.is-open){ opacity:.62; }

@media (hover:hover) and (pointer:fine){
  .discipline-grid:has(.discipline:hover) .discipline:not(:hover){ opacity:.6; }
  .discipline:hover,
  .js .discipline-grid.has-open .discipline:not(.is-open):hover{ opacity:1; }
  .discipline:hover{
    border-color:var(--invert-accent);
    box-shadow:var(--elev-2);
    z-index:1;
  }
}

/* Ab vier Karten nebeneinander verhandeln sie ihre Breite: Die
   angesteuerte bekommt Platz, die übrigen geben ihn proportional ab.
   Das ist der eigentliche Zweck — im schmalen Hochformat ist von einem
   Foto kaum etwas zu erkennen, in der breiten Karte schon.

   Flex statt Grid, weil flex-grow das ohne eine Regel je Position
   verteilt — auch wenn die Redaktion eine fünfte Disziplin ergänzt.
   Die Reihenhöhe bleibt dabei stehen, nur die Spaltenbreiten wandern. */
@media (min-width:1180px){
  .discipline-grid{ display:flex; flex-wrap:nowrap; }
  .discipline{ flex:1 1 0; min-width:0; }
}
@media (min-width:1180px) and (hover:hover) and (pointer:fine){
  /* An .js gebunden: Ohne Skript stehen alle vier Erklärungen offen — dann
     würde ein Mauszeiger vier Textspalten gleichzeitig umbrechen lassen. */
  .js .discipline-grid:not(.has-open):hover .discipline{ flex-grow:.82; }
  .js .discipline-grid:not(.has-open):hover .discipline:hover{ flex-grow:1.9; }
}
@media (min-width:1180px){
  /* Ist eine Karte offen, hört das Verhandeln beim Überfahren auf: Die
     offene behält die Breite, die ihr Text zum Lesen braucht, statt beim
     nächsten Mauszeiger wieder zu schrumpfen. */
  .js .discipline-grid.has-open .discipline{ flex-grow:.82; }
  .js .discipline-grid.has-open .discipline.is-open{ flex-grow:1.9; }
}

/* Unter 1180px steht keine Breite zur Verhandlung — dort hebt sich die
   Karte stattdessen an, damit das Überfahren trotzdem etwas beantwortet. */
@media (hover:hover) and (pointer:fine) and (max-width:1179px){
  .discipline:hover{ transform:translateY(-4px); }
  .discipline--photo:hover .discipline-photo{ transform:scale(1.04); }
}

/* Der Fokusring gehört um die ganze Karte, nicht um die Zeile Text darin.
   Er liegt außerhalb der Karte und damit auf der Abschnittsfläche — nicht
   auf Navy. Deshalb --ring statt des geerbten --focus-ring: der helle
   Akzent der invertierten Fläche verschwände auf dem hellen Grund. */
.discipline:has(.discipline-trigger:focus-visible){
  outline:2px solid var(--ring);
  outline-offset:3px;
}
.discipline .discipline-trigger:focus-visible{ outline:none; }
@supports not selector(:has(*)){
  .discipline .discipline-trigger:focus-visible{
    outline:2px solid var(--ring); outline-offset:3px;
  }
}

/* „Bewegung reduzieren“ nimmt die Wanderung heraus, nicht die Wirkung:
   Die Karte wird weiterhin breiter, nur eben ohne Zwischenschritte. */
@media (prefers-reduced-motion: reduce){
  .discipline,
  .discipline-bg .discipline-photo,
  .discipline-panel{ transition:none; }
  .discipline:hover,
  .discipline--photo:hover .discipline-photo{ transform:none; }
}