/* =============================================================================
   Der kleine Prinz — Live im Kino 2026
   Kampagnen-Landingpage. Farb- und Bildwelt aus dem Key Visual der Produktion:
   Nachtblau, Goldlicht, geschichtete Papierlandschaft.
   ========================================================================== */

/* ------------------------------------------------------------- Schriften -- */
/* Figtree und EB Garamond, beide SIL Open Font License, lokal gehostet.
   Variable Fonts: eine Datei deckt den gesamten Gewichtsbereich ab. */
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('assets/fonts/ebgaramond-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- Tokens -- */
:root {
  /* Farben — abgeleitet vom Plakat und den Filmbildern */
  --night:        #0A1633;
  --night-deep:   #060E22;
  --night-lift:   #101F46;
  --violet:       #3A2F66;
  --violet-deep:  #2A2758;
  --indigo:       #1B1E45;
  --gold:         #E8B54A;
  --gold-bright:  #F5D384;
  --cream:        #F6E7C1;
  --white:        #FFF9EE;

  --line:         rgba(232, 181, 74, .22);
  --line-soft:    rgba(246, 231, 193, .12);
  --muted:        rgba(246, 231, 193, .66);
  --card:         rgba(23, 41, 84, .55);

  /* Schrift */
  --sans:  'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'EB Garamond', ui-serif, Georgia, 'Times New Roman', serif;

  --fs-body:  clamp(1rem, .95rem + .3vw, 1.125rem);
  --fs-lede:  clamp(1.06rem, 1rem + .55vw, 1.32rem);
  --fs-h2:    clamp(1.8rem, 1.35rem + 2.1vw, 2.7rem);
  --fs-h3:    clamp(1.18rem, 1.1rem + .4vw, 1.4rem);
  --fs-small: .875rem;

  /* Raum */
  --pad-section: clamp(3rem, 2rem + 4.5vw, 5.5rem);
  --pad-wrap:    clamp(1.25rem, .75rem + 2.5vw, 2.5rem);
  --radius:      14px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--gold-bright); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--night);
  padding: .75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
}
.skiplink:focus { left: .5rem; top: .5rem; }

/* Ergänzt Knopfbeschriftungen für Screenreader, ohne sichtbar zu werden. */
.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------- Sternenhimmel -- */
/* Zwei versetzte Punktraster, die extrem langsam gegeneinander aufhellen.
   Reine CSS-Gradients, kein Bild, kein Skript. */
.starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(140% 90% at 50% 0%, #16255A 0%, var(--night) 45%, var(--night-deep) 100%);
}
.starfield span {
  position: absolute;
  inset: -10%;
  background-repeat: repeat;
  opacity: .5;
  animation: twinkle 14s ease-in-out infinite;
}
.starfield span:first-child {
  background-image:
    radial-gradient(1.4px 1.4px at 18% 12%, rgba(255,249,238,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 62% 24%, rgba(255,249,238,.60) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 84% 8%,  rgba(232,181,74,.75) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 33% 68%, rgba(255,249,238,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 91% 54%, rgba(255,249,238,.70) 50%, transparent 51%);
  background-size: 420px 380px;
}
.starfield span:last-child {
  background-image:
    radial-gradient(1.1px 1.1px at 8%  40%, rgba(255,249,238,.55) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 47% 82%, rgba(232,181,74,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 72% 60%, rgba(255,249,238,.65) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 26% 30%, rgba(255,249,238,.45) 50%, transparent 51%);
  background-size: 560px 500px;
  animation-delay: -7s;
}
@keyframes twinkle {
  0%, 100% { opacity: .30; }
  50%      { opacity: .68; }
}

/* ------------------------------------------------------------- Bausteine -- */
.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--pad-wrap);
}
/* Behält die Lesebreite, beginnt aber an derselben Kante wie alle anderen
   Abschnitte — vorher stand der Inhalt zentriert und tanzte aus der Reihe. */
.wrap--narrow > * { max-width: 48rem; }

.section {
  position: relative;
  padding-block: var(--pad-section);
}

.eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--serif);
  font-size: clamp(.78rem, .74rem + .18vw, .92rem);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}

.h2 {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}

.lede {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 46ch;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* Knöpfe -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .5em;
  padding: .85em 1.6em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn--gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--night);
  box-shadow: 0 2px 0 rgba(0,0,0,.28), 0 0 0 rgba(232,181,74,0);
}
.btn--gold:hover,
.btn--gold:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232,181,74,.34), 0 0 28px rgba(232,181,74,.18);
}

.btn--ghost {
  background: rgba(255,249,238,.06);
  border-color: var(--line);
  color: var(--cream);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(255,249,238,.12);
  transform: translateY(-2px);
}

.btn--sm { padding: .6em 1.1em; font-size: .9rem; }
.btn--lg { padding: 1em 2.2em; font-size: 1.08rem; }

/* ================================================================== Hero == */
.hero {
  position: relative;
  display: grid;
  align-items: start;
  min-height: min(100svh, 780px);
  padding-block: clamp(4.5rem, 11vw, 7rem) clamp(3rem, 8vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Liegt über dem Standbild, startet unsichtbar und wird erst eingeblendet,
   wenn genug Material geladen ist. Fällt es aus, bleibt schlicht das Bild. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.hero__video.is-da { opacity: 1; }

/* Verlauf nach unten, damit Schrift auf jedem Bildausschnitt trägt */
.hero__fade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* weiche Vignette hinter dem Schriftblock, damit er auf dem Handy trägt,
       ohne Mond und Figuren zuzudecken */
    radial-gradient(115% 52% at 50% 28%, rgba(6,14,34,.74) 0%, rgba(6,14,34,.42) 52%, rgba(6,14,34,0) 78%),
    linear-gradient(180deg, rgba(6,14,34,.5) 0%, rgba(6,14,34,0) 24%),
    linear-gradient(0deg, var(--night) 0%, var(--night) 6%, rgba(10,22,51,.88) 26%, rgba(10,22,51,.36) 52%, rgba(10,22,51,0) 74%);
}

.hero__inner {
  position: relative;
  text-shadow: 0 1px 14px rgba(6, 14, 34, .75), 0 1px 3px rgba(6, 14, 34, .55);
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--pad-wrap);
  text-align: center;
}

.hero .eyebrow { color: var(--gold-bright); }

.hero__title { margin: .2rem 0 .9rem; }
.hero__title img {
  width: min(88%, 620px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.55));
}

.hero__claim {
  margin: 0 0 .35rem;
  font-size: clamp(1rem, .88rem + .7vw, 1.45rem);
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero__source {
  max-width: 42rem;
  margin: 0 0 1.6rem;
  font-family: var(--serif);
  font-size: clamp(.82rem, .78rem + .2vw, .95rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Untereinander statt in einer umbrechenden Zeile: drei kurze Belege lesen sich
   gestapelt schneller, und die Zeilen springen nicht mit der Fensterbreite. */
.facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1.9rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--cream);
}
.facts li {
  display: flex;
  align-items: center;
  gap: .4rem;
  text-shadow: none;
  padding: .34rem .82rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(6, 14, 34, .46);
  backdrop-filter: blur(3px);
}
.facts__stars { color: var(--gold); letter-spacing: .08em; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-shadow: none;
  justify-content: center;
  gap: .75rem;
  margin: 0 0 1.9rem;
}

.hero__tour {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.5rem;
  margin: 0;
  font-size: var(--fs-small);
}
.hero__tour a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.hero__tour a:hover,
.hero__tour a:focus-visible { color: var(--white); border-bottom-color: var(--gold); }
.hero__tour b { color: var(--white); font-weight: 700; }

/* Zwischen Handy und Desktop läuft wieder das Querformat, die Schrift steht
   aber noch mittig. Damit die Figuren nicht dahinter verschwinden, rückt der
   Bildausschnitt so weit nach links, dass sie an den rechten Rand wandern. */
@media (min-width: 641px) and (max-width: 899px) {
  .hero__media img { object-position: 34% 46%; }
  .hero__inner > * { max-width: 34rem; margin-inline: auto; }
}

/* Ab Tabletbreite übernimmt die Aufteilung des Werbebanners: Schrift links,
   Prinz und Fuchs behalten die rechte Bildhälfte für sich. */
@media (min-width: 900px) {
  .hero { align-items: center; }
  .hero__inner { text-align: left; }
  .hero__inner > * { max-width: 34rem; }
  .hero__source { max-width: 42rem; }
  .hero__title img { width: min(100%, 30rem); margin-inline: 0; }
  /* Nur im Hero linksbündig — die Finale-Sektion bleibt zentriert. */
  .hero .facts,
  .hero .hero__actions,
  .hero .hero__tour { justify-content: flex-start; align-items: flex-start; }
  .hero__media img { object-position: 22% 45%; }
  .hero__fade {
    background:
      linear-gradient(90deg, rgba(6,14,34,.94) 0%, rgba(6,14,34,.80) 32%, rgba(10,22,51,.28) 58%, rgba(10,22,51,0) 78%),
      linear-gradient(0deg, var(--night) 0%, var(--night) 5%, rgba(10,22,51,.62) 20%, rgba(10,22,51,0) 46%);
  }
}

/* =================================================== Papierschichten-Rand ==
   Signaturelement: die geschichtete Landschaft aus dem Film als Übergang.
   Einmal beim Eintritt in die Seite, einmal als Abschluss zum Fuß hin. */
.section--termine::before,
.footer::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(64px, 7vw, 110px);
  background: url('assets/img/horizont.svg') center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.section--termine::before { top: 0; transform: translateY(-99%); }

/* Hängt am Footer, nicht am Abschnitt darüber. Als ::after der Finale-Sektion
   ragte er 144 px nach unten und deckte den Footer zu: absolut positionierte
   Elemente liegen über statischen, unabhängig von der Reihenfolge im HTML. */
.footer { position: relative; }
.footer::before { top: 0; transform: translateY(-99%) scaleY(-1); }

/* ============================================================ Drei Ebenen == */
.section--erlebnis { background: linear-gradient(180deg, rgba(6,14,34,.82) 0%, rgba(10,22,51,.3) 100%); }

.ebenen {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 820px) {
  .ebenen { grid-template-columns: repeat(3, 1fr); }
}

.ebene { margin: 0; }
.ebene picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}
.ebene img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.ebene:hover img { transform: scale(1.04); }

.ebene__title {
  margin: 1.1rem 0 .45rem;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--white);
}
.ebene p { margin: 0; color: var(--muted); text-wrap: pretty; }

/* ================================================================ Trailer == */
.player {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  background: #000;
}
.player__video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 536;
}

.player__start {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  background: linear-gradient(180deg, rgba(6,14,34,.15), rgba(6,14,34,.55));
  border: 0;
  color: var(--white);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.player__icon {
  width: clamp(56px, 7vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 0 8px rgba(232,181,74,.16), 0 10px 30px rgba(0,0,0,.45);
  display: grid;
  place-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.player__icon::after {
  content: '';
  width: 0; height: 0;
  margin-left: .28em;
  border-left: .95em solid var(--night);
  border-block: .58em solid transparent;
}
.player__start:hover .player__icon,
.player__start:focus-visible .player__icon {
  transform: scale(1.07);
  box-shadow: 0 0 0 12px rgba(232,181,74,.2), 0 14px 36px rgba(0,0,0,.5);
}
.player.is-playing .player__start { display: none; }

.section--stimmen .player { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* ================================================================ Termine == */
/* Der Spielplan: sieben Zeilen, eine je Vorstellung. Bewusst als Liste und nicht
   als Kartenraster — wer aus einer Anzeige kommt, sucht seine Stadt und will sie
   auf einen Blick finden. */
.section--termine {
  background: linear-gradient(180deg, var(--night) 0%, rgba(6, 14, 34, .82) 100%);
}

.termine__kopf {
  display: grid;
  gap: .75rem clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 900px) {
  .termine__kopf { grid-template-columns: auto minmax(0, 30rem); align-items: end; }
}
.termine__kopf .h2 { margin-bottom: 0; }
.termine__hinweis b { color: var(--cream); font-weight: 700; }
.termine__hinweis {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.spielplan {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

/* Feste Breiten für Preis und Knopf: jede Zeile ist ein eigenes Grid, ohne
   feste Spalten richten sich die Zeilen nach ihrem eigenen Inhalt aus und die
   Liste franst aus. Zudem darf „Ausverkauft" die Spalte nicht breiter machen
   als „Tickets", sonst springt das Raster. */
.vorstellung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.75rem;
  align-items: center;
  gap: .2rem clamp(.5rem, 1.6vw, .9rem);
  padding: .7rem .25rem;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .18s ease;
}
.vorstellung:hover { background: rgba(232, 181, 74, .045); }

.vorstellung__wann { grid-area: 1 / 1 / 2 / 2; }
.vorstellung__wann time {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.vorstellung__wann b {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

/* Block statt Flex: sonst passt „Mainz CineStar Mainz" in eine Zeile und
   „Frankfurt am Main / CineStar Metropolis IMAX" in zwei — die Liste sieht
   dann bei jeder Zeile anders aus. */
.vorstellung__ort {
  grid-area: 2 / 1 / 3 / 2;
  min-width: 0;
}
.vorstellung__ort b {
  display: block;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}
.vorstellung__ort span { display: block; font-size: var(--fs-small); line-height: 1.35; color: var(--muted); }

/* Steht nur da, wenn eine Vorstellung vom Grundpreis abweicht — solange alle
   gleich kosten, nennt ihn der Satz über der Liste einmal. */
.vorstellung__preis {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold);
}

.vorstellung .btn {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  width: 100%;
  padding-inline: .5em;
}

/* Ausverkaufte Vorstellungen bleiben stehen, statt zu verschwinden — sonst wirkt
   der Spielplan lückenhaft und man sucht die Stadt vergeblich. */
.vorstellung--ausverkauft { opacity: .58; }
.vorstellung--ausverkauft .btn {
  pointer-events: none;
  background: none;
  border-color: var(--line-soft);
  color: var(--muted);
  box-shadow: none;
}

@media (min-width: 760px) {
  .vorstellung {
    grid-template-columns: 9.5rem minmax(0, 1fr) 7rem;
    gap: 0 clamp(1rem, 2.5vw, 2rem);
    padding-block: .6rem;
  }
  .vorstellung__wann time { margin-bottom: .05rem; }
  .vorstellung__ort   { grid-area: 1 / 2 / 2 / 3; }
  .vorstellung__ort b { font-size: 1.05rem; }
  .vorstellung .btn   { grid-area: 1 / 3 / 2 / 4; }
}

.spielplan__stand {
  margin: .9rem 0 0;
  font-size: .78rem;
  color: var(--muted);
}

/* ================================================================ Stimmen == */
.stimmen {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 760px) {
  .stimmen { grid-template-columns: 1fr 1fr; }
}

.stimme {
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, rgba(232,181,74,.07), transparent 70%);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.stimme blockquote {
  margin: 0 0 .9rem;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
  line-height: 1.4;
  color: var(--white);
  text-wrap: pretty;
}
.stimme blockquote::before { content: '„'; }
.stimme blockquote::after  { content: '“'; }
.stimme figcaption {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--gold);
}
.stimme figcaption span {
  display: block;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--muted);
}

/* ================================================================ Galerie == */
.galerie {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.7rem, 1.6vw, 1rem);
}

.kachel {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--night-deep);
  overflow: hidden;
  cursor: zoom-in;
}
.kachel img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
button.kachel:hover img,
button.kachel:focus-visible img { transform: scale(1.05); }

.kachel--clip { cursor: default; padding: .35rem; }
.kachel--clip video {
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: calc(var(--radius) - 4px);
  background: #000;
}

@media (min-width: 620px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .kachel--breit { grid-column: span 2; }
  .kachel--breit img { aspect-ratio: 2.39 / 1; }
}

@media (min-width: 1000px) {
  .galerie { grid-template-columns: repeat(4, 1fr); }
  .kachel--breit { grid-column: 1 / 4; }
  .kachel--clip  { grid-column: 4; grid-row: 1 / 3; }
  .kachel--wide2 { grid-column: span 2; }
  .kachel--wide2 img { aspect-ratio: 2.39 / 1; }
}

/* Lightbox ----------------------------------------------------------------- */
.lightbox {
  width: min(94vw, 1400px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--night-deep);
  color: var(--cream);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(3, 8, 20, .9); backdrop-filter: blur(4px); }
.lightbox img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius) var(--radius) 0 0;
  background: #000;
}
.lightbox__caption {
  margin: 0;
  padding: .85rem 1.1rem;
  font-size: var(--fs-small);
  color: var(--muted);
}
.lightbox__close {
  position: absolute;
  top: -.85rem;
  right: -.85rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--gold);
  color: var(--night);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* =============================================================== Ensemble == */
.credits {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
}
@media (min-width: 620px) {
  .credits { grid-template-columns: 1fr 1fr; }
}
.credits > div {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.credits dt {
  margin-bottom: .4rem;
  font-family: var(--serif);
  font-size: .84rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.credits dd {
  margin: 0;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}

/* ==================================================================== FAQ == */
.faq { border-top: 1px solid var(--line-soft); }

.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem .25rem;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: .72rem;
  height: .72rem;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--gold-bright); }

.faq__a { padding: 0 .25rem 1.3rem; }
.faq__a p { margin: 0; color: var(--muted); max-width: 62ch; }

/* ================================================================= Finale == */
.section--finale {
  /* Der Papierhorizont des Footers ragt hier hinein — ohne diesen Fußraum
     läge er über dem Aufruf zum Ticketkauf. */
  padding-bottom: clamp(7rem, 11vw, 10rem);
  text-align: center;
}
/* Das Finale ist als einziger Abschnitt mittig gesetzt — dort bleibt auch der
   Textblock zentriert, statt an der linken Kante zu kleben. */
.section--finale .wrap--narrow > * { margin-inline: auto; }
.section--finale {
  background: linear-gradient(180deg, var(--night-deep), rgba(26, 31, 72, .55));
}
.finale__claim {
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.28;
  color: var(--white);
  text-wrap: balance;
}
.finale__claim em { font-style: normal; color: var(--gold); }
.finale__actions {
  display: flex;
  justify-content: center;
  margin: 0 0 1.1rem;
}
/* Drei eigenständige Angaben, kein Fließtext. Auf breiten Schirmen eine Zeile
   mit Trennpunkten, auf dem Handy untereinander — sonst bricht der Satz mitten
   in „Kinder / bis 2 Jahre frei" um. */
.finale__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.1rem;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--muted);
}
.finale__meta span + span::before {
  content: '·';
  margin-right: 1.1rem;
  opacity: .55;
}

/* ================================================================= Footer == */
.footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line-soft);
  background: var(--night-deep);
  font-size: var(--fs-small);
}
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.footer p { margin: 0; }
.footer__brand {
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
}
.footer__links { display: flex; gap: 1.25rem; }
.footer__links a { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--line); }
.footer__links a:hover { color: var(--gold-bright); }

/* ================================================== Kopfleiste + Stickybar ==
   Auf dem Handy liegt der Ticketweg unten am Daumen, auf großen Schirmen
   oben in der Kopfleiste. Nie beides gleichzeitig. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem clamp(1rem, 3vw, 2rem);
  background: rgba(6, 14, 34, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transform: translateY(-100%);
  transition: transform .3s ease;
}
.topbar.is-visible { transform: translateY(0); }
.topbar__mark img { width: 168px; height: auto; }

/* Eine Leiste über die volle Breite, nicht ein schwebender goldener Balken.
   Zwei Gründe: der Knopf braucht nur eine Zeile Text, und Safari auf dem iPhone
   färbt seine untere Werkzeugleiste nach der Farbe am unteren Seitenrand — ein
   goldener Balken dort färbt die halbe Browseroberfläche mit. */
.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: .7rem var(--pad-wrap);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(6, 14, 34, .94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.stickybar.is-visible { transform: translateY(0); }
.stickybar .btn { width: 100%; }

@media (min-width: 900px) {
  .topbar { display: flex; }
  .stickybar { display: none; }
}
@media (max-width: 899px) {
  body { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
}

/* ================================================= Auftauchen beim Scrollen */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .starfield span { opacity: .45; }
}

/* ====================================================== Enge Handydisplays ==
   Auf dem Handy stehen Prinz und Fuchs im unteren Bilddrittel. Jede Textzeile,
   die der Kopf zu viel braucht, schiebt sich über sie. Deshalb hier: engere
   Sperrung, damit Kicker und Quellenzeile einzeilig bleiben, kompaktere
   Plaketten — und die Städtezeile fällt weg, weil der Spielplan ohnehin direkt
   darunter steht. */
@media (max-width: 640px) {
  .hero { padding-block: 3.5rem clamp(2rem, 6vw, 3rem); }

  .eyebrow      { font-size: .68rem; letter-spacing: .1em; }
  .hero__title  { margin-bottom: .7rem; }
  .hero__title img { width: min(92%, 20rem); }
  .hero__claim  { letter-spacing: .12em; font-size: .98rem; margin-bottom: .3rem; }
  .hero__source { font-size: .66rem; letter-spacing: .01em; margin-bottom: 1rem; }

  .facts        { font-size: .78rem; gap: .35rem; margin-bottom: 1.2rem; }

  /* „CineStar Frankfurt Metropolis IMAX" brach als einziger Name um und machte
     zwei Zeilen höher als die übrigen. */
  .vorstellung__ort span { font-size: .82rem; }
  .facts li     { padding: .24rem .7rem; }

  /* Zwei vollwertige Knöpfe untereinander — auf dem Handy trifft der Daumen
     eine breite Fläche sicherer als zwei schmale nebeneinander. */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
    margin-bottom: 0;
    max-width: 18rem;
    margin-inline: auto;
  }
  .hero__actions .btn { width: 100%; }
  .hero__actions .btn--ghost {
    background: rgba(6, 14, 34, .62);
    backdrop-filter: blur(6px);
    border-color: rgba(246, 231, 193, .3);
    color: var(--white);
  }

  /* Die vier Städte stehen zwei Bildschirmhöhen tiefer noch einmal, dort mit
     Uhrzeit und Ticketlink. Hier kosten sie nur Platz. */
  .hero__tour { display: none; }

  .finale__meta { flex-direction: column; gap: .3rem; }
  .finale__meta span + span::before { content: none; }

  /* Auf dem Handy stehen Prinz und Fuchs oben im Bild, die Schrift beginnt auf
     Höhe ihrer Füße. Der Bildausschnitt wird dafür nach unten verschoben, der
     Textblock ans untere Ende gerückt. */
  /* Der Papierhorizont ragt vom nächsten Abschnitt in den Hero hinein. Ohne
     genug Fußraum stößt der zweite Knopf direkt daran. */
  .section--termine::before,
  .footer::before { height: 52px; }

  .hero { align-items: end; padding-block: 1.5rem 6rem; }
  .hero__media img { object-position: 50% 59%; }

  /* Der Text liegt jetzt auf dem hellen Weg statt auf Nachthimmel. Die untere
     Bildhälfte wird deshalb kräftig abgedunkelt — oben bleibt das Bild offen,
     damit die Figuren leuchten. */
  .hero__fade {
    background:
      linear-gradient(180deg, rgba(6,14,34,.34) 0%, rgba(6,14,34,0) 20%),
      linear-gradient(0deg, var(--night) 0%, var(--night) 6%, rgba(6,14,34,.88) 26%,
                      rgba(6,14,34,.62) 44%, rgba(6,14,34,0) 64%);
  }
}

/* ============================================================ Kontaktblock ==
   Sitzt als letztes Element im FAQ-Akkordeon — die Frage, die dort nicht
   beantwortet wird, stellt man am besten gleich an Ort und Stelle.
   Bewusst ohne name="faq": das Formular soll offen bleiben, wenn jemand
   nebenher noch eine der Fragen aufklappt. */
/* Als eigene Karte abgesetzt: zwischen sechs gleich aussehenden Fragen ging
   der Kontaktblock schlicht unter. Rahmen, Goldschimmer und die Unterzeile
   machen sichtbar, dass hier etwas anderes wartet als eine siebte Antwort. */
.faq__kontakt {
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(232, 181, 74, .07), rgba(232, 181, 74, .02));
}
.faq__kontakt summary { padding: 1rem clamp(.9rem, 3vw, 1.25rem); }
.faq__kontakt summary::after { border-color: var(--gold-bright); }
.faq__kontakt[open] summary { padding-bottom: .85rem; }
.faq__kontakt .faq__a {
  padding: 1.1rem clamp(.9rem, 3vw, 1.25rem) 1.25rem;
  border-top: 1px solid var(--line-soft);
}

.faq__kontakt-kopf {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}
.faq__kontakt-icon {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq__kontakt-text b {
  display: block;
  color: var(--gold-bright);
  line-height: 1.3;
}
.faq__kontakt-text > span {
  display: block;
  margin-top: .1rem;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}


.kontakt {
  display: grid;
  gap: .9rem;
  max-width: 34rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(6, 14, 34, .45);
}
@media (min-width: 620px) {
  .kontakt { grid-template-columns: 1fr 1fr; }
  .kontakt__feld--breit,
  .kontakt__zustimmung,
  .faq__a .kontakt__aktion { grid-column: 1 / -1; }
}

/* Honigtopf: aus dem Sichtfeld geschoben statt display:none — manche Bots
   überspringen verborgene Felder, aus dem Bild geschobene füllen sie aus. Für
   Tastatur und Screenreader ist es über tabindex und aria-hidden trotzdem weg. */
.kontakt__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


.faq__a .kontakt__feld { display: grid; gap: .35rem; margin: 0; }
.kontakt__feld label {
  font-family: var(--serif);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.kontakt input,
.kontakt textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(6, 14, 34, .6);
  color: var(--white);
  font: inherit;
  font-size: .95rem;
}
.kontakt textarea { resize: vertical; min-height: 5.5rem; }
.kontakt input:focus-visible,
.kontakt textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: transparent;
}

.kontakt input::placeholder,
.kontakt textarea::placeholder { color: rgba(246, 231, 193, .35); }

/* Muss nach den allgemeinen Feldregeln stehen: `.kontakt input` setzt
   width: 100 %, hat dieselbe Spezifität und würde die Checkbox sonst über die
   ganze Zeile ziehen. */
.kontakt__zustimmung {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted);
}
.kontakt__zustimmung input[type="checkbox"] {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .1rem;
  padding: 0;
  accent-color: var(--gold);
}
.kontakt__zustimmung label { font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.kontakt__zustimmung a { color: var(--gold-bright); }

.faq__a .kontakt__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin: 0;
}
.kontakt__hinweis {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
  transition: color .2s ease;
}
/* Der Hinweis ist bis zum ersten Absenden leer und tritt danach hervor: golden
   bei einem Problem, grün bei Erfolg. */
.kontakt__hinweis.is-laut { color: var(--gold-bright); }
.kontakt__hinweis.is-gut  { color: #8FD9A8; }

.kontakt .btn:disabled { opacity: .6; cursor: progress; }
.kontakt .btn:disabled:hover { transform: none; box-shadow: 0 2px 0 rgba(0,0,0,.28); }

/* ============================================================= Rechtsseiten ==
   Impressum und Datenschutz teilen sich Farbwelt und Schrift mit der
   Landingpage, verzichten aber auf Bild, Bewegung und Aufrufe zum Ticketkauf:
   wer hier landet, sucht eine Auskunft, kein Angebot. */
.rechtskopf {
  padding-block: clamp(1.5rem, 4vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line-soft);
}
.rechtskopf .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.rechtskopf img { width: 190px; height: auto; }
.rechtskopf a { text-decoration: none; }
.rechtskopf .btn--ghost { font-size: .9rem; padding: .55em 1.2em; }

/* Der Papierhorizont des Footers ragt auch hier hinein — der Fußraum muss ihn
   aufnehmen, sonst läuft er in den letzten Absatz. */
.rechtstext { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(6rem, 10vw, 8rem); }
.rechtstext h1 {
  margin: 0 0 .6rem;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
}
.rechtstext .stand {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  font-size: var(--fs-small);
  color: var(--muted);
}
.rechtstext h2 {
  margin: clamp(2rem, 5vw, 2.75rem) 0 .75rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.rechtstext h3 {
  margin: 1.5rem 0 .4rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
}
.rechtstext p,
.rechtstext li { color: var(--cream); text-wrap: pretty; }
.rechtstext p { margin: 0 0 .9rem; }
.rechtstext ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .35rem; }
.rechtstext a { color: var(--gold-bright); }
.rechtstext strong { color: var(--white); }

/* Firmen- und Behördenanschriften: als Block gesetzt, nicht als Fließtext. */
.rechtstext address {
  margin: 0 0 .9rem;
  padding: .9rem 1.1rem;
  border-left: 2px solid var(--line);
  background: rgba(6, 14, 34, .4);
  font-style: normal;
  line-height: 1.6;
}

/* Was die Seite tut und was nicht — als Tabelle schneller zu erfassen. */
.rechtstext table {
  width: 100%;
  margin: 0 0 1.2rem;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.rechtstext th,
.rechtstext td {
  padding: .6rem .75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.rechtstext th { color: var(--gold); font-weight: 700; white-space: nowrap; }
.rechtstext td { color: var(--cream); }