/* ============================================================================
   AEX Klientenportal — Rahmen und Feinschliff

   Setzt auf portal.css (Bausteine) und tokens.css (Werte) auf und bestimmt
   Gestalt und Rhythmus: Seitenleiste, Flächen, Typografie, Zustände,
   Dunkelmodus, Druck.

   Leitgedanken, damit spätere Änderungen dieselbe Richtung halten:
   • Ruhe vor Effekt — hier prüft jemand offene Rechnungen, Lesbarkeit gewinnt.
   • Tiefe entsteht durch weiche, gestreute Schatten, nicht durch graue Rahmen.
   • Ein Akzent (AEX-Blau) führt; Orange bleibt der Warnung vorbehalten.
   • Zahlen laufen in Tabellenziffern und rechtsbündig — sie sollen vergleichbar sein.
   ========================================================================== */

.mp {
  --mp-side: 248px;
  /* Neutrale Grautöne (AEX Neutral) statt bläulicher: der Blaustich machte Tabellen „stichig“
     (Emil 23.09.2026). Blau bleibt dem Akzent vorbehalten. */
  --mp-grund: #f4f5f7;
  --mp-flaeche: #ffffff;
  --mp-erhoben: #ffffff;
  --mp-kopf: #f8f9fa;
  --mp-tinte: #17191d;
  --mp-tinte-weich: #414750;
  --mp-gedaempft: #5e646d;
  --mp-linie: rgba(23, 25, 29, .09);
  --mp-linie-zart: rgba(23, 25, 29, .06);
  /* Diese Namen verwenden Kanzlei-Ansicht und Checkliste an 25 Stellen — sie waren nie
     festgelegt: Rahmen fielen dadurch auf die dunkle Schriftfarbe zurück (Fund 23.09.2026). */
  --mp-rand: var(--mp-linie-zart);
  --mp-text: var(--mp-tinte);
  --mp-hover: rgba(1, 141, 176, .045);
  --mp-akzent: #01346b;
  --mp-akzent-hell: #018db0;
  --mp-akzent-weich: rgba(1, 141, 176, .10);
  --mp-warn: #c2410c;
  --mp-radius: 16px;
  --mp-radius-klein: 10px;
  --mp-feder: cubic-bezier(.32, .72, 0, 1);
  --mp-schatten: 0 1px 1px rgba(23, 25, 29, .04), 0 8px 20px -14px rgba(23, 25, 29, .26);
  --mp-schatten-hoch: 0 2px 4px rgba(23, 25, 29, .06), 0 22px 44px -24px rgba(23, 25, 29, .36);
  /* Beträge in der Hausschrift mit gleich breiten Ziffern statt Schreibmaschinenschrift:
     ruhiger zu lesen, Spalten bleiben trotzdem vergleichbar. */
  --font-mono: var(--font-sans);

  background: var(--mp-grund);
  color: var(--mp-tinte);
  margin: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(1, 141, 176, .22); }

/* ---------- Gerüst ---------- */
.mp-shell { display: grid; grid-template-columns: var(--mp-side) 1fr; min-height: 100vh; }
.mp-body { display: flex; flex-direction: column; min-width: 0; }
.mp-main { flex: 1; width: 100%; max-width: 1780px; margin: 0 auto;
  padding: 38px 38px 52px; display: flex; flex-direction: column; gap: 22px; }

.mp-skip { position: absolute; left: -9999px; }
.mp-skip:focus { left: 14px; top: 14px; z-index: 100; background: var(--mp-flaeche);
  padding: 11px 16px; border-radius: var(--mp-radius-klein); box-shadow: var(--mp-schatten-hoch); }

/* ---------- Seitenleiste ---------- */
.mp-side { display: flex; flex-direction: column; gap: 4px; padding: 22px 14px 18px;
  background: var(--mp-flaeche); border-right: 1px solid var(--mp-linie-zart);
  position: sticky; top: 0; height: 100vh; }

.mp-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 2px 8px 20px; }
.mp-brand__logo { height: 38px; width: auto; display: block; }
.mp-brand__sub { font: 600 10px var(--font-sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mp-gedaempft); padding-left: 2px; }

.mp-firma { display: flex; flex-direction: column; gap: 3px; margin: 0 2px 16px; padding: 11px 13px;
  background: var(--mp-akzent-weich); border-radius: 12px; }
.mp-firma__label { font: 600 9.5px var(--font-sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--mp-gedaempft); }
.mp-firma__name { font: 600 13.5px var(--font-sans); color: var(--mp-tinte); letter-spacing: -.01em; }
.mp-firma__wechsel { display: flex; flex-direction: column; gap: 3px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--mp-linie-zart); }
.mp-firma__wechsel a { font: 500 12px var(--font-sans); color: var(--mp-akzent-hell); text-decoration: none; }
.mp-firma__wechsel a:hover { text-decoration: underline; }

.mp-nav { display: flex; flex-direction: column; gap: 2px; }
.mp-nav__link { display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: var(--mp-radius-klein); font: 500 13.5px var(--font-sans);
  color: var(--mp-tinte-weich); text-decoration: none;
  transition: background-color .3s var(--mp-feder), color .3s var(--mp-feder); }
.mp-nav__link svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.mp-nav__link:hover { background: var(--mp-akzent-weich); color: var(--mp-tinte); }
.mp-nav__link:hover svg { opacity: 1; }
.mp-nav__link.is-active { background: var(--mp-akzent); color: #fff;
  box-shadow: 0 8px 18px -10px rgba(1, 52, 107, .8); }
.mp-nav__link.is-active svg { opacity: 1; }
.mp-nav__trenner { height: 1px; background: var(--mp-linie-zart); margin: 12px; }

.mp-side__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--mp-linie-zart); }
.mp-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--mp-radius-klein); }
.mp-user:hover { background: var(--mp-akzent-weich); }
.mp-user__avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--mp-akzent-hell), var(--mp-akzent));
  color: #fff; font: 600 12.5px var(--font-sans); }
.mp-user__name { font: 500 13px var(--font-sans); color: var(--mp-tinte); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-user__name:hover { text-decoration: underline; }
.mp-user__out { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--mp-gedaempft);
  display: grid; place-items: center; padding: 5px; border-radius: 8px; }
.mp-user__out svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.mp-user__out:hover { color: var(--mp-tinte); background: var(--mp-linie); }

/* ---------- Flächen ---------- */
.mp .kp-card, .mp .kp-tile, .mp .kp-chartbox {
  background: var(--mp-erhoben); border: 0; border-radius: var(--mp-radius);
  box-shadow: 0 0 0 1px var(--mp-linie-zart), var(--mp-schatten);
  transition: box-shadow .45s var(--mp-feder), transform .45s var(--mp-feder);
}
.mp .kp-card:hover, .mp .kp-chartbox:hover { box-shadow: 0 0 0 1px var(--mp-linie), var(--mp-schatten-hoch); }
.mp .kp-card__head { background: transparent; border-bottom: 1px solid var(--mp-linie-zart);
  border-radius: var(--mp-radius) var(--mp-radius) 0 0; padding: 15px 18px; }
.mp .kp-card__title { font: 600 14px var(--font-sans); color: var(--mp-tinte); }
.mp .kp-card__sub { color: var(--mp-gedaempft); }

.mp .kp-tile { padding: 24px; }
.mp .kp-tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--mp-linie), var(--mp-schatten-hoch); }
.mp .kp-tile:active { transform: translateY(-1px); }
.mp .kp-tile__icon { width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(155deg, var(--mp-akzent-weich), rgba(1, 141, 176, .03));
  box-shadow: inset 0 0 0 1px var(--mp-linie-zart); }
.mp .kp-tile__head { font: 600 15.5px var(--font-sans); letter-spacing: -.012em; }
.mp .kp-tile__big { font-size: 31px; letter-spacing: -.035em; }
.mp .kp-tile__desc, .mp .kp-tile__note { color: var(--mp-gedaempft); }

/* ---------- Typografie ---------- */
.mp .kp-h1 { font: 680 31px/1.14 var(--font-display); letter-spacing: -.035em; color: var(--mp-tinte); }
.mp .kp-greet { font: 680 32px/1.12 var(--font-display); letter-spacing: -.037em; }
.mp .kp-greet::before { content: "Ihr Überblick"; display: block; margin-bottom: 8px;
  font: 600 10px var(--font-sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mp-gedaempft); }
.mp .kp-sub { font-size: 13.5px; color: var(--mp-gedaempft); margin-top: 4px; }
.mp .kp-pagehead { align-items: flex-start; gap: 16px; }
.mp .kp-text { color: var(--mp-tinte-weich); }
.mp .kp-deflist dt { color: var(--mp-gedaempft); }
.mp .kp-deflist dd { color: var(--mp-tinte); }

/* Zahlen: gleiche Breite je Ziffer, damit Spalten vergleichbar bleiben */
.mp .kp-amount, .mp .kp-tile__big, .mp .kp-kpi__value, .mp .kp-stat__value,
.mp .kp-sl__saldo, .mp .kp-sl__gsum, .mp .kp-mini__amount, .mp .kp-tnum {
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em;
}

/* ---------- Listen und Tabellen ---------- */
/* Tabellenköpfe hell statt dunkelblauer Balken — der Inhalt führt, nicht die Kopfzeile */
.mp .kp-oprow--head, .mp .kp-slrow--head, .mp .kp-oprow--head:hover, .mp .kp-slrow--head:hover {
  background: var(--mp-kopf); border-bottom: 1px solid var(--mp-linie-zart); color: var(--mp-gedaempft);
  font: 600 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.mp .kp-slrow--group, .mp .kp-slrow--group:hover, .mp .kp-slrow--foot, .mp .kp-slrow--foot:hover { background: var(--mp-kopf); }
.mp .kp-sl__nr { color: var(--mp-gedaempft); }
/* Erledigt/Beantwortet: ruhiges Grün (Status OK) statt dunkelblauer Fläche */
.mp .kp-pill--beantwortet, .mp .kp-pill--erledigt { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.mp .kp-oprow { border-color: var(--mp-linie-zart); transition: background-color .2s ease; }
.mp .kp-oprow:not(.kp-oprow--head):not(.kp-oprow--foot):hover { background: rgba(1, 141, 176, .045); }
.mp .kp-oprow--head { font: 600 11px var(--font-sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--mp-gedaempft); }
.mp .kp-oprow__due--warn, .mp .kp-amount--warn, .mp .warn { color: var(--mp-warn); }
.mp .kp-sl__group { border-color: var(--mp-linie-zart); }
.mp .kp-sl__acct:hover { background: rgba(1, 141, 176, .045); }

/* ---------- Bedienelemente ---------- */
.mp .kp-btn { border-radius: var(--mp-radius-klein);
  transition: transform .3s var(--mp-feder), box-shadow .3s var(--mp-feder), background-color .2s ease; }
.mp .kp-btn:active { transform: scale(.975); }
.mp .kp-btn--ghost { box-shadow: inset 0 0 0 1px var(--mp-linie); }
.mp .kp-btn--ghost:hover { background: var(--mp-akzent-weich); }
.mp .kp-pill, .mp .kp-chip { border-radius: 999px; }
.mp :focus-visible { outline: 2px solid var(--mp-akzent-hell); outline-offset: 2px; border-radius: 6px; }

/* ---------- Leerzustände ---------- */
.mp .kp-empty { padding: 46px 24px; }
.mp .kp-empty__icon { background: var(--mp-akzent-weich); color: var(--mp-akzent-hell); }
.mp .kp-empty__title { font: 600 16px var(--font-sans); letter-spacing: -.015em; }
.mp .kp-empty__text { color: var(--mp-gedaempft); max-width: 46ch; margin-inline: auto; }

/* ---------- Fußzeile ---------- */
.mp-footer { border-top: 1px solid var(--mp-linie-zart); padding: 18px 38px; display: flex; gap: 18px;
  flex-wrap: wrap; align-items: center; justify-content: space-between;
  font: 400 12px var(--font-sans); color: var(--mp-gedaempft); }
.mp-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
.mp-footer a { color: inherit; text-decoration: none; }
.mp-footer a:hover { color: var(--mp-tinte); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Startseite: eine führende Kachel, zwei begleitende ---------- */
@media (min-width: 1040px) {
  .mp .kp-tiles { grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
}

/* ---------- Handy-Bausteine (am PC ausgeblendet) ---------- */
.mp-tabbar, .mp-zahlen { display: none; }
/* Testhinweis: Rahmen in AEX-Orange, Schrift im dunkleren Warnton — sonst zu blass zum Lesen */
.mp .mp-testhinweis { color: var(--mp-warn); }

/* ---------- Schmale Bildschirme: schlanker Kopf, Leiste unten, „Mehr“-Blatt ----------
   Früher lief die ganze Seitenleiste als waagrechte Scroll-Zeile durch den Kopf — am Handy
   nicht bedienbar. Jetzt: oben nur Logo, Firma und Testhinweis; die Ziele stehen in einer
   festen Leiste am unteren Rand, in Daumenreichweite. */
@media (max-width: 900px) {
  .mp-shell { grid-template-columns: 1fr; }
  /* Kein transform/filter auf der Seitenleiste: sie enthält die fest positionierte Leiste. */
  .mp-side { position: static; height: auto; display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: 10px 14px; border-right: 0; border-bottom: 1px solid var(--mp-linie-zart);
    padding: calc(10px + env(safe-area-inset-top)) 16px 12px; }
  .mp-brand { padding: 0; flex-direction: row; align-items: center; }
  .mp-brand__logo { height: 26px; }
  .mp-brand__sub { display: none; }
  .mp-firma { margin: 0; padding: 6px 12px; min-height: 44px; justify-content: center; justify-self: end;
    max-width: 100%; min-width: 0; }
  .mp-firma__wechsel { display: none; }
  .mp-firma__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mp-firma__liste { left: auto; right: 0; min-width: 240px; }
  .mp-testhinweis { grid-column: 1 / -1; margin: 0; padding: 7px 10px; font-size: 11.5px; }
  .mp-nav, .mp-side__foot { display: none; }

  .mp-body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mp-main { padding: 18px 16px 28px; gap: 16px; }
  .mp .kp-h1, .mp .kp-greet { font-size: 25px; }
  .mp-footer { padding: 14px 16px; }

  /* Leiste unten */
  .mp-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
    background: var(--mp-flaeche); border-top: 1px solid var(--mp-linie);
    box-shadow: 0 -10px 24px -20px rgba(13, 22, 38, .45); }
  .mp-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 3px 2px; border-radius: 12px; cursor: pointer; list-style: none;
    font: 600 10.5px/1.15 var(--font-sans); letter-spacing: -.005em; color: var(--mp-tinte-weich);
    text-decoration: none; text-align: center; -webkit-tap-highlight-color: transparent; }
  .mp-tab::-webkit-details-marker { display: none; }
  .mp-tab__icon { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px;
    transition: background-color .25s var(--mp-feder); }
  .mp-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; }
  .mp-tab.is-active { color: var(--mp-tab-aktiv, var(--mp-akzent)); }
  .mp-tab.is-active .mp-tab__icon { background: var(--mp-akzent-weich); }
  .mp-tab:focus-visible { outline: 2px solid var(--mp-akzent-hell); outline-offset: -2px; }

  /* „Mehr“: Blatt über der Leiste; ein Tipp daneben schließt es (Fläche gehört zum summary) */
  .mp-mehr > summary { list-style: none; }
  .mp-mehr[open] > summary { color: var(--mp-tab-aktiv, var(--mp-akzent)); }
  .mp-mehr[open] > summary .mp-tab__icon { background: var(--mp-akzent-weich); }
  .mp-mehr[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(8, 14, 24, .32); cursor: default; }
  .mp-mehr__blatt { position: fixed; z-index: 1; left: 10px; right: 10px;
    bottom: calc(70px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 120px); overflow-y: auto;
    display: flex; flex-direction: column; padding: 8px; border-radius: 18px; background: var(--mp-erhoben);
    box-shadow: 0 0 0 1px var(--mp-linie), var(--mp-schatten-hoch); }
  .mp-mehr__kopf { padding: 8px 12px 10px; font: 400 12.5px var(--font-sans); color: var(--mp-gedaempft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mp-mehr__kopf b { font-weight: 600; color: var(--mp-tinte); }
  .mp-mehr__link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px;
    border: 0; border-radius: 12px; background: none; cursor: pointer; text-align: left;
    font: 500 15px var(--font-sans); color: var(--mp-tinte); text-decoration: none; }
  .mp-mehr__link svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round; color: var(--mp-gedaempft); }
  .mp-mehr__link:active { background: var(--mp-akzent-weich); }
  .mp-mehr__link.is-active { background: var(--mp-akzent-weich); color: var(--mp-tab-aktiv, var(--mp-akzent)); font-weight: 600; }
  .mp-mehr__link.is-active svg { color: currentColor; }
  .mp-mehr__trenner { height: 1px; margin: 6px 12px; background: var(--mp-linie-zart); }
  .mp-mehr__fuss { display: flex; gap: 18px; padding: 10px 12px 6px; }
  .mp-mehr__fuss a { font: 400 12.5px var(--font-sans); color: var(--mp-gedaempft); text-decoration: none; }

  /* Zahlen: Umschalter Auswertungen / Offene Posten / Saldenliste */
  .mp-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px;
    border-radius: 13px; background: var(--mp-linie-zart); }
  .mp-zahlen a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 4px;
    border-radius: 10px; font: 600 13px var(--font-sans); color: var(--mp-tinte-weich); text-decoration: none;
    text-align: center; -webkit-tap-highlight-color: transparent; }
  .mp-zahlen a.is-active { background: var(--mp-flaeche); color: var(--mp-tinte);
    box-shadow: 0 1px 2px rgba(13, 22, 38, .10), 0 0 0 1px var(--mp-linie-zart); }
}

/* ---------- Dunkelmodus ---------- */
:root[data-theme="dark"] { /* Dunkelmodus vorerst aus (Emil 23.09.2026: erst Hellmodus fertig) — gleicher Schalter wie tokens.css */
  .mp {
    --mp-grund: #0a1018;
    --mp-flaeche: #111a26;
    --mp-erhoben: #141d2b;
    --mp-tinte: #e9eef6;
    --mp-tinte-weich: #b6c2d4;
    --mp-gedaempft: #8b9bb1;
    --mp-linie: rgba(255, 255, 255, .10);
    --mp-linie-zart: rgba(255, 255, 255, .07);
    --mp-akzent: #1c6ea8;
    --mp-akzent-hell: #4fb3d4;
    --mp-akzent-weich: rgba(79, 179, 212, .13);
    --mp-warn: #fb923c;
    --mp-tab-aktiv: var(--mp-akzent-hell);
    --mp-schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 24px -16px rgba(0, 0, 0, .9);
    --mp-schatten-hoch: 0 2px 6px rgba(0, 0, 0, .6), 0 26px 50px -24px rgba(0, 0, 0, 1);
    color-scheme: dark;
  }
  /* Logo unverändert: weiße Buchstaben auf blauen Kästchen tragen auch auf dunklem Grund.
     (Früher weiß eingefärbt — dann verschwanden die Buchstaben, übrig blieben drei Kästchen.) */
  .mp .kp-card, .mp .kp-tile, .mp .kp-chartbox { background: var(--mp-erhoben) !important; }
  .mp .kp-card__head { background: transparent !important; border-color: var(--mp-linie-zart) !important; }
  .mp .kp-card__title, .mp .kp-h1, .mp .kp-greet, .mp .kp-amount, .mp .kp-kpi__value,
  .mp .kp-stat__value, .mp .kp-sl__saldo, .mp .kp-sl__gsum, .mp .kp-tile__head,
  .mp .kp-tile__big, .mp .kp-deflist dd, .mp .kp-empty__title { color: var(--mp-tinte) !important; }
  .mp .kp-sub, .mp .kp-stand, .mp .kp-card__sub, .mp .kp-tile__desc, .mp .kp-tile__note,
  .mp .kp-deflist dt, .mp .kp-empty__text, .mp .kp-oprow--head { color: var(--mp-gedaempft) !important; }
  .mp .kp-text { color: var(--mp-tinte-weich) !important; }
  .mp .kp-oprow, .mp .kp-sl__group, .mp .kp-sl__acct { border-color: var(--mp-linie-zart) !important; }
}

/* ---------- Bewegung nur, wenn erwünscht ---------- */
@media (prefers-reduced-motion: reduce) {
  .mp .kp-card, .mp .kp-tile, .mp .kp-btn, .mp-nav__link, .mp .kp-oprow { transition: none; }
  .mp .kp-tile:hover, .mp .kp-tile:active, .mp .kp-btn:active { transform: none; }
}

/* ---------- Druck ---------- */
@media print {
  .mp-side, .mp-footer, .mp-skip { display: none !important; }
  .mp-shell { display: block; }
  .mp-main { max-width: none; padding: 0; }
  .mp .kp-card, .mp .kp-tile, .mp .kp-chartbox { box-shadow: none !important; border: .5pt solid #ccc !important; }
}

/* ---------- Saldenliste: Tabelle oder zweizeilig ----------
   Sechs feste Spalten brauchen ~905 px Listenbreite. Darunter werden dieselben Zellen zweizeilig
   angeordnet — oben Konto, Bezeichnung und Saldo, darunter klein Vorjahr, Soll und Haben.
   Entscheidet die Breite der LISTE, nicht die des Fensters: bei 1100 px Fensterbreite ragte die
   Saldo-Spalte sonst 119 px aus der Karte und wurde abgeschnitten (Fund 23.09.2026).
   Kontonamen brechen um statt mit „…“ zu enden — gekürzt stand „Maschinen und maschinelle Anla…“. */
.mp .kp-sl { container-type: inline-size; }
.mp .kp-sl__bez { white-space: normal; overflow: visible; text-overflow: clip; }
@container (max-width: 919px) {
  .mp .kp-sl .kp-slrow { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) max-content;
    gap: 4px 10px; align-items: start; padding: 11px 14px; font-size: 14px; }
  .mp .kp-sl .kp-slrow--head { display: none; }
  .mp .kp-sl .kp-slrow > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .mp .kp-sl .kp-slrow > :nth-child(2) { grid-column: 2 / 4; grid-row: 1; white-space: normal; overflow: visible; }
  .mp .kp-sl .kp-slrow > :nth-child(6) { grid-column: 4; grid-row: 1; }
  .mp .kp-sl .kp-slrow > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .mp .kp-sl .kp-slrow > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .mp .kp-sl .kp-slrow > :nth-child(5) { grid-column: 4; grid-row: 2; }
  .mp .kp-sl .kp-slrow > :nth-child(n+3):nth-child(-n+5) { text-align: left; font: 400 12px var(--font-sans);
    color: var(--mp-tinte-weich); }
  .mp .kp-sl .kp-slrow > :nth-child(n+3):nth-child(-n+5)::before { display: block; margin-bottom: 1px;
    font: 600 11px var(--font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--mp-gedaempft); }
  .mp .kp-sl .kp-slrow > :nth-child(3)::before { content: "Vorjahr"; }
  .mp .kp-sl .kp-slrow > :nth-child(4)::before { content: "Soll"; }
  .mp .kp-sl .kp-slrow > :nth-child(5)::before { content: "Haben"; }
  .mp .kp-sl .kp-sl__num--saldo { font-size: 14px; }
  .mp .kp-sl__fuss { padding: 12px 14px; }
}

/* ---------- Handy: Daumengröße, lesbare Kleinschrift, kein Zoom beim Antippen ----------
   Befunde der Messung vom 23.09.2026: Knöpfe mit 28–34 px Höhe, Hinweise in 10,5–11,5 px,
   Eingabefelder unter 16 px (das iPhone zoomt dann beim Antippen hinein), Begriff/Erklärung
   zweispaltig (Hilfe drückte die Seite auf 445 px Breite). */
@media (max-width: 900px) {
  .mp .kp-btn { height: auto; min-height: 44px; }
  .mp .kp-btn--sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .mp .kp-flt__chip { min-height: 40px; }
  .mp .kp-jahr > summary { min-height: 40px; }
  .mp select, .mp textarea,
  .mp input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
    min-height: 44px; font-size: 16px; }
  .mp .kp-stand, .mp .kp-flt__cnt, .mp .kp-pill--count, .mp .kp-hist__date, .mp .kp-ber__hash,
  .mp .kp-band-zeile__fuss, .mp .kp-rang__meta, .mp .kp-chip { font-size: 12px; }
  .mp .kp-deflist { grid-template-columns: 1fr; gap: 2px; }
  .mp .kp-deflist dd { margin-bottom: 12px; overflow-wrap: anywhere; }
  .mp .kp-deflist dd:last-child { margin-bottom: 0; }

  /* Checklisten-Position: vier Teile (Nummer, Titel, Status, Pfeil) in einer Zeile — die alte
     Handy-Regel hatte nur drei Spalten, der Pfeil rutschte unter die Nummer. */
  .mp .kp-cl__nr--link { display: inline-block; padding: 12px 0; }
  .mp .kp-cl__mid { padding: 9px 0; }
  .mp .kp-cl__pstatus .kp-pill { min-height: 34px; padding: 6px 12px; }
  .mp a.kp-cl__chev { width: 32px; height: 44px; }
  .mp .kp-pill--count, .mp span.nr { font-size: 12px; }
  /* Filterblock scrollt am Handy mit — festklebend verdeckte er ein Drittel des Bildschirms */
  .mp .kp-cl-spalte .kp-flt { position: static; margin: 0 0 10px; padding: 0; }
}

/* ---------- Zwei Karten nebeneinander (Altersstruktur / Rangliste) ---------- */
.kp-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .kp-zwei { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Balken für Anteile ---------- */
.kp-balken { height: 6px; border-radius: 999px; background: var(--mp-linie-zart); overflow: hidden; }
.kp-balken--schmal { height: 4px; }
.kp-balken__fuellung { height: 100%; border-radius: 999px; background: var(--mp-akzent-hell); }
.kp-balken__fuellung--warn { background: var(--mp-warn); }

.kp-baender { display: flex; flex-direction: column; gap: 15px; padding: 16px 18px 18px; }
.kp-band-zeile__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.kp-band-zeile__name { font: 500 13px var(--font-sans); color: var(--mp-tinte); }
.kp-band-zeile__betrag { font: 600 14px var(--font-mono); color: var(--mp-tinte); }
.kp-band-zeile__fuss { margin-top: 5px; font: 400 11.5px var(--font-sans); color: var(--mp-gedaempft); }

.kp-rangliste { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.kp-rang { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.kp-rang__name { font: 500 13px var(--font-sans); color: var(--mp-tinte);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-rang__betrag { grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font: 600 14px var(--font-mono); color: var(--mp-tinte); }
.kp-rang__meta { font: 400 11.5px var(--font-sans); color: var(--mp-gedaempft); }
.kp-rang .kp-balken { grid-column: 1 / -1; margin-top: 5px; }

/* ---------- Monatswerte: die Zahlen hinter dem Diagramm ---------- */
.kp-monate { display: flex; flex-direction: column; }
.kp-monate__zeile { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr; gap: 12px;
  padding: 10px 18px; align-items: center; font: 400 13px var(--font-sans); }
.kp-monate__zeile > div:not(:first-child) { text-align: right; }
.kp-monate__zeile + .kp-monate__zeile { border-top: 1px solid var(--mp-linie-zart); }
.kp-monate__zeile:not(.kp-monate__zeile--kopf):not(.kp-monate__zeile--fuss):hover { background: rgba(1, 141, 176, .045); }
.kp-monate__zeile--kopf { font: 600 11px var(--font-sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--mp-gedaempft); }
.kp-monate__zeile--fuss { font-weight: 600; border-top: 1px solid var(--mp-linie) !important;
  background: var(--mp-akzent-weich); border-radius: 0 0 var(--mp-radius) var(--mp-radius); }
.kp-monate__monat { font-weight: 500; color: var(--mp-tinte); }
.kp-monate__ergebnis { font-weight: 600; color: var(--mp-tinte); }
.kp-monate__vj { color: var(--mp-gedaempft); }

@media (max-width: 760px) {
  .kp-monate__zeile { grid-template-columns: 1fr 1fr 1fr; gap: 6px 10px; }
  .kp-monate__zeile > div:nth-child(5), .kp-monate__zeile > div:nth-child(6) { display: none; }
}

/* ---------- Unterlagen & Checklisten ---------- */
/* Warnmeldung (abgelehnter Dateityp, ungültiger Ordnername) — Orange nur für Warnungen */
.kp-meldung { background: var(--mp-flaeche); border-left: 3px solid #FC700B; border-radius: var(--mp-radius-klein);
  box-shadow: 0 0 0 1px var(--mp-linie-zart), var(--mp-schatten);
  padding: 12px 16px; font: 500 13px var(--font-sans); color: var(--mp-tinte); }

/* Prüfgebiets-Blöcke als <details>: Browser-Marker weg, Chevron dreht über [open] */
details.kp-cl__b > summary { list-style: none; cursor: pointer; }
details.kp-cl__b > summary::-webkit-details-marker { display: none; }
details.kp-cl__b > summary .kp-cl__chev svg { transition: transform .25s var(--mp-feder); }
details.kp-cl__b[open] > summary .kp-cl__chev svg { transform: rotate(90deg); }
.kp-cl__chev.is-open svg { transform: rotate(90deg); }

/* Positions-Mitte ist ein Link (Server öffnet/schließt über die URL) */
.kp-cl__mid { text-decoration: none; color: inherit; min-width: 0; display: block; }
.kp-cl__pstatus form { display: inline; }
.kp-cl__pstatus .kp-pill { cursor: pointer; border: 0; }
a.kp-cl__chev { display: inline-flex; align-items: center; justify-content: center; }

/* Upload im Positions-Panel: unaufgeregt, Dateiname lesbar */
.kp-drop input[type="file"] { font: 400 12.5px var(--font-sans); color: var(--mp-tinte-weich); max-width: 340px; }

/* Ablage-Kopf: Pfad links, Aktionen rechts */
.kp-ablage__kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--mp-linie-zart); }
.kp-ablage__kopf .kp-crumbs { flex: 1; min-width: 200px; }
.kp-ablage__aktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kp-ablage__upload { display: flex; align-items: center; gap: 8px; }
.kp-ablage__upload input[type="file"] { font: 400 12.5px var(--font-sans); color: var(--mp-tinte-weich); max-width: 240px; }

.kp-neuordner { position: relative; }
.kp-neuordner > summary { list-style: none; }
.kp-neuordner > summary::-webkit-details-marker { display: none; }
.kp-neuordner__form { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  display: flex; gap: 8px; background: var(--mp-flaeche); border-radius: var(--mp-radius-klein);
  box-shadow: 0 0 0 1px var(--mp-linie), var(--mp-schatten-hoch); padding: 10px; }
.kp-neuordner__form input { border: 1px solid var(--mp-linie); border-radius: 8px; padding: 7px 11px;
  font: 400 13px var(--font-sans); width: 210px; background: var(--mp-flaeche); color: var(--mp-tinte); }

/* Ordnerzeile ist ein Link */
a.kp-file { text-decoration: none; color: inherit; }
.kp-file__actions form { display: inline-flex; }
.kp-file__actions button, .kp-file__actions a { display: inline-flex; background: none; border: 0;
  cursor: pointer; padding: 5px; border-radius: 7px; color: var(--mp-gedaempft); }
.kp-file__actions button:hover, .kp-file__actions a:hover { background: var(--mp-akzent-weich); color: var(--mp-tinte); }

/* Verlauf: Positionsnummer hervorheben */
.kp-hist__text .nr { font: 600 11.5px var(--font-mono); color: var(--mp-akzent); }

/* Dunkelmodus-Feinheiten der Checkliste */
:root[data-theme="dark"] { /* Dunkelmodus vorerst aus (Emil 23.09.2026: erst Hellmodus fertig) — gleicher Schalter wie tokens.css */
  .mp .kp-cl__panel, .mp .kp-note__reply, .mp .kp-answer input, .mp .kp-note__form input,
  .mp .kp-neuordner__form input { background: var(--mp-flaeche); color: var(--mp-tinte); border-color: var(--mp-linie); }
  .mp .kp-cl__bereich { background: rgba(79, 179, 212, .10); color: var(--mp-tinte); border-color: var(--mp-linie-zart); }
  .mp .kp-cl__desc { background: rgba(255, 255, 255, .04); color: var(--mp-tinte-weich); }
  .mp .kp-note { background: rgba(79, 179, 212, .10); border-color: var(--mp-linie-zart); }
  .mp .kp-note__head { color: var(--mp-akzent-hell); }
  .mp .kp-note__text, .mp .kp-note__rtext, .mp .kp-cl__ptitle { color: var(--mp-tinte-weich); }
  .mp .kp-chip { background: rgba(255, 255, 255, .05); border-color: var(--mp-linie-zart); color: var(--mp-tinte-weich); }
  .mp .kp-drop { background: rgba(255, 255, 255, .03); border-color: var(--mp-linie); }
  .mp .kp-seg, .mp .kp-flt__chip, .mp .kp-flt__search { background: var(--mp-flaeche); border-color: var(--mp-linie); color: var(--mp-tinte-weich); }
  .mp .kp-flt { background: var(--mp-grund); }
  .mp .kp-files__head { color: var(--mp-gedaempft); }
}

@media (max-width: 1100px) {
  .kp-cl-layout { grid-template-columns: 1fr; }
  .kp-verlauf { position: static; }
}

/* ---------- Markenkopf: Logo und Produktname zentriert, Name fett ---------- */
.mp-brand { align-items: center; width: 100%; padding: 2px 0 20px; }
.mp-brand__logo { margin-inline: auto; }
.mp-brand__sub { font-weight: 800; letter-spacing: .24em; text-align: center; width: 100%; padding-left: 0; }

/* ---------- Firma-Dropdown (ein Zugang, mehrere Mandate) ---------- */
details.mp-firma--menu { position: relative; cursor: pointer; }
details.mp-firma--menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; }
details.mp-firma--menu > summary::-webkit-details-marker { display: none; }
details.mp-firma--menu > summary .mp-firma__label { flex: none; }
details.mp-firma--menu > summary .mp-firma__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.mp-firma--menu > summary svg { flex: none; color: var(--mp-gedaempft); transition: transform .25s var(--mp-feder); }
details.mp-firma--menu[open] > summary svg { transform: rotate(180deg); }
.mp-firma__liste { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  display: flex; flex-direction: column; background: var(--mp-flaeche); border-radius: 12px;
  box-shadow: 0 0 0 1px var(--mp-linie), var(--mp-schatten-hoch); padding: 6px; }
.mp-firma__eintrag { padding: 8px 10px; border-radius: 8px; font: 500 13px var(--font-sans);
  color: var(--mp-tinte); text-decoration: none; }
a.mp-firma__eintrag:hover { background: var(--mp-akzent-weich); }
.mp-firma__eintrag.is-active { background: var(--mp-akzent); color: #fff; }

/* ---------- Bereichs-/Stichtag-Segmente: Beschriftung exakt mittig ---------- */
.mp .kp-seg { align-items: stretch; }
.mp .kp-seg__opt { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* Prüfgebiets-Kopf in der Checkliste: hell wie die Tabellenköpfe statt dunkelblauem Balken */
.mp .kp-cl__block { background: var(--mp-kopf); border-top: 1px solid var(--mp-linie-zart);
  border-bottom: 1px solid var(--mp-linie-zart); }
.mp .kp-cl__block:hover { background: var(--mp-akzent-weich); }
.mp .kp-cl__block svg { stroke: var(--mp-gedaempft); }
.mp .kp-cl__bnr { color: var(--mp-gedaempft); }
.mp .kp-cl__bname { color: var(--mp-tinte); }
.mp .kp-cl__bcount { color: var(--mp-tinte-weich); }
.mp .kp-cl__bprog { background: var(--mp-linie); }
.mp .kp-cl__bprog span { background: var(--mp-akzent-hell); }

/* Umschalter (Bereiche WP/StB/LV, Forderungen/Verbindlichkeiten): am Handy gleich breite Felder,
   lange Namen brechen mit Silbentrennung um, statt über den Rand zu laufen */
@media (max-width: 900px) {
  .mp .kp-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-self: stretch; }
  .mp .kp-seg__opt { justify-content: center; text-align: center; padding: 9px 6px; line-height: 1.25;
    white-space: normal; hyphens: auto; overflow-wrap: anywhere; }
}

/* Checkliste + Verlauf: schmaleres Verlaufs-Panel, Liste bekommt den Platz — nur auf breiten
   Bildschirmen. Ohne die Bedingung überschrieb diese Regel die Einspaltigkeit von oben: am Handy
   blieb der Liste kaum Breite, und der Verlauf lag über den Filtern (Fund 23.09.2026). */
@media (min-width: 1101px) {
  .kp-cl-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* ---------- Antwort-Liste je Position (Cloud 0.67) ---------- */
.kp-ae { display: flex; flex-direction: column; gap: 8px; }
.kp-ae__eintrag { position: relative; background: rgba(1, 141, 176, .07);
  border: 1px solid rgba(1, 141, 176, .18); border-left: 3px solid var(--mp-akzent-hell);
  border-radius: 8px; padding: 8px 12px; }
.kp-ae__eintrag--kanzlei { background: #fdf6e3; border-color: #ecd9a8; border-left-color: #d4a017; }
.kp-ae__meta { font: 600 11.5px var(--font-sans); color: var(--mp-gedaempft); }
.kp-ae__eintrag--kanzlei .kp-ae__meta { color: #8a6d1a; }
.kp-ae__text { font: 400 13px/1.5 var(--font-sans); color: var(--mp-tinte); margin-top: 2px;
  overflow-wrap: anywhere; padding-right: 52px; }
.kp-ae__aktionen { position: absolute; top: 8px; right: 10px; display: flex; gap: 4px; }
.kp-ae__aktionen button, .kp-ae__edit > summary { display: inline-flex; background: none; border: 0;
  cursor: pointer; padding: 4px; border-radius: 6px; color: var(--mp-gedaempft); list-style: none; }
.kp-ae__edit > summary::-webkit-details-marker { display: none; }
.kp-ae__aktionen button:hover, .kp-ae__edit > summary:hover { background: var(--mp-akzent-weich); color: var(--mp-tinte); }
.kp-ae__edit .kp-note__form { margin-top: 0; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: 340px; background: var(--mp-flaeche); border-radius: 10px; padding: 10px;
  box-shadow: 0 0 0 1px var(--mp-linie), var(--mp-schatten-hoch); }

:root[data-theme="dark"] { /* Dunkelmodus vorerst aus (Emil 23.09.2026: erst Hellmodus fertig) — gleicher Schalter wie tokens.css */
  .kp-ae__eintrag { background: rgba(79, 179, 212, .10); border-color: rgba(79, 179, 212, .25); }
  .kp-ae__eintrag--kanzlei { background: rgba(212, 160, 23, .12); border-color: rgba(212, 160, 23, .35); border-left-color: #d4a017; }
  .kp-ae__eintrag--kanzlei .kp-ae__meta { color: #e0b94e; }
}

/* ---------- Positions-Beschreibung = Untertitel, kein Kommentar-Kasten ----------
   (Emil 2026-08-27: "schaut aus wie ein Kommentar, ist aber quasi der Untertitel") */
.mp .kp-cl__desc { background: none; border-left: 0; border-radius: 0; padding: 0;
  font: 400 13.5px/1.6 var(--font-sans); color: var(--mp-tinte-weich); }

/* ---------- Upload-Zonen: modernes Auswahlfeld + Drag-and-drop ---------- */
.kp-drop__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); border: 0; }
.kp-drop { transition: border-color .2s ease, background-color .2s ease; }
.kp-drop.is-drag { border-color: var(--mp-akzent-hell); background: var(--mp-akzent-weich); }
.kp-drop--zeile { flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 12px; margin: 14px 18px 4px; padding: 14px 18px; }
.kp-drop--zeile svg { color: var(--mp-gedaempft); flex: none; }
.kp-drop__ziel { margin-left: auto; font: 500 12px var(--font-sans); color: var(--mp-gedaempft); }
@media (max-width: 760px) { .kp-drop--zeile { flex-wrap: wrap; } .kp-drop__ziel { margin-left: 0; } }

/* Drop-Zone am Listenende (NC-Stil): gestrichelt, ganze Flaeche klickbar */
.kp-drop--unten { flex-direction: row; align-items: center; justify-content: center; gap: 12px;
  margin: 12px 18px 16px; padding: 0; background: transparent; }
.kp-drop__flaeche { display: flex; align-items: center; justify-content: center; gap: 10px;
  flex: 1; padding: 22px 16px; cursor: pointer; color: var(--mp-gedaempft);
  font: 400 13px var(--font-sans); border-radius: var(--mp-radius-klein); }
.kp-drop__flaeche b { color: var(--mp-akzent-hell); font-weight: 600; }
.kp-drop__flaeche:hover, .kp-drop--unten.is-drag .kp-drop__flaeche { color: var(--mp-tinte); }
.kp-drop__senden { margin-right: 12px; }

/* Stichtag-Dropdown der Ablage (Jahre wie in der AEX Cloud) */
details.kp-jahr { position: relative; }
details.kp-jahr > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; border: 1px solid var(--mp-linie); border-radius: var(--mp-radius-klein);
  background: var(--mp-flaeche); padding: 7px 12px; font: 600 13px var(--font-sans); color: var(--mp-tinte); }
details.kp-jahr > summary::-webkit-details-marker { display: none; }
details.kp-jahr > summary svg { color: var(--mp-gedaempft); transition: transform .25s var(--mp-feder); }
details.kp-jahr[open] > summary svg { transform: rotate(180deg); }
.kp-jahr__liste { position: absolute; z-index: 50; left: 0; top: calc(100% + 6px); min-width: 160px;
  display: flex; flex-direction: column; background: var(--mp-flaeche); border-radius: 10px;
  box-shadow: 0 0 0 1px var(--mp-linie), var(--mp-schatten-hoch); padding: 6px; }
.kp-jahr__eintrag { padding: 8px 12px; border-radius: 7px; font: 500 13px var(--font-sans);
  color: var(--mp-tinte); text-decoration: none; white-space: nowrap; }
a.kp-jahr__eintrag:hover { background: var(--mp-akzent-weich); }
.kp-jahr__eintrag.is-active { background: var(--mp-akzent); color: #fff; }

/* Segmente endgültig zentriert: alle Optionen bekommen dieselbe Box (feste Mindesthöhe,
   kein vertikales Padding), der Inhalt sitzt per Flex exakt in der Mitte — unabhängig
   davon, ob die Option ein Link oder die aktive <span>-Pille ist. */
.mp .kp-seg { display: inline-flex; align-items: stretch; }
.mp .kp-seg > a.kp-seg__opt,
.mp .kp-seg > span.kp-seg__opt {
  display: inline-flex; align-items: center; justify-content: center;
  padding-top: 0; padding-bottom: 0; min-height: 36px; line-height: 1.2;
}
.mp .kp-seg--dark > a.kp-seg__opt,
.mp .kp-seg--dark > span.kp-seg__opt { min-height: 32px; }

/* Filterleiste lebt IN der Checklisten-Spalte (schneidet den Verlauf nicht mehr ab);
   die Suche steht auf ihrer eigenen Zeile darunter. */
.kp-cl-spalte { min-width: 0; display: flex; flex-direction: column; }
.mp .kp-flt { position: sticky; top: 0; z-index: 20; background: var(--mp-grund);
  padding: 10px 0; margin: -10px 0 10px; }
.mp .kp-flt .kp-grow { flex-basis: 100%; order: 10; margin-top: 4px; }
.mp .kp-flt__search { width: 100%; }
.mp .kp-verlauf { top: 14px; }
.kp-hist__leer { font: 400 13px var(--font-sans); color: var(--mp-gedaempft); padding: 4px 2px; }

/* ---------- Testzugang (nur lokal, Seite existiert im Betrieb nicht) ---------- */
.kp-tz { max-width: 720px; margin: 0 auto; padding: 32px 20px 60px; display: flex; flex-direction: column; gap: 18px; }
.kp-tz__kopf { display: flex; align-items: center; gap: 14px; }
.kp-tz__titel { font: 800 20px var(--font-sans); color: var(--mp-text); }
.kp-tz__ort { font: 400 12.5px var(--font-sans); color: var(--mp-gedaempft); }
.kp-tz__form { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 20px; }
.kp-tz__form > label { display: flex; flex-direction: column; gap: 5px; }
.kp-tz__form > label > span { font: 600 12.5px var(--font-sans); color: var(--mp-gedaempft); }
.kp-tz__form input[type=text] { font: 400 14px var(--font-sans); padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--mp-rand); background: var(--mp-flaeche); color: var(--mp-text); }
.kp-tz__gruppe { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.kp-tz__gruppe legend { font: 600 12.5px var(--font-sans); color: var(--mp-gedaempft); padding: 0 0 6px; }
.kp-tz__wahl { display: inline-flex; align-items: center; gap: 7px; font: 400 13.5px var(--font-sans); color: var(--mp-text); cursor: pointer; }
.kp-tz__fuss { font: 400 12px var(--font-sans); color: var(--mp-gedaempft); }
.kp-tz__liste { display: flex; flex-direction: column; }
.kp-tz__zeile { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--mp-rand); }
.kp-tz__zeile > div:first-child { flex: 1 1 auto; min-width: 0; }
.kp-tz__name { font: 600 14px var(--font-sans); color: var(--mp-text); }
.kp-tz__meta { font: 400 12.5px var(--font-sans); color: var(--mp-gedaempft); }

/* ---------- Kanzlei-Übersicht (Gegenstück zum Übersichtsblatt der Cloud) ---------- */
.kp-kz-stats { margin-bottom: 16px; }
.kp-kz-stats .kp-stat__value.is-warn { color: var(--status-auffaellig-fg, #FC700B); }
/* Die Klientenliste braucht die volle Breite (sieben Spalten, ~900 px). „Letzte Aktivität“ steht erst
   daneben, wenn beides Platz hat, sonst darunter — vorher musste man die Tabelle am PC seitlich schieben. */
@media (max-width: 1659px) {
  .kp-cl-layout.kp-kz-layout { grid-template-columns: minmax(0, 1fr); }
  .kp-kz-layout .kp-verlauf { position: static; }
}
/* Seitenkopf: Überschrift links, „Neuer Klient“ rechts — auch am Handy in einer Zeile */
.mp .kp-kz-kopf { flex-direction: row; align-items: center; justify-content: space-between; }
/* Kopf der Klientenliste: Suche, daneben Bereichswahl und „Nur meine“. Wird es zu eng, rutschen
   Bereichswahl und Häkchen GEMEINSAM in die zweite Zeile — nie ein Element allein (Emil 23.09.2026). */
.kp-kz-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px;
  border-bottom: 1px solid var(--mp-linie-zart); }
.kp-kz-filter__suche { flex: 1 1 220px; }
.kp-kz-filter__suche input { width: 100%; min-height: 38px; font: 400 13.5px var(--font-sans); padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--mp-linie); background: var(--mp-flaeche); color: var(--mp-text); }
.kp-kz-filter__wahl { display: flex; align-items: center; gap: 16px; }
@media (min-width: 901px) {
  .mp .kp-kz-filter__bereich > .kp-seg__opt { padding-left: 14px; padding-right: 14px; font-size: 13.5px; }
}
.kp-kz-meine { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font: 500 13.5px var(--font-sans);
  color: var(--mp-tinte-weich); text-decoration: none; white-space: nowrap; }
.kp-kz-meine__box { position: relative; flex: none; width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--mp-gedaempft); background: var(--mp-flaeche); }
.kp-kz-meine:hover .kp-kz-meine__box { border-color: var(--mp-akzent-hell); }
.kp-kz-meine.is-active { color: var(--mp-tinte); }
.kp-kz-meine.is-active .kp-kz-meine__box { background: var(--mp-akzent); border-color: var(--mp-akzent); }
.kp-kz-meine.is-active .kp-kz-meine__box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kp-kz-neu { margin-left: auto; }
.kp-kz-neu > summary { list-style: none; }
.kp-kz-neu > summary::-webkit-details-marker { display: none; }
/* Feste Breite (am Handy Bildschirm minus Rand): sonst richtet sich das Aufklappformular nach
   seinem breitesten Feld und ragt am Handy aus dem Bild */
.kp-kz-neu__form { display: flex; flex-direction: column; gap: 10px; min-width: 300px; width: min(360px, calc(100vw - 48px)); }
.kp-kz-neu__form > label { display: flex; flex-direction: column; gap: 4px; }
.kp-kz-neu__form > label > span { font: 600 12px var(--font-sans); color: var(--mp-gedaempft); }
.kp-kz-neu__form input, .kp-kz-neu__form select { width: 100%; font: 400 13.5px var(--font-sans); padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--mp-linie); background: var(--mp-flaeche); color: var(--mp-text); }
/* Häkchen behalten ihre natürliche Größe — die allgemeine Regel für Aufklappformulare gab jedem
   Eingabefeld 210 px, drei Häkchen blähten „Neuer Klient“ auf ~750 px auf */
.kp-kz-neu__form input[type=checkbox] { width: auto; padding: 0; margin: 0; }
.kp-kz-neu__form fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 14px; align-items: center; }
.kp-kz-neu__form legend { font: 600 12px var(--font-sans); color: var(--mp-gedaempft); padding: 0 0 4px; }
.kp-kz-neu__wahl { display: inline-flex; align-items: center; gap: 6px; font: 400 13.5px var(--font-sans); }

/* Ob Tabelle oder Karten, entscheidet die Breite der LISTE (Container-Abfrage unten), nicht die des
   Fensters — daneben stehen je nach Bildschirm Seitenleiste und „Letzte Aktivität“. Bewusst ohne
   overflow: das schnitt die aufklappenden Formulare (Betreuung, neuer Stichtag) ab. */
.kp-kz-tab { display: flex; flex-direction: column; container-type: inline-size; }
.kp-kz-tab__head, .kp-kz-row { display: grid; grid-template-columns: minmax(180px, 2fr) 78px 140px 125px minmax(130px, 1fr) 96px 88px;
  gap: 10px; align-items: center; padding: 10px 16px; }
.kp-kz-tab__head { font: 600 12px var(--font-sans); color: var(--mp-gedaempft); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--mp-rand); }
.kp-kz-row { border-bottom: 1px solid var(--mp-rand); font: 400 13.5px var(--font-sans); color: var(--mp-text); }
.kp-kz-row:last-child { border-bottom: 0; }
.kp-kz-row:hover { background: var(--mp-hover, rgba(1, 52, 107, .04)); }
.kp-kz-row.has-open .kp-kz-row__name { font-weight: 700; }
.kp-kz-row.is-idle { opacity: .7; }
.kp-kz-row__klient { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; min-width: 0; }
.kp-kz-row__nr { font: 500 12px var(--font-mono, monospace); color: var(--mp-gedaempft); }
.kp-kz-row__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-kz-row__sub { font: 400 12px var(--font-sans); color: var(--mp-gedaempft); }
.kp-kz-row__pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kp-kz-row__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.kp-kz-tag { display: inline-block; font: 700 10.5px var(--font-sans); letter-spacing: .03em; padding: 2px 6px; border-radius: 5px;
  background: rgba(1, 141, 176, .12); color: var(--mp-akzent-hell); }
.kp-kz-tag--stb { background: rgba(1, 52, 107, .12); color: var(--mp-akzent); }
.kp-kz-tag--lv { background: rgba(122, 190, 211, .28); color: var(--mp-akzent); }
.kp-kz-muted { color: var(--mp-gedaempft); font-size: 12.5px; }
.kp-kz-betreuer { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font: 500 13px var(--font-sans); }
.kp-kz-betreuer::-webkit-details-marker { display: none; }
.kp-kz-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--mp-akzent); color: #fff; font: 700 11px var(--font-sans); }
.kp-kz-row__stichtag { display: flex; align-items: center; gap: 8px; }
.kp-kz-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--mp-rand); color: var(--mp-gedaempft); cursor: pointer; list-style: none; font: 600 14px var(--font-sans); }
.kp-kz-plus::-webkit-details-marker { display: none; }
.kp-kz-plus:hover { color: var(--mp-akzent-hell); border-color: var(--mp-akzent-hell); }
.kp-kz-row__fortschritt { display: flex; flex-direction: column; gap: 4px; }
.kp-kz-bar { height: 6px; border-radius: 3px; background: rgba(1, 52, 107, .1); overflow: hidden; }
.kp-kz-bar__fill { height: 100%; background: var(--mp-akzent-hell); border-radius: 3px; }
.kp-kz-pct { font: 400 12.5px var(--font-sans); color: var(--mp-text); }
.kp-kz-pending { font: 600 12.5px var(--font-sans); color: #b7791f; }
.kp-kz-badge { white-space: nowrap; }
.kp-kz-row__zeit { font: 400 12.5px var(--font-sans); color: var(--mp-gedaempft); }
.kp-hist--link { display: block; color: inherit; text-decoration: none; border-radius: 8px; }
.kp-hist--link:hover { background: var(--mp-hover, rgba(1, 52, 107, .04)); }
/* Schmale Liste (unter den ~930 px, die die sieben Spalten brauchen): je Klient eine Karte.
   Oben Klient und „Zuletzt“, darunter Bereiche und Stichtag, der Fortschritt über die volle
   Breite, unten Betreuer und Rückfragen. (Vorher lief die Liste am Handy rechts aus dem Bild,
   am PC neben „Letzte Aktivität“ musste man sie seitlich schieben.) */
@container (max-width: 939px) {
  .kp-kz-tab__head { display: none; }
  .kp-kz-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 16px;
    grid-template-areas: "klient zeit" "tags stichtag" "fortschritt fortschritt" "betreuer rueck"; }
  .kp-kz-row > :nth-child(1) { grid-area: klient; }
  .kp-kz-row > :nth-child(2) { grid-area: tags; }
  .kp-kz-row > :nth-child(3) { grid-area: betreuer; }
  .kp-kz-row > :nth-child(4) { grid-area: stichtag; justify-self: end; }
  .kp-kz-row > :nth-child(5) { grid-area: fortschritt; }
  .kp-kz-row > :nth-child(6) { grid-area: rueck; justify-self: end; }
  .kp-kz-row > :nth-child(7) { grid-area: zeit; justify-self: end; align-self: start; }
  .kp-kz-row__name { white-space: normal; }
}
@media (max-width: 900px) {
  /* Listenkopf: Suche über die volle Breite, darunter Bereichswahl (gleich breite Felder) und Häkchen */
  .kp-kz-filter__wahl { flex: 1 1 100%; gap: 14px; }
  .kp-kz-filter__bereich { flex: 1 1 auto; }
  .kp-kz-filter__bereich > .kp-seg__opt { flex: 1 1 0; }
  .kp-kz-meine { min-height: 44px; }
  .kp-kz-tag { font-size: 12px; padding: 3px 8px; }
  .kp-kz-avatar { width: 28px; height: 28px; font-size: 12px; }
  .kp-kz-betreuer { min-height: 40px; }
  .kp-kz-plus { width: 40px; height: 40px; font-size: 18px; }
  /* Kennzahlen: zwei Reihen à drei statt sechs Zeilen untereinander */
  .mp .kp-kz-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  .mp .kp-kz-stats .kp-stat { border: 0; border-top: 1px solid var(--mp-linie-zart); padding: 12px 12px 14px; }
  .mp .kp-kz-stats .kp-stat:nth-child(-n+3) { border-top: 0; }
  .mp .kp-kz-stats .kp-stat:not(:nth-child(3n+1)) { border-left: 1px solid var(--mp-linie-zart); }
  .mp .kp-kz-stats .kp-stat__label { font-size: 12px; line-height: 1.25; }
  .mp .kp-kz-stats .kp-stat__value { font-size: 22px; }
}

/* ---------- Kanzlei-Modus in der Checkliste (Vorbereitung, Nicht notwendig, Freigabe) ---------- */
.kp-cl__pos--vorbereitung { background: #fdf6e3; }
.kp-cl__pos--nn .kp-cl__ptitle { text-decoration: line-through; color: var(--mp-gedaempft); }
.kp-pill--vorbereitung { background: #fdf6e3; color: #8a5a00; border: 1px solid #ecd9a8; }
.kp-pill--nn { background: var(--aex-neutral-100, #eef0f3); color: var(--mp-gedaempft); }
.kp-typ { display: inline-block; font: 700 10px var(--font-sans); letter-spacing: .04em; padding: 1px 6px; border-radius: 5px;
  background: rgba(1, 141, 176, .10); color: var(--mp-akzent-hell); margin-left: 6px; vertical-align: middle; }
.kp-statuswahl > summary { list-style: none; cursor: pointer; }
.kp-statuswahl > summary::-webkit-details-marker { display: none; }
.kp-statuswahl__liste { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 170px; }
.kp-statuswahl__liste .kp-pill { justify-content: center; cursor: pointer; border: 0; }
.kp-statuswahl__liste .kp-pill.is-current { outline: 2px solid var(--mp-akzent-hell); outline-offset: 1px; }
.kp-cl__kanzlei { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 16px 8px 44px; }
.kp-flt__chip--aktion { background: var(--mp-akzent-hell); color: #fff; border-color: var(--mp-akzent-hell); cursor: pointer; }
.kp-flt__chip--aktion .kp-flt__cnt { background: rgba(255, 255, 255, .25); color: #fff; }
.kp-kanzleihinweis { background: #fdf6e3; border: 1px solid #ecd9a8; border-left: 3px solid #d4a017; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; font: 500 13.5px var(--font-sans); color: #6b4a00; }
.kp-btn--gefahr { background: var(--status-auffaellig-fg, #b42318); border-color: transparent; }
.kp-note__form--neu { margin-bottom: 10px; }

/* ---------- Kanzlei-Werkzeuge auf Zugänge, Rückmeldungen, Abschluss & Erklärungen ---------- */
.kp-zg__kanzlei { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.kp-zg__aktionen { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; flex-wrap: wrap; }
.kp-vs__kanzlei { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.kp-vs__kanzlei .kp-note__form { flex: 1 1 320px; margin: 0; }
.kp-ber__neu { display: grid; grid-template-columns: 110px 190px 1fr; gap: 12px; padding: 14px 18px 18px; align-items: end; }
.kp-ber__neu > label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-ber__neu > label > span { font: 600 12px var(--font-sans); color: var(--mp-gedaempft); }
.kp-ber__neu input[type=text], .kp-ber__neu select, .kp-ber__neu input[type=file] { font: 400 13.5px var(--font-sans); padding: 7px 10px;
  border-radius: 8px; border: 1px solid var(--mp-rand); background: var(--mp-flaeche); color: var(--mp-text); }
.kp-ber__neu--breit { grid-column: 1 / -1; }
.kp-ber__neu .kp-wahl { grid-column: 1 / 3; align-self: center; }
@media (max-width: 760px) { .kp-ber__neu { grid-template-columns: 1fr; } .kp-ber__neu--breit, .kp-ber__neu .kp-wahl { grid-column: auto; } }

/* ---------- Dateiliste je Position (Cloud 0.70) ---------- */
.kp-dl { border: 1px solid var(--mp-rand); border-radius: 10px; overflow: hidden; margin: 6px 0 10px; }
.kp-dl__kopf { font: 600 12px var(--font-sans); color: var(--mp-gedaempft); text-transform: uppercase; letter-spacing: .04em;
  padding: 7px 12px; background: rgba(1, 52, 107, .04); border-bottom: 1px solid var(--mp-rand); }
.kp-dl__zeile { display: grid; grid-template-columns: 44px minmax(0, 1fr) 190px 64px 88px; gap: 10px; align-items: center;
  padding: 7px 12px; border-bottom: 1px solid var(--mp-rand); font: 400 13px var(--font-sans); }
.kp-dl__zeile:hover { background: var(--mp-hover, rgba(1, 52, 107, .04)); }
.kp-dl__zeile--kanzlei { background: rgba(212, 160, 23, .06); }
.kp-dl__typ { font: 700 10px var(--font-sans); letter-spacing: .04em; text-align: center; padding: 2px 0; border-radius: 5px;
  background: rgba(1, 141, 176, .12); color: var(--mp-akzent-hell); }
.kp-dl__name { color: var(--mp-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-dl__name:hover { text-decoration: underline; }
.kp-dl__meta { font-size: 12px; color: var(--mp-gedaempft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-dl__groesse { font: 400 12px var(--font-mono, monospace); color: var(--mp-gedaempft); text-align: right; }
.kp-dl__aktionen { display: flex; gap: 10px; justify-content: flex-end; color: var(--mp-gedaempft); opacity: 0; transition: opacity .15s; }
.kp-dl__zeile:hover .kp-dl__aktionen, .kp-dl__zeile:focus-within .kp-dl__aktionen { opacity: 1; }
.kp-dl__aktionen a, .kp-dl__aktionen button, .kp-dl__aktionen summary { display: inline-flex; color: inherit; background: none; border: 0;
  cursor: pointer; padding: 0; list-style: none; }
.kp-dl__aktionen summary::-webkit-details-marker { display: none; }
.kp-dl__mehr > summary { font: 500 12.5px var(--font-sans); color: var(--mp-akzent-hell); cursor: pointer; padding: 7px 12px;
  border-bottom: 1px solid var(--mp-rand); list-style: none; }
.kp-dl__mehr > summary::-webkit-details-marker { display: none; }
.kp-dl__mehr[open] > summary { color: var(--mp-gedaempft); }
.kp-dl__drop { border: 0; border-radius: 0; margin: 0; padding: 6px 12px; display: flex; align-items: center; gap: 10px; }
.kp-dl__drop .kp-drop__flaeche { padding: 6px 0; }
.kp-cl__nr--link { text-decoration: none; }
.kp-cl__nr--link:hover { color: var(--mp-akzent-hell); text-decoration: underline; }
@media (max-width: 900px) { .kp-dl__zeile { grid-template-columns: 44px minmax(0, 1fr) 88px; } .kp-dl__meta, .kp-dl__groesse { display: none; } }

/* ---------- Ladebalken der fluessigen Navigation (nav.js) ---------- */
.kp-laden { position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%; z-index: 90;
  transform: scaleX(0); transform-origin: 0 50%; background: var(--mp-akzent-hell);
  opacity: 0; pointer-events: none; }
.kp-laden.is-an { opacity: 1; transform: scaleX(.85); transition: transform 1.6s cubic-bezier(.2,.8,.3,1), opacity .15s; }
@media (prefers-reduced-motion: reduce) { .kp-laden.is-an { transition: none; } }

/* Hauptpunkte (1, 3, 5, ...) ebenfalls einklappbar */
details.kp-cl__h > summary { list-style: none; cursor: pointer; }
details.kp-cl__h > summary::-webkit-details-marker { display: none; }
details.kp-cl__h > summary .kp-cl__chev svg { transition: transform .25s var(--mp-feder); }
details.kp-cl__h[open] > summary .kp-cl__chev svg { transform: rotate(90deg); }
details.kp-cl__h > summary.kp-cl__group { align-items: center; gap: 8px; }

/* ---------- Zugaenge & Sichtbarkeit (Whitelist des Hauptnutzers) ---------- */
.kp-zg { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 20px; align-items: start; }
.kp-zg__kopf { display: flex; align-items: center; gap: 12px; }
.kp-zg__kopf .kp-pill, .kp-zg__entfernen { margin-left: auto; }
.kp-zg__form { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
.kp-zg__gruppe { border: 1px solid var(--mp-linie-zart); border-radius: var(--mp-radius-klein);
  padding: 10px 12px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.kp-zg__gruppe legend { font: 600 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mp-gedaempft); padding: 0 6px; }
.kp-wahl { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--mp-linie);
  border-radius: 999px; padding: 6px 12px; font: 500 12.5px var(--font-sans); color: var(--mp-tinte);
  cursor: pointer; background: var(--mp-flaeche); }
.kp-wahl:hover { background: var(--mp-akzent-weich); }
.kp-wahl--alle { border-style: dashed; font-weight: 600; }
.kp-wahl input { accent-color: var(--mp-akzent-hell); }
.kp-zg__hinweis { flex-basis: 100%; font: 400 11.5px var(--font-sans); color: var(--mp-gedaempft); }
.kp-zg__fuss { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.kp-zg__anfrage { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.kp-zg__anfrage input { border: 1px solid var(--mp-linie); border-radius: 8px; padding: 8px 11px;
  font: 400 13px var(--font-sans); background: var(--mp-flaeche); color: var(--mp-tinte); min-width: 220px; }
.kp-zg__anfrage .kp-form__label { display: block; margin-bottom: 4px; font: 600 11.5px var(--font-sans); color: var(--mp-gedaempft); }
.kp-zg__offen { border-top: 1px solid var(--mp-linie-zart); padding: 12px 18px 16px;
  display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 900px) {
  .kp-zg { grid-template-columns: 1fr; }
  /* Kopf der Zugangs-Karte: Name und Status oben, die Knöpfe darunter als 2×2-Raster
     (in einer Zeile liefen sie am Handy rechts aus dem Bild, Seite 465 px breit) */
  .kp-zg__kopf { flex-wrap: wrap; }
  .kp-zg__kanzlei { flex-basis: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kp-zg__kanzlei form { display: flex !important; }
  .kp-zg__kanzlei .kp-btn { width: 100%; white-space: normal; line-height: 1.2; }
  .kp-zg__entfernen { margin-left: 0; flex-basis: 100%; }
  .kp-zg__entfernen .kp-btn { width: 100%; }
  /* Ankreuz-Felder: das ganze Feld ist die Tippfläche */
  .kp-wahl { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .kp-wahl input { width: 18px; height: 18px; }
  .kp-zg__gruppe legend, .kp-zg__hinweis, .kp-zg__anfrage .kp-form__label { font-size: 12px; }
}

/* ---------- Abschluss & Erklaerungen ---------- */
.kp-ber { display: flex; align-items: flex-start; gap: 14px; padding: 15px 18px; }
.kp-ber + .kp-ber { border-top: 1px solid var(--mp-linie-zart); }
.kp-ber__icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--mp-akzent-weich); color: var(--mp-akzent-hell); margin-top: 2px; }
.kp-ber__mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.kp-ber__titel { font: 600 14px var(--font-sans); color: var(--mp-tinte);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kp-ber__sub { font: 400 12px var(--font-sans); color: var(--mp-gedaempft); }
.kp-ber__laden { flex: none; align-self: center; }
.kp-ber__signiert { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px;
  font: 600 12.5px var(--font-sans); color: #157347; }
.kp-ber__hash { font: 500 11px var(--font-mono); color: var(--mp-gedaempft); cursor: help; }
.kp-ber__wartet { font: 500 12.5px var(--font-sans); color: var(--mp-gedaempft); }
.kp-ber__signieren { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
:root[data-theme="dark"] { .kp-ber__signiert { color: #4ade80; } }

/* Aktions-Popover rechtsbuendig (Umbenennen/Verschieben in der Dateizeile) */
.kp-neuordner__form--rechts { left: auto; right: 0; }
.kp-file__actions .kp-neuordner > summary { display: inline-flex; padding: 5px; border-radius: 7px;
  color: var(--mp-gedaempft); cursor: pointer; }
.kp-file__actions .kp-neuordner > summary:hover { background: var(--mp-akzent-weich); color: var(--mp-tinte); }
.kp-neuordner__form select { border: 1px solid var(--mp-linie); border-radius: 8px; padding: 7px 10px;
  font: 400 13px var(--font-sans); background: var(--mp-flaeche); color: var(--mp-tinte); min-width: 170px; }

/* ---------- Checkliste: alle Nummern auf einer Linie, Titel auf einer zweiten ----------
   Emil 23.09.2026: „Nummerierung gerader“. Gruppe, Prüfgebiet und Position nutzen dieselben
   Spalten — Pfeil · Nummer · Titel. Positionen haben links keinen Pfeil und rücken um die
   Pfeilspalte ein; ihre Nummer steht auf Höhe der ersten Titelzeile, nicht mittig. */
.mp details.kp-cl__h > summary.kp-cl__group { display: grid; grid-template-columns: 18px 52px minmax(0, 1fr);
  align-items: baseline; gap: 10px; padding: 12px 20px; }
.mp .kp-cl__group .kp-cl__chev { align-self: center; }
.mp .kp-cl__gnr { font: 600 14.5px var(--font-sans); color: var(--mp-tinte); }
.mp .kp-cl__block { grid-template-columns: 18px 52px minmax(0, 1fr) 120px 56px; gap: 10px; padding: 10px 20px; }
.mp .kp-cl__pos { grid-template-columns: 52px minmax(0, 1fr) 116px 28px; gap: 10px; align-items: baseline;
  padding: 13px 20px 13px 48px; }
.mp .kp-cl__pos > .kp-cl__chev { align-self: center; }

@media (max-width: 900px) {
  .mp details.kp-cl__h > summary.kp-cl__group { grid-template-columns: 16px 44px minmax(0, 1fr); gap: 8px; padding: 12px; }
  .mp .kp-cl__block { grid-template-columns: 16px 44px minmax(0, 1fr) 56px; gap: 8px; padding: 9px 12px; }
  /* Vier Spalten, also ohne Fortschrittsbalken — portal.css blendet ihn erst unter 761 px aus;
     dazwischen rutschte der Zähler „2/3“ in eine zweite Zeile unter den Pfeil (Fund 23.09.2026) */
  .mp .kp-cl__block > .kp-cl__bprog { display: none; }
  /* Status unter den Titel: der Titel bekommt die Breite, die Nummern bleiben auf ihrer Linie */
  .mp .kp-cl__pos { grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 2px 8px; padding: 6px 4px 10px 36px; }
  .mp .kp-cl__pos > .kp-cl__nr { grid-column: 1; grid-row: 1; }
  .mp .kp-cl__pos > .kp-cl__mid { grid-column: 2; grid-row: 1; }
  .mp .kp-cl__pos > .kp-cl__pstatus { grid-column: 2; grid-row: 2; text-align: left; }
  .mp .kp-cl__pos > .kp-cl__chev { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- Einheitliche Beträge und Listen (Durchsicht 23.09.2026) ----------
   Ein Prüflauf über alle Seiten bei 390, 768, 1100, 1280 und 1440 px fand umbrechende Beträge,
   abgeschnittene Tabellen und gekürzte Namen. Beträge setzt PortalPageModel.Euro mit geschütztem
   Leerzeichen; die Regeln hier sorgen dafür, dass jede Anordnung sie ganz zeigt. */

/* Kurzliste der Startseite (Überfällige Forderungen): zweizeilig statt dreispaltig — oben Name und
   Betrag, darunter Beleg und Fälligkeit. In der schmalen Karte stand das €-Zeichen sonst allein
   über dem Betrag (Fund Emil). */
.mp .kp-mini__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 3px;
  align-items: baseline; }
.mp .kp-mini__name { grid-row: 1; grid-column: 1; }
.mp .kp-mini__amount { grid-row: 1; grid-column: 2; margin-left: 0; white-space: nowrap; }
.mp .kp-mini__meta { grid-column: 1 / -1; }
.mp .kp-mini__summe { margin-left: auto; font: 600 15.5px var(--font-mono); color: var(--mp-warn); white-space: nowrap; }

/* Kennzahlenleiste (Auswertungen): nebeneinander, solange jeder Betrag in eine Zeile passt;
   sonst das Ergebnis über die volle Breite und die übrigen Kennzahlen zu zweit. Vorher brachen
   die Beträge um, bei 768 px ragte die Leiste 39 px aus der Karte. Trennlinien als Schatten nach
   links und oben — am Kartenrand schneidet overflow sie ab, so entsteht in jeder Anordnung genau
   ein Gitter zwischen den Feldern. Die Kanzlei-Kennzahlen haben ihr eigenes Raster. */
.mp .kp-stats:not(.kp-kz-stats) { container-type: inline-size; flex-direction: row; flex-wrap: wrap;
  padding: 0; overflow: hidden; }
.mp .kp-stats:not(.kp-kz-stats) > .kp-stat { border: 0; box-shadow: -1px 0 0 var(--mp-linie-zart), 0 -1px 0 var(--mp-linie-zart); }
.mp .kp-stats:not(.kp-kz-stats) .kp-stat__value { white-space: nowrap; }
@container (max-width: 939px) {
  .mp .kp-stats:not(.kp-kz-stats) > .kp-stat { flex: 1 1 50%; padding: 14px 16px; }
  .mp .kp-stats:not(.kp-kz-stats) > .kp-stat--hero { flex-basis: 100%; }
  .mp .kp-stats:not(.kp-kz-stats) .kp-stat__value { font-size: 22px; }
  .mp .kp-stats:not(.kp-kz-stats) .kp-stat--hero .kp-stat__value { font-size: 26px; }
}

/* Prüfgebietsnamen der Checkliste brechen um statt mit „…“ zu enden
   („Forderungen aus Lieferungen un…“) */
.mp .kp-cl__bname { white-space: normal; overflow: visible; text-overflow: clip; }

/* Abschluss & Erklärungen: die Knöpfe einer Zeile sind eine Gruppe — am PC rechts neben dem Text
   (höchstens die halbe Zeile, darin umbrechend), am Handy unter dem Text und bündig mit ihm.
   Nebeneinander blieben dem Titel am Handy 25 px, der Text lief unter „Ansehen“. Lange
   Dateinamen brechen um (break-word — „anywhere“ rechnete den Text schmaler als nötig). */
.kp-ber__titel, .kp-ber__sub { overflow-wrap: break-word; }
.kp-ber__aktionen { flex: 0 1 auto; max-width: 50%; display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: center; align-self: center; gap: 8px; }
@media (max-width: 900px) {
  .kp-ber { flex-wrap: wrap; row-gap: 10px; }
  .kp-ber__mitte { flex-basis: calc(100% - 52px); }
  .kp-ber__aktionen { flex-basis: 100%; max-width: none; justify-content: flex-start; padding-left: 52px; }
}

/* „Ihre letzten Zugriffe“ (Konto & Sicherheit): eigenes Raster mit drei Spalten. Die Liste lieh
   sich das Raster der Offenen Posten — die Details bekamen dort eine Datumsspalte, und am Handy
   blendete die OP-Regel „Tabelle aus, Karten an“ die ganze Liste aus (es gibt hier keine Karten).
   Schmal: oben Vorgang und Zeitpunkt, darunter die Details. */
.mp .kp-zugriffe { container-type: inline-size; }
.mp .kp-zugriffe .kp-oprow { grid-template-columns: 150px minmax(120px, 1fr) minmax(0, 1.6fr); }
.mp .kp-zugriffe .kp-oprow__beleg { overflow-wrap: anywhere; }
@container (max-width: 559px) {
  .mp .kp-zugriffe .kp-oprow { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 16px; }
  .mp .kp-zugriffe .kp-oprow--head { display: none; }
  .mp .kp-zugriffe .kp-oprow > :nth-child(1) { grid-column: 2; grid-row: 1; font-size: 12px; color: var(--mp-gedaempft);
    white-space: nowrap; }
  .mp .kp-zugriffe .kp-oprow > :nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; color: var(--mp-tinte); }
  .mp .kp-zugriffe .kp-oprow > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; }
}

/* „Elektronisch bestätigt …“: Häkchen in der Textzeile. Als Flex-Reihe mit Umbruch stand das
   Häkchen am Handy allein über dem Text. */
.kp-ber__signiert { display: block; }
.kp-ber__signiert > svg { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.kp-ber__signiert > .kp-ber__hash { margin-left: 8px; white-space: nowrap; }

/* „Alle offenen Posten ansehen →“ am Kartenfuß: am Handy daumengroß (war 18 px hoch) */
@media (max-width: 900px) {
  .mp .kp-mini__foot a { display: inline-flex; align-items: center; min-height: 40px; }
  .mp .kp-mini__foot { padding-top: 4px; padding-bottom: 4px; }
}