/* ============================================================ ZUSATZ-REGELN F — photovoltaik-lichtenfels.html Nur Regeln, für die es in tokens/base/components/sections und in _extra-a.css / _extra-e.css keine Entsprechung gibt. Ausschliesslich Tokens, keine Hex- oder px-Werte. ============================================================ */ /* ------------------------------------------------------------ 1 · .hero--form — Ortskopf mit sichtbarem Formular-Einstieg Warum neu: `.hero--local` (sections.css) ist auf Text links / Bildkachel rechts ausgelegt und zentriert beide Spalten vertikal (`align-items: center`, Spalten 1.3fr/.7fr). Hier steht rechts kein Bild, sondern die Einstiegskarte des Formulars — eine Karte mit eigener Höhe, die oben bündig mit der Überschrift beginnen muss und mehr als 0.7fr braucht, sonst werden Feld und Button unbrauchbar schmal. Das Anlagenfoto rutscht dafür unter den Textblock der linken Spalte, wodurch beide Spalten ähnlich hoch werden und kein toter Freiraum entsteht. Spiegelbildlich zu `.cta__inner--form` in _extra-e.css, dort aber für den Abschluss-CTA statt für den Ortskopf. Die Reihenfolge läuft über benannte Rasterfelder statt über zwei Kopien des Bildes: Auf dem Desktop steht das Foto unter dem Text in der linken Spalte, auf schmalen Screens rutscht es hinter die Einstiegskarte — der Einstieg darf nicht hinter ein 16:10-Bild fallen. Ein zweites
für mobil wäre doppelter Inhalt im DOM und hing zudem an der Reihenfolge der Regeln (eine Ausblendung nach dem @media-Block gewinnt sonst auf allen Breiten und das Bild ist überall weg). NACHTRAG 07.09.2026 (Nutzer-Vorgabe): Das Anlagenfoto unter dem Textblock ist entfallen. Der Ortskopf traegt rechts die Einstiegskarte - das ist das eine Objekt, auf das der Blick fallen soll. Ein Foto darunter hat die Karte um Aufmerksamkeit gebracht, ohne selbst etwas zu beantworten. Wo ein Bild ANSTELLE der Karte rechts steht (`.hero--local` mit `.hero__media`), bleibt es unangetastet - dort ist es der Inhalt der Spalte, nicht ihr Anhang. Das Rasterfeld "bild" ist damit weggefallen. */ .hero--form .hero__cols { grid-template-columns: 1.15fr .85fr; grid-template-areas: "inhalt karte"; align-items: start; } .hero--form .hero__content { grid-area: inhalt } .hero--form .leadcard { grid-area: karte } @media (max-width: 900px) { .hero--form .hero__cols { grid-template-columns: 1fr; grid-template-areas: "inhalt" "karte" } } /* ------------------------------------------------------------ 1b · .region__aside — die Ortsliste der Einsatzgebiet-Sektion Warum neu: `.content__grid` ist ein 1fr/1fr-Raster mit vertikal zentrierten Spalten - gedacht fuer zwei aehnlich lange Saeulen. In dieser Sektion stehen links drei lange Absaetze und rechts vier bis sechs Ortszeilen. Die Folge war eine halbleere rechte Spalte, deren Inhalt mittig im Nichts schwebte (Nutzer-Befund 07.09.2026). Zwei Aenderungen beheben das: die Spalte wird schmaler, damit weniger Flaeche zu fuellen ist, und sie beginnt oben buendig statt mittig. Zusaetzlich wird sie als abgesetzte Karte lesbar - dann ist der Raum darunter der Abstand eines Objekts und nicht das Loch einer Spalte. ------------------------------------------------------------ */ .section--shot .content__grid:has(> .region__aside), .section--invert .content__grid:has(> .region__aside) { grid-template-columns: 1.45fr .9fr; align-items: start; } .region__aside { align-self: start; background: rgb(var(--rgb-white) / .06); border: var(--bw) solid rgb(var(--rgb-white) / .16); padding: var(--space-6); } .region__aside .checks { margin-top: var(--space-4) !important } /* Der Knopf traegt Frage UND Rufnummer und ist damit laenger als ein gewoehnlicher Knopf. In der schmalen Karte brach die Nummer sonst um und die letzte Ziffernfolge stand allein in der zweiten Zeile. */ .region__aside .btn { width: 100%; justify-content: center; font-size: var(--fs-sm); padding-inline: var(--space-4); text-align: center } @media (max-width: 900px) { .section--shot .content__grid:has(> .region__aside), .section--invert .content__grid:has(> .region__aside) { grid-template-columns: 1fr } } /* ------------------------------------------------------------ 2 · .leadcard — die Einstiegskarte selbst ("Schritt 1") Warum neu: `.form` (sections.css) ist der volle Formularkörper mit `--space-7`-Innenabstand und weissem Grund — richtig für das Abschlussformular, zu wuchtig für zwei Felder im Ortskopf. Die Einstiegskarte ist bewusst kompakter, trägt eine eigene Kopfzeile mit Schrittanzeige und steht als klar begrenztes Objekt auf der hellen Ortskopf-Fläche (Figur-Grund). Sie ist KEIN zweites Absende-Formular: die Felder tragen kein name-Attribut und keinen Submit, sie werden beim Klick in das eine Seitenformular #anfrage übernommen. Deshalb auch `.leadcard` statt `.form--*` — es ist eine Karte, kein Formular. WICHTIG — die Karte trägt im HTML zusätzlich `.on-light` (_extra-a.css): `.hero` setzt `background: var(--green); color: var(--white)`, und `.field > label` bringt keine eigene Farbe mit. Eine helle Insel im Ortskopf erbt sonst weissen Text auf weissem Grund — die Beschriftungen der beiden Felder waren im Kontrast-Audit mit 1:1 unsichtbar. `.on-light` dreht die semantische Ebene zurück (--text, --text-muted, --border, --heading) statt Einzelfarben zu überschreiben. Deshalb setzt `.leadcard` hier bewusst weder `background` noch `color`: beides kommt aus `.on-light`. ------------------------------------------------------------ */ .leadcard { border: var(--bw) solid var(--border); box-shadow: var(--shadow-lg); padding: var(--space-6); display: grid; gap: var(--space-5); } /* Kopfzeile: Schrittanzeige links, Dauer rechts — nimmt dem Einstieg die gefühlte Länge, bevor das erste Feld gelesen wird. */ .leadcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4) } .leadcard__step { font-size: var(--fs-label); font-weight: var(--fw-black); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--green-600); } .leadcard__time { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semi) } .leadcard__title { font-size: var(--fs-h4); font-weight: var(--fw-black); color: var(--green); line-height: var(--lh-snug) } .leadcard__fields { display: grid; gap: var(--space-4) } .leadcard__note { font-size: var(--fs-xs); color: var(--text-muted); text-align: center } /* ------------------------------------------------------------ 3 · .facts — schmale Vertrauensleiste unter dem Ortskopf Warum neu: `.statband` (sections.css) inszeniert grosse Kennzahlen mit Leitzahl und Unterzeile; `.trust` ist eine reine Logo-/Textzeile. Hier stehen vier gleichwertige, kurze Sachaussagen ohne Leitzahl — sie sollen ruhig und schmal bleiben und dem Ortskopf nicht die Aufmerksamkeit nehmen. Fugenraster wie bei `.caseband` in _extra-e.css, damit beide Bänder auf der Seite gleich wirken. ------------------------------------------------------------ */ .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--border) } .facts > div { background: var(--bg); padding: var(--space-5); display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; } .facts svg { width: 22px; height: 22px; color: var(--green-600); flex: none } .facts b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text) } .facts span { display: block; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-top: var(--space-1) } @media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr) } } @media (max-width: 520px) { .facts { grid-template-columns: 1fr } }