/* ============================================================
   EB-KLEIN · EINHEITLICHES DESIGN  v1  (07.10.2026)
   ------------------------------------------------------------
   Eine Schicht über ALLE Seiten inkl. Admin, eingebunden per
   Netlify-Snippet "EB Design v1" (head). Standard ist der
   Startseiten-Look: Creme, Inter, Fraunces, Tannengrün, Gold.

   Die Seiten definieren ihre Farben in eigenen :root-Blöcken
   unter vielen Namen (--g, --ink, --eb-bg, --line …). Diese
   Datei setzt all diese Namen auf dieselben Markenwerte.
   "html:root" schlägt jedes ":root" der Seite, egal in welcher
   Reihenfolge geladen – auch Dunkelmodus-Blöcke.

   Assets sind immutable gecacht: Änderungen nur als v2-Datei.
   ============================================================ */

/* --- Schriften self-hosted (für Seiten ohne eb-brand.v2.css) --- */
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-var.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

html:root{
  color-scheme:light;

  /* ── Kanonische Marke ── */
  --ebk-green:#1A5828; --ebk-green-dark:#13401D; --ebk-green-hover:#2A7D2E;
  --ebk-green-tint:#E5F0E8; --ebk-green-faint:#F3F8F4;
  --ebk-gold:#B8963E; --ebk-gold-tint:#FFF8E6;
  --ebk-cream:#FBF8F3; --ebk-cream2:#F1E8DC; --ebk-surface:#FFFFFF; --ebk-surface2:#F7F4EE;
  --ebk-ink:#1A1A1A; --ebk-ink2:#4A4A4A; --ebk-ink3:#7A7A7A; --ebk-ink4:#A3A3A3;
  --ebk-line:#E5E5E5; --ebk-line2:#D2D2D7;
  --ebk-red:#B4432C; --ebk-red-tint:#FBEDEA; --ebk-warn:#9A5B00; --ebk-warn-tint:#FFF4E0;
  --ebk-ok:#2A7D3A; --ebk-info:#2E5E8C;
  --ebk-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --ebk-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --ebk-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ebk-r-sm:8px; --ebk-r:12px; --ebk-r-lg:16px; --ebk-r-xl:22px;
  --ebk-shadow:0 1px 2px rgba(0,0,0,.04),0 0 0 .5px rgba(26,88,40,.06);
  --ebk-shadow-lg:0 12px 28px rgba(0,0,0,.07),0 0 0 .5px rgba(26,88,40,.06);

  /* ── tokens.css (iOS-Welt: Admin, Checkout, Heizungsfinder …) ── */
  --eb-brand:var(--ebk-green); --eb-brand-strong:var(--ebk-green-dark); --eb-brand-hover:var(--ebk-green-hover);
  --eb-brand-tint:var(--ebk-green-tint); --eb-brand-faint:var(--ebk-green-faint);
  --eb-gold:var(--ebk-gold); --eb-gold-tint:var(--ebk-gold-tint);
  --eb-bg:var(--ebk-cream); --eb-surface:var(--ebk-surface); --eb-surface-2:var(--ebk-surface2); --eb-surface-3:#ECE6DA;
  --eb-label:var(--ebk-ink); --eb-label-1:var(--ebk-ink); --eb-label-2:var(--ebk-ink2); --eb-label-3:var(--ebk-ink3); --eb-label-4:var(--ebk-ink4);
  --eb-hairline:rgba(40,36,28,.12); --eb-hairline-2:rgba(40,36,28,.18); --eb-hairline-3:rgba(40,36,28,.28);
  --eb-red:var(--ebk-red); --eb-yellow:#C98A0B; --eb-orange:var(--ebk-warn); --eb-green:var(--ebk-ok); --eb-blue:var(--ebk-green);
  --eb-font-system:var(--ebk-sans); --eb-font-sans:var(--ebk-sans); --eb-font-serif:var(--ebk-serif); --eb-font-mono:var(--ebk-mono);
  --eb-shadow-card:var(--ebk-shadow); --eb-shadow-pop:var(--ebk-shadow-lg);

  /* ── Fachfirmen / Förderantrag (eigene iOS-Kopie) ── */
  --eb-bg-elev:#fff; --eb-bg-secondary:var(--ebk-surface2); --eb-border:var(--ebk-line); --eb-border-strong:var(--ebk-line2);
  --eb-error:var(--ebk-red); --eb-success:var(--ebk-ok); --eb-warning:var(--ebk-warn);
  --eb-text:var(--ebk-ink); --eb-text-secondary:var(--ebk-ink2); --eb-text-muted:var(--ebk-ink3); --eb-text-faint:var(--ebk-ink4);
  --eb-gruen:var(--ebk-green); --eb-gruen-mid:var(--ebk-green-hover); --eb-gruen-light:var(--ebk-green-tint); --eb-gruen-faint:var(--ebk-green-faint);
  --eb-gold-light:var(--ebk-gold-tint); --sep:var(--ebk-line); --font:var(--ebk-sans); --sub:var(--ebk-ink3);

  /* ── Kurznamen der Einzelseiten (Admin-Unterseiten, Beratung, E-Auto …) ── */
  --g:var(--ebk-green); --g2:var(--ebk-green-dark); --g3:rgba(26,88,40,.1); --gold:var(--ebk-gold);
  --eb:var(--ebk-green); --eb2:var(--ebk-green-hover); --tint:var(--ebk-green-tint);
  --bg:var(--ebk-cream); --bg-2:#fff; --card:#fff; --surface:#fff; --surface-2:var(--ebk-surface2);
  --ink:var(--ebk-ink); --text:var(--ebk-ink); --text-dim:var(--ebk-ink2); --text-mute:var(--ebk-ink3);
  --soft:var(--ebk-ink3); --muted:var(--ebk-ink3); --line:var(--ebk-line); --line-strong:var(--ebk-line2);
  --primary:var(--ebk-green); --primary-bright:var(--ebk-green-hover); --primary-tint:var(--ebk-green-tint); --primary-faint:var(--ebk-green-faint); --primary-glow:var(--ebk-green);
  --accent:var(--ebk-gold); --accent-tint:var(--ebk-gold-tint);
  --danger:var(--ebk-red); --success:var(--ebk-ok); --warn:var(--ebk-warn);
  --creme:var(--ebk-cream);
  /* Rechtstexte / Ranking (hatten Dunkelmodus) */
  --flaeche:var(--ebk-cream); --karte:#fff; --linie:var(--ebk-line); --grau:var(--ebk-ink3); --gruen:var(--ebk-green);
}

/* ── Grundton: Creme, Inter, dunkle Schrift ─────────────────── */
html body{
  background-color:var(--ebk-cream);
  color:var(--ebk-ink);
  font-family:var(--ebk-sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--ebk-serif);letter-spacing:-.006em}
:where(a,button,[role=button],input,select,textarea,summary):focus-visible{outline:2px solid var(--ebk-green);outline-offset:2px}
::selection{background:var(--ebk-green-tint);color:var(--ebk-ink)}

/* ── Formulare: gleiche Felder überall ─────────────────────── */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){
  font-family:inherit;
  border-radius:var(--ebk-r);
}
:where(input,select,textarea):focus{border-color:var(--ebk-green)}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--ebk-green)}

/* ── Dunkelblau ersetzt durch dunkles Tannengrün ───────────── */
.msum,.eb-pro-preis,.eb-pro-weg li.zahlen,.eb-pro-leiste,.hf-emp,
[style*="background:#14202B"],[style*="background:#14202b"],[style*="background: #14202B"]{
  background:var(--ebk-green-dark)!important;
}

/* ── Zweite Kopfzeile im E-Auto-Funnel: Logo steht schon oben ── */
header.topbar .brand-mark{display:none}

/* ============================================================
   ADMIN (html[data-eb-bereich=admin], gesetzt von eb-ui.v1.js)
   ============================================================ */
html[data-eb-bereich=admin] body{background:var(--ebk-cream)}

/* Update-Leiste und Login */
html[data-eb-bereich=admin] #upd-bar{background:var(--ebk-green-dark)!important}
html[data-eb-bereich=admin] #upd-status{background:rgba(255,255,255,.14)!important}
html[data-eb-bereich=admin] #upd-text,
html[data-eb-bereich=admin] #pr-btn{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.22)!important}
html[data-eb-bereich=admin] .login-box{border-radius:var(--ebk-r-lg);box-shadow:var(--ebk-shadow-lg);border:1px solid var(--ebk-line)}
html[data-eb-bereich=admin] .login-box h2,
html[data-eb-bereich=admin] .sidebar .brand span{font-family:var(--ebk-serif);font-weight:600}
html[data-eb-bereich=admin] .login-box input{background:#fff}

/* Seitenleiste der Admin-Übersicht */
html[data-eb-bereich=admin] .sidebar{background:#fff;border-right:1px solid var(--ebk-line)}
html[data-eb-bereich=admin] .sidebar .brand{color:var(--ebk-ink);letter-spacing:0}

/* Admin-Unterseiten: gleiche Kopfzeile, Karten, Knöpfe */
html[data-eb-bereich=admin] .topbar{background:var(--ebk-green);border-bottom:1px solid rgba(255,255,255,.12)}
/* "EB Klein Admin" steht schon in der gemeinsamen Leiste – hier nur der Bereichsname */
html[data-eb-bereich=admin] .topbar .brand{font-size:0}
html[data-eb-bereich=admin] .topbar .brand small{font:600 18px var(--ebk-serif);opacity:1}
html[data-eb-bereich=admin] .card{border-radius:var(--ebk-r-lg);border-color:var(--ebk-line);box-shadow:var(--ebk-shadow)}
html[data-eb-bereich=admin] .btn{border-radius:var(--ebk-r);font-family:var(--ebk-sans)}

/* Gemeinsame Admin-Navigation (von eb-ui.v1.js eingefügt) */
#ebk-admin-nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding:8px 16px;background:#fff;border-bottom:1px solid var(--ebk-line);
  font:500 13.5px/1.2 var(--ebk-sans);
}
#ebk-admin-nav::-webkit-scrollbar{display:none}
#ebk-admin-nav .ebk-an-logo{display:flex;align-items:center;gap:8px;margin-right:10px;color:var(--ebk-ink);text-decoration:none;white-space:nowrap;font:600 15px var(--ebk-serif)}
#ebk-admin-nav .ebk-an-logo img{width:28px;height:28px;border-radius:6px}
#ebk-admin-nav a.ebk-an-link{padding:7px 11px;border-radius:999px;color:var(--ebk-ink2);text-decoration:none;white-space:nowrap}
#ebk-admin-nav a.ebk-an-link:hover{background:var(--ebk-green-faint);color:var(--ebk-green)}
#ebk-admin-nav a.ebk-an-link[aria-current=page]{background:var(--ebk-green-tint);color:var(--ebk-green);font-weight:600}
#ebk-admin-nav .ebk-an-site{margin-left:auto;padding:7px 12px;border:1px solid var(--ebk-line2);border-radius:999px;color:var(--ebk-ink2);text-decoration:none;white-space:nowrap}
#ebk-admin-nav .ebk-an-site:hover{border-color:var(--ebk-green);color:var(--ebk-green)}

/* Kunden-Chat gehört nicht in den Admin */
html[data-eb-bereich=admin] button[aria-label*="Junior EB"],
html[data-eb-bereich=admin] #eb-a11y,
html[data-eb-bereich=admin] #lang-toggle{display:none!important}

@media print{#ebk-admin-nav{display:none}}