/* ==========================================================================
ZVL Portal — modern UI theme (2026 refresh)
--accent is injected inline per install; everything else lives here.
========================================================================== */
:root{
--accent2: color-mix(in srgb, var(--accent) 72%, #06192b);
--accent-soft: color-mix(in srgb, var(--accent) 12%, #fff);
--accent-ring: color-mix(in srgb, var(--accent) 26%, transparent);
--grad: linear-gradient(135deg, var(--accent), var(--accent2));
/* Markenfarben, aus vamed_wwh.png entnommen */
--brand-cyan: #2A9BD4;
--brand-cyan-2: #1E7FBE;
--brand-navy: #181842;
--bg: #eef1f7;
--bg2: #e7ecf5;
--card: #ffffff;
--ink: #10202f;
--ink-soft: #33465a;
--muted: #697990;
--soft: color-mix(in srgb, var(--accent) 9%, #fff);
--border: #e3e8f0;
--border2: #d3dbe6;
--line: #eef2f7;
--ok: #12946a; --ok-bg: #e4f6ee;
--warn: #b3730f; --warn-bg: #fdf3e2;
--danger: #cf3a2c; --danger-bg: #fdeceb;
--info: #1667b0; --info-bg: #e8f1fb;
--r-sm: 9px; --r: 13px; --r-lg: 18px; --r-xl: 22px;
/* Hoehen der drei klebenden Leisten. Sie haengen voneinander ab: die
Navigation klebt unter der Kopfleiste, die Pfadleiste unter beiden.
Deshalb stehen sie hier EINMAL und werden unten nur noch gerechnet —
sonst schieben sie sich beim naechsten Detail wieder uebereinander. */
--h-topbar: 62px;
--h-navbar: 57px;
--sh-sm: 0 1px 2px rgba(16,38,66,.06), 0 1px 3px rgba(16,38,66,.05);
--sh: 0 2px 4px rgba(16,38,66,.05), 0 10px 26px rgba(16,38,66,.07);
--sh-lg: 0 6px 14px rgba(16,38,66,.08), 0 24px 60px rgba(16,38,66,.12);
--sh-accent: 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent);
/* backward-compatible aliases (older inline styles reference these) */
--shadow-sm: var(--sh-sm);
--shadow-md: var(--sh);
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
margin:0; color:var(--ink); font-size:15px; line-height:1.55;
font-family:"Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
background:
radial-gradient(1100px 520px at 100% -12%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 62%),
linear-gradient(180deg, var(--bg2), var(--bg));
background-attachment:fixed;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none;transition:color .12s}
a:hover{color:var(--accent2)}
h1,h2,h3{letter-spacing:-.02em}
::selection{background:color-mix(in srgb,var(--accent) 22%,#fff)}
/* scrollbars */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:#c4cedb;border-radius:20px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#a9b6c8;background-clip:content-box}
/* ---- Top bar ---- */
/* Kopfleiste und Navigation bilden eine zusammenhaengende Flaeche.
Bewusst OHNE Trennlinie dazwischen — die eine Kante sitzt unter der
Navigation, sonst entstehen zwei Striche dicht untereinander. */
.topbar{position:sticky;top:0;z-index:40;
background:var(--card);
padding:10px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar .brandwrap{display:flex;align-items:center;gap:14px;min-height:42px}
.topbar .brand{font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.topbar .brand small{display:block;font-size:11px;color:var(--muted);font-weight:500;letter-spacing:0;margin-top:2px}
.topbar .brand-sep{width:1px;height:28px;background:var(--border2);border-radius:1px;align-self:center;flex:none}
.topbar .right{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-left:auto}
/* ---- Wortmarke VAMED+WWH (ersetzt die Bitmap) ---- */
.wordmark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
padding:2px 2px;border-radius:10px;transition:.16s;flex:none}
.wordmark:hover{transform:translateY(-1px)}
.wordmark .wm-ring{width:22px;height:22px;color:var(--brand-cyan);flex:none;
display:block;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.wordmark .wm-ring svg{width:100%;height:100%;display:block}
.wordmark:hover .wm-ring{transform:rotate(120deg)}
.wm-text{display:inline-flex;align-items:baseline;font-weight:900;font-size:20px;
letter-spacing:-.035em;line-height:1;white-space:nowrap;
font-feature-settings:"kern" 1}
.wm-a{background:linear-gradient(135deg,var(--brand-cyan),var(--brand-cyan-2));
-webkit-background-clip:text;background-clip:text;color:transparent;
-webkit-text-fill-color:transparent}
.wm-plus{color:var(--brand-cyan);font-weight:800;font-size:19px;margin:0 1px;opacity:.95}
.wm-b{color:var(--brand-navy)}
@supports not (background-clip:text){ .wm-a{color:var(--brand-cyan);-webkit-text-fill-color:currentColor} }
.v-sep{width:1px;height:26px;background:var(--border2);margin:0 2px}
/* Die Bedienelemente rechts sprechen dieselbe Sprache wie die Zeilen im
Kontomenue: getoente Kachel, beim Ueberfahren Akzent. Vorher war die
Glocke eine weisse Karte mit Rahmen und Schatten, der Avatar eine weisse
Karte mit einem Kreis darin und die Uhr nackter Text an einem Strich -
drei Gewichte fuer drei gleich wichtige Dinge. */
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border:none;border-radius:12px;color:var(--accent2);
background:var(--soft);transition:background .14s,color .14s;box-shadow:none}
.icon-btn:hover{background:var(--accent);color:#fff}
.icon-btn.danger-hover:hover{background:var(--danger-bg);color:var(--danger)}
.role-chip{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
color:#fff;background:var(--grad);border:none;border-radius:20px;padding:3px 9px}
.topsearch{position:relative;display:flex;align-items:center;flex:0 1 380px;
min-width:0;margin:0 auto}
.topsearch svg{position:absolute;left:12px;color:var(--muted);pointer-events:none}
.topsearch input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--border);
border-radius:12px;font-size:13.5px;background:var(--soft);
transition:.15s;box-shadow:none}
.topsearch input:hover{background:var(--card);border-color:var(--border2)}
.topsearch input:focus{background:var(--card)}
.topsearch input:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-ring)}
/* ---- Navigationsleiste ----
Drei Zonen in einem Raster: Zurueck links, Ziele mittig, Menue rechts. Die
Mitte ist echt mittig, weil die beiden Aussenspalten gleich stark wachsen —
mit einer Flexzeile haengen die Ziele am linken Rand und rechts klafft es.
Die Polsterung ist bewusst oben und unten gleich; vorher war sie 6px/8px,
und genau solche Ungleichheiten lassen eine Leiste angeklebt wirken. */
.navbar{background:var(--card);border-bottom:1px solid var(--border);
padding:7px 14px;display:grid;grid-template-columns:1fr auto 1fr;
align-items:center;column-gap:10px;
position:sticky;top:var(--h-topbar);min-height:var(--h-navbar);z-index:30}
/* KEIN min-width:0 — das wuerde der Spalte ihre Inhaltsbreite als Untergrenze
nehmen. Sie faellt dann auf 0 zusammen und der Zurueck-Knopf schiebt sich
ueber die Ziele, sobald der Platz eng wird. */
.navlead{justify-self:start;display:flex;align-items:center}
.navscroll{justify-self:center;display:flex;align-items:center;gap:2px;
overflow-x:auto;max-width:100%;
/* "safe" haelt die Ziele sichtbar, wenn sie breiter als das Fenster werden:
dann beginnt die Reihe links statt mittig abgeschnitten zu werden. */
justify-content:safe center}
.navscroll::-webkit-scrollbar{height:0}
/* Zurueck ist eine Handlung, kein Ziel — deshalb ohne Rahmen und leiser als
die Ziele, aber in derselben Form, damit nichts aus der Reihe faellt. */
.navback{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none;
font-size:13.5px;font-weight:600;color:var(--muted);padding:8px 12px;border-radius:9px;
background:none;border:none;cursor:pointer;font-family:inherit;transition:.14s}
.navback:hover{color:var(--ink);background:var(--soft)}
.nav-sep{width:1px;height:20px;background:var(--border);margin:0 4px 0 6px;flex:none}
.navbar a{position:relative;white-space:nowrap;font-size:14px;font-weight:600;
color:var(--muted);padding:8px 13px;border-radius:9px;display:inline-flex;
align-items:center;gap:7px;transition:color .12s,background .12s}
.navbar a svg{opacity:.72;transition:opacity .12s}
.navbar a:hover{color:var(--ink);background:var(--soft)}
.navbar a:hover svg{opacity:1}
/* Aktiv: gefuellte Flaeche und Akzentfarbe. Der frueher zusaetzliche
Innenrahmen machte den aktiven Punkt schwerer als alles andere in der
Leiste — die Fuellung allein genuegt. */
.navbar a.active{color:var(--accent2);background:var(--accent-soft)}
.navbar a.active svg{opacity:1;color:var(--accent)}
/* Alle Zaehler in einer Familie: gleiche Hoehe, gleiche Rundung, nur die
Farbe traegt die Bedeutung. */
.navbar .count{height:19px;min-width:19px;padding:0 6px;font-size:11.5px;
border-radius:10px;margin-left:1px}
.navbar .count.accent{background:var(--accent);color:#fff}
.navbar .count.urgent{background:#F69546;color:#fff}
/* Ein Menue je Kategorie. Der Knopf traegt den Namen der Kategorie, nicht
drei Striche: Wer "Stammdaten" liest, weiss, ob er dort suchen muss.
Leiser als die Ziele links davon, damit die Reihenfolge der Wichtigkeit
sichtbar bleibt. */
.navgrp{position:relative;display:inline-flex;align-items:center;flex:none}
.navgrpbtn{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);
padding:8px 11px;border-radius:9px;border:none;background:none;cursor:pointer;
transition:color .12s,background .12s}
.navgrpbtn:hover{color:var(--ink);background:var(--soft)}
.navcaret{font-size:9px;line-height:1;opacity:.55;transition:transform .2s ease,opacity .12s}
.navgrpbtn:hover .navcaret{opacity:.9}
.navgrp.open .navgrpbtn{color:var(--accent2);background:var(--accent-soft)}
.navgrp.open .navcaret{transform:rotate(180deg);opacity:1}
/* Enthaelt das Menue die aktuelle Seite, traegt der Knopf einen Punkt -
sonst sieht man beim Blick auf die Leiste nicht, wo man gerade ist. */
.navgrp:has(.menu-pop a.active) .navgrpbtn{color:var(--accent2)}
.navgrp:has(.menu-pop a.active) .navgrpbtn::after{content:"";width:5px;height:5px;
border-radius:50%;background:var(--accent);margin-left:1px}
.menu-pop{position:absolute;top:calc(100% + 8px);left:0;background:var(--card);
border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
padding:8px;min-width:214px;z-index:50;display:flex;flex-direction:column;
opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);transform-origin:top left;
transition:opacity .18s ease,transform .22s cubic-bezier(.34,1.4,.5,1),visibility .18s}
.navgrp.open .menu-pop{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.menu-pop a{padding:11px 13px;border-radius:10px;font-size:14px;font-weight:600;
color:var(--ink-soft);border-bottom:none;display:flex;align-items:center;gap:9px;
opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,background .12s}
.navgrp.open .menu-pop a,
.navgrp.open .menu-pop .menu-sec{opacity:1;transform:translateY(0)}
.navgrp.open .menu-pop a:nth-of-type(1){transition-delay:.03s}
.navgrp.open .menu-pop a:nth-of-type(2){transition-delay:.05s}
.navgrp.open .menu-pop a:nth-of-type(3){transition-delay:.07s}
.navgrp.open .menu-pop a:nth-of-type(4){transition-delay:.09s}
.navgrp.open .menu-pop a:nth-of-type(5){transition-delay:.11s}
.navgrp.open .menu-pop a:nth-of-type(n+6){transition-delay:.13s}
.menu-sec{opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease;
font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
color:var(--muted);padding:9px 13px 4px;pointer-events:none}
.menu-sec:first-child{padding-top:4px}
.menu-pop a:hover{background:var(--soft);color:var(--accent2)}
.menu-pop a.active{color:var(--accent2);background:var(--soft)}
/* Die Kategorien sitzen rechts neben den Zielen, durch einen Strich
getrennt: zwei Gruppen, nicht eine lange Reihe. */
.navcats{display:flex;align-items:center;gap:1px;flex:none}
.navcats::before{content:"";width:1px;height:20px;flex:none;
background:var(--border);margin:0 8px 0 2px}
/* Die beiden letzten Menues oeffnen nach links, sonst laufen sie aus dem
Fenster. */
.navcats .navgrp:nth-last-child(-n+2) .menu-pop{left:auto;right:0;
transform-origin:top right}
/* Schmale Fenster: die Reiterzone gibt nach und scrollt in sich, die
Kategorien bleiben ganz - sie sind der einzige Weg zu allem Uebrigen.
Die mittlere Spalte braucht dafuer minmax(0,1fr); die linke behaelt ihre
Inhaltsbreite (siehe oben). */
@media (max-width:1100px){
.navbar{grid-template-columns:auto minmax(0,1fr) auto;column-gap:6px}
.navscroll{justify-self:stretch}
.navcats .navgrpbtn{padding:8px 9px;font-size:13.5px}
.navcats .navcaret{display:none}
.navcats::before{margin:0 5px 0 1px}
}
/* ---- Layout ---- */
main{max-width:1180px;margin:28px auto;padding:0 26px;animation:fade-up .4s ease both}
main.wide{max-width:1480px;padding:0 26px}
/* Sehr breite Listen (Master) duerfen den ganzen Bildschirm nutzen. Bei
1480px blieb rechts und links Rand frei, waehrend die Tabelle darunter
seitlich geschoben werden musste. */
main.full{max-width:none;padding:0 20px}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ---- User management cards ---- */
.usergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:16px}
/* Bereichsfilter fuer Betragsspalten im Master */
.mfpanel.mfrange{min-width:186px;padding:10px}
.mfsec{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);margin-bottom:8px}
.mfnum{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.mfnum span{font-size:11.5px;color:var(--muted);width:34px;flex:none}
.mfnum input{flex:1;min-width:0;padding:5px 7px;border:1px solid var(--border);
border-radius:7px;font-size:12.5px}
.mfnum input:focus{outline:none;border-color:var(--accent)}
.mfclear{width:100%;margin-top:3px;padding:5px;border:1px solid var(--border);
background:var(--card);border-radius:7px;font-size:11.5px;color:var(--muted);cursor:pointer}
.mfclear:hover{border-color:var(--accent);color:var(--accent)}
.filtercount{margin:10px 2px 0;font-size:12.5px;color:var(--muted);font-weight:600}
/* Betriebsart wiederkehrender Zahlungen */
.recmode-head{display:flex;justify-content:space-between;align-items:flex-start;
gap:16px;flex-wrap:wrap}
.recmode-note{display:flex;align-items:center;gap:7px;margin-top:12px;padding:9px 13px;
border:1px solid #F0DCB8;border-radius:var(--r);background:#FEF6E7;
font-size:12.5px;color:#8A5A0B}
.filternote{display:flex;align-items:center;gap:7px;margin:10px 2px 0;padding:8px 13px;
border:1px solid var(--border);border-radius:var(--r);background:var(--soft);
font-size:12.5px;color:var(--muted)}
/* ---- Blaetter-Leiste fuer lange Listen ---- */
/* Unten derselbe Abstand wie zwischen zwei Karten (20px): Die Leiste stand
bisher ohne Abstand nach unten, und auf der Zahlungsseite klebte die Karte
"Recently paid" direkt daran - zwei getrennte Dinge sahen aus wie eines. */
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin:10px 2px 20px;padding:10px 14px;border:1px solid var(--border);
border-radius:var(--r);background:var(--card);box-shadow:var(--sh-sm)}
.pager:last-child{margin-bottom:0}
.pager-info{font-size:13px;color:var(--muted)}
.pager-info b{color:var(--ink);font-variant-numeric:tabular-nums}
.pager-form{display:flex;align-items:center;gap:8px;margin:0}
.pager-lbl{font-size:12px;color:var(--muted);font-weight:600}
.pager-form select{min-width:104px}
/* ---- Nutzerliste (Tabelle statt Kacheln) ---- */
.userlist{width:100%;border-collapse:collapse;font-size:13px}
.userlist thead th{position:sticky;top:0;background:var(--soft);text-align:left;
font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
font-weight:700;padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap;z-index:1}
.userlist td{padding:6px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.userlist tr.urow:hover td{background:var(--soft)}
.userlist .ucell{display:flex;align-items:center;gap:10px;min-width:0}
.userlist .avatar.sm{width:26px;height:26px;border-radius:50%;background:var(--grad);
color:#fff;flex:none;display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:13px;text-transform:uppercase}
.userlist .uname{font-weight:700;font-size:13px;border:1px solid transparent;
background:transparent;border-radius:6px;padding:2px 5px;width:150px}
.userlist .uname:hover{border-color:var(--border2)}
.userlist .uname:focus{background:#fff;border-color:var(--accent);outline:none}
.userlist .umail{font-size:10.5px;color:var(--muted);padding:0 6px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:190px}
.userlist .umeta{font-size:11px;color:var(--muted);margin-top:4px}
.userlist .uchips{display:flex;gap:5px;flex-wrap:wrap}
.userlist tr.udetail td{background:var(--soft);border-bottom:2px solid var(--border)}
.udbox{display:flex;gap:22px;flex-wrap:wrap;padding:6px 2px 10px}
.udcol{flex:1;min-width:280px}
.udlbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
letter-spacing:.05em;margin-bottom:8px}
/* Rechtematrix je Nutzer: Zeilen = OE/Projekt, Spalten = Rechte */
.matrixwrap{max-height:300px;overflow-y:auto;border:1px solid var(--border);
border-radius:8px;background:var(--card)}
.matrix{width:100%;border-collapse:collapse;font-size:12px}
.matrix thead th{position:sticky;top:0;background:var(--soft);text-align:left;
font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
font-weight:700;padding:6px 10px;border-bottom:1px solid var(--border);z-index:1}
.matrix td{padding:4px 10px;border-bottom:1px solid var(--line)}
.matrix tr:last-child td{border-bottom:none}
.matrix tr.mgroup td{border-top:1px solid var(--border);background:#FBFCFE}
.matrix tr:hover td{background:var(--soft)}
.matrix .mproj{color:var(--ink-soft)}
.matrix .mproj i{color:var(--muted)}
.matrix input[type=checkbox]{width:15px;height:15px;cursor:pointer;margin:0}
.matrix .center{text-align:center}
.granttbl{width:100%;border-collapse:collapse;font-size:12px;background:var(--card);
border:1px solid var(--border);border-radius:8px;overflow:hidden}
.granttbl th{text-align:left;font-size:10.5px;text-transform:uppercase;color:var(--muted);
padding:6px 9px;border-bottom:1px solid var(--border);font-weight:700}
.granttbl td{padding:6px 9px;border-bottom:1px solid var(--line)}
.granttbl tr:last-child td{border-bottom:none}
.usercard{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);
box-shadow:var(--sh-sm);overflow:hidden;transition:box-shadow .16s}
.usercard:hover{box-shadow:var(--sh)}
.usercard form{margin:0}
.usercard-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);
background:linear-gradient(color-mix(in srgb,var(--accent) 4%,#fff),var(--card))}
.usercard-head .avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;flex:none;
display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;text-transform:uppercase}
.usercard-head .uc-name{flex:1;min-width:0}
.usercard-head .uc-name input{width:100%;font-weight:700;font-size:14px;border:1px solid transparent;
background:transparent;border-radius:7px;padding:5px 7px;margin:-5px -7px}
.usercard-head .uc-name input:hover{border-color:var(--border2)}
.usercard-head .uc-name input:focus{background:#fff;border-color:var(--accent)}
.usercard-head .uc-mail{font-size:11.5px;color:var(--muted);margin-top:2px;padding:0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usercard-head select{max-width:180px}
.usercard-sec{padding:12px 16px;border-bottom:1px solid var(--line)}
.usercard-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.usercard-chips{display:flex;gap:6px;flex-wrap:wrap}
.usercard details{margin-top:8px}
.usercard details summary{cursor:pointer;font-size:12.5px;color:var(--accent2);font-weight:600;list-style:none;
display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--border);border-radius:20px;background:#fff}
.usercard details summary::-webkit-details-marker{display:none}
.usercard details summary::before{content:"▸";font-size:10px;transition:transform .15s}
.usercard details[open] summary::before{transform:rotate(90deg)}
.usercard details .dbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:4px 10px;
border:1px solid var(--border);border-radius:10px;padding:10px;margin-top:8px;max-height:170px;overflow:auto;background:#fbfcfd}
.usercard details .dbox label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.usercard-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#fbfcfd}
.usercard-foot input{flex:1;min-width:0}
.usercard-2fa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
/* ---- Detail key/value grid ---- */
.detailgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 26px}
.kv{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;min-width:0}
.kv-l{color:var(--muted);font-weight:600;white-space:nowrap}
.kv-v{font-weight:650;text-align:right;color:var(--ink);word-break:break-word}
.detailhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.detailflags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
/* ---- Back button ---- */
.backbar{margin-bottom:14px}
.backbtn{color:var(--muted);font-weight:600}
.backbtn:hover{color:var(--accent2)}
/* ---- Cards ---- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
padding:24px 26px;margin-bottom:20px;box-shadow:var(--sh-sm)}
.card.compact{padding:18px 20px}
.card h2{margin:0 0 6px;font-size:17px;font-weight:750;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h3{font-size:14px;font-weight:700;margin:0 0 8px}
.card .sub{color:var(--muted);font-size:13px;margin-bottom:18px;line-height:1.55}
/* ---- Seitenkopf ----
Ein Kasten um eine Ueberschrift rahmt nichts ein: darunter folgt sowieso die
Tabelle in ihrer eigenen Karte, also standen zwei Rahmen uebereinander. Der
Titel sitzt jetzt frei auf dem Seitenhintergrund, die Tabelle bleibt die
einzige weisse Flaeche - und ist damit das Erste, was das Auge findet.
Markup wie bei .card, nur die Klasse getauscht. */
.pagehead{background:transparent;border:0;border-radius:0;padding:0;
margin:2px 2px 14px;box-shadow:none}
.pagehead h2{margin:0;font-size:22px;font-weight:750;letter-spacing:-.025em;
display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pagehead h1{margin:0;font-size:24px;font-weight:750;letter-spacing:-.025em}
/* Zahlen rechts: was eine Summe traegt, rutscht ans Zeilenende. */
.pagehead .right{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.pagehead .sub{color:var(--muted);font-size:13px;margin:6px 0 0;line-height:1.55}
.pagehead .count{position:relative;top:-1px}
@media (max-width:640px){ .pagehead h2{font-size:19px} }
/* ---- Tiles / grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.tile{display:block;background:var(--card);border:1px solid var(--border);
border-radius:var(--r-lg);padding:18px 20px;transition:.16s;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);opacity:0;transition:.16s}
.tile:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:var(--sh);transform:translateY(-2px)}
.tile:hover::before{opacity:1}
.tile .name{font-weight:750;font-size:16px;letter-spacing:-.01em}
.tile .meta{color:var(--muted);font-size:13px;margin-top:6px}
/* ---- Stat cards (dashboard KPIs) ---- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:6px}
.statcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
padding:18px 20px;box-shadow:var(--sh-sm);transition:.16s;min-width:0}
.statcard:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.statcard-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.statcard-ic{width:34px;height:34px;border-radius:10px;flex:none;
display:flex;align-items:center;justify-content:center;
color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,#fff)}
.statcard-label{font-size:12.5px;font-weight:650;color:var(--muted);letter-spacing:.01em}
.statcard-value{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1;
font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statcard-sub{font-size:12px;color:var(--muted);margin-top:5px}
.statcard.tone-ok .statcard-ic{color:var(--ok);background:var(--ok-bg)}
.statcard.tone-ok .statcard-value{color:var(--ok)}
.statcard.tone-danger .statcard-ic{color:var(--danger);background:var(--danger-bg)}
.statcard.tone-danger .statcard-value{color:var(--danger)}
.statcard.tone-warn .statcard-ic{color:var(--warn);background:var(--warn-bg)}
.statcard.tone-info .statcard-ic{color:var(--info);background:var(--info-bg)}
.statcard.tone-muted .statcard-ic{color:var(--muted);background:#eef1f6}
/* ---- Tables ----
Grundsatz: eine Tabelle passt in die Breite des Fensters. Nichts laeuft
seitlich weg, nichts muss hin- und hergeschoben werden. Statt einer
Mindestbreite brechen lange Inhalte um; die Polsterung schrumpft, je mehr
Spalten eine Tabelle hat. Der waagerechte Ueberlauf bleibt nur als
Notausgang bestehen, damit auf sehr schmalen Fenstern nichts abgeschnitten
wird. */
.tablewrap{overflow-x:auto;max-width:100%;border-radius:var(--r-sm)}
.xscroll{overflow-x:auto;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:14px;table-layout:auto}
th{background:#f6f8fb;color:var(--muted);font-size:11px;text-align:left;
padding:10px 10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
position:sticky;top:0;border-bottom:1px solid var(--border);
white-space:normal;overflow-wrap:break-word}
td{padding:10px 10px;border-top:1px solid var(--line);vertical-align:middle;
overflow-wrap:break-word}
/* 'break-word' statt 'anywhere': 'anywhere' erlaubt dem Browser, die
MINDESTBREITE einer Spalte mit einem einzelnen Zeichen zu berechnen. Genau
deshalb schrumpften "No.", "César" und "Paid / Valuta" auf Zeichenbreite,
waehrend der laengste Kreditorenname den ganzen Platz bekam — und der Text
stapelte sich Buchstabe fuer Buchstabe untereinander. 'break-word' bricht
lange Woerter genauso, zaehlt aber das laengste Wort als Mindestbreite.
Silbentrennung ist ebenfalls raus: sie machte aus RECOMMENDATION im Kopf
ein dreizeiliges "RECOM-MENDATI-ON". */
/* Lange Kennungen (IBAN, E-Mail, Rechnungsnummern) duerfen brechen — sonst
schieben sie die ganze Tabelle ueber den Rand. */
td a{overflow-wrap:anywhere}
/* Aktionsspalten: Knoepfe duerfen umbrechen statt die Tabelle zu dehnen. */
/* Aktionsspalte: die Knoepfe sollen nebeneinander stehen und als GANZES
umbrechen. Mit 'white-space:normal' allein brach der Browser mitten im Wort
um - aus "Bearbeiten" wurde eine Buchstabensaeule. */
td.actions{white-space:normal}
/* Knopfreihen nebeneinander, Umbruch nur ZWISCHEN den Knoepfen. min-width:0
ist noetig, sonst wird ein Flex-Element nie schmaler als sein Inhalt und
schiebt sich in die Nachbarspalte. */
td.actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;
align-items:center;min-width:0;overflow:hidden}
td.actions .btn{margin:0;white-space:nowrap;max-width:100%}
.btn{white-space:nowrap}
/* Die Master-Tabelle hat feste Spaltenbreiten. Dort darf KEINE Zelle ueber
ihre Spalte hinauslaufen - sonst liegt der Inhalt auf der Nachbarspalte.
Die Zelle "Bezahlt/Valuta" traegt zwar die Klasse 'actions', enthaelt aber
keine Knopfreihe, sondern Text: dort gilt der normale Zellenfluss. */
.mastertbl td{overflow:hidden}
.mastertbl td.actions{display:table-cell;white-space:normal;text-align:right}
.mastertbl td.actions .chip{white-space:normal}
.mastertbl .chip,.mastertbl .pill{white-space:normal;overflow-wrap:anywhere}
tbody tr:nth-child(even) td{background:#fafbfd}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 5%,#fff)}
tr.rowlink{cursor:pointer}
tr.rowlink:hover td{background:color-mix(in srgb,var(--accent) 10%,#fff)}
/* Trennlinie zwischen den Eintraegen. Vorher 2px in Schwarz: das traegt in
einer Liste mit funfzig Zeilen mehr Gewicht als der Inhalt selbst und laesst
die Tabelle wie ein Gitter wirken. 1px in Grau trennt genauso deutlich,
ohne das Auge zu fuehren. */
.tablewrap table tbody td{border-top:1px solid var(--border2)}
.tablewrap table tbody tr:last-child td{border-bottom:1px solid var(--border2)}
/* Sortier-Indikator in Tabellenköpfen */
th .sortind{font-size:10px;opacity:.35;user-select:none}
th .sortind.on{opacity:1;color:var(--accent)}
th[data-sort]{color:var(--accent)}
/* Filterzeile in Tabellenköpfen (Master) */
tr.colfilter th{position:sticky;top:37px;background:#eef2f7;padding:5px 8px;border-bottom:1px solid var(--border)}
tr.colfilter input,tr.colfilter select{width:100%;padding:4px 6px;border:1px solid var(--border);
border-radius:6px;font-size:12px;background:#fff;text-transform:none;font-weight:400;letter-spacing:0}
/* Mehrfach-Filter (Checkbox-Dropdown) */
.mfilter{position:relative}
.mfbtn{width:100%;padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:#fff;
font-size:12px;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
text-transform:none;font-weight:400;letter-spacing:0}
.mfbtn::after{content:"▾";float:right;opacity:.5;margin-left:4px}
.mfbtn.active{border-color:var(--accent);color:var(--accent2);font-weight:600}
.mfpanel{position:fixed;z-index:200;min-width:170px;max-width:300px;max-height:280px;overflow:auto;
background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.18);
padding:6px;display:none}
.mfpanel.open{display:block}
.mfpanel .mfsearch{width:100%;padding:5px 7px;border:1px solid var(--border);border-radius:6px;
font-size:12px;margin-bottom:5px}
.mfpanel label{display:flex;gap:7px;align-items:center;padding:3px 5px;font-size:12.5px;white-space:nowrap;
cursor:pointer;text-transform:none;font-weight:400;letter-spacing:0;border-radius:5px}
.mfpanel label:hover{background:var(--soft)}
.mfpanel label input{width:auto;margin:0}
.mfpanel .mfsep{border-top:1px solid var(--line);margin:4px 0}
.compact table{font-size:13px}
.compact th,.compact td{padding:8px 9px}
/* Sehr breite Tabellen (Master, Serienuebersicht): so eng wie noch lesbar,
damit auch 30+ Spalten ohne seitliches Schieben auf den Schirm passen. */
.dense table{font-size:12px}
.dense th{padding:7px 5px;font-size:9.5px;letter-spacing:0}
.dense td{padding:6px 5px}
.dense .btn.sm{padding:2px 6px;font-size:11px}
.dense .chip{padding:2px 7px;font-size:11px}
tr.dec-release td{background:var(--ok-bg)!important}
tr.dec-reject td{background:var(--danger-bg)!important}
tr.dec-clarify td,tr.dec-postpone td{background:var(--warn-bg)!important}
.right{text-align:right}.center{text-align:center}
.num{font-variant-numeric:tabular-nums}
.sumrow td{font-weight:750;border-top:2px solid var(--border2);background:#f3f6fb!important}
/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border2);background:var(--card);
color:var(--ink);padding:9px 16px;border-radius:var(--r-sm);font-weight:650;font-size:14px;
cursor:pointer;transition:.14s;line-height:1.2;box-shadow:var(--sh-sm);font-family:inherit}
.btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border2));color:var(--accent2);transform:translateY(-1px);box-shadow:var(--sh)}
.btn:active{transform:translateY(0)}
.btn.accent{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--sh-sm)}
.btn.accent:hover{background:var(--accent2);border-color:var(--accent2);color:#fff;box-shadow:var(--sh-sm)}
.btn.ghost{background:var(--card);color:var(--accent)}
.btn.danger{background:var(--card);color:var(--danger);border-color:#ecc2bd}
.btn.danger:hover{background:var(--danger-bg);color:var(--danger);border-color:#e0a49d}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:8px;gap:5px}
form.inline{display:inline}
/* ---- Flash ---- */
.flash{display:flex;align-items:center;gap:10px;
background:linear-gradient(color-mix(in srgb,var(--accent) 8%,#fff), color-mix(in srgb,var(--accent) 4%,#fff));
border:1px solid color-mix(in srgb,var(--accent) 26%,var(--border));color:var(--accent2);
padding:13px 16px;border-radius:var(--r);margin-bottom:16px;font-size:14px;font-weight:550;
box-shadow:var(--sh-sm);animation:fade-up .3s ease both}
.flash .close{margin-left:auto;cursor:pointer;color:var(--muted);border:none;background:none}
/* ---- Forms ---- */
.formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:15px}
.formgrid label{font-size:12px;font-weight:650;color:var(--muted);display:block;margin-bottom:6px}
.formgrid input,.formgrid select,.formgrid textarea{width:100%;padding:10px 12px;border:1px solid var(--border2);
border-radius:var(--r-sm);font-size:14px;background-color:var(--card);font-family:inherit;transition:.14s}
input,select,textarea{font-family:inherit}
input:focus,select:focus,textarea:focus,.formgrid input:focus,.formgrid select:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
textarea{border:1px solid var(--border2);border-radius:var(--r-sm);padding:10px 12px}
.miniput{padding:8px 10px;border:1px solid var(--border2);border-radius:8px;font-size:13px;background-color:var(--card)}
input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px;cursor:pointer;vertical-align:middle}
input[type=radio]{accent-color:var(--accent);cursor:pointer}
/* ---- Select dropdowns (site-styled, custom arrow) ---- */
select{
-webkit-appearance:none;-moz-appearance:none;appearance:none;
background-color:var(--card);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23697990' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px;
border:1px solid var(--border2);border-radius:var(--r-sm);
padding:9px 34px 9px 12px;font-size:14px;font-family:inherit;color:var(--ink);
cursor:pointer;transition:border-color .14s,box-shadow .14s;line-height:1.3;max-width:100%}
select:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--border2))}
select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
select:disabled{opacity:.6;cursor:not-allowed;background-color:#f4f6fa}
select option{color:var(--ink)}
/* keep arrow room where container padding shorthand resets it */
.formgrid select{padding:10px 34px 10px 12px}
.filterbar select{padding:9px 32px 9px 11px}
select.miniput{padding:8px 26px 8px 10px;background-position:right 8px center;background-size:10px 10px;border-radius:8px}
/* option chips + switch */
.optchip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-soft);
border:1px solid var(--border);background:var(--card);border-radius:20px;padding:6px 13px;cursor:pointer;
user-select:none;transition:.14s}
.optchip:hover{border-color:var(--accent);color:var(--accent2)}
.optchip:has(input:checked){background:var(--soft);border-color:var(--accent);color:var(--accent2)}
.optchip input{margin:0}
.switch{position:relative;display:inline-block;width:40px;height:23px;cursor:pointer;vertical-align:middle}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;background:#c7d0dd;border-radius:20px;transition:.18s}
.switch .track::before{content:"";position:absolute;height:17px;width:17px;left:3px;top:3px;
background:#fff;border-radius:50%;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + .track{background:var(--grad)}
.switch input:checked + .track::before{transform:translateX(17px)}
/* file inputs */
input[type=file]{font-size:12.5px;color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{border:1px solid var(--border);background:#f1f4f9;
color:var(--ink);padding:8px 13px;border-radius:8px;font-weight:600;font-size:13px;
cursor:pointer;margin-right:10px;transition:.12s;font-family:inherit}
input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--accent);background:#fff}
.upload-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
color:var(--accent);border:1px solid var(--border);border-radius:8px;padding:6px 10px;
cursor:pointer;background:var(--card);transition:.12s}
.upload-chip:hover{border-color:var(--accent);background:var(--soft)}
.upload-chip input{display:none}
.filepick{display:inline-flex;align-items:center;gap:10px;border:1.5px dashed var(--border2);
border-radius:var(--r);padding:10px 13px;background:#fafbfd;transition:.14s}
.filepick:hover{border-color:var(--accent)}
/* filter toolbar */
.filterbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;
background:color-mix(in srgb,var(--accent) 4%,#f6f8fc);
border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.filterbar .fld{display:flex;flex-direction:column;gap:5px}
.filterbar label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.filterbar input,.filterbar select{padding:9px 11px;border:1px solid var(--border2);border-radius:var(--r-sm);
background-color:var(--card);font-size:14px;min-width:150px;height:40px}
.filterbar input:focus,.filterbar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.filterbar .spacer{flex:1}
/* ---- Pills / chips / counts ---- */
.pill{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:650;line-height:1.6;
white-space:nowrap}
.pill.new{background:var(--danger-bg);color:var(--danger)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.zero{background:#eef1f6;color:var(--muted)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.danger{background:var(--danger-bg);color:var(--danger)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;
padding:4px 11px;border-radius:20px;line-height:1.5;white-space:nowrap}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.danger{background:var(--danger-bg);color:var(--danger)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.info{background:var(--info-bg);color:var(--info)}
.chip.muted{background:#eef1f6;color:var(--muted)}
.count{display:inline-flex;align-items:center;justify-content:center;background:#eef1f6;color:var(--muted);
border-radius:20px;font-size:12px;font-weight:700;padding:1px 9px;min-width:22px;margin-left:2px;vertical-align:middle}
.navbar .count{margin-left:4px}
/* ---- Bulk bar ---- */
.bulkbar{position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);z-index:60;
background:var(--card);border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
padding:11px 18px;display:flex;align-items:center;gap:14px;
transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
.bulkbar.show{transform:translate(-50%,0)}
.bulkbar .cnt{font-weight:700;font-size:14px}
.rowchk,.allchk{width:17px;height:17px}
/* ---- Account box / lang / bell ---- */
.acctbox{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;
background:var(--card);border:1px solid var(--border2);border-radius:24px;box-shadow:var(--sh-sm)}
.acctbox .avatar{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;text-transform:uppercase}
.acctbox .who{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.15}
.acctbox .who small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.lang-switch{display:inline-flex;gap:2px;padding:2px;border-radius:20px;
background:var(--line)}
.lang-switch .lang-opt{border:none;border-radius:20px;padding:5px 11px;
font-size:11px;letter-spacing:.03em}
.lang-switch .lang-opt.on{background:var(--card);color:var(--accent2);box-shadow:var(--sh-sm)}
.lang-opt{font-size:11.5px;font-weight:700;color:var(--muted);padding:6px 10px;cursor:pointer;
border:none;background:none;border-right:1px solid var(--border);transition:.12s;font-family:inherit}
.lang-opt:last-child{border-right:none}
.lang-opt:hover{background:var(--soft);color:var(--ink)}
.lang-opt.on{background:var(--accent);color:#fff}
.badge-dot{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;
font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:20px;
display:flex;align-items:center;justify-content:center;padding:0 4px;
box-shadow:0 0 0 3px var(--card);animation:notif-pop .25s ease-out}
@keyframes notif-pop{from{transform:scale(.55)}to{transform:scale(1)}}
/* ---- Chart animations ---- */
.chartbox{--d:0s}
/* vertical grow-in bars (SVG) */
.gbar{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;
transition:transform .85s cubic-bezier(.2,.85,.25,1)}
.charts-in .gbar{transform:scaleY(1)}
.gbar-lbl{opacity:0;transition:opacity .5s ease .35s}
.charts-in .gbar-lbl{opacity:1}
/* horizontal bars (HTML) */
.hbar{background:#eef1f6;border-radius:7px;height:12px;overflow:hidden}
.hbar-fill{height:100%;width:0;border-radius:7px;background:var(--accent);
transition:width 1s cubic-bezier(.2,.85,.25,1)}
.charts-in .hbar-fill{width:var(--w,0)}
.hrow{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;margin:9px 0;font-size:13px}
.hrow .k{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .v{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
/* funnel */
.funnel .hbar-fill{background:var(--grad)}
/* svg line/area draw */
path.draw{stroke-dasharray:1;stroke-dashoffset:1}
.charts-in path.draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s ease}
.areafill{opacity:0;transition:opacity .8s ease .3s}
.charts-in .areafill{opacity:1}
/* donut */
.donut circle.seg{transition:stroke-dashoffset 1.05s cubic-bezier(.3,.9,.3,1)}
/* count-up value comes from data-count via charts.js */
/* ---- Toasts ---- */
.toast-wrap{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:10px;
max-width:min(400px,calc(100vw - 32px))}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--card);
border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--r);
box-shadow:var(--sh-lg);padding:13px 14px;font-size:14px;font-weight:550;color:var(--ink);
opacity:0;transform:translateX(120%);transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.3,.5,1)}
.toast.show{opacity:1;transform:translateX(0)}
.toast.hide{opacity:0;transform:translateX(120%)}
.toast svg{color:var(--accent);flex:none;margin-top:1px}
.toast span{flex:1;line-height:1.45}
.toast .close{cursor:pointer;color:var(--muted);border:none;background:none;padding:0;flex:none;margin-top:1px}
.toast .close:hover{color:var(--ink)}
/* ---- Responsive ---- */
@media (max-width:640px){
.topbar{padding:10px 16px}
main{padding:0 16px;margin:20px auto}
.card{padding:18px 16px}
.acctbox .who{display:none}
/* Handy: Marke und Bedienelemente teilen sich Zeile 1, die Suche bekommt
Zeile 2 ueber die volle Breite — dort ist sie am besten zu treffen.
Die Suche gibt es nur hier; ausblenden wuerde sie unerreichbar machen. */
.topbar{align-items:center}
.topbar .brandwrap{order:1}
.topbar .right{order:2;flex-wrap:nowrap;width:auto;gap:4px;margin-left:auto}
.topsearch{order:3;flex:1 0 100%;margin:2px 0 0;min-width:0}
.topsearch input{width:100%}
.v-sep{display:none}
.lang-opt{padding:5px 6px;font-size:10.5px}
.lang-switch{flex:none}
.icon-btn{width:36px;height:36px;flex:none}
/* Die Rolle steht auf dem Handy schon im Menue — der Platz gehoert der Suche. */
.acctbox{flex:none;padding:5px}
.acctbox .role-chip{display:none}
.wm-text{font-size:17px}
.wordmark .wm-ring{width:18px;height:18px}
/* gap wirkt auch ZWISCHEN den umgebrochenen Zeilen — klein halten, sonst
kostet jede Zeile zusaetzlich 18px. Drei kompakte Zeilen sind hier
robuster als drei knapp erzwungene zwei. */
.topbar{padding:8px 14px;gap:6px}
/* Auf dem Handy traegt die Wortmarke allein — "ZVL Portal" steht ohnehin
als Seitentitel im Inhalt. Spart die dritte Zeile in der Kopfleiste. */
.topbar .brand,
.topbar .brand-sep{display:none}
}
/* --- ensure arrow room for selects inside filter/form containers (order wins) --- */
.filterbar select{padding-right:32px}
.formgrid select{padding-right:34px}
select.miniput{padding-right:26px}
/* ---- Statusspalte in den Positionslisten ----
Vorher stand alles ohne Abstand untereinander. Jetzt: die Kennzeichen in
einer eigenen Zeile, darunter die Nachweiskette als ruhiger, eingerueckter
Block — auf einen Blick erkennbar, wer wann entschieden hat. */
.statuscell{min-width:196px}
.statuscell .badges{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.statuscell .trail{margin-top:7px;padding-left:9px;border-left:2px solid var(--line);
display:flex;flex-direction:column;gap:2px}
/* Jeder Schritt genau eine Zeile: Stufe und Datum stehen fest, allein der
Name kuerzt sich bei Bedarf. Der volle Text steht im Tooltip. */
.trail .tstep{font-size:11px;line-height:1.45;color:var(--muted);
display:flex;flex-wrap:nowrap;gap:5px;align-items:baseline}
.trail .tstep b{font-weight:700;color:#4a5568;font-size:11px;flex:none}
.trail .tstep .twho{color:var(--muted);flex:1 1 auto;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trail .tstep .twhen{font-variant-numeric:tabular-nums;opacity:.8;flex:none}
/* Abweichendes Ergebnis (Ablehnung, Rueckfrage) faellt auf. */
.trail .tstep .tout{font-weight:700;color:var(--warn);flex:none}
.chip.urgent{background:#F69546;color:#fff}
/* Serien-Etikett. Der Ton stand vorher zweimal als #EEF2FF/#3538CD direkt im
HTML - eine fuenfte Farbe, die es in der Palette gar nicht gab. Jetzt hat
sie einen Namen und existiert genau einmal. */
.chip.series{background:#EEF2FF;color:#3538CD}
/* ==========================================================================
Einstellungen: Abschnittsliste links, ein Abschnitt rechts.
Ersetzt die endlose Bahn gestapelter Karten.
========================================================================== */
.setwrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
/* --- Spalte 1 --- */
.setnav{position:sticky;top:112px;display:flex;flex-direction:column;gap:12px}
.setcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
padding:16px 16px 6px;box-shadow:var(--sh-sm)}
.setcard-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;
justify-content:center;color:#fff;margin-bottom:11px}
.setcard-t{font-size:17px;font-weight:750;letter-spacing:-.02em;line-height:1.2}
.setcard-s{font-size:12.5px;color:var(--muted);margin-top:1px}
.setcard-rows{margin-top:12px;border-top:1px solid var(--line)}
.setcard-rows div{display:flex;justify-content:space-between;align-items:center;gap:10px;
padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.setcard-rows div:last-child{border-bottom:none}
.setcard-rows span{color:var(--muted)}
.setcard-rows b{font-weight:700;font-size:12px}
.setcard-rows .st-on{color:var(--ok)}
.setcard-rows .st-off{color:var(--muted)}
.setlist{display:flex;flex-direction:column;gap:2px;background:var(--card);
border:1px solid var(--border);border-radius:var(--r-lg);padding:6px;
box-shadow:var(--sh-sm)}
.setlink{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
padding:9px 11px;border:none;background:none;border-radius:10px;cursor:pointer;
font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-soft);
transition:background .12s,color .12s}
.setlink svg{color:var(--muted);flex:none;transition:color .12s}
.setlink:hover{background:var(--soft);color:var(--ink)}
.setlink.active{background:var(--soft);color:var(--accent2)}
.setlink.active svg{color:var(--accent)}
.setlink.active span{font-weight:700}
/* --- Spalte 2 --- */
.setmain{min-width:0}
.setsec{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
padding:22px 24px;box-shadow:var(--sh-sm);margin-bottom:14px}
.setsec[hidden]{display:none}
.sechead{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sechead h2{margin:0 0 4px;font-size:18px;font-weight:750;letter-spacing:-.02em}
.sechead p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.setsub{font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
/* Kontrollkaestchen mit Erklaerung — eine Zeile Titel, darunter der Grund. */
.setopts{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.setopt{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;
border:1px solid transparent;border-radius:var(--r);cursor:pointer;transition:.12s}
.setopt:hover{background:var(--soft);border-color:var(--border)}
.setopt input{margin:1px 0 0;flex:none}
.setopt b{display:block;font-size:14px;font-weight:650;color:var(--ink)}
.setopt em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);
line-height:1.5;margin-top:2px;max-width:72ch}
/* Hinweis an einem Schalter, dessen Einschalten eine Entscheidung ist und
nicht nur eine Einstellung - sichtbar abgesetzt, nicht nur Kleingedrucktes. */
.setopt em.warnnote{margin-top:7px;padding:8px 10px;border-radius:8px;
background:var(--warn-bg);border:1px solid #F0DCB8;color:#8A5A0B}
.setnote{margin-top:14px;padding:10px 13px;border:1px solid var(--border);
border-radius:var(--r);background:var(--soft);font-size:12.5px;color:var(--muted);
line-height:1.55}
.setnote.warn{background:var(--warn-bg);border-color:#F0DCB8;color:#8A5A0B}
.setnote code{font-size:12px;background:var(--card);border:1px solid var(--border);
border-radius:5px;padding:1px 5px}
.setsec input.ro{background:#EEF1F5;font-weight:600}
.setrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:0}
.setrow .fld{display:flex;flex-direction:column;gap:5px;min-width:250px}
.setrow .fld label{font-size:12px;font-weight:650;color:var(--muted)}
.setrow .fld input{padding:9px 11px;border:1px solid var(--border2);
border-radius:var(--r-sm);font-size:14px;width:100%}
.setmeta{font-size:12.5px;color:var(--muted)}
.setrule{border:none;border-top:1px solid var(--line);margin:18px 0}
.cellinput{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;
font-size:13px;background:var(--card)}
.cellinput.cur{width:72px;text-transform:uppercase}
.lockcell{font-size:13px;white-space:nowrap;color:var(--muted)}
/* Speicherleiste: bleibt am unteren Rand stehen, damit der Knopf auch bei
langen Abschnitten (E-Mail, Entitaeten) erreichbar ist. */
.setsave{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;
flex-wrap:wrap;justify-content:flex-end;background:var(--card);
border:1px solid var(--border);border-top-color:var(--border2);
border-radius:var(--r-lg);padding:12px 16px;box-shadow:var(--sh);
margin-bottom:14px}
.setsave[hidden]{display:none}
.setsave span{font-size:12.5px;color:var(--muted);margin-right:auto}
@media (max-width:860px){
.setwrap{grid-template-columns:1fr}
.setnav{position:static}
.setlist{flex-direction:row;overflow-x:auto;gap:4px}
.setlist::-webkit-scrollbar{height:0}
.setlink{width:auto;white-space:nowrap}
.setsec{padding:16px 15px}
}
/* ==========================================================================
Kopfleiste: Konto-Menue
Adresse, Rolle, Uhrzeit, Sprache und Abmelden lagen nebeneinander in der
Leiste. Sie stehen jetzt hinter einem einzigen Knopf — die Leiste zeigt
nur noch Marke, Suche, Posteingang und Konto.
========================================================================== */
.acctmenu{position:relative;display:inline-flex}
.acctbtn{display:inline-flex;align-items:center;justify-content:center;padding:0;
width:38px;height:38px;border:none;border-radius:13px;background:none;
cursor:pointer;box-shadow:none;transition:transform .14s}
.acctbtn .avatar{width:38px;height:38px;border-radius:13px;background:var(--grad);
color:#fff;display:flex;align-items:center;justify-content:center;
font-size:15px;font-weight:800;text-transform:uppercase;
box-shadow:var(--sh-sm);transition:box-shadow .16s}
.acctbtn:hover .avatar{box-shadow:var(--sh-accent)}
.acctmenu.open .acctbtn .avatar{box-shadow:0 0 0 3px var(--accent-ring)}
/* text-align:left ist noetig: das Menue haengt in der rechtsbuendigen Zone
der Kopfleiste und erbte deren Ausrichtung - "Account" und "Mein Profil"
klebten am rechten Rand. */
.acctpop{position:absolute;top:calc(100% + 8px);right:0;min-width:290px;z-index:50;text-align:left;
background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
box-shadow:var(--sh-lg);padding:8px;
opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
transform-origin:top right;
transition:opacity .16s ease,transform .18s cubic-bezier(.34,1.3,.5,1),visibility .16s}
.acctmenu.open .acctpop{opacity:1;visibility:visible;transform:none}
/* Kopf des Menues als eigene Karte: getoenter Grund, abgerundet, der
Buchstabe im Markenverlauf. Vorher war es eine Zeile mit Trennstrich -
dieselbe Angabe, aber ohne jede Ordnung. */
.acct-card{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;
border-radius:14px;background:
linear-gradient(135deg, color-mix(in srgb,var(--accent) 10%,#fff),
color-mix(in srgb,var(--accent) 4%,#fff));
border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.acct-card .avatar.lg{width:42px;height:42px;border-radius:14px;flex:none;
background:var(--grad);color:#fff;display:flex;align-items:center;
justify-content:center;font-size:17px;font-weight:800;text-transform:uppercase;
box-shadow:var(--sh-accent)}
.acct-id{min-width:0}
/* Die Adresse darf umbrechen statt abzuschneiden - eine halbe Adresse
beantwortet die Frage "als wem bin ich hier angemeldet" nicht. */
.acct-mail{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35;
overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden}
.acct-meta{display:flex;align-items:center;gap:7px;margin-top:6px;
font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;
min-width:0;flex-wrap:wrap}
/* Die Rolle ist eine Angabe, kein Knopf: im Menue ruhig statt im Farbverlauf. */
.acct-meta .role-chip{background:#fff;color:var(--accent2);
border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
font-size:9.5px;padding:3px 9px;border-radius:20px}
.acct-zone{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Eine Zeile je Ziel: Symbolkachel, Titel, Erklaerung, Pfeil. Die Kachel
gibt den Zeilen eine gemeinsame Kante, an der das Auge entlanglaeuft -
nackte Symbole in unterschiedlicher Breite tun das nicht. */
.acct-row{display:flex;align-items:center;gap:11px;padding:9px 10px;
border-radius:12px;color:var(--ink);transition:background .12s,transform .12s}
.acct-row + .acct-row{margin-top:2px}
.acct-ic{width:32px;height:32px;border-radius:10px;flex:none;display:flex;
align-items:center;justify-content:center;background:var(--soft);
color:var(--accent2);transition:background .12s,color .12s}
.acct-txt{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.acct-txt b{font-size:13.5px;font-weight:650}
.acct-txt small{font-size:11.5px;color:var(--muted);font-weight:500;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-go{margin-left:auto;color:var(--border2);font-size:19px;line-height:1;
transition:transform .14s,color .12s}
.acct-row:hover{background:var(--soft)}
.acct-row:hover .acct-ic{background:var(--accent);color:#fff}
.acct-row:hover .acct-go{color:var(--accent);transform:translateX(2px)}
.acct-row[aria-current]{background:var(--accent-soft)}
.acct-row[aria-current] .acct-ic{background:var(--accent);color:#fff}
/* ---- Uhr in der Kopfleiste ----
Datum und Uhrzeit standen bisher nur im Konto-Menue. Wer eine Faelligkeit
beurteilt, braucht beides im Blick, ohne zu klicken. Die Sekunden laufen
kleiner und leiser mit: sie zappeln, ohne gebraucht zu werden. */
.headclock{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
padding:3px 14px 3px 4px;margin-right:2px;border-right:1px solid var(--line);
line-height:1.15;flex:none}
.headclock .hc-time{font-size:16px;font-weight:750;letter-spacing:-.015em;
color:var(--ink);font-variant-numeric:tabular-nums}
.headclock .hc-sec{font-size:11.5px;font-weight:600;color:var(--muted);margin-left:1px}
.headclock .hc-date{font-size:11px;color:var(--muted);white-space:nowrap}
/* Eng wird es zuerst beim Datum, dann bei der ganzen Uhr - die Navigation
ist wichtiger als die Sekunden. */
@media (max-width:1180px){ .headclock .hc-date{display:none}
.headclock{border-right:0;padding-right:4px} }
@media (max-width:860px){ .headclock{display:none} }
/* .menu-sec wird im Navigationsmenue eingeblendet und startet dort mit
opacity:0. Hier gibt es keine solche Animation — sonst bliebe die
Ueberschrift "Language" unsichtbar. */
.acctpop .menu-sec{opacity:1;transform:none;padding:6px 8px 3px}
/* Sprache: Beschriftung links, drei Schalter rechts - eine Zeile, so hoch
wie die uebrigen. Vorher nahmen drei Knoepfe ueber die volle Breite so
viel Platz wie der ganze Rest des Menues. */
.acct-langrow{display:flex;align-items:center;gap:10px;padding:7px 10px 7px 12px;
margin-top:4px;border-top:1px solid var(--line)}
.acct-langlbl{font-size:12.5px;font-weight:600;color:var(--muted)}
.langseg{display:inline-flex;margin-left:auto;padding:2px;gap:2px;
background:var(--line);border-radius:20px}
.langseg .lang-opt{border:none;background:none;border-radius:20px;
padding:5px 11px;font-size:11px;font-weight:800;letter-spacing:.03em;
color:var(--muted);cursor:pointer;font-family:inherit;transition:.14s}
.langseg .lang-opt:hover{color:var(--ink)}
.langseg .lang-opt.on{background:var(--card);color:var(--accent2);
box-shadow:var(--sh-sm)}
/* Abmelden steht abgesetzt und leiser: Es ist die einzige Zeile hier, die
etwas beendet - sie soll nicht neben "Mein Profil" gleich laut sein. */
.acct-out{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 12px;
border-radius:12px;font-size:13px;font-weight:600;color:var(--muted);
border-top:1px solid var(--line);margin-top:4px;padding-top:11px;
transition:background .12s,color .12s}
.acct-out svg{opacity:.8}
.acct-out:hover{background:var(--danger-bg);color:var(--danger)}
.acct-out:hover svg{opacity:1}
/* Die Suche ist das groesste Element der Leiste — sie darf leiser sein. */
.topsearch{flex:0 1 330px}
.topsearch input{background:var(--card);border-color:var(--border2)}
/* ==========================================================================
Anmeldung — zweigeteilte Seite
Links die Buehne "Nachtschicht" (eigener Block direkt darunter), rechts das
Formular. Hier steht nur das Geruest.
========================================================================== */
main.authmain{max-width:none;margin:0;padding:0}
/* Volle Hoehe: auf dieser Seite gibt es keine Kopfleiste mehr, von der
etwas abzuziehen waere. */
.auth{display:grid;grid-template-columns:1.15fr .85fr;min-height:100vh;position:relative}
/* Sprachwahl oben rechts. Sie liegt ueber beiden Spalten, damit sie auch auf
schmalen Fenstern an derselben Stelle bleibt. */
.auth-lang{position:absolute;top:20px;right:22px;z-index:5}
/* Die Wortmarke steht auf der dunklen Flaeche — die Farben aus der Kopfleiste
sind dort zu dunkel, deshalb hier eine helle Fassung. */
.auth-mark{margin-bottom:26px}
.auth-mark .wm-a{color:#fff;-webkit-text-fill-color:#fff;background:none}
.auth-mark .wm-b{color:rgba(255,255,255,.68)}
.auth-mark .wm-plus{color:var(--brand-cyan)}
.auth-mark .wm-ring{color:var(--brand-cyan)}
.auth-mark .wm-text{font-size:17px}
/* Grundflaeche der Buehne. Die Variablen und Feinheiten stehen weiter unten
im Block "Nachtschicht" — hier nur Flaeche, Rand und Schriftfarbe. */
.auth-stage{position:relative;overflow:hidden;display:flex;flex-direction:column;
justify-content:center;padding:56px 6vw;background:var(--brand-navy);color:#fff}
.auth-side{display:flex;align-items:center;justify-content:center;padding:48px 5vw}
.auth-box{width:100%;max-width:360px}
.auth-intro{margin-bottom:22px}
.auth-intro h2{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0 0 4px}
.auth-intro p{margin:0;color:var(--muted);font-size:13.5px}
.auth-form{display:flex;flex-direction:column}
.auth-form label{font-size:12px;font-weight:650;color:var(--muted);margin-bottom:6px}
.auth-form input{padding:12px 13px;border:1px solid var(--border2);border-radius:10px;
font-size:15px;margin-bottom:16px;background:var(--card);transition:.14s}
.auth-form input:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-ring)}
.auth-form .btn{justify-content:center;padding:13px;font-size:15px;margin-top:4px}
.auth-foot{text-align:center;color:var(--muted);font-size:11.5px;margin-top:20px}
@media (max-width:940px){
.auth{grid-template-columns:1fr;min-height:0}
.auth-stage{padding:30px 24px;gap:18px}
/* Die Sprachwahl wuerde sonst auf der dunklen Flaeche ueber der Wortmarke
liegen — auf schmalen Fenstern wandert sie unter das Formular. */
.auth-lang{position:static;display:flex;justify-content:center;margin:0 auto 26px}
.auth-mark{margin-bottom:18px}
.auth-side{padding:34px 24px 48px}
.auth-box{max-width:400px;margin:0 auto}
}
/* ==========================================================================
ZVL Portal - Login-Bühne "Nachtschicht".
x-Achse = Zeit, y-Achse = Bearbeitungsstufe. Kein Schaubild des Prozesses,
sondern ein Fenster in die laufende Maschine. Jedes Element trägt eine
NEGATIVE animation-delay: die Schicht läuft schon, wenn die Seite aufgeht.
GRUNDREGEL (nicht verhandelbar, gilt dauerhaft):
Auf dieser Fläche steht NIE eine Zahl, NIE ein Betrag, NIE eine
Gesellschaft, NIE ein Zähler. Die Seite liegt VOR der Anmeldung - jeder
echte Wert wäre ein Informationsabfluss an einen nicht authentifizierten
Betrachter, jeder erfundene Wert eine Lüge. Deshalb sind Positionen hier
26x3px-Striche ohne Beschriftung. Wer ein Euro-Zeichen, ein Mandantenkürzel
oder "heute: n Positionen" ergänzen will, ändert das Konzept, nicht das
Styling - und muss vorher mit der IT-Sicherheit reden.
TIMING-ETHIK (bitte nicht "weicher" machen):
Fahrt strikt linear, Abstiege ausschließlich cubic-bezier(.65,0,.25,1),
sonst nichts. Kein Bounce, kein Overshoot, kein Scale-Pop, kein Glow-Puls.
Ein Abstieg soll schalten wie ein Relais, nicht wirken wie eine Animation.
PERIODEN: 17 / 19,3 / 21,7 / 23,1 / 26,5 / 28,9 / 31,3 / 33,7 / 37,1 s,
dazu 3 Gates und 6 Warteschlangen-Striche mit wieder anderen Perioden.
Bewusst quasi-teilerfremd: nichts rastet in einen gemeinsamen Takt ein, das
Bild wiederholt sich innerhalb einer Sitzung nicht sichtbar. Perioden NICHT
verkürzen, um es "lebendiger" zu machen - die Langsamkeit ist das Konzept.
18 animierte Knoten, ausschließlich transform/opacity (eine Ausnahme:
color auf 26x3px beim Rückläufer).
NOTBREMSE, falls auf alten Notebooks zu teuer gemessen: eine Zeile -
.zvlf-item--wide{display:none} global statt nur unter 940px. Das senkt die
Striche von 9 auf 5 und lässt die Komposition intakt.
========================================================================== */
.auth-stage{
/* --zvlf-pitch ist die EINZIGE Quelle für jede Fallhöhe. Kein Keyframe
darf einen y-Wert hart setzen, sonst driften Bahnen und Abstiege beim
ersten Breakpoint auseinander. */
--zvlf-pitch:54px;
--zvlf-stick:26px;
--zvlf-tail:46px;
--zvlf-gut:124px; /* Beschriftungsspalte links */
--zvlf-qw:14px; /* Breite eines Rückstau-Strichs */
--zvlf-qgap:18px; /* Abstand der Rückstau-Striche untereinander */
/* Gates sind Zeitpunkte auf der x-Achse. Wer sie verschiebt, muss die
x-Werte in den drei Keyframe-Sätzen mitziehen: die Striche überfahren
die Linie bewusst um ~2%, deshalb können die Keyframes diese Variablen
nicht direkt verwenden. */
--zvlf-g1:20%;
--zvlf-g2:45%;
--zvlf-g3:71%;
/* Bernstein für den Rückläufer. Fallback-Hex, weil --warn (#b3730f) auf
Navy nicht mehr lesbar ist; die Aufhellung passiert unten per color-mix,
sobald der Browser sie kann. */
--zvlf-flag:#e9a53f;
/* 22px statt der früheren 38px: die H1 ist jetzt Bildunterschrift der
Fläche und keine freistehende Aussage mehr. */
gap:22px;
}
@supports (color:color-mix(in srgb,#000 50%,#fff)){
.auth-stage{--zvlf-flag:color-mix(in srgb,var(--warn) 52%,#ffd9a8)}
}
.auth-stage .zvlf-head,
.auth-stage .zvlf-field{position:relative;z-index:1}
/* Ruhiger Grund, statisch. Das früher hier animierte "Atmen" ist ersatzlos
gestrichen: die Fläche lebt schon durch die 18 Knoten, ein zusätzlicher
Verlauf über die volle Panelbreite wäre der teuerste und am wenigsten
informative Knoten des Bildes gewesen. */
.zvlf-glow{position:absolute;inset:0;z-index:0;pointer-events:none}
.zvlf-glow::before,.zvlf-glow::after{content:"";position:absolute;inset:0}
.zvlf-glow::before{opacity:.16;
background:radial-gradient(46% 40% at 16% 12%,var(--brand-cyan),transparent 68%)}
.zvlf-glow::after{opacity:.26;
background:radial-gradient(56% 48% at 78% 80%,var(--accent),transparent 70%)}
/* ---------- Kopf ---------- */
.auth-stage .zvlf-kicker{margin:0 0 8px;font-size:10.5px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.46)}
.auth-stage .zvlf-title{margin:0;font-size:34px;line-height:1.12;font-weight:700;
letter-spacing:-.02em;color:#fff}
/* Zwei Spans statt
: im Bannermodus wird daraus eine Zeile, ohne dass
beim Ausblenden eines
die Wortlücke verloren geht. */
.zvlf-title__line{display:block}
/* ---------- Fläche ---------- */
.zvlf-field{display:grid;grid-template-columns:var(--zvlf-gut) 1fr;gap:0 18px;
align-items:start}
/* Die vier Statuswörter und die vier Rollen kommen aus den i18n-Keys der
Anwendung (status.* / role.*, siehe data-i18n im Markup) und werden NICHT
ins Template getippt. Grund: wer sie "sprachlich aufhübschen" will, muss
dafür die Übersetzungsdatei anfassen. Das ist die einzige strukturelle
Bremse gegen den Slogan, der sonst in zwei Jahren hier wieder steht. */
.auth-stage .zvlf-lanes{list-style:none;margin:0;padding:0;position:relative;
height:calc(var(--zvlf-pitch)*4)}
.auth-stage .zvlf-lane{position:absolute;left:0;right:0;
top:calc(var(--i)*var(--zvlf-pitch));height:var(--zvlf-pitch);
display:flex;align-items:center;gap:9px}
.zvlf-lane__ic{display:flex;flex:none;color:rgba(255,255,255,.32)}
.zvlf-lane__ic svg{width:14px;height:14px;display:block}
.zvlf-lane__tx{min-width:0}
.zvlf-lane__name{display:block;font-size:12.5px;font-weight:700;line-height:1.2;
letter-spacing:-.01em;color:rgba(255,255,255,.86)}
.zvlf-lane__actor{display:block;font-size:10.5px;line-height:1.3;
color:rgba(255,255,255,.40)}
.zvlf-track{position:relative;height:calc(var(--zvlf-pitch)*4);overflow:hidden}
.zvlf-rule{position:absolute;left:0;right:0;height:1px;
top:calc(var(--i)*var(--zvlf-pitch) + var(--zvlf-pitch)/2);
background:rgba(255,255,255,.12)}
/* Buchhalterischer Doppelstrich: ab dem letzten Gate läuft unter der
Paid-Bahn eine zweite Haarlinie in --ok. So wird seit je ein Konto
abgeschlossen - fachlich präziser als der früher hier stehende
Cyan-Verlauf, und es kostet keinen zusätzlichen Knoten. */
.zvlf-rule--paid::after{content:"";position:absolute;left:var(--zvlf-g3);right:0;
top:4px;height:1px;background:var(--ok);opacity:.55}
/* Gates: die Abstiegsspalten. Drei unabhängige langsame Uhren, bewusst NICHT
mit den Striche-Perioden synchronisiert - sonst entsteht ein Takt, und ein
Takt wäre eine Behauptung über Durchlaufzeiten. */
.zvlf-gate{position:absolute;width:1px;left:var(--x);
top:calc(var(--i)*var(--zvlf-pitch) + var(--zvlf-pitch)/2);
height:var(--zvlf-pitch);opacity:.18;
background:linear-gradient(180deg,var(--brand-cyan),transparent);
animation:zvlf-gate var(--g) ease-in-out infinite alternate;
animation-delay:var(--d)}
@keyframes zvlf-gate{from{opacity:.18}to{opacity:.52}}
/* Rückstau vor den beiden menschlichen Gates (Prüfung, Freigabe). Drei
Striche je Gate mit teilerfremden Perioden: die sichtbare Tiefe wandert von
selbst zwischen 0 und 3. Kein Zähler, keine Zahl - nur Anwesenheit. */
.zvlf-queue{position:absolute;width:var(--zvlf-qw);height:3px;border-radius:2px;
background:rgba(255,255,255,.50);transform-origin:left center;
left:calc(var(--x) - var(--zvlf-qw) - 8px - var(--n)*var(--zvlf-qgap));
top:calc(var(--i)*var(--zvlf-pitch) + var(--zvlf-pitch)/2 - 2px);
opacity:0;animation:zvlf-queue var(--g) linear infinite;animation-delay:var(--d)}
@keyframes zvlf-queue{
0% {opacity:0; transform:translateX(-14px) scaleX(.25)}
9% {opacity:.55;transform:translateX(0) scaleX(1)}
62% {opacity:.55;transform:translateX(0) scaleX(1)}
70% {opacity:.75;transform:translateX(5px) scaleX(1)}
79% {opacity:0; transform:translateX(28px) scaleX(.5)}
100%{opacity:0; transform:translateX(28px) scaleX(.5)}
}
/* ---------- die Positionen ----------
Jedes .zvlf-item ist eine durchsichtige Box über die VOLLE Trackbreite;
sichtbar ist nur das ::before (26px). Dadurch ist translateX(%) ein Prozent
der TRACKBREITE - ein Keyframe-Satz bedient jede Panelbreite, ohne dass
irgendwo eine Pixelzahl nachgezogen werden müsste. */
.zvlf-item{position:absolute;left:0;width:100%;height:3px;
top:calc(var(--zvlf-pitch)/2 - 2px);
color:#fff;opacity:0;pointer-events:none;
animation:var(--k) var(--t) linear infinite;animation-delay:var(--d)}
.zvlf-item::before{content:"";position:absolute;left:0;top:0;
width:var(--zvlf-stick);height:3px;border-radius:2px;background:currentColor}
.zvlf-item::after{content:"";position:absolute;left:calc(-1*var(--zvlf-tail));
top:1px;width:var(--zvlf-tail);height:1px;opacity:.34;
background:linear-gradient(270deg,currentColor,transparent)}
/* Saubere Fahrt: drei Abstiege an den drei Gates. */
@keyframes zvlf-trip-a{
0% {transform:translate3d(-6%,0,0);opacity:0}
4% {opacity:.42}
20% {transform:translate3d(19%,0,0);opacity:.42;
animation-timing-function:cubic-bezier(.65,0,.25,1)}
25% {transform:translate3d(21%,var(--zvlf-pitch),0);opacity:.62}
45% {transform:translate3d(44%,var(--zvlf-pitch),0);opacity:.62;
animation-timing-function:cubic-bezier(.65,0,.25,1)}
50% {transform:translate3d(46%,calc(var(--zvlf-pitch)*2),0);opacity:.80}
70% {transform:translate3d(70%,calc(var(--zvlf-pitch)*2),0);opacity:.80;
animation-timing-function:cubic-bezier(.65,0,.25,1)}
75% {transform:translate3d(72%,calc(var(--zvlf-pitch)*3),0);opacity:1}
94% {transform:translate3d(calc(100% - var(--zvlf-stick)),calc(var(--zvlf-pitch)*3),0);opacity:1}
100%{transform:translate3d(calc(106% - var(--zvlf-stick)),calc(var(--zvlf-pitch)*3),0);opacity:0}
}
/* Wartend vor dem Freigabe-Gate: x kriecht zwischen 38% und 56% der eigenen
Periode von 40% auf 43%. Ein voller Stillstand liest sich als Bug, ein
Kriechen liest sich als Warteschlange. */
@keyframes zvlf-trip-b{
0% {transform:translate3d(-6%,0,0);opacity:0}
5% {opacity:.42}
17% {transform:translate3d(19%,0,0);opacity:.42;
animation-timing-function:cubic-bezier(.65,0,.25,1)}
22% {transform:translate3d(21%,var(--zvlf-pitch),0);opacity:.62}
38% {transform:translate3d(40%,var(--zvlf-pitch),0)}
56% {transform:translate3d(43%,var(--zvlf-pitch),0);opacity:.62;
animation-timing-function:cubic-bezier(.65,0,.25,1)}
61% {transform:translate3d(45%,calc(var(--zvlf-pitch)*2),0);opacity:.80}
76% {transform:translate3d(69%,calc(var(--zvlf-pitch)*2),0);opacity:.80;
animation-timing-function:cubic-bezier(.65,0,.25,1)}
81% {transform:translate3d(71%,calc(var(--zvlf-pitch)*3),0);opacity:1}
95% {transform:translate3d(calc(100% - var(--zvlf-stick)),calc(var(--zvlf-pitch)*3),0);opacity:1}
100%{transform:translate3d(calc(106% - var(--zvlf-stick)),calc(var(--zvlf-pitch)*3),0);opacity:0}
}
/* Rückläufer. Genau ein Strich auf der Fläche fährt diese Bahn, auf der
längsten Periode (37,1s) - also etwa alle 37 Sekunden einmal zu sehen.
Der Aufstieg passiert MITTEN in der Bahn und nicht an einem Gate: die
Prüfung gibt die Position zurück, das ist kein Statusübergang nach
vorn. Dass die drei späteren Abstiege dann neben den Gate-Spalten liegen,
ist kein Fehler, sondern der Punkt - der Rückläufer ist aus dem Takt.
Der Aufstieg bekommt als einziger eine weichere Kurve: eine Rücknahme ist
eine Entscheidung, kein Schaltschritt. */
@keyframes zvlf-trip-c{
0% {transform:translate3d(-6%,0,0);opacity:0;color:#fff}
4% {opacity:.42}
16% {transform:translate3d(19%,0,0);animation-timing-function:cubic-bezier(.65,0,.25,1)}
21% {transform:translate3d(21%,var(--zvlf-pitch),0);opacity:.62}
36% {transform:translate3d(38%,var(--zvlf-pitch),0);color:#fff;
animation-timing-function:cubic-bezier(.4,0,.2,1)}
41% {transform:translate3d(40%,0,0);opacity:.50;color:var(--zvlf-flag)}
57% {transform:translate3d(60%,0,0);opacity:.50;color:var(--zvlf-flag);
animation-timing-function:cubic-bezier(.65,0,.25,1)}
62% {transform:translate3d(62%,var(--zvlf-pitch),0);opacity:.62;color:#fff}
74% {transform:translate3d(74%,var(--zvlf-pitch),0);
animation-timing-function:cubic-bezier(.65,0,.25,1)}
79% {transform:translate3d(76%,calc(var(--zvlf-pitch)*2),0);opacity:.80}
87% {transform:translate3d(86%,calc(var(--zvlf-pitch)*2),0);
animation-timing-function:cubic-bezier(.65,0,.25,1)}
91% {transform:translate3d(88%,calc(var(--zvlf-pitch)*3),0);opacity:1}
97% {transform:translate3d(calc(100% - var(--zvlf-stick)),calc(var(--zvlf-pitch)*3),0);opacity:1}
100%{transform:translate3d(calc(106% - var(--zvlf-stick)),calc(var(--zvlf-pitch)*3),0);opacity:0}
}
/* ---------- Anstand: Ruhe, solange getippt wird ----------
Bewegung im Augenwinkel, während jemand ein Passwort eingibt, ist die
einzige tägliche Zumutung dieser Fläche. Beide Regeln sind reine
Zusatzleistung: fällt :has() aus, fällt nur diese Regel aus; fehlt das
Script, bleibt die :has()-Regel. Ohne beides läuft die Fläche weiter. */
.auth-stage[data-zvlf-quiet] .zvlf-gate,
.auth-stage[data-zvlf-quiet] .zvlf-queue,
.auth-stage[data-zvlf-quiet] .zvlf-item{animation-play-state:paused}
body:has(input[type="password"]:focus) .zvlf-gate,
body:has(input[type="password"]:focus) .zvlf-queue,
body:has(input[type="password"]:focus) .zvlf-item{animation-play-state:paused}
/* ---------- Fußzeile: Umgebung und Build ----------
Das einzige Nicht-Dekorative auf dieser Seite. Es beantwortet die Frage,
die Kolleginnen und Kollegen mehrmals im Jahr falsch beantworten ("bin ich
gerade im Testsystem?") und verhindert damit echte Fehlbuchungen. */
/* Trenner als ::before des Folgeelements: wird ein Segment serverseitig
weggelassen (SHOW_BUILD=false), verschwindet sein Trennpunkt mit ihm.
Nie einen Platzhalter rendern. */
/* Negativ-Regel statt Modifier-Klasse: ALLES außer PROD wird zur gefüllten
Warnplakette. So kann man die Kennzeichnung im Template nicht vergessen -
man müsste sie aktiv fälschen. */
/* ---------- ruhiges Standbild ----------
Kein eingefrorener Zufallsmoment, sondern eine gesetzte Aufnahme: eine
absteigende Diagonale über die vier Bahnen (2/3/2/2), Helligkeit codiert
weiter die Stufe. Der bernsteinfarbene Rückläufer parkt bewusst spät in
der Bahn "Captured" und bricht die Diagonale - das Standbild erzählt
dieselbe Wahrheit wie die Bewegung. Spuren werden entfernt: eine
Bewegungsspur ohne Bewegung wäre eine Lüge. */
@media (prefers-reduced-motion:reduce){
.zvlf-gate,.zvlf-queue,.zvlf-item{animation:none}
.zvlf-gate{opacity:.30}
.zvlf-queue{opacity:.50;transform:none}
/* Im Standbild bleibt genau EIN Rückstau stehen (vor dem Freigabe-Gate).
Der zweite würde sich mit den geparkten Strichen der Bahn "Reviewed"
überlagern - zwei Marken übereinander sehen nach Fehler aus, nicht
nach Warteschlange. */
.zvlf-queue[data-gate="2"]{display:none}
.zvlf-item{opacity:calc(.50 + var(--sl)*.16);
transform:translate3d(var(--sx),calc(var(--sl)*var(--zvlf-pitch)),0)}
.zvlf-item--rework{color:var(--zvlf-flag)}
.zvlf-item::after{display:none}
}
/* ---------- Bannermodus über dem Formular ---------- */
@media (max-width:940px){
.auth-stage{--zvlf-pitch:30px;--zvlf-stick:20px;--zvlf-tail:34px;
--zvlf-gut:102px;gap:12px;padding:20px 24px}
.auth-stage .zvlf-title{font-size:24px}
.zvlf-title__line{display:inline}
.zvlf-field{gap:0 14px}
.zvlf-lane__name{font-size:11px}
.zvlf-lane__actor{font-size:9.5px}
/* 9 Striche -> 5. Der Rückläufer bleibt; er ist der Beat, den man kennt. */
.zvlf-item--wide{display:none}
}
@media (max-width:520px){
.auth-stage{--zvlf-pitch:26px;--zvlf-stick:16px;--zvlf-tail:26px;
--zvlf-gut:84px;--zvlf-qw:10px;--zvlf-qgap:13px}
.auth-stage .zvlf-title{font-size:21px}
.zvlf-field{gap:0 10px}
.zvlf-lane__ic{display:none}
.zvlf-lane__name{font-size:10.5px}
.zvlf-lane__actor{font-size:9px}
}
/* ==========================================================================
Pfadleiste — die zuletzt besuchten Seiten als anklickbare Kette
Sie soll fuehren, nicht dominieren: eine Zeile, kleine Schrift, gedeckt.
Die aktuelle Seite steht am Ende und ist bewusst kein Link.
========================================================================== */
.trail{position:sticky;top:calc(var(--h-topbar) + var(--h-navbar));z-index:29;display:flex;align-items:center;gap:9px;
padding:6px 20px;background:var(--card);border-bottom:1px solid var(--border);
font-size:12.5px;overflow-x:auto;scrollbar-width:none}
.trail::-webkit-scrollbar{height:0}
.trail-lbl{display:inline-flex;color:var(--muted);flex:none;opacity:.6}
.trail-list{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;
min-width:0}
.trail-item{display:flex;align-items:center;white-space:nowrap;flex:none}
/* Trennzeichen als Pseudo-Element: so bleibt im Markup nur der reine Text. */
.trail-item + .trail-item::before{content:"›";margin:0 8px;color:var(--border2);
font-size:14px;line-height:1}
.trail-item a{color:var(--muted);padding:3px 7px;border-radius:7px;
transition:background .12s,color .12s}
.trail-item a:hover{background:var(--soft);color:var(--accent2);text-decoration:none}
.trail-item.is-here{color:var(--ink);font-weight:650;padding:3px 7px}
@media (max-width:640px){
.trail{top:auto;position:static;padding:6px 12px}
}
/* ---- Sprungknoepfe fuer lange Listen (oben/unten) ---- */
.jumpnav{position:fixed;right:22px;bottom:24px;z-index:180;
display:flex;flex-direction:column;gap:8px}
.jumpnav[hidden]{display:none}
.jumpbtn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--border);border-radius:50%;background:var(--card);color:var(--muted);
box-shadow:0 6px 18px rgba(0,0,0,.14);cursor:pointer;
transition:opacity .18s ease,transform .18s ease,color .18s ease,border-color .18s ease}
.jumpbtn:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.jumpbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* „off" = an diesem Ende der Seite gibt es nichts mehr zu springen. */
.jumpbtn.off{opacity:0;pointer-events:none;transform:scale(.85)}
@media (max-width:640px){.jumpnav{right:12px;bottom:14px}}
@media (prefers-reduced-motion:reduce){.jumpbtn{transition:none}}
/* ---- Ladeschleier, wenn der Master alle Zeilen nachlaedt ---- */
.loadveil{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.72);backdrop-filter:blur(2px);font-size:13.5px;color:var(--muted)}
.loadveil .lv-box{display:flex;align-items:center;gap:11px;padding:14px 20px;background:var(--card);
border:1px solid var(--border);border-radius:var(--r);box-shadow:0 14px 40px rgba(0,0,0,.16);font-weight:600}
.loadveil .lv-spin{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);
border-radius:50%;animation:lv-turn .7s linear infinite}
@keyframes lv-turn{to{transform:rotate(360deg)}}
/* Werteliste im Spaltenfilter: nur die Liste scrollt, Suchfeld und
„(All)" bleiben stehen. Gezeichnet wird immer nur ein Ausschnitt. */
.mfpanel{overflow:visible;max-height:none}
.mfpanel .mflist{max-height:230px;overflow-y:auto;overflow-x:hidden}
.mfpanel .mfmore{padding:5px 6px;font-size:11.5px;color:var(--muted);
text-transform:none;font-weight:400;letter-spacing:0;white-space:normal}
.mfpanel.mfrange{overflow:visible;max-height:none}
.filterstate{display:flex;align-items:center;gap:12px;margin:10px 2px 0;flex-wrap:wrap}
.filterstate .filtercount{margin:0}
.filterstate button[hidden]{display:none}
/* 2FA-Befreiung: sie schwaecht die Anmeldung bewusst und soll deshalb
auffallen, sobald sie gesetzt ist — nicht wie ein normaler Haken wirken. */
.optchip.warn:has(input:checked){background:#FEF6E7;border-color:#F0D9A8;color:#8A5A0B}
/* „Diesem Geraet vertrauen" auf der Code-Seite */
.trustrow{display:flex;align-items:flex-start;gap:9px;margin:2px 0 14px;
font-size:13px;color:var(--ink-soft);text-align:left;cursor:pointer}
.trustrow input{margin:2px 0 0;flex:none}
.trustrow small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
/* ---- Master: feste Spaltenaufteilung ----------------------------------
Sechzehn Spalten, darunter zwei mit freiem Text. Ohne feste Breiten
bestimmt der laengste Kreditorenname die ganze Tabelle. Die Breiten sind
so gewaehlt, dass jede Spalte ihren typischen Inhalt einzeilig traegt;
nur Kreditor und Grund duerfen auf zwei Zeilen gehen. */
.mastertbl{table-layout:fixed;min-width:1772px}
.mastertbl .c-no{width:54px}
.mastertbl .c-ent{width:88px}
.mastertbl .c-proj{width:124px}
.mastertbl .c-map{width:88px}
.mastertbl .c-cred{width:200px}
.mastertbl .c-inv{width:130px}
.mastertbl .c-reason{width:180px}
/* Rechnungsnummer: eine Zeile, Ziffern in gleicher Breite - so lassen
sich Nummern beim Abgleich mit Mahnungen untereinander vergleichen. */
.mastertbl td.inv{font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mastertbl .c-date{width:88px}
.mastertbl .c-amt{width:92px}
.mastertbl .c-cur{width:50px}
.mastertbl .c-rec{width:96px}
.mastertbl .c-mini{width:58px}
.mastertbl .c-dec{width:124px}
.mastertbl .c-paid{width:132px}
/* Zahlen, Datum und Waehrung nie umbrechen — sie werden sonst unlesbar. */
.mastertbl td.num,.mastertbl tbody td:nth-child(1),
.mastertbl tbody td:nth-child(7),.mastertbl tbody td:nth-child(9){white-space:nowrap}
.mastertbl tbody td:nth-child(1){text-align:right;font-variant-numeric:tabular-nums}
/* Freitextspalten: hoechstens zwei Zeilen, der volle Text haengt als Tooltip
an der Zelle. So bleiben die Zeilenhoehen gleich und die Liste ueberfliegbar.
Die Begrenzung sitzt bewusst auf einem inneren : gibt man der Zelle
selbst ein anderes 'display', faellt sie aus dem Tabellenlayout heraus und
die Zeilen werden hoeher statt niedriger. */
.mastertbl td > .clip2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;line-height:1.35}
/* Das Auswahlfeld fuer die Entscheidung fuellt seine Spalte aus, statt sich
an seinem laengsten Eintrag aufzuhaengen. */
.mastertbl td select{width:100%;max-width:100%;box-sizing:border-box}
.mastertbl th{font-size:10px;vertical-align:bottom}
/* Die Filterzeile setzt unter der Kopfzeile auf. Der allgemeine Wert von 37px
passt zu einem kleineren Kopf; der Master-Kopf ist 45px hoch.
Hinweis: das Kleben greift zurzeit ohnehin nicht, weil .tablewrap wegen
'overflow-x:auto' selbst ein Scroll-Container ist — der Wert stimmt damit
fuer den Tag, an dem das geaendert wird. */
.mastertbl tr.colfilter th{top:45px}
.mastertbl td{vertical-align:middle}
/* ---- Zahlungsangaben im Erfassungsformular ----------------------------
Eigener, abgesetzter Block: der Erfasser soll auf einen Blick sehen, wo
die Angaben fuer den Bankauftrag anfangen und wo sie aufhoeren. */
.paysection{border:1px solid var(--border);border-radius:var(--r);
background:var(--soft);padding:14px 16px 16px;margin-top:6px}
.paysec-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
color:var(--muted);margin-bottom:12px}
.paysec-note{text-transform:none;letter-spacing:0;font-weight:500;font-size:12px}
.paysection .paygrid{margin:0}
/* Gespiegelte Felder: sichtbar, aber nicht erfassbar — sie gehoeren einem
Feld weiter oben. Die Optik sagt das, bevor jemand hineinklickt. */
.mirrored{background:#EEF1F5!important;color:var(--muted);font-weight:600;cursor:default}
.mirrored:focus{outline:none;border-color:var(--border)}
.fieldnote{font-size:11.5px;color:var(--muted);margin-top:4px;min-height:1px}
.fieldnote.bad{color:var(--danger);font-weight:600}
.fieldnote.good{color:var(--ok);font-weight:600}
.chargespick{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.chargespick .optchip{padding:5px 10px;font-size:12.5px}
/* ---- Zahlungsangaben in der Payer-Ansicht ---- */
.payinfo{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);
padding:9px 11px;font-size:12px;min-width:250px}
.payinfo dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0}
.payinfo dt{color:var(--muted);white-space:nowrap}
.payinfo dd{margin:0;font-weight:650;word-break:break-word}
.payinfo dd.iban{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.payinfo .missing{color:var(--danger);font-weight:600}
.payinfo-empty{font-size:12px;color:var(--danger);font-weight:600}
/* Aufklappbare Positionsabschnitte in der Gesellschafts-Ansicht. */
details.poscard > summary{list-style:none;outline:none}
details.poscard > summary::-webkit-details-marker{display:none}
details.poscard > summary:hover .caret{color:var(--accent2)}
details.poscard .caret{display:inline-block;transition:transform .15s;color:var(--muted);font-size:13px}
details.poscard[open] > summary .caret{transform:rotate(90deg)}
/* ==========================================================================
Master 2.0 — kompakte Liste, Klappzeile, gemeinsame Kleinteile
--------------------------------------------------------------------------
Grundsatz dieses Blocks: die Breite der Tabelle ist die Breite des
Fensters. Es gibt keine Mindestbreite und keinen waagerechten Schieber —
damit ist eine Zelle, die in ihre Nachbarin laeuft, nicht mehr moeglich.
========================================================================== */
/* ---- Leiste ueber der Liste: Summe, Ansicht, Ausgabe ---- */
.listbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:0 0 10px;font-size:13px;color:var(--ink-soft)}
.listbar-gap{flex:1;min-width:0}
.listbar-sum b{color:var(--ink);font-weight:750}
.listbar .lbl{color:var(--muted)}
.bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
background:var(--soft);border:1px solid var(--border);
border-radius:var(--r-sm);padding:7px 11px}
.bulkbar select{padding:5px 9px;border:1px solid var(--border2);
border-radius:var(--r-sm);font-family:inherit;font-size:13px;background:var(--card)}
/* ---- Umschalter mit zwei Zustaenden (Kompakt | Alle Spalten) ----
Zwei Knoepfe, die zusammen EINE Entscheidung sind — deshalb aneinander
und nicht als zwei lose Schaltflaechen. */
.segmented{display:inline-flex;border:1px solid var(--border2);border-radius:var(--r-sm);
overflow:hidden;background:var(--card);box-shadow:var(--sh-sm);flex:none}
.segmented a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
font-size:13px;font-weight:650;color:var(--ink-soft);white-space:nowrap;
border-right:1px solid var(--border)}
.segmented a:last-child{border-right:none}
.segmented a:hover{background:var(--soft);color:var(--accent2)}
.segmented a.on{background:var(--accent);color:#fff}
.segmented a.on:hover{background:var(--accent2);color:#fff}
/* ---- Merkzettel fuer Filter auf ausgeblendeten Spalten ----
Eine gefilterte Liste darf nie aussehen wie eine vollstaendige. */
.hiddenfilters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
background:var(--info-bg);border:1px solid color-mix(in srgb,var(--info) 22%,transparent);
border-radius:var(--r-sm);padding:7px 11px;margin-bottom:9px;font-size:12.5px}
.hiddenfilters .chip a{margin-left:4px;font-weight:800;opacity:.6}
.hiddenfilters .chip a:hover{opacity:1}
/* ---- Kompakte Master-Tabelle ---- */
/* Sieben Spalten haben eine feste Breite, zwei nicht: Kreditor und Grund
teilen sich, was uebrig bleibt. So ergibt die Summe IMMER genau 100% —
Prozentangaben fuer die beiden waeren bei schmalem Fenster zusammen mit den
festen Breiten ueber 100% gelandet, und die Tabelle haette wieder geschoben.
Die Mindestbreite ist der Punkt, ab dem die festen Spalten ihren Inhalt
nicht mehr einzeilig tragen; darunter (Telefon) wird geschoben statt
gestapelt - unschoen, aber nie ueberlappend. */
.mastertbl.compacttbl{table-layout:fixed;width:100%;min-width:880px}
.compacttbl .k-x{width:34px}
.compacttbl .k-no{width:78px}
.compacttbl .k-ent{width:84px}
.compacttbl .k-date{width:96px}
.compacttbl .k-amt{width:104px}
.compacttbl .k-dec{width:138px}
.compacttbl .k-stat{width:148px}
.compacttbl th{font-size:10.5px;vertical-align:bottom}
.compacttbl td{font-size:13px;vertical-align:middle}
.compacttbl tr.mrow{cursor:pointer}
.compacttbl tr.mrow.open > td{background:var(--soft)}
/* Die Klappzeile haengt sichtbar an ihrer Zeile: gleiche Flaeche, keine
Trennlinie dazwischen, Einzug links. */
.compacttbl tr.mdet > td{background:var(--soft);border-top:none;
padding:2px 12px 14px 46px}
.detgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:10px 22px;margin:4px 0 10px}
.detgrid dt{font-size:10.5px;font-weight:750;text-transform:uppercase;
letter-spacing:.04em;color:var(--muted);margin:0 0 2px}
.detgrid dd{margin:0;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.detlinks{display:flex;gap:8px;flex-wrap:wrap}
/* Auf- und Zuklappen: ein ruhiger Pfeil, kein Knopf im Knopf. */
.xbtn,.xall{border:none;background:none;cursor:pointer;color:var(--muted);
font-size:12px;line-height:1;padding:4px 5px;border-radius:6px;
font-family:inherit;transition:.12s}
.xbtn:hover,.xall:hover{background:var(--soft);color:var(--accent)}
tr.mrow.open .xbtn{color:var(--accent)}
/* ---- Erste Spalte klebt in der breiten Ansicht ----
Bei siebzehn Spalten verliert man beim Schieben die Zeile. Die Nummer
bleibt stehen, damit man immer weiss, wo man ist. */
.tablewrap.sticky1 table tbody td:first-child,
.tablewrap.sticky1 table thead th:first-child{position:sticky;left:0;z-index:2;
background:var(--card);box-shadow:1px 0 0 var(--border2)}
.tablewrap.sticky1 table thead th:first-child{z-index:3;background:#f6f8fb}
.tablewrap.sticky1 tbody tr:nth-child(even) td:first-child{background:#fafbfd}
.tablewrap.sticky1 tr.dec-release td:first-child{background:var(--ok-bg)}
.tablewrap.sticky1 tr.dec-reject td:first-child{background:var(--danger-bg)}
.tablewrap.sticky1 tr.dec-clarify td:first-child,
.tablewrap.sticky1 tr.dec-postpone td:first-child{background:var(--warn-bg)}
/* ---- Kleinteile, vorher als