/* Reede - Werbevorlagen fuer die OBS-Browserquelle.
   Alle Groessen in cqw: 1cqw ist ein Prozent der Buehnenbreite. Die Buehne
   ist in OBS 1920 breit, in der Vorschau schmaler - die Vorlagen sehen
   dadurch an beiden Stellen identisch aus. */

#buehne{position:fixed;inset:0;container-type:inline-size;overflow:hidden}

/* ---------- ad layer ---------- */
.ad{position:absolute;inset:0;pointer-events:none;--ac:var(--accent);--on:#0B171C}
.ad *{box-sizing:border-box}
.h1l{font-family:var(--cond);font-weight:800;text-transform:uppercase;line-height:.94;letter-spacing:.005em}
.h2l{font-family:var(--mono);font-weight:400;letter-spacing:.1em;text-transform:uppercase}
/* Beide Textzeilen bleiben einzeilig. Ist der Text laenger als die Flaeche,
   verkleinert vorlagen.js die Schrift, bis er hineinpasst - abgeschnittene
   Werbung waere schlimmer als etwas kleinere Schrift. */
.h1l,.h2l{white-space:nowrap}

/* Reeder */
.ship{position:absolute;bottom:6.5cqw;left:0;width:60cqw;height:20cqw;animation:sail var(--dur) linear both}
@keyframes sail{from{transform:translateX(112cqw)}to{transform:translateX(-64cqw)}}
.bob{position:absolute;inset:0;animation:bob 4.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-.5cqw) rotate(.25deg)}}
.ship__hull{position:absolute;bottom:0;left:0;width:60cqw;height:6.4cqw;background:#13262E;
  clip-path:polygon(0 0,100% 0,96% 100%,15% 100%);box-shadow:inset 0 .35cqw 0 rgba(255,255,255,.1)}
.ship__stripe{position:absolute;bottom:4.4cqw;left:3cqw;width:54cqw;height:.6cqw;background:var(--ac);opacity:.9}
.ship__cargo{position:absolute;bottom:6.4cqw;left:7cqw;width:40cqw;height:9.6cqw;background:var(--ac);
  display:flex;flex-direction:column;justify-content:center;padding:0 2cqw;gap:.5cqw;color:var(--on)}
.ship__cargo::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.17) 0 .2cqw,transparent .2cqw 3.2cqw)}
.ship__cargo .h1l{font-size:4.1cqw;position:relative;z-index:1}
.ship__cargo .h2l{font-size:1.5cqw;position:relative;z-index:1;opacity:.82}
.ship__bridge{position:absolute;bottom:6.4cqw;right:2.5cqw;width:7cqw;height:7cqw;background:#DDE6E5;
  background-image:repeating-linear-gradient(180deg,#13262E 0 .5cqw,transparent .5cqw 2.2cqw)}
.wake{position:absolute;bottom:-.6cqw;left:8cqw;width:46cqw;height:2cqw;border-radius:50%;
  background:rgba(255,255,255,.18);filter:blur(.6cqw)}

/* Kreuzfahrt */
.cruise{position:absolute;bottom:7.5cqw;left:0;width:48cqw;height:24cqw;animation:cruise var(--dur) cubic-bezier(.3,0,.25,1) both}
@keyframes cruise{0%{transform:translateX(-56cqw)}22%{transform:translateX(22cqw)}72%{transform:translateX(27cqw)}100%{transform:translateX(108cqw)}}
.cruise__hull{position:absolute;bottom:0;left:0;width:48cqw;height:5.2cqw;background:#0E2027;
  clip-path:polygon(0 0,100% 0,88% 100%,4% 100%)}
.cruise__decks{position:absolute;bottom:5.2cqw;left:3cqw;width:41cqw;height:5.6cqw;background:#F1F5F4;
  background-image:repeating-linear-gradient(180deg,transparent 0 1.1cqw,rgba(14,32,39,.55) 1.1cqw 1.5cqw)}
.cruise__funnel{position:absolute;bottom:10.8cqw;right:9cqw;width:3.4cqw;height:3.4cqw;background:var(--ac);border-radius:.4cqw .4cqw 0 0}
.cruise__mast{position:absolute;bottom:10.8cqw;left:5cqw;width:.45cqw;height:11cqw;background:#E8EFEE}
.flag{position:absolute;bottom:15cqw;left:5cqw;width:30cqw;height:6.4cqw;background:var(--ac);color:var(--on);
  transform-origin:left center;animation:unfurl var(--dur) cubic-bezier(.2,.9,.2,1) both;
  display:flex;flex-direction:column;justify-content:center;padding:0 1.6cqw;gap:.35cqw;
  clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%)}
@keyframes unfurl{0%,20%{transform:scaleX(0)}34%,74%{transform:scaleX(1)}88%,100%{transform:scaleX(0)}}
.flag .h1l{font-size:3.1cqw}
.flag .h2l{font-size:1.3cqw;opacity:.8}

/* Schildträger */
.walker{position:absolute;bottom:5.5cqw;left:0;width:26cqw;height:30cqw;animation:walkin var(--dur) cubic-bezier(.35,0,.3,1) both}
@keyframes walkin{0%{transform:translateX(-30cqw)}20%{transform:translateX(11cqw)}80%{transform:translateX(11cqw)}100%{transform:translateX(-30cqw)}}
.walker__legs{position:absolute;bottom:0;left:9.4cqw;width:5cqw;height:8cqw}
.leg{position:absolute;top:0;width:1.7cqw;height:8cqw;background:#12252C;border-radius:.8cqw;transform-origin:top center}
.leg.a{left:0;animation:stepA var(--dur) linear both}
.leg.b{right:0;animation:stepB var(--dur) linear both}
@keyframes stepA{0%,19%{transform:rotate(18deg)}4%,15%{transform:rotate(-18deg)}20%,79%{transform:rotate(0)}84%,95%{transform:rotate(18deg)}100%{transform:rotate(-18deg)}}
@keyframes stepB{0%,19%{transform:rotate(-18deg)}4%,15%{transform:rotate(18deg)}20%,79%{transform:rotate(0)}84%,95%{transform:rotate(-18deg)}100%{transform:rotate(18deg)}}
.walker__body{position:absolute;bottom:7.2cqw;left:9cqw;width:5.8cqw;height:9.4cqw;background:#12252C;border-radius:1.6cqw 1.6cqw .5cqw .5cqw}
.walker__head{position:absolute;bottom:16.2cqw;left:10cqw;width:3.8cqw;height:3.8cqw;border-radius:50%;background:#12252C}
.walker__cap{position:absolute;bottom:19.2cqw;left:9.4cqw;width:5cqw;height:1cqw;background:var(--ac);border-radius:.5cqw}
.walker__arm{position:absolute;bottom:13cqw;left:13cqw;width:4.4cqw;height:1.5cqw;background:#12252C;border-radius:.8cqw;transform-origin:left center;
  animation:arm var(--dur) cubic-bezier(.25,.9,.3,1) both}
@keyframes arm{0%,20%{transform:rotate(48deg)}30%,76%{transform:rotate(-52deg)}86%,100%{transform:rotate(48deg)}}
.sign{position:absolute;bottom:15cqw;left:12.6cqw;width:24cqw;height:8.2cqw;background:var(--ac);color:var(--on);
  transform-origin:6% 130%;animation:raise var(--dur) cubic-bezier(.25,.9,.3,1) both;
  display:flex;flex-direction:column;justify-content:center;padding:0 1.6cqw;gap:.35cqw;
  box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.25)}
.sign::before{content:"";position:absolute;left:1.6cqw;top:100%;width:.8cqw;height:5cqw;background:#7A5330}
@keyframes raise{0%,20%{transform:rotate(-104deg)}31%,76%{transform:rotate(-2deg)}87%,100%{transform:rotate(-104deg)}}
.sign .h1l{font-size:3.1cqw}
.sign .h2l{font-size:1.25cqw;opacity:.8}

/* Containerkran */
.crane{position:absolute;top:0;right:9cqw;width:32cqw;animation:drop var(--dur) cubic-bezier(.4,0,.2,1) both}
@keyframes drop{0%{transform:translateY(-42cqw)}16%{transform:translateY(12cqw)}23%{transform:translateY(9.5cqw)}80%{transform:translateY(9.5cqw)}100%{transform:translateY(-42cqw)}}
.crane__swing{transform-origin:top center;animation:sway 5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(1.4deg)}50%{transform:rotate(-1.4deg)}}
.crane__cable{width:.3cqw;height:11cqw;margin:0 auto;background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.55))}
.crane__hook{width:2.2cqw;height:.9cqw;margin:0 auto;background:#B9C6C5;border-radius:.2cqw}
.crane__box{width:32cqw;height:13.5cqw;background:var(--ac);color:var(--on);position:relative;
  display:flex;flex-direction:column;justify-content:center;padding:0 2cqw;gap:.5cqw;
  box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.3);border-top:.5cqw solid rgba(0,0,0,.22)}
.crane__box::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.15) 0 .22cqw,transparent .22cqw 2.6cqw)}
.crane__box .h1l{font-size:3.6cqw;position:relative;z-index:1}
.crane__box .h2l{font-size:1.35cqw;position:relative;z-index:1;opacity:.8}

/* Kaikante (Lower Third) */
.lower{position:absolute;left:5cqw;bottom:9cqw;display:flex;align-items:stretch;
  animation:sweep var(--dur) cubic-bezier(.2,.9,.2,1) both}
@keyframes sweep{0%{clip-path:inset(0 100% 0 0)}12%,86%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
.lower__rail{width:1cqw;background:var(--ac)}
.lower__body{background:rgba(7,20,26,.84);backdrop-filter:blur(6px);padding:1.5cqw 3cqw 1.1cqw 2cqw;min-width:34cqw;max-width:80cqw;position:relative}
.lower__body .h1l{font-size:3.5cqw;color:#F2F7F6}
.lower__body .h2l{font-size:1.3cqw;color:#9FB6BB;margin-top:.5cqw}
.lower__bar{position:absolute;left:0;right:0;bottom:0;height:.35cqw;background:rgba(255,255,255,.12)}
.lower__bar i{display:block;height:100%;background:var(--ac);transform-origin:left;animation:drain var(--dur) linear both}
@keyframes drain{0%,12%{transform:scaleX(1)}86%,100%{transform:scaleX(0)}}

/* Postkarte */
.card{position:absolute;right:4.5cqw;bottom:10cqw;width:31cqw;background:rgba(8,22,28,.9);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);border-top:.45cqw solid var(--ac);padding:2cqw;display:flex;gap:1.6cqw;align-items:flex-start;
  animation:pop var(--dur) cubic-bezier(.2,.9,.2,1) both;box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.35)}
@keyframes pop{0%{opacity:0;transform:translateY(3cqw) scale(.96)}10%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(1.5cqw) scale(.98)}}
.card__tile{flex:0 0 auto;width:6cqw;height:6cqw;background:var(--ac);display:grid;place-items:center}
/* Ohne min-width:0 weigert sich ein Flex-Kind, schmaler zu werden als sein
   Text - die Karte waere dann breiter als vorgesehen und liefe aus dem Bild. */
.card>div{min-width:0}
.card__tile i{width:0;height:0;border-left:1.7cqw solid var(--on);border-top:1.1cqw solid transparent;border-bottom:1.1cqw solid transparent;margin-left:.4cqw}
.card .h1l{font-size:2.7cqw;color:#F2F7F6}
.card .h2l{font-size:1.25cqw;color:#9FB6BB;margin-top:.5cqw}
.card__bar{position:absolute;left:0;right:0;bottom:0;height:.3cqw;background:rgba(255,255,255,.1)}
.card__bar i{display:block;height:100%;background:var(--ac);transform-origin:left;animation:drain var(--dur) linear both}

/* Möwe */
.gull{position:absolute;top:7cqw;left:0;width:52cqw;height:10cqw;animation:fly var(--dur) linear both}
@keyframes fly{from{transform:translateX(-56cqw)}to{transform:translateX(106cqw)}}
.gull__wave{position:absolute;inset:0;animation:bob 3s ease-in-out infinite}
.gull__banner{position:absolute;left:0;top:1.4cqw;width:37cqw;height:7cqw;background:var(--ac);color:var(--on);
  display:flex;flex-direction:column;justify-content:center;padding:0 1.8cqw;gap:.3cqw;
  clip-path:polygon(0 12%,100% 0,100% 100%,0 88%)}
.gull__banner .h1l{font-size:3cqw}
.gull__banner .h2l{font-size:1.2cqw;opacity:.8}
.gull__line{position:absolute;left:37cqw;top:4.6cqw;width:5cqw;height:.2cqw;background:rgba(255,255,255,.55)}
.gull__bird{position:absolute;left:41cqw;top:2.6cqw;width:9cqw;height:5cqw}
.gull__body{position:absolute;left:1.6cqw;top:2cqw;width:6cqw;height:1.9cqw;border-radius:1cqw;background:#F3F7F6}
.gull__beak{position:absolute;left:7.4cqw;top:2.3cqw;width:0;height:0;border-left:1.4cqw solid var(--ac);border-top:.5cqw solid transparent;border-bottom:.5cqw solid transparent}
.wing{position:absolute;left:2.6cqw;top:1.9cqw;width:5.4cqw;height:2.4cqw;background:#F3F7F6;
  clip-path:polygon(0 50%,100% 0,78% 100%);transform-origin:0% 50%}
.wing.up{animation:flapU .46s ease-in-out infinite}
.wing.dn{animation:flapD .46s ease-in-out infinite}
@keyframes flapU{0%,100%{transform:rotate(-34deg)}50%{transform:rotate(4deg)}}
@keyframes flapD{0%,100%{transform:rotate(30deg)}50%{transform:rotate(-2deg)}}

/* Drohnenschwarm - die Punkte zeichnet vorlagen.js auf die Leinwand,
   hier steht nur die Tafel mit dem Text darunter. */
.swarm{position:absolute;inset:0}
.swarm__c{position:absolute;inset:0;width:100%;height:100%;display:block}
.swarm__text{position:absolute;left:50%;top:40.5cqw;transform:translateX(-50%);text-align:center;
  background:rgba(6,16,22,.62);backdrop-filter:blur(4px);padding:1.5cqw 4cqw 1.3cqw;
  border-bottom:.35cqw solid var(--ac);
  animation:schwarmtext var(--dur) cubic-bezier(.2,.9,.2,1) both}
@keyframes schwarmtext{
  0%,26%{opacity:0;transform:translateX(-50%) translateY(1.6cqw)}
  34%,70%{opacity:1;transform:translateX(-50%) translateY(0)}
  80%,100%{opacity:0;transform:translateX(-50%) translateY(-1cqw)}}
.swarm__text .h1l{font-size:4.7cqw;color:#F3F8F7}
.swarm__text .h2l{font-size:1.6cqw;color:var(--ac);margin-top:.75cqw}

@media (prefers-reduced-motion:reduce){
  .ad .ship,.ad .cruise,.ad .walker,.ad .crane,.ad .gull{animation:softfade var(--dur) both !important;transform:none !important}
  .ad .bob,.ad .leg,.ad .wing,.ad .crane__swing,.ad .gull__wave{animation:none !important;transform:none !important}
  .ad .sign,.ad .flag,.ad .walker__arm{animation:softfade var(--dur) both !important;transform:none !important}
  .ad .lower,.ad .card,.ad .swarm__text{animation:softfade var(--dur) both !important;transform:translateX(-50%) !important;clip-path:none !important}
  .ad .lower,.ad .card{transform:none !important}
  .ship{left:8cqw}.cruise{left:22cqw}.walker{left:11cqw}.gull{left:22cqw}.crane{transform:translateY(9.5cqw) !important}
  @keyframes softfade{0%{opacity:0}8%,88%{opacity:1}100%{opacity:0}}
}