/* ═══════════ MODERN CSS RESET ═══════════ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } body { min-height: 100vh; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } p { overflow-wrap: break-word; } video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } textarea { white-space: revert; } /* ═══════════ DESIGN-TOKENS (PROJEKT) ═══════════ Projekteigene Design-Tokens — diese Datei gehört dem Projekt und wird von Template-Updates nie überschrieben (Konfliktregel: immer --ours, docs/UPDATES.md). Engine-CSS (_base.css & Co.) referenziert nur die Variablen. Herkunft: Design-Import 2026-09-11 aus dem Claude-Design-Projekt „Energieausweis-verlaengern" (Bericht: reports/design-import-2026-09-11.md). WAS HIER STEHT, WIRD GEMESSEN — aber nur die Paare aus scripts/lib/kontrast.js. Die projekt-eigenen Token darunter sieht das Gate nicht; ihre Kontraste sind von Hand gerechnet und im Import-Bericht mit Wert ausgewiesen. Wer sie ändert, rechnet nach: Text ≥ 4,5:1, Bedienrahmen ≥ 3:1 (WCAG AA). Kein dunkles Theme: Der Entwurf zeichnet eines helles Design mit dunklen Abschnitten (Footer, Zielgruppen-Band, Preis-Zusammenfassung) — das sind Flächen, keine Theme-Umschaltung. Die dunklen Flächen führen eigene --color-on-dark-*-Token. */ :root { /* ── Marke ── */ --color-primary: #1f6b4a; /* 6,02:1 auf --color-bg · 6,44:1 auf --color-bg-alt */ --color-primary-hover: #145036; /* 8,81:1 auf --color-bg */ --color-on-primary: #ffffff; /* 6,44:1 auf --color-primary · 9,42:1 auf -hover */ /* ── Text ── */ /* Angebots-Knopf. Bewusst NICHT das Marken-Grün: Er soll sich vom Rest der Seite abheben, nicht in ihm verschwinden. Warmer Ton, damit er neben den grünen und roten Ergebniskästen als Handlung lesbar bleibt. */ --color-cta: #c2410c; /* 5,18:1 mit --color-on-primary */ --color-cta-hover: #9a3412; /* 7,31:1 mit --color-on-primary */ --color-text: #0f231c; /* 15,37:1 auf --color-bg */ --color-text-muted: #42544d; /* 7,53:1 auf --color-bg · 8,06:1 auf --color-bg-alt */ /* Kleine Labels, Brotkrume, Hinweiszeilen. Der Entwurf führt hier zwei hellere Töne (#6b7a74 = 4,21:1 und #8b9a94 = 2,75:1) — beide unter AA. Zusammengezogen auf den nächstliegenden Ton des Entwurfs, der besteht. Abweichung im Import-Bericht. */ --color-text-soft: #5c6e67; /* 5,06:1 auf --color-bg */ /* ── Flächen ── */ --color-bg: #f5f8f6; /* Seitengrund */ --color-bg-alt: #ffffff; /* Karten, abgesetzte Bänder */ --color-accent-bg: #e6f0ea; /* CTA-Band, Badge */ --color-section-bg: #e9f0ec; /* Abschnitt „Ausweisarten" */ --color-input-bg: #fbfdfc; /* ── Linien ── */ --color-border: #e4ebe7; /* Zierde: Karten, Trennstriche — ungemessen (WCAG 1.4.11 verlangt an Zierde nichts) */ --color-line: #eef3f1; /* feine Zeilentrenner in Tabellen */ --color-line-strong: #dde6e2; /* Trenner der Optionsliste */ /* Rahmen, die ein Bedienelement ERKENNBAR machen (Datumsfeld, Auswahlknöpfe des Preisrechners, Engine-Eingabefelder). WCAG 1.4.11 verlangt 3:1 gegen den Untergrund. Der Entwurfswert #cfdcd6 erreicht 1,32:1 und genügt nicht — nachgedunkelt. */ --color-border-control: #79918a; /* 3,15:1 auf --color-bg · 3,37:1 auf --color-bg-alt */ /* ── Dunkle Flächen (Footer, Zielgruppen-Band, Preis-Zusammenfassung) ── */ --color-surface-dark: #0f231c; --color-on-dark: #e8f0ec; /* 14,17:1 auf --color-surface-dark */ --color-on-dark-muted: #a9bdb5; /* 8,32:1 */ --color-on-dark-soft: #7fa294; /* 5,87:1 — Eyebrow-Labels auf Dunkel */ --color-on-dark-link: #c3d5cd; /* 10,74:1 */ --color-border-dark: #1e3a30; /* ── Zustände der Gültigkeitsprüfung ── */ --color-state-ok-bg: #e9f3ed; --color-state-ok-border: #c7e0d3; --color-state-ok-text: #1f6b4a; /* 5,68:1 auf -ok-bg */ --color-state-warn-bg: #fdf5e3; --color-state-warn-border: #f0dcae; --color-state-warn-text: #7a5610; /* 6,11:1 auf -warn-bg */ --color-state-bad-bg: #fdeceb; --color-state-bad-border: #f4c9c6; --color-state-bad-text: #a81f18; /* 6,39:1 auf -bad-bg */ /* Engine-Token, die dieselbe Tonlage brauchen (Danke-Seite, Formularfehler) */ --color-success: #1f6b4a; --color-error: #a81f18; --color-rating: #92400e; /* ── Effizienzklassen-Band (Startseite) ── Werte des Entwurfs, Textfarbe je Feld so gewählt, dass 4,5:1 steht. Zwei Abweichungen: A und B tragen dunklen statt weißen Text (weiß ergäbe 3,52:1 bzw. 2,47:1), F ebenso (2,70:1), und G ist von #d9542b auf #c4491f nachgedunkelt — dort bestand WEDER weißer (4,00:1) noch dunkler Text (4,11:1). */ --klasse-ap: #0f7a3d; --klasse-ap-text: #ffffff; /* 5,42:1 */ --klasse-a: #3d9b45; --klasse-a-text: #0f231c; /* 4,68:1 */ --klasse-b: #78b544; --klasse-b-text: #0f231c; /* 6,65:1 */ --klasse-c: #b8ce3f; --klasse-c-text: #25340f; /* 7,57:1 */ --klasse-d: #f2d63c; --klasse-d-text: #3a3010; /* 8,98:1 */ --klasse-e: #f2b03c; --klasse-e-text: #3a2810; /* 7,41:1 */ --klasse-f: #e8842f; --klasse-f-text: #0f231c; /* 6,08:1 */ --klasse-g: #c4491f; --klasse-g-text: #ffffff; /* 4,86:1 */ --klasse-h: #c22e26; --klasse-h-text: #ffffff; /* 5,66:1 */ /* ── Schrift ── Lokal ausgeliefert aus static/fonts/ (@font-face in _projekt.css), weil die CSP `default-src 'self'` fährt und der Entwurf sie vom Google-CDN zog. Beide Familien stehen unter der SIL Open Font License 1.1 — Selbsthosting ist ausdrücklich erlaubt. */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Archivo", "IBM Plex Sans", system-ui, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; --space-xl: 4rem; --container-max: 1180px; --container-padding: 28px; --radius: 0.375rem; --radius-lg: 0.5rem; --radius-card: 12px; --radius-pill: 99px; --shadow-card: 0 8px 24px rgba(15, 35, 28, 0.05); } /* Design-Token-Werte liegen in _tokens.css (projekteigen) — hier nur Engine-CSS. */ /* ═══════════ BODY ═══════════ */ body { font-family: var(--font-sans); color: var(--color-text); background-color: var(--color-bg); } /* ═══════════ DEUTSCHE TYPOGRAFIE ═══════════ */ /* Komposita („Grundstücksentwässerungsanlage") brauchen Silbentrennung in schmalen Spalten — hyphens: auto greift nur mit lang="de" am (base.njk, site.language). */ body { hyphens: auto; } /* Überschriften: ausgewogene Umbrüche, Trennung nur per weichem Trennstrich (­) */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; hyphens: manual; } p { text-wrap: pretty; } /* ═══════════ CONTAINER ═══════════ */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } /* ═══════════ PROSE ═══════════ */ .prose h1 { font-size: 2.25rem; line-height: 1.2; margin-block: var(--space-lg) var(--space-md); } .prose h2 { font-size: 1.75rem; line-height: 1.25; margin-block: var(--space-lg) var(--space-sm); } .prose h3 { font-size: 1.375rem; line-height: 1.3; margin-block: var(--space-lg) var(--space-sm); } .prose p { margin-block-end: var(--space-md); } .prose ul, .prose ol { margin-block-end: var(--space-md); padding-inline-start: var(--space-lg); } .prose li { margin-block-end: var(--space-xs); } .prose blockquote { border-inline-start: 3px solid var(--color-primary); padding-inline-start: var(--space-md); color: var(--color-text-muted); margin-block-end: var(--space-md); } .prose code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-bg-alt); padding: 0.125em 0.25em; border-radius: var(--radius); } .prose pre { background: var(--color-bg-alt); padding: var(--space-md); border-radius: var(--radius); overflow-x: auto; margin-block-end: var(--space-md); } .prose pre code { background: none; padding: 0; } /* ═══════════ HEADINGS ═══════════ */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; } /* ═══════════ LINKS ═══════════ */ a { color: var(--color-primary); text-decoration-skip-ink: auto; } a:hover { color: var(--color-primary-hover); } /* ═══════════ ACCESSIBILITY ═══════════ */ /* Sichtbarer Fokus für Tastaturnutzer — niemals ersatzlos entfernen (WCAG 2.4.7) */ :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ═══════════ UMGEBUNGS-LEISTE ═══════════ */ /* Nur auf Vorschau-Ständen im Markup (layouts/base.njk, `umgebung.istStaging`) — im Auslieferungszustand rendert die Regel gegen nichts. KEIN `min-block-size: 44px`. Die 44 px aus N26 gehören echten Tap-Zielen (WCAG 2.5.5); die Leiste ist ein Satz zum Lesen und kein Bedienelement. Ihre Höhe kommt deshalb aus dem Innenabstand, nicht aus einer Zahl der Nachbaraufgabe. FARBEN AUS BESTEHENDEN TOKEN, kein neues: `src/_includes/css/_tokens.css` gehört dem Projekt und wird von /template-update nie ersetzt (`--ours`, docs/UPDATES.md). Ein neues Token hier verlangte von JEDEM Bestandsprojekt eine Handanlegung, sonst bräche dessen Kontrast-Gate mit „Token fehlt" — genau der Weg, den N8 einmal gehen musste. `--color-error` trägt die Warnfarbe, die es schon gibt; das Paar steht in PAIRS (scripts/lib/kontrast.js) und wird gegen 4,5:1 gerechnet. NICHT `--color-primary`: Die Sprungmarke darunter füllt sich daraus. Blau auf Blau ließe sie im Fokus in der Leiste verschwinden — sie liegt mit `z-index: 100` über ihr und muss dort als eigene Fläche erkennbar bleiben. */ .umgebung-leiste { padding: var(--space-sm) var(--container-padding); background: var(--color-error); color: var(--color-on-primary); font-weight: 600; text-align: center; } /* ═══════════ SKIP LINK ═══════════ */ /* Tap-Ziel ≥ 44 px (WCAG 2.5.5, N26): gemessen 41,59 px. `inline-flex` blockifiziert hier wegen `position: absolute` zu `flex` — die Breite bleibt also weiterhin am Inhalt, nur die Höhe bekommt einen Boden und der Text seine Mitte. */ .skip-link { position: absolute; display: inline-flex; align-items: center; min-block-size: 44px; top: -100%; left: var(--space-md); background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius); z-index: 100; text-decoration: none; font-weight: 600; } .skip-link:focus { top: var(--space-sm); } /* ═══════════ BUTTON ═══════════ */ .btn { display: inline-block; padding: 0.75rem 1.5rem; background: var(--color-primary); color: var(--color-on-primary); font-size: 1rem; font-weight: 600; border: none; border-radius: var(--radius); cursor: pointer; text-decoration: none; transition: background 0.15s; } .btn:hover { background: var(--color-primary-hover); color: var(--color-on-primary); } /* ───────────────────────────────────────────────────────── Responsive Images — Base Styles Add these rules to your main stylesheet. Required for proper responsive behavior and CLS prevention. ───────────────────────────────────────────────────────── */ /* Core responsive image behavior + CLS prevention */ img { max-inline-size: 100%; block-size: auto; display: block; } /* Ensure wrapper doesn't break layout */ picture { display: block; } /* ───────────────────────────────────────────────────────── Hero Image — Optional utility class Apply to the hero or wrapping element. Use with eleventy:pictureattr:class="hero-image" on the . ───────────────────────────────────────────────────────── */ .hero-image { inline-size: 100%; } .hero-image img { inline-size: 100%; block-size: auto; object-fit: cover; } /* ───────────────────────────────────────────────────────── Content Images — Optional styling Images within the main content column. ───────────────────────────────────────────────────────── */ .content img, .prose img { border-radius: 4px; margin-block: 1.5rem; } /* ───────────────────────────────────────────────────────── Thumbnail / Card Images — Optional For card grid layouts with fixed aspect ratio. ───────────────────────────────────────────────────────── */ .card-image img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 16 / 9; } /* ═══════════ SITE HEADER + NAV ═══════════ */ .site-header { padding-block: var(--space-md); border-block-end: 1px solid var(--color-border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); } .site-header__logo { font-size: 1.25rem; font-weight: 700; color: var(--color-text); text-decoration: none; } .site-header__logo:hover { color: var(--color-primary); } /* Mobile: details/summary als Umschalter. Die Navigation steht als Geschwister NEBEN dem
(nav.njk), nicht darin: sie wird allein über `[open]` und die Media-Query ein-/ausgeblendet. Bewusst kein `display: contents` auf dem
— wie eine Engine den Inhalt eines geschlossenen
dabei behandelt, ist nicht verlässlich. Übernommener Befund (Audit 2026-07-24, Fund 7, Gegenprüfung): Chrome blendet ihn über ::details-content aus, die Hauptnavigation war ab 768px auf jeder Seite unsichtbar. Selbst nachgemessen wurde nicht diese Ursache, sondern das Ergebnis: das Rendering-Gate in .github/workflows/deploy.yml prüft im headless Chrome bei 1280px und 375px (zu- und aufgeklappt) die Bounding-Box von `.site-nav__list a`. Gegen den alten Aufbau schlägt es fehl, gegen diesen nicht. Firefox/Safari sind nicht nachgemessen — bei leerem
hängt dort nichts mehr am Engine-Verhalten für geschlossene Inhalte. Quelltextseitig zusätzlich abgesichert in scripts/tests/kontrast.test.js. */ .site-nav__toggle { display: block; } /* Tap-Ziel ≥ 44 px (WCAG 2.5.5, N26). Gemessen bei 375 px waren es 41,59 px — die Polsterung allein trägt die Fläche nicht über die Schwelle. `display: flex` ist hier kein Beiwerk: `min-block-size` allein ließe „Menü" oben in der gewachsenen Fläche kleben. Das bleibt trotz des geänderten `display` der Umschalter des
— im Browser bei 375 px auf- und wieder zugeklappt nachgeprüft. */ .site-nav__toggle > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-block-size: 44px; padding: var(--space-sm) var(--space-md); font-weight: 600; } .site-nav__toggle > summary::-webkit-details-marker { display: none; } /* Geschlossen versteckt, offen als volle Zeile unter dem Umschalter (.site-header .container ist ein Flex-Container mit flex-wrap: wrap). */ .site-nav { display: none; flex-basis: 100%; } .site-nav__toggle[open] ~ .site-nav { display: block; } .site-nav__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); } /* Tap-Ziel ≥ 44 px (WCAG 2.5.5, N26): gemessen 41,59 px. `flex` statt `block`, damit der Linktext in der gewachsenen Zeile mittig steht; die Fläche bleibt so breit wie zuvor, weil Flex-Container wie Blockboxen die volle Zeile einnehmen. */ .site-nav__list a { display: flex; align-items: center; min-block-size: 44px; padding: var(--space-sm) var(--space-md); color: var(--color-text); text-decoration: none; border-radius: var(--radius); } .site-nav__list a:hover, .site-nav__list a[aria-current="page"] { color: var(--color-primary); background: var(--color-bg-alt); } /* Desktop: 768px+ — Umschalter weg, Navigation immer sichtbar. Der zweite Selektor deckt den Fall ab, dass das
aus der Mobilansicht noch [open] ist (Vergrößern des Fensters). */ @media (min-width: 768px) { .site-nav__toggle { display: none; } .site-nav, .site-nav__toggle[open] ~ .site-nav { display: block; flex-basis: auto; } .site-nav__list { flex-direction: row; gap: var(--space-sm); } } /* ═══════════ SITE FOOTER ═══════════ */ .site-footer { margin-block-start: var(--space-xl); padding-block: var(--space-lg); border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.875rem; } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-lg); margin-block-end: var(--space-lg); } .site-footer__name { font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-xs); } .site-footer__address { font-style: normal; line-height: 1.6; } .site-footer__heading { font-weight: 600; color: var(--color-text); margin: 0 0 var(--space-sm); } .site-footer__contact, .site-footer__social, .site-footer__hours { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); } .site-footer__social { grid-auto-flow: column; justify-content: start; gap: var(--space-md); margin-block-start: var(--space-sm); } .site-footer__hours li { display: flex; justify-content: space-between; gap: var(--space-md); } .site-footer__hint { margin-block-start: var(--space-sm); } /* Unterstrichen, weil die Linkfarbe dieselbe ist wie die des Fließtexts: in den Kanal-Zeilen („Support: +49 …") stünde der Link sonst ununterscheidbar im Text (WCAG 1.4.1/F73, Audit 2026-07-24, Fund 78). */ .site-footer a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 0.15em; } .site-footer a:hover { color: var(--color-primary); } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block-start: var(--space-md); border-block-start: 1px solid var(--color-border); } .site-footer__links { display: flex; gap: var(--space-md); list-style: none; padding: 0; margin: 0; } /* WCAG 2.5.8: Klickziele ≥ 24 px — Links in Footer-Listen sind eigenständige Ziele */ .site-footer__contact a, .site-footer__social a, .site-footer__links a { display: inline-block; padding-block: var(--space-xs); } /* ═══════════ LEAD FORM ═══════════ */ .lead-form { max-width: 32rem; margin: var(--space-lg) auto; padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); } .lead-form__heading { margin: 0 0 var(--space-md); font-size: 1.5rem; } .lead-form__form { display: flex; flex-direction: column; gap: var(--space-md); } .lead-form__field { display: flex; flex-direction: column; gap: var(--space-xs); } .lead-form__field label { font-size: 0.875rem; font-weight: 600; } /* Der Rahmen ist hier keine Zierde: Das Feld trägt keine eigene Füllung und steht auf `.lead-form` (--color-bg). Ohne den Rahmen wäre nicht zu sehen, dass da ein Eingabefeld ist — genau das meint WCAG 1.4.11 mit „visual information required to identify user interface components" (3:1). Deshalb --color-border-control (N31). */ /* Tap-Ziel ≥ 44 px (WCAG 2.5.5, N26). Gemessen bei 375 px: 43,59 px — knapp, aber darunter. Keine Zentrierung nötig, die Felder zentrieren ihren Inhalt selbst; für das mehrzeilige textarea ist 44px ohnehin nur ein Boden, keine Höhe. Wirkt, weil _reset.css `box-sizing: border-box` setzt: die 44px enthalten Polsterung und Rahmen. */ .lead-form__field input, .lead-form__field textarea, .lead-form__field select { min-block-size: 44px; padding: var(--space-sm) 0.75rem; border: 1px solid var(--color-border-control); border-radius: var(--radius); font-size: 1rem; font-family: inherit; } .lead-form__field input:focus, .lead-form__field textarea:focus, .lead-form__field select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); } /* Inline-Validierung ohne JS: markiert erst nach Nutzer-Interaktion (WCAG 3.3.1) */ .lead-form__field input:user-invalid, .lead-form__field textarea:user-invalid { border-color: var(--color-error); outline-color: var(--color-error); } .lead-form__required-hint { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0; } .lead-form__privacy-note { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0; } .lead-form__privacy-note a { color: var(--color-primary); } .lead-form__submit { padding: 0.75rem 1.5rem; background: var(--color-primary); color: var(--color-on-primary); font-size: 1rem; font-weight: 600; border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.15s; } .lead-form__submit:hover { background: var(--color-primary-hover); } /* ═══════════ BLOG INDEX ═══════════ */ .post-list { padding-block: var(--space-xl); } .post-list__items { list-style: none; padding: 0; display: grid; gap: var(--space-md); margin-block-start: var(--space-md); } .post-list__item { padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .post-list__item a { text-decoration: none; color: inherit; } .post-list__title { margin-block-end: var(--space-xs); font-size: 1.25rem; } .post-list__meta { color: var(--color-text-muted); font-size: 0.875rem; margin: 0; } .post-list__excerpt { margin-block-start: var(--space-sm); margin-block-end: 0; } /* ═══════════ BLOG POST ═══════════ */ .post__header { margin-block-end: var(--space-lg); padding-block-end: var(--space-md); border-block-end: 1px solid var(--color-border); } .post__meta { color: var(--color-text-muted); font-size: 0.875rem; margin-block-start: var(--space-sm); } /* ═══════════ SEKTIONEN (Leistungen, Team, Kundenstimmen) ═══════════ */ .section { padding-block: var(--space-xl); } .section--alt { background-color: var(--color-bg-alt); } .section__lead { color: var(--color-text-muted); max-width: 40rem; margin-block-start: var(--space-sm); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-md); margin-block-start: var(--space-lg); list-style: none; padding: 0; } .card { padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg); } /* Karten-Headings tag-unabhängig auf Design-Größe festlegen: das adaptive kartenTag (h2 statt h3 ohne Sektions-h2, siehe a1a9401) darf die Optik nicht ändern. 1.25rem = bestehende Präzedenz der Standort-Übersichtskarten. */ .card :is(h2, h3) { font-size: 1.25rem; } /* ── Leistungen ── */ .leistung { display: flex; flex-direction: column; } .leistung--featured { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); } .leistung__name { margin: 0 0 var(--space-xs); } .leistung__desc { color: var(--color-text-muted); margin: 0 0 var(--space-md); } .leistung__price { font-size: 1.5rem; font-weight: 700; color: var(--color-text); } .leistung__price small { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--color-text-muted); } .leistung__features { list-style: none; padding: 0; margin: var(--space-md) 0 0; display: grid; gap: var(--space-xs); font-size: 0.9375rem; } .leistung__features li::before { content: "✓"; color: var(--color-success); margin-inline-end: var(--space-xs); } /* ── Kundenstimmen ── */ .testimonial { display: flex; flex-direction: column; gap: var(--space-sm); } .testimonial__quote { font-size: 1.0625rem; line-height: 1.6; margin: 0; } .testimonial__stars { /* Eigenes Token, damit ein dunkles Theme die Sterne mit umstellen kann — als Literal maß das Gate hier in jedem Theme den Light-Wert (N8). Im Auslieferungszustand ≥ 6,78:1 auf --color-bg und --color-bg-alt (WCAG 1.4.3), deutlich über dem AA-Mindestwert 4,5:1. */ color: var(--color-rating); letter-spacing: 0.1em; } .testimonial__author { color: var(--color-text-muted); font-size: 0.9375rem; } /* ── FAQ ── */ .faq__list { display: grid; gap: var(--space-sm); margin-block-start: var(--space-lg); max-width: 48rem; } .faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-md); background-color: var(--color-bg); } /* Tap-Ziel ≥ 44 px (WCAG 2.5.5, N26). Gemessen bei 375 px: 25,59 px bei einzeiliger Frage — die Höhe hing allein an der Zeilenhöhe und damit an der Fragelänge. Genau deshalb ist der Boden nötig: eine lange, umbrechende Frage kam zufällig über 44 px, eine kurze nie. `display: list-item` ist der Vorgabewert von und steht hier trotzdem ausgeschrieben — als Sperre. Dieses hat, anders als der Nav-Umschalter (`_nav.css:52` mit `list-style: none`), KEIN `list-style: none`: sein Aufklapp-Dreieck ▶ ist der einzige optische Hinweis, dass der Eintrag sich öffnet. Chrome rendert diesen Marker nur bei `display: list-item` — jeder andere Wert löscht ihn. Eine erste Fassung dieser Regel stand auf `display: flex` und tat genau das (Fix-Runde 1: gemessen textLeft 17,00 statt 33,94, Dreieck weg). Die Mitte holt deshalb `align-content`, das auf Blockcontainern dasselbe leistet, ohne den Marker anzufassen. Wer hier ein anderes `display` einträgt, nimmt der ganzen Fleet das Dreieck; scripts/tests/touch-ziele.test.js hält den Wert fest. */ .faq__question { display: list-item; align-content: center; min-block-size: 44px; font-weight: 600; cursor: pointer; } .faq__answer { margin: var(--space-sm) 0 0; color: var(--color-text-muted); } /* ── Team ── */ .team-member__photo { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; margin-block-end: var(--space-sm); } .team-member__name { margin: 0; } .team-member__role { color: var(--color-primary); font-size: 0.9375rem; margin: 0 0 var(--space-sm); } .team-member__bio { color: var(--color-text-muted); font-size: 0.9375rem; margin: 0; } /* Hinweiszeile unter Sektionen (z. B. § 19 UStG unter den Preisen) */ .section__hinweis { color: var(--color-text-muted); font-size: 0.875rem; margin-block-start: var(--space-md); } /* Sichtbare KI-Kennzeichnung (Art. 50 KI-VO) — generisch für alle Bild-Datenobjekte */ .ki-kennzeichnung { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-block-end: var(--space-sm); } /* ── Karte (components/karte.njk) ── */ /* Steht bewusst hier und nicht in einer eigenen, bedingt eingebundenen Datei wie _einbettung.css: Die Karte hängt an keinem Dienst (E9) und ist auf jeder Site verfügbar. Eine Bedingung in assets/style.njk wäre der Anfang genau der Kopplung, die die Komponente vermeidet. */ .karte { margin: 0 0 var(--space-lg); } /* Ein Kartenausschnitt kommt in der Breite, in der ihn jemand exportiert hat. `max-width` hält ihn im Container, `height: auto` verhindert dabei das Verzerren. Ein festes `aspect-ratio` wie in _einbettung.css wäre hier falsch: Dort ersetzt der Klick das Bild durch ein iframe, und nur gleiche Höhen lassen die Seite nicht springen — hier bleibt das Bild, was es ist. */ .karte__bild { display: block; max-width: 100%; height: auto; border-radius: var(--radius); } /* Die figcaption trägt hier die Handlung statt einer Bildunterschrift; ohne eigenen Abstand klebte der Knopf am Bildrand. */ .karte__aktion { margin-block-start: var(--space-md); } /* ═══════════ STICKY MOBILE CTA ═══════════ */ .cta-bar { display: none; } @media (max-width: 767px) { .cta-bar { position: fixed; inset-block-end: 0; inset-inline: 0; display: flex; gap: 1px; z-index: 90; background: var(--color-border); box-shadow: 0 -2px 8px rgb(0 0 0 / 0.08); padding-block-end: env(safe-area-inset-bottom); } /* Inhalt nicht von der Leiste verdecken */ body { padding-block-end: 3.5rem; } /* WCAG 2.4.11: fokussierte Elemente dürfen beim Tabben nicht hinter der Leiste landen */ html { scroll-padding-block-end: calc(3.5rem + env(safe-area-inset-bottom)); } } .cta-bar__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.875rem; background: var(--color-primary); color: var(--color-on-primary); text-decoration: none; font-weight: 600; } .cta-bar__btn:hover { background: var(--color-primary-hover); color: var(--color-on-primary); } .cta-bar__btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* Dunkles WhatsApp-Teal statt Brand-Grün. Der Text ist normaler Text (1rem/600, kein „large text"), also gilt WCAG 1.4.3 mit 4,5:1 — das frühere #128c7e erreichte nur 4,14:1. Beide Werte stehen als Paar in scripts/lib/kontrast.js und werden vom Build-Gate nachgerechnet (Audit 2026-07-24, Fund 10). Fremde Markenfarbe: sie folgt KEINEM Token und bleibt in jedem Theme dieselbe — deshalb setzt die Variante auch ihren Textton selbst statt das theme- abhängige --color-on-primary aus `.cta-bar__btn` zu erben (im dunklen Theme wäre das dunkel auf dunkel). Die Hover-Regel braucht das eigene `color` ebenfalls: `.cta-bar__btn:hover` ist spezifischer als diese Grundregel (N8). */ .cta-bar__btn--whatsapp { background: #0e7266; /* 5,81:1 zu #fff */ color: #fff; } .cta-bar__btn--whatsapp:hover { background: #0b5b52; /* 7,98:1 zu #fff */ color: #fff; } /* ═══════════ PROJEKT-CSS ═══════════ Design-Import 2026-09-11, Quelle: Claude-Design-Projekt „Energieausweis-verlaengern". Wird nach dem Engine-CSS gebündelt (src/assets/style.njk) und gewinnt deshalb bei gleicher Spezifität. Farben stehen als Token in _tokens.css — nur dort rechnet das Kontrast-Gate; hier steht ausschließlich var(--…). Der Entwurf arbeitet durchgehend mit Inline-Styles (Canvas-Export). Beim Import sind daraus Klassen geworden; die Namen folgen den Abschnitten des Entwurfs. */ /* ── Schriften, lokal (CSP: font-src 'self') ──────────────────────────────── Latin-Subset, SIL OFL 1.1. Archivo ist eine Variable Font (400–800) und deckt alle Auszeichnungsgrade mit einer Datei ab. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/archivo-variable.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-600.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); } /* ── Grundlagen ─────────────────────────────────────────────────────────── */ body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); } h1, h2, h3, .ec-display { font-family: var(--font-display); letter-spacing: -0.02em; } .ec-wrap { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .ec-section { padding-block: 56px; } .ec-section--tight { padding-block: 0 52px; } .ec-band { background: var(--color-bg-alt); border-block: 1px solid var(--color-border); } .ec-band--soft { background: var(--color-section-bg); } .ec-band--dark { background: var(--color-surface-dark); color: var(--color-on-dark); } /* Der Hero steht auf eigener Fläche, damit er sich vom Seitengrund abhebt. Die Kontraste auf #e9f0ec sind von Hand gerechnet — scripts/lib/kontrast.js führt diese Fläche nicht als Paar, das Gate sieht sie also nicht: --color-text 14,20:1 · --color-text-muted 6,96:1 · --color-text-soft 4,67:1 · --color-primary 5,56:1. Alle über den 4,5:1 der WCAG 1.4.3. Wer den Ton ändert, rechnet nach. */ .ec-band--hero { background: var(--color-section-bg); border-bottom: 1px solid var(--color-border); } /* Kleines Mono-Label über den Abschnittsüberschriften */ .ec-eyebrow { font: 11px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-soft); } .ec-band--dark .ec-eyebrow { color: var(--color-on-dark-soft); } .ec-h2 { margin: 12px 0 0; font: 600 30px/1.2 var(--font-display); letter-spacing: -0.02em; } .ec-h3 { margin: 0; font: 600 26px/1.25 var(--font-display); letter-spacing: -0.02em; } .ec-lead { margin: 12px 0 0; font-size: 16px; line-height: 1.7; color: var(--color-text-muted); max-width: 80ch; } .ec-prose { margin: 14px 0 0; font-size: 16px; line-height: 1.8; } .ec-prose + .ec-prose { margin-top: 12px; } /* ── Brotkrume ──────────────────────────────────────────────────────────── */ .ec-krume { padding-block: 16px 0; font-size: 13.5px; color: var(--color-text-soft); } /* Unterstrichen, anders als im Entwurf: Der Link steht mitten im Fließtext der Brotkrume und wäre ohne Unterstreichung nur an der Farbe zu erkennen — axe meldet das als „link-in-text-block" (WCAG 1.4.1, Nutzung von Farbe). */ .ec-krume a { text-decoration: underline; text-underline-offset: 2px; } .ec-krume a:hover { color: var(--color-primary-hover); } /* ── Kopfzeile ──────────────────────────────────────────────────────────── */ .ec-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); } .ec-header__inner { max-width: var(--container-max); margin-inline: auto; padding: 14px var(--container-padding); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .ec-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); } /* Wort-Bild-Marke, 3:1. Über die BREITE gesteuert, nicht über die Höhe: Der Schriftzug läuft zweizeilig, bei höhenbasierter Steuerung wird er als Erstes unleserlich. 182 px ergeben rund 61 px Höhe, 228 px rund 76 px — der Kopf bleibt damit sticky-tauglich. `height: auto` hält das Seitenverhältnis der vom Transform gesetzten Maße. Die erzeugten Breiten (header.njk) müssen mitwachsen: Die kleinste Variante soll über dem Doppelten der Anzeigebreite liegen, sonst wirkt das Logo pixelig. */ .ec-logo img { display: block; width: 182px; height: auto; } @media (min-width: 768px) { .ec-logo img { width: 228px; } } /* Punkt und Schriftzug leben weiter in der Fußzeile: Dort ist der Grund --color-surface-dark, und der Wortteil „Energieausweis" im Logo ist fast schwarzgrün — es wäre dort praktisch unsichtbar. */ .ec-logo__mark { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); flex: 0 0 auto; } .ec-logo__text { font: 600 17px var(--font-display); letter-spacing: -0.01em; } .ec-header__cta { margin-inline-start: auto; } @media (min-width: 768px) { .ec-header__cta { margin-inline-start: 0; } } /* Mobil: Umschalter sichtbar, Navigation zugeklappt. Ab 768px umgekehrt. Tap-Ziel ≥ 44px (WCAG 2.5.5) wie im Engine-Muster. */ .ec-nav-toggle > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-block-size: 44px; padding: var(--space-sm) var(--space-md); font-size: 14.5px; font-weight: 600; color: var(--color-text-muted); } .ec-nav-toggle > summary::-webkit-details-marker { display: none; } .ec-nav { display: none; flex-basis: 100%; order: 1; font-size: 14.5px; } .ec-nav-toggle[open] ~ .ec-nav { display: block; } .ec-nav ul { list-style: none; margin: 0; padding: 0 0 var(--space-sm); display: flex; flex-direction: column; gap: 2px; } .ec-nav a { display: block; min-block-size: 44px; align-content: center; color: var(--color-text-muted); text-decoration: none; } .ec-nav a:hover { color: var(--color-primary); text-decoration: underline; } .ec-nav a[aria-current="page"] { color: var(--color-primary); font-weight: 600; } @media (min-width: 768px) { .ec-nav-toggle { display: none; } .ec-nav, .ec-nav-toggle[open] ~ .ec-nav { display: flex; align-items: center; flex-basis: auto; order: 0; } .ec-nav ul { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 22px; padding: 0; } .ec-nav a { min-block-size: 0; } } /* ── Knöpfe ─────────────────────────────────────────────────────────────── */ .ec-btn { display: inline-block; text-decoration: none; text-align: center; background: var(--color-primary); color: var(--color-on-primary); padding: 11px 18px; border-radius: var(--radius-lg); font-weight: 600; } .ec-btn:hover { background: var(--color-primary-hover); color: var(--color-on-primary); } .ec-btn--gross { padding: 16px 26px; font-size: 16px; } .ec-btn--block { display: block; padding: 16px; font-size: 16px; } /* Der Angebots-Knopf ist die eine Handlung, die die Seite vorschlägt. Eigene Farbe, mehr Gewicht, Preis im Text — er soll nicht wie ein weiterer Link im Grün der Seite aussehen. */ .ec-btn--angebot { background: var(--color-cta); box-shadow: 0 6px 16px rgba(194, 65, 12, 0.22); letter-spacing: -0.01em; } .ec-btn--angebot:hover { background: var(--color-cta-hover); } .ec-pruefer .ec-btn--angebot { margin-top: 16px; padding: 17px 16px; font-size: 16.5px; } /* Zweitrangige Handlung neben dem Erstellen-Knopf: gleiche Form, ohne Fläche. Der Rahmen liegt als `inset`-Schatten innen, nicht als `border` — sonst wäre dieser Knopf 4 px höher als der gefüllte daneben und die Reihe stünde schief. --color-primary misst 6,02:1 auf --color-bg (siehe _tokens.css): Text weit über den 4,5:1 der WCAG 1.4.3, der Rahmen weit über den 3:1 der 1.4.11. */ .ec-btn--sekundaer { background: transparent; color: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-primary); } .ec-btn--sekundaer:hover { background: var(--color-accent-bg); color: var(--color-primary-hover); box-shadow: inset 0 0 0 2px var(--color-primary-hover); } /* Sprungziel des „Kostenlos prüfen"-Knopfes. Der Kopf ist sticky und rund 90 px hoch — ohne diesen Abstand verschwände die Abschnitts-Überschrift hinter ihm. WICHTIG: Diese Klasse gehört auf DASSELBE Element wie `id="pruefer"`. Stand sie am inneren Wrapper, scrollte der Browser trotzdem zum äußeren Abschnitt — der hat dann kein scroll-margin, und der Sprung landete wieder unter dem Kopf. */ .ec-pruefer-anker { scroll-margin-block-start: 96px; } .ec-link-weiter { font-size: 15px; font-weight: 600; text-decoration: none; } .ec-link-weiter:hover { text-decoration: underline; } /* ── Hero ───────────────────────────────────────────────────────────────── */ .ec-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 44px; align-items: start; padding-block: 56px 48px; } .ec-hero--eng { padding-block: 32px 48px; } .ec-hero h1 { margin: 18px 0 0; font: 800 clamp(34px, 4.4vw, 56px)/1.05 var(--font-display); letter-spacing: -0.025em; } .ec-hero--eng h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; } .ec-hero__satz { margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: var(--color-text-muted); max-width: 52ch; text-wrap: pretty; } .ec-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--color-accent-bg); color: var(--color-primary); padding: 7px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; } .ec-kennzahlen { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; list-style: none; padding: 0; } .ec-kennzahl { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 18px; } .ec-kennzahl__wert { display: block; font: 600 20px var(--font-display); } .ec-kennzahl__was { display: block; font-size: 13px; color: var(--color-text-soft); margin-top: 2px; } /* ── Karten ─────────────────────────────────────────────────────────────── */ .ec-karte { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 28px; } .ec-karte--weit { padding: 36px 40px; } .ec-karte--schwebend { box-shadow: var(--shadow-card); } /* In den schmalen Karten brach ein langes Kompositum („Modernisierungsempfehlungen") ohne Trennstrich mitten im Wort um. `hyphens: auto` steht hier, weil es nichts kostet — VERLASSEN kann man sich darauf aber nicht: Am 2026-09-13 hat Chrome das Wort trotz `lang="de"` nicht getrennt, auch nicht mit zurückgesetztem `overflow-wrap`. Die tragende Lösung ist deshalb ein weiches Trennzeichen (`­`) im Wort selbst, siehe bedarfsausweis.njk. Wer hier ein langes Kompositum einsetzt, prüft den Umbruch in einer schmalen Karte nach. */ .ec-karte :where(h3), .ec-karte__titel { font: 600 20px var(--font-display); margin: 0; hyphens: auto; } .ec-karte :where(p) { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--color-text-muted); } .ec-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 26px; list-style: none; padding: 0; } .ec-raster--breit { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .ec-raster--text { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 44px; margin-top: 0; } /* ── Gültigkeitsprüfung (Datumsrechner) ─────────────────────────────────── */ .ec-pruefer__titel { font: 600 19px var(--font-display); } .ec-pruefer__datum { border: 0; padding: 0; margin: 20px 0 0; } .ec-pruefer__datum > legend { padding: 0; font-size: 13px; font-weight: 600; color: var(--color-text-soft); } /* Tag | Monat | Jahr: drei eigenständige Felder mit eigener Beschriftung statt eines Kalenders. Der Pfeil ist ein eingebettetes SVG — die CSP erlaubt data: für Bilder, externe Dateien nicht. */ .ec-pruefer__felder { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.65fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; } .ec-datumsfeld { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ec-datumsfeld > label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-soft); } /* Der Pfeil liegt NEBEN dem Feld, nicht darauf: Ein background-image auf dem