/*
Theme Name: WurmtalBlick Frech
Theme URI: https://wurmtalblick.de/
Author: WurmtalBlick
Description: Freches, responsives One-Page-Theme für WurmtalBlick.de mit Live-Kamerabild.
Version: 1.0.0
Text Domain: wurmtalblick
*/

:root{
  --wtb-black:#050505;
  --wtb-pink:#ff2d68;
  --wtb-acid:#c9ff00;
  --wtb-max:1248px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--wtb-black)}
body{
  min-height:100vh;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}

#page{
  width:100%;
}

.wtb-stage{
  position:relative;
  width:min(100vw,var(--wtb-max));
  margin:0 auto;
  aspect-ratio:1/1;
  background:#111;
  overflow:hidden;
}

.wtb-live{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:1;
}

.wtb-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:2;
  pointer-events:none;
  user-select:none;
}

.wtb-fallback{
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 70% 35%,rgba(255,198,97,.75),transparent 15%),
    linear-gradient(#4f5664 0 45%,#415d3e 45% 100%);
  color:#fff;
  text-align:center;
  padding:2rem;
  font-weight:900;
}

.wtb-live.is-loaded + .wtb-fallback{
  opacity:0;
}

.wtb-footer{
  max-width:var(--wtb-max);
  margin:0 auto;
  padding:14px 18px 28px;
  text-align:center;
  color:#aaa;
  font-size:13px;
  background:var(--wtb-black);
}
.wtb-footer a{color:#ccc;text-decoration:none}
.wtb-footer a:hover{text-decoration:underline}

.admin-bar .wtb-stage{margin-top:0}

@media (max-width:782px){
  .wtb-stage{
    width:100vw;
    aspect-ratio:1/1;
  }
  .wtb-live{
    object-position:center;
  }
}

@media (min-width:1249px){
  .wtb-stage{width:1248px}
}