/* Landingpage Ladesäulen (05.10.2026, Fassung 2), nur auf /ladesaeulen geladen, nach style.css und kreis.css, vor glas.css.
   Grundlage bleibt die Website (Schriften, Farben, .abschnitt, .knopf, .h1/.h2, Kopf, Fuß). Hier nur, was die Seite
   zusätzlich braucht: Foto-Held mit Umschalter Gemeinde/Gewerbe, Beleg "0 €", Film, Schritte, Technik-Tafel, Kontakt mit Bild.
   Bilder: KI-Symbolbilder nach MMs Freigabe vom 05.10.2026, jedes trägt sichtbar den Vermerk .ls-ki in der Bildecke.
   Pulverminze ist die Farbe der Ladesäulen aus dem Prospekt; Text steht nie in Minze auf Hell (Kontrast 1,6:1 bis 1,75:1),
   sondern in --ls-minze-tief (5,3:1 auf Weiß, 4,83:1 auf #e9f7f9, nach WCAG-Formel berechnet). Jede Bewegung hat eine Weiche für reduzierte Bewegung. */

.ls-seite{
  --ls-minze:#8acfd6; --ls-minze-hell:#e9f7f9; --ls-minze-tief:#2a7581;
  --ls-text:#2b3450;      /* Fließtext auf Hell, 11:1 auf #e9f7f9 */
  --ls-linie:color-mix(in srgb, var(--navy) 12%, transparent);
  --ls-karte:#ffffff;
  background:var(--creme);
}
/* Einspaltige Raster am Handy: Spalte nie breiter als der Platz (minmax(0,1fr) statt auto), breitere Stufen weiter unten */
.ls-held__raster,.ls-karten,.ls-alles__raster,.ls-weg,.ls-technik__karte,.ls-kontakt__raster{grid-template-columns:minmax(0,1fr)}
.ls-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Vermerk auf jedem KI-Bild (Vorgabe 05.10.2026: sichtbar, klein, in der Bildecke). Navy auf fast weißer Pille, über jedem Bildgrund
   mindestens 9:1. Für Vorleser steht derselbe Hinweis am Anfang des Alt-Textes, deshalb hier aria-hidden. */
.ls-ki{position:absolute;right:.7rem;bottom:.7rem;z-index:3;pointer-events:none;
  font:600 .64rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);
  background:color-mix(in srgb,#fff 88%,transparent);padding:.45em .75em .4em;border-radius:999px}

/* ---------- Umschalten Gemeinde / Gewerbe ----------
   Ohne JavaScript per :has() am Auswahlknopf, mit JavaScript zusätzlich per Klasse am body (ältere Browser).
   :is() ist nachsichtig: Kennt ein Browser :has() nicht, gilt nur die Klasse. */
.ls-seite:not(:is(.ls-gewerbe,:has(#fuer-gewerbe:checked))) .nur-gewerbe{display:none!important}
.ls-seite:is(.ls-gewerbe,:has(#fuer-gewerbe:checked)) .nur-gemeinde{display:none!important}

.ls-schalter{border:0;margin:0 0 1.6rem;padding:4px;display:inline-flex;gap:4px;border-radius:999px;background:#fff;
  box-shadow:0 0 0 1px var(--ls-linie),0 10px 24px -14px rgba(32,41,87,.35);position:relative}
.ls-schalter input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ls-schalter label{font:600 .95rem/1 var(--display);color:var(--navy);padding:.85em 1.25em;border-radius:999px;cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;transition:background-color .3s var(--ease),color .3s var(--ease)}
.ls-schalter label:hover{background:var(--ls-minze-hell)}
.ls-schalter input:checked + label{background:var(--navy);color:var(--creme)}
.ls-schalter input:focus-visible + label{outline:2px solid var(--rot);outline-offset:2px}

/* ---------- Knöpfe auf hellem Grund ---------- */
.ls-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.knopf.ls-knopf-rot{background:var(--rot);border-color:var(--rot);color:#fff}
.knopf.ls-knopf-rot:hover{background:color-mix(in srgb,var(--rot) 86%,#000);border-color:color-mix(in srgb,var(--rot) 86%,#000);color:#fff}
.knopf.ls-knopf-linie{border-color:var(--navy);color:var(--navy);background:transparent}
.knopf.ls-knopf-linie:hover{border-color:var(--rot);color:var(--rot)}
.ls-held .knopf,.ls-held{--focus:var(--rot)}

/* ---------- Held: Foto und Aussage ----------
   Im Quelltext steht der Text vorn (Vorleser und Suchmaschinen beginnen mit der Aussage). Handy: Foto oben über die volle Breite
   (order:-1), darunter Umschalter, Titel, Lead, Knöpfe. Computer: Text links auf Minze-hell, Foto rechts randlos über die volle Höhe. */
.ls-held{position:relative;background:var(--ls-minze-hell);color:var(--tinte);overflow:hidden}
.ls-held__raster{display:grid}
.ls-held__text{padding-block:1.6rem 2.8rem;position:relative;z-index:1}
.ls-held__bild{order:-1;position:relative;margin-inline:calc(-1 * var(--gutter));aspect-ratio:375/330;background:var(--navy);overflow:hidden}
.ls-held__bild picture,.ls-held__bild img{display:block;width:100%;height:100%}
.ls-held__bild img{object-fit:cover;object-position:50% 74%}
.ls-kicker{margin:0 0 .9rem;color:var(--rot)}
.ls-titel{font-size:clamp(2.15rem,3.3vw + 1.2rem,5.2rem);line-height:.98;letter-spacing:-.035em;color:var(--navy);max-width:13ch}
.ls-titel .ls-rot{color:var(--rot);display:block}
.ls-lead{color:var(--ls-text);margin-top:1.2rem;max-width:46ch}
/* 0-€-Marke wie im Prospekt: weiß mit rotem Ring, im Himmel des Fotos, am Handy auf der Seite ohne Säule (Gemeinde: Säule rechts,
   Marke links; Gewerbe: Säulen links, Marke rechts; Bildschirmfotos 375 px vom 05.10.2026) */
.ls-marke{position:absolute;top:.9rem;left:1.4rem;z-index:2;width:6.6rem;height:6.6rem;margin:0;border-radius:50%;
  background:#fff;color:var(--navy);border:3px solid var(--rot);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transform:rotate(-6deg);box-shadow:0 14px 28px -12px rgba(0,0,0,.55)}
.ls-seite:is(.ls-gewerbe,:has(#fuer-gewerbe:checked)) .ls-marke{left:auto;right:1.4rem}
.ls-marke b{font:700 1.9rem/1 var(--display);letter-spacing:-.02em;color:var(--rot)}
.ls-marke span{font:700 .56rem/1.2 var(--text);text-transform:uppercase;letter-spacing:.04em;margin-top:.3rem;padding-inline:.7rem}
@media (min-width:1000px){
  .ls-held{display:flex;min-height:clamp(620px,calc(100svh - var(--kopf-h)),920px)}
  .ls-held__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .ls-held__text{padding-block:clamp(2.5rem,6vh,4.5rem);padding-right:clamp(1.5rem,3vw,3.5rem)}
  .ls-held__bild{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;aspect-ratio:auto}
  .ls-held__bild img{object-position:50% 68%}
  .ls-titel{max-width:11.5ch}
  .ls-marke,.ls-seite:is(.ls-gewerbe,:has(#fuer-gewerbe:checked)) .ls-marke{top:clamp(1.5rem,6vh,3.5rem);left:clamp(1.5rem,3vw,3rem);right:auto;
    width:9.4rem;height:9.4rem;border-width:4px}
  .ls-marke b{font-size:2.8rem}
  .ls-marke span{font-size:.7rem;padding-inline:1.2rem}
  .ls-held .ls-ki{right:1.1rem;bottom:1.1rem}
}
@media (prefers-reduced-motion:no-preference){
  .ls-held__bild img{animation:ls-heran 1.6s var(--ease) both}
  .ls-marke{animation:ls-stempel .6s cubic-bezier(.3,1.5,.5,1) .5s both}
  /* Beim Umschalten blendet die neue Fassung weich ein (erst nach der ersten Wahl, damit das Laden nichts verdeckt) */
  .ls-gewechselt .ls-held__bild picture{animation:ls-ein .7s var(--ease) both}
  .ls-gewechselt :is(.ls-lead,.ls-kicker span,.ls-marke span){animation:ls-ein-text .5s ease both}
}
@keyframes ls-heran{from{transform:scale(1.06)}}
@keyframes ls-stempel{from{transform:rotate(-30deg) scale(.2);opacity:0}}
@keyframes ls-ein{from{opacity:0;transform:scale(1.03)}}
@keyframes ls-ein-text{from{opacity:0;transform:translateY(6px)}}

/* ---------- Aufdecken beim Scrollen (js/ladesaeulen.js setzt html.ls-js und .ls-an) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.ls-js .ls-karte,html.ls-js .ls-technik__karte{transition:opacity .7s ease,transform .8s var(--ease)}
  html.ls-js .ls-karte:not(.ls-an),html.ls-js .ls-technik__karte:not(.ls-an){opacity:0;transform:translateY(28px)}
  html.ls-js .ls-karte:nth-child(2){transition-delay:.1s}
  html.ls-js .ls-karte:nth-child(3){transition-delay:.2s}
  html.ls-js :is(.ls-chips,.ls-orte,.ls-haken,.ls-merkmale) li{transition:opacity .5s ease,transform .6s var(--ease)}
  html.ls-js :is(.ls-chips,.ls-orte,.ls-haken):not(.ls-an) li,html.ls-js .ls-technik__karte:not(.ls-an) .ls-merkmale li{opacity:0;transform:translateY(14px)}
  html.ls-js :is(.ls-chips,.ls-orte,.ls-haken,.ls-merkmale) li:nth-child(2){transition-delay:.08s}
  html.ls-js :is(.ls-chips,.ls-orte,.ls-haken,.ls-merkmale) li:nth-child(3){transition-delay:.16s}
  html.ls-js :is(.ls-chips,.ls-orte,.ls-haken,.ls-merkmale) li:nth-child(4){transition-delay:.24s}
  html.ls-js :is(.ls-chips,.ls-orte,.ls-haken,.ls-merkmale) li:nth-child(5){transition-delay:.32s}
  html.ls-js :is(.ls-chips,.ls-orte,.ls-haken,.ls-merkmale) li:nth-child(6){transition-delay:.4s}
}

/* ---------- Vorteile ---------- */
.ls-h2{color:var(--navy);max-width:20ch;margin-bottom:clamp(1.8rem,4vw,3rem)}
.ls-karten{display:grid;gap:1rem}
@media (min-width:760px){.ls-karten{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.ls-karte{background:var(--ls-karte);border:1px solid var(--ls-linie);border-radius:var(--radius);padding:1.5rem 1.4rem 1.6rem;
  display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center}
.ls-karte p{grid-column:1 / -1;margin:.8rem 0 0;color:var(--gedaempft);font-size:1rem;line-height:1.55}
.ls-karte__titel{font:600 clamp(1.25rem,.6vw + 1.05rem,1.55rem)/1.15 var(--display);color:var(--navy);margin:0}
.ls-ic{width:48px;height:48px;padding:11px;border-radius:14px;background:var(--ls-minze-hell);color:var(--navy);flex:none}
.ls-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.ls-chips li{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--ls-linie);border-radius:999px;
  padding:.55rem 1rem .55rem .6rem;font-weight:500;color:var(--navy);font-size:.98rem;line-height:1.3}
.hk{width:22px;height:22px;flex:none}
.ls-fussnote{margin:1.2rem 0 0;max-width:72ch;font-size:.88rem;line-height:1.55;color:var(--gedaempft)}

/* ---------- Das übernehmen wir. Alles. (Beleg) ---------- */
.ls-minze{color:var(--ls-minze)}
/* overflow:hidden: der Stempel startet um das 1,9-Fache vergrößert und ragte am Handy beim Laden 12 px über den Rand
   (pruefen.mjs 05.10.2026: scrollWidth 402 > 390 nur vor dem Scrollen) */
.ls-alles{overflow:hidden}
.ls-alles__raster{display:grid;gap:2rem;align-items:center}
@media (min-width:1000px){.ls-alles__raster{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem)}}
.ls-alles .lead{margin-top:1.2rem}
.ls-beleg{background:#fff;color:var(--tinte);border-radius:var(--radius);padding:1.4rem 1.3rem 1.2rem;position:relative;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);max-width:560px;width:100%;justify-self:center}
.ls-beleg table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ls-beleg thead th{font:600 .72rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gedaempft);text-align:left;padding:0 0 .8rem}
.ls-beleg thead th:last-child,.ls-beleg td{text-align:right;white-space:nowrap}
.ls-beleg tbody th{text-align:left;font-weight:500;padding:.62rem 0;display:flex;align-items:center;gap:.65rem;line-height:1.3}
.ls-beleg tbody td{font-weight:600;color:var(--ls-minze-tief);padding-left:1rem}
.ls-beleg tbody tr{border-top:1px dashed color-mix(in srgb,var(--navy) 18%,transparent)}
.ls-beleg tfoot tr{border-top:2px solid var(--navy)}
.ls-beleg__summe th{text-align:left;font:600 1.15rem/1.2 var(--display);color:var(--navy);padding:1rem 0 .5rem}
.ls-stempel{display:inline-block;font:700 clamp(2.4rem,4vw,3.2rem)/1 var(--display);color:var(--rot);letter-spacing:-.02em;transform:rotate(-6deg);
  border:3px solid var(--rot);border-radius:14px;padding:.12em .3em;margin:.6rem 0 .4rem}
.ls-beleg__plus{border-top:1px solid var(--ls-linie)!important}
.ls-beleg__plus th{text-align:left;font-weight:600;color:var(--navy);padding:.8rem 0 .2rem}
.ls-beleg__plus td{font-weight:700;color:var(--ls-minze-tief);padding:.8rem 0 .2rem 1rem}
@media (prefers-reduced-motion:no-preference){
  html.ls-js .ls-beleg tbody tr{transition:opacity .45s ease,transform .55s var(--ease)}
  html.ls-js .ls-beleg:not(.ls-an) tbody tr{opacity:0;transform:translateX(-14px)}
  html.ls-js .ls-beleg tbody tr:nth-child(2){transition-delay:.08s}html.ls-js .ls-beleg tbody tr:nth-child(3){transition-delay:.16s}
  html.ls-js .ls-beleg tbody tr:nth-child(4){transition-delay:.24s}html.ls-js .ls-beleg tbody tr:nth-child(5){transition-delay:.32s}
  html.ls-js .ls-beleg tbody tr:nth-child(6){transition-delay:.4s}html.ls-js .ls-beleg tbody tr:nth-child(7){transition-delay:.48s}
  html.ls-js .ls-beleg tbody tr:nth-child(8){transition-delay:.56s}
  html.ls-js .ls-stempel{transition:opacity .3s ease .8s,transform .55s cubic-bezier(.3,1.6,.5,1) .8s}
  html.ls-js .ls-beleg:not(.ls-an) .ls-stempel{opacity:0;transform:rotate(-24deg) scale(1.9)}
}

/* ---------- Vier Schritte ---------- */
.ls-weg{list-style:none;margin:0;padding:0;display:grid;gap:1rem;position:relative;counter-reset:none}
.ls-weg__schritt{background:var(--ls-minze-hell);border-radius:var(--radius);padding:1.4rem 1.3rem 1.5rem 4.6rem;position:relative}
.ls-weg__nr{position:absolute;left:1.2rem;top:1.25rem;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font:700 1.1rem/1 var(--display);z-index:1}
.ls-weg__schritt:first-child .ls-weg__nr{background:var(--rot)}
.ls-weg__titel{font:600 1.3rem/1.2 var(--display);color:var(--navy);margin:0 0 .4rem}
.ls-weg__schritt p{margin:0;color:var(--ls-text);font-size:1rem;line-height:1.5}
/* Verbindung zwischen den Nummern: am Handy senkrecht, am Computer waagerecht, wächst beim Aufdecken */
.ls-weg::before{content:"";position:absolute;left:calc(1.2rem + 1.2rem - 1px);top:2rem;bottom:2rem;width:2px;background:var(--rot);
  transform-origin:50% 0;z-index:1;opacity:.5}
@media (min-width:900px){
  .ls-weg{grid-template-columns:repeat(4,1fr);gap:1.1rem}
  .ls-weg__schritt{padding:4.6rem 1.3rem 1.6rem}
  .ls-weg__nr{top:1.3rem}
  .ls-weg::before{left:2.4rem;right:2.4rem;top:calc(1.3rem + 1.2rem - 1px);bottom:auto;width:auto;height:2px;transform-origin:0 50%}
}
@media (prefers-reduced-motion:no-preference){
  html.ls-js .ls-weg::before{transition:transform 1.4s var(--ease) .2s}
  html.ls-js .ls-weg:not(.ls-an)::before{transform:scaleY(0)}
  html.ls-js .ls-weg__schritt{transition:opacity .6s ease,transform .7s var(--ease)}
  html.ls-js .ls-weg:not(.ls-an) .ls-weg__schritt{opacity:0;transform:translateY(22px)}
  html.ls-js .ls-weg__schritt:nth-child(2){transition-delay:.15s}
  html.ls-js .ls-weg__schritt:nth-child(3){transition-delay:.3s}
  html.ls-js .ls-weg__schritt:nth-child(4){transition-delay:.45s}
}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  html.ls-js .ls-weg:not(.ls-an)::before{transform:scaleX(0)}
}

/* ---------- Standort ---------- */
.ls-standort{background:#fff;color:var(--tinte)}
/* minmax(0,…): lange Wörter wie "Wanderparkplatz" dürfen die Spalten nicht über 390 px hinaus aufdrücken
   (pruefen.mjs, Probe 05.10.2026: scrollWidth 426 > 390) */
.ls-zwei{display:grid;gap:3rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.ls-zwei{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem)}}
.ls-h3{color:var(--navy);margin-bottom:1.4rem}
.ls-orte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media (min-width:600px){.ls-orte{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.ls-orte{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ls-orte li{display:flex;align-items:center;gap:.7rem;border:1px solid var(--ls-linie);border-radius:var(--radius-klein);padding:.75rem .8rem;
  font-weight:600;color:var(--navy);line-height:1.25;font-size:.98rem;min-height:4.2rem;background:#fff;min-width:0;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.ls-orte .ls-ic{width:40px;height:40px;padding:9px;border-radius:11px}
/* Handy: Symbol über dem Text, damit die Zeile die ganze Kachelbreite hat */
@media (max-width:599px){.ls-orte li{flex-direction:column;align-items:flex-start;gap:.55rem;min-height:0;padding:.85rem .85rem .9rem}}
.ls-haken li{display:flex;gap:.7rem;align-items:flex-start;font-size:1.08rem;line-height:1.45;color:var(--ls-text);padding:.55rem 0;
  border-bottom:1px solid var(--ls-linie)}
.ls-haken .hk{margin-top:.15rem}

/* ---------- Film 16:9 (stumm, Standbild, Steuerung; lädt erst beim Abspielen) ---------- */
.ls-film{background:#fff;color:var(--tinte)}
.ls-film__figur{margin:0;max-width:1120px}
.ls-film__rahmen{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--navy);
  box-shadow:0 34px 70px -40px rgba(32,41,87,.6)}
.ls-film__video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--navy)}
.ls-film__text{margin-top:.8rem;font-size:.88rem;line-height:1.5;color:var(--gedaempft)}

/* ---------- Technik: Säule als Freisteller mit nummerierten Punkten (Koordinaten aus prospekt2.py MERKMALE) ---------- */
.ls-technik{padding-top:0;background:#fff}
.ls-technik__karte{position:relative;overflow:hidden;color:var(--creme);border-radius:calc(var(--radius) + 6px);padding:clamp(1.6rem,4vw,3.2rem);
  background:radial-gradient(26rem 26rem at 24% 56%,rgba(138,207,214,.36) 0%,rgba(138,207,214,0) 70%),
             linear-gradient(135deg,#283566 0%,#151d3f 100%);
  display:grid;gap:1.8rem;align-items:center}
@media (min-width:760px){.ls-technik__karte{grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}}
.ls-saeule{position:relative;margin:0;padding:0 1.6rem 1.6rem;display:flex;justify-content:center}
.ls-saeule__bild{position:relative;display:block;width:clamp(130px,38vw,170px)}
@media (min-width:1000px){.ls-saeule{padding-inline:2.4rem}.ls-saeule__bild{width:200px}}
.ls-saeule__bild picture,.ls-saeule__bild img{display:block;width:100%;height:auto}
.ls-saeule__bild img{object-fit:contain}
.ls-saeule__bild::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-3%;height:7%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0))}
.ls-saeule__punkte{position:absolute;inset:0}
.ls-punkt{position:absolute;width:1.6rem;height:1.6rem;margin:-.8rem 0 0 -.8rem;border-radius:50%;background:var(--rot);color:#fff;
  font:700 .78rem/1 var(--display);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 7px rgba(208,29,36,.28)}
.ls-saeule .ls-ki{left:0;right:auto;bottom:0}
.ls-technik .h2{color:var(--creme)}
.ls-technik__unter{margin:.6rem 0 1.2rem;color:var(--ls-minze);font-weight:600}
.ls-merkmale{list-style:none;margin:0;padding:0}
.ls-merkmale li{display:flex;align-items:center;gap:.9rem;padding:.7rem 0;border-top:1px solid var(--navy-linie);font-size:1.05rem;line-height:1.35}
.ls-merkmale li:last-child{border-bottom:1px solid var(--navy-linie)}
.ls-nr{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;border:1.5px solid var(--ls-minze);color:var(--ls-minze);
  display:flex;align-items:center;justify-content:center;font:700 .8rem/1 var(--display)}
.ls-technik__fuss{margin-top:1rem;font-size:.85rem;color:var(--navy-mute)}
@media (prefers-reduced-motion:no-preference){
  html.ls-js .ls-punkt{transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .3s ease}
  html.ls-js .ls-technik__karte:not(.ls-an) .ls-punkt{transform:scale(0);opacity:0}
  html.ls-js .ls-punkt:nth-child(1){transition-delay:.35s}html.ls-js .ls-punkt:nth-child(2){transition-delay:.45s}
  html.ls-js .ls-punkt:nth-child(3){transition-delay:.55s}html.ls-js .ls-punkt:nth-child(4){transition-delay:.65s}
  html.ls-js .ls-punkt:nth-child(5){transition-delay:.75s}
}

/* ---------- Kontakt: Stecker-Foto ----------
   Handy: Bildband oben in der Sektion, Text darunter auf Navy (Kontrast wie überall auf Navy). Computer: Foto als Hintergrund,
   links fast deckendes Navy für den Text, rechts sichtbar der Stecker. */
.ls-kontakt{isolation:isolate;overflow:hidden}
.ls-kontakt__bild{position:relative;margin:calc(-1 * var(--raum)) 0 2.2rem;aspect-ratio:16/9;background:var(--navy)}
.ls-kontakt__bild picture,.ls-kontakt__bild img{display:block;width:100%;height:100%}
.ls-kontakt__bild img{object-fit:cover;object-position:62% 50%}
.ls-kontakt__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,41,87,0) 55%,var(--navy) 100%)}
.ls-kontakt__raster{display:grid;gap:2.4rem;align-items:center;position:relative}
@media (min-width:1000px){
  .ls-kontakt__bild{position:absolute;inset:0;margin:0;aspect-ratio:auto;z-index:-1}
  .ls-kontakt__bild::after{background:linear-gradient(90deg,rgba(32,41,87,.97) 0%,rgba(32,41,87,.93) 40%,rgba(32,41,87,.62) 66%,rgba(32,41,87,.3) 100%)}
  .ls-kontakt__bild img{object-position:60% 50%}
  .ls-kontakt__raster{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem)}
  .ls-kontakt .ls-ki{right:1.1rem;bottom:1.1rem}
}
.ls-kontakt .lead{margin-top:1.2rem}
.ls-person{display:flex;gap:1.2rem;align-items:center;background:color-mix(in srgb,var(--navy) 88%,transparent);border:1px solid var(--navy-linie);
  border-radius:var(--radius);padding:1.2rem}
.ls-person img{width:104px;height:104px;border-radius:50%;flex:none}
.ls-person p{margin:0}
.ls-person__name{font:600 1.35rem/1.2 var(--display);color:var(--creme)}
.ls-person__wege{margin-top:.6rem!important;line-height:1.7;overflow-wrap:anywhere}
.ls-person__wege a{color:var(--creme);text-decoration:underline;text-decoration-color:var(--navy-linie);text-underline-offset:.2em}
.ls-person__wege a:hover{text-decoration-color:var(--rot)}
.ls-klein{margin:clamp(2.5rem,5vw,4rem) 0 0;font-size:.85rem;line-height:1.55;color:var(--navy-mute);max-width:80ch;position:relative}

/* Standortformular (06.10.2026, Wunsch Kay Braune). Glasfläche wie die Kontaktkarten (Werte aus glas.css :root),
   Felder in Creme wie das Kontaktformular (style.css .formular), Schrift auf Glas in Creme. Am Handy eine Spalte,
   jede Spalte minmax(0,1fr), damit lange Auswahltexte nie seitlich schieben. */
.ls-kontakt__raster--formular{align-items:start}
.ls-formular{margin-top:1.8rem;padding:clamp(1.15rem,3vw,2rem);color:var(--creme);
  background:var(--glas-licht),var(--glas-flaeche-dicht);
  -webkit-backdrop-filter:var(--glas-filter-klein);backdrop-filter:var(--glas-filter-klein);
  border:1px solid var(--glas-kante);border-radius:var(--glas-radius);box-shadow:var(--glas-schatten)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ls-formular{background:var(--glas-deckend)}}
@media (prefers-reduced-transparency:reduce){.ls-formular{background:var(--glas-deckend);-webkit-backdrop-filter:none;backdrop-filter:none}}
.ls-formular .formular__zeile{grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.ls-formular .formular__zeile--zwei{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ls-formular .formular__feld{min-width:0}
.ls-formular .formular__feld label{color:var(--creme);line-height:1.3}
.ls-formular .formular__feld input,.ls-formular .formular__feld select,.ls-formular .formular__feld textarea{width:100%;min-width:0;max-width:100%}
.ls-formular .formular__feld textarea{min-height:110px}
.ls-formular__titel{margin:0;font:600 clamp(1.3rem,2.2vw,1.6rem)/1.2 var(--display);color:var(--creme)}
.ls-formular__intro{margin:-.6rem 0 0;font-size:.95rem;color:var(--creme);opacity:.86}
.ls-formular__absenden{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.ls-formular__absenden .knopf{flex:none}
.ls-formular__foto{margin:0;flex:1 1 16rem;font-size:.95rem;color:var(--creme)}
.ls-formular__foto::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.55em;border-radius:50%;background:var(--ls-minze);vertical-align:.1em}
.ls-formular .ls-formular__status{margin:0;color:var(--ls-minze);font-weight:600}
.ls-formular .ls-formular__hinweis{margin:0;color:var(--creme);opacity:.8}
.ls-formular .ls-formular__hinweis a{color:var(--creme);text-decoration:underline;text-underline-offset:.2em}
.ls-formular .formular__feld input:not([type=checkbox]):not([type=radio]),.ls-formular .formular__feld select{height:3.3rem}
.ls-formular .formular__feld input::placeholder{color:var(--gedaempft);opacity:1}

/* ---------- USP kleiner Netzanschluss (06.10.2026) ----------
   Anlass Kay Braune 06.10.2026 08:26: "ich würde aber auf den usp vom kleinen netzanschluss mehr eingehen". Navy direkt unter dem
   hellen Held, zweiter Kernpunkt nach "Wir zahlen alles". Rechts die Vergleichskarte (weiß), Balkenlänge aus --anteil (Anteil an
   150 kW, Werte in _build/prospekt.py USP). Die Balken wachsen beim Aufdecken (data-ls-zeigen, .ls-an aus js/ladesaeulen.js), bei
   reduzierter Bewegung stehen sie sofort. Kontraste nach WCAG-Formel: --rot-hell auf Navy 4,65:1 (Wert aus style.css),
   --rot auf Weiß 5,41:1, --gedaempft auf Weiß 4,83:1, Balken #7d879e auf Weiß 3,6:1 (Grafik, Schwelle 3:1). */
.ls-netz{overflow:hidden;scroll-margin-top:var(--kopf-h)} /* Sprung über die Held-Pille landet unter dem Kopf, wie die Anker der Website */
.ls-netz__raster{display:grid;gap:2.4rem;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:1000px){.ls-netz__raster{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(3rem,6vw,6rem)}}
.ls-netz__marke{margin:0 0 1rem}
.ls-netz__titel{max-width:15ch}
.ls-netz__titel .ls-rot{color:var(--rot-hell)}
.ls-netz__lead{margin-top:1.3rem;color:var(--creme)}
.ls-netz__vergleich{margin:1.2rem 0 0;max-width:58ch;color:var(--navy-mute);font-size:1rem;line-height:1.6}
.ls-vergleich{margin:0;background:#fff;color:var(--tinte);border-radius:var(--radius);padding:clamp(1.3rem,3vw,2.1rem);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);width:100%;max-width:560px;justify-self:center}
.ls-vergleich__titel{font:600 .72rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gedaempft);margin:0 0 1.4rem}
.ls-vergleich__liste{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.ls-vergleich__zeile{display:grid;gap:.5rem}
.ls-vergleich__name{font:600 1.12rem/1.2 var(--display);color:var(--navy)}
.ls-vergleich__zeile--wir .ls-vergleich__name{color:var(--rot)}
.ls-vergleich__balken{display:block;height:1.1rem;border-radius:999px;background:color-mix(in srgb,var(--navy) 8%,transparent);overflow:hidden}
.ls-vergleich__balken span{display:block;height:100%;width:calc(var(--anteil) * 100%);border-radius:999px;transform-origin:0 50%}
.ls-vergleich__zeile--fremd .ls-vergleich__balken span{background:linear-gradient(90deg,#7d879e 0%,#7d879e 78%,rgba(125,135,158,.12) 100%)}
.ls-vergleich__zeile--wir .ls-vergleich__balken span{background:var(--rot)}
.ls-vergleich__wert{font-size:.95rem;line-height:1.45;color:var(--gedaempft)}
.ls-vergleich__fuss{margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid var(--ls-linie);font:600 1.08rem/1.35 var(--display);color:var(--navy)}
@media (prefers-reduced-motion:no-preference){
  html.ls-js .ls-vergleich__balken span{transition:transform 1.3s var(--ease)}
  html.ls-js .ls-vergleich__zeile--wir .ls-vergleich__balken span{transition-duration:.8s;transition-delay:.9s}
  html.ls-js .ls-vergleich:not(.ls-an) .ls-vergleich__balken span{transform:scaleX(0)}
}
/* Verweis im Held auf den USP-Abschnitt: der kleine Netzanschluss steht schon im ersten Bildschirm, Ziel #netzanschluss.
   Navy auf Weiß 13,85:1, Blitz in --rot (Grafik). Fläche mindestens 44 px hoch. */
.ls-held__usp{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.4rem;padding:.6rem 1.1rem .6rem .7rem;min-height:44px;
  background:#fff;border-radius:999px;box-shadow:0 0 0 1px var(--ls-linie),0 10px 24px -16px rgba(32,41,87,.4);
  font:500 .98rem/1.3 var(--text);color:var(--navy);text-decoration:none;max-width:100%}
.ls-held__usp b{font-weight:700}
.ls-held__usp:hover{box-shadow:0 0 0 1.5px var(--rot),0 10px 24px -16px rgba(32,41,87,.4)}
.ls-held__usp:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
.ls-held__usp-ic{width:28px;height:28px;flex:none;padding:5px;border-radius:50%;background:var(--rot);color:#fff}
/* Wallbox-Frage als Einstieg (Kay Braune 06.10.2026 08:38), Creme auf Navy 13,26:1 */
.ls-netz__frage{margin:0 0 1rem;max-width:34ch;font:500 clamp(1.15rem,.5vw + 1rem,1.4rem)/1.35 var(--display);color:var(--creme)}

/* Online-Vollmacht im Standortformular (06.10.2026, Wunsch Kay Braune). Eigene Glasinsel im Formular, Text in Creme,
   Unterschriftsfeld bewusst weiß mit dunkler Tinte (so landet es auch in der PDF), am Handy volle Breite. */
.ls-vollmacht{margin:.4rem 0 0;padding:clamp(1rem,2.4vw,1.4rem);border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.05);display:grid;gap:1rem;min-width:0}
.ls-vollmacht__titel{padding:0 .4rem;font:600 1.12rem/1.3 var(--display);color:var(--creme)}
.ls-vollmacht__intro{margin:0;font-size:.95rem;color:var(--creme);opacity:.86}
.ls-vollmacht__wahl,.ls-vollmacht__haken{display:flex;gap:.7rem;align-items:flex-start;color:var(--creme)}
.ls-vollmacht__wahl input,.ls-vollmacht__haken input{flex:none;width:1.35rem;height:1.35rem;margin:.1rem 0 0;accent-color:var(--ls-minze)}
.ls-vollmacht__wahl label{font-weight:600;cursor:pointer}
.ls-vollmacht__haken label{font-size:.93rem;line-height:1.45;cursor:pointer}
.ls-vollmacht__inhalt{display:grid;gap:1rem;min-width:0}
.ls-vollmacht__inhalt[hidden]{display:none}
.ls-vollmacht__text{max-height:20rem;overflow:auto;padding:1rem 1.1rem;border-radius:12px;background:rgba(0,0,0,.22);color:var(--creme);font-size:.88rem;line-height:1.55;overscroll-behavior:contain}
.ls-vollmacht__text summary{cursor:pointer;font-weight:600;margin-bottom:.4rem}
.ls-vollmacht__text p,.ls-vollmacht__text ol{margin:.5rem 0}
.ls-vollmacht__text ol{padding-left:1.3rem}
.ls-vollmacht__text li{margin:.35rem 0}
.ls-vollmacht__name{font-weight:700;font-size:1rem}
.ls-vollmacht__unter,.ls-vollmacht__klein{opacity:.8}
.ls-unterschrift{display:grid;gap:.45rem}
.ls-unterschrift__titel{margin:0;font-weight:600;color:var(--creme)}
.ls-unterschrift__feld{display:block;width:100%;height:170px;border-radius:12px;background:#fff;touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 2px rgba(13,27,61,.12)}
.ls-unterschrift__feld:focus-visible{outline:3px solid var(--ls-minze);outline-offset:2px}
.ls-unterschrift__fuss{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.ls-unterschrift__loeschen{padding:.45rem .9rem;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:transparent;color:var(--creme);font:inherit;font-size:.88rem;cursor:pointer}
.ls-unterschrift__meldung{color:#ffb4b4;font-weight:600;font-size:.92rem}
.ls-vollmacht-fertig{padding:1rem 1.1rem;border-radius:14px;background:rgba(0,0,0,.25);color:var(--creme);display:grid;gap:.8rem}
.ls-vollmacht-fertig[hidden]{display:none}
.ls-vollmacht-fertig p{margin:0}
.ls-vollmacht-fertig__knoepfe{display:flex;flex-wrap:wrap;gap:.6rem}
.ls-vollmacht-fertig__zweit{border:1px solid rgba(255,255,255,.55);color:var(--creme);background:transparent}
.ls-vollmacht-fertig__zweit[hidden]{display:none}