/* ===================================================================================================================================
   Das Zimmer der Eule (Markup: templates/zimmer_szene.html + zimmer_raeume.html + zimmer_teile.html, Klassen setzt static/js/zimmer.js).
   Alles läuft über feste Klassen – keine berechneten Pixelwerte. Bewegung nur über transform/opacity.
     zeit-morgen|tag|abend|nacht   Himmel im Fenster und Schleier        licht-an|aus   Lampe/Dunkelheit
     platz-<name>                  Standpunkt der Eule (--x/--y in Zimmer-Einheiten; Panorama 800 × 250, Handy 400 × 250)   massstab-<n>   Größe an diesem Platz (Prozent)
     weg-kurz|mittel|weit|sehrweit Dauer des Weges      geht|huepft|fliegt   Art der Bewegung       seite-l|r   Laufrichtung
     bei-<platz>                   die Eule sitzt dort (Vordergrund-Teile)         blase-<platz>   Lage der Sprechblase (seitlich der Eule, Schwanz zur Eule)
   Das Zimmer ist ein Panorama (zwei Buchten, 3,2 : 1). Unter 768 px zeigt es nur die linke Bucht auf 16:10, größer gezeichnet (Anker und Plätze: Media Query unten;
   der Block zwischen den Markierungen „platz-start/-ende“ wird von zimmer.py (platz_css) erzeugt: python -m lerneule.zimmer).
   =================================================================================================================================== */

/* ---------- Anordnung ---------- */
.zimmer-karte { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.zimmer-szene {
  position: relative; width: 100%; max-width: 1000px; margin-inline: auto; aspect-ratio: 800 / 250; overflow: hidden; isolation: isolate; background: #e8dcff;
  border: 3px solid var(--ink); border-radius: 1.4rem; box-shadow: 0 5px 0 var(--ink); contain: layout paint;
}
.zimmer-hinten, .zimmer-vorne { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; pointer-events: none; }
.zimmer-hinten { z-index: 1; }
.zimmer-vorne { z-index: 3; }
/* Wohnung: jedes Zimmer ist vorgezeichnet, sichtbar ist nur das mit raum-aktiv (zimmer.js schaltet beim Zimmerwechsel um) */
.zimmer-hinten, .zimmer-vorne { display: none; }
.zimmer-hinten.raum-aktiv, .zimmer-vorne.raum-aktiv { display: block; }
.zimmer-eule.ohne-eule { display: none; }
.zimmer-ort { position: absolute; z-index: 5; left: .6rem; top: .5rem; background: #fffc; border: 2px solid var(--ink); border-radius: 1rem; padding: 0 .55rem; font-size: .85rem; font-weight: 600; line-height: 1.5; pointer-events: none; }
@media (max-width: 575.98px) { .zimmer-ort { font-size: .7rem; left: .35rem; top: .3rem; padding: 0 .4rem; border-width: 1.5px; } }
.zimmer-eule { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* Sprechblase: im Zimmer, seitlich neben der Eule (Schwanz zur Eule); Lage je Platz über Klassen blase-<platz> am Zimmer (erzeugt, siehe unten) – nie unter der Eule */
.zimmer-rede { position: absolute; z-index: 4; max-width: 40%; right: auto; left: 50%; bottom: 30%; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.zimmer-blase { position: relative; margin: 0; max-width: 100%; font-size: 1rem; padding: .35rem .7rem; box-shadow: 0 3px 0 var(--ink); transform-origin: 50% 100%; }
.zimmer-blase.versteckt { display: none; }
.zimmer-blase::before { border: 3px solid var(--ink); bottom: 11px; }
/* Blitzfragen: kleines Eingabefeld direkt unter der Sprechblase (Eule fragt, Kind tippt die Zahl ein; kein Seitenwechsel, kein Zeitdruck) */
.blitz { display: flex; flex-direction: column; gap: .3rem; background: #fff; border: 3px solid var(--ink); border-radius: 1rem; padding: .35rem .45rem; box-shadow: 0 3px 0 var(--ink); max-width: 100%; }
.blitz.versteckt, .blitz-zeile.versteckt { display: none; }
.blitz-zeile { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.blitz .antwort { width: 6.2rem; flex: none; font-weight: 700; text-align: center; font-size: 1.15rem; border: 3px solid var(--ink); border-radius: .8rem; padding: .15rem .4rem; }
.blitz .btn { font-size: .95rem; padding: .15rem .8rem; }
.blitz .eingabe-hinweis { font-size: .85rem; }
@media (max-width: 575.98px) { .blitz { padding: .25rem .35rem; border-width: 2px; } .blitz .antwort { width: 4.6rem; font-size: 1rem; } .blitz .btn { font-size: .8rem; padding: .1rem .55rem; } }
@media (max-width: 575.98px) { .zimmer-blase { font-size: .8rem; padding: .25rem .5rem; border-width: 2px; border-radius: .8rem; } .zimmer-blase::before { width: 10px; height: 10px; bottom: 9px; } }

.zimmer-vorschau { display: block; width: 100%; height: 100%; background: #e8dcff; overflow: hidden; }
.zimmer-vorschau .teil { pointer-events: none; }

/* Antippbare Gegenstände (nur die gemalten Flächen reagieren, leere Stellen reichen Berührungen durch) */
.zimmer-hinten .teil:not(.aus):not(.teil-raum) { pointer-events: auto; cursor: pointer; }
.zimmer-hinten .teil[data-tipp] { -webkit-tap-highlight-color: transparent; }
.teil.aus { display: none; }
.teil { transform-box: fill-box; transform-origin: 50% 100%; }

/* Vordergrund-Teile (Nestrand, Sesselarme …) liegen nur dann vor der Eule, wenn sie dort sitzt (Klasse bei-<platz> am Zimmer) – sonst würde sie beim Vorbeigehen verdeckt */
.zimmer-vorne .teil-sitzplatz, .zimmer-vorne .teil-schlafplatz { opacity: 0; transition: opacity .3s ease; }
.bei-sitzplatz .zimmer-vorne .teil-sitzplatz, .bei-schlafplatz .zimmer-vorne .teil-schlafplatz { opacity: 1; }

/* ---------- Tageszeit: Himmel im Fenster, Schleier über dem Zimmer ---------- */
.himmel { opacity: 0; transition: opacity 1.6s ease; }
.zeit-morgen .himmel-morgen, .zeit-tag .himmel-tag, .zeit-abend .himmel-abend, .zeit-nacht .himmel-nacht { opacity: 1; }
.schleier rect { opacity: 0; transition: opacity 1.6s ease; pointer-events: none; }
.zeit-morgen .schleier-warm { opacity: .07; }
.zeit-abend .schleier-warm { opacity: .14; }
.zeit-nacht .schleier-nacht { opacity: .34; }
.zeit-nacht.licht-aus .schleier-nacht { opacity: .56; }
.zeit-abend.licht-aus .schleier-nacht { opacity: .18; }
.zeit-tag.licht-aus .schleier-nacht { opacity: .1; }
/* Lampenschein */
.glow, .glow-kugel, .glow-pilz { opacity: 0; transition: opacity .9s ease; filter: blur(7px); }
.licht-an .glow { opacity: .12; }
.licht-an.zeit-abend .glow { opacity: .42; }
.licht-an.zeit-nacht .glow { opacity: .5; }
.licht-aus .glow { opacity: 0; }
.glow-kugel { opacity: .5; animation: z-pulsieren 3.4s ease-in-out infinite; }
.glow-pilz { opacity: .0; }
.zeit-nacht .glow-pilz, .zeit-abend .glow-pilz { opacity: .6; animation: z-pulsieren 3s ease-in-out infinite; }
.licht-aus .glow-pilz { opacity: .75; }

/* ---------- Die Eule im Zimmer ---------- */
.zimmer-steh {
  position: absolute; left: 0; top: 0; width: 10.5%; aspect-ratio: 200 / 230; --x: 232; --y: 236; --s: 1; --dauer: 2.4s;
  transform: translate(calc((var(--x) - 42) * 1.1905%), calc((var(--y) - 90.7) * 1.0352%)) scale(var(--s)); transform-origin: 50% 94%;
  transition: transform var(--dauer) cubic-bezier(.45, 0, .55, 1);
}
.zimmer-steh .eule-figur { position: absolute; inset: 0; width: 100%; pointer-events: auto; }
.zimmer-huepf, .zimmer-dreh { position: absolute; inset: 0; transition: transform .5s ease; }
.zimmer-dreh { transform-origin: 50% 94%; }
.weg-kurz { --dauer: 1.5s; } .weg-mittel { --dauer: 2.6s; } .weg-weit { --dauer: 3.6s; } .weg-sehrweit { --dauer: 5s; }
/* Plätze der Eule und Lage der Sprechblasen: erzeugt aus zimmer.py (platz_css) */
/* platz-start (erzeugt, nicht von Hand ändern) */
.platz-boden { --x: 420; --y: 236; }
.platz-boden2 { --x: 610; --y: 238; }
.platz-sitzplatz { --x: 170; --y: 214; }
.platz-schlafplatz { --x: 690; --y: 190; }
.platz-arbeit { --x: 112; --y: 208; }
.platz-spielzeug { --x: 290; --y: 216; }
.platz-pflanze { --x: 66; --y: 242; }
.platz-fenster { --x: 326; --y: 114; }
.platz-fenster2 { --x: 726; --y: 114; }
.platz-regal { --x: 190; --y: 64; }
.platz-wandstueck { --x: 470; --y: 172; }
.platz-haustier { --x: 546; --y: 242; }
.blase-boden .zimmer-rede { right: 53.5%; left: auto; bottom: 23.6%; top: auto; max-width: 42%; }
.blase-boden .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
.blase-boden2 .zimmer-rede { right: 29.8%; left: auto; bottom: 22.8%; top: auto; max-width: 42%; }
.blase-boden2 .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
.blase-sitzplatz .zimmer-rede { left: 26.5%; right: auto; bottom: 29.7%; top: auto; max-width: 42%; }
.blase-sitzplatz .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
.blase-schlafplatz .zimmer-rede { right: 18.7%; left: auto; bottom: 38.4%; top: auto; max-width: 42%; }
.blase-schlafplatz .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
.blase-arbeit .zimmer-rede { left: 19.2%; right: auto; bottom: 32.1%; top: auto; max-width: 42%; }
.blase-arbeit .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
.blase-spielzeug .zimmer-rede { left: 41.5%; right: auto; bottom: 28.9%; top: auto; max-width: 42%; }
.blase-spielzeug .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
.blase-pflanze .zimmer-rede { left: 13.7%; right: auto; bottom: 19.4%; top: auto; max-width: 42%; }
.blase-pflanze .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
.blase-fenster .zimmer-rede { left: 45.2%; right: auto; bottom: 67.0%; top: auto; max-width: 42%; }
.blase-fenster .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
.blase-fenster2 .zimmer-rede { right: 13.7%; left: auto; bottom: 67.0%; top: auto; max-width: 42%; }
.blase-fenster2 .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
.blase-regal .zimmer-rede { left: 27.4%; right: auto; top: 4.1%; bottom: auto; max-width: 42%; }
.blase-regal .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
.blase-wandstueck .zimmer-rede { right: 46.2%; left: auto; bottom: 45.6%; top: auto; max-width: 42%; }
.blase-wandstueck .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
.blase-haustier .zimmer-rede { right: 37.2%; left: auto; bottom: 19.4%; top: auto; max-width: 42%; }
.blase-haustier .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
@media (max-width: 767.98px) {
  .platz-boden { --x: 232; --y: 236; }
  .platz-boden2 { --x: 232; --y: 236; }
  .platz-sitzplatz { --x: 84; --y: 214; }
  .platz-schlafplatz { --x: 335; --y: 190; }
  .platz-arbeit { --x: 62; --y: 208; }
  .platz-spielzeug { --x: 172; --y: 216; }
  .platz-pflanze { --x: 50; --y: 242; }
  .platz-fenster { --x: 326; --y: 114; }
  .platz-fenster2 { --x: 326; --y: 114; }
  .platz-regal { --x: 138; --y: 64; }
  .platz-wandstueck { --x: 250; --y: 172; }
  .platz-haustier { --x: 296; --y: 242; }
  .blase-boden .zimmer-rede { right: 54.0%; left: auto; bottom: 23.6%; top: auto; max-width: 45%; }
  .blase-boden .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
  .blase-boden2 .zimmer-rede { right: 54.0%; left: auto; bottom: 23.6%; top: auto; max-width: 45%; }
  .blase-boden2 .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
  .blase-sitzplatz .zimmer-rede { left: 31.4%; right: auto; bottom: 29.7%; top: auto; max-width: 62%; }
  .blase-sitzplatz .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
  .blase-schlafplatz .zimmer-rede { right: 26.2%; left: auto; bottom: 38.4%; top: auto; max-width: 62%; }
  .blase-schlafplatz .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
  .blase-arbeit .zimmer-rede { left: 25.9%; right: auto; bottom: 32.1%; top: auto; max-width: 62%; }
  .blase-arbeit .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
  .blase-spielzeug .zimmer-rede { left: 53.4%; right: auto; bottom: 28.9%; top: auto; max-width: 46%; }
  .blase-spielzeug .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
  .blase-pflanze .zimmer-rede { left: 23.5%; right: auto; bottom: 19.4%; top: auto; max-width: 62%; }
  .blase-pflanze .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
  .blase-fenster .zimmer-rede { right: 27.3%; left: auto; bottom: 67.0%; top: auto; max-width: 62%; }
  .blase-fenster .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
  .blase-fenster2 .zimmer-rede { right: 27.3%; left: auto; bottom: 67.0%; top: auto; max-width: 62%; }
  .blase-fenster2 .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
  .blase-regal .zimmer-rede { left: 41.8%; right: auto; top: 4.1%; bottom: auto; max-width: 57%; }
  .blase-regal .zimmer-blase::before { left: -9px; right: auto; border-width: 0 0 3px 3px; }
  .blase-wandstueck .zimmer-rede { right: 47.4%; left: auto; bottom: 45.6%; top: auto; max-width: 52%; }
  .blase-wandstueck .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
  .blase-haustier .zimmer-rede { right: 37.0%; left: auto; bottom: 19.4%; top: auto; max-width: 62%; }
  .blase-haustier .zimmer-blase::before { left: auto; right: -9px; border-width: 3px 3px 0 0; }
  .anker-raum.nr-0 { transform: translate(0px, 0px); }
  .anker-raum.nr-1 { display: none; }
  .anker-vorhang.nr-0 { transform: translate(326px, 0px); }
  .anker-vorhang.nr-1 { display: none; }
  .anker-wandbild.nr-0 { transform: translate(50px, 62px); }
  .anker-wandstueck.nr-0 { transform: translate(250px, 100px); }
  .anker-regal.nr-0 { transform: translate(138px, 128px); }
  .anker-teppich.nr-0 { transform: translate(232px, 222px); }
  .anker-arbeit.nr-0 { transform: translate(50px, 196px); }
  .anker-spielzeug.nr-0 { transform: translate(172px, 194px); }
  .anker-schlafplatz.nr-0 { transform: translate(335px, 192px); }
  .anker-haustier.nr-0 { transform: translate(292px, 240px); }
  .anker-pflanze.nr-0 { transform: translate(22px, 238px); }
  .anker-pflanze.nr-1 { display: none; }
  .anker-sitzplatz.nr-0 { transform: translate(84px, 238px); }
  .anker-lampe.nr-0 { transform: translate(200px, 0px); }
  .anker-lampe.nr-1 { display: none; }
}
/* platz-ende */
/* Panorama: Der 3px-Rahmen verkleinert die Zeichenfläche leicht (Seitenverhältnis gilt für die Rahmenbox); 2 % Vergrößerung um die Mitte füllt den Rahmen ohne Randstreifen. */
@media (min-width: 768px) {
  .zimmer-szene .zimmer-form { transform: scale(1.02); transform-origin: 400px 125px; }
}
@media (max-width: 767.98px) {
  .zimmer-szene { aspect-ratio: 400 / 250; max-width: none; }
  .zimmer-szene .zimmer-form { transform: translate(0, -125px) scale(2); }
  .zimmer-steh { width: 21%; }
}
/* Zimmerwechsel: die Eule geht seitlich aus dem Bild (rand-l|r) und kommt auf der anderen Seite herein; das Panorama gleitet (zimmer-gleiten am Zimmer, raum-her-/raum-weg- an den Schichten) */
.zimmer-steh.rand-l { --x: -70; } .zimmer-steh.rand-r { --x: 870; }
@media (max-width: 767.98px) { .zimmer-steh.rand-r { --x: 470; } }
.zimmer-steh.sofort { transition: none; }
.zimmer-gleiten .zimmer-hinten, .zimmer-gleiten .zimmer-vorne { transition: transform 1.1s cubic-bezier(.5, 0, .3, 1); }
.raum-her-r { transform: translateX(100%); } .raum-her-l { transform: translateX(-100%); }
.raum-weg-l { transform: translateX(-100%); } .raum-weg-r { transform: translateX(100%); }
.massstab-100 { --s: 1; } .massstab-90 { --s: .9; } .massstab-85 { --s: .85; } .massstab-80 { --s: .8; } .massstab-70 { --s: .7; } .massstab-55 { --s: .55; }
/* Bewegung zwischen den Plätzen */
.geht .zimmer-huepf { animation: z-watscheln .52s ease-in-out infinite; }
.geht.seite-l .zimmer-dreh, .huepft.seite-l .zimmer-dreh { transform: rotate(-4deg); }
.geht.seite-r .zimmer-dreh, .huepft.seite-r .zimmer-dreh { transform: rotate(4deg); }
.fliegt.seite-l .zimmer-dreh { transform: rotate(-8deg); } .fliegt.seite-r .zimmer-dreh { transform: rotate(8deg); }
.geht .e-fuss-l { animation: e-tanz-fuss .52s ease-in-out infinite; } .geht .e-fuss-r { animation: e-tanz-fuss .52s ease-in-out infinite .26s; }
.huepft .zimmer-huepf { animation: z-sprung var(--dauer) ease-in-out both; }
.fliegt .zimmer-huepf { animation: z-bogen var(--dauer) ease-in-out both; }
.fliegt .e-fluegel-l { animation: e-abh-fl-l .2s ease-in-out infinite alternate; }
.fliegt .e-fluegel-r { animation: e-abh-fl-r .2s ease-in-out infinite alternate; }
.fliegt .e-schatten { opacity: .3; }
@keyframes z-watscheln { 0%, 100% { transform: translateY(0) rotate(-2deg); } 25% { transform: translateY(-5%) rotate(0); } 50% { transform: translateY(0) rotate(2deg); } 75% { transform: translateY(-5%) rotate(0); } }
@keyframes z-sprung { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22%); } }
@keyframes z-bogen { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(-4%); } 50% { transform: translateY(-34%); } 85% { transform: translateY(-4%); } }

/* ---------- Gemeinsame Gegenstands-Animationen ---------- */
.zimmer-form [class*="z-"] { transform-box: fill-box; }
.z-wiegen { transform-origin: 50% 0; animation: z-wiegen 5s ease-in-out infinite; }
.z-wiegen.langsam { animation-duration: 8s; }
.z-wiegen.blatt { transform-origin: 50% 100%; animation-duration: 4s; }
.z-wehen { transform-origin: 50% 0; animation: z-wehen 6s ease-in-out infinite; }
.z-wippen { transform-origin: 50% 100%; animation: z-wippen 3.6s ease-in-out infinite; }
.z-blinken { animation: z-blinken 2.4s steps(1) infinite; }
.z-funkeln { transform-origin: 50% 50%; animation: z-funkeln 2.8s ease-in-out infinite; }
.z-drehen { transform-origin: 50% 50%; animation: z-drehen 30s linear infinite; }
.z-drehen.langsam { animation-duration: 90s; }
.z-schweben { animation: z-schweben 4s ease-in-out infinite; }
.z-treiben { animation: z-treiben 26s ease-in-out infinite alternate; }
.z-schwimmen { animation: z-schwimmen 9s ease-in-out infinite alternate; }
.z-blasen { animation: z-blasen 5s ease-in infinite; }
.z-welle { animation: z-welle 3.4s ease-in-out infinite alternate; }
.z-atmen { transform-origin: 50% 100%; animation: z-atmen 3.8s ease-in-out infinite; }
.z-kriechen { animation: z-schwimmen 22s ease-in-out infinite alternate; }
.z-fuehler { transform-origin: 50% 100%; animation: z-fuehler 3s ease-in-out infinite; }
.z-hangeln { transform-origin: 50% 0; animation: z-wiegen 7s ease-in-out infinite; }
.z-glanz { animation: z-glanz 6s ease-in-out infinite; }
.z-globus { animation: z-globus 16s ease-in-out infinite alternate; }
.z-teleskop { transform-origin: 0 100%; animation: z-teleskop 16s ease-in-out infinite alternate; }
.d2 { animation-delay: -1.3s; } .d3 { animation-delay: -2.4s; }
@keyframes z-wiegen { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes z-wehen { 0%, 100% { transform: skewX(-1.6deg) scaleX(1); } 50% { transform: skewX(2deg) scaleX(.97); } }
@keyframes z-wippen { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes z-blinken { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes z-funkeln { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes z-drehen { to { transform: rotate(360deg); } }
@keyframes z-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes z-treiben { from { transform: translateX(-14px); } to { transform: translateX(16px); } }
@keyframes z-schwimmen { from { transform: translateX(-12px); } to { transform: translateX(14px); } }
@keyframes z-blasen { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-34px); opacity: 0; } }
@keyframes z-welle { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes z-atmen { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.05) scaleX(.99); } }
@keyframes z-fuehler { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(14deg); } 90% { transform: rotate(-12deg); } }
@keyframes z-glanz { 0%, 70%, 100% { opacity: .35; } 80% { opacity: 1; } }
@keyframes z-globus { from { transform: translateX(8px); } to { transform: translateX(-34px); } }
@keyframes z-teleskop { from { transform: rotate(-3deg); } to { transform: rotate(5deg); } }
@keyframes z-pulsieren { 0%, 100% { opacity: .35; } 50% { opacity: .65; } }
/* Uhr */
.zeiger-std { animation: z-drehen 43200s linear infinite; animation-delay: -12000s; }
.zeiger-min { animation: z-drehen 3600s linear infinite; animation-delay: -1100s; }
.zeiger-sek { animation: z-drehen 60s steps(60) infinite; }
.zeiger-std, .zeiger-min, .zeiger-sek { transform-box: view-box; transform-origin: 0 0; }
/* Klavier */
.taste-s.s0, .taste-s.s1, .taste-s.s2 { transform-origin: 50% 0; }

/* ---------- Antippen: kurze Reaktionen (Klasse „tipp“ setzt zimmer.js für ein paar Sekunden) ---------- */
.fx { opacity: 0; }
.teil.tipp .fx { opacity: 1; }
.teil.tipp-wackelt.tipp { animation: z-wackeln .8s ease-in-out; }
.teil.tipp-schnurrt.tipp .z-atmen, .teil.tipp-schaukelt.tipp .z-hangeln { animation-duration: .9s; }
.teil.tipp-weht.tipp .z-wehen { animation-duration: 1s; }
.teil.tipp-glanz.tipp, .teil.tipp-schlaegt.tipp { animation: z-hopsen .7s ease-in-out; }
.teil.tipp-schlaegt.tipp .zeiger-min { animation-duration: 6s; animation-timing-function: linear; }
.teil.tipp-fuehler.tipp .z-fuehler { animation-duration: .5s; }
.teil.tipp-bluet.tipp .blume-kaktus { animation: z-bluehen 1.6s ease-in-out; }
.teil.tipp-dreht.tipp .z-globus, .teil.tipp-dreht.tipp .z-teleskop { animation-duration: 2.4s; }
.teil.tipp-futter.tipp .fx-futter { animation: z-futter 2.4s ease-in both; }
.teil.tipp-futter.tipp .z-schwimmen { animation-duration: 2s; }
.teil.tipp-kuckuck.tipp .fx-kuckuck { animation: z-kuckuck 2.8s ease-in-out both; }
.teil.tipp-schreibt.tipp .fx-schreibt { animation: z-einblenden 2.8s both; }
.fx-noten .note { opacity: 0; }
.teil.tipp-spielt.tipp .fx-noten .note { animation: z-note 2.4s ease-out infinite both; }
.fx-noten .n2 { animation-delay: .8s !important; } .fx-noten .n3 { animation-delay: 1.6s !important; }
.teil.tipp-spielt.tipp .taste-s.s0 { animation: z-taste .45s ease-in-out infinite; }
.teil.tipp-spielt.tipp .taste-s.s1 { animation: z-taste .45s ease-in-out infinite .15s; }
.teil.tipp-spielt.tipp .taste-s.s2 { animation: z-taste .45s ease-in-out infinite .3s; }
.teil.tipp-spielt.tipp .z-drehen { animation-duration: 3s; }
@keyframes z-wackeln { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
@keyframes z-hopsen { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.1); } 70% { transform: scale(.97); } }
@keyframes z-bluehen { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.7); } 70% { transform: scale(1.3); } }
@keyframes z-futter { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes z-kuckuck { 0%, 100% { transform: translateY(8px); opacity: 0; } 20%, 75% { transform: translateY(0); opacity: 1; } }
@keyframes z-einblenden { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes z-note { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(14px, -34px) scale(1.1); opacity: 0; } }
@keyframes z-taste { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }

/* ---------- Eule: Tätigkeiten im Zimmer (Ergänzung zu eule.css) ---------- */
/* Hinweis: Alle Animationen der Eule (a-…) stehen in eule.css; hier nur das Zimmer. */

/* ---------- Weniger Bewegung: nur ruhige Zustände ---------- */
@media (prefers-reduced-motion: reduce) {
  .zimmer-steh, .zimmer-huepf, .zimmer-dreh, .himmel, .schleier rect, .glow, .glow-kugel, .glow-pilz, .zimmer-hinten, .zimmer-vorne { transition: none !important; }
  .zimmer-form *, .teil, .zimmer-vorschau * { animation: none !important; }
  .teil.tipp .fx-noten .note { opacity: 1; }
}

/* ---------- Seiten: Startseite, Einrichten-Modus, Shop ---------- */
.zimmer-bereich { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.zimmer-bereich .gruss { margin: 0; }
.zimmer-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.zimmer-links .btn { font-size: 1rem; padding: .2rem .9rem; }
@media (max-width: 575.98px) { .zimmer-links .btn { font-size: .85rem; padding: .1rem .6rem; } .nur-gross { display: none; } }
/* Shop */
.artikel .vorschau.zimmer-v { aspect-ratio: 4 / 3; cursor: default; background: #e8dcff; border-color: #c9b6ff; }
.artikel .vorschau.zimmer-v svg { object-fit: initial; }
.artikel .vorschau.zimmer-v.breit, .option .vorschau.breit { aspect-ratio: 16 / 10; }
.artikel .name .stil { display: block; font-weight: 500; font-size: .8rem; opacity: .75; }
.kategorien.unter-kategorien { padding-top: 0; padding-bottom: .6rem; }
.kat-knopf.klein { font-size: .95rem; padding: .15rem .75rem; box-shadow: 0 2px 0 var(--ink); background: var(--lila-hell); }
.kat-knopf.klein.aktiv { background: var(--lila); color: #fff; text-shadow: 0 2px 0 #0003; }
.neu-balken { background: var(--sonne); border: 3px solid var(--ink); border-radius: 1rem; padding: .4rem .9rem; margin: 0 0 1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.shop-hinweis-zeile { margin: 0 .25rem .8rem; font-size: .95rem; }
/* Einrichten-Modus */
.einrichten-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0 .6rem; }
.einrichten-kopf h1 { margin: 0; font-size: 1.7rem; }
.einrichten-raster { display: flex; flex-direction: column; gap: .8rem; }
.einrichten-raster .zimmer-karte { position: sticky; top: 3.7rem; z-index: 6; padding-top: .3rem; }
@media (min-width: 992px) { .einrichten-raster .zimmer-karte { position: static; } }
.einrichten-tafel { min-width: 0; }
.slot-leiste { display: flex; gap: .5rem; overflow-x: auto; padding: .4rem .2rem .8rem; scrollbar-width: none; }
.slot-leiste::-webkit-scrollbar { display: none; }
.slot-knopf { flex: none; min-height: 3rem; display: flex; align-items: center; gap: .35rem; background: #fff; border: 3px solid var(--ink); border-radius: 2rem; padding: .25rem .9rem; font: inherit; font-weight: 600; font-size: 1.02rem; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.slot-knopf[aria-pressed="true"] { background: var(--pink); color: #fff; text-shadow: 0 2px 0 #0003; }
.slot-tafel { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.slot-tafel.raeume { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.option { display: flex; flex-direction: column; gap: .3rem; align-items: stretch; text-align: center; background: #fff; border: 3px solid var(--ink); border-radius: 1.1rem; box-shadow: 0 4px 0 var(--ink); padding: .45rem; font: inherit; color: var(--ink); min-height: 6rem; cursor: pointer; }
.option .vorschau { aspect-ratio: 4 / 3; border-radius: .8rem; overflow: hidden; background: #e8dcff; border: 2px solid #c9b6ff; }
.option .vorschau svg { display: block; width: 100%; height: 100%; }
.option .name { font-weight: 600; font-size: .98rem; line-height: 1.1; }
.option[aria-pressed="true"] { background: #d3f9e5; transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.option[aria-pressed="true"] .name::after { content: " ✓"; }
.option:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.option.leer-option { justify-content: center; min-height: 5rem; font-weight: 600; }
.option.gesperrt-option { opacity: .85; cursor: default; }
/* passt nicht in dieses Zimmer: ausgegraut, mit freundlichem Grund (antippen zeigt ihn auch als Meldung – der Server entscheidet) */
.option.passt-nicht { background: #f1eef7; border-color: #9c92ad; color: #6d6580; box-shadow: 0 4px 0 #9c92ad; }
.option.passt-nicht .vorschau svg { filter: grayscale(1); opacity: .55; }
.option .grund { font-size: .8rem; font-weight: 500; line-height: 1.15; }
.option .grund.geschenk { opacity: .75; }
.option.gesperrt-option .vorschau svg { filter: grayscale(1); opacity: .6; }
a.option { text-decoration: none; }
.slot-fuss { margin-top: .8rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.slot-fuss .btn { font-size: 1rem; padding: .2rem .9rem; }
.slot-meldung { min-height: 1.6rem; font-weight: 600; margin: .3rem .2rem 0; }

/* ---------- Eulen-Pflege: kleines Pflegefeld unter dem Zimmer (freundlich, kein Alarm) ---------- */
.pflege { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; max-width: 1000px; margin: .4rem auto 0; padding: .35rem .8rem; width: 100%; background: #fff; border: 3px solid var(--ink); border-radius: 1.2rem; box-shadow: 0 3px 0 var(--ink); }
.pflege-gesicht { display: flex; align-items: center; gap: .5rem; flex: none; }
.pflege-emoji { font-size: 1.9rem; line-height: 1; }
.pflege-text { display: flex; flex-direction: column; line-height: 1.1; }
.pflege-text small { font-size: .85rem; font-weight: 500; }
.pflege-herzen { font-size: .8rem; letter-spacing: .05rem; white-space: nowrap; }
.pflege-leisten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem .9rem; list-style: none; margin: 0; padding: 0; flex: 1 1 22rem; }
.pflege-leiste { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .35rem; align-items: center; min-width: 0; font-size: .85rem; line-height: 1.1; }
.pflege-symbol { grid-row: 1 / 3; font-size: 1.2rem; }
.pflege-wort { font-weight: 600; }
.pflege-balken { display: block; height: .55rem; border: 2px solid var(--ink); border-radius: 1rem; background: var(--lila-hell); overflow: hidden; }
.pflege-fuell { display: block; height: 100%; border-radius: 1rem; transition: width .8s ease; background: var(--mint); }
.pflege-hunger .pflege-fuell { background: #ff8787; } .pflege-wissen .pflege-fuell { background: #74c0fc; } .pflege-spass .pflege-fuell { background: var(--sonne); } .pflege-energie .pflege-fuell { background: var(--mint); }
@media (max-width: 575.98px) { .pflege { padding: .3rem .6rem; } .pflege-leisten { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; } .pflege-herzen { display: none; } .pflege-emoji { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .pflege-fuell { transition: none; } }

/* ---------- Wohnung: Grundriss, Zwecke ---------- */
.raum-zeile { margin: .2rem .2rem .6rem; font-size: 1.02rem; }
.tafel-titel { font-size: 1.15rem; font-weight: 700; margin: .9rem .2rem .45rem; }
.gr-gruppe { margin-bottom: .5rem; min-width: 0; }
@media (min-width: 768px) { .grundriss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1rem; } .grundriss .tafel-titel { grid-column: 1 / -1; } .gr-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gr-titel { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin: 0 .2rem .25rem; }
.gr-reihe { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); }
.gr-zimmer { display: flex; flex-direction: column; gap: .15rem; align-items: stretch; text-align: center; text-decoration: none; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 1rem;
  box-shadow: 0 3px 0 var(--ink); padding: .3rem; min-height: 3rem; }
.gr-zimmer:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.gr-zimmer.aktiv { background: #d3f9e5; transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.gr-zimmer.gesperrt { background: #f1eef7; border-color: #9c92ad; color: #6d6580; box-shadow: 0 3px 0 #9c92ad; }
.gr-bild { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: .6rem; overflow: hidden; background: #e8dcff; border: 2px solid #c9b6ff; }
.gr-bild svg { display: block; width: 100%; height: 100%; }
.gr-zimmer.gesperrt .gr-bild svg { filter: grayscale(1); opacity: .5; }
.gr-eule { position: absolute; right: .15rem; bottom: .05rem; font-size: 1.05rem; line-height: 1; filter: drop-shadow(0 1px 0 #fff); }
.gr-schloss { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.gr-name { font-size: .85rem; font-weight: 600; line-height: 1.1; }
.gr-info { font-size: .8rem; min-height: 1.1rem; line-height: 1.1; }
.zweck-reihe { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr)); }
.zweck-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; background: #fff; border: 3px solid var(--ink); border-radius: 1.2rem; box-shadow: 0 4px 0 var(--ink);
  padding: .5rem .3rem; min-height: 6rem; font: inherit; color: var(--ink); cursor: pointer; }
.zweck-kachel .zweck-emoji { font-size: 2.3rem; line-height: 1.1; }
.zweck-kachel .zweck-titel { font-weight: 700; font-size: 1.02rem; }
.zweck-kachel small { font-size: .78rem; line-height: 1.1; opacity: .8; }
.zweck-kachel[aria-pressed="true"] { background: #d3f9e5; transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.zweck-kachel:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.zweck-hinweise { list-style: none; margin: .4rem .2rem 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; font-weight: 600; }
.zweck-hinweise li:not(.versteckt)::before { content: "💡 "; }
.passt, .passt-hinweis { display: block; font-size: .78rem; font-weight: 500; line-height: 1.15; opacity: .85; }
.passt-hinweis { opacity: 1; color: #8a4b00; }
@media (max-width: 575.98px) { .gr-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; } .gr-name { font-size: .75rem; } .zweck-kachel { min-height: 5rem; } .zweck-kachel .zweck-emoji { font-size: 1.9rem; } }
@media (max-width: 575.98px) { .slot-tafel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .option .name { font-size: .9rem; } }