/* ==========================================================================
   Vorlage 09 Event / Kurse · Blockraum Boulderhalle (Demo)
   --------------------------------------------------------------------------
   Kreideweiß, Graphit und zwei Farben wie Griffe an der Wand: Gelb und Pink.
   Anybody (breit gezogen) für Überschriften, IBM Plex Mono für Zeiten und Preise.
   Umfärben: nur die Werte unter „Farben" ändern.
   Bewegung: im <html>-Tag data-bewegung="starr | mittel | dynamisch".
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License, Lizenz in fonts/) ---------- */
@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* ---------- Farben ---------- */
  --kreide: #f4f4f1;           /* Seitenhintergrund */
  --kreide-tief: #e3e3de;      /* Bildrahmen */
  --graphit: #1f2023;          /* Schrift, Textblock, Tafel, Fuß */
  --graphit-leise: #55575c;    /* Nebentext, 6,8:1 auf Kreide */
  --text-hell: #f4f4f1;
  --text-hell-leise: #b5b7bb;  /* Nebentext auf Graphit, 8,6:1 */
  --gelb: #ffd23f;             /* Akzent 1: Knöpfe, Tafelpreise. Graphit darauf 11:1 */
  --pink: #ff4f8b;             /* Akzent 2: zweites Ticket, Technik-Kurse. Graphit darauf 5,4:1. Nie weiße Schrift darauf */
  --linie: #cfcfca;
  --fokus: var(--graphit);

  /* ---------- Schrift ---------- */
  --schrift: "Anybody", "Arial Black", "Segoe UI", sans-serif;
  --schrift-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --breit: 140%;

  /* ---------- Maße ---------- */
  --breite: 78rem;
  --rand: clamp(1rem, 4vw, 3rem);
  --abschnitt: clamp(4.5rem, 9vw, 8rem);
  --ecke: 14px;                /* Tickets, Karten, Bilder */
  --ecke-knopf: 999px;         /* Knöpfe rund wie Griffe */
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0; background: var(--kreide); color: var(--graphit);
  font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.55; font-stretch: 100%;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
main { overflow-x: clip; }
.mono { font-family: var(--schrift-mono); font-variant-numeric: tabular-nums; }

.behaelter { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprunglink { position: absolute; left: var(--rand); top: -4rem; z-index: 20; background: var(--graphit); color: var(--text-hell); padding: .75rem 1rem; border-radius: 8px; }
.sprunglink:focus { top: .75rem; }

.abschnitt-titel {
  font-weight: 900; font-stretch: var(--breit); text-transform: uppercase;
  font-size: clamp(1.875rem, 1.1rem + 3vw, 3.5rem); line-height: .95; letter-spacing: -.01em;
}

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .8rem 1.6rem;
  background: var(--gelb); color: var(--graphit);
  border: 0; border-radius: var(--ecke-knopf);
  font: 800 1.0625rem/1.1 var(--schrift); font-stretch: 115%;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.knopf:hover { background: #ffe07a; }
.knopf-klein { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .9375rem; }

/* ---------- Bildrahmen (Platzhalter für Fotos und Video) ---------- */
.bild-platzhalter {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: var(--format, 3 / 2);
  background:
    radial-gradient(circle at 50% 50%, rgb(31 32 35 / .14) 2px, transparent 2.5px) 0 0 / 26px 26px,
    var(--kreide-tief);
  border: 1px solid var(--linie); border-radius: var(--ecke);
  overflow: hidden;
}
.bild-platzhalter figcaption {
  margin: .8rem; padding: .45rem .7rem; max-width: calc(100% - 1.6rem);
  background: var(--kreide); color: var(--graphit); border-radius: 8px;
  font-family: var(--schrift-mono); font-size: .75rem; line-height: 1.4;
}

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 15; background: var(--kreide); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.marke { font-weight: 900; font-stretch: 150%; text-transform: uppercase; font-size: clamp(1.125rem, .9rem + 1vw, 1.375rem); letter-spacing: -.01em; text-decoration: none; margin-right: auto; }
/* Handy: der große Probetraining-Knopf steht gleich im ersten Bildschirm, im Kopf reicht das Menü */
@media (max-width: 29.99rem) { .marke { font-stretch: 120%; } .kopf .knopf-klein { display: none; } .kopf-innen { gap: .75rem; } }
.kopf-nav ul { display: flex; gap: 1.5rem; }
.kopf-nav a { text-decoration: none; font-weight: 600; }
.kopf-nav a:hover { text-decoration: underline; }
@media (max-width: 59.99rem) { .kopf-nav { display: none; } }
.menue { position: relative; }
.menue summary { list-style: none; cursor: pointer; min-height: 2.6rem; padding: .5rem .9rem; border: 2px solid var(--graphit); border-radius: var(--ecke-knopf); font-weight: 700; }
.menue summary::-webkit-details-marker { display: none; }
.menue[open] summary { background: var(--graphit); color: var(--text-hell); }
.menue nav { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 10; min-width: 13rem; background: var(--graphit); color: var(--text-hell); border-radius: var(--ecke); overflow: hidden; --fokus: var(--gelb); }
.menue nav a { display: block; padding: .85rem 1.1rem; text-decoration: none; font-weight: 700; }
.menue nav li + li { border-top: 1px solid rgb(244 244 241 / .15); }
@media (min-width: 60rem) { .menue { display: none; } }

/* ---------- 1 · Erster Bildschirm ---------- */
.held-video { border-radius: 0; border-inline: 0; aspect-ratio: 4 / 5; align-items: flex-start; }
@media (min-width: 48rem) { .held-video { aspect-ratio: 16 / 9; max-height: 78vh; width: 100%; } }
/* Der eine Regelbruch: der dunkle Textblock schiebt sich über die Unterkante des Videos */
.held-block {
  position: relative; z-index: 2;
  margin-top: calc(-1 * clamp(4rem, 12vw, 9rem));
  background: var(--graphit); color: var(--text-hell); --fokus: var(--gelb);
  border-radius: var(--ecke);
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 50rem;
}
.held h1 {
  font-weight: 900; font-stretch: 118%; text-transform: uppercase;
  font-size: clamp(1.875rem, .9rem + 4vw, 4rem); line-height: .95; letter-spacing: -.015em;
  overflow-wrap: break-word; hyphens: auto;
}
.held-satz { margin-top: 1.25rem; font-size: 1.125rem; color: var(--text-hell-leise); max-width: 42ch; }
.held-aktion { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.held-preis { color: var(--text-hell-leise); }
.held-preis .mono { color: var(--gelb); font-size: 1.375rem; font-weight: 500; }

/* ---------- 2 · Termine als Tickets ---------- */
.termine { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.tickets { margin-top: 2rem; display: grid; gap: 1rem; }
.ticket { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); border-radius: var(--ecke); overflow: hidden; }
.ticket-datum {
  display: grid; align-content: center; gap: .25rem; padding: 1.1rem .8rem;
  font-size: 1.125rem; font-weight: 500; line-height: 1.1;
  border-right: 2px dashed rgb(31 32 35 / .45);
}
.ticket-datum span { font-size: .9375rem; font-weight: 400; }
.ticket-text { padding: 1.1rem 1.2rem; display: grid; gap: .25rem; }
.ticket h3 { font-weight: 900; font-stretch: 105%; text-transform: uppercase; font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem); line-height: 1.05; overflow-wrap: break-word; hyphens: auto; }
.ticket-plaetze { font-family: var(--schrift-mono); font-size: .875rem; margin-top: .25rem; }
.ticket-gelb { background: var(--gelb); }
.ticket-pink { background: var(--pink); }
.ticket-graphit { background: var(--graphit); color: var(--text-hell); }
.ticket-graphit .ticket-datum { border-color: rgb(244 244 241 / .4); }
@media (min-width: 60rem) { .tickets { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 3 · Kurse und Stundenplan ---------- */
.kurse { padding-bottom: var(--abschnitt); }
.kursarten { margin-top: 2rem; display: grid; gap: 1rem 2rem; }
.kursarten li { border-top: 6px solid; padding-top: .8rem; }
.kursarten h3 { font-weight: 800; font-stretch: 115%; font-size: 1.25rem; }
.kursarten p { color: var(--graphit-leise); max-width: 34ch; }
.kursarten .art-einstieg { border-color: var(--gelb); }
.kursarten .art-technik { border-color: var(--pink); }
.kursarten .art-kinder { border-color: var(--graphit); }
.woche { margin-top: 2.5rem; display: grid; border-top: 2px solid var(--graphit); }
.woche > li { display: grid; grid-template-columns: 3rem 1fr; gap: .5rem 1rem; padding-block: .8rem; border-bottom: 1px solid var(--linie); align-items: start; }
.woche h3 { font-weight: 900; font-stretch: var(--breit); text-transform: uppercase; font-size: 1.125rem; grid-row: 1 / span 2; padding-top: .35rem; }
.kurs { display: flex; gap: .75rem; align-items: baseline; padding: .45rem .7rem; border-radius: 8px; font-weight: 700; font-size: .9375rem; grid-column: 2; }
.kurs .mono { font-weight: 500; }
.kurs.art-einstieg { background: var(--gelb); }
.kurs.art-technik { background: var(--pink); }
.kurs.art-kinder { background: var(--graphit); color: var(--text-hell); }
.kurs-leer { grid-column: 2; padding: .45rem .7rem; color: var(--graphit-leise); font-size: .9375rem; }
@media (min-width: 48rem) { .kursarten { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) {
  .woche { grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--linie); }
  .woche > li { grid-template-columns: 1fr; align-content: start; padding: .9rem .5rem 1.2rem; border-bottom: 0; border-left: 1px solid var(--linie); min-height: 11rem; }
  .woche > li:first-child { border-left: 0; }
  .woche h3 { grid-row: auto; padding-top: 0; margin-bottom: .25rem; }
  .kurs, .kurs-leer { grid-column: 1; flex-direction: column; gap: .1rem; }
}

/* ---------- 4 · Preise als Tafel ---------- */
.preise { background: var(--graphit); color: var(--text-hell); padding-block: var(--abschnitt); --fokus: var(--gelb); }
.preise-raster { display: grid; gap: 2rem 4rem; }
.preise-satz { margin-top: 1rem; color: var(--text-hell-leise); max-width: 36ch; }
.tafel { width: 100%; border-collapse: collapse; }
.tafel th, .tafel td { padding: .9rem .5rem; border-bottom: 1px dashed rgb(244 244 241 / .3); text-align: left; }
.tafel thead th { font-family: var(--schrift-mono); font-weight: 400; font-size: .8125rem; color: var(--text-hell-leise); }
.tafel tbody th { font-weight: 800; font-stretch: 115%; font-size: 1.1875rem; }
.tafel td { font-size: 1.375rem; white-space: nowrap; }
.tafel td:nth-child(2) { color: var(--gelb); font-weight: 500; }
.tafel [data-zaehlen] { display: inline-block; }
.preise-extra { color: var(--text-hell-leise); max-width: 50ch; }
@media (min-width: 60rem) {
  .preise-raster { grid-template-columns: 4fr 7fr; }
  .preise-extra { grid-column: 2; }
}

/* ---------- Anmeldung Probetraining ---------- */
.anmeldung { padding-block: var(--abschnitt); background: var(--gelb); }
.anmeldung-raster { display: grid; gap: 2rem 4rem; }
.anmeldung-raster > div > p { margin-top: 1rem; font-size: 1.125rem; max-width: 36ch; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
.feld { display: grid; gap: .35rem; }
.feld label { font-weight: 700; font-size: .9375rem; }
.feld-hinweis { font-weight: 400; }
.feld input, .feld select { width: 100%; min-height: 3.1rem; padding: .65rem .85rem; font: inherit; color: var(--graphit); background: var(--kreide); border: 2px solid var(--graphit); border-radius: 10px; }
.feld-breit { grid-column: 1 / -1; }
.anmeldung .knopf { background: var(--graphit); color: var(--text-hell); justify-self: start; }
.anmeldung .knopf:hover { background: #3a3c41; }
.formular-meldung:empty { display: none; }
.formular-meldung { background: var(--kreide); padding: .8rem 1rem; border-radius: 10px; font-weight: 700; }
@media (max-width: 29.99rem) { .formular { grid-template-columns: 1fr; } }
@media (min-width: 60rem) { .anmeldung-raster { grid-template-columns: 5fr 7fr; } }

/* ---------- 5 · Anfahrt ---------- */
.anfahrt { padding-block: var(--abschnitt); }
.anfahrt-raster { display: grid; gap: 2rem 4rem; }
.anfahrt-daten { display: grid; gap: 1rem; }
.anfahrt-daten > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; border-top: 1px solid var(--linie); padding-top: .9rem; }
.anfahrt-daten dt { font-weight: 800; }
@media (min-width: 60rem) {
  .anfahrt-raster { grid-template-columns: 6fr 5fr; }
  .anfahrt-raster > h2 { grid-column: 1 / -1; }
}

/* ---------- Fuß ---------- */
.fuss { background: var(--graphit); color: var(--text-hell); padding-top: clamp(3rem, 6vw, 4.5rem); font-size: .9375rem; --fokus: var(--gelb); }
.fuss-raster { display: grid; gap: 1.75rem; }
.fuss-raster p + p { margin-top: .75rem; }
.fuss-marke { font-weight: 900; font-stretch: 150%; text-transform: uppercase; font-size: 1.75rem; margin-bottom: .75rem; }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fuss-demo { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgb(244 244 241 / .2); color: var(--text-hell-leise); font-size: .875rem; }
/* D29: letzte Zeile, ganz unten mittig */
.fuss-zeile { width: 100%; max-width: none; text-align: center; padding: 1.5rem 1rem 1.25rem; font-size: .8125rem; color: var(--text-hell-leise); }
@media (min-width: 48rem) { .fuss-raster { grid-template-columns: 4fr 5fr 3fr; } }

/* ==========================================================================
   Bewegung (Grundstufe dieser Vorlage: dynamisch)
   starr      – nichts bewegt sich
   mittel     – Textblock steigt über das Video, Abschnitte blenden ein, Preise zählen hoch
   dynamisch  – dazu zoomt das Video beim Scrollen, die Tickets fahren nacheinander herein
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  :root.js:not([data-bewegung="starr"]) [data-auftritt] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
  :root.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-sichtbar) { opacity: 0; transform: translateY(1.5rem); }
  :root:not([data-bewegung="starr"]) .held-block { animation: aufsteigen 1s var(--ease) .15s both; }
  :root:not([data-bewegung="starr"]) .knopf { transition: background-color .2s, transform .25s var(--ease); }
  :root:not([data-bewegung="starr"]) .knopf:hover { transform: translateY(-2px); }
  :root:not([data-bewegung="starr"]) .ticket { transition: transform .3s var(--ease); }
  :root:not([data-bewegung="starr"]) .ticket:hover { transform: translateY(-4px) rotate(-.6deg); }
}
@keyframes aufsteigen { from { opacity: 0; transform: translateY(3rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :root[data-bewegung="dynamisch"] .held-video { animation: heranzoomen linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    :root[data-bewegung="dynamisch"] .ticket { animation: von-rechts linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    :root[data-bewegung="dynamisch"] .kurs { animation: rein linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes heranzoomen { to { transform: scale(1.08); opacity: .7; } }
@keyframes von-rechts { from { opacity: 0; transform: translateX(3rem); } to { opacity: 1; transform: none; } }
@keyframes rein { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

/* Drucken: keine Bewegung, alles sichtbar */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-auftritt] { opacity: 1 !important; transform: none !important; }
}