@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Barlow-400.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Barlow-600.woff2) format('woff2');}
@font-face{font-family:'Bowlby One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/BowlbyOne-400.woff2) format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/Oswald-700.woff2) format('woff2');}

:root{
  --gruen:#3f6a24; --gruen-dunkel:#2b4a17; --gelb:#f3d21a; --schwarz:#141410;
  --holz:#efdcb0; --text:#2a2a22; --weiss:#fbf7ec;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;overflow-x:hidden;font-family:Barlow,system-ui,sans-serif;font-size:1.08rem;line-height:1.6;color:var(--text);
  background:var(--holz) url(img/holz-hell.jpg) center/cover fixed}
img{max-width:100%;display:block}
a{color:inherit}

/* Kopfleiste */
.kopf{position:sticky;top:0;z-index:20;background:var(--gruen);box-shadow:0 3px 12px rgba(0,0,0,.35)}
.kopf-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.4rem}
.logo{font-family:'Bowlby One',sans-serif;font-size:1.65rem;line-height:1;text-decoration:none;color:var(--schwarz);
  -webkit-text-stroke:1.5px var(--gelb);paint-order:stroke fill;text-shadow:0 0 0 var(--gelb)}
.logo span{color:var(--gelb);-webkit-text-stroke:0}
.menu{display:flex;gap:2.2rem;list-style:none;margin:0;padding:0}
.menu a{font-family:Barlow;font-weight:600;font-size:1.05rem;color:var(--weiss);text-decoration:none;padding:.5rem 0;border-bottom:3px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--gelb);border-bottom-color:var(--gelb)}
.menu-knopf{display:none}

/* Hero */
.hero{position:relative;text-align:center;padding:5rem 1.2rem 4.5rem;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(239,220,176,.0) 0%,rgba(239,220,176,0) 14%,rgba(63,106,36,.55) 34%,rgba(20,20,16,.25) 55%,rgba(20,20,16,.55) 100%),
    url(img/kaminholz.jpg) center 30%/cover;}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:34%;
  background:linear-gradient(180deg,var(--holz) 0%,rgba(239,220,176,.92) 45%,rgba(239,220,176,0) 100%);pointer-events:none}
.hero>*{position:relative}
.hero h1{font-family:'Bowlby One',sans-serif;font-weight:400;font-size:clamp(2.6rem,8.5vw,6.2rem);line-height:1;margin:0;color:var(--schwarz);
  -webkit-text-stroke:4px var(--gelb);paint-order:stroke fill;letter-spacing:.01em;
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.35))}
.hero .firma{font-family:Oswald,sans-serif;font-weight:700;font-size:clamp(1.15rem,2.6vw,1.9rem);color:#fff;margin:1.4rem 0 2.8rem;
  text-shadow:0 2px 6px rgba(0,0,0,.6)}

/* Pinselstrich-Flächen */
.pinsel{position:relative;z-index:0;isolation:isolate;display:inline-block;max-width:720px;padding:1.6rem 2.6rem;color:#fff;
  font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.45}
.pinsel::before{content:"";position:absolute;inset:0;background:var(--gruen);filter:url(#rau);z-index:-1;
  box-shadow:0 6px 18px rgba(0,0,0,.35)}

/* Symbole */
.symbole{display:flex;justify-content:center;gap:clamp(1.2rem,4vw,3.2rem);flex-wrap:wrap;margin:3rem 0 3.4rem}
.symbol{width:170px;text-decoration:none}
.symbol .kreis{width:150px;height:150px;margin:0 auto;border-radius:50%;background:var(--gruen);display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.45);transition:transform .2s}
.symbol:hover .kreis{transform:translateY(-4px)}
.symbol svg{width:84px;height:84px;fill:var(--gelb)}
.symbol strong{display:block;margin-top:.8rem;font-family:Oswald,sans-serif;font-weight:700;font-size:1.3rem;color:var(--gelb);
  text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.8)}

/* Bagger-Hinweis */
.neu{max-width:780px;margin:0 auto;padding:1.6rem 2rem;background:var(--gruen);border:4px solid var(--gelb);outline:3px solid var(--gelb);outline-offset:5px;
  color:#fff;font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(1.25rem,2.6vw,1.85rem);line-height:1.4;
  box-shadow:0 8px 22px rgba(0,0,0,.45);transform:rotate(-.4deg)}
.neu em{font-style:normal;color:var(--gelb)}

/* Kontaktzeile im Hero */
.ruf{display:flex;justify-content:center;align-items:center;gap:1.2rem;margin-top:3.2rem;text-align:left;flex-wrap:wrap}
.ruf .hoerer{width:86px;height:86px;border-radius:50%;border:4px solid var(--gelb);background:var(--gruen-dunkel);display:grid;place-items:center;flex:none}
.ruf .hoerer svg{width:42px;fill:var(--gelb)}
.ruf b{display:block;font-family:Oswald;font-weight:700;font-size:1.6rem;color:var(--gelb);letter-spacing:.02em}
.ruf a{font-family:Oswald;font-weight:500;font-size:clamp(1.3rem,3vw,2rem);color:#fff;text-decoration:none;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.ruf a:hover{color:var(--gelb)}

/* Abschnitte */
.abschnitt{max-width:1180px;margin:0 auto;padding:5rem 1.4rem}
.abschnitt h2{font-family:'Bowlby One',sans-serif;font-weight:400;font-size:clamp(2rem,4.5vw,3rem);line-height:1.05;margin:0 0 .6rem;color:var(--gruen-dunkel)}
.abschnitt .einleitung{max-width:680px;font-size:1.15rem;margin:0 0 2.6rem}
.band{height:46px;background:var(--gruen);filter:url(#rau)}

.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem}
.karte{background:var(--weiss);border-top:6px solid var(--gruen);padding:1.6rem 1.5rem 1.5rem;box-shadow:0 4px 14px rgba(60,40,10,.15)}
.karte svg{width:54px;height:54px;fill:var(--gruen);margin-bottom:.6rem}
.karte h3{font-family:Oswald,sans-serif;font-weight:700;font-size:1.35rem;text-transform:uppercase;margin:0 0 .4rem;color:var(--schwarz)}
.karte p{margin:0}
.karte.neu-karte{border-top-color:var(--gelb);background:var(--gruen);color:#fff}
.karte.neu-karte h3{color:var(--gelb)}
.karte.neu-karte svg{fill:var(--gelb)}
.marke{display:inline-block;background:var(--gelb);color:var(--schwarz);font-family:Oswald;font-weight:700;font-size:.8rem;padding:.1rem .5rem;margin-left:.4rem;vertical-align:middle}

.ueber{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
.ueber img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:6px solid var(--weiss);box-shadow:0 8px 24px rgba(60,40,10,.3);transform:rotate(1deg)}
.ueber blockquote{margin:1.6rem 0 0;padding:1rem 1.3rem;border-left:6px solid var(--gelb);background:rgba(63,106,36,.1);font-family:Oswald;font-size:1.3rem;color:var(--gruen-dunkel)}
.fakten{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.8rem}
.fakten div{font-family:Oswald;font-size:1rem;text-transform:uppercase;color:var(--gruen-dunkel)}
.fakten strong{display:block;font-family:'Bowlby One';font-weight:400;font-size:2.2rem;color:var(--schwarz);line-height:1}

.kontakt{background:var(--gruen-dunkel);color:var(--weiss)}
.kontakt .abschnitt h2{color:var(--gelb)}
.kontakt-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem}
.kontakt h3{font-family:Oswald;font-weight:700;text-transform:uppercase;color:var(--gelb);font-size:1.05rem;letter-spacing:.06em;margin:0 0 .4rem}
.kontakt p{margin:0 0 .2rem}
.kontakt a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(243,210,26,.5)}
.kontakt a:hover{color:var(--gelb)}
.gross a{font-family:Oswald;font-weight:500;font-size:1.6rem;border:0}
.knopf{display:inline-block;margin-top:1.4rem;background:var(--gelb);color:var(--schwarz)!important;font-family:Oswald;font-weight:700;font-size:1.15rem;
  text-transform:uppercase;padding:.8rem 1.6rem;text-decoration:none;border:0!important;box-shadow:0 4px 0 #b39a0e}
.knopf:hover{transform:translateY(1px);box-shadow:0 3px 0 #b39a0e}

/* Fuß */
.fuss-band{height:40px;background:var(--gruen);filter:url(#rau);margin-bottom:-6px}
.fuss{background:var(--holz) url(img/holz-hell.jpg) center/cover}
.fuss-in{max-width:1180px;margin:0 auto;padding:2.2rem 1.4rem 1.4rem;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1.6rem;align-items:center}
.fuss .logo{font-size:1.5rem;color:var(--gruen-dunkel);-webkit-text-stroke:0}
.fuss small{display:block;font-size:.9rem;margin-top:.3rem}
.fuss .punkt{display:flex;gap:.8rem;align-items:center;font-size:.98rem;line-height:1.35}
.fuss .punkt svg{width:34px;height:34px;fill:var(--gruen);flex:none}
.recht{max-width:1180px;margin:0 auto;padding:.8rem 1.4rem 1.6rem;font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;border-top:1px solid rgba(43,74,23,.25)}
.recht a{margin-left:1.2rem}

/* Unterseiten */
.text{max-width:780px;margin:0 auto;padding:4rem 1.4rem 5rem}
.text h1{font-family:'Bowlby One';font-weight:400;font-size:clamp(2rem,5vw,3rem);color:var(--gruen-dunkel);margin:0 0 2rem}
.text h2{font-family:Oswald;font-weight:700;text-transform:uppercase;color:var(--gruen);font-size:1.2rem;margin:2.2rem 0 .5rem}
.text .blatt{background:var(--weiss);padding:2.4rem;box-shadow:0 4px 14px rgba(60,40,10,.15)}

@media (max-width:820px){
  .menu-knopf{display:block;background:none;border:2px solid var(--gelb);color:var(--gelb);font:600 1rem Barlow;padding:.35rem .8rem;cursor:pointer}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--gruen-dunkel);padding:.5rem 1.4rem 1rem}
  .menu.offen{display:flex}
  .menu a{display:block;padding:.7rem 0}
  .ueber{grid-template-columns:1fr}
  .fuss-in{grid-template-columns:1fr}
  .symbol{width:130px}.symbol .kreis{width:118px;height:118px}.symbol svg{width:64px;height:64px}
  .pinsel{padding:1.3rem 1.4rem}
  body{background-attachment:scroll}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}