.invalid-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  text-align: center;
}

.invalid-state p {
  color: var(--text-secondary);
  font-size: 17px;
}

.invalid-state[hidden],
.rechner-container[hidden] {
  display: none;
}

@keyframes rechner-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rechner-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: rechner-fade-in 0.4s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .rechner-container {
    animation: none;
  }
}

.page-headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: center;
}

@media (max-width: 480px) {
  .page-headline {
    font-size: 22px;
    white-space: normal;
  }
}

.rechner-layout {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px) {
  .rechner-layout {
    grid-template-columns: 1fr;
  }
}

.inputs-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 24px;
}

@media (max-width: 900px) {
  .inputs-card {
    position: static;
  }
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.input-group:first-child {
  padding-top: 0;
  border-top: none;
}

.input-group-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field[hidden] {
  display: none;
}

.field label {
  font-size: 15px;
  font-weight: 500;
}

.helper {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: auto;
  accent-color: var(--action);
  cursor: pointer;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-style: normal;
  font-family: Georgia, serif;
  cursor: help;
}

.info-icon:hover,
.info-icon:focus-visible {
  background: var(--action);
  color: var(--text-inverted);
  outline: none;
}

.info-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--surface);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
  pointer-events: none;
}

.info-icon:hover .info-tooltip,
.info-icon:focus-visible .info-tooltip {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 480px) {
  .info-tooltip {
    left: auto;
    right: -8px;
    transform: none;
    width: 180px;
  }
}

.slider-value {
  font-weight: 400;
  color: var(--text-secondary);
}

.result-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.verdict {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--background-bold);
  color: var(--text-secondary);
}

.verdict::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--grey-300);
}

.verdict.positive {
  background: var(--green-50);
  color: var(--text-default);
}

.verdict.positive::before {
  background: var(--green-500);
}

@media (max-width: 480px) {
  .verdict {
    font-size: 17px;
    padding: 16px 18px;
  }
}

.verdict-reframe {
  margin: -12px 0 0;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: var(--akaroa-50);
  border: 1px solid var(--akaroa-200);
}

.verdict-reframe p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.verdict-reframe strong {
  color: var(--text-primary);
}

.chart-card {
  padding: 20px 20px 12px;
  /* Chart.js's responsive resizing needs an established containing block on the wrapper
     to size the canvas correctly — without it, the canvas can render at an intrinsic
     pixel width taken from the device's pixel ratio instead of the card's actual CSS
     width, which is what was pushing the whole page into horizontal scroll on mobile. */
  position: relative;
  overflow: hidden;
}

.chart-card canvas {
  max-width: 100%;
}

.stat-tiles {
  display: grid;
  /* auto-fit + minmax reflows off the grid's own available width, not a viewport-width
     breakpoint — so it still wraps to fewer columns even if a browser is misreporting the
     viewport (e.g. "Request Desktop Site" mode), which a fixed max-width media query can't
     recover from. */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .stat-tiles {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
}

.stat-tile {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  /* Without this, a grid item's minimum width defaults to its content's unwrapped size —
     so a nowrap value like "48.535 €" could force this card wider than its assigned grid
     track, spilling the text past the card's own rounded edges instead of wrapping. */
  min-width: 0;
}

.stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -6px rgba(0, 0, 0, 0.1);
}

.stat-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--background-bold);
  color: var(--text-accent);
}

.stat-tile-icon svg {
  width: 18px;
  height: 18px;
}

.stat-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.stat-value {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  /* Wrap instead of overflow once a card gets narrow — better a two-line value than text
     spilling past the card's rounded corners. */
  overflow-wrap: break-word;
}

/* ---- Hero metrics — the two numbers that actually matter (neue AfA % and die
   Steuerersparnis pro Jahr), pulled out from the old 4-way stat grid and the separate
   Ohne/Mit-Gutachten comparison so a first-time visitor sees the answer immediately
   instead of six equally-weighted numbers. */

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.hero-metric {
  padding: 24px;
  text-align: center;
  min-width: 0;
}

.hero-metric.accent {
  background: var(--accent-green-bg);
  border-color: transparent;
}

.hero-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.hero-metric.accent .hero-label {
  color: var(--accent-green);
}

.hero-value {
  margin: 0 0 6px;
  font-size: 40px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.hero-metric.accent .hero-value {
  color: var(--accent-green);
}

.hero-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.hero-metric.accent .hero-sub {
  color: var(--accent-green);
}

.hero-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--accent-green);
  opacity: 0.5;
}

.hero-compare-item {
  min-width: 0;
}

.hero-compare-label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent-green);
}

.hero-compare-value {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-green);
}

.hero-compare-arrow {
  font-size: 15px;
  color: var(--accent-green);
}

@media (max-width: 480px) {
  .hero-value {
    font-size: 32px;
  }
}

/* ---- Sekundäre Kennzahlen — dieselbe .stat-tile-Optik wie zuvor, aber kompakter, damit
   sie sich klar den Hero-Metriken unterordnen. */

.stat-tiles-secondary .stat-value {
  font-size: 20px;
  font-weight: 500;
}

.stat-tiles-secondary .stat-tile {
  padding: 16px 14px;
}

/* ---- Steuersatz ⇄ Gehalt ---- */

.tax-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.tax-mode-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}

.tax-mode-option:has(input:checked) {
  border-color: var(--button-accent-default);
  background: var(--akaroa-50);
}

.tax-mode-option input {
  accent-color: var(--button-accent-default);
}

/* ---- Weitere Einstellungen (collapsed by default) ---- */

.advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  margin: 4px 0;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-accent);
  cursor: pointer;
}

.advanced-toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.15s var(--ease);
}

.advanced-toggle.expanded .advanced-toggle-icon {
  transform: rotate(180deg);
}

.advanced-fields[hidden] {
  display: none;
}

.advanced-fields {
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.checkout-cta {
  min-height: 52px;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--text-inverted);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}

.checkout-cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .pain-vorteil-value {
    font-size: 28px;
  }
}

.explanation-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.explanation {
  margin: 0;
  font-size: 13px;
  text-align: center;
}

.calc-explainer {
  text-align: center;
}

.calc-explainer summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.calc-explainer-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.calc-explainer-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 480px) {
  .stat-value {
    font-size: 24px;
  }
}

/* ---- Explainer walkthrough (tour) ---- */

.tour-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 14px;
  border: 1px solid var(--border-bolder);
  border-radius: var(--radius-pill);
  background: var(--background-default);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.tour-fab:hover {
  border-color: var(--grey-400);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.tour-fab svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--text-accent);
}

.tour-fab[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .tour-fab span {
    display: none;
  }

  .tour-fab {
    padding: 13px;
  }
}

.tour-overlay[hidden] {
  display: none;
}

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

/* The dimming itself is a giant box-shadow on the highlight rect, not a separate dark
   layer — that way only the target element stays undimmed, with no clip-path/SVG mask
   needed. .tour-overlay only exists to swallow clicks on the rest of the page. */
.tour-highlight {
  position: fixed;
  z-index: 10001;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(38, 38, 38, 0.6);
  pointer-events: none;
}

.tour-bubble {
  position: fixed;
  z-index: 10002;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--background-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: 20px;
}

/* Only animate top/left once the very first position has already been applied — without
   this, the first-ever placement would visibly slide in from the browser's default (0,0)
   corner before settling, since there's no "previous" position to transition from yet. */
.tour-highlight.positioned {
  transition: top 0.3s var(--ease), left 0.3s var(--ease), width 0.3s var(--ease), height 0.3s var(--ease);
}

.tour-bubble.positioned {
  transition: top 0.3s var(--ease), left 0.3s var(--ease);
}

.tour-step-count {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-accent);
}

.tour-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.tour-text {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tour-actions-right {
  display: flex;
  gap: 8px;
}

.tour-btn {
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.tour-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.tour-btn-ghost:hover {
  color: var(--text-primary);
}

.tour-btn-ghost:disabled {
  visibility: hidden;
}

.tour-btn-primary {
  background: var(--button-accent-default);
  color: #fff;
}

.tour-btn-primary:hover {
  background: var(--button-accent-bold);
}

/* ---- Kontakt-Popup ---- */

.contact-modal-overlay[hidden] {
  display: none;
}

.contact-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(38, 38, 38, 0.55);
}

.contact-modal {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 32px 28px 28px;
  border-radius: var(--radius-lg);
  background: var(--background-default);
  box-shadow: var(--shadow-raised);
  text-align: center;
}

.contact-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 4px 8px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
}

.contact-modal-close:hover {
  color: var(--text-primary);
}

.contact-modal-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--background-bold);
  color: var(--text-accent);
  overflow: hidden;
}

.contact-modal-photo svg {
  width: 48px;
  height: 48px;
}

.contact-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-modal-name {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 600;
}

.contact-modal-title {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

.contact-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid var(--border-bolder);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.contact-modal-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.contact-modal-btn:hover {
  border-color: var(--grey-400);
}

.contact-modal-btn-primary {
  border: none;
  background: var(--button-accent-default);
  color: #fff;
}

.contact-modal-btn-primary:hover {
  background: var(--button-accent-bold);
}