* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body, footer{
  padding: 0;
  margin: 0;
}
p{
  margin: 0 0 10px;
}
html {
  font-size: 14px;
}
body {
  font-size: 1rem;
  line-height: 1.2;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-style: normal;
}
html, body, .wrapper{
  height: 100%;
}
.wrapper{
  background: linear-gradient(180deg, #74839c 0%, #727c99 35%, #716f94 70%, #6d6690 100%);
  position: relative;
  overflow: hidden;
}
.scene{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
.layer{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  will-change: transform;
}
.layer img{
  display: block;
  flex: none;
  height: 100%;
}
.plane{
  position: absolute;
  left: 56%;
  top: 50%;
  --plane-w: clamp(300px, min(46vw, 92vh), 1600px);
  width: var(--plane-w);
  margin-left: calc(var(--plane-w) / -2);
  margin-top: calc(var(--plane-w) * -0.14);
  will-change: transform;
}
.plane-body{
  display: block;
  width: 100%;
}
/* Positionen in Pixeln des Flieger-Bildes (1604 × 448), skaliert exakt mit */
.light{
  position: absolute;
  left: calc(var(--x) / 1604 * 100%);
  top: calc(var(--y) / 448 * 100%);
  width: var(--size, 4%);
  transform: translate(-50%, -50%);
  dynamic-range-limit: no-limit; /* HDR: heller als Seiten-Weiß, wo das Display es kann */
}
.light-nav{
  --size: 4.2%;
}
.light-strobe{
  --size: 9%;
  opacity: 0;
}
.light-beacon{
  --size: 6%;
  opacity: 0;
}
/* Invertierte Flieger-Silhouette als Maske: Inhalt erscheint nur neben dem Rumpf */
.light-mask{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-mask-image: linear-gradient(#000 0 0), url(../images/1x/ga7500.webp);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), url(../images/1x/ga7500.webp);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
.light-halo{
  --size: 14%;
}
.logo{
  position: relative;
  z-index: 2;
  padding: 86px 120px;
}
.logo img{
  width: 252px;
}
.main-footer{
  background-color: #232628;
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  right: 0;
}
.main-footer a{
  text-decoration: none;
  color: #ffffff;
}
.main-footer ul{
   list-style: none;
   padding: 12px 0;
   margin: 0;
   overflow: hidden;
   display: grid;
   grid-template-columns: 1fr auto 1fr; /* Mitte bleibt zentriert, solange Platz ist */
}
.main-footer li{
  padding: 0 25px;
  white-space: nowrap;
}
.main-footer li:nth-child(2){
  text-align: center;
}
.main-footer li:last-child{
  text-align: right;
}
@media (max-width: 1130px){
  .main-footer ul{
    display: block;
  }
  .main-footer li{
    white-space: normal;
    text-align: center;
    margin: 3px 0;
  }
  .main-footer li:last-child{
   text-align: center;
  }
}
@media (max-width: 1024px){
  .logo{
    text-align: center;
    padding: 86px 20px;
  }
}
@media (max-width: 480px){
  .main-footer{
    font-size: 13px;
  }
  .main-footer li{
    padding: 0 5px;
  }
  .logo{
    padding: 75px 20px;
  }
  .logo img{
    width: 202px; /* 20 % kleiner als Desktop (252px) */
  }
  /* Ratings in eigene Zeile statt Umbruch mitten in „TRI TRE SEN“ */
  .main-footer .sep{
    display: none;
  }
  .main-footer .ratings{
    display: block;
  }
}
@media (max-width: 850px) and (max-height: 500px){
  .logo{
    padding-top: 10px;
  }
}
@media (max-width: 700px){
  .plane{
    left: 50%;
    --plane-w: 92vw;
  }
}