/* ============================================================
   Aerobic Verein – öffentliche Website
   Signatur: der 8er-Zählbalken. Farbe: warmes Flammen-Orange auf
   kühl-heller Fläche. Schrift: Archivo (Plakat) über Karla (Text).
   ============================================================ */

:root {
  /* Fläche */
  --paper: #ffffff;
  --paper-2: #f4f6f8;
  --paper-3: #eaeef2;

  /* Tinte */
  --ink: #14161b;
  --ink-2: #333842;
  --muted: #656c78;
  --line: #e2e6ea;
  --line-strong: #c8ced6;

  /* Energie */
  --flame: #f5841e;        /* Markenorange des Vereins – Text darauf immer --ink */
  --flame-deep: #a8530a;   /* Text und Links auf Weiss (5.4:1) */
  --flame-dark: #de7415;   /* Hover einer Füllfläche */
  --amber: #ffab52;
  --flame-tint: #fef4e9;

  /* Dunkel (warm) */
  --night: #1a1714;
  --night-2: #241f1a;
  --night-text: #b3a79c;

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Karla", "Segoe UI", system-ui, sans-serif;

  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --pill: 999px;

  /* Lesebreite. Karlas "0" ist deutlich breiter als das mittlere Zeichen,
     darum ergeben 56ch rund 70 Zeichen pro Zeile. */
  --measure: 56ch;

  --shadow-sm: 0 2px 6px -2px rgba(20, 22, 27, 0.12), 0 8px 24px -16px rgba(20, 22, 27, 0.28);
  --shadow: 0 6px 14px -8px rgba(20, 22, 27, 0.22), 0 26px 60px -34px rgba(20, 22, 27, 0.5);
  --shadow-lg: 0 10px 22px -12px rgba(20, 22, 27, 0.3), 0 44px 90px -46px rgba(20, 22, 27, 0.62);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

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

a { color: var(--flame-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--pill);
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; color: #fff; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--flame-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------------------------------------------------- Zählbalken (Signatur) */

.beat { display: inline-block; line-height: 0; color: var(--line-strong); }
.beat svg { height: 12px; width: auto; overflow: visible; }
.beat-lg svg { height: 18px; }
.beat-tick { fill: currentColor; transform-box: fill-box; transform-origin: 50% 100%; }
.beat-tick.is-strong { fill: var(--flame); }
.beat-on-dark { color: rgba(255, 255, 255, 0.34); }

/* Der Ausgangszustand wird erst per JS gesetzt (.is-armed) und immer wieder
   aufgelöst – auch wenn der IntersectionObserver nie feuert. Ohne JS ist der
   Balken schlicht sichtbar. */
.beat.is-armed .beat-tick { transform: scaleY(0.22); opacity: 0.3; }
.beat.is-armed.is-in .beat-tick {
  animation: count-in 0.52s var(--ease) forwards;
  animation-delay: calc(var(--i) * 62ms);
}
@keyframes count-in { to { transform: scaleY(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .beat.is-armed .beat-tick { transform: none; opacity: 1; animation: none !important; }
}

/* ------------------------------------------------- Bildfläche & Platzhalter */

.media {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }

.media-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(20, 22, 27, 0.05) 0 1px, transparent 1px 40px),
    linear-gradient(160deg, var(--paper-3), var(--paper-2));
  color: var(--muted);
  text-align: center;
  padding: 20px;
}
.media-ph-mark { width: 96px; height: auto; fill: var(--line-strong); }
.media-ph-mark rect:first-child, .media-ph-mark rect:nth-child(5) { fill: var(--flame); }
.media-ph-label {
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.media-ph-hint { font-size: 0.82rem; color: var(--muted); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-variation-settings: "wdth" 100;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  padding: 14px 26px; border-radius: var(--pill); border: 1.5px solid transparent;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--flame); color: var(--ink); }
.btn-primary:hover { background: var(--amber); color: var(--ink); }

.btn-ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-quiet { border-color: rgba(255, 255, 255, 0.42); color: #fff; background: transparent; }
.btn-quiet:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

.hero .btn-ghost { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.hero .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------------------------------------------------------------- Header */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }

/* Das Logo ist die Originaldatei der bisherigen Vereinsseite: die Wortmarke in
   Weiss und Dunkelgrau auf orangem Grund. Weiss auf Orange erreicht nur 2.6:1
   und wäre als Text unbrauchbar – als Logotype ist es von der Kontrastregel
   ausgenommen (WCAG 1.4.3, „incidental"), und der Verein führt es so.
   `flex: 0 1 auto` mit `min-width: 0`: das Logo darf schrumpfen, sonst drückt
   es auf schmalen Geräten den Menü-Knopf aus der Zeile. */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 1 auto; min-width: 0; }
/* 248 px, nicht mehr: die Originaldatei ist 496 px breit, damit sitzt das Logo
   auf einem 2x-Bildschirm genau Pixel auf Pixel. Breiter gesetzt wird es dort
   weich, und ein weiches Logo ist das Erste, was man sieht. */
.brand-logo { display: block; width: 248px; max-width: 100%; height: auto; border-radius: 7px; }
/* Der Standard-Fokusring ist `--flame-deep` und sitzt hier direkt neben dem
   orangen Logo – zu wenig Unterschied. Auf der Marke darum Tinte. */
.brand:focus-visible { outline-color: var(--ink); }

.mainnav { margin-left: auto; }
.mainnav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mainnav a {
  display: block; text-decoration: none; color: var(--ink-2);
  font-family: var(--font-display); font-variation-settings: "wdth" 96;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 10px 12px; border-radius: var(--pill);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.mainnav a:hover { color: var(--ink); background: var(--paper-2); }
.mainnav a.is-active { color: var(--flame-deep); }
.nav-claim { display: none; }

.nav-toggle {
  display: none; margin-left: auto; align-items: center; gap: 10px;
  background: none; border: 1.5px solid var(--line); border-radius: var(--pill);
  /* 44px: der Knopf ist die einzige Navigation unter 1080px und lag mit
     9px Polster bei 35px Hoehe. */
  min-height: 44px; padding: 9px 16px 9px 14px; cursor: pointer; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.nav-toggle-bars { display: grid; gap: 4px; }
.nav-toggle-bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

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

.hero { position: relative; isolation: isolate; background: var(--night); overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media .media { height: 100%; aspect-ratio: auto; border-radius: 0; background: var(--night-2); }
.hero-media .media-ph {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 44px),
    linear-gradient(155deg, #2b2420, var(--night));
  color: var(--night-text);
}
/* Die Bildfläche liegt hier hinter der Aussage. Der Platzhalter zieht sich
   deshalb als kleine Zeile in die Ecke zurück, statt mittig hinter dem Text
   zu stehen – gleiche Haltung wie .page-hero-note auf den Unterseiten. */
.hero-media .media-ph {
  align-items: flex-end; justify-content: flex-end;
  padding: 0 26px 20px; gap: 4px; text-align: right;
}
.hero-media .media-ph-mark { display: none; }
.hero-media .media-ph-label { color: rgba(179, 167, 156, 0.7); font-size: 0.7rem; letter-spacing: 0.12em; }
.hero-media .media-ph-hint { color: rgba(179, 167, 156, 0.55); font-size: 0.7rem; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(20, 18, 15, 0.95) 0%, rgba(20, 18, 15, 0.86) 42%, rgba(20, 18, 15, 0.42) 100%),
    linear-gradient(180deg, rgba(20, 18, 15, 0.5), transparent 30%);
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(min(300px, 100%), 376px);
  gap: 56px; align-items: center;
  padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 112px);
}
.hero-copy { color: #fff; }
/* Deckel bei 3.4rem: die Hero-Spalte ist neben der Faktenkarte nur ~748px
   breit. Grösser gesetzt bricht jeder der beiden Sätze auf zwei Zeilen und
   "nicht." steht allein. So bleibt das Zweizeiler-Paar erhalten. */
.hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-variation-settings: "wdth" 112;
  font-weight: 900; letter-spacing: -0.035em; line-height: 0.98;
  color: #fff;
}
.hero .lead {
  margin-top: 24px; max-width: 50ch;
  font-size: clamp(1.05rem, 1.2vw, 1.15rem); line-height: 1.62; color: #e8ded6;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 34px 0 0; padding: 0;
  font-size: 0.94rem; color: #ded3c9;
}
.hero-facts li { display: inline-flex; align-items: center; gap: 9px; }
.tick-dot { width: 3px; height: 14px; border-radius: 2px; background: var(--flame); flex: none; }

/* Faktenkarte im Hero */
.slot-card {
  background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.slot-head { padding: 30px 30px 26px; background: var(--flame-tint); border-bottom: 1px solid #f3ddcd; }
.slot-weekday {
  margin: 0; font-family: var(--font-display); font-variation-settings: "wdth" 92;
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--flame-deep);
}
.slot-time {
  margin: 6px 0 0; font-family: var(--font-display); font-variation-settings: "wdth" 108;
  font-weight: 900; font-size: clamp(1.8rem, 2.6vw, 2.25rem); letter-spacing: -0.035em; line-height: 1;
  text-wrap: nowrap;
}
.slot-unit {
  font-size: 0.44em; font-weight: 800; font-variation-settings: "wdth" 92;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--flame-deep);
  vertical-align: 0.28em; margin-left: 0.1em;
}
.slot-venue { margin: 10px 0 0; font-size: 0.94rem; color: #7a5c46; }
.slot-beat { margin-top: 18px; color: #dcc0a8; }

.slot-events { padding: 22px 30px 26px; }
.slot-events-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.slot-events-head h2 {
  font-size: 0.82rem; font-variation-settings: "wdth" 92; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); font-weight: 800;
}
.slot-events-head a { font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.slot-events-head a:hover { text-decoration: underline; }
.slot-empty { font-size: 0.92rem; color: var(--muted); margin: 10px 0 0; }

.event-strip { list-style: none; margin: 0; padding: 0; }
.event-strip li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.event-strip li:last-child { border-bottom: 0; padding-bottom: 2px; }
.date-chip {
  display: grid; place-items: center; width: 48px; padding: 7px 0;
  background: var(--ink); color: #fff; border-radius: var(--r-sm); line-height: 1;
}
.date-day { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.date-mon { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; color: var(--amber); }
.event-body { display: flex; flex-direction: column; min-width: 0; }
.event-title { font-weight: 700; font-size: 0.98rem; line-height: 1.3; }
.event-meta { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }
.event-cat { display: none; }

/* -------------------------------------------------------------- Sektionen */

.section { padding: clamp(60px, 8vw, 110px) 0; }
.section-alt { background: var(--paper-2); }

.section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .beat { flex-basis: 100%; margin-bottom: 14px; }
.section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.7rem); }
.section-link {
  margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
  letter-spacing: 0.02em; text-decoration: none;
}
.section-link::after { content: " →"; }
.section-link:hover { text-decoration: underline; }

/* --------------------------------------------------------- Pitch-Abschnitt */

.pitch-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.pitch-copy h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); max-width: 18ch; }
.pitch-lead { margin-top: 22px; font-size: 1.14rem; line-height: 1.6; max-width: var(--measure); color: var(--ink-2); }

.fact-rail { margin: 40px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.fact-rail > div { padding: 22px 0 20px; border-bottom: 1px solid var(--line); }
.fact-rail dt {
  font-family: var(--font-display); font-variation-settings: "wdth" 104;
  font-weight: 800; font-size: 1.16rem; letter-spacing: -0.015em;
}
.fact-rail dd { margin: 7px 0 0; color: var(--muted); font-size: 0.98rem; max-width: 54ch; }

.pitch-media { position: sticky; top: 100px; }

/* ------------------------------------------------------------- Elementband */

/* Die Trainingsarten sind reiner Text, keine Links – die Plakat-Typografie
   sitzt deshalb am li selbst. */
.element-band { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 30px; list-style: none; margin: 0; padding: 0; }
.element-band li {
  position: relative;
  font-family: var(--font-display); font-variation-settings: "wdth" 106;
  font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 2.05rem);
  letter-spacing: -0.03em; line-height: 1.3; color: var(--ink);
}
.element-band li + li::before {
  content: ""; position: absolute; left: -17px; top: 0.52em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--flame);
}
.element-note { margin-top: 34px; color: var(--muted); max-width: var(--measure); }

/* ------------------------------------------------------------- Album-Karten */

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 24px; }
/* Der Teaser auf der Startseite zeigt vier Alben. Mit `auto-fill` fiel er
   zwischen 976 und 1112px auf drei Spalten und liess das vierte Album allein
   in einer zweiten Reihe stehen. Bei vier Kacheln gehen nur vier oder zwei
   Spalten auf, darum eine feste Leiter statt automatischer Spalten. */
.album-grid-teaser { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .album-grid-teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.album-card { display: block; text-decoration: none; color: var(--ink); }
.album-thumb {
  display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper-3);
}
.album-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.album-card:hover .album-thumb img { transform: scale(1.04); }
.album-thumb-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(90deg, rgba(20, 22, 27, 0.05) 0 1px, transparent 1px 36px), var(--paper-3);
  color: var(--muted);
}
.album-thumb-ph span { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; }
.album-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 2px 0; }
.album-year { font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.12em; color: var(--flame-deep); font-variant-numeric: tabular-nums; }
.album-title { flex-basis: 100%; font-family: var(--font-display); font-weight: 800; font-size: 1.14rem; letter-spacing: -0.02em; }
.album-count { font-size: 0.85rem; color: var(--muted); }
.album-card:hover .album-title { color: var(--flame-deep); }

/* ------------------------------------------------------ Orangefarbenes Band */

.section-band { background: var(--flame); color: var(--ink); padding: clamp(54px, 7vw, 92px) 0; }
.band-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.band-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px 30px 28px; border-radius: var(--r-lg);
  border: 1.5px solid rgba(26, 23, 20, 0.26); background: transparent;
  text-decoration: none; color: var(--ink);
  transition: background 0.26s var(--ease), transform 0.26s var(--ease), border-color 0.26s var(--ease);
}
.band-card:hover { background: rgba(255, 255, 255, 0.6); border-color: transparent; transform: translateY(-3px); color: var(--ink); }
.band-card h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
/* Aus dem Orange abgedunkelt statt grau. */
.band-card p { margin: 0; max-width: 44ch; color: #40230b; }
.band-card strong { font-variant-numeric: tabular-nums; }
.band-arrow { margin-top: auto; padding-top: 10px; font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; }
.band-arrow::after { content: " →"; display: inline-block; transition: transform 0.22s var(--ease); }
.band-card:hover .band-arrow::after { transform: translateX(5px); }

/* ---------------------------------------------------------------- Abschluss */

.closer { background: var(--night); color: #fff; padding: clamp(64px, 9vw, 118px) 0; }
.closer-inner { max-width: 760px; }
.closer h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); color: #fff; max-width: 20ch; }
.closer p { margin-top: 20px; color: #d8ccc2; font-size: 1.1rem; max-width: 58ch; }
.closer-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.closer .beat { margin-top: 44px; }

/* -------------------------------------------------------- Kopf Unterseiten */

.page-hero { position: relative; isolation: isolate; background: var(--night); color: #fff; overflow: hidden; }
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(20, 18, 15, 0.92), rgba(20, 18, 15, 0.6));
}
.page-hero-field {
  position: absolute; inset: 0; z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 3px, transparent 3px 44px),
    linear-gradient(155deg, #2b2420, var(--night));
}
.page-hero-inner { position: relative; z-index: 1; padding: clamp(52px, 7vw, 96px) 0 clamp(48px, 6vw, 78px); }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.9rem); color: #fff; margin-top: 18px; max-width: 20ch; }
.page-hero .lead { margin-top: 20px; color: #dbd0c6; font-size: 1.08rem; max-width: var(--measure); }
.page-hero-beat { margin-top: 30px; color: rgba(255, 255, 255, 0.32); }
.page-hero-note {
  position: absolute; right: 20px; bottom: 14px; z-index: 1; margin: 0;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }
.crumbs a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs span[aria-current] { color: var(--amber); }

/* ------------------------------------------------------------- Zeit-Streifen */

.slot-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 2px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.slot-strip > div { background: var(--paper); padding: 26px 26px 24px; }
.slot-strip h2 {
  font-size: 0.78rem; font-variation-settings: "wdth" 92; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); font-weight: 800;
}
.slot-strip-value {
  margin: 10px 0 0; font-family: var(--font-display); font-variation-settings: "wdth" 106;
  font-weight: 800; font-size: 1.32rem; letter-spacing: -0.02em; line-height: 1.2;
}
.slot-strip-note { margin: 7px 0 0; font-size: 0.9rem; color: var(--muted); }

/* -------------------------------------------------------------- Textinhalte */

.content-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(36px, 5vw, 70px); align-items: start; }
.content > *:first-child { margin-top: 0; }
.content-lead { font-size: 1.16rem; line-height: 1.62; color: var(--ink-2); max-width: var(--measure); }
.content-block { margin-top: 46px; }
.content-block h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-bottom: 14px; }
.content-block p { max-width: var(--measure); }
.content-list { margin: 14px 0 0; padding: 0; list-style: none; max-width: var(--measure); }
.content-list li { position: relative; padding: 8px 0 8px 26px; border-bottom: 1px solid var(--line); }
.content-list li:last-child { border-bottom: 0; }
.content-list li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 3px; height: 12px; border-radius: 2px; background: var(--flame);
}
.content-note {
  margin-top: 18px; padding: 16px 20px; background: var(--flame-tint);
  border-radius: var(--r); color: #6a3d1c; font-size: 0.97rem; max-width: var(--measure);
}
.check-list { margin: 14px 0 0; padding: 0; list-style: none; max-width: var(--measure); }
.check-list li { position: relative; padding: 8px 0 8px 30px; }
.check-list li::before {
  content: ""; position: absolute; left: 4px; top: 0.95em;
  width: 11px; height: 6px; border-left: 2.5px solid var(--flame); border-bottom: 2.5px solid var(--flame);
  transform: rotate(-45deg);
}

.content-side { display: grid; gap: 20px; position: sticky; top: 104px; }
.side-card { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 28px 26px; }
.side-card h2 { font-size: 1.28rem; color: #fff; margin-bottom: 12px; }
.side-card p { color: #c7ccd4; font-size: 0.96rem; }
.side-card address { font-style: normal; color: #c7ccd4; margin-bottom: 18px; }
.side-card .btn { width: 100%; margin-top: 6px; }
.side-note { margin-top: 16px; font-size: 0.9rem; color: #a5acb8; }
.side-note a { color: var(--amber); }
.side-note a:hover { color: #fff; }
.side-note strong { color: #fff; }

/* Helle Variante – jede Farbe der dunklen Karte muss hier zurückgesetzt werden. */
.side-card-quiet { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); }
.side-card-quiet h2 { color: var(--ink); }
.side-card-quiet p, .side-card-quiet .side-note, .side-card-quiet address { color: var(--muted); }
.side-card-quiet .side-note strong { color: var(--ink); }
.side-card-quiet .side-note a { color: var(--flame-deep); }
.side-card-quiet .side-note a:hover { color: var(--ink); }

.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.side-list li:last-child { border-bottom: 0; }
.side-list-date { font-family: var(--font-display); font-weight: 800; color: var(--flame-deep); font-variant-numeric: tabular-nums; flex: none; }
.side-list a { text-decoration: none; font-weight: 600; }
.side-list a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Preisliste */

.price-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line-strong); max-width: 62ch; }
.price-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.price-label { display: flex; flex-direction: column; min-width: 0; }
.price-name { font-weight: 700; }
.price-note { font-size: 0.88rem; color: var(--muted); margin-top: 2px; }
.price-amount {
  font-family: var(--font-display); font-variation-settings: "wdth" 104;
  font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--flame-deep);
}

/* ------------------------------------------------- Legende & Markierungen */

.legende {
  margin-bottom: clamp(28px, 4vw, 44px); padding: 16px 20px;
  background: var(--paper-2); border-radius: var(--r); color: var(--muted); font-size: 0.94rem;
}
.legende p { margin: 0; max-width: 78ch; }
.signup-mark {
  font-family: var(--font-display); font-weight: 900; color: var(--flame-deep);
  letter-spacing: 0.02em; margin-left: 0.3em; vertical-align: 0.1em;
}
.legende .signup-mark { margin-left: 0; margin-right: 0.4em; }
.section-count {
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-left: auto;
}

/* ------------------------------------------------------------------ Agenda */

.agenda-fixed {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px;
  padding: 22px 26px; margin-bottom: clamp(36px, 5vw, 56px);
  background: var(--flame-tint); border-radius: var(--r-lg);
}
.agenda-fixed-label {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 0.76rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--flame-deep);
}
.agenda-fixed-value {
  margin: 0; flex-basis: 100%; font-family: var(--font-display); font-variation-settings: "wdth" 108;
  font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.028em;
}
.agenda-fixed-note { margin: 0; font-size: 0.95rem; color: #7a5c46; }

.agenda { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.agenda-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 24px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.agenda-date {
  display: grid; place-items: center; padding: 10px 0; line-height: 1;
  background: var(--paper-2); border-radius: var(--r-sm);
}
.agenda-wd { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.agenda-day { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; letter-spacing: -0.03em; margin: 3px 0; font-variant-numeric: tabular-nums; }
.agenda-mon { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--flame-deep); font-variant-numeric: tabular-nums; }
.agenda-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.agenda-title { font-family: var(--font-display); font-weight: 800; font-size: 1.24rem; letter-spacing: -0.02em; line-height: 1.2; }
.agenda-desc { color: var(--muted); font-size: 0.97rem; max-width: var(--measure); }
.agenda-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.86rem; color: var(--muted); }
.agenda-leader {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em;
  color: var(--ink-2);
}
.agenda-leader::before { content: "Leitung "; font-weight: 500; color: var(--muted); }
.agenda-cat {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.agenda-cat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cat, var(--flame)); flex: none; }
.agenda-past .agenda-day, .agenda-past .agenda-title { color: var(--muted); }
.agenda-past .agenda-date { background: transparent; border: 1px solid var(--line); }

/* ------------------------------------------------ Personen (Vorstand, Team) */

.people {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(22px, 3vw, 36px); list-style: none; margin: 0; padding: 0;
}
.people-2 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 240px)); }
.person { display: flex; flex-direction: column; }
.person-photo {
  display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper-3); margin-bottom: 14px;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo-ph {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-weight: 800; font-size: 3rem;
  color: var(--line-strong); background: var(--paper-3);
}
.person-role {
  font-family: var(--font-display); font-weight: 800; font-size: 0.76rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--flame-deep);
}
.person-name {
  font-family: var(--font-display); font-variation-settings: "wdth" 106;
  font-weight: 800; font-size: 1.5rem; letter-spacing: -0.025em; margin-top: 4px;
}
.person-phone {
  margin-top: 4px; font-variant-numeric: tabular-nums; font-size: 0.98rem;
  text-decoration: none; color: var(--ink-2); width: max-content;
}
.person-phone:hover { color: var(--flame-deep); text-decoration: underline; }
.people-note { margin-top: clamp(26px, 3vw, 38px); color: var(--muted); max-width: var(--measure); }

/* ---------------------------------------------------------------- Vorstand */

.board-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.board-row {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.1fr);
  gap: 6px 28px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.board-role { font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--flame-deep); }
.board-name { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.board-mail { font-size: 0.95rem; word-break: break-word; }
.board-phone { font-size: 0.98rem; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ink-2); }
.board-phone:hover { color: var(--flame-deep); text-decoration: underline; }

/* ------------------------------------------------------------------- Jahre */

.year-list { display: grid; gap: clamp(40px, 5vw, 64px); }
.year-head { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.year-label { font-size: clamp(2rem, 4vw, 3rem); font-variation-settings: "wdth" 112; font-variant-numeric: tabular-nums; }
.year-rule { flex: 1; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 12px); }
.year-count { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------------------ Bildergalerie */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.gallery-item { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--paper-3); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
/* Videos im Album. Gleicher Ausschnitt wie die Fotos, aber kein Hover-Zoom:
   darunter liegen die Abspielknoepfe des Browsers. */
/* Video im Album. Es nimmt die ganze Rasterbreite: als 220px-Kachel waeren die
   Abspielknoepfe des Browsers unbedienbar, und ein Video ist kein Vorschaubild.
   contain statt cover, damit nichts vom Bild abgeschnitten wird. */
.gallery-video {
  grid-column: 1 / -1;
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: contain; background: var(--ink); border-radius: var(--r);
}

/* ------------------------------------------------------- Leere Zustände, 404 */

.empty-state {
  display: grid; justify-items: center; gap: 18px; text-align: center;
  padding: clamp(48px, 7vw, 80px) 24px;
  background: var(--paper-2); border-radius: var(--r-lg);
}
.empty-mark { width: 92px; height: auto; fill: var(--line-strong); }
.empty-mark rect:first-child, .empty-mark rect:nth-child(5) { fill: var(--flame); }
.empty-state p { color: var(--muted); max-width: 54ch; margin: 0; }

.section-404 { text-align: center; padding: clamp(80px, 12vw, 160px) 0; }
.section-404 .empty-mark { margin: 0 auto 26px; }
.section-404 h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.section-404 p { margin-top: 18px; color: var(--muted); }

/* ---------------------------------------------------------------- Kontakt */

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(32px, 5vw, 64px); }
.contact-block h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-bottom: 14px; }
.contact-block h2 + h2, .contact-block p + h2 { margin-top: 36px; }
.contact-block address { font-style: normal; margin-bottom: 18px; line-height: 1.7; }
.contact-block .btn { margin-top: 8px; }
.contact-mail {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 2vw, 1.4rem);
  letter-spacing: -0.02em; word-break: break-word;
}

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

.site-footer { background: var(--night); color: var(--night-text); padding: clamp(52px, 6vw, 78px) 0 0; }
.footer-top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.7fr)) minmax(0, 1.1fr);
  gap: 36px; padding-bottom: 48px;
}
.footer-name { margin: 0; font-family: var(--font-display); font-variation-settings: "wdth" 108; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.025em; color: #fff; }
.footer-claim { margin: 8px 0 0; font-size: 0.94rem; }
.footer-brand .beat { margin-top: 22px; }
.footer-col h2 { font-size: 0.78rem; font-variation-settings: "wdth" 92; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { color: var(--night-text); text-decoration: none; font-size: 0.95rem; }
.footer-col a:hover { color: var(--amber); text-decoration: underline; }
.footer-slot { margin: 0 0 10px; color: #fff; font-weight: 700; }
.footer-contact address { font-style: normal; font-size: 0.95rem; line-height: 1.7; margin-bottom: 12px; }
.footer-contact a { color: var(--amber); font-size: 0.95rem; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.86rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--night-text); text-decoration: none; }
.footer-bottom a:hover { color: #fff; text-decoration: underline; }

/* ----------------------------------------------------------- Reveal (Listen) */

.reveal.is-armed { opacity: 0; transform: translateY(14px); }
.reveal.is-armed.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal.is-armed { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------- Responsive */

/* 1200px, nicht 1120px: zwischen 1120 und 1200 ist die Hero-Spalte neben der
   Faktenkarte nur noch ~645px breit, die Aussage bräuchte 651px – sie brach
   dort um wenige Pixel auf eine dritte Zeile. */
/* 1200px, nicht 1120px: zwischen 1120 und 1200 ist die Hero-Spalte neben der
   Faktenkarte nur noch ~645px breit, die Aussage bräuchte 651px – sie brach
   dort um wenige Pixel auf eine dritte Zeile. */
@media (max-width: 1200px) {
  .hero-inner {
    grid-template-columns: 1fr; gap: 40px;
    /* Gestapelt steht die Faktenkarte unter der Aussage. Mit dem Desktop-Polster
       (128px) wurde der Hero auf dem Tablet 1089px hoch – mehr als ein ganzer
       Bildschirm, bevor der erste Abschnitt beginnt. */
    padding: clamp(56px, 7vw, 92px) 0 clamp(48px, 6vw, 76px);
  }
  .slot-card { max-width: 520px; }
  .pitch-grid { grid-template-columns: 1fr; }
  .pitch-media { position: static; max-width: 520px; }
  .content-wrap { grid-template-columns: 1fr; }
  .content-side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
}

/* Tablet-Zone: gestapelt, aber noch breit genug für zwei Spalten. Die
   Faktenkarte legt sich hier quer – Kopf links, Termine rechts. Als hoher
   520px-Block schob sie den Hero um rund 200px in die Länge. */
@media (min-width: 721px) and (max-width: 1200px) {
  .slot-card {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  .slot-head { border-bottom: 0; border-right: 1px solid #f3ddcd; }
  .slot-events { padding-top: 26px; }
}

@media (max-width: 1080px) {
  /* Ohne dieses Zurücksetzen wäre der Header wegen backdrop-filter der
     Bezugsrahmen für position:fixed – das Menü bliebe kopfhoch statt
     bildschirmfüllend. */
  .site-header { backdrop-filter: none; background: var(--paper); }
  .nav-toggle { display: inline-flex; }
  .mainnav {
    position: fixed; inset: 76px 0 0; z-index: 39;
    background: var(--paper); padding: 24px; overflow-y: auto;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
  }
  .mainnav.open { opacity: 1; visibility: visible; transform: none; }
  .mainnav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .mainnav a { font-size: 1.02rem; letter-spacing: 0.06em; padding: 12px 16px; border-radius: var(--r); }
  .nav-claim {
    display: block; margin: auto 0 6px; padding-top: 18px;
    font-family: var(--font-display); font-weight: 800; font-size: 0.78rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--flame-deep);
  }
  html.nav-open, html.nav-open body { overflow: hidden; }

  /* Das Elementband ist als einzeilige Plakatzeile gedacht. Sobald es umbricht,
     rutscht der Trennpunkt von `li + li` an den Zeilenanfang und die Zeile
     beginnt mit einem Punkt. Ab hier ist es darum eine echte Liste: der Punkt
     steht bei jedem Eintrag vorne und ist damit Aufzählungszeichen, nicht
     Trenner. */
  .element-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 30px; }
  .element-band li { padding-left: 20px; font-size: clamp(1.14rem, 2.1vw, 1.5rem); }
  .element-band li::before, .element-band li + li::before {
    content: ""; position: absolute; left: 0; top: 0.56em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--flame);
  }

  /* Bei drei Spalten sind die Porträts auf dem Tablet nur 220px breit. Zwei
     Spalten geben ihnen 340px und lassen die Reihe aufgehen. */
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .wrap { width: min(1180px, 100% - 32px); }
  .header-inner { min-height: 68px; }
  .mainnav { inset: 68px 0 0; }

  /* Hero: auf 375px war er 1358px hoch – 1.7 Bildschirme, bevor irgendetwas
     kommt. Kleinere Aussage, engeres Polster, und der harte Umbruch fällt weg,
     damit der Satz fliesst statt viermal zu brechen. */
  .hero-inner { padding: 44px 0 52px; gap: 30px; }
  .hero h1 { font-size: clamp(1.95rem, 8.2vw, 2.5rem); letter-spacing: -0.03em; }
  .hero h1 br { display: none; }
  .hero .lead { margin-top: 18px; font-size: 1.02rem; line-height: 1.55; }
  .hero-actions { margin-top: 26px; gap: 10px; }
  .hero-facts { margin-top: 26px; gap: 8px 18px; font-size: 0.88rem; }
  .slot-head { padding: 24px 22px 20px; }
  .slot-events { padding: 18px 22px 22px; }

  .agenda-row { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; }
  .agenda-cat { grid-column: 2 / 3; }
  .agenda-day { font-size: 1.45rem; }

  .board-row { grid-template-columns: 1fr; gap: 3px; }

  .price-row { flex-direction: column; align-items: flex-start; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; }

}

@media (max-width: 560px) {
  /* Einspaltig: „Fatburner & Bodyforming" und „Walking & Nordic Walking"
     passen zu zweit nicht mehr nebeneinander, ohne zu brechen. */
  .element-band { grid-template-columns: 1fr; gap: 2px; }
  .element-band li { padding-block: 5px; }

  /* Die Galerie hat 21 Alben. Einspaltig ergibt das bei 4:3-Vorschauen eine
     Seite von über 8000px – zwei Spalten halbieren den Weg. */
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .album-title { font-size: 1rem; }
  .album-meta { padding-top: 10px; }
}

@media (max-width: 480px) {
  /* Wortmarke und Menue-Knopf brauchen zusammen mehr Platz, als bei 375px da
     ist. Wortmarke kleiner, Knopf nur noch als Symbol – der Text bleibt fuer
     Screenreader erhalten, sonst verliert der Knopf seinen Namen. */
  .header-inner { gap: 12px; }
  .nav-toggle { gap: 0; padding: 9px 13px; }
  .nav-toggle-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .footer-top { grid-template-columns: 1fr; }
  .hero-actions .btn, .closer-actions .btn { flex: 1 1 100%; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }

  /* Sechs Porträts einspaltig sind 2600px Weg. Zwei Spalten zeigen den
     Vorstand auf einem Blick. */
  .people { gap: 20px 14px; }
  .person-photo { border-radius: var(--r); }
  .person-name { font-size: 1.24rem; }
  .person-role { font-size: 0.78rem; }
}

/* ---------------------------------------------------------- Fingergrösse

   Nicht an der Breite festgemacht, sondern am Zeigergerät: ein 768 px breites
   Tablet und ein Handy im Querformat bedient man mit dem Finger, nicht mit
   einer Maus. Vorher hing die Regel an 720 px, dadurch blieben Telefonnummern,
   Abschnittslinks und die Fusszeile auf dem Tablet bei 18 bis 26 px.
   Die zweite Bedingung bleibt für Browser ohne `pointer`-Unterstützung. */
@media (pointer: coarse), (max-width: 720px) {
  .section-link,
  .crumbs a,
  .person-phone,
  .board-phone,
  .board-mail a,
  .contact-mail,
  .footer-col a,
  .footer-contact a,
  .footer-bottom a,
  .side-note a,
  .slot-events-head a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .brand { min-height: 44px; }
  .nav-toggle { min-height: 44px; }
  .footer-col ul { gap: 0; }
  .person-phone { margin-top: 0; }
  .contact-mail { min-height: 48px; }
  /* Die Navigation im aufgeklappten Menü ist schon 51 px hoch; die Zeilen der
     Desktop-Leiste sind es nicht, und auf einem Tablet ist sie sichtbar. */
  .mainnav > ul > li > a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ------------------------------------------------- Menü im Querformat

   Sieben Einträge untereinander brauchen mehr als 360 px Höhe. Das Menü
   scrollt zwar, aber zwei Spalten zeigen alles auf einen Blick. */
@media (max-width: 1080px) and (max-height: 520px) {
  .mainnav { padding: 16px; }
  .mainnav > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
  .nav-claim { margin-top: 10px; padding-top: 10px; }
}

@media print {
  .site-header, .site-footer, .hero-actions, .closer-actions { display: none; }
  body { color: #000; background: #fff; }
}