/* ==========================================================
   slay — Biografie eines Wortes
   ========================================================== */

:root {
  --ws: clamp(120px, 19vw, 360px);          /* Grundgröße des Wortes */
  --gutter: max(16px, 6vw);
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* HUD-Farben je Raum */
body                { --fg: #f3efe8; --muted: #8d877d; }
body[data-era="1"]  { --fg: #2b1a0e; --muted: #6b5236; }
body[data-era="2"]  { --fg: #f6e6c8; --muted: #b58d5e; }
body[data-era="3"]  { --fg: #f1e6cc; --muted: #a8925f; }
body[data-era="4"]  { --fg: #ffe9f5; --muted: #c58aab; }
body[data-era="5"]  { --fg: #eef2ff; --muted: #9aa3bd; }
body[data-era="6"]  { --fg: #ffffff; --muted: #9a9a9a; }
body[data-era="7"]  { --fg: #1c1c1c; --muted: #6b6b6b; }
body[data-era="8"]  { --fg: #e8e8e8; --muted: #6f6f6f; }
body[data-era="9"]  { --fg: #e8e4dc; --muted: #7d786f; }

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

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

body {
  margin: 0;
  background: #0b0b0c;
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Vorhang beim Laden ---------- */
#curtain {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: #0b0b0c;
  font: 500 12px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase;
  color: #8d877d;
  transition: opacity 1.1s ease .2s, visibility 0s linear 1.3s;
}
#curtain span { animation: pulse 1.4s ease-in-out infinite; }
body.ready #curtain { opacity: 0; visibility: hidden; }

/* ---------- Bühne ---------- */
#stage {
  position: fixed; inset: 0;
  overflow: hidden;
  z-index: 0;
}
#stage::after {                       /* Filmkorn über allem */
  content: ""; position: absolute; inset: -50%;
  background: var(--noise);
  opacity: .07; mix-blend-mode: overlay;
  pointer-events: none;
  animation: grain 1s steps(6) infinite;
}

.bg { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.bg-0 { background: radial-gradient(ellipse 80% 70% at 62% 45%, #1d1c19 0%, #0b0b0c 70%); }
.bg-1 {
  background:
    radial-gradient(circle at 18% 78%, rgba(120, 72, 30, .18), transparent 22%),
    radial-gradient(circle at 86% 16%, rgba(120, 72, 30, .14), transparent 18%),
    radial-gradient(ellipse 75% 70% at 60% 45%, #f4e9cf 0%, #e5d3ac 55%, #b4935d 100%);
}
.bg-1::after {
  content: ""; position: absolute; inset: 0;
  background: var(--noise); opacity: .45; mix-blend-mode: multiply;
}
.bg-2 { background: radial-gradient(ellipse 90% 70% at 62% 115%, #8a230b 0%, #2e0a05 42%, #0b0302 78%); }
.bg-3 {
  background:
    radial-gradient(ellipse 70% 60% at 62% 100%, rgba(229, 194, 122, .12), transparent 70%),
    #0c0b09;
}
.bg-3::before {                       /* Art-déco-Sonnenstrahlen */
  content: ""; position: absolute; inset: 0;
  background: repeating-conic-gradient(from -90deg at 62% 108%, rgba(229, 194, 122, .16) 0deg .5deg, transparent .5deg 5deg);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 62% 100%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 90% at 62% 100%, #000 20%, transparent 75%);
}
.bg-4 { background: radial-gradient(ellipse 90% 70% at 62% 100%, #3d0a37 0%, #14021b 55%, #07000a 100%); }
.beam {
  position: absolute; top: -10vh; width: 70vw; height: 130vh;
  background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgba(255, 70, 175, .32) 10deg, rgba(255, 215, 240, .45) 12deg, rgba(255, 70, 175, .32) 14deg, transparent 24deg, transparent 360deg);
  filter: blur(10px);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
}
.beam.b1 { left: 10vw; animation: sway 7s ease-in-out infinite alternate; }
.beam.b2 { left: 45vw; animation: sway 9s ease-in-out -4s infinite alternate-reverse; }
.bg-5 { background: #08070f; }
.bg-5::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 30% 35%, rgba(120, 90, 255, .38), transparent 32%),
    radial-gradient(circle at 78% 62%, rgba(0, 220, 255, .26), transparent 34%),
    radial-gradient(circle at 62% 22%, rgba(255, 80, 200, .26), transparent 30%);
  filter: blur(40px);
  animation: holo 14s ease-in-out infinite alternate;
}
.bg-6 {
  background:
    radial-gradient(circle at 0% 100%, rgba(37, 244, 238, .14), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(254, 44, 85, .14), transparent 40%),
    #000;
}
.bg-6::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
}
.bg-7 {
  background:
    linear-gradient(#e6e6e0 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, #e6e6e0 1px, transparent 1px) 0 0 / 32px 32px,
    #f6f6f3;
}
.bg-8 { background: #050505; }
.bg-9 { background: radial-gradient(ellipse 70% 60% at 50% 40%, #141414 0%, #050505 75%); }

#fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ---------- Das Wort ---------- */
#words {
  position: absolute;
  top: 0; bottom: 0; left: 30vw; right: 0;
  display: grid; place-items: center;
  perspective: 1200px;
  pointer-events: none;
}
#words .w {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform, filter;
}
#words .t {
  display: block;
  font-size: calc(var(--ws) * var(--s, 1));
  line-height: 1;
  white-space: nowrap;
  padding: .1em .12em;   /* Platz für Glow, Kursiv-Überhang */
}

/* 0 · Prolog */
.w[data-i="0"] .t {
  --s: 1.1;
  font-family: var(--serif); font-style: italic; letter-spacing: -.02em;
  background: linear-gradient(100deg, #8d877d 25%, #fffaf0 45%, #8d877d 65%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 7s linear infinite;
}

/* 1 · Altenglisch */
.w[data-i="1"] .t {
  --s: .62;
  font-family: "Uncial Antiqua", serif;
  color: #3a2414;
  filter: url(#ink);
  text-shadow: 0 0 1px rgba(58, 36, 20, .5);
}

/* 2 · Mittelalter */
.w[data-i="2"] .t {
  --s: 1.02;
  font-family: "UnifrakturMaguntia", serif;
  background: linear-gradient(180deg, #fff4c8 0%, #f2c04f 32%, #a8691a 58%, #f7d77a 78%, #8a4b0f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 .12em rgba(255, 110, 30, .45));
}

/* 3 · 1920er */
.w[data-i="3"] .t {
  --s: .82;
  font-family: "Limelight", serif;
  color: #e5c27a;
  letter-spacing: .03em;
  text-shadow: .025em .025em 0 #0c0b09, .045em .045em 0 #b8914a;
}
.w[data-i="3"]::before, .w[data-i="3"]::after {
  content: ""; position: absolute; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, #e5c27a 20%, #e5c27a 80%, transparent);
}
.w[data-i="3"]::before { top: 4%; box-shadow: 0 6px 0 -0px rgba(229, 194, 122, .45); }
.w[data-i="3"]::after  { bottom: 4%; box-shadow: 0 -6px 0 0 rgba(229, 194, 122, .45); }

/* 4 · Ballroom */
.w[data-i="4"] .t {
  --s: .92;
  font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 900;
  letter-spacing: -.02em;
  color: #ffe1f1;
  text-shadow: 0 0 .02em #fff, 0 0 .08em #ff2e93, 0 0 .22em #ff2e93, 0 0 .5em #b0005e;
  animation: flicker 6s infinite;
}

/* 5 · Mainstream / Chrom */
.w[data-i="5"] .t {
  --s: .6;
  font-family: "Unbounded", sans-serif; font-weight: 900;
  letter-spacing: -.03em;
  background:
    linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) 0 0 / 250% 100%,
    linear-gradient(180deg, #ffffff 0%, #cdd5e0 26%, #3a414d 48%, #eef2f7 53%, #8e99a9 76%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .04em .06em rgba(0, 0, 0, .55)) drop-shadow(0 0 .3em rgba(140, 120, 255, .35));
  animation: chrome 4.5s ease-in-out infinite;
}

/* 6 · TikTok / Glitch */
.w[data-i="6"] .t {
  --s: .82;
  position: relative;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: -.04em;
  color: #fff;
}
.w[data-i="6"] .t::before, .w[data-i="6"] .t::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  padding: inherit;
  mix-blend-mode: screen;
}
.w[data-i="6"] .t::before { color: #25f4ee; animation: glitchA 2.6s steps(1) infinite; }
.w[data-i="6"] .t::after  { color: #fe2c55; animation: glitchB 2.6s steps(1) infinite; }

/* 7 · Die Erwachsenen / WordArt */
.w[data-i="7"] .t {
  --s: .9;
  font-family: "Comic Neue", "Comic Sans MS", cursive; font-weight: 700;
  background: linear-gradient(90deg, #ff1a1a, #ff9900, #ffe600, #2ecc40, #0a84ff, #8e44ad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: perspective(600px) rotateX(16deg) skewX(-9deg);
  filter: drop-shadow(.035em .035em 0 #3b3b3b);
}
.w[data-i="7"] .sticker {
  position: absolute; right: -2%; top: 2%;
  font-size: calc(var(--ws) * .32);
  transform: rotate(18deg);
  animation: wobble 1.8s ease-in-out infinite;
}

/* ---------- TikTok-Kommentare ---------- */
#comments {
  position: absolute; right: calc(var(--gutter) + 20px); bottom: 22vh;
  width: 250px; height: 58vh;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 70%, transparent);
          mask-image: linear-gradient(to top, #000 70%, transparent);
}
#comments .c {
  position: absolute; bottom: 0; left: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 14px/1.2 var(--sans); color: #fff;
  white-space: nowrap;
  animation: rise 5s cubic-bezier(.3, .6, .4, 1) forwards;
}
#comments .c b { font-weight: 500; opacity: .6; margin-right: 6px; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px var(--gutter);
  font: 500 12px/1 var(--mono); letter-spacing: .08em;
  color: var(--fg);
  transition: color .6s ease;
  pointer-events: none;
}
#hud a { pointer-events: auto; }
.brand { color: inherit; text-decoration: none; font-size: 14px; letter-spacing: .02em; }
.brand span { color: var(--muted); transition: color .6s ease; }
.where { text-transform: uppercase; }
.where #roomName { color: var(--muted); margin-left: .6em; transition: color .6s ease; }

#year {
  position: fixed; right: var(--gutter); bottom: 20px; z-index: 10;
  text-align: right;
  color: var(--fg);
  transition: color .6s ease;
  pointer-events: none;
}
#year small {
  display: block;
  font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); transition: color .6s ease;
  margin-bottom: 6px;
}
#year b {
  font: 400 clamp(40px, 6vw, 88px)/.9 var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

#timeline {
  position: fixed; right: calc(var(--gutter) * .5); top: 50%; z-index: 10;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
}
#timeline a {
  position: relative; display: block;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--fg);
  opacity: .35;
  transition: opacity .3s, transform .3s, background-color .3s, border-color .6s;
}
#timeline a:hover, #timeline a.on { opacity: 1; }
#timeline a.on { background: var(--fg); transform: scale(1.25); }
#timeline a span {
  position: absolute; right: 20px; top: 50%; transform: translate(6px, -50%);
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg); white-space: nowrap;
  opacity: 0; transition: opacity .25s, transform .25s;
  pointer-events: none;
}
#timeline a:hover span { opacity: 1; transform: translate(0, -50%); }

/* ---------- Räume & Karten ---------- */
#rooms { position: relative; z-index: 5; }

section.room {
  min-height: 180vh;
  display: flex; align-items: center;
  padding: 0 var(--gutter);
}
/* Erster und letzter Raum: Karte sitzt beim Laden bzw. am Ende exakt mittig */
#raum-0, #raum-9 { min-height: 100vh; }

.card {
  width: min(420px, 100%);
  padding: 28px 30px 30px;
  border-radius: 18px;
  background: rgba(18, 18, 18, .5);
  border: 1px solid rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  color: #f3efe8;
  will-change: opacity, transform;
}

.card p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; }
.card p:last-child { margin-bottom: 0; }
.card em { font-family: var(--serif); font-style: italic; font-size: 1.12em; }

.kicker {
  font: 500 11px/1.4 var(--mono) !important;
  letter-spacing: .16em; text-transform: uppercase;
  opacity: .65;
  margin-bottom: 18px !important;
}
.card h1, .card h2 {
  margin: 0 0 18px;
  font: 400 44px/1 var(--serif);
  letter-spacing: -.01em;
}
.card h1 { font-size: clamp(48px, 6vw, 72px); line-height: .95; }

.def {
  margin: 0 0 18px; padding: 2px 0 2px 14px;
  border-left: 2px solid currentColor;
}
.def dt { font: italic 400 24px/1.2 var(--serif); }
.def dd { margin: 4px 0 0; font-size: 14px; line-height: 1.45; opacity: .75; }

.aside {
  font-size: 13.5px !important; opacity: .75;
  padding-top: 14px; border-top: 1px dashed currentColor;
}

.hint { font: 500 12px/1.4 var(--mono) !important; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-top: 22px !important; }
.hint span { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }

/* Raum-spezifische Karten */
#raum-1 .card { background: rgba(246, 236, 212, .78); border-color: rgba(58, 36, 20, .22); color: #2b1a0e; }
#raum-1 h2 { font-family: "Uncial Antiqua", serif; font-size: 38px; color: #7d1f0e; }
#raum-1 .def { border-color: #7d1f0e; }
#raum-1 .def + p::first-letter { float: left; font: 400 3.4em/.8 "Uncial Antiqua", serif; color: #7d1f0e; margin: 6px 8px 0 0; }

#raum-2 .card { background: rgba(26, 7, 3, .55); border-color: rgba(242, 192, 79, .25); color: #f6e6c8; }
#raum-2 h2 { font-family: "UnifrakturMaguntia", serif; font-size: 50px; color: #f2c04f; }
#raum-2 .def { border-color: #f2c04f; }

#raum-3 .card { background: rgba(12, 11, 9, .72); border: 3px double rgba(229, 194, 122, .6); border-radius: 4px; color: #f1e6cc; }
#raum-3 h2 { font-family: "Limelight", serif; font-size: 40px; color: #e5c27a; }
#raum-3 .def { border-color: #e5c27a; }

#raum-4 .card { background: rgba(32, 4, 30, .55); border-color: rgba(255, 46, 147, .35); color: #ffe9f5; box-shadow: 0 0 60px rgba(255, 46, 147, .15); }
#raum-4 h2 { font-family: "Bodoni Moda", serif; font-style: italic; font-weight: 900; font-size: 42px; color: #ff5aa8; }
#raum-4 .def { border-color: #ff2e93; }

#raum-5 .card {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(16, 14, 30, .62), rgba(16, 14, 30, .62)) padding-box,
    linear-gradient(135deg, #b9a6ff, #6ff3ff, #ff8ad8, #b9a6ff) border-box;
  color: #eef2ff;
}
#raum-5 h2 {
  font-family: "Unbounded", sans-serif; font-weight: 900; font-size: 34px; letter-spacing: -.03em;
  background: linear-gradient(180deg, #fff 0%, #cdd5e0 40%, #5c6676 55%, #fff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#raum-5 .def { border-color: #b9c6ff; }

#raum-6 .card { background: rgba(0, 0, 0, .7); border-color: rgba(255, 255, 255, .14); border-radius: 22px; color: #fff; box-shadow: -4px -4px 0 #25f4ee, 4px 4px 0 #fe2c55; }
#raum-6 h2 { font-family: "Archivo Black", sans-serif; font-size: 40px; letter-spacing: -.03em; }
#raum-6 .def { border-color: #25f4ee; }

#raum-7 .card { background: #fff; border-color: #dedede; color: #1c1c1c; box-shadow: 0 18px 50px rgba(0, 0, 0, .12); -webkit-backdrop-filter: none; backdrop-filter: none; }
#raum-7 h2 { font: 700 34px/1.05 var(--sans); letter-spacing: -.03em; }

.chat {
  margin-top: 18px;
  border-radius: 14px; overflow: hidden;
  background: #ece5dd;
  font-size: 14px;
}
.chat-head { padding: 10px 14px; background: #2b4c46; color: #fff; font-weight: 600; }
.chat-head small { display: block; font-weight: 400; font-size: 11.5px; opacity: .75; margin-top: 2px; }
.msg {
  position: relative;
  margin: 8px 40px 0 10px; padding: 7px 10px 18px;
  background: #fff; border-radius: 4px 10px 10px 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  line-height: 1.35;
}
.msg b { display: block; font-size: 12.5px; color: #c0392b; margin-bottom: 2px; }
.msg:nth-of-type(3) b { color: #8e44ad; }
.msg time { position: absolute; right: 8px; bottom: 4px; font-size: 10.5px; color: #999; }
.sys {
  margin: 12px auto 12px; width: max-content; max-width: 90%;
  padding: 5px 12px; border-radius: 8px;
  background: #fff5c4; color: #5c5233; font-size: 12px;
}

#raum-8 .card { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; color: #e8e8e8; padding-left: 0; }
#raum-8 h2 { font-size: 34px; line-height: 1.1; color: #9a9a9a; }
#raum-8 .big { font: italic 400 46px/1.05 var(--serif); color: #fff; }

/* Grabstein */
#raum-9 { position: relative; flex-direction: column; justify-content: center; padding-top: 60px; padding-bottom: 60px; }
.card-grave {
  width: min(460px, 100%);
  margin: 0 auto;
  padding: 72px 36px 40px;
  border-radius: 230px 230px 18px 18px;
  background: linear-gradient(180deg, #1b1b1b, #0e0e0e);
  border: 1px solid #2a2a2a;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .05), 0 40px 80px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  text-align: center;
  color: #e8e4dc;
}
.card-grave .kicker { margin-bottom: 6px !important; }
.grave-word { font: italic 400 108px/1 var(--serif) !important; letter-spacing: -.02em; margin: 0 0 18px !important; }
.dates { display: grid; gap: 6px; font: 500 12px/1.5 var(--mono) !important; letter-spacing: .04em; color: #8a857c; }
.epitaph { font: italic 400 30px/1.2 var(--serif) !important; margin: 22px 0 26px !important; }
.coda { font-size: 14px !important; color: #8a857c; margin: 26px 0 22px !important; }

.candle {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0;
  color: #8a857c; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.candle .flame {
  width: 12px; height: 22px; margin-bottom: 2px;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 75%, #fff8d6 0%, #ffcf5a 35%, #ff8a1f 70%, transparent 72%);
  box-shadow: 0 0 22px 6px rgba(255, 170, 60, .35);
  opacity: 0; transform: scale(.4); transform-origin: 50% 100%;
  transition: opacity .5s, transform .5s;
}
.candle .wax { width: 14px; height: 34px; border-radius: 3px 3px 2px 2px; background: linear-gradient(90deg, #d9cfbd, #f4ecdc 45%, #c9bea9); margin-bottom: 10px; position: relative; }
.candle .wax::before { content: ""; position: absolute; left: 6px; top: -6px; width: 2px; height: 7px; background: #333; border-radius: 1px; }
.candle[aria-pressed="true"] .flame { opacity: 1; transform: none; animation: candle 2.2s ease-in-out infinite; }
.candle[aria-pressed="true"] { color: #e8c98a; }
.candle:focus-visible, .revive:focus-visible { outline: 1px solid #e8e4dc; outline-offset: 6px; border-radius: 6px; }

.revive {
  appearance: none; cursor: pointer;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid rgba(232, 228, 220, .35); background: transparent;
  color: #e8e4dc; font: 500 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .3s, color .3s, border-color .3s;
}
.revive:hover { background: #e8e4dc; color: #0b0b0c; border-color: #e8e4dc; }

.foot {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center;
  font: 500 11px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #4d4a45;
}

/* ---------- Mobile ---------- */
@media (max-width: 899px) {
  /* Poster-Layout: Wort oben, Karte unten */
  :root { --ws: 30vw; }
  #words { left: 0; top: 56px; bottom: 56vh; }
  #comments { left: 16px; right: 28px; top: 6vh; bottom: auto; width: auto; height: 42vh; }
  #comments .c { font-size: 12.5px; left: auto; right: 0; }
  section.room:not(#raum-9) .card { margin-top: 42vh; }
  .card { padding: 22px 22px 24px; }
  .card h2 { font-size: 36px; }
  #raum-8 .big { font-size: 38px; }
  .grave-word { font-size: 84px !important; }
  #year { top: 46px; bottom: auto; }
  #year small { display: none; }
  #year b { font-size: 30px; }
  #timeline { gap: 10px; }
  #timeline a { width: 7px; height: 7px; }
  section.room { padding: 0 32px 0 16px; }
  #raum-9 { padding: 0 16px; }
}

/* ---------- Keyframes ---------- */
@keyframes pulse   { 50% { opacity: .35; } }
@keyframes grain   { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -2%); } 60% { transform: translate(-2%, -4%); } 80% { transform: translate(4%, 2%); } }
@keyframes sheen   { to { background-position: -300% 0; } }
@keyframes chrome  { 0%, 15% { background-position: 120% 0, 0 0; } 70%, 100% { background-position: -120% 0, 0 0; } }
@keyframes sway    { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes holo    { from { transform: translate(-4%, -2%) rotate(0deg); filter: blur(40px) hue-rotate(0deg); } to { transform: translate(4%, 3%) rotate(8deg); filter: blur(40px) hue-rotate(60deg); } }
@keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }
@keyframes wobble  { 50% { transform: rotate(8deg) scale(1.08); } }
@keyframes nudge   { 50% { transform: translateY(4px); } }
@keyframes candle  { 0%, 100% { transform: scale(1) skewX(0); } 30% { transform: scale(1.04, .96) skewX(2deg); } 60% { transform: scale(.97, 1.05) skewX(-2deg); } }
@keyframes rise {
  0%   { transform: translate(var(--x, 0), 0) scale(.85); opacity: 0; }
  10%  { transform: translate(var(--x, 0), -4vh) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(var(--x, 0), -52vh) scale(1); opacity: 0; }
}
@keyframes glitchA {
  0%   { transform: translate(-.02em, 0); clip-path: inset(0 0 0 0); }
  8%   { transform: translate(-.05em, .01em); clip-path: inset(12% 0 58% 0); }
  10%  { transform: translate(.03em, 0); clip-path: inset(62% 0 8% 0); }
  12%  { transform: translate(-.02em, 0); clip-path: inset(0 0 0 0); }
  55%  { transform: translate(-.06em, 0); clip-path: inset(40% 0 35% 0); }
  57%  { transform: translate(-.02em, 0); clip-path: inset(0 0 0 0); }
  100% { transform: translate(-.02em, 0); }
}
@keyframes glitchB {
  0%   { transform: translate(.02em, 0); clip-path: inset(0 0 0 0); }
  8%   { transform: translate(.05em, -.01em); clip-path: inset(55% 0 20% 0); }
  10%  { transform: translate(-.03em, 0); clip-path: inset(5% 0 70% 0); }
  12%  { transform: translate(.02em, 0); clip-path: inset(0 0 0 0); }
  55%  { transform: translate(.07em, 0); clip-path: inset(10% 0 60% 0); }
  57%  { transform: translate(.02em, 0); clip-path: inset(0 0 0 0); }
  100% { transform: translate(.02em, 0); }
}

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