/* ======================================================================= Nordkraft PV — Stylesheet Farbwelt: Schwarz + Sonnengelb, beides direkt aus der Logodatei ausgelesen. Weißer Seitenhintergrund. ======================================================================= */ :root { --gelb: #F8B800; /* Sonnengelb, dominanter Ton der Sonne im Logo */ --gelb-dunkel: #D89F00; /* Hover / Ränder */ --gelb-hell: #FEF4DA; /* zarte Flächen */ --schwarz: #201820; /* Schrift-Schwarz aus dem Logo */ --anthrazit: #33292F; --grau-700: #55595E; --grau-500: #7A7F85; --grau-200: #E5E7E9; --grau-100: #F2F3F4; --grau-50: #F8F9FA; --weiss: #FFFFFF; /* Die Logodatei (943 × 372 px) enthält rundum weißen Rand; der eigentliche Schriftzug sitzt bei x 105–880 / y 84–285. Ohne Ausgleich wirkt das Logo zu klein und links eingerückt. Beides gleichen wir rein über die Darstellung aus — die Datei selbst bleibt unangetastet: sichtbare Höhe = 0,54 × Elementhöhe Weißrand links = 0,28 × Elementhöhe */ --logo-versatz: .282; --radius: 14px; --radius-sm: 10px; --wrap: 1180px; --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --schatten: 0 1px 2px rgba(14,15,16,.04), 0 8px 24px rgba(14,15,16,.06); --schatten-lg: 0 2px 4px rgba(14,15,16,.05), 0 18px 48px rgba(14,15,16,.10); } /* ---------- Reset / Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 118px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--weiss); color: var(--schwarz); font-family: var(--schrift); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; /* Deutsche Komposita werden lang: „PV-Wirtschaftlichkeitsberechnung" passt auf einem 375 px breiten Telefon in keine Zeile und schob sonst die ganze Seite seitlich hinaus. Silbentrennung greift, weil steht; der Umbruch im Wort ist das Netz, falls der Browser sie nicht beherrscht. */ hyphens: auto; overflow-wrap: break-word; } p, li, dd, dt, label { overflow-wrap: break-word; } h1 { font-size: clamp(2.05rem, 4.6vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); } h3 { font-size: 1.14rem; letter-spacing: -.01em; } p { margin: 0 0 1em; } a { color: inherit; text-decoration-color: var(--gelb); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--gelb-dunkel); } :focus-visible { outline: 3px solid var(--gelb-dunkel); outline-offset: 2px; border-radius: 4px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--gelb); color: var(--schwarz); padding: 10px 18px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600; text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); } .wrap-narrow { max-width: 860px; } /* ======================================================================= KOPFBEREICH — Logo gut sichtbar, nie beschnitten ======================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--grau-200); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; padding-block: 12px; } /* Logo: feste Höhe, freie Breite -> Seitenverhältnis bleibt erhalten. object-fit: contain verhindert jedes Zuschneiden oder Verzerren. */ .logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; /* verhindert Überlauf im Flex-Container */ text-decoration: none; overflow: hidden; /* falls der Versatz an den Rand stößt */ } .logo img { --logo-hoehe: clamp(60px, 9vw, 84px); display: block; height: var(--logo-hoehe); width: auto; max-width: 100%; object-fit: contain; /* Vorgabe: niemals beschneiden/verzerren */ object-position: left center; /* schiebt nur den Weißrand der Datei aus dem Blick, nicht das Logo */ margin-left: calc(var(--logo-hoehe) * var(--logo-versatz) * -1); } /* ---------- Navigation ---------- */ .nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); } .nav > a:not(.btn) { text-decoration: none; font-weight: 500; font-size: .97rem; color: var(--anthrazit); padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; } .nav > a:not(.btn):hover { border-bottom-color: var(--gelb); } /* Telefonnummer im Kopfbereich — zweiter Abschlussweg neben dem Formular */ .kopf-telefon { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 650; font-size: .97rem; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; } .kopf-telefon svg { width: 17px; height: 17px; color: var(--gelb-dunkel); flex: 0 0 auto; } .kopf-telefon:hover { border-bottom-color: var(--gelb); } .nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--grau-200); border-radius: var(--radius-sm); background: var(--weiss); cursor: pointer; padding: 0; place-items: center; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 20px; height: 2px; background: var(--schwarz); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; } .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); } /* ======================================================================= BUTTONS ======================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border: 2px solid transparent; border-radius: var(--radius-sm); font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--gelb); color: var(--schwarz); border-color: var(--gelb); } .btn-primary:hover { background: var(--gelb-dunkel); border-color: var(--gelb-dunkel); } .btn-ghost { background: transparent; color: var(--schwarz); border-color: var(--schwarz); } .btn-ghost:hover { background: var(--schwarz); color: var(--weiss); } .btn-sm { padding: 10px 18px; font-size: .93rem; } .btn-lg { padding: 17px 34px; font-size: 1.06rem; } /* Volle Breite, aber als Block statt mit width:100%. Der Unterschied zählt: das Kontaktformular gibt seinen Kindern seitliche Ränder (margin-inline), und width:100% rechnet die nicht mit — der Knopf ragte dadurch auf schmalen Displays über den Rand hinaus. Ein Flex-Element auf Blockebene füllt die verfügbare Breite abzüglich seiner Ränder. */ .btn-block { display: flex; width: auto; } /* ======================================================================= HERO ======================================================================= */ .eyebrow { display: inline-flex; align-items: center; margin: 0 0 14px; padding-left: 14px; position: relative; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grau-700); } .eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--gelb); } .hero { position: relative; padding: clamp(48px, 8vw, 92px) 0 clamp(52px, 8vw, 96px); background: radial-gradient(720px 420px at 88% -8%, var(--gelb-hell) 0%, rgba(255,255,255,0) 62%), var(--weiss); border-bottom: 1px solid var(--grau-200); } .hero-inner { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .hero h1 { margin-bottom: .45em; } .lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--grau-700); max-width: 62ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; } .hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; font-size: .95rem; color: var(--grau-700); } .hero-facts li { display: flex; align-items: center; gap: 9px; } .hero-facts li::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--gelb); flex: 0 0 auto; } .hero-card { background: var(--weiss); border: 1px solid var(--grau-200); border-top: 4px solid var(--gelb); border-radius: var(--radius); padding: clamp(24px, 3vw, 34px); box-shadow: var(--schatten-lg); } .hero-card h2 { font-size: 1.2rem; margin-bottom: 18px; } .check-list { list-style: none; margin: 0 0 18px; padding: 0; } .check-list li { position: relative; padding-left: 30px; margin-bottom: 13px; font-size: .96rem; color: var(--anthrazit); line-height: 1.5; } .check-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--gelb); } .check-list li::after { content: ""; position: absolute; left: 5.5px; top: 8px; width: 7px; height: 3.5px; border-left: 2px solid var(--schwarz); border-bottom: 2px solid var(--schwarz); transform: rotate(-45deg); } .card-note { margin: 0; padding-top: 16px; border-top: 1px solid var(--grau-200); font-size: .88rem; color: var(--grau-500); } /* ======================================================================= SEKTIONEN ======================================================================= */ .section { padding: clamp(56px, 8vw, 100px) 0; } .section-alt { background: var(--grau-50); border-block: 1px solid var(--grau-200); } .section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); } .section-sub { color: var(--grau-700); font-size: 1.05rem; margin-bottom: 0; } .grid { display: grid; gap: clamp(18px, 2.2vw, 26px); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } /* ---------- Leistungskarten ---------- */ .card { background: var(--weiss); border: 1px solid var(--grau-200); border-radius: var(--radius); padding: 30px 26px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .card:hover { border-color: var(--gelb); box-shadow: var(--schatten); transform: translateY(-3px); } .card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: var(--radius-sm); background: var(--gelb-hell); color: var(--schwarz); } .card-icon svg { width: 28px; height: 28px; } .card p { margin: 0; font-size: .96rem; color: var(--grau-700); } /* ---------- Ablauf ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; counter-reset: schritt; } .step { position: relative; padding-top: 26px; border-top: 3px solid var(--grau-200); } .step::after { content: ""; position: absolute; top: -3px; left: 0; width: 42px; height: 3px; background: var(--gelb); } .step-num { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--schwarz); color: var(--gelb); font-weight: 700; font-size: .95rem; } .step h3 { margin-bottom: .4em; } .step p { margin: 0; font-size: .94rem; color: var(--grau-700); } /* ---------- Region ---------- */ .region-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 70px); align-items: center; } .region-text p { color: var(--grau-700); max-width: 56ch; } .orte { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 20px; padding: 0; } .orte li { padding: 8px 16px; border: 1px solid var(--grau-200); border-radius: 999px; background: var(--weiss); font-size: .93rem; font-weight: 550; } .orte li:nth-child(-n+5) { border-color: var(--gelb); background: var(--gelb-hell); } .region-note { font-size: .92rem; color: var(--grau-500); margin: 0; } .region-visual { border: 1px solid var(--grau-200); border-radius: var(--radius); overflow: hidden; background: var(--weiss); } .region-visual svg { display: block; width: 100%; height: auto; } /* ---------- Warum wir ---------- */ .feature { padding: 26px 24px; background: var(--weiss); border: 1px solid var(--grau-200); border-left: 3px solid var(--gelb); border-radius: var(--radius-sm); } .feature h3 { margin-bottom: .45em; } .feature p { margin: 0; font-size: .95rem; color: var(--grau-700); } /* ---------- CTA-Band ---------- */ .cta-band { background: var(--schwarz); color: var(--weiss); padding: clamp(42px, 5.5vw, 68px) 0; } .cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; } .cta-band h2 { margin-bottom: .3em; } .cta-band p { margin: 0; color: rgba(255,255,255,.72); max-width: 52ch; } .cta-aktionen { text-align: center; } .cta-band .cta-telefon { margin-top: 12px; font-size: .93rem; white-space: nowrap; } .cta-telefon a { color: var(--gelb); font-weight: 650; text-decoration: none; border-bottom: 1px solid rgba(248,184,0,.45); } .cta-telefon a:hover { border-bottom-color: var(--gelb); } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--grau-200); } .faq details { border-bottom: 1px solid var(--grau-200); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-weight: 620; font-size: 1.04rem; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--gelb-hell); position: relative; transition: transform .2s ease, background-color .2s ease; background-image: linear-gradient(var(--schwarz), var(--schwarz)), linear-gradient(var(--schwarz), var(--schwarz)); background-size: 10px 2px, 2px 10px; background-position: center, center; background-repeat: no-repeat; } .faq details[open] summary::after { transform: rotate(135deg); background-color: var(--gelb); } .faq summary:hover { color: var(--grau-700); } .faq-body { padding: 0 0 22px; max-width: 72ch; } .faq-body p { margin: 0; color: var(--grau-700); } /* ---------- Kontakt ---------- */ .kontakt-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .kontakt-text > p { color: var(--grau-700); max-width: 48ch; } .kontakt-liste { list-style: none; margin: 30px 0 0; padding: 0; } .kontakt-liste li { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--grau-200); } .kontakt-liste li:last-child { border-bottom: 1px solid var(--grau-200); } .kontakt-label { font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--grau-500); padding-top: 2px; } .kontakt-wert { font-weight: 550; } .kontakt-form { background: var(--weiss); border: 1px solid var(--grau-200); border-radius: var(--radius); overflow: hidden; /* damit das Kopfband bündig sitzt */ box-shadow: var(--schatten-lg); } /* Kopfband in Sonnengelb: macht das Formular zum sichtbaren Ziel der Seite statt zu einem Kasten, den man überliest. */ .form-kopf { background: var(--gelb); color: var(--schwarz); padding: clamp(20px, 2.6vw, 28px) clamp(24px, 3vw, 36px); } .form-kopf h3 { margin: 0 0 6px; font-size: clamp(1.2rem, 2vw, 1.45rem); } .form-kopf p { margin: 0; font-size: .93rem; opacity: .8; } .kontakt-form > *:not(.form-kopf) { margin-inline: clamp(24px, 3vw, 36px); } .kontakt-form > .form-gruppe:first-of-type { margin-top: clamp(22px, 2.6vw, 30px); } .kontakt-form > .form-hinweis { margin-bottom: clamp(24px, 3vw, 32px); } /* ---------- Schrittgliederung ---------- */ .form-gruppe { margin-bottom: 26px; } .form-schritt { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--grau-200); font-size: .95rem; font-weight: 700; } .form-schritt span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--schwarz); color: var(--gelb); font-size: .8rem; } .feld-hinweis { font-weight: 400; color: var(--grau-500); font-size: .85em; } .feld { margin-bottom: 18px; border: 0; padding: 0; min-width: 0; } .feld label, .feld legend { display: block; margin-bottom: 7px; font-size: .88rem; font-weight: 620; color: var(--anthrazit); padding: 0; } .feld label span { color: var(--gelb-dunkel); } .feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea { width: 100%; padding: 14px 16px; /* größer: leichter zu treffen, wirkt einladender */ border: 1.5px solid var(--grau-200); border-radius: var(--radius-sm); background: var(--grau-50); font: inherit; font-size: 1rem; color: var(--schwarz); transition: border-color .15s ease, background-color .15s ease; } .feld input::placeholder, .feld textarea::placeholder { color: var(--grau-500); } .feld input:focus, .feld textarea:focus { background: var(--weiss); border-color: var(--schwarz); outline: 2px solid var(--gelb); outline-offset: 0; } .feld input:user-invalid, .feld textarea:user-invalid { border-color: #C0392B; } .feld textarea { resize: vertical; min-height: 110px; } .feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Hausnummer braucht deutlich weniger Platz als der Straßenname, PLZ weniger als der Ort. */ .feld-reihe-strasse { grid-template-columns: 3fr 1fr; } .feld-reihe-ort { grid-template-columns: 1fr 2fr; } .checkbox-gruppe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } /* Interessen als anklickbare Kacheln statt nackter Häkchen — größere Trefferfläche und man sieht die Auswahl auf einen Blick. */ .checkbox-kacheln { gap: 10px; } .checkbox-kacheln .checkbox { align-items: center; padding: 12px 14px; border: 1.5px solid var(--grau-200); border-radius: var(--radius-sm); background: var(--grau-50); font-weight: 550; transition: border-color .15s ease, background-color .15s ease; } .checkbox-kacheln .checkbox:hover { border-color: var(--gelb); } .checkbox-kacheln .checkbox:has(input:checked) { border-color: var(--gelb); background: var(--gelb-hell); } .checkbox-kacheln .checkbox input { margin-top: 0; } .checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: .94rem; font-weight: 450; cursor: pointer; margin: 0; } .checkbox input[type="checkbox"] { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--gelb-dunkel); flex: 0 0 auto; cursor: pointer; } .datenschutz { margin: 6px 0 14px; font-size: .88rem; color: var(--grau-700); line-height: 1.5; } .datenschutz:last-of-type { margin-bottom: 22px; } .datenschutz em { font-style: normal; font-weight: 650; color: var(--grau-500); } .btn-absenden svg { width: 20px; height: 20px; } /* Die drei Zusagen direkt unter dem Knopf — dort sitzt der letzte Zweifel */ .form-siegel { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .87rem; font-weight: 600; color: var(--grau-700); } /* Kreis und Haken getrennt, sonst kippt beim Drehen der ganze Kreis mit */ /* Haken als SVG statt aus gedrehten Rändern: bei 18 px werden die CSS-Varianten unsauber, das SVG bleibt in jeder Größe exakt. */ .form-siegel li { display: flex; align-items: center; gap: 7px; } .form-siegel svg { width: 18px; height: 18px; flex: 0 0 auto; } .form-siegel circle { fill: var(--gelb); } .form-siegel path { fill: none; stroke: var(--schwarz); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .form-hinweis { margin: 14px 0 0; font-size: .82rem; color: var(--grau-500); } /* Honeypot: aus dem Blickfeld, aber nicht display:none — manche Bots überspringen Felder, die sichtbar ausgeblendet sind. */ .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-fehler { margin: 0 0 20px; padding: 14px 16px; border: 1px solid #C0392B; border-left-width: 4px; border-radius: var(--radius-sm); background: #FDF1F0; color: #8B241A; font-size: .93rem; } /* ---------- Dankeseite ---------- */ .danke { text-align: left; } .danke-haken { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 26px; border-radius: 50%; background: var(--gelb); color: var(--schwarz); } .danke-haken svg { width: 34px; height: 34px; } .danke h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); } .danke-schritte { margin: 36px 0 0; padding: clamp(24px, 3vw, 32px); background: var(--grau-50); border: 1px solid var(--grau-200); border-radius: var(--radius); } .danke-schritte h2 { font-size: 1.2rem; margin-bottom: 20px; } .danke-schritte .check-list { margin: 0; } .danke-eilig { margin-top: 28px; font-size: 1rem; color: var(--grau-700); } .danke-eilig a { font-weight: 700; color: var(--schwarz); text-decoration: none; border-bottom: 2px solid var(--gelb); white-space: nowrap; } .form-hinweis span { color: var(--gelb-dunkel); } /* ======================================================================= FOOTER — Logo dezent, heller Grund, damit das JPG sauber einsteht ======================================================================= */ .site-footer { background: var(--grau-50); border-top: 3px solid var(--gelb); padding-top: clamp(40px, 5vw, 62px); } .footer-inner { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: clamp(30px, 4vw, 60px); padding-bottom: clamp(32px, 4vw, 50px); } /* "Dezent" wird allein über die Größe erreicht — das Logo selbst bleibt unverändert: volle Deckkraft, Originalfarben, Originalproportionen. */ .footer-logo { --logo-hoehe: clamp(48px, 6vw, 62px); display: block; height: var(--logo-hoehe); width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-left: calc(var(--logo-hoehe) * var(--logo-versatz) * -1); } .footer-claim { margin: 18px 0 0; font-size: .93rem; color: var(--grau-700); max-width: 40ch; } .footer-adresse { margin-top: 16px; font-style: normal; font-size: .93rem; line-height: 1.7; color: var(--anthrazit); } .footer-adresse a { text-decoration: none; border-bottom: 1px solid var(--grau-200); } .footer-adresse a:hover { border-bottom-color: var(--gelb); } /* Letzter Abschluss-Block statt Linkliste */ .footer-abschluss { align-self: start; padding: clamp(24px, 3vw, 32px); background: var(--weiss); border: 1px solid var(--grau-200); border-top: 4px solid var(--gelb); border-radius: var(--radius); } .footer-abschluss h3 { font-size: 1.25rem; margin-bottom: .4em; } .footer-abschluss > p { margin-bottom: 20px; font-size: .96rem; color: var(--grau-700); max-width: 46ch; } .footer-abschluss > .footer-erreichbar { margin: 16px 0 0; max-width: none; font-size: .9rem; color: var(--grau-500); } .footer-erreichbar a { font-weight: 650; color: var(--anthrazit); text-decoration: none; border-bottom: 1px solid var(--gelb); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-block: 20px; border-top: 1px solid var(--grau-200); font-size: .88rem; color: var(--grau-500); } .footer-bottom p { margin: 0; } .footer-legal { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; } .footer-legal a { text-decoration: none; color: var(--grau-700); } .footer-legal a:hover { color: var(--schwarz); } .footer-consent { padding: 0; border: 0; background: none; font: inherit; font-size: inherit; color: var(--grau-700); cursor: pointer; } .footer-consent:hover { color: var(--schwarz); } /* ======================================================================= FESTE AKTIONSLEISTE (nur Smartphone) Auf kleinen Displays ist der Abschluss sonst immer weggescrollt. ======================================================================= */ .aktionsleiste { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: saturate(150%) blur(10px); border-top: 1px solid var(--grau-200); box-shadow: 0 -6px 24px rgba(14,15,16,.10); transition: transform .25s ease, opacity .25s ease; } .aktionsleiste.versteckt { transform: translateY(110%); opacity: 0; pointer-events: none; } .aktionsleiste-tel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; padding: 14px 20px; border: 2px solid var(--schwarz); border-radius: var(--radius-sm); font-weight: 650; text-decoration: none; color: var(--schwarz); } .aktionsleiste-tel svg { width: 18px; height: 18px; } .aktionsleiste-cta { flex: 1 1 auto; } /* ======================================================================= EINWILLIGUNGSBANNER Beide Knöpfe absichtlich gleich gewichtet — ein optisch bevorzugtes "Annehmen" macht die Einwilligung angreifbar. ======================================================================= */ .consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--weiss); border-top: 3px solid var(--gelb); box-shadow: 0 -8px 40px rgba(14,15,16,.18); } .consent-inhalt { max-width: 760px; margin-inline: auto; padding: clamp(20px, 3vw, 28px) clamp(18px, 5vw, 40px); } .consent h2 { font-size: 1.1rem; margin-bottom: .5em; } .consent p { margin: 0 0 10px; font-size: .93rem; color: var(--grau-700); } .consent-klein { font-size: .85rem; color: var(--grau-500); } .consent-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .consent-knoepfe .btn { flex: 1 1 200px; padding: 14px 20px; font-size: .97rem; } /* Gleiche Fläche, gleiche Schriftgröße, nur unterschiedliche Farbe */ .consent-ablehnen { background: var(--weiss); color: var(--schwarz); border-color: var(--schwarz); } .consent-ablehnen:hover { background: var(--grau-100); } .consent-annehmen { background: var(--gelb); color: var(--schwarz); border-color: var(--gelb); } .consent-annehmen:hover { background: var(--gelb-dunkel); border-color: var(--gelb-dunkel); } /* Aktionsleiste weicht dem Banner aus */ .consent ~ .aktionsleiste { display: none; } /* ======================================================================= RECHTSTEXTE (Impressum, Datenschutz, AGB, Widerruf) ======================================================================= */ .rechtstext h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: .8em; } .rechtstext-stand { margin-top: -1.2em; margin-bottom: 2em; font-size: .88rem; color: var(--grau-500); } .rechtstext-warnung { padding: 18px 20px; margin-bottom: 2.5em; background: var(--gelb-hell); border-left: 4px solid var(--gelb); border-radius: var(--radius-sm); font-size: .93rem; line-height: 1.6; color: var(--anthrazit); } .rechtstext-liste { margin: 0 0 1em; padding-left: 22px; color: var(--grau-700); max-width: 70ch; } .rechtstext-liste li { margin-bottom: .5em; } .rechtstext-kasten { padding: 16px 20px; background: var(--grau-50); border: 1px solid var(--grau-200); border-radius: var(--radius-sm); max-width: 70ch; } .rechtstext-formular p { margin-bottom: 1.1em; } .rechtstext-hinweis { font-size: .9rem; color: var(--grau-500); } .rechtstext code { padding: 1px 5px; border-radius: 4px; background: var(--gelb-hell); font-size: .9em; } .rechtstext-knopf { padding: 0; border: 0; background: none; font: inherit; color: var(--schwarz); text-decoration: underline; text-decoration-color: var(--gelb); text-underline-offset: 3px; cursor: pointer; } .rechtstext-knopf:hover { text-decoration-color: var(--gelb-dunkel); } .rechtstext h2 { font-size: 1.15rem; margin: 2.2em 0 .5em; padding-left: 14px; border-left: 3px solid var(--gelb); } .rechtstext h3 { font-size: 1.02rem; margin: 1.8em 0 .4em; color: var(--anthrazit); } .rechtstext p { color: var(--grau-700); max-width: 70ch; } .rechtstext-liste .rechtstext-liste { margin-top: .5em; } .rueck { margin-top: 3em; padding-top: 20px; border-top: 1px solid var(--grau-200); font-weight: 600; } .rueck a { text-decoration: none; } /* ======================================================================= RESPONSIVE ======================================================================= */ @media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .hero-inner, .region-inner, .kontakt-inner { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .footer-inner { grid-template-columns: 1fr; } } @media (max-width: 820px) { html { scroll-padding-top: 96px; } .nav-toggle { display: grid; } .nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px clamp(18px, 5vw, 40px) 22px; background: var(--weiss); border-bottom: 1px solid var(--grau-200); box-shadow: var(--schatten-lg); } .nav.offen { display: flex; } .nav > a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--grau-100); font-size: 1.02rem; } .nav > a:not(.btn):hover { border-bottom-color: var(--grau-100); color: var(--grau-700); } .nav-cta { margin-top: 16px; } .kopf-telefon { padding: 14px 0; border-bottom: 1px solid var(--grau-100); } .header-inner { position: relative; min-height: 72px; } /* Aktionsleiste einblenden und Platz dafür schaffen */ .aktionsleiste { display: flex; } body { padding-bottom: 84px; } html { scroll-padding-bottom: 84px; } } @media (max-width: 680px) { body { font-size: 16px; } /* Logo bekommt auf kleinen Displays Vorrang vor dem Menü-Button, bleibt aber vollständig sichtbar (contain + auto-Breite). */ .logo { flex: 1 1 auto; max-width: calc(100% - 62px); } .logo img { --logo-hoehe: 58px; } .grid-4, .grid-3, .steps, .feld-reihe, .checkbox-gruppe { grid-template-columns: 1fr; } .steps { gap: 26px; } /* Einspaltig gestapelt stünde die Nummernscheibe allein über der Überschrift und wirkt dann wie ein großer schwarzer Punkt. Deshalb rückt sie hier neben den Titel und wird kleiner. */ .step { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: center; } .step-num { width: 30px; height: 30px; margin-bottom: 0; font-size: .85rem; grid-column: 1; grid-row: 1; } .step h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; } .step p { grid-column: 1 / -1; margin-top: 10px; } .kontakt-liste li { grid-template-columns: 1fr; gap: 4px; } .hero-actions .btn { width: 100%; } .cta-inner .btn { width: 100%; } .footer-abschluss .btn { width: 100%; } /* Aktionsleiste: beide Wege bleiben beschriftet, nur enger gesetzt */ .aktionsleiste { padding-inline: 12px; gap: 8px; } .aktionsleiste-tel { padding: 14px 16px; } .aktionsleiste-cta { padding-inline: 16px; font-size: .95rem; } } @media (max-width: 380px) { .logo img { --logo-hoehe: 50px; } } /* ======================================================================= DRUCK ======================================================================= */ @media print { .site-header, .nav-toggle, .cta-band, .kontakt-form, .skip-link, .aktionsleiste { display: none !important; } body { padding-bottom: 0; } body { font-size: 11pt; } .section { padding: 16pt 0; page-break-inside: avoid; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } } /* ======================================================================= Wirtschaftlichkeitsrechner auf der Startseite Der Rechner ist das Herzstück der Seite: er beantwortet die Frage, mit der Besucher herkommen, statt nur nach Kontaktdaten zu fragen. Deshalb bekommt er den stärksten Kontrast der ganzen Seite. ======================================================================= */ /* Die Hero-Überschrift trennt nur an den Stellen, die im Markup als weiche Trennung stehen. Die automatische Trennung ist hier zwar korrekt, wählt aber Silbenfugen statt der Wortfuge — „Photovolta-ik" statt „Photo-voltaik“. */ .hero h1 { hyphens: manual; } .hero-rechner-hinweis { margin: 14px 0 26px; font-size: .92rem; color: var(--grau-700); max-width: 46ch; } /* ---------- Rechner-Karte im Hero ---------- */ .hero-card-rechner { border-color: var(--gelb); } .hero-card-marke { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gelb-dunkel); } .hero-card-rechner .btn { margin-top: 20px; } .hero-card-rechner .card-note { margin-top: 12px; } /* ---------- Rechner-Band unter dem Hero ---------- */ .rechner-band { background: var(--schwarz); color: var(--weiss); padding: clamp(48px, 7vw, 88px) 0; } .rechner-band-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (max-width: 900px) { .rechner-band-inner { grid-template-columns: 1fr; } } .rechner-band h2 { color: var(--weiss); font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: .5em; } .rechner-band .lead { color: #C9CBCE; max-width: 48ch; } /* Das Aufzählungszeichen des Eyebrows ist auf hellem Grund gelb; auf schwarzem Grund braucht die Schrift selbst den Gelbton. */ .eyebrow-hell { color: var(--gelb); } .rechner-schritte { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 12px; } .rechner-schritte li { display: flex; align-items: center; gap: 12px; font-weight: 550; color: #E4E5E7; } .rechner-schritte span { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gelb); color: var(--schwarz); font-weight: 800; font-size: .9rem; display: grid; place-items: center; } .rechner-band-fuss { margin: 14px 0 0; font-size: .85rem; color: #9AA0A6; } /* ---------- Ergebnisvorschau ---------- */ .rechner-vorschau { background: #2A2230; border: 1px solid #3A3240; border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); } .rechner-vorschau-titel { margin: 0 0 16px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9AA0A6; } .rechner-vorschau-kacheln { display: grid; gap: 10px; } .rechner-vorschau-kachel { background: #201820; border-radius: var(--radius-sm); padding: 14px 16px; } .rechner-vorschau-haupt { background: var(--gelb); } .rechner-vorschau-label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9AA0A6; margin-bottom: 4px; } .rechner-vorschau-haupt .rechner-vorschau-label { color: #6B5200; } .rechner-vorschau-wert { display: block; font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 720; letter-spacing: -.02em; color: var(--weiss); } .rechner-vorschau-haupt .rechner-vorschau-wert { color: var(--schwarz); } .rechner-vorschau-fuss { margin: 14px 0 0; font-size: .78rem; color: #9AA0A6; } @media print { .rechner-band { display: none; } }