/* elli.website — Nacht, farbiges Licht, Glas.
   Aufbau: Tokens · Grundlagen · Kopf · Hero/Konstellation · Karten · Fuß · Responsiv */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --nacht:      #080b1a;
  --nacht-tief: #05060f;
  --glas:       rgba(255, 255, 255, .055);
  --glas-hell:  rgba(255, 255, 255, .095);
  --kante:      rgba(255, 255, 255, .13);
  --kante-hell: rgba(255, 255, 255, .26);
  --text:       #f0eefb;
  --text-leise: #a6a2c6;

  --cyan:    #46cdf2;
  --violett: #a970ff;
  --pink:    #ff6ab0;
  --gold:    #ffc555;
  --mint:    #3fe0a8;

  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --spur: 1480px;
  --rund: 22px;
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--nacht);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Das farbige Licht hinter dem Glas. Drei weiche Schleier, die langsam wandern. */
.himmel { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.himmel::after {           /* feines Korn, nimmt den Verläufen das Digitale */
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity: .22; mix-blend-mode: overlay;
}
/* Milkdrop-Visualizer: liegt ganz hinten und ist nur zu sehen, solange Musik klingt
   (.musik). Kommt langsam aus der Tiefe (Deckkraft + leichtes Heranzoomen), geht ruhiger.
   Ein dunkler Schleier hält die Schrift lesbar. */
.himmel .viz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.08);
  transition: opacity 2.6s cubic-bezier(.4, 0, .2, 1), transform 2.6s cubic-bezier(.4, 0, .2, 1); }
.himmel::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 2.6s ease;
  background: radial-gradient(130% 90% at 30% 35%, rgba(8, 11, 26, .55), rgba(8, 11, 26, .22) 72%); }
.himmel.tanzt.musik .viz { opacity: 1; transform: scale(1); transition-duration: 4.5s; transition-timing-function: cubic-bezier(.22, .61, .36, 1); }
.himmel.tanzt.musik::before { opacity: 1; transition-duration: 4.5s; }
.himmel.tanzt.musik .schleier { opacity: 0; }
.himmel .schleier { transition: opacity 3s ease; }
.schleier { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; }
.s1 { width: 64vw; height: 58vw; left: -16vw; top: -18vw;  background: radial-gradient(circle, var(--violett), transparent 68%); animation: wandern-a 44s ease-in-out infinite; }
.s2 { width: 56vw; height: 52vw; right: -14vw; top: 8vh;   background: radial-gradient(circle, var(--cyan), transparent 68%);    animation: wandern-b 56s ease-in-out infinite; }
.s3 { width: 60vw; height: 46vw; left: 18vw; bottom: -20vw; background: radial-gradient(circle, var(--pink), transparent 70%);    animation: wandern-c 68s ease-in-out infinite; opacity: .36; }
@keyframes wandern-a { 50% { transform: translate(14vw, 10vh) scale(1.14); } }
@keyframes wandern-b { 50% { transform: translate(-12vw, 16vh) scale(.88); } }
@keyframes wandern-c { 50% { transform: translate(10vw, -12vh) scale(1.1); } }

.spur { position: relative; z-index: 1; max-width: var(--spur); margin: 0 auto; padding: 0 28px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.022em; line-height: 1.04; margin: 0; }
a { color: inherit; }

/* ── Kopfleiste ───────────────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  /* volle Breite, Inhalt trotzdem auf der Spur */
  padding: 15px max(28px, calc((100% - var(--spur)) / 2 + 28px));
}
/* Unschärfe läuft weich nach unten aus, statt an einer Kante abzubrechen */
.kopf::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -44px; z-index: -1; pointer-events: none;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(8, 11, 26, .5), rgba(8, 11, 26, 0));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.wortmarke { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: -.02em; text-decoration: none; }
.wortmarke i { font-style: normal; color: var(--text-leise); font-weight: 400; }

.tonschalter {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 12px; border-radius: 999px;
  background: var(--glas); border: 1px solid var(--kante);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--text-leise); font: inherit; font-size: 13.5px; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.tonschalter:hover { color: var(--text); border-color: var(--kante-hell); background: var(--glas-hell); }
.tonschalter[aria-pressed="true"] { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 45%, transparent); }
/* Fünf Balken, die beim Klingen atmen */
.pegel { display: flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.pegel i { width: 2.5px; border-radius: 2px; background: currentColor; transition: height .3s; }
.pegel i:nth-child(1) { height: 5px; }  .pegel i:nth-child(2) { height: 9px; }
.pegel i:nth-child(3) { height: 13px; } .pegel i:nth-child(4) { height: 8px; }
.pegel i:nth-child(5) { height: 4px; }
.tonschalter.spielt .pegel i { animation: pegeln 1.1s ease-in-out infinite; }
.tonschalter.spielt .pegel i:nth-child(2) { animation-delay: .18s; }
.tonschalter.spielt .pegel i:nth-child(3) { animation-delay: .36s; }
.tonschalter.spielt .pegel i:nth-child(4) { animation-delay: .1s; }
.tonschalter.spielt .pegel i:nth-child(5) { animation-delay: .5s; }
@keyframes pegeln { 50% { height: 14px; } }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px;
  grid-template-areas: "titel stern" "titel absatz";
  padding: 0;
}
/* Kompakt, damit am PC die beiden großen Kacheln ohne Scrollen zu sehen sind:
   Überschrift links unten, Konstellation klein rechts oben, Absatz rechtsbündig darunter. */
.hero-titel { grid-area: titel; align-self: end; position: relative; }
.hero-titel .start { margin-top: 26px; }
.hero .konstellation { grid-area: stern; justify-self: stretch; width: 100%; height: clamp(96px, 15vh, 170px); aspect-ratio: auto; }   /* am PC ein flaches Sternenband */
.hero-absatz { grid-area: absatz; justify-self: end; align-self: end; text-align: right; position: relative; }
.hero h1 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 800; margin: 0; }
.hero h1 em { font-style: normal; display: block; color: transparent;
  background: linear-gradient(104deg, var(--gold), var(--pink) 42%, var(--violett) 72%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; }
.hero-absatz p { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; color: var(--text); max-width: 64ch; margin: 0 0 0 auto; }

.start {
  display: inline-flex; align-items: center; gap: 15px;
  padding: 15px 28px; border-radius: 999px; border: 1px solid var(--kante-hell);
  background: var(--glas-hell); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--text); font-family: var(--display); font-weight: 600; font-size: 16.5px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 40px -14px rgba(169, 112, 255, .6);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}
.start:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); box-shadow: 0 16px 52px -14px rgba(169, 112, 255, .8); }
.start:active { transform: translateY(0); }
.start .funke { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px 1px var(--gold); }

/* Konstellation: ein Licht je Programm */
.konstellation { position: relative; aspect-ratio: 1 / .86; width: 100%; }
.licht {
  position: absolute; translate: -50% -50%;
  width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%;
  background: var(--f); cursor: pointer;
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--f) 55%, transparent);
  animation: pulsen 5s ease-in-out infinite; animation-delay: var(--v, 0s);
  transition: scale .3s cubic-bezier(.2,.8,.2,1);
}
.licht.gross { width: 19px; height: 19px; box-shadow: 0 0 26px 7px color-mix(in srgb, var(--f) 60%, transparent); }
@keyframes pulsen { 50% { opacity: .55; } }
.licht:hover, .licht:focus-visible { scale: 1.5; outline: none; }
.licht::after {                     /* Name, erscheint beim Zeigen */
  content: attr(data-name); position: absolute; left: 50%; top: -34px; translate: -50% 0;
  padding: 5px 11px; border-radius: 9px; white-space: nowrap;
  background: rgba(10, 12, 28, .9); border: 1px solid var(--kante);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--body); font-size: 12.5px; color: var(--text); letter-spacing: 0;
  opacity: 0; transition: opacity .2s, translate .2s; pointer-events: none;
}
.licht:hover::after, .licht:focus-visible::after { opacity: 1; translate: -50% -4px; }
.konstellation svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.konstellation svg path { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1; stroke-dasharray: 3 7; }

/* ── Abschnitte ───────────────────────────────────────────────────────── */
.abschnitt { padding: 56px 0 24px; }
.abschnitt h2 { font-size: clamp(27px, 3.4vw, 37px); margin-bottom: 9px; }
.abschnitt .vorsatz { color: var(--text-leise); max-width: 56ch; margin: 0 0 34px; font-size: 16.5px; }

/* ── Karten, gemeinsam ────────────────────────────────────────────────── */
.feld { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }

.karte {
  --f: var(--cyan);
  /* Die Kacheln sind Knöpfe (sie öffnen das Fenster), brauchen also die
     Browser-Vorgaben für Knöpfe zurückgesetzt: Schrift, Ausrichtung, Rand. */
  font: inherit; color: var(--text); text-align: left; margin: 0; padding: 0; cursor: pointer; width: 100%;
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--rund); overflow: hidden; text-decoration: none;
  background: var(--glas); border: 1px solid var(--kante);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, background .4s;
}
.karte:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--f) 50%, var(--kante)); background: var(--glas-hell); }
.karte:focus-visible { outline: 2px solid var(--f); outline-offset: 4px; }
.karte.leuchtet { animation: angekommen 1.5s cubic-bezier(.2,.8,.2,1); }
@keyframes angekommen {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25%      { box-shadow: 0 0 0 3px color-mix(in srgb, var(--f) 70%, transparent), 0 0 52px 2px color-mix(in srgb, var(--f) 45%, transparent); }
}
/* Lichtschein in der Kartenfarbe, oben hinter dem Glas */
.karte::before {
  content: ""; position: absolute; left: 50%; top: -42%; width: 118%; aspect-ratio: 1; translate: -50% 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--f) 42%, transparent), transparent 62%);
  opacity: .5; transition: opacity .4s; pointer-events: none;
}
.karte:hover::before { opacity: .85; }

.bild { position: relative; overflow: hidden; }
.inhalt { position: relative; padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.karte h3 { font-size: 23px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.karte p { margin: 0 0 18px; font-size: 14.8px; color: var(--text-leise); max-width: 44ch; }
.karte .oeffnen {
  margin-top: auto; align-self: flex-start;
  font-family: var(--display); font-weight: 600; font-size: 14.5px;
  color: var(--f); border-bottom: 1.5px solid color-mix(in srgb, var(--f) 35%, transparent);
  padding-bottom: 2px; transition: border-color .3s;
}
.karte:hover .oeffnen { border-bottom-color: var(--f); }

.beta {
  font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: .02em;
  padding: 2.5px 8px; border-radius: 6px; color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
}

/* ── Orte: fünf große Karten mit eigener Bildwelt ─────────────────────── */
.karte .bild svg, .karte .bild > div { position: absolute; inset: 0; width: 100%; height: 100%; }
.karte { grid-column: span 4; }
.karte .bild { height: 150px; }

/* Die beiden Flagschiffe: halbe Breite, höhere Szene. */
.karte.gross { grid-column: span 6; }
.karte.gross .bild { height: 200px; }
.karte.gross h3 { font-size: 27px; }
.karte.gross p { font-size: 15.5px; }

.o-ellios { --f: var(--mint); }
.o-robin  { --f: #7aa2ff; }
.o-tv     { --f: #ff7a5c; }
.o-micos  { --f: var(--cyan); }
.o-vrwelt { --f: #8b7bff; }

/* Elli OS — Landschaft bei Tag, hinter Glas */
.szene-ellios { background: linear-gradient(176deg, #7fd0ff 0%, #bde9ff 48%, #fff3cf 100%); }
.wolke { animation: ziehen 46s linear infinite; }
.wolke.b { animation-duration: 64s; animation-delay: -24s; }
@keyframes ziehen { from { transform: translateX(-28%); } to { transform: translateX(128%); } }

/* Robin — ein warmes Licht, das atmet */
.szene-robin { background: radial-gradient(128% 96% at 76% 6%, #2a4a7a 0%, #16233f 52%, #0d1526 100%); }
.robin-kern {
  position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff6de, #ffce7d 36%, #f08a46 66%, #a8471f);
  box-shadow: 0 0 0 16px rgba(255, 206, 125, .09), 0 0 0 34px rgba(255, 206, 125, .05), 0 0 72px 14px rgba(255, 170, 90, .4);
  animation: atmen 5.5s ease-in-out infinite;
}
@keyframes atmen { 50% { scale: 1.07; } }

/* Flimmerkiste — ein Holzgerät im dunklen Zimmer: Antenne, Regler, Glasreflex,
   und das Bild wirft farbiges Licht an die Wand dahinter. */
.szene-tv { background: radial-gradient(130% 110% at 50% 118%, #241a14 0%, #17110d 55%, #0d0a08 100%); overflow: hidden; }

/* Das Licht des Schirms auf der Wand */
.tv-licht {
  position: absolute; left: 50%; top: 48%; width: 340px; height: 240px; translate: -50% -50%;
  background: radial-gradient(ellipse, rgba(150, 205, 255, .5) 0%, rgba(120, 160, 255, .22) 38%, transparent 68%);
  filter: blur(26px); animation: tv-puls 5.5s ease-in-out infinite;
}
@keyframes tv-puls { 50% { opacity: .55; transform: scale(1.08); } }

.roehre {
  position: absolute; left: 50%; top: 56%; translate: -50% -50%; z-index: 1;
  width: 168px; height: 124px; border-radius: 15px;
  padding: 10px 34px 10px 10px;
  background: linear-gradient(168deg, #6b4a2f 0%, #4a3220 48%, #332215 100%);
  box-shadow: inset 0 1px 0 rgba(255, 214, 160, .3), inset 0 0 0 1px #2a1b11,
              0 16px 30px -12px #000, 0 2px 0 #241710;
}
/* Holzmaserung */
.roehre::before {
  content: ""; position: absolute; inset: 0; border-radius: 15px; pointer-events: none;
  background: repeating-linear-gradient(94deg, rgba(0,0,0,.14) 0 1px, transparent 1px 7px);
  opacity: .5;
}
/* Zwei Drehregler und eine Kontrollleuchte rechts */
.roehre::after {
  content: ""; position: absolute; right: 10px; top: 20px; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9a677, #6b5338 70%, #3d2d1c);
  box-shadow: 0 25px 0 -1px #6b5338, 0 25px 0 -1px rgba(0,0,0,.4),
              inset 0 1px 0 rgba(255,236,200,.5),
              0 52px 0 -5px #ffb34a, 0 52px 7px -5px rgba(255, 150, 40, .85);
}
/* Zimmerantenne */
.antenne {
  position: absolute; left: 50%; bottom: 72%; width: 96px; height: 40px; translate: -50% 0;
  pointer-events: none; z-index: 0;
}
.antenne i {
  position: absolute; bottom: 0; left: 50%; width: 2px; height: 40px; border-radius: 2px;
  background: linear-gradient(180deg, #c0a884, #6a5a48);
  transform-origin: bottom center;
}
.antenne i::after {
  content: ""; position: absolute; top: -3px; left: -1.5px;
  width: 5px; height: 5px; border-radius: 50%; background: #d8c19a;
}
.antenne i:first-child { rotate: -34deg; }
.antenne i:last-child { rotate: 34deg; }

.schirm {
  width: 100%; height: 100%; border-radius: 12px / 16px; overflow: hidden; position: relative;
  background: linear-gradient(90deg, #efefef 0 14.28%, #f1e23a 0 28.56%, #3ddfe5 0 42.84%, #37d549 0 57.12%, #e33ae5 0 71.4%, #e7353a 0 85.68%, #2e3ae5 0);
  filter: saturate(.82) brightness(1.05);
  box-shadow: inset 0 0 14px 4px rgba(0, 0, 0, .55);
}
/* Zeilenraster, Vignette und das feine Zittern der Röhre */
.schirm::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 46%, rgba(0,0,0,.62));
  animation: flimmern .13s steps(2) infinite;
}
/* Eine helle Zeile, die langsam durchs Bild wandert (Bildfang) */
.schirm::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18px; z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.16) 45%, transparent);
  animation: bildfang 7s linear infinite;
}
@keyframes flimmern { 50% { opacity: .84; } }
@keyframes bildfang { from { top: -18px; } to { top: 124px; } }

/* Glasreflex über der Röhre */
.glasreflex {
  position: absolute; left: 10px; top: 10px; right: 34px; bottom: 10px; z-index: 4;
  border-radius: 12px / 16px; pointer-events: none;
  background: linear-gradient(128deg, rgba(255,255,255,.17) 0 26%, transparent 42%);
}

/* Welt der Wünsche — Nacht auf der Lichtung: der Gott leuchtet, zwei Stimmkristalle schweben,
   Wunschfunken steigen auf. Alle Teile unter .szene-vrwelt (kurze Klassennamen kollidieren leicht). */
.szene-vrwelt {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(130% 90% at 50% 100%, #1f3b2a 0%, #16213f 48%, #0c0f24 100%);
}
.szene-vrwelt .vw-stern {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 1px rgba(255,255,255,.7); animation: vw-funkeln 3s ease-in-out infinite;
}
@keyframes vw-funkeln { 50% { opacity: .25; transform: scale(.6); } }
.szene-vrwelt .vw-boden {
  position: absolute; left: 50%; bottom: -34px; width: 220px; height: 90px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, #4f8a3f 0%, #2f5a30 60%, transparent 100%);
}
.szene-vrwelt .vw-ring {
  position: absolute; left: 50%; bottom: 16px; width: 92px; height: 30px; transform: translateX(-50%);
  border-radius: 50%; border: 2px solid rgba(201,184,255,.55); box-shadow: 0 0 18px rgba(201,184,255,.35);
  animation: vw-ring 3s ease-in-out infinite;
}
@keyframes vw-ring { 50% { transform: translateX(-50%) scale(1.08); opacity: .7; } }
.szene-vrwelt .vw-baum {
  --h: 58px; position: absolute; bottom: 18px; width: calc(var(--h) * .62); height: var(--h);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #2f6b3a, #1d4a2a);
}
.szene-vrwelt .vw-baum.hinten { bottom: 26px; opacity: .55; filter: blur(.4px); }
.szene-vrwelt .vw-baum.vorn { --h: 86px; bottom: 6px; background: linear-gradient(180deg, #1c3d25, #0f2416); transform-origin: 50% 100%; animation: vw-wiegen 5s ease-in-out infinite; }
@keyframes vw-wiegen { 50% { transform: rotate(1.6deg); } }
.szene-vrwelt .vw-gott {
  position: absolute; left: 50%; bottom: 24px; width: 30px; height: 56px; transform: translateX(-50%);
  clip-path: polygon(50% 0, 78% 22%, 100% 100%, 0 100%, 22% 22%);
  background: linear-gradient(180deg, #fff7e0, #c9b8ff 70%, #8f7bff);
  filter: drop-shadow(0 0 14px rgba(255,233,168,.75)); animation: vw-atmen 2.6s ease-in-out infinite;
}
.szene-vrwelt .vw-gott i {
  position: absolute; left: 50%; top: -10px; width: 14px; height: 14px; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 40% 35%, #fff, #ffe9a8); box-shadow: 0 0 12px 3px rgba(255,233,168,.8);
}
@keyframes vw-atmen { 50% { transform: translateX(-50%) translateY(-4px); filter: drop-shadow(0 0 22px rgba(255,233,168,1)); } }
.szene-vrwelt .vw-kristall {
  position: absolute; bottom: 44px; width: 14px; height: 22px; border-radius: 3px;
  clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%);
  animation: vw-schweben 3.4s ease-in-out infinite;
}
.szene-vrwelt .vw-kristall.ja { left: calc(50% - 46px); background: linear-gradient(180deg, #c6ffd9, #4fc47e); filter: drop-shadow(0 0 8px rgba(126,226,160,.9)); }
.szene-vrwelt .vw-kristall.nein { left: calc(50% + 32px); background: linear-gradient(180deg, #ffd0d0, #e06262); filter: drop-shadow(0 0 8px rgba(255,140,140,.9)); animation-delay: 1.1s; }
@keyframes vw-schweben { 50% { transform: translateY(-9px) rotate(8deg); } }
.szene-vrwelt .vw-funke {
  position: absolute; left: calc(50% + var(--x)); bottom: 40px; width: 4px; height: 4px; border-radius: 50%;
  background: #ffe9a8; box-shadow: 0 0 6px 1px rgba(255,233,168,.9); opacity: 0;
  animation: vw-aufsteigen 4.2s ease-out infinite;
}
@keyframes vw-aufsteigen { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-92px) translateX(calc(var(--x) * -.3)) scale(1.1); } }
.vw-live { color: var(--f); font-weight: 700; }

.o-spiele { --f: #5ad6a0; }

/* ── Die Werkzeug-Karten: Farbe je Programm ──────────────────────────── */
.werkzeug .bild { display: grid; place-items: center; }
.w-zauberpinsel { --f: var(--gold); }
.w-pixelanim    { --f: var(--pink); }
.w-animframe    { --f: #ff9a4d; }
.w-videoeditor  { --f: #ff5f6d; }
.w-daw          { --f: var(--violett); }
.w-jamsync      { --f: #e86bff; }
.w-papengine    { --f: #ff7e9d; }

/* Jedes Werkzeug zeigt sein Handwerk in Bewegung — nicht bloß ein Symbol. */
.werkzeug .bild { background: linear-gradient(170deg, rgba(255,255,255,.05), transparent 70%); }
.szene { position: absolute; inset: 0; display: grid; place-items: center; }


/* ── Fuß ──────────────────────────────────────────────────────────────── */
.fuss {
  position: relative; margin-top: 72px; padding: 34px 0 56px;
  border-top: 1px solid var(--kante);
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; align-items: center;
  color: var(--text-leise); font-size: 14px;
}
.fuss nav { display: flex; gap: 22px; flex-wrap: wrap; }
.fuss a { text-decoration: none; opacity: .85; }
.fuss a:hover { opacity: 1; color: var(--text); }

/* ── Formate ──────────────────────────────────────────────────────────────
   Breit: drei Karten je Reihe, die beiden Flagschiffe zu zweit.
   Mittel: zwei je Reihe. Hoch: eine Spalte.
   Handy quer: flacher Kopf, damit über der Faltkante etwas zu sehen bleibt. */
/* Große Bildschirme: alles wächst mit, statt links und rechts leer zu bleiben.
   zoom skaliert Schrift, Kacheln und Abstände gemeinsam. */
@media (min-width: 1500px) { body { zoom: 1.12; } }
@media (min-width: 1800px) { body { zoom: 1.25; } }
@media (min-width: 2300px) { body { zoom: 1.5; } }

@media (max-width: 1000px) {
  .karte { grid-column: span 6; }
  .karte.gross { grid-column: span 12; }
  .karte.gross .bild { height: 208px; }
  .hero { grid-template-columns: 1fr; grid-template-areas: "stern" "titel" "absatz"; gap: 20px; padding-top: 16px; }
  .hero .konstellation { justify-self: center; height: auto; width: 100%; aspect-ratio: 1 / .86; }
  .hero-absatz { justify-self: start; text-align: left; }
  .hero-absatz p { margin: 0; }
  .konstellation { max-width: 430px; margin: 0 auto; order: -1; }
}

@media (max-width: 620px) {
  .spur, .kopf { padding-left: 16px; padding-right: 16px; }
  .kopf::before { bottom: -30px; }
  .wortmarke { font-size: 30px; }
  .feld { gap: 13px; }
  .karte, .karte.gross { grid-column: span 12; }
  .karte .bild { height: 142px; }
  .karte.gross .bild { height: 178px; }
  .karte h3, .karte.gross h3 { font-size: 21px; }
  .karte p, .karte.gross p { font-size: 14px; }
  .abschnitt { padding-top: 38px; }
  .licht::after { font-size: 11.5px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 0; padding: 16px 0 26px; }
  .hero h1 { font-size: clamp(27px, 4.4vw, 42px); margin-bottom: 12px; }
  .hero-absatz p { font-size: 15px; }
  .konstellation { max-width: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ── Das erweiterte Fenster ───────────────────────────────────────────────
   Die Kacheln bleiben abstrakt; wer mehr wissen will, tippt eine an und
   bekommt hier das echte Bild, den ganzen Text und den Weg hinein. */
.fenster {
  width: min(680px, 92vw); max-height: 88vh; padding: 0; border: 0;
  border-radius: 26px; overflow: hidden; color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--f, var(--cyan)) 13%, #10142a), #0b0e1c 42%);
  box-shadow: 0 40px 90px -30px #000, 0 0 0 1px var(--kante-hell);
}
.fenster::backdrop { background: rgba(5, 7, 16, .74); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.fenster[open] { animation: fenster-auf .3s cubic-bezier(.2,.8,.2,1); }
@keyframes fenster-auf { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.fenster-innen { display: flex; flex-direction: column; max-height: 88vh; }

.f-bild {
  position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden;
  background: #0b0e1c; border-bottom: 1px solid var(--kante);
}
.f-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.f-bild.leer { display: grid; place-items: center; }

.f-zu {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--kante-hell); background: rgba(10, 13, 28, .72);
  color: var(--text); font-size: 19px; line-height: 1;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.f-zu:hover { background: rgba(10, 13, 28, .92); }

.f-text { padding: 22px 26px 26px; overflow-y: auto; }
.f-text h2 {
  font-family: var(--display); font-weight: 700; font-size: 27px; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0 0 4px;
}
.f-art { color: var(--text-leise); font-size: 13.5px; margin: 0 0 14px; }
.f-text p.lang { color: var(--text-leise); font-size: 15.5px; margin: 0 0 20px; }
.f-knoepfe { display: flex; gap: 11px; flex-wrap: wrap; }
.f-los {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; text-decoration: none; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 16px;
  background: var(--f, var(--cyan)); color: #0a0d1a; border: 0;
  box-shadow: 0 10px 28px -12px var(--f, var(--cyan));
  transition: transform .2s, box-shadow .2s;
}
.f-los:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px var(--f, var(--cyan)); }
.f-los.aus { background: var(--glas-hell); color: var(--text-leise); box-shadow: none; cursor: default; }
.f-los.aus:hover { transform: none; }

@media (max-width: 620px) {
  .fenster { width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 22px 22px 0 0; margin: auto 0 0; }
  .fenster-innen { max-height: 92vh; }
  .f-text { padding: 18px 18px 24px; }
  .f-text h2 { font-size: 23px; }
  .f-text p.lang { font-size: 14.8px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  /* Quer: Bild links, Text rechts — sonst passt nichts auf den flachen Schirm. */
  .fenster { width: min(820px, 94vw); max-height: 94vh; }
  .fenster-innen { flex-direction: row; max-height: 94vh; }
  .f-bild { flex: 0 0 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--kante); }
  .f-text { padding: 18px 20px; }
  .f-text h2 { font-size: 21px; }
  .f-text p.lang { font-size: 14px; margin-bottom: 14px; }
}

/* Die Marke im Fenstertitel etwas größer als auf der Kachel */
.f-text h2 .beta { font-size: 12.5px; padding: 3px 9px; }

/* Kleiner Hinweis am Öffnen-Knopf: es geht in einem neuen Tab weiter. */
.f-los:not(.aus)::after { content: "↗"; font-size: 15px; line-height: 1; opacity: .8; }

/* ── Der Mensch dahinter ─────────────────────────────────────────────────
   Aufbau wie auf robin.elli.website: eine ruhige Karte, Ich-Form, Initiale in
   Gold, Gruß und P.S. — dazu eine kleine Klaviatur, weil er Musiker ist.  */
.mensch { padding-top: clamp(56px, 9vh, 96px); }
.mensch-karte {
  max-width: 720px; margin: 0 auto; padding: clamp(26px, 4vw, 44px);
  border-radius: 26px; background: var(--glas); border: 1px solid var(--kante);
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  position: relative; overflow: hidden;
}
.mensch-karte::before {
  content: ""; position: absolute; right: -20%; top: -40%; width: 70%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, transparent), transparent 64%);
}
.mensch-karte h2 { position: relative; font-size: clamp(25px, 3.4vw, 34px); margin-bottom: 22px; text-wrap: balance; }
.mensch-karte h2 em {
  font-style: normal; color: transparent;
  background: linear-gradient(104deg, var(--gold), var(--pink) 60%, var(--violett));
  -webkit-background-clip: text; background-clip: text;
}
.mensch-karte p { position: relative; margin: 0 0 15px; color: var(--text-leise); font-size: 16.5px; line-height: 1.72; max-width: 62ch; }
.mensch-karte p.initial::first-letter {
  font-family: var(--display); font-weight: 800; float: left;
  font-size: 3.4em; line-height: .82; margin: .06em .12em 0 0; color: var(--gold);
}
.mensch-karte .gruss { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--text); margin: 22px 0 4px; }
.mensch-karte .ps { font-size: 14px; font-style: italic; color: var(--text-leise); opacity: .85; }

.mensch-fuss {
  position: relative; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--kante);
  display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap;
}

/* Die Klaviatur: weiße Tasten im Zeilenfluss, schwarze darüber an der Fuge. */
.klaviatur {
  --w: 27px;
  position: relative; font-size: 0; white-space: nowrap; touch-action: none;
  padding: 6px 6px 0; border-radius: 10px 10px 8px 8px;
  background: linear-gradient(180deg, #2a1d14, #17100b); box-shadow: 0 10px 24px -12px #000, inset 0 1px 0 rgba(255,255,255,.08);
}
.klaviatur button { border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.klaviatur .weiss {
  display: inline-block; vertical-align: top; width: var(--w); height: 86px; margin-right: 1px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #e9e4d8 0%, #fdfbf4 18%, #f6f1e5 100%);
  box-shadow: inset 0 -5px 0 #d7d0bf, 0 2px 0 rgba(0,0,0,.35);
  transition: transform .06s, box-shadow .06s, background .2s;
}
.klaviatur .schwarz {
  position: absolute; top: 6px; width: calc(var(--w) * .63); height: 54px; margin-left: calc(var(--w) * -.315 - .5px); z-index: 2;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #1b1b22 0%, #34343f 82%, #1b1b22 100%);
  box-shadow: inset 0 -4px 0 #0c0c10, inset 1px 0 0 rgba(255,255,255,.12), 0 3px 4px rgba(0,0,0,.5);
  transition: transform .06s, box-shadow .06s;
}
.klaviatur .weiss.an { transform: translateY(calc(1px + 2.5px * var(--anschlag, .7))); box-shadow: inset 0 -2px 0 #d7d0bf, 0 0 calc(6px + 22px * var(--anschlag, .7)) -2px var(--gold); background: linear-gradient(180deg, #f3e2b4, #fff6d8 30%, #f6ecd2); }
.klaviatur .schwarz.an { transform: translateY(calc(1px + 2px * var(--anschlag, .7))); box-shadow: inset 0 -1px 0 #0c0c10, 0 0 calc(4px + 20px * var(--anschlag, .7)) 0 var(--violett); }
.klaviatur button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.start.schreib { flex: none; }

/* ── Kontaktfenster ───────────────────────────────────────────────────── */
.fenster.kontakt { --f: var(--gold); width: min(560px, 92vw); }
.kontakt-innen { position: relative; display: flex; flex-direction: column; gap: 13px; padding: 28px 28px 26px; margin: 0; }
.kontakt-innen h2 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.02em; margin: 0; }
.kontakt-innen .f-art { margin: -6px 0 6px; }
.kontakt-innen label { display: block; font-size: 14px; color: var(--text); }
.kontakt-innen label span { color: var(--text-leise); font-size: 12.5px; }
.kontakt-innen input, .kontakt-innen textarea {
  display: block; width: 100%; margin-top: 6px; box-sizing: border-box;
  font: inherit; font-size: 15.5px; color: var(--text); resize: vertical;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--kante);
  background: rgba(255, 255, 255, .05); transition: border-color .2s, background .2s;
}
.kontakt-innen input:focus, .kontakt-innen textarea:focus { outline: none; border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: rgba(255, 255, 255, .08); }
.kontakt-innen .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kontakt-innen .f-knoepfe { align-items: center; margin-top: 6px; }
.kontakt-innen .f-los { border: 0; }
.kontakt-innen .f-los:disabled { opacity: .55; cursor: progress; }
.kontakt-innen .f-los::after { content: none; }
.k-status { font-size: 14px; color: var(--text-leise); }
.kontakt-innen .f-zu { top: 16px; right: 16px; }

@media (max-width: 620px) {
  .mensch-karte p { font-size: 15.5px; }
  .mensch-fuss { justify-content: center; }
  /* 15 weiße Tasten passen in die Karte: Bildschirm minus Rand, Kartenpolster und Holzrahmen */
  .klaviatur { --w: min(24px, calc((100vw - 96px) / 15 - 1px)); }
  .klaviatur .weiss { height: 78px; }
  .klaviatur .schwarz { height: 48px; }
  .fenster.kontakt { width: 100vw; }
  .kontakt-innen { padding: 24px 18px 22px; }
}
.himmel.tanzt.musik::after { display: none; }   /* Korn weg, spart Rechenzeit über dem bewegten Bild */

/* Die großen Kacheln rücken dicht an den Kopf */
#programme { padding-top: 16px; }
.abschnitt.weitere { padding-top: 26px; }

/* Niedrige Laptop-Bildschirme: Kopf noch flacher, damit die großen Kacheln oben bleiben */
@media (min-width: 1001px) and (max-height: 820px) {
  .hero h1 { font-size: clamp(34px, 3.8vw, 52px); }
  .hero-absatz p { font-size: 15.5px; line-height: 1.5; }
  .hero .konstellation { height: 92px; }
  .karte.gross .bild { height: 170px; }
}

/* ── Sprachwahl: dieselbe Glas-Pille wie der Musikschalter, Globus + Kürzel ──
   Das Menü ist ein Glas-Panel; jede Sprache trägt eine Farbe aus der Konstellation,
   die gewählte steht im Farbverlauf der Überschrift. */
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
.sprachwahl { position: relative; --sf: var(--gold); }
.sprachwahl > summary { list-style: none; cursor: pointer; }
.sprachwahl > summary::-webkit-details-marker { display: none; }
.sprachwahl-knopf {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 999px;
  background: var(--glas); border: 1px solid var(--kante); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--text-leise); font-size: 13.5px; letter-spacing: .06em; user-select: none;
  transition: color .2s, border-color .2s, background .2s, box-shadow .3s;
}
.sprachwahl-knopf:hover, .sprachwahl[open] .sprachwahl-knopf { color: var(--text); border-color: var(--kante-hell); background: var(--glas-hell); }
.sprachwahl[open] .sprachwahl-knopf { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf) 22%, transparent), 0 8px 26px -10px var(--sf); }
.sprachwahl-knopf:focus-visible { outline: 2px solid var(--sf); outline-offset: 2px; }
.sprachwahl .flagge { flex: none; width: 21px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 6px -2px rgba(0, 0, 0, .5); }
.sprachwahl-knopf .flagge { width: 19px; height: 13px; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.sprachwahl-knopf:hover .flagge, .sprachwahl[open] .sprachwahl-knopf .flagge { transform: rotate(-6deg) scale(1.08); }
.sprachwahl-globus { width: 15px; height: 15px; fill: none; stroke: var(--sf); stroke-width: 1.6; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.sprachwahl-knopf:hover .sprachwahl-globus, .sprachwahl[open] .sprachwahl-globus { transform: rotate(-24deg); }
.sprachwahl-kurz { font-weight: 700; }
.sprachwahl-pfeil { width: 6px; height: 6px; margin-left: 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .6; transition: transform .25s; }
.sprachwahl[open] .sprachwahl-pfeil { transform: translateY(1px) rotate(-135deg); }

.sprachwahl-liste {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; min-width: 200px; padding: 7px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 18px; border: 1px solid var(--kante-hell);
  background: rgba(14, 17, 36, .8); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform-origin: top right; animation: sprachwahl-auf .28s cubic-bezier(.2, .9, .3, 1.15) both;
}
@keyframes sprachwahl-auf { from { opacity: 0; transform: translateY(-6px) scale(.95); } }
.sprachwahl-liste button {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 0; border-radius: 12px; background: none;
  color: var(--text-leise); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
  animation: sprachwahl-eintrag .32s ease both; animation-delay: calc(var(--i) * 24ms);
  transition: background .2s, color .2s, transform .2s;
}
@keyframes sprachwahl-eintrag { from { opacity: 0; transform: translateX(8px); } }
.sprachwahl-liste button:hover, .sprachwahl-liste button:focus-visible { background: var(--glas-hell); color: var(--text); transform: translateX(-2px); outline: none; }
.sprachwahl-chip {
  flex: none; width: 30px; padding: 4px 0; border-radius: 8px; text-align: center;
  font: 700 11px/1 ui-monospace, monospace; letter-spacing: .06em; color: var(--sf);
  background: color-mix(in srgb, var(--sf) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf) 35%, transparent);
}
.sprachwahl-name { flex: 1; }
.sprachwahl-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--sf); box-shadow: 0 0 10px var(--sf); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s; }
.sprachwahl-liste button.aktiv { color: var(--text); background: rgba(255, 255, 255, .06); }
.sprachwahl-liste button.aktiv .sprachwahl-name { font-weight: 700; color: transparent;
  background: linear-gradient(104deg, var(--gold), var(--pink) 50%, var(--violett)); -webkit-background-clip: text; background-clip: text; }
.sprachwahl-chip { opacity: .7; transition: opacity .2s, box-shadow .25s; }
.sprachwahl-liste button:hover .sprachwahl-chip { opacity: 1; }
.sprachwahl-liste button.aktiv .sprachwahl-chip { opacity: 1; box-shadow: inset 0 0 0 1px var(--sf), 0 0 12px -2px var(--sf); }
html.sprache-laedt body { opacity: 0; }
body { transition: opacity .25s ease; }
@media (max-width: 620px) {
  .kopf-rechts { gap: 6px; }
  .sprachwahl-knopf { padding: 8px 11px 8px 10px; }
  .tonschalter .beschriftung { display: none; }   /* am Handy reicht der Pegel als Musikknopf */
}

/* Chinesisch/Japanisch: gute Systemschriften zuerst, keine enge Laufweite */
html:lang(ja) { --body: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif; }
html:lang(zh) { --body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif; }
html:lang(ja) :is(h1, h2, h3, .reise-wort), html:lang(zh) :is(h1, h2, h3, .reise-wort) { letter-spacing: 0; }

/* ── Kino-Modus: nur noch der Visualizer ──
   Beim Ziehen über den oberen Rand folgt der Inhalt (--zug 0..1) und wird blasser;
   in .kino ist er ganz ausgeblendet, der Abdunkel-Schleier auch. */
html.zieht .spur, html.zieht .kopf { translate: 0 calc(var(--zug) * 48px); opacity: calc(1 - var(--zug) * .6); transition: none; }
html.zug-zurueck .spur, html.zug-zurueck .kopf { transition: translate .4s cubic-bezier(.2, .9, .3, 1.2), opacity .4s ease; }
html.kino .spur, html.kino .kopf { translate: 0 90px; opacity: 0; pointer-events: none; filter: blur(6px);
  transition: translate 1.2s cubic-bezier(.2, .8, .2, 1), opacity 1s ease, filter 1.2s ease; }
.spur, .kopf { transition: translate 1s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter 1s ease; }
html.kino .himmel::before { opacity: 0 !important; transition: opacity 1.4s ease; }
html.kino, html.kino body { overscroll-behavior-y: none; cursor: none; }
html.zieht { overscroll-behavior-y: none; }

/* ── Handy + laufender Visualizer: keine Glas-Unschärfe ──
   Über einem bewegten Hintergrund muss jede backdrop-filter-Fläche in jedem Bild neu
   unscharf gerechnet werden; das kostet Handys die Flüssigkeit. Stattdessen ruhige,
   etwas deckendere Flächen – optisch fast gleich, für die Grafik fast kostenlos. */
@media (pointer: coarse) {
  .himmel.tanzt.musik ~ .kopf::before { backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, rgba(8, 11, 26, .82), rgba(8, 11, 26, .45) 60%, rgba(8, 11, 26, 0)); }
  .himmel.tanzt.musik ~ .kopf :is(.tonschalter, .sprachwahl-knopf, .sprachwahl-liste),
  .himmel.tanzt.musik ~ .spur .start { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(20, 24, 48, .78); }
  .himmel.tanzt.musik ~ .spur :is(.karte, .mensch-karte) { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15, 18, 38, .8); }
  .himmel.tanzt.musik ~ .spur .licht::after { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Im Vollbild-Modus den unsichtbaren Inhalt nach dem Ausblenden ganz aus dem Zeichnen nehmen */
html.kino .spur, html.kino .kopf { visibility: hidden; transition: translate 1.2s cubic-bezier(.2, .8, .2, 1), opacity 1s ease, filter 1.2s ease, visibility 0s linear 1.2s; }

/* ── Handy: erster Bildschirm und Tippziele ── */
@media (max-width: 1000px) {
  /* Konstellation als flaches Sternenband wie am PC, damit Begrüßung und Reise-Knopf
     schon im ersten Bildschirm stehen */
  .hero .konstellation { aspect-ratio: auto; height: clamp(150px, 27vh, 250px); max-width: none; width: 100%; }
  .hero { gap: 14px; }
}
@media (pointer: coarse) {
  .tonschalter, .sprachwahl-knopf { min-height: 44px; }
  .tonschalter { min-width: 48px; justify-content: center; }
  .sprachwahl-liste button { min-height: 44px; }
  .fuss nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
}

/* ── Milkdrop läuft: Lesbarkeit vor Glas ──
   Über grellen Presets wird das helle Glas selbst hell, und grauer Text verschwimmt.
   Darum, sobald der Visualizer zu sehen ist: dunkler, halbtransparenter Grund für
   Kacheln und Karten, hellere Nebentexte, dunklere Kopfleiste, Knöpfe und Textflecken. */
.karte, .mensch-karte, .tonschalter, .sprachwahl-knopf, .start, .karte p { transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, background 1.2s ease, color 1.2s ease; }
.himmel.tanzt.musik ~ .spur :is(.karte, .mensch-karte) { background: rgba(8, 10, 24, .73); border-color: rgba(255, 255, 255, .14); }
.himmel.tanzt.musik ~ .spur .karte:hover { background: rgba(12, 14, 32, .8); }
.himmel.tanzt.musik ~ .spur :is(.karte p, .mensch-karte p) { color: #d6d3ec; }
.himmel.tanzt.musik ~ .kopf::before { background: linear-gradient(180deg, rgba(6, 8, 20, .78), rgba(6, 8, 20, .35) 65%, rgba(6, 8, 20, 0)); }
.himmel.tanzt.musik ~ .kopf :is(.tonschalter, .sprachwahl-knopf),
.himmel.tanzt.musik ~ .spur .start { background-color: rgba(10, 12, 28, .66); }
.himmel.tanzt.musik ~ .spur :is(.hero-titel, .hero-absatz, .fuss)::before {
  background: radial-gradient(closest-side, rgba(4, 6, 16, .9), rgba(4, 6, 16, .66) 55%, transparent); }
.himmel.tanzt.musik ~ .spur .hero-absatz p { text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 0 18px rgba(4, 6, 16, .8); }
.himmel.tanzt.musik ~ .spur .fuss { color: #c9c6e2; }
@media (pointer: coarse) {
  .himmel.tanzt.musik ~ .spur :is(.karte, .mensch-karte) { background: rgba(8, 10, 24, .82); }
}

/* Markenschriftzug wie im Programm selbst: NEBULA in der Kachelfarbe, DAW hell */
.marke { color: var(--f); letter-spacing: .01em; }
.marke span { color: var(--text); }