/* ═══════════════════════════════════════════════════════════
   Escape Economy — Auszahlungs-Rechner
   Dunkles Premium-Layout in den Markenfarben Schwarz und Gold
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Flächen — leicht aufgehellt, damit sich Karten vom Grund abheben */
  --bg:          #060608;
  --bg-elev:     #14141d;
  --bg-card:     #111119;
  --bg-inset:    #0a0a11;

  /* Silberne Linien statt Schatten — das trägt die ganze Optik */
  --line:        rgba(226, 232, 240, .20);
  --line-strong: rgba(226, 232, 240, .34);
  --gold-line:   rgba(212, 175, 55, .42);
  --gold-dim:    rgba(212, 175, 55, .08);
  --silver-glow: 0 0 0 1px rgba(226, 232, 240, .06), 0 18px 44px rgba(0, 0, 0, .55);

  /* Gold */
  --gold:        #d4af37;
  --gold-light:  #f2d675;
  --gold-deep:   #a67c1e;
  --gradient-gold: linear-gradient(160deg, #f7e08a 0%, #d4af37 45%, #a67c1e 100%);

  /* Text */
  --text:        #ffffff;
  --text-2:      #a3a3b2;
  --text-3:      #6c6c7d;

  /* Schrift der Wortmarke — hier tauschen, wenn die Logoschrift feststeht */
  --font-brand: Jost, Inter, -apple-system, system-ui, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 100px;

  --glow: 0 0 80px rgba(212, 175, 55, .06);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Sanfter Goldschimmer hinter dem oberen Seitendrittel */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 70vh;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(212, 175, 55, .07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

main, .nav, .footer { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
}

h1 { font-size: clamp(2rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
h4 { font-size: 1.1rem; letter-spacing: -.02em; }

p { margin: 0 0 1em; }
a { color: var(--gold); }

::selection { background: rgba(212, 175, 55, .28); }

/* ── Layout ───────────────────────────────────────────── */

main { max-width: 940px; margin: 0 auto; padding: 0 20px; }

.block { padding: 72px 0; text-align: center; }
.block-tight { padding: 20px 0; }
.block-top { padding-top: 0; }

.block-sub {
  max-width: 580px;
  margin: 0 auto 40px;
  color: var(--text-2);
  font-size: 1.05rem;
}

/* ── Kopfzeile ────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
  padding: 22px 20px;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }

/* logo.webp ist quadratisch und enthält den Schriftzug bereits unter dem Adler.
   Für die Kopfzeile wird nur der Adler ausgeschnitten — sonst müsste die Zeile
   dreimal so hoch werden, damit der Schriftzug lesbar bliebe. */
.logo-mark {
  flex: none;
  width: 48px;
  height: 48px;
  background-image: url("logo.webp");
  /* Ausgemessen am Logo: Adler samt Kreis und Balken sitzt bei 48,3 % / 39,6 %
     und misst 54,4 % der Bildkante. 165 % Zoom füllt damit 90 % der Box. */
  background-size: 165%;
  background-position: 45.7% 23.6%;
  background-repeat: no-repeat;
}

/* Wortmarke: geometrische Grotesk mit weiter Laufweite, wie im Logo.
   Beide Zeilen zentriert übereinander — die Schriftart hängt an --font-brand,
   Austausch also an genau einer Stelle. */
.logo-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-brand);
  line-height: 1;
  text-transform: uppercase;
}

.logo-word-main {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .22em;
  /* gleicht den Abstand hinter dem letzten Buchstaben aus, sonst sitzt die
     Zeile optisch zu weit links */
  margin-right: -.22em;
  color: var(--text);
}

.logo-word-sub {
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .38em;
  margin-right: -.38em;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Hero ─────────────────────────────────────────────── */

.hero { padding: 34px 0 44px; text-align: center; }
.hero h1 { max-width: 780px; margin: 0 auto; }

.hl {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Buttons ──────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 15px 34px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.btn-primary {
  background: var(--gradient-gold);
  color: #14100a;
  box-shadow: 0 10px 30px rgba(212, 175, 55, .18);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(212, 175, 55, .28);
}

/* ── Rechner-Karte ────────────────────────────────────── */

.calc-card {
  padding: 30px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgba(212, 175, 55, .05) 0%, transparent 40%),
    var(--bg-card);
  box-shadow: var(--silver-glow), var(--glow);
  text-align: left;
}

.field { margin-bottom: 28px; }

.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-2);
}

.field-out {
  padding: 4px 14px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: var(--gold-dim);
  color: var(--gold-light);
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Hinweis zur Rendite; sitzt seit v4.0.0 unter dem Ergebnis statt am Regler */
.rate-note { margin-top: 18px; text-align: center; }

.field-note {
  margin: 12px 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-3);
}
.field-note strong { color: var(--gold-light); font-weight: 700; }

/* Betragsfeld */

.input-money { position: relative; }

.input-money input {
  width: 100%;
  padding: 17px 54px 17px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--text);
  font-family: inherit;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s, box-shadow .18s;
}
.input-money input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .14);
}

.input-suffix {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-3);
  pointer-events: none;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.chip {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.chip:hover {
  border-color: var(--gold-line);
  background: var(--gold-dim);
  color: var(--gold-light);
}

/* Zeitraum-Auswahl */

.opt-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.opt-btn {
  padding: 14px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--text-2);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.opt-btn:hover { border-color: var(--line-strong); color: var(--text); }
.opt-btn.is-active {
  border-color: transparent;
  background: var(--gradient-gold);
  color: #14100a;
  font-weight: 700;
}

/* Regler */

/* ── Ergebnis ─────────────────────────────────────────── */

.result {
  margin-top: 32px;
  padding: 28px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-inset);
  text-align: center;
}

.result-label {
  margin: 0 0 6px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.result-value {
  margin: 0 0 24px;
  font-size: clamp(2.5rem, 10vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow-wrap: anywhere;
}

.result-tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }

.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
}
.tile-label { font-size: .78rem; font-weight: 500; color: var(--text-3); }
.tile-value {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tile-gold { color: var(--gold-light); }

.result-note {
  margin: 18px 0 0;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--text-2);
  text-align: left;
}
.result-note strong { color: var(--text); font-weight: 700; white-space: nowrap; }

/* ── Diagramm ─────────────────────────────────────────── */

.chart-wrap { margin-top: 32px; }

.chart-title {
  margin: 0 0 14px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-2);
}

.chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 190px;
  padding: 14px 12px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  overflow: hidden;
}

.bar-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  height: 100%;
  min-width: 0;
}

.bar {
  width: 100%;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(212, 175, 55, .55), rgba(212, 175, 55, .16));
  transition: height .35s cubic-bezier(.34, 1.2, .64, 1);
}
.bar-col:last-child .bar {
  background: var(--gradient-gold);
  box-shadow: 0 0 18px rgba(212, 175, 55, .35);
}

.bar-label { min-height: 1em; font-size: .66rem; font-weight: 500; color: var(--text-3); }

.chart.is-dense { gap: 3px; }
.chart.is-dense .bar { border-radius: 3px 3px 0 0; }
.chart.is-dense .bar-label { font-size: .58rem; }

/* ── Tabelle ──────────────────────────────────────────── */

.table-block {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  overflow: hidden;
}

.table-block > summary {
  padding: 15px 20px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
}
.table-block > summary::-webkit-details-marker { display: none; }
.table-block > summary::after { content: " ↓"; color: var(--gold); }
.table-block[open] > summary::after { content: " ↑"; }

.table-scroll { overflow-x: auto; padding: 0 14px 16px; }

.table {
  width: 100%;
  min-width: 440px;
  border-collapse: collapse;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.table th, .table td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table th:first-child, .table td:first-child { text-align: left; }
.table thead th {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.table tbody td { color: var(--text-2); }
.table tbody tr:last-child td { border-bottom: none; color: var(--gold-light); font-weight: 700; }

/* ── CTA + Fußzeile ───────────────────────────────────── */

.cta { padding-bottom: 30px; }
/* Steht direkt hinter dem Rechner — braucht deshalb wenig Luft nach oben */
.cta-tight { padding-top: 20px; }

.footer {
  margin-top: 40px;
  padding: 40px 20px 52px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .88rem;
  color: var(--text-3);
}
.footer p { margin: 0 0 6px; }
.footer-brand {
  font-family: var(--font-brand);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .22em;
  margin-right: -.22em;
  text-transform: uppercase;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Klasse allein verliert gegen `.footer p` (Klasse + Element), deshalb hier
   ebenfalls mit `.footer` davor — sonst greift das `auto` zum Zentrieren nie. */
.footer .footer-fine { max-width: 540px; margin: 16px auto 0; font-size: .78rem; }

.footer-version {
  margin-top: 18px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(108, 108, 125, .65);
  font-variant-numeric: tabular-nums;
}

/* ── Ab Tablet ────────────────────────────────────────── */

@media (min-width: 720px) {
  .calc-card { padding: 42px 40px; }
  .result { padding: 36px 32px; }
  .result-tiles { grid-template-columns: repeat(3, 1fr); }
  .chart { height: 230px; gap: 7px; }
  .logo-img { height: 54px; }
}

/* ── Schmale Handys: Kopfzeile passt sonst nicht in eine Zeile ── */

@media (max-width: 430px) {
  .nav { padding: 18px 16px; }
  .logo { gap: 9px; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-word-main { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}