/*
    Theme Name: Was fehlt?
    Author: Birke und Partner GmbH (Pedro Stoehr)
    Author URI: https://birke.de
     __                           
    /\ \                          
    \ \ \____  __  __  _____      
     \ \  __ \/\ \/\ \/\  __ \    
      \ \ \_\ \ \ \_\ \ \ \_\ \ __ 
       \ \____/\ \____/\ \  __//\_\
        \/___/  \/___/  \ \ \/ \/_/
                         \ \_\    
                          \/_/      
*/

/* ------------------------------------------------------------------------
// ANCHOR Imports
------------------------------------------------------------------------ */

@import url('assets/fonts/Mulish/Mulish.css');

/* ------------------------------------------------------------------------
// ANCHOR Vars
------------------------------------------------------------------------ */

:root {
    --theme-font: Mulish, sans-serif;
    --theme-color-petrol: rgb(0,85,90); /* 00555A */
    --theme-color-teal: rgb(108,178,159); /* 6CB29F */
    --theme-color-lightblue: rgb(137,171,219); /* 89ABDB */
    --theme-color-blue: rgb(57,78,207); /* 394ECF */
    --theme-color-yellow: rgb(255,176,0); /* FFB000 */
    --theme-color-red: rgb(217,53,59); /* D9353B */
    --theme-color-purple: rgb(175,78,163); /* AF4EA3 */
    --countdown-size: clamp(4rem, 8vw, 12rem);
}

/* ------------------------------------------------------------------------
// ANCHOR Reset
------------------------------------------------------------------------ */

*,::before,::after{box-sizing:border-box}
*{margin:0}
body{line-height:1.5;-webkit-font-smoothing:antialiased}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
p{text-wrap:pretty}
h1,h2,h3,h4,h5,h6{text-wrap:balance}
#root,#__next{isolation:isolate}
@media (prefers-reduced-motion: no-preference) {
  html{interpolate-size:allow-keywords}
}

/* ------------------------------------------------------------------------
// SECTION Globals
------------------------------------------------------------------------ */

/* ANCHOR html, body */

html,
body {
  background-color: var(--theme-color-petrol);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  color: #000;
  font-family: var(--theme-font);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.4;
  position: relative;
}

a {
  color: var(--theme-color-petrol)
}

/* ANCHOR BASE */

.base {
  position: relative;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  justify-content: center;
  z-index: 2;
}

.base {
  opacity: 0;
  will-change: transform, opacity;
  animation: motifFadeInPure 1s ease-out 0.5s forwards;
}

.base .inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

.base h1 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}
.base p {
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.base br {
  display: none;
}

/* ANCHOR theW */

.theW {
  position: fixed;
  right: -4px;
  bottom: -4px;
  z-index: 1;
}

.theW svg {
  display: block;
  aspect-ratio: 600 / 540;
  width: min(90vw, calc(90svh * 600 / 540));
  height: auto;
  stroke: var(--theme-color-yellow);
  fill: none;
  stroke-width: 1.5px;
  stroke-miterlimit: 10;
}

.theW {
  opacity: 0;
  will-change: transform, opacity;
  animation: motifFadeInPure 3s ease-out 1.5s forwards;
}

/* ANCHOR Countdown */

#countdown {
  font-size: var(--countdown-size);
  color: var(--theme-color-lightblue);
  font-weight: 700;
  text-align: center;
  line-height: 1;
  margin-bottom: 2rem;
  z-index: 3;
}

/* ANCHOR Overlays */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(137,171,219, 1);
  display: flex;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 999;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#overlay-cta.overlay{
  background: rgba(255,176,0,1);
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}

.overlay__content {
  color: var(--theme-color-petrol);
  padding: 2rem;
  max-width: 1100px;
  width: 100%;
  margin: auto; 
  position: relative;
  z-index: 42;
}

.overlay__content h2 {
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}
.overlay__content h3 {
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.overlay__content p {
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 500;
  margin-bottom: 1rem;
}

.overlay__content.small p {
  font-size: 1rem;
}

.overlay__close {
  position: absolute; 
  top: .5rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--theme-color-petrol);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  z-index: 50;
}

html > body .overlay__close {
  position: fixed;
}

.overlay__close:hover {
  opacity: 0.8;
}

.overlay-trigger.info {
  color: var(--theme-color-lightblue);
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: clamp(1.5rem, 4vw, 3rem);
}

.overlay-trigger.cta {
  position: absolute;
  display: block;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 3rem;
  background-color: var(--theme-color-yellow);
  color: var(--theme-color-petrol);
  font-weight: 800;
  text-decoration: none;
  z-index: 42;
  text-align: center;
  border-radius: 8px;
}

.legal {
  color: var(--theme-color-lightblue);
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
  font-size: .9rem;
  text-transform: uppercase;
  z-index: 23;

}

/* ANCHOR ACTIONS */

.action-wrap {
  max-width: clamp(320px, 90vw, 720px);
  margin: 0 auto;
}

.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding: .75rem 2rem;
  border-radius: 10px;
  background: var(--theme-color-lightblue);
  color: var(--theme-color-petrol);
  text-decoration: none;
  cursor: pointer;
  font-weight: 800;
  text-transform: uppercase;
}

.btn:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

.btn svg {
  width: 1.5em;
  height: 1.5em;
  fill: currentColor;
  flex: 0 0 auto;
}

.btn-secondary {
  background: var(--theme-color-yellow);
}

/* ANCHOR iFrame */

.iframe-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  padding-top: 1rem;
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/* !SECTION */

/* ANCHOR Animations */

@keyframes motifFadeIn {
  0% {
    opacity: 0;
    filter: blur(12px);
  }
  60% {
    opacity: 1;
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes motifFadeInPure {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blurPulse {
  0%, 100% {
    filter: blur(0);
  }
  50% {
    filter: blur(3px);
  }
}

/* ------------------------------------------------------------------------
// SECTION Responsive, Baby!
------------------------------------------------------------------------ */

/* ANCHOR Beyond */

@media (min-width: 1440px) {}

/* ANCHOR Extra large */

@media screen and (min-width: 1200px){}

/* ANCHOR Large */

@media screen and (min-width: 992px){

  #countdown {
    margin-bottom: 2rem;
  }

  .legal {
      position: absolute;
  bottom: 1rem;
  left: 1rem;
  }

}

/* ANCHOR Small + Medium */

@media screen and (max-width: 991.98px){

.legal {
    text-align: center;
  display: block;
  width:100%;
  padding: 2rem 0;
}

}

/* ANCHOR Medium */

@media screen and (min-width: 576px) and (max-width: 991.98px){}

/* ANCHOR Small */

@media screen and (max-width: 575.98px){ 

  .actions { grid-template-columns: 1fr; gap:1rem }

  .iframe-container {
    width: 100%;
    aspect-ratio: 2 / 4;
    position: relative;
  }

}

/* Large desktops and high-resolution screens (1025px and up) */
@media (min-width: 1025px) {

  .overlay-trigger.info{
    left: 2rem
  }

  .legal {
    left: 2rem;
    bottom: 2rem
  }

  .overlay__content h2,
  .overlay__content p {
    margin-bottom: 1.5rem;
  }

  .base p {
    margin-bottom: 1.5rem;
  }

  .base br {
  display: inline;
  content: "";
}

.ical__label {
  display: block
}

}

/* !SECTION */

/*! END OF LINE */