body {background: #000000}

:root{
    --pad: clamp(14px, 5vw, 28px);
}

/* Font */
@font-face{
  font-family: "Plaax Pradel";
  src: url("../fonts/205TF-Plaax-33-Pradel-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Plaax Pradel";
  src: url("../fonts/205TF-Plaax-43-Pradel-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

h1{
  margin: 0;
  font-family: "Plaax Pradel", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 10.5vw, 80px);
  line-height: 0.9;
  text-transform: uppercase;
  color: #fff;
}

h1 a{
  color: inherit;
  text-decoration: none;
}

h1 a:hover{
  opacity: 0.70;
}

h2{
  margin: 0;
  font-family: "Plaax Pradel", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 6.5vw, 50px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

h2 a{
  color: inherit;
  text-decoration: none;
}

h2 a:hover{
  opacity: 0.70;
}


p{
  margin: 0;
  font-family: "Funnel Sans", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  color: #fff;
}

p a{
  color: inherit;
  text-decoration: none;
}

p a:hover{
  opacity: 0.70;
}


.ui{
  position: fixed;
  inset: 0;
  padding: var(--pad);
  z-index: 10;
  pointer-events: none;   /* optional: nur Links klickbar */
}
.ui a{ pointer-events: auto; }

/* Positioning */
.ui__tl{ position: absolute; top: var(--pad); left: var(--pad); }
.ui__tr{ position: absolute; top: var(--pad); right: var(--pad); text-align: right; }
.ui__bl{ position: absolute; bottom: var(--pad); left: var(--pad); }
.ui__br{ position: absolute; bottom: var(--pad); right: var(--pad); text-align: right; }
.ui__bc{ position: absolute; bottom: var(--pad); left: 50%; transform: translateX(-50%); white-space: nowrap; }

.center{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.center p{
  margin: 0;
  font-size: clamp(16px, 2.5vw, 22px);
  text-align: center;
  color: #fff;
  width: 50vw;
  max-width: 50%;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 768px){
  .center p{
    width: 85vw;
    max-width: 85%;
  }
}


@supports (padding: max(0px)) {
  .ui{
    padding:
      max(var(--pad), env(safe-area-inset-top))
      max(var(--pad), env(safe-area-inset-right))
      max(var(--pad), env(safe-area-inset-bottom))
      max(var(--pad), env(safe-area-inset-left));
  }
  .ui--bc{
    padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
  }
}


.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
}

.modal:target{
  display: block;
}

.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.0); /* falls du klickfläche willst ohne sichtbaren overlay */
}

.modal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(420px, 85vw);
  padding: 28px;
  background: #000;
}

.modal__close{
  display: inline-block;
  margin-bottom: 18px;
  color: #fff;
  text-decoration: none;
  opacity: .9;
  font-family: "Funnel Sans", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
}

.modal__text{
  margin: 0;
  font-family: "Funnel Sans", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: #fff;
}


.ui__tl,
.ui__tr,
.ui__bl,
.ui__bc,
.ui__br{
  overflow: hidden;
}

.ui__tl,
.ui__tr{
  max-width: 48%;
}

.ui__bl,
.ui__bc,
.ui__br{
  max-width: 32%;
}

.ui__bc{
  text-align: center;
  white-space: normal;
}




.bg{
  position: fixed;
  inset: 0;
  z-index: 0; 
  pointer-events: none;
}

.bg__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
}

.bg__img.is-active{
  opacity: 0.3;
}