/* ==============================================================   SAGENWELT · das eigene Lesepult (data-welt="sagenwelt" — online.js liest sie an der Uhr „sanduhr" ab)
   Sagenwelt (design/handy/sets/sagenwelt/IDEE.md §2.7). Tobi, 02.11.2026: „Die Online-Pult-Leiste von Weltreise sieht wirklich
   gut aus, die von Sagenwelt … aber echt langweilig" — darum jetzt ein Platz im Lesesaal bei Nacht, mit Tiefe und Leben:
     · Hinten die Regale (Buchrücken aus dunklem Leder), von oben fällt das grüne Licht der Glaslampe auf das Pult.
     · Der Buddy sitzt im SPITZBOGENFENSTER des Lesesaals: Steinmaßwerk, draußen die Nacht in Dämmerpurpur, Mond und Sterne.
     · Die ANZEIGE ist die aufgeschlagene SEITE des Sagenbuchs: Pergament mit gedruckter Doppellinie, unten der Seitenschnitt
       des Buchblocks. Am Rand der Seite schläft der kleine DRACHE in Tinte — er atmet
       („Der Drache schläft. Wer holt den Schatz?"). Das Licht der Lampe liegt warm auf der Seite und wandert leise.
     · Die TASTE ist der EINBAND des Buchs: grünes Leder mit Goldprägung, vorn die Feder als Zeichen. Leer ist das Gold matt,
       mit der Wahl glüht die Prägung smaragden, abgeschickt ist der Einband purpurn und die Feder zieht ihren Schnörkel.
     · Der Buddy spricht von einer SCHRIFTROLLE (Pergament, die Enden gerollt).
   Holz, Leder, Pergament, Stein und Gold sind Material; Licht, Schrift und Zustände kommen aus den Rollen (--acc Smaragd,
   --acc2 Dämmerpurpur). Variablen tragen das Motiv im Namen (--qo-sw-*). Bewegung nur transform und opacity: der Drache
   atmet, das Licht wandert, die Prägung glimmt; bei reduzierter Bewegung steht alles.
   ===================================================================== */
.qo-pult[data-welt="sagenwelt"] {
  --qo-sw-pergament: #f3e6c4;
  --qo-sw-tinte: #2a1f14;
  --qo-sw-holz: #4a2d1a;
  --qo-sw-leder: #163527;
  --qo-sw-gold: #d7b46a;
  --qo-sw-feder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 2.5C14.6 2.8 9.6 6.8 7.4 12.6L5.9 17 4 21.4l1.3.3 1.6-3c5.1-.3 9.1-3.2 11-7.4-1.4.1-2.6-.1-3.6-.7 1.8-.3 3.3-1.1 4.5-2.4-1 0-2-.2-2.8-.7 2.2-1.2 3.8-2.9 5.5-5z'/%3E%3C/svg%3E");
  /* Der schlafende Drache: Tinte, Strich — als Maske, die Farbe ist die Tinte der Seite. */
  --qo-sw-drache: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 51C27 40 37 30 54 29c17-1 30 6 33 17 1 3 0 5-2 5'/%3E%3Cpath d='M41 33l1.5-4.5 2.5 3.5M50 30.5l1.5-5 2.5 4.5M60 29.5l2-5 2 5M70 31l2.5-4.5 1.5 5M78 35l3-3.5 .5 5'/%3E%3Cpath d='M85 51c9 1 19-1 23-6 2-3 0-6-3-5'/%3E%3Cpath d='M105 40l-5-1.5 2.5 4.5z' fill='%23000'/%3E%3Cpath d='M33 46c-5-3-11-4-17-3-5 1-10 3-11 6-1 2 2 3 7 3h20'/%3E%3Cpath d='M12 46.5q2 1.3 4 0'/%3E%3Ccircle cx='6.5' cy='48.5' r='.6' fill='%23000'/%3E%3Cpath d='M19 43c1-4 4-6 9-6.5M22 43.2c2-3 5-4 9-3.5'/%3E%3Cpath d='M54 30C56 20 63 13 75 9c-2 4-1 6 2 7-4 2-5 5-3 8-5-1-10 0-14 5'/%3E%3Cpath d='M75 9L62 27M75 9l-6 16' opacity='.7'/%3E%3Cpath d='M38 51c0-3 3-4 5-2.5M62 51c0-2.5 3-3.5 5-2'/%3E%3Cpath d='M3 54h112' opacity='.35'/%3E%3C/svg%3E");
  /* Das Spitzbogenfenster: die Form (Maske) und das Maßwerk aus Stein darüber. */
  --qo-sw-bogen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V46Q0 12 50 0Q100 12 100 46V100Z'/%3E%3C/svg%3E");
  --qo-sw-masswerk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0 100V46Q0 12 50 0Q100 12 100 46V100' stroke='%2350465a' stroke-width='14'/%3E%3Cpath d='M0 100V46Q0 12 50 0Q100 12 100 46V100' stroke='%23786c80' stroke-width='3'/%3E%3Cpath d='M50 22V100M7 62H93' stroke='%2350465a' stroke-width='4.5'/%3E%3Cpath d='M50 22V100M7 62H93' stroke='%23786c80' stroke-width='1.2'/%3E%3Ccircle cx='50' cy='34' r='9' stroke='%2350465a' stroke-width='4'/%3E%3C/svg%3E");
  --pult-grund:
    radial-gradient(34% 130% at 46% -38%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 34%, transparent 62%, rgba(0, 0, 0, .35) 66%),
    linear-gradient(180deg, transparent 0 70%, color-mix(in srgb, #fff 20%, var(--qo-sw-holz)) 70% 71.2%, var(--qo-sw-holz) 71.2%, color-mix(in srgb, var(--qo-sw-holz) 40%, #000) 100%),
    linear-gradient(180deg, transparent 0 22%, #1a100a 22% 25%, transparent 25% 47%, #1a100a 47% 50%, transparent 50%),
    repeating-linear-gradient(90deg, #1a3027 0 2.2cqmin, #0b0806 2.2cqmin 2.4cqmin, #2c1d35 2.4cqmin 4.2cqmin, #0b0806 4.2cqmin 4.4cqmin, #33200f 4.4cqmin 7cqmin, #0b0806 7cqmin 7.2cqmin, #12302d 7.2cqmin 8.8cqmin, #0b0806 8.8cqmin 9cqmin),
    #0d0907;
  --kante: linear-gradient(180deg, #e2c27a, #9c7838 30%, var(--qo-sw-holz) 46%, color-mix(in srgb, var(--qo-sw-holz) 40%, #000));
  --kante-h: 1cqmin;
  /* Das Fensterbrett: Stein, darüber ein Buch quer als Kissen. */
  --sitz: linear-gradient(180deg, #8a7e8e 0, #5a5060 40%, #3a3240 100%);
  --sitz-naht: #2a2430;
  /* DIE SEITE: Pergament, das grüne Licht von oben, die gedruckte Doppellinie, unten der Schnitt des Buchblocks. */
  --disp-grund:
    linear-gradient(180deg, transparent calc(100% - 1.1cqmin), #c8b07c calc(100% - 1.1cqmin), #efe0b8 calc(100% - .8cqmin), #c2a874 calc(100% - .55cqmin), #ead9ae calc(100% - .3cqmin), #b39864 100%),
    radial-gradient(70% 120% at 34% -20%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%),
    radial-gradient(130% 160% at 50% 40%, transparent 55%, rgba(120, 84, 36, .28) 100%),
    linear-gradient(90deg, rgba(90, 60, 20, .16), transparent 3% 97%, rgba(90, 60, 20, .12)),
    var(--qo-sw-pergament);
  --disp-rahmen: inset 0 0 0 max(1px, .14cqmin) rgba(90, 60, 20, .35), inset 0 .3cqmin .3cqmin rgba(255, 255, 255, .4),
    0 .9cqmin 1.8cqmin rgba(0, 0, 0, .55), 0 0 4cqmin color-mix(in srgb, var(--acc) 14%, transparent);
  --disp-rund: .4cqmin; --disp-glas: none;
  --disp-leer: color-mix(in srgb, var(--qo-sw-tinte) 72%, var(--qo-sw-pergament)); --disp-an: var(--qo-sw-tinte); --disp-fest: #120c06;
  --disp-neben: color-mix(in srgb, var(--qo-sw-tinte) 80%, var(--qo-sw-pergament)); --disp-mittel: #3a2c1c;
  --disp-leucht: none; --disp-leucht-fest: none;
  --disp-trenn: color-mix(in srgb, var(--qo-sw-tinte) 26%, transparent);
  /* Der Rahmen der Taste: das Lesepult aus dunklem Holz, die Kante mit Messing. */
  --taste-rahmen: linear-gradient(180deg, #6b4428, var(--qo-sw-holz) 40%, color-mix(in srgb, var(--qo-sw-holz) 40%, #000));
  --taste-rund: 1.2cqmin;
  --taste-schatten: 0 1cqmin 2.4cqmin rgba(0, 0, 0, .65), inset 0 .25cqmin 0 color-mix(in srgb, var(--qo-sw-gold) 50%, transparent), inset 0 0 0 .14cqmin rgba(0, 0, 0, .6);
  /* Die Tafel der Auflösung steht auf dem Einband: Gold auf grünem Leder. */
  --rang-grund: radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--acc) 14%, var(--qo-sw-leder)), color-mix(in srgb, var(--qo-sw-leder) 70%, #000));
}
/* Auf dem Pergament brauchen Urteil, Marke und Punkte dunkle Töne. */
.qo-pult[data-welt="sagenwelt"] .qo-display { --jetzt: color-mix(in srgb, var(--acc2) 70%, #1a0c1c); --disp-urteil: color-mix(in srgb, var(--u) 46%, #121216); }
.qo-pult[data-welt="sagenwelt"] .qo-z-uwort { text-shadow: none; }
.qo-pult[data-welt="sagenwelt"] .qo-punkte b { color: var(--qo-sw-tinte); }
.qo-pult[data-welt="sagenwelt"] .qo-a-stempel { background: color-mix(in srgb, var(--acc2) 76%, #1a0c1c); color: #fff; }
.qo-pult[data-welt="sagenwelt"] .qo-pt-wort b, .qo-pult[data-welt="sagenwelt"] .qo-pt-satz b { color: color-mix(in srgb, var(--acc2) 76%, #1a0c1c); text-shadow: none; }
.qo-pult[data-welt="sagenwelt"] .qo-pt-platz .qo-sprung.hoch { color: #0b6b4a; }

/* DAS FENSTER statt der Lehne: der Spitzbogen, das Maßwerk aus Stein, draußen die Nacht. */
.qo-pult[data-welt="sagenwelt"] .qo-buddy::before {
  left: 6%; right: 6%; top: -4%; bottom: -.4cqmin; border-radius: 0;
  background:
    var(--qo-sw-masswerk) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 74% 30%, #f3ead2 0 1.2cqmin, transparent 1.35cqmin),
    radial-gradient(circle at 74% 30%, rgba(243, 234, 210, .3) 0, transparent 4.4cqmin),
    radial-gradient(circle at 26% 26%, #fff 0 .16cqmin, transparent .3cqmin),
    radial-gradient(circle at 36% 48%, #fff 0 .12cqmin, transparent .26cqmin),
    radial-gradient(circle at 64% 52%, #fff 0 .1cqmin, transparent .22cqmin),
    radial-gradient(circle at 20% 54%, #fff 0 .1cqmin, transparent .22cqmin),
    linear-gradient(180deg, color-mix(in srgb, var(--acc2) 60%, #0c0614), color-mix(in srgb, var(--acc2) 34%, #07040c) 70%, color-mix(in srgb, var(--acc) 18%, #07040c));
  -webkit-mask: var(--qo-sw-bogen) 0 0 / 100% 100% no-repeat; mask: var(--qo-sw-bogen) 0 0 / 100% 100% no-repeat;
  box-shadow: none;
}

/* DIE SCHRIFTROLLE: Pergament, die Enden gerollt (dunkler Rand mit Glanzlinie), die Schrift in Tinte. */
.qo-pult[data-welt="sagenwelt"] .qo-sagt {
  border-radius: .5cqmin;
  background: linear-gradient(90deg, #a88a54 0, #e9d7a8 1.1cqmin, #b69a62 1.6cqmin, var(--qo-sw-pergament) 2.1cqmin, var(--qo-sw-pergament) calc(100% - 2.1cqmin), #b69a62 calc(100% - 1.6cqmin), #e9d7a8 calc(100% - 1.1cqmin), #a88a54 100%);
  box-shadow: inset 0 .25cqmin .5cqmin rgba(255, 255, 255, .35), inset 0 -.3cqmin .6cqmin rgba(90, 60, 20, .25), 0 .8cqmin 2cqmin rgba(0, 0, 0, .55);
  padding-left: 2.6cqmin; padding-right: 2.6cqmin;
}
.qo-pult[data-welt="sagenwelt"] .qo-sagt::before { background: #a88a54; }
.qo-pult[data-welt="sagenwelt"] .qo-sagt-text { color: var(--qo-sw-tinte); }

/* Die Seite lebt: der Drache am Rand (atmet), das Licht der Lampe wandert leise. */
/* Die gedruckte Doppellinie der Seite (als Umriss: sie schneidet nichts ab). */
.qo-pult[data-welt="sagenwelt"] .qo-d-glas { overflow: hidden; outline: max(2px, .5cqmin) double color-mix(in srgb, var(--qo-sw-tinte) 30%, transparent); outline-offset: calc(-1 * max(5px, 1.2cqmin)); }
.qo-pult[data-welt="sagenwelt"] .qo-d-glas::before {
  content: ""; position: absolute; right: 21.5cqmin; bottom: 1.4cqmin; width: 11cqmin; height: 5.5cqmin;
  background: color-mix(in srgb, var(--qo-sw-tinte) 30%, transparent);
  -webkit-mask: var(--qo-sw-drache) center bottom / contain no-repeat; mask: var(--qo-sw-drache) center bottom / contain no-repeat;
  transform-origin: 50% 100%; animation: qo-sw-atmen 5.2s ease-in-out infinite;
}
/* Er liegt zwischen der Wahl und dem Haken „abgeschickt“ (rechts vor dem Zähler); in der Lobby gibt es keinen Zähler — dort schläft er am rechten Rand. */
.qla-pult[data-welt="sagenwelt"] .qo-d-glas::before { right: 1.8cqmin; }
/* frei: Die Schrift der Anzeige endet vor dem Drachen (right + 11 cqmin — online-pult.css, „Keine Zier kreuzt Schrift“). */
.qo-pult[data-welt="sagenwelt"] { --qo-motiv-frei: 32.5cqmin; }
.qla-pult[data-welt="sagenwelt"] { --qo-motiv-frei: 12.8cqmin; }
/* Auf S reicht der Satz der Lobby bis an den Rand — dort tritt der Drache ab (wie in den anderen Welten). */
@container (max-width: 900px) { .qla-pult[data-welt="sagenwelt"] { --qo-motiv-frei: 0cqmin; } .qla-pult[data-welt="sagenwelt"] .qo-d-glas::before { right: -40cqmin; } }
@keyframes qo-sw-atmen { 0%, 100% { transform: none; } 50% { transform: scale(1.02, 1.07); } }
.qo-pult[data-welt="sagenwelt"] .qo-d-glas::after {
  content: ""; position: absolute; inset: -30% -10%; pointer-events: none;
  background: radial-gradient(28% 46% at 30% 34%, color-mix(in srgb, #fff 42%, transparent), transparent 70%);
  animation: qo-sw-licht 11s ease-in-out infinite alternate;
}
@keyframes qo-sw-licht { from { transform: translateX(-4%); opacity: .7; } to { transform: translateX(16%); opacity: 1; } }

/* DIE TASTE: der Einband. Grünes Leder, doppelte Goldprägung, vorn die Feder. */
.qo-pult[data-welt="sagenwelt"] .qo-los .qo-kappe, .qo-pult[data-welt="sagenwelt"] .qo-los[data-zustand] .qo-kappe {
  border-radius: .5cqmin; color: #f3e2b4;
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, #fff 8%, var(--qo-sw-leder)), color-mix(in srgb, var(--qo-sw-leder) 70%, #000) 90%),
    var(--qo-sw-leder);
  box-shadow: inset 0 0 0 .5cqmin #10281d, inset 0 0 0 .66cqmin color-mix(in srgb, var(--qo-sw-gold) 70%, transparent), inset 0 0 0 .9cqmin #10281d, inset 0 0 0 1cqmin color-mix(in srgb, var(--qo-sw-gold) 45%, transparent),
    inset 0 .3cqmin .4cqmin rgba(255, 255, 255, .12), inset 0 -.4cqmin .8cqmin rgba(0, 0, 0, .45);
}
.qo-pult[data-welt="sagenwelt"] .qo-los .qo-kappe::before {
  content: ""; display: inline-block; vertical-align: middle; flex: none; width: 3cqmin; height: 3cqmin; margin-right: .2cqmin; background: var(--qo-sw-gold);
  -webkit-mask: var(--qo-sw-feder) center / contain no-repeat; mask: var(--qo-sw-feder) center / contain no-repeat;
  transform-origin: 20% 90%; transition: transform 320ms cubic-bezier(.3, 1.4, .5, 1);
}
.qo-pult[data-welt="sagenwelt"] .qo-los[data-zustand="leer"] .qo-kappe { color: #d9c9a2; }
.qo-pult[data-welt="sagenwelt"] .qo-los[data-zustand="leer"] .qo-kappe::before { opacity: .7; transform: rotate(18deg); }
.qo-pult[data-welt="sagenwelt"] .qo-los[data-zustand="gewaehlt"] .qo-kappe {
  color: #fff7df;
  background:
    radial-gradient(90% 120% at 50% 110%, color-mix(in srgb, var(--acc) 40%, transparent), transparent 70%),
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--acc) 22%, var(--qo-sw-leder)), color-mix(in srgb, var(--qo-sw-leder) 70%, #000) 90%);
  box-shadow: inset 0 0 0 .5cqmin #10281d, inset 0 0 0 .66cqmin color-mix(in srgb, var(--acc) 70%, var(--qo-sw-gold)), inset 0 0 0 .9cqmin #10281d, inset 0 0 0 1cqmin color-mix(in srgb, var(--acc) 50%, var(--qo-sw-gold)),
    0 0 2.2cqmin color-mix(in srgb, var(--acc) 26%, transparent), inset 0 0 2.4cqmin color-mix(in srgb, var(--acc) 22%, transparent);
}
.qo-pult[data-welt="sagenwelt"] .qo-los[data-zustand="gewaehlt"] .qo-kappe::before { background: var(--acc); transform: rotate(-6deg); filter: drop-shadow(0 0 .6cqmin var(--acc)); }
.qo-pult[data-welt="sagenwelt"] .qo-los[data-zustand="gesendet"] .qo-kappe {
  color: #fbeefa;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--acc2) 62%, #2a1430), color-mix(in srgb, var(--acc2) 34%, #0c0610) 90%);
  box-shadow: inset 0 0 0 .5cqmin color-mix(in srgb, var(--acc2) 30%, #0c0610), inset 0 0 0 .66cqmin color-mix(in srgb, var(--qo-sw-gold) 80%, transparent), inset 0 0 0 .9cqmin color-mix(in srgb, var(--acc2) 30%, #0c0610), inset 0 0 0 1cqmin color-mix(in srgb, var(--qo-sw-gold) 45%, transparent),
    inset 0 .5cqmin .9cqmin rgba(0, 0, 0, .35);
}
.qo-pult[data-welt="sagenwelt"] .qo-los[data-zustand="gesendet"] .qo-kappe::before { display: none; }
/* Abgeschickt zieht die Feder unter dem Wort einen Schnörkel in Gold (eingetragen). (Am ::after der Taste: das ::after ist sonst die
   erweiterte Trefferfläche — nach dem Abschicken gibt es nichts mehr zu treffen.) */
.qo-pult[data-welt="sagenwelt"] .qo-los[data-zustand="gesendet"]::after {
  content: ""; position: absolute; z-index: 4; inset: auto 22% 2.1cqmin 22%; height: 1.4cqmin; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C20 2 34 11 50 6S82 2 98 7' fill='none' stroke='%23d7b46a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: 0 50%; animation: qo-sw-schnoerkel 700ms cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes qo-sw-schnoerkel { from { opacity: 0; transform: scaleX(0); } 20% { opacity: 1; } to { opacity: 1; transform: scaleX(1); } }
.qo-pult[data-welt="sagenwelt"] .qo-rang .qo-los.qo-rang-alt::after { display: none; }

/* Platz und Punkte auf dem Einband: Gold auf grünem Leder. */
.qo-pult[data-welt="sagenwelt"] .qo-rang-in { border-radius: .5cqmin; --t0: #f3e2b4; --t1: #e2cf9c; --t2: #c9b483;
  box-shadow: inset 0 0 0 .5cqmin #10281d, inset 0 0 0 .66cqmin color-mix(in srgb, var(--qo-sw-gold) 60%, transparent), inset 0 .4cqmin 1cqmin rgba(0, 0, 0, .4); }
.qo-pult[data-welt="sagenwelt"] .qo-rang-s { border-left-color: color-mix(in srgb, var(--qo-sw-gold) 34%, transparent); }

/* „Jubeln" am Zwischenstand steht im Rahmen der Taste: auch er ein Einband (Purpur mit Goldlinie) — auf dem hellen Purpur der Rolle
   stand die helle Schrift unter 4,5 : 1. (Die Tasten des Abendendes behalten den Grund der Rolle, Fund 16.) */
.qo-pult[data-welt="sagenwelt"] .qo-pt-taste:not(.qo-pe-feld) .sp-jubel { color: #fbeefa;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--acc2) 62%, #2a1430), color-mix(in srgb, var(--acc2) 34%, #0c0610) 90%);
  box-shadow: inset 0 0 0 .5cqmin color-mix(in srgb, var(--acc2) 30%, #0c0610), inset 0 0 0 .66cqmin color-mix(in srgb, var(--qo-sw-gold) 80%, transparent), 0 0 2.4cqmin color-mix(in srgb, var(--acc2) 30%, transparent); }
.qo-pult[data-welt="sagenwelt"] .qo-pt-taste:not(.qo-pe-feld) .sp-jubel.gejubelt { background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--acc2) 74%, #2a1430), color-mix(in srgb, var(--acc2) 44%, #0c0610) 90%); }
.qo-pult[data-welt="sagenwelt"] .qo-pt-taste:not(.qo-pe-feld) .sp-jubel-t em { color: #e8d4ec; }

@media (prefers-reduced-motion: reduce) {
  .qo-pult[data-welt="sagenwelt"] .qo-d-glas::before, .qo-pult[data-welt="sagenwelt"] .qo-d-glas::after { animation: none; }
  .qo-pult[data-welt="sagenwelt"] .qo-los .qo-kappe::before { transition: none; }
  .qo-pult[data-welt="sagenwelt"] .qo-los[data-zustand="gesendet"]::after { animation: none; }
}