/* Die Kisten (js/kiste.js): Ein Schild mit Offenem steht in einer Lattenkiste aus dem Holz der Bravo-Kiste. Darin
   stecken Schildchen (Unterprojekte) und Zettel (To-dos); was dringend ist, ragt am höchsten heraus. Dazu das
   Pegelzeichen für die Priorität und der Anhänger für das Ziel, die auch in Fusszeilen und Listen stehen. */

:root { --ks: 1; --kiste-h: 48px; --ding-b: 27px; --schildchen-b: 48px;
  /* Holzmaserung: Rauschen, das längs viel langsamer läuft als quer, gibt lange dunkle Fasern */
  --maserung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='72'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .26' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .09  0 0 0 0 .02  0 3.1 0 0 -1.47'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); }
@media (min-width: 900px) { :root { --ks: 1.15; --kiste-h: 56px; --ding-b: 31px; --schildchen-b: 56px; } }

/* ---------- Pegel und Anhänger ---------- */

/* ein Stäbchen mit Fähnchen: oben dringend in Signalrot, in der Mitte wichtig in Amber, unten irgendwann blass */
.pegel { width: 13px; height: 15px; flex: none; overflow: visible; color: var(--tinte); --fahne: var(--weiss); }
.pegel.dringend { --fahne: var(--rot); }
.pegel.wichtig { --fahne: var(--bretter); }
.pegel.irgendwann { --fahne: var(--prospekt-blass); }
.prio { display: inline-flex; align-items: center; gap: 3px; color: var(--tinte-mitte); }
.prio.dringend { color: var(--tinte); font-weight: 800; }

/* der Anhänger: ein Stück Papier, heute im Spot, überfällig in Signalrot */
.anhaenger {
  display: inline-flex; align-items: center; padding: 1px 6px 1px 5px; border: 2px solid var(--tinte); border-radius: 3px 6px 6px 3px;
  background: var(--papier-alt, #F3E9CC); color: var(--tinte); font: 800 12px/1.25 var(--schrift); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.anhaenger::before { content: ""; width: 4px; height: 4px; margin-right: 4px; border-radius: 50%; background: var(--weiss); box-shadow: 0 0 0 1.5px var(--tinte); flex: none; }
.anhaenger.heute { background: var(--spot); }
.anhaenger.ueber { background: var(--rot); }
/* steht das Ende des Termins heute an oder ist es vorbei, sagt es der Termin selbst */
.termin.faellig { padding: 1px 6px; border-radius: 4px; border: 2px solid var(--tinte); color: var(--tinte); font-weight: 800; }
.termin.faellig.heute { background: var(--spot); }
.termin.faellig.ueber { background: var(--rot); }

/* ---------- Der Stab ---------- */

/* wie hoch das Schild steht, sagt seine Priorität; in der Kiste steckt der Stab bis zum Boden */
.spielfeld .schild-stab { height: calc(var(--stablaenge, 34) * var(--ks) * 1px); }
.tisch .schild:not(.hat-kiste) .schild-stab { height: calc((var(--stablaenge, 34) - 12) * var(--ks) * 1px); }
.schild.hat-kiste .schild-stab { margin-bottom: -3px; }
.tisch .schild.hat-kiste .schild-stab { height: calc(var(--stablaenge, 48) * var(--ks) * 1px); }
.tisch .schild.hat-kiste .schild-fuss { display: none; }

/* ---------- Die Kiste ---------- */

/* etwas schmaler als das Schild, damit sie wie eine Kiste aussieht und nicht wie eine Bank. Sie liegt über dem
   Stab des Schilds; drinnen steckt sein unteres Stück (.kiste-stab) zwischen Rückwand und Inhalt */
.schild-kiste { position: relative; z-index: 1; display: block; width: clamp(140px, 84%, 290px); height: var(--kiste-h); flex: none; transform-origin: 50% 100%; }
/* der Boden wirft einen weichen Schatten auf die Bühne, direkt darunter liegt er dunkler an */
.schild-kiste::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -7px; height: 12px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wurf) 70%, transparent), color-mix(in srgb, var(--wurf) 30%, transparent) 70%, transparent);
  filter: blur(3px); }
/* Die Latten: drei Bretter und zwei Fugen, gerechnet aus der Kistenhöhe. Front und Rückwand teilen sie sich. */
.schild-kiste { --fuge: 4px; --latte: calc((var(--kiste-h) - 2 * var(--fuge)) / 3); --l2: calc(var(--latte) + var(--fuge)); --l3: calc(2 * var(--latte) + 2 * var(--fuge)); }
@media (min-width: 900px) { .schild-kiste { --fuge: 5px; } }
/* innen: die Rückwand im Schatten, oben im Licht ihre Stirnkante; je tiefer, desto dunkler. Durch die Fugen der
   Front sieht man sie und was in der Kiste steckt */
.kiste-rand {
  position: absolute; left: 6px; right: 6px; top: -10px; bottom: 3px; z-index: 0;
  border: 2.5px solid var(--tinte); border-bottom: 0; border-radius: 3px 3px 0 0;
  background:
    linear-gradient(180deg, #D7A96A 0 2.5px, color-mix(in srgb, var(--tinte) 60%, transparent) 2.5px 3.5px, transparent 3.5px),
    linear-gradient(180deg, transparent 0 calc(var(--latte) - 1px), #1C0F05 calc(var(--latte) - 1px) calc(var(--l2) - 1px), transparent calc(var(--l2) - 1px)),
    var(--maserung) 0 0 / 420px 72px,
    linear-gradient(90deg, color-mix(in srgb, #1C0F05 50%, transparent), transparent 18% 82%, color-mix(in srgb, #1C0F05 50%, transparent)),
    linear-gradient(180deg, #7D5430 3.5px, #553519 28%, #2B170A 75%, #1C0F05);
  background-blend-mode: normal, normal, normal, normal, normal;
}
.kiste-stab { position: absolute; left: 50%; top: -6px; bottom: 6px; z-index: 1; width: 6px; translate: -50% 0;
  background: linear-gradient(90deg, #4E3018, #A2733F 45%, #63401F); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinte) 55%, transparent); }
.kiste-fach { position: absolute; inset: 0; z-index: 2; }
/* Die Front: drei Bretter, jedes etwas anders im Ton, mit Maserung, Licht auf der oberen Kante und Tinte an der
   Fuge. Die Fugen und die zwei Grifflöcher in der oberen Latte sind ausgestanzt (Maske); an den Enden sitzen die
   Latten auf den Stirnbrettern, dort sieht man in den Fugen deren Kante im Schatten. Je Lattenende ein Nagel. */
.kiste-wand {
  --loch: 15%;
  position: absolute; inset: 0; z-index: 3; border: var(--kante) solid var(--tinte); border-radius: 4px;
  background:
    /* Nägel: verzinkte Köpfe, Licht von oben links */
    radial-gradient(circle 2.4px at 3px 3px, #EDE7DC 0 .5px, #9A9187 1.1px, #3A322C 1.9px, transparent 2.3px) left 3px top calc(var(--latte) / 2 - 1.5px) / 6px calc(var(--latte) + var(--fuge)) repeat-y,
    radial-gradient(circle 2.4px at 3px 3px, #EDE7DC 0 .5px, #9A9187 1.1px, #3A322C 1.9px, transparent 2.3px) right 3px top calc(var(--latte) / 2 - 1.5px) / 6px calc(var(--latte) + var(--fuge)) repeat-y,
    /* Grifflöcher: unten im Loch fällt Licht auf das Holz, ringsum Tinte */
    radial-gradient(11px 3.3px at 50% calc(50% + 1.6px), #E1B57A 0 92%, transparent) var(--loch) calc(var(--latte) / 2 - 4.5px) / 32px 12px no-repeat,
    radial-gradient(11px 3.3px at 50% calc(50% + 1.6px), #E1B57A 0 92%, transparent) calc(100% - var(--loch)) calc(var(--latte) / 2 - 4.5px) / 32px 12px no-repeat,
    radial-gradient(12.6px 4.6px at 50% calc(50% + .6px), var(--tinte) 0 90%, transparent) var(--loch) calc(var(--latte) / 2 - 4.5px) / 32px 12px no-repeat,
    radial-gradient(12.6px 4.6px at 50% calc(50% + .6px), var(--tinte) 0 90%, transparent) calc(100% - var(--loch)) calc(var(--latte) / 2 - 4.5px) / 32px 12px no-repeat,
    /* Kanten: oben Licht, unten Schatten und Tinte an jeder Fuge */
    linear-gradient(180deg,
      #E0B475 0 calc(var(--kante) + 1.5px), transparent calc(var(--kante) + 1.5px) calc(var(--latte) - 4px),
      color-mix(in srgb, #2A1608 40%, transparent) calc(var(--latte) - 4px) calc(var(--latte) - 1.5px), var(--tinte) calc(var(--latte) - 1.5px) var(--latte),
      transparent var(--latte) var(--l2),
      var(--tinte) var(--l2) calc(var(--l2) + 1.5px), #D8AB6C calc(var(--l2) + 1.5px) calc(var(--l2) + 3px), transparent calc(var(--l2) + 3px) calc(var(--l3) - var(--fuge) - 4px),
      color-mix(in srgb, #2A1608 40%, transparent) calc(var(--l3) - var(--fuge) - 4px) calc(var(--l3) - var(--fuge) - 1.5px), var(--tinte) calc(var(--l3) - var(--fuge) - 1.5px) calc(var(--l3) - var(--fuge)),
      transparent calc(var(--l3) - var(--fuge)) var(--l3),
      var(--tinte) var(--l3) calc(var(--l3) + 1.5px), #CFA163 calc(var(--l3) + 1.5px) calc(var(--l3) + 3px), transparent calc(var(--l3) + 3px) calc(100% - var(--kante) - 3px),
      color-mix(in srgb, #2A1608 45%, transparent) calc(100% - var(--kante) - 3px)),
    /* Maserung, dazu feines Korn */
    var(--maserung) 0 0 / 420px 72px,
    var(--korn),
    /* zu den Enden hin weniger Licht */
    linear-gradient(90deg, color-mix(in srgb, #2A1608 30%, transparent), transparent 24% 76%, color-mix(in srgb, #2A1608 30%, transparent)),
    /* in den Fugen an den Enden: die Kante der Stirnbretter, unter der Latte darüber im Schatten */
    linear-gradient(180deg, transparent 0 var(--latte), #2E1A0B var(--latte), #8A5E31 var(--l2), transparent var(--l2) calc(var(--l3) - var(--fuge)), #2E1A0B calc(var(--l3) - var(--fuge)), #8A5E31 var(--l3), transparent var(--l3)),
    /* drei Bretter, oben am hellsten */
    linear-gradient(180deg, #C4925A 0 var(--latte), transparent var(--latte) var(--l2), #B4834B var(--l2) calc(var(--l3) - var(--fuge)), transparent calc(var(--l3) - var(--fuge)) var(--l3), #A47341 var(--l3));
  background-origin: border-box;
  background-blend-mode: normal, normal, normal, normal, normal, normal, normal, normal, soft-light, normal, normal, normal;
  mask:
    linear-gradient(#000 0 0) left / 9px 100% no-repeat,
    linear-gradient(#000 0 0) right / 9px 100% no-repeat,
    linear-gradient(180deg, #000 0 var(--latte), transparent var(--latte) var(--l2), #000 var(--l2) calc(var(--l3) - var(--fuge)), transparent calc(var(--l3) - var(--fuge)) var(--l3), #000 var(--l3)),
    radial-gradient(11px 3.3px at 50% 50%, #000 0 90%, transparent) var(--loch) calc(var(--latte) / 2 - 4.5px) / 32px 12px no-repeat,
    radial-gradient(11px 3.3px at 50% 50%, #000 0 90%, transparent) calc(100% - var(--loch)) calc(var(--latte) / 2 - 4.5px) / 32px 12px no-repeat;
  mask-composite: add, add, subtract, add, add;
}
/* was nicht hineinpasst, steht auf dem Etikett, angeheftet an die mittlere Latte */
.kiste-mehr {
  position: absolute; z-index: 4; right: 18px; top: 50%; translate: 0 -50%; rotate: -3deg; padding: 2px 7px 1px;
  background: var(--weiss); border: 2px solid var(--tinte); border-radius: 3px;
  font: 900 14px/1 var(--schrift-schild); color: var(--tinte); font-variant-numeric: tabular-nums; letter-spacing: .02em;
  box-shadow: 0 2px 2px -1px color-mix(in srgb, var(--wurf) 45%, transparent);
}
.kiste-mehr[hidden] { display: none; }
/* quillt sie über, passt der Deckel nicht mehr drauf: eine Latte lehnt schräg daneben, oben und unten genagelt */
.kiste-brett { display: none; }
.schild-kiste.quillt .kiste-brett {
  display: block; position: absolute; right: -15px; bottom: -3px; z-index: 1; width: 13px; height: calc(var(--kiste-h) + 18px);
  border: 2.5px solid var(--tinte); border-radius: 3px; rotate: 10deg; transform-origin: 50% 100%;
  background:
    radial-gradient(circle 2.2px at 50% 6px, #EDE7DC 0 .5px, #9A9187 1px, #3A322C 1.7px, transparent 2.1px),
    radial-gradient(circle 2.2px at 50% calc(100% - 6px), #EDE7DC 0 .5px, #9A9187 1px, #3A322C 1.7px, transparent 2.1px),
    linear-gradient(90deg, #E0B475 0 1.5px, transparent 1.5px calc(100% - 2px), color-mix(in srgb, #2A1608 45%, transparent) calc(100% - 2px)),
    var(--korn) 0 0 / 18px 640px, var(--korn),
    linear-gradient(180deg, #C4925A, #A47341);
  background-blend-mode: normal, normal, normal, soft-light, soft-light, normal;
}

/* ---------- Was darin steckt ---------- */

.kiste-ding {
  position: absolute; left: var(--x, 50%); bottom: 5px;
  height: calc(var(--kiste-h) - 5px + var(--ragt, 18) * var(--ks) * 1px);
  translate: -50% 0; rotate: var(--kipp, 0deg); transform-origin: 50% 100%;
}
.kiste-ding[hidden] { display: none; }
/* ein Zettel: Papier mit Kritzelzeilen */
.kiste-zettel { width: var(--ding-b); }
.kz-papier {
  position: absolute; inset: 0; border: 2px solid var(--tinte); border-bottom: 0; border-radius: 2px 2px 0 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, color-mix(in srgb, var(--tinte) 46%, transparent) 5px 6.6px) 4px 7px / calc(100% - 8px) 15px no-repeat,
    var(--korn), linear-gradient(170deg, var(--blatt-a, #FFFFFF), var(--blatt-b, #FBF9F3) 55%, var(--blatt-c, #EFEADF));
  background-blend-mode: normal, soft-light, normal;
  box-shadow: 1px 0 0 color-mix(in srgb, var(--wurf) 25%, transparent);
}
/* drei Sorten Papier aus der Requisite: weiss, vergilbt, liniert-bläulich */
.kiste-zettel.papier-1 { --blatt-a: #FBF3DC; --blatt-b: #F3E9CC; --blatt-c: #E6D7B0; }
.kiste-zettel.papier-2 { --blatt-a: #F2FBFA; --blatt-b: #E1F5F4; --blatt-c: #C9E9E8; }
/* überfällig: die Ecke rollt sich ein */
.kiste-zettel.eingerollt .kz-papier { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
.kiste-zettel.eingerollt::after {
  content: ""; position: absolute; right: 0; top: 0; width: 9px; height: 9px; z-index: 1;
  background: linear-gradient(225deg, transparent 50%, #E6D7B0 50%); border-left: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); border-radius: 0 0 0 5px;
}
/* ein Schildchen: kleine Platte am kurzen Stab, mit dem Köpfchen dessen, der es angelegt hat */
.kiste-schildchen { width: var(--schildchen-b); }
.ks-platte {
  position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 1; border: 2px solid var(--tinte); border-radius: 3px;
  background: var(--korn), linear-gradient(172deg, #FFFFFF, #FBF9F3 55%, #EFEADF); background-blend-mode: soft-light, normal;
  box-shadow: 0 2px 3px -1px color-mix(in srgb, var(--wurf) 40%, transparent);
}
.kiste-schildchen.laeuft .ks-platte { background: var(--korn), linear-gradient(172deg, #FFFFB8, var(--spot)); }
.ks-zeilen { position: absolute; left: 4px; right: 14px; top: 5px; height: 9px;
  background: linear-gradient(var(--tinte), var(--tinte)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--tinte-leise), var(--tinte-leise)) 0 6px / 62% 2px no-repeat; }
.ks-kopf { position: absolute; right: -7px; top: -9px; width: 15px; height: 18px; object-fit: contain; object-position: bottom; }
.ks-stab { position: absolute; left: 50%; top: 18px; bottom: 0; width: 4px; translate: -50% 0;
  background: linear-gradient(90deg, #4E3018, #A2733F 45%, #63401F); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinte) 55%, transparent); }
/* oben drauf: das Fähnchen für dringend und wichtig, das Köpfchen mit Mütze, wer sich kümmert oder für wen es ist */
.kiste-ding > .pegel { position: absolute; left: -3px; top: -14px; z-index: 2; width: 12px; height: 14px; }
.kiste-schildchen > .pegel { left: 2px; top: -15px; }
.kd-kopf { position: absolute; right: -9px; top: -13px; z-index: 3; display: flex; }
.kd-kopf .mutzkopf { --kh: 19px; }
.kd-kopf .koepfchen { width: 16px; height: 19px; filter: none; }
.kd-kopf .mutzkopf + .mutzkopf { margin-left: -9px; }
.kiste-schildchen .kd-kopf { right: auto; left: 50%; top: -16px; }
/* der Anhänger hängt an einer Schnur oben seitlich am Ding, über dem Kistenrand */
.kiste-ding .anhaenger {
  /* ragt ein Ding kaum heraus, hängt sein Anhänger höher an der Schnur, damit das Ziel über dem Rand bleibt */
  position: absolute; left: 58%; top: min(3px, calc(var(--ragt, 24) * var(--ks) * 1px - 19px)); z-index: 4; padding: 0 3px; border-width: 1.5px; border-radius: 2px 4px 4px 2px;
  font-size: 11px; line-height: 1.25; rotate: 7deg; transform-origin: 0 50%;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--wurf) 40%, transparent);
}
.kiste-ding .anhaenger::before { display: none; }
/* die Schnur: vom Ding zum Anhänger */
.kiste-ding .anhaenger::after { content: ""; position: absolute; right: 100%; top: 50%; width: 6px; height: 1.5px; background: var(--tinte); rotate: -20deg; transform-origin: 100% 50%; }
.kiste-schildchen .anhaenger { top: 6px; left: 70%; }

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

/* beim Schieben schwingt der Inhalt auf eigenen Federn: je höher ein Ding ragt, desto weiter */
.kiste-fach { --schwung: 0deg; }
.kiste-fach .kiste-ding { rotate: calc(var(--kipp, 0deg) + var(--schwung) * (.4 + var(--ragt, 18) / 40)); }
/* wo die Puppe schiebt, staubt es am Boden */
.staub { position: fixed; left: 0; top: 0; z-index: 30; width: 18px; height: 12px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, #E9DDBF 85%, transparent), color-mix(in srgb, #E9DDBF 0%, transparent)); }

@media (prefers-reduced-motion: reduce) {
  .kiste-fach .kiste-ding { rotate: var(--kipp, 0deg); }
}

/* ---------- Die Puppe auf der Bühne (js/buehnenpuppe.js, js/packen.js) ---------- */

/* eine eigene Ebene über den Schildern, unter Dunst, Saum und Bällebad; sie scrollt nicht mit, die Szenen rechnen nach */
.bp-ebene { grid-row: 3; grid-column: 1; position: relative; z-index: 1; overflow: hidden; pointer-events: none; }
@media (min-width: 900px) { .bp-ebene { margin: 0 clamp(34px, 4.2vw, 76px); } }
.bp { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.bp[hidden] { display: none; }
.bp-hub, .bp-koerper { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.bp-koerper { transform-origin: 0 0; transition: rotate .22s var(--aus); }
.bp-koerper img { position: absolute; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.bp-rumpf { filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--tinte) 35%, transparent)); }
.bp-arm { transition: rotate .2s var(--feder); }
.bp-kopf { position: absolute; left: 0; top: 0; transition: rotate .3s var(--feder); }
.bp-kopf img { position: absolute; opacity: 0; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--tinte) 40%, transparent)); }
.bp-kopf img.an { opacity: 1; }
/* ohne Arme: ein kurzer Stab mit der Foto-Zeigehand */
.bp-stab { position: absolute; width: 0; height: 0; transform-origin: 0 0; transition: rotate .2s var(--feder), opacity .15s linear; }
.bp-stab.weg { opacity: 0; }
.bp-rohr { position: absolute; left: 0; top: -3px; width: 18px; height: 6px; border-radius: 3px; border: 1.5px solid color-mix(in srgb, var(--tinte) 80%, transparent);
  background: linear-gradient(180deg, #C99A5B, #A2733F 45%, #5E3C1D); }
.bp-halter { position: absolute; left: 18px; top: 0; width: 0; height: 0; }
.bp-hand { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--tinte) 40%, transparent)); }

/* Doppelgänger, die fliegen oder versinken: ein Zettel, der geworfen wird, eine Kiste, die in die Versenkung fährt */
.bp-geist { position: absolute; will-change: transform; }
.bp-geist > .kiste-ding { left: 0; top: 0; bottom: auto; width: 100%; height: 100%; translate: none; }
.bp-geist.knuell > .kiste-ding .kz-papier, .bp-geist.knuell > .kiste-ding .ks-platte { border-radius: 40%; transition: border-radius .2s; }
.bp-geist.kiste-geist > .schild-kiste { width: 100%; height: 100%; }
/* was die Puppe gleich hineinwirft, ist noch nicht da */
.kiste-ding.kommt { visibility: hidden; }

/* ---------- Auf der Rückseite ---------- */

/* Die Kiste auf dem Bord (js/rueckkiste.js): über den Listen dieselbe Kiste wie auf der Bühne. Ihr Platz ist so hoch
   wie das höchste denkbare Ding (dringend, mit Köpfchen), damit darunter nichts springt, wenn sich eine Priorität
   ändert; was oben auf den Dingen sitzt, ragt in den Abstand zur Gruppe darüber. */
.rs-kiste { position: relative; margin-top: -10px; }
.rs-kiste[hidden] { display: none; }
.rk-platz { position: relative; display: flex; justify-content: center; align-items: flex-end; height: calc(var(--kiste-h) + 66px * var(--ks)); }
/* das Hubpodium: Was noch im Bord steckt, ist nicht zu sehen */
.rs-kiste.hebt .rk-platz { clip-path: inset(-300px -200px 0 -200px); }
/* das Bord: eine Latte aus dem Holz der Kiste, an beiden Enden verschraubt, mit weichem Schatten auf dem Papier */
.rk-bord {
  position: relative; z-index: 0; display: block; height: 12px; margin: -1px -6px 0; border: 2.5px solid var(--tinte); border-radius: 3px;
  background:
    radial-gradient(circle 2.3px at 50% 50%, #EDE7DC 0 .5px, #9A9187 1.1px, #3A322C 1.8px, transparent 2.2px) 9px 50% / 6px 6px no-repeat,
    radial-gradient(circle 2.3px at 50% 50%, #EDE7DC 0 .5px, #9A9187 1.1px, #3A322C 1.8px, transparent 2.2px) calc(100% - 9px) 50% / 6px 6px no-repeat,
    linear-gradient(180deg, #E0B475 0 2px, transparent 2px calc(100% - 2.5px), color-mix(in srgb, #2A1608 45%, transparent) calc(100% - 2.5px)),
    var(--maserung) 0 0 / 420px 72px,
    var(--korn),
    linear-gradient(90deg, color-mix(in srgb, #2A1608 28%, transparent), transparent 14% 86%, color-mix(in srgb, #2A1608 28%, transparent)),
    linear-gradient(180deg, #C4925A, #A47341);
  background-blend-mode: normal, normal, normal, normal, soft-light, normal, normal;
  box-shadow: 0 5px 7px -3px color-mix(in srgb, var(--wurf) 45%, transparent);
}
/* noch nichts offen: Klebebandecken auf dem Papier, wo die Kiste hinkommt */
.rk-umriss {
  --band: color-mix(in srgb, var(--tinte) 30%, transparent);
  position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: clamp(140px, 84%, 290px); height: var(--kiste-h); opacity: 0; pointer-events: none;
  background:
    linear-gradient(var(--band) 0 0) 0 0 / 16px 3px, linear-gradient(var(--band) 0 0) 0 0 / 3px 16px,
    linear-gradient(var(--band) 0 0) 100% 0 / 16px 3px, linear-gradient(var(--band) 0 0) 100% 0 / 3px 16px,
    linear-gradient(var(--band) 0 0) 0 100% / 16px 3px, linear-gradient(var(--band) 0 0) 0 100% / 3px 16px,
    linear-gradient(var(--band) 0 0) 100% 100% / 16px 3px, linear-gradient(var(--band) 0 0) 100% 100% / 3px 16px;
  background-repeat: no-repeat; transition: opacity .3s var(--aus);
}
.rs-kiste[data-stand="leer"] .rk-umriss { opacity: 1; }
/* alles erledigt: wo die Kiste stand, ist BRAVO aufs Papier gestempelt */
.rk-bravo {
  display: none; left: 50%; top: auto; bottom: calc(var(--kiste-h) * .32); margin-left: -48px; width: 96px; padding: 8px 0 6px; text-align: center;
  font-size: 20px; letter-spacing: .08em; border-width: 3px; transform: rotate(-6deg); pointer-events: none;
}
.rs-kiste[data-stand="bravo"] .rk-bravo { display: block; }
.rs-kiste.baut-ab :is(.rk-bravo, .rk-umriss) { visibility: hidden; }
.rk-bravo.frisch { animation: bord-bravo .5s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes bord-bravo {
  0% { transform: translateY(-34px) scale(2.1) rotate(-18deg); opacity: 0; }
  45% { transform: translateY(2px) scale(.9) rotate(-4deg); opacity: 1; }
  70% { transform: scale(1.05) rotate(-7deg); }
  100% { transform: rotate(-6deg); }
}
/* Die Dinge lassen sich antippen: ein Zettel zeigt auf seine Zeile, ein Schildchen öffnet sein Unterprojekt. Die
   Fläche zum Tippen ist grösser als das Ding. Wer an einer Zeile ist, dessen Zettel hebt sich ins Licht. */
.rs-kiste .kiste-ding { cursor: pointer; transition: translate .22s var(--aus); }
.rs-kiste .kiste-ding::before { content: ""; position: absolute; inset: -16px -7px -6px; }
.rs-kiste .kiste-ding:hover, .rs-kiste .kiste-ding.gemeint { translate: -50% -7px; }
.rs-kiste .kiste-zettel.gemeint { --blatt-a: #FFFFE6; --blatt-b: #FFFFB8; --blatt-c: var(--spot); }
.rs-kiste .kiste-mehr { cursor: pointer; }
/* Doppelgänger, die fliegen: in der obersten Ebene des Dialogs, mit einem Wurf, solange sie in der Luft sind */
.rk-geist { position: fixed; z-index: 4; pointer-events: none; will-change: transform; filter: drop-shadow(0 6px 4px color-mix(in srgb, var(--wurf) 30%, transparent)); }
.rk-geist > .kiste-ding { left: 0; top: 0; bottom: auto; width: 100%; height: 100%; translate: none; }
.rk-geist.knuell > .kiste-ding :is(.kz-papier, .ks-platte) { border-radius: 40%; transition: border-radius .2s; }
/* erledigt: Der Haken landet auf dem Zettel, der aus der Kiste springt */
.rk-haken { position: absolute; left: 50%; top: 3px; z-index: 5; width: 22px; height: 22px; margin-left: -11px; color: var(--vorhang); filter: drop-shadow(0 1px 0 var(--weiss)); animation: rk-haken .28s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes rk-haken { from { scale: 2.3; rotate: -24deg; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rs-kiste .kiste-ding { transition: none; }
}

/* das Fähnchen steckt oben rechts im Pappkästchen; wechselt die Stufe, springt es auf die neue Höhe */
.todo-haken { position: relative; }
.todo-haken .pegel, .todo-haken[aria-checked] svg.pegel {
  position: absolute; right: 1px; top: -1px; width: 12px; height: 14px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tinte); pointer-events: none;
}
.todo-haken .pegel.frisch { animation: fahne-hoch .5s var(--feder); }
@keyframes fahne-hoch { from { translate: 0 9px; scale: .3; } }
/* die Leiste unter der Zeile, an der man gerade arbeitet: so weit eingerückt wie der Text. Oben die Priorität,
   darunter, wer sich kümmert (muetze.css), zuletzt das Löschen */
.todo-leiste { grid-column: 1 / -1; display: none; justify-items: start; gap: 12px; padding: 2px 0 10px 68px; }
.todo-punkt.zeigt-leiste .todo-leiste, .todo-punkt:focus-within .todo-leiste { display: grid; }
.todo-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.todo-leiste .todo-weg { margin-left: -8px; padding: 0 10px 0 8px; }
.todo-leiste .wahl { min-height: 44px; padding: 0 12px; gap: 5px; font-size: 14px; }
.todo-leiste .wahl[aria-checked="true"] { background: var(--spot); }
.prio-reihe .wahl { gap: 6px; }
.prio-reihe .pegel, .todo-leiste .pegel { margin-left: -3px; }
@media (max-width: 420px) { .todo-leiste { padding-left: 24px; } }
/* in der Zeile eines Unterprojekts: Priorität und, wenn es ansteht, der Anhänger */
.unter-titel .prio, .unter-titel .anhaenger { font-size: 12px; }
.unter-titel .anhaenger { padding: 0 5px 0 4px; }

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

/* beim Wechsel des Bühnenbilds fliegen die Schilder ohne ihre Kisten (js/umbau.js); die alten Kisten bleiben
   sichtbar stehen und fahren hinunter, die neuen kommen beim Landen herauf */
.umbau-gesicht .schild-kiste { display: none; }
.umbau-alt [data-id] > .schild-kiste { visibility: visible; }
.umbau-wartet > .schild-kiste { visibility: hidden; }
/* im Programmzettel: Priorität und fälliges Ziel in der Zeile */
.zeile-titel .prio, .zeile-titel .anhaenger { font-size: 12px; }