/* ---------------------------------------------------------------
   FUND BUREAU — minimal frontpage
   typography: Neue Haas Grotesk (lizenzpflichtig). lege deine
   woff2-dateien in static/fonts/ ab, dann greifen die @font-face
   regeln unten. bis dahin: klassischer Helvetica-fallback.
   --------------------------------------------------------------- */

@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("/fonts/neue-haas-grotesk-display-55-roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk";
  src: url("/fonts/neue-haas-grotesk-display-65-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #111;
  --paper: #fff;
  --gap: clamp(1.25rem, 4vw, 2.5rem);
  /* gemeinsame spaltenbreite: titel, bild und adresse fluchten links */
  --media: min(100%, 56vh, 560px);
  --grotesk: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  padding: var(--gap);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--gap);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grotesk);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  user-select: none;
}

img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* wordmark, oben — linke kante auf der bildkante ------------------------- */
.wordmark {
  width: var(--media);
  margin-inline: auto;
}
.wordmark a {
  display: inline-block;
  font-weight: 500;
  font-size: clamp(1.5rem, 4.5vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.wordmark a:hover { text-decoration: none; }

/* mitte: quadratisches bild + adresse ------------------------------------ */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.hero {
  margin: 0;
  width: var(--media);
  aspect-ratio: 1 / 1;   /* quadratische box erzwingen */
}
.hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* bild füllt die box, wird beschnitten */
  background: #ececec;
}

/* intro + adresse, unter dem bild ---------------------------------------- */
.colophon {
  width: var(--media);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em var(--gap);
  justify-content: space-between;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  line-height: 1.4;
}
.colophon .intro { margin: 0; max-width: 22ch; }

.colophon address {
  font-style: normal;
  display: flex;
  flex-direction: column;
}
.colophon address span,
.colophon address a { display: block; }

/* fuss ------------------------------------------------------------------- */
.credit {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  opacity: 0.6;
  text-transform: lowercase;
}
.credit p { margin: 0; }

@media (max-width: 600px) {
  .colophon { flex-direction: column; }
}