/* Formular-Bausteine der Dev-Ansichten (Status, Kennzahlen-Kanäle, CWL-Wappen).
   Die Klassen stammen aus den Panel-Ansichten — das Dev-Portal lädt deren CSS
   nicht, deshalb stehen sie hier mit etwas mehr Luft eigenständig. */

.tn-neu-zeile { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: end;
  min-width: 0; }
.tn-neu-zeile .grow { flex: 1 1 220px; min-width: min(220px, 100%); }

.tk-feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tk-feld > .hint { font-size: 11.5px; }

.tn-schalter { display: flex; gap: 8px; align-items: center; min-width: 0;
  cursor: pointer; font-size: 13.5px; }

/* Status: Meldungs-Karten (Störung/Wartung) */
.st-e { display: flex; gap: 12px; align-items: center; min-width: 0; }
.st-e .grow { flex: 1; min-width: 0; }
.st-e strong { overflow-wrap: anywhere; }

/* Kopfband: sagt, WESSEN System hier gerade bearbeitet wird */
.dv-band { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px;
  min-width: 0; border-left: 3px solid var(--accent); }
.dv-band .icon { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.dv-band p { margin: 3px 0 0; max-width: 720px; }

/* Datei-Ablage: Raster, Kacheln, Detailansicht.
   Grid mit minmax(0,…) und min-width:0 in den Kindern — sonst sprengt ein
   langer Dateiname die Spalte auf schmalen Geräten. */
.fs-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
.fs-k { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.fs-bild { position: relative; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden;
  background: var(--surface-3); display: grid; place-items: center; }
.fs-bild img { width: 100%; height: 100%; object-fit: contain; }
.fs-sym .icon { width: 26px; height: 26px; opacity: .7; }
.fs-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.fs-txt strong, .fs-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-akt { display: flex; gap: 4px; flex-wrap: wrap; }
.fs-akt .btn { padding: 5px 8px; }
.fs-akt .icon { width: 15px; height: 15px; }

.fs-detail { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.fs-bild--gross { aspect-ratio: auto; min-height: 180px; padding: 8px; }
.fs-bild--gross img, .fs-bild--gross video { max-width: 100%; max-height: 320px; }
.fs-bild--gross audio { width: 100%; }
.fs-daten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px;
  margin: 0; font-size: 13px; align-content: start; }
.fs-daten dt { color: var(--ink-muted); }
.fs-daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) { .fs-detail { grid-template-columns: minmax(0, 1fr); } }

/* Postfach: Liste links, Nachricht rechts — auf schmalen Geräten untereinander.
   minmax(0,…) hält lange Betreffzeilen in ihrer Spalte. */
.m-leiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px; min-width: 0; }
.m-leiste input[type="search"] { flex: 1 1 240px; min-width: 0; }
.m-leiste select { flex: 0 1 200px; min-width: 0; }
.m-raster { display: grid; gap: 14px; min-width: 0;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
@media (max-width: 900px) { .m-raster { grid-template-columns: minmax(0, 1fr); } }
.m-liste, .m-lesen { min-width: 0; }
.m-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.m-item { padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  cursor: pointer; min-width: 0; border: 1px solid transparent; }
.m-item:hover { border-color: var(--line-strong); }
.m-item.m-neu { border-left: 3px solid var(--info); }
.m-zeile1 { display: flex; justify-content: space-between; gap: 10px; min-width: 0;
  font-size: 13px; }
.m-zeile1 strong, .m-zeile2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-zeile2 { font-size: 13.5px; margin-top: 2px; }
.m-marken { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.m-blaettern { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  margin-top: 12px; flex-wrap: wrap; font-size: 12.5px; }
.m-kopf h3 { margin: 0 0 4px; overflow-wrap: anywhere; }
.m-anh { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.m-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit;
  background: var(--surface-2); padding: 12px; border-radius: 10px; margin: 12px 0;
  max-height: 420px; overflow-y: auto; }
.m-antwort { display: grid; gap: 10px; }
.m-uebersicht { margin: 14px 0; display: grid; gap: 10px; min-width: 0; }
.m-uebersicht .chips { margin-bottom: 0; }
.m-uebersicht .chip { display: inline-flex; gap: 7px; align-items: center; }
.m-wahl { margin-bottom: 14px; }
.m-wahl .chips { margin-bottom: 0; }
.m-wahl .chip { display: inline-flex; gap: 6px; align-items: center; }
.m-kopf-zeile { display: flex; gap: 12px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; min-width: 0; }
.m-kopf-zeile h3 { flex: 1 1 220px; min-width: 0; }
.m-aktionen { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.m-rot:hover { border-color: var(--danger); color: var(--danger); }

/* ---- Öffentlich-Schalter der Datei-Ablage ---- */
.fs-k--pub { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.fs-pub-marke { position: absolute; top: 6px; left: 6px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 7px; background: rgba(0,0,0,.55); }
.fs-pub-marke .icon { width: 14px; height: 14px; color: #fff; }
.fs-akt .btn.is-an { color: var(--accent); }