/* ============================================================ DESIGN TOKENS — Porzel Energie Extrahiert aus /Vorlage/index.html. Einzige Quelle für Farben, Größen, Fonts, Radien, Bewegung. Ausserhalb dieser Datei werden ausschliesslich diese Custom Properties verwendet. ============================================================ */ :root { /* ---------- Farbe: Primitives ---------- */ --green-900: #0F2E1D; /* Tiefengrün – Hero-Grund, dunkelste Fläche */ --green-700: #153C25; /* Trust-Leiste, Karten auf Grün */ --green: #1A4A2E; /* Primär – Tannengrün */ --green-600: #245F3C; /* Eyebrow-Text, Check-Icons */ --green-100: #E4EDE7; /* Icon-Kachel-Grund */ --yellow: #F4CB23; /* Akzent – Sonnengelb */ --yellow-600:#E0B70D; --grey-200: #F5F5F5; /* getönte Sektionsfläche */ --grey: #E9E9E9; --grey-500: #8B928D; --ink: #111814; --ink-60: #5A635D; --white: #FFFFFF; --signal: #57D68A; /* Status "erreichbar" */ --star: #F5A623; /* ---------- Farbkanäle ---------- Erlauben beliebige Deckkraft-Varianten der Markenfarben, ohne dass irgendwo ein zweiter roher Farbwert entsteht: rgb(var(--rgb-white) / .7) */ --rgb-white: 255 255 255; --rgb-black: 0 0 0; --rgb-ink: 17 24 20; --rgb-green: 26 74 46; --rgb-green-700: 21 60 37; --rgb-green-800: 20 60 38; --rgb-green-900: 15 46 29; --rgb-shade: 9 24 16; --rgb-yellow: 244 203 35; --rgb-signal: 87 214 138; --color-danger: #B03A2E; /* nur für Ablehnungs-Marker in Vergleichstabellen */ /* ---------- Farbe: Semantisch ---------- Sektionen setzen diese Variablen um (siehe .section--invert), statt eigene Farbwerte zu definieren. */ --bg: var(--white); --bg-muted: var(--grey-200); --bg-invert: var(--green-900); --text: var(--ink); --text-muted: var(--ink-60); --heading: var(--green); --text-invert: var(--white); --text-invert-muted: rgba(255, 255, 255, .76); --border: rgba(17, 24, 20, .09); --border-strong: rgba(17, 24, 20, .16); --border-invert: rgba(255, 255, 255, .14); --accent: var(--yellow); --focus: var(--yellow); /* ---------- Typografie ---------- */ --font: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif; --fs-body: 17px; --fs-h1: clamp(2.3rem, 3.7vw, 3.35rem); --fs-display: clamp(2.6rem, 5.2vw, 4.2rem); --fs-h2: clamp(2rem, 3.4vw, 2.9rem); --fs-h3: 1.25rem; --fs-h4: 1.06rem; --fs-lead: clamp(1.05rem, 1.35vw, 1.2rem); --fs-sub: clamp(1.04rem, 1.25vw, 1.16rem); --fs-small: .9rem; --fs-xs: .82rem; --fs-label: .78rem; /* Eyebrow / Versal-Label */ /* Ergänzende Stufen der Typo-Skala. Die Vorlage nutzte an vielen Stellen minimal abweichende Werte (.92 / .94 / .96 / .98rem); die sind hier auf eine saubere Stufung verdichtet. */ --fs-tag: .68rem; /* Tagline, Versal-Kleinstschrift */ --fs-2xs: .72rem; /* Gruppentitel, Siegel-Zusatz */ --fs-sm: .96rem; /* dichte Fliesstexte in Karten und Listen */ --fs-md: 1.05rem; /* hervorgehobener Fliesstext, Akkordeon-Titel */ --fs-lg: 1.14rem; /* Telefonnummer in der Navigation, Zitat */ --fs-xl: 1.28rem; /* Kontakt-Telefonnummer, Lead auf Personenseite */ --fs-2xl: 1.5rem; /* Rating-Zahl, Rechtstext-H2 */ --fs-3xl: 1.7rem; /* Mobile-Menü-Einträge */ --fs-4xl: 1.9rem; /* Kennzahl in der B2B-Liste */ --fs-map: 9px; /* Ortsbeschriftung in der Karten-SVG */ --fs-h1-sm: clamp(1.9rem, 3vw, 2.7rem); /* Ortsseiten, Rechtsseiten */ --fs-h2-sm: clamp(1.6rem, 2.6vw, 2.2rem); /* CTA-Sektion */ --fs-stat-sm: clamp(2rem, 4vw, 2.6rem); /* Mini-Rechner-Ergebnis */ --fs-stat: clamp(2.3rem, 3.6vw, 3.1rem); /* Kennzahl-Kachel */ --fs-stat-lg: clamp(2.6rem, 5vw, 3.6rem); /* Kennzahl-Band, Rechnerergebnis */ --fs-404: clamp(5rem, 16vw, 11rem); /* Fehlercode */ --lh-tight: 1.04; --lh-head: 1.1; --lh-snug: 1.3; --lh-body: 1.65; --lh-loose: 1.7; --ls-display: -.035em; --ls-head: -.03em; --ls-tight: -.02em; --ls-flat: -.01em; --ls-label: .18em; --ls-tag: .14em; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; --measure: 52ch; --measure-wide: 68ch; /* ---------- Raum ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 28px; --space-7: 36px; --space-8: 48px; --space-9: 64px; --space-10: 88px; --wrap: 1280px; --wrap-narrow: 780px; --card-max: 460px; /* Kontaktkarte, Ergebnis-Panels */ --gutter: 32px; --header-h: 88px; --header-h-stuck: 74px; --section-py: clamp(56px, 6.5vw, 96px); --section-py-compact: clamp(44px, 5vw, 68px); --grid-gap: clamp(40px, 5vw, 80px); --card-gap: clamp(14px, 1.6vw, 22px); /* ---------- Form ---------- Das Design ist durchgehend kantig. Die Radius-Tokens existieren, damit die Entscheidung an einer Stelle umkehrbar bleibt. */ --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-round: 50%; --bw: 1px; --bw-strong: 2px; --shadow-sm: 0 8px 30px -18px rgba(15, 46, 29, .35); --shadow-md: 0 12px 30px -18px rgba(0, 0, 0, .55); --shadow-lg: 0 30px 60px -30px rgba(0, 0, 0, .55); --shadow-mega: 0 40px 80px -30px rgba(15, 46, 29, .35), 0 8px 24px -12px rgba(15, 46, 29, .18); /* ---------- Bewegung ---------- */ --ease: cubic-bezier(.22, .61, .36, 1); --t: .28s var(--ease); --t-slow: .4s var(--ease); /* ---------- Bild ---------- Hintergrundfoto hinter den Grünflächen. --veil steuert die Deckkraft des Grüns: höher = Foto unauffälliger, nur als Textur wahrnehmbar. */ --shot: url('../img/textur-solaranlage.svg'); --veil: .965; --ratio-hero: 4 / 3.2; --ratio-wide: 16 / 9; --ratio-content: 4 / 3.4; --ratio-card: 16 / 10; --ratio-portrait: 3 / 4; --ratio-square: 1 / 1; /* ---------- Signature Move ---------- Die gelbe 28px-Linie vor jedem Eyebrow. Sie ist das Element, das alle Seiten als eine Website zusammenhält. */ --rule-w: 28px; --rule-h: 2px; } /* Dunkle Sektionen lösen die semantische Ebene um, statt eigene Farbwerte zu setzen. So bleibt jede Sektion tokengetrieben. */ .section--invert, .on-dark { --bg: var(--green); --bg-muted: var(--green-700); --text: var(--white); --text-muted: var(--text-invert-muted); --heading: var(--white); --border: var(--border-invert); --border-strong: rgba(255, 255, 255, .28); color: var(--text); } @media (max-width: 1024px) { :root { --gutter: 24px; --header-h: 76px; } } /* ------------------------------------------------------------------ Telefon: eigene Massstaebe, nicht nur eine kleinere H1 Nutzer-Vorgabe 07.09.2026 („erschlagend, nicht uebersichtlich genug"). Gemessen an der Balkonkraftwerk-Leitseite: 18,2 Bildschirme auf 390 px gegen 9,8 auf 1440 px. Sechs von zehn Sektionen lagen ueber 1,0 Viewporthoehen, Richtwert sind 0,6 bis 0,8. Die Ursache waren nicht die Inhalte - die sind gekuerzt -, sondern drei Masse, die vom Schreibtisch unveraendert mitkamen: 1. --fs-h2 hatte als Untergrenze 2rem (32px). Auf 390 px braucht eine Ueberschrift damit vier Zeilen und einen halben Bildschirm. 2. --section-py hielt 56 px oben UND unten. Bei zehn Sektionen sind das ueber 1.100 px reine Luft, ohne eine einzige Aussage. 3. --grid-gap hielt 40 px. Der Wert ist fuer NEBENeinander stehende Spalten gedacht; gestapelte Karten brauchen keinen Spaltenabstand, sondern einen Kartenabstand. Die Schriftgroesse des Fliesstextes bleibt bei 16 px - kleiner zu setzen waere die falsche Antwort. Gekuerzt wird der Leerraum, nicht die Lesbarkeit. ------------------------------------------------------------------ */ @media (max-width: 720px) { :root { --fs-body: 16px; --fs-h1: 2.1rem; --fs-h2: 1.62rem; --fs-h1-sm: 1.85rem; --fs-h2-sm: 1.5rem; --fs-display: 2.2rem; --fs-lead: 1rem; --fs-sub: 1rem; --section-py: 40px; --section-py-compact: 32px; --grid-gap: 22px; --space-9: 40px; --space-8: 32px; --space-7: 26px; } } @media (prefers-reduced-motion: reduce) { :root { --t: .01ms linear; --t-slow: .01ms linear; } }