/** * Ihr Solarangebot Keyword-Landingpages (/pages/…) * Alle neuen LPs: + styles.css + landing.css + diese Datei */ body.lp-main { --brand-primary: #972c86; --brand-accent: #7a246f; --brand-highlight: #ffb300; /* Editorial / Blog (hell, viel Weißfläche) */ --lp-paper: #ffffff; --lp-ink: #111827; --lp-ink-muted: #4b5563; --lp-border: #e5e7eb; --lp-prose-max: 42rem; /* Fallback, wenn .lp-hero-card-strip keinen inline --lp-hero-card-bg-image hat (CSV: hero_bild_url) */ --lp-hero-card-bg-image: url("/images/lp-hero-photovoltaik-muenchen.jpg"); background-color: var(--lp-paper); } /* Hauptnavigation: gleiche Optik wie index/landing (kein gesonderter Rechner-Button) */ /* LP: gesamte Seite hell – kein grauer Body-Hintergrund aus styles.css */ body.lp-main .landing-hero { background: var(--lp-paper); padding: 2.5rem 0 3.5rem; } body.lp-main .landing-hero .container { background: transparent; box-shadow: none; } body.lp-main .landing-nav { background: var(--lp-paper) !important; border-bottom: 1px solid var(--lp-border); box-shadow: none; } body.lp-main .navbar.landing-nav .nav-brand { height: auto; min-height: 50px; } body.lp-main .lp-nav-brand-link { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; } body.lp-main .lp-nav-brand-text { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; } body.lp-main .lp-nav-brand-name { font-weight: 800; font-size: 1.05rem; color: var(--brand-primary); letter-spacing: -0.02em; } body.lp-main .lp-nav-brand-sub { font-size: 0.72rem; font-weight: 600; color: var(--lp-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 480px) { body.lp-main .lp-nav-brand-text { display: none; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body.lp-main .nav-link { color: var(--brand-primary); } body.lp-main .nav-link:hover { color: var(--brand-accent); } /* Desktop: weiße Karte / Hero-Inhalt = gleiche nutzbare Breite wie Navbar (Container von Logo bis letztem Link) */ @media (min-width: 969px) { body.lp-main .landing-content { width: 100%; max-width: none; } body.lp-main .landing-form-wrapper { max-width: none; width: 100%; } } /* Kein globales .btn-primary: betrifft sonst auch den Header „Kontakt“ (siehe styles.css .lp-sticky-header) */ body.lp-main .btn-next, body.lp-main .btn-submit, body.lp-main .btn-landing-submit, body.lp-main .btn.btn-large, body.lp-main .btn-primary:not(.navbar .btn-primary) { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; } body.lp-main .btn-next:hover, body.lp-main .btn-submit:hover, body.lp-main .btn-landing-submit:hover, body.lp-main .btn.btn-large:hover, body.lp-main .btn-primary:not(.navbar .btn-primary):hover { background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; box-shadow: 0 10px 25px rgba(151, 44, 134, 0.28) !important; transform: translateY(-2px); } body.lp-main .landing-form-card { background: var(--lp-paper); border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 1.75rem 1.5rem; overflow: hidden; /* Oben eckig (Hero-Streifen), unten weiterhin leicht abgerundet */ border-radius: 0 0 12px 12px; } /* Mobil/Tablet: horizontal nichts über den Rand; vertikal unbeschnitten */ @media (max-width: 1099px) { body.lp-main { overflow-x: hidden; } body.lp-main .landing-form-card { overflow-x: hidden; overflow-y: visible; max-width: 100%; } body.lp-main .landing-form-wrapper { min-width: 0; width: 100%; max-width: 100%; } body.lp-main .landing-hero .container { min-width: 0; max-width: 100%; } body.lp-main .landing-hero .landing-content { min-width: 0; width: 100%; max-width: 100%; } body.lp-main .lp-seo-block { min-width: 0; width: 100%; max-width: 100%; } body.lp-main .lp-seo-prose { min-width: 0; max-width: 100%; } body.lp-main .lp-seo-sidebar { min-width: 0; max-width: 100%; } } /* Volle Kartenbreite: negativer Rand = Breite der weißen Fläche, Hintergrundbild */ body.lp-main .lp-hero-card-strip { position: relative; margin: -1.75rem -1.5rem 1.35rem; width: calc(100% + 3rem); box-sizing: border-box; background-color: #f3f4f6; background-image: var(--lp-hero-card-bg-image); /* Horizontal doppelt so „nah“ wie bei cover (Zentrum, seitlicher Ausschnitt) */ background-size: 200% auto; background-position: center center; background-repeat: no-repeat; border-radius: 0; } body.lp-main .lp-hero-card-strip__inner { position: relative; z-index: 1; padding: 2rem 1.5rem 2rem; min-height: 13rem; box-sizing: border-box; } body.lp-main .landing-hero .container { box-shadow: none; background: transparent; } body.lp-main .step-title { color: var(--brand-primary); } /* Hero-H1 im Streifen: Roman (400) statt Light (300) – Umlaute (ü/ö) wirken mit Light oft zu dünn */ body.lp-main .lp-hero-card-strip h1.hero-title.lp-hero-strip-title.hero-title-line { display: inline-block; margin: 0 0 0.5rem; padding: 0.45rem 1.75rem; background: #ffffff; color: #111111; font-weight: 400; letter-spacing: 0.02em; font-size: clamp(1.35rem, 3.8vw, 2rem); line-height: 1.2; text-align: left; text-shadow: none; border-radius: 0; max-width: min(100%, 52rem); box-sizing: border-box; clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); } /* Untertitel: gleiche Sprache wie H1 (.hero-title-line – weiß, Trapez, dünn, links) */ body.lp-main .lp-hero-card-strip .landing-subtitle { display: inline-block; max-width: min(100%, 52rem); margin: 0.65rem 0 0; padding: 0.42rem 1.35rem; box-sizing: border-box; font-size: clamp(0.82rem, 2.1vw, 0.98rem); line-height: 1.45; font-weight: 300; letter-spacing: 0.02em; text-align: left; color: #111111; background: #ffffff; border-radius: 0; text-shadow: none; clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); } /* Fragen im Multi-Step (nicht Hero-H1): kompakt & mittig zur Karte */ body.lp-main .landing-form.multistep-form { min-height: 0; padding-top: 0.5rem; width: 100%; max-width: 34rem; margin-left: auto; margin-right: auto; } /* Formular-Schritt: klare Karte ohne Schatten */ body.lp-main .landing-form .form-step { padding: 1.35rem 1.15rem 1.25rem; background: var(--lp-paper); border: 1px solid var(--lp-border); border-radius: 10px; border-top: 3px solid var(--brand-primary); box-shadow: none; box-sizing: border-box; min-width: 0; } body.lp-main .landing-form .form-step > .step-title { margin-top: 0; margin-bottom: 1rem; padding-top: 0; font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.38; text-align: center; color: var(--brand-primary); font-weight: 600; letter-spacing: -0.02em; } body.lp-main .landing-form .radio-group { gap: 0.65rem; width: 100%; max-width: 26rem; margin-left: auto; margin-right: auto; } body.lp-main .landing-form .radio-group-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; max-width: 100%; width: 100%; margin-left: 0; margin-right: 0; gap: 0.75rem; } body.lp-main .landing-form .radio-group-inline .radio-option { min-width: 0; width: 100%; box-sizing: border-box; } body.lp-main .landing-form .radio-option { padding: 0.75rem 1rem; gap: 0.85rem; justify-content: flex-start; text-align: left; border: 1px solid var(--lp-border); border-radius: var(--btn-radius); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.18s ease; } /* Icons ohne innere Kachel (nur Bild/Emoji, kein Rahmen) */ body.lp-main .landing-form .radio-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.35rem; line-height: 1; background: none; border: none; border-radius: 0; padding: 0; width: auto; height: auto; transition: transform 0.2s ease; } body.lp-main .landing-form .radio-icon img { width: 1.75rem; height: 1.75rem; display: block; object-fit: contain; } body.lp-main .landing-form .radio-icon:has(img) { font-size: 0; line-height: 0; } body.lp-main .landing-form .radio-option .radio-label { line-height: 1.35; flex: 1 1 auto; font-size: 0.95rem; font-weight: 600; color: var(--lp-ink); } body.lp-main .landing-form .radio-option .radio-label small { font-size: 0.78rem; } body.lp-main .landing-form .radio-option:hover { border-color: rgba(151, 44, 134, 0.45); background: #f8fafc; box-shadow: 0 4px 14px rgba(151, 44, 134, 0.1); transform: translateY(-1px); } body.lp-main .landing-form .radio-option:hover .radio-icon { transform: scale(1.06); } body.lp-main .landing-form .radio-option:hover .radio-label { color: var(--brand-primary); } body.lp-main .landing-form .radio-option:hover .radio-label small { color: rgba(151, 44, 134, 0.75); } body.lp-main .landing-form .radio-option:has(input[type="radio"]:checked) { border-color: var(--brand-primary); background: rgba(151, 44, 134, 0.08); box-shadow: none; } body.lp-main .landing-form .radio-option:has(input[type="radio"]:checked) .radio-icon { transform: scale(1.05); } body.lp-main .landing-form .radio-option input[type="radio"]:checked + .radio-label { color: var(--brand-primary); } body.lp-main .landing-form .radio-option:focus-within { outline: none; } /* Kein Browser-Fokusring am versteckten Radio (Klick = kein zusätzlicher Rahmen) */ body.lp-main .landing-form .radio-option input[type="radio"]:focus { outline: none; } /* * Textfelder: 1px wie Radio-Karten (styles.css .form-group input hat 2px und kann später laden). */ body.lp-main .landing-form .form-group input:not([type="checkbox"]):not([type="radio"]), body.lp-main .landing-form .form-group select, body.lp-main .landing-form .form-group textarea { border-width: 1px !important; border-style: solid !important; border-color: var(--lp-border) !important; } body.lp-main .landing-form .form-group input:focus, body.lp-main .landing-form .form-group select:focus, body.lp-main .landing-form .form-group textarea:focus { outline: none !important; border-color: var(--brand-accent) !important; box-shadow: none !important; } /* Installationsort: zwei Spalten auf etwas breiterem Viewport, weniger vertikales Scrollen */ @media (min-width: 520px) { body.lp-main .landing-form .form-step[data-step="1"] .radio-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; max-width: 100%; } } body.lp-main .landing-form .form-navigation { margin-top: 1.2rem; padding-top: 1rem; justify-content: center; max-width: 34rem; margin-left: auto; margin-right: auto; border-top: none; padding-top: 0; } body.lp-main .landing-form .form-navigation .btn-back, body.lp-main .landing-form .form-navigation .btn-next, body.lp-main .landing-form .form-navigation .btn-submit { flex: 1 1 auto; max-width: 12rem; } /* Wie .radio-option: dünner Rand (landing.css ebenfalls; !important gegen alte Cache-Versionen) */ body.lp-main .landing-form .form-navigation .btn-back { border-width: 1px !important; border-style: solid !important; border-color: var(--lp-border) !important; } body.lp-main .landing-form .form-navigation .btn-back:hover { border-color: rgba(151, 44, 134, 0.45) !important; color: var(--brand-primary) !important; } /* Header „Kontakt“: kompakt + Lila-Hover (styles.css; gegen Mobile-Overrides & Reihenfolge) */ body.lp-main header.lp-sticky-header .navbar .nav-menu a.btn-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.32rem 0.85rem !important; min-height: 2rem !important; font-size: 0.9375rem !important; font-weight: 600 !important; line-height: 1.2 !important; background: #972c86 !important; color: #fff !important; transform: none; box-shadow: none !important; } body.lp-main header.lp-sticky-header .navbar .nav-menu a.btn-primary:hover { background: #7a246f !important; color: #fff !important; transform: translateY(-1px) !important; box-shadow: 0 5px 18px rgba(151, 44, 134, 0.35) !important; } body.lp-main footer#site-footer.footer { background: #2a2a2a !important; } @media (min-width: 641px) { body.lp-main header.lp-sticky-header .navbar .nav-menu a.btn-primary { width: auto !important; } } /* LP-Grid: Nav-Buttons so breit wie die Formularspalte / aktiver Step (keine schmalen 12rem-Kacheln) */ body.lp-main .lp-form-main-grid .landing-form .form-navigation { width: 100%; max-width: 100%; box-sizing: border-box; } body.lp-main .lp-form-main-grid .landing-form .form-navigation .btn-back, body.lp-main .lp-form-main-grid .landing-form .form-navigation .btn-next, body.lp-main .lp-form-main-grid .landing-form .form-navigation .btn-submit { max-width: none; flex: 1 1 0; min-width: 0; } /* * Mobil: landing.css setzt .radio-group-inline auf Spalte → Anrede untereinander. * Im LP-Grid: Herr/Frau nebeneinander, je 50 % Kartenbreite wie Textfelder. */ @media (max-width: 768px) { body.lp-main .lp-form-main-grid .landing-form .radio-group-inline { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0.75rem; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } body.lp-main .lp-form-main-grid .landing-form .radio-group-inline .radio-option { flex: 1 1 0; min-width: 0; max-width: none; width: auto; box-sizing: border-box; } } /* Untertitel außerhalb der Hero-Karte (falls vorhanden) */ body.lp-main .landing-subtitle { color: #4a5b78; } body.lp-main .benefits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.25rem; } body.lp-main .lp-benefits-heading { grid-column: 1 / -1; margin: 0 0 0.15rem; font-size: 1.05rem; font-weight: 800; color: var(--brand-primary); text-align: center; letter-spacing: -0.02em; } /* SEO-Ratgeber + Inhaltsverzeichnis (1.500–3.000 Wörter; redaktioneller Blog-Look) */ body.lp-main .lp-seo-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lp-border); } /* TOC: rechts offene Trennkante + horizontale Linien wie im Referenzlayout */ body.lp-main .lp-toc { background: var(--lp-paper); border: none; border-right: 1px solid var(--lp-border); border-radius: 0; padding: 0; margin-bottom: 1.35rem; box-shadow: none; max-height: none; overflow: visible; } @media (min-width: 1100px) { body.lp-main .lp-toc.lp-toc--floating:hover { border-color: #d1d5db; } } /* Rechte Spalte: .lp-seo-sidebar (Autor auf Mobil; Desktop oft neben Formular .lp-author--form-rail) */ body.lp-main .lp-seo-block > .lp-toc { grid-area: toc; } body.lp-main .lp-seo-block > .lp-seo-prose { grid-area: prose; } body.lp-main .lp-seo-block > .lp-seo-sidebar { grid-area: author; display: flex; flex-direction: column; gap: 1rem; min-width: 0; } body.lp-main .lp-seo-block > .lp-share { grid-area: share; } /* Artikel teilen: gleiche Sticky-Idee wie TOC; Hybrid: rechte Spalte; Fragment: in .lp-seo-sidebar */ body.lp-main .lp-share { background: var(--lp-paper); margin-bottom: 1.35rem; box-sizing: border-box; } body.lp-main .lp-seo-block > .lp-share { border: none; border-left: 1px solid var(--lp-border); border-radius: 0; padding: 0; } body.lp-main .lp-seo-sidebar .lp-share { border: 1px solid var(--lp-border); border-radius: 8px; padding: 0; margin-bottom: 0; } body.lp-main .lp-share-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lp-ink); margin: 0; padding: 0.75rem 0.7rem 0.7rem; border-bottom: 1px solid var(--lp-border); text-align: center; } body.lp-main .lp-share-list { margin: 0; padding: 0.5rem 0.5rem 0.75rem; list-style: none; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } body.lp-main .lp-share-list li { margin: 0; padding: 0; } body.lp-main .lp-share-link { display: flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--lp-ink-muted); text-decoration: none; border-radius: 6px; } /* Markenfarben (Icons nutzen currentColor); keine Hover-Styles */ body.lp-main .lp-share-link[data-share="facebook"] { color: #1877f2; } body.lp-main .lp-share-link[data-share="linkedin"] { color: #0a66c2; } body.lp-main .lp-share-icon { display: block; flex-shrink: 0; } /* Formular + Autor nebeneinander (Desktop): rechts von den Formular-Schritten */ body.lp-main .lp-form-main-grid { display: block; } body.lp-main .lp-form-main-grid__form { min-width: 0; } body.lp-main .lp-author-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-ink-muted); margin: 0 0 0.65rem; } body.lp-main .lp-author-card { background: var(--lp-paper); border: 1px solid var(--lp-border); border-radius: 8px; padding: 1rem 0.95rem 1.05rem; box-shadow: none; } body.lp-main .lp-author-avatar-wrap { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(145deg, #f3f4f6 0%, #e5e7eb 100%); border: 1px solid var(--lp-border); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; overflow: hidden; flex-shrink: 0; } body.lp-main .lp-author-avatar { width: 100%; height: 100%; object-fit: cover; display: block; } body.lp-main .lp-author-initials { font-size: 1rem; font-weight: 800; color: var(--brand-primary); letter-spacing: -0.02em; line-height: 1; } body.lp-main .lp-author-meta { min-width: 0; } body.lp-main .lp-author-name { margin: 0 0 0.2rem; font-size: 0.9375rem; font-weight: 800; color: var(--lp-ink); line-height: 1.25; letter-spacing: -0.02em; } body.lp-main .lp-author-role { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--lp-ink-muted); line-height: 1.35; } body.lp-main .lp-author-bio { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--lp-ink-muted); } /* Optional: Karte mit Foto statt Initialen — siehe lp-seo-article-block.template.html */ body.lp-main .lp-author-card--with-photo .lp-author-initials { display: none; } body.lp-main .lp-author-card--with-photo .lp-author-avatar-wrap { padding: 0; background: transparent; border: none; } body.lp-main .lp-author-card--with-photo .lp-author-avatar { border-radius: 50%; } /* Desktop: TOC | Artikel | Autor; Sticky für TOC + Autor */ @media (min-width: 1100px) { /* * Sticky am TOC bricht ab, wenn ein Vorfahre overflow:hidden hat (.landing-form-card). * Sichtbar: TOC bleibt beim Seiten-Scroll links im Viewport, solange der Ratgeber-Block läuft. */ body.lp-main .landing-form-card { overflow: visible; } /* Mehr Luft rechts neben der Autor-Spalte am Formular */ body.lp-main:has(.lp-form-main-grid) .landing-form-card { padding-right: 2.25rem; } body.lp-main .lp-seo-block { display: grid; grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(200px, 260px); grid-template-areas: "toc prose author"; gap: 1.75rem 2rem; align-items: start; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(20px, calc((100vw - 1200px) / 2 + 20px)); padding-right: max(20px, calc((100vw - 1200px) / 2 + 20px)); box-sizing: border-box; overflow: visible; min-height: 0; } body.lp-main .lp-toc { position: -webkit-sticky; position: sticky; top: 5.5rem; align-self: start; margin-bottom: 0; max-height: none; overflow: visible; z-index: 2; } body.lp-main .lp-seo-block > .lp-share.lp-share--floating { position: -webkit-sticky; position: sticky; top: 5.5rem; align-self: start; margin-bottom: 0; z-index: 2; } body.lp-main .lp-seo-sidebar .lp-share.lp-share--floating { position: -webkit-sticky; position: sticky; top: 5.5rem; align-self: start; z-index: 2; } /* Autor in der Ratgeber-Spalte: nicht mehr sticky (scrollt mit dem Text weg) */ body.lp-main .lp-seo-sidebar { position: static; max-height: none; overflow-y: visible; align-self: start; } /* Zwei Spalten: TOC | Artikel (ohne dritte Spalte, wenn Autor neben Formular) */ body.lp-main .lp-seo-block { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); grid-template-areas: "toc prose"; } /* Hybrid: TOC | Artikel | Artikel teilen (rechts, sticky wie TOC) */ body.lp-main:has(.lp-form-main-grid):has(.lp-seo-block > .lp-share) .lp-seo-block { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(130px, 170px); grid-template-areas: "toc prose share"; } body.lp-main:has(.lp-form-main-grid) .lp-seo-block > .lp-seo-sidebar { display: none; } /* Seiten nur mit Ratgeber-Fragment (ohne Formular-Spalte): Autor weiter in der Sidebar */ body.lp-main:not(:has(.lp-form-main-grid)) .lp-seo-block { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(200px, 260px); grid-template-areas: "toc prose author"; } body.lp-main:not(:has(.lp-form-main-grid)) .lp-seo-block > .lp-seo-sidebar { display: flex; } /* * Formular + Autor: Formular unter .lp-seo-prose zentriert (42rem) vs. Formularbreite (34rem): * TOC-Offset + halbe Differenz (var(--lp-prose-max) − 34rem) / 2. * Autor: margin-left: auto am rechten Kartenrand. * Zeile volle Body-/Viewport-Breite wie #ratgeber (.lp-seo-block). */ body.lp-main .lp-form-main-grid { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 1.5rem 2rem; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(20px, calc((100vw - 1200px) / 2 + 20px)); padding-right: max(20px, calc((100vw - 1200px) / 2 + 20px)); box-sizing: border-box; } body.lp-main .lp-form-main-grid__form { flex: 0 1 34rem; max-width: 34rem; width: 100%; min-width: 0; margin-left: calc(210px + 2rem - 1.5rem + (var(--lp-prose-max, 42rem) - 34rem) / 2); } body.lp-main .lp-form-main-grid .landing-form.multistep-form { max-width: 100%; margin-left: 0; margin-right: 0; } /* Wie Ratgeber-Spalte „Artikel teilen“: gleiche Spaltenbreite wie minmax(130px, 170px) → 170px; rechts ausrichten */ body.lp-main .lp-author--form-rail { display: block; flex: 0 0 170px; width: 170px; max-width: 170px; min-width: 170px; margin-left: auto; margin-bottom: 0; position: -webkit-sticky; position: sticky; top: 5.5rem; align-self: flex-start; max-height: calc(100vh - 6.5rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--lp-paper); border: none; border-left: 1px solid var(--lp-border); border-radius: 0; padding: 0; box-sizing: border-box; } body.lp-main .lp-author--form-rail .lp-author-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lp-ink); margin: 0; padding: 0.75rem 0.7rem 0.7rem; border-bottom: 1px solid var(--lp-border); text-align: center; } body.lp-main .lp-author--form-rail .lp-author-card { width: 100%; max-width: none; box-sizing: border-box; background: transparent; border: none; border-radius: 0; box-shadow: none; margin: 0; padding: 0.5rem 0.5rem 0.75rem; display: flex; flex-direction: column; align-items: center; text-align: center; } body.lp-main .lp-author--form-rail .lp-author-meta { text-align: center; width: 100%; } body.lp-main .lp-author--form-rail .lp-author-avatar-wrap { margin-bottom: 0.65rem; } /* Wie body.lp-main .landing-form .radio-group: 26rem zentriert, gleiche Karten wie ohne Grid-Wrapper */ body.lp-main .lp-form-main-grid .landing-form .radio-group, body.lp-main .lp-form-main-grid .landing-form .radio-group-inline { max-width: 100%; width: 100%; margin-left: 0; margin-right: 0; } body.lp-main .lp-form-main-grid .landing-form .radio-group-inline { justify-content: stretch; } body.lp-main .lp-form-main-grid .landing-form .form-navigation { justify-content: flex-start; margin-left: 0; margin-right: 0; max-width: 100%; } body.lp-main:has(.lp-form-main-grid) .lp-author--ratgeber-only { display: none !important; } body.lp-main .lp-seo-prose { min-width: 0; } } @media (max-width: 1099px) { body.lp-main .lp-author--form-rail { display: none !important; } body.lp-main .lp-seo-block { display: grid; grid-template-columns: 1fr; /* Erst Ratgebertext, dann Sidebar (Autor) – liest sich natürlicher auf Mobil */ grid-template-areas: "prose" "author"; gap: 1.25rem; } /* Hybrid mit freistehender Share-Spalte: Text, dann Teilen, dann Autor-Sidebar */ body.lp-main:has(.lp-seo-block > .lp-share) .lp-seo-block { grid-template-areas: "prose" "share" "author"; } body.lp-main .lp-seo-block > .lp-share { border-left: none; border: 1px solid var(--lp-border); border-radius: 8px; margin-bottom: 0; } body.lp-main .lp-share .lp-share-list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.75rem; padding: 0.65rem 1rem 0.85rem; } /* Inhaltsverzeichnis auf Mobil ausblenden – mehr Fokus auf Text */ body.lp-main .lp-seo-block > .lp-toc { display: none !important; } body.lp-main .lp-seo-sidebar { position: static; max-height: none; overflow-y: visible; } } body.lp-main .lp-toc-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lp-ink); margin: 0; padding: 0.75rem 0.7rem 0.7rem 0; border-bottom: 1px solid var(--lp-border); } body.lp-main .lp-toc-list { margin: 0; padding-left: 0; list-style: none; color: var(--lp-ink-muted); font-size: 0.8rem; line-height: 1.45; } body.lp-main .lp-toc-list li { margin: 0; padding: 0.75rem 0.7rem 0.75rem 0; border-top: 1px solid var(--lp-border); transition: background-color 0.15s ease, color 0.15s ease; } body.lp-main .lp-toc-list li:first-child { border-top: none; } body.lp-main .lp-toc-list li:not(.is-active):hover { background: rgba(0, 0, 0, 0.045); } body.lp-main .lp-toc-list a { color: var(--lp-ink-muted); font-weight: 500; text-decoration: none; display: block; text-align: left; transition: color 0.15s ease; } body.lp-main .lp-toc-list a:hover { text-decoration: none; } body.lp-main .lp-toc-list li.is-active { background: rgba(0, 48, 135, 0.09); } body.lp-main .lp-toc-list li.is-active a, body.lp-main .lp-toc-list a[aria-current="true"] { color: var(--brand-primary); } body.lp-main .lp-seo-prose { color: var(--lp-ink-muted); font-size: 1.0625rem; line-height: 1.75; max-width: var(--lp-prose-max); } body.lp-main .lp-seo-lead { font-size: 1.125rem; line-height: 1.65; color: var(--lp-ink-muted); } /* Ratgeber: Aufzählungen ohne Standard-Bullets (nur Zeilenabstand) */ body.lp-main .lp-seo-prose .lp-seo-list { margin: 1rem 0 1.5rem; padding-left: 0; list-style: none; color: var(--lp-ink-muted); font-size: 1.0625rem; line-height: 1.65; } body.lp-main .lp-seo-prose .lp-seo-list li { margin-bottom: 0.5rem; } body.lp-main .lp-seo-prose .lp-seo-list li:last-child { margin-bottom: 0; } /* Mini-PV-Rechner: im Ratgeber unter dem Kosten-Abschnitt (zentriert in der Prose-Spalte) */ body.lp-main .lp-seo-prose .lp-mini-rechner { margin: 1.75rem auto 2rem; max-width: 22rem; width: 100%; } /* Rand wie .form-step: 1px, oben 3px Akzent, kein Doppel-Ring per box-shadow */ body.lp-main .lp-mini-rechner { position: relative; margin: 0; padding: 1.65rem 1rem 1.15rem; display: flex; flex-direction: column; align-items: stretch; background: linear-gradient(180deg, rgba(255, 179, 0, 0.06) 0%, var(--lp-paper) 3.25rem); border: 1px solid var(--lp-border); border-radius: 10px; border-top: 3px solid var(--brand-highlight); box-shadow: none; box-sizing: border-box; } body.lp-main .lp-mini-rechner__title { margin: 0 0 1.35rem; text-align: center; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.02em; color: var(--brand-primary); line-height: 1.25; } body.lp-main .lp-mini-rechner__title::before { content: "⚡ "; font-weight: 800; } body.lp-main .lp-mini-rechner__badge { display: block; width: fit-content; max-width: calc(100% - 0.5rem); align-self: center; margin: 0 0 1.25rem; padding: 0.5rem 0.85rem; text-align: center; font-size: 0.625rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--lp-ink); background: var(--brand-highlight); border-radius: 4px; line-height: 1.35; } body.lp-main .lp-mini-rechner__intro { margin: 0 0 0.85rem; font-size: 0.8125rem; line-height: 1.45; color: var(--lp-ink-muted); } body.lp-main .lp-mini-rechner__fields { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.85rem; } body.lp-main .lp-mini-rechner__fields label { font-size: 0.75rem; font-weight: 700; color: var(--lp-ink); } body.lp-main .lp-mini-rechner__fields input { width: 100%; padding: 0.5rem 0.65rem; font-size: 0.9375rem; border: 1px solid var(--lp-border); border-radius: 8px; font-family: inherit; box-sizing: border-box; } body.lp-main .lp-mini-rechner__fields input:focus { outline: 2px solid rgba(151, 44, 134, 0.35); border-color: var(--brand-accent); } body.lp-main .lp-mini-rechner__out { padding: 0.65rem 0 0.35rem; border-top: 1px solid var(--lp-border); margin-bottom: 0.5rem; } body.lp-main .lp-mini-rechner__line { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: 0.8125rem; line-height: 1.45; margin-bottom: 0.35rem; } body.lp-main .lp-mini-rechner__line:last-child { margin-bottom: 0; } body.lp-main .lp-mini-rechner__label { color: var(--lp-ink-muted); font-weight: 600; } body.lp-main .lp-mini-rechner__line strong { color: var(--lp-ink); font-weight: 800; text-align: right; } body.lp-main .lp-mini-rechner__line--accent strong { color: var(--brand-primary); } body.lp-main .lp-mini-rechner__hint { margin: 0 0 0.75rem; font-size: 0.6875rem; line-height: 1.4; color: var(--lp-ink-muted); } /* Wie Nav „Kontakt“: styles.css .btn-primary */ body.lp-main .lp-mini-rechner__cta.btn-primary { width: 100%; box-sizing: border-box; text-align: center; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.15rem; letter-spacing: 0.02em; } /* Kurz-Fakten-Kästchen im Fließtext (Label + Text aus CSV: z. B. „Gut zu wissen“, „Interessant“) */ body.lp-main .lp-seo-fact-box { margin: 1.35rem 0 1.85rem; padding: 1rem 1rem 1.05rem; max-width: var(--lp-prose-max); background: #f9fafb; border: 1px solid var(--lp-border); border-radius: 10px; border-left: 3px solid var(--brand-accent); box-sizing: border-box; } body.lp-main .lp-seo-fact-box-label { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--brand-primary); line-height: 1.3; } body.lp-main .lp-seo-fact-box-text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--lp-ink-muted); } body.lp-main .lp-seo-fact-box-text strong { color: var(--lp-ink); font-weight: 700; } /* Fließtext-Bilder (URLs aus CSV) */ body.lp-main .lp-seo-figure { margin: 1.5rem 0 1.85rem; max-width: var(--lp-prose-max); } body.lp-main .lp-seo-figure img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--lp-border); background: #f3f4f6; } body.lp-main .lp-seo-figure figcaption { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.45; color: var(--lp-ink-muted); } /* Vergleichstabelle PV vs. Gas / Heizöl */ body.lp-main .lp-seo-table-wrap { margin: 0.75rem 0 1.5rem; width: 100%; max-width: min(100%, var(--lp-prose-max)); min-width: 0; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; background: transparent; } body.lp-main .lp-seo-table-caption-intro { margin: 0 0 0.65rem; font-size: 0.9375rem; line-height: 1.55; color: var(--lp-ink-muted); } body.lp-main .lp-seo-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.875rem; line-height: 1.45; } body.lp-main .lp-seo-table th, body.lp-main .lp-seo-table td { padding: 0.7rem 0.75rem; text-align: left; vertical-align: top; border: none; overflow-wrap: break-word; word-break: break-word; } body.lp-main .lp-seo-table thead th { background: #f9fafb; font-weight: 700; color: var(--lp-ink); font-size: 0.8125rem; } body.lp-main .lp-seo-table tbody th[scope="row"] { font-weight: 600; color: var(--lp-ink); background: #fafafa; width: 26%; } body.lp-main .lp-seo-table td { color: var(--lp-ink-muted); } body.lp-main .lp-seo-prose h2 { font-size: 1.5rem; font-weight: 700; color: var(--lp-ink); margin: 2rem 0 0.75rem; letter-spacing: 0.01em; line-height: 1.28; scroll-margin-top: 5rem; } body.lp-main .lp-seo-prose p { margin: 0 0 0.85rem; } body.lp-main .lp-seo-prose a { color: var(--brand-accent); font-weight: 600; } body.lp-main .benefit-card { border: 1px solid var(--lp-border); background: #fff; border-radius: 12px; padding: 1rem 1rem; } body.lp-main .benefit-title { font-weight: 800; color: var(--brand-primary); margin-bottom: 0.25rem; } body.lp-main .benefit-text { color: var(--lp-ink-muted); font-size: 0.95rem; line-height: 1.55; } body.lp-main .highlight-pill { display: inline-flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0.75rem; border-radius: 999px; background: rgba(255, 179, 0, 0.16); color: #5c4300; border: 1px solid rgba(255, 179, 0, 0.35); font-weight: 700; font-size: 0.9rem; } body.lp-main .price-box { margin-top: 1.25rem; padding: 1rem 1rem; border-radius: 8px; border: 1px solid var(--lp-border); background: #f9fafb; } body.lp-main .price-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; justify-content: space-between; } body.lp-main .price-main { font-weight: 900; color: var(--brand-primary); font-size: 1.05rem; } body.lp-main .price-note { color: #4a5b78; font-size: 0.9rem; margin-top: 0.5rem; line-height: 1.5; } body.lp-main .lp-price-pill--info { background: rgba(151, 44, 134, 0.12) !important; border-color: rgba(151, 44, 134, 0.35) !important; color: var(--brand-primary) !important; } body.lp-main .lp-section-title { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 700; color: var(--lp-ink); text-align: center; letter-spacing: -0.02em; } /* FAQ: aufklappbar (details/summary) */ body.lp-main .lp-faq-accordion { display: flex; flex-direction: column; gap: 0.5rem; } body.lp-main .lp-faq-item { border: 1px solid var(--lp-border); border-radius: 8px; background: var(--lp-paper); overflow: hidden; } body.lp-main .lp-faq-summary { list-style: none; cursor: pointer; padding: 0.85rem 1rem; font-weight: 600; color: var(--lp-ink); font-size: 0.95rem; line-height: 1.35; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; user-select: none; } body.lp-main .lp-faq-summary::-webkit-details-marker { display: none; } body.lp-main .lp-faq-summary::marker { content: ""; } body.lp-main .lp-faq-summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--brand-accent); border-bottom: 2px solid var(--brand-accent); transform: rotate(45deg); flex-shrink: 0; margin-top: -0.2rem; transition: transform 0.2s ease; } body.lp-main .lp-faq-item[open] .lp-faq-summary::after { transform: rotate(225deg); margin-top: 0.15rem; } body.lp-main .lp-faq-item[open] .lp-faq-summary { border-bottom: 1px solid var(--lp-border); } body.lp-main .lp-faq-answer { padding: 0.75rem 1rem 1rem; color: var(--lp-ink-muted); font-size: 0.95rem; line-height: 1.6; } body.lp-main .lp-cta-block { margin-top: 1.5rem; padding: 1.25rem 1rem; border-radius: 8px; background: #f9fafb; border: 1px solid var(--lp-border); } body.lp-main .lp-cta-title { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 700; color: var(--lp-ink); text-align: center; } body.lp-main .lp-cta-lead { margin: 0; text-align: center; } body.lp-main .lp-cta-block .landing-subtitle { margin-top: 0; } body.lp-main .lp-cta-actions { margin-top: 0.85rem; text-align: center; } body.lp-main .lp-crosslinks { margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid var(--lp-border); text-align: center; font-size: 0.88rem; color: var(--lp-ink-muted); line-height: 1.6; } body.lp-main .lp-crosslinks-label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--lp-ink); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; } body.lp-main .lp-crosslinks-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 0.65rem; } body.lp-main .lp-crosslinks-list a { color: var(--brand-accent); font-weight: 700; text-decoration: none; } body.lp-main .lp-crosslinks-list a:hover { text-decoration: underline; } body.lp-main .lp-crosslinks-sep { color: rgba(0, 48, 135, 0.25); user-select: none; } body.lp-main .lp-footer-cta { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--lp-border); } @media (max-width: 720px) { body.lp-main .landing-form-card { padding: 1.25rem; } /* * Direkte Kinder der Karte: Hero (Subtitle im Bild-Streifen) → Progress → Form → Ratgeber … * Kein flex-order mehr nötig (Subtitle sitzt in .lp-hero-card-strip). */ body.lp-main .lp-hero-card-strip { margin: -1.25rem -1.25rem 1.15rem; width: calc(100% + 2.5rem); } body.lp-main .lp-hero-card-strip__inner { padding: 1.65rem 1.25rem 1.75rem; min-height: 11.5rem; } body.lp-main .lp-hero-card-strip .landing-subtitle { margin-top: 0.85rem; } body.lp-main .landing-form.multistep-form { padding-top: 0.65rem; max-width: 100%; } body.lp-main .landing-form .form-navigation .btn-back, body.lp-main .landing-form .form-navigation .btn-next, body.lp-main .landing-form .form-navigation .btn-submit { max-width: none; } body.lp-main .landing-form .form-step[data-step="1"] > .step-title { margin-top: 0; } body.lp-main .benefits-grid { grid-template-columns: 1fr; } } /* SEO-Stadtseiten: Module nicht nach rechts einrücken (TOC nur in .artikel-layout) */ @media (min-width: 769px) { body.lp-main .hero-inner.container { margin-left: auto; margin-right: auto; } body.lp-main .partner-leiste .container > .partner-label, body.lp-main .partner-leiste .container > .partner-grid, body.lp-main section:has(.presse-grid) .container > :is(h2, p, .presse-grid), body.lp-main section:has(.infoboxen-grid) .container > .infoboxen-grid, body.lp-main section:has(.vn-wrap) .container > .vn-wrap, body.lp-main section:has(.prozess-grid) .container > :is(h2, p, .prozess-grid, .prozess-gesamt), body.lp-main section:has(.rechner-card) .container > .rechner-card, body.lp-main section:has(.vtab-wrap) .container > :is(h2, p, .vtab-wrap), body.lp-main section:has(.testimonials-grid) .container > :is(h2, p, .testimonials-grid), body.lp-main section:has(.referenz-grid) .container > :is(h2, p, .referenz-grid), body.lp-main section:has(.autorenbox) .container > .autorenbox, body.lp-main section:has(.faq-list) .container > :is(h2, p, .faq-list), body.lp-main section:has(.zertifikate-grid) .container > :is(h2, p, .zertifikate-grid), body.lp-main section#kontakt .container > .kontakt-card, body.lp-main .container:has(> .lsi-nav) > .lsi-nav { margin-left: 0; width: 100%; max-width: 100%; } body.lp-main .artikel-layout:has(> .toc-wrapper.hidden) { grid-template-columns: 1fr; } body.lp-main .artikel-layout:has(> .toc-wrapper.hidden) > .toc-wrapper.hidden { display: none; } } /* Hero-Streifen Blog + PV-Rechner: Marken-Lila, Text links (nicht zentriert wie global) */ body.lp-main .rechner-hero .container { text-align: left; } body.lp-main .rechner-hero p { text-align: left; } /* Blog-Übersicht (blog.html) */ .blog-index-main { padding: 2.5rem 20px 4rem; max-width: 720px; margin: 0 auto; } .blog-index-main .section-title { text-align: left; margin-bottom: 1rem; color: var(--brand-primary); } .blog-index-intro { margin-bottom: 1.5rem; color: var(--lp-ink-muted); line-height: 1.6; } .blog-index-intro a { color: var(--brand-accent); font-weight: 600; text-decoration: none; } .blog-index-intro a:hover { color: var(--brand-primary); text-decoration: underline; } .blog-index-list { list-style: none; padding: 0; margin: 0; } .blog-index-list li { border-bottom: 1px solid var(--lp-border); padding: 1rem 0; } .blog-index-list a { font-weight: 600; color: var(--brand-primary); } .blog-index-list p { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--lp-ink-muted); }