/* ==========================================================================
   educis — Animationsfilm der Produktseiten ("Stay tuned")

   Diese Datei ist in educis Play, educis Quest und educis Connect dieselbe.
   Sie enthält die Seite (Kopfzeile, Bühne, Fußzeile) und die Bausteine, aus
   denen die Szenen gebaut sind. Was nur ein Produkt braucht, steht in dessen
   scenes.css.

   Alle Maße auf der Bühne hängen an EINER Einheit: --u ist ein Hundertstel
   der Bühnenbreite (im Hochformat etwas mehr). Der Film sieht damit auf der
   digitalen Tafel und auf dem Handy gleich aus — nur größer oder kleiner.
   ========================================================================== */

.stay {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(80% 60% at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(60% 50% at -10% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--bg);
}

/* ---------- Kopfzeile ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1320px, 100%);
  margin-inline: auto;
  padding: 14px var(--gutter);
}
.top__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 650;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.top__brand img { width: 34px; height: 34px; border-radius: 9px; }
.top__brand small {
  margin-left: 2px;
  color: var(--muted);
  font-weight: 500;
  font-size: 1.12rem;
}
.top__actions { display: flex; align-items: center; gap: 6px; }
.top__link {
  padding: 8px 12px;
  border-radius: var(--pill);
  color: var(--text);
  font-size: 0.95rem;
  text-decoration: none;
}
.top__link:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
@media (max-width: 560px) {
  .top__link { display: none; }
}

/* ---------- Mitte ---------- */
.stay__main {
  display: grid;
  align-content: center;
  gap: clamp(14px, 2.2vh, 26px);
  width: min(1320px, 100%);
  margin-inline: auto;
  padding: 4px var(--gutter) 18px;
}

.film {
  --f-bg: #0b0915;
  --f-surface: #17132b;
  --f-surface-2: #221c3f;
  --f-line: rgb(255 255 255 / 0.1);
  --f-line-strong: rgb(255 255 255 / 0.2);
  --f-text: #f5f3ff;
  --f-muted: #aaa4cc;
  --f-accent: #8b5cf6;
  --f-accent-2: #c4b5fd;
  --f-deep: #6d28d9;
  --f-a: #fb923c;
  --f-b: #60a5fa;
  --f-ok: #34d399;
  --f-warn: #fbbf24;
  --f-bad: #f87171;
}

.film__stage {
  position: relative;
  width: min(100%, calc((100svh - 344px) * 16 / 9));
  min-width: min(100%, 560px);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  border-radius: clamp(16px, 2.2vw, 30px);
  overflow: hidden;
  isolation: isolate;
  background: var(--f-bg);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.06) inset,
    0 2px 2px rgb(46 16 101 / 0.08),
    0 50px 100px -40px rgb(46 16 101 / 0.55);
  container-type: size;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
/* Niedrige Bildschirme (Laptop): etwas kleinere Bühne, damit das Formular ohne Scrollen sichtbar bleibt. */
@media (max-height: 820px) and (min-width: 721px) {
  .film__stage,
  .stay__bar { width: min(100%, calc((100svh - 408px) * 16 / 9)); }
}
@media (max-width: 720px) {
  .film__stage {
    width: min(100%, calc((100svh - 250px) * 4 / 5));
    min-width: 0;
    aspect-ratio: 4 / 5;
  }
}

.film__canvas {
  --u: 1cqw;
  position: absolute;
  inset: 0;
  color: var(--f-text);
  font-family: var(--font);
  font-size: calc(1.6 * var(--u));
  line-height: 1.3;
}
@container (max-aspect-ratio: 1/1) {
  .film__canvas { --u: 1.9cqw; }
}

/* Hintergrund der Bühne: zwei wandernde Lichter und ein feines Punktraster */
.film__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.film__bg::before,
.film__bg::after {
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(calc(7 * var(--u)));
  opacity: 0.55;
}
.film__bg::before {
  left: -18%;
  top: -42%;
  background: radial-gradient(circle, #7c3aed 0%, transparent 62%);
  animation: film-drift-a 16s ease-in-out infinite alternate;
}
.film__bg::after {
  right: -24%;
  bottom: -56%;
  background: radial-gradient(circle, #4f46e5 0%, transparent 62%);
  animation: film-drift-b 19s ease-in-out infinite alternate;
}
.film__grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.11) 1px, transparent 0);
  background-size: calc(2.6 * var(--u)) calc(2.6 * var(--u));
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
}
@keyframes film-drift-a { to { transform: translate(14%, 18%) scale(1.15); } }
@keyframes film-drift-b { to { transform: translate(-16%, -14%) scale(1.1); } }
.film.is-paused .film__bg::before,
.film.is-paused .film__bg::after { animation-play-state: paused; }

/* ---------- Szenen ---------- */
.scene {
  position: absolute;
  inset: 0;
  display: grid;
  padding: calc(5.2 * var(--u)) calc(6 * var(--u)) calc(7.4 * var(--u));
  visibility: hidden;
  opacity: 0;
}
/* Ohne Skript (oder solange es lädt) steht das Schlussbild. */
.film:not(.is-live) .scene:last-of-type { visibility: visible; opacity: 1; }

.scene--center {
  place-items: center;
  align-content: center;
  gap: calc(2.4 * var(--u));
  text-align: center;
}
.scene--split {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: calc(4 * var(--u));
}
.scene--top {
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  gap: calc(2.6 * var(--u));
  text-align: center;
}
.scene__text { display: grid; gap: calc(1.5 * var(--u)); justify-items: start; }
.scene--center .scene__text,
.scene--top .scene__text { justify-items: center; }
.scene__vis { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; width: 100%; height: 100%; }

@container (max-aspect-ratio: 1/1) {
  .scene { padding: calc(6.6 * var(--u)) calc(3.4 * var(--u)) calc(7 * var(--u)); }
  /* Oben links steht schon der Hinweis "Vorschau": Die Vorzeile entfällt. */
  .scene .f-k { display: none; }
  .scene--split {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: calc(2.4 * var(--u));
    text-align: center;
  }
  .scene--split .scene__text { justify-items: center; }
}

/* Zwei Zeilen an derselben Stelle (die eine geht, die andere kommt) */
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }

/* ---------- Schrift ---------- */
.f-k {
  display: inline-flex;
  align-items: center;
  gap: calc(0.7 * var(--u));
  font-family: var(--mono);
  font-size: calc(1.02 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f-accent-2);
}
.f-k::before {
  content: "";
  width: calc(0.55 * var(--u));
  height: calc(0.55 * var(--u));
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 calc(1.2 * var(--u)) currentColor;
}
.f-h {
  margin: 0;
  font-size: calc(5 * var(--u));
  line-height: 1.03;
  letter-spacing: -0.038em;
  font-weight: 650;
  color: var(--f-text);
  text-wrap: balance;
}
.f-h--xl { font-size: calc(6.6 * var(--u)); }
.f-h--md { font-size: calc(4 * var(--u)); }
.f-h em { font-style: italic; font-weight: 600; color: var(--f-accent-2); }
.f-s {
  margin: 0;
  max-width: 36ch;
  font-size: calc(1.72 * var(--u));
  line-height: 1.42;
  color: var(--f-muted);
  text-wrap: balance;
}
.f-s b { color: var(--f-text); font-weight: 550; }

/* Wörter fahren hinter einer Kante hoch */
.fw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.04em 0.07em 0.16em 0;
  margin: -0.04em -0.07em -0.16em 0;
}
.fwi { display: inline-block; will-change: transform; }

/* ---------- Bausteine ---------- */
.f-card {
  border: 1px solid var(--f-line);
  border-radius: calc(1.6 * var(--u));
  background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.025));
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) calc(-2 * var(--u)) rgb(0 0 0 / 0.7);
  -webkit-backdrop-filter: blur(calc(1.2 * var(--u)));
  backdrop-filter: blur(calc(1.2 * var(--u)));
}
.f-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(0.6 * var(--u));
  padding: calc(0.55 * var(--u)) calc(1.1 * var(--u));
  border: 1px solid var(--f-line);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  font-size: calc(1.2 * var(--u));
  font-weight: 500;
  white-space: nowrap;
  color: var(--f-text);
}
.f-chip--ok { color: #a7f3d0; border-color: rgb(52 211 153 / 0.4); background: rgb(52 211 153 / 0.12); }
.f-chip--warn { color: #fde68a; border-color: rgb(251 191 36 / 0.45); background: rgb(251 191 36 / 0.12); }
.f-chip--accent { color: #ddd6fe; border-color: rgb(139 92 246 / 0.55); background: rgb(139 92 246 / 0.2); }
.f-ico {
  width: calc(1.9 * var(--u));
  height: calc(1.9 * var(--u));
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.f-dot {
  width: calc(0.8 * var(--u));
  height: calc(0.8 * var(--u));
  border-radius: 50%;
  background: var(--f-ok);
  box-shadow: 0 0 0 0 rgb(52 211 153 / 0.6);
  animation: film-pulse 1.6s ease-out infinite;
}
@keyframes film-pulse { to { box-shadow: 0 0 0 calc(1.1 * var(--u)) rgb(52 211 153 / 0); } }
.film.is-paused .f-dot { animation-play-state: paused; }

/* Geräte */
.dev {
  position: relative;
  border: calc(0.5 * var(--u)) solid #2b2547;
  background: #0f0c1e;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 calc(3 * var(--u)) calc(6 * var(--u)) calc(-2.4 * var(--u)) rgb(0 0 0 / 0.9);
  overflow: hidden;
}
.dev--phone { width: calc(17 * var(--u)); aspect-ratio: 9 / 18.5; border-radius: calc(2.6 * var(--u)); }
.dev--phone::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: calc(0.7 * var(--u));
  left: 50%;
  width: 30%;
  height: calc(0.9 * var(--u));
  border-radius: 999px;
  background: #05040c;
  transform: translateX(-50%);
}
.dev--tablet { width: calc(30 * var(--u)); aspect-ratio: 4 / 3; border-radius: calc(1.9 * var(--u)); }
.dev--board {
  width: calc(46 * var(--u));
  aspect-ratio: 16 / 9;
  border-radius: calc(1.2 * var(--u));
  border-width: calc(0.7 * var(--u));
}
.dev__screen { position: absolute; inset: 0; display: grid; }

/* Schlussbild */
.outro__mark {
  position: relative;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  display: grid;
  place-items: center;
}
.outro__mark img {
  width: 100%;
  height: 100%;
  border-radius: 24%;
  box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgb(109 40 217 / 0.7);
}
.outro__ring {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  border: 1px solid rgb(196 181 253 / 0.35);
}
.outro__ring + .outro__ring { inset: -70%; border-color: rgb(196 181 253 / 0.18); }
.outro__name {
  font-size: calc(2.1 * var(--u));
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--f-text);
}
.outro__tuned { font-size: calc(8.4 * var(--u)); letter-spacing: -0.045em; }

/* ---------- Bedienung ---------- */
.film__hud {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(12px, 2.4cqw, 22px);
  background: linear-gradient(180deg, transparent, rgb(8 6 18 / 0.72));
  cursor: default;
}
.film__segs { display: flex; flex: 1; gap: 5px; }
.film__seg {
  position: relative;
  flex: 1;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.film__seg::before,
.film__seg i {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 3px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.22);
}
.film__seg i {
  right: auto;
  width: 100%;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}
.film__seg:hover::before { background: rgb(255 255 255 / 0.4); }
.film__seg:focus-visible,
.film__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.film__btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.film__btn:hover { background: rgb(255 255 255 / 0.2); transform: scale(1.06); }
.film__btn svg { width: 15px; height: 15px; fill: currentColor; }
.film__btn [data-icon] { display: none; }
.film[data-state="playing"] .film__btn [data-icon="pause"],
.film[data-state="paused"] .film__btn [data-icon="play"],
.film[data-state="ended"] .film__btn [data-icon="replay"] { display: block; }
.film__badge {
  position: absolute;
  z-index: 5;
  top: clamp(10px, 2cqw, 18px);
  left: clamp(12px, 2.4cqw, 22px);
  padding: 5px 10px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  background: rgb(8 6 18 / 0.5);
  color: rgb(255 255 255 / 0.78);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ---------- Unter der Bühne ---------- */
.stay__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 24px;
  width: min(100%, calc((100svh - 344px) * 16 / 9));
  min-width: min(100%, 560px);
  margin-inline: auto;
}
.stay__claim { display: grid; gap: 4px; flex: 1 1 300px; min-width: 0; max-width: 520px; }
.stay__claim h1 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 650;
  letter-spacing: -0.025em;
}
.stay__claim p { margin: 0; color: var(--muted); font-size: 0.98rem; max-width: 60ch; }
@media (max-width: 720px) {
  .stay__bar { width: 100%; min-width: 0; }
}

/* ---------- Anmeldung für Neuigkeiten ---------- */
.notify {
  display: grid;
  gap: 8px;
  flex: 1 1 400px;
  max-width: 560px;
}
.notify__label { color: var(--ink); font-size: 0.92rem; font-weight: 600; }
.notify__row { display: flex; gap: 8px; }
.notify__row[hidden] { display: none; }
.notify__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.notify__input::placeholder { color: var(--muted); opacity: 0.8; }
.notify__input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.notify__input[aria-invalid="true"] { border-color: #dc2626; }
.notify__row .btn { flex: none; height: 46px; }
.notify__row .btn:disabled { opacity: 0.6; cursor: progress; }
/* Für Menschen unsichtbar, für Programme ein gewöhnliches Feld. */
.notify__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.notify__consent {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}
.notify__consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.notify__status {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 0.92rem;
  line-height: 1.45;
}
.notify__status[data-kind="ok"] { background: var(--ok-soft); color: var(--ok); }
.notify__status[data-kind="error"] { background: var(--warn-soft); color: var(--warn); }
@media (max-width: 520px) {
  .notify__row { flex-direction: column; }
  .notify__input { flex: none; }
  .notify__row .btn { justify-content: center; }
}

/* ---------- Fußzeile ---------- */
.bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  width: min(1320px, 100%);
  margin-inline: auto;
  padding: 12px var(--gutter) 16px;
  color: var(--muted);
  font-size: 0.86rem;
}
.bottom nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.bottom a { color: var(--muted); text-decoration: none; }
.bottom a:hover { color: var(--ink); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}