/* Marketing-Zentrale — Oberflaeche
   Farben und Schriften nach marken/gemeinsam/ci.md
   Datenfarben geprueft auf Farbfehlsichtigkeit und Kontrast. */

:root {
  --bg:#1C2226; --surface:#242C31; --surface2:#2E353A; --raised:#333C42;
  --line:#3A444A; --line-soft:#323B41;
  --ink:#EEF2F4; --ink2:#AEBAC2; --ink3:#7E8C96;
  --accent:#87C54A; --accent-ink:#17210F; --accent-dim:rgba(135,197,74,.14);
  --data:#6FA83A; --data-neutral:#7E8C96;
  --warn:#E8A33D; --warn-dim:rgba(232,163,61,.14);
  --crit:#E05A4F;
  --radius:11px;
}
html[data-theme="light"] {
  --bg:#F2F5F3; --surface:#FFFFFF; --surface2:#F7F9F7; --raised:#FFFFFF;
  --line:#DDE4DE; --line-soft:#E8EDE9;
  --ink:#2E353A; --ink2:#5A666D; --ink3:#8A959B;
  --accent:#008D36; --accent-ink:#FFFFFF; --accent-dim:rgba(0,141,54,.10);
  --data:#5A9433; --data-neutral:#6B7880;
  --warn:#B4751A; --warn-dim:rgba(180,117,26,.12);
  --crit:#C0392B;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 "Open Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.num,.brandname { font-family:Mulish,"Open Sans",system-ui,sans-serif; }
a { color:var(--accent); }
[hidden] { display:none !important; }

/* ---------- Anmeldung ---------- */
#login { min-height:100dvh; display:grid; place-items:center; padding:24px; }
.loginbox { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:28px 26px; }
.loginbox .mark { width:38px; height:38px; border-radius:9px;
  background:linear-gradient(135deg,#87C54A,#008D36); display:grid; place-items:center;
  color:#fff; font:800 15px Mulish,sans-serif; margin-bottom:16px; }
.loginbox h1 { margin:0 0 4px; font-size:20px; font-weight:800; letter-spacing:-.01em; }
.loginbox p.sub { margin:0 0 20px; color:var(--ink3); font-size:13px; }
label { display:block; font:600 12px Mulish,sans-serif; color:var(--ink2); margin-bottom:6px; }
input[type=email], input[type=text] {
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; color:var(--ink); font:15px "Open Sans",sans-serif; margin-bottom:14px;
}
input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
input#code { letter-spacing:.35em; font-weight:700; text-align:center; font-size:19px; }
button {
  font:700 14px Mulish,sans-serif; border:0; border-radius:9px; padding:11px 16px;
  background:var(--accent); color:var(--accent-ink); cursor:pointer; width:100%;
}
button:disabled { opacity:.5; cursor:default; }
button.ghost { background:transparent; color:var(--ink2); border:1px solid var(--line); margin-top:8px; }
.msg { font-size:13px; margin:0 0 14px; padding:10px 12px; border-radius:9px; line-height:1.5; }
.msg.err { background:rgba(224,90,79,.12); color:var(--crit); border:1px solid rgba(224,90,79,.35); }
.msg.ok  { background:var(--accent-dim); color:var(--ink); border:1px solid var(--line); }

/* ---------- Grundgeruest ---------- */
#app { display:grid; grid-template-columns:206px 1fr; min-height:100dvh; }
.side { background:var(--surface); border-right:1px solid var(--line); padding:14px 10px 20px; }
.brandrow { display:flex; align-items:center; gap:9px; padding:6px 8px 16px; }
.brandrow .mark { width:28px; height:28px; border-radius:7px;
  background:linear-gradient(135deg,#87C54A,#008D36); display:grid; place-items:center;
  color:#fff; font:800 13px Mulish,sans-serif; flex:none; }
.brandname { font:800 13px/1.2 Mulish,sans-serif; display:block; }
.brandsub { font-size:10.5px; color:var(--ink3); }
.navgrp { margin-top:14px; }
.navgrp > p { margin:0 0 5px; padding:0 10px; font:700 10px Mulish,sans-serif;
  letter-spacing:.11em; color:var(--ink3); text-transform:uppercase; }
.nav { display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 10px; border-radius:7px; font:400 13px "Open Sans",sans-serif;
  color:var(--ink2); background:none; cursor:pointer; }
.nav:hover { background:var(--line-soft); }
.nav[aria-current="page"] { background:var(--accent-dim); color:var(--ink); font-weight:700;
  box-shadow:inset 2px 0 0 var(--accent); }
.nav .ic { width:15px; text-align:center; font-size:12px; opacity:.85; }
.nav .pill { margin-left:auto; font:700 10px Mulish,sans-serif; padding:1px 6px;
  border-radius:9px; background:transparent; color:var(--ink3); border:1px solid var(--line); }
.nav.soon { opacity:.45; }

.topbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 20px; border-bottom:1px solid var(--line); background:var(--surface); }
.seg { display:flex; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:3px; }
.seg button { width:auto; background:none; color:var(--ink2); padding:5px 11px;
  border-radius:6px; font:600 12px Mulish,sans-serif; }
.seg button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.spacer { flex:1; }
.stamp { font-size:12px; color:var(--ink3); }
.stamp b { color:var(--ink2); font-weight:600; }
.iconbtn { width:auto; background:none; border:1px solid var(--line); color:var(--ink2);
  padding:6px 10px; font-size:12px; }

.wrap { padding:20px; }
.grid { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }

/* ---------- Bausteine ---------- */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px; }
.kpi .lab { font-size:11.5px; color:var(--ink3); }
.kpi .num { font:800 25px/1.15 Mulish,sans-serif; margin:7px 0 3px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.kpi .sub { font-size:11.5px; color:var(--ink2); }
.kpi.warnk { border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); }
.kpi.warnk .num { color:var(--warn); }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:16px; overflow:hidden; }
.card > h3 { margin:0; padding:12px 15px; font:700 13px Mulish,sans-serif;
  border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:8px; }
.card > h3 small { margin-left:auto; font:400 11.5px "Open Sans",sans-serif; color:var(--ink3); }

.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; font:700 10.5px Mulish,sans-serif; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink3); padding:9px 15px;
  border-bottom:1px solid var(--line-soft); white-space:nowrap; }
td { padding:8px 15px; border-bottom:1px solid var(--line-soft); color:var(--ink2); }
tr:last-child td { border-bottom:0; }
td.k { color:var(--ink); font-weight:600; }
.ra { text-align:right; font-variant-numeric:tabular-nums; }
.grouprow td { background:var(--surface2); font:700 10.5px Mulish,sans-serif;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink3); padding:6px 15px; }
.barwrap { background:var(--line-soft); border-radius:0 4px 4px 0; height:7px; min-width:80px; }
.bar { height:7px; border-radius:0 4px 4px 0; background:var(--data); display:block; }
.bar.n { background:var(--data-neutral); }
.bar.w { background:var(--warn); }

.badge { display:inline-block; font:700 10px Mulish,sans-serif; letter-spacing:.06em;
  text-transform:uppercase; padding:2px 7px; border-radius:5px; border:1px solid var(--line);
  color:var(--ink3); white-space:nowrap; }
.badge.eigen { color:var(--data); border-color:color-mix(in srgb,var(--data) 45%,transparent); }
.badge.portal { color:var(--ink3); }
.badge.unbekannt { color:var(--warn); border-color:color-mix(in srgb,var(--warn) 45%,transparent); }

.alert { display:flex; gap:12px; align-items:flex-start; background:var(--warn-dim);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  border-radius:var(--radius); padding:13px 15px; margin-bottom:16px; }
.alert .ai { width:19px; height:19px; border-radius:50%; background:var(--warn);
  color:#17210F; display:grid; place-items:center; font:800 12px Mulish,sans-serif;
  flex:none; margin-top:1px; }
.alert p { margin:0; font-size:13px; line-height:1.55; }

.empty { padding:26px 16px; text-align:center; color:var(--ink3); font-size:13px; line-height:1.6; }
.empty strong { display:block; color:var(--ink2); font:700 13px Mulish,sans-serif; margin-bottom:5px; }

.skel { background:var(--line-soft); border-radius:5px; height:12px; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

.mobilenav { display:none; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .grid { grid-template-columns:1fr; }
  .kpis { grid-template-columns:repeat(2,1fr); }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  #app { grid-template-columns:1fr; }
  .side { display:none; }
  .wrap { padding:13px 13px 78px; }
  .topbar { padding:10px 13px; }
  .kpis { gap:9px; }
  .kpi .num { font-size:21px; }
  .stamp { width:100%; order:9; }
  .mobilenav {
    display:grid; grid-template-columns:repeat(4,1fr); position:fixed; inset:auto 0 0 0;
    background:var(--surface); border-top:1px solid var(--line);
    padding:7px 0 max(9px, env(safe-area-inset-bottom)); z-index:20;
  }
  .mobilenav button { background:none; color:var(--ink3); font:600 9.5px Mulish,sans-serif;
    padding:4px 0; border-radius:0; }
  .mobilenav button[aria-current="page"] { color:var(--accent); }
  .mobilenav .ic { display:block; font-size:15px; margin-bottom:2px; }
}

@media (prefers-reduced-motion: reduce) { .skel { animation:none; } }