/* Dorfkorb – Laden-Verwaltung (Premium, Light Mode) */
:root{
  --green:#2f9e54; --green-d:#1f6b39; --green-grad:linear-gradient(135deg,#3fae62,#1f7a40);
  --bg:#f4f7f1; --surface:#ffffff; --ink:#15201a; --muted:#6c7b71; --line:#e7ece2;
  --accent:#ff6a2b; --t-border:#e7ece2;
  --r:18px; --r-sm:12px; --sh:0 6px 22px rgba(26,52,32,.07); --sh-sm:0 2px 8px rgba(26,52,32,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--ink);font-size:15.5px;line-height:1.5}
a{color:var(--green-d)}

.topbar{position:sticky;top:0;z-index:20;background:var(--green-grad);color:#fff;
  display:flex;align-items:center;gap:1rem;padding:.75rem 1.1rem;flex-wrap:wrap;
  box-shadow:0 5px 20px rgba(31,107,57,.25)}
.topbar .brand{font-weight:800;letter-spacing:-.02em;font-size:1.05rem}
.topbar nav{display:flex;gap:.25rem;flex-wrap:wrap}
.topbar nav a{color:#eafff0;text-decoration:none;padding:.45rem .8rem;border-radius:11px;font-size:.93rem;font-weight:600;transition:background .12s}
.topbar nav a.active,.topbar nav a:hover{background:rgba(255,255,255,.2);color:#fff}

main{max-width:1040px;margin:0 auto;padding:1.2rem}
h1{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin:.3rem 0 1.2rem}
h2{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;margin:.2rem 0 .9rem}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem;margin-bottom:1.1rem;box-shadow:var(--sh-sm)}

.kpi-row{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.kpi{flex:1;min-width:150px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1.15rem 1.2rem;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--green-grad)}
.kpi .val{font-size:2rem;font-weight:800;letter-spacing:-.03em;
  background-image:var(--green-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi .lbl{color:var(--muted);font-size:.85rem;font-weight:600;margin-top:.15rem}

table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line)}
th{background:#eef4ea;font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fafcf8}

.btn{display:inline-block;background:var(--green-grad);color:#fff;border:0;border-radius:12px;
  padding:.6rem 1.05rem;font:inherit;font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;
  box-shadow:0 5px 14px rgba(31,107,57,.22);transition:transform .1s,box-shadow .1s}
.btn:hover{box-shadow:0 8px 18px rgba(31,107,57,.28)}
.btn:active{transform:translateY(1px)}
.btn.big{font-size:1.1rem;padding:.85rem 1.4rem;border-radius:14px}
.btn.ghost{background:#fff;color:var(--green-d);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--green)}
.btn.danger{background:linear-gradient(135deg,#ff7a51,#e2452b);box-shadow:0 5px 14px rgba(192,57,43,.22)}

input,select,textarea{font:inherit;font-size:1rem;padding:.62rem .7rem;border:1.5px solid var(--line);
  border-radius:11px;width:100%;background:#fff;color:var(--ink);transition:border-color .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green)}
label{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin:.7rem 0 .25rem}
.row{display:flex;gap:.8rem;flex-wrap:wrap}
.row>*{flex:1;min-width:160px}

.badge{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:.74rem;font-weight:800}
.badge.aktion{background:#fff0e8;color:var(--accent)}
.badge.neu{background:#e7f0fb;color:#2c6cb0}
.badge.unterwegs{background:#fff3d6;color:#a8770f}
.badge.geliefert{background:#e3f5e6;color:var(--green-d)}
.muted{color:var(--muted)}
.right{text-align:right}
summary{cursor:pointer;font-weight:700}

@media(max-width:600px){
  table,thead,tbody,th,td,tr{display:block}
  thead{display:none}
  td{border:0;padding:.3rem .8rem}
  tr{border-bottom:1px solid var(--line);padding:.5rem 0}
  main{padding:.9rem}
}