/* SCHLAFLOS – Browserversion. Bühne 1920 × 1080, skaliert per JS. */

@font-face {
  font-family: "Heady";
  src: url("assets/fonts/MortysHeadyFont.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Madness";
  src: url("assets/fonts/MortysMadnessFont.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #0d0d0c;
  --paper: #f1eee4;
  --paper-shade: #d9d4c4;
  --wall: #8f8c80;
  --star: #f2dc6b;
  --night: #2b3350;
  --display: "Heady", "Amatic SC", "Londrina Solid", Georgia, serif;
  --text: "Madness", "Dosis", "Trebuchet MS", sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #0d0d0c; --paper: #f1eee4; }
}
:root[data-theme="dark"] { --ink: #0d0d0c; --paper: #f1eee4; }

*, *::before, *::after { box-sizing: inherit; }
html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  height: 100%;
  margin: 0;
  background: #000;
  color: var(--paper);
  font-family: var(--text);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 4px solid var(--star); outline-offset: 4px; }

#viewport { position: relative; width: 100%; height: 100%; overflow: hidden; }
#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #000;
}

/* ---------- Zimmer ---------- */
#room { position: absolute; inset: 0; transform-origin: 0 0; transition: filter 2.4s ease, transform .5s ease; }
#bg { position: absolute; inset: 0; background-size: cover; }
#objs { position: absolute; inset: 0; transition: filter .5s ease; }
#room.dark #objs { filter: brightness(.5) contrast(1.05); }
#room.turning { animation: turn .34s ease; }
@keyframes turn { 0% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 1; } }

.obj {
  position: absolute;
  display: block;
  transform-origin: 50% 100%;
  -webkit-user-drag: none;
}
.obj img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
button.obj:hover { filter: brightness(1.12); }
.obj.deko { pointer-events: none; }
.obj.enter { animation: enter .9s ease both; }
@keyframes enter { from { opacity: 0; } to { opacity: 1; } }
.nope { animation: nope .32s ease; }
@keyframes nope {
  0%, 100% { translate: 0 0; }
  25% { translate: -7px 0; }
  75% { translate: 7px 0; }
}
.sway { animation: sway 2.6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
.shiver { animation: shiver .09s linear 8; }
@keyframes shiver { 0%, 100% { translate: 0 0; } 50% { translate: 5px -3px; } }
.hover-float { animation: float 3.2s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.pulse { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.9) drop-shadow(0 0 10px #fff); } }

/* Platte in der Jukebox: Lichtstreifen, die sich drehen */
.disc {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  clip-path: inset(0 0 46% 0);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s;
}
.disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(255,255,255,.22) 16%, transparent 22% 48%, rgba(255,255,255,.16) 53%, transparent 60% 100%);
}
.disc.spin { opacity: 1; }
.disc.spin::before { animation: spin 2.4s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* Uhr: Der Sekundenzeiger zuckt auf der Stelle */
.sec { transform-origin: 95px 140px; animation: twitch 1s steps(1) infinite; }
@keyframes twitch { 0%, 100% { transform: rotate(222deg); } 50% { transform: rotate(228deg); } }

/* ---------- Lampe, Schatten, Staub ---------- */
#fx { position: absolute; inset: 0; pointer-events: none; }
#fx > button { pointer-events: auto; }
.lamplight {
  background: radial-gradient(circle at 50% 50%, rgba(255,250,228,.62) 0, rgba(255,250,228,.2) 18%, transparent 56%);
  mix-blend-mode: screen;
}
.shadow {
  opacity: .6; filter: blur(1.6px); mix-blend-mode: multiply;
  transform-origin: 50% 50%;
  transition: left 1.5s ease, top 1.5s ease, opacity 1.3s ease, scale .6s ease;
}
.shadow svg { display: block; width: 100%; height: 100%; overflow: visible; }
button.shadow:hover { filter: blur(1.6px); opacity: .82; }
#room.dark .shadow { opacity: .95; scale: 1.3; }
.shadow.gone { opacity: 0; scale: 1.3; transition: opacity .45s ease, scale .45s ease; }
.shadow.merging { opacity: 0; }
.shadow.own { opacity: .5; }
#room.dark .shadow.own { opacity: .75; scale: 1; }
.shadow .fa { animation: fa var(--t, 1.5s) steps(1) infinite; }
.shadow .fb { animation: fb var(--t, 1.5s) steps(1) infinite; }
@keyframes fa { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fb { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
#room.flinch { animation: flinch .8s ease; }
@keyframes flinch { 30% { filter: grayscale(1) brightness(.22); } }
.dust i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,250,228,.8); filter: blur(1px);
  animation: dust 9s ease-in-out infinite;
}
@keyframes dust { 0%, 100% { translate: 0 0; opacity: .15; } 50% { translate: 28px -46px; opacity: .9; } }

/* ---------- Fenster, Sterne, Risse ---------- */
.fogpane { background: rgba(203,208,212,.9); }
.crackpane svg { display: block; width: 100%; height: 100%; }
.skybox { overflow: hidden; }
.skybox svg { display: block; width: 100%; height: 100%; }
.skybox .dot { fill: #f6e9a8; filter: drop-shadow(0 0 6px #f2dc6b); }
.skybox .star { cursor: pointer; }
.skybox .star:hover .dot, .skybox .star.sel .dot { fill: #fff; filter: drop-shadow(0 0 12px #fff); }
.skybox .star.sel .dot { r: 11px; }
.skybox .edge line { stroke: #f6e9a8; stroke-width: 4; stroke-linecap: round; pointer-events: none; }
.skybox .edge .hit { stroke: transparent; stroke-width: 26; pointer-events: stroke; cursor: pointer; }
.skybox .rubber { stroke: #f6e9a8; stroke-width: 3; stroke-dasharray: 8 8; opacity: .7; pointer-events: none; }
.skybox .cracked .lines path { stroke: #fff; stroke-width: 5; filter: drop-shadow(0 0 5px #fff); stroke-dasharray: 2400; animation: crack 1.1s ease-out both; }
@keyframes crack { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
.fog { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity .9s ease; animation: enter .8s ease both; }
.fog.clear { opacity: 0; pointer-events: none; }
#stage.smash { animation: smash .55s ease; }
@keyframes smash {
  0% { filter: brightness(3); translate: 0 0; }
  20% { translate: -14px 6px; } 40% { translate: 12px -8px; } 60% { translate: -8px 4px; }
  100% { filter: none; translate: 0 0; }
}
.draft i { animation-name: draft; animation-duration: 6s; }
@keyframes draft { 0% { translate: 0 0; opacity: 0; } 20% { opacity: .9; } 100% { translate: -420px 90px; opacity: 0; } }
.flutter { animation: flutter 3.4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes flutter { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 2.4deg; } }

/* ---------- Sanduhren, Regen, Wolke ---------- */
.glass { width: 150px; height: 430px; transition: translate .25s ease, filter .25s ease; }
.glass svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.glass:hover { filter: brightness(1.2); }
.glass.up { translate: 0 -46px; filter: drop-shadow(0 0 16px var(--star)); }
.glass.fertig { filter: drop-shadow(0 0 18px var(--star)); }
.glass .fresh { animation: enter .5s ease both; }
.shelf { background: var(--ink); border: 5px solid #000; border-radius: 8px; }
.umdrehen {
  font-size: 30px; padding: 10px 28px 12px; color: var(--ink); background: var(--paper-shade);
  border-radius: 4px 14px 4px 4px; width: 300px; text-align: center;
}
.umdrehen:hover { background: var(--star); }
.cloudobj { transition: left 3.2s ease-in-out, top 3.2s ease-in-out, width 1.4s ease, height 1.4s ease; transform-origin: 50% 50%; }
.cloudobj svg, .obj > svg { display: block; width: 100%; height: 100%; }
button.cloudobj { pointer-events: none; }

.rain { overflow: hidden; pointer-events: none; transition: left 1.4s ease, width 1.4s ease; }
.rain i {
  position: absolute; top: -40px; width: 4px; height: 40px; border-radius: 2px;
  background: linear-gradient(transparent, #d6e6f5);
  animation: rain .8s linear infinite;
}
@keyframes rain { to { translate: -22px 640px; } }
.sec.run { animation: secrun 60s steps(60) infinite; }
@keyframes secrun { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.slot.voll { position: relative; }
.slot.voll::after {
  content: ""; position: absolute; right: 8px; bottom: 8px; width: 20px; height: 26px;
  background: #9cc3e6; border: 3px solid #000; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
}

/* ---------- Finale: Album sortieren, Stern angeln, Sternenlicht, Ende ---------- */
.foto .nr { position: absolute; left: 50%; bottom: -34px; translate: -50% 0; font-family: var(--display); text-transform: uppercase; font-size: 30px; color: #55524a; }
.foto.voll .zeichen { position: absolute; left: 16px; bottom: 12px; }
button.foto.voll { cursor: pointer; transition: translate .2s ease, box-shadow .2s ease; }
button.foto.voll:hover { translate: 0 -6px; }
.foto.voll.pick { translate: 0 -16px; box-shadow: 0 0 0 5px var(--star), 0 18px 0 rgba(0,0,0,.3); }
.foto.voll.fest { box-shadow: 0 0 22px 6px var(--star); }
.teich { overflow: hidden; cursor: none; touch-action: none; }
.teich svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.teich .fang { position: absolute; width: 90px; height: 90px; pointer-events: none; filter: drop-shadow(0 0 14px #f2dc6b); }
.lamplight.weich { background: radial-gradient(circle at 50% 50%, rgba(255,236,170,.4) 0, rgba(255,236,170,.1) 16%, transparent 40%); }
.sternenlicht { mix-blend-mode: screen; opacity: .75; pointer-events: none; animation: wander 26s ease-in-out infinite alternate; }
.sternenlicht img { width: 100%; height: 100%; }
#room.dark .sternenlicht { opacity: 1; }
@keyframes wander { from { translate: -40px -14px; } to { translate: 40px 14px; } }
.motti svg { display: block; width: 100%; height: 100%; }
.haken { width: 110px; height: 110px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.jb-hit.an { filter: drop-shadow(0 0 10px var(--star)) brightness(1.3); }
#stage.ending #left, #stage.ending #right, #stage.ending #inv, #stage.ending #print { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
#stage.ending #room { pointer-events: none; }
#fuenf { position: absolute; inset: 0; z-index: 28; animation: enter 2s ease both; transition: opacity 2s ease; pointer-events: none; }
#fuenf.weg { opacity: 0; }
#stage::after {
  content: ""; position: absolute; inset: 0; z-index: 27; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255,214,150,0) 20%, rgba(255,214,150,.55) 100%);
  transition: opacity 8s ease;
}
#stage.dawn::after { opacity: 1; }
#schluss {
  position: absolute; inset: 0; z-index: 29; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: rgba(0,0,0,.55); text-align: center; animation: enter 3s ease both;
}
#schluss .gross { font-family: var(--display); text-transform: uppercase; font-size: 230px; line-height: 1; color: var(--paper); }
#schluss .reihe { font-size: 34px; color: var(--paper-shade); margin-bottom: 30px; }
#schluss .knopf { font-family: var(--display); text-transform: uppercase; font-size: 58px; color: var(--ink); background: var(--paper); padding: 8px 44px 14px; border-radius: 14px 22px 12px 20px; }
#schluss .knopf:hover { background: var(--star); }
#schluss .klein { font-size: 28px; color: var(--paper-shade); text-decoration: underline; text-underline-offset: 6px; }

.hell { filter: brightness(2.4) contrast(.9) drop-shadow(0 0 6px rgba(255,255,255,.5)); }
#sag {
  position: absolute; left: 160px; right: 160px; top: 800px; text-align: center; z-index: 45;
  font-family: var(--text); font-size: 44px; line-height: 1.2; color: #fff;
  text-shadow: 0 0 16px #000, 0 3px 0 #000, 3px 0 0 #000, -3px 0 0 #000, 0 -3px 0 #000;
  pointer-events: none; opacity: 0; transition: opacity .6s ease;
}
#sag.on { opacity: 1; }
.draft svg { display: block; width: 100%; height: 100%; opacity: .55; }
.boe { stroke-dasharray: 260 900; animation: boe 4.2s linear infinite; }
.boe.b2 { animation-duration: 5.4s; animation-delay: -1.6s; }
.boe.b3 { animation-duration: 4.8s; animation-delay: -3s; }
@keyframes boe { from { stroke-dashoffset: 260; } to { stroke-dashoffset: -900; } }

/* ---------- Fassung 9: Uhr, Münze, Spinne, Gedankenblase ---------- */
.klick { background: transparent; }
.schief { rotate: 14deg; }
.slot .bild { display: grid; place-items: center; width: 88px; height: 88px; pointer-events: none; }
.slot .bild svg { max-width: 88px; max-height: 88px; width: 100%; height: 100%; }
.shadow.blass { opacity: .16; }
#room.dark .shadow.blass { opacity: .3; }
.shadow.own.wink .fa { animation: fa var(--t, 1.1s) steps(1) infinite; }
.blase { filter: drop-shadow(0 5px 0 rgba(0,0,0,.35)); animation: enter .4s ease both; }
.kritzel { display: grid; place-items: center; font-family: var(--text); font-size: 44px; color: #111; rotate: -80deg; }
.netz .spinne { transition: translate 1s ease-in, opacity 1s ease-in; }
.netz.flucht .spinne { translate: 110px -200px; opacity: 0; }
.zifferblatt { cursor: grab; touch-action: none; border-radius: 50%; }
.zifferblatt svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.stellen { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 32px; color: var(--paper); }
.stellen span { margin-left: 26px; }
.stellen button { min-width: 84px; height: 72px; font-size: 34px; color: var(--ink); background: var(--paper); border-radius: 12px; }
.stellen button:hover { background: var(--star); }
.schlitz { width: 30px; height: 96px; border-radius: 12px; background: #0b0b0a; border: 5px solid #000; box-shadow: 0 0 0 5px #55524a inset; }
.schlitz.voll { box-shadow: 0 0 0 5px #d8b84a inset; }
.schild {
  width: 430px; padding: 22px 28px 26px; background: var(--paper); color: var(--ink); rotate: 2deg;
  border-radius: 4px 14px 6px 10px; font-size: 34px; line-height: 1.5; box-shadow: 0 6px 0 rgba(0,0,0,.4);
}
.schild b { font-family: var(--display); font-weight: 400; font-size: 44px; margin-right: 12px; }
.sheet .zeile { display: flex; align-items: center; gap: 16px; font-size: 26px; margin-bottom: 4px; }
.sheet .zeile span:first-child { width: 250px; }
.sheet .zeile .linie { flex: 1; height: 38px; }
.sheet .kasten { display: inline-flex; align-items: center; gap: 6px; }
.sheet .kasten i { width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 4px; display: inline-block; }

/* ---------- Fassung 10: Pfütze, Bildstück, Fledermäuse ---------- */
.pfuetze svg { display: block; width: 100%; height: 100%; }
.pfuetze { animation: pfuetze 5s ease-out both; transform-origin: 50% 50%; }
@keyframes pfuetze { from { scale: .2 .5; opacity: 0; } to { scale: 1; opacity: 1; } }
.rute { cursor: grab; touch-action: none; filter: drop-shadow(0 0 10px #f2dc6b); }
.fleder .fluegel { animation: flattern .32s ease-in-out infinite alternate; transform-origin: 0 0; }
@keyframes flattern { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
.teich.schreck { animation: nope .3s ease; }

/* ---------- Fassung 11: Münzen für jedes Lied, Bild aus der Nähe ---------- */
.schild .preis { margin-top: 12px; padding-top: 10px; border-top: 3px dashed #8d8a80; font-size: 28px; color: #55524a; }
.gemaelde { transform-origin: 50% 2%; transition: rotate .6s ease; }
.gemaelde.gekippt { rotate: 15deg; }
.gemaelde .flaeche { inset: 0; width: 100%; height: 100%; }
.gemaelde .flaeche img { width: 100%; height: 100%; display: block; pointer-events: none; }
.mondmuenze svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 8px #f2dc6b); }
.mondmuenze:hover svg { filter: drop-shadow(0 0 16px #fff); }
.neumond { border-radius: 50%; background: #141414; box-shadow: 0 0 0 3px #000 inset; pointer-events: none; }
.kritzel.gross { font-size: 96px; rotate: -8deg; }
.wandstueck { background: var(--wall); border-radius: 14px; box-shadow: 0 0 0 6px #000 inset; }
#liedtext {
  position: absolute; left: 26px; bottom: 22px; z-index: 25; padding: 12px 20px 14px; font-size: 26px;
  color: var(--ink); background: var(--paper); border-radius: 4px 14px 4px 4px; rotate: 2deg; box-shadow: 0 5px 0 rgba(0,0,0,.45);
}
#song.voll { top: 470px; font-size: 40px; line-height: 1.35; background: rgba(0,0,0,.72); padding: 26px 30px; border-radius: 16px; left: 300px; right: 300px; }
#stage.ending #liedtext { opacity: 0; pointer-events: none; }

/* ---------- Fassung 12: Heranzoomen, Zahnrad, Markierungen ---------- */
.overlay.zoom { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%); }
#stage.zoomed .arrow, #stage.zoomed #print, #stage.zoomed #liedtext { opacity: 0; pointer-events: none; }
.faellt { animation: faellt 1.5s cubic-bezier(.4,0,.8,.6) both; }
@keyframes faellt {
  0% { translate: 0 -632px; rotate: 0deg; } 70% { translate: 0 0; rotate: 300deg; }
  82% { translate: 6px -46px; rotate: 340deg; } 100% { translate: 0 0; rotate: 360deg; }
}
.marke { pointer-events: none; filter: drop-shadow(0 0 6px rgba(0,0,0,.8)); }
.marke svg { display: block; width: 100%; height: 100%; }
.shadow.blass { opacity: .34; }
.rain.still i { animation: none; top: auto; height: 26px; opacity: .8; }

/* ---------- Fassung 13: Wolke aus Ebenen, Kuckucksuhr ---------- */
.cloudobj .wl { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.6s ease, transform 1.8s ease; }
.cloudobj .treffer { position: absolute; left: 10%; top: 20%; width: 80%; height: 54%; border-radius: 50%; pointer-events: auto; cursor: pointer; }
.cloudobj .w4 { opacity: 0; }                                        /* dunkle Regenschicht */
.cloudobj .w3, .cloudobj .w5 { opacity: .1; }                        /* Glanzlichter */
.cloudobj .w1 { opacity: 0; }
.cloudobj.eis .w1 { opacity: 1; }                                   /* die Zeit steht: Eiszapfen */
.cloudobj.regnet .w4 { opacity: 1; }
.cloudobj.regnet .wl { animation: wolkeatmet 6s ease-in-out infinite; }
.cloudobj.regnet .w3 { animation: wolkeatmet 6s ease-in-out infinite, schimmer 5s ease-in-out infinite; }
.cloudobj.regnet .w5 { animation: wolkeatmet 6s ease-in-out infinite, schimmer 5s ease-in-out -2.5s infinite; }
.cloudobj.zieht .w2 { transform: skewX(-7deg) translateX(-8px); }
.cloudobj.zieht .w6 { transform: skewX(-12deg) translateX(-20px); }
.cloudobj.zieht .w3, .cloudobj.zieht .w5 { transform: translateX(-30px); animation: schimmer 1.5s ease-in-out infinite; }
.cloudobj.zieht .w1 { transform: skewX(10deg); }
@keyframes schimmer { 0%, 100% { opacity: .08; } 50% { opacity: .42; } }
@keyframes wolkeatmet { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.pendel { transform-origin: 95px 200px; transform-box: view-box; }
.pendel.zuckt { animation: zuck 1s steps(1) infinite; }
.pendel.schwingt { animation: schwing 1s ease-in-out infinite alternate; }
@keyframes zuck { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(6.5deg); } }
@keyframes schwing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

/* ---------- Fassung 15: Brizzels Grafiken ---------- */
.slot .bild img { max-width: 88px; max-height: 88px; width: auto; height: auto; object-fit: contain; }
.uhr img, .uhr .pendel { position: absolute; inset: 0; width: 100%; height: 100%; }
.uhr .pendel { display: block; transform: rotate(-12.8deg); }
.uhr .zeiger.std { transform: rotate(var(--std, 0deg)); }
.uhr .zeiger.min { transform: rotate(var(--min, 0deg)); }
.uhr.leer .zeiger { opacity: 0; }
.uhr .scheibe { opacity: 0; }
.uhr.leer .scheibe, .uhr.stellen .scheibe { opacity: 1; }
.uhr.leer .pendel, .uhr.stellen .pendel { animation: zuck2 1s steps(1) infinite; }
.uhr.laeuft .pendel { animation: schwing2 1s ease-in-out infinite alternate; }
@keyframes zuck2 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
@keyframes schwing2 { from { transform: rotate(0deg); } to { transform: rotate(-25.6deg); } }
button.formklick { pointer-events: none; }
.formklick .treffer { position: absolute; left: 28%; top: 6%; width: 66%; height: 70%; border-radius: 40%; pointer-events: auto; cursor: pointer; }
.netz .gewebe { position: absolute; inset: 0; width: 100%; height: 100%; }
.netz .spinne { position: absolute; left: 40%; top: 22%; width: 36%; aspect-ratio: 384 / 298; transition: translate 1.1s ease-in, opacity 1.1s ease-in; pointer-events: none; }
.spinne img { position: absolute; inset: 0; width: 100%; height: 100%; }
.spinne .bein { animation: bein 1.4s ease-in-out infinite alternate; }
.spinne .bein.b1 { animation-delay: -.7s; }
@keyframes bein { from { rotate: -5deg; } to { rotate: 6deg; } }
.netz.flucht .spinne { translate: 130% -170%; opacity: 0; }
.netz.flucht .bein, .netz.shiver .bein { animation-duration: .16s; }
.reihe { background: transparent; }
.reihe .mini { position: absolute; top: 0; width: 46px; height: 88px; }
.uhrglas { position: relative; display: block; width: 100%; height: 100%; }
.uhrglas > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.uhrglas .marke { position: absolute; left: 50%; top: 104%; translate: -50% 0; padding: 6px 12px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--zettel-knopf); box-shadow: 3px 4px 0 rgba(0,0,0,.55); }
.glass { width: 200px; height: 382px; background: transparent; }
.pfuetze { animation: none; }
.pfuetze .stufe { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: stufe 1.8s ease both; }
.pfuetze .s1 { animation-delay: 3.5s; } .pfuetze .s2 { animation-delay: 7s; } .pfuetze .s3 { animation-delay: 10.5s; }
@keyframes stufe { to { opacity: 1; } }
.album.gezeichnet { background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; border: 0; box-shadow: none; border-radius: 0; }
.pola > img { transition: opacity 1.4s ease; }
.pola.verdeckt > img { opacity: 0; }
.teil { position: absolute; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.teil.drag { z-index: 5; cursor: grabbing; }
.teil.done { filter: none; transition: transform .25s ease; cursor: default; }
.bat { position: absolute; left: 0; top: 0; pointer-events: none; filter: drop-shadow(0 0 3px rgba(200,210,225,.75)); }
.bat img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bat .f1 { animation: f1 .34s steps(1) infinite; } .bat .f2 { animation: f2 .34s steps(1) infinite; }
@keyframes f1 { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes f2 { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.shadow .sm { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 473 / 586; display: block; }
.shadow.ganz .sm { left: 0; right: auto; width: 100%; height: 100%; }
.sm img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm .fl { transform-origin: 50% 55%; animation: flatter .5s ease-in-out infinite alternate; }
.shadow.ruhig .fl { animation: none; }
@keyframes flatter { from { transform: scaleX(1) rotate(0deg); } to { transform: scaleX(.84) rotate(-3deg); } }
.shadow .requisit { position: absolute; inset: 0; width: 100%; height: 100%; fill: #000; }

/* ---------- Zettel-Design: geschwungene Rahmen, Tusche-Versatz ---------- */
:root { --zettel: 255px 15px 225px 15px / 15px 225px 15px 255px; --zettel-knopf: 95% 4% 92% 5% / 4% 95% 6% 95%; }
.knopf, #print, #liedtext, .umdrehen, .stellen button, .tabs button {
  border: 3px solid var(--ink); border-radius: var(--zettel); box-shadow: 4px 5px 0 rgba(0,0,0,.55);
  transition: transform .15s ease, background-color .15s ease; rotate: none;
}
.stellen button, .tabs button { border-radius: var(--zettel-knopf); }
.knopf:hover, #print:hover, #liedtext:hover, .umdrehen:hover, .stellen button:hover, .tabs button:hover { transform: scale(1.05) rotate(-1.5deg); }
.knopf:focus-visible, #print:focus-visible, #liedtext:focus-visible, .umdrehen:focus-visible, .stellen button:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
#start .knopf, #schluss .knopf { border-color: #000; box-shadow: 5px 6px 0 rgba(255,255,255,.18); }
.schild, .sheet { border-radius: var(--zettel); box-shadow: 5px 6px 0 rgba(0,0,0,.55); border: 3px solid var(--ink); }
.close { border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%; border-width: 3px; }
#inv { border-radius: 0 0 28px 190px / 0 0 190px 28px; box-shadow: 4px 5px 0 rgba(0,0,0,.5); }
.slot { border-radius: var(--zettel-knopf); }
@media (prefers-reduced-motion: reduce) { .knopf:hover, #print:hover, #liedtext:hover, .umdrehen:hover { transform: none; } .spinne .bein, .sm .fl, .bat img, .uhr .pendel { animation: none !important; } }

/* ---------- Season-Ebenen ---------- */
#stage[data-season="0"] #room { filter: grayscale(1) brightness(.92) contrast(1.06); }
#stage[data-season="0"] .overlay.world { filter: grayscale(1); }
#stage[data-season="1"] .overlay.world { filter: grayscale(.6); }
#stage[data-season="2"] .overlay.world { filter: grayscale(.48); }
#stage[data-season="3"] .overlay.world { filter: grayscale(.24); }
#stage[data-season="1"] #room { filter: grayscale(.6) brightness(.96) contrast(1.04); }
#stage[data-season="2"] #room { filter: grayscale(.42) brightness(.98) contrast(1.03); }
#stage[data-season="3"] #room { filter: grayscale(.22) contrast(1.02); }
#stage[data-season="4"] #room { filter: none; }
#vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 34%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.9) 100%);
  transition: opacity 2.4s ease;
}
#stage[data-season="0"] #vignette { opacity: .5; }
#stage[data-season="1"] #vignette { opacity: .4; }
#stage[data-season="2"] #vignette { opacity: .3; }
#stage[data-season="3"] #vignette { opacity: .2; }
#stage[data-season="4"] #vignette { opacity: .1; }
#tint {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--night); mix-blend-mode: soft-light; opacity: 0;
  transition: opacity 2.4s ease;
}
#stage[data-season="1"] #tint { opacity: .5; }
#stage[data-season="2"] #tint { background: #6e5a22; opacity: .32; }
#stage[data-season="3"] #tint { background: #7a2e24; opacity: .2; }
#stage[data-season="4"] #tint { opacity: 0; }

/* ---------- Navigation ---------- */
.arrow {
  position: absolute; top: 400px; width: 150px; height: 250px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .8;
}
.arrow:hover { opacity: 1; }
#left { left: 6px; }
#right { right: 6px; }

/* ---------- Inventar ---------- */
#inv {
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  display: flex; gap: 10px; padding: 10px 26px 16px;
  min-width: 420px; justify-content: center; min-height: 132px;
  background: var(--ink);
  border-radius: 0 0 46px 38px / 0 0 30px 34px;
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
  z-index: 40;
  transition: translate .5s ease;
}
.slot.leer { background: rgba(241,238,228,.05); border: 3px dashed rgba(241,238,228,.14); }
#fehler { position: absolute; left: 20px; bottom: 20px; z-index: 70; max-width: 1200px; padding: 12px 18px; font-size: 26px; background: #a23b2a; color: #fff; border-radius: 8px; }
#build { position: absolute; left: 0; right: 0; bottom: 30px; font-size: 24px; color: #6f6c64; }
.slot {
  width: 106px; height: 106px; border-radius: 16px;
  background: rgba(241,238,228,.12);
  display: grid; place-items: center;
  border: 3px solid transparent;
}
.slot img { max-width: 92px; max-height: 92px; pointer-events: none; }
.slot.sel { border-color: var(--star); background: rgba(242,220,107,.16); }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(0,0,0,.8);
  animation: enter .35s ease both;
}
.overlay .abs { position: absolute; }
.close {
  position: absolute; right: 40px; top: 150px; width: 84px; height: 84px;
  font-family: var(--display); text-transform: uppercase; font-size: 64px; line-height: 1; color: var(--paper);
  border: 4px solid var(--paper); border-radius: 50%;
  display: grid; place-items: center; z-index: 5;
}
.close:hover { background: var(--paper); color: var(--ink); }

/* Jukebox-Nahansicht */
.jb-hit { position: absolute; border-radius: 50%; }
.jb-hit img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hole {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #000 55%, #2a2a2a 100%);
  border: 3px solid #000;
}

/* Wortschloss */
.lock {
  position: absolute; display: flex; gap: 14px; padding: 22px 26px;
  background: var(--ink); border: 5px solid #000; border-radius: 26px 20px 30px 22px;
  box-shadow: 0 0 0 4px #3a3a38 inset, 0 10px 0 rgba(0,0,0,.4);
}
.wheel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wheel button {
  width: 104px; height: 54px; font-size: 34px; color: var(--paper-shade);
  border-radius: 12px;
}
.wheel button:hover { background: #2c2c2a; color: var(--star); }
.wheel .letter {
  width: 104px; height: 124px; display: grid; place-items: center;
  font-family: var(--display); text-transform: uppercase; font-size: 96px; line-height: 1;
  color: var(--ink); background: var(--paper);
  border-radius: 10px 14px 8px 12px;
}
.lock.open .letter { background: var(--star); }

/* Gesungene Zeilen */
#song {
  position: absolute; left: 110px; right: 110px; top: 884px;
  font-family: var(--text); font-size: 54px; line-height: 1.1;
  color: #fff; text-align: center;
  text-shadow: 0 0 18px #000, 0 3px 0 #000, 3px 0 0 #000, -3px 0 0 #000, 0 -3px 0 #000;
  pointer-events: none; z-index: 20; opacity: 0;
  transition: opacity .7s ease;
}
#song.on { opacity: 1; }

/* Polaroid zusammensetzen */
.pola { position: absolute; left: 610px; top: 138px; width: 700px; height: 818px; transform: scale(.9); transform-origin: 50% 0; }
.pola > img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.photo { position: absolute; left: 88px; top: 74px; width: 520px; height: 520px; rotate: -1.2deg; background: #171716; }
.photo .ghost { position: absolute; inset: 0; border: 3px dashed rgba(0,0,0,.25); }
.piece {
  position: absolute; inset: 0; cursor: grab; touch-action: none;
  filter: grayscale(1) brightness(.62) contrast(.8) drop-shadow(0 4px 0 rgba(0,0,0,.5));
  transition: filter .4s;
}
.piece.drag { cursor: grabbing; z-index: 3; }
.piece.done { cursor: default; filter: grayscale(1) brightness(.62) contrast(.8); }
.piece svg, .whole svg { display: block; width: 520px; height: 520px; }
.whole { position: absolute; inset: 0; overflow: hidden; }
.whole .zoom { width: 520px; height: 520px; transition: transform 2.2s ease, filter 3.2s ease; filter: grayscale(1) brightness(.62) contrast(.8); }
.whole.developed .zoom { filter: none; }
.memline {
  position: absolute; left: 0; right: 0; top: 890px; text-align: center;
  font-family: var(--text); font-size: 50px; color: var(--paper);
  opacity: 0; transition: opacity .8s;
}
.memline.on { opacity: 1; }
.tap-hint {
  position: absolute; left: 0; right: 0; bottom: 28px; text-align: center;
  font-size: 26px; letter-spacing: .04em; color: var(--paper-shade); opacity: .7;
}

/* Album */
.album {
  position: absolute; left: 310px; top: 190px; width: 1300px; height: 760px;
  background: var(--ink); border-radius: 22px 30px 26px 34px; padding: 26px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  box-shadow: 0 14px 0 rgba(0,0,0,.5);
}
.page {
  background: #cfc9b6; border-radius: 8px;
  display: grid; grid-template-rows: 1fr 1fr; place-items: center; padding: 18px;
}
.page + .page { background: #d6d0be; }
.foto { position: relative; width: 250px; height: 292px; }
.foto.leer { background: rgba(0,0,0,.1); border: 3px dashed rgba(0,0,0,.28); }
.foto.leer::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: -8px; height: 46px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 88% 100%, 74% 58%, 60% 92%, 47% 50%, 33% 96%, 20% 60%, 9% 100%, 0 70%);
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.foto.voll { background: var(--paper); padding: 16px 16px 60px; box-shadow: 0 5px 0 rgba(0,0,0,.35); }
.foto.voll > svg { width: 218px; height: 218px; display: block; }
.foto:nth-child(1) { rotate: -3deg; }
.foto:nth-child(2) { rotate: 2.5deg; }

/* Fallnotiz (Print-Dummy) */
#print {
  position: absolute; right: 26px; bottom: 22px; z-index: 25;
  padding: 12px 20px 14px; font-size: 26px;
  color: var(--ink); background: var(--paper);
  border-radius: 4px 14px 4px 4px; rotate: -2deg;
  box-shadow: 0 5px 0 rgba(0,0,0,.45);
}
#print:hover { rotate: 0deg; }
.sheet {
  position: absolute; left: 560px; top: 150px; width: 920px; height: 900px;
  background: var(--paper); color: var(--ink); padding: 38px 60px;
  rotate: -.8deg; box-shadow: 0 14px 0 rgba(0,0,0,.5);
  -webkit-user-select: text; user-select: text;
}
.sheet h2 { font-family: var(--display); text-transform: uppercase; font-size: 70px; font-weight: 400; margin: 0; line-height: 1; }
.sheet .sub { font-size: 27px; margin: 8px 0 26px; color: #55524a; }
.sheet p { font-size: 33px; line-height: 1.45; margin: 0 0 12px; }
.gap { display: inline-flex; gap: 4px; vertical-align: -9px; margin: 0 6px; }
.gap i {
  width: 34px; height: 42px; border: 3px solid var(--ink); border-radius: 4px; display: inline-block;
}
.gap i.m { background: var(--star); }
.sheet .loesung { margin-top: 26px; display: flex; align-items: center; gap: 16px; font-size: 30px; }
.sheet .stamp {
  position: absolute; right: 44px; top: 40px; rotate: 6deg;
  border: 3px solid #a23b2a; color: #a23b2a; padding: 6px 14px; font-size: 24px; border-radius: 6px;
}

.sheet .linie { border-bottom: 3px solid var(--ink); height: 62px; }
.sheet.horoskop p { font-size: 25px; line-height: 1.28; margin-bottom: 8px; }
.sheet.horoskop .sub { margin-bottom: 14px; }
.sheet.horoskop .loesung { margin-top: 14px; }
.sheet.horoskop b { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 30px; }
.sterne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
.sterne figure { margin: 0; text-align: center; font-size: 28px; }
.sterne figure div { height: 230px; display: grid; place-items: center; }
.sterne svg { max-width: 190px; max-height: 220px; width: 100%; height: 100%; }
.sheet .klein { font-size: 26px; color: #55524a; margin-top: 40px; }
.sheet .kopf { font-size: 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -14px 0 18px; padding-bottom: 10px; border-bottom: 2px dashed #8d8a80; }
.sheet .kopf svg { flex: none; margin-right: 14px; }
.sheet .kopf svg + svg, .sheet .kopf svg:last-of-type { margin-right: 4px; }
.sheet .loesung svg { flex: none; }
.sheet .nacht { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.sheet .nacht i { width: 38px; height: 38px; border: 3px solid var(--ink); border-radius: 4px; display: inline-block; }
.sheet .rand {
  position: absolute; right: 14px; top: 170px; bottom: 30px; writing-mode: vertical-rl;
  font-size: 25px; color: #a23b2a; letter-spacing: .02em;
}
.tabs { position: absolute; left: 26px; top: 170px; display: grid; gap: 12px; z-index: 5; width: 290px; }
.tabs button {
  font-size: 27px; padding: 10px 18px 12px; text-align: left;
  background: var(--paper-shade); color: var(--ink); border-radius: 4px 12px 4px 4px;
}
.tabs button:hover { background: var(--paper); }
.tabs button[aria-pressed="true"] { background: var(--star); }
.panel {
  position: absolute; left: 330px; top: 150px; width: 1448px; height: 827px;
  border: 14px solid var(--paper); background: var(--paper); overflow: hidden;
  box-shadow: 0 12px 0 rgba(0,0,0,.5); filter: grayscale(1) contrast(1.06);
}
.panel .mini {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform: scale(.7396); transform-origin: 0 0; background-size: cover;
}
.panel .mini img, .panel .mini svg { display: block; width: 100%; height: 100%; }

/* ---------- Karten: Start, Intro, Ende ---------- */
#start, #intro {
  position: absolute; inset: 0; z-index: 60; background: #000;
  display: grid; place-items: center; text-align: center;
}
#start .inner { display: grid; gap: 18px; justify-items: center; }
#start h1 {
  font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 250px; line-height: .9; margin: 0;
  letter-spacing: .02em; color: var(--paper);
}
#start .reihe { font-family: var(--display); text-transform: uppercase; font-size: 62px; color: var(--paper-shade); }
#start .knopf {
  margin-top: 40px; font-family: var(--display); text-transform: uppercase; font-size: 70px;
  color: var(--ink); background: var(--paper); padding: 10px 54px 16px;
  border-radius: 14px 22px 12px 20px;
}
#start .knopf:hover { background: var(--star); }
#start .klein { font-size: 30px; color: var(--paper-shade); text-decoration: underline; text-underline-offset: 6px; }
#start .klein:hover { color: var(--star); }
#intro { transition: opacity 2.6s ease; pointer-events: none; }
#intro .zeit { font-family: var(--display); text-transform: uppercase; font-size: 150px; color: var(--paper); opacity: 0; transition: opacity 1.6s ease; }
#intro .zeit.on { opacity: 1; }
#intro.weg { opacity: 0; }

#ende {
  position: absolute; left: 50%; bottom: 60px; translate: -50% 0; z-index: 26;
  background: var(--paper); color: var(--ink); padding: 26px 40px 30px; max-width: 900px;
  border-radius: 6px 16px 8px 14px; rotate: -1deg; text-align: center;
  box-shadow: 0 8px 0 rgba(0,0,0,.5);
  animation: enter 1.2s ease both;
}
#ende b { display: block; font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 60px; line-height: 1; margin-bottom: 10px; }
#ende span { font-size: 30px; line-height: 1.35; display: block; }
#ende button {
  margin-top: 18px; font-size: 30px; padding: 8px 26px 10px;
  background: var(--ink); color: var(--paper); border-radius: 10px;
}
#ende button:hover { background: #3a3a38; }

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .disc.spin::before, .sway, .hover-float, .pulse, .sec, .dust i, .flutter, .rain i, .sternenlicht, .boe, .fluegel, .pendel, .cloudobj .wl { animation: none !important; }
  #room.turning { animation: none; }
}

/* ---------- Fassung 15: Nachträge, die spätere Regeln überschreiben ---------- */
.shadow { opacity: .78; }
.shadow.own { opacity: .78; }
#room.dark .shadow.own { opacity: .9; }
.shadow.blass { opacity: .3; }
.ziel { position: absolute; opacity: .16; pointer-events: none; }
.schlitz { background: transparent; border: 0; box-shadow: none; width: 36px; height: 110px; border-radius: 10px; }
.schlitz:hover { box-shadow: 0 0 14px 4px rgba(242,220,107,.55); }
.schlitz.voll { box-shadow: 0 0 10px 3px rgba(216,184,74,.6); }
.album.gezeichnet { width: 1440px; height: 561px; display: grid; grid-template-columns: 1fr 1fr; gap: 120px; padding: 46px 190px 150px 120px; background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; border: 0; box-shadow: none; border-radius: 0; }
.album.gezeichnet .page, .album.gezeichnet .page + .page { background: none; box-shadow: none; border: 0; padding: 0; display: flex; flex-direction: row; gap: 34px; align-items: flex-start; justify-content: center; rotate: none; }
.album.gezeichnet .foto { width: 196px; height: 232px; }
.album.gezeichnet .foto.voll { padding: 12px 12px 48px; }
.album.gezeichnet .foto.voll > svg { width: 172px; height: 172px; }
.album.gezeichnet .foto .nr { bottom: -30px; font-size: 26px; }

/* =====================================================================
   Fassung 16
   ===================================================================== */
/* ---------- Fundstücke leuchten, auch im Dunkeln ---------- */
.ding { filter: drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 16px rgba(255,255,255,.5)); }
.ding.hell { filter: brightness(3.1) contrast(.85) drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 16px rgba(255,255,255,.5)); }
#room.dark #objs .ding { filter: brightness(2) drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 16px rgba(255,255,255,.55)); }
#room.dark #objs .ding.hell { filter: brightness(6) contrast(.85) drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 16px rgba(255,255,255,.55)); }
button.obj.ding:hover { filter: brightness(1.15) drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px rgba(255,255,255,.75)); }
button.obj.ding.hell:hover { filter: brightness(2.8) drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px rgba(255,255,255,.75)); }
#room.dark #objs button.obj.ding:hover { filter: brightness(2.3) drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px rgba(255,255,255,.75)); }
#room.dark #objs button.obj.ding.hell:hover { filter: brightness(5.2) drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px rgba(255,255,255,.75)); }
.slot .bild { filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 7px rgba(255,255,255,.55)); }

/* ---------- Nachttisch, Gedankenblase, Lichtschalter ---------- */
.inlade { clip-path: inset(0 0 4% 0); }
.obj.inlade img { position: absolute; left: 50%; top: 50%; width: 62px; height: 98px; translate: -50% -50%; rotate: 84deg; }
.blase .inhalt { position: absolute; left: 13%; top: 17%; width: 74%; height: 53%; display: grid; place-items: center; }
.obj.blase .inhalt img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.blase .inhalt svg { display: block; width: 100%; height: 100%; }
.shadow .gabe { position: absolute; left: 3%; top: 35%; width: 21%; display: block; }
.shadow .gabe img { display: block; width: 100%; height: auto; filter: brightness(0); }
button.shadow.own { cursor: pointer; pointer-events: auto; }
.kritzel.klein { font-size: 32px; }
.reihe .mini { width: 52px; height: 100px; }

/* ---------- Album mit echten Fotos ---------- */
.foto.voll > img.bild { display: block; width: 218px; height: 218px; object-fit: cover; }
.album.gezeichnet .foto.voll > img.bild { width: 172px; height: 172px; }

/* ---------- Polaroid: Puzzle und kleiner Film ---------- */
.pola2 { position: absolute; }
.pola2 img { user-select: none; -webkit-user-drag: none; }
.ziel2 { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .12; filter: grayscale(1) brightness(1.5); pointer-events: none; }
.pola2 .rahmen { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; pointer-events: none; z-index: 3; }
.szene { position: absolute; overflow: hidden; opacity: 0; transition: opacity 1.6s ease; z-index: 2; background: #0c0c0c; }
.pola2.fertig .rahmen, .pola2.fertig .szene { opacity: 1; }
.pola2 .teil { z-index: 4; }
.pola2 .teil.drag { z-index: 6; }
.pola2.fertig .teil { opacity: 0; transition: opacity 1.6s ease .3s; pointer-events: none; }
.kamera { position: absolute; inset: 0; transition: transform 2.6s ease, filter 2.6s ease; }
.kamera .e { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 1.8s ease, translate 1.8s ease, filter 1.8s ease; }
.szene.p0 .kamera { filter: brightness(.42) saturate(.35); }

/* 1 Theater: Erst steht nur der Hocker im Dunkeln, die Puppe darauf ist schwarz. Der Scheinwerfer flackert an, dann wird sie hell. */
.s1 .e7 { opacity: 0; }
.s1 .e6 { filter: brightness(0); transition: filter 3.6s ease, opacity 1.8s ease; }
.s1.p0 .kamera { filter: brightness(.3) saturate(.4); }
.s1.p1 .e7, .s1.p2 .e7, .s1.p3 .e7 { animation: lichter 2.4s linear both; }
.s1.p2 .e6, .s1.p3 .e6 { filter: none; }
.s1.p3 .e7 { animation: lichter 2.4s linear both, kegel 3.2s ease-in-out 2.4s infinite alternate; }
@keyframes kegel { from { opacity: 1; } to { opacity: .72; } }

/* 2 Sternwarte: Sterne funkeln, Wolken ziehen, die Tür geht auf, eine Fledermaus fliegt */
.s2 .funkel { mix-blend-mode: screen; filter: contrast(3.2) brightness(1.3); opacity: 0; animation: funkeln 2.1s ease-in-out infinite alternate; -webkit-mask-image: linear-gradient(90deg, #000 0 52%, transparent 52%); mask-image: linear-gradient(90deg, #000 0 52%, transparent 52%); }
.s2 .funkel.fr { animation-duration: 3.3s; animation-delay: -1.2s; -webkit-mask-image: linear-gradient(90deg, transparent 0 48%, #000 48%); mask-image: linear-gradient(90deg, transparent 0 48%, #000 48%); }
@keyframes funkeln { from { opacity: 0; } to { opacity: .95; } }
.s2 .e2 { animation: ziehen 16s ease-in-out infinite alternate; }
@keyframes ziehen { from { translate: -2.5% 0; } to { translate: 2.5% 0; } }
.s2 .e4 { animation: nebel 5s ease-in-out infinite alternate; }
@keyframes nebel { from { opacity: .5; } to { opacity: 1; } }
.s2 .e7, .s2 .e8, .s2 .e9 { opacity: 0; }
.s2.p1 .e7, .s2.p2 .e7, .s2.p3 .e7, .s2.p1 .e8, .s2.p2 .e8, .s2.p3 .e8 { opacity: 1; transition-duration: .5s; }
.s2.p1 .e9, .s2.p2 .e9, .s2.p3 .e9 { opacity: 1; transition: opacity 2.4s ease 1.2s; }
.s2 .e3 { translate: -40% 0; transform-origin: 15% 31%; }
.s2.p2 .e3, .s2.p3 .e3 { animation: flug 8s linear infinite, flattern2 .28s ease-in-out infinite alternate; }
@keyframes flug { 0% { translate: -40% 4%; } 25% { translate: 0% -3%; } 50% { translate: 40% 5%; } 75% { translate: 80% -2%; } 100% { translate: 120% 3%; } }
@keyframes flattern2 { from { scale: 1 1; } to { scale: 1 .6; } }

/* 3 Spiegel: Die Lichter gehen an, das Spiegelbild taucht auf, die Spinne lässt sich herab, der Spiegel reißt */
.s3 .e4, .s3 .e5, .s3 .e6, .s3 .e7 { opacity: 0; }
.s3 .e9, .s3 .e10 { translate: 0 -64%; transition: translate 6s cubic-bezier(.2,.6,.3,1); }
.s3.p1 .e7, .s3.p2 .e7, .s3.p3 .e7 { animation: lichter 2.2s linear both; }
@keyframes lichter { 0% { opacity: 0; } 10% { opacity: .9; } 16% { opacity: .1; } 34% { opacity: .15; } 40% { opacity: 1; } 48% { opacity: .4; } 60% { opacity: 1; } 100% { opacity: 1; } }
.s3.p1 .e4 { opacity: .35; transition-delay: 1s; }
.s3.p2 .e4, .s3.p3 .e4 { opacity: 1; }
.s3.p2 .e5, .s3.p3 .e5 { opacity: 1; transition-duration: 3s; }
.s3.p2 .e9, .s3.p2 .e10, .s3.p3 .e9, .s3.p3 .e10 { translate: 0 0; }
.s3.p3 .e6 { opacity: 1; transition-duration: .12s; }
.s3.p3 .e3, .s3.p3 .e5, .s3.p3 .e6 { animation: ruck .5s ease-out 1; }
@keyframes ruck { 0% { transform: translate(0, 0); } 20% { transform: translate(-1.2%, .6%); } 45% { transform: translate(1%, -.5%); } 70% { transform: translate(-.5%, .3%); } 100% { transform: none; } }

/* 4 Fenster: Es regnet, die Blume nickt, Motti tritt ans Fenster */
.s4 .e2 { animation: regen .9s linear infinite; }
.s4 .e2.zwei { animation-delay: -.45s; }
@keyframes regen { 0% { translate: 0 -7%; opacity: 0; } 20% { opacity: .85; } 80% { opacity: .85; } 100% { translate: 0 7%; opacity: 0; } }
.s4 .e6 { opacity: 0; translate: -5% 0; transition: opacity 3s ease, translate 3s ease; }
.s4.p2 .e6, .s4.p3 .e6 { opacity: 1; translate: 0 0; }
.s4 .e5 { transform-origin: 56.7% 74%; }
.s4.p1 .e5, .s4.p2 .e5, .s4.p3 .e5 { animation: nicken 3.4s ease-in-out infinite alternate; }
@keyframes nicken { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
.s4.p3 .e2 { filter: brightness(1.5); animation-duration: .7s; }
@media (prefers-reduced-motion: reduce) { .kamera, .kamera .e { animation: none !important; } }


/* =====================================================================
   Fassung 17
   ===================================================================== */
/* ---------- Fünftes Polaroid: Sterne glimmen, Noten segeln herab, Motti atmet ---------- */
#fuenf .memline { top: 850px; }
.s5.p0 .kamera { filter: brightness(.25) saturate(.3); }
.s5 .e8 { animation: glimmen 3.1s ease-in-out infinite alternate; -webkit-mask-image: linear-gradient(100deg, #000 0 50%, transparent 56%); mask-image: linear-gradient(100deg, #000 0 50%, transparent 56%); }
.s5 .e8.zwei { animation-duration: 2.3s; animation-delay: -1.1s; -webkit-mask-image: linear-gradient(100deg, transparent 0 44%, #000 50%); mask-image: linear-gradient(100deg, transparent 0 44%, #000 50%); }
@keyframes glimmen { from { opacity: .35; } to { opacity: 1; } }
.s5 .e4, .s5 .e5, .s5 .e6, .s5 .e7 { opacity: 0; }
.s5.p1 .e4, .s5.p2 .e4, .s5.p3 .e4 { animation: segeln 7s ease-out both, schweben 4.2s ease-in-out 7s infinite alternate; }
.s5.p1 .e5, .s5.p2 .e5, .s5.p3 .e5 { animation: segeln 8s ease-out 1.2s both, schweben 4.8s ease-in-out 9.2s infinite alternate; }
.s5.p1 .e6, .s5.p2 .e6, .s5.p3 .e6 { animation: segeln 7.5s ease-out 2.4s both, schweben 3.9s ease-in-out 9.9s infinite alternate; }
.s5.p1 .e7, .s5.p2 .e7, .s5.p3 .e7 { animation: segeln 8.5s ease-out .6s both, schweben 4.5s ease-in-out 9.1s infinite alternate; }
@keyframes segeln { 0% { translate: 3% -34%; opacity: 0; rotate: -8deg; } 20% { opacity: 1; } 35% { translate: -2.5% -20%; rotate: 6deg; } 65% { translate: 2% -8%; rotate: -4deg; } 100% { translate: 0 0; opacity: 1; rotate: 0deg; } }
@keyframes schweben { from { translate: 0 0; opacity: 1; } to { translate: 0 -1.6%; opacity: 1; } }
.s5 .e4 { transform-origin: 78% 17%; } .s5 .e5 { transform-origin: 48% 34%; } .s5 .e6 { transform-origin: 15% 18%; } .s5 .e7 { transform-origin: 24% 44%; }
.s5 .e3 { transform-origin: 50% 90%; animation: atmen 4.6s ease-in-out infinite alternate; }
@keyframes atmen { from { scale: 1 1; } to { scale: 1 1.012; } }

/* ---------- Schatten: Requisiten als Umrisse ---------- */
.shadow .sm { height: 100%; }
.shadow .req { position: absolute; display: block; transform-origin: 50% 50%; }
.shadow .req img { display: block; width: 100%; height: auto; filter: brightness(0); }
.shadow .req.fa { animation: fa var(--t, 1.5s) steps(1) infinite; }
.shadow .req.fb { animation: fb var(--t, 1.5s) steps(1) infinite; }

/* ---------- Wind an Wand 4 kommt von links ---------- */
.draft.vonlinks svg { scale: -1 1; }

/* ---------- Album von oben ---------- */
.album.gezeichnet { left: 310px; top: 140px; width: 1300px; height: 819px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
.album.gezeichnet .page, .album.gezeichnet .page + .page { display: flex; flex-direction: row; gap: 34px; align-items: center; justify-content: center; padding: 0 64px 40px 60px; }
.album.gezeichnet .page + .page { padding: 0 60px 40px 64px; }
.album.gezeichnet .foto { width: 204px; height: 246px; }
.album.gezeichnet .foto.voll { padding: 12px 12px 54px; }
.album.gezeichnet .foto.voll > img.bild { width: 180px; height: 180px; }
.album.gezeichnet .foto .nr { bottom: -40px; font-size: 30px; color: #3a3936; }
.album.gezeichnet .foto.leer { background: rgba(0,0,0,.06); }

/* ---------- Jukebox-Schild: antippen macht es groß ---------- */
button.schild { display: block; text-align: left; cursor: zoom-in; font-family: var(--text); }
button.schild.gross { left: 50% !important; top: 50% !important; translate: -50% -50%; width: 1100px; padding: 50px 70px 60px; font-size: 84px; line-height: 1.45; z-index: 20; cursor: zoom-out; box-shadow: 0 0 0 2000px rgba(0,0,0,.72), 8px 10px 0 rgba(0,0,0,.6); rotate: -1deg; }
button.schild.gross b { font-size: 108px; margin-right: 28px; }
button.schild.gross .preis { font-size: 60px; margin-top: 26px; padding-top: 22px; }
.schlitz { width: 52px; height: 150px; }

/* ---------- Wortschloss ---------- */
.schloss { position: absolute; perspective: 900px; filter: drop-shadow(0 12px 0 rgba(0,0,0,.45)); }
.schloss .abs { position: absolute; pointer-events: none; }
.schloss .stein { position: absolute; padding: 0; background: none; transform-origin: 50% 50%; }
.schloss .stein img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.schloss .stein .letter { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); text-transform: uppercase; font-size: 128px; line-height: 1; color: #14130f; background: none; width: auto; height: auto; pointer-events: none; }
.schloss .dreh { position: absolute; width: 104px; height: 84px; font-size: 40px; color: var(--paper); background: rgba(13,13,12,.72); border: 3px solid #000; border-radius: var(--zettel-knopf); }
.schloss .dreh:hover { background: #2c2c2a; color: var(--star); }
.schloss.open .stein .letter { color: #fff; text-shadow: 0 0 18px var(--star), 0 0 6px #fff; }
.schloss.open { animation: nope .4s ease; }

/* ---------- Handy und Tablet ---------- */
#drehen { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  #drehen { display: grid; position: fixed; inset: 0; z-index: 999; place-items: center; background: #0a0a0a; color: var(--paper); font-family: var(--text); font-size: 26px; text-align: center; padding: 30px; line-height: 1.4; }
  #drehen b { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 44px; margin-bottom: 14px; }
}
@media (pointer: coarse) {
  button.obj::after, .jb-hit::after, .close::after { content: ''; position: absolute; inset: -18px; }
  .schlitz::after { content: ''; position: absolute; inset: -18px -30px; }
  .stellen { gap: 18px; }
  .stellen button { min-width: 118px; height: 104px; font-size: 44px; }
  .close { scale: 1.5; transform-origin: 100% 0; }
  .tap-hint { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .schloss .ring { animation: none !important; } .schloss .ring.alt { display: none; } }

.shadow .feld { position: absolute; left: 0; top: 0; width: 290px; height: 236px; transform-origin: 0 0; transform: scale(.862); display: block; }

/* ================= Fassung 18 ================= */
/* Wortschloss: Ringe rollen um die Mittelröhre. Das Plättchen bleibt stehen, Buchstabe und Fuge wandern darüber */
.schloss .stein { overflow: hidden; }
.schloss .stein .ring { position: absolute; inset: 0; display: block; transform-origin: 50% 50%; }
.schloss .stein .ring::before { content: ''; position: absolute; left: 6%; right: 6%; height: 7px; border-radius: 4px; background: rgba(0,0,0,.55); opacity: 0; }
.schloss .ring.rein-unten::before { top: -4px; animation: fuge .34s linear both; }
.schloss .ring.rein-oben::before { bottom: -4px; animation: fuge .34s linear both; }
.schloss .ring.rein-unten { animation: roll-rein-unten .34s cubic-bezier(.3,.9,.4,1) both; }
.schloss .ring.rein-oben { animation: roll-rein-oben .34s cubic-bezier(.3,.9,.4,1) both; }
.schloss .ring.raus-oben { animation: roll-raus-oben .34s cubic-bezier(.3,.9,.4,1) both; }
.schloss .ring.raus-unten { animation: roll-raus-unten .34s cubic-bezier(.3,.9,.4,1) both; }
@keyframes fuge { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes roll-rein-unten { from { transform: translateY(47%) scaleY(.06); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes roll-rein-oben { from { transform: translateY(-47%) scaleY(.06); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes roll-raus-oben { from { transform: none; opacity: 1; } to { transform: translateY(-47%) scaleY(.06); opacity: .3; } }
@keyframes roll-raus-unten { from { transform: none; opacity: 1; } to { transform: translateY(47%) scaleY(.06); opacity: .3; } }

/* Jukebox: gezeichnetes Schild */
.schildchen { background: none; border-radius: 12px; }
.schildchen:hover { box-shadow: 0 0 22px 6px rgba(242,220,107,.6); }
.schildgross { inset: 0; width: 100%; height: 100%; background: rgba(10,10,9,.72); display: grid; place-items: center; z-index: 5; animation: enter .25s ease both; }
.schildgross img { width: 1160px; height: auto; filter: drop-shadow(0 14px 0 rgba(0,0,0,.45)); pointer-events: none; }

/* Bild an der Wand */
.mondmuenze img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 8px #f2dc6b); pointer-events: none; }
.mondmuenze:hover img { filter: drop-shadow(0 0 16px #fff); }
.zeitzettel { rotate: -7deg; }
.overlay .zeitzettel { translate: var(--vx) var(--vy); rotate: 3deg; transition: translate .7s cubic-bezier(.4,0,.3,1.2) .15s, rotate .7s ease .15s; }
.overlay .bildschief .zeitzettel, .bildschief > .zeitzettel { translate: 0 0; rotate: -7deg; }

/* Inventar: gezeichnete Leiste und Fächer */
#inv { background: var(--inv-leiste) center / 100% 100% no-repeat; border-radius: 0; box-shadow: none; padding: 8px 40px 34px; min-height: 150px; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.slot, .slot.leer { background: var(--inv-fach) center / 100% 100% no-repeat; border: 3px solid transparent; border-radius: 10px; }
.slot.sel { background: var(--inv-fach) center / 100% 100% no-repeat; border-color: var(--star); box-shadow: 0 0 16px 2px rgba(242,220,107,.55); }

/* ================= Fassung 19 ================= */
/* Zugangscode auf der Startseite */
#tor { margin-top: 36px; display: grid; gap: 14px; justify-items: center; }
#tor label { font-size: 34px; color: var(--paper-shade); }
#tor .zeile { display: flex; gap: 18px; align-items: center; }
#tor input { width: 560px; height: 104px; padding: 0 26px; font-family: var(--display); text-transform: uppercase; font-size: 66px; letter-spacing: .06em; text-align: center; color: var(--ink); background: var(--paper);
  border: 3px solid #000; border-radius: var(--zettel-knopf); box-shadow: 5px 6px 0 rgba(255,255,255,.18); -webkit-user-select: text; user-select: text; }
#tor input:focus-visible { outline: 4px solid var(--star); outline-offset: 4px; }
#start #tor .knopf { margin-top: 0; }
#torfehler { min-height: 40px; font-size: 30px; color: #e59a8c; }
#tor.falsch .zeile { animation: nope .4s ease; }

/* Hilfe */
#hilfe { position: absolute; right: 26px; bottom: 22px; z-index: 25; width: 78px; height: 78px; font-family: var(--display); font-size: 58px; line-height: 1; color: var(--ink); background: var(--paper);
  border: 3px solid var(--ink); border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%; box-shadow: 4px 5px 0 rgba(0,0,0,.55); rotate: 4deg; transition: transform .15s ease, background-color .15s ease; }
#hilfe:hover { background: var(--star); transform: scale(1.08) rotate(-4deg); }
#stage.ending #hilfe, #stage.zoomed #hilfe { opacity: 0; pointer-events: none; }
#print { right: auto; bottom: auto; left: 26px; top: 22px; }      /* nur im Testmodus sichtbar, liegt dort niemandem im Weg */
.hilfeblatt { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 1080px; padding: 44px 56px 40px; color: var(--ink); background: var(--paper); border: 3px solid var(--ink);
  border-radius: var(--zettel); box-shadow: 8px 10px 0 rgba(0,0,0,.55); rotate: -.6deg; animation: enter .3s ease both; }
.hilfeblatt h2 { margin: 0 0 22px; font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 78px; line-height: 1; }
.hilfeblatt .klein { font-size: 26px; color: #6f6c64; margin-bottom: 6px; }
.hilfeblatt p { font-size: 34px; line-height: 1.3; margin: 0; }
.hilfeblatt .fuss { margin-top: 22px; font-size: 26px; color: #6f6c64; }
.hilfeblatt .stufe { display: grid; grid-template-columns: 190px 1fr; gap: 20px; align-items: baseline; width: 100%; margin-top: 14px; padding: 18px 24px 20px; text-align: left; font-family: var(--text); font-size: 33px; line-height: 1.3;
  color: var(--ink); border: 3px solid var(--ink); border-radius: var(--zettel-knopf); }
.hilfeblatt .stufe b { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 44px; line-height: 1; }
.hilfeblatt .stufe.offen { background: #fffdf5; }
.hilfeblatt .stufe.zu { background: var(--paper-shade); cursor: pointer; box-shadow: 4px 5px 0 rgba(0,0,0,.4); transition: background-color .15s ease, transform .15s ease; }
.hilfeblatt .stufe.zu:hover:not(:disabled) { background: var(--star); transform: rotate(-.5deg) scale(1.01); }
.hilfeblatt .stufe.zu:disabled { opacity: .42; cursor: default; box-shadow: none; }
.hilfeblatt .stufe.zu:disabled span { visibility: hidden; }
@media (pointer: coarse) { #hilfe { width: 96px; height: 96px; font-size: 70px; } }

/* ================= Fassung 21: Handy ================= */
:root { --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
.slot { position: relative; }                       /* Fehler bis Fassung 20: Die vergrößerte Tippfläche hing am ganzen Inventar statt am Fach */
@media (pointer: coarse) { .slot::after { content: ''; position: absolute; inset: -6px; } }
#go:disabled { opacity: .55; cursor: progress; transform: none; }

/* Inventar seitlich neben der Bühne: groß und verdeckt nichts. Es hängt dann am Fenster, nicht an der Bühne, Maße in echten Pixeln */
#inv.seitlich, #inv.seitlich.empty { left: auto; top: 50%; translate: 0 -50%; flex-direction: column; gap: 6px; padding: 0; min-width: 0; min-height: 0; background: none; filter: none; transition: opacity 1.2s ease; opacity: 1; }
#inv.seitlich.weg { opacity: 0; pointer-events: none; }
#inv.seitlich .slot { width: var(--fach); height: var(--fach); border-width: 2px; border-radius: 6px; }
#inv.seitlich .slot img { max-width: calc(var(--fach) * .84); max-height: calc(var(--fach) * .84); }
#inv.seitlich .slot .bild { width: calc(var(--fach) * .82); height: calc(var(--fach) * .82); }
#inv.seitlich .slot .bild svg, #inv.seitlich .slot .bild img { max-width: 100%; max-height: 100%; }
#inv.seitlich .slot.voll::after { right: 8%; bottom: 8%; width: 20%; height: 26%; border-width: 2px; }
#inv.seitlich .slot::after { inset: -3px; }
#inv.seitlich .slot.leer { box-shadow: 0 0 0 1px rgba(241,238,228,.16) inset; }
/* Tablet und andere Touch-Geräte ohne Platz an der Seite: Inventar oben, aber größer */
#stage.grob #inv { transform: scale(1.3); transform-origin: 50% 0; }

/* Sternenfenster: Lupe und Knöpfe */
.lupenrahmen.weich { transition: transform .35s ease; }
.skybox { touch-action: none; }
.overlay.lupe { background: #0d0d0c; }
.fensterknoepfe { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; display: flex; gap: 22px; z-index: 6; }
.fensterknoepfe.hidden { display: none; }
.fensterknoepfe .knopf { font-family: var(--display); text-transform: uppercase; font-size: 40px; line-height: 1; padding: 12px 30px 16px; color: var(--ink); background: var(--paper); white-space: nowrap; }
.fensterknoepfe .knopf:hover:not(:disabled) { background: var(--star); }
.fensterknoepfe .knopf:disabled { opacity: .4; cursor: default; transform: none; }
#stage.grob .fensterknoepfe .knopf { font-size: 66px; padding: 20px 44px 28px; }
#stage.grob .fensterknoepfe { bottom: 30px; gap: 30px; }

/* Puzzle: ein Fetzen, der unter dem Schließen-Knopf liegt, lässt sich trotzdem greifen (der Knopf ist am Handy größer) */
.pola2 .teil:not(.done) { z-index: 6; }
.pola2 .teil.drag { z-index: 7; }

#rechtliches { position: absolute; right: 36px; bottom: 26px; font-size: 24px; color: #6f6c64; }
#rechtliches a { color: inherit; text-decoration: none; margin-left: 28px; border-bottom: 1px solid #3a3934; padding-bottom: 2px; }
#rechtliches a:hover { color: var(--paper-shade); border-color: var(--paper-shade); }