/* ═══════════════════════════════════════════════════════════════
   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 */
.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { padding: var(--space-lg); display: grid; gap: var(--space-xs); }
.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); }

.hours__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  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; }
.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;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   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;
  grid-template-columns: auto 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; }
.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); }
.award__stars { white-space: nowrap; 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); }