/* ══ COCKPIT — responsive.css · Desktop-first → 360px benutzbar ══ */

@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* .rsplit fehlt bewusst: steuert sich seit c5 über Container-Queries (review.css) */
  .ovsplit, .dsplit, .chgrid { grid-template-columns: minmax(0, 1fr); }
  .dsplit__doc { position: static; }
  .docpane { max-height: none; }
}

@media (max-width: 900px) {
  .au { grid-template-columns: 64px minmax(0, 1fr); }
  .au__mod { grid-column: 2; }
  .au__txt { grid-column: 1 / -1; padding-left: 0; }
}

/* ── Mobil: Rail wird Bottom-Bar, Tabellen werden Karten ── */
@media (max-width: 720px) {
  :root { --rail-w: 0px; --top-h: 52px; }

  .rail {
    inset: auto 0 0 0; width: auto; height: 62px;
    flex-direction: row; align-items: stretch; justify-content: space-around;
    padding: 0; border-right: 0; border-top: 1px solid rgba(234, 229, 217, .12);
  }
  .rail__mark, .rail__foot { display: none; }
  .rail__link { flex: 1; min-height: 62px; padding: .55rem 0 .45rem; justify-content: center; font-size: .56rem; }
  .rail__link svg { width: 19px; height: 19px; }
  .rail__link.on::before { left: 50%; top: -4px; transform: translateX(-50%) rotate(45deg); width: 7px; height: 7px; }
  .rail__badge { top: .3rem; right: 50%; margin-right: -22px; }

  .topbar { left: 0; gap: .6rem; }
  .topbar__title { font-size: .9rem; }
  .topbar__prod { display: none; }
  .topbar__clock { display: none; }
  .topbar__search { flex: 1 1 auto; }
  .topbar__badge { font-size: .56rem; padding: .26rem .45rem .22rem; }

  .view { margin-left: 0; padding: calc(var(--top-h) + 1rem) .9rem calc(62px + 2.2rem); }
  .kpis { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .kpi { padding: .8rem .85rem .75rem; }

  /* Tabelle → Karten */
  .tblwrap { overflow: visible; background: none; border: 0; box-shadow: none; }
  .stbl, .stbl tbody, .stbl tr, .stbl td { display: block; }
  .stbl thead { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
  .stbl tr {
    background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius);
    padding: .55rem .85rem; margin-bottom: .6rem;
    box-shadow: 0 1px 3px rgba(27, 24, 19, .05);
  }
  .stbl td { padding: .3rem 0; border-bottom: 0; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
  .stbl td.num { text-align: left; }
  .stbl td::before {
    content: attr(data-th);
    flex: 0 0 84px;
    font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--fg-dim);
  }
  .stbl td:not([data-th])::before { content: none; }

  /* Positions-Tabelle im Detail ebenfalls als Karten */
  .ptbl, .ptbl tbody, .ptbl tr, .ptbl td { display: block; }
  .ptbl thead { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
  .ptbl tr { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: .5rem .7rem; margin-bottom: .5rem; }
  .ptbl td { padding: .22rem 0; border-bottom: 0; display: flex; gap: .7rem; }
  .ptbl td.num { text-align: left; }
  .ptbl td::before {
    content: attr(data-th);
    flex: 0 0 84px;
    font-family: var(--f-mono); font-size: .58rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--fg-dim);
  }

  /* Verzollungs-Tabelle als Karte: HS-Zelle darf umbrechen, Beschreibung volle Breite */
  .ptbl--customs td { flex-wrap: wrap; }
  .ptbl--customs td[data-th="HS-Code"] { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .ptbl--customs td[data-th="HS-Code"]::before { flex-basis: auto; }
  .ptbl--customs .ptbl__desc { max-width: none; }
  .ptbl--customs tfoot td { background: none; }
  /* E3 (06.08.): Warennummern-Tabelle als Karte — 11-Steller darf in der Karte stehen */
  .ptbl--byhs td[data-th="Warennummer"] { white-space: normal; flex-direction: column; align-items: flex-start; gap: .15rem; }
  .ptbl--byhs td[data-th="Warennummer"]::before { flex-basis: auto; }
  .zoll-noterow td { display: flex; }
  /* E12: Anschrift-Unterzeile behält ihr eingerücktes Label */
  .fr__k--sub { padding-left: .5rem; }

  .fr { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .fr .cb { justify-self: start; }
  /* Adressen behalten ihre Zeilenumbrüche auch mobil */
  .fr__v--addr { white-space: pre-line; }
  /* Detail-Kopf: Ankunfts-Kästen unter den Titel, volle Breite teilen */
  .dhead { gap: .8rem; }
  .dhead__arr { width: 100%; }
  .dhead__arrbox { flex: 1; min-width: 0; }
  /* Register-Reiter: kompakter, Meta-Zeile bleibt lesbar */
  .fregister { gap: .25rem; }
  .fregister__tab { padding: .45rem .7rem; }
  /* LIVE-PDF mobil: feste, greifbare Höhe, damit der Canvas-Host füllt (kein Kollaps) */
  .docpane--pdf { height: 70vh; min-height: 420px; }
  .livedoc--pdf, .livedoc { min-height: 420px; }
  .doc { padding: 1rem .9rem 1.1rem; }
  .doc__grid { grid-template-columns: 1fr; }
  .doc__box:nth-child(odd) { border-right: 0; }
  .doctabs { flex-wrap: wrap; }
  .dhead__row1 { gap: .5rem; }
  .loopcard__grid, .localcard__models { grid-template-columns: 1fr; }
  .filters { gap: .45rem; }
  .filters select { flex: 1 1 46%; }
}

@media (max-width: 380px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi__v { font-size: 1.6rem; }
  /* Badge bleibt IMMER sichtbar (Pflicht) — dafür weicht die Wortmarke */
  .topbar__title { display: none; }
  .topbar__badge { font-size: .54rem; letter-spacing: .08em; }
}