:root {
  /* ======================================================
     BRAND COLORS
     ====================================================== */

  --color-bordeaux: #390000;
  --color-cream: #ffe7cc;
  --color-gold: #87570b;

  /* ======================================================
     BORDEAUX SHADES
     ====================================================== */

  --bordeaux-950: #190000;
  --bordeaux-900: #260000;
  --bordeaux-800: #390000;
  --bordeaux-700: #510d0d;
  --bordeaux-600: #6b2424;
  --bordeaux-500: #874141;

  /* ======================================================
     CREAM SHADES
     ====================================================== */

  --cream-50: #fffaf5;
  --cream-100: #fff2e3;
  --cream-200: #ffe7cc;
  --cream-300: #f8d5ad;
  --cream-400: #e9bd8c;

  /* ======================================================
     GOLD SHADES
     ====================================================== */

  --gold-700: #654006;
  --gold-600: #87570b;
  --gold-500: #a46f1d;
  --gold-400: #c29243;
  --gold-300: #ddbd82;

  /* ======================================================
     SEMANTIC COLORS
     Diese Variablen verwenden wir später in Komponenten.
     ====================================================== */

  --color-background: var(--cream-100);
  --color-background-soft: var(--cream-50);
  --color-surface: var(--cream-200);

  --color-text: var(--bordeaux-800);
  --color-text-soft: rgba(57, 0, 0, 0.7);
  --color-text-on-dark: var(--cream-100);

  --color-border: rgba(57, 0, 0, 0.16);
  --color-border-gold: rgba(135, 87, 11, 0.45);

  --color-button-primary: var(--bordeaux-800);
  --color-button-primary-hover: var(--bordeaux-700);
  --color-button-text: var(--cream-100);

  --color-accent: var(--gold-600);
  --color-accent-soft: var(--gold-300);

  /* ======================================================
     EFFECTS
     ====================================================== */

  --shadow-soft: 0 18px 50px rgba(57, 0, 0, 0.12);
  --shadow-medium: 0 22px 60px rgba(25, 0, 0, 0.2);

  --radius-small: 12px;
  --radius-medium: 20px;
  --radius-large: 32px;
  --radius-pill: 999px;

  --transition-fast: 180ms ease;
  --transition-normal: 400ms ease;
  --transition-slow: 700ms ease;
}
/* 
  Grundsetup:
  box-sizing sorgt dafür, dass Breiten und Abstände leichter kontrollierbar sind.
*/
* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-text);
  background:
    radial-gradient(
      circle at top,
      rgba(135, 87, 11, 0.07),
      transparent 36rem
    ),
    linear-gradient(
      180deg,
      var(--cream-50) 0%,
      var(--cream-100) 52%,
      var(--cream-200) 100%
    );
}
/* Solange der Intro Screen sichtbar ist, bleibt die Seite im Hintergrund ruhig. */
.js:not(.premiere-seen) body.premiere-active {
  overflow: hidden;
}

/* Der vorab gelesene Sitzungsstatus verhindert ein sichtbares Aufblitzen des Intros. */
.js.premiere-seen .premiere-gate {
  display: none;
}

/* Das Modal fixiert die Seite an ihrer aktuellen Scrollposition. */
body.modal-open {
  position: fixed;
  top: calc(-1 * var(--scroll-lock-position, 0px));
  width: 100%;
  overflow: hidden;
  padding-right: var(--scrollbar-compensation, 0px);
}

/* Vollflächiger Einstieg im Stil einer privaten Filmpremiere */
.premiere-gate {
  --premiere-background-top: #2a090b;
  --premiere-background-bottom: #170405;

  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background:
    radial-gradient(
      ellipse at center,
      transparent 52%,
      rgba(0, 0, 0, 0.14) 100%
    ),
    linear-gradient(
      180deg,
      var(--premiere-background-top) 0%,
      var(--premiere-background-bottom) 100%
    );
  color: var(--color-text-on-dark);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 700ms ease,
    visibility 700ms ease;
}

.premiere-gate.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.premiere-gate__content {
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.premiere-gate__logo {
  display: block;
  width: min(170px, 48vw);
  height: auto;
  margin: 0 auto 30px;
}

.premiere-gate__kicker {
  margin: 0 0 18px;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.premiere-gate h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 12vw, 5rem);
  font-weight: 400;
  line-height: 0.98;
}

.premiere-gate__text {
  max-width: 29rem;
  margin: 24px auto 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 231, 204, 0.74);
}

.premiere-button {
  min-width: 220px;
  margin-top: 32px;
  padding: 16px 30px;

  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-pill);

  font: inherit;
  font-weight: 600;
  letter-spacing: 0.015em;

  color: var(--bordeaux-800);
  background: var(--cream-200);

  cursor: pointer;

  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);

  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.premiere-button:hover,
.premiere-button:focus-visible {
  transform: translateY(-2px);
  background: var(--cream-100);
  border-color: var(--gold-400);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.premiere-button:active {
  transform: translateY(0);
}

.premiere-button:focus-visible,
.watch-button:focus-visible,
.close-button:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 4px;
}
/* Hauptfläche der Seite */
.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 18px;
}

/* Zentraler Hero Bereich */
.hero {
  width: 100%;
  max-width: 560px;
  text-align: center;
}
/* Dezentes Logo über dem Hero Bereich */
.site-logo {
  display: block;
  width: min(150px, 42vw);
  height: auto;
  margin: 0 auto 24px;
  opacity: 0.92;
}
/* Kleine Zeile über dem Namen */
.kicker {
  margin: 0 0 20px;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Haupttitel */
h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.4rem, 15vw, 6.4rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

/* Datum */
.date {
  margin: 20px 0 18px;
  font-size: 0.92rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* Kurzer Intro Text */
.intro {
  max-width: 32rem;
  margin: 0 auto 30px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-soft);
}

/* Äußere Videokarte */
.video-card {
  position: relative;
  padding: 8px;
  border: 1px solid var(--color-border-gold);
  border-radius: 26px;
  background: rgba(255, 250, 245, 0.5);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Innerer Video Platzhalter */
.video-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: 19px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.48)),
    url("../images/poster.png") center / cover no-repeat,
    #171511;
  color: #f6efe6;
}


/* Kleines Play Symbol */
.play-mark {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border: 1px solid rgba(246, 239, 230, 0.36);
  border-radius: 999px;
  position: relative;
  background: rgba(0, 0, 0, 0.18);
}

.play-mark::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid rgba(246, 239, 230, 0.82);
}

.video-placeholder span {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(246, 239, 230, 0.72);
}

/* Hauptbutton */
.watch-button {
  margin-top: 30px;
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-pill);
  padding: 15px 26px;
  min-width: 190px;
  font: inherit;
  font-weight: 600;
  color: var(--color-button-text);
  background: var(--color-button-primary);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--transition-fast),
    background var(--transition-fast);
}

.watch-button:hover,
.watch-button:focus-visible {
  transform: translateY(-2px);
  background: var(--color-button-primary-hover);
}

/* Kleiner Hinweis unter dem Button */
.hint {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: rgba(57, 0, 0, 0.52);
}

/* Video Overlay ist zunächst unsichtbar */
.video-modal {
  position: fixed;
  inset: 0;
  display: none;
  padding: 18px;
  background: rgba(25, 0, 0, 0.88);
  z-index: 10;
}

/* Diese Klasse wird per JavaScript gesetzt */
.video-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal[hidden] {
  display: none;
}

.video-modal__content {
  width: 100%;
  max-width: 920px;
}

.close-button {
  display: block;
  margin: 0 0 14px auto;
  border: 0;
  background: transparent;
  color: #f6efe6;
  font: inherit;
  cursor: pointer;
}

.close-button:hover,
.close-button:focus-visible {
  color: var(--color-accent-soft);
}

.video-box {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bordeaux-950);
color: rgba(255, 231, 204, 0.72);
box-shadow: var(--shadow-medium);
  text-align: center;
  padding: 0;
}

.video-box p {
  margin: 0;
  padding: 24px;
}

.video-box__fallback {
  max-width: 34rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  line-height: 1.5;
  color: var(--color-text-on-dark);
}

.video-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Kleine Optimierung für sehr schmale Smartphones */
@media (max-width: 380px) {
  .page {
    padding-inline: 14px;
  }

  .intro {
    font-size: 0.95rem;
  }

  .watch-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .premiere-button:hover,
  .premiere-button:focus-visible,
  .watch-button:hover,
  .watch-button:focus-visible {
    transform: none;
  }
}