/* Screen Maker – Anzeige für die OBS-Browserquelle. Alles ist auf 1920 × 1080 ausgelegt
   und wird per JavaScript auf die Fenstergröße skaliert. Der Seitenhintergrund ist durchsichtig. */
@font-face{font-family:"Bebas Neue";src:url("../../assets/fonts/bebas-neue.woff2") format("woff2");font-display:block}
@font-face{font-family:"Barlow";src:url("../../assets/fonts/barlow-500.woff2") format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"Barlow";src:url("../../assets/fonts/barlow-700.woff2") format("woff2");font-weight:700;font-display:block}

html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent}
*{box-sizing:border-box}

#buehne{
  --s:1; --text:#fff; --unter:#fff; --akzent:#ff0000; --titelschrift:system-ui,sans-serif;
  position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;
  font-family:"Barlow",system-ui,sans-serif;color:var(--text)
}
#hg,#video,#bild,#bild2,#dunkel{position:absolute;inset:0;width:100%;height:100%}
#bild,#bild2,#video{object-fit:cover}
#bild,#bild2{transition:opacity 1.6s ease}
#bild2{opacity:0}
#bild2.sichtbar{opacity:1}
#bild[hidden],#bild2[hidden],#video[hidden],#logo[hidden]{display:none}
#dunkel{background:#000;opacity:0;pointer-events:none}

#inhalt{position:absolute;inset:0;padding:110px 150px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:calc(22px * var(--s))}
/* Hochformat 9:16 (1080 × 1920): schmalere Ränder, Texte dürfen die ganze Breite nutzen */
#buehne.hoch #inhalt{padding:150px 70px}
#buehne.hoch #titel{font-size:calc(150px * var(--s));max-width:100%}
#buehne.hoch #name,#buehne.hoch #unter,#buehne.hoch #naechster b{max-width:100%}
#buehne.hoch #logo{max-width:calc(760px * var(--s))}
#buehne.hoch #uhr.stil-ring .lade{max-width:calc(800px * var(--s))}
#inhalt.unten-links{justify-content:flex-end;align-items:flex-start;text-align:left}
#inhalt.unten-rechts{justify-content:flex-end;align-items:flex-end;text-align:right}
#inhalt.oben-links{justify-content:flex-start;align-items:flex-start;text-align:left}

#logo{max-height:calc(230px * var(--s));max-width:calc(700px * var(--s));object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6));margin-bottom:calc(10px * var(--s))}

#titel{
  font:400 calc(170px * var(--s))/0.95 var(--titelschrift);letter-spacing:.02em;
  max-width:1620px;overflow-wrap:anywhere;
  text-shadow:0 0 calc(28px * var(--s)) var(--akzent),0 6px 22px rgba(0,0,0,.85)
}
#titel.schrift-wartet{visibility:hidden}
#name{font:700 calc(34px * var(--s))/1.2 "Barlow",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--unter);text-shadow:0 3px 14px rgba(0,0,0,.9);max-width:1500px;overflow-wrap:anywhere}
#unter{color:var(--unter);font:500 calc(48px * var(--s))/1.2 "Barlow",sans-serif;margin-top:calc(6px * var(--s));max-width:1500px;text-shadow:0 3px 14px rgba(0,0,0,.9)}
#zeile{font:700 calc(34px * var(--s))/1.2 "Barlow",sans-serif;letter-spacing:.04em;color:var(--akzent);text-shadow:0 2px 10px rgba(0,0,0,.9);margin-top:calc(8px * var(--s))}
#titel:empty,#unter:empty,#zeile:empty,#name:empty{display:none}
#naechster{display:flex;flex-direction:column;align-items:inherit;gap:calc(2px * var(--s));margin-top:calc(26px * var(--s));text-shadow:0 3px 14px rgba(0,0,0,.9)}
#naechster[hidden]{display:none}
#naechster span{font:600 calc(28px * var(--s))/1.2 "Barlow",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--unter);opacity:.85}
#naechster b{font:700 calc(60px * var(--s))/1.15 "Barlow",sans-serif;color:var(--text);max-width:1500px;overflow-wrap:anywhere;text-shadow:0 0 calc(22px * var(--s)) var(--akzent),0 4px 16px rgba(0,0,0,.85)}

#uhr{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:calc(18px * var(--s))}
#inhalt.unten-links #uhr,#inhalt.oben-links #uhr{align-items:flex-start}
#inhalt.unten-rechts #uhr{align-items:flex-end}
#uhr[hidden]{display:none}
#zeit{font:400 calc(150px * var(--s))/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.03em;font-variant-numeric:tabular-nums;text-shadow:0 0 calc(20px * var(--s)) var(--akzent),0 6px 18px rgba(0,0,0,.85)}
#uhr.fertig #zeit{font-size:calc(84px * var(--s))}
.balken{display:none;width:calc(560px * var(--s));height:calc(12px * var(--s));margin-top:calc(16px * var(--s));border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.balken i{display:block;height:100%;background:var(--akzent);box-shadow:0 0 16px var(--akzent);transform-origin:0 50%;transform:scaleX(0)}
#uhr.stil-balken .balken{display:block}
#uhr.fertig .balken,#uhr.hoch .balken{display:none}

.ring{display:none}
#uhr.stil-ring{width:calc(380px * var(--s));height:calc(380px * var(--s));justify-content:center;align-items:center!important}
#uhr.stil-ring .ring{display:block;position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
#uhr.stil-ring #zeit{font-size:calc(118px * var(--s))}
#uhr.stil-ring.fertig #zeit{font-size:calc(52px * var(--s));text-align:center;max-width:80%;line-height:1.05}
.ring circle{fill:none;stroke-width:4}
.ring .spur{stroke:rgba(255,255,255,.16);fill:rgba(0,0,0,.25)}
.ring .fortschritt{stroke:var(--akzent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 3px var(--akzent))}
#uhr.fertig .fortschritt,#uhr.hoch .fortschritt{stroke-dashoffset:0}

/* Titel-Animationen */
@keyframes leuchten{0%,100%{text-shadow:0 0 calc(18px * var(--s)) var(--akzent),0 6px 22px rgba(0,0,0,.85)}50%{text-shadow:0 0 calc(46px * var(--s)) var(--akzent),0 0 calc(90px * var(--s)) var(--akzent),0 6px 22px rgba(0,0,0,.85)}}
@keyframes puls{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-14px * var(--s)))}}
#titel.anim-leuchten{animation:leuchten 3s ease-in-out infinite}
#titel.anim-puls{animation:puls 2.4s ease-in-out infinite}
#titel.anim-schweben{animation:schweben 4s ease-in-out infinite}
#uhr.fertig #zeit{animation:puls 1.6s ease-in-out infinite}

#leer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:24px 32px;max-width:1200px;background:rgba(0,0,0,.75);border-left:6px solid #ff0000;font:500 40px/1.3 "Barlow",sans-serif;color:#fff}

/* ---------- Ladebalken-Stil und Statuszeilen ---------- */
.lade{display:none;order:2;align-items:baseline;justify-content:space-between;gap:calc(24px * var(--s));width:100%;margin-top:calc(14px * var(--s));font:500 calc(36px * var(--s))/1.2 "Barlow",sans-serif;color:var(--unter);text-shadow:0 2px 10px rgba(0,0,0,.9)}
.lade b{display:none;font:700 calc(36px * var(--s))/1.2 "Barlow",sans-serif;font-variant-numeric:tabular-nums;color:var(--text)}
#uhr.mit-spruch .lade,#uhr.stil-lade .lade{display:flex}
#uhr.mit-spruch:not(.stil-lade) .lade{justify-content:center;text-align:center}
#spruch{transition:opacity .35s}
#spruch.aus,#zeile.aus{opacity:0}
#zeile{transition:opacity .35s}
#uhr.fertig .lade{display:none!important}
#uhr .balken{order:1}
#uhr #zeit{order:0}

#uhr.stil-lade{width:calc(900px * var(--s))}
#uhr.stil-lade .lade{justify-content:space-between;text-align:left;margin-top:calc(8px * var(--s));order:1}
#uhr.stil-lade .lade b{display:block}
#uhr.stil-lade .balken{display:block;order:2;width:100%;height:calc(28px * var(--s));margin-top:calc(10px * var(--s));border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.5);border-radius:calc(6px * var(--s))}
#uhr.stil-lade .balken i{border-radius:calc(3px * var(--s))}
#uhr.stil-lade #zeit{order:3;font-size:calc(84px * var(--s));margin-top:calc(14px * var(--s));align-self:center}
#uhr.stil-lade.fertig #zeit{font-size:calc(84px * var(--s))}
#uhr.stil-lade.fertig .balken,#uhr.stil-lade.hoch .balken{display:none}
#uhr.stil-lade.hoch .lade b{display:none}

/* ---------- Glitch-Titel: Kopien mit Cyan/Magenta, dünne Streifen springen kurz hin und her ---------- */
#titel.glitch{position:relative}
#titel.glitch::before,#titel.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;text-shadow:none;clip-path:inset(0 0 100% 0);animation-timing-function:steps(1,end);animation-iteration-count:infinite}
#titel.glitch::before{color:#00e5ff;animation-name:glitch-a}
#titel.glitch::after{color:#ff2bd6;animation-name:glitch-b}
#titel.glitch-selten::before,#titel.glitch-selten::after{animation-duration:7s}
#titel.glitch-oft::before,#titel.glitch-oft::after{animation-duration:2.6s}
@keyframes glitch-a{
  0%,86%{clip-path:inset(0 0 100% 0);transform:translate(0)}
  87%{clip-path:inset(12% 0 68% 0);transform:translate(calc(-7px * var(--s)),0)}
  89%{clip-path:inset(58% 0 18% 0);transform:translate(calc(5px * var(--s)),0)}
  91%{clip-path:inset(32% 0 44% 0);transform:translate(calc(-4px * var(--s)),0)}
  93%{clip-path:inset(72% 0 6% 0);transform:translate(calc(7px * var(--s)),0)}
  95%{clip-path:inset(4% 0 86% 0);transform:translate(calc(-3px * var(--s)),0)}
  97%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}
}
@keyframes glitch-b{
  0%,87%{clip-path:inset(0 0 100% 0);transform:translate(0)}
  88%{clip-path:inset(40% 0 40% 0);transform:translate(calc(6px * var(--s)),0)}
  90%{clip-path:inset(8% 0 78% 0);transform:translate(calc(-6px * var(--s)),0)}
  92%{clip-path:inset(66% 0 12% 0);transform:translate(calc(4px * var(--s)),0)}
  94%{clip-path:inset(24% 0 56% 0);transform:translate(calc(-7px * var(--s)),0)}
  96%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}
}

/* ---------- Röhren-Look (CRT/VHS): Scanlines, Rauschen, Flackern, Störband, dunkle Ränder ---------- */
#crt{position:absolute;inset:0;pointer-events:none;display:none;overflow:hidden}
#buehne.crt-leicht #crt,#buehne.crt-stark #crt{display:block}
#crt i{position:absolute;display:block}
#crt .scan{inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.2) 3px,rgba(0,0,0,.2) 4px)}
#crt .rand{inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 52%,rgba(0,0,0,.6) 100%)}
#crt .rausch{inset:-140px;background-size:128px 128px;opacity:.055;animation:crt-rauschen .6s steps(1) infinite}
#buehne.crt-stark #crt .rausch{opacity:.1}
@keyframes crt-rauschen{
  0%{transform:translate(0,0)}17%{transform:translate(-37px,23px)}33%{transform:translate(61px,-41px)}
  50%{transform:translate(-20px,-70px)}67%{transform:translate(45px,52px)}83%{transform:translate(-66px,10px)}
}
#crt .flackern,#crt .rollen{display:none}
#buehne.crt-stark #crt .flackern{display:block;inset:0;background:#fff;opacity:0;animation:crt-flackern 4s steps(1) infinite}
@keyframes crt-flackern{0%,100%{opacity:0}12%{opacity:.07}13%{opacity:0}58%{opacity:.045}59%{opacity:.01}60%{opacity:0}}
#buehne.crt-stark #crt .rollen{display:block;left:0;width:100%;height:170px;top:0;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.09),rgba(255,255,255,0));animation:crt-rollen 8s linear infinite}
@keyframes crt-rollen{0%{transform:translateY(-220px)}100%{transform:translateY(1100px)}}
/* stark: leichter Farbversatz auf allem Sichtbaren */
#buehne.crt-stark #inhalt{filter:drop-shadow(calc(2px * var(--s)) 0 0 rgba(255,0,70,.55)) drop-shadow(calc(-2px * var(--s)) 0 0 rgba(0,229,255,.55))}

/* Ring-Stil: Statuszeile unter dem Ring statt im Ring */
#uhr.stil-ring .lade{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(1000px * var(--s))}

/* ---------- Look-Filter: verfremdet den Hintergrund (Bild, Video, gezeichnetes Design), Texte bleiben lesbar ---------- */
#lookebene{position:absolute;inset:0;pointer-events:none;display:none;overflow:hidden}
#buehne.look-sw #lookebene,#buehne.look-vhs #lookebene,#buehne.look-pixel #lookebene{display:block}
#lookebene i{position:absolute;display:none}
#lookebene .korn,#lookebene .statik{inset:-140px;background-size:128px 128px}
/* Schwarzweiß mit Körnung */
#buehne.look-sw #hg,#buehne.look-sw #video,#buehne.look-sw #bild,#buehne.look-sw #bild2{filter:grayscale(1) contrast(1.18) brightness(.95)}
#buehne.look-sw .korn{display:block;opacity:.2;mix-blend-mode:overlay;animation:crt-rauschen .5s steps(1) infinite}
#buehne.look-sw .gitter{display:block;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
/* Horror-VHS: rötlich, Rauschen, wanderndes Störband, kurze Rauschblitze, Farbversatz */
#buehne.look-vhs #hg,#buehne.look-vhs #video,#buehne.look-vhs #bild,#buehne.look-vhs #bild2{filter:saturate(.7) contrast(1.15) sepia(.3) hue-rotate(-14deg) brightness(.92)}
#buehne.look-vhs .korn{display:block;opacity:.14;animation:crt-rauschen .4s steps(1) infinite}
#buehne.look-vhs .gitter{display:block;inset:0;background:radial-gradient(ellipse at center,rgba(70,0,0,.08) 35%,rgba(110,0,0,.6) 100%)}
#buehne.look-vhs .band{display:block;left:0;width:100%;height:150px;top:0;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.12) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.12) 55%,rgba(255,255,255,0));animation:vhs-band 7s linear infinite}
@keyframes vhs-band{0%{transform:translateY(-200px)}100%{transform:translateY(1300px)}}
#buehne.look-vhs .statik{display:block;opacity:0;animation:vhs-statik 9s steps(1) infinite}
@keyframes vhs-statik{0%,100%{opacity:0}66%{opacity:.5}67%{opacity:0}68%{opacity:.32}69%{opacity:0}}
#buehne.look-vhs #inhalt{filter:drop-shadow(calc(3px * var(--s)) 0 0 rgba(255,0,60,.6)) drop-shadow(calc(-3px * var(--s)) 0 0 rgba(0,220,255,.45))}
/* Pixel-Retro: grobe Pixel (Zeichenfläche ist nur 1/6 so groß), kräftigere Farben, feines Gitter */
#buehne.look-pixel #hg{image-rendering:pixelated}
#buehne.look-pixel #hg,#buehne.look-pixel #video,#buehne.look-pixel #bild,#buehne.look-pixel #bild2{filter:contrast(1.2) saturate(1.35)}
#buehne.look-pixel .gitter{display:block;inset:0;background:linear-gradient(to right,rgba(0,0,0,.2) 1px,rgba(0,0,0,0) 1px),linear-gradient(to bottom,rgba(0,0,0,.2) 1px,rgba(0,0,0,0) 1px);background-size:6px 6px}

/* ---------- Bildbewegung (Ken-Burns): das eigene Bild zoomt langsam hin und her, optional mit Schwenk ---------- */
#buehne.kb-zoom #bild,#buehne.kb-zoom #bild2{animation:kb-zoom var(--kbdauer,56s) ease-in-out infinite alternate}
#buehne.kb-schwenk #bild,#buehne.kb-schwenk #bild2{animation:kb-schwenk var(--kbdauer,56s) ease-in-out infinite alternate}
@keyframes kb-zoom{from{transform:scale(1)}to{transform:scale(1.16)}}
@keyframes kb-schwenk{from{transform:scale(1.14) translate(-2.5%,-1.5%)}to{transform:scale(1.14) translate(2.5%,1.5%)}}
@media (prefers-reduced-motion:reduce){#buehne.kb-zoom #bild,#buehne.kb-schwenk #bild,#buehne.kb-schwenk #bild2{animation:none}}

/* Datei-Export (export.js): beim Ablesen des Layouts ruhen Animationen und der Countdown fehlt */
#buehne.export *{animation:none!important;transition:none!important}
#buehne.export #uhr{display:none!important}