/* app.css — Enterprise-Design-Schicht (lädt NACH dem inline <style>, verfeinert die Optik).
   Orientiert an fbb-sm.de: Teal/Dunkel, klare B2B-Anmutung. Reines CSS, keine Abhängigkeiten. */

:root{
  --teal:#7033ff; --teal-d:#3a1f8f; --teal-l:#f1ebff; --teal-600:#7c4dff;
  --ink:#0a0a0b; --muted:#525252; --line:#e7e7ee; --bg:#fdfdfd; --card:#fff;
  --green:#16a34a; --green-l:#f0fdf4; --amber:#d97706; --amber-l:#fffbeb; --red:#b23b34;
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04);
  --shadow:0 4px 14px rgba(15,23,42,.07); --shadow-lg:0 18px 50px rgba(15,23,42,.18);
  --ring:0 0 0 3px rgba(112,51,255,.25);
}
body{background:linear-gradient(180deg,#fdfdfd 0,#f5f3fb 100%);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* Topbar mit Tiefe + Akzentkante */
.topbar{background:linear-gradient(90deg,var(--teal-d),var(--teal));box-shadow:var(--shadow-sm);border-bottom:3px solid rgba(255,255,255,.12)}
.logo .mark{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}

/* Sidebar: weichere Items, klarer aktiver Zustand */
.side{background:var(--card);box-shadow:var(--shadow-sm)}
.navitem{transition:background .15s,color .15s,transform .05s;border:1px solid transparent}
.navitem:hover{background:#f1f5f9}
.navitem.active{background:var(--teal-l);color:var(--teal-d);border-color:#d9c9ff;box-shadow:var(--shadow-sm)}
.navitem:active{transform:translateY(1px)}

/* Headlines */
.h1{letter-spacing:-.02em}
.sub{color:var(--muted)}

/* KPI-Karten: Akzentstreifen + Hover-Lift */
.kpi{border-radius:var(--radius);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:box-shadow .18s,transform .18s}
.kpi:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--teal)}
.kpi .val.green::after,.kpi .val.amber::after{content:""}
.kpi .val{letter-spacing:-.02em}

/* Cards */
.card{border-radius:var(--radius);box-shadow:var(--shadow-sm);border-color:var(--line);overflow:hidden}
.card .hd{background:linear-gradient(180deg,#fff, #fbfdff);font-size:13.5px}

/* Tabellen: sticky Header, sanfte Zebra, ruhigerer Rahmen */
thead th{position:sticky;top:0;background:#f8fafc;z-index:1}
tbody tr:nth-child(even) td{background:#fcfdfe}
tr.click:hover td{background:var(--teal-l)!important}
td,th{border-color:var(--line)}

/* Pills/Badges: etwas runder, Schatten */
.pill{box-shadow:var(--shadow-sm)}
.tag{border:1px solid var(--line)}

/* Buttons: Verlauf, Hover, Fokus-Ring */
.btn{background:linear-gradient(180deg,var(--teal-600),var(--teal));box-shadow:var(--shadow-sm);transition:filter .15s,transform .05s,box-shadow .15s}
.btn:hover{filter:brightness(1.06);box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--teal);border:1px solid #d9c9ff}
.btn.ghost:hover{background:#f5f1ff;filter:none}
.btn.red{background:#fff;color:var(--red);border:1px solid #fecaca}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--teal)}

/* Inputs */
input,select,textarea{transition:border-color .15s,box-shadow .15s;background:#fff}
label{font-weight:600}

/* Lane-/Board-Karten */
.lane{border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.kcard{border-radius:var(--radius-sm);transition:border-color .15s,box-shadow .15s,transform .08s}
.kcard:hover{transform:translateY(-1px)}

/* Drawer & Login: mehr Tiefe */
.drawer{box-shadow:var(--shadow-lg)}
.dhd{background:linear-gradient(90deg,var(--teal-d),var(--teal))}
.loginbox{box-shadow:var(--shadow-lg);border-radius:18px}
.login{background:radial-gradient(1200px 600px at 20% -10%,#7033ff 0,#2a1466 60%)}
.rolebtn{transition:border-color .15s,background .15s,transform .06s}
.rolebtn:active{transform:translateY(1px)}

/* Hints/Toast */
.hint{border-radius:var(--radius-sm)}
.toast{box-shadow:var(--shadow-lg);border-radius:12px}

/* Hübsche, dezente Scrollbars */
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#94a3b8;background-clip:content-box}

/* Responsiv: Sidebar kompakter, KPIs umbrechen */
@media(max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .board{grid-template-columns:1fr!important}
  .side{width:64px;padding:10px 6px}
  .navitem{justify-content:center;font-size:0}
  .navitem span{font-size:16px}
  .drawer{width:100%}
}
@media(max-width:560px){
  .kpis{grid-template-columns:1fr}
  .main{padding:16px 14px}
}