/* =========================================================================
   Gartencenter Jürgenliemke – gemeinsame Gestaltung für alle Kategorieseiten
   Farben & Schriften sind an die bestehende Startseite angelehnt:
   - Grün:      #01411F   (Cormorant-Überschriften, Buttons)
   - Schriften: Cormorant Garamond (Überschriften) + Montserrat (Text)
   Diese Datei muss im selben Ordner liegen wie die HTML-Seiten.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

:root{
  --green:        #01411f;   /* Hauptgrün (wie Startseite) */
  --green-dark:   #012a14;
  --green-soft:   #2f6b45;
  --green-mist:   #e7eee9;   /* zarter grüner Flächenton */
  --paper:        #faf7f0;   /* warmes Papierweiß */
  --paper-2:      #f2ece0;   /* etwas wärmer/tiefer */
  --wood:         #a67c52;   /* dezenter Holz-/Messing-Akzent */
  --wood-light:   #c9a273;
  --ink:          #22302a;   /* Fließtext */
  --muted:        #5c6b62;   /* gedämpfter Text */
  --line:         #dcd6c8;   /* Trennlinien */
  --white:        #ffffff;
  --shadow:       0 18px 40px -24px rgba(1,42,20,.45);
  --shadow-sm:    0 8px 22px -16px rgba(1,42,20,.5);
  --maxw:         1180px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Montserrat', Arial, sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--green); text-decoration:none; }

h1,h2,h3,h4{
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--green);
  font-weight:700;
  line-height:1.12;
  margin:0 0 .4em;
  letter-spacing:.2px;
}

p{ margin:0 0 1em; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* Kleine Überschrift / "Eyebrow" ---------------------------------------- */
.eyebrow{
  display:inline-block;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--wood);
  margin-bottom:1rem;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:26px;height:1px;
  background:var(--wood);
  vertical-align:middle;
  margin-right:12px;
  transform:translateY(-3px);
}

/* ======================================================================
   Kopfbereich / Navigation
   ====================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,240,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:78px; flex-wrap:wrap;
}
.brand{
  display:flex; flex-direction:column; line-height:1;
  text-decoration:none;
}
.brand b{
  font-family:'Cormorant Garamond',serif;
  font-weight:700; font-size:1.5rem; color:var(--green);
  letter-spacing:.3px;
}
.brand span{
  font-size:.64rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--wood); margin-top:5px; font-weight:600;
}
.main-nav{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:4px 2px; justify-content:flex-end;
}
.main-nav a{
  font-size:.82rem; font-weight:500; letter-spacing:.04em;
  color:var(--ink); padding:8px 12px; border-radius:2px;
  position:relative; transition:color .2s;
}
.main-nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px;
  height:1px; background:var(--wood); transform:scaleX(0);
  transform-origin:left; transition:transform .25s;
}
.main-nav a:hover{ color:var(--green); }
.main-nav a:hover::after{ transform:scaleX(1); }
.main-nav a.active{ color:var(--green); }
.main-nav a.active::after{ transform:scaleX(1); }
.main-nav a.shop-link{
  color:var(--green); border:1px solid var(--green); margin-left:8px;
  padding:8px 16px;
}
.main-nav a.shop-link:hover{ background:var(--green); color:#fff; }
.main-nav a.shop-link::after{ display:none; }

/* ======================================================================
   Buttons
   ====================================================================== */
.btn{
  display:inline-block; font-family:'Montserrat',sans-serif;
  font-weight:600; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; padding:14px 30px; cursor:pointer;
  border:1px solid var(--green); background:var(--green); color:#fff;
  transition:background .22s,color .22s,transform .22s; border-radius:0;
}
.btn:hover{ background:var(--green-dark); transform:translateY(-2px); }
.btn.ghost{ background:transparent; color:var(--green); }
.btn.ghost:hover{ background:var(--green); color:#fff; }
.btn.light{ background:#fff; color:var(--green); border-color:#fff; }
.btn.light:hover{ background:var(--paper-2); }

/* ======================================================================
   Hero
   ====================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(166,124,82,.12), transparent 60%),
    linear-gradient(160deg, #06331b 0%, var(--green) 45%, #06381e 100%);
  color:#f4f1e8;
}
.hero .container{
  position:relative; z-index:2;
  padding-top:84px; padding-bottom:88px;
  max-width:820px; text-align:center;
}
.hero .eyebrow{ color:var(--wood-light); }
.hero .eyebrow::before{ background:var(--wood-light); }
.hero h1{
  color:#fff; font-size:clamp(2.4rem,5.5vw,4rem); margin-bottom:.3em;
  font-weight:600;
}
.hero p{
  color:#e7e2d4; font-size:clamp(1.02rem,1.6vw,1.2rem);
  max-width:600px; margin:0 auto 1.8em; font-weight:300;
}
.hero .btn.light{ margin:6px; }
.hero .btn.hero-ghost{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.55); margin:6px;
}
.hero .btn.hero-ghost:hover{ background:rgba(255,255,255,.12); }
/* dekorative Blattlinien im Hero */
.hero-leaf{ position:absolute; opacity:.13; z-index:1; color:#fff; }
.hero-leaf.tl{ top:-40px; left:-40px; width:280px; transform:rotate(20deg); }
.hero-leaf.br{ bottom:-70px; right:-50px; width:340px; transform:rotate(-160deg); }

/* ======================================================================
   Abschnitts-Grundlagen
   ====================================================================== */
.section{ padding:84px 0; }
.section.tight{ padding:60px 0; }
.section.mist{ background:var(--green-mist); }
.section.paper2{ background:var(--paper-2); }
.section-head{ max-width:720px; margin:0 auto 54px; text-align:center; }
.section-head h2{ font-size:clamp(2rem,3.6vw,2.9rem); }
.section-head p{ color:var(--muted); font-size:1.05rem; }

/* ======================================================================
   Karten-Raster (Kategorien / Produkte)
   ====================================================================== */
.grid{
  display:grid; gap:28px;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
}
.grid.two{ grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); }

.card{
  background:var(--white); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--wood-light); }

/* Bild-/Illustrationsfläche einer Karte.
   FOTO EINSETZEN: einfach  background-image:url('mein-foto.jpg');  ergänzen
   (Datei in denselben Ordner legen). Dann verschwindet der Farbverlauf. */
.card-visual{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:linear-gradient(150deg, #0c4526, #1c5a35);
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.card-visual.alt{ background:linear-gradient(150deg,#15532f,#2f6b45); }
.card-visual .ill{ width:56%; color:rgba(255,255,255,.9); opacity:.92; }
.card-visual .tag{
  position:absolute; top:14px; left:14px;
  background:rgba(250,247,240,.94); color:var(--green);
  font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px;
}
.card-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.card-body h3{ font-size:1.5rem; margin-bottom:.35em; }
.card-body p{ color:var(--muted); font-size:.94rem; margin-bottom:1.1em; }
.card-more{
  margin-top:auto; font-weight:600; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--green); display:inline-flex; align-items:center; gap:8px;
}
.card-more::after{ content:"→"; transition:transform .2s; }
.card:hover .card-more::after{ transform:translateX(5px); }

/* kleine Merkmalsliste in Produktkarten */
.spec{
  list-style:none; padding:0; margin:0 0 1.1em;
  display:flex; flex-direction:column; gap:7px;
}
.spec li{
  font-size:.86rem; color:var(--ink); display:flex; gap:9px; align-items:flex-start;
}
.spec li::before{ content:"✓"; color:var(--wood); font-weight:700; }
.price{
  font-family:'Cormorant Garamond',serif; color:var(--green);
  font-size:1.4rem; font-weight:600; margin-bottom:.2em;
}
.price small{ font-family:'Montserrat',sans-serif; font-size:.7rem; color:var(--muted); font-weight:400; }

/* ======================================================================
   Vorteile / Feature-Reihe
   ====================================================================== */
.features{
  display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.feature{ text-align:center; padding:8px; }
.feature .fic{
  width:58px; height:58px; margin:0 auto 18px; color:var(--green);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--wood-light); border-radius:50%;
}
.feature h3{ font-size:1.35rem; }
.feature p{ color:var(--muted); font-size:.92rem; }

/* ======================================================================
   Split / Text + Bild
   ====================================================================== */
.split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.split .visual{
  aspect-ratio:5/4; background:linear-gradient(150deg,#0c4526,#2f6b45);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.split .visual .ill{ width:52%; color:rgba(255,255,255,.9); }
.split h2{ font-size:clamp(1.8rem,3vw,2.5rem); }
.split p{ color:var(--muted); }

/* ======================================================================
   Info-Band (z. B. Beratung / Vor-Ort)
   ====================================================================== */
.band{
  background:linear-gradient(160deg,var(--green),var(--green-dark));
  color:#f2efe6; text-align:center;
}
.band .container{ padding:76px 24px; max-width:760px; }
.band h2{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.7rem); }
.band p{ color:#dfe0d2; font-size:1.05rem; }

/* ======================================================================
   Fußbereich mit Kontakt & Öffnungszeiten
   ====================================================================== */
.site-footer{ background:var(--green-dark); color:#d8ddd3; padding:70px 0 34px; }
.footer-grid{
  display:grid; gap:40px; grid-template-columns:1.3fr 1fr 1fr;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12);
}
.site-footer h4{ color:#fff; font-size:1.4rem; margin-bottom:.7em; }
.site-footer .brand-f b{
  font-family:'Cormorant Garamond',serif; color:#fff; font-size:1.6rem; font-weight:700;
  display:block; margin-bottom:.4em;
}
.site-footer p{ color:#c3cabd; font-size:.92rem; }
.hours{ list-style:none; padding:0; margin:0; }
.hours li{
  display:flex; justify-content:space-between; gap:18px;
  padding:7px 0; border-bottom:1px dashed rgba(255,255,255,.14);
  font-size:.9rem; color:#d8ddd3;
}
.hours li span:last-child{ color:#fff; font-weight:500; }
.contact-list{ list-style:none; padding:0; margin:0; }
.contact-list li{ margin-bottom:12px; font-size:.92rem; color:#d8ddd3; }
.contact-list a{ color:#fff; }
.contact-list a:hover{ color:var(--wood-light); }
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:22px; font-size:.78rem; color:#9fab9f;
}
.footer-bottom a{ color:#9fab9f; }
.footer-bottom a:hover{ color:#fff; }

/* ======================================================================
   Breadcrumb
   ====================================================================== */
.crumb{
  font-size:.8rem; color:var(--muted); padding:18px 0 0;
  letter-spacing:.03em;
}
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--green); }
.crumb span{ color:var(--green); }

/* ======================================================================
   Responsiv
   ====================================================================== */
@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:32px; }
  .split .visual{ order:-1; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:760px){
  .site-header .container{ min-height:64px; }
  .main-nav{ justify-content:center; width:100%; }
  .brand{ align-items:center; text-align:center; width:100%; }
  .site-header .container{ justify-content:center; }
  .section{ padding:60px 0; }
  .hero .container{ padding-top:64px; padding-bottom:66px; }
}

/* ======================================================================
   STARTSEITE (index.html) – zusätzliche Bausteine
   ====================================================================== */

/* Hero mit echtem Foto im Hintergrund */
.hero--home{
  background:
    linear-gradient(160deg, rgba(4,40,22,.82), rgba(1,42,20,.72) 55%, rgba(4,45,24,.88)),
    #06331b;
  background-size:cover; background-position:center;
}
.hero--home .container{ max-width:900px; padding-top:110px; padding-bottom:118px; }
.hero--home h1{ font-size:clamp(2.6rem,6vw,4.6rem); }
.hero--home .lead{ font-size:clamp(1.05rem,1.8vw,1.3rem); max-width:640px; }

/* Foto-Kacheln für Kategorien */
.cat-tile{
  position:relative; overflow:hidden; min-height:230px; display:flex; align-items:flex-end;
  border:1px solid var(--line); background:#0c4526; text-decoration:none;
  transition:transform .28s, box-shadow .28s;
}
.cat-tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.cat-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s; filter:saturate(1.02);
}
.cat-tile:hover img{ transform:scale(1.06); }
.cat-tile .overlay{
  position:relative; z-index:2; width:100%; padding:22px 22px 20px; color:#fff;
  background:linear-gradient(to top, rgba(2,28,14,.92), rgba(2,28,14,.35) 60%, transparent);
}
.cat-tile .overlay h3{ color:#fff; font-size:1.6rem; margin:0 0 3px; }
.cat-tile .overlay span{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--wood-light); font-weight:600; }
.cat-tile .count{
  position:absolute; top:14px; right:14px; z-index:3;
  background:rgba(250,247,240,.94); color:var(--green); font-size:.7rem; font-weight:600;
  padding:5px 11px; letter-spacing:.06em;
}

/* Produktkarten mit echtem Foto */
.prod-card .card-visual{ aspect-ratio:1/1; background:var(--green-mist); }
.prod-card .card-visual img.photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff;
}
.prod-card .card-body{ padding:18px 18px 20px; }
.prod-card .card-body h3{
  font-size:1.12rem; line-height:1.25; font-family:'Cormorant Garamond',serif; font-weight:600;
  min-height:2.6em;
}
.prod-card .price{ font-size:1.2rem; margin:2px 0 12px; }
.prod-card .btn{ padding:11px 20px; font-size:.74rem; width:100%; text-align:center; }
.grid.plants{ grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:22px; }

/* Filterleiste */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 auto 42px;
}
.filter-btn{
  font-family:'Montserrat',sans-serif; font-size:.8rem; font-weight:600; letter-spacing:.04em;
  padding:10px 20px; border:1px solid var(--line); background:#fff; color:var(--ink);
  cursor:pointer; transition:all .2s; border-radius:0;
}
.filter-btn:hover{ border-color:var(--wood); color:var(--green); }
.filter-btn.active{ background:var(--green); color:#fff; border-color:var(--green); }
.cat-block-title{
  text-align:center; margin:8px 0 26px; font-size:1.9rem;
}
.cat-block + .cat-block{ margin-top:56px; }

/* Split mit echtem Foto */
.home-split .visual.photo{ padding:0; overflow:hidden; }
.home-split .visual.photo img{ width:100%; height:100%; object-fit:cover; }

/* Band mit Foto */
.band--photo{
  background:
    linear-gradient(160deg, rgba(1,42,20,.86), rgba(1,42,20,.7)),
    #012a14;
  background-size:cover; background-position:center;
}