/*
  Aesthetic: GOVERNMENT-FORM-MODERNIZED
  Sober institutional feel — modernized BMF/BAFA-style branding.
  Serif headlines (Georgia/Palatino fallback) signal authority and trust.
  Primary palette: official-grey #4A5568 (structural) + EU-blue #003399 (accent).
  White/light background for legibility (institutional, not SaaS dark-mode).
  Clear data tables, generous spacing ≥ 16px, NO playful UI.
  Single trust-signal color: EU-blue #003399 for eligible/positive states.
  Rationale: KMU-Entscheider mit Behörden-Kontext vertrauen nüchternen Formularen
  mehr als bunten Apps. Förderantrag-Ästhetik senkt kognitive Hürde und suggeriert
  Seriosität bei Thema öffentliche Gelder. Serif-Überschriften folgen BMF/BAFA
  Dokumenten-Tradition.
*/

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette — Government-Form-Modernized */
  --bg-base:        #F7F8FA;
  --bg-panel:       #FFFFFF;
  --bg-panel-alt:   #F0F2F5;
  --bg-input:       #FFFFFF;
  --border:         #D1D5DB;
  --border-bright:  #9DA3AE;
  --border-focus:   #003399;

  --fg-primary:     #1A2035;
  --fg-secondary:   #4A5568;
  --fg-dim:         #6B7280;
  --fg-label:       #374151;

  --accent-blue:    #003399;
  --accent-blue-dim: rgba(0,51,153,.08);
  --accent-blue-mid: rgba(0,51,153,.15);
  --accent-green:   #1A6B3C;
  --accent-green-bg: rgba(26,107,60,.08);
  --accent-red:     #9B1C1C;
  --accent-red-bg:  rgba(155,28,28,.07);
  --accent-amber:   #92400E;
  --accent-amber-bg: rgba(146,64,14,.08);

  /* Typography */
  --font-serif:  Georgia, 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
  --font-sans:   'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'Geist Mono', 'Fira Mono', 'Consolas', monospace;

  /* Spacing */
  --p-sm:   12px;
  --p-md:   20px;
  --p-lg:   32px;
  --p-xl:   48px;
  --r-sm:   3px;
  --r-md:   6px;
  --r-lg:   10px;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Skip Link ── */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  background: var(--accent-blue);
  color: #fff;
  padding: 0 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-md);
  font-size: .875rem;
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ── Navigation ── */
.nav {
  background: #fff;
  border-bottom: 2px solid var(--accent-blue);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--p-lg);
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__logo {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg-primary);
  text-decoration: none;
  letter-spacing: -.01em;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav__logo span { color: var(--accent-blue); }

.nav__links {
  display: flex;
  list-style: none;
  gap: 20px;
  margin-left: 12px;
}
.nav__links a {
  font-size: .875rem;
  color: var(--fg-secondary);
  text-decoration: none;
  transition: color .15s;
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 4px; justify-content: center;
}
.nav__links a:hover { color: var(--accent-blue); }

.nav__cta {
  margin-left: auto;
  background: var(--accent-blue);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  padding: 0 18px;
  min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-sm);
  text-decoration: none;
  letter-spacing: .02em;
  transition: background .15s;
}
.nav__cta:hover { background: #002580; }

/* ── Page Header ── */
.page-header {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--p-xl) var(--p-lg) var(--p-md);
  border-bottom: 1px solid var(--border);
}

.page-header__eyebrow {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-blue);
  margin-bottom: 12px;
}

.page-header__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.25;
  color: var(--fg-primary);
  margin-bottom: 12px;
}

.page-header__sub {
  font-size: .9375rem;
  color: var(--fg-secondary);
  max-width: 640px;
  line-height: 1.5;
}

/* ── Disclaimer Banner ── */
.disclaimer-banner {
  max-width: 900px;
  margin: 0 auto var(--p-md);
  padding: 12px var(--p-lg);
  background: var(--accent-amber-bg);
  border-left: 4px solid #D97706;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.disclaimer-banner p {
  font-size: .8125rem;
  color: var(--accent-amber);
  line-height: 1.5;
}
.disclaimer-banner strong { font-weight: 600; }

/* ── Calculator Body ── */
.calculator-body {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--p-md) var(--p-lg) var(--p-xl);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 720px) {
  .calculator-body { grid-template-columns: 1fr; }
}

/* ── Input Panel ── */
.input-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.input-panel__header {
  background: var(--accent-blue);
  padding: 14px var(--p-md);
}
.input-panel__title {
  font-family: var(--font-serif);
  font-size: .9375rem;
  color: #fff;
  font-weight: normal;
  letter-spacing: .01em;
}
.input-panel__subtitle {
  font-size: .75rem;
  color: rgba(255,255,255,.75);
  margin-top: 3px;
}

.input-panel__body {
  padding: var(--p-md);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Field Groups ── */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-group__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-label);
}

.field-group__hint {
  font-size: .75rem;
  color: var(--fg-dim);
  line-height: 1.4;
}

/* ── Select ── */
select {
  appearance: none;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: .875rem;
  padding: 9px 32px 9px 12px;
  min-height: 44px;
  width: 100%;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%234A5568' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .15s;
}
select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-blue-dim);
}

/* ── Slider ── */
.slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.slider-value {
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent-blue);
  min-width: 60px;
  text-align: right;
  flex-shrink: 0;
}
input[type="range"] {
  flex: 1;
  height: 44px;
  appearance: none;
  background: transparent;
  cursor: pointer;
  accent-color: var(--accent-blue);
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--border); border-radius: 2px; }
input[type="range"]::-moz-range-track { height: 4px; background: var(--border); border-radius: 2px; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-blue);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-blue);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  cursor: pointer;
}
.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: .6875rem;
  color: var(--fg-dim);
  font-family: var(--font-mono);
}

/* ── Toggle ── */
.toggle-group {
  display: flex;
  gap: 8px;
}
.toggle-btn {
  flex: 1;
  padding: 0 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-input);
  border-radius: var(--r-sm);
  font-size: .8125rem;
  font-family: var(--font-sans);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.toggle-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.toggle-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
  font-weight: 600;
}

/* ── Results Panel ── */
.results-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Foerder Card ── */
.foerder-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow .2s;
}
.foerder-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); }

.foerder-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.foerder-card__status {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.foerder-card__status--eligible {
  background: var(--accent-green-bg);
  color: var(--accent-green);
}
.foerder-card__status--ineligible {
  background: var(--accent-red-bg);
  color: var(--accent-red);
}
.foerder-card__status--unknown {
  background: var(--accent-amber-bg);
  color: var(--accent-amber);
}

.foerder-card__title-block { flex: 1; min-width: 0; }
.foerder-card__name {
  font-family: var(--font-serif);
  font-size: .9375rem;
  color: var(--fg-primary);
  line-height: 1.3;
}
.foerder-card__type {
  font-size: .6875rem;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 3px;
}

.foerder-card__amount {
  text-align: right;
  flex-shrink: 0;
}
.foerder-card__amount-value {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--accent-blue);
  line-height: 1.2;
}
.foerder-card__amount-label {
  font-size: .6875rem;
  color: var(--fg-dim);
  margin-top: 2px;
}

.foerder-card__body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.foerder-card__applies {
  font-size: .8125rem;
  color: var(--fg-secondary);
  line-height: 1.45;
}
.foerder-card__ineligible-reason {
  font-size: .8125rem;
  color: var(--accent-red);
  font-style: italic;
}
.foerder-card__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--bg-panel-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.foerder-card__link {
  font-size: .75rem;
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}
.foerder-card__link:hover { text-decoration: underline; }
.foerder-card__validity {
  font-size: .6875rem;
  font-family: var(--font-mono);
  color: var(--fg-dim);
}

/* Ineligible card dimming */
.foerder-card--ineligible {
  opacity: .65;
}
.foerder-card--ineligible .foerder-card__amount-value {
  color: var(--fg-dim);
}

/* ── Total Card ── */
.total-card {
  background: var(--accent-blue);
  border-radius: var(--r-lg);
  padding: var(--p-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.total-card__label {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: rgba(255,255,255,.85);
}
.total-card__sub {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  margin-top: 3px;
}
.total-card__amount {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  text-align: right;
}
.total-card__amount-note {
  font-size: .6875rem;
  color: rgba(255,255,255,.6);
  margin-top: 3px;
  text-align: right;
}

/* ── CTA Buttons ── */
.cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cta-primary {
  display: block;
  background: var(--fg-primary);
  color: #fff;
  text-align: center;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background .15s;
}
.cta-primary:hover { background: #0D1633; }

.cta-secondary {
  display: block;
  background: #fff;
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue);
  text-align: center;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
}
.cta-secondary:hover { background: var(--accent-blue-dim); }

/* ── Combinability Note ── */
.combine-note {
  background: var(--accent-blue-dim);
  border: 1px solid var(--accent-blue-mid);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: .8125rem;
  color: var(--accent-blue);
  line-height: 1.45;
}
.combine-note strong { font-weight: 600; }

/* ── Footer ── */
.calc-footer {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--p-md) var(--p-lg);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.calc-footer__note {
  font-size: .75rem;
  color: var(--fg-dim);
  line-height: 1.5;
}
.calc-footer__logo {
  font-weight: 600;
  color: var(--fg-secondary);
  font-size: .875rem;
}
.calc-footer__logo span { color: var(--accent-blue); }

/* ── Utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── KfW special note ── */
.kfw-note {
  font-size: .75rem;
  color: var(--fg-dim);
  font-style: italic;
  line-height: 1.4;
  margin-top: 4px;
}