@charset "UTF-8";
/* textblock/modul.css – Gestaltung des Textblocks. */

.lt-block{padding:64px 0}
.lt-block__raster{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.lt-block--bild-rechts .lt-block__medium{order:2}
.lt-block--bild-oben .lt-block__raster{grid-template-columns:1fr}
.lt-block__bild{width:100%;height:auto;border-radius:var(--radius);display:block}

/* Eigener Abstand statt der globalen .5em - siehe Kommentar beim
   Header.

   Die Größe richtet sich nach der Funktion, nicht nach der Zahl im
   Tag: Ein h3 ist hier die Abschnittsüberschrift und darf groß sein,
   auch wenn h3 sonst klein wirkt. */
.lt-block__titel{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 8px;font-weight:700}

/* ── Video über die Einwilligung ────────────────────────────── */
.lt-video{
  position:relative;aspect-ratio:16/9;background:#000;
  border-radius:var(--radius);overflow:hidden;
}
.lt-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lt-video__platzhalter{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  color:#fff;text-align:center;padding:20px;font-size:.9rem;
}

@media(max-width:760px){
  .lt-block{padding:30px 0}
  .lt-block__raster{grid-template-columns:1fr}
  .lt-block--bild-rechts .lt-block__medium{order:0}
}

/* ── Video ──────────────────────────────────────────────────────
   Immer über das Seitenverhältnis, nie über feste Maße: Ein Video mit
   Pixelhöhe bricht auf jedem anderen Schirm. */
.lt-video{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  background:#000;
  border-radius:var(--radius);
  overflow:hidden;
}
.lt-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Sperre vor der Einwilligung. Liegt ÜBER dem iframe, damit dessen
   Fläche nicht anklickbar ist, solange nichts freigegeben wurde. */
.lt-video__sperre{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.lt-video__vorschau{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:blur(3px) brightness(.5);
}
.lt-video__text{
  position:relative;z-index:3;text-align:center;color:#fff;
  padding:20px;max-width:34rem;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.lt-video__text p{margin:0;font-size:.94rem;line-height:1.5}

.lt-video--fehler{
  aspect-ratio:auto;background:rgba(200,80,60,.1);
  border:1px dashed rgba(200,80,60,.6);color:#c8503c;
  padding:16px;font-size:.9rem;
}

.lt-warnung{
  margin:0 0 14px;padding:10px 14px;border-radius:var(--radius);
  background:rgba(200,80,60,.12);border:1px solid rgba(200,80,60,.5);
  color:#c8503c;font-size:.88rem;
}

/* ── Bilder und Videos im Fließtext ─────────────────────────────
   Sie stehen als <figure> mitten im Text, deshalb bekommen sie
   Außenabstand statt eines eigenen Rasters. */
.lt-block__text .lt-figur{margin:1.6em 0}
.lt-block__text .lt-figur img{
  display:block;width:100%;height:auto;border-radius:var(--radius);
}
.lt-block__text .lt-figur figcaption{
  margin-top:.5em;font-size:.84rem;opacity:.75;
}
.lt-block__sub{
  font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:600;opacity:.85;
  margin:0 0 1em;
}
.lt-block__text > *:first-child{margin-top:0}
.lt-block__text > *:last-child{margin-bottom:0}

/* Knopf im Fließtext.

   Er kommt aus dem Editor als <a class="lt-btn"> - die Gestaltung
   liegt in _basis.css, hier nur der Abstand: Steht er allein in einem
   Absatz, braucht er Luft, mitten im Satz nicht. */
.lt-block__text p > a.lt-btn:only-child{margin:.6em 0}
.lt-block__text a.lt-btn{margin-right:.5em}

/* Zwischentitel im Fließtext. Er steht unter der Unterzeile, ist also
   ein h5 - die Größe richtet sich nach der Funktion, nicht nach der
   Zahl im Tag. */
.lt-block__text h5{
  margin:1.8em 0 .5em;font-size:1.1rem;font-weight:700;line-height:1.3;
}
.lt-block__text h5:first-child{margin-top:0}

/* ── Ausrichtung des ganzen Blocks ──────────────────────────────
   Gilt für Überschrift, Unterzeile und Fließtext.

   Einzelne Absätze im Text setzen ihre eigene Klasse (.lt-mitte und
   Geschwister) und gewinnen dagegen - sie sind spezifischer. So gibt
   der Block die Richtung vor, ohne die Feinarbeit zu blockieren. */
/* Überschrift und Unterzeile stehen seit dem Umbau IM Text, nicht
   mehr in eigenen Elementen - die alten Klassen .lt-block__titel und
   .lt-block__sub gibt es nicht mehr. Deshalb den Textbereich selbst
   und alles darin ausrichten. */
:where(.lt-block--aus-mitte) .lt-wrap,
:where(.lt-block--aus-mitte) .lt-block__text,
:where(.lt-block--aus-mitte) .lt-block__text > *{text-align:center}

:where(.lt-block--aus-rechts) .lt-wrap,
:where(.lt-block--aus-rechts) .lt-block__text,
:where(.lt-block--aus-rechts) .lt-block__text > *{text-align:right}

/* Zentriert braucht eine Zeilenbreite, sonst laufen die Zeilen über
   die volle Breite und der Text franst aus. */
.lt-block--aus-mitte .lt-block__text{max-width:46rem;margin-left:auto;margin-right:auto}

/* Eine zentrierte Liste mit Aufzählungszeichen am linken Rand sieht
   falsch aus - die Zeichen hängen dann weit weg vom Text. Deshalb die
   Liste als Ganzes mittig setzen und die Zeichen nach innen holen. */
.lt-block--aus-mitte .lt-block__text ul,
.lt-block--aus-mitte .lt-block__text ol{
  display:inline-block;text-align:left;padding-left:1.2em;
}
.lt-block--aus-mitte .lt-figur img{margin-left:auto;margin-right:auto}
.lt-block--aus-rechts .lt-figur img{margin-left:auto}

/* Gliederung im Fließtext.

   Der Editor bietet Überschrift (h2), Unterüberschrift (h3) und
   Zwischentitel (h4). Sie stehen INNERHALB eines Blocks, dessen eigene
   Überschrift ein h3 ist - die Größen richten sich deshalb nach der
   Funktion im Text, nicht nach der Zahl im Tag. */
.lt-block__text h2{font-family:var(--schrift_titel);
  margin:1.8em 0 .5em;font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;line-height:1.25}
.lt-block__text h3{font-family:var(--schrift_titel);
  margin:1.6em 0 .45em;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;line-height:1.3}
.lt-block__text h4{font-family:var(--schrift_titel);
  margin:1.4em 0 .4em;font-size:clamp(1.08rem,1.5vw,1.25rem);font-weight:700;line-height:1.35}
.lt-block__text h2:first-child,
.lt-block__text h3:first-child,
.lt-block__text h4:first-child{margin-top:0}


/* Bilder im Textblock - dieselbe Tiefe wie überall. */
.lt-block__text .lt-figur img{
  box-shadow:var(--schatten,
             0 2px 4px rgba(15,20,28,.06),
             0 8px 24px rgba(15,20,28,.10));
}

/* Ein Bild direkt am Rand des Textbereichs wirkt mit Schatten
   angeschnitten. Etwas Luft davor und danach. */
.lt-block__text .lt-figur{
  margin-top:2em;
  margin-bottom:2em;
}

/* ─────────────────────────────────────────────────────────────────
   Bildvarianten

   Zwei Spalten bei "Bild links/rechts", untereinander bei "Bild
   oben". Auf schmalen Schirmen immer untereinander - zwei Spalten
   bei 380 Pixeln sind zwei Streifen.
   ───────────────────────────────────────────────────────────────── */

.lt-block--bild-links .lt-wrap,
.lt-block--bild-rechts .lt-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:center;
}

/* Die Reihenfolge im Markup ist immer Bild-dann-Text; bei "rechts"
   dreht die CSS sie um. So bleibt die Vorlesereihenfolge gleich, und
   ein Vorleseprogramm liest nicht bei jeder Variante etwas anderes. */
.lt-block--bild-rechts .lt-block__bild{order:2}

.lt-block__bild{margin:0}
.lt-block__bild img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius);
  box-shadow:var(--schatten, 0 2px 4px rgba(15,20,28,.06),
                             0 8px 24px rgba(15,20,28,.10));
}

/* Bild oben: volle Breite über dem Text, mit Abstand darunter. */
.lt-block--bild-oben .lt-block__bild{margin-bottom:32px}
.lt-block--bild-oben .lt-block__bild img{aspect-ratio:21/9;object-fit:cover}

@media(max-width:760px){
  .lt-block--bild-links .lt-wrap,
  .lt-block--bild-rechts .lt-wrap{grid-template-columns:1fr;gap:24px}
  /* Auf dem Handy steht das Bild immer oben - "rechts" hieße dort
     "darunter", und das ist keine Gestaltung, sondern ein Zufall. */
  .lt-block--bild-rechts .lt-block__bild{order:0}
}

/* ── Kürzere Seite läuft mit (Schalter am Baustein) ─────────────
   Die Ausrichtung bleibt (mittig zueinander); erst wenn die kürzere
   Seite die Kopfleiste erreicht, bleibt sie dort stehen und läuft bis
   zum Ende der längeren mit - sticky innerhalb der Rasterzelle. Die längere "klebt" auch, hat
   aber in ihrer Zeile keinen Weg - sie scrollt ganz normal.
   Nur nebeneinander: Untereinander gäbe es nichts, woran sie
   entlanglaufen könnte. */
@media(min-width:761px){
  .lt-block.lt-mitlauf .lt-wrap > *{position:sticky;top:calc(var(--kopf-h, 64px) + 24px)}
}