:root{--gruen:#87B279;--gruen-dunkel:#5E8A50;--schwarz:#1D1D1B;--grau:#5B5B58;--hell:#F3F6F1;--linie:#DDE3DA;--weiss:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;font:17px/1.6 Arial,Helvetica,sans-serif;color:var(--schwarz);background:var(--weiss)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gruen-dunkel)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px;z-index:9}

.kopf{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.logo img{width:120px}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--schwarz);text-decoration:none;font-size:15px}
.nav a:hover{color:var(--gruen-dunkel)}

.btn{display:inline-block;background:var(--gruen);color:var(--schwarz);font-weight:bold;text-decoration:none;padding:12px 22px;border:2px solid var(--gruen);border-radius:0;transition:background .15s}
.btn:hover{background:var(--gruen-dunkel);border-color:var(--gruen-dunkel);color:#fff}
.btn-linie{background:transparent;border-color:var(--schwarz);color:var(--schwarz)}
.btn-linie:hover{background:var(--schwarz);border-color:var(--schwarz);color:#fff}
.btn-hell{background:transparent;border-color:#fff;color:#fff}
.btn-hell:hover{background:#fff;color:var(--schwarz);border-color:#fff}
.nav .btn-klein{padding:7px 14px;font-size:14px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

section{padding:72px 0}
.hell{background:var(--hell)}
.dunkel{background:var(--schwarz);color:#fff}
.kicker,.claim{margin:0 0 6px;color:var(--gruen-dunkel);font-weight:bold;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
h1{font-size:42px;line-height:1.15;margin:0 0 18px}
h2{font-size:30px;line-height:1.2;margin:0 0 28px}
h3{font-size:19px;margin:0 0 8px}
.lead{font-size:19px;color:var(--grau);max-width:620px}

.held{padding:64px 0 72px;border-bottom:6px solid var(--gruen)}
.held-in{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.held-logo{width:100%;max-width:460px;justify-self:end}

.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.karte{border:1px solid var(--linie);border-top:4px solid var(--gruen);padding:22px 22px 18px;background:#fff}
.karte p{margin:0;color:var(--grau);font-size:16px}
.marke{display:inline-block;background:var(--schwarz);color:#fff;font-weight:bold;font-size:13px;padding:3px 9px;margin-bottom:12px}

.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.schritte li{counter-increment:s;background:#fff;padding:22px;border:1px solid var(--linie)}
.schritte li::before{content:counter(s);display:block;width:40px;height:40px;line-height:40px;text-align:center;background:var(--gruen);font-weight:bold;font-size:19px;margin-bottom:14px}
.schritte b{display:block;font-size:18px;margin-bottom:6px}
.schritte span{color:var(--grau);font-size:16px}

.zwei{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.liste{padding-left:20px;margin:0 0 16px}.liste li{margin-bottom:10px}
.hinweis{background:var(--hell);border-left:6px solid var(--gruen);padding:24px}
.hinweis p{margin:0 0 10px;color:var(--grau);font-size:16px}.hinweis p:last-child{margin:0}

.band{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.band h2{margin:0 0 6px;color:#fff}.band p{margin:0;color:#cfd6cc}.band .knoepfe{margin:0}

.fuss{padding:28px 0;border-top:1px solid var(--linie);font-size:14px;color:var(--grau)}
.fuss-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.fuss p{margin:0}

@media (max-width:900px){
  .raster{grid-template-columns:1fr 1fr}
  .schritte{grid-template-columns:1fr 1fr}
  .held-in,.zwei{grid-template-columns:1fr;gap:32px}
  .held-logo{justify-self:start;max-width:360px;order:-1}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  section{padding:48px 0}
  h1{font-size:30px}h2{font-size:24px}
  .lead{font-size:17px}
  .raster,.schritte{grid-template-columns:1fr}
  .nav a:not(.btn){display:none}
  .held-logo{max-width:280px}
}