/* ============================================================
   EB-KLEIN BRAND — Single Source of Truth (Landingpage-Standard)
   Ein Stylesheet, App-weit injiziert. Vereinheitlicht Schrift,
   Markengrün und Grundton ueber alle vier Design-Welten.
   Kanonische Quelle: seo-landing.css  |  v1
   ============================================================ */

/* --- Fraunces self-hosted (KEIN Google-CDN -> DSGVO) --- */
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight:200 900; font-style:normal; font-display:swap;
}

/* --- Inter self-hosted (Body-Schrift, Landingpage-Standard) --- */
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* --- Kanonische Marken-Tokens (sichere ebk-* Namen, keine Kollision) --- */
:root{
  --ebk-green:#1A5828; --ebk-green-dark:#13401D; --ebk-green-tint:#E5F0E8;
  --ebk-gold:#B8963E;  --ebk-gold-tint:#FFF8E6;
  --ebk-cream:#FBF8F3; --ebk-cream2:#F1E8DC;
  --ebk-ink:#1A1A1A;   --ebk-ink2:#4A4A4A; --ebk-ink3:#7A7A7A;
  --ebk-line:#E5E5E5;  --ebk-line2:#D2D2D7;
  --ebk-serif:'Fraunces',Georgia,'Times New Roman',serif;
}

/* --- BRIDGE 1: Astro-Kern (--color-eb-*) : Acid-Mint -> warme Tanne --- */
/* 500-800 sind bereits korrekt; nur die hellen Mint-Stufen ziehen. */
:root{
  --color-eb-100:#E5F0E8;
  --color-eb-200:#C2DECB;
  --color-eb-300:#8FC0A0;
  --color-eb-400:#4E9468;   /* war #43d692 acid-mint -> gedaempfte Tanne (Hauptfix) */
  --color-eb-500:#2A7D3A;
  --color-eb-600:#1A5828;   /* Marke (war schon ok) */
  --color-eb-700:#13401D;
}

/* --- Grundton App-weit auf Creme (staerkster Anti-Sprung-Hebel) --- */
/* Cards/Surfaces bleiben weiss; nur die Flaeche dahinter wird warm. */
html,body{background-color:var(--ebk-cream);}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;}

/* --- Display-Schrift App-weit: Fraunces auf alle Headlines --- */
h1,h2,h3,.font-serif,.eb-display,.display,.hero-title,.eyebrow{
  font-family:var(--ebk-serif);
}
h1,h2,h3{ letter-spacing:-.006em; text-wrap:balance; }
p,li{ text-wrap:pretty; }

/* --- Sanfte, grun-getoente Tiefe (Landingpage-Anmutung) --- */
.shadow-card,.shadow-elevated,.shadow-floating{
  box-shadow:0 12px 28px rgba(0,0,0,.07), 0 0 0 .5px rgba(26,88,40,.06);
}

/* --- Fokus markenfarben (A11y, einheitlich) --- */
:where(a,button,[role=button],input,select,textarea):focus-visible{
  outline:2px solid var(--ebk-green); outline-offset:2px; border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ── Waagerechter Überlauf auf schmalen Bildschirmen ──────────────
   Sicherheitsnetz gegen einzelne zu breite Elemente: Auf dem Handy
   darf die Seite nicht seitlich wackeln. "clip" statt "hidden",
   damit klebende Kopfzeilen weiter funktionieren. Das ersetzt keine
   Korrektur der Ursache — es verhindert nur, dass eine übersehene
   Stelle die ganze Seite verschiebt. */
@media (max-width: 640px) {
  html { overflow-x: clip; }
  body { overflow-x: clip; max-width: 100vw; }
}

/* ── Handlungsknöpfe auf dem Handy ────────────────────────────────
   Mobil ist der häufigste Anwendungsfall, die Knöpfe waren aber für
   die Maus dimensioniert: der „Weiter"-Knopf des Heizungsfinders war
   82 × 38 px, „Link senden" 116 × 32, „Alles klar" 94 × 30.
   Unter 640 px wachsen die Hauptknöpfe auf 48 px Höhe und nehmen die
   Zeile ein, wenn sie allein darin stehen. Sekundärknöpfe („Zurück",
   Sprache, Schriftgröße) bleiben unverändert — sonst konkurrieren sie
   optisch mit der eigentlichen Handlung. */
@media (max-width: 640px) {
  .cta-btn, .hb-cta,
  #qa-start, #fr-berechnen, #fc-start, #wp-start-los, #wizNext,
  #wf-los, #fav-kaufen, #eb-fs-ok {
    min-height: 48px;
    justify-content: center;
    font-size: 15px;
  }

  /* Steht der Knopf allein in seiner Zeile, nimmt er sie ganz ein. */
  #qa-start, #fr-berechnen, #fc-start, #wf-los, .hb-cta {
    width: 100%;
  }

  /* In der Schrittleiste des Finders bleibt „Zurück" schmal links,
     „Weiter" bekommt den ganzen Rest. */
  .wiz-nav #wizNext { flex: 1 1 auto; margin-left: 12px; }

  /* Kleine Bestätigungsknöpfe in Hinweisboxen. */
  #eb-fs-ok, .eb-hinweis button, .cookie-ok { min-height: 44px; }
}