/* Tokens — siehe design.md („Industrieschwarz" dunkel / „Industriegrau" hell)
   Design-Sprache: eckige Kanten, Karten mit abgesetzter Kopfzeile, weicher Schatten. */
:root{
  --page-bg:#161616; --bg:#1d1d1c; --fg:#e8e2d8; --fg-dim:#98928a;
  --accent:#d19a55; --accent-2:#dcb96a; --border:#3d3c39;
  --lvl-group:#2a2a28; --lvl-card:#242220; --lvl-deep:#191917; --lvl-top:#2c2b29;
  --tint:rgba(209,154,85,0.10); --tint-2:rgba(209,154,85,0.20);
  --red:#e0574a; --chip:#33301f;
  --d-gold:#dcb96a; --d-rost:#dd9166; --d-gruen:#a8bb84; --d-rot:#d4837a;
  --d-gelb:#c9c26e; --d-blau:#84a7bb; --d-mauve:#bb84a7;
  --mono:'JetBrains Mono',monospace;
  --shadow:0 4px 14px rgba(0,0,0,0.28);
  --shadow-big:0 18px 40px rgba(0,0,0,0.34);
}
[data-theme="light"]{
  --page-bg:#e4e3e0; --bg:#f4f3f0; --fg:#2b2925; --fg-dim:#6f6b63;
  --accent:#8c4a2c; --accent-2:#7a5c1c; --border:#c6c2ba;
  --lvl-group:#d5d3cd; --lvl-card:#d8d6d1; --lvl-deep:#cac6bb; --lvl-top:#f4f3f0;
  --tint:rgba(140,74,44,0.08); --tint-2:rgba(140,74,44,0.18);
  --red:#c0392b; --chip:#ecdfc2;
  --d-gold:#c49a4a; --d-rost:#b3603a; --d-gruen:#7d8b62; --d-rot:#94493f;
  --d-gelb:#a09a4a; --d-blau:#5e7a8b; --d-mauve:#8b5e7d;
  --shadow:0 4px 14px rgba(43,41,37,0.16);
  --shadow-big:0 18px 40px rgba(43,41,37,0.22);
}

*{box-sizing:border-box}
body{margin:0;background:var(--page-bg);color:var(--fg);
  font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column}
button{font-family:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--tint-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}

/* Typo-Bausteine */
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.label{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--fg-dim)}
.mono-meta{font-family:var(--mono);font-size:10px;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--fg-dim)}
h1.title{margin:0;font-size:30px;font-weight:800;letter-spacing:-0.5px;line-height:1.15}
.lead{margin:8px 0 0;color:var(--fg-dim);font-size:14.5px;max-width:60ch;text-wrap:pretty}

/* Layout-Hülle: Inhalt neben der Seitenleiste */
.shell-main{display:flex;flex-direction:column;min-height:100vh;min-width:0;flex:1}
.shell-main.with-side{margin-left:64px}

/* Seitenleiste (Desktop): schmal mit Icons, fährt bei Hover aus */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:64px;z-index:60;
  background:var(--lvl-deep);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .18s ease}
.sidebar:hover{width:236px;box-shadow:var(--shadow-big)}
.side-logo{height:64px;display:flex;align-items:center;gap:13px;flex:none;
  padding-left:18px;border-bottom:1px solid var(--border);white-space:nowrap;
  text-decoration:none}
.side-logo:hover{text-decoration:none}
.side-brand{display:flex;flex-direction:column;line-height:1.15;text-transform:none;letter-spacing:0}
.side-brand .brand-name{color:var(--fg)}
.side-nav{display:flex;flex-direction:column;gap:2px;padding:12px 0}
.side-item{display:flex;align-items:center;gap:16px;height:46px;
  padding:0 0 0 19px;color:var(--fg-dim);border-left:3px solid transparent;
  white-space:nowrap}
.side-item:hover{color:var(--accent);background:var(--tint);text-decoration:none}
.side-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--tint)}
.side-icon{width:20px;flex:none;display:flex;justify-content:center;align-items:center}
.side-label{font-family:var(--mono);font-size:11px;letter-spacing:1.3px;
  text-transform:uppercase;opacity:0;transition:opacity .15s ease}
.sidebar:hover .side-label{opacity:1}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;
  gap:28px;padding:20px 28px;
  background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap;
  position:relative}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-name{font-weight:800;font-size:16px;letter-spacing:-0.2px}
.brand-sub{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--fg-dim)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.header-right{display:flex;align-items:center;gap:14px;flex:none}
.points-badge{display:flex;align-items:center;gap:8px;padding:6px 12px;
  border:1px solid var(--border);background:var(--lvl-card)}
.points-badge .star{color:var(--accent);font-size:13px}
.points-badge .value{font-family:var(--mono);font-size:12px;font-weight:700}
.points-badge .month{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--fg-dim)}
.icon-btn{width:34px;height:34px;border:1px solid var(--border);
  background:transparent;color:var(--fg-dim);cursor:pointer;font-size:13px}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--tint)}
.lang-btn{height:34px;padding:0 11px;border:1px solid var(--border);
  background:transparent;color:var(--fg-dim);cursor:pointer;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:1px;display:inline-flex;align-items:center}
.lang-btn:hover{border-color:var(--accent);color:var(--accent);
  background:var(--tint);text-decoration:none}
.user-chip{display:flex;align-items:center;gap:9px;border:1px solid var(--border);
  background:var(--lvl-card);padding:4px 12px 4px 4px;color:var(--fg)}
.user-chip:hover{border-color:var(--accent);text-decoration:none}
.avatar{width:26px;height:26px;background:var(--chip);
  color:var(--accent-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;font-weight:700}
.user-name{font-size:12.5px;font-weight:600}

/* Responsiv: Seitenleiste bleibt auf jeder Größe, Kopfzeile wird kompakter */
@media (max-width:1060px){
  .site-header{gap:14px;padding:14px 18px}
  .header-right{margin-left:auto}
}
@media (max-width:620px){
  .points-badge .month{display:none}
  .user-name{display:none}
  .user-chip{padding:4px}
  .brand-sub{display:none}
}

/* Seiten-Layout */
.page{padding:34px 28px 60px;max-width:1240px;width:100%;margin:0 auto;
  display:flex;flex-direction:column;gap:22px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap}

/* Karten: eckig, Kopfzeile farblich abgesetzt, weicher Schatten */
.card{background:var(--bg);border:1px solid var(--border);
  box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--lvl-deep);border-bottom:1px solid var(--border);
  padding:12px 20px;font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--accent);flex:none}
.card-head .sub{color:var(--fg-dim);letter-spacing:1.2px}
.card-head.alert{color:var(--red)}
.card-body{padding:20px;flex:1;min-width:0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.span-2{grid-column:span 2}
.accent-left{border-left:3px solid var(--accent)}
.stat-value{font-family:var(--mono);font-size:34px;font-weight:700;margin:0 0 6px}
.stat-note{margin:0;color:var(--fg-dim);font-size:13px;line-height:1.5}
.stat-dim{font-size:16px;color:var(--fg-dim)}
.mini-stat{background:var(--bg);border:1px solid var(--border);
  box-shadow:var(--shadow);padding:14px 20px}
.mini-stat .value{font-family:var(--mono);font-size:24px;font-weight:700;margin-top:5px}

/* Buttons */
.btn-primary{display:inline-block;border:none;background:var(--accent);
  color:var(--page-bg);font-weight:700;font-size:13.5px;padding:13px 24px;
  cursor:pointer;flex:none;box-shadow:var(--shadow)}
.btn-primary:hover{opacity:0.88;text-decoration:none;color:var(--page-bg)}
.pill{border:none;background:var(--accent);color:var(--page-bg);
  padding:8px 16px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;flex:none}
.pill:hover{opacity:0.88}
.pill-ghost{border:1px solid var(--border);background:transparent;color:var(--fg-dim);
  padding:8px 16px;font-family:var(--mono);font-size:10px;
  letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;flex:none;display:inline-block}
.pill-ghost:hover{border-color:var(--accent);color:var(--accent);
  background:var(--tint);text-decoration:none}
.pill-flat{border:1px dashed var(--border);background:transparent;color:var(--fg-dim);
  padding:8px 14px;font-family:var(--mono);font-size:10px;
  letter-spacing:1.2px;text-transform:uppercase;flex:none}

/* Sterne & Fortschritt */
.stars{display:flex;gap:7px;flex-wrap:wrap}
.stars .on{color:var(--accent)}
.stars .off{color:var(--border)}
.progress{height:8px;background:var(--lvl-group);border:1px solid var(--border);overflow:hidden}
.progress-fill{height:100%;background:var(--accent)}
.big-number{font-family:var(--mono);font-size:46px;font-weight:700;color:var(--accent);line-height:1}

/* Aufgaben-Listen */
.task-row{display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--border)}
.task-row:last-child{border-bottom:none}
.color-bar{width:4px;flex:none}
.task-title{font-size:14.5px;font-weight:600}
.feed-row{display:flex;gap:11px;align-items:baseline}
.feed-star{color:var(--accent);font-size:12px}
.feed-text{flex:1;min-width:0;font-size:13.5px;line-height:1.45}
.feed-when{font-family:var(--mono);font-size:10px;color:var(--fg-dim);flex:none}

/* Pool */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-btn{display:inline-block;border:1px solid var(--border);background:transparent;
  color:var(--fg-dim);font-family:var(--mono);font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;padding:9px 15px;cursor:pointer}
.filter-btn:hover{text-decoration:none;color:var(--accent)}
.filter-btn.active{border-color:var(--accent);background:var(--tint);color:var(--accent)}
.pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:14px}
.pool-card{background:var(--bg);border:1px solid var(--border);display:flex;
  flex-direction:column;min-width:0;box-shadow:var(--shadow)}
.pool-card:hover{border-color:var(--accent)}
.pool-card.taken{opacity:0.55}
.pool-card-bar{height:4px;flex:none}
.pool-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--accent-2);background:var(--chip);padding:4px 8px}
.task-points{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);flex:none}
.pool-card-title{font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-0.2px}
.pool-card-desc{font-size:12.5px;color:var(--fg-dim);line-height:1.5;flex:1}
.pool-card-foot{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding-top:4px}

/* Monatsübersicht */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.member-row{display:flex;align-items:center;gap:13px;padding:11px 0;
  border-bottom:1px solid var(--border)}
.member-row:last-child{border-bottom:none}
.member-name{flex:1;min-width:0;font-size:14px;font-weight:600}
.member-bar{height:6px;width:112px;background:var(--lvl-group);
  border:1px solid var(--border);flex:none;overflow:hidden}
.member-bar span{display:block;height:100%}
.member-pts{font-family:var(--mono);font-size:12px;font-weight:700;width:46px;
  text-align:right;flex:none}
.member-pts.under{color:var(--red)}
.penalty-card{background:var(--lvl-card);border:1px solid var(--border);
  border-left:3px solid var(--red);padding:14px 16px}
.red-label{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--red)}

/* Admin */
.quota-btn{width:32px;height:32px;border:1px solid var(--border);background:transparent;
  color:var(--fg);cursor:pointer;font-size:15px}
.quota-btn:hover{border-color:var(--accent);color:var(--accent)}
.quota-value{font-family:var(--mono);font-size:26px;font-weight:700;min-width:34px;text-align:center}

/* Login */
.login-main{flex:1;display:flex;align-items:center;justify-content:center;
  padding:48px 24px;background:var(--page-bg)}
.login-card{width:100%;max-width:392px;background:var(--bg);border:1px solid var(--border);
  box-shadow:var(--shadow-big);display:flex;flex-direction:column}
.field-label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--fg-dim);margin-bottom:7px}
.field-input{width:100%;padding:12px 16px;border:1px solid var(--border);
  background:var(--lvl-card);color:var(--fg);font-family:'Manrope',sans-serif;
  font-size:14px;margin-bottom:16px}
.field-input:focus{border-color:var(--accent);outline:none}
.btn-block{width:100%;border:none;background:var(--accent);
  color:var(--page-bg);font-weight:700;font-size:14px;padding:14px;cursor:pointer}
.btn-block:hover{opacity:0.88}
.form-error{color:var(--red);font-size:13px;margin:0 0 16px}
.flash{border:1px solid var(--accent);background:var(--tint);color:var(--accent);
  padding:10px 16px;font-size:13.5px}