/* Übergangsseite Thüringer Glitzerwelt, Fassung 2 (29.09.2026)
   Richtung „Holo-Cockpit“ nach dem Saisonplakat von Kathi: Glasflächen mit feinen
   Linien und Eckmarken, Cyan-Weiß als Farbe der Bedienung, EIN warmer Akzent
   (Orange bis Gold) für Countdown-Zahl und Newsletter-Knopf.
   Farben mit sharp gemessen: Himmel aus TGW_2026-27_Motiv_e4.jpg (Median je Fläche
   #050717, #1d2c48, #092450), Orange #f1842b und Gold #fbbd00 aus der Füllung von
   schriftzug.png, Cyan #16dafb bis #85efff aus dessen Kontur. Violett #594677 wie
   im Muster A der neuen Seite.
   Schriften: Michroma für Titel und Kennungen (freier Ersatz für Kathis Eurostile
   Extended), Atkinson Hyperlegible für Lesetext. Beide OFL, beide vom eigenen Server.
   Animiert werden nur transform und opacity.
   Fassung 3 (29.09.2026 abends, Alexander): Glas und Bewegung wie auf der Startseite der
   Testseite (Muster A, src/components/muster/holo.module.css): Füllung Alpha 0,52 oben bis
   0,38 unten (Handy 0,6 bis 0,5), Unschärfe 3px, darunter die Ruhezone. Die Fläche faltet
   sich aus einer hellen Linie auf, neigt sich zum Zeiger, ein Schimmer folgt ihm (glas.js).
   Rundes Logo links neben der Überschrift, kein KI-Zeichen mehr (Satz im Impressum). */

@font-face {
  font-family: "Oxanium";
  src: url("/fonts/oxanium-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Michroma";
  src: url("/fonts/michroma-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --tief: #080a1c;
  --grund: #121229;
  --navy: #1d2c48;
  --blau: #20387b;
  --violett: #594677;
  --glas: rgb(12 14 36 / 0.8);
  --glas-dicht: rgb(10 12 30 / 0.9);
  --linie: rgb(54 231 255 / 0.22);
  --linie-hell: rgb(133 239 255 / 0.7);
  --cyan: #85efff;
  --text: #f1f5ff;
  --text-gedimmt: #b9c3e3;
  --warm-von: #f1842b;
  --warm-bis: #fbbd00;
  --warm-verlauf: linear-gradient(100deg, var(--warm-von), var(--warm-bis));
  --auf-warm: #140c2e;
  --breit: "Michroma", "Eurostile", "Segoe UI", system-ui, sans-serif;
  --lese: "Atkinson Hyperlegible", system-ui, "Segoe UI", sans-serif;
  --ecke: 12px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--tief);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: var(--lese);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(110% 55% at 85% 0%, rgb(32 56 123 / 0.5), transparent 70%),
    radial-gradient(90% 50% at 10% 100%, rgb(89 70 119 / 0.42), transparent 70%),
    linear-gradient(to bottom, var(--tief), var(--grund) 45%, #1d1b44);
  background-attachment: fixed;
}

/* Feines Raster wie auf einem Bordrechner, fest und kaum sichtbar */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgb(133 239 255 / 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, rgb(133 239 255 / 0.035) 1px, transparent 1px) 0 0 / 48px 48px;
}

::selection {
  background: var(--cyan);
  color: var(--auf-warm);
}

a {
  color: var(--text);
  text-decoration-color: rgb(133 239 255 / 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  color: var(--cyan);
  text-decoration-color: var(--cyan);
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

main,
footer {
  position: relative;
  z-index: 1;
}

main {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

h1,
h2 {
  font-family: var(--breit);
  font-weight: 400;
  text-wrap: balance;
}

/* ---------- Glasflächen mit Haarlinie und Eckmarken ---------- */

.panel {
  position: relative;
  padding: 1.25rem;
  box-shadow: inset 0 0 0 1px var(--linie);
  background: var(--glas);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}

/* Vier Eckmarken aus acht kurzen Linien, ein einziges Pseudo-Element */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --m: var(--linie-hell);
  background:
    linear-gradient(var(--m), var(--m)) top left / var(--ecke) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) top left / 1px var(--ecke) no-repeat,
    linear-gradient(var(--m), var(--m)) top right / var(--ecke) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 1px var(--ecke) no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / var(--ecke) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 1px var(--ecke) no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / var(--ecke) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 1px var(--ecke) no-repeat;
}

.panel h2 {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* Kleine Raute vor der Kennung, wie ein Statuslicht ohne Blinken */
.panel h2::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: calc(0.75em - 4px);
  border: 1px solid var(--cyan);
  transform: rotate(45deg);
}

/* ---------- Kopf: rundes Logo ---------- */

.logo {
  display: block;
  width: 88px;
  margin: 0 0 1.25rem;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--linie-hell),
    0 0 22px rgb(133 239 255 / 0.22);
}

/* ---------- Startseite ---------- */

main.start {
  max-width: 76rem;
}

.inhalt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 38rem;
}

/* Rundes Logo links neben der Überschrift, in der ersten Fläche */
.konsole-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.konsole-kopf .logo {
  flex: none;
  width: 64px;
  margin: 0;
}

.konsole {
  padding: 1.5rem 1.25rem 1.25rem;
}

.konsole h1 {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: clamp(1.55rem, 6.4vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.zeitraum {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  font-family: var(--breit);
  font-size: clamp(0.8125rem, 3.4vw, 1rem);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--cyan);
}

.zusammen {
  white-space: nowrap;
}

.vorverkauf {
  margin: 0.35rem 0 0;
  color: var(--text);
}

.countdown {
  position: relative;
  margin: 1.25rem 0 0;
  padding: 0.9rem 1rem 0.85rem;
  border: 1px solid var(--linie);
  background: rgb(8 10 28 / 0.55);
}

.countdown[hidden] {
  display: none;
}

.countdown-titel {
  margin: 0;
  font-family: var(--breit);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-gedimmt);
}

.countdown-liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0.5rem 0 0;
}

.einheit {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 0 0.5rem;
}

.einheit:first-child {
  padding-left: 0;
}

.einheit + .einheit {
  border-left: 1px solid var(--linie);
}

.countdown-zahl {
  margin: 0;
  width: fit-content;
  font-family: "Oxanium", var(--breit);
  font-weight: 500;
  font-size: clamp(1.875rem, 8.5vw, 3.5rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--warm-bis);
  background: var(--warm-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgb(241 132 43 / 0.3));
}

.countdown-wort {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--text-gedimmt);
}

.botschaft {
  margin: 1.5rem 0 0;
  color: var(--text-gedimmt);
}

.botschaft p {
  margin: 0 0 0.9rem;
}

.botschaft p:first-child {
  color: var(--text);
  font-size: 1.1875rem;
  line-height: 1.5;
}

.botschaft p:last-child {
  margin-bottom: 0;
  color: var(--text);
}

.kontakt p {
  margin: 0.25rem 0;
  color: var(--text-gedimmt);
}

.kontakt a,
.sozial a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.sozial {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

/* ---------- Newsletter ---------- */

.newsletter > p {
  margin: 0 0 1rem;
  color: var(--text-gedimmt);
}

.feld-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.feld-reihe input {
  flex: 1 1 15rem;
  min-width: 0;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid var(--linie-hell);
  border-radius: 0;
  background: rgb(8 10 28 / 0.85);
  color: var(--text);
  font: inherit;
}

.feld-reihe input::placeholder {
  color: #a3aed3;
  opacity: 1;
}

.feld-reihe input:focus-visible {
  border-color: var(--cyan);
}

/* Der eine warme Knopf der Seite, mit abgeschrägten Ecken wie am Plakat */
.feld-reihe button {
  position: relative;
  flex: 1 1 10rem;
  min-height: 52px;
  padding: 0 1.75rem;
  border: 0;
  background: var(--warm-verlauf);
  color: var(--auf-warm);
  font-family: var(--breit);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform 0.2s ease-out;
}

/* Heller beim Überfahren über eine Deckschicht, damit nur opacity animiert */
.feld-reihe button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.18);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.feld-reihe button:hover {
  transform: translateY(-1px);
}

.feld-reihe button:hover::after {
  opacity: 1;
}

.feld-reihe button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.feld-reihe button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.einwilligung {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--text-gedimmt);
  cursor: pointer;
}

.einwilligung input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.15rem 0 0;
  border: 1px solid var(--linie-hell);
  background: rgb(8 10 28 / 0.85) center / 80% no-repeat;
  cursor: pointer;
}

.einwilligung input:checked {
  border-color: var(--cyan);
  background-color: var(--cyan);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23140c2e' stroke-width='2.2'/%3E%3C/svg%3E");
}

.hinweis {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--text-gedimmt);
}

.nl-meldung {
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--linie-hell);
  background: rgb(8 10 28 / 0.7);
}

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Exponat: das Teleskop steht still ---------- */

.exponat-rahmen {
  position: relative;
  width: min(80vw, 400px);
  margin: 2.5rem auto 0;
}

/* Warmes Licht hinter dem Teleskop, atmet langsam */
.exponat-rahmen::before {
  content: "";
  position: absolute;
  inset: 5% 0 15%;
  background: radial-gradient(closest-side, rgb(241 132 43 / 0.26), transparent);
  filter: blur(20px);
  animation:
    aufleuchten 1.2s ease-out 2.8s both,
    atmen 6s ease-in-out 4s infinite;
}

.exponat {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  animation: einschalten 2.4s ease-out 1.2s both;
}

/* ---------- Unterseiten: Impressum, Datenschutz ---------- */

main.rechtstext {
  padding-top: 1rem;
}

.rechtstext-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.rechtstext-kopf .logo {
  width: 72px;
  margin: 0;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--breit);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}

.blatt {
  padding: 1.5rem 1.25rem 1.75rem;
}

.blatt h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.45rem, 6vw, 2.2rem);
  line-height: 1.25;
}

.blatt h2 {
  margin: 2rem 0 0.5rem;
}

.blatt p,
.blatt address,
.blatt li {
  color: var(--text-gedimmt);
  font-style: normal;
}

.blatt p {
  margin: 0 0 0.9rem;
}

.blatt strong {
  color: var(--text);
}

.blatt a {
  display: inline-block;
  padding: 0.6rem 0;
  margin: -0.6rem 0;
}

/* ---------- Fußzeile ---------- */

footer {
  width: 100%;
  border-top: 1px solid var(--linie);
  background: var(--glas-dicht);
  font-family: var(--breit);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--text-gedimmt);
}

.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.75rem 1rem 1rem;
}

.fuss span {
  flex-basis: 100%;
  padding-top: 0.5rem;
}

footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
}

/* ---------- Nachthimmel über dem See ---------- */
/* Standbild sofort, Video lädt danach und blendet weich ein. Maus und Scrollen
   bewegen diese Ebene und die Sterne, nicht das Teleskop. */

.nacht {
  position: fixed;
  inset: -4%;
  will-change: transform;
  z-index: 0;
  overflow: hidden;
  background: var(--tief);
}

.nacht-bild,
.nacht-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

.nacht-video {
  opacity: 0;
  transition: opacity 1.8s ease-out;
}

.nacht-video.laeuft {
  opacity: 1;
}

/* Himmel leicht in die Plakatfarben ziehen: Blau oben, Violett zur Mitte hin.
   Unten bleibt das Licht am Wasser warm. */
.nacht-ton {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(32 56 123 / 0.5), rgb(89 70 119 / 0.35) 45%, transparent 70%);
  mix-blend-mode: color;
}

/* Abdunkeln beim Scrollen, Wert setzt sterne.js (nur opacity) */
.nacht::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--tief);
  opacity: var(--nacht-dunkel, 0);
  pointer-events: none;
}

/* Handy: unten dunkler, damit die Flächen auf ruhigem Grund liegen */
.nacht::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgb(8 10 28 / 0.15) 0%, rgb(8 10 28 / 0.35) 30%, rgb(8 10 28 / 0.75) 62%, rgb(8 10 28 / 0.88) 100%);
}

#sterne {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Glas wie auf der Startseite der Testseite (Muster A) ----------
   Aufbau in index.html: die Fläche [data-glas] mit Füllung, Inhalt, zwei Lichtkanten und
   Schimmer. Darunter die Ruhezone (::after), sie dämpft eine helle Stelle im Film, damit der
   Text trägt. Die Rechtsseiten behalten das dichte Glas oben. */

.start [data-glas] {
  --fuell-oben: rgb(14 14 36 / 0.6);
  --fuell-unten: rgb(22 22 50 / 0.5);
  --akzent-rgb: 115 226 252;
  isolation: isolate;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform-origin: 50% 50%;
}

/* Ruhezone wie in der Studie: weiche Abdunklung unter dem Glas */
.start [data-glas]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: rgb(10 10 28 / 0.42);
  box-shadow: 0 0 36px 18px rgb(10 10 28 / 0.42);
}

.glas-fuell {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border: 1px solid var(--linie);
  /* Feine Holo-Zeilen, sehr schwach, damit die Schrift ruhig bleibt */
  background:
    repeating-linear-gradient(180deg, rgb(var(--akzent-rgb) / 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--fuell-oben), var(--fuell-unten));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow:
    inset 0 0 22px rgb(var(--akzent-rgb) / 0.09),
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 18px rgb(var(--akzent-rgb) / 0.12);
}

.glas-inhalt {
  position: relative;
  z-index: 1;
  text-shadow:
    0 1px 2px rgb(6 7 22 / 0.95),
    0 0 6px rgb(6 7 22 / 0.85),
    0 0 16px rgb(6 7 22 / 0.7);
}

/* Verlaufsschrift und Eingaben ohne Schattenhof, er läge sonst in der Schrift */
.glas-inhalt :is(.countdown-zahl, input, button) {
  text-shadow: none;
}

.glas-kanten {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Größe der Fläche als Maß: 50cqh ist die halbe Höhe, von dort gehen die Kanten auf */
  container-type: size;
}

.glas-kante-oben,
.glas-kante-unten {
  position: absolute;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e9fbff 12%, #fff 50%, #e9fbff 88%, transparent);
  box-shadow:
    0 0 12px 2px rgb(var(--akzent-rgb) / 0.9),
    0 0 36px 6px rgb(var(--akzent-rgb) / 0.35);
  opacity: 0;
}

.glas-kante-oben {
  top: -1px;
}

.glas-kante-unten {
  bottom: -1px;
}

/* Lichtschimmer: Lage kommt als --mx / --my vom Zeiger (glas.js) */
.glas-glanz {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease-out;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgb(var(--akzent-rgb) / 0.11),
    transparent 65%
  );
}

.glas-glanz::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: radial-gradient(
    200px circle at var(--mx, 50%) var(--my, 50%),
    rgb(255 255 255 / 0.95),
    rgb(var(--akzent-rgb) / 0.6) 30%,
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.neigung [data-glas]:hover > .glas-glanz {
  opacity: 1;
}

/* Auffalten: nur mit Skript und ohne reduzierte Bewegung (glas.js setzt html.bewegt).
   Ohne Skript stehen alle Flächen sofort offen da. */
.bewegt [data-glas]:not(.offen) > :is(.glas-fuell, .glas-inhalt),
.bewegt [data-glas]:not(.offen)::before,
.bewegt [data-glas]:not(.offen)::after {
  opacity: 0;
}

/* Die Eckmarken erscheinen mit dem Inhalt */
.bewegt [data-glas].offen::before {
  animation: flackern 1.2s linear var(--verzug, 0ms) backwards;
}

.bewegt [data-glas].offen::after {
  animation: nurEin 700ms ease-out var(--verzug, 0ms) backwards;
}

.bewegt [data-glas].offen > .glas-fuell {
  animation: fuellAuf 1.1s linear var(--verzug, 0ms) backwards;
}

.bewegt [data-glas].offen .glas-kante-oben {
  animation: kanteOben 1.1s linear var(--verzug, 0ms) backwards;
}

.bewegt [data-glas].offen .glas-kante-unten {
  animation: kanteUnten 1.1s linear var(--verzug, 0ms) backwards;
}

.bewegt [data-glas].offen > .glas-inhalt {
  animation: flackern 1.2s linear var(--verzug, 0ms) backwards;
}

@keyframes nurEin {
  from {
    opacity: 0;
  }
}

@keyframes fuellAuf {
  0%,
  25% {
    opacity: 0;
    transform: scaleY(0.004);
    animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  }
  65%,
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes kanteOben {
  0% {
    opacity: 1;
    transform: translateY(50cqh) scaleX(0);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  25% {
    opacity: 1;
    transform: translateY(50cqh) scaleX(1);
    animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  }
  62% {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }
  92%,
  100% {
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
}

@keyframes kanteUnten {
  0% {
    opacity: 1;
    transform: translateY(-50cqh) scaleX(0);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  25% {
    opacity: 1;
    transform: translateY(-50cqh) scaleX(1);
    animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  }
  62% {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }
  92%,
  100% {
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
}

/* Holo-Flackern des Inhalts, sobald die Fläche offen ist */
@keyframes flackern {
  0%,
  60% {
    opacity: 0;
  }
  67% {
    opacity: 0.7;
  }
  74% {
    opacity: 0.25;
  }
  81% {
    opacity: 0.9;
  }
  88% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/* ---------- Links und Knopf in der Sprache der Startseite ----------
   Die schwache Haarlinie bleibt immer stehen (Links erkennbar ohne Farbe), beim Überfahren
   oder mit der Tastatur zeichnet sich darüber eine helle, glühende Linie von der Mitte aus. */
.start .panel a,
footer a {
  position: relative;
  text-decoration: none;
}

.start .panel a::before,
.start .panel a::after,
footer a::before,
footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% - 0.85em);
  height: 1px;
  pointer-events: none;
}

.start .panel a::before,
footer a::before {
  background: rgb(133 239 255 / 0.55);
}

.start .panel a::after,
footer a::after {
  background: var(--cyan);
  box-shadow: 0 0 8px 1px rgb(115 226 252 / 0.7);
  transform: scaleX(0);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.start .panel a:is(:hover, :focus-visible)::after,
footer a:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}

.start .panel a:is(:hover, :focus-visible),
footer a:is(:hover, :focus-visible) {
  color: #fff;
}

/* Lichtstreif über den Knopf, wie am Ticketknopf der Startseite. Bewegt wird nur die Lage
   des Streifs (--glanz). */
@property --glanz {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -40%;
}

.feld-reihe button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent calc(var(--glanz) - 22%),
    rgb(255 255 255 / 0.55) var(--glanz),
    transparent calc(var(--glanz) + 22%)
  );
  opacity: 0;
}

.feld-reihe button:is(:hover, :focus-visible)::before {
  opacity: 1;
  animation: glanzZug 750ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes glanzZug {
  from {
    --glanz: -40%;
  }
  to {
    --glanz: 140%;
  }
}

@media (min-width: 900px) {
  .start [data-glas] {
    --fuell-oben: rgb(14 14 36 / 0.52);
    --fuell-unten: rgb(22 22 50 / 0.38);
  }
}

/* ---------- Breite Bildschirme ---------- */

@media (min-width: 640px) {
  main {
    padding: 1.5rem 1.5rem 3.5rem;
  }

  .panel {
    padding: 1.5rem 1.75rem;
  }

  .konsole {
    padding: 2rem 1.75rem 1.75rem;
  }

  .konsole-kopf .logo {
    width: 88px;
  }

  .blatt {
    padding: 2rem 2.25rem 2.25rem;
  }

  .fuss {
    padding: 0.75rem 1.5rem 1rem;
  }

  .fuss span {
    flex-basis: auto;
    padding-top: 0;
  }
}

@media (min-width: 1024px) {
  main.start {
    display: grid;
    grid-template-columns: minmax(0, 38rem) 1fr;
    gap: 3rem;
    align-items: start;
    padding: 2rem 2rem 4rem;
  }

  .konsole-kopf .logo {
    width: 104px;
  }

  .inhalt {
    gap: 1.25rem;
  }

  /* Das Teleskop steht rechts im ersten Bild und bleibt beim Scrollen an seinem Platz */
  .exponat-rahmen {
    position: sticky;
    top: 10vh;
    width: 100%;
    max-width: 440px;
    margin: 8rem 0 0 auto;
  }

  .nacht-bild,
  .nacht-video {
    object-position: 62% 50%;
  }

  /* Links dunkler, damit die Flächen tragen; rechts bleibt der Himmel offen */
  .nacht::after {
    background:
      linear-gradient(to right, rgb(8 10 28 / 0.78) 0%, rgb(8 10 28 / 0.5) 40%, rgb(8 10 28 / 0.05) 72%),
      radial-gradient(120% 90% at 60% 45%, transparent 55%, rgb(8 10 28 / 0.6) 100%);
  }

  .fuss {
    padding: 0.5rem 2rem 0.75rem;
  }
}

/* Das Teleskop ist erst dunkel und geht dann an, mit kurzem Flackern wie beim
   Einschalten. Nur Deckkraft, keine Bewegung. */
@keyframes einschalten {
  0% { opacity: 0.12; }
  18% { opacity: 0.85; }
  24% { opacity: 0.3; }
  34% { opacity: 1; }
  42% { opacity: 0.65; }
  100% { opacity: 1; }
}

@keyframes aufleuchten {
  from { opacity: 0; }
  to { opacity: 0.55; }
}

@keyframes atmen {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  #sterne {
    display: none;
  }

  .exponat,
  .exponat-rahmen::before {
    animation: none;
  }

  .feld-reihe button,
  .feld-reihe button::after,
  .glas-glanz,
  .start .panel a::after,
  footer a::after,
  .nacht-video {
    transition: none;
  }

  .feld-reihe button::before {
    display: none;
  }
}


/* ---------- Fassung mit Saisonmotto (erzeugt von uebergang/motto-bauen.mjs) ---------- */

/* Hintergrund-Video ohne Effekte (Alexander 30.09.2026): kein Mitlaufen, kein Zoom, keine Einfärbung.
   sterne.js setzt die Verschiebung als Inline-Stil, deshalb !important. */
.nacht {
  inset: 0;
  transform: none !important;
}

.nacht-ton {
  display: none;
}

.nacht::before {
  display: none;
}

/* Ab 1024 px setzt motto.js Lage und Breite; links läuft das Bild weich ins Dunkel aus,
   falls vor dem Bild eine Lücke bleibt */
@media (min-width: 1024px) {
  .nacht-bild,
  .nacht-video {
    right: auto;
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
    mask-image: linear-gradient(to right, transparent 0, #000 14%);
  }
}

/* Handy: Logo über dem Schriftzug, beide linksbündig */
.motto-kopf {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.motto {
  width: 100%;
  min-width: 0;
}

.konsole .motto-titel {
  margin: 0;
  font-size: 1rem;
  line-height: 0;
}

.motto-titel img {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  filter: drop-shadow(0 0 18px rgb(251 189 0 / 0.16));
}

.motto-unterzeile {
  margin: 0.75rem 0 0;
  font-family: var(--breit);
  font-size: clamp(0.75rem, 3.3vw, 0.95rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* Ab Tablet: Logo links, rechts daneben Schriftzug und Unterzeile als ein Block */
@media (min-width: 640px) {
  .motto-kopf {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }

  .motto {
    flex: 1 1 0;
  }
}

@media (min-width: 1024px) {
  .motto-kopf {
    gap: 1.5rem;
  }
}