/* =========================================================
   Solarmacherei — Ergänzung für die Finanzierungsseite
   Werkhoch3™ · Stand 18.08.2026

   Wird NACH styles.css geladen. styles.css stammt von der abgelösten
   Aktionsseite und bleibt die Basis; hier stehen nur die Abweichungen.
   Zwei Aufgaben:
   1. Die Seite auf den Quick Design Guide von donez (29.06.2026) ziehen
   2. Die zusätzlichen Bausteine der Finanzierungsseite mitbringen
   ========================================================= */

/* ---------------------------------------------------------
   1 — Korrekturen nach Quick Design Guide

   Der Guide legt fest: Scale Regular für Überschriften und CTAs,
   Transducer Regular für Subheadlines und Fließtext. In styles.css
   ist die Zuordnung genau andersherum. Hier wird sie gedreht.

   Ebenfalls aus dem Guide: Box-Radius 20px, innenliegende Bilder
   10px, Buttons vollständig abgerundet mit schwarzer Kontur.
   --------------------------------------------------------- */
:root {
  --display: 'Scale', 'Archivo', system-ui, sans-serif;
  --body:    'Transducer', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius:   20px;
  --radius-l: 20px;
  --radius-innen: 10px;
}

/* Das hidden-Attribut schlaegt jede eigene display-Regel.

   Ohne diese Zeile bleibt ein Element mit display: grid oder flex
   sichtbar, obwohl JavaScript hidden gesetzt hat: die Regel des
   Browsers ([hidden] { display: none }) verliert gegen jede Klasse
   mit eigenem display. Betraf das Cookie-Banner und die
   Fortschrittsanzeige nach dem Absenden. */
[hidden] { display: none !important; }

/* Transducer läuft etwas breiter als Scale, deshalb minimal kleiner
   im Fließtext, damit die Zeilenlänge bleibt wie gehabt. */
body { font-size: 16.5px; line-height: 1.62; }
h1, h2, h3 { letter-spacing: -0.02em; }

/* Buttons: Pill mit schwarzer Kontur, keine Schlagschatten */
.btn {
  border-radius: 999px;
  border: 2px solid var(--schwarz);
  box-shadow: none;
}
.btn-primaer            { background: var(--gelb);      color: var(--schwarz); box-shadow: none; }
.btn-primaer:hover      { background: var(--gelb-hell); transform: translateY(-2px); box-shadow: none; }
.btn-primaer:active     { transform: translateY(0); box-shadow: none; }
.btn-hell               { background: var(--gelb); border-color: var(--schwarz); }
.btn-gruen              { background: var(--gruen); color: var(--schwarz); }
.btn-gruen:hover        { background: var(--gruen-hell); transform: translateY(-2px); }
.btn-weiss              { background: var(--weiss); color: var(--schwarz); }
.btn-weiss:hover        { background: var(--creme); transform: translateY(-2px); }
.kopf-cta               { box-shadow: none; }

/* Karten und Kacheln auf 20px, Bilder darin auf 10px */
.funnel-karte, .schritt-karte, .wahl-karte, .faq-item, .stimme,
.hinweis-box { border-radius: 20px; }
.funnel-karte img, .schritt-karte img, .wahl-karte img { border-radius: 10px; }
.wahl-knopf span { border-radius: 14px; }
.eingabe { border-radius: 12px; }

/* ---------------------------------------------------------
   2 — Hero mit Foto

   Auf der abgelösten Aktionsseite trug der Funnel den Hero allein.
   Hier steht ein Bild daneben, weil eine Finanzierung mehr Erklärung
   braucht als ein Rabatt.
   --------------------------------------------------------- */
.hero-foto {
  position: relative; margin-top: 1.9rem;
  border-radius: var(--radius-innen); overflow: hidden;
  border: 2px solid var(--schwarz);
}
.hero-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .95rem 1.15rem .8rem;
  font-family: var(--display); font-size: .88rem; color: var(--weiss);
  background: linear-gradient(to top, rgba(12,11,7,.82), rgba(12,11,7,0));
}
@media (max-width: 860px) { .hero-foto { display: none; } }

/* ---------------------------------------------------------
   3 — Marken-Illustrationen

   Die Icons aus dem Asset-Paket von donez. Sie ersetzen die
   Strich-SVGs überall dort, wo eine Auswahl getroffen wird.
   --------------------------------------------------------- */
.wahl-knoepfe.bilder { grid-template-columns: repeat(3, 1fr); }
.wahl-knoepfe.bilder span {
  flex-direction: column; align-items: center; text-align: center;
  gap: .35rem; padding: .85rem .5rem .8rem; font-size: .86rem;
  line-height: 1.25; min-height: 118px; justify-content: center;
}
.wahl-knoepfe.bilder .bild {
  width: 62px; height: 62px; object-fit: contain; flex: none;
  border-radius: 0; transition: transform .2s ease;
}
.wahl-knopf input:checked + span .bild { transform: scale(1.06); }

/* Auf Schwarz kippt die Illustration sonst weg; heller Rahmen darum. */
.wahl-knopf input:checked + span .bild {
  background: var(--creme); border-radius: 12px; padding: 2px;
}

.wahl-knoepfe.bilder.zweispaltig { grid-template-columns: 1fr 1fr; }
@media (max-width: 460px) {
  .wahl-knoepfe.bilder { grid-template-columns: 1fr 1fr; }
  .wahl-knoepfe.bilder .bild { width: 52px; height: 52px; }
}

/* Illustration als Blickfang in einem Abschnitt */
.motiv { display: block; margin-inline: auto; max-width: 260px; }
.motiv-klein { max-width: 150px; }

/* ---------------------------------------------------------
   4 — Gegenüberstellung zweier Wege
   --------------------------------------------------------- */
.wege { background: var(--weiss); border-block: 1px solid var(--linie); }
.wege-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 2.6rem; }
.weg-karte {
  background: var(--creme); border: 2px solid var(--schwarz);
  border-radius: 20px; padding: clamp(22px, 3vw, 32px);
}
.weg-karte.betont { background: var(--gelb); }
.weg-karte img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 1rem; }
.weg-karte h3 { margin-bottom: .6rem; }
.weg-liste { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.weg-liste li { display: flex; gap: .6rem; font-size: .92rem; line-height: 1.45; }
.weg-liste .haken {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  background: var(--schwarz); display: grid; place-items: center; margin-top: .15rem;
}
.weg-liste .haken svg { width: 10px; height: 10px; color: var(--gelb); }
@media (max-width: 780px) { .wege-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   5 — Abschlussband mit Illustration
   --------------------------------------------------------- */
.abschluss-band {
  background: var(--gelb); border: 2px solid var(--schwarz); border-radius: 20px;
  display: grid; grid-template-columns: 1.35fr .65fr; align-items: end;
  gap: clamp(20px, 3vw, 40px); padding: clamp(28px, 4vw, 46px);
  padding-bottom: 0; overflow: hidden;
}
.abschluss-band .text { padding-bottom: clamp(28px, 4vw, 46px); }
.abschluss-band h2 { color: var(--schwarz); }
.abschluss-band p { color: #40360E; max-width: 46ch; }
.abschluss-band img { width: 100%; max-width: 230px; margin-left: auto; display: block; }
@media (max-width: 780px) {
  .abschluss-band { grid-template-columns: 1fr; padding-bottom: 0; }
  .abschluss-band img { max-width: 170px; margin-inline: auto; }
}

/* ---------------------------------------------------------
   6 — Kleinigkeiten
   --------------------------------------------------------- */
.entwurf-fahne b { font-weight: 400; font-family: var(--display); }

/* Auf schmalen Bildschirmen weichen Telefon und CTA einem kurzen
   Hinweis. styles.css schreibt dort "Aktion läuft", was seit der
   Ablösung der Aktionsseite nicht mehr stimmt. Der Text kommt
   deshalb aus dem Markup. */
@media (max-width: 640px) {
  .kopf-rechts[data-notiz]::after { content: attr(data-notiz); }
}

/* Der Stern zeigt auf die Hinweise zur Finanzierung im Fuß. */
.pflichthinweis h4 + h4 { margin-top: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  .btn, .wahl-knopf .bild { transition: none !important; }
  .btn:hover { transform: none !important; }
}

/* ---------------------------------------------------------
   7 — Cookie-Banner

   Erscheint einmal beim ersten Besuch. Der Meta Pixel lädt erst
   nach "Alle akzeptieren", die Auswahl liegt in localStorage.
   --------------------------------------------------------- */
.cookie-banner {
  position: fixed; z-index: 60;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 640px; margin-inline: auto;
  background: var(--weiss); border: 2px solid var(--schwarz);
  border-radius: 20px; padding: 1.2rem 1.35rem;
  box-shadow: 0 10px 40px rgba(20,18,12,.22);
  display: grid; gap: 1rem;
  animation: einblenden .3s ease;
}
.cookie-text { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text-leise); }
.cookie-text a { color: var(--schwarz); }
.cookie-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-btn { flex: 1 1 auto; justify-content: center; padding: .78rem 1.4rem; font-size: .92rem; }

/* Auf dem Handy sitzt unten schon der Sticky-CTA */
@media (max-width: 640px) {
  .cookie-banner { bottom: 84px; }
  .cookie-knoepfe { flex-direction: column; }
}