/* ═══════════════════════════════════════════════════════════════════════════
   Component: Page Header v2 — Larger, dramatic, decorative element
   ═══════════════════════════════════════════════════════════════════════════ */

.c-page-header {
  padding-block: var(--section-spacing-fluid) var(--space-3xl);
  border-bottom: 1px solid var(--color-border-default);
  position: relative;
}

/* Decorative background number/shape */
.c-page-header::before {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--container-edge);
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  border: 2px solid var(--color-teal-100);
  border-radius: 0;
  opacity: 0.5;
  pointer-events: none;
}

/* Der Kopf ist NICHT zentriert, sondern steht auf derselben Kante wie alles
   andere: Header-Logo, Navigation, Startseiten-Hero und Footer beginnen alle am
   Containerrand.

   Kundenbefund 28.09.2026: "die Kopfbereiche der Subpages sehen ungewollt aus".
   Ursache war genau hier: das Markup traegt BEIDE Klassen,
   `class="l-container c-page-header__inner"`, und diese Regel hat die Breite
   des Containers auf 666px ueberschrieben. Gemessen lag der Inhalt damit bei
   x = 299 mit 267px toter Flaeche links UND rechts — ein zentrierter Kasten mit
   linksbuendigem Text darin, was genau den ungewollten Eindruck macht, waehrend
   der Startseiten-Hero bei x = 57 auf der Kante sitzt.

   Deshalb hier KEINE eigene Breite mehr: `.l-container` bringt
   max-width 1200px und den Randabstand schon mit. */
.c-page-header__inner {
  position: relative;
  z-index: 1;
}

/* ── Abstand zum ersten Inhaltsblock ────────────────────────────────────
   Kundenbefund 28.09.2026: bei Impressum und Datenschutz fehlte der Abstand
   zwischen Kopf und erstem Inhalt; auf allen Seiten sollte er gleich sein.

   Gemessen war er voellig uneinheitlich — 8 / 64 / 0 / 48 / 64 / 0 / 0 px auf
   Startseite / Leistungen / Betrieb / Kontakt / Karriere / Impressum /
   Datenschutz. Zwei verschiedene Ursachen:

   1. Die Rechtstexte tragen ein Inline-`style="padding-top:0;"` in der
      Vorlage (page-imprint.php, page-privacy.php, page-jobs.php). Das setzt den
      Innenabstand der Sektion auf 0 und schlaegt jede Klassenregel.
   2. Auf Betrieb und Leistungen bringt der erste Baustein seinen EIGENEN
      Innenabstand mit (.c-service-detail 48px), waehrend der Wrapper auf
      Betrieb 0px hatte und auf Leistungen 48px — dieselbe Komponente, zwei
      verschiedene Abstaende.

   Deshalb hier eine Regel, die fuer JEDEN Seitenkopf gilt. Sie setzt den
   Abstand auf genau einen Wert und neutralisiert sowohl den Inline-Stil als
   auch einen mitgebrachten Innenabstand des ersten Bausteins. `!important` ist
   an dieser einen Stelle noetig, weil ein Inline-Stil sonst nicht zu
   ueberschreiben ist — besser waere, die Inline-Stile in den Vorlagen zu
   entfernen, aber diese Regel muss auch dann halten, wenn wieder eines
   dazukommt.

   Der Wert ist `--section-spacing-sm` (4rem = 64px). Das ist genau der
   Abstand, den Leistungen und Karriere vorher schon hatten und der dort richtig
   aussah. */
.c-page-header + section,
.c-page-header + .l-section,
.c-hero + section,
.c-hero + .l-section {
  padding-top: var(--section-spacing-sm) !important;
}

/* Der erste Baustein in dieser Sektion darf keinen eigenen Abstand mehr
   mitbringen, sonst addiert er sich auf. Zwei Ebenen tief, weil zwischen
   Sektion und Baustein oft noch ein `.l-container` liegt. */
.c-page-header + section > *,
.c-page-header + .l-section > *,
.c-hero + section > *,
.c-hero + .l-section > * {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.c-page-header + section > * > *,
.c-page-header + .l-section > * > * {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Sonderfall /kontakt/: der erste Block ist ein Raster aus Kontaktkarten, und
   eine Karte bringt 32px eigenen Innenabstand mit (.c-contact-block). Die Regel
   oben erreicht sie nicht, weil sie noch eine Ebene tiefer sitzt. Gemessen lag
   der Abstand dort deshalb bei 165px gegenueber 127-132px auf den uebrigen
   Seiten. Deshalb hier gezielt diese eine Karte — der Abstand landet damit bei
   denselben ~128px wie ueberall sonst. */
.c-contact-block .c-contact-item {
  padding-top: 0;
}

/* ── Rechtstexte: Inhalt auf dieselbe Kante wie der Kopf ────────────────
   Impressum und Datenschutz setzen ihren Text in einen
   `.l-container--narrow`. Diese Klasse zentriert ihren Kasten
   (`margin-inline: auto` aus `.l-container`), gemessen stand der Inhalt damit
   bei x = 153 mit 153px Einfassung links UND rechts — waehrend Kopf, Logo,
   Navigation und der Rest der Seite bei x = 57 auf der Containerkante stehen.

   Die Klasse selbst bleibt unveraendert: die 404-Seite benutzt sie ebenfalls,
   und dort ist der mittige Satz richtig. Angefasst wird nur der Inhalt von
   Rechtstexten, erkennbar daran, dass ein Seitenkopf davor steht
   (`.c-page-header ~`).

   WICHTIG — hier zweimal falsch gemacht: `margin-inline: 0` allein zieht den
   Kasten NICHT auf die Kante. Ohne die `auto`-Ränder aus `.l-container` bleibt
   er am Viewport-Rand stehen (x = 0, Inhalt x = 24), statt bei x = 57 wie der
   Kopf. Richtig ist, den Kasten auf der Breite des normalen Containers zu
   lassen und die Zentrierung zu behalten — dann sitzt er automatisch auf
   derselben Kante wie alles andere. Deshalb wird hier nur die Breite
   zurueckgesetzt, nicht der Rand.

   Die Zeilenlaenge bekommt zugleich ein Mass: die volle Containerbreite waere
   fuer Fliesstext zu breit (rund 90 Zeichen). `--measure-normal` sind 55
   Zeichen — die Zeilenlaenge, die das Typsystem dafuer vorsieht. */
.c-page-header ~ .l-section .l-container--narrow {
  max-width: var(--container-max);
}

.c-page-header ~ .l-section .l-container--narrow > * {
  max-width: var(--measure-normal);
}

/* ── Kicker ─────────────────────────────────────────────────────────── */

.c-page-header__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Kicker-Marke: seit 27.09.2026 ein "+" statt eines Zierstrichs.
   Gezeichnet als Textzeichen, genau wie die Wegweiser-Marke der Navigation
   (.c-nav-primary__list a::before) — so bleibt es ein Stil.
   Das Markup ist unveraendert: derselbe leere, aria-versteckte span.

   Optische Ausrichtung (gemessen am 28.09.2026, Pixelmessung): das Pluszeichen
   ist --font-size-md gross, der Kicker-Text nur --font-size-xs in Versalien.
   Die Tinte des Pluszeichens ist hoeher als die Versalhoehe des Textes und ihr
   Schwerpunkt liegt dadurch tiefer — gemessen 1,5px (Desktop, 19px Plus neben
   12px Text) bzw. 2px (mobil, 17px Plus). Ausgeglichen per relativem Versatz:
   der Versatz aendert nur die Malposition, nicht die Zeilenhoehe. */
.c-page-header__kicker-line {
  width: auto;
  height: auto;
  background: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-orange-500);
  user-select: none;
  position: relative;
  top: -2px;
}

.c-page-header__kicker-line::before {
  content: '+';
  display: block;
}

.c-page-header__kicker-text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-orange-600);
}

/* ── Title ──────────────────────────────────────────────────────────── */

.c-page-header__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

/* ── Text ───────────────────────────────────────────────────────────── */

.c-page-header__text {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  /* Der Block sitzt jetzt auf der Containerkante; die Textzeile darf trotzdem
     nicht ueber die ganze Breite laufen — 38rem ist dasselbe Mass, das der
     Startseiten-Hero fuer seinen Text benutzt (.c-hero__content). Damit bleibt
     die Zeilenlaenge lesbar, ohne den Block wieder zu zentrieren: der Text
     beginnt an der Kante und hoert frueher auf. */
  max-width: 38rem;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .c-page-header::before {
    display: none;
  }

  .c-page-header__title {
    font-size: var(--font-size-2xl);
  }
}