/* =====================================================================
   Bespoke identity: Gartenbau Keller (Aargau)
   Character: organic, natural, grown. Soft serif headlines, circular
   shapes, earthy greens and an airy, living hero. Nothing boxy.
   Built on the Lokaldigital engine, themed far beyond colour.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,800&display=swap');

:root{
  --brand:#3e8e5f;
  --brand-2:#1d4734;
  --brand-ink:#ffffff;
  --brand-tint:#eef6f0;
  --bloom:#C9A227;             /* warm seed / sun accent */
  --font-display:"Fraunces", Georgia, serif;
  --radius:24px;
  --shadow:0 2px 4px rgba(20,50,35,.06), 0 26px 52px -28px rgba(29,71,52,.5);
}

/* =====================================================================
   BESPOKE LAYOUT - Gartenbau Keller
   Organic magazine: image-led full-bleed hero (bottom-left headline),
   a unique seasonal "Gartenjahr" timeline, offset masonry services,
   leaf-marker "why" list, rounded masonry gallery, two big quote cards,
   one soft rounded contact band. No shared .hero / .grid-3 / .tile /
   .gal / .why / .steps / .trust / .contact layout is used.
   ===================================================================== */

/* organic serif headlines, a touch lighter and warmer */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em}
.eyebrow{letter-spacing:.18em;color:var(--brand-2)}
.logo .mark{border-radius:50%}                 /* seed-like round logo */

/* subtle organic paper wash on the page */
body{background-image:radial-gradient(60% 40% at 50% 0%, rgba(62,142,95,.05), transparent 70%)}

.sec-h h2{position:relative}
.g-services .sec-h h2::after,.g-season .sec-h h2::after{
  content:"";display:block;width:72px;height:5px;margin-top:.7rem;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--bloom))}

.g-note{color:var(--ink-2);font-size:.86rem;margin-top:1.1rem}

/* ---------------------------------------------------------------------
   HERO - full-bleed, image-led, headline anchored bottom-left
   --------------------------------------------------------------------- */
.g-hero{position:relative;min-height:clamp(520px,82vh,760px);display:flex;
  align-items:flex-end;overflow:hidden;color:#fff;
  border-bottom-left-radius:48px;border-bottom-right-radius:48px}
.g-hero-media{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(62,142,95,.55), transparent 60%),
    linear-gradient(150deg,#5aa873 0%,var(--brand) 42%,var(--brand-2) 100%)}
.g-hero-media::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(2px 2px at 22% 28%, rgba(255,255,255,.20) 50%, transparent 51%),
    radial-gradient(2px 2px at 70% 58%, rgba(255,255,255,.16) 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 82%, rgba(255,255,255,.14) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 22%, rgba(255,255,255,.16) 50%, transparent 51%)}
/* soft organic shape behind the headline (bottom-left) */
.g-hero-media::after{content:"";position:absolute;left:-12%;bottom:-22%;
  width:min(78%,820px);height:78%;
  background:radial-gradient(closest-side, rgba(11,38,26,.78), rgba(11,38,26,0) 72%);
  filter:blur(6px)}
.g-leaf{position:absolute;border-radius:0 80% 0 80%;opacity:.5;pointer-events:none;
  background:linear-gradient(135deg,rgba(214,232,150,.5),rgba(62,142,95,0))}
.g-leaf-1{width:280px;height:280px;top:-60px;right:-40px;transform:rotate(18deg)}
.g-leaf-2{width:180px;height:180px;top:34%;right:14%;transform:rotate(-26deg);opacity:.34}
.g-hero-note{position:absolute;top:18px;right:20px;font-size:.72rem;font-weight:600;
  color:rgba(255,255,255,.7);background:rgba(11,38,26,.32);
  border:1px solid rgba(255,255,255,.22);padding:.3em .8em;border-radius:999px}
.g-hero-inner{position:relative;z-index:2;width:100%;
  padding-bottom:clamp(40px,6vw,72px);padding-top:clamp(120px,20vh,200px)}
.g-badge{display:inline-flex;align-items:center;gap:.5em;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  padding:.42em .95em;border-radius:999px;font-weight:600;font-size:.86rem;margin-bottom:1.1rem}
.g-hero h1{font-size:clamp(2.5rem,6vw,4.4rem);line-height:1.02;color:#fff;
  text-shadow:0 2px 24px rgba(11,38,26,.4)}
.g-hero-lead{margin:1.1rem 0 1.7rem;font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:rgba(255,255,255,.94);max-width:46ch;text-shadow:0 1px 12px rgba(11,38,26,.4)}
.g-hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.g-hero-cta .btn-quote{color:#fff;border-color:rgba(255,255,255,.75)}
.g-hero-cta .btn-quote:hover{background:#fff;color:var(--brand-2)}

/* ---------------------------------------------------------------------
   Soft trust ribbon (rounded pebbles)
   --------------------------------------------------------------------- */
.g-ribbon{padding:clamp(22px,4vw,34px) 0}
.g-ribbon .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.g-peb{background:var(--brand-tint);border:1px solid rgba(62,142,95,.16);
  border-radius:999px;padding:1rem 1.4rem;display:flex;flex-direction:column;gap:.05rem;
  text-align:center;align-items:center}
.g-peb b{font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--brand-2)}
.g-peb span{color:var(--ink-2);font-size:.84rem}

/* ---------------------------------------------------------------------
   UNIQUE - Gartenjahr seasonal timeline (horizontal 4-season strip)
   --------------------------------------------------------------------- */
.g-seasons{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.1rem;position:relative}
/* the connecting "season line" running across the strip */
.g-seasons::before{content:"";position:absolute;left:6%;right:6%;top:34px;height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#7fb98f,var(--bloom),#c98a3a,#7fa9c0);opacity:.55;z-index:0}
.g-season-card{position:relative;z-index:1;background:var(--paper);
  border:1px solid var(--line);border-radius:28px;padding:1.5rem 1.3rem;
  box-shadow:0 1px 2px rgba(20,50,35,.05);transition:transform .18s,box-shadow .18s}
.g-season-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.g-season-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  color:#fff;margin:0 auto .9rem;box-shadow:0 8px 18px -8px rgba(20,50,35,.5)}
.g-season-icon svg{width:30px;height:30px}
.g-season-card h3{font-size:1.2rem;text-align:center;margin-bottom:.45rem}
.g-season-card p{color:var(--ink-2);font-size:.93rem;text-align:center}
.s-spring .g-season-icon{background:linear-gradient(150deg,#8fce9e,#3e8e5f)}
.s-summer .g-season-icon{background:linear-gradient(150deg,#d9c24e,var(--bloom))}
.s-autumn .g-season-icon{background:linear-gradient(150deg,#d98a4a,#a85a23)}
.s-winter .g-season-icon{background:linear-gradient(150deg,#9cc0d6,#5d86a0)}

/* ---------------------------------------------------------------------
   SERVICES - offset two-column masonry, varying block heights
   --------------------------------------------------------------------- */
.g-mason{columns:2;column-gap:1.4rem}
.g-svc{break-inside:avoid;margin-bottom:1.4rem;background:var(--paper);
  border:1px solid var(--line);border-radius:26px;overflow:hidden;
  transition:transform .18s,box-shadow .18s}
.g-svc:nth-child(even){margin-top:2.2rem}        /* the OFFSET stagger */
.g-svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.g-svc-img{position:relative;height:180px;display:flex;align-items:flex-end;color:#fff;
  background:linear-gradient(160deg,var(--brand),var(--brand-2))}
.g-svc.tall .g-svc-img{height:300px}
.g-svc:nth-child(3n+2) .g-svc-img{background:linear-gradient(160deg,var(--brand-2),#0e2a1d)}
.g-svc:nth-child(3n) .g-svc-img{background:linear-gradient(160deg,#6a7d2e,var(--brand-2))}
.g-svc-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,38,26,.45),transparent 55%)}
.g-svc-img span{position:relative;z-index:1;padding:1rem;font-weight:700;font-size:.92rem;
  text-shadow:0 1px 8px rgba(0,0,0,.45)}
.g-svc-body{padding:1.3rem 1.4rem 1.5rem}
.g-svc-body h3{font-size:1.22rem;margin-bottom:.4rem}
.g-svc-body p{color:var(--ink-2);font-size:.96rem}

/* ---------------------------------------------------------------------
   WARUM - soft list with leaf-shaped rounded markers
   --------------------------------------------------------------------- */
.g-leaf-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.4rem;max-width:none}
.g-leaf-list li{display:flex;gap:1rem;align-items:flex-start;background:var(--paper);
  border:1px solid rgba(62,142,95,.18);border-radius:22px;padding:1.1rem 1.3rem}
.g-leaf-mark{flex:0 0 auto;width:30px;height:30px;margin-top:.15rem;
  border-radius:0 78% 0 78%;transform:rotate(-8deg);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  position:relative}
.g-leaf-mark::after{content:"";position:absolute;left:50%;top:18%;width:2px;height:64%;
  transform:translateX(-50%) rotate(8deg);background:rgba(255,255,255,.6);border-radius:2px}
.g-leaf-list h4{font-size:1.08rem;margin-bottom:.15rem}
.g-leaf-list p{color:var(--ink-2);font-size:.95rem}

/* ---------------------------------------------------------------------
   REFERENZEN - organic rounded masonry gallery, varying tile sizes
   --------------------------------------------------------------------- */
.g-grid{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:170px;gap:1rem}
.g-tile{position:relative;border-radius:26px;overflow:hidden;display:flex;align-items:flex-end;
  color:#fff;background:linear-gradient(160deg,var(--brand),var(--brand-2));
  transition:transform .2s}
.g-tile:hover{transform:scale(1.015)}
.g-tile.g-wide{grid-column:span 2}
.g-tile.g-tall{grid-row:span 2}
.g-tile:nth-child(2){background:linear-gradient(160deg,var(--brand-2),#0e2a1d)}
.g-tile:nth-child(3){background:linear-gradient(160deg,#6a7d2e,var(--brand-2))}
.g-tile:nth-child(4){background:linear-gradient(160deg,var(--brand-2),var(--brand))}
.g-tile:nth-child(6){background:linear-gradient(160deg,#3d6b4e,var(--bloom))}
.g-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,38,26,.55),transparent 55%)}
.g-tile span{position:relative;z-index:1;padding:1rem 1.2rem;font-weight:700;font-size:.94rem;
  text-shadow:0 1px 8px rgba(0,0,0,.45)}

/* ---------------------------------------------------------------------
   KUNDENSTIMMEN - two large rounded quote cards
   --------------------------------------------------------------------- */
.g-quote-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.g-qcard{position:relative;background:var(--brand-tint);
  border:1px solid rgba(62,142,95,.16);border-radius:34px;
  padding:2.4rem 2rem 1.9rem;overflow:hidden}
.g-qmark{position:absolute;top:-.4rem;left:1.2rem;font-family:var(--font-display);
  font-size:7rem;line-height:1;color:rgba(62,142,95,.18);font-weight:800}
.g-qcard blockquote{position:relative;font-family:var(--font-display);font-weight:500;
  font-size:1.3rem;line-height:1.4;color:var(--ink);margin:0 0 1.3rem}
.g-qcard figcaption{display:flex;flex-direction:column;gap:.1rem}
.g-qcard .stars{color:var(--brand);letter-spacing:.14em;margin-bottom:.35rem;font-size:.95rem}
.g-qcard b{font-size:1rem}
.g-qcard small{color:var(--ink-2)}

/* ---------------------------------------------------------------------
   KONTAKT - one soft rounded band, working form + inline area served
   --------------------------------------------------------------------- */
.g-contact{padding:clamp(40px,7vw,80px) 0 clamp(54px,8vw,96px)}
.g-contact-band{background:linear-gradient(150deg,var(--brand-2),var(--brand));
  color:#fff;border-radius:42px;padding:clamp(28px,5vw,56px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,52px);align-items:start;
  box-shadow:var(--shadow);overflow:hidden}
.g-contact-left .eyebrow{color:rgba(255,255,255,.78)}
.g-contact-left h2{color:#fff;font-size:clamp(2rem,4.4vw,3rem);margin-top:.4rem}
.g-contact-lead{color:rgba(255,255,255,.9);margin:.9rem 0 1.3rem;font-size:1.08rem;max-width:44ch}
.g-area{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.g-area span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  border-radius:999px;padding:.4em .9em;font-size:.86rem;font-weight:600}
.g-cinfo{display:grid;gap:.9rem}
.g-cinfo a,.g-cinfo div{display:flex;align-items:center;gap:.7em;color:#fff;font-weight:600}
.g-cic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.16);display:grid;place-items:center}
.g-cic svg{width:20px;height:20px}
.g-cinfo small{display:block;font-weight:500;color:rgba(255,255,255,.78)}
.g-form-card{background:#fff;color:var(--ink);border-radius:28px;padding:1.7rem;
  box-shadow:0 20px 40px -24px rgba(11,38,26,.6)}
.g-form-card h3{font-size:1.3rem;margin-bottom:.2rem}
.g-form-sub{color:var(--ink-2);font-size:.9rem;margin-bottom:1rem}
.g-form-card .field input,.g-form-card .field textarea{border-radius:14px}
.g-form-card .btn-call{width:100%;justify-content:center;margin-top:.4rem}
.g-form-alt{text-align:center;margin-top:.8rem;font-size:.86rem;color:var(--ink-2)}
.g-form-alt a{color:var(--brand);font-weight:700}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media(max-width:900px){
  .g-ribbon .wrap{grid-template-columns:1fr 1fr}
  .g-seasons{grid-template-columns:1fr 1fr}
  .g-seasons::before{display:none}
  .g-leaf-list{grid-template-columns:1fr}
  .g-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .g-quote-duo{grid-template-columns:1fr}
  .g-contact-band{grid-template-columns:1fr}
}
@media(max-width:560px){
  .g-hero{min-height:560px;border-bottom-left-radius:32px;border-bottom-right-radius:32px}
  .g-ribbon .wrap{grid-template-columns:1fr 1fr}
  .g-seasons{grid-template-columns:1fr}
  .g-mason{columns:1}
  .g-svc:nth-child(even){margin-top:0}
  .g-grid{grid-template-columns:1fr;grid-auto-rows:160px}
  .g-tile.g-wide,.g-tile.g-tall{grid-column:auto;grid-row:auto}
}