/* =====================================================================
   VHD Möbel – Website-Stylesheet
   Struktur übernommen von goldstadt-care.de (Eleventy-Referenz).
   Tokens aus Claude Design „VHD Startpalette“ (daten/marke/farben.md):
   Walnuss primär, Terracotta nur für Aktionen, Anthrazit als Anker,
   Creme statt Weiß. Schibsted Grotesk für alles, Bitter sparsam.
   Schriften lokal (kein Google-Fonts-Aufruf, § 25 TDDDG).
   ===================================================================== */

/* ---------- Schriften (lokal) ---------- */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Bitter";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/bitter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Bitter";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/bitter-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Bitter";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/bitter-latin-600-normal.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  /* Marke (daten/marke/farben.md) */
  --walnuss:#6B4A34;--walnuss-600:#5A3D2A;--walnuss-700:#4A3222;
  --terracotta:#A55A3C;--terracotta-600:#914D33;--terracotta-700:#7C4129;--terracotta-50:#F7ECE5;
  --anthrazit:#23282B;--anthrazit-700:#3C4347;--anthrazit-400:#8A9095;--anthrazit-300:#A8AFB3;--anthrazit-200:#B4BABD;
  --ton:#B08968;--ton-hell:#E0C9A8;--ton-50:#E4D6C6;
  --creme:#F8F4ED;--creme-dunkel:#EFE8DE;--creme-hell:#FDFBF7;
  --linie:#DCD2C4;--linie-hell:#E2D8C9;--linie-dunkel:#C9BCA9;
  --grau-700:#4A4640;--grau-500:#6F6659;--grau-400:#8A7A67;
  --gruen:#5C7A5A;--gruen-50:#EEF3EC;--rot:#9A4A3C;--rot-50:#F7ECE9;--amber-500:#B8791F;--amber-50:#FBF3E6;

  --surface-page:var(--creme-dunkel);--surface-card:var(--creme);--surface-card-hell:var(--creme-hell);--surface-muted:var(--creme);--surface-inverse:var(--anthrazit);--surface-accent-soft:var(--terracotta-50);--surface-brand:var(--walnuss);
  --text-heading:var(--anthrazit);--text-body:var(--grau-700);--text-muted:var(--grau-500);--text-overline:var(--grau-400);--text-inverse:var(--creme-hell);--text-inverse-muted:var(--anthrazit-300);--text-brand:var(--walnuss);--text-accent:var(--terracotta);--text-link:var(--walnuss);--text-link-hover:var(--terracotta);
  --border-subtle:var(--linie-hell);--border-default:var(--linie);--border-strong:var(--linie-dunkel);--border-accent:var(--terracotta);
  --action-primary-bg:var(--terracotta);--action-primary-bg-hover:var(--terracotta-600);--action-primary-bg-active:var(--terracotta-700);--action-primary-fg:#FFF6EE;
  --status-success-fg:var(--gruen);--status-success-bg:var(--gruen-50);--status-warning-fg:var(--amber-500);--status-warning-bg:var(--amber-50);--status-danger-fg:var(--rot);--status-danger-bg:var(--rot-50);
  --focus-ring:0 0 0 3px rgba(165,90,60,.35);

  --shadow-xs:0 1px 2px rgba(35,40,43,.05);--shadow-sm:0 2px 6px rgba(35,40,43,.06);--shadow-md:0 6px 18px rgba(35,40,43,.09);--shadow-lg:0 14px 40px rgba(35,40,43,.12);
  --blur-veil:saturate(140%) blur(12px);
  --ease-standard:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --duration-fast:160ms;--duration-normal:240ms;
  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);

  /* Design: kantig – Karten 4px, Buttons ohne Rundung */
  --radius-xs:2px;--radius-sm:3px;--radius-md:4px;--radius-lg:4px;--radius-xl:6px;--radius-btn:0;--radius-pill:999px;--radius-circle:50%;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
  --container-max:1200px;--container-narrow:760px;--gutter:24px;
  --section-y:var(--space-24);--section-y-tight:var(--space-16);

  --font-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:var(--font-sans);
  --font-serif:"Bitter",Georgia,"Times New Roman",serif;
  --text-display-1:clamp(38px,4.6vw,60px);--text-display-2:clamp(30px,3.2vw,44px);
  --text-h1:40px;--text-h2:30px;--text-h3:22px;--text-h4:18px;
  --text-lead:17px;--text-body-lg:17px;--text-body-md:15px;--text-body-sm:14px;--text-caption:13px;--text-overline:11px;
  --leading-tight:1.1;--leading-snug:1.25;--leading-normal:1.55;--leading-relaxed:1.65;
  --weight-regular:400;--weight-medium:500;--weight-bold:600;--weight-black:700;
  --tracking-tight:-0.02em;--tracking-wide:0.01em;--tracking-overline:0.14em;
}
@media (max-width:720px){
  :root{--section-y:var(--space-16);--section-y-tight:var(--space-12);--gutter:16px;--text-h1:32px;--text-h2:26px;--text-h3:20px;--text-lead:16px}
}
/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-body-md);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0;text-wrap:balance}
h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}h4{font-size:var(--text-h4)}
p{margin:0 0 var(--space-4)}
p:last-child{margin-bottom:0}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
img,svg{display:block;max-width:100%}
.icon{flex:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
address{font-style:normal}
ul.plain,ol.plain{list-style:none;margin:0;padding:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:100;background:var(--anthrazit);color:#fff;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);text-decoration:none;font-weight:var(--weight-bold)}
.skip-link:focus{top:var(--space-4);color:#fff}

.container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--muted{background:var(--surface-muted)}
.section--inverse{background:var(--surface-inverse);color:var(--text-inverse)}
.section--inverse h2,.section--inverse h3{color:var(--text-inverse)}

.overline{font-family:var(--font-sans);font-size:var(--text-overline);font-weight:var(--weight-bold);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--text-overline)}
.overline--inverse{color:var(--ton-hell)}
.lead{font-family:var(--font-serif);font-size:var(--text-lead);line-height:var(--leading-relaxed);color:var(--text-body);margin:var(--space-5) 0 0}
.prose{max-width:var(--container-narrow)}
.prose p,.prose ul,.prose ol{font-size:var(--text-body-lg);line-height:var(--leading-relaxed)}
.prose h2{margin-top:var(--space-12);margin-bottom:var(--space-4)}
.prose h3{margin-top:var(--space-8);margin-bottom:var(--space-3)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 var(--space-5)}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--terracotta)}
.prose--legal p,.prose--legal ul,.prose--legal ol{font-size:var(--text-body-md)}
.muted{color:var(--text-muted)}
.small{font-size:var(--text-body-sm)}
.text-center{text-align:center}

/* ---------- Section heading ---------- */
.section-heading{max-width:680px}
.section-heading--center{max-width:760px;margin-inline:auto;text-align:center}
.section-heading__title{font-size:var(--text-display-2)}
h1.section-heading__title{font-size:var(--text-display-2)}
.section-heading .overline{margin-bottom:var(--space-3)}
.section-heading--inverse .section-heading__title{color:var(--text-inverse)}
.section-heading--inverse .overline{color:var(--ton-hell)}
.section-heading--inverse .lead{color:var(--text-inverse-muted)}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-sans);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border-radius:var(--radius-btn);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:var(--transition-control);white-space:nowrap;font-size:var(--text-body-md);padding:13px 24px;line-height:1.2;background:var(--action-primary-bg);color:var(--action-primary-fg);box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.btn:active{background:var(--action-primary-bg-active)}
.btn--outline{background:transparent;color:var(--text-heading);border-color:var(--anthrazit);box-shadow:none}
.btn--outline:hover{background:var(--surface-muted);color:var(--text-heading);border-color:var(--anthrazit-400)}
.btn--ghost{background:transparent;color:var(--text-accent);box-shadow:none}
.btn--ghost:hover{background:var(--surface-accent-soft);color:var(--text-accent)}
.btn--inverse{background:#fff;color:var(--text-heading)}
.btn--inverse:hover{background:var(--linie-hell);color:var(--text-heading)}
.btn--inverse-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none}
.btn--inverse-outline:hover{background:rgba(255,255,255,.1);color:#fff}
.btn--sm{font-size:var(--text-body-sm);padding:9px 16px}
.btn--lg{font-size:var(--text-body-lg);padding:16px 32px}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn:focus-visible{border-radius:var(--radius-btn)}
.btn-row{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* ---------- Badge ---------- */
.badge{display:inline-block;font-size:var(--text-caption);font-weight:var(--weight-bold);padding:4px 10px;border-radius:var(--radius-sm);line-height:1.4;background:var(--linie-hell);color:var(--grau-500)}
.badge--success{background:var(--status-success-bg);color:var(--status-success-fg)}
.badge--accent{background:var(--surface-accent-soft);color:var(--text-accent)}
.badge--warning{background:var(--status-warning-bg);color:var(--status-warning-fg)}

/* ---------- Card ---------- */
.card{background:var(--surface-card-hell);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-6)}
.card--pad-lg{padding:var(--space-8)}
.card--muted{background:var(--surface-muted)}
.card--inverse{background:var(--surface-inverse);border-color:transparent;color:var(--text-inverse)}
.card--link{display:flex;flex-direction:column;gap:var(--space-3);text-decoration:none;color:inherit;height:100%;transition:box-shadow var(--duration-normal) var(--ease-standard),transform var(--duration-normal) var(--ease-standard)}
.card--link:hover{border-color:var(--ton);transform:translateY(-2px);color:inherit}
.card--link h3{font-size:var(--text-h4)}
.card--link p{color:var(--text-muted);flex:1;margin:0}
.card__more{color:var(--text-accent);font-weight:var(--weight-bold);font-size:var(--text-body-sm);display:inline-flex;align-items:center;gap:var(--space-1)}
.card__media{margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2);overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.card__media .photo,.card__media .placeholder{border-radius:0;border:0}

/* ---------- Grids ---------- */
.grid{display:grid;gap:var(--space-6)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;gap:var(--space-16);align-items:center;grid-template-columns:1fr 1fr}
.split--start{align-items:start}
@media (max-width:960px){
  .grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:var(--space-10)}
}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ---------- Placeholder / Foto ---------- */
.placeholder{background:repeating-linear-gradient(45deg,var(--linie-hell) 0 12px,var(--creme) 12px 24px);border-radius:var(--radius-lg);border:1px dashed var(--border-strong);display:grid;place-items:center;color:var(--text-muted);font-size:var(--text-body-sm);width:100%}
.placeholder__inner{text-align:center;padding:0 32px;display:grid;justify-items:center;gap:12px;line-height:1.5}
.photo{width:100%;height:auto;object-fit:cover;border-radius:var(--radius-lg)}
picture{display:block}

/* ---------- Vertrauensleiste ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);background:var(--creme);border:1px solid var(--border-subtle);border-top:0}
.trust__item{padding:var(--space-5) var(--space-6);border-right:1px solid var(--border-subtle)}
.trust__item:last-child{border-right:0}
.trust__item{display:flex;align-items:center;gap:var(--space-3);font-weight:var(--weight-bold);color:var(--text-brand)}
.trust__item .icon{color:var(--walnuss)}
@media (max-width:960px){.trust{grid-template-columns:repeat(2,1fr)}.trust__item:nth-child(2){border-right:0}.trust__item:nth-child(-n+2){border-bottom:1px solid var(--border-subtle)}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(248,244,237,.94);-webkit-backdrop-filter:var(--blur-veil);backdrop-filter:var(--blur-veil);border-bottom:1px solid var(--border-subtle)}
.site-header__inner{height:84px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.site-header__logo{display:flex;align-items:center;text-decoration:none}
.site-header__logo img{height:36px;width:auto}
.site-nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--space-6)}
.site-nav__item{position:relative;display:flex;align-items:center;gap:2px}
.site-nav__link{text-decoration:none;font-size:var(--text-body-md);font-weight:var(--weight-medium);color:var(--text-body);border-bottom:2px solid transparent;padding-bottom:4px;transition:var(--transition-control)}
.site-nav__link:hover{color:var(--text-heading)}
.site-nav__link.is-active{color:var(--text-brand);border-bottom-color:var(--walnuss)}
.site-nav__caret{background:transparent;border:0;padding:4px;margin-top:-4px;color:var(--text-muted);cursor:pointer;display:grid;place-items:center;border-radius:var(--radius-circle)}
.site-nav__caret .icon{transition:transform var(--duration-fast) var(--ease-standard)}
.site-nav__caret[aria-expanded="true"] .icon{transform:rotate(180deg)}
.site-nav__sub{list-style:none;margin:0;padding:var(--space-2);position:absolute;top:calc(100% + 10px);left:-12px;min-width:280px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:none;flex-direction:column;z-index:50}
.site-nav__sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-children:hover .site-nav__sub,.has-children.is-open .site-nav__sub,.has-children:focus-within .site-nav__sub{display:flex}
.site-nav__sublink{display:block;padding:10px 14px;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-body);font-size:var(--text-body-md);transition:var(--transition-control)}
.site-nav__sublink:hover{background:var(--surface-muted);color:var(--text-heading)}
.site-nav__sublink.is-active{color:var(--text-heading);font-weight:var(--weight-bold)}
.site-nav__phone{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--text-heading);font-weight:var(--weight-bold);font-size:var(--text-body-sm);white-space:nowrap}
.nav-toggle{display:none}

@media (max-width:1100px){
  .site-nav__list{gap:var(--space-4)}
  .site-nav__phone span{display:none}
}
@media (max-width:960px){
  .site-header__inner{height:68px}
  .site-header__logo img{height:30px}
  .nav-toggle{display:inline-flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-md);padding:8px 14px;font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--text-body-sm);color:var(--text-heading);cursor:pointer}
  .nav-toggle__icon{display:grid;gap:4px;width:18px}
  .nav-toggle__icon span{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform var(--duration-fast) var(--ease-standard),opacity var(--duration-fast)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface-page);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-md);padding:var(--space-2) var(--gutter) var(--space-6);max-height:calc(100vh - 68px);overflow:auto}
  .site-nav.is-open{display:block}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__item{flex-wrap:wrap;justify-content:space-between;border-bottom:1px solid var(--border-subtle)}
  .site-nav__link{display:block;padding:14px 0;border-bottom:0;flex:1}
  .site-nav__link.is-active{border-bottom:0}
  .site-nav__caret{padding:10px;margin:0}
  .site-nav__sub{position:static;box-shadow:none;border:0;background:transparent;padding:0 0 var(--space-3) var(--space-4);min-width:0;flex-basis:100%}
  .has-children:hover .site-nav__sub{display:none}
  .has-children.is-open .site-nav__sub,.has-children:focus-within .site-nav__sub{display:flex}
  .site-nav__item--phone{padding:var(--space-4) 0 var(--space-2)}
  .site-nav__phone span{display:inline}
  .site-nav__item--cta{border-bottom:0;padding-top:var(--space-2)}
  .site-nav__item--cta .btn{width:100%}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--anthrazit);color:var(--ton-50);margin-top:var(--space-24)}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr .8fr;gap:var(--space-10);padding-block:var(--space-16) var(--space-8)}
.site-footer__logo{height:32px;width:auto}
.site-footer__brand p{margin-top:var(--space-5);font-size:var(--text-body-sm);line-height:var(--leading-relaxed);max-width:320px}
.site-footer__address{font-size:var(--text-body-sm);line-height:var(--leading-relaxed);margin-top:var(--space-4)}
.site-footer__address strong{color:#fff}
.site-footer a{color:var(--ton-50);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer__col .overline{margin-bottom:var(--space-4)}
.site-footer__col ul{display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--text-body-sm)}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,.12)}
.site-footer__bottom-inner{padding-block:var(--space-5);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:var(--text-caption);color:var(--anthrazit-400)}
.site-footer__bottom a{color:var(--anthrazit-400)}
@media (max-width:960px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.site-footer__grid{grid-template-columns:1fr;gap:var(--space-8)}.site-footer{margin-top:var(--space-16)}}

/* ---------- Anfrage-Leiste ---------- */
.anfrage-leiste{background:var(--surface-inverse);color:var(--text-inverse);padding-block:var(--space-10)}
.anfrage-leiste__inner{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;justify-content:space-between}
.anfrage-leiste__title{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-bold)}
.anfrage-leiste__text{color:var(--text-inverse-muted);font-size:var(--text-body-sm);margin-top:4px;max-width:460px}
.anfrage-leiste .btn--outline{color:#fff;border-color:rgba(255,255,255,.5)}
.anfrage-leiste .btn--outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}

/* ---------- Page hero (Unterseiten) ---------- */
.page-hero{padding-block:var(--space-16) var(--space-10);background:var(--surface-muted);border-bottom:1px solid var(--border-subtle)}
@media (max-width:720px){.page-hero{padding-block:var(--space-10) var(--space-8)}}

/* ---------- Hero (Startseite, Platzhalter bis Scroll-Fahrt) ---------- */
.hero{position:relative;background:var(--surface-inverse);color:var(--text-inverse);overflow:hidden}
.hero__inner{min-height:min(72vh,720px);display:grid;align-content:center;gap:var(--space-6);padding-block:var(--space-20)}
.hero__title{font-size:var(--text-display-1);color:#fff;max-width:14ch}
.hero__lead{font-size:var(--text-lead);color:var(--text-inverse-muted);max-width:52ch;margin:0}
.hero__bg{position:absolute;inset:0;z-index:0;background:var(--anthrazit)}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,14,.88) 0%,rgba(20,17,14,.62) 48%,rgba(20,17,14,.15) 100%)}
.hero__bg picture,.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero--foto .hero__bg::after{background:linear-gradient(90deg,rgba(20,17,14,.9) 0%,rgba(20,17,14,.7) 42%,rgba(20,17,14,.25) 100%)}
@media (max-width:960px){.hero--foto .hero__bg::after{background:linear-gradient(180deg,rgba(20,17,14,.55) 0%,rgba(20,17,14,.85) 100%)}}
.hero__overline{color:var(--ton-hell)}
.hero__lead{font-family:var(--font-serif)}
.hero .container{position:relative;z-index:1}

/* ---------- Prozess ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);counter-reset:step}
.step{position:relative;padding-top:var(--space-4)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-size:40px;color:var(--ton);line-height:1;display:block;margin-bottom:var(--space-3)}
.step h3{font-size:var(--text-h4);margin-bottom:var(--space-2)}
.step p{color:var(--text-muted);margin:0}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

/* ---------- Spezifikation ---------- */
.spec{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-6);font-size:var(--text-body-md);margin:0}
.spec dt{color:var(--text-muted)}
.spec dd{margin:0}
@media (max-width:600px){.spec{grid-template-columns:1fr;gap:var(--space-1)}.spec dt{margin-top:var(--space-3)}}
.table{width:100%;border-collapse:collapse;font-size:var(--text-body-sm)}
.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-subtle)}
.table th{color:var(--text-muted);font-weight:var(--weight-medium)}
.table-wrap{overflow-x:auto}
.table--hours{margin-top:var(--space-2);font-size:var(--text-body-sm)}
.table--hours th{padding-left:0;width:1%;white-space:nowrap;color:var(--text-body)}
.table--hours td{padding-right:0}
.table--hours tr:last-child th,.table--hours tr:last-child td{border-bottom:0}
.spec--compact{font-size:var(--text-body-sm)}
.spec .chips{margin-top:2px}
.plain-address{font-style:normal}

/* ---------- Datenseiten (Phase 3): Nutzenliste, Chips, Galerie, Stückzahl-CTA ---------- */
[id]{scroll-margin-top:100px}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.checklist li{display:flex;gap:var(--space-3);align-items:flex-start;line-height:var(--leading-relaxed)}
.checklist .icon{flex:none;margin-top:4px;color:var(--walnuss)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-body-sm);font-weight:var(--weight-medium);padding:6px 12px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-body);text-decoration:none;transition:var(--transition-control)}
.chip:hover{border-color:var(--ton);color:var(--text-heading);background:var(--surface-muted)}
.chip .muted{font-weight:var(--weight-regular)}
.cat-nav{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--border-subtle)}
.cat-nav--top{margin-top:0;padding-top:0;border-top:0;margin-bottom:var(--space-8)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.gallery .photo{border-radius:var(--radius-md)}
.gallery a{display:block}
.card__meta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.qty-form{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-8);padding:var(--space-4);background:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
.qty-form__label{font-weight:var(--weight-bold);color:var(--text-heading);font-size:var(--text-body-md)}
.qty-form__input{font-family:var(--font-sans);font-size:var(--text-body-lg);width:110px;padding:13px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-body);transition:var(--transition-control)}
.qty-form__input:focus-visible{border-color:var(--border-accent);box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.qty-form .btn{flex:1 1 auto}
.paket__preis{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}
.paket__betrag{font-family:var(--font-display);font-size:var(--text-h2);color:var(--text-heading);line-height:1.1}
.paket__einheit{font-size:var(--text-body-md);font-family:var(--font-sans);color:var(--text-muted)}
.map-consent{display:flex;gap:var(--space-3);align-items:flex-start;min-height:120px}
.map-consent .icon{flex:none;color:var(--walnuss)}
.map-consent p{margin:0}
.map-consent iframe{width:100%;height:320px;border-radius:var(--radius-md)}
@media (max-width:600px){.gallery{grid-template-columns:repeat(2,1fr)}.qty-form .btn{width:100%}}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label,.fieldset__legend{font-size:var(--text-body-sm);font-weight:var(--weight-bold);color:var(--text-heading)}
.field__label .req{color:var(--terracotta)}
.field__hint{font-size:var(--text-caption);color:var(--text-muted)}
.field input,.field select,.field textarea{font-family:var(--font-sans);font-size:var(--text-body-md);color:var(--text-body);background:var(--surface-card);padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-default);transition:var(--transition-control);width:100%}
.field textarea{resize:vertical;min-height:120px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--border-accent);box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.form-grid{display:grid;gap:var(--space-5)}
.form-grid--2{grid-template-columns:1fr 1fr}
@media (max-width:600px){.form-grid--2{grid-template-columns:1fr}}
.fieldset{border:0;padding:0;margin:0;min-width:0}
.fieldset__legend{padding:0;margin-bottom:var(--space-3)}
.choices{display:flex;gap:var(--space-4) var(--space-6);flex-wrap:wrap}
.choice{display:flex;gap:var(--space-3);align-items:center;font-size:var(--text-body-sm);color:var(--text-body);cursor:pointer}
.choice--top{align-items:flex-start}
.choice input{accent-color:var(--terracotta);width:18px;height:18px;flex:none;margin:0}
.choice--top input{margin-top:2px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-status{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-md);border:1px solid var(--border-subtle);padding:var(--space-4);margin-bottom:var(--space-6)}
.form-status__bar{width:8px;align-self:stretch;border-radius:var(--radius-pill);flex:0 0 8px;background:var(--status-success-fg)}
.form-status--error .form-status__bar{background:var(--status-danger-fg)}
.form-status__title{font-weight:var(--weight-bold);color:var(--text-heading);font-size:var(--text-body-sm)}
.form-status__text{color:var(--text-muted);font-size:var(--text-caption);margin-top:2px}
.form-status[hidden]{display:none}

/* ---------- Rechtliches ---------- */
.legal-kv{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-6);font-size:var(--text-body-md);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);margin:var(--space-5) 0}
.legal-kv dt{color:var(--text-muted)}
.legal-kv dd{margin:0}
.legal-kv .pending{color:var(--status-warning-fg);font-style:italic}
@media (max-width:600px){.legal-kv{grid-template-columns:1fr;gap:var(--space-1)}.legal-kv dt{margin-top:var(--space-3)}}

/* ---------- Cookie-Banner: an Tokens angleichen ---------- */
#cc-main{--cc-font-family:var(--font-sans);--cc-bg:var(--surface-card);--cc-primary-color:var(--text-heading);--cc-secondary-color:var(--text-body);--cc-btn-primary-bg:var(--anthrazit);--cc-btn-primary-color:#fff;--cc-btn-primary-hover-bg:var(--anthrazit-700);--cc-btn-primary-hover-color:#fff;--cc-btn-secondary-bg:var(--creme);--cc-btn-secondary-color:var(--text-heading);--cc-btn-secondary-hover-bg:var(--linie-hell);--cc-btn-secondary-hover-color:var(--text-heading);--cc-btn-border-radius:0;--cc-modal-border-radius:4px;--cc-toggle-on-bg:var(--terracotta);--cc-toggle-readonly-bg:var(--ton-hell);--cc-overlay-bg:rgba(31,30,27,.55);--cc-separator-border-color:var(--border-subtle);--cc-footer-bg:var(--surface-muted);--cc-footer-color:var(--text-muted);--cc-footer-border-color:var(--border-subtle);--cc-modal-margin:16px}
#cc-main .cm__title,#cc-main .pm__title{font-family:var(--font-display);font-size:var(--text-h4)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:var(--text-body-sm);color:var(--text-muted);margin-bottom:var(--space-6)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.breadcrumb li+li::before{content:"/";color:var(--ton-hell);margin-right:var(--space-2)}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--text-heading);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--text-body)}

/* ---------- 404 ---------- */
.not-found{text-align:center;padding-block:var(--space-24)}

/* ---------- Logo (Richtung A – partials/logo.njk) ---------- */
.logo{display:inline-flex;flex-direction:column;gap:.45em;font-size:var(--logo-size,30px);line-height:1;text-decoration:none;color:var(--walnuss)}
.logo__row{display:flex;align-items:flex-end;gap:.3em}
.logo__word{font-family:var(--font-sans);font-weight:700;letter-spacing:-.04em;line-height:.9;font-size:1em;color:currentColor}
.logo__grain{display:flex;flex-direction:column;gap:.09em;padding-bottom:.1em}
.logo__grain i{display:block;height:.07em;width:.74em;background:var(--ton)}
.logo__grain i:nth-child(2){width:.57em}
.logo__tagline{font-family:var(--font-sans);font-size:.27em;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--anthrazit);white-space:nowrap}
.logo--inverse{color:var(--creme)}
.logo--inverse .logo__tagline{color:var(--anthrazit-300)}
.site-header__logo:hover .logo{color:var(--walnuss-600)}