/* Dashboard: Gestaltung im Stil von iOS. Farben liegen in Variablen, ein Design
   wechselt nur diese Variablen (Auswahl in der Seitenleiste unter Einstellungen). */

@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --nav-w: 300px;
  /* Standard: Hell */
  --bg: #e2e2e9;
  --card: #ffffff;
  --text: #000000;
  --muted: #636366;
  --faint: #c7c7cc;
  --tint: #007aff;
  --note: #ff9500;
  --shop: #34c759;
  --task: #5856d6;
  --on-accent: #ffffff;
  --danger: #ff3b30;
  --sep: color-mix(in srgb, var(--text) 20%, transparent);
  --fill: color-mix(in srgb, var(--text) 7%, transparent);
}
html[data-theme='dunkel'] {
  color-scheme: dark;
  --bg: #000000; --card: #232326; --text: #ffffff; --muted: #a1a1a6; --faint: #48484a;
  --tint: #0a84ff; --note: #ff9f0a; --shop: #30d158; --task: #5e5ce6; --danger: #ff453a;
  --fill: color-mix(in srgb, var(--text) 12%, transparent);
}
/* Farbige Designs aus der ersten Runde */
html[data-theme='herbst'] {
  color-scheme: dark;
  --bg: #100d09; --card: #2a2218; --text: #f7f1e8; --muted: #bba88f; --faint: #5a4e3f;
  --note: #ff8c42; --shop: #4caf7d; --task: #9b6bce; --tint: #ff8c42; --on-accent: #14110d; --danger: #ff6b5b;
}
html[data-theme='tropisch'] {
  color-scheme: dark;
  --bg: #081111; --card: #1c3333; --text: #effaf7; --muted: #98bdb5; --faint: #3f5a56;
  --note: #ff7a59; --shop: #8bd450; --task: #b57edc; --tint: #ff7a59; --on-accent: #0c1515; --danger: #ff6b5b;
}
html[data-theme='sonnenuntergang'] {
  color-scheme: dark;
  --bg: #10091a; --card: #33213a; --text: #f8f2f9; --muted: #bba3c2; --faint: #4c3c50;
  --note: #f2994a; --shop: #2ec4b6; --task: #b676d6; --tint: #f2994a; --on-accent: #150d17; --danger: #ff6b5b;
}
html[data-theme='elektrisch'] {
  color-scheme: dark;
  --bg: #080a0e; --card: #1d222c; --text: #f5f7fa; --muted: #9ba5b9; --faint: #4a5264;
  --note: #4d8cff; --shop: #4d8cff; --task: #4d8cff; --tint: #4d8cff; --on-accent: #0b0d12; --danger: #ff6b5b;
}
html[data-theme='sand'] {
  --bg: #e8dfce; --card: #fffdf8; --text: #1f1a12; --muted: #66594a; --faint: #b9ad98;
  --note: #e8590c; --shop: #2b9468; --task: #7c4dcc; --tint: #e8590c; --on-accent: #ffffff; --danger: #d93a2b;
}
html[data-theme='frisch'] {
  --bg: #d5e8e0; --card: #ffffff; --text: #0d2822; --muted: #496760; --faint: #a9c2ba;
  --note: #f2683c; --shop: #14a06f; --task: #5b6cf0; --tint: #14a06f; --on-accent: #ffffff; --danger: #d93a2b;
}
html[data-theme='sorbet'] {
  --bg: #f9e3d1; --card: #ffffff; --text: #25172d; --muted: #6e5a78; --faint: #cdb9d3;
  --note: #ff4f87; --shop: #12a67a; --task: #8b5cf6; --tint: #ff4f87; --on-accent: #ffffff; --danger: #d93a2b;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: var(--font); font-size: 17px; line-height: 1.35; min-height: 100vh;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

.mod-note { --accent: var(--note); }
.mod-shop { --accent: var(--shop); }
.mod-task { --accent: var(--task); }

/* Seitengerüst */
.page { min-height: 100vh; }
.app { max-width: 640px; margin: 0 auto; padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }

/* Obere Leiste, bleibt beim Scrollen stehen */
.top {
  position: sticky; top: 0; z-index: 15; margin: 0 -16px;
  height: calc(48px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0;
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid transparent; transition: border-color 0.2s;
}
.scrolled .top { border-bottom-color: var(--sep); }
.top-title { font-weight: 600; font-size: 17px; opacity: 0; transition: opacity 0.2s; }
.scrolled .top-title { opacity: 1; }
.bar-btn {
  width: 44px; height: 44px; border: 0; background: none; color: var(--tint);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.bar-btn svg { width: 24px; height: 24px; }
.bar-btn.avatar { width: 32px; height: 32px; margin: 0 6px; border-radius: 50%; background: var(--fill); color: var(--text); font-weight: 600; font-size: 15px; }

/* Großer Titel */
.large-title { padding: 2px 4px 16px; }
.large-title .sub { font-size: 14px; color: var(--muted); }
.large-title h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.1; }

/* Gruppen wie in den iOS-Einstellungen */
.sec { margin-bottom: 24px; }
.sec-title { margin: 0 0 7px 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--tint); }
.group { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--sep), 0 6px 14px -10px rgba(0, 0, 0, 0.35); }
.group > * { position: relative; }
.group > * + *::before {
  content: ''; position: absolute; top: 0; left: var(--inset, 16px); right: 0; height: 0.5px; background: var(--sep);
}
.li {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 9px 16px;
  background: none; border: 0; text-align: left; color: inherit; font-size: 17px;
}
.li.lead { --inset: 52px; }
.li.link:active { background: var(--fill); }
.li .text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.li .val { margin-left: auto; color: var(--muted); }
.li .chev-i { width: 14px; height: 14px; color: var(--faint); flex-shrink: 0; }
.li.empty { color: var(--muted); font-size: 15px; }
.li.danger { color: var(--danger); }
.li.form > input, .li.form > select { flex: 1; min-width: 0; }
.pad { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; --inset: 0px; }
.meta { font-size: 13px; color: var(--muted); }
.done .text { text-decoration: line-through; color: var(--muted); }
.ico {
  width: 30px; height: 30px; border-radius: 8px; background: var(--accent, var(--tint)); color: #fff; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ico svg { width: 18px; height: 18px; }

/* Eingaben */
textarea, input[type='text'], input[type='email'], input[type='password'], input[type='date'], select {
  width: 100%; background: var(--fill); border: 0; border-radius: 10px; padding: 11px 12px; font-size: 17px; color: var(--text);
}
select { appearance: none; -webkit-appearance: none; }
.group textarea { background: none; border-radius: 0; padding: 14px 16px; min-height: 96px; resize: none; display: block; }
.group textarea:focus { outline: none; }
input:focus, select:focus { outline: 2px solid var(--tint); outline-offset: 0; }
::placeholder { color: var(--muted); opacity: 1; }
.row { display: flex; gap: 8px; align-items: center; }
.row > input, .row > select { flex: 1; min-width: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; font-weight: 600; font-size: 16px;
  background: color-mix(in srgb, var(--tint) 13%, transparent); color: var(--tint);
}
.btn.primary { background: var(--tint); color: var(--on-accent); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 15px; border-radius: 10px; }
.btn.plain { background: none; }
.btn:disabled { opacity: 0.5; cursor: default; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; flex-shrink: 0;
  background: var(--fill); color: var(--tint); display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.rec { background: var(--danger); color: #fff; animation: pulse 1.1s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 50%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.tools { justify-content: space-between; }
.dest { display: flex; gap: 8px; flex: 1; }
.dest .btn { flex: 1; min-width: 0; padding: 0 6px; }

/* Umschalter */
.seg { display: flex; background: var(--fill); border-radius: 9px; padding: 2px; margin-bottom: 20px; }
.seg button { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 0; background: none; border-radius: 7px; padding: 7px 2px; font-size: 13px; font-weight: 600; color: var(--text); }
.seg button.on { background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }

/* Listenzeilen */
.check-btn {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--faint); background: none; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.check-btn svg { width: 14px; height: 14px; opacity: 0; }
.check-btn.on { background: var(--tint); border-color: var(--tint); }
.check-btn.on svg { opacity: 1; }
.x-btn { background: none; border: 0; color: var(--faint); font-size: 24px; line-height: 1; padding: 6px 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chip { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--fill); color: var(--muted); white-space: nowrap; border: 0; }
.chip.late { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-actions { display: flex; gap: 14px; margin-top: 6px; }
.note-actions button { background: none; border: 0; padding: 4px 0; color: var(--tint); font-size: 15px; font-weight: 500; }

/* Untere Leiste (nur Handy) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--sep); padding: 6px 4px calc(4px + env(safe-area-inset-bottom));
}
.tabbar .inner { max-width: 640px; margin: 0 auto; display: flex; }
.tabbar button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; color: var(--muted); font-size: 11px; font-weight: 500; padding: 4px 0; min-height: 48px;
}
.tabbar button svg { width: 25px; height: 25px; }
.tabbar button.on { color: var(--tint); }

/* Seitenleiste */
.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(88vw, var(--nav-w)); z-index: 50;
  background: var(--bg); border-right: 0.5px solid var(--sep);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(18px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-104%); visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.28s;
}
.nav-open .drawer { transform: none; visibility: visible; transition-delay: 0s; box-shadow: 20px 0 50px -20px rgba(0, 0, 0, 0.35); }
.scrim { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.nav-open .scrim { opacity: 1; pointer-events: auto; }

.brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 18px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; color: #fff; flex-shrink: 0; background: var(--tint); display: inline-flex; align-items: center; justify-content: center; }
.brand-mark svg { width: 19px; height: 19px; }
.brand b { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.brand .close { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fill); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.brand .close svg { width: 18px; height: 18px; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 7px 10px;
  background: none; border: 0; border-radius: 10px; color: var(--text); font-weight: 500; font-size: 17px; text-align: left;
}
.nav-row svg.i { width: 22px; height: 22px; flex-shrink: 0; color: var(--tint); }
.nav-row:hover { background: var(--fill); }
.nav-row.on { background: color-mix(in srgb, var(--tint) 14%, transparent); color: var(--tint); }
.nav-row .chev { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform 0.2s; }
.nav-group.open > .nav-row .chev { transform: rotate(90deg); }
.nav-row .tag { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--fill); border-radius: 999px; padding: 1px 8px; }
.nav-row[disabled] { color: var(--muted); cursor: default; }
.nav-row[disabled]:hover { background: none; }
.nav-row.danger, .nav-row.danger svg.i { color: var(--danger); }
.nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; }
.nav-group.open > .nav-sub { grid-template-rows: 1fr; }
.nav-sub > div { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s 0.22s; padding-left: 22px; }
.nav-group.open > .nav-sub > div { visibility: visible; transition-delay: 0s; }
.nav-sub .nav-row { font-size: 16px; min-height: 40px; }
.nav-sub .nav-sub > div { padding-left: 16px; }
.nav-sub .nav-row svg.i { width: 20px; height: 20px; }
.swatch { display: inline-flex; gap: 3px; }
.swatch i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.nav-row .active-mark { margin-left: auto; font-size: 14px; color: var(--muted); }

.nav-foot { display: flex; align-items: center; gap: 11px; padding: 14px 8px 0; margin-top: 12px; border-top: 0.5px solid var(--sep); }
.nav-foot .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--fill); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.nav-foot b { display: block; font-size: 15px; font-weight: 600; }
.nav-foot div span { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60;
  background: color-mix(in srgb, var(--text) 88%, transparent); color: var(--bg); padding: 11px 18px; border-radius: 14px;
  font-size: 15px; font-weight: 500; max-width: 90%; text-align: center;
}

/* Was esse ich heute? */
.q { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice { min-height: 54px; }
.dish h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.dish-ing { font-size: 15px; opacity: 0.85; }
.dish .row .btn { flex: 1; }

/* Breiter Bildschirm: Seitenleiste bleibt offen, untere Leiste entfällt */
@media (min-width: 960px) {
  .drawer { transform: none; visibility: visible; transition: none; box-shadow: none; width: var(--nav-w); }
  .scrim { display: none; }
  .page { margin-left: var(--nav-w); }
  .tabbar, .top, .brand .close { display: none; }
  .app { max-width: 720px; padding-top: 36px; padding-bottom: 60px; }
  .toast { bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .scrim, .nav-sub, .chev, .top, .top-title { transition: none !important; }
  .icon-btn.rec { animation: none; }
}

/* Anmeldeseiten */
.card { background: var(--card); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.auth-card label { font-size: 14px; color: var(--muted); display: block; margin-bottom: 4px; }
.auth-card .field { display: flex; flex-direction: column; }
.auth-card .err { color: var(--danger); font-size: 14px; min-height: 20px; }
.auth-card .ok { color: var(--shop); font-size: 14px; }
.auth-card a { color: var(--tint); font-size: 15px; }


/* Einkauf */
.addbar { gap: 10px; padding: 8px 12px; }
.icon-btn.plus { background: var(--tint); color: var(--on-accent); }
.promo {
  display: flex; align-items: center; gap: 12px; width: 100%; border: 0; text-align: left; padding: 18px 18px;
  border-radius: 22px; color: var(--on-accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--shop) 94%, var(--bg)), color-mix(in srgb, var(--shop) 55%, var(--task)));
}
.promo-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.promo-text b { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.promo-text span { font-size: 14.5px; opacity: 0.92; }
.promo-go { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--on-accent) 24%, transparent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.promo-go svg { width: 16px; height: 16px; }
.li { min-height: 46px; }

/* Seitenleiste: Zeile mit eigener Seite plus Pfeil */
.nav-split { display: flex; align-items: center; }
.nav-split .nav-row { flex: 1; min-width: 0; }
.nav-toggle { width: 42px; height: 44px; border: 0; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; }
.nav-toggle:hover { background: var(--fill); }
.nav-toggle .chev { width: 16px; height: 16px; transition: transform 0.2s; }
.nav-group.open > .nav-split .nav-toggle .chev { transform: rotate(90deg); }

/* Schnell hinzufügen */
.qlabel { font-size: 13px; color: var(--muted); font-weight: 500; }
.qchips { display: flex; flex-wrap: wrap; gap: 8px; }
.qchip { border: 0; border-radius: 999px; padding: 8px 14px; font-size: 15px; font-weight: 600; background: var(--fill); color: var(--text); }
.qchip.on { opacity: 0.4; }
.group-inner > * { position: relative; }
.group-inner > * + *::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--sep); }
.group-inner > .li { width: 100%; }

/* Wochenplan */
.plan-row { padding: 0 8px 0 0; }
.plan-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; text-align: left; padding: 10px 0 10px 16px; font-size: 17px; }
.plan-day { width: 92px; flex-shrink: 0; font-weight: 600; display: flex; flex-direction: column; }
.plan-day small, .plan-dish small { font-size: 13px; font-weight: 400; color: var(--muted); }
.plan-day.today { color: var(--tint); }
.plan-dish { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.plan-dish.none { color: var(--muted); }
.foot-note { margin: -8px 16px 24px; font-size: 13px; color: var(--muted); }

/* Kalorien */
.mod-food { --accent: #ff375f; }
.kbig { font-size: 17px; color: var(--muted); }
.kbig b { font-size: 40px; font-weight: 700; letter-spacing: -1px; color: var(--text); }
.bar { height: 10px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--tint); }
.bar i.over, .cb-track i.over { background: var(--danger); }
.cols { display: flex; gap: 6px; align-items: flex-end; }
.colbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.cb-val { font-size: 11px; color: var(--muted); height: 14px; }
.cb-track { width: 100%; max-width: 34px; height: 84px; border-radius: 8px; background: var(--fill); position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.cb-track i { display: block; width: 100%; background: var(--tint); border-radius: 0 0 8px 8px; }
.cb-day { font-size: 12px; color: var(--muted); }

/* Finanzen, Termine, Geschenke */
.mod-fin { --accent: #30b0c7; }
input[type='number'], input[type='text'][inputmode='decimal'] { background: var(--fill); border: 0; border-radius: 10px; padding: 11px 12px; font-size: 17px; color: var(--text); width: 100%; }
.val.plus { color: #1f9d55; }
.kbig b.neg { color: var(--danger); }
.pad-x { padding: 12px 16px 0; }
.group > .qchips.pad-x { margin: 0; }
.month-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; }
.month-nav b { font-size: 17px; }
.catbar .text { display: flex; flex-direction: column; gap: 6px; }
.catbar.on { background: var(--fill); }
.bar.thin { height: 6px; }
.meta.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
select.mini { width: auto; max-width: 118px; font-size: 13px; padding: 6px 8px; }
.open-row .row { align-items: flex-start; }
.open-row .row .text { flex: 1; min-width: 0; }
.rem { display: flex; gap: 8px; align-items: center; }
.occ { gap: 18px; }
.occ label, .rem { font-size: 15px; }
.meta.dark { color: var(--text); font-size: 15px; }
.nowrap { white-space: nowrap; }
.li.form > .meta.nowrap { flex: 0 0 auto; }
.btn.plain.danger { color: var(--danger); }
.li.stack { align-items: flex-start; }
.li.stack .val { white-space: nowrap; padding-top: 2px; }
.li.stack select.mini { display: block; margin-top: 6px; max-width: 100%; }

/* Geschenkideen: Personennamen deutlich */
.sec-title.strong { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; margin-bottom: 8px; }
.check-row { cursor: pointer; }
.check-row input { width: 22px; height: 22px; accent-color: var(--tint); flex-shrink: 0; }

/* Rezepte */
.ing-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.steps { white-space: pre-wrap; line-height: 1.45; }
.mod-food .ico { background: #ff375f; }

/* Nachrichten */
.chip.hit { background: color-mix(in srgb, var(--tint) 16%, transparent); color: var(--tint); }
button.chip.hit { cursor: pointer; }
.news-title { color: var(--text); font-weight: 600; text-decoration: none; }
.clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta.err { color: var(--danger); }
.group > .chips.pad-x { padding-bottom: 8px; }

.news-actions { margin: 16px 0 10px; }
.news-actions .btn { width: 100%; }

/* Pflanzen */
.plant-img { width: 56px; height: 56px; object-fit: cover; border-radius: 18px 6px 18px 6px; flex: none; background: rgba(255, 255, 255, 0.1); display: inline-flex; align-items: center; justify-content: center; }
.plant-img.big { width: 84px; height: 84px; border-radius: 26px 8px 26px 8px; }
.plant-img.ph svg { width: 26px; height: 26px; }
.plant-large { width: 100%; max-height: 360px; object-fit: cover; border-radius: 22px 6px 22px 6px; }
.plant-head { gap: 12px; }
.care-row { display: flex; flex-direction: column; margin-bottom: 8px; }
.care-row strong { font-size: 13px; color: var(--tint); }
.num-field { display: flex; flex-direction: column; flex: 1; min-width: 90px; gap: 4px; }
.row.nums { gap: 8px; flex-wrap: wrap; }
.file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
label.btn { position: relative; cursor: pointer; }
.photo-prev { display: flex; }
.chip.bad { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); font-weight: 650; }
.star-pick { display: flex; gap: 4px; margin: 6px 0 10px; }
.star { border: 0; background: none; font-size: 30px; line-height: 1; color: var(--muted); padding: 2px 4px; }
.star.on { color: #f5a623; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.care-row span { font-size: 15px; line-height: 1.4; }
select { font: inherit; }
.plant-img.ph { background: var(--fill); color: var(--tint); }

/* Hamburg erkunden */
.explore-map { position: relative; height: 58vh; min-height: 360px; border-radius: 22px; overflow: hidden; margin-bottom: 12px; background: #14213a; z-index: 0; }
.explore-map.painting { cursor: crosshair; }
.fog-canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.leaflet-container { font: inherit; }
.leaflet-bar a, .leaflet-bar a:hover { background: #fff; color: #111; width: 34px; height: 34px; line-height: 34px; font-size: 20px; text-decoration: none; }
.leaflet-control-attribution { font-size: 10px; }

/* Neue Designs und Kachel-Bausteine für das Dashboard.
   Entwurf zur Übernahme in assets/app.css. Variablennamen passen zu den bestehenden Designs.
   Neue Variablen:
   --c-org, --c-fin, --c-life   Bereichsfarben Organisation, Finanzen, Persönlich
   --on-area                    Schrift auf farbigen Kacheln (Standard), --on-org/--on-fin/--on-life als Ausnahme je Bereich
   --top                        Farbe oben im Seitenverlauf
   --g2                         zweite Farbe im Verlauf der Hauptkachel
   --tab-bg                     Hintergrund der Tableiste
   --deco-start, --deco-start-size   Deko im Kopf der Startseite (Hintergrundbild, darf none sein)
   --deco-tab                   Deko an der Oberkante der Tableiste (nur Dschungel)
   color-mix() braucht iOS 16.2 oder neuer. */

/* Standardwerte, damit die bisherigen Designs ohne eigene Bereichsfarben weiter funktionieren */
:root {
  --c-org: var(--shop);
  --c-fin: var(--tint);
  --c-life: var(--task);
  --on-area: var(--on-accent);
  --top: var(--bg);
  --g2: var(--task);
  --tab-bg: var(--card);
  --deco-start: none;
  --deco-start-size: auto;
  --deco-tab: none;
}

/* Hell und Dunkel: bestehende Werte bleiben, nur Bereichsfarben ergänzen */
html:not([data-theme]), html[data-theme='hell'] { --c-org: #34c759; --c-fin: #007aff; --c-life: #30b0c7; --g2: #5856d6; --on-area: #ffffff; }
html[data-theme='dunkel'] { --c-org: #30d158; --c-fin: #0a84ff; --c-life: #40c8e0; --on-org: #00140a; --on-life: #00151a; --g2: #5e5ce6; --on-area: #ffffff; --tab-bg: rgba(28,28,30,.95); }


/* Lagune (hell) */
html[data-theme='lagune'] {
  color-scheme: light;
  --bg: #e4f3f1; --card: #ffffff; --text: #082a33; --muted: #4f6f76; --faint: #a9c9cb; --tint: #0a7fc0; --note: #ff8a00; --shop: #12a37a; --task: #1f6fe0; --on-accent: #ffffff; --danger: #e5484d;
  --top: #bfe8e3; --c-org: #12a37a; --c-fin: #1f6fe0; --c-life: #0b9ea8; --g2: #1f6fe0; --on-area: #ffffff; --tab-bg: rgba(255,255,255,.94);
  --deco-start: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 236 70%27%3E%3Cg fill=%27none%27 stroke=%27%230a7fc0%27 stroke-width=%271.6%27 opacity=%27.35%27%3E%3Cpath d=%27M60 16Q80 6 100 16T140 16T180 16T220 16T260 16%27/%3E%3Cpath d=%27M40 32Q62 22 84 32T128 32T172 32T216 32T260 32%27/%3E%3Cpath d=%27M90 48Q110 38 130 48T170 48T210 48T250 48%27/%3E%3C/g%3E%3C/svg%3E");
  --deco-start-size: 150px 46px;
}

/* Tiefsee (dunkel) */
html[data-theme='tiefsee'] {
  color-scheme: dark;
  --bg: #04151c; --card: #0e2832; --text: #e8f8f8; --muted: #8db3b8; --faint: #2c5260; --tint: #3ac7d8; --note: #ffb340; --shop: #2fc98a; --task: #3d8bff; --on-accent: #04151c; --danger: #ff6b6b;
  --top: #0b3440; --c-org: #2fc98a; --c-fin: #3d8bff; --c-life: #22c3c9; --g2: #2a4fd0; --on-area: #ffffff; --tab-bg: rgba(8,30,38,.94);
  --deco-start: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 236 70%27%3E%3Cg fill=%27none%27 stroke=%27%233ac7d8%27 stroke-width=%271.6%27 opacity=%27.35%27%3E%3Cpath d=%27M60 16Q80 6 100 16T140 16T180 16T220 16T260 16%27/%3E%3Cpath d=%27M40 32Q62 22 84 32T128 32T172 32T216 32T260 32%27/%3E%3Cpath d=%27M90 48Q110 38 130 48T170 48T210 48T250 48%27/%3E%3C/g%3E%3Cg fill=%27none%27 stroke=%27%233ac7d8%27 stroke-width=%271.2%27 opacity=%27.5%27%3E%3Ccircle cx=%27200%27 cy=%2714%27 r=%275%27/%3E%3Ccircle cx=%27214%27 cy=%2734%27 r=%273%27/%3E%3Ccircle cx=%27190%27 cy=%2742%27 r=%272.5%27/%3E%3C/g%3E%3C/svg%3E");
  --deco-start-size: 150px 46px;
}

/* Gewächshaus (hell) */
html[data-theme='gewaechshaus'] {
  color-scheme: light;
  --bg: #e9f0df; --card: #fbfdf6; --text: #17301c; --muted: #5c7260; --faint: #bccfb0; --tint: #2f8a3e; --note: #d98a1c; --shop: #3d8f34; --task: #2a7d84; --on-accent: #ffffff; --danger: #c8463b;
  --top: #d3e4c2; --c-org: #3d8f34; --c-fin: #2a7d84; --c-life: #6f9a1f; --g2: #1f6b52; --on-area: #ffffff; --tab-bg: rgba(251,253,246,.94);
  --deco-start: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 150%27%3E%3Cg fill=%27none%27 stroke=%27%23355f2c%27 stroke-linecap=%27round%27%3E%3Cpath stroke-width=%272.2%27 d=%27M94 0C78 16 92 34 80 52C68 70 86 88 74 106C66 120 76 134 70 150%27/%3E%3Cpath stroke-width=%271.1%27 d=%27M80 52C70 50 66 58 72 62C76 64 79 60 75 58M74 106C84 104 88 112 82 116C78 118 75 114 79 112%27/%3E%3C/g%3E%3Cpath fill=%27%234e8d36%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(88 12) rotate(165) scale(1)%27/%3E%3Cpath fill=%27%2386b94c%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(86 26) rotate(20) scale(0.8)%27/%3E%3Cpath fill=%27%234e8d36%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(83 44) rotate(195) scale(1)%27/%3E%3Cpath fill=%27%234e8d36%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(80 66) rotate(15) scale(0.9)%27/%3E%3Cpath fill=%27%2386b94c%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(79 84) rotate(170) scale(0.85)%27/%3E%3Cpath fill=%27%234e8d36%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(76 98) rotate(30) scale(0.75)%27/%3E%3Cpath fill=%27%234e8d36%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(72 124) rotate(185) scale(0.7)%27/%3E%3Cpath fill=%27%2386b94c%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(72 140) rotate(20) scale(0.6)%27/%3E%3C/svg%3E");
  --deco-start-size: 96px 150px;
}

/* Dschungel (dunkel) */
html[data-theme='dschungel'] {
  color-scheme: dark;
  --bg: #0c2219; --card: #173a2a; --text: #effbe6; --muted: #9dbfa6; --faint: #3a6a50; --tint: #b6e35a; --note: #ffc04d; --shop: #7ed957; --task: #4fd1c5; --on-accent: #0c2219; --danger: #ff7a6b;
  --top: #174a33; --c-org: #7ed957; --c-fin: #4fd1c5; --c-life: #b6e35a; --g2: #2e9a5a; --on-area: #0c2219; --tab-bg: rgba(16,44,31,.95);
  --deco-start: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 96 150%27%3E%3Cg fill=%27none%27 stroke=%27%233f8f4f%27 stroke-linecap=%27round%27%3E%3Cpath stroke-width=%272.2%27 d=%27M94 0C78 16 92 34 80 52C68 70 86 88 74 106C66 120 76 134 70 150%27/%3E%3Cpath stroke-width=%271.1%27 d=%27M80 52C70 50 66 58 72 62C76 64 79 60 75 58M74 106C84 104 88 112 82 116C78 118 75 114 79 112%27/%3E%3C/g%3E%3Cpath fill=%27%235fb548%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(88 12) rotate(165) scale(1)%27/%3E%3Cpath fill=%27%239ad65a%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(86 26) rotate(20) scale(0.8)%27/%3E%3Cpath fill=%27%235fb548%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(83 44) rotate(195) scale(1)%27/%3E%3Cpath fill=%27%235fb548%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(80 66) rotate(15) scale(0.9)%27/%3E%3Cpath fill=%27%239ad65a%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(79 84) rotate(170) scale(0.85)%27/%3E%3Cpath fill=%27%235fb548%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(76 98) rotate(30) scale(0.75)%27/%3E%3Cpath fill=%27%235fb548%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(72 124) rotate(185) scale(0.7)%27/%3E%3Cpath fill=%27%239ad65a%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(72 140) rotate(20) scale(0.6)%27/%3E%3C/svg%3E");
  --deco-start-size: 96px 150px;
  --deco-tab: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 180 26%27%3E%3Cpath fill=%27none%27 stroke=%27%233f8f4f%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 d=%27M0 20C26 8 44 24 70 14C92 6 108 18 132 12C148 8 160 12 176 6%27/%3E%3Cpath fill=%27%235fb548%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(22 14) rotate(-60) scale(0.6)%27/%3E%3Cpath fill=%27%239ad65a%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(50 18) rotate(-110) scale(0.55)%27/%3E%3Cpath fill=%27%235fb548%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(84 10) rotate(-70) scale(0.6)%27/%3E%3Cpath fill=%27%239ad65a%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(116 14) rotate(-115) scale(0.5)%27/%3E%3Cpath fill=%27%235fb548%27 d=%27M0 0C6-9 18-9 24 0C18 9 6 9 0 0Z%27 transform=%27translate(146 9) rotate(-65) scale(0.5)%27/%3E%3C/svg%3E");
}

/* Bonbon (hell) */
html[data-theme='bonbon'] {
  color-scheme: light;
  --bg: #fff0f6; --card: #ffffff; --text: #2a0f3a; --muted: #7a5a86; --faint: #e9c6da; --tint: #e6007e; --note: #ff7a00; --shop: #ff2e93; --task: #6d4aff; --on-accent: #ffffff; --danger: #e5004c;
  --top: #ffd0e8; --c-org: #ff2e93; --c-fin: #6d4aff; --c-life: #ff7a00; --on-life: #2a0f3a; --g2: #8b3dff; --on-area: #ffffff; --tab-bg: rgba(255,255,255,.94);
  --deco-start: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 150 62%27%3E%3Ccircle fill=%27%23ff2e93%27 cx=%2720%27 cy=%2740%27 r=%274%27/%3E%3Crect fill=%27%236d4aff%27 x=%2748%27 y=%2710%27 width=%279%27 height=%274%27 rx=%272%27 transform=%27rotate(30 52 12)%27/%3E%3Ccircle fill=%27%23ffc400%27 cx=%2778%27 cy=%2730%27 r=%273%27/%3E%3Crect fill=%27%23ff2e93%27 x=%27100%27 y=%2746%27 width=%2710%27 height=%274%27 rx=%272%27 transform=%27rotate(-25 105 48)%27/%3E%3Ccircle fill=%27%236d4aff%27 cx=%27120%27 cy=%2716%27 r=%275%27/%3E%3Crect fill=%27%23ffc400%27 x=%27136%27 y=%2736%27 width=%279%27 height=%274%27 rx=%272%27 transform=%27rotate(60 140 38)%27/%3E%3Ccircle fill=%27%23ff2e93%27 cx=%2792%27 cy=%278%27 r=%272.5%27/%3E%3Ccircle fill=%27%23ffc400%27 cx=%2738%27 cy=%2718%27 r=%272%27/%3E%3Ccircle fill=%27%236d4aff%27 cx=%2760%27 cy=%2752%27 r=%272.5%27/%3E%3C/svg%3E");
  --deco-start-size: 150px 62px;
}

/* Knallig (dunkel) */
html[data-theme='knallig'] {
  color-scheme: dark;
  --bg: #1a0b2e; --card: #2b1550; --text: #ffffff; --muted: #c3a8e6; --faint: #6b5a99; --tint: #ff2e93; --note: #ffb000; --shop: #ff2e93; --task: #8f6bff; --on-accent: #ffffff; --danger: #ff5c8a;
  --top: #3d1470; --c-org: #ff2e93; --c-fin: #8f6bff; --c-life: #ffb000; --on-life: #1a0b2e; --g2: #7a2cff; --on-area: #ffffff; --tab-bg: rgba(34,14,62,.95);
  --deco-start: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 150 62%27%3E%3Ccircle fill=%27%23ff2e93%27 cx=%2720%27 cy=%2740%27 r=%274%27/%3E%3Crect fill=%27%238f6bff%27 x=%2748%27 y=%2710%27 width=%279%27 height=%274%27 rx=%272%27 transform=%27rotate(30 52 12)%27/%3E%3Ccircle fill=%27%23ffb000%27 cx=%2778%27 cy=%2730%27 r=%273%27/%3E%3Crect fill=%27%23ff2e93%27 x=%27100%27 y=%2746%27 width=%2710%27 height=%274%27 rx=%272%27 transform=%27rotate(-25 105 48)%27/%3E%3Ccircle fill=%27%238f6bff%27 cx=%27120%27 cy=%2716%27 r=%275%27/%3E%3Crect fill=%27%23ffb000%27 x=%27136%27 y=%2736%27 width=%279%27 height=%274%27 rx=%272%27 transform=%27rotate(60 140 38)%27/%3E%3Ccircle fill=%27%23ff2e93%27 cx=%2792%27 cy=%278%27 r=%272.5%27/%3E%3Ccircle fill=%27%23ffb000%27 cx=%2738%27 cy=%2718%27 r=%272%27/%3E%3Ccircle fill=%27%238f6bff%27 cx=%2760%27 cy=%2752%27 r=%272.5%27/%3E%3C/svg%3E"), radial-gradient(circle at 78% 18%, rgba(255,46,147,.55), transparent 42%), radial-gradient(circle at 100% 52%, rgba(143,107,255,.5), transparent 40%);
  --deco-start-size: 150px 62px, 100% 100%, 100% 100%;
}

/* Mango (hell) */
html[data-theme='mango'] {
  color-scheme: light;
  --bg: #fff4e2; --card: #fffdf8; --text: #2b1606; --muted: #85664a; --faint: #e3c9a6; --tint: #f05000; --note: #f08a00; --shop: #f05000; --task: #d4006f; --on-accent: #ffffff; --danger: #d4002f;
  --top: #ffd49c; --c-org: #f05000; --c-fin: #d4006f; --c-life: #00968f; --g2: #ff2d6f; --on-area: #ffffff; --tab-bg: rgba(255,253,248,.94);
  --deco-start: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 74 74%27%3E%3Ccircle fill=%27%23ff7a1a%27 cx=%2737%27 cy=%2737%27 r=%2734%27/%3E%3Cpath stroke=%27%23ffd49c%27 stroke-width=%273%27 d=%27M0 44H74M0 52H74M0 59H74M0 65H74%27/%3E%3C/svg%3E");
  --deco-start-size: 74px 74px;
}

/* Neon (dunkel) */
html[data-theme='neon'] {
  color-scheme: dark;
  --bg: #07070d; --card: #14141f; --text: #f5f5ff; --muted: #9a9ab8; --faint: #3a3a55; --tint: #00e5ff; --note: #ffd000; --shop: #c6ff00; --task: #00e5ff; --on-accent: #07070d; --danger: #ff4d6d;
  --top: #1a1240; --c-org: #c6ff00; --c-fin: #00e5ff; --c-life: #ff3df2; --g2: #7a5cff; --on-area: #07070d; --tab-bg: rgba(12,12,22,.95);
  --deco-start: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 236 110%27%3E%3Cpath d=%27M0 44H236%27 fill=%27none%27 stroke=%27%23ff3df2%27 stroke-width=%271.4%27 opacity=%27.8%27/%3E%3Cpath fill=%27none%27 stroke=%27%2300e5ff%27 stroke-width=%271%27 opacity=%27.45%27 d=%27M118 44L-60 110M118 44L0 110M118 44L60 110M118 44L118 110M118 44L176 110M118 44L236 110M118 44L296 110M0 52H236M0 63H236M0 79H236M0 102H236%27/%3E%3C/svg%3E");
  --deco-start-size: 150px 70px;
}


/* Seitenverlauf oben in Themenfarbe */
body { background: linear-gradient(180deg, var(--top) 0, var(--bg) 320px) no-repeat, var(--bg); }

/* Kachel-Raster */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.tile {
  --c: var(--tint); --on: var(--on-area);
  display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 96px;
  padding: 14px; border-radius: 20px; text-align: left; border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  background: color-mix(in srgb, var(--c) 13%, var(--card)); color: var(--text);
}
.tile.w { grid-column: span 2; }
.tile.a-org  { --c: var(--c-org);  --on: var(--on-org, var(--on-area)); }
.tile.a-fin  { --c: var(--c-fin);  --on: var(--on-fin, var(--on-area)); }
.tile.a-life { --c: var(--c-life); --on: var(--on-life, var(--on-area)); }
.tile .k { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--c) 60%, var(--text)); }
.tile .k .ico { background: var(--c); color: var(--on); }
.tile .n { font-size: 28px; font-weight: 750; letter-spacing: -0.5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .st { font-size: 14px; color: var(--muted); }

/* Hauptkachel: oberste Kachel jeder Seite mit Verlauf */
.tile.hero { background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 45%, var(--g2))); border: 0; color: var(--on); }
.tile.hero .k, .tile.hero .st { color: var(--on); opacity: .88; }
.tile.hero .k .ico { background: color-mix(in srgb, var(--on) 22%, transparent); color: var(--on); }

/* Farbstärke Kräftig: alle Kacheln vollfarbig */
html[data-intensity='kraeftig'] .tile { background: var(--c); border: 0; color: var(--on); }
html[data-intensity='kraeftig'] .tile .k, html[data-intensity='kraeftig'] .tile .st { color: var(--on); opacity: .88; }
html[data-intensity='kraeftig'] .tile .k .ico { background: color-mix(in srgb, var(--on) 22%, transparent); color: var(--on); }

/* Deko im Start-Kopf und an der Tableiste */
.start-head { position: relative; padding-right: 72px; background-image: var(--deco-start); background-repeat: no-repeat; background-position: right top; background-size: var(--deco-start-size); }
.tabbar { background: var(--tab-bg); }
.tabbar::before { content: ""; position: absolute; left: 0; top: -24px; width: 180px; height: 26px; background: var(--deco-tab) no-repeat left bottom / contain; pointer-events: none; }

/* Aktiver Tab in Bereichsfarbe mit Pille */
.tabbar button.t-start { --c: var(--tint); }
.tabbar button.t-org { --c: var(--c-org); }
.tabbar button.t-fin { --c: var(--c-fin); }
.tabbar button.t-life { --c: var(--c-life); }
.tabbar button.on { color: var(--c); }
.tabbar button.on svg { background: color-mix(in srgb, var(--c) 20%, transparent); border-radius: 10px; padding: 2px 12px; box-sizing: content-box; }

@media (min-width: 960px) { .tiles { grid-template-columns: repeat(4, 1fr); } }


/* Einstellungen für Farbstärke und automatischen Wechsel (Seitenleiste) */
.nav-opt { padding: 6px 14px 10px; }
.nav-opt .lab { font-size: 13px; color: var(--muted); margin: 6px 2px; display: block; }
.nav-opt .seg { margin-bottom: 4px; }

/* Kachel-Inhalte */
.tile { cursor: pointer; font: inherit; }
.tile.kpi { cursor: default; min-height: 0; gap: 4px; }
.tile .k-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .k .ico { width: 28px; height: 28px; border-radius: 9px; flex: none; }
.tile .k .ico svg { width: 16px; height: 16px; }
.tile .n small { font-size: 13px; font-weight: 600; opacity: .7; letter-spacing: 0; }
.tile .n.s { font-size: 20px; }
.tile .n.neg { color: var(--danger); }
html[data-intensity='kraeftig'] .tile .n.neg, .tile.hero .n.neg { color: inherit; }
.tiles.kpis { margin-bottom: 16px; }
.tiles.kpis .tile { padding: 12px 14px; }
.tiles.kpis .n { font-size: 20px; }
.mini-list { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.mini-list > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mini-list .c { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; opacity: .6; flex: none; }
.mini-list .mt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-list .chip { flex: none; }
.ring-row { display: flex; align-items: center; gap: 10px; }
.ring { --rc: var(--c); width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--rc) calc(var(--p) * 1%), color-mix(in srgb, var(--rc) 22%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
.ring.over { --rc: var(--danger); }
html[data-intensity='kraeftig'] .tile .ring { --rc: var(--on); }
.tile.hero .ring { --rc: var(--on); }
.bars { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bl { position: relative; height: 24px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--c) 10%, transparent); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bl i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: color-mix(in srgb, var(--c) 35%, transparent); }
.bl i.out { background: color-mix(in srgb, var(--danger) 35%, transparent); }
.bl span { position: relative; display: block; line-height: 24px; padding: 0 8px; }
html[data-intensity='kraeftig'] .bl { background: color-mix(in srgb, var(--on) 14%, transparent); }
html[data-intensity='kraeftig'] .bl i, html[data-intensity='kraeftig'] .bl i.out { background: color-mix(in srgb, var(--on) 32%, transparent); }
.start-head { margin-top: 2px; }
.tile.hero .chip, html[data-intensity='kraeftig'] .tile .chip { background: color-mix(in srgb, var(--on) 22%, transparent); color: var(--on); }

/* Zurück-Button und Bereichsseiten */
.back-btn { height: 44px; border: 0; background: none; color: var(--tint); display: inline-flex; align-items: center; gap: 2px; padding: 0 8px 0 2px; font: inherit; font-size: 17px; }
.back-btn .back-i { width: 20px; height: 20px; transform: rotate(180deg); }
.bar-spacer { width: 44px; }
.tile-main { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; width: 100%; cursor: pointer; }
.tile-main:focus-visible, .tile .go:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.tile .go { border: 0; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 650; padding: 8px 0 0; margin-top: auto; text-align: left; min-height: 36px; opacity: .92; }
.tile:not(.hero) .go { color: color-mix(in srgb, var(--c) 60%, var(--text)); }
html[data-intensity='kraeftig'] .tile .go { color: var(--on); }
.cnt { display: flex; gap: 8px; }
.cnt span { flex: 1; display: flex; flex-direction: column; font-size: 13px; opacity: .85; }
.cnt b { font-size: 24px; font-weight: 750; opacity: 1; font-variant-numeric: tabular-nums; }