/* ==========================================================================
   S5 LEO · DESIGN-TOKENS (aus der abgenommenen Dashboard-Vorlage)
   ========================================================================== */
:root{
  --ls-fertig:#0F6B63;      /* Petrol – abgeschlossene (voll getilgte) Forderungen */
  --papier:#F7F6F3; --karte:#FFFFFF;
  --tinte:#16181C; --tinte-2:#5A6069; --kontext:#AEB4BC; --linie:#E3E1DB;
  --ls-forderung:#1E5AA8; --ls-mahnung:#C77F0A; --ls-zahlung:#2E7D4F;
  --ls-recht:#8C2332; --ls-stamm:#5A6069;
  --akzent:#1E5AA8; --radius:6px;
  --schrift-ui:'IBM Plex Sans',system-ui,sans-serif;
  --schrift-leit:'Archivo',sans-serif;
  --schrift-zahl:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px}
body{font-family:var(--schrift-ui);background:var(--papier);color:var(--tinte);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--ls-forderung);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a{color:var(--akzent)}

/* ---------- Kopfzeile ---------- */
.kopf{background:var(--tinte);color:#F2F1EE;display:flex;align-items:center;gap:24px;padding:0 24px;height:56px;position:sticky;top:0;z-index:50}
.marke{font-family:var(--schrift-leit);font-variation-settings:'wdth' 118,'wght' 750;font-size:1.1rem;letter-spacing:.02em;display:flex;align-items:center;gap:10px;white-space:nowrap;color:inherit;text-decoration:none}
.marke .punkt{width:10px;height:10px;background:var(--ls-forderung);border-radius:2px;display:inline-block}
.marke small{font-family:var(--schrift-ui);font-weight:400;font-size:.72rem;color:#9AA0A6;letter-spacing:.08em;text-transform:uppercase}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:18px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ls-forderung);display:grid;place-items:center;font-weight:600;font-size:.8rem}

/* ---------- Leitsystem ---------- */
.layout{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - 56px)}
.leitsystem{background:var(--karte);border-right:1px solid var(--linie);padding:20px 0;display:flex;flex-direction:column}
.ls-titel{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-2);padding:0 20px 10px}
.ls-eintrag{display:flex;align-items:center;gap:12px;padding:11px 20px 11px 16px;border-left:4px solid transparent;color:var(--tinte-2);text-decoration:none;cursor:pointer;font-family:var(--schrift-leit);font-variation-settings:'wdth' 108,'wght' 560;font-size:.94rem;letter-spacing:.01em;transition:background .12s}
.ls-eintrag:hover{background:#F2F1ED}
.ls-eintrag.aktiv{border-left-color:var(--ls-farbe);color:var(--tinte);background:#F2F1ED}
.ls-eintrag .pikto{width:26px;height:26px;border-radius:5px;flex-shrink:0;display:grid;place-items:center;background:var(--ls-farbe);color:#fff}
.ls-eintrag .pikto svg{width:14px;height:14px}
.ls-eintrag .zaehler{margin-left:auto;font-family:var(--schrift-zahl);font-size:.72rem;color:var(--tinte-2)}
.ls-eintrag.aktiv .zaehler{color:var(--ls-farbe);font-weight:500}
.ls-trenner{height:1px;background:var(--linie);margin:14px 20px}
.ls-fuss{margin-top:auto;padding:16px 20px 0;font-size:.7rem;color:var(--kontext);border-top:1px solid var(--linie)}
.ls-fuss b{display:block;color:var(--tinte-2);font-weight:500;margin-bottom:2px}

/* ---------- Hauptbereich & Schild ---------- */
.main{padding:0 32px 48px;min-width:0}
.schild{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-top:6px solid var(--schild-farbe,var(--ls-forderung));padding:22px 0 6px;margin-bottom:18px}
.schild h1{font-family:var(--schrift-leit);font-variation-settings:'wdth' 116,'wght' 740;font-size:1.7rem;letter-spacing:.005em}
.schild .pfad{font-size:.8rem;color:var(--tinte-2)}
.schild .datum{margin-left:auto;font-family:var(--schrift-zahl);font-size:.78rem;color:var(--tinte-2)}

/* ---------- Karten ---------- */
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:20px 22px;margin-bottom:24px}
.karte h2{font-size:.98rem;font-weight:600;line-height:1.35;margin-bottom:2px}
.karte .untertitel{font-size:.76rem;color:var(--tinte-2);margin-bottom:16px}
.raster{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.raster > .karte{margin-bottom:0}
.raster{margin-bottom:24px}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse;font-size:.83rem}
thead th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2);font-weight:500;padding:8px 12px;border-bottom:1px solid var(--tinte)}
tbody td{padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:middle}
tbody tr:hover{background:#F5F4F0}
tfoot td{padding:10px 12px;font-weight:600;border-top:2px solid var(--tinte)}
td.zahl,th.zahl,tfoot td.zahl{text-align:right;font-family:var(--schrift-zahl);font-feature-settings:'tnum';font-size:.8rem}
.akte-nr{font-family:var(--schrift-zahl);font-size:.78rem;color:var(--tinte-2)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--sf) 12%,white);color:var(--sf);white-space:nowrap}
.status i{width:7px;height:7px;border-radius:50%;background:var(--sf)}
.schuldner b{display:block;font-weight:600}
.schuldner span{font-size:.74rem;color:var(--tinte-2)}

/* ---------- Formulare ---------- */
.form-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px 18px}
.feld label{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte-2);margin-bottom:5px}
.feld input,.feld select,.feld textarea,
input[type=text],input[type=date],input[type=number],input[type=email],select{
  width:100%;font:inherit;font-size:.86rem;padding:8px 10px;border:1px solid var(--linie);
  border-radius:var(--radius);background:#fff;color:var(--tinte)}
.feld input:focus,select:focus{border-color:var(--akzent);outline:none}
input.zahl-eingabe{font-family:var(--schrift-zahl);text-align:right}
.feld .hinweis{font-size:.7rem;color:var(--kontext);margin-top:4px}
fieldset{border:1px solid var(--linie);border-radius:var(--radius);padding:16px;margin-bottom:18px}
legend{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2);padding:0 8px;font-weight:600}

/* ---------- Buttons & Chips ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.84rem;font-weight:600;
  padding:9px 16px;border-radius:var(--radius);border:1px solid var(--tinte);background:var(--tinte);
  color:#fff;cursor:pointer;text-decoration:none;transition:opacity .12s}
.btn:hover{opacity:.88}
.btn.akzent{background:var(--akzent);border-color:var(--akzent)}
.btn.zahlung{background:var(--ls-zahlung);border-color:var(--ls-zahlung)}
.btn.hell{background:#fff;color:var(--tinte);border-color:var(--linie)}
.btn.hell:hover{border-color:var(--tinte-2);opacity:1}
.btn.klein{padding:5px 10px;font-size:.74rem}
.chipfilter{font-size:.75rem;padding:5px 12px;border:1px solid var(--linie);border-radius:99px;background:var(--karte);color:var(--tinte-2);cursor:pointer;text-decoration:none;transition:all .12s}
.chipfilter:hover{border-color:var(--tinte-2)}
.chipfilter.an{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.tabelle-kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.tabelle-kopf h2{font-size:.98rem;font-weight:600}
.filterleiste{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.filterleiste .feld{min-width:150px}

/* ---------- Anmerkung & Flash ---------- */
.anmerkung{margin-top:14px;padding:10px 12px;border-left:3px solid var(--ls-mahnung);background:#FBF6EC;font-size:.78rem;line-height:1.5;color:var(--tinte);border-radius:0 4px 4px 0}
.flash{padding:11px 14px;border-radius:var(--radius);font-size:.84rem;margin-bottom:14px;border:1px solid}
.flash.ok{background:#EDF5EF;border-color:#BCD9C6;color:#1F5637}
.flash.fehler{background:#F9ECEE;border-color:#E3B9C0;color:#7A1F2D}
.flash.info{background:#EDF2F9;border-color:#BCCFE8;color:#1A4680}

/* ---------- KPI-Band ---------- */
.kpi-band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;margin-bottom:24px}
.kpi{padding:18px 20px;border-right:1px solid var(--linie)}
.kpi:last-child{border-right:none}
.kpi .label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-2);margin-bottom:6px}
.kpi .wert{font-family:var(--schrift-zahl);font-size:1.55rem;font-weight:500;font-feature-settings:'tnum';line-height:1.1}
.kpi .wert small{font-size:.85rem;color:var(--tinte-2)}

/* ---------- Diverses ---------- */
.mini-fortschritt{width:90px;height:5px;background:#EFEEE9;border-radius:3px;overflow:hidden}
.mini-fortschritt i{display:block;height:100%;background:var(--ls-zahlung);border-radius:3px}
.frist{font-family:var(--schrift-zahl);font-size:.78rem}
.frist.knapp{color:var(--ls-recht);font-weight:600}
.leer{padding:26px;text-align:center;color:var(--tinte-2);font-size:.86rem}
.inline-edit input,.inline-edit select{font-size:.78rem;padding:4px 6px}
details.datei-liste{font-size:.8rem;margin-top:8px}
details.datei-liste summary{cursor:pointer;color:var(--akzent);font-weight:600;font-size:.78rem}

@media (max-width:1200px){.kpi-band{grid-template-columns:repeat(2,1fr)}.raster{grid-template-columns:1fr}}
@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .leitsystem{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--linie);padding:8px}
  .ls-titel,.ls-trenner,.ls-fuss{display:none}
  .ls-eintrag{border-left:none;border-bottom:3px solid transparent;white-space:nowrap}
  .ls-eintrag.aktiv{border-bottom-color:var(--ls-farbe)}
  .main{padding:0 16px 32px}
}

/* Bank-Detailfelder (alle CAMT-Felder) */
.bank-detail{font-size:.76rem}
.bank-detail summary{cursor:pointer;color:var(--akzent);font-weight:600;font-size:.72rem;user-select:none}
.bank-detail summary:hover{text-decoration:underline}
.bank-detail dl{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:8px 0 2px;
  padding:10px 12px;background:#F5F4F0;border-radius:5px;border:1px solid var(--linie)}
.bank-detail dt{color:var(--tinte-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;align-self:center}
.bank-detail dd{font-family:var(--schrift-zahl);font-size:.74rem;word-break:break-all}
.leer-wert{color:var(--kontext)}
.btn.stamm{background:var(--ls-stamm);border-color:var(--ls-stamm)}
.btn.recht{background:var(--ls-recht);border-color:var(--ls-recht)}
.btn.mahnung{background:var(--ls-mahnung);border-color:var(--ls-mahnung)}
.flash.hinweis{background:#FBF6EC;border-color:#E7CD9B;color:#7A5407}
tr.entfernt td{opacity:.42;text-decoration:line-through}
tr.entfernt td:last-child{text-decoration:none}

/* Kauf: Forderungen über 500 € hervorheben */
tr.betrag-hoch td{background:#FFF3C4}
tr.betrag-hoch td:first-child{box-shadow:inset 3px 0 0 var(--ls-mahnung)}
/* Teilverwendete Bank-Gutschrift */
.rest-hinweis{display:block;font-size:.68rem;color:var(--ls-mahnung);font-weight:600}