/* ─────────────────────────────────────────────────────────────────
   Einbettung – Kalender, Karten, Videos

   Farben aus den Flächen-Tokens, damit der Baustein auf jedem Grund
   trägt. Der eingebettete Inhalt selbst bringt seine eigene
   Gestaltung mit; hier geht es nur um den Rahmen darum.
   ───────────────────────────────────────────────────────────────── */

.lt-eb{padding:64px 0}

.lt-eb__kopf{max-width:44rem;margin:0 0 32px}
.lt-eb__titel{font-family:var(--schrift_titel);
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.15;margin:0;
  color:var(--auf-flaeche-stark);text-wrap:balance}
.lt-eb__sub{margin:10px 0 0;font-size:1rem;line-height:1.6;
  color:var(--auf-flaeche-schwach)}

/* ── Der Rahmen ──────────────────────────────────────────────────
   position:relative, weil der Platzhalter darüberliegt. */
.lt-eb__box{position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--auf-flaeche-linie);background:var(--auf-flaeche-grund)}

.lt-eb__rahmen{display:block;width:100%;height:100%;border:0}

/* ── Höhen, die mitwachsen ───────────────────────────────────────
   Feste Pixelwerte waren der Fehler im ersten Wurf: 760 Pixel sind
   auf einem Telefon höher als der Bildschirm - man scrollt dann
   innerhalb des Kalenders, während die Seite darunter stehenbleibt,
   und kommt kaum wieder heraus.

   clamp() setzt drei Werte: kleinste Höhe, gewünschte Höhe in
   Anteilen der Bildschirmhöhe, größte Höhe. Damit passt sich der
   Rahmen dem Gerät an, ohne je unbedienbar klein zu werden.

   svh statt vh: Auf dem Telefon ändert sich vh, wenn die
   Adressleiste beim Scrollen ein- und ausfährt - der Rahmen würde
   springen. svh nimmt die kleinste Höhe und bleibt ruhig. */
.lt-eb--h-klein  .lt-eb__box{height:clamp(240px, 42svh, 340px)}
.lt-eb--h-mittel .lt-eb__box{height:clamp(380px, 62svh, 560px)}
.lt-eb--h-gross  .lt-eb__box{height:clamp(460px, 80svh, 820px)}

/* Video: Seitenverhältnis statt Höhe - so bleibt es formatfüllend,
   egal wie breit die Spalte ist, und es gibt nie schwarze Balken. */
.lt-eb--h-video  .lt-eb__box{height:auto;aspect-ratio:16/9}

/* Sehr breite Bildschirme: Das Video soll nicht höher werden als der
   Schirm. Über die BREITE deckeln, nicht über die Höhe.

   Vorher stand hier das Gegenteil: feste Höhe, Breite aus dem
   Verhältnis gerechnet. Das ergab bei 760px Höhe ein iframe von
   1351px Breite - in der Textvariante mit halber Spalte lief es weit
   rechts aus dem Bild heraus. max-width:100% half nichts, weil
   aspect-ratio die Breite selbst bestimmt.

   Mit einer Höchstbreite bleibt das Verhältnis erhalten, die Höhe
   ergibt sich daraus, und nichts kann überlaufen: Der Kasten ist nie
   breiter als seine Spalte. */
@media(min-width:1400px){
  .lt-eb--h-video.lt-eb--voll .lt-eb__box{
    max-width:min(100%, calc(78svh * 16 / 9));
    margin-inline:auto}
}

/* ── Varianten ───────────────────────────────────────────────────*/
.lt-eb--schmal .lt-eb__box,
.lt-eb--schmal .lt-eb__kopf{max-width:44rem;margin-inline:auto}
.lt-eb--schmal .lt-eb__kopf{text-align:center}

/* Text daneben: erst ab genug Breite, sonst untereinander - ein
   Kalender in einer halben Handybreite ist unbedienbar. */
.lt-eb__zwei{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:900px){
  .lt-eb__zwei{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:36px}
  .lt-eb--text .lt-eb__kopf{margin-bottom:0;position:sticky;top:96px}
}

/* ── Platzhalter bis zur Einwilligung ────────────────────────────
   Er liegt ÜBER dem Rahmen und deckt ihn ab. Das iframe hat bis zur
   Zustimmung ohnehin kein src - der Platzhalter verhindert nur, dass
   man auf eine leere Fläche schaut. */
.lt-eb__consent{position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:28px;text-align:center;
  background:var(--auf-flaeche-grund);color:var(--auf-flaeche-schwach)}
.lt-eb__consent svg{color:var(--auf-flaeche-akzent);flex:0 0 auto}
/* Zwei Zeilen mit unterschiedlichem Gewicht: erst WAS und VON WEM,
   darunter kleiner der Hinweis zur Datenübertragung. Beides gleich
   groß gesetzt liest niemand zu Ende. */
.lt-eb__dienst{font-size:1rem !important;color:var(--auf-flaeche-stark)}
.lt-eb__dienst strong{font-weight:700}
.lt-eb__consent p{margin:0;font-size:.84rem;line-height:1.55;max-width:32rem}

/* ── Nicht freigegeben ───────────────────────────────────────────
   Nur in der Vorschau sichtbar, siehe render.php. Sieht nach Notiz
   aus, nicht nach Seiteninhalt. */
.lt-eb__warnung{display:none}
.lt-vorschau .lt-eb__warnung{display:block;
  padding:14px 16px;border:1px dashed var(--auf-flaeche-linie);border-radius:8px;
  font-size:.82rem;line-height:1.55;color:var(--auf-flaeche-schwach);max-width:44rem}
.lt-eb__url{font-family:var(--schrift_mono,monospace);color:var(--auf-flaeche-stark)}

@media(max-width:600px){
  .lt-eb{padding:40px 0}
  /* Höhen brauchen hier nichts mehr: clamp() oben regelt das von
     selbst. Der alte Block setzte wieder feste Werte und hob die
     Anpassung damit auf. */
  .lt-eb__box{border-radius:calc(var(--radius) * .6)}
}