/* ============ Intro-Vorhang (Prinzip gethookd.de, im Design der Kurs-Seite) ============ */
.osi{position:fixed;inset:0;z-index:200;overflow:hidden;perspective:1000px;display:grid;place-items:center;cursor:pointer}
.osi__half{position:absolute;left:0;right:0;height:50.5%;background-color:#0A0A0A;
  background-image:linear-gradient(rgba(249,249,249,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(249,249,249,.07) 1px,transparent 1px);
  background-size:28px 28px;z-index:0;will-change:transform}
.osi__half--t{top:0;background-position:0 0}
.osi__half--b{bottom:0;background-position:0 100%}
.osi__cards{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;z-index:2}
.osi-card{position:absolute;left:50%;top:50%;width:190px;height:132px;margin:-66px 0 0 -95px;border-radius:22px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;opacity:0;
  box-shadow:0 0 0 6px rgba(255,255,255,.18),0 40px 70px -30px rgba(0,0,0,.85);will-change:transform,opacity}
.osi-card img{height:42px;width:auto;max-width:110px;filter:grayscale(1) brightness(0)}
.osi-card span{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.03em;color:#0A0A0A}
.osi-card--name span{font-size:24px}
.osi-card--av{background-color:#0A0A0A;background-image:linear-gradient(rgba(249,249,249,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(249,249,249,.1) 1px,transparent 1px);background-size:16px 16px;box-shadow:0 0 0 6px rgba(255,255,255,.25),0 40px 70px -30px rgba(0,0,0,.85)}
.osi-card--av b{font-family:var(--font-display);font-weight:600;font-size:46px;line-height:1;letter-spacing:-.06em;color:#F9F9F9}
.osi-card--av span{color:rgba(249,249,249,.75);font-size:14px;font-weight:500}
.osi__mark{position:relative;z-index:3;width:min(28vw,150px);height:auto;aspect-ratio:1/1;object-fit:contain;opacity:0;will-change:transform,opacity}
.osi__tag{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:3;white-space:nowrap;
  font-family:var(--font-ui);font-size:13px;font-weight:500;letter-spacing:-.01em;color:rgba(249,249,249,.7);opacity:0}
.osi__line{position:absolute;left:24%;right:24%;bottom:30px;height:2px;border-radius:2px;background:rgba(249,249,249,.14);overflow:hidden;z-index:3}
.osi__line i{position:absolute;inset:0;background:#F9F9F9;transform:scaleX(0);transform-origin:0 50%}
.osi__skip{position:absolute;top:22px;right:22px;z-index:4;font-family:var(--font-ui);font-size:12px;font-weight:500;
  padding:6px 12px;border-radius:27px;background:rgba(249,249,249,.12);color:#F9F9F9;border:1px solid rgba(249,249,249,.2)}
.osi.is-gone{display:none}
html.osi-lock,html.osi-lock body{overflow:hidden}
@media (max-width:809px){
  .osi-card{width:132px;height:96px;margin:-48px 0 0 -66px;border-radius:18px;gap:8px}
  .osi-card img{height:30px}
  .osi-card span{font-size:14px}
  .osi-card--av b{font-size:34px}
  .osi__line{left:14%;right:14%}
}

.osi-face{width:58px;height:58px;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.05);box-shadow:0 0 0 3px rgba(249,249,249,.85)}
@media (max-width:809px){.osi-face{width:42px;height:42px}}