@charset "UTF-8";
/* ==========================================================================
   TSV „Elbe" Aken 1863 e.V.
   Ein Stylesheet fuer die gesamte Website.

   Haltung: Sportplakat. Flaechiges Vereinsrot und Wappenschwarz, harte
   Druckschatten statt Weichzeichner, Versalien in Onest 900 wie von der
   Plakatpresse. Die Zierformen kommen aus der Halle dieses Vereins:
   Hallenlinien (Freiwurfbogen, Anstosskreis), Wimpel als Tags,
   Rueckennummern auf den Abteilungskarten, weiss gerahmte und leicht
   gekippte Fotos wie an der Wand im Vereinsheim.

   Keine Verlaeufe, kein Glas, keine weichen Schlagschatten, kein Laufband.

   Aufbau
     1  Schriften
     2  Stellschrauben  (Farben, Groessen, Abstaende, Kontur, Stanzschatten)
     3  Grundlagen
     4  Kopf und Navigation  (dunkel)
     5  Bausteine  (Knoepfe, Wimpel, Karten, Fotorahmen)
     6  Startseite  (rotes Feld, Anstosspunkt, Kader, Meldungen, Tafel)
     7  Wochenplan  (dunkle Halle)
     8  Abteilungsseiten  (rote Deckseite, Steckbrief, Fotowand)
     9  Textseiten, Chronik, Neuigkeiten
    10  Fuss
    11  Bewegung
    12  Druck
   ========================================================================== */

/* 1  Schriften ============================================================ */
/* Eine einzige Schriftfamilie: Onest, variabel 300-900, liegt lokal in
   assets/fonts/ und wird nie von einem fremden Server geladen — dadurch
   keine Verbindungen zu Dritten und kein Einwilligungsbanner noetig.
   Onest: SIL Open Font License 1.1 */

@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* 2  Stellschrauben ======================================================= */

:root {
  /* Farben, alle aus dem Wappen entwickelt. */
  --rot: #da251c;          /* Vereinsrot, Flaechenfarbe */
  --rot-tief: #b31a13;     /* Links und Hover auf hellem Grund, 6,8:1 */
  --rot-hell: #ff6a5e;     /* Akzent auf dunklem Grund */
  --nacht: #16121a;        /* Wappenschwarz, vertieft: Kopf, Halle, Fuss */
  --nacht-karte: #221c26;  /* erhoehte Flaeche auf dunklem Grund */
  --papier: #faf9f7;       /* heller Grund */
  --flaeche: #f1efec;      /* ruhiges Band im Hellen */
  --weiss: #ffffff;
  --tinte: #16121a;        /* Text im Hellen = Wappenschwarz */
  --tinte-70: #514a56;
  --tinte-45: #6d6572;     /* Beschriftungen, ueber 4,5:1 */
  --linie: #e6e2dd;
  --linie-stark: #d2cdc6;
  --kreide: rgb(255 255 255 / 0.16);  /* Hallenlinien auf Rot und Nacht */

  --display: "Onest", "Segoe UI", system-ui, sans-serif;
  --text: "Onest", "Segoe UI", system-ui, sans-serif;

  --t-hero: clamp(2.5rem, 1.3rem + 4.8vw, 5.25rem);
  --t-h2: clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
  --t-h3: 1.25rem;
  --t-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-klein: 0.9375rem;
  --t-mini: 0.8125rem;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 4rem;
  --lage: clamp(4rem, 7vw, 7rem);

  --r-klein: 8px;
  --r: 12px;
  --r-gross: 16px;

  /* Stanzschatten: hart, versetzt, ohne Weichzeichner — wie gedruckt. */
  --stanz: 6px 6px 0 var(--nacht);
  --stanz-gross: 10px 10px 0 var(--nacht);
  --stanz-rot: 6px 6px 0 var(--rot);
  --kontur: 2px solid var(--nacht);

  --breite: 76rem;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --schwung: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3  Grundlagen =========================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  scrollbar-color: var(--linie-stark) var(--papier);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* gekippte Fotorahmen ragen minimal hinaus */
}

::selection { background: var(--rot); color: var(--weiss); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--papier); }
::-webkit-scrollbar-thumb {
  background: var(--linie-stark);
  border: 3px solid var(--papier);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--tinte-45); }

/* Versalien wie von der Plakatpresse. */
h1, h2 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--rot-tief); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--rot); }

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
/* Ein <picture> muss die Hoehe seines Rahmens erben, sonst behaelt das Foto
   sein eigenes Seitenverhaeltnis und die Karten werden unterschiedlich hoch. */
.karte__bild picture, .bild picture, .aufmacher__bild picture { height: 100%; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Auf rotem und dunklem Grund traegt der rote Ring nicht — dort weiss. */
.aufmacher :focus-visible, .seitenkopf :focus-visible, .tafel :focus-visible,
.fuss :focus-visible, .kopf :focus-visible, .lage--nacht :focus-visible {
  outline-color: var(--weiss);
}

.zum-inhalt {
  position: absolute;
  left: var(--s-4);
  top: -100%;
  z-index: 100;
  background: var(--nacht);
  color: var(--weiss);
  border: 2px solid var(--weiss);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-klein);
  font-size: var(--t-klein);
  font-weight: 700;
  text-decoration: none;
}
.zum-inhalt:focus { top: var(--s-3); }

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

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.huelle--schmal { max-width: 46rem; }

.lage { padding-block: var(--lage); }
.lage--flaeche { background: var(--flaeche); }
/* Schliesst direkt an den vorigen Abschnitt an, ohne doppelten Abstand. */
.lage--anschluss { padding-top: 0; }

/* Dunkle Halle: Abschnitt in Wappenschwarz. */
.lage--nacht { background: var(--nacht); color: var(--weiss); }
.lage--nacht h2 { color: var(--weiss); }
.lage--nacht .kopfzeile p { color: rgb(255 255 255 / 0.72); }

.satz { max-width: 62ch; }
.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--tinte-70);
  max-width: 48ch;
}

/* 4  Kopf und Navigation ================================================== */
/* Der Kopf ist Wappenschwarz — das Wappen steht gross und leuchtet darauf. */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nacht);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--schwung), box-shadow 0.3s var(--schwung);
}
.kopf--gescrollt {
  border-bottom-color: rgb(255 255 255 / 0.14);
  box-shadow: 0 4px 0 rgb(22 18 26 / 0.25);
}

.kopf__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding: var(--s-3) var(--rand);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.marke-oben {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--weiss);
}
.marke-oben img {
  width: 52px; height: 52px; flex: none;
  transition: transform 0.35s var(--schwung);
}
.marke-oben:hover img { transform: rotate(-5deg); }
.marke-oben b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.05;
  white-space: nowrap;
}
.marke-oben b small {
  display: block;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}

.haupt-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 1vw, 0.6rem);
  margin: 0; padding: 0;
  list-style: none;
}
.haupt-nav a {
  position: relative;
  display: block;
  padding: 0.5rem 0.8rem;
  color: rgb(255 255 255 / 0.78);
  font-size: var(--t-klein);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.18s var(--schwung);
}
/* Linienmarkierung wie auf dem Hallenboden: zieht unter dem Link auf. */
.haupt-nav a::after {
  content: "";
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.1rem;
  height: 3px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--schwung);
}
.haupt-nav a:hover { color: var(--weiss); }
.haupt-nav a:hover::after { transform: scaleX(1); }
.haupt-nav a[aria-current] { color: var(--weiss); }
.haupt-nav a[aria-current]::after { transform: scaleX(1); }
.haupt-nav .nav-tat a {
  background: var(--rot);
  color: var(--weiss);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--t-mini);
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-klein);
  transition: background-color 0.2s var(--schwung), transform 0.2s var(--schwung);
}
.haupt-nav .nav-tat a::after { content: none; }
.haupt-nav .nav-tat a:hover {
  background: var(--weiss);
  color: var(--nacht);
  transform: translateY(-2px);
}

.menue-knopf {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-radius: var(--r-klein);
  color: var(--weiss);
  font: inherit;
  font-size: var(--t-klein);
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.menue-knopf svg { width: 16px; height: 16px; }
.menue-knopf .schliessen { display: none; }
.menue-knopf[aria-expanded="true"] .oeffnen { display: none; }
.menue-knopf[aria-expanded="true"] .schliessen { display: block; }

@media (max-width: 60rem) {
  .menue-knopf { display: inline-flex; }
  .kopf__innen { flex-wrap: wrap; }
  .marke-oben img { width: 44px; height: 44px; }
  .haupt-nav { width: 100%; padding-bottom: var(--s-3); }
  .haupt-nav[hidden] { display: none; }
  .haupt-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .haupt-nav a { padding: 0.8rem 0.9rem; font-size: var(--t-body); border-radius: var(--r-klein); }
  .haupt-nav a::after { content: none; }
  .haupt-nav a:hover { background: rgb(255 255 255 / 0.08); }
  .haupt-nav .nav-tat { margin-top: var(--s-2); }
  .haupt-nav .nav-tat a { text-align: center; font-size: var(--t-klein); }
}
.kein-js .menue-knopf { display: none; }
.kein-js .haupt-nav[hidden] { display: block; }

/* 5  Bausteine ============================================================ */

/* Knopf: rechteckig, Kontur, Stanzschatten. Im Hover hebt er sich, beim
   Druecken sinkt er auf den Schatten — wie ein Stempel. */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border: var(--kontur);
  border-radius: var(--r-klein);
  background: var(--rot);
  color: var(--weiss);
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--nacht);
  transition: transform 0.18s var(--schwung), box-shadow 0.18s var(--schwung),
              background-color 0.18s var(--schwung), color 0.18s var(--schwung);
}
.knopf:hover {
  color: var(--weiss);
  transform: translate(-2px, -2px);
  box-shadow: var(--stanz);
}
.knopf:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--nacht); }
.knopf--rand {
  background: transparent;
  color: var(--tinte);
  box-shadow: none;
}
.knopf--rand:hover { background: var(--nacht); color: var(--weiss); transform: none; box-shadow: none; }
.knopf--hell { background: var(--weiss); color: var(--nacht); }
.knopf--hell:hover { background: var(--weiss); color: var(--nacht); }
.knopf svg { width: 16px; height: 16px; flex: none; transition: transform 0.25s var(--schwung); }
.knopf:hover svg { transform: translateX(3px); }

.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }

/* Textlink mit Pfeil — die leise Alternative zum Knopf. */
.pfeil {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  font-size: var(--t-klein);
  color: var(--tinte);
  text-decoration: none;
}
.pfeil svg { width: 16px; height: 16px; transition: transform 0.25s var(--schwung); }
.pfeil:hover { color: var(--rot-tief); }
.pfeil:hover svg { transform: translateX(4px); }

/* Wimpel: der spitz zulaufende Vereinswimpel als Beschriftung. */
.marke, .chip {
  display: inline-block;
  padding: 0.35em 1.5em 0.35em 0.9em;
  clip-path: polygon(0 0, calc(100% - 0.85em) 0, 100% 50%, calc(100% - 0.85em) 100%, 0 100%);
  background: var(--nacht);
  color: var(--weiss);
  font-family: var(--text);
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marke { margin: 0 0 var(--s-5); }
.chip--rot { background: var(--rot); color: var(--weiss); }

/* Freiwurfbogen: die Abschnittsmarke, gezogen wie eine Bodenlinie. */
.kopfzeile { margin-bottom: var(--s-7); max-width: 46rem; }
.kopfzeile::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 1.625rem;
  border: 4px solid var(--rot);
  border-bottom: none;
  border-radius: 3.25rem 3.25rem 0 0 / 1.625rem 1.625rem 0 0;
  margin-bottom: var(--s-4);
}
.kopfzeile h2 { margin-bottom: var(--s-4); }
.kopfzeile p { color: var(--tinte-70); font-size: var(--t-lead); line-height: 1.55; max-width: 46ch; }

/* Fotorahmen: weisser Rand, Stanzschatten, leicht gekippt — wie ein Abzug
   an der Wand im Vereinsheim. Im Hover richtet sich das Foto auf. */
.bild {
  border: 6px solid var(--weiss);
  border-radius: var(--r-klein);
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: var(--stanz);
}
.bild img { width: 100%; height: 100%; object-fit: cover; }

figure { margin: 0; }
figcaption { font-size: var(--t-klein); color: var(--tinte-45); margin-top: var(--s-3); }

/* Platzhalter fuer Angaben, die der Verein noch ergaenzen muss. */
.luecke {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px dashed var(--rot);
  border-radius: var(--r-klein);
  background: var(--weiss);
  color: var(--rot-tief);
  font-weight: 700;
  font-size: 0.95em;
}

/* 6  Startseite =========================================================== */

/* Das rote Feld: Aufmacher flaechig im Vereinsrot, mit einem grossen
   Hallenkreis als Kreidelinie und dem Wappen als Anstosspunkt auf der
   Grundlinie zum naechsten Abschnitt. */
.aufmacher {
  position: relative;
  background: var(--rot);
  color: var(--weiss);
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(5rem, 9vw, 8rem);
  overflow-x: clip; /* senkrecht offen: der Anstosspunkt haengt ueber die Kante */
}
.aufmacher::before {
  content: "";
  position: absolute;
  top: -16rem;
  right: -14rem;
  width: 44rem;
  height: 44rem;
  border: 3px solid var(--kreide);
  border-radius: 50%;
  pointer-events: none;
}
.aufmacher h1 { max-width: 16ch; margin-bottom: var(--s-5); }
.aufmacher .lead { color: rgb(255 255 255 / 0.92); margin-bottom: var(--s-6); }
.aufmacher .marke { background: var(--weiss); color: var(--rot-tief); }
.aufmacher .pfeil { color: var(--weiss); }
.aufmacher .pfeil:hover { color: var(--weiss); text-decoration: underline; text-decoration-thickness: 2px; }
.aufmacher .knopf { background: var(--weiss); color: var(--nacht); }
.aufmacher .knopf:hover { background: var(--weiss); color: var(--nacht); }

.aufmacher__buehne { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.aufmacher__bild {
  border: 8px solid var(--weiss);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--nacht);
  box-shadow: var(--stanz-gross);
  transform: rotate(-1.2deg);
}
.aufmacher__bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 46% 16%;
}
@media (min-width: 48rem) {
  .aufmacher__bild img { aspect-ratio: 16 / 7; }
}
/* Das Foto zieht beim Laden ganz leicht auf — nur mit Skript und ohne
   reduzierte Bewegung. */
.js-bewegung .aufmacher__bild img { animation: aufziehen 1.6s var(--schwung) both; }
@keyframes aufziehen {
  from { transform: scale(1.05); }
  to   { transform: none; }
}

/* Anstosspunkt: das Wappen auf weissem Teller, mittig auf der Grundlinie
   zwischen rotem Feld und hellem Abschnitt. Rein dekorativ (aria-hidden). */
.wappen-badge {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: clamp(6.5rem, 10vw, 8.5rem);
  height: clamp(6.5rem, 10vw, 8.5rem);
  display: grid;
  place-items: center;
  background: var(--weiss);
  border: 3px solid var(--nacht);
  border-radius: 50%;
  box-shadow: 5px 5px 0 rgb(22 18 26 / 0.3);
  pointer-events: none;
}
.wappen-badge img { width: 62%; height: auto; }

/* „Heute in der Halle": die wichtigste Auskunft der Seite, als Aushang
   ueber die untere Kante des Fotos gelegt. */
.heute {
  position: relative;
  z-index: 2;
  background: var(--weiss);
  color: var(--tinte);
  border: 3px solid var(--nacht);
  border-radius: var(--r);
  box-shadow: var(--stanz-gross);
  padding: var(--s-5);
  margin-top: calc(var(--s-7) * -1);
  margin-inline: var(--s-4);
}
@media (min-width: 62rem) {
  .heute {
    position: absolute;
    left: clamp(1.5rem, 3vw, 2.5rem);
    bottom: clamp(1.5rem, 3vw, 2.5rem);
    width: min(26rem, 42%);
    margin: 0;
    padding: var(--s-6);
  }
}
.heute__titel {
  display: inline-block;
  padding: 0.35em 1.5em 0.35em 0.9em;
  clip-path: polygon(0 0, calc(100% - 0.85em) 0, 100% 50%, calc(100% - 0.85em) 100%, 0 100%);
  background: var(--rot);
  color: var(--weiss);
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
}
.heute__liste { list-style: none; margin: 0; padding: 0; }
.heute__liste li {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: 0.45rem 0;
}
.heute__liste li + li { border-top: 1px solid var(--linie); }
.heute__liste b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  min-width: 3.6rem;
}
.heute__liste span { color: var(--tinte-70); font-size: var(--t-klein); }
.heute__leer { color: var(--tinte-70); font-size: var(--t-klein); margin: 0; }
.heute .pfeil { margin-top: var(--s-4); }

/* Der Kader: acht Abteilungen mit Rueckennummern 01-08. Das Raster bricht
   die Gleichfoermigkeit — die erste und die letzte Karte laufen breit. */
.abteilungen {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: kader;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
/* Der Rhythmus zieht sich durch den ganzen Kader: breite Karten liegen
   versetzt im Raster (schmal: 1 und 4, breit: 1, 5, 7, 8), damit keine
   Abteilung wichtiger wirkt als die andere — nur das Raster lebt. */
@media (min-width: 40rem) { .abteilungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .abteilungen li:is(:nth-child(1), :nth-child(4)) { grid-column: span 2; }
  .abteilungen li:is(:nth-child(1), :nth-child(4)) .karte__bild {
    aspect-ratio: auto; flex: 1; min-height: 15rem;
  }
}
@media (min-width: 62rem) {
  .abteilungen { grid-template-columns: repeat(4, 1fr); }
  .abteilungen li:is(:nth-child(1), :nth-child(5), :nth-child(7), :nth-child(8)) {
    grid-column: span 2;
  }
  .abteilungen li:is(:nth-child(1), :nth-child(5), :nth-child(7), :nth-child(8)) .karte__bild {
    aspect-ratio: auto; flex: 1; min-height: 14rem;
  }
}
.karte {
  position: relative;
  counter-increment: kader;
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: var(--kontur);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform 0.25s var(--schwung), box-shadow 0.25s var(--schwung);
}
.karte:hover, .karte:focus-within {
  transform: translate(-4px, -4px);
  box-shadow: var(--stanz);
}
.karte__bild { position: relative; aspect-ratio: 4 / 3; background: var(--flaeche); overflow: hidden; }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--schwung); }
.karte:hover .karte__bild img { transform: scale(1.05); }
/* Die Rueckennummer, aufgedruckt wie aufs Trikot. */
.karte__bild::after {
  content: counter(kader, decimal-leading-zero);
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  font-family: var(--display);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  color: var(--weiss);
  text-shadow: 3px 3px 0 var(--nacht);
}
.karte__inhalt { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.karte h3 a { color: inherit; text-decoration: none; }
.karte h3 a::after { content: ""; position: absolute; inset: 0; }
.karte:hover h3 { color: var(--rot-tief); }
.karte__zeit {
  margin: auto 0 0;
  padding-top: var(--s-3);
  border-top: 2px solid var(--linie);
  font-size: var(--t-klein);
  color: var(--tinte-45);
}
.karte__zeit b { display: block; color: var(--tinte); font-weight: 800; }

/* Chronik-Anriss */
.chronik-anriss { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 56rem) { .chronik-anriss { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); } }
.chronik-anriss .bild { transform: rotate(1.2deg); }
.chronik-anriss blockquote {
  margin: 0 0 var(--s-5);
  padding-left: var(--s-5);
  border-left: 6px solid var(--rot);
  font-family: var(--display);
  font-size: clamp(1.375rem, 1rem + 1.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
}
.chronik-anriss cite {
  display: block;
  font-style: normal;
  font-size: var(--t-klein);
  color: var(--tinte-45);
  margin-bottom: var(--s-6);
}

/* Neuigkeiten: Aushangliste mit dicker Anschlagleiste. */
.meldungen { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--nacht); }
.meldungen > li { border-bottom: 2px solid var(--linie); }
.meldung {
  display: grid;
  gap: var(--s-2) var(--s-6);
  grid-template-columns: 1fr;
  padding: var(--s-5) var(--s-3);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s var(--schwung), transform 0.2s var(--schwung);
}
.meldung:hover { background: var(--weiss); transform: translateX(4px); }
@media (min-width: 48rem) { .meldung { grid-template-columns: 10rem 1fr auto; } }

.meldung time { font-size: var(--t-klein); font-weight: 800; color: var(--rot-tief); }
.meldung h3 { font-size: 1.15rem; }
.meldung:hover h3 { color: var(--rot-tief); }
.meldung p { margin: 0.35rem 0 0; color: var(--tinte-70); font-size: var(--t-klein); max-width: 56ch; text-transform: none; }
.meldung__pfeil {
  display: none;
  transition: transform 0.3s var(--schwung), color 0.2s var(--schwung);
}
@media (min-width: 48rem) { .meldung__pfeil { display: block; width: 18px; height: 18px; color: var(--tinte-45); } }
.meldung:hover .meldung__pfeil { color: var(--rot); transform: translateX(5px); }

/* Rote Abschlusstafel: flaechig, Kontur, Stanzschatten, Wappen-Schemen. */
.tafel {
  position: relative;
  overflow: hidden;
  background: var(--rot);
  color: var(--weiss);
  border: 3px solid var(--nacht);
  border-radius: var(--r-gross);
  box-shadow: var(--stanz-gross);
  padding: clamp(2.25rem, 5vw, 4rem);
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
.tafel::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -7rem;
  width: 22rem;
  height: 22rem;
  background: url("../img/logo-512.png") center / contain no-repeat;
  filter: grayscale(1) brightness(4);
  opacity: 0.14;
  pointer-events: none;
}
.tafel > * { position: relative; z-index: 1; }
@media (min-width: 56rem) { .tafel { grid-template-columns: 1.3fr auto; gap: var(--s-8); } }
.tafel h2 { color: var(--weiss); margin-bottom: var(--s-4); max-width: 18ch; }
.tafel p { color: rgb(255 255 255 / 0.92); max-width: 46ch; margin: 0; }
.tafel a { color: var(--weiss); }
.tafel a.knopf--hell { color: var(--nacht); }
.tafel a.knopf--hell:hover { color: var(--nacht); }

/* 7  Wochenplan =========================================================== */
/* Die dunkle Halle: der Plan steht auf Wappenschwarz, jede Spalte ist eine
   Bahn mit Bodenlinie. Der heutige Tag traegt die rote Linie und den
   HEUTE-Wimpel. */

.plan {
  display: grid;
  gap: var(--s-6) var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) { .plan { grid-template-columns: repeat(5, 1fr); gap: var(--s-4); } }

.plan__tag {
  border-top: 4px solid rgb(255 255 255 / 0.22);
  padding-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.plan__tag--heute { border-top-color: var(--rot-hell); }
.plan__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}
.plan__tag--heute .plan__name { color: var(--rot-hell); }
.plan__tag--heute .plan__name::after {
  content: "Heute";
  margin-left: auto;
  padding: 0.2em 1.3em 0.2em 0.7em;
  clip-path: polygon(0 0, calc(100% - 0.75em) 0, 100% 50%, calc(100% - 0.75em) 100%, 0 100%);
  background: var(--rot);
  color: var(--weiss);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.plan__punkt { display: none; }

.plan__einheiten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.plan__einheiten > li + li { border-top: 1px solid rgb(255 255 255 / 0.14); padding-top: var(--s-4); }

.einheit { display: block; text-decoration: none; color: var(--weiss); }
.einheit__zeit {
  display: block;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.einheit__sache { display: block; font-weight: 700; }
.einheit:hover .einheit__sache { color: var(--rot-hell); text-decoration: underline; }
.einheit__zusatz, .einheit__ort { display: block; font-size: var(--t-klein); color: rgb(255 255 255 / 0.62); }

.plan-hinweis { font-size: var(--t-klein); margin-top: var(--s-6); max-width: 60ch; }
.lage--nacht .plan-hinweis { color: rgb(255 255 255 / 0.65); }

/* Ausserhalb der dunklen Halle (z. B. Druck ohne Flaechen) bleibt der Plan
   lesbar: dunkle Schrift auf hellem Grund. */
:not(.lage--nacht) > .huelle .einheit { color: inherit; }

/* 8  Abteilungsseiten ===================================================== */
/* Jede Unterseite beginnt mit einer roten Deckseite — wie das Deckblatt
   eines Spieltagshefts. Das Foto haengt weiss gerahmt darueber hinaus in
   den hellen Abschnitt hinein. */

.seitenkopf {
  position: relative;
  background: var(--rot);
  color: var(--weiss);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow-x: clip; /* senkrecht offen: das gerahmte Foto haengt ueber die Kante */
}
.seitenkopf::before {
  content: "";
  position: absolute;
  top: -14rem;
  right: -12rem;
  width: 36rem;
  height: 36rem;
  border: 3px solid var(--kreide);
  border-radius: 50%;
  pointer-events: none;
}
.seitenkopf .huelle { position: relative; }
.seitenkopf h1 { max-width: 16ch; margin-bottom: var(--s-5); }
.seitenkopf .lead { color: rgb(255 255 255 / 0.92); }
.seitenkopf .bild {
  transform: rotate(-1.2deg);
  margin-bottom: calc(clamp(3rem, 8vw, 6rem) * -1 - clamp(2.5rem, 5vw, 4rem));
  position: relative;
  z-index: 2;
}
/* Folgt auf die Deckseite ein Foto, braucht der naechste Abschnitt Luft. */
.seitenkopf:has(.bild) + .lage { padding-top: calc(var(--lage) + clamp(3rem, 8vw, 6rem)); }

.pfad { font-size: var(--t-klein); margin: 0 0 var(--s-5); }
.pfad ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; }
.pfad li { color: rgb(255 255 255 / 0.85); }
.pfad li::after { content: "/"; margin-left: 0.45rem; color: rgb(255 255 255 / 0.45); }
.pfad li:last-child::after { content: none; }
.pfad a { color: rgb(255 255 255 / 0.85); text-decoration: none; }
.pfad a:hover { color: var(--weiss); text-decoration: underline; }

.abteilung__gitter { display: grid; gap: var(--s-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) {
  .abteilung__gitter { grid-template-columns: 1fr 20rem; gap: var(--s-8); }
}

/* Steckbrief der Abteilung: Aushang mit Kontur und Stanzschatten. */
.infokarte {
  background: var(--weiss);
  border: 3px solid var(--nacht);
  border-radius: var(--r);
  padding: var(--s-6);
  box-shadow: var(--stanz-rot);
}
@media (min-width: 62rem) { .infokarte { position: sticky; top: 6.5rem; } }
.infokarte dl { margin: 0; display: grid; gap: var(--s-5); }
.infokarte dt {
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rot-tief);
  margin-bottom: 0.2rem;
}
.infokarte dd { margin: 0; }
.infokarte dd + dd { margin-top: 0.2rem; }
.infokarte .knopf { width: 100%; justify-content: center; margin-top: var(--s-6); }

/* Fotowand: Abzuege haengen abwechselnd leicht gekippt. */
.galerie {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--s-6) var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.galerie li {
  border: 6px solid var(--weiss);
  border-radius: var(--r-klein);
  overflow: hidden;
  background: var(--weiss);
  box-shadow: 4px 4px 0 rgb(22 18 26 / 0.16);
  transform: rotate(-1.4deg);
  transition: transform 0.3s var(--schwung), box-shadow 0.3s var(--schwung);
}
.galerie li:nth-child(even) { transform: rotate(1.4deg); }
.galerie li:hover { transform: rotate(0) scale(1.02); box-shadow: var(--stanz); }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 9  Textseiten, Chronik, Neuigkeiten ==================================== */

.text > * + * { margin-top: var(--s-4); }
.text p, .text li, .text dd { max-width: 65ch; }
.text h2 { font-size: 1.4rem; margin-top: var(--s-7); margin-bottom: var(--s-4); }
.text h3 { margin-top: var(--s-6); }
.text ul, .text ol { padding-left: 1.3em; }
.text li + li { margin-top: var(--s-2); }
.text dt { font-weight: 800; margin-top: var(--s-5); }
.text dd { margin: 0; color: var(--tinte-70); }

.chronik p { max-width: 65ch; color: var(--tinte-70); }
.chronik p + p { margin-top: var(--s-4); }
.chronik p:first-of-type { font-size: var(--t-lead); color: var(--tinte); }
.nachtrag {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--weiss);
  border: 2px solid var(--linie-stark);
  border-left: 6px solid var(--rot);
  border-radius: var(--r-klein);
  font-size: var(--t-klein);
  color: var(--tinte-70);
  max-width: 65ch;
}
.nachtrag b { display: block; color: var(--tinte); margin-bottom: 0.2rem; }

/* Zeitleiste: Jahre wie Rueckennummern. */
.jahre { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--nacht); }
.jahre > li {
  display: grid;
  gap: 0.2rem var(--s-6);
  grid-template-columns: 1fr;
  padding: var(--s-5) 0;
  border-bottom: 2px solid var(--linie);
}
@media (min-width: 40rem) { .jahre > li { grid-template-columns: 7rem 1fr; } }
.jahre b {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--rot-tief);
}
.jahre span { color: var(--tinte-70); max-width: 62ch; }

.beitraege { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--nacht); }
.beitraege > li { padding: var(--s-7) 0; border-bottom: 2px solid var(--linie); }
.beitrag { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .beitrag { grid-template-columns: 10rem 1fr; gap: var(--s-7); } }
.beitrag time { font-size: var(--t-klein); font-weight: 800; color: var(--rot-tief); }
.beitrag h2 { font-size: 1.4rem; margin-bottom: var(--s-3); }
.beitrag p { color: var(--tinte-70); max-width: 65ch; }
.beitrag .bild { margin-top: var(--s-5); max-width: 24rem; transform: rotate(-1deg); }
.vorbei {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-klein);
  background: var(--weiss);
  color: var(--tinte-45);
  font-size: var(--t-mini);
  font-weight: 700;
}

.spalten { display: grid; gap: var(--s-6) var(--s-7); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .spalten { grid-template-columns: repeat(2, 1fr); } }
.spalte h2 { font-size: 1.2rem; margin-bottom: var(--s-3); }
.spalte p, .spalte address { color: var(--tinte-70); }

/* 10  Fuss ================================================================ */

.fuss {
  background: var(--nacht);
  color: rgb(255 255 255 / 0.72);
  border-top: 6px solid var(--rot);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t-klein);
}
.fuss__gitter { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .fuss__gitter { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); } }
.fuss h2 {
  font-family: var(--text);
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
  margin-bottom: var(--s-4);
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.fuss a { color: rgb(255 255 255 / 0.72); text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; text-decoration-color: var(--rot-hell); }
.fuss address { color: rgb(255 255 255 / 0.72); line-height: 1.7; }
.fuss__marke { display: flex; align-items: center; gap: 0.85rem; margin-bottom: var(--s-4); }
.fuss__marke img { width: 56px; height: 56px; }
.fuss__marke b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--weiss);
}
.fuss__schluss {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgb(255 255 255 / 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: baseline;
  font-size: var(--t-mini);
  color: rgb(255 255 255 / 0.55);
}
.fuss__schluss p { margin: 0; margin-right: auto; max-width: 62ch; }
.fuss__schluss ul { display: flex; gap: var(--s-5); }
.fuss__schluss a { color: rgb(255 255 255 / 0.72); }

/* 11  Bewegung ============================================================ */
/* Der Aufmacher laeuft beim Laden gestaffelt ein, Raster kommen beim
   Scrollen einmalig herein (.staffel + IntersectionObserver). Alles
   Weitere ist Beruehrung: Stempel-Knoepfe, sich aufrichtende Fotos,
   aufziehende Bodenlinien. Ohne JavaScript und bei reduzierter Bewegung
   ist alles sofort sichtbar und steht still. */

@keyframes einlaufen {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.js-bewegung .eingang {
  animation: einlaufen 0.8s var(--schwung) both;
}
.js-bewegung .eingang--2 { animation-delay: 0.07s; }
.js-bewegung .eingang--3 { animation-delay: 0.14s; }
.js-bewegung .eingang--4 { animation-delay: 0.21s; }

.js-bewegung .staffel > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--schwung), transform 0.6s var(--schwung);
}
.js-bewegung .staffel.ist-da > * { opacity: 1; transform: none; }
.js-bewegung .staffel.ist-da > *:nth-child(2) { transition-delay: 0.05s; }
.js-bewegung .staffel.ist-da > *:nth-child(3) { transition-delay: 0.10s; }
.js-bewegung .staffel.ist-da > *:nth-child(4) { transition-delay: 0.15s; }
.js-bewegung .staffel.ist-da > *:nth-child(5) { transition-delay: 0.20s; }
.js-bewegung .staffel.ist-da > *:nth-child(6) { transition-delay: 0.25s; }
.js-bewegung .staffel.ist-da > *:nth-child(7) { transition-delay: 0.30s; }
.js-bewegung .staffel.ist-da > *:nth-child(8) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-bewegung .eingang { animation: none; }
  .js-bewegung .staffel > * { opacity: 1; transform: none; }
  .js-bewegung .aufmacher__bild img { animation: none; }
  .karte:hover, .karte:focus-within { transform: none; }
  .karte:hover .karte__bild img { transform: none; }
  .galerie li:hover { transform: none; }
  .meldung:hover { transform: none; }
  .knopf:hover, .knopf:active { transform: none; }
}

/* 12  Druck =============================================================== */

@media print {
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .kopf, .fuss, .knopfreihe, .zum-inhalt, .menue-knopf, .heute,
  .wappen-badge { display: none !important; }
  .aufmacher, .seitenkopf, .lage--nacht { background: #fff; color: #000; }
  .aufmacher::before, .seitenkopf::before, .tafel::after { display: none; }
  .einheit, .lage--nacht h2, .seitenkopf h1 { color: #000; }
  .einheit__zusatz, .einheit__ort, .plan__name { color: #444; }
  .plan { grid-template-columns: repeat(5, 1fr); }
  .plan__tag, .karte, .beitraege > li { break-inside: avoid; box-shadow: none; }
  .bild, .galerie li, .aufmacher__bild { transform: none; box-shadow: none; }
  .tafel { background: #fff; color: #000; border: 1px solid #000; box-shadow: none; }
  .tafel h2, .tafel p { color: #000; }
  a { text-decoration: underline; color: #000; }
}