/* Woody's Theater — Stilblatt. Farben aus den Bühnenteilen: Grün, Gold, Rot, Pink. */

:root {
  --gruen: #0a8257;
  --gruen-dunkel: #065c3c;
  --gold: #ffc21f;
  --rot: #c8201f;
  --rot-dunkel: #7d0f12;
  --pink: #e8398b;
  --creme: #fdf6e8;
  --text: #22180f;
  --text-leise: #5b4a39;
  /* Höhe des roten Streifens unter dem hölzernen Sims im Aufmacherbild. Im Bild selbst ist
     der Streifen 83 von 941 Zeilen hoch, das Bild 1672 px breit. Weil das Bild unten bündig
     sitzt (object-position: center bottom) und nur oben beschnitten wird, ist der Streifen
     am Bildschirm 83/1672 der gezeigten Bildbreite — also 4,96vw auf breiten Fenstern und
     83/941 der Höhe, sobald die Höhe knapper ist. max() nimmt jeweils den richtigen Wert. */
  --sockel: max(4.96vw, 8.82vh);
  --radius: 18px;
  --schatten: 0 10px 30px rgba(10, 40, 30, .18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--text);
  font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
/* Die Überschrift „Kasperl, Gretel und Zauberer warten schon" soll auf einem 13-Zoll-Laptop
   in einer Zeile stehen. Dort ist die Bahn 1060 px breit (1100 minus 2 x 1,25 rem).
   Gemessen am 2026-11-09 in Chrome mit Avenir Next: 41 Zeichen brauchen bei 50 px Schrift
   1039 px, bei 52 px schon 1080 px — also 0,507 px je Zeichen und Punkt Schriftgröße.
   Der Höchstwert 3rem = 48px ergibt 998 px und lässt 62 px Luft für andere Schriften.
   4.4vw hält die Zeile auch auf schmaleren Fenstern zusammen: bei 900 px Fensterbreite
   39,6 px Schrift gegen 860 px Platz. Auf dem Telefon greift der Mindestwert, dort darf
   die Zeile umbrechen. Eine Prüfung in pruefen.py rechnet das nach. */
h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--gruen-dunkel); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.bahn { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
section { padding: 4rem 0; }
section:nth-of-type(even) { background: #fff; }

/* ---------- Vorhang über dem Aufmacher ---------- */

.buehne {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #120a06;
  display: grid;
  place-items: end center;
}

/* Leichter Verlauf am unteren Rand, damit der Pfeil auf dem Vorhang lesbar bleibt. */
.buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Sehr zurückhaltend: im Aufmacher steht kein Text mehr, nur zwei Knöpfe mit eigener
     Farbfläche und der Pfeil. Wer hier nachdunkelt, macht den roten Vorhang grau. */
  background: linear-gradient(to top,
    rgba(8, 5, 3, .34) 0%, rgba(8, 5, 3, .16) 18%, transparent 42%);
  pointer-events: none;
}

.buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Unten bündig: so bleibt der rote Streifen unter dem Sims immer ganz sichtbar, der
     Beschnitt fällt oben an. Darauf rechnet --sockel. */
  object-position: center bottom;
}

/* Kein Heranfahren mehr. Die alte Fassung startete bei scale(1.08) und lief neun Sekunden
   auf 1 zurück. Das verschob den roten Streifen samt Sims aus dem Bild — die beiden Knöpfe
   standen so lange nicht auf dem Vorhang, sondern auf den Figuren. Die Lage des Streifens
   muss fest sein, sonst stimmt --sockel nicht. */

/* Der Sockel ist der rote Streifen unter dem hölzernen Sims des Aufmacherbildes. Dort steht
   links der Termin-Knopf und rechts der Buchungs-Knopf. Die Höhe des Streifens steht in
   --sockel und ist aus dem Bild gerechnet, nicht geschätzt. */
.buehne__sockel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sockel);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(.7rem, 2.2vw, 2.4rem);
  opacity: 0;
  animation: auftauchen .9s ease-out 2.4s forwards;
}

@keyframes auftauchen { to { opacity: 1; } }

/* Seitliche Lichtkanten der Bühne */
.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 80% at 50% 10%, rgba(255, 220, 150, .22), transparent 60%);
  pointer-events: none;
}

.buehne__pfeil {
  position: absolute;
  bottom: 1.4rem;
  z-index: 5;
  color: #fff;
  font-size: 2rem;
  opacity: 0;
  animation: auftauchen .8s ease-out 3.2s forwards;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .buehne__bild { transform: none; animation: none; }
  .buehne__sockel, .buehne__pfeil { opacity: 1; animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Schmaler Schirm: das Bild wird nicht angeschnitten ----------

   Das Bild ist 1672 × 941, also 1,777 mal breiter als hoch. Solange das Fenster mindestens
   dieses Verhältnis hat, füllt das Bild die Bühne und der Beschnitt fällt oben an — so
   gewollt, darauf rechnet --sockel. Ist das Fenster schmaler, müsste das Bild auf die ganze
   Höhe wachsen und würde seitlich beschnitten: bei 375 × 812 blieben von 1443 gerechneten
   Pixeln Breite nur 375 übrig, die äußeren Figuren wären weg (Joe 2026-11-11).

   Deshalb kippt die Bühne genau an dieser Grenze auf einen gestapelten Aufbau: das Bild steht
   ganz da, darunter trägt ein roter Streifen die beiden Knöpfe. Der Streifen ist hier gemalt,
   nicht Teil des Bildes; sein Verlauf nimmt die gemessenen Töne des Bildstreifens auf
   (#541513 im Schatten des Sims bis #720508 am unteren Rand). Weil das Bild in den Fluss
   rückt, ist die Bühne so hoch wie Bild plus Streifen. */
@media (max-aspect-ratio: 1672/941) {
  .buehne {
    /* Keine Mindesthöhe mehr: die Bühne ist so hoch wie Bild plus Streifen. */
    min-height: 0;
    display: block;
    /* Der Streifen trägt hier die Knöpfe und ist nicht mehr aus dem Bild gerechnet. */
    --sockel: clamp(54px, 15vw, 86px);
  }

  .buehne__bild {
    /* Im Fluss und in eigenen Maßen: kein object-fit, also kein Beschnitt. */
    position: static;
    width: 100%;
    height: auto;
  }

  .buehne__sockel {
    position: static;
    width: 100%;
    background: linear-gradient(to bottom, #4a100e 0%, #541513 12%, #5c0206 45%, #720508 100%);
  }

  /* Der Pfeil saß am unteren Rand und stünde jetzt auf den Knöpfen. Er ist hier auch
     entbehrlich: der Aufmacher ist kurz, der Inhalt darunter schon zu sehen. */
  .buehne__pfeil { display: none; }
}

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

.knopf {
  display: inline-block;
  padding: .85rem 1.6rem;
  margin: 0 .4rem .6rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  background: var(--gold);
  color: #3a2708;
  box-shadow: var(--schatten);
}

/* Im Sockel ist nur ein schmaler roter Streifen Platz, deshalb kleiner und ohne Außenabstand. */
.knopf--sockel {
  margin: 0;
  padding: .5rem 1.1rem;
  font-size: clamp(.82rem, 1.5vw, 1rem);
}

.knopf:hover { background: #f5c75a; }
.knopf--zweit { background: var(--pink); color: #fff; }
.knopf--zweit:hover { background: #f2559d; }

/* ---------- Kopfzeile ---------- */

/* Kräftiger seit dem 2026-11-11 (Joe): satterer Grundton mit Verlauf und eine goldene
   Kante unten, damit die Leiste vor dem cremefarbenen Inhalt steht. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, var(--gruen) 0%, var(--gruen-dunkel) 100%);
  color: #fff;
  border-bottom: 4px solid var(--gold);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .3);
}

.kopf__inhalt {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.kopf__marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.kopf__rund { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
/* Der gezeichnete Schriftzug ersetzt den gesetzten Namen. */
.kopf__schriftzug { height: 34px; width: auto; }
.kopf nav { margin-left: auto; display: flex; gap: 1rem; flex-wrap: wrap; }
.kopf nav a { color: #fff; text-decoration: none; font-weight: 600; }
.kopf nav a:hover { color: var(--gold); }

/* ---------- Figuren ---------- */

.figuren {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 1.4rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

/* Dunkelrot wie der Samt hinter den Puppen, damit Bild und Karte eine Fläche bilden. */
.figur {
  background: var(--rot-dunkel);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  color: #fff;
  display: flex;
  flex-direction: column;
}

/* Kein object-fit: cover — die Shots werden nicht angeschnitten. */
.figur img { display: block; width: 100%; height: auto; }
.figur div { padding: .8rem 1rem 1.1rem; }
.figur h3 { color: var(--gold); margin-bottom: .2rem; }
.figur p { margin: 0; font-size: .95rem; color: #ffe9e4; }

/* Das Gruppenbild der Monsters ist quer. Es steht am Ende allein in einer eigenen Zeile und
   ist darin zentriert: `1 / -1` nimmt die ganze Zeile, `justify-self: center` rückt die Karte
   in die Mitte, die Breite entspricht zwei Spalten der breitesten Ansicht.
   Rechnung: .bahn ist 1100 px breit minus 2 x 1,25 rem Innenabstand = 1060 px. Bei
   `minmax(230px, 1fr)` und 1,4 rem Abstand passen dort genau vier Spalten
   ((1060 - 3 x 22,4) / 4 = 248 px). Zwei davon plus ein Abstand sind 519 px. */
.figur--gross {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 519px);
}

/* ---------- Stücke ---------- */

.stueck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

.stueck img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--schatten); }

/* ---------- Kästen ---------- */

.kasten {
  background: var(--gruen);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--schatten);
  border: 3px solid var(--gold);
}

/* Termine: Text links, Plakat rechts. */
.kasten--plakat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.8rem;
  align-items: center;
}

.kasten--plakat img {
  width: 100%;
  max-width: 320px;
  height: auto;
  justify-self: center;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

/* Buchen: ohne Seitenteile. Die beiden Bühnenbilder standen links und rechts als Balken
   und wurden am 2026-11-11 entfernt (Joe). */
.buchen { position: relative; }

/* Impressum */
.impressum__block { margin-bottom: 1.6rem; }
.impressum__block h3 { color: var(--gruen-dunkel); margin-bottom: .2rem; }
.impressum__block p { margin: 0; }

.kasten h2 { color: var(--gold); }
.kasten ul { padding-left: 1.2rem; }
.kasten a:not(.knopf) { color: var(--gold); }

.platzhalter {
  display: inline-block;
  background: #fff3cd;
  border: 1px dashed #b9881a;
  color: #6b4e08;
  border-radius: 8px;
  padding: .2rem .5rem;
  font-size: .9rem;
}

/* ---------- Fuß ---------- */

.fuss {
  background: var(--gruen-dunkel);
  color: #dfeee7;
  padding: 2.5rem 0;
  text-align: center;
  font-size: .95rem;
}

.fuss a { color: var(--gold); }