:root{
  --bg:#0f172a; --panel:#0c1222; --muted:#94a3b8; --text:#e2e8f0; --brand:#22c55e; --danger:#ef4444; --line:#334155;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif}
a{color:#93c5fd;text-decoration:none}
button{font:inherit;cursor:pointer}
img{max-width:100%;height:auto}

/* Container */
.container{max-width:1100px;margin:0 auto;padding:16px}

/* NAV + Hamburger */
.nav{position:sticky;top:0;z-index:20;background:#111827;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px}
.brand{font-weight:800;letter-spacing:.2px}
.nav a{color:#e2e8f0;opacity:.95}
.nav a:hover{opacity:1}

/* Desktop: Menü sichtbar, Button versteckt */
.nav .menu{display:flex;gap:8px;align-items:center}
.hamb{display:none}

/* NAV + Hamburger (Desktop + Mobile) */
.nav{position:sticky;top:0;z-index:20;background:#111827;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px}
.brand{font-weight:800;letter-spacing:.2px}
.nav a{color:#e2e8f0;opacity:.95}
.nav a:hover{opacity:1}

/* Desktop: Menü sichtbar, Hamburger versteckt */
.nav .menu{display:flex;gap:8px;align-items:center}
.hamb{display:none}

/* Mobile */
@media (max-width: 900px){
  /* Schöner Hamburger-Button (dein Stil) */
  .hamb{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:44px;height:40px;
    background:none;border:1px solid var(--line);
    border-radius:10px;padding:0;color:#e2e8f0;
  }
  .hamb .bar{
    display:block;
    width:22px; height:2px;
    background:#e2e8f0;
    border-radius:2px;
  }

  /* Menü fixiert rechts, klappt unter der Nav über das Dashboard */
  .nav .menu{
    display:none !important;              /* eingeklappt */
    flex-direction:column;
    gap:10px;

    position: fixed;
    top: 60px;                            /* knapp unter der Nav */
    right: 12px;
    background:#111827;
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px;
    width:220px;
    text-align:right;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    z-index:1000;

    max-height:calc(100vh - 80px);        /* falls viele Links */
    overflow-y:auto;
  }
  .nav.open .menu{ display:flex !important; } /* ausgeklappt */

  /* Desktop-Menü ausblenden auf Mobile */
  .nav .menu a { width:100%; justify-content:flex-end; }
}

/* Buttons / Chips */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0b1220;color:#e2e8f0;white-space:nowrap}
.btn.primary{background:var(--brand);color:#062a12;border-color:transparent;font-weight:700}
.btn.danger{background:#7f1d1d;border-color:#7f1d1d}
.badge{padding:2px 8px;border-radius:999px;background:#172033;border:1px solid var(--line);font-size:.78rem}
.kbd{font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;background:#0b1220;border:1px solid var(--line);padding:2px 6px;border-radius:6px}

/* Flash / Footer */
.flash{margin:12px 0;padding:10px 12px;border-radius:10px}
.flash.ok{background:#064e3b;color:#d1fae5}
.flash.err{background:#7f1d1d;color:#fee2e2}
.footer{opacity:.7;text-align:center;padding:24px}

/* ---------------------------------------------------
   CARDS (Fix: wieder Innenabstand, saubere Abstände)
   --------------------------------------------------- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;                /* <— WICHTIG: Innenabstand */
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.card h3{margin:0 0 8px 0}
.card p{margin:0 0 10px 0}
.card .btn{margin-top:6px}
.card .badge{display:inline-block;margin-top:6px}

/* ---------------------------------------------------
   DASHBOARD-GRID (3/2/1 Spalten mit Abstand)
   --------------------------------------------------- */
.grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width: 1100px){
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px){
  .grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------
   LINK-LISTE – Tabelle (Desktop) + Reflow (Handy)
   --------------------------------------------------- */
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  position:sticky;top:0;z-index:1;background:#0e162a;border-bottom:2px solid var(--line);
  text-align:left;padding:12px 10px;font-weight:700
}
.table tbody td{border-bottom:1px solid var(--line);padding:10px 10px;vertical-align:middle}
.table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
.table tbody tr:hover{background:rgba(255,255,255,.04)}
.actions-cell{width:540px}
.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}

/* Handy: echte Reflow-Tabelle, Buttons untereinander & vollbreit */
@media (max-width: 720px){
  .container{padding:12px}
  .table thead{display:none}
  .table, .table tbody, .table tr, .table td{display:block;width:100%}
  .table tr{border-top:1px solid var(--line)}
  .table tbody td{border-bottom:none;padding:10px 12px}
  .table td[data-label]::before{
    content: attr(data-label);
    display:block; color:var(--muted); font-size:.85rem; margin-bottom:4px;
  }
  .actions-cell{width:auto}
  .row-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:4px}
  .row-actions .btn, .row-actions form .btn{width:100%;justify-content:center}
}
.badge.warn{ background:#3b2f06; border-color:#6b580f; color:#fde68a }
.badge.err{ background:#421c1c; border-color:#7f1d1d; color:#fecaca }
.form-input {
  width: 100%;
  max-width: 320px;   /* optimale Breite für Handy */
  padding: .7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0b1220;
  color: var(--text);
  box-sizing: border-box; /* verhindert Überlauf */
  margin: 0 auto;         /* zentriert auf kleinen Screens */
  display: block;
}
/* --- Login Layout (nur Login-Seite, nicht global!) --- */
body.login-page {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  display: grid;
  place-items: center;
  min-height: 100dvh; /* oder 100svh für iOS-Safe-Area */
  margin: 0;
}

body.login-page .card {
  background: #111827;
  padding: 24px;
  border-radius: 14px;
  width: min(420px, 92vw); /* exakt wie ursprünglich */
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

body.login-page .card h1 {
  margin: 0 0 16px 0;
  font-size: 1.35rem;
}

body.login-page .card label {
  display: block;
  font-size: .9rem;
  margin: .5rem 0 .25rem;
}

body.login-page .card input {
  width: 100%;
  padding: .7rem .8rem;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #0b1220; /* dunkles Feld – wie vorher */
  color: #e2e8f0;
  box-sizing: border-box;
}

body.login-page .card button {
  margin-top: 14px;
  width: 100%;
  padding: .8rem;
  border-radius: 10px;
  background: #22c55e; /* grüner Button – wie vorher */
  border: 0;
  color: #062a12;
  font-weight: 700;
  cursor: pointer;
}

body.login-page .msg { 
  margin-bottom: 12px; 
  padding: 10px 12px; 
  border-radius: 10px; 
  font-size: .9rem;
}
body.login-page .msg.err { background:#7f1d1d; color:#fee2e2 }
body.login-page .msg.ok  { background:#064e3b; color:#d1fae5 }

body.login-page .muted { 
  opacity: .75; 
  font-size: .85rem; 
  margin-top: 12px; 
  text-align: center;
}
body.login-page .muted a { color: #93c5fd }