@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700&family=Work+Sans:wght@400;500;600&display=swap');
:root{--klee:#2F4A3A;--creme:#F4EDE1;--safran:#D99A2B;--erde:#B4553A;--tinte:#1F2A24}
*{box-sizing:border-box}body{margin:0;font-family:'Work Sans',sans-serif;color:var(--tinte);background:var(--creme);line-height:1.6}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 6vw;background:#fff;border-bottom:1px solid #e3dccf}
nav a{margin-left:22px;color:var(--klee);text-decoration:none;font-weight:500}
h1,h2,h3{font-family:'Fraunces',serif;color:var(--klee);line-height:1.15}h1{font-size:56px;margin:0 0 16px}h2{font-size:36px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:60px 6vw}.hero img{width:100%;border-radius:4px}
.knopf{display:inline-block;background:var(--klee);color:#fff;padding:14px 28px;border-radius:999px;text-decoration:none;font-weight:600;border:0;font-size:16px;cursor:pointer}
.knopf.safran{background:var(--safran);color:var(--tinte)}
.raster{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:20px 6vw 60px}.karte{background:#fff;border-radius:4px;overflow:hidden}
.karte img{width:100%;aspect-ratio:1;object-fit:cover}.karte div{padding:14px 16px}.karte a{color:inherit;text-decoration:none}.preis{color:var(--erde);font-weight:600}
.band{background:var(--klee);color:var(--creme);padding:50px 6vw}.band h2{color:var(--creme)}
.produkt{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:50px 6vw}.produkt img{width:100%;border-radius:4px}
footer{padding:40px 6vw;font-size:14px;color:#556}
@media(max-width:800px){.hero,.produkt{grid-template-columns:1fr}.raster{grid-template-columns:1fr 1fr}h1{font-size:38px}}
@media(max-width:800px){header{flex-wrap:wrap;gap:8px;padding:14px 16px}nav a{margin:0 14px 0 0}.hero,.produkt,.band{padding-left:16px;padding-right:16px}.hero,.produkt{grid-template-columns:minmax(0,1fr)}.raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px}h1{font-size:34px;overflow-wrap:anywhere}h2{font-size:28px}.knopf{margin-bottom:8px}img{max-width:100%}}