/* ============================================================
   Potenzialrechner – App-Styles
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-heading); letter-spacing: 0.05em; margin: 0; }
h1 { font-weight: 700; font-size: 40px; line-height: 1.2; }
h2 { font-weight: 600; font-size: 32px; line-height: 1.25; }
h3 { font-weight: 600; font-size: 24px; line-height: 1.3; }
p { margin: 0; }
a { color: var(--color-primary); }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.muted { color: var(--color-text-muted); }
.nowrap { white-space: nowrap; }

/* ---------- App-Rahmen ---------- */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-header {
  background: var(--color-primary);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.app-header img { height: 34px; display: block; }
.app-header .tagline {
  color: var(--color-text-inverse);
  font-size: 14px;
  opacity: 0.85;
}
@media (max-width: 640px) { .app-header .tagline { display: none; } }

.app-main {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-16);
}
.app-main.is-dashboard { max-width: 1120px; }

/* ---------- Fortschritt ---------- */
.progress {
  margin-bottom: var(--sp-8);
}
.progress-bar {
  height: 8px;
  background: var(--color-disabled-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 400ms ease;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---------- Wizard-Schritt ---------- */
.step { position: relative; }
.step-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-tint-hover);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-4);
}
.step-eyebrow svg { width: 16px; height: 16px; }
.step h2 { margin-bottom: var(--sp-3); }
.step .lead { font-size: 18px; color: var(--color-text-muted); margin-bottom: var(--sp-8); max-width: 60ch; }
.step .lead.small { font-size: 16px; margin-bottom: var(--sp-6); }

/* Ein-/Ausblend-Animation */
@keyframes stepIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes stepOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-16px); }
}
.step.enter { animation: stepIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.step.leave { animation: stepOut 220ms ease-in both; }
@media (prefers-reduced-motion: reduce) {
  .step.enter, .step.leave { animation: none; }
  .progress-bar > span { transition: none; }
}

/* ---------- Auswahl-Karten (Choice) ---------- */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: left;
  background: var(--color-surface);
  border: 1.5px solid rgba(141, 163, 153, 0.4);
  border-radius: var(--radius-large);
  padding: var(--sp-6);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}
.choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--color-secondary); }
.choice .choice-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-medium);
  background: var(--color-primary-tint-hover);
  color: var(--color-primary);
  margin-bottom: var(--sp-2);
}
.choice .choice-icon svg { width: 26px; height: 26px; }
.choice .choice-title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; letter-spacing: 0.02em; }
.choice .choice-desc { font-size: 14px; color: var(--color-text-muted); }
.choice .choice-check {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 22px; height: 22px; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-secondary);
  display: grid; place-items: center;
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--transition), transform var(--transition), background var(--transition), border-color var(--transition);
}
.choice .choice-check svg { width: 14px; height: 14px; color: #fff; }
.choice.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-tint-hover);
}
.choice.selected .choice-check {
  opacity: 1; transform: scale(1);
  background: var(--color-primary); border-color: var(--color-primary);
}
.choice.selected .choice-icon { background: var(--color-primary); color: var(--color-text-inverse); }

/* ---------- Inline-Hinweis ---------- */
.notice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid rgba(141, 163, 153, 0.4);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-medium);
  padding: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-6);
  font-size: 15px;
}
.notice.info { border-left-color: var(--color-info); }
.notice.stop { border-left-color: var(--color-error); }
.notice svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-primary); margin-top: 2px; }
.notice.stop svg { color: var(--color-error); }

/* ---------- Formfelder ---------- */
.field { margin-bottom: var(--sp-6); }
.field > label { display: block; font-weight: 600; margin-bottom: var(--sp-2); }
.field .hint { font-size: 13px; color: var(--color-text-muted); margin-top: var(--sp-1); }
.input, select.input {
  width: 100%;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-secondary);
  border-radius: var(--radius-small);
  padding: 12px 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:hover, .input:focus { border-color: var(--color-primary); }
.input:focus { outline: var(--focus-ring); outline-offset: 2px; }

.input-affix {
  position: relative;
  display: flex; align-items: center;
}
.input-affix .input { padding-right: 52px; }
.input-affix .affix {
  position: absolute; right: 16px;
  color: var(--color-text-muted); font-size: 14px; pointer-events: none;
}

/* großes Zahlenfeld (Stepper) */
.number-hero {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--color-surface);
  border: 1.5px solid rgba(141, 163, 153, 0.4);
  border-radius: var(--radius-large);
  padding: var(--sp-4) var(--sp-6);
  width: fit-content;
  max-width: 100%;
}
.number-hero button {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-primary);
  background: transparent; color: var(--color-primary);
  font-size: 24px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--transition);
}
.number-hero button:hover { background: var(--color-primary-tint-hover); }
.number-hero input {
  width: 120px; border: none; background: transparent;
  font-family: var(--font-heading); font-weight: 700; font-size: 40px;
  text-align: center; color: var(--color-text);
  -moz-appearance: textfield;
}
.number-hero input::-webkit-outer-spin-button,
.number-hero input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.number-hero .unit { font-size: 15px; color: var(--color-text-muted); }

/* ---------- Rassen-Karten ---------- */
.breed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.breed {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--color-surface);
  border: 1.5px solid rgba(141, 163, 153, 0.4);
  border-radius: var(--radius-medium);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.breed:hover { transform: translateY(-1px); border-color: var(--color-secondary); }
.breed .breed-name { font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.breed .breed-tag { font-size: 12px; color: var(--color-text-muted); }
.breed .dot {
  width: 18px; height: 18px; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-secondary); flex-shrink: 0;
  display: grid; place-items: center;
  transition: background var(--transition), border-color var(--transition);
}
.breed .dot svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.breed.selected { border-color: var(--color-primary); background: var(--color-primary-tint-hover); }
.breed.selected .dot { background: var(--color-primary); border-color: var(--color-primary); }
.breed.selected .dot svg { opacity: 1; }

/* ---------- Rollen-Zuordnung ---------- */
.role-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(141, 163, 153, 0.25);
  flex-wrap: wrap;
}
.role-row:last-child { border-bottom: none; }
.role-label { flex: 1 1 240px; display: flex; align-items: center; gap: var(--sp-3); font-weight: 500; }
.role-label .role-ic { width: 34px; height: 34px; border-radius: var(--radius-medium); background: var(--color-primary-tint-hover); color: var(--color-primary); display: grid; place-items: center; flex-shrink: 0; }
.role-label .role-ic svg { width: 20px; height: 20px; }
.role-controls { display: flex; gap: var(--sp-2); flex: 1 1 260px; }
.role-controls select { flex: 1; }
.role-controls input { flex: 1; min-width: 0; }

/* Segmented control (Ja/Nein etc.) */
.segmented {
  display: inline-flex;
  background: var(--color-disabled-surface);
  border-radius: var(--radius-full);
  padding: 4px;
  gap: 4px;
}
.segmented button {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--color-text-muted);
  padding: 8px 20px; border-radius: var(--radius-full);
  transition: background var(--transition), color var(--transition);
}
.segmented button.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-card); }

/* ---------- Slider ---------- */
.slider-card {
  background: var(--color-surface);
  border: 1px solid rgba(141, 163, 153, 0.3);
  border-radius: var(--radius-large);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.slider-head .s-label { font-weight: 600; }
.slider-head .s-value {
  font-family: var(--font-heading); font-weight: 700; font-size: 22px;
  color: var(--color-primary); white-space: nowrap;
}
.slider-sub { font-size: 13px; color: var(--color-text-muted); margin-bottom: var(--sp-4); }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: var(--radius-full);
  background: var(--color-disabled-surface);
  outline-offset: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--color-action); border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform var(--transition);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--color-action); border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-card); cursor: pointer;
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--color-disabled-surface); }

.slider-section-title {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-heading); font-weight: 600; font-size: 20px;
  letter-spacing: 0.03em; color: var(--color-primary);
  margin: var(--sp-8) 0 var(--sp-4);
}
.slider-section-title:first-of-type { margin-top: 0; }
.slider-section-title .sec-ic { width: 32px; height: 32px; border-radius: var(--radius-medium); background: var(--color-primary); color: var(--color-text-inverse); display: grid; place-items: center; }
.slider-section-title .sec-ic svg { width: 20px; height: 20px; }
.slider-section-sub { font-size: 14px; color: var(--color-text-muted); margin: calc(var(--sp-4) * -0.5) 0 var(--sp-4); }

/* Aufteilung Logistik (Summe 100%) */
.split-warn { color: var(--color-error); font-weight: 600; font-size: 14px; }
.split-ok { color: var(--color-success); font-weight: 600; font-size: 14px; }

/* Prominenter Preis-Schritt */
.price-step .slider-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  box-shadow: var(--shadow-card);
}
.price-step .slider-card .s-label { font-size: 15px; }
.price-step .slider-card .s-value { font-size: 34px; }
.price-step .slider-card { padding: var(--sp-8) var(--sp-6); }

/* Zwei-Spalten für Slider auf breiten Screens */
@media (min-width: 720px) {
  .slider-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .slider-2col .slider-card { margin-bottom: 0; }
}

/* ---------- Buttons / Navigation ---------- */
.nav {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: var(--radius-medium); padding: 12px 24px;
  cursor: pointer; border: 1.5px solid transparent;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--color-action); color: var(--color-text); }
.btn-primary:hover { background: var(--color-action-hover); }
.btn-primary:active { background: var(--color-action-active); transform: translateY(1px); }
.btn-primary:disabled { background: var(--color-disabled-surface); color: rgba(26,36,33,0.45); cursor: not-allowed; }
.btn-secondary { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-primary-tint-hover); }
.btn-secondary:active { background: var(--color-primary-tint-active); }
.btn-ghost { background: transparent; color: var(--color-text-muted); border: none; padding: 12px 8px; }
.btn-ghost:hover { color: var(--color-primary); }
.btn-lg { padding: 16px 32px; font-size: 15px; }

/* ---------- Dashboard ---------- */
.dash-hero {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-large);
  padding: var(--sp-8);
  margin-bottom: var(--sp-8);
  display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: center; justify-content: space-between;
}
.dash-hero .verdict-eyebrow { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.dash-hero h2 { color: var(--color-text-inverse); margin: var(--sp-2) 0; font-size: 34px; }
.dash-hero .verdict-sub { opacity: 0.9; max-width: 46ch; }
.dash-hero .verdict-figure { text-align: right; }
.dash-hero .verdict-figure .big {
  font-family: var(--font-heading); font-weight: 700; font-size: 48px; line-height: 1;
}
.dash-hero .verdict-figure .big.pos { color: #BCE0A3; }
.dash-hero .verdict-figure .big.neg { color: #F0B8BE; }
.dash-hero .verdict-figure .cap { font-size: 13px; opacity: 0.8; margin-top: var(--sp-2); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-full); padding: 6px 14px;
  font-size: 12px; font-weight: 600; letter-spacing: -0.02em;
}
.badge.pos { background: rgba(98,161,58,0.18); color: #BCE0A3; }
.badge.neg { background: rgba(153,37,50,0.22); color: #F0B8BE; }

.dash-hero .verdict-figure .big-sub {
  font-family: var(--font-heading); font-weight: 700; font-size: 26px; line-height: 1;
}
.dash-hero .verdict-figure .big-sub.pos { color: #BCE0A3; }
.dash-hero .verdict-figure .big-sub.neg { color: #F0B8BE; }

/* ---------- Geldfluss: zwei getrennte, beschriftete Balken ---------- */
.flow-row { margin-bottom: var(--sp-6); }
.flow-row:last-of-type { margin-bottom: 0; }
.flow-row-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.flow-row-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.flow-row-title svg { width: 20px; height: 20px; }
.flow-row-sum { font-family: var(--font-heading); font-weight: 700; font-size: 24px; white-space: nowrap; }
.flow-row.stay .flow-row-title, .flow-row.stay .flow-row-sum { color: var(--color-primary); }
.flow-row.leave .flow-row-title, .flow-row.leave .flow-row-sum { color: var(--color-text-muted); }
/* farblich abgesetzte "Wanne" für jede Zeile */
.flow-row.stay .flow-bar { background: rgba(17, 75, 67, 0.10); }
.flow-row.leave .flow-bar { background: rgba(26, 36, 33, 0.06); }
.flow-bar {
  display: flex; width: 100%; height: 42px;
  border-radius: var(--radius-medium); overflow: hidden;
}
.flow-seg { height: 100%; transition: width var(--transition); min-width: 1px; }
.flow-legend { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid rgba(141,163,153,0.25); }
@media (max-width: 620px) { .flow-legend { grid-template-columns: 1fr; gap: var(--sp-4); } }
.flow-legend h4 { font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.03em; margin: 0 0 var(--sp-2); }
.flow-legend h4.stay-h { color: var(--color-primary); }
.flow-legend h4.leave-h { color: var(--color-text-muted); }
.flow-item { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; padding: 4px 0; }
.flow-item .dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.flow-item .fi-name { flex: 1; color: var(--color-text-muted); }
.flow-item .fi-val { font-weight: 600; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.kpi {
  background: var(--color-surface);
  border: 1px solid rgba(141, 163, 153, 0.3);
  border-radius: var(--radius-large);
  padding: var(--sp-6);
}
.kpi .kpi-label { font-size: 13px; color: var(--color-text-muted); display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.kpi .kpi-label svg { width: 16px; height: 16px; }
.kpi .kpi-value { font-family: var(--font-heading); font-weight: 700; font-size: 28px; color: var(--color-text); }
.kpi .kpi-value.pos { color: var(--color-success); }
.kpi .kpi-value.neg { color: var(--color-error); }
.kpi .kpi-foot { font-size: 12px; color: var(--color-text-muted); margin-top: var(--sp-2); }

.panel {
  background: var(--color-surface);
  border: 1px solid rgba(141, 163, 153, 0.3);
  border-radius: var(--radius-large);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.panel-title {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: 0.03em;
  margin-bottom: var(--sp-2);
}
.panel-title .p-ic { width: 30px; height: 30px; border-radius: var(--radius-medium); background: var(--color-primary-tint-hover); color: var(--color-primary); display: grid; place-items: center; }
.panel-title .p-ic svg { width: 18px; height: 18px; }
.panel-sub { color: var(--color-text-muted); font-size: 14px; margin-bottom: var(--sp-6); }

.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); font-size: 13px; }
.chart-legend .lg { display: flex; align-items: center; gap: var(--sp-2); color: var(--color-text-muted); }
.chart-legend .lg .sw { width: 14px; height: 14px; border-radius: 3px; }
.chart-legend .lg .sw.line { height: 3px; border-radius: 2px; }
.chart-wrap { width: 100%; overflow-x: auto; }
svg .grid-line { stroke: rgba(141,163,153,0.3); stroke-width: 1; }
svg .axis-text { fill: var(--color-text-muted); font-family: var(--font-body); font-size: 11px; }
svg .val-text { fill: var(--color-text); font-family: var(--font-body); font-size: 11px; font-weight: 600; }

.dash-2col { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
.dash-2col > * { min-width: 0; } /* verhindert, dass breite Diagramme die Spalte aufblähen */
@media (min-width: 900px) { .dash-2col { grid-template-columns: 1fr 1fr; } .dash-2col .panel { margin-bottom: 0; } }
.chart-wrap { max-width: 100%; }

/* ---------- Tabellen ---------- */
.table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius-medium); }
table.data {
  width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px;
}
table.data th, table.data td { padding: 10px 14px; text-align: right; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; position: sticky; left: 0; background: var(--color-surface); }
table.data thead th {
  background: var(--color-primary); color: var(--color-text-inverse);
  font-weight: 600; font-size: 13px; position: sticky; top: 0;
}
table.data thead th:first-child { background: var(--color-primary); color: var(--color-text-inverse); }
table.data tbody tr:nth-child(even) td { background: rgba(141,163,153,0.08); }
table.data tbody tr:nth-child(even) td:first-child { background: #F2EFEA; }
table.data tbody tr.total-row td { font-weight: 700; border-top: 2px solid var(--color-primary); background: var(--color-primary-tint-hover); }
table.data tbody tr.total-row td:first-child { background: var(--color-primary-tint-hover); }
table.data td.pos { color: var(--color-success); font-weight: 600; }
table.data td.neg { color: var(--color-error); font-weight: 600; }
.table-toggle { margin-bottom: var(--sp-4); }

/* Werbe-Detailtabelle: 2-Spalten Key/Value Liste */
table.kv { width: 100%; border-collapse: collapse; font-size: 14px; }
table.kv td { padding: 10px 8px; border-bottom: 1px solid rgba(141,163,153,0.25); }
table.kv td:last-child { text-align: right; font-weight: 600; font-family: var(--font-body); }
table.kv tr:last-child td { border-bottom: none; }

/* Annahmen */
details.assumptions { margin-top: var(--sp-8); background: var(--color-surface); border: 1px solid rgba(141,163,153,0.3); border-radius: var(--radius-large); padding: var(--sp-4) var(--sp-6); }
details.assumptions summary { cursor: pointer; font-weight: 600; color: var(--color-primary); }
details.assumptions ul { margin: var(--sp-4) 0 0; padding-left: var(--sp-6); color: var(--color-text-muted); font-size: 14px; line-height: 1.7; }

.footer-note { text-align: center; color: var(--color-text-muted); font-size: 13px; margin-top: var(--sp-12); }

/* ============================================================
   Intro / Startbildschirm
   ============================================================ */
.app-main.is-intro { max-width: 860px; }
.intro { text-align: center; }
.intro-hero { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.intro-title { font-size: 40px; line-height: 1.15; max-width: 16ch; margin: var(--sp-2) 0; }
.intro-lead { font-size: 18px; line-height: 1.6; color: var(--color-text-muted); max-width: 60ch; margin: 0 auto; }
.intro-lead strong { color: var(--color-text); }
.intro-hero .btn { margin-top: var(--sp-2); }

.intro-figure { margin: var(--sp-12) 0 0; }
.intro-figure picture, .intro-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
}
.intro-figure figcaption { margin-top: var(--sp-3); font-size: 14px; color: var(--color-text-muted); }

.intro-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
  margin: var(--sp-12) 0;
}
.intro-stat {
  background: var(--color-surface);
  border: 1px solid rgba(141, 163, 153, 0.3);
  border-radius: var(--radius-large);
  padding: var(--sp-6) var(--sp-4);
}
.intro-stat-big { font-family: var(--font-heading); font-weight: 700; font-size: 30px; color: var(--color-primary); line-height: 1.1; }
.intro-stat-label { font-size: 14px; color: var(--color-text-muted); margin-top: var(--sp-2); }

.intro-steps { text-align: left; margin: var(--sp-12) auto; max-width: 620px; }
.intro-how { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.intro-how li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 16px; }
.how-n {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-text-inverse);
  display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 15px;
}

.intro-cta-bottom { margin-top: var(--sp-8); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.intro-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-muted); }
.intro-note svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .intro-title { font-size: 28px; }
  .intro-lead { font-size: 16px; }
  .intro-figure { margin-top: var(--sp-8); }
  .intro-stats { grid-template-columns: 1fr; gap: var(--sp-3); margin: var(--sp-8) 0; }
  .intro-stat { display: flex; align-items: baseline; gap: var(--sp-3); text-align: left; padding: var(--sp-4); }
  .intro-stat-big { font-size: 24px; }
  .intro-stat-label { margin-top: 0; }
  .intro-steps { margin: var(--sp-8) auto; }
  .intro-cta-bottom .btn { width: 100%; justify-content: center; }
}

/* ---------- „Annahmen anpassen"-Aufforderung im Dashboard ---------- */
.edit-bar {
  display: flex; justify-content: flex-start; align-items: center;
  gap: var(--sp-4); flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid rgba(141, 163, 153, 0.3);
  border-left: 4px solid var(--color-action);
  border-radius: var(--radius-large);
  padding: var(--sp-4) var(--sp-6);
}
.edit-bar > div { flex: 0 1 auto; max-width: 640px; font-size: 15px; }
.edit-bar .btn { flex: 0 0 auto; }

/* ---------- Einstellungen / Annahmen-Seite ---------- */
.app-main.is-settings { max-width: 940px; }
.settings-page { padding-bottom: 88px; }
.settings-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.set-section {
  background: var(--color-surface);
  border: 1px solid rgba(141, 163, 153, 0.3);
  border-radius: var(--radius-large);
  padding: var(--sp-6);
}
.set-h { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: 0.03em; margin: 0 0 var(--sp-4); }
.set-h svg { width: 24px; height: 24px; color: var(--color-primary); flex-shrink: 0; }
.set-body .field:last-child, .set-body .slider-card:last-child { margin-bottom: 0; }
.stack-6 > * + * { margin-top: var(--sp-6); }

.apply-bar { position: sticky; bottom: var(--sp-4); z-index: 20; margin-top: var(--sp-8); }
.apply-inner {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  background: var(--color-primary); color: var(--color-text-inverse);
  border-radius: var(--radius-large); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6);
  box-shadow: var(--shadow-card-hover);
}
.apply-inner .apply-hint { color: rgba(250, 248, 245, 0.85); font-size: 14px; }

/* Utility */
.stack-8 > * + * { margin-top: var(--sp-8); }
.hidden { display: none !important; }
.center { text-align: center; }

/* ============================================================
   Mobile-Optimierung (Smartphone-First-Feinschliff)
   ============================================================ */
@media (max-width: 640px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }

  .app-header { padding: var(--sp-3) var(--sp-4); }
  .app-header img { height: 28px; }
  .app-main { padding: var(--sp-6) var(--sp-4) var(--sp-12); }

  .step h2 { font-size: 24px; }
  .step .lead { font-size: 16px; margin-bottom: var(--sp-6); }
  .step .lead.small { margin-bottom: var(--sp-4); }

  .choice { padding: var(--sp-4); }
  .choice .choice-icon { width: 38px; height: 38px; }

  /* Zahlen-Stepper: volle Breite, Daumen-freundlich */
  .number-hero { width: 100%; justify-content: space-between; padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  .number-hero input { font-size: 30px; width: auto; flex: 1; min-width: 0; }
  .number-hero button { width: 48px; height: 48px; }

  .panel, .kpi, .slider-card, .set-section { padding: var(--sp-4); }
  .panel-title { font-size: 18px; }
  .slider-card { padding: var(--sp-4); }

  .dash-hero { padding: var(--sp-6); flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
  .dash-hero h2 { font-size: 26px; }
  .dash-hero .verdict-figure { text-align: left; }
  .dash-hero .verdict-figure .big { font-size: 40px; }
  .dash-hero .verdict-figure .big-sub { font-size: 24px; }

  .price-step .slider-card { padding: var(--sp-6) var(--sp-4); }
  .price-step .slider-card .s-value { font-size: 28px; }

  /* Diagramme lesbar halten: horizontal scrollbar statt zerquetscht */
  .chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart-wrap svg { min-width: 440px; }
  .chart-legend { font-size: 12px; gap: var(--sp-3); }
  .flow-bar { height: 38px; }
  .flow-head { font-size: 13px; }
  .flow-head strong { font-size: 16px; }

  /* Slider-Regler mit größerem Daumen für Touch */
  input[type="range"] { height: 10px; }
  input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
  input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; }

  /* Navigation: gestapelt, volle Breite */
  .nav { flex-direction: column-reverse; align-items: stretch; gap: var(--sp-3); }
  .nav > span { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
  .nav .btn { width: 100%; justify-content: center; }
  .btn-ghost { order: -1; }

  .edit-bar { flex-direction: column; align-items: stretch; }
  .edit-bar .btn { width: 100%; justify-content: center; }

  .settings-top { flex-direction: column; align-items: stretch; }
  .settings-top .btn { width: 100%; justify-content: center; }
  .apply-inner { padding: var(--sp-3) var(--sp-4); }
  .apply-inner .apply-hint { display: none; }
  .apply-inner .btn { width: 100%; justify-content: center; }

  /* Rollen-Zuordnung: gestapelt */
  .role-label { flex: 1 1 100%; }
  .role-controls { flex: 1 1 100%; }

  table.data { font-size: 13px; }
  table.data th, table.data td { padding: 8px 10px; }
}

@media (max-width: 400px) {
  .kpi .kpi-value { font-size: 24px; }
  .dash-hero .verdict-figure .big { font-size: 34px; }
}

/* ---------- Druck / PDF ---------- */
@media print {
  body { background: #fff; }
  .app-header { background: var(--color-primary) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .app-main.is-dashboard { max-width: none; padding: 0; }
  .nav, .btn { display: none !important; }
  .panel, .kpi, .dash-hero { box-shadow: none; break-inside: avoid; }
  .dash-2col { display: block; }
  .dash-2col .panel { margin-bottom: var(--sp-6); }
  /* Vollständige Tabelle drucken: nicht clippen, umbrechen erlauben */
  .table-wrap { overflow: visible !important; }
  table.data { min-width: 0 !important; width: 100%; font-size: 10px; }
  table.data th, table.data td { padding: 4px 6px; white-space: normal; }
  table.data thead th, table.data td:first-child { position: static !important; }
  table.data thead { display: table-header-group; }
  table.data tr { break-inside: avoid; }
  details.assumptions { break-inside: avoid; }
  details.assumptions[open] summary { display: none; }
  .panel, .dash-hero, .kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}