/* ==========================================================================
   Projecta Pro – Modernisierung 2026 (UI/Responsive-Schicht)
   Einbinden als LETZTES Stylesheet, direkt nach /css/modern.css:
     <link rel="stylesheet" href="/css/modern-2026.css">
   Grundsaetze:
   - Nur Darstellung. Keine Klassen, IDs oder Markup-Annahmen, die nicht schon
     in index.html bzw. offene-rechnungen.css existieren. Keine Logik.
   - Hintergruende (--bg-body hell #f1f5f9, HIG dunkel #121212) bleiben.
   - Hell und Dunkel haben eigene Werte, keine Invertierung.
   Referenz-Entwurf: "Projecta Pro Redesign.dc.html"
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --m26-r-card: 16px;
  --m26-r-ctl: 10px;
  --m26-r-chip: 9px;
  --m26-r-item: 8px;
  --m26-ctl-h: 36px;
  --m26-seg-h: 30px;
  --m26-gutter: 24px;
  --m26-fill: rgba(15,23,42,0.05);
  --m26-sel: rgba(7,161,226,0.11);
  --m26-seg: #ffffff;
  --m26-seg-shadow: 0 1px 2px rgba(15,23,42,0.10), 0 0 0 0.5px rgba(15,23,42,0.06);
  --m26-line: rgba(15,23,42,0.08);
  --m26-line-2: rgba(15,23,42,0.15);
  --m26-text-4: #a3adbb;
  --m26-disabled: rgba(15,23,42,0.06);
  --m26-paper: #e7ecf2;
  --m26-ease: cubic-bezier(0.2, 0, 0, 1);
  /* Karten ruhiger: fester Weiss-Ton statt 82 % Glas */
  --bg-card: #ffffff;
  --surface: #ffffff;
  --card-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
html.dark {
  --m26-fill: rgba(255,255,255,0.07);
  --m26-sel: rgba(44,181,240,0.15);
  --m26-seg: rgba(255,255,255,0.16);
  --m26-seg-shadow: 0 1px 2px rgba(0,0,0,0.4);
  --m26-line: rgba(255,255,255,0.075);
  --m26-line-2: rgba(255,255,255,0.14);
  --m26-text-4: rgba(255,255,255,0.30);
  --m26-disabled: rgba(255,255,255,0.06);
  --m26-paper: #0b0f19;
  --card-shadow: none;
}
html.dark[data-dark-variant="hig"] {
  --m26-fill: rgba(255,255,255,0.07);
  --m26-sel: rgba(79,176,220,0.16);
  --m26-seg: #3a3a3c;
  --m26-line: rgba(255,255,255,0.07);       /* HIG-Linien waren mit .035 kaum sichtbar */
  --m26-line-2: rgba(255,255,255,0.14);
  --m26-paper: #0b0b0b;
  --border: rgba(255,255,255,0.07);
  --border-light: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.14);
  --green-text: #8acca5;
}
@media (pointer: coarse) {
  :root { --m26-ctl-h: 44px; --m26-seg-h: 44px; }
}
@media (max-width: 1023px) { :root { --m26-gutter: 20px; } }
@media (max-width: 699px)  { :root { --m26-gutter: 16px; } }

/* ---------- 2. Shell: Rail, Seitenliste, Kopfzeile ----------------------- */
.nav-rail { border-right: 1px solid var(--m26-line); }
.rail-btn { border-radius: 12px; font-weight: 500; transition: color .15s, background .15s; }
@media (hover: hover) { .rail-btn:hover { background: var(--hover); color: var(--text); } }
.rail-btn.active { color: var(--brand-text); }
.rail-indicator { border-radius: 12px; background: var(--m26-sel); }
.rail-btn:focus-visible, .nav-item:focus-visible, .hdr-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.nav-panel { border-right: 1px solid var(--m26-line); }
.nav-panel-head { padding: 18px 14px 12px; border-bottom: 1px solid var(--m26-line); }
#navPanelTitle { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.nav-search input {
  height: 35px; border-radius: var(--m26-r-ctl); border: 1px solid transparent;
  background: var(--m26-fill); font-size: 13.5px;
}
.nav-search input:focus { border-color: var(--brand); box-shadow: var(--ring); background: var(--surface-solid); }
.nav-section-title {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3);
}
.nav-item { min-height: 34px; border-radius: var(--m26-r-item); font-size: 14px; }
@media (hover: hover) { .nav-item:hover { background: var(--hover); } }
.nav-item.active { background: var(--m26-sel); color: var(--brand-text); font-weight: 600; }
@media (pointer: coarse) { .nav-item { min-height: 44px; } }

.main-header {
  height: 64px; padding-inline: var(--m26-gutter); gap: 12px;
  border-bottom: 1px solid var(--m26-line);
  background: var(--bg-header);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.page-area { font-size: 12px; font-weight: 500; color: var(--text-3); }
#pageTitle { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dots { padding: 5px 9px; border-radius: 99px; background: var(--m26-fill); gap: 5px; }
@media (pointer: fine) {
.hdr-search {
  width: clamp(180px, 24vw, 340px); height: 36px; justify-content: flex-start; gap: 8px; padding: 0 6px 0 11px;
  border: 1px solid var(--m26-line); border-radius: var(--m26-r-ctl); background: var(--surface-solid);
  color: var(--text-3); box-shadow: var(--card-shadow);
}
.hdr-search-text { flex: 1; text-align: left; }
.hdr-kbd { padding: 3px 6px; border-radius: 6px; background: var(--m26-fill); color: var(--text-3); font-size: 11px; font-weight: 500; }
@media (hover: hover) { .hdr-search:hover { border-color: var(--m26-line-2); color: var(--text-2); } }
}
.hdr-profile { border-radius: 99px; }
.main-content { padding: var(--m26-gutter); padding-bottom: calc(var(--m26-gutter) + 40px + env(safe-area-inset-bottom)); }
/* Offene Rechnungen fuellt die Hoehe selbst aus: kein Zusatzpolster unten, sonst rollt die Seite um 40 px */
@media (min-width: 1100px) { body[data-seite="offene-rechnungen"] .main-content:not(#_) { padding-bottom: var(--m26-gutter); } }

@media (max-width: 699px) {
  .main-header { height: 56px; padding-inline: 16px 8px; gap: 6px; }
  #pageTitle { font-size: 17px; }
  .status-dots, .hdr-search-text, .hdr-kbd, #headerUserName { display: none; }
  .hdr-search { width: 44px; padding: 0; justify-content: center; border: 0; background: transparent; box-shadow: none; }
  .hdr-btn { width: 44px; height: 44px; }
}

/* ---------- 3. Gemeinsame Bedienelemente --------------------------------- */
.btn {
  min-height: var(--m26-ctl-h); border-radius: var(--m26-r-ctl); border: 1px solid var(--m26-line-2);
  background: var(--surface-solid); font-size: 14px; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--hover); } }
.btn:active:not(:disabled) { background: var(--press); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary, html.dark .btn-primary, html.dark[data-dark-variant="hig"] .btn-primary {
  background: var(--primary); border-color: transparent; color: #fff; font-weight: 600;
}
@media (hover: hover) { .btn-primary:hover:not(:disabled) { background: var(--primary-hover); } }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--m26-disabled); border-color: transparent; color: var(--m26-text-4); box-shadow: none; cursor: not-allowed;
}
.form-input, .form-select {
  min-height: var(--m26-ctl-h); border-radius: var(--m26-r-ctl); border: 1px solid var(--m26-line-2);
  background-color: var(--surface-solid);
}
.form-input:focus, .form-select:focus { border-color: var(--brand); box-shadow: var(--ring); }
.form-input:disabled, .form-select:disabled { background-color: var(--m26-disabled); color: var(--m26-text-4); }
.card { border: 1px solid var(--m26-line); border-radius: var(--m26-r-card); box-shadow: var(--card-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal { border-radius: 18px; border: 1px solid var(--m26-line-2); }
@media (max-width: 699px) {
  .modal { width: 100vw; max-width: none; max-height: 92dvh; border-radius: 18px 18px 0 0; align-self: flex-end;
           padding-bottom: env(safe-area-inset-bottom); }
}
.profile-menu { border-radius: 14px; border: 1px solid var(--m26-line-2); box-shadow: var(--pop-shadow); }
.badge { border-radius: 99px; font-variant-numeric: tabular-nums; }

/* ---------- 4. Seite "Offene Rechnungen klaeren" ------------------------- */
#pageOffene-rechnungen {
  --ak-linie: var(--m26-line);
  --ak-papierflaeche: var(--m26-paper);
}
/* Volle Breite statt Insel: weder 1600 px (Seiten-CSS) noch 2200 px (--m-content-max aus modern.css) */
.main-content > #pageOffene-rechnungen.active { max-width: none; }
#pageOffene-rechnungen .ak { max-width: none; gap: 16px; }
/* Ab 1100 px steht das Detail neben der Liste, "Alle Rechnungen" hat dort nichts zu schliessen */
@media (min-width: 1100px) { #pageOffene-rechnungen .ak-zurueck { visibility: hidden; } }

/* Uebersicht */
#pageOffene-rechnungen .ak-bilanz {
  padding: 20px 22px; gap: 18px; border: 1px solid var(--m26-line); border-radius: var(--m26-r-card);
  background: var(--surface-solid); box-shadow: var(--card-shadow);
}
#pageOffene-rechnungen .ak-gross { font-size: 34px; font-weight: 680; letter-spacing: -0.025em; line-height: 1.05; font-variant-numeric: tabular-nums; }
#pageOffene-rechnungen .ak-summe-sub { font-size: 13px; color: var(--text-3); line-height: 1.45; }
#pageOffene-rechnungen .ak-legende { font-size: 12.5px; color: var(--text-2); gap: 14px; }
#pageOffene-rechnungen .ak-h { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0; text-transform: none; }
#pageOffene-rechnungen .ak-band { height: 10px; border-radius: 5px; gap: 2px; overflow: hidden; }
#pageOffene-rechnungen .ak-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
#pageOffene-rechnungen .ak-sbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
#pageOffene-rechnungen .ak-sbz {
  border: 1px solid var(--m26-line); border-radius: 12px; padding: 10px 12px; background: transparent; text-align: left;
  transition: border-color .15s, background .15s;
}
@media (hover: hover) { #pageOffene-rechnungen .ak-sbz:hover { background: transparent; border-color: var(--m26-line-2); } }
#pageOffene-rechnungen .ak-sbz[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); }
#pageOffene-rechnungen .ak-gname { font-size: 13.5px; font-weight: 500; line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; text-wrap: pretty; }
#pageOffene-rechnungen .ak-zeilen { overflow-x: hidden; }
#pageOffene-rechnungen .ak-sbk { font-size: 14px; font-weight: 650; letter-spacing: 0.02em; }
#pageOffene-rechnungen .ak-anteil { height: 4px; border-radius: 2px; background: var(--m26-fill); }
#pageOffene-rechnungen .ak-sbzahl { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* Kacheln: Name oben (darf umbrechen), Balken, unten "x von y" links und Betrag rechts */
#pageOffene-rechnungen .ak-sbz,
#pageOffene-rechnungen .ak-sbz.ak-gz {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "a a" "z b"; align-items: center; gap: 6px 8px;
}
#pageOffene-rechnungen .ak-gname,
#pageOffene-rechnungen .ak-sbk { grid-area: k; }
#pageOffene-rechnungen .ak-sbk { justify-self: start; padding: 0; background: none; color: var(--text); text-align: left; }
#pageOffene-rechnungen .ak-sbz .ak-anteil { grid-area: a; }
#pageOffene-rechnungen .ak-sbzahl { grid-area: z; }
#pageOffene-rechnungen .ak-gbetrag { grid-area: b; font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 1400px) {
  /* Problem und Sachbearbeiter nebeneinander */
  #pageOffene-rechnungen .ak-bilanz { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 28px; }
  #pageOffene-rechnungen .ak-summe { grid-column: 1 / -1; }
}

/* Arbeitsbereich: Liste + Detail */
#pageOffene-rechnungen .ak-bereich { gap: 16px; }
@media (min-width: 1100px) {
  #pageOffene-rechnungen .ak-bereich { grid-template-columns: 340px minmax(0, 1fr); }
  /* Seite = Fensterhoehe unter der Kopfzeile; Liste und Detail bekommen den Rest unter der Uebersicht und
     rollen in sich, Speichern steht ohne Seiten-Rollen. Mindestens 480 px, darunter rollt die Seite. */
  #pageOffene-rechnungen .ak { min-height: calc(100dvh - var(--header-h, 64px) - 2 * var(--m26-gutter)); }
  #pageOffene-rechnungen .ak-bereich { flex: 1 1 0; min-height: 480px; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  #pageOffene-rechnungen .ak-liste,
  #pageOffene-rechnungen .ak-detail { position: static; height: auto; min-height: 0; max-height: none; }
}
@media (min-width: 1800px) { #pageOffene-rechnungen .ak-bereich { grid-template-columns: 380px minmax(0, 1fr); } }
@media (min-width: 1900px) { #pageOffene-rechnungen .ak-bereich { grid-template-columns: 440px minmax(0, 1fr); } }

#pageOffene-rechnungen .ak-liste,
#pageOffene-rechnungen .ak-detail {
  border: 1px solid var(--m26-line); border-radius: var(--m26-r-card); background: var(--surface-solid); box-shadow: var(--card-shadow);
}
#pageOffene-rechnungen .ak-lkopf { padding: 14px 14px 10px; gap: 10px; }
#pageOffene-rechnungen .ak-suche {
  height: var(--m26-ctl-h); border-radius: var(--m26-r-ctl); border: 1px solid transparent; background: var(--m26-fill); font-size: 14px;
}
#pageOffene-rechnungen .ak-suche:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); background: var(--surface-solid); }

/* Segmentierte Controls: Stand, Tabs, Wiedervorlage */
#pageOffene-rechnungen .ak-stand,
#pageOffene-rechnungen .ak-wvq { display: inline-flex; flex-wrap: wrap; }
#pageOffene-rechnungen .ak-stand,
#pageOffene-rechnungen .ak-tabs,
#pageOffene-rechnungen .ak-wvq {
  gap: 2px; padding: 2px; border: 0; border-radius: var(--m26-r-ctl); background: var(--m26-fill);
}
#pageOffene-rechnungen .ak-stand { display: flex; }
#pageOffene-rechnungen .ak-stand > button,
#pageOffene-rechnungen .ak-tabs > button,
#pageOffene-rechnungen .ak-wvq > button {
  min-height: var(--m26-seg-h); border: 0; border-radius: var(--m26-r-item); background: transparent;
  color: var(--text-2); font-size: 13px; font-weight: 500; box-shadow: none; transition: background .15s, color .15s;
}
#pageOffene-rechnungen .ak-stand > button { flex: 1; }
#pageOffene-rechnungen .ak-stand > button.on,
#pageOffene-rechnungen .ak-tabs > button[aria-pressed="true"],
#pageOffene-rechnungen .ak-wvq > button[aria-pressed="true"] {
  background: var(--m26-seg); color: var(--text); font-weight: 600; box-shadow: var(--m26-seg-shadow);
}
#pageOffene-rechnungen .ak-stand .n { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Zeilen */
#pageOffene-rechnungen .ak-zeilen { padding: 6px; border-top: 1px solid var(--m26-line); display: flex; flex-direction: column; gap: 1px; }
#pageOffene-rechnungen .ak-z { border-radius: 10px; padding: 11px 10px; gap: 12px; border: 0; }
@media (hover: hover) { #pageOffene-rechnungen .ak-z:hover { background: var(--hover); } }
#pageOffene-rechnungen .ak-z[aria-current="true"] { background: var(--m26-sel); }
#pageOffene-rechnungen .ak-z[aria-current="true"] .ak-z-nr { color: var(--brand-text); }
#pageOffene-rechnungen .ak-z:focus-visible { outline: none; box-shadow: var(--ring); }
#pageOffene-rechnungen .ak-z-nr { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
#pageOffene-rechnungen .ak-z-nr span { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 8px; }
#pageOffene-rechnungen .ak-z-wer { font-size: 13px; color: var(--text-2); }
#pageOffene-rechnungen .ak-z-betrag { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
#pageOffene-rechnungen .ak-z-betrag small { font-size: 11.5px; font-weight: 400; color: var(--text-3); letter-spacing: 0.03em; }
#pageOffene-rechnungen .ak-punkt.ohne { background: transparent; box-shadow: inset 0 0 0 1.5px var(--m26-text-4); }
@media (pointer: coarse) { #pageOffene-rechnungen .ak-z { padding: 12px 10px; min-height: 56px; } }

/* Detail */
#pageOffene-rechnungen .ak-dleiste { min-height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--m26-line); }
#pageOffene-rechnungen .ak-zurueck { color: var(--brand-text); font-size: 14.5px; font-weight: 500; min-height: var(--m26-ctl-h); }
#pageOffene-rechnungen .ak-tabs > button { min-width: 96px; padding: 0 14px; }
/* Klaerung breiter, wenn Platz da ist (vorher max. 400 px) */
#pageOffene-rechnungen .ak-dinnen { grid-template-columns: minmax(380px, 1fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr); }
/* Schmales Detail (Reiter): eine Spalte, sonst bliebe die Klaerung in der 380-px-Spalte der Breitansicht */
@container akd (max-width: 759px) { #pageOffene-rechnungen .ak-dinnen { grid-template-columns: minmax(0, 1fr); } }
#pageOffene-rechnungen .ak-klaer { padding: 24px 26px 0; gap: 18px; }
#pageOffene-rechnungen .ak-k-nr,
#pageOffene-rechnungen .ak-k-betrag { font-size: 24px; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#pageOffene-rechnungen .ak-k-wer { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
#pageOffene-rechnungen .ak-problem {
  padding: 14px 16px; border: 0; border-radius: 12px; background: var(--orange-tint); color: var(--text);
  font-size: 13.5px; line-height: 1.5; box-shadow: none;
}
#pageOffene-rechnungen .ak-problem b { display: block; color: var(--orange-text); font-size: 14px; font-weight: 650; margin-bottom: 2px; }
#pageOffene-rechnungen .ak-fakten { grid-template-columns: 120px minmax(0, 1fr); gap: 10px 16px; font-size: 13.5px; line-height: 1.5; }
#pageOffene-rechnungen .ak-fakten dt { color: var(--text-3); font-weight: 400; }
#pageOffene-rechnungen .ak-form { border-top: 1px solid var(--m26-line); padding-top: 20px; gap: 20px; }
#pageOffene-rechnungen .ak-erg { display: flex; flex-wrap: wrap; gap: 8px; }
#pageOffene-rechnungen .ak-erg > button {
  min-height: var(--ak-steuer, 34px); padding: 0 14px; border: 1px solid var(--m26-line-2); border-radius: var(--m26-r-chip);
  background: transparent; color: var(--text); font-size: 13.5px; font-weight: 500;
}
@media (hover: hover) { #pageOffene-rechnungen .ak-erg > button:hover { background: transparent; border-color: var(--brand); } }
#pageOffene-rechnungen .ak-erg > button[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-text); }
#pageOffene-rechnungen .ak-datum,
#pageOffene-rechnungen .ak-text {
  border: 1px solid var(--m26-line-2); border-radius: var(--m26-r-ctl); background: var(--surface-solid); color: var(--text); font-size: 14px;
}
#pageOffene-rechnungen .ak-datum { min-height: var(--m26-ctl-h); padding: 0 10px; }
#pageOffene-rechnungen .ak-text { min-height: 76px; padding: 10px 12px; line-height: 1.45; }
#pageOffene-rechnungen .ak-datum:focus,
#pageOffene-rechnungen .ak-text:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
#pageOffene-rechnungen .ak-wvtext { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
/* Speichern bleibt beim Scrollen sichtbar */
#pageOffene-rechnungen .ak-akt {
  position: sticky; bottom: 0; z-index: 1; margin: 0 -26px; padding: 14px 26px calc(14px + env(safe-area-inset-bottom));
  background: var(--surface-solid); border-top: 1px solid var(--m26-line); display: flex; justify-content: flex-end; gap: 10px;
}
#pageOffene-rechnungen .ak-knopf {
  min-height: var(--m26-ctl-h); border-radius: var(--m26-r-ctl); border: 1px solid var(--m26-line-2);
  background: var(--surface-solid); color: var(--text); font-size: 13.5px; font-weight: 500;
}
#pageOffene-rechnungen .ak-knopf-primaer {
  min-height: 40px; min-width: 128px; padding: 0 20px; border-color: transparent; background: var(--primary); color: #fff; font-size: 14.5px; font-weight: 600;
}
@media (hover: hover) { #pageOffene-rechnungen .ak-knopf-primaer:hover:not(:disabled) { background: var(--primary-hover); } }
#pageOffene-rechnungen .ak-knopf:disabled { background: var(--m26-disabled); border-color: transparent; color: var(--m26-text-4); cursor: not-allowed; }
#pageOffene-rechnungen .ak-knopf:focus-visible { outline: none; box-shadow: var(--ring); }
#pageOffene-rechnungen .ak-bleiste { min-height: 52px; padding: 8px 12px 8px 16px; gap: 10px; border-bottom: 1px solid var(--m26-line); background: var(--surface-solid); }
#pageOffene-rechnungen .ak-bname { font-size: 13.5px; font-weight: 600; }
#pageOffene-rechnungen .ak-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 9px; background: var(--m26-fill); }
#pageOffene-rechnungen .ak-knopf-ico { border: 0; background: transparent; min-width: 30px; min-height: 30px; }
#pageOffene-rechnungen .ak-flaeche { padding: 24px; }

/* iPad hoch / kleine Laptops: Detail als Seitenblatt */
@media (max-width: 1099px) {
  #pageOffene-rechnungen .ak.hat-detail .ak-detail { width: min(720px, calc(100vw - var(--ak-links, 0px) - 40px)); border-radius: 0; border-width: 0 0 0 1px; }
  #pageOffene-rechnungen .ak.hat-detail .ak-scrim { background: rgba(15,23,42,0.22); }
  html.dark #pageOffene-rechnungen .ak.hat-detail .ak-scrim { background: rgba(0,0,0,0.5); }
}
/* iPhone: Vollbild, groessere Ziele, Uebersicht kompakt */
@media (max-width: 699px) {
  #pageOffene-rechnungen .ak-bilanz { padding: 16px; gap: 14px; }
  #pageOffene-rechnungen .ak-gross { font-size: 30px; }
  #pageOffene-rechnungen .ak-gruppen { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  #pageOffene-rechnungen .ak-sbs { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  #pageOffene-rechnungen .ak.hat-detail .ak-detail { width: 100vw; border: 0; }
  #pageOffene-rechnungen .ak-klaer { padding: 18px 16px 0; }
  #pageOffene-rechnungen .ak-akt { margin: 0 -16px; padding-inline: 16px; }
  #pageOffene-rechnungen .ak-fakten { grid-template-columns: 96px minmax(0, 1fr); }
  #pageOffene-rechnungen .ak-k-nr, #pageOffene-rechnungen .ak-k-betrag { font-size: 22px; }
}

/* ---------- 5. Bewegung ------------------------------------------------- */