/* ==========================================================================
   20 lage · Owner: wdf-section-builder (Auftrag P7-20)
   Text → gezeichnete Alltagsszene. Ab 1024: Text links (5 Spalten), Szene rechts (7 Spalten), beide mittig zueinander.
   Kurzzitat Haußner entfällt hier (Inhaber-Entscheidung F2b, steht vollständig in 90).
   Die Szene ist ein Bild (statisch, Bildwelt): Excel-Fenster mit Dateiversionen und lückenhafter Tabelle,
   ein Zettel und offene Rückfragen, die sich überlappen wie eine Collage. Das Chaos bleibt neutral:
   kein Türkis, keine Zustandszeichen (die Grammatik gehört der geordneten Seite).
   Smartphone zuerst, Erweiterungen mit min-width. Nur Tokens (style-lock § 0 Regel 8).
   ========================================================================== */

.lage__grid { row-gap: var(--s-5); }
.lage__text { display: flex; flex-direction: column; min-width: 0; }
.lage__title { margin-top: var(--s-3); }
.lage__body { margin-top: var(--s-4); }
.lage__scenecol { min-width: 0; }

/* ---------- Bild „lage-haende“ (Bildwelt W2, .media aus base.css) ----------
   Mobil: Band am Abschnittsanfang, unten in Ton 2 ausgeblendet; die Dachzeile greift 56 px hinein (Überlappung statt Zusatzhöhe).
   Eigener Mobil-Zuschnitt (2:1, <source>), Band 13:7 (.media--s-13x7, 390 × 210, style-lock § 18): Beschnitt nur seitlich,
   Fokus rechts, damit beide Hände ganz im Ausschnitt bleiben. */
.lage { padding-top: 0; }
.lage__bild {
  --media-focus: 100% 50%;
  order: -1;
  grid-column: 1 / -1;
  margin-bottom: calc(-1 * (var(--s-6) + var(--s-4)));
}
.lage__text { position: relative; z-index: var(--z-raised); }

/* ---------- Szene: alle Ebenen in einer Rasterzelle ----------
   P8 (lage-ordnet-sich) legt die geordnete Ebene in dieselbe Zelle; die Höhe ist die der höheren Ebene, nichts springt. */
.la-scene { display: grid; }
.la-layer {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  min-width: 0;
}

/* ---------- Excel-Fenster (Software: Geist über .ui) ---------- */
.la-sheet { min-width: 0; }
.la-sheet__bar { align-items: flex-start; }
/* Vier Versionen derselben Datei: gleichrangig, niemand weiß, welche gilt */
.la-files {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2);
}
.la-files li {
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-s);
  background: var(--color-ui-raised);
  font-size: var(--fs-ui-meta);
  line-height: var(--lh-title);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
/* Tag „Beispiel“: Kopfzeile des Fensters, rechts oben (wie im Hero-Fenster), kein Listenpunkt der Dateinamen */
.la-sheet__bar .tag { flex: none; align-self: flex-start; margin-left: auto; }

/* Tabelle: Spalten richten sich nach dem Inhalt, Wörter brechen nur im Notfall */
.la-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui-meta);
  line-height: var(--lh-title);
}
.la-table th, .la-table td {
  padding: var(--s-1);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
  color: var(--color-text);
  overflow-wrap: break-word;
}
.la-table th:first-child, .la-table td:first-child { padding-inline-start: var(--s-2); }
.la-table th:last-child, .la-table td:last-child { padding-inline-end: var(--s-2); }
.la-table th {
  font-weight: var(--fw-medium);
  color: var(--color-text-subtle);
  border-bottom-color: var(--color-line-strong);
}
.la-table td.mono { font-size: var(--fs-mono); color: var(--color-text-muted); }
/* Unsichere Angaben: gedämpft, mit Fragezeichen (Wort) */
.la-table .la-open { color: var(--color-text-subtle); }
/* Lücke: gestrichelt = noch nicht da (style-lock § 4) */
.la-table .la-gap { outline: 1px dashed var(--color-miss-line); outline-offset: calc(-1 * var(--s-1)); }
/* Zelle „offen??“: gerahmt und in Warnfarbe (Form + Farbe + Wort) */
.la-table .la-flag { color: var(--color-warn); outline: 1px solid var(--color-warn-line); outline-offset: calc(-1 * var(--s-1) / 2); font-weight: var(--fw-medium); }
/* Zelle mit Kommentar: kleine Ecke wie in der Tabellenkalkulation */
.la-table .la-note { position: relative; font-weight: var(--fw-medium); }
.la-table .la-note::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 var(--s-2) var(--s-2) 0;
  border-color: transparent var(--color-warn) transparent transparent;
}
/* Kommentar der Zelle: hängt unter der Tabelle, rechts */
.la-comment {
  justify-self: end;
  width: fit-content;
  margin: var(--s-2) var(--s-3) var(--s-4) auto;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-m);
  background: var(--color-ui-overlay);
  font-size: var(--fs-ui-meta);
  line-height: var(--lh-title);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

/* ---------- Zettel: Bildwelt-Zitat, Schibsted auf ui-raised (kein Papier-Ton, style-lock § 9) ---------- */
.la-zettel {
  position: relative; z-index: var(--z-raised);
  justify-self: start;
  max-width: 56%;
  margin: calc(-1 * var(--s-5)) 0 0 var(--s-3);
  padding: var(--s-3);
  background: var(--color-ui-raised);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-1);
  font-family: var(--f-page);
  font-size: var(--fs-small);
  line-height: var(--lh-title);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  transform: rotate(var(--paper-tilt-s)) translateZ(0);
  transform-origin: left bottom;
  text-wrap: pretty;
}

/* ---------- Rückfragen: Nachrichtenblasen, abwechselnd links und rechts ---------- */
.la-chat {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-1);
}
.la-chat li {
  justify-self: start;
  max-width: 100%;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-m) var(--r-m) var(--r-m) var(--r-s);
  background: var(--color-ui-raised);
  font-size: var(--fs-ui);
  line-height: var(--lh-title);
  color: var(--color-text);
  text-wrap: pretty;
}
.la-chat li:nth-child(even) {
  justify-self: end;
  border-radius: var(--r-m) var(--r-m) var(--r-s) var(--r-m);
}

/* ---------- ab 480: etwas mehr Luft in der Tabelle ---------- */
@media (min-width: 480px) {
  .la-table th, .la-table td { padding-inline: var(--s-2); }
  .la-table th:first-child, .la-table td:first-child { padding-inline-start: var(--s-3); }
  .la-table th:last-child, .la-table td:last-child { padding-inline-end: var(--s-3); }
}

/* ---------- ab 768: Szene zweispaltig (Fenster | Zettel + Rückfragen), dichter gesetzt ---------- */
@media (min-width: 768px) {
  .la-layer {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    column-gap: var(--s-5);
    row-gap: var(--s-4);
    align-items: start;
  }
  .la-sheet { grid-column: 1; grid-row: 1 / span 2; }
  .la-sheet__bar { padding: var(--s-3) var(--s-4); }
  .la-table th, .la-table td { padding-block: var(--s-2); }
  .la-table th { font-size: var(--fs-ui-colhead); }
  .la-table td.mono { font-size: var(--fs-mono-l); }
  .la-comment { margin-block: var(--s-3) var(--s-5); }
  .la-zettel {
    grid-column: 2; grid-row: 1;
    max-width: none;
    margin: var(--s-6) 0 0 calc(-1 * var(--s-5));
    padding: var(--s-3) var(--s-4);
  }
  .la-chat { grid-column: 2; grid-row: 2; gap: var(--s-2); }
  .la-chat li { padding-block: var(--s-2); }
}

/* ---------- ab 1024: Text 5 | Szene 7, vertikal mittig zueinander ---------- */
@media (min-width: 1024px) {
  .lage__grid { align-items: center; }
  .lage__text { grid-column: 1 / span 5; }
  .lage__scenecol { grid-column: 6 / span 7; padding-inline-start: var(--s-6); }
  .la-zettel { transform: rotate(var(--paper-tilt-l)) translateZ(0); }
}

/* ---------- ab 768: Bild als eigene Zeile über dem Text, normaler Abschnittsabstand ---------- */
@media (min-width: 768px) {
  .lage { padding-top: var(--space-section); }
  .lage__bild { --media-fade-x: 16%; margin-bottom: 0; }
}

/* ---------- ab 1024: Bild unter dem Fließtext (Spalte 1–5), läuft links bis an den Fensterrand; Szene rechts über beide Zeilen ---------- */
@media (min-width: 1024px) {
  .lage__grid { align-items: start; }
  .lage__text { grid-column: 1 / span 5; grid-row: 1; }
  .lage__bild { order: 0; grid-column: 1 / span 5; grid-row: 2; margin-top: var(--s-2); }
  .lage__scenecol { grid-row: 1 / span 2; align-self: center; }
}

/* motion — Owner: wdf-motion-designer (P16-M, Runde 3b), Bewegung lage-szene (motion.js)
   „tippt …“ vor jeder Rückfrage: motion.js hängt je Rückfrage eine Blase (aria-hidden, li.la-typing) an die Liste und
   legt sie absolut auf den Platz der kommenden Nachricht. Absolut = kein Rasterplatz, die Liste ändert ihre Höhe nicht.
   Die Blase erbt Rahmen, Fläche und Innenabstand von .la-chat li; hier nur Lage, Ecken und die drei Punkte. */
.la-chat { position: relative; }
.la-chat > .la-typing {
  position: absolute; left: 0;
  display: flex; align-items: center; gap: var(--s-1);
  opacity: 0;
  pointer-events: none;
}
.la-chat > .la-typing[data-side="rechts"] {
  left: auto; right: 0;
  border-radius: var(--r-m) var(--r-m) var(--r-s) var(--r-m);
}
.la-chat > .la-typing::before { content: "\200b"; width: 0; } /* Zeilenhöhe wie eine einzeilige Nachricht */
.la-chat > .la-typing i {
  width: var(--s-1); height: var(--s-1);
  border-radius: 50%;
  background: var(--color-text-muted);
}