/* ═══════════════════════════════════════════════════════════════
   Komponenten
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   Schaltflächen
   ───────────────────────────────────────────── */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step-0);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }

.btn--sun { --btn-bg: var(--highlight); --btn-fg: var(--ink-900); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn--onDark {
  --btn-bg: color-mix(in oklab, #fff 14%, transparent);
  --btn-fg: #fff;
  border-color: color-mix(in oklab, #fff 30%, transparent);
  backdrop-filter: blur(8px);
}
.btn--onDark:hover { --btn-bg: color-mix(in oklab, #fff 24%, transparent); }
.btn--lg { font-size: var(--step-1); padding: 0.95em 1.9em; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

/* ─────────────────────────────────────────────
   Status-Ampel — das prominenteste Element der Seite
   ───────────────────────────────────────────── */
.status {
  --dot: var(--closed);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.7rem 1.35rem 0.7rem 1.1rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--bg-raised) 88%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px) saturate(1.4);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow var(--duration) var(--ease-out);
}
.status[data-open="true"] { --dot: var(--open); }

.status__dot {
  position: relative;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--dot);
}
/* Der Puls signalisiert: dieser Wert ist live, nicht in Stein gemeißelt. */
.status[data-open="true"] .status__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dot);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

.status__text { display: grid; line-height: 1.25; }
.status__label { font-weight: 700; font-size: var(--step-0); }
.status__note { font-size: var(--step--1); color: var(--text-muted); }

/* Große Variante im Hero */
.status--hero {
  padding: 1rem 1.9rem 1rem 1.5rem;
  background: color-mix(in oklab, oklch(15% 0.04 228) 55%, transparent);
  border-color: color-mix(in oklab, #fff 22%, transparent);
  color: #fff;
}
.status--hero .status__note { color: color-mix(in oklab, #fff 75%, transparent); }
.status--hero .status__label { font-size: var(--step-1); }

/* ─────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(92svh, 54rem);
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
  color: #fff;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media picture { display: contents; }

.hero__media img,
.hero__media .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Der Sprung sitzt mittig — zentraler Ausschnitt hält ihn im Bild. */
  object-position: center 42%;
  filter: saturate(1.05) contrast(1.02);
}
@media (max-width: 48rem) {
  .hero__media img { object-position: center 48%; }
}
/* Sehr langsamer Zoom — spürbar, ohne abzulenken */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: kenburns 34s var(--ease-in-out) infinite alternate; }
}
@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1.5%, 0); }
}

/* Zwei Verläufe: unten für Lesbarkeit, oben damit der Kopfbereich sitzt.
   Bewusst zurückhaltend — das Foto soll wirken, nicht der Schleier davor.
   Die Schrift bleibt lesbar, weil sie zusätzlich einen Schatten trägt. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, oklch(14% 0.04 228 / 0.72) 0%, oklch(14% 0.04 228 / 0.28) 38%, transparent 68%),
    linear-gradient(to bottom, oklch(14% 0.04 228 / 0.34) 0%, transparent 26%);
}

.hero__inner {
  padding-block: var(--space-3xl) calc(var(--space-3xl) + 3vw);
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
}

.hero__title {
  font-size: var(--step-6);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-shadow: 0 2px 40px oklch(14% 0.04 228 / 0.5);
}
.hero__title em {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 0.42em;
  letter-spacing: -0.01em;
  color: var(--sun-300);
  margin-block-start: 0.3em;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* Dezenter Hinweis zum Weiterscrollen */
.hero__scroll {
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 1.4rem;
  height: 2.3rem;
  border: 2px solid color-mix(in oklab, #fff 45%, transparent);
  border-radius: var(--radius-full);
  z-index: 1;
}
.hero__scroll::after {
  content: "";
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 3px;
  height: 0.45rem;
  border-radius: 2px;
  background: #fff;
  animation: scroll-hint 2s var(--ease-in-out) infinite;
}
@keyframes scroll-hint {
  0%, 100% { opacity: 0; transform: translateY(0); }
  35%      { opacity: 1; }
  70%      { opacity: 0; transform: translateY(0.7rem); }
}

/* ─────────────────────────────────────────────
   Wasserkante zwischen Abschnitten
   ───────────────────────────────────────────── */
.wave {
  display: block;
  width: 100%;
  height: clamp(2.5rem, 5vw, 5rem);
  fill: var(--bg);
  margin-block-end: -1px;
  position: relative;
  z-index: 1;
}
.wave--up { transform: rotate(180deg); margin-block: -1px 0; }
.wave--sunken { fill: var(--bg-sunken); }
.wave--invert { fill: var(--bg-invert); }

/* ─────────────────────────────────────────────
   Kennzahlen
   ───────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-lg);
  counter-reset: stat;
}

.stat { text-align: center; }

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Kleines „seit“ vor der großen Jahreszahl. */
.stat__prefix {
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0;
  margin-inline-end: 0.15em;
}
.section--invert .stat__value { color: var(--highlight); }

.stat__label {
  display: block;
  margin-block-start: var(--space-xs);
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 18ch;
  margin-inline: auto;
}
.section--invert .stat__label { color: color-mix(in oklab, currentColor 75%, transparent); }

/* ─────────────────────────────────────────────
   Karten
   ───────────────────────────────────────────── */
.card {
  display: grid;
  gap: var(--space-sm);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

.card__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.35rem;
}
.card__title { font-size: var(--step-1); }
.card__text { color: var(--text-muted); font-size: var(--step--1); }

/* Karte mit Bild: für Beiträge und für Kacheln mit Foto statt Icon.
   Die Karten einer Reihe sind gleich hoch. Ohne feste Zeilen würde das Grid
   die Resthöhe auf Bild und Text verteilen, und je nach Textlänge stünden
   die Bildkanten und Überschriften in einer Reihe unterschiedlich hoch.
   Deshalb: Bildzeile nach Seitenverhältnis, Textzeile nimmt den Rest. */
.card--media {
  padding: 0;
  overflow: hidden;
  gap: 0;
  grid-template-rows: auto 1fr;
}
.card--media .card__body {
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}
.card--media img,
.card--media .img-placeholder {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  transition: scale var(--duration-slow) var(--ease-out);
}
.card--media:hover img { scale: 1.04; }
.card--media { position: relative; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__date {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.card__title a { color: inherit; text-decoration: none; }

/* ─────────────────────────────────────────────
   Preise als Eintrittskarten
   ───────────────────────────────────────────── */
.tickets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.ticket {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.ticket:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Perforierte Kante — die Kerben sitzen auf der Trennlinie zum Preisblock */
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  inset-block-start: 62%;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.ticket::before { inset-inline-start: -0.7rem; clip-path: inset(0 0 0 50%); }
.ticket::after  { inset-inline-end: -0.7rem;  clip-path: inset(0 50% 0 0); }

.ticket--highlight {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}
.ticket--highlight::before,
.ticket--highlight::after { border-color: var(--accent); border-width: 2px; }

.ticket__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -50%;
  padding: 0.3em 1em;
  border-radius: var(--radius-full);
  background: var(--highlight);
  color: var(--ink-900);
  font-size: var(--step--1);
  font-weight: 700;
  white-space: nowrap;
}

.ticket__name { font-size: var(--step-1); font-family: var(--font-display); font-weight: 700; }
.ticket__note { font-size: var(--step--1); color: var(--text-muted); min-height: 2.6em; }

.ticket__prices {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-md);
  border-block-start: 2px dashed var(--border);
}

/* Zwei klar getrennte Blöcke: Erwachsene und Kinder/ermäßigt.
   Label über dem Preis und zentriert — so passt auch „100,00 €“ in die schmale Karte. */
.ticket__price-row {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
}
.ticket__price-row + .ticket__price-row {
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-xs);
  border-block-start: 1px solid var(--border);
}
.ticket__price-row--single { min-height: 3rem; align-content: center; }

.ticket__price-label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
}
.ticket__price-value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   Öffnungszeiten
   ───────────────────────────────────────────── */
.hours { display: grid; gap: var(--space-md); }

/* Flex statt Grid, damit der Wert auf schmalen Schirmen unter die Bezeichnung
   rutscht, statt die Spalte — und mit ihr die ganze Seite — breiter zu ziehen.
   Mit grid-template-columns bestimmte der längste Wert die Spaltenbreite; die
   Saisonzeile schob das Dokument auf einem 360px-Handy auf 457px auf. */
.hours__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-sm);
  border-block-end: 1px solid var(--border);
}
.hours__row:last-child { border-block-end: 0; }
.hours__label { font-weight: 600; flex: 1 1 auto; }
.hours__sub { display: block; font-size: var(--step--1); color: var(--text-muted); font-weight: 400; }
.hours__time {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Uhrzeitspannen dürfen nie am Bindestrich umbrechen. */
  white-space: nowrap;
  /* Rutscht ein langer Wert auf eine eigene Zeile, bleibt er trotzdem rechts
     und damit in einer Flucht mit den Werten darüber. */
  margin-inline-start: auto;
  text-align: right;
}
/* Für lange Werte wie den Saisonzeitraum: die dürfen und müssen umbrechen,
   sonst passen sie auch auf einer eigenen Zeile nicht ins Handydisplay. */
.hours__time--wrap {
  white-space: normal;
  text-wrap: balance;
}

/* Auf schmalen Schirmen passt die Zeit je nach Länge der Bezeichnung mal
   daneben und mal nicht — das sähe in einer Liste zerrupft aus. Deshalb dort
   einheitlich untereinander: Bezeichnung nimmt die volle Zeile, die Zeit
   rückt darunter. */
@media (max-width: 34rem) {
  .hours__label { flex-basis: 100%; }
  .hours__time  {
    font-size: var(--step-0);
    /* Untereinander gelesen gehört der Wert linksbündig unter die Bezeichnung. */
    margin-inline-start: 0;
    text-align: start;
  }
}

/* ─────────────────────────────────────────────
   Zeitstrahl — horizontal, mit Farbrückkehr
   ───────────────────────────────────────────── */
.timeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 22rem);
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--space-md) var(--space-xl);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.timeline__item {
  scroll-snap-align: center;
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  position: relative;
  padding-block-start: var(--space-lg);
}

/* Die durchgehende Linie mit den Punkten */
.timeline__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline: -50% 0;
  height: 2px;
  background: var(--border-strong);
}
.timeline__item::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}
.timeline__item--mark::after { background: var(--highlight); border-color: var(--highlight); }

.timeline__year {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.timeline__item--mark .timeline__year { color: var(--highlight); }
.timeline__text { font-size: var(--step--1); color: var(--text-muted); }

.timeline__item img,
.timeline__item .img-placeholder {
  border-radius: var(--radius-md);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  /* Die frühen Jahre sind entsättigt — die Farbe kehrt mit den Jahrzehnten zurück. */
  filter: saturate(var(--sat, 1)) contrast(1.02);
  transition: filter var(--duration-slow) var(--ease-out);
}
.timeline__item:hover img { filter: saturate(1); }

/* ─────────────────────────────────────────────
   Galerie
   ───────────────────────────────────────────── */
.gallery {
  columns: 3;
  column-gap: var(--space-md);
}
@media (max-width: 60rem) { .gallery { columns: 2; } }
@media (max-width: 34rem) { .gallery { columns: 1; } }

.gallery__item {
  break-inside: avoid;
  margin-block-end: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.gallery__item img {
  width: 100%;
  transition: scale var(--duration-slow) var(--ease-out),
              filter var(--duration) var(--ease-out);
}
.gallery__item:hover img { scale: 1.05; filter: brightness(1.06); }

/* Lightbox über <dialog> — kein Fremdcode nötig */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100svh;
  width: 100%;
  height: 100%;
}
.lightbox::backdrop {
  background: oklch(10% 0.02 228 / 0.92);
  backdrop-filter: blur(6px);
}
.lightbox__inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--space-lg);
}
.lightbox img {
  max-width: 100%;
  max-height: 85svh;
  width: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in oklab, #fff 30%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, #000 45%, transparent);
  color: #fff;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  backdrop-filter: blur(8px);
}
.lightbox__close { inset-block-start: var(--space-md); inset-inline-end: var(--space-md); }
.lightbox__nav--prev { inset-inline-start: var(--space-md); inset-block-start: 50%; translate: 0 -50%; }
.lightbox__nav--next { inset-inline-end: var(--space-md); inset-block-start: 50%; translate: 0 -50%; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--accent); border-color: var(--accent); }

/* ─────────────────────────────────────────────
   Sponsorenband
   ───────────────────────────────────────────── */
.sponsors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
}
.sponsor {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.sponsor:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

/* ─────────────────────────────────────────────
   Premium-Partner — auf jeder Seite, über dem Footer
   ───────────────────────────────────────────── */
.premium {
  border-block-start: 1px solid var(--border);
  background: var(--bg-raised);
  padding-block: var(--space-lg);
}
.premium__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-xl);
}
.premium__label {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.premium__label::before {
  content: "★ ";
  color: var(--sun-500, #e8a02a);
}
.premium__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.premium__list > li { display: flex; }
/* Alle Kacheln exakt gleich breit und hoch; das Banner wird ohne Verzerrung
   eingepasst (contain). Der weiße Grund macht die Ränder unsichtbar. */
.premium__item {
  display: block;
  width: 15rem;
  height: 9rem;
  padding: var(--space-sm);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.premium__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
/* Banner füllt die Kachel und wird ohne Verzerrung eingepasst (contain).
   Der freie Rand bleibt weiß – auf weißen Bannern unsichtbar. */
.premium__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.premium__item .premium__name {
  display: grid;
  place-items: center;
  height: 100%;
  font-weight: 650;
  color: var(--ink-700);
  text-align: center;
}

@media (max-width: 40rem) {
  .premium__inner { flex-direction: column; align-items: stretch; }
  .premium__list { justify-content: flex-start; }
  .premium__list > li { width: calc(50% - var(--space-md) / 2); }
  .premium__item { width: 100%; height: 7.5rem; }
}

/* ─────────────────────────────────────────────
   Werbebanner der Partner
   ───────────────────────────────────────────── */
.banner-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-md);
}

.banner {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  min-height: 11rem;
  /* Banner tragen oft weiße Ränder — eine weiße Kachel lässt sie ruhig wirken. */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
a.banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.banner img {
  max-width: 100%;
  max-height: 9rem;
  width: auto;
  object-fit: contain;
}

.banner__name {
  font-weight: 650;
  color: var(--ink-700);
  text-align: center;
}

/* Dezenter Hinweis, dass die Kachel verlinkt ist — erscheint beim Überfahren. */
.banner__visit {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-start-start-radius: var(--radius-md);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}
a.banner:hover .banner__visit,
a.banner:focus-visible .banner__visit { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────
   Vereinszeitung „Sprungbrett“ — Cover-Archiv
   ───────────────────────────────────────────── */
.magazine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-xl) var(--space-lg);
}
.magazine__item {
  display: grid;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
}
.magazine__cover {
  position: relative;
  display: block;
  aspect-ratio: 564 / 800;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-sunken);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.magazine__item:hover .magazine__cover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.magazine__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.magazine__badge {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-end: 0.6rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
  background: oklch(0% 0 0 / 0.55);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}

/* Platzhalter, falls (noch) kein Titelbild vorliegt. */
.magazine__placeholder {
  display: grid;
  place-content: center;
  gap: var(--space-xs);
  height: 100%;
  background: linear-gradient(160deg, var(--accent), var(--water-800, #0a3450));
  color: #fff;
  text-align: center;
  padding: var(--space-md);
}
.magazine__placeholder span { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0.02em; }
.magazine__placeholder strong { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; }

.magazine__meta { display: grid; gap: 0.1rem; }
.magazine__year { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); }
.magazine__size { font-size: var(--step--1); color: var(--text-muted); }
.magazine__item:hover .magazine__year { color: var(--accent); }

/* ─────────────────────────────────────────────
   Personenliste (Vorstand)
   ───────────────────────────────────────────── */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-md);
}
.person {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}
/* Reine Initialen-Karten stehen oft neben höheren Fotokarten — ihr Inhalt
   wird vertikal zentriert, damit kein leerer Block darunter entsteht. */
.person:not(.person--foto) {
  align-content: center;
  justify-items: start;
  text-align: start;
}
.person:not(.person--foto) .person__avatar {
  width: 3.75rem;
  height: 3.75rem;
  font-size: var(--step-1);
}
.person__avatar {
  width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  margin-block-end: var(--space-xs);
}
/* Foto füllt die Kachelbreite und gibt ihr ein Gesicht. */
.person--foto { padding: 0; overflow: hidden; }
.person__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-sunken);
}
.person--foto .person__name { margin-block-start: var(--space-md); padding-inline: var(--space-md); }
.person--foto .person__role { padding-inline: var(--space-md); padding-block-end: var(--space-md); }
.person__name { font-weight: 650; }
.person__role { font-size: var(--step--1); color: var(--text-muted); }

/* ─────────────────────────────────────────────
   Merkmalsliste mit Haken
   ───────────────────────────────────────────── */
.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.checklist li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.checklist li::before {
  content: "";
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a7ba8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
  flex: none;
  margin-block-start: 0.18em;
}

/* ─────────────────────────────────────────────
   Formulare
   ───────────────────────────────────────────── */
.field { display: grid; gap: var(--space-2xs); margin-block-end: var(--space-md); }
.field > label { font-weight: 600; font-size: var(--step--1); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 9rem; resize: vertical; font-family: inherit; }
.field__hint { font-size: var(--step--1); color: var(--text-muted); }

.notice {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  margin-block-end: var(--space-lg);
}
.notice--ok    { border-color: var(--open);   background: color-mix(in oklab, var(--open) 12%, var(--bg-raised)); }
.notice--error { border-color: var(--closed); background: color-mix(in oklab, var(--closed) 12%, var(--bg-raised)); }

/* ─────────────────────────────────────────────
   Platzhalter, solange Bilder fehlen
   ───────────────────────────────────────────── */
.img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 20% 15%, var(--water-300) 0%, transparent 55%),
    radial-gradient(100% 80% at 85% 80%, var(--water-500) 0%, transparent 60%),
    linear-gradient(160deg, var(--water-400), var(--water-700));
  border-radius: inherit;
}

/* ─────────────────────────────────────────────
   Fließtext aus dem Redaktionssystem
   ───────────────────────────────────────────── */
.prose { max-width: var(--prose-width); }
.prose > * + * { margin-block-start: var(--space-md); }
.prose h2 { font-size: var(--step-2); margin-block-start: var(--space-xl); }
.prose h3 { font-size: var(--step-1); margin-block-start: var(--space-lg); }
.prose ul, .prose ol { padding-inline-start: 1.3em; display: grid; gap: var(--space-2xs); }
.prose-figure { margin-block: var(--space-lg); }
.prose-figure img { border-radius: var(--radius-md); width: 100%; }
.prose-figure figcaption {
  margin-block-start: var(--space-xs);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────
   Seitenkopf der Unterseiten
   ───────────────────────────────────────────── */
.pagehead {
  position: relative;
  padding-block: calc(var(--space-3xl) * 0.8) var(--space-2xl);
  background: var(--bg-sunken);
  overflow: clip;
}
.pagehead__title { font-size: var(--step-5); }
.pagehead__lead {
  margin-block-start: var(--space-md);
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: 48ch;
}
/* Angedeutete Wasserlinien im Hintergrund */
.pagehead::after {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  width: 45rem;
  height: 45rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 65%);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}
.pagehead > * { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────
   Unternavigation im Vereinsbereich
   ───────────────────────────────────────────── */
.subnav {
  border-block-end: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  inset-block-start: 4.5rem;
  z-index: 50;
}

.subnav__list {
  display: flex;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(100% - var(--gutter) * 2, var(--wide-width));
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav__list::-webkit-scrollbar { display: none; }

.subnav__link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-block-end: 2px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 650;
  white-space: nowrap;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.subnav__link:hover { color: var(--text); border-block-end-color: var(--border-strong); }
.subnav__link[aria-current] { color: var(--accent); border-block-end-color: var(--accent); }

/* ─────────────────────────────────────────────
   Dokumente zum Herunterladen
   ───────────────────────────────────────────── */
.docs { display: grid; gap: var(--space-md); }

.doc {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst darf die Textspalte nicht unter ihre
     Mindestbreite schrumpfen und schiebt die Kachel aus dem Display. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}
.doc:hover {
  color: inherit;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.doc__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 3.25rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.doc__name { font-weight: 650; overflow-wrap: break-word; }
.doc__meta { font-size: var(--step--1); color: var(--text-muted); }
.doc__arrow { color: var(--accent); font-size: 1.3rem; }

/* ─────────────────────────────────────────────
   Satzungstext
   ───────────────────────────────────────────── */
.satzung { counter-reset: paragraf; }

.satzung__para {
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--border);
  scroll-margin-block-start: 9rem;
}
.satzung__para:last-child { border-block-end: 0; }

.satzung__nummer {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.satzung__titel { font-size: var(--step-1); margin-block: var(--space-2xs) var(--space-md); }

.satzung__para ol { padding-inline-start: 0; list-style: none; counter-reset: absatz; display: grid; gap: var(--space-sm); }
.satzung__para ol > li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--space-xs);
  counter-increment: absatz;
}
.satzung__para ol > li::before {
  content: "(" counter(absatz) ")";
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.satzung__para ol ol { margin-block-start: var(--space-xs); counter-reset: buchstabe; }
.satzung__para ol ol > li { counter-increment: buchstabe; grid-template-columns: 1.8rem 1fr; }
.satzung__para ol ol > li::before { content: counter(buchstabe, lower-alpha) ")"; }

/* Inhaltsverzeichnis */
.toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-2xs) var(--space-md);
  list-style: none;
  padding: 0;
}
.toc a {
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  gap: var(--space-xs);
  padding: 0.4rem 0;
  text-decoration: none;
  color: var(--text);
  font-size: var(--step--1);
  border-block-end: 1px solid transparent;
}
.toc a:hover { color: var(--accent); border-block-end-color: var(--border); }
.toc span { color: var(--accent); font-weight: 700; }

/* ─────────────────────────────────────────────
   Auszeichnung / Ranking
   ───────────────────────────────────────────── */
.award {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-full);
  background: linear-gradient(100deg, var(--accent-soft), color-mix(in oklab, var(--highlight) 22%, var(--accent-soft)));
  border: 1px solid color-mix(in oklab, var(--highlight) 45%, var(--border));
  text-decoration: none;
  color: var(--text);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.award:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text); }

.award__medal {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--highlight);
  color: var(--ink-900);
  font-size: 1.4rem;
}
.award__text { font-size: var(--step-0); }
.award__text strong { color: var(--accent); }
/* Kein nowrap: die Quellenangabe ist zu lang fürs Handy und ließe sich
   sonst nicht umbrechen. Stern und Note hält ein geschütztes Leerzeichen
   im Markup zusammen (templates/pages/home.php). */
.award__stars { font-weight: 700; }
.award__stars .award__star { color: var(--sun-500); }
.award__more {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   Aufruf zum Handeln
   ───────────────────────────────────────────── */
.cta {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  border-radius: var(--radius-xl);
  background: linear-gradient(140deg, var(--water-600), var(--water-800));
  color: #fff;
  position: relative;
  overflow: clip;
}
.cta::before {
  content: "";
  position: absolute;
  inset-block-start: -50%;
  inset-inline-start: -10%;
  width: 30rem; height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(85% 0.15 80 / 0.28), transparent 65%);
}
.cta > * { position: relative; }
.cta h2 { font-size: var(--step-3); }
.cta p { max-width: 46ch; color: color-mix(in oklab, #fff 82%, transparent); }

/* ─────────────────────────────────────────────
   Piktogramme der Haus- und Badeordnung
   Die Bilder sind rote bzw. blaue Zeichen auf Weiß. Sie brauchen deshalb
   auch im dunklen Modus eine helle Kachel — wie die Werbebanner der Partner.
   ───────────────────────────────────────────── */
.signs {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-md);
}

.sign {
  display: grid;
  justify-items: center;
  /* start, damit die Beschriftungen einer Reihe auf gleicher Höhe beginnen,
     egal ob sie ein- oder zweizeilig sind. */
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.sign img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
}
.sign__text {
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900, #12242f);
  text-wrap: balance;
}

@media (max-width: 34rem) {
  .signs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--space-sm); }
  .sign img { width: 3.5rem; height: 3.5rem; }
}