@font-face{font-family:"Inter";src:url(../fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --hell:#fbfbfb;
  --oliv:#56532e;
  --balken:#58542f;
  --u:min(100vw / 1440,1.15px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hell);color:var(--oliv);font:400 16px/1.8 "Inter",Arial,sans-serif;letter-spacing:-.011em}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
h1,h2,h3{font-weight:700;margin:0}
h2{font-size:46.24px;line-height:1.3}
h3{font-size:36.16px;line-height:1.33}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
.skip{position:absolute;left:-999px}
.versteckt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:20}

.seite{width:100%;max-width:calc(1440 * var(--u));margin:auto}

.kopf{display:flex;align-items:center;justify-content:space-between;padding:calc(16 * var(--u)) calc(43 * var(--u));min-height:100px}
.logo{display:block;width:250px}
.logo img{height:auto}
.nav{display:flex;gap:19px}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
#menu,.burger{display:none}

.block{display:flex;align-items:flex-start;padding:calc(55 * var(--u)) calc(100 * var(--u)) calc(94 * var(--u)) calc(43 * var(--u))}
.block .foto{flex:none;width:calc(558 * var(--u));height:calc(350 * var(--u))}
.block .inhalt{margin-left:calc(125 * var(--u));width:calc(614 * var(--u))}
.block h3{margin-bottom:32px}
#forstmulchen{padding-top:calc(54 * var(--u));padding-bottom:calc(54 * var(--u))}
#forstmulchen .foto{height:calc(390 * var(--u))}
#wurzelfraesen{padding:calc(57 * var(--u)) calc(43 * var(--u)) calc(94 * var(--u)) calc(100 * var(--u))}
#wurzelfraesen .paar{flex:none;display:flex;gap:calc(11 * var(--u));width:calc(671 * var(--u));margin-top:calc(78 * var(--u))}
#wurzelfraesen .foto{width:calc(330 * var(--u));height:calc(311 * var(--u))}
#wurzelfraesen .inhalt{margin-left:calc(68 * var(--u));width:calc(558 * var(--u))}
#wurzelfraesen h2{margin-bottom:58px}
#holzruecken{flex-direction:row-reverse;justify-content:space-between;padding-left:calc(100 * var(--u));padding-right:calc(100 * var(--u))}
#holzruecken .inhalt{margin:0;width:calc(501 * var(--u))}

.aufruf{background:var(--balken);color:#fff;padding:14px calc(43 * var(--u)) 64px;text-align:center}
.aufruf h2{margin-bottom:48px}
.aufruf h2+h2{margin-bottom:32px}

.recht{display:flex;justify-content:space-between;padding:calc(102 * var(--u)) calc(157 * var(--u)) 96px calc(43 * var(--u))}
.recht .inhalt{width:calc(387 * var(--u));min-width:320px}
.recht .klein{margin-top:16px}
.recht .inhalt a{text-decoration:underline;text-underline-offset:3px}

.dse{max-width:760px;padding:calc(54 * var(--u)) calc(43 * var(--u)) 96px}
.dse h1{font-size:46.24px;line-height:1.3;margin-bottom:24px}
.dse h3{font-size:22px;margin:32px 0 8px}
.dse a{text-decoration:underline;text-underline-offset:3px}

@media (max-width:767px){
  :root{--r:24px}
  body{font-size:16px}
  .kopf{position:relative;flex-wrap:wrap;min-height:0;padding:16px var(--r)}
  .logo{width:128px}
  .burger{display:block;width:40px;height:32px;cursor:pointer;background:linear-gradient(var(--oliv),var(--oliv)) center 11px/36px 1px no-repeat,linear-gradient(var(--oliv),var(--oliv)) center 20px/36px 1px no-repeat}
  #menu{display:block;position:absolute;opacity:0;right:24px;top:18px;width:40px;height:32px;margin:0}
  #menu:focus-visible+.burger{outline:2px solid var(--oliv)}
  .nav{display:none;flex-direction:column;gap:4px;width:100%;padding-top:16px;font-size:20px}
  #menu:checked~.nav{display:flex}
  .block,#forstmulchen,#wurzelfraesen,#holzruecken{display:block;padding:0 var(--r) 40px}
  .block .foto,#forstmulchen .foto{width:100%;height:auto;aspect-ratio:3/2}
  .block .inhalt,#wurzelfraesen .inhalt,#holzruecken .inhalt{margin:32px 0 0;width:100%}
  h2{font-size:32px}
  h3{font-size:26px}
  #wurzelfraesen h2{margin-bottom:24px}
  .block h3{margin-bottom:24px}
  #wurzelfraesen .paar{display:block;width:87%;margin:0}
  #wurzelfraesen .foto{width:100%;height:auto;aspect-ratio:224/254;margin-bottom:11px}
  .aufruf{padding:40px var(--r)}
  .recht{display:block;padding:48px var(--r)}
  .recht .inhalt{width:auto;min-width:0;margin-top:32px}
  .dse{padding:16px var(--r) 48px}
  .dse h1{font-size:32px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}