/* ==============================================================   TIERWELT · die Beobachtungshütte (data-welt="tierwelt" — online.js liest sie an der Uhr „abendsonne" ab)
   Tierwelt (design/handy/sets/tierwelt/IDEE.md §2.7). Tobi, 02.11.2026: „… echt langweilig und eigentlich fast immer gleich."
   Darum jetzt die Hütte am Wasserloch zur Abendstunde, mit Tieren, die vorbeiziehen:
     · Hinten die Bretterwand der Hütte, durch die Fugen fällt das rosa Abendlicht; oben ein Seil als Kante.
     · Der Buddy hockt vor seinem ZELT aus Segeltuch (die Planen zurückgebunden, drinnen brennt die Laterne) — er trägt den Buschhut.
     · Die ANZEIGE ist der SEHSCHLITZ: ein Ausschnitt aus Brettern, darin die Savanne im Abendlicht — rosa Himmel, die tiefe Sonne
       am Horizont, eine Schirmakazie, dunkles Ufer. Am Horizont zieht langsam eine HERDE vorbei (Giraffe, Elefant, Jungtier),
       ganz ruhig, von rechts nach links. Die Wahl erscheint davor hell wie eine Sichtung.
     · Die TASTE ist der STEMPEL des Sichtungsbuchs: der Einband aus Segeltuch mit Steppnaht, vorn die PFOTE als Zeichen. Leer ist
       sie blass, mit der Wahl hebt sie sich in Flamingo, abgeschickt ist sie gestempelt — „Gesichtet!".
     · Der Buddy FLÜSTERT auf einem Zettel aus dem Feldbuch (gepunkteter Rand, kursiv). Platz und Punkte stehen auf der Seite des Buchs.
   Holz, Segeltuch und Papier sind Material; Licht, Schrift und Zustände kommen aus den Rollen (--acc Savannen-Ocker, --acc2
   Flamingo). Variablen tragen das Motiv im Namen (--qo-tw-*). Bewegung nur transform und opacity: die Herde zieht, die Sonne
   atmet, der Stempel drückt; bei reduzierter Bewegung steht alles.
   ===================================================================== */
.qo-pult[data-welt="tierwelt"] {
  --qo-tw-tinte: #2a1a0c;
  --qo-tw-papier: linear-gradient(180deg, #fbf3e2, #efe0c0);
  --qo-tw-segel: #c9b385;
  --qo-tw-herde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' fill='%23000'%3E%3Cpath d='M3 2.6 7.4 1.2 8 0l.6 1.1.8-.9.4 1.2.6 1 6.1 9.2 9.5 1.8c1.4.2 2 1.2 2 2.6v2.4L27.4 29h-1.2l-.6-8.6-.8 8.6h-1.2l-.4-10c-2.8.6-5.2.6-7.2 0l-.6 10h-1.2l-.6-8.2L13 29h-1.2l.4-11c-.6-3-.8-5-.6-6.6L7.6 4.2 3.4 4z'/%3E%3Cpath d='M44 16c0-5 4-8 10-8h6c6 0 9 3 9 8v13h-2.6l-.6-7-1 7h-2.6l-.3-8c-3 .8-6 .8-9 0l-.4 8h-2.6l-.7-7-.8 7H46v-9c-1.4 2-2 5-1.6 8.4h-1.2c-.6-4 .2-7.6 1.6-10.6z'/%3E%3Cpath d='M84 21c0-3 2.4-5 6-5h3.4c3.6 0 5.4 2 5.4 5v8h-1.6l-.4-4.4-.6 4.4h-1.6l-.2-5c-1.8.5-3.6.5-5.4 0l-.2 5h-1.6l-.4-4.4-.5 4.4H85v-5.6c-.8 1.2-1.2 3-1 5.2h-.8c-.4-2.6.2-4.8 1-6.6z'/%3E%3C/svg%3E");
  --qo-tw-akazie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' fill='%230f0806'%3E%3Cpath d='M1 7C6 3 14 2 20 2.5 27 2 34 3 39 7c-6 1.5-13 1.6-19 1.4C14 8.6 7 8.5 1 7z'/%3E%3Cpath d='M18.8 8 18 24h2.6l.4-11.6L25.4 8H24l-2.8 2.4.2-2.4zM15 8l3.6 3.4V9.6L16.6 8z'/%3E%3C/svg%3E");
  --qo-tw-huegel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none' fill='%23150b08'%3E%3Cpath d='M0 14C20 9 34 8 52 12s30 1 46-3 34-1 52 4 32 1 50-2V20H0z'/%3E%3C/svg%3E");
  --qo-tw-pfote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.2' rx='5.2' ry='4.4'/%3E%3Ccircle cx='5.6' cy='10' r='2.3'/%3E%3Ccircle cx='9.6' cy='6' r='2.4'/%3E%3Ccircle cx='14.4' cy='6' r='2.4'/%3E%3Ccircle cx='18.4' cy='10' r='2.3'/%3E%3C/svg%3E");
  --qo-tw-zelt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 4 98 100H2z' fill='%23c9ad76'/%3E%3Cpath d='M50 4 98 100H50z' fill='%23000' opacity='.12'/%3E%3Cpath d='M50 4 2 100M50 4l48 96' stroke='%23ead7ad' stroke-width='1.8'/%3E%3Cpath d='M50 16 84 100H16z' fill='%231a0e07'/%3E%3Cpath d='M50 16 16 100H8L36 50z' fill='%23e3cb99'/%3E%3Cpath d='M50 16l34 84h8L64 50z' fill='%23b6985f'/%3E%3Cpath d='M36 50l-9 3M64 50l9 3' stroke='%235a3b1c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M50 0v6' stroke='%235a3b1c' stroke-width='2.4'/%3E%3Cpath d='M50 1l9 3-9 3z' fill='%23a8452e'/%3E%3C/svg%3E");
  --pult-grund:
    linear-gradient(180deg, transparent 0 calc(33% - .12cqmin), color-mix(in srgb, var(--acc2) 46%, transparent) calc(33% - .12cqmin) 33%, transparent 33% calc(66% - .12cqmin), color-mix(in srgb, var(--acc2) 34%, transparent) calc(66% - .12cqmin) 66%, transparent 66%),
    radial-gradient(60% 160% at 50% -40%, color-mix(in srgb, var(--acc2) 18%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 9cqmin, rgba(0, 0, 0, .25) 9cqmin 9.2cqmin, transparent 9.2cqmin 23cqmin),
    linear-gradient(180deg, #4e351e 0, #3c2814 33%, #4a321c 33.2%, #3a2614 66%, #4c331d 66.2%, #33210f 100%);
  --kante: repeating-linear-gradient(115deg, #c9a46a 0 .7cqmin, #8a6a3a .7cqmin 1.2cqmin, #5a4220 1.2cqmin 1.4cqmin);
  --kante-h: 1.1cqmin;
  /* Der Hocker vor dem Zelt: grobes Holz. */
  --sitz: linear-gradient(180deg, #a8743c 0, #7a5228 70%, #5a3b1c 100%);
  --sitz-naht: #2a1a0e;
  /* DER SEHSCHLITZ: Himmel, Sonne, Akazie, Hügel, dunkles Ufer mit dem Widerschein. Akazie, Sonne und Widerschein stehen im Fenster
     rechts vor „eingeloggt“ (--qo-motiv-r, unten; vorher bei 46 % und 63 % mitten unter der Schrift) — Hügel und Ufer sind Grund. */
  --disp-grund:
    var(--qo-tw-akazie) right calc(var(--qo-motiv-r) + 7cqmin) bottom 31% / 9cqmin auto no-repeat,
    var(--qo-tw-huegel) 0 69% / 100% 18% no-repeat,
    linear-gradient(180deg, transparent 0 69%, #160c08 69%, #1f120c 84%, #120a06 100%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 50%, transparent) 22% 78%, transparent) right calc(var(--qo-motiv-r) + .5cqmin) top 74% / 8cqmin .3cqmin no-repeat,
    radial-gradient(circle at calc(100% - var(--qo-motiv-r) - 4.5cqmin) 64%, color-mix(in srgb, var(--acc) 70%, #e0703a) 0 1.6cqmin, transparent 1.8cqmin),
    radial-gradient(34% 70% at calc(100% - var(--qo-motiv-r) - 4.5cqmin) 64%, color-mix(in srgb, var(--acc) 70%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--acc2) 18%, #170a12) 0, color-mix(in srgb, var(--acc2) 34%, #241018) 38%, color-mix(in srgb, var(--acc2) 30%, color-mix(in srgb, var(--acc) 30%, #2a140e)) 69%);
  --disp-rahmen: inset 0 0 0 .5cqmin #5a3b1c, inset 0 0 0 .7cqmin #1a0e06, inset 0 1.2cqmin 1.4cqmin rgba(0, 0, 0, .55), 0 .3cqmin 0 #6b4a28, 0 1cqmin 2cqmin rgba(0, 0, 0, .6);
  --disp-rund: .3cqmin; --disp-glas: none;
  --disp-leer: color-mix(in srgb, #fbe9d6 70%, #3a1e24); --disp-an: #fff4e6; --disp-fest: #ffffff;
  --disp-neben: color-mix(in srgb, #fbe9d6 94%, #3a1e24); --disp-mittel: #f6e6d8;
  --disp-leucht: 0 .1cqmin .6cqmin rgba(0, 0, 0, .8); --disp-leucht-fest: 0 .1cqmin .6cqmin rgba(0, 0, 0, .8);
  --disp-trenn: color-mix(in srgb, #fbe9d6 26%, transparent);
  /* Der Stempel liegt auf grobem Holz. */
  --taste-rahmen: linear-gradient(180deg, #6b4520, #4a321c 55%, #2a1a0e);
  --taste-rund: .8cqmin;
  --taste-schatten: 0 1cqmin 2.4cqmin rgba(0, 0, 0, .65), inset 0 .22cqmin 0 rgba(255, 255, 255, .14), inset 0 0 0 .14cqmin rgba(0, 0, 0, .6);
  --rang-grund: var(--qo-tw-papier);
}
/* Vor dem Abendhimmel trägt jede Schrift im Schlitz einen dunklen Hof (wie Untertitel) — sie bleibt vor Sonne und Herde lesbar. */
.qo-pult[data-welt="tierwelt"] .qo-display { --disp-urteil: color-mix(in srgb, var(--u) 50%, #fff); text-shadow: 0 .1cqmin .2cqmin rgba(0, 0, 0, .7), 0 0 .9cqmin rgba(0, 0, 0, .7); }
.qo-pult[data-welt="tierwelt"] .qo-a-t em, .qo-pult[data-welt="tierwelt"] .qo-drin .qo-tischwort span, .qo-pult[data-welt="tierwelt"] .qo-drin .qo-tischwort b { text-shadow: 0 .1cqmin .5cqmin rgba(0, 0, 0, .85); }
.qo-pult[data-welt="tierwelt"] .qo-z-uwort { text-shadow: 0 .1cqmin .6cqmin rgba(0, 0, 0, .8); }
.qo-pult[data-welt="tierwelt"] .qo-a-stempel { background: color-mix(in srgb, var(--acc2) 80%, #3a0a16); color: #fff6f0; }

/* DAS ZELT statt der Lehne: Segeltuch, die Planen zurückgebunden, drinnen die Laterne. */
.qo-pult[data-welt="tierwelt"] .qo-buddy::before {
  left: 0; right: 0; top: -4%; bottom: -1.2cqmin; border-radius: 0;
  background:
    radial-gradient(16% 30% at 50% 80%, color-mix(in srgb, var(--acc) 80%, #ffe2a6), transparent 80%),
    radial-gradient(30% 50% at 50% 82%, color-mix(in srgb, var(--acc) 50%, transparent), transparent 80%),
    var(--qo-tw-zelt) 0 0 / 100% 100% no-repeat;
  box-shadow: none;
}

/* Das Geflüster des Buddys: ein Zettel aus dem Feldbuch, gepunkteter Rand, die Schrift dunkel wie Bleistift. */
.qo-pult[data-welt="tierwelt"] .qo-sagt { border-radius: .4cqmin; background: var(--qo-tw-papier); box-shadow: 0 .8cqmin 2cqmin rgba(0, 0, 0, .5);
  outline: max(1.5px, .26cqmin) dotted color-mix(in srgb, var(--acc2) 80%, #4a0a1a); outline-offset: -.7cqmin; }
.qo-pult[data-welt="tierwelt"] .qo-sagt::before { background: #f5ead2; }
.qo-pult[data-welt="tierwelt"] .qo-sagt-text { color: var(--qo-tw-tinte); font-style: italic; }

/* Die Herde zieht am Horizont vorbei: ein Streifen so breit wie der Schlitz, rechts draußen, die Tiere an seinem linken Ende — er
   fährt nach links, bis sie links hinaus sind. Die Sonne atmet.
   DER SCHLITZ IST EIN FENSTER rechts vor „eingeloggt“ (Tobi, 02.11.2026: keine Zier kreuzt Schrift — die Herde zog vorher über die
   ganze Anzeige und damit durch die Schrift): 16 cqmin breit, an derselben Stelle wie die Motive der anderen Welten (--qo-motiv-r);
   die Schrift endet davor (--qo-motiv-frei, online-pult.css). Rechts darin die Sonne, links die Akazie. */
.qo-pult[data-welt="tierwelt"] { --qo-motiv-r: 19.5cqmin; --qo-motiv-frei: calc(var(--qo-motiv-r) + 16cqmin); }
@container (max-width: 900px) { .qo-pult[data-welt="tierwelt"] { --qo-motiv-r: 23.6cqmin; } }
.qo-pult.qla-pult[data-welt="tierwelt"] { --qo-motiv-r: 2.6cqmin; }
.qo-pult.qo-pult-e[data-welt="tierwelt"], .qo-pult.k1-pult[data-welt="tierwelt"] { --qo-motiv-r: -40cqmin; }
@container (max-width: 900px) { .qo-pult.qla-pult[data-welt="tierwelt"] { --qo-motiv-r: -40cqmin; } }
.qo-pult[data-welt="tierwelt"] .qo-d-glas { overflow: hidden; left: auto; right: var(--qo-motiv-r); width: 16cqmin; }
.qo-pult[data-welt="tierwelt"] .qo-d-glas::before {
  content: ""; position: absolute; left: 100%; top: 0; width: 100%; height: 72%; pointer-events: none;
  background: #0f0806; -webkit-mask: var(--qo-tw-herde) left bottom / auto 34% no-repeat; mask: var(--qo-tw-herde) left bottom / auto 34% no-repeat;
  animation: qo-tw-herde 22s linear -8s infinite;
}
@keyframes qo-tw-herde { from { transform: none; } to { transform: translateX(-170%); } }
.qo-pult[data-welt="tierwelt"] .qo-d-glas::after {
  content: ""; position: absolute; left: calc(100% - 4.5cqmin); top: 64%; width: 16cqmin; height: 16cqmin; margin: -8cqmin 0 0 -8cqmin; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 40%, transparent), transparent);
  animation: qo-tw-sonne 6s ease-in-out infinite alternate;
}
@keyframes qo-tw-sonne { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }

/* DIE TASTE: der Einband des Sichtungsbuchs. Segeltuch mit Steppnaht; vorn die Pfote. */
.qo-pult[data-welt="tierwelt"] .qo-los .qo-kappe, .qo-pult[data-welt="tierwelt"] .qo-los[data-zustand] .qo-kappe {
  border-radius: .5cqmin; color: var(--qo-tw-tinte);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 .2cqmin, transparent .2cqmin .5cqmin),
    repeating-linear-gradient(-45deg, rgba(90, 60, 20, .06) 0 .2cqmin, transparent .2cqmin .5cqmin),
    linear-gradient(180deg, color-mix(in srgb, #fff 16%, var(--qo-tw-segel)), var(--qo-tw-segel) 55%, color-mix(in srgb, var(--qo-tw-segel) 80%, #5a3b1c));
  box-shadow: inset 0 .3cqmin 0 rgba(255, 255, 255, .3), inset 0 -.4cqmin .6cqmin rgba(90, 60, 20, .35);
  outline: max(1px, .2cqmin) dashed rgba(70, 44, 18, .55); outline-offset: -.6cqmin;
}
.qo-pult[data-welt="tierwelt"] .qo-los .qo-kappe::before {
  content: ""; display: inline-block; vertical-align: middle; flex: none; width: 3cqmin; height: 3cqmin; margin-right: .2cqmin; background: #6b4a28;
  -webkit-mask: var(--qo-tw-pfote) center / contain no-repeat; mask: var(--qo-tw-pfote) center / contain no-repeat;
  transition: transform 320ms cubic-bezier(.3, 1.4, .5, 1);
}
.qo-pult[data-welt="tierwelt"] .qo-los[data-zustand="leer"] .qo-kappe { color: #4a321c; filter: saturate(.7) brightness(.9); }
.qo-pult[data-welt="tierwelt"] .qo-los[data-zustand="leer"] .qo-kappe::before { opacity: .55; transform: rotate(-14deg); }
.qo-pult[data-welt="tierwelt"] .qo-los[data-zustand="gewaehlt"] .qo-kappe { box-shadow: inset 0 .3cqmin 0 rgba(255, 255, 255, .3), inset 0 0 0 .3cqmin color-mix(in srgb, var(--acc2) 80%, transparent), 0 0 2.6cqmin color-mix(in srgb, var(--acc2) 46%, transparent); }
.qo-pult[data-welt="tierwelt"] .qo-los[data-zustand="gewaehlt"] .qo-kappe::before { background: color-mix(in srgb, var(--acc2) 80%, #4a0a1a); transform: translateY(-.4cqmin) rotate(-8deg); }
/* Abgeschickt: die Pfote ist gestempelt — sie fällt einmal auf die Seite (vom Großen ins Kleine) und bleibt, mit Stempelring. */
.qo-pult[data-welt="tierwelt"] .qo-los[data-zustand="gesendet"] .qo-kappe {
  background: radial-gradient(60% 110% at 16% 50%, color-mix(in srgb, var(--acc2) 22%, transparent), transparent 70%), var(--qo-tw-papier);
  box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--acc2) 60%, transparent), inset 0 -.3cqmin .5cqmin rgba(122, 82, 40, .3);
}
.qo-pult[data-welt="tierwelt"] .qo-los[data-zustand="gesendet"] .qo-kappe::before { background: color-mix(in srgb, var(--acc2) 84%, #4a0a1a); animation: qo-tw-stempel 520ms cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes qo-tw-stempel { 0% { transform: scale(2.2) rotate(-20deg); opacity: 0; } 60% { transform: scale(.88) rotate(-6deg); opacity: 1; } 100% { transform: rotate(-6deg); opacity: 1; } }

/* Platz und Punkte auf der Seite des Feldbuchs: dunkle Schrift. */
.qo-pult[data-welt="tierwelt"] .qo-rang-in { border-radius: .3cqmin; --t0: #2a1a0c; --t1: #3d2610; --t2: #4a3016;
  box-shadow: inset .4cqmin 0 0 var(--acc2), 0 .2cqmin .5cqmin rgba(0, 0, 0, .45); }
.qo-pult[data-welt="tierwelt"] .qo-rang .qo-sprung.hoch { color: #0b6b4a; }
.qo-pult[data-welt="tierwelt"] .qo-rang-s { border-left-color: rgba(58, 37, 18, .3); }
.qo-pult[data-welt="tierwelt"] .qo-rang .qo-los.qo-rang-alt .qo-kappe::before { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .qo-pult[data-welt="tierwelt"] .qo-d-glas::before { animation: none; transform: translateX(-84%); }
  .qo-pult[data-welt="tierwelt"] .qo-d-glas::after { animation: none; }
  .qo-pult[data-welt="tierwelt"] .qo-los .qo-kappe::before { transition: none; animation: none; }
}