/* =====================================================================
   KÜCHE · der eigene Posten am Herd (data-welt="kueche" — online.js liest sie an der Uhr „wecker" ab)
   Tobi, 02.11.2026: „Die Online-Pult-Leiste von Weltreise sieht wirklich gut aus, die von Sagenwelt, Erfinder, Weltall etc.
   aber echt langweilig und eigentlich fast immer gleich … auf das Niveau von Weltreise angleichen, alle Pulte.“
   Bis dahin: die Wahl auf einem hellen Bon, daneben eine helle Glocke — flach und blass. Jetzt steht man an seinem Posten in der
   Küche bei Nacht (Küche IDEE.md §2.7; Tobis Beispiel „Herd mit Display/Ofenuhr“):
     · Hinten die Metro-Fliesen, links oben die Wärmelampe, unten die Stahltheke; oben die Bonschiene aus Stahl.
     · Der Buddy steht in der DURCHREICHE: ein Rahmen aus Stahl, von oben fällt das warme Licht der Wärmelampe auf ihn; vorn
       die Theke aus Stahl.
     · Die ANZEIGE ist die OFENTÜR: dunkles Rauchglas im Stahlrahmen, oben und unten glühen die Heizstäbe — das lebende Motiv:
       Sie atmen ruhig (der Thermostat), mit der Wahl heizt der Ofen auf, beim Abschicken glühen sie einmal hell auf. Die Wahl
       steht warm und hell darin wie die Anzeige der Ofenuhr.
     · Die TASTE ist die SERVICEGLOCKE auf dem Pass: ein schwarzer Sockel, darauf die Glocke. Leer ist sie dunkler Stahl, mit
       der Wahl glänzt das Messing, beim Abschicken geht der Drücker herunter und es macht einmal „Ding!“ (die Bestellung geht
       raus). Auf der Taste das Zeichen der Welt, die Glocke.
     · Der Buddy spricht vom Bestellzettel: Papier mit Tomatenkante, oben die Klammer der Bonschiene.
     · Platz und Punkte stehen auf einem Bon (Thermopapier mit Zackenkante) im Halter aus Stahl.
   Fliesen, Stahl, Messing, Glas und Papier sind Material; Licht, Schrift und Zustände kommen aus den Rollen des Sets (acc Tomate,
   acc2 Basilikum). Variablen tragen das Motiv im Namen (--qo-ku-*). Bewegung nur transform und opacity: die Heizstäbe, der
   Drücker und das „Ding!“; bei reduzierter Bewegung steht alles still.
   ===================================================================== */
.qo-pult[data-welt="kueche"] {
  --qo-ku-papier: #faf6ee;
  --qo-ku-druck: #24201b;
  --qo-ku-stahl: #8d9199;
  --qo-ku-messing: #d4a64f;
  --qo-ku-glut: #ff7a36;
  --qo-ku-stahlrahmen: linear-gradient(180deg, #d9dce1, #9ba0a8 30%, #5d626b 72%, #3b3f46);
  --qo-ku-fliese: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Crect width='40' height='20' fill='%23130d0b'/%3E%3Cg fill='%23362a25'%3E%3Crect x='.6' y='.6' width='18.8' height='8.8' rx='1.1'/%3E%3Crect x='20.6' y='.6' width='18.8' height='8.8' rx='1.1'/%3E%3Crect x='-9.4' y='10.6' width='18.8' height='8.8' rx='1.1'/%3E%3Crect x='10.6' y='10.6' width='18.8' height='8.8' rx='1.1'/%3E%3Crect x='30.6' y='10.6' width='18.8' height='8.8' rx='1.1'/%3E%3C/g%3E%3Cg fill='%23544238'%3E%3Crect x='1.6' y='1.4' width='16.8' height='1.4' rx='.7'/%3E%3Crect x='21.6' y='1.4' width='16.8' height='1.4' rx='.7'/%3E%3Crect x='-8.4' y='11.4' width='16.8' height='1.4' rx='.7'/%3E%3Crect x='11.6' y='11.4' width='16.8' height='1.4' rx='.7'/%3E%3Crect x='31.6' y='11.4' width='16.8' height='1.4' rx='.7'/%3E%3C/g%3E%3C/svg%3E");
  --pult-grund: radial-gradient(42% 150% at 6% -24%, color-mix(in srgb, #ffbe6a 40%, transparent), transparent 70%),
    linear-gradient(180deg, transparent 0 68%, color-mix(in srgb, #fff 50%, var(--qo-ku-stahl)) 68% 69.2%, color-mix(in srgb, var(--qo-ku-stahl) 52%, #000) 69.2%, color-mix(in srgb, var(--qo-ku-stahl) 26%, #000) 100%),
    var(--qo-ku-fliese) 0 0 / 9.6cqmin 4.8cqmin repeat,
    #130d0b;
  /* Die Bonschiene: eine Stahlstange mit Glanz. */
  --kante: linear-gradient(180deg, color-mix(in srgb, #fff 78%, var(--qo-ku-stahl)), var(--qo-ku-stahl) 40%, color-mix(in srgb, var(--qo-ku-stahl) 34%, #000) 76%, #1a1b1f);
  --kante-h: 1cqmin;
  /* Die Theke vorn: gebürsteter Stahl. */
  --sitz: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 .1cqmin, transparent .1cqmin .5cqmin), linear-gradient(180deg, #c9cdd3, #8d9199 40%, #4d5158);
  --sitz-naht: #2a2c31;
  /* Die Ofentür: Rauchglas, darin der warme Schein des Ofens. */
  --disp-grund: radial-gradient(70% 90% at 50% 50%, color-mix(in srgb, var(--qo-ku-glut) 12%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 24%),
    linear-gradient(180deg, #1c120d, #0b0705 60%, #120b07);
  --disp-rahmen: inset 0 0 0 .26cqmin #050302, inset 0 .9cqmin 1.6cqmin rgba(0, 0, 0, .55),
    0 0 0 .32cqmin #2b2d32, 0 0 0 .62cqmin #a4a9b1, 0 0 0 .76cqmin #4a4e55, 0 1cqmin 2.2cqmin rgba(0, 0, 0, .65);
  --disp-rund: .9cqmin;
  --disp-glas: linear-gradient(104deg, transparent 0 8%, rgba(255, 255, 255, .06) 10% 16%, transparent 18% 70%, rgba(255, 255, 255, .03) 72% 74%, transparent 76%);
  --disp-leer: color-mix(in srgb, #ffd9b8 48%, #6e5446); --disp-an: color-mix(in srgb, var(--acc) 62%, #ffe0b0); --disp-fest: #fff3e6;
  --disp-neben: color-mix(in srgb, #ffd9b8 62%, var(--t1)); --disp-mittel: color-mix(in srgb, var(--acc) 30%, #fff3e6);
  --disp-leucht: 0 0 1.2cqmin color-mix(in srgb, var(--qo-ku-glut) 60%, transparent); --disp-leucht-fest: 0 0 .8cqmin color-mix(in srgb, var(--qo-ku-glut) 30%, transparent);
  --disp-trenn: color-mix(in srgb, #ffd9b8 22%, transparent);
  /* Die Serviceglocke: der schwarze Sockel, auf dem sie steht. */
  --taste-rahmen: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .14), transparent 70%), linear-gradient(180deg, #34343b, #18181c 55%, #0d0d10);
  --taste-rund: 3.4cqmin;
  --taste-schatten: 0 1cqmin 2.4cqmin rgba(0, 0, 0, .65), inset 0 .22cqmin 0 rgba(255, 255, 255, .16), inset 0 0 0 .14cqmin rgba(0, 0, 0, .6);
  --rang-grund: linear-gradient(180deg, var(--qo-ku-papier), color-mix(in srgb, var(--qo-ku-papier) 90%, #c9bba1));
}
.qo-pult[data-welt="kueche"] .qo-display { --jetzt: var(--disp-an); }

/* DIE DURCHREICHE: Stahlrahmen, von oben das Licht der Wärmelampe (statt der Lehne). */
.qo-pult[data-welt="kueche"] .qo-buddy::before {
  left: 0; right: 0; top: -6%; bottom: -1.4cqmin; border-radius: .7cqmin .7cqmin .2cqmin .2cqmin;
  background: radial-gradient(70% 22% at 50% 0%, #fff4dc 0, color-mix(in srgb, #ffb05a 80%, transparent) 30%, transparent 100%),
    radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, #ff9a3c 40%, transparent), transparent 70%),
    var(--qo-ku-fliese) 0 0 / 7.2cqmin 3.6cqmin repeat, #120b09;
  box-shadow: inset 0 0 0 .5cqmin #a4a9b1, inset 0 0 0 .66cqmin #4a4e55, inset 0 1.2cqmin 1.4cqmin rgba(0, 0, 0, .35), 0 .6cqmin 1.6cqmin rgba(0, 0, 0, .55);
}
.qo-pult[data-welt="kueche"] .qo-buddy::after { border-radius: .3cqmin .3cqmin 0 0; }

/* Der Bestellzettel: Papier mit Tomatenkante, oben die Klammer der Bonschiene. */
.qo-pult[data-welt="kueche"] .qo-sagt { border-radius: .3cqmin; background: linear-gradient(180deg, var(--qo-ku-papier), color-mix(in srgb, var(--qo-ku-papier) 92%, #c9bba1));
  box-shadow: inset 0 .45cqmin 0 var(--acc), 0 .8cqmin 2cqmin rgba(0, 0, 0, .55); }
.qo-pult[data-welt="kueche"] .qo-sagt::before { background: var(--qo-ku-papier); }
.qo-pult[data-welt="kueche"] .qo-sagt::after {
  content: ""; position: absolute; left: 50%; top: -1.1cqmin; width: 4.4cqmin; height: 1.6cqmin; margin-left: -2.2cqmin; border-radius: .3cqmin; pointer-events: none;
  background: linear-gradient(180deg, #e4e7eb, #8d9199 55%, #5a5e66); box-shadow: 0 .2cqmin .4cqmin rgba(0, 0, 0, .5), inset 0 -.2cqmin 0 rgba(0, 0, 0, .3);
}
.qo-pult[data-welt="kueche"] .qo-sagt-text { color: var(--qo-ku-druck); }

/* DAS LEBENDE MOTIV: die Heizstäbe oben und unten in der Ofentür (hinter der Schrift — z-index −1). */
.qo-pult[data-welt="kueche"] .qo-d-glas::before, .qo-pult[data-welt="kueche"] .qo-d-glas::after {
  content: ""; position: absolute; z-index: -1; left: 5%; right: 5%; height: .5cqmin; border-radius: 99px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #ffd08a 0 .55cqmin, var(--qo-ku-glut) .55cqmin 1.1cqmin);
  box-shadow: 0 0 .8cqmin color-mix(in srgb, var(--qo-ku-glut) 90%, transparent), 0 0 2.4cqmin color-mix(in srgb, var(--acc) 50%, transparent);
  opacity: .55; animation: qo-ku-heizen 3.6s ease-in-out infinite;
}
.qo-pult[data-welt="kueche"] .qo-d-glas::before { top: 1.1cqmin; }
.qo-pult[data-welt="kueche"] .qo-d-glas::after { bottom: 1.1cqmin; animation-delay: -1.8s; }
@keyframes qo-ku-heizen { 0%, 100% { opacity: .4; } 50% { opacity: .78; } }
/* Mit der Wahl heizt der Ofen auf … */
.qo-pult[data-welt="kueche"] .qo-display:has(.qo-anzeige[data-zustand="gewaehlt"]) .qo-d-glas::before,
.qo-pult[data-welt="kueche"] .qo-display:has(.qo-anzeige[data-zustand="gewaehlt"]) .qo-d-glas::after { animation-name: qo-ku-heiss; animation-duration: 2.2s; }
@keyframes qo-ku-heiss { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
/* … beim Abschicken glühen die Stäbe einmal hell auf. */
.qo-pult[data-welt="kueche"] .qo-display:has(.qo-anzeige[data-zustand="gesendet"]) .qo-d-glas::before,
.qo-pult[data-welt="kueche"] .qo-display:has(.qo-anzeige[data-zustand="gesendet"]) .qo-d-glas::after { animation: qo-ku-auf 900ms ease-out both; }
@keyframes qo-ku-auf { 0% { opacity: .7; transform: none; } 30% { opacity: 1; transform: scaleY(1.9); } 100% { opacity: .62; transform: none; } }
.qo-pult[data-welt="kueche"] .qo-a-stempel { background: var(--acc); color: var(--auf-acc); }

/* DIE GLOCKE: Die Kappe ist die Glocke — leer dunkler Stahl, mit der Wahl glänzt das Messing, abgeschickt ist sie gedrückt.
   Auf Messing steht die Schrift dunkel (über 7 : 1). */
.qo-pult[data-welt="kueche"] .qo-los { padding: 2.3cqmin 1.2cqmin 1.1cqmin; }
.qo-pult[data-welt="kueche"] .qo-los .qo-kappe, .qo-pult[data-welt="kueche"] .qo-los[data-zustand] .qo-kappe {
  border-radius: 3.6cqmin 3.6cqmin 1.2cqmin 1.2cqmin; color: #2a1c08;
  background: radial-gradient(80% 120% at 34% 14%, #fff6dc 0, color-mix(in srgb, #fff 40%, var(--qo-ku-messing)) 14%, var(--qo-ku-messing) 46%, color-mix(in srgb, var(--qo-ku-messing) 72%, #3a2508) 100%);
  box-shadow: inset 0 -.5cqmin .9cqmin color-mix(in srgb, #3a2508 45%, transparent), inset 0 0 0 .2cqmin color-mix(in srgb, #3a2508 55%, transparent);
}
.qo-pult[data-welt="kueche"] .qo-los[data-zustand="leer"] .qo-kappe {
  color: #d6d9de;
  background: radial-gradient(80% 120% at 34% 14%, #5b6068 0, #42464e 40%, #222529 100%);
  box-shadow: inset 0 -.5cqmin .9cqmin rgba(0, 0, 0, .45), inset 0 0 0 .2cqmin rgba(0, 0, 0, .55), inset 0 .25cqmin 0 rgba(255, 255, 255, .14);
}
.qo-pult[data-welt="kueche"] .qo-los[data-zustand="gewaehlt"] .qo-kappe {
  box-shadow: inset 0 -.5cqmin .9cqmin color-mix(in srgb, #3a2508 45%, transparent), inset 0 0 0 .2cqmin color-mix(in srgb, #3a2508 55%, transparent),
    0 0 3cqmin color-mix(in srgb, var(--qo-ku-messing) 60%, transparent);
}
.qo-pult[data-welt="kueche"] .qo-los[data-zustand="gesendet"] .qo-kappe {
  background: radial-gradient(80% 120% at 34% 14%, color-mix(in srgb, #fff 30%, var(--qo-ku-messing)) 0, color-mix(in srgb, var(--qo-ku-messing) 88%, #3a2508) 46%, color-mix(in srgb, var(--qo-ku-messing) 66%, #3a2508) 100%);
  box-shadow: inset 0 .7cqmin 1.2cqmin color-mix(in srgb, #3a2508 50%, transparent), inset 0 0 0 .2cqmin color-mix(in srgb, #3a2508 55%, transparent);
}
/* Das Zeichen der Welt: die Glocke vor dem Wort (abgeschickt steht dort der Haken). */
.qo-pult[data-welt="kueche"] .qo-los .qo-kappe::before {
  content: ""; display: inline-block; flex: none; width: 2.8cqmin; height: 2.4cqmin; margin-right: .1cqmin; background: currentColor; opacity: .9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Ccircle cx='14' cy='5' r='2.2'/%3E%3Cpath d='M14 7.4c-6 0-10 4.4-10 10.2h20c0-5.8-4-10.2-10-10.2z'/%3E%3Crect x='1.5' y='18.8' width='25' height='3' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Ccircle cx='14' cy='5' r='2.2'/%3E%3Cpath d='M14 7.4c-6 0-10 4.4-10 10.2h20c0-5.8-4-10.2-10-10.2z'/%3E%3Crect x='1.5' y='18.8' width='25' height='3' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.qo-pult[data-welt="kueche"] .qo-los[data-zustand="gesendet"] .qo-kappe::before, .qo-pult[data-welt="kueche"] .qo-los[data-zaehlt] .qo-kappe::before { display: none; }
/* Der Drücker oben auf der Glocke: Er steht, solange man noch wählt, und geht beim Abschicken herunter. (FALLE online-pult.css:
   left/right ausdrücklich setzen.) Die Tafel der Auflösung ist ein Bon, keine Glocke — dort steht kein Drücker. */
.qo-pult[data-welt="kueche"] .qo-los::before {
  content: ""; display: block; position: absolute; z-index: 3; left: 50%; right: auto; top: .3cqmin; bottom: auto; width: 2.6cqmin; height: 1.8cqmin; margin-left: -1.3cqmin;
  border-radius: 1.3cqmin 1.3cqmin .3cqmin .3cqmin; pointer-events: none;
  background: radial-gradient(70% 90% at 36% 26%, color-mix(in srgb, #fff 60%, var(--qo-ku-messing)), var(--qo-ku-messing) 50%, color-mix(in srgb, var(--qo-ku-messing) 55%, #2a1806));
  box-shadow: 0 .2cqmin .4cqmin rgba(0, 0, 0, .55), inset 0 0 0 .1cqmin color-mix(in srgb, #3a2508 50%, transparent);
  transition: transform 120ms cubic-bezier(.6, 0, .9, .4);
}
.qo-pult[data-welt="kueche"] .qo-los[data-zustand="leer"]::before { filter: grayscale(.8) brightness(.7); }
.qo-pult[data-welt="kueche"] .qo-los[data-zustand="gesendet"]::before { transform: translateY(.7cqmin) scaleY(.6); }
/* „Ding!" springt beim Abschicken einmal über der Glocke auf und vergeht (am ::after der Taste: die Kappe schneidet ab;
   das ::after ist sonst die erweiterte Trefferfläche — nach dem Abschicken gibt es nichts mehr zu treffen). */
.qo-pult[data-welt="kueche"] .qo-los[data-zustand="gesendet"]::after {
  content: "Ding!"; position: absolute; z-index: 4; inset: auto; right: -.6cqmin; top: -.8cqmin; pointer-events: none; opacity: 0;
  font-family: var(--f-display); font-weight: 900; font-size: max(13px, 3.2cqmin); letter-spacing: .01em;
  color: var(--qo-ku-messing); -webkit-text-stroke: .08em #1a1006; paint-order: stroke fill;
  transform: translateY(-50%) rotate(8deg); animation: qo-ku-ding 1.3s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes qo-ku-ding {
  0% { opacity: 0; transform: translateY(-50%) rotate(8deg) scale(.3); }
  16% { opacity: 1; transform: translateY(-50%) rotate(8deg) scale(1.2); }
  70% { opacity: 1; transform: translateY(-50%) rotate(8deg) scale(1); }
  100% { opacity: 0; transform: translateY(-64%) rotate(8deg) scale(1.05); }
}
/* Das Tastenfeld des Abendendes ist keine Glocke: kein Drücker darüber. */
.qo-pult[data-welt="kueche"] .qo-pe-feld { padding: 1.1cqmin 1.2cqmin; }
.qo-pult[data-welt="kueche"] .qo-pe-feld::before { display: none; }
/* Platz und Punkte auf dem Bon im Halter aus Stahl: dunkler Druck auf Thermopapier, unten die Zackenkante. */
.qo-pult[data-welt="kueche"] .qo-rang, .qo-leiste.qo-pult[data-welt="kueche"] .qo-rang { background: var(--qo-ku-stahlrahmen); padding: 1.1cqmin 1.2cqmin; border-radius: 1cqmin; }
.qo-pult[data-welt="kueche"] .qo-rang-in { border-radius: .3cqmin; --t0: #1d1a15; --t1: #3a352c; --t2: #5c5443;
  box-shadow: inset 0 .45cqmin 0 var(--acc), 0 .2cqmin .5cqmin rgba(0, 0, 0, .45);
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - .6cqmin) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) 0 100% / 1.2cqmin .6cqmin repeat-x;
          mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - .6cqmin) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, transparent 0) 0 100% / 1.2cqmin .6cqmin repeat-x; }
.qo-pult[data-welt="kueche"] .qo-rang .qo-sprung.hoch { color: #2f6b12; }
.qo-pult[data-welt="kueche"] .qo-rang-s { border-left-color: rgba(60, 45, 20, .3); }
.qo-pult[data-welt="kueche"] .qo-rang .qo-los.qo-rang-alt { inset: 1.1cqmin 1.2cqmin; }
.qo-pult[data-welt="kueche"] .qo-rang .qo-los.qo-rang-alt::before { display: none; }
.qla-pult[data-welt="kueche"] .qla-pult-anders { background: var(--qo-ku-stahlrahmen); border-radius: 1cqmin; }
.qla-pult[data-welt="kueche"] .qla-anders-kappe { border-radius: .4cqmin; }
@media (prefers-reduced-motion: reduce) {
  .qo-pult[data-welt="kueche"] .qo-d-glas::before, .qo-pult[data-welt="kueche"] .qo-d-glas::after,
  .qo-pult[data-welt="kueche"] .qo-display .qo-d-glas::before, .qo-pult[data-welt="kueche"] .qo-display .qo-d-glas::after { animation: none !important; opacity: .7; }
  .qo-pult[data-welt="kueche"] .qo-los::before { transition: none; }
  .qo-pult[data-welt="kueche"] .qo-los[data-zustand="gesendet"]::after { animation: none; opacity: 0; }
}