/* Dorfkorb – Homepage / Landing (Desktop + Mobil) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{
  --green:#2f9e54;--green-d:#1f6b39;--forest:#10331f;--accent:#ff6a2b;--accent-d:#e2541d;
  --bg:#f7f4ec;--surface:#fff;--ink:#15201a;--ink-2:#5e6a5f;--line:#e7e1d4;
  --hero:linear-gradient(150deg,#34a85b,#1f7a40 55%,#13502e);--gradO:linear-gradient(135deg,#ff8a4d,#ff6a2b 60%,#e85618);
  --f-disp:'Fraunces',Georgia,serif;--f-ui:'Plus Jakarta Sans',system-ui,sans-serif;
  --sh:0 10px 30px rgba(16,51,31,.08);--sh-lg:0 30px 70px rgba(16,51,31,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-ui);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 1.4rem}

/* Header */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,244,236,.82);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:1.2rem;height:72px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--f-disp);font-weight:600;font-size:1.6rem;letter-spacing:-.02em;color:var(--forest)}
.brand b{color:var(--accent);font-weight:700}
.brand .bi{width:34px;height:34px;border-radius:10px;background:var(--hero);display:flex;align-items:center;justify-content:center;color:#fff}
.brand .bi svg{width:20px;height:20px}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.nav nav a.lnk{font-weight:600;color:var(--ink-2)}
.nav nav a.lnk:hover{color:var(--green-d)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-ui);font-weight:800;border:0;cursor:pointer;
  border-radius:999px;padding:.8rem 1.5rem;font-size:1rem;background:var(--hero);color:#fff;
  box-shadow:0 10px 24px rgba(31,107,57,.28),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .12s}
.btn:hover{transform:translateY(-2px)}
.btn.o{background:var(--gradO);box-shadow:0 10px 24px rgba(255,106,43,.3),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:#fff;color:var(--green-d);border:1.5px solid var(--line);box-shadow:none}
.nav .btn{padding:.6rem 1.2rem}
.menu-ico{display:none}

/* Hero */
.hero{padding:3.5rem 0 3rem;background:radial-gradient(80% 90% at 100% 0%,rgba(47,158,84,.10),transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:#e7f3ea;color:var(--green-d);font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:.4rem .8rem;border-radius:999px}
.hero h1{font-family:var(--f-disp);font-weight:600;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.02em;margin:1.1rem 0 1rem}
.hero h1 em{font-style:italic;color:var(--green-d)}
.hero p.lead{font-size:1.2rem;color:var(--ink-2);max-width:30em;margin-bottom:1.8rem}
.cta{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-img{position:relative;border-radius:30px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/4.6}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img .float{position:absolute;left:1.1rem;bottom:1.1rem;right:1.1rem;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:18px;padding:.9rem 1.1rem;display:flex;align-items:center;gap:.8rem;box-shadow:var(--sh)}
.hero-img .float .em{font-size:1.8rem}
.hero-img .float b{display:block;font-size:1rem}
.hero-img .float span{color:var(--ink-2);font-size:.85rem}

/* Trust strip */
.strip{background:var(--forest);color:#fff}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem}
.strip div{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem}
.strip svg{width:20px;height:20px;color:#bfe65a}

/* Sections */
section.pad{padding:4.5rem 0}
.sec-head{text-align:center;max-width:40em;margin:0 auto 2.6rem}
.sec-head h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.02em;line-height:1.08}
.sec-head p{color:var(--ink-2);font-size:1.12rem;margin-top:.7rem}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.step{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:2rem 1.6rem;box-shadow:var(--sh);text-align:center}
.step .n{width:54px;height:54px;border-radius:16px;background:var(--hero);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;box-shadow:0 8px 18px rgba(31,107,57,.3)}
.step .n svg{width:26px;height:26px}
.step h3{font-family:var(--f-disp);font-weight:600;font-size:1.35rem;margin-bottom:.4rem}
.step p{color:var(--ink-2)}

/* Products */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--sh);transition:transform .14s,box-shadow .14s}
.pc:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.pc .ph{aspect-ratio:1/1;position:relative}
.pc .ph img{width:100%;height:100%;object-fit:cover}
.pc .bd{padding:.9rem 1rem 1.1rem}
.pc .nm{font-weight:700;font-size:1.02rem}
.pc .pr{color:var(--green-d);font-weight:800;font-size:1.1rem;margin-top:.25rem}
.pc .pr small{color:var(--ink-2);font-weight:500}
.pc .bdg{position:absolute;top:.6rem;left:.6rem;background:var(--gradO);color:#fff;font-size:.7rem;font-weight:800;padding:.2rem .55rem;border-radius:999px;text-transform:uppercase}
.center{text-align:center;margin-top:2.4rem}

/* Merchant band */
.band{background:var(--hero);color:#fff;border-radius:30px;padding:3rem;display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center;box-shadow:var(--sh-lg);overflow:hidden;position:relative}
.band::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(191,230,90,.18)}
.band h2{font-family:var(--f-disp);font-weight:600;font-size:2.2rem;line-height:1.08;position:relative}
.band p{color:rgba(255,255,255,.9);margin-top:.6rem;position:relative}
.band .act{position:relative;display:flex;justify-content:flex-end}

/* Footer */
footer{background:var(--forest);color:rgba(255,255,255,.78);padding:3rem 0 2rem;margin-top:1rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
footer .brand{color:#fff}
footer a{color:rgba(255,255,255,.78)}
footer a:hover{color:#fff}
footer .col h4{color:#fff;font-weight:700;margin-bottom:.7rem;font-size:.95rem}
footer .col a{display:block;margin-bottom:.4rem;font-size:.92rem}
.copy{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.4rem;font-size:.85rem;color:rgba(255,255,255,.6)}

@media(max-width:860px){
  .nav nav{display:none}
  .menu-ico{display:flex;margin-left:auto}
  .hero .wrap{grid-template-columns:1fr;gap:2rem}
  .hero-img{aspect-ratio:16/12;order:-1}
  .steps{grid-template-columns:1fr}
  .prods{grid-template-columns:repeat(2,1fr);gap:.9rem}
  .band{grid-template-columns:1fr;padding:2rem;text-align:center}
  .band .act{justify-content:center}
  section.pad{padding:3rem 0}
}