/* Reiners Fahrschule, Buehne und Glas.
   Gilt auf allen Seiten. Die Kulisse liegt fest hinter der Seite, der Inhalt
   scrollt darueber. Textflaechen sind Glas: durchscheinend, mit Lichtkante
   und einem Schimmer, der die Farben der Kulisse aufnimmt.

   Warum Glas erst ab einer bestimmten Deckung lesbar ist, steht in CLAUDE.md
   unter "Glasentwurf". Kurz: Ueber der dunkelsten Stelle der Kulisse braucht
   der Fliesstext 70 Prozent Deckung, sonst faellt er unter 4,5:1. */

:root{
  /* .76: Bei .70 lag der Fliesstext ueber der dunkelsten Stelle der Kulisse
     bei 5,20:1. Das ist ueber dem Mindestwert, aber kein Komfortwert, und
     Micha konnte es im dunklen Bereich schlecht lesen. Jetzt 6,10. */
  --glas:rgba(255,255,255,.76);
  --glas-rund:28px;
  --tinte:#1a1d23;
  --tinte-weich:#3a4049;   /* dunkler als vorher #464d57, siehe oben */
  --rot-satt:#9e2730;
  --gold:#d0a32d;
}

/* ===== Buehne ===== */

.rf-buehne-bild,
.rf-buehne-schleier{position:fixed;inset:0;z-index:-3;pointer-events:none}
.rf-buehne-bild{
  background:url(../img/buehne.webp) center center/cover no-repeat;
}
.rf-buehne-schleier{z-index:-2;
  background:linear-gradient(180deg,
    rgba(255,252,246,.10) 0%,rgba(255,250,242,.04) 40%,rgba(30,20,14,.14) 100%);
}
@media(max-width:900px){
  .rf-buehne-bild{background-image:url(../img/buehne-klein.webp)}
}

/* ===== Glas ===== */

.rf-glas{
  position:relative;
  background:var(--glas);
  -webkit-backdrop-filter:blur(30px) saturate(1.9);
  backdrop-filter:blur(30px) saturate(1.9);
  border-radius:var(--glas-rund);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(120,90,60,.10),
    inset 1px 0 0 rgba(255,255,255,.40),
    inset -1px 0 0 rgba(255,255,255,.40),
    0 20px 50px rgba(70,45,25,.14),
    0 2px 8px rgba(70,45,25,.07);
  overflow:hidden;
}
/* Schraeger Lichtstreifen wie auf einer geneigten Scheibe. */
.rf-glas::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,
    rgba(255,255,255,.55) 0%,rgba(255,255,255,.14) 22%,
    transparent 42%,transparent 62%,
    rgba(255,255,255,.20) 84%,rgba(255,255,255,.44) 100%);
  mix-blend-mode:screen;opacity:.55;
}
/* Warmer Schimmer von unten, damit das Glas die Kulisse aufnimmt. */
.rf-glas::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(120% 70% at 18% 106%,rgba(255,202,40,.20),transparent 58%),
    radial-gradient(110% 68% at 88% 104%,rgba(181,49,61,.16),transparent 56%);
}
.rf-glas > *{position:relative;z-index:1}

/* Kann der Browser nicht weichzeichnen, wird die Flaeche satt. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .rf-glas{background:rgba(255,253,250,.94)}
}