@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-v9.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root { --forest: #213f41; --solar: #ffff8e; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--forest); font-family: "Montserrat", sans-serif; }

.hero { position: relative; aspect-ratio: 1166 / 755; max-height: 100vh; width: 100%; overflow: hidden; background: var(--forest); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(33, 63, 65, .45); }
.logo { position: absolute; z-index: 1; left: 50%; top: 50%; width: 36.8%; height: auto; transform: translate(-50%, -50%); }

main { padding: 4.2vw 4.2vw 10vw; }
h1 { margin: 0 0 4.6vw; font-size: 6.834vw; line-height: .943; font-weight: 600; text-transform: uppercase; }
.lead, address, hr { margin-left: 13.1vw; max-width: 65.7vw; }
.lead { font-size: 1.51vw; line-height: 1.379; font-weight: 500; letter-spacing: .02em; margin-top: 0; margin-bottom: 2.7vw; padding-bottom: 3.9vw; border-bottom: 1px solid #000; }
address { display: grid; grid-template-columns: 19.8vw auto; font-style: normal; font-size: 1.042vw; line-height: 1.65; font-weight: 500; text-transform: uppercase; color: #000; letter-spacing: .05em; font-feature-settings: "case"; }
address p { margin: 0; }
address a { color: inherit; text-decoration: none; }
address a:hover { text-decoration: underline; }

@media (max-width: 800px) {
  main { padding: 8vw 6vw 14vw; }
  h1 { font-size: 17vw; margin-bottom: 8vw; }
  .lead, address { margin-left: 0; max-width: none; }
  .lead { font-size: 4.4vw; padding-bottom: 6vw; margin-bottom: 6vw; }
  address { grid-template-columns: 1fr; gap: 4vw; font-size: 3.4vw; }
  .logo { width: 56%; }
}

/* Hochformat (Smartphone/iPad): Titelbild füllt mehr Höhe statt Querformat-Streifen */
@media (orientation: portrait) and (max-width: 900px) {
  .hero { aspect-ratio: 588 / 1263; height: auto; max-height: none; }
  .hero::after { display: none; }
  .logo { top: 50%; transform: translate(-50%, -50%); width: 72%; }
}