/* film.ki 1.0 – einheitlicher Seitenkopf für alle Seiten aus Kopf- und Fußmenü.
   Referenz: Dachzeile des KI-Lexikons (Monospace, grau, roter Punkt bündig mit dem Logo).
   Diese Datei wird in jeder Seite NACH deren eigenem CSS geladen und gleicht nur den Kopf an:
   Abstand unter der Kopfzeile, Dachzeile, Titel, Einleitung, Meta-Zeile. Farben der Titel (rote Wörter) bleiben Sache der Seite.
   Die !important-Angaben sind bewusst: sie heben die bisher je Seite verschiedenen Hero-Regeln (min-height, Zentrierung) auf. */

:root {
  --fk-ph-header: 5.25rem;                       /* Höhe der festen Kopfzeile */
  --fk-ph-gap: clamp(3rem, 7vw, 6rem);           /* Abstand Kopfzeile (bzw. Unternavigation) → Dachzeile */
  --fk-ph-pad: var(--fk-pad, clamp(1.25rem, 4vw, 4.75rem));
}

/* Container: kein senkrechtes Zentrieren mehr, fester Abstand nach oben, links bündig mit dem Logo.
   fk-ph            = Kopf liegt unter der festen Kopfzeile (Seite ohne eigenen Abstand)
   fk-ph--offset    = Seite hat bereits Abstand für die Kopfzeile (body-Padding) → nur der Abstand */
.fk-ph {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  padding: calc(var(--fk-ph-header) + var(--fk-ph-gap)) var(--fk-ph-pad) clamp(2.5rem, 6vw, 5rem) !important;
  overflow-x: clip; /* Deko-Kreise dürfen am Handy keinen Querscroll erzeugen (vorher bei „Presse“) */
}
.fk-ph.fk-ph--offset { padding-top: var(--fk-ph-gap) !important; }
/* Seiten, deren Kopf in einem zweispaltigen Raster liegt (Film vorschlagen, Impressum, Datenschutz):
   der Abstand sitzt am umgebenden main, der Kopf selbst bekommt keinen Innenabstand */
.fk-ph-main { padding-top: calc(var(--fk-ph-header) + var(--fk-ph-gap)) !important; }
.fk-ph.fk-ph--inline { padding: 0 !important; top: 0 !important; } /* klebende Spalte (Film vorschlagen): Chrome rechnet den main-Innenabstand schon ein */

.fk-ph .fk-ph__inner {
  width: 100% !important;
  /* 1.0.1: immer bündig mit dem Logo – auch auf breiten Bildschirmen (vorher mittig ab ~1500 px) */
  max-width: calc(92rem - 2 * var(--fk-ph-pad)) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fk-ph.fk-ph--wide .fk-ph__inner { max-width: none !important; } /* Seiten, deren Inhalt die volle Breite nutzt (Filme) */

/* Dachzeile (Referenz KI-Lexikon) */
.fk-ph .fk-ph__eyebrow {
  display: flex !important;
  align-items: center;
  gap: .7rem;
  margin: 0 0 clamp(1rem, 1.6vw, 1.5rem) !important;
  padding: 0 !important;
  color: var(--muted, #9a9993) !important;
  font: 650 .64rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
.fk-ph .fk-ph__eyebrow::before {
  content: "" !important;
  display: block !important;
  position: static !important;
  flex: 0 0 auto;
  width: .5rem !important;
  height: .5rem !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--signal, #ff4a30) !important;
  box-shadow: none !important;
  transform: none !important;
}
.fk-ph .fk-ph__eyebrow .dot { display: none !important; }

/* Titel: eine Schrift, eine Stärke, ein Größenmaß */
.fk-ph .fk-ph__title {
  max-width: none;
  margin: 0 !important;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(3rem, 8.4vw, 8.5rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.06em !important;
  line-height: .92 !important;
  text-wrap: balance;
}

/* Einleitung: immer unter dem Titel, links bündig */
.fk-ph .fk-ph__lead {
  max-width: 40rem !important;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--muted, #9a9993) !important;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  line-height: 1.5 !important;
}

/* kleine Meta-Zeile (z. B. „116 Begriffe · Praxisnah“) unter der Einleitung */
.fk-ph .fk-ph__meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: .6rem 2rem !important;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--muted, #9a9993) !important;
  font: 650 .62rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
}

/* 1.0.1: Inhaltsspalten aller Menüseiten links bündig mit Logo und Seitenkopf statt mittig.
   Die Klassen stammen aus den jeweiligen Seiten (Lexikon, Über, Newsletter, Redaktion, Presse, Archiv, Film vorschlagen);
   diese Datei wird nur auf diesen Seiten geladen. */
.lexicon, .section, .subscribe-inner, .principles, .roles, .contact,
.press, .press-contact-inner, .boilerplate-inner, .archive, .submission-layout,
.hero-inner, .hero__inner, main > .intro {
  margin-left: 0 !important;
  margin-right: auto !important;
}