/* ═══════════ 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;
}

/* `hidden` gewinnt gegen jede display-Regel des Autors; until-found bleibt durchsuchbar. */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/* ═══════════ 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.

   Theme-Blöcke sind erlaubt. Das Kontrast-Gate (scripts/check-contrast.js)
   erkennt sie als eigenes Theme und rechnet jedes einzeln gegen WCAG AA durch:
   `@media (prefers-color-scheme: dark)`, `[data-theme="…"]` (auch als
   `:root[data-theme=…]`, `body[data-theme=…]` oder im CSS-Nesting als
   `&[data-theme=…]`) und der klassenbasierte Umschalter (`html.dark`, `.dark`).
   Was hier im `:root` steht, gilt in allen Themes — ein Theme-Block
   überschreibt nur, was er selbst deklariert. `@layer`/`@supports` klammern
   bloß und bilden kein eigenes Theme; `@media print` und
   `@media (forced-colors: …)` bleiben ganz außen vor.

   Für ein dunkles Theme gilt: JEDES gepaarte Token gehört überschrieben, auch
   `--color-on-primary` (Text auf der Primärfarbe: .btn/.skip-link, CTA-Leiste,
   Formular-Button) und `--color-rating` (Bewertungssterne). Beide waren früher
   feste Farben im Engine-CSS und damit theme-blind — deshalb sind sie hier
   Token (N8). Was ein Theme nicht überschreibt, erbt es aus `:root`: ein
   dunkler Hintergrund plus geerbtes `--color-rating: #92400e` fällt im Gate
   als Kontrast-Befund auf, nicht erst im Betrieb.

   Weiter fest im Engine-CSS steht nur der WhatsApp-CTA (_cta.css): fremde
   Markenfarbe samt eigenem weißem Text, in jedem Theme unverändert. */

:root {
  /* Palette aus dem Entwurf (design-entwurf/): warmes Papierweiß, Petrol, Orange-Akzent.
     Kein dunkles Theme, der Entwurf hat keins. Der dunkle Abschlussblock ist eine Fläche
     auf --color-primary, kein Theme. Paare der Projekt-Token: _config/kontrast-paare.js. */
  --color-primary: #0f3d4c;
  --color-primary-hover: #0a2c37;
  --color-on-primary: #ffffff;
  --color-text: #14181a;
  --color-text-muted: #5c6467;
  --color-bg: #faf9f7;
  --color-bg-alt: #f2efe9;
  --color-border: #d9dfe0;          /* Entwurf: rgba(15,61,76,.14–.16) */
  --color-border-control: #7f8689;  /* Rahmen der Auswahlknöpfe im Konfigurator; Entwurf .18 (1,4:1) */
  --color-success: #1f6b45;
  --color-error: #b3401a;
  --color-rating: #ad4c1c;

  /* Projekt-Token (nicht von der Engine gelesen) */
  --color-text-body: #3e474a;       /* Fließtext */
  --color-text-subtle: #686b69;     /* kleinste Schrift; Entwurf #8a8b86 (3,3:1) */
  --color-surface: #ffffff;         /* Karten, Konfigurator */
  --color-surface-kopf: #f8f5f0;    /* Tabellenkopf */
  --color-auswahl: #f1f3f4;         /* gewählte Option, Entwurf rgba(15,61,76,.06) */
  --color-border-leise: #e7eced;    /* Tabellenzeilen, Entwurf rgba(15,61,76,.1) */
  --color-border-zitat: #cbd3d5;    /* Randstrich, Entwurf rgba(15,61,76,.2) */
  --color-accent: #c25622;          /* Orange-Knopf mit weißer Schrift; Entwurf #d4622a (3,8:1) */
  --color-accent-text: #ad4c1c;     /* Orange als Schrift; Entwurf #d4622a (3,3–3,8:1) */
  --color-accent-deko: #d4622a;     /* Entwurfs-Orange für Balken, Striche, Spiegelstriche */
  --color-hinweis: #f7ede7;         /* Hinweiskasten, Entwurf rgba(212,98,42,.08) */
  --color-on-primary-muted: #cad4d8; /* Fließtext im dunklen Block, Entwurf rgba(255,255,255,.78) */
  --color-on-primary-rahmen: #879ea6; /* Rahmen des hellen Knopfs im dunklen Block */
  --color-platzhalter: #eae7df;     /* schraffierte Bildfläche */
  --color-platzhalter-rand: #c9c7c0;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  --container-max: 73.75rem;        /* 1180px */
  --container-padding: clamp(16px, 4vw, 40px);

  --radius: 4px;
  --radius-lg: 6px;
}

/* 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 <html> (base.njk, site.language). */
body {
  hyphens: auto;
}

/* Überschriften: ausgewogene Umbrüche, Trennung nur per weichem Trennstrich (&shy;) */
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 <picture> wrapper doesn't break layout */
picture {
  display: block;
}

/* ─────────────────────────────────────────────────────────
   Hero Image — Optional utility class
   Apply to the hero <img> or wrapping <picture> element.
   Use with eleventy:pictureattr:class="hero-image" on the <img>.
   ───────────────────────────────────────────────────────── */
.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 <details> (nav.njk), nicht
   darin: sie wird allein über `[open]` und die Media-Query ein-/ausgeblendet.
   Bewusst kein `display: contents` auf dem <details> — wie eine Engine den
   Inhalt eines geschlossenen <details> 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 <details> 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 <summary> bleibt trotz des geänderten `display` der Umschalter des
   <details> — 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 <details> 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 <summary> und steht hier trotzdem
   ausgeschrieben — als Sperre. Dieses <summary> 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 */
.section__hinweis {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-block-start: var(--space-md);
}

/* ── 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);
}

/* ── Hinweisseiten (src/pages/: 404, Danke) ── */

/* Klassen statt Inline-Styles: _projekt.css trifft sie so ohne !important. */
.hinweis-seite {
  text-align: center;
  padding-block: var(--space-xl);
}

.hinweis-seite__erfolg {
  color: var(--color-success);
}

/* ═══════════ 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;
}







/* ═══════════ EINWILLIGUNGS-BANNER (CookieConsent v3) ═══════════
   Bindet die Custom Properties der Bibliothek an die Design-Token dieses Projekts. Wird
   nur eingebunden, wenn ein banner-pflichtiger Dienst konfiguriert ist (assets/style.njk).

   Ausschließlich Design-Token, kein einziges Farb-Literal: Ein Literal bliebe in jedem
   Theme derselbe Wert, und scripts/check-contrast.js liest ausschließlich _tokens.css —
   diese Datei bekommt es NIE zu sehen (N8). Bewacht wird sie von
   scripts/tests/consent-einbindung.test.js — als einzigem Wächter über Flächen, Ränder,
   Schatten und Füllungen. Textfarben deckt zusätzlich scripts/tests/kontrast.test.js ab
   („N8: keine Engine-Regel setzt eine Textfarbe fest — verzeichnisweit geprüft"): der
   Test geht über src/_includes/css/ und nimmt nur _tokens.css und _print.css aus, diese
   Datei also nicht. Er liest aber ausschließlich `color:`-Deklarationen.

   Gesetzt wird auf #cc-main, obwohl die Bibliothek ihre Werte auf :root deklariert. Das
   ist Absicht und tragend: #cc-main ist der Wurzelknoten beider Modale, unsere Werte
   liegen damit NÄHER am Element und gewinnen — auch gegen den mitgelieferten
   Dunkelmodus (.cc--darkmode auf <html>). Die Seite bestimmt das Aussehen des Banners,
   nicht die Bibliothek.

   Daraus folgt die Regel, die diese Datei lang macht: ABGELEITETE Variablen der
   Bibliothek müssen EBENFALLS gesetzt werden. `--cc-btn-primary-border-color:
   var(--cc-btn-primary-bg)` steht auf :root und wird DORT aufgelöst — gegen den
   Bibliotheks-Wert, nicht gegen unseren. Vererbt wird das fertige Ergebnis, und
   #cc-main bekommt es unverändert. Im Browser gemessen: Ohne die Zeilen unten trugen die
   Knöpfe einen Rand in #30363c (Vorgabe der Bibliothek) um eine Fläche in der
   Markenfarbe. Der Test rechnet die Kette deshalb aus der ausgelieferten Bibliothek nach
   und verlangt für JEDE farbtragende Variable eine Bindung — nicht nur für die, deren
   Vorgabewert ein Literal ist. */

#cc-main {
  /* ── Die Dark-Pattern-Sperre. Nicht Kosmetik, sondern der Kern ──
     Ablehnen und Akzeptieren teilen sich dieselbe Optik. Nicht „ähnlich", sondern
     DIESELBEN Token: Ein grauer Ablehnen-Button neben einem farbigen Akzeptieren-Button
     ist die häufigste Beanstandung der Aufsichtsbehörden. Weil beide Knöpfe hier dieselben
     Werte erben, KANN die Gestaltung nicht auseinanderlaufen — equalWeightButtons regelt
     nur Größe und Anordnung, die Farbe liegt hier.

     Die Bibliothek nimmt bei equalWeightButtons: true die Klasse `--secondary` vom
     Ablehnen-Knopf, benutzt die Sekundär-Token also gar nicht mehr für ihn. Die
     Gleichsetzung bleibt trotzdem stehen: Sie ist die zweite Sperre, falls die Option
     einmal fällt oder eine neue Version die Klasse anders vergibt. */
  --cc-btn-primary-bg: var(--color-primary);
  --cc-btn-primary-color: var(--color-on-primary);
  --cc-btn-primary-border-color: var(--color-primary);
  --cc-btn-secondary-bg: var(--color-primary);
  --cc-btn-secondary-color: var(--color-on-primary);
  --cc-btn-secondary-border-color: var(--color-primary);
  --cc-btn-primary-hover-bg: var(--color-primary-hover);
  --cc-btn-primary-hover-color: var(--color-on-primary);
  --cc-btn-primary-hover-border-color: var(--color-primary-hover);
  --cc-btn-secondary-hover-bg: var(--color-primary-hover);
  --cc-btn-secondary-hover-color: var(--color-on-primary);
  --cc-btn-secondary-hover-border-color: var(--color-primary-hover);

  /* Flächen und Text. --cc-primary-color ist der Fließtext des Modals (nicht die
     Markenfarbe — die Bibliothek benennt es unglücklich), --cc-secondary-color die
     Beschreibungen. */
  --cc-bg: var(--color-bg);
  --cc-primary-color: var(--color-text);
  --cc-secondary-color: var(--color-text-muted);
  --cc-separator-border-color: var(--color-border);
  /* Links im Modal (Datenschutz/Impressum in der Fußzeile). Ohne diese Zeile erbten sie
     die Vorgabe der Bibliothek — ein Dunkelgrau, das in keinem Theme mitwandert. */
  --cc-link-color: var(--color-primary);
  /* Scrollbalken der langen Kategorie-Liste. */
  --cc-webkit-scrollbar-bg: var(--color-border);
  --cc-webkit-scrollbar-hover-bg: var(--color-text-muted);

  /* Kategorie-Blöcke im Präferenz-Modal. Der Hover-Zustand ändert bewusst die RANDFARBE
     und nicht die Fläche: für eine zweite Flächenfarbe gibt es kein Token, und ein
     Literal wäre theme-blind — genau das, was diese Datei ausschließt. */
  --cc-cookie-category-block-bg: var(--color-bg-alt);
  --cc-cookie-category-block-border: var(--color-border);
  --cc-cookie-category-block-hover-bg: var(--color-bg-alt);
  --cc-cookie-category-block-hover-border: var(--color-primary);
  --cc-cookie-category-expanded-block-hover-bg: var(--color-bg-alt);
  --cc-section-category-border: var(--color-border);

  /* Schalter. Der Haken im Knopf ist in der Bibliothek mit der PILLENFARBE gestrichen und
     sitzt auf dem Knopf — an-Pille auf an-Knopf ist deshalb dasselbe Paar wie Text auf
     der Primärfarbe, aus-Pille auf aus-Knopf dasselbe wie gedämpfter Text auf dem
     Hintergrund. Beide Paare misst das Kontrast-Gate bereits. */
  --cc-toggle-on-bg: var(--color-primary);
  --cc-toggle-on-knob-bg: var(--color-on-primary);
  --cc-toggle-off-bg: var(--color-text-muted);
  --cc-toggle-off-knob-bg: var(--color-bg);
  /* Der unabwählbare Schalter („necessary") bleibt zurückhaltend — er ist deaktiviert,
     und ein kräftiger Schalter, den niemand bewegen kann, wäre eine falsche Zusage.

     BEWUSST OHNE PAAR in scripts/lib/kontrast.js. --color-border misst 1,18:1 auf der
     Fläche des Kategorie-Blocks (--color-bg-alt); das sähe nach einer Lücke aus, ist
     aber keine: WCAG 1.4.11 nimmt inaktive Bedienelemente ausdrücklich aus, und die
     Bibliothek rendert genau diesen Schalter als `disabled`. Messweg, damit es
     nachprüfbar bleibt statt geglaubt: in node_modules/vanilla-cookieconsent/dist/
     cookieconsent.umd.js steht `o.readOnly&&(d.disabled=!0)`, wobei `d` die Checkbox
     des Schalters ist. Ein 3:1-Paar dafür wäre eine erfundene Anforderung — wer eins
     nachtragen will, muss zuerst diesen Befund widerlegen.

     NICHT abgedeckt und offen: Die Bibliothek streicht mit DIESEM Token auch den
     Scrollbalken-Daumen der Kategorie-Liste (`::-webkit-scrollbar-thumb { background:
     var(--cc-toggle-readonly-bg) }`). Ein Scrollbalken ist ein aktives Bedienelement;
     dort greift die Ausnahme nicht. Beide hängen am selben Bibliotheks-Token, sie sind
     nur gemeinsam zu ändern — deshalb hier vermerkt statt still mitgezogen. */
  --cc-toggle-readonly-bg: var(--color-border);
  --cc-toggle-readonly-knob-bg: var(--color-bg);
  --cc-toggle-readonly-knob-icon-color: var(--color-border);

  /* Fußzeile des Banners (Links auf Datenschutz und Impressum). Ohne diese Zeilen erbte
     sie --cc-btn-secondary-bg, also seit oben die Markenfarbe — mit gedämpftem Text
     darauf, einem Paar, das das Kontrast-Gate nicht kennt. */
  --cc-footer-bg: var(--color-bg-alt);
  --cc-footer-color: var(--color-text-muted);
  --cc-footer-border-color: var(--color-border);

  /* Form. Radien und Schrift kommen aus denselben Token wie der Rest der Seite, damit das
     Banner nicht wie ein Fremdkörper wirkt. */
  --cc-font-family: var(--font-sans);
  --cc-modal-border-radius: var(--radius-lg);
  --cc-btn-border-radius: var(--radius);

  /* Nicht gesetzt, jeweils mit Grund:
     --cc-overlay-bg          Der Abdunkler hinter dem Präferenz-Modal trägt keinen Text
                              und hat damit kein Kontrastpaar. Jedes Token wäre hier
                              deckend und verdeckte die Seite statt sie abzudunkeln; eine
                              rgba()-Angabe wäre ein Farb-Literal. Der Vorgabewert der
                              Bibliothek (schwarz, 65 %) wirkt in hellem wie dunklem Theme.
                              Als einzige Ausnahme im Test benannt.
     --cc-toggle-enabled-icon-color, --cc-toggle-disabled-icon-color
                              In 3.1.0 von keiner Regel gelesen — tote Variablen. Der Test
                              prüft das nach, statt der Liste hier zu glauben.
     --cc-cookie-category-expanded-block-bg
                              `transparent`: keine Farbe, sondern die Fläche dahinter.
     --cc-z-index, --cc-modal-margin, --cc-modal-transition-duration, --cc-pm-toggle-
     border-radius: keine Farben, Vorgabewerte passen. */
}

/* Links im Banner sind dauerhaft unterstrichen, nicht erst beim Überfahren. Die
   Bibliothek zeichnet den Strich als Hintergrundverlauf und blendet ihn von
   `background-size: 0 1px` auf `100% 1px` ein — im Ruhezustand unterscheidet den Link
   also nur seine Farbe vom Text. Genau das ist für Farbfehlsichtige kein Unterschied
   (WCAG 1.4.1). Keine Farbangabe: der Strich zeichnet in `currentColor`. */
#cc-main .cm__footer .cc__link {
  background-size: 100% 1px;
}

/* Der Zähler-Badge nimmt in der Bibliothek die Fläche des Sekundär-Knopfes, behält aber
   den gedämpften Text. Seit die Sekundär-Fläche oben die Markenfarbe trägt, stünde dort
   --color-text-muted auf --color-primary — ein Paar, das kein Gate misst und das in
   keinem Theme geprüft ist. Der Badge ist kein Knopf; er bekommt seine eigene Fläche. */
#cc-main .pm__badge {
  background: var(--color-bg-alt);
}

/* Dasselbe für den Aufklapp-Pfeil vor jeder Kategorie: Sein Kreis erbt die
   Readonly-Fläche, seine Linien erben die Sekundär-Textfarbe — also seit oben die Farbe
   FÜR die Markenfläche, hier aber auf hellem Grau. Im Browser gemessen war der Pfeil
   dadurch weiß auf #e2e8f0, also praktisch unsichtbar.

   Die Selektoren sind ZEICHENGLEICH die der Bibliothek, und das ist tragend: Ein kürzeres
   `#cc-main .pm__section-arrow` (1,1,0) verliert gegen ihr `#cc-main
   .pm__section--expandable .pm__section-arrow` (1,2,0) — unabhängig von der Reihenfolge.
   Genau daran ist der erste Anlauf gescheitert. Gleiche Spezifität genügt, weil
   /assets/style.css NACH dem Stylesheet der Bibliothek eingebunden wird (base.njk). */
#cc-main .pm__section--expandable .pm__section-arrow {
  background: var(--color-bg-alt);
}

#cc-main .pm__section--expandable .pm__section-arrow svg {
  stroke: var(--color-text);
}




/* Hinweis an der Stelle des Bestellformulars, solange keine Einwilligung vorliegt
   (components/bestellformular.njk, assets/bestellformular.njk). Nur Token, kein
   Farb-Literal (Kontrast-Gate). */
.bestellformular:focus {
  outline: none;
}

.bestellformular__hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-block: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
}

.bestellformular__hinweis[hidden] {
  display: none;
}

.bestellformular__text {
  flex: 1 1 100%;
  margin: 0;
}

.bestellformular__laden {
  min-block-size: 44px;
}

.bestellformular__einstellungen {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: 0.875rem;
}




/* ═══════════ PROJEKT-CSS — Energieausweis Berlin ═══════════
   Design-Import 2026-10-10, Entwurf: design-entwurf/energieausweis-berlin/project/.
   Der Entwurf setzte jeden Wert inline; hier stehen sie als Klassen `eb-…`.
   Farben nur über Token aus _tokens.css. Kein Nunjucks-Kommentarzeichen in dieser Datei:
   style.njk bindet sie als Nunjucks-Include ein. */

/* ── Schriften (self-hosted, Lizenz: static/fonts/LICENSE.txt) ──────────── */
@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");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { font-size: 16px; line-height: 1.6; }
main a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
main a:hover, .eb-footer a:hover { color: var(--color-accent-text); }

.eb-wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.eb-band { background: var(--color-bg); padding-block: clamp(36px, 4.5vw, 60px); }
.eb-band--alt { background: var(--color-bg-alt); }
.eb-band--kompakt { padding-block: clamp(32px, 4vw, 52px); }

.eb-h1 {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.eb-h2 {
  margin: 0 0 24px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.eb-h2--klein { font-size: 22px; letter-spacing: -0.015em; margin-bottom: 16px; }
.eb-h2--schmal { max-width: 26ch; }
.eb-h2--eng { margin-bottom: 8px; }
.eb-h2--mittel { margin-bottom: 20px; }
.eb-h2--weit { margin-bottom: 28px; }
.eb-h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.eb-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.eb-kicker--leise { font-size: 13px; color: var(--color-text-muted); }
.eb-lead { margin: 0; font-size: clamp(17px, 1.6vw, 19px); color: var(--color-text-body); }
.eb-text { margin: 0; font-size: 15.5px; color: var(--color-text-body); }
.eb-text--breit { max-width: 74ch; }
.eb-text + .eb-text { margin-top: 12px; }
.eb-meta { margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-muted); }
.eb-klein { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.eb-text--nach { margin-top: 16px; font-size: 15px; }
.eb-text--abstand { margin-top: 24px; }
.eb-nach, .eb-text--nach.eb-nach { margin-top: 20px; }
.eb-intro { margin: 0 0 28px; max-width: 70ch; font-size: 16px; color: var(--color-text-body); }
.eb-link-klein { font-size: 14px; }

.eb-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr));
  gap: var(--fuge, clamp(24px, 3vw, 40px));
}
@property --min { syntax: "<length>"; inherits: false; initial-value: 300px; }
@property --fuge { syntax: "<length>"; inherits: false; initial-value: 24px; }

/* ── Knöpfe ─────────────────────────────────────────────────────────────── */
.eb-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
main a.eb-btn, .eb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: 14px 22px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
main a.eb-btn:hover, .eb-btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
main a.eb-btn--akzent, .eb-btn--akzent { background: var(--color-accent); border-color: var(--color-accent); }
main a.eb-btn--akzent:hover, .eb-btn--akzent:hover { background: var(--color-accent-text); border-color: var(--color-accent-text); }
main a.eb-btn--rahmen, .eb-btn--rahmen { background: var(--color-surface); color: var(--color-primary); }
main a.eb-btn--rahmen:hover, .eb-btn--rahmen:hover { background: var(--color-auswahl); color: var(--color-primary); border-color: var(--color-primary); }
main a.eb-btn--hell, .eb-btn--hell { background: transparent; border-color: var(--color-on-primary-rahmen); color: var(--color-on-primary); }
main a.eb-btn--hell:hover, .eb-btn--hell:hover { background: var(--color-primary-hover); border-color: var(--color-on-primary); }
.eb-btn--block { display: flex; width: 100%; }
.eb-cta :focus-visible { outline-color: var(--color-on-primary); }

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.eb-header { background: var(--color-bg); }
.eb-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  border-bottom: 1px solid var(--color-border);
}
.eb-logo-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.eb-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; min-block-size: 44px; }
.eb-logo:hover { color: var(--color-primary); }
.eb-logo__marke { width: 26px; height: 26px; flex: none; }
.eb-logo__flaeche { fill: var(--color-primary); }
.eb-logo__balken { fill: var(--color-on-primary); }
.eb-logo__balken--akzent { fill: var(--color-accent-deko); }
.eb-logo__name { font-weight: 600; letter-spacing: -0.01em; font-size: 17px; white-space: nowrap; }
.eb-platzhalter-marke {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  border: 1px dashed var(--color-platzhalter-rand);
  border-radius: 3px;
  padding: 2px 5px;
}
.eb-nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.eb-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: 14px;
  color: var(--color-text-body);
  text-decoration: none;
}
.eb-nav a:hover { color: var(--color-accent-text); }
.eb-nav a[aria-current="page"] { font-weight: 600; color: var(--color-primary); }

/* ── Startseite: Kopfbereich mit Konfigurator ───────────────────────────── */
.eb-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  padding-block: clamp(32px, 5vw, 64px) clamp(36px, 5vw, 60px);
}
.eb-hero .eb-kicker { margin-bottom: 18px; }
.eb-hero .eb-h1 { margin-bottom: 18px; }
.eb-hero .eb-lead { margin-bottom: 24px; max-width: 46ch; }
.eb-hero .eb-knoepfe { margin-bottom: 20px; }
.eb-hero .eb-meta { margin-bottom: 10px; }

.eb-konfig {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 1px 2px rgb(20 24 26 / 5%), 0 12px 32px -18px rgb(15 61 76 / 35%);
}
.eb-konfig__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.eb-konfig__marke { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); }
.eb-konfig__schritt { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-subtle); }
.eb-konfig__titel { margin: 0 0 4px; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.eb-konfig__titel:focus { outline: none; }
.eb-konfig__titel:focus-visible { outline: 3px solid var(--color-accent-text); outline-offset: 2px; }
.eb-konfig__unter { margin: 0 0 18px; font-size: 14px; color: var(--color-text-muted); }
.eb-konfig__balken { display: flex; gap: 4px; margin-bottom: 20px; }
.eb-konfig__balken span { height: 4px; flex: 1; border-radius: 2px; background: var(--color-border); }
.eb-konfig__balken span[data-an] { background: var(--color-accent-deko); }
.eb-konfig__optionen { display: grid; gap: 8px; }
.eb-konfig__gruppe + .eb-konfig__gruppe { margin-top: 18px; }
.eb-konfig__frage { margin: 0 0 8px; font-size: 13px; font-weight: 500; }
.eb-wahl {
  display: grid;
  gap: 2px;
  width: 100%;
  min-block-size: 44px;
  padding: 13px 15px;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius);
  background: var(--color-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.eb-wahl:hover { border-color: var(--color-primary); }
.eb-wahl[aria-pressed="true"] { background: var(--color-auswahl); border-color: var(--color-primary); }
.eb-wahl__label { font-size: 15px; font-weight: 500; color: var(--color-text); }
.eb-wahl__sub { font-size: 13px; color: var(--color-text-muted); }
.eb-konfig__empfehlung { background: var(--color-bg-alt); border-radius: var(--radius); padding: 18px; }
.eb-konfig__empfehlung .eb-kicker { font-size: 11px; margin-bottom: 6px; }
.eb-konfig__ergebnis { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.eb-konfig__ergebnis-titel { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.eb-konfig__ergebnis-titel:focus { outline: none; }
.eb-konfig__preis { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.eb-konfig__grund { margin: 8px 0 0; font-size: 14.5px; color: var(--color-text-body); }
.eb-konfig__stapel { display: grid; gap: 14px; }
.eb-konfig__alt { font-size: 14px; text-align: center; }
.eb-konfig__regeln { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; font-size: 14.5px; color: var(--color-text-body); }
.eb-konfig__fuss { margin: 0; font-size: 12.5px; color: var(--color-text-subtle); }
.eb-zurueck {
  margin-top: 16px;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ── Berlin in Zahlen ───────────────────────────────────────────────────── */
.eb-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  margin: 16px 0 0;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.eb-zahlen > div { display: flex; flex-direction: column; background: var(--color-surface); padding: 18px 18px 20px; }
.eb-zahlen dt { order: 1; font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 10px; }
.eb-zahlen dd { order: 2; margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; overflow-wrap: anywhere; }
.eb-zahlen dd + dd { order: 3; font-size: 12.5px; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--color-text-subtle); margin-top: 6px; }
.eb-zahlen + .eb-text { margin-top: 16px; font-size: 16px; }

/* ── Karten ─────────────────────────────────────────────────────────────── */
.eb-karte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.eb-karte--ausweis { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.eb-karte--ausweis .eb-btn { margin-top: auto; }
.eb-karte__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.eb-karte__titel { margin: 0; font-size: 20px; font-weight: 600; }
.eb-karte__preis { font-size: 20px; font-weight: 600; white-space: nowrap; }
.eb-karte__unter { margin: 6px 0 0; font-size: 14px; color: var(--color-text-muted); }
.eb-karte--klein { padding: 18px; }
.eb-karte__name { margin: 0 0 4px; font-weight: 600; font-size: 15.5px; }
.eb-karte .eb-kicker { font-size: 11.5px; letter-spacing: 0.08em; margin-bottom: 10px; }
.eb-karte .eb-kicker--neutral { color: var(--color-text-subtle); }
.eb-karten { display: grid; gap: 12px; }

.eb-merkmale { display: grid; gap: 10px; margin: 0; font-size: 14.5px; color: var(--color-text-body); }
.eb-merkmale > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.eb-merkmale dt { color: var(--color-text-subtle); }
.eb-merkmale dd { margin: 0; }

.eb-hinweis {
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--color-hinweis);
  border-left: 3px solid var(--color-accent-deko);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14.5px;
  color: var(--color-text-body);
}
.eb-kasten {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--color-text);
}
.eb-randnotiz { margin: 16px 0 0; padding-left: 14px; border-left: 3px solid var(--color-border-zitat); font-size: 15px; color: var(--color-text-body); }
.eb-randnotiz--stark { padding-left: 16px; border-left-color: var(--color-primary); font-size: 15.5px; }

/* ── Listen mit Strich ──────────────────────────────────────────────────── */
.eb-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--color-text-body); }
.eb-liste li { display: flex; gap: 10px; }
.eb-liste li::before { content: "—"; color: var(--color-accent-deko); flex: none; }
.eb-liste--gross { font-size: 15.5px; }
.eb-unterlagen-titel { margin: 0 0 12px; font-size: 16px; font-weight: 600; }

/* ── Preistabelle ───────────────────────────────────────────────────────── */
.eb-tabelle-rahmen { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.eb-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.eb-tabelle col:first-child { width: 50%; }
.eb-tabelle th, .eb-tabelle td { padding: 16px 18px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.eb-tabelle thead th {
  padding-block: 12px;
  background: var(--color-surface-kopf);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eb-tabelle tbody tr { border-top: 1px solid var(--color-border-leise); }
.eb-tabelle tbody th { font-weight: 400; }
.eb-tabelle__preis { font-weight: 600; }
.eb-tabelle__zeit { color: var(--color-text-muted); }
@media (max-width: 480px) {
  .eb-tabelle th, .eb-tabelle td { padding-inline: 12px; }
  .eb-tabelle col:first-child { width: 44%; }
}

/* ── Ablauf ─────────────────────────────────────────────────────────────── */
.eb-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.eb-schritte li { border-top: 2px solid var(--color-primary); padding-top: 16px; }
.eb-schritte__marke { margin: 0 0 8px; font-family: var(--font-mono); font-size: 12px; color: var(--color-accent-text); }
.eb-schritte h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.eb-schritte p:last-child { margin: 0; font-size: 15px; color: var(--color-text-body); }
.eb-schritte + .eb-knoepfe, .eb-schritte + .eb-btn { margin-top: 28px; }

/* ── Aussteller und Bewertungen ─────────────────────────────────────────── */
.eb-person { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.eb-person__foto {
  width: 104px;
  height: 128px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.eb-person__initialen { font-family: var(--font-mono); font-size: 30px; font-weight: 500; letter-spacing: 0.04em; color: var(--color-primary); }
.eb-person__text { flex: 1; min-width: min(200px, 100%); }
.eb-person__name { margin: 0; font-size: 17px; font-weight: 600; }
.eb-person__beruf { margin: 2px 0 0; font-size: 14px; color: var(--color-text-muted); }
.eb-person__text .eb-text { margin-top: 6px; font-size: 15px; }
.eb-bewertung { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 18px; }
.eb-bewertung__wert { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.eb-bewertung__anzahl { font-size: 14px; color: var(--color-text-muted); }
.eb-person + .eb-bewertung { margin-top: 20px; margin-bottom: 12px; }
.eb-stimme { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; }
.eb-stimme p { margin: 0; font-size: 15px; color: var(--color-text-body); }
.eb-stimme blockquote { margin: 0; }
.eb-stimme figcaption { margin-top: 10px; font-size: 13.5px; color: var(--color-text-muted); }
.eb-stimme .eb-platzhalter-marke, .eb-bewertung .eb-platzhalter-marke { margin-left: 6px; }
.eb-zahlen dd .eb-platzhalter-marke { display: inline-block; margin-left: 8px; vertical-align: middle; font-weight: 400; line-height: 1.4; }

/* ── Häufige Fragen ─────────────────────────────────────────────────────── */
.eb-fragen { border-top: 1px solid var(--color-border); }
.eb-fragen details { border-bottom: 1px solid var(--color-border); }
.eb-fragen summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 44px;
  padding: 16px 0;
  list-style: none;
  cursor: pointer;
}
.eb-fragen summary::-webkit-details-marker { display: none; }
.eb-fragen summary::after { content: "+"; color: var(--color-accent-text); font-size: 18px; line-height: 1.4; flex: none; }
.eb-fragen details[open] summary::after { content: "−"; }
.eb-fragen h3 { margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.45; }
.eb-fragen p { margin: 0 0 18px; max-width: 78ch; font-size: 15.5px; color: var(--color-text-body); }

/* ── Abschlussblock (dunkel) ────────────────────────────────────────────── */
.eb-abschluss { background: var(--color-bg); padding-top: clamp(36px, 4.5vw, 60px); }
.eb-cta {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
}
.eb-cta h2 { margin: 0 0 10px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.eb-cta p { margin: 0 0 22px; max-width: 60ch; font-size: 16px; color: var(--color-on-primary-muted); }

/* ── Ausweis-Seiten: Kopf und Bestellformular ───────────────────────────── */
.eb-seitenkopf { padding-block: clamp(28px, 4vw, 48px) clamp(20px, 2.5vw, 32px); }
.eb-krume {
  margin: 0 0 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.eb-krume ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
.eb-krume li + li::before { content: "/"; margin-right: 8px; color: var(--color-platzhalter-rand); }
main .eb-krume a { color: var(--color-text-subtle); text-decoration: none; }
main .eb-krume a:hover { color: var(--color-accent-text); text-decoration: underline; }
.eb-seitenkopf__inhalt { display: grid; justify-items: center; gap: 16px; max-width: 860px; margin: 0 auto; text-align: center; }
.eb-seitenkopf .eb-lead { max-width: 60ch; margin: 0 auto 14px; }

.eb-formular-bereich { display: flex; justify-content: center; padding-bottom: clamp(36px, 5vw, 60px); scroll-margin-top: 16px; }
.eb-formular { width: 100%; max-width: 1000px; }
/* Platz für das nachladende Formular, damit beim Laden nichts springt. */
.eb-formular .iframeContainerImmobilienwerker { min-height: clamp(560px, 80vw, 760px); }

/* ── Fuß ────────────────────────────────────────────────────────────────── */
.eb-footer { background: var(--color-bg); padding-block: clamp(28px, 3vw, 40px) clamp(40px, 5vw, 64px); }
.eb-footer__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.eb-footer h2 {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eb-footer p { margin: 0; font-size: 15px; color: var(--color-text-body); }
.eb-footer a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.eb-footer__orte { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--color-text-body); }
.eb-footer__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
  font-size: 13px;
  color: var(--color-text-subtle);
}
.eb-footer__unten li + li::before { content: "·"; margin-right: 8px; }
.eb-footer__unten a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--color-text-subtle); }
.eb-footer__unten .consent-widerruf { color: var(--color-text-subtle); }

/* ═══════════ PRINT ═══════════
   Impressum und Leistungen/Angebote werden ausgedruckt: Interaktives raus,
   externe Link-Ziele lesbar machen, Druckfarbe sparen. */

@media print {
  /* body > header / footer: trifft auch einen Projekt-Header ohne Engine-Klassen
     (src/_includes/projekt/); Artikel-Header liegen in <main> und bleiben. */
  .site-header,
  .cta-bar,
  .lead-form,
  .skip-link,
  .site-footer,
  body > header,
  body > footer {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    hyphens: manual;
  }

  /* Externe Link-Ziele ausschreiben — interne Pfade wären nur Rauschen */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.875em;
    word-break: break-all;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  figure, blockquote, .card {
    break-inside: avoid;
  }
}