:root {
  color-scheme: dark;
  --navy: #202936;
  --white: #f5f5f3;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; background: var(--navy); }
body { color: var(--white); font-family: Arial, Helvetica, sans-serif; }
.teaser {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 12vh;
  padding-top: 12svh;
  display: flex;
  flex-direction: column;
}
.panorama { width: 100%; height: 55vh; height: 55svh; }
.panorama img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.identity {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2.2rem 1.5rem max(2.2rem, env(safe-area-inset-bottom));
}
h1 { margin: 0; width: min(28rem, 76vw); line-height: 1; }
h1 img { display: block; width: 100%; height: auto; }
p { margin: 0; font-size: .875rem; line-height: 1.5; font-weight: 400; letter-spacing: .16em; }
@media (max-width: 600px) {
  .teaser { padding-top: 17svh; }
  .panorama { height: 48svh; }
  .identity { gap: 1.4rem; }
}
@media (max-height: 440px) and (min-width: 601px) {
  .teaser { padding-top: 8svh; }
  .panorama { height: 48svh; }
  .identity { padding-block: 1.5rem; gap: 1rem; }
  h1 { width: min(20rem, 58vw); }
}