/* HABI Chef-Dashboard – Orange/Schwarz nach Logo */
:root{
  --orange:#f57c1f; --orange-dkl:#d96a10; --schwarz:#141414; --anthrazit:#1f1d1b;
  --papier:#f6f3ee; --karte:#ffffff; --linie:#e5dfd6; --text:#242220; --grau:#877e75;
  --gruen:#2e7d4f; --rot:#c0392b; --gelb:#e8a200;
}
*{box-sizing:border-box; margin:0}
body{font-family:"Segoe UI Variable","Segoe UI",Roboto,system-ui,sans-serif; background:var(--papier); color:var(--text)}
.versteckt{display:none !important}
button{font:inherit; cursor:pointer; border:0; background:none}
input,select,textarea{font:inherit; padding:9px 12px; border:1px solid var(--linie); border-radius:10px; background:var(--karte); color:var(--text)}
input:focus,select:focus{outline:2px solid var(--orange); border-color:var(--orange)}

.btn{border-radius:10px; padding:9px 16px; font-weight:600; background:var(--karte); border:1px solid var(--linie)}
.btn:hover{border-color:var(--orange); color:var(--orange-dkl)}
.btn.primaer{background:var(--orange); color:#fff; border-color:var(--orange)}
.btn.primaer:hover{background:var(--orange-dkl); color:#fff}
.btn.gruen{background:var(--gruen); color:#fff; border-color:var(--gruen)}
.btn.rot{background:var(--rot); color:#fff; border-color:var(--rot)}
.btn.klein{padding:5px 10px; font-size:12.5px}
.fehler{color:var(--rot); font-size:13px; min-height:18px; margin-top:8px}

/* Login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--schwarz)}
.login-box{background:var(--karte); border-radius:22px; padding:36px 40px; width:360px; text-align:center; display:flex; flex-direction:column; gap:12px; box-shadow:0 30px 70px rgba(0,0,0,.5)}
.login-box h1{font-size:26px}
.login-box h1 span{color:var(--orange); font-weight:600; font-size:18px; display:block}
.login-box .unter{color:var(--grau); font-size:12.5px; margin-bottom:8px}

/* Layout */
.layout{display:flex; min-height:100vh}
.seitenleiste{width:240px; flex:none; background:var(--schwarz); color:#fff; display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh}
.marke{display:flex; gap:10px; align-items:center; padding:6px 8px 20px}
.marke b{font-size:19px; letter-spacing:.02em}
.marke small{display:block; color:#9b938b; font-size:10.5px}
nav{display:flex; flex-direction:column; gap:4px}
.nav-btn{color:#cfc8c0; text-align:left; padding:11px 14px; border-radius:10px; font-weight:600; font-size:14px}
.nav-btn:hover{background:#242220; color:#fff}
.nav-btn.aktiv{background:var(--orange); color:#fff}
.badge{background:#fff; color:var(--orange-dkl); border-radius:999px; font-size:11px; padding:1px 7px; margin-left:6px; font-weight:800}
.leiste-unten{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#9b938b; font-size:12.5px; padding:8px}
.leiste-unten .btn{background:#242220; border-color:#3a3733; color:#cfc8c0}

main{flex:1; padding:28px 34px; max-width:1400px}
h2{font-size:22px; margin-bottom:4px}
.seiten-unter{color:var(--grau); font-size:13.5px; margin-bottom:22px}
.karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:22px}
.karte{background:var(--karte); border:1px solid var(--linie); border-radius:16px; padding:16px 18px}
.karte .k-label{font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--grau); font-weight:700}
.karte .k-wert{font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:4px}
.karte .k-wert.orange{color:var(--orange)}
.karte .k-wert.rot{color:var(--rot)}
.karte .k-wert.gruen{color:var(--gruen)}

table{width:100%; border-collapse:collapse; background:var(--karte); border-radius:14px; overflow:hidden; border:1px solid var(--linie); font-size:14px}
th{background:var(--anthrazit); color:#fff; text-align:left; padding:10px 12px; font-size:12px; text-transform:uppercase; letter-spacing:.06em}
td{padding:10px 12px; border-top:1px solid var(--linie); vertical-align:middle}
tr:hover td{background:#fbf8f3}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

.punkt{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:8px; vertical-align:-1px}
.pille{display:inline-block; font-size:11.5px; font-weight:700; border-radius:999px; padding:3px 10px}
.pille.offen{background:#fdf3d7; color:#8a6a00}
.pille.genehmigt{background:#e2f2e8; color:var(--gruen)}
.pille.abgelehnt{background:#fae3df; color:var(--rot)}
.pille.grau{background:#eee9e2; color:var(--grau)}

.werkzeuge{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.werkzeuge .spacer{flex:1}

/* Dienstplan-Raster */
.plan-raster{display:grid; grid-template-columns:repeat(7,1fr); gap:10px}
.plan-tag{background:var(--karte); border:1px solid var(--linie); border-radius:14px; padding:10px; min-height:150px}
.plan-tag.heute{outline:2px solid var(--orange)}
.plan-tag h4{font-size:12px; color:var(--grau); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px}
.plan-tag h4 b{color:var(--text); font-size:14px; margin-left:4px}
.chip{border-radius:9px; padding:6px 8px; font-size:12px; font-weight:600; color:#fff; margin-bottom:6px; position:relative; line-height:1.35}
.chip small{display:block; font-weight:500; opacity:.9; font-size:10.5px}
.chip .x{position:absolute; top:3px; right:6px; color:#fff; opacity:.7; font-size:13px}
.chip .x:hover{opacity:1}
.chip.abwesend{opacity:.65; font-style:italic}

.formzeile{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; background:var(--karte); border:1px solid var(--linie); border-radius:14px; padding:14px; margin-bottom:18px}
.formzeile label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:700; color:var(--grau); text-transform:uppercase; letter-spacing:.05em}

/* Modal */
.modal-hinter{position:fixed; inset:0; background:rgba(20,20,20,.55); display:flex; align-items:center; justify-content:center; z-index:50}
.modal{background:var(--karte); border-radius:18px; padding:24px; width:min(560px,92vw); max-height:90vh; overflow:auto}
.modal h3{margin-bottom:14px}
.modal .felder{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.modal .felder label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:700; color:var(--grau)}
.modal .aktionen{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}

/* HABI-Chat */
.habi-knopf{position:fixed; right:22px; bottom:22px; width:62px; height:62px; border-radius:50%; background:var(--schwarz); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,.35); z-index:60; border:3px solid var(--orange)}
.habi-chat{position:fixed; right:22px; bottom:96px; width:min(360px,92vw); height:480px; background:var(--karte); border:1px solid var(--linie); border-radius:18px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.35); z-index:60}
.habi-kopf{background:var(--schwarz); color:#fff; display:flex; align-items:center; gap:8px; padding:12px 14px}
.habi-kopf span{color:#9b938b; font-size:12px}
.habi-kopf button{margin-left:auto; color:#fff; font-size:20px}
.habi-verlauf{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px}
.habi-blase{max-width:85%; padding:9px 12px; border-radius:14px; font-size:13.5px; line-height:1.45; white-space:pre-wrap}
.habi-blase.bot{background:#f3ede5; border-bottom-left-radius:4px; align-self:flex-start}
.habi-blase.ich{background:var(--orange); color:#fff; border-bottom-right-radius:4px; align-self:flex-end}
.habi-eingabe{display:flex; gap:8px; padding:10px; border-top:1px solid var(--linie)}
.habi-eingabe input{flex:1}
.habi-eingabe button{background:var(--orange); color:#fff; border-radius:10px; width:44px; font-size:16px}

@media (max-width:900px){
  .layout{flex-direction:column}
  .seitenleiste{width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center}
  nav{flex-direction:row; flex-wrap:wrap}
  .plan-raster{grid-template-columns:1fr}
  main{padding:18px}
}