/* Tischlerei Haselbach: helles Salbeigrau wie die Wände in den Bildern, dunkles Grünschwarz als Tinte,
   geölte Eiche als einzige Akzentfarbe, Nussbaum für den Abschluss. */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}

:root{
  --grund:#EEEFEA; --flaeche:#F8F8F4; --tinte:#1F2620; --tinte-weich:#555E54;
  --salbei:#8C9C88; --salbei-tief:#3F4E40; --eiche:#B9783A; --eiche-text:#8A5420; --nuss:#241A13;
  --linie:rgba(31,38,32,.13);
  --f-display:"Bricolage Grotesque",system-ui,sans-serif; --f-text:"Figtree",system-ui,sans-serif;
  --rand:clamp(16px,4vw,48px); --breite:1280px; --kopf:64px;
  --ms-accent:#B9783A; --ms-on:#fff; --ms-font:var(--f-text);
}
*,*::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(--grund);color:var(--tinte);font:400 17px/1.6 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
a{color:var(--eiche-text);text-underline-offset:.2em;text-decoration-thickness:1.5px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.032em;line-height:1.02;margin:0;text-wrap:balance;font-variation-settings:"opsz" 96}
p{margin:0}
:focus-visible{outline:2.5px solid var(--eiche);outline-offset:3px}
.weit{max-width:calc(var(--breite) + 2 * var(--rand));margin:0 auto;padding:0 var(--rand)}
.augenbraue{font:600 .8rem/1.3 var(--f-text);letter-spacing:.09em;text-transform:uppercase;color:var(--eiche-text)}
.leise{color:var(--tinte-weich)}
[hidden]{display:none!important}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 22px;border-radius:999px;background:var(--tinte);color:#fff;
  font:600 1rem/1.1 var(--f-text);text-decoration:none;border:0;cursor:pointer;flex:none;transition:background-color .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.knopf:hover{background:var(--salbei-tief);transform:translateY(-1px)}
.knopf--hell{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--tinte)}
.knopf--hell:hover{background:var(--tinte);color:#fff}
.knopf--eiche{background:var(--eiche);color:#fff}
.knopf--eiche:hover{background:#9C6227}
.knopf--gross{min-height:54px;padding:14px 28px;font-size:1.05rem}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;height:var(--kopf);display:flex;align-items:center;gap:20px;padding:0 var(--rand);
  background:color-mix(in oklab,var(--grund) 88%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--linie)}
.marke{display:flex;align-items:center;gap:11px;color:var(--tinte);text-decoration:none;flex:none}
.marke__zeichen{width:34px;height:34px;color:var(--tinte)}
.marke span{font:650 1.32rem/1 var(--f-display);letter-spacing:-.03em}
.marke small{display:block;font:500 .72rem/1.2 var(--f-text);letter-spacing:.02em;color:var(--tinte-weich);margin-top:3px}
.marke--hell,.marke--hell .marke__zeichen{color:#F3EEE6}
.marke--hell small{color:#B9AE9F}
.kopf__nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.kopf__nav a{padding:9px 13px;border-radius:999px;color:var(--tinte);text-decoration:none;font-weight:550;font-size:.97rem}
.kopf__nav a:hover{background:rgba(31,38,32,.07)}
.kopf__nav a[aria-current]{background:rgba(31,38,32,.09)}
.kopf__tel{color:var(--tinte-weich)!important;font-variant-numeric:tabular-nums}
.kopf__menue{display:none}
@media (max-width:860px){
  .kopf__nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--rand) 16px;background:var(--flaeche);
    border-bottom:1px solid var(--linie);box-shadow:0 30px 60px -30px rgba(31,38,32,.3);visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .18s,transform .18s,visibility 0s .18s}
  .kopf__nav.offen{visibility:visible;opacity:1;transform:none;transition:opacity .18s,transform .18s}
  .kopf__nav a{padding:14px 4px;border-radius:0;border-bottom:1px solid var(--linie)}
  .kopf__menue{display:inline-flex;align-items:center;min-height:42px;margin-left:auto;padding:0 16px;border-radius:999px;background:none;border:1.5px solid var(--tinte);
    font:600 .92rem/1 var(--f-text);color:var(--tinte);cursor:pointer}
  .kopf__menue[aria-expanded="true"]{background:var(--tinte);color:#fff}
}
@media (max-width:480px){.marke small{display:none}.kopf{gap:10px}.kopf .knopf{padding:10px 14px;font-size:.9rem;min-height:42px}.kopf__menue{padding:0 12px}}
@media (max-width:370px){.marke__zeichen{display:none}}

/* Unterseiten */
.seite{padding:clamp(40px,7vw,96px) 0 clamp(56px,8vw,120px)}
.seite__kopf{display:grid;gap:16px;max-width:46rem;margin-bottom:clamp(32px,5vw,64px)}
.seite__kopf h1{font-size:clamp(2.6rem,1.4rem + 4.6vw,5rem)}
.seite__kopf p{font-size:1.18rem;color:var(--tinte-weich);max-width:38rem}

/* Fuß */
.fuss{background:var(--nuss);color:#CDBFAE;padding:48px 0 36px;font-size:.95rem}
.fuss__innen{max-width:calc(var(--breite) + 2 * var(--rand));margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:1.1fr 1.5fr 1.2fr;gap:24px 44px;align-items:start}
.fuss a{color:#F3EEE6}
.fuss__klein{grid-column:1/-1;border-top:1px solid #3B2E24;padding-top:18px;font-size:.82rem;color:#A99A88}
.fuss :focus-visible{outline-color:#fff}
@media (max-width:760px){.fuss__innen{grid-template-columns:1fr}}
.hit-fuss{padding-bottom:64px}