/* ==========================================================================
   LUNTRO.DE – STARTSEITE „Ein Abend mit Luntro“
   Leitbild: die Lunte. Sie glüht im Kopfbereich auf und brennt beim
   Scrollen durch den Abend. Farben und Schriften wie in der App
   (src/styles/tokens.js). Bewegung nur über transform/opacity, damit es
   auch auf dem Handy flüssig bleibt; „Bewegung reduzieren“ wird beachtet.
   ========================================================================== */
:root {
  --ink: #0B0B10;
  --flaeche: #15151C;
  --erhoeht: #1E1E27;
  --linie: #2A2A35;
  --rot: #FF4D5E;      /* Notruf, wie brand.danger in der App */
  --warn: #FFB020;     /* Warnung (Not-Code), wie brand.warning in der App */
  --mint: #2EE6A8;
  --schnur: #3b3631;
  --schnur-2: #27231f;
  --rand-seite: max(16px, calc((100% - 1200px) / 2));
  --feder: cubic-bezier(.34, 1.56, .64, 1);
}

html { scroll-behavior: smooth; }
/* Nichts darf seitlich überstehen (sonst wackelt die Seite in Safari beim Scrollen).
   clip statt hidden: die feste Kopfleiste und das feste Handy bleiben kleben. */
html:has(body.start), body.start { overflow-x: clip; }
.start main > section { overflow-x: clip; }
body.start main.breit { max-width: none; padding: 0; }
.start section[id] { scroll-margin-top: 72px; }
.start :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
.start h2 {
  font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(42px, 7vw, 100px); line-height: .95; letter-spacing: -.04em; margin: 0 0 20px;
}
.gross-text { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--text-2); max-width: 32em; margin: 0; }

/* --- Himmel: färbt sich während des Abends (nur Deckkraft, sehr leise) ---- */
.himmel { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.himmel i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.h-daemmerung { background: radial-gradient(70% 55% at 85% 0%, rgba(255, 90, 31, .16), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(123, 92, 255, .12), transparent 70%); }
.h-nacht { background: radial-gradient(80% 60% at 70% 0%, rgba(70, 48, 255, .16), transparent 70%); }
.h-party { background: radial-gradient(55% 45% at 80% 30%, rgba(255, 46, 139, .13), transparent 70%), radial-gradient(50% 40% at 10% 80%, rgba(200, 255, 46, .08), transparent 70%), radial-gradient(70% 50% at 50% 0%, rgba(123, 92, 255, .14), transparent 70%); }
.h-spaet { background: radial-gradient(80% 60% at 30% 0%, rgba(30, 77, 255, .13), transparent 70%); }
.h-morgen { background: radial-gradient(80% 55% at 70% 0%, rgba(255, 178, 122, .16), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(143, 211, 255, .08), transparent 70%); }
body[data-himmel="daemmerung"] .h-daemmerung,
body[data-himmel="nacht"] .h-nacht,
body[data-himmel="party"] .h-party,
body[data-himmel="spaet"] .h-spaet,
body[data-himmel="morgen"] .h-morgen { opacity: 1; }
/* Während des Beispiel-Notrufs färbt sich der ganze Hintergrund rot (home.js setzt data-alarm) */
.h-alarm { background: radial-gradient(70% 60% at 50% 45%, rgba(255, 77, 94, .26), transparent 70%); transition-duration: .5s; }
body[data-alarm] .h-alarm { opacity: 1; }
.js:not(.ruhig) body[data-alarm] .h-alarm { animation: h-puls 1s ease-in-out infinite alternate; }
@keyframes h-puls { from { opacity: .55; } to { opacity: 1; } }

/* --- Funkenflug: Glut im Hintergrund der ganzen Seite (home.js zeichnet) ----
   Liegt über dem Himmel, hinter allem Inhalt; nimmt keine Klicks an. */
.funken { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; }
.js:not(.ruhig) .funken { display: block; }

/* --- Kopf -------------------------------------------------------------------- */
.kopf.kopf-start {
  position: sticky; top: 0; z-index: 50; max-width: none; margin: 0;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--rand-seite);
  background: rgba(11, 11, 16, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.kopf-start.schatten { border-bottom-color: rgba(255, 255, 255, .07); }
/* Vor dem Abbrennen: nur die Zündschnur, noch kein L und kein Funke */
.kopf-start .wortmarke span { display: inline-block; }

/* Weiches Scrollen (Lenis, MIT) – nötige Regeln aus lenis.css */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Überschriften zünden beim Scrollen Wort für Wort (home.js) */
.zw { display: inline-block; }
.js .zuend-h .zw { opacity: .18; }
.kopf-nav { margin-left: auto; display: flex; gap: 24px; }
.kopf-nav a { color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 0; }
.kopf-nav a:hover { color: var(--text); }
.kopf-status {
  font-size: 13px; font-weight: 600; color: var(--lime); white-space: nowrap;
  border: 1px solid rgba(200, 255, 46, .4); border-radius: 999px; padding: 6px 12px;
}
@media (max-width: 759px) {
  .kopf-nav { display: none; }
  .kopf-status { margin-left: auto; }
}

/* --- Lebendige Kleinteile ---------------------------------------------------- */
.live-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); position: relative; flex: none; display: inline-block; }
.live-punkt::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--lime); animation: puls 1.6s ease-out infinite; }
@keyframes puls { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }

.funke {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, #eaffa6 32%, rgba(200, 255, 46, .7) 50%, transparent 70%);
  box-shadow: 0 0 18px 6px rgba(200, 255, 46, .45), 0 0 46px 16px rgba(200, 255, 46, .14);
  pointer-events: none; will-change: transform;
}
.funke::before, .funke::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%;
  background: #f3ffcf; animation: funkeln .7s ease-out infinite;
}
.funke::after { animation-duration: .9s; animation-delay: .25s; --fx: -14px; }
@keyframes funkeln {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--fx, 13px), -16px) scale(.2); opacity: 0; }
}

.schnur { background: repeating-linear-gradient(135deg, var(--schnur) 0 5px, var(--schnur-2) 5px 10px); }

/* --- Startbereich ------------------------------------------------------------ */
.held-start {
  position: relative; display: grid; gap: 40px; align-items: center;
  padding: clamp(32px, 6vh, 72px) var(--rand-seite) 72px;
  min-height: calc(100svh - 64px);
  overflow: hidden; overflow: clip;
}
.held-start::before, .held-start::after {
  content: ''; position: absolute; top: -20%; width: 70vmax; height: 120%; pointer-events: none; z-index: -1;
  transform-origin: 50% 0; opacity: .5;
}
.held-start::before { left: -10%; background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgba(200, 255, 46, .10) 12deg, transparent 26deg); animation: kegel 14s ease-in-out infinite alternate; }
.held-start::after { right: -18%; background: conic-gradient(from 176deg at 50% 0%, transparent 0deg, rgba(123, 92, 255, .16) 14deg, transparent 30deg); animation: kegel 17s ease-in-out infinite alternate-reverse; }
@keyframes kegel { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }

.zuend {
  font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(54px, 14.6vw, 132px); line-height: .9; letter-spacing: -.045em; margin: 0;
}
.zuend { transform-origin: 0 60%; will-change: transform, opacity; }
.hw, .hw-i { display: inline-block; }
.js .hw-i { opacity: .16; }
.held-lunte { position: relative; height: 4px; width: min(100%, 520px); margin: 30px 0 28px; border-radius: 2px; }
.hl-schnur { position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(135deg, var(--schnur) 0 5px, var(--schnur-2) 5px 10px); }
.hl-glut {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(200, 255, 46, .1), rgba(200, 255, 46, .7) 80%, var(--lime));
  box-shadow: 0 0 14px rgba(200, 255, 46, .35);
}
.held-lunte .funke { top: 50%; left: 100%; }
.js .held-lunte .hl-glut { transform: scaleX(0); }
.js .held-lunte .funke { left: 0; }
.held-unter { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--text-2); max-width: 30em; margin: 0 0 28px; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.knopf-leise {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--linie); color: var(--text); text-decoration: none; font-weight: 600; font-size: 16px;
}
.knopf-leise:hover { border-color: var(--text-3); }
/* Magnet-Knöpfe: ziehen am Computer leicht zum Zeiger (home.js setzt translate) */
.js:not(.ruhig) .held-knoepfe > a { transition: translate .45s cubic-bezier(.2, .9, .25, 1); }
.held-status { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--text-2); }

@media (min-width: 960px) {
  .held-start { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px; }
}

/* --- 3D-Szene mit Handy ----------------------------------------------------- */
.szene { margin: 0; display: grid; justify-items: center; perspective: 1400px; }
.szene-unter { font-size: 12px; color: var(--text-3); margin: 26px 0 0; text-align: center; }
/* Bewusst KEINE verschachtelte 3D-Szene (preserve-3d): Safari malt dann den Bildschirm
   nicht und Tippen kommt nicht an. Das Handy kippt als eine Ebene, die Hinweise schweben 2D darüber. */
.szene-scroll, .szene-3d { position: relative; }
.szene-3d { transform: rotateY(-14deg) rotateX(8deg); will-change: transform; }
.js .szene-3d { opacity: 0; }
/* Die Hinweise schweben in verschiedener Tiefe: Sie wandern mit der Maus
   unterschiedlich weit (--mx/--my setzt home.js, --tiefe je Hinweis). Als
   eigene translate-Eigenschaft, damit sie sich nicht mit transform (scale) beißt. */
.schwebe { position: absolute; z-index: 2; translate: calc(var(--mx, 0) * var(--tiefe, 0) * 1px) calc(var(--my, 0) * var(--tiefe, 0) * 1px); }
.s1 { --tiefe: 26; } .s2 { --tiefe: -18; } .s3 { --tiefe: 34; } .s4 { --tiefe: -28; }
.schwebe-i {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(21, 21, 28, .94); border: 1px solid rgba(255, 255, 255, .08); color: var(--text);
  font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: 999px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75);
}
.js .schwebe-i { opacity: 0; }
.schwebe .ic { color: var(--lime); }
.s1 { top: 19%; left: -24%; }
.s2 { top: 38%; right: -30%; }
.s3 { top: 56%; left: -30%; }
.s4 { bottom: 4%; right: -20%; }
.schalter { width: 34px; height: 20px; border-radius: 999px; background: var(--lime); position: relative; flex: none; }
.schalter i { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
@media (max-width: 959px) {
  .schwebe-i { font-size: 12px; padding: 8px 11px; gap: 6px; }
  /* am Handy enger am Gerät, damit nichts am Bildschirmrand abgeschnitten wird */
  .s1 { left: -3%; top: 25%; } .s2 { right: -5%; } .s3 { left: -5%; } .s4 { right: -2%; bottom: 2%; }
}

/* --- Das Handy (alle Maße hängen an --w) ----------------------------------- */
.handy {
  --w: 300px;
  --rand: calc(var(--w) * .034);
  --r-aussen: calc(var(--w) * .16);
  --r-innen: calc(var(--r-aussen) - var(--rand));
  position: relative; flex: none; width: var(--w); aspect-ratio: 9 / 19.5;
  font-size: calc(var(--w) * .046); line-height: 1.35;
  border-radius: var(--r-aussen); background: #040406;
  box-shadow: inset 0 0 0 1.5px #3a3a46, 0 0 0 1px #000, 0 50px 90px -30px rgba(0, 0, 0, .9), 0 0 80px -20px rgba(200, 255, 46, .16);
  text-align: left; color: var(--text);
}
.handy-held { --w: clamp(250px, 23vw, 300px); }
@media (max-width: 959px) { .handy-held { --w: min(256px, 66vw); } }
.handy-klein { --w: min(280px, 76vw); }
.handy-buehne { --w: min(300px, 25vw, calc((100vh - 150px) / 2.17)); }
.insel { position: absolute; z-index: 9; top: calc(var(--rand) + var(--w) * .03); left: 50%; width: 31%; height: calc(var(--w) * .085); transform: translateX(-50%); border-radius: 999px; background: #000; }
/* Uhr oben links wie auf dem iPhone (home.js: echte Zeit, im Abend-Teil die Zeit des Schritts) */
.handy-zeit {
  position: absolute; z-index: 9; top: calc(var(--rand) + var(--w) * .03); left: calc(var(--w) * .105); height: calc(var(--w) * .085);
  display: flex; align-items: center; font-size: calc(var(--w) * .044); font-weight: 600; letter-spacing: -.01em;
  color: var(--text); font-variant-numeric: tabular-nums; pointer-events: none;
}
.handy:has(> .screen-sperre) .handy-zeit, .handy-buehne.ohne-zeit .handy-zeit { display: none; }
.handy > .screen, .buehne-screens { position: absolute; inset: var(--rand); border-radius: var(--r-innen); overflow: hidden; }
.buehne-screens { background: var(--ink); }
.buehne-screens > .screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.buehne-screens > .screen.aktiv { opacity: 1; pointer-events: auto; }

.screen {
  background: var(--ink); display: flex; flex-direction: column; gap: .7em;
  padding: 3.3em 1.05em 1.2em; isolation: isolate;
}
/* Knöpfe in den Beispiel-Bildschirmen: ohne Browser-Aussehen (Klassen wie .pille-lime bestimmen es) */
:where(.screen) button { appearance: none; -webkit-appearance: none; border: 0; background: none; color: inherit; font: inherit; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
:where(.screen) button:active { transform: scale(.97); }
.pille-lime.ist-an { background: #2EE6A8; }
.pille-grau.ist-an { color: var(--lime); box-shadow: inset 0 0 0 1px rgba(200, 255, 46, .5); }
.optionen { display: flex; flex-direction: column; gap: .5em; }
.option { display: block; width: 100%; text-align: left; }
.option i { transition: width .5s cubic-bezier(.2, .9, .25, 1); }
.jetzt-liste { display: none; flex-direction: column; gap: .6em; }
.jetzt-liste.an { display: flex; }
.moment { position: relative; width: 100%; text-align: left; color: var(--text); }
.blitz { position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; pointer-events: none; }
.moment-uhr.fertig { color: #2EE6A8; }
.akt-balken i { transition: width .6s cubic-bezier(.2, .9, .25, 1); }
.story-balken i { transition: background .3s ease; }
.skel { display: block; height: .5em; border-radius: 999px; background: var(--linie); }
.ic { flex: none; }
.ava { width: 2.3em; height: 2.3em; border-radius: 50%; flex: none; display: inline-block; }
.ava-1 { background: linear-gradient(135deg, #ffb27a, #ff5a8a); }
.ava-2 { background: linear-gradient(135deg, #8fd3ff, #7b5cff); }
.ava-3 { background: linear-gradient(135deg, #2ee6a8, #1e7bff); }
.ava-4 { background: linear-gradient(135deg, #ffd84d, #ff7a1f); }
.ava-stapel { display: flex; }
.ava-stapel .ava { border: .18em solid var(--flaeche); margin-left: -.7em; }
.ava-stapel .ava:first-child { margin-left: 0; }
.ava-stapel.mini .ava { width: 20px; height: 20px; border-width: 2px; margin-left: -8px; }
.ava-stapel.mini .ava:first-child { margin-left: 0; }

.pille-lime, .pille-grau {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border-radius: 999px; font-weight: 700; white-space: nowrap;
}
.pille-lime { background: var(--lime); color: var(--ink); padding: .8em 1.4em; font-size: .95em; }
.pille-grau { background: var(--erhoeht); color: var(--text); padding: .5em .95em; font-size: .78em; font-weight: 600; }
.pille-lime.breit { display: flex; width: 100%; }
.pille-lime.klein { padding: .45em .9em; font-size: .78em; }
.chip-dunkel {
  display: inline-flex; align-items: center; gap: .35em; align-self: flex-start; width: max-content;
  background: rgba(11, 11, 16, .72); color: #fff; font-size: .74em; font-weight: 600; padding: .32em .7em; border-radius: 999px;
}
.kreis-ic { width: 3em; height: 3em; border-radius: 50%; display: grid; place-items: center; background: rgba(200, 255, 46, .14); color: var(--lime); flex: none; }
.kreis-ic .ic { width: 1.6em; height: 1.6em; }
.kreis-ic.klein { width: 2.3em; height: 2.3em; }
.kreis-ic.klein .ic { width: 1.2em; height: 1.2em; }
.kreis-ic.lime { background: var(--lime); color: var(--ink); }
.blatt-griff { width: 2.6em; height: .28em; border-radius: 999px; background: #3a3a46; align-self: center; flex: none; }
.blatt-titel { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 1.45em; line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.blatt-text { font-size: .85em; color: var(--text-2); margin: 0; }
.blatt-klein { font-size: .72em; font-weight: 600; color: var(--text-3); margin: .5em 0 0; }
.blatt-klein.mitte { text-align: center; }
.segment { display: flex; gap: .2em; padding: .22em; border-radius: 999px; background: var(--ink); border: 1px solid var(--linie); }
.segment > * { flex: 1; text-align: center; font-size: .72em; font-weight: 600; padding: .5em 0; border-radius: 999px; color: var(--text-2); white-space: nowrap; }
.segment .an { background: var(--lime); color: var(--ink); font-weight: 700; }
.zeile { display: flex; align-items: center; gap: .7em; padding: .55em .6em; background: var(--flaeche); border-radius: 1em; }
.zeile-txt { flex: 1; display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.zeile-txt b { font-size: .86em; }

/* Party-Licht statt Foto */
.licht { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #120d1f; }
.licht i { position: absolute; border-radius: 50%; filter: blur(1.6em); mix-blend-mode: screen; animation: drift 9s ease-in-out infinite alternate; will-change: transform; }
/* Licht läuft nur, solange es zu sehen ist (spart Akku auf dem Handy) */
.js .licht i { animation-play-state: paused; }
.js .licht.laeuft i { animation-play-state: running; }
.licht i:nth-child(1) { width: 75%; height: 45%; left: -15%; top: 8%; background: #6c3bff; }
.licht i:nth-child(2) { width: 65%; height: 40%; right: -20%; top: 28%; background: #ff2e8b; animation-duration: 11s; animation-delay: -3s; }
.licht i:nth-child(3) { width: 34%; height: 22%; left: 30%; top: 18%; background: var(--lime); opacity: .55; animation-duration: 7s; animation-delay: -5s; }
.licht i:nth-child(4) { width: 70%; height: 38%; left: 10%; bottom: -12%; background: #1e7bff; opacity: .8; animation-duration: 13s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(12%, -10%, 0) scale(1.18); }
}

/* Bildschirm „Für dich“ – zum Ausprobieren (home.js) */
.screen-feed { padding: 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: pointer; outline-offset: -3px; }
.feed-stapel { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.2, .9, .25, 1); will-change: transform; }
.feed-stapel.zieht { transition: none; }
.feed-karte { position: absolute; left: 0; right: 0; height: 100%; isolation: isolate; overflow: hidden; }
.feed-karte::after { content: ''; position: absolute; inset: 40% 0 0; z-index: -1; background: linear-gradient(transparent, rgba(11, 11, 16, .92)); }
.feed-oben { position: absolute; z-index: 3; top: 3.2em; left: 1.05em; right: 1.05em; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.feed-reiter { display: flex; gap: 1em; font-size: .95em; }
.feed-reiter b { border-bottom: 2px solid #fff; padding-bottom: .15em; }
.feed-reiter span { opacity: .65; font-weight: 600; }
.feed-ic { display: flex; gap: .8em; }
.feed-punkte { position: absolute; z-index: 3; left: .45em; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .3em; pointer-events: none; }
.feed-punkte i { width: .28em; height: .28em; border-radius: 999px; background: rgba(255, 255, 255, .35); transition: height .3s ease, background-color .3s ease; }
.feed-punkte i.an { height: .9em; background: #fff; }
.feed-aktionen { position: absolute; z-index: 3; right: .85em; bottom: 9.6em; display: flex; flex-direction: column; gap: 1em; }
.feed-aktionen > * { width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 11, 16, .42); color: #fff; }
.feed-aktionen .ic { width: 1.4em; height: 1.4em; }
.fa-herz { appearance: none; -webkit-appearance: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: #fff; transition: transform .35s var(--feder); }
.fa-herz .ic-voll { display: none; color: #ff4d5e; }
.fa-herz.an .ic-voll { display: block; }
.fa-herz.an .ic-leer { display: none; }
.fa-herz.an { transform: scale(1.08); }
.feed-crew { box-shadow: inset 0 0 0 2px var(--lime); }
.fa-knopf { appearance: none; -webkit-appearance: none; border: 0; padding: 0; font: inherit; cursor: pointer; transition: transform .3s var(--feder), background-color .2s ease; }
.fa-knopf:active, .fa-herz:active { transform: scale(.9); }
/* Fenster von unten im Handy: Crew, Einladen, Teilen */
.feed-blatt { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.feed-blatt.offen { pointer-events: auto; }
.fb-dunkel { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .35s ease; }
.feed-blatt.offen .fb-dunkel { opacity: 1; }
.fb-karte {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: .65em;
  padding: .6em 1em 1.2em; background: var(--flaeche); border-radius: 1.5em 1.5em 0 0;
  transform: translateY(105%); transition: transform .45s cubic-bezier(.2, .9, .25, 1); cursor: default;
}
.feed-blatt.offen .fb-karte { transform: none; }
.fb-teil { display: none; flex-direction: column; gap: .6em; }
.fb-teil.an { display: flex; }
.fb-schalter { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: .6em; padding: .7em .8em; border: 1px solid var(--linie); border-radius: 1em; background: var(--ink); color: var(--text); font: inherit; font-weight: 600; font-size: .85em; cursor: pointer; text-align: left; }
.fb-schalter .schalter { width: 2.4em; height: 1.4em; background: #3a3a46; transition: background-color .25s ease; }
.fb-schalter .schalter i { width: 1.1em; height: 1.1em; top: .15em; right: auto; left: .15em; background: #fff; transition: transform .3s var(--feder); }
.fb-schalter[aria-pressed="true"] .schalter { background: var(--lime); }
.fb-schalter[aria-pressed="true"] .schalter i { transform: translateX(1em); background: var(--ink); }
.fb-crew { display: flex; align-items: center; gap: .7em; min-height: 2.6em; }
.fb-crew .ava { opacity: 0; transform: scale(.4); }
.fb-crew p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .1em .3em; font-size: .78em; color: var(--text-2); opacity: 0; }
.fb-crew p b { width: 100%; color: var(--text); font-size: 1.1em; }
.fb-crew p .ic { color: var(--lime); }
.fb-einladen { border: 0; font-family: inherit; cursor: pointer; }
.fb-einladen.ok { background: #2EE6A8; }
.fb-story { position: relative; isolation: isolate; overflow: hidden; align-self: center; width: 52%; aspect-ratio: 9 / 16; border-radius: 1em; display: flex; flex-direction: column; justify-content: flex-end; padding: .7em; gap: .2em; }
.fb-story::after { content: ''; position: absolute; inset: 45% 0 0; z-index: -1; background: linear-gradient(transparent, rgba(11, 11, 16, .9)); }
.fb-story-frage { font-size: .62em; font-weight: 700; color: var(--lime); }
.fb-story-titel { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 1.05em; line-height: 1; }
.fb-story-marke { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: .7em; margin-top: .3em; }
.fb-story-marke span { color: var(--lime); }
.fb-fertig { align-self: stretch; justify-content: center; border: 0; font-family: inherit; cursor: pointer; padding: .7em; font-size: .85em; }
.feed-unten { position: absolute; left: 1.05em; right: 4.2em; bottom: 4.6em; display: flex; flex-direction: column; }
.feed-titel { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 2.05em; line-height: 1; letter-spacing: -.03em; margin: .35em 0 .2em; }
.feed-meta { margin: 0; font-size: .82em; color: rgba(255, 255, 255, .85); }
.feed-dabei {
  position: absolute; z-index: 3; left: 1.05em; bottom: 1.3em; border: 0; font-family: inherit; cursor: pointer;
  transition: background-color .25s ease, transform .3s var(--feder);
}
.feed-dabei:active { transform: scale(.96); }
.feed-dabei .fd-ok { display: none; align-items: center; gap: .35em; }
.feed-dabei.dabei { background: #2EE6A8; }
.feed-dabei.dabei .fd-text { display: none; }
.feed-dabei.dabei .fd-ok { display: inline-flex; }
.feed-herz-gross { position: absolute; z-index: 4; left: 0; top: 0; width: 4.6em; height: 4.6em; margin: -2.3em 0 0 -2.3em; color: #ff4d5e; opacity: 0; pointer-events: none; }
.feed-herz-gross .ic { width: 100%; height: 100%; }
.flieg-ticket { position: absolute; z-index: 5; left: 2.2em; bottom: 2.2em; color: #2EE6A8; pointer-events: none; }
.schwebe { pointer-events: none; transition: opacity .35s ease, transform .35s var(--feder), translate .7s cubic-bezier(.2, .9, .25, 1); }
.schwebe-knopf { pointer-events: auto; appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.schwebe-knopf:active .schwebe-i { transform: scale(.95); }
.schwebe-knopf .schalter { background: #3a3a46; transition: background-color .25s ease; }
.schwebe-knopf .schalter i { right: auto; left: 2px; background: #fff; transition: transform .3s var(--feder), background-color .25s ease; }
.schwebe-knopf[aria-pressed="true"] .schalter { background: var(--lime); }
.schwebe-knopf[aria-pressed="true"] .schalter i { transform: translateX(14px); background: var(--ink); }
.haken { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px #6f6f7c; display: grid; place-items: center; }
.haken .ic { opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .35s var(--feder); }
.schwebe-knopf[aria-pressed="true"] .haken { box-shadow: none; }
.schwebe-knopf[aria-pressed="true"] .haken .ic { opacity: 1; transform: none; }
.schwebe-knopf .chip-aus, .schwebe-knopf[aria-pressed="true"] .chip-an { display: inline; }
.schwebe-knopf .chip-an, .schwebe-knopf[aria-pressed="true"] .chip-aus { display: none; }
.schwebe.weg { opacity: 0; transform: scale(.8); }
.szene-tipp { display: block; margin-top: 4px; color: var(--text-2); }

/* „Ich hab heute Zeit“ */
.screen-blatt { background: linear-gradient(var(--ink), #101018); }
.screen-blatt .kreis-ic { margin-top: .4em; }
.dauer { display: flex; gap: .35em; }
.dauer > * { flex: 1; text-align: center; padding: .55em 0; border: 1px solid var(--linie); border-radius: 999px; font-size: .74em; font-weight: 600; color: var(--text-2); }
.dauer .an { background: var(--lime); color: var(--ink); border-color: var(--lime); font-weight: 700; }

/* „Jetzt“ – Karte */
.screen-karte { padding: 0; }
.stadtplan { position: absolute; inset: 0; background: #0f0f15; }
.stadtplan svg { width: 100%; height: 100%; display: block; }
.punkt { position: absolute; width: .9em; height: .9em; margin: -.45em; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 .25em rgba(200, 255, 46, .18); }
.punkt::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--lime); animation: puls 1.6s ease-out infinite; }
.punkt.gross { width: 1.3em; height: 1.3em; margin: -.65em; }
.punkt.leise { background: #8a8a97; box-shadow: none; }
.punkt.leise::after { display: none; }
.p1 { left: 30%; top: 22%; } .p2 { left: 60%; top: 33%; } .p3 { left: 22%; top: 49%; } .p4 { left: 78%; top: 15%; } .p5 { left: 70%; top: 52%; }
.p3::after { animation-delay: -.6s; } .p1::after { animation-delay: -1.1s; }
.karten-blatt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: .6em; padding: .6em 1em 1.2em; background: var(--flaeche); border-radius: 1.6em 1.6em 0 0; }
.welt-ic { width: 2.3em; height: 2.3em; border-radius: .75em; display: grid; place-items: center; background: rgba(200, 255, 46, .12); color: var(--lime); flex: none; }
.welt-ic .ic { width: 1.2em; height: 1.2em; }

/* Gruppen-Plan */
.screen-chat .chat-kopf { margin-bottom: auto; }
.chat-kopf { display: flex; align-items: center; gap: .6em; padding-bottom: .8em; border-bottom: 1px solid var(--erhoeht); }
.chat-kopf b { display: block; font-size: .9em; }
.chat-kopf small { display: block; font-size: .7em; color: var(--text-3); }
.blase { max-width: 76%; padding: .7em .85em; border-radius: 1.2em; display: flex; flex-direction: column; gap: .35em; flex: none; }
.blase.fremd { background: var(--erhoeht); align-self: flex-start; border-bottom-left-radius: .3em; width: 62%; }
.blase.eigen, .blase.frage { background: var(--lime); color: var(--ink); align-self: flex-end; border-bottom-right-radius: .3em; }
.blase.eigen { width: 46%; }
.blase.eigen .skel { background: rgba(11, 11, 16, .3); }
.blase.frage { font-size: .82em; font-weight: 600; line-height: 1.3; }
.plan-karte { display: flex; flex-direction: column; gap: .5em; padding: .9em; border-radius: 1.2em; background: var(--flaeche); border: 1px solid var(--linie); }
.plan-titel { display: flex; align-items: center; gap: .4em; margin: 0 0 .15em; font-weight: 700; font-size: .9em; }
.plan-titel .ic, .plan-frist .ic, .crew-treff .ic { color: var(--lime); }
.option { position: relative; overflow: hidden; padding: .55em .8em; border-radius: .7em; background: var(--erhoeht); font-size: .8em; font-weight: 600; }
.option span { position: relative; z-index: 1; }
.option i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: rgba(200, 255, 46, .14); }
.option.an { box-shadow: inset 0 0 0 1px var(--lime); }
.option.an i { background: rgba(200, 255, 46, .3); }
.plan-frist { display: flex; align-items: center; gap: .35em; margin: .1em 0; font-size: .72em; color: var(--text-3); }
.plan-knoepfe { display: flex; gap: .4em; }

/* Crew */
.screen-crew .blatt-klein { margin-top: auto; }
.crew-karte { display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 1.1em; text-align: center; border-radius: 1.4em; border: 1px solid var(--linie); background: radial-gradient(90% 70% at 50% 0%, rgba(200, 255, 46, .14), transparent 70%), var(--flaeche); }
.crew-karte .segment { align-self: stretch; }
.crew-treff { display: flex; align-items: center; gap: .3em; margin: 0; font-size: .8em; color: var(--text-2); }

/* Mittendrin */
.screen-drin { justify-content: space-between; }
.screen-drin::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(11, 11, 16, .1), rgba(11, 11, 16, .55)); }
.live-pille { display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; padding: .45em .85em; border-radius: 999px; background: rgba(11, 11, 16, .74); font-size: .78em; font-weight: 700; }
.live-pille .live-punkt { width: .55em; height: .55em; }
.stimme, .moment { border-radius: 1.2em; background: rgba(21, 21, 28, .9); padding: .8em; display: flex; flex-direction: column; gap: .5em; }
.stimme .blatt-klein { margin: 0; color: var(--text-2); }
.moment { flex-direction: row; align-items: center; gap: .75em; margin-top: auto; }
.moment-txt { display: flex; flex-direction: column; gap: .15em; text-align: left; }
.moment b { display: flex; align-items: center; gap: .35em; font-size: .86em; }
.moment-uhr { font-size: .76em; color: var(--lime); font-weight: 700; font-variant-numeric: tabular-nums; }
.sucher { position: relative; width: 3.2em; height: 3.2em; border-radius: .7em; background: #2a2140; flex: none; }
.sucher i { position: absolute; width: .7em; height: .7em; border: .14em solid var(--lime); }
.sucher i:nth-child(1) { left: .4em; top: .4em; border-right: 0; border-bottom: 0; }
.sucher i:nth-child(2) { right: .4em; top: .4em; border-left: 0; border-bottom: 0; }
.sucher i:nth-child(3) { left: .4em; bottom: .4em; border-right: 0; border-top: 0; }
.sucher i:nth-child(4) { right: .4em; bottom: .4em; border-left: 0; border-top: 0; }

/* Heimweg – Sperrbildschirm */
.screen-sperre { background: linear-gradient(180deg, #0c1531, var(--ink) 72%); text-align: center; }
.sperre-zeit { font-weight: 600; font-size: 4.1em; line-height: 1; letter-spacing: -.03em; margin: .55em 0 0; font-variant-numeric: tabular-nums; }
.sperre-datum { font-size: .82em; color: var(--text-2); margin: 0; }
.aktivitaet { margin-top: 1.4em; padding: .9em; border-radius: 1.4em; background: rgba(21, 21, 28, .92); text-align: left; }
.akt-oben { display: flex; justify-content: space-between; align-items: center; gap: .5em; margin: 0; font-size: .76em; font-weight: 600; }
.akt-oben span { display: flex; align-items: center; gap: .35em; }
.akt-oben .ic { color: var(--lime); }
.akt-bis { color: var(--lime); font-weight: 700; white-space: nowrap; }
.akt-balken { display: block; height: .42em; margin-top: .75em; border-radius: 999px; background: var(--linie); overflow: hidden; }
.akt-balken i { display: block; height: 100%; width: 64%; border-radius: inherit; background: var(--lime); }
.screen-sperre .pille-lime { margin-top: auto; }
.heim-knoepfe { display: flex; gap: .5em; }
.heim-knoepfe .pille-grau { flex: 1; }

/* Story */
.story-balken { display: flex; gap: .25em; }
.story-balken i { flex: 1; height: .2em; border-radius: 999px; background: rgba(255, 255, 255, .25); }
.story-balken .voll { background: #fff; }
.story-balken .halb { background: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, .25) 50%); }
.collage { width: 100%; flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .4em; min-height: 0; }
.collage .licht { position: relative; inset: auto; z-index: 0; border-radius: 1em; }
.collage .licht-a { grid-row: span 2; }
.licht-b i:nth-child(1) { background: #ff7a1f; }
.licht-c i:nth-child(2) { background: #2ee6a8; }
.story-titel { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 1.45em; line-height: 1.05; margin: .2em 0 0; }
.story-marke { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 1.15em; letter-spacing: -.04em; margin: 0; }
.story-marke span { color: var(--lime); }

/* --- Laufband ---------------------------------------------------------------- */
.band { padding: 56px 0 72px; overflow: hidden; overflow: clip; }
.band-reihe { white-space: nowrap; }
.band-lauf { display: inline-flex; align-items: center; gap: .32em; padding-right: .32em; will-change: transform; }
.band-reihe span {
  font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(40px, 7.6vw, 108px); line-height: 1.08; letter-spacing: -.035em;
}
.band .r2 span { color: transparent; -webkit-text-stroke: 1.5px rgba(244, 244, 240, .42); }
.band-stern { color: var(--lime); width: clamp(20px, 2.6vw, 36px); height: auto; }
.band .r2 .band-stern { color: var(--text-3); }
.band-satz { margin: 28px var(--rand-seite) 0; font-size: 18px; color: var(--text-2); max-width: 34em; }

/* --- Ein Abend (Zeitleiste mit Lunte) ---------------------------------------- */
.abend-bereich { padding: clamp(72px, 12vh, 140px) var(--rand-seite) 40px; }
.abend-kopf { max-width: 760px; margin-bottom: clamp(48px, 9vh, 96px); }
.abend-kopf p { font-size: clamp(18px, 1.6vw, 21px); color: var(--text-2); margin: 0; max-width: 30em; }
.abend-kopf .abend-hinweis { font-size: 14px; color: var(--text-3); margin-top: 14px; }
.buehne-an .abend-hinweis { display: none; }
.abend-raster { display: grid; }
.abend-spur { position: relative; padding-left: 52px; }
.lunte { position: absolute; left: 16px; top: 8px; bottom: 0; width: 4px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--schnur) 0 6px, var(--schnur-2) 6px 12px); }
.lunte-glut {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: 50% 0; transform: scaleY(var(--p, 0));
  background: linear-gradient(180deg, rgba(200, 255, 46, .12), rgba(200, 255, 46, .5) 70%, var(--lime));
}
.lunte .funke { left: 50%; top: 0; transform: translateY(var(--y, 0px)); }
.abend { list-style: none; margin: 0; padding: 0; }
.schritt { position: relative; padding-bottom: clamp(96px, 16vh, 180px); }
.schritt:last-child { padding-bottom: 24px; }
.schritt::before {
  content: ''; position: absolute; left: -44px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--schnur); box-sizing: border-box;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .5s var(--feder);
}
.schritt.an::before { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 6px rgba(200, 255, 46, .14), 0 0 22px rgba(200, 255, 46, .5); transform: scale(1.15); }
.wann { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-3); transition: color .35s ease; }
.schritt.an .wann { color: var(--lime); }
.schritt h3 {
  font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(34px, 4.4vw, 62px); line-height: 1; letter-spacing: -.035em; margin: 10px 0 14px;
}
.schritt-text { margin: 0; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.6; color: var(--text-2); max-width: 32em; }
.schritt-hinweis { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-3); max-width: 32em; }
.schritt-hinweis .ic { color: var(--text-2); flex: none; margin-top: 2px; }
.schritt-hinweis a { color: var(--lime); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.szene-inline { margin-top: 32px; perspective: 900px; }
.szene-inline .handy { transform-origin: 50% 0; }
.buehne { display: none; }

@media (min-width: 960px) {
  .abend-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; }
  .abend-spur { padding-left: 64px; }
  .lunte { left: 20px; }
  .schritt::before { left: -52px; }
  .schritt { min-height: 72vh; padding-bottom: 0; }
  .schritt:last-child { min-height: 60vh; }
  .buehne-an .szene-inline { display: none; }
  .buehne-an .buehne { display: block; }
  .buehne-klebt { position: sticky; top: max(88px, calc(50vh - 340px)); display: grid; justify-items: center; perspective: 1400px; }
  .buehne-unter { font-size: 12px; color: var(--text-3); margin: 20px 0 0; }
  .handy-buehne { transform: rotateY(-8deg) rotateX(4deg); }
}

/* --- Gastgeben -------------------------------------------------------------- */
.gastgeben { display: grid; gap: 56px; align-items: center; padding: clamp(96px, 14vh, 160px) var(--rand-seite); }
.liste-ic { list-style: none; margin: 32px 0 0; padding: 0; max-width: 34em; }
.liste-ic li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--erhoeht); font-size: 17px; line-height: 1.5; }
.liste-ic .ic { color: var(--lime); margin-top: 1px; }
.ticket-buehne { display: grid; justify-items: center; perspective: 1200px; }
.ticket {
  appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; width: min(340px, 74vw); border-radius: 28px; -webkit-tap-highlight-color: transparent;
}
.ticket-innen { display: block; position: relative; aspect-ratio: 5 / 7.4; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .9, .25, 1.15); }
.ticket.umgedreht .ticket-innen { transform: rotateY(180deg); }
.ticket-vorne, .ticket-hinten {
  position: absolute; inset: 0; border-radius: 28px; overflow: hidden; text-align: left;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.ticket-vorne { background: var(--flaeche); isolation: isolate; font-size: 16px; }
.ticket-vorne .licht { bottom: 30%; border-radius: 0; }
.ticket-vorne .licht::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 30%, var(--flaeche)); }
.tk-oben { position: absolute; top: 20px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; }
.tk-marke { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.04em; }
.tk-marke span { color: var(--lime); }
.tk-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(11, 11, 16, .72); font-size: 13px; font-weight: 700; }
.tk-mitte { position: absolute; left: 22px; right: 22px; bottom: 104px; display: flex; flex-direction: column; gap: 10px; }
.tk-titel { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -.035em; }
.tk-meta { font-size: 14px; color: var(--text-2); }
.tk-loch { position: absolute; left: 0; right: 0; bottom: 78px; border-top: 2px dashed rgba(255, 255, 255, .14); }
.tk-loch::before, .tk-loch::after { content: ''; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); }
.tk-loch::before { left: -13px; } .tk-loch::after { right: -13px; }
.tk-unten { position: absolute; left: 22px; right: 22px; bottom: 26px; display: flex; justify-content: space-between; align-items: center; }
.tk-unten > span:first-child { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 22px; }
.tk-tipp { font-size: 12px; color: var(--text-3); }
.ticket-hinten { transform: rotateY(180deg); background: #F4F4F0; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.zier-qr { width: 62%; height: auto; }
.tk-scan { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.ticket-hinten .tk-tipp { color: #6f6f7c; }
@media (min-width: 960px) {
  .gastgeben { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

/* --- Läden: die Karte ------------------------------------------------------- */
.laeden { padding: clamp(72px, 12vh, 140px) var(--rand-seite); }
.laeden-kopf { max-width: 860px; margin-bottom: 48px; }
@media (min-width: 960px) {
  .laeden { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
  .laeden-kopf { position: sticky; top: 120px; margin-bottom: 0; }
  .laeden h2 { font-size: clamp(42px, 5.2vw, 80px); }
}
.menue {
  max-width: 920px; padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: var(--flaeche);
  border: 1px solid var(--linie); outline: 1px solid var(--linie); outline-offset: -12px;
}
.menue-kopf { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin: 0 0 clamp(24px, 4vw, 40px); }
.menue-kopf span:first-child { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.03em; }
.menue-kopf span:last-child { font-size: 15px; color: var(--text-3); font-weight: 600; }
.menue dl { margin: 0; }
.menue-zeile { padding: 18px 0; }
.menue-zeile + .menue-zeile { border-top: 1px solid var(--erhoeht); }
.menue dt { display: flex; align-items: baseline; gap: 12px; font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; line-height: 1.1; }
.menue dt::after { content: ''; flex: 1; min-width: 24px; border-bottom: 2px dotted #3a3a46; transform: translateY(-.25em); }
.menue dd { margin: 8px 0 0; color: var(--text-2); font-size: 16px; line-height: 1.5; max-width: 40em; }
.menue-fuss { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--text-2); }

/* --- Sicher unterwegs --------------------------------------------------------
   Der eine große Auftritt der Seite: ein Beispiel-Handy mit dem Tab „Sicher“.
   Notruf 2 Sekunden halten → der Bildschirm wird rot, Sirene, Licht (das Handy
   leuchtet), jede Sekunde ein Foto, die Karte „Bei deiner Vertrauensperson“
   bekommt die Mitteilung. Rot = Notruf, wie in der App (brand.danger). */
.sicher-bereich { padding: clamp(72px, 12vh, 140px) var(--rand-seite) clamp(48px, 8vh, 96px); }
.sicher-kopf { max-width: 760px; margin-bottom: clamp(40px, 7vh, 72px); }
.sicher-tipp { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 36em; }
.sicher-tipp .ic { color: var(--lime); flex: none; margin-top: 2px; }
.sicher-buehne { display: grid; gap: 28px; justify-items: center; align-items: center; }
.sicher-handy { order: -1; display: grid; justify-items: center; perspective: 1200px; }
/* Am Handy: erst das Handy, dann die Karte der Vertrauensperson (sie reagiert mit), zuletzt der Sperrbildschirm */
.sperr-kachel { order: 1; }
.sicher-unter { font-size: 12px; color: var(--text-3); margin: 18px 0 0; text-align: center; }
@media (min-width: 960px) {
  .sicher-buehne { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 40px; }
  .sicher-handy { order: 0; }
  .sperr-kachel { order: -1; }
}
.handy-sicher { --w: min(300px, 80vw); }
/* Licht an: das Handy leuchtet während des Alarms (nur Deckkraft, bleibt flüssig) */
.handy-sicher::after {
  content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
  box-shadow: 0 0 90px 24px rgba(255, 255, 255, .22), 0 0 170px 50px rgba(255, 77, 94, .32);
  transition: opacity .35s ease;
}
.handy-sicher.alarm::after { opacity: 1; }
.js:not(.ruhig) .handy-sicher.alarm::after { animation: licht-puls .9s ease-in-out infinite alternate; }
@keyframes licht-puls { from { opacity: .55; } to { opacity: 1; } }

/* Bildschirm: Tab „Sicher“ */
.screen-sicher { padding: 0; touch-action: pan-y; }
.sc-tab { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .4em; padding: 2.9em 1em .6em; transition: opacity .3s ease, transform .3s ease; }
.screen-sicher:not([data-zustand="tab"]) .sc-tab { opacity: 0; transform: scale(.97); pointer-events: none; }
.sc-titel { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 1.65em; line-height: 1; letter-spacing: -.03em; margin: 0; }
.sc-unter { margin: 0; font-size: .74em; color: var(--text-2); }
.sos-karte { display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .6em .8em .6em; border-radius: 1.3em; background: var(--flaeche); border: 1px solid var(--linie); }
.sos {
  position: relative; width: 7.2em; height: 7.2em; border-radius: 50%; display: grid; place-items: center;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.sos-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.sos-spur { fill: none; stroke: rgba(255, 77, 94, .28); stroke-width: 5; }
.sos-fuell { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.sos-kern {
  width: 5.6em; height: 5.6em; border-radius: 50%; background: var(--rot); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  box-shadow: 0 0 1.6em rgba(255, 77, 94, .55); transition: transform .3s var(--feder);
}
.sos-kern .ic { width: 1.7em; height: 1.7em; }
.sos.haelt .sos-kern { transform: scale(.94); }
:where(.screen) .sos:active { transform: none; }
.js:not(.ruhig) .sos-kern { animation: sos-atmen 2.8s ease-in-out infinite; animation-play-state: paused; }
.js:not(.ruhig) .laeuft .sos-kern { animation-play-state: running; }
.js:not(.ruhig) .sos.haelt .sos-kern { animation: none; }
@keyframes sos-atmen { 0%, 100% { box-shadow: 0 0 1.2em rgba(255, 77, 94, .45); } 50% { box-shadow: 0 0 2.4em .3em rgba(255, 77, 94, .7); } }
.sos-kern b { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 1.2em; letter-spacing: -.02em; margin-top: .05em; }
.sos-kern small { font-size: .6em; font-weight: 600; opacity: .85; }
.sos-status { margin: 0; text-align: center; font-size: .72em; color: var(--text-2); display: flex; flex-direction: column; gap: .15em; }
.sos-status b { color: var(--text); font-size: 1.05em; }
.sos-knoepfe { display: flex; gap: .4em; }
.sos-knoepfe .pille-grau { font-family: inherit; }
.pille-grau.leise { opacity: .7; }
.bk-leise { font-weight: 500; color: var(--text-3); }
.vp-reihe { display: flex; align-items: center; gap: .42em; }
.vp { position: relative; width: 2.4em; height: 2.4em; flex: none; }
.vp .ava { width: 100%; height: 100%; }
.vp-ok { position: absolute; right: -.15em; bottom: -.15em; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; border: .14em solid var(--ink); }
.vp-ok .ic { width: .6em; height: .6em; }
.vp-ok.vp-offen { background: var(--text-3); color: #fff; }
.vp-ok .ic-offen, .vp-ok.vp-offen .ic-ok { display: none; }
.vp-ok.vp-offen .ic-offen { display: block; }
.vp-frei { border: .14em dashed #3a3a46; border-radius: 50%; }
.vp-neu { display: none; }
.vp-neu.da { display: block; }
.vp-plus { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 .3em rgba(200, 255, 46, .14); transition: transform .3s var(--feder); }
.vp-plus .ic { width: 1.1em; height: 1.1em; }
.vp-plus.weg { display: none; }
.vp-hinweis { margin: 0; min-height: 1.1em; font-size: .66em; color: var(--text-2); }
.screen-sicher .zeile small { font-size: .72em; color: var(--text-3); }
.screen-sicher .blatt-klein { margin-top: .25em; }

/* Bildschirm: Notruf (rot) */
.sc-notruf {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: .45em; padding: 3.1em .9em .9em;
  background: var(--rot); color: #fff; opacity: 0; pointer-events: none; transform: scale(1.03); transition: opacity .3s ease, transform .3s ease;
}
.screen-sicher[data-zustand="alarm"] .sc-notruf, .screen-sicher[data-zustand="ende"] .sc-notruf { opacity: 1; pointer-events: auto; transform: none; }
.sc-notruf::before { content: ''; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.js:not(.ruhig) .screen-sicher[data-zustand="alarm"] .sc-notruf::before { animation: nr-puls 1s ease-in-out infinite alternate; }
@keyframes nr-puls { from { opacity: 0; } to { opacity: .3; } }
.sc-notruf > * { position: relative; }
.nr-kopf { display: flex; gap: .6em; align-items: flex-start; }
.nr-text { flex: 1; min-width: 0; }
.nr-titel { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 1.9em; line-height: 1; letter-spacing: -.03em; margin: 0; }
.nr-status { margin: .3em 0 0; font-size: .76em; font-weight: 700; line-height: 1.3; }
.nr-helfer { display: none; align-items: center; gap: .3em; margin: .4em 0 0; padding: .3em .6em; border-radius: 999px; background: rgba(0, 0, 0, .25); font-size: .66em; font-weight: 700; max-width: 100%; }
.nr-helfer .ic { color: var(--lime); flex: none; }
.nr-helfer.an { display: inline-flex; }
.nr-kamera { position: relative; width: 4.6em; height: 6.1em; flex: none; border-radius: .6em; overflow: hidden; background: #000; border: .14em solid rgba(255, 255, 255, .6); isolation: isolate; }
.nr-kamera .licht { filter: saturate(.35) brightness(.75); }
.nr-kamera .sucher { position: absolute; inset: .3em; width: auto; height: auto; background: none; }
.nr-fotos { position: absolute; left: .3em; bottom: .3em; display: inline-flex; align-items: center; gap: .2em; padding: .15em .4em; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: .62em; font-weight: 700; font-variant-numeric: tabular-nums; }
.nr-sirene { margin: 0; display: flex; align-items: center; gap: .5em; font-size: .7em; font-weight: 700; padding: .4em .7em; border-radius: 999px; background: rgba(0, 0, 0, .22); width: max-content; max-width: 100%; }
.welle { display: inline-flex; align-items: center; gap: .14em; height: 1.1em; }
.welle i { width: .2em; height: .35em; border-radius: 999px; background: #fff; }
.js:not(.ruhig) .screen-sicher[data-zustand="alarm"] .welle i { animation: welle .55s ease-in-out infinite alternate; }
.welle i:nth-child(2) { animation-delay: -.12s; } .welle i:nth-child(3) { animation-delay: -.24s; } .welle i:nth-child(4) { animation-delay: -.36s; } .welle i:nth-child(5) { animation-delay: -.48s; }
@keyframes welle { from { height: .3em; } to { height: 1.1em; } }
.nr-anrufe { display: flex; gap: .4em; }
.nr-anruf { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3em; padding: .55em 0; border-radius: 999px; background: #fff; color: var(--rot); font-size: .74em; font-weight: 700; }
.nr-reihe-text { margin: .2em 0 0; font-size: .62em; opacity: .85; }
.nr-reihe { display: flex; gap: .3em; }
.nr-reihe .licht { position: relative; inset: auto; z-index: 0; flex: 1; aspect-ratio: 3 / 4; border-radius: .5em; opacity: 0; transform: scale(.85); transition: opacity .3s ease, transform .3s var(--feder); }
.nr-reihe .licht.da { opacity: 1; transform: none; }
.nr-hinweis { margin: auto 0 0; text-align: center; font-size: .7em; opacity: .9; }
.nr-punkte { display: flex; justify-content: center; gap: .6em; }
.nr-punkte i { width: .7em; height: .7em; border-radius: 50%; border: .12em solid #fff; box-sizing: border-box; }
.nr-punkte i.voll { background: #fff; }
.nr-punkte.fehler { animation: wackeln .4s ease; }
@keyframes wackeln { 0%, 100% { transform: none; } 25% { transform: translateX(-.5em); } 75% { transform: translateX(.5em); } }
.code-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3em .6em; justify-items: center; }
.code-pad button { width: 2.9em; height: 2.2em; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1em; font-weight: 600; display: grid; place-items: center; }
.code-pad button:active { background: rgba(255, 255, 255, .32); }
.nr-fehler { margin: 0; min-height: 1em; text-align: center; font-size: .7em; font-weight: 700; }
.nr-aus { width: 100%; padding: .7em; border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff; font-weight: 700; font-size: .85em; }
.nr-aus:disabled { opacity: .45; cursor: default; }
.nr-fuss { margin: 0; text-align: center; font-size: .6em; opacity: .8; }
.nr-beispiel { margin: 0; text-align: center; font-size: .6em; opacity: .9; }
.nr-beispiel b { font-variant-numeric: tabular-nums; }

/* „Alarm beendet“ – liegt über dem Notruf-Bildschirm, wie in der App */
.sc-ende {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em;
  padding: 1.5em; text-align: center; background: var(--rot); color: #fff; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.screen-sicher[data-zustand="ende"] .sc-ende { opacity: 1; pointer-events: auto; }
.sc-ende-titel { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 1.7em; letter-spacing: -.02em; margin: .3em 0 0; }
.sc-ende-text { margin: 0; font-size: .82em; opacity: .9; }
.kreis-ic.gross { width: 4.4em; height: 4.4em; }
.kreis-ic.gross .ic { width: 2em; height: 2em; }
.nr-fertig { margin-top: .6em; font-family: inherit; }

/* Bei der Vertrauensperson: die Notfall-Ansicht für Freunde */
.notfall-karte {
  width: min(340px, 100%); padding: 18px; border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); font-size: 15px; transition: border-color .4s ease, box-shadow .4s ease;
}
.notfall-karte[data-zustand="alarm"], .notfall-karte[data-zustand="not"] { border-color: rgba(255, 77, 94, .6); box-shadow: 0 0 0 4px rgba(255, 77, 94, .14), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.nk-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.nk-ruhe, .nk-ende { display: none; align-items: center; gap: 12px; }
.nk-ruhe p, .nk-ende p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.nk-ende p b { color: var(--text); }
.nk-alarm { display: none; flex-direction: column; gap: 10px; }
.notfall-karte[data-zustand="ruhe"] .nk-ruhe { display: flex; }
.notfall-karte[data-zustand="alarm"] .nk-alarm, .notfall-karte[data-zustand="not"] .nk-alarm { display: flex; }
.notfall-karte[data-zustand="gut"] .nk-gut { display: flex; }
.notfall-karte[data-zustand="not"] .nk-not { display: flex; margin-top: 12px; }
.nk-titel { margin: 0; font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
.nk-zeit { margin: 0; font-size: 13px; color: var(--text-2); }
.nk-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nk-fotos .licht { position: relative; inset: auto; z-index: 0; aspect-ratio: 3 / 4; border-radius: 8px; opacity: 0; transform: scale(.8); transition: opacity .35s ease, transform .35s var(--feder); }
.nk-fotos .licht.da { opacity: 1; transform: none; }
.nk-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nk-kuemmern { border: 0; font-family: inherit; cursor: pointer; font-size: 14px; }
.nk-kuemmern[aria-pressed="true"] { background: var(--mint); }
.kreis-ic.warn { background: rgba(255, 176, 32, .18); color: var(--warn); }
.kreis-ic.klein .ic { width: 1.1em; height: 1.1em; }

/* Sperrbildschirm: Widgets und Heimweg-Uhr mit SOS-Knopf */
.sperr-kachel {
  width: min(300px, 100%); padding: 16px 16px 18px; border-radius: 26px; border: 1px solid var(--linie);
  background: linear-gradient(180deg, #0c1531, var(--ink) 70%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.sk-insel { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 22px; background: #000; color: #fff; font-size: 13px; font-weight: 600; width: 100%; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .9); }
.sk-insel-zeile { display: flex; align-items: center; justify-content: center; gap: 6px; }
.sk-insel-zeile .ic { color: var(--lime); }
.sk-sos { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--rot); font-weight: 700; font-size: 13px; opacity: 0; transform: translateY(-8px); transition: opacity .45s ease .15s, transform .5s var(--feder) .15s; }
.sperr-kachel.offen .sk-sos, html:not(.js) .sk-sos, .ruhig .sk-sos { opacity: 1; transform: none; }
.sk-zeit { margin: 6px 0 0; font-size: 56px; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.sk-widgets { display: flex; gap: 10px; align-items: center; }
.sk-widget { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sk-widget.rund { width: 44px; height: 44px; border-radius: 50%; }
.sk-widget.breit { height: 44px; padding: 0 14px; border-radius: 14px; }
.sk-text { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); text-align: left; }

/* Fakten: Was der Notruf kann */
.fakten { list-style: none; margin: clamp(40px, 7vh, 72px) 0 0; padding: 0; display: grid; gap: 0 40px; }
@media (min-width: 760px) { .fakten { grid-template-columns: 1fr 1fr; } }
.fakten li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--erhoeht); font-size: 16px; line-height: 1.5; color: var(--text-2); }
.fakten b { color: var(--text); }
.fakt-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 77, 94, .12); color: var(--rot); }

/* Darunter: Live-Standort (seit Version 1.0.1 in der App) und der Alltag */
.sicher-unten { display: grid; gap: 32px; margin-top: clamp(32px, 6vh, 56px); align-items: start; }
@media (min-width: 960px) { .sicher-unten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.standort-karte { padding: 22px; border-radius: 24px; background: var(--flaeche); border: 1px solid var(--linie); }
.standort-bild { position: relative; height: 170px; border-radius: 16px; overflow: hidden; background: #0f0f15; }
.standort-bild svg { width: 100%; height: 100%; display: block; }
.standort-punkt { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; }
.standort-punkt.eigen { left: 31.9%; top: 58.2%; background: #8fd3ff; box-shadow: 0 0 0 4px rgba(143, 211, 255, .2); }
.standort-punkt.freund { left: 65.9%; top: 35.9%; background: var(--lime); box-shadow: 0 0 0 4px rgba(200, 255, 46, .2); }
.standort-punkt.freund::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--lime); animation: puls 1.6s ease-out infinite; }
.standort-pille { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 999px; background: rgba(11, 11, 16, .82); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.standort-beispiel { position: absolute; right: 12px; top: 10px; font-size: 11px; color: var(--text-3); }
.standort-karte h3 { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.02em; line-height: 1.05; margin: 18px 0 8px; }
.standort-satz { margin: 0 0 14px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--text); }
.standort-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.standort-liste li { position: relative; padding-left: 18px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.standort-liste li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.alltag-satz { margin: 0; font-size: 16px; color: var(--text-2); }
.alltag .liste-ic { margin-top: 8px; }

/* --- Schluss: das große Zeichen mittig ---------------------------------------
   Kommt es ins Bild, brennt die Lunte ab und wirft den Funken (home.js). */
.schluss { padding: 0 16px; }
.schluss-klebt {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(24px, 5vh, 48px); text-align: center; padding: 96px 0 72px;
}
.schluss-frage { font-family: 'Bricolage', 'Inter', sans-serif; font-weight: 800; font-size: clamp(32px, 5.4vw, 72px); line-height: 1; letter-spacing: -.035em; margin: 0; }
.schluss-zeichen { --h: clamp(170px, 36vh, 360px); position: relative; line-height: 0; }
.schluss-zeichen .zeichen { height: var(--h); width: calc(var(--h) * .8716); margin: 0; color: var(--text); }
.js .schluss .z-l { stroke-dashoffset: 100; }
.js .schluss .z-r { opacity: 1; }
.js .schluss .z-fg { opacity: 0; }
.burst { position: absolute; left: 87.8%; top: 52.5%; width: 0; height: 0; }
.burst i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--lime); opacity: 0; }
.schluss-text { font-size: 18px; color: var(--text-2); margin: 0; max-width: 28em; }
.js:not(.ruhig) .schluss-text { opacity: 0; }

/* --- Bewegung reduzieren ---------------------------------------------------
   Gilt bei der System-Einstellung und, gesetzt von home.js, über html.ruhig
   (zum Prüfen: luntro.de/?ruhig). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .start *, .start *::before, .start *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .hw-i, .js .szene-3d, .js .schwebe-i { opacity: 1; }
  .js .held-lunte .hl-glut { transform: none; }
  .js .held-lunte .funke { left: 100%; }
  .js .schluss .z-l { stroke-dashoffset: 0; }
  .js .schluss .z-r { opacity: 0; }
  .js .schluss .z-fg { opacity: 1; }
  .js .zuend-h .zw { opacity: 1; }
  .js:not(.ruhig) .schluss-text { opacity: 1; }
}
html.ruhig { scroll-behavior: auto; }
.ruhig .start *, .ruhig .start *::before, .ruhig .start *::after { animation: none !important; transition-duration: .01ms !important; }
.ruhig .hw-i, .ruhig .szene-3d, .ruhig .schwebe-i { opacity: 1; }
.ruhig .held-lunte .hl-glut { transform: none; }
.ruhig .held-lunte .funke { left: 100%; }
.ruhig .schluss .z-l { stroke-dashoffset: 0; }
.ruhig .schluss .z-r { opacity: 0; }
.ruhig .schluss .z-fg { opacity: 1; }
.ruhig .zuend-h .zw { opacity: 1; }
.ruhig .schwebe { translate: 0 0; }