/* Globale Medienfamilie fuer redaktionelle Detailseiten. */
.lhb-media-figure{position:relative;display:block;overflow:hidden;background:var(--lhb-surface-media-placeholder);margin:0}
.lhb-media-figure>img{display:block;width:100%;height:auto;object-fit:cover}
.lhb-media-caption{position:absolute;left:0;right:0;bottom:0;z-index:6;box-sizing:border-box;padding:10px 13px;background:var(--lhb-overlay-light-95);color:var(--lhb-color-ink);border-top:var(--lhb-line-width-medium) solid var(--lhb-line-color);transform:translateY(100%);transition:transform .22s ease;pointer-events:none}
.lhb-media-figure:hover .lhb-media-caption,.lhb-media-figure:focus-within .lhb-media-caption{transform:translateY(0)}
.lhb-media-caption strong{display:block;font-family:var(--lhb-font-display);font-size:clamp(12px,.95vw,15px);font-weight:800;line-height:1.12}
.lhb-media-caption span{display:block;margin-top:4px;font-family:var(--lhb-font-body);font-size:11px;line-height:1.28;color:var(--lhb-neutral-750)}
.lhb-media-strip{display:flex;gap:12px;overflow-x:auto;padding:14px 16px 16px;background:var(--lhb-color-paper);border-top:var(--lhb-line-width-medium) solid var(--lhb-line-color);scrollbar-width:thin;scrollbar-color:var(--lhb-color-accent) var(--lhb-neutral-150)}
.lhb-media-thumb{position:relative;flex:0 0 150px;height:105px;padding:0;border:var(--lhb-line-width-medium) solid var(--lhb-line-color);background:var(--lhb-surface-media-placeholder);cursor:zoom-in;overflow:hidden}
.lhb-media-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease,opacity .2s ease}
.lhb-media-thumb:hover img,.lhb-media-thumb:focus-visible img{transform:scale(1.025)}
.lhb-media-thumb:focus-visible{outline:3px solid var(--lhb-color-accent);outline-offset:2px}
@media (hover:none){.lhb-media-caption{position:static;transform:none}.lhb-media-thumb{flex-basis:132px;height:92px}}


/* v274 – gerahmte Medienbuehne nach dem bewaehrten IKE-Prinzip.
   Feste Hero-/Split-Hoehen behalten einen grosszuegigen weissen Aussenraum;
   das eigentliche Medium liegt in einem ruhigen, begrenzten 16:9-Rahmen.
   Bilder werden nie beschnitten, sondern mit object-fit:contain zentriert. */
.lhb-framed-media-stage{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--weiss);
  overflow:hidden;
}
.lhb-framed-media-stage__frame{
  position:relative;
  box-sizing:border-box;
  width:min(100%,var(--lhb-media-frame-max,700px));
  aspect-ratio:16 / 9;
  margin:0;
  border:var(--linie) solid var(--lhb-line-color);
  background:var(--weiss);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lhb-framed-media-stage__frame>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  background:var(--weiss);
}
.lhb-framed-media-stage__frame>iframe,
.lhb-framed-media-stage__frame>video{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:var(--schwarz);
}
.lhb-framed-media-stage__frame.lhb-lightbox-trigger{cursor:zoom-in}
@media(max-width:760px){
  .lhb-framed-media-stage{padding:18px 22px 22px}
  .lhb-framed-media-stage__frame{width:100%;max-width:none}
}


/* v341 – dokumentarische Bildgruppen: kompakte Vorschau, Vollansicht in der globalen Lightbox.
   Bestehende Globalprinzipien bleiben verbindlich: keine harten Beschnitte,
   natuerliche Proportionen, einheitliche Zeilenhoehen und Detailansicht in der
   globalen Lightbox. Die natuerlichen Bildproportionen werden von components.js
   als CSS-Variablen bereitgestellt; dadurch sitzen Rahmen und Bild ohne
   seitenbezogene Format-Hacks passgenau zusammen. */
.lhb-framed-media-stage__frame--natural{
  width:min(100%,calc(var(--lhb-media-natural-max-height,480px) * var(--lhb-media-natural-ratio,1.5)));
  max-width:var(--lhb-media-frame-max,700px);
  aspect-ratio:auto;
  height:auto;
}
.lhb-framed-media-stage__frame--natural>img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}
.lhb-documentary-media-grid{
  display:grid;
  gap:16px;
  width:100%;
  max-width:900px;
  align-items:stretch;
}
.lhb-documentary-media-grid--single{
  grid-template-columns:minmax(0,1fr);
  max-width:780px;
}
.lhb-documentary-media-grid--pair{
  grid-template-columns:var(--lhb-documentary-media-columns,repeat(2,minmax(0,1fr)));
  max-width:min(900px,var(--lhb-documentary-media-pair-width,900px));
}
/* Fallback, solange Bilddimensionen noch nicht geladen sind. Danach setzt die
   globale Formaterkennung exakte, proportionsbasierte Spaltenbreiten. */
.lhb-documentary-media-grid--mixed-landscape-portrait{
  grid-template-columns:var(--lhb-documentary-media-columns,minmax(0,1.35fr) minmax(180px,.65fr));
}
.lhb-documentary-media-grid--mixed-portrait-landscape{
  grid-template-columns:var(--lhb-documentary-media-columns,minmax(180px,.65fr) minmax(0,1.35fr));
}
.lhb-documentary-media-figure{
  position:relative;
  margin:0;
  min-width:0;
  border:var(--lhb-line-width-medium) solid var(--lhb-line-color);
  background:var(--weiss);
  overflow:hidden;
}
/* Einzelbilder werden anhand ihres realen Seitenverhaeltnisses auf hoechstens
   420 px Vorschauhoehe skaliert. Dadurch bleiben auch Karten/Hochformate als
   Ganzes sichtbar; der Rahmen folgt exakt der dargestellten Bildflaeche. */
.lhb-documentary-media-grid--single>.lhb-documentary-media-figure{
  display:block;
  justify-self:start;
  width:min(100%,calc(var(--lhb-documentary-media-single-max-height,420px) * var(--lhb-documentary-media-source-ratio,var(--lhb-documentary-media-ratio,1.5))));
  max-width:100%;
}
.lhb-documentary-media-grid--single>.lhb-documentary-media-figure>img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  background:var(--weiss);
}
/* Zweiergruppen bilden eine gemeinsame, maximal 270 px hohe Bildzeile. Die
   Spaltenbreiten folgen den realen Seitenverhaeltnissen, sodass Quer/Quer und
   Quer/Hoch jeweils dieselbe sichtbare Bildhoehe erhalten, ohne Beschnitt. */
.lhb-documentary-media-grid--pair>.lhb-documentary-media-figure{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:auto;
  aspect-ratio:var(--lhb-documentary-media-ratio,1.5);
}
.lhb-documentary-media-grid--pair>.lhb-documentary-media-figure>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:var(--weiss);
}
@media(max-width:760px){
  .lhb-framed-media-stage__frame--natural{max-width:100%}
  .lhb-documentary-media-grid--pair,
  .lhb-documentary-media-grid--mixed-landscape-portrait,
  .lhb-documentary-media-grid--mixed-portrait-landscape{
    grid-template-columns:1fr;
    max-width:780px;
  }
  .lhb-documentary-media-grid--pair>.lhb-documentary-media-figure{
    display:block;
    justify-self:start;
    width:min(100%,calc(var(--lhb-documentary-media-single-max-height,420px) * var(--lhb-documentary-media-source-ratio,var(--lhb-documentary-media-ratio,1.5))));
    max-width:100%;
    height:auto;
  }
  .lhb-documentary-media-grid--pair>.lhb-documentary-media-figure>img{
    width:100%;
    height:auto;
    max-width:100%;
  }
}