/* =============================================================================
   responsiv.css — Responsivitäts-Review (16.10.2026)

   Kundenauftrag: „Jede Seite, jede Unterseite muss perfekt auf Desktop, Notebook,
   Tablet und Handy sein." Gemessen wurde automatisiert über alle Routen bei 1920,
   1440, 1366, 1280, 1024, 768, 430, 390 und 360 px (horizontales Scrollen, Elemente
   außerhalb des Viewports, abgeschnittene Texte, Touch-Ziele < 40 px, Lücken unter
   klebenden Leisten, Tabellen ohne mobile Darstellung, Dialoge größer als der Schirm).

   Diese Datei liegt als LETZTES Stylesheet im Layout (und in den Seiten ohne Layout:
   Anmeldung, Rechtliches, Einrichtung). Sie korrigiert die Befunde über die gemeinsamen
   Bausteine — Kopfzeile, Knöpfe, Chips, Tabellen, Formularfelder, Dialoge, Kalender —
   statt über Einzelfall-Regeln je Seite. Werte im 8-px-Raster, Tokens aus app.css.

   Telefon-Grenze: 743.98 px (wie die Akte und die Bereichsleiste in app.css).
   Touch-Ziel: 40 × 40 px (Kundenvorgabe; WCAG 2.5.8 verlangt nur 24 px).

   Runde 2 (nach dem Zusammenführen mit akte-vorschau und aenderungsprotokoll): Fallakte
   mit Aktenkopf, Reiterleiste und Dokumentvorschau sowie das Änderungsprotokoll sind
   ebenfalls geprüft und hier mit abgedeckt.
   ========================================================================== */

:root{--ziel:40px}

/* ---- 1) Bereichsleiste: lange Einträge brechen um statt abgeschnitten zu werden ----
   „Leistungserfassung · §45b" mit „bald"-Marke verlor auf jeder Breite das „§45b".
   Nur in der ausgeklappten Leiste — eingeklappt ist die Beschriftung ohnehin unsichtbar
   und darf beim Ein-/Ausklappen nicht kurz mehrzeilig springen. */
html:not(.nav-schmal) .nav-item .nav-lab{white-space:normal;line-height:1.25;overflow-wrap:anywhere}

/* ---- 2) Tabellen auf Desktop, Notebook und Tablet -----------------------------------
   Ab 721 px bleiben .stapel-Tabellen Tabellen und scrollten bisher seitlich in ihrer
   Karte, sobald die Spaltenköpfe (nowrap) oder ein langes Wort ohne Trennstelle
   (Vorlagen-Code) mehr Breite verlangten, als da war — bei den Briefvorlagen schon auf
   1440 px. Kopfzeilen dürfen umbrechen, lange Wörter auch; Codes (Monospace) brechen
   notfalls mitten im Wort. Solange alles passt, ändert sich nichts. */
@media (min-width:721px){
  :is(.table-card,.card,.vb-tab-scroll) > table.tbl td{overflow-wrap:break-word;hyphens:auto}
  :is(.table-card,.card,.vb-tab-scroll) > table.tbl td :is(.mono,code),
  :is(.table-card,.card,.vb-tab-scroll) > table.tbl td.mono{overflow-wrap:anywhere}
  :is(.table-card,.card,.vb-tab-scroll) > table.tbl th{white-space:normal;overflow-wrap:break-word;hyphens:auto}
  /* Ab sieben Spalten reicht das nicht immer (Briefvorlagen: „Behörden-/Sozialleistungs-
     angelegenheiten" auf 1440 px) — dort dürfen alle Zellen notfalls im Wort umbrechen. */
  :is(.table-card,.card) > table.tbl:has(> thead > tr > th:nth-child(7)) td{overflow-wrap:anywhere}
}
/* Aktionsspalte: Knöpfe dürfen untereinander rutschen, statt die Tabelle zu verbreitern. */
.table-card table.tbl td .row-actions,
.card > table.tbl td .row-actions{flex-wrap:wrap}

/* Breite Verwaltungstabellen (ab 7 Spalten) werden auf dem Tablet zu Karten — zwei
   nebeneinander. Mit sieben, acht Spalten blieben auf 696 px Inhaltsbreite für Name und
   Code nur je 65 px; die Tabelle musste seitlich gewischt werden. Schmalere Tabellen mit
   breiter Aktionsspalte (Rollen, Papierkorb) tragen dafür die Klasse .stapel-tablet. Die großen Listen
   (.lst-tbl: Klienten, Fälle, Fristen …) haben eigene Spaltenregeln und passen. Die
   Beschriftungen kommen aus data-label (responsiv.js ergänzt fehlende aus dem Kopf). */
@media (min-width:721px) and (max-width:1100px){
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))){display:block;width:100%;min-width:0}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr{display:flex;flex-direction:column;min-width:0;
    border:1px solid var(--line-2);border-radius:12px;background:var(--paper);padding:4px 2px;box-shadow:var(--shadow-s)}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr:hover{background:var(--paper)}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td{
    order:1;display:flex;align-items:baseline;justify-content:space-between;gap:14px;min-width:0;width:auto;
    padding:8px 12px;border-bottom:1px solid var(--line-2);text-align:right;font-size:13px;overflow-wrap:anywhere;
    position:static!important;box-shadow:none!important;background:transparent!important;white-space:normal}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td:last-child{border-bottom:0}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td::before{
    content:attr(data-label);flex:0 0 auto;max-width:45%;text-align:left;
    font-family:var(--display);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td:not([data-label])::before,
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td[data-label=""]::before{content:none}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td.zeile-kopf{
    order:0;display:block;text-align:left;font-size:15px;font-weight:600;color:var(--ink-900);padding:11px 12px 8px;line-height:1.3}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td.zeile-kopf::before{content:none}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td.zeile-kopf :is(small,.muted,.c-muted,.fs-12,.field-hint){font-weight:400}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td.zeile-aktion{
    order:2;flex-wrap:wrap;justify-content:flex-start;gap:8px;text-align:left;padding:10px 12px 12px}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td.zeile-aktion::before{content:none}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td.zeile-aktion:empty,
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td.leer{display:none}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr > td[colspan]{grid-column:1 / -1;display:block;text-align:left}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) > tbody > tr:has(> td[colspan]){grid-column:1 / -1}
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) .nm{white-space:normal}
  /* Zeilenmenü (⋯) steht in der Karte links: das Menü öffnet nach rechts statt aus dem Bild. */
  table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7))) td.zeile-aktion details.menu .menu-pop{left:0;right:auto}
  :is(.table-card,.card):has(> table.tbl.stapel:not(.lst-tbl):is(.stapel-tablet,:has(> thead > tr > th:nth-child(7)))){
    overflow:visible!important;border:none;background:transparent;box-shadow:none;padding:0}
}

/* Rechte-Matrix (Rollen): Spaltenköpfe umbrechen, schmalere erste Spalte — passt auf
   Tablet; auf dem Telefon wird jede Zeile zur Karte (Abschnitt „Tabellen → Karten"). */
@media (min-width:1101px){table.matrix th.matrix-rolle{white-space:nowrap}}
@media (max-width:1100px){
  table.matrix th{padding:10px 6px;hyphens:auto;overflow-wrap:break-word}
  table.matrix th.minw-220{min-width:150px!important}
  table.matrix td{padding:9px 6px;overflow-wrap:anywhere}
  table.matrix td:first-child{min-width:150px}
}

/* Große Listen (Fälle, Klienten …), seitlich scrollend: Der klebende Tabellenkopf lag in
   der Aktionsspalte UNTER den Zellen (beide z-index 1 durch die rechts klebende Spalte) —
   beim Scrollen liefen die Knöpfe „Fallakte öffnen" über den Kopf. */
@media (min-width:721px){
  .ist-breit > .lst-tbl thead th:last-child{z-index:4}
}

/* Abrechnung: Quartalsraster je Fall (sechs Spalten) passt auf dem Tablet ohne Wischen. */
@media (min-width:721px) and (max-width:1100px){
  .fz-grid .fz-g-fall{min-width:140px}
  .fz-grid .fz-g-zelle{min-width:92px}
  .fz-grid th,.fz-grid td{padding:8px 4px}
  .fz-grid thead th{white-space:normal}
  .fz-grid .fz-zelle{padding:6px 4px}
  .fz-grid .fz-zelle-sub{white-space:normal;text-align:center}
}

/* ---- 3) Kleinere Korrekturen, alle Breiten ----------------------------------------- */
/* Fallakte, Kommunikation: „Als E-Mail senden" war als volle Breite plus 8 px Rand
   (inline) breiter als seine Zeile und wurde rechts abgeschnitten. */
details.disclosure.inline-send>summary.btn{width:auto;display:inline-flex}
/* Rolle „gesperrt": der runde 16-px-Hilfepunkt trug ein ganzes Wort. */
.chip-role .help{width:auto;min-width:16px;padding:0 8px;border-radius:999px;font-size:10.5px}
/* Fallaufnahme: die klebende Seitenspalte lief unter die 60 px hohe Kopfzeile. */
.intake-side{top:76px}
/* Wochenansicht: in kurzen Terminen wurde die Uhrzeit auf 9 px gestaucht — der Titel
   (mit Zeilenbegrenzung) gibt nach, die Uhrzeit bleibt lesbar. */
.kal-block .kal-ev-zeit{flex-shrink:0}
.kal-block .kal-ev-titel{min-height:0;flex-shrink:1}
/* Lange zusammengesetzte Wörter in Überschriften („Schweigepflichtentbindungen") brechen
   um statt aus der Karte zu ragen; als Flex-Kind mit min-width:0. */
:is(h1,h2,h3,h4){overflow-wrap:break-word;hyphens:auto}
:is(.karte-kopf,.section-h,.card-h) > :is(h2,h3,h4){min-width:0}

/* =====================================================================
   TELEFON (≤ 743.98 px)
   ---------------------------------------------------------------------
   Mindestgrößen für Bedienelemente mit !important: viele Bausteine setzen eine feste
   Höhe (height:34px) oder Breite mit höherer Spezifität. min-height/min-width schlagen
   height/width ohnehin; !important sorgt dafür, dass die Touch-Untergrenze nicht von
   einer spezifischeren Regel wieder unterschritten wird.
   ===================================================================== */
@media (max-width:743.98px){

  :is(h1,h2,h3,h4){overflow-wrap:anywhere}

  /* ---- 4) Kopfzeile ------------------------------------------------------------ */
  .topbar .menu-btn,
  .topbar .cp-suche-btn,
  .topbar-ctx a.cp-mail,
  .topbar-ctx .cp-bell>summary,
  .topbar-ctx details.menu>summary{width:var(--ziel);height:var(--ziel);min-width:var(--ziel);min-height:var(--ziel)}

  /* ---- 5) Knöpfe, Chips, Reiter, Felder ----------------------------------------- */
  :is(.btn,summary.btn,.karte-knopf,.lz-aktion){min-height:var(--ziel)!important}
  .btn{min-width:var(--ziel)!important;max-width:100%;white-space:normal}
  :is(.chip,.adm-chip,.adm-sub-item,.ra-chip,.pk-chip,.lst-chip,.fz-seg-btn,.kal-vbtn,.db-eintrag,
      .kal-tw-tag,.kal-tagkopf,.kal-kal,.kal-tagwahl span,.mx-cmd,.mx-nav-link,.mx-menu-item){min-height:var(--ziel)!important}
  .ra-chip,.lst-chip{height:auto!important}
  .kal-vbtn{min-width:var(--ziel)}
  :is(.lst-dichte-btn,.lst-exp,.kal-mtag,.kal-iconbtn,.rec-del,
      .callout .callout-close,.abw-dialog-zu,.adm-panel-zu,.bx-x,.cp-toast-x,.dict-fab,
      details.menu>summary){min-width:var(--ziel)!important;min-height:var(--ziel)!important}
  .callout .callout-close{margin:-8px -10px -8px auto}
  /* Anmeldung: „Zeigen" im Passwortfeld */
  .ig .ig__act{min-width:var(--ziel);min-height:var(--ziel);display:inline-flex;align-items:center;justify-content:center}
  .adm-panel-zu{flex-basis:var(--ziel)!important}
  /* Eingabefelder: mindestens 40 px hoch (Suchfelder, Seitengröße, Dialogfelder) */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]),
  select,textarea{min-height:var(--ziel)!important}
  /* Kontrollkästchen und Optionsfelder: die Beschriftung ist das Ziel — 40 px hoch */
  label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:var(--ziel)!important;display:flex;align-items:center;gap:10px}
  label.pk-sel-ziel{min-width:var(--ziel);justify-content:center}
  /* Fallakte: Gerichtskontakt-Links und Dokument-Chips in den Karten (öffnen die Vorschau) */
  .gk-zeile a:not(.btn),.bereich-doc>a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ziel);min-width:var(--ziel)}
  /* Fallakte, Reiter „Dokumente": Bereichszuordnung je Dokument */
  .doc-bereich>summary{min-height:var(--ziel)}
  /* Fallakte, Reiter „Person": lange Beschriftungen in Schlüssel-Wert-Zeilen */
  .kvrow>*{overflow-wrap:anywhere}
  /* Aufklapp-Zeilen ohne Knopfoptik */
  details:is(.fz-tabelle-ansicht,.fz-pdf,.upload-angaben,.cpd-mehr,.ma-diag)>summary{min-height:var(--ziel);display:flex;align-items:center;gap:8px}

  /* Filter-Chips der großen Listen: der Streifen lief 4 px über den rechten Rand hinaus
     (negativer Rand 16 px bei 12 px Seitenabstand) — er endet jetzt am Inhaltsrand. */
  .lst .filter-chips{margin-right:0;padding-right:0}

  /* ---- Alleinstehende Textlinks (kein Fließtext): 40 px hohe Zeile ------------ */
  .akte-pfad a,a.pill,
  .content > footer a,
  .lst-reset,.cpd-krit-alle,.kal-link,.forgot,a.spacer,.flash a,.legal a.back,
  .login-foot a,.login-row a{display:inline-flex;align-items:center;min-height:var(--ziel)}
  .kal-link{min-width:var(--ziel);justify-content:center}
  /* Links in Tabellenzellen (als Karten gestapelt): Zeile mindestens 40 px */
  table td a:not(.btn):not(.pill):not(.chip),
  table th a:not(.btn):not(.pill):not(.chip){display:inline-flex;align-items:center;min-height:var(--ziel);min-width:var(--ziel)}
  table td a.lst-main,table td a.lst-sub{display:flex}
  table td a:is(.lst-main,.lst-sub){min-width:0;white-space:normal;overflow-wrap:anywhere}
  /* Aufgabenliste im Cockpit */
  .cpd-todo-t{display:inline-flex;align-items:center;min-height:var(--ziel)}

  /* Kleine Symbol-Knöpfe: Pill-„×" behält seine Größe, die Trefferfläche wächst über ein
     unsichtbares Pseudo-Element. Das ⓘ an Fristdaten wird ein 40-px-Knopf (die Zeile
     darf dafür umbrechen; vertikal nimmt er keinen Platz ein). */
  .pill-x{position:relative}
  .pill-x::after{content:"";position:absolute;left:50%;top:50%;width:var(--ziel);height:var(--ziel);transform:translate(-50%,-50%)}
  .fk-info{display:inline-flex;align-items:center;justify-content:center;width:var(--ziel);height:var(--ziel);margin:-12px 0;vertical-align:middle}

  /* ---- Kalender ----------------------------------------------------------------- */
  /* Woche/Arbeitswoche: sieben Spalten à 40 px ließen Termine 20 px schmal werden.
     Die Tagesspalten behalten 100 px und das Raster scrollt seitlich (wie Outlook mobil);
     Uhrzeiten und Beschriftungen bleiben dabei links stehen. */
  .kal-woche:not(.kal-woche-tag) .kal-scroll{overflow-x:auto}
  .kal-woche:not(.kal-woche-tag) .kal-wkopf,
  .kal-woche:not(.kal-woche-tag) .kal-raster,
  .kal-woche:not(.kal-woche-tag) .kal-ganztag{min-width:calc(var(--kal-gutter) + var(--tage) * 100px)}
  .kal-woche:not(.kal-woche-tag) .kal-zeiten,
  .kal-woche:not(.kal-woche-tag) .kal-wkopf-kw,
  .kal-woche:not(.kal-woche-tag) .kal-ganztag-label{position:sticky;left:0;z-index:3;background:var(--paper)}
  /* Werkzeugleiste: als Spalte mit flex-wrap:wrap war die Zeilenbreite die breiteste
     Wunschbreite (Ansichtsumschaltung + Aktualisieren = 353 px) — auf 360 px ragte die
     Leiste aus der Karte und der Inhaltsbereich ließ sich seitlich schieben. Einzeilig
     gestreckt scrollt die Umschaltung in sich. */
  .kal-bar{flex-wrap:nowrap}
  .kal-bar,.kal-bar-rechts,.kal-views{min-width:0}
  .kal-ganztag-label{padding:6px 2px;overflow-wrap:anywhere}
  .kal-lzeile{grid-template-columns:64px 4px minmax(0,1fr) 16px}
  :is(.kal-tw-abw,.kal-tw-zelle .kal-ev,.kal-tz-spur .kal-ev,.kal-block){min-height:var(--ziel)!important}

  /* ---- Tabellen → Karten ---------------------------------------------------- */
  /* Pauschaltabelle § 9 VBVG (fünf Spalten, Beträge): bewusst eine Tabelle — sie wird
     Zeile × Spalte gelesen (Betreuungsmonat × Wohnform/Vermögen); als Karten ginge der
     Vergleich verloren. Enger gesetzt passt sie ohne Wischen auf 360 px. */
  .fz-t9{font-size:11px}
  .fz-t9 th,.fz-t9 td{padding:6px 2px}
  .fz-t9 thead th{font-size:10px}
  .fz-t9 thead th small{display:block}
  .fz-t9 tbody th{white-space:normal}
  /* Rechte-Matrix: jede Zeile (ein Recht) wird eine Karte, die Rollen stehen als
     beschriftete Kacheln darin. Die Beschriftungen setzt responsiv.js aus dem Kopf. */
  table.matrix.stapel,table.matrix.stapel tbody,table.matrix.stapel tr,table.matrix.stapel td{display:block;width:auto;min-width:0}
  table.matrix.stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.matrix.stapel tr{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line-2)}
  table.matrix.stapel tr.mod-row{padding:14px 12px 6px;border-bottom:0}
  table.matrix.stapel td{border:0;padding:0}
  table.matrix.stapel tr:not(.mod-row) td:first-child{flex:1 0 100%;margin-bottom:2px;min-width:0}
  table.matrix.stapel tr:not(.mod-row) td:not(:first-child){display:inline-flex;align-items:center;gap:6px;
    padding:4px 8px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;background:var(--paper-2)}
  table.matrix.stapel tr:not(.mod-row) td:not(:first-child)::before{content:attr(data-label);color:var(--ink-soft);font-weight:600}
  .card:has(> table.matrix.stapel){padding:4px 0}

  /* Rechtliche Seiten (Datenschutz): Tabellen untereinander statt seitlich wischen. */
  .legal .tbl-wrap{overflow:visible}
  .legal table,.legal tbody,.legal tr,.legal td{display:block;width:auto}
  .legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .legal tr{border:1px solid var(--line);border-radius:10px;margin-top:10px;overflow:hidden}
  .legal th,.legal td{border:0}
  .legal td{border-top:1px solid var(--line-2);padding:8px 12px;overflow-wrap:anywhere}
  .legal td:first-child{border-top:0;font-weight:600;color:var(--ink-900)}
  .legal td[data-label]::before{content:attr(data-label);display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:2px}
  .legal td:first-child::before{content:none}
}