/* ==========================================================
   BIXX² Solar – Conversion-Bausteine
   Eingebunden NACH css/style.css. Nutzt nur Tokens aus style.css.
   Bausteine: Aktionsleiste (Handy), EEG-Hinweis im Hero,
   Dach-Check-Kurzformular, Bewertungen, Kennzahlen.
   ========================================================== */

/* ── 1. Feste Aktionsleiste unten (nur Handy) ─────────────── */
.aktionsleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90; /* unter .site-header (100), damit das offene Menü darüber liegt */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background-color: rgba(var(--color-bg-rgb), 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border-light);
  transform: translateY(0);
  transition: transform var(--duration-normal) var(--ease-out);
}
.aktionsleiste .btn {
  width: 100%;
  padding: 0.8em 0.6em;
  font-size: var(--text-base);
}
.aktionsleiste.ist-verborgen { transform: translateY(110%); }

@media (max-width: 767px) {
  body.hat-aktionsleiste { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
  .aktionsleiste { display: none; }
}

/* ── 2. EEG-Hinweis im Hero ───────────────────────────────── */
.eeg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 0.45em 0.9em;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-on-accent);
  background-color: var(--color-accent);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
.eeg-badge:hover { transform: translateY(-1px); }
.eeg-badge:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }
.eeg-badge-pfeil { font-weight: 800; }

/* ── 3. Dach-Check (Kurzformular) ─────────────────────────── */
.dach-check {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.dach-check-titel {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}
.dach-check-sub {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.dach-check .form-group { margin-bottom: var(--space-4); }

.bereich-wahl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.bereich-wahl legend {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.bereich-option { position: relative; }
.bereich-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bereich-option span {
  display: block;
  text-align: center;
  padding: 0.75em 0.4em;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.bereich-option input:checked + span {
  color: var(--color-text-on-accent);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.bereich-option input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.dach-check .btn { width: 100%; }
.dach-check-fuss {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.dach-check-fuss a { color: var(--color-text-muted); }

/* Rückmeldung nach fehlgeschlagener Absendung (kontakt.php ?fehler=…) */
.dach-check-fehler {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-surface-alt);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
}
.dach-check-fehler[hidden] { display: none; }

/* ── 4. Bewertungen ───────────────────────────────────────── */
.bewertungen-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.bewertungen-sterne { display: inline-flex; gap: 2px; color: var(--color-accent); }
.bewertungen-schnitt { font-weight: 800; font-size: var(--text-xl); }
.bewertungen-anzahl { color: var(--color-text-muted); font-size: var(--text-sm); }
.bewertungen-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) {
  .bewertungen-grid { grid-template-columns: repeat(3, 1fr); }
}
.bewertung-karte {
  margin: 0;
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.bewertung-text { line-height: 1.65; margin-bottom: var(--space-4); }
.bewertung-quelle { font-size: var(--text-sm); color: var(--color-text-muted); }
.bewertung-quelle strong { color: var(--color-text); }
.bewertungen-link { margin-top: var(--space-6); }

/* ── 5. Kennzahlen-Leiste ─────────────────────────────────── */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .kennzahlen { grid-template-columns: repeat(4, 1fr); }
}
.kennzahl-wert {
  display: block;
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}
.kennzahl-label { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .aktionsleiste, .eeg-badge { transition: none; }
}

/* ── 6. Textverweis im Abschluss-CTA (dunkler Grund) ──────── */
.cta-sub .cta-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cta-sub .cta-link:hover { text-decoration-thickness: 2px; }
.cta-sub .cta-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }