/* ── Gilch Quarzsande — Theme CSS ──────────────────────── */
/* Quarzsandwerk, Kieswerk, Deponie                        */
/* CI: Sand-Ocker / Terrakotta, Warm Sand — Helles Theme   */

/* ══════════════════════════════════════════════════════
   0. Self-hosted Fonts (DSGVO-konform)
   ══════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Lato';
  src: url('/shared/fonts/lato/lato-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('/shared/fonts/lato/lato-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('/shared/fonts/playfair-display/playfair-display-variable.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════
   1. Theme Custom Properties
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] {
  /* Farbwelt: Warm Sand — Hell, erdig, einladend */
  --color-primary:        oklch(68% 0.14 75);   /* Sand-Ocker, etwas kraeftiger */
  --color-primary-rgb:    186, 152, 68;
  --color-primary-light:  oklch(75% 0.12 75);
  --color-primary-dark:   oklch(58% 0.16 75);

  --color-secondary:      oklch(52% 0.16 40);   /* Terrakotta, kraeftiger */
  --color-secondary-rgb:  168, 90, 58;
  --color-secondary-light: oklch(58% 0.14 40);
  --color-secondary-dark: oklch(40% 0.16 40);

  --color-accent:         oklch(52% 0.16 40);   /* Terrakotta als Akzent */

  --color-bg:             oklch(97% 0.015 80);  /* Warm Cream-White */
  --color-bg-alt:         oklch(94% 0.02 80);   /* Slightly darker cream */
  --color-bg-card:        oklch(100% 0 0);      /* Pure white cards */
  --color-bg-light:       oklch(25% 0.03 50);   /* Dark Earth (for contrast sections) */
  --color-surface:        oklch(98% 0.01 80);

  --color-text:           oklch(25% 0.03 50);   /* Dark Earth text */
  --color-text-muted:     oklch(45% 0.03 50);   /* Medium */
  --color-text-subtle:    oklch(60% 0.02 50);

  --color-border:         oklch(88% 0.02 75);   /* Light warm border */

  /* Gradients */
  --gradient-primary:     linear-gradient(135deg, oklch(52% 0.16 40), oklch(58% 0.14 40));
  --gradient-hero:        linear-gradient(160deg, oklch(97% 0.015 80) 0%, oklch(94% 0.02 80) 50%, oklch(97% 0.015 80) 100%);
  --gradient-mesh:        radial-gradient(ellipse at 30% 50%, oklch(68% 0.14 75 / 0.04) 0%, transparent 50%),
                          radial-gradient(ellipse at 70% 20%, oklch(52% 0.16 40 / 0.03) 0%, transparent 50%);

  /* Shadows — terracotta-tinted */
  --shadow-glow-sm:       0 0 20px oklch(52% 0.16 40 / 0.06);
  --shadow-glow-md:       0 0 40px oklch(52% 0.16 40 / 0.06);
  --shadow-glow-lg:       0 0 60px oklch(52% 0.16 40 / 0.06);

  /* Glass */
  --glass-bg:             oklch(100% 0 0 / 0.85);
  --glass-border:         oklch(0% 0 0 / 0.06);

  /* Cards */
  --card-bg:              var(--color-bg-card);
  --card-border:          oklch(88% 0.02 75);
  --card-border-hover:    oklch(52% 0.16 40 / 0.3);
  --card-shine:           linear-gradient(135deg, oklch(52% 0.16 40 / 0.04) 0%, transparent 50%);

  /* Formsprache: Warm Sand — leicht gerundet, freundlich */
  --btn-radius:           4px;
  --card-radius:          4px;
  --card-shadow:          0 1px 3px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.04);
  --img-radius:           0;
  --hero-min-height:      85dvh;
  --section-gap:          var(--space-12);

  /* Fonts */
  --font-heading:         'Playfair Display', Georgia, serif;
  --font-body:            'Lato', 'Helvetica Neue', Arial, sans-serif;

  color-scheme: light;
}

/* ══════════════════════════════════════════════════════
   2. Body & Text — Warm Cream Base
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] body {
  background: oklch(97% 0.015 80);
  color: oklch(25% 0.03 50);
}

/* Selection */
[data-theme="gilch-quarzsand-hell"] ::selection {
  background: oklch(52% 0.16 40 / 0.2);
  color: oklch(25% 0.03 50);
}

/* ══════════════════════════════════════════════════════
   3. Navigation — Sticky, Light, Terrakotta-Akzente
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .nav {
  position: sticky;
  top: 0;
  background: oklch(100% 0 0 / 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(88% 0.02 75);
  transition: padding 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

[data-theme="gilch-quarzsand-hell"] .nav.is-scrolled {
  padding-block: var(--space-2);
  background: oklch(100% 0 0 / 0.97);
  box-shadow: 0 2px 16px oklch(0% 0 0 / 0.08);
}

[data-theme="gilch-quarzsand-hell"] .nav__logo-img {
  max-width: 180px;
  height: auto;
}

[data-theme="gilch-quarzsand-hell"] .nav__link {
  color: oklch(40% 0.03 50);
  transition: color 0.2s ease;
}

[data-theme="gilch-quarzsand-hell"] .nav__link:hover,
[data-theme="gilch-quarzsand-hell"] .nav__link.is-active {
  color: oklch(52% 0.16 40);
}

/* Mobile-Nav */
[data-theme="gilch-quarzsand-hell"] .nav__menu {
  background: oklch(100% 0 0);
}

/* ══════════════════════════════════════════════════════
   4. Hero — Sand-Curtain (Fullbleed, diagonaler Gradient)
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain {
  position: relative;
  min-height: 85vh;
  overflow: hidden;
  display: grid;
  grid-template-areas: "hero";
}

[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    35deg,
    oklch(97% 0.015 80) 0%,
    oklch(97% 0.015 80 / 0.85) 35%,
    transparent 65%
  );
  z-index: 2;
  pointer-events: none;
}

/* KRITISCH: Engine z-index Fix — Content ueber Visual */
[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .hero__grid-content {
  grid-area: hero;
  position: relative;
  z-index: 3;
  align-self: end;
  padding: 0 var(--container-padding) var(--space-10);
  max-width: var(--container-max, 1200px);
}

[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .hero__grid-visual {
  grid-area: hero;
  position: relative;
  z-index: 1;
}

[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .hero__grid-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .hero__title {
  color: oklch(25% 0.03 50);
  text-shadow: 0 2px 20px oklch(100% 0 0 / 0.5);
}

[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .hero__subtitle {
  color: oklch(40% 0.03 50);
  font-weight: 400;
}

/* Hero-Buttons */
[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .btn--primary {
  background: oklch(52% 0.16 40);
  color: #fff;
  font-weight: 700;
}

[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .btn--primary:hover {
  background: oklch(58% 0.14 40);
}

[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .btn--outline {
  color: oklch(25% 0.03 50);
  border-color: oklch(25% 0.03 50 / 0.3);
}

[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .btn--outline:hover {
  background: oklch(25% 0.03 50 / 0.06);
  border-color: oklch(25% 0.03 50 / 0.6);
}

/* Badge im Hero */
[data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .badge {
  background: oklch(100% 0 0 / 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid oklch(0% 0 0 / 0.1);
  color: oklch(25% 0.03 50);
}

/* ══════════════════════════════════════════════════════
   5. Page Hero — Unterseiten (kleiner, dunkles Overlay fuer Bildkontrast)
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .hero--page {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

[data-theme="gilch-quarzsand-hell"] .hero--page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(25% 0.03 50 / 0.7) 0%,
    oklch(25% 0.03 50 / 0.3) 100%
  );
  z-index: 2;
  pointer-events: none;
}

[data-theme="gilch-quarzsand-hell"] .hero--page .hero__grid-content {
  position: relative;
  z-index: 3;
  padding-bottom: var(--space-8);
}

[data-theme="gilch-quarzsand-hell"] .hero--page .hero__grid-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
}

[data-theme="gilch-quarzsand-hell"] .hero--page .hero__grid-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-theme="gilch-quarzsand-hell"] .hero--page .hero__title {
  color: #fff;
  font-size: var(--text-4xl);
}

/* ══════════════════════════════════════════════════════
   6. Sections — Alternierend Light / Dark Accent
   ══════════════════════════════════════════════════════ */

/* Light Default */
[data-theme="gilch-quarzsand-hell"] .section--earth-dark {
  background: oklch(97% 0.015 80);
  color: oklch(25% 0.03 50);
}

/* Slightly darker cream */
[data-theme="gilch-quarzsand-hell"] .section--bg-alt {
  background: oklch(94% 0.02 80);
  color: oklch(25% 0.03 50);
}

/* Cream Section — WIRD Dark Accent (invertiert) */
[data-theme="gilch-quarzsand-hell"] .section--cream {
  background: oklch(25% 0.03 50);
  color: oklch(92% 0.01 75);
}

[data-theme="gilch-quarzsand-hell"] .section--cream .section-header__title,
[data-theme="gilch-quarzsand-hell"] .section--cream h2,
[data-theme="gilch-quarzsand-hell"] .section--cream h3 {
  color: oklch(92% 0.01 75);
}

[data-theme="gilch-quarzsand-hell"] .section--cream .section-header__label {
  color: oklch(68% 0.14 75);
}

[data-theme="gilch-quarzsand-hell"] .section--cream p {
  color: oklch(75% 0.02 60);
}

[data-theme="gilch-quarzsand-hell"] .section--cream .card {
  background: oklch(30% 0.03 50);
  border-color: oklch(38% 0.03 50);
}

/* Terrakotta-Band */
[data-theme="gilch-quarzsand-hell"] .section--bg-primary {
  background: var(--gradient-primary);
  color: #fff;
}

[data-theme="gilch-quarzsand-hell"] .section--bg-primary .section-header__label {
  color: oklch(100% 0 0 / 0.6);
}

[data-theme="gilch-quarzsand-hell"] .section--bg-primary .btn--primary {
  background: #fff;
  color: oklch(45% 0.14 40);
}

/* Angled Sections — Schraege Kante */
[data-theme="gilch-quarzsand-hell"] .section--angled {
  clip-path: polygon(0 0, 100% 3vw, 100% 100%, 0 calc(100% - 3vw));
  margin-top: -3vw;
  padding-top: calc(var(--space-10) + 3vw);
  padding-bottom: calc(var(--space-10) + 3vw);
}

/* ══════════════════════════════════════════════════════
   7. Stoerer / Ribbons
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .stoerer {
  position: absolute;
  background: oklch(55% 0.14 40);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-5);
  z-index: 10;
  transform: rotate(-3deg);
}

[data-theme="gilch-quarzsand-hell"] .stoerer--corner {
  top: var(--space-5);
  right: calc(-1 * var(--space-4));
  transform: rotate(3deg);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

[data-theme="gilch-quarzsand-hell"] .stoerer--inline {
  position: relative;
  display: inline-block;
  transform: rotate(-1deg);
}

/* ══════════════════════════════════════════════════════
   8. Product Tables
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .product-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

[data-theme="gilch-quarzsand-hell"] .product-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: oklch(94% 0.02 80);
  color: oklch(52% 0.16 40);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-bottom: 2px solid oklch(52% 0.16 40);
}

[data-theme="gilch-quarzsand-hell"] .product-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid oklch(90% 0.02 80);
  color: oklch(40% 0.03 50);
}

[data-theme="gilch-quarzsand-hell"] .product-table td:first-child {
  border-left: 3px solid oklch(52% 0.16 40);
  font-weight: 700;
  color: oklch(25% 0.03 50);
}

/* Zebra-Streifen */
[data-theme="gilch-quarzsand-hell"] .product-table tr:nth-child(even) td {
  background: oklch(96% 0.015 80);
}

[data-theme="gilch-quarzsand-hell"] .product-table tr:hover td {
  background: oklch(94% 0.02 80);
}

/* NEU Badge */
[data-theme="gilch-quarzsand-hell"] .product-table__neu {
  display: inline-block;
  background: oklch(55% 0.14 40);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.1em 0.5em;
  margin-left: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ══════════════════════════════════════════════════════
   9. Category Cards
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .category-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}

[data-theme="gilch-quarzsand-hell"] .category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

[data-theme="gilch-quarzsand-hell"] .category-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(15% 0.03 50 / 0.85) 0%, transparent 60%);
  transition: background 0.4s ease;
}

[data-theme="gilch-quarzsand-hell"] .category-card:hover img {
  transform: scale(1.06);
}

[data-theme="gilch-quarzsand-hell"] .category-card:hover::after {
  background: linear-gradient(to top, oklch(15% 0.03 50 / 0.95) 0%, oklch(15% 0.03 50 / 0.2) 80%);
}

[data-theme="gilch-quarzsand-hell"] .category-card__title {
  position: relative;
  z-index: 2;
  padding: var(--space-5);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
}

[data-theme="gilch-quarzsand-hell"] .category-card__subtitle {
  position: relative;
  z-index: 2;
  padding: 0 var(--space-5) var(--space-5);
  color: oklch(72% 0.12 75);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ══════════════════════════════════════════════════════
   10. Deponie-Banner
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .deponie-banner {
  background: linear-gradient(135deg, oklch(55% 0.14 40), oklch(48% 0.12 40));
  color: #fff;
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
}

[data-theme="gilch-quarzsand-hell"] .deponie-banner::before {
  content: '';
  position: absolute;
  top: -2vw;
  left: 0;
  right: 0;
  height: 4vw;
  background: oklch(97% 0.015 80);
  transform: skewY(-1.5deg);
}

[data-theme="gilch-quarzsand-hell"] .deponie-banner::after {
  content: '';
  position: absolute;
  bottom: -2vw;
  left: 0;
  right: 0;
  height: 4vw;
  background: oklch(97% 0.015 80);
  transform: skewY(1.5deg);
}

[data-theme="gilch-quarzsand-hell"] .deponie-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

[data-theme="gilch-quarzsand-hell"] .deponie-banner .btn--white {
  background: #fff;
  color: oklch(45% 0.14 40);
  font-weight: 700;
}

[data-theme="gilch-quarzsand-hell"] .deponie-banner .btn--white:hover {
  background: oklch(95% 0 0);
}

/* ══════════════════════════════════════════════════════
   11. Standort-Cards
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .standort-card {
  background: oklch(100% 0 0);
  border: 1px solid oklch(88% 0.02 75);
  padding: var(--space-6);
  transition: border-color 0.3s ease;
}

[data-theme="gilch-quarzsand-hell"] .standort-card:hover {
  border-color: oklch(52% 0.16 40 / 0.4);
}

[data-theme="gilch-quarzsand-hell"] .standort-card__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: oklch(52% 0.16 40);
  margin-bottom: var(--space-2);
}

[data-theme="gilch-quarzsand-hell"] .standort-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: oklch(25% 0.03 50);
  margin-bottom: var(--space-3);
}

[data-theme="gilch-quarzsand-hell"] .standort-card__address {
  color: oklch(45% 0.03 50);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ══════════════════════════════════════════════════════
   12. Zahlen-Grid / Counter
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .counter {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: oklch(52% 0.16 40);
  line-height: 1;
}

[data-theme="gilch-quarzsand-hell"] .counter__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: oklch(50% 0.03 50);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: var(--space-2);
}

[data-theme="gilch-quarzsand-hell"] .counter__unit {
  font-size: var(--text-2xl);
  color: oklch(52% 0.16 40);
}

/* ══════════════════════════════════════════════════════
   13. Contact Form — Light Theme
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .form__input,
[data-theme="gilch-quarzsand-hell"] .form__textarea {
  background: oklch(97% 0.015 80);
  border: 1px solid oklch(85% 0.02 75);
  color: oklch(25% 0.03 50);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

[data-theme="gilch-quarzsand-hell"] .form__input::placeholder,
[data-theme="gilch-quarzsand-hell"] .form__textarea::placeholder {
  color: oklch(65% 0.02 60);
}

[data-theme="gilch-quarzsand-hell"] .form__input:focus,
[data-theme="gilch-quarzsand-hell"] .form__textarea:focus {
  outline: none;
  border-color: oklch(52% 0.16 40);
  box-shadow: 0 0 0 3px oklch(52% 0.16 40 / 0.12);
}

[data-theme="gilch-quarzsand-hell"] .form__label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: oklch(35% 0.03 50);
  margin-bottom: var(--space-2);
  display: block;
}

/* ══════════════════════════════════════════════════════
   14. Texture Overlay — Sand-Grain auf Sections
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .texture-overlay {
  position: relative;
}

[data-theme="gilch-quarzsand-hell"] .texture-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  z-index: 0;
  mix-blend-mode: overlay;
}

[data-theme="gilch-quarzsand-hell"] .texture-overlay > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════
   15. Cards — White Surface, Subtle Border
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .card {
  background: oklch(100% 0 0);
  border: 1px solid oklch(88% 0.02 75);
  transition: transform 0.4s var(--ease-smooth),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

[data-theme="gilch-quarzsand-hell"] .card:hover {
  transform: translateY(-2px);
  border-color: oklch(52% 0.16 40 / 0.3);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.08);
}

[data-theme="gilch-quarzsand-hell"] .card__icon {
  color: oklch(52% 0.16 40);
}

[data-theme="gilch-quarzsand-hell"] .card__icon--round {
  background: oklch(52% 0.16 40 / 0.08);
}

[data-theme="gilch-quarzsand-hell"] .card__title {
  color: oklch(25% 0.03 50);
}

/* Service Cards mit Bild */
[data-theme="gilch-quarzsand-hell"] .service-card {
  overflow: hidden;
  text-align: left;
}

[data-theme="gilch-quarzsand-hell"] .service-card__image {
  aspect-ratio: 4/3;
  overflow: hidden;
}

[data-theme="gilch-quarzsand-hell"] .service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

[data-theme="gilch-quarzsand-hell"] .service-card:hover .service-card__image img {
  transform: scale(1.05);
}

[data-theme="gilch-quarzsand-hell"] .service-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
}

/* ══════════════════════════════════════════════════════
   16. Buttons
   ══════════════════════════════════════════════════════ */

/* Primary: Terrakotta Background, White Text */
[data-theme="gilch-quarzsand-hell"] .btn--primary {
  background: oklch(52% 0.16 40);
  color: #fff;
  font-weight: 700;
}

[data-theme="gilch-quarzsand-hell"] .btn--primary:hover {
  background: oklch(58% 0.14 40);
}

/* Outline: Terrakotta Border + Text */
[data-theme="gilch-quarzsand-hell"] .btn--outline {
  border-color: oklch(52% 0.16 40 / 0.4);
  color: oklch(52% 0.16 40);
}

[data-theme="gilch-quarzsand-hell"] .btn--outline:hover {
  background: oklch(52% 0.16 40 / 0.06);
  border-color: oklch(52% 0.16 40);
}

/* Dark Button (was White auf Dark) */
[data-theme="gilch-quarzsand-hell"] .btn--white {
  background: oklch(25% 0.03 50);
  color: #fff;
  font-weight: 700;
}

[data-theme="gilch-quarzsand-hell"] .btn--white:hover {
  background: oklch(30% 0.03 50);
}

/* Terrakotta-Button */
[data-theme="gilch-quarzsand-hell"] .btn--terra {
  background: oklch(55% 0.14 40);
  color: #fff;
  font-weight: 700;
}

[data-theme="gilch-quarzsand-hell"] .btn--terra:hover {
  background: oklch(60% 0.12 40);
}

/* Cream-Sections (now dark): Primary-Button invertiert */
[data-theme="gilch-quarzsand-hell"] .section--cream .btn--primary {
  background: oklch(68% 0.14 75);
  color: oklch(22% 0.03 50);
}

[data-theme="gilch-quarzsand-hell"] .section--cream .btn--primary:hover {
  background: oklch(75% 0.12 75);
}

[data-theme="gilch-quarzsand-hell"] .section--cream .btn--outline {
  border-color: oklch(100% 0 0 / 0.3);
  color: #fff;
}

/* ══════════════════════════════════════════════════════
   17. Section Headers
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .section-header__label {
  color: oklch(52% 0.16 40);
}

[data-theme="gilch-quarzsand-hell"] .section-header__title {
  color: oklch(25% 0.03 50);
}

/* ══════════════════════════════════════════════════════
   18. Footer — BLEIBT DUNKEL (visueller Anker)
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .footer--primary {
  background: oklch(20% 0.02 50);
  border-top: 1px solid oklch(30% 0.03 50);
}

[data-theme="gilch-quarzsand-hell"] .footer__title {
  color: oklch(72% 0.12 75);
}

[data-theme="gilch-quarzsand-hell"] .footer__group-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: oklch(65% 0.02 60);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-3);
}

[data-theme="gilch-quarzsand-hell"] .footer__group-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

[data-theme="gilch-quarzsand-hell"] .footer__group-links a {
  color: oklch(70% 0.02 60);
  transition: color 0.2s ease;
  font-size: var(--text-sm);
}

[data-theme="gilch-quarzsand-hell"] .footer__group-links a:hover {
  color: oklch(72% 0.12 75);
}

[data-theme="gilch-quarzsand-hell"] .footer__text {
  color: oklch(80% 0.02 60);
  font-size: var(--text-sm);
}

[data-theme="gilch-quarzsand-hell"] .footer__logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

/* ══════════════════════════════════════════════════════
   19. Scroll Progress — Terrakotta
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .scroll-progress {
  background: oklch(52% 0.16 40);
}

/* ══════════════════════════════════════════════════════
   20. Focus-Visible (WCAG) — Terrakotta Outline
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] :focus-visible {
  outline: 2px solid oklch(52% 0.16 40);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════
   21. CTA-Band
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .cta-band {
  background: linear-gradient(135deg, oklch(55% 0.14 40), oklch(48% 0.12 40));
  color: #fff;
  padding: var(--space-10) 0;
  text-align: center;
}

[data-theme="gilch-quarzsand-hell"] .cta-band .btn--white {
  background: #fff;
  color: oklch(45% 0.14 40);
}

/* ══════════════════════════════════════════════════════
   22. Oeffnungszeiten / Hours Table
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

[data-theme="gilch-quarzsand-hell"] .hours-table td {
  padding: var(--space-2) 0;
  border-bottom: 1px solid oklch(90% 0.02 80);
}

[data-theme="gilch-quarzsand-hell"] .hours-table td:first-child {
  font-weight: 700;
  color: oklch(25% 0.03 50);
  width: 6rem;
}

[data-theme="gilch-quarzsand-hell"] .hours-table td:last-child {
  color: oklch(45% 0.03 50);
}

/* ══════════════════════════════════════════════════════
   23. About — Gilch Gruppe Badge
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .about-group {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: oklch(0% 0 0 / 0.03);
  border: 1px solid oklch(0% 0 0 / 0.06);
}

[data-theme="gilch-quarzsand-hell"] .about-group__title {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: oklch(50% 0.02 50);
  margin-bottom: var(--space-3);
}

/* ══════════════════════════════════════════════════════
   24. Image Divider
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .image-divider {
  height: 40vh;
  position: relative;
  overflow: hidden;
}

[data-theme="gilch-quarzsand-hell"] .image-divider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-theme="gilch-quarzsand-hell"] .image-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: oklch(97% 0.015 80 / 0.15);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   25. Prose Styles — Default: Dark on Light Background
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .prose {
  font-size: var(--text-base);
  line-height: 1.75;
  color: oklch(40% 0.03 50);
}

[data-theme="gilch-quarzsand-hell"] .prose h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: oklch(52% 0.16 40);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid oklch(88% 0.02 75);
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
}

[data-theme="gilch-quarzsand-hell"] .prose h2:first-child {
  margin-top: 0;
}

[data-theme="gilch-quarzsand-hell"] .prose h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: oklch(35% 0.03 50);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

[data-theme="gilch-quarzsand-hell"] .prose p {
  margin-bottom: 1rem;
}

[data-theme="gilch-quarzsand-hell"] .prose p:last-child {
  margin-bottom: 0;
}

[data-theme="gilch-quarzsand-hell"] .prose strong {
  font-weight: 700;
  color: oklch(25% 0.03 50);
}

[data-theme="gilch-quarzsand-hell"] .prose a {
  color: oklch(52% 0.16 40);
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-theme="gilch-quarzsand-hell"] .prose a:hover {
  text-decoration-thickness: 2px;
}

[data-theme="gilch-quarzsand-hell"] .prose ul,
[data-theme="gilch-quarzsand-hell"] .prose ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

[data-theme="gilch-quarzsand-hell"] .prose li {
  margin-bottom: 0.5rem;
}

[data-theme="gilch-quarzsand-hell"] .prose li::marker {
  color: oklch(52% 0.16 40);
}

/* Cream-Section prose (now dark bg): helle Farben */
[data-theme="gilch-quarzsand-hell"] .section--cream .prose {
  color: oklch(85% 0.02 60);
}

[data-theme="gilch-quarzsand-hell"] .section--cream .prose h2 {
  color: oklch(72% 0.12 75);
  border-bottom-color: oklch(35% 0.03 50);
}

[data-theme="gilch-quarzsand-hell"] .section--cream .prose h3 {
  color: oklch(85% 0.02 60);
}

[data-theme="gilch-quarzsand-hell"] .section--cream .prose strong {
  color: oklch(92% 0.01 75);
}

[data-theme="gilch-quarzsand-hell"] .section--cream .prose a {
  color: oklch(72% 0.12 75);
}

/* Legal-Seiten ohne Hero: kompaktere Ueberschrift */
[data-theme="gilch-quarzsand-hell"] body:not(:has(.hero)) .section-header__title {
  font-size: var(--text-3xl);
  text-wrap: balance;
}

/* ══════════════════════════════════════════════════════
   26. Product Badge (HTML-Klasse product-table__badge)
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .product-table__badge {
  display: inline-block;
  background: oklch(55% 0.14 40);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.1em 0.5em;
  margin-left: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ══════════════════════════════════════════════════════
   27. Section Headings on Light Background
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .section h2,
[data-theme="gilch-quarzsand-hell"] .section h3 {
  color: oklch(25% 0.03 50);
}

/* ══════════════════════════════════════════════════════
   28. Label Element
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .label {
  color: oklch(52% 0.16 40);
  text-transform: uppercase;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════════════
   29. Section Tight
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .section--tight {
  padding: var(--space-8) 0;
}

/* ══════════════════════════════════════════════════════
   30. Deponie Banner Inner Elements
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .deponie-banner__inner {
  position: relative;
  z-index: 2;
}

[data-theme="gilch-quarzsand-hell"] .deponie-banner__badge {
  display: inline-block;
  background: oklch(100% 0 0 / 0.2);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-1) var(--space-4);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

[data-theme="gilch-quarzsand-hell"] .deponie-banner__text {
  color: oklch(90% 0 0 / 0.85);
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
  max-width: 60ch;
}

/* ══════════════════════════════════════════════════════
   31. Page Hero (Unterseiten-Header) — Dunkles Overlay fuer Bildkontrast
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .page-hero {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

[data-theme="gilch-quarzsand-hell"] .page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

[data-theme="gilch-quarzsand-hell"] .page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-theme="gilch-quarzsand-hell"] .page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(25% 0.03 50 / 0.75) 0%,
    oklch(25% 0.03 50 / 0.4) 50%,
    oklch(25% 0.03 50 / 0.2) 100%
  );
  z-index: 2;
}

[data-theme="gilch-quarzsand-hell"] .page-hero__content {
  position: relative;
  z-index: 3;
  padding-bottom: var(--space-8);
}

[data-theme="gilch-quarzsand-hell"] .page-hero__title {
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  text-shadow: 0 2px 20px oklch(0% 0 0 / 0.5);
}

[data-theme="gilch-quarzsand-hell"] .page-hero__subtitle {
  color: oklch(85% 0.02 75);
  font-size: var(--text-lg);
  margin-top: var(--space-2);
}

/* ══════════════════════════════════════════════════════
   32. Form Styles (contact-form uses form-input/form-label)
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .form-input,
[data-theme="gilch-quarzsand-hell"] .form-textarea {
  background: oklch(97% 0.015 80);
  border: 1px solid oklch(85% 0.02 75);
  color: oklch(25% 0.03 50);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

[data-theme="gilch-quarzsand-hell"] .form-input::placeholder,
[data-theme="gilch-quarzsand-hell"] .form-textarea::placeholder {
  color: oklch(65% 0.02 60);
}

[data-theme="gilch-quarzsand-hell"] .form-input:focus,
[data-theme="gilch-quarzsand-hell"] .form-textarea:focus {
  outline: none;
  border-color: oklch(52% 0.16 40);
  box-shadow: 0 0 0 3px oklch(52% 0.16 40 / 0.12);
}

[data-theme="gilch-quarzsand-hell"] .form-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: oklch(35% 0.03 50);
  margin-bottom: var(--space-2);
  display: block;
}

[data-theme="gilch-quarzsand-hell"] .form-group {
  margin-bottom: var(--space-4);
}

[data-theme="gilch-quarzsand-hell"] .form-checkbox {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: oklch(45% 0.03 50);
  cursor: pointer;
}

[data-theme="gilch-quarzsand-hell"] .form-checkbox a {
  color: oklch(52% 0.16 40);
}

/* ══════════════════════════════════════════════════════
   R1. Responsive — 768px (Tablet)
   ══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── KRITISCH: Horizontalen Scroll durch Nav-Drawer verhindern ── */
  [data-theme="gilch-quarzsand-hell"],
  [data-theme="gilch-quarzsand-hell"] body {
    overflow-x: hidden;
  }

  /* ── KRITISCH: Grid-Responsive Spezifität fixen ── */
  /* Engine .md\:grid-cols-1 hat nur 0,1,0 — Theme .grid-cols-3 hat 0,2,0 */
  [data-theme="gilch-quarzsand-hell"] .grid-cols-3,
  [data-theme="gilch-quarzsand-hell"] .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  [data-theme="gilch-quarzsand-hell"] .col-span-2 {
    grid-column: span 1 !important;
  }

  /* ── Grid cols-2 bleibt bei Tablet, collapsed bei Phone ── */
  [data-theme="gilch-quarzsand-hell"] .grid-cols-2 {
    grid-template-columns: 1fr;
  }

  /* ── Touch Targets: WCAG min 44px ── */
  [data-theme="gilch-quarzsand-hell"] .nav__links .nav__link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  [data-theme="gilch-quarzsand-hell"] .btn--sm {
    min-height: 44px;
    padding-inline: var(--space-4);
  }

  [data-theme="gilch-quarzsand-hell"] .footer__link,
  [data-theme="gilch-quarzsand-hell"] .footer__group-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Font-Size Minimum 14px für Body-Text ── */
  [data-theme="gilch-quarzsand-hell"] .text-sm {
    font-size: max(var(--text-sm), 14px);
  }

  /* ── Unternehmen: "Auf einen Blick" Card padding-top entfernen ── */
  [data-theme="gilch-quarzsand-hell"] [data-stagger="1"][style*="padding-top"] {
    padding-top: 0 !important;
  }

  /* ── Sticky Card auf Mobile deaktivieren ── */
  [data-theme="gilch-quarzsand-hell"] .card[style*="sticky"] {
    position: static !important;
  }

  /* Hero Sand-Curtain — Mobile: DUNKLER Overlay für Lesbarkeit */
  [data-theme="gilch-quarzsand-hell"] .hero--sandcurtain {
    min-height: 70vh;
  }

  [data-theme="gilch-quarzsand-hell"] .hero--sandcurtain::before {
    background: linear-gradient(
      to top,
      oklch(22% 0.03 50) 0%,
      oklch(22% 0.03 50 / 0.75) 40%,
      oklch(22% 0.03 50 / 0.2) 80%
    );
  }

  /* Mobile Hero: weißer Text auf dunklem Overlay */
  [data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .hero__title {
    font-size: var(--text-4xl);
    color: #fff;
    text-shadow: 0 2px 20px oklch(0% 0 0 / 0.5);
  }

  [data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .hero__subtitle {
    color: oklch(85% 0.02 75);
  }

  [data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .badge {
    background: oklch(100% 0 0 / 0.15);
    backdrop-filter: blur(10px);
    border-color: oklch(100% 0 0 / 0.2);
    color: #fff;
  }

  [data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .btn--outline {
    color: #fff;
    border-color: oklch(100% 0 0 / 0.4);
  }

  /* Page Hero */
  [data-theme="gilch-quarzsand-hell"] .hero--page {
    min-height: 30vh;
  }

  [data-theme="gilch-quarzsand-hell"] .hero--page .hero__title {
    font-size: var(--text-3xl);
  }

  [data-theme="gilch-quarzsand-hell"] .page-hero {
    min-height: 30vh;
  }

  [data-theme="gilch-quarzsand-hell"] .page-hero__title {
    font-size: var(--text-3xl);
  }

  /* Mobile Nav — dunkler Hintergrund für Slide-In-Menü */
  [data-theme="gilch-quarzsand-hell"] .nav__links {
    background: oklch(22% 0.03 50) !important;
    border-left-color: oklch(35% 0.03 50);
  }

  [data-theme="gilch-quarzsand-hell"] .nav__links .nav__link {
    color: oklch(85% 0.02 60);
    font-size: var(--text-lg);
  }

  [data-theme="gilch-quarzsand-hell"] .nav__links .nav__link:hover,
  [data-theme="gilch-quarzsand-hell"] .nav__links .nav__link.is-active {
    color: oklch(72% 0.12 75);
  }

  /* Nav */
  [data-theme="gilch-quarzsand-hell"] .nav__logo-img {
    max-width: 140px;
  }

  /* Hero-Buttons umbrechen */
  [data-theme="gilch-quarzsand-hell"] .hero__actions {
    flex-wrap: wrap;
  }

  /* Angled Sections auf Mobile reduzieren */
  [data-theme="gilch-quarzsand-hell"] .section--angled {
    clip-path: polygon(0 0, 100% 2vw, 100% 100%, 0 calc(100% - 2vw));
    margin-top: -2vw;
    padding-top: calc(var(--space-9) + 2vw);
    padding-bottom: calc(var(--space-9) + 2vw);
  }

  /* Product Table scrollbar */
  [data-theme="gilch-quarzsand-hell"] .product-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Counter kleiner */
  [data-theme="gilch-quarzsand-hell"] .counter {
    font-size: var(--text-4xl);
  }
}

/* ══════════════════════════════════════════════════════
   27. Responsive — 480px (Small Mobile)
   ══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  [data-theme="gilch-quarzsand-hell"] .hero--sandcurtain {
    min-height: 60vh;
  }

  [data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .hero__title {
    font-size: var(--text-3xl);
  }

  [data-theme="gilch-quarzsand-hell"] .hero--sandcurtain .hero__grid-content {
    padding-bottom: var(--space-7);
  }

  /* Hero-Buttons volle Breite */
  [data-theme="gilch-quarzsand-hell"] .hero__actions {
    flex-direction: column;
    width: 100%;
  }

  [data-theme="gilch-quarzsand-hell"] .hero__actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Counter noch kleiner */
  [data-theme="gilch-quarzsand-hell"] .counter {
    font-size: var(--text-3xl);
  }

  /* Category Cards volle Breite */
  [data-theme="gilch-quarzsand-hell"] .category-card {
    aspect-ratio: 16/9;
  }

  /* Stoerer kompakter */
  [data-theme="gilch-quarzsand-hell"] .stoerer {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }
}

/* ══════════════════════════════════════════════════════
   33. Card Body Padding (falls Engine es nicht setzt)
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .card__body {
  padding: var(--space-5);
}

/* ══════════════════════════════════════════════════════
   34. Alert Styles (Kontaktformular Feedback)
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .alert {
  padding: var(--space-4);
  font-size: var(--text-sm);
}

[data-theme="gilch-quarzsand-hell"] .alert--success {
  background: oklch(55% 0.12 145 / 0.08);
  border: 1px solid oklch(55% 0.12 145 / 0.4);
  color: oklch(35% 0.10 145);
}

[data-theme="gilch-quarzsand-hell"] .alert--error {
  background: oklch(55% 0.15 25 / 0.08);
  border: 1px solid oklch(55% 0.15 25 / 0.4);
  color: oklch(35% 0.12 25);
}

/* ══════════════════════════════════════════════════════
   35. Utility Overrides fuer Light Theme
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .text-primary {
  color: oklch(52% 0.16 40);
}

[data-theme="gilch-quarzsand-hell"] .text-muted {
  color: oklch(55% 0.02 50);
}

[data-theme="gilch-quarzsand-hell"] .text-white {
  color: #fff;
}

/* Maps Embed responsive */
[data-theme="gilch-quarzsand-hell"] .maps-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ══════════════════════════════════════════════════════
   36. Grid Utilities (col-span, grid-cols-3)
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-theme="gilch-quarzsand-hell"] .col-span-2 {
  grid-column: span 2;
}

@media (max-width: 768px) {
  [data-theme="gilch-quarzsand-hell"] .col-span-2 {
    grid-column: span 1;
  }
}

/* Intro Section: enger an Page-Hero */
[data-theme="gilch-quarzsand-hell"] .section--intro {
  padding-top: var(--space-8);
}

/* ══════════════════════════════════════════════════════
   37. Produkt-Tabellen-Sections: kompakterer Abstand
   ══════════════════════════════════════════════════════ */

/* Aufeinanderfolgende Tabellen-Sections brauchen weniger Padding */
[data-theme="gilch-quarzsand-hell"] .section + .section {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

[data-theme="gilch-quarzsand-hell"] .section + .section--bg-alt,
[data-theme="gilch-quarzsand-hell"] .section--bg-alt + .section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

/* Produkt-Tabellen: kompakter (product-table ist nur in Produktseiten) */
[data-theme="gilch-quarzsand-hell"] .section:has(.product-table) {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

/* Erste Section nach Hero: normales Padding behalten */
[data-theme="gilch-quarzsand-hell"] .section--intro {
  padding-bottom: var(--space-8);
}

/* ══════════════════════════════════════════════════════
   38. Produkt-Cards — Icons zentriert
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .card__body.text-center svg {
  display: block;
  margin-inline: auto;
}

/* Card-Titel Umbruch verhindern wo möglich */
[data-theme="gilch-quarzsand-hell"] .card__body.text-center .card__title {
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ══════════════════════════════════════════════════════
   39. Page-Hero ohne Bild — heller Hintergrund statt dunkel
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .page-hero:not(:has(img)) {
  background: oklch(94% 0.02 80);
  min-height: auto;
  padding: var(--space-10) 0 var(--space-8);
}

[data-theme="gilch-quarzsand-hell"] .page-hero:not(:has(img)) .page-hero__title {
  color: oklch(25% 0.03 50);
  text-shadow: none;
}

[data-theme="gilch-quarzsand-hell"] .page-hero:not(:has(img)) .page-hero__subtitle {
  color: oklch(45% 0.03 50);
}

[data-theme="gilch-quarzsand-hell"] .page-hero:not(:has(img)) .page-hero__overlay {
  display: none;
}

/* ══════════════════════════════════════════════════════
   41. Prose auf hellem Hintergrund — Links in Terrakotta
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .prose a {
  color: oklch(52% 0.16 40);
}

[data-theme="gilch-quarzsand-hell"] .prose strong {
  color: oklch(25% 0.03 50);
}

/* ══════════════════════════════════════════════════════
   42. Kontakt-Form auf hellem Hintergrund
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .form-checkbox {
  color: oklch(45% 0.03 50);
}

[data-theme="gilch-quarzsand-hell"] .form-checkbox a {
  color: oklch(52% 0.16 40);
}

/* ══════════════════════════════════════════════════════
   43. Hours Table auf hellem Hintergrund (Duplikat entfernt, s. Zeile 908)
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   44. Scroll-Hint — Animierter Hinweis "weiter nach unten"
   ══════════════════════════════════════════════════════ */

[data-theme="gilch-quarzsand-hell"] .scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-bottom: var(--space-2);
}

[data-theme="gilch-quarzsand-hell"] .scroll-hint__text {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(52% 0.16 40);
}

[data-theme="gilch-quarzsand-hell"] .scroll-hint__arrow {
  color: oklch(52% 0.16 40);
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="gilch-quarzsand-hell"] .scroll-hint__arrow {
    animation: none;
    opacity: 0.8;
  }
}