/*
 * Glasplatten-Effekt im Kopfbereich - Darstellung.
 * Unveraendert aus der bisherigen Website uebernommen,
 * gehoert zusammen mit js/glasplatten.js.
 */

#srp-wrapper {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 55%;
  height: 188vh;
}

#srp-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  pointer-events: none;
  overflow: visible;
}

.srp-plate {
  position: absolute;
  width: 66vw;
  max-width: 1200px;
  background: rgba(10, 14, 20, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,0.06);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Original: 45px oben und unten, seitlich kein Innenabstand - dadurch
     stiess die laengste Zeile bei Fenstern unter ~1520px direkt an die
     Kante. 1.5vw seitlich schafft Luft, ohne Zeilen zu brechen. */
  padding: 5vh 1.5vw;
  box-sizing: border-box;
  transform-origin: center bottom;
  transform: rotateX(-90deg);
  will-change: transform, opacity;
  box-shadow: 0 30px 80px rgba(0,0,0,0.48);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: auto;
}

.srp-plate {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #FF6600;
  /* 3.7vw statt 4vw: die laengste Zeile ("reale Bilder mit praezisen
     3D-Modellen") misst rund das 16,6-fache des Schriftgrades. Bei 3.7vw
     passt sie zusammen mit dem neuen Innenabstand in jede Fensterbreite,
     ohne umzubrechen. Ab etwa 1557px greift ohnehin die Deckelung auf
     3.6rem - dort bleibt die Darstellung unveraendert. */
  font-size: clamp(1.6rem, 3.7vw, 3.6rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  /* Platten auf die Mitte des SICHTBAREN Videobildes ausrichten
     (11.08.2026). Muss nach dem "margin: 0" darueber stehen, sonst wird
     der Versatz wieder aufgehoben.

     Ausgangslage: Die Platten sitzen mittig in #srp-stage, und das ist
     genau 100vh hoch - ihre Mitte liegt also bei 50vh, gemessen an der
     FENSTERHOEHE. Das Video dagegen wird ueber die FENSTERBREITE gross:
     Hoehe = (100vw - 80px) * 9/16. Zwei verschiedene Bezugsgroessen.
     Deshalb sass die Platte je nach Fensterform mal zu hoch, mal zu tief -
     ein fester Prozentwert konnte das nie fuer alle Fenster treffen.

     Zusaetzlich ist das sichtbare Videobild kleiner als das Videoelement:
     oben liegen 4,35 % und unten 25,28 % Streifen in der Hintergrundfarbe
     der Website (am Vorschaubild ausgemessen). Die Mitte des sichtbaren
     Bildes liegt daher bei 39,5 % der Videohoehe.

     Die Rechnung nennt jetzt beide Groessen und ist damit unabhaengig von
     der Fensterform richtig:
       Zielhoehe = Videohoehe * 0,395      (vom oberen Fensterrand aus,
                                            das Video beginnt bei top: 0)
       Versatz   = Zielhoehe - 50vh       (von der bisherigen Mitte aus)

     Warum am Ende "* 2"?
     Die Platte wird von #srp-stage senkrecht zentriert, und zentriert wird
     nicht der Kasten selbst, sondern der Kasten EINSCHLIESSLICH seiner
     Aussenabstaende. Ein negativer Abstand oben macht diesen Bereich
     kuerzer, wodurch die Zentrierung die Platte um die Haelfte wieder nach
     unten zieht - unterm Strich kam nur die halbe Verschiebung an. Der
     Faktor 2 gleicht das aus. Im Browser nachgemessen: ohne ihn sass die
     Platte rund 70px zu tief.

     Aendert sich der Videoschnitt, ist 0.395 der einzige Wert, der
     angepasst werden muss. */
  margin-top: calc(((100vw - 80px) * 9 / 16 * 0.395 - 50vh) * 2);
  text-align: center;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.srp-mark {
  color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}