/* ===========================================================================
   Szene des Tagblatts (Tor G4, gebaut ab Teil 7, 09.10.2026)

   Was Mockups (prototypen/g4) und Seite teilen: Himmel, Nebel, der Wähler
   der Tageszeit und das Jelly-Material. Die Lage der Dinge auf der Seite
   steht nicht hier, sondern in tagblatt.css (Seite) und a.css (Mockups).
   Alle Farben stehen in tageszeiten.css; hier steht kein Farbwert.
   =========================================================================== */

:root { --f-serif: "Instrument Serif", Georgia, serif; --f-etikett: "Figtree", system-ui, sans-serif; }

/* Himmel hinter dem Text (Tor G4 Teil 4): oben, unten heller oder dunkler,
   gemischt in OKLab wie farbweg.js, damit die Kontrastrechnung stimmt. Die
   Glut, Sonne, Mond und Sterne liegen um das Haus (haus-licht.js). */
.himmel { background: linear-gradient(180deg, var(--himmel-oben), var(--himmel-mitte) 70%); background: linear-gradient(in oklab 180deg, var(--himmel-oben), var(--himmel-mitte) 70%); }
.himmel::before, .himmel::after { display: none; }
.haus-himmel { z-index: 0; pointer-events: none; cursor: auto; }

/* Rand als Dunst, Nebel und Wolken (nebel.js, Tor G4 Teil 5): über dem
   Haus, unter der Schrift. Die Schicht ist einmal gemalt und verschiebt sich
   nur langsam per transform (Compositor, kein Neuzeichnen). Die Decke, aus
   der das Haus auftaucht, steht sonst auf 0. Bei weniger Bewegung steht
   alles still. */
.haus-nebel { z-index: 1; pointer-events: none; overflow: hidden; }
.haus-nebel > div { position: absolute; }
/* Je Tageszeit eine Leinwand; im Wechsel nur Überblendung (opacity). */
.haus-nebel canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; will-change: opacity; }
.haus-nebel .rand { animation: nebel-rand var(--d-nebel) ease-in-out infinite alternate; }
/* Im Zeitraffer steht das Treiben still. Am iPhone (Andi, 09.10.2026, Nacht)
   lagen mit Treiben je Wechsel 4 Bilder über 25 ms, zwei davon hintereinander,
   mit angehaltenem Treiben und sonst allem gleich keines: Safari fasst die
   laufende CSS-Animation bei jedem Mischschritt der Tokens neu an. 2,6 s von
   90 s Treiben fehlen dabei, und die Strecke ist kleiner als ein Pixel. */
html.zeitraffer .haus-nebel .rand { animation-play-state: paused; }
.haus-nebel .decke { opacity: 0; visibility: hidden; }
@keyframes nebel-rand { from { transform: translate3d(-12px, 0, 0); } to { transform: translate3d(12px, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .haus-nebel .rand { animation: none; } }

/* Tageszeit mit Jelly-Tropfen (zeitwahl.js). Vier Tippziele zu 44 × 44 px;
   der Tropfen liegt darunter und trägt das Gel. Die Symbole sind Linien in
   currentColor: gewählt in Textfarbe, sonst leise. */
.zeitwahl-tropfen { position: relative; display: inline-flex; gap: 6px; padding: 4px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.zeitwahl-tropfen button { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; border-radius: var(--r-jelly-klein); color: var(--leise); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.zeitwahl-tropfen button[aria-checked="true"] { color: var(--text); }
.zeitwahl-tropfen button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.zeitwahl-tropfen svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.zeitwahl-tropfen .tropfen { position: absolute; left: 0; top: 4px; width: 44px; height: 44px; pointer-events: none; opacity: 0;
    border-radius: var(--r-tropfen);
    background: linear-gradient(165deg, var(--jelly-a), var(--jelly-b)); border: 1px solid var(--jelly-rand);
    box-shadow: inset 0 1.5px 0 var(--jelly-kante), inset 0 -8px 14px -8px var(--jelly-glimm), 0 10px 18px -10px var(--jelly-schatten), 0 2px 5px -3px var(--jelly-schatten); }
.zeitwahl-tropfen .tropfen::before { content: ""; position: absolute; left: 9px; top: 5px; width: 46%; height: 8px; border-radius: 50%; background: radial-gradient(closest-side, var(--jelly-licht), transparent); }
.zeitwahl-tropfen.bereit .tropfen { opacity: 1; }
.zeitwahl-tropfen.zieht { cursor: grabbing; }
.zeitwahl-tropfen.zieht .tropfen { will-change: transform; }
@media (max-width: 760px) {
    .zeitwahl-tropfen { gap: 0; padding: 4px 2px; }
    .zeitwahl-tropfen button { width: 40px; }
    .zeitwahl-tropfen .tropfen { width: 40px; }
}

/* Jelly: eine weiche, leicht unregelmäßige Fläche mit Licht oben links und
   einer Brechung unten; kein Weichzeichner. Nur am Eingabefeld und am einen
   Primärknopf (Brief 10, Tor G4). */
.jelly {
    position: relative; color: var(--feld-text); background: linear-gradient(165deg, var(--jelly-a), var(--jelly-b));
    border: 1px solid var(--jelly-rand);
    border-radius: var(--r-jelly);
    box-shadow: inset 0 1.5px 0 var(--jelly-kante), inset 0 -14px 26px -10px var(--jelly-glimm), 0 22px 44px -24px var(--jelly-schatten), 0 3px 8px -4px var(--jelly-schatten);
}
.jelly::before { content: ""; position: absolute; left: 18px; top: 7px; width: 42%; height: 15px; border-radius: 50%; background: radial-gradient(closest-side, var(--jelly-licht), transparent); pointer-events: none; }
.knopf-primaer {
    position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px; font: 600 17px var(--f-text); cursor: pointer;
    border: 0; color: var(--knopf-text); background: radial-gradient(120% 130% at 30% 0%, var(--knopf-a), var(--knopf-b) 70%);
    border-radius: var(--r-jelly-knopf);
    box-shadow: inset 0 1.5px 0 var(--knopf-kante), inset 0 -8px 16px -8px var(--knopf-tief), 0 14px 26px -14px var(--knopf-schein);
}

/* Licht unter dem Finger (jelly.js): ein heller Fleck, wo gedrückt wird, und
   ein wärmeres Glimmen am unteren Rand, beides mit --druck (0 bis 1). Der
   Glanz oben rückt ein wenig zum Finger (--lxn) und wird beim Drücken
   kürzer. */
/* :where: Eine Regel mit eigener Lage (der feste Knopf am unteren Rand) behält sie. */
:where([data-jelly]) { position: relative; }
[data-jelly] { will-change: auto; }
[data-jelly].drueckt { will-change: transform; }
[data-jelly]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background:
        radial-gradient(70px 52px at var(--lx, 50%) var(--ly, 50%), var(--jelly-fleck), transparent 72%),
        radial-gradient(70% 60% at 50% 118%, var(--jelly-glimm-stark), transparent 70%);
    opacity: calc(var(--druck, 0) * .9);
}
[data-jelly]::before { transform: translateX(calc((var(--lxn, .3) - .3) * 34px)) scaleX(calc(1 - var(--druck, 0) * .18)); transform-origin: left center; }
.knopf-primaer[data-jelly]::before { content: ""; position: absolute; left: 16px; top: 5px; width: 46%; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, var(--knopf-kante), transparent); pointer-events: none; }
/* Licht im Knopf: der Fleck aus der Knopfkante, das Glimmen aus der Tiefe. */
.knopf-primaer[data-jelly] { --jelly-fleck: var(--knopf-kante); --jelly-glimm-stark: var(--knopf-tief); }
/* Die blaue Tippmarkierung des Browsers würde das Licht im Gel übermalen. */
[data-jelly], [data-jelly] * { -webkit-tap-highlight-color: transparent; }

/* Proben für den Zeitraffer: unsichtbar, nur zum Auslesen. */
.palette-probe { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }