/* Über-Uns-Seite: gleiches One-Screen-Prinzip wie Problem.
   Menü, Text und Foto passen exakt in 100vh – kein Scrollen. */

html:has(body.page-ueberuns),
body.page-ueberuns {
  height: 100%;
  overflow: hidden;
}

body.page-ueberuns {
  display: flex;
  flex-direction: column;
}

body.page-ueberuns .site-header {
  flex: none;
}

body.page-ueberuns .page-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-md);
  width: auto;
  margin-left: 0;
  padding: var(--space-lg) 2rem 0 2rem;
}

.page-copy {
  grid-column: 2 / 12;
  grid-row: 1;
}

body.page-ueberuns .lead {
  margin-bottom: 50px;
}

body.page-ueberuns h2:first-of-type {
  margin-top: 50px;
}

/* Gleiche Schriftgröße/-gewicht/Zeilenhöhe wie .problem-text auf
   Problem/Forschung, statt der generischen .page-content p-Werte. */
body.page-ueberuns .page-content p:not(.lead) {
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.55;
}

/* Gleiche Breite wie .problem-text auf Problem/Forschung: identische
   calc-Formel, da beide Seiten dasselbe 12-Spalten-Raster mit 2rem-Rand
   nutzen – ergibt exakt denselben Pixelwert. Nur auf Desktop/Tablet:
   bei sehr schmalen Fenstern würde die Formel negativ. Auf Mobile ist
   .page-copy sowieso auf volle Breite gestreckt. */
@media (min-width: 769px) {
  body.page-ueberuns .lead + p {
    max-width: calc((100vw - 4rem - 11 * var(--space-md)) * 5 / 12 + 4 * var(--space-md));
  }
}

/* Fester Footer statt Grid-Zeile: bleibt immer exakt 100px hoch,
   unabhängig davon, wie viel Platz der Fließtext oben einnimmt. Da das
   Foto jetzt außerhalb von .page-content liegt, hier die Styles
   selbst tragen, die sonst von .page-content .page-photo (style.css)
   kämen – gleiches Muster wie .problem-image auf Problem.html. */
body.page-ueberuns .page-photo {
  flex: none;
  width: 100%;
  height: 100px;
  margin: 3rem 0 0;
  position: relative;
  overflow: hidden;
}

body.page-ueberuns .page-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: blur(2px);
}

body.page-ueberuns .page-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.25;
  mix-blend-mode: overlay;
}

@media (max-width: 768px) {
  html:has(body.page-ueberuns),
  body.page-ueberuns {
    height: auto;
    overflow: auto;
  }

  body.page-ueberuns .page-photo {
    display: none;
  }

  body.page-ueberuns .page-content p:not(.lead),
  body.page-ueberuns .lead {
    text-align: left;
  }
}