/* GS Lotte subpage Kopfbild (opt-in via pages.media).
 * Contract: colors come exclusively from --gsl-* tokens (Farbkonzept).
 * Text never sits on the photo (Bueren gate lesson) — the title panel
 * overlaps the image bottom on its own solid surface. */

.gsl-page-header {
  --gsl-ph-accent: var(--gsl-rubric-aktuelles, #DC624A);
  margin-bottom: 2rem;
}

.gsl-page-header.gsl-rubric-schulkonzept    { --gsl-ph-accent: var(--gsl-rubric-schulkonzept, #7BA05B); }
.gsl-page-header.gsl-rubric-schulgemeinschaft { --gsl-ph-accent: var(--gsl-rubric-schulgemeinschaft, #3E8E9E); }
.gsl-page-header.gsl-rubric-betreuung       { --gsl-ph-accent: var(--gsl-rubric-betreuung, #D9A441); }
.gsl-page-header.gsl-rubric-kontakt         { --gsl-ph-accent: var(--gsl-rubric-kontakt, #C87137); }

.gsl-page-header__media {
  max-height: 420px;
  overflow: hidden;
}

.gsl-page-header__image {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.gsl-page-header__panel {
  max-width: var(--gsl-container-text, 48rem);
  margin: -3.5rem auto 0;
  position: relative;
  background: var(--gsl-card, var(--gsl-paper, #FFFFFF));
  border-radius: var(--gsl-radius-md, 1.25rem);
  border-top: 5px solid var(--gsl-ph-accent);
  box-shadow: var(--gsl-shadow-md, 0 8px 24px rgba(26, 26, 46, 0.08));
  padding: 1.5rem 2rem;
}

.gsl-page-header__title {
  margin: 0;
  font-size: var(--gsl-fs-xl, 2.25rem);
  color: var(--gsl-blue, #004A99);
}

.gsl-page-header__subtitle {
  margin: 0.5rem 0 0;
  font-size: var(--gsl-fs-md, 1.375rem);
  color: var(--gsl-ink-muted, #7A7A8E);
}

@media (max-width: 767px) {
  .gsl-page-header__image { height: 240px; }
  .gsl-page-header__panel { margin: -2rem 1rem 0; padding: 1.25rem 1.5rem; }
  .gsl-page-header__title { font-size: var(--gsl-fs-lg, 1.75rem); }
}