/* Shared theme for all Rauch Recycling pages: language toggle, dark mode, brand colors, nav link style */
.en { display: none; }
[data-lang="en"] .de { display: none; }
[data-lang="en"] .en { display: revert; }
body { margin: 0; }
html { scroll-behavior: smooth; }
.rr-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rr-reveal.rr-visible { opacity: 1; transform: translateY(0); }

:root {
  --color-bg: #fff;
  --color-surface: #f3f2f2;
  --on-logistik: #f3f2f2;
  --on-accent: #f3f2f2;
  --logistik: #55504C;
  --logistik-700: #3A3633;
  --logistik-300: #A8A29C;
  --logistik-100: #EEECE9;
  --color-accent: #c11617;
  --color-accent-100: color-mix(in srgb, #c11617 8%, white);
  --color-accent-200: color-mix(in srgb, #c11617 18%, white);
  --color-accent-600: color-mix(in srgb, #c11617 88%, black);
  --color-accent-700: color-mix(in srgb, #c11617 75%, black);
  --color-accent-800: color-mix(in srgb, #c11617 60%, black);
  --color-accent-900: color-mix(in srgb, #c11617 45%, black);
}

[data-theme="dark"] {
  --color-bg: #171615;
  --color-surface: #201f1e;
  --color-text: #f0efee;
  --color-divider: color-mix(in srgb, #f0efee 30%, transparent);
  --color-neutral-100: #201f1e;
  --color-neutral-200: #2a2928;
  --color-neutral-300: #3a3837;
  --color-neutral-400: #504d4c;
  --color-neutral-500: #6e6b69;
  --color-neutral-600: #8f8c8a;
  --color-neutral-700: #aaa7a5;
  --color-neutral-800: #d3d0ce;
  --color-neutral-900: #f0efee;
  --logistik-100: #2A2724;
  --on-logistik: #e4e6e8;
  --on-accent: #f3ede9;
}
[data-theme="dark"] img.grayscale, [data-theme="dark"] .grayscale img { filter: grayscale(1) brightness(0.85); }
[data-theme="dark"] .btn-primary { color: #f3f2f2; }
[data-theme="dark"] .rr-logistik-heading { color: var(--logistik-300); }
[data-theme="dark"] .rr-form-note { color: var(--color-accent-300); }
.btn-primary:hover { color: var(--color-bg); }

.rr-form-note { color: var(--color-accent-700); }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }
.navlink { text-decoration: none; color: var(--color-text); font-size: 14px; font-weight: 600; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.navlink:hover { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }

/* Hero readability scrims. Plain rgba fallback first, color-mix() enhancement second:
   browsers without color-mix() support (e.g. Safari < 16.4) ignore the invalid
   declaration and keep the rgba one, instead of painting no scrim at all. */
.rr-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(255, 255, 255, 0.7);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
}
[data-theme="dark"] .rr-hero-scrim {
  background: rgba(23, 22, 21, 0.58);
  background: color-mix(in srgb, var(--color-bg) 58%, transparent);
}

.rr-hero-fade {
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.65));
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-bg) 55%, transparent) 35%, color-mix(in srgb, var(--color-bg) 65%, transparent));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-image: linear-gradient(to bottom, transparent, black 30%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%);
}
[data-theme="dark"] .rr-hero-fade {
  background: linear-gradient(to bottom, transparent, rgba(23, 22, 21, 0.55) 35%, rgba(23, 22, 21, 0.65));
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-bg) 55%, transparent) 35%, color-mix(in srgb, var(--color-bg) 65%, transparent));
}

@media (max-width: 720px) {
  .navlinks { display: none !important; }
}

@media (max-width: 480px) {
  /* On narrow phones the header row (logo + icon group) is wider than the
     viewport once padding is reserved, so overflow-x: hidden on the page
     wrapper clips the trailing padding and the Kontakt button sits flush
     against the screen edge. Trimming padding/gaps here reclaims enough
     width that the row actually fits, restoring a visible edge margin. */
  header .rr-header-inner { padding-left: 18px !important; padding-right: 18px !important; }
  .rr-header-icons { gap: 6px !important; }
}

@media (max-width: 900px) {
  header img[alt="Rauch Recycling Logistic"] { height: 44px !important; width: 142.6px !important; }
  /* Footer's grid-3 (logo + link columns) — without this, its minmax(0, ...)
     tracks can shrink narrower than the footer logo's own width and squeeze
     it out of proportion instead of the columns just stacking. */
  footer .grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
}