/* ==============================================================   FUSSBALL · der Rand der Albumseite (data-welt="fussball" — online.js liest sie an der Uhr „nachspielzeit" ab)
   Tobi, 06.11.2026: „… ein hochwertiges Onlinepult bauen, was auf dem Niveau von den anderen ist." Seit die Lobby ein Sammelalbum ist
   (lobby/auftritt/gestalt-sammelalbum.js), ist das Pult der untere Rand derselben Seite — der eigene Platz im Album:
     · Der Grund ist das ALBUMPAPIER (Druckraster, unten die Blattkante), oben die Kante als Band in Druckblau mit Rasenstreifen —
       wie das Albumbanner über dem Titel.
     · Der Buddy steht in SEINEM SAMMELBILD: weißer Rand, dahinter das Stadion zur Blauen Stunde (dasselbe Foto wie in den Bildern
       der Lobby), leicht schief eingeklebt.
     · Er spricht von einem ZETTEL, der mit einem Streifen Klebefilm auf der Seite hängt.
     · Die ANZEIGE ist die KAPITELKARTE: bedrucktes Kartenpapier mit einem Reiter in Druckblau und Rasenkante, zwei Fotoecken halten
       sie; die Wahl steht groß in Druckblau darauf.
     · Die TASTE ist das EINKLEBEFELD: leer ein gedruckter Umriss (gestrichelt, wie der freie Platz in der Lobby), mit der Wahl liegt
       dort ein Sammelbild in Druckblau bereit (es wippt), abgeschickt ist es EINGEKLEBT — Rasengrün, gerade, mit Haken.
     · Platz und Punkte stehen auf der RÜCKSEITE EINES SAMMELBILDS: weißes Kartenpapier, Druckblau, oben die Rasenkante.
   Papier, Druck, Klebefilm und Fotoecken sind Material; Schrift und Zustände kommen aus den Rollen (--acc Rasengrün, --acc2 das
   Druckblau). LESBAR: Jede Beschriftung steht dunkel auf hellem Papier — Druckblau über 11 : 1, die kleinen Wörter (Platz, Punkte,
   „eingeloggt", „noch nicht abgeschickt") in Druckgrau über 6 : 1. Kein Licht, kein Glanz, kein Schein. Variablen tragen das Motiv
   im Namen (--qo-al-*). Bewegung nur transform und opacity (das Wippen des bereitliegenden Bilds, das Andrücken beim Einkleben);
   bei reduzierter Bewegung steht alles.
   ===================================================================== */
.qo-pult[data-welt="fussball"] {
  --qo-al-papier: #f4f0e4;
  --qo-al-karte: #fbf9f2;
  --qo-al-rand: #fbfaf4;
  --qo-al-druck: color-mix(in srgb, var(--acc2) 72%, #050a18);
  --qo-al-grau: color-mix(in srgb, var(--acc2) 54%, #161b24);
  --qo-al-tinte: color-mix(in srgb, var(--acc2) 42%, #03060f);   /* die kleinen Wörter: fast schwarzes Druckblau */
  --qo-al-gruen: color-mix(in srgb, var(--acc) 52%, #021c08);
  --qo-al-schatten: color-mix(in srgb, #2a1d08 34%, transparent);
  --pult-grund:
    linear-gradient(180deg, color-mix(in srgb, #3a2c10 22%, transparent) 0, transparent 1.6cqmin),
    linear-gradient(0deg, color-mix(in srgb, #6d5f40 26%, transparent) 0, transparent 1.4cqmin),
    radial-gradient(circle, color-mix(in srgb, #8a7a55 16%, transparent) 0 30%, transparent 34%) 0 0 / .5cqmin .5cqmin,
    linear-gradient(180deg, #f6f2e7, #ebe4d2);
  --kante: linear-gradient(180deg, var(--qo-al-druck) 0 58%, var(--acc) 58% 76%, var(--qo-al-rand) 76% 86%, var(--acc) 86%);
  --kante-h: 1.2cqmin;
  --sitz: none; --sitz-naht: transparent;
  /* Die Anzeige: die Kapitelkarte. */
  --disp-grund:
    linear-gradient(180deg, var(--qo-al-druck) 0 .6cqmin, var(--acc) .6cqmin .9cqmin, transparent .9cqmin),
    radial-gradient(circle, color-mix(in srgb, var(--qo-al-druck) 7%, transparent) 0 30%, transparent 34%) 0 0 / .6cqmin .6cqmin,
    var(--qo-al-karte);
  --disp-rahmen: inset 0 0 0 max(1px, .14cqmin) color-mix(in srgb, var(--qo-al-druck) 26%, transparent), .3cqmin .5cqmin 0 var(--qo-al-schatten);
  --disp-rund: .5cqmin; --disp-glas: none;
  --disp-leer: var(--qo-al-grau); --disp-an: var(--qo-al-druck); --disp-fest: var(--qo-al-druck);
  --disp-neben: var(--qo-al-grau); --disp-mittel: var(--qo-al-grau);
  --disp-leucht: none; --disp-leucht-fest: none;
  --disp-trenn: color-mix(in srgb, var(--qo-al-druck) 24%, transparent);
  /* Das Einklebefeld: eine gedruckte, leicht vertiefte Fläche auf der Seite. */
  --taste-rahmen: linear-gradient(180deg, #e7e0cc, #efe9d8);
  --taste-rund: .7cqmin;
  --taste-schatten: inset 0 0 0 max(1px, .14cqmin) color-mix(in srgb, var(--qo-al-druck) 22%, transparent), inset .2cqmin .3cqmin .5cqmin color-mix(in srgb, #3a2c10 22%, transparent);
  --rang-grund: var(--qo-al-karte);
}
/* Kein Glanz läuft über Papier. */
.qo-pult[data-welt="fussball"] .k-glanz { display: none; }
/* Urteil und Zeichen auf hellem Papier: die dunkle Fassung ihrer Farbe (über 4,5 : 1). */
.qo-pult[data-welt="fussball"] .qo-display { --disp-urteil: color-mix(in srgb, var(--u) 56%, #06101c); }
.qo-pult[data-welt="fussball"] .qo-z-uwort { text-shadow: none; }
/* Das Siegel des Urteils: ein runder Aufkleber mit weißem Rand und knappem Schatten — kein Lichthof. */
.qo-pult[data-welt="fussball"] .qo-d-siegel { box-shadow: inset 0 0 0 .35cqmin var(--qo-al-rand), .2cqmin .35cqmin 0 var(--qo-al-schatten); }
.qo-pult[data-welt="fussball"] .qo-a-stempel { background: var(--acc); color: #03200a; box-shadow: inset 0 0 0 .2cqmin var(--qo-al-rand), .15cqmin .25cqmin 0 var(--qo-al-schatten); }
.qo-pult[data-welt="fussball"] :is(.qo-pt-wort, .qo-pt-satz) b { color: var(--qo-al-gruen); text-shadow: none; }
.qo-pult[data-welt="fussball"] :is(.qo-pt-wort, .qo-pt-satz) { color: var(--qo-al-druck); text-shadow: none; }
/* DIE KLEINEN WÖRTER (Runde · Fragen, Platz, Punkte, „eingeloggt"): Druckblau in voller Stärke und etwas größer — auf 968 × 610 sind sie
   sonst nur 9 px hoch, und die Kantenglättung zieht dünne Schrift unter 4,5 : 1 (lesbar-pruefen.mjs maß 3,1–3,7). */
.qo-pult[data-welt="fussball"] .qo-pt-wort { font-size: max(9px, calc(2.45cqmin * var(--schrift, 1))); font-weight: 900; letter-spacing: .07em; color: var(--qo-al-tinte); }
.qo-pult[data-welt="fussball"] .qo-z-d em, .qo-pult[data-welt="fussball"] .qo-punkte small, .qo-pult[data-welt="fussball"] .qo-d-auto { color: var(--qo-al-tinte); font-weight: 900; }
.qo-pult[data-welt="fussball"] .qo-z-d em { font-size: calc(var(--qo-etikett) * 1.4); letter-spacing: .08em; }
/* Die Fotoecken halten die Kapitelkarte (oben links, unten rechts) — an den Ecken, nie über der Schrift. */
.qo-pult[data-welt="fussball"] .qo-d-glas::before, .qo-pult[data-welt="fussball"] .qo-d-glas::after {
  content: ""; position: absolute; width: 2.6cqmin; height: 2.6cqmin; pointer-events: none;
  background: linear-gradient(135deg, #1d1d20 0 47%, color-mix(in srgb, #000 20%, transparent) 50%, transparent 54%);
}
.qo-pult[data-welt="fussball"] .qo-d-glas::before { left: 0; top: 0; }
.qo-pult[data-welt="fussball"] .qo-d-glas::after { right: 0; bottom: 0; transform: rotate(180deg); }

/* DER BUDDY IN SEINEM SAMMELBILD: weißer Rand, das Stadion dahinter, leicht schief; er steht davor auf der Unterkante. Das Foto ist
   dasselbe wie in den Bildern der Lobby — online.js (kulisseStil) legt es aus den Paketdaten als --kulisse-lobby an den Buddy. */
.qo-pult[data-welt="fussball"] .qo-buddy::before {
  left: 13%; right: 13%; top: 14%; bottom: -.6cqmin; border-radius: .5cqmin;
  background: var(--kulisse-lobby, none) 46% 32% / auto 175% no-repeat, color-mix(in srgb, var(--acc2) 70%, #0b1430);
  border: .75cqmin solid var(--qo-al-rand);
  box-shadow: inset 0 -.8cqmin 0 var(--acc), .3cqmin .5cqmin 0 var(--qo-al-schatten);
  transform: rotate(-2.2deg); transform-origin: 50% 100%;
}

/* DER ZETTEL: weißes Papier, oben ein Streifen Klebefilm; die Schrift in Druckblau (über 11 : 1). */
.qo-pult[data-welt="fussball"] .qo-sagt { border-radius: .3cqmin; background: var(--qo-al-rand);
  box-shadow: inset 0 0 0 max(1px, .14cqmin) color-mix(in srgb, var(--qo-al-druck) 16%, transparent), .3cqmin .5cqmin 0 var(--qo-al-schatten); transform: rotate(-.8deg); }
.qo-pult[data-welt="fussball"] .qo-sagt::before { background: var(--qo-al-rand); }
.qo-pult[data-welt="fussball"] .qo-sagt::after {
  content: ""; position: absolute; left: 50%; top: -.9cqmin; width: 6.4cqmin; height: 2cqmin; margin-left: -3.2cqmin; pointer-events: none; transform: rotate(3deg);
  background: linear-gradient(180deg, color-mix(in srgb, #fff 62%, transparent), color-mix(in srgb, #e8e2cf 56%, transparent));
  box-shadow: inset 0 0 0 max(1px, .1cqmin) color-mix(in srgb, #8a7a55 22%, transparent);
  clip-path: polygon(0 10%, 4% 0, 96% 6%, 100% 0, 98% 50%, 100% 100%, 3% 92%, 0 100%, 2% 50%);
}
.qo-pult[data-welt="fussball"] .qo-sagt-text { color: var(--qo-al-druck); font-weight: 800; }

/* DIE TASTE: das Einklebefeld. */
.qo-pult[data-welt="fussball"] .qo-los .qo-kappe, .qo-pult[data-welt="fussball"] .qo-los[data-zustand] .qo-kappe {
  border-radius: .45cqmin; color: var(--qo-al-druck); background: transparent; box-shadow: none;
  font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
}
/* leer: der gedruckte Umriss — gestrichelt, darin blass die Silhouette; die Schrift in Druckgrau. */
.qo-pult[data-welt="fussball"] .qo-los[data-zustand="leer"] .qo-kappe {
  color: var(--qo-al-grau); outline: max(1px, .3cqmin) dashed color-mix(in srgb, var(--qo-al-druck) 52%, transparent); outline-offset: -.5cqmin;
  background: radial-gradient(1.6cqmin 1.6cqmin at 1.6cqmin 50%, color-mix(in srgb, var(--qo-al-druck) 14%, transparent) 0 96%, transparent) no-repeat, color-mix(in srgb, #fff 34%, transparent);
}
/* gewählt: ein Sammelbild liegt bereit — Druckblau im weißen Rand, oben die Rasenkante, schief; es wippt (online-pult.css). */
.qo-pult[data-welt="fussball"] .qo-los[data-zustand="gewaehlt"] .qo-kappe {
  color: var(--qo-al-rand);
  background: linear-gradient(180deg, var(--acc) 0 .55cqmin, transparent .55cqmin), linear-gradient(180deg, color-mix(in srgb, var(--acc2) 86%, #1c3266), var(--qo-al-druck));
  box-shadow: inset 0 0 0 .55cqmin var(--qo-al-rand), .35cqmin .6cqmin 0 var(--qo-al-schatten);
  rotate: -1.6deg;
}
/* abgeschickt: eingeklebt — gerade, flach angedrückt, Rasengrün, vorn ein Haken. */
.qo-pult[data-welt="fussball"] .qo-los[data-zustand="gesendet"] .qo-kappe {
  color: var(--qo-al-rand);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 74%, #063a12), color-mix(in srgb, var(--acc) 56%, #03230b));
  box-shadow: inset 0 0 0 .55cqmin var(--qo-al-rand), .2cqmin .3cqmin 0 var(--qo-al-schatten);
  animation: qo-al-andruecken 420ms cubic-bezier(.3, .7, .3, 1) both;
}
.qo-pult[data-welt="fussball"] .qo-los[data-zustand="gesendet"] .qo-kappe::before {
  content: ""; display: inline-block; vertical-align: middle; flex: none; width: 2.8cqmin; height: 2.8cqmin; margin-right: .6cqmin; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.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 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes qo-al-andruecken { 0% { transform: rotate(-1.6deg) scale(1.06) translateY(-4%); } 55% { transform: scale(.97, 1.02); } 100% { transform: none; } }

/* PLATZ UND PUNKTE auf der Rückseite eines Sammelbilds: Kartenpapier, Druckblau, oben die Rasenkante; die kleinen Wörter in Druckgrau. */
.qo-pult[data-welt="fussball"] .qo-rang, .qo-leiste.qo-pult[data-welt="fussball"] .qo-rang { padding: 1.1cqmin 1.2cqmin; }
.qo-pult[data-welt="fussball"] .qo-rang-in { border-radius: .45cqmin; --t0: var(--qo-al-druck); --t1: var(--qo-al-grau);
  background:
    linear-gradient(180deg, var(--qo-al-druck) 0 .8cqmin, var(--acc) .8cqmin 1.2cqmin, transparent 1.2cqmin),
    radial-gradient(circle, color-mix(in srgb, var(--qo-al-druck) 7%, transparent) 0 30%, transparent 34%) 0 0 / .6cqmin .6cqmin,
    var(--rang-grund);
  --t2: var(--qo-al-druck);
  box-shadow: inset 0 0 0 .5cqmin var(--qo-al-rand), inset 0 0 0 .64cqmin color-mix(in srgb, var(--qo-al-druck) 20%, transparent), .3cqmin .5cqmin 0 var(--qo-al-schatten); }
.qo-pult[data-welt="fussball"] .qo-rang .qo-sprung.hoch { color: var(--qo-al-gruen); }
.qo-pult[data-welt="fussball"] .qo-rang-s { border-left-color: color-mix(in srgb, var(--qo-al-druck) 22%, transparent); }

/* DIE LOBBY: Einladen und Quiz ändern als kleine bedruckte Karten in ihrem Einklebefeld; Jubeln und die Knöpfe am Ende ebenso. */
.qo-pult[data-welt="fussball"] :is(.qla-anders-kappe, .qo-e-knopf, .sp-jubel) {
  background: linear-gradient(180deg, var(--qo-al-druck) 0 .5cqmin, var(--acc) .5cqmin .8cqmin, transparent .8cqmin), var(--qo-al-karte); color: var(--qo-al-druck);
  box-shadow: inset 0 0 0 max(1px, .14cqmin) color-mix(in srgb, var(--qo-al-druck) 28%, transparent), .25cqmin .4cqmin 0 var(--qo-al-schatten);
}
.qo-pult[data-welt="fussball"] :is(.qla-anders-kappe, .qo-e-knopf, .sp-jubel) svg { color: var(--qo-al-gruen); }

@media (prefers-reduced-motion: reduce) {
  .qo-pult[data-welt="fussball"] .qo-los[data-zustand="gesendet"] .qo-kappe { animation: none; }
}