/* =========================================================
   Eggers Holzbau – Designsystem für WordPress
   AUTOMATISCH ERZEUGT aus css/style.css der statischen Fassung.
   Nicht hier bearbeiten – Quelle ist das Projekt im Vault unter
   02-Bereiche/Marketing & Akquise/Website & SEO/Website-Relaunch-2026/

   Jede Regel ist auf `body.eh-design` eingeschränkt. Das mu-plugin
   setzt diese Klasse nur auf migrierten Seiten, damit die breiten
   Selektoren (h1–h4, a, img, section, input) weder mit dem Royal-Theme
   kollidieren noch auf bereits bestehende, nicht umgestellte Seiten
   durchschlagen.
   ========================================================= */

:root{
  /* Farben */
  --c-cream: #F7F2E9;
  --c-cream-alt: #EFE6D3;
  --c-paper: #FCFAF5;
  --c-ink: #211D18;
  --c-ink-soft: #4A443C;
  --c-timber: #8A5A2E;
  --c-timber-dark: #5C3A1E;
  --c-timber-light: #C8955C;
  --c-forest: #3E4B37;
  --c-forest-light: #6B7A5E;
  --c-rust: #B34F26;
  --c-rust-dark: #8F3D1C;
  /* Trennlinien in Holzton statt neutralem Grau – wirkt materialnah statt generisch */
  --c-line: rgba(92,58,30,0.18);
  --c-line-strong: rgba(92,58,30,0.36);

  /* Typografie – self-hosted, siehe fonts.css */
  --font-serif: 'Newsreader', Georgia, 'Iowan Old Style', serif;
  --font-sans: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Kante: architektonisch scharf. Runde Formen nur bewusst (Pills/Avatare). */
  --radius: 0px;

  /* Vertikaler Rhythmus – bewusst unterschiedlich, kein Einheitsabstand */
  --space-loose: 112px;   /* großzügige Sektion */
  --space-base: 80px;     /* Standard */
  --space-tight: 52px;    /* dichte Sektion, folgt meist auf eine großzügige */

  --shadow-soft: 0 12px 32px rgba(33,29,24,0.10);
  --shadow-strong: 0 20px 48px rgba(33,29,24,0.18);
  --max-width: 1180px;

  /* Feine Papierkörnung – gibt den Flächen Material statt Flachfarbe */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body.eh-design{
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* WordPress-Anpassung: body wird eigener Stapelkontext, damit die
     Körnung darunter liegt, ohne dass jedes body-Kind einen z-index
     braucht. Die statische Fassung löste das über `body > *` – in
     WordPress hätte das mit Cookie-Banner und Admin-Bar kollidiert. */
  position: relative;
  z-index: 0;
}

/* Körnung liegt als eigene Ebene über dem Hintergrund, nicht über dem Inhalt */
body.eh-design::before{
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.035;
  pointer-events: none;
  z-index: -1;
}

body.eh-design img{ max-width: 100%; display: block; }
/* Lange URLs (z. B. der EU-Streitschlichtungs-Link im Impressum) sind
   unbrechbar und sprengen sonst schmale Displays. */
body.eh-design a{ color: inherit; overflow-wrap: break-word; }
body.eh-design .wrap{ max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }

body.eh-design h1, body.eh-design h2, body.eh-design h3, body.eh-design h4{
  font-family: var(--font-serif);
  color: var(--c-timber-dark);
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
  font-weight: 600;
  /* Deutsche Komposita wie "Fassadensanierung" sind als ein Wort breiter als
     ein schmales Display. Ohne Trennung erzwingen sie horizontales Scrollen.
     `hyphens` nutzt die Trennmuster zu lang="de", break-word ist der Notnagel. */
  hyphens: auto;
  overflow-wrap: break-word;
}
body.eh-design h1{ font-size: clamp(2.4rem, 5.4vw, 4rem); }
body.eh-design h2{ font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
body.eh-design h3{ font-size: 1.35rem; }
body.eh-design p{ margin: 0 0 1.1em; }
body.eh-design .lede{ font-size: 1.15rem; color: var(--c-ink-soft); max-width: 62ch; }

/* Editorial-Bausteine – Alternativen zur immergleichen Eyebrow-Formel */
body.eh-design .display-num{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.9;
  color: var(--c-timber-light);
  letter-spacing: -0.03em;
}
body.eh-design .lead-quote{
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.3;
  color: var(--c-timber-dark);
  max-width: 22ch;
  margin: 0;
}
body.eh-design .rule{ border: 0; border-top: 1px solid var(--c-line); margin: 0; }

/* Editorialer Schlussabsatz: trägt die regionalen Suchbegriffe, ohne
   wie ein angehängter SEO-Textblock zu wirken (zweispaltig, ruhig gesetzt) */
body.eh-design .seo-prose__grid{
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
  gap: 20px 64px;
  padding-top: 44px;
}
body.eh-design .seo-prose__grid h2{
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin: 0;
  align-self: start;
  position: sticky;
  top: 108px;
}
body.eh-design .seo-prose p{
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--c-ink-soft);
  max-width: 68ch;
}
body.eh-design .seo-prose p:last-child{ margin-bottom: 0; }
body.eh-design .seo-prose strong{ color: var(--c-ink); font-weight: 600; }
body.eh-design .seo-prose a{ color: var(--c-rust); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px){
  body.eh-design .seo-prose__grid{ grid-template-columns: 1fr; gap: 20px; }
  body.eh-design .seo-prose__grid h2{ position: static; }
}

body.eh-design .eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-rust);
  margin-bottom: 14px;
}
body.eh-design .eyebrow::before{
  content: "";
  width: 22px; height: 1px;
  background: var(--c-rust);
  display: inline-block;
}

/* ---------- Buttons ---------- */
body.eh-design .btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
body.eh-design .btn:hover{ transform: translateY(-2px); }
body.eh-design .btn-primary{ background: var(--c-rust); color: var(--c-paper); }
body.eh-design .btn-primary:hover{ background: var(--c-rust-dark); }
body.eh-design .btn-outline{ background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
body.eh-design .btn-outline:hover{ border-color: var(--c-ink); }
body.eh-design .btn-ghost-light{ background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.4); }
body.eh-design .btn-ghost-light:hover{ background: rgba(255,255,255,0.18); }
body.eh-design .btn-block{ width: 100%; justify-content: center; }

/* ---------- Topbar ---------- */
body.eh-design .topbar{
  background: var(--c-ink);
  color: rgba(255,255,255,0.75);
  font-size: 0.82rem;
}
body.eh-design .topbar .wrap{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px; padding-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}
body.eh-design .topbar a{ color: rgba(255,255,255,0.85); text-decoration: none; }
body.eh-design .topbar a:hover{ color: #fff; }
body.eh-design .topbar-links{ display: flex; gap: 20px; flex-wrap: wrap; }
body.eh-design .topbar-area{ opacity: 0.85; }

/* ---------- Header / Nav ---------- */
body.eh-design header.site-header{
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line);
  position: sticky;
  top: 0;
  z-index: 50;
}
body.eh-design .nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 20px;
}
body.eh-design .brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--c-ink);
}
body.eh-design .brand-mark{ width: 42px; height: 42px; flex-shrink: 0; object-fit: contain; }
body.eh-design .brand-text{ display: flex; flex-direction: column; line-height: 1.1; }
body.eh-design .brand-name{ font-family: var(--font-serif); font-size: 1.15rem; color: var(--c-timber-dark); font-weight: 700; }
body.eh-design .brand-sub{ font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-soft); }

body.eh-design .nav-links{
  display: flex;
  align-items: center;
  gap: 0px;
  list-style: none;
  margin: 0; padding: 0;
}
body.eh-design .nav-links a{
  display: inline-block;
  padding: 8px 8px;
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
body.eh-design .nav-links a:hover, body.eh-design .nav-links a.active{ color: var(--c-timber-dark); background: var(--c-cream-alt); }
body.eh-design .nav-cta{ display: flex; align-items: center; gap: 10px; }

body.eh-design .nav-toggle{
  display: none;
  background: none; border: 1px solid var(--c-line-strong); border-radius: var(--radius);
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
body.eh-design .nav-toggle span, body.eh-design .nav-toggle span::before, body.eh-design .nav-toggle span::after{
  content: ""; display: block; width: 20px; height: 2px; background: var(--c-ink); position: relative;
  transition: all .2s ease;
}
body.eh-design .nav-toggle span::before{ position: absolute; top: -6px; }
body.eh-design .nav-toggle span::after{ position: absolute; top: 6px; }

@media (max-width: 1040px){
  body.eh-design .nav-links{
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--c-paper);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 28px 20px;
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-soft);
  }
  body.eh-design .nav-links.open{ display: flex; }
  body.eh-design .nav-links a{ padding: 12px 8px; border-bottom: 1px solid var(--c-line); }
  body.eh-design .nav-cta .btn-outline{ display: none; }
  body.eh-design .nav-toggle{ display: flex; }
}

/* Sehr schmale Geräte (z. B. 320px und darunter): Der CTA-Button im Header
   passt neben Logo und Menü-Button nicht mehr und erzeugt horizontales Scrollen.
   Kontakt bleibt über das Menü und die CTAs im Seiteninhalt erreichbar. */
@media (max-width: 480px){
  body.eh-design .nav-cta .btn{ display: none; }
  body.eh-design .wrap{ padding: 0 18px; }
  body.eh-design .brand-mark{ width: 34px; height: 34px; }
  body.eh-design .brand-name{ font-size: 1rem; }
  body.eh-design .brand-sub{ font-size: 0.6rem; }
  /* Ohne das erzwingt `white-space: nowrap` bei langen Button-Texten
     ("Kostenschätzung selbst berechnen") eine Mindestbreite von >300px
     und damit horizontales Scrollen. */
  body.eh-design .btn{
    white-space: normal;
    padding: 13px 18px;
    font-size: 0.92rem;
    text-align: center;
  }
  body.eh-design .hero-actions .btn{ width: 100%; justify-content: center; }
  body.eh-design .segmented label{ flex-basis: 100%; }
}

/* ---------- Hero ---------- */
body.eh-design .hero{
  position: relative;
  background: linear-gradient(160deg, var(--c-ink) 0%, var(--c-timber-dark) 130%);
  color: var(--c-paper);
  overflow: hidden;
}
body.eh-design .hero::before{
  content: "";
  position: absolute; inset: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
body.eh-design .hero-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  padding: 84px 0 96px;
}
body.eh-design .hero p.lede{ color: rgba(252,250,245,0.82); }
body.eh-design .hero h1{ color: #fff; }
body.eh-design .hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
body.eh-design .hero-art{ width: 100%; height: auto; }
body.eh-design .hero-facts{
  display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.18); padding-top: 24px;
}
body.eh-design .hero-fact strong{ display: block; font-family: var(--font-serif); font-size: 1.6rem; color: #fff; }
body.eh-design .hero-fact span{ font-size: 0.82rem; color: rgba(252,250,245,0.7); }

@media (max-width: 860px){
  body.eh-design .hero-grid{ grid-template-columns: 1fr; padding: 52px 0 60px; }
  body.eh-design .hero-art{ max-width: 320px; margin: 0 auto; }
}

/* ---------- Hero: randlos mit Foto und Textüberlagerung ---------- */
body.eh-design .hero-full{
  position: relative;
  min-height: min(82vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
  isolation: isolate;
}
body.eh-design .hero-full__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
body.eh-design .hero-full__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
/* Verlauf sichert die Lesbarkeit der Headline über dem Foto (Kontrast >4.5:1) */
body.eh-design .hero-full__media::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(33,29,24,0.94) 0%, rgba(33,29,24,0.72) 38%, rgba(33,29,24,0.22) 68%, rgba(33,29,24,0.34) 100%),
    linear-gradient(to right, rgba(33,29,24,0.7) 0%, rgba(33,29,24,0) 62%);
}
body.eh-design .hero-full__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 76px;
  padding-bottom: 40px;
}
/* Bewusst kleiner als die globale h1-Skala: Der Hero lebt vom Foto,
   nicht von einer Headline, die die Faktenleiste aus dem Bild schiebt. */
body.eh-design .hero-full h1{
  color: #fff;
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  max-width: 15ch;
  margin-bottom: 0.45em;
  text-wrap: balance;
}
body.eh-design .hero-full .lede{
  color: rgba(252,250,245,0.86);
  max-width: 42ch;
  font-size: 1.05rem;
}
body.eh-design .hero-full .hero-actions{ margin-top: 24px; }
body.eh-design .hero-full__kicker{
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Heller Sandton statt --c-timber-light: Über dem Foto erreicht Timber-Light
     nur 4,44:1 und verfehlt damit die 4,5:1-Anforderung für kleinen Text. */
  color: #E7D9BD;
  margin-bottom: 22px;
  display: block;
}
/* Faktenleiste sitzt am unteren Rand des Heros, als Abschlusskante */
body.eh-design .hero-full__facts{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid rgba(252,250,245,0.22);
}
body.eh-design .hero-full__facts div{
  padding: 18px 30px 0 0;
  margin-right: 30px;
  border-right: 1px solid rgba(252,250,245,0.14);
}
body.eh-design .hero-full__facts div:last-child{ border-right: 0; margin-right: 0; }
body.eh-design .hero-full__facts strong{
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  color: #fff;
  margin-bottom: 6px;
}
body.eh-design .hero-full__facts span{ font-size: 0.8rem; color: rgba(252,250,245,0.72); }

@media (max-width: 760px){
  body.eh-design .hero-full{ min-height: 0; }
  body.eh-design .hero-full__inner{ padding-top: 72px; padding-bottom: 44px; }
  body.eh-design .hero-full__media img{ object-position: center 18%; }
  body.eh-design .hero-full__facts div{ padding-right: 20px; margin-right: 20px; }
  body.eh-design .hero-full__facts strong{ font-size: 1.45rem; }
}

/* ---------- Full-Bleed-Bildband (Bilder dürfen aus dem Raster laufen) ---------- */
body.eh-design .bleed-band{
  position: relative;
  width: 100%;
  height: clamp(260px, 42vw, 460px);
  overflow: hidden;
}
body.eh-design .bleed-band img{ width: 100%; height: 100%; object-fit: cover; }

/* ---------- Werte: Editorial-Block statt Pillen-Reihe ---------- */
body.eh-design .values-bar{
  background: var(--c-cream-alt);
  border-bottom: 1px solid var(--c-line);
}
body.eh-design .values-editorial{
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) 1fr;
  gap: 20px 56px;
  padding: var(--space-tight) 0;
  align-items: start;
}
body.eh-design .values-editorial .lead-quote{ max-width: 16ch; }
body.eh-design .values-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px 40px;
  list-style: none; margin: 0; padding: 0;
}
body.eh-design .values-list li{
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.98rem;
  color: var(--c-ink);
}
/* Laufende Nummerierung statt Icons – ruhiger und typografisch statt Icon-Salat */
body.eh-design .values-list li::before{
  content: counter(value-counter, decimal-leading-zero);
  counter-increment: value-counter;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--c-timber-light);
  flex-shrink: 0;
}
body.eh-design .values-list{ counter-reset: value-counter; }
@media (max-width: 760px){
  body.eh-design .values-editorial{ grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Sections ---------- */
body.eh-design section{ padding: var(--space-base) 0; }
body.eh-design section.loose{ padding: var(--space-loose) 0; }
body.eh-design section.tight{ padding: var(--space-tight) 0; }
body.eh-design .section-head{ max-width: 700px; margin-bottom: 48px; }
body.eh-design .section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
body.eh-design .bg-alt{ background: var(--c-cream-alt); }
body.eh-design .bg-ink{ background: var(--c-ink); color: rgba(252,250,245,0.88); }
body.eh-design .bg-ink h2, body.eh-design .bg-ink h3{ color: #fff; }
body.eh-design .bg-ink .lede{ color: rgba(252,250,245,0.75); }

/* Sektionskopf mit Zählung statt Eyebrow – gibt Rhythmus ohne Formelwiederholung */
body.eh-design .section-head-num{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 28px;
  align-items: start;
  margin-bottom: 52px;
}
body.eh-design .section-head-num .display-num{ grid-row: span 2; }
body.eh-design .section-head-num h2{ margin: 0 0 0.35em; align-self: end; }
body.eh-design .section-head-num .lede{ margin: 0; }
@media (max-width: 640px){
  body.eh-design .section-head-num{ grid-template-columns: 1fr; gap: 12px; }
  body.eh-design .section-head-num .display-num{ grid-row: auto; }
}

/* ---------- Leistungs-Cards: bewusste Hierarchie statt Gleichmacherei ---------- */
body.eh-design .card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 28px;
}
@media (max-width: 640px){ body.eh-design .card-grid{ grid-template-columns: 1fr; } }

/* Leitmotiv-Layout: eine dominante Karte, daneben die Sekundären gestapelt */
body.eh-design .card-lead-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: stretch;
}
body.eh-design .card-lead-grid .card-stack{ display: grid; gap: 24px; align-content: start; }
@media (max-width: 860px){
  body.eh-design .card-lead-grid{ grid-template-columns: 1fr; }
}

body.eh-design .service-card{
  display: flex; flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 34px 30px;
  text-decoration: none;
  color: var(--c-ink);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
body.eh-design .service-card:hover{ box-shadow: var(--shadow-soft); transform: translateY(-4px); border-color: var(--c-timber-light); }
body.eh-design .service-card .icon{ width: 32px; height: 32px; color: var(--c-timber); margin-bottom: 20px; }
body.eh-design .service-card h3{ margin-bottom: 10px; }
body.eh-design .service-card p{ color: var(--c-ink-soft); font-size: 0.96rem; flex-grow: 1; }
body.eh-design .service-card .card-link{ margin-top: 20px; font-weight: 600; font-size: 0.9rem; color: var(--c-rust); }

/* Die dominante Karte: dunkel, größer gesetzt, trägt die Sektion */
body.eh-design .service-card--lead{
  background: var(--c-timber-dark);
  border-color: var(--c-timber-dark);
  color: var(--c-cream);
  padding: 44px 40px;
  justify-content: flex-end;
  min-height: 340px;
}
body.eh-design .service-card--lead h3{ color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 14px; }
body.eh-design .service-card--lead p{ color: rgba(252,250,245,0.82); font-size: 1.02rem; flex-grow: 0; }
body.eh-design .service-card--lead .icon{ color: var(--c-timber-light); width: 40px; height: 40px; margin-bottom: auto; }
body.eh-design .service-card--lead .card-link{ color: var(--c-timber-light); }
body.eh-design .service-card--lead:hover{ border-color: var(--c-timber-light); }

/* ---------- Kran-Promo ---------- */
body.eh-design .crane-promo{
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: var(--c-timber-dark); color: #fff;
  border-radius: var(--radius);
  padding: 56px;
}
body.eh-design .crane-promo .eyebrow, body.eh-design .crane-promo .eyebrow::before{ color: #E7D9BD; background: #E7D9BD; }
body.eh-design .crane-promo h2{ color: #fff; }
body.eh-design .crane-promo p{ color: rgba(255,255,255,0.85); }
/* Freigestellter Kran: Der weiße Ausleger steht direkt auf dem dunklen
   Braun. `display: block` verhindert die Grundlinien-Lücke unter dem Bild. */
body.eh-design .crane-promo .art{ display: block; width: 100%; }
body.eh-design .crane-promo .art img{ width: 100%; height: auto; }
@media (max-width: 860px){
  body.eh-design .crane-promo{ grid-template-columns: 1fr; padding: 36px 26px; }
  body.eh-design .crane-promo .art{ max-width: 420px; margin: 0 auto; order: -1; }
}

/* ---------- Prozess / Schritte ---------- */
body.eh-design .steps{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step;
}
@media (max-width: 900px){ body.eh-design .steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ body.eh-design .steps{ grid-template-columns: 1fr; } }
body.eh-design .step{ position: relative; padding-top: 8px; }
body.eh-design .step::before{
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--c-timber-light);
  display: block;
  margin-bottom: 10px;
}
body.eh-design .step h4{ margin-bottom: 8px; font-size: 1.05rem; }
body.eh-design .step p{ font-size: 0.92rem; color: var(--c-ink-soft); margin: 0; }

/* ---------- Pain points / Problem-Liste ---------- */
body.eh-design .problem-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px){ body.eh-design .problem-grid{ grid-template-columns: 1fr; } }
body.eh-design .problem-item{
  display: flex; gap: 14px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-rust);
  padding: 18px 20px;
  border-radius: var(--radius);
}
body.eh-design .problem-item svg{ width: 22px; height: 22px; color: var(--c-rust); flex-shrink: 0; margin-top: 2px; }
body.eh-design .problem-item p{ margin: 0; font-size: 0.95rem; color: var(--c-ink-soft); }
body.eh-design .problem-item strong{ color: var(--c-ink); }

/* ---------- Material / Nachhaltigkeit ---------- */
body.eh-design .material-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px){ body.eh-design .material-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ body.eh-design .material-grid{ grid-template-columns: 1fr; } }
body.eh-design .material-card{ text-align: center; padding: 24px 16px; }
body.eh-design .material-card .icon{ width: 40px; height: 40px; margin: 0 auto 14px; color: var(--c-forest); }
body.eh-design .material-card h4{ font-size: 0.98rem; margin-bottom: 6px; }
body.eh-design .material-card p{ font-size: 0.85rem; color: var(--c-ink-soft); margin: 0; }

/* ---------- FAQ ---------- */
body.eh-design .faq{ max-width: 820px; margin: 0 auto; }
body.eh-design .faq-item{ border-bottom: 1px solid var(--c-line); }
body.eh-design .faq-item summary{
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  color: var(--c-timber-dark);
}
body.eh-design .faq-item summary::-webkit-details-marker{ display: none; }
body.eh-design .faq-item summary::after{
  content: "+";
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--c-rust);
  flex-shrink: 0;
}
body.eh-design .faq-item[open] summary::after{ content: "\2212"; }
body.eh-design .faq-item p{ padding: 0 4px 22px; color: var(--c-ink-soft); max-width: 68ch; }

/* ---------- Förderprogramme Tabelle/Karten ---------- */
body.eh-design .funding-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px){ body.eh-design .funding-grid{ grid-template-columns: 1fr; } }
body.eh-design .funding-card{
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 28px;
}
body.eh-design .funding-card .tag{
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-forest); background: rgba(62,75,55,0.1);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
}
body.eh-design .funding-card ul{ margin: 14px 0 0; padding-left: 18px; font-size: 0.92rem; color: var(--c-ink-soft); }
body.eh-design .funding-card li{ margin-bottom: 6px; }

body.eh-design .note-box{
  background: var(--c-cream-alt);
  border-left: 3px solid var(--c-timber);
  padding: 18px 22px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--c-ink-soft);
}

/* ---------- Team ---------- */
body.eh-design .team-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 700px){ body.eh-design .team-grid{ grid-template-columns: 1fr; } }
body.eh-design .team-card{ background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 30px; display: flex; gap: 20px; align-items: flex-start; }
body.eh-design .team-avatar{
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(145deg, var(--c-timber-light), var(--c-timber-dark));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700;
}
body.eh-design .team-card h3{ margin-bottom: 2px; }
/* Auf sehr schmalen Displays passen Avatar und Text nicht nebeneinander */
@media (max-width: 480px){
  body.eh-design .team-card{ flex-direction: column; gap: 14px; padding: 22px; }
}
body.eh-design .team-role{ font-size: 0.85rem; color: var(--c-rust); font-weight: 700; margin-bottom: 10px; display: block; }

body.eh-design .stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
@media (max-width: 700px){ body.eh-design .stat-grid{ grid-template-columns: 1fr 1fr; } }
/* Muss nach der 700px-Regel stehen, sonst gewinnt diese bei gleicher Spezifität */
@media (max-width: 480px){ body.eh-design .stat-grid{ grid-template-columns: 1fr; } }
body.eh-design .stat{ padding: 20px; }
body.eh-design .stat strong{ display: block; font-family: var(--font-serif); font-size: 2.2rem; color: var(--c-timber-dark); }
body.eh-design .bg-ink .stat strong{ color: #fff; }
body.eh-design .stat span{ font-size: 0.85rem; color: var(--c-ink-soft); }
body.eh-design .bg-ink .stat span{ color: rgba(252,250,245,0.7); }

/* Zahlen im Fließtext statt 4-spaltigem Zahlenraster */
body.eh-design .stat-prose{
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.5;
  color: var(--c-timber-dark);
  max-width: 26ch;
  margin: 0;
}
body.eh-design .stat-prose b{
  font-weight: 600;
  font-size: 1.35em;
  color: var(--c-rust);
  font-variant-numeric: lining-nums;
}
body.eh-design .stat-prose .muted{
  display: block;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 40ch;
  margin-top: 22px;
}

/* ---------- Einzugsgebiet ---------- */
body.eh-design .area-block{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px){ body.eh-design .area-block{ grid-template-columns: 1fr; } }
body.eh-design .area-tags{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
body.eh-design .area-tags span{
  background: var(--c-cream-alt); border: 1px solid var(--c-line);
  padding: 8px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
}

/* ---------- Kontakt / Forms ---------- */
body.eh-design .contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 860px){ body.eh-design .contact-grid{ grid-template-columns: 1fr; } }
body.eh-design .contact-list{ list-style: none; margin: 24px 0 0; padding: 0; }
body.eh-design .contact-list li{ display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
body.eh-design .contact-list svg{ width: 22px; height: 22px; color: var(--c-rust); flex-shrink: 0; }
body.eh-design .contact-list a{ text-decoration: none; font-weight: 600; }
body.eh-design .contact-list a:hover{ color: var(--c-rust); }

body.eh-design form.contact-form{ display: flex; flex-direction: column; gap: 16px; }
body.eh-design .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px){ body.eh-design .form-row{ grid-template-columns: 1fr; } }
body.eh-design label{ font-size: 0.85rem; font-weight: 700; color: var(--c-ink-soft); display: block; margin-bottom: 6px; }
body.eh-design input, body.eh-design select, body.eh-design textarea{
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-paper);
  color: var(--c-ink);
}
body.eh-design input:focus, body.eh-design select:focus, body.eh-design textarea:focus{ outline: 2px solid var(--c-timber); outline-offset: 1px; }
body.eh-design .form-note{ font-size: 0.8rem; color: var(--c-ink-soft); }
body.eh-design .form-status{ font-size: 0.9rem; font-weight: 600; padding: 10px 0; display: none; }
body.eh-design .form-status.visible{ display: block; }

/* ---------- CTA Band ---------- */
body.eh-design .cta-band{
  background: var(--c-timber-dark);
  color: #fff;
  text-align: center;
  padding: 64px 0;
}
body.eh-design .cta-band h2{ color: #fff; }
body.eh-design .cta-band .lede{ color: rgba(255,255,255,0.8); margin-left: auto; margin-right: auto; }
body.eh-design .cta-band .btn-primary{ margin-top: 10px; }

/* ---------- Footer ---------- */
body.eh-design footer.site-footer{ background: var(--c-ink); color: rgba(252,250,245,0.7); padding: 60px 0 24px; }
body.eh-design .footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 800px){ body.eh-design .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px){ body.eh-design .footer-grid{ grid-template-columns: 1fr; } }
body.eh-design .footer-grid h4{ color: #fff; font-family: var(--font-sans); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
body.eh-design .footer-grid ul{ list-style: none; margin: 0; padding: 0; }
body.eh-design .footer-grid li{ margin-bottom: 10px; }
body.eh-design .footer-grid a{ text-decoration: none; font-size: 0.92rem; }
body.eh-design .footer-grid a:hover{ color: #fff; }
body.eh-design .footer-brand p{ font-size: 0.9rem; max-width: 32ch; }
body.eh-design .footer-bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 22px; font-size: 0.8rem; }
body.eh-design .footer-bottom a{ text-decoration: none; }
body.eh-design .footer-bottom a:hover{ color: #fff; }

/* ---------- Breadcrumb / Page hero (Unterseiten) ---------- */
body.eh-design .page-hero{
  background: var(--c-cream-alt);
  border-bottom: 1px solid var(--c-line);
  padding: 56px 0;
}
body.eh-design .page-hero .eyebrow{ margin-bottom: 10px; }
body.eh-design .breadcrumb{ font-size: 0.82rem; color: var(--c-ink-soft); margin-bottom: 18px; }
body.eh-design .breadcrumb a{ text-decoration: none; }
body.eh-design .breadcrumb a:hover{ color: var(--c-rust); }

body.eh-design .page-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}
@media (max-width: 860px){ body.eh-design .page-hero-grid{ grid-template-columns: 1fr; } }
body.eh-design .page-hero-photo{
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
}

body.eh-design .skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--c-ink); color: #fff; padding: 12px 18px; z-index: 200;
}
body.eh-design .skip-link:focus{ left: 12px; top: 12px; }

/* ---------- Sichtbarer Fokus für Tastaturbedienung ---------- */
body.eh-design a:focus-visible, body.eh-design button:focus-visible, body.eh-design summary:focus-visible, body.eh-design [tabindex]:focus-visible{
  outline: 2px solid var(--c-rust);
  outline-offset: 3px;
}

/* ---------- Dezente Scroll-Reveals ---------- */
body.eh-design .reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
body.eh-design .reveal.is-visible{ opacity: 1; transform: none; }

/* Bewegungsreduktion respektieren – Inhalte bleiben immer sichtbar */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body.eh-design .reveal{ opacity: 1; transform: none; }
  body.eh-design .btn:hover, body.eh-design .service-card:hover{ transform: none; }
}

/* ---------- Dachsanierungs-Kalkulator ---------- */
body.eh-design .calc-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px){ body.eh-design .calc-grid{ grid-template-columns: 1fr; } }

body.eh-design .calc-form{
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
body.eh-design .calc-group label.calc-label{
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--c-ink);
  margin-bottom: 10px;
}
body.eh-design .calc-group .calc-hint{
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--c-ink-soft);
  display: block;
  margin-top: 4px;
}

body.eh-design .segmented{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.eh-design .segmented input{
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
body.eh-design .segmented label{
  flex: 1 1 auto;
  text-align: center;
  padding: 12px 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: all .15s ease;
  background: var(--c-cream);
}
body.eh-design .segmented label span.sub{ display:block; font-weight: 400; font-size: 0.76rem; margin-top: 2px; color: var(--c-ink-soft); }
body.eh-design .segmented input:checked + label{
  background: var(--c-timber-dark);
  border-color: var(--c-timber-dark);
  color: #fff;
}
body.eh-design .segmented input:checked + label span.sub{ color: rgba(255,255,255,0.75); }
body.eh-design .segmented input:focus-visible + label{ outline: 2px solid var(--c-timber); outline-offset: 2px; }

body.eh-design .calc-range{
  display: flex;
  align-items: center;
  gap: 16px;
}
body.eh-design .calc-range input[type="range"]{
  flex-grow: 1;
  accent-color: var(--c-timber-dark);
}
body.eh-design .calc-range .calc-range-value{
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--c-timber-dark);
  min-width: 78px;
  text-align: right;
}

body.eh-design .calc-checkbox{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
body.eh-design .calc-checkbox input{ margin-top: 3px; accent-color: var(--c-timber-dark); }
body.eh-design .calc-checkbox span{ font-size: 0.9rem; color: var(--c-ink-soft); }

body.eh-design .calc-result{
  position: sticky;
  top: 100px;
  background: var(--c-ink);
  color: rgba(252,250,245,0.9);
  border-radius: var(--radius);
  padding: 32px;
}
body.eh-design .calc-result .eyebrow{ color: #E7D9BD; }
body.eh-design .calc-result .eyebrow::before{ background: #E7D9BD; }
body.eh-design .calc-result h3{ color: #fff; margin-bottom: 4px; }
body.eh-design .calc-total{
  font-family: var(--font-serif);
  font-size: 2.1rem;
  color: #fff;
  margin: 6px 0 4px;
}
body.eh-design .calc-total .per-m2{ display:block; font-family: var(--font-sans); font-size: 0.8rem; color: rgba(252,250,245,0.6); font-weight: 400; margin-top: 6px; }

body.eh-design .calc-breakdown{ list-style: none; margin: 22px 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.15); }
body.eh-design .calc-breakdown li{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-size: 0.88rem;
}
body.eh-design .calc-breakdown li span:first-child{ color: rgba(252,250,245,0.75); }
body.eh-design .calc-breakdown li span:last-child{ font-weight: 700; color: #fff; white-space: nowrap; }

body.eh-design .calc-disclaimer{
  font-size: 0.8rem;
  color: rgba(252,250,245,0.65);
  background: rgba(255,255,255,0.06);
  border-left: 3px solid var(--c-timber-light);
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
}

body.eh-design .calc-cta{ display: flex; flex-direction: column; gap: 10px; }

body.eh-design .calc-subtotal{
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: rgba(252,250,245,0.75);
  margin: -6px 0 18px;
}

body.eh-design .calc-funding{
  background: rgba(107,122,94,0.25);
  border: 1px solid var(--c-forest-light);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
}
body.eh-design .calc-funding .tag{
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cfe0c8;
  background: rgba(255,255,255,0.1);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
body.eh-design .calc-funding .amount{
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 6px;
}
body.eh-design .calc-funding p{
  font-size: 0.82rem;
  color: rgba(252,250,245,0.75);
  margin: 0;
}

/* Bebilderte Auswahl-Karten (z. B. Öffnungsart) */
body.eh-design .segmented-visual{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
body.eh-design .segmented-visual input{
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
body.eh-design .segmented-visual label{
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--c-cream);
  transition: all .15s ease;
  text-align: center;
}
body.eh-design .segmented-visual label img{
  width: 100%;
  max-width: 150px;
  height: 90px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
}
body.eh-design .segmented-visual label span.title{ font-weight: 700; font-size: 0.92rem; color: var(--c-ink); }
body.eh-design .segmented-visual label span.sub{ font-size: 0.76rem; color: var(--c-ink-soft); }
body.eh-design .segmented-visual input:checked + label{
  border-color: var(--c-timber-dark);
  background: var(--c-cream-alt);
  box-shadow: 0 0 0 2px var(--c-timber-dark) inset;
}
body.eh-design .segmented-visual input:focus-visible + label{ outline: 2px solid var(--c-timber); outline-offset: 2px; }

/* Zwei-Spalten-Showcase mit größerem Bild (z. B. Öffnungsarten-Erklärung) */
body.eh-design .type-showcase{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 700px){ body.eh-design .type-showcase{ grid-template-columns: 1fr; } }
body.eh-design .type-showcase-card{
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
body.eh-design .type-showcase-card img{
  width: 100%;
  max-width: 260px;
  height: 180px;
  object-fit: contain;
  background: #fff;
  margin: 0 auto 18px;
  display: block;
  border-radius: var(--radius);
}
body.eh-design .type-showcase-card h3{ margin-bottom: 8px; }
body.eh-design .type-showcase-card p{ color: var(--c-ink-soft); font-size: 0.95rem; margin: 0; }

body.eh-design .calc-note-inline{
  font-size: 0.82rem;
  color: rgba(252,250,245,0.75);
  background: rgba(255,255,255,0.08);
  border-left: 3px solid var(--c-timber-light);
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}