/* ============ Basis ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  /* Marken-Hintergrund in den Wappenfarben Blau/Gold/Weiß: Konfetti und
     Papierschlangen, in der Luft schwebend, stark unscharf gerendert. Nimmt
     die Bildsprache des Startseiten-Heros auf (hero-night.jpg), nur ins Helle
     übersetzt — dort fliegen dieselben goldenen Schnipsel.

     Drei Dinge, die auf dem Weg dahin gelernt wurden:

     1. Motive müssen die GANZE Fläche tragen, nicht nur den Rand. Das Bild
        liegt unter 'cover' und wird beschnitten; ein Rahmenmuster fällt dabei
        weg und man sieht nur noch die leere Mitte. An genau dem ist der
        Entwurf mit den Satinbändern gescheitert.
     2. Zurücktreten über UNSCHÄRFE, nicht über Weißschleier. Dieselben
        Motive scharf gerendert brauchten 60% Schleier, um lesbar zu bleiben,
        und waren danach farblos. Weichgezeichnet genügen 14% — das Blau
        bleibt ein Blau.
     3. Gemessen wird am dunkelsten Bildpunkt, nicht am Durchschnitt. Ein
        einzelner satter Goldschnipsel bestimmt den schlechtesten Fall. Und
        neu gemessen wird nach JEDER Größenänderung: Skalieren verändert die
        Kanten, der alte Wert gilt also nicht automatisch weiter.

     Die Datei liegt in 4096x2304 bei 226 KB. Der erste Anlauf war eine
     1376 px breite Vorlage, auf 2560 px hochgezogen — die Kanten darin waren
     erfunden. Jetzt stammt sie aus einem echten 4K-Master.

     Aktuell: 10,1:1 gegen den Fließtext (--ink), 4,5:1 gegen das kleine
     Grau (--stone). Der zweite Wert kam nicht über den Schleier zustande,
     sondern über ein dunkleres --stone (#57503f statt #6e6656) — siehe
     style.css. Er liegt knapp über der Grenze; wer am Bild dreht, muss ihn
     nachmessen.

     'fixed' hält das Bild beim Scrollen still, sonst würde es auf langen
     Seiten mitwandern und die Komposition zerfallen. */
  background: url('../images/bg-marke.jpg') center center / cover no-repeat fixed var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* iOS-Safari unterstützt background-attachment:fixed nicht zuverlässig — dort
   wird das Bild entweder riesig skaliert oder ruckelt beim Scrollen. Auf
   Touch-Geräten deshalb mitscrollen lassen; die Kachel ist gross genug,
   dass die Komposition auch dann nicht auffällig wiederholt. */
@media (hover: none) {
  body { background-attachment: scroll; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}

.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 640px) { .container { padding: 0 2rem; } }

/* Nur oben/unten setzen, nicht die Kurzschreibweise: mit "padding: 3.5rem 0"
   wurde der seitliche Abstand von .container auf 0 zurückgesetzt, sobald ein
   Element beide Klassen trägt (was fast überall der Fall ist). Auf breiten
   Schirmen blieb das unsichtbar, weil die Maximalbreite zentriert; auf dem
   Handy klebte der Text dadurch am Displayrand. */
.section-pad { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 640px) { .section-pad { padding-top: 4.5rem; padding-bottom: 4.5rem; } }

.bg-midnight { background: var(--midnight); color: var(--paper); }
/* Halbtransparent statt deckend: Diese Abschnitte trennen Bereiche optisch
   voneinander ab. Deckend würden sie den Marken-Hintergrund abschneiden und
   mitten auf der Seite eine harte Kante erzeugen — so bleibt die Abtrennung
   erkennbar und das Bild scheint gedämpft durch. */
.bg-parchment { background: rgba(248,243,230,.55); }
.bg-parchment-dim { background: rgba(239,230,209,.6); }
.bg-paper { background: rgba(255,253,249,.62); }

/* ============ Eyebrow-Label ============ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow.on-dark { color: var(--gold); }
.eyebrow.muted { color: var(--stone); }
.eyebrow.on-dark.muted { color: rgba(255,253,249,.6); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .75rem 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: #f0b94a; }
.btn-sm { padding: .55rem 1.2rem; font-size: .85rem; }
.btn-secondary { background: transparent; border: 1px solid rgba(11,35,55,.2); color: var(--midnight); }
.btn-secondary:hover { background: rgba(11,35,55,.05); }
.btn-ghost-dark { background: transparent; border: 1px solid rgba(255,253,249,.3); color: var(--paper); }
.btn-ghost-dark:hover { background: rgba(255,253,249,.1); }

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Verhindert, dass der Browser beim Schrumpfen der Leiste die
     Scrollposition nachkorrigiert — das schaukelte sich mit dem
     Umschalten gegenseitig auf. */
  overflow-anchor: none;
  background:
    radial-gradient(32rem 9rem at 100% 0%, rgba(227,167,47,.14), transparent 70%),
    linear-gradient(rgba(11,35,55,.92), rgba(11,35,55,.92)),
    url('../images/pattern-midnight.svg') top left / 40rem auto repeat var(--midnight);
  color: var(--paper);
  box-shadow: inset 0 -1px 0 rgba(227,167,47,.3);
}
/* Angemeldete Nutzer sehen die WordPress-Adminleiste. Die klebt fest am
   oberen Fensterrand, während der Header mit top:0 an dieselbe Stelle
   will — er rutscht darunter, und genau die obersten Pixel mit Wappen und
   Vereinsname verschwinden. Deshalb den Header um die Höhe der Leiste
   nach unten setzen. Maße stammen aus dem WordPress-Kern. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* Unterhalb 600px scrollt die Adminleiste mit, statt fixiert zu bleiben —
     dort darf der Header wieder ganz nach oben. */
  body.admin-bar .site-header { top: 0; }
}
/* Oberzeile: Vereinsname ausgeschrieben + Service-Links. Räumt die
   Hauptzeile frei und gibt der Leiste die Anmutung einer Titelei.
   Beim Scrollen klappt sie weich zu (siehe .is-scrolled unten). */
.header-topbar {
  max-height: 2.4rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,253,249,.09);
  transition: max-height .25s ease, opacity .2s ease;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,253,249,.55);
}
.header-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .45rem; padding-bottom: .45rem; }
.header-topbar-links { display: flex; align-items: center; gap: 1.25rem; }
.header-topbar a { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,253,249,.7); }
.header-topbar a:hover { color: var(--gold); }
/* Handy: Die Oberzeile bleibt stehen, zeigt aber nur die Servicelinks. Vorher
   war sie dort ganz ausgeblendet, Downloads und Shop waren mobil damit gar
   nicht erreichbar. Der Vereinsname entfaellt (er steht direkt darunter neben
   dem Wappen), Instagram schrumpft auf sein Symbol, damit alle drei bei
   320 px in eine Zeile passen. 12 px Schrift und 44 px Zeilenhoehe, damit die
   Links lesbar und sicher zu treffen sind. */
@media (max-width: 767px) {
  .header-topbar { max-height: 2.75rem; font-size: .75rem; letter-spacing: .08em; }
  .header-topbar-inner { padding-top: 0; padding-bottom: 0; }
  .header-topbar-inner > span:first-child { display: none; }
  .header-topbar-links { width: 100%; justify-content: space-between; gap: .75rem; }
  .header-topbar a { min-height: 2.75rem; white-space: nowrap; color: rgba(255,253,249,.85); }
  .header-topbar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
  .header-topbar svg { width: 18px; height: 18px; }
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .75rem; /* nur oben und unten, siehe .footer-grid: sonst klebt das Logo am Rand */
  padding-bottom: .75rem;
  min-height: 4.5rem;
}
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-logo { height: 5.5rem; width: auto; flex-shrink: 0; transition: height .25s ease; }

/* Beim Scrollen wird die Leiste kompakt: Oberzeile klappt ein, das
   Wappen schrumpft — oben am Seitenanfang darf sie groß auftreten. */
.site-header.is-scrolled .header-topbar { max-height: 0; opacity: 0; }
.site-header.is-scrolled .brand-logo { height: 3.4rem; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.2;
}
.brand-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,253,249,.6);
}

.main-nav { display: none; align-items: center; gap: .15rem; }
.main-nav a {
  position: relative;
  padding: .6rem .95rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(255,253,249,.85);
}
/* Goldene Unterstreichung wächst beim Hover von links, steht beim aktiven
   Punkt dauerhaft — ersetzt die alten Pill-Hintergründe. */
.main-nav a::after {
  content: '';
  position: absolute;
  left: .95rem;
  right: .95rem;
  bottom: .35rem;
  height: 2px;
  border-radius: 999px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.main-nav a:hover { color: var(--paper); }
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a.is-active { color: var(--gold); }
.main-nav a.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.header-cta { display: none; }
@media (min-width: 1200px) { .header-cta { display: inline-flex; } }

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--paper);
  cursor: pointer;
}
.menu-toggle:hover { background: rgba(255,253,249,.1); }

.mobile-nav { display: none; border-top: 1px solid rgba(255,253,249,.1); padding: .75rem 1.25rem 1.25rem; }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.mobile-nav a { display: block; border-radius: .5rem; padding: .65rem .75rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: rgba(255,253,249,.9); }
.mobile-nav a:hover { background: rgba(255,253,249,.1); color: var(--gold); }
/* Servicelinks unter den Menuepunkten, kleiner und in der Schrift der Oberzeile. */
.mobile-nav-service { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: .75rem; padding: .5rem .75rem 0; border-top: 1px solid rgba(255,253,249,.1); }
.mobile-nav .mobile-nav-service a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border-radius: 0; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,253,249,.75); }
.mobile-nav .mobile-nav-service a:hover { background: none; color: var(--gold); }

/* 960px statt 1024px: Safari auf dem iPhone rendert „Desktop-Website
   anfordern" mit rund 980px Breite. Bei einer Schwelle von 1024px blieb
   deshalb trotzdem das Handymenü stehen — die klassische Ansicht ließ sich
   gar nicht erreichen. Unterhalb von 1024px rücken die Menüpunkte etwas
   enger zusammen, damit sie in einer Zeile bleiben. */
@media (min-width: 960px) and (max-width: 1023px) {
  .main-nav a { padding: .6rem .6rem; font-size: 1rem; }
  .brand-name { font-size: 1rem; }
  .brand-logo { height: 4.2rem; }
}
@media (min-width: 960px) {
  .main-nav { display: flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ============ Hero (Startseite) ============ */
.hero-shell { padding: 1.5rem 0 2rem; }
@media (min-width: 640px) { .hero-shell { padding: 2rem 0 3rem; } }

.hero-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 34rem;
  border-radius: 1.75rem;
  padding: 3rem 1.5rem;
  /* Hält die überstehende Parallax-Ebene in den runden Ecken. */
  overflow: hidden;
  /* Eigener Stapelkontext — hält die z-index-Ebenen dieser Karte INNEN.
     Ohne ihn wirken sie im Stapel der ganzen Seite: der Verlauf (::before,
     z-index 1) legte sich dann auch über die Terminleiste, die sich mit
     margin-top:-3rem bewusst über den unteren Kartenrand schiebt und selbst
     kein z-index hat. Die Leiste wirkte dadurch abgedunkelt und nach hinten
     gerückt. */
  isolation: isolate;
  background: var(--midnight);
  color: var(--paper);
}

/* Nachtszene über Bäumenheim (Higgsfield/Recraft, Markenpalette) in einer
   eigenen Ebene. Sie steht oben und unten über den Rand hinaus, damit das Foto
   beim Scrollen wandern kann, ohne dass eine Kante ins Bild läuft. Bewegt wird
   sie von motion.js; ohne JS steht sie still und sieht aus wie ein normaler
   Bildhintergrund. */
.hero-parallax {
  position: absolute;
  left: 0;
  right: 0;
  top: -10%;
  bottom: -10%;
  z-index: 0;
  background: url('../images/hero-night.jpg') center bottom / cover no-repeat;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-parallax { top: 0; bottom: 0; }
}

/* Zwei Verläufe sichern die Lesbarkeit: von links für die Headline, von unten
   für die Terminleiste — der Bildhimmel oben bleibt weitgehend frei. Sie
   liegen als eigene Ebene über dem Foto, weil der Hintergrund eines Elements
   sonst unter dessen Kindern läge und das Foto sie verdecken würde. */
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(11,35,55,.72), rgba(11,35,55,.3) 55%, rgba(11,35,55,.08)),
    linear-gradient(to top, rgba(11,25,37,.6), transparent 45%);
}

.hero-card > :not(.hero-parallax) { position: relative; z-index: 2; }
@media (min-width: 640px) { .hero-card { min-height: 40rem; padding: 4.5rem 3.5rem; } }

.hero-card-grid { display: grid; gap: 2rem; width: 100%; grid-template-columns: 1fr; }

.hero-card-content { max-width: 34rem; }
.hero-title {
  margin-top: 1rem;
  font-size: clamp(2.25rem, 1.3rem + 4vw, 3.5rem);
  letter-spacing: -.02em;
}
.hero-lede { margin-top: 1rem; font-size: 1.05rem; line-height: 1.6; color: rgba(255,253,249,.8); }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-actions .btn, .hero-news-footer { height: 3.25rem; }

/* News-Block: kompakt, rechts in der Hero-Card. Seit die Card ein Foto als
   Hintergrund hat, braucht die Liste eine eigene Glasfläche, sonst läuft der
   Text über Dächer und Lichterketten. */
.hero-news-main {
  justify-self: end;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,253,249,.14);
  background: rgba(11,25,37,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.25rem 1.4rem;
}
.hero-news-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.hero-news-list li { border-top: 1px solid rgba(255,253,249,.12); }
.hero-news-list li:first-child { border-top: none; }
.hero-news-item { display: block; padding: .6rem 0; }
.hero-news-list li:first-child .hero-news-item { padding-top: 0; }
.hero-news-date { display: block; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.hero-news-title { display: block; margin-top: .25rem; font-size: .85rem; font-weight: 600; color: var(--paper); line-height: 1.3; }
.hero-news-item:hover .hero-news-title { text-decoration: underline; text-decoration-color: rgba(255,253,249,.4); }
.hero-news-empty { margin-top: .75rem; font-size: .85rem; color: rgba(255,253,249,.65); }
.hero-news-footer { width: 100%; margin-top: 1.1rem; }

/* Desktop: 2x2-Raster — Text/News oben, Buttons in gemeinsamer Reihe darunter */
@media (min-width: 900px) {
  .hero-card-grid { grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 2.5rem; row-gap: 1.75rem; justify-content: space-between; }
  .hero-card-content { grid-column: 1; grid-row: 1; align-self: end; }
  .hero-news-main { grid-column: 2; grid-row: 1; align-self: end; width: 18rem; }
  .hero-actions { grid-column: 1; grid-row: 2; margin-top: 0; }
  .hero-news-footer { grid-column: 2; grid-row: 2; margin-top: 0; width: 18rem; justify-self: end; }
}

/* Weißer Balken, überlappt die untere Kante der Hero-Card */
.hero-bar {
  position: relative;
  margin: -3rem 1rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  border-radius: 1.25rem;
  /* Wie die Kacheln: dunkles Blau mit Nachtmuster statt der früheren
     weißen Leiste — sonst bricht ausgerechnet das erste Element unter
     dem Hero aus der Kachelsprache aus. */
  border: 1px solid rgba(227,167,47,.25);
  background:
    radial-gradient(28rem 10rem at 100% 0%, rgba(227,167,47,.16), transparent 70%),
    linear-gradient(rgba(11,35,55,.93), rgba(11,35,55,.93)),
    url('../images/pattern-midnight.svg') top left / 26rem auto repeat var(--midnight);
  color: var(--paper);
  padding: 1rem 1.25rem;
  box-shadow: 0 1.5rem 3rem -1rem rgba(11,35,55,.4);
}
@media (min-width: 640px) { .hero-bar { margin: -3.5rem 2rem 0; padding: 1.1rem 1.75rem; gap: .75rem; } }

.hero-bar-field { display: flex; align-items: center; gap: .65rem; padding: .4rem .25rem; flex: 1 1 9rem; min-width: 0; }
.hero-bar-field:hover .hero-bar-value { color: var(--gold); }
.hero-bar-icon { flex-shrink: 0; color: var(--gold); }
.hero-bar-text { min-width: 0; }
.hero-bar-label { display: block; font-family: var(--font-mono); font-size: .65rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.hero-bar-value { display: block; margin-top: .15rem; font-size: .9rem; font-weight: 600; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-bar-sub { display: block; font-size: .75rem; color: rgba(255,253,249,.7); }
.hero-bar-divider { width: 1px; align-self: stretch; background: rgba(255,253,249,.18); flex-shrink: 0; }
.hero-bar-empty { flex: 1 1 auto; padding: .4rem .25rem; font-size: .9rem; color: rgba(255,253,249,.7); }
.hero-bar-cta { flex-shrink: 0; margin-left: auto; }
@media (max-width: 639px) {
  .hero-bar { flex-direction: column; align-items: stretch; }
  .hero-bar-divider { display: none; }
  .hero-bar-field { padding: .55rem .25rem; }
  .hero-bar-cta { width: 100%; margin: .25rem 0 0; }
}

/* ============ Karten & Listen ============ */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: block;
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color .15s ease;
}
.card h3 { font-size: 1.25rem; }
.card p { margin-top: .5rem; font-size: .9rem; line-height: 1.6; }

/* Kacheln durchgehend im Hero-Look: dunkles Mitternachtsblau mit Nachtmuster
   und goldenem Glanz, weißer Text — auf allen Seiten einschließlich der
   Startseite, damit die Kachelsprache überall dieselbe ist. */
.card {
  /* Farb-Token innerhalb der Karte umdefinieren: die Vorlagen setzen an
     vielen Stellen color:var(--stone) / var(--ink) / var(--midnight) direkt
     im HTML. Statt jede dieser Stellen einzeln anzufassen, zeigen die Token
     hier auf helle Werte — der vorhandene Markup zieht damit automatisch
     mit und bleibt auf hellem Grund (Startseite) unverändert gültig. */
  --stone: rgba(255,253,249,.72);
  --ink: var(--paper);
  --midnight: var(--paper);
  --gold-deep: var(--gold);
  --regal: var(--gold);
  border-color: rgba(227,167,47,.25);
  background:
    radial-gradient(24rem 12rem at 100% 0%, rgba(227,167,47,.16), transparent 70%),
    linear-gradient(rgba(11,35,55,.93), rgba(11,35,55,.93)),
    url('../images/pattern-midnight.svg') top left / 26rem auto repeat #0b2337;
  color: var(--paper);
}
/* Der goldene Button braucht weiterhin dunkle Schrift — er zieht seine
   Farbe aus --ink, das oben absichtlich hell gesetzt wurde. */
.card .btn-primary { color: #0b1925; }
/* Dasselbe für Eingabefelder: sie behalten ihren hellen Feldhintergrund,
   der eingegebene Text muss also dunkel bleiben — sonst tippt man weiß
   auf weiß und sieht die eigene Eingabe nicht. */
.card .field input,
.card .field textarea,
.card .field select { color: #0b1925; }
.card:hover { border-color: rgba(227,167,47,.65); }
.card h3 { color: var(--paper); }
.card:hover h3 { color: var(--gold); }
.card p { color: rgba(255,253,249,.78); }
.card .eyebrow { color: var(--gold); }
.card a:not(.btn) { color: var(--gold); }
/* Foto-Karten: das Bild sitzt oben, der Textteil darunter wird dunkel —
   der Verlauf würde sonst durch das Foto schimmern. */
.card.has-media .card-media { position: relative; z-index: 1; }

/* Inhalte, die auf hellem Grund gedacht waren, für den dunklen Kartengrund
   nachziehen: Formularbeschriftungen, Randnotizen und der sekundäre Button
   hätten sonst dunklen Text auf dunklem Grund. Eingabefelder selbst bleiben
   hell — dort tippt man hinein, das soll wie ein Formularfeld aussehen. */
.card .field label,
.card .consent,
.card .consent label { color: rgba(255,253,249,.85); }
.card .field span,
.card p span { color: rgba(255,253,249,.6); }
.card .btn-secondary { border-color: rgba(255,253,249,.35); color: var(--paper); }
.card .btn-secondary:hover { background: rgba(255,253,249,.12); }
.card .form-notice.is-error { background: #fff1f1; color: #991b1b; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2 { margin-top: .75rem; font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.25rem); }
.section-link { font-size: .9rem; font-weight: 600; color: var(--regal); }
.section-link:hover { text-decoration: underline; }
.section-link.on-dark { color: var(--gold); font-size: .8rem; }
.section-head + .grid { margin-top: 2rem; }

/* ============ Page-Hero (Unterseiten) ============ */
/* Ruhige Variante der Nachtszene: Goldglanz mit Konfetti oben rechts, der
   Verlauf hält die linke Seite dunkel, wo Headline und Einleitung stehen.
   Rubriken tauschen nur das Bild über --page-hero-img (Body-Klasse), der
   Verlauf und die Ausrichtung bleiben überall identisch. */
.page-hero.bg-midnight {
  background:
    linear-gradient(90deg, rgba(11,35,55,.9), rgba(11,35,55,.45) 55%, rgba(11,35,55,.05)),
    var(--page-hero-img, url('../images/page-hero-night.jpg')) right top / cover no-repeat var(--midnight);
}
.post-type-archive-team, .single-team { --page-hero-img: url('../images/mannschaften-hero.jpg'); }
/* Termine: abstraktes Motiv mit Wimpelkette (KI-generiert, 09.11.2026). Der
   Vorgänger zeigte einen fotorealistisch geschmückten Saal direkt über
   Terminen in der Schmutterhalle und wirkte wie ein Foto des echten Ortes.
   So ein Bild fällt unter die Kennzeichnungspflicht für täuschend echte
   KI-Inhalte. Für Rubrikbilder gilt deshalb: Dekoration ja, erkennbare Orte,
   Räume oder Menschen nein. */
.post-type-archive-event, .single-event { --page-hero-img: url('../images/termine-wimpel.jpg'); }
/* page-slug-* statt page-template-*: WordPress vergibt page-template-<datei>
   nur, wenn die Vorlage über die Seitenattribute zugewiesen wurde. Dieses
   Theme nutzt slug-basierte Vorlagen (page-mitmachen.php), die WordPress
   automatisch zieht — dabei bleibt die Body-Klasse page-template-default.
   Die Rubrik-Bilder griffen deshalb nie. page-slug-* liefert ccb_body_class_slug()
   in theme-helpers.php. */
.page-slug-session { --page-hero-img: url('../images/session-hero.jpg'); }
.page-slug-mitmachen { --page-hero-img: url('../images/mitmachen-hero.jpg'); }
.page-slug-chronik { --page-hero-img: url('../images/chronik-hero.jpg'); }
.page-slug-impressum { --page-hero-img: url('../images/impressum-hero.jpg'); }
.page-slug-datenschutz { --page-hero-img: url('../images/datenschutz-hero.jpg'); }
.page-slug-kontakt { --page-hero-img: url('../images/kontakt-hero.jpg'); }
.page-slug-downloads { --page-hero-img: url('../images/downloads-hero.jpg'); }
/* News laeuft als Beitragsseite, nicht als normale Seite — dort vergibt
   WordPress "blog" statt "page-slug-news". Einzelbeitraege bekommen dasselbe
   Bild, sie gehoeren zur selben Rubrik. */
.blog, .single-post { --page-hero-img: url('../images/news-hero.jpg'); }
.page-hero .container { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 640px) { .page-hero .container { padding-top: 4.5rem; padding-bottom: 4.5rem; } }
.page-hero h1 { margin-top: .75rem; font-size: clamp(2.5rem, 1.8rem + 2.8vw, 3.25rem); letter-spacing: -.02em; }
.page-hero p { margin-top: 1rem; max-width: 42rem; color: rgba(255,253,249,.75); }

/* ============ Gruppenfoto auf der Mannschaftsseite ============ */
/* Fester 3:2-Rahmen. Sechs der sieben Gruppenfotos liegen exakt in 3:2,
   an denen schneidet er nichts ab — deshalb dieses Verhältnis und kein
   breiteres: Bei Show- und Polkaformation stehen Tänzerinnen und Tänzer
   gehoben im oberen Bildviertel, ein flacherer Ausschnitt würde ihnen die
   Köpfe abschneiden. object-position greift nur beim Hochformat und holt
   dort den unteren Bildteil heran, wo die Gruppe vor dem Bühnenbild steht. */
.team-photo {
  margin: 2.5rem auto 0;
  max-width: 56rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(11,35,55,.10);
}
.team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 78%; }

/* ============ Mannschaftsseite: Steckbrief, Auftritte, Altersleiter ============ */
/* Zwei Zeilen fest für die Kurzbeschreibung im Kopf. Ohne das beginnt das
   Gruppenfoto auf jeder Seite ein Stück woanders, je nachdem ob der Satz
   darüber umbricht — beim Elferrat waren es 24 Pixel Versatz gegenüber den
   anderen sieben. Das Feld ist auf 160 Zeichen begrenzt, mehr als zwei Zeilen
   können daran also nicht entstehen. */
.single-team .page-hero p { min-height: 3.2em; }


/* Die Steckbrief-Leiste liegt bewusst dunkel unter dem hellen Gruppenfoto:
   Sie trägt den Übergang vom Bild zum Text und hebt die Angaben heraus,
   wegen derer jemand die Seite überhaupt aufruft. Die Trennlinien entstehen
   über gap plus Hintergrundfarbe des Rasters — mit Rändern an den Fächern
   säßen sie beim Umbruch in eine zweite Zeile an der falschen Stelle. */
.team-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin: 2rem 0 0;
  background: rgba(255,253,249,.16);
  border-radius: .75rem;
  overflow: hidden;
}
.team-fakten .fakt { background: var(--midnight); padding: 1.2rem 1.25rem; }
.team-fakten dt {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .45rem;
}
.team-fakten dd {
  margin: 0; color: var(--paper); font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600; line-height: 1.25;
}
.team-fakten dd small {
  display: block; font-family: var(--font-body); font-size: .8rem;
  font-weight: 400; color: rgba(255,253,249,.72); margin-top: .2rem;
}

.team-abschnitt { margin-top: 3.5rem; }
.team-abschnitt-schluss { margin-bottom: 1rem; }
.team-abschnitt-titel {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  letter-spacing: -.015em; margin: .5rem 0 0;
  border-left: 3px solid var(--gold); padding-left: .9rem;
}

.auftritte { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
.auftritt {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1.2rem; align-items: center;
  background: var(--paper); border: 1px solid rgba(11,35,55,.12);
  border-left: 3px solid var(--gold); border-radius: .6rem;
  padding: .9rem 1.1rem; text-decoration: none; color: inherit;
}
.auftritt:hover { border-color: var(--regal); border-left-color: var(--gold); }
.auftritt-datum { text-align: center; }
.auftritt-tag {
  display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  line-height: 1; color: var(--midnight); font-variant-numeric: tabular-nums;
}
.auftritt-monat {
  display: block; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--stone);
}
.auftritt-was { display: block; font-weight: 600; color: var(--midnight); }
.auftritt-wo { display: block; font-size: .85rem; color: var(--stone); }
.auftritt-art {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-deep);
  border: 1px solid rgba(138,97,18,.35); border-radius: 999px;
  padding: .2rem .6rem; white-space: nowrap;
}
@media (max-width: 34rem) {
  .auftritt { grid-template-columns: 3.5rem 1fr; gap: .9rem; }
  .auftritt-art { grid-column: 2; justify-self: start; }
}

.leiter { display: flex; align-items: stretch; gap: .5rem; overflow-x: auto; margin-top: 1.25rem; padding-bottom: .3rem; }
.leiter .stufe {
  flex: 1 1 0; min-width: 7.5rem; text-decoration: none;
  /* Nicht jede Gruppe hat eine Altersangabe. Ohne diese Ausrichtung stuenden
     die Namen auf zwei Hoehen, je nachdem ob die Kleinzeile darueber sitzt. */
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--paper); border: 1px solid rgba(11,35,55,.12);
  border-radius: .55rem; padding: .8rem .85rem;
}
.leiter .stufe:hover { border-color: var(--regal); }
.leiter .stufe.ist-hier { background: var(--midnight); border-color: var(--midnight); }
.stufe-alter { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--stone); }
.stufe.ist-hier .stufe-alter { color: var(--gold); }
.stufe-name {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  color: var(--midnight); margin-top: .25rem; line-height: 1.2;
}
.stufe.ist-hier .stufe-name { color: var(--paper); }
.leiter-linie { height: 3px; border-radius: 999px; margin-top: .7rem; background: linear-gradient(90deg, var(--gold), var(--regal)); }

.mitmach-band {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between;
  background: var(--midnight-soft); border-radius: .75rem; padding: 1.6rem 1.75rem;
}
.mitmach-motto {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  color: var(--paper); margin: .4rem 0 0; max-width: 32rem; line-height: 1.3;
}

/* ============ Termine-Liste (Ticketstub-Optik) ============ */
.agenda-month { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin: 2.5rem 0 1rem; }
.agenda-month:first-child { margin-top: 0; }
.agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.agenda-item {
  display: flex;
  border-radius: 1rem;
  border: 1px solid rgba(227,167,47,.25);
  /* Terminzeilen tragen dieselbe Kachelsprache wie der Rest der Seite. */
  background:
    radial-gradient(24rem 10rem at 100% 0%, rgba(227,167,47,.14), transparent 70%),
    linear-gradient(rgba(11,35,55,.93), rgba(11,35,55,.93)),
    url('../images/pattern-midnight.svg') top left / 26rem auto repeat var(--midnight);
  color: var(--paper);
  overflow: hidden;
}
.agenda-item:hover { border-color: rgba(227,167,47,.65); }
/* Datumsfeld hebt sich jetzt durch eine hellere Blaustufe ab, nicht mehr
   durch dunkel-gegen-hell: seit die ganze Zeile dunkel ist, würde ein
   gleich dunkles Feld mit dem Rest verschmelzen. */
.agenda-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; width: 5rem; flex-shrink: 0;
  border-right: 1px dashed rgba(227,167,47,.35);
  background: rgba(255,253,249,.07);
  padding: 1rem 0;
}
.agenda-date .dow { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,253,249,.7); }
.agenda-date .day { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--gold); }
.agenda-date .mon { font-family: var(--font-mono); font-size: .65rem; color: rgba(255,253,249,.6); }
.agenda-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; flex-wrap: wrap; }
.agenda-body h3 { font-size: 1.125rem; color: var(--paper); }
.agenda-item:hover .agenda-body h3 { color: var(--gold); }
.agenda-body .meta { margin-top: .15rem; font-size: .9rem; color: rgba(255,253,249,.72); }
.badge { flex-shrink: 0; border-radius: 999px; padding: .3rem .8rem; font-family: var(--font-mono); font-size: .65rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
/* Volles Gold wie die Tickets- und Instagram-Schaltflächen: "Reservierbar"
   ist ein Handlungshinweis und soll genauso ins Auge fallen. */
.badge-open { background: var(--gold); color: #0b1925; }
.badge-full { background: rgba(110,102,86,.15); color: var(--stone); }

/* ============ Kalender-Gitter (einfach, ohne JS-Lib) ============ */
/* Wie die Kacheln der übrigen Seiten: dunkles Mitternachtsblau mit
   Nachtmuster, goldene Akzente, helle Schrift. */
.cal {
  border-radius: 1rem;
  border: 1px solid rgba(227,167,47,.25);
  background:
    radial-gradient(30rem 14rem at 100% 0%, rgba(227,167,47,.14), transparent 70%),
    linear-gradient(rgba(11,35,55,.93), rgba(11,35,55,.93)),
    url('../images/pattern-midnight.svg') top left / 26rem auto repeat #0b2337;
  color: var(--paper);
  padding: 1.25rem;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal-head h3 { font-size: 1.15rem; color: var(--paper); text-transform: capitalize; }
.cal-nav a { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: rgba(255,253,249,.1); color: var(--gold); font-weight: 600; }
.cal-nav a:hover { background: rgba(255,253,249,.2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,253,249,.6); text-align: center; padding: .5rem 0; }
.cal-cell { min-height: 4.5rem; border-radius: .5rem; background: rgba(255,253,249,.07); padding: .35rem; font-size: .75rem; }
.cal-cell.is-empty { background: transparent; }
.cal-cell .num { font-family: var(--font-mono); color: rgba(255,253,249,.65); }
/* Heute: goldener Ring statt nur farbiger Ziffer — auf dunklem Grund fällt
   eine reine Farbänderung kaum auf. */
.cal-cell.is-today { background: rgba(227,167,47,.14); box-shadow: inset 0 0 0 1px rgba(227,167,47,.5); }
.cal-cell.is-today .num { color: var(--gold); font-weight: 700; }
.cal-event { display: block; margin-top: .2rem; border-radius: .3rem; padding: .1rem .3rem; font-size: .65rem; line-height: 1.3; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.view-toggle { display: inline-flex; border-radius: 999px; border: 1px solid rgba(11,35,55,.1); background: var(--parchment-dim); padding: .25rem; margin-bottom: 1.5rem; }
.view-toggle a { border-radius: 999px; padding: .4rem 1rem; font-size: .9rem; font-weight: 500; color: var(--stone); }
.view-toggle a.is-active { background: var(--midnight); color: var(--paper); }

/* ============ Formulare ============ */
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.field label { font-size: .9rem; font-weight: 500; color: var(--ink); display: block; margin-bottom: .35rem; }
.field input, .field textarea, .field select {
  width: 100%;
  border-radius: .5rem;
  border: 1px solid rgba(11,35,55,.15);
  background: var(--paper);
  padding: .55rem .75rem;
  font-size: .9rem;
  font-family: inherit;
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.field-error { margin-top: .25rem; font-size: .85rem; color: #b91c1c; }
.form-notice { border-radius: .75rem; padding: .75rem 1rem; font-size: .9rem; }
.form-notice.is-error { background: #fef2f2; color: #991b1b; }
.form-notice.is-success { border: 1px solid rgba(227,167,47,.4); background: var(--parchment-dim); }
.consent { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--stone); }
.consent input { margin-top: .25rem; accent-color: var(--gold-deep); }
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ============ Footer ============ */
.site-footer {
  background:
    linear-gradient(rgba(11,35,55,.93), rgba(11,35,55,.93)),
    url('../images/pattern-midnight.svg') top left / 40rem auto repeat var(--midnight);
  color: var(--paper);
}
/* Wimpelkette als Faschings-Signatur: goldene Schnur + hängende Wimpel in
   den Vereinsfarben, als kleines SVG endlos wiederholt. */
.site-footer::before {
  content: '';
  display: block;
  height: 15px;
  border-top: 2px solid rgba(227,167,47,.65);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="15"><path fill="%23e3a72f" d="M0 0h24L12 13z"/><path fill="%233a5da8" d="M24 0h24L36 13z"/><path fill="%23efe6d1" d="M48 0h24L60 13z"/></svg>') repeat-x top left / auto 15px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 3rem; /* nur oben, siehe .footer-grid */
}
.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-brand .brand-logo { height: 5rem; width: auto; }
.footer-brand .brand-name { font-size: 1.3rem; }
.footer-claim { margin-top: .25rem; max-width: 24rem; font-size: .9rem; line-height: 1.6; color: rgba(255,253,249,.7); }
.footer-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Nur oben und unten: Diese Klasse sitzt zusammen mit .container am selben
   Element. Die Kurzform "padding: … 0 …" setzte dessen seitlichen Abstand
   auf null, die Linkspalten klebten auf dem Handy am Bildschirmrand. */
.footer-grid { display: grid; gap: 2rem 2.5rem; padding-top: 2.5rem; padding-bottom: 3rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-col h3 { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.footer-col ul { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { font-size: .9rem; color: rgba(255,253,249,.75); }
.footer-col a:hover { color: var(--paper); }
.footer-bottom { display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid rgba(255,253,249,.1); padding-top: 1.5rem; padding-bottom: 1.5rem; font-size: .8rem; color: rgba(255,253,249,.6); }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-bottom-links { display: flex; gap: 1.25rem; }
.footer-bottom-links a:hover { color: var(--paper); }

/* ============ Editierbarer Inhalt (the_content(), Gutenberg-Blöcke) ============ */
.wp-content-area { line-height: 1.7; }
.wp-content-area > * + * { margin-top: 1.1em; }
.wp-content-area h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--midnight); margin-top: 2rem; }
.wp-content-area h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--midnight); }
.wp-content-area p { color: var(--ink); }

/* Fließtext außerhalb der Startseite steht direkt auf dem gemusterten
   Pergament. Nicht der Farbkontrast ist dort das Problem (der ist hoch),
   sondern die optische Unruhe des Musters — dünne, kleine Schrift
   "flimmert" darauf. Größerer Schriftgrad, etwas mehr Strichstärke und
   mehr Zeilenabstand legen den Text sichtbar über den Grund.
   Die Startseite bleibt unverändert: dort sitzt der Text auf ruhigem
   Weiß und braucht die Anhebung nicht. */
body:not(.home) .wp-content-area {
  font-size: 1.075rem;
  line-height: 1.78;
  /* 500 statt 400: die Schrift ist in den Stufen 400/500/600 eingebunden,
     Zwischenwerte rasten ohnehin auf die nächste Stufe ein. */
  font-weight: 500;
  letter-spacing: .003em;
}
body:not(.home) .wp-content-area h2 { font-size: 1.65rem; margin-top: 2.4rem; }
body:not(.home) .wp-content-area h3 { font-size: 1.25rem; }
/* Einleitungsabsatz als Lead: etwas größer und ruhiger gesetzt — gibt der
   Seite einen Einstieg und trennt ihn sichtbar vom Folgetext. */
body:not(.home) .wp-content-area > p:first-child {
  /* Auf schmalen Schirmen nur leicht angehoben — bei voller Lead-Größe
     blieben dort nur ~39 Zeichen pro Zeile übrig, das liest sich hakelig. */
  font-size: clamp(1.1rem, 1rem + .5vw, 1.2rem);
  line-height: 1.65;
  font-weight: 400;
  color: var(--midnight);
}
/* In den dunklen Kacheln gilt das nicht — dort ist der Grund ruhig und
   der Text ohnehin schon hell auf dunkel. */
.card .wp-content-area { font-size: 1rem; font-weight: 400; }

/* ============ Freistehende Textbereiche ============
   Fließtext, der nicht in einer Kachel liegt, stand bisher direkt auf dem
   gemusterten Markenhintergrund. Dagegen half nur größere, fettere Schrift —
   das behandelt aber das Symptom statt den Grund. Zwei Ausprägungen lösen es:

   .text-sheet  für lange Texte: eigene ruhige Fläche, das Muster liegt nicht
                mehr hinter der Schrift.
   .text-lead   für kurze Einleitungen: kein Kasten (der wirkte bei zwei Zeilen
                leer), sondern schmalere Spalte und ruhigere Typografie.

   Beide greifen nur über diese Klassen — Kacheln bleiben unberührt. */

.text-sheet {
	max-width: 48rem;
	background: var(--paper);
	border: 1px solid rgba(11,35,55,.10);
	border-radius: 1rem;
	padding: clamp(1.6rem, 3.5vw, 2.6rem);
	box-shadow: 0 1px 2px rgba(11,35,55,.05), 0 18px 40px -24px rgba(11,35,55,.35);
}
/* Im Kasten ist der Grund ruhig, die Anhebung gegen das Muster entfällt.
   Der Selektor nennt body:not(.home) mit, weil die Regel weiter oben sonst
   spezifischer wäre und das Schriftgewicht bei 500 bliebe. */
body:not(.home) .text-sheet .wp-content-area {
	font-weight: 400;
	font-size: 1.05rem;
	letter-spacing: 0;
}
.text-sheet > *:first-child,
.text-sheet .wp-content-area > *:first-child,
.text-sheet .timeline { margin-top: 0; }
.text-sheet .wp-content-area h2:first-child { margin-top: 0; }

/* Statement auf der Startseite: der Verein in einem Satz. Zentriert, größer
   gesetzt und mit einem kurzen goldenen Strich darüber — die Zeile bekommt
   damit Gewicht, ohne dass es eine eigene Fläche braucht. */
.home-statement {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
}
.home-statement::before {
	content: '';
	display: block;
	width: 2.5rem;
	height: 2px;
	background: var(--gold);
	margin: 0 auto 1.75rem;
}
.home-statement p {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.05rem + .85vw, 1.6rem);
	line-height: 1.45;
	font-weight: 500;
	color: var(--midnight);
	text-wrap: balance;
}
.home-statement p + p { margin-top: 1rem; }

/* ============ Goldener Balken vor Abschnittsueberschriften ============
   Dieselbe Kante wie bei den Einleitungstexten, damit Ueberschrift und Text
   zusammengehoeren und der Inhaltsbereich eine durchgehende linke Linie
   bekommt. Gold ist hier nur Flaeche, kein Text — die Kontrastwarnung in
   style.css gilt also nicht.

   Zwei Ausnahmen weiter unten: Kacheln und Zeitleiste bringen ihre Struktur
   bereits mit, dort waere der Balken doppelt. */
.section-head h2,
.section-title,
.wp-content-area h2,
.wp-content-area h3 {
	padding-left: .85rem;
	border-left: 3px solid var(--gold);
}

/* Kachel-Ueberschriften: die Kachel selbst ist die Begrenzung. */
.wp-content-area .wp-block-column h2,
.wp-content-area .wp-block-column h3,
.card .wp-content-area h2,
.card .wp-content-area h3,
/* Zeitleiste: die goldene Linie samt Punkten steht bereits links daneben. */
.timeline .wp-content-area h2,
.timeline .wp-content-area h3 {
	padding-left: 0;
	border-left: 0;
}

/* Kurze Einleitungstexte, die weder in einer Kachel noch in einer Textflaeche
   liegen. Ein senkrechter Strich in Wappengold verankert sie am linken Rand:
   ohne ihn begann der Text im leeren Raum, ohne Bezug nach oben. Genau das war
   in den recherchierten Beispielen der Unterschied — ein Erklaertext steht dort
   nie fuer sich, sondern haengt an einer Ueberschrift oder einer sichtbaren
   Kante. Bewusst rein grafisch geloest, damit niemand zusaetzliche
   Rubrikzeilen pflegen muss. */
.text-lead {
	max-width: 42rem;
	/* Gleicher Innenabstand wie bei den Überschriften, damit Balken und
	   Textkante über beide hinweg auf einer Linie stehen. */
	padding-left: .85rem;
	border-left: 3px solid var(--gold);
}
.text-lead .wp-content-area p {
	margin: 0;
	font-size: clamp(1.05rem, .98rem + .35vw, 1.18rem);
	line-height: 1.65;
	font-weight: 400;
	color: var(--midnight);
	letter-spacing: 0;
}
.text-lead .wp-content-area p + p { margin-top: .8rem; }

/* Variante für Texte, die direkt unter einer Überschrift stehen: dort trägt
   bereits die Überschrift den Balken, ein zweiter darunter wäre doppelt.
   Nur die Farbe wird zurückgenommen — der Einzug bleibt, damit der Text an
   der Textkante der Überschrift ausgerichtet bleibt. */
.text-lead--under-title { border-left-color: transparent; }

/* Initiale als Einstieg — bewusst NICHT im Standard von .text-lead, sondern
   nur über diese Zusatzklasse. Alle heute vorhandenen kurzen Texte sind zwei
   bis vier Zeilen rein funktionaler Art ("hier findet ihr die Formulare …");
   eine Initiale zieht dort Aufmerksamkeit auf einen Satz, der keine braucht,
   und wirkt neben den Kacheln unruhig. Sobald ein längerer erzählender
   Einstieg entsteht, genügt .text-lead--initial am Container.
   Nur der erste Absatz bekommt sie, sonst startet jeder Abschnitt mit einer. */
.text-lead--initial .wp-content-area > p:first-child::first-letter {
	float: left;
	font-family: var(--font-display);
	font-size: 3.4em;
	line-height: .84;
	padding: .06em .12em 0 0;
	color: var(--gold-deep);
	font-weight: 600;
}
.wp-content-area ul, .wp-content-area ol { padding-left: 1.25rem; }
.wp-content-area a { color: var(--regal); text-decoration: underline; }
.wp-content-area .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.75rem; }
/* Kacheln im Hero-Look: dunkles Mitternachtsblau mit dem Nachtmuster und
   goldenem Glanz oben rechts, weißer Text — dieselbe Bildsprache wie der
   Hero-Bereich, statt heller Karten auf hellem Grund. */
.wp-content-area .wp-block-column {
	flex: 1 1 14rem;
	border-radius: 1rem;
	border: 1px solid rgba(227,167,47,.25);
	background:
		radial-gradient(24rem 12rem at 100% 0%, rgba(227,167,47,.16), transparent 70%),
		linear-gradient(rgba(11,35,55,.93), rgba(11,35,55,.93)),
		url('../images/pattern-midnight.svg') top left / 26rem auto repeat var(--midnight);
	color: var(--paper);
	padding: 1.75rem;
}
/* Silbentrennung in den Kachel-Ueberschriften: deutsche Komposita wie
   "Beitrittserklaerung" sind breiter als eine Kachel und brachen sonst mitten
   im Wort ohne Trennstrich um. */
.wp-content-area .wp-block-column h3 {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
	color: var(--paper);
	hyphens: auto;
	overflow-wrap: break-word;
}
.wp-content-area .wp-block-column p {
	margin: 0;
	font-size: .9rem;
	color: rgba(255,253,249,.78);
	hyphens: auto;
	overflow-wrap: break-word;
}
.wp-content-area .wp-block-column a { color: var(--gold); }

/* Datei-Block (Downloads-Seite etc.) — ebenfalls in der Kachelsprache */
.wp-content-area .wp-block-file {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	border-radius: 1rem;
	border: 1px solid rgba(227,167,47,.25);
	background:
		linear-gradient(rgba(11,35,55,.93), rgba(11,35,55,.93)),
		url('../images/pattern-midnight.svg') top left / 26rem auto repeat var(--midnight);
	color: var(--paper);
	padding: 1rem 1.25rem;
}
.wp-content-area .wp-block-file a:first-child { color: var(--paper); font-weight: 600; text-decoration: none; }
.wp-content-area .wp-block-file a:first-child:hover { color: var(--gold); }
.wp-content-area .wp-block-file__button {
	margin-left: auto;
	display: inline-flex;
	border-radius: 999px;
	padding: .6rem 1.25rem;
	font-size: .85rem;
	font-weight: 600;
	background: var(--gold);
	color: var(--ink) !important;
	text-decoration: none !important;
}
.wp-content-area .wp-block-file__button:hover { background: #f0b94a; }

/* Bilder und Galerie-Block im Inhalt: gleiche Rundung wie die Karten, damit
   Mannschaftsfotos aus dem Editor zum restlichen Layout passen. Das Raster
   selbst kommt vom Galerie-Block aus dem WordPress-Kern. */
.wp-content-area .wp-block-image img,
.wp-content-area .wp-block-gallery figure.wp-block-image img { border-radius: 1rem; }
.wp-content-area .wp-block-gallery { margin-top: 1.75rem; }

/* ============ Scroll-Reveals ============ */
/* Nur aktiv, wenn JS die html-Klasse gesetzt hat — ohne JS bleibt alles
   sichtbar. Bei prefers-reduced-motion erscheinen Elemente ohne Bewegung
   (die globale Regel oben kürzt die Transition auf 0.01ms). */
.js-reveal .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity .6s ease, transform .6s ease; }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* Header wirft erst beim Scrollen einen Schatten — oben liegt er flach auf. */
.site-header.is-scrolled { box-shadow: inset 0 -1px 0 rgba(227,167,47,.3), 0 .5rem 1.5rem -.75rem rgba(11,35,55,.45); }

/* ============ Zahlen-Band (Der CCB in Zahlen) ============ */
.stats-band {
  background:
    linear-gradient(rgba(11,35,55,.88), rgba(11,35,55,.88)),
    url('../images/pattern-midnight.svg') top left / 40rem auto repeat var(--midnight);
  color: var(--paper);
}
.stats-grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 900px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
  line-height: 1;
  color: var(--gold);
}
.stat-label {
  display: block;
  margin-top: .6rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,253,249,.7);
}

/* ============ Downloads: Dokumentkacheln ============ */
/* Eigenes Raster statt .grid-3: auto-fill haelt die Kachelbreite konstant,
   egal wie viele Dokumente hinterlegt sind. Bei .grid-3 waere eine einzelne
   Kachel in der letzten Reihe auf volle Breite gewachsen.

   12.5rem als Mindestbreite ist auf den 48rem breiten Inhaltsbereich der
   Downloads-Seite abgestimmt: abzueglich Innenabstand bleiben rund 45.5rem,
   darin liegen drei Spalten. Mit 14rem kippte es auf zwei. */
.doc-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  margin-top: 2rem;
}
.doc-sheet {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(227,167,47,.25);
  background:
    radial-gradient(24rem 12rem at 100% 0%, rgba(227,167,47,.16), transparent 70%),
    linear-gradient(rgba(11,35,55,.93), rgba(11,35,55,.93)),
    url('../images/pattern-midnight.svg') top left / 26rem auto repeat var(--midnight);
  transition: border-color .15s ease, transform .15s ease;
}
.doc-sheet:hover { border-color: rgba(227,167,47,.7); transform: translateY(-3px); }
.doc-sheet:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Angedeutetes Blatt Papier mit Eselsohr — macht den Dateityp ohne Worte
   klar. Rein aus CSS gebaut, damit es kein zusaetzliches Bild braucht. */
.doc-sheet-top {
  height: 6.5rem;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(227,167,47,.16), rgba(227,167,47,.02));
  border-bottom: 1px solid rgba(227,167,47,.18);
}
.doc-paper {
  position: relative;
  width: 3.1rem;
  height: 4rem;
  border-radius: .35rem .9rem .35rem .35rem;
  background: var(--paper);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  display: grid;
  place-items: end center;
  padding-bottom: .45rem;
}
.doc-paper::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  border-width: 0 .9rem .9rem 0;
  border-style: solid;
  border-color: transparent rgba(11,35,55,.22) transparent transparent;
}
.doc-paper span {
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #b3350c;
}

.doc-sheet-body {
  padding: 1.15rem 1.3rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
}
.doc-sheet-body h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--paper);
  hyphens: auto;
  overflow-wrap: break-word;
}
.doc-sheet-body p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(255,253,249,.72);
  flex: 1;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Fusszeile auf gleicher Hoehe: flex:1 auf dem Absatz schiebt sie nach unten,
   dadurch stehen Groesse und Aktion in allen Kacheln auf einer Linie. */
.doc-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .35rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(255,253,249,.12);
  font-family: var(--font-mono);
  font-size: .75rem;
  color: rgba(255,253,249,.6);
}
.doc-sheet-foot .doc-go { color: var(--gold); }
.doc-sheet:hover .doc-sheet-foot .doc-go { text-decoration: underline; }

/* ============ Foto-Karten (Mannschaften/News) ============ */
.card.has-media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-media-fallback {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(11,35,55,.55), rgba(11,35,55,.55)),
    url('../images/pattern-midnight.svg') center / 26rem auto repeat var(--midnight);
}
.card-media-fallback img { max-height: 55%; width: auto; }
.card-body { padding: 1.25rem 1.5rem 1.5rem; }
.card-body .eyebrow { font-size: .65rem; }
.card-body h3 { margin-top: .5rem; }

/* ============ CTA-Band (Mach mit) ============ */
.cta-band {
  border-radius: 1.75rem;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  background:
    linear-gradient(100deg, rgba(11,35,55,.82), rgba(11,35,55,.4) 60%, rgba(11,35,55,.15)),
    url('../images/mitmachen-hero.jpg') center / cover no-repeat var(--midnight);
  color: var(--paper);
}
.cta-band h2 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.75rem); max-width: 24ch; }
.cta-band p { margin-top: 1rem; max-width: 44rem; color: rgba(255,253,249,.85); }
.cta-band .btn { margin-top: 1.75rem; }

/* ============ Chronik-Timeline ============ */
.timeline { position: relative; max-width: 46rem; padding-left: 1.75rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: .3rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(var(--gold), rgba(227,167,47,.15));
}
.timeline .wp-content-area h2 { margin-top: 2.5rem; }
.timeline .wp-content-area h3 {
  position: relative;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--gold-deep);
}
.timeline .wp-content-area h3::before {
  content: '';
  position: absolute;
  left: -1.75rem;
  top: .2rem;
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--parchment);
}

/* ============ Mitmachen-Wege ============ */
.wege-grid .card { border-top: 3px solid var(--gold); }
.wege-grid .card .eyebrow { margin-bottom: .25rem; }

/* ============ Skip-Link ============ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  padding: .75rem 1.25rem;
  border-radius: 0 0 .5rem 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ============ WordPress-Standardklassen zähmen ============ */
.alignnone, .aligncenter { margin: 1rem auto; }
.wp-caption { max-width: 100%; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

/* ============ Terminseite: Text und Plakat ============ */
/* Ersetzt das frühere Inline-Grid, das auf dem Handy zweispaltig blieb.
   Einspaltig mit Lesebreite, solange es rechts nichts zu zeigen gibt;
   zweispaltig, sobald ein Plakat oder das Reservierungsformular da ist. */
.event-layout { display: grid; gap: 2.5rem; align-items: start; grid-template-columns: minmax(0, 46rem); }
.event-layout--zweispaltig { grid-template-columns: 1.2fr 1fr; }
@media (max-width: 800px) {
	.event-layout--zweispaltig { grid-template-columns: minmax(0, 1fr); }
}
/* Plakate sind Hochformat mit Text bis zum Rand: nie beschneiden, nie breiter
   als die Datei hergibt (die kleinen Plakate sind nur gut 400 px breit). */
.event-plakat { margin: 0; justify-self: center; max-width: 26rem; width: 100%; }
.event-plakat a { display: block; }
.event-plakat img { display: block; width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 18px 40px -18px rgba(15, 27, 45, .45); }
.event-layout > div > .event-plakat { margin-top: 2rem; }

/* ============ Zweispaltige Inhaltsbereiche ============ */
/* Gruppenseite (Text neben Ansprechpartner-Kasten) und Session-Seite trugen
   ihr Raster als Inline-Stil. Das blieb auf dem Handy zweispaltig und schob
   den Kasten aus dem Bild, die Seite ließ sich waagrecht verschieben.
   Jetzt einspaltig als Grundzustand, zweispaltig erst ab Tablet-Breite.
   minmax(0, …) statt 1fr, damit lange Wörter die Spalte nicht aufdrücken. */
.inhalt-spalten { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 801px) {
	.inhalt-spalten--text-kasten { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
	.inhalt-spalten--gleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Formularfelder: 44 px Mindesthöhe, damit sie sich auf dem Handy sicher treffen
   lassen (vorher 37 px). Mehrzeilige Felder sind ohnehin höher. */
.field input:not([type=checkbox]):not([type=radio]), .field select { min-height: 2.75rem; }

/* ============ Sehr schmale Bildschirme (320 px) ============ */
/* Drei Stellen liefen dort waagrecht über, gefunden mit docs/check_mobile.mjs:
   - Lange Wörter in Überschriften ("Faschingssaison") passten nicht in die Zeile.
     Trennen statt überlaufen; die Sprache der Seite ist de, die Trennung stimmt.
   - Rasterspalten wuchsen mit ihrem Inhalt mit: Die lange E-Mail-Adresse auf der
     Kontaktseite drückte ihre Karte breiter als den Bildschirm, im Kalender taten
     es die Terminnamen. 1fr heißt minmax(auto, 1fr); erst min-width: 0 bzw.
     minmax(0, 1fr) erlaubt der Spalte, schmaler als ihr Inhalt zu werden. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
@media (max-width: 480px) {
	h1, h2 { hyphens: auto; }
}
.grid > * { min-width: 0; }
.card { overflow-wrap: break-word; }
.cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell { min-width: 0; overflow: hidden; }
/* - Knöpfe mit langer Beschriftung (Kontaktseite) blieben einzeilig und ragten
     aus ihrer Karte. Auf schmalen Bildschirmen dürfen sie umbrechen. */
.btn { max-width: 100%; }
@media (max-width: 480px) {
	.btn { white-space: normal; text-align: center; }
}

/* ============ Eintrittskarte: Terminseiten und News-Beiträge ============ */
/* Die Eckdaten einer Seite stehen auf einer Karte mit Abriss, wie ein
   Ballticket: links der dunkle Abschnitt mit dem Datum, in der Mitte die
   Angaben, rechts der Abriss mit der Handlung. Die Karte ragt in das Kopfbild
   hinein und verbindet so Kopf und Inhalt.

   Aufbau:  .ticket            trägt Lage und Schatten
            .ticket-flaeche    die Papierfläche mit den ausgestanzten Löchern
   Der Schatten liegt als drop-shadow auf der äußeren Hülle, weil die Maske der
   Fläche einen box-shadow mit abschneiden würde. */
.page-hero--ticket .container { padding-bottom: 6rem; }
@media (min-width: 640px) { .page-hero--ticket .container { padding-bottom: 7rem; } }

.ticket-seite { padding-bottom: 3.5rem; }
@media (min-width: 640px) { .ticket-seite { padding-bottom: 4.5rem; } }

.ticket {
	--ticket-stub: 10.5rem;
	--ticket-abriss: 16.5rem;
	--ticket-loch: .72rem;
	--ticket-naht: rgba(11,35,55,.28);
	position: relative;
	z-index: 3;
	margin-top: -3.4rem;
	filter: drop-shadow(0 22px 26px rgba(11,35,55,.26)) drop-shadow(0 2px 3px rgba(11,35,55,.10));
}
.ticket-flaeche {
	display: grid;
	grid-template-columns: var(--ticket-stub) minmax(0, 1fr) var(--ticket-abriss);
	background: var(--paper);
	border-radius: 1.4rem;
	overflow: hidden;
	/* Vier Stanzlöcher, je eines am oberen und unteren Ende der beiden Nähte.
	   Ohne mask-composite bleibt die Karte einfach ganz, das ist in Ordnung. */
	-webkit-mask:
		radial-gradient(circle var(--ticket-loch) at var(--ticket-stub) 0, #0000 98%, #000) ,
		radial-gradient(circle var(--ticket-loch) at var(--ticket-stub) 100%, #0000 98%, #000),
		radial-gradient(circle var(--ticket-loch) at calc(100% - var(--ticket-abriss)) 0, #0000 98%, #000),
		radial-gradient(circle var(--ticket-loch) at calc(100% - var(--ticket-abriss)) 100%, #0000 98%, #000);
	-webkit-mask-composite: source-in;
	mask:
		radial-gradient(circle var(--ticket-loch) at var(--ticket-stub) 0, #0000 98%, #000) ,
		radial-gradient(circle var(--ticket-loch) at var(--ticket-stub) 100%, #0000 98%, #000),
		radial-gradient(circle var(--ticket-loch) at calc(100% - var(--ticket-abriss)) 0, #0000 98%, #000),
		radial-gradient(circle var(--ticket-loch) at calc(100% - var(--ticket-abriss)) 100%, #0000 98%, #000);
	mask-composite: intersect;
}

.ticket-stub {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .15rem;
	padding: 1.8rem 1.2rem;
	background: var(--midnight);
	color: var(--paper);
	text-align: center;
}
.ticket-stub-wt { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.ticket-stub-tag { font-family: var(--font-display); font-weight: 700; font-size: 5rem; line-height: .95; letter-spacing: -.04em; }
.ticket-stub-monat { font-family: var(--font-mono); font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; }

.ticket-fakten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.3rem 1.4rem;
	align-content: center;
	margin: 0;
	padding: 1.9rem 2rem;
	border-left: 2px dashed var(--ticket-naht);
	border-right: 2px dashed var(--ticket-naht);
}
.ticket-fakt { min-width: 0; }
.ticket-fakt--breit { grid-column: span 2; }
.ticket-fakt dt { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.ticket-fakt dd { margin: .2rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; line-height: 1.2; color: var(--midnight); overflow-wrap: break-word; hyphens: auto; }
.ticket-fakt dd small { display: block; margin-top: .15rem; font-family: var(--font-body); font-weight: 400; font-size: .82rem; line-height: 1.45; color: var(--stone); }

.ticket-abriss { display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: 1.8rem 1.5rem; min-width: 0; }
.ticket-abriss-nr { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.ticket-strichcode {
	height: 2.6rem;
	border-radius: 2px;
	opacity: .85;
	background: repeating-linear-gradient(90deg, var(--midnight) 0 2px, transparent 2px 5px, var(--midnight) 5px 6px, transparent 6px 11px, var(--midnight) 11px 14px, transparent 14px 17px);
}
/* Der Knopf füllt den Abriss und bleibt einzeilig; dafür etwas schmalerer
   Innenabstand als beim Standardknopf. */
.ticket-abriss .btn { display: flex; padding-left: 1rem; padding-right: 1rem; white-space: nowrap; }
.ticket-abriss-link { font-size: .9rem; font-weight: 600; color: var(--regal); }
.ticket-abriss-link:hover { text-decoration: underline; }
.ticket-abriss-termin { display: block; }
.ticket-abriss-termin b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: var(--midnight); overflow-wrap: break-word; hyphens: auto; }
.ticket-abriss-termin span { display: block; margin-top: .3rem; font-size: .9rem; font-weight: 600; color: var(--regal); }
.ticket-abriss-termin:hover b { color: var(--regal); }

/* News-Beitrag: dieselbe Karte, flacher. Im Abschnitt steht das Datum des
   Beitrags, in der Mitte eine einzige Angabe (das Motto der Session). */
.ticket--news { --ticket-stub: 9.5rem; }
.ticket--news .ticket-stub { padding: 1.3rem 1rem; }
.ticket--news .ticket-stub-tag { font-size: 3.6rem; }
.ticket--news .ticket-stub-monat { font-size: .82rem; }
.ticket--news .ticket-fakten { grid-template-columns: minmax(0, 1fr); padding: 1.4rem 2rem; }
.ticket--news .ticket-fakt--breit { grid-column: auto; }
.ticket--news .ticket-fakt dd { font-size: clamp(1.25rem, .95rem + 1.2vw, 1.9rem); line-height: 1.15; }
.ticket--news .ticket-abriss { padding: 1.3rem 1.5rem; gap: .45rem; }

/* Mittlere Breite: drei Spalten Angaben passen nicht mehr neben Abschnitt
   und Abriss ("Schmutterhalle" braucht allein gut 10 rem). */
@media (max-width: 1100px) {
	.ticket-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Schmal: Die Karte steht hochkant. Der Abschnitt wird zur Kopfzeile, die
   Nähte liegen waagrecht, die Stanzlöcher entfallen (sie säßen sonst an
   Stellen, an denen keine Naht mehr ist). */
@media (max-width: 860px) {
	.ticket { margin-top: -3rem; }
	.ticket-flaeche { grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; border-radius: 1.1rem; }
	.ticket-stub, .ticket--news .ticket-stub { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: .7rem; padding: .9rem 1.3rem; text-align: left; }
	.ticket-stub-tag, .ticket--news .ticket-stub-tag { font-size: 2.4rem; line-height: 1; }
	.ticket-stub-monat { font-size: .82rem; }
	.ticket-fakten, .ticket--news .ticket-fakten { border-left: 0; border-right: 0; border-bottom: 2px dashed var(--ticket-naht); padding: 1.4rem 1.3rem; }
	.ticket-abriss, .ticket--news .ticket-abriss { padding: 1.3rem; }
	.ticket-strichcode { display: none; }
}
@media (max-width: 480px) {
	.ticket-fakten { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.ticket-fakt--breit { grid-column: auto; }
	.ticket-fakt dd { font-size: 1.3rem; }
}

/* ---- Inhalt unter der Karte ---- */
.ticket-seite .event-layout { margin-top: 3.2rem; }
/* Steht nur das Plakat neben dem Text, sitzt der Text auf dessen Mitte.
   Oben angeschlagen hinge ein einzelner Satz neben einem hohen Plakat in der Luft. */
@media (min-width: 801px) { .event-layout--plakat { align-items: center; } }

/* Einstieg der Terminseite: Der erste Absatz ist die Ansage des Abends und
   steht deshalb in der Auszeichnungsschrift, alles Weitere als Fließtext.
   body:not(.home) steht im Selektor, weil die allgemeine Lead-Regel weiter
   oben sonst spezifischer wäre. */
.einstieg { max-width: 40rem; }
body:not(.home) .einstieg .wp-content-area > p:first-child,
body:not(.home) .news-inhalt > p:first-child {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.3rem, 1.08rem + 1vw, 1.7rem);
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--midnight);
	text-wrap: balance;
}

/* Das Plakat hängt leicht schräg an zwei Streifen Klebeband, als hinge es am
   Schwarzen Brett. Beim Zeigen rückt es gerade. */
.event-plakat--geklebt { position: relative; max-width: 19rem; transform: rotate(2.2deg); }
.event-plakat--geklebt img { border-radius: .5rem; box-shadow: 0 24px 50px -22px rgba(11,35,55,.6); }
.event-plakat--geklebt::before,
.event-plakat--geklebt::after {
	content: '';
	position: absolute;
	top: -.7rem;
	z-index: 2;
	width: 5.5rem;
	height: 1.5rem;
	background: rgba(227,167,47,.55);
	pointer-events: none;
}
.event-plakat--geklebt::before { left: -1.4rem; transform: rotate(-38deg); }
.event-plakat--geklebt::after { right: -1.4rem; transform: rotate(36deg); }
@media (prefers-reduced-motion: no-preference) {
	.event-plakat--geklebt { transition: transform .25s ease; }
}
.event-plakat--geklebt:hover,
.event-plakat--geklebt:focus-within { transform: rotate(0deg); }
@media (max-width: 480px) {
	.event-plakat--geklebt { transform: rotate(1.2deg); max-width: 16rem; }
	.event-plakat--geklebt::before, .event-plakat--geklebt::after { width: 4rem; }
	.event-plakat--geklebt::before { left: -.8rem; }
	.event-plakat--geklebt::after { right: -.8rem; }
}

/* Zwischenüberschrift mit Verweis rechts ("Danach geht es weiter" … "Alle
   Termine"). Trägt denselben goldenen Balken wie die übrigen Überschriften. */
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin: 3.6rem 0 1.2rem; }
.abschnitt-kopf h2 { font-size: 1.6rem; color: var(--midnight); padding-left: .85rem; border-left: 3px solid var(--gold); }
.abschnitt-kopf a { font-size: .92rem; font-weight: 600; color: var(--regal); }
.abschnitt-kopf a:hover { text-decoration: underline; }

/* ---- Kleine Karten: Terminlisten und "Weitere News" ---- */
.mini-tickets { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-tickets--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .mini-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mini-tickets, .mini-tickets--zwei { grid-template-columns: minmax(0, 1fr); } }

.mini-ticket {
	display: grid;
	grid-template-columns: 4.6rem minmax(0, 1fr) auto;
	align-items: stretch;
	overflow: hidden;
	border-radius: .9rem;
	background: var(--paper);
	box-shadow: 0 10px 26px -18px rgba(11,35,55,.5), 0 1px 2px rgba(11,35,55,.08);
}
@media (prefers-reduced-motion: no-preference) {
	.mini-ticket { transition: transform .15s ease, box-shadow .15s ease; }
	.mini-ticket-pfeil { transition: transform .15s ease; }
}
.mini-ticket:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(11,35,55,.6), 0 1px 2px rgba(11,35,55,.08); }
.mini-ticket:hover .mini-ticket-pfeil { transform: translateX(3px); }
.mini-ticket-datum { display: flex; flex-direction: column; justify-content: center; padding: .8rem .4rem; background: var(--midnight); color: var(--paper); text-align: center; }
.mini-ticket-datum b { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1; }
.mini-ticket-datum span { margin-top: .2rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mini-ticket-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: .75rem 1rem; border-left: 2px dashed rgba(11,35,55,.22); }
.mini-ticket-text b { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.25; color: var(--midnight); overflow-wrap: break-word; }
.mini-ticket-text span { margin-top: .15rem; font-size: .84rem; line-height: 1.45; color: var(--stone); }
.mini-ticket-text em { margin-bottom: .2rem; font-style: normal; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.mini-ticket-pfeil { display: flex; align-items: center; padding: 0 1rem; font-size: 1.2rem; color: var(--gold-deep); }
.mini-ticket.ist-hervorgehoben { outline: 2px solid var(--gold); outline-offset: 0; }

/* ---- Preiskacheln ---- */
.preis-kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .preis-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .preis-kacheln { grid-template-columns: minmax(0, 1fr); } }
.preis-kachel { display: block; padding: 1.1rem 1.2rem; border-top: 4px solid var(--gold); border-radius: .9rem; background: var(--paper); box-shadow: 0 10px 26px -18px rgba(11,35,55,.5), 0 1px 2px rgba(11,35,55,.08); }
.preis-kachel b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--midnight); }
.preis-kachel--lang b { font-size: 1.15rem; line-height: 1.3; }
.preis-kachel span { display: block; margin-top: .45rem; font-size: .92rem; font-weight: 600; color: var(--ink); }
.preis-kachel em { display: block; margin-top: .15rem; font-style: normal; font-size: .8rem; line-height: 1.45; color: var(--stone); }
.preis-kachel:hover span { color: var(--regal); }

/* ---- News-Beitrag: Text unter der Karte ---- */
/* Fließtext in Lesebreite, die Bausteine (Terminkarten, Preiskacheln) dürfen
   die volle Breite nutzen. */
.news-inhalt { margin-top: 2.8rem; }
.news-inhalt > * { max-width: 44rem; }
.news-inhalt > .mini-tickets,
.news-inhalt > .preis-kacheln { max-width: none; }
body:not(.home) .news-inhalt h2 { margin-top: 3rem; }
.news-inhalt h2 + .mini-tickets,
.news-inhalt h2 + .preis-kacheln { margin-top: 1.2rem; }
/* Karten und Kacheln sind Verweise, sollen aber nicht wie Textlinks aussehen. */
.wp-content-area a.mini-ticket,
.wp-content-area a.preis-kachel { color: inherit; text-decoration: none; }
/* Von Hand getippte Listen: Zeilen mit goldenem Punkt statt Aufzählungszeichen. */
.news-inhalt > ul { list-style: none; padding-left: 0; }
.news-inhalt > ul > li { position: relative; padding: .6rem 0 .6rem 1.5rem; border-bottom: 1px solid rgba(11,35,55,.13); }
.news-inhalt > ul > li::before { content: ''; position: absolute; left: .15rem; top: 1.25rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); }

/* ---- Terminübersicht im Aufbau der Termin-News ---- */
/* Umschalter Liste/Kalender und der Kalenderdatei-Knopf, unter der Karte. */
.termine-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1.5rem; }
.section-pad > .termine-leiste:first-child { margin-top: 0; }
.abschnitt-kopf--nah { margin-top: 1.5rem; }
.termine-hinweis { margin-top: 1.2rem; font-size: .95rem; color: var(--stone); }
/* Vergangene Termine bleiben in der Liste, treten aber zurück. Die Marke
   "Vorbei" sagt es zusätzlich in Worten, nicht nur über die Blässe. */
.mini-ticket.ist-vorbei { opacity: .62; }
.mini-ticket.ist-vorbei .mini-ticket-text em { color: var(--stone); }

/* Fließtext in einem blauen Kasten (Session-Seite): Abstand zur Überschrift
   und zwischen den Absätzen; Farbe und Größe kommen von .card p. */
.karten-text { margin-top: 1rem; }
.karten-text p + p { margin-top: .6rem; }