/* ============================================================
   Tischlerei Berger — Demo (Scroll-World)
   Palette aus der generierten Welt: Putty / Holz / Espresso,
   EIN Akzent: Schürzengrün. Leitmotiv: Werkzeichnung (Maßlinien).
   ============================================================ */

:root{
  --paper:#EFE9DE;
  --paper-2:#E7DECC;
  --ink:#2A2118;
  --ink-60:#6A5F50;
  --line:rgba(42,33,24,.16);
  --oak:#C9A876;
  --walnut:#6B4A2E;
  --accent:#4C6A41;          /* Schürzengrün, dunkel genug für Text auf Putty */
  --accent-bright:#8FAF7E;   /* für dunkle Kapitel */
  --dark:#241B12;            /* Espresso-Kapitel */
  --dark-2:#2E2317;
  --paper-on-dark:#F2EADD;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Chivo Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --wide:125%;
  --pad:clamp(20px,5vw,64px);
  --section:clamp(72px,12vh,150px);
}

@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Chivo Mono';
  src:url('fonts/chivo-mono.woff2') format('woff2');
  font-weight:400 500; font-style:normal; font-display:swap;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  line-height:1.55; -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
img,canvas{display:block;max-width:100%}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

.skip{position:fixed;top:-48px;left:16px;z-index:200;background:var(--ink);color:#fff;
  padding:10px 18px;border-radius:0 0 8px 8px;text-decoration:none;transition:top .2s}
.skip:focus{top:0}

::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- Typo-Bausteine ---------- */
.label{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);
}
.display{
  font-weight:800;font-stretch:var(--wide);letter-spacing:-.025em;line-height:.98;
  text-wrap:balance;margin:0;
}

/* Maßlinien-Divider (Werkzeichnung): |———— LABEL ————| */
.dim{display:flex;align-items:center;gap:14px;margin:0 0 clamp(20px,4vh,40px)}
.dim .label{color:var(--accent);flex:none}
.dim::before,.dim::after{
  content:"";flex:1;height:9px;min-width:40px;
  background:
    linear-gradient(currentColor,currentColor) left  center/1px 9px no-repeat,
    linear-gradient(currentColor,currentColor) right center/1px 9px no-repeat,
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat;
  color:var(--line);
}
.on-dark .dim::before,.on-dark .dim::after{color:rgba(242,234,221,.25)}
.on-dark .dim .label{color:var(--accent-bright)}

/* Scroll-Reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);
  transition:background .3s,box-shadow .3s;
}
.nav.scrolled{background:rgba(239,233,222,.86);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.brand b{font-weight:800;font-stretch:var(--wide);font-size:1.15rem;letter-spacing:.02em}
.brand span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-tel{font-family:var(--mono);font-size:.82rem;text-decoration:none;color:var(--ink);
  border-bottom:1px solid transparent;transition:border-color .15s}
.nav-tel:hover{border-color:var(--ink)}
.btn{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:700;font-size:.95rem;padding:12px 24px;border:0;border-radius:4px;cursor:pointer;
  transition:transform .15s,filter .15s;
}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:9px 18px;font-size:.85rem}
.btn-lg{padding:16px 36px;font-size:1.05rem}
@media (max-width:640px){.nav-tel{display:none}}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(72px + 4vh) 0 clamp(28px,5vh,56px);position:relative}
.hero .kicker{color:var(--accent);margin-bottom:clamp(14px,3vh,28px)}
.hero h1{font-size:clamp(3rem,10.5vw,9.5rem)}
.hero h1 .ghost{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.hero-sub{max-width:54ch;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--ink-60);
  margin:clamp(18px,3vh,30px) 0 0}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(28px,6vh,64px);padding-top:22px;border-top:1px solid var(--line)}
.facts{display:flex;gap:clamp(16px,3.5vw,44px);flex-wrap:wrap;list-style:none;margin:0;padding:0}
.facts li{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.facts b{color:var(--ink);font-weight:500}
.scroll-hint{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-60);display:flex;align-items:center;gap:10px;flex:none}
.scroll-hint::after{content:"↓";display:inline-block;animation:hint 1.6s ease-in-out infinite;color:var(--accent)}
@keyframes hint{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

/* Hero-Visual: schwebender Clay-Hobel, Bild-Hintergrund = Seitenfarbe, Rand weich maskiert */
.hero-visual{pointer-events:none;align-self:flex-end;width:min(64vw,360px);margin-bottom:-3vh}
.hero-visual img{width:100%;height:auto;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 98%);
  mask-image:radial-gradient(closest-side,#000 55%,transparent 98%);
  animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
@media (min-width:900px){
  .hero-visual{position:absolute;top:calc(64px + 1vh);right:calc(var(--pad) * .35);
    width:clamp(300px,29vw,440px);margin:0;align-self:auto}
}

/* Hero-Entrance */
.hero .kicker,.hero h1,.hero-sub,.hero-foot,.hero-visual{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
.hero h1{animation-delay:.08s}.hero-sub{animation-delay:.2s}.hero-foot{animation-delay:.34s}
.hero-visual{animation-delay:.15s}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* ---------- Scroll-World ---------- */
.world{position:relative;height:calc(var(--frames,254) * 2vh)}
.world-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--paper)}
.world-stage canvas,.world-stage img.fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.world-progress{position:absolute;top:0;left:0;right:0;height:3px;z-index:5;
  background:var(--accent);transform-origin:left;transform:scaleX(0)}
.world-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(24,16,7,.08),rgba(24,16,7,0) 38%,rgba(24,16,7,.55) 92%)}
.world-copy{position:absolute;inset:auto 0 0;padding:0 var(--pad) clamp(36px,7vh,80px);
  opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;pointer-events:none}
.world-copy.is-active{opacity:1;visibility:visible;pointer-events:auto}
.world-copy .inner{max-width:640px}
.world-copy .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:#E9D9AE;margin:0}
.world-copy h2{font-weight:800;font-stretch:var(--wide);font-size:clamp(1.9rem,1.1rem + 3vw,3.2rem);
  line-height:1.04;letter-spacing:-.02em;margin:.35em 0 .3em;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.45);text-wrap:balance}
.world-copy p{font-size:clamp(1rem,.95rem + .3vw,1.15rem);color:#F3ECE0;text-shadow:0 1px 12px rgba(0,0,0,.5);margin:0}
.world-copy .tags{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.world-copy .tags span{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:#fff;
  border:1px solid rgba(255,255,255,.4);border-radius:50px;padding:4px 12px;background:rgba(0,0,0,.2)}
/* Platz für die Sticky-Anruf-Leiste, damit sie die Tags nicht überdeckt */
@media (max-width:820px){.world-copy{padding-bottom:calc(clamp(36px,7vh,80px) + 68px)}}

/* ---------- Vertrauens-Marquee ---------- */
.band{background:var(--dark);color:var(--paper-on-dark);overflow:hidden;padding:18px 0;
  border-block:1px solid rgba(0,0,0,.3)}
.band .track{display:flex;gap:0;width:max-content;animation:marquee 36s linear infinite}
.band ul{display:flex;list-style:none;margin:0;padding:0}
.band li{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;padding:0 1.6em;display:flex;align-items:center;gap:1.6em}
.band li::after{content:"·";color:var(--accent-bright)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Sektionen allgemein ---------- */
section{padding-block:var(--section)}
.sec-head h2{font-size:clamp(2.1rem,1.3rem + 3.6vw,4rem)}
.sec-head p.lead{max-width:56ch;color:var(--ink-60);font-size:clamp(1rem,.95rem + .35vw,1.2rem);margin:18px 0 0}
.on-dark{background:var(--dark);color:var(--paper-on-dark)}
.on-dark .label,.on-dark .sec-head p.lead{color:rgba(242,234,221,.6)}

/* ---------- 01 Leistungen: Editorial-Index ---------- */
.index{list-style:none;margin:clamp(30px,6vh,60px) 0 0;padding:0;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index .row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:clamp(14px,3vw,36px);
  padding:clamp(18px,3vh,30px) 4px;text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.index .num{font-family:var(--mono);font-size:.78rem;color:var(--ink-60);transition:color .2s}
.index h3{margin:0;font-weight:800;font-stretch:var(--wide);letter-spacing:-.015em;
  font-size:clamp(1.35rem,1rem + 1.8vw,2.2rem);line-height:1.1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.index h3 small{font-weight:400;font-stretch:100%;letter-spacing:0;font-size:clamp(.9rem,.85rem + .2vw,1rem);
  color:var(--ink-60);max-width:44ch}
.index .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-60);white-space:nowrap}
.index .row:hover{transform:translateX(18px)}
.index .row:hover .num{color:var(--accent)}
.index .row:hover h3{color:var(--accent)}
@media (max-width:700px){.index .tag{display:none}.index .row{grid-template-columns:auto 1fr}}

/* ---------- 02 Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);
  margin-top:clamp(34px,6vh,64px)}
.step{border-top:1px solid rgba(242,234,221,.22);padding-top:20px}
.step .big{font-weight:800;font-stretch:var(--wide);font-size:clamp(2.6rem,2rem + 2.5vw,4.2rem);
  line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--accent-bright)}
.step h3{font-size:1.12rem;font-weight:700;margin:14px 0 8px}
.step p{margin:0;font-size:.95rem;color:rgba(242,234,221,.72)}
.fixpreis{margin-top:clamp(34px,6vh,60px);display:flex;align-items:center;gap:16px;
  border:1px solid rgba(143,175,126,.4);border-radius:6px;padding:18px 22px;
  font-size:1rem;background:rgba(143,175,126,.08)}
.fixpreis b{color:var(--accent-bright)}
.fixpreis::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent-bright)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- 03 Projekte: Bento ---------- */
.bento{display:grid;gap:clamp(14px,2vw,24px);margin-top:clamp(30px,6vh,60px);
  grid-template-columns:repeat(6,1fr)}
.card{position:relative;overflow:hidden;border-radius:8px;background:var(--paper-2);display:block}
.card img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.045)}
.card figcaption{position:absolute;inset:auto 0 0;padding:40px 18px 14px;color:#fff;
  background:linear-gradient(to top,rgba(24,16,7,.72),transparent);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.card figcaption b{font-weight:700;font-size:1.02rem}
.card figcaption span{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.card.c-lg{grid-column:span 4}.card.c-lg img{aspect-ratio:16/9}
.card.c-sm{grid-column:span 2}.card.c-sm img{aspect-ratio:4/4.2}
.card.c-md{grid-column:span 3}.card.c-md img{aspect-ratio:16/10}
.bento-note{margin-top:18px;font-family:var(--mono);font-size:.72rem;color:var(--ink-60);
  letter-spacing:.04em}
@media (max-width:760px){.card.c-lg,.card.c-md{grid-column:span 6}.card.c-sm{grid-column:span 3}}
@media (max-width:480px){.card.c-sm{grid-column:span 6}.card.c-sm img{aspect-ratio:16/10}}

/* ---------- 04 Der Meister ---------- */
#meister{background:var(--paper-2)}
.meister-grid{display:grid;grid-template-columns:minmax(260px,420px) 1fr;
  gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(30px,6vh,60px)}
.meister-grid .portrait{border-radius:8px;overflow:hidden}
.meister-grid .portrait img{aspect-ratio:3/4;object-fit:cover;width:100%}
.meister-grid h3{font-weight:800;font-stretch:var(--wide);font-size:clamp(1.7rem,1.2rem + 2.4vw,2.8rem);
  letter-spacing:-.02em;line-height:1.05;margin:0 0 18px}
.meister-grid p{color:var(--ink-60);max-width:56ch;margin:0 0 14px}
.stats{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(18px,3.5vw,56px);
  margin-top:clamp(34px,7vh,72px);padding-top:26px;border-top:1px solid var(--line)}
.stat b{display:block;font-weight:800;font-stretch:var(--wide);letter-spacing:-.02em;
  font-size:clamp(2rem,1.4rem + 2.8vw,3.6rem);line-height:1}
.stat b em{font-style:normal;color:var(--accent)}
.stat span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
@media (max-width:860px){.meister-grid{grid-template-columns:1fr}.meister-grid .portrait{max-width:420px}
  .stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- 05 Stimmen ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px);
  margin-top:clamp(30px,6vh,60px)}
.quote{border:1px solid var(--line);border-radius:8px;padding:26px;display:flex;flex-direction:column;gap:16px;
  background:var(--paper)}
.quote .starline{color:var(--accent);letter-spacing:.2em;font-size:.85rem}
.quote blockquote{margin:0;font-size:1.04rem;line-height:1.5;flex:1}
.quote footer{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
@media (max-width:820px){.quotes{grid-template-columns:1fr}}

/* ---------- 06 Kontakt ---------- */
#kontakt .tel-hero{display:block;text-decoration:none;font-weight:800;font-stretch:var(--wide);
  letter-spacing:-.02em;font-size:clamp(2.2rem,1.2rem + 5.5vw,5.5rem);line-height:1;color:var(--paper-on-dark);
  margin:clamp(22px,4vh,40px) 0;transition:color .2s}
#kontakt .tel-hero:hover{color:var(--accent-bright)}
.kontakt-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,5vw,80px);
  margin-top:clamp(26px,5vh,56px)}
.k-info dl{margin:0;display:grid;gap:20px}
.k-info dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-bright);margin-bottom:6px}
.k-info dd{margin:0;color:rgba(242,234,221,.85);font-size:.98rem}
.form{display:grid;gap:16px}
.form label{display:grid;gap:7px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(242,234,221,.6)}
.form input,.form textarea{
  font:inherit;font-size:1rem;color:var(--paper-on-dark);background:var(--dark-2);
  border:1px solid rgba(242,234,221,.22);border-radius:5px;padding:13px 15px;width:100%;
  transition:border-color .15s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent-bright)}
.form textarea{min-height:120px;resize:vertical}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.upload{border:1px dashed rgba(242,234,221,.35);border-radius:5px;padding:16px;cursor:pointer;
  display:flex;gap:12px;align-items:center;color:rgba(242,234,221,.75);font-family:var(--sans);
  font-size:.92rem;letter-spacing:0;text-transform:none;transition:border-color .15s}
.upload:hover{border-color:var(--accent-bright)}
.upload input{position:absolute;width:1px;height:1px;opacity:0}
.upload .icon{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(143,175,126,.15);
  display:grid;place-items:center;color:var(--accent-bright);font-size:1.1rem}
.form-ok{border:1px solid var(--accent-bright);background:rgba(143,175,126,.1);border-radius:6px;
  padding:20px;font-size:1rem}
.form-ok b{color:var(--accent-bright)}
@media (max-width:860px){.kontakt-grid{grid-template-columns:1fr}.form .two{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer.site{padding:clamp(40px,8vh,90px) 0 110px;overflow:hidden}
.wordmark{font-weight:800;font-stretch:var(--wide);letter-spacing:-.02em;line-height:.85;
  font-size:clamp(4.5rem,17.5vw,17rem);margin:0;color:var(--ink);text-align:center;white-space:nowrap}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:clamp(26px,5vh,50px);padding-top:22px;border-top:1px solid var(--line)}
.foot-row,.foot-row a{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink-60)}
.foot-row nav{display:flex;gap:22px}
.foot-row a{text-decoration:none;border-bottom:1px solid transparent}
.foot-row a:hover{color:var(--ink);border-color:var(--ink)}

dialog{border:none;border-radius:10px;padding:clamp(24px,4vw,40px);max-width:560px;width:calc(100% - 40px);
  background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(24,16,7,.55);backdrop-filter:blur(3px)}
dialog h3{margin:0 0 12px;font-stretch:var(--wide);font-weight:800}
dialog p{color:var(--ink-60);font-size:.95rem}
dialog .btn{margin-top:10px}

/* ---------- Mobile Sticky-Anruf ---------- */
.call-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;
  display:none;transform:translateY(120%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.call-bar a{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);
  color:#fff;text-decoration:none;font-weight:700;font-size:1.02rem;padding:15px;border-radius:8px;
  box-shadow:0 10px 30px rgba(42,33,24,.35)}
body.past-hero .call-bar{transform:none}
@media (max-width:820px){.call-bar{display:block}footer.site{padding-bottom:140px}}

/* ---------- Reduced Motion / No-JS: Welt statisch, alles lesbar ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
  .band .track{animation:none;width:auto}
  .world{height:auto}
  .world-stage{position:static;height:auto;overflow:visible}
  .world-stage canvas,.world-progress{display:none}
  .world-stage img.fallback{position:static;width:100%;height:auto;aspect-ratio:16/9}
  .world-shade{display:none}
  .world-copy{position:static;opacity:1;visibility:visible;pointer-events:auto;
    background:var(--walnut);padding:clamp(28px,6vh,56px) var(--pad)}
  .world-copy+.world-copy{border-top:1px solid rgba(255,255,255,.15)}
  .world-copy h2,.world-copy p{text-shadow:none}
}