* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

body{
  margin: 0;
  font-family: "Montserrat", sans-serif;
  color: #fff;
}

.page--legal{
  background: #162333;
  color: #fff;
}

/* =========================
   TOPBAR / NAV (wie Index)
========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgb(255, 255, 255);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.topbar__inner{
  width: min(1200px, 92%);
  margin: 0 auto;
  height: 65px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: 10px;
}

.brand{ justify-self: start; }
.brand img{ height: 60px; display: block; }

.topnav{
  justify-self: center;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 26px);
}

.topnav__link{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;

  color: #0b1e33;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 0 6px;

  opacity: 0.55;
  transition: transform 240ms ease, opacity 180ms ease;
}

.topnav__link:hover{
  opacity: 1;
  transform: scale(1.04);
}

.topnav__link.is-active{ opacity: 1; }

.topnav__link.is-active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  background: #162333;
  border-radius: 3px;
}

.topbar__right{
  justify-self: end;
  display: flex;
  align-items: center;
}

.burger{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 4px;

  border: 1px solid rgba(11,30,51,0.16);
  background: rgba(11, 30, 51, 0.075);
  box-shadow: 0 0px 12px rgba(0,0,0,0.08);

  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;

  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
  color: #162333;
}

.burger:hover{
  transform: translateY(-1px);
  background: rgba(11,30,51,0.10);
  border-color: rgba(11,30,51,0.26);
}

.burger__icon{
  width: 22px;
  height: 22px;
  display: block;
}

.burger__icon--close{ display: none; }

html.menu-open .burger__icon--menu{ display: none; }
html.menu-open .burger__icon--close{ display: block; }

.mobile-menu{
  position: absolute;
  left: 0;
  right: 0;
  top: 65px;
  background: rgb(225, 225, 225);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms ease, opacity 220ms ease;
}

.mobile-menu__nav{
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-menu__link{
  color: #0b1e33;
  text-decoration: none;
  font-weight: 650;
  font-size: 16px;
  padding: 12px 10px;
  border-radius: 5px;
  background: rgba(11, 30, 51, 0);
}

.mobile-menu__link.is-active{
  background: rgba(11, 30, 51, 0.057);
}

.menu-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.121);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

html.menu-open .mobile-menu{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

html.menu-open .menu-backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   HERO
========================= */
.legal-hero{
  position: relative;
  height: clamp(240px, 20vh, 320px);
  overflow: hidden;
}

.legal-hero__bg{
  background-image: url("/assets/img/impressumImgResized.webp");
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  transform: scale(1.08);
}

.legal-hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.671) 0%,
    rgba(0, 0, 0, 0.29) 60%,
    rgba(0, 0, 0, 0.283) 100%
  );
}

.legal-hero__content {
  position: relative;
  z-index: 1;
  width: min(1300px, 92%);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: 22px;
}

.legal-hero__content h1 {
  font-size: clamp(44px, 6vw, 20px);
  font-weight: 600;
  letter-spacing: 0.9px;
  color: #ffffff;
  margin: 0;
}

.legal{
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 42px 0 70px 0;
}

.legal__card{
  text-align: center;
  padding: 26px 18px 30px 18px;
  margin-top: 80px;
}

.legal__card h2{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.legal__subtitle{
  margin: 8px 0 26px 0;
  opacity: 0.9;
  font-weight: 600;
}

.legal__card{
  background: #fff;
  color: #162333;
  padding: 28px;

  box-shadow: 0 25px 60px rgba(0,0,0,.18);

  display:flex;
  flex-direction:column;
  gap:18px;
}

.legal__card p{
  margin: 0 0 18px 0;
  line-height: 1.75;
  font-size: 15px;
  opacity: 0.95;
}

.legal__small{
  font-size: 13px;
  opacity: 0.9;
}

.legal__notice{
  border-top:1px solid #e6e6e6;
  padding-top:14px;
}

.legal__notice h3{
  margin:0 0 8px;
  font-size:14px;
  color:#10294a;
}

.legal__notice p{
  font-size:12px;
  line-height:1.5;
  margin:0 0 8px;
  color:#444;
}

.legal__block{
  background:#f6f8fb;
  border-left:4px solid #10294a;
  border-radius:10px;
  padding:14px;
}

.legal__block h3{
  margin:0 0 10px;
  font-size:14px;
  color:#10294a;
}

.legal__block p{
  margin:0 0 6px;
  font-size:12.5px;
  line-height:1.5;
}

.legal__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.legal__header{
  text-align:left;
  border-bottom:1px solid #eee;
  padding-bottom:12px;
}

.legal__header h2{
  margin:0;
  font-size:28px;
  color:#10294a;
}

.legal__header p{
  margin:4px 0 0;
  font-size:12px;
  color:#666;
}

/* =========================
   HERO / VIDEO
========================= */
.hero{
  position: relative;
  height: 30vh;
  min-height: 220px;
  max-height: 320px;
  overflow: hidden;
  --video-scale: 1;
}

.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--video-scale));
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.65) 100%
  );
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px){

  .cards{
    grid-template-columns:1fr 1fr;
  }

  .about__container{
    grid-template-columns:1fr;
  }

  .legal{
    margin-top: 20px;
  }

  .legal__grid{
    grid-template-columns:1fr;
  }

  .legal-hero{
    padding-left: 20px;
    height: 180px;
  }
}

@media (max-width: 600px){
  .cards{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .hero {
   --video-scale: 1.35;
   height: clamp(200px, 48vh, 360px); 
  }
}

@media (min-width:1200px) and (min-height:800px){

  .legal__card{
    padding:22px;
  }

  .legal__block p,
  .legal__notice p{
    font-size:11.5px;
  }
}

@media (max-width: 900px){
  .topnav{ display: none; }
  .burger{ display: inline-flex; }
  .brand img{ height: 30px; }
  .topbar__inner{ grid-template-columns: auto 1fr auto; }
}

@media (max-width: 900px) {
  .legal-hero__bg {
    background-size: 350%;
    background-position: center 39%;
    transform: none;
  }

  .legal-hero {
    height: clamp(24px, 40vh, 200px);
  }
}

@media (max-width: 900px) {
  .legal-hero .legal-hero__content{
    justify-content: center !important;
    text-align: center !important;
    transform: translateY(-54px);
  }

  .legal-hero .legal-hero__content h1{
    width: 100%;
    margin: 0 auto !important;
    text-align: center !important;
  }
}