@font-face{font-family:"Bebas Neue";src:url(fonts/bebas.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url(fonts/lato400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url(fonts/lato900.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  --petrol-dark:#06323d;
  --cream:#f8ecd4;
  --ink:#003f56;
  /* 1u = 1/960 der Entwurfsbreite; skaliert mit Breite UND Höhe, damit alles im 16:9-Rahmen bleibt */
  --u:calc(min(100vw,178.4vh)/960);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  font-family:Lato,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#fff;
  background:#fff;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
  padding:calc(var(--u)*25) 1rem 0;
  background:var(--petrol-dark) url(bg-small.webp) center/cover no-repeat;
  /* Entwurf: Hero = 477 von 538 Höhe, der Rest ist weiß */
  min-height:calc(var(--u)*477);
}
@media (min-width:900px){.hero{background-image:url(bg.webp)}}

.logo{margin:0;line-height:0}
.logo img{width:calc(var(--u)*55);min-width:64px;height:auto}

.headline{
  position:relative;
  z-index:5;
  margin:calc(var(--u)*30) 0 0;
  font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:.8;
  font-size:calc(var(--u)*115);
  text-shadow:0 4px 30px rgba(0,0,0,.2);
}

.collage-wrap{width:100%;display:flex;justify-content:center;margin-top:calc(var(--u)*-8)}
.collage{position:relative;width:calc(var(--u)*440);aspect-ratio:440/245}
.collage img{position:absolute;height:auto;max-width:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}

/* ---------- Impressum ---------- */
.impressum{
  position:absolute;
  z-index:6;
  top:calc(var(--u)*44);
  right:calc(50% - var(--u)*214);
  transform:translateX(0);
  padding:.5rem;
  margin:-.5rem;
  color:#fff;
  font-size:max(.75rem,calc(var(--u)*7));
  letter-spacing:.04em;
  text-decoration:none;
}
.impressum:hover{text-decoration:underline;text-underline-offset:.25em}
.impressum:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:2px}

/* ---------- Pinselstreifen ---------- */
.brush{
  position:relative;
  z-index:7;
  flex:0 0 auto;
  align-self:center;
  width:min(calc(var(--u)*460),100%);
  min-width:min(100%,520px);
  margin:calc(var(--u)*-42) auto 0;
  padding:calc(var(--u)*24) calc(var(--u)*34) calc(var(--u)*30);
  text-align:center;
  color:var(--ink);
  background:var(--cream);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:max(.8rem,calc(var(--u)*9.4));
  line-height:1.35;
  clip-path:polygon(2% 12%,10% 5%,26% 10%,45% 3%,63% 9%,80% 2%,97% 8%,100% 14%,96% 34%,99% 52%,95% 72%,100% 90%,84% 97%,66% 91%,48% 98%,30% 92%,12% 97%,1% 90%,4% 70%,0% 52%,3% 32%);
}
.brush p{margin:0}
.l1{font-weight:900}
.l2{font-weight:400}

/* Weißer Auslauf unter dem Streifen (Entwurf) */
.brush::after{content:"";display:block}
body::after{content:"";display:block;flex:0 0 calc(var(--u)*30)}

/* ---------- Hoch-/Schmalformat: Collage groß, eigene Proportionen ---------- */
@media (max-aspect-ratio:1/1),(max-width:700px){
  .hero{padding-top:1.5rem;min-height:0}
  .logo img{width:84px}
  .headline{font-size:min(21vw,9rem);margin-block:auto;padding-block:1.25rem}
  .collage-wrap{margin-top:0;padding-top:.5rem}
  .collage{width:min(94vw,720px)}
  .impressum{top:1.25rem;right:1.25rem;font-size:.8125rem}
  .brush{width:calc(100% - 2rem);min-width:0;margin-top:-1.5rem;padding:1.6rem 1.5rem 1.7rem;font-size:clamp(.72rem,3.1vw,1rem)}
  body::after{flex-basis:2rem}
}
@media (prefers-reduced-motion:no-preference){
  .hero>*,.brush{animation:rise .7s ease-out both}
  @keyframes rise{from{opacity:0}to{opacity:1}}
}