/* ============================================================
NISIUS HEIZUNGSBAU – GEMEINSAMES STYLESHEET FÜR ALLE SEITEN
Diese Datei wird von jeder HTML-Seite im Ordner eingebunden
(). So muss
das Design nur an EINER Stelle gepflegt werden, nicht in jeder
einzelnen Seite separat. Reines CSS, kein JavaScript.
============================================================ */
/* ===================== 1) FARBPALETTE (als Kommentar dokumentiert) =====================
HINWEIS: Es werden bewusst KEINE CSS-Variablen (var(--xxx)) verwendet, sondern überall
feste Hex-Werte – in einem früheren Test wurden CSS-Variablen in der Anzeige-Umgebung
des Kunden nicht zuverlässig aufgelöst. Übersicht der verwendeten Farben zum Nachschlagen:
#155c4c Hauptgrün (Markengrün, Seiten-Grundhintergrund)
#0c3a30 dunkles Grün (Kontaktbereich, Überschriften auf weißen Karten)
#1f7a63 helleres Grün (abwechselnde Sektionen, Hover-Zustände)
#e8f2ee sehr helles Grün (Icon-Flächen auf weißen Karten)
#ffffff Weiß (zweite Markenfarbe, Kartenflächen, Text auf Grün)
#182420 Fast-Schwarz (Zitat-Text auf weißen Karten)
#5c6b64 gedämpftes Grau-Grün (sekundärer Text auf weißen Karten)
#dde6e1 helle Linie/Rahmenfarbe (Rahmen auf weißen Karten)
#00786a Vaillant-Markenfarbe (nur für das Partner-Badge)
*/
/* ===================== 1b) SCHRIFTART: LOKAL EINGEBUNDEN (Manrope) =====================
WICHTIG: Die Schrift wird bewusst NICHT mehr von fonts.googleapis.com geladen, sondern liegt
als echte Dateien in assets/fonts/. Grund: Beim Laden von Google Fonts über Googles eigenen
Server wird die IP-Adresse des Besuchers an Google (USA) übertragen – das ist ohne Einwilligung
des Nutzers rechtlich problematisch (in Deutschland gab es dafür bereits zahlreiche Abmahnungen).
Mit lokalem Hosting verlässt keine Nutzerdaten die eigene Domain, ein Cookie-Banner ist dafür
nicht nötig, und die Aussage "Google Fonts sind lokal installiert" in der Datenschutzerklärung
stimmt jetzt tatsächlich mit der Umsetzung überein. Jede Gewichtung ist eine eigene @font-face-
Regel, damit der Browser nur die tatsächlich benötigte Dateigröße pro Schriftschnitt laden muss. */
@font-face{
font-family:'Manrope'; /* Name, unter dem die Schrift im restlichen CSS angesprochen wird */
font-style:normal; /* kein Kursiv-Schnitt vorhanden/benötigt */
font-weight:400; /* Regular – Fließtext */
font-display:swap; /* zeigt sofort eine Ersatzschrift, tauscht ohne Layout-Sprung sobald Manrope geladen ist */
src:url('fonts/manrope-latin-400-normal.woff2') format('woff2'), /* modernes, kleines Format – wird von allen aktuellen Browsern genutzt */
url('fonts/manrope-latin-400-normal.woff') format('woff'); /* Fallback-Format für ältere Browser */
}
@font-face{
font-family:'Manrope';
font-style:normal;
font-weight:500; /* Medium – z. B. Navigationslinks */
font-display:swap;
src:url('fonts/manrope-latin-500-normal.woff2') format('woff2'),
url('fonts/manrope-latin-500-normal.woff') format('woff');
}
@font-face{
font-family:'Manrope';
font-style:normal;
font-weight:600; /* Semibold – z. B. Buttons, hervorgehobener Text */
font-display:swap;
src:url('fonts/manrope-latin-600-normal.woff2') format('woff2'),
url('fonts/manrope-latin-600-normal.woff') format('woff');
}
@font-face{
font-family:'Manrope';
font-style:normal;
font-weight:700; /* Bold – z. B. Zwischenüberschriften */
font-display:swap;
src:url('fonts/manrope-latin-700-normal.woff2') format('woff2'),
url('fonts/manrope-latin-700-normal.woff') format('woff');
}
@font-face{
font-family:'Manrope';
font-style:normal;
font-weight:800; /* Extrabold – große Überschriften (h1/h2/h3) */
font-display:swap;
src:url('fonts/manrope-latin-800-normal.woff2') format('woff2'),
url('fonts/manrope-latin-800-normal.woff') format('woff');
}
/* ===================== 1c) SCHRIFTART: LOKAL EINGEBUNDEN (Caveat, Schreibschrift) =====================
Zweite, dekorative Schriftart nur für den Ansprechpartner-Text in der Kopfzeile (siehe .nav-tagline
weiter unten). Caveat ist eine handschriftliche, leicht schräg laufende Schrift unter der SIL Open
Font License (kostenlos, uneingeschränkt kommerziell nutzbar, wie schon bei Manrope). Genau wie
Manrope liegen die Dateien direkt in assets/fonts/ und werden NICHT von Google-Servern nachgeladen –
es findet also auch hier keinerlei Verbindung zu Google statt. */
@font-face{
font-family:'Caveat';
font-style:normal;
font-weight:400; /* Regular */
font-display:swap;
src:url('fonts/caveat-latin-400-normal.woff2') format('woff2'),
url('fonts/caveat-latin-400-normal.woff') format('woff');
}
@font-face{
font-family:'Caveat';
font-style:normal;
font-weight:600; /* Semibold – für den etwas kräftigeren Auftritt im Header */
font-display:swap;
src:url('fonts/caveat-latin-600-normal.woff2') format('woff2'),
url('fonts/caveat-latin-600-normal.woff') format('woff');
}
/* ===================== 2) RESET / GRUNDEINSTELLUNGEN ===================== */
*{ /* wählt wirklich jedes Element aus */
box-sizing:border-box; /* Padding & Rahmen werden in die angegebene Breite eingerechnet, verhindert Layout-Überraschungen */
margin:0; /* entfernt Browser-Standardabstände */
padding:0; /* entfernt Browser-Standardinnenabstände */
}
html{ scroll-behavior:smooth; } /* sanftes Scrollen zu Sprungmarken innerhalb einer Seite – rein CSS, kein JavaScript nötig */
body{ /* Basis-Textformatierung für die gesamte Seite */
font-family:'Manrope', Arial, sans-serif; /* gewählte Google-Schrift, Arial als Sicherheitsnetz falls Font nicht lädt */
color:#ffffff; /* Standard-Textfarbe Weiß, da der Hintergrund grün ist (Kundenwunsch) */
background:#155c4c; /* Grundhintergrund im vollen Markengrün */
line-height:1.6; /* großzügiger Zeilenabstand für bessere Lesbarkeit */
-webkit-font-smoothing:antialiased; /* glättet Schrift auf WebKit-Browsern (Safari/Chrome/macOS) */
}
h1,h2,h3{ /* einheitliche Überschriften-Basis */
font-family:'Manrope', Arial, sans-serif; /* gleiche Schrift wie Fließtext für ruhiges, minimalistisches Gesamtbild */
font-weight:800; /* extra fett für klare Hierarchie */
letter-spacing:-0.01em; /* Buchstaben leicht enger stellen, wirkt hochwertiger/moderner */
color:#ffffff; /* Überschriften Weiß, da sie meist direkt auf grünem Hintergrund stehen (Ausnahmen siehe Kartenklassen unten) */
}
p{ margin:0; } /* Absätze ohne automatischen Rand, Abstände werden bewusst über Klassen gesetzt */
a{ color:inherit; text-decoration:none; } /* Links erben Textfarbe und verlieren die Standard-Unterstreichung */
img,svg{ display:block; max-width:100%; } /* verhindert unerwünschten Leerraum unter Bildern/SVGs und Überlaufen der Breite */
ul{ list-style:none; } /* entfernt Standard-Aufzählungspunkte, falls Listen genutzt werden */
button{ font-family:inherit; } /* Buttons übernehmen die Seitenschrift statt der Browser-Systemschrift */
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; } /* zentrierter Inhaltscontainer mit seitlichem Mindestabstand auf kleinen Screens */
.region{ color:#1f7a63; } /* dezente farbliche Hervorhebung des austauschbaren Regionsnamens in der Hero-Überschrift */
.visually-hidden{ /* Text nur für Screenreader, visuell unsichtbar – wichtig für Barrierefreiheit beim Hamburger-Button */
position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
/* ===================== 3) BUTTONS ===================== */
.btn{ /* Basisklasse für alle klickbaren Call-to-Action-Elemente */
display:inline-flex; /* erlaubt Ausrichtung von Text + evtl. Pfeil-Icon in einer Zeile */
align-items:center; /* vertikal zentrieren */
justify-content:center; /* horizontal zentrieren */
gap:8px; /* Abstand zwischen Text und Pfeil */
padding:15px 28px; /* großzügige Klickfläche, wichtig für Touch-Bedienung auf dem Handy */
border-radius:999px; /* Pillenform – ruhiger, minimalistischer als eckige Buttons */
font-weight:700; /* fett für gute Lesbarkeit als Handlungsaufforderung */
font-size:15.5px; /* etwas größer als Fließtext, damit der Button auffällt */
cursor:pointer; /* zeigt auf Desktop einen Klick-Cursor */
border:1.5px solid #FF8C29; /* jeder Button bekommt eine Umrandung in Markenorange, unabhängig von der Variante */
transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease; /* weiche Übergänge bei Hover */
}
.btn-primary{ background:#155c4c; color:#ffffff; box-shadow:0 10px 24px -8px rgba(21,92,76,.45); } /* Hauptbutton: grüner Hintergrund, weiße Schrift, dezenter Schatten in Markenfarbe, Rahmen orange (von .btn geerbt) */
.btn-primary:hover{ background:#1f7a63; transform:translateY(-2px); } /* beim Hover leicht anheben + helleres Grün */
.btn-ghost{ background:transparent; color:#ffffff; } /* transparenter Button für dunkle Flächen (Hero), Rahmen orange (von .btn geerbt) */
.btn-ghost:hover{ border-color:#ffb066; background:rgba(255,140,41,.12); } /* Hover: Rahmen aufgehellt, leichte orangene Fläche */
.btn-outline{ background:transparent; color:#0c3a30; } /* Sekundärbutton auf hellen Flächen, Rahmen orange (von .btn geerbt) */
.btn-outline:hover{ background:#FF8C29; color:#ffffff; } /* Hover füllt den Button mit dem Orangeton */
.btn-white{ background:#ffffff; color:#0c3a30; } /* weißer Button für Einsatz auf grünem Untergrund (Förderbanner), Rahmen orange (von .btn geerbt) */
.btn-white:hover{ background:#e8f2ee; } /* leicht grünliches Weiß beim Hover */
.btn-small{ padding:10px 20px; font-size:14px; } /* kompaktere Button-Variante, z. B. in der Navigationsleiste */
/* ===================== 4) HEADER / NAVIGATION ===================== */
.top-notice{ /* schmale, dezente Hinweisleiste ganz oben, nur auf der Startseite vorhanden */
background:#0c3a30; text-align:center; padding:8px 20px;
}
.top-notice a{ color:rgba(255,255,255,.85); font-size:13px; font-weight:600; text-decoration:none; } /* zurückhaltend, kein Button-Look */
.top-notice a:hover{ color:#ffffff; text-decoration:underline; } /* dezentes Hover ohne große Wirkung */
header{ /* der obere, fixierte Kopfbereich, identisch auf jeder Seite */
position:sticky; /* bleibt beim Scrollen oben am Bildschirm haften */
top:0; /* Haftpunkt ist der obere Bildschirmrand */
z-index:100; /* liegt über allen anderen Inhalten */
background:rgba(255,255,255,.75); /* durchscheinendes Weiß über dem grünen Seitenhintergrund – heller, weicher Nav-Grund statt eines harten Vollweiß */
backdrop-filter:blur(10px); /* weicher Unschärfe-Effekt für Inhalte, die unter dem Header hindurchscrollen */
border-bottom:1px solid #dde6e1; /* feine Trennlinie zum restlichen Inhalt */
}
.nav-inner{ /* Flex-Container für Logo, Menü und Buttons in einer Zeile */
display:flex; align-items:center; justify-content:space-between; /* Logo links, Rest rechts, vertikal zentriert */
max-width:1180px; margin:0 auto; padding:14px 24px; /* gleiche Breite/Abstände wie restlicher Inhalt */
position:relative; /* nötig, damit das mobile Dropdown-Menü sich daran ausrichten kann */
}
.logo{ display:flex; align-items:center; } /* Logo-Container, enthält das Original-Bild-Logo, verlinkt auf die Startseite */
.nav-logo-img{ height:46px; width:auto; } /* Original-Logo-Bild: feste Höhe, Breite skaliert automatisch im echten Seitenverhältnis */
.nav-tagline{ /* Fließtext zwischen Logo und Menü, jetzt zweizeilig (siehe im HTML), damit links und rechts mehr Luft bleibt */
font-family:'Caveat', cursive; /* handschriftliche, leicht schräge Schreibschrift statt Manrope, nur für diesen Akzent-Text */
font-weight:600; font-size:22px; line-height:1.05; /* etwas größer als Fließtext, da Schreibschriften bei kleiner Größe schlechter lesbar sind */
color:#5c6b64; text-align:center; white-space:nowrap; display:none; /* standardmäßig aus, siehe Media Query weiter unten */
}
.nav-tagline .region{ color:#155c4c; } /* Region-Teil dezent in Markengrün hervorgehoben, wie in der Hero-Überschrift */
@media (min-width:1150px){ /* nur auf ausreichend breiten Bildschirmen einblenden, damit nichts mit dem Menü zusammenstößt */
.nav-tagline{ display:block; }
}
@media (max-width:860px){ /* auf Mobilgeräten ist genug Platz zwischen Logo und Hamburger-Icon, da die Desktop-Menüpunkte hier durch das Hamburger-Menü ersetzt werden */
.nav-tagline{ display:block; font-size:15px; } /* auf Mobil ca. 1/3 kleiner als die 22px auf Desktop, wirkt sonst zu dominant neben dem kleineren Logo */
.nav-logo-img{ transform:scaleX(1.18); transform-origin:left center; } /* Logo wirkt in der Originalproportion auf Mobil gedrungen, hier bewusst horizontal gestreckt */
}
.nav-links{ display:flex; align-items:center; gap:28px; } /* horizontale Liste der Menüpunkte auf Desktop */
.nav-links a:not(.btn){ font-size:14.5px; font-weight:600; color:#5c6b64; } /* Stil der reinen Textlinks (ohne Button-Klasse) */
.nav-links a:not(.btn):hover{ color:#155c4c; } /* Link färbt sich beim Hover grün ein */
.nav-links a.active{ color:#155c4c; font-weight:800; } /* markiert den Menüpunkt der aktuell geöffneten Seite */
.nav-phone{ font-size:14px; font-weight:700; color:#0c3a30; white-space:nowrap; } /* Telefonnummer im Menü, bricht nicht um */
/* ---- Hamburger-Menü rein per CSS (keine Zeile JavaScript) ---- */
.nav-toggle-input{ display:none; } /* die eigentliche Checkbox ist unsichtbar, steuert per :checked nur das Menü */
.nav-toggle-label{ /* das sichtbare Hamburger-Icon (Label ist mit der Checkbox verknüpft) */
display:none; /* auf Desktop standardmäßig unsichtbar, erscheint erst per Media Query unten */
flex-direction:column; gap:5px; /* drei Balken übereinander mit kleinem Abstand */
cursor:pointer; padding:6px; z-index:110; /* liegt über dem Dropdown-Menü */
}
.nav-toggle-label .bar{ width:24px; height:2.5px; background:#0c3a30; border-radius:2px; transition:transform .2s ease, opacity .2s ease; } /* ein einzelner Hamburger-Balken */
.nav-toggle-input:checked ~ .nav-toggle-label .bar:nth-child(1){ transform:translateY(7.5px) rotate(45deg); } /* oberer Balken wird zum ersten "X"-Strich */
.nav-toggle-input:checked ~ .nav-toggle-label .bar:nth-child(2){ opacity:0; } /* mittlerer Balken verschwindet, wenn Menü offen ist */
.nav-toggle-input:checked ~ .nav-toggle-label .bar:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); } /* unterer Balken wird zum zweiten "X"-Strich */
@media (max-width:860px){ /* Regelblock, der nur unterhalb von 860px Breite (Tablet/Smartphone) gilt */
.nav-phone{ display:none; } /* Telefonnummer im Header ausblenden, um Platz zu sparen */
.nav-toggle-label{ display:flex; } /* Hamburger-Icon auf Mobilgeräten sichtbar machen */
.nav-links{ /* das Menü wird auf Mobilgeräten zu einem ausklappbaren Panel umgebaut */
position:absolute; /* löst sich aus dem normalen Fluss, um über dem Inhalt zu schweben */
top:100%; left:0; right:0; /* direkt unterhalb der Navigationsleiste, volle Breite */
flex-direction:column; /* Menüpunkte stehen untereinander statt nebeneinander */
align-items:flex-start; /* linksbündige Ausrichtung der Punkte im Panel */
gap:4px; /* kleiner Abstand zwischen den Einträgen */
background:#ffffff; /* deckendes Weiß, damit Inhalt darunter nicht durchscheint */
border-bottom:1px solid #dde6e1; /* Abschlusslinie des Panels */
padding:10px 24px 20px; /* Innenabstand des Panels */
box-shadow:0 16px 30px -18px rgba(0,0,0,.25); /* leichter Schatten, hebt Panel optisch ab */
max-height:0; /* Panel ist standardmäßig auf Höhe 0 zusammengeklappt */
overflow:hidden; /* Inhalt bei Höhe 0 komplett verstecken */
opacity:0; /* zusätzlich unsichtbar für einen weichen Übergang */
transition:max-height .3s ease, opacity .25s ease, padding .3s ease; /* animierter Übergang beim Öffnen/Schließen */
}
.nav-links a{ padding:10px 0; width:100%; border-bottom:1px solid #e8f2ee; } /* jeder Menüpunkt volle Breite mit dezenter Trennlinie, größere Tippfläche */
.nav-links a:last-child{ border-bottom:none; } /* letzter Eintrag ohne unnötige Trennlinie */
.nav-toggle-input:checked ~ .nav-links{ max-height:70vh; opacity:1; padding:14px 24px 24px; } /* bei angeklickter Checkbox: Panel öffnet sich sichtbar */
}
/* ===================== 5) HERO-BEREICH (nur Startseite) ===================== */
.hero{ /* großer, dunkelgrüner Einstiegsbereich auf der Startseite */
background:linear-gradient(165deg, #155c4c 0%, #0c3a30 100%); /* sanfter Grünverlauf, dient als Grundfarbe/Fallback hinter der Foto-Galerie */
color:#ffffff; /* heller Text auf dunklem Grund */
padding:76px 0 64px; /* großzügiger Innenabstand oben/unten */
position:relative; /* nötig, damit die absolut positionierte Foto-Galerie sich exakt an diesem Bereich ausrichtet */
overflow:hidden; /* schneidet die über den Rand hinauslaufende Foto-Leiste am Sektionsrand ab, kein horizontales Scrollen der ganzen Seite */
}
/* -------- Endlos-Foto-Galerie im Hero-Hintergrund (reines CSS, kein JavaScript) -------- */
.hero-gallery{ /* äußerer Rahmen der Foto-Galerie, liegt ganz hinten */
position:absolute; inset:0; /* füllt exakt die Fläche des .hero-Bereichs aus */
z-index:0; /* liegt unter dem Grün-Overlay und dem Text */
}
.hero-gallery-track{ /* der eigentliche "Filmstreifen" mit den Fotos, wird per Animation verschoben */
display:flex; /* Fotos nebeneinander in einer Reihe */
height:100%; /* Fotos füllen die volle Höhe des Hero-Bereichs aus */
width:max-content; /* Breite ergibt sich aus der Summe aller Fotos, nicht aus dem Elternelement */
animation:heroGalleryScroll 48s linear infinite; /* langsame, gleichmäßige, endlose Bewegung */
}
.hero-gallery-track img{ /* einzelnes Foto in der Galerie-Leiste */
height:100%; width:auto; /* Höhe füllt den Hero, Breite ergibt sich automatisch aus dem Bildformat */
object-fit:cover; /* Foto füllt seine Fläche ohne Verzerrung, überschüssiger Bildrand wird abgeschnitten */
flex-shrink:0; /* verhindert, dass Flexbox die Fotos zusammendrückt */
filter:saturate(.9) brightness(.85); /* leicht gedämpfte Fotos, damit der Text darüber ohne Ablenkung lesbar bleibt */
}
.hero-gallery-overlay{ /* halbtransparenter Grün-Schleier über den Fotos */
position:absolute; inset:0; /* liegt exakt über der Foto-Galerie */
z-index:1; /* über den Fotos, aber unter dem Text */
background:linear-gradient(165deg, rgba(21,92,76,.88) 0%, rgba(12,58,48,.93) 100%); /* gleicher Grünverlauf wie zuvor, jetzt als Schleier über echten Projektfotos statt als reine Farbfläche */
}
@keyframes heroGalleryScroll{ /* Bewegt den doppelt vorhandenen Foto-Streifen von rechts nach links und beginnt dann nahtlos von vorn */
from{ transform:translateX(0); } /* Startposition: erster Fotosatz sichtbar */
to{ transform:translateX(-50%); } /* Endposition: exakt um die Breite EINES Fotosatzes verschoben, da der Streifen doppelt vorhanden ist -> kein sichtbarer Sprung */
}
@media (prefers-reduced-motion:reduce){ /* Rücksicht auf Nutzer, die reduzierte Bewegungseffekte eingestellt haben */
.hero-gallery-track{ animation:none; } /* Galerie steht in diesem Fall einfach still, statt zu scrollen */
}
.hero-inner{ max-width:720px; position:relative; z-index:2; } /* begrenzt die Textbreite; position+z-index heben den Text sichtbar über Foto-Galerie und Grün-Overlay */
.eyebrow{ /* kleine Kategorie-Kennzeichnung oberhalb jeder Überschrift */
display:inline-flex; align-items:center; gap:8px; /* Punkt + Text in einer Zeile */
font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; /* dezent, aber gut lesbar */
margin-bottom:16px; /* Abstand zur folgenden Überschrift */
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; } /* kleiner Punkt vor dem Eyebrow-Text, per CSS erzeugt, kein Bild nötig */
.hero .eyebrow{ color:#9fd9c4; } /* helles Grün, gut lesbar auf dem dunklen Hero-Hintergrund */
.hero h1{ font-size:clamp(32px,4.4vw,50px); line-height:1.12; color:#ffffff; margin-bottom:20px; } /* clamp() sorgt für automatisch skalierende Schriftgröße zwischen Mobil und Desktop */
.hero .lede{ font-size:18px; color:#dcece5; max-width:560px; margin-bottom:32px; } /* Einleitungssatz, etwas heller/gedämpfter als die Überschrift */
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; } /* CTA-Buttons nebeneinander, brechen auf kleinen Screens um */
.hero-note{ font-size:13.5px; color:#a9d3c4; } /* kleine Vertrauens-Zeile unter den Buttons, bewusst als Text statt als bunte Badges (weniger "vollgepackt") */
/* ===================== 5b) SEITEN-KOPF (Leistungen/Ablauf/Modelle/Kontakt) ===================== */
.page-hero{ /* kompakterer, gleich gestalteter Titelbereich für alle Unterseiten außer der Startseite */
background:linear-gradient(165deg, #155c4c 0%, #0c3a30 100%); /* gleicher Grünverlauf wie der große Hero, für Wiedererkennung */
color:#ffffff; /* heller Text auf dunklem Grund */
padding:52px 0; /* etwas weniger hoch als der große Startseiten-Hero */
}
.page-hero .eyebrow{ color:#9fd9c4; } /* gleiche helle Akzentfarbe wie im großen Hero */
.page-hero h1{ font-size:clamp(28px,3.6vw,42px); line-height:1.15; margin-bottom:10px; max-width:680px; } /* etwas kleiner als die Startseiten-Überschrift */
.page-hero p{ color:#dcece5; max-width:620px; font-size:16px; } /* Kurzbeschreibung der jeweiligen Unterseite */
/* ===================== 6) VERTRAUENS-LEISTE (nur Startseite) ===================== */
.trust{ background:#1f7a63; padding:22px 0; } /* schmaler Streifen im helleren Grünton direkt unter dem Hero, sorgt für etwas Rhythmus in der grünen Fläche */
.trust .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; } /* Inhalte verteilen sich, brechen bei Bedarf um */
.trust-items{ display:flex; flex-wrap:wrap; gap:24px; } /* die Textpunkte der Vertrauensleiste */
.trust-items span{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:#ffffff; } /* einzelner Vertrauens-Punkt, weiß auf grünem Streifen */
.trust-items span::before{ content:"✓"; color:#ffffff; font-weight:800; } /* weißes Häkchen, damit es auf dem grünen Hintergrund sichtbar bleibt */
/* ---- Vaillant-Partner-Badge (wiederverwendbar in Vertrauensleiste & Footer), mit dem echten Original-Logo ---- */
.vaillant-badge{ display:inline-flex; align-items:center; gap:10px; } /* Logo-Bild + Zusatztext nebeneinander */
.vaillant-badge img{ height:24px; width:auto; flex-shrink:0; } /* Original-Vaillant-Logo in fester Höhe, Breite automatisch im echten Seitenverhältnis */
.vaillant-badge .vcap{ font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85); } /* kleiner Zusatztext neben dem Logo, leicht gedämpftes Weiß für Lesbarkeit auf Grün */
.footer-logo-img{ height:54px; width:auto; margin-bottom:10px; } /* volle Original-Logo-Version mit Tagline für den Footer, etwas größer als im Header */
/* ===================== 7) ALLGEMEINE SEKTIONS-REGELN ===================== */
section{ padding:80px 0; } /* einheitlicher vertikaler Abstand für alle Inhaltsblöcke, sorgt für ruhigen Rhythmus */
.alt-bg{ background:#1f7a63; } /* etwas kräftigerer Grünton für abwechselnde Sektionen – Rhythmus ohne harten Weiß-Kontrast */
.section-head{ max-width:620px; margin:0 auto 48px; text-align:center; } /* zentrierter, schmaler Einleitungsblock je Sektion – reduziert visuelle Unruhe */
.section-head h2{ font-size:clamp(26px,3vw,36px); line-height:1.2; } /* responsive Überschriftgröße */
.section-head p{ color:rgba(255,255,255,.82); font-size:16px; margin-top:14px; } /* erklärender Text unter der Überschrift, gedämpftes Weiß für Hierarchie auf grünem Grund */
.section-head .eyebrow{ color:#9fd9c4; justify-content:center; } /* Eyebrow in hellem Mintgrün, zentriert – gut lesbar auf dem dunkleren Grün */
/* ===================== 8) LEISTUNGEN / VORTEILE ===================== */
.benefit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; } /* responsives Rastergitter, passt sich automatisch der Bildschirmbreite an */
.benefit-card{ background:#ffffff; border:1px solid #dde6e1; border-radius:16px; padding:28px 24px; transition:transform .18s ease, box-shadow .18s ease; } /* schlichte Karte: nur dünner Rahmen, kein schwerer Schatten (minimalistisch) */
.benefit-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -20px rgba(12,58,48,.3); } /* leichtes Anheben + Schatten erst beim Hover, wirkt hochwertig statt aufdringlich */
.icon-chip{ width:44px; height:44px; border-radius:12px; background:#e8f2ee; display:flex; align-items:center; justify-content:center; margin-bottom:16px; } /* runde/eckige Icon-Fläche in dezentem Hellgrün */
.icon-chip svg{ width:22px; height:22px; } /* einheitliche Icon-Größe innerhalb der Chips */
.benefit-card h3{ font-size:17px; margin-bottom:8px; color:#0c3a30; } /* Kartentitel bewusst dunkel, da die Karte selbst weiß ist (Ausnahme vom globalen weißen Überschriften-Stil) */
.benefit-card p{ color:#5c6b64; font-size:14.5px; } /* Kartenbeschreibung, gedämpfte Farbe */
/* ===================== 9) ABLAUF / PROZESS-ZEITLEISTE ===================== */
.timeline{ max-width:760px; margin:0 auto; } /* schmalere Spalte für bessere Lesbarkeit der Schritte */
.tl-row{ display:grid; grid-template-columns:56px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.22); } /* Nummer links, Text rechts, helle Trennlinie auf grünem Grund */
.tl-row:last-child{ border-bottom:none; } /* letzter Schritt ohne überflüssige Linie */
.tl-num{ font-weight:800; font-size:22px; color:#ffffff; } /* auffällige weiße Schrittnummer, gut sichtbar auf dem grünen Hintergrund */
.tl-row h3{ font-size:17px; margin-bottom:5px; } /* Titel je Schritt */
.tl-row p{ color:rgba(255,255,255,.82); font-size:14.5px; } /* Beschreibung je Schritt, gedämpftes Weiß auf grünem Grund */
/* ===================== 10) MODELLE / PRODUKTE ===================== */
.product-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:22px; } /* responsives Produktraster */
.product-card{ background:#ffffff; border:1px solid #dde6e1; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; } /* Karte mit abgerundeten, überlaufsicheren Ecken */
.product-top{ background:linear-gradient(160deg, #155c4c, #0c3a30); padding:24px; color:#ffffff; position:relative; } /* grüner Kopfbereich je Produktkarte */
.product-top .tag{ position:absolute; top:14px; right:14px; background:rgba(255,255,255,.18); color:#ffffff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; } /* kleines Label z. B. "Bestseller" */
.product-top h3{ color:#ffffff; font-size:19px; margin-bottom:4px; } /* Produktname in Weiß auf dem grünen Kopf */
.product-top p{ color:#cfe6dd; font-size:13.5px; } /* Kurzbeschreibung im Kopfbereich, etwas heller/gedämpft */
.product-body{ padding:22px 24px; flex:1; display:flex; flex-direction:column; } /* restlicher Kartentext + Button unten ausgerichtet */
.product-body p{ color:#5c6b64; font-size:14.5px; margin-bottom:20px; flex:1; } /* Beschreibungstext füllt verfügbaren Platz, damit Buttons in einer Reihe enden */
/* ===================== 11) KUNDENSTIMMEN ===================== */
.testi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; } /* responsives Raster für Bewertungskarten */
.testi-card{ background:#ffffff; border:1px solid #dde6e1; border-radius:16px; padding:26px; } /* schlichte Bewertungskarte */
.testi-card .stars{ color:#155c4c; letter-spacing:2px; margin-bottom:12px; font-size:14px; } /* Sterne in Markengrün statt Gelb/Orange, bleibt im Farbkonzept */
.testi-card .quote{ font-size:14.5px; color:#182420; margin-bottom:16px; line-height:1.55; } /* Zitat-Text */
.testi-author{ display:flex; align-items:center; gap:10px; font-size:13px; color:#5c6b64; } /* Name + Avatar-Kürzel des Kunden */
.avatar{ width:34px; height:34px; border-radius:50%; background:#e8f2ee; color:#0c3a30; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; } /* Kreis mit Initiale statt echtem Foto (Datenschutz-freundlich) */
/* ===================== 12) FÖRDER-BANNER ===================== */
.foerderung{ /* auffälliger, aber schlichter Banner zur staatlichen Förderung */
background:#155c4c; color:#ffffff; border-radius:24px; /* eigene abgerundete Fläche innerhalb der Sektion */
padding:44px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; /* Inhalte verteilen sich, brechen auf kleinen Screens um */
}
.foerderung h2{ color:#ffffff; font-size:clamp(22px,2.6vw,30px); max-width:520px; } /* weiße Überschrift auf grünem Grund */
.foerderung .eyebrow{ color:#bfe6d9; } /* helles Grün für den Eyebrow-Text im Banner */
.foerderung .big{ font-size:52px; font-weight:800; line-height:1; text-align:right; } /* große "70%"-Zahl als visueller Anker des Banners */
/* ===================== 13) KONTAKT ===================== */
.contact{ /* dunkler Kontaktbereich mit zwei Spalten: Infos links, Formular rechts */
background:#0c3a30; color:#ffffff; border-radius:24px; padding:52px;
display:grid; grid-template-columns:1fr 1fr; gap:48px; /* zwei gleich breite Spalten auf größeren Screens */
}
.contact h2{ color:#ffffff; } /* weiße Überschrift auf dunklem Grund */
.contact .eyebrow{ color:#9fd9c4; } /* helles Grün für den Eyebrow im Kontaktbereich */
.contact > div > p{ color:#cfe6dd; margin-top:14px; font-size:15px; } /* Fließtext im Kontaktbereich, leicht gedämpftes Weiß-Grün */
.contact-info{ margin-top:26px; font-size:15px; font-weight:600; } /* Telefon/E-Mail-Block */
.contact-info a{ display:block; margin-top:6px; } /* Telefon und E-Mail jeweils in eigener Zeile */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; } /* zwei Formularfelder nebeneinander */
.contact input, .contact textarea{ /* einheitliches Erscheinungsbild aller Eingabefelder */
width:100%; padding:13px 15px; border-radius:10px; border:1px solid rgba(255,255,255,.25); /* dezenter, halbtransparenter Rahmen */
background:rgba(255,255,255,.08); color:#ffffff; font-family:inherit; font-size:14.5px; /* passende Schrift und dezenter, dunkler Feld-Hintergrund */
}
.contact input::placeholder, .contact textarea::placeholder{ color:#a9d3c4; } /* Platzhaltertext in gedämpftem Hellgrün */
.contact textarea{ grid-column:1/-1; min-height:96px; resize:vertical; } /* Nachrichtenfeld über volle Breite, nur vertikal vergrößerbar */
.form-note{ font-size:12px; color:#a9d3c4; margin-top:10px; } /* Hinweistext unterhalb des Formulars */
/* ===================== 14) FOOTER ===================== */
footer{ padding:40px 0 28px; color:rgba(255,255,255,.82); font-size:13.5px; } /* Fußbereich auf grünem Seitenhintergrund, Text in gedämpftem Weiß */
.footer-grid{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; border-top:1px solid rgba(255,255,255,.22); padding-top:24px; } /* verteilte Fußzeile mit heller Trennlinie nach oben */
.footer-links{ display:flex; gap:18px; } /* Impressum/Datenschutz nebeneinander */
.footer-links a:hover{ color:#ffffff; } /* volles Weiß beim Hover als dezente Hervorhebung */
.footer-logo-wrap{ display:inline-block; background:#ffffff; border-radius:12px; padding:10px 18px; flex-shrink:0; } /* helle "Karte" hinter dem Logo: das Original-Logo hat einen dunklen Farbverlauf und braucht einen hellen Untergrund, um lesbar zu bleiben; flex-shrink:0 verhindert, dass die Karte neben der Adresse zusammengedrückt wird */
.footer-brand{ display:flex; align-items:center; gap:16px; } /* neuer Wrapper: stellt Logo-Karte und Adresse nebeneinander statt Adresse als eigene Zeile darunter */
.footer-address{ font-style:normal; line-height:1.55; } /* address-Element ist per Browser-Standard kursiv, das heben wir hier auf; großzügigerer Zeilenabstand für die drei Adresszeilen */
/* ===================== 15) RESPONSIVE FEINSCHLIFF ===================== */
@media (max-width:860px){ /* Anpassungen speziell für Tablets/Smartphones */
section{ padding:56px 0; } /* etwas kompaktere Abstände auf kleinen Screens, damit weniger gescrollt werden muss */
.hero{ padding:52px 0 44px; } /* kompakterer Hero-Bereich auf Mobilgeräten */
.page-hero{ padding:40px 0; } /* kompakterer Seiten-Kopf auf Mobilgeräten */
.foerderung{ padding:30px; text-align:left; } /* weniger Innenabstand, linksbündig für bessere Lesbarkeit */
.foerderung .big{ text-align:left; font-size:42px; } /* kleinere Zahl, linksbündig statt rechtsbündig auf schmalen Screens */
.contact{ grid-template-columns:1fr; padding:28px; } /* Kontakt-Spalten werden auf Mobilgeräten übereinander gestapelt */
.form-row{ grid-template-columns:1fr; } /* Formularfelder auf Mobilgeräten untereinander statt nebeneinander */
.footer-grid{ flex-direction:column; align-items:flex-start; text-align:left; } /* Footer-Elemente untereinander auf schmalen Screens */
}
@media (max-width:420px){ /* auf sehr schmalen Smartphones wird es neben dem Logo eng für drei Adresszeilen */
.footer-brand{ flex-direction:column; align-items:flex-start; gap:10px; } /* Logo und Adresse hier ausnahmsweise wieder übereinander statt nebeneinander */
}