/* ============================================================
   rcl-redesign.css  ·  Dark/Lime Premium-Override
   ------------------------------------------------------------
   RCL Beratung Rainer Streletz · rcl-heizlast.de
   Reiner Optik-Layer. Wird im <head> NACH dem inline-<style>
   geladen und gewinnt dadurch per Ladereihenfolge.
   ZWECK: Tool optisch an die Dark/Lime-Landing angleichen.
   AENDERT KEINE Funktion, keine Felder, keine Berechnung.
   Der @media print-Block der index.html bleibt unberuehrt
   (Druck/PDF weiterhin schwarz auf weiss).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&display=swap');

/* ---- 1. v1.64 HELL: Farb-Variablen auf Hell (Rainer 26.07.) ----
   War Dark-Override; jetzt heller Premium-Look. Funktionsblock (Rechner,
   Zahlungskarte) folgt diesen Tokens. Lime nur als Flaeche/Marker mit
   dunkler Schrift; --lime-deep (Olive) fuer Text/Links auf Hell. */
:root{
  --paper:#F3F4F6;
  --surface:#FFFFFF;
  --surface-2:#EDEFF2;
  --ink:#111827;
  --ink-2:#374151;
  --line:#E5E7EB;
  --line-2:#D1D5DB;
  --muted:#6B7280;
  --muted-2:#9AA0A6;
  --lime:#C8D400;
  --lime-deep:#7E8A00;    /* Olive: fuer Text/Links auf Hell lesbar */
  --lime-tint:rgba(200,212,0,.16);
  --shadow:0 1px 2px rgba(17,24,39,.05), 0 10px 30px rgba(17,24,39,.08);
  --sans:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- 2. Zahlen trotz Einheitsschrift sauber ausrichten ---- */
.mono, .mononum, input.mononum, .price-card .tag .amt, .result .total .kw,
.el-row .loss, .el-head, .mini-label, .room-foot .metric .k,
.room-foot .metric .v, .gauge-scale, .res-rows .r span:last-child,
.pay-box .row span:last-child, .product .pl, .eyebrow{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* ---- 3. Dunkle Flaechen, die vorher ueber --ink liefen ---- */
/* ---- v1.64 HELL: Header weiss, Footer Anthrazit (Rainer 26.07.) ---- */
header.site{ background:#ffffff; border-bottom:1px solid #E5E7EB; color:#111827; }
.logo .mark{ color:#0d0f11; }                 /* Lime-Quadrat: dunkle Schrift */
header.site .logo b{ color:#111827; }
header.site .logo b i{ color:#7E8A00; font-style:normal; }   /* "Premium": Olive statt Lime auf Weiss */
header.site .logo .logo-tag{ color:#6B7280; }
header.site .meta{ color:#6B7280; }
header.site .meta > b{ color:#111827; }        /* "RCL Beratung und Verkauf" */
header.site .meta b[style], header.site .ver-mobile b[style]{ color:#7E8A00 !important; } /* Version: Olive statt Lime */
/* ---- v1.65 Header-Redesign: Absender statt Datenblatt ---- */
header.site .bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
header.site .logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
header.site .logo-lockup{ display:flex; flex-direction:column; line-height:1.12; }
header.site .logo-name{ font-weight:800; font-size:20px; color:#111827; letter-spacing:-.01em; }
header.site .logo-tag{ font-size:11.5px; color:#6B7280; font-weight:500; letter-spacing:.01em; }
header.site .site-seal{ display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:#3f4652; letter-spacing:.02em;
  border:1px solid #C9CED6; border-radius:5px; padding:7px 13px; white-space:nowrap; }
header.site .site-seal .seal-ic{ width:16px; height:16px; color:#7E8A00; flex:none; }
@media(max-width:560px){
  header.site .site-seal{ font-size:0; gap:0; padding:8px; }
  header.site .site-seal .seal-ic{ width:18px; height:18px; }
}

footer.site{ background:#111827; color:#cbd2dc;
  border-top:1px solid #263041; }
footer.site a{ color:#cbd2dc; }
footer.site a:hover{ color:#c8d400; }
footer.site b, footer.site strong, footer.site h3, footer.site h4{ color:#ffffff; }

.btn-dark{ background:#111827; color:#ffffff;
  border:1px solid #111827; }
.btn-dark:hover{ background:#23282e; }
.btn-primary{ color:#111827; }                /* dunkle Schrift auf Lime */

.section .num{ background:var(--lime); color:#111827; }
.room-foot{ background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line); }
.product{ background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line); }
.confirm .big{ color:#111827; }               /* Haken: dunkel auf Lime */
.toast{ background:#111827; color:#ffffff;
  border:1px solid #111827; }

/* ---- 4. Hell hardcodierte Detail-Flaechen ---- */
.el-del{ background:var(--surface-2); color:var(--muted);
  border-color:var(--line-2); }
.qmark{ color:#0d0f11; }
.qmark:hover{ color:#0d0f11; }
.qpop{ background:var(--surface-2); color:var(--ink-2);
  border-left-color:var(--lime); }
.qpop b{ color:var(--ink); }

/* ---- 4b. Hinweis-Kaesten VOLL mit Lime ausgefuellt (wie die Heatmap-Kacheln) ---- */
.card[style*="lime-tint"],
.rcl-fbh-hint{
  background:#C8D400 !important;
}
.card[style*="lime-tint"] > div,
.card[style*="lime-tint"] > div *,
.rcl-fbh-hint{
  color:#0d0f11 !important;            /* dunkler Text auf Lime, sonst unlesbar */
}
.card[style*="lime-tint"]{ border-color:#0d0f11 !important; }
.rcl-fbh-hint{ border-left-color:#0d0f11 !important; }
.card[style*="lime-tint"] > span{     /* ?-Badge invertieren -> dunkel mit Lime-? */
  background:#0d0f11 !important;
  color:#C8D400 !important;
}

/* ---- 5. Status-Flags auf Dunkel lesbar ---- */
.flag.ok{ background:rgba(46,158,98,.14); color:#1c7a48; }
.flag.warn{ background:rgba(180,133,26,.16); color:#8a6410; }

/* ---- v1.64 HELL: Wizard-Schrittleiste (#rclWizBar, JS-injiziert) auf Weiss.
   Aktive Stufe (.cur) bleibt unberuehrt (Lime-Pill). ---- */
#rclWizBar{ background:#ffffff !important; border-bottom:1px solid #E5E7EB !important; }
#rclWizBar .rcl-wiz-step:not(.cur){ color:#6B7280 !important; }
#rclWizBar .rcl-wiz-step:not(.cur) .n{ color:#9AA0A6 !important; }
#rclWizBar .rcl-wiz-meta, #rclWizBar a{ color:#6B7280 !important; }
#rclWizBar a:hover{ color:#7E8A00 !important; }

/* ---- 6. Fokus-Ring kraeftiger auf Dunkel ---- */
input:focus, select:focus, textarea:focus{
  box-shadow:0 0 0 3px rgba(200,212,0,.22);
}

/* ---- 7. Mobile: vorher weisse Karten -> dunkle Flaeche ---- */
@media(max-width:820px){
  .el-row{ background:var(--surface-2); border-color:var(--line); }
}


/* ============================================================ */
/* ---- 8. PROTOTYP-V4 LANDING-LOOK ---------------------------- */
/* Heatmap-Hero + Header-Brand. NUR Optik. Funktionale Box      */
/* (Felder, IBAN, Zugangscode, DSGVO) bleibt unberuehrt.        */
/* ============================================================ */

/* Header: R-Badge vor dem Logo */
.site .logo .rcl-mk{
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:8px;
  background:var(--lime); color:#0d0f11;
  font-weight:800; font-size:15px; margin-right:10px; flex:none;
  vertical-align:middle;
}

/* Hero: Prototyp-Headline + Subtext */
#screenGate .hero .rcl-h1{
  font-size:clamp(2.3rem,6.5vw,4.2rem); font-weight:800;
  line-height:1.05; letter-spacing:-.02em; margin:14px 0 16px; color:var(--ink);
}
#screenGate .hero .rcl-sub{
  font-size:clamp(1.02rem,2.2vw,1.22rem); color:var(--ink-2);
  max-width:38ch; line-height:1.5; margin:0 0 28px;
}

/* Heatmap-Panel (Signature-Visual) */
.rcl-heat-panel{
  position:relative;
  background:linear-gradient(180deg,var(--surface),#101316);
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(20px,3vw,28px); margin:0 0 34px; max-width:520px;
}
.rcl-heat-panel .phl-lab{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
}
.rcl-heat-panel .phl{
  font-size:clamp(2rem,5vw,2.6rem); font-weight:700; color:var(--lime);
  letter-spacing:-.02em; line-height:1; margin:6px 0 18px;
}
.rcl-heat-panel .phl small{ font-size:.55em; font-weight:600; }
.rcl-heat-panel svg.plan{ width:100%; height:auto; display:block; }
.rcl-heat-panel .legend{
  display:flex; align-items:center; gap:10px; margin-top:16px;
  font-size:11.5px; color:var(--muted-2); letter-spacing:.03em;
}
.rcl-heat-panel .legend .lbar{ display:flex; flex:1; height:9px; border-radius:3px; overflow:hidden; }
.rcl-heat-panel .legend .lbar i{ flex:1; }

/* Zwischen-Headline (DIN-Erklaerung, vom Hero-h1 zu h2 herabgestuft) */
#screenGate .hero .rcl-h2{
  font-size:clamp(1.3rem,3vw,1.7rem); font-weight:700;
  margin:6px 0 14px; color:var(--ink); line-height:1.2;
}
#screenGate .hero .rcl-h2 em{ color:var(--lime); font-style:normal; }


/* ============================================================= */
/* WCAG 2.2 AA · Barrierefreiheit (additiv, v1.37 · 2026-06)     */
/* ============================================================= */

/* Skip-Link · WCAG 2.4.1 (Bloecke umgehen) */
.rcl-skiplink{
  position:absolute; left:12px; top:-56px; z-index:3000;
  background:#0d0f11; color:#c8d400;
  font-family:var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-weight:700; font-size:15px; line-height:1;
  padding:13px 20px; border:2px solid #c8d400; border-radius:0;
  text-decoration:none; transition:top .18s ease;
}
.rcl-skiplink:focus{ top:12px; outline:3px solid #c8d400; outline-offset:2px; }

/* Sichtbarer Tastatur-Fokus · WCAG 2.4.7 / 1.4.11 */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, .btn:focus-visible{
  outline:3px solid #c8d400 !important;
  outline-offset:2px !important;
  border-radius:2px;
}
/* Fallback fuer Browser ohne :focus-visible */
a:focus, button:focus, summary:focus, .btn:focus{
  outline:3px solid #c8d400; outline-offset:2px;
}
@supports selector(:focus-visible){
  a:focus:not(:focus-visible), button:focus:not(:focus-visible),
  summary:focus:not(:focus-visible), .btn:focus:not(:focus-visible){ outline:none; }
}


/* ============================================================= */
/* v1.44-Hotfix (2026-07-12): Zugangscode-Fehlertext #gCodeErr    */
/* war DAUERHAFT sichtbar (grau) statt nur bei falschem Code.     */
/* Ursache: generische Regel "label.fld > span{display:block}"    */
/* (Spezifitaet 0,1,2) uebersteuerte ".field-error{display:none}" */
/* (0,1,0). Fix: hoehere Spezifitaet stellt Soll-Verhalten her.   */
/* Kern nutzt .show bei ungueltigem Code — dynamisch verifiziert. */
/* ============================================================= */
label.fld > span.field-error{ display:none; color:var(--danger); }
label.fld > span.field-error.show{ display:block; }


/* ============================================================= */
/* v1.45 (2026-07-12): Freischalten-Sektion hell (Silbergrau).    */
/* Die dunkle Bezahl-/Code-Karte (.price-card) bleibt bewusst     */
/* dunkel — gleiche Logik wie das Hero-Panel (Markenanker).       */
/* Funktionsblock-CSS unberuehrt, nur Sektionsgrund + Kopftexte.  */
/* ============================================================= */
#freischalten.rcl-unlock{ background:#f5f5f7; }
#freischalten .rcl-unlock-head .eyebrow{ color:#5a6600; }
#freischalten .rcl-unlock-head h2{ color:#0d0f11; }
#freischalten .rcl-unlock-sub{ color:#5f636a; }
/* Inline-gestylte Quick-Links im Kopf auf hellem Grund lesbar */
#freischalten .rcl-unlock-head a[href="/anleitung"]{ color:#0d0f11 !important; }
#freischalten .rcl-unlock-head a[href="/foerderrechner"]{ color:#5a6600 !important; border-color:#5a6600 !important; }
