/* ---- Bewegung nach Emil Kowalski (emilkowalski/skills animate + find-animation-opportunities, 16.09.2026) ----
   Zweck statt Deko: Inhalte kommen dort an, wo der Blick gerade hinkommt, einmal, nicht bei jedem Scrollen.
   Hausregel Michael: Inhalte steigen von UNTEN nach OBEN, nie von der Seite.
   Nur transform, opacity, clip-path (GPU, kein Layout). Keine ease-in, kein scale(0), kein Blur-Verlauf.
   Kurven: --bw-aus  starkes ease-out fuer Ankommen
           --bw-zug  ease-in-out fuer Bildaufdeckung (Kowalski clip-path, 1 s)
   Nur aktiv, wenn bewegung.js html.bw-an gesetzt hat -- ohne Skript bleibt alles sichtbar. */
:root{--bw-aus:cubic-bezier(0.23,1,0.32,1);--bw-zug:cubic-bezier(0.77,0,0.175,1)}

/* 1. Text und Bloecke: MILCHGLAS (Michael 16.09.2026 an der Textprobe freigegeben, Vorschlag 2).
   Ein weicher Verlauf -- eine Maske, viermal so hoch wie das Element -- faehrt von unten durch
   den Text und gibt ihn frei; waehrenddessen klart die Scheibe auf. Bewegt wird nur
   mask-position: kein Layout, kein Neusetzen der Schrift, laeuft auf der Grafikkarte.
   Die Unschaerfe ist nach dem ersten Drittel weg -- gelesen wird nie durch Milchglas.
   Laenger als 300 ms ist hier richtig: das ist kein Knopf, sondern eine Seite zum Lesen. */
html.bw-an .bw-steigt{opacity:0;filter:blur(7px);transform:translateY(4px);
  -webkit-mask-image:linear-gradient(to top,transparent 0 25%,#000 40%);
          mask-image:linear-gradient(to top,transparent 0 25%,#000 40%);
  -webkit-mask-size:100% 400%;mask-size:100% 400%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 100%;mask-position:0 100%}
html.bw-an .bw-steigt.bw-da{opacity:1;filter:blur(0);transform:none;
  -webkit-mask-position:0 0;mask-position:0 0;
  transition:opacity 420ms var(--bw-aus) var(--bw-verzug,0ms),
             filter 420ms var(--bw-aus) var(--bw-verzug,0ms),
             transform 900ms var(--bw-aus) var(--bw-verzug,0ms),
             -webkit-mask-position 900ms var(--bw-aus) var(--bw-verzug,0ms),
             mask-position 900ms var(--bw-aus) var(--bw-verzug,0ms)}
/* Danach wird die Maske wieder abgenommen (bewegung.js setzt bw-fertig): ein Element, das
   dauerhaft maskiert bleibt, haengt in einer eigenen Ebene und wuerde beim spaeteren Wachsen
   -- aufgeklappte Felder, nachgeladene Schrift -- erneut angeschnitten. */
html.bw-an .bw-steigt.bw-fertig{-webkit-mask-image:none;mask-image:none;filter:none}
/* Kann der Browser keine Masken, bleibt es beim schlichten Aufblenden -- nie unsichtbarer Text. */
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  html.bw-an .bw-steigt{filter:none}
}

/* 2. Bilder: Rahmen deckt von unten nach oben auf (inset), das Foto setzt sich dabei von 1.06 auf 1.
   scale ist eine EIGENE Eigenschaft -- so vertraegt es sich mit der Parallaxe auf translate. */
.bw-rahmen{display:block;overflow:hidden;position:relative}
html.bw-an .bw-bild .bw-rahmen{clip-path:inset(100% 0 0 0)}
html.bw-an .bw-bild img{scale:calc(var(--bw-ruhe,1) + .06)}
html.bw-an .bw-bild.bw-da .bw-rahmen{clip-path:inset(0 0 0 0);transition:clip-path 1000ms var(--bw-zug) var(--bw-verzug,0ms)}
html.bw-an .bw-bild.bw-da img{scale:var(--bw-ruhe,1);transition:scale 1400ms var(--bw-aus) var(--bw-verzug,0ms)}
html.bw-an .bw-bild figcaption{opacity:0;transform:translateY(8px)}
html.bw-an .bw-bild.bw-da figcaption{opacity:1;transform:none;
  transition:opacity 500ms var(--bw-aus) calc(var(--bw-verzug,0ms) + 450ms),transform 500ms var(--bw-aus) calc(var(--bw-verzug,0ms) + 450ms)}

/* 3. Parallaxe, leise: das Foto wandert im Rahmen um 3 % gegen die Scrollrichtung.
   Reines CSS an der Scrollposition (Safari 26, Chrome 115), sonst einfach ohne. Nur grosse Schirme. */
@supports (animation-timeline: view()){
  @media (min-width:810px) and (prefers-reduced-motion:no-preference){
    /* Nicht im waagrechten Zimmer-Gleis: dort ist der naechste Scroller seitlich. */
    .auftakt .bw-rahmen,.bildreihe .bw-rahmen{--bw-ruhe:1.06}
    .auftakt .bw-rahmen img,.bildreihe .bw-rahmen img{scale:var(--bw-ruhe);animation:bw-tiefe linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes bw-tiefe{from{translate:0 -2.5%}to{translate:0 2.5%}}
/* Keine Kante frei: in Ruhe steht das Foto auf 1.06 (je 3 % Reserve oben und unten), es wandert nur 2,5 %.
   Die Reserve bezieht sich auf die Bildhoehe -- gilt also auch fuer Hochformate. */

/* 4. Glas-Kopf: klebt ueber den Bildern und wird zu Milchglas, sobald Inhalt darunter liegt.
   Werte aus menue-glas-varianten.html (Milchglas), fuer hellen Grund heller eingestellt. */
.kopf{transition:background-color 300ms var(--bw-aus),-webkit-backdrop-filter 300ms var(--bw-aus),backdrop-filter 300ms var(--bw-aus)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kopf.bw-glas{background:rgba(243,238,231,.72);
    -webkit-backdrop-filter:blur(24px) saturate(.7) brightness(1.06);backdrop-filter:blur(24px) saturate(.7) brightness(1.06)}
}

/* 5. Rueckmeldung beim Druecken: 0.97, 160 ms (Kowalski: Feedback) */
.knopf,.gleissteuerung button,.feldknopf,.buchbar .buchtext,.buchbar .datum{transition:transform 160ms var(--bw-aus),background-color 150ms ease}
.knopf:active,.gleissteuerung button:not(:disabled):active,.feldknopf:active{transform:scale(.97)}

/* 6. Menue: Unterstrich blendet ein statt zu springen. Nur mit Maus (Kowalski: hover nie auf Touch). */
.seitenmenue a{text-decoration:underline;text-underline-offset:6px;text-decoration-color:transparent;transition:text-decoration-color 200ms var(--bw-aus),color 200ms var(--bw-aus)}
@media (hover:hover) and (pointer:fine){
  .seitenmenue a:hover{text-decoration-color:currentColor;color:var(--tinte)}
}

/* Weniger Bewegung heisst weniger, nicht nichts: nur noch Deckkraft, 200 ms */
@media (prefers-reduced-motion:reduce){
  html.bw-an .bw-steigt,html.bw-an .bw-bild figcaption{transform:none}
  /* Der Schleier faellt weg, das Aufblenden bleibt */
  html.bw-an .bw-steigt{-webkit-mask-image:none;mask-image:none;filter:none}
  html.bw-an .bw-steigt.bw-da,html.bw-an .bw-bild.bw-da figcaption{transition:opacity 200ms ease}
  html.bw-an .bw-bild .bw-rahmen{clip-path:none;opacity:0}
  html.bw-an .bw-bild.bw-da .bw-rahmen{opacity:1;transition:opacity 200ms ease}
  html.bw-an .bw-bild img,html.bw-an .bw-bild.bw-da img{scale:1;transition:none;animation:none}
  .knopf:active,.gleissteuerung button:active,.feldknopf:active{transform:none}
}