/* ============================================================================
   Wohnungsverwaltung – Weboberfläche
   ----------------------------------------------------------------------------
   Gebaut nach dem Flatwise Design System v1.1 und dem Aufbau von flatwise.at:

     · schmale, helle Seitenleiste als eigene Karte, Suche darin
     · Inhalt als Karten auf hellgrauem Grund, keine durchgehende weiße Fläche
     · dichte Bauteile: Grundschrift 14 px, Tabellen 11,5 px, Kopfzeilen 10,5 px
     · Zustandsfarben als Vierklang (Fläche, Rand, Punkt, Schrift)
     · Radius nach Bauteilgröße, drei Ebenen statt eines Schattens überall

   Zwei Stellen weichen bewusst ab, und zwar aus technischen Gründen, nicht aus
   Geschmack:

     1. Eingabefelder werden auf Touch-Geräten 16 px groß. Darunter zoomt
        iOS-Safari beim Antippen ins Feld hinein und die Seite verrutscht.
        Am Schreibtisch bleiben sie bei den 13 px der Vorlage.
     2. Auf Touch-Geräten wachsen Knöpfe und Menüzeilen auf 40–44 px.
        Die Vorlage ist für die Maus gezeichnet; mit dem Finger trifft man
        eine 24-px-Zeile nicht zuverlässig.

   Farblogik: GRÜN IST ZUSTAND, NICHT MARKE. Alles Bedienbare ist blau.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet) ------------------------------------
   Nicht über Google Fonts: die Anwendung setzt selbst `font-src 'self'` in der
   CSP, und bei Mieterdaten hat ein Drittanbieter im Seitenaufbau nichts zu
   suchen. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
           src:url("fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
           src:url("fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
           src:url("fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
           src:url("fonts/inter-700.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
           src:url("fonts/jbmono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
           src:url("fonts/jbmono-500.woff2") format("woff2")}

/* ---------- Marke, Neutraltöne, Zustände ---------- */
:root{
  --brand-50:#EFF4FF;  --brand-100:#DBEAFE; --brand-200:#BFDBFE; --brand-300:#93C5FD;
  --brand-500:#2563EB; --brand-600:#1D4ED8; --brand-700:#1E40AF;

  --n-0:#FFFFFF;   --n-50:#FAFAFA;  --n-100:#F5F5F7; --n-200:#E5E7EB;
  --n-300:#D1D5DB; --n-400:#9CA3AF; --n-500:#6B7280; --n-600:#4B5563;
  --n-700:#374151; --n-800:#1F2937; --n-900:#111827;

  --ok-fill:#DCFCE7;   --ok-line:#86EFAC;   --ok-dot:#16A34A;   --ok-ink:#15803D;
  --warn-fill:#FEF3C7; --warn-line:#FCD34D; --warn-dot:#F59E0B; --warn-ink:#B45309;
  --bad-fill:#FEE2E2;  --bad-line:#FCA5A5;  --bad-dot:#EF4444;  --bad-ink:#B91C1C;
  --info-fill:#EFF4FF; --info-line:#BFDBFE; --info-dot:#3B82F6; --info-ink:#1D4ED8;
  --idle-fill:#F1F2F4; --idle-line:#D1D5DB; --idle-dot:#9CA3AF; --idle-ink:#4B5563;

  --ink:#111827; --ink-2:#374151; --muted:#4B5563; --faint:#6B7280; --ink-invert:#FFFFFF;
  --bg:#F5F5F7; --card:#FFFFFF; --card-2:#FAFAFA; --hover:#FAFAFA;
  --line:#E5E7EB; --line-strong:#D1D5DB;

  /* Alte Namen, die in Vorlagen weiterleben */
  --green:var(--ok-dot); --green-hover:#15803D; --green-soft:var(--ok-fill); --green-ink:var(--ok-ink);
  --blue:var(--brand-600); --blue-soft:var(--brand-50);
  --red:var(--bad-ink); --red-soft:var(--bad-fill); --red-line:var(--bad-line);
  --amber:var(--warn-ink); --amber-soft:var(--warn-fill); --amber-line:var(--warn-line);
  --side-bg:#FFFFFF; --side-ink:#374151; --side-line:#E5E7EB; --side-hover:#FAFAFA;

  --e-1:0 1px 2px rgba(16,24,40,.05);
  --e-2:0 2px 4px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.07);
  --e-3:0 8px 20px rgba(16,24,40,.09), 0 20px 48px rgba(16,24,40,.10);
  --shadow:var(--e-1); --shadow-lg:var(--e-3);
  --ring:0 0 0 3px rgba(37,99,235,.28);

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:20px; --r-full:999px;
  --radius:var(--r-lg); --radius-sm:var(--r-sm);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;

  --tap:40px;                       /* Maus: kompakt. Touch überschreibt weiter unten. */
  --side-w:244px;
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

/* ---------- Dunkel: gedämpfte Flächen, aufgehellte Schrift ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand-50:#16233B; --brand-100:#1B3055; --brand-200:#24406F; --brand-300:#3B6BB5;
    --brand-500:#4F8DF7; --brand-600:#6BA1F9; --brand-700:#8DB8FB;
    --n-0:#161B22; --n-50:#1B222B; --n-100:#222A34; --n-200:#2C3540;
    --n-300:#3A444F; --n-400:#6B7683; --n-500:#8B96A3; --n-600:#A7B1BD;
    --n-700:#C4CCD6; --n-800:#DDE3EA; --n-900:#EAEFF4;
    --ok-fill:#14301F;   --ok-line:#2C5C3D;   --ok-dot:#4ADE80;   --ok-ink:#86EFAC;
    --warn-fill:#3A2C10; --warn-line:#6B5320; --warn-dot:#FBBF24; --warn-ink:#FCD34D;
    --bad-fill:#3A1B1B;  --bad-line:#6B2E2E;  --bad-dot:#F87171;  --bad-ink:#FCA5A5;
    --info-fill:#16233B; --info-line:#2C4670; --info-dot:#60A5FA; --info-ink:#93C5FD;
    --idle-fill:#222A34; --idle-line:#3A444F; --idle-dot:#6B7683; --idle-ink:#A7B1BD;
    --ink:#EAEFF4; --ink-2:#C4CCD6; --muted:#A7B1BD; --faint:#8B96A3; --ink-invert:#0F1319;
    --bg:#0F1319; --card:#161B22; --card-2:#1B222B; --hover:#1B222B;
    --line:#2C3540; --line-strong:#3A444F;
    --side-bg:#161B22; --side-ink:#C4CCD6; --side-line:#2C3540; --side-hover:#1B222B;
    --e-1:0 1px 2px rgba(0,0,0,.4);
    --e-2:0 2px 4px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.35);
    --e-3:0 8px 20px rgba(0,0,0,.5), 0 20px 48px rgba(0,0,0,.55);
    --ring:0 0 0 3px rgba(79,141,247,.35);
  }
}
:root[data-theme="dark"]{
  --brand-50:#16233B; --brand-100:#1B3055; --brand-200:#24406F; --brand-300:#3B6BB5;
  --brand-500:#4F8DF7; --brand-600:#6BA1F9; --brand-700:#8DB8FB;
  --n-0:#161B22; --n-50:#1B222B; --n-100:#222A34; --n-200:#2C3540;
  --n-300:#3A444F; --n-400:#6B7683; --n-500:#8B96A3; --n-600:#A7B1BD;
  --n-700:#C4CCD6; --n-800:#DDE3EA; --n-900:#EAEFF4;
  --ok-fill:#14301F;   --ok-line:#2C5C3D;   --ok-dot:#4ADE80;   --ok-ink:#86EFAC;
  --warn-fill:#3A2C10; --warn-line:#6B5320; --warn-dot:#FBBF24; --warn-ink:#FCD34D;
  --bad-fill:#3A1B1B;  --bad-line:#6B2E2E;  --bad-dot:#F87171;  --bad-ink:#FCA5A5;
  --info-fill:#16233B; --info-line:#2C4670; --info-dot:#60A5FA; --info-ink:#93C5FD;
  --idle-fill:#222A34; --idle-line:#3A444F; --idle-dot:#6B7683; --idle-ink:#A7B1BD;
  --ink:#EAEFF4; --ink-2:#C4CCD6; --muted:#A7B1BD; --faint:#8B96A3; --ink-invert:#0F1319;
  --bg:#0F1319; --card:#161B22; --card-2:#1B222B; --hover:#1B222B;
  --line:#2C3540; --line-strong:#3A444F;
  --side-bg:#161B22; --side-ink:#C4CCD6; --side-line:#2C3540; --side-hover:#1B222B;
  --e-1:0 1px 2px rgba(0,0,0,.4);
  --e-2:0 2px 4px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.35);
  --e-3:0 8px 20px rgba(0,0,0,.5), 0 20px 48px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(79,141,247,.35);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     color:var(--ink);background:var(--bg);font-size:15.5px;line-height:1.55;
     -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
/* Zahlen laufen im ganzen Blatt tabellarisch, sonst springen Beträge in Spalten */
table,td,th,.val,.kpi,.num,.mono,.money{font-variant-numeric:tabular-nums slashed-zero}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
h1,h2,h3{margin:0;letter-spacing:-.015em}
code,.mono,.money{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* ============================ Gerüst =====================================
   Seitenleiste und Inhalt schwimmen als Karten auf hellgrauem Grund –
   genau der Aufbau von flatwise.at. */
.layout{display:flex;min-height:100dvh;gap:var(--s-3);padding:var(--s-3);
        padding-left:max(var(--s-3),var(--safe-l));padding-right:max(var(--s-3),var(--safe-r))}

.side{width:var(--side-w);flex:0 0 var(--side-w);background:var(--side-bg);color:var(--side-ink);
      display:flex;flex-direction:column;position:sticky;top:var(--s-3);
      height:calc(100dvh - 2 * var(--s-3));
      border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e-1);
      padding:12px;font-size:14px}

.sb-brand{display:flex;align-items:center;gap:8px;padding:4px 6px 12px;font-weight:600;
          font-size:15.5px;color:var(--ink)}
.sb-brand:hover{text-decoration:none;color:var(--ink)}
.sb-brand .mark{width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-sm);
                background:var(--n-900);color:var(--n-0);display:grid;place-items:center}
.sb-brand .mark svg{width:16px;height:16px}

.sb-search{display:flex;align-items:center;gap:7px;background:var(--n-50);
           border:1px solid var(--line);border-radius:var(--r-sm);padding:0 9px;
           margin-bottom:12px;min-height:40px}
.sb-search .mag{color:var(--n-400);display:grid;place-items:center;flex:0 0 13px}
.sb-search .mag svg{width:13px;height:13px}
.sb-search input{border:0;background:transparent;padding:0;min-height:0;width:100%;
                 font:inherit;font-size:14px;color:inherit;box-shadow:none}
.sb-search input:focus{outline:none;box-shadow:none}
.sb-search:focus-within{border-color:var(--brand-500);box-shadow:var(--ring)}

.nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px;
     /* Ein Schatten am oberen und unteren Rand erscheint NUR, wenn die Liste
        dort tatsächlich weitergeht. Ohne ihn sieht ein angeschnittener
        Menüpunkt nach Anzeigefehler aus statt nach „bitte scrollen". */
     background:
       linear-gradient(var(--side-bg) 30%, rgba(0,0,0,0)),
       linear-gradient(rgba(0,0,0,0), var(--side-bg) 70%) 0 100%,
       radial-gradient(farthest-side at 50% 0, rgba(16,24,40,.11), rgba(0,0,0,0)),
       radial-gradient(farthest-side at 50% 100%, rgba(16,24,40,.11), rgba(0,0,0,0)) 0 100%;
     background-repeat:no-repeat;background-size:100% 26px,100% 26px,100% 11px,100% 11px;
     background-attachment:local,local,scroll,scroll}
.nav.nav-sys{flex:0 0 auto;overflow:visible;border-top:1px solid var(--side-line);
             margin-top:6px;padding-top:6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);
       color:var(--n-700);min-height:var(--tap)}
.nav a:hover{background:var(--n-50);text-decoration:none;color:var(--ink)}
.nav a.active{background:var(--brand-50);color:var(--brand-700);font-weight:500;
              box-shadow:inset 2px 0 0 var(--brand-500)}
.nav .ico{width:19px;height:19px;flex:0 0 19px;display:grid;place-items:center;color:var(--n-400)}
.nav .ico svg{width:19px;height:19px}
.nav a.active .ico{color:var(--brand-600)}
.nav .navsec{padding:16px 11px 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
             color:var(--n-400);font-weight:600}
.nav a .pill{margin-left:auto;background:var(--bad-fill);color:var(--bad-ink);font-size:11.5px;
             font-weight:600;border-radius:var(--r-full);padding:1px 8px}

.sb-user{display:flex;align-items:center;gap:8px;border-top:1px solid var(--side-line);
         margin-top:9px;padding-top:9px;padding-bottom:var(--safe-b)}
.sb-user .avatar{width:34px;height:34px;flex:0 0 34px;border-radius:var(--r-full);
                 background:var(--brand-100);color:var(--brand-700);display:grid;
                 place-items:center;font-weight:600;font-size:13px}
.sb-user .who{min-width:0;flex:1}
.sb-user .who b{display:block;font-size:13.5px}
.sb-user .who span{display:block;font-size:11.5px;color:var(--faint);overflow:hidden;
                   text-overflow:ellipsis;white-space:nowrap}
.iconbtn{border:0;background:none;cursor:pointer;color:var(--n-400);padding:5px;
         border-radius:var(--r-xs);display:grid;place-items:center;font:inherit}
.iconbtn:hover{background:var(--n-100);color:var(--n-700)}
.iconbtn svg{width:18px;height:18px}

.scrim{display:none;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:40;
       -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.scrim.show{display:block}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
/* Die Kopfzeile ist keine eigene Leiste mehr, sondern steht auf dem Grund –
   dadurch wirkt der Inhalt nicht mehr in einen Rahmen gepresst. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
        padding:calc(6px + var(--safe-t)) 2px var(--s-4);flex-wrap:wrap}
.topbar h1{font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.topbar h1 .sub{font-weight:400;color:var(--faint);font-size:14px;letter-spacing:0}
.topbar .left{display:flex;align-items:center;gap:9px;min-width:0}
.topbar .right{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.content{padding:0 2px calc(var(--s-6) + var(--safe-b));max-width:1880px;width:100%}

/* ============================ Schaltflächen ============================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
     background:var(--n-0);color:var(--n-800);border:1px solid var(--n-300);
     border-radius:var(--r-sm);padding:10px 16px;font-size:14.5px;font-weight:500;line-height:1;
     cursor:pointer;box-shadow:var(--e-1);transition:background .12s,border-color .12s;
     font-family:inherit;text-align:center;min-height:var(--tap);
     -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:hover{background:var(--n-50);text-decoration:none}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn.primary{background:var(--brand-500);border-color:var(--brand-500);color:#fff}
.btn.primary:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;
           color:var(--brand-600);padding-inline:7px}
.btn.ghost:hover{background:var(--brand-50)}
.btn.danger{background:var(--n-0);color:var(--bad-ink);border-color:var(--bad-line)}
.btn.danger:hover{background:var(--bad-fill)}
.btn.sm{font-size:13.5px;padding:8px 13px;min-height:36px}
.btn.sm svg{width:15px;height:15px}
.btn.icon{padding:0;width:var(--tap);min-width:var(--tap)}
.btn.icon.sm{width:36px;min-width:36px}
.btn[disabled],.btn.busy{opacity:.45;pointer-events:none}
.btn-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.btn-row form{margin:0}

/* ============================ Karten =================================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
      box-shadow:var(--e-1);padding:var(--s-5);margin-bottom:var(--s-4);min-width:0}
.card>h2{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;margin:0 0 var(--s-3);
         padding-bottom:10px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600}
.card>h2 .sub,h2 .sub{font-weight:400;color:var(--faint);font-size:13px;letter-spacing:0}
.card>h2 .spacer{margin-left:auto}
.card.flush{padding:0}
.card.flush>h2{padding:var(--s-5) var(--s-5) 10px;margin:0 0 var(--s-4)}
.subhead{font-size:11.5px;font-weight:600;color:var(--faint);text-transform:uppercase;
         letter-spacing:.09em;margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.subhead.mt{margin-top:var(--s-5)}

/* ============================ Kennzahlen =============================== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s-3);
      margin-bottom:var(--s-4)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
     padding:16px 18px;display:block;color:inherit}
a.kpi:hover{text-decoration:none;border-color:var(--brand-300)}
.kpi .lbl{font-size:12px;color:var(--faint);font-weight:500;letter-spacing:0;
          text-transform:none;hyphens:auto;-webkit-hyphens:auto}
.kpi .val{font-size:27px;font-weight:600;letter-spacing:-.025em;margin:4px 0 2px;line-height:1.2}
.kpi .val small{font-size:13px;color:var(--faint);font-weight:400;letter-spacing:0}
.kpi .hint{font-size:12.5px;color:var(--faint);margin-top:4px;line-height:1.45}
.kpi.green{background:var(--ok-fill);border-color:var(--ok-line)}
.kpi.green .val{color:var(--ok-ink)}
.kpi.warn{background:var(--bad-fill);border-color:var(--bad-line)}
.kpi.warn .val{color:var(--bad-ink)}

.grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s-3);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-3);align-items:start}
@media(max-width:1000px){.grid2{grid-template-columns:1fr}}

/* ============================ Tabellen ================================= */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;font-weight:500;color:var(--faint);font-size:11.5px;
         padding:0 12px 10px;border-bottom:1px solid var(--n-300);white-space:nowrap;
         text-transform:none;letter-spacing:0;background:transparent}
tbody td{padding:11px 12px;border-bottom:1px solid var(--n-100);vertical-align:middle}
tbody tr:hover{background:var(--n-50)}
td.num,th.num{text-align:right;white-space:nowrap}
tfoot td{padding:12px;font-weight:600;border-top:2px solid var(--n-800);border-bottom:0;
         font-size:14.5px;background:transparent}
table .acts{display:flex;gap:5px;justify-content:flex-end;align-items:center}
tr.is-open,tr.is-open:hover{background:var(--bad-fill)}
.table-note{font-size:12.5px;color:var(--faint);margin:12px 0 0}
.empty{padding:34px 14px;text-align:center;color:var(--faint);font-size:14px}
.empty .big{display:none}

/* Zweizeilige Objektzelle mit Vorschaufeld – das Muster aus der Vorlage */
.unitcell{display:flex;align-items:center;gap:9px;min-width:0}
.thumb{width:34px;height:34px;flex:0 0 34px;border-radius:var(--r-xs);display:grid;
       place-items:center;background:linear-gradient(145deg,var(--n-100),var(--n-300));
       color:var(--n-500)}
.thumb svg{width:16px;height:16px}
.unitcell .txt{min-width:0}
.unitcell b{display:block;font-size:14px;font-weight:600}
.unitcell .txt span{display:block;font-size:12px;color:var(--faint);overflow:hidden;
               text-overflow:ellipsis;white-space:nowrap}

/* ==================== Übersicht: Kopf, große Kacheln, Einheitenliste ======
   Nach dem Aufbau der Objekt-Übersicht von flatwise.at: erst wer/was, dann die
   zwei Zahlen, die zählen, dann die Einheiten mit ihrem Zahlungsstand. */
.objhead{display:flex;align-items:center;gap:14px;margin-bottom:var(--s-4)}
.objhead .thumb{width:52px;height:52px;flex:0 0 52px;border-radius:var(--r-md)}
.objhead .thumb svg{width:24px;height:24px}
.objhead .txt{min-width:0}
.objhead h2{font-size:22px;font-weight:600;letter-spacing:-.02em;display:flex;
            align-items:center;gap:8px;flex-wrap:wrap;border:0;padding:0;margin:0}
.objhead .adr{font-size:13.5px;color:var(--faint);margin-top:4px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
       gap:var(--s-3);margin-bottom:var(--s-3)}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
      padding:var(--s-5);box-shadow:var(--e-1);display:flex;flex-direction:column;min-width:0}
a.tile:hover{text-decoration:none;border-color:var(--brand-300)}
.tile .cap{font-size:13px;color:var(--faint)}
.tile .big{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.15;
           color:var(--ink);margin-top:2px}
.tile .big small{font-size:16px;color:var(--faint);font-weight:400;letter-spacing:0}
.tile .foot{font-size:13px;color:var(--faint);margin-top:5px;display:flex;
            align-items:center;gap:6px;flex-wrap:wrap}
.tile .delta{display:inline-flex;align-items:center;gap:3px;font-weight:500}
.tile .delta.up{color:var(--ok-ink)}
.tile .delta.down{color:var(--bad-ink)}
.spark{width:100%;height:54px;display:block;margin-top:auto;padding-top:10px}
.ratio{display:flex;gap:3px;margin-top:14px}
.ratio i{height:8px;flex:1;border-radius:2px;background:var(--n-200)}
.ratio i.on{background:var(--ok-dot)}

.unitrow{display:flex;align-items:center;gap:12px;padding:12px 0;
         border-bottom:1px solid var(--n-100)}
.unitrow:last-child{border-bottom:0}
.unitrow .txt{min-width:0;flex:1}
.unitrow .txt b{display:block;font-size:14.5px;font-weight:600}
.unitrow .txt span{display:block;font-size:12.5px;color:var(--faint);overflow:hidden;
                   text-overflow:ellipsis;white-space:nowrap}
.unitrow .amt{font-size:14.5px;font-weight:500;white-space:nowrap;text-align:right}
.unitrow .amt span{display:block;font-size:11.5px;color:var(--faint);font-weight:400}

/* Schmale Schirme: Tabellen als Karten (braucht data-label an den Zellen) */
@media(max-width:600px){
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;
                 padding:4px 2px;background:var(--card)}
  table.stack td{border:none;padding:6px 11px;display:flex;justify-content:space-between;gap:12px}
  table.stack td::before{content:attr(data-label);color:var(--faint);font-size:10px;
                         letter-spacing:.05em;font-weight:600;flex:0 0 auto}
  table.stack td:empty{display:none}
  table.stack td.num{text-align:right}
  table.stack tfoot td{background:transparent}
  table.stack .acts{justify-content:flex-start}
}

/* ============================ Abzeichen ================================
   Mit farbigem Punkt: der Zustand bleibt auch ohne Farbunterscheidung lesbar. */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;
       border-radius:var(--r-full);padding:4px 11px;border:1px solid;white-space:nowrap;
       background:var(--idle-fill);border-color:var(--idle-line);color:var(--idle-ink);
       --dot:var(--idle-dot)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot);flex:0 0 6px}
.badge.ok{background:var(--ok-fill);border-color:var(--ok-line);color:var(--ok-ink);--dot:var(--ok-dot)}
.badge.open{background:var(--bad-fill);border-color:var(--bad-line);color:var(--bad-ink);--dot:var(--bad-dot)}
.badge.warn{background:var(--warn-fill);border-color:var(--warn-line);color:var(--warn-ink);--dot:var(--warn-dot)}
.badge.blue{background:var(--info-fill);border-color:var(--info-line);color:var(--info-ink);--dot:var(--info-dot)}
.badge.muted{background:var(--idle-fill);border-color:var(--idle-line);color:var(--idle-ink);--dot:var(--idle-dot)}

/* ============================ Formulare ================================ */
label.fld{display:block;margin-bottom:var(--s-3)}
label.fld .cap{display:block;font-size:13px;font-weight:500;color:var(--n-700);margin-bottom:5px}
label.fld .cap .req{color:var(--bad-dot)}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=month],
input[type=email],input[type=search],select,textarea{
  width:100%;padding:10px 13px;border:1px solid var(--n-300);border-radius:var(--r-sm);
  font-size:15px;font-family:inherit;background:var(--card);color:var(--ink);
  min-height:var(--tap);-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--n-400) 50%),
                       linear-gradient(135deg,var(--n-400) 50%,transparent 50%);
       background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
       background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
textarea{min-height:84px;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:var(--ring)}
input[readonly]{background:var(--n-50);color:var(--muted)}
input[type=file]{font-size:12px;padding:7px;background:var(--n-50);border:1px dashed var(--n-300)}
input[type=checkbox]{width:19px;height:19px;min-height:0;accent-color:var(--brand-500)}
.check{display:flex;align-items:center;gap:10px;min-height:var(--tap);cursor:pointer;font-size:15px}
.check input{flex:0 0 auto}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 var(--s-3)}
.form-grid.wide{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.inline-form{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end}
.inline-form label.fld{margin-bottom:0}
.inline-form .btn{margin-bottom:0}
fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3);margin:0 0 var(--s-3)}
legend{padding:0 7px;font-size:11.5px;font-weight:600;color:var(--faint);text-transform:uppercase;
       letter-spacing:.09em}
.hint{font-size:13px;color:var(--faint);margin:7px 0 0;line-height:1.5}

table.poslist input{min-height:30px;padding:6px 8px;font-size:12px}
table.poslist td{padding:4px 5px;vertical-align:middle}
table.poslist th{padding:0 5px 6px}

/* ============================ Meldungen ================================ */
.flash{display:flex;gap:9px;align-items:flex-start;border-radius:var(--r-md);
       padding:12px 14px;border:1px solid;margin-bottom:var(--s-2);font-size:14px;
       line-height:1.5}
.flash svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.flash.ok{background:var(--ok-fill);border-color:var(--ok-line);color:var(--ok-ink)}
.flash.error{background:var(--bad-fill);border-color:var(--bad-line);color:var(--bad-ink)}
.flash.warn{background:var(--warn-fill);border-color:var(--warn-line);color:var(--warn-ink)}
.flash .x{margin-left:auto;cursor:pointer;opacity:.6;display:grid;place-items:center;flex:0 0 auto}
.flash .x svg{width:13px;height:13px;margin:0}
.warnbar{background:var(--warn-fill);border:1px solid var(--warn-line);color:var(--warn-ink);
         padding:12px 14px;border-radius:var(--r-md);margin-bottom:var(--s-2);font-size:14px}
.warnbar code{background:rgba(0,0,0,.06);padding:1px 4px;border-radius:3px}

/* ============================ Hilfsklassen ============================= */
.muted{color:var(--muted)}
.small{font-size:12.5px}
.right{text-align:right}
.nowrap{white-space:nowrap}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pos{color:var(--ok-ink)}
.neg{color:var(--bad-ink)}
.spacer{flex:1}
.stack-sm>*+*{margin-top:7px}
.hide{display:none !important}

/* ============================ Reiter =================================== */
.tabbar{display:flex;flex-wrap:wrap;gap:0 var(--s-5);border-bottom:1px solid var(--line);
        margin-bottom:var(--s-3)}
.tabbar button,.tabbar a{background:none;border:0;font:inherit;font-size:15px;cursor:pointer;
   color:var(--faint);padding:0 0 11px;border-bottom:2px solid transparent;margin-bottom:-1px;
   white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap)}
.tabbar button:hover,.tabbar a:hover{color:var(--n-800);text-decoration:none}
.tabbar button.active,.tabbar a.active{color:var(--brand-600);border-color:var(--brand-500);
   font-weight:500}
.tabbar .count{background:var(--n-100);border-radius:var(--r-full);padding:1px 7px;font-size:11.5px;
   color:var(--muted)}
.tabpane{display:none}
.tabpane.active{display:block}

/* Filter-Chips statt Segment-Schalter – so wie in der Vorlage */
.segment{display:inline-flex;gap:5px;flex-wrap:wrap;background:none;border:0;padding:0}
.segment a,.segment button{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;
   padding:8px 14px;border:1px solid var(--n-300);border-radius:var(--r-full);background:var(--n-0);
   color:var(--muted);cursor:pointer;font-family:inherit;min-height:36px}
.segment a:hover,.segment button:hover{text-decoration:none;color:var(--ink);background:var(--n-50)}
.segment a.active,.segment button.active{background:var(--brand-50);border-color:var(--brand-300);
   color:var(--brand-700);font-weight:500}

/* ============================ Speicherleiste =========================== */
.savebar{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);
         padding:10px 0 calc(10px + var(--safe-b));margin-top:9px;display:flex;gap:9px;
         align-items:center;flex-wrap:wrap;z-index:10}
.savebar.floating{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
   box-shadow:var(--e-2);padding:10px 12px;margin-top:var(--s-3);bottom:12px}

/* ============================ Balken =================================== */
.bars{display:flex;flex-direction:column;gap:7px}
.bar-row{display:grid;grid-template-columns:minmax(100px,160px) 1fr 100px;align-items:center;
         gap:11px;font-size:13px}
.bar-track{background:var(--n-100);border-radius:var(--r-xs);height:20px;overflow:hidden}
.bar-fill{height:100%;background:var(--ok-dot);border-radius:var(--r-xs);min-width:2px}
.bar-fill.red{background:var(--bad-dot)}
.bar-row .amt{text-align:right;color:var(--faint)}

/* ============================ Ladeanzeige ============================== */
#busy{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:90;display:none;
      align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#busy.show{display:flex}
#busy .box{background:var(--card);color:var(--ink);border-radius:var(--r-xl);padding:20px 26px;
   box-shadow:var(--e-3);display:flex;gap:12px;align-items:center;font-weight:500;font-size:13px;
   max-width:min(90vw,420px)}
.spin{width:20px;height:20px;border:3px solid var(--line);border-top-color:var(--brand-500);
      border-radius:50%;animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* Suchfeld in der Kopfzeile gibt es nicht mehr – die Suche sitzt jetzt in der
   Seitenleiste. Die Regel bleibt für den Fall, dass eine Seite sie noch nutzt. */
.qbox{position:relative;display:flex;align-items:center}
.qbox input{min-width:170px;padding-left:32px}
.qbox .mag{position:absolute;left:10px;color:var(--n-400);pointer-events:none;
           display:grid;place-items:center}
.qbox .mag svg{width:14px;height:14px}

.loginwrap{max-width:380px;margin:10vh auto 0;padding:0 16px}
.menu-btn{display:none}

/* ============================ Touch ====================================
   Die Vorlage ist für die Maus gezeichnet. Am iPad wird alles Bedienbare
   größer – Schriftgrößen bleiben, nur die Trefferflächen wachsen. */
@media (pointer:coarse){
  :root{--tap:44px}
  .nav a{min-height:44px}
  .btn.sm{min-height:36px;padding:8px 12px}
  .btn.icon.sm{width:36px;min-width:36px}
  .segment a,.segment button{min-height:36px;padding:7px 12px}
  .iconbtn{padding:8px}
  input[type=checkbox]{width:20px;height:20px}
  /* Unter 16px zoomt iOS-Safari beim Antippen ins Feld hinein. */
  input[type=text],input[type=password],input[type=number],input[type=date],
  input[type=month],input[type=email],input[type=search],select,textarea{font-size:16px}
  .sb-search input{font-size:16px}
}

/* ============================ Umbrüche ================================= */
@media(max-height:760px){
  .nav a{min-height:30px;padding:5px 9px}
  .nav .navsec{padding:9px 9px 3px}
}
@media(max-width:1023px){
  .layout{padding:0;gap:0}
  .topbar{padding:calc(10px + var(--safe-t)) var(--s-3) var(--s-3)}
  .content{padding:0 var(--s-3) calc(var(--s-6) + var(--safe-b))}
  .side{position:fixed;top:0;left:0;z-index:50;transform:translateX(-102%);
        transition:transform .22s ease;box-shadow:var(--e-3);height:100dvh;
        border-radius:0;border-left:0;border-top:0;border-bottom:0;
        padding-top:calc(10px + var(--safe-t))}
  .side.open{transform:translateX(0)}
  .menu-btn{display:inline-flex}
}
@media(max-width:700px){
  .topbar h1{font-size:18px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .card{padding:11px}
}
/* Waagrecht scrollende Tabellen: am Rand andeuten, dass es weitergeht */
.tbl-wrap{background:
  linear-gradient(to right, var(--card) 30%, rgba(0,0,0,0)),
  linear-gradient(to right, rgba(0,0,0,0), var(--card) 70%) 100% 0,
  radial-gradient(farthest-side at 0 50%, rgba(80,90,100,.14), rgba(0,0,0,0)),
  radial-gradient(farthest-side at 100% 50%, rgba(80,90,100,.14), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;background-size:36px 100%,36px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll}
@media(print){
  .side,.topbar,.savebar,.btn,.tabbar,#busy,.scrim{display:none !important}
  .layout{padding:0}
  .content{padding:0;max-width:none}
  .card{box-shadow:none;border:none;page-break-inside:avoid}
  .tabpane{display:block !important}
  body{background:#fff}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}