/* Die Hinterbühne: der eigene Ort hinter den Kulissen (js/hinterbuehne.js, js/bilder/hinterbuehne.js).
   Holz und Nessel heißen meins, Türkis heißt gemeinsam und kommt hier nur als Licht durch die Bühnentür. */

:root {
  /* die Rückseite der Kulissen: ungefärbter Nessel auf Holzlatten, im Schein einer Arbeitslampe */
  --nessel: #B6A07A;
  --nessel-tief: #7A6545;
  --klebeband: #F1E7C9;
}

/* ---------- Ortswechsel ---------- */

.knopf-hinten { position: relative; }
.hinten .knopf-hinten, .hinten #filterWer { display: none; }
/* hinten fällt kein Bühnenlicht: keine Strahlen im Dunst, nur Staub im Arbeitslicht */
.hinten .dunst .strahl { animation: none; opacity: 0; }
.hinten .dunst::before { opacity: .1; }
.hinten .prospekt { visibility: hidden; transition: visibility 0s linear .6s; }
/* was gerade niemand sieht, braucht keinen Takt: hinten ruhen die Scheinwerfer, vorn die Arbeitslampe */
.hinten .prospekt .licht { animation-play-state: paused; }

/* ---------- Kulissenrückseite ---------- */

.kulisse { grid-row: 3; grid-column: 1; position: relative; z-index: 0; overflow: hidden; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--aus), visibility 0s linear .6s;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255, 236, 190, .48), rgba(255, 236, 190, .12) 50%, rgba(255, 236, 190, 0) 74%),
    radial-gradient(58% 44% at var(--schein-x, 100%) 100%, color-mix(in srgb, var(--prospekt) 58%, transparent), color-mix(in srgb, var(--prospekt) 18%, transparent) 50%, color-mix(in srgb, var(--prospekt) 0%, transparent) 76%),
    radial-gradient(125% 92% at 50% 24%, color-mix(in srgb, var(--tinte) 0%, transparent) 36%, color-mix(in srgb, var(--tinte) 70%, transparent) 100%),
    repeating-linear-gradient(0deg, rgba(74, 52, 28, .08) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(74, 52, 28, .07) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, var(--nessel), #A38C66 55%, var(--nessel-tief));
}
.hinten .kulisse { opacity: 1; visibility: visible; transition: opacity .6s var(--aus); }
:root:has(.tuer.links) .kulisse { --schein-x: 0%; }
.kulisse::before { content: ""; position: absolute; inset: 0; background: var(--korn); opacity: .4; mix-blend-mode: overlay; }
/* die Latten des Rahmens, auf den der Nessel getackert ist; sie werfen Schatten aufs Tuch */
.latte { position: absolute; top: -10px; bottom: -10px; width: 24px;
  background: repeating-linear-gradient(178deg, rgba(78, 48, 24, 0) 0 13px, rgba(78, 48, 24, .3) 13px 14px, rgba(78, 48, 24, 0) 14px 31px),
    linear-gradient(90deg, #5E3C1D, #A2733F 24%, #C99A5B 50%, #A2733F 76%, #4E3018);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tinte) 55%, transparent), 0 10px 14px -4px color-mix(in srgb, var(--wurf) 45%, transparent); }
.latte.l1 { left: 7%; }
.latte.l2 { right: 7%; }
.latte.quer { top: 47%; bottom: auto; left: 7%; right: 7%; width: auto; height: 20px;
  background: repeating-linear-gradient(92deg, rgba(78, 48, 24, 0) 0 21px, rgba(78, 48, 24, .3) 21px 22px, rgba(78, 48, 24, 0) 22px 47px),
    linear-gradient(180deg, #5E3C1D, #A2733F 24%, #C99A5B 50%, #A2733F 76%, #4E3018); }
/* mit Schablone aufs Tuch gesprüht: welcher Prospekt das ist und wem diese Hinterbühne gehört */
.kulisse-schrift { position: absolute; left: 50%; top: 69%; translate: -50% 0; rotate: -1.5deg; white-space: nowrap;
  font: 900 clamp(20px, 5.4vw, 40px)/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .24em;
  color: color-mix(in srgb, var(--tinte) 34%, transparent); mix-blend-mode: multiply;
  -webkit-mask: var(--korn) 0 0 / 160px 160px; mask: var(--korn) 0 0 / 160px 160px; }
.kulisse-schrift small { display: block; margin-top: .45em; font-size: .5em; letter-spacing: .4em; }
@media (min-width: 900px) {
  .kulisse { margin: 0 clamp(34px, 4.2vw, 76px); }
  /* am Rechner steht die Schrift senkrecht im eigenen Flügel, über der Puppe */
  .kulisse-schrift { left: calc(var(--fluegel) / 2 - .5em); top: 50%; translate: 0 -50%; rotate: 180deg; writing-mode: vertical-rl; font-size: clamp(22px, 2.2vw, 34px); }
  .kulisse-schrift small { margin: 0 .45em 0 0; }
  :root:has(.tuer.links) .kulisse-schrift { left: auto; right: calc(var(--fluegel) / 2 - .5em); }
  .latte { width: 30px; }
  .latte.l1 { left: 12%; }
  .latte.l2 { right: 12%; }
  .latte.quer { left: 12%; right: 12%; height: 24px; }
}

/* Die Arbeitslampe hängt unter dem Saum, eine nackte Birne im Drahtkorb, und pendelt kaum merklich */
.arbeitslampe { --lampe-y: 14px; position: absolute; left: 88%; top: var(--lampe-y); width: 0; height: 0; opacity: 0; transform-origin: 0 -40px;
  transition: opacity .6s var(--aus); animation: pendeln 7.5s ease-in-out infinite alternate; }
.arbeitslampe { animation-play-state: paused; }
.hinten .arbeitslampe { opacity: 1; animation-play-state: running; }
/* wer hinunterrollt, zieht die Lampe am Kabel hinter den Saum: die Birne hängt nie vor einem Schild */
.arbeitslampe { translate: 0 calc((var(--kegel, 1) - 1) * 90px); transition: opacity .6s var(--aus), translate .2s linear; }
/* das Kabel ist umflochten: die Litzen laufen schräg ums Kabel */
.lampe-kabel { position: absolute; left: -1px; top: -70px; width: 2px; height: 74px; background: repeating-linear-gradient(-62deg, #2B1D14 0 1.4px, #4A372B 1.4px 2.4px); }
/* Fassung, Kolben und Drahtkorb malt das SVG in index.html; sein Hof reicht weit über den Korb hinaus */
.lampe-birne { position: absolute; left: -14px; top: -6px; width: 28px; height: 50px; overflow: visible; }
/* der Kegel setzt an der Wendel an, reicht nur ein Stück weit und wird schwächer, je weiter man hinunterrollt: die Ideen bleiben im Halbdunkel */
.lampe-kegel { position: absolute; left: -40vmin; top: 22px; width: 80vmin; height: 44vh; filter: blur(14px); mix-blend-mode: screen; opacity: calc(.55 * var(--kegel, 1));
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); transition: opacity .25s linear;
  background: linear-gradient(180deg, rgba(255, 238, 196, .5), rgba(255, 238, 196, .14) 50%, rgba(255, 238, 196, 0) 92%); }
@keyframes pendeln { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
/* am Rechner hängt sie über dem Licht-Platz des Tischs und tiefer, unter den Festons des Saums */
@media (min-width: 900px) {
  .arbeitslampe { left: 34%; --lampe-y: 30px; }
  :root:has(.tuer.links) .arbeitslampe { left: 66%; }
  .lampe-kegel { height: 40vh; }
}

/* ---------- Aufbau ---------- */

.hinterbuehne { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "aushang" "tisch"; gap: 32px; padding: 44px 14px 0; max-width: 1120px; margin: 0 auto; }
.aushang { grid-area: aushang; }
.tisch { grid-area: tisch; }
@media (min-width: 900px) {
  /* das Brett hängt neben der Bühnentür, von dort kommen die Zettel */
  .hinterbuehne { grid-template-columns: minmax(0, 1fr) minmax(290px, 350px); grid-template-areas: "tisch aushang"; align-items: start; gap: 40px; padding: 58px 0 0; }
  .hinterbuehne.tuer-links { grid-template-columns: minmax(290px, 350px) minmax(0, 1fr); grid-template-areas: "aushang tisch"; }
}

/* ---------- Aushang ---------- */

.aushang {
  position: relative; isolation: isolate; padding: 30px 12px 18px; border: var(--kante) solid var(--tinte); border-radius: var(--rund);
  background:
    var(--korn),
    repeating-linear-gradient(177deg, rgba(78, 48, 24, 0) 0 9px, rgba(78, 48, 24, .24) 9px 10px, rgba(78, 48, 24, 0) 10px 23px, rgba(255, 222, 168, .14) 23px 24px, rgba(78, 48, 24, 0) 24px 37px),
    radial-gradient(90% 55% at 50% 0%, rgba(255, 236, 190, .32), rgba(255, 236, 190, 0) 72%),
    linear-gradient(180deg, #B9864C, #A2733F 52%, #7F5530);
  background-blend-mode: soft-light, normal, normal, normal;
  box-shadow: var(--versatz), inset 0 0 0 6px rgba(78, 48, 24, .38), inset 0 0 0 8px rgba(201, 154, 91, .3);
}
/* die Tafel ist oben aufs Brett genagelt; sie steht im Fluss, damit sie die Zettel nach unten schiebt, wenn sie am
   Handy oder groß gezoomt zweizeilig wird, statt die erste Reihe zu verdecken */
.aushang-kopf {
  position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: fit-content; margin: -49px 0 12px -4px; overflow-wrap: anywhere;
  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); box-shadow: var(--versatz-klein);
}
.aushang-kopf small { font: 700 14px/1 var(--schrift); color: var(--bretter); font-variant-numeric: tabular-nums; }
.aushang-kopf .selbst { color: var(--weiss); opacity: .7; text-transform: none; }
.aushang-zettel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
@media (min-width: 900px) { .aushang-zettel { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* Ein Zettel: Papier mit Tintenkante, schief angeheftet; die Reißzwecke sitzt nie ganz in der Mitte */
.anschlag, .aushang-leer {
  --kipp: 0deg; position: relative; display: grid; align-content: start; gap: 5px; min-width: 0; min-height: 96px;
  padding: 14px 9px 9px; border: var(--kante) solid var(--tinte); border-radius: 4px; color: var(--tinte);
  background: var(--korn), linear-gradient(176deg, #FFFFFF, #FBF9F3 60%, #EFEADF);
  background-blend-mode: soft-light, normal;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--tinte) 50%, transparent), 0 6px 10px -3px color-mix(in srgb, var(--wurf) 50%, transparent), 0 18px 22px -14px color-mix(in srgb, var(--wurf) 55%, transparent);
  transform: rotate(var(--kipp)); transform-origin: 50% 6px;
}
.zwecke { position: absolute; top: -9px; left: calc(50% + var(--zwecke, 0%)); width: 17px; height: 17px; margin-left: -8.5px; z-index: 3; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFF0 0 13%, var(--spot) 32%, #E3C51C 64%, #9C8410 100%);
  border: 2px solid var(--tinte); box-shadow: 1px 4px 3px color-mix(in srgb, var(--tinte) 45%, transparent); }
.anschlag-auf { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.anschlag-auf:focus-visible { outline: 0; box-shadow: none; }
.anschlag:has(.anschlag-auf:focus-visible) { outline: 3px solid var(--fokus-licht); outline-offset: 3px; box-shadow: 0 0 0 7px var(--fokus-kante); }
.anschlag-titel { font: 900 15px/1.08 var(--schrift-schild); text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.anschlag .todo-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; width: auto; min-height: 0; padding: 0;
  font: 700 15px/1.28 var(--schrift); overflow-wrap: break-word; hyphens: auto; }
.anschlag-aus { font: 700 12px/1.25 var(--schrift); color: var(--tinte-leise); overflow-wrap: break-word; hyphens: auto;
  /* ein langer Schildtitel macht den Zettel sonst meterlang; ganz steht er in der Beschriftung des Knopfs */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.anschlag-aus b { font-weight: 800; color: var(--tinte); }
.anschlag-von { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: auto; padding-top: 4px;
  border-top: 2px dotted color-mix(in srgb, var(--tinte) 28%, transparent); font: 700 12px/1.2 var(--schrift); color: var(--tinte-leise); }
.anschlag-von .koepfchen { width: 24px; height: 28px; margin: -6px 0 -2px -2px; }
.anschlag-zweit { padding: 2px 7px; border-radius: 999px; background: color-mix(in oklab, var(--spot) 55%, white); color: var(--tinte); }
.anschlag .stempel.neu { left: auto; right: -10px; top: -13px; color: var(--vorhang); transform: rotate(7deg); }
.anschlag-punkt { grid-template-columns: 34px minmax(0, 1fr); column-gap: 4px; }
.anschlag-punkt .todo-haken { width: 44px; height: 44px; margin: -9px 0 0 -10px; }
.anschlag-punkt .todo-haken svg { width: 26px; height: 26px; }
.anschlag-punkt .todo-haken[disabled] { cursor: default; }
/* abgehakt: Stempel, Pinselstrich und der gesetzte Durchstrich wie auf der Rückseite (tusch.css) */
.anschlag.gestempelt .todo-haken svg { animation: kaestchen-stempel .46s cubic-bezier(.2, .8, .3, 1); }
.anschlag.erledigt .todo-text { color: var(--tinte-leise); text-decoration: line-through 2px color-mix(in oklab, var(--vorhang) 75%, transparent); transition: text-decoration-color .32s var(--aus), color .32s var(--aus); }
.anschlag.streicht .todo-text { text-decoration-color: transparent; color: var(--tinte); }
.anschlag.faellt { z-index: 6; pointer-events: none; }
/* angeheftet: kommt aus der Richtung der Bühnentür und wird mit der Reißzwecke festgedrückt */
.anschlag { --von-x: 46px; }
.tuer-links .anschlag { --von-x: -46px; }
.anschlag.kommt { visibility: hidden; }
.anschlag.angeheftet { animation: anheften .64s var(--feder); }
@keyframes anheften {
  0% { transform: translate(var(--von-x), -22px) rotate(calc(var(--kipp) + 16deg)) scale(.7); }
  55% { transform: rotate(calc(var(--kipp) - 3deg)) scale(1.04); }
  100% { transform: rotate(var(--kipp)); }
}
.anschlag.angeheftet .zwecke { animation: zwecke-rein .36s cubic-bezier(.2, .8, .3, 1) .24s both; }
@keyframes zwecke-rein { 0% { transform: translateY(-16px) scale(1.8); opacity: 0; } 60% { transform: translateY(1px) scale(.84); opacity: 1; } 100% { transform: none; } }

/* weitere Zettel liegen als Stapel; zwei Blätter darunter gucken schief hervor */
.anschlag-stapel { position: relative; min-height: 96px; }
.stapel-auf { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 96px; display: grid; place-content: center; gap: 2px; padding: 10px;
  border: var(--kante) solid var(--tinte); border-radius: 4px; color: var(--tinte); cursor: pointer;
  background: var(--korn), linear-gradient(176deg, #FFFFFF, #FBF9F3 60%, #EFEADF); background-blend-mode: soft-light, normal;
  font: 900 26px/1 var(--schrift-schild); text-transform: uppercase; font-variant-numeric: tabular-nums; box-shadow: var(--versatz-klein);
  transition: transform .25s var(--aus); }
.stapel-auf span { font: 700 13px/1 var(--schrift); text-transform: none; color: var(--tinte-leise); }
.stapel-auf[aria-expanded="true"] { font-size: 16px; }
.anschlag-stapel::before, .anschlag-stapel::after { content: ""; position: absolute; inset: 0; border: var(--kante) solid var(--tinte); border-radius: 4px; background: #EFEADF; }
.anschlag-stapel::before { transform: rotate(4deg) translate(5px, 5px); box-shadow: 0 8px 12px -4px color-mix(in srgb, var(--wurf) 50%, transparent); }
.anschlag-stapel::after { transform: rotate(-3deg) translate(-3px, 3px); background: #F6F2E8; }
.stapel-auf:hover { transform: translateY(-2px) rotate(-1deg); }
.anschlag-stapel:has([aria-expanded="true"])::before, .anschlag-stapel:has([aria-expanded="true"])::after { display: none; }
.aushang-leer { grid-column: 1 / -1; min-height: 0; padding: 18px 16px 14px; --kipp: -1deg; }
.aushang-leer p { margin: 0; font: 600 15px/1.4 var(--schrift); }
.aushang-leer b { display: block; font: 900 17px/1.1 var(--schrift-schild); text-transform: uppercase; margin-bottom: 4px; }
p.aushang-leer { font: 600 15px/1.4 var(--schrift); }
p.aushang-leer b { display: inline; font: inherit; font-weight: 800; text-transform: none; }

/* ---------- Requisitentisch ---------- */

/* schwarz bezogen wie jeder Requisitentisch, die Plätze mit Klebeband markiert; vorn die Tischkante aus Holz */
.tisch { position: relative; isolation: isolate; padding: 0 0 16px; border: var(--kante) solid var(--tinte); border-radius: var(--rund) var(--rund) 4px 4px;
  background: var(--korn), linear-gradient(180deg, var(--becken-grund), color-mix(in srgb, var(--becken-grund) 45%, var(--saal)) 60%, var(--becken)); background-blend-mode: soft-light, normal;
  box-shadow: var(--versatz); }
.tisch::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -3px; height: 18px; z-index: 2; border: var(--kante) solid var(--tinte); border-radius: 0 0 4px 4px; pointer-events: none;
  background: linear-gradient(180deg, #C99A5B, #A2733F 40%, #63401F); }
.tisch-zone { position: relative; isolation: isolate; padding: 18px 12px 30px; }
/* zwischen den Plätzen ein abgerissenes Stück Klebeband, an den Enden durchsichtig wie die Beschriftung */
.tisch-zone + .tisch-zone::after, .kiste::after { content: ""; position: absolute; left: 14px; top: -5px; width: min(58%, 240px); height: 9px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(0, 0, 0, .06)), var(--klebeband); rotate: -1deg;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), #000 9px, #000 calc(100% - 9px), rgba(0, 0, 0, .55));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), #000 9px, #000 calc(100% - 9px), rgba(0, 0, 0, .55)); }
.kiste::after { left: auto; right: 18px; width: min(38%, 170px); rotate: 1.2deg; }
/* vorn steht, was läuft, im Kegel der Arbeitslampe */
.tisch-zone[data-status="laeuft"]::before {
  content: ""; position: absolute; inset: -10px 0 0; z-index: -1; pointer-events: none; border-radius: var(--rund) var(--rund) 0 0;
  background: radial-gradient(60% 88% at 50% 0%, rgba(255, 244, 205, .52), rgba(255, 244, 205, .16) 55%, rgba(255, 244, 205, 0) 80%);
  filter: blur(4px); animation: flackern 7s ease-in-out infinite alternate;
}
/* Klebeband mit der Beschriftung des Platzes, an den Enden etwas durchsichtig */
.band { display: inline-flex; align-items: baseline; gap: 8px; margin: 0 0 30px; padding: 7px 13px 6px;
  font: 900 13px/1 var(--schrift-schild); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte);
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(0, 0, 0, .05)), var(--klebeband); rotate: -1.2deg;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .62), #000 8px, #000 calc(100% - 8px), rgba(0, 0, 0, .62));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .62), #000 8px, #000 calc(100% - 8px), rgba(0, 0, 0, .62)); }
.band small { font: 700 13px/1 var(--schrift); letter-spacing: 0; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.tisch-zone[data-status="laeuft"] .band { background-color: var(--spot); }
.tisch-reihe { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 28px 22px; }
@media (max-width: 899px) {
  /* so breit wie die Tür über dem Tisch steht: kein Schild gerät dahinter; nur wenn es stark gezoomt dann nicht
     einmal mehr für ein Schild reicht, wird die Gasse schmaler */
  .tuer-rechts .tisch-zone .tisch-reihe { padding-right: clamp(0px, 100% - 140px, 82px); }
  .tuer-links .tisch-zone .tisch-reihe { padding-left: clamp(0px, 100% - 140px, 82px); }
}
.tisch .schild { width: max-content; min-width: min(140px, 100%); max-width: min(300px, 100%); transform-origin: 50% 100%; }
.tisch .schild-stab { height: 22px; }
.tisch .schild-fuss { width: calc(100% + 22px); height: 13px; margin: -3px -11px 0; border-radius: 0; filter: none;
  background: repeating-linear-gradient(91deg, rgba(78, 48, 24, 0) 0 19px, rgba(78, 48, 24, .28) 19px 20px, rgba(78, 48, 24, 0) 20px 43px), linear-gradient(180deg, #C99A5B, #A2733F 45%, #63401F);
  border-block: 2px solid color-mix(in srgb, var(--tinte) 85%, transparent); box-shadow: 0 8px 10px -4px color-mix(in srgb, var(--wurf) 60%, transparent); }
@media (max-width: 899px) { .tisch .schild-titel { font-size: 16px; } }
/* dahinter, im Halbdunkel: die Ideen */
.tisch-zone[data-status="idee"] .schild:not(.zieht) .schild-platte { scale: .93; transform-origin: 50% 100%; filter: brightness(.8) saturate(.85); box-shadow: var(--versatz-klein); }
.tisch-zone[data-status="idee"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--wurf) 32%, transparent), color-mix(in srgb, var(--wurf) 12%, transparent)); }
.tisch-zone[data-status="laeuft"] .stempel.laeuft { display: none; }
.zone-leer { margin: 0; padding: 4px 8px 6px; font: 700 14px/1.4 var(--schrift); color: color-mix(in srgb, var(--klebeband) 86%, transparent); text-align: center; text-wrap: balance; }
/* der erste Platz ist erst ein Umriss aus Klebeband */
.umriss { max-width: 300px; padding: 22px 20px; border: 3px dashed color-mix(in srgb, var(--klebeband) 62%, transparent); border-radius: 6px; text-align: center; color: var(--klebeband); font: 600 15px/1.4 var(--schrift); }
.umriss p { margin: 0; }
.umriss b { display: block; margin-bottom: 4px; font: 900 16px/1.1 var(--schrift-schild); text-transform: uppercase; }
.tisch .einfuege-marke { align-self: stretch; width: 5px; min-height: 80px; margin: 0 -2px; border-radius: 3px; background: var(--spot); box-shadow: 0 0 0 1.5px var(--tinte), 0 0 14px rgba(253, 255, 85, .6); }
.tisch-zone.ziel, .kiste.ziel { outline: 3px dashed var(--spot); outline-offset: -7px; border-radius: 10px; }

/* Die Bravo-Kiste (js/bilder/hinterbuehne.js): eine grosse Lattenkiste aus demselben Holz wie die Kisten an den
   Schildern (kiste.css), vorn auf die mittlere Latte das BRAVO gestempelt, auf die untere ein Etikett getackert. Drin
   stehen die fertigen Schilder dicht an dicht; über den Rand schauen nur ihre Oberkanten mit Stempel und Köpfchen.
   Aufgemacht schaut man von oben hinein: Die Vorderwand neigt sich weg, die Kiste wird tief, und die Schilder stehen
   darin wie Karteikarten, jede ein Stück vor der nächsten. Die Schichten liegen in der Kiste selbst (isolation):
   Rückwand, Inhalt, was gerade hineinsinkt, dann die Vorderwand. */
.kiste { position: relative; display: grid; justify-items: center; padding: 22px 12px 34px; }
.bravo-kiste { --bk-b: min(340px, 100%); --bk-h: 100px; --bk-luft: 52px; isolation: isolate; padding-top: 16px; overflow-anchor: none; }
@media (min-width: 900px) { .bravo-kiste { --bk-b: 420px; --bk-h: 116px; --bk-luft: 60px; } }
.kiste-kopf { width: var(--bk-b); margin: 0; }
.kiste-deckel {
  position: relative; display: block; width: 100%; height: calc(var(--bk-h) + var(--bk-luft)); padding: 0; border: 0; background: none;
  color: var(--tinte); cursor: pointer; -webkit-tap-highlight-color: transparent;
  /* die Latten wie an den kleinen Kisten: drei Bretter, zwei Fugen */
  --kiste-h: var(--bk-h); --fuge: 6px; --latte: calc((var(--kiste-h) - 2 * var(--fuge)) / 3); --l2: calc(var(--latte) + var(--fuge)); --l3: calc(2 * var(--latte) + 2 * var(--fuge));
}
.bravo-kiste.offen .kiste-deckel { height: var(--bk-h); }
/* der Boden wirft einen weichen Schatten auf den Tisch */
.kiste-deckel::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: -9px; height: 16px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wurf) 72%, transparent), color-mix(in srgb, var(--wurf) 30%, transparent) 70%, transparent); filter: blur(3px); }
.kiste-deckel:focus-visible { outline: 0; }
.kiste-deckel:focus-visible .bk-front { outline: 3px solid var(--fokus-licht); outline-offset: 4px; border-radius: 5px; box-shadow: 0 0 0 8px var(--fokus-kante); }
.bk-pfeil { display: none; }

/* innen die Rückwand im Schatten, oben ihre Stirnkante im Licht; die Stärke der Wand sieht man über der Vorderwand */
.bravo-kiste .bk-rueck { top: auto; left: 8px; right: 8px; bottom: 4px; height: calc(var(--bk-h) + 12px); transition: opacity .3s var(--aus); }
.bk-front { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: var(--bk-h); transform-origin: 50% 100%; transition: transform .5s var(--aus); }
.bk-front .kiste-wand { --loch: 13%; }
/* Stempelfarbe auf Holz: nicht überall gleich satt, und die Maserung scheint durch. In den Fugen ist kein Holz,
   dort fehlt auch die Farbe (die Maske der Wand) */
.bk-stempel {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -4deg; padding: 6px 12px 4px 14px;
  border: 3px solid currentColor; border-radius: 6px; color: var(--vorhang); white-space: nowrap;
  font: 900 24px/1 var(--schrift-schild); letter-spacing: .14em; text-transform: uppercase;
  mix-blend-mode: multiply;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -5.2 0 0 0 3.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 120px 60px;
}
@media (min-width: 900px) { .bk-stempel { font-size: 28px; padding: 7px 14px 5px 17px; } }
/* das Etikett ist an beiden Enden angetackert */
.bk-etikett {
  position: absolute; z-index: 4; left: 50%; bottom: calc(var(--latte) / 2); translate: -50% 50%; rotate: 1.2deg; padding: 3px 13px 2px; white-space: nowrap;
  border: 2px solid var(--tinte); border-radius: 2px; color: var(--tinte); font: 800 12px/1.25 var(--schrift); font-variant-numeric: tabular-nums;
  background: var(--korn), linear-gradient(176deg, #FFFDF4, #F3E9CC); background-blend-mode: soft-light, normal;
  box-shadow: 0 2px 2px -1px color-mix(in srgb, var(--wurf) 55%, transparent);
}
.bk-etikett::before, .bk-etikett::after { content: ""; position: absolute; top: 50%; width: 2px; height: 11px; margin-top: -5.5px; border-radius: 1px;
  background: linear-gradient(90deg, #F1ECE3, #8C847B); box-shadow: 0 0 0 .5px color-mix(in srgb, var(--tinte) 55%, transparent); }
.bk-etikett::before { left: 4px; }
.bk-etikett::after { right: 4px; }
@media (min-width: 900px) { .bk-etikett { font-size: 13px; } }

/* Was drin ist: die Oberkanten der Schilder, die hinteren höher, jedes wirft seinen Schatten auf das dahinter */
.bk-fach { position: absolute; left: 12px; right: 12px; top: 0; bottom: 8px; z-index: 1; transition: translate .4s var(--aus), opacity .3s var(--aus); }
.bk-ding {
  position: absolute; bottom: 0; left: var(--x); width: var(--w); height: calc(var(--bk-h) - 8px + var(--ragt) * 1px);
  translate: -50% 0; rotate: var(--kipp); transform-origin: 50% 100%; transition: translate .35s var(--feder) calc(var(--i) * 22ms);
}
.bk-platte {
  position: absolute; inset: 0; border: 2.5px solid var(--tinte); border-bottom: 0; border-radius: 4px 4px 0 0;
  /* unter dem Rand steht es im Schatten der Kiste: durch die Fugen sieht man es nur dunkel */
  background: linear-gradient(180deg, transparent calc(var(--ragt) * 1px + 4px), color-mix(in srgb, #1C0F05 82%, transparent) calc(var(--ragt) * 1px + 30px)),
    var(--korn), linear-gradient(172deg, #FFFFFF, #FBF9F3 55%, #EFEADF); background-blend-mode: normal, soft-light, normal;
  box-shadow: 0 -3px 7px -2px color-mix(in srgb, #1C0F05 65%, transparent);
}
.bk-zeilen { position: absolute; left: 14px; right: 26px; top: 9px; height: 11px; opacity: .8;
  background: linear-gradient(var(--tinte), var(--tinte)) 0 0 / 100% 3.5px no-repeat, linear-gradient(var(--tinte), var(--tinte)) 0 7px / 62% 3px no-repeat; }
.bk-marke { position: absolute; left: -6px; top: -7px; z-index: 1; padding: 2px 4px 1px; border: 1.5px solid currentColor; border-radius: 2px; rotate: -9deg;
  background: var(--weiss); color: var(--vorhang); font: 900 8px/1 var(--schrift-schild); letter-spacing: .06em; text-transform: uppercase; }
.bk-kopf { position: absolute; right: -8px; top: -14px; width: 20px; height: 23px; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--tinte) 40%, transparent)); }
/* wer mit der Maus darüber ist, sieht die Schilder sich ein wenig recken */
@media (hover: hover) { .kiste-deckel:hover .bk-ding { translate: -50% -6px; } }
.bravo-kiste.offen .bk-fach { translate: 0 44px; opacity: 0; }
.bravo-kiste.offen .bk-rueck { opacity: 0; }
.bravo-kiste.offen .bk-front { transform: perspective(520px) rotateX(24deg); }
/* frisch eingepackt: das Neue rutscht von oben hinein, die Kiste ruckt, das Etikett zählt mit */
.bravo-kiste.gepackt .bk-ding.kommt { animation: bk-kommt .6s var(--feder) both; }
@keyframes bk-kommt { from { translate: -50% -40px; } }
.bravo-kiste.gepackt .bk-front { animation: bk-ruck .42s ease-out; }
@keyframes bk-ruck { 30% { transform: translateY(3px); } 65% { transform: translateY(-1px); } }
.bravo-kiste.gepackt .bk-etikett { animation: bk-zaehlt .5s var(--feder) .12s; }
@keyframes bk-zaehlt { 45% { scale: 1.14; } }

/* Was gerade fertig geworden ist, steht oben in der Kiste. Unten schneidet der Kistenboden ab, den Rest verdeckt die
   Vorderwand: So kann es nach dem Tusch hineinsinken. */
.bk-oben { order: -2; position: relative; z-index: 2; display: flex; justify-content: center; width: var(--bk-b);
  margin-bottom: calc(8px - var(--bk-h) - var(--bk-luft)); clip-path: inset(-400px -90px 0 -90px); }
.bk-oben .schild { max-width: min(300px, 88%); }
.tisch .bk-oben .schild:not(.hat-kiste) .schild-stab { height: calc(var(--bk-h) - 2px); }
.tisch .bk-oben .schild-fuss { display: none; }

/* Hineingeschaut: Rückwand oben, Seitenwände links und rechts, unten verschwinden die vorderen Karten hinter der
   geneigten Vorderwand */
.bk-innen {
  order: -1; position: relative; z-index: 1; width: var(--bk-b); margin-bottom: -40px; padding: 24px 18px 4px;
  border: var(--kante) solid var(--tinte); border-bottom: 0; border-radius: 5px 5px 0 0;
  background:
    linear-gradient(180deg, #E0B475 0 3px, color-mix(in srgb, var(--tinte) 70%, transparent) 3px 4.5px, #6B4524 4.5px 14px,
      color-mix(in srgb, #1C0F05 90%, transparent) 14px 15.5px, color-mix(in srgb, #1C0F05 55%, transparent) 15.5px, transparent 52px),
    linear-gradient(90deg, #7D5430 0 9px, color-mix(in srgb, #1C0F05 75%, transparent) 9px 10.5px, color-mix(in srgb, #1C0F05 40%, transparent) 10.5px, transparent 36px,
      transparent calc(100% - 36px), color-mix(in srgb, #1C0F05 40%, transparent) calc(100% - 10.5px), color-mix(in srgb, #1C0F05 75%, transparent) calc(100% - 10.5px) calc(100% - 9px), #7D5430 calc(100% - 9px)),
    var(--maserung) 0 0 / 420px 72px,
    repeating-linear-gradient(180deg, transparent 0 38px, color-mix(in srgb, #1C0F05 80%, transparent) 38px 42px),
    linear-gradient(180deg, #5A3A1C, #3A2310);
}
.bk-innen[hidden] { display: none; }
.bravo-kiste.rollt .bk-innen { overflow: hidden; }
.bk-innen .zone-leer { padding: 18px 8px 40px; }
.bk-karten { list-style: none; margin: 0; padding: 0 0 6px; display: grid; perspective: 900px; perspective-origin: 50% 0; }
/* jede Karte steht ein Stück vor der nächsten und verdeckt deren unteren Rand */
.bk-karte { position: relative; margin-top: -14px; translate: var(--ruck, 0) 0; rotate: var(--kipp, 0deg); transform-origin: 50% 100%; transition: translate .22s var(--aus); }
.bk-karte:first-child { margin-top: 0; }
@media (hover: hover) { .bk-karte:hover { translate: var(--ruck, 0) -5px; } }
.bk-auf {
  position: relative; display: grid; gap: 7px; width: 100%; padding: 15px 40px 26px 16px; border: 2.5px solid var(--tinte); border-radius: 4px;
  background: var(--korn), linear-gradient(172deg, #FFFFFF, #FBF9F3 55%, #EFEADF); background-blend-mode: soft-light, normal;
  color: var(--tinte); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 -6px 12px -6px color-mix(in srgb, #1C0F05 85%, transparent), 0 1px 0 color-mix(in srgb, var(--tinte) 50%, transparent);
}
.bk-auf:focus-visible { outline: 3px solid var(--fokus-licht); outline-offset: 2px; box-shadow: 0 0 0 7px var(--fokus-kante); }
.bk-titel { font: 900 16px/1.08 var(--schrift-schild); text-transform: uppercase; letter-spacing: .005em; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
@media (min-width: 900px) { .bk-titel { font-size: 17px; } }
.bk-karte .stempel { left: -8px; top: -9px; padding: 3px 6px 2px; font-size: 11px; pointer-events: none; }
.bk-karte .koepfe { right: -8px; top: -15px; }
.bk-karte .koepfchen { width: 30px; height: 35px; }
.bk-karte .koepfe .koepfchen + .koepfchen { margin-right: -13px; }

/* ---------- Bühnentür ---------- */

/* Sie steht im Bad, wo vorn die andere Puppe zu Hause ist, und ist aus der Versenkung heraufgefahren;
   unten stecken Rahmen und Vorhang in den Bällen. */
.tuer {
  --tuer-b: 96px; --tuer-h: calc(var(--vorbuehne) + 64px);
  position: fixed; z-index: 32; bottom: calc(var(--leiste-h) + var(--sicher-unten) - 8px);
  /* wo die Puppe zu Hause ist, aber nie über den Bildrand */
  left: clamp(6px, calc(var(--tuer-x, calc(100% - var(--tuer-b) / 2 - 8px)) - var(--tuer-b) / 2), calc(100% - var(--tuer-b) - 6px));
  width: var(--tuer-b); height: var(--tuer-h); display: block; color: var(--tinte); text-decoration: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tuer.links { left: clamp(6px, calc(var(--tuer-x, calc(var(--tuer-b) / 2 + 8px)) - var(--tuer-b) / 2), calc(100% - var(--tuer-b) - 6px)); }
@media (min-width: 900px) { .tuer { --tuer-b: clamp(112px, 10vw, 150px); --tuer-h: calc(var(--vorbuehne) + 158px); } }
.tuer:focus-visible { outline: 0; box-shadow: none; }
.tuer:focus-visible .tuer-bau { outline: 3px solid var(--fokus-licht); outline-offset: 3px; box-shadow: 0 0 0 7px var(--fokus-kante); }
.tuer.kommt { animation: tuer-kommt .66s var(--aus) both; }
.tuer.geht { animation: tuer-geht .44s cubic-bezier(.5, 0, .75, 0) both; pointer-events: none; }
@keyframes tuer-kommt { from { transform: translateY(78%); } }
@keyframes tuer-geht { to { transform: translateY(82%); opacity: 0; } }

/* Gebaut wie eine echte Tür (js/buehnentuer.js malt sie): hinten der Durchblick auf die Bühne, davor lugt, wer
   dahinter wartet, dann der Vorhang an seiner Stange, vorn der Rahmen. Die Öffnung (--o-*) und die Grösse des Kopfs
   (--kopf-*) misst das Skript. Steht die Tür links, spiegeln sich die Leinwände. */
.tuer-bau { position: absolute; inset: 0; isolation: isolate; transform-origin: 50% 100%;
  filter: drop-shadow(0 7px 8px color-mix(in srgb, var(--wurf) 42%, transparent)); }
.tuer-bau > canvas { position: absolute; pointer-events: none; }
.tuer-rahmen { left: 0; top: 0; width: 100%; height: 100%; z-index: 4; }
.tuer-drueben, .tuer-tuch, .tuer-licht, .tuer-gucker { left: var(--o-x); top: var(--o-y); width: var(--o-w); height: var(--o-h); }
.tuer-drueben { z-index: 1; }
.tuer-tuch { z-index: 3; }
.tuer.links .tuer-bau > canvas, .tuer.links .tuer-licht { scale: -1 1; }
/* ein kühler Schein von drüben, voll, sobald man die Tür anfasst */
.tuer-licht { position: absolute; z-index: 1; pointer-events: none; opacity: .4; transition: opacity .5s var(--aus);
  background: radial-gradient(60% 50% at 30% 60%, rgba(240, 255, 253, .55), rgba(240, 255, 253, 0) 70%); }
.tuer:hover .tuer-licht, .tuer.auf .tuer-licht { opacity: 1; }

/* der Türsturz mit Schild und Auftrittslampe, aufs Kopfstück geschraubt */
.tuer-sturz { position: absolute; left: 50%; top: -2px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; translate: -50% 0; rotate: -2deg; white-space: nowrap;
  padding: 6px 9px 5px 6px; border-radius: 4px; background: var(--tinte); color: var(--bretter);
  font: 900 12px/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .08em; box-shadow: var(--versatz-klein); }
@media (min-width: 900px) { .tuer-sturz { top: -3px; font-size: 14px; padding: 7px 11px 6px 8px; } }
/* aus: kaltes Glas; brennt, wenn auf der Bühne etwas passiert ist */
.tuer-lampe { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--tinte); background: radial-gradient(circle at 38% 34%, #8A7A4A, #4A3E1C 70%); }
.tuer.neuigkeit .tuer-lampe { background: radial-gradient(circle at 38% 34%, #FFFFF0, var(--spot) 45%, #C9B21C); box-shadow: 0 0 6px 2px rgba(253, 255, 85, .8), 0 0 18px 6px rgba(253, 255, 85, .35);
  animation: auftrittslicht 2.6s ease-in-out infinite; }
@keyframes auftrittslicht { 50% { box-shadow: 0 0 4px 1px rgba(253, 255, 85, .6), 0 0 10px 3px rgba(253, 255, 85, .2); } }

/* Kuckuck: der Kopf der anderen Person im Spalt, unten hinter der Rampe, kopfüber vom Sturz oder hinter der Türkante;
   dort steckt er hinter dem ganzen Rahmen */
.tuer-gucker { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
.tuer-gucker.kante { z-index: 0; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.tuer-kopf { position: absolute; left: 0; top: 0; width: var(--kopf-b, 42px); height: var(--kopf-h, 48px);
  margin: calc(var(--kopf-h, 48px) / -2) 0 0 calc(var(--kopf-b, 42px) / -2); transform-origin: 50% 100%; }
.tuer-kopf.oben { transform-origin: 50% 0; }
.tuer-kopf.weg { visibility: hidden; }
/* eine Fingerbreite mehr zum Erwischen */
.tuer-kopf::after { content: ""; position: absolute; inset: -6px; pointer-events: auto; cursor: pointer; }
.tuer-kopf.weg::after { pointer-events: none; }
.tuer-gesicht { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; -webkit-user-drag: none; user-select: none;
  filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--tinte) 40%, transparent)); }
.tuer-kopf.oben .tuer-gesicht { rotate: 180deg; }
.tuer-kopf.lugt .tuer-gesicht { animation: luegen 4.2s ease-in-out infinite; }
.tuer.links .tuer-kopf.lugt .tuer-gesicht { animation-name: luegen-links; }
@keyframes luegen { 50% { translate: 3px -3px; } }
@keyframes luegen-links { 50% { translate: -3px -3px; } }

/* das Zählschild hängt an einer Schnur an einem Nagel aussen am Rahmen und schaukelt, wenn es klopft */
.tuer-zahl { position: absolute; z-index: 6; left: -10px; top: 23%; min-width: 24px; padding: 5px 6px 4px; border-radius: 4px; rotate: -6deg; transform-origin: 50% -9px;
  background: var(--tinte); color: var(--bretter); font: 900 13px/1 var(--schrift-schild); text-align: center; font-variant-numeric: tabular-nums; box-shadow: var(--versatz-klein); }
.tuer-zahl::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 9px; margin-left: -.75px; background: var(--tinte); }
.tuer-zahl::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + 6px); width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF2B8, #C9962F 55%, #8F6A1E); box-shadow: 0 0 0 1px var(--tinte), 0 1px 2px color-mix(in srgb, var(--wurf) 50%, transparent); }
.tuer.links .tuer-zahl { left: auto; right: -10px; rotate: 6deg; }
@media (min-width: 900px) { .tuer-zahl { font-size: 16px; padding: 7px 8px 5px; min-width: 30px; } }
/* durch die Öffnung fällt Türkis auf die Bälle davor: die einzige Stelle, an der das Gemeinsame hereinscheint */
.tuer::before { content: ""; position: absolute; z-index: -1; bottom: -4px; right: 48%; width: 180px; height: 58%; pointer-events: none; filter: blur(6px);
  background: radial-gradient(100% 72% at 100% 74%, color-mix(in srgb, var(--prospekt) 50%, transparent), color-mix(in srgb, var(--prospekt) 16%, transparent) 52%, color-mix(in srgb, var(--prospekt) 0%, transparent) 78%); transition: opacity .4s var(--aus); }
.tuer.links::before { right: auto; left: 48%; background: radial-gradient(100% 72% at 0% 74%, color-mix(in srgb, var(--prospekt) 50%, transparent), color-mix(in srgb, var(--prospekt) 16%, transparent) 52%, color-mix(in srgb, var(--prospekt) 0%, transparent) 78%); }
.tuer:not(:hover):not(.auf)::before { opacity: .8; }
@media (min-width: 900px) { .tuer::before { width: 300px; } }
.tuer-zahl:empty { display: none; }

/* wer hinter der Tür wartet, bleibt unsichtbar; nur Stab und Zeigehand reichen herein. Die eigene Puppe ist nach dem
   Hinausgehen drüben, bis sie vorn aus den Bällen kommt. */
.puppe:is(.hinterm-vorhang, .drueben) { opacity: 0; }
.puppe:is(.hinterm-vorhang, .drueben) .puppe-tipp { pointer-events: none; }

/* auf der Rückseite steht der Punkt kurz im Spot, wenn man ihn vom Aushang aus öffnet */
.todo-punkt.im-spot { background: color-mix(in oklab, var(--spot) 62%, white); }

@media (prefers-reduced-motion: reduce) {
  .arbeitslampe, .tisch-zone[data-status="laeuft"]::before, .tuer.neuigkeit .tuer-lampe, .tuer-kopf.lugt .tuer-gesicht { animation: none; }
  .tuer.kommt, .tuer.geht, .anschlag.angeheftet, .anschlag.angeheftet .zwecke { animation: none; }
  .tuer-licht, .kulisse, .arbeitslampe { transition: none; }
  .bravo-kiste :is(.bk-ding, .bk-front, .bk-etikett) { animation: none !important; }
  .bravo-kiste :is(.bk-ding, .bk-fach, .bk-rueck, .bk-front, .bk-karte) { transition: none; }
}