/* Gemeinsames Gestaltungssystem (12.11.2026).
   Wird auf jeder Seite als letzte Stildatei geladen und gleicht an, was über
   viele Arbeitsschritte auseinandergelaufen ist: Knöpfe, Überschriften,
   Vorzeilen, Kartenecken, Abstände und den Fußbereich. Farben bleiben Sache
   der jeweiligen Seite. Neue Bausteine nutzen diese Werte direkt. */
:root {
  --la-radius-s: 10px;    /* Knöpfe, kleine Bilder */
  --la-radius-m: 16px;    /* Karten */
  --la-radius-l: 28px;    /* Blätter und gerahmte Bühnen */
  --la-button: 3rem;      /* Höhe eines Hauptknopfs */
  --la-button-s: 2.5rem;  /* Höhe eines Knopfs in Leisten und Karten */
  --la-h1: clamp(2.6rem, 6.4vw, 5.2rem);
  --la-h2: clamp(2rem, 4vw, 3.4rem);
  --la-h3: clamp(1.2rem, 1.7vw, 1.45rem);
  --la-lead: clamp(1.05rem, 1.4vw, 1.2rem);
  --la-section: clamp(3rem, 7vw, 6rem);
}

/* ── Knöpfe ── */
/* Hauptknöpfe: eine Höhe, eine Ecke, eine Schrift. */
html .button,
html .detail-cta,
html .stage-enter,
html .play-start,
html .compare-visit,
html .film-catalog-link,
html .vocab-page .button.primary {
  min-height: var(--la-button);
  padding: 0 1.35rem;
  gap: .55rem;
  border-radius: var(--la-radius-s);
  font: 700 1rem/1.2 var(--heading);
  letter-spacing: -.01em;
}
/* Knöpfe in Karten. */
html .play-tile-go { min-height: var(--la-button-s); padding: 0 1.05rem; border-radius: var(--la-radius-s); font: 700 .94rem/1.2 var(--heading); }
/* Knöpfe in Leisten: rund. */
html .product-bar-offer,
html .play-full,
html .play-tool,
html .catalog-shortcuts a,
html .compare-preset-list button {
  min-height: var(--la-button-s);
  padding: 0 1.05rem;
  border-radius: 999px;
  font: 650 .94rem/1.2 var(--heading);
}
@media (max-width: 560px) {
  html .detail-offers a.detail-anchor,
  html .detail-offers a.detail-cta { min-height: var(--la-button); border-radius: var(--la-radius-s); font-size: 1rem; }
  html .product-bar-offer, html .play-full { padding: 0 .85rem; font-size: .86rem; }
}

/* ── Schrift ── */
/* Vorzeilen über Überschriften. */
html .eyebrow,
html .detail-kicker,
html .film-kicker,
html .play-kicker,
html .play-tile-line,
html .compare-presets h2 {
  font: 700 .75rem/1.4 var(--heading);
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Seitentitel. */
html .play-index-intro h1,
html .compare-intro h1,
html .stage-panel .catalog-heading h2 {
  font-size: var(--la-h1);
  line-height: 1;
  letter-spacing: -.055em;
  text-wrap: balance;
}
/* Abschnittsüberschriften. */
html .detail-inside > h2,
html .journey-heading > h2,
html .detail-purchase h2,
html .film-editorial h2,
html .film-library-intro h2,
html .film-home h2,
html .world-program-intro h2 {
  font-size: var(--la-h2);
  line-height: 1.04;
  letter-spacing: -.05em;
  text-wrap: balance;
}
/* Titel in Karten. */
html .film-library .stage-panel .card-copy h3,
html .play-tile h2,
html .film-lesson-steps h3 {
  font-size: var(--la-h3);
  line-height: 1.15;
  letter-spacing: -.03em;
}
/* Einleitende Sätze. */
html .play-index-lead,
html .stage-panel .catalog-heading p,
html .journey-intro,
html .world-program-intro p { font-size: var(--la-lead); line-height: 1.5; }

/* ── Flächen ── */
html .film-library .stage-panel .product-card,
html .play-tile,
html .inside-moments,
html .film-lesson-steps figure,
html .sheet-still img,
html .detail-cover,
html .cup-cover,
html .film-editorial figure { border-radius: var(--la-radius-m); }
html .film-editorial figure { overflow: hidden; }
html .detail-sheet,
html .film-library .stage-single .stage-panel { border-radius: var(--la-radius-l); }
@media (max-width: 760px) {
  :root { --la-radius-l: 20px; }
}

/* ── Abstände zwischen Abschnitten ── */
html .detail-inside,
html .cup-extra { padding-block: var(--la-section) clamp(1.5rem, 4vw, 3rem); }
html .play-index-intro { padding-block: var(--la-section) clamp(1.5rem, 4vw, 3rem); }

/* ── Fußbereich: überall dieselbe dunkle Leiste ── */
html .site-footer {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid #ffffff1f;
  background: #0b151c;
  color: #fffdf8;
}
html .site-footer p { color: #b9c7cc; }
html .site-footer a { color: inherit; }
html .site-footer nav { flex-wrap: wrap; gap: .5rem clamp(1rem, 3vw, 2.25rem); }
html .site-footer nav a { min-height: 2.75rem; display: inline-flex; align-items: center; }

/* ── Rechtliche Links ── */
/* Impressum und Datenschutz stehen auf jeder Seite, klar benannt, aber zurückhaltend:
   kleiner und leichter als die übrigen Links. Verstecken wäre nicht zulässig. */
html a[href$="impressum.html"],
html a[href$="datenschutz.html"] { font-weight: 400; font-size: .84rem; letter-spacing: 0; opacity: .7; }
html a[href$="impressum.html"]:is(:hover, :focus-visible),
html a[href$="datenschutz.html"]:is(:hover, :focus-visible) { opacity: 1; }