/*
 * headroom.dakuun.de — die Seite zur App. Wie die App selbst nach apple.com
 * gebaut: SF Pro, große Zeilen, viel Schwarz. Die drei Farben kommen aus dem
 * App-Symbol (die drei Karten im Ordner). Was scrollt, rechnet seite.js aus
 * und schreibt es als Variable (--p) oder Transform an die Elemente.
 */

:root {
  color-scheme: dark;

  --grund: #000;
  --flaeche: #0b0b0d;
  --karte: #111114;
  --karte-2: #18181c;
  --linie: rgb(255 255 255 / 0.08);
  --linie-2: rgb(255 255 255 / 0.14);
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --text-3: #6e6e73;
  --text-4: #3a3a3f;

  --akzent: #0071e3;
  --akzent-hover: #0077ed;
  --verweis: #2997ff;

  /* Die Karten im App-Symbol */
  --lila: #c86af9;
  --blau: #259cfd;
  --mint: #1deab3;
  --verlauf: linear-gradient(96deg, #d99bff 0%, #a67cff 24%, #4aa3ff 54%, #2fe3b8 100%);

  --schrift: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue',
    'Segoe UI Variable Display', 'Segoe UI', Roboto, Arial, sans-serif;

  --aus: cubic-bezier(0.22, 1, 0.36, 1);
  --weich: cubic-bezier(0.4, 0, 0.2, 1);
  /* Die Feder aus der App (tokens.css, --feder-lebhaft) */
  --feder: linear(0, 0.0251, 0.0896, 0.1797, 0.2841, 0.3938, 0.5022, 0.6045, 0.6975, 0.7793, 0.8491, 0.9069, 0.9532, 0.989, 1.0155,
    1.034, 1.0458, 1.0521, 1.0543, 1.0532, 1.0499, 1.0452, 1.0396, 1.0336, 1.0277, 1.0221, 1.017, 1.0125, 1.0086, 1.0054, 1.0028,
    1.0008, 0.9993, 0.9983, 0.9976, 0.9972, 0.9971, 0.9971, 0.9973, 0.9975, 0.9978, 0.9981, 0.9985, 0.9988, 1);

  --kopf: 52px;
  --rand: max(22px, env(safe-area-inset-left), env(safe-area-inset-right));
  --breite: 1180px;
}

/* ── Grundlagen ─────────────────────────────────────────────────────── */

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

html {
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--kopf);
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  letter-spacing: inherit;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

kbd {
  font-family: var(--schrift);
}

/* hidden gilt immer — auch wo oben display gesetzt ist (svg, Listen als Raster) */
[hidden] {
  display: none !important;
}

::selection {
  background: rgb(41 151 255 / 0.35);
}

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

.springen {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
  transition: top 0.2s var(--aus);
}

.springen:focus {
  top: 12px;
}

/* ── Wiederkehrendes ────────────────────────────────────────────────── */

.augenbraue {
  display: inline-block;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}

.verlauf-text {
  background: var(--verlauf);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: schimmern 9s ease-in-out infinite alternate;
}

@keyframes schimmern {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

.grau {
  color: var(--text-3);
}

.abschnitt-kopf {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: 0 auto;
  text-align: center;
}

.abschnitt-kopf h2,
.hoerseite-text h2,
.laden h2 {
  font-size: clamp(40px, 6.2vw, 80px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.038em;
}

.abschnitt-text {
  margin: 22px auto 0;
  max-width: 660px;
  color: var(--text-2);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.016em;
}

/* Knöpfe wie auf apple.com: Kapseln, Blau für das Wichtigste */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 980px;
  background: var(--akzent);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    background-color 0.2s var(--weich),
    transform 0.25s var(--aus),
    box-shadow 0.3s var(--weich);
}

.knopf:hover {
  background: var(--akzent-hover);
  box-shadow: 0 8px 30px rgb(0 113 227 / 0.35);
}

.knopf:active {
  transform: scale(0.97);
}

.knopf-mini {
  min-height: 30px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
}

.knopf-gross {
  min-height: 56px;
  padding: 0 32px;
  font-size: 19px;
}

.knopf-zweit {
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px var(--linie-2);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.knopf-zweit:hover {
  background: rgb(255 255 255 / 0.14);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
}

.knopf[aria-disabled='true'] {
  background: rgb(255 255 255 / 0.08);
  color: var(--text-2);
  box-shadow: none;
  pointer-events: none;
}

.knopf-symbol {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.knopf-symbol.klein {
  width: 16px;
  height: 16px;
}

.verweis {
  display: inline-flex;
  align-items: center;
  color: var(--verweis);
  font-size: 19px;
  letter-spacing: -0.012em;
}

.verweis::after {
  content: '';
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.36em;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--aus);
}

.verweis:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.verweis:hover::after {
  transform: translateX(3px) rotate(45deg);
}

.verweis.klein {
  font-size: inherit;
}

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}

/* Die Ampel oben links in jedem Fenster */
.ampel {
  position: absolute;
  z-index: 2;
  left: 1.25%;
  top: 2.44%;
  width: 3.61%;
  aspect-ratio: 52 / 12;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.ampel i {
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.25);
}

.ampel i:nth-child(2) {
  background: #febc2e;
}

.ampel i:nth-child(3) {
  background: #28c840;
}

/* Ein Mac-Fenster: abgerundet, Lichtkante, weicher Schatten */
.fenster {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: clamp(8px, 1vw, 14px);
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.12),
    0 40px 120px -20px rgb(0 0 0 / 0.9),
    0 0 120px -30px rgb(74 163 255 / 0.25);
}

.fenster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Erscheinen beim Hineinrollen (seite.js setzt .sichtbar) */
.js [data-zeigen],
.js .kachel,
.js .plattform,
.js .session {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition:
    opacity 1s var(--aus),
    transform 1.2s var(--aus);
  transition-delay: var(--verzug, 0s);
}

.js [data-zeigen].sichtbar,
.js .kachel.sichtbar,
.js .plattform.sichtbar,
.js .session.sichtbar {
  opacity: 1;
  transform: none;
}

/* Falls seite.js nicht startet: nach kurzer Zeit alles zeigen */
.js:not(.laeuft) :is([data-zeigen], .kachel, .plattform, .session) {
  animation: notfall 0.6s 2.5s forwards;
}

@keyframes notfall {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Kopfleiste ─────────────────────────────────────────────────────── */

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--kopf);
  padding-top: env(safe-area-inset-top);
  background: rgb(0 0 0 / 0.5);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition:
    background-color 0.4s var(--weich),
    box-shadow 0.4s var(--weich);
}

.kopf[data-gerollt] {
  background: rgb(22 22 23 / 0.8);
  box-shadow: 0 1px 0 var(--linie);
}

.kopf-innen {
  height: 100%;
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.marke img {
  border-radius: 6px;
}

.kopf-links {
  display: flex;
  gap: 34px;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.kopf-links a {
  color: var(--text-2);
  transition: color 0.2s var(--weich);
}

.kopf-links a:hover,
.kopf-links a[aria-current='true'] {
  color: var(--text);
}

@media (max-width: 760px) {
  .kopf-links {
    display: none;
  }
}

/* ── Held: der Laptop geht auf ──────────────────────────────────────── */

.held {
  position: relative;
  height: 330vh;
}

@media (max-width: 699px) {
  .held {
    height: 280vh;
  }
}

.held-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--aurora, 1);
}

.aurora span {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: treiben 26s ease-in-out infinite alternate;
}

.aurora span:nth-child(1) {
  left: -28vmax;
  top: -40vmax;
  background: radial-gradient(circle, rgb(200 106 249 / 0.55), transparent 62%);
}

.aurora span:nth-child(2) {
  right: -30vmax;
  top: -36vmax;
  background: radial-gradient(circle, rgb(37 156 253 / 0.5), transparent 60%);
  animation-duration: 32s;
  animation-delay: -10s;
}

.aurora span:nth-child(3) {
  left: 10vmax;
  bottom: -52vmax;
  background: radial-gradient(circle, rgb(29 234 179 / 0.28), transparent 60%);
  animation-duration: 38s;
  animation-delay: -18s;
}

@keyframes treiben {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(6vmax, 4vmax, 0) scale(1.12);
  }
}

.held-text {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--kopf) + clamp(28px, 8.5vh, 96px));
  width: min(100% - 2 * var(--rand), 980px);
  text-align: center;
  transform: translate3d(-50%, 0, 0);
  will-change: transform, opacity;
}

.held .augenbraue {
  margin-bottom: 6px;
}

.held-titel {
  font-size: clamp(64px, 12.4vw, 168px);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.052em;
  background: linear-gradient(180deg, #fff 30%, rgb(255 255 255 / 0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.04em;
}

.held-zeile {
  margin-top: clamp(4px, 1vh, 12px);
  font-size: clamp(26px, 3.7vw, 48px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.held-unterzeile {
  margin-top: 14px;
  color: var(--text-2);
  font-size: clamp(17px, 1.5vw, 21px);
}

.held-text .knoepfe {
  margin-top: clamp(20px, 3.4vh, 34px);
}

.held-info {
  margin-top: 16px;
  color: var(--text-3);
  font-size: 13px;
  letter-spacing: -0.005em;
  min-height: 1.4em;
}

/* Die Bühne für den Laptop: seite.js setzt --b (Breite in px) und die Transforms */
.laptop-raum {
  position: absolute;
  inset: 0;
  perspective: 5000px;
  perspective-origin: 50% 50%;
  pointer-events: none;
}

.laptop {
  --b: 1400px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--b);
  height: calc(var(--b) * 0.66);
  margin-left: calc(var(--b) / -2);
  margin-top: calc(var(--b) * -0.33);
  /* 1em = ein Hundertstel der Laptopbreite — alle Maße unten in em */
  font-size: calc(var(--b) / 100);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

.deckel {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

.deckel-vorn,
.deckel-hinten {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 3em 3em 1.1em 1.1em;
}

.deckel-vorn {
  background: #070708;
  box-shadow:
    inset 0 0 0 0.22em #3a3b40,
    inset 0 0 0 0.34em #0c0c0d;
}

.bildschirm {
  position: absolute;
  left: 1.6em;
  right: 1.6em;
  top: 2.2em;
  height: 60.5em;
  border-radius: 1.5em 1.5em 0.25em 0.25em;
  overflow: hidden;
  background: #000;
}

.bildschirm-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bildschirm-aus {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, #121216 0%, #050506 60%);
  opacity: var(--aus-an, 1);
}

.bildschirm-glanz {
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0.03) 32%, transparent 33%);
  opacity: var(--glanz, 1);
  mix-blend-mode: screen;
}

.deckel-hinten {
  transform: rotateX(180deg);
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 70% at 50% 50%, rgb(255 255 255 / 0.05), transparent 70%),
    linear-gradient(180deg, #2c2d32 0%, #202125 55%, #1a1b1e 100%);
  box-shadow:
    inset 0 0 0 0.2em rgb(255 255 255 / 0.06),
    inset 0 -1.2em 2em -1em rgb(255 255 255 / 0.08);
}

.deckel-hinten img {
  width: 12em;
  height: 12em;
  filter: drop-shadow(0 0 2.5em rgb(120 140 255 / 0.55));
}

.unterteil {
  position: absolute;
  left: 0;
  top: calc(100% + 0.7em);
  width: 100%;
  height: 66em;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  border-radius: 0.6em 0.6em 2.6em 2.6em;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent 30%),
    linear-gradient(180deg, #2e2f34 0%, #26272b 100%);
  box-shadow: inset 0 0 0 0.16em rgb(255 255 255 / 0.07);
}

/* Die Tastatur: abgerundete Tasten als Muster, 15 je Reihe */
.tastatur {
  position: absolute;
  left: 8.5em;
  right: 8.5em;
  top: 5em;
  height: 33.5em;
  border-radius: 1.1em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Crect x='3' y='3' width='44' height='44' rx='7' fill='%230d0d0f'/%3E%3Crect x='3.6' y='3.6' width='42.8' height='42.8' rx='6.5' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'/%3E%3C/svg%3E")
      0 0 / calc(83em / 15) calc(33.5em / 6),
    #1f2023;
  box-shadow:
    inset 0 0 0 0.25em #1f2023,
    0 0 0 0.12em rgb(0 0 0 / 0.35);
}

.trackpad {
  position: absolute;
  left: 50%;
  top: 41.5em;
  width: 40em;
  height: 21em;
  margin-left: -20em;
  border-radius: 1.4em;
  background: linear-gradient(180deg, #2b2c30, #232427);
  box-shadow:
    inset 0 0 0 0.12em rgb(255 255 255 / 0.08),
    inset 0 0.2em 0.6em rgb(0 0 0 / 0.35);
}

.unterteil-kante {
  position: absolute;
  left: 0;
  top: calc(100% + 0.7em);
  width: 100%;
  height: 1.7em;
  transform: translateZ(66em);
  border-radius: 0 0 2.2em 2.2em;
  background: linear-gradient(180deg, #5a5b61 0%, #2a2b2f 22%, #16171a 100%);
}

.unterteil-kante::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 13em;
  height: 0.55em;
  margin-left: -6.5em;
  border-radius: 0 0 1em 1em;
  background: #141518;
}

/* Leuchten hinter dem Bildschirm, sobald er angeht — flach und außerhalb der
   3D-Szene, damit es den geneigten Deckel nicht schneidet */
.laptop-leuchten {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(120vw, 1600px);
  height: min(90vh, 1000px);
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgb(74 130 255 / 0.3), rgb(200 106 249 / 0.12) 45%, transparent 70%);
  opacity: var(--leuchten, 0);
  pointer-events: none;
}

.rollen-hinweis {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 26px;
  height: 40px;
  margin-left: -13px;
  border-radius: 13px;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.3);
  opacity: var(--hinweis, 1);
}

.rollen-hinweis span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.7);
  animation: rollen 1.8s var(--weich) infinite;
}

@keyframes rollen {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(14px);
    opacity: 0;
  }
}

/* ── Ein Satz, Wort für Wort ────────────────────────────────────────── */

.satz {
  position: relative;
  height: 230vh;
  background: var(--grund);
}

.satz-buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-content: center;
  gap: clamp(40px, 8vh, 80px);
  width: min(100% - 2 * var(--rand), 1020px);
  margin: 0 auto;
}

.satz-text {
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.034em;
  color: var(--text);
}

.js .satz-text .wort {
  color: var(--text-4);
  transition: color 0.35s var(--weich);
}

.js .satz-text .wort.an {
  color: var(--text);
}

.js .satz-text .wort.an.bunt {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Der Pegel: läuft, aber nie in den Headroom */
.pegel {
  width: min(100%, 720px);
  padding-bottom: 26px;
  opacity: var(--pegel-da, 1);
}

.pegel-skala {
  display: flex;
  justify-content: space-between;
  color: var(--text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.pegel-bahn {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: rgb(255 255 255 / 0.07);
  overflow: visible;
}

.pegel-luft {
  position: absolute;
  right: 0;
  top: -4px;
  height: 36px;
  width: 25%;
  border-left: 1px dashed rgb(255 255 255 / 0.22);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pegel-luft::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 10px;
  border-radius: 0 5px 5px 0;
  background: repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.06) 0 4px, transparent 4px 8px);
}

.pegel-stand {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--mint) 0%, var(--blau) 55%, var(--lila) 74%);
  transform-origin: 0 50%;
  transform: scaleX(0.4);
  animation: pegeln 3.2s ease-in-out infinite;
  box-shadow: 0 0 24px rgb(37 156 253 / 0.45);
  clip-path: inset(0 25% 0 0 round 5px);
}

.pegel-spitze {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 71%;
  width: 2px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 10px rgb(255 255 255 / 0.8);
  animation: spitze 3.2s ease-in-out infinite;
}

@keyframes pegeln {
  0% {
    transform: scaleX(0.46);
  }
  12% {
    transform: scaleX(0.68);
  }
  22% {
    transform: scaleX(0.55);
  }
  35% {
    transform: scaleX(0.72);
  }
  48% {
    transform: scaleX(0.6);
  }
  60% {
    transform: scaleX(0.74);
  }
  72% {
    transform: scaleX(0.52);
  }
  86% {
    transform: scaleX(0.7);
  }
  100% {
    transform: scaleX(0.46);
  }
}

@keyframes spitze {
  0%,
  100% {
    left: 70%;
  }
  60% {
    left: 73.5%;
  }
}

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

.rundgang {
  position: relative;
  padding-top: clamp(80px, 14vh, 160px);
  background: var(--grund);
}

.rundgang-strecke {
  position: relative;
  height: 620vh;
  margin-top: clamp(24px, 5vh, 56px);
}

.rundgang-buehne {
  position: sticky;
  top: var(--kopf);
  height: calc(100vh - var(--kopf));
  height: calc(100svh - var(--kopf));
  width: min(100% - 2 * var(--rand), 1260px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
}

.rundgang-seite {
  display: grid;
  gap: 28px;
}

.schritte {
  position: relative;
  display: grid;
}

.schritt {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.5s var(--weich),
    transform 0.7s var(--aus);
  pointer-events: none;
}

.schritt.vorbei {
  transform: translate3d(0, -26px, 0);
}

.schritt.aktiv {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.08s;
}

.schritt-marke {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.schritt h3 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.032em;
}

.schritt p {
  margin-top: 16px;
  color: var(--text-2);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.5;
}

.schiene {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.1);
  overflow: hidden;
}

.schiene-fuellung {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--verlauf);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

.kapitel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -10px;
}

.kapitel button {
  padding: 6px 12px;
  border-radius: 980px;
  color: var(--text-3);
  font-size: 13px;
  transition:
    color 0.25s var(--weich),
    background-color 0.25s var(--weich);
}

.kapitel button:hover {
  color: var(--text);
}

.kapitel button[aria-current='true'] {
  color: var(--text);
  background: rgb(255 255 255 / 0.1);
}

.rundgang-fenster .fenster-bilder img {
  opacity: 0;
  transform: scale(1.025);
  transition:
    opacity 0.6s var(--weich),
    transform 1s var(--aus);
}

.rundgang-fenster .fenster-bilder img.aktiv {
  opacity: 1;
  transform: none;
}

@media (max-width: 999px) {
  .rundgang-strecke {
    height: 560vh;
  }

  .rundgang-buehne {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    gap: 24px;
  }

  .rundgang-fenster {
    order: -1;
  }

  .kapitel {
    display: none;
  }

  .schritt h3 {
    font-size: 26px;
  }

  .schritt p {
    margin-top: 10px;
    font-size: 16px;
  }
}

/* ── Hörseite ───────────────────────────────────────────────────────── */

.hoerseite {
  position: relative;
  height: 320vh;
  background: radial-gradient(60% 40% at 50% 50%, rgb(37 156 253 / 0.08), transparent 70%), var(--grund);
}

.hoerseite-buehne {
  --t: min(320px, 24vw, (100svh - var(--kopf) - 90px) * 0.44);
  position: sticky;
  top: var(--kopf);
  height: calc(100vh - var(--kopf));
  height: calc(100svh - var(--kopf));
  width: min(100% - 2 * var(--rand), 1260px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(230px, 300px);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.hoerseite-text h2 {
  font-size: clamp(40px, 5vw, 72px);
}

.hoerseite-text .abschnitt-text {
  margin-left: 0;
}

.hoerseite-text .knopf {
  margin-top: 30px;
}

.telefon-raum {
  display: grid;
  place-items: center;
}

/* Ein iPhone, gezeichnet: 1em = ein 39tel der Bildschirmbreite (390 Punkte) */
.telefon {
  position: relative;
  width: calc(var(--t) + 2.6em);
  font-size: calc(var(--t) / 39);
  padding: 1.3em;
  border-radius: 6.4em;
  background: linear-gradient(145deg, #3b3c41, #1b1c1f 40%, #2b2c30);
  box-shadow:
    inset 0 0 0 0.25em #54555b,
    inset 0 0 0 0.55em #0a0a0b,
    0 50px 120px -30px rgb(0 0 0 / 0.9),
    0 0 90px -20px rgb(37 156 253 / 0.35);
}

.telefon-bildschirm {
  position: relative;
  aspect-ratio: 390 / 844;
  border-radius: 5.2em;
  overflow: hidden;
  background: #000;
}

.telefon-status {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 4.7em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 3.3em 0;
  font-size: 1.55em;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(#000 70%, transparent);
}

.telefon-status span:first-child {
  padding-left: 0.4em;
}

.telefon-symbole {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
}

.telefon-symbole i {
  display: block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 0.15em;
  background: #fff;
}

.telefon-symbole i:last-child {
  width: 1.3em;
  height: 0.62em;
  border-radius: 0.2em;
  background: linear-gradient(90deg, #fff 76%, rgb(255 255 255 / 0.35) 76%);
}

.telefon-fenster {
  position: absolute;
  inset: 3em 0 0;
  overflow: hidden;
}

.telefon-inhalt {
  width: 100%;
  height: auto;
  transform: translate3d(0, calc(var(--p, 0) * -146.7em), 0);
  will-change: transform;
}

.insel {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 1.1em;
  width: 12.4em;
  height: 3.6em;
  margin-left: -6.2em;
  border-radius: 2em;
  background: #000;
}

/* Was die Seite kann: leuchtet auf, während die Seite im iPhone rollt */
.punkte {
  display: grid;
  gap: 10px;
}

.punkte li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgb(255 255 255 / 0.03);
  box-shadow: inset 0 0 0 1px var(--linie);
  opacity: 0.3;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity 0.5s var(--weich),
    transform 0.7s var(--feder),
    background-color 0.5s var(--weich),
    box-shadow 0.5s var(--weich);
}

.punkte li.an {
  opacity: 1;
  transform: none;
}

.punkte li.letzte {
  background: rgb(41 151 255 / 0.08);
  box-shadow:
    inset 0 0 0 1px rgb(41 151 255 / 0.45),
    0 0 40px -12px rgb(41 151 255 / 0.5);
}

.punkte svg {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.06);
  fill: none;
  stroke: var(--verweis);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.punkte b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.punkte span {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.38;
  letter-spacing: -0.005em;
}

@media (max-width: 1099px) {
  .hoerseite-buehne {
    --t: min(300px, 34vw, (100svh - var(--kopf) - 90px) * 0.44);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: 22px;
  }

  .hoerseite-text {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .telefon-raum {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .punkte {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hoerseite-text .abschnitt-text {
    font-size: 17px;
  }
}

@media (max-width: 759px) {
  .hoerseite {
    height: 300vh;
  }

  .hoerseite-buehne {
    --t: min(250px, 62vw, (100svh - var(--kopf) - 330px) * 0.46);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 16px;
    padding-top: 20px;
  }

  .hoerseite-text,
  .telefon-raum,
  .punkte {
    grid-column: 1;
    grid-row: auto;
  }

  .hoerseite-text {
    text-align: center;
  }

  .hoerseite-text h2 {
    font-size: clamp(34px, 9vw, 48px);
  }

  .hoerseite-text .abschnitt-text {
    display: none;
  }

  .hoerseite-text .knopf {
    margin-top: 12px;
  }

  /* Auf dem Handy nur der Punkt, der gerade dran ist */
  .punkte {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-self: center;
    width: min(360px, 100%);
  }

  .punkte li,
  .punkte li.an {
    grid-area: 1 / 1;
    opacity: 0;
  }

  .punkte li.letzte {
    opacity: 1;
  }
}

/* ── Autopilot ──────────────────────────────────────────────────────── */

.autopilot {
  position: relative;
  height: 260vh;
}

.autopilot-buehne {
  position: sticky;
  top: var(--kopf);
  height: calc(100vh - var(--kopf));
  height: calc(100svh - var(--kopf));
  width: min(100% - 2 * var(--rand), 1080px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: clamp(28px, 6vh, 64px);
  align-content: center;
  align-items: center;
}

.autopilot .abschnitt-kopf {
  grid-column: 1 / -1;
  width: 100%;
}

.autopilot .abschnitt-kopf h2 {
  font-size: clamp(40px, 5.4vw, 72px);
}

.autopilot .abschnitt-kopf .abschnitt-text {
  margin-top: 16px;
  font-size: clamp(16px, 1.4vw, 19px);
}

.strecke {
  position: relative;
  align-self: center;
  padding-left: 58px;
}

.strecke-schiene {
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.1);
  overflow: hidden;
}

.strecke-schiene .schiene-fuellung {
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 0));
  background: linear-gradient(180deg, var(--mint), var(--blau), var(--lila));
}

.stationen {
  display: grid;
  gap: clamp(18px, 3.4vh, 34px);
}

.station {
  position: relative;
  opacity: 0.35;
  transition: opacity 0.5s var(--weich);
}

.station.an {
  opacity: 1;
}

.station-punkt {
  position: absolute;
  left: -58px;
  top: -2px;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #111114;
  box-shadow: inset 0 0 0 1px var(--linie-2);
  transition:
    background-color 0.4s var(--weich),
    box-shadow 0.4s var(--weich),
    transform 0.6s var(--feder);
}

.station.an .station-punkt {
  background: #0d1b2b;
  box-shadow:
    inset 0 0 0 1px rgb(41 151 255 / 0.6),
    0 0 26px rgb(41 151 255 / 0.35);
  transform: scale(1.06);
}

.station-punkt svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.station.an .station-punkt svg {
  stroke: var(--verweis);
}

.station h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.station p {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 15px;
}

/* Die Karte „Bereit zum Schicken", wie in Heute */
.bereit {
  align-self: center;
  padding: 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, #19191d, #121215);
  box-shadow:
    inset 0 0 0 1px var(--linie-2),
    0 40px 90px -30px rgb(0 0 0 / 0.9);
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.96);
  transition:
    opacity 0.6s var(--weich),
    transform 0.9s var(--feder);
}

.autopilot[data-stufe] .bereit {
  opacity: 1;
  transform: none;
}

.bereit-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bereit-marke {
  padding: 4px 10px;
  border-radius: 980px;
  background: rgb(41 151 255 / 0.15);
  color: var(--verweis);
  font-size: 13px;
  font-weight: 600;
}

.bereit-song {
  color: var(--text-2);
  font-size: 13px;
}

.bereit-welle {
  position: relative;
  margin-top: 18px;
  height: 44px;
}

.bereit-welle svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bereit-welle rect {
  fill: rgb(255 255 255 / 0.18);
}

.bereit-welle .welle-voll rect {
  fill: var(--verweis);
}

.bereit-welle .welle-voll {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s var(--aus);
}

.autopilot[data-stufe] .bereit-welle .welle-voll {
  clip-path: inset(0 0 0 0);
}

.bereit-text {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.5s var(--weich);
}

.autopilot[data-stufe='2'] .bereit-text,
.autopilot[data-stufe='3'] .bereit-text {
  opacity: 1;
}

.bereit-haken {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.bereit-haken li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-size: 15px;
  opacity: 0;
  transform: translate3d(-10px, 0, 0);
  transition:
    opacity 0.4s var(--weich),
    transform 0.6s var(--aus);
}

.bereit-haken li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E")
      center / 12px no-repeat,
    #30d158;
}

.autopilot[data-stufe='2'] .bereit-haken li,
.autopilot[data-stufe='3'] .bereit-haken li {
  opacity: 1;
  transform: none;
}

.bereit-haken li:nth-child(2) {
  transition-delay: 0.12s;
}

.bereit-haken li:nth-child(3) {
  transition-delay: 0.24s;
}

.bereit-fuss {
  margin-top: 20px;
}

.bereit-knopf {
  position: relative;
  display: inline-grid;
  min-height: 40px;
  padding: 0 18px;
  align-items: center;
  border-radius: 980px;
  background: var(--akzent);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  transition: background-color 0.4s var(--weich);
}

.bereit-knopf > span {
  grid-area: 1 / 1;
  transition:
    opacity 0.35s var(--weich),
    transform 0.5s var(--aus);
}

.bereit-knopf .nachher {
  opacity: 0;
  transform: translateY(12px);
}

.autopilot[data-stufe='3'] .bereit-knopf {
  background: #1f7a3d;
}

.autopilot[data-stufe='3'] .bereit-knopf .vorher {
  opacity: 0;
  transform: translateY(-12px);
}

.autopilot[data-stufe='3'] .bereit-knopf .nachher {
  opacity: 1;
  transform: none;
}

@media (max-width: 899px) {
  .autopilot {
    height: 280vh;
  }

  .autopilot-buehne {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 22px;
    align-content: center;
  }

  .autopilot .abschnitt-kopf {
    margin-bottom: 0;
  }

  .autopilot .abschnitt-kopf .abschnitt-text {
    display: none;
  }

  .stationen {
    gap: 14px;
  }

  .station p {
    display: none;
  }

  .station-punkt {
    width: 36px;
    height: 36px;
    left: -52px;
    top: -6px;
  }

  .strecke {
    padding-left: 52px;
  }

  .strecke-schiene {
    left: 17px;
    top: 16px;
    bottom: 16px;
  }

  .bereit {
    padding: 18px;
  }

  .bereit-welle {
    display: none;
  }
}

/* ── Stems ──────────────────────────────────────────────────────────── */

.stems {
  padding: clamp(100px, 16vh, 180px) 0 clamp(60px, 10vh, 120px);
}

.arrangement {
  width: min(100% - 2 * var(--rand), 1000px);
  margin: clamp(48px, 8vh, 80px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(20px, 4vw, 56px);
  --zeile: 52px;
}

.dateien,
.spuren {
  display: grid;
  grid-auto-rows: var(--zeile);
  gap: 10px;
}

.dateien li {
  --spurfarbe: #4f6bff;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 9px 12px 9px 14px;
  border-radius: 12px;
  background: #16161a;
  box-shadow: inset 0 0 0 1px var(--linie-2);
  font-size: 14px;
  white-space: nowrap;
}

.dateien li::before {
  content: '';
  flex: none;
  width: 13px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--spurfarbe) 80%, #fff), var(--spurfarbe));
}

/* Das Ziel erscheint, sobald die Datei einsortiert ist */
.dateien li::after {
  content: attr(data-ziel);
  padding: 2px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--spurfarbe) 30%, transparent);
  color: color-mix(in srgb, var(--spurfarbe) 45%, #fff);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: translateX(-6px);
}

.dateien li[data-nach='1'] {
  --spurfarbe: #b35cff;
}
.dateien li[data-nach='2'] {
  --spurfarbe: #8f5cff;
}
.dateien li[data-nach='3'] {
  --spurfarbe: #ff5f9a;
}
.dateien li[data-nach='4'] {
  --spurfarbe: #ff9f0a;
}
.dateien li[data-nach='5'] {
  --spurfarbe: #1dc9a0;
}

.spuren {
  display: grid;
  grid-auto-rows: var(--zeile);
  gap: 10px;
}

.dateien li {
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 12px;
  background: #16161a;
  box-shadow: inset 0 0 0 1px var(--linie-2);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dateien li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 17px;
  border-radius: 3px;
  background: linear-gradient(180deg, #6f7bff, #3f55e0);
}

.spuren {
  padding: 0;
  border-radius: 18px;
  background: #0d0d10;
  box-shadow: inset 0 0 0 1px var(--linie);
  padding: 10px;
  grid-auto-rows: calc(var(--zeile) - 0px);
}

.spur {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.025);
  padding: 0 10px 0 14px;
}

.spur-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.spur-bahn {
  position: relative;
  height: 30px;
  border-radius: 7px;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 48px);
}

.spur-bahn i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 78%;
  border-radius: 7px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.5) 0 2px, transparent 2px 4px) center / 100% 50% no-repeat,
    var(--spurfarbe, #3f6fff);
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0.9;
}

.spur[data-spur='0'] {
  --spurfarbe: #4f6bff;
}
.spur[data-spur='1'] {
  --spurfarbe: #b35cff;
}
.spur[data-spur='2'] {
  --spurfarbe: #8f5cff;
}
.spur[data-spur='3'] {
  --spurfarbe: #ff5f9a;
}
.spur[data-spur='4'] {
  --spurfarbe: #ff9f0a;
}
.spur[data-spur='5'] {
  --spurfarbe: #1dc9a0;
}

.spur[data-spur='1'] .spur-bahn i {
  width: 52%;
  left: 22%;
}
.spur[data-spur='2'] .spur-bahn i {
  width: 40%;
  left: 8%;
}
.spur[data-spur='3'] .spur-bahn i {
  width: 64%;
  left: 14%;
}
.spur[data-spur='5'] .spur-bahn i {
  width: 18%;
  left: 36%;
}

.arrangement.sichtbar .dateien li {
  animation: einsortieren 1s var(--aus) forwards;
  animation-delay: calc(0.35s + var(--i, 0) * 0.32s);
}

.arrangement.sichtbar .dateien li::after {
  animation: etikett 0.6s var(--aus) forwards;
  animation-delay: calc(0.95s + var(--i, 0) * 0.32s);
}

.arrangement.sichtbar .spur-bahn i {
  animation: region 0.9s var(--aus) forwards;
  animation-delay: calc(0.95s + var(--i, 0) * 0.32s);
}

.arrangement.sichtbar .spur {
  animation: aufleuchten 1.4s var(--weich) forwards;
  animation-delay: calc(0.9s + var(--i, 0) * 0.32s);
}

@keyframes einsortieren {
  0% {
    transform: none;
  }
  45% {
    transform: translate3d(16px, 0, 0);
    box-shadow:
      inset 0 0 0 1px var(--spurfarbe),
      0 0 28px color-mix(in srgb, var(--spurfarbe) 45%, transparent);
  }
  100% {
    transform: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--spurfarbe) 55%, transparent);
  }
}

@keyframes etikett {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes region {
  to {
    transform: scaleX(1);
  }
}

@keyframes aufleuchten {
  0% {
    background: rgb(255 255 255 / 0.025);
  }
  30% {
    background: rgb(255 255 255 / 0.09);
  }
  100% {
    background: rgb(255 255 255 / 0.04);
  }
}

.session {
  width: min(100% - 2 * var(--rand), 1000px);
  margin: clamp(40px, 7vh, 72px) auto 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  border-radius: 24px;
  background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--linie);
}

.session-symbol {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #2a64ff, #9b5cff);
}

.session-symbol svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.session h3 {
  font-size: 21px;
  letter-spacing: -0.02em;
}

.session p {
  margin-top: 4px;
  color: var(--text-2);
}

@media (max-width: 699px) {
  .arrangement {
    grid-template-columns: minmax(0, 1fr);
    --zeile: 44px;
  }

  .dateien {
    display: none;
  }

  .spur {
    grid-template-columns: 76px minmax(0, 1fr);
  }
}

/* ── Kacheln ────────────────────────────────────────────────────────── */

.kacheln {
  padding: clamp(80px, 12vh, 140px) 0;
}

.raster {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: clamp(40px, 7vh, 72px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.kachel {
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  min-height: 330px;
  padding: 30px;
  border-radius: 28px;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgb(255 255 255 / 0.06), transparent 60%),
    var(--karte);
  box-shadow: inset 0 0 0 1px var(--linie);
  overflow: hidden;
  isolation: isolate;
}

.kachel-text h3 {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.028em;
}

.kachel-text p {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.45;
}

.kachel-text kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.2em;
  margin-right: 0.12em;
  border-radius: 0.28em;
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 -0.06em 0 rgb(255 255 255 / 0.12);
  font-size: 0.9em;
  font-weight: 600;
  vertical-align: 0.06em;
}

.kachel-breit {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
}

.kachel-breit .kachel-text {
  flex: 1;
  max-width: 360px;
}

.vorschau-nachricht {
  flex: 1;
  max-width: 380px;
  padding: 18px;
  border-radius: 20px;
  background: #1c1c20;
  box-shadow:
    inset 0 0 0 1px var(--linie-2),
    0 30px 60px -20px rgb(0 0 0 / 0.8);
  transform: rotate(-2deg);
}

.vorschau-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.punkt-gruen {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 10px #30d158;
}

.vorschau-nachricht p {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px 16px 16px 4px;
  background: #2a2a2f;
  font-size: 15px;
  line-height: 1.4;
}

.vorschau-knopf {
  display: inline-flex;
  margin-top: 14px;
  padding: 8px 16px;
  border-radius: 980px;
  background: var(--akzent);
  font-size: 14px;
  font-weight: 500;
  animation: pochen 2.4s var(--weich) infinite;
}

@keyframes pochen {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(0 113 227 / 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgb(0 113 227 / 0);
  }
}

.zwei-macs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 18px;
}

.mini-mac {
  position: relative;
  width: 84px;
  height: 54px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(135deg, #1a2a44, #251b3d);
  box-shadow:
    inset 0 0 0 3px #2d2e33,
    inset 0 0 0 4px #0b0b0c;
}

.mini-mac::after {
  content: '';
  position: absolute;
  left: -9px;
  right: -9px;
  bottom: -6px;
  height: 6px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(#55565c, #2a2b2f);
}

.sync-bahn {
  position: relative;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.1);
  overflow: hidden;
}

.sync-bahn i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  border-radius: 2px;
  background: var(--verlauf);
  animation: pendeln 2.2s var(--weich) infinite alternate;
}

@keyframes pendeln {
  from {
    left: -40%;
  }
  to {
    left: 100%;
  }
}

.kachel-suche {
  justify-content: flex-start;
}

.suche-bild {
  margin: 0 -8px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--linie-2),
    0 24px 50px -16px rgb(0 0 0 / 0.8);
  background: #1c1c1e;
}

.suche-bild img {
  width: 100%;
  height: auto;
}

.gesichter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gesichter img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 50%;
  transition: transform 0.6s var(--feder);
}

.gesichter img:nth-child(odd) {
  transform: translateY(8px);
}

.kachel-gesichter:hover .gesichter img {
  transform: translateY(-4px) scale(1.04);
}

.mitteilung {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgb(40 40 46 / 0.8);
  box-shadow:
    inset 0 0 0 1px var(--linie-2),
    0 20px 40px -12px rgb(0 0 0 / 0.8);
  animation: einblenden-oben 4s var(--aus) infinite;
}

.mitteilung img {
  border-radius: 8px;
}

.mitteilung div {
  flex: 1;
  min-width: 0;
}

.mitteilung b {
  display: block;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.mitteilung span {
  display: block;
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mitteilung em {
  align-self: flex-start;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}

@keyframes einblenden-oben {
  0% {
    transform: translate3d(0, -28px, 0) scale(0.96);
    opacity: 0;
  }
  12%,
  82% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -12px, 0);
    opacity: 0;
  }
}

.mini-kalender {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 38px 38px;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: #0d0d10;
  box-shadow: inset 0 0 0 1px var(--linie);
}

.mini-kalender .tag {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.termin {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  border-left: 3px solid var(--tf);
  background: color-mix(in srgb, var(--tf) 22%, transparent);
}

.termin[data-farbe='blau'] {
  --tf: #0a84ff;
  grid-column: 1;
  grid-row: 2;
}

.termin[data-farbe='orange'] {
  --tf: #ff9f0a;
  grid-column: 1;
  grid-row: 3;
}

.termin[data-farbe='lila'] {
  --tf: #bf5af2;
  grid-column: 3;
  grid-row: 2;
}

.termin.wandert {
  animation: verschieben 4.5s var(--aus) infinite;
}

@keyframes verschieben {
  0%,
  20% {
    transform: none;
  }
  45%,
  80% {
    transform: translateX(calc(100% + 8px));
  }
  100% {
    transform: none;
  }
}

.sprachnachricht {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 22px 22px 22px 6px;
  background: #1f1f24;
  box-shadow: inset 0 0 0 1px var(--linie);
  width: fit-content;
  max-width: 100%;
}

.abspielen {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--akzent);
  position: relative;
}

.abspielen::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 9px;
  border-left: 10px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.sprach-welle {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
}

.sprach-welle i {
  width: 3px;
  height: 30%;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.55);
  animation: sprechen 1.4s ease-in-out infinite;
}

.sprach-welle i:nth-child(3n) {
  animation-delay: -0.4s;
}
.sprach-welle i:nth-child(3n + 1) {
  animation-delay: -0.8s;
}
.sprach-welle i:nth-child(4n) {
  animation-duration: 1.1s;
}
.sprach-welle i:nth-child(5n) {
  animation-duration: 1.7s;
}

@keyframes sprechen {
  0%,
  100% {
    height: 25%;
  }
  50% {
    height: 95%;
  }
}

.sprach-zeit {
  color: var(--text-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.transkript {
  margin-top: -12px;
  color: var(--text-2);
  font-size: 14px;
  font-style: italic;
}

.update-pille {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 26px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.update-pille .alt {
  color: var(--text-3);
}

.update-pille .neu {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.update-pille svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: schieben 2s var(--weich) infinite;
}

@keyframes schieben {
  0%,
  100% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
}

@media (max-width: 999px) {
  .raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kachel-breit {
    grid-column: span 2;
  }
}

@media (max-width: 679px) {
  .raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .kachel-breit {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
  }

  .kachel {
    min-height: 0;
    padding: 24px;
    border-radius: 24px;
  }

  .suche-bild {
    margin: 0;
  }
}

/* ── Hell und Dunkel ────────────────────────────────────────────────── */

.wechsel {
  position: relative;
  height: 240vh;
}

.wechsel-buehne {
  position: sticky;
  top: var(--kopf);
  height: calc(100vh - var(--kopf));
  height: calc(100svh - var(--kopf));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(28px, 5vh, 56px);
}

.wechsel-fenster {
  --w: 1;
  width: min(100% - 2 * var(--rand), 1060px, (100svh - var(--kopf) - 260px) * 1.6);
}

.wechsel-hell {
  clip-path: inset(0 0 0 calc(var(--w) * 100%));
}

.wechsel-linie {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: calc(var(--w) * 100%);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow:
    0 0 18px 2px rgb(255 255 255 / 0.7),
    0 0 60px 6px rgb(74 163 255 / 0.5);
  opacity: calc(min(var(--w), 1 - var(--w)) * 12);
}

/* ── Laden ──────────────────────────────────────────────────────────── */

.laden {
  position: relative;
  padding: clamp(110px, 16vh, 180px) 0 clamp(80px, 12vh, 140px);
  text-align: center;
  overflow: hidden;
}

.laden-leuchten {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1100px;
  height: 900px;
  margin-left: -550px;
  background:
    radial-gradient(closest-side at 35% 40%, rgb(200 106 249 / 0.22), transparent),
    radial-gradient(closest-side at 65% 38%, rgb(37 156 253 / 0.22), transparent),
    radial-gradient(closest-side at 50% 62%, rgb(29 234 179 / 0.12), transparent);
  filter: blur(40px);
  pointer-events: none;
}

.laden-icon {
  position: relative;
  width: clamp(120px, 14vw, 172px);
  height: auto;
  margin: 0 auto 26px;
  animation: schweben 6s ease-in-out infinite;
  filter: drop-shadow(0 30px 50px rgb(0 0 0 / 0.7));
}

@keyframes schweben {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

.laden h2,
.laden .abschnitt-text {
  position: relative;
  width: min(100% - 2 * var(--rand), 900px);
  margin-left: auto;
  margin-right: auto;
}

.laden .knoepfe {
  position: relative;
  margin-top: 34px;
}

.plattformen {
  position: relative;
  width: min(100% - 2 * var(--rand), 980px);
  margin: clamp(56px, 9vh, 88px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  text-align: center;
}

.plattform {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 32px 22px 28px;
  border-radius: 26px;
  background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--linie);
  transition: box-shadow 0.3s var(--weich);
}

.plattform[data-empfohlen] {
  box-shadow:
    inset 0 0 0 1px rgb(41 151 255 / 0.6),
    0 0 60px -20px rgb(41 151 255 / 0.6);
}

.plattform-symbol {
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.plattform h3 {
  font-size: 24px;
  letter-spacing: -0.025em;
}

.plattform p {
  min-height: 2.9em;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
}

.plattform .knopf {
  margin-top: 6px;
}

.laden-fuss {
  position: relative;
  margin-top: 40px;
  color: var(--text-3);
  font-size: 14px;
}

.laden-fuss .verweis {
  font-size: 14px;
  margin-left: 6px;
}

@media (max-width: 719px) {
  .plattformen {
    grid-template-columns: minmax(0, 1fr);
  }

  .plattform {
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    align-items: center;
    text-align: left;
    column-gap: 16px;
    row-gap: 2px;
    padding: 20px;
  }

  .plattform-symbol {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    margin: 0;
  }

  .plattform h3 {
    font-size: 19px;
  }

  .plattform p {
    grid-column: 2;
    min-height: 0;
  }

  .plattform .knopf {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
  }
}

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

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  padding: 34px 0 calc(34px + env(safe-area-inset-bottom));
}

.fuss-innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  color: var(--text-3);
  font-size: 13px;
}

.fuss .marke {
  font-size: 15px;
  color: var(--text);
}

.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.fuss-links a {
  color: var(--text-2);
}

.fuss-links a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fuss-zeile {
  flex-basis: 100%;
}

/* ── Anleitung nach dem Klick auf Laden ─────────────────────────────── */

.anleitung {
  margin: auto;
  width: min(100% - 32px, 540px);
  max-height: min(100% - 32px, 760px);
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: #151518;
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px var(--linie-2),
    0 50px 120px rgb(0 0 0 / 0.8);
  overflow: auto;
}

.anleitung[open] {
  animation: auftauchen 0.6s var(--feder);
}

.anleitung::backdrop {
  background: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@keyframes auftauchen {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
}

.anleitung-innen {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 34px 30px 30px;
  text-align: center;
}

.anleitung-icon {
  width: 72px;
  height: 72px;
  border-radius: 17px;
}

.anleitung h2 {
  font-size: 28px;
  letter-spacing: -0.03em;
}

.anleitung-schritte {
  counter-reset: schritt;
  display: grid;
  gap: 12px;
  text-align: left;
  width: 100%;
}

.anleitung-schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 14px 16px 14px 54px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.04);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.45;
}

.anleitung-schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 14px;
  top: 13px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(41 151 255 / 0.16);
  color: var(--verweis);
  font-size: 14px;
  font-weight: 700;
}

.anleitung-schritte b {
  color: var(--text);
  font-weight: 600;
}

.anleitung-fuss {
  color: var(--text-3);
  font-size: 13px;
}

.anleitung .knopf {
  min-width: 160px;
}

/* ── Weniger Bewegung ───────────────────────────────────────────────── */

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

  .held {
    height: auto;
  }

  .held-buehne {
    position: relative;
    height: 100svh;
  }

  .satz {
    height: auto;
  }

  .satz-buehne {
    position: relative;
    height: auto;
    padding: 120px 0;
  }

  .js .satz-text .wort {
    color: var(--text);
  }
}