/* Probe 20.09.2026, Schalter ?kb=A|B|C (probe-leiste-kiesel.js). Ohne Schalter inert.
   Ausgangslage: der Kiesel scrollt mit der Seite, der Balken klebt darueber (z-index 30) und
   ist Glas -- der dunkle Kiesel scheint durch, seine Schrift kollidiert mit dem Balken. */

/* A "Abtauchen": der Balken wird beim Ueberfahren dicht. Der Kiesel verschwindet sauber
   dahinter, nichts scheint durch. Wie eine Blende, die sich schliesst. */
html[data-kb="A"] .buchbar{
  background:color-mix(in srgb, #3D3733 calc(var(--kb-ueber,0) * 100%), rgba(53,48,43,.88));
  -webkit-backdrop-filter:blur(calc((1 - var(--kb-ueber,0)) * 20px));backdrop-filter:blur(calc((1 - var(--kb-ueber,0)) * 20px))}

/* B "Leiste weicht": der Balken sinkt nach unten aus dem Bild, solange der Kiesel ueber ihm
   steht, und kommt danach zurueck. Kiesel und Schrift bleiben unberuehrt. `translate` ist ein
   eigenes Feld -- es kollidiert nicht mit dem transform der Einblendung. */
html[data-kb="B"] .klebeleiste{translate:0 calc(var(--kb-ueber,0) * 130%);opacity:calc(1 - var(--kb-ueber,0) * .6)}

/* C "Kiesel weicht": der Balken bleibt unberuehrt, der Kiesel wird an seiner Oberkante
   sauber abgeschnitten -- er taucht hinter der Leiste ab, ohne durchzuscheinen. */
html[data-kb="C"] .ssc{clip-path:inset(0 0 var(--kb-schnitt,0px) 0)}