:root{
  --bg:#F1F3EE;
  --bg-alt:#E7EAE2;
  --surface:#FFFFFF;
  --surface-2:#F7F8F4;
  --ink:#1C2420;
  --ink-soft:#5B6660;
  --ink-faint:#8B958E;
  --line:#DBE0D6;
  --income:#1F6F4A;
  --income-soft:#E3F1E9;
  --expense:#A13E2B;
  --expense-soft:#F5E4DF;
  --accent:#B98B2E;
  --accent-soft:#F4EBD6;
  --shadow:0 1px 2px rgba(28,36,32,.06), 0 8px 24px rgba(28,36,32,.06);
  --radius:14px;
  color-scheme: light;
}
[data-theme="dark"]{
  --bg:#141815;
  --bg-alt:#1B211C;
  --surface:#1E2620;
  --surface-2:#232C25;
  --ink:#EDEFE9;
  --ink-soft:#9AA69C;
  --ink-faint:#69736C;
  --line:#313B33;
  --income:#4FAE7F;
  --income-soft:#1E3A2C;
  --expense:#E0876A;
  --expense-soft:#3B241C;
  --accent:#E0B455;
  --accent-soft:#3A2F17;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  transition:background .2s ease, color .2s ease;
  overflow-x:hidden;
}
.num{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric: tabular-nums;}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif;}
button{font-family:inherit;}
a{color:inherit;}
a:focus,a:focus-visible,button:focus,button:focus-visible{outline:none;}

/* Layout */
.app{display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;}
.topbar{
  display:flex; align-items:center; gap:14px;
  padding:10px 22px; background:var(--bg-alt); border-bottom:1px solid var(--line);
  padding-top:max(10px, env(safe-area-inset-top));
  padding-left:max(22px, env(safe-area-inset-left));
  padding-right:max(22px, env(safe-area-inset-right));
  position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:center; gap:9px; flex-shrink:0; text-decoration:none;}
.brand-mark{
  height:44px; width:auto;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand-mark img{height:100%; width:auto; object-fit:contain; display:block;}
.brand-name{font-family:'Fraunces',serif; font-weight:560; font-size:17px; letter-spacing:.2px; white-space:nowrap;}

nav.mainnav{display:flex; align-items:center; gap:2px; flex:1; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
nav.mainnav::-webkit-scrollbar{display:none;}
.nav-item{
  display:flex; align-items:center; gap:7px; flex-shrink:0; position:relative;
  padding:8px 12px; border-radius:9px;
  color:var(--ink-soft); text-decoration:none;
  font-size:13.5px; font-weight:500; white-space:nowrap;
  cursor:pointer; border:none; background:none;
}
.nav-item svg{width:16px;height:16px; stroke:currentColor; fill:none; stroke-width:1.6; flex-shrink:0;}
.nav-item:focus,.nav-item:focus-visible{outline:none;}
.nav-item.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow);}
.nav-item.active svg{stroke:var(--income);}

.theme-btn{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-btn:hover{color:var(--ink);}
.theme-btn svg{width:16px;height:16px; stroke:currentColor; stroke-width:2;}

.header-icon-btn.btn:hover, .header-icon-btn.btn:focus, .header-icon-btn.btn:focus-visible{box-shadow:none; outline:none; background:transparent;}

.onboarding-step-actions .btn.btn:hover, .onboarding-step-actions .btn.btn:focus, .onboarding-step-actions .btn.btn:focus-visible{box-shadow:none; outline:none;}

.sparbox-actions .btn.btn:hover, .sparbox-actions .btn.btn:focus, .sparbox-actions .btn.btn:focus-visible{box-shadow:none; outline:none;}

.theme-toggle{position:relative; display:inline-flex; align-items:center; width:42px; height:24px; cursor:pointer; flex-shrink:0;}
.theme-toggle input{opacity:0; width:0; height:0; position:absolute;}
.theme-toggle-track{position:absolute; inset:0; background:var(--line); border-radius:99px; transition:background .15s;}
.theme-toggle input:checked + .theme-toggle-track{background:var(--income);}
.theme-toggle-thumb{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:#1a1a1a; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.25);}
.theme-toggle input:checked + .theme-toggle-track .theme-toggle-thumb{transform:translateX(18px);}
.theme-toggle-thumb svg{width:12px; height:12px; stroke-width:2.6;}
.theme-toggle input:focus-visible + .theme-toggle-track{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--income);}

.profile-menu summary{list-style:none; cursor:pointer;}
.profile-menu summary::-webkit-details-marker{display:none;}
.dropdown-menu{
  position:absolute; top:calc(100% + 6px); right:0; min-width:190px; z-index:70;
  padding:6px; display:flex; flex-direction:column; gap:2px;
}
.dropdown-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:500;
  background:none; border:none; cursor:pointer; width:100%; text-align:left;
}
.dropdown-item:hover{background:var(--surface-2);}
.dropdown-item svg{width:16px; height:16px; stroke:var(--ink-soft); stroke-width:1.8; flex-shrink:0;}
.dropdown-submenu summary{list-style:none;}
.dropdown-submenu summary::-webkit-details-marker{display:none;}
.dropdown-submenu[open] summary .chevron{transform:rotate(180deg);}

.admin-feedback-badge{
  position:absolute; top:-5px; right:-7px; display:inline-flex; align-items:center; gap:2px;
  padding:1px 5px 1px 4px; border-radius:99px; background:var(--expense); color:#fff;
  font-size:10px; font-weight:700; line-height:1.5;
}
.admin-feedback-badge svg{width:10px; height:10px; stroke:#fff; stroke-width:2.2;}

/* Wie .admin-feedback-badge, aber mit Offset INNERHALB der eigenen Box statt darüber
   hinausragend — nötig für Badges innerhalb von nav.mainnav (overflow-x:auto schneidet
   sonst per CSS-Spezifikation auch vertikal ab, nicht nur horizontal). */
.nav-item-badge{
  position:absolute; top:1px; right:1px; display:inline-flex; align-items:center; gap:2px;
  padding:1px 5px 1px 4px; border-radius:99px; background:var(--expense); color:#fff;
  font-size:10px; font-weight:700; line-height:1.5;
}
.nav-item-badge svg{width:10px; height:10px; stroke:#fff; stroke-width:2.2;}

main{flex:1; padding:30px 40px calc(80px + env(safe-area-inset-bottom)); max-width:1080px; margin:0 auto; width:100%; min-width:0;}
.page-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:26px; gap:16px; flex-wrap:wrap;}
.page-head h1{font-size:28px; font-weight:560; margin:0;}
.page-sub{color:var(--ink-soft); font-size:14px; margin-top:4px;}

.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:10px; border:none;
  background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:transform .1s, box-shadow .1s;
  text-decoration:none;
}
.btn:focus,.btn:focus-visible{outline:none;}
.btn:hover{box-shadow:none;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--income); border-color:var(--income); color:#fff;}
.btn-primary.expense{background:var(--expense); border-color:var(--expense);}
.btn-primary.accentb{background:var(--accent); border-color:var(--accent); color:#241a04;}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-soft);}
.btn-sm{padding:6px 10px; font-size:12.5px;}
.btn svg{width:14px;height:14px; stroke:currentColor; fill:none; stroke-width:2;}
.btn:disabled{opacity:.5; cursor:default;}
.btn-primary:disabled{background:var(--line); border-color:var(--line); color:var(--ink-faint); opacity:1; cursor:not-allowed;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

/* Dashboard */
.balance-card{padding:26px 28px; margin-bottom:18px; position:relative; overflow:hidden;}
.balance-label{font-size:12.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-soft); font-weight:600;}
.balance-amt{font-size:44px; font-weight:560; margin-top:6px; font-family:'Fraunces',serif;}
.balance-amt .cents{font-size:22px; color:var(--ink-soft);}
.balance-meta{display:flex; gap:22px; margin-top:16px; flex-wrap:wrap;}
.balance-meta div{font-size:13px; color:var(--ink-soft);}
.balance-meta b{color:var(--ink); font-family:'IBM Plex Mono',monospace; font-weight:500;}

.stat-card{padding:18px 20px;}
.stat-top{display:flex; justify-content:space-between; align-items:flex-start;}
.stat-icon{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;}
.stat-icon svg{width:16px;height:16px; stroke-width:2;}
.stat-title{font-size:12.5px; color:var(--ink-soft); font-weight:600; margin-top:14px;}
.stat-value{font-size:23px; font-weight:600; margin-top:3px;}

.section-title{font-size:15px; font-weight:600; margin:0 0 12px 0; display:flex; align-items:center; justify-content:space-between;}
.section-title .muted{font-weight:500; color:var(--ink-faint); font-size:12px; margin-left:6px;}

.list-row{display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line);}
.list-row:last-child{border-bottom:none;}
.row-dot{width:8px;height:8px;border-radius:50%; flex-shrink:0;}
.row-name{font-weight:500; font-size:14px;}
.row-meta{font-size:12px; color:var(--ink-faint); margin-top:1px;}
.row-amt{margin-left:auto; font-weight:600; font-size:14.5px; white-space:nowrap; flex-shrink:0;}

.empty{padding:34px 14px; text-align:center; color:var(--ink-faint); font-size:13.5px;}
.empty svg{width:26px;height:26px; stroke:var(--ink-faint); margin-bottom:8px;}

/* Forms */
.form-card{padding:18px 20px; margin-bottom:16px;}
.form-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:end;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:600;}
.label-with-tip{display:flex; align-items:center; gap:6px;}
.label-tip{position:relative; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--line); color:var(--ink-faint); font-size:10px; font-weight:700; text-transform:none; letter-spacing:0; cursor:help;}
.label-tip:hover,.label-tip:focus{color:var(--ink); border-color:var(--ink-soft); outline:none;}
.label-tip-bubble{display:none; position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); width:max-content; max-width:220px; padding:7px 10px; border-radius:8px; background:var(--ink); color:var(--surface-2); font-size:12px; font-weight:400; line-height:1.4; text-transform:none; letter-spacing:normal; z-index:20;}
.label-tip:hover .label-tip-bubble,.label-tip:focus .label-tip-bubble{display:block;}
input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],input[type=email],select,textarea{
  padding:9px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font-size:13.5px; font-family:inherit; width:100%;
}
textarea{resize:vertical; min-height:80px;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--income); outline-offset:1px;}
/* Der native Pfeil-Bereich eines <select> wird vom Browser mit eigener Hintergrundfarbe
   gezeichnet (unabhängig von "background" oben) — das erzeugt den hellen Streifen rechts
   im Dark Mode. Lösung: native Optik komplett abschalten und einen eigenen, zur Palette
   passenden Pfeil als Hintergrundbild zeichnen. */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B958E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px 16px;
  padding-right:34px;
}
[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369736C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Die aufgeklappte Options-Liste eines <select> wird vom Browser/Betriebssystem
   gerendert, nicht von unserem CSS-Layout — ohne diese Regel bleibt sie hell/grau,
   selbst im Dark Mode. Wird von den meisten Browsern respektiert (Chrome, Edge,
   Firefox); auf manchen Plattformen (z. B. Safari/macOS) übernimmt stattdessen
   color-scheme weiter oben die Basis-Optik.*/
select option{
  background:var(--surface-2);
  color:var(--ink);
}
.field.checkfield{flex-direction:row; align-items:center; gap:8px; padding-bottom:9px;}
.form-actions{grid-column:1/-1; display:flex; gap:8px; margin-top:2px;}
.head-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* Fixed costs checklist */
.fc-row{display:flex; align-items:center; gap:14px; padding:13px 6px; border-bottom:1px solid var(--line);}
.fc-row:last-child{border-bottom:none;}
.fc-check{
  width:22px;height:22px; border-radius:6px; border:1.6px solid var(--line);
  flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); transition:background .12s, border-color .12s;
}
.fc-check svg{width:13px;height:13px; stroke:#fff; stroke-width:3; opacity:0; transition:opacity .1s;}
.fc-row.checked .fc-check{background:var(--accent); border-color:var(--accent);}
.fc-row.checked .fc-check svg{opacity:1;}
.fc-row.checked .fc-name{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--ink-faint);}
.fc-row.expired{opacity:.55;}
.fc-row.expired .fc-check{pointer-events:none; cursor:default;}
.fc-row.expired .fc-name{color:var(--ink-faint);}
.fc-name{font-weight:500; font-size:14px;}
.fc-cat{font-size:12px; color:var(--ink-faint);}
.fc-amt{margin-left:auto; font-weight:600; font-family:'IBM Plex Mono',monospace;}
.fc-progress{padding:16px 20px; margin-bottom:16px;}
.fc-bar-track{height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; margin-top:10px;}
.fc-bar-fill{height:100%; background:var(--accent); border-radius:99px; transition:width .25s ease;}

.del-btn{background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:4px; border-radius:6px; display:flex;}
.del-btn:hover{color:var(--expense); background:var(--expense-soft);}
.del-btn svg{width:15px;height:15px; stroke:currentColor; stroke-width:1.8;}
.edit-btn{background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:4px; border-radius:6px; display:flex; text-decoration:none;}
.edit-btn:hover{color:var(--income); background:var(--income-soft);}
.edit-btn svg{width:15px;height:15px; stroke:currentColor; stroke-width:1.8;}

.crown-btn{background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:4px; border-radius:6px; display:flex; transition:transform .12s;}
.crown-btn svg{width:17px;height:17px; stroke:currentColor; stroke-width:1.8; fill:none; transition:fill .12s, stroke .12s;}
.crown-btn:hover{color:var(--accent); background:var(--accent-soft); transform:scale(1.08) rotate(-6deg);}
.crown-btn.is-admin{color:var(--accent);}
.crown-btn.is-admin svg{fill:var(--accent);}
.crown-btn.is-admin:hover{color:var(--expense); background:var(--expense-soft);}
.crown-btn.is-admin:hover svg{fill:var(--expense);}

.admin-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px;}
.admin-tab{padding:10px 4px; margin-bottom:-1px; font-size:14px; font-weight:600; color:var(--ink-faint); text-decoration:none; border-bottom:2px solid transparent; display:flex; align-items:center; gap:6px;}
.admin-tab svg{width:2em; height:2em; flex-shrink:0; stroke-width:2;}
.admin-tab:hover{color:var(--ink);}
.admin-tab.active{color:var(--income); border-bottom-color:var(--income);}
.admin-tab .badge-count{background:var(--surface-2); color:var(--ink-soft); font-size:11px; font-weight:700; padding:1px 6px; border-radius:99px;}

.admin-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.admin-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
.admin-table td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table .row-actions{display:flex; gap:2px; align-items:center; justify-content:flex-end; flex-wrap:nowrap;}

.selftest-row{display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line);}
.selftest-row:last-child{border-bottom:none;}
.selftest-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}

.file-picker{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:10px; border:none;
  background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:box-shadow .1s;
}
.file-picker:hover{box-shadow:none;}
.file-picker input[type=file]{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.file-picker svg{width:15px; height:15px; stroke:currentColor; stroke-width:1.8; flex-shrink:0;}
.file-picker-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; color:var(--ink-soft); font-weight:500;}

/* Persons */
.household-card{padding:18px 20px; margin-bottom:14px;}
.household-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.household-head h3{font-size:16px; margin:0; font-weight:560;}
.members{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  display:flex; align-items:center; gap:7px; padding:6px 6px 6px 12px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:99px; font-size:13px;
}
.chip .del-btn{padding:2px;}
.chip .edit-btn{padding:2px;}
.add-member-form{display:flex; gap:8px; margin-top:12px;}
.add-member-form input{flex:1;}

/* Ziele & Sparbox */
.goal-card{padding:18px 20px; margin-bottom:14px;}
.goal-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; gap:10px;}
.goal-name{font-size:16px; font-weight:560; font-family:'Fraunces',serif;}
.goal-img{width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0;}
.goal-img-placeholder{background:var(--accent-soft); display:flex; align-items:center; justify-content:center; color:var(--accent); border:none;}
.goal-img-placeholder svg{width:24px; height:24px; stroke-width:1.7;}
.goal-link{display:inline-flex; align-items:center; gap:4px; margin-top:3px; font-size:12.5px; font-weight:600; color:var(--income); text-decoration:none;}
.goal-link:hover{text-decoration:underline;}
.goal-link svg{width:12px; height:12px; stroke-width:2.2;}
.goal-link-price{font-size:12px; color:var(--ink-faint); font-weight:600; margin-top:1px;}
.goal-progress-track{height:10px; background:var(--surface-2); border-radius:99px; overflow:hidden; margin-bottom:9px;}
.goal-progress-fill{height:100%; background:var(--income); border-radius:99px; transition:width .25s ease;}
.goal-progress-fill.reached{background:var(--accent);}
.goal-numbers{display:flex; align-items:baseline; gap:6px; font-size:14px; flex-wrap:wrap;}
.goal-pct{margin-left:auto; color:var(--ink-faint); font-size:12.5px;}

/* Group accordion (Übersicht) — <details>/<summary>-basiert, kein JS nötig */
.group-block{border-bottom:1px solid var(--line);}
.group-block:last-child{border-bottom:none;}
summary{cursor:pointer; list-style:none;}
summary::-webkit-details-marker{display:none;}
summary::marker{display:none;}
.group-header{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 4px; background:none; border:none; cursor:pointer;
  font-family:inherit; text-align:left; color:var(--ink); border-radius:8px;
}
.group-header:hover{background:var(--surface-2);}
.chevron{width:15px; height:15px; stroke:var(--ink-faint); flex-shrink:0; transition:transform .15s;}
.section-toggle-header{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:0; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; color:inherit;
}
details[open] > summary .chevron{transform:rotate(180deg);}
.goals-view-toggle{display:flex; justify-content:flex-end; gap:8px; margin-bottom:14px;}
/* ---------- Einnahmen/Ausgaben: KPI-Karten, Toolbar, Liste mit Mehrfachauswahl ---------- */
.entries-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px;}
.entries-kpi{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px;}
.entries-kpi-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.entries-kpi-icon{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.entries-kpi-icon svg{width:15px; height:15px; stroke:currentColor; stroke-width:2; fill:none;}
.entries-kpi-label{font-size:11px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.02em;}
.entries-kpi-value{font-size:20px; font-weight:600; color:var(--ink);}
.entries-kpi-hint{font-size:11.5px; color:var(--ink-faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.entries-toolbar{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.entries-toolbar-field{display:flex; flex-direction:column; gap:4px; margin:0;}
.entries-toolbar-field label{font-size:11px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.02em;}
.entries-toolbar-box{box-sizing:border-box; height:36px; display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:0 10px; font-size:13px; color:var(--ink); min-width:150px;}
.entries-toolbar-box select{border:none; background:none; font:inherit; color:inherit; flex:1; min-width:0; appearance:none; padding:0; cursor:pointer;}
.entries-toolbar-search{flex:1; min-width:180px;}
.entries-toolbar-search .entries-toolbar-box{min-width:0;}
.entries-toolbar-search input{border:none; background:none; font:inherit; color:var(--ink); flex:1; padding:0; min-width:0;}
.entries-toolbar-search input::placeholder{color:var(--ink-faint);}
.entries-toolbar-search button{background:none; border:none; padding:0; display:flex; cursor:pointer; color:var(--ink-faint); flex-shrink:0;}
.entries-toolbar-search svg{width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; flex-shrink:0;}
.entries-toolbar-box svg{width:14px; height:14px; stroke:var(--ink-faint); flex-shrink:0;}
.entries-toolbar-spacer{flex:1;}

.entries-list-head{display:flex; align-items:center; gap:12px; padding:9px 16px; border-bottom:1px solid var(--line); font-size:11px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.02em;}
.entries-row{display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line);}
.entries-row:last-child{border-bottom:none;}
.entries-avatar{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; flex-shrink:0;}
.entries-cat-col{width:170px; flex-shrink:0;}
.entries-date-col{width:90px; flex-shrink:0; font-size:12.5px; color:var(--ink-soft);}
.entries-amt-col{width:90px; flex-shrink:0; text-align:right;}
.entries-actions-col{width:60px; flex-shrink:0; display:flex; justify-content:flex-end; align-items:center; gap:2px;}
.entries-badge{display:inline-flex; align-items:center; max-width:100%; font-size:12px; font-weight:600; padding:4px 9px; border-radius:99px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.entries-row-meta-mobile{display:none;}

/* ---------- Fixkosten-Tab: KPI-Karten, Warnbanner, Reiter, Tabelle ---------- */
.fx-meta{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint); margin:20px 0 18px;}

.fx-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px;}
.fx-kpi{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
.fx-kpi--primary{box-shadow:inset 3px 0 0 var(--income);}
.fx-kpi-label{font-size:12.5px; color:var(--ink-soft); margin-bottom:8px;}
.fx-kpi-value{font-size:24px; font-weight:600; color:var(--ink);}
.fx-kpi-hint{font-size:12px; color:var(--ink-faint); margin-top:4px;}

.fx-banner{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--accent-soft); border:1px solid var(--accent); border-radius:14px; padding:14px 18px; margin-bottom:16px;}
.fx-banner-title{font-size:14px; font-weight:600; color:var(--accent);}
.fx-banner-text{font-size:13px; color:var(--ink-soft); margin-top:2px;}

.fx-tabs{display:flex; gap:22px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap;}
.fx-tab{background:none; border:none; cursor:pointer; font:inherit; color:var(--ink-faint); font-size:14px; font-weight:600; padding:0 0 10px; border-bottom:2px solid transparent; margin-bottom:-1px;}
.fx-tab:hover{color:var(--ink);}
.fx-tab.is-active{color:var(--ink); border-bottom-color:var(--income);}

.fx-list-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px; flex-wrap:wrap;}
.fx-list-title{font-size:16px; font-weight:600;}
.fx-list-count{font-size:12.5px; color:var(--ink-faint);}

.fx-row-head{display:flex; align-items:center; gap:16px; padding:9px 4px; border-bottom:1px solid var(--line); font-size:11px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.02em;}
.fx-row{display:flex; align-items:center; gap:16px; padding:14px 4px; border-bottom:1px solid var(--line);}
.fx-row:last-child{border-bottom:none;}
.fx-row.is-hidden{display:none;}
.fx-col-name{flex:1; min-width:0;}
.fx-col-amount{width:150px; flex-shrink:0;}
.fx-col-due{width:190px; flex-shrink:0;}
.fx-col-action{width:148px; flex-shrink:0; text-align:right;}
.fx-name{font-weight:500; font-size:14.5px;}
.fx-cat{font-size:12.5px; color:var(--ink-faint); margin-top:2px;}
.fx-amount{font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:600; font-size:14.5px;}
.fx-rhythm{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.fx-due{font-size:13.5px;}
.fx-status{font-size:12.5px; font-weight:600; margin-top:2px;}
.fx-status--review{color:var(--accent);}
.fx-status--upcoming{color:var(--ink-faint);}
.fx-status--matched{color:var(--income);}
.fx-status--double{color:var(--expense);}
.fx-row-meta-mobile{display:none; font-size:12.5px; color:var(--ink-faint); margin-top:3px;}

.fx-footer{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft);}

@media (max-width: 760px){
  .fx-kpis{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .fx-kpis{grid-template-columns:1fr;}
  .fx-col-amount, .fx-col-due{display:none;}
  .fx-row-meta-mobile{display:block;}
}

.group-detail{padding:2px 4px 18px 4px;}
.group-balance{padding:12px 14px; background:var(--surface-2); border-radius:10px; margin-bottom:14px;}
.month-summary{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px;}
.due-period-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:6px;}
.due-period-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:600; margin-bottom:7px; padding-bottom:6px; border-bottom:1px solid var(--line);}
.due-period-head .num{font-size:12.5px; text-transform:none; letter-spacing:normal; color:var(--accent); font-weight:600;}
.ms-item{display:flex; flex-direction:column; gap:2px;}
.ms-label{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:600;}
.ms-item .num{font-size:14px; font-weight:600;}
.group-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.section-title-sm{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:600; margin-bottom:7px;}
.mini-row{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
.mini-row:last-child{border-bottom:none;}
.fc-mini-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
.fc-mini-row:last-child{border-bottom:none;}
.fc-mini-left{display:flex; align-items:center; gap:6px; min-width:0;}
.fc-mini-date{color:var(--ink-faint); font-size:11px; white-space:nowrap; flex-shrink:0;}
.fc-mini-name{text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.fc-mini-amt{text-align:right; white-space:nowrap; flex-shrink:0;}

/* Stats */
.chart-card{padding:20px; margin-bottom:16px;}
.legend{display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:14px;}
.legend-item{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft);}
.legend-dot{width:9px;height:9px;border-radius:2px;}
.bar-chart-wrap{display:flex; gap:10px; align-items:flex-start;}
.bar-chart-axis{display:flex; flex-direction:column; justify-content:space-between; flex-shrink:0; height:180px; margin-top:10px; text-align:right; font-size:11px; color:var(--ink-faint);}
.bar-chart-plot{position:relative; flex:1; min-width:0;}
.bar-chart-gridlines{position:absolute; top:10px; left:0; right:0; height:180px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none;}
.bar-chart-gridline{border-top:1px solid var(--line);}
.bar-chart-today-line{position:absolute; top:10px; height:180px; width:0; border-left:1.5px dashed var(--ink-faint); pointer-events:none; z-index:1;}
.bar-chart{display:flex; align-items:flex-end; gap:6px; height:180px; padding-top:10px; position:relative; z-index:2;}
.bar-chart-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0;}
.bar-chart-bars{display:flex; align-items:flex-end; gap:2px; height:100%; width:100%; justify-content:center;}
.bar-chart-bar{width:40%; border-radius:3px 3px 0 0; min-height:2px;}
.bar-chart-bar.income{background:var(--income);}
.bar-chart-bar.expense{background:var(--expense);}
.bar-chart-label{font-size:10px; color:var(--ink-faint); margin-top:6px; white-space:nowrap;}

.tag{display:inline-block; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600;}
.tag.income{background:var(--income-soft); color:var(--income);}
.tag.expense{background:var(--expense-soft); color:var(--expense);}

/* Landing */
.hero{
  text-align:center; padding:56px 24px 44px; margin:0 -40px 46px;
  background:#ffffff;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:99px;
  background:var(--surface); border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--income);
  margin-bottom:20px;
}
.hero-badge svg{width:14px;height:14px; stroke:currentColor; stroke-width:2;}
.hero-title{font-size:48px; font-weight:560; margin:0 0 16px; line-height:1.1;}
.hero-sub{font-size:16px; color:var(--ink-soft); max-width:560px; margin:0 auto 30px; line-height:1.5;}
.hero-cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.hero-cta{padding:13px 26px; font-size:15px; border-radius:12px;}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.feature-item{background:var(--surface); border-radius:12px; padding:14px 16px 16px;}
.feature-img{height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:8px;}
.feature-img img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.feature-item h3{font-size:13.5px; font-weight:600; margin:0 0 3px; font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;}
.feature-item p{font-size:12px; color:var(--ink-faint); margin:0; line-height:1.4;}

/* Onboarding */
.onboarding-wrap{max-width:640px; margin:0 auto;}
.onboarding-progress{display:flex; align-items:flex-start; margin-bottom:22px;}
.onb-dot{display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; min-width:0;}
.onb-line{flex:1 1 0; height:2px; background:var(--line); margin-top:12px; min-width:8px; transition:background .15s;}
.onb-line.done{background:var(--income);}
.onb-dot-num{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1.5px solid var(--line); color:var(--ink-faint); font-size:12px; font-weight:600; flex-shrink:0;
  transition:all .15s;
}
.onb-dot.active .onb-dot-num{width:30px; height:30px; background:var(--surface); border:2px solid var(--income); color:var(--income);}
.onb-dot.done .onb-dot-num{background:var(--income); border-color:var(--income); color:#fff;}
.onb-dot.done .onb-dot-num svg{width:13px; height:13px; stroke-width:3;}
.onb-dot-label{font-size:10.5px; color:var(--ink-faint); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:64px;}
.onb-dot.active .onb-dot-label{color:var(--ink); font-weight:600;}
.onboarding-card{padding:26px 28px;}
.onboarding-step-actions{display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:10px; flex-wrap:wrap;}

/* Auth (Login/Registrierung) */
.auth-wrap{max-width:380px; margin:36px auto; padding:0 16px;}
.auth-card{padding:26px 24px; border-radius:18px;}
.auth-card h1{font-family:'Fraunces',serif; font-weight:700; font-size:23px; margin:0 0 12px;}
.auth-sub{color:var(--ink-soft); font-size:13px; line-height:1.45; margin:0 0 16px;}
.auth-card .field{margin-bottom:12px;}
.auth-card .field label{font-size:12.5px; text-transform:none; letter-spacing:normal; font-weight:700; color:var(--ink);}
.auth-card input[type=text],.auth-card input[type=password],.auth-card input[type=email]{
  padding:9px 11px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); font-size:13.5px;
}
.auth-card .password-field input{padding-right:38px;}
.auth-card .btn-primary{width:100%; justify-content:center; padding:10px; border-radius:11px; font-size:13.5px; font-weight:700; margin-top:2px;}
.auth-foot{display:flex; align-items:center; gap:10px; margin-top:18px; font-size:12.5px; color:var(--ink-soft);}
.auth-foot::before, .auth-foot::after{content:''; flex:1; height:1px; background:var(--line);}
/* Registrierung: Fortschrittsbalken + Label oben, zwei Schritt-Karten darunter. */
.reg-progress-row{display:flex; align-items:center; gap:10px; margin:0 0 14px;}
.reg-progress-track{flex:1; height:4px; border-radius:99px; background:var(--line); overflow:hidden;}
.reg-progress-fill{height:100%; background:var(--income); border-radius:99px; transition:width .2s ease;}
.reg-progress-label{font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap;}
.register-steps{display:flex; gap:8px; margin:0 0 14px;}
.rs-card{flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line);}
.rs-num{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; font-family:'IBM Plex Mono',monospace;
  background:var(--surface); border:1.4px solid var(--line); color:var(--ink-faint);
}
.rs-num svg{width:11px; height:11px; stroke:currentColor; stroke-width:3;}
.rs-text{min-width:0;}
.rs-text strong{font-size:11.5px; font-weight:700; color:var(--ink); line-height:1.3;}
.rs-card.is-active{background:var(--income); border-color:var(--income);}
.rs-card.is-active .rs-num{background:#fff; border-color:#fff; color:var(--income);}
.rs-card.is-active .rs-text strong{color:#fff;}
.rs-card.is-done .rs-num{background:var(--income); border-color:var(--income); color:#fff;}
.rs-card.is-done .rs-text strong{color:var(--income);}
.consent-check{display:flex; gap:10px; align-items:flex-start; margin:0 0 12px; font-size:13px; line-height:1.45; color:var(--ink-soft); cursor:pointer;}
.consent-check input[type=checkbox]{width:17px; height:17px; margin:1px 0 0; flex-shrink:0; accent-color:var(--income); cursor:pointer;}
.consent-check a{color:var(--income); font-weight:600;}
.consent-required, .consent-optional{color:var(--ink-faint); white-space:nowrap;}
.auth-foot a{color:var(--income); font-weight:600; text-decoration:none;}
.flash{padding:11px 14px; border-radius:10px; font-size:13.5px; margin-bottom:16px;}
.flash-error{background:var(--expense-soft); color:var(--expense);}
.flash-success{background:var(--income-soft); color:var(--income);}
.field-hint{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.password-field{position:relative;}
.password-field input{width:100%; padding-right:38px;}
.password-toggle{position:absolute; top:50%; right:6px; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:5px; display:flex; border-radius:6px;}
.password-toggle:hover{color:var(--ink);}
.password-toggle svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.8;}

/* Führendes Icon links im Eingabefeld (Benutzername/Passwort auf register.php). */
.input-icon{position:relative;}
.input-icon > svg{position:absolute; top:50%; left:12px; transform:translateY(-50%); width:15px; height:15px; stroke:var(--ink-faint); stroke-width:1.8; fill:none; pointer-events:none;}
.auth-card .input-icon input{padding-left:34px;}

/* Grüne Box um die Passwort-Anforderungen (nur register.php) — anderswo bleibt .pw-checklist
   ohne Box, damit reset_password.php/force_password_change.php nicht extra Markup brauchen. */
.pw-requirements{background:var(--income-soft); border-radius:10px; padding:10px 12px; margin-top:2px;}
.pw-requirements-title{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--income); margin:0 0 8px;}
.pw-requirements-title svg{width:14px; height:14px; stroke:var(--income); stroke-width:2; fill:none; flex-shrink:0;}
.pw-checklist{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink-faint);}
.pw-requirements .pw-checklist{margin-top:0;}
.pw-checklist li{display:flex; align-items:center; gap:7px; transition:color .15s;}
.pw-checklist li .pw-dot{width:15px; height:15px; border-radius:50%; border:1.6px solid var(--line); background:var(--surface-2); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s;}
.pw-checklist li .pw-dot svg{width:9px; height:9px; stroke:#fff; stroke-width:3;}
.pw-checklist li .pw-icon-ok, .pw-checklist li .pw-icon-bad{display:none; align-items:center; justify-content:center;}
.pw-checklist li.ok{color:var(--income);}
.pw-checklist li.ok .pw-dot{background:var(--income); border-color:var(--income);}
.pw-checklist li.ok .pw-icon-ok{display:flex;}
.pw-checklist li.bad{color:var(--expense);}
.pw-checklist li.bad .pw-dot{background:var(--expense); border-color:var(--expense);}
.pw-checklist li.bad .pw-icon-bad{display:flex;}
.no-spinner{-moz-appearance:textfield;}
.no-spinner::-webkit-inner-spin-button, .no-spinner::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}

/* Responsive */
@media (max-width: 860px){
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  main{padding:26px 24px 70px;}
  .hero{margin:0 -24px 36px; padding:44px 20px 34px;}
  .hero-title{font-size:34px;}
  .feature-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .topbar{padding:8px 12px; gap:8px; padding-top:max(8px, env(safe-area-inset-top));}
  .brand-name{display:none;}
  .nav-item{padding:9px; gap:0;}
  .nav-item span{display:none;}
  .nav-item svg{width:18px;height:18px;}
  main{padding:18px 14px calc(60px + env(safe-area-inset-bottom));}
  .form-grid{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr;}
  .balance-amt{font-size:34px;}
  .head-actions{width:100%;}
  .head-actions .btn{flex:1; justify-content:center;}
  .group-cols{grid-template-columns:1fr; gap:14px;}
  .due-period-grid{grid-template-columns:1fr; gap:16px;}
  .month-summary{grid-template-columns:repeat(2,1fr); gap:10px;}
  .hero{margin:0 -14px 28px; padding:36px 16px 28px;}
  .hero-title{font-size:28px;}
  .feature-grid{grid-template-columns:1fr;}
  .onboarding-card{padding:20px 16px;}
  .onb-dot-label{display:none;}
  /* Verhindert automatisches Auto-Zoom von iOS Safari bei Feldern mit font-size < 16px */
  input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],input[type=email],select,textarea{font-size:16px;}
  /* goals.php: Liste/Galerie-Umschalter ist auf dem Handy nicht wählbar — zeigt dort immer
     die Liste (Galerie ist ohnehin zu eng für schmale Bildschirme). */
  .goals-view-toggle{display:none;}
  /* finances.php: KPI-Karten zweispaltig statt vierspaltig, Toolbar-Felder über volle Breite. */
  .entries-kpis{grid-template-columns:1fr 1fr;}
  .entries-toolbar-field{flex:1 1 140px;}
  .entries-toolbar-spacer{display:none; flex-basis:100%;}
  /* Kategorie-/Datum-Spalten der Liste weichen der kompakten Meta-Zeile unter dem Namen. */
  .entries-cat-col, .entries-date-col{display:none;}
  .entries-row-meta-mobile{display:block;}
  .entries-list-head .entries-cat-col, .entries-list-head .entries-date-col{display:none;}
}
@media (max-width: 400px){
  .brand-mark{height:36px; width:auto;}
  .nav-item{padding:8px 7px;}
}

/* Feedback-Button: fixer Kreis-Button unten rechts auf jeder Seite */
.feedback-fab{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom)); width:50px; height:50px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  text-decoration:none; z-index:80; transition:transform .1s, color .1s;
}
.feedback-fab:hover{color:var(--expense); transform:scale(1.06);}
.feedback-fab svg{width:22px; height:22px; stroke-width:1.8;}
.feedback-fab-badge{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px; border-radius:99px;
  background:var(--expense); color:#fff; font-size:10.5px; font-weight:700; line-height:18px; text-align:center;
}

/* Rechtstexte: Impressum, Datenschutz, AGB */
.legal-page{max-width:740px; margin:0 auto;}
.legal-page h1{font-family:'Fraunces',serif; font-size:30px; font-weight:560; margin:0 0 6px;}
.legal-page .legal-updated{color:var(--ink-faint); font-size:12.5px; margin-bottom:22px;}
.legal-page h2{font-size:18px; font-weight:600; margin:30px 0 10px;}
.legal-page h2:first-of-type{margin-top:0;}
.legal-page p{margin:0 0 12px; line-height:1.6;}
.legal-page ul{margin:0 0 12px; padding-left:20px; line-height:1.6;}
.legal-page li{margin-bottom:4px;}
.legal-page .legal-table-wrap{overflow-x:auto; margin:0 0 14px;}
.legal-page table{width:100%; min-width:560px; border-collapse:collapse; font-size:13px; line-height:1.45;}
.legal-page th, .legal-page td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top;}
.legal-page th{background:var(--surface-2); font-weight:600;}
.legal-page .legal-placeholder{background:var(--accent-soft); color:var(--accent); padding:1px 6px; border-radius:5px; font-weight:600;}
.legal-page .legal-notice{background:var(--expense-soft); border:1px solid var(--expense); border-radius:var(--radius); padding:14px 16px; margin-bottom:26px; font-size:13.5px; line-height:1.55;}

/* Footer mit Links zu den Rechtstexten + Copyright, auf jeder Seite unten */
.site-footer{
  display:flex; flex-direction:column; gap:6px; align-items:center;
  padding:20px 24px calc(20px + env(safe-area-inset-bottom)); font-size:12.5px; color:var(--ink-faint);
}
.site-footer-links{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
.site-footer a{color:var(--ink-faint); text-decoration:none;}
.site-footer a:hover{color:var(--ink-soft); text-decoration:underline;}
.site-footer-copy{font-size:11.5px; color:var(--ink-faint);}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line); padding:12px 4px;}
.faq-item:last-child{border-bottom:none;}
.faq-question{font-size:14px; font-weight:600;}
.faq-answer{margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--ink-soft);}

/* An/Aus-Schalter (z. B. Debug-Modus im Admin-Bereich) */
.toggle-switch{position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; cursor:pointer;}
.toggle-switch input{opacity:0; width:0; height:0; position:absolute;}
.toggle-slider{position:absolute; inset:0; background:var(--line); border-radius:99px; transition:background .15s;}
.toggle-slider:before{content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.25);}
.toggle-switch input:checked + .toggle-slider{background:var(--income);}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(18px);}
.toggle-switch input:focus-visible + .toggle-slider{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--income);}

/* Cookie-Hinweis: blockierender Milchglas-Overlay, Banner am unteren Rand */
.cookie-consent-overlay{position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-end; justify-content:center;}
.cookie-consent-backdrop{position:absolute; inset:0; background:rgba(20,24,21,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.cookie-consent-banner{
  position:relative; width:100%; max-width:640px; margin:0 16px calc(16px + env(safe-area-inset-bottom));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 24px;
}
.cookie-consent-title{font-family:'Fraunces',serif; font-size:18px; font-weight:600; margin-bottom:8px;}
.cookie-consent-banner p, .cookie-consent-banner .cookie-consent-text{font-size:13.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 18px;}
.cookie-consent-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
@media (max-width:520px){
  .cookie-consent-banner{margin:0; border-radius:var(--radius) var(--radius) 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom));}
  .cookie-consent-actions{justify-content:stretch;}
  .cookie-consent-actions .btn{flex:1; justify-content:center;}
}