@charset "UTF-8";
/* header/modul.css – Gestaltung des Header-Moduls.
   ---------------------------------------------------------------
   Liegt beim Modul, nicht im Editor: Ein Modul bringt Schema,
   Renderer UND Gestaltung mit. Sonst sähe die veröffentlichte Seite
   anders aus als die Vorschau - oder gar nicht. */

.lt-header{padding:64px 0;position:relative;overflow:hidden}

.lt-header__raster{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
.lt-header--kompakt .lt-header__raster{grid-template-columns:1fr}

.lt-header__bild{width:100%;height:auto;border-radius:var(--radius);display:block}

/* Kein eigener Abstand nach unten - den setzt das folgende Element.
   h1,h2,h3 bringen global "margin: 0 0 .5em" mit, und .5em sind bei
   2,8rem Schriftgröße rund 22 Pixel. */
/* Der Kicker steht in der Akzentfarbe auf dem Seitengrund - nicht AUF
   einer Akzentfläche. Hier gilt also der Akzent selbst.

   Bei sehr hellen Tönen wird er auf weißem Grund blass; deshalb etwas
   abgedunkelt, sobald er hell ist. color-mix rechnet das im Browser,
   ohne dass eine zweite Farbe gepflegt werden muss. */
.lt-header__kicker{
  font-size:clamp(.8rem,1.1vw,1rem);letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;
  color:var(--akzent-text,var(--akzent));

  /* Dicht an der Überschrift - sie gehören zusammen.

     Der sichtbare Abstand kam nicht von hier: Die Überschrift hat
     line-height:1.25, und bei 80 px Schriftgröße sind das zwanzig
     Pixel Luft ALLEIN über den Buchstaben. Dazu kam der eigene
     Abstand des Kickers.

     Deshalb ein negativer Wert - er zieht die halbe Zeilenhöhe der
     Überschrift wieder heraus. In em, damit es bei jeder Größe
     stimmt. */
  margin:0 0 -.1em;
  line-height:1.4;
}
/* Ist der Akzent hell (dann steht --auf-akzent auf Schwarz), den
   Kicker abdunkeln - sonst verschwindet Gelb auf Weiß. */
@supports (color: color-mix(in srgb, red, blue)) {
  .lt-header__kicker{
    color:color-mix(in srgb, var(--akzent) 100%,
                    var(--auf-akzent, transparent) 22%);
  }
}
/* Deutlich größer am Desktop.

   clamp(1.8rem, 4vw, 2.8rem) blieb bei 1080px Inhaltsbreite bei rund
   2,4rem stehen - für einen Header, der den ganzen Schirm füllt, zu
   zaghaft. Jetzt bis 4,2rem, und der mittlere Wert wächst schneller. */
/* line-height:1.05 statt der 1.25 aus dem Grundgerüst.

   Eine große Überschrift braucht keine Zeilenluft wie ein Fließtext -
   bei 80 px reißt 1.25 zwei Zeilen weit auseinander, und über der
   ersten steht die Luft, die den Kicker wegdrückte. */
.lt-header__titel{font-size:clamp(2rem,5.2vw,4.2rem);margin:0;
  letter-spacing:-.015em;line-height:1.05}

/* Beim Sprungbild noch einmal größer - dort steht nichts daneben, das
   Maß halten würde. */
.lt-header--sprung .lt-header__titel,
.lt-header--vollflaechig .lt-header__titel{font-size:clamp(2.2rem,6vw,5rem);
  line-height:1.02}

/* ── Zweispaltig: kleinere Überschrift ─────────────────────────
   Bei "Bild links, Text rechts" hat die Überschrift nur die halbe
   Breite. Dieselbe Größe wie beim flächigen Header bricht dort nach
   zwei Wörtern um und drängt Text und Knopf aus dem Bild.

   Die vw-Angabe muss ebenfalls kleiner sein, nicht nur die Obergrenze:
   Sie rechnet mit der Fensterbreite, nicht mit der Spaltenbreite. */
.lt-header--bild-links  .lt-header__titel,
.lt-header--bild-rechts .lt-header__titel{
  font-size:clamp(1.7rem,3vw,2.6rem);
}
.lt-header--bild-links  .lt-header__sub,
.lt-header--bild-rechts .lt-header__sub{
  font-size:clamp(1rem,1.4vw,1.25rem);
}

/* Die Subline gehört zur Überschrift, nicht zum Text darunter -
   deshalb dicht daran und mit dem größeren Abstand nach unten. */
/* Näher an die Überschrift.

   10px waren bei einer 4-rem-Zeile optisch weit weg: Der Abstand muss
   mit der Schriftgröße wachsen, nicht fest bleiben. In em gerechnet
   sitzt die Unterzeile bei jeder Größe gleich dicht. */
.lt-header__sub{font-size:clamp(1.1rem,1.9vw,1.6rem);opacity:.85;
  line-height:1.35;margin:.25em 0 .9em}
.lt-header__sub:last-child{margin-bottom:0}

.lt-header__aktionen{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* ── Flächige Varianten ─────────────────────────────────────── */
.lt-header--vollflaechig,
.lt-header--sprung{color:#fff;display:flex;align-items:center}
.lt-header--vollflaechig{min-height:62vh}

/* Höhe: lvh, nicht dvh.

   Der Bereich HINTER Safaris Adressleiste soll mitgefüllt werden - die
   Leiste ist durchscheinend, und was dort durchscheint, ist der
   nächste Abschnitt.

   dvh meint die Höhe im AKTUELLEN Zustand: ist die Leiste ausgefahren,
   endet das Bild darüber. lvh meint die größte mögliche Höhe.

   --lt-leiste ist nur in der Vorschau gesetzt (dort steht eine
   Werkzeugleiste darüber); auf der veröffentlichten Seite ist sie 0. */
.lt-header--sprung{
  /* VOLLE Höhe, ohne Abzug.

     Die Vorschau-Leiste liegt ÜBER dem Inhalt, sie nimmt keinen Platz
     im Fluss. Ein Abzug hier hätte das Bild um ihre Höhe verkürzt -
     und genau dieser Streifen blieb unten frei.

     Der Text bekommt seinen Abstand über den Innenabstand des
     .lt-wrap, damit er nicht unter der Leiste sitzt. Das Bild darf
     darunter durchlaufen. */
  min-height:100vh;
  min-height:100lvh;
  position:relative;
}

.lt-header__flaeche{
  position:absolute;inset:0;
  background-size:cover;background-position:center;z-index:0;
}

/* Verlauf richtet sich nach der Textseite - sonst liegt der dunkle
   Teil dort, wo nichts steht. */
.lt-header__flaeche::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.2));
}
.lt-header--aus-rechts .lt-header__flaeche::after{
  background:linear-gradient(270deg,rgba(0,0,0,.74),rgba(0,0,0,.2));
}
.lt-header--aus-mitte .lt-header__flaeche::after{
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.62));
}
/* Vollflächig: 5 Prozentpunkte dunkler als die übrigen Bildflächen -
   der Text steht dort über die ganze Breite auf dem Bild. */
.lt-header--vollflaechig .lt-header__flaeche::after{
  background:linear-gradient(90deg,rgba(0,0,0,.79),rgba(0,0,0,.25));
}
.lt-header--vollflaechig.lt-header--aus-rechts .lt-header__flaeche::after{
  background:linear-gradient(270deg,rgba(0,0,0,.79),rgba(0,0,0,.25));
}
.lt-header--vollflaechig.lt-header--aus-mitte .lt-header__flaeche::after{
  background:linear-gradient(180deg,rgba(0,0,0,.47),rgba(0,0,0,.67));
}

.lt-header--vollflaechig .lt-wrap,
.lt-header--sprung .lt-wrap{position:relative;z-index:2;width:100%}

/* Auf einem Bild trägt die Akzentfarbe nicht - dort hell wie der
   übrige Text darauf. Ist Akzentfarbe 3 hinterlegt (z. B. das Gold
   bei LICREM), steht der Kicker in ihr - statt die Hausfarbe
   anzupassen, gilt Farbe 3. */
.lt-header--vollflaechig .lt-header__kicker,
.lt-header--sprung .lt-header__kicker{
  color:var(--akzent3,#fff);opacity:.92;text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* Auf dem Sprungbanner mehr Luft zur Überschrift.

   Die enge Grundeinstellung (-.1em) stimmt dort nicht: Über einem
   Bild steht der Kicker frei im Raum statt auf einer Fläche, und die
   Überschrift ist deutlich größer. Beides lässt die beiden Zeilen
   aneinanderkleben.

   Gerechnet auf den negativen Grundwert: -.1em plus 10px ergibt in
   der Summe die gewünschten zehn Pixel mehr Abstand, unabhängig von
   der Schriftgröße. */
.lt-header--sprung .lt-header__kicker{
  margin-bottom:calc(-.1em + 10px);
}

/* ── Ausrichtung ────────────────────────────────────────────────
   Nicht nur am Container, sondern AUCH an den Elementen darin.

   text-align vererbt sich zwar - aber nur, solange nichts dazwischen
   eine eigene Ausrichtung setzt. Bei Überschriften ist das schnell
   passiert: eine Browser-Vorgabe, eine Regel aus Bootstrap, eine
   ältere Zeile im eigenen Stylesheet. Dann steht der Absatz zentriert
   und die Überschrift weiter links, ohne dass man den Grund sieht.

   Die Elemente einzeln zu nennen kostet vier Zeilen und beseitigt
   diese ganze Fehlerklasse. */
.lt-header--aus-mitte .lt-header__inhalt{margin:0 auto;max-width:44rem}
.lt-header--aus-mitte .lt-header__inhalt,
.lt-header--aus-mitte .lt-header__kicker,
.lt-header--aus-mitte .lt-header__titel,
.lt-header--aus-mitte .lt-header__sub,
.lt-header--aus-mitte .lt-header__text{text-align:center}
.lt-header--aus-mitte .lt-header__aktionen{justify-content:center}

.lt-header--aus-rechts .lt-header__inhalt{margin-left:auto;max-width:44rem}
.lt-header--aus-rechts .lt-header__inhalt,
.lt-header--aus-rechts .lt-header__kicker,
.lt-header--aus-rechts .lt-header__titel,
.lt-header--aus-rechts .lt-header__sub,
.lt-header--aus-rechts .lt-header__text{text-align:right}
.lt-header--aus-rechts .lt-header__aktionen{justify-content:flex-end}

.lt-header--aus-links .lt-header__inhalt,
.lt-header--aus-links .lt-header__kicker,
.lt-header--aus-links .lt-header__titel,
.lt-header--aus-links .lt-header__sub,
.lt-header--aus-links .lt-header__text{text-align:left}

/* Bild rechts: Spalten tauschen statt Markup umzustellen - so bleibt
   die Lesereihenfolge Text, dann Bild. */
.lt-header--bild-rechts .lt-header__medium{order:2}

/* ── Übergang zum nächsten Abschnitt ────────────────────────────
   Ein weicher Auslauf nach unten. Ohne ihn stößt das Bild hart auf
   den folgenden Abschnitt, und bei zwei Sprungbildern hintereinander
   sieht die Kante nach Fehler aus.

   Liegt über der Bildebene, aber unter dem Text. */
.lt-header--sprung::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:22vh;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));
}

/* ── Hinweis nach unten ─────────────────────────────────────────
   Nur beim Sprungbild: Dort ist vom Rest der Seite nichts zu sehen,
   und ohne Zeichen hält man den Header für die ganze Seite. */
.lt-header__weiter{
  position:absolute;
  bottom:calc(30px + env(safe-area-inset-bottom, 0px));
  left:50%;transform:translateX(-50%);
  width:26px;height:42px;border-radius:14px;
  border:2px solid rgba(255,255,255,.55);
  background:none;cursor:pointer;padding:0;z-index:3;
}
.lt-header__weiter:hover{border-color:#fff}
.lt-header__weiter span{
  position:absolute;top:8px;left:50%;margin-left:-2px;
  width:4px;height:7px;border-radius:2px;background:rgba(255,255,255,.8);
  animation:ltRoll 1.8s ease-in-out infinite;
}
@keyframes ltRoll{
  0%,100%{transform:translateY(0);opacity:1}
  60%{transform:translateY(14px);opacity:.15}
}
@media(prefers-reduced-motion:reduce){.lt-header__weiter span{animation:none}}
/* Folgt ein Trenner mit Symbol, säße der Hinweis genau darüber -
   am Desktop dann rechtsbündig auf dem Banner (Abstand wie die
   Seitenränder). */
@media(min-width:821px){
  .lt-header--sprung:has(+ .lt-trenner--zeichen) .lt-header__weiter{
    left:auto;right:clamp(24px,5%,64px);transform:none}
}

/* ── Einrasten ──────────────────────────────────────────────────
   Der Rastpunkt gilt nur, wenn ZWEI Sprungbilder aufeinanderfolgen.
   Bei einem einzelnen gibt es nichts einzurasten. */
.lt-header--sprung:has(+ .lt-header--sprung),
.lt-header--sprung + .lt-header--sprung{
  scroll-snap-align:start;
  /* Verbindlich: Zwischen zwei Sprungbildern soll man nicht auf halber
     Höhe stehen bleiben - das ist der Sinn der Sache. */
  scroll-snap-stop:always;
}

/* Die Kopfleiste klebt oben und deckt sonst den oberen Rand des
   angesprungenen Abschnitts ab - außer beim Sprungbild, dort liegt sie
   bewusst über dem Bild.

   Gilt für den Pfeilsprung, nicht für die Rasterung: Die betrifft nur
   noch Sprungbild zu Sprungbild. */
.lt-header--sprung{scroll-margin-top:0}
.lt-block,
.lt-recht{scroll-margin-top:64px}
@supports not selector(:has(*)){
  .lt-header--sprung + .lt-header--sprung{scroll-snap-align:start}
}

/* ── Schmale Schirme ────────────────────────────────────────── */
@media(max-width:760px){
  .lt-header{padding:36px 0}
  .lt-header__raster{grid-template-columns:1fr}

  /* Bild ÜBER den Text: Auf dem Handy sieht man zuerst das Bild und
     liest dann - umgekehrt stünde es unter einem Text, den man ohne
     Bild schon gelesen hat. */
  .lt-header--bild-rechts .lt-header__medium,
  .lt-header--bild-links  .lt-header__medium{order:-1}

  .lt-header--sprung{padding:0}
  .lt-header--sprung .lt-wrap{padding-top:34px;padding-bottom:110px}

  /* Mittig: Auf einer schmalen Spalte hat linksbündiger Text keinen
     Gegenspieler mehr - das Bild steht darüber, nicht daneben. */
  /* Nur der Vorgabefall wird zentriert - "links" und "rechts" sind
     ausdrückliche Entscheidungen und gelten auch auf dem Handy. */
  .lt-header__inhalt,
  .lt-header--aus-mitte .lt-header__inhalt{
    text-align:center;margin:0 auto;max-width:100%;
  }
  /* Die Knöpfe folgen der gewählten Ausrichtung - auch hier.

     Vorher stand hier ein pauschales center: Bei einem linksbündigen
     Banner saß der Text links und der Knopf mittig darunter. Die
     Media Query hatte den Text richtigerweise zentriert, den Fall
     "der Kunde will links" aber übergangen. */
  .lt-header--aus-links .lt-header__inhalt,
  .lt-header--aus-links .lt-header__kicker,
  .lt-header--aus-links .lt-header__titel,
  .lt-header--aus-links .lt-header__sub,
  .lt-header--aus-links .lt-header__text{text-align:left}
  .lt-header--aus-links .lt-header__inhalt{margin-inline:0}
  .lt-header--aus-links .lt-header__aktionen{justify-content:flex-start}

  .lt-header--aus-rechts .lt-header__inhalt,
  .lt-header--aus-rechts .lt-header__kicker,
  .lt-header--aus-rechts .lt-header__titel,
  .lt-header--aus-rechts .lt-header__sub,
  .lt-header--aus-rechts .lt-header__text{text-align:right}
  .lt-header--aus-rechts .lt-header__inhalt{margin-left:auto;margin-right:0}
  .lt-header--aus-rechts .lt-header__aktionen{justify-content:flex-end}

  /* Ohne Angabe bleibt es bei mittig - auf einer schmalen Spalte ist
     das die ruhigste Wahl. */
  .lt-header__aktionen{justify-content:center}

  /* Verlauf von unten statt von der Seite - bei zentriertem Text läge
     der dunkle Teil sonst neben dem, was lesbar bleiben soll. */
  .lt-header__flaeche::after,
  .lt-header--aus-rechts .lt-header__flaeche::after{
    background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.68));
  }
  .lt-header--vollflaechig .lt-header__flaeche::after,
  .lt-header--vollflaechig.lt-header--aus-rechts .lt-header__flaeche::after,
  .lt-header--vollflaechig.lt-header--aus-mitte .lt-header__flaeche::after{
    background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.73));
  }
}

/* Leerer Header – nur in der Vorschau. Er zeigt, dass der Baustein da
   ist, aber noch keinen Inhalt hat; veröffentlicht wird er nicht. */
.lt-header--leer{
  min-height:140px;display:flex;align-items:center;
  background:repeating-linear-gradient(45deg,
    rgba(128,128,128,.06) 0 12px, transparent 12px 24px);
  border:1px dashed rgba(128,128,128,.4);
  color:rgba(128,128,128,.9);font-size:.9rem;
}

/* Die Ausrichtung steht weiter oben und gilt bereits für ALLE
   Varianten - hier standen dieselben Regeln ein zweites Mal.

   Doppelte Regeln sind die Sorte Fehler, die später teuer wird: Man
   ändert eine und wundert sich, warum nichts passiert. */


/* ── Schatten am Headerbild ─────────────────────────────────────
   Nur bei den zweispaltigen Varianten: Ein flächiges Bild füllt den
   Schirm, dort gäbe es nichts, wovon es sich abheben könnte. */
/* Alle Headerbilder, nicht nur die zweispaltigen: Die Einschränkung
   war zu eng - auch ein Bild in einer kompakten Variante steht auf dem
   Seitengrund.

   Rückfallwert, damit es auch ohne aktuelle _basis.css greift. */
.lt-header__bild{
  box-shadow:var(--schatten-gross,
             0 4px 8px rgba(15,20,28,.07),
             0 18px 48px rgba(15,20,28,.16));
}
/* Beim flächigen Bild NICHT - es füllt den Schirm, dort gäbe es
   nichts, wovon es sich abheben könnte. */
.lt-header--vollflaechig .lt-header__bild,
.lt-header--sprung .lt-header__bild{box-shadow:none}

/* Die Kopfleiste bekommt ihren Schatten erst beim Scrollen - solange
   die Seite oben steht, sitzt sie bündig auf dem Bild.

   Ohne Skript: Ein Element mit einem Pixel Höhe ganz oben in der Seite
   sagt über :has(), ob man gescrollt hat - das wäre der Trick. Da es
   den hier nicht gibt, ein dauerhafter, sehr weicher Schatten: Er
   stört auf dem Bild nicht und trägt beim Scrollen. */
.lt-navi{
  box-shadow:0 1px 0 rgba(255,255,255,.06),
             0 8px 24px rgba(0,0,0,.28);
}


/* ─────────────────────────────────────────────────────────────────
   Senkrechte Position bei Sprungbild und vollflächig

   Der Inhalt liegt in einer Fläche, die den Schirm füllt - dort ist
   "oben, mittig, unten" eine echte Wahl. Bei einem Sprungbild mit
   Pfeil am unteren Rand will man den Text oft oben; bei einem Foto,
   dessen Motiv oben sitzt, unten.
   ───────────────────────────────────────────────────────────────── */

/* Am Baustein selbst ausrichten, nicht an der Fläche.

   .lt-header__flaeche ist der BILDHINTERGRUND (position:absolute) -
   dort hat align-items keine Wirkung auf den Text. Der Flex-Container
   ist der Baustein: ".lt-header--sprung{display:flex;align-items:center}".

   Deshalb griff die Einstellung kaum: Sie schob nur den unsichtbaren
   Hintergrund. */
.lt-header--sprung.lt-header--pos-oben,
.lt-header--vollflaechig.lt-header--pos-oben{align-items:flex-start}

.lt-header--sprung.lt-header--pos-mitte,
.lt-header--vollflaechig.lt-header--pos-mitte{align-items:center}

.lt-header--sprung.lt-header--pos-unten,
.lt-header--vollflaechig.lt-header--pos-unten{align-items:flex-end}

/* Der Inhalt braucht die volle Breite - UND einen zurückgesetzten
   senkrechten Rand.

   .lt-wrap hat "margin:0 auto". In einem Flex-Container schlägt ein
   auto-Rand jedes align-items: Der Browser verteilt den freien Platz
   auf beide Seiten und stellt das Element mittig, egal was
   danebensteht.

   Genau deshalb wirkte die Einstellung nicht - die Regeln waren
   richtig, sie kamen nur nicht gegen den auto-Rand an. */
.lt-header--pos-oben  > .lt-wrap,
.lt-header--pos-mitte > .lt-wrap,
.lt-header--pos-unten > .lt-wrap{
  width:100%;
  margin-block:0;
}
.lt-header--pos-oben  > .lt-wrap{margin-bottom:auto}
.lt-header--pos-unten > .lt-wrap{margin-top:auto}

/* Abstand zum Rand: Ohne ihn klebt der Text bei "oben" unter der
   Kopfleiste und bei "unten" auf dem Pfeil.

   Großzügig, damit die Wahl auch wirkt: Bei 40 Pixeln sieht "oben"
   fast aus wie "mittig". */
/* Abstand zum Rand - klein halten.

   Die Ausrichtung funktionierte längst; mein Innenabstand schob den
   Text nur wieder in die Mitte: 200 Pixel bei einem hohen Fenster,
   plus die 110 aus der Grundregel des Sprungbilds.

   Jetzt nur so viel, dass der Text nicht am Rand klebt. Beim
   Sprungbild etwas mehr unten, weil dort der Pfeil sitzt. */
.lt-header--pos-oben  > .lt-wrap{padding-top:34px}
.lt-header--pos-unten > .lt-wrap{padding-bottom:34px}

/* Der Pfeil endet bei 72 px (30 unten + 42 hoch). 88 lassen 16 Pixel
   Luft dazwischen - mehr braucht es nicht, und 96 waren schon zu
   viel.

   Bei mittiger Ausrichtung steht der Text ohnehin über dem Pfeil;
   dort gilt der Abstand nicht. */
.lt-header--sprung.lt-header--pos-unten > .lt-wrap{padding-bottom:45px}

/* Sitzt der Text oben, braucht er den Pfeilabstand nicht - die
   Grundregel mit ihren 110 px greift dann ins Leere und verschiebt
   ihn nach oben. */
.lt-header--sprung.lt-header--pos-oben > .lt-wrap{padding-bottom:0}

/* Auf dem Handy mehr Luft nach unten: Dort sitzt der Pfeil höher im
   Bild, und die Bedienleiste des Browsers frisst zusätzlich Platz. */
@media(max-width:760px){
  .lt-header--sprung.lt-header--pos-unten > .lt-wrap{padding-bottom:117px}
}

/* Bei "oben" kommt die Kopfleiste dazu - ohne Abstand liegt die
   Überschrift darunter. */
/* Oben: 50 px plus die Höhe der Kopfleiste, damit die Überschrift
   nicht darunter liegt. Bei transparenter Leiste steht sie ja über
   dem Bild. */
.lt-header--sprung.lt-header--pos-oben > .lt-wrap,
.lt-header--vollflaechig.lt-header--pos-oben > .lt-wrap{
  padding-top:calc(50px + var(--kopf-h, 64px))}

@media(max-width:760px){
  .lt-header--sprung.lt-header--pos-oben > .lt-wrap,
  .lt-header--vollflaechig.lt-header--pos-oben > .lt-wrap{
    padding-top:calc(26px + var(--kopf-h, 64px))}
}


/* ─────────────────────────────────────────────────────────────────
   Banner: breiter als der Fließtext

   Die Kopfleiste reicht bis 1560 Pixel, der .lt-wrap nur bis 1080 -
   dadurch stand die Überschrift 240 Pixel weiter innen als das Logo
   darüber. Das sah aus wie zwei verschiedene Raster.

   Nur bei den Bannern: Ein Fließtext über 1560 Pixel wäre unlesbar,
   dort bleiben die 1080 richtig. Eine Überschrift und ein Knopf
   vertragen die Breite.
   ───────────────────────────────────────────────────────────────── */

.lt-header--sprung > .lt-wrap,
.lt-header--vollflaechig > .lt-wrap{
  /* Die Mitte zwischen Fließtext (1080) und Kopfleiste (1560): Ganz
     außen wirkte der Text verloren, ganz innen stand er nicht mit
     dem Logo auf einer Linie. */
  max-width:1320px;
  padding-inline:34px;
}

/* Der Textblock darin bleibt schmal - eine Zeile über die volle
   Breite liest niemand. Er sitzt nur weiter außen. */
/* Die Überschrift darf breiter laufen als der Text - sonst brach
   ein langer Name um, obwohl daneben Platz war. Kicker, Unterzeile,
   Text und Knöpfe bleiben bei 52rem. */
.lt-header--sprung .lt-header__inhalt,
.lt-header--vollflaechig .lt-header__inhalt{max-width:none}
.lt-header--sprung .lt-header__inhalt > :not(.lt-header__titel),
.lt-header--vollflaechig .lt-header__inhalt > :not(.lt-header__titel){max-width:52rem}
.lt-header--sprung.lt-header--aus-mitte .lt-header__inhalt > *,
.lt-header--vollflaechig.lt-header--aus-mitte .lt-header__inhalt > *{margin-inline:auto}
.lt-header--sprung.lt-header--aus-rechts .lt-header__inhalt > *,
.lt-header--vollflaechig.lt-header--aus-rechts .lt-header__inhalt > *{margin-left:auto}

/* Bei mittiger und rechter Ausrichtung entsprechend. */
.lt-header--sprung.lt-header--aus-mitte .lt-header__inhalt,
.lt-header--vollflaechig.lt-header--aus-mitte .lt-header__inhalt{
  margin-inline:auto}
.lt-header--sprung.lt-header--aus-rechts .lt-header__inhalt,
.lt-header--vollflaechig.lt-header--aus-rechts .lt-header__inhalt{
  margin-left:auto}

@media(max-width:820px){
  .lt-header--sprung > .lt-wrap,
  .lt-header--vollflaechig > .lt-wrap{
    max-width:none;
    padding-inline:20px;
  }
}

/* ── Video statt Bild ───────────────────────────────────────────
   Flächig: das Video füllt die Fläche wie das Hintergrundbild, der
   Verlauf (::after) liegt darüber. Daneben: wie das Bild, gerundet. */
.lt-header__flaeche--video{overflow:hidden}
.lt-header__flaeche .lt-header__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Daneben: Seitenverhältnis des Videos bleibt erhalten - nichts wird
   beschnitten, Hoch- wie Querformat. */
.lt-header__medium .lt-header__video{display:block;width:auto;height:auto;max-width:100%;max-height:80vh;
  margin-inline:auto;border-radius:var(--radius);
  box-shadow:var(--schatten-gross, 0 4px 8px rgba(15,20,28,.07), 0 18px 48px rgba(15,20,28,.16))}

/* Video daneben: Die Medienspalte nimmt nur so viel Breite, wie das
   Video im Originalformat braucht (höchstens die Hälfte). Bei einem
   Hochformat-Video stand sonst eine leere halbe Spalte zwischen Video
   und Text. */
@media (min-width:761px){
  .lt-header--bild-links .lt-header__raster:has(> .lt-header__medium .lt-header__video){
    grid-template-columns:fit-content(50%) minmax(0,1fr);gap:clamp(32px,4vw,56px)}
  .lt-header--bild-rechts .lt-header__raster:has(> .lt-header__medium .lt-header__video){
    grid-template-columns:minmax(0,1fr) fit-content(50%);gap:clamp(32px,4vw,56px)}
}

/* ── Kürzere Seite läuft mit (Schalter am Baustein) ─────────────
   Wie beim Textblock. overflow:clip statt hidden: Es schneidet genauso
   ab, macht den Header aber nicht zum eigenen Scrollrahmen - sonst
   klebte position:sticky an nichts. */
@media(min-width:761px){
  .lt-header.lt-mitlauf{overflow:clip}
  .lt-header.lt-mitlauf .lt-header__raster > *{position:sticky;top:calc(var(--kopf-h, 64px) + 24px)}
}

/* ── Bild volle Breite, Originalformat ────────────────────────
   Nicht beschnitten: Höhe folgt dem Bild. Kein Rand, keine Rundung,
   bündig an Fensterrand und Kopfleiste. Text darunter. */
.lt-header--bildbreit{padding:0}
.lt-header__vollbild{line-height:0}
.lt-header__vollbild .lt-header__bild,
.lt-header__vollbild .lt-header__video{display:block;width:100%;height:auto;max-width:none;max-height:none;
  border-radius:0;object-fit:fill;position:static;box-shadow:none;filter:brightness(.86) saturate(.95)}
/* Leicht gedimmt - wirkt ruhiger, und Schrift/Bausteine daneben
   treten nicht hinter dem Foto zurück. */
/* Dicht am Bild; unten kein eigener Abstand - den bringt der
   nächste Baustein mit (sonst doppelt: 64 + 64 px). */
.lt-header--bildbreit > .lt-wrap{padding-top:clamp(18px,2.4vw,28px);padding-bottom:0}
/* Nur Bild, kein Text: Der folgende Baustein rückt näher heran -
   sein voller Innenabstand wirkte unter dem randlosen Bild wie ein Loch. */
.lt-header--nurbild + section,
.lt-header--nurbild + .lt-block{padding-top:clamp(24px,3vw,40px)}
/* Folgt ein Trenner (Linie/Symbol), sitzt er auf der Bildkante - der
   Baustein danach beginnt dort ohne Extra-Abstand (siehe trenner). */

/* Überschrift nie mitten im Wort trennen - nur an Leerzeichen oder
   nach einem Punkt (<wbr> aus render.php). */
.lt-header .lt-header__titel{overflow-wrap:normal;word-break:normal;hyphens:manual}

/* ── Abschluss unten (Zacken, schräg, Welle, Bogen) ───────────────
   Maske statt clip-path: Die Form ist ein SVG, das sich mit der Breite
   streckt (preserveAspectRatio none), oben bleibt alles sichtbar.
   Der Header überlappt den nächsten Abschnitt um die Formhöhe
   (negativer Abstand unten) und liegt darüber - in der Aussparung
   sieht man so den nächsten Abschnitt mit seiner eigenen Farbe, nicht
   den Seitengrund. Der Inhalt rückt um dieselbe Höhe nach oben ein,
   damit nichts angeschnitten wird; im Seitenfluss ändert sich nichts. */
.lt-header[class*="lt-header--ende-"]{
  --ende-h:clamp(26px,4.5vw,76px);
  position:relative;z-index:2;
  margin-bottom:calc(-1 * var(--ende-h));
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--ende-h) + 1px) no-repeat,var(--ende-form) bottom/100% var(--ende-h) no-repeat;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--ende-h) + 1px) no-repeat,var(--ende-form) bottom/100% var(--ende-h) no-repeat}
.lt-header[class*="lt-header--ende-"] > .lt-wrap{padding-bottom:var(--ende-h)}
.lt-header[class*="lt-header--ende-"] .lt-header__weiter{bottom:calc(30px + var(--ende-h) + env(safe-area-inset-bottom, 0px))}
.lt-header--ende-zacken{--ende-form:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V3L750 65L625 42L312 100L0 4Z'/%3E%3C/svg%3E")}
.lt-header--ende-schraege{--ende-form:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V0L0 100Z'/%3E%3C/svg%3E")}
.lt-header--ende-welle{--ende-form:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V52C860 100 700 100 560 62C420 24 300 12 160 42C100 56 45 74 0 82Z'/%3E%3C/svg%3E")}
.lt-header--ende-bogen{--ende-form:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1000V8Q500 192 0 8Z'/%3E%3C/svg%3E")}