@font-face { font-family: "Archivo"; src: url("assets/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; }
      @font-face { font-family: "JetBrains Mono"; src: url("assets/jetbrainsmono-700.woff2") format("woff2"); font-weight: 700; }
      :root { --nacht: #0b0907; --glut: #f59e0b; --karte: #1a1612; --gruen: #2f9e63; --draht: rgba(255,255,255,.10); --drahtlinie: rgba(255,255,255,.16); }
      * { box-sizing: border-box; margin: 0; }
      html, body { width: 1920px; height: 1080px; overflow: hidden; background: var(--nacht); }
      body { font-family: "Archivo", Arial, sans-serif; color: #fff; -webkit-font-smoothing: antialiased; }
      #root, .buehne { position: absolute; inset: 0; overflow: hidden; }
      .abs { position: absolute; }
      .schein { position: absolute; width: 1500px; height: 1500px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245,158,11,.11), rgba(245,158,11,0)); }

      .dach { position: absolute; left: 440px; top: 140px; height: 40px; }
      .dach span { position: absolute; left: 0; top: 0; font: 700 26px/40px "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--glut); white-space: nowrap; opacity: 0; }

      #fenster { left: 440px; top: 220px; width: 1040px; height: 660px; border-radius: 22px; background: #15110d; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 40px 90px rgba(0,0,0,.55); transform-origin: 0 50%; overflow: hidden; }
      .leiste { position: absolute; left: 0; right: 0; top: 0; height: 54px; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
      .leiste i { position: absolute; top: 22px; width: 12px; height: 12px; border-radius: 3px; background: rgba(255,255,255,.18); }
      .adresse { position: absolute; left: 350px; top: 14px; width: 340px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.06); font: 700 15px/28px "JetBrains Mono", monospace; text-align: center; color: rgba(255,255,255,.75); }
      .draht { position: absolute; background: var(--draht); box-shadow: inset 0 0 0 1px var(--drahtlinie); border-radius: 6px; }
      #w-bild { left: 600px; top: 150px; width: 392px; height: 250px; border-radius: 14px; overflow: hidden; }
      #w-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; clip-path: inset(0 100% 0 0); }
      #t-h1 { left: 48px; top: 150px; font-weight: 800; font-size: 58px; line-height: 1.04; letter-spacing: -.03em; clip-path: inset(0 100% 0 0); padding: .06em .02em .12em; }
      #w-knopf { left: 48px; top: 346px; width: 220px; height: 54px; border-radius: 999px; }
      #t-knopf { left: 48px; top: 346px; width: 220px; height: 54px; border-radius: 999px; background: var(--glut); color: #000; font-weight: 700; font-size: 21px; line-height: 54px; text-align: center; opacity: 0; }
      .k-titel { position: absolute; font-weight: 700; font-size: 17.5px; line-height: 1.15; opacity: 0; width: 250px; white-space: nowrap; }
      #badge { right: 16px; top: 7px; height: 40px; padding: 0 20px 0 14px; border-radius: 999px; background: var(--gruen); display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 21px; transform-origin: 100% 50%; }
      #badge svg { width: 22px; height: 22px; }

      .wf { left: 1220px; width: 600px; height: 96px; display: flex; flex-direction: column; justify-content: center; border-radius: 18px; background: var(--karte); box-shadow: 0 0 0 1px rgba(255,255,255,.14); padding: 24px 28px; opacity: 0; }
      .wf b { display: block; font: 700 17px/1 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--glut); margin-bottom: 10px; }
      .wf span { display: block; font-weight: 700; font-size: 26px; line-height: 1.12; letter-spacing: -.01em; white-space: nowrap; }
      .wf .ok { position: absolute; right: 24px; top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 8px; background: var(--gruen); display: flex; align-items: center; justify-content: center; }
      .wf .ok svg { width: 18px; height: 18px; }
      #wf1 { top: 226px; } #wf2 { top: 344px; } #wf3 { top: 462px; } #wf4 { top: 580px; } #wf5 { top: 698px; }
      #linien { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; }
      #linien path { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-linecap: round; }
      #puls { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 4px; background: var(--glut); box-shadow: 0 0 18px rgba(245,158,11,.9); opacity: 0; }
/* Aus style-Attributen (film-fuer-web.py) */
.fs1{left:820px;top:-620px}
.fs2{left:-700px;top:420px;opacity:.6}
.fs3{left:22px}
.fs4{left:42px}
.fs5{left:62px}
.fs6{left:48px;top:86px;width:130px;height:18px}
.fs7{left:640px;top:90px;width:70px;height:10px}
.fs8{left:730px;top:90px;width:70px;height:10px}
.fs9{left:820px;top:90px;width:70px;height:10px}
.fs10{left:910px;top:90px;width:82px;height:10px}
.fs11{left:48px;top:156px;width:430px;height:40px}
.fs12{left:48px;top:212px;width:330px;height:40px}
.fs13{left:48px;top:282px;width:420px;height:12px}
.fs14{left:48px;top:306px;width:360px;height:12px}
.fs15{left:48px;top:450px;width:296px;height:166px;border-radius:12px}
.fs16{left:372px;top:450px;width:296px;height:166px;border-radius:12px}
.fs17{left:696px;top:450px;width:296px;height:166px;border-radius:12px}
.fs18{left:72px;top:474px}
.fs19{left:396px;top:474px}
.fs20{left:720px;top:474px}