/* RetroGamesCon — öffentliche Seiten.

   Formensprache „Analog Pulse", entstanden im Stitch-Entwurf (.stitch/designs/start.html):
   Fanzine- und Konzertplakat-Optik statt glatter Baukasten-Seite. Die Regeln, die
   das Aussehen tragen und die man beim Weiterbauen einhalten sollte:

     · scharfe Ecken, keine Radien — Ausnahme sind runde Störer und Knöpfe
     · 3 px Kontur in Tintenblau um jede Fläche
     · harte Schlagschatten ohne Weichzeichnung (6px 6px 0)
     · leichte Drehungen (0,5–2°) auf Karten und Bildern
     · Pixelschrift nur für Datum, Preis und kurze Labels
     · Papierkorn im Untergrund, Scanlines auf Fotoflächen
     · ungleiche Spalten — nie zwei gleich breite nebeneinander

   Farben kommen als --f-* aus der Marke, Abstände aus basis.css. */

:root {
  --kontur: 3px solid var(--f-dunkel);
  --schatten-hart: 6px 6px 0 var(--f-dunkel);
  --schatten-hart-klein: 4px 4px 0 var(--f-dunkel);
}

body {
  background-color: var(--f-flaeche);
  background-image: radial-gradient(circle, rgba(46, 48, 80, 0.14) 1.2px, transparent 1.3px);
  background-size: 14px 14px;
  color: var(--f-dunkel);
}

/* Inhaltsbreite. Die Abschnitte selbst laufen über die volle Fensterbreite —
   das unterscheidet die Seite von der üblichen Karte-in-der-Mitte. */
.band {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--abstand-30);
}

/* Die Unterseiten sitzen weiter in einer Hülle, aber ohne Rundung und Weichschatten. */
.huelle {
  max-width: 1240px;
  margin: var(--abstand-30) auto var(--abstand-40);
  border: var(--kontur);
  box-shadow: 10px 10px 0 rgba(28, 30, 51, 0.28);
  background: var(--f-flaeche_hell);
}

/* ---------- 1. Nav-Leiste ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-20);
  flex-wrap: wrap;
  padding: var(--abstand-12) var(--abstand-30);
  background: var(--f-flaeche_hell);
  border-bottom: var(--kontur);
}

.nav-marke img {
  display: block;
  width: auto;
  height: 44px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--abstand-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-block;
  font-weight: 800;
  font-size: 15px;
  color: var(--f-dunkel);
  text-decoration: none;
  padding: var(--abstand-6) var(--abstand-10);
  border: 3px solid transparent;
}

.nav-links a:hover,
.nav-links a.ist-aktiv {
  border-color: var(--f-dunkel);
  background: var(--f-highlight);
}

/* ---------- 2. Hero ---------- */

.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: var(--kontur);
  background: var(--f-dunkel_tief);
}

.hero-foto,
.hero-verlauf,
.hero-scanlines {
  position: absolute;
  inset: 0;
}

.hero-foto {
  background-image: url("/static/bilder/impressionen/halle-gedraengt.jpg");
  background-size: cover;
  background-position: center 72%;
  filter: saturate(0.85) contrast(1.05);
}

.hero-verlauf {
  background:
    linear-gradient(105deg, rgba(28, 30, 51, 0.94) 0%, rgba(28, 30, 51, 0.72) 42%, rgba(28, 30, 51, 0.25) 78%),
    linear-gradient(to top, rgba(28, 30, 51, 0.9), transparent 55%);
}

/* CRT-Anmutung: waagerechte Zeilen plus ein schwacher Farbstich in Spalten. */
.hero-scanlines {
  background:
    repeating-linear-gradient(rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.22) 2px 4px),
    repeating-linear-gradient(90deg, rgba(255, 0, 0, 0.05) 0 2px, rgba(0, 0, 255, 0.05) 2px 6px);
  pointer-events: none;
}

.hero-band {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 90px var(--abstand-30) var(--abstand-40);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--abstand-40);
  align-items: end;
}

.hero-inhalt {
  max-width: 640px;
}

.kicker {
  display: inline-block;
  padding: var(--abstand-8) var(--abstand-14);
  background: var(--f-akzent);
  border: var(--kontur);
  box-shadow: var(--schatten-hart-klein);
  color: #fff;
  font-family: var(--schrift-akzent);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 1px;
  transform: rotate(-1deg);
}

.hero-titel {
  margin: var(--abstand-24) 0 var(--abstand-16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-6);
  transform: rotate(-1.5deg);
}

.hero-titel-oben {
  font-family: var(--schrift-akzent);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 4px 4px 0 var(--f-akzent_kante);
}

.hero-titel-unten {
  font-family: var(--schrift-akzent);
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  color: var(--f-highlight);
  text-shadow: 6px 6px 0 var(--f-akzent);
}

.hero-vorspann {
  margin: 0 0 var(--abstand-24);
  max-width: 520px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--f-text_auf_dunkel);
}

/* Die angeheftete Karte mit dem Flyer der nächsten Börse. */
.hero-karte {
  position: relative;
  display: block;
  justify-self: end;
  width: 100%;
  max-width: 330px;
  padding: var(--abstand-10);
  background: var(--f-flaeche_hell);
  border: var(--kontur);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.45);
  color: var(--f-dunkel);
  text-decoration: none;
  transform: rotate(2deg);
  transition: transform 0.15s ease;
}

.hero-karte:hover {
  transform: rotate(0deg) translateY(-4px);
}

.hero-karte-bild {
  display: block;
  width: 100%;
  aspect-ratio: 820 / 312;
  object-fit: cover;
  border: 2px solid var(--f-dunkel);
}

.hero-karte-ersatz {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--f-dunkel);
  color: var(--f-highlight);
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 22px;
}

.hero-karte-leiste {
  display: block;
  margin-top: var(--abstand-10);
  padding: var(--abstand-8) var(--abstand-10);
  background: var(--f-highlight);
  border: 2px solid var(--f-dunkel);
  font-family: var(--schrift-akzent);
  font-size: 11px;
  letter-spacing: 1px;
}

.hero-karte-datum {
  display: block;
  margin-top: var(--abstand-10);
  font-family: var(--schrift-akzent);
  font-size: 13px;
  color: var(--f-akzent);
}

.hero-karte-stadt {
  display: block;
  margin-top: var(--abstand-6);
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Am Flyer hängt der Störer oben, sonst deckt er die Stadt zu. */
.hero-karte .stoerer {
  top: -30px;
  right: -30px;
  bottom: auto;
  width: 84px;
  height: 84px;
  font-size: 17px;
}

/* ---------- 3. Termin-Ticker ---------- */

.ticker {
  overflow: hidden;
  background: var(--f-akzent);
  border-bottom: var(--kontur);
  padding: var(--abstand-10) 0;
}

.ticker-band {
  display: flex;
  gap: var(--abstand-30);
  width: max-content;
  animation: rgc-ticker 46s linear infinite;
}

.ticker-eintrag {
  font-family: var(--schrift-akzent);
  font-size: 12px;
  letter-spacing: 1px;
  color: #fff;
  white-space: nowrap;
}

.ticker-eintrag::after {
  content: "✦";
  margin-left: var(--abstand-30);
  color: var(--f-highlight);
}

@keyframes rgc-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-band { animation: none; }
}

/* ---------- Abschnittstitel ---------- */

.abschnitt-titel {
  display: inline-block;
  margin: 0 0 var(--abstand-20);
  padding: var(--abstand-8) var(--abstand-18);
  background: var(--f-highlight);
  border: var(--kontur);
  box-shadow: var(--schatten-hart-klein);
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.abschnitt-titel-hell {
  background: var(--f-akzent);
  color: #fff;
  box-shadow: 4px 4px 0 var(--f-highlight);
}

.abschnitt-vorspann {
  margin: 0 0 var(--abstand-20);
  font-size: 16px;
  color: var(--f-dunkel);
}

.marker {
  display: inline-block;
  margin-bottom: var(--abstand-12);
  padding: var(--abstand-6) var(--abstand-12);
  background: var(--f-dunkel);
  color: var(--f-highlight);
  font-family: var(--schrift-akzent);
  font-size: 10px;
  letter-spacing: 1px;
}

/* ---------- 4. Termin-Kacheln ---------- */

.kacheln-block {
  padding: var(--abstand-40) 0;
}

/* Ungleiches Raster: die erste Kachel nimmt zwei Spalten und trägt den Flyer. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--abstand-20);
  align-items: start;
}

.kachel {
  display: block;
  background: var(--f-flaeche_hell);
  border: var(--kontur);
  box-shadow: var(--schatten-hart);
  text-decoration: none;
  color: var(--f-dunkel);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kachel:nth-child(2) { transform: rotate(0.7deg); }
.kachel:nth-child(4) { transform: rotate(-0.8deg); }

.kachel-gross {
  grid-column: span 2;
  grid-row: span 2;
}

.kachel:hover {
  transform: translate(3px, 3px) rotate(0deg);
  box-shadow: 2px 2px 0 var(--f-dunkel);
}

.kachel-bild {
  display: block;
  width: 100%;
  aspect-ratio: 820 / 312;
  object-fit: cover;
  border-bottom: var(--kontur);
}

.kachel-inhalt {
  display: block;
  padding: var(--abstand-16) var(--abstand-18) var(--abstand-18);
}

.kachel-datum {
  display: inline-block;
  padding: var(--abstand-6) var(--abstand-10);
  background: var(--f-highlight);
  border: 2px solid var(--f-dunkel);
  font-family: var(--schrift-akzent);
  font-size: 11px;
  letter-spacing: 1px;
}

.kachel-stadt {
  display: block;
  margin-top: var(--abstand-12);
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
}

.kachel-gross .kachel-stadt {
  font-size: 38px;
}

.kachel-halle {
  display: block;
  margin-top: var(--abstand-6);
  font-size: 14px;
  color: var(--f-text_sekundaer);
}

.kachel-preis {
  display: inline-block;
  margin-top: var(--abstand-14);
  padding: var(--abstand-6) var(--abstand-12);
  background: var(--f-dunkel);
  border: 2px solid var(--f-dunkel);
  color: var(--f-highlight);
  font-family: var(--schrift-akzent);
  font-size: 11px;
}

.alle-termine {
  margin: var(--abstand-30) 0 0;
}

.alle-termine a {
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 18px;
  color: var(--f-dunkel);
  text-decoration: none;
  border-bottom: 4px solid var(--f-akzent);
}

.alle-termine a:hover {
  background: var(--f-highlight);
}

/* ---------- 5. Impressionen ---------- */

.impressionen {
  padding: var(--abstand-40) 0;
  background: var(--f-dunkel);
  border-top: var(--kontur);
  border-bottom: var(--kontur);
}

.impressionen .abschnitt-vorspann {
  color: var(--f-text_auf_dunkel);
}

/* Waagerechtes Band statt Raster — es läuft absichtlich aus dem Bild heraus. */
.foto-band {
  display: flex;
  gap: var(--abstand-16);
  padding: var(--abstand-10) var(--abstand-30) var(--abstand-24);
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.foto {
  flex: 0 0 auto;
  margin: 0;
  width: 280px;
  background: var(--f-flaeche_hell);
  border: var(--kontur);
  box-shadow: var(--schatten-hart-klein);
  scroll-snap-align: start;
}

.foto:nth-child(odd) { transform: rotate(-1deg); }
.foto:nth-child(3n) { transform: rotate(1.2deg); width: 340px; }
.foto:nth-child(4n) { margin-top: var(--abstand-20); }

.foto img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 2px solid var(--f-dunkel);
}

.foto figcaption {
  /* Feste Höhe, sonst enden die Karten je nach Textlänge auf verschiedenen Kanten. */
  min-height: 56px;
  padding: var(--abstand-10) var(--abstand-12);
  font-size: 13px;
  line-height: 1.4;
  color: var(--f-dunkel);
}

/* ---------- 6. Nächste Börse im Detail ---------- */

.presse {
  padding: var(--abstand-40) 0;
}

.presse-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 46px;
  align-items: start;
}

.flyer-feld {
  position: relative;
  justify-self: start;
  width: 100%;
}

.flyer {
  display: block;
  width: 100%;
  border: var(--kontur);
  box-shadow: var(--schatten-hart);
  transform: rotate(-1.5deg);
}

.flyer-ersatz {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  background: var(--f-dunkel);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.05) 0 10px,
    transparent 10px 20px
  );
  color: var(--f-highlight);
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 28px;
  text-align: center;
}

.stoerer {
  position: absolute;
  right: -26px;
  bottom: -26px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--f-highlight);
  border: var(--kontur);
  box-shadow: var(--schatten-hart-klein);
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 19px;
  transform: rotate(-12deg);
}

.presse-datum {
  margin: 0 0 var(--abstand-14);
  font-family: var(--schrift-akzent);
  font-size: 15px;
  color: var(--f-akzent);
}

.presse-ort,
.presse-zeit,
.presse-beschreibung {
  margin: 0 0 var(--abstand-12);
  font-size: 16px;
  line-height: 1.6;
}

.presse-beschreibung {
  color: var(--f-text_sekundaer);
}

/* ---------- Knöpfe ---------- */

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-14);
  margin: var(--abstand-24) 0 0;
}

.knopf {
  display: inline-block;
  padding: var(--abstand-12) var(--abstand-22);
  border: var(--kontur);
  box-shadow: var(--schatten-hart-klein);
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Beim Druck rutscht der Knopf auf seinen eigenen Schatten. */
.knopf:hover {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--f-dunkel);
}

.knopf-primaer {
  background: var(--f-akzent);
  color: #fff;
}

.knopf-sekundaer {
  background: var(--f-flaeche_hell);
  color: var(--f-dunkel);
}

.knopf-geist {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
  color: var(--f-highlight);
}

.knopf-geist:hover {
  transform: none;
  background: rgba(242, 192, 21, 0.14);
}

/* ---------- 7. Das findest du dort ---------- */

.fundstuecke {
  padding: var(--abstand-40) 0;
  background: var(--f-flaeche_hell);
  border-top: var(--kontur);
}

/* Mauerwerk-Raster: die erste und die vierte Kachel greifen über zwei Zeilen.
   Vier Spalten mal zwei Zeilen ergeben acht Felder — genau die sechs Kacheln
   samt der beiden doppelten Höhen, ohne Loch am Ende. */
.fund-gitter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--abstand-20);
}

.fund {
  position: relative;
  overflow: hidden;
  border: var(--kontur);
  box-shadow: var(--schatten-hart-klein);
  background: var(--f-dunkel);
}

.fund-hoch {
  grid-row: span 2;
}

.fund img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 0.3s ease;
}

.fund:hover img {
  transform: scale(1.04);
}

.fund-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--abstand-18) var(--abstand-16) var(--abstand-14);
  background: linear-gradient(to top, rgba(28, 30, 51, 0.96) 45%, transparent);
  color: #fff;
}

.fund-text h3 {
  margin: 0 0 var(--abstand-6);
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}

.fund-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--f-text_auf_dunkel);
}

/* ---------- 8. Plakatwand ---------- */

.plakatwand {
  padding: var(--abstand-40) 0;
  background: var(--f-dunkel);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0 1px,
    transparent 1px 26px
  );
  border-top: var(--kontur);
}

.plakate {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-30);
  align-items: flex-start;
}

.plakat {
  margin: 0;
  flex: 1 1 240px;
  max-width: 300px;
  background: var(--f-flaeche_hell);
  padding: var(--abstand-8);
  border: var(--kontur);
  box-shadow: var(--schatten-hart);
}

.plakat:nth-child(1) { transform: rotate(-2deg); }
.plakat:nth-child(2) { transform: rotate(1.4deg); margin-top: var(--abstand-20); }
.plakat:nth-child(3) { transform: rotate(-0.8deg); }

.plakat img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--f-dunkel);
}

.plakat figcaption {
  padding: var(--abstand-8) 0 2px;
  font-family: var(--schrift-akzent);
  font-size: 10px;
  letter-spacing: 1px;
}

/* ---------- 9. Video-Sektion ---------- */

.videos {
  padding: var(--abstand-40) 0;
  background: var(--f-dunkel_tief);
  border-top: var(--kontur);
}

.video-gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-20);
}

.video-kachel {
  display: block;
  padding: var(--abstand-12);
  background: var(--f-dunkel);
  border: 3px solid var(--f-highlight);
  box-shadow: 6px 6px 0 var(--f-akzent);
  text-decoration: none;
}

.video-flaeche {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background: var(--f-dunkel_tief);
  background-image: repeating-linear-gradient(
    rgba(255, 255, 255, 0.05) 0 2px,
    transparent 2px 4px
  );
  border: 2px solid var(--f-highlight);
  overflow: hidden;
}

.video-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--f-akzent);
  border: 3px solid var(--f-highlight);
  color: #fff;
  font-size: 20px;
}

.video-kachel:hover .video-play {
  background: var(--f-highlight);
  color: var(--f-dunkel);
}

.video-titel {
  display: block;
  margin-top: var(--abstand-12);
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
}

.video-datum {
  display: block;
  margin-top: var(--abstand-6);
  font-family: var(--schrift-akzent);
  font-size: 10px;
  color: var(--f-text_auf_dunkel);
}

.video-leer {
  margin: 0;
  color: var(--f-text_auf_dunkel);
  font-size: 16px;
}

/* ---------- 10. Seitenkopf der Unterseiten ---------- */

.seiten-kopf {
  position: relative;
  padding: var(--abstand-40);
  background: var(--f-dunkel_tief);
  background-image: repeating-linear-gradient(rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4px);
  border-bottom: var(--kontur);
}

.seiten-titel {
  display: inline-block;
  margin: var(--abstand-16) 0 var(--abstand-12);
  font-family: var(--schrift-akzent);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.35;
  color: var(--f-highlight);
  text-shadow: 4px 4px 0 var(--f-akzent);
}

.seiten-vorspann {
  margin: 0;
  color: var(--f-text_auf_dunkel);
  font-size: 16px;
}

.seiten-zurueck {
  margin: 0;
}

.seiten-zurueck a {
  color: var(--f-text_auf_dunkel);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
}

.seiten-zurueck a:hover {
  color: var(--f-highlight);
}

/* ---------- 11. Terminliste ---------- */

.terminliste {
  padding: var(--abstand-40);
  background: var(--f-flaeche_hell);
}

.jahr-titel {
  display: inline-block;
  margin: var(--abstand-34) 0 var(--abstand-16);
  padding: var(--abstand-8) var(--abstand-16);
  background: var(--f-dunkel);
  border: var(--kontur);
  box-shadow: var(--schatten-hart-klein);
  font-family: var(--schrift-akzent);
  font-weight: 400;
  font-size: 15px;
  color: var(--f-highlight);
  transform: rotate(-1deg);
}

.jahr-titel:first-child {
  margin-top: 0;
}

.termin-zeilen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-14);
}

.termin-zeile {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: var(--abstand-20);
  padding: var(--abstand-14) var(--abstand-20);
  background: #fff;
  border: var(--kontur);
  box-shadow: var(--schatten-hart-klein);
  text-decoration: none;
  color: var(--f-dunkel);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.termin-zeile:hover {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--f-dunkel);
}

.zeile-datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--abstand-8) 0;
  border-right: 3px dashed var(--f-rahmen);
}

.zeile-tag {
  font-family: var(--schrift-akzent);
  font-size: 20px;
  line-height: 1.1;
  color: var(--f-akzent);
}

.zeile-monat {
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--f-dunkel);
}

.zeile-wochentag {
  font-size: 12px;
  color: var(--f-text_sekundaer);
}

.zeile-ort {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.zeile-stadt {
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase;
}

.zeile-halle {
  font-size: 14px;
  color: var(--f-text_sekundaer);
}

/* Fehlende Halle wird benannt, nicht erfunden */
.zeile-offen {
  font-size: 14px;
  font-style: italic;
  color: var(--f-text_sekundaer);
}

.zeile-eintritt {
  display: flex;
  align-items: center;
  gap: var(--abstand-14);
}

.zeile-preis {
  display: inline-block;
  padding: var(--abstand-6) var(--abstand-12);
  background: var(--f-highlight);
  border: 2px solid var(--f-dunkel);
  font-family: var(--schrift-akzent);
  font-size: 11px;
  white-space: nowrap;
}

.zeile-pfeil {
  font-size: 18px;
  color: var(--f-akzent);
}

.liste-leer {
  margin: 0;
  color: var(--f-text_sekundaer);
  font-size: 16px;
}

/* ---------- 11b. Rückschau — Videos je vergangenem Termin ---------- */

.rueckblick-videos {
  list-style: none;
  margin: var(--abstand-12) 0 var(--abstand-8);
  padding: 0 0 0 var(--abstand-20);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-16);
}

/* Keine YouTube-Vorschaubilder, keine Einbettung — nur ein Verweis (DSGVO). */
.rueckblick-video {
  display: flex;
  align-items: center;
  gap: var(--abstand-12);
  padding: var(--abstand-12) var(--abstand-14);
  background: var(--f-dunkel);
  border: 3px solid var(--f-dunkel);
  color: var(--f-text_auf_dunkel);
  text-decoration: none;
}

.rueckblick-play {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--f-akzent);
  color: #fff;
  font-size: 15px;
}

.rueckblick-titel {
  font-family: var(--schrift-headline);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: #fff;
}

/* ---------- 12. Termin-Detail ---------- */

.termin-detail {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
  padding: var(--abstand-40);
  background: var(--f-flaeche);
  border-top: var(--kontur);
}

.eckdaten-liste {
  margin: 0;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--abstand-12) var(--abstand-20);
  font-size: 16px;
  line-height: 1.6;
}

.eckdaten-liste dt {
  font-weight: 800;
  color: var(--f-text_sekundaer);
}

.eckdaten-liste dd {
  margin: 0;
}

.anfahrt {
  display: inline-block;
  margin-top: var(--abstand-6);
  font-weight: 800;
  font-size: 15px;
  color: var(--f-akzent);
}

.anfahrt:hover {
  text-decoration: none;
}

.detail-beschreibung {
  margin: var(--abstand-24) 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--f-text_sekundaer);
}

/* Auf der Detailseite ist der Flyer das einzige Bild — dort folgt der Rahmen dem
   Bild statt umgekehrt. */
.termin-detail .flyer-feld {
  justify-self: center;
}

/* Ohne Flyer gibt es kein Bild, das die Höhe vorgibt — die Ersatzfläche behält sie */
.termin-detail .flyer-ersatz {
  min-height: 400px;
}

/* Bei einem flachen Querformat säße der Störer sonst mitten im Bild. */
.termin-detail .stoerer {
  right: -30px;
  bottom: -30px;
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 1000px) {
  .hero-band {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero-karte {
    justify-self: start;
  }

  .kacheln {
    grid-template-columns: repeat(2, 1fr);
  }

  .kachel-gross {
    grid-column: span 2;
    grid-row: auto;
  }

  .presse-gitter,
  .fund-gitter {
    grid-template-columns: 1fr;
  }

  .fund-gitter {
    grid-auto-rows: 220px;
  }

  .fund-hoch {
    grid-row: auto;
  }

  .video-gitter,
  .rueckblick-videos {
    grid-template-columns: repeat(2, 1fr);
  }

  .termin-detail {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

@media (max-width: 620px) {
  .kacheln,
  .video-gitter,
  .rueckblick-videos {
    grid-template-columns: 1fr;
  }

  .kachel-gross {
    grid-column: auto;
  }

  .hero-titel-unten {
    font-size: 40px;
  }

  .hero-titel-oben {
    font-size: 20px;
  }

  .abschnitt-titel {
    font-size: 22px;
  }

  .termin-zeile {
    grid-template-columns: 72px 1fr;
    gap: var(--abstand-14);
  }

  .zeile-eintritt {
    grid-column: 2;
  }

  .eckdaten-liste {
    grid-template-columns: 1fr;
    gap: var(--abstand-6);
  }

  .eckdaten-liste dd {
    margin-bottom: var(--abstand-12);
  }
}

/* ------------------------------------------------ Standanfrage-Formular ---- */

.anfrage-vorspann {
  max-width: 60ch;
  margin-bottom: 28px;
}

.anfrage-formular {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  max-width: 760px;
}

.anfrage-feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.anfrage-feld-breit,
.anfrage-formular .knopf-reihe,
.anfrage-hinweis {
  grid-column: 1 / -1;
}

.anfrage-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.anfrage-eingabe {
  font-family: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 2px solid currentColor;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
}

.anfrage-hinweis {
  font-size: 13px;
  opacity: 0.75;
}

.anfrage-danke {
  max-width: 60ch;
}

@media (max-width: 720px) {
  .anfrage-formular {
    grid-template-columns: 1fr;
  }
}