/* =============================================================================
   Maler Engelbrecht – Stylesheet
   Quelle: handoff/DESIGN-SPEC.md und handoff/prototype (freigegebener Entwurf).
   Eine Datei, keine Preprocessor-Pflicht. Tokens oben, dann Grundlagen, Komponenten,
   Sektionen der Startseite, Unterseiten, Responsive, Bewegung.
   Das Design lebt nur hier: keine Optionen im Backend.
   ============================================================================= */

/* ---------- Schrift (lokal, variabel 200–800) ---------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --eb-ground: #F7F5F1;        /* Seitenhintergrund (warmes Weiß) */
  --eb-paper: #FFFFFF;         /* Karten, Formular, helle Sektionen */
  --eb-sand: #ECE6DB;          /* Kontakt-Sektion, Platzhalter, Hover-Fläche */
  --eb-ink: #1F2421;           /* Text, dunkle Sektionen, Footer */
  --eb-muted: #5B6360;         /* Fließtext zweiter Ordnung, Labels (5,6:1 auf Ground) */
  --eb-line: #B9B0A1;          /* Rahmen, Eingabefelder, Platzhalter-Rand */
  --eb-accent: #2F6F73;        /* NUR Buttons, Links in Karten, Icons, Akzentlinie */
  --eb-accent-hover: #245A5E;
  --eb-star: #E0A526;          /* Sterne in der Bewertungsbox, sonst nirgends */
  --eb-dunkel-text: #D9D2C3;   /* Fließtext auf --eb-ink */
  --eb-dunkel-label: #B9B0A1;  /* Eyebrow/Nummern auf --eb-ink */
  --eb-fehler: #B3261E;

  /* Schriftwahl Michael 29.10.2026: Fraunces (Überschriften, lokal) + Work Sans (Text, bis zur Entscheidung von Google Fonts, siehe inc/assets.php). */
  --eb-font: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --eb-font-head: "Fraunces", Georgia, "Times New Roman", serif;  /* Varianten siehe Block „Schrift-Vorschau“ am Ende */
  --eb-head-weight: 800;
  --eb-head-ls-1: -0.03em;
  --eb-head-ls-2: -0.02em;
  --eb-head-ls-3: -0.01em;
  --eb-head-transform: none;
  --eb-kopf-skalierung: 1;     /* Größe der Überschriften, setzt das Werkzeug „Fest übernehmen“ (inc/vorschau-schrift.php) */

  --eb-h1: 60px;
  --eb-h2: 44px;
  --eb-h1-seite: 44px;
  --eb-intro: 20px;
  --eb-klein: 15px;

  --eb-wrap: 1200px;
  --eb-rand: 24px;
  --eb-sektion: 96px;
  --eb-gap: 24px;
  --eb-gap-2: 64px;
  --eb-schatten: 0 12px 32px rgba(31, 36, 33, .12);
  --eb-dauer: 180ms;
}
@media (max-width: 900px) {
  :root { --eb-h1: 40px; --eb-h2: 30px; --eb-h1-seite: 30px; --eb-intro: 18px; --eb-klein: 14px; --eb-sektion: 64px; --eb-gap-2: 32px; }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--eb-ground);
  color: var(--eb-ink);
  font: 400 17px/1.55 var(--eb-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--eb-ink); transition: color var(--eb-dauer) ease-out, background-color var(--eb-dauer) ease-out; }
a:hover { color: var(--eb-accent); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--eb-ink); outline-offset: 2px; }
.eb-sektion--dunkel :focus-visible, .eb-fuss :focus-visible, .eb-topbar :focus-visible { outline-color: #FFFFFF; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: var(--eb-rand); top: -100px; z-index: 200; background: var(--eb-ink); color: #fff; padding: 12px 16px; text-decoration: none; font-weight: 600; border-radius: 10px; }
.sprung:focus { top: 12px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.eb-wrap { width: 100%; max-width: var(--eb-wrap); margin-inline: auto; padding-inline: var(--eb-rand); }

/* ---------- Typografie ---------- */
.eb-h1, .eb-h2, .eb-h3 { margin: 0; font-family: var(--eb-font-head); font-weight: var(--eb-head-weight); color: var(--eb-ink); overflow-wrap: break-word; text-transform: var(--eb-head-transform); }
.eb-h1 { font-size: calc(var(--eb-h1) * var(--eb-kopf-skalierung, 1)); line-height: 1.05; letter-spacing: var(--eb-head-ls-1); }
.eb-h1--seite { font-size: calc(var(--eb-h1-seite) * var(--eb-kopf-skalierung, 1)); line-height: 1.1; letter-spacing: var(--eb-head-ls-2); }
.eb-h2 { font-size: calc(var(--eb-h2) * var(--eb-kopf-skalierung, 1)); line-height: 1.1; letter-spacing: var(--eb-head-ls-2); }
.eb-h2--schmal { max-width: 720px; }
.eb-h3 { font-size: calc(22px * var(--eb-kopf-skalierung, 1)); line-height: 1.25; letter-spacing: var(--eb-head-ls-3); }
.eb-h1__vorzeile { font-family: var(--eb-font); font-weight: 600; text-transform: uppercase; }
.eb-h3--schritt { font-size: calc(20px * var(--eb-kopf-skalierung, 1)); letter-spacing: 0; }
.eb-intro { font-size: var(--eb-intro); line-height: 1.5; color: var(--eb-muted); max-width: 540px; }
.eb-eyebrow { font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--eb-muted); margin: 0 0 16px; display: flex; align-items: center; gap: 12px; }
.eb-eyebrow--strich::before { content: ""; display: inline-block; width: 28px; height: 3px; background: var(--eb-accent); border-radius: 2px; flex: none; }
.eb-sektion--dunkel .eb-eyebrow { color: var(--eb-dunkel-label); }
.eb-sektion--dunkel .eb-h2, .eb-sektion--dunkel .eb-h3 { color: #FFFFFF; }
.eb-sektion--dunkel .eb-intro { color: var(--eb-dunkel-text); }
.eb-fliesstext p { color: var(--eb-muted); }
.eb-fliesstext p + p { margin-top: 16px; }

/* ---------- Sektionen und Raster ---------- */
.eb-sektion { padding: var(--eb-sektion) 0; }
.eb-sektion--weiss { background: var(--eb-paper); }
.eb-sektion--sand { background: var(--eb-sand); }
.eb-sektion--dunkel { background: var(--eb-ink); color: var(--eb-dunkel-text); }
.eb-sektion--kopf { padding-top: 40px; }
.eb-raster { display: grid; gap: var(--eb-gap); }
.eb-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eb-gap-2); align-items: center; }
.eb-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eb-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eb-raster--oben { align-items: start; }
.eb-kopf { display: flex; flex-direction: column; margin-bottom: 48px; }
.eb-kopf--zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eb-gap-2); align-items: end; }
.eb-kopf--button { grid-template-columns: minmax(0, 1fr) auto; }
.eb-kopf--zweispaltig .eb-intro { margin-top: 0; }
.eb-kopf--zweispaltig .eb-btn { justify-self: end; }
@media (max-width: 900px) {
  .eb-raster--2, .eb-raster--3, .eb-raster--4, .eb-kopf--zweispaltig { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .eb-kopf--zweispaltig { gap: 16px; }
  .eb-kopf--zweispaltig .eb-btn { justify-self: start; }
  .eb-kopf { margin-bottom: 32px; }
}

/* ---------- Buttons ---------- */
.eb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border-radius: 999px; border: 2px solid transparent;
  font-weight: 600; font-size: 17px; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color var(--eb-dauer) ease-out, color var(--eb-dauer) ease-out, border-color var(--eb-dauer) ease-out;
}
.eb-btn--primary { background: var(--eb-accent); color: #FFFFFF; }
.eb-btn--primary:hover, .eb-btn--primary:focus-visible { background: var(--eb-accent-hover); color: #FFFFFF; }
.eb-btn--ghost { background: transparent; border-color: var(--eb-ink); color: var(--eb-ink); }
.eb-btn--ghost:hover { background: var(--eb-sand); color: var(--eb-ink); }
.eb-btn--klein { min-height: 44px; padding: 0 20px; font-size: 15px; }
.eb-btn--breit { width: 100%; }
.eb-knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 600px) {
  .eb-knopfreihe .eb-btn { width: 100%; padding: 0 20px; }
}

/* ---------- Icons ---------- */
.eb-ico { width: 22px; height: 22px; flex: none; }
.eb-ico--klein { width: 18px; height: 18px; }
.eb-link { display: inline-flex; align-items: center; gap: 6px; color: var(--eb-accent); font-weight: 600; text-decoration: none; }
.eb-link:hover { color: var(--eb-accent-hover); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Bilder und Platzhalter ---------- */
.eb-bild { position: relative; width: 100%; margin: 0; overflow: hidden; background: var(--eb-sand); border-radius: 12px; }
.eb-bild img { width: 100%; height: 100%; object-fit: cover; }
.eb-bild--leer {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; border: 1px dashed var(--eb-line);
  color: var(--eb-muted); font-size: 14px; font-weight: 500; text-align: center;
}
.eb-bild__ico { width: 28px; height: 28px; color: var(--eb-muted); }

/* ---------- Karten ---------- */
.eb-karte { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 16px; }
.eb-karte--ground { background: var(--eb-ground); }
.eb-karte--weiss { background: var(--eb-paper); }
.eb-karte__bild { display: block; border-radius: 12px; overflow: hidden; }
.eb-karte__bild .eb-bild { border-radius: 12px; }
.eb-karte__text { color: var(--eb-muted); font-size: 16px; flex: 1 1 auto; }
.eb-karte .eb-h3 a { color: inherit; text-decoration: none; }
.eb-karte .eb-h3 a:hover { color: var(--eb-accent); }
.eb-karte__ico { width: 32px; height: 32px; color: var(--eb-accent); }
.eb-karte--icon { gap: 12px; }
.eb-karte--icon .eb-karte__ico { margin-bottom: 4px; }

/* ---------- Für wen wir arbeiten (Karten mit Foto, Plakette, Stichpunkten) ---------- */
.eb-zg { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--eb-paper); transition: transform .3s ease, box-shadow .3s ease; }
.eb-zg:hover { transform: translateY(-4px); box-shadow: var(--eb-schatten); }
.eb-zg__kopf { position: relative; }
.eb-zg__kopf .eb-bild { border-radius: 0; }
.eb-zg__bild img { transition: transform .6s ease; }
.eb-zg:hover .eb-zg__bild img { transform: scale(1.04); }
.eb-zg__ico { position: absolute; left: 20px; bottom: -22px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--eb-paper); color: var(--eb-accent); box-shadow: 0 6px 16px rgba(31, 36, 33, .14); }
.eb-zg__ico .eb-ico { width: 24px; height: 24px; }
.eb-zg__innen { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; padding: 36px 24px 24px; }
.eb-zg__innen .eb-karte__text { flex: 0 0 auto; }
.eb-zg__punkte { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--eb-sand); list-style: none; }
.eb-zg__punkte li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--eb-ink); }
.eb-zg__punkte .eb-ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--eb-accent); }
.eb-zg__link { margin-top: auto; padding-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .eb-zg, .eb-zg__bild img { transition: none; }
  .eb-zg:hover { transform: none; }
  .eb-zg:hover .eb-zg__bild img { transform: none; }
}

/* ---------- Topbar ---------- */
.eb-topbar { background: var(--eb-ink); color: #FFFFFF; font-size: 14px; line-height: 1.4; }
.eb-topbar__innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.eb-topbar a { color: #FFFFFF; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.eb-topbar a:hover { color: var(--eb-dunkel-text); }
@media (max-width: 900px) {
  .eb-topbar__text { display: none; }
  .eb-topbar__innen { justify-content: center; }
}

/* ---------- Header ---------- */
.eb-header { background: var(--eb-ground); }
.eb-header__innen { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 88px; }
.eb-logo { display: inline-flex; align-items: center; gap: 14px; color: var(--eb-ink); text-decoration: none; flex: none; }
.eb-logo:hover { color: var(--eb-ink); }
.eb-logo__platz { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background: var(--eb-sand); border: 1px dashed var(--eb-line); color: var(--eb-muted); font-size: 12px; font-weight: 500; }
.eb-logo__bild { width: auto; height: 56px; max-width: 200px; object-fit: contain; }
.eb-logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.eb-logo__name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.eb-logo__zusatz { font-size: 14px; color: var(--eb-muted); }
.eb-logo--hell { color: #FFFFFF; }
.eb-logo--hell .eb-logo__zusatz { color: var(--eb-dunkel-label); }

.eb-nav__liste { list-style: none; display: flex; gap: 32px; align-items: center; }
.eb-nav__liste a { display: inline-block; padding: 6px 0; color: var(--eb-ink); font-weight: 600; font-size: 17px; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.eb-nav__liste a:hover { color: var(--eb-accent); }
.eb-nav__liste .current-menu-item > a, .eb-nav__liste .current-menu-ancestor > a, .eb-nav__liste .current_page_parent > a { border-bottom-color: var(--eb-accent); }
.eb-nav__kopf, .eb-nav__aktion { display: none; }
.eb-burger { display: none; }
.eb-header__cta { flex: none; }

/* Kopfzeile: unter 1024px passen fünf Menüpunkte, Logo und Button nicht nebeneinander. Darum hier der Burger
   schon ab 1023px, alles andere bricht bei 900px. Zwischen 1024 und 1299px wird enger gesetzt (30.10.2026: bei
   1200px lief der Button über den Rand, weil die Zusatzzeile unter dem Namen länger geworden war); unter 1200px
   fällt die Zusatzzeile im Kopf weg, sie steht ohnehin in Topbar und Fußzeile. */
@media (min-width: 1024px) {
  .eb-nav { display: flex; align-items: center; margin-left: auto; }
  .eb-nav__liste { margin-right: 0; }
}
@media (min-width: 1024px) and (max-width: 1299px) {
  .eb-nav__liste { gap: 22px; }
  .eb-nav__liste a { font-size: 16px; }
  .eb-header__cta { padding: 0 20px; }
  .eb-header__innen { gap: 20px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .eb-nav__liste { gap: 16px; }
  .eb-header__cta { padding: 0 18px; }
  .eb-logo__zusatz { display: none; }
}
@media (max-width: 1023px) {
  .eb-header__innen { gap: 16px; }
  .eb-header__cta { display: none; }
  .eb-burger {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 48px; height: 48px; border: 2px solid var(--eb-ink); border-radius: 12px; background: transparent; cursor: pointer;
  }
  .eb-burger:hover { background: var(--eb-sand); }
  /* Overlay: bleibt im Baum, blendet weich ein (Deckkraft + leichtes Gleiten), Menüpunkte folgen gestaffelt.
     Geschlossen ist es unsichtbar und nicht fokussierbar (visibility), damit Tab nicht hineinspringt. */
  .eb-nav {
    display: flex; position: fixed; inset: 0; z-index: 100;
    flex-direction: column; overflow-y: auto;
    background: var(--eb-ground); padding: 12px var(--eb-rand) 40px;
    visibility: hidden; opacity: 0; transform: translateY(-14px);
    transition: opacity .26s ease-out, transform .38s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .38s;
  }
  body.nav-offen { overflow: hidden; }
  body.nav-offen .eb-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .26s ease-out, transform .38s cubic-bezier(.22, .8, .3, 1), visibility 0s; }
  .eb-nav__kopf, .eb-nav__liste li, .eb-nav__aktion { opacity: 0; transform: translateY(12px); transition: opacity .3s ease-out, transform .4s cubic-bezier(.22, .8, .3, 1); }
  body.nav-offen .eb-nav__kopf, body.nav-offen .eb-nav__liste li, body.nav-offen .eb-nav__aktion { opacity: 1; transform: none; }
  body.nav-offen .eb-nav__kopf { transition-delay: 40ms; }
  body.nav-offen .eb-nav__liste li:nth-child(1) { transition-delay: 90ms; }
  body.nav-offen .eb-nav__liste li:nth-child(2) { transition-delay: 140ms; }
  body.nav-offen .eb-nav__liste li:nth-child(3) { transition-delay: 190ms; }
  body.nav-offen .eb-nav__liste li:nth-child(4) { transition-delay: 240ms; }
  body.nav-offen .eb-nav__liste li:nth-child(5) { transition-delay: 290ms; }
  body.nav-offen .eb-nav__liste li:nth-child(6) { transition-delay: 340ms; }
  body.nav-offen .eb-nav__aktion { transition-delay: 400ms; }
  .eb-burger .eb-ico { transition: transform .3s cubic-bezier(.22, .8, .3, 1); }
  body.nav-offen .eb-burger .eb-ico { transform: rotate(90deg); }
  .eb-nav__kopf { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin-bottom: 16px; }
  .eb-nav__marke { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
  .eb-nav__schliessen { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid var(--eb-ink); border-radius: 12px; background: transparent; cursor: pointer; }
  .eb-nav__schliessen:hover { background: var(--eb-sand); }
  .eb-nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .eb-nav__liste li { border-bottom: 1px solid var(--eb-line); }
  .eb-nav__liste a { display: block; padding: 14px 0; min-height: 48px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; border-bottom: 0; white-space: normal; }
  .eb-nav__liste .current-menu-item > a { color: var(--eb-accent); }
  .eb-nav__aktion { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
  .eb-nav__aktion .eb-btn { width: 100%; }
  .eb-nav__tel { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
  .eb-nav__tel .eb-ico { color: var(--eb-accent); }
}
@media (max-width: 900px) {
  .eb-header__innen { min-height: 72px; }
}

/* ---------- Hero ---------- */
/* Hintergrund (Michael, 30.10.2026): leiser Verlauf, oben wie die Kopfzeile, zur Mitte eine Spur Sand, unten wieder
   warmes Weiß, dazu ein zarter Petrol-Schimmer oben rechts hinter dem Foto (mobil hinter der Überschrift). */
.eb-hero {
  padding: 64px 0 96px;
  background:
    radial-gradient(60% 55% at 86% 18%, rgba(47, 111, 115, .11), transparent 70%),
    linear-gradient(180deg, var(--eb-ground) 0%, #F1ECE3 48%, var(--eb-ground) 100%);
}
.eb-hero__innen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--eb-gap-2); align-items: center; }
.eb-hero .eb-h1 { margin-bottom: 24px; }
.eb-h1__vorzeile { display: flex; margin-bottom: 16px; font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--eb-muted); }
.eb-h1__haupt { display: block; }
.eb-hero__subline { font-size: var(--eb-intro); line-height: 1.5; color: var(--eb-muted); max-width: 540px; margin-bottom: 32px; }
.eb-hero .eb-knopfreihe { margin-bottom: 32px; }
.eb-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.eb-trust li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.eb-trust .eb-ico { width: 18px; height: 18px; color: var(--eb-accent); }
.eb-hero__visual { position: relative; }
.eb-hero__bild { border-radius: 24px; }
.eb-bewertung {
  position: absolute; left: -24px; bottom: 32px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border-radius: 999px;
  background: var(--eb-paper); color: var(--eb-ink); box-shadow: var(--eb-schatten); text-decoration: none;
}
.eb-bewertung:hover { color: var(--eb-ink); }
.eb-sterne { display: inline-flex; gap: 3px; color: var(--eb-star); }
.eb-stern { width: 18px; height: 18px; }
.eb-bewertung__text { display: flex; flex-direction: column; line-height: 1.2; }
.eb-bewertung__note { font-size: 18px; font-weight: 800; }
.eb-bewertung__anzahl { font-size: 13px; color: var(--eb-muted); }
/* Bewertung als Zeile (Kontakt, Fußzeile, Fakten) */
.eb-bewertung-zeile { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.3; color: inherit; text-decoration: none; }
.eb-bewertung-zeile strong { font-weight: 800; }
.eb-bewertung-zeile .eb-stern { width: 16px; height: 16px; }
a.eb-bewertung-zeile:hover span { text-decoration: underline; text-underline-offset: 4px; }
.eb-kontakt__bewertung { margin: -8px 0 24px; align-self: flex-start; }
.eb-fuss__bewertung { margin-top: 16px; }
.eb-fuss__bewertung strong { color: #FFFFFF; }
.eb-faecher { position: absolute; top: 24px; right: -16px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: var(--eb-paper); box-shadow: var(--eb-schatten); }
.eb-faecher i { display: block; width: 28px; height: 28px; border-radius: 8px; }
/* Farbwahl: Chips als Buttons, Bilder gestapelt und weich überblendet */
.eb-faecher__chip { position: relative; display: block; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: var(--chip); cursor: pointer; transition: transform var(--eb-dauer) ease-out, box-shadow var(--eb-dauer) ease-out; }
.eb-faecher__chip::before { content: ""; position: absolute; inset: -5px -10px; } /* Touch-Ziel 48 × 38 px bei 28 px Chip */
.eb-faecher__chip:hover { transform: scale(1.12); }
.eb-faecher__chip[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--eb-ink); }
.eb-faecher__chip:focus-visible { outline: 3px solid var(--eb-ink); outline-offset: 2px; }
/* Wechsel: die neue Wandfarbe breitet sich als Kreis vom angeklickten Chip über das Foto aus (--cx/--cy setzt das JS);
   das bisherige Foto bleibt darunter liegen, bis der Kreis das Bild füllt. */
.eb-farbwand { position: relative; isolation: isolate; --cx: 90%; --cy: 14%; } /* eigener Stapel: Bilder mit z-index bleiben unter Fächer und Bewertungsbox */
.eb-farbwand__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.eb-farbwand__bild--unten { opacity: 1; z-index: 1; }
.eb-farbwand__bild--aktiv { opacity: 1; z-index: 2; clip-path: circle(165% at var(--cx) var(--cy)); transform: scale(1); transition: clip-path .95s cubic-bezier(.55, 0, .2, 1), transform .95s cubic-bezier(.55, 0, .2, 1); }
.eb-farbwand__bild--start { clip-path: circle(0% at var(--cx) var(--cy)); transform: scale(1.06); transition: none; }
/* Zwischen 900 und 1280px liegt der Seitenrand direkt am Fensterrand: Fächer nicht über das Foto hinausragen lassen. */
@media (max-width: 1280px) { .eb-faecher { right: 12px; } }
@media (max-width: 900px) {
  .eb-hero { padding: 48px 0 64px; }
  /* Mobil (Michael, 30.10.2026): Foto mit Bewertungsbox rückt vor die Haken-Punkte, damit der erste Bildschirm
     nicht nur aus Text besteht. Der Textblock löst sich auf (display: contents), die Teile werden per order sortiert:
     Überschrift, Einleitung, Buttons, Foto, Haken. Das Foto wird mobil auf 4:3 beschnitten (Desktop 4:5). */
  .eb-hero__innen { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .eb-hero__text { display: contents; }
  .eb-hero .eb-h1 { order: 1; }
  .eb-hero__subline { order: 2; }
  .eb-hero .eb-knopfreihe { order: 3; margin-bottom: 28px; }
  .eb-hero__visual { order: 4; margin-bottom: 24px; }
  .eb-trust { order: 5; }
  .eb-hero__bild { aspect-ratio: 4 / 3 !important; }
  .eb-bewertung { left: 16px; bottom: 16px; padding: 12px 18px; }
  .eb-faecher { right: 16px; top: 16px; }
}

/* ---------- Leistungen ---------- */
.eb-leistungen .eb-kopf--zweispaltig .eb-intro { max-width: 540px; }

/* ---------- Ablauf ---------- */
.eb-schritte { list-style: none; }
.eb-schritt { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); }
.eb-schritt__nr { font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--eb-dunkel-label); }
.eb-schritt p { font-size: 16px; color: var(--eb-dunkel-text); }

/* ---------- Referenzen ---------- */
.eb-paar { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.eb-paar__bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border-radius: 16px; overflow: hidden; text-decoration: none; }
.eb-paar__bilder .eb-bild { border-radius: 0; }
.eb-paar__text { font-size: var(--eb-klein); line-height: 1.5; color: var(--eb-muted); }
.eb-paar__zeile { margin: 0; font-size: inherit; font-weight: 400; }
.eb-paar__text strong { color: var(--eb-ink); font-weight: 600; }
.eb-paar__text--beschriftet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; text-align: center; font-weight: 600; color: var(--eb-ink); }
.eb-paar--gross { max-width: 960px; }
.eb-paar--gross .eb-paar__bilder { border-radius: 24px; gap: 8px; }
.eb-paare + .eb-stimmen { margin-top: 48px; }
.eb-stimme { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: var(--eb-paper); }
.eb-stimme p { font-size: 17px; line-height: 1.5; }
.eb-stimme footer { font-size: var(--eb-klein); color: var(--eb-muted); }
.eb-stimme a { color: var(--eb-muted); }
.eb-referenz__ziel { margin-top: 24px; }

/* ---------- Vorher/Nachher mit Schieberegler (Test) ---------- */
.eb-kopf--mitte { align-items: center; text-align: center; }
.eb-kopf--mitte .eb-eyebrow { justify-content: center; }
.eb-vergleich { margin: 0 auto; max-width: 960px; display: flex; flex-direction: column; gap: 14px; }
.eb-vergleich__rahmen { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 24px; background: var(--eb-sand); box-shadow: var(--eb-schatten); user-select: none; }
.eb-vergleich__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eb-vergleich__nachher { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.eb-vergleich__nachher::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .35); }
.eb-vergleich__tag { position: absolute; top: 16px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #fff; pointer-events: none; }
.eb-vergleich__tag--vorher { left: 16px; background: rgba(31, 36, 33, .78); }
.eb-vergleich__tag--nachher { right: 16px; background: var(--eb-accent); }
.eb-vergleich__griff { position: absolute; top: 50%; left: var(--pos); width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; color: var(--eb-ink); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); pointer-events: none; }
.eb-vergleich__griff svg { width: 24px; height: 24px; }
.eb-vergleich__regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.eb-vergleich__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 52px; height: 100%; }
.eb-vergleich__regler::-moz-range-thumb { width: 52px; height: 100%; border: 0; }
.eb-vergleich__regler:focus-visible { opacity: 1; outline: 3px solid var(--eb-ink); outline-offset: 2px; }
.eb-vergleich__regler:focus-visible::-webkit-slider-thumb { background: transparent; }
.eb-vergleich__text { font-size: var(--eb-klein); line-height: 1.5; color: var(--eb-muted); text-align: center; }
.eb-vergleich__text strong { color: var(--eb-ink); font-weight: 600; }
@media (max-width: 600px) { .eb-vergleich__rahmen { aspect-ratio: 4 / 3; border-radius: 16px; } .eb-vergleich__griff { width: 44px; height: 44px; margin: -22px 0 0 -22px; } }

/* ---------- Über uns ---------- */
.eb-ueber__bild { border-radius: 24px; }
.eb-ueber__text { display: flex; flex-direction: column; gap: 16px; }
.eb-ueber__text .eb-eyebrow { margin-bottom: 0; }
.eb-ueber__text > .eb-btn { align-self: flex-start; margin-top: 8px; }
.eb-checkliste { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 8px 0; }
.eb-checkliste li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; font-size: 16px; line-height: 1.5; }
.eb-checkliste .eb-ico { flex: none; width: 22px; height: 22px; color: var(--eb-accent); margin-top: 1px; }

/* Fakten auf einen Blick (unter „Über uns“) */
.eb-ueber__fakten { margin-top: 64px; }
.eb-fakten { padding: 28px 32px; border-radius: 16px; background: var(--eb-ground); }
.eb-fakten .eb-h3 { margin-bottom: 16px; }
.eb-fakten__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin: 0; }
.eb-fakten__zeile { display: flex; flex-direction: column; gap: 4px; }
.eb-fakten__zeile dt { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--eb-muted); }
.eb-fakten__zeile dd { margin: 0; font-size: 16px; line-height: 1.5; }
.eb-fakten__zeile a { text-decoration: none; font-weight: 600; }
.eb-fakten__zeile a:hover { color: var(--eb-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .eb-ueber__fakten { margin-top: 40px; } .eb-fakten { padding: 24px; } .eb-fakten__liste { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 601px) and (max-width: 900px) { .eb-fakten__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Häufige Fragen ---------- */
.eb-faq__intro { display: flex; flex-direction: column; }
.eb-faq__intro .eb-h2 { margin-bottom: 16px; }
.eb-faq__liste { display: flex; flex-direction: column; gap: 12px; }
.eb-faq__eintrag { background: var(--eb-paper); border-radius: 12px; padding: 20px 24px; }
.eb-faq__eintrag summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-weight: 600; font-size: 18px; line-height: 1.3; list-style: none; }
.eb-faq__eintrag summary::-webkit-details-marker { display: none; }
.eb-faq__eintrag summary:hover { color: var(--eb-accent); }
.eb-faq__plus { width: 20px; height: 20px; flex: none; color: var(--eb-ink); transition: transform var(--eb-dauer) ease-out; }
.eb-faq__eintrag[open] .eb-faq__plus { transform: rotate(45deg); }
.eb-faq__antwort { margin-top: 12px; color: var(--eb-muted); font-size: 16px; line-height: 1.55; }
.eb-faq__antwort p + p { margin-top: 12px; }

/* ---------- Kontakt ---------- */
.eb-kontakt__info { display: flex; flex-direction: column; }
.eb-kontakt__info .eb-h2, .eb-kontakt__info .eb-h1 { margin-bottom: 16px; }
.eb-kontakt__wege { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 32px 0 24px; }
.eb-kontakt__wege li { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.eb-kontakt__wege .eb-ico { color: var(--eb-accent); }
.eb-kontakt__wege a { font-weight: 600; text-decoration: none; }
.eb-kontakt__wege a:hover { color: var(--eb-accent); text-decoration: underline; text-underline-offset: 4px; }
.eb-kontakt__wege address { color: var(--eb-muted); }
.eb-kontakt__info > .eb-btn { align-self: flex-start; }
.eb-kontakt__zusatz { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; color: var(--eb-muted); font-size: 16px; }
.eb-kontakt__zusatz .eb-btn { align-self: flex-start; }

.eb-formular-karte { background: var(--eb-paper); border-radius: 16px; padding: 32px; }
.eb-formular { display: flex; flex-direction: column; gap: 20px; }
.eb-feldreihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.eb-feld, .feldgruppe { display: flex; flex-direction: column; gap: 8px; }
.eb-feld__label, .lb { font-size: 15px; font-weight: 600; }
.eb-feld__eingabe, .fld {
  display: block; width: 100%; min-height: 48px; padding: 14px 16px;
  border: 1px solid var(--eb-line); border-radius: 10px;
  background: var(--eb-paper); color: var(--eb-ink);
  font: 400 16px/1.4 var(--eb-font);
}
.eb-feld__eingabe:focus-visible, .fld:focus-visible { outline: 3px solid var(--eb-ink); outline-offset: 2px; }
.eb-feld__eingabe[aria-invalid="true"], .fld[aria-invalid="true"] { border-color: var(--eb-fehler); }
textarea.eb-feld__eingabe { min-height: 120px; resize: vertical; }
select.eb-feld__eingabe {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%231F2421' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.fld--kurz { max-width: 160px; }
.rechenfrage .hinweis { font-weight: 400; color: var(--eb-muted); }
.eb-feld__fehler, .feld-fehler { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--eb-fehler); }
.eb-feld__fehler .eb-ico { color: var(--eb-fehler); }
.eb-einwilligung { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--eb-muted); }
.eb-einwilligung input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--eb-accent); }
.eb-einwilligung a { color: var(--eb-ink); }
.eb-meldung { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 12px; background: var(--eb-ground); }
.eb-meldung--fehler { border: 1px solid var(--eb-fehler); }
.eb-meldung ul { padding-left: 1.2em; }
.eb-meldung__ico { width: 32px; height: 32px; color: var(--eb-accent); }
@media (max-width: 900px) {
  .eb-formular-karte { padding: 24px; }
}
@media (max-width: 600px) {
  .eb-feldreihe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Fußzeile ---------- */
.eb-fuss { background: var(--eb-ink); color: var(--eb-dunkel-text); padding: 64px 0 32px; font-size: 16px; }
.eb-fuss__spalten { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.eb-fuss__name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; margin-bottom: 16px; }
.eb-fuss__text { font-size: 15px; line-height: 1.6; max-width: 360px; }
.eb-fuss__titel { font-weight: 600; color: #FFFFFF; margin-bottom: 16px; }
.eb-fuss__liste { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.eb-fuss a { color: var(--eb-dunkel-text); text-decoration: none; }
.eb-fuss a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.eb-fuss__unten { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 14px; color: var(--eb-dunkel-label); }
.eb-fuss__recht { list-style: none; display: flex; gap: 24px; }
.eb-fuss__recht a { color: var(--eb-dunkel-label); }
@media (max-width: 900px) {
  .eb-fuss { padding: 48px 0 24px; }
  .eb-fuss__spalten { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .eb-fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eb-fuss__marke { grid-column: 1 / -1; }
}

/* ---------- Unterseiten ---------- */
.eb-brotkrumen { padding-top: 24px; font-size: 15px; color: var(--eb-muted); }
.eb-brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.eb-brotkrumen li + li::before { content: "/"; margin-right: 8px; }
.eb-brotkrumen a { color: var(--eb-muted); text-decoration: none; }
.eb-brotkrumen a:hover { color: var(--eb-accent); text-decoration: underline; text-underline-offset: 3px; }
.eb-seite { padding: 40px 0 var(--eb-sektion); }
.eb-seite__innen { max-width: 768px; }
.eb-seite__kopf { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; max-width: 720px; }
.eb-seite__kopf .eb-eyebrow { margin-bottom: 0; }
.eb-seite__kopf--breit { max-width: 760px; }
.eb-seite__kopf .eb-intro { max-width: none; }
.eb-prosa { max-width: 720px; font-size: 17px; line-height: 1.6; }
.eb-prosa--abstand { margin-top: 48px; }
.eb-prosa > * + * { margin-top: 1.2em; }
.eb-prosa h2 { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; margin-top: 2em; }
.eb-prosa h3 { font-size: 22px; line-height: 1.25; font-weight: 800; margin-top: 1.6em; }
.eb-prosa ul, .eb-prosa ol { padding-left: 1.3em; }
.eb-prosa li + li { margin-top: .4em; }
.eb-prosa a { color: var(--eb-accent); text-decoration: underline; text-underline-offset: 3px; }
.eb-prosa a:hover { color: var(--eb-accent-hover); }
.eb-prosa img { border-radius: 12px; }
.eb-prosa figure { margin: 0; }
.eb-prosa figcaption { font-size: 15px; color: var(--eb-muted); margin-top: 8px; }
.eb-prosa blockquote { margin: 0; padding-left: 24px; border-left: 3px solid var(--eb-accent); font-size: var(--eb-intro); color: var(--eb-muted); }
.eb-prosa table { width: 100%; border-collapse: collapse; font-size: 16px; }
.eb-prosa th, .eb-prosa td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--eb-line); vertical-align: top; }
.eb-prosa th { font-weight: 600; border-bottom: 2px solid var(--eb-ink); }
.eb-prosa hr { border: 0; border-top: 1px solid var(--eb-line); }
.eb-leistung__bild { border-radius: 24px; }
.eb-galerie__bild { border-radius: 16px; }
.eb-linkliste { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.eb-karte-link { position: relative; display: block; border-radius: 24px; overflow: hidden; text-decoration: none; }
.eb-kontakt__karte { border-radius: 24px; }
.eb-karte-link__text { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: var(--eb-paper); color: var(--eb-ink); font-size: 15px; font-weight: 600; box-shadow: var(--eb-schatten); }

/* Filter-Chips und Seitenzahlen */
.eb-filter { margin-bottom: 48px; }
.eb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.eb-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 2px solid var(--eb-ink); border-radius: 999px; color: var(--eb-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.eb-chip:hover { background: var(--eb-sand); color: var(--eb-ink); }
.eb-chip--aktiv { background: var(--eb-ink); color: #FFFFFF; }
.eb-chip--aktiv:hover { background: var(--eb-ink); color: #FFFFFF; }
.eb-chip__zahl { font-weight: 400; opacity: .7; }
.eb-seitenzahlen { margin-top: 48px; }
.eb-seitenzahlen .nav-links { display: flex; flex-wrap: wrap; gap: 12px; }
.eb-seitenzahlen a, .eb-seitenzahlen .current { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--eb-ink); border-radius: 999px; text-decoration: none; color: var(--eb-ink); font-weight: 600; }
.eb-seitenzahlen .current { background: var(--eb-ink); color: #FFFFFF; }
.eb-seitenzahlen .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

/* Suche */
.eb-suche { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.eb-suche__zeile { display: flex; gap: 12px; flex-wrap: wrap; }
.eb-suche__zeile .eb-feld__eingabe { flex: 1 1 240px; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Druck ---------- */
@media print {
  .eb-topbar, .eb-burger, .eb-header__cta, .eb-formular-karte, .sprung, .eb-faecher { display: none !important; }
  body { background: #fff; color: #000; }
  .eb-sektion--dunkel, .eb-fuss { background: #fff; color: #000; }
}

/* ---------- Schrift-Vorschau (nur bis zur Entscheidung, inc/vorschau-schrift.php) ----------
   Werkzeug mit ?schrift=1 einblenden (inc/vorschau-schrift.php, assets/js/schriftwahl.js). Danach: Gewinner oben in den Tokens
   festschreiben, Modul, Skript und die nicht gewählten Schriftdateien löschen. */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Karla"; src: url("../fonts/karla.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Varianten wählt das Schrift-Werkzeug (?schrift=1) live über CSS-Variablen; lokale Schriften oben stehen in der Liste als „(lokal)“. */