/* ==========================================================================
   Seitenrahmen 2026 – eine Ausrichtung und Breite für alle Modulseiten
   --------------------------------------------------------------------------
   Anlass (15.09.2026): „Die Ausrichtung der einzelnen Module ist komplett
   unterschiedlich, mal rechts, mal mittig.“ Gemessen: Dashboard, Personal und
   die modul-seite-Seiten liegen bei 1480 px, Meetings bei 920 px mittig,
   Pläne bei 1100 px mittig, Spaces und Objekte bei 1100 px linksbündig, viele
   Seiten ohne Grenze. Jede Vorlage brachte ihren eigenen Rahmen mit.

   Hier gilt ein Rahmen für alle: Jedes direkte Kind des Inhaltsbereichs
   (.content) ist so breit wie der Bereich, höchstens --seite-breite, und
   liegt darin mittig. Die Regel setzt sich mit !important über die
   Einzelmaße der Vorlagen. Schwebende Schichten (Dialoge, Hinweise) sind
   ausgenommen, sie müssen den Bildschirm bedecken.

   Zweiter Teil: Bedienbarkeit auf Android und iOS. Tabellen scrollen quer
   statt abgeschnitten zu werden, Eingaben haben 16 px (kein Hineinzoomen auf
   iOS), Knöpfe mindestens 44 px, feste Raster fallen auf eine Spalte,
   Zeilen brechen um.
   ========================================================================== */

:root { --seite-breite: 1480px; }

/* ── Ein Rahmen ────────────────────────────────────────────────────────── */
.content > :not(script):not(style):not(template):not(link):not(#toast-container):not(.toast-container):not(.modal-overlay):not(dialog):not(.fw365-dialog-overlay):not([hidden]) {
  width: 100%;
  max-width: var(--seite-breite) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
/* Verschachtelte Rahmen der alten Vorlagen ziehen auf dieselbe Breite. */
.content .hero-page > .container,
.content .hero-page .container,
.content > .container,
.content .content-fuss,
.content .modul-seite,
.content .page-container { max-width: var(--seite-breite) !important; margin-left: auto !important; margin-right: auto !important; }
.content { overflow-x: hidden; }

/* ── Telefon und Tablet ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tabellen: quer scrollen statt abschneiden (Atemschutz, Finanzen,
     Einsatzdoku, Tagebuch, Hilfsfrist waren rechts abgeschnitten). */
  .content table:not(.ist-frei) {
    display: block; max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  /* Kein nowrap: Seiten, deren Zellen bewusst umbrechen (Ausweisverwaltung),
     behalten das; nur Tabellen, deren Inhalt breiter ist, scrollen quer. */
  .content .data-table-wrap, .content .table-wrap, .content .tabelle-scroll, .content .table-responsive {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .content .data-table-wrap > table, .content .table-wrap > table { display: table; min-width: 100%; }

  /* Medien nie breiter als der Bildschirm */
  .content img, .content video, .content canvas, .content iframe, .content picture { max-width: 100%; }
  .content .card, .content .modul-karte, .content .kpi, .content [class*="karte"] { min-width: 0; }
  .content [style*="min-width"] { min-width: 0 !important; }

  /* Eingaben: 16 px verhindern das Hineinzoomen auf iOS, 44 px sind der Daumen */
  .content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  .content select, .content textarea { font-size: 16px !important; min-height: 44px; max-width: 100%; min-width: 0; }
  /* !important: Seitenregeln und IDs (z. B. #f-lage im Helferportal) setzten 13 px. */
  .content .btn, .content button.btn, .content a.btn,
  .content button:not(.nur-symbol):not(.modal-close):not(.toast-close):not(.tab-btn):not(.fw365-diktat-knopf):not([class*="symbol"]):not([class*="icon"]) { min-height: 44px; }
  .content .btn-sm, .content .btn.klein { min-height: 40px; }

  /* Feste Raster fallen auf eine Spalte, Kennzahlen bleiben zu zweit */
  .content .grid-2, .content .grid-3, .content .grid-4, .content [class*="grid-"]:not(.kpi-row):not(.fakten):not(.bottom-nav-inner),
  .content [style*="grid-template-columns"]:not(.kpi-row) { grid-template-columns: minmax(0, 1fr) !important; }
  .content .kpi-row, .content .kpi-grid, .content .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Zeilen brechen um statt zu quetschen */
  .content .page-header, .content .page-header-actions, .content .page-actions, .content .btn-group,
  .content .form-row, .content .toolbar, .content .filter-bar, .content .filterzeile, .content .actions,
  .content .card-head, .content .karten-kopf, .content .modul-kopfzeile { flex-wrap: wrap; }
  .content .form-row > * { flex: 1 1 100%; min-width: 0; }
  .content .page-header .btn, .content .page-actions .btn { flex: 1 1 auto; }

  /* Lange Wörter (E-Mail, Funkrufnamen, Dateinamen) brechen, statt zu scrollen */
  .content { overflow-wrap: anywhere; }
  .content pre, .content code { white-space: pre-wrap; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .content .kpi-row, .content .kpi-grid, .content .kennzahlen { grid-template-columns: minmax(0, 1fr) !important; }
}