/* SCENARIUM – Darstellung auf dem Handy (≤ 640 px). Nach den Seiten-Stylesheets laden. Tabellen-Labels: mobile.js */

/* Vollbild der Szenen-Animation (auch am Desktop) */
.anim-fs-btn { width: 32px; height: 28px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); cursor: pointer; font-size: 14px; line-height: 1; }
.anim-fs { position: fixed; inset: 0; z-index: 200; background: var(--panel, #fff); padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; }
.anim-fs svg.scene { width: 100%; height: auto; max-height: calc(100% - 44px); }
html.anim-lock, html.anim-lock body { overflow: hidden; }
.m-only { display: none !important; }

@media screen and (max-width: 640px) {
  main { padding: 12px 12px 40px; }
  .m-only { display: inline-flex !important; }
  code { overflow-wrap: anywhere; }
  .toolbar .segs, .segs { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .segs .seg { flex: none; }

  /* Kopfbereich kompakter: Modulzeile und Datenstand-Chips ausblenden, Text kleiner */
  .phero .logo-row, .phero .ctxbar { display: none; }
  .hero-in { padding: 16px 16px 18px; gap: 12px; }
  .phero h1 { font-size: 26px; }
  .lede { font-size: 13.5px; line-height: 1.55; margin-top: 8px; }
  body .demobar .demo-in { padding-top: 8px; padding-bottom: 8px; gap: 6px 8px; align-items: center; }
  body .demobar .demo-t { font-size: 12px; line-height: 1.45; flex: 1 1 200px; }
  body .demobar .demo-tag { font-size: 10px; padding: 2px 8px; }

  /* Navigation über Detailseiten: Zurück/Weiter als zwei gleich breite Knöpfe */
  .detail-nav { gap: 6px; }
  .detail-nav .grow { flex-basis: 100%; height: 0; }
  .detail-nav .btn { height: 34px; padding: 0 10px; font-size: 12.5px; }
  .detail-nav .btn.pn { flex: 1 1 40%; justify-content: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .detail-nav .btn.primary { flex: 1 1 100%; justify-content: center; }
  /* Szenario-Ansicht: Zeile 1 Zurück, Zähler, Pfeile; Zeile 2 Bearbeiten und Parametrieren nebeneinander */
  .scn-nav .grow { flex: 1; flex-basis: auto; height: auto; }
  .scn-nav .btn.pn { flex: none; width: 38px; padding: 0; }
  .scn-nav .pn-t { display: none; }
  .scn-nav .br { display: block; flex-basis: 100%; height: 0; }
  .scn-nav .btn:not(.pn):not(.primary):not(:first-child) { flex: 1 1 0; justify-content: center; }
  .scn-nav .btn.primary { flex: 2 1 0; }

  /* Listen (Schritt 1, 2): jede Zeile eine Karte – Kennung, Titel, dann Status-Chips */
  .list-wrap { overflow: visible; }
  table.list { display: block; min-width: 0 !important; width: 100%; }
  table.list thead { display: none; }
  table.list tbody { display: block; }
  table.list tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
  table.list td { display: block; border: 0 !important; padding: 0 !important; min-width: 0 !important; background: none !important; text-align: left !important; }
  table.list td.t-title { flex: 1 1 100%; order: 0; }
  table.list td:first-child { order: -1; }
  table.list .tt { min-width: 0; }
  table.list td.empty { flex: 1 1 100%; padding: 16px 0 !important; }
  table.list .t-proc, table.list .t-req, table.list .t-dom, table.list .mh { display: none; }
  table.list .sub { font-size: 12px; }

  /* übrige Tabellen gestapelt: Spaltenkopf klein über dem Wert */
  .tbl-wrap:has(> table.m-stack) { overflow: visible; }
  table.m-stack { display: block; min-width: 0 !important; width: 100% !important; }
  table.m-stack thead { display: none; }
  table.m-stack tbody, table.m-stack tr { display: block; }
  table.m-stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.m-stack tr:last-child { border-bottom: 0; }
  table.m-stack td, table.m-stack tbody th { display: block; border: 0 !important; padding: 2px 0 !important; text-align: left !important; min-width: 0 !important; width: auto !important; overflow-wrap: anywhere; }
  table.m-stack td:first-child { font-weight: 600; }
  table.m-stack td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-top: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6b7090); }
  table.m-stack td:empty { display: none; }
  table.m-stack select, table.m-stack input:not([type=checkbox]):not([type=radio]) { max-width: 100%; }
}

/* Animation im Vollbild auf dem Handy im Hochformat: um 90° gedreht als Querformat */
@media screen and (max-width: 640px) and (orientation: portrait) {
  .anim-fs { inset: auto; top: 0; left: 100vw; width: 100vh; width: 100dvh; height: 100vw; transform: rotate(90deg); transform-origin: top left; padding: 10px 16px; }
}