/* ============================================================
   GartenSpot.de – Design System v2
   Nische: Hochbeete | Stand: 2026
   Fonts: Playfair Display (Headlines) + Source Serif 4 (Body)
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
/* @import entfernt – Fonts werden jetzt per <link> in HTML geladen (schneller, kein Render-Block) */

/* ── CSS-Variablen (Design-Tokens) ───────────────────────── */
:root {
  /* Farben */
  --green-deep:  #1b3a28;
  --green-mid:   #2d5a3d;
  --green-light: #4a8c5c;
  --green-pale:  #eaf3ec;
  --sand:        #f6f1e9;
  --gold:        #c59b3a;
  --gold-dark:   #a07d28;
  --white:       #ffffff;
  --text:        #1a2a1e;
  --text-light:  #4d5e52;
  --text-muted:  #5a6b61;
  --border:      #d5e8d9;
  --border-light:#e8f3ea;

  /* Typografie */
  --font-headline: 'Playfair Display', Georgia, serif;
  --font-body:     'Source Serif 4', Georgia, serif;

  /* Abstände */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --radius:    0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(27,58,40,0.08);
  --shadow-md: 0 4px 16px rgba(27,58,40,0.10);
  --shadow-lg: 0 8px 32px rgba(27,58,40,0.14);
  --shadow-xl: 0 16px 48px rgba(27,58,40,0.16);

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* Nav */
  --nav-height: 70px;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html {
  /* overflow-x: hidden darf NICHT auf html gesetzt werden —
     das macht html zum Scroll-Container und bricht position:sticky
     auf iOS/Safari (Navigation würde beim Scrollen verschwinden).
     Horizontaler Scroll wird durch body + einzelne Elemente abgefangen. */
}
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background-color: var(--sand);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-x: hidden;
  max-width: 100%;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

a:hover { color: var(--green-deep); }

ul, ol { list-style: none; }

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

/* ── Typografie ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.25;
  color: var(--green-deep);
}

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.55rem); }
h4 { font-size: 1.2rem; font-weight: 600; }
h5 { font-size: 1.05rem; font-weight: 600; }
h6 { font-size: 0.95rem; font-weight: 600; }

p { margin-bottom: var(--space-md); color: var(--text); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--green-deep); }

.lead {
  font-size: 1.15rem;
  color: var(--text-light);
  line-height: 1.75;
}

.text-muted { color: var(--text-muted); font-size: 0.875rem; }
.text-center { text-align: center; }
.text-small { font-size: 0.875rem; }

/* ── Layout / Container ───────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.container--narrow {
  max-width: var(--container-narrow);
}

section {
  padding-block: var(--space-4xl);
}

.section--pale  { background-color: var(--green-pale); }
.section--white { background-color: var(--white); }
.section--sand  { background-color: var(--sand); }
.section--deep  { background-color: var(--green-deep); color: var(--white); }
.section--green { background-color: var(--green-deep); color: var(--white); }

.section__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section__title {
  margin-bottom: var(--space-sm);
}

.section__subtitle {
  font-size: 1.05rem;
  color: var(--text-light);
  max-width: 600px;
  margin-inline: auto;
}

.section--deep .section__title,
.section--deep h2 { color: var(--white); }
.section--deep .section__subtitle { color: rgba(255,255,255,0.75); }

.section--green h2,
.section--green h3 { color: var(--white); }
.section--green p { color: rgba(255,255,255,0.88); }

/* Ensure p elements in dark hero sections show white text */
.section--deep p { color: rgba(255,255,255,0.85); }

/* ── Grids ────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}

/* ── Header & Navigation ─────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--green-deep);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo__icon {
  width: 38px;
  height: 38px;
  background: var(--gold);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.site-logo__text {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}

.site-logo__text span {
  color: var(--gold);
}

/* Haupt-Navigation Desktop */
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 0.875rem;
  color: rgba(255,255,255,0.88);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}

.nav-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition);
  flex-shrink: 0;
}

.nav-item:hover .nav-link svg {
  transform: rotate(180deg);
}

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition);
  z-index: 200;
  overflow: visible;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown__list {
  padding: var(--space-sm);
}

.dropdown__item { position: relative; }

.dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  color: var(--text);
  font-size: 0.9rem;
  border-radius: var(--radius);
  transition: all var(--transition);
}

.dropdown__link:hover {
  background: var(--green-pale);
  color: var(--green-deep);
}

.dropdown__link svg {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}

/* Sub-Dropdown (SIENA GARDEN) */
.sub-dropdown {
  position: absolute;
  top: 0;
  left: calc(100% + 6px);
  min-width: 260px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-light);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: all var(--transition);
  z-index: 300;
}

.dropdown__item:hover .sub-dropdown,
.dropdown__item:focus-within .sub-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.sub-dropdown .dropdown__list { padding: var(--space-sm); }

.sub-dropdown .dropdown__link {
  justify-content: flex-start;
  gap: var(--space-sm);
}

.sub-dropdown .dropdown__link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-light);
  flex-shrink: 0;
}

/* CTA im Header */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 1.1rem;
  background: var(--gold);
  color: var(--white) !important;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background var(--transition);
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--gold-dark);
  color: var(--white) !important;
}

/* Hamburger (Mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  transition: background var(--transition);
}

.hamburger:hover { background: rgba(255,255,255,0.18); }

.hamburger__line {
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition);
}

.hamburger.is-active .hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.is-active .hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.is-active .hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menü */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  /* Kein bottom:0 mehr — Menü ist so hoch wie sein Inhalt,
     maximal aber bis zum unteren Viewport-Rand */
  max-height: calc(100svh - var(--nav-height));
  background: var(--green-deep);
  z-index: 999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-lg);
  padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
  /* Abschluss-Schatten damit man sieht wenn Inhalt scrollbar ist */
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-xs); }

.mobile-nav__link {
  display: block;
  padding: 0.75rem 1rem;
  color: rgba(255,255,255,0.88);
  font-size: 1.05rem;
  font-weight: 500;
  border-radius: var(--radius);
  transition: all var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav__link:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.mobile-nav__link:active { background: rgba(255,255,255,0.15); }
.mobile-nav__link.is-active { background: var(--green-light); color: var(--white); }

.mobile-nav__group { margin-bottom: var(--space-xs); }

/* Gruppen-Titel als aufklappbarer Toggle */
.mobile-nav__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 1rem;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: none;
  border-radius: var(--radius);
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav__group-title:hover,
.mobile-nav__group-title:active {
  background: rgba(255,255,255,0.06);
}
.mobile-nav__group-title::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.mobile-nav__group.is-open > .mobile-nav__group-title::after {
  transform: rotate(-135deg);
}

/* Submenü standardmäßig eingeklappt */
.mobile-nav__sub {
  padding-left: var(--space-md);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.mobile-nav__group.is-open > .mobile-nav__sub {
  /* Groß genug für alle Untermenüs (Hochbeete hat ~13 Einträge) */
  max-height: 1400px;
}

.mobile-nav__cta {
  display: block;
  text-align: center;
  margin-top: var(--space-lg);
  padding: 0.875rem;
  background: var(--gold);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.05rem;
  -webkit-tap-highlight-color: transparent;
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumbs {
  padding-block: var(--space-md);
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.breadcrumbs__item:not(:last-child)::after {
  content: '›';
  color: var(--border);
}

.breadcrumbs__link {
  color: var(--text-muted);
  transition: color var(--transition);
}

.breadcrumbs__link:hover { color: var(--green-light); }

.breadcrumbs__current {
  color: var(--text-light);
  font-weight: 500;
}

/* ── Affiliate Disclosure ─────────────────────────────────── */
.disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  font-size: 0.875rem;
  color: var(--text-light);
  line-height: 1.5;
}

.disclosure__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Hero Section ─────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 60%, var(--green-light) 100%);
  color: var(--white);
  padding-block: var(--space-4xl);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero__content { position: relative; z-index: 1; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(197,155,58,0.2);
  border: 1px solid rgba(197,155,58,0.4);
  color: var(--gold);
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-lg);
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--white);
  margin-bottom: var(--space-lg);
  max-width: 700px;
}

.hero__title em {
  font-style: normal;
  color: var(--gold);
}

.hero__subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: var(--space-xl);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.15);
}
@media (max-width: 600px) {
  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

.hero__stat { text-align: center; }

.hero__stat-value {
  font-family: var(--font-headline);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
}

.hero__stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  transition: all var(--transition);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
}

.btn--primary {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}

.btn--primary:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(197,155,58,0.35);
}

/* Buy-Now / Gold CTA Button */
.btn--gold {
  background: var(--gold);
  color: #1a1a1a;
  border-color: var(--gold);
}
.btn--gold:hover,
.btn--gold:focus {
  background: var(--gold-dark, #c8960c);
  border-color: var(--gold-dark, #c8960c);
  color: #1a1a1a;
}

.btn--secondary {
  background: var(--green-light);
  color: var(--white);
  border-color: var(--green-light);
}

.btn--secondary:hover {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: var(--white);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--green-light);
  border-color: var(--green-light);
}

.btn--outline:hover {
  background: var(--green-light);
  color: var(--white);
}

.btn--outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}

.btn--outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--white);
  color: var(--white);
}

.btn--lg {
  padding: 0.9rem 2rem;
  font-size: 1.05rem;
}

.btn--sm {
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
}

.btn--full { width: 100%; }

/* ── Produkt-Card ─────────────────────────────────────────── */
.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: all var(--transition-slow);
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--green-light);
}

.product-card--featured {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(197,155,58,0.2), var(--shadow-md);
}

.product-card__img-wrap {
  position: relative;
  background: #fff;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card__img {
  transform: scale(1.04);
}

.product-card__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 1;
}

.product-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__partner {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.product-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--font-headline);
  color: var(--green-deep);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.product-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.product-card__specs {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.product-card__teaser {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: var(--space-lg);
  flex: 1;
}

.product-card__price {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: var(--space-md);
}

.product-card__price-note {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  display: block;
}

.product-card__actions { display: flex; flex-direction: column; gap: var(--space-sm); }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.badge--gold    { background: rgba(197,155,58,0.15); color: var(--gold-dark); border: 1px solid rgba(197,155,58,0.3); }
.badge--green   { background: var(--green-pale); color: var(--green-mid); border: 1px solid var(--border); }
.badge--red     { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.badge--blue    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge--testsieger { background: rgba(197,155,58,0.12); color: var(--gold-dark); border: 1px solid var(--gold); }
.badge--new     { background: var(--green-pale); color: var(--green-light); border: 1px solid var(--border); }
.badge--sand    { background: #f5ead0; color: #7a5c1e; }
.badge--outline { background: transparent; border: 1.5px solid var(--green-mid); color: var(--green-mid); }

/* ── Sternebewertung ─────────────────────────────────────── */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.stars__icon {
  color: var(--gold);
  font-size: 1em;
}

.stars__icon--empty { color: var(--border); }

.rating-display {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.rating-display__value {
  font-weight: 700;
  color: var(--green-deep);
  font-size: 0.95rem;
}

.rating-display__count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Rating-Bars */
.rating-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.rating-bar__label {
  font-size: 0.875rem;
  color: var(--text-light);
  min-width: 140px;
  flex-shrink: 0;
}

.rating-bar__track {
  flex: 1;
  height: 8px;
  background: var(--border-light);
  border-radius: 100px;
  overflow: hidden;
}

.rating-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-light), var(--gold));
  border-radius: 100px;
  transition: width 0.6s ease;
}

.rating-bar__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--green-deep);
  min-width: 30px;
  text-align: right;
}

/* ── Vergleichstabelle ────────────────────────────────────── */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-size: 0.9rem;
}

.comparison-table th {
  background: var(--green-deep);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  white-space: nowrap;
}

.comparison-table th:first-child { border-radius: 0; }

.comparison-table td {
  padding: 0.875rem var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  color: var(--text);
}

.comparison-table tr:last-child td { border-bottom: none; }

.comparison-table tr:nth-child(even) td { background: var(--green-pale); }

.comparison-table tr.is-winner td {
  background: rgba(197,155,58,0.06);
  font-weight: 500;
}

.comparison-table tr.is-winner td:first-child {
  border-left: 3px solid var(--gold);
}

.comparison-table__name {
  font-weight: 600;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.comparison-table__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}

/* ── Pro/Contra Box ───────────────────────────────────────── */
.pro-contra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-block: var(--space-xl);
}

.pro-contra__box {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
}

.pro-contra__box--pro {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.pro-contra__box--contra {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.pro-contra__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pro-contra__box--pro .pro-contra__title { color: #15803d; }
.pro-contra__box--contra .pro-contra__title { color: #c2410c; }

.pro-contra__list li {
  padding: 0.35rem 0;
  padding-left: 1.4rem;
  position: relative;
  font-size: 0.9rem;
  color: var(--text);
}

.pro-contra__box--pro .pro-contra__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: 700;
}

.pro-contra__box--contra .pro-contra__list li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: #ea580c;
  font-weight: 700;
}

/* ── FAQ Accordion ────────────────────────────────────────── */
.faq { max-width: 820px; margin-inline: auto; }

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow var(--transition);
}

.faq__item:hover { box-shadow: var(--shadow-md); }
.faq__item.is-open { border-color: var(--green-light); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.975rem;
  color: var(--green-deep);
  user-select: none;
  list-style: none;
  transition: color var(--transition);
}

.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { display: none; }

.faq__item.is-open .faq__question { color: var(--green-light); }

.faq__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--green-light);
  transition: all var(--transition);
  line-height: 1;
}

.faq__item.is-open .faq__icon {
  background: var(--green-light);
  color: var(--white);
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: 0.925rem;
  color: var(--text-light);
  line-height: 1.7;
  display: none;
}

.faq__item.is-open .faq__answer { display: block; }

/* CSS-only Fallback (details/summary) */
details.faq__item summary { list-style: none; }
details.faq__item[open] summary .faq__icon {
  background: var(--green-light);
  color: var(--white);
  transform: rotate(45deg);
}

/* ── Autoren-Box (E-E-A-T) ────────────────────────────────── */
.author-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-block: var(--space-2xl);
}

.author-box__avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border: 3px solid var(--green-pale);
}

.author-box__info { flex: 1; }

.author-box__name {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: 2px;
}

.author-box__role {
  font-size: 0.825rem;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.author-box__bio {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.author-box__meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.author-box__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Tab-Navigation ───────────────────────────────────────── */
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  border-bottom: 2px solid var(--border-light);
  margin-bottom: var(--space-2xl);
}

.tab-nav__btn {
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--transition);
}

.tab-nav__btn:hover { color: var(--green-mid); }

.tab-nav__btn.is-active {
  color: var(--green-light);
  border-bottom-color: var(--green-light);
  background: var(--green-pale);
}

.tab-nav__link {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
}

.tab-nav__link:hover { color: var(--green-mid); }
.tab-nav__link.is-active { color: var(--green-light); border-bottom-color: var(--green-light); }

/* ── Anker-Kategorie ─────────────────────────────────────── */
.category-anchor {
  scroll-margin-top: calc(var(--nav-height) + 20px);
  padding-top: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.category-anchor__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--border-light);
  margin-bottom: var(--space-xl);
}

.category-anchor__icon { font-size: 1.75rem; }

.category-anchor__title {
  font-size: 1.5rem;
  font-family: var(--font-headline);
  color: var(--green-deep);
}

.category-anchor__subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Themen-Teaser-Block (Startseite) ────────────────────── */
.topic-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-3xl);
  align-items: center;
}

.topic-block--reverse { direction: rtl; }
.topic-block--reverse > * { direction: ltr; }

.topic-block__img-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--green-pale);
}

.topic-block__img { width: 100%; height: 100%; object-fit: cover; }

.topic-block__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: var(--space-sm);
}

.topic-block__title {
  font-size: 1.6rem;
  margin-bottom: var(--space-md);
}

.topic-block__text {
  color: var(--text-light);
  margin-bottom: var(--space-xl);
  line-height: 1.75;
}

.topic-block__points { margin-bottom: var(--space-xl); }

.topic-block__point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: 0.925rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
}

.topic-block__point:last-child { border-bottom: none; }

.topic-block__point::before {
  content: '✓';
  color: var(--green-light);
  font-weight: 700;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Ratgeber-Kacheln ─────────────────────────────────────── */
.guide-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all var(--transition-slow);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-decoration: none;
}

.guide-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--green-light);
  transform: translateY(-3px);
}

.guide-card__icon {
  width: 50px;
  height: 50px;
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.guide-card__title {
  font-size: 1.1rem;
  font-family: var(--font-headline);
  color: var(--green-deep);
  font-weight: 700;
  line-height: 1.3;
}

.guide-card:hover .guide-card__title { color: var(--green-light); }

.guide-card__excerpt {
  font-size: 0.875rem;
  color: var(--text-light);
  line-height: 1.6;
  flex: 1;
}

.guide-card__cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--green-light);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Testimonial-Card ─────────────────────────────────────── */
.testimonial {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  position: relative;
}

.testimonial::before {
  content: '"';
  position: absolute;
  top: var(--space-md);
  left: var(--space-xl);
  font-family: var(--font-headline);
  font-size: 4rem;
  color: var(--green-pale);
  line-height: 1;
}

.testimonial__text {
  font-style: italic;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  padding-top: var(--space-xl);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.testimonial__name { font-weight: 700; font-size: 0.9rem; color: var(--green-deep); }
.testimonial__meta { font-size: 0.8rem; color: var(--text-muted); }
.testimonial__stars { display: flex; gap: 2px; margin-top: 3px; }

/* ── Info-Box / Tip-Box ───────────────────────────────────── */
.info-box {
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius);
  display: block;
  margin-block: var(--space-xl);
  font-size: 0.92rem;
  line-height: 1.75;
  background: var(--green-pale);
  border-left: 4px solid var(--green-light);
}

.info-box--tip  { background: var(--green-pale); border-left: 4px solid var(--green-light); }
.info-box--warn { background: #fffbeb; border-left: 4px solid #f59e0b; }
.info-box--info { background: #eff6ff; border-left: 4px solid #3b82f6; }

.info-box__icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }

/* ── Schicht-Visualisierung (Befüllung) ──────────────────── */
.layers-visual {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.layer {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.9rem;
  font-weight: 500;
}

.layer--1  { background: #4a2d0a; color: #fff; }
.layer--2  { background: #7a5c2e; color: #fff; }
.layer--3  { background: #5d8a3c; color: #fff; }
.layer--4  { background: #8eb85a; color: #1a2a1e; }
.layer__num { font-weight: 700; opacity: 0.7; min-width: 24px; }

/* ── Spec-Grid (Produktdetails) ───────────────────────────── */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.spec-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.spec-item__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.spec-item__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-deep);
}

/* ── CTA Block ────────────────────────────────────────────── */
.cta-block {
  background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
  border-radius: var(--radius-xl);
  padding: var(--space-3xl);
  text-align: center;
  color: var(--white);
  margin-block: var(--space-2xl);
}

.cta-block__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--white);
  margin-bottom: var(--space-md);
}

.cta-block__text {
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-xl);
  max-width: 500px;
  margin-inline: auto;
}

.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* ── Sticky Sidebar CTA (Produktseiten) ───────────────────── */
.product-sticky {
  position: sticky;
  top: calc(var(--nav-height) + 20px);
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
}

.product-sticky__title {
  font-size: 1.1rem;
  font-family: var(--font-headline);
  color: var(--green-deep);
  margin-bottom: var(--space-sm);
}

.product-sticky__price {
  font-size: 2rem;
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: var(--space-md);
}

/* ── 2-Col-Layout (Artikel + Sidebar) ────────────────────── */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-3xl);
  align-items: start;
}

.article-content h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.article-content h3 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.article-content p  { margin-bottom: var(--space-md); }

.article-content ul,
.article-content ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-xl);
}

.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }

.article-content li { margin-bottom: var(--space-sm); }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--green-deep);
  color: rgba(255,255,255,0.75);
  padding-block: var(--space-3xl) var(--space-xl);
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: var(--space-xl);
}

.footer-brand__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  text-decoration: none;
}

.footer-brand__logo-icon {
  width: 34px;
  height: 34px;
  background: var(--gold);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.footer-brand__logo-text {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
}

.footer-brand__logo-text span { color: var(--gold); }

.footer-brand__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-lg);
}

.footer-brand__disclaimer {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.55;
}

.footer-col__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-md);
}

.footer-col__list { display: flex; flex-direction: column; gap: var(--space-xs); }

.footer-col__link {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  transition: color var(--transition);
}

.footer-col__link:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}

.footer-bottom__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.footer-bottom__link {
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  transition: color var(--transition);
}

.footer-bottom__link:hover { color: rgba(255,255,255,0.85); }

/* ── Utility-Klassen ─────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl{ margin-top: var(--space-2xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl{ margin-bottom: var(--space-2xl); }

.divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin-block: var(--space-2xl);
}

/* ── Responsive Breakpoints ──────────────────────────────── */

/* Tablet landscape & below (< 1024px) */
@media (max-width: 1024px) {
  .article-layout { grid-template-columns: 1fr; }
  .product-sticky { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .topic-block { grid-template-columns: 1fr; }
  .topic-block--reverse { direction: ltr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet portrait (< 900px) */
@media (max-width: 900px) {
  :root { --nav-height: 60px; }
  section { padding-block: var(--space-2xl); }

  .hamburger { display: flex; }
  .mobile-menu { display: block; }
  .main-nav,
  .nav-cta { display: none; }

  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .pro-contra { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }

  .comparison-table { font-size: 0.8rem; }
  .comparison-table th,
  .comparison-table td { padding: 0.625rem 0.875rem; }

  .hero__stats { gap: var(--space-xl); }

  .tab-nav { gap: var(--space-sm); }
  .tab-nav__btn,
  .tab-nav__link { font-size: 0.82rem; padding: 0.5rem 0.875rem; }

  .author-box { flex-direction: column; }
}

/* Mobile (< 480px) */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-md); }

  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }

  .btn { font-size: 0.875rem; padding: 0.675rem 1.25rem; }
  .btn--lg { font-size: 0.95rem; padding: 0.8rem 1.5rem; }

  .hero { padding-block: var(--space-2xl); }
  .hero__actions { flex-direction: column; align-items: stretch; }

  .product-card__body { padding: var(--space-md); }

  .spec-grid { grid-template-columns: 1fr 1fr; }

  .disclosure { flex-direction: column; gap: var(--space-sm); }

  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── Fehler-Liste (Ratgeber "Häufige Fehler") ────────────── */
.fehler-list {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fehler-item {
  display: flex;
  gap: var(--space-md);
  background: #fff5f0;
  border-left: 3px solid #c05820;
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  align-items: flex-start;
}
.fehler-item__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.fehler-item__text strong {
  display: block;
  color: #7a3210;
  font-size: 0.95rem;
  margin-bottom: 3px;
}
.fehler-item__text span {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.6;
}

/* ── Visual Checklist ─────────────────────────────────────── */
.checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.checklist li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.65;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border-light);
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before {
  content: "✓";
  color: var(--green-light);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  min-width: 22px;
  margin-top: 1px;
}

/* ── Inline Product Recommendation ───────────────────────── */
.inline-rec {
  display: flex;
  gap: 1.25rem;
  background: #fff;
  border: 1.5px solid var(--green-light);
  border-radius: .5rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  align-items: center;
}
.inline-rec__icon {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--green-pale);
  border-radius: .4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}
.inline-rec__body h4 { margin: 0 0 .25rem; color: var(--green-deep); font-size: 1rem; }
.inline-rec__body p { margin: 0 0 .5rem; font-size: .88rem; color: #555; }
.inline-rec__body .btn { font-size: .83rem; padding: .45rem 1rem; }

/* Print */
@media print {
  .site-header, .site-footer, .hamburger, .mobile-menu, .nav-cta { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* ============================================================
   === PAGE COMPONENTS ========================================
   Zentrale Komponenten für alle Seiten – kein Inline-CSS nötig
   ============================================================ */

/* ── Unified Page Hero ──────────────────────────────────── */
.page-hero, .ratg-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2a5a3a 100%);
  color: #fff;
  padding: var(--space-3xl) var(--space-md) var(--space-2xl);
  text-align: center;
}
.page-hero h1, .ratg-hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: var(--space-sm);
  color: #fff;
}
/* Alle dunklen Hero-Bereiche: p-Elemente explizit weiß setzen
   (überschreibt globale p { color: var(--text) } Regel) */
.page-hero p, .ratg-hero p,
.balkon-hero p, .empl-hero p, .about-hero p,
.zub-hero p, .zub-page-hero p,
.hero p {
  color: rgba(255,255,255,.9);
}
/* Gleiches für alle span, small, li in dunklen Heros */
.page-hero span, .ratg-hero span,
.balkon-hero span, .empl-hero span, .about-hero span,
.zub-hero span, .zub-page-hero span {
  color: inherit;
}
.page-hero .hero-meta, .ratg-hero .hero-meta {
  opacity: .85;
  font-size: .9rem;
  margin-bottom: var(--space-md);
}
/* Modifier: helles Hero */
.page-hero--light {
  background: var(--green-pale);
  color: var(--text);
}
.page-hero--light h1 { color: var(--green-deep); }

/* ── Banner-Hero (SEO-Bilder hinter Gradient) ────────── */
.has-banner {
  position: relative;
  overflow: hidden;
}
.hero-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,60,30,.82) 0%, rgba(42,90,58,.75) 100%);
}
.has-banner > *:not(.hero-banner-bg) {
  position: relative;
  z-index: 1;
}

/* ── Universal Banner Rules: ALL hero types get white text ──
   Gilt für jede neue Seite automatisch, egal welche Hero-Klasse */
.has-banner h1 { color: #fff; }
.has-banner h2 { color: #fff; }
/* Einheitliches Padding & Mindesthöhe für alle Banner-Heros */
.page-hero.has-banner,
.ratg-hero.has-banner,
.zub-hero.has-banner,
.zub-page-hero.has-banner,
.page-hero.has-banner,
.balkon-hero.has-banner,
.corten-hero.has-banner,
.wpc-hero.has-banner,
.empl-hero.has-banner {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* .zub-page-hero hat sonst hellen Hintergrund → wenn Banner, dunkel */
.zub-page-hero.has-banner {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2a5a3a 100%);
  border-bottom: none;
  color: #fff;
  padding: var(--space-3xl) 0 var(--space-2xl);
}
.zub-page-hero.has-banner h1 {
  color: #fff;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: var(--space-sm);
}
.zub-page-hero.has-banner p {
  color: rgba(255,255,255,.9);
  max-width: 680px;
}
/* Inline-style Überschreibung: page-hero mit Banner bekommt richtiges Padding.
   KEIN text-align: left — page-hero ist zentriert by default (richtig so) */
.page-hero.has-banner {
  padding: var(--space-3xl) var(--space-md) var(--space-2xl) !important;
}

/* ── Hero BEM Sub-Elements (Original 5 Ratgeber) ─────── */
.ratg-hero__meta {
  font-size: .85rem;
  color: rgba(255,255,255,.9);
  margin-bottom: var(--space-md);
}
.ratg-hero__sub {
  color: rgba(255,255,255,.9);
  max-width: 620px;
  margin: 0 auto;
}
.ratg-hero__badges {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-lg);
}
.ratg-badge {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .8rem;
}

/* ── Hero Badges (New 3 Ratgeber) ─────────────────────── */
.hero-badges {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}
.hero-badge {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  padding: .25rem .75rem;
  font-size: .8rem;
  color: #fff;
}

/* ── Ratgeber 2-Column Layout ─────────────────────────── */
.ratg-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-3xl);
  padding: var(--space-3xl) 0;
  align-items: start;
}
@media (max-width: 900px) {
  .ratg-layout { grid-template-columns: 1fr; }
  .ratg-layout .ratg-sidebar { display: none; }
}

/* ── Ratgeber Article Typography ──────────────────────── */
.ratg-article {
  max-width: 680px;
}
.ratg-article h2 {
  color: var(--green-deep);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--border-light);
  padding-bottom: var(--space-sm);
}
.ratg-article h3 {
  color: var(--green-mid);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}
.ratg-article p, .ratg-article li {
  color: var(--text-light);
  line-height: 1.75;
}

/* ── CTA Box ──────────────────────────────────────────── */
.cta-box {
  background: linear-gradient(135deg, var(--green-deep), #2a5a3a);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  margin: var(--space-xl) 0;
}
.cta-box h3 { margin: 0 0 .5rem; color: #fff; }
.cta-box p  { margin: 0 0 var(--space-md); opacity: .9; color: rgba(255,255,255,.9); }
.cta-box .btn {
  display: inline-block;
  background: #fff;
  color: var(--green-deep);
  font-weight: 700;
  padding: .75rem 1.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: opacity .2s;
}
.cta-box .btn:hover { opacity: .9; }

/* ── Data Table ───────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  font-size: .9rem;
}
.data-table th {
  background: var(--green-deep);
  color: #fff;
  padding: .6rem .8rem;
  text-align: left;
}
.data-table td {
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}
.data-table tr:nth-child(even) td { background: #f9fafb; }
.data-table .good { color: var(--green-mid); font-weight: 600; }
.data-table .bad  { color: #c04a2a; }

/* ── Tip Box ──────────────────────────────────────────── */
.tip-box {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}
.tip-box strong { color: #e65100; }

/* ── Warn Box ─────────────────────────────────────────── */
.warn-box {
  background: #fce4ec;
  border: 1px solid #f48fb1;
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}
.warn-box strong { color: #b71c1c; }

/* ── Answer Block ─────────────────────────────────────── */
.answer-block {
  background: var(--green-pale);
  border-left: 4px solid var(--green-deep);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.answer-block p { margin: 0; color: var(--text-light); line-height: 1.75; }

/* ── Legal Hero ───────────────────────────────────────── */
.legal-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2a5a3a 100%);
  color: #fff;
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
}
.legal-hero h1 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.legal-hero p { color: rgba(255,255,255,.85); }
.legal-content {
  max-width: var(--container-narrow, 720px);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-md);
}

/* ── Product Hero Modifier ────────────────────────────── */
.page-hero--product {
  text-align: left;
}

/* ── Ratgeber Sidebar ─────────────────────────────────── */
.ratg-sidebar {
  position: sticky;
  top: calc(var(--nav-height, 70px) + 20px);
}
@media (max-width: 900px) {
  .ratg-sidebar { position: static; display: none; }
}
.sidebar-box, .ratg-sidebar-box {
  background: var(--white, #fff);
  border-radius: var(--radius-xl, .75rem);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-lg);
  border: 1px solid var(--border-light);
}
.sidebar-box h3, .sidebar-box h4, .ratg-sidebar-box h4 {
  font-family: var(--font-headline);
  font-size: .95rem;
  color: var(--green-deep);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}
.sidebar-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-box ul li {
  padding: .3rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: .9rem;
}
.sidebar-box ul li:last-child { border: none; }
.ratg-toc {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ratg-toc li { margin-bottom: var(--space-xs); }
.ratg-toc a {
  color: var(--green-mid);
  text-decoration: none;
  font-size: .84rem;
  display: flex;
  gap: 6px;
}
.ratg-toc a:hover { color: var(--green-deep); }

/* ── Produkt-Seiten Komponenten (Siena Garden) ────────── */
.prod-hero {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: var(--space-3xl);
  align-items: start;
  padding: var(--space-3xl) 0;
}
.prod-img-wrap {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}
.prod-img-wrap img { max-width: 100%; max-height: 360px; object-fit: contain; }
.prod-badge-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-md); }
.prod-title {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--green-deep);
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}
.prod-stars { color: var(--gold); font-size: 1.1rem; margin-bottom: var(--space-xs); }
.prod-stars span { color: var(--text-muted); font-size: .82rem; margin-left: 6px; }
.prod-price-wrap { display: flex; align-items: baseline; gap: var(--space-md); margin: var(--space-lg) 0; }
.prod-price { font-family: var(--font-headline); font-size: 2.4rem; font-weight: 700; color: var(--green-deep); }
.prod-price-note { font-size: .78rem; color: var(--text-muted); }
.specs-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.specs-mini .spec-item { font-size: .85rem; color: var(--text-light); }
.specs-mini .spec-item strong { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 2px; }
.prod-ctas { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ── Artikel-Body Typografie (Produkt-Seiten) ────────── */
.article-body h2 {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  color: var(--green-deep);
  margin: var(--space-2xl) 0 var(--space-md);
  padding-top: var(--space-md);
  border-top: 2px solid var(--green-pale);
}
.article-body h2:first-child { margin-top: 0; border-top: none; }
.article-body h3 {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  color: var(--green-deep);
  margin: var(--space-xl) 0 var(--space-sm);
}
.article-body p { font-size: .96rem; color: var(--text); line-height: 1.8; margin-bottom: var(--space-md); }
.article-body ul { margin: 0 0 var(--space-md) var(--space-xl); }
.article-body li { font-size: .93rem; color: var(--text-light); line-height: 1.75; margin-bottom: 4px; }

/* ── Rating Box ───────────────────────────────────────── */
.rating-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  margin: var(--space-xl) 0;
  border: 1px solid var(--border-light);
}
.rating-header { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--border-light); }
.rating-score { font-family: var(--font-headline); font-size: 3.5rem; color: var(--green-deep); line-height: 1; font-weight: 700; }
.rating-right .r-stars { color: var(--gold); font-size: 1.4rem; }
.rating-right p { font-size: .82rem; color: var(--text-muted); margin-top: 2px; }
.rating-bars { display: flex; flex-direction: column; gap: var(--space-sm); }
.rbar-row { display: flex; align-items: center; gap: 12px; }
.rbar-label { font-size: .82rem; color: var(--text-muted); min-width: 130px; }
.rbar-track { flex: 1; background: #e8f0ea; border-radius: 4px; height: 8px; overflow: hidden; }
.rbar-fill { height: 100%; background: var(--green-mid); border-radius: 4px; }
.rbar-val { font-size: .80rem; font-weight: 700; color: var(--green-deep); min-width: 24px; text-align: right; }

/* ── Pros/Cons Grid ───────────────────────────────────── */
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-lg) 0; }
.pc-box { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); }
.pc-box h3, .pc-box h4 { font-family: var(--font-headline); font-size: 1rem; margin-bottom: var(--space-md); }
.pc-pros h3, .pc-pros h4 { color: #2d7a3d; }
.pc-cons h3, .pc-cons h4 { color: #c0392b; }
.pc-box ul { list-style: none; padding: 0; margin: 0; }
.pc-box ul li { font-size: .86rem; color: var(--text-light); padding: 6px 0; border-bottom: 1px solid var(--border-light); display: flex; gap: 8px; align-items: flex-start; }
.pc-box ul li:last-child { border-bottom: none; }

/* ── Product Sidebar ──────────────────────────────────── */
.sidebar { position: sticky; top: calc(var(--nav-height, 70px) + 20px); }
.sidebar-toc { list-style: none; padding: 0; margin: 0; }
.sidebar-toc li { margin-bottom: var(--space-xs); }
.sidebar-toc a { color: var(--green-mid); text-decoration: none; font-size: .86rem; display: flex; gap: 6px; }
.sidebar-toc a:hover { color: var(--green-deep); }

/* ── Product Mini Cards ───────────────────────────────── */
.product-mini { display: flex; gap: var(--space-md); align-items: center; text-decoration: none; color: var(--text); padding: var(--space-md); border: 1px solid var(--border-light); border-radius: var(--radius-lg); margin-bottom: var(--space-sm); transition: background var(--transition); }
.product-mini:hover { background: var(--green-pale); }
.pm-img { width: 56px; height: 56px; background: #fff; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.pm-img img { max-width: 52px; max-height: 52px; object-fit: contain; padding: 3px; }
.pm-name { font-size: .84rem; font-weight: 600; color: var(--green-deep); margin-bottom: 2px; }
.pm-price { font-size: .80rem; color: var(--green-mid); font-weight: 700; }

/* ── Produkt Responsive ───────────────────────────────── */
@media (max-width: 900px) {
  .prod-hero { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .pc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .prod-price { font-size: 2rem; }
  .specs-mini { grid-template-columns: 1fr; }
}

/* ── Ratgeber Body (Neue Seiten ohne 2-Spalten Layout) ── */
.ratgeber-body {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

/* ══════════════════════════════════════════════════════════
   SEO-OPTIMIERUNG: Quick-Answer + Breadcrumb + Extras
   ══════════════════════════════════════════════════════════ */

/* ── Quick-Answer Block (Featured Snippets / AI Overviews) ── */
.quick-answer {
  background: #eef6f1;
  border-left: 5px solid var(--green-mid);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem 1.25rem 4rem;
  margin: 2rem auto 1.5rem;
  max-width: 780px;
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(27,58,40,0.08);
  position: relative;
}
.quick-answer::before {
  content: '✓';
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  width: 2rem;
  height: 2rem;
  background: var(--green-mid);
  color: #fff;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
  font-weight: 700;
}
.quick-answer strong { color: var(--green-deep); font-weight: 700; }
.quick-answer p { margin: 0; color: var(--text); }
.quick-answer p + p { margin-top: 0.5rem; }
@media (max-width: 600px) {
  .quick-answer { padding: 1rem 1rem 1rem 3.25rem; }
  .quick-answer::before { left: 0.9rem; top: 0.95rem; width: 1.7rem; height: 1.7rem; line-height: 1.7rem; font-size: 0.85rem; }
}

/* .breadcrumb (singular) removed — all HTML uses .breadcrumbs (plural, line 508+) */

/* ── Material-Vergleichs-Grid (neue Seiten) ────────────── */
.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

/* ── Vorteile/Nachteile Inline ─────────────────────────── */
.pro-con-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}
.pro-con-inline .pro-list,
.pro-con-inline .con-list {
  padding: var(--space-md);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.pro-con-inline .pro-list {
  background: #edf8ef;
  border-left: 3px solid #2a7a3a;
}
.pro-con-inline .con-list {
  background: #fdf0ec;
  border-left: 3px solid #c04a2a;
}
.pro-con-inline h4 { margin: 0 0 var(--space-xs); font-size: 0.85rem; font-family: var(--font-body); }
.pro-con-inline ul { padding-left: var(--space-lg); margin: 0; }
.pro-con-inline li { line-height: 1.7; color: var(--text-light); margin-bottom: 2px; }

@media (max-width: 600px) {
  .pro-con-inline { grid-template-columns: 1fr; }
  .material-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   DESIGN-FIX 2026-03: Tabellen, Mobile & Konsistenz
   ══════════════════════════════════════════════════════════ */

/* ── Fix K2: inline-rec mobile stacking ─────────────────── */
@media (max-width: 640px) {
  .inline-rec {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .inline-rec__icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
    line-height: 2.75rem;
  }
}

/* ── Unified Table Styles (alle Tabellen-Klassen) ────────── */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-xl) 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}

/* Global: Tabellen in Artikel-Bereichen scrollen auf Mobile.
   .comparison-table ausgenommen — hat eigenen .comparison-table__wrap-Scroll-Container.
   display:block auf .comparison-table würde dreifach-nested overflow erzeugen. */
@media (max-width: 768px) {
  main table:not(.comparison-table),
  article table:not(.comparison-table),
  .ratg-article table:not(.comparison-table),
  .article-layout table:not(.comparison-table),
  .container table:not(.comparison-table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Comparison-Table: scroll via .table-wrapper, min-width verhindert Spalten-Kollaps */
@media (max-width: 768px) {
  .comparison-table {
    min-width: 650px; /* 7 Spalten brauchen mind. 650px für lesbare Darstellung */
    width: 100%;
  }
  /* Zellen: etwas kompakter auf Mobile */
  .comparison-table th,
  .comparison-table td {
    padding: 0.5rem 0.65rem;
    white-space: nowrap;
  }
  /* Modell-Spalte darf umbrechen */
  .comparison-table__name {
    white-space: normal;
    min-width: 130px;
  }
  /* "Kaufen"-Button schmaler */
  .comparison-table .btn--sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* Alle Tabellen-Klassen vereinheitlicht */
.vergleich-table,
.data-table,
.wpc-compare-table,
.corten-compare-table,
.sg-compare-table,
.empl-table,
.erde-table,
.holz-table,
.kalender-table,
.kosten-table,
.menge-table,
.gewicht-table,
.companion-table,
.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--white);
}

.vergleich-table th,
.data-table th,
.wpc-compare-table th,
.corten-compare-table th,
.sg-compare-table th,
.empl-table th,
.erde-table th,
.holz-table th,
.kalender-table th,
.kosten-table th,
.menge-table th,
.gewicht-table th,
.companion-table th,
.comp-table th {
  background: var(--green-deep);
  color: white;
  padding: 11px 14px;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vergleich-table td,
.data-table td,
.wpc-compare-table td,
.corten-compare-table td,
.sg-compare-table td,
.empl-table td,
.erde-table td,
.holz-table td,
.kalender-table td,
.kosten-table td,
.menge-table td,
.gewicht-table td,
.companion-table td,
.comp-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-light);
  vertical-align: top;
  line-height: 1.55;
}

.vergleich-table tbody tr:nth-child(even) td,
.data-table tbody tr:nth-child(even) td,
.wpc-compare-table tbody tr:nth-child(even) td,
.corten-compare-table tbody tr:nth-child(even) td,
.sg-compare-table tbody tr:nth-child(even) td,
.empl-table tbody tr:nth-child(even) td,
.erde-table tbody tr:nth-child(even) td,
.holz-table tbody tr:nth-child(even) td,
.kalender-table tbody tr:nth-child(even) td,
.kosten-table tbody tr:nth-child(even) td,
.menge-table tbody tr:nth-child(even) td,
.gewicht-table tbody tr:nth-child(even) td,
.companion-table tbody tr:nth-child(even) td,
.comp-table tbody tr:nth-child(even) td {
  background: var(--sand);
}

.vergleich-table tbody tr:hover td,
.data-table tbody tr:hover td,
.wpc-compare-table tbody tr:hover td,
.corten-compare-table tbody tr:hover td,
.sg-compare-table tbody tr:hover td,
.empl-table tbody tr:hover td,
.erde-table tbody tr:hover td,
.holz-table tbody tr:hover td,
.kalender-table tbody tr:hover td,
.kosten-table tbody tr:hover td,
.menge-table tbody tr:hover td,
.gewicht-table tbody tr:hover td,
.companion-table tbody tr:hover td,
.comp-table tbody tr:hover td {
  background: var(--green-pale);
}

/* Hervorgehobene Zeilen */
.vergleich-table .highlight-row td,
.data-table .highlight-row td,
.wpc-compare-table .highlight-row td,
.corten-compare-table .highlight-row td {
  background: var(--green-pale) !important;
  font-weight: 600;
  color: var(--text);
}

/* ── Mobile: Tabellen bei < 768px ──────────────────────── */
@media (max-width: 768px) {
  .vergleich-table,
  .data-table,
  .wpc-compare-table,
  .corten-compare-table,
  .sg-compare-table,
  .empl-table,
  .erde-table,
  .holz-table,
  .kalender-table,
  .kosten-table,
  .menge-table,
  .gewicht-table,
  .companion-table,
  .comp-table {
    font-size: 0.8rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vergleich-table th,
  .data-table th,
  .vergleich-table td,
  .data-table td {
    padding: 8px 10px;
    white-space: nowrap;
  }
  /* Wrapper für alle Tabellen - automatisch scrollbar */
  .table-wrapper {
    box-shadow: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
  }
}

/* ── Tabellen ohne wrapper: direkt im .article-layout ─── */
.article-layout table,
.article-body table,
.article-layout__content table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
  border-collapse: collapse;
}

/* ── Fix K3: Mobile Overflow Protection ──────────────────── */
@media (max-width: 600px) {
  .article-layout.container {
    overflow-x: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .article-layout__content {
    min-width: 0;
    overflow-x: hidden;
  }
}

/* ══════════════════════════════════════════════════════════
   INLINE-CSS KONSOLIDIERUNG (moved from page-level styles)
   ══════════════════════════════════════════════════════════ */

/* ── Material Cards (Holz, Cortenstahl, WPC, Kunststoff, Metall) ── */
.material-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
  border-top: 4px solid var(--green-light);
}
.material-card h3 { color: var(--green-deep); margin: 0 0 var(--space-sm); }
.material-card .mat-meta { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); font-size: 0.82rem; }
.mat-badge { background: var(--green-pale); color: var(--green-deep); padding: 2px 10px; border-radius: 20px; font-weight: 600; }

/* ── Pros / Cons ── */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-md); }
.pros, .cons { font-size: 0.88rem; }
.pros h4 { color: #2a7a3a; margin: 0 0 var(--space-xs); font-size: 0.85rem; }
.cons h4 { color: #c04a2a; margin: 0 0 var(--space-xs); font-size: 0.85rem; }
.pros ul, .cons ul { padding-left: var(--space-lg); margin: 0; }
.pros li, .cons li { color: var(--text-light); line-height: 1.7; margin-bottom: 3px; }

/* ── Empfehlung Badge ── */
.empfehlung-badge { background: #f0c040; color: #333; padding: 2px 10px; border-radius: 20px; font-weight: 700; font-size: 0.78rem; display: inline-block; }

/* ── Plant/Herb Cards ── */
.plant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.plant-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  border: 1px solid var(--border-light);
}
.plant-card__icon { font-size: 2.2rem; display: block; margin-bottom: var(--space-sm); }
.plant-card__name { font-weight: 700; font-size: 0.9rem; color: var(--green-deep); display: block; margin-bottom: 4px; }
.plant-card__note { font-size: 0.78rem; color: var(--text-light); }
.plant-card h4 { font-size: 0.9rem; color: var(--green-deep); margin-bottom: var(--space-xs); }
.plant-card p { font-size: 0.78rem; color: var(--text-light); margin: 0; }

/* ── Criteria Cards (Balkon, Terrasse) ── */
.criteria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.criteria-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--green-light);
}
.criteria-card__icon { font-size: 2rem; display: block; margin-bottom: var(--space-md); }
.criteria-card h3 { font-size: 1rem; color: var(--green-deep); margin-bottom: var(--space-sm); }
.criteria-card p { font-size: 0.86rem; color: var(--text-light); margin: 0; line-height: 1.5; }

/* ── Tip Cards (Balkon, Terrasse) ── */
.tip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.tip-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.tip-card__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-deep);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.tip-card__content h3 { font-size: 0.95rem; color: var(--green-deep); margin-bottom: var(--space-xs); }
.tip-card__content p { font-size: 0.84rem; color: var(--text-light); margin: 0; line-height: 1.55; }

/* ── Responsive (Konsolidierung) ── */
@media (max-width: 900px) {
  .pros-cons { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   BALKON PAGE
   ══════════════════════════════════════════════════════════ */

/* ── Balkon Hero ──────────────────────────────────────── */
.balkon-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2a5a3a 100%);
  color: white;
  padding: var(--space-4xl) 0 var(--space-3xl);
}
.balkon-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xl);
  align-items: center;
}
.balkon-hero h1 {
  color: white;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: var(--space-md);
}
.balkon-hero__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: var(--space-xl);
  max-width: 560px;
}
.balkon-hero__stats {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.balkon-stat {
  text-align: center;
}
.balkon-stat__val {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  color: white;
  display: block;
}
.balkon-stat__label {
  font-size: 0.75rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.balkon-hero__img-box {
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
  min-width: 180px;
}
.balkon-hero__img-box .emoji { font-size: 4rem; display: block; margin-bottom: var(--space-sm); }
.balkon-hero__img-box p { font-size: 0.85rem; opacity: 0.8; margin: 0; }

/* ── Balkon Recommendation Cards ─────────────────────── */
.balkon-rec {
  padding: var(--space-3xl) 0;
  border-bottom: 1px solid var(--border-light);
}
.balkon-rec-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-3xl);
  align-items: start;
  margin-top: var(--space-xl);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.balkon-rec-card__img {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  overflow: hidden;
}
.balkon-rec-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-lg);
}
.balkon-rec-card__body {
  padding: var(--space-xl) var(--space-xl) var(--space-xl) 0;
}
.balkon-rec-card__badge-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.balkon-rec-card__title {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  color: var(--green-deep);
  margin: 0 0 var(--space-xs);
}
.balkon-rec-card__subtitle { font-size: 0.88rem; color: var(--text-light); margin: 0 0 var(--space-md); }
.balkon-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.balkon-price { font-size: 1.8rem; font-weight: 700; color: var(--green-deep); font-family: var(--font-headline); }
.balkon-stars { font-size: 1rem; color: var(--gold); }
.balkon-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.b-spec {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 8px 10px;
  text-align: center;
}
.b-spec__label { font-size: 0.7rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 2px; }
.b-spec__val { font-size: 0.88rem; font-weight: 600; color: var(--green-deep); }
.balkon-rec-card__ctas { display: flex; gap: var(--space-md); flex-wrap: wrap; }

@media (max-width: 900px) {
  .balkon-hero__inner { grid-template-columns: 1fr; }
  .balkon-hero__img-box { display: none; }
  .balkon-rec-card { grid-template-columns: 1fr; }
  .balkon-rec-card__img { min-height: 200px; }
  .balkon-specs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .balkon-hero__stats { gap: var(--space-lg); }
  .balkon-price { font-size: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   HOCHBEET-PFLANZEN PAGE
   ══════════════════════════════════════════════════════════ */

/* ── Pflanzen Plant Cards (override base .plant-card) ─── */
.cat-section .plant-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin: var(--space-lg) 0;
}
.cat-section .plant-card {
  border-color: #d4e8d4;
  border-radius: 10px;
  padding: var(--space-md);
  box-shadow: none;
  text-align: left;
}
.plant-card h3 { color: var(--green-deep); margin: 0 0 .5rem; font-size: 1rem; }
.plant-card .plant-emoji { font-size: 2rem; margin-bottom: .5rem; display: block; }
.cat-section .plant-card p { font-size: .88rem; color: #555; margin: .25rem 0; }
.plant-card .plant-tag { display: inline-block; background: #e8f5e9; color: #2a7a3a; border-radius: 4px; font-size: .75rem; padding: .1rem .4rem; margin-top: .4rem; }

/* ── Mischkultur Grid ────────────────────────────────── */
.misch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-md) 0; }
.misch-good, .misch-bad { border-radius: 8px; padding: var(--space-md); }
.misch-good { background: #e8f5e9; border: 1px solid #a5d6a7; }
.misch-bad { background: #fce4ec; border: 1px solid #f48fb1; }
.misch-good h4 { color: #2a7a3a; margin: 0 0 .5rem; }
.misch-bad h4 { color: #c04a2a; margin: 0 0 .5rem; }
.misch-good ul, .misch-bad ul { margin: 0; padding-left: 1.2rem; font-size: .9rem; }

/* ── Category Sections & Labels ──────────────────────── */
.cat-section { margin: var(--space-lg) 0; }
.cat-label { display: inline-block; background: var(--green-deep); color: #fff; border-radius: 4px; padding: .2rem .6rem; font-size: .8rem; font-weight: 600; margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: .04em; }
.cat-label.kraeuter { background: #7b5e00; }
.cat-label.blumen { background: #880e4f; }

@media (max-width: 600px) {
  .misch-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   HOCHBEET-WINTERGEMUESE PAGE
   ══════════════════════════════════════════════════════════ */

/* ── Gemuese Cards ───────────────────────────────────── */
.gemuese-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.gemuese-card { border-radius: 10px; padding: var(--space-md); background: #fff; border: 1px solid var(--border-light); }
.gemuese-card h3 { color: var(--green-deep); margin: 0 0 .4rem; font-size: .95rem; }
.gemuese-card .frost-level { display: inline-block; border-radius: 4px; font-size: .75rem; padding: .15rem .5rem; margin-bottom: .5rem; font-weight: 700; }
.frost-sehr-robust { background: #e3f2fd; color: #0d47a1; }
.frost-robust { background: #e8f5e9; color: #1b5e20; }
.frost-mittel { background: #fff8e1; color: #e65100; }
.gemuese-card p { font-size: .87rem; color: #555; margin: .25rem 0; }

/* ── Schutz Grid ─────────────────────────────────────── */
.schutz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-md) 0; }
.schutz-card { border-radius: 8px; padding: var(--space-md); border: 1px solid #e0e0e0; background: #fff; }
.schutz-card h4 { margin: 0 0 .5rem; color: var(--green-deep); }
.schutz-card p { font-size: .88rem; color: #555; margin: .25rem 0; }
.schutz-card .pros { color: #2a7a3a; font-size: .85rem; }
.schutz-card .cons { color: #c04a2a; font-size: .85rem; }

@media (max-width: 600px) {
  .gemuese-cards { grid-template-columns: 1fr 1fr; }
  .schutz-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   QUELLEN & REFERENZEN
   ══════════════════════════════════════════════════════════ */
.quellen {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-light);
}
.quellen h2 {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: var(--space-md);
  font-weight: 600;
}
.quellen__list {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0;
}
.quellen__list li {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: var(--space-xs);
}
.quellen__list a {
  color: var(--green-mid);
  text-decoration: none;
  border-bottom: 1px dotted var(--green-light);
  transition: color 0.2s, border-color 0.2s;
}
.quellen__list a:hover {
  color: var(--green-deep);
  border-bottom-style: solid;
}

/* ══════════════════════════════════════════════════════════
   AUTOR-SEITE (stefan-bergmann.html)
   ══════════════════════════════════════════════════════════ */
.author-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.author-hero .container {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.author-hero__avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2rem;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.3);
}
.author-hero__info h1 {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: #fff;
  margin: 0 0 .25rem;
}
.author-hero__role {
  font-size: .95rem;
  color: rgba(255,255,255,.88);
  font-weight: 600;
  margin: 0 0 .5rem;
}
.author-hero__intro {
  color: rgba(255,255,255,.82);
  line-height: 1.7;
  margin: 0;
  max-width: 620px;
  font-size: .95rem;
}
.author-content {
  padding: 3rem 0 4rem;
  max-width: 860px;
}
.author-content h2 {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  color: var(--green-deep);
  margin: 2.5rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--green-pale);
}
.author-content h2:first-child { margin-top: 0; }
.author-content p {
  color: #333;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.credential-card {
  background: #fff;
  border: 1px solid #e0e8e2;
  border-radius: .5rem;
  padding: 1.25rem;
  border-top: 3px solid var(--green-light);
}
.credential-card__icon {
  font-size: 1.6rem;
  margin-bottom: .5rem;
  display: block;
}
.credential-card h3 {
  font-size: .95rem;
  color: var(--green-deep);
  margin: 0 0 .4rem;
}
.credential-card p {
  font-size: .85rem;
  color: #555;
  margin: 0;
  line-height: 1.6;
}
.expertise-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .5rem;
}
.expertise-list li {
  padding: .6rem 1rem;
  background: var(--green-pale);
  border-radius: .35rem;
  color: var(--green-deep);
  font-size: .9rem;
  font-weight: 600;
}
.articles-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.articles-list li {
  border-bottom: 1px solid #e0e8e2;
}
.articles-list li:last-child {
  border-bottom: none;
}
.articles-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem .5rem;
  color: var(--green-deep);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  transition: background .15s;
  border-radius: .25rem;
}
.articles-list a:hover {
  background: var(--green-pale);
}
.articles-list .article-category {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--green-light);
  flex-shrink: 0;
  margin-left: 1rem;
}

/* ── Testmethodik-Seite ────────────────────────────────── */
.methodik-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2a5a3a 100%);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.methodik-hero h1 {
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  margin: 0 0 .75rem;
}
.methodik-hero p {
  color: rgba(255,255,255,.85);
  font-size: 1.05rem;
  max-width: 600px;
  line-height: 1.7;
  margin: 0;
}
.methodik-content {
  padding: 3rem 0 4rem;
  max-width: 860px;
}
.methodik-content h2 {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  color: var(--green-deep);
  margin: 2.5rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--green-pale);
}
.methodik-content h2:first-child { margin-top: 0; }
.methodik-content p {
  color: #333;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.methodik-content ul {
  margin: .5rem 0 1rem;
  padding-left: 1.5rem;
}
.methodik-content li {
  color: #333;
  line-height: 1.7;
  margin-bottom: .4rem;
}
.criteria-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}
.criteria-item {
  background: #fff;
  border: 1px solid #e0e8e2;
  border-radius: .5rem;
  padding: 1.25rem;
  text-align: center;
  border-top: 3px solid var(--green-light);
}
.criteria-item__icon { font-size: 1.8rem; margin-bottom: .5rem; display: block; }
.criteria-item h3 { font-size: .95rem; color: var(--green-deep); margin: 0 0 .3rem; }
.criteria-item__weight {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green-mid);
  font-family: var(--font-headline);
  display: block;
  margin-bottom: .3rem;
}
.criteria-item p { font-size: .82rem; color: #666; margin: 0; line-height: 1.5; }
.rating-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .9rem;
}
.rating-table th {
  background: var(--green-deep);
  color: #fff;
  padding: .6rem 1rem;
  text-align: left;
}
.rating-table td {
  padding: .6rem 1rem;
  border-bottom: 1px solid #e0e8e2;
}
.rating-table tr:nth-child(even) td { background: var(--green-pale); }
.transparency-box {
  background: #fff8e1;
  border: 1px solid #ffd54f;
  border-radius: .5rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.transparency-box h3 {
  color: #8a6914;
  font-size: 1rem;
  margin: 0 0 .5rem;
}
.transparency-box p {
  font-size: .9rem;
  color: #555;
  margin: .25rem 0;
}

@media (max-width: 600px) {
  .author-hero .container { flex-direction: column; text-align: center; align-items: center; }
  .author-hero__intro { text-align: left; }
  .credentials-grid { grid-template-columns: 1fr; }
  .criteria-overview { grid-template-columns: 1fr 1fr; }
}

/* ── empfehlungen.html ────────────────────────────────── */

/* ── Empfehlungen-spezifische Styles ──────────────────── */
.empl-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%);
  color: white;
  padding: var(--space-4xl) 0 var(--space-3xl);
  text-align: center;
}
.empl-hero h1 {
  color: white;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: var(--space-md);
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}
.empl-hero__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.92);
  max-width: 580px;
  margin: 0 auto var(--space-xl);
}
.empl-hero__meta {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
}
.empl-hero__badges {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}
.empl-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  font-size: 0.82rem;
  padding: 5px 14px;
  border-radius: 20px;
}

/* ── Recommendation Card ───────────────────────────────── */
.rec-section {
  padding: var(--space-3xl) 0;
  border-bottom: 1px solid var(--border-light);
}
.rec-section:nth-child(even) { background: var(--green-pale); }
.rec-section:nth-child(odd) { background: var(--white); }

.rec-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-3xl);
  align-items: start;
  margin-top: var(--space-xl);
}

.rec-card__img-wrap {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rec-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-lg);
}

.rec-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.rec-rank {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-deep);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.rec-card__title {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  color: var(--green-deep);
  margin: 0;
}
.rec-card__subtitle {
  font-size: 0.88rem;
  color: var(--text-light);
  margin: 0 0 var(--space-md);
}

.rec-card__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.rec-card__price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--green-deep);
  font-family: var(--font-headline);
}
.rec-card__stars {
  font-size: 1.1rem;
  color: var(--gold);
}
.rec-card__rating-text {
  font-size: 0.88rem;
  color: var(--text-light);
}

.rec-card__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.rec-spec {
  background: var(--sand);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
}
.rec-spec__label {
  font-size: 0.72rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}
.rec-spec__val {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green-deep);
}

.rec-card__verdict {
  background: var(--green-pale);
  border-left: 3px solid var(--green-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: 0.92rem;
}
.rec-card__verdict strong {
  color: var(--green-deep);
}

.rec-card__pros {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-lg);
}
.rec-card__pros li {
  font-size: 0.86rem;
  color: var(--text-light);
  display: flex;
  gap: 6px;
}
.rec-card__pros li::before {
  content: "✓";
  color: var(--green-light);
  font-weight: 700;
  flex-shrink: 0;
}

.rec-card__ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ── Use-Case Quick-Pick ───────────────────────────────── */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.usecase-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}
.usecase-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.usecase-card__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--space-md);
}
.usecase-card__label {
  font-size: 0.8rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--space-xs);
}
.usecase-card__model {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  color: var(--green-deep);
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-sm);
}
.usecase-card__price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
}

/* ── Comparison Overview Table ─────────────────────────── */
.empl-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.empl-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}
.empl-table thead th {
  background: var(--green-deep);
  color: white;
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-headline);
  font-size: 0.88rem;
  white-space: nowrap;
}
.empl-table tbody tr:nth-child(even) { background: var(--sand); }
.empl-table tbody tr:hover { background: var(--green-pale); }
.empl-table td {
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.empl-table .badge-cell { white-space: nowrap; }
.empl-table a.tbl-buy {
  display: inline-block;
  background: var(--green-light);
  color: white;
  padding: 5px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition);
}
.empl-table a.tbl-buy:hover { background: var(--green-deep); }
.stars-cell { color: var(--gold); }

@media (max-width: 900px) {
  .rec-card { grid-template-columns: 1fr; }
  .rec-card__img-wrap { max-width: 280px; margin: 0 auto; }
  .rec-card__specs { grid-template-columns: repeat(2, 1fr); }
  .rec-card__pros { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .rec-card__specs { grid-template-columns: 1fr 1fr; }
  .usecase-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Page: ueber-uns.html ─────────────────────────── */
.about-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%);
  color: #fff;
  padding: 3rem 0 2.5rem;
}
.about-hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #fff;
  margin: 0 0 .5rem;
}
.about-hero p { color: rgba(255,255,255,.88); max-width: 620px; line-height: 1.7; margin: 0; }

.about-content {
  padding: 3rem 0 4rem;
  max-width: 860px;
}
.about-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  color: var(--green-deep);
  margin: 2.5rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--green-pale);
}
.about-content p { color: #333; line-height: 1.8; margin-bottom: 1rem; }

/* Values grid */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.value-card {
  background: #fff;
  border: 1px solid #e0e8e2;
  border-radius: .5rem;
  padding: 1.25rem;
  text-align: center;
}
.value-card__icon { font-size: 2rem; margin-bottom: .5rem; }
.value-card h3 { font-size: 1rem; color: var(--green-deep); margin: 0 0 .4rem; }
.value-card p { font-size: .85rem; color: #555; margin: 0; line-height: 1.6; }

/* Team */
.team-card {
  display: flex;
  gap: 1.5rem;
  background: var(--green-pale);
  border-radius: .5rem;
  padding: 1.75rem;
  margin: 1.5rem 0;
  align-items: flex-start;
}
.team-card__avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--green-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.team-card__body h3 { margin: 0 0 .15rem; color: var(--green-deep); font-size: 1.1rem; }
.team-card__body .role { font-size: .82rem; font-weight: 700; color: var(--green-light); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .6rem; }
.team-card__body p { margin: 0; font-size: .9rem; color: #444; line-height: 1.75; }

/* Process */
.process-steps { display: flex; flex-direction: column; gap: 1rem; margin: 1.25rem 0; }
.process-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e0e8e2;
  border-radius: .5rem;
  padding: 1rem 1.25rem;
}
.process-step__num {
  width: 2rem;
  height: 2rem;
  background: var(--green-deep);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.process-step__body h4 { margin: 0 0 .2rem; color: var(--green-deep); font-size: .95rem; }
.process-step__body p { margin: 0; font-size: .85rem; color: #555; line-height: 1.6; }

/* Affiliate transparency */
.transparency-box {
  background: #fff8e6;
  border: 1px solid #f0d98a;
  border-radius: .5rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.transparency-box h3 { color: var(--green-deep); margin: 0 0 .6rem; font-size: 1rem; }
.transparency-box p { margin: 0 0 .5rem; font-size: .9rem; color: #444; line-height: 1.7; }
.transparency-box p:last-child { margin-bottom: 0; }

/* ── siena-garden/index.html ──────────────────────────── */

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.model-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}

.model-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.model-card__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.model-card__img img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
}

.model-card__body {
  padding: var(--space-xl);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.model-card__badge-row {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.model-card__title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  color: var(--green-deep);
  margin-bottom: var(--space-xs);
}

.model-card__rating {
  color: var(--gold);
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
}

.model-card__rating span {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-left: 4px;
}

.model-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  margin: var(--space-md) 0;
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.model-card__spec {
  font-size: 0.82rem;
  color: var(--text-light);
}

.model-card__spec strong {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.model-card__price {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: var(--space-md);
}

.model-card__price-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

.model-card__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: auto;
}

.comparison-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sg-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.sg-compare-table th {
  background: var(--green-deep);
  color: white;
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-headline);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.sg-compare-table th:hover { background: var(--green-mid); }

.sg-compare-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

.sg-compare-table tr:nth-child(even) td { background: var(--sand); }
.sg-compare-table tr:hover td { background: var(--green-pale); }

.winner-row td { font-weight: 600; }

.rating-stars { color: var(--gold); }

.quick-pick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.quick-pick__card {
  background: var(--white);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  transition: border-color var(--transition);
}

.quick-pick__card:hover { border-color: var(--green-light); }

.quick-pick__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--space-md);
}

.quick-pick__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.quick-pick__model {
  font-family: var(--font-headline);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: var(--space-xs);
}

.quick-pick__reason {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: var(--space-lg);
}

.rbar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rbar-label { font-size: 0.82rem; color: var(--text-muted); min-width: 130px; }
.rbar-track { flex: 1; background: #e8f0ea; border-radius: 4px; height: 7px; overflow: hidden; }
.rbar-fill { height: 100%; background: var(--green-mid); border-radius: 4px; }
.rbar-val { font-size: 0.80rem; font-weight: 700; color: var(--green-deep); min-width: 22px; text-align: right; }

/* ── Page: ratgeber/hochbeet-kraeuter.html ─────────────────────────── */
.herb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}
.herb-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--green-light);
}
.herb-card__icon { font-size: 1.8rem; display: block; margin-bottom: var(--space-sm); }
.herb-card__name { font-weight: 700; font-size: 0.95rem; color: var(--green-deep); display: block; margin-bottom: var(--space-xs); }
.herb-card__detail { font-size: 0.82rem; color: var(--text-light); line-height: 1.5; }
.herb-card__detail span { display: block; margin-bottom: 2px; }

.companion-table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: 0.88rem; }
.companion-table th { background: var(--green-deep); color: white; padding: var(--space-sm) var(--space-md); text-align: left; }
.companion-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-light); color: var(--text-light); }
.companion-table tr:nth-child(even) td { background: var(--green-pale); }

.bad-table th { background: #c04a2a; }

.calendar-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-md) 0;
  border-left: 5px solid var(--green-light);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.calendar-card__month {
  background: var(--green-deep);
  color: white;
  border-radius: var(--radius);
  padding: var(--space-sm);
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.3;
}
.calendar-card__body h3 { color: var(--green-deep); margin: 0 0 4px; font-size: 1rem; }
.calendar-card__body p { color: var(--text-light); font-size: 0.91rem; margin: 0; line-height: 1.7; }

.pflanzplan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin: var(--space-lg) 0;
  background: var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.82rem;
  text-align: center;
}
.pflanzplan-grid .pp-cell {
  background: var(--white);
  padding: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pflanzplan-grid .pp-header {
  background: var(--green-deep);
  color: white;
  font-weight: 700;
  padding: var(--space-sm);
}
.pflanzplan-grid .pp-label {
  background: var(--green-pale);
  font-weight: 600;
  color: var(--green-deep);
}

.pflege-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  border-top: 3px solid var(--green-light);
}
.pflege-card h3 { color: var(--green-deep); margin: 0 0 var(--space-xs); font-size: 1rem; }
.pflege-card p { color: var(--text-light); font-size: 0.91rem; margin: 0; line-height: 1.7; }

@media (max-width: 900px) {
  .herb-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .calendar-card { grid-template-columns: 1fr; }
  .calendar-card__month { width: 80px; }
  .pflanzplan-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── hochbeet.html (zubehoer) ─────────────────────────── */

/* ── Zubehör Hochbeet Styles ──────────────────────────── */
.zub-page-hero {
  background: var(--green-pale);
  border-bottom: 2px solid var(--border-light);
  padding: var(--space-3xl) 0;
}
.zub-page-hero h1 { margin-bottom: var(--space-sm); }
.zub-page-hero p { color: var(--text-light); max-width: 680px; }

/* ── Section TOC jump bar ─────────────────────────────── */
.section-nav {
  background: var(--green-deep);
  position: sticky;
  top: var(--nav-height);
  z-index: 90;
  overflow-x: auto;
}
.section-nav__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: max-content;
}
.section-nav__list a {
  display: block;
  padding: 14px 20px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.section-nav__list a:hover { color: white; background: rgba(255,255,255,0.1); }

/* ── Prod Section ──────────────────────────────────────── */
.zub-section {
  padding: var(--space-4xl) 0;
}
.zub-section:nth-child(odd) { background: var(--white); }
.zub-section:nth-child(even) { background: var(--green-pale); }

.zub-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.zub-section__icon {
  font-size: 2.5rem;
  background: var(--green-pale);
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.zub-section__title { margin: 0; }
.zub-section__sub { font-size: 0.9rem; color: var(--text-light); margin: 4px 0 0; }

/* ── Product Cards Grid ────────────────────────────────── */
.prod-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.zub-prod-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition);
}
.zub-prod-card:hover { box-shadow: var(--shadow-md); }
.zub-prod-card--featured { border-color: var(--green-light); border-width: 2px; }

.zub-prod-card__top {
  background: #fff;
  padding: var(--space-xl);
  text-align: center;
  position: relative;
}
.zub-prod-card__top .emoji { font-size: 3.5rem; display: block; }
.zub-prod-card__top:has(img) { padding: 0; }
.zub-prod-card__top img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  display: block;
  background: #fff;
}
.zub-prod-card__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
}

.zub-prod-card__body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.zub-prod-card__partner {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--green-light);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.zub-prod-card__name {
  font-family: var(--font-headline);
  font-size: 1rem;
  color: var(--green-deep);
  margin-bottom: var(--space-xs);
}
.zub-prod-card__desc { font-size: 0.84rem; color: var(--text-light); line-height: 1.5; flex: 1; margin-bottom: var(--space-md); }
.zub-prod-card__specs { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.zub-prod-card__specs li {
  font-size: 0.8rem;
  color: var(--text-light);
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
}
.zub-prod-card__specs li:last-child { border-bottom: none; }
.zub-prod-card__specs strong { color: var(--text); }
.zub-prod-card__price { font-size: 1.3rem; font-weight: 700; color: var(--green-deep); margin-bottom: var(--space-md); }
.zub-prod-card__price-note { font-size: 0.78rem; color: var(--text-light); display: block; }

/* ── Erde Comparison Table ─────────────────────────────── */
.erde-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.erde-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}
.erde-table thead th {
  background: var(--green-deep);
  color: white;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.85rem;
  white-space: nowrap;
}
.erde-table tbody tr:nth-child(even) { background: var(--sand); }
.erde-table td {
  padding: 11px 16px;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.erde-table .buy-link {
  display: inline-block;
  background: var(--green-light);
  color: white;
  padding: 5px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition);
}
.erde-table .buy-link:hover { background: var(--green-deep); }

@media (max-width: 700px) {
  .prod-cards-grid { grid-template-columns: 1fr; }
  .zub-section__header { flex-direction: column; text-align: center; }
}

/* ── wpc.html ─────────────────────────────────────────── */

/* ── WPC-spezifische Styles ────────────────────────────── */
.wpc-hero {
  background: linear-gradient(135deg, #3a3a2e 0%, #5a5040 60%, #6b5e48 100%);
  color: white;
  padding: var(--space-4xl) 0 var(--space-3xl);
}
.wpc-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xl);
  align-items: center;
}
.wpc-hero h1 {
  color: white;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: var(--space-md);
}
.wpc-hero__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: var(--space-xl);
  max-width: 560px;
}
.wpc-hero p { color: rgba(255,255,255,0.88); }
.wpc-hero__stats {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.wpc-stat {
  text-align: center;
}
.wpc-stat__val {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  color: white;
  display: block;
}
.wpc-stat__label {
  font-size: 0.75rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wpc-hero__img-box {
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
  min-width: 180px;
}
.wpc-hero__img-box .emoji { font-size: 4rem; display: block; margin-bottom: var(--space-sm); }
.wpc-hero__img-box p { font-size: 0.85rem; opacity: 0.8; margin: 0; }

/* ── Comparison Table ─────────────────────────────────── */
.wpc-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-xl) 0;
  font-size: 0.88rem;
}
.wpc-compare-table th,
.wpc-compare-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}
.wpc-compare-table th {
  background: var(--green-deep);
  color: white;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wpc-compare-table tbody tr:nth-child(even) { background: var(--sand); }
.wpc-compare-table tbody tr:hover { background: #e8f5e9; }
.wpc-compare-table .highlight-row { background: #e8f5e9 !important; font-weight: 600; }

/* ── Model Cards ──────────────────────────────────────── */
.wpc-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
.wpc-model-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
}
.wpc-model-card--best { border-color: var(--gold); border-width: 2px; }
.wpc-model-card__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  width: fit-content;
}
.wpc-model-card__name {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  color: var(--green-deep);
  margin-bottom: var(--space-xs);
}
.wpc-model-card__desc {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}
.wpc-model-card__specs {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: var(--space-lg);
  line-height: 1.8;
  flex-grow: 1;
}
.wpc-model-card__price {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: var(--space-md);
}

/* ── Checklist ─────────────────────────────────────────── */
.wpc-checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0;
}
.wpc-checklist li {
  font-size: 0.9rem;
  color: var(--text-light);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.55;
}
.wpc-checklist li:last-child { border-bottom: none; }
.wpc-checklist li strong { color: var(--green-deep); }

@media (max-width: 900px) {
  .wpc-hero__inner { grid-template-columns: 1fr; }
  .wpc-hero__img-box { display: none; }
  .wpc-compare-table { font-size: 0.78rem; }
  .wpc-compare-table th, .wpc-compare-table td { padding: 8px 6px; }
}
@media (max-width: 600px) {
  .wpc-hero__stats { gap: var(--space-lg); }
}

/* ── Page: ratgeber/hochbeet-selber-bauen.html ─────────────────────────── */
.step-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-md) 0;
  border-left: 5px solid var(--green-light);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.step-card__num {
  background: var(--green-deep);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 700;
  flex-shrink: 0;
}
.step-card h3 { color: var(--green-deep); margin: 0 0 var(--space-sm); font-size: 1.1rem; }
.step-card p { color: var(--text-light); margin: 0; line-height: 1.7; font-size: 0.92rem; }
.step-card ul { padding-left: var(--space-lg); margin: var(--space-sm) 0 0; }
.step-card li { color: var(--text-light); line-height: 1.7; font-size: 0.92rem; }

.material-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}
.material-list__group h3 {
  color: var(--green-deep);
  font-size: 1rem;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--green-pale);
}
.material-list__group ul { padding-left: var(--space-lg); }
.material-list__group li {
  color: var(--text-light);
  line-height: 1.8;
  font-size: 0.9rem;
}

.mistake-card {
  background: #fef3f2;
  border-left: 4px solid #c04a2a;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-md) 0;
}
.mistake-card h4 { color: #c04a2a; margin: 0 0 var(--space-xs); font-size: 0.95rem; }
.mistake-card p { color: var(--text-light); margin: 0; font-size: 0.9rem; line-height: 1.6; }

.holz-table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: 0.88rem; }
.holz-table th { background: var(--green-deep); color: white; padding: var(--space-sm) var(--space-md); text-align: left; }
.holz-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-light); color: var(--text-light); }
.holz-table tr:nth-child(even) td { background: var(--green-pale); }

.kosten-table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: 0.88rem; }
.kosten-table th { background: var(--green-deep); color: white; padding: var(--space-sm) var(--space-md); text-align: left; }
.kosten-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-light); color: var(--text-light); }
.kosten-table tr:nth-child(even) td { background: var(--green-pale); }
.kosten-table tfoot td { font-weight: 700; background: var(--green-pale); color: var(--green-deep); }

@media (max-width: 600px) {
  .step-card { grid-template-columns: 1fr; }
  .step-card__num { width: 36px; height: 36px; font-size: 1.1rem; }
  .material-list { grid-template-columns: 1fr; }
}

/* ── Page: hochbeet-bepflanzen.html ─────────────────────────── */
.saison-block {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
  border-top: 4px solid var(--green-light);
}
.saison-block h3 { color: var(--green-deep); margin: 0 0 var(--space-sm); }
.saison-block .saison-zeitraum { font-size: 0.82rem; color: var(--green-light); font-weight: 600; margin-bottom: var(--space-md); }
.saison-block p, .saison-block ul { color: var(--text-light); font-size: 0.91rem; line-height: 1.75; margin-bottom: var(--space-sm); }

.kalender-table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: 0.82rem; }
.kalender-table th { background: var(--green-deep); color: white; padding: 6px 10px; text-align: left; }
.kalender-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-light); color: var(--text-light); }
.kalender-table tr:nth-child(even) td { background: var(--green-pale); }
.k-ja { color: #2a7a3a; font-weight: 600; }
.k-sp { color: #c0702a; }

@media (max-width: 900px) {
  .kalender-table { font-size: 0.78rem; }
}

/* ── index.html (zubehoer) ────────────────────────────── */

/* ── Zubehör Index Styles ─────────────────────────────── */
.zub-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2a5a3a 100%);
  color: white;
  padding: var(--space-4xl) 0 var(--space-3xl);
}
.zub-hero h1 {
  color: white;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: var(--space-md);
}
.zub-hero__sub {
  font-size: 1.05rem;
  opacity: 0.85;
  max-width: 580px;
  margin-bottom: var(--space-xl);
}
.zub-hero__badges {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.zub-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
}

/* ── Category Cards ────────────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.cat-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  text-decoration: none;
  border: 2px solid var(--border-light);
  transition: all var(--transition);
}
.cat-card:hover {
  border-color: var(--green-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
/* Icon als Emoji (Fallback) */
.cat-card__icon { font-size: 2.8rem; display: block; margin-bottom: var(--space-md); }
/* Icon als Bild (ersetzt Emoji) */
.cat-card__icon--img {
  font-size: 0;
  display: block;
  margin-bottom: var(--space-md);
}
.cat-card__icon--img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform var(--transition);
}
.cat-card:hover .cat-card__icon--img img {
  transform: scale(1.04);
}
.cat-card__name {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  color: var(--green-deep);
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-xs);
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.cat-card__desc { font-size: 0.8rem; color: var(--text-light); line-height: 1.45; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* ── Ratgeber-Link Cards (mit Bild-Icons) ────────────── */
.ratg-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.ratg-link-card {
  background: var(--green-pale);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-decoration: none;
  display: block;
  transition: all var(--transition);
  border: 2px solid transparent;
}
.ratg-link-card:hover {
  border-color: var(--green-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.ratg-link-card__icon {
  display: block;
  margin-bottom: var(--space-sm);
}
.ratg-link-card__icon img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform var(--transition);
}
.ratg-link-card:hover .ratg-link-card__icon img {
  transform: scale(1.03);
}
.ratg-link-card__title {
  color: var(--green-deep);
  font-weight: 700;
  display: block;
}
.ratg-link-card__desc {
  font-size: 0.84rem;
  color: var(--text-light);
  margin: var(--space-xs) 0 0;
}

/* ── Quick Recs ────────────────────────────────────────── */
.qrec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.qrec-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.qrec-card__top {
  background: var(--white);
  padding: 0;
  text-align: center;
}
.qrec-card__top span { font-size: 3rem; display: block; padding: var(--space-xl); }
.qrec-card__top img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  display: block;
  background: #fff;
}
.qrec-card__body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.qrec-card__cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--green-light);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.qrec-card__name {
  font-family: var(--font-headline);
  font-size: 1rem;
  color: var(--green-deep);
  margin-bottom: var(--space-sm);
}
.qrec-card__desc { font-size: 0.84rem; color: var(--text-light); flex: 1; line-height: 1.5; margin-bottom: var(--space-lg); }
.qrec-card__price { font-size: 1.2rem; font-weight: 700; color: var(--green-deep); margin-bottom: var(--space-md); }

/* ── Checklist ─────────────────────────────────────────── */
.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-2xl);
}
.checklist li {
  font-size: 0.9rem;
  color: var(--text-light);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-light);
}
.checklist li::before {
  content: "✓";
  color: var(--green-light);
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .checklist { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
}

/* ── balkon.html ──────────────────────────────────────── */

/* ── Balkon-spezifische Styles ────────────────────────── */
.balkon-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, #2a5a3a 100%);
  color: white;
  padding: var(--space-4xl) 0 var(--space-3xl);
}
.balkon-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xl);
  align-items: center;
}
.balkon-hero h1 {
  color: white;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: var(--space-md);
}
.balkon-hero__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: var(--space-xl);
  max-width: 560px;
}
.balkon-hero p { color: rgba(255,255,255,0.88); }
.balkon-hero__stats {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.balkon-stat {
  text-align: center;
}
.balkon-stat__val {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  color: white;
  display: block;
}
.balkon-stat__label {
  font-size: 0.75rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.balkon-hero__img-box {
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
  min-width: 180px;
}
.balkon-hero__img-box .emoji { font-size: 4rem; display: block; margin-bottom: var(--space-sm); }
.balkon-hero__img-box p { font-size: 0.85rem; opacity: 0.8; margin: 0; }

/* ── Balkon Recommendation Cards ──────────────────────── */
.balkon-rec {
  padding: var(--space-3xl) 0;
  border-bottom: 1px solid var(--border-light);
}
.balkon-rec-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-3xl);
  align-items: start;
  margin-top: var(--space-xl);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.balkon-rec-card__img {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  overflow: hidden;
}
.balkon-rec-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-lg);
}
.balkon-rec-card__body {
  padding: var(--space-xl) var(--space-xl) var(--space-xl) 0;
}
.balkon-rec-card__badge-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.balkon-rec-card__title {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  color: var(--green-deep);
  margin: 0 0 var(--space-xs);
}
.balkon-rec-card__subtitle { font-size: 0.88rem; color: var(--text-light); margin: 0 0 var(--space-md); }
.balkon-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.balkon-price { font-size: 1.8rem; font-weight: 700; color: var(--green-deep); font-family: var(--font-headline); }
.balkon-stars { font-size: 1rem; color: var(--gold); }
.balkon-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.b-spec {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 8px 10px;
  text-align: center;
}
.b-spec__label { font-size: 0.7rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 2px; }
.b-spec__val { font-size: 0.88rem; font-weight: 600; color: var(--green-deep); }
.balkon-rec-card__ctas { display: flex; gap: var(--space-md); flex-wrap: wrap; }

@media (max-width: 900px) {
  .balkon-hero__inner { grid-template-columns: 1fr; }
  .balkon-hero__img-box { display: none; }
  .balkon-rec-card { grid-template-columns: 1fr; }
  .balkon-rec-card__img { min-height: 200px; }
  .balkon-specs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .balkon-hero__stats { gap: var(--space-lg); }
  .balkon-price { font-size: 1.5rem; }
}

/* ── Page: kontakt.html ─────────────────────────── */
.kontakt-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  padding: 3rem 0 4rem;
  align-items: start;
}
@media (max-width: 800px) {
  .kontakt-layout { grid-template-columns: 1fr; }
}

/* Form */
.kontakt-form { background: #fff; border: 1px solid #e0e8e2; border-radius: .5rem; padding: 2rem; }
.kontakt-form h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  color: var(--green-deep);
  margin: 0 0 1.25rem;
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-weight: 600;
  color: var(--green-deep);
  margin-bottom: .4rem;
  font-size: .9rem;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: .65rem .9rem;
  border: 1.5px solid #cdd8cf;
  border-radius: .4rem;
  font-size: .95rem;
  font-family: inherit;
  color: #333;
  background: #fff;
  transition: border-color .2s;
  box-sizing: border-box;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--green-light);
  box-shadow: 0 0 0 3px rgba(74,140,92,.15);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.form-submit { margin-top: .25rem; }
.form-submit .btn {
  width: 100%;
  text-align: center;
  padding: .85rem 1.5rem;
  font-size: 1rem;
}
.form-note { font-size: .8rem; color: #888; margin-top: .75rem; text-align: center; }
.form-note a { color: var(--green-light); }

/* Info side */
.kontakt-info { display: flex; flex-direction: column; gap: 1.25rem; }
.info-card {
  background: #fff;
  border: 1px solid #e0e8e2;
  border-radius: .5rem;
  padding: 1.25rem 1.5rem;
}
.info-card h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--green-deep);
  margin: 0 0 .6rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.info-card p { margin: 0; font-size: .88rem; color: #555; line-height: 1.7; }
.info-card a { color: var(--green-light); }
.info-card--green { background: var(--green-pale); border-color: var(--green-light); }
.response-time { display: inline-block; background: var(--green-deep); color: #fff; font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 1rem; margin-top: .4rem; }

/* ── index.html (hochbeete) ───────────────────────────── */

/* Seiten-spezifische Styles */
.filter-bar {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-2xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: calc(var(--nav-height) + 12px);
  z-index: 100;
}

.filter-bar__label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

.filter-bar__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  flex: 1;
}

.filter-pill {
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--border-light);
  background: var(--white);
  color: var(--text-muted);
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.filter-pill:hover {
  border-color: var(--green-light);
  color: var(--green-light);
}

.filter-pill.is-active {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--white);
}

.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--gold);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 4px;
}

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--green-pale);
  color: var(--green-mid);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.section-intro {
  padding: var(--space-2xl) 0 var(--space-lg);
  border-top: 3px solid var(--green-light);
}

.section-intro__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.section-intro__icon {
  font-size: 2rem;
  width: 56px;
  height: 56px;
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-intro__text {
  font-size: 0.9rem;
  color: var(--text-light);
  max-width: 700px;
}

.no-results {
  text-align: center;
  padding: var(--space-3xl);
  color: var(--text-muted);
  display: none;
}

.no-results.is-visible { display: block; }

@media (max-width: 768px) {
  .filter-bar {
    position: static;
    padding: var(--space-sm) var(--space-md);
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: var(--space-lg);
    gap: var(--space-sm);
  }
  .filter-bar__label { display: none; } /* Spart Platz auf Mobile */
  .filter-bar__pills {
    flex-wrap: nowrap;           /* Keine Zeilenumbrüche */
    overflow-x: auto;            /* Horizontal scrollbar */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox: keine sichtbare Scrollbar */
    padding-bottom: 4px;         /* Verhindert abgeschnittene Schatten */
  }
  .filter-bar__pills::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .filter-pill { flex-shrink: 0; } /* Pills dürfen nicht schrumpfen */
}

/* ── Page: hochbeet-bewaesserung.html ─────────────────────────── */
.system-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
  border-top: 4px solid var(--green-light);
}
.system-card h3 { color: var(--green-deep); margin: 0 0 var(--space-sm); }
.system-card .system-meta { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); font-size: 0.82rem; }
.system-badge { background: var(--green-pale); color: var(--green-deep); padding: 2px 10px; border-radius: 20px; font-weight: 600; }
.system-badge--gold { background: #fdf6e3; color: #8a6914; }

.water-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}
.water-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  border-top: 3px solid var(--green-light);
}
.water-card__icon { font-size: 2rem; display: block; margin-bottom: var(--space-sm); }
.water-card__val { font-family: var(--font-headline); font-size: 1.4rem; font-weight: 700; color: var(--green-deep); display: block; }
.water-card__label { font-size: 0.8rem; color: var(--text-light); }

.tip-box {
  background: #fef3f2;
  border-left: 4px solid #c04a2a;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-md) 0;
}
.tip-box h4 { color: #c04a2a; margin: 0 0 var(--space-xs); font-size: 0.95rem; }
.tip-box p { color: var(--text-light); margin: 0; font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 600px) {
  .water-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Page: hochbeet-balkon.html ─────────────────────────── */
.tipp-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
  border-left: 4px solid var(--green-light);
}
.tipp-card h3 { color: var(--green-deep); margin: 0 0 var(--space-sm); font-size: 1rem; }
.tipp-card p { color: var(--text-light); font-size: 0.91rem; margin: 0; line-height: 1.7; }
.tipp-card ul { margin: var(--space-sm) 0 0; padding-left: var(--space-lg); }
.tipp-card ul li { font-size: 0.91rem; color: var(--text-light); line-height: 1.75; margin-bottom: 4px; }

.gewicht-table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: 0.88rem; }
.gewicht-table th { background: var(--green-deep); color: white; padding: var(--space-sm) var(--space-md); text-align: left; }
.gewicht-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-light); color: var(--text-light); }
.gewicht-table tr:nth-child(even) td { background: var(--green-pale); }

/* ── Page: index.html (Homepage) ─────────────────────────── */
/* Eyebrow label */
.v1-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-light);margin-bottom:.5rem;}

/* ── Product grid ── */
.v1-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media(max-width:900px){.v1-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.v1-grid{grid-template-columns:1fr;}}
.v1-card{border:1px solid var(--border-light);border-radius:var(--radius-lg);background:#fff;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s,transform .2s;}
.v1-card:hover{box-shadow:0 6px 24px rgba(27,58,40,.12);transform:translateY(-2px);}
.v1-card__img{background:#fff;display:flex;align-items:center;justify-content:center;padding:1.5rem;min-height:160px;position:relative;border-bottom:1px solid var(--border-light);}
.v1-badge{position:absolute;top:.75rem;left:.75rem;font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:100px;line-height:1;}
.v1-badge--gold{background:#fef3c7;color:#92400e;}
.v1-badge--green{background:#d1fae5;color:#065f46;}
.v1-badge--orange{background:#ffedd5;color:#9a3412;}
.v1-badge--red{background:#fee2e2;color:#991b1b;}
.v1-badge--brown{background:#fef9c3;color:#713f12;}
.v1-card__body{padding:1rem 1.25rem 1.25rem;display:flex;flex-direction:column;flex:1;}
.v1-card__name{font-size:1rem;font-weight:700;color:var(--green-deep);margin-bottom:.5rem;}
.v1-stars{color:var(--gold);font-size:.9rem;margin-bottom:.5rem;letter-spacing:.05em;}
.v1-specs{display:grid;grid-template-columns:1fr 1fr;gap:.375rem .75rem;margin-bottom:.75rem;}
.v1-spec{font-size:.775rem;color:var(--text-light);}
.v1-spec strong{display:block;color:var(--text-dark);font-weight:600;font-size:.775rem;}
.v1-price{font-size:1.25rem;font-weight:700;color:var(--green-deep);margin-bottom:.75rem;}
.v1-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:auto;}

/* ── Benefit tiles ── */
.v1-bene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
@media(max-width:900px){.v1-bene-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.v1-bene-grid{grid-template-columns:1fr;}}
.v1-bene-card{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;}
.v1-bene-icon{font-size:1.75rem;line-height:1;}
.v1-bene-card h3{font-size:.975rem;color:var(--green-deep);margin:0;}
.v1-bene-card p{font-size:.85rem;color:var(--text-light);margin:0;}

/* ── Plant tiles ── */
.v1-plant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
@media(max-width:900px){.v1-plant-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.v1-plant-grid{grid-template-columns:1fr;}}
.v1-plant-card{background:var(--green-pale);border-radius:var(--radius-lg);padding:1.25rem;display:flex;align-items:flex-start;gap:.875rem;}
.v1-plant-icon{font-size:1.75rem;line-height:1;flex-shrink:0;}
.v1-plant-card h3{font-size:.9rem;font-weight:700;color:var(--green-deep);margin:0 0 .2rem;}
.v1-plant-card p{font-size:.8rem;color:var(--text-light);margin:0;}

/* ── Saisonkalender ── */
.v1-cal-info{background:linear-gradient(135deg,var(--green-deep),var(--green-mid));color:#fff;border-radius:var(--radius-lg);padding:1.5rem 1.75rem;margin-bottom:1.5rem;display:flex;align-items:flex-start;gap:1rem;}
.v1-cal-info p{margin:0;font-size:.9rem;color:rgba(255,255,255,.85);}
.v1-cal-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.v1-cal{width:100%;border-collapse:collapse;font-size:.8rem;min-width:560px;}
.v1-cal th,.v1-cal td{padding:.45rem .5rem;text-align:center;border-bottom:1px solid var(--border-light);}
.v1-cal th{background:var(--green-deep);color:#fff;font-weight:600;font-size:.75rem;position:sticky;top:0;z-index:2;}
.v1-cal th:first-child,.v1-cal td:first-child{text-align:left;padding-left:.75rem;white-space:nowrap;font-weight:600;color:var(--green-deep);}
.v1-cal th:first-child{color:#fff;}
.v1-cal tr:nth-child(even) td{background:#f8fbf9;}
.v1-cal td.g{background:#d1fae5;color:#065f46;font-weight:700;}
.v1-cal td.r{background:#fee2e2;color:#991b1b;font-weight:700;}
.v1-cal td.y{background:#fef3c7;color:#92400e;font-weight:700;}
.v1-cal-legend{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:.875rem;font-size:.8rem;}
.v1-cal-legend span{display:flex;align-items:center;gap:.375rem;}
.v1-cal-legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.v1-cal-legend .dot-y{background:#c59b3a;}
.v1-cal-legend .dot-g{background:#059669;}
.v1-cal-legend .dot-r{background:#dc2626;}

/* ── Pest section ── */
.v1-pest-section{background:linear-gradient(135deg,var(--green-deep) 0%,#0f2218 100%);color:#fff;}
.v1-pest-section .section__title,.v1-pest-section .section__subtitle{color:#fff;}
.v1-pest-section .section__subtitle{color:rgba(255,255,255,.75);}
.v1-pest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
@media(max-width:900px){.v1-pest-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.v1-pest-grid{grid-template-columns:1fr;}}
.v1-pest-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:1.25rem 1rem;display:flex;flex-direction:column;gap:.5rem;}
.v1-pest-icon{font-size:1.75rem;line-height:1;}
.v1-pest-card h3{font-size:.9rem;font-weight:700;color:#fff;margin:0;}
.v1-pest-card p{font-size:.8rem;color:rgba(255,255,255,.75);margin:0;}

/* ── Page: hochbeet-abdeckung.html ─────────────────────────── */
.cover-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
  border-top: 4px solid var(--green-light);
}
.cover-card h3 { color: var(--green-deep); margin: 0 0 var(--space-sm); }
.cover-card .cover-meta { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); font-size: 0.82rem; }
.cover-badge { background: var(--green-pale); color: var(--green-deep); padding: 2px 10px; border-radius: 20px; font-weight: 600; }
.cover-badge--gold { background: #fdf6e3; color: #8a6914; }

.season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}
.season-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--green-light);
}
.season-card__icon { font-size: 2rem; display: block; margin-bottom: var(--space-sm); }
.season-card h3 { color: var(--green-deep); font-size: 1rem; margin-bottom: var(--space-sm); }
.season-card p { font-size: 0.88rem; color: var(--text-light); margin: 0; line-height: 1.6; }
.season-card ul { padding-left: var(--space-lg); margin: var(--space-sm) 0 0; }
.season-card li { font-size: 0.86rem; color: var(--text-light); line-height: 1.6; }

@media (max-width: 600px) {
  .season-grid { grid-template-columns: 1fr; }
}

/* ── Page: hochbeet-aufbauen.html ─────────────────────────── */
.step-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
  border-left: 4px solid var(--green-light);
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}
.step-box__num {
  background: var(--green-deep);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.step-box__content h3 { color: var(--green-deep); margin: 0 0 var(--space-sm); font-size: 1.05rem; }
.step-box__content p { color: var(--text-light); font-size: 0.92rem; margin: 0 0 var(--space-sm); line-height: 1.7; }
.step-box__content ul { margin: var(--space-sm) 0 0; padding-left: var(--space-lg); }
.step-box__content ul li { font-size: 0.91rem; color: var(--text-light); line-height: 1.75; margin-bottom: 4px; }

/* ── Page: hochbeete/cortenstahl.html ─────────────────────────── */
.corten-hero {
  background: linear-gradient(135deg, #5a3a1a 0%, #8b5e34 50%, #4a2e10 100%);
  color: white;
  padding: var(--space-4xl) 0 var(--space-3xl);
}
.corten-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xl);
  align-items: center;
}
.corten-hero h1 {
  color: white;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: var(--space-md);
}
.corten-hero__sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: var(--space-xl);
  max-width: 580px;
}
.corten-hero p { color: rgba(255,255,255,0.88); }
.corten-hero__stats {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.corten-stat {
  text-align: center;
}
.corten-stat__val {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 700;
  color: white;
  display: block;
}
.corten-stat__label {
  font-size: 0.75rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.corten-hero__img-box {
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
  min-width: 180px;
}
.corten-hero__img-box img {
  width: 180px;
  height: auto;
  border-radius: var(--radius);
}
.corten-hero__img-box p { font-size: 0.85rem; opacity: 0.8; margin: var(--space-sm) 0 0; }

.empfehlung-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
  border-left: 4px solid var(--green-light);
}
.empfehlung-card h3 { color: var(--green-deep); margin: 0 0 var(--space-xs); font-size: 1.1rem; }
.empfehlung-card .empf-meta { font-size: 0.82rem; color: var(--text-light); margin-bottom: var(--space-md); }
.empfehlung-card .empf-price { font-size: 1.3rem; font-weight: 700; color: var(--green-deep); font-family: var(--font-headline); }

@media (max-width: 900px) {
  .corten-hero__inner { grid-template-columns: 1fr; }
  .corten-hero__img-box { display: none; }
}

/* ── Page: ratgeber/hochbeet-gemuese.html ─────────────────────────── */
.sort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.sort-card { border: 1px solid #d4e8d4; border-radius: 10px; padding: var(--space-md); background: #fff; }
.sort-card h3 { color: var(--green-deep); margin: 0 0 .4rem; font-size: .95rem; }
.sort-card .sort-name { font-weight: 700; color: #1a3a1a; margin: 0 0 .4rem; }
.sort-card p { font-size: .87rem; color: #555; margin: .2rem 0; }
.sort-tag { display: inline-block; background: #e8f5e9; color: #2a7a3a; border-radius: 4px; font-size: .75rem; padding: .1rem .4rem; margin: .3rem .2rem 0 0; }
.sort-tag.warn { background: #fce4ec; color: #880e4f; }
.gemuese-section { margin: var(--space-xl) 0; }
.section-intro { font-size: 1.05rem; color: #333; margin-bottom: var(--space-md); }

.saison-strip { display: flex; gap: 0; margin: var(--space-md) 0 var(--space-lg); border-radius: 8px; overflow: hidden; font-size: .85rem; }
.saison-strip span { flex: 1; text-align: center; padding: .4rem .2rem; font-weight: 600; }
.saison-strip .s-main { background: var(--green-deep); color: #fff; }
.saison-strip .s-ok { background: #81c784; color: #fff; }
.saison-strip .s-low { background: #e8f5e9; color: #555; }

@media(max-width: 600px) {
  .sort-grid { grid-template-columns: 1fr; }
  .saison-strip { font-size: .75rem; }
}

/* ── Page: hochbeet-pflanzen.html ─────────────────────────── */
/* Page-specific plant cards (different from consolidated .plant-card) */
.plant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.plant-card { border: 1px solid #d4e8d4; border-radius: 10px; padding: var(--space-md); background: #fff; }
.plant-card h3 { color: var(--green-deep); margin: 0 0 .5rem; font-size: 1rem; }
.plant-card .plant-emoji { font-size: 2rem; margin-bottom: .5rem; display: block; }
.plant-card p { font-size: .88rem; color: #555; margin: .25rem 0; }
.plant-card .plant-tag { display: inline-block; background: #e8f5e9; color: #2a7a3a; border-radius: 4px; font-size: .75rem; padding: .1rem .4rem; margin-top: .4rem; }

.misch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-md) 0; }
.misch-good, .misch-bad { border-radius: 8px; padding: var(--space-md); }
.misch-good { background: #e8f5e9; border: 1px solid #a5d6a7; }
.misch-bad { background: #fce4ec; border: 1px solid #f48fb1; }
.misch-good h4 { color: #2a7a3a; margin: 0 0 .5rem; }
.misch-bad h4 { color: #c04a2a; margin: 0 0 .5rem; }
.misch-good ul, .misch-bad ul { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.cat-section { margin: var(--space-lg) 0; }
.cat-label { display: inline-block; background: var(--green-deep); color: #fff; border-radius: 4px; padding: .2rem .6rem; font-size: .8rem; font-weight: 600; margin-bottom: var(--space-sm); text-transform: uppercase; letter-spacing: .04em; }
.cat-label.kraeuter { background: #7b5e00; }
.cat-label.blumen { background: #880e4f; }

@media(max-width: 600px) {
  .plant-grid { grid-template-columns: 1fr; }
  .misch-grid { grid-template-columns: 1fr; }
}

/* ── Page: ratgeber/hochbeet-befuellen.html ─────────────────────────── */
.schicht-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-md) 0;
  border-left: 5px solid var(--green-light);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.schicht-card__num {
  background: var(--green-deep);
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.schicht-card__body h3 { color: var(--green-deep); margin: 0 0 4px; font-size: 1rem; }
.schicht-card__body .schicht-meta { font-size: 0.82rem; color: var(--green-light); font-weight: 600; margin-bottom: var(--space-sm); }
.schicht-card__body p { color: var(--text-light); font-size: 0.91rem; margin: 0; line-height: 1.7; }

.menge-table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: 0.88rem; }
.menge-table th { background: var(--green-deep); color: white; padding: var(--space-sm) var(--space-md); text-align: left; }
.menge-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-light); color: var(--text-light); }
.menge-table tr:nth-child(even) td { background: var(--green-pale); }

@media (max-width: 900px) {
  .schicht-card { grid-template-columns: 1fr; }
  .schicht-card__num { width: 36px; height: 36px; font-size: 0.9rem; }
}

/* ── Page: ratgeber/hochbeet-schneckenschutz.html ─────────────────────────── */
.method-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin: var(--space-lg) 0;
  border-top: 4px solid var(--green-light);
}
.method-card h3 { color: var(--green-deep); margin: 0 0 var(--space-sm); }
.method-card .method-meta { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-md); font-size: 0.82rem; }
.method-badge { background: var(--green-pale); color: var(--green-deep); padding: 2px 10px; border-radius: 20px; font-weight: 600; }
.method-badge--red { background: #fef3f2; color: #c04a2a; }
.method-badge--gold { background: #fdf6e3; color: #8a6914; }

.myth-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding: var(--space-lg);
  margin: var(--space-md) 0;
  border-radius: var(--radius);
  align-items: start;
}
.myth-card--true { background: var(--green-pale); border-left: 4px solid var(--green-mid); }
.myth-card--false { background: #fef3f2; border-left: 4px solid #c04a2a; }
.myth-card__icon { font-size: 1.5rem; }
.myth-card h4 { margin: 0 0 var(--space-xs); font-size: 0.95rem; }
.myth-card p { margin: 0; font-size: 0.88rem; color: var(--text-light); line-height: 1.6; }

.strategy-step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin: var(--space-md) 0;
  padding: var(--space-lg);
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--green-light);
}
.strategy-step__num {
  background: var(--green-deep);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 1.2rem;
  font-weight: 700;
}
.strategy-step h4 { color: var(--green-deep); margin: 0 0 var(--space-xs); }
.strategy-step p { color: var(--text-light); margin: 0; font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 600px) {
  .strategy-step { grid-template-columns: 1fr; }
  .myth-card { grid-template-columns: 1fr; }
}

/* ── Page: hochbeet-wintergemuese.html ─────────────────────────── */
.gemuese-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.gemuese-card { border-radius: 10px; padding: var(--space-md); background: #fff; border: 1px solid var(--border-light); }
.gemuese-card h3 { color: var(--green-deep); margin: 0 0 .4rem; font-size: .95rem; }
.gemuese-card .frost-level { display: inline-block; border-radius: 4px; font-size: .75rem; padding: .15rem .5rem; margin-bottom: .5rem; font-weight: 700; }
.frost-sehr-robust { background: #e3f2fd; color: #0d47a1; }
.frost-robust { background: #e8f5e9; color: #1b5e20; }
.frost-mittel { background: #fff8e1; color: #e65100; }
.gemuese-card p { font-size: .87rem; color: #555; margin: .25rem 0; }

.schutz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin: var(--space-md) 0; }
.schutz-card { border-radius: 8px; padding: var(--space-md); border: 1px solid #e0e0e0; background: #fff; }
.schutz-card h4 { margin: 0 0 .5rem; color: var(--green-deep); }
.schutz-card p { font-size: .88rem; color: #555; margin: .25rem 0; }
.schutz-card .pros { color: #2a7a3a; font-size: .85rem; }
.schutz-card .cons { color: #c04a2a; font-size: .85rem; }

@media(max-width: 600px) {
  .gemuese-cards { grid-template-columns: 1fr 1fr; }
  .schutz-grid { grid-template-columns: 1fr; }
}

/* ── Page: vergleich.html ─────────────────────────── */
.filter-row{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center;background:var(--white);border:1px solid var(--border-light);border-radius:var(--radius-xl);padding:var(--space-lg) var(--space-xl);margin-bottom:var(--space-2xl);box-shadow:var(--shadow-sm);}
.filter-row__group{display:flex;align-items:center;gap:var(--space-sm);}
.filter-row__label{font-size:0.8rem;font-weight:700;color:var(--text-muted);white-space:nowrap;}
.filter-select{padding:0.4rem 0.8rem;border:1px solid var(--border);border-radius:var(--radius);font-size:0.875rem;font-family:var(--font-body);color:var(--text);background:var(--white);cursor:pointer;}
.filter-select:focus{outline:2px solid var(--green-light);outline-offset:2px;}
.best-card{background:var(--white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md);}
.best-card__icon{font-size:2rem;}
.best-card__title{font-family:var(--font-headline);font-size:1.1rem;font-weight:700;color:var(--green-deep);}
.best-card__text{font-size:0.875rem;color:var(--text-light);line-height:1.6;flex:1;}
.best-card__price{font-family:var(--font-headline);font-size:1.3rem;font-weight:700;color:var(--green-deep);}
.hidden{display:none!important;}

/* ── Page: impressum.html ─────────────────────────── */
.affiliate-notice {
  background: var(--green-pale);
  border-left: 4px solid var(--green-light);
  border-radius: 0 .5rem .5rem 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.affiliate-notice p { margin: 0; font-size: .92rem; }

/* v2026e */

/* ─── Affiliate Disclosure (Inline) ───────────────────────────────────── */
.disclosure--inline {
  background: #fffbf0;
  border: 1px solid #e8d5a0;
  border-left: 4px solid var(--gold);
  padding: 0.75rem 1rem;
  border-radius: 0 6px 6px 0;
  margin: 0.5rem 0 1.5rem 0;
  font-size: 0.875rem;
  color: var(--text-light);
}
.disclosure--inline a { color: var(--green-mid); }
.disclosure--inline p { margin: 0; }

/* ─── Artikel Aktualisierungs-Datum ───────────────────────────────────── */
.article-updated {
  color: var(--text-light);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  padding-top: 1rem;
}

/* ─── Focus-Visible Indikatoren (WCAG 2.1 AA) ─────────────────────────── */
:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn:focus-visible,
.btn--primary:focus-visible,
.btn--secondary:focus-visible,
.btn--gold:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(45, 90, 61, 0.18);
}
.nav-link:focus-visible,
.dropdown__link:focus-visible,
.mobile-nav__link:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 2px;
  border-radius: 4px;
  background: var(--green-pale);
}
.faq__question:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 2px;
}
/* Focus nur bei Tastaturnavigation, nicht bei Mausklick */
:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Testsieger-Badge / Award-Badge ──────────────────────────────────── */
.award-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #c8960c 0%, #f0b429 50%, #c8960c 100%);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(200, 150, 12, 0.35);
  white-space: nowrap;
}
.award-badge svg,
.award-badge .badge-icon { width: 1em; height: 1em; }

.award-banner {
  background: linear-gradient(135deg, #fffbf0 0%, #fff8e1 100%);
  border: 2px solid #c8960c;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin: 1rem 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.award-banner__icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}
.award-banner__text strong {
  color: #7a5c1e;
  display: block;
  font-size: 1.05rem;
}
.award-banner__text span {
  font-size: 0.875rem;
  color: var(--text-light);
}

/* === AUDIT FIXES 2026-03-28 === */

/* 1A: Ratgeber-Artikel Overflow */
.ratg-article { max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
.ratg-article * { max-width: 100%; box-sizing: border-box; }

/* 1B: Tabellen */
.table-wrapper { max-width: 100%; }

/* 1C: Section-Nav Overflow */
.section-nav__list { flex-wrap: wrap; min-width: 0; }

/* 1D: Buttons auf Mobile */
@media (max-width: 768px) {
  .btn { max-width: 100%; box-sizing: border-box; white-space: normal; word-break: break-word; }
}

/* 3A: btn--primary Kontrast (Gold-Hintergrund → dunkler Text) */
.btn--primary { color: #1a1a1a; }
.btn--primary:hover { color: #1a1a1a; }

/* 3B: btn--secondary Kontrast */
.btn--secondary { background: #2D6E40; border-color: #2D6E40; }

/* 3C: tip-box strong Kontrast */
.tip-box strong { color: #BF4400; }

/* 4A: Touch-Targets min 44px */
@media (max-width: 768px) {
  .breadcrumbs__link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px; }
  .site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
  .site-logo { min-height: 44px; }
}

/* 4B: Schriftgroesse min. auf Mobile */
@media (max-width: 768px) {
  .breadcrumbs, .breadcrumbs__link, .breadcrumbs__current { font-size: 16px; }
  .comparison-table td, .comparison-table th, .data-table td, .data-table th { font-size: 14px; }
}

/* 4C: Scroll-Hinweis fuer Tabellen */
.table-wrapper::after {
  content: '\2190 Nach rechts wischen \2192';
  display: block; font-size: 0.75rem; color: var(--text-muted);
  text-align: center; padding: 4px;
}
@media (min-width: 769px) { .table-wrapper::after { display: none; } }

/* 4D: Skip-to-Content Link (WCAG 2.1 AA) */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  background: var(--green-deep, #1b3a28);
  color: #fff;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  z-index: 99999;
  border-radius: 0 0 8px 8px;
  transition: transform 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.skip-link:focus {
  transform: translateX(-50%) translateY(0);
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
/* Auf Mobile sinnlos (kein Tab-Key) — verstecken */
@media (max-width: 900px) {
  .skip-link { display: none; }
}

/* 4E: Nav-Link Touch-Target (44px) */
.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.dropdown__link {
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* 4F: Back-to-Top Button */
#back-to-top {
  position: fixed;
  bottom: 32px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--gold, #C8A96E);
  color: #1a1a1a;
  border: none;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#back-to-top.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#back-to-top:hover {
  background: var(--gold-dark, #b8944f);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  #back-to-top { bottom: 20px; right: 16px; width: 44px; height: 44px; }
}

/* 4G: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #back-to-top { transition: none; }
}

/* === W2: ACCESSIBILITY FIXES 2026-03-28 === */

/* W2-A: inert wird via JS gesetzt — kein extra CSS nötig */

/* W2-B: Farbkontrast — Breadcrumbs (war #5a6b61 = ~3.8:1, jetzt #3f5248 = ~6.3:1) */
.breadcrumbs__list,
.breadcrumbs__link,
.breadcrumbs__current {
  color: #3f5248;
}
.breadcrumbs__link:hover,
.breadcrumbs__link:focus {
  color: var(--green-mid);
}

/* W2-B: Farbkontrast — Gold-Badge (war #a07d28 ~3.2:1, jetzt #7a5510 ~4.6:1) */
.badge--gold {
  background: rgba(197, 155, 58, 0.10);
  color: #7a5510;
  border-color: rgba(197, 155, 58, 0.25);
}

/* W2-C: Link-Unterstriche in Artikel-Content (WCAG 2.4.4) */
.ratg-article a:not(.btn):not([class*="badge"]):not([class*="breadcrumb"]):not([class*="nav"]):not([class*="footer"]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── W8: Kontaktformular ─────────────────────────────────────────────── */
.form-group {
  margin-bottom: 1.25rem;
}
.form-label {
  display: block;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: .375rem;
  font-size: .9rem;
}
.form-required {
  color: var(--green-mid);
}
.form-input {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid #d4e4da;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-dark);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.form-input:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(79, 143, 104, .15);
}
.form-textarea {
  resize: vertical;
  min-height: 130px;
}
.kontakt-status--ok {
  background: #e8f5e9;
  border: 1.5px solid #a5d6a7;
  color: #2e7d32;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}
.kontakt-status--error {
  background: #fdecea;
  border: 1.5px solid #ef9a9a;
  color: #c62828;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

/* ============================================================
   ZENTRALES MOBILE DESIGN SYSTEM — GartenSpot.de
   Alle globalen Mobile-Fixes an einem Ort.
   Breakpoints: 480px | 600px | 768px | 900px | 1024px
   ============================================================ */

/* ── Globale Overflow-Sicherheit ─────────────────────────── */
* { box-sizing: border-box; }

/* ── Alle Tabellen scrollen auf Mobile automatisch ───────── */
/* Kein HTML-Wrapper nötig — gilt für alle Seiten zentral   */
@media (max-width: 768px) {
  .vergleich-table,
  .menge-table,
  .data-table,
  .empl-table,
  .comparison-table,
  .ratg-table,
  table:not(.v1-cal) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ── Grid-Klassen Mobile ─────────────────────────────────── */
@media (max-width: 480px) {
  /* Alle Standard-Grids auf 1 Spalte */
  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }

  /* Utility-Grids */
  .checklist { grid-template-columns: 1fr; }
  .specs-mini { grid-template-columns: 1fr 1fr; }
}

/* ── Article-Layout Overflow-Fix ─────────────────────────── */
@media (max-width: 768px) {
  .article-layout {
    overflow-x: hidden;
    max-width: 100%;
  }
}

/* ── Zubehör Hero: Filter-Buttons Wrap-Fix ───────────────── */
@media (max-width: 480px) {
  .zub-hero__filters,
  .zub-page-hero__filters { flex-wrap: wrap; gap: 6px; }
  .zub-hero__filter { font-size: 0.75rem; padding: 4px 10px; }
}

/* ── Ratgeber Hero Meta: Wrap auf schmalem Mobile ─────────── */
@media (max-width: 480px) {
  .ratg-hero__meta { flex-wrap: wrap; gap: 4px; justify-content: center; }
}

/* ── Footer: Links Schriftgröße ──────────────────────────── */
@media (max-width: 480px) {
  .footer-links a { font-size: 0.9rem; }
}

/* ── Scroll-Hinweis für alle scrollbaren Tabellen ─────────── */
.table-scroll-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: -0.5rem;
  margin-bottom: var(--space-sm);
}
@media (min-width: 769px) { .table-scroll-hint { display: none; } }