/* Holzbau Muster AG – Entwurf «persoenlich» · fluides Layout 360px–2560px · generiert vom CMB-Plugin, danach frei anpassbar */
@font-face{font-family:'Fraunces';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/fraunces-600.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/fraunces-700.woff2') format('woff2');}
@font-face{font-family:'Nunito Sans';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/nunito-sans-400.woff2') format('woff2');}
@font-face{font-family:'Nunito Sans';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/nunito-sans-600.woff2') format('woff2');}
:root{
  --color-primary:#8A4B2A;
  --color-primary-50:#F6F1EE;
  --color-primary-100:#ECE2DD;
  --color-primary-200:#DAC5BB;
  --color-primary-300:#C4A594;
  --color-primary-400:#A87A61;
  --color-primary-500:#8A4B2A;
  --color-primary-600:#743F23;
  --color-primary-700:#5E331D;
  --color-primary-800:#482716;
  --color-primary-900:#341C10;
  --color-secondary:#5E6B4A;
  --color-secondary-50:#F2F3F1;
  --color-secondary-100:#E5E7E2;
  --color-secondary-200:#CBD0C5;
  --color-secondary-300:#AEB5A4;
  --color-secondary-400:#889179;
  --color-secondary-500:#5E6B4A;
  --color-secondary-600:#4F5A3E;
  --color-secondary-700:#404932;
  --color-secondary-800:#313826;
  --color-secondary-900:#24291C;
  --color-accent:#E0A458;
  --color-accent-50:#FDF8F2;
  --color-accent-100:#FAF0E4;
  --color-accent-200:#F5E2CA;
  --color-accent-300:#F0D2AC;
  --color-accent-400:#E8BC83;
  --color-accent-500:#E0A458;
  --color-accent-600:#BC8A4A;
  --color-accent-700:#98703C;
  --color-accent-800:#74552E;
  --color-accent-900:#553E21;
  --color-neutral-dark:#3A2A20;
  --color-neutral-light:#F0E4D2;
  --color-background:#FFF9F0;
  --color-surface:#F7EDDD;
  --color-text:#2E2019;
  --font-heading:'Fraunces', Georgia, serif;
  --font-body:'Nunito Sans', system-ui, sans-serif;
  --radius:10px;
  --primary-on:#FFFFFF;--secondary-on:#FFFFFF;--accent-on:#111111;--dark-on:#FFFFFF;
  --line:#E2DBD2;--muted:#82776F;
  /* Fluides System: Schrift und Abstände wachsen mit der Viewport-Breite, begrenzt nach oben und unten */
  --gutter:clamp(16px, 4vw, 72px);
  --container:min(100% - 2*var(--gutter), 1560px);
  --narrow:min(100% - 2*var(--gutter), 860px);
  --section:clamp(56px, 7vw, 128px);
  --gap:clamp(16px, 2vw, 32px);
  --fs-h1:clamp(2.4rem, 1.4rem + 3.6vw, 5.2rem);
  --fs-h2:clamp(1.8rem, 1.1rem + 2.2vw, 3.4rem);
  --fs-h3:clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  --fs-lead:clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
  --fs-small:clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  --lh-heading:1.15;--lh-body:1.6;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
html{font-size:clamp(16px, 0.92rem + 0.25vw, 20px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);line-height:var(--lh-body);color:var(--color-text);background:var(--color-background);overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-heading);line-height:var(--lh-heading);letter-spacing:-0.01em;margin:0 0 .5em;font-weight:700;text-wrap:balance}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p{margin:0 0 1em;max-width:70ch}
a{color:var(--color-primary)}
.lead{font-size:var(--fs-lead);max-width:60ch}
.small{font-size:var(--fs-small)}.muted{color:var(--muted)}
.container{width:var(--container);margin-inline:auto}
.narrow{width:var(--narrow);margin-inline:auto}
.kicker{font-size:var(--fs-small);letter-spacing:.16em;text-transform:uppercase;color:var(--color-secondary);font-weight:600;margin:0 0 .8em}
.section{padding-block:var(--section)}
.section.tight{padding-block:calc(var(--section)*.6)}
.section-head{display:grid;gap:var(--gap);align-items:end;margin-bottom:calc(var(--gap)*1.6)}
@media(min-width:900px){.section-head{grid-template-columns:1.2fr 1fr}.section-head .lead{margin-bottom:.3em}}
.bg-surface{background:var(--color-surface)}
.bg-primary{background:var(--color-primary);color:var(--primary-on)}
.bg-primary h1,.bg-primary h2,.bg-primary h3,.bg-primary .kicker{color:inherit}
.bg-dark{background:var(--color-neutral-dark);color:var(--dark-on)}
.bg-dark h2,.bg-dark h3,.bg-dark .kicker{color:inherit}
.bg-light{background:var(--color-neutral-light)}
.skip{position:absolute;left:-999px;top:0;background:var(--color-accent);color:var(--accent-on);padding:.6em 1em;z-index:100}.skip:focus{left:var(--gutter)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:.75em 1.4em;border-radius:var(--radius);font-weight:600;text-decoration:none;border:2px solid transparent;transition:.15s;cursor:pointer;font:inherit;font-weight:600}
.btn-primary{background:var(--color-primary);color:var(--primary-on)}.btn-primary:hover{background:var(--color-primary-700)}
.btn-accent{background:var(--color-accent);color:var(--accent-on)}.btn-accent:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;border-color:currentColor;color:inherit}.btn-ghost:hover{background:rgba(127,127,127,.12)}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4em}

/* Header */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--color-background) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);min-height:clamp(64px, 6vw, 88px)}
.brand img{height:clamp(36px, 3.2vw, 52px);width:auto}.brand span{font-family:var(--font-heading);font-size:1.3rem;font-weight:700;color:var(--color-text)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);padding:.5em .9em;font:inherit;color:inherit;cursor:pointer}
.nav nav{display:flex;align-items:center;gap:clamp(14px, 1.6vw, 32px)}
.nav nav a{text-decoration:none;color:inherit;font-weight:500;padding:.3em 0;border-bottom:2px solid transparent}
.nav nav a[aria-current]{border-color:var(--color-accent)}
.nav nav .btn{margin-left:.5em}
@media(max-width:860px){.menu-btn{display:inline-block}.nav nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--color-background);border-bottom:1px solid var(--line);padding:var(--gutter)}.nav nav.open{display:flex}.nav nav .btn{margin:8px 0 0}}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;gap:var(--gap);align-items:center;min-height:min(78vh, 880px)}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr 1fr}}
.hero .lead{margin-top:1em}
.hero-media{position:relative}
.hero-media .ph{aspect-ratio:4/3;border-radius:calc(var(--radius)*1.6)}
.hero-stats{display:flex;flex-wrap:wrap;gap:var(--gap);margin-top:2em}
.hero-stats div{min-width:120px}.hero-stats b{display:block;font-family:var(--font-heading);font-size:clamp(1.6rem, 1rem + 1.4vw, 2.6rem);line-height:1;color:var(--color-accent)}
/* Variante markant: Hero vollflächig */
.v-markant .hero{background:var(--color-primary);color:var(--primary-on)}
.v-markant .hero h1,.v-markant .hero .kicker{color:inherit}
.v-markant .hero .ph{border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:inherit}
.v-markant .hero::after{content:"";position:absolute;right:-18vw;top:-20vw;width:50vw;height:50vw;border-radius:50%;background:var(--color-secondary);opacity:.45;pointer-events:none}
.v-markant .hero .container{position:relative;z-index:1}
/* Variante persönlich: Team zuerst, warm */
.v-persoenlich .hero{background:var(--color-surface)}
.v-persoenlich .hero-grid{grid-template-columns:1fr}
@media(min-width:900px){.v-persoenlich .hero-grid{grid-template-columns:1fr 1.2fr}.v-persoenlich .hero-media{order:-1}}

/* Platzhalter für Bilder: beschriftet, mit Format – vom Kunden/Fotograf zu ersetzen */
.ph{position:relative;display:grid;place-items:center;text-align:center;padding:1rem;background:repeating-linear-gradient(135deg, var(--color-neutral-light) 0 14px, #E8D8C5 14px 28px);border:1.5px dashed #AC9F91;border-radius:var(--radius);color:var(--color-text);font-size:var(--fs-small);line-height:1.4;overflow:hidden}
.ph::before{content:"BILD";font-family:var(--font-heading);font-size:.75rem;letter-spacing:.2em;opacity:.55;margin-bottom:.4em}
.ph .fmt{display:block;opacity:.6;font-family:ui-monospace,Consolas,monospace;font-size:.75rem;margin-top:.3em}
.ph.wide{aspect-ratio:16/7}.ph.square{aspect-ratio:1}.ph.portrait{aspect-ratio:3/4}.ph.tall{aspect-ratio:4/5}.ph.card{aspect-ratio:3/2}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Raster und Karten */
.grid{display:grid;gap:var(--gap)}
.grid-auto{grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr))}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr))}
.grid-4{grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr))}
.card{background:var(--color-surface);border-radius:var(--radius);padding:clamp(18px, 2vw, 32px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.6em}
.card .ph{margin:calc(clamp(18px, 2vw, 32px)*-1) calc(clamp(18px, 2vw, 32px)*-1) .8em;border-radius:var(--radius) var(--radius) 0 0;border-width:0 0 1.5px}
.card h3{margin:.2em 0 .2em}.card p{margin:0}
.card .more{margin-top:auto;padding-top:.6em;font-weight:600;text-decoration:none}
.card.accent{background:var(--color-secondary);color:var(--secondary-on)}.card.accent h3,.card.accent a{color:inherit}
.icon{width:48px;height:48px;border-radius:12px;background:var(--color-primary);color:var(--primary-on);display:grid;place-items:center;font-family:var(--font-heading);font-size:1.2rem}

/* Ablauf */
.steps{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));counter-reset:step}
.steps > div{position:relative;padding-top:1em;border-top:2px solid var(--color-accent)}
.steps > div::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-heading);font-size:2rem;color:var(--color-accent);display:block;margin-bottom:.3em}

/* Zahlen / Fakten */
.facts{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr));text-align:center}
.facts b{display:block;font-family:var(--font-heading);font-size:clamp(2rem, 1.2rem + 2.4vw, 4rem);line-height:1;color:var(--color-primary)}
.bg-dark .facts b,.bg-primary .facts b{color:var(--color-accent)}

/* Referenzen */
.projects{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr))}
.projects figure{margin:0}
.projects figcaption{padding:.8em 0 0}.projects figcaption b{display:block;font-family:var(--font-heading);font-size:var(--fs-h3)}
.projects .ph{aspect-ratio:4/3}
@media(min-width:1100px){.projects.feature > :first-child{grid-column:span 2}.projects.feature > :first-child .ph{aspect-ratio:16/8}}

/* Team */
.team{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr))}
.team figure{margin:0}.team .ph{aspect-ratio:3/4}.team figcaption{padding-top:.6em}.team figcaption b{display:block}

/* Stimmen – Beispiel, durch echte Kundenstimmen ersetzen */
.quotes{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr))}
.quotes blockquote{margin:0;padding:clamp(18px, 2vw, 32px);background:var(--color-surface);border-left:4px solid var(--color-accent);border-radius:0 var(--radius) var(--radius) 0;font-family:var(--font-heading);font-size:var(--fs-lead)}
.quotes cite{display:block;margin-top:.8em;font-style:normal;font-family:var(--font-body);font-size:var(--fs-small);color:var(--muted)}
.sample-tag{display:inline-block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;background:var(--color-accent);color:var(--accent-on);padding:.2em .6em;border-radius:4px;margin-bottom:.6em}

/* FAQ */
.faq details{border-top:1px solid var(--line);padding:1em 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--font-heading);font-size:var(--fs-h3);list-style:none;display:flex;justify-content:space-between;gap:1em}
.faq summary::after{content:"+";color:var(--color-accent);font-size:1.4em;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:.6em;max-width:75ch}

/* CTA-Band */
.cta-band{display:grid;gap:var(--gap);align-items:center}
@media(min-width:900px){.cta-band{grid-template-columns:1fr auto}}

/* Kontakt */
.contact-grid{display:grid;gap:calc(var(--gap)*1.5)}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1.2fr}}
.contact-list{list-style:none;padding:0;margin:1em 0;display:grid;gap:.6em}
.contact-list b{display:block;font-size:var(--fs-small);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
form.contact{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));background:var(--color-surface);padding:clamp(18px, 2vw, 32px);border-radius:var(--radius)}
form.contact label{display:grid;gap:.4em;font-size:var(--fs-small);font-weight:600}
form.contact .full{grid-column:1/-1}
form.contact input,form.contact textarea,form.contact select{font:inherit;padding:.7em .9em;border:1px solid var(--line);border-radius:calc(var(--radius)*.6);background:var(--color-background);color:inherit;width:100%}
form.contact textarea{min-height:140px}
.map.ph{aspect-ratio:16/9}

/* Footer */
.site-foot{background:var(--color-neutral-dark);color:var(--dark-on);padding-block:calc(var(--section)*.7) calc(var(--section)*.4)}
.foot-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr))}
.site-foot a{color:inherit}.site-foot .lab{font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-bottom:.4em}
.site-foot .legal{display:flex;flex-wrap:wrap;gap:1.2em;margin-top:var(--gap);padding-top:var(--gap);border-top:1px solid rgba(255,255,255,.15);font-size:var(--fs-small);opacity:.8}
.site-foot .legal span{margin-left:auto}

/* Unterseiten */
.page-head{padding-block:calc(var(--section)*.8) calc(var(--section)*.5)}
.prose{width:var(--narrow)}
.prose h2{margin-top:1.6em}
.two-col{display:grid;gap:calc(var(--gap)*1.5);align-items:center}
@media(min-width:900px){.two-col{grid-template-columns:1fr 1fr}.two-col.rev > :first-child{order:2}}
.legal-page h2{font-size:var(--fs-h3);margin-top:1.4em}
.note{border-left:3px solid var(--color-accent);padding:.6em 1em;background:var(--color-surface);font-size:var(--fs-small)}
/* Wireframe-Modus: Graustufen, Struktur im Vordergrund */
.wf{filter:grayscale(1)}
.wf .btn-accent,.wf .btn-primary{filter:grayscale(0)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.site-head,.menu-btn{position:static}.ph{border:1px solid #999}}