/* Gartenersatz.de — Main Stylesheet */
:root {
  --green:      #2d7a3a;
  --green-light:#e8f5ea;
  --orange:     #e8650a;
  --gray-100:   #f8f9fa;
  --gray-200:   #e9ecef;
  --gray-600:   #6c757d;
  --gray-900:   #212529;
  --shadow:     0 2px 8px rgba(0,0,0,.08);
  --radius:     8px;
  --max-width:  1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6;
  color: var(--gray-900); background: #fff;
}

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

/* Header */
.site-header {
  background: var(--green); color: #fff; padding: 0 1rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.logo { color: #fff; font-size: 1.4rem; font-weight: 700; }
.site-header nav a { color: rgba(255,255,255,.9); margin-left: 1.5rem; font-size: .9rem; }
.site-header nav a:hover { color: #fff; text-decoration: none; }

/* Breadcrumb */
.breadcrumb { background: var(--gray-100); padding: .6rem 1rem; font-size: .85rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; max-width: var(--max-width); margin: 0 auto; }
.breadcrumb li + li::before { content: "›"; color: var(--gray-600); }

/* Main layout */
main { max-width: var(--max-width); margin: 0 auto; padding: 1.5rem 1rem; }

/* Product header */
.product-header {
  display: grid; grid-template-columns: 300px 1fr;
  gap: 2rem; margin-bottom: 2rem;
  background: var(--gray-100); padding: 1.5rem; border-radius: var(--radius);
}
.product-image img { width: 100%; height: auto; border-radius: var(--radius); background: #fff; }
.product-summary h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.price-badge { margin: .8rem 0; }
.price-from { font-size: .9rem; color: var(--gray-600); }
.price-main { font-size: 2rem; font-weight: 700; color: var(--orange); margin-left: .3rem; }
.stats-bar { display: flex; flex-wrap: wrap; gap: 1rem; margin: .8rem 0; }
.stat { font-size: .9rem; background: #fff; padding: .3rem .7rem; border-radius: 20px; border: 1px solid var(--gray-200); }
.updated-note { font-size: .8rem; color: var(--gray-600); margin-top: .5rem; }

/* Offers table */
.offers-section { margin: 2rem 0; }
.offers-section h2 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--green); }
.offers-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.offers-table th { background: var(--green); color: #fff; padding: .7rem .8rem; text-align: left; }
.offers-table td { padding: .7rem .8rem; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
.offers-table tr:hover td { background: var(--green-light); }
.offers-table tr.offer-row0 td { background: #fffbf0; }
.badge-best { display: inline-block; background: var(--orange); color: #fff; font-size: .7rem; padding: .1rem .4rem; border-radius: 3px; margin-left: .4rem; }
.price-col { font-size: 1.1rem; font-weight: 700; color: var(--orange); }
.btn-buy {
  display: inline-block; background: var(--orange); color: #fff;
  padding: .5rem 1rem; border-radius: var(--radius);
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  transition: background .2s;
}
.btn-buy:hover { background: #c4540a; text-decoration: none; }

/* Price analysis */
.price-analysis { margin: 2rem 0; padding: 1.5rem; background: var(--gray-100); border-radius: var(--radius); }
.price-analysis h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.analysis-item { background: #fff; padding: 1rem; border-radius: var(--radius); text-align: center; box-shadow: var(--shadow); }
.analysis-item .label { display: block; font-size: .8rem; color: var(--gray-600); margin-bottom: .3rem; }
.analysis-item .value { font-size: 1.3rem; font-weight: 700; }
.analysis-item .value.green { color: var(--green); }

/* Intro */
.product-intro { margin: 2rem 0; line-height: 1.8; }

/* Usecase */
.usecase-section { margin: 2rem 0; padding: 1.5rem; border-left: 4px solid var(--green); background: var(--green-light); border-radius: 0 var(--radius) var(--radius) 0; }
.usecase-section h2 { margin-bottom: .8rem; }

/* FAQ */
.faq-section { margin: 2rem 0; }
.faq-section h2 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--green); }
.faq-item { border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: .8rem; overflow: hidden; }
.faq-item h3 { padding: 1rem 1.2rem; background: var(--gray-100); font-size: 1rem; cursor: pointer; }
.faq-answer { padding: 1rem 1.2rem; font-size: .95rem; }

/* Related */
.related-products { max-width: var(--max-width); margin: 2rem auto; padding: 0 1rem 2rem; }
.related-products h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }

/* Footer */
.site-footer { background: var(--gray-900); color: rgba(255,255,255,.7); text-align: center; padding: 1.5rem; font-size: .85rem; }
.site-footer nav a { color: rgba(255,255,255,.7); margin: 0 .5rem; }

/* Mobile */
@media (max-width: 768px) {
  .product-header { grid-template-columns: 1fr; }
  .offers-table { font-size: .8rem; }
  .offers-table th:nth-child(5), .offers-table td:nth-child(5),
  .offers-table th:nth-child(6), .offers-table td:nth-child(6) { display: none; }
  .stats-bar { gap: .5rem; }
}