:root{
  --gruen:#1f6f4a; --gruen-h:#175639; --gruen-l:#e8f3ed;
  --blau:#2f6fb0;  --blau-l:#e9f1f9;
  --bg:#f4f6f8; --card:#fff; --line:#dde3e9;
  --txt:#1b2430; --muted:#6b7885;
  --rot:#c0392b; --gelb:#b7791f;
  --r:14px; --sh:0 1px 3px rgba(20,30,40,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--txt);
  padding-bottom:calc(74px + env(safe-area-inset-bottom));
}
body.bare{padding-bottom:0}

/* ---------- Kopfzeile ---------- */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  background:var(--gruen); color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.14em;font-size:17px}
.who{margin-left:auto;font-size:13px;opacity:.85}
.logout{color:#fff;text-decoration:none;font-size:20px;opacity:.85;padding:4px 2px}

.wrap{max-width:820px;margin:0 auto;padding:16px}

/* ---------- Tab-Leiste unten ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; background:#fff; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  flex:1; text-align:center; text-decoration:none; color:var(--muted);
  font-size:11px; padding:9px 2px 10px; display:flex; flex-direction:column; gap:3px;
}
.tabbar a span{font-size:21px;line-height:1}
.tabbar a.on{color:var(--gruen);font-weight:600}

/* ---------- Karten ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:var(--sh)}
.card.tight{padding:0;overflow:hidden}
h1{font-size:22px;margin:4px 0 16px}
h2{font-size:17px;margin:0 0 12px}
h3{font-size:14px;margin:18px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
p.hint{color:var(--muted);font-size:14px;margin:-6px 0 14px}

/* ---------- Formulare ---------- */
label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px;color:#3a4753}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;
  font-size:16px;font-family:inherit;background:#fff;color:var(--txt);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 3px var(--gruen-l)}
textarea{min-height:90px;resize:vertical}
.row{display:flex;gap:10px}
.row>*{flex:1}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;border-radius:11px;border:0;cursor:pointer;
  font-size:16px;font-weight:600;text-decoration:none;
  background:var(--gruen);color:#fff;font-family:inherit;
}
.btn:active{background:var(--gruen-h)}
.btn.block{display:flex;width:100%}
.btn.sec{background:#fff;color:var(--txt);border:1px solid var(--line)}
.btn.blau{background:var(--blau)}
.btn.rot{background:var(--rot)}
.btn.sm{padding:9px 14px;font-size:14px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btnrow{display:flex;gap:10px;margin-top:18px}
.btnrow .btn{flex:1}

/* ---------- Auswahl-Kacheln (Wizard) ---------- */
.tiles{display:grid;gap:11px}
.tile{
  display:block;background:#fff;border:2px solid var(--line);border-radius:var(--r);
  padding:16px;text-decoration:none;color:var(--txt);cursor:pointer;
}
.tile:active{border-color:var(--gruen)}
.tile b{display:block;font-size:17px}
.tile small{color:var(--muted);display:block;margin-top:3px}
.tile .preis{float:right;font-weight:700;color:var(--gruen)}
.tile.blau{background:var(--blau-l);border-color:#bcd5ec}
.tile.gruen{background:var(--gruen-l);border-color:#bfdccd}
.tile input{position:absolute;opacity:0}
.tile.check{position:relative;padding-left:52px}
.tile.check:before{
  content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border:2px solid var(--line);border-radius:7px;background:#fff;
}
.tile.check.on{border-color:var(--gruen);background:var(--gruen-l)}
.tile.check.on:before{background:var(--gruen);border-color:var(--gruen)}
.tile.check.on:after{
  content:"✓";position:absolute;left:22px;top:50%;transform:translateY(-50%);
  color:#fff;font-size:15px;font-weight:700;
}

/* ---------- Schrittanzeige ---------- */
.steps{display:flex;gap:5px;margin-bottom:16px}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.steps i.on{background:var(--gruen)}
.stepinfo{font-size:13px;color:var(--muted);margin-bottom:6px}

/* ---------- Listen ---------- */
.list{list-style:none;margin:0;padding:0}
.list li{border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list a,.list .item{display:block;padding:14px 16px;text-decoration:none;color:var(--txt)}
.list b{display:block;font-size:16px}
.list small{color:var(--muted);font-size:13px}
.list .re{float:right;text-align:right;font-size:13px}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em}
.badge.entwurf{background:#eceff3;color:#5b6773}
.badge.versendet{background:var(--blau-l);color:var(--blau)}
.badge.angenommen{background:var(--gruen-l);color:var(--gruen)}
.badge.abgelehnt{background:#fdecea;color:var(--rot)}
.badge.typ{background:var(--gruen-l);color:var(--gruen)}

/* ---------- Summen ---------- */
.summe{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.summe div{display:flex;justify-content:space-between;padding:5px 0;font-size:15px}
.summe div.gross{font-size:20px;font-weight:700;border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.summe .rabatt{color:var(--rot)}

/* ---------- Meldungen ---------- */
.flash{padding:13px 16px;border-radius:11px;margin-bottom:14px;font-size:15px}
.flash.ok{background:var(--gruen-l);color:var(--gruen-h)}
.flash.err{background:#fdecea;color:var(--rot)}

/* ---------- Tabellen (Admin) ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
td.num,th.num{text-align:right}

.empty{text-align:center;color:var(--muted);padding:36px 16px}
.empty span{font-size:40px;display:block;margin-bottom:8px;opacity:.4}

/* ---------- Login ---------- */
.login{max-width:400px;margin:8vh auto;padding:16px}
.login .logo{text-align:center;font-weight:700;letter-spacing:.22em;font-size:26px;color:var(--gruen);margin-bottom:6px}
.login .sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:26px}

/* ---------- Kachel-Grid Dashboard ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center}
.kpi b{display:block;font-size:26px;color:var(--gruen)}
.kpi small{color:var(--muted);font-size:12px}

@media (min-width:720px){
  .tiles.zwei{grid-template-columns:1fr 1fr}
  h1{font-size:26px}
}

/* ---------- Druckansicht ---------- */
@media print{
  body{background:#fff;padding:0}
  .top,.tabbar,.noprint{display:none!important}
  .wrap{max-width:none;padding:0}
  .card{border:0;box-shadow:none;padding:0}
}