/* Problem-Seite: One-Screen-Layout im Grid-Stil der Konzept-Seite.
   Menü, Text und Bild passen exakt in 100vh – kein Scrollen. */

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

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

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

/* overflow-y:auto nur für Problem selbst – .problem-grid wird auch von
   Forschung wiederverwendet, wo .problem-copy per JS-Transform leicht
   über den Rand seiner Box verschoben wird (Ausrichtung an Bild/Text);
   overflow-y:auto würde das abschneiden. */
body.page-problem .problem-grid {
  overflow-y: auto;
}

.problem-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--space-md);
  padding: var(--space-lg) 2rem 0 2rem;
}

.problem-copy {
  grid-column: 7 / 12;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-content: start;
  padding-bottom: var(--space-md);
}

.problem-copy .lead {
  grid-column: 1 / 6;
  margin: 0 0 1.25rem;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.25;
  color: var(--text);
  white-space: normal;
}

.problem-copy .lead br {
  display: block;
  content: "";
  margin-bottom: 0.3rem;
}

.problem-copy .problem-text {
  grid-column: 1 / 6;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
  text-align: justify;
  text-justify: inter-word;
}

/* Fester Abstand .lead → p wie auf Über Uns (2rem), statt der
   viewport-abhängigen Formel. .lead selbst bleibt für Forschung
   (das die Klasse mitverwendet) unverändert – hier stattdessen auf
   Problem beschränkt: margin-bottom auf .lead lokal auf 0, gesamter
   Abstand über margin-top auf p. */
.page-problem .problem-copy .lead {
  margin-bottom: 0;
}

.page-problem .problem-copy .problem-text {
  margin-top: 2rem;
}

.problem-copy .problem-text + .problem-text {
  margin-top: 1.25rem;
}

.problem-copy .problem-text .accent {
  color: #f08b88;
}

/* Fester Footer statt Grid-Zeile: bleibt immer exakt 100px hoch,
   unabhängig davon, wie viel Platz der Fließtext oben einnimmt. Wird zu
   knapper Platz, scrollt stattdessen .problem-grid intern. */
.problem-image {
  flex: none;
  width: 100%;
  height: 100px;
  margin: 3rem 0 0;
  position: relative;
  overflow: hidden;
}

.problem-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom right;
  border-radius: 0;
  filter: blur(2px);
}

/* Feine Papier-/Pinsel-Körnung über dem weichgezeichneten Bild,
   wie auf der Startseite. */
.problem-image::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-problem),
  body.page-problem {
    height: auto;
    overflow: auto;
  }

  .problem-copy {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .problem-copy .lead,
  .problem-copy .problem-text {
    grid-column: 1 / -1;
  }

  .problem-image {
    display: none;
  }

  /* Blocksatz erzeugt bei schmalen Spalten große Wortlücken, besonders
     bei langen Komposita – auf Mobile linksbündig statt Blocksatz.
     Gilt über die geteilte Klasse auch für Forschung. */
  .problem-copy .problem-text {
    text-align: left;
  }
}