/* NES Anlagen-Check 1.1.0: seitenspezifische Regeln im Daylight-Design.
   Alles Uebrige kommt aus nes-daylight.css (Plugin NES Daylight). */
/* Seitenspezifisch fuer den Anlagen-Check. Nur Tokens aus :root,
   keine Hex-Werte; alle Selektoren haengen an .nesac, damit der Block
   spaeter 1:1 als anlagencheck.css ins Plugin wandern kann. */

/* Abstand der Schrittziffer, wie auf /photovoltaik/ */
.nesac .dl-kachel .dl-schrittnr { line-height: 1; margin-bottom: 10px; }

/* Rechtslage: Definitionsliste in Haarlinien, Optik wie .dl-fakt */
.nesac-fakten { max-width: 980px; margin: 40px 0 0; }
.nesac-fakten > div { border-top: 1px solid rgba(255,247,233,.25); padding: 20px 0; }
.nesac-fakten > div:last-child { border-bottom: 1px solid rgba(255,247,233,.25); }
.nesac-fakten dt { font-family: var(--dl-sans); font-weight: 500; font-size: clamp(17px, 2.2vw, 21px); letter-spacing: -0.01em; line-height: 1.3; }
.nesac-fakten dd { margin: 8px 0 0; font-size: 15px; line-height: 1.55; opacity: .85; max-width: 62ch; }
@media (min-width: 900px) {
  .nesac-fakten > div { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: baseline; }
  .nesac-fakten dd { margin: 0; }
}
.nesac .nesac-quelle { margin-top: 24px; font-family: var(--dl-mono); font-size: 11.5px; letter-spacing: -0.025em; opacity: .7; max-width: 80ch; }

/* ---------- Formular ---------- */
.nesac-formwrap .nesac-form, .nesac-formwrap .nesac-success { max-width: 760px; margin: 40px auto 0; }
.nesac-formwrap .dl-kopf { margin: 0 auto; }
.nesac-group { border: 0; margin: 0; padding: 0; }
.nesac-group + .nesac-group { margin-top: 44px; }
.nesac-group > legend {
  display: block; width: 100%; padding: 0 0 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--dl-linie);
  font-family: var(--dl-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: -0.025em; color: var(--dl-brown);
}
/* Labels wie auf /kontakt/: normale Schrift, besser lesbar als Mono-Versalien */
.nesac-form .dl-label, .nesac-choice > legend {
  font-family: var(--dl-sans); font-size: 15px; font-weight: 500; text-transform: none;
  letter-spacing: normal; color: var(--dl-ink); margin: 0 0 8px; padding: 0;
}
/* Einheitlicher Abstand zwischen allen Feldern. Label und Legend tragen
   selbst keinen Abstand nach oben, sonst stehen im Zweispalter ein
   Fieldset (Legend) und ein normales Feld (Label) versetzt nebeneinander. */
.nesac-field { min-width: 0; margin-top: 20px; }
.nesac-form .dl-label, .nesac-choice > legend { margin-top: 0; }
.nesac-choice { border: 0; margin: 20px 0 0; padding: 0; }
/* Das Haarlinien-Raster der Sektion laeuft sonst mitten durch
   Beschriftungen; Formular und Danke-Kasten decken es ab. */
.nesac-formwrap .nesac-form { position: relative; background: var(--dl-cream); }
.nesac-grid { display: grid; gap: 0 14px; }
@media (min-width: 640px) {
  .nesac-grid { grid-template-columns: 1fr 1fr; }
  .nesac-grid--plz { grid-template-columns: 9rem 1fr; }
}
/* Auswahllisten im Feldstil, Pfeil als Hintergrund in Ink */
.nesac-form select.dl-feld {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
/* .nesac davor: nes-daylight.css laedt live NACH dieser Datei und setzt
   .dl-page p { margin: 0 } (0,1,1); sonst klebten Hinweise und Fehler am Feld */
.nesac .nesac-hint { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--dl-brown); }
.nesac .nesac-error { margin: 6px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--dl-ink); }
.nesac .nesac-error:empty { display: none; }
/* Rahmen mit rund 4:1 Kontrast (WCAG 1.4.11; vorher 1,7:1 auf Weiss) */
.nesac-form .dl-feld { border-color: rgba(17,17,17,.55); }
.nesac-form [aria-invalid="true"] { border: 2px solid var(--dl-ink); }

/* Ja / Nein / Weiss ich nicht: drei gleich breite Felder */
.nesac-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* Interessen: grosse Tippflaechen, eine Spalte am Handy */
.nesac-chips { display: grid; gap: 6px; }
@media (min-width: 640px) { .nesac-chips { grid-template-columns: 1fr 1fr; } }
.nesac-segment label, .nesac-chips label {
  position: relative; display: flex; align-items: center; min-height: 48px;
  padding: 10px 14px; border: 1px solid rgba(17,17,17,.55); border-radius: var(--dl-r);
  background: var(--dl-white); font-size: 15px; line-height: 1.3; cursor: pointer;
}
.nesac-segment label { justify-content: center; text-align: center; padding: 10px 6px; }
.nesac-segment input, .nesac-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nesac-segment label:has(input:checked), .nesac-chips label:has(input:checked) {
  background: var(--dl-ink); border-color: var(--dl-ink); color: var(--dl-cream);
}
.nesac-segment label:has(input:focus-visible), .nesac-chips label:has(input:focus-visible) {
  outline: 2px solid var(--dl-ink); outline-offset: 2px;
}
/* Auch ohne :has() (aeltere iPads, Firefox ESR) sichtbar, was gewaehlt ist */
.nesac-segment input:checked + span, .nesac-chips input:checked + span { font-weight: 600; }
@supports not selector(:has(*)) {
  .nesac-segment input:checked + span, .nesac-chips input:checked + span { text-decoration: underline; text-underline-offset: 3px; }
  .nesac-segment input:focus-visible + span, .nesac-chips input:focus-visible + span { outline: 2px solid var(--dl-ink); outline-offset: 4px; }
}

/* Foto-Upload: Knopf im Daylight-Stil, Liste in Mono */
.nesac-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.nesac-upload input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nesac-upload input[type="file"]:focus-visible + label { outline: 2px solid var(--dl-ink); outline-offset: 2px; }
/* Auswahlknopf im Feldstil: weiss mit Rahmen, sonst verschwindet er auf Cream */
.dl-page .nesac-upload__btn { background: var(--dl-white); color: var(--dl-ink); border: 1px solid rgba(17,17,17,.55); cursor: pointer; }
.nesac-upload__list { list-style: none; margin: 0; padding: 0; width: 100%; font-family: var(--dl-mono); font-size: 12px; letter-spacing: -0.025em; color: var(--dl-brown); }
.nesac-upload__list:empty { display: none; }
.nesac-upload__list li { padding: 8px 0; border-top: 1px solid var(--dl-linie); }

textarea.dl-feld { resize: vertical; }

/* Einwilligungen: wie .dl-privacy auf /kontakt/ */
.nesac-check label { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.nesac-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--dl-ink); }
.nesac-check .nesac-error { margin-left: 32px; }
.dl-page .nesac-check a { text-decoration: underline; text-underline-offset: 3px; }

.nesac-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Gesamtfehler und Danke: dieselben Kaesten wie auf /kontakt/ */
.nesac .nesac-formerror { margin: 28px 0 0; padding: 12px 14px; border-radius: var(--dl-r); background: var(--dl-ink); color: var(--dl-cream); font-size: 14.5px; line-height: 1.5; }
.nesac-formerror[hidden], .nesac-success[hidden] { display: none; }
.nesac-form .nesac-submit { margin-top: 28px; width: 100%; height: 54px; font-size: 16px; }
@media (min-width: 640px) { .nesac-form .nesac-submit { width: auto; min-width: 280px; } }
.nesac-form .nesac-submit:disabled { opacity: .55; cursor: progress; }
/* scroll-margin: das Skript scrollt den Kasten nach oben; ohne Abstand
   laege die Danke-Ueberschrift unter der festen Kopfleiste */
.nesac .nesac-success { background: var(--dl-beige); border-radius: var(--dl-r); padding: 28px; scroll-margin-top: calc(var(--dl-kopf-h, 60px) + 24px); }
.nesac-success:focus { outline: none; }
.nesac .nesac-success h3 { font-family: var(--dl-sans); font-size: clamp(22px, 3vw, 28px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 12px; }
.nesac .nesac-success p { font-size: 15px; line-height: 1.55; margin: 0 0 10px; max-width: 58ch; }
.nesac .nesac-success p:last-child { margin-bottom: 0; }

.nesac-nowrap { white-space: nowrap; }

/* Split-Bild im eigenen Format zeigen: Das Wechselrichter-Foto ist sehr
   breit (knapp 2:1), die beiden Geraete stehen weit auseinander. Mit der
   Mindesthoehe des Bausteins (320 / 440 px) wuerde es fast quadratisch
   beschnitten und beide Geraete angeschnitten; ohne sie bliebe unter dem
   Bild ein beiger Streifen. Deshalb passt sich hier der Rahmen dem Bild an. */
.nesac .dl-split__media { min-height: 0; }
.nesac .dl-split__media img { height: auto; }

/* Abschlussfoto: Das Motiv liegt nebeneinander (links Carport mit neuen
   Modulen, rechts Hauptdach mit alten). Der Rahmen ist am Desktop hochkant
   und zeigt nur einen Streifen; mittig fiele der Carport heraus. Deshalb
   Ausschnitt auf den Uebergang von neu zu alt: bei 42 % stehen am Desktop
   links die neuen, rechts die alten Module je etwa zur Haelfte (im Bild
   nachgerechnet), mobil ist ohnehin fast das ganze Motiv zu sehen. */
.nesac .dl-final__media img { object-position: 42% 50%; }

/* Abschluss: Adresszeile unter dem Text */
/* Rueckruf-Kasten vor dem grossen Formular: beige Flaeche, Felder darin
   ohne eigenen Hintergrund; Danke-Text erscheint im selben Kasten */
.nesac-rueckruf__box { position: relative; max-width: 760px; margin: 0 auto; background: var(--dl-beige); border-radius: var(--dl-r); padding: clamp(22px, 4vw, 36px); }
.nesac-rueckruf .dl-copy { margin-top: 10px; }
.nesac-formwrap.nesac-rueckruf .nesac-form { margin: 8px 0 0; max-width: none; background: none; }
.nesac-formwrap.nesac-rueckruf .nesac-success { margin: 18px 0 0; max-width: none; padding: 0; background: none; }

.nesac-adresse { margin-top: 18px; font-style: normal; font-size: 15px; line-height: 1.6; }
.dl-page .nesac-adresse a { text-decoration: underline; text-underline-offset: 3px; }

/* Seitentitel des Themes ausblenden, die Landingpage bringt ihre eigene Ueberschrift mit */
.nesac-page .wp-block-post-title:not(.wp-block-post-template .wp-block-post-title) { display: none; }