/* GMS Plattform – Handy und Tablet (Sebastian 02.11.2026: „Responsive Musst du in der Plattform einbauen“). Wird nach app.css und bg.css
   geladen und ergänzt sie. Nur Darstellung: keine Farbe ändert ihre Bedeutung, keine Texte. Die Klassen als-karten, ue-leiste-auto,
   im-blatt-auto, menue-knopf und mit-betrag setzt js/responsiv.js. */

/* 1. Datentabellen als Karten -------------------------------------------------------------------------------------------------------
   Am Handy immer, auf Tablets/im Querformat/in schmalen Fenstern nur, wenn die Tabelle nicht in ihren Rahmen passt. Je Zeile eine Karte,
   vor jedem Wert der Spaltenname. Bearbeitbare Raster bekommen die Klasse nie, sie scrollen in ihrem eigenen Rahmen. */
:root .tabelle-huelle.als-karten { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.tabelle.als-karten, .tabelle.als-karten > tfoot { display: block; width: 100%; }
.tabelle.als-karten > thead { display: none; }
/* Karten untereinander, auf Tablets zwei oder mehr nebeneinander */
.tabelle.als-karten > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; margin-bottom: 10px; }
.tabelle.als-karten > tbody > tr, .tabelle.als-karten > tfoot > tr {
  display: flex; flex-direction: column; position: relative; min-width: 0; background: var(--hg-2); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 8px 14px 10px;
}
:root:not([data-glas="aus"]) .tabelle.als-karten > tbody > tr { box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.8), var(--lg-schatten); }
.tabelle.als-karten > tfoot > tr, :root:not([data-glas="aus"]) .tabelle.als-karten > tfoot > tr { background: var(--hg-3); box-shadow: none; }
.tabelle.als-karten > tbody > tr > td, .tabelle.als-karten > tfoot > tr > td {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; padding: 5px 0; border: 0; background: none;
  text-align: left; white-space: normal; overflow-wrap: anywhere;
}
.tabelle.als-karten > tbody > tr > td:empty, .tabelle.als-karten > tfoot > tr > td:empty { display: none; }
.tabelle.als-karten > tbody > tr > td[data-titel]::before, .tabelle.als-karten > tfoot > tr > td[data-titel]::before {
  content: attr(data-titel) ":"; flex: none; color: var(--text-2); font-size: 12.5px; font-weight: 500;
}
.tabelle.als-karten > tbody > tr > td > *, .tabelle.als-karten > tfoot > tr > td > * { min-width: 0; max-width: 100%; }
/* Lange Texte, Pillen und Codes brechen um statt die Karte zu verbreitern */
.tabelle.als-karten .pille { white-space: normal; max-width: 100%; }
.tabelle.als-karten td .unter { white-space: normal; max-width: none; overflow: visible; }
.tabelle.als-karten .ha, .tabelle.als-karten .einzeilig { white-space: normal; }
/* Knöpfe gut tippbar, in der Knopfzeile (Spalte ohne Namen) unten in der Karte, nebeneinander oder untereinander */
.tabelle.als-karten .knopf { min-height: 44px; }
.tabelle.als-karten > tbody > tr > td:not([data-titel]):has(.knopf) { margin-top: auto; padding-top: 10px; border-top: 0.5px solid var(--linie); }
.tabelle.als-karten > tbody > tr > td > .knopf, .tabelle.als-karten > tbody > tr > td > .zeile-flex > .knopf { flex: 1 1 auto; max-width: 340px; }
.tabelle.als-karten > tbody > tr > td > .zeile-flex:has(> .knopf) { flex: 1 1 100%; gap: 8px; }
.tabelle.als-karten input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0; accent-color: var(--akzent); }
/* Gewählte Zeile: Rahmen um die Karte statt Farbe je Zelle */
.tabelle.als-karten > tbody > tr.gewaehlt, :root:not([data-glas="aus"]) .tabelle.als-karten > tbody > tr.gewaehlt {
  box-shadow: inset 0 0 0 2px var(--akzent), var(--schatten);
}
.tabelle.als-karten > tbody > tr.gewaehlt > td, .tabelle.als-karten > tbody > tr.klickbar:hover > td { background: none; }
.tabelle.als-karten td.zahl { text-align: left; }

/* 2. Übersichten links als Blatt (Knopf darüber, js/responsiv.js) -------------------------------------------------------------------- */
.uebersichten.im-blatt-auto { position: static; max-height: none; overflow: visible; padding-bottom: 4px; }
.ue-leiste-auto .ue-wahl-knopf { flex: 1 1 auto; justify-content: flex-start; }
.ue-leiste-auto .ue-wahl-knopf > svg:last-child { margin-left: auto; }

/* 3. Kopfleiste: „Menü“ nur auf Tablet-Breite (Seitenleiste zeigt dort nur Symbole; am Handy gibt es „Mehr“ unten) -------------- */
.kopfleiste .menue-knopf { display: none; }
@media (min-width: 761px) and (max-width: 980px) {
  .kopfleiste .menue-knopf { display: inline-flex; }
}

/* 4. Breite 981–1100 px (Tablet quer, kleine Laptops): Liste und Detail nebeneinander ohne seitliches Scrollen der Seite --------- */
@media (min-width: 981px) and (max-width: 1100px) {
  .arbeitsflaeche.mit-detail:not(.ohne-uebersicht) { grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.45fr); }
  .arbeitsflaeche.ohne-uebersicht.mit-detail { grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.35fr); }
}

/* 5. Handy --------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .inhalt { overflow-x: clip; }                                  /* die Seite selbst scrollt nie seitlich */
  /* Tippflächen mindestens 40 px */
  .knopf.klein, .segmente button, .chip, .feld.klein { min-height: 40px; }
  .listen-kopf .aktionen { margin-left: 0; width: 100%; }
  /* Hinweise mit Knopf: der Knopf rutscht unter den Text statt ihn schmal zu drücken */
  .hinweis { flex-wrap: wrap; }
  .hinweis > :nth-child(2) { flex: 1 1 200px; min-width: 0; }
  .hinweis > :nth-child(n+3) { margin-left: 28px; }
  /* Kacheln mit Beträgen untereinander (ausgang: geld-kacheln; Start: mit-betrag) */
  .kennzahlen.geld-kacheln, .kennzahlen.mit-betrag { grid-template-columns: minmax(0, 1fr); }
  .kachel .kz { overflow-wrap: anywhere; }
  /* Säulendiagramm passt in die Breite */
  .balken-diagramm { gap: 4px; grid-auto-columns: minmax(0, 1fr); }
  .balken-saeulen { gap: 2px; }
  .balken { width: auto; flex: 0 1 11px; min-width: 3px; }
  .balken-gruppe .beschriftung { font-size: 10px; }
  /* Blätter: Knöpfe unten nebeneinander bzw. untereinander in voller Breite */
  .blatt-fuss > .knopf { flex: 1 1 auto; }
  /* Mitteilungen: Filter größer, Textknöpfe ohne Umbruch im Wort */
  .mz-leiste { flex-wrap: wrap; row-gap: 8px; }
  .mz-filter { min-height: 36px; padding: 6px 13px; font-size: 14px; }
  .mz-bereich, .mz-ordnen { min-height: 36px; padding: 6px 12px; font-size: 14px; }   /* Bereiche: seitlich wischen */
  .mz-bereiche { margin: 0 -4px; padding-left: 8px; padding-right: 8px; }
  .mz-textknopf { min-height: 36px; white-space: nowrap; font-size: 14px; }
  .anhang, .anhang-knopf, .anhang-name { max-width: 100%; }
}
@media (hover: none) {
  .mz-weg { width: 26px; height: 26px; }
}

/* 6. Eingabefelder auf Touch-Geräten mindestens 16 px, sonst vergrößert iOS beim Antippen die Seite ------------------------------ */
@media (max-width: 760px), (pointer: coarse) {
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"])),
  :where(select), :where(textarea) { font-size: 16px !important; }
  .assistent-eingabe { font-size: 17px !important; }
}