/* ============================================================
   havelo — Dashboard (eingeloggt)  ·  nutzt havelo-tokens.css
   Desktop-Web-App: Sidebar + Topbar + Widget-Grid
   ============================================================ */

* , *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
button { font-family:inherit; cursor:pointer; }

.app { display:grid; grid-template-columns: 256px 1fr; min-height:100vh; }

/* ---------- sidebar ---------- */
.side { background:var(--slate); color:rgba(251,246,237,0.7); display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh; }
.side-brand { display:flex; align-items:center; gap:11px; padding:4px 8px 22px; }
.side-brand img { width:38px; height:38px; border-radius:11px; }
.side-brand .wm { font-family:var(--font-display); font-weight:700; font-size:25px; color:var(--cream); }
.side-section { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(251,246,237,0.62); padding:14px 10px 8px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-md); font-size:14.5px; font-weight:600; color:rgba(251,246,237,0.72); transition:all var(--transition-fast); cursor:pointer; position:relative; }
.nav-item:hover { background:rgba(251,246,237,0.07); color:var(--cream); }
.nav-item.active { background:rgba(251,246,237,0.1); color:var(--cream); }
.nav-item.active::before { content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--mc, var(--ember)); }
.nav-item .ic { width:22px; height:22px; flex-shrink:0; display:grid; place-items:center; }
.nav-item .ic svg { width:19px; height:19px; }
.nav-item.soon { opacity:0.4; }
.nav-item.soon .tag { margin-left:auto; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; background:rgba(251,246,237,0.12); border-radius:var(--radius-full); padding:2px 7px; }
.side-user { margin-top:auto; display:flex; align-items:center; gap:11px; padding:12px 10px; border-top:1px solid rgba(251,246,237,0.12); }
.side-user .ava { width:36px; height:36px; border-radius:50%; background:var(--gold); color:var(--slate); display:grid; place-items:center; font-weight:800; font-size:15px; flex-shrink:0; }
.side-user .who { line-height:1.2; }
.side-user .who .n { font-weight:700; font-size:13.5px; color:var(--cream); }
.side-user .who .p { font-size:11.5px; color:rgba(251,246,237,0.66); }

/* ---------- main ---------- */
.main { display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:20px; padding:22px 34px; background:rgba(251,246,237,0.7); backdrop-filter:blur(8px); border-bottom:1px solid var(--slate-12); position:sticky; top:0; z-index:20; }
.topbar .greet h1 { font-family:var(--font-display); font-weight:600; font-size:26px; line-height:1.1; }
.topbar .greet .date { font-size:13px; color:var(--slate-55); font-family:var(--font-mono); margin-top:2px; }
.topbar .ask { margin-left:auto; display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--control-border); border-radius:var(--radius-full); padding:9px 16px; width:300px; box-shadow:var(--shadow-sm); }
.topbar .ask svg { width:18px; height:18px; color:var(--ember); flex-shrink:0; }
.topbar .ask input { border:none; outline:none; font-family:inherit; font-size:14px; color:var(--slate); background:transparent; width:100%; }
.topbar .ask input::placeholder { color:var(--slate-40); }
.icon-btn { width:44px; height:44px; border-radius:var(--radius-md); border:1.5px solid var(--control-border); background:#fff; display:grid; place-items:center; position:relative; transition:all var(--transition-fast); }
.icon-btn:hover { border-color:var(--slate-40); }
.icon-btn svg { width:20px; height:20px; color:var(--slate); }
.icon-btn .badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; border-radius:9px; background:var(--ember); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; padding:0 5px; border:2px solid var(--cream); }

.content { padding:28px 34px 48px; }

/* ---------- briefing ---------- */
.briefing { background:var(--slate); color:var(--cream); border-radius:var(--radius-lg); padding:26px 30px; display:flex; align-items:center; gap:24px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.briefing .b-arc { position:absolute; right:-90px; top:-110px; width:280px; height:280px; border-radius:50%; border:3px solid var(--gold); opacity:0.2; }
.briefing img { width:78px; height:78px; border-radius:18px; flex-shrink:0; box-shadow:var(--shadow-md); position:relative; z-index:1; }
.briefing .b-text { position:relative; z-index:1; flex:1; }
.briefing .b-hi { font-family:var(--font-display); font-weight:600; font-size:24px; }
.briefing .b-sum { font-size:15px; color:rgba(251,246,237,0.82); margin-top:5px; line-height:1.5; max-width:46em; }
.briefing .b-sum b { color:var(--gold); font-weight:700; }
.b-stats { display:flex; gap:12px; position:relative; z-index:1; }
.b-stat { background:rgba(251,246,237,0.1); border-radius:var(--radius-md); padding:12px 16px; text-align:center; min-width:78px; }
.b-stat .num { font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1; color:var(--cream); }
.b-stat .lab { font-size:10.5px; color:rgba(251,246,237,0.74); margin-top:5px; }

/* ---------- widget grid ---------- */
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:18px; }
.w { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:20px 22px; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.w-4 { grid-column:span 4; } .w-5 { grid-column:span 5; } .w-3 { grid-column:span 3; }
.w-6 { grid-column:span 6; } .w-7 { grid-column:span 7; } .w-8 { grid-column:span 8; }
.w-head { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.w-ic { width:36px; height:36px; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--mc-soft); flex-shrink:0; }
.w-ic svg { width:19px; height:19px; }
.w-title { font-weight:700; font-size:16px; }
.w-link { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--mc); }
.w-foot { margin-top:auto; padding-top:14px; }

/* events */
.ev { display:flex; gap:12px; padding:9px 0; align-items:center; }
.ev + .ev { border-top:1px solid var(--slate-06); }
.ev .time { font-family:var(--font-mono); font-size:12px; color:var(--slate-55); width:46px; flex-shrink:0; }
.ev .bar { width:3px; align-self:stretch; border-radius:3px; }
.ev .et { font-size:14px; font-weight:600; }
.ev .ew { font-size:12px; color:var(--slate-55); }

/* shopping */
.prog { height:6px; background:var(--sand); border-radius:var(--radius-full); overflow:hidden; margin-bottom:14px; }
.prog i { display:block; height:100%; background:var(--mod-einkauf); border-radius:var(--radius-full); }
.sitem { display:flex; align-items:center; gap:11px; padding:7px 0; font-size:14px; cursor:pointer; }
.sitem .box { width:19px; height:19px; border-radius:5px; border:1.7px solid var(--control-border); flex-shrink:0; display:grid; place-items:center; transition:all var(--transition-fast); }
.sitem.done .box { background:var(--sage); border-color:var(--sage); }
.sitem.done .box::after { content:"✓"; color:#fff; font-size:11px; font-weight:800; }
.sitem.done .nm { color:var(--slate-40); text-decoration:line-through; }
.sitem .nm { flex:1; }
.sitem .pr { font-family:var(--font-mono); font-size:12px; color:var(--slate-55); }

/* expiring food */
.food { display:flex; align-items:center; gap:11px; padding:8px 0; }
.food + .food { border-top:1px solid var(--slate-06); }
.food .dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.food .fn { flex:1; font-size:14px; font-weight:600; }
.food .fd { font-family:var(--font-mono); font-size:11.5px; padding:2px 9px; border-radius:var(--radius-full); }
.fd.warn { background:rgba(200,92,36,0.13); color:var(--ember-d); }
.fd.soon { background:rgba(224,174,78,0.22); color:#7a5b1c; }
.fd.ok { background:rgba(123,175,138,0.2); color:#3c6b4d; }

/* meal */
.meal { display:flex; gap:14px; align-items:center; }
.meal .mimg { width:64px; height:64px; border-radius:var(--radius-md); background:repeating-linear-gradient(135deg,#efe7d8,#efe7d8 7px,#e7dccb 7px,#e7dccb 14px); display:grid; place-items:center; flex-shrink:0; }
.meal .mimg svg { width:26px; height:26px; color:var(--mod-ernaehrung); }
.meal .mt { font-family:var(--font-display); font-weight:600; font-size:19px; }
.meal .mm { font-size:12.5px; color:var(--slate-55); margin-top:3px; font-family:var(--font-mono); }
.meal-note { background:rgba(123,160,123,0.1); border-radius:var(--radius-md); padding:10px 13px; font-size:13px; color:var(--slate-70); margin-top:14px; }

/* finances */
.bars { display:flex; flex-direction:column; gap:11px; }
.brow { display:flex; align-items:center; gap:11px; font-size:13.5px; }
.brow .bl { width:96px; color:var(--slate-70); }
.btrack { flex:1; height:9px; background:var(--sand); border-radius:var(--radius-full); overflow:hidden; }
.bfill { height:100%; border-radius:var(--radius-full); }
.brow .bv { font-family:var(--font-mono); font-size:12px; color:var(--slate-55); width:62px; text-align:right; }
.fin-foot { display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:14px; border-top:1px solid var(--slate-06); }
.fin-foot .ff-l { font-size:13px; color:var(--slate-55); }
.fin-foot .ff-v { font-family:var(--font-mono); font-weight:600; font-size:20px; color:var(--sage); }

/* tasks */
.task { display:flex; align-items:center; gap:11px; padding:8px 0; }
.task + .task { border-top:1px solid var(--slate-06); }
.task .ava { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; flex-shrink:0; }
.task .tn { flex:1; font-size:13.5px; }
.task .tn b { font-weight:700; }
.task.is-done .tn { color:var(--slate-40); text-decoration:line-through; }
.task .tcheck { font-size:13px; color:var(--sage); font-weight:800; }

/* small reminder card */
.rem { display:flex; align-items:center; gap:12px; }
.rem .ri { width:40px; height:40px; border-radius:var(--radius-md); display:grid; place-items:center; flex-shrink:0; }
.rem .ri svg { width:20px; height:20px; }
.rem .rt { font-size:13.5px; font-weight:700; line-height:1.3; }
.rem .rs { font-size:12px; color:var(--slate-55); margin-top:2px; }

/* ============================================================
   BFSG / WCAG 1.4.10 — Reflow (Zoom 400% ≈ 320px), App-Shell
   Inhalte brechen ohne 2D-Scrollen um; alle Nav-Punkte erreichbar.
   ============================================================ */

/* ---- ≤960px: Sidebar wird zur horizontalen Topbar-Leiste ---- */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }

  .side {
    flex-direction: row; align-items: center; gap: 4px;
    height: auto; width: 100%; min-width: 0; padding: 10px 14px;
    overflow-x: auto; overflow-y: hidden;
    border-bottom: 1px solid rgba(251,246,237,0.12);
    scrollbar-width: thin;
  }
  .side-brand { padding: 0 12px 0 4px; flex-shrink: 0; }
  .side-brand .wm { font-size: 21px; }
  .side-brand img { width: 32px; height: 32px; }
  /* Abschnitts-Überschriften in der horizontalen Leiste ausblenden */
  .side-section { display: none; }
  .nav-item {
    flex-shrink: 0; padding: 9px 13px; white-space: nowrap; gap: 9px;
  }
  .nav-item.active::before { top: auto; bottom: -10px; left: 8px; right: 8px;
    width: auto; height: 3px; }
  .nav-item.soon { display: none; }   /* "Bald"-Module raus aus der Kompaktleiste */
  .side-user {
    margin-top: 0; margin-left: auto; flex-shrink: 0;
    border-top: none; border-left: 1px solid rgba(251,246,237,0.12);
    padding: 6px 4px 6px 14px; gap: 9px;
  }
  .side-user .who { display: none; }   /* nur Avatar + Zahnrad */
  .side-user .ava { width: 34px; height: 34px; }

  /* Widget-Grid: 12 → 6 Spalten, breite Karten füllen */
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .grid > * { min-width: 0; }
  .w-8, .w-7, .w-6 { grid-column: span 6; }
  .w-5, .w-4, .w-3 { grid-column: span 3; }
}

/* ---- ≤640px: alles einspaltig, Topbar bricht um ---- */
@media (max-width: 640px) {
  .topbar {
    flex-wrap: wrap; gap: 12px; padding: 16px 18px;
  }
  .topbar .greet { width: 100%; }
  .topbar .greet h1 { font-size: 22px; }
  .topbar .ask { margin-left: 0; order: 3; width: 100%; }
  .icon-btn { order: 2; }
  .tb-cta { order: 2; }

  .content { padding: 18px 18px 40px; }
  .briefing { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
  .briefing img { width: 60px; height: 60px; }
  .briefing .b-hi { font-size: 21px; }
  .b-stats { width: 100%; }
  .b-stat { flex: 1; min-width: 0; }

  /* Widget-Grid komplett stapeln */
  .grid { grid-template-columns: 1fr; }
  .w-8, .w-7, .w-6, .w-5, .w-4, .w-3 { grid-column: 1 / -1; }
}

/* sehr schmal: Marken-Wortmarke ausblenden, nur Icon */
@media (max-width: 380px) {
  .side-brand .wm { display: none; }
}