/*
 * HLS-OS-Homepage — Komponenten.
 *
 * Alle Werte kommen aus tokens.css (erzeugt aus tokens/design-tokens.json).
 * Hier steht kein Hex-Wert und keine freie Größe; Ausnahmen sind die
 * Umbruchpunkte (CSS-Variablen greifen in Media Queries nicht) sowie
 * Prozentangaben und Winkel in Verläufen und Animationen.
 *
 * Gestaltung: Nachtblau, Licht auf dunklem Glas. Der Server steht als
 * Monitor in einem dunklen Raum, schräg fällt Licht herein. Schrift dünn
 * und groß, Beschriftungen klein in Versalien einer Monospace. Eisblau ist
 * der einzige Akzent; ein Hauch Bordeaux wärmt das Licht.
 */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ── Grundlage ─────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--primitive-font-leading-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: var(--fokus-breite) solid var(--fokus-ring);
  outline-offset: var(--fokus-breite);
}

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pille);
  background: var(--knopf-hell-bg);
  color: var(--knopf-hell-fg);
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.kennung {
  font-family: var(--font-mono);
  font-size: var(--text-marke);
  letter-spacing: var(--primitive-font-tracking-versal);
  text-transform: uppercase;
  color: var(--color-fg-leise);
}

.rahmenbreite {
  width: 100%;
  max-width: calc(var(--layout-inhalt) + 2 * var(--space-rand));
  margin-inline: auto;
  padding-inline: var(--space-rand);
}

.titel {
  margin-block: var(--space-sm) var(--space-md);
  font-size: var(--text-titel);
  font-weight: var(--primitive-font-weight-thin);
  line-height: var(--primitive-font-leading-eng);
  letter-spacing: var(--primitive-font-tracking-eng);
}

/* ── Pillen und Knöpfe ─────────────────────────────────────────────────── */

.pille {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--pille-hoehe);
  padding-inline: var(--space-pille-x);
  border: var(--line-haar) solid var(--pille-kante);
  border-radius: var(--radius-pille);
  background: var(--pille-bg);
  color: var(--color-fg);
  font: inherit;
  font-size: var(--text-klein);
  cursor: pointer;
  transition: border-color var(--motion-schnell), background var(--motion-schnell);
}
.pille:hover {
  border-color: var(--color-glas-kante-hell);
  background: var(--color-glas-hoch);
}
.pille--rund {
  width: var(--pille-hoehe);
  padding: 0;
  justify-content: center;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--pille-hoehe);
  padding: var(--space-knopf-y) var(--space-knopf-x);
  border: var(--line-haar) solid transparent;
  border-radius: var(--radius-pille);
  font-size: var(--text-klein);
  font-weight: var(--primitive-font-weight-medium);
  transition: background var(--motion-schnell), border-color var(--motion-schnell),
    box-shadow var(--motion-schnell);
}
.knopf--hell {
  background: var(--knopf-hell-bg);
  color: var(--knopf-hell-fg);
  box-shadow: var(--elevation-knopf);
}
.knopf--hell:hover {
  background: var(--color-weiss);
}
.knopf--glas {
  border-color: var(--knopf-glas-kante);
  background: var(--knopf-glas-bg);
  color: var(--color-fg);
}
.knopf--glas:hover {
  border-color: var(--color-glas-kante-hell);
  background: var(--color-glas-hoch);
}
.knopf--voll {
  width: 100%;
}

/* ── Kopf ──────────────────────────────────────────────────────────────── */

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-rand);
  pointer-events: none;
}
.kopf > * {
  pointer-events: auto;
}

.kopf__links {
  display: flex;
  gap: var(--space-sm);
}

.kopf__marke {
  font-weight: var(--primitive-font-weight-medium);
}
.kopf__marke img {
  display: block;
}

.kopf__striche {
  display: grid;
  gap: var(--space-xs);
  width: var(--space-md);
}
.kopf__striche span {
  display: block;
  height: var(--line-haar);
  background: var(--color-fg);
  transition: transform var(--motion-schnell);
}
.kopf[data-menue-offen] .kopf__striche span:first-child {
  transform: translateY(calc(var(--space-xs) / 2 + var(--line-haar) / 2)) rotate(45deg);
}
.kopf[data-menue-offen] .kopf__striche span:last-child {
  transform: translateY(calc(var(--space-xs) / -2 - var(--line-haar) / 2)) rotate(-45deg);
}

.menue {
  display: none;
  position: absolute;
  top: calc(100% - var(--space-xs));
  left: var(--space-rand);
  min-width: var(--layout-spalte);
  padding: var(--space-md);
  border: var(--line-haar) solid var(--color-glas-kante);
  border-radius: var(--radius-karte);
  background: var(--color-flaeche);
  box-shadow: var(--elevation-glas);
}
.kopf[data-menue-offen] .menue {
  display: block;
}
.menue__liste a {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-sm);
  border-radius: var(--radius-fenster);
  font-size: var(--text-lead);
  font-weight: var(--primitive-font-weight-thin);
}
.menue__liste a:hover {
  background: var(--color-glas);
}
.menue__liste span {
  font-family: var(--font-mono);
  font-size: var(--text-marke);
  color: var(--color-fg-still);
  padding-top: var(--space-xs);
}
.menue__fuss {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
  padding: var(--space-md) var(--space-sm) var(--space-xs);
  border-top: var(--line-haar) solid var(--color-linie);
  font-size: var(--text-klein);
  color: var(--color-fg-leise);
}
.menue__fuss a:hover {
  color: var(--color-fg);
}

/* Beschriftung in den unteren Ecken */
.ecken {
  display: none;
}
@media (min-width: 900px) {
  .ecken {
    position: fixed;
    inset: auto var(--space-rand-weit) var(--space-lg);
    z-index: 40;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--text-marke-klein);
    letter-spacing: var(--primitive-font-tracking-versal);
    text-transform: uppercase;
    color: var(--color-fg-still);
    pointer-events: none;
  }
}

/* ── Einstieg ──────────────────────────────────────────────────────────── */

.einstieg {
  position: relative;
  overflow: clip;
  padding-top: var(--layout-kopf);
  background:
    radial-gradient(ellipse 70% 45% at 50% 30%, var(--color-licht-tief), transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 75%, var(--color-licht-warm), transparent 70%),
    var(--color-bg-tief);
}

.einstieg__raum {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Schräg einfallendes Licht, wie durch ein hohes Fenster */
.einstieg__strahl {
  position: absolute;
  inset: -20% -10% 20% 20%;
  /* Weich durch den Verlauf selbst, ohne Weichzeichner: Ein bewegter
     Weichzeichner auf dieser Fläche kostete in jedem Bild Rechenzeit */
  background: linear-gradient(
    115deg,
    transparent 32%,
    var(--color-schimmer) 42%,
    var(--color-glas) 50%,
    var(--color-schimmer) 58%,
    transparent 68%
  );
}

/* Das große Wort hinter dem Monitor, in 3D: Vorderseite in Silber, dahinter
   Ebenen, die nach hinten dunkler werden. Mit der Maus verschiebt sich die
   Staffelung, das wirkt wie eine Drehung. */
.einstieg__riese {
  position: absolute;
  top: calc(var(--layout-kopf) + var(--space-xl));
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-riese);
  font-weight: var(--primitive-font-weight-semibold);
  line-height: var(--primitive-font-leading-riese);
  letter-spacing: var(--primitive-font-tracking-riese);
  white-space: nowrap;
  /* Die Maske gilt nur innerhalb der Box; das letzte S ragt über die
     Zeichenbox hinaus und wurde ohne diesen Rand abgeschnitten. */
  padding-inline: 0.2em;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, black 20%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 88%);
}
/* Die Tiefe ist flach gestaffelt, nicht in echtem 3D: Mit preserve-3d wurde
   jede Ebene eine eigene große Grafikebene, die bei jedem Bild des
   Sternenfelds mit zusammengesetzt werden musste. --dx und --dy (vom Skript,
   je Ebene) geben die Richtung der Staffelung; die Maus dreht sie. */
.riese__koerper {
  position: relative;
  display: block;
  --dx: 0em;
  --dy: var(--primitive-size-riese-schritt);
}
.riese__ebene {
  display: block;
}
.riese__ebene:not(.riese__ebene--vorn) {
  position: absolute;
  inset: 0;
  color: color-mix(
    in oklab,
    var(--color-silber-kante-1),
    var(--color-bg-tief) calc(var(--e) / var(--ebenen) * 100%)
  );
  translate: calc(var(--e) * var(--dx)) calc(var(--e) * var(--dy));
}
.riese__ebene--hinten {
  text-shadow: 0 0 var(--blur-licht) var(--color-licht);
}
.riese__ebene--vorn {
  position: relative;
}

/* Sternenfeld des Einstiegs (Canvas, gezeichnet vom Skript) */
.einstieg__feld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.einstieg__inhalt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl) var(--space-rand) var(--space-abschnitt);
  text-align: center;
}

.einstieg__frage {
  margin-bottom: var(--space-xl);
}

.monitor {
  width: 100%;
  max-width: var(--layout-monitor);
  transform-origin: 50% 100%;
}
.monitor__schirm {
  padding: var(--monitor-rahmen);
  border-radius: var(--radius-monitor);
  background: linear-gradient(to bottom, var(--monitor-rahmen-bg), var(--color-flaeche));
  box-shadow: var(--elevation-monitor);
}
.monitor__schirm img,
.monitor__schirm .fehlt {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-fenster);
}
.monitor__hals {
  display: block;
  width: 12%;
  height: var(--monitor-hals);
  margin-inline: auto;
  background: linear-gradient(to bottom, var(--color-flaeche), var(--color-indigo));
}
.monitor__fuss {
  display: block;
  width: 28%;
  height: var(--space-sm);
  margin-inline: auto;
  border-radius: var(--radius-fenster) var(--radius-fenster) 0 0;
  background: linear-gradient(to bottom, var(--color-indigo), var(--color-flaeche-hoch));
}

/* Die Tischkante, auf der der Monitor steht */
.einstieg__tisch {
  display: block;
  width: 100vw;
  height: var(--line-haar);
  background: linear-gradient(90deg, transparent, var(--color-glas-kante-hell), transparent);
  box-shadow: 0 0 var(--blur-licht) var(--space-sm) var(--color-licht);
}

.einstieg__titel {
  margin-top: var(--space-2xl);
  font-size: var(--text-schicht);
  font-weight: var(--primitive-font-weight-thin);
  line-height: var(--primitive-font-leading-eng);
  letter-spacing: var(--primitive-font-tracking-eng);
}
.einstieg__titel span {
  color: var(--color-fg-leise);
}

.einstieg__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

/* ── Aussage ───────────────────────────────────────────────────────────── */

.aussage {
  position: relative;
  overflow: clip;
  padding: var(--space-abschnitt) var(--space-rand);
  text-align: center;
}
.aussage__licht {
  position: absolute;
  inset: 20% 10%;
  background: radial-gradient(ellipse at 50% 50%, var(--color-licht-tief), transparent 70%);
  filter: blur(var(--blur-licht));
}
.aussage .kennung,
.aussage__text {
  position: relative;
}
.aussage__text {
  max-width: var(--layout-aussage);
  margin: var(--space-lg) auto 0;
  font-size: var(--text-aussage);
  font-weight: var(--primitive-font-weight-thin);
  line-height: var(--primitive-font-leading-mittel);
  letter-spacing: var(--primitive-font-tracking-eng);
}
.aussage__nachsatz {
  display: block;
  margin-top: var(--space-md);
  color: var(--color-fg-leise);
}

/* ── Schichten ─────────────────────────────────────────────────────────── */

.schichten {
  position: relative;
  /* Die äußere Bahn um den Stapel ist auf dem Telefon breiter als der
     Bildschirm; „clip“ schneidet sie ab, ohne die Bühne am Kleben zu hindern */
  overflow-x: clip;
}

.schichten__buehne {
  display: grid;
  gap: var(--space-xl);
  max-width: calc(var(--layout-inhalt) + 2 * var(--space-rand));
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-rand);
}

.schichten__texte {
  display: grid;
  gap: var(--space-2xl);
}

.schicht__nr {
  font-family: var(--font-mono);
  font-size: var(--text-marke);
  letter-spacing: var(--primitive-font-tracking-versal);
  color: var(--color-fg-leise);
}
.schicht h3 {
  margin-block: var(--space-sm) var(--space-md);
  font-size: var(--text-schicht);
  font-weight: var(--primitive-font-weight-thin);
  line-height: var(--primitive-font-leading-eng);
  letter-spacing: var(--primitive-font-tracking-eng);
}
.schicht p {
  max-width: var(--layout-text);
  color: var(--color-fg-zweit);
}
.schicht p.schicht__hinweis {
  margin-top: var(--space-md);
  padding-left: var(--space-md);
  border-left: var(--line-haar) solid var(--color-offen);
  font-size: var(--text-klein);
  color: var(--color-fg-leise);
}

.schichten__marken {
  display: none;
}

/* Der Stapel gläserner Kacheln */
.stapel {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--layout-stapel);
  --kachel: var(--kachel-klein);
}
.stapel::before {
  content: '';
  position: absolute;
  inset: 10%;
  background:
    radial-gradient(circle at 50% 55%, var(--color-licht), transparent 60%),
    radial-gradient(circle at 60% 70%, var(--color-licht-warm), transparent 55%);
  filter: blur(var(--blur-licht));
}
.stapel__ring {
  position: absolute;
  width: calc(var(--kachel) * 2.2);
  aspect-ratio: 1;
  border: var(--line-haar) solid var(--color-linie-hell);
  border-radius: 50%;
  transform: rotateX(62deg);
}
.stapel__ring--weit {
  width: calc(var(--kachel) * 3.6);
  border-color: var(--color-linie);
}

.stapel__raum {
  position: relative;
  width: var(--kachel);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: translateY(calc(var(--kachel) * 0.35)) rotateX(58deg) rotateZ(-45deg);
}

.kachel {
  position: absolute;
  inset: 0;
  border: var(--line-haar) solid var(--color-glas-kante);
  border-radius: var(--radius-kachel);
  background: linear-gradient(135deg, var(--color-glas-hoch), var(--color-glas) 60%, var(--color-schimmer));
  box-shadow:
    inset 0 0 0 var(--line-haar) var(--color-schimmer),
    0 0 var(--space-xl) var(--color-schatten);
  transform: translateZ(calc(var(--i) * var(--kachel-abstand)));
  transition:
    opacity var(--motion-mittel) var(--motion-kurve),
    transform var(--motion-mittel) var(--motion-kurve),
    background var(--motion-mittel);
}
.kachel__zeichen {
  position: absolute;
  inset: 31%;
  fill: none;
  stroke: var(--color-akzent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--motion-mittel);
}
.kachel__name {
  position: absolute;
  right: 12%;
  bottom: 10%;
  font-family: var(--font-mono);
  font-size: var(--text-marke-klein);
  letter-spacing: var(--primitive-font-tracking-versal);
  text-transform: uppercase;
  color: var(--color-fg-leise);
}
.kachel[data-oben] {
  border-color: var(--color-glas-kante-hell);
  background: linear-gradient(135deg, var(--color-spiegel), var(--color-glas-hoch) 55%, var(--color-glas));
}
.kachel[data-oben] .kachel__zeichen {
  opacity: 1;
}
.kachel[data-oben] .kachel__name {
  color: var(--color-fg);
}
/* Ohne Skript ist die oberste Kachel die vierte */
html:not(.js) .kachel[data-nr='4'] {
  border-color: var(--color-glas-kante-hell);
}
html:not(.js) .kachel[data-nr='4'] .kachel__zeichen {
  opacity: 1;
}

/* Mit Skript: Die Bühne steht, während man scrollt, und der Stapel wächst */
.js .schichten {
  height: calc(4 * var(--layout-schicht-hoehe) + 100svh);
}
.js .schichten__buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  align-content: center;
  padding-block: var(--layout-kopf) var(--space-xl);
}
.js .schichten__texte {
  gap: 0;
}
.js .schicht {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-md));
  transition:
    opacity var(--motion-mittel) var(--motion-kurve),
    transform var(--motion-mittel) var(--motion-kurve),
    visibility var(--motion-mittel);
}
.js .schicht[data-aktiv] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.js .kachel:not([data-sichtbar]) {
  opacity: 0;
  transform: translateZ(calc(var(--i) * var(--kachel-abstand) + var(--space-2xl)));
}
.js .schichten__marken {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.js .schichten__marken span {
  display: block;
  height: var(--layout-schicht-hoehe);
}

@media (min-width: 900px) {
  .schichten__buehne {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .stapel {
    order: 2;
    --kachel: var(--kachel-groesse);
  }
}

/* ── Laufband ──────────────────────────────────────────────────────────── */

.laufband {
  padding-block: var(--space-2xl);
  border-block: var(--line-haar) solid var(--color-linie);
  text-align: center;
}
.laufband__spur {
  display: flex;
  margin-top: var(--space-lg);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.laufband__liste {
  display: flex;
  flex: none;
}
.laufband__liste li {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding-right: var(--space-xl);
  font-size: var(--text-karte);
  font-weight: var(--primitive-font-weight-thin);
  white-space: nowrap;
  color: var(--color-fg-leise);
}
.laufband__liste li::after {
  content: '';
  width: var(--liste-punkt);
  height: var(--liste-punkt);
  border-radius: 50%;
  background: var(--color-fg-still);
}

/* ── Rundgang ──────────────────────────────────────────────────────────── */

.rundgang {
  padding-block: var(--space-abschnitt);
}
.rundgang__lead {
  color: var(--color-fg-leise);
}

.rundgang__band {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: var(--line-haar) solid var(--color-linie);
}
.rundgang__band button {
  position: relative;
  flex: none;
  padding: var(--space-md) 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--text-marke);
  letter-spacing: var(--primitive-font-tracking-versal);
  text-transform: uppercase;
  color: var(--color-fg-still);
  cursor: pointer;
  transition: color var(--motion-schnell);
}
.rundgang__band button:hover {
  color: var(--color-fg-zweit);
}
.rundgang__band button[aria-selected='true'] {
  color: var(--color-fg);
}
.rundgang__band button::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--line-haar));
  height: var(--line-haar);
  width: 0;
  background: var(--color-akzent);
}
.rundgang__band button[aria-selected='true']::after {
  width: 100%;
}
.rundgang[data-laeuft] .rundgang__band button[aria-selected='true']::after {
  animation: fuellen var(--motion-ansicht) linear both;
}
@keyframes fuellen {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.fenster {
  margin-top: var(--space-lg);
  overflow: hidden;
  border: var(--line-haar) solid var(--color-linie-hell);
  border-radius: var(--radius-karte);
  background: var(--color-flaeche);
  box-shadow: var(--elevation-monitor);
}
.fenster__leiste {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--fenster-leiste);
  padding-inline: var(--space-md);
  border-bottom: var(--line-haar) solid var(--color-linie);
}
.fenster__leiste > span:not(.fenster__adresse) {
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: 50%;
  background: var(--color-linie-hell);
}
.fenster__adresse {
  margin-inline: auto;
  font-family: var(--font-mono);
  font-size: var(--text-marke-klein);
  color: var(--color-fg-still);
}

.ansicht img,
.ansicht .fehlt {
  display: block;
  width: 100%;
  height: auto;
}
.ansicht figcaption {
  padding: var(--space-md) var(--space-lg);
  border-top: var(--line-haar) solid var(--color-linie);
  font-size: var(--text-klein);
  color: var(--color-fg-leise);
}
html:not(.js) .ansicht + .ansicht {
  border-top: var(--line-haar) solid var(--color-linie-hell);
}

.js .fenster__ansichten {
  display: grid;
}
.js .ansicht {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-mittel) var(--motion-kurve), visibility var(--motion-mittel);
}
.js .ansicht[data-aktiv] {
  opacity: 1;
  visibility: visible;
}

/* ── Installieren ──────────────────────────────────────────────────────── */

.installieren {
  padding-block: var(--space-abschnitt);
}
.installieren__lead {
  color: var(--color-fg-leise);
}

.karten {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
@media (min-width: 768px) {
  .karten {
    grid-template-columns: repeat(3, 1fr);
  }
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--layout-spalte) * 1.5);
  padding: var(--space-lg);
  overflow: hidden;
  border: var(--line-haar) solid var(--color-linie);
  border-radius: var(--radius-karte);
  background: linear-gradient(to bottom, var(--color-glas), transparent);
}
.karte__nr {
  font-family: var(--font-mono);
  font-size: var(--text-marke);
  color: var(--color-fg-still);
}
.karte h3 {
  margin-top: auto;
  padding-top: var(--space-xl);
  font-size: var(--text-karte);
  font-weight: var(--primitive-font-weight-regular);
}
.karte p {
  margin-top: var(--space-sm);
  font-size: var(--text-klein);
  color: var(--color-fg-leise);
}

/* Der leuchtende Punkt auf der ersten Karte */
.karte__punkt {
  position: absolute;
  top: 18%;
  left: 50%;
  width: var(--karte-glut);
  aspect-ratio: 1;
  border: var(--line-haar) solid var(--color-glas-kante-hell);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-akzent-tief), var(--color-licht-tief) 45%, transparent 70%);
  box-shadow: 0 0 var(--blur-licht) var(--space-md) var(--color-licht);
  transform: translateX(-50%);
}
.karte__punkt::after {
  content: '';
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: var(--color-hell);
  filter: blur(var(--space-xs));
}

.installieren__weiter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-xl);
}
.installieren__notiz {
  font-size: var(--text-klein);
  color: var(--color-fg-still);
}

/* ── Grundsätze ────────────────────────────────────────────────────────── */

.grundsaetze {
  padding-block: var(--space-abschnitt);
}
.grundsaetze__raster {
  display: grid;
  gap: var(--space-2xl);
}
@media (min-width: 960px) {
  .grundsaetze__raster {
    grid-template-columns: 1fr var(--layout-angebot);
    align-items: start;
  }
}

.liste {
  margin-top: var(--space-xl);
}
.liste__gruppe {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: var(--line-haar) solid var(--color-linie);
}
@media (min-width: 640px) {
  .liste__gruppe {
    grid-template-columns: var(--layout-spalte) 1fr;
    gap: var(--space-lg);
  }
}
.liste dt {
  font-weight: var(--primitive-font-weight-medium);
}
.liste li {
  position: relative;
  padding-left: var(--space-lg);
  color: var(--color-fg-zweit);
}
.liste li + li {
  margin-top: var(--space-sm);
}
.liste li::before {
  content: '';
  position: absolute;
  left: var(--space-xs);
  top: 0.65em;
  width: var(--liste-punkt);
  height: var(--liste-punkt);
  border-radius: 50%;
  background: var(--color-fg-still);
}

.angebot {
  position: relative;
  overflow: hidden;
  padding: var(--space-xl) var(--space-lg);
  border: var(--line-haar) solid var(--color-glas-kante);
  border-radius: var(--radius-karte);
  background: linear-gradient(160deg, var(--color-glas-hoch), var(--color-glas) 45%, var(--color-flaeche));
  box-shadow: var(--elevation-glas);
  text-align: center;
}
@media (min-width: 960px) {
  .angebot {
    position: sticky;
    top: var(--layout-kopf);
  }
}
.angebot::before {
  content: '';
  position: absolute;
  inset: -30% 0 50%;
  background: radial-gradient(ellipse at 50% 50%, var(--color-licht), transparent 70%);
  filter: blur(var(--blur-licht));
  pointer-events: none;
}
.angebot > * {
  position: relative;
}
.angebot__kopf {
  font-size: var(--text-lead);
  font-weight: var(--primitive-font-weight-medium);
}
.angebot__preis {
  margin-top: var(--space-lg);
  font-size: var(--text-preis);
  font-weight: var(--primitive-font-weight-thin);
  line-height: var(--primitive-font-leading-eng);
  letter-spacing: var(--primitive-font-tracking-eng);
  color: var(--color-fg-zweit);
}
.angebot__unter {
  margin-top: var(--space-xs);
  font-size: var(--text-klein);
  color: var(--color-fg-still);
}
.angebot__punkte {
  display: grid;
  gap: var(--space-sm);
  margin-block: var(--space-xl);
  font-size: var(--text-klein);
  color: var(--color-fg-leise);
}
.angebot__hinweis {
  margin-top: var(--space-md);
  font-size: var(--text-klein);
  color: var(--color-fg-still);
}

/* ── Schluss ───────────────────────────────────────────────────────────── */

.schluss {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-abschnitt-gross) var(--space-rand) var(--space-abschnitt);
  text-align: center;
}
.schluss__zeichen {
  width: min(100%, var(--layout-aussage));
  margin-bottom: var(--space-xl);
}
/* Silbernes Logo aus Gemini, flach, freigestellt (transparenter Grund):
   ohne Maske, ohne Überblendung, ohne Lichtschein dahinter */
.schluss__logo {
  display: block;
  width: 100%;
  height: auto;
}
.js .schluss__logo {
  opacity: 0;
  scale: 0.96;
  transition:
    opacity calc(var(--motion-auftauchen) * 2) var(--motion-kurve),
    scale calc(var(--motion-auftauchen) * 2) var(--motion-kurve);
}
.js .schluss__zeichen[data-da] .schluss__logo {
  opacity: 1;
  scale: 1;
}
.schluss__titel {
  font-size: var(--text-schicht);
  font-weight: var(--primitive-font-weight-thin);
  line-height: var(--primitive-font-leading-eng);
  letter-spacing: var(--primitive-font-tracking-eng);
}
.schluss__text {
  margin-block: var(--space-md) var(--space-xl);
  color: var(--color-fg-leise);
}

/* ── Fuß ───────────────────────────────────────────────────────────────── */

.fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-rand);
  border-top: var(--line-haar) solid var(--color-linie);
  font-size: var(--text-klein);
  color: var(--color-fg-still);
}
/* Unter dem Fuß Platz für die festen Eckbeschriftungen, die es ab 900 px gibt */
@media (min-width: 900px) {
  .fuss {
    padding-bottom: calc(var(--space-lg) + var(--space-2xl));
  }
}
.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}
.fuss__links a:hover {
  color: var(--color-fg);
}

/* ── Fehlende Aufnahme ─────────────────────────────────────────────────── */

.fehlt {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--color-flaeche-hoch);
  font-family: var(--font-mono);
  font-size: var(--text-marke);
  letter-spacing: var(--primitive-font-tracking-versal);
  text-transform: uppercase;
  color: var(--color-fg-still);
}

/* ── Breitere Bildschirme ──────────────────────────────────────────────── */

@media (min-width: 768px) {
  :root {
    --space-rand: var(--space-rand-weit);
  }
}

/* ── Bewegung, nur wenn erwünscht ──────────────────────────────────────── */

@media all {
  .laufband__liste {
    animation: laufen var(--motion-laufband) linear infinite;
  }

  /* Der Monitor richtet sich auf, das große Wort weicht nach oben */
  @supports (animation-timeline: scroll()) {
    .monitor {
      animation: aufrichten linear both;
      animation-timeline: scroll(root);
      animation-range: 0 60vh;
    }
    .einstieg__riese {
      animation: weichen linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80vh;
    }
  }
}

@keyframes laufen {
  to {
    transform: translateX(-100%);
  }
}

/* Zweidimensional: Eine 3D-Neigung hielte den Monitor in jedem Bild als
   perspektivische Ebene, auch wenn er stillsteht */
@keyframes aufrichten {
  from {
    transform: translateY(calc(var(--layout-versatz) * 1.5)) scale(0.9);
  }
  to {
    transform: none;
  }
}

@keyframes weichen {
  to {
    opacity: 0;
    transform: translate(-50%, -30%);
  }
}


/* ── Silber ────────────────────────────────────────────────────────────────
 *
 * Gebürstetes Metall: Jede Zeile bekommt ihren eigenen Verlauf (1lh), mit
 * einer dunklen Kante in der Mitte wie bei poliertem Chrom. Darunter vier
 * gestaffelte Schatten zu je einem Pixel als Prägekante und ein weicher
 * Schlagschatten. Darüber zieht in Abständen ein Glanzlicht.
 */

@property --glanz {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -30%;
}

.silber {
  color: var(--color-silber-2);
  font-weight: var(--primitive-font-weight-semibold);
  /* Flaches Silber ohne Prägekante (Wunsch des Eigentümers, 2026-10-31).
     --praegung bleibt ungesetzt: „filter: var(--praegung)“ ist dann keiner,
     und der Textaufbau nimmt nur seine Unschärfe. Für eine Prägekante hier
     eine Liste aus drop-shadow() setzen. */
}

/* Ist der Text in Wörter zerlegt, trägt jedes Wort das Metall selbst */
.silber:not([data-geteilt]),
.silber[data-geteilt] :is(.wort, .zeichen) {
  background:
    linear-gradient(
        105deg,
        transparent calc(var(--glanz) - 10%),
        var(--color-silber-glanz) var(--glanz),
        transparent calc(var(--glanz) + 10%)
      )
      0 0 / 100% 100% no-repeat,
    linear-gradient(
        180deg,
        var(--color-silber-hell) 0%,
        var(--color-silber-1) 26%,
        var(--color-silber-3) 46%,
        var(--color-silber-kante-1) 51%,
        var(--color-silber-4) 56%,
        var(--color-silber-2) 76%,
        var(--color-silber-hell) 100%
      )
      0 0 / 100% 1lh repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: var(--praegung);
}

/* Das Metall wird nur innerhalb der Box gemalt. Enger Buchstabenabstand und
   enge Zeilenhöhe machen die Box kleiner als die Glyphe — ohne diesen
   Ausgleich fehlte rechts ein Streifen (am letzten S von „HLS-OS“ sichtbar)
   und oben und unten der Rand. Innenabstand vergrößert die Fläche, der
   negative Außenabstand hält den Satz, wo er war. */
.silber[data-geteilt] :is(.wort, .zeichen) {
  padding: 0.12em 0.14em;
  margin: -0.12em -0.14em;
}

/* Zweite Zeile im Einstieg: matter, weiter hinten */
.silber .silber--matt:not([data-geteilt]),
.silber--matt[data-geteilt] :is(.wort, .zeichen) {
  background:
    linear-gradient(
        105deg,
        transparent calc(var(--glanz) - 10%),
        var(--color-silber-1) var(--glanz),
        transparent calc(var(--glanz) + 10%)
      )
      0 0 / 100% 100% no-repeat,
    linear-gradient(
        180deg,
        var(--color-silber-3) 0%,
        var(--color-silber-4) 45%,
        var(--color-silber-kante-1) 55%,
        var(--color-silber-4) 100%
      )
      0 0 / 100% 1lh repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Fließtext in Silber: ohne Prägekante, damit er lesbar bleibt */
.silber--flach {
  font-weight: inherit;
}
.aussage__text.silber--flach {
  font-weight: var(--primitive-font-weight-thin);
}
.aussage__nachsatz,
.aussage__nachsatz .wort {
  -webkit-text-fill-color: var(--color-fg-leise);
}

/* ── Einblenden beim Scrollen ──────────────────────────────────────────── */

.js [data-zeigen] {
  opacity: 0;
  translate: 0 var(--layout-versatz);
  transition:
    opacity var(--motion-auftauchen) var(--motion-kurve),
    translate var(--motion-auftauchen) var(--motion-kurve);
  transition-delay: calc(var(--n, 0) * var(--motion-schnell) * 0.6);
}
.js [data-zeigen][data-da] {
  opacity: 1;
  translate: none;
}

/* ── Kippen zum Zeiger ─────────────────────────────────────────────────── */

[data-kippen] {
  --rx: 0deg;
  --ry: 0deg;
  --px: 50%;
  --py: 50%;
  transform: perspective(var(--layout-perspektive)) rotateX(var(--rx)) rotateY(var(--ry));
}
[data-kippen]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--px) var(--py), var(--color-glas-hoch), transparent 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-mittel);
}
[data-kippen][data-zeiger]::after {
  opacity: 1;
}
[data-kippen]:not([data-zeiger]) {
  transition:
    transform var(--motion-mittel) var(--motion-kurve),
    opacity var(--motion-auftauchen) var(--motion-kurve),
    translate var(--motion-auftauchen) var(--motion-kurve);
}

/* ── Einstieg: Staub im Lichtstrahl, Schein am Zeiger, Spiegelung ─────── */

.einstieg__staub i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--layout-staub);
  height: var(--layout-staub);
  border-radius: 50%;
  background: var(--color-silber-1);
  box-shadow: 0 0 var(--space-sm) var(--color-akzent);
  opacity: 0;
}

/* Lichtschein am Zeiger: eine eigene Ebene, die das Skript nur verschiebt —
   neu gemalt wird dabei nichts */
.einstieg__schein {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--layout-spalte) * 5);
  aspect-ratio: 1;
  margin: calc(var(--layout-spalte) * -2.5) 0 0 calc(var(--layout-spalte) * -2.5);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-licht), transparent 65%);
  opacity: 0;
  transition: opacity var(--motion-mittel);
  pointer-events: none;
  will-change: transform;
}
.einstieg__schein.ist-an {
  opacity: 0.8;
}

.monitor__schirm {
  position: relative;
  will-change: transform;
}
.einstieg__riese,
.einstieg__strahl,
.einstieg__staub,
.einstieg__feld {
  will-change: transform, translate;
}
/* Spiegelung: ein schmales Lichtband, das per Transformation über den
   Bildschirm wandert — das erledigt die Grafikkarte, ohne neu zu malen. Ein
   wandernder Hintergrund mit Überblendung kostete jedes Bild die ganze Fläche. */
.monitor__schirm {
  overflow: hidden;
}
.monitor__schirm::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    var(--color-glas-hoch) 44%,
    var(--color-spiegel) 50%,
    var(--color-glas-hoch) 56%,
    transparent 80%
  );
  transform: translateX(-110%);
  pointer-events: none;
}

/* ── Stapel: gestrichelte Bahnen mit Lichtpunkt ────────────────────────── */

.stapel__ring {
  border-style: dashed;
}
.stapel__ring::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-xs));
  left: 50%;
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: 50%;
  background: var(--color-silber-hell);
  box-shadow: 0 0 var(--space-md) var(--space-xs) var(--color-akzent);
}
.stapel__ring--weit::after {
  top: auto;
  bottom: calc(-1 * var(--space-xs));
  background: var(--color-akzent);
}
.kachel[data-oben] {
  box-shadow:
    inset 0 0 0 var(--line-haar) var(--color-schimmer),
    0 0 var(--space-xl) var(--color-licht),
    0 0 var(--space-xl) var(--color-schatten);
}

/* ── Angebot: Licht läuft an der Kante um ──────────────────────────────── */

@property --winkel {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.angebot::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: var(--line-haar);
  border-radius: inherit;
  background: conic-gradient(
    from var(--winkel),
    transparent 0% 62%,
    var(--color-akzent-tief) 76%,
    var(--color-silber-hell) 84%,
    transparent 92%
  );
  -webkit-mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(black 0 0) content-box exclude,
    linear-gradient(black 0 0);
  pointer-events: none;
  opacity: 1;
}


.fenster__ansichten {
  overflow: hidden;
}

/* ── Bewegung, nur wenn erwünscht ──────────────────────────────────────── */

@media all {
  /* Der Glanz läuft einmal als Welle über die Wörter, sobald sie stehen —
     jedes Wort ein Stück später. Endlos über alle Wörter hieße, jedes Bild
     sämtliche Schatten neu zu malen. */
  .silber:not([data-geteilt]),
  .silber[data-geteilt] :is(.wort, .zeichen) {
    animation: glaenzen var(--motion-glanz) var(--motion-kurve) 1 both;
    animation-delay: calc(var(--start, 0s) + var(--w, 0) * var(--motion-wort) * 1.5 + var(--motion-aufbau));
  }

  .einstieg__strahl {
    animation: strahl calc(var(--motion-funkeln) * 2.5) ease-in-out infinite alternate;
  }
  .einstieg__staub i {
    animation: staub calc(var(--motion-schweben) * 2) linear infinite;
    animation-delay: var(--v);
  }
  .monitor__schirm::after {
    animation: spiegeln calc(var(--motion-glanz) * 1.4) var(--motion-kurve) infinite;
    animation-delay: calc(var(--motion-glanz) * 0.3);
  }

  .stapel__raum {
    animation: schweben var(--motion-schweben) ease-in-out infinite alternate;
  }
  .stapel__ring {
    animation: kreisen var(--motion-kreisen) linear infinite;
  }
  .stapel__ring--weit {
    animation-direction: reverse;
    animation-duration: calc(var(--motion-kreisen) * 1.5);
  }
  .stapel::before {
    animation: pulsieren calc(var(--motion-pulsieren) * 1.5) ease-in-out infinite alternate;
  }

  .karte__punkt {
    animation: glut var(--motion-pulsieren) ease-in-out infinite alternate;
  }
  .angebot::after {
    animation: umlauf var(--motion-umlauf) linear infinite;
  }
  .schluss__zeichen img {
    animation: schweben-gerade var(--motion-schweben) ease-in-out infinite alternate;
  }
  .ecken__pfeil {
    display: inline-block;
    animation: wippen calc(var(--motion-pulsieren) * 0.6) ease-in-out infinite alternate;
  }

  /* Die Aufnahme fährt langsam heran, solange sie zu sehen ist */
  .js .ansicht[data-aktiv] img {
    animation: heranfahren var(--motion-ansicht) linear both;
  }

  /* Das Fenster des Rundgangs richtet sich beim Hereinscrollen auf */
  @supports (animation-timeline: view()) {
    .fenster {
      animation: fenster-auf linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }

  .laufband__spur:hover .laufband__liste {
    animation-play-state: paused;
  }
}

@keyframes glaenzen {
  0% {
    --glanz: -30%;
  }
  45%,
  100% {
    --glanz: 130%;
  }
}
@keyframes strahl {
  from {
    opacity: 0.6;
    transform: translateX(-4%);
  }
  to {
    opacity: 1;
    transform: translateX(4%);
  }
}
@keyframes staub {
  0% {
    opacity: 0;
    translate: 0 0;
  }
  20% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    translate: var(--layout-versatz) calc(-4 * var(--layout-versatz));
  }
}
@keyframes spiegeln {
  0% {
    transform: translateX(-110%);
  }
  40%,
  100% {
    transform: translateX(260%);
  }
}
@keyframes schweben {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 calc(-0.4 * var(--layout-versatz));
  }
}
@keyframes schweben-gerade {
  from {
    translate: 0 calc(0.15 * var(--layout-versatz));
  }
  to {
    translate: 0 calc(-0.15 * var(--layout-versatz));
  }
}
@keyframes kreisen {
  from {
    transform: rotateX(62deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(62deg) rotateZ(360deg);
  }
}
@keyframes pulsieren {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
/* Nur Größe und Deckkraft: ein animierter Schatten müsste jedes Bild neu
   gemalt werden */
@keyframes glut {
  from {
    scale: 0.92;
    opacity: 0.8;
  }
  to {
    scale: 1.06;
    opacity: 1;
  }
}
@keyframes umlauf {
  to {
    --winkel: 360deg;
  }
}
@keyframes wippen {
  to {
    translate: 0 var(--space-xs);
  }
}
@keyframes heranfahren {
  from {
    scale: 1.035;
  }
  to {
    scale: 1;
  }
}
@keyframes fenster-auf {
  from {
    opacity: 0.4;
    transform: perspective(var(--layout-perspektive)) rotateX(12deg) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* ── Texte bauen sich auf ──────────────────────────────────────────────────
 *
 * Das Skript zerlegt Texte in .wort oder .zeichen und setzt --w (Stelle im
 * Text). --start am Element verschiebt den Beginn, etwa im Einstieg, wo
 * alles nacheinander kommt. Ohne Skript gibt es keine Spannen, und der Text
 * steht einfach da.
 */

.wort,
.zeichen {
  display: inline-block;
}

.js :is([data-aufbau], [data-riese]) :is(.wort, .zeichen) {
  opacity: 0;
  translate: 0 0.25em;
  filter: blur(var(--layout-unschaerfe)) var(--praegung, );
  transition:
    opacity var(--motion-aufbau) var(--motion-kurve),
    translate var(--motion-aufbau) var(--motion-kurve),
    filter var(--motion-aufbau) var(--motion-kurve);
  transition-delay: calc(var(--start, 0s) + var(--w) * var(--motion-wort));
}
.js :is([data-aufbau], [data-riese]) .zeichen {
  transition-delay: calc(var(--start, 0s) + var(--w) * var(--motion-wort) * 1.6);
}
.js :is([data-aufbau][data-da], [data-riese][data-da], .schicht[data-aktiv] [data-aufbau]) :is(.wort, .zeichen) {
  opacity: 1;
  translate: none;
  filter: blur(0) var(--praegung, );
}

/* Die Buchstaben des großen Schriftzugs steigen höher und kippen dabei */
.js [data-riese] .zeichen {
  translate: 0 0.2em;
  rotate: x 30deg;
  transition-property: opacity, translate, filter, rotate;
  transition-duration: calc(var(--motion-aufbau) * 1.4);
}
.js [data-riese][data-da] .zeichen {
  rotate: x 0deg;
}

/* Die Aussage wird beim Scrollen Wort für Wort hell */
.js [data-aufbau='scroll'] .wort {
  opacity: 0.14;
  translate: none;
  filter: var(--praegung, );
  transition: opacity var(--motion-mittel) var(--motion-kurve);
  transition-delay: 0s;
}
.js [data-aufbau='scroll'] .wort[data-hell] {
  opacity: 1;
}

/* Kennzeilen tippen sich, mit einem blinkenden Balken dahinter */
.js [data-tippen] .zeichen {
  opacity: 0;
  transition: opacity 0s linear;
  transition-delay: calc(var(--start, 0s) + var(--w) * var(--motion-zeichen));
}
.js [data-tippen][data-da] .zeichen {
  opacity: 1;
}
.js [data-tippen]::after {
  content: '';
  display: inline-block;
  width: var(--layout-cursor);
  height: 1.1em;
  margin-left: var(--space-xs);
  vertical-align: text-bottom;
  background: var(--color-akzent);
  opacity: 0;
}
.js [data-tippen][data-da]::after {
  animation:
    blinken var(--motion-blinken) steps(1) var(--start, 0s) 6,
    ausblenden var(--motion-mittel) linear
      calc(var(--start, 0s) + var(--anzahl, 20) * var(--motion-zeichen) + var(--motion-blinken) * 2) forwards;
}

/* ── Einstieg: Auftritt beim Laden ─────────────────────────────────────── */

/* Der Monitor fährt hoch, sein Bildschirm schaltet sich ein wie eine Röhre */
.js .monitor {
  opacity: 0;
  animation: auftritt calc(var(--motion-aufbau) * 1.2) var(--motion-kurve) 0.5s forwards;
}
.js .monitor__schirm img {
  animation: einschalten var(--motion-einschalten) var(--motion-kurve) 1.2s both;
}
.js .einstieg__feld {
  animation: aufblenden calc(var(--motion-aufbau) * 2) ease-out both;
}
.js .einstieg__tisch {
  animation: aufziehen calc(var(--motion-aufbau) * 1.5) var(--motion-kurve) 0.9s both;
}
.js .einstieg__aktionen[data-zeigen] {
  transition-delay: var(--start, 0s);
}

/* Ebenen, die der Maus unterschiedlich weit folgen */
.einstieg__strahl {
  translate: calc(var(--px, 0) * var(--layout-parallaxe) * 1.2) 0;
}
.einstieg__staub {
  position: absolute;
  inset: 0;
  translate: calc(var(--px, 0) * var(--layout-parallaxe) * -1.4) calc(var(--py, 0) * var(--layout-parallaxe) * -0.8);
}
/* Überschrift und Kennzeile folgen der Maus auf eigener Ebene: Sonst würden
   die silbernen Wörter samt Schatten bei jedem Bild neu gemalt */
.einstieg__titel {
  translate: calc(var(--px, 0) * var(--layout-parallaxe) * -0.25) calc(var(--py, 0) * var(--layout-parallaxe) * -0.15);
  will-change: translate;
}
.einstieg__frage {
  translate: calc(var(--px, 0) * var(--layout-parallaxe) * 0.3) 0;
  will-change: translate;
}


@keyframes blinken {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes ausblenden {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes auftritt {
  from {
    opacity: 0;
    translate: 0 var(--layout-versatz);
  }
  to {
    opacity: 1;
    translate: none;
  }
}
@keyframes einschalten {
  0% {
    opacity: 0;
    transform: scale(1, 0.006);
    filter: brightness(2);
  }
  30% {
    opacity: 1;
    transform: scale(1, 0.006);
    filter: brightness(2);
  }
  70% {
    transform: scale(1, 1);
    filter: brightness(1.3);
  }
  100% {
    transform: none;
    filter: brightness(1);
  }
}
@keyframes aufblenden {
  from {
    opacity: 0;
  }
}
@keyframes aufziehen {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
}

/* Auftritt beim Laden und Aufrichten beim Scrollen, jedes auf seiner Zeitachse */
@media all {
  @supports (animation-timeline: scroll()) {
    .js .monitor {
      animation:
        auftritt calc(var(--motion-aufbau) * 1.2) var(--motion-kurve) 0.5s forwards,
        aufrichten linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 60vh;
    }
  }
}

/* Endlose Animationen außerhalb des Bildes anhalten (seite.js setzt
   data-im-bild an jedem Abschnitt, der zu sehen ist) */
.js :is(main > section, .fuss):not([data-im-bild]),
.js :is(main > section, .fuss):not([data-im-bild]) *,
.js :is(main > section, .fuss):not([data-im-bild]) *::before,
.js :is(main > section, .fuss):not([data-im-bild]) *::after {
  animation-play-state: paused !important;
}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────── */

.recht {
  max-width: calc(var(--layout-text) + 2 * var(--space-rand));
  margin-inline: auto;
  padding: calc(var(--layout-kopf) + var(--space-xl)) var(--space-rand) var(--space-abschnitt);
}
.recht h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  font-size: var(--text-lead);
  font-weight: var(--primitive-font-weight-medium);
}
.recht p,
.recht address {
  color: var(--color-fg-zweit);
  font-style: normal;
}
.recht p + p {
  margin-top: var(--space-md);
}
.recht a {
  color: var(--color-akzent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.fuss__links a[aria-current='page'] {
  color: var(--color-fg);
}