/* ==============================================================   GESCHICHTE · die eigene Vitrine (data-welt="geschichte" — online.js liest sie an der Uhr „saaluhr" ab)
   Geschichte (design/handy/sets/geschichte/IDEE.md §2.7). Tobi, 02.11.2026: „… echt langweilig und eigentlich fast immer gleich."
   Darum jetzt ein Platz im Museum bei Nacht, mit Glas, Messing und Samt:
     · Hinten die Saalwand: roter Stoff mit eingewebtem Muster über der Täfelung aus dunklem Holz, oben die vergoldete Bilderleiste;
       von oben fällt das Licht der Saalstrahler.
     · Der Buddy steht als EXPONAT in seiner VITRINE: hinten roter Samt, ein Strahler von oben, vorn das Glas mit seinen Spiegelungen
       und der Messingrahmen; er steht auf einem Sockel aus Stein (er trägt den Lorbeerkranz).
     · Die ANZEIGE ist das MESSINGSCHILD an der Vitrine: poliert, mit Fase und vier Schrauben, eine gravierte Doppellinie und unten
       ein Mäanderband. Die Wahl steht eingraviert darin (dunkel, mit Lichtkante). Das Licht einer Laterne flackert leise darauf,
       und wenn man wählt, fährt einmal ein Glanz über das Messing.
     · Die TASTE ist das SCHLOSS der Vitrine: Samt in Siegelrot mit Goldrand. Leer sieht man nur das Schlüsselloch, mit der Wahl
       steckt der Schlüssel, abgeschickt dreht er sich — „Abgeschlossen!": danach ändert sich nichts mehr.
     · Der Buddy spricht auf kleinen SAALTAFELN aus Elfenbein (zwei Messingstifte, der erste Buchstabe rot wie eine Initiale).
   Holz, Stein, Messing, Samt und Glas sind Material; Licht, Schrift und Zustände kommen aus den Rollen (--acc Sepia, --acc2
   Siegelrot). Variablen tragen das Motiv im Namen (--qo-ge-*). Bewegung nur transform und opacity: die Laterne flackert, der
   Glanz fährt, der Schlüssel dreht; bei reduzierter Bewegung steht alles.
   ===================================================================== */
.qo-pult[data-welt="geschichte"] {
  --qo-ge-messing: linear-gradient(180deg, #f8e7bd, #dcbb80 16%, #c7a066 52%, #a9824e 86%, #8a6538);
  --qo-ge-tinte: #241505;
  --qo-ge-samt: color-mix(in srgb, var(--acc2) 46%, #1a0507);
  --qo-ge-schraube: radial-gradient(circle, #fff3d6 0 .14cqmin, #b08a52 .2cqmin .32cqmin, #5e3f1c .38cqmin, transparent .44cqmin);
  --qo-ge-maeander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M0 7.5h3V.5h7v5H6V3h2M10 7.5h6'/%3E%3C/svg%3E");
  --qo-ge-loch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='7' r='4.2'/%3E%3Cpath d='M7.6 9.5 6.4 17h7.2l-1.2-7.5z'/%3E%3C/svg%3E");
  --qo-ge-schluessel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='5' r='3.6'/%3E%3Cpath d='M10 8.6V19M10 14.5h3M10 17.6h2.4'/%3E%3C/svg%3E");
  --pult-grund:
    radial-gradient(14% 120% at 9% -30%, rgba(255, 226, 170, .2), transparent 70%),
    radial-gradient(30% 120% at 44% -40%, rgba(255, 226, 170, .16), transparent 70%),
    linear-gradient(180deg, transparent 0 69%, #d9b778 69% 70.2%, #6e4b2a 70.2% 71%, #3a2614 71%, #1f1409 100%),
    linear-gradient(90deg, transparent 0 calc(50% - .1cqmin), color-mix(in srgb, #000 40%, transparent) calc(50% - .1cqmin) calc(50% + .1cqmin), transparent calc(50% + .1cqmin)) 0 100% / 14cqmin 30% repeat-x,
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc2) 30%, #2a0a0c) 0 .5cqmin, transparent .6cqmin) 0 0 / 3.6cqmin 3.6cqmin,
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc2) 22%, #2a0a0c) 0 .3cqmin, transparent .4cqmin) 1.8cqmin 1.8cqmin / 3.6cqmin 3.6cqmin,
    linear-gradient(180deg, color-mix(in srgb, var(--acc2) 22%, #170507), color-mix(in srgb, var(--acc2) 30%, #1f0709) 60%);
  --kante: linear-gradient(180deg, #fbe3a8, #c79a52 34%, #7a5326 70%, #3a2410);
  --kante-h: 1cqmin;
  /* Der Sockel des Exponats: Stein. */
  --sitz: linear-gradient(90deg, #4b4338, #8a7d69 30%, #a39580 50%, #8a7d69 70%, #4b4338);
  --sitz-naht: #2a2219;
  /* DAS MESSINGSCHILD: Fase, vier Schrauben, gravierte Doppellinie, unten der Mäander. */
  --disp-grund:
    var(--qo-ge-schraube) .2cqmin .2cqmin / 1.8cqmin 1.8cqmin no-repeat,
    var(--qo-ge-schraube) right .2cqmin top .2cqmin / 1.8cqmin 1.8cqmin no-repeat,
    var(--qo-ge-schraube) .2cqmin calc(100% - .2cqmin) / 1.8cqmin 1.8cqmin no-repeat,
    var(--qo-ge-schraube) right .2cqmin bottom .2cqmin / 1.8cqmin 1.8cqmin no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 .2cqmin, rgba(90, 60, 20, .05) .2cqmin .4cqmin),
    var(--qo-ge-messing);
  --disp-rahmen: inset 0 0 0 max(1px, .16cqmin) #5e3f1c, inset 0 .3cqmin 0 rgba(255, 250, 230, .6), inset 0 -.3cqmin 0 rgba(70, 44, 18, .4),
    inset 0 0 0 1.25cqmin transparent, inset 0 0 0 1.36cqmin rgba(70, 44, 18, .32), inset 0 0 0 1.5cqmin rgba(255, 245, 220, .3),
    0 .3cqmin 0 #3a2410, 0 1.1cqmin 2cqmin rgba(0, 0, 0, .6);
  --disp-rund: .5cqmin; --disp-glas: none;
  --disp-leer: color-mix(in srgb, var(--qo-ge-tinte) 80%, #c49c63); --disp-an: var(--qo-ge-tinte); --disp-fest: #120a03;
  --disp-neben: color-mix(in srgb, var(--qo-ge-tinte) 90%, #c49c63); --disp-mittel: #3a2410;
  /* Graviert: die Schrift liegt tief, unten fängt die Kante das Licht. */
  --disp-leucht: 0 .14cqmin 0 rgba(255, 244, 214, .6); --disp-leucht-fest: 0 .14cqmin 0 rgba(255, 244, 214, .6);
  --disp-trenn: color-mix(in srgb, var(--qo-ge-tinte) 28%, transparent);
  /* Das Schloss der Vitrine: dunkles Holz mit Messingkante. */
  --taste-rahmen: linear-gradient(180deg, #5b3e22, #33220f 55%, #1f1409);
  --taste-rund: .8cqmin;
  --taste-schatten: 0 1cqmin 2.4cqmin rgba(0, 0, 0, .65), inset 0 0 0 .2cqmin #b08a52, inset 0 .4cqmin 0 rgba(255, 230, 180, .3), inset 0 0 0 .34cqmin rgba(0, 0, 0, .6);
  --rang-grund: var(--qo-ge-messing);
}
.qo-pult[data-welt="geschichte"] .qo-display { --jetzt: color-mix(in srgb, var(--acc2) 34%, #120102); --disp-urteil: color-mix(in srgb, var(--u) 46%, #121216); }
.qo-pult[data-welt="geschichte"] .qo-z-uwort { text-shadow: 0 .14cqmin 0 rgba(255, 244, 214, .55); }
.qo-pult[data-welt="geschichte"] .qo-punkte b { color: var(--qo-ge-tinte); }
.qo-pult[data-welt="geschichte"] .qo-a-t em, .qo-pult[data-welt="geschichte"] .qo-drin .qo-tischwort b { text-shadow: 0 .12cqmin 0 rgba(255, 244, 214, .5); }
.qo-pult[data-welt="geschichte"] .qo-a-stempel { background: color-mix(in srgb, var(--acc2) 84%, #2a0508); color: #fbf3ee; }
.qo-pult[data-welt="geschichte"] .qo-pt-wort b, .qo-pult[data-welt="geschichte"] .qo-pt-satz b { color: color-mix(in srgb, var(--acc2) 34%, #120102); text-shadow: none; }
.qo-pult[data-welt="geschichte"] .qo-pt-platz .qo-sprung.hoch { color: #0b6b4a; }

/* DIE VITRINE: hinten Samt mit dem Strahler, Messingrahmen … */
.qo-pult[data-welt="geschichte"] .qo-buddy::before {
  left: 4%; right: 4%; top: -4%; bottom: -1.9cqmin; border-radius: .3cqmin;
  background:
    radial-gradient(60% 46% at 50% 0%, rgba(255, 232, 186, .5), transparent 80%),
    radial-gradient(80% 70% at 50% 20%, color-mix(in srgb, var(--acc2) 40%, #3a0c10), transparent 90%),
    var(--qo-ge-samt);
  box-shadow: inset 0 0 0 .45cqmin #c9a265, inset 0 0 0 .6cqmin #5e3f1c, inset 0 1.4cqmin 1.6cqmin rgba(0, 0, 0, .45), 0 .6cqmin 1.4cqmin rgba(0, 0, 0, .55);
}
/* … und VORN das Glas mit seinen Spiegelungen, unten der Sockel aus Stein (das ::after liegt über dem Buddy). */
.qo-pult[data-welt="geschichte"] .qo-buddy::after {
  left: 4%; right: 4%; top: -4%; bottom: -1.9cqmin; height: auto; border-radius: .3cqmin; pointer-events: none;
  background:
    linear-gradient(180deg, transparent calc(100% - 3cqmin), #b39d7c calc(100% - 3cqmin), #8a7d69 calc(100% - 2.5cqmin), #5a5044 100%),
    linear-gradient(112deg, transparent 0 18%, rgba(255, 255, 255, .16) 18% 24%, transparent 24% 30%, rgba(255, 255, 255, .08) 30% 32%, transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 30%);
  box-shadow: inset 0 0 0 .45cqmin #c9a265, inset 0 .3cqmin 0 .45cqmin rgba(255, 240, 200, .4);
}

/* Die Saaltafel des Buddys: Elfenbein, zwei Messingstifte, die Schrift dunkel, der erste Buchstabe rot. */
.qo-pult[data-welt="geschichte"] .qo-sagt { border-radius: .3cqmin;
  background:
    radial-gradient(circle, #fff1cc 0 .14cqmin, #b08a52 .2cqmin .3cqmin, #5e3f1c .36cqmin, transparent .42cqmin) .4cqmin .4cqmin / 1.6cqmin 1.6cqmin no-repeat,
    radial-gradient(circle, #fff1cc 0 .14cqmin, #b08a52 .2cqmin .3cqmin, #5e3f1c .36cqmin, transparent .42cqmin) calc(100% - .4cqmin) .4cqmin / 1.6cqmin 1.6cqmin no-repeat,
    linear-gradient(180deg, #f9f1df, #e6d6b2);
  box-shadow: inset 0 0 0 .16cqmin #8a6538, inset 0 .3cqmin 0 rgba(255, 255, 255, .7), 0 .8cqmin 2cqmin rgba(0, 0, 0, .55); padding-left: 2.2cqmin; padding-right: 2.2cqmin; }
.qo-pult[data-welt="geschichte"] .qo-sagt::before { background: #ecdfc2; }
.qo-pult[data-welt="geschichte"] .qo-sagt-text { color: #2a1a0c; }
.qo-pult[data-welt="geschichte"] .qo-sagt-text::first-letter { color: color-mix(in srgb, var(--acc2) 86%, #2a0508); font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }

/* Das Schild lebt: unten das gravierte Mäanderband, darüber flackert das Licht der Laterne. */
.qo-pult[data-welt="geschichte"] .qo-d-glas { overflow: hidden; }
.qo-pult[data-welt="geschichte"] .qo-d-glas::before {
  content: ""; position: absolute; left: 2.2cqmin; right: 2.2cqmin; bottom: .42cqmin; height: .72cqmin; opacity: .4; background: #3a2410;
  -webkit-mask: var(--qo-ge-maeander) 0 50% / auto 100% repeat-x; mask: var(--qo-ge-maeander) 0 50% / auto 100% repeat-x;
}
.qo-pult[data-welt="geschichte"] .qo-d-glas::after {
  content: ""; position: absolute; inset: -40% -10% -10% -10%; pointer-events: none;
  background: radial-gradient(30% 60% at 22% 20%, rgba(255, 236, 190, .5), transparent 70%), radial-gradient(40% 80% at 78% 0%, rgba(255, 220, 160, .22), transparent 70%);
  animation: qo-ge-flackern 5.3s ease-in-out infinite, qo-ge-schwanken 9s ease-in-out infinite alternate;
}
@keyframes qo-ge-flackern { 0%, 100% { opacity: .85; } 12% { opacity: .7; } 14% { opacity: .9; } 37% { opacity: .78; } 61% { opacity: 1; } 63% { opacity: .74; } 66% { opacity: .92; } 88% { opacity: .8; } }
@keyframes qo-ge-schwanken { from { transform: translateX(-2%); } to { transform: translateX(3%); } }
/* Mit der Wahl fährt einmal ein Glanz über das Messing (an der Seite des Displays, über allem, das Schild schneidet ab). */
.qo-pult[data-welt="geschichte"] .qo-display:has(.qo-anzeige[data-zustand="gewaehlt"])::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 250, 230, .55) 46%, rgba(255, 250, 230, .2) 52%, transparent 62%);
  transform: translateX(-100%); animation: qo-ge-glanz 1.4s cubic-bezier(.4, 0, .2, 1) 120ms both;
}
@keyframes qo-ge-glanz { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* DIE TASTE: Samt in Siegelrot, Goldrand; vorn das Schlüsselloch — mit der Wahl der Schlüssel, abgeschickt dreht er sich. */
.qo-pult[data-welt="geschichte"] .qo-los .qo-kappe, .qo-pult[data-welt="geschichte"] .qo-los[data-zustand] .qo-kappe {
  border-radius: .4cqmin; color: #fbefd6;
  background: radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, var(--acc2) 70%, #3a0a0e), var(--qo-ge-samt) 80%);
  box-shadow: inset 0 0 0 .2cqmin #c9a265, inset 0 0 0 .34cqmin #5e3f1c, inset 0 .5cqmin .8cqmin rgba(255, 220, 200, .12), inset 0 -.5cqmin 1cqmin rgba(0, 0, 0, .45);
}
.qo-pult[data-welt="geschichte"] .qo-los .qo-kappe::before {
  content: ""; display: inline-block; vertical-align: middle; flex: none; width: 3cqmin; height: 3cqmin; margin-right: .2cqmin;
  background: linear-gradient(180deg, #fbe3a8, #c9a265 60%, #8a6538);
  -webkit-mask: var(--qo-ge-loch) center / contain no-repeat; mask: var(--qo-ge-loch) center / contain no-repeat;
  transition: transform 420ms cubic-bezier(.3, 1.4, .5, 1);
}
.qo-pult[data-welt="geschichte"] .qo-los[data-zustand="leer"] .qo-kappe { color: #e6d3b4; background: radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, var(--acc2) 40%, #2a0a0c), color-mix(in srgb, var(--qo-ge-samt) 80%, #000) 80%); }
.qo-pult[data-welt="geschichte"] .qo-los[data-zustand="leer"] .qo-kappe::before { opacity: .8; }
.qo-pult[data-welt="geschichte"] .qo-los[data-zustand="gewaehlt"] .qo-kappe { color: #fff8e8;
  box-shadow: inset 0 0 0 .2cqmin #f1d08c, inset 0 0 0 .34cqmin #5e3f1c, inset 0 .5cqmin .8cqmin rgba(255, 220, 200, .16), 0 0 2.6cqmin color-mix(in srgb, var(--acc2) 46%, transparent); }
.qo-pult[data-welt="geschichte"] .qo-los:is([data-zustand="gewaehlt"], [data-zustand="gesendet"]) .qo-kappe::before { -webkit-mask-image: var(--qo-ge-schluessel); mask-image: var(--qo-ge-schluessel); }
.qo-pult[data-welt="geschichte"] .qo-los[data-zustand="gewaehlt"] .qo-kappe::before { animation: qo-ge-stecken 380ms cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes qo-ge-stecken { from { transform: translateY(-50%); opacity: 0; } to { transform: none; opacity: 1; } }
.qo-pult[data-welt="geschichte"] .qo-los[data-zustand="gesendet"] .qo-kappe { color: #fbefd6; background: radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, var(--acc) 50%, #2a1a0a), color-mix(in srgb, var(--acc) 26%, #140c04) 80%);
  box-shadow: inset 0 0 0 .2cqmin #c9a265, inset 0 0 0 .34cqmin #5e3f1c, inset 0 .5cqmin .9cqmin rgba(0, 0, 0, .35); }
.qo-pult[data-welt="geschichte"] .qo-los[data-zustand="gesendet"] .qo-kappe::before { transform: rotate(90deg); }
.qo-pult[data-welt="geschichte"] .qo-rang .qo-los.qo-rang-alt .qo-kappe::before { transform: none; }

/* Platz und Punkte auf dem Messingschild: dunkle Gravur, vier Schrauben. */
.qo-pult[data-welt="geschichte"] .qo-rang-in { border-radius: .4cqmin; --t0: #241505; --t1: #3d2610; --t2: #3a2410; --jetzt: color-mix(in srgb, var(--acc2) 34%, #120102);
  background:
    var(--qo-ge-schraube) .1cqmin .1cqmin / 1.6cqmin 1.6cqmin no-repeat, var(--qo-ge-schraube) right .1cqmin top .1cqmin / 1.6cqmin 1.6cqmin no-repeat,
    var(--qo-ge-schraube) .1cqmin calc(100% - .1cqmin) / 1.6cqmin 1.6cqmin no-repeat, var(--qo-ge-schraube) right .1cqmin bottom .1cqmin / 1.6cqmin 1.6cqmin no-repeat,
    var(--qo-ge-messing);
  box-shadow: inset 0 0 0 .16cqmin #5e3f1c, inset 0 .3cqmin 0 rgba(255, 250, 230, .55), 0 .2cqmin .5cqmin rgba(0, 0, 0, .45); }
.qo-pult[data-welt="geschichte"] .qo-rang .qo-z-pzahl, .qo-pult[data-welt="geschichte"] .qo-rang .qo-summe { text-shadow: 0 .14cqmin 0 rgba(255, 244, 214, .55); }
.qo-pult[data-welt="geschichte"] .qo-rang .qo-sprung.hoch { color: #0b6b4a; }
.qo-pult[data-welt="geschichte"] .qo-rang-s { border-left-color: rgba(58, 37, 18, .3); }

@media (prefers-reduced-motion: reduce) {
  .qo-pult[data-welt="geschichte"] .qo-d-glas::after { animation: none; opacity: .85; }
  .qo-pult[data-welt="geschichte"] .qo-display:has(.qo-anzeige[data-zustand="gewaehlt"])::after { display: none; }
  .qo-pult[data-welt="geschichte"] .qo-los .qo-kappe::before { transition: none; animation: none; }
}