:root{
  --bg:#0a0e17; --bg2:#0d1220; --panel:#111827; --panel2:#0e1524;
  --line:#222c44; --ink:#e8e6df; --soft:#a9b2c4; --faint:#5c6579;
  --gold:#e8c26a; --gold-d:#c99b4e; --teal:#5eead4; --teal-d:#2f8f88;
  --gruen:#8fd08a; --warn:#e8b06a; --rot:#e88a7a; --grau:#6c7488;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(1100px 640px at 80% -10%, #17203a 0%, transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--ink); font-family:var(--sans); line-height:1.55; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* PIN-Tor */
.tor{
  position:fixed; inset:0; z-index:100; display:none; place-items:center;
  background:radial-gradient(900px 600px at 50% 20%, #141c30 0%, #070a12 70%);
}
body.gesperrt .tor{display:grid}
body.gesperrt .kopf, body.gesperrt main, body.gesperrt .stand{display:none}
.tor-karte{
  width:min(340px,88vw); text-align:center; background:var(--panel);
  border:1px solid var(--line); border-radius:20px; padding:34px 28px 30px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 24px 60px #0008;
}
.tor-logo{font-size:44px; color:var(--gold); text-shadow:0 0 20px #e8c26a55}
.tor-karte h2{font-family:var(--serif); margin:0; font-size:30px; letter-spacing:.05em;
  background:linear-gradient(180deg,#fbe6bf,var(--gold) 60%,var(--gold-d));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.tor-karte p{margin:0; font-size:13px; color:var(--soft)}
.tor-karte input{
  width:100%; text-align:center; font-size:22px; letter-spacing:.4em; font-family:var(--mono);
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  color:var(--ink); padding:12px 14px; margin-top:6px;
}
.tor-karte input:focus{outline:none; border-color:var(--teal-d); box-shadow:0 0 16px #5eead422}
.tor-karte button{
  width:100%; font-size:16px; font-weight:600; color:#12160c; cursor:pointer;
  background:linear-gradient(180deg,#f2d488,var(--gold) 60%,var(--gold-d));
  border:none; border-radius:12px; padding:13px; transition:filter .12s ease;
}
.tor-karte button:hover{filter:brightness(1.06)}
.tor-fehler{color:var(--rot); font-size:12.5px}

/* Stand-Marke (ziehbar, oben rechts — Heiner-Regel) */
.stand{
  position:fixed; top:12px; right:12px; z-index:50; cursor:grab;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint);
  background:#0b1120cc; border:1px solid var(--line); padding:5px 10px; border-radius:999px;
  backdrop-filter:blur(4px); user-select:none;
}
.stand:active{cursor:grabbing}

.kopf{
  max-width:900px; margin:0 auto; padding:clamp(26px,5vw,50px) clamp(16px,4vw,32px) 8px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.wort{display:flex; align-items:center; gap:16px}
.logo{
  font-size:44px; line-height:1; color:var(--gold);
  text-shadow:0 0 18px #e8c26a55;
}
.kopf h1{
  font-family:var(--serif); font-weight:600; margin:0; font-size:clamp(34px,7vw,52px);
  letter-spacing:.03em;
  background:linear-gradient(180deg,#fbe6bf,var(--gold) 55%,var(--gold-d));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.unter{margin:2px 0 0; color:var(--soft); font-size:13.5px; max-width:44ch}
.stufe{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:#1a1206;
  background:var(--gold); padding:6px 11px; border-radius:999px; white-space:nowrap; font-weight:700;
  margin-top:6px;
}

main{max-width:900px; margin:0 auto; padding:0 clamp(16px,4vw,32px) 90px}

/* Steuerpult */
.pult{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:22px 22px 20px; margin-top:22px;
}
.werte-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.tile{
  background:var(--panel2); border:1px solid var(--line); border-radius:13px;
  padding:14px 16px; text-align:center;
}
.tile b{display:block; font-size:23px; color:var(--gold); font-variant-numeric:tabular-nums}
.tile span{font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--faint)}

.knoepfe{display:flex; gap:12px; align-items:center; margin:20px 0 6px; flex-wrap:wrap}
button.gross{
  flex:1; min-width:220px; display:flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--sans); font-size:18px; font-weight:600; color:#12160c; cursor:pointer;
  background:linear-gradient(180deg,#f2d488,var(--gold) 60%,var(--gold-d));
  border:none; border-radius:14px; padding:16px 22px; letter-spacing:.02em;
  transition:transform .12s ease, filter .12s ease; box-shadow:0 8px 26px #e8c26a22;
}
button.gross:hover{transform:translateY(-2px); filter:brightness(1.06)}
button.gross:disabled{opacity:.6; cursor:progress; transform:none}
button.gross .k-icon{font-size:20px}
button.klein{
  font-family:var(--sans); font-size:13px; color:var(--soft); cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  transition:border-color .12s ease, color .12s ease;
}
button.klein:hover{border-color:var(--teal-d); color:var(--teal)}

/* Schalter */
.schalter{display:flex; gap:26px; flex-wrap:wrap; margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.schalt{display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none}
.schalt input{position:absolute; opacity:0; width:0; height:0}
.track{
  width:44px; height:25px; border-radius:999px; background:#1b2438; border:1px solid var(--line);
  position:relative; transition:background .15s ease, border-color .15s ease; flex:none;
}
.track::after{
  content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
  background:var(--soft); transition:transform .15s ease, background .15s ease;
}
.schalt input:checked + .track{background:#123; border-color:var(--teal-d)}
.schalt input:checked + .track::after{transform:translateX(19px); background:var(--teal)}
.schalt.notaus input:checked + .track{background:#3a1b1b; border-color:#7a3a3a}
.schalt.notaus input:checked + .track::after{background:var(--rot)}
.schalt:focus-within .track{outline:2px solid var(--teal-d); outline-offset:2px}
.lab{font-size:14px; color:var(--ink)}
.lab small{display:block; font-size:11px; color:var(--faint); letter-spacing:.02em}
.schalt-reihe{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.takt-wahl{
  font-family:var(--sans); font-size:13px; color:var(--ink); cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; transition:border-color .12s ease;
}
.takt-wahl:hover{border-color:var(--teal-d)}
.takt-wahl:focus{outline:none; border-color:var(--teal-d); box-shadow:0 0 12px #5eead422}
.takt-wahl:disabled{opacity:.4; cursor:not-allowed}

.letzter{margin:16px 0 0; font-size:13px; color:var(--faint); font-style:italic;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* Fahrtenbuch */
.buch{margin-top:30px}
.buch-kopf{display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.buch-kopf h2{font-family:var(--serif); font-weight:600; font-size:26px; margin:0; color:var(--ink)}
.hinweis{font-size:12.5px; color:var(--faint)}

/* Tabs: Verlauf | Kanban */
.tabs{margin-left:auto; display:flex; gap:5px; background:var(--panel2);
  border:1px solid var(--line); border-radius:12px; padding:4px}
.tab{font-family:var(--sans); font-size:13px; color:var(--soft); cursor:pointer;
  background:transparent; border:none; border-radius:9px; padding:7px 15px;
  transition:background .12s ease, color .12s ease}
.tab:hover{color:var(--ink)}
.tab.aktiv{background:var(--gold); color:#12160c; font-weight:600}

/* Kanban-Board */
.kanban{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start}
.kanban[hidden]{display:none}
.kspalte{background:var(--panel2); border:1px solid var(--line); border-radius:14px;
  padding:12px; min-height:130px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .12s ease, box-shadow .12s ease}
.kspalte.ueber{border-color:var(--teal); box-shadow:0 0 18px #5eead422}
.kspalte-kopf{display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); padding:2px 4px 6px; border-bottom:1px solid var(--line)}
.kspalte.offen .kspalte-kopf{color:var(--teal)}
.kspalte.erledigt .kspalte-kopf{color:var(--gruen)}
.kspalte.verworfen .kspalte-kopf{color:var(--soft)}
.kzahl{background:#1b2438; border-radius:999px; padding:1px 9px; color:var(--soft); font-weight:700}
.kkarte{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--teal-d);
  border-radius:11px; padding:11px 12px; cursor:grab; transition:transform .1s ease, border-color .12s ease}
.kkarte:hover{border-color:#2c3852}
.kkarte:active{cursor:grabbing}
.kkarte.zieht{opacity:.4}
.kspalte.erledigt .kkarte{border-left-color:var(--gruen)}
.kspalte.verworfen .kkarte{border-left-color:var(--grau)}
.kkarte .knr{font-family:var(--mono); font-size:10.5px; color:var(--faint)}
.kkarte .kkat{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--faint);
  text-transform:uppercase; margin-top:3px}
.kkarte .kidee{font-size:13.5px; color:var(--ink); margin-top:5px; line-height:1.4}
.kleer{color:var(--faint); font-size:12px; text-align:center; padding:16px 0; font-style:italic}
@media (max-width:640px){ .kanban{grid-template-columns:1fr} }
.eintraege{display:flex; flex-direction:column; gap:16px}
.eintraege[hidden]{display:none}
.leer{color:var(--faint); background:var(--panel2); border:1px dashed var(--line);
  border-radius:14px; padding:26px; text-align:center; font-size:14px}

.eintrag{
  background:var(--panel); border:1px solid var(--line); border-radius:15px;
  padding:15px 18px 14px 20px; position:relative; overflow:hidden;
  animation:auf .35s ease; transition:border-color .15s ease;
}
.eintrag:hover{border-color:#2c3852}
@keyframes auf{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
/* Linke Leiste zeigt die MENSCHLICHE Entscheidung (Vorschlag/erledigt/abgelehnt) */
.eintrag::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--teal-d)}
.eintrag.hs-erledigt::before{background:var(--gruen)}
.eintrag.hs-verworfen::before{background:var(--grau)}
.eintrag.sys::before{background:var(--grau)}
.eintrag.hs-erledigt{border-color:#3a6b3455}

/* Kopfzeile */
.e-kopf{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px}
.e-nr{font-family:var(--mono); font-size:12px; color:var(--teal)}
.e-zeit{font-family:var(--mono); font-size:12px; color:var(--faint)}
.e-quelle{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint)}
/* prominente Menschen-Entscheidung rechts */
.hs-pill{
  margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.06em; font-weight:700;
  padding:4px 12px; border-radius:999px; text-transform:uppercase;
}
.hs-pill.offen{background:#0f2e2b; color:var(--teal); border:1px solid var(--teal-d)}
.hs-pill.erledigt{background:#132e12; color:var(--gruen); border:1px solid #3a6b34}
.hs-pill.verworfen{background:#22283a; color:var(--soft); border:1px solid var(--line)}
.hs-pill.sys{background:#231d10; color:var(--warn); border:1px solid #5a4a24; margin-left:auto}

.e-idee{font-family:var(--serif); font-size:18px; color:var(--gold); margin:1px 0 7px; line-height:1.35}
.e-next{font-size:13px; color:var(--soft); margin:0 0 3px}
.e-next b{color:var(--faint); font-weight:600; font-family:var(--mono); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; margin-right:6px}

/* Aktionsleiste */
.e-aktionen{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
.mini{
  font-family:var(--sans); font-size:12px; cursor:pointer; color:var(--soft);
  background:transparent; border:1px solid var(--line); border-radius:9px; padding:6px 11px;
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.mini:hover{border-color:var(--teal-d); color:var(--ink)}
.mini.erledigt.aktiv{background:#132e12; border-color:#3a6b34; color:var(--gruen)}
.mini.verwerfen.aktiv{background:#22283a; border-color:var(--line); color:var(--soft)}
.mini.mehr{margin-left:auto}

/* Detail (aufklappbar) */
.e-detail{margin-top:11px; padding-top:4px}
.e-detail[hidden]{display:none}
.zeile{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:5px 0; border-top:1px solid #1a2236}
.zeile:first-child{border-top:none}
.zeile .k{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-top:2px}
.zeile .v{font-size:13.5px; color:var(--soft)}
.werte-ok{color:var(--gruen)} .werte-nein{color:var(--warn)}
.e-hinweis{margin-top:8px; font-size:11.5px; color:var(--faint); font-style:italic}

@media (max-width:560px){
  .werte-tiles{grid-template-columns:1fr 1fr}
  .zeile{grid-template-columns:78px 1fr; gap:9px}
  .stand{position:static; display:inline-block; margin:12px 0 -6px 16px}
  .mini.mehr{margin-left:0}
}