@font-face { font-family:"Poppins"; font-weight:400; font-display:swap; src:url("/static/fonts/Poppins-Regular.ttf") format("truetype"); }
  @font-face { font-family:"Poppins"; font-weight:500; font-display:swap; src:url("/static/fonts/Poppins-Medium.ttf") format("truetype"); }
  @font-face { font-family:"Poppins"; font-weight:600; font-display:swap; src:url("/static/fonts/Poppins-SemiBold.ttf") format("truetype"); }
  :root { --bd:#E4E3DA; --mut:#8C9389; --bg:#FAFAF8; --text:#2B2B2B; --accent:#77A473; --accent-dark:#4E7A4A; --accent-tint:#EAF1E6; --ok:#16a34a; --warn:#b45309; accent-color:#4E7A4A; }
  * { box-sizing: border-box; }
  input:focus, select:focus, textarea:focus, button:focus-visible { outline-color:var(--accent-dark); }
  body { margin:0; font:14px/1.45 "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--text); background:var(--bg); }
  /* Kein Umbruch im Kopf (Erik): passt die Titel-/Buttonzeile nicht in eine Zeile, schrumpft
     erst der Titel (Ellipsis, s.u.) und über die vorhandenen Breakpoints die Button-Labels –
     nie bricht die Zeile um. */
  header { display:flex; align-items:center; gap:16px; padding:12px 20px; background:#fff; border-bottom:0; position:sticky; top:0; z-index:5; flex-wrap:nowrap; }
  header > * { flex-shrink:0; }
  header h1 { font-size:17px; margin:0; font-weight:600; min-width:0; flex-shrink:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #headerIcon { width:28px; height:28px; border-radius:7px; flex:0 0 28px; }
  .grow { flex:1; }
  button { font:inherit; border:1px solid var(--bd); background:#fff; padding:7px 12px; border-radius:8px; cursor:pointer; }
  button:hover { background:#f0f2f5; }
  button:disabled { opacity:.4; cursor:not-allowed; }
  button:disabled:hover { background:#fff; }
  button.primary { background:var(--accent); color:var(--text); border-color:var(--accent); font-weight:500; }
  button.primary:hover { filter:brightness(.94); }
  .iconbtn.danger-ghost { background:none; border-color:transparent; color:#dc2626; }
  .iconbtn.danger-ghost:hover { background:#fdecec; }
  .iconbtn.settings-ghost { background:none; border-color:transparent; color:var(--text); }
  .iconbtn.settings-ghost:hover { background:#f0f2f5; }
  button.ok { background:var(--ok); color:#fff; border-color:var(--ok); }
  button.warn { background:var(--warn); color:#fff; border-color:var(--warn); }
  button.danger { background:#dc2626; color:#fff; border-color:#dc2626; }
  button.mini { font-size:12px; padding:3px 8px; border-radius:6px; }
  .mini.mini-icon { display:inline-flex; align-items:center; gap:6px; }
  .mini.mini-icon svg { width:14px; height:14px; flex:0 0 14px; }
  .iconbtn { font-size:15px; line-height:1; padding:0; width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center; border-radius:999px; transition:background .15s; }
  summary.iconbtn { list-style:none; }
  summary.iconbtn::-webkit-details-marker { display:none; }
  .iconbtn svg { width:18px; height:18px; }
  .field-error { border-color:#dc2626 !important; background:#fef2f2 !important; }
  #dropZone { position:fixed; inset:0; z-index:60; background:rgba(78,122,74,.10); border:3px dashed var(--accent-dark); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:24px; font-weight:600; color:var(--accent-dark); pointer-events:none; }
  .tbadge { display:inline-block; min-width:14px; padding:0 3px; margin-left:7px; border-radius:7px; background:#dc2626; color:#fff; font-size:9px; font-weight:600; line-height:14px; text-align:center; vertical-align:middle; box-shadow:0 0 0 2px #fff; }
  .iban-warn, .fx-warn { background:#fff7ed !important; border-color:#fdba74 !important; }
  .monthpicker { background:#fff; border:1px solid var(--bd); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:8px; width:220px; }
  .mp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .mp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
  .mp-grid button { padding:6px 0; }
  .mp-sel { background:var(--accent-dark); color:#fff; border-color:var(--accent-dark); }
  .fx-ende-btn { width:100%; text-align:left; white-space:nowrap; }
  /* Liquiditäts-Kalender – Kartenraster statt dichtem Formularnetz: jeder Tag
     eine eigene abgerundete Karte mit Luft dazwischen (border-spacing statt
     collapse), Zustände über Füllung/Rahmen der App-Palette statt fremdem Blau
     (vorher #eff5ff/#e0ecff – passte zu nichts sonst im Grün-Theme). Hover
     "hebt" die Karte genau wie die Dashboard-Kacheln (.dcard:hover) – dieselbe
     Interaktionssprache, nicht neu erfunden. */
  .liqcal { width:100%; border-collapse:separate; border-spacing:6px; table-layout:fixed; background:transparent; }
  .liqcal th { background:var(--bg); padding:8px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--mut); font-weight:600; border:0; border-radius:8px; }
  .liqcal th.lq-weekend { background:color-mix(in srgb, var(--accent) 8%, var(--bg)); }
  .liqcal td { border:1px solid var(--bd); border-radius:10px; vertical-align:top; min-height:72px; padding:8px 10px; background:#fff; transition:box-shadow .15s, border-color .15s, transform .15s; }
  .liqcal td:empty { border-color:transparent; background:transparent; }
  .liqcal td.lq-weekend:not(:empty) { background:color-mix(in srgb, var(--accent) 3%, #fff); }
  .liqcal .daynum { font-size:11px; color:var(--mut); font-variant-numeric:tabular-nums; }
  .liqcal .today .daynum { color:var(--accent-dark); font-weight:700; }
  .liqcal .past { background:#fafafa; }
  .liqcal .past .daynum, .liqcal .past .lq-saldo { color:var(--mut); }
  .liqcal .today { border-color:var(--accent-dark); background:color-mix(in srgb, var(--accent) 6%, #fff); }
  .liqcal .lq-out { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--warn); margin-top:6px; padding:2px 7px; border-radius:999px; background:#fff7ed; border:1px solid #fed7aa; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .liqcal .lq-in { color:var(--ok); font-weight:600; }
  .liqcal .lq-saldo { font-weight:600; font-size:13.5px; font-variant-numeric:tabular-nums; }
  .liqcal .lq-neg { color:#dc2626; }
  .liqcal .lq-top { display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
  .liqcal td.has-ev { cursor:pointer; }
  .liqcal td.has-ev:hover { border-color:#c9cec4; box-shadow:0 4px 16px rgba(20,30,15,.08); transform:translateY(-1px); }
  .liqcal td.sel-day { background:var(--accent-tint); border-color:var(--accent); box-shadow:none; transform:none; }
  .lq-in-txt { color:var(--ok); font-weight:600; }
  /* Zwischenschritt vor dem Smartphone-Layout (560px, s.u.): Schrift/Abstände
     schrumpfen zuerst graduell, bevor die Posten-Zeile ganz wegfällt. */
  @media (max-width: 700px) {
    .liqcal { border-spacing:4px; }
    .liqcal td { min-height:60px; padding:6px 8px; }
    .liqcal th { font-size:10px; padding:6px 2px; }
    .liqcal .daynum { font-size:10px; }
    .liqcal .lq-saldo { font-size:12px; }
    .liqcal .lq-out { font-size:9.5px; padding:1px 5px; }
    #liqDayDetail { padding:12px 14px; }
  }
  tr.ford-off > td { opacity:.45; }
  #fordRows.selmode tr { cursor:pointer; }
  #fordRows.selmode tr:hover > td { background:#f5f8ff; }
  #fixRows.selmode tr { cursor:pointer; }
  #fixRows.selmode tr:hover > td { background:#f5f8ff; }
  #liqSummary .sp-big { font-size:18px; line-height:1.15; margin:1px 0; }
  #liqSummary .muted { font-size:12px; }
  #liqKontoRow label { font-size:13px; }
  /* Kontoabgleich-Vorschlagskarten: Text + zwei Aktionsknöpfe in einer Zeile,
     auf schmalen Screens knöpfe in eine eigene Zeile (statt an langem
     Verwendungszweck-Text zusammengequetscht zu werden). */
  /* Kontoabgleich-Tabelle: eine echte Tabelle wie Rechnungen/Forderungen (keine
     Kartenumwandlung), aber zwei Zellen brauchen Zeilenumbruch statt des
     Tabellen-Standards white-space:nowrap – Gegenkonto/Verwendungszweck kürzen
     sich stattdessen per Ellipsis (.cell-ellip, wie die Lieferanten-Spalte),
     die Begründung darf umbrechen, sonst würde sie die Zeile beliebig breit ziehen. */
  #kontoabgleichRows td { vertical-align:top; }
  /* Match-Begründung: eigener Hinweiskasten statt grauem Fließtext, damit der
     einzige Grund fürs Nicht-automatisch-Verbuchen nicht übersehen wird.
     Enthält der Text ein "⚠" (IBAN-Abweichung, mehrdeutiger Treffer), wechselt
     er auf die Warnfarbe (dieselbe Sprache wie .iban-warn/.fx-warn). */
  .ka-reason { display:flex; align-items:flex-start; gap:6px; padding:5px 9px; border-radius:8px; font-size:12px; color:var(--mut); background:#f1f5f9; white-space:normal; max-width:260px; }
  .ka-reason svg { flex:0 0 14px; width:14px; height:14px; margin-top:1px; }
  .ka-reason-warn { background:#fff7ed; border:1px solid #fdba74; color:#9a5b12; }
  .mini.ka-ok { background:#dcfce7; border-color:#86efac; color:#166534; }
  .mini.ka-ok:hover { background:#bbf7d0; }
  .mini.ka-no { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }
  .mini.ka-no:hover { background:#fecaca; }
  /* Tagesdetail als eigene Karte statt nur einer oberen Trennlinie – dieselbe
     Sprache wie die Tageskacheln darüber (Rahmen, Radius, weicher Schatten). */
  #liqDayDetail { margin-top:16px; background:#fff; border:1px solid var(--bd); border-radius:14px;
    padding:16px 20px; box-shadow:0 4px 16px rgba(20,30,15,.06); overflow-x:auto; }
  #liqDayDetail table { width:auto; min-width:460px; border:0; border-radius:0; background:transparent; }
  #liqDayDetail thead th { background:transparent; border-bottom:1px solid var(--bd); }
  #liqDayDetail th, #liqDayDetail td { padding:7px 14px; }
  #liqDayDetail tr.liq-paid td { color:var(--mut); text-decoration:line-through; }
  #liqDayDetail tr.liq-paid td:last-child { text-decoration:none; }
  #liqDayDetail .lq-sep { color:var(--mut); }
  .mini.liq-pay.ok { background:#dcfce7; border-color:#86efac; color:#166534; }
  .field-error:focus { outline:2px solid #fca5a5; }
  /* Zwei Kopfzeilen verschmolzen zu einem Block: header (oben) sitzt sticky an top:0,
     nav direkt darunter sticky an top:--header-h – kein Spalt, gemeinsamer weißer
     Hintergrund, EINE Trennlinie unten an der Reiterzeile statt zwei Rahmen. */
  nav[aria-label="Bereiche"] { position:sticky; top:var(--header-h, 53px); z-index:4; background:#fff; }
  .tabs { display:flex; align-items:center; gap:8px; padding:0 20px; border-bottom:1px solid var(--bd); flex-wrap:nowrap; overflow:hidden; }
  /* Dashboard / Startseite */
  .dash-stand { padding:14px 20px 0; color:var(--mut); font-size:12px; }
  .dash { padding:10px 20px 16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); grid-auto-rows:1fr; gap:14px; align-items:stretch; }
  .gbadge { background:var(--accent-tint); color:var(--accent-dark); font-weight:600; font-size:12px; padding:2px 8px; border-radius:6px; }
  .dicon { width:26px; height:26px; border-radius:7px; flex:0 0 26px; }
  .dcard { --ca:var(--accent); display:flex; flex-direction:column; background:color-mix(in srgb, var(--ca) 5%, #fff); border:1px solid var(--bd); border-top:3px solid var(--ca); border-radius:14px; padding:14px; transition:box-shadow .15s, border-color .15s, transform .15s; }
  .dcard:hover { border-color:#c9cec4; box-shadow:0 4px 16px rgba(20,30,15,.08); transform:translateY(-1px); }
  .dcard h3 { margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--mut); font-weight:600; }
  .dcard .big { font-size:26px; font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
  .dcard .sub { color:var(--mut); font-size:12px; margin-top:4px; }
  .dcard.click { cursor:pointer; } .dcard.click:hover { border-color:#94a3b8; box-shadow:0 2px 10px rgba(0,0,0,.06); }
  .dcard.alarm .big { color:#c0392b; }
  .dcard.wide { grid-column:1/-1; }
  .dline { display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-top:1px solid var(--bd); font-size:13px; margin-top:4px; }
  .dbar { height:8px; background:#eef1f5; border-radius:4px; overflow:hidden; margin-top:3px; }
  .dbar > i { display:block; height:100%; background:var(--accent); }
  .dbarseg { background:var(--accent); position:relative; cursor:default; }
  .dbarseg:hover { background:var(--accent-dark); }
  .dbarseg:hover::after { content:attr(data-tip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:5px; background:var(--text); color:#fff; font-size:11px; font-weight:500; padding:3px 7px; border-radius:5px; white-space:nowrap; pointer-events:none; z-index:5; }
  .tab { display:flex; align-items:center; gap:7px; padding:10px 14px; cursor:pointer; color:var(--mut); border:0; border-bottom:2px solid transparent; font-weight:500; white-space:nowrap; transition:color .15s, border-color .15s; }
  .tab:hover { color:var(--text); }
  .tab-icon { width:18px; height:18px; flex:0 0 18px; }
  /* Zähler-Badge sitzt auf dem Icon selbst (unten rechts, leicht überlappend)
     statt weit hinten nach dem Textlabel – kürzerer Weg vom Symbol zur Zahl. */
  .tab-icon-wrap { position:relative; display:inline-flex; flex:0 0 auto; }
  .tab-icon-wrap .tbadge { position:absolute; bottom:-5px; right:-6px; margin-left:0; }
  .mini.sub { font-weight:600; }
  .mini.sub.on { background:var(--accent); color:var(--text); border-color:transparent; }
  .tab.active { background:none; color:var(--text); border-bottom-color:var(--accent); font-weight:600; margin-bottom:0; }
  /* "Mehr"-Auslöser: sieht aus wie ein Reiter, ist aber ein details>summary (Stammdaten-Muster). */
  details.ms#tabsMore > summary.tab { border:0; border-bottom:2px solid transparent; border-radius:0; background:none; padding:10px 14px; }
  details.ms#tabsMore[open] > summary.tab { border-color:transparent; background:#eef1ed; }
  #tabsMore .msbox { padding:6px; min-width:200px; }
  /* Reiter, die in die Dropdown wandern: senkrechte Menüzeile statt Unterstrich-Look. */
  #tabsMoreBox .tab { border-bottom:0 !important; border-radius:6px; width:100%; }
  #tabsMoreBox .tab:hover { background:#f0f2f5; }
  #tabsMoreBox .tab.active { background:var(--accent-tint); }
  /* Text bleibt so lange wie möglich stehen (Platz wird ausgenutzt) – erst
     bei echter Enge fällt er weg, danach übernimmt syncNavOverflow() in
     core.js und schiebt einzelne Reiter in "Mehr", falls selbst Icons +
     Zähler nicht mehr passen. So bricht die Zeile nie um. */
  @media (max-width: 700px) {
    .tab-label { display:none; }
    .tab { padding:10px 11px; }
    #tabsMoreBox .tab-label { display:inline; }
  }
  .toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 20px; background:#fff; border-bottom:1px solid var(--bd); }
  input, select, textarea { font:inherit; border:1px solid var(--bd); border-radius:8px; padding:7px 9px; background:#fff; }
  input[type=search]{ min-width:240px; }
  /* Multiselect via <details> */
  details.ms { position:relative; }
  details.ms > summary { list-style:none; cursor:pointer; border:1px solid var(--bd); border-radius:8px; padding:7px 12px; background:#fff; user-select:none; white-space:nowrap; }
  details.ms[open] > summary { border-color:var(--accent-dark); }
  details.ms > summary::-webkit-details-marker { display:none; }
  /* Icon-Trigger (Verwaltung/Einstellungen im Header): kein Kasten, rundes Hover-Feld statt Rahmen. */
  details.ms > summary.iconbtn { border-color:transparent; padding:0; background:none; }
  details.ms[open] > summary.iconbtn { border-color:transparent; background:#eef1ed; }
  .msbox { position:absolute; top:110%; left:0; z-index:20; background:#fff; border:1px solid var(--bd); border-radius:8px; padding:8px; min-width:220px; box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:300px; overflow:auto; }
  .msbox.right { left:auto; right:0; }
  .msbox label { display:flex; align-items:center; gap:8px; padding:5px 6px; margin:0; cursor:pointer; border-radius:6px; }
  .msbox label:hover { background:#f0f2f5; }
  .msbox button { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:none; padding:7px 6px; border-radius:6px; font-size:13px; }
  .msbox button:hover { background:#f0f2f5; }
  .msbox button svg { width:16px; height:16px; flex:0 0 16px; color:var(--mut); }
  .msbox button.danger { color:#dc2626; }
  .msbox button.danger svg { color:#dc2626; }
  .msbox button.danger:hover { background:#fdecec; }
  .menu-name { padding:5px 6px 0; font-size:13px; font-weight:600; color:var(--text); }
  .menu-role { padding:1px 6px 8px; margin-bottom:4px; border-bottom:1px solid var(--bd); color:var(--mut); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
  /* Kompakter Icon-Trigger mit optionalem Text daneben (Stammdaten) */
  .navbtn { display:flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:999px; font-size:13px; font-weight:500; transition:background .15s; }
  .navbtn svg { width:18px; height:18px; flex:0 0 18px; }
  details.ms > summary.navbtn { border-color:transparent; background:none; }
  details.ms[open] > summary.navbtn { border-color:transparent; background:#eef1ed; }
  /* Avatar mit Initialen statt Namenstext */
  .avatar-btn { width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--accent-tint); color:var(--accent-dark); font-size:12px; font-weight:600; letter-spacing:.02em; }
  details.ms > summary.avatar-btn { border-color:transparent; padding:0; background:var(--accent-tint); }
  details.ms[open] > summary.avatar-btn { border-color:transparent; box-shadow:0 0 0 2px var(--accent-tint); }
  .panel { display:flex; gap:18px; flex-wrap:wrap; padding:12px 20px; background:#fbfcfd; border-bottom:1px solid var(--bd); }
  .prange { display:flex; align-items:center; gap:6px; }
  .prange > span:first-child { color:var(--mut); font-size:13px; min-width:120px; }
  /* Filterleiste im Stil der SAP-Fiori-Filter-Bar: jedes Feld immer sichtbar,
     Label klein darüber, Wert direkt im Feld (statt hinter einem "Filter"-
     Knopf verborgen) – Felder wrappen in so viele Zeilen wie nötig. */
  /* Filterleiste im Stil der SAP-Fiori-Filter-Bar: nur die wichtigsten Felder
     sofort sichtbar, Label klein darüber. Bewusst zurückhaltend – kleine
     Schrift, knappes Padding – statt eine dominante Fläche zu sein. */
  .fbar { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px 10px; padding:8px 20px; background:#fff; border-bottom:1px solid var(--bd); align-items:end; }
  .fbar.hidden { display:none; }
  /* Grid-Items schrumpfen sonst nie unter ihre Inhaltsbreite (CSS-Grid-Default
     min-width:auto) und laufen dadurch ins Nachbarfeld – DAS war die Überlappung. */
  .ffield, .fbar details.ms { min-width:0; }
  .flabel { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.02em; color:var(--mut); font-weight:600; margin-bottom:2px; }
  .fbar input[type=search], .fbar input[type=date], .fbar input[type=number] { width:100%; box-sizing:border-box; min-width:0; padding:5px 8px; font-size:13px; }
  .fbar details.ms > summary { width:100%; box-sizing:border-box; text-align:left; overflow:hidden; text-overflow:ellipsis; padding:5px 8px; font-size:13px; }
  .fbar .prange { gap:6px; min-width:0; }
  .fbar .prange input { width:0; flex:1 1 auto; min-width:0; }
  .fbar-toggle { align-self:end; }
  /* Suche etwas breiter als die übrigen Felder, damit sie als Haupteingabe
     erkennbar bleibt statt gleich schmal wie ein einzelner Auswahl-Filter. */
  .search-wide { grid-column:span 2; }
  /* "Filter"-Knopf genauso groß wie ein Filterfeld (gleiches Padding/Schrift/
     Rahmen wie details.ms > summary), statt eines kleinen .mini-Knopfs. */
  .fbar-toggle button { width:auto; box-sizing:border-box; text-align:left; padding:5px 12px; font-size:13px; border:1px solid var(--bd); border-radius:8px; background:#fff; cursor:pointer; color:var(--text); white-space:nowrap; }
  .fbar-toggle button:hover { background:#f0f2f5; }
  @media (max-width: 700px) {
    .fbar { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); padding:8px 12px; gap:6px 8px; }
  }
  /* Aktionsreihe unter der Filterleiste: Checkbox + Buttons in EINHEITLICHER
     Optik (gleiche Höhe/Schrift/Rahmen) statt drei unterschiedlicher Elemente. */
  .fbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 20px; background:#fff; border-bottom:1px solid var(--bd); }
  /* Liqui-Planung: zwei lange Checkbox-Labels + Monatsnavigation dürfen weder die
     Zeile umbrechen noch ihren eigenen Text zweizeilig quetschen (Erik) – dafür
     reicht flex-wrap:nowrap allein nicht, weil Flex-Kinder sonst lieber ihren
     Text umbrechen als der Zeile zu überlaufen. flex-shrink:0 + white-space:nowrap
     erzwingt die volle Breite; passt sie nicht, schrumpft ab hier lieber die
     Schrift (Medienabfragen unten) statt zu wrappen; seitliches Scrollen bleibt
     nur die letzte Rettung. */
  #liquiView .fbar-actions { flex-wrap:nowrap; overflow-x:auto; }
  #liquiView .fbar-actions > * { flex-shrink:0; white-space:nowrap; }
  @media (max-width: 820px) {
    #liquiView .fbar-actions { gap:6px; padding:6px 12px; }
    #liquiView .fbar-actions .fa-toggle, #liquiView .fbar-actions .mini { font-size:11px; padding:0 8px; }
    #liquiView #liqMonthLbl { min-width:120px !important; font-size:13px; }
  }
  @media (max-width: 600px) {
    #liquiView .fbar-actions .fa-toggle, #liquiView .fbar-actions .mini { font-size:10px; padding:0 6px; gap:4px; }
    #liquiView #liqMonthLbl { min-width:100px !important; font-size:12px; }
  }
  .fbar-actions .mini, .fa-toggle { height:26px; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:0 10px; border-radius:6px; border:1px solid var(--bd); background:#fff; cursor:pointer; color:var(--text); }
  .fa-toggle input { width:auto; margin:0; }
  .fbar-actions .mini:hover, .fa-toggle:hover { background:#f0f2f5; }
  .fa-toggle:has(input:checked) { background:var(--accent-tint); border-color:#cfe0c8; color:var(--accent-dark); }
  /* Rechnung-hochladen-Kopfknopf: gleicher Farbton wie "Fixkosten einblenden"
     (weiß/Rahmen statt kräftigem Grün), aber in Kopfzeilen-Größe. */
  .upload-btn { height:34px; padding:0 14px; font-size:14px; gap:8px; background:var(--accent-tint); border-color:#cfe0c8; color:var(--accent-dark); }
  .upload-btn:hover { background:#dcebd6; }
  .upload-btn svg { width:16px; height:16px; flex:0 0 16px; }
  .wrap { padding:16px 20px; }
  table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--bd); border-radius:10px; }
  /* Rechnungen/Forderungen/DATEV: Spalten dürfen so schmal sein wie ihr
     Inhalt statt auf 100% gestreckt zu werden (Fixkosten/Admin-Tabellen
     bleiben bei width:100% – die brauchen es für ihre Prozent-Spalten). */
  #invView table.rtable, #forderungenView table.rtable,
  #datevGroups table.rtable, #ausgangGroups table.rtable { width:auto; }
  th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--bd); white-space:nowrap; font-size:13px; }
  /* Tabellen bleiben ECHTE Tabellen auf jeder Bildschirmgröße – keine Kartenumwandlung.
     .tscroll umschließt jede Tabelle; passt sie nicht auf den Screen, scrollt NUR
     sie seitlich (max-width:100% hält den Wrapper selbst innerhalb des Screens) –
     nie die ganze Seite. Weniger wichtige Spalten (.mhide, auf th UND td) fallen
     zusätzlich unter 700px weg, damit möglichst selten überhaupt gescrollt werden
     muss. (Sticky-Spaltenkopf ist damit bewusst aufgegeben: position:sticky bricht
     an einem Vorfahren mit overflow≠visible – hier der Scroll-Container selbst.) */
  .tscroll { overflow-x:auto; max-width:100%; }
  /* Angefrorene erste Spalte(n): die Kennung (Lieferant/Kunde/Dateiname …) bleibt
     beim seitlichen Scrollen sichtbar, wie in Google Sheets/Excel/Airtable –
     das horizontale Sticky bricht NICHT mit dem Scroll-Container (anders als das
     vertikale Sticky oben), weil es genau dessen Scrollrichtung ist. Feste Breite
     der Auswahl-Spalte (34px, s. td.chk/th.chk) macht den Offset der zweiten
     Spalte berechenbar. */
  .rtable th:first-child, .rtable td:first-child,
  .rtable th.chk:first-child + th, .rtable td.chk:first-child + td {
    position:sticky; left:0; z-index:2;
  }
  .rtable th.chk:first-child + th, .rtable td.chk:first-child + td { left:34px; }
  .rtable td:first-child, .rtable td.chk:first-child + td {
    background:#fff; box-shadow:2px 0 4px rgba(20,30,15,.06);
  }
  .rtable thead th:first-child, .rtable thead th.chk:first-child + th { z-index:3; }
  @media (max-width: 700px) {
    .rtable th, .rtable td { padding:5px 6px; font-size:12px; }
    .rtable th.mhide, .rtable td.mhide { display:none; }
  }
  /* Benutzertabelle darf umbrechen + kompakter, damit möglichst wenig horizontal gescrollt werden muss */
  #usersList td, #usersOverlay thead th { white-space:normal; }
  #usersOverlay td .mini { margin-bottom:3px; }
  #usersOverlay table { table-layout:fixed; }
  #usersOverlay th:nth-child(1), #usersOverlay td:nth-child(1) { width:22%; word-break:break-word; }
  #usersOverlay th:nth-child(7), #usersOverlay td:nth-child(7) { width:18%; }
  /* Rechnungsliste (#invView): langer Lieferantenname darf die Tabelle nicht über den Bildschirm hinaus dehnen.
     Ellipsis auf dem Lieferantennamen (voller Name per Hover), kompakteres Padding. (Kein overflow-Container
     mehr auf .wrap — würde den Sticky-Spaltenkopf brechen; die Ellipsis hält die Tabelle schmal.) */
  #invView th, #invView td { padding:6px 8px; }
  .cell-ellip { display:inline-block; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
  /* Kopfzeile dezent grün hervorgehoben – Hensel-Grün-Tint, dieselbe Fläche wie
     Badges/Avatare (--accent-tint), keine neue Farbe eingeführt. */
  th { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--mut); background:var(--accent-tint); }
  th[data-sort], th[data-fsort], th[data-dsort] { cursor:pointer; user-select:none; }
  th[data-sort]:hover, th[data-fsort]:hover, th[data-dsort]:hover { color:var(--text); }
  tbody tr { cursor:pointer; }
  tbody tr:hover { background:#f5f8ff; }
  td.num { text-align:right; font-variant-numeric:tabular-nums; }
  .badge { display:inline-block; font-size:11px; padding:2px 7px; border-radius:999px; border:1px solid var(--bd); color:var(--mut); }
  .badge.paid { background:#ecfdf3; color:var(--ok); border-color:#bbf7d0; }
  .badge.pay { background:#fff7ed; color:var(--warn); border-color:#fed7aa; }
  .badge.sk { background:var(--accent-tint); color:var(--accent-dark); border-color:#cfe0c8; }
  .muted { color:var(--mut); }
  .empty { text-align:center; color:var(--mut); padding:40px; }
  /* Detail */
  #detail { position:fixed; inset:0; background:#fff; z-index:30; display:none; grid-template-rows:auto 1fr; }
  #detail.open { display:grid; }
  .dhead { display:flex; align-items:center; gap:10px; padding:12px 20px; border-bottom:1px solid var(--bd); flex-wrap:wrap; }
  .dbody { display:grid; grid-template-columns:1fr 460px; min-height:0; }
  .pdf { background:#33373d; }
  .pdf iframe { width:100%; height:100%; border:0; }
  .form { padding:18px 20px; overflow:auto; }
  .form h3 { margin:18px 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--mut); }
  .row { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
  label { display:block; font-size:12px; color:var(--mut); margin:8px 0 3px; }
  .form input, .form select, .form textarea { width:100%; }
  .eff { background:#f0f7ff; border:1px solid #c7d2fe; border-radius:10px; padding:10px 12px; margin-top:10px; }
  .eff b { font-size:16px; }
  .confirm { display:flex; align-items:center; gap:8px; background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:4px 8px; }
  .pop { position:fixed; z-index:40; background:#fff; border:1px solid var(--bd); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px; display:flex; gap:6px; }
  .selpanel { position:fixed; top:0; right:0; width:min(360px, 100vw); height:100vh; background:#fff; border-left:1px solid var(--bd); box-shadow:-8px 0 24px rgba(0,0,0,.07); z-index:25; padding:18px 20px; overflow:auto; }
  .sp-head { display:flex; align-items:center; justify-content:space-between; }
  .sp-big { font-size:26px; font-weight:700; margin-bottom:8px; }
  .sp-row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--bd); }
  .sp-row span { color:var(--mut); }
  #spActions button, #spActions a > button { width:100%; text-align:left; margin-top:8px; }
  td.chk, th.chk { width:34px; text-align:center; }
  /* DATEV-Reiter: ausgewählte Zeile hervorheben, ganze Zeile klickbar */
  #datevGroups tr[data-id] { cursor:pointer; }
  #datevGroups tr.sel { background:#e0ecff; }
  /* Auswahl-Hinweis sitzt in der vorhandenen Gruppenzeile – nichts darf verspringen */
  #datevGroups .dvsel { color:var(--accent-dark); font-weight:600; }
  #datevView .toolbar #datevSelInfo { white-space:nowrap; }
  /* Stand-Spalten „DATEV-Versand" und „NAS-Ablage" (Migration 027).
     Feste Breite, damit die Haken untereinander stehen und die Liste beim
     Aktualisieren nicht in der Spaltenbreite springt. */
  #datevView td.stand, #datevView th.stand { width:120px; text-align:center; white-space:nowrap; }
  #datevView td.stand .ja   { color:#0f7b4f; font-weight:700; }   /* erledigt */
  #datevView td.stand .nein { color:var(--mut); }                 /* steht noch aus */
  /* Nicht vorgesehen ist etwas anderes als „noch offen" – ein leeres Kästchen
     läse sich als „kommt noch" und jemand wartete darauf. */
  #datevView td.stand .nie  { color:var(--mut); opacity:.55; }
  /* Aktionen in der Gruppenzeile: erst bei Auswahl da. Die Zeile selbst bleibt
     immer stehen, deshalb verspringt beim ersten Klick nichts. */
  #datevView .grpakt { display:flex; gap:8px; align-items:center; }
  @media (max-width: 900px) {
    /* Gruppenkopf (Gesellschaft + Zähler + Aktionen) darf umbrechen statt die
       Knöpfe seitlich abzuschneiden – die Zeile selbst bleibt bestehen (s.o.),
       nur ihr Inhalt fließt bei wenig Platz in eine zweite Zeile. */
    .dvhead { flex-wrap:wrap; }
    #datevView .grpakt { flex-wrap:wrap; }
  }
  .actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
  .overlay { position:fixed; inset:0; background:rgba(15,18,23,.5); display:flex; align-items:center; justify-content:center; z-index:60; padding:16px; }
  .overlay .card { background:#fff; border-radius:14px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.25); max-width:92vw; max-height:90vh; overflow:auto; }
  .overlay .card h2 { margin:0 0 14px; }
  .overlay label { margin-top:10px; }
  #loginOverlay { background:#0b0b0d; }
  #loginLogo { position:absolute; top:4%; left:50%; transform:translateX(-50%); width:min(340px, 64vw); height:auto; z-index:0; }
  .login-card { width:min(340px, 100%); position:relative; z-index:1; }
  .login-card input { width:100%; }
  .err { color:#b91c1c; min-height:18px; margin:6px 0; font-size:13px; }
  #toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff; padding:10px 16px; border-radius:8px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:50; }
  #toast.show { opacity:1; }
  .hidden { display:none !important; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  /* Responsive: unter ~900px (Tablet hochkant, kleines Laptop-Fenster) reicht die feste
     460px-Formularspalte neben dem PDF nicht mehr – Formular unter die Vorschau stapeln. */
  @media (max-width: 900px) {
    .dbody { grid-template-columns: 1fr; grid-template-rows: 38vh 1fr; }
    .row { grid-template-columns: 1fr; }
  }

  /* Schmale Screens (Smartphone): Header/Dashboard bleiben nutzbar statt nur zu wrappen. */
  /* Header wird eng: Upload-Button erst kompakter, dann (ganz schmal) nur noch das Plus. */
  @media (max-width: 700px) {
    #uploadBtn { padding:6px 9px; font-size:13px; }
    .navbtn .btn-label { display:none; }
    .navbtn { width:34px; padding:0; justify-content:center; }
  }
  @media (max-width: 560px) {
    header { padding:10px 12px; gap:6px; }
    header h1 { font-size:15px; }
    #uploadBtn .btn-label { display:none; }
    .dash { padding:8px 12px 12px; gap:10px; }
    .dcard .big { font-size:22px; }
    /* Liqui-Kalender: auf dem Smartphone reicht kein Platz für Tageszahl + Saldo
       nebeneinander UND die Posten-Aufschlüsselung – Saldo unter die Tageszahl,
       Aufschlüsselung weg (Tippen auf den Tag zeigt ohnehin das volle Detail). */
    .liqcal { border-spacing:3px; }
    .liqcal td { min-height:44px; padding:4px 6px; }
    .liqcal th { padding:4px 2px; font-size:9px; }
    .liqcal .lq-top { flex-direction:column; align-items:flex-start; gap:1px; }
    .liqcal .daynum, .liqcal .lq-saldo { font-size:11px; }
    .liqcal .lq-out { display:none; }
    #liqDayDetail { padding:10px 12px; border-radius:10px; }
    #liqDayDetail table { min-width:0; }
    #liqDayDetail th, #liqDayDetail td { padding:5px 8px; font-size:13px; white-space:normal; }
  }