/* Auswanderung 2030 Dashboard - Light Theme (warm, kontrastiert) */
:root {
  --bg: #ebeef2;             /* etwas dunklerer Page-BG */
  --bg-elev: #ffffff;
  --bg-elev-2: #f3f5f8;
  --border: #d8dde3;
  --border-strong: #c4cbd2;
  --text: #0f172a;
  --text-2: #334155;
  --text-muted: #64748b;
  --accent: #1e3a5f;
  --accent-light: #dde5ef;
  --success: #15803d;
  --success-light: #dcfce7;
  --warn: #c2410c;
  --warn-light: #fff1e6;
  --danger: #b91c1c;
  --target-band: rgba(21, 128, 61, 0.10);
  --target-line: #15803d;
  --projection: rgba(30, 58, 95, 0.55);
  --actual: #1e3a5f;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;  /* Keine horizontale Scroll-Leiste auf Page-Level */
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
img, canvas, svg { max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0 0 0.4em 0;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
h1 { font-size: 1.55em; }
h2 { font-size: 1.35em; }
h3 { font-size: 1em; }

.muted { color: var(--text-muted); }
.small { font-size: 0.85em; }

/* TOPBAR (schlank, ohne KPI) */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.topbar-left .subtitle {
  margin: 2px 0 0 0;
  color: var(--text-muted);
  font-size: 0.9em;
}
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
/* Header-Controls einheitlich (DESKTOP): gleiche Hoehe (36px) + gleicher Abstand (8px Flex-Gap)
   fuer Waehrungs-Toggle, Download-Button, Privacy-Toggle. Vorher war der Download-Button 48px hoch
   (padding 12/22) und warf Hoehe + Rhythmus durcheinander. Mobile wird im 820px-Block geregelt
   (eigenes Kompakt-Icon-Design), darum hier auf Desktop scopen. */
@media (min-width: 821px) {
  .topbar-right .currency-toggle,
  .topbar-right .export-btn-secondary,
  .topbar-right .privacy-toggle { height: 36px; min-height: 36px; margin: 0; box-sizing: border-box; }
  .topbar-right .export-btn-secondary { width: 36px; min-width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .topbar-right .privacy-toggle { width: 36px; min-width: 36px; }
}
.kids-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elev-2);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.kids-toggle-label {
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.kids-toggle-buttons {
  display: flex;
  gap: 2px;
  background: var(--bg-elev);
  border-radius: 6px;
  padding: 2px;
  border: 1px solid var(--border);
}
.kids-btn {
  padding: 4px 14px;
  background: transparent;
  color: var(--text-2);
  border: none;
  border-radius: 4px;
  font-size: 0.95em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.kids-btn:hover { background: var(--bg-elev-2); }
.kids-btn.active {
  background: var(--accent);
  color: #fff;
}

/* LIFESTYLE TOGGLE (Survival / Normal / Luxus) - Optik identisch zu kids-toggle */
.lifestyle-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elev-2);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.lifestyle-buttons {
  display: flex;
  gap: 2px;
  background: var(--bg-elev);
  border-radius: 6px;
  padding: 2px;
  border: 1px solid var(--border);
}
.lifestyle-btn {
  padding: 4px 14px;
  background: transparent;
  color: var(--text-2);
  border: none;
  border-radius: 4px;
  font-size: 0.95em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s, color 0.12s;
}
.lifestyle-btn:hover { background: var(--bg-elev-2); }
.lifestyle-survival.active { background: #dc2626; color: #fff; }
.lifestyle-normal.active   { background: var(--accent); color: #fff; }
.lifestyle-luxus.active    { background: #d4a017; color: #fff; }

/* GRID */
.grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 20px;
  padding: 22px 32px;
}
.col {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  min-height: 360px;
  min-width: 0;            /* erlaubt Schrumpfen im Grid (verhindert Überlauf) */
  box-shadow: var(--shadow-sm);
  overflow-wrap: break-word;
}

/* Legende Länder-Ranking - dezent, keine Kachel, keine Trennlinie, ganz unten */
.col-ranking { display: flex; flex-direction: column; }

/* Desktop: Kosten/Steckbrief NICHT auf Ranking-Hoehe strecken (V5-MEDIUM 2026-07-05).
   Die lange Ranking-Spalte (28 Laender ~2118px) streckte via Grid-Default stretch die
   beiden anderen .col-Kacheln mit -> ~630-1000px leere Box unter dem Inhalt.
   align-self:start laesst sie auf ihre Content-Hoehe schrumpfen. sticky waere hier FALSCH,
   weil beide Spalten (Kosten ~1097px, Steckbrief ~1508px) hoeher als der Viewport sind und
   ihr unteres Ende dann dauerhaft unter dem Fold festklemmen wuerde. */
@media (min-width: 769px) {
  .col-costs, .col-info { align-self: start; }
}
.ranking-legende {
  /* mehr Abstand zum letzten Land (ohne Trennlinie - die störte) */
  margin-top: 28px;
  padding: 0 0 0 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.ranking-legende .legende-titel {
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ranking-legende .legende-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.ranking-legende .legende-list li { display: flex; align-items: baseline; gap: 8px; font-size: 0.74em; color: var(--text-muted); line-height: 1.45; }
.ranking-legende .legende-sym { display: inline-block; min-width: 44px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.5px; }
.ranking-legende .legende-text { color: var(--text-muted); }

/* Vergleich Weltkarte (rechte Spalte der Ländervergleich-Box) - v2.126 statt Cost-Chart */
.vergleich-map-block {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}
.vergleich-map-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vergleich-map-header strong { font-size: 0.9em; color: var(--text); }
/* Container exakt im Welt-Mercator-Aspect: lng=-170..178 (348° linear) + lat=-56..72
   (in Web-Mercator ΔY≈3.03·R, X-Range≈6.08·R) → Aspect ~2.0. fitBounds-padding=0 (JS)
   sorgt dafuer, dass die Welt buendig in den Container passt - kein Ueberstand. */
.vergleich-map-wrap { position: relative; width: 100%; aspect-ratio: 2 / 1; }
.vergleich-map { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: #d7e7f5; z-index: 0; }
.vergleich-map .leaflet-container { height: 100%; width: 100%; font: inherit; background: #d7e7f5; }
.vergleich-map .leaflet-tooltip { font-size: 0.78em; }

/* VERGLEICH (Kriterium × Länder, Mini-Bar-Chart) - volle Breite unter den 3 Spalten */
.vergleich-wrap { padding: 0 18px; margin-top: 8px; }
.phase > .vergleich-wrap { padding: 0; margin-top: 18px; }
.vergleich-wrap .vergleich-laender { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* Layout: links Hauptbereich (Selects + Tabelle), rechts (volle Höhe) das Cost-Chart */
.vergleich-wrap .vergleich-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.vergleich-wrap .vergleich-main { min-width: 0; }
.vergleich-wrap .vergleich-side { min-width: 0; display: flex; flex-direction: column; align-self: start; }
/* Die beiden Auswahlfelder nebeneinander */
.vergleich-wrap .vergleich-selects {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
  align-items: start;
}
.vergleich-wrap .vergleich-row-block { margin-bottom: 0; min-width: 0; }
@media (max-width: 900px) {
  .vergleich-wrap .vergleich-layout { grid-template-columns: 1fr; }
}
.vergleich-box {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.vergleich-box .vergleich-bars:not(:empty) {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.vergleich-title { margin: 0; font-size: 1.25em; font-weight: 700; color: var(--text); }
.vergleich-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px 0; }
.vergleich-reset-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.vergleich-reset-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-elev-2); }
.vergleich-reset-btn:active { transform: translateY(1px); }
.vergleich-row-block { margin-bottom: 10px; }

/* Export als kleiner Icon-Button neben Reset (im Titel-Row) */
.vergleich-title-actions { display: flex; align-items: center; gap: 8px; }
.vergleich-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); cursor: pointer; padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.vergleich-icon-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-elev-2); }
.vergleich-icon-btn:active { transform: translateY(1px); }
.vergleich-export-hint { color: var(--accent); white-space: nowrap; }
.vergleich-label {
  display: block;
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.vergleich-row-block select { width: 100%; max-width: none; }
.vergleich-multiselect { position: relative; }
.vergleich-multiselect-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.88em;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  line-height: 1;
  box-sizing: border-box;
}
.vergleich-row-block .cost-control-select { height: 34px; line-height: 1; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.vergleich-multiselect-btn:hover { border-color: var(--accent); }
.vergleich-multiselect-caret { font-size: 0.75em; opacity: 0.7; margin-left: 8px; }
.vergleich-multiselect-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15));
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.vergleich-multiselect-actions { display: flex; gap: 4px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.vergleich-mini-btn {
  font-size: 0.74em;
  padding: 3px 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-2);
  font-family: inherit;
}
.vergleich-mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.vergleich-laender { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.vergleich-check {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82em; color: var(--text-2);
  cursor: pointer; user-select: none;
}
.vergleich-check input[type=checkbox] { accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }
/* 1 Zeile pro Eintrag: lange Labels kuerzen (voller Text bleibt als title-Tooltip) */
.vergleich-check { min-width: 0; }
.vergleich-check span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Gruppen-Ueberschriften + Trennstrich im Kriterien-Dropdown (volle Breite im 2-Spalten-Grid) */
.vergleich-group-head {
  grid-column: 1 / -1; margin: 2px 0 1px;
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-2);
}
.vergleich-group-head-socio { color: var(--accent); }
.vergleich-group-head-sonstiges { color: var(--text-muted); }
.vergleich-group-tag {
  font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.9em;
  color: var(--accent); background: var(--accent-light);
  padding: 1px 6px; border-radius: 6px; margin-left: 6px;
}
.vergleich-group-sep { grid-column: 1 / -1; border-top: 1px solid var(--border); margin: 6px 0 2px; }
.vergleich-check-socio span { color: var(--accent); }
/* On-Page Info-Sektion je Sozio-Faktor (kein Score/Balken) */
.vergleich-socio-heading { display: flex; align-items: center; gap: 8px; }
.vergleich-socio-badge {
  font-size: 0.6em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); background: var(--accent-light); padding: 1px 7px; border-radius: 10px;
}
.vergleich-socio-table { width: 100%; border-collapse: collapse; font-size: 0.85em;
  border-left: 3px solid var(--accent-light); }
.vergleich-socio-table td { padding: 5px 8px 5px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.vergleich-socio-land { white-space: nowrap; width: 1%; font-weight: 600; color: var(--text); }
.vergleich-socio-val { color: var(--text-2); line-height: 1.35; }
.vergleich-socio-src { display: block; font-size: 0.82em; color: var(--text-muted); margin-top: 2px; }
.vergleich-socio-warn { color: #b8860b; cursor: help; }
.vergleich-bars { display: flex; flex-direction: column; gap: 10px; }
.vergleich-text-row { padding: 8px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; }
.vergleich-text-land { font-size: 0.88em; margin-bottom: 4px; }
.vergleich-text-land strong { color: var(--text); }
.vergleich-text-comment { font-size: 0.82em; color: var(--text-2); line-height: 1.4; }

.vergleich-bars { margin-top: 18px; }
/* Ueberschrift je Kriterium-Sektion (Multi-Select-Vergleich) */
.vergleich-krit-heading {
  margin: 14px 0 6px;
  font-size: 0.95em;
  font-weight: 700;
  color: var(--accent);
}
.vergleich-bars > .vergleich-krit-heading:first-child { margin-top: 2px; }
.vergleich-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
  table-layout: fixed;   /* feste Spaltenbreiten -> alle Vergleichs-Tabellen (Kriterien + Sozio) fluchten identisch */
}
.vergleich-table thead th,
.vergleich-table tbody td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.vergleich-table thead th {
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 10px;
}
.vergleich-table tbody td { padding: 8px 10px; }
.vergleich-table tbody tr:last-child td { border-bottom: none; }
.vergleich-table tr.vergleich-tr-grouped td { border-bottom: none; padding-top: 2px; }
/* Land + Score auf Content-Breite kollabieren, Bewertung füllt den Rest */
.vergleich-table th:nth-child(1),
.vergleich-table td:nth-child(1) { width: 130px; padding-right: 12px; }
.vergleich-table th:nth-child(2),
.vergleich-table td:nth-child(2) { width: 60px; padding-right: 16px; }
.vergleich-td-score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
}
.vergleich-td-score.score-gruen { color: #15803d; }
.vergleich-td-score.score-gelb  { color: #ca8a04; }
.vergleich-td-score.score-rot   { color: #b91c1c; }
/* Sozio-Faktoren haben keinen Score -> "N/A" dezent statt Akzent/Bold */
.vergleich-td-score.vergleich-td-score-na { color: var(--text-muted); font-weight: 600; }
.vergleich-td-comment { color: var(--text-2); line-height: 1.5; width: auto; }
.vergleich-row {
  display: grid;
  grid-template-columns: 18px 1fr 28px;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
}
.vergleich-row .vergleich-bar {
  position: relative;
  height: 10px;
  background: var(--bg-elev);
  border-radius: 5px;
  overflow: hidden;
}
.vergleich-row .vergleich-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 5px;
}
.vergleich-row .vergleich-score { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

/* RANKING */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.country-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.country-card:hover { border-color: var(--accent); }
.country-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}
.country-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; gap: 12px;
}
.country-left { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0; }
.country-left .country-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-left .country-city { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
/* Überall Ländername zeigen, Stadt verstecken (Desktop + Mobile). */
.country-left .country-city { display: none; }
.country-rank {
  color: var(--text-muted); font-weight: 600;
  width: 22px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.country-flag { font-size: 1.3em; }
.country-name { font-weight: 600; }
.country-new-badge {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.72em;
  font-weight: 500;
  color: #f59e0b;
  vertical-align: middle;
  letter-spacing: 0;
  white-space: nowrap;
  font-style: italic;
}
.country-warning {
  font-size: 0.7em;
  color: var(--warn);
  background: var(--warn-light);
  border: 1px solid var(--warn);
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 8px;
  font-weight: 600;
}
.country-score { display: flex; align-items: center; gap: 8px; }
.score-bar {
  width: 70px; height: 5px;
  background: var(--bg-elev-2);
  border-radius: 3px;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ea580c, #facc15, #15803d);
  border-radius: 3px;
}
.score-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--success);
  min-width: 30px;
  text-align: right;
}
.score-value.score-gruen { color: #15803d; }
.score-value.score-gelb  { color: #ca8a04; }
.score-value.score-rot   { color: #b91c1c; }
/* Szenario-Ausnahme (z.B. Katzeneinfuhr bei 1 Person): neutral grau statt Ampel */
.score-value.score-excluded { color: #9ca3af; }
.criterion.criterion-excluded { opacity: 0.55; }
.criterion.criterion-excluded .criterion-comment { font-style: italic; }

/* Sparziel-Input innerhalb der Renten-KPI-Kachel: optisch wie Text, editierbar */
.budget-kpi-input {
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--border-strong);
  width: 82px;
  padding: 0 2px;
  text-align: left;
  -moz-appearance: textfield;
}
/* Etwas breiter für Tausenderpunkte (z.B. „1.000.000") */
.budget-kpi-input-wide { width: 112px; }
.budget-kpi-input::-webkit-outer-spin-button,
.budget-kpi-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.budget-kpi-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.budget-kpi-input-suffix { margin-left: 4px; }
/* P2P-Ausfaelle: Zahl, Symbol und Datum bewusst gedaempft (grau) - sekundaeres Eingabefeld. */
.p2p-loss-field { color: var(--text-muted); }
.p2p-loss-field::placeholder { color: var(--text-muted); opacity: 0.7; }
/* Datumsfeld: 7 Zeichen "MM/JJJJ" -> kleinere Schrift, damit nichts abgeschnitten wird. */
#p2p-loss-date, #p2p-recovery-date { font-size: 0.74em; }
.p2p-loss-controls .budget-kpi-input-suffix { color: var(--text-muted); }
.budget-kpi-save-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  width: 22px; height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.budget-kpi-save-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-elev-2); }
.budget-kpi-save-btn.saved { color: #16a34a; border-color: #16a34a; }
.budget-kpi-save-btn:active { transform: translateY(1px); }
.country-card.expanded .country-details { display: block; }
.country-details {
  display: none;
  padding: 6px 14px 14px;
  border-top: 1px solid var(--border);
}
.criterion {
  display: grid;
  grid-template-columns: 1fr 30px;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: 0.9em;
}
.criterion-name { color: var(--text); }
.criterion-comment {
  color: var(--text-muted);
  font-size: 0.84em;
  grid-column: 1 / -1;
  margin: -2px 0 4px 0;
}
.criterion-group-title {
  grid-column: 1 / -1;
  margin: 10px 0 4px 0;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.fazit {
  margin: 14px 0 20px 0;
  padding: 12px 14px;
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 0.92em;
  grid-column: 1 / -1;
  color: var(--text);
}
.fazit-gruen { background: rgba(34, 197, 94, 0.12); border-left-color: #22c55e; }
.fazit-gelb  { background: rgba(234, 179, 8, 0.14); border-left-color: #eab308; }
.fazit-rot   { background: rgba(220, 38, 38, 0.12); border-left-color: #dc2626; }
.fazit-abwerter {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed rgba(15,23,42,0.2);
  font-size: 0.9em; color: var(--text-2);
}
.fazit-abwerter strong { color: #b91c1c; }

/* COSTS COLUMN */
.cost-controls {
  /* Wrapper (transparent): zwei graue Boxen mit Karte dazwischen */
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.cost-control-box {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  background: var(--bg-elev-2);
  border-radius: 8px;
}
.cost-map {
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elev-2);
  z-index: 0;  /* Leaflet-Panes nicht ueber andere UI legen */
}
.cost-map .leaflet-container { height: 100%; width: 100%; font: inherit; }
/* EUER-Sync laeuft vollautomatisch (Boot + nach jeder Aenderung debounced).
   Toast unten rechts zeigt "Synced" 1.8s nach erfolgreichem Sync, dann fade-out. */
.sync-toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(30, 58, 95, 0.92); color: #fff; /* v2.136: EUR-Blau #1e3a5f */
  font-size: 0.8em; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sync-toast.is-visible { opacity: 1; transform: translateY(0); }
.hidden-chip-score { font-style: italic; font-weight: 600; margin-left: 4px; }
/* Entnahme-Info ueber dem Renten-Chart (v2.127): Lebenshaltung aus Phase 1 als Entnahmebetrag.
   Sitzt zwischen den Slidern und der Chart-Legende. */
.renten-entnahme-info {
  margin: 12px 4px 8px;
  padding: 10px 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-size: 0.92em;
}
.renten-entnahme-info strong { color: var(--text); }
/* Slider (ETF-Rendite + DE-Rente) kompakt im grauen Kasten, vertikal gestapelt (v2.164.7) */
/* Grid statt Flex: feste Label-Spalte + gleiche Slider-Spalte -> Slider UND Werte fluchten
   spaltengenau untereinander (unterschiedlich lange Labels verschieben nichts mehr). */
.renten-ctrl-row { display: grid; grid-template-columns: 250px 160px 1fr; align-items: center; gap: 10px; width: 100%; }
.renten-ctrl-row > strong { min-width: 0; }
.renten-ctrl-row .budget-rate-slider { width: 100%; max-width: none; min-width: 0; }
.renten-ctrl-row .budget-rate-value { font-weight: 600; }
@media (max-width: 700px) {
  /* Schmal: Label volle Breite (Zeile 1), darunter Slider (fest) + Wert -> fluchten weiter. */
  .renten-ctrl-row { grid-template-columns: 150px 1fr; }
  .renten-ctrl-row > strong { grid-column: 1 / -1; }
}
.renten-ctrl-divider { width: 100%; height: 1px; background: var(--border); margin: 2px 0 4px; }
.renten-entnahme-info #renten-entnahme-amount {
  font-weight: 700; color: var(--accent, #1e3a5f); font-size: 1.05em;
}
.hidden-chip-score.score-gruen { color: var(--score-gruen, #16a34a); }
.hidden-chip-score.score-gelb  { color: var(--score-gelb,  #ca8a04); }
.hidden-chip-score.score-rot   { color: var(--score-rot,   #dc2626); }
/* Leaflet-Footer aufraeumen: Ukraine-Flag-Link + "Leaflet"-Brand ausblenden, OSM-Credit behalten (policy-konform). */
.leaflet-control-attribution a[href*="ukraine"],
.leaflet-control-attribution a[href*="leafletjs.com"],
.leaflet-control-attribution a[href*="leaflet"] { display: none; }
.leaflet-control-attribution { font-size: 10px; }
.cost-control-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 10px;
}
.cost-control-label {
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}
.cost-control-select {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 0.88em;
  font-family: inherit;
}
/* Profil-Box (Umzug / Lifestyle / Personen) in der Lebenshaltungskosten-Spalte.
   Schlanke, kompakte Segmented-Controls: content-sized + linksbuendig, kleiner Font,
   NIE Zeilenumbruch ("Jan 2030" bleibt einzeilig). */
#profile-box { gap: 5px; padding: 8px 12px; }
#profile-box .cost-control-row { align-items: center; }
#profile-box .cost-control-row > .emig-year-toggle,
#profile-box .cost-control-row > .lifestyle-buttons,
#profile-box .cost-control-row > .kids-toggle-buttons {
  justify-self: start;
  padding: 2px;
  gap: 1px;
}
#profile-box .kids-btn,
#profile-box .lifestyle-btn {
  min-height: 0;   /* Touch-44px-Regel hier ueberschreiben -> schlanke Hoehe */
  min-width: 0;
  padding: 3px 10px;
  font-size: 0.78em;
  line-height: 1.5;
  white-space: nowrap;
}
#profile-box .cost-control-select { padding: 4px 8px; font-size: 0.82em; }
/* Umzug-Jahr-Toggle hat 5 Buttons (2029-2033) -> nimmt IMMER die volle Spaltenbreite ein und die
   Buttons teilen sich den Platz (flex:1, min-width:0). Verhindert den Grid-Blowout, bei dem der
   content-sized Toggle breiter als die 1fr-Spalte wurde und rechts aus der Profil-Box lief. */
#profile-box .cost-control-row > .emig-year-toggle {
  justify-self: stretch;
  max-width: 100%;
  min-width: 0;
}
#profile-box .emig-year-toggle .kids-btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}
/* Mobile: Segmented-Controls auf volle Breite (ruhige Kante zu den vollbreiten Selects darunter)
   + groessere Tap-Hoehe ~32px, damit sie nicht winzig neben den 38px-Dropdowns wirken. */
@media (max-width: 480px) {
  #profile-box .cost-control-row > .emig-year-toggle,
  #profile-box .cost-control-row > .lifestyle-buttons,
  #profile-box .cost-control-row > .kids-toggle-buttons {
    justify-self: stretch;
    width: 100%;
  }
  #profile-box .kids-btn,
  #profile-box .lifestyle-btn {
    flex: 1;
    min-height: 32px;
    font-size: 0.82em;
  }
}
.cost-control-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}
.cost-inline-input {
  width: 38px; min-width: 38px; max-width: 38px;
  padding: 1px 2px; border-radius: 3px;
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text);
  font-size: 0.95em; font-family: inherit; text-align: right;
  box-sizing: border-box;
}
.cost-inline-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-light); }
.cost-inline-input.overridden { border-color: var(--accent); font-weight: 600; }
.cost-inline-input::-webkit-outer-spin-button,
.cost-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cost-inline-input[type=number] { -moz-appearance: textfield; }
.cost-inline-reset {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.85em; padding: 0 2px;
}
.cost-inline-reset:hover { color: var(--text); }
/* Globaler Mini-Reset unter der Kostenliste */
.cost-breakdown li.cost-reset-all-row { justify-content: flex-end; border-bottom: none; padding-top: 8px; }
.cost-reset-all-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  color: var(--text-muted); font-size: 1em; line-height: 1; padding: 4px 8px;
}
.cost-reset-all-btn:hover { color: var(--text); border-color: var(--text-muted); background: var(--bg-elev-2); }

.auto-tile {
  margin-top: 18px; padding: 12px; border-radius: 8px;
  background: var(--bg-elev); border: 1px solid var(--border);
}
.lhk-jahr1-tile {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-elev); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lhk-jahr1-label { font-weight: 600; }
.lhk-jahr1-hint { flex-basis: 100%; margin-left: 0; text-align: left; }
.auto-tile-locked { opacity: 0.5; pointer-events: none; }
.auto-tile-header { display: flex; align-items: center; gap: 8px; }
.auto-tile-title { font-weight: 600; }
.auto-tile-body { margin-top: 8px; }
.auto-tile-body .cost-control-select { margin-top: 6px; }
.auto-tile-detail { margin-top: 10px; font-size: 0.88em; }
.auto-tile-row { display: flex; justify-content: space-between; padding: 2px 0; }
.auto-tile-row span { color: var(--text-muted); }
.auto-tile-markt {
  margin-top: 10px;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
  background: transparent;
  font-size: 0.85em;
  line-height: 1.45;
  color: var(--text-muted);
}
.auto-tile-markt + .auto-tile-markt { margin-top: 8px; }
.auto-tile-markt strong { color: var(--text); }
.cost-total {
  display: flex; justify-content: space-between; align-items: center;
  margin: 10px 0 12px;
  padding: 11px 14px;
  background: var(--accent-light);
  border-radius: 8px;
}
.cost-total-label {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.7em;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.cost-total-value {
  font-size: 1.7em;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.chart-box { position: relative; height: 220px; }
.cost-breakdown {
  list-style: none;
  padding: 0; margin: 12px 0 0 0;
}
.cost-breakdown li {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88em;
  font-variant-numeric: tabular-nums;
}
.cost-breakdown li:last-child { border-bottom: none; }
.cost-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.cost-breakdown li.excluded { opacity: 0.5; }
.cost-breakdown li.has-tooltip { position: relative; cursor: help; }
.cost-breakdown li.has-tooltip:hover { background: var(--bg-elev-2); border-radius: 4px; }
.cost-hint {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg-elev-2);
  border-radius: 6px;
  font-size: 0.8em;
  line-height: 1.4;
}

/* Custom Tooltip */
.cost-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 380px;
  background: #1f2937;
  color: #f1f5f9;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.83em;
  line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
.cost-tooltip.visible { opacity: 1; }
.cost-tooltip strong { color: #ffffff; display: block; margin-bottom: 4px; }
.cost-tooltip em { font-style: normal; color: #cbd5e1; }
.cost-tooltip .tt-quelle { color: #94a3b8; font-size: 0.85em; margin-top: 8px; padding-top: 8px; border-top: 1px solid #374151; }
.cost-tooltip .confidence-badge {
  display: inline-block;
  font-size: 0.85em;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.cost-tooltip .confidence-hoch    { background: #15803d; color: #fff; }
.cost-tooltip .confidence-mittel  { background: #c2410c; color: #fff; }
.cost-tooltip .confidence-niedrig { background: #b91c1c; color: #fff; }
.confidence-badge {
  display: inline-block;
  font-size: 0.7em;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.confidence-hoch    { background: var(--success-light); color: var(--success); border: 1px solid var(--success); }
.confidence-mittel  { background: var(--warn-light);    color: var(--warn);    border: 1px solid var(--warn); }
.confidence-niedrig { background: #fee2e2;              color: var(--danger);  border: 1px solid var(--danger); }

/* COUNTRY INFO */
.country-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;          /* erlaubt Schrumpfen unter Content-Min-Width */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.country-info * { max-width: 100%; }
.country-info ul { padding-left: 18px; margin: 4px 0; }
.country-info-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 18px 4px;
  text-align: center;
}
.info-block {
  background: var(--bg-elev-2);
  border-radius: 8px;
  padding: 10px 14px;
}
.info-block h4 {
  margin: 0 0 5px 0;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
}
.info-block .info-value { font-size: 0.92em; }
.info-row {
  display: flex; justify-content: space-between;
  padding: 3px 0;
  font-size: 0.9em;
}
.info-row.info-row-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.info-row.info-row-stacked .info-data {
  text-align: left; white-space: normal; overflow: visible; text-overflow: clip;
  margin-left: 0; width: 100%;
}
.info-row .info-label { color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
.info-wiki {
  display: inline-block;
  margin-left: 2px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85em;
  opacity: 0.6;
  transition: opacity 0.12s, color 0.12s;
}
.info-wiki:hover { color: var(--accent); opacity: 1; }
hr.visum-sep { border: none; border-top: 1px solid var(--border); margin: 16px 0 12px; }
.criterion-no-score { grid-template-columns: 1fr; }
.criterion-no-score .criterion-name { font-weight: 600; }
.criterion-no-score .criterion-comment { margin-top: 4px; }
.footer-version-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.9em;
  font-family: inherit;
  color: var(--accent);
  cursor: pointer;
  margin-left: 4px;
}
.footer-version-btn:hover { background: var(--accent-light); }
.visum-content { line-height: 1.55; }
.visum-section { padding: 6px 0 0; margin-bottom: 16px; }
.visum-section:last-child { margin-bottom: 0; }
.visum-section-kontext,
.visum-section-vorgehen {
  background: transparent;
  border: none;
  border-left: none;
}
.visum-section-label {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.de-cmp { font-size: 0.85em; margin-left: 4px; font-variant-numeric: normal; opacity: 0.85; }
.de-cmp-good { color: #16a34a; }
.de-cmp-bad  { color: #dc2626; }
.de-cmp-eq   { color: var(--text-muted); }
.info-row .info-data {
  font-variant-numeric: tabular-nums; text-align: left;
}
/* info-row-left: label + value in einer Zeile, beide links-ausgerichtet, label-spalte fix.
   Label-Spalte gerade breit genug für „Wirtschaftszweige"/„Staatschulden", Gap knapp,
   damit Werte nicht weit rechts driften. */
.info-row.info-row-left {
  justify-content: flex-start; gap: 8px;
}
.info-row.info-row-left .info-label {
  flex: 0 0 130px;
}
/* Tight-Variante: kürzere Labels (z.B. Anbindung „Flug"/„Preis") rücken die Werte näher an. */
.info-block-tight .info-row.info-row-left { gap: 6px; }
.info-block-tight .info-row.info-row-left .info-label { flex: 0 0 40px; }
.info-block-tight .info-row.info-row-left .info-data { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.info-row.info-row-left .info-data {
  flex: 1 1 auto; text-align: left; white-space: normal; word-break: break-word;
}
/* Kultur-Block: linksbündiger Fließtext */
.info-kultur {
  font-size: 0.9em; line-height: 1.55; color: var(--text);
  text-align: left;
  margin-bottom: 10px;
}
.info-kultur:last-child { margin-bottom: 0; }
.info-kultur-typ { color: var(--text); }
.info-kultur-typ strong { color: var(--text-muted); font-weight: 600; }

/* Supermärkte-Block: kompakter + per-Laden Einkaufs-Guide */
.supermarkt-block .info-kultur { font-size: 0.8em; line-height: 1.5; margin-bottom: 8px; }
.sm-wofuer { display: flex; flex-direction: column; gap: 6px; }
.sm-wofuer-row { font-size: 0.82em; line-height: 1.45; display: flex; align-items: center; flex-wrap: wrap; }
.sm-laden { font-weight: 500; color: var(--text); }
.sm-member { color: var(--text-muted); font-size: 0.9em; margin-left: 6px; }
/* Tier-Tags vor dem Supermarkt-Namen (grün=günstigster, gelb=mittel, rot=teuerster) */
.sm-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.92em; font-weight: 600; margin-right: 7px; white-space: nowrap; background: var(--bg); color: var(--text-muted); }
/* bewusst KEINE Tier-Farben mehr (zu ablenkend) - alle Tags neutral grau, die Wörter tragen die Info */
.sm-tag-g, .sm-tag-m, .sm-tag-t { background: var(--bg); color: var(--text-muted); }

/* Aufklappbarer voller Warenkorb im Supermärkte-Steckbrief */
.warenkorb-details { margin-top: 10px; }
.warenkorb-details > summary {
  cursor: pointer; list-style: none;
  font-size: 0.82em; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 5px;
}
.warenkorb-details > summary::-webkit-details-marker { display: none; }
.warenkorb-details > summary::before {
  content: "▸"; display: inline-block; transition: transform 0.15s ease;
}
.warenkorb-details[open] > summary::before { transform: rotate(90deg); }
.warenkorb-body { margin-top: 8px; overflow-x: auto; }
.warenkorb-legend { font-size: 0.72em; color: var(--text-muted); margin-bottom: 6px; line-height: 1.4; }
/* table-layout:fixed = einheitliche Spaltenbreiten ueber ALLE Laender (wie Panama): erste Spalte
   fix, restliche Markt-Spalten teilen sich den Rest gleichmaessig. Lange Supermarktnamen sind in
   den Daten gekuerzt, damit sie hineinpassen. */
.warenkorb-table { width: 100%; border-collapse: collapse; font-size: 0.74em; table-layout: fixed; }
.warenkorb-table th, .warenkorb-table td { padding: 2px 3px; text-align: center; white-space: normal; word-break: break-word; }
.warenkorb-table th:first-child, .warenkorb-table td:first-child { text-align: left; white-space: normal; word-break: break-word; width: 92px; }
.warenkorb-table thead th {
  color: var(--text-muted); font-weight: 700;
  border-bottom: 1px solid var(--border); vertical-align: bottom;
}
.warenkorb-table .wk-cat td {
  background: var(--bg); color: var(--text-muted);
  font-weight: 700; text-align: left;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9em;
  padding: 4px 4px 2px;
}
.warenkorb-table .wk-unit { color: var(--text-muted); font-size: 0.88em; }
.warenkorb-cell {
  display: inline-block; min-width: 30px; padding: 1px 4px;
  border-radius: 4px; font-variant-numeric: tabular-nums;
}
.wk-g { background: #dcfce7; color: #166534; }
.wk-m { background: #fef3c7; color: #92400e; }
.wk-t { background: #fee2e2; color: #991b1b; }
.wk-it { font-style: italic; }
.warenkorb-table .wk-total td {
  border-top: 2px solid var(--border); font-weight: 700;
  padding-top: 5px; font-variant-numeric: tabular-nums;
}
.warenkorb-cell.wk-na { background: transparent; color: var(--text-muted); min-width: 0; padding: 1px 5px; }
/* DE-Referenzspalte (REWE): grau + kursiv, keine Heatmap-Farbe - reine Vergleichsgroesse */
.warenkorb-cell.wk-de { background: transparent; color: var(--text-muted); font-style: italic; min-width: 0; }
.warenkorb-table .wk-total td.wk-de { color: var(--text-muted); font-style: italic; }
.warenkorb-table thead th:last-child { color: var(--text-muted); font-style: italic; }
/* Beispiel-Annonce-Pfeil an der Wohnen-Kostenzeile */
.cost-value-wrap { display: inline-flex; align-items: center; gap: 3px; }
.cost-listing-arrow { background: none; border: none; cursor: pointer; color: var(--accent); font-size: 1em; line-height: 1; padding: 0 1px; }
.cost-listing-arrow:hover { color: #0d2238; }
.portfolio-stale { color: var(--danger); font-weight: 600; }
.warenkorb-table .wk-mix td { font-weight: 700; color: var(--accent); padding-top: 5px; text-align: left; }
.warenkorb-table .wk-mix-note { font-weight: 400; color: var(--text-muted); font-size: 0.85em; }
.sm-regel { font-size: 0.8em; color: var(--text); font-weight: 400; font-style: italic; margin-top: -2px; margin-bottom: 9px; }
.frut-table { width: 100%; border-collapse: collapse; font-size: 0.78em; }
.frut-table td { padding: 2px 4px; border-bottom: 1px solid var(--bg); }
.frut-table tr:last-child td { border-bottom: none; }
.frut-preis { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.frut-einheit { color: var(--text-muted); white-space: nowrap; }
.warenkorb-note { font-size: 0.7em; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.info-row .info-data-nowrap {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1 1 auto; margin-left: 8px;
}
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.tag-list.tag-list-inline { margin-top: 0; display: inline-flex; }
.info-row.info-row-tags { align-items: flex-start; }
.info-row.info-row-tags .info-label { padding-top: 4px; }
.tag {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 0.8em;
}
.warning {
  border-left: 3px solid var(--warn);
  background: var(--warn-light);
}

/* BUDGET SECTION mit eingebauter KPI */
.budget-section {
  margin: 0 32px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.budget-header {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 16px;
  margin-bottom: 14px;
}
.budget-header-left { width: 100%; }
.budget-rate-control { width: 100%; justify-content: flex-end; }
.budget-header-left h2 { margin-bottom: 2px; }
.budget-kpi-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  margin-top: 12px;
  width: 100%;
}
.budget-kpi-status { min-width: 140px; }
.budget-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 4px solid var(--text-muted);
  background: var(--bg-elev-2);
  min-height: 78px;
  justify-content: center;
}
.budget-kpi-current { background: var(--bg-elev-2); border-left-color: var(--border-strong); }
.budget-kpi-target  { background: var(--bg-elev-2); border-left-color: var(--border-strong); }
.budget-kpi-status  { background: var(--bg-elev-2); border-left-color: var(--text-muted); align-items: center; text-align: center; justify-content: center; min-width: 140px; }
.budget-kpi-status.on-track  { background: var(--success-light); border-left-color: var(--success); }
.budget-kpi-status.warn-track { background: #fef9c3;             border-left-color: #ca8a04; }
.budget-kpi-status.off-track { background: #fee2e2;              border-left-color: var(--danger); }
/* Zwei-Zeilen-Check (Sparziel @Renteneintritt + Geld reicht @2081) */
.track-check { font-size: 0.82em; font-weight: 600; display: flex; gap: 6px; align-items: baseline; line-height: 1.55; text-align: left; }
.track-check > span:first-child { font-weight: 800; width: 0.9em; flex: none; }
.track-check.ok > span:first-child { color: var(--success); }
.track-check.no > span:first-child { color: var(--danger); }
.budget-kpi-label {
  font-size: 0.66em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.budget-kpi-value {
  font-size: 1.45em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.budget-kpi-current .budget-kpi-value { color: var(--text); }
.budget-kpi-target .budget-kpi-value  { color: var(--text); }
/* Privacy-Toggle (Header) - blurrt Summen + Chart-Y-Achsen global */
.privacy-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; box-sizing: border-box;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-2); cursor: pointer; padding: 0;
  transition: background 0.15s, color 0.15s;
}
.privacy-toggle:hover { background: var(--bg-elev); color: var(--text); }
.privacy-toggle .icon-eye-on  { display: none; }
.privacy-toggle .icon-eye-off { display: block; }
body:not(.privacy-blur) .privacy-toggle .icon-eye-on  { display: block; }
body:not(.privacy-blur) .privacy-toggle .icon-eye-off { display: none; }

body.privacy-blur .privacy-blurable { filter: blur(8px); user-select: none; transition: filter 0.18s; }
.chart-yaxis-mask {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  background: rgba(255,255,255,0.25);
  pointer-events: none; display: none; border-radius: 4px;
}
body.privacy-blur .chart-yaxis-mask { display: block; }

/* Intro-Hinweise als aufklappbare Kachel ganz oben */
.intro-hints-tile {
  margin: 8px 18px 0;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95em;
}
.intro-hints-summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  color: var(--text-2); padding: 2px 0;
  list-style: none;
}
.intro-hints-summary::-webkit-details-marker { display: none; }
.intro-hints-summary strong { color: var(--text); font-weight: 600; }
.intro-hints-sub { color: var(--text-muted); font-size: 0.92em; }
.intro-hints-caret { transition: transform 0.15s ease; display: inline-block; color: var(--text-muted); }
.intro-hints-tile[open] .intro-hints-caret { transform: rotate(90deg); }
.intro-hints-tile[open] .intro-hints-summary { margin-bottom: 8px; }
/* Hint-Stack innerhalb der Kachel */
.intro-hints-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intro-hint {
  padding: 8px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: 4px;
  color: var(--text);
  font-size: 1em;
  line-height: 1.55;
}
/* Default: alle <strong> nicht fett, normaler Textfluss */
.intro-hint strong { font-weight: 400; color: var(--text); }
/* Phasen-Name (erstes strong) bleibt fett */
.intro-hint strong:first-child { font-weight: 700; }
/* Phase-Akzent-Farben für Bordleisten der jeweiligen Intro-Hints */
.intro-hints-block .intro-hint:nth-child(1) { border-left-color: #0284c7; }
.intro-hints-block .intro-hint:nth-child(2) { border-left-color: #15803d; }
.intro-hints-block .intro-hint:nth-child(3) { border-left-color: #b45309; }
.intro-hints-block .intro-hint:nth-child(4) { border-left-color: #7e22ce; }

/* Privacy-Banner: nur sichtbar wenn body.privacy-blur aktiv */
.privacy-banner {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 8px 18px 0;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(245,158,11,0.10), rgba(245,158,11,0.04));
  border: 1px solid rgba(245,158,11,0.35);
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.88em;
}
body.privacy-blur .privacy-banner { display: flex; }
.privacy-banner-icon { font-size: 1.15em; }
.privacy-banner-text strong { color: var(--text); }
.budget-kpi-icon {
  font-size: 1.6em;
  line-height: 1;
}
.budget-kpi-status.on-track  .budget-kpi-icon { color: var(--success); }
.budget-kpi-status.off-track .budget-kpi-icon { color: var(--danger); }
.budget-kpi-meta { font-size: 0.78em; color: var(--text-2); }
.budget-rate-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-elev-2);
  padding: 12px 14px;
  border-radius: 8px;
  align-self: start;
}
.budget-rate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.budget-rate-label {
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}
.budget-rate-slider {
  width: 200px;
  accent-color: var(--accent);
}
.budget-rate-value {
  font-weight: 700;
  font-size: 1.05em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 100px;
}
/* Rendite-Zeilen (ETF/P2P) als 2x2-Grid: Zeile1 Label + Sparrate, Zeile2 Slider + %-Wert.
   Beide Zeilen deckungsgleich -> Slider und %-Werte fluchten untereinander. */
.budget-rate-row.yield-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 165px;
  grid-template-areas: "lbl spar" "sld yld";
  column-gap: 12px;
  row-gap: 5px;
  align-items: center;
  max-width: 520px;
}
.budget-rate-row.yield-row > *:nth-child(1) { grid-area: lbl; }
.budget-rate-row.yield-row > *:nth-child(2) { grid-area: spar; justify-self: end; }
.budget-rate-row.yield-row > *:nth-child(3) { grid-area: sld; width: 100%; max-width: 240px; min-width: 0; }
.budget-rate-row.yield-row > *:nth-child(4) { grid-area: yld; justify-self: start; min-width: 0; }
/* Kleiner grauer Zusatz "(ab Jul 1.000 €)" hinter der aktuellen Sparrate */
.rate-upcoming {
  color: var(--text-muted);
  font-size: 0.72em;
  font-weight: 600;
  white-space: nowrap;
}
/* Sparrate ETF/P2P (Desktop): Grid mit gemeinsamer Spalten-Ausrichtung. Die Wert-Spalte sized auf den
   BREITESTEN Wert (ETF inkl. "(ab Jul ...)"), beide Rendite-Dropdowns starten direkt dahinter in EINER
   Spalte -> "7 % p.a." sitzt direkt hinter dem ETF-Text, "6 % (Bondora)" vertikal buendig darunter.
   display:contents loest die einzelnen Rows auf, sodass Label/Wert/Select EINER Grid-Spaltenlogik folgen. */
@media (min-width: 769px) {
  /* Tidy Desktop-Layout: jede Zeile eine eigene Flex-Zeile mit FESTEN Spaltenbreiten
     (Label | Sparrate-Wert | Regler | %-Wert). Dadurch fluchten ETF- und P2P-Zeile spaltengenau
     - Werte sitzen direkt hinter dem Label, nichts schwebt weit rechts. Robuster als das fruehere
     display:contents-Grid, das an der exakten Kinder-Zahl je Zeile haengt und zerbrach, als #21
     das Dropdown durch Slider+Wert (4 statt 3 Kinder) ersetzte. */
  .sparrate-finance { display: block; }
  .sparrate-finance .budget-rate-row { display: flex; align-items: center; column-gap: 12px; row-gap: 4px; flex-wrap: nowrap; max-width: none; }
  .sparrate-finance .budget-rate-label { flex: 0 0 200px; }
  .sparrate-finance .yield-row .budget-rate-value { flex: 0 0 165px; min-width: 0; }
  .sparrate-finance .yield-row .budget-rate-value.yield-pct { flex: 0 0 auto; }
  .sparrate-finance .yield-row .budget-rate-slider { flex: 0 0 210px; width: 210px; max-width: 210px; min-width: 0; margin: 0; }
}
.budget-rate-eta {
  font-size: 0.83em;
  color: var(--text-2);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
}
.budget-rate-eta strong { color: var(--success); }
.budget-rate-eta.miss strong { color: var(--danger); }
.budget-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82em; color: var(--text-2);
}
.dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 2px;
}
.dot-actual { background: var(--actual); }
.dot-projection {
  background: var(--bg-elev-2);
  border: 1.5px dashed var(--accent);
}
.dot-target { background: var(--target-band); border: 1px solid var(--target-line); }
.dot-liquidity { background: rgba(147,197,253,0.95); border: 1px dashed rgba(147,197,253,0.95); }
/* Länder-Empfehlungen unter dem Ranking - Optik wie die "Ausgeblendet"-Kachel, aber gestapelt.
   Doppelklasse-Selektor, damit er die spaeter im File definierte .hidden-countries-bar
   (align-items:center) sicher ueberschreibt - sonst zentriert die Headline. */
.hidden-countries-bar.reco-bar { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
.reco-group { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.reco-label { font-size: 0.85em; font-weight: 700; color: var(--muted); }
.reco-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.reco-chip { cursor: default; }
.reco-chip:hover { border-color: var(--border); background: var(--card, rgba(148,163,184,0.08)); }
.reco-empty { color: var(--muted); font-size: 0.85em; font-style: italic; }
/* Annahmen, Auswanderungskosten & Quellen - einklappbar (default zu) */
.assumptions-collapse > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.assumptions-collapse > summary::-webkit-details-marker { display: none; }
.assumptions-collapse > summary::before { content: "▸"; color: var(--text-muted, #64748b);
  transition: transform 0.15s ease; display: inline-block; }
.assumptions-collapse[open] > summary::before { transform: rotate(90deg); }
.assumptions-collapse > summary h2 { margin: 0; }
.assumptions-collapse[open] > summary { margin-bottom: 16px; }
/* Robust einklappen, falls der native details-Mechanismus durch andere Regeln ausgehebelt wird */
.assumptions-collapse:not([open]) > .assumptions-grid { display: none; }
.budget-chart-box { height: 330px; }

/* COLLAPSIBLE BOTTOM */
.assumptions-section {
  margin: 0 32px 22px;
}
.bottom-details {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.bottom-details > summary {
  cursor: pointer;
  padding: 14px 22px;
  font-weight: 600;
  color: var(--text);
  user-select: none;
  font-size: 0.95em;
}
.bottom-details > summary:hover { color: var(--accent); }
.bottom-details[open] > summary { border-bottom: 1px solid var(--border); }
.assumptions-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
  padding: 18px 22px;
}
.assumptions-box, .cost-table-box {
  background: var(--bg-elev-2);
  border-radius: 8px;
  padding: 16px 18px;
  min-width: 0;   /* erlaubt Schrumpfen im Grid */
  overflow: hidden;
}
.cost-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cost-table-scroll .cost-table {
  min-width: 600px;  /* horizontale Scrollbar wenn Container schmaler */
}
.assumptions-box ol { padding-left: 20px; margin: 0; }
.assumptions-box li { padding: 5px 0; }
.assumptions-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.assumptions-header h3 { margin: 0; }
.assumptions-actions { display: flex; gap: 6px; }
.assumption-btn {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78em;
  cursor: pointer;
  color: var(--text-2);
  font-family: inherit;
}
.assumption-btn:hover { border-color: var(--accent); color: var(--accent); }
.assumptions-list-editable li {
  position: relative;
  padding: 5px 28px 5px 0;
}
.assumptions-list-editable li[contenteditable="true"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--accent-light);
  border-radius: 4px;
}
.assumption-remove {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1em;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.assumptions-list-editable li:hover .assumption-remove { opacity: 1; }
.assumption-remove:hover { color: var(--danger); background: #fee2e2; }
.cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
}
.cost-table th, .cost-table td {
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.cost-table th:first-child, .cost-table td:first-child {
  text-align: left;
  color: var(--text-muted);
}
.cost-table thead th {
  font-weight: 600;
  color: var(--text);
  border-bottom: 2px solid var(--accent);
}
.cost-table tr.total-row { font-weight: 700; background: var(--bg-elev); }
.cost-table tr.months-row td { color: var(--success); font-style: italic; }

footer {
  padding: 18px 32px 28px;
  text-align: center;
  color: var(--text-muted);
  /* Einheitlicher vertikaler Rhythmus: Flex statt Margin-Collapse, damit alle Zeilen
     (inkl. <details>-Changelog) denselben Abstand zueinander haben. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* Kind-Geburtsjahr-Input im Topbar (ersetzt Kinder-Toggle 0/1/2) */
.kids-birthdate-block {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 8px;
}
.kids-birthyear-select {
  font-size: 0.9em; padding: 4px 26px 4px 8px; min-width: 96px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg-elev); color: var(--text);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  min-height: 30px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.kids-birthyear-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
@media (max-width: 480px) {
  .kids-birthdate-block { flex: 1 1 100%; flex-wrap: wrap; }
  .kids-birthyear-select { min-height: 44px; flex: 1 1 auto; min-width: 100px; }
}
/* Renten-ETF-Block im Phase-4-Header */
.renten-etf-kpi {
  display: inline-flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; gap: 2px; margin-left: auto;
}
.renten-etf-kpi-label { font-size: 0.7em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.renten-etf-kpi-value { font-size: 1.1em; font-weight: 700; color: #7e22ce; }
.renten-etf-kpi-meta { font-size: 0.75em; color: var(--text-muted); }
@media (max-width: 768px) {
  .renten-etf-kpi { margin-left: 0; margin-top: 8px; flex-basis: 100%; }
}

footer p { margin: 0; }
footer .footer-data-source { margin-top: 0; }
footer .footer-data-source strong { color: var(--text); }
.footer-sync-row { margin-top: 12px; text-align: center; }
.footer-sync-btn { font-size: 0.8em; padding: 5px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elev); color: var(--text-2); cursor: pointer; }
.footer-sync-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.footer-hint {
  display: inline-block; margin-left: 4px; cursor: help;
  color: #94a3b8; font-size: 0.95em;
  border-bottom: 1px dotted #94a3b8;
}
.footer-hint:hover { color: #475569; }

/* Changelog (gleiche Font-Größe wie Portfolio Performance / Länderdaten, Inline-Pfeil rechts) */
.renten-etf-table-block {
  margin: 16px 0 0;
}
.renten-etf-table-block summary {
  cursor: pointer; user-select: none;
  padding: 6px 10px; font-weight: 600; color: var(--text);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  list-style: none;
}
.renten-etf-table-block summary::-webkit-details-marker { display: none; }
.renten-etf-table-block summary::after {
  content: "▸"; color: var(--text-muted);
  transition: transform 0.15s ease;
  display: inline-block;
}
.renten-etf-table-block[open] summary::after { transform: rotate(90deg); }
.renten-etf-table-block[open] summary { margin-bottom: 10px; }
.renten-etf-table-wrap { overflow-x: auto; }
.renten-etf-table {
  width: 100%; border-collapse: collapse; font-size: 0.88em;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden;
}
.renten-etf-table th, .renten-etf-table td {
  padding: 5px 10px; text-align: right; border-bottom: 1px solid var(--border);
}
.renten-etf-table th:first-child, .renten-etf-table td:first-child,
.renten-etf-table th:last-child, .renten-etf-table td:last-child { text-align: left; }
.renten-etf-table thead th { background: rgba(15,23,42,0.04); font-weight: 600; color: var(--text-muted); font-size: 0.9em; }
.renten-etf-table tbody tr:hover { background: rgba(30,58,95,0.04); }
.renten-etf-table tbody tr:last-child td { border-bottom: none; }
.renten-etf-table-actual { color: #16a34a; font-size: 0.85em; }
.renten-etf-table-phase { color: var(--text-muted); font-size: 0.88em; }

.changelog-block {
  margin: 0 auto;
  max-width: 900px;
  text-align: center;
}
.changelog-block summary {
  cursor: pointer; user-select: none;
  padding: 0; background: transparent; border: none;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted);
  list-style: none;
}
.changelog-block summary::-webkit-details-marker { display: none; }
.changelog-block summary::after {
  content: "▸"; color: var(--text-muted);
  transition: transform 0.15s ease;
  display: inline-block;
}
.changelog-block[open] summary::after { transform: rotate(90deg); }
.changelog-block[open] summary { margin-bottom: 12px; }
.changelog-list { padding: 8px 12px; max-height: 480px; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.82em; line-height: 1.45;
  text-align: left;  /* Einträge linksbündig, unabhängig vom zentrierten Block-Header */
}
.changelog-list, .changelog-list * { text-align: left; }
.changelog-list p { text-align: left; margin: 4px 0; }
.changelog-entry { border-bottom: 1px dashed var(--border); padding: 10px 4px; }
.changelog-entry:last-child { border-bottom: none; }
.changelog-entry-header {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 4px;
}
.changelog-version { font-weight: 700; color: #1e3a5f; font-family: monospace; font-size: 0.95em; }
.changelog-date    { color: var(--text-muted); font-size: 0.88em; }
.changelog-title   { color: var(--text); font-weight: 500; }
.changelog-bullets { margin: 4px 0 4px 18px; padding: 0; color: var(--text-muted); list-style: disc; }
.changelog-bullets li { margin: 2px 0; line-height: 1.4; }
.changelog-bullets strong { color: var(--text); font-weight: 600; }
.changelog-bullets code {
  background: rgba(15,23,42,0.06); padding: 1px 5px; border-radius: 3px;
  font-size: 0.92em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (max-width: 480px) {
  .changelog-block { margin-top: 12px; }
  .changelog-list { font-size: 0.78em; max-height: 360px; }
  .changelog-entry-header { gap: 6px; }
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; }
  .assumptions-grid { grid-template-columns: 1fr; }
  .budget-header { grid-template-columns: 1fr; }
  .budget-rate-slider { width: 100%; }
}

/* ─── Mobile-Optimierung - additive Anpassungen, ohne bestehende Regeln zu überschreiben ─── */
@media (max-width: 820px) {
  /* Topbar */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
  }
  .topbar-right { width: 100%; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
  h1 { font-size: 1.35em; }
  .topbar-left .subtitle { font-size: 0.85em; }

  /* Header-Toggles auf Mobile etwas kompakter (Currency/Kids/Reset/Szenario) */
  .currency-toggle { transform: scale(0.92); transform-origin: left center; }
  .kids-birthyear-select { font-size: 0.85em; padding: 4px 22px 4px 8px; min-width: 70px; }
  .kids-toggle-label { font-size: 0.78em; }
  .global-reset-btn { font-size: 0.82em; padding: 5px 10px; }
  .scenarios-load { font-size: 0.85em; padding: 5px 26px 5px 10px; }

  /* Grid */
  .grid {
    padding: 14px 14px;
    gap: 14px;
  }
  .col {
    padding: 14px 16px;
    min-height: auto;
  }
  h2 { font-size: 1.15em; }
  h3 { font-size: 0.95em; }

  /* Cost-Controls: Label + Select untereinander */
  .cost-control-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .cost-control-label { font-size: 0.7em; }

  /* Cost-Total kompakter */
  .cost-total { padding: 10px 12px; }
  .cost-total-value { font-size: 1.4em; }
  .chart-box { height: 200px; }

  /* Budget-Section */
  .budget-section { margin: 0 14px 16px; padding: 14px 16px; }
  .budget-header { gap: 10px; }
  .budget-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .budget-kpi { padding: 8px 10px; min-height: auto; }
  .budget-kpi-status { grid-column: 1 / -1; min-width: 0; }
  .budget-kpi-emig { grid-column: auto; }
  .budget-kpi-emigcost { grid-column: auto; }
  .budget-kpi-value { font-size: 1.2em; }
  .budget-kpi-icon { font-size: 1.4em; }

  .budget-rate-control {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .budget-rate-slider { width: 100%; }
  .budget-rate-value { min-width: 0; text-align: center; }
  .budget-rate-eta { text-align: center; }
  .budget-chart-box { height: 250px; }
  .budget-legend { font-size: 0.78em; gap: 8px; }

  /* Country Cards */
  .country-header { padding: 10px 12px; gap: 8px; }
  .country-flag { font-size: 1.1em; }
  .country-name { font-size: 0.92em; }
  .score-bar { width: 50px; }
  .country-warning { display: none; }     /* Pflichtkriterium-Badge ist auf Mobile zu eng */

  /* Steckbrief */
  .info-block { padding: 8px 12px; }
  .info-row { font-size: 0.85em; }

  /* Tabelle horizontal scrollbar */
  .cost-table-box { overflow-x: auto; }
  .cost-table { font-size: 0.78em; min-width: 600px; }

  /* Annahmen */
  .assumptions-section { margin: 0 14px 16px; }
  .assumptions-grid { padding: 14px 16px; }
  .bottom-details > summary { padding: 12px 16px; font-size: 0.9em; }

  /* Tooltip kleiner */
  .cost-tooltip { max-width: 280px; font-size: 0.78em; padding: 10px 12px; }

  /* Kids-Toggle full-width */
  .kids-toggle { width: 100%; justify-content: space-between; }
}

@media (max-width: 480px) {
  /* Sehr enge Smartphones */
  .topbar { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .topbar-right { flex-wrap: wrap; gap: 6px; width: 100%; justify-content: flex-start; }
  .topbar-sep { display: none; }
  .scenarios-load { max-width: 100%; flex: 1 1 100%; }
  .currency-toggle { flex: 0 0 auto; }
  .kids-toggle { flex: 1 1 100%; flex-wrap: wrap; gap: 4px 8px; }
  .kids-birthyear-select { flex: 1 1 110px; max-width: 150px; min-height: 44px; font-size: 0.85em; }
  .global-reset-btn { font-size: 0.85em; padding: 6px 10px; }
  .subtitle { font-size: 0.78em; }
  .grid, .assumptions-section, .budget-section { padding-left: 8px; padding-right: 8px; }
  h1 { font-size: 1.1em; }
  h2 { font-size: 1.0em; }
  .col { padding: 10px 12px; }
  .budget-kpi-row { grid-template-columns: 1fr; gap: 8px; }
  .budget-kpi-emig { grid-column: auto; }
  .budget-kpi-emigcost { grid-column: auto; }
  .budget-kpi-status { grid-column: auto; }
  .budget-kpi { padding: 10px 12px; }
  .budget-kpi-value { font-size: 1.2em; }
  .budget-chart-box { height: 260px; }   /* etwas höher für Touch-Tooltip */
  .cost-breakdown li { font-size: 0.8em; padding: 6px 4px; }
  .legend-item { font-size: 0.72em; }
  .country-card { padding: 8px 10px; }
  .country-header { flex-wrap: wrap; }
  .country-name { font-size: 0.95em; }
  .country-rank { min-width: 22px; font-size: 0.85em; }
  .country-flag { font-size: 1em; }
  .country-score { font-size: 0.9em; }
  .criterion { padding: 6px 4px; }
  .criterion-name { font-size: 0.78em; }
  .criterion-comment { font-size: 0.72em; }
  .cost-controls { gap: 6px; }
  .cost-map { height: 130px; }
  .cost-control-row { flex-wrap: wrap; gap: 4px; }
  .cost-control-label { flex-basis: auto; min-width: 70px; }
  .cost-control-select { font-size: 0.85em; padding: 8px 8px; min-height: 44px; }  /* Touch-Target */
  .budget-rate-row { flex-wrap: wrap; gap: 8px; }
  .budget-rate-label { flex-basis: 100%; font-size: 0.85em; }
  .budget-rate-slider { width: 100%; min-height: 44px; }
  .budget-rate-value { flex-basis: 100%; text-align: center; font-size: 0.9em; }
  .zoom-presets { flex-wrap: wrap; }
  .zoom-preset-btn { font-size: 0.8em; padding: 6px 10px; min-height: 44px; }
  .phase { margin: 12px 6px; padding: 12px 10px 16px; }
  .phase-badge { font-size: 0.72em; padding: 4px 9px; }
  .phase-title { font-size: 1em; }
  .phase-sub { font-size: 0.78em; }
  /* Tabellen horizontal scrollbar machen */
  .cost-table-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cost-table { font-size: 0.65em; min-width: 340px; }
  /* BD-Blocks-Grid auf 1 Spalte */
  .bd-blocks-grid { grid-template-columns: 1fr !important; }
  /* Steckbrief lesbarer */
  .info-row { flex-wrap: wrap; padding: 5px 0; }
  .info-label { flex-basis: 100%; font-size: 0.78em; }
  .info-data { font-size: 0.82em; }
  /* Toggle-Buttons größer für Touch */
  .kids-btn, .currency-btn { min-height: 44px; min-width: 44px; padding: 8px 14px; }
  /* Annahmen-Liste */
  .assumptions-list li { font-size: 0.85em; padding: 8px 10px; }
}

@media (max-width: 768px) and (min-width: 481px) {
  /* Tablet/Larger Phone - leichte Anpassungen */
  .topbar-right { flex-wrap: wrap; gap: 8px; }
  .budget-chart-box { height: 300px; }
  .cost-table { font-size: 0.85em; min-width: 600px; }
  .cost-table-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kids-btn, .currency-btn { min-height: 40px; min-width: 40px; }
}

/* ============ PHASEN-GRUPPIERUNG ============ */
/* NOTIZEN-Bereich (über Phase 1, persistent, nicht von Reset betroffen) */
/* Erkenntnisse-Sektion: optisch an Annahmen-Kachel angeglichen (v2.163) - gleicher Kachel-Look
   (.phase > .assumptions-section): bg-elev, 1px Border, radius 10px, padding 20/24, shadow; h2-Heading 1.35em. */
.notes-section {
  margin: 0 32px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.notes-grid { grid-template-columns: 1fr; padding: 0; }
.notes-grid .assumptions-box { padding: 0; background: none; }
.notes-section details { width: 100%; }
.notes-section summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  user-select: none;
}
.notes-section summary::-webkit-details-marker { display: none; }
.notes-section details[open] summary { margin-bottom: 10px; }
.notes-caret { display: inline-block; transition: transform 0.15s ease; color: var(--text-muted); font-size: 0.9em; }
.notes-section details[open] .notes-caret { transform: rotate(90deg); }
.notes-title { margin: 0; font-size: 1.35em; font-weight: 700; color: var(--text); flex: 1; }
.notes-status { font-size: 0.78em; color: var(--text-muted); font-style: italic; min-height: 1em; }
.notes-status.notes-status-warn { color: #d97706; font-style: normal; }
.notes-textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-elev-2);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92em;
  line-height: 1.5;
  box-sizing: border-box;
}
.notes-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}
@media (max-width: 720px) {
  .notes-section { margin: 12px 8px 0; padding: 12px 14px; }
  .notes-title { font-size: 0.95em; }
  .notes-textarea { min-height: 110px; font-size: 1em; }
}

.phase {
  margin: 24px 16px;
  border-radius: 14px;
  padding: 18px 18px 22px;
  position: relative;
  border: 2px solid transparent;
}
.phase-orientierung { background: linear-gradient(180deg, rgba(56,189,248,0.08) 0%, rgba(56,189,248,0.02) 100%); border-color: rgba(56,189,248,0.30); }
.phase-aufbau       { background: linear-gradient(180deg, rgba(34,197,94,0.08) 0%, rgba(34,197,94,0.02) 100%); border-color: rgba(34,197,94,0.30); }
.phase-auswanderung { background: linear-gradient(180deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0.02) 100%); border-color: rgba(245,158,11,0.35); }
.phase-renten       { background: linear-gradient(180deg, rgba(168,85,247,0.08) 0%, rgba(168,85,247,0.02) 100%); border-color: rgba(168,85,247,0.35); }
.phase-header {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px 0; padding: 4px 0 12px 0;
  border-bottom: 1px dashed rgba(15,23,42,0.15);
  cursor: pointer; user-select: none;
}
.phase-caret {
  font-size: 1.05em; font-weight: 700; color: #475569; margin-left: 8px;
  transition: transform 0.18s ease; transform: rotate(0deg);
}
/* sichtbarer Fokus-Ring, da .phase-header jetzt tastatur-fokussierbar ist (role=button, tabindex=0) */
.phase-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.phase.collapsed .phase-caret { transform: rotate(-90deg); }
.phase.collapsed .phase-header {
  margin-bottom: 0; padding-bottom: 4px; border-bottom: none;
}
.phase.collapsed > *:not(.phase-header) { display: none; }
/* phase-sub-Position: bleibt ganz rechts, caret danach */
.phase-header .phase-caret { margin-left: 0; }

/* Header-Button: Alle Phasen ein-/ausklappen (gleiche Optik wie privacy-toggle) */
.phases-toggle-all {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; box-sizing: border-box;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-2); cursor: pointer; padding: 0;
  transition: background 0.15s, color 0.15s;
}
.phases-toggle-all:hover { background: var(--bg-elev); color: var(--text); }
/* Default-Status: alle eingeklappt → Pfeil zeigt „expand" (˅) */
.phases-toggle-all .icon-expand { display: none; }
.phases-toggle-all .icon-collapse { display: block; }
.phases-toggle-all[aria-pressed="true"] .icon-collapse { display: none; }
.phases-toggle-all[aria-pressed="true"] .icon-expand { display: block; }
.phase-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid currentColor;
}
/* Phasen-Nummer ①/②/③/④ deutlich größer als der Text dahinter, da Unicode-Circled-Numbers
   sonst sehr klein wirken. */
.phase-badge .phase-num {
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  margin-right: 2px;
}
.phase-orientierung .phase-badge { color: #0284c7; }
.phase-aufbau .phase-badge       { color: #15803d; }
.phase-auswanderung .phase-badge { color: #b45309; }
.phase-renten .phase-badge       { color: #7e22ce; }
.phase-title  { font-size: 1.15em; font-weight: 700; color: #1e293b; margin: 0; }
.phase-sub    { font-size: 0.85em; color: var(--text); margin-left: auto; font-style: normal; font-weight: 600; }
/* Innere Sections kollabieren Margin */
.phase > .grid,
/* Innere Sections in Phasen: Margin entfernen, aber eigene Padding/Background behalten */
.phase > .budget-section,
.phase > .assumptions-section { margin: 0; }
/* .grid in .phase: horizontale Padding raus, damit die 3 Spalten bündig mit .budget-section sind */
.phase > .grid { padding: 0; }
.phase > .grid + .budget-section,
.phase > .budget-section + .assumptions-section { margin-top: 18px; }
/* assumptions-section selbst soll wie .budget-section ein Kachel-Look haben - eigene Padding */
.phase > .assumptions-section {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.phase > .assumptions-section > h2 { margin-top: 0; }
/* Innere Boxen WEISS statt grau, gleiches Padding-Schema */
.phase .assumptions-grid { padding: 12px 0 0 0; }
.phase .assumptions-box,
.phase .cost-table-box {
  background: var(--bg-elev);  /* weiß statt bg-elev-2 grau */
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}

@media (max-width: 820px) {
  .phase { margin: 16px 8px; padding: 14px 12px 18px; }
  .phase-header { flex-wrap: wrap; }
  .phase-sub { margin-left: 0; flex-basis: 100%; }
}

/* Geldverbrauch: 2-Spalten-Grid mit Blöcken (Fabian/Sarah oben, Freelance unten) */
.bd-blocks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.bd-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bd-block-title {
  font-weight: 600;
  font-size: 0.88em;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.bd-slider-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bd-slider-line .budget-rate-slider {
  width: 180px;
  flex: 0 0 auto;
}
.bd-slider-line .budget-rate-value {
  font-size: 0.85em;
  white-space: nowrap;
  color: #334155;
}

/* v2.133: Inline-Edit-Pattern fuer Renten-Labels (analog bd-util) -
   die Spans haben inline-styles, nur Spin-Buttons entfernen */
.rente-edit-input { -moz-appearance: textfield; }
.rente-edit-input::-webkit-outer-spin-button,
.rente-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* v2.138: Hover-Affordance fuer die klickbaren Renten-Labels (Desktop) */
.rente-edit:hover { background: rgba(30, 58, 95, 0.10); border-radius: 3px; }

@media (max-width: 820px) {
  .bd-blocks-grid { grid-template-columns: 1fr; }
  .bd-slider-line .budget-rate-slider { width: 100%; flex: 1; min-width: 0; }
}
/* v2.138: Mobile Touch-Targets - editierbare Renten-Labels als 44px-Ziel, aktiver Input
   mit Mindesthoehe + font-size 16px (verhindert iOS-Auto-Zoom beim Fokus). */
@media (max-width: 768px) {
  .rente-edit {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 8px;
    vertical-align: middle;
  }
  .rente-edit-input {
    min-height: 38px;
    font-size: 16px;
  }
}

/* Country-Card Toggle-Pfeil (Klick auf Karte = nur markieren; Pfeil = aufklappen) */
.country-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85em;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.country-toggle:hover { color: var(--accent); border-color: var(--accent); background: rgba(56,189,248,0.08); }
.country-card.expanded .country-toggle { transform: rotate(90deg); color: var(--accent); border-color: var(--accent); }

/* ✕ Land ausblenden - nur Desktop, dezent neben dem Aufklapp-Pfeil */
.country-hide {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8em;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  opacity: 0.55;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.country-hide:hover { color: #f87171; border-color: #f87171; background: rgba(248,113,113,0.08); opacity: 1; }
/* Mobile: x-Button auch zeigen (User-Wunsch 2026-06-09), aber etwas kleiner */
@media (max-width: 768px) {
  .country-hide { width: 26px; height: 26px; font-size: 0.85em; opacity: 0.7; }
}

/* Leiste mit ausgeblendeten Ländern (zum Wieder-Einblenden) */
.hidden-countries-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 12px;
  border: 1px dashed var(--border); border-radius: 8px;
  background: rgba(148,163,184,0.05);
}
.hidden-countries-label { color: var(--muted); font-size: 0.85em; font-weight: 600; }
.hidden-chip {
  background: var(--card, rgba(148,163,184,0.08));
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 0.85em; color: var(--text, inherit);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.hidden-chip:hover { border-color: var(--accent); background: rgba(56,189,248,0.08); }
.hidden-chip-x { font-weight: 700; color: var(--accent); font-size: 1.1em; line-height: 1; }

/* Global Reset Button im Header - rötlich, "destruktive" Aktion */
.global-reset-btn {
  background: #fef2f2;            /* sehr helles Rot */
  border: 1px solid #fca5a5;       /* dezente rote Border */
  color: #b91c1c;                  /* dunkles Rot */
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82em;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.15s;
}
.global-reset-btn:hover {
  background: #fee2e2;
  border-color: #b91c1c;
}

/* ETA jetzt direkt in der Legende */
.legend-eta {
  margin-left: auto;
  font-size: 0.85em;
  color: var(--success);
  font-weight: 600;
  padding: 2px 10px;
  background: var(--success-light);
  border-radius: 6px;
}
.legend-eta.miss {
  color: var(--warn);
  background: var(--warn-light);
}
.budget-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* Auswanderungskosten-Tabelle: alles einzeilig */
.cost-table th, .cost-table td { white-space: nowrap; }
.cost-table td { font-variant-numeric: tabular-nums; }
/* Lebenshaltungskosten-Breakdown: jede Zeile einzeilig (Wohnen-Beschreibung darf nicht umbrechen) */
.cost-breakdown li { white-space: nowrap; }
.cost-breakdown li > span:first-child { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cost-breakdown li > span:last-child { flex-shrink: 0; padding-left: 8px; }

/* Steckbrief: Sub-Row für "Regionen zum Meiden" innerhalb Geografie-Block */
/* Info-Row mit langem Text: Label oben, Value darunter */
.info-row-multiline { display: block; }
.info-row-multiline .info-label { display: block; margin-bottom: 2px; }
.info-row-multiline .info-data { display: block; color: var(--text-2); font-size: 0.92em; line-height: 1.45; }

/* Geldverbrauch: Einkommens-Modus-Toggle (Freelance / Angestellt) */
.bd-modus-toggle {
  display: inline-flex;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.bd-modus-btn {
  padding: 5px 14px;
  background: transparent;
  color: var(--text-2);
  border: none;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.bd-modus-btn:hover { background: var(--bg-elev); }
.bd-modus-btn.active {
  background: var(--accent);
  color: #fff;
}

/* Currency-Toggle im Header (€ / $) */
.currency-toggle {
  display: inline-flex;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.currency-btn {
  width: 32px;
  padding: 4px 0;
  background: transparent;
  color: var(--text-2);
  border: none;
  border-radius: 4px;
  font-size: 0.95em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.currency-btn:hover { background: var(--bg-elev); }
.currency-btn.active {
  background: var(--accent);
  color: #fff;
}

/* Einkommensphase 1 / 2 - visuelle Trennung im Geldverbrauch-Block */
.bd-phase-group {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}
.bd-phase-group:last-child { margin-bottom: 0; }
.bd-phase-1 { border-left: 4px solid #94a3b8; }
.bd-phase-2 { border-left: 4px solid #94a3b8; }
.bd-phase-title {
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}

/* Reset-Button gleiche Höhe wie Kids-Toggle */
.global-reset-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
}
.currency-toggle { height: 36px; align-items: center; }
.kids-toggle { min-height: 36px; box-sizing: border-box; }

/* ALG On/Off Toggle (Mini-Switch im Block-Title) */
.bd-block-title { display: flex; align-items: center; gap: 8px; }
.bd-onoff { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; }
.bd-onoff input { opacity: 0; width: 0; height: 0; }
.bd-onoff-slider {
  position: absolute; inset: 0; cursor: pointer;
  background-color: #cbd5e1; border-radius: 18px;
  transition: 0.18s;
}
.bd-onoff-slider::before {
  content: "";
  position: absolute; height: 14px; width: 14px; left: 2px; top: 2px;
  background-color: #fff; border-radius: 50%;
  transition: 0.18s;
}
.bd-onoff input:checked + .bd-onoff-slider { background-color: var(--accent); }
.bd-onoff input:checked + .bd-onoff-slider::before { transform: translateX(14px); }

/* Block ausgegraut wenn Toggle off */
.bd-block-disabled .bd-slider-line { opacity: 0.4; pointer-events: none; }
.bd-block-disabled .bd-slider-line .budget-rate-value { font-style: italic; }

/* Zoom-Cursor-Hint */
.budget-chart-box canvas { cursor: default; }
/* (Zoom-Hint entfernt - jetzt +/- Buttons in der Legende) */
.budget-chart-box { position: relative; }

/* Warn-Tag-Variante (Regionen meiden) - dezent warm getönt, gleiche Größe wie normale Tags */
.tag.tag-warn {
  background: var(--warn-light);
  color: var(--warn);
  border-color: rgba(194,65,12,0.30);
}

/* Zoom-Buttons in Legende */
.zoom-controls {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.zoom-btn {
  width: 26px; height: 24px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-2);
  border-radius: 5px;
  font-size: 0.95em;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.zoom-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.zoom-btn:active { background: var(--accent); color: #fff; }

/* ============ EXPORT BUTTON ============ */
.export-row {
  display: flex; justify-content: center; align-items: stretch;
  margin: 28px 32px 12px;
  gap: 10px;
}
/* Download-Icon und → EÜR: etwas Abstand zu den Disketten-Buttons */
#btn-print { margin-left: 0; }  /* gleicher Abstand wie zu den anderen Header-Controls (Flex-Gap 8px) */
/* Reset-Button: nach rechts abgesetzt */
#global-reset { margin-left: 14px; }
.export-btn-reset {
  background: var(--bg-elev) !important;
  color: var(--warn, #dc2626) !important;
  border: 1px solid var(--border) !important;
  font-size: 1.15em !important;
}
.export-btn-reset:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: var(--warn, #dc2626) !important;
}
.export-btn-setdefault {
  background: var(--bg-elev) !important;
  color: #16a34a !important;
  border: 1px solid var(--border) !important;
  font-size: 1.15em !important;
}
.export-btn-setdefault:hover {
  background: rgba(22, 163, 74, 0.08) !important;
  border-color: #16a34a !important;
}
.export-btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);  /* gleiche Box-Maße wie .export-btn-secondary */
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 0.95em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, transform 0.1s;
  line-height: 1.2;
  box-sizing: border-box;
}
.export-btn:hover { background: #0d2238; }
.export-btn:active { transform: translateY(1px); }

/* ============ VISA-WAEHLER ============ */
.visa-waehler-block { border: 1px solid var(--accent-light); border-radius: 8px; padding: 12px 14px; background: var(--bg-elev); }
.visa-empfehlung { font-size: 0.86em; line-height: 1.5; color: var(--text); margin-bottom: 10px; }
.visa-empfehlung strong { color: var(--accent); }
.visa-kosten-preview { margin-top: 4px; }
.visa-items { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.visa-item-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82em; padding: 2px 0; border-bottom: 1px solid var(--border); }
.visa-item-row:last-child { border-bottom: none; }
.visa-item-pos { color: var(--text-2); flex: 1; }
.visa-item-eur { font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 8px; }
.visa-item-refundable .visa-item-eur { color: var(--text-2); font-style: italic; }
.visa-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0 2px; font-size: 0.9em; border-top: 1px solid var(--border); margin-top: 4px; }
.visa-hinweis { font-size: 0.78em; color: var(--text-2); margin-top: 6px; line-height: 1.4; }

/* ============ PRINT-LAYOUT (DIN A4 quer, 1 Phase pro Seite) ============ */
@media print {
  /* =====================================================================
     PRINT-LAYOUT: 1 Bereich pro DIN A4 Seite, Querformat, Originalproportionen
     Seitenstruktur:
       S.1 - Phase Orientierung (3-Spalten: Ranking + Kosten + Steckbrief)
       S.2 - Phase Aufbau (Sparfortschritt-Chart)
       S.3 - Phase Auswanderung (Burndown-Chart + Einkommenseinstellungen)
       S.4 - Annahmen + Auswanderungskosten-Tabelle
       S.5 - Phase Rente (Renten-ETF-Chart)
     zoom (statt transform: scale) damit Page-Breaks korrekt rechnen
  ===================================================================== */
  @page { size: A4 landscape; margin: 8mm; }

  /* === Nicht drucken === */
  .topbar,
  .export-row,
  .zoom-controls,
  .notes-section,
  .intro-hints-tile,
  footer,
  .phase-caret,
  .phases-toggle-all,
  .zoom-presets,
  .renten-etf-table-block,
  .privacy-banner,
  .scenarios-load,
  .assumption-btn,
  .cost-map,
  .vergleich-map,
  .changelog-block { display: none !important; }

  /* === Basis === */
  html {
    zoom: 0.82;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body {
    width: 1280px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* === Privacy aus, Y-Achsen-Maske weg === */
  .privacy-blurable { filter: none !important; }
  .chart-yaxis-mask { display: none !important; }

  /* === Phasen immer ausgeklappt === */
  .phase.collapsed > *:not(.phase-header) { display: revert !important; }

  /* === 1 Phase = 1 Seite === */
  .phase-orientierung {
    break-before: avoid;
    page-break-before: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .phase-aufbau,
  .phase-renten {
    break-before: page;
    page-break-before: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Auswanderungsphase: kein avoid-inside (Burndown kann hoch sein) */
  .phase-auswanderung {
    break-before: page;
    page-break-before: always;
  }
  /* Annahmen-Sektion (innerhalb Phase 3) als eigene Seite */
  .assumptions-section {
    break-before: page;
    page-break-before: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* === Phase 1: nur ausgewähltes Land, kein Ranking === */
  .col-ranking { display: none !important; }
  .phase-orientierung .grid { grid-template-columns: 1fr 1fr !important; }

  /* === Charts === */
  canvas { max-width: 100% !important; height: auto !important; }
}

/* Szenario-Load-Dropdown im Header (selbe Höhe/Stil wie Currency-Toggle) */
.scenarios-load {
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-align-last: center;
}
.export-row .scenarios-load { font-size: 1em; padding: 8px 14px; min-width: 56px; }
.scenarios-load:hover { border-color: var(--accent); color: var(--accent); }
.scenarios-load:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }

/* Export-Row: zwei Buttons nebeneinander, beide kompakt */
.export-row { gap: 10px; }
.export-btn { padding: 10px 16px; font-size: 0.85em; }
.export-btn-secondary {
  background: var(--bg-elev);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.export-btn-secondary:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
#btn-export-eur-py.sync-error {
  border-color: #dc2626;
  color: #dc2626;
  animation: sync-pulse 2s ease-in-out infinite;
}
#btn-export-eur-py.sync-error:hover { background: #fef2f2; border-color: #dc2626; color: #dc2626; }
@keyframes sync-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
  50%       { box-shadow: 0 0 0 4px rgba(220,38,38,0); }
}

/* Success-Tag-Variante (Regionen empfohlen) - dezent grün getönt */
.tag.tag-success {
  background: var(--success-light);
  color: var(--success);
  border-color: rgba(21,128,61,0.30);
}

/* Header-Items alle exakt gleich hoch wie Kids-Toggle */
.topbar-right > .scenarios-load,
.topbar-right > .global-reset-btn,
.topbar-right > .currency-toggle,
.topbar-right > .lifestyle-toggle,
.topbar-right > .kids-toggle {
  height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
.topbar-right > .scenarios-load { padding: 0 12px; }
.topbar-right > .global-reset-btn { padding: 0 14px; }
.topbar-right > .currency-toggle { padding: 3px; }
.topbar-right > .currency-toggle .currency-btn { height: 32px; }
.topbar-right > .lifestyle-toggle { padding: 4px 12px; gap: 10px; }
.topbar-right > .lifestyle-toggle .lifestyle-buttons { padding: 2px; }
.topbar-right > .lifestyle-toggle .lifestyle-btn { padding: 4px 10px; font-size: 1.05em; line-height: 1; }
.topbar-right > .kids-toggle { padding: 4px 12px; }
.topbar-right > .kids-toggle .kids-toggle-buttons { padding: 2px; }
/* EÜR-Sync + Download + Privacy auf EXAKT dieselbe Hoehe (40px) + vertikal zentriert wie die Toggle-Pills */
.topbar-right > #btn-save,
.topbar-right > #btn-print,
.topbar-right > #privacy-toggle {
  height: 40px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Personen 1-4 enger aneinander (Platz sparen) - schmaleres Button-Padding als Default */
.topbar-right > .kids-toggle .kids-btn { padding: 4px 9px; }
.topbar-right > .kids-toggle .kids-toggle-buttons { gap: 1px; }
/* Geb-Jahr-Select buendig auf Pill-Hoehe einpassen (kein Ausreisser) */
.topbar-right > .kids-toggle .kids-birthyear-select { height: 30px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }

/* Vertikaler Trenner nach Szenario-laden */
.topbar-sep {
  display: inline-block;
  width: 1px;
  height: 28px;
  background: var(--border);
  margin: 0 4px;
}

/* Zweiter Trenner schiebt Reset-Button ganz nach rechts */
.topbar-right > .topbar-sep:nth-of-type(2) {
  margin-left: 12px;
}

/* Cost-Filter neben Länder-Ranking-Überschrift (klein + dezent) */
.cost-filter {
  display: inline-flex; gap: 1px; vertical-align: middle; margin-left: 10px;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px;
  opacity: 0.85;
}
.cost-filter-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 1px 6px; border-radius: 3px;
  font-family: inherit; font-size: 0.62em; font-weight: 600;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.cost-filter-btn:hover { background: var(--bg-elev); color: var(--text-2); }
.cost-filter-btn.active { background: var(--accent); color: #fff; }
.cost-filter-btn .cf-sym { font-variant-numeric: tabular-nums; }

/* EU-Badge in Country-Card (User-Sicht: steuerlich/regulatorisch negativ) */
.eu-badge {
  display: inline-flex; align-items: center;
  background: #fef3c7; color: #92400e;
  border: 1px solid #fbbf24;
  font-size: 0.65em; font-weight: 700; letter-spacing: 0.05em;
  padding: 1px 5px; border-radius: 3px;
  margin-left: 4px;
  cursor: help;
}

/* Kosten-Indikator in Länder-Karte (1-3 € / $ Zeichen) */
.country-cost-level {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 6px;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  cursor: help;
}

/* Zoom-Preset-Buttons (z.B. „2030-32") in der Chart-Legende */
.zoom-presets {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 6px;
  padding: 2px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.zoom-preset-btn {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.78em;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-2);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.zoom-preset-btn:hover { background: var(--bg-elev); color: var(--accent); }
.zoom-preset-btn.active { background: var(--accent); color: #fff; }

/* zoom-controls bekommt nicht mehr margin-left: auto, weil presets schon da sind */
.zoom-presets + .zoom-controls { margin-left: 0; }

/* ============================================================
   MOBILE-FIRST-OPTIMIERUNG v2.62.0
   Single Source of Truth für ≤768px (Tablet+Smartphone).
   Ziel: keine horizontale Scroll, alles vertikal in einer Flucht, gute Lesbarkeit.
   ============================================================ */
@media (max-width: 768px) {
  /* Body/HTML stricter overflow-Kontrolle */
  body { font-size: 15px; }
  * { max-width: 100%; }
  /* AUSNAHME zur Wildcard-Regel (V5-CRITICAL 2026-07-04): Leaflet-divIcon-Pins (SVG in
     .leaflet-marker-icon) haengen in einem 0px breiten Marker-Pane - max-width:100% staucht
     sie auf 0 und ALLE Karten-Pins verschwinden auf Mobile. Leaflets eigenes CSS schuetzt
     nur IMG-Marker. */
  .leaflet-marker-icon, .leaflet-marker-icon * { max-width: none; }
  /* "+ Hinzufügen" darf nicht mitten im Wort umbrechen (V5-Fund) */
  .assumption-btn { white-space: nowrap; }
  /* Globale Word-Break-Hilfe für lange URLs/Strings in Steckbrief etc. */
  .phase, .col, .country-info, .info-row, .info-data, .info-label,
  .criterion-comment, .fazit, .assumptions-list li {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
  }
  /* Phase-Container darf NIE breiter werden als Viewport */
  .phase {
    box-sizing: border-box;
    width: auto;
    max-width: calc(100vw - 16px);
    overflow: hidden;   /* harter Cut für Inhalte, die trotz break-word überlaufen würden */
  }
  /* Charts dürfen NIE über Container hinaus */
  .chart-box, .chart-box canvas, .budget-chart-box, .budget-chart-box canvas {
    max-width: 100% !important; width: 100% !important;
  }

  /* =========================================================
     TOPBAR Mobile - SINGLE SOURCE OF TRUTH (v2.91.0)
     Layout-Konzept iPhone 13 Pro (390px):
       Row 0: h1 + Subtitle (column)
       Row 1: [€/$] [^] [👁] [S N L ─────────]   ← Lifestyle frisst Rest
       Row 2: [               1 2 3 4]           ← Personen rechtsbündig, ≤ Row1
     ========================================================= */
  .topbar {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .topbar-left { align-items: flex-start; }
  .topbar-left h1 { font-size: 1.05em; margin: 0; line-height: 1.2; }
  .subtitle { font-size: 0.78em; margin: 2px 0 0 0; }

  .topbar-right {
    display: flex;
    flex-wrap: nowrap;        /* alles in 1 Zeile */
    align-items: center;
    justify-content: flex-end; /* alles rechtsbündig */
    gap: 4px;
    width: 100%;
  }

  .topbar-sep { display: none; }
  .scenarios-load {
    flex: 1 1 100%; max-width: 100%;
    min-height: 38px; font-size: 0.85em;
  }

  /* === Einheitliche Tile-Höhe (kompakt: 30px) === */
  .topbar-right > .currency-toggle,
  .topbar-right > .lifestyle-toggle,
  .topbar-right > .kids-toggle,
  .topbar-right > #phases-toggle-all,
  .topbar-right > #privacy-toggle {
    height: 30px;
    min-height: 30px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    touch-action: manipulation;
  }

  /* === RADIKAL kompakt: Tile 30px, Button 22x22 für Single-Row === */
  .topbar-right > .currency-toggle,
  .topbar-right > .lifestyle-toggle,
  .topbar-right > .kids-toggle {
    padding: 2px 3px;
    gap: 2px;
  }
  .topbar-right > .lifestyle-toggle .lifestyle-buttons,
  .topbar-right > .kids-toggle .kids-toggle-buttons {
    display: flex;
    gap: 1px;
    padding: 0;
    background: transparent;
    border: none;
    flex: 0 0 auto;
  }
  .topbar-right > .currency-toggle .currency-btn,
  .topbar-right > .lifestyle-toggle .lifestyle-btn,
  .topbar-right > .kids-toggle .kids-btn {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    font-size: 0.78em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .topbar-right > .currency-toggle { transform: none; }

  /* Icon-Buttons: schmaler - inkl. Download-Button (war vorher als einziger 48px hoch, vergessen) */
  .topbar-right > #phases-toggle-all,
  .topbar-right > #privacy-toggle,
  .topbar-right > #btn-print {
    width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0;
    justify-content: center;
  }
  .topbar-right > #phases-toggle-all svg,
  .topbar-right > #privacy-toggle svg,
  .topbar-right > #btn-print svg {
    width: 14px; height: 14px;
  }

  /* Lifestyle-Label verstecken (S/N/L sind selbsterklärend); Personen-Label bleibt SICHTBAR,
     damit der Kids-/Personen-Schalter auf Mobile klar erkennbar ist */
  .topbar-right > .lifestyle-toggle > .kids-toggle-label { display: none; }

  /* Kids-/Personen-Block: eigene volle Zeile, Inhalt umbricht sauber - wächst in der Höhe mit,
     damit die Geburtsjahr-Dropdowns NICHT überlaufen und den Inhalt darunter überdecken */
  .topbar { flex-wrap: wrap; }
  .topbar-right { width: 100%; flex-wrap: wrap; }
  .topbar-right > .kids-toggle {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 10px;
  }
  .topbar-right > .kids-toggle > .kids-toggle-label:not(.kids-year-label) {
    display: inline-block; font-weight: 600;
  }
  .topbar-right > .kids-toggle .kids-toggle-buttons { flex: 0 0 auto; }

  /* Geburtsjahr je Kind: Label volle Zeile, Dropdown direkt darunter (klar zugeordnet, kein Versatz) */
  .kids-year-label { flex: 1 1 100%; margin: 4px 0 -2px 0; font-size: 0.8em; font-weight: 600; white-space: nowrap; }
  .kids-birthyear-select { flex: 0 1 220px; max-width: 240px; min-height: 40px; font-size: 0.85em; }
  .global-reset-btn { padding: 6px 10px; font-size: 0.8em; }

  /* ===== PHASEN (vertikal, kompakt) ===== */
  .phase {
    margin: 12px 8px;
    padding: 10px 10px 14px;
    border-radius: 10px;
  }
  .phase-header {
    flex-wrap: wrap; gap: 6px;
    margin-bottom: 10px; padding-bottom: 8px;
  }
  .phase-badge { font-size: 0.7em; padding: 3px 8px; }
  .phase-title { font-size: 0.98em; flex: 1 1 100%; }
  .phase-sub { font-size: 0.74em; margin-left: 0; flex-basis: 100%; }

  /* ===== GRID (3 Kacheln → 1 Spalte) ===== */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 12px; padding: 0;
  }
  .col {
    padding: 12px 12px;
    min-height: 0; /* erlaubt Kompaktheit */
    border-radius: 8px;
  }
  .col h2 { font-size: 1em; margin-top: 0; margin-bottom: 8px; }

  /* ===== RANKING ===== */
  .country-card { padding: 8px 10px; }
  .country-header { flex-wrap: wrap; gap: 6px; }
  .country-left { gap: 6px; min-width: 0; flex: 1 1 auto; }
  .country-rank { min-width: 20px; font-size: 0.85em; }
  .country-flag { font-size: 1em; }
  .country-name { font-size: 0.92em; }
  .country-cost-level { font-size: 0.85em; }
  .country-new-badge { font-size: 0.7em; margin-left: 3px; }
  .country-score { font-size: 0.9em; }
  .country-toggle { min-width: 26px; min-height: 26px; }
  .criterion {
    grid-template-columns: 1fr 50px 24px;
    padding: 6px 4px; gap: 6px;
  }
  .criterion-name { font-size: 0.78em; }
  .criterion-comment { font-size: 0.72em; }
  .fazit { font-size: 0.8em; padding: 6px 8px; }

  /* ===== COSTS (Pie + Breakdown) ===== */
  .cost-controls { gap: 6px; }
  .cost-control-row {
    flex-wrap: wrap; gap: 4px;
    grid-template-columns: 1fr;
  }
  .cost-control-label { flex-basis: auto; min-width: 70px; font-size: 0.82em; }
  .cost-control-select {
    flex: 1 1 100%; font-size: 0.85em;
    padding: 8px 8px; min-height: 38px;
  }
  .cost-total {
    padding: 8px 10px;
    flex-wrap: wrap;
  }
  .cost-total-value { font-size: 1.1em; }
  .chart-box { height: 240px !important; }
  .cost-breakdown li { font-size: 0.8em; padding: 5px 4px; }

  /* ===== STECKBRIEF ===== */
  .country-info { font-size: 0.85em; }
  .info-row {
    flex-wrap: wrap; gap: 2px;
    padding: 5px 0;
  }
  .info-label {
    flex-basis: 100%; font-size: 0.74em;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .info-data { font-size: 0.84em; }

  /* ===== BUDGET / RENTE / BURNDOWN (Charts) ===== */
  .budget-section { padding: 0; }
  .budget-header { grid-template-columns: 1fr !important; gap: 10px; padding: 12px; }
  .budget-header-left h2 { font-size: 1em; margin: 0 0 4px 0; }
  .budget-kpi-row { grid-template-columns: 1fr !important; gap: 6px; }
  .budget-kpi-emig { grid-column: auto !important; }
  .budget-kpi-emigcost { grid-column: auto !important; }
  .budget-kpi { padding: 10px 12px; }
  .budget-kpi-status { grid-column: auto !important; min-width: 0; }
  .budget-kpi-value { font-size: 1.1em; }
  .budget-kpi-label { font-size: 0.72em; }
  .budget-kpi-meta { font-size: 0.78em; }
  .budget-rate-control { padding: 0; }
  .budget-rate-row {
    flex-wrap: wrap; gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px dashed var(--border);
  }
  .budget-rate-label {
    flex: 1 1 100%; font-size: 0.85em;
    font-weight: 600;
  }
  .budget-rate-slider { flex: 1 1 100%; min-height: 38px; width: 100%; }
  .budget-rate-value {
    flex: 1 1 100%; text-align: center;
    font-size: 0.88em; padding-top: 4px;
  }
  .budget-rate-row select.cost-control-select {
    flex: 1 1 100% !important; max-width: 100% !important;
  }
  .budget-legend {
    flex-wrap: wrap; gap: 8px;
    padding: 8px 12px; font-size: 0.78em;
  }
  .legend-item { font-size: 0.78em; }
  .budget-chart-box { height: 280px; }
  /* Zoom-Presets: alle Buttons EINER Gruppe gleich breit in EINER Reihe (kein Wrap-Stretch des
     letzten Buttons mehr - vorher streckte sich der 4. Renten-Preset auf volle Breite). */
  .zoom-presets { flex-wrap: nowrap; gap: 4px; }
  .zoom-preset-btn { font-size: 0.72em; padding: 5px 4px; min-height: 30px; flex: 1 1 0; min-width: 0; }

  /* ===== BD-BLOCKS (Burndown-Slider-Grid) ===== */
  /* v2.163 Mobile-Refinement Einkommensphase 1/2: enger + buendig statt loose/scattered.
     Werte links unter dem Slider (nicht zentriert schwebend), kleinere vertikale Abstaende. */
  .bd-blocks-grid {
    grid-template-columns: 1fr !important;
    gap: 8px; padding: 10px;
  }
  .bd-block { padding: 10px 12px; gap: 3px; }
  .bd-block-title { font-size: 0.85em; margin-bottom: 1px; }
  .bd-slider-line {
    flex-wrap: wrap; gap: 2px 8px; margin: 0;
  }
  .bd-slider-line .budget-rate-slider { flex: 1 1 100%; width: 100%; min-width: 0; }
  .bd-slider-line .budget-rate-value {
    flex: 1 1 100%; text-align: left; padding-top: 0; font-size: 0.82em;
  }
  .bd-phase-group { margin-bottom: 12px; }
  .bd-phase-title { margin-bottom: 8px; }
  .bd-modus-toggle { flex-wrap: nowrap; gap: 4px; }
  .bd-modus-btn { flex: 1 1 0; min-height: 36px; font-size: 0.82em; white-space: nowrap; padding: 6px 4px; }
  /* Startdatum-Monat-Input + Reset buendig in einer Reihe */
  .bd-slider-line input[type="month"] { flex: 1 1 auto; min-width: 0; }

  /* ===== RENTEN-ETF-KPI ===== */
  .renten-etf-kpi {
    flex-basis: 100%; margin-left: 0; margin-top: 8px;
    padding: 8px 12px; flex-direction: row; align-items: baseline;
    gap: 8px; flex-wrap: wrap;
  }
  .renten-etf-kpi-label { font-size: 0.65em; }
  .renten-etf-kpi-value { font-size: 1em; }
  .renten-etf-kpi-meta { font-size: 0.7em; }

  /* ===== ANNAHMEN + KOSTENTABELLE ===== */
  .assumptions-section { padding: 12px !important; }
  .assumptions-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .assumptions-box, .cost-table-box {
    padding: 10px 12px !important;
  }
  .assumptions-list li { font-size: 0.85em; padding: 6px 8px; }
  /* Tabelle: scrollable horizontal mit deutlichem visual hint */
  .cost-table-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 3px solid rgba(30, 58, 95, 0.3);  /* visueller Scroll-Hint */
  }
  .cost-table {
    font-size: 0.68em; min-width: 380px;
  }
  .cost-table th, .cost-table td { padding: 4px 5px; }

  /* ===== FOOTER ===== */
  footer { padding: 14px 16px 24px; }
  footer p { font-size: 0.78em; }
  .changelog-block { max-width: 100%; }
  .changelog-list { font-size: 0.78em; max-height: 360px; padding: 6px 10px; }
  .changelog-entry-header { gap: 4px; }

  /* ===== TOOLTIPS (cost-tooltip etc.) ===== */
  .cost-tooltip { max-width: 90vw; font-size: 0.78em; }

  /* ===== RENTEN-ETF-TABELLEN ===== */
  .renten-etf-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .renten-etf-table { font-size: 0.72em; min-width: 340px; }

  /* ===== EXPORT-ROW: Icon-Buttons bleiben als kompakte Reihe ===== */
  .export-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
  }
  .export-btn {
    width: auto;
    min-height: 48px;
    min-width: 56px;
    flex: 0 0 auto;
  }
}

/* =========================================================
   TOUCH-TARGETS Mobile >=44px (v2.200.0, V5-MEDIUM 2026-07-05)
   Zwei Techniken:
   A) Kompakte, dicht gepackte Buttons (Topbar, Ranking-Icons, Zoom-Presets,
      KPI-Speichern): unsichtbares ::after streckt die TAPPBARE Flaeche vertikal
      auf 44px. Visuelle Groesse + das kompakte Single-Row-Layout (v2.91.0)
      bleiben unangetastet; volle Button-Breite -> kein horizontaler Overlap mit
      Nachbarn; Row2/Content stehen im DOM spaeter -> gewinnen im Overlap.
   B) Eigenstaendige Full-Width-Controls (Selects, Slider, Accordion-Summaries,
      Kriterien-Toggle): direkt min-height:44px, Layout darf mitwachsen.
   ========================================================= */
@media (max-width: 768px) {
  /* --- A) unsichtbare 44px-Hit-Area --- */
  .currency-btn,
  .lifestyle-btn,
  .kids-btn,
  #phases-toggle-all,
  #privacy-toggle,
  #btn-print,
  .country-toggle,
  .country-hide,
  .zoom-preset-btn,
  .budget-kpi-save-btn,
  .cost-inline-reset {
    position: relative;
  }
  .currency-btn::after,
  .lifestyle-btn::after,
  .kids-btn::after,
  #phases-toggle-all::after,
  #privacy-toggle::after,
  #btn-print::after,
  .country-toggle::after,
  .country-hide::after,
  .zoom-preset-btn::after,
  .budget-kpi-save-btn::after,
  .cost-inline-reset::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    /* rein tappbar, keine visuelle Wirkung */
  }

  /* --- B) Full-Width-Controls direkt auf 44px --- */
  .vergleich-multiselect-btn,
  .assumptions-collapse > summary,
  .info-disclosure-summary,
  .cost-control-select,
  .kids-birthyear-select,
  .budget-rate-slider,
  .bd-slider-line .budget-rate-slider,
  .bd-modus-btn {
    min-height: 44px;
  }
  .assumptions-collapse > summary,
  .info-disclosure-summary {
    box-sizing: border-box;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
  }

  /* --- Kosten-Inline-Inputs: Kompromiss 32px (44px wuerde die dichte
         Kategorie-Liste vertikal sprengen; von 18px auf 32px ist der Gewinn) --- */
  .cost-inline-input {
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
  }
}

/* =========================================================
   MOBILE-LESBARKEIT (v2.200.0, V5-MEDIUM/LOW 2026-07-05)
   ========================================================= */
@media (max-width: 768px) {
  /* Preisniveau-Filter-Pills waren 30x13px @9.3px-Font (kaum lesbar/tappbar) */
  .cost-filter { opacity: 1; padding: 2px; flex-wrap: wrap; }
  .cost-filter-btn {
    font-size: 0.82em;
    padding: 6px 9px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
  }

  /* Kriterien-/Laender-Multiselect: Panel + Toggle auf volle Breite
     (Panel war an einen ~151px schmalen Parent gebunden) */
  .vergleich-wrap .vergleich-selects { grid-template-columns: 1fr; gap: 10px; }
  .vergleich-row-block { width: 100%; }
  .vergleich-multiselect { display: block; width: 100%; }
  .vergleich-multiselect-btn { width: 100%; }
  .vergleich-multiselect-panel { max-height: 60vh; }

  /* Auswanderungs-Kosten-Tabelle: 16 Jahres-Spalten (~1352px) lassen sich NICHT
     sinnvoll stacken. Stattdessen erste Spalte (Posten-Label) sticky -> bleibt beim
     Rechts-Scrollen sichtbar, sodass Wert immer der Zeile zuordenbar ist. */
  .cost-table th:first-child,
  .cost-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-elev);
    box-shadow: 1px 0 0 var(--border);
  }
  .cost-table thead th:first-child { z-index: 2; }
  /* deutlicherer Scroll-Hinweis auf dem inneren Scroll-Container */
  .cost-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: 3px solid rgba(30, 58, 95, 0.25);
  }

  /* Kosten-Breakdown-Legende: Label umbrechen statt ellipsieren - der Tooltip mit dem
     vollen Text ist auf Touch nicht erreichbar, ellipsiertes Label wuerde Info verstecken
     (V5-LOW 2026-07-05). */
  .cost-breakdown li > span:first-child {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Sehr kleine Smartphones (iPhone SE etc.) */
@media (max-width: 380px) {
  body { font-size: 13px; }
  .topbar-left h1 { font-size: 1.05em; }
  .phase-title { font-size: 0.92em; }
  .col h2 { font-size: 0.95em; }
  .budget-kpi-value { font-size: 1em; }
  .country-name { font-size: 0.88em; }
  .criterion-name { font-size: 0.74em; }
  .criterion-comment { font-size: 0.7em; }
}

/* ---------- Beispiel-Annonce: Link in der Kosten-Kachel ---------- */
.cost-listing-link {
  margin-top: 10px;
}
.cost-listing-anchor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--accent);
  font-size: 0.82em;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.cost-listing-anchor:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}
.cost-listing-icon { font-size: 1.05em; line-height: 1; }
.cost-listing-text { flex: 1 1 auto; }
/* Pfeil zur Beispiel-Annonce: deutlich sichtbar (User-Fund 2026-07-04: die spätere muted-Regel
   überschrieb die Akzentfarbe aus Zeile ~1113 - der Pfeil war 14px klein und mausgrau, wirkte
   verschwunden). Akzentfarbe + größere Hit-Area, Touch-tauglich. */
.cost-listing-arrow {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1;
  padding: 0 3px;
  margin-left: 2px;
  border: none;
  border-radius: 0;
  background: none;
}
.cost-listing-arrow:hover { color: #0d2238; background: none; }

/* ---------- Beispiel-Annonce: Modal-Popup ---------- */
body.listing-modal-lock { overflow: hidden; }
.listing-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.listing-modal.open { display: flex; }
.listing-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 28, 0.62);
  backdrop-filter: blur(2px);
}
.listing-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  height: 90vh;
  max-height: 92vh;
  background: var(--bg-elev);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(8, 16, 28, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.listing-modal-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
  flex: 0 0 auto;
}
.listing-modal-title {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 0.92em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listing-modal-ext {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
}
.listing-modal-ext:hover { color: var(--accent); background: var(--accent-light); }
.listing-modal-close {
  border: none;
  background: transparent;
  font-size: 1.5em;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 6px;
}
.listing-modal-close:hover { color: var(--text); background: var(--bg); }
.listing-modal-frame {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  background: #f5f7fa;
}
@media (max-width: 560px) {
  .listing-modal { padding: 0; }
  .listing-modal-dialog { height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* ---- Kachel "Kosten der Auswanderung" + Detail-Popup (v2.164) ---- */
/* 3-Spalten-Grid (1fr auto 1fr): "Bei Umzug" spannt Spalte 1+2 (rechte Kante buendig mit der
   rechten Kante der gruenen Status-Kachel in Spalte 2), "Kosten der Auswanderung" sitzt in Spalte 3
   unter "Zielbudget". In schmaleren Layouts beide zurueck auf auto. */
.budget-kpi-emig { grid-column: 1 / 3; }
.budget-kpi-emigcost { background: var(--bg-elev-2); border-left-color: var(--border-strong); grid-column: 3; }
.budget-kpi-value-row { display: flex; align-items: center; gap: 8px; }
.emigcost-detail-btn {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--accent);
  font-size: 0.95em;
  line-height: 1;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.emigcost-detail-btn:hover { background: var(--accent-light); border-color: var(--accent); }
body.emigcost-modal-lock { overflow: hidden; }
.emigcost-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.emigcost-modal.open { display: flex; }
.emigcost-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 28, 0.62);
  backdrop-filter: blur(2px);
}
.emigcost-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  background: var(--bg-elev);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(8, 16, 28, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.emigcost-modal-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
  flex: 0 0 auto;
}
.emigcost-modal-title { flex: 1 1 auto; font-weight: 700; font-size: 0.95em; color: var(--text); }
.emigcost-modal-close {
  border: none; background: transparent; font-size: 1.5em; line-height: 1;
  color: var(--text-muted); cursor: pointer; padding: 0 4px; border-radius: 6px;
}
.emigcost-modal-close:hover { color: var(--text); background: var(--bg); }
.emigcost-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.emigcost-table { width: 100%; border-collapse: collapse; font-size: 0.86em; }
.emigcost-table th, .emigcost-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.emigcost-table th { font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.emigcost-table td.num, .emigcost-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emigcost-table td.when { color: var(--text-2); white-space: nowrap; }
.emigcost-table tr.group-head td { font-weight: 700; color: var(--text); background: var(--bg-elev-2); padding-top: 9px; }
.emigcost-table tr.total-row td { font-weight: 800; border-top: 2px solid var(--border-strong); border-bottom: none; padding-top: 9px; }
.emigcost-table tr.refund td { color: var(--text-muted); font-style: italic; }
.emigcost-table tr.emig-row td { font-weight: 800; background: var(--accent-light); }
.emigcost-desc { color: var(--text-muted); font-size: 0.85em; font-weight: 400; }
.emigcost-modal-note { margin-top: 10px; font-size: 0.8em; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 560px) {
  .emigcost-modal { padding: 0; }
  .emigcost-modal-dialog { height: 100vh; max-height: 100vh; border-radius: 0; max-width: 100%; }
}

/* ---- Beim Auswandern beachten (Steckbrief-Sektion, v2.163) ---- */
.ba-block > details > summary { list-style: none; }
.ba-block > details > summary::-webkit-details-marker { display: none; }
.ba-block > details > summary { cursor: pointer; }
/* Visum + Empfehlung Visa-Wahl: Disclosure-Pfeil verstecken (wie Auswander-Tipps-Kachel) */
.info-disclosure-summary { list-style: none; cursor: pointer; }
.info-disclosure-summary::-webkit-details-marker { display: none; }
.ba-count {
  display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px;
  font-size: 0.72rem; font-weight: 600; line-height: 18px; text-align: center;
  color: #fff; background: var(--accent, #1e3a5f); border-radius: 9px; vertical-align: middle;
}
.ba-count-top { background: var(--accent, #1e3a5f); }
.ba-intro { margin: 8px 0 10px; line-height: 1.45; }
.ba-cat { margin: 4px 0; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; overflow: hidden; }
.ba-cat > summary {
  list-style: none; cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 0.9rem;
  background: var(--surface-2, #f1f5f9); color: var(--text, #0f172a);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ba-cat > summary::-webkit-details-marker { display: none; }
.ba-cat[open] > summary { border-bottom: 1px solid var(--border, #e2e8f0); }
.ba-list { list-style: none; margin: 0; padding: 6px 12px 10px; }
.ba-tip {
  position: relative; padding: 7px 0 7px 16px; font-size: 0.86rem; line-height: 1.5;
  color: var(--text, #0f172a); border-bottom: 1px solid var(--border-soft, #f1f5f9);
}
.ba-tip:last-child { border-bottom: none; }
.ba-tip::before { content: "-"; position: absolute; left: 2px; color: var(--accent, #1e3a5f); font-weight: 700; }
.ba-tip.ba-k-mittel { opacity: 0.92; }
.ba-tip.ba-k-niedrig { opacity: 0.82; font-style: italic; }

/* Produkt: leere Eingabefelder zeigen kursives "ausfuellen" */
input::placeholder { font-style: italic; }

/* Produkt: Land-Wunsch-Feld + Mini-Stand unter der Weltkarte */
.land-wunsch-block { display:flex; flex-direction:column; gap:4px; margin:10px 0; }
#land-wunsch-input { width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--border, #d3dce6); border-radius:8px; font-size:0.82rem; background:var(--bg-panel, #fff); color:inherit; }
#ranking-stand { font-size:0.66rem; opacity:0.65; }
#land-wunsch-feedback { color: var(--good, #16a34a); }

/* Produkt: Wahlomat-Scoring-Wizard */
.scoring-wizard { background: var(--bg-panel, #fff); border: 1px solid var(--border, #d3dce6); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.wizard-titel { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.wizard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.wizard-chip { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border, #c8d3e0); background: transparent; font-size: 0.8rem; cursor: pointer; color: inherit; }
.wizard-chip.active { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.wizard-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border, #e2e8f0); }
.wizard-row-label { font-size: 0.83rem; }
.wizard-gewichte { display: inline-flex; gap: 4px; }
.wizard-gewichte .wizard-g { min-width: 34px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--border, #c8d3e0); background: transparent; cursor: pointer; font-size: 0.78rem; color: inherit; }
.wizard-gewichte .wizard-g.active { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.wizard-actions { display: flex; gap: 8px; margin-top: 12px; }
.wizard-btn { padding: 8px 14px; border-radius: 10px; border: none; background: #1e3a5f; color: #fff; font-weight: 600; cursor: pointer; font-size: 0.84rem; }
.wizard-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.wizard-btn-sek { background: transparent; color: inherit; border: 1px solid var(--border, #c8d3e0); font-weight: 500; }
.scoring-edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }