/* PSL / PV Lindner — Basis-Layer.
   Das Layout selbst steckt als Inline-Styles im generierten index.html (1:1 aus
   dem Design). Hier steht nur, was dort nicht ausgedrückt werden kann:
   Grundzustand vor dem ersten JS-Lauf, Sichtbarkeitslogik und Fallbacks. */

/* Seitenhintergrund des Themes "Warmweiss" schon vor dem JS setzen,
   damit beim Laden kein Weiß-Blitz entsteht. */
/* Sprungziele bleiben unter dem festen Header vollständig sichtbar. */
html { background: #FBFAF7; scroll-padding-top: 88px; }
body { background: #FBFAF7; }

/* Der Helmet-Block der Design-Datei setzt `overflow-x: hidden` auf html UND
   body. Auf dem body erzwingt das `overflow-y: auto` — body wird damit zum
   Scroll-Container, und der Sticky-Header hat nichts mehr, woran er kleben
   könnte (er scrollt einfach weg). `clip` schneidet genauso ab, erzeugt aber
   keinen Scroll-Container, deshalb bleibt sticky intakt. */
body {
  overflow-x: clip;
  overflow-y: visible;
}

/* --- Sprungmarke für Tastatur- und Screenreader-Nutzung ------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #0F57A0;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* --- Bedingte Blöcke (ehemals <sc-if>) ---------------------------------- */
[data-show] { display: none; }
[data-show].is-on { display: block; }

/* --- Formularzustände ---------------------------------------------------- */
[data-form] input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: 18px;
}

[data-form][data-busy="1"] button[type="submit"] {
  opacity: .6;
  cursor: progress;
}
.form-error {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}
[data-form="kontakt"] .form-error { color: #FFD9D9; }
[data-form="funnel"] .form-error { color: #B3261E; }

/* --- Vor dem ersten JS-Lauf ---------------------------------------------- */
/* site.js setzt data-ready auf die Navigation, sobald es die mobile Variante
   aufgebaut hat. Bis dahin würde auf schmalen Viewports die Desktop-Leiste
   aufblitzen — also verstecken und den Burger anzeigen. */
@media (max-width: 999px) {
  html.js [data-navroot]:not([data-ready]) { display: none; }
  html.js [data-burger] { display: inline-flex; }
}

/* --- Mobile Optimierung -------------------------------------------------- */
/* Das Design ist auf Desktop-Breiten ausgelegt und legt alle Maße als
   Inline-Styles fest. Zwei Stellen sprengen dadurch schmale Viewports:
   die Kopfzeile (Logo 160 px + Burger + CTA nebeneinander) und die
   zweispaltigen Formularraster (`1fr 1fr` schrumpft nicht unter die
   Mindestbreite der Eingabefelder). Inline-Styles schlagen Klassenselektoren,
   deshalb hier !important.
   Die Größen skalieren fließend über clamp(), damit es keine Breite gibt,
   bei der es gerade eben nicht mehr passt — geprüft von 320 bis 999 px. */
@media (max-width: 999px) {
  .kopfzeile {
    padding: 12px clamp(14px, 4vw, 24px) !important;
    gap: clamp(8px, 2.5vw, 16px) !important;
  }

  .kopf-logo {
    height: clamp(28px, 8.5vw, 38px) !important;
    width: auto !important;
  }

  /* Mindestens 44 px Trefferfläche (Handoff B). box-sizing: border-box, sonst
     addiert sich die Polsterung auf die 44 px und der Knopf wird 62 px hoch. */
  .kopf-cta {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    font-size: clamp(12.5px, 3.4vw, 15px) !important;
    padding: 9px clamp(12px, 4vw, 22px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Formularfelder dürfen auch unter ihre intrinsische Breite schrumpfen. */
  .feldraster {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .feldraster > label {
    min-width: 0;
  }

  .feldraster input,
  .feldraster select,
  .feldraster textarea {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Lange Beschriftungen bleiben innerhalb ihrer vorhandenen CTA-Pille. */
  main a[style*="border-radius: 999px"] {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .solarkataster-bild {
    height: auto !important;
  }

  /* Deutsche Komposita ("Wirtschaftlichkeitsberechnung", "Zukunftssichere")
     sind auf 320 px breiter als ihre Spalte und ragten aus dem Layout.
     Silbentrennung greift dank lang="de" am <html>-Element; break-word ist
     das Sicherheitsnetz für alles, was sich nicht trennen lässt (URLs). */
  body {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Flex-Kinder haben von Haus aus `min-width: auto` und schrumpfen deshalb
     nie unter die Breite ihres längsten Wortes — dadurch ragten die
     Aufzählungszeilen in den Lösungs-Panels 44 px aus der Spalte.
     `min-width: 0` ist die Standardkorrektur; Elemente mit `flex-shrink: 0`
     (Logo, CTA, Icons) bleiben davon unberührt. */
  [style*="display: flex"] > * {
    min-width: 0;
  }

  /* Ausnahme: Mono-Badges (Schritt-Nummern, Förderbeträge, Pfeile) sind kurze
     Etiketten in Flex-Zeilen. Dürfen sie schrumpfen, läuft ihr Text aus der
     Pille ("150 €/kWp" in 41 px). Sie behalten ihre Inhaltsbreite, der
     Fließtext daneben bricht stattdessen um. */
  [style*="display: flex"] > [style*="Plex Mono"] {
    min-width: max-content;
    flex-shrink: 0;
  }
}

/* Beträge, Datumsangaben und Job-Metadaten stehen auf kleinen Geräten über
   der Beschreibung, damit deren Text die volle Zeilenbreite nutzen kann. */
@media (max-width: 599px) {
  .badge-row,
  .job-meta-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .badge-row > :last-child,
  .job-meta-row > :last-child {
    min-width: 0;
    width: 100%;
  }

  .job-meta-row > :first-child {
    width: auto !important;
  }
}

.vergleich-scroll {
  max-width: 100%;
}

.vergleich-scroll:focus-visible {
  outline: 2px solid #0F57A0;
  outline-offset: 4px;
}

.vergleich-scrollhinweis {
  display: none;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #44586C;
}

@media (max-width: 743px) {
  .vergleich-scrollhinweis {
    display: block;
  }
}

/* --- Ohne JavaScript ----------------------------------------------------- */
/* Die Navigation bleibt bedienbar (gestapelt statt Mega-Menü), der Funnel wird
   ausgeblendet und durch den Hinweis auf das Kontaktformular ersetzt. */
html:not(.js) [data-burger] { display: none !important; }
html:not(.js) [data-dd-menu] { display: none !important; }
html:not(.js) #funnel [data-plx="panel"] { display: none; }

@media (max-width: 999px) {
  html:not(.js) [data-navroot] {
    flex-wrap: wrap !important;
    gap: 14px 20px !important;
    padding: 4px 0 10px !important;
  }
}

.nojs-hinweis {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px 148px;
  font-size: 16.5px;
  line-height: 1.65;
  color: #44586C;
}

/* Ein vollständiger Frageschritt bleibt auf einem Handy gemeinsam sichtbar.
   Inline-Maße stammen aus dem Designexport; diese Komponente besitzt deshalb
   eigene, gezielte Überschreibungen statt der allgemeinen JS-Abstandskürzung. */
.funnel-titel-mobil, .funnel-kurztext { display: none; }
.angebot-funnel { scroll-margin-top: 12px; }
.funnel-frage:focus { outline: none; }
.funnel-auswahl button:focus-visible,
.funnel-zurueck:focus-visible,
.funnel-senden:focus-visible,
.funnel-optional summary:focus-visible {
  outline: 3px solid #0F57A0;
  outline-offset: 3px;
}
.funnel-auswahl button[aria-pressed="true"] {
  border-color: #0F57A0 !important;
  background: #E8F0F8 !important;
}
.funnel-pflichtfelder, .funnel-optionale-felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.funnel-feld { min-width: 0; }
.funnel-feld label {
  display: block;
  margin: 0 0 6px;
  color: #071E38;
  font-size: 14px;
  font-weight: 600;
}
.funnel-feld input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  font-size: 16px !important;
}
.funnel-optional { margin: 8px 0 0; }
.funnel-optional summary {
  padding: 12px 0;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 20px;
  color: #0F57A0;
  cursor: pointer;
}
.funnel-optionale-felder { padding: 4px 0 8px; }
.funnel-senden { max-width: 100%; }

@media (max-width: 999px) {
  /* Schon vor dem Start von JS steht das Formular oben. JS zieht auch die
     DOM-Reihenfolge nach, sodass Tastatur und Screenreader gleich folgen. */
  html.js #inhalt:has(> .angebot-funnel) { display: flex; flex-direction: column; }
  html.js #inhalt:has(> .angebot-funnel) > * { flex-shrink: 0; }
  html.js .angebot-funnel { order: -1; }
  .angebot-funnel { overflow: visible !important; }
  .funnel-wrap { padding: 12px 14px 24px !important; max-width: 600px !important; }
  .funnel-panel { padding: 20px !important; border-radius: 16px !important; }
  .funnel-panel, .funnel-inner { transform: none !important; will-change: auto !important; }
  .funnel-vorteile, .funnel-titel-desktop, .funnel-einleitung { display: none !important; }
  .funnel-titel-mobil { display: inline; }
  .funnel-titel { font-size: 24px !important; line-height: 1.15 !important; margin: 0 0 6px !important; }
  .funnel-kurztext { display: block; margin: 0 0 18px; font-size: 14px; line-height: 1.4; color: #44586C; }
  .funnel-fortschritt { margin: 0 auto 8px !important; gap: 6px !important; }
  .funnel-schritt { margin: 0 0 18px !important; font-size: 11px !important; line-height: 1.3; letter-spacing: .1em !important; }
  .funnel-frage { margin: 0 0 14px !important; font-size: 21px !important; line-height: 1.25; }
  .funnel-auswahl { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .funnel-auswahl button {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    padding: 8px 12px 8px 8px !important;
    min-height: 56px !important;
    box-sizing: border-box;
    font-size: 15px !important;
    line-height: 1.25;
    border-radius: 10px !important;
    hyphens: none;
  }
  .funnel-auswahl button svg {
    flex-shrink: 0 !important;
    width: 26px !important;
    height: 26px !important;
    padding: 6px !important;
    border-radius: 7px !important;
  }
  .funnel-zurueck { margin-top: 8px !important; padding: 10px 14px !important; }
  .funnel-pflichtfelder, .funnel-optionale-felder { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .funnel-zusammenfassung { font-family: inherit !important; font-size: 12px !important; line-height: 1.4; margin-bottom: 16px !important; }
  .funnel-feld input { padding: 11px 12px !important; }
  .funnel-datenschutz { margin: 10px 0 14px !important; gap: 10px !important; font-size: 12px !important; line-height: 1.4 !important; }
  .funnel-senden { width: 100%; padding: 13px 16px !important; font-size: 15px !important; line-height: 1.3; min-height: 46px; }
  .angebot-funnel[data-active-step="3"] .funnel-titel,
  .angebot-funnel[data-active-step="3"] .funnel-kurztext { display: none; }
}

@media (max-width: 374px), (max-width: 999px) and (max-height: 700px) {
  .funnel-panel { padding: 14px !important; }
  .funnel-titel { font-size: 22px !important; }
  .funnel-kurztext { margin-bottom: 12px; }
  .funnel-schritt { margin-bottom: 12px !important; }
  .funnel-frage { font-size: 19px !important; margin-bottom: 12px !important; }
  .funnel-auswahl button { min-height: 52px !important; }
  .funnel-pflichtfelder, .funnel-optionale-felder { gap: 8px; }
  .funnel-feld label { margin-bottom: 4px; font-size: 13px; }
  .funnel-zusammenfassung { margin-bottom: 10px !important; }
  .funnel-zurueck { margin-top: 4px !important; }
  .funnel-optional { margin-top: 0; }
  .funnel-datenschutz { margin-top: 6px !important; margin-bottom: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .funnel-panel, .funnel-inner { transform: none !important; will-change: auto !important; }
}