:root {
  --ink: #20211e;
  --muted: #74756e;
  --line: #e7e6df;
  --paper: #f7f7f3;
  --yellow: #f3c84b;
  --yellow-soft: #fff4be;
  --brown: #78533d;
  --brown-soft: #eee2d8;
  --blue-soft: #eaf1f4;
  --sage-soft: #e8efe7;
  --shadow: 0 12px 34px rgba(42, 40, 30, .055);
}

html { background: var(--paper); font-family: ui-sans-serif, "Avenir Next", "Helvetica Neue", Arial, sans-serif; }
aside { background: #fff; color: var(--ink); border-right: 1px solid var(--line); padding-top: 30px; }
.brand { color: var(--ink); }
.brand span, .auth-mark { background: var(--yellow); color: #2d291c; border-radius: 50%; }
nav a { color: #686963; }
nav a:hover, nav a.active { background: var(--yellow-soft); color: #28271f; }
.account { border-color: var(--line); }
.account small, .account .link { color: #81827c; }
.primary { background: #262721; color: #fff; }
.primary:hover { background: #000; }
.secondary { background: var(--yellow-soft); color: #3d3724; }
.eyebrow { color: #817a62; }

.home-intro { margin: 2px 0 22px; }
.home-intro h2 { font-size: 25px; }
.home-intro > p:last-child { color: var(--muted); font-size: 14px; margin: 7px 0 0; }
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.home-card {
  min-height: 190px; border-radius: 18px; padding: 24px 25px; position: relative; overflow: hidden; background: #fff;
  color: var(--ink); text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--line); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 5px 18px rgba(42,40,30,.025);
}
.home-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(42, 40, 30, .07); border-color: var(--accent); }
.home-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.accent-electric { --accent: #e4b619; --accent-soft: #fff7d7; }
.accent-heat { --accent: #dc7049; --accent-soft: #fff0e9; }
.accent-money { --accent: #5c89a7; --accent-soft: #edf5f9; }
.accent-waste { --accent: #78533d; --accent-soft: #f4ece6; }
.home-card.yellow { background: var(--yellow-soft); }
.home-card.blue { background: var(--blue-soft); }
.home-card.brown { background: var(--brown-soft); }
.home-card.sage { background: var(--sage-soft); }
.card-arrow { position: absolute; right: 22px; top: 21px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--accent); font-size: 17px; }
.home-card small { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 850; margin-bottom: 8px; }
.home-card strong { font-size: 27px; line-height: 1.05; letter-spacing: -.035em; display: block; }
.home-card strong em { font-style: normal; font-size: 13px; letter-spacing: 0; color: #6e6d66; }
.home-card p { font-size: 12px; margin: 9px 0 0; color: #686861; }
.symbol-box { position: absolute; left: 24px; top: 22px; width: 46px; height: 46px; border: 1.5px solid var(--accent); border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); font-size: 26px; font-weight: 700; line-height: 1; }
.heat-symbol { font-size: 32px; transform: rotate(90deg); display: block; }
.bolt-symbol { font-family: Georgia, serif; font-size: 31px; }
.mini-bin { width: 35px; height: 34px; margin: 6px; border: 3px solid var(--accent); border-top: 0; border-radius: 2px 2px 6px 6px; background: transparent; }
.mini-bin::before { content: ""; position: absolute; left: -5px; top: -6px; width: 39px; height: 3px; border-radius: 4px; background: var(--accent); }
.mini-bin i { position: absolute; width: 9px; height: 3px; left: 10px; top: -11px; border-radius: 3px; background: var(--accent); }
.card-icon { position: absolute; right: 26px; bottom: 28px; opacity: .13; font-size: 82px; font-weight: 900; line-height: 1; }
.energy-icon { width: 76px; height: 76px; display: flex; align-items: flex-end; gap: 8px; }
.energy-icon i { width: 14px; background: #222; border-radius: 10px 10px 2px 2px; }
.energy-icon i:nth-child(1) { height: 35%; }
.energy-icon i:nth-child(2) { height: 70%; }
.energy-icon i:nth-child(3) { height: 100%; }
.money-icon, .cost-icon { font-family: Georgia, serif; }
.bin-icon { width: 68px; height: 72px; border: 8px solid var(--brown); border-top: 0; border-radius: 4px 4px 13px 13px; }
.bin-icon::before { content: ""; position: absolute; width: 82px; height: 8px; background: var(--brown); left: -7px; top: -10px; border-radius: 7px; }
.bin-icon i { position: absolute; width: 8px; height: 10px; background: var(--brown); left: 30px; top: -20px; border-radius: 4px; }
.overview-strip { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 25px; align-items: center; margin-bottom: 28px; }
.overview-strip > span { height: 44px; background: var(--line); }
.overview-strip small { color: var(--muted); display: block; font-size: 11px; margin-bottom: 7px; }
.overview-strip strong { font-size: 20px; }
.overview-strip a { color: var(--ink); text-decoration: none; }
.recent-panel { box-shadow: none; }

.waste-hero { background: var(--brown-soft); border-radius: 22px; padding: 32px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; overflow: hidden; }
.waste-hero h2 { font-size: 28px; }
.waste-hero p:last-child { color: #6f5c51; margin: 8px 0 0; }
.big-bin { width: 90px; height: 90px; position: relative; opacity: .22; margin-right: 30px; border: 10px solid var(--brown); border-top: 0; border-radius: 5px 5px 18px 18px; }
.big-bin::before { content: ""; position: absolute; width: 110px; height: 10px; left: -20px; top: -13px; background: var(--brown); border-radius: 8px; }
.big-bin i { position: absolute; width: 12px; height: 13px; left: 29px; top: -26px; background: var(--brown); border-radius: 5px; }
.waste-layout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.waste-list { display: grid; gap: 12px; }
.waste-row, .waste-form-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.waste-row { padding: 17px; display: flex; align-items: center; gap: 18px; }
.waste-date { width: 60px; height: 60px; border-radius: 13px; background: var(--brown-soft); display: grid; place-items: center; align-content: center; color: var(--brown); }
.waste-date strong { font-size: 22px; line-height: 1; }
.waste-date small { font-size: 9px; font-weight: 900; margin-top: 3px; }
.waste-row h3 { margin-top: 8px; }
.brown-label { background: var(--brown-soft); color: var(--brown); }
.waste-form-card { padding: 24px; }
.waste-form-card h2 { margin-bottom: 22px; }
.brown-button { background: var(--brown); }
.button-link { display: inline-block; text-decoration: none; }
.book-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; }
.book-toolbar { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.book-toolbar>div { display: flex; gap: 10px; }
.book-summary>div { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.book-summary small { display: block; color: var(--muted); margin-bottom: 7px; }
.book-summary strong { font-size: 23px; }
.book-group { border-top: 3px solid #d9b733; }
.book-group-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: #fffdf4; }
.book-group-head span { color: var(--muted); font-size: 12px; }
.group-einnahmen { border-color: #76a968; }
.group-einnahmen .book-group-head { background: #f3faf1; }
.group-ausgaben-fix { border-color: #db7168; }
.group-ausgaben-fix .book-group-head { background: #fff5f3; }
.group-ausgaben-variabel { border-color: #e9a14c; }
.group-ausgaben-variabel .book-group-head { background: #fff8ef; }
.book-group input { min-width: 110px; max-width: 150px; padding: 8px 10px; }
.budget-actions { padding: 22px 24px; text-align: right; }
.tariff-strip { display: flex; gap: 28px; padding: 14px 0; margin-top: 18px; border-top: 1px solid var(--line); }
.tariff-strip small { display: block; color: var(--muted); font-size: 10px; margin-bottom: 3px; }
.energy-table { margin-top: 16px; }
.energy-table .positive { color: #519444; font-weight: 800; }
.energy-table .negative { color: #c64939; font-weight: 800; }
.badge.ready { background: #e7f4e5; color: #3d7935; margin: 14px 0; }
.mfa-setup { max-width: 680px; margin: 0 auto; padding: 32px; }
.mfa-setup img { display: block; border: 1px solid var(--line); border-radius: 14px; margin: 24px 0; }
.mfa-setup details { margin: 18px 0; }
.mfa-setup code { word-break: break-all; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; padding: 18px; background: #f6f6f2; border-radius: 12px; margin: 22px 0; }
.meter-section { margin: 0 0 46px; scroll-margin-top: 20px; }
.subsection-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.subsection-head p, .subsection-head h2 { margin: 0; }
.small-symbol { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 11px; font-size: 23px; }
.electricity-heading { color: #a98400; }
.heat-heading { color: #c35d38; }
.subsection-head .eyebrow { color: currentColor; }
.subsection-head h2 { color: var(--ink); font-size: 18px; margin-top: 2px; }

@media (max-width: 980px) {
  aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .home-card { min-height: 180px; }
  .waste-layout { grid-template-columns: 1fr; }
  .waste-form-card { order: -1; }
}

@media (max-width: 640px) {
  nav a:nth-child(1) { display: none; }
  nav a:nth-child(4) { display: block; }
  nav a:nth-child(5) { display: none; }
  nav a { padding: 8px 7px; font-size: 11px; }
  .home-grid { grid-template-columns: 1fr; }
  .home-card { min-height: 190px; }
  .overview-strip { grid-template-columns: 1fr; gap: 16px; }
  .overview-strip > span { height: 1px; width: 100%; }
  .waste-hero { padding: 24px; }
  .big-bin { transform: scale(.65); margin-right: 0; }
  .home-intro h2 { font-size: 22px; }
  .book-summary { grid-template-columns: 1fr; }
  .book-group-head, .tariff-strip { align-items: flex-start; flex-direction: column; gap: 8px; }
  .recovery-codes { grid-template-columns: 1fr; }
}

/* Ruhigere, schlankere Arbeitsoberfläche */
html { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; }
body { background: #fafaf8; }
main { max-width: 1280px; padding: 64px 72px 110px; }
h1, h2, h3, strong, b { font-weight: 500; }
h1 { font-size: 30px; letter-spacing: -.025em; }
h2 { letter-spacing: -.015em; }
.eyebrow, th, .category, .badge, label { font-weight: 500; letter-spacing: .07em; }
nav a, .primary, .secondary { font-weight: 500; }
.panel, .detail-card, .home-card { box-shadow: none; }
header { margin-bottom: 54px; }
.section-copy { margin: 9px 0 0; font-size: 13px; font-weight: 400; }
.home-landing { min-height: calc(100vh - 245px); display: grid; align-content: center; max-width: 960px; margin: -45px auto 0; }
.home-intro { text-align: center; margin-bottom: 34px; }
.home-grid { gap: 22px; }
.home-card { min-height: 210px; padding: 30px 32px; border-radius: 15px; }
.home-card small { font-weight: 600; }
.home-card strong { font-weight: 500; letter-spacing: -.02em; }
.book-panel { background: transparent; border: 0; overflow: visible; }
.book-panel>.section-head { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 28px; padding: 28px 30px; }
.book-group { background: #fff; border: 1px solid var(--line); border-top-width: 3px; border-radius: 13px; overflow: hidden; margin-bottom: 24px; }
.book-group-head { padding: 22px 28px; }
.book-group th, .book-group td { padding: 17px 28px; }
.category-link { color: var(--ink); text-decoration: none; display: grid; gap: 4px; font-weight: 500; }
.category-link span { color: var(--muted); font-size: 10px; font-weight: 400; opacity: 0; transition: opacity .15s; }
.category-link:hover span { opacity: 1; }
.book-group input { background: #fff; border-color: #deded8; font-weight: 400; }
.value-with-state { position: relative; }
.value-with-state small { position: absolute; right: 8px; bottom: -13px; color: #9a7b22; font-size: 9px; }
.settings-grid { gap: 28px; align-items: start; }
.settings-grid>.panel { padding: 30px; }
.household-users { grid-column: 1 / -1; }
.category-hero { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 34px; margin: 20px 0 28px; }
.category-hero h2 { font-size: 28px; }
.year-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 34px; }
.year-kpis small { color: var(--muted); display: block; margin-bottom: 7px; }
.year-kpis strong { font-size: 22px; font-weight: 500; }
.back-link { color: var(--muted); text-decoration: none; font-size: 13px; }
.chart-panel { padding: 28px 30px 20px; }
.chart-legend { display: flex; justify-content: flex-end; gap: 18px; color: var(--muted); font-size: 11px; }
.chart-legend span { display: flex; align-items: center; gap: 7px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.legend-current, .bar.current { background: #e4b619; }
.legend-previous, .bar.previous { background: #dddcd5; }
.year-chart { height: 260px; display: grid; grid-template-columns: repeat(12,1fr); gap: 12px; align-items: end; margin-top: 26px; }
.chart-month { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 10px; text-align: center; color: var(--muted); }
.bars { display: flex; gap: 3px; align-items: end; justify-content: center; }
.bar { width: 12px; min-height: 2px; border-radius: 3px 3px 0 0; }
.page-links { margin-bottom: 22px; }
.category-create { padding: 30px; }
.category-create h2 { margin-bottom: 24px; }
.category-edit { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; gap: 14px; align-items: end; }
.category-admin { margin-top: 38px; }
.category-admin-row { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 12px; }
.category-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.category-actions form:first-child { display: flex; gap: 6px; }
.icon-button { width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); }
.danger-link { background: transparent; color: #a44f45; font-size: 12px; padding: 6px; }
.future-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: start; }
.future-form, .future-list { padding: 30px; }
.future-form h2, .future-list h2 { margin-bottom: 22px; }
.future-form>.muted { font-size: 13px; line-height: 1.55; margin-bottom: 24px; }
.future-change { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.future-change div { display: grid; gap: 4px; }
.future-change small, .future-change span { color: var(--muted); font-size: 11px; }

@media (max-width: 980px) {
  main { padding: 44px 28px 80px; }
  .home-landing { min-height: auto; margin: 0 auto; }
}
@media (max-width: 640px) {
  main { padding: 34px 18px 70px; }
  header { margin-bottom: 38px; }
  .book-group th, .book-group td { padding: 14px 16px; }
  .year-kpis { grid-template-columns: 1fr; gap: 18px; }
  .year-chart { gap: 5px; height: 210px; }
  .bar { width: 7px; }
  .book-toolbar, .book-toolbar>div { display: grid; }
  .category-edit, .future-grid { grid-template-columns: 1fr; }
  .future-change { grid-template-columns: 1fr; }
}