/* ============================================================
   havelo — Modul-Screens (Desktop)  ·  nutzt havelo-tokens.css + dashboard.css
   Gemeinsame Chrome + modul-spezifische Komponenten.
   ============================================================ */

/* anchors used as nav/brand/user in the shell */
.side-brand, .nav-item, .side-user { text-decoration: none; color: inherit; }
.nav-item { color: rgba(251, 246, 237, 0.72); }

/* tidy, truncating user block at bottom-left */
.side-user {
  margin-top: auto;
  border-top: none;
  background: rgba(251, 246, 237, 0.05);
  border-radius: var(--radius-lg);
  padding: 9px 11px;
  gap: 11px;
  align-items: center;
  transition: background var(--transition-fast);
}
.side-user:hover { background: rgba(251, 246, 237, 0.1); }
.side-user .ava { width: 34px; height: 34px; font-size: 14px; }
.side-user .who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.side-user .who .n,
.side-user .who .p { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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); }
.side-user .cog { width: 17px; height: 17px; color: rgba(251, 246, 237, 0.6); flex-shrink: 0; }
.side-user:hover .cog { color: rgba(251, 246, 237, 0.8); }

/* topbar CTA button (module add action) */
.tb-cta {
  display: flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 18px; border: none;
  border-radius: var(--radius-md); background: var(--ember); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-sm); transition: background var(--transition-fast);
}
.tb-cta:hover { background: var(--ember-d); }
.tb-cta svg { width: 17px; height: 17px; }

/* ---------- module header band ---------- */
.mod-hero {
  --mc: var(--slate);
  background: var(--mc);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  display: flex; align-items: center; gap: 20px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mod-hero .mh-arc {
  position: absolute; right: -70px; top: -90px;
  width: 230px; height: 230px; border-radius: 50%;
  border: 3px solid rgba(251, 246, 237, 0.35); opacity: 0.4;
}
.mod-hero .mh-ic {
  width: 58px; height: 58px; border-radius: 16px;
  background: rgba(251, 246, 237, 0.16);
  display: grid; place-items: center; flex-shrink: 0; position: relative; z-index: 1;
}
.mod-hero .mh-ic svg { width: 28px; height: 28px; color: var(--cream); }
.mod-hero .mh-txt { position: relative; z-index: 1; }
.mod-hero .mh-no {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(251, 246, 237, 0.6);
}
.mod-hero .mh-title { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.1; margin-top: 2px; }
.mod-hero .mh-sub {
  margin-left: auto; text-align: right; max-width: 22em;
  font-size: 14px; color: rgba(251, 246, 237, 0.78); position: relative; z-index: 1; line-height: 1.45;
}

/* ---------- toolbar (tabs / filters / view) ---------- */
.toolbar { display: flex; align-items: center; gap: 14px; margin: 22px 0 6px; flex-wrap: wrap; }
.toolbar > div { flex-shrink: 0; white-space: nowrap; }
.toolbar .spacer { margin-left: auto; }

.seg { display: inline-flex; background: #fff; border: 1.5px solid var(--slate-12); border-radius: var(--radius-md); padding: 3px; box-shadow: var(--shadow-sm); }
.seg button {
  border: none; background: transparent; font-family: inherit; font-weight: 700; font-size: 13px;
  color: var(--slate-55); padding: 7px 15px; border-radius: 6px; transition: all var(--transition-fast);
}
.seg button.on { background: var(--slate); color: var(--cream); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--slate-12); border-radius: var(--radius-xl);
  padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--slate-70);
  cursor: pointer; transition: all var(--transition-fast); white-space: nowrap;
}
.chip:hover { border-color: var(--slate-40); }
.chip.on { background: var(--slate); color: var(--cream); border-color: var(--slate); }
.chip .ct { width: 8px; height: 8px; border-radius: 50%; }
.chip .cn { font-family: var(--font-mono); font-size: 11px; opacity: 0.7; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px;
  background: #fff; border: 1.5px solid var(--slate-12); border-radius: var(--radius-md);
  font-family: inherit; font-weight: 700; font-size: 13.5px; color: var(--slate-70);
  cursor: pointer; transition: all var(--transition-fast);
}
.btn-ghost:hover { border-color: var(--slate-40); }
.btn-ghost svg { width: 16px; height: 16px; }

.search-mini {
  display: flex; align-items: center; gap: 9px; background: #fff;
  border: 1.5px solid var(--slate-12); border-radius: var(--radius-md);
  padding: 0 14px; height: 40px; width: 250px; box-shadow: var(--shadow-sm);
}
.search-mini svg { width: 16px; height: 16px; color: var(--slate-40); }
.search-mini input { border: none; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--slate); width: 100%; }

/* ---------- generic layout helpers ---------- */
.page { padding: 28px 34px 56px; }
.row { display: grid; gap: 18px; margin-top: 18px; }
.row.c-2 { grid-template-columns: 2fr 1fr; }
.row.c-2eq { grid-template-columns: 1fr 1fr; }
.row.c-3 { grid-template-columns: repeat(3, 1fr); }
.row.c-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 22px 24px; display: flex; flex-direction: column;
}
.card.pad-0 { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.card-head .ch-t { font-weight: 700; font-size: 16px; }
.card-head .ch-link { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--slate-55); cursor: pointer; }
.card-sub { font-size: 12.5px; color: var(--slate-55); margin-top: -10px; margin-bottom: 14px; }

/* stat tiles */
.stat-tile { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 18px 20px; }
.stat-tile .st-lab { font-size: 12px; color: var(--slate-55); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.stat-tile .st-lab .dot { width: 9px; height: 9px; border-radius: 50%; }
.stat-tile .st-num { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.1; margin-top: 8px; }
.stat-tile .st-num small { font-size: 16px; font-weight: 600; color: var(--slate-40); }
.stat-tile .st-meta { font-size: 12px; color: var(--slate-55); margin-top: 3px; font-family: var(--font-mono); }

.mono { font-family: var(--font-mono); }
.muted { color: var(--slate-55); }
.pill {
  display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: var(--radius-full);
}
.pill.warn { background: rgba(200,92,36,0.13); color: var(--ember-text); }
.pill.soon { background: rgba(224,174,78,0.22); color: #7a5b1c; }
.pill.ok   { background: rgba(123,175,138,0.2); color: #3c6b4d; }
.pill.neutral { background: var(--slate-06); color: var(--slate-55); }

/* avatars */
.av { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; flex-shrink: 0; }
.av.s { width: 26px; height: 26px; font-size: 11px; }
.av.m { width: 38px; height: 38px; font-size: 14px; }
.av.l { width: 48px; height: 48px; font-size: 17px; }

/* ============================================================
   HAUSHALT
   ============================================================ */
.member-row { display: flex; align-items: center; gap: 14px; padding: 16px 4px; }
.member-row + .member-row { border-top: 1px solid var(--slate-06); }
.member-row .m-name { font-weight: 700; font-size: 15.5px; }
.member-row .m-role { font-size: 12.5px; color: var(--slate-55); }
.member-row .m-tags { display: flex; gap: 7px; margin-left: auto; align-items: center; }
.tag-soft { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-full); background: var(--slate-06); color: var(--slate-70); }
.tag-soft.diet { background: rgba(123,175,138,0.2); color: #3c6b4d; }
.tag-soft.allergy { background: rgba(200,92,36,0.13); color: var(--ember-text); }
.tag-soft.admin { background: rgba(90,140,140,0.16); color: #3c6b6b; }
.access-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 0; }
.access-grid .ag-h, .access-grid .ag-c { padding: 11px 8px; border-bottom: 1px solid var(--slate-06); display: flex; align-items: center; }
.access-grid .ag-h { font-size: 11.5px; font-weight: 700; color: var(--slate-55); text-transform: uppercase; letter-spacing: 0.04em; gap: 8px; }
.access-grid .ag-row-label { font-weight: 600; font-size: 13.5px; }
.access-grid .ag-c { justify-content: center; }
.dotmark { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.dotmark.yes { background: var(--sage); }
.dotmark.yes::after { content: "✓"; color: #fff; font-size: 10px; font-weight: 800; }
.dotmark.no { border: 1.6px solid var(--slate-12); }

/* ============================================================
   LEBENSMITTEL
   ============================================================ */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.inv-card { background: #fff; border-radius: var(--radius-md); border: 1.5px solid var(--slate-06); padding: 14px; position: relative; transition: all var(--transition-fast); cursor: pointer; }
.inv-card:hover { box-shadow: var(--shadow-md); border-color: var(--slate-12); }
.inv-card .ic-img { height: 88px; border-radius: var(--radius-sm); margin-bottom: 11px; display: grid; place-items: center; background: repeating-linear-gradient(135deg,#efe7d8,#efe7d8 7px,#e7dccb 7px,#e7dccb 14px); }
.inv-card .ic-img svg { width: 30px; height: 30px; color: var(--mod-lebensmittel); opacity: 0.7; }
.inv-card .ic-name { font-weight: 700; font-size: 14px; }
.inv-card .ic-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--slate-55); margin-top: 3px; }
.inv-card .ic-loc { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11.5px; color: var(--slate-55); }
.inv-card .ic-loc .lc-dot { width: 7px; height: 7px; border-radius: 2px; }
.inv-card .ic-badge { position: absolute; top: 10px; right: 10px; }
.loc-list { display: flex; flex-direction: column; gap: 2px; }
.loc-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast); }
.loc-item:hover { background: var(--slate-06); }
.loc-item.on { background: var(--slate); color: var(--cream); }
.loc-item .li-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--slate-06); flex-shrink: 0; }
.loc-item.on .li-ic { background: rgba(251,246,237,0.15); }
.loc-item .li-ic svg { width: 16px; height: 16px; }
.loc-item .li-name { font-weight: 600; font-size: 14px; flex: 1; }
.loc-item .li-count { font-family: var(--font-mono); font-size: 12px; opacity: 0.7; }

/* ============================================================
   ESSENSPLANER  (Wochenplan)
   ============================================================ */
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.day-col { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.day-col .dc-head { padding: 10px 12px; border-bottom: 1px solid var(--slate-06); }
.day-col.today .dc-head { background: rgba(123,160,123,0.14); }
.day-col .dc-day { font-weight: 800; font-size: 13px; }
.day-col .dc-date { font-family: var(--font-mono); font-size: 11px; color: var(--slate-55); }
.day-col .dc-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.meal-card { border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid var(--slate-06); }
.meal-card .mc-img { height: 56px; background: repeating-linear-gradient(135deg,#efe7d8,#efe7d8 6px,#e7dccb 6px,#e7dccb 12px); display: grid; place-items: center; }
.meal-card .mc-img svg { width: 20px; height: 20px; color: var(--mod-ernaehrung); opacity: 0.75; }
.meal-card .mc-b { padding: 8px 9px; }
.meal-card .mc-type { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-40); }
.meal-card .mc-name { font-weight: 700; font-size: 12.5px; line-height: 1.25; margin-top: 2px; }
.meal-empty { border: 1.5px dashed var(--slate-12); border-radius: var(--radius-sm); min-height: 52px; display: grid; place-items: center; color: var(--slate-40); font-size: 20px; cursor: pointer; }
.meal-empty:hover { border-color: var(--mod-ernaehrung); color: var(--mod-ernaehrung); }

/* ============================================================
   EINKAUF
   ============================================================ */
.shop-sec { margin-bottom: 6px; }
.shop-sec .ss-head { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate-55); padding: 14px 4px 8px; }
.shop-sec .ss-head .ss-bar { width: 4px; height: 14px; border-radius: 2px; }
.shop-line { display: flex; align-items: center; gap: 13px; padding: 11px 6px; cursor: pointer; }
.shop-line + .shop-line { border-top: 1px solid var(--slate-06); }
.shop-line .box { width: 21px; height: 21px; border-radius: 6px; border: 1.8px solid var(--slate-40); flex-shrink: 0; display: grid; place-items: center; transition: all var(--transition-fast); }
.shop-line.done .box { background: var(--sage); border-color: var(--sage); }
.shop-line.done .box::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 800; }
.shop-line .sl-name { flex: 1; font-size: 14.5px; font-weight: 600; }
.shop-line .sl-qty { font-family: var(--font-mono); font-size: 12px; color: var(--slate-55); }
.shop-line .sl-price { font-family: var(--font-mono); font-size: 13px; color: var(--slate-70); width: 56px; text-align: right; }
.shop-line.done .sl-name { color: var(--slate-40); text-decoration: line-through; }
.shop-line .src { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); background: var(--slate-06); color: var(--slate-55); }

/* ============================================================
   FINANZEN  (Haushaltsbuch)
   ============================================================ */
.txn { display: flex; align-items: center; gap: 14px; padding: 13px 4px; }
.txn + .txn { border-top: 1px solid var(--slate-06); }
.txn .tx-ic { width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; }
.txn .tx-ic svg { width: 18px; height: 18px; }
.txn .tx-name { font-weight: 700; font-size: 14px; }
.txn .tx-meta { font-size: 12px; color: var(--slate-55); font-family: var(--font-mono); }
.txn .tx-amount { margin-left: auto; font-family: var(--font-mono); font-weight: 600; font-size: 15px; }
.txn .tx-amount.neg { color: var(--slate); }
.txn .tx-amount.pos { color: var(--sage); }
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut { width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0; position: relative; }
.donut::after { content: ""; position: absolute; inset: 26px; background: #fff; border-radius: 50%; }
.donut .dn-c { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; }
.donut .dn-c .dn-v { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; }
.donut .dn-c .dn-l { font-size: 11px; color: var(--slate-55); margin-top: 3px; }
.legend { display: flex; flex-direction: column; gap: 11px; flex: 1; }
.legend .lg { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.legend .lg .lg-d { width: 11px; height: 11px; border-radius: 3px; }
.legend .lg .lg-n { flex: 1; color: var(--slate-70); }
.legend .lg .lg-v { font-family: var(--font-mono); font-size: 12.5px; color: var(--slate-55); }

/* ============================================================
   KALENDER
   ============================================================ */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--slate-06); border-top: 1px solid var(--slate-06); border-radius: var(--radius-md); overflow: hidden; }
.cal .cal-h { padding: 10px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-55); border-right: 1px solid var(--slate-06); border-bottom: 1px solid var(--slate-06); background: var(--slate-06); text-align: center; }
.cal .cell { min-height: 116px; min-width: 0; padding: 8px; border-right: 1px solid var(--slate-06); border-bottom: 1px solid var(--slate-06); display: flex; flex-direction: column; gap: 5px; background: #fff; }
.cal .cell.out { background: #faf7f1; }
.cal .cell .cn { font-family: var(--font-mono); font-size: 12px; color: var(--slate-55); font-weight: 500; }
.cal .cell.today .cn { background: var(--ember); color: #fff; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; }
.cal .cell.out .cn { color: var(--slate-40); }
.cev { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 5px; color: #fff; line-height: 1.3; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cev.soft { background: transparent; color: var(--slate-70); padding-left: 14px; position: relative; font-weight: 600; }
.cev.soft::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--mc, var(--slate-40)); }

/* ============================================================
   AUFGABEN  (Board)
   ============================================================ */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.col { background: rgba(11,40,62,0.03); border-radius: var(--radius-lg); padding: 14px; }
.col .col-h { display: flex; align-items: center; gap: 9px; padding: 4px 6px 12px; font-weight: 800; font-size: 13.5px; }
.col .col-h .cc { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--slate-55); background: #fff; border-radius: var(--radius-full); padding: 2px 9px; margin-left: auto; }
.tcard { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 14px; margin-bottom: 11px; border-left: 3px solid var(--mc, var(--slate-12)); }
.tcard .tc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.tcard .tc-cat { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-55); }
.tcard .tc-rec { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--slate-40); }
.tcard .tc-rec svg { width: 12px; height: 12px; }
.tcard .tc-name { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.tcard .tc-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tcard .tc-foot .tc-due { font-family: var(--font-mono); font-size: 11px; color: var(--slate-55); margin-left: auto; }
.tcard.done { opacity: 0.6; }
.tcard.done .tc-name { text-decoration: line-through; color: var(--slate-40); }

/* score row */
.score { display: flex; align-items: center; gap: 14px; padding: 13px 4px; }
.score + .score { border-top: 1px solid var(--slate-06); }
.score .sc-name { font-weight: 700; font-size: 14px; flex: 1; }
.score .sc-bar { width: 130px; height: 8px; background: var(--sand); border-radius: var(--radius-full); overflow: hidden; }
.score .sc-fill { height: 100%; border-radius: var(--radius-full); }
.score .sc-v { font-family: var(--font-mono); font-size: 13px; font-weight: 600; width: 38px; text-align: right; }

/* ============================================================
   BALD-Screens (Dokumente / Steuer)
   ============================================================ */
.soon-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 20px; }
.soon-hero .sh-ic { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; margin-bottom: 22px; box-shadow: var(--shadow-md); }
.soon-hero .sh-ic svg { width: 40px; height: 40px; color: #fff; }
.soon-hero .sh-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-40); }
.soon-hero h2 { font-family: var(--font-display); font-weight: 600; font-size: 34px; margin: 8px 0 14px; }
.soon-hero p { max-width: 40em; font-size: 16px; color: var(--slate-70); line-height: 1.6; }
.soon-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 760px; margin: 34px auto 0; width: 100%; }
.soon-feat { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px; text-align: left; }
.soon-feat .sf-ic { width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: 12px; }
.soon-feat .sf-ic svg { width: 18px; height: 18px; }
.soon-feat h4 { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.soon-feat p { font-size: 13px; color: var(--slate-55); line-height: 1.5; max-width: none; }
.soon-cta { margin-top: 30px; display: flex; align-items: center; gap: 12px; }

/* ============================================================
   HAUSTIERE  (Familienverwaltung)
   ============================================================ */
.av svg { width: 56%; height: 56%; }
.pet-row { display: flex; align-items: center; gap: 14px; padding: 15px 4px; }
.pet-row + .pet-row { border-top: 1px solid var(--slate-06); }
.pet-row .p-name { font-weight: 700; font-size: 15px; }
.pet-row .p-kind { font-size: 12.5px; color: var(--slate-55); }
.pet-row .p-tags { display: flex; gap: 7px; margin-left: auto; align-items: center; }
.pet-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-full); background: var(--slate-06); color: var(--slate-70); }
.pet-chip svg { width: 13px; height: 13px; }

/* ============================================================
   EINKAUFSORTE & LAUFWEGE
   ============================================================ */
.store-item { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast); }
.store-item:hover { background: var(--slate-06); }
.store-item.on { background: var(--slate); color: var(--cream); }
.store-item .si-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--slate-06); }
.store-item.on .si-ic { background: rgba(251, 246, 237, 0.15); }
.store-item .si-ic svg { width: 20px; height: 20px; }
.store-item .si-tx { min-width: 0; flex: 1; }
.store-item .si-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-item .si-addr { font-size: 12px; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-item .si-meta { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.7; text-align: right; flex-shrink: 0; }

.route-step { display: flex; align-items: center; gap: 13px; background: #fff; border: 1.5px solid var(--slate-06); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; transition: box-shadow var(--transition-fast); }
.route-step:hover { box-shadow: var(--shadow-sm); }
.route-step .rs-grip { color: var(--slate-40); cursor: grab; flex-shrink: 0; display: grid; }
.route-step .rs-grip svg { width: 18px; height: 18px; }
.route-step .rs-no { width: 26px; height: 26px; border-radius: 50%; background: var(--mod-einkauf); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 600; display: grid; place-items: center; flex-shrink: 0; }
.route-step .rs-body { flex: 1; min-width: 0; }
.route-step .rs-name { font-weight: 700; font-size: 14.5px; }
.route-step .rs-cats { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.route-step .rs-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.route-step .rs-count { font-family: var(--font-mono); font-size: 12px; color: var(--slate-55); }
.route-step .rs-del { color: var(--slate-40); cursor: pointer; display: grid; }
.route-step .rs-del:hover { color: var(--ember); }
.route-step .rs-del svg { width: 17px; height: 17px; }

.cat-dot-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); background: var(--slate-06); color: var(--slate-70); }
.cat-dot-chip .d { width: 7px; height: 7px; border-radius: 2px; }

.add-row { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--slate-12); border-radius: var(--radius-md); padding: 13px; color: var(--slate-55); font-weight: 700; font-size: 13.5px; cursor: pointer; background: none; width: 100%; font-family: inherit; transition: all var(--transition-fast); }
.add-row:hover { border-color: var(--mod-einkauf); color: var(--mod-einkauf); }
.add-row svg { width: 16px; height: 16px; }

.cat-tile { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
.cat-tile + .cat-tile { border-top: 1px solid var(--slate-06); }
.cat-tile .ct-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.cat-tile .ct-name { font-weight: 600; font-size: 13.5px; flex: 1; }
.cat-tile .ct-map { font-size: 12px; color: var(--slate-55); }

/* ============================================================
   BFSG / WCAG 2.1 AA — Bedienelemente (Modul-Screens)
   ============================================================ */
/* 1.4.11 — Rahmen interaktiver Elemente auf ≥3:1 */
.seg, .chip, .btn-ghost, .search-mini, .add-row, .meal-empty {
  border-color: var(--control-border);
}
.dotmark.no { border-color: var(--control-border); }
/* 1.4.1 — Text-Links nicht nur über Farbe: unterstrichen */
.ch-link { text-decoration: underline; text-underline-offset: 2px; }
.ch-link:hover { color: var(--mod-haushalt); }
/* 2.5.8 — komfortable Trefferflächen */
.ch-link { display: inline-flex; align-items: center; min-height: 24px; }

/* ============================================================
   BFSG / WCAG 1.4.10 — Reflow (Zoom 400% ≈ 320px), Modul-Inhalte
   ============================================================ */
@media (max-width: 960px) {
  .page { padding: 22px 22px 48px; }

  /* mehrspaltige Inhaltsreihen → zwei bzw. eine Spalte; min-width:0 gegen Überlauf.
     !important überschreibt feste Inline-Spalten (z. B. style="…:320px 1fr") */
  .row { grid-template-columns: minmax(0, 1fr) !important; }
  .row > * { min-width: 0; }
  .row.c-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .row.c-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Karten-Köpfe dürfen umbrechen, statt die Spalte aufzublähen */
  .card-head { flex-wrap: wrap; row-gap: 8px; }
  /* Flex-Zeilen mit mehreren Chips/Tags umbrechen lassen */
  .member-row, .pet-row, .legend, .fin-foot, .toolbar { flex-wrap: wrap; }
  .member-row .m-tags, .pet-row .p-tags { flex-wrap: wrap; }

  /* Modul-Hero: Untertitel unter den Titel */
  .mod-hero { gap: 16px; flex-wrap: wrap; padding: 22px 24px; }
  .mod-hero .mh-sub { margin-left: 0; text-align: left; max-width: none; width: 100%; }
  .mod-hero .mh-title { font-size: 24px; }

  /* Kanban-Board stapelt */
  .board { grid-template-columns: 1fr; }

  /* "Bald"-Feature-Raster */
  .soon-feats { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .page { padding: 16px 16px 40px; }
  .row.c-3, .row.c-4 { grid-template-columns: minmax(0, 1fr) !important; }

  /* Donut + Legende untereinander */
  .donut-wrap { flex-wrap: wrap; justify-content: center; }

  /* Wochenplaner: Tage untereinander statt 7 Spalten */
  .week-grid { grid-template-columns: 1fr; }

  /* Inventar-Kacheln kleiner */
  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 11px; }

  /* Monatskalender bleibt 7-spaltig (2D-Daten) — kompakter */
  .cal .cell { min-height: 78px; padding: 5px; }
  .cev { font-size: 10px; padding: 2px 5px; }

  .soon-hero { padding: 48px 14px; }
  .soon-hero h2 { font-size: 26px; }
}

/* Rechte-Matrix ist eine Datentabelle → kontrolliertes Ein-Richtungs-Scrollen
   (WCAG 1.4.10 erlaubt 2D-Inhalt; das Dokument selbst scrollt nicht horizontal) */
@media (max-width: 720px) {
  .card:has(> .access-grid) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .access-grid { min-width: 460px; }
}