/* FARBE DES KIESELS (Michael 14.10.2026). Erst: "Mach den Kiesel in gelb ...
   messe aus, was hier die beste Farbe waere." Dann, zur gemessenen Wahl
   #D2B04C: "Dein Gelb ist auf jeden Fall nicht gut gewaehlt. Mach eine andere
   Farbe, die besser passt. Und keinen Rand."

   Was gemessen ist und bleibt: das Foto hinter dem Kiesel ist kuehl und hell
   (Mittel ueber die Kieselflaeche, 627 x 417 px: Farbton 208 Grad, Saettigung
   18 %, Helligkeit 70 %). Die Hausfarben sind warm und liegen eng beieinander:
   Papier 35 Grad, Tinte 30 Grad, Akzent 22 Grad.

   Daraus folgt, warum das Gelb nicht sass: jedes Gelb, auf dem die Tinte lesbar
   bleibt, ist hell (Helligkeit 52 bis 74 %) und steht damit fast auf der
   Helligkeit des Himmels dahinter -- der Kiesel verliert seine Form und wird
   zum Fleck. Gemessen: #D2B04C gegen den Himmel 1,02 zu 1.

   Danach, zur Terrakotta-Fassung #8C5A3C: "Mach es in einem aehnlichen Gruen,
   wie du im Hintergrund siehst."

   Der Hintergrund ist die Wand im Foto AqAXWhVlaDimQFnh2QaSH0pMgQ.jpg. Gemessen
   ueber vier Ausschnitte: Farbton 38 bis 45 Grad, Saettigung 13 bis 19 %,
   Helligkeit 45 bis 60 % -- ein stilles Khaki. "Ein aehnliches Gruen" heisst
   also: dieselbe Zurueckhaltung, nur in den gruenen Bereich gedreht.

   Dann schickte Michael einen Ausschnitt der Wand selbst: "Farbe in diese
   Richtung. Mach die Farbe so oder aehnlich." Der Ausschnitt gemessen (200 x
   136 px, ohne Kiesel und Leiste): #897F65, Farbton 43 Grad, Saettigung 15 %,
   Helligkeit 47 %.

   Genau dieser Wert geht nicht: auf ihm erreicht WEDER die Papierschrift
   (3,56 zu 1) NOCH die Tinte (3,29) die geforderten 4,5. Gewaehlt ist deshalb
   derselbe Ton, acht Punkte dunkler und eine Spur gesaettigter, damit er nicht
   ins Graue kippt: #776C50, Farbton 43 Grad, Saettigung 20 %, Helligkeit 39 %.
   Darauf steht die Papierschrift bei 4,65 zu 1. Gegen die Wand im Foto 1,31,
   gegen den Himmel im ersten Foto 2,45.
   Die Schrift bleibt Papierweiss wie vorher -- an der Typografie aendert sich
   nichts. Ein eigener Rand ist nicht dazugekommen: es bleibt die feine
   Lichtkante, die der Kiesel immer schon hatte. */

/* KLARGLAS (Michael 19.09.2026: "E2 Klarglas ist gut"). Abgang des Kiesels, ans Scrollen
   gekoppelt (--p linear, --pe weich, aus probe-kiesel-scroll.js). Er bleibt gross an seinem
   Platz, wird nie von der Kopfleiste abgeschnitten und ist weg, bevor die Bildkante ihn erreicht.
   Die Drehung (kiesel-dreht.css) laeuft weiter. Loest G1 Formwandel vom selben Tag ab. */
html[data-ende] .ssc{translate:0 0;scale:1;opacity:1;will-change:opacity}

/* Er bleibt gross und an seinem Platz. Toenung und Unschaerfe gehen zurueck,
   uebrig bleibt eine feine Sandlinie um die Schrift -- dann verblasst auch sie. */
html[data-ende="E2"] .ssc{opacity:clamp(0, calc((1 - var(--p,0)) * 2.4), 1)}
html[data-ende="E2"] .ssc .ssc-glas{
  background:rgba(119,108,80,calc(.92 * (1 - var(--pe,0))));
  -webkit-backdrop-filter:blur(calc(36px * (1 - var(--pe,0)))) saturate(calc(.65 + .35 * var(--pe,0)));
  backdrop-filter:blur(calc(36px * (1 - var(--pe,0)))) saturate(calc(.65 + .35 * var(--pe,0)));
  box-shadow:inset 0 0 0 1px rgba(246,242,234,calc(.07 + .55 * var(--pe,0))),0 0 26px -10px rgba(20,17,15,calc(.42 * (1 - var(--pe,0))))}
html[data-ende="E2"] .ssc .ssc-glas::before{opacity:calc(1 - var(--pe,0))}
html[data-ende="E2"] .ssc .ssc-text{text-shadow:0 1px 14px rgba(20,17,15,calc(.55 * var(--pe,0)))}

@media (prefers-reduced-motion:reduce){
  html[data-ende] .ssc{opacity:calc(1 - var(--p,0))}
}

/* "zwei" (Michael 19.09.2026): der Wechsel zu Klarglas ist "sehr schoen, aber zu kurz" --
   er laeuft jetzt ueber beide linken Bilder. --pe = wie klar (Strecke 1), --p = wie weit
   aufgeloest (Strecke 2), beide aus probe-kiesel-scroll.js. Die Kontur bleibt gut
   sichtbar: helle Innenkante plus feine dunkle Aussenkante, damit sie auch auf hellem
   Himmel und Papier zu erkennen ist. Aufloesen = weiches Ausblenden, keine Blende. */
html[data-folge="zwei"][data-ende] .ssc{opacity:calc(1 - var(--p,0))}
html[data-folge="zwei"][data-ende="E2"] .ssc .ssc-glas{
  box-shadow:inset 0 0 0 1px rgba(246,242,234,calc(.07 + .6 * var(--pe,0))),
             0 0 0 1px rgba(53,48,43,calc(.28 * var(--pe,0))),
             0 0 26px -10px rgba(20,17,15,calc(.42 * (1 - var(--pe,0))))}
/* Im Klarglas steht der Kiesel halb auf Papier: helle Schrift war dort kaum zu lesen
   (gemessen im Bild, 19.09.2026). Darum geht die Schrift mit dem Glas mit -- von Papierweiss
   zur Tinte der Seite (#35302B), der Schein dahinter wird hell statt dunkel. */
html[data-folge="zwei"][data-ende="E2"] .ssc,
html[data-folge="zwei"][data-ende="E2"] .ssc .ssc-n,
html[data-folge="zwei"][data-ende="E2"] .ssc .ssc-i{
  color:rgb(calc(246 - 193 * var(--pe,0)),calc(242 - 194 * var(--pe,0)),calc(234 - 191 * var(--pe,0))) !important}
html[data-folge="zwei"][data-ende="E2"] .ssc .ssc-text{text-shadow:0 0 12px rgba(246,242,234,calc(.7 * var(--pe,0)))}
html[data-folge="zwei"][data-ende="E2"] .ssc .ssc-i::before,
html[data-folge="zwei"][data-ende="E2"] .ssc .ssc-lot,
html[data-folge="zwei"][data-ende="E2"] .ssc .ssc-text::before{background:currentColor !important;opacity:.45}

/* data-zwei-bis="zimmer" (Michael 19.09.2026: "Grundidee passt, Uebergang cooler, smoother").
   Aufloesen wie ein Material, nicht wie eine Blende: beim Gehen wird der Kiesel zugleich
   blasser, minimal kleiner und unscharf (Apple: Blur und Groesse zusammen). Ueber dem Papier
   der Ueberschrift behaelt das halbklare Glas etwas Unschaerfe, statt grau zu werden. */
/* Deckkraft NICHT am .ssc: opacity < 1 und will-change:opacity machen ihn zur "Backdrop Root",
   dann sieht das Milchglas darin das Bild dahinter nicht mehr (gemessen 19.09.2026: Kantenmass
   im Glas 27,7 mit, 19,7 ohne will-change:opacity -- die Unschaerfe fehlte). Darum blenden
   Glas und Schrift einzeln aus, der Kiesel selbst bleibt voll deckend. */
html[data-zwei-bis="zimmer"][data-ende="E2"] .ssc{
  opacity:1;scale:calc(1 - .07 * var(--p,0));will-change:scale}
html[data-zwei-bis="zimmer"][data-ende="E2"] .ssc .ssc-glas,
html[data-zwei-bis="zimmer"][data-ende="E2"] .ssc .ssc-text{opacity:calc(1 - var(--p,0))}
/* Unschaerfe beim Gehen an Glas und Schrift, NIE am .ssc selbst: ein filter am Kiesel macht
   ihn zur "Backdrop Root" -- das Milchglas darin sieht dann das Bild dahinter nicht mehr und
   wird schlagartig klar (gemessen 19.09.2026: blur(14px) gesetzt, im Bild null Wirkung).
   Am Glas selbst ist filter unschaedlich. Das Attribut setzt probe-kiesel-scroll.js. */
html[data-zwei-bis="zimmer"][data-ende="E2"] .ssc[data-geht] .ssc-glas,
html[data-zwei-bis="zimmer"][data-ende="E2"] .ssc[data-geht] .ssc-text{filter:blur(calc(7px * var(--p,0)))}
html[data-zwei-bis="zimmer"][data-ende="E2"] .ssc .ssc-glas{
  -webkit-backdrop-filter:blur(calc(36px * (1 - var(--pe,0)) + 3px * var(--pe,0))) saturate(calc(.65 + .45 * var(--pe,0))) brightness(calc(1 + .05 * var(--pe,0)));
  backdrop-filter:blur(calc(36px * (1 - var(--pe,0)) + 3px * var(--pe,0))) saturate(calc(.65 + .45 * var(--pe,0))) brightness(calc(1 + .05 * var(--pe,0)))}
@media (prefers-reduced-motion:reduce){
  html[data-zwei-bis="zimmer"][data-ende="E2"] .ssc{scale:1;filter:none}
}

/* Glas B "Lichtkante" (Michael 19.09.2026 aus A/B/C gewaehlt, Probe: probe-kiesel-glas.html).
   Im Klaren wird der Kiesel helles Milchglas statt klar, eine schmale Lichtkante laeuft mit der
   Drehung um den Rand; beim Gehen dehnt er sich leicht und verdunstet. */
html[data-glas="B"][data-ende="E2"] .ssc .ssc-glas{
  background:color-mix(in srgb, rgba(255,255,255,.14) calc(var(--pe,0) * 100%), rgba(119,108,80,.92)) !important;
  -webkit-backdrop-filter:blur(calc(36px * (1 - var(--pe,0)) + 14px * var(--pe,0))) saturate(calc(.65 + .45 * var(--pe,0))) brightness(calc(1 + .1 * var(--pe,0)));
  backdrop-filter:blur(calc(36px * (1 - var(--pe,0)) + 14px * var(--pe,0))) saturate(calc(.65 + .45 * var(--pe,0))) brightness(calc(1 + .1 * var(--pe,0)))}
/* Lichtkante: Ring ueber die Masken-Aussparung (Rand bleibt der Kieselform treu), Licht als
   Kegelverlauf -- das Glas dreht sich, also wandert das Licht um den Rand. */
html[data-glas="B"][data-ende="E2"] .ssc .ssc-glas::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;padding:2.5px;
  background:conic-gradient(from 200deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,1) 38deg,rgba(255,255,255,0) 95deg,
             rgba(255,255,255,0) 190deg,rgba(255,255,255,.6) 232deg,rgba(255,255,255,0) 280deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:clamp(0, calc(var(--pe,0) * 1.2 - .2 + .6 * var(--p,0)), 1)}
html[data-glas="B"][data-zwei-bis="zimmer"][data-ende="E2"] .ssc{scale:calc(1 + .05 * var(--p,0))}
html[data-glas="B"][data-zwei-bis="zimmer"][data-ende="E2"] .ssc[data-geht] .ssc-glas,
html[data-glas="B"][data-zwei-bis="zimmer"][data-ende="E2"] .ssc[data-geht] .ssc-text{filter:blur(calc(9px * var(--p,0)))}

@media (prefers-reduced-motion:reduce){
  html[data-glas="B"][data-zwei-bis="zimmer"][data-ende="E2"] .ssc{scale:1}
}