/* =========================================================================
   chatCOS — Feature: Leitstand-Sektion
   Modus-unabhaengige Ergaenzungen zu base.css. Keine Aenderung bestehender
   Klassen, keine !important. Der Bild-Bezel und die Lightbox tragen fest
   codierte dunkle Werte (siehe Kommentare), weil die Screenshots eine
   fremde Oberflaeche zeigen und in keinem der beiden Modi wie ein
   Rendering-Fehler oder Akzentfarb-Kollision wirken duerfen.
   ========================================================================= */

/* =========================================================================
   1. Bild-Rahmen (Bezel)
   ========================================================================= */
.lsfig { display: block; margin-inline: auto; margin-block: 0; }

.lsfig__trigger {
  appearance: none;
  border: 1px solid rgba(255,255,255,.08);
  font: inherit;
  padding: clamp(12px, 1.6vw, 18px);
  /* Fest codiertes neutrales Anthrazit, bewusst NICHT var(--surface):
     der Rahmen gehoert der fremden Board-Oberflaeche, nicht der eigenen Farbwelt. */
  background: #10161d;
  display: block; width: 100%; cursor: zoom-in;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.lsfig__trigger:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.16); }
.lsfig__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lsfig__trigger img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
}

.lsfig__cap { margin-top: 12px; font-size: .92rem; line-height: 1.55; color: var(--text-muted); max-width: 62ch; }

/* Groessen-Varianten (Erzaehlhierarchie) */
.lsfig--hero { max-width: 1120px; }
.lsfig--wide { max-width: 840px; }
/* Begleitbild: nur das Bild bleibt klein, die Bildunterschrift darf normal
   breit laufen. Linksbuendig unter dem Board-Bild, damit es als Detail zum
   Beweis-Bild gelesen wird und nicht als eigener, mittiger Block. */
.lsfig--mobile { max-width: 520px; margin-inline: 0; margin-top: 10px; }
.lsfig--mobile .lsfig__trigger { width: min(220px, 55%); }
.lsfig--pair { max-width: 460px; }

/* =========================================================================
   2. Hinweis auf Beispieldaten
   ========================================================================= */
.ls-note {
  font-size: .84rem; color: var(--text-muted); line-height: 1.5;
  margin-top: 10px; max-width: 62ch;
  border-left: 2px solid var(--border); padding-left: 12px;
}

/* =========================================================================
   3. Spalten-Raster (sieben Karten)
   ========================================================================= */
.ls-cols { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ls-cols .card { padding: clamp(18px, 1.8vw, 22px); }
.ls-cols .role h3 { font-size: 1rem; }
.ls-cols .role p { font-size: .89rem; }

.ls-cols .role__model--trigger {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: var(--accent-soft);
}

@media (max-width: 520px) {
  .ls-cols { grid-template-columns: 1fr; }
}

/* =========================================================================
   4. Merksatz-Callout (Pull-Quote, keine Karte)
   ========================================================================= */
.ls-quote {
  border-left: 3px solid var(--accent);
  padding-left: clamp(18px, 2vw, 26px);
  padding-block: clamp(6px, 1vw, 10px);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.35; letter-spacing: -.01em;
  color: var(--text); max-width: 30ch;
}

/* =========================================================================
   5. Lightbox (natives dialog)
   ========================================================================= */
.ls-lightbox {
  border: 0; padding: clamp(10px, 1.5vw, 16px); border-radius: var(--radius-lg);
  /* Fest codiert wie der Bezel: die Grossansicht bleibt in beiden Modi lesbar
     und kollidiert nicht mit dem jeweiligen Akzent. */
  background: #10161d; color: #e7f3ed;
  max-width: 96vw; max-height: 94vh; overflow: hidden;
  /* Der Browser zentriert einen modalen Dialog nur waagerecht. Mit inset:0
     und margin:auto steht er auch senkrecht mittig, statt oben zu kleben. */
  inset: 0; margin: auto;
}
.ls-lightbox__img {
  /* 74vh statt 82vh: Unter dem Bild stehen ZWEI Textzeilen (Bildunterschrift plus
     Beispieldaten-Hinweis). Bei 82vh wurde die zweite am Dialogrand abgeschnitten. */
  display: block; max-width: 92vw; max-height: 74vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.08);
}
.ls-lightbox__cap { margin-top: 10px; font-size: .88rem; line-height: 1.5; color: rgba(231,243,237,.72); max-width: 80ch; }
/* Der Beispieldaten-Hinweis steht am Anfang der Sektion, die Grossansicht zeigt die
   Betraege aber formatfuellend und mehrere Bildschirme spaeter. Deshalb hier noch einmal. */
.ls-lightbox__note { margin-top: 6px; font-size: .78rem; line-height: 1.5; color: rgba(231,243,237,.5); max-width: 80ch; }

.ls-lightbox__close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); color: #e7f3ed;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .25s var(--ease);
}
.ls-lightbox__close svg { width: 18px; height: 18px; }
.ls-lightbox__close:hover { background: rgba(255,255,255,.18); }
.ls-lightbox__close:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

@keyframes ls-backdrop-fade { from { opacity: 0; } to { opacity: 1; } }
.ls-lightbox::backdrop { background: rgba(4,8,12,.78); animation: ls-backdrop-fade .22s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .ls-lightbox::backdrop { animation: none; }
}

@media (max-width: 640px) {
  .ls-lightbox__close { top: 10px; right: 10px; width: 32px; height: 32px; }
  .ls-lightbox__img { max-height: 74vh; }
}

/* =========================================================================
   6. Zwischenueberschrift-Absatz
   Bewusst NICHT .lead: unter einer h3 waere .lead groesser als die
   Ueberschrift und die Hierarchie stuende auf dem Kopf.
   ========================================================================= */
.ls-intro { color: var(--text-muted); max-width: 720px; line-height: 1.6; margin-bottom: 22px; }

/* =========================================================================
   7. Abstands-Utilities
   ========================================================================= */
.ls-stack { margin-top: clamp(30px, 4vw, 48px); }
.ls-stack-lg { margin-top: clamp(52px, 6vw, 68px); }