/* Heinzelprojekte – die Puppenbühne. Flach gemalt mit Tintenkante, Schilder mit hartem Versatz wie in Valeriokart. */

@font-face { font-family: "Delight"; src: url("schrift/delight-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Delight"; src: url("schrift/delight-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Delight"; src: url("schrift/delight-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Delight"; src: url("schrift/delight-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  /* Die Farben der Nachtvorstellung. Wer in der Garderobe eine andere Spielzeit wählt, bekommt sie von js/schema.js
     als Variablen an :root; index.html setzt die gemerkte Wahl schon vor dem ersten Bild. */
  --tinte: #1A0836;
  --tinte-leise: #4A3A66;
  --tinte-mitte: #3C2C5A;
  --saal: #1A0836;
  --wurf: #0C031E;
  --becken: #0E0424;
  --becken-grund: #2A1150;
  --vorhang: #C0105A;
  --vorhang-tief: #940A45;
  --vorhang-hell: #D7417B;
  --samt-tal: #2B0013; --samt-schatten: #6A0430; --samt-tief: #970A47; --samt-ton: #BE175C; --samt-glanz: #D7417B;
  /* die Form der Festons (auch im Bühnenmodell der Garderobe, spielzeit.css) */
  --feston-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='24' viewBox='0 0 104 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H104V3C93 3 82 19 52 19S11 3 0 3Z'/%3E%3Cpath d='M0 3C11 3 22 19 52 19S93 3 104 3' fill='none' stroke='%23000' stroke-width='1.3' transform='translate(0 2)'/%3E%3Cpath d='M0 3C11 3 22 19 52 19S93 3 104 3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M-1.5 5.5H1.5L2.6 12.6Q0 14.6 -2.6 12.6Z' fill='%23000' stroke='%23000' stroke-width='.9'/%3E%3Ccircle cx='0' cy='4.4' r='2.5' fill='%23000' stroke='%23000' stroke-width='.9'/%3E%3Cpath d='M102.5 5.5H105.5L106.6 12.6Q104 14.6 101.4 12.6Z' fill='%23000' stroke='%23000' stroke-width='.9'/%3E%3Ccircle cx='104' cy='4.4' r='2.5' fill='%23000' stroke='%23000' stroke-width='.9'/%3E%3C/svg%3E");
  --samt-licht: #FFBEDC; --samt-dunkel: #18000C; --saum-schrift: #FFFFFF; --saum-hover: #940A45; --saum-schein: none;
  --feston-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='24' viewBox='0 0 104 24' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23B98A2C'/%3E%3Cstop offset='.5' stop-color='%23F6D77F'/%3E%3Cstop offset='1' stop-color='%23B98A2C'/%3E%3C/linearGradient%3E%3ClinearGradient id='q' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F6D77F'/%3E%3Cstop offset='1' stop-color='%23C9962F'/%3E%3C/linearGradient%3E%3Cpath d='M4 3.5C20 4 32 8.6 52 8.6S84 4 100 3.5' fill='none' stroke='%232E0016' stroke-opacity='.45' stroke-width='1.4'/%3E%3Cpath d='M7 4.3C23 6 33 12.4 52 12.4S81 6 97 4.3' fill='none' stroke='%23F07AA6' stroke-opacity='.4' stroke-width='1.3'/%3E%3Cpath d='M9 5.2C25 8.2 34 15.6 52 15.6S79 8.2 95 5.2' fill='none' stroke='%232E0016' stroke-opacity='.35' stroke-width='1.1'/%3E%3Cpath d='M0 3C11 3 22 19 52 19S93 3 104 3' fill='none' stroke='%231A0836' stroke-opacity='.85' stroke-width='1.3' transform='translate(0 2)'/%3E%3Cpath d='M0 3C11 3 22 19 52 19S93 3 104 3' fill='none' stroke='url(%23g)' stroke-width='2.4'/%3E%3Cpath d='M-1.5 5.5H1.5L2.6 12.6Q0 14.6 -2.6 12.6Z' fill='url(%23q)' stroke='%231A0836' stroke-width='.9'/%3E%3Ccircle cx='0' cy='4.4' r='2.5' fill='%23F6D77F' stroke='%231A0836' stroke-width='.9'/%3E%3Cpath d='M102.5 5.5H105.5L106.6 12.6Q104 14.6 101.4 12.6Z' fill='url(%23q)' stroke='%231A0836' stroke-width='.9'/%3E%3Ccircle cx='104' cy='4.4' r='2.5' fill='%23F6D77F' stroke='%231A0836' stroke-width='.9'/%3E%3C/svg%3E");
  --prospekt: #3DC7C6;
  --prospekt-tief: #2FAEAD;
  --prospekt-blass: #BDEBEA;
  --rund-dunkel: #1F7778; --rund-mitte: #2FA6A5; --rund-hell: #35B3B2; --rund-fuss: #1C6B6D;
  --schlitz-tief: #0E3A3D; --schlitz: #19595B; --schlitz-kante: #247B7C; --schlitz-licht: #DCFFFF;
  --pluesch-tief: #400428; --pluesch-mitte: #960E56; --pluesch: #E8348E; --pluesch-hell: #FF70B6;
  --bretter: #FFC42E;
  --spot: #FDFF55;
  --weiss: #FFFFFF;
  --rot: #FF3D5A;
  --magenta: #EE6EFA;
  --blau: #4282C2;
  --violett: #4B0F99;

  --k-tuerkis: #3DC7C6; --k-gelb: #FDFF55; --k-magenta: #EE6EFA; --k-blau: #4282C2;
  --k-rot: #FF3D5A; --k-violett: #4B0F99; --k-amber: #FFC42E;

  /* Felder: eine Höhe, ein Innenabstand, eine Schrift; die kleine Größe für Listen und Steuerleisten */
  --feld-hoehe: 52px;
  --feld-hoehe-klein: 44px;
  --feld-py: 11px;
  --feld-px: 14px;
  --feld-schrift: 600 17px/1.35 var(--schrift);
  --feldname: 700 15px/1.2 var(--schrift);
  --gruppenname: 900 13px/1 var(--schrift-schild);
  --platzhalter: #6E5F8A;
  /* Fokus heisst Spot: die Tintenkante bleibt, aussen ein gelber Lichtring mit Tintenhaar, innen warmes Bühnenlicht */
  --fokus-ring: 0 0 0 4px var(--spot), 0 0 0 6px var(--tinte);
  --feld-licht: linear-gradient(180deg, #FFFDE2, var(--weiss) 70%);
  --kante: 3px;
  /* Schatten wie unter Bühnenlicht: kurze Kontaktkante, weicher Wurf nach unten */
  --versatz: 0 1px 0 color-mix(in srgb, var(--tinte) 55%, transparent), 0 8px 14px -4px color-mix(in srgb, var(--wurf) 42%, transparent), 0 22px 34px -16px color-mix(in srgb, var(--wurf) 50%, transparent);
  --versatz-klein: 0 1px 0 color-mix(in srgb, var(--tinte) 50%, transparent), 0 4px 9px -2px color-mix(in srgb, var(--wurf) 38%, transparent);
  --versatz-hoch: 0 2px 0 color-mix(in srgb, var(--tinte) 35%, transparent), 0 18px 26px -6px color-mix(in srgb, var(--wurf) 48%, transparent), 0 40px 56px -22px color-mix(in srgb, var(--wurf) 55%, transparent);
  --samt: repeating-linear-gradient(90deg, var(--samt-schatten) 0, var(--samt-tief) 9px, var(--samt-ton) 18px, var(--samt-glanz) 23px, var(--samt-ton) 28px, var(--samt-tief) 38px, var(--samt-schatten) 48px);
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --dunst-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0055' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .98  0 0 0 0 .92  0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  --rund: 7px;

  --schrift-schild: "Delight", system-ui, sans-serif;
  --schrift: "Delight", system-ui, sans-serif;

  --saum-h: 54px;
  --feston: 96px;
  --leiste-h: 34px;
  --sicher-unten: env(safe-area-inset-bottom, 0px);
  --puppen-luft: 40px;
  --vorbuehne: 138px;
  /* so tief läuft die Bühne hinter dem Bällebad weiter: die Schilder tauchen in die Bälle, statt an einer Linie zu enden */
  --versenkung: 56px;
  --puppen-hub: 8px;
  --aus: cubic-bezier(.16, 1, .3, 1);
  /* Feder nur für das, was physisch am Stab oder Gelenk wackelt: Puppen und Schilder */
  --feder: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: light;
}

@media (min-width: 900px) {
  :root { --saum-h: 66px; --feston: 132px; --leiste-h: 42px; --puppen-luft: 36px; --vorbuehne: 160px; --versenkung: 72px; --puppen-hub: 12px; --fluegel: clamp(96px, 11vw, 190px); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--saal); color: var(--tinte);
  font: 600 16px/1.45 var(--schrift); letter-spacing: .1px;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--spot); color: var(--tinte); }
input, textarea, select, button { font: inherit; color: inherit; }
textarea, input { caret-color: var(--vorhang); }
button { cursor: pointer; }
a { color: inherit; }
:where(:root:not(.lichter)) :focus-visible { outline: 3px solid var(--spot); outline-offset: 3px; box-shadow: 0 0 0 6px var(--tinte); border-radius: 4px; }
[hidden] { display: none !important; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg { width: 24px; height: 24px; flex: none; }
* { scrollbar-width: thin; scrollbar-color: var(--tinte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--tinte); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }

/* ---------- Der Saal ---------- */

.saal { position: fixed; inset: 0 0 calc(var(--leiste-h) + var(--sicher-unten) + var(--vorbuehne) - var(--versenkung)) 0; display: grid; grid-template-rows: auto auto 1fr; grid-template-columns: minmax(0, 1fr); overflow: hidden; }

/* Vorhangsaum oben: Stoff mit gemalten Falten, unten geraffte Festons aus demselben Samt mit Drapierfalten, Goldlitze und Tintenlinie.
   Der Schatten liegt auf dem ganzen Saum, damit er der Festonkante folgt (die Maske am Feston würde ihn abschneiden). */
.saum {
  position: relative; z-index: 20; color: var(--saum-schrift);
  background: linear-gradient(180deg, color-mix(in srgb, var(--samt-licht) 16%, transparent), rgba(0, 0, 0, 0) 45%, color-mix(in srgb, var(--samt-dunkel) 38%, transparent)), var(--samt);
  padding-top: env(safe-area-inset-top, 0px);
  filter: drop-shadow(0 7px 7px color-mix(in srgb, var(--wurf) 50%, transparent));
}
.saum::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 24px; pointer-events: none;
  /* der Samt läuft aus dem Saum weiter (gleiche Streifen, Abdunklung setzt bei .38 an); round: immer ganze Festons, die Kante endet links und rechts an einem Raffpunkt */
  background:
    var(--feston-bild) 0 0 / var(--feston) 24px round no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--samt-dunkel) 38%, transparent), color-mix(in srgb, var(--samt-dunkel) 50%, transparent)),
    var(--samt);
  -webkit-mask: var(--feston-maske) 0 0 / var(--feston) 24px round no-repeat;
  mask: var(--feston-maske) 0 0 / var(--feston) 24px round no-repeat;
}
.saum-innen { height: var(--saum-h); display: flex; align-items: center; gap: 6px; padding: 0 max(10px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
.titelblock { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* die Wortmarke ist Neon wie im Einlass (einlass.css, js/neon.js); die Höhe setzt die Grösse, die Breite folgt */
.marke { display: block; flex: none; align-self: flex-start; height: 26px; }
.marke .neon-glas { filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--wurf) 40%, transparent)); }
.bild-name { margin: 0; font: 700 13px/1.1 var(--schrift); color: var(--saum-schrift); white-space: nowrap; filter: var(--saum-schein); }
.knopf-rund svg { filter: var(--saum-schein); }
.knopf-rund {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: transparent; color: var(--saum-schrift); text-decoration: none;
  transition: background-color .2s var(--aus), transform .2s var(--aus);
}
/* eine Falte tiefer im eigenen Samt; auf hellem Samt, wo die Schrift Tinte ist, eine Spur heller (js/schema.js) */
.knopf-rund:hover { background: var(--saum-hover); }
.knopf-rund:active { transform: scale(.92); }
.knopf-rund[aria-expanded="true"] { background: var(--spot); color: var(--tinte); }
@media (min-width: 900px) {
  .titelblock { flex-direction: row; align-items: center; gap: 16px; }
  .marke { height: 34px; align-self: center; }
  .bild-name { font-size: 16px; }
}
@media (max-width: 340px) { .marke { height: 22px; } }

/* Suchleiste unter dem Saum */
.suchleiste {
  position: relative; z-index: 15; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  padding: 24px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
  background: var(--prospekt-tief); border-bottom: var(--kante) solid var(--tinte);
}
.suchfeld {
  flex: 1 1 220px; display: flex; align-items: center; gap: 10px; min-height: var(--feld-hoehe); padding: 0 var(--feld-px);
  background: var(--weiss); border: var(--kante) solid var(--tinte); border-radius: var(--rund); box-shadow: var(--versatz-klein);
  transition: border-color .15s var(--aus), box-shadow .15s var(--aus);
}
.suchfeld svg { width: 22px; height: 22px; color: var(--tinte-leise); }
.suchfeld input { flex: 1; min-width: 0; align-self: stretch; padding: var(--feld-py) 0; border: 0; outline: 0; background: transparent; font: var(--feld-schrift); -webkit-appearance: none; appearance: none; }
.suchfeld input::placeholder { color: var(--platzhalter); opacity: 1; }
.suchfeld input::-webkit-search-decoration, .suchfeld input::-webkit-search-results-button { -webkit-appearance: none; }
.suchfeld:focus-within { background: var(--feld-licht); box-shadow: var(--fokus-ring), var(--versatz-klein); }
.suchfeld input::-webkit-search-cancel-button { -webkit-appearance: none; width: 18px; height: 18px; cursor: pointer;
  /* das Kreuz ist eine Maske, die Farbe die Tinte leise der Spielzeit */
  background: var(--tinte-leise);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 18px no-repeat; }
.filter { display: flex; gap: 8px; flex-wrap: wrap; }

/* Wahlknöpfe (Filter, Zugehörigkeit, Kategorie, Status) */
.wahl {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--feld-hoehe-klein); padding: 0 16px;
  border: var(--kante) solid var(--tinte); border-radius: 999px; background: var(--weiss);
  font: 700 16px/1 var(--schrift); white-space: nowrap; user-select: none;
  transition: transform .18s var(--aus), background-color .18s var(--aus);
}
.wahl:hover { transform: translateY(-1px); }
.wahl[aria-checked="true"], .wahl[aria-pressed="true"] { background: var(--spot); box-shadow: var(--versatz-klein); }
.wahl:has(.koepfchen) { padding-left: 6px; }
.wahl .koepfchen { width: 36px; height: 42px; margin: -8px 0 -6px; }
.wahl .koepfchen + .koepfchen { margin-left: -18px; }
.wahl:has(.farbklecks) { padding-left: 12px; }
.wahl .farbklecks { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tinte); }
.wahl:has(svg) { padding-left: 12px; }
.wahl svg { width: 18px; height: 18px; flex: none; }

/* ---------- Die Bühne: Rundhorizont, Licht und Dunst ---------- */

/* Der Prospekt steht still hinter der Bühne; die Schilder rollen davor */
.prospekt, .buehne, .umbau, .dunst { grid-row: 3; grid-column: 1; }
.prospekt {
  position: relative; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(130% 60% at 50% 112%, rgba(255, 206, 110, .32), rgba(255, 206, 110, 0) 62%),
    radial-gradient(110% 70% at 50% -12%, rgba(240, 255, 255, .22), rgba(240, 255, 255, 0) 58%),
    linear-gradient(180deg, var(--rund-dunkel) 0%, var(--rund-mitte) 26%, var(--prospekt) 54%, var(--rund-hell) 80%, var(--rund-fuss) 100%);
}
.prospekt::before { content: ""; position: absolute; inset: 0; background: var(--korn); opacity: .32; mix-blend-mode: overlay; }
.prospekt::after { content: ""; position: absolute; inset: 0; background: radial-gradient(85% 80% at 50% 45%, color-mix(in srgb, var(--wurf) 0%, transparent) 52%, color-mix(in srgb, var(--wurf) 50%, transparent) 100%); }
/* Scheinwerfer auf dem Prospekt: weiche Lichtflecken, die leicht wabern */
.licht { position: absolute; border-radius: 50%; will-change: transform, opacity; animation: wabern 11s ease-in-out infinite alternate; }
.licht.l1 { width: 80vmax; height: 80vmax; left: -34vmax; top: -44vmax; background: radial-gradient(closest-side, rgba(255, 250, 225, .55), rgba(255, 250, 225, .18) 55%, rgba(255, 250, 225, 0)); }
.licht.l2 { width: 74vmax; height: 74vmax; right: -30vmax; top: -38vmax; background: radial-gradient(closest-side, rgba(225, 245, 255, .45), rgba(225, 245, 255, .14) 55%, rgba(225, 245, 255, 0)); animation-duration: 14s; animation-delay: -6s; }
.licht.l3 { width: 56vmax; height: 40vmax; left: calc(50% - 28vmax); top: 30%; background: radial-gradient(closest-side, rgba(255, 228, 160, .36), rgba(255, 228, 160, 0)); animation-duration: 9s; animation-delay: -3s; }
@keyframes wabern {
  0% { opacity: .72; transform: translate3d(0, 0, 0) scale(1); }
  30% { opacity: .96; }
  55% { opacity: .8; transform: translate3d(1.4vmax, .7vmax, 0) scale(1.04); }
  80% { opacity: 1; }
  100% { opacity: .86; transform: translate3d(-1vmax, 1.3vmax, 0) scale(1.07); }
}
.buehne {
  position: relative; z-index: 1; overflow: auto; overscroll-behavior: contain; outline: 0;
  padding-bottom: calc(var(--puppen-luft) + var(--versenkung));
  scroll-padding-bottom: calc(var(--versenkung) + 24px);
  -webkit-overflow-scrolling: touch;
}
/* Dunst vor der Szene: zieht langsam, oben dichter; Lichtstrahlen fallen hindurch */
.dunst { position: relative; z-index: 2; overflow: hidden; pointer-events: none; }
.dunst::before {
  content: ""; position: absolute; inset: -40%; background: var(--dunst-bild) 0 0 / 760px 760px repeat; opacity: .2;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .2)); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .2));
  will-change: transform; animation: dunst 70s linear infinite alternate;
}
@keyframes dunst { to { transform: translate3d(9%, -5%, 0); } }
/* Die Bühnenkante: wo der Boden ins Bällebad abfällt, liegt ein weicher Schatten. Was tiefer sinkt, gerät hinein
   und verschwindet dann hinter der hintersten Ballreihe (js/kante.js lässt die Bälle dabei spritzen). */
.dunst::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--versenkung) + 38px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--becken) 0%, transparent), color-mix(in srgb, var(--becken) 34%, transparent) 38px, color-mix(in srgb, var(--becken) 60%, transparent));
}
.buehne.dicht ~ .dunst { opacity: .35; }
.strahl { position: absolute; top: -6%; height: 112%; width: 38vmax; filter: blur(16px); transform-origin: 50% 0; will-change: transform, opacity; animation: schwenk 17s ease-in-out infinite alternate; }
.strahl::before {
  content: ""; position: absolute; inset: 0; clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 249, 220, .3), rgba(255, 249, 220, .09) 62%, rgba(255, 249, 220, 0));
}
.strahl.s1 { --r: 16deg; left: -8vmax; }
.strahl.s2 { --r: -15deg; right: -8vmax; animation-duration: 21s; animation-delay: -8s; }
.strahl.s3 { --r: 2deg; left: calc(50% - 19vmax); opacity: .55; animation-duration: 13s; animation-delay: -4s; }
@keyframes schwenk {
  0% { transform: rotate(var(--r)); opacity: .75; }
  50% { opacity: 1; }
  100% { transform: rotate(calc(var(--r) + 3.5deg)); opacity: .82; }
}

/* ---------- Rampe und Spielleiste unten ---------- */

.rampe { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; pointer-events: none; }
/* Die Spielleiste ist der gepolsterte Rand des Bällebads in pinkem Plüsch. Fell und Rampenlampen malt js/flausch.js
   auf eine Leinwand, die oben über die Leiste hinausragt; bis dahin steht hier der Grundton des Fells. */
.spielleiste {
  pointer-events: auto; position: relative; display: flex; justify-content: center; align-items: end;
  height: calc(var(--leiste-h) + var(--sicher-unten)); padding: 0 max(8px, env(safe-area-inset-right)) var(--sicher-unten) max(8px, env(safe-area-inset-left));
  background: linear-gradient(180deg, var(--pluesch), var(--pluesch-mitte) 55%, var(--pluesch-tief));
}
.flausch { position: absolute; pointer-events: none; }
.spielleiste.gemalt, .einlass-leiste.gemalt { background: none; }
.namensbrett {
  position: absolute; left: 10px; top: 50%; translate: 0 -50%;
  font: 900 13px/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .06em;
  color: var(--bretter); background: var(--tinte); padding: 6px 9px 5px; border-radius: 4px; transform: rotate(-2deg);
}
.namensbrett[data-seite="rechts"] { left: auto; right: 10px; transform: rotate(2deg); }
.namensbrett:empty { display: none; }
/* ins Fell gesteckt: unten drückt es den Flor ein und wirft einen weichen Schatten hinein */
.spielleiste .namensbrett { box-shadow: 0 1px 0 color-mix(in srgb, var(--tinte) 45%, transparent), 0 5px 8px -2px color-mix(in srgb, var(--pluesch-tief) 60%, transparent); }
@media (min-width: 900px) {
  .namensbrett { font-size: 16px; padding: 7px 12px 6px; }
}

/* Seitenvorhänge am grossen Bildschirm */
@media (min-width: 900px) {
  .saal::before, .saal::after {
    content: ""; position: fixed; z-index: 18; top: 0; bottom: calc(var(--leiste-h) + var(--sicher-unten) + var(--vorbuehne)); width: clamp(34px, 4.2vw, 76px); pointer-events: none;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--samt-licht) 14%, transparent), rgba(0, 0, 0, 0) 35%, color-mix(in srgb, var(--samt-dunkel) 45%, transparent)),
      var(--samt);
    border: 0 solid color-mix(in srgb, var(--tinte) 80%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--wurf) 55%, transparent);
  }
  .saal::before { left: 0; border-right-width: var(--kante); border-bottom-right-radius: 70% 22%; }
  .saal::after { right: 0; border-left-width: var(--kante); border-bottom-left-radius: 70% 22%; }
  .buehne, .umbau, .suchleiste, .prospekt, .dunst { margin: 0 clamp(34px, 4.2vw, 76px); }
  /* die Puppen stehen links und rechts auf der Vorbühne, die Schilder bleiben dazwischen */
  .buehne { padding-inline: var(--fluegel); }
  .suchleiste { padding-inline: var(--fluegel); }
  /* die Zeitleiste läuft von Vorhang zu Vorhang, die Vorhänge decken den Rand */
  .zeitleiste { margin-inline: calc(-1 * var(--fluegel)); padding-inline: var(--fluegel); scroll-padding-inline: var(--fluegel); }
}

/* ---------- Schilder ---------- */

.schild {
  --kipp: 0deg;
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  border: 0; padding: 0; background: none; text-align: left; color: var(--tinte);
  -webkit-user-select: none; user-select: none; touch-action: pan-y; -webkit-touch-callout: none;
}
.schild-platte {
  position: relative; display: grid; gap: 4px; width: 100%;
  background: var(--korn), linear-gradient(172deg, #FFFFFF 0%, #FBF9F3 55%, #EFEADF 100%);
  background-blend-mode: soft-light, normal;
  border: var(--kante) solid var(--tinte); border-radius: var(--rund);
  box-shadow: var(--versatz); padding: 9px 11px 9px;
  transform: rotate(var(--kipp)); transition: transform .3s var(--feder), box-shadow .25s var(--aus), background-color .2s var(--aus);
}
.schild-stab { width: 6px; height: 30px; background: linear-gradient(90deg, #4E3018, #A2733F 45%, #63401F); border-radius: 0 0 3px 3px; margin-top: -1px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinte) 55%, transparent), 3px 6px 8px color-mix(in srgb, var(--wurf) 35%, transparent); }
.schild-fuss { width: 34px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--tinte) 28%, transparent); margin-top: -3px; filter: blur(1.5px); }
/* Titel: so wenig Umbrüche wie möglich, Wörter werden nicht zerschnitten */
.schild-titel {
  margin: 0; font: 900 17px/1.06 var(--schrift-schild); text-transform: uppercase; letter-spacing: .005em;
  overflow-wrap: break-word; hyphens: manual; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  padding-right: 30px;
}
/* zwei Köpfchen brauchen mehr Platz am Ende der Titelzeile */
.schild-platte:has(.koepfchen + .koepfchen) .schild-titel { padding-right: 48px; }
/* die Fusszeile richtet sich nach dem Titel und bricht selbst um, statt das Schild zu verbreitern */
.schild-fuss-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 700 12px/1.2 var(--schrift); contain: inline-size; }
.kat {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 5px; border-radius: 4px;
  background: color-mix(in oklab, var(--kf, var(--k-tuerkis)) 32%, white); border: 2px solid var(--tinte);
}
.kat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kf, var(--k-tuerkis)); border: 1.5px solid var(--tinte); }
.termin { color: var(--tinte-mitte); }
/* privates Schild: Etikett in Tinte mit Schloss, nur die Person, die es angelegt hat, sieht es */
.geheim, .zeile-titel .geheim {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px; border-radius: 4px;
  background: var(--tinte); color: var(--weiss); border: 2px solid var(--tinte);
}
.geheim svg { width: 12px; height: 12px; flex: none; }
/* Zähler: abgehakte To-dos und fertige Unterprojekte; ist alles durch, steht er in Bravo-Rot */
.zaehler, .zeile-titel .zaehler, .unter-titel .zaehler { display: inline-flex; align-items: center; gap: 3px; color: var(--tinte-mitte); font-variant-numeric: tabular-nums; }
.zaehler svg { width: 13px; height: 13px; flex: none; }
/* Unterprojekt im Spielplan: zu welchem Schild es gehört, eine eigene Zeile über den Etiketten */
.teil-von { display: flex; align-items: center; gap: 4px; flex-basis: 100%; min-width: 0; font-weight: 800; color: var(--tinte-mitte); }
.teil-von svg { width: 13px; height: 13px; flex: none; }
.zaehler.voll, .zeile-titel .zaehler.voll, .unter-titel .zaehler.voll { color: var(--vorhang); }
.nr { margin-left: auto; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.stempel {
  position: absolute; left: -12px; top: -15px; z-index: 2; padding: 4px 8px 3px;
  font: 900 13px/1 var(--schrift-schild); letter-spacing: .06em; text-transform: uppercase;
  border: 2.5px solid currentColor; border-radius: 4px; transform: rotate(-9deg); background: var(--weiss);
}
.stempel.laeuft { color: var(--tinte); background: var(--spot); }
.stempel.fertig { color: var(--vorhang); }
.stempel.fundus { color: var(--weiss); background: var(--tinte); border-color: var(--tinte); }

/* Köpfchen der Person, die das Schild angelegt hat: klebt oben rechts wie ein Sticker */
.koepfe { position: absolute; right: -14px; top: -20px; display: flex; flex-direction: row-reverse; z-index: 3; pointer-events: none; }
.koepfchen { width: 38px; height: 44px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--tinte) 35%, transparent)); }
.koepfe .koepfchen + .koepfchen { margin-right: -16px; transform: rotate(-8deg) scale(.88); }

.schild:hover .schild-platte { transform: rotate(var(--kipp)) translateY(-2px); }
.schild:focus-visible { outline: 0; box-shadow: none; }
:where(:root:not(.lichter)) .schild:focus-visible .schild-platte { outline: 3px solid var(--spot); outline-offset: 3px; box-shadow: var(--versatz), 0 0 0 7px var(--tinte); }
.schild.im-spot .schild-platte { background: var(--korn), linear-gradient(172deg, #FFFFB8, var(--spot)); }
.schild.zieht { z-index: 50; }
.schild.zieht .schild-platte { transform: rotate(calc(var(--kipp) + 3deg)) scale(1.06); box-shadow: var(--versatz-hoch); }
.schild.gedimmt { opacity: .28; filter: saturate(.3); }
.schild.neu-gelandet .schild-platte { animation: klack .55s var(--feder); }
@keyframes klack {
  0% { transform: rotate(var(--kipp)) translateY(-26px) scale(1.08); }
  45% { transform: rotate(calc(var(--kipp) - 4deg)) translateY(0) scale(1); }
  70% { transform: rotate(calc(var(--kipp) + 2.5deg)); }
  100% { transform: rotate(var(--kipp)); }
}
.schild.wackelt .schild-platte { animation: wackeln .5s var(--aus); }
@keyframes wackeln { 0%, 100% { transform: rotate(var(--kipp)); } 30% { transform: rotate(calc(var(--kipp) - 5deg)); } 60% { transform: rotate(calc(var(--kipp) + 3deg)); } }

/* ---------- Der Umbau ---------- */

/* Beim Wechsel des Bühnenbilds fliegen Doppelgänger der Schilder (js/umbau.js): vor der Bühne,
   hinter Dunst, Saum, Seitenvorhängen und Puppen. Die echten Schilder warten unsichtbar auf ihrem Platz. */
.umbau { position: relative; z-index: 1; overflow: hidden; pointer-events: none; }
/* die alte Kulisse liegt unter den Fliegern, obwohl sie die Klasse der Bühne trägt */
.umbau-alt { position: absolute !important; z-index: 0 !important; margin: 0 !important; overflow: hidden !important; }
.umbau-alt [data-id], .umbau-wartet { visibility: hidden; }
.umbau-huelle { display: contents !important; }
.umbau-huelle::before, .umbau-huelle::after { content: none !important; }
.umbau-flieger { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.umbau-gesicht { position: absolute; will-change: transform, opacity; }
/* eine Zeile aus dem Programmzettel fliegt als ausgeschnittener Papierstreifen */
.umbau-gesicht .zeile { background: var(--weiss); border-radius: 4px; }
.umbau-schatten { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--wurf) 60%, transparent), color-mix(in srgb, var(--wurf) 22%, transparent) 55%, color-mix(in srgb, var(--wurf) 0%, transparent)); opacity: 0; will-change: transform, opacity; }

/* ---------- Bühnenbild: Spielfeld ---------- */

.feld { position: relative; min-height: 100%; }
.feld .schild { position: absolute; left: 0; top: 0; width: max-content; min-width: 140px; max-width: min(300px, calc(100% - 28px)); transform-origin: 50% 100%; }
@media (max-width: 899px) { .feld .schild-titel { font-size: 16px; } }
.feld .schild-fuss { display: none; }
.feld .schild-stab { height: 34px; }
.feld .schild.hinten { scale: .9; }
.feld .schild.hinten .schild-platte { box-shadow: var(--versatz-klein); }
.feld .schild.hinten { filter: brightness(.94); }
/* eine Kulissenschiene: der Schlitz im Bühnenboden, in dem die Stäbe stecken */
.schiene {
  position: absolute; left: -14px; right: -14px; height: 10px; margin-top: -4px;
  background: linear-gradient(180deg, var(--schlitz-tief), var(--schlitz) 45%, var(--schlitz-kante));
  border-top: 2px solid color-mix(in srgb, var(--wurf) 85%, transparent); box-shadow: inset 0 3px 4px rgba(0, 0, 0, .45), 0 1px 0 color-mix(in srgb, var(--schlitz-licht) 22%, transparent);
  transition: background .2s var(--aus);
}
.schiene.hinten { opacity: .8; }
.schiene.ziel { background: linear-gradient(180deg, #C9B21C, var(--spot)); }
.kein-treffer { position: fixed; inset: 0; pointer-events: none; }
@media (min-width: 900px) { .feld .schild { max-width: min(340px, calc(100% - 28px)); } .feld .schild-titel { font-size: 19px; } .schiene { left: 0; right: 0; } }
.feld-leer {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center;
}
.leer-tafel {
  max-width: 360px; background: var(--weiss); border: var(--kante) solid var(--tinte); border-radius: var(--rund); box-shadow: var(--versatz);
  padding: 18px 20px; transform: rotate(-1.5deg);
}
.leer-tafel h2 { margin: 0 0 6px; font: 900 22px/1.05 var(--schrift-schild); text-transform: uppercase; }
.leer-tafel p { margin: 0; }

/* ---------- Bühnenbild: Board ---------- */

.board {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 360px); gap: 14px;
  min-height: 100%; padding: 22px 14px 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 14px;
}
@media (min-width: 900px) { .board { grid-auto-columns: 1fr; overflow: visible; padding: 28px 28px 0; gap: 24px; } }
.gasse { position: relative; isolation: isolate; scroll-snap-align: start; display: flex; flex-direction: column; gap: 22px; min-height: 60vh; padding: 0 6px 30px; border-radius: 10px; }
.gasse-kopf {
  position: sticky; top: 0; z-index: 4; align-self: flex-start; display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px -4px;
  font: 900 20px/1 var(--schrift-schild); text-transform: uppercase; color: var(--weiss);
  background: var(--tinte); padding: 9px 13px 8px; border-radius: 6px; transform: rotate(-1.5deg);
}
.gasse-kopf small { font: 700 14px/1 var(--schrift); color: var(--bretter); font-variant-numeric: tabular-nums; }
.gasse-unter { margin: -14px 0 0 2px; font: 700 13px/1.3 var(--schrift); color: var(--tinte); }
.gasse .schild { width: 100%; }
.gasse .schild-stab, .gasse .schild-fuss { display: none; }
.gasse[data-status="idee"] .schild:nth-child(odd) { --kipp: -1.2deg; }
.gasse[data-status="idee"] .schild:nth-child(even) { --kipp: 1deg; }
/* Läuft steht im Spot: ein weicher Lichtkegel von oben, der leicht wabert */
.gasse[data-status="laeuft"]::before {
  content: ""; position: absolute; inset: -60px -46px -20px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 72% at 50% 0%, rgba(255, 250, 214, .85), rgba(255, 250, 214, .32) 55%, rgba(255, 250, 214, 0) 78%),
    radial-gradient(62% 16% at 50% 96%, rgba(255, 244, 196, .5), rgba(255, 244, 196, 0) 72%);
  filter: blur(6px); will-change: opacity; animation: flackern 7s ease-in-out infinite alternate;
}
@keyframes flackern { 0% { opacity: .82; } 40% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: .97; } }
.gasse.ziel { outline: 3px dashed var(--tinte); outline-offset: 4px; }
.einfuege-marke { height: 4px; background: var(--tinte); margin: -13px 0 -9px; }
.gasse-leer { font: 700 14px/1.35 var(--schrift); color: var(--tinte); padding: 10px 2px; }

/* ---------- Bühnenbild: Spielplan ---------- */

.spielplan { padding: 22px 14px 0; display: grid; gap: 26px; max-width: 760px; margin: 0 auto; }
.ohne-termin { display: grid; gap: 10px; }
.abschnitt-kopf {
  justify-self: start; display: flex; align-items: baseline; gap: 10px; margin: 0;
  font: 900 21px/1 var(--schrift-schild); text-transform: uppercase; color: var(--weiss);
  background: var(--tinte); padding: 9px 13px 8px; border-radius: 6px; transform: rotate(-1deg);
}
.abschnitt-kopf small { font: 700 14px/1 var(--schrift); color: var(--bretter); }
/* Die Reihe scrollt und schneidet ab, was über ihren Rand ragt: Innen ist Platz für Stempel, Köpfchen und den ganzen Schatten,
   die Aussenränder nehmen ihn zurück, damit die Schilder dort stehen bleiben, wo sie standen */
.reihe-schilder { display: flex; gap: 14px; overflow-x: auto; padding: 26px 18px 44px; margin: -8px -14px -30px; scroll-padding-inline: 18px; scroll-snap-type: x proximity; }
/* breit läuft sie wie die Zeitleiste von Vorhang zu Vorhang (der Spielplan hat dort links 14px Polster, rechts keins) */
@media (min-width: 900px) {
  .reihe-schilder { margin-inline: calc(-14px - var(--fluegel)) calc(-1 * var(--fluegel)); padding-inline: calc(18px + var(--fluegel)); scroll-padding-inline: calc(18px + var(--fluegel)); }
}
.reihe-schilder .schild { flex: none; width: max-content; min-width: 160px; max-width: 280px; scroll-snap-align: start; }
.reihe-schilder .schild-stab, .reihe-schilder .schild-fuss { display: none; }
.monat { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.monat-name { position: sticky; top: 8px; display: grid; justify-items: center; padding: 8px 4px; background: var(--weiss); border: var(--kante) solid var(--tinte); border-radius: var(--rund); box-shadow: var(--versatz-klein); }
.monat-name b { font: 900 17px/1 var(--schrift-schild); text-transform: uppercase; }
.monat-name small { font: 700 12px/1.2 var(--schrift); font-variant-numeric: tabular-nums; }
.monat.jetzt .monat-name { background: var(--spot); }
.monat-schilder { display: grid; gap: 30px; padding-top: 14px; }
.monat-schilder .schild { width: 100%; }
.monat-schilder .schild-stab, .monat-schilder .schild-fuss { display: none; }
.dauer { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--tinte) 12%, transparent); margin-top: 2px; }
.dauer i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--tinte); }
.jetzt-strich { display: flex; align-items: center; gap: 10px; font: 900 14px/1 var(--schrift-schild); text-transform: uppercase; color: var(--tinte); }
.jetzt-strich::after { content: ""; flex: 1; height: 4px; background: var(--spot); border: 2px solid var(--tinte); border-radius: 4px; }

/* Spielplan breit: Monate waagrecht, Projekte als Balken */
.zeitleiste { --spalte: 168px; position: relative; overflow-x: auto; padding: 0 0 20px; }
.zeitleiste-innen { position: relative; min-height: 280px; }
.zeit-monate { display: flex; position: sticky; top: 0; z-index: 3; }
.zeit-monate div {
  flex: 0 0 var(--spalte); padding: 9px 10px 8px; border-right: 2px dashed color-mix(in srgb, var(--tinte) 25%, transparent);
  font: 900 15px/1 var(--schrift-schild); text-transform: uppercase; color: var(--tinte);
}
.zeit-monate div small { font: 700 12px/1 var(--schrift); margin-left: 4px; }
.zeit-monate div.jetzt { background: var(--spot); border: 2px solid var(--tinte); border-radius: 6px 6px 0 0; }
.zeit-gitter { position: absolute; inset: 34px 0 0; display: flex; pointer-events: none; }
.zeit-gitter div { flex: 0 0 var(--spalte); border-right: 2px dashed color-mix(in srgb, var(--tinte) 18%, transparent); }
.zeit-heute { position: absolute; top: 34px; bottom: 0; width: 4px; background: var(--tinte); z-index: 0; border-radius: 2px; }
.zeit-heute-schild { position: absolute; top: 42px; z-index: 4; font: 900 12px/1 var(--schrift-schild); text-transform: uppercase; background: var(--spot); border: 2px solid var(--tinte); padding: 4px 6px 3px; border-radius: 4px; white-space: nowrap; }
.zeit-eintrag { position: absolute; z-index: 1; display: flex; align-items: center; gap: 0; }
.zeit-eintrag .schild { width: max-content; min-width: 190px; max-width: 320px; flex: none; }
.zeit-eintrag .schild-stab, .zeit-eintrag .schild-fuss { display: none; }
.zeit-balken { height: 12px; border: var(--kante) solid var(--tinte); border-left: 0; border-radius: 0 6px 6px 0; background: var(--weiss); margin-left: -2px; }
.zeit-balken.laeuft { background: var(--spot); }
.zeit-balken.fertig { background: color-mix(in oklab, var(--tinte) 17%, white); }

/* ---------- Bühnenbild: Programmzettel ---------- */

.zettel {
  position: relative; max-width: 780px; margin: 22px auto 0; background: var(--weiss);
  border: var(--kante) solid var(--tinte); border-radius: 4px; box-shadow: var(--versatz);
  padding: 22px 0 10px;
}
@media (max-width: 820px) { .zettel { margin: 18px 10px 0; } }
.zettel-kopf { padding: 0 20px 14px; border-bottom: var(--kante) double var(--tinte); display: grid; gap: 12px; }
.zettel-kopf h2 { margin: 0; font: 900 clamp(26px, 6vw, 38px)/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .01em; }
.zettel-kopf h2 small { display: block; margin-top: 6px; font: 700 15px/1.2 var(--schrift); text-transform: none; color: var(--tinte-leise); }
.zettel-steuer { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeile {
  display: grid; grid-template-columns: 46px 40px 1fr auto; gap: 4px 12px; align-items: center;
  padding: 10px 20px; border-bottom: 2px dotted color-mix(in srgb, var(--tinte) 30%, transparent); cursor: pointer;
  transition: background-color .15s var(--aus);
}
.zeile:hover, .zeile:focus-visible { background: color-mix(in oklab, var(--spot) 45%, white); outline: 0; box-shadow: none; }
.zeile.im-spot { background: var(--spot); }
.zeile-nr { font: 900 18px/1 var(--schrift-schild); font-variant-numeric: tabular-nums; color: var(--tinte-leise); text-align: right; }
.zeile .koepfchen { width: 40px; height: 44px; }
.zeile-titel { all: unset; box-sizing: border-box; cursor: pointer; min-width: 0; display: grid; gap: 4px; }
:where(:root:not(.lichter)) .zeile-titel:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }
.zeile-titel b { font: 800 17px/1.15 var(--schrift-schild); overflow-wrap: anywhere; }
.zeile-titel span { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 700 13px/1.2 var(--schrift); color: var(--tinte-leise); }
.zeile-status { font: 900 12px/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .05em; padding: 5px 7px 4px; border: 2px solid var(--tinte); border-radius: 4px; white-space: nowrap; }
.zeile-status.laeuft { background: var(--spot); }
.zeile-status.fertig { color: var(--vorhang); border-color: var(--vorhang); }
.zeile-status.fundus { background: var(--tinte); color: var(--weiss); }
.zeile-aktionen { grid-column: 3 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.zettel-fuss { padding: 14px 20px 6px; font: 700 14px/1.3 var(--schrift); color: var(--tinte-leise); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.zettel-leer { padding: 26px 20px; font-weight: 700; }
@media (max-width: 560px) {
  .zeile { grid-template-columns: 30px 34px 1fr; padding: 10px 14px; }
  .zeile-status { grid-column: 3; justify-self: start; }
  .zeile-nr { font-size: 15px; }
  .zeile .koepfchen { width: 34px; height: 38px; }
}

/* ---------- Knöpfe und Felder ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border: var(--kante) solid var(--tinte); border-radius: var(--rund); background: var(--weiss); box-shadow: var(--versatz-klein);
  font: 900 16px/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; color: var(--tinte);
  transition: transform .15s var(--aus), box-shadow .15s var(--aus), background-color .15s var(--aus);
}
.knopf:hover { transform: translateY(-1px); box-shadow: var(--versatz); }
.knopf:active { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tinte) 50%, transparent), 0 1px 3px color-mix(in srgb, var(--wurf) 30%, transparent); }
.knopf.haupt { background: linear-gradient(180deg, #FFD663, var(--bretter)); }
.knopf.haupt:hover { background: var(--spot); }
.knopf.leise { background: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.knopf.leise:hover { transform: none; box-shadow: none; }
.knopf.warnung { color: var(--vorhang); border-color: var(--vorhang); }
.knopf.klein { min-height: 38px; padding: 0 12px; font-size: 13px; }
.knopf[disabled] { opacity: .45; pointer-events: none; }
.knopf svg { width: 20px; height: 20px; }

.feld { display: grid; gap: 8px; font: var(--feldname); letter-spacing: .01em; }
.feld > span:first-child { padding-left: 2px; }
.feld input, .feld textarea, .feld select, .eingabe {
  display: block; width: 100%; min-height: var(--feld-hoehe); padding: var(--feld-py) var(--feld-px); margin: 0;
  border: var(--kante) solid var(--tinte); border-radius: var(--rund);
  background: var(--weiss); color: var(--tinte); font: var(--feld-schrift); letter-spacing: .005em; outline: 0;
  transition: border-color .15s var(--aus), box-shadow .15s var(--aus), transform .15s var(--aus);
}
.feld textarea { line-height: 1.5; padding-block: 12px; }
.eingabe.klein { min-height: var(--feld-hoehe-klein); padding: 8px 12px; font-size: 16px; }
.feld input:hover, .feld textarea:hover, .eingabe:hover { border-color: var(--tinte-leise); }
/* im Fokus steht das Feld im Spot: Tintenkante, gelber Lichtring, warmes Licht von oben und ein Hauch Hub */
.feld input:focus, .feld textarea:focus, .eingabe:focus { border-color: var(--tinte); background: var(--feld-licht); box-shadow: var(--fokus-ring), var(--versatz-klein); transform: translateY(-1px); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--rot); }
:where(:root:not(.lichter)) .feld input[aria-invalid="true"]:focus, :where(:root:not(.lichter)) .feld textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px #FFD2DA, 0 0 0 6px var(--rot), var(--versatz-klein); }
.feld input::placeholder, .feld textarea::placeholder, .eingabe::placeholder { color: var(--platzhalter); opacity: 1; }
.feld input[type="password"]:not(:placeholder-shown) { letter-spacing: .14em; }
.fehlertext { margin: 0; color: var(--rot); font: 700 15px/1.35 var(--schrift); }
/* leer nimmt die Meldung keinen Platz im Raster ein, bleibt aber als Live-Region erhalten */
.fehlertext:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0 !important; background: none !important; }

/* ---------- Rückseite: der Schild-Editor ---------- */

.rueckseite {
  position: fixed; z-index: 60; margin: 0; padding: 0; border: 0; background: transparent; color: var(--tinte);
  inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: min(90dvh, 900px); overflow: visible;
}
.rueckseite[open] { display: flex; }
.rueckseite::backdrop { background: color-mix(in srgb, var(--tinte) 55%, transparent); }
.rueckseite-platte {
  position: relative; width: 100%; max-height: min(90dvh, 900px); overflow: auto; overscroll-behavior: contain;
  background: var(--weiss); border: var(--kante) solid var(--tinte); border-bottom: 0; border-radius: 16px 16px 0 0;
  padding: 18px 18px calc(22px + var(--sicher-unten)); display: grid; gap: 18px; align-content: start;
  animation: hoch .42s var(--aus);
}
@keyframes hoch { from { transform: translateY(40%); opacity: .4; } }
@media (min-width: 900px) {
  .rueckseite { inset: calc(var(--saum-h) + 18px) clamp(34px, 4.2vw, 76px) auto auto; width: 460px; max-height: calc(100dvh - var(--saum-h) - var(--leiste-h) - 40px); }
  .rueckseite-platte { border-bottom: var(--kante) solid var(--tinte); border-radius: var(--rund); box-shadow: var(--versatz); max-height: inherit; animation-name: rein; }
  @keyframes rein { from { transform: translateX(60px) rotate(2deg); opacity: 0; } }
  .rueckseite::backdrop { background: transparent; }
}
.rs-kopf { display: flex; align-items: flex-start; gap: 10px; }
.rs-kopf .koepfchen { width: 46px; height: 52px; flex: none; }
.rs-meta { margin: -10px 0 0; font: 700 13px/1.35 var(--schrift); color: var(--tinte-leise); }
.rs-meta b { font: 900 14px/1.1 var(--schrift-schild); color: var(--tinte); font-variant-numeric: tabular-nums; }
.rs-zu { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: var(--kante) solid var(--tinte); border-radius: 50%; background: var(--weiss); }
.rs-zu:hover { background: var(--spot); }
.rs-titel {
  flex: 1; min-width: 0; width: 100%; border: 0; border-bottom: var(--kante) solid var(--tinte); padding: 4px 0 8px; resize: none; outline: 0; background: transparent;
  font: 900 26px/1.06 var(--schrift-schild); text-transform: uppercase; overflow: hidden; min-height: 1.2em;
}
/* beim Schreiben liegt ein Spot-Streifen über der Tintenlinie, wie ein Textmarker auf der Pappe */
.rs-titel:focus { background: linear-gradient(0deg, var(--spot) 0 7px, transparent 7px); }
.rs-titel::placeholder { color: var(--platzhalter); }
.rs-gruppe { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rs-gruppe > legend, .rs-gruppe > .rs-label, .feld > .rs-label { padding: 0; margin-bottom: 2px; font: var(--gruppenname); text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-leise); }
.wahl-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.status-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.status-wahl .wahl { justify-content: center; padding: 0 8px; border-radius: var(--rund); min-height: var(--feld-hoehe); font-family: var(--schrift-schild); font-weight: 900; text-transform: uppercase; font-size: 16px; letter-spacing: .02em; }
.status-wahl .wahl[data-wert="fertig"][aria-checked="true"] { background: var(--vorhang); color: var(--weiss); }
.datums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.datums .feld { min-width: 0; }
/* die Notiz wächst selbst mit, darum kein Ziehgriff */
.rs-notiz textarea { min-height: calc(3 * 1.5em + 24px + 6px); resize: none; max-height: 40vh; }
.rs-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 4px; border-top: 2px dotted color-mix(in srgb, var(--tinte) 30%, transparent); }
.gespeichert { font: 700 13px/1 var(--schrift); color: var(--tinte-leise); }

/* Rückseite eines Unterprojekts: der Weg zurück zum Hauptschild */
.rs-eltern {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; max-width: 100%; min-height: 40px;
  margin: -8px 0 -12px -6px; padding: 0 10px 0 2px; border-radius: 4px; cursor: pointer;
  font: 700 14px/1.2 var(--schrift); color: var(--tinte-leise);
}
.rs-eltern span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-eltern b { font-weight: 800; color: var(--tinte); }
.rs-eltern svg { width: 18px; height: 18px; flex: none; }
.rs-eltern:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:where(:root:not(.lichter)) .rs-eltern:focus-visible { outline: 3px solid var(--spot); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tinte); }

/* To-do-Listen: Listenname gemalt auf Tintenlinie, Punkte wie Zeilen im Programmzettel, abgehakt in Bravo-Rot */
.rs-listen, .rs-unter { gap: 6px; }
.rs-anlegen { justify-self: start; margin-top: 4px; }
.rs-anlegen svg { width: 16px; height: 16px; }
.todo { display: grid; min-width: 0; }
.todo + .todo { margin-top: 12px; }
.todo-kopf { display: flex; align-items: center; gap: 6px; border-bottom: var(--kante) solid var(--tinte); }
.todo-name {
  flex: 1; min-width: 0; padding: 8px 0 6px; border: 0; outline: 0; background: transparent; color: var(--tinte);
  font: 900 16px/1.1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .02em;
}
.todo-name:focus { background: linear-gradient(0deg, var(--spot) 0 6px, transparent 6px); }
.todo-zahl { font: 700 13px/1 var(--schrift); color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.todo-zahl.voll { color: var(--vorhang); }
.todo-punkte { list-style: none; margin: 0; padding: 0; }
.todo-punkt, .todo-neu {
  display: grid; grid-template-columns: 24px 44px minmax(0, 1fr) auto auto; align-items: start; min-height: 44px;
  border-bottom: 2px dotted color-mix(in srgb, var(--tinte) 30%, transparent); transition: background-color .15s var(--aus);
}
.todo-punkt:focus-within, .todo-neu:focus-within { background: color-mix(in oklab, var(--spot) 35%, white); }
.todo-haken { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.todo-haken svg {
  box-sizing: border-box; width: 28px; height: 28px; padding: 3px; border: var(--kante) solid var(--tinte); border-radius: 6px;
  background: var(--weiss); color: transparent; box-shadow: var(--versatz-klein);
  transition: background-color .15s var(--aus), transform .15s var(--aus);
}
.todo-haken:hover svg { transform: translateY(-1px); }
.todo-haken[aria-checked="true"] svg { background: var(--vorhang); color: var(--weiss); }
.todo-haken:focus-visible { outline: 0; box-shadow: none; }
:where(:root:not(.lichter)) .todo-haken:focus-visible svg { outline: 3px solid var(--spot); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tinte); }
.todo-text {
  display: block; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 11px 6px 10px 2px; border: 0; outline: 0; resize: none; overflow: hidden;
  background: transparent; color: var(--tinte); font: 600 16px/1.4 var(--schrift); field-sizing: content;
}
.todo-punkt.erledigt .todo-text { color: var(--tinte-leise); text-decoration: line-through 2px color-mix(in oklab, var(--vorhang) 75%, transparent); }
.todo-wer .koepfchen { width: 26px; height: 30px; margin-top: 7px; }
.todo-weg {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 44px; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--tinte-leise); cursor: pointer; font: 900 12px/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .05em;
}
.todo-weg svg { width: 16px; height: 16px; flex: none; }
.todo-weg:hover, .todo-weg.sicher { color: var(--vorhang); }
.todo-weg.sicher { padding: 0 6px; }
/* der Griff zum Umsortieren: am Handy sofort ziehbar, weil er selbst nicht rollt */
.todo-griff { width: 24px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--tinte-leise); cursor: grab; touch-action: none; }
.todo-griff svg { width: 18px; height: 18px; }
.todo-griff:hover { color: var(--tinte); }
/* wo die gezogene Zeile landet; sie selbst hebt sich wie ein gezogenes Schild */
.todo-marke { border-radius: 4px; background: color-mix(in oklab, var(--spot) 45%, white); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tinte) 25%, transparent); }
.todo-punkt.zieht { z-index: 80; border: 0; border-radius: 4px; background: var(--weiss); box-shadow: var(--versatz-hoch); transform: rotate(-1.5deg) scale(1.02); cursor: grabbing; }
/* mit Maus erscheinen Griff und Kreuz erst an der Zeile, am Handy stehen sie immer da */
@media (hover: hover) and (pointer: fine) {
  .todo-punkt:not(:hover, :focus-within) :is(.todo-weg, .todo-griff) { opacity: 0; }
}
.todo-neu { grid-template-columns: 44px minmax(0, 1fr); align-items: center; color: var(--tinte-leise); cursor: text; }
.todo .todo-neu { padding-left: 24px; }
.todo-neu svg { width: 18px; height: 18px; justify-self: center; }
.todo-neu input { min-width: 0; padding: 10px 6px 10px 2px; border: 0; outline: 0; background: transparent; color: var(--tinte); font: 600 16px/1.4 var(--schrift); }
.todo-neu input::placeholder { color: var(--platzhalter); opacity: 1; }
/* in Listenzeilen zeigt die getönte Zeile den Fokus, kein Ring ums Feld */
.todo-name:focus-visible, .todo-text:focus-visible, .todo-neu input:focus-visible { outline: 0; box-shadow: none; }

/* Unterprojekte: Zeilen wie im Programmzettel, jede führt auf ihre eigene Rückseite */
.unter { list-style: none; margin: 0; padding: 0; border-top: var(--kante) solid var(--tinte); }
.unter li { border-bottom: 2px dotted color-mix(in srgb, var(--tinte) 30%, transparent); }
.unter-zeile {
  all: unset; box-sizing: border-box; width: 100%; min-height: 54px; padding: 6px 2px; cursor: pointer;
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 18px; gap: 4px 10px; align-items: center;
  transition: background-color .15s var(--aus);
}
.unter-zeile:hover { background: color-mix(in oklab, var(--spot) 45%, white); }
:where(:root:not(.lichter)) .unter-zeile:focus-visible { outline: 3px solid var(--spot); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--tinte); border-radius: 4px; }
.unter-zeile .koepfchen { width: 30px; height: 34px; }
.unter-titel { min-width: 0; display: grid; gap: 3px; }
.unter-titel b { font: 800 16px/1.15 var(--schrift-schild); overflow-wrap: anywhere; }
.unter-titel > span { display: flex; flex-wrap: wrap; gap: 2px 10px; font: 700 12px/1.2 var(--schrift); color: var(--tinte-leise); }
.unter-pfeil { width: 18px; height: 18px; color: var(--tinte-leise); }
.rs-unter > .rs-label + .unter-neu { border-top: var(--kante) solid var(--tinte); }

/* ---------- Auftritt: eine neue Idee ---------- */

.auftritt {
  position: fixed; inset: 0; z-index: 74; display: grid; place-items: center; padding: 20px 16px calc(var(--leiste-h) + var(--vorbuehne) + 70px);
}
/* Saallicht aus und der Spot auf das neue Schild: unter den Puppen, damit ihr Stab hinter dem Formular verschwindet */
body.im-auftritt::before, body.im-auftritt::after { content: ""; position: fixed; z-index: 69; pointer-events: none; }
body.im-auftritt::before { inset: 0; background: color-mix(in srgb, var(--tinte) 72%, transparent); animation: saallicht .3s var(--aus); }
@keyframes saallicht { from { opacity: 0; } }
body.im-auftritt::after {
  left: 50%; top: -8%; width: min(130vw, 980px); height: 92%; transform: translateX(-50%); filter: blur(10px);
  background: radial-gradient(38% 100% at 50% 0%, rgba(255, 250, 215, .34), rgba(255, 250, 215, .12) 60%, rgba(255, 250, 215, 0) 80%);
  animation: saallicht .3s var(--aus), flackern 6s ease-in-out .3s infinite alternate;
}
.auftritt-form { position: relative; width: min(100%, 460px); display: grid; gap: 16px; }
.schild-platte.gross { padding: 18px 18px 16px; transform: rotate(-1.5deg); }
.auftritt textarea {
  width: 100%; border: 0; outline: 0; resize: none; background: transparent; padding: 0;
  font: 900 30px/1.05 var(--schrift-schild); text-transform: uppercase; overflow: hidden; min-height: 2.2em;
}
.auftritt textarea::placeholder { color: var(--platzhalter); opacity: .8; }
.auftritt-wahl { display: grid; gap: 10px; }
.auftritt-knoepfe { display: flex; justify-content: flex-end; gap: 10px; }
.auftritt .knopf.leise { color: var(--weiss); }

/* ---------- Puppen ---------- */

.puppen { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
/* Das Bällebad: der Boden vor dem Prospekt, ein Becken voller Plastikbälle (gemalt in js/bad.js).
   Hinter den Puppen liegt das Bild im Becken, die vordersten Bälle liegen in der Puppen-Ebene davor. */
.vorbuehne {
  position: fixed; left: 0; right: 0; z-index: 30; bottom: calc(var(--leiste-h) + var(--sicher-unten)); height: var(--vorbuehne);
  touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer;
  /* das Becken ist dunkel, bis die Bälle gemalt sind: dahinter versunkene Schilder scheinen nicht durch */
  background: linear-gradient(180deg, color-mix(in srgb, var(--becken) 0%, transparent) 6px, var(--becken) 6px, var(--becken-grund));
}
.bad-bild { position: absolute; left: 0; width: 100%; pointer-events: none; }
/* oben Luft für springende Bälle, unten steckt die vorderste Reihe hinter der Spielleiste */
.vorbuehne .bad-bild { bottom: -26px; height: calc(100% + 186px); }
.puppen .bad-bild { z-index: 1; }
/* die Bühnenbilder: Tippflächen über den bedruckten Bällen; Bild und Wort malt das Bad */
.bad-kugeln { position: absolute; inset: 0; }
.bad-kugel { position: absolute; border-radius: 50%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bad-kugel > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(:root:not(.lichter)) .bad-kugel:focus-visible { outline: 3px solid var(--spot); outline-offset: 2px; box-shadow: 0 0 0 6px var(--tinte); border-radius: 50%; }
.konfetti { position: fixed; inset: 0; z-index: 47; width: 100%; height: 100%; pointer-events: none; }

/* Das Konfettifest (js/fest.js): Kanonen schieben sich hinter den Seitenvorhängen hervor (am Handy vom Bildrand),
   im Schnürboden kippen Jutesäcke unter dem Saum heraus. Beides ist in Licht und Material gemalt (js/technik.js),
   ohne Tintenkante, mit Bühnenschatten. */
.kanone { position: absolute; z-index: 17; left: 0; bottom: 31%; width: 0; height: 0; transform: rotate(-32deg); pointer-events: none; }
.kanone.rechts { left: auto; right: 0; transform: scaleX(-1) rotate(-32deg); }
.kanone-rohr {
  position: absolute; left: 0; top: -21px; width: 84px; height: 42px; translate: -104% 0;
  filter: drop-shadow(0 7px 8px color-mix(in srgb, var(--wurf) 45%, transparent)); transition: translate .45s cubic-bezier(.6, 0, .85, .3);
}
.kanone.da .kanone-rohr { translate: -24% 0; transition: translate .6s var(--feder); }
.kanone canvas { display: block; width: 100%; height: 100%; transform-origin: 30% 50%; }
/* die Mitte der Öffnung, wie js/technik.js sie malt (KANONE.muendung) */
.kanone-muendung { position: absolute; left: 83.7%; top: 50%; width: 0; height: 0; }
.sack {
  position: absolute; z-index: 19; top: calc(env(safe-area-inset-top, 0px) + var(--saum-h) - 85px); width: 50px; height: 85px;
  translate: -50% 0; transform: translateY(-34px) rotate(var(--kipp)); transform-origin: 50% 0; pointer-events: none;
  filter: drop-shadow(0 6px 6px color-mix(in srgb, var(--wurf) 45%, transparent));
  transition: transform .45s cubic-bezier(.6, 0, .85, .3);
}
.sack.da { transform: translateY(78px) rotate(var(--kipp)); transition: transform .7s var(--feder); }
.sack canvas { display: block; width: 100%; height: 100%; transform-origin: 50% 0; }
.sack.da canvas { animation: schuetteln .36s ease-in-out infinite alternate; }
@keyframes schuetteln { from { rotate: -5deg; } to { rotate: 6deg; } }
/* oben verschwindet der Sack hinter dem Saum, unten die Öffnung (SACK.mund in js/technik.js) */
.sack-mund { position: absolute; left: 50%; bottom: 6.3%; width: 0; height: 0; }
@media (min-width: 900px) {
  .kanone { left: clamp(34px, 4.2vw, 76px); bottom: 34%; }
  .kanone.rechts { right: clamp(34px, 4.2vw, 76px); }
  .kanone-rohr { top: -27px; width: 108px; height: 54px; }
  .sack { width: 56px; height: 95px; top: calc(env(safe-area-inset-top, 0px) + var(--saum-h) - 100px); }
  .sack.da { transform: translateY(98px) rotate(var(--kipp)); }
}
.puppe { position: absolute; left: 0; bottom: calc(var(--leiste-h) + var(--sicher-unten) - 2px + var(--puppen-hub)); width: 0; height: 0; transition: transform .7s var(--aus); }
/* wer die Puppe antippt, bekommt Konfetti */
.puppe-tipp { position: absolute; pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.puppe-wiege { transition: translate .3s var(--feder); }
.puppe-tipp:hover + .puppe-wiege { translate: 0 -4px; }
.puppe.ohne-gleiten { transition: none; }
.puppe-koerper { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.puppe-koerper img { position: absolute; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.puppe .rumpf { filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--tinte) 35%, transparent)); }
.puppe .kopf { position: absolute; transform-origin: var(--hx) var(--hy); transition: transform .35s var(--feder); }
.puppe .kopf img { position: absolute; left: 0; top: 0; opacity: 0; filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--tinte) 40%, transparent)); }
.puppe .kopf img.an { opacity: 1; }
.puppe .arm { transition: transform .45s var(--feder); }
.puppe-wiege { position: absolute; left: 0; top: 0; animation: atmen 3.8s ease-in-out infinite; }
@keyframes atmen { 50% { transform: translateY(-1.5px); } }
.puppe .kopf { animation: nicken 5.2s ease-in-out infinite; }
@keyframes nicken { 0%, 100% { rotate: 0deg; } 30% { rotate: -2.5deg; } 65% { rotate: 2deg; } }
.puppe.geht .puppe-wiege { animation: watscheln .26s ease-in-out infinite alternate; }
@keyframes watscheln { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-3px); } }
.puppe.hopst .puppe-wiege { animation: hopsen .5s var(--aus) 2; }
@keyframes hopsen { 40% { transform: translateY(-22px) rotate(-3deg); } 70% { transform: translateY(0) rotate(2deg); } }

.stab { position: absolute; z-index: 2; left: 0; top: 0; transform-origin: 0 50%; height: 0; pointer-events: none; }
.stab-rohr { position: absolute; left: 0; top: -3.5px; height: 7px; width: 0; background: linear-gradient(180deg, #C99A5B, #A2733F 45%, #5E3C1D); border: 1.5px solid color-mix(in srgb, var(--tinte) 80%, transparent); border-radius: 4px; box-shadow: 0 5px 8px color-mix(in srgb, var(--wurf) 35%, transparent); }
.stab .zeigehand { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; opacity: 0; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--tinte) 40%, transparent)); }

/* das leere Schild, das die eigene Puppe hält: die Hauptaktion */
.neu-schild {
  position: fixed; z-index: 46; left: 0; top: 0; border: 0; padding: 0; background: none; display: grid; justify-items: center;
  transition: transform .7s var(--aus), opacity .2s;
}
.neu-schild.weg { opacity: 0; pointer-events: none; }
.neu-schild.ohne-gleiten { transition: none; }
body.im-auftritt .rampe { z-index: 76; }
body.im-auftritt .puppen { z-index: 72; }
body.im-auftritt .vorbuehne { z-index: 71; }
.neu-schild::after { content: ""; width: 6px; height: var(--stab, 20px); background: linear-gradient(90deg, #4E3018, #A2733F 45%, #63401F); margin-top: -1px; border-radius: 0 0 3px 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinte) 55%, transparent); }
.neu-platte {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px 8px 9px; white-space: nowrap;
  font: 900 15px/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .02em;
  background: linear-gradient(180deg, #FFD663, var(--bretter)); border: var(--kante) solid var(--tinte); border-radius: var(--rund); box-shadow: var(--versatz);
  transform: rotate(-4deg); transition: transform .25s var(--feder), background-color .2s;
}
.neu-platte svg { width: 18px; height: 18px; }
.neu-schild:hover .neu-platte { transform: rotate(-1deg) translateY(-3px); background: var(--spot); }
.neu-schild:active .neu-platte { transform: rotate(-2deg) translateY(2px); }
.neu-schild.rechts .neu-platte { transform: rotate(4deg); }
.neu-schild.rechts:hover .neu-platte { transform: rotate(1deg) translateY(-3px); }
.neu-schild:focus-visible { outline: 0; box-shadow: none; }
:where(:root:not(.lichter)) .neu-schild:focus-visible .neu-platte { outline: 3px solid var(--spot); outline-offset: 3px; box-shadow: 0 0 0 7px var(--tinte); }
@media (max-width: 899px) { .neu-platte { font-size: 13px; padding: 7px 10px 6px 7px; gap: 4px; } .neu-platte svg { width: 15px; height: 15px; } }
@media (min-width: 900px) { .neu-platte { font-size: 18px; padding: 11px 15px 10px 12px; } .neu-platte svg { width: 22px; height: 22px; } .neu-schild::after { height: var(--stab, 32px); } }
/* während des Wurfs fliegt ein Doppelgänger; nach dem Aufstellen taucht ein frisches Schild aus den Bällen auf */
.neu-schild.unterwegs { opacity: 0; pointer-events: none; transition: none; }
.neu-schild.frisch { animation: frisch .55s var(--feder) .45s both; }
@keyframes frisch { from { translate: 0 38px; opacity: 0; } }

/* ---------- Der Wurf: das leere Schild fliegt in den Spot (js/auftritt.js) ---------- */

/* Eine Pappe mit zwei Seiten, die sich um ihren Stab dreht: vorn „Neue Idee“, hinten leeres Papier */
.wurf-flieger { position: fixed; left: 0; top: 0; z-index: 80; width: 0; height: 0; pointer-events: none; will-change: transform; }
.wurf-karte { position: absolute; transform-style: preserve-3d; will-change: transform; }
.wurf-karte > .neu-platte, .wurf-hinten { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.wurf-karte > .neu-platte { justify-content: center; transform: none; transition: none; }
.wurf-hinten {
  transform: rotateY(180deg);
  background: var(--korn), linear-gradient(172deg, #FFFFFF 0%, #FBF9F3 55%, #EFEADF 100%); background-blend-mode: soft-light, normal;
  border: var(--kante) solid var(--tinte); border-radius: var(--rund); box-shadow: var(--versatz);
}
/* wer sich vom Licht wegdreht, wird dunkler */
.wurf-karte > .neu-platte::after, .wurf-hinten::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: color-mix(in srgb, var(--tinte) calc(var(--abseits, 0) * 100%), transparent); }
.wurf-stab { position: absolute; left: 50%; top: 100%; width: 6px; margin: -1px 0 0 -3px; background: linear-gradient(90deg, #4E3018, #A2733F 45%, #63401F); border-radius: 0 0 3px 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinte) 55%, transparent); }
.auftritt.im-flug .schild-platte { opacity: 0; }
/* Das Saallicht geht aus, während das Schild steigt; erst oben, wo es stillsteht, geht der Spot auf und fängt es.
   Wahl und Knöpfe kommen danach. --fang ist die Flugzeit. */
body.im-auftritt.wurf::before { animation: saallicht var(--fang) cubic-bezier(.4, 0, .6, 1) both; }
body.im-auftritt.wurf::after { opacity: 0; animation: none; }
body.im-auftritt.wurf.gefangen::after { opacity: 1; animation: spot-an .34s var(--aus) both, flackern 6s ease-in-out .34s infinite alternate; }
@keyframes spot-an { from { opacity: 0; transform: translateX(-50%) scaleX(.45); } }
body.wurf .auftritt-wahl, body.wurf .auftritt-knoepfe { animation: auftauchen .34s var(--aus) var(--fang) both; }
body.wurf #auftrittTitel { animation: saallicht .2s var(--aus) var(--fang) both; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Souffleur ---------- */

/* Doktor Ravendsensen hängt an den Füssen hinter dem Saum (js/souffleur.js): unter dem Samt, vor den Seitenvorhängen.
   Der Haken liegt mitten im Saum, so kommt er beim Herunterlassen hinter dem Stoff hervor.
   Seine Masse sind Pixel seines Fotos mal --rav-s; der Kopf reicht 1085 davon unter den Haken. */
.souffleur {
  --rav-s: .18; --rav-x: 64px; --haken: calc(env(safe-area-inset-top, 0px) + var(--saum-h) * .5);
  position: absolute; z-index: 19; inset: 0 0 auto; height: 0; pointer-events: none;
}
/* am grossen Bildschirm hängt er über dem rechten Flügel, neben den Schildern */
@media (min-width: 900px) { .souffleur { --rav-s: .23; --rav-x: calc(clamp(34px, 4.2vw, 76px) + var(--fluegel) / 2); } }
.souffleur-seil {
  position: absolute; right: var(--rav-x); top: var(--haken);
  transform: translateY(calc(-1100px * var(--rav-s) - var(--haken) - 24px));
  transition: transform .55s cubic-bezier(.6, 0, .85, .25);
}
.souffleur.da .souffleur-seil { transform: none; transition: transform .9s var(--feder); }
/* ohne Netz guckt der Kopf unter dem Saum hervor */
.souffleur.lauert:not(.da) .souffleur-seil { transform: translateY(calc(var(--saum-h) / 2 + 14px - 880px * var(--rav-s))); transition: transform 1.4s var(--aus); }
.souffleur-schwung, .souffleur-pendel { position: absolute; left: 0; top: 0; }
/* er baumelt langsam, die Arme schlenkern eine Viertelschwingung hinterher */
.souffleur.da .souffleur-pendel, .souffleur.lauert .souffleur-pendel { animation: baumeln 4.4s ease-in-out infinite; }
@keyframes baumeln { 0%, 100% { rotate: 2.5deg; } 50% { rotate: -2.5deg; } }
.rav { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: rotate(180deg) scale(var(--rav-s)) translate(-634.5px, -990px); }
.rav div, .rav canvas { position: absolute; left: 0; top: 0; }
.rav-arm, .rav-ellbogen { transform: rotate(var(--w, 0deg)); transition: transform .7s var(--feder); }
.rav-arm { --seite: 1; }
.rav-arm.links { --seite: -1; }
.souffleur.da .rav-arm { animation: schlenkern 4.4s ease-in-out -1.1s infinite; }
@keyframes schlenkern { 0%, 100% { rotate: calc(var(--seite) * 5deg); } 50% { rotate: calc(var(--seite) * -5deg); } }
.rav-kopf { transform: scale(1.9); }
.souffleur.da .rav-kopf { animation: nicken 5.2s ease-in-out infinite; }

/* die Sprechblase links neben seinem Kopf, der Zipfel zeigt zu ihm */
.souffleur-blase {
  position: absolute; right: calc(var(--rav-x) + 220px * var(--rav-s) + 12px); top: calc(var(--haken) + 900px * var(--rav-s));
  width: max-content; max-width: min(420px, calc(100vw - var(--rav-x) - 220px * var(--rav-s) - 26px));
  translate: 0 -50%; transform-origin: 100% 50%;
  pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px;
  background: var(--weiss); border: var(--kante) solid var(--tinte); border-radius: 12px; box-shadow: var(--versatz-klein);
  font: 700 15px/1.3 var(--schrift);
  opacity: 0; transform: translateX(14px) scale(.9); transition: opacity .2s var(--aus), transform .35s var(--aus), visibility .2s; visibility: hidden;
}
.souffleur-blase::after { content: ""; position: absolute; right: -10px; top: 50%; width: 14px; height: 14px; background: inherit; border: solid var(--tinte); border-width: 0 3px 3px 0; transform: translateY(-50%) rotate(-45deg); }
/* sie kommt erst, wenn er unten ist */
.souffleur-blase.da { opacity: 1; transform: none; visibility: visible; transition-delay: .3s; }
.souffleur-blase.warnt { background: color-mix(in oklab, var(--rot) 22%, white); }
.souffleur-blase button { flex: none; border: 2px solid var(--tinte); border-radius: 6px; background: var(--spot); padding: 6px 9px; font: 900 13px/1 var(--schrift-schild); text-transform: uppercase; }

/* ---------- Einlass: einlass.css ---------- */

/* eine Puppe als festes Bild (Einlass und Fotobrief) */
.figur { position: relative; clip-path: inset(-300px -300px 0 -300px); }
.figur-innen { position: absolute; width: 0; height: 0; }
.figur img { position: absolute; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.figur-rumpf { filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--tinte) 35%, transparent)); }
.figur-kopf { opacity: 0; filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--tinte) 40%, transparent)); transition: opacity .12s linear; }
.figur-kopf.an { opacity: 1; }

/* ---------- Garderobe ---------- */

.garderobe { position: fixed; inset: 0; z-index: 80; overflow: auto; background: var(--saal); color: var(--weiss); padding: 0 0 60px; }
.gd-kopf {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 16px;
  background: var(--saal);
}
.gd-kopf h1 { margin: 0 auto 0 0; font: 900 24px/1 var(--schrift-schild); text-transform: uppercase; color: var(--spot); }
.gd-inhalt { max-width: 760px; margin: 0 auto; padding: 18px 14px; display: grid; gap: 22px; }
.gd-tafel { background: var(--weiss); color: var(--tinte); border: var(--kante) solid var(--tinte); border-radius: var(--rund); box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .7); padding: 18px; display: grid; gap: 14px; }
.gd-tafel h2 { margin: 0; font: 900 20px/1 var(--schrift-schild); text-transform: uppercase; }
.gd-tafel p { margin: 0; }
.gd-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gd-passwort { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; gap: 14px 12px; }
.gd-passwort .knopf { min-height: var(--feld-hoehe); }
.gd-neu { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.gd-neu .knopf { min-height: var(--feld-hoehe); }
.gd-figur h3 { margin: 0 0 8px; font: 900 16px/1 var(--schrift-schild); text-transform: uppercase; }
/* der Schminkplatz oben (Spiegel, Tisch, Kippschalter) steht in garderobe.css, die Stimmen in kabine.css */
.kat-liste input.aus { opacity: .5; }
.kat-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kat-liste li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }

.farbknopf { width: var(--feld-hoehe-klein); height: var(--feld-hoehe-klein); border-radius: 50%; border: var(--kante) solid var(--tinte); background: var(--kf); }
.mienen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.miene { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border: 2px dashed color-mix(in srgb, var(--tinte) 35%, transparent); border-radius: var(--rund); font: 700 13px/1.2 var(--schrift); text-align: center; }
.miene img { width: 100%; max-width: 92px; aspect-ratio: 4 / 5; object-fit: contain; object-position: bottom; }
.miene label { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.miene input { position: absolute; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 480px) { .mienen { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Fokus als Lichterkette (js/lichterkette.js) ---------- */

/* Läuft die Kette, zeichnet sonst nichts mehr einen Fokusring: kein Ring im Feld, keiner um die Platte.
   Das warme Licht im Feld und der kleine Hub bleiben. Ohne Skript gelten die alten Ringe weiter. */
:root.lichter { --fokus-ring: 0 0 transparent; }
:root.lichter :focus-visible { outline: none; }
/* Die Birnen malt das Skript auf eine Leinwand, die nur so gross ist wie Kette und Schein und mit dem Feld wandert. */
.lichterkette { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none; overflow: visible; }
.lichterkette canvas { position: absolute; left: 0; top: 0; will-change: transform; }

/* ---------- Weniger Bewegung ---------- */

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