/* TYT Japan — Kulisse für die Zwillings-Oberfläche. Geltungsraum JP. Nur die App (website/app/), nicht die Marketing-Website - die bleibt im sachlichen TYT-Blau (website/css/style.css unangetastet). Schichtung (Hintergrund -> Vordergrund): 1. body-Hintergrund: Himmel/Fuji/Torii/Sakura (diese Datei) 2. Kopf- und Fußzeile: durchscheinend ("Milchglas"), damit die Kulisse durchschimmert, Text/Buttons aber lesbar bleiben (app.css setzt sie blickdicht; diese Datei lädt danach und überschreibt gezielt) 3. Gesprächsverlauf + Nachrichten-Blasen: bleiben blickdicht wie bisher (app.css unangetastet) - Lesbarkeit des eigentlichen Chat-Texts geht vor Atmosphäre, keine Kompromisse dort 4. Tsuru (css/tsuru_rigging.css): sitzt in der Fußzeile, unverändert 5. treibende Sakura-Blüten: position fixed, ÜBER allem (auch über der Fußzeile), damit sie wie gewünscht an den Chatblasen vorbeigleiten können - siehe .sakura-treiben unten Bereit für ein hochauflösendes Artwork: body-image versucht zuerst assets/japan_soul_bg.png (existiert aktuell nicht), fällt ohne Zusatzaufwand auf assets/japan_scenery.svg zurück - reines CSS-Verhalten (mehrere background-image-Werte, das erste verfügbare oben), kein JS nötig für diesen Fallback. */ /* Milchglas-Kopf/Fußzeile: durchscheinend statt blickdicht, mit Weichzeichner für Lesbarkeit. @supports-Fallback für Browser ohne backdrop-filter. */ .kopf, .eingabe { background: rgba(255, 255, 255, .76); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .kopf, .eingabe { background: var(--karte); } } /* ---------- Treibende Sakura-Blüten ---------- */ .sakura-treiben { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; } .sakura-blatt { position: absolute; top: -5%; width: 10px; height: 10px; border-radius: 60% 5% 60% 5%; background: #E8A9BC; opacity: 0; animation-name: sakura-fallen; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } /* Acht Blüten, bewusst unregelmäßig in Position/Dauer/Verzögerung - das ergibt den "unregelmäßige Abstände"-Effekt, obwohl CSS keinen echten Zufall kennt: rein durch unterschiedliche, von Hand gewählte Werte. */ .sakura-blatt:nth-child(1) { left: 8%; width: 8px; height: 8px; animation-duration: 11s; animation-delay: 0s; } .sakura-blatt:nth-child(2) { left: 22%; width: 11px; height: 11px; animation-duration: 14s; animation-delay: 2.4s; } .sakura-blatt:nth-child(3) { left: 38%; width: 9px; height: 9px; animation-duration: 9.5s; animation-delay: 5s; } .sakura-blatt:nth-child(4) { left: 55%; width: 10px; height: 10px; animation-duration: 13s; animation-delay: 1.2s; } .sakura-blatt:nth-child(5) { left: 68%; width: 7px; height: 7px; animation-duration: 10s; animation-delay: 7s; } .sakura-blatt:nth-child(6) { left: 80%; width: 12px; height: 12px; animation-duration: 15s; animation-delay: 3.6s; } .sakura-blatt:nth-child(7) { left: 91%; width: 8px; height: 8px; animation-duration: 12s; animation-delay: 8.5s; } .sakura-blatt:nth-child(8) { left: 46%; width: 9px; height: 9px; animation-duration: 16s; animation-delay: 10s; } @keyframes sakura-fallen { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 8% { opacity: .85; } 50% { transform: translate(24px, 50vh) rotate(140deg); } 92% { opacity: .7; } 100% { transform: translate(-16px, 108vh) rotate(280deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sakura-blatt { animation: none !important; opacity: 0; } } /* ========================================================================= Die lebendige Bühne (js/japan_zeit.js setzt data-tageszeit und data-jahreszeit auf , nach der Uhr JAPANS - Asia/Tokyo). Tageszeit färbt den Himmel (nur Ebene 1 des Hintergrund-Stapels), Jahreszeit bestimmt Charakter und Farbe der treibenden Teilchen - und im Querformat auch die Kulisse selbst (assets/kulisse/). */ /* Nachts treiben die Teilchen ruhiger und zurückhaltender. */ body[data-tageszeit="nacht"] .sakura-blatt { opacity: 0; animation-duration: 20s; } /* ---------- Jahreszeit: Charakter der treibenden Teilchen ---------- fruehling = Sakura-Rosa (Grundzustand, definiert bei .sakura-blatt). */ body[data-jahreszeit="sommer"] .sakura-blatt { background: #9CBF7E; /* junge Blätter */ border-radius: 70% 10% 70% 10%; } body[data-jahreszeit="herbst"] .sakura-blatt { background: #D98A4B; /* Momiji-Laub */ border-radius: 55% 15% 55% 15%; } body[data-jahreszeit="winter"] .sakura-blatt { background: #FFFFFF; /* Schnee */ border-radius: 50%; box-shadow: 0 0 4px rgba(255, 255, 255, .8); } /* Sommernacht: aus Blättern werden Glühwürmchen (蛍, Hotaru) - kleine, warm glimmende Punkte, die langsam treiben. Übersteuert bewusst das nächtliche Ausblenden der Teilchen. */ body[data-jahreszeit="sommer"][data-tageszeit="nacht"] .sakura-blatt { opacity: 0; width: 5px; height: 5px; background: #FFE9A6; border-radius: 50%; box-shadow: 0 0 8px 3px rgba(255, 226, 130, .65); animation-name: hotaru-treiben; animation-duration: 16s; } @keyframes hotaru-treiben { 0% { transform: translate(0, 30vh); opacity: 0; } 12% { opacity: .9; } 35% { transform: translate(30px, 55vh); opacity: .35; } 55% { transform: translate(-20px, 45vh); opacity: .95; } 78% { transform: translate(18px, 65vh); opacity: .3; } 100% { transform: translate(-10px, 50vh); opacity: 0; } } /* ========================================================================= DIE KULISSEN-MATRIX (saniert am 20.08.2026 - eine Sektion, keine Fallen) Warum diese Sektion existiert: Die Kulissen-Regeln waren über vier Blöcke gewachsen, und JEDE Regel wiederholte den kompletten Hintergrund-Stapel (Tönung + Kulisse + SVG-Rückfall). Dadurch konnte eine Regel, die nur die Tönung meinte, die Kulisse einer anderen still mit ausknipsen - genau so entstand die Vollmond-Regression, die erst die 60-Sekunden-Abnahme fand (und davor schon die Mond-Overlay-Falle). Spezifität und Reihenfolge entschieden, wer gewinnt: unmöglich im Kopf zu behalten. Die Sanierung baut auf zwei Ideen: 1. ZWEI VARIABLEN, EIN STAPEL. --himmelston und --kulisse sind entkoppelt; den Stapel selbst baut genau EINE Regel (K0). Eine Tönungs-Regel kann eine Kulisse jetzt nicht mehr zerstören - sie kennt sie gar nicht. 2. ERSCHÖPFENDE MATRIX, EINHEITLICHE SPEZIFITÄT. Je Format sind alle 4 Jahreszeiten × 4 Tageszeiten einzeln ausgeschrieben, jede Regel mit derselben Spezifität (0,2,1). Für jede Lage ist damit genau EINE Regel zuständig - es gibt nichts mehr zu überschreiben, und die Reihenfolge innerhalb der Matrix ist bedeutungslos. Die Matrix ist aus dem GEMESSENEN Verhalten der Vorgänger-Fassung erzeugt (128 Lagen im Browser abgelesen, Quer- und Hochformat) - die Sanierung ist ausdrücklich verhaltensneutral, damit der laufende Langzeit-Audit gültig bleibt. js/japan_welt.test.js hält die Struktur künftig wach. Zwei Eigenheiten, die dabei sichtbar wurden und BEWUSST erhalten sind: - Im Querformat tragen nur Frühling und Sommer die goldene Morgen-Tönung mit der Frühlingsmorgen-Kulisse; Herbst und Winter zeigen morgens ihre Tageskulisse ohne Tönung. Das war vorher eine Nebenwirkung der Kaskade - jetzt steht es explizit da. - Alle vier Nächte tragen in beiden Formaten gemalte Monde. Der live gerechnete #mond weicht ihnen deshalb überall (K4); er bleibt für Hochformat-Lagen ohne eigene Nachtkulisse erhalten. Aufbau: K0 Grundstapel · K1 Rückfall ohne Jahreszeit · K2 Querformat · K3 Hochformat · K4 der live gerechnete Mond. ========================================================================= */ /* ---------- K0: der Grundstapel (die EINZIGE background-image-Regel) ------ Drei Ebenen: [1] Himmelston (Tageszeit/Format), [2] Kulissen-Bild, [3] SVG-Rückfall, falls ein Bild fehlt. Die Tönung lebt bewusst IM Hintergrund-Stapel - sie färbt nur die Bühne, nie Karten oder Text. */ body { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/japan_soul_bg.png"); background-image: var(--himmelston), var(--kulisse), url("../assets/japan_scenery.svg"); background-size: auto, cover, cover; /* x/y als eigene Längsformen (nicht das background-position-Kurzformat) - so kann japan_scenery.js nur die Y-Komponente für den Parallax-Effekt verschieben, ohne die Zentrierung anzufassen. */ background-position-x: center, center, center; background-position-y: bottom, bottom, bottom; background-repeat: no-repeat, no-repeat, no-repeat; background-color: var(--nebel); /* Sicherheitsnetz, falls alle Bilder fehlen */ } /* ---------- K1: Rückfall, solange keine Jahreszeit gesetzt ist ------------ Gilt nur in dem kurzen Moment vor dem ersten Lauf von js/japan_zeit.js (und in Browsern ohne JS). Sobald die Jahreszeit steht, übernimmt die Matrix - deren Selektoren sind spezifischer. */ body[data-tageszeit="morgen"] { --himmelston: linear-gradient(180deg, rgba(255, 213, 170, .30), rgba(255, 244, 235, .06) 55%); } body[data-tageszeit="abend"] { --himmelston: linear-gradient(180deg, rgba(255, 150, 90, .32), rgba(122, 62, 100, .24)); } body[data-tageszeit="nacht"] { --himmelston: linear-gradient(180deg, rgba(18, 26, 68, .55), rgba(9, 13, 38, .48)); } /* ---------- K2: Querformat (Desktop/Tablet) ------------------------------ Breite Aquarell-Kulissen aus assets/kulisse/. Abends teilen sich alle Jahreszeiten die Abendrot-Kulisse (der Himmel dominiert die Stimmung). */ @media (orientation: landscape) { /* Rückfall ohne Jahreszeit (siehe K1). */ body { --kulisse: url("../assets/kulisse/tag-quer.png"); } body[data-tageszeit="morgen"] { --himmelston: linear-gradient(180deg, rgba(255, 213, 170, .25), rgba(255, 244, 235, .05) 55%); --kulisse: url("../assets/kulisse/fruehling-morgen-quer.png"); } body[data-tageszeit="abend"] { --himmelston: linear-gradient(180deg, rgba(255, 150, 90, .18), rgba(122, 62, 100, .14)); --kulisse: url("../assets/kulisse/abend-quer.png"); } body[data-tageszeit="nacht"] { --himmelston: linear-gradient(180deg, rgba(18, 26, 68, .58), rgba(9, 13, 38, .5)); --kulisse: url("../assets/kulisse/abend-quer.png"); } /* Frühling */ body[data-jahreszeit="fruehling"][data-tageszeit="morgen"] { --himmelston: linear-gradient(180deg, rgba(255, 213, 170, .25), rgba(255, 244, 235, .05) 55%); --kulisse: url("../assets/kulisse/fruehling-morgen-quer.png"); } body[data-jahreszeit="fruehling"][data-tageszeit="tag"] { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/kulisse/fruehling-tag-quer.jpg"); } body[data-jahreszeit="fruehling"][data-tageszeit="abend"] { --himmelston: linear-gradient(180deg, rgba(255, 150, 90, .18), rgba(122, 62, 100, .14)); --kulisse: url("../assets/kulisse/abend-quer.png"); } body[data-jahreszeit="fruehling"][data-tageszeit="nacht"] { --himmelston: linear-gradient(180deg, rgba(18, 26, 68, .16), rgba(9, 13, 38, .12)); --kulisse: url("../assets/kulisse/fruehling-nacht-quer.jpg"); } /* Sommer */ body[data-jahreszeit="sommer"][data-tageszeit="morgen"] { --himmelston: linear-gradient(180deg, rgba(255, 213, 170, .25), rgba(255, 244, 235, .05) 55%); --kulisse: url("../assets/kulisse/fruehling-morgen-quer.png"); } body[data-jahreszeit="sommer"][data-tageszeit="tag"] { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/kulisse/sommer-bambus-quer.png"); } body[data-jahreszeit="sommer"][data-tageszeit="abend"] { --himmelston: linear-gradient(180deg, rgba(255, 150, 90, .18), rgba(122, 62, 100, .14)); --kulisse: url("../assets/kulisse/abend-quer.png"); } body[data-jahreszeit="sommer"][data-tageszeit="nacht"] { --himmelston: linear-gradient(180deg, rgba(18, 26, 68, .16), rgba(9, 13, 38, .12)); --kulisse: url("../assets/kulisse/sommer-nacht-quer.jpg"); } /* Herbst */ body[data-jahreszeit="herbst"][data-tageszeit="morgen"] { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/kulisse/herbst-tag-quer.jpg"); } body[data-jahreszeit="herbst"][data-tageszeit="tag"] { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/kulisse/herbst-tag-quer.jpg"); } body[data-jahreszeit="herbst"][data-tageszeit="abend"] { --himmelston: linear-gradient(180deg, rgba(255, 150, 90, .18), rgba(122, 62, 100, .14)); --kulisse: url("../assets/kulisse/abend-quer.png"); } body[data-jahreszeit="herbst"][data-tageszeit="nacht"] { --himmelston: linear-gradient(180deg, rgba(18, 26, 68, .16), rgba(9, 13, 38, .12)); --kulisse: url("../assets/kulisse/herbst-nacht-quer.jpg"); } /* Winter */ body[data-jahreszeit="winter"][data-tageszeit="morgen"] { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/kulisse/winter-quer.png"); } body[data-jahreszeit="winter"][data-tageszeit="tag"] { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/kulisse/winter-quer.png"); } body[data-jahreszeit="winter"][data-tageszeit="abend"] { --himmelston: linear-gradient(180deg, rgba(255, 150, 90, .18), rgba(122, 62, 100, .14)); --kulisse: url("../assets/kulisse/abend-quer.png"); } body[data-jahreszeit="winter"][data-tageszeit="nacht"] { --himmelston: linear-gradient(180deg, rgba(18, 26, 68, .16), rgba(9, 13, 38, .12)); --kulisse: url("../assets/kulisse/winter-nacht-quer.jpg"); } } /* ---------- K3: Hochformat (Handy, die Hauptbühne) ----------------------- Eigene Aquarell-Hochformate; morgens und abends trägt der Hochformat-Hintergrund mit Tönung, tags und nachts je Jahreszeit ein eigenes Bild. */ @media (orientation: portrait) { /* Frühling */ body[data-jahreszeit="fruehling"][data-tageszeit="morgen"] { --himmelston: linear-gradient(180deg, rgba(255, 213, 170, .30), rgba(255, 244, 235, .06) 55%); --kulisse: url("../assets/japan_soul_bg.png"); } body[data-jahreszeit="fruehling"][data-tageszeit="tag"] { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/kulisse/fruehling-tag-hoch.jpg"); } body[data-jahreszeit="fruehling"][data-tageszeit="abend"] { --himmelston: linear-gradient(180deg, rgba(255, 150, 90, .32), rgba(122, 62, 100, .24)); --kulisse: url("../assets/japan_soul_bg.png"); } body[data-jahreszeit="fruehling"][data-tageszeit="nacht"] { --himmelston: linear-gradient(180deg, rgba(18, 26, 68, .14), rgba(9, 13, 38, .1)); --kulisse: url("../assets/kulisse/fruehling-nacht-hoch.jpg"); } /* Sommer */ body[data-jahreszeit="sommer"][data-tageszeit="morgen"] { --himmelston: linear-gradient(180deg, rgba(255, 213, 170, .30), rgba(255, 244, 235, .06) 55%); --kulisse: url("../assets/japan_soul_bg.png"); } body[data-jahreszeit="sommer"][data-tageszeit="tag"] { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/kulisse/sommer-tag-hoch.jpg"); } body[data-jahreszeit="sommer"][data-tageszeit="abend"] { --himmelston: linear-gradient(180deg, rgba(255, 150, 90, .32), rgba(122, 62, 100, .24)); --kulisse: url("../assets/japan_soul_bg.png"); } body[data-jahreszeit="sommer"][data-tageszeit="nacht"] { --himmelston: linear-gradient(180deg, rgba(18, 26, 68, .14), rgba(9, 13, 38, .1)); --kulisse: url("../assets/kulisse/sommer-nacht-hoch.jpg"); } /* Herbst */ body[data-jahreszeit="herbst"][data-tageszeit="morgen"] { --himmelston: linear-gradient(180deg, rgba(255, 213, 170, .30), rgba(255, 244, 235, .06) 55%); --kulisse: url("../assets/japan_soul_bg.png"); } body[data-jahreszeit="herbst"][data-tageszeit="tag"] { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/kulisse/herbst-tag-hoch.jpg"); } body[data-jahreszeit="herbst"][data-tageszeit="abend"] { --himmelston: linear-gradient(180deg, rgba(255, 150, 90, .32), rgba(122, 62, 100, .24)); --kulisse: url("../assets/japan_soul_bg.png"); } body[data-jahreszeit="herbst"][data-tageszeit="nacht"] { --himmelston: linear-gradient(180deg, rgba(18, 26, 68, .14), rgba(9, 13, 38, .1)); --kulisse: url("../assets/kulisse/herbst-nacht-hoch.jpg"); } /* Winter */ body[data-jahreszeit="winter"][data-tageszeit="morgen"] { --himmelston: linear-gradient(180deg, rgba(255, 213, 170, .30), rgba(255, 244, 235, .06) 55%); --kulisse: url("../assets/japan_soul_bg.png"); } body[data-jahreszeit="winter"][data-tageszeit="tag"] { --himmelston: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); --kulisse: url("../assets/kulisse/winter-tag-hoch.jpg"); } body[data-jahreszeit="winter"][data-tageszeit="abend"] { --himmelston: linear-gradient(180deg, rgba(255, 150, 90, .32), rgba(122, 62, 100, .24)); --kulisse: url("../assets/japan_soul_bg.png"); } body[data-jahreszeit="winter"][data-tageszeit="nacht"] { --himmelston: linear-gradient(180deg, rgba(18, 26, 68, .14), rgba(9, 13, 38, .1)); --kulisse: url("../assets/kulisse/winter-nacht-hoch.jpg"); } } /* ---------- K4: der live gerechnete Mond --------------------------------- Die Sichtbarkeit des Mondes gehört zu seiner Gestalt und steht deshalb geschlossen in der Mond-Sektion weiter unten - EINE Regel, kein Spezifitäts-Kniff, kein Format-Sonderfall. Hier steht sie bewusst NICHT: eine Kulissen-Regel soll nie über ein Overlay entscheiden. (Grundsatz 5: Overlays gehören in freie Himmelszonen - der Mond hängt oben mittig, die einzige in allen Kulissen offene Zone.) */ /* ========================================================================= Seltene Besucher (js/besucher.js): kleine, stille Momente in der Kulisse. Stapel-Feinheit (im Browser gefunden): z-index -1 hätte die Bühne HINTER den body-Hintergrund gelegt (der Body malt seinen Hintergrund über negativ gestapelte Fixed-Elemente) - Besucher wären unsichtbar. Deshalb: Bühne auf z-index 1, und Kopfzeile + Gesprächsverlauf heben sich mit z-index 2 ausdrücklich darüber. Die Fußzeile bleibt unangetastet (ihre Sprechblase muss über den Sakura-Blüten z-5 liegen); Besucher bewegen sich ohnehin in den oberen zwei Dritteln der Bühne. */ #besucherBuehne { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .kopf, main { position: relative; z-index: 2; } /* ---------- Koi: Ringe auf dem Wasser + kurzer Rückenbogen ---------- */ .besucher-koi { position: absolute; width: 0; height: 0; } .koi-ring { position: absolute; left: -9px; top: -4px; width: 18px; height: 8px; /* flache Ellipse = Wasser-Perspektive */ border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; opacity: 0; animation: koi-ring 2.6s ease-out forwards; } @keyframes koi-ring { 0% { transform: scale(.4); opacity: 0; } 15% { opacity: .8; } 100% { transform: scale(4.2); opacity: 0; } } .koi-ruecken { position: absolute; left: -12px; top: -6px; width: 24px; height: 9px; background: linear-gradient(90deg, #E8734A 55%, #F5F0E8 55%); border-radius: 50% 50% 45% 45%; opacity: 0; animation: koi-bogen 2.2s ease-in-out .4s forwards; } @keyframes koi-bogen { 0% { transform: translateY(4px) rotate(-6deg) scaleY(.3); opacity: 0; } 30% { transform: translateY(-1px) rotate(2deg) scaleY(1); opacity: .95; } 60% { transform: translateY(0) rotate(6deg) scaleY(.9); opacity: .9; } 100% { transform: translateY(5px) rotate(10deg) scaleY(.25); opacity: 0; } } /* ---------- Sternschnuppe (nur nachts geplant) ---------- */ .besucher-sternschnuppe { position: absolute; width: 90px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,250,225,.95)); border-radius: 2px; transform: rotate(24deg); opacity: 0; animation: sternschnuppe-zieht 1.5s ease-in forwards; } @keyframes sternschnuppe-zieht { 0% { transform: rotate(24deg) translateX(0); opacity: 0; } 12% { opacity: .95; } 100% { transform: rotate(24deg) translateX(46vw); opacity: 0; } } /* ---------- Vogelzug: kleine Silhouetten gleiten übers Bild ---------- */ .besucher-vogelzug { position: absolute; left: -80px; animation: vogelzug-gleitet 9s linear forwards; } .zug-vogel { position: absolute; width: 12px; height: 5px; animation: vogel-schlag 1s ease-in-out infinite; } .zug-vogel::before, .zug-vogel::after { content: ""; position: absolute; top: 2px; width: 7px; height: 2px; background: rgba(46, 54, 74, .78); border-radius: 2px 2px 0 0; } .zug-vogel::before { left: 0; transform: rotate(-24deg); transform-origin: right center; } .zug-vogel::after { right: 0; transform: rotate(24deg); transform-origin: left center; } @keyframes vogelzug-gleitet { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 160px)); } } @keyframes vogel-schlag { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1.5px) scaleY(.72); } } /* ---------- Tier-Sprites (Steckplätze, aktiv sobald Bilder existieren) ---------- */ .besucher-tier { position: absolute; bottom: 31vh; /* auf dem Uferweg der Kulisse */ left: -140px; height: 72px; width: auto; animation: tier-spaziert 14s linear forwards; } .besucher-tier.von-rechts { left: auto; right: -140px; transform: scaleX(-1); animation-name: tier-spaziert-rueckwaerts; } @keyframes tier-spaziert { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 300px)); } } @keyframes tier-spaziert-rueckwaerts { from { transform: scaleX(-1) translateX(0); } to { transform: scaleX(-1) translateX(calc(100vw + 300px)); } } @media (prefers-reduced-motion: reduce) { #besucherBuehne { display: none; } } /* ========================================================================= Der Mond (js/japan_zeit.js rechnet die echte Phase lokal und setzt data-mond auf : neumond | zunehmend | voll | abnehmend). Sichtbar nur nachts; Neumond bleibt unsichtbar. Die Sichel entsteht durch eine versetzte Schattenscheibe im Mond selbst - kein Bild noetig. */ #mond { position: absolute; top: 9vh; /* Oben MITTE statt oben rechts (19.08.2026, Baumeister-Befund): oben rechts stehen in fast allen Kulissen Aeste, Bambus oder Schneezweige (Montage-Pruefung aller Kulissen + Hochformat-Hintergrund) - der Mond hing vor dem Baum. Die offene Himmelszone liegt ueberall oben mittig. */ left: 50%; margin-left: -23px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #FDF6E3, #E8E0C8 62%, #CFC7AC); box-shadow: 0 0 24px 8px rgba(253, 246, 225, .35); overflow: hidden; display: none; } #mond > i { position: absolute; inset: 0; border-radius: 50%; background: rgba(15, 20, 50, .92); /* Schattenscheibe fuer die Sichel */ display: none; } /* Sichtbarkeit: HIER und nur hier. Der Mond ist grundsätzlich verborgen (display:none oben). Er würde nachts erscheinen - aber seit alle acht Nachtkulissen (vier Jahreszeiten × zwei Formate) gemalte Monde tragen, bliebe er auch dann verborgen: zwei Monde am Himmel wären ein Fehler. Früher stand hier eine Kette aus vier Regeln (nachts einblenden, Neumond ausblenden, und in JEDEM Format-Block eine spezifischere Gegenregel) - wer gewann, entschied die Spezifität. Genau diese Falle ist am 20.08.2026 aufgeräumt worden. Kommt je eine Nachtkulisse OHNE gemalten Mond dazu, wird sie hier geöffnet - z. B. body[data-tageszeit="nacht"][data-jahreszeit="X"] #mond { display: block; } - und die Phasen-Regeln unten greifen unverändert weiter. */ body[data-mond="zunehmend"] #mond > i { display: block; transform: translateX(-34%); } body[data-mond="abnehmend"] #mond > i { display: block; transform: translateX(34%); } /* Vollmond: keine Schattenscheibe, dafuer staerkeres Leuchten. */ body[data-mond="voll"] #mond { box-shadow: 0 0 34px 12px rgba(253, 246, 225, .55); } /* ========================================================================= Onsen-Dampf (heisse Quelle): erscheint, wenn der Japanmakak badet (js/besucher.js, Winter). Drei weiche Dampfsaeulen steigen auf. */ .besucher-onsen { position: absolute; bottom: 30vh; width: 0; height: 0; } .onsen-dampf { position: absolute; bottom: 0; width: 14px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(5px); opacity: 0; animation: dampf-steigt 3.4s ease-in-out infinite; } .onsen-dampf:nth-child(1) { left: -18px; animation-delay: 0s; } .onsen-dampf:nth-child(2) { left: 0; animation-delay: 1.1s; height: 42px; } .onsen-dampf:nth-child(3) { left: 16px; animation-delay: 2.2s; } @keyframes dampf-steigt { 0% { transform: translateY(6px) scale(.7); opacity: 0; } 25% { opacity: .8; } 100% { transform: translateY(-46px) scale(1.25); opacity: 0; } } /* ========================================================================= Tanuki-Verwandlung: Blaetter-Puff (der Gestaltwandler der Folklore verschwindet mit einem Poff statt einfach weiterzulaufen). */ .verwandlungs-puff { position: absolute; width: 0; height: 0; } .puff-rauch { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .8); filter: blur(3px); animation: puff-rauch 1s ease-out forwards; } @keyframes puff-rauch { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } } .puff-blatt { position: absolute; width: 9px; height: 9px; border-radius: 70% 10% 70% 10%; background: #9CBF7E; animation: puff-blatt 1.1s ease-out forwards; } @keyframes puff-blatt { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--wx, 30px), var(--wy, -34px)) rotate(220deg); opacity: 0; } } /* ========================================================================= Makak badet: eigener Laufweg - zur Mitte, verweilen (baden), weiter. Dauer 19s; der Dampf (oben) erscheint waehrend der Verweilphase. */ .besucher-tier.tier-badet { animation-name: tier-badet; animation-duration: 19s; } @keyframes tier-badet { 0% { transform: translateX(0); } 34% { transform: translateX(calc(44vw + 70px)); } 40% { transform: translateX(calc(44vw + 70px)) translateY(-3px); } 48% { transform: translateX(calc(44vw + 70px)) translateY(0); } 56% { transform: translateX(calc(44vw + 70px)) translateY(-3px); } 64% { transform: translateX(calc(44vw + 70px)) translateY(0); } 72% { transform: translateX(calc(44vw + 70px)) translateY(-2px); } 100% { transform: translateX(calc(100vw + 300px)); } } /* Tanuki auf Verwandlungskurs: laeuft zur Puff-Stelle und bleibt stehen (das Verschwinden uebernimmt js/besucher.js im richtigen Moment). */ .besucher-tier.tier-verwandelt { animation-name: tier-verwandelt; animation-duration: 8s; animation-fill-mode: forwards; } @keyframes tier-verwandelt { from { transform: translateX(0); } to { transform: translateX(calc(58vw + 140px)); } } /* ========================================================================= Atmosphären-Effekte (19.08.2026): strahlender Mond, glitzerndes Wasser, Morgennebel. Alle Endlos-Animationen nur transform/opacity - der Mond-Schein liegt als eigene ::after-Scheibe (Skalierung/Deckkraft), nicht als animierter box-shadow (der wäre nicht kompositierbar). */ /* ---------- Der Mond strahlt: atmender Lichthof ---------- */ #mond { overflow: visible; } #mond::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(253, 246, 225, .5), rgba(253, 246, 225, 0) 70%); animation: mond-atmen 5.5s ease-in-out infinite; } body[data-mond="voll"] #mond::after { inset: -26px; animation-duration: 4.5s; background: radial-gradient(circle, rgba(253, 246, 225, .65), rgba(253, 246, 225, 0) 72%); } @keyframes mond-atmen { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.18); opacity: .95; } } /* ---------- Wasserglitzern: treibende Lichtreflexe auf dem See ---------- */ #wasserGlitzern { position: absolute; left: 0; right: 0; top: 45vh; height: 12vh; pointer-events: none; } #wasserGlitzern i { position: absolute; height: 2.5px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8), rgba(255,255,255,0)); filter: blur(.6px); opacity: 0; animation: glitzern 7s ease-in-out infinite; } #wasserGlitzern i:nth-child(1) { left: 18%; width: 22%; top: 15%; animation-delay: 0s; } #wasserGlitzern i:nth-child(2) { left: 52%; width: 16%; top: 48%; animation-delay: 2.3s; animation-duration: 8.5s; } #wasserGlitzern i:nth-child(3) { left: 34%; width: 12%; top: 78%; animation-delay: 4.6s; animation-duration: 6s; } @keyframes glitzern { 0%, 100% { opacity: 0; transform: translateX(0) scaleX(.6); } 35% { opacity: .7; transform: translateX(14px) scaleX(1); } 65% { opacity: .35; transform: translateX(26px) scaleX(.85); } } /* Nachts wird das Glitzern zum silbernen Mondlicht auf dem Wasser. */ body[data-tageszeit="nacht"] #wasserGlitzern i { background: linear-gradient(90deg, rgba(210,225,255,0), rgba(226,236,255,.85), rgba(210,225,255,0)); } /* ---------- Morgennebel: langsam ziehende Bänke ---------- */ #nebel { display: none; } body[data-tageszeit="morgen"] #nebel { display: block; position: absolute; left: 0; right: 0; top: 50vh; height: 18vh; pointer-events: none; } .nebel-bank { position: absolute; width: 68vw; height: 9vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.5), rgba(255,255,255,0) 70%); filter: blur(10px); animation: nebel-zieht 52s ease-in-out infinite alternate; } .nebel-bank:nth-child(1) { left: -8vw; top: 8%; } .nebel-bank:nth-child(2) { left: 30vw; top: 52%; width: 56vw; animation-duration: 64s; animation-direction: alternate-reverse; } @keyframes nebel-zieht { from { transform: translateX(0); opacity: .5; } 50% { opacity: .8; } to { transform: translateX(16vw); opacity: .55; } } @media (prefers-reduced-motion: reduce) { #mond::after, #wasserGlitzern i, .nebel-bank { animation: none !important; } #wasserGlitzern { display: none; } } /* ========================================================================= Sonnenstrahlen, Wolkenzug und echtes Tokio-Wetter (js/japan_wetter.js setzt data-wetter auf : klar|wolken|nebel|regen|schnee|gewitter; die Lage kommt vom EIGENEN Backend, /api/wetter). Alles im Buehnen-Stapel (hinter Karten/Text), alle Schleifen nur transform/opacity. */ /* ---------- Sonnenstrahlen mit leichtem Flackern ---------- */ #sonnenstrahlen { display: none; position: absolute; /* Lichtquelle oben links der Mitte statt Ecke oben rechts (19.08.2026, Baumeister-Befund): oben rechts stehen Baeume/Bambus, und die GEMALTEN Sonnen der Kulissen (Fruehlingsmorgen, Abendrot) haengen links der Mitte - die Strahlen kommen jetzt aus derselben Richtung. */ top: -6vh; left: 6vw; right: auto; width: 60vw; height: 60vh; transform-origin: 30% 0%; animation: strahlen-schwenken 22s ease-in-out infinite alternate; } body[data-tageszeit="morgen"] #sonnenstrahlen, body[data-tageszeit="tag"] #sonnenstrahlen { display: block; } body[data-wetter="regen"] #sonnenstrahlen, body[data-wetter="schnee"] #sonnenstrahlen, body[data-wetter="gewitter"] #sonnenstrahlen, body[data-wetter="nebel"] #sonnenstrahlen { display: none; } #sonnenstrahlen i { position: absolute; top: 0; left: 30%; width: 9vw; height: 66vh; background: linear-gradient(180deg, rgba(255, 246, 214, .34), rgba(255, 246, 214, 0) 78%); transform-origin: 50% 0%; filter: blur(6px); animation: sonnen-flackern 7s ease-in-out infinite; } /* Faecher um die Quelle: leicht nach links, senkrecht, leicht nach rechts. */ #sonnenstrahlen i:nth-child(1) { transform: rotate(-16deg); } #sonnenstrahlen i:nth-child(2) { transform: rotate(-2deg); width: 6vw; animation-delay: 2.4s; animation-duration: 8.5s; } #sonnenstrahlen i:nth-child(3) { transform: rotate(12deg); width: 7vw; animation-delay: 4.8s; animation-duration: 6.2s; } @keyframes sonnen-flackern { 0%, 100% { opacity: .45; } 40% { opacity: .95; } 55% { opacity: .6; } 70% { opacity: .85; } } @keyframes strahlen-schwenken { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } } /* ---------- Vorbeiziehende Wolken ---------- */ #wolken { position: absolute; inset: 0; } body[data-tageszeit="nacht"] #wolken, body[data-wetter="nebel"] #wolken { display: none; } #wolken i { position: absolute; width: 34vw; height: 9vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 72%); filter: blur(9px); animation: wolke-zieht linear infinite; } #wolken i:nth-child(1) { top: 7vh; animation-duration: 150s; animation-delay: -40s; } #wolken i:nth-child(2) { top: 15vh; width: 26vw; animation-duration: 195s; animation-delay: -130s; } #wolken i:nth-child(3) { top: 11vh; width: 30vw; animation-duration: 170s; animation-delay: -85s; display: none; } body[data-wetter="wolken"] #wolken i { background: radial-gradient(ellipse, rgba(244, 246, 250, .65), rgba(244, 246, 250, 0) 72%); } body[data-wetter="wolken"] #wolken i:nth-child(3) { display: block; } @keyframes wolke-zieht { from { transform: translateX(-40vw); } to { transform: translateX(140vw); } } /* ---------- Wetter-Buehne ---------- */ #wetter { position: absolute; inset: 0; } #wetter > * { display: none; } /* Regen (auch beim Gewitter): schraege, fallende Streifen. */ body[data-wetter="regen"] #wetter em, body[data-wetter="gewitter"] #wetter em { display: block; } #wetter em { position: absolute; top: -12vh; width: 1.5px; height: 15px; background: linear-gradient(180deg, rgba(200, 214, 235, 0), rgba(208, 222, 244, .6)); transform: rotate(11deg); animation: regen-faellt linear infinite; } #wetter em:nth-of-type(1) { left: 6%; animation-duration: 1.0s; animation-delay: 0s; } #wetter em:nth-of-type(2) { left: 15%; animation-duration: 1.25s; animation-delay: .4s; } #wetter em:nth-of-type(3) { left: 24%; animation-duration: .95s; animation-delay: .15s; } #wetter em:nth-of-type(4) { left: 33%; animation-duration: 1.15s; animation-delay: .6s; } #wetter em:nth-of-type(5) { left: 42%; animation-duration: 1.05s; animation-delay: .25s; } #wetter em:nth-of-type(6) { left: 51%; animation-duration: 1.3s; animation-delay: .8s; } #wetter em:nth-of-type(7) { left: 60%; animation-duration: .9s; animation-delay: .05s; } #wetter em:nth-of-type(8) { left: 69%; animation-duration: 1.2s; animation-delay: .5s; } #wetter em:nth-of-type(9) { left: 78%; animation-duration: 1.0s; animation-delay: .35s; } #wetter em:nth-of-type(10) { left: 87%; animation-duration: 1.1s; animation-delay: .7s; } #wetter em:nth-of-type(11) { left: 95%; animation-duration: .95s; animation-delay: .2s; } #wetter em:nth-of-type(12) { left: 48%; animation-duration: 1.35s; animation-delay: 1.0s; } @keyframes regen-faellt { from { transform: translateY(0) rotate(11deg); } to { transform: translateY(124vh) rotate(11deg); } } /* Schnee: langsam taumelnde Flocken (unabhaengig von den Jahreszeit-Blueten). */ body[data-wetter="schnee"] #wetter b { display: block; } #wetter b { position: absolute; top: -6vh; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 0 4px rgba(255, 255, 255, .7); animation: wetter-schnee linear infinite; } #wetter b:nth-of-type(1) { left: 8%; animation-duration: 9s; animation-delay: 0s; } #wetter b:nth-of-type(2) { left: 19%; animation-duration: 11s; animation-delay: 2s; width: 4px; height: 4px; } #wetter b:nth-of-type(3) { left: 31%; animation-duration: 8s; animation-delay: 4s; } #wetter b:nth-of-type(4) { left: 44%; animation-duration: 12s; animation-delay: 1s; width: 6px; height: 6px; } #wetter b:nth-of-type(5) { left: 56%; animation-duration: 10s; animation-delay: 5s; } #wetter b:nth-of-type(6) { left: 67%; animation-duration: 9.5s; animation-delay: 3s; width: 4px; height: 4px; } #wetter b:nth-of-type(7) { left: 78%; animation-duration: 11.5s; animation-delay: 6s; } #wetter b:nth-of-type(8) { left: 88%; animation-duration: 8.5s; animation-delay: 2.5s; } #wetter b:nth-of-type(9) { left: 95%; animation-duration: 10.5s; animation-delay: 7s; width: 4px; height: 4px; } #wetter b:nth-of-type(10) { left: 50%; animation-duration: 13s; animation-delay: 8s; } @keyframes wetter-schnee { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: .9; } 50% { transform: translate(18px, 55vh); } 100% { transform: translate(-12px, 112vh); opacity: .6; } } /* Nebel (ganztags, wenn Tokio im Nebel liegt): dichter als der Morgennebel. */ body[data-wetter="nebel"] #wetter span { display: block; } #wetter span { position: absolute; top: 42vh; width: 84vw; height: 16vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(248, 250, 252, .65), rgba(248, 250, 252, 0) 74%); filter: blur(13px); animation: nebel-zieht 58s ease-in-out infinite alternate; } #wetter span:nth-of-type(1) { left: -12vw; } #wetter span:nth-of-type(2) { left: 26vw; top: 54vh; width: 70vw; animation-duration: 74s; animation-direction: alternate-reverse; } /* Gewitter: die Buehne verdunkelt sich, ab und an zuckt ein Blitz (js/japan_wetter.js setzt kurz die Klasse "blitz" auf - bewusst selten und sanft, kein hartes Weiss ueber den ganzen Schirm). */ body[data-wetter="gewitter"] #wetter .gewitter-dunkel { display: block; position: absolute; inset: 0; background: rgba(26, 31, 56, .3); } #wetter .blitz-licht { position: absolute; inset: 0; background: rgba(255, 253, 240, 1); opacity: 0; transition: opacity .09s ease; } body[data-wetter="gewitter"] #wetter .blitz-licht { display: block; } body.blitz #wetter .blitz-licht { opacity: .26; } @media (prefers-reduced-motion: reduce) { #sonnenstrahlen, #wolken, #wetter em, #wetter b, #wetter span, #wetter .blitz-licht { animation: none !important; transition: none !important; display: none !important; } }