/* ============================================================
   responsive.css (CB-109) — Mobiltauglichkeit.
   Minimal-invasiv: nur ein Media-Query-Block, kein JS/Markup-Umbau.
   Als LETZTES Stylesheet eingebunden → gewinnt gegen base/shell/components.

   Kernprobleme auf schmalen Screens (Desktop-Layout unveraendert):
     - .app-shell ist height:100vh + overflow:hidden → clippt Tabs/Main,
       sobald der Header/Dashboard-Block zu hoch wird → „Menue nicht sichtbar".
     - Header ist ein starres 3-Spalten-Grid mit nowrap-Pillen → rechts abgeschnitten.
     - Tabellen nutzen fr-Grid-Spalten → viele Spalten quetschen sich unbedienbar klein.
   ============================================================ */

@media (max-width: 768px) {
  /* Shell: aus dem starren 100vh-Grid ein normaler, vertikal scrollender
     Dokumentfluss. Damit werden Tab-Leiste und Main immer erreichbar. */
  .app-shell {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  /* Header stapelt statt 3-Spalten-Grid. Adressblock (lang, am wenigsten
     wichtig) raus; Logo + Benutzermenue (Logout/Passwort) bleiben. */
  .app-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 8px 12px;
    gap: 8px;
  }
  .app-header .contact-block { display: none; }
  .app-header .header-left { justify-content: space-between; }
  .app-header .user-center { justify-content: flex-start; }
  /* User-Info-Pille darf umbrechen statt abgeschnitten zu werden. */
  .app-header .user-pill { white-space: normal; flex-wrap: wrap; gap: 10px 18px; }
  .app-header .user-right { justify-content: space-between; gap: 10px; }
  .app-header .btn-header-logout { padding: 9px 16px; font-size: 13px; }
  .app-header .logo-img { height: 40px; }

  /* Dashboard-Block: weniger Rand, fliesst mit. */
  .dashboard-area { padding: 8px 12px; overflow-y: visible; }

  /* Tab-Leiste: groessere Tap-Ziele, bleibt horizontal wischbar. */
  .app-tabs {
    padding: 4px 8px 0;
    -webkit-overflow-scrolling: touch;
  }
  .tab-item { height: 38px; font-size: 12px; padding: 0 12px; }
  .tab-item .icon { font-size: 15px; }

  /* Main: volle Breite statt 80%, kompaktes Padding, keine Zentrier-Begrenzung. */
  .app-main {
    padding: 14px 12px;
    align-items: stretch;
    overflow-y: visible;
  }
  .app-main > * { width: 100%; max-width: 100%; }

  /* Tabellen: horizontal wischbar mit lesbarer Mindestbreite, statt die
     fr-Spalten unbedienbar klein zu quetschen. Kopf + Body scrollen zusammen
     (gemeinsamer Scroll-Container .cb-table); Toolbar/Filter bleibt oben. */
  .cb-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cb-head-pill, .cb-body { min-width: 640px; }
  .cb-toolbar { flex-wrap: wrap; }

  /* Modal: mehr Platz + einspaltiges Formular (bequemer zu tippen). */
  .mo { padding: 10px; }
  .field-group { grid-template-columns: 1fr; }
  .field-group .span-2,
  .field-group .span-3 { grid-column: span 1; }
}