/* ==========================================================================
   RCL-Förderrechner — RCL Premium Design
   dark #0d0d0d · lime #C8D400 · Inter (Body) / Schibsted Grotesk (Headlines)
   border-radius: 0 (hart, überall)
   ========================================================================== */

:root {
  --schwarz: #0d0d0d;
  --lime: #C8D400;
  --weiss: #f5f5f2;
  --grau: #a8a8a2;
  --grau-dunkel: #1a1a18;
  --grau-linie: #2c2c28;
  --rot: #e5484d;
  --gelb: #f5d90a;
  --gruen: #46a758;
}

* { box-sizing: border-box; border-radius: 0 !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, legend {
  font-family: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

a { color: var(--lime); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Kopf */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--grau-linie);
  position: sticky; top: 0; background: var(--schwarz); z-index: 20;
}
.brand { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 20px; color: var(--weiss); }
.brand-dot { color: var(--lime); }
.brand-sub { font-size: 12px; font-weight: 500; color: var(--grau); margin-left: 4px; }
.topnav { display: flex; gap: 18px; font-size: 14px; font-weight: 600; }
.topnav a { color: var(--grau); }
.topnav a.aktiv, .topnav a:hover { color: var(--lime); text-decoration: none; }

/* ------------------------------------------------------------------ Layout */
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px 60px; }

.hero { padding: 44px 0 26px; }
.hero h1 { font-size: clamp(30px, 6vw, 46px); margin: 0 0 12px; }
.hero h1::after { content: ""; display: block; width: 64px; height: 5px; background: var(--lime); margin-top: 14px; }
.hero-sub { color: var(--grau); max-width: 620px; margin: 0; font-size: 17px; }

/* ------------------------------------------------------------------ Rechner */
.rechner {
  background: var(--grau-dunkel);
  border: 1px solid var(--grau-linie);
  border-top: 4px solid var(--lime);
  padding: 26px 22px 30px;
  margin-top: 12px;
}

.fortschritt { margin-bottom: 24px; }
.fortschritt-balken { height: 6px; background: var(--grau-linie); }
.fortschritt-fuellung { height: 100%; width: 16%; background: var(--lime); transition: width .3s ease; }
.fortschritt-text { font-size: 12.5px; color: var(--grau); margin-top: 7px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

.schritt { border: 0; margin: 0; padding: 0; }
.schritt legend { font-size: clamp(20px, 3.6vw, 26px); padding: 0; margin: 0 0 18px; }

.optionen { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .optionen { grid-template-columns: 1fr 1fr; } }

.option {
  display: block; cursor: pointer; padding: 16px 16px 14px;
  background: var(--schwarz); border: 1px solid var(--grau-linie);
  transition: border-color .15s ease;
}
.option:hover { border-color: var(--grau); }
.option input { position: absolute; opacity: 0; }
.option:has(input:checked) { border-color: var(--lime); outline: 1px solid var(--lime); }
.option:has(input:focus-visible) { outline: 2px solid var(--lime); }
.option-titel { display: block; font-weight: 700; font-size: 16.5px; }
.option-info { display: block; font-size: 13px; color: var(--grau); margin-top: 3px; }

.feld { margin-top: 18px; }
.feld label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 7px; }
.feld input[type="number"], .feld input[type="text"], .feld input[type="email"],
.feld input[type="tel"], .feld select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 17px;
  background: var(--schwarz); color: var(--weiss);
  border: 1px solid var(--grau-linie);
}
.feld input:focus, .feld select:focus { outline: 2px solid var(--lime); border-color: var(--lime); }
.feld input.ungueltig { border-color: var(--rot); }
.feld-hinweis { font-size: 13px; color: var(--grau); margin: 8px 0 0; }
/* v1.52: PLZ + Ort nebeneinander (Pflicht-Anschrift in Schritt 1).
   Innen je ein eigener .feld-Container, damit PLZ- und Ort-Fehlermeldungen
   sich nicht gegenseitig ersetzen (fehler() raeumt je .feld auf). */
.feld-plzort { display: grid; grid-template-columns: 130px 1fr; gap: 0 12px; margin-top: 0; }
@media (max-width: 420px) { .feld-plzort { grid-template-columns: 1fr; } }
.feld-fehler { font-size: 13.5px; color: var(--rot); margin: 8px 0 0; font-weight: 600; }

.feld-check { margin-top: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14.5px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lime); flex: none; }

.wizard-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 28px; }

.btn {
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
  padding: 13px 26px; border: 1px solid transparent; transition: transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lime { background: var(--lime); color: var(--schwarz); }
.btn-lime:hover { filter: brightness(1.08); }
.btn-lime:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--weiss); border-color: var(--grau-linie); }
.btn-ghost:hover { border-color: var(--grau); }
.btn-breit { width: 100%; margin-top: 14px; }

.link-reset {
  background: none; border: 0; color: var(--grau); font: inherit; font-size: 13px;
  margin-top: 18px; cursor: pointer; text-decoration: underline; padding: 0;
}
.link-reset:hover { color: var(--weiss); }

/* ------------------------------------------------------------------ Ampel */
.ampel {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--schwarz); border: 1px solid var(--grau-linie);
  padding: 14px 16px; margin-bottom: 24px;
}
.ampel-punkt { width: 18px; height: 18px; border-radius: 50% !important; flex: none; margin-top: 3px; background: var(--grau); }
.ampel.gruen .ampel-punkt { background: var(--gruen); box-shadow: 0 0 12px var(--gruen); }
.ampel.gelb  .ampel-punkt { background: var(--gelb);  box-shadow: 0 0 12px var(--gelb); }
.ampel.rot   .ampel-punkt { background: var(--rot);   box-shadow: 0 0 12px var(--rot); }
.ampel strong { font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.ampel p { margin: 4px 0 0; font-size: 14px; color: var(--grau); }
.ampel ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--grau); }

/* ------------------------------------------------------------------ Ergebnis (Kap. 8) */
.ergebnis h2 { font-size: clamp(22px, 4vw, 30px); margin: 0 0 18px; }

.e-tabelle { margin: 0; }
.e-zeile { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; flex-wrap: wrap; }
.e-zeile dt { color: var(--grau); font-weight: 500; }
.e-zeile dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.e-linie { height: 1px; background: var(--grau-linie); margin: 12px 0; }

.e-gross .e-zeile dt { color: var(--weiss); font-weight: 700; font-size: 18px; align-self: center; }
.e-zuschuss { font-family: 'Schibsted Grotesk', sans-serif; font-size: clamp(30px, 6vw, 42px); color: var(--lime); }
.e-eigen    { font-family: 'Schibsted Grotesk', sans-serif; font-size: clamp(22px, 4.5vw, 30px); }

.e-regel { font-size: 13px; color: var(--grau); margin: 4px 0 0; }

.e-kappung, .e-mfh {
  border-left: 4px solid var(--lime); background: var(--schwarz);
  padding: 12px 14px; font-size: 14px; color: var(--grau); margin: 16px 0 0;
}

.e-details { margin-top: 18px; font-size: 14.5px; }
.e-details summary { cursor: pointer; color: var(--lime); font-weight: 600; }
.e-details ul { margin: 10px 0 0; padding-left: 20px; color: var(--grau); }
.e-details li { margin: 3px 0; }

.e-fehler {
  border-left: 4px solid var(--rot); background: var(--schwarz);
  padding: 12px 14px; font-size: 14.5px; margin-bottom: 16px;
}

.disclaimer {
  font-size: 13px; color: var(--grau); border-top: 1px solid var(--grau-linie);
  margin-top: 24px; padding-top: 14px;
}

/* ------------------------------------------------------------------ Lead */
.lead { background: var(--schwarz); border: 1px solid var(--grau-linie); border-top: 3px solid var(--lime); padding: 22px 20px; margin-top: 22px; }
.lead h3 { margin: 0 0 8px; font-size: 20px; }
.lead > p { color: var(--grau); font-size: 14.5px; margin: 0 0 6px; }
.lead .feld { margin-top: 14px; }
.consent { margin-top: 16px; font-size: 13px; color: var(--grau); }
.lead-status { font-size: 14.5px; font-weight: 600; margin: 12px 0 0; min-height: 1.4em; }
.lead-status.ok { color: var(--gruen); }
.lead-status.fehler { color: var(--rot); }

/* ------------------------------------------------------------------ Info */
.info { margin-top: 46px; }
.info h2 { font-size: 24px; }
.info-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
@media (min-width: 700px) { .info-grid { grid-template-columns: 1fr 1fr 1fr; } }
.info-karte { background: var(--grau-dunkel); border: 1px solid var(--grau-linie); padding: 18px 16px; }
.info-karte h3 { margin: 0 0 8px; font-size: 16.5px; color: var(--lime); }
.info-karte p { margin: 0; font-size: 14px; color: var(--grau); }

/* ------------------------------------------------------------------ Fuß */
.foot { border-top: 1px solid var(--grau-linie); margin-top: 40px; padding: 26px 20px 40px; text-align: center; font-size: 14px; color: var(--grau); }
.foot p { margin: 0 0 8px; }
.foot nav { margin: 8px 0; }
.foot nav a { color: var(--grau); margin: 0 4px; }
.foot nav a:hover { color: var(--lime); }
.foot-klein { font-size: 12px; max-width: 640px; margin: 10px auto 0 !important; }

/* ------------------------------------------------------------------ Motion */
.schritt, .ergebnis { animation: einblenden .25s ease; }
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .schritt, .ergebnis { animation: none; }
  .fortschritt-fuellung { transition: none; }
}

/* ============================================================ Flow v2 (12.07.2026)
   Kontakt-/Datenschutz-Schritte + Danke-Screen (RCL Premium)
   ================================================================================ */

.schritt-intro {
  color: var(--grau);
  font-size: 15px;
  margin: 0 0 18px;
}

.danke {
  text-align: center;
  padding: 40px 20px 24px;
  max-width: 560px;
  margin: 0 auto;
}
.danke-icon {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 800; line-height: 1;
  background: var(--lime); color: var(--schwarz);
}
.danke-icon.laedt { background: var(--grau-dunkel); color: var(--lime); }
.danke-icon.fehler { background: var(--rot); color: var(--weiss); }
.danke h2 { font-size: clamp(24px, 5vw, 32px); margin: 0 0 14px; }
.danke-text {
  color: var(--weiss); font-size: 17px; line-height: 1.55;
  margin: 0 auto 20px; max-width: 480px;
}
.danke-aktion { margin: 8px 0 4px; }
.danke-sub { color: var(--grau); font-size: 14px; margin: 22px 0 0; }

#kConsent.ungueltig { outline: 2px solid var(--rot); outline-offset: 2px; }


/* ==========================================================================
   v1.45 CLEAN LIGHT (2026-07-12) — reiner Farb-Layer, keine Layout-Aenderung.
   Seite hell (Silbergrau #f5f5f7) wie die Startseite; Lime bleibt Akzent
   (Buttons/Balken/Auswahl), Lime-TEXT auf hellem Grund -> Olive #5a6600.
   Topbar bleibt dunkel (Markenanker), Fuss dunkel wie Haupt-Footer.
   ========================================================================== */
body{ background:#f5f5f7; color:#0d0f11; }
a{ color:#5a6600; }
.topnav a{ color:var(--grau); }
.topnav a.aktiv, .topnav a:hover{ color:var(--lime); }
.hero-sub{ color:#5f636a; }

.rechner{ background:#ffffff; border-color:rgba(0,0,0,.10); }
.fortschritt-balken{ background:rgba(0,0,0,.10); }
.fortschritt-text{ color:#5f636a; }
.option{ background:#f5f5f7; border-color:rgba(0,0,0,.16); }
.option:hover{ border-color:#6b6f76; }
.option-info{ color:#5f636a; }
.feld input[type="number"], .feld input[type="text"], .feld input[type="email"],
.feld input[type="tel"], .feld select{
  background:#ffffff; color:#0d0f11; border-color:rgba(0,0,0,.20);
}
.feld-hinweis{ color:#5f636a; }
.btn-ghost{ color:#0d0f11; border-color:rgba(0,0,0,.20); }
.btn-ghost:hover{ border-color:#0d0f11; }
.link-reset{ color:#5f636a; }
.link-reset:hover{ color:#0d0f11; }

.ampel{ background:#f5f5f7; border-color:rgba(0,0,0,.14); }
.ampel p, .ampel ul{ color:#44484e; }

.e-zeile dt{ color:#5f636a; }
.e-linie{ background:rgba(0,0,0,.12); }
.e-gross .e-zeile dt{ color:#0d0f11; }
.e-zuschuss{ color:#5a6600; }
.e-regel{ color:#5f636a; }
.e-kappung, .e-mfh{ background:#f5f5f7; color:#44484e; }
.e-details summary{ color:#5a6600; }
.e-details ul{ color:#44484e; }
.e-fehler{ background:#fdf3f3; }
.disclaimer{ color:#5f636a; border-color:rgba(0,0,0,.12); }

.lead{ background:#ffffff; border-color:rgba(0,0,0,.10); }
.lead > p{ color:#44484e; }
.consent{ color:#5f636a; }

.info-karte{ background:#ffffff; border-color:rgba(0,0,0,.10); }
.info-karte h3{ color:#5a6600; }
.info-karte p{ color:#44484e; }

.foot{ background:#0d0f11; color:#a7ada4; border-top:0; margin-top:44px; padding:30px 20px 44px; }
.foot nav a{ color:#a7ada4; }
.foot nav a:hover{ color:var(--lime); }
/* === Ende v1.45 Clean Light ============================================ */

/* ===== v1.60 Anschriftsprüfung + Gebäudebild ============================= */
.geo-laedt { display:flex; align-items:center; gap:10px; padding:18px 0; color:#555; }
.geo-spinner { width:18px; height:18px; border:2px solid #d6d6cf; border-top-color:#0d0d0d;
  border-radius:50%; animation:geo-dreh .8s linear infinite; flex:0 0 auto; }
@keyframes geo-dreh { to { transform:rotate(360deg); } }

.geo-bild { position:relative; margin:0 0 14px; background:#e9e9e4; overflow:hidden; }
.geo-bild img { display:block; width:100%; height:auto; }
.geo-bild figcaption { padding:6px 2px 0; color:#666; }
/* Fadenkreuz auf der Bildmitte = geprüfte Koordinate */
.geo-marke { position:absolute; left:50%; top:calc(50% - 9px); transform:translate(-50%,-50%);
  width:26px; height:26px; border:3px solid #C8D400; border-radius:50%;
  box-shadow:0 0 0 2px rgba(13,13,13,.55), inset 0 0 0 2px rgba(13,13,13,.55);
  pointer-events:none; }

.geo-adresse { margin:0 0 14px; line-height:1.5; }
.geo-fehler { padding:4px 0 0; }
/* eigene Klasse: .feld-fehler wird von validiereSchritt() global entfernt */
.geo-fehler-text { font-size:13.5px; color:var(--rot); margin:8px 0 0; font-weight:600; }
.geo-fehler .btn { margin-top:10px; }
.geo-datenschutz { margin-top:16px; }

.link-inline { background:none; border:0; padding:0; font:inherit; color:#0d0d0d;
  text-decoration:underline; cursor:pointer; }
.link-inline:hover { color:#6f7800; }