/* ============================================================
   PAGE HEADER - Seitenköpfe mit Farbvarianten
   ============================================================ */

/* === BASIS – gilt für ALLE Page-Header === */
.page-header {
  padding: var(--space-10) 0;
  min-height: 40vh;
  text-align: center;
  position: relative;
  overflow: hidden;

  padding-top: 120px;
  /* Spacer für Navigation */
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  margin-bottom: var(--space-3);
  color: var(--farbe-weiss);
  text-shadow: 0 2px 8px rgba(30, 20, 10, 0.3);
}

.page-header-subtitle {
  max-width: 700px;
  margin: 0 auto;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--farbe-weiss);
  text-shadow: 0 2px 8px rgba(30, 20, 10, 0.3);
  opacity: 0.92;
}

/* === VARIANTE: Hell (helles Layout, dunkler Text) === */
/* === VARIANTE: Jugendämter ===
   Pink → Magenta → Violett + Foto-Overlay */
.page-header--jugendaemter {
  background: linear-gradient(135deg,
      var(--farbe-pink) 0%,
      var(--farbe-magenta) 85%,
      var(--farbe-violett) 100%);
}

.page-header--jugendaemter::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/content/netzwerk-unsplash.jpg');
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  filter: sepia(1);
  opacity: 0.2;
  /* 80% Transparenz = 20% sichtbar */
  pointer-events: none;
  z-index: 0;
}

.page-header--jugendaemter .page-header-subtitle {
  font-size: var(--text-xl);
}

/* === VARIANTE: Über uns ===
   Magenta → Violett → Tiefviolett + Foto-Overlay */
.page-header--ueber-uns {
  background: linear-gradient(135deg,
      var(--farbe-magenta) 0%,
      var(--farbe-violett) 85%,
      var(--farbe-tiefviolett) 100%);
}

.page-header--ueber-uns::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/content/standby-Leuchtfeuer-Buero.jpg');
  background-size: cover;
  background-position: center 76%;
  background-repeat: no-repeat;
  filter: sepia(1);
  opacity: 0.2;
  /* 80% Transparenz = 20% sichtbar */
  pointer-events: none;
  z-index: 0;
}

/* === VARIANTE: FAQ ===
   Violett → Tiefviolett (letzte Stufe der Farb-Rotation) */
.page-header--faq {
  background: linear-gradient(135deg,
      var(--farbe-violett) 0%,
      var(--farbe-tiefviolett) 100%);
}

.page-header--faq::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/content/faq-unsplash.jpg');
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
  filter: sepia(1);
  opacity: 0.2;
  /* 80% Transparenz = 20% sichtbar */
  pointer-events: none;
  z-index: 0;
}

/* === VARIANTE: Kontakt ===
   Gesamtes Farbspektrum: Gold → Orange → Pink → Magenta → Violett → Tiefviolett */
.page-header--kontakt {
  background: linear-gradient(135deg,
      var(--farbe-gold) 0%,
      var(--farbe-orange) 20%,
      var(--farbe-pink) 40%,
      var(--farbe-magenta) 60%,
      var(--farbe-violett) 80%,
      var(--farbe-tiefviolett) 100%);
}

.page-header--kontakt::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/content/kontakt-unsplash.jpg');
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
  filter: sepia(1);
  opacity: 0.2;
  /* 80% Transparenz = 20% sichtbar */
  pointer-events: none;
  z-index: 0;
}

/* === VARIANTE: Bereitschaftspflege ===
   Gold → Orange → Pink + Foto-Overlay */
.page-header--bereitschaftspflege {
  background: linear-gradient(135deg,
      var(--farbe-gold) 0%,
      var(--farbe-orange) 85%,
      var(--farbe-pink) 100%);
}

.page-header--bereitschaftspflege::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/content/Was-ist-Bereitschaftspflege-unsplash.jpg');
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  filter: sepia(1);
  opacity: 0.2;
  /* 80% Transparenz = 20% sichtbar */
  pointer-events: none;
  z-index: 0;
}

/* === VARIANTE: Pflegefamilie werden ===
   Violett → Pink → Gold + Foto-Overlay */
.page-header--pflegefamilie {
  background: linear-gradient(135deg,
      var(--farbe-orange) 0%,
      var(--farbe-pink) 85%,
      var(--farbe-magenta) 100%);
}

.page-header--pflegefamilie::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/content/Pflegefamilie-werden-unsplash.jpg');
  background-size: cover;
  background-position: center 96%;
  background-repeat: no-repeat;
  filter: sepia(1);
  opacity: 0.2;
  /* 80% Transparenz = 20% sichtbar */
  pointer-events: none;
  z-index: 0;
}