/* ═══════════════════════════════════════════════════════════════════════════ assets/css/pv4me_v15.css — das Stilblatt DER LANDINGPAGE Angelegt: 16.09.2026 (Kette V3) >>> HERKUNFT: PV4me_Landingpage_Mockup_v15_PV4me_SmartMeter.html <<< Die Vorlage ist das Gesetz (R86). Die Regeln hier sind Zeichen fuer Zeichen die der Vorlage, nur anders sortiert und kommentiert. Was abweicht, steht unten unter ZUSAETZE und im Bericht. >>> WARUM EIN ZWEITES STILBLATT UND NICHT pv4me.css UMGEBAUT. <<< pv4me.css tragen SIEBEN Seiten: index, impressum, datenschutz, danke und die drei Verwaltungsseiten (editor.php, franchise.php, anmelden.php holen dort ihre Knoepfe, Karten und Felder). Die Vorlage v15 beschreibt aber nur die Landingpage. Haette ich pv4me.css ueberschrieben, waeren mit einem Schlag auch Impressum, Datenschutzerklaerung, Dankeseite und die Verwaltungsoberflaeche umgestaltet worden, ohne dass es jemand verlangt hat. Deshalb: die Landingpage laedt DIESES Blatt, alle anderen Seiten behalten pv4me.css. inc/kopf.php entscheidet das an $startseite. Ruecknahme: in inc/kopf.php den Namen zurueckstellen, diese Datei loeschen. Naeheres im Bericht, Abschnitt HEMMNISSE & RUECKNAHME. >>> DIE ZWEI HINTERGRUNDBILDER KOMMEN ALS VARIABLE HEREIN. <<< Aufmacher und Abschlussband tragen ihr Foto in der Vorlage als background-image mit eingebetteten Daten. Hier setzt index.php --hero-bild und --final-bild, je mit Versionskennung (?v=) und als image-set mit WebP vor JPEG. Ein Hintergrund kann keine Bildbeschreibung tragen; beide Bilder sind schmueckend, die Aussage steht als Text daneben (siehe Bericht). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Farben, Grundgeruest ───────────────────────────────────────────────── */ :root{--blue:#063d8c;--blue2:#0d63bd;--yellow:#ffd400;--ink:#102b52;--muted:#5f7187;--light:#f5f9fd;--line:#d9e6f2;--green:#2da45f;--orange:#ef7d22} *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:72px} section[id]{scroll-margin-top:72px} body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.42} a{text-decoration:none;color:inherit} .wrap{max-width:1180px;margin:auto;padding:0 28px} /* ── Kopfzeile ──────────────────────────────────────────────────────────── */ .top{height:72px;background:#fff;display:flex;align-items:center;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30} .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%} .logo{font-size:31px;font-weight:900;letter-spacing:-2px;color:var(--blue)} .logo span{color:#ffbf00} .links{display:flex;gap:25px;font-size:14px;font-weight:700} /* ── Knoepfe ────────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--yellow);padding:14px 22px;border-radius:8px;font-weight:900;color:#13233b;border:0;cursor:pointer} .btn.outline{background:#fff;border:2px solid var(--blue);color:var(--blue)} /* ── Aufmacher ──────────────────────────────────────────────────────────── */ /* >>> 16.09.2026, AUFTRAG "AUFMACHER-BILD HOEHER": 520px -> clamp(520px, 44vw, 640px). <<< Die Vorlage v15 hat hier 520px; das ist die zweite bewusste Abweichung von ihr, und sie ist beauftragt. WARUM AN DIESER STELLE UND NICHT AM BILD: im Aufmacher gibt es KEIN Bildelement. Das Foto haengt als background-image (siehe var(--hero-bild) weiter unten in dieser Zeile), und ein Hintergrund hat keine eigene Hoehe — die Hoehe des Aufmachers macht allein diese min-height. Ein "height" auf ein Bild waere ohne Wirkung geblieben, ebenso ein height, das KLEINER als die min-height ist: min-height gewinnt. WARUM NICHT clamp(220px, 32vw, 400px) WIE IM AUFTRAG GENANNT: gemessen am 16.09.2026 im Browser ergibt dieser Wert 400px bei 1440 und 1280 Punkten, 262px bei 820 und 220px auf dem Telefon. Der Aufmacher ist heute 520px hoch (Desktop) und 644px (390 Punkte, dort bestimmt der Text die Hoehe). Der genannte Wert waere also UEBERALL NIEDRIGER — die Seite waere flacher geworden, nicht hoeher. WAS DIE NEUEN ZAHLEN BEWIRKEN: das Foto ist 1024x540. Bei 1440 Punkten Breite rechnet "cover" es auf 1440x759; sichtbar waren 520 Punkte, also fielen oben und unten je rund 120 weg. Mit 634 Punkten (44vw bei 1440) sind 84 Prozent der Bildhoehe zu sehen statt 69. ab etwa 1456 Punkten 640px (Obergrenze) 1440 Punkte 634px 1280 Punkte 563px 1181 Punkte und darunter 520px (Untergrenze, also wie die Vorlage) >>> AUF DEM TELEFON AENDERT SICH NICHTS <<< (Auftrag: "Handy nicht zu hoch"): dort ist der Aufmacher 644px bzw. 686px hoch, weil der Textblock so viel braucht — die min-height von 560px im Block fuer max-width:780px ist unberuehrt geblieben. RUECKNAHME: min-height:520px zurueckschreiben (Sicherung ALT\webroot\assets\css\pv4me_v15.css.alt_20260916f). >>> NACHTRAG 16.09.2026, ZWEITER AUFTRAG: FESTER WERT 640px STATT DES clamp. <<< Dirk wollte die Hoehe auf jeder Desktop-Breite gleich haben, nicht mitwachsend. Damit gilt: jede Breite ueber 780 Punkten 640px 780 Punkte und darunter unveraendert (Block weiter unten) Was der feste Wert mit sich bringt, gemessen und im Bericht benannt: auf schmalen Desktop-Breiten kippt das Seitenverhaeltnis. Das Foto ist 1024x540; bei 1440x640 rechnet "cover" es auf 1440x759 und beschneidet OBEN UND UNTEN, bei 820x640 dagegen auf 1214x640 und beschneidet LINKS UND RECHTS. Verzerrt wird nie (cover), aber der Bildausschnitt wandert. RUECKNAHME auf das mitwachsende Verhalten: Sicherung ALT\webroot\assets\css\pv4me_v15.css.alt_20260916g. */ .hero{min-height:640px;background:linear-gradient(90deg,rgba(22,29,37,.86) 0%,rgba(22,29,37,.62) 39%,rgba(22,29,37,.08) 72%),var(--hero-bild) center 52%/cover no-repeat;color:#fff;display:flex;align-items:center} .hero-copy{max-width:610px;padding:70px 0;text-align:left;margin-left:0;margin-right:auto} .eyebrow{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--blue2)} .hero .eyebrow{color:#fff} .hero h1{font-size:58px;line-height:.98;margin:12px 0 18px;letter-spacing:-2px} .hero p{font-size:19px;max-width:590px;margin:0 0 25px} /* >>> DIE DREI VERTRAUENSPUNKTE STEHEN UNTEREINANDER, AUF JEDER BREITE. <<< Geaendert am 17.09.2026 (Auftrag "Vertrauenspunkte im Aufmacher untereinander"). Die Vorlage v15 stellt sie mit flex-wrap:wrap in eine Zeile; gemessen standen bei 1440, 1280, 1024 und 820 alle drei nebeneinander. Statt der Zeile ist es jetzt eine Spalte. align-items:flex-start IST KEINE BEIGABE. Bei flex-direction:column laeuft die Querachse waagerecht; ohne diese Angabe wuerden die drei Punkte auf die volle Breite des Textblocks gestreckt. Der gap von 18px bleibt und ist jetzt der senkrechte Abstand. >>> BEI MAX-WIDTH 780PX GEWINNT WEITER .trust{display:grid;gap:8px} (Zeile 404) <<< — gleiche Spezifitaet, spaeter in der Datei. Dort stand schon alles untereinander, und dort bleibt der engere Abstand von 8px. >>> DIESE REGEL GILT AN ZWEI STELLEN, NICHT AN EINER. <<< .trust steckt im Aufmacher (index.php Zeile 153, hero_trust1..3) UND im Abschlussband (inc/abschnitte/abschluss.php Zeile 33, final_trust1..3); das Abschlussband hat keine eigene .trust-Regel. Die Umstellung wirkt also auf beide. Steht im Bericht. RUECKNAHME nur fuer das Abschlussband, eine Zeile: .final .trust{flex-direction:row;flex-wrap:wrap} RUECKNAHME ganz: Sicherung ALT\webroot\assets\css\pv4me_v15.css.alt_20260916p. */ .trust{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:20px;font-size:14px;font-weight:700} .trust span:before{content:'✓';display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid #fff;border-radius:50%;margin-right:7px} /* Aus dem zweiten Stilblatt der Vorlage: der Textblock wirklich links an der Inhaltskante. */ .hero > .wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:28px;padding-right:28px;display:block !important} .hero .hero-copy{width:min(610px,100%);max-width:610px;margin-left:0 !important;margin-right:auto !important;text-align:left !important} .hero .hero-copy h1,.hero .hero-copy p,.hero .hero-copy .eyebrow,.hero .hero-copy .proof,.hero .hero-copy div{text-align:left !important} .hero .hero-copy .btn{margin-left:0 !important;margin-right:auto !important} /* ── Abschnitte ─────────────────────────────────────────────────────────── */ .section{padding:62px 0} .section.soft{background:var(--light)} .section h2{font-size:38px;line-height:1.08;margin:7px 0 13px;letter-spacing:-1px} .lead{font-size:18px;color:var(--muted);max-width:760px} .config-grid,.calc-grid,.split,.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} /* >>> EINE ZEILE, DIE IN DER VORLAGE NICHT STEHT UND STEHEN MUSS. <<< Die Vorlage schreibt die Bilder als . Auf der Seite kommen sie aus inc/bild.php und stehen deshalb in einem (WebP zuerst, JPEG als Rueckfall, Beschreibung aus dem Editor). Ein ist von Haus aus inline. Die Hoehenregeln der Vorlage haengen aber an den Bildern (.calc-art img{height:100%}, .project img{height:205px} ...) — im inline gesetzten Elternteil klappen sie zusammen, und die Kaesten waeren flach. Diese Zeile macht das zum Block und gibt die Hoehe durch. Sichtbar aendert sie NICHTS: sie stellt genau den Zustand her, den die Vorlage mit dem nackten hat. Ruecknahme: Zeile streichen und in inc/bild.php auf ohne zurueckgehen (dann faellt WebP weg). */ /* >>> DIE HOEHE GEHOERT NUR AUF DIE ZWEI KAESTEN, DEREN BILD SELBST height:100% TRAEGT. <<< Am 16.09.2026 stand hier .project picture und .screen picture mit height:100% dabei — und die drei Projektkarten verloren ihren Text: im Raster werden die Karten auf gleiche Hoehe gestreckt, das nahm mit height:100% die ganze Karte ein und schob Ueberschrift und Satz nach unten hinaus, wo .project{overflow: hidden} sie abgeschnitten hat. Im Quelltext stand alles, auf dem Schirm war nichts. Bei Projektkarte und Bildschirmfoto hat das Bild eine eigene Hoehe (205px) beziehungsweise nur width:100% — dort genuegt display:block. */ .calc-art picture,.smart-energy-photo picture{display:block;height:100%} .project picture,.screen picture{display:block} /* ── Konfigurator: Bildschirmfoto und die vier Kennzahlen ───────────────── */ .screen{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;box-shadow:0 16px 38px rgba(6,61,140,.12)} /* >>> height:auto STEHT NICHT IN DER VORLAGE — UND STELLT GENAU IHRE WIRKUNG WIEDER HER. <<< Gemessen am 16.09.2026 gegen Apache: die Datei konf_kacheln_ringe ist 1056x792 (Verhaeltnis 1,33), angezeigt wurde sie mit 485x792, also Verhaeltnis 0,61 — bei 820 Punkten sogar 322x792, also 0,41. Das Bild war auf 792 Punkte Hoehe festgenagelt und in der Breite gestaucht, um den Faktor 2,2 bis 3,2. URSACHE, UND SIE IST MEINE: inc/bild.php setzt am die Attribute width="1056" height="792" — richtig so, damit die Seite beim Laden nicht springt. Die Regel hier setzte aber nur width:100% und KEINE Hoehe. Dann gewinnt das HTML-Attribut, und die Hoehe bleibt bei 792. In der Vorlage v15 steht dieselbe Regel, dort traegt das aber keine Attribute, also rechnet der Browser die Hoehe proportional. Bei den anderen drei Bildstellen ist die Hoehe im Stilblatt gesetzt (.calc-art img height:100%, .smart-energy-photo img height:410px, .project img height:205px) — nur .screen hatte keine, und damit fiel es durch. >>> DESHALB BRAUCHT ES KEINE max-height UND KEIN object-fit. <<< Der Auftrag nennt als Richtwert 420 bis 480 Punkte und Ziel "etwa so hoch wie der Textblock daneben". Mit proportionaler Hoehe ergibt sich das von selbst (gemessen, Werte im Bericht): 1440 Punkte -> Bild 364 gegen 314 Punkte Text; 820 -> 242 gegen 378; 390 -> 246 gegen 386. Eine Grenze waere eine zweite Regel fuer ein Problem, das dann keines mehr ist, und object-fit braucht nur, wer beschneiden will — hier wird nichts beschnitten. RUECKNAHME: height:auto streichen (Sicherung ALT\webroot\assets\css\pv4me_v15.css.alt_20260916m). Dann ist das Bild wieder gestaucht. */ .screen img{width:100%;height:auto;display:block;border-radius:9px} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px} .stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 12px;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.04)} .stat .icon{font-size:21px} .stat strong{display:block;font-size:27px;color:var(--blue);margin:4px 0} .stat:nth-child(2) strong{color:var(--green)} .stat:nth-child(3) strong{color:var(--orange)} .stat small{color:var(--muted)} /* ── Wirtschaftlichkeit: Bild links, Haken rechts ───────────────────────── */ .calc-art{min-height:330px;border-radius:16px;overflow:hidden;border:1px solid #d8e2ec;position:relative;background:#eef3f7} .calc-art img{width:100%;height:100%;min-height:330px;object-fit:cover;object-position:center 52%;display:block;filter:saturate(.82) contrast(1.04)} .calc-art:after{content:"Zahlen statt Verkaufsversprechen";position:absolute;left:18px;bottom:18px;background:rgba(6,61,140,.94);color:#fff;padding:10px 14px;border-radius:8px;font-weight:900;font-size:14px;letter-spacing:.01em} .calculator{display:none} .checks{display:grid;gap:11px;margin:22px 0} .check{display:flex;gap:10px} .check b{color:var(--green)} .quality-note{margin-top:18px;padding:15px 17px;border-left:4px solid var(--yellow);background:#fff;border-radius:8px;color:var(--ink)} /* ── Smart Energy ───────────────────────────────────────────────────────── */ .smart-energy{background:#fff;padding:58px 0;border-top:1px solid #e7edf5;border-bottom:1px solid #e7edf5} .smart-energy-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:46px;align-items:center} .smart-energy-photo{position:relative;border-radius:18px;overflow:hidden;min-height:410px;background:#e9eef5} .smart-energy-photo img{width:100%;height:410px;display:block;object-fit:cover;object-position:center} .smart-energy-photo:after{content:"ENERGIE INTELLIGENT NUTZEN";position:absolute;left:20px;bottom:20px;background:#073b83;color:#fff;padding:10px 14px;border-radius:8px;font-size:12px;font-weight:800;letter-spacing:.06em} .energy-intro{font-size:18px;line-height:1.55;color:#334a66;margin:0 0 22px} .energy-cards{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px} .energy-card{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;border:1px solid #dfe8f3;border-radius:12px;padding:13px 15px;background:#fff} .energy-card .energy-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:900;background:#f3f7fc;color:#073b83} .energy-card:nth-child(2) .energy-icon{background:#fff7cf;color:#9a7600} .energy-card:nth-child(3) .energy-icon{background:#eaf7ef;color:#18713d} .energy-card strong{display:block;color:#073b83;font-size:17px;margin-bottom:2px} .energy-card span{display:block;color:#52677f;font-size:14px;line-height:1.35} .energy-punch{margin-top:22px;padding:14px 16px;border-left:5px solid #ffd400;background:#f6f9fd;border-radius:0 10px 10px 0;color:#073b83;font-weight:800;font-size:17px} .future-box{margin-top:18px;padding:18px 20px;border-radius:12px;background:#fff8d9;border:1px solid #f0d66b} .future-box strong{display:block;font-size:18px;color:var(--blue);margin-bottom:6px} .future-box span{display:block;color:#425a74} /* ── So funktioniert's: Preisvorteil und die vier Schritte ──────────────── */ /* >>> DREI ZEILEN, DIE IN DER VORLAGE NICHT STEHEN — UND ZWAR, WEIL DIE VORLAGE HIER EINEN FEHLER HAT. <<< Gemessen am 16.09.2026 an der Vorlage SELBST (file://, Chromium): bei 390 Punkten Fensterbreite ist scrollWidth 393, bei 360 Punkten ebenfalls 393. Die Vorlage scrollt dort also seitlich. Meine Seite tat es Zahl fuer Zahl genauso — sie war an dieser Stelle wirklich 1:1. URSACHE: unter 780 Punkten wird .split einspaltig. Ein Rasterfeld mit 1fr hat min-width:auto, waechst also auf die MINDESTBREITE seines Inhalts. Die kommt von den vier Schritt-Kaesten, die laut Vorlage auch auf dem Telefon ZWEI Spalten bilden (grid-template-columns:1fr 1fr steht am Element): in 162 Punkte je Kasten passt das Wort "Wirtschaftlichkeit" samt Innenabstand nicht. Die Spalte wird 375 breit, der Inhaltsbereich hat aber nur 354. GELOEST mit dem kleinsten Eingriff: das Rasterfeld darf schmaler werden als sein Inhalt (min-width:0), und im Kasten darf ein langes Wort umbrechen. >>> AUF 1440 UND 820 PUNKTEN AENDERT SICH NICHTS <<< (dort ist Platz, es bricht nichts um); auf 390 und 360 bricht "Wirtschaft- lichkeit" um, statt die Seite zu verbreitern. RUECKNAHME: die drei Zeilen streichen. Dann ist die Seite wieder genau wie die Vorlage, inklusive des seitlichen Scrollens auf dem Telefon. Andere Wege: die Schritte unter 400 Punkten einspaltig setzen (aendert das Aussehen deutlich), oder die Ueberschrift kuerzen (aendert einen Text der Vorlage). Beides greift weiter ein als diese drei Zeilen. */ .split > *{min-width:0} .step{overflow-wrap:break-word} .step h3{hyphens:auto} .pricebox{background:#eef6ff;border-radius:14px;padding:27px} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px} .step{border:1px solid var(--line);border-radius:13px;padding:20px;background:#fff} .num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--blue2);color:#fff;font-weight:900} .step h3{margin:11px 0 6px} /* ── Projekte ───────────────────────────────────────────────────────────── */ .projects{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px} .project{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff} .project img{width:100%;height:205px;object-fit:cover;display:block} .project div{padding:16px} .project h3{margin:0 0 5px} /* ── Kontakt und Formular ───────────────────────────────────────────────── */ .contact{background:#073b83;color:#fff} .contact .eyebrow{color:#ffd400} .contact p{color:#dce8f5} .form{background:#fff;color:var(--ink);padding:26px;border-radius:16px} .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field label{font-weight:800;font-size:13px;display:block;margin-bottom:6px} .field input{width:100%;padding:13px;border:1px solid #cdd9e6;border-radius:8px;font:inherit} .full{grid-column:1/-1} .privacy{font-size:12px!important;color:#66798e!important} .disgline{display:flex;gap:8px;margin:18px 0} .disgline i{height:5px;flex:1;border-radius:5px} .disgline i:nth-child(1){background:#d63c3c} .disgline i:nth-child(2){background:#f4c400} .disgline i:nth-child(3){background:#2e9d58} .disgline i:nth-child(4){background:#1870c9} /* ── Abschlussband und Fuss ─────────────────────────────────────────────── */ .final{padding:65px 0;background:linear-gradient(90deg,rgba(5,48,105,.9),rgba(5,48,105,.72)),var(--final-bild) center/cover;color:#fff} .final h2{font-size:42px;margin:6px 0 10px} .final p{max-width:700px;font-size:18px} .footer{background:#052b60;color:#cbd9e9;padding:22px 0;font-size:13px} .foot{display:flex;justify-content:space-between;gap:20px} /* ═══════════════════════════════════════════════════════════════════════════ DIE RECHTSSEITEN — Impressum und Datenschutzerklaerung Angelegt: 16.09.2026 (Auftrag "Kopf/Fuss-Geruest mit fertigem Logo") >>> WARUM DIESER BLOCK NOETIG IST. <<< Beide Seiten tragen ab jetzt denselben Kopf und Fuss wie die Startseite und laden damit dieses Stilblatt. Ihr Textblock ist aber fuer assets/css/pv4me.css gebaut und benutzt vier Bausteine, die es hier nicht gab. Nachgezaehlt am 16.09.2026: .card in pv4me.css 3 Regeln, hier 0 .h2 in pv4me.css 1 Regel, hier 0 --g-blau in pv4me.css 1 Mal, hier 0 (5 Mal im Rechtstext benutzt) --ink-soft in pv4me.css 1 Mal, hier 0 Ohne diesen Block staende der Rechtstext ohne Kasten da, mit kleiner Ueberschrift und mit schwarzen statt blauen Verweisen. >>> DIE ZWEI VARIABLEN SIND DER GRUND, WARUM AM RECHTSTEXT KEIN ZEICHEN GEAENDERT WERDEN MUSS. <<< Impressum und Datenschutzerklaerung schreiben ihre Linkfarbe als style="color:var(--g-blau)" direkt an das Element. Wird der Name hier definiert, wirken diese Angaben weiter — und R63 bleibt gewahrt, weil der Text unberuehrt bleibt. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* Die Namen aus dem alten Stilblatt, auf die Farben der Vorlage gelegt. */ --g-blau:#0d63bd; /* wie --blue2 */ --ink-soft:#5f7187; /* wie --muted */ } .h2{font-size:38px;line-height:1.08;margin:7px 0 13px;letter-spacing:-1px} .card{background:#fff;border:1px solid var(--line);border-radius:14px; padding:26px 28px;box-shadow:0 8px 20px rgba(0,0,0,.04)} .card h3{margin:0 0 6px;font-size:19px;color:var(--blue)} .card p{margin:0 0 4px;color:var(--muted)} .card p a{color:var(--blue2)} @media(max-width:780px){ .card{padding:20px 18px} } /* ── Und die Dankeseite ────────────────────────────────────────────────── >>> danke.php IST NICHT UMGESCHRIEBEN WORDEN, UND ZWAR ABSICHTLICH. <<< Sie steht nicht im Auftrag. Sie traegt aber denselben Kopf und Fuss wie alle anderen und laedt damit dieses Stilblatt. Ihre vier Bausteine fehlten hier (nachgezaehlt am 16.09.2026: .tag 0, .cta-row 0, .btn.ghost 0, .card.s 0 Regeln). Statt in ihrem Markup vier Klassen zu tauschen, stehen die vier Regeln jetzt hier: so bleibt die Datei Zeichen fuer Zeichen, wie sie war. .btn.ghost ist dabei derselbe Knopf wie .btn.outline der Vorlage — in der Vorlage heisst er nur anders. */ /* >>> DER ABSTAND UNTER DER KOPFZEILE, GEMESSEN UND NACHGEZOGEN. <<< Gemessen am 16.09.2026 bei 1440 Punkten, Abstand Kopfzeile bis erster Text: Startseite 70 px, Impressum 75 px, Datenschutz 75 px — und danke.php 0 px. Der Grund: Abstand gibt nur .section{padding:62px 0}, und das
der Dankeseite hat KEINE Klasse. >>> DER SELEKTOR TRIFFT AUSDRUECKLICH NUR ABSCHNITTE OHNE JEDE KLASSE. <<< Eine Regel "main > section" haette auch den Aufmacher getroffen und ihm 62 Punkte Innenabstand gegeben — also genau die Hoehe veraendert, die heute zweimal festgelegt wurde (640px). Mit :not([class]) bleibt alles andere unberuehrt, und danke.php muss nicht angefasst werden. RUECKNAHME: diese eine Regel streichen; dann klebt der Inhalt der Dankeseite wieder an der Kopfzeile. */ main > section:not([class]){padding:62px 0} .tag{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.06em; text-transform:uppercase;color:#fff;background:var(--blue2); border-radius:20px;padding:4px 12px;margin-bottom:12px} .tag.s{background:var(--green)} .card.s{border-top:4px solid var(--green)} .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px} .btn.ghost{background:#fff;border:2px solid var(--blue);color:var(--blue)} /* ── Zurueck nach oben ──────────────────────────────────────────────────── */ .back-to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:#063d8c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:900;box-shadow:0 6px 18px rgba(16,43,82,.22);z-index:50;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;border:2px solid #fff} .back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)} .back-to-top:hover{background:#0d63bd} .back-to-top:focus-visible{outline:3px solid #ffd400;outline-offset:3px} /* ── Die zwei Bildschirmbreiten der Vorlage ─────────────────────────────── */ @media(max-width:1080px) and (min-width:781px){ .wrap{padding-left:20px;padding-right:20px} .nav{gap:12px} .links{gap:12px;font-size:12px} .top .btn{padding:11px 13px;font-size:12px} .logo{font-size:27px} } @media(max-width:900px){ .smart-energy-grid{grid-template-columns:1fr;gap:28px} .smart-energy-photo,.smart-energy-photo img{min-height:320px;height:320px} } @media(max-width:780px){ html{scroll-padding-top:60px} section[id]{scroll-margin-top:60px} .wrap{padding:0 18px} .top{height:60px} .links{display:none} .logo{font-size:25px} .top .btn{padding:10px 12px;font-size:12px} .hero{min-height:560px;background-position:58% 50%;background-image:linear-gradient(180deg,rgba(16,23,31,.25) 0%,rgba(16,23,31,.55) 36%,rgba(16,23,31,.93) 78%),var(--hero-bild)} .hero-copy{align-self:end;padding:210px 0 35px;text-align:left;margin-left:0;margin-right:auto} .hero h1{font-size:42px} .hero p{font-size:16px} .hero > .wrap{padding-left:18px;padding-right:18px} .hero .hero-copy{width:100%;max-width:none;margin-left:0 !important;text-align:left !important} .trust{display:grid;gap:8px} .section{padding:42px 0} .section h2{font-size:30px} .config-grid,.calc-grid,.split,.contact-grid{grid-template-columns:1fr;gap:26px} .stats{grid-template-columns:1fr 1fr;gap:10px} .stat{padding:14px 8px} .stat strong{font-size:23px} .steps{grid-template-columns:1fr 1fr} .projects{grid-template-columns:1fr} .project img{height:220px} .formgrid{grid-template-columns:1fr} .full{grid-column:auto} .calculator{font-size:110px} .final h2{font-size:34px} .foot{display:block} .foot div+div{margin-top:8px} .smart-energy{padding:38px 0} .smart-energy-grid{gap:22px} .smart-energy-photo,.smart-energy-photo img{min-height:250px;height:250px} .smart-energy-photo:after{left:14px;bottom:14px;font-size:10px} .energy-intro{font-size:16px} .energy-card{grid-template-columns:42px 1fr;padding:11px 12px} .energy-card .energy-icon{width:38px;height:38px;font-size:19px} .energy-card strong{font-size:16px} .energy-card span{font-size:13px} .back-to-top{right:14px;bottom:14px;width:44px;height:44px;font-size:22px} } /* ═══════════════════════════════════════════════════════════════════════════ ZUSAETZE — was die Vorlage NICHT beschreibt, die Seite aber braucht ═══════════════════════════════════════════════════════════════════════════ Die Vorlage ist ein Entwurf ohne Datenschutz-Einrichtungen. Der Bestand hat sie, und sie verschwinden nicht auf meine Einschaetzung hin. Drei Stuecke brauchen daher Regeln, die in der Vorlage nicht vorkommen. Alle drei nutzen die FARBEN UND FORMEN DER VORLAGE, damit nichts fremd wirkt. Jedes ist im Bericht benannt. */ /* 1. Der Cookie-Hinweis aus inc/fuss.php. Uebernommen aus pv4me.css, nur die Farben und Radien der Vorlage eingesetzt. Er erscheint nur, bis der Besucher gewaehlt hat. */ .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;background:#fff; border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 14px 40px rgba(0,0,0,.16); display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:920px;margin:0 auto} .cookie p{margin:0;font-size:14px;color:var(--muted);max-width:60ch} .cookie .row{display:flex;gap:10px;flex-wrap:wrap} .cookie .btn{padding:10px 18px;font-size:14px} /* 2. Die Rechtslinks im Fuss. Die Vorlage zeigt "Impressum Datenschutz Kontakt" als reinen Text OHNE Verweis. >>> ALS TEXT WAEREN IMPRESSUM UND DATENSCHUTZERKLAERUNG VON DER SEITE AUS NICHT ERREICHBAR. <<< Deshalb sind es Verweise, in derselben Farbe und Groesse wie der Text der Vorlage. Optisch identisch bis auf den Zeigefinger des Mauszeigers. Siehe Rueckfrage 1 im V1-Bericht. */ .footer a{color:#cbd9e9} .footer a:hover{color:#fff;text-decoration:underline} /* 3. Das Einwilligungshaekchen und der Fehlerhinweis am Formular. Das Haekchen steht heute auf der Seite; es bleibt, bis Dirk Rueckfrage 1 beantwortet hat. Der Fehlerhinweis benutzt .future-box aus der Vorlage, also KEINE neue Klasse (R86); er braucht nur den Abstand nach unten statt nach oben. */ .form .consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0 18px;font-size:12px;color:#66798e} .form .consent input{margin-top:2px;flex:none} .form .consent a{color:var(--blue2);text-decoration:underline} .form .future-box{margin:0 0 18px} /* ═══════════════════════════════════════════════════════════════════════════ eRecht24-RECHTSTEXTE — Angelegt: 27.09.2026 (eRecht24-API-Integration) Gilt nur fuer
in impressum.php und datenschutz.php, also nur, wenn dort der eRecht24-Text steht (inc/rechtstexte/*.html). Der Text bleibt unveraendert (R63); hier wird NUR die Darstellung an pv4.me angeglichen. Die Schriftgroessen brauchen !important, weil eRecht24 Inline-Groessen mitbringt (h1 2rem, h2 1.5rem); Inline-Abstaende, die eRecht24 selbst mit !important setzt, bleiben. Lange Verweise (z. B. dataprivacyframework.gov/...) liefen bei 390 px 43 Punkte ueber den Rand; overflow-wrap:anywhere bricht sie um. ═══════════════════════════════════════════════════════════════════════════ */ .rechtstext{overflow-wrap:break-word} .rechtstext h1{font-size:34px !important;line-height:1.1;letter-spacing:-.5px;color:var(--blue);margin:0 0 14px} .rechtstext h2{font-size:23px !important;line-height:1.2;color:var(--blue);margin:26px 0 8px} .rechtstext h3{font-size:19px;line-height:1.25;color:var(--blue);margin:20px 0 6px} .rechtstext h4{font-size:16.5px;line-height:1.3;color:var(--ink);margin:14px 0 4px} .rechtstext p,.rechtstext li{color:var(--muted)} .rechtstext p{margin:0 0 12px} .rechtstext ul,.rechtstext ol{margin:0 0 12px;padding-left:22px} .rechtstext a{color:var(--blue2);overflow-wrap:anywhere} @media(max-width:780px){ .rechtstext h1{font-size:27px !important} .rechtstext h2{font-size:20px !important} }