/* ============================================================
   Walter Roeder GmbH – Stylesheet
   Farbkonzept: Dunkelgrün #2e6914 | Mittelgrün RAL 6018 #57a639 | Hellgrün #83c960
   Akzent (Orange #ff3b10) nur im Hero auf dunkelgrünem Verlauf – bewusst reduziert,
   sonst durchgängig Grüntöne zur Informationshierarchie.
   ============================================================ */

/* Schriften lokal vom eigenen Server (fonts/) statt von Google Fonts –
   keine Verbindung zu Google-Servern, keine Übertragung der Besucher-IP.
   Dateien aus @fontsource (SIL Open Font License). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-ext-400-normal.woff2?v=6744a7f509eb') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2?v=8909904ab6c8') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-ext-500-normal.woff2?v=2c6fbc42d315') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2?v=f3779f1efccc') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-ext-600-normal.woff2?v=e4bdf67b0cd1') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2?v=f9a06e79cd3a') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-ext-700-normal.woff2?v=143f9504f137') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2?v=6f56409fd3d6') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-latin-ext-700-normal.woff2?v=a59fcc944a71') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-latin-700-normal.woff2?v=f9d9e65b1537') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-latin-ext-800-normal.woff2?v=59f6ebeb71a1') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-latin-800-normal.woff2?v=ba826fb84c2e') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

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

:root {
  --green-dark:   #2e6914;
  --green-main:   #57a639;
  --green-main-dark: #4a8f30;
  --green-light:  #83c960;
  --green-pale:   #e3f5d8;
  /* Etwas dunklere Variante von --green-main, ausschließlich für Fließtext/
     Labels auf hellem Grund (weiß, --gray-light, --green-pale) statt
     --green-main selbst: --green-main erreicht dort nur 2,65–3,33:1
     Kontrast (WCAG-AA verlangt 4,5:1 für normal großen Text), --green-text
     schafft 4,45–5,49:1 – bei praktisch identischem Grünton, damit sich am
     eigentlichen Erscheinungsbild nichts ändert. --green-main selbst bleibt
     unverändert für Rahmen, Buttons, Icons u. Ä. (QA-Audit). */
  --green-text:   #3e7629;
  --orange:       #ff3b10;
  --white:        #ffffff;
  --gray-bg:      #f6f8f6;
  --gray-light:   #e8eee8;
  --text:         #1e2620;
  --text-light:   #000000; /* auf Wunsch wieder reines Schwarz statt des zuvor vorgeschlagenen gedämpften Grautons. */
  --anthracite:   #23272a;
  --color-danger: #c0392b;
  --shadow:       0 4px 24px rgba(46,105,20,.12);
  --shadow-lg:    0 12px 48px rgba(46,105,20,.18);
  --radius:       0px;
  --radius-lg:    0px;
  --radius-pill:  20px;
  --focus-ring:   #000;
  --transition:   all .25s ease;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Globaler Sprungziel-Versatz für ALLE #-Anker (Menü, Schnellauswahl,
     Sidebar-Links, Abfall-ABC, Kontaktformular-Buttons etc.): sorgt dafür,
     dass die Ziel-Überschrift nie unter dem fixierten Header verschwindet,
     egal ob der Sprung per Klick auf der gleichen Seite oder als Ziel
     einer anderen Seite (z. B. "kontakt.html#kontaktformular") passiert.
     Wert = tatsächliche Header-Höhe (siehe .header__logo-bar) + ca. 16px
     Luft, damit die Überschrift nicht direkt am Header klebt. Die drei
     Breakpoints entsprechen exakt den Stellen, an denen sich die
     Header-Höhe über .logo__img / .search-trigger/.hamburger ändert
     (768px: 74px Header, 480px: 68px Header, 375px: 64px Header). */
  scroll-padding-top: 96px;
}
@media (max-width: 768px) { html { scroll-padding-top: 90px; } }
@media (max-width: 480px) { html { scroll-padding-top: 84px; } }
@media (max-width: 375px) { html { scroll-padding-top: 80px; } }

body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

ul { list-style: none; }

/* ── Skip-Link (Accessibility) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  background: var(--anthracite);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 8px;
}

/* ── Typography ── */
h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; line-height: 1.2; color: var(--anthracite); }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p { color: var(--text-light); }

/* ── Layout ──
   Full-Width: der Container nutzt die gesamte Bildschirmbreite, keine
   starre max-width mehr. Als äußerer Rand dient stattdessen ein
   viewport-abhängiges Innenabstand (5vw), damit Text nie direkt am
   Bildschirmrand klebt und auf sehr breiten Screens nicht "explodiert" –
   die einzelnen Grids/Kacheln (siehe .tiles-4, .container-grid,
   .material-grid, .metal-grid u. a.) füllen den gewonnenen Platz durch
   automatisch mehr Spalten (auto-fit/minmax) bzw. proportional breitere
   Zellen (feste Spaltenzahl). Für reinen Fließtext siehe .content-block
   p/li weiter unten – dort bleibt die Zeilenlänge bewusst begrenzt. */
.container { max-width: 100%; margin: 0 auto; padding: 0 5vw; }
.section { padding: 80px 0; }

/* ── Unterseiten-Layout-System (Ränder, Breite, 2-Spalten-Grid) ──
   Gilt gezielt für den Hauptinhaltsbereich der Unterseiten (.content-section
   existiert nur dort, nie auf index.html) – die Startseite bleibt dadurch
   unangetastet, ohne dass irgendeine HTML-Datei geändert werden musste. */
.content-section > .container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 5vw;
}
.section--gray { background: var(--gray-bg); }

/* ══════════════════════════════════════════════════════════
   BUTTON-SYSTEM — ein einheitlicher visueller Stil, global gültig
   .btn--primary  = Hauptaktion (Markup-Bedeutung bleibt erhalten)
   .btn--outline  = Neben-Aktion
   Optisch sehen beide identisch aus: klarer Outline-Stil mit
   feiner Umrandung und transparentem Hintergrund – auf Wunsch
   sollen ALLE Buttons wie der bisherige Neben-Button wirken.
   Beide teilen Höhe, Innenabstand, Schrift und Eckenradius,
   damit nebeneinanderstehende Buttons exakt gleich hoch sind.
   Auf dunklen Flächen (CTA-Banner, mobiles Menü) drehen sich
   die Farben automatisch um – dafür ist an den Aufrufstellen
   keine Inline-Style-Anpassung mehr nötig.
   ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  border-radius: 0;
  border: 2px solid transparent;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn--lg { height: 60px; padding: 0 36px; font-size: 1.05rem; }
.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* Auf dunklen Flächen bleibt der Fokusring weiß, damit er sichtbar bleibt */
.cta-banner .btn:focus-visible,
.nav-panel .btn:focus-visible {
  outline-color: var(--white);
}

/* Alle Buttons: klarer Outline-Stil, transparenter Hintergrund (Standard = helle Flächen) */
.btn--primary,
.btn--outline {
  background: transparent;
  color: var(--green-dark);
  border-color: var(--green-main);
}
.btn--primary:hover,
.btn--outline:hover {
  background: var(--green-pale);
  border-color: var(--green-dark);
  color: var(--green-dark);
  transform: translateY(-2px);
}

/* Dunkle Flächen (CTA-Banner, mobiles Menü): Farben automatisch umgekehrt */
.cta-banner .btn--primary,
.cta-banner .btn--outline,
.nav-panel .btn--primary,
.nav-panel .btn--outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.cta-banner .btn--primary:hover,
.cta-banner .btn--outline:hover,
.nav-panel .btn--primary:hover,
.nav-panel .btn--outline:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--white);
  color: var(--white);
}

/* ── Header / Navigation ── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  transition: var(--transition);
}

/* Zeile 1: Logo – weißer Hintergrund, Logo flush-left */
.header__logo-bar {
  background: var(--white);
  border-bottom: 2px solid var(--gray-light);
}
.header__logo-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;     /* Atempause über dem Logo, statt fixer Höhe */
  padding-bottom: 16px;
  max-width: none;       /* kein Zentrierung – volle Breite */
  padding-left: 28px;    /* Logo an den linken Rand */
  padding-right: 20px;
}

/* Rückwärtskompatibilität */
.header__inner { display: contents; }

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: none;
  padding: 0;
  position: relative;
}
/* Klickfläche des Logos (Link zur Startseite) unsichtbar vergrößern
   (Hit-Slop, gleiche Technik wie bei .search-trigger/.hamburger unten):
   .logo__img schrumpft auf kleinen Bildschirmen bis auf 17px Höhe – ohne
   diese Erweiterung wäre die tatsächliche Tippfläche entsprechend winzig.
   -10px bleibt bewusst innerhalb der kleinsten vorkommenden Container-
   Polsterung (14px oben/unten, siehe @media-Regeln zu .header__logo-bar
   .container), damit die unsichtbare Fläche nie in den Content darunter
   hineinreicht. */
.logo::before { content: ''; position: absolute; top: -10px; bottom: -10px; left: 0; right: 0; }

.logo__img {
  height: 46px;
  width: auto;
  display: block;
  object-fit: contain;
}

.logo__img--footer {
  height: 38px;
  opacity: 1;
}

.footer-logo {
  display: inline-flex;
}

/* Alte Klassen ausblenden */
.logo__icon { display: none; }
.logo__text { display: none; }
.logo__name { display: none; }
.logo__sub  { display: none; }

/* ── Hauptnavigation als Slide-in-Menü (Desktop & Mobile identisch) ── */
.header__nav-bar {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(14, 26, 11, 0);
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: background .35s ease, visibility 0s linear .35s;
}
.header__nav-bar.open {
  visibility: visible;
  pointer-events: auto;
  background: rgba(14, 26, 11, .55);
  transition: background .35s ease, visibility 0s linear 0s;
}
.header__nav-bar .container {
  height: 100%;
  max-width: none;
  padding: 0;
}

.nav-panel {
  position: absolute;
  top: 0; right: 0;
  width: min(420px, 100%);
  height: 100%;
  background: var(--green-dark);
  box-shadow: -20px 0 60px rgba(0,0,0,.35);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.header__nav-bar.open .nav-panel { transform: translateX(0); }

.nav-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  flex-shrink: 0;
}
.nav-panel__label {
  color: rgba(255,255,255,.6);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-panel__close {
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: var(--transition);
}
.nav-panel__close:hover { background: rgba(255,255,255,.12); }
.nav-panel__close svg { width: 20px; height: 20px; }

.nav-panel__scroll { overflow-y: auto; flex: 1; padding: 8px 0 12px; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; }

.nav__item { position: relative; }

.nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 15px 12px;
  color: rgba(255,255,255,.92);
  font-size: .98rem;
  font-weight: 600;
  border-radius: 0;
  transition: var(--transition);
}
.nav__link:hover { color: var(--white); background: rgba(255,255,255,.08); }

.nav__link svg { width: 12px; height: 12px; transition: transform .25s ease; flex-shrink: 0; }
.nav__item.open .nav__link svg { transform: rotate(180deg); }

/* Dropdown als Akkordeon – einheitlich für alle Bildschirmgrößen */
.dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.nav__item.open .dropdown { max-height: 640px; }

.dropdown a {
  display: block;
  padding: 11px 16px 11px 26px;
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  font-weight: 500;
  transition: var(--transition);
}
.dropdown a:hover { color: var(--white); padding-left: 32px; }

.nav-panel__contact {
  padding: 18px 24px 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  flex-shrink: 0;
}
.nav-panel__contact a.btn { width: 100%; justify-content: center; }

/* Hamburger – immer sichtbar, oben rechts im Header, touch-freundliche Klickfläche (≥44px) */
.hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--green-dark); border-radius: 2px; transition: var(--transition); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 7px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -7px); }


/* ── SVG Icon System ── */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Buttons */
.btn svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
/* Contact Row Icons */
/* Hinweis: die font-size für .contact-card__row-icon selbst wird weiter
   unten im "Kontaktkarte"-Abschnitt vollständig definiert (dort auch
   Hintergrund/Größe der runden Icon-Fläche) – hier nur noch die
   SVG-Größe, die sonst nirgends gesetzt wird. */
.contact-card__row-icon svg { width: 20px; height: 20px; stroke: var(--green-main); }
/* Contact Card Heading Icons */
.contact-card h3 svg { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; stroke: var(--green-main); }
/* Social Btn */
.social-btn svg { width: 20px; height: 20px; vertical-align: -4px; }

.hero__text { color: rgba(255,255,255,.8); font-size: 1.1rem; margin-bottom: 36px; line-height: 1.7; }

/* ── Services Overview ── */

.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  border: 1px solid var(--gray-light);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card:hover { transform: translateY(-6px); border-color: var(--green-pale); }
.service-card:focus-visible,
.service-card:active {
  outline: none;
  border-color: var(--focus-ring);
}

.service-card h3 { margin-bottom: 12px; }
.service-card p { margin-bottom: 20px; font-size: .9rem; }
/* ".service-card .link-arrow" traf aktuell nirgends zu: .link-arrow wird
   nur innerhalb von .leistung-card (Startseite) sowie als eigenständiger
   <a class="link-arrow"> verwendet, nie innerhalb von .service-card
   (dort gibt es keine .link-arrow-Kindelemente). Dadurch blieben diese
   Links bislang komplett ungestylter Fließtext (17px hoch) – u. a. der
   Grund für den zu kleinen Klickbereich aus dem QA-Audit. Auf die
   bestehende Optik (Farbe, Schriftgewicht) wird hier bewusst NICHT
   zugegriffen, um am Erscheinungsbild nichts zu ändern – nur die
   Klickfläche wird auf die WCAG-2.2-Zielgröße vergrößert. */
.link-arrow { display: inline-block; padding-block: 4px; }

/* ── 4er-Kachel-Reihe (global) ──
   Einheitliche Komponente für vier gleich große Info-Kacheln in einer
   Reihe, z. B. „Mehr über uns" (ueber-uns.html) und die Vorteils-
   Kacheln auf autoverwertung.html. Ab 900px stehen alle 4 Kacheln
   nebeneinander in einer Zeile, darunter 2 bzw. 1 Spalte. Neue Seiten
   binden .tiles-4 / .tile-4 einfach wieder ein, ohne eigenes CSS. */
.tiles-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.tile-4 {
  display: block;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-decoration: none;
  transition: var(--transition);
}
a.tile-4:hover { border-color: var(--green-light); transform: translateY(-4px); }
.tile-4 h4 { color: var(--anthracite); font-size: .93rem; margin-bottom: 6px; }
.tile-4 p { color: var(--text-light); font-size: .83rem; line-height: 1.55; margin: 0; }
/* Drei-Kachel-Variante derselben Komponente (.tile-4-Kacheln, nur 3 statt 4
   in der Reihe) – für Abschnitte mit genau drei kurzen Punkten, z. B. die
   Zielgruppen auf metalle.html. */
.tiles-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.tiles-3 .tile-4 { text-align: center; }
@media (max-width: 700px) {
  .tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .tiles-3 { grid-template-columns: 1fr; }
}

/* Zwei-Kachel-Variante derselben Komponente – für Abschnitte mit genau zwei
   kurzen Punkten, z. B. die Vorteils-Kacheln auf demontage.html (nach
   Entfernen der dritten, zur CTA-Banner redundanten Kachel "Alles aus
   einer Hand"). */
.tiles-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.tiles-2 .tile-4 { text-align: center; }
@media (max-width: 480px) {
  .tiles-2 { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tiles-4 { grid-template-columns: 1fr; }
}

/* ── Abfall-Kachel: gemeinsame Grundform (global) ──
   Rahmen, Hintergrund und Hover-/Fokus-Verhalten sind bei beiden Varianten
   identisch: dem großen, durchsuchbaren A-Z-Register (.waste-tile2 auf
   abfaelle.html) und der kompakten 6er-Schnellzugriffsreihe auf der
   Startseite (.waste-tile). Bildformat, Textgröße/-ausrichtung und der
   Hover-Versatz bleiben bewusst je Seite unterschiedlich, da beide für
   unterschiedlich dichte Layouts gedacht sind – deshalb bekommen beide
   zusätzlich zu ihrer eigenen Klasse noch .waste-tile-base. */
.waste-tile-base {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--gray-light);
  overflow: hidden;
  transition: var(--transition);
}
.waste-tile-base:hover { border-color: var(--green-main); }
.waste-tile-base:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Section Header ── */
.section-header { text-align: center; max-width: 640px; margin: 0 auto 16px; }
.section-header__tag {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-text);
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.section-header h2 { margin-bottom: 14px; }
.section-header p { color: var(--text-light); }

/* ── CTA Banner ── */
.cta-banner {
  color: var(--white);
  padding: 44px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 30px 30px;
}
.cta-banner__inner { position: relative; max-width: 620px; margin: 0 auto; padding: 0 24px; }
.cta-banner h2 { color: var(--white); margin-bottom: 10px; font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.cta-banner p { color: rgba(255,255,255,.8); margin-bottom: 18px; font-size: .92rem; }
.cta-banner__btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Info Boxes (Sidebar) ── */
.info-box {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}
.info-box h4 { color: var(--anthracite); margin-bottom: 14px; font-size: 1rem; }
.info-box p, .info-box li { font-size: .88rem; color: var(--text-light); }
.info-box li { padding: 4px 0; display: flex; align-items: flex-start; gap: 8px; }
.info-box li::before { content: '•'; color: var(--text-light); font-weight: 700; font-size: 1.2em; line-height: 1; flex-shrink: 0; }
/* Kacheln mit Link-Liste (Pfeil-Aufzählung) sollen kein zusätzliches Häkchen erhalten */
.info-box .link-list li::before { content: none; }

/* ── Page Layout (Content + Sidebar) ── */
.page-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }

/* Schutz vor dem CSS-Grid-„min-width:auto"-Effekt: Ohne diese Regel
   verhindert breiter Inhalt (Tabellen, Formulare, iframes) in einer
   Spalte, dass das Grid schrumpft – die ganze Seite würde dann über
   die Bildschirmbreite hinauswachsen (horizontales Scrollen). */
.page-layout > *,
.form-grid > *,
.contact-grid > *,
.footer__grid > *,
.metal-grid > *,
.container-grid > * {
  min-width: 0;
}

/* ── Page Hero ── */
/* padding-top = neue Header-Höhe (78px Desktop, siehe .header__logo-bar
   .container) + 30px Luft, damit der Hero nicht unter dem fixierten
   Header verschwindet. */
.page-hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-main) 100%);
  padding: 108px 0 70px;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.page-hero__inner { position: relative; }
.breadcrumb { display: flex; gap: 8px; align-items: center; color: rgba(255,255,255,.6); font-size: .82rem; margin-bottom: 16px; }
.breadcrumb a { color: rgba(255,255,255,.7); }
.breadcrumb a:hover { color: var(--green-light); }
.breadcrumb__sep { color: rgba(255,255,255,.3); }
.page-hero h1 { color: var(--white); margin-bottom: 14px; }
.page-hero p { color: rgba(255,255,255,.88); font-size: 1.05rem; max-width: 620px; }

/* ── Content Styles ── */
.content-section { padding: 70px 0; }

.content-block { margin-bottom: 48px; }
.content-block h2 { margin-bottom: 16px; }
.content-block h3 { margin-bottom: 12px; }
/* max-width in ch (nicht px), damit die Zeilenlänge des Fließtexts auch bei
   voller Container-Breite (siehe .container weiter oben) lesbar bleibt –
   betrifft nur reinen Text, nicht die daneben-/darunterliegenden Grids/Kacheln. */
.content-block p { margin-bottom: 16px; max-width: 75ch; }
.content-block > ul li, .content-block > ol li { max-width: 75ch; }

/* Buntmetalle-Hinweisbox (schrottsammlung-vereine.html): steht als eigenständiger
   Block neben .content-block und hatte bislang keine eigene Abstandsregel für
   die Überschrift – dadurch griff nur der Browser-Standardabstand des <h3>,
   was ein größeres, uneinheitliches Überschrift-Text-Abstand als bei den
   übrigen Content-Blöcken der Seite ergab. Angleichung an .content-block h3. */
.buntmetalle-box h3 { margin-bottom: 12px; }

.check-list { margin: 20px 0; }
.check-list li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-light);
  color: var(--text-light);
  font-size: .95rem;
}
.check-list li:last-child { border-bottom: none; }
.check-list li::before { content: '•'; color: var(--text-light); font-weight: 700; font-size: 1.2em; line-height: 1; flex-shrink: 0; margin-top: 2px; }

/* Verlinkte Checklisten-Zeile (z. B. Selbstanlieferung → Standort-Karte in
   kontakt.html): übernimmt Layout/Gap der li, aber bewusst ohne eigene
   Linkfarbe (nur dezentes Hover-Underline), damit sich die Zeile optisch
   nicht von den unverlinkten Zeilen derselben Liste unterscheidet. */
.check-list__link { display: flex; gap: 12px; flex: 1; color: inherit; text-decoration: none; }
.check-list__link:hover { text-decoration: underline; }

.link-list { margin: 20px 0; }
.link-list li { padding: 6px 0; }
.link-list a {
  color: var(--green-main);
  font-weight: 500;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}
.link-list a::before { content: '▸'; color: var(--text-light); }
.link-list a:hover { color: var(--green-dark); gap: 10px; }

/* ── Container Karten ── */
.container-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 32px; }

.container-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  transition: var(--transition);
}
.container-card:hover { border-color: var(--green-light); transform: translateY(-3px); }
.container-card__name { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--anthracite); font-size: 1rem; margin-bottom: 8px; }
.container-card__vol { color: var(--green-dark); font-weight: 600; font-size: .9rem; margin-bottom: 8px; }

/* Maße: dauerhaft sichtbare technische Spec-Zeile, auf allen Geräten gleich */
.container-card__dims {
  font-size: .76rem;
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.5;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--gray-light);
}

/* ── Liefergebiet Tabelle ── */
.delivery-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.delivery-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.delivery-table th {
  background: var(--green-dark);
  color: var(--white);
  padding: 14px 20px;
  text-align: left;
  font-weight: 600;
}
.delivery-table td { padding: 12px 20px; border-bottom: 1px solid var(--gray-light); }
.delivery-table tr:last-child td { border-bottom: none; }
.delivery-table tr:hover td { background: var(--green-pale); }
.delivery-table td:first-child { font-weight: 600; color: var(--green-text); white-space: nowrap; }
/* Jede Zeile führt zur Container-Anfrage (siehe Skript weiter unten) –
   der bereits vorhandene Hover-Ton oben reicht als Hinweis, bewusst ohne
   zusätzlichen Button oder Pfeil. */
#deliveryBody tr { cursor: pointer; }

/* ── Kontakt ── */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px; margin-top: 32px; }

.contact-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  border: 1px solid var(--gray-light);
}
.contact-card h3 { margin-bottom: 20px; padding-bottom: 14px; }
.contact-card__info { display: flex; flex-direction: column; gap: 12px; }
.contact-card__row { display: flex; gap: 12px; align-items: center; }
.contact-card__row-icon {
  width: 38px; height: 38px;
  min-width: 38px;
  background: var(--green-pale);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.contact-card__row-text .label { font-size: .78rem; font-weight: 600; color: var(--green-text); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.contact-card__row-text a { color: var(--text); font-weight: 500; font-size: .95rem; }
.contact-card__row-text a:hover { color: var(--green-main); }

.hours-table { width: 100%; font-size: .88rem; }
.hours-table td { padding: 6px 0; color: var(--text-light); }
.hours-table td:first-child { font-weight: 600; color: var(--text); width: 50%; }
/* Uhrzeiten nie innerhalb einer Zeitspanne umbrechen ("07:00–12:00 Uhr"
   bleibt immer eine Zeile). Auf dem Handy bekommt die Tages-Spalte nur so
   viel Breite wie nötig, damit Vor- und Nachmittag nebeneinander passen. */
.hours-table td + td { white-space: nowrap; padding-left: 12px; }
@media (max-width: 600px) {
  .contact-card { padding: 26px 18px; }
}
/* Öffnungszeiten in den Standort-Karten (Kontaktseite): Die Karten sind je
   nach Bildschirm unterschiedlich breit (Handy, Tablet mit zwei Karten
   nebeneinander, Desktop). Deshalb richtet sich die kompakte Darstellung
   nach der Breite der Karte selbst, nicht nach der Bildschirmbreite. */
.contact-card { container-type: inline-size; }
@container (max-width: 440px) {
  .hours-table td:first-child { width: 1%; white-space: nowrap; padding-right: 4px; }
  .hours-table td + td { padding-left: 14px; }
  .hours-uhr { display: none; }
}
@container (max-width: 300px) {
  .hours-table { font-size: .82rem; }
  .hours-table td + td { padding-left: 10px; }
}
@container (max-width: 250px) {
  .hours-table { font-size: .76rem; }
  .hours-table td + td { padding-left: 8px; }
}
@media (max-width: 400px) {
  .hours-table { font-size: .82rem; }
  .hours-table td + td { padding-left: 10px; }
}
@media (max-width: 350px) {
  .hours-table { font-size: .76rem; }
  .hours-table td + td { padding-left: 8px; }
}

/* ── Ansprechpartner-Box (global) ──
   Einheitliche Box für einen namentlichen Ansprechpartner auf allen
   Unterseiten (z. B. Autoverwertung, Demontage). Jede Kontaktzeile
   (Telefon, E-Mail, Adresse) nutzt die Klasse .contact-item.
   Neue Seiten binden diese Klassen einfach wieder ein, ohne eigenes
   Seiten-CSS zu benötigen. */
.contact-person-card {
  background: var(--white);
  border: 2px solid var(--green-light);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-top: 28px;
}
.contact-person-card h3 { color: var(--anthracite); font-size: 1.05rem; margin-bottom: 2px; }
.contact-person-card__role { color: var(--text-light); font-size: .85rem; margin-bottom: 16px; }

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.contact-item:last-child { margin-bottom: 0; }
.contact-item__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-item__icon svg { width: 18px; height: 18px; stroke: var(--green-main); flex-shrink: 0; }
.contact-item a { font-size: .92rem; font-weight: 600; color: var(--green-text); text-decoration: none; }
.contact-item a:hover { color: var(--green-dark); }
.contact-item span { font-size: .92rem; font-weight: 500; color: var(--text); }

/* Kontaktformular */
.contact-form { background: var(--white); border-radius: var(--radius-lg); padding: 40px; border: 1px solid var(--gray-light); }
.contact-form h3 { margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: .85rem; font-weight: 600; color: var(--text); }
.form-group input, .form-group select, .form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--gray-light);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: var(--text);
  transition: var(--transition);
  background: var(--white);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: none;
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* ── Material-Ja/Nein-Tabelle (global) ──
   War bisher auf 10 Unterseiten (Abfälle, Bauschutt, Holz, Glas, Papier …)
   byte-identisch als Seiten-CSS dupliziert. Jetzt einmal zentral gepflegt;
   neue Seiten binden .material-grid / .material-col einfach wieder ein.
   (Bewusst nach .form-group platziert, damit .material-col-Regeln nicht
   versehentlich mit anderen, gleich spezifischen Regeln kollidieren.) */
.material-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 24px; }
.material-col { background: var(--white); border: 1px solid var(--gray-light); border-radius: var(--radius); padding: 24px; }
.material-col__head { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.material-col--yes .material-col__head { color: var(--green-text); }
.material-col--no  .material-col__head { color: var(--color-danger); }
.material-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.material-col ul li { font-size: .9rem; color: var(--text); display: flex; align-items: flex-start; gap: 8px; }
.material-col--yes ul li::before { content: '+'; color: var(--green-main); font-weight: 700; font-size: 1rem; line-height: 1.5; flex-shrink: 0; width: 14px; }
.material-col--no  ul li::before { content: '\2212'; color: var(--color-danger); font-weight: 700; font-size: 1rem; line-height: 1.5; flex-shrink: 0; width: 14px; }
@media (max-width: 600px) { .material-grid { grid-template-columns: 1fr; } }

/* ── Service-Section (global) ──
   Grüner Info-Kasten mit Kopfzeile, bisher identisch auf 5 Seiten dupliziert
   (Abfälle, Abfall-ABC, Bauschutt, Demontage, Schadstoffe). Seitenspezifische
   Ergänzungen (Listen, Bild-Layout, abweichende Abstände) bleiben bewusst im
   jeweiligen Seiten-CSS, da sie sich zwischen den Seiten unterscheiden. */
.service-sections { display: flex; flex-direction: column; gap: 28px; margin-top: 32px; }
.service-section { background: var(--white); border: 1px solid var(--gray-light); border-radius: var(--radius); overflow: hidden; }
.service-section__head { background: var(--green-dark); color: var(--white); padding: 18px 28px; display: flex; align-items: center; gap: 16px; }
.service-section__head h2 { font-size: 1.1rem; margin: 0; color: var(--white); }
.service-section__body { padding: 22px 28px; }
@media (max-width: 600px) { .service-section__head { flex-direction: column; align-items: flex-start; gap: 10px; } }
/* ── Anfrage-Formular-Bausteine (global) ──
   War identisch auf container-anfrage.html und stellgenehmigung.html
   dupliziert. Bewusst nach .form-group platziert: .radio-group label sitzt
   im Markup innerhalb von .form-group, und .form-group label hat dieselbe
   Spezifität – die spätere Regel im Stylesheet gewinnt sonst ungewollt. */
.anfrage-intro { background: var(--green-pale); padding: 20px 24px; border-radius: var(--radius); margin-bottom: 32px; }
.anfrage-intro p { color: var(--text-light); font-size: 1rem; line-height: 1.7; margin: 0; }
.radio-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.radio-group label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .95rem; color: var(--text); }
.radio-group input[type="radio"] { accent-color: var(--green-main); width: 16px; height: 16px; }
.form-note { font-size: .82rem; color: var(--text-light); margin-top: 4px; }
.form-section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--green-text); padding-bottom: 6px; margin: 28px 0 16px; }

/* ── FAQ-Akkordeon (global) ──
   War auf faq.html und metalle-faq.html mit leicht abweichender Animation
   dupliziert. Jetzt eine gemeinsame Version; seitenspezifische Ergänzungen
   (z. B. Aufzählungslisten in einzelnen Antworten) bleiben im jeweiligen
   Seiten-CSS. */
.faq-list { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--white); border: 1px solid var(--gray-light); border-radius: var(--radius); overflow: hidden; }
.faq-question { width: 100%; background: none; border: none; padding: 20px 24px; text-align: left; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; color: var(--green-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: background .2s; }
.faq-question:hover { background: var(--gray-bg); }
.faq-question.open { background: var(--green-pale); color: var(--text-light); }
/* War zuvor ein gedrehtes "+" (transform: rotate(45deg)), das optisch zu
   einem "×" statt einem "–" wird. Jetzt echtes Zeichen-Umschalten per JS (siehe
   Formular-Skript weiter unten), keine Drehung mehr nötig. */
.faq-icon { font-size: 1.3rem; flex-shrink: 0; color: var(--green-main); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .25s; }
.faq-answer.open { max-height: 600px; }
.faq-answer__inner { padding: 16px 24px 20px; color: var(--text-light); font-size: .95rem; line-height: 1.7; border-top: 1px solid var(--gray-light); }
/* ── Prozess-Schritte (global) ──
   Einheitliche Kachel für Schritt-für-Schritt-Erklärungen, bisher als
   .step-card (schrottsammlung-vereine.html) und .process-step
   (autoverwertung.html) unabhängig mit demselben Aussehen nachgebaut.
   Zwei Container-Varianten je nach Seite: .steps-grid (nebeneinander,
   für kurze Schritte) und .process-steps (gestapelt, für längere Texte) –
   beide nutzen dieselbe .step-item-Kachel. */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.process-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.step-item { background: var(--white); border: 1px solid var(--gray-light); border-radius: var(--radius); padding: 20px; }
.step-item h4 { color: var(--anthracite); font-size: .95rem; margin-bottom: 6px; }
.step-item p { color: var(--text-light); font-size: .87rem; line-height: 1.6; margin: 0; }
.steps-grid .step-item { text-align: center; }
@media (max-width: 768px) { .steps-grid { grid-template-columns: 1fr; } }
/* Zebra-Hintergrund (jede zweite Schritt-Kachel hellgrau) wurde site-weit
   entfernt – Ausnahme sind nur die Startseite/der Startseiten-Entwurf, die
   ihren eigenen, bewussten Hell/Grau-Wechsel über .section--gray nutzen. */

/* ── Fokus-/Auswahlzustand: native Checkboxen & Radios (klarer schwarzer Ring statt Browser-Standard) ── */
input[type="radio"],
input[type="checkbox"] {
  outline: none;
}
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Öffnungszeiten Widget: heller Stil wie „Telefonische Erreichbarkeit" (.info-box) ── */
.hours-widget {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 28px;
  color: var(--text);
  margin-bottom: 20px;
}
.hours-widget h3 { color: var(--anthracite); margin-bottom: 14px; font-size: 1rem; }
.hours-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--anthracite);
  border-bottom: 2px solid var(--green-main);
  padding-bottom: 5px;
  margin-bottom: 8px;
}
.hours-phone svg { width: 18px; height: 18px; color: var(--green-main); flex-shrink: 0; }
.hours-phone a {
  color: inherit;
  text-decoration: none;
}
.hours-phone a:hover { color: var(--green-main); text-decoration: underline; }
.hours-widget .hours-table td { color: var(--text-light); }
.hours-widget .hours-table td:first-child { color: var(--text); }

/* ── Footer ── */
.footer {
  background: var(--green-dark);
  color: rgba(255,255,255,.8);
  padding: 64px 0 0;
}
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }

.footer-col h4 { color: var(--white); margin-bottom: 18px; font-size: .95rem; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
/* color:inherit ist hier bewusst explizit gesetzt (nicht nur implizite
   Vererbung von .footer): das globale "p { color: var(--text-light) }"
   (= Schwarz) würde sonst JEDES <p> auch hier im dunklen Footer
   überschreiben, sobald es keine zusätzliche, farbgebende Klasse trägt
   (siehe QA-Audit). Aktuell hat jedes tatsächlich verwendete Footer-<p>
   bereits eine eigene Klasse mit Farbe – das hier ist ein Sicherheitsnetz
   für künftig neu hinzugefügte Footer-Absätze ohne solche Klasse. */
.footer-col p, .footer-col address { font-size: .87rem; line-height: 1.8; font-style: normal; color: inherit; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a {
  color: rgba(255,255,255,.9);
  font-size: .87rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 7px;
}
.footer-col ul li a::before { content: '▸'; color: var(--green-light); font-size: .75rem; }
.footer-col ul li a:hover { color: var(--white); padding-left: 4px; }

.footer__logo-desc { font-size: .87rem; margin-top: 14px; color: rgba(255,255,255,.9); opacity: 1; line-height: 1.7; }
.footer-locations { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 16px 0; }
.footer-location { font-size: .82rem; line-height: 1.6; font-style: normal; color: rgba(255,255,255,.85); }
.footer-location strong { color: var(--white); }
.footer-location a { color: rgba(255,255,255,.85); text-decoration: none; }
.footer-location a:hover { color: var(--white); text-decoration: underline; }
.footer-email { font-size: .87rem; margin: 0 0 18px; }
.footer-email a { color: rgba(255,255,255,.85); text-decoration: none; }
.footer-email a:hover { color: var(--white); text-decoration: underline; }
.footer-col__note { font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.85); margin: -4px 0 14px; }
.footer-social-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); margin: 20px 0 10px; }
.footer__social { display: flex; gap: 10px; margin-top: 0; }
.social-btn {
  width: 44px; height: 44px;
  background: var(--white);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--green-main);
  font-size: 1rem;
  transition: var(--transition);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.social-btn:hover { background: var(--green-light); color: var(--white); transform: translateY(-2px); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__bottom p { font-size: .82rem; color: rgba(255,255,255,.5); }
.footer__bottom a { color: rgba(255,255,255,.6); font-size: .82rem; margin-left: 16px; display: inline-block; padding-block: 4px; /* Klickfläche auf WCAG-2.2-Zielgröße, QA-Audit */ }
.footer__bottom a:hover { color: var(--white); }

/* ── Back to Top ── */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 46px; height: 46px;
  background: var(--green-main);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 16px rgba(27,67,50,.3);
  opacity: 0;
  transform: translateY(12px);
  transition: var(--transition);
  z-index: 999;
  cursor: pointer;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--green-dark); transform: translateY(-2px); }

/* ── Metall-Karten: echtes Materialfoto statt Farbfläche ──
   Feste Spaltenzahl statt auto-fit: bei 8 Kacheln entsteht mit auto-fit
   je nach Bildschirmbreite eine unvollständige letzte Zeile (z. B. 5+3
   oder 6+2) mit Leerraum rechts. Mit festen Spalten (4 / 2 / 1) gehen
   die Kacheln immer restlos in vollen Zeilen auf. */
.metal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--gray-light); border: 1px solid var(--gray-light); margin-top: 28px; }
@media (max-width: 900px) {
  .metal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .metal-grid { grid-template-columns: 1fr; }
}
.metal-card {
  background: var(--white);
  text-align: left;
  transition: background-color .2s ease;
  display: flex;
  flex-direction: column;
}
.metal-card:hover { background: var(--gray-bg); }
/* aspect-ratio 5/4 entspricht exakt den Bildmaßen (900×720px) der Metallfotos,
   damit jedes Foto vollständig sichtbar bleibt (kein Beschnitt durch object-fit)
   und die Karten dennoch einheitlich hoch und sauber ausgerichtet bleiben. */
.metal-card__img { width: 100%; max-width: 100%; aspect-ratio: 5 / 4; object-fit: contain; display: block; background: var(--white); }
.metal-card { overflow: hidden; }
.metal-card__body { padding: 16px 18px 18px; }
.metal-card__name { font-weight: 700; color: var(--anthracite); font-size: .95rem; }

/* ── Alert/Hinweis-Box ── */
.alert {
  background: var(--green-pale);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 20px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.alert__text p { font-size: .9rem; margin: 0; color: var(--text-light); }
.alert__text strong,
.alert__text b,
.alert__text h1,
.alert__text h2,
.alert__text h3,
.alert__text h4,
.alert__text h5,
.alert__text h6 { color: var(--text-light); }

/* Erfolgs-/Fehlermeldung nach dem Absenden eines Kontaktformulars
   (siehe js/contact-form.js) – gleiche Grundform wie .alert, nur mit
   Rahmenfarbe passend zur Bedeutung. */
.alert--success { background: var(--green-pale); border-color: var(--green-main); }
.alert--error { background: var(--white); border-color: var(--color-danger); }

/* Honeypot-Feld gegen Formular-Spam: für Menschen unsichtbar, aber im
   DOM vorhanden und per Tab nicht erreichbar – füllt es jemand aus
   (typischerweise ein automatisiertes Bot-Skript), wird die Anfrage
   serverseitig verworfen (siehe php/contact-handler.php). */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Hours Widget in Footer ── */
.footer-address { font-size: .87rem; line-height: 1.8; font-style: normal; color: rgba(255,255,255,.9); }
.footer-address strong { color: var(--white); }

/* =====================================================
   Bilder / Fotos
   ===================================================== */

.hist-img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: var(--radius);
  margin: 20px 0;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  border: 1px solid var(--gray-light);
}

.hist-img--caption {
  display: block;
  font-size: .78rem;
  color: var(--text-light);
  margin-top: -12px;
  margin-bottom: 20px;
  font-style: italic;
  padding-left: 4px;
}

.map-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 24px;
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
  border: 1px solid var(--gray-light);
}

.page-hero--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.page-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,26,4,.82) 0%, rgba(46,105,20,.62) 100%);
  z-index: 0;
  pointer-events: none;
}

.page-hero--photo .page-hero__inner {
  position: relative;
  z-index: 1;
}

.team-photo-wrap {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gray-light);
}

.team-photo-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.team-photo-wrap figcaption {
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: .83rem;
  font-weight: 600;
  padding: 10px 16px;
  text-align: center;
}

/* =============================================================
   RAL 6018 – Hero Enhancements & Startseiten-Design
   ============================================================= */

/* Nav-Links: Text-Shadow für bessere Lesbarkeit auf RAL 6018 Header */
.nav__link {
  text-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* Active Nav-Link: heller Hintergrund statt nur transparent
   (war zuvor doppelt definiert – einmal oben bei den Basis-Nav-Regeln,
   einmal hier mit !important. Jetzt einmalig konsolidiert.) */
.nav__link.active { background: rgba(255,255,255,.18); color: var(--white); }

/* CTA-Banner: leicht updaten */
.cta-banner {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-main-dark) 50%, var(--green-main) 100%);
}

/* Page-Hero Untertitel: die frühere separate ".page-hero p { opacity .88 }"
   Regel wurde in die Basis-Definition weiter oben zusammengeführt (war
   zuvor doppelt definiert, siehe Nachtrag QA-Audit). */

/* Footer: Update auf RAL 6018 Palette
   (Hintergrundfarbe war hier nochmal identisch zur Basis-.footer-Regel
   gesetzt – reiner toter Code, da ohne Wirkung. Entfernt, die eigentliche
   Änderung dieser Stelle ist die Überschriftenfarbe.) */
.footer h4 {
  color: var(--green-light);
}

/* ── Timeline (Firmengeschichte) ── */
.timeline { position: relative; padding-left: 40px; margin-top: 36px; }
.timeline::before { content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--green-pale); }
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-item::before { content: ''; position: absolute; left: -33px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--green-main); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--green-main); }
.timeline-item__year { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green-dark); margin-bottom: 6px; }
.timeline-item h3 { color: var(--anthracite); font-size: 1.1rem; margin-bottom: 8px; }
.timeline-item p { color: var(--text-light); font-size: .93rem; line-height: 1.75; margin: 0; }
.timeline-item p + p { margin-top: 10px; }
/* Zebra-Hintergrund auf dem Zeitstrahl (geschichte.html) wurde entfernt,
   siehe Hinweis bei .steps-grid oben. */

/* ── Header Utility (Anruf-Servicemodul, Chatbot, Kundenportal, Suche, Hamburger) ── */
.header__utility { display: flex; align-items: center; gap: 4px; }
.search-trigger {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--green-dark);
  transition: var(--transition);
  flex-shrink: 0;
}
.search-trigger:hover { background: var(--green-pale); }
.search-trigger svg { width: 20px; height: 20px; }
.search-trigger { position: relative; }

/* Chatbot: Funktion ist noch nicht live (Button reagiert aktuell bewusst nicht,
   siehe onclick="return false" im Markup). Bis zum Launch ausgeblendet, aber
   im Markup belassen, damit der Chatbot künftig einfach an genau dieser Stelle
   (zwischen Anruf-Icon und Kundenportal) wieder erscheint – dazu einfach diese
   Zeile entfernen. */
#chatbotTrigger { display: none; }

/* ── Tooltips: Servicemodul, Chatbot, Kundenportal, Suche ── */
@media (hover: hover) and (pointer: fine) {
  [data-tooltip] { position: relative; }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--text);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    padding: 6px 11px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 70;
  }
  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: .25s;
  }
}

/* =====================================================
   Startseite – neue Inhaltsblöcke (echte Fotografie,
   Prozess-Schritte, Material-Checkliste, Vorher/Nachher)
   ===================================================== */

/* Prozess-Schritte (nummeriert, dezent industriell).
   Eigener Klassenname .process-steps--numbered statt (wie zuvor) einer
   zweiten Bedeutung von .process-steps: dieselbe Klasse trug bereits eine
   visuell andere Komponente (gestapelte .step-item-Kacheln, siehe weiter
   oben – u. a. auf autoverwertung.html im Einsatz). War im QA-Audit vom
   10.09.2026 als offener Punkt vermerkt ("Vorschlag: nummerierte Variante
   zu .process-steps--numbered umbenennen") – hier umgesetzt, da die
   Startseite die nummerierte Variante jetzt wieder aktiv nutzt. */
.process-steps--numbered { margin-top: 24px; border-top: 1px solid var(--gray-light); }
.process-step { display: flex; align-items: flex-start; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--gray-light); }
/* Bewusst KEIN Zebra-Hintergrund auf den einzelnen .process-step-Zeilen
   (weder hier noch bei .process-steps, siehe weiter oben): die grüne
   01/02/03-Nummer wirkte auf hellgrauem Grund zu dunkel/kontrastarm.
   Nummerierte Schritte bleiben deshalb durchgehend weiß. */
.process-step__num {
  flex: 0 0 auto;
  width: 56px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--green-main);
}
.process-step__body h4 { margin-bottom: 6px; font-size: 1rem; color: var(--anthracite); }
.process-step__body p { font-size: .9rem; color: var(--text-light); margin: 0; }
@media (max-width: 560px) {
  .process-step { gap: 16px; padding: 18px 0; }
  .process-step__num { width: 40px; font-size: 1.5rem; }
}

/* Zwei-Spalten Checkliste (Material-/Abfallarten) */
.check-list--cols { column-count: 2; column-gap: 32px; }
.check-list--cols li { break-inside: avoid; }
@media (max-width: 640px) { .check-list--cols { column-count: 1; } }

/* Checkliste ohne Aufzählungspunkt (z. B. Ablauf-/Prozessbeschreibungen) */
.check-list--no-bullet li::before { content: none; }

/* Checkliste mit fester Label-Spalte: Ohne diese Regel beginnt der
   Fließtext hinter dem fett gedruckten Label in jeder Zeile an einer
   anderen Stelle, weil die Label unterschiedlich lang sind
   ("Preisanfragen:" vs. "Selbstanlieferung Emmendingen:"). Eine feste
   Breite fürs Label sorgt dafür, dass der Text danach immer auf gleicher
   Höhe/Spalte anfängt. Auf schmalen Bildschirmen wird gestapelt, damit
   das Label nicht unnötig viel Platz wegnimmt. */
.check-list--label-col li > strong,
.check-list--label-col li > .check-list__link > strong { flex: 0 0 230px; }
@media (max-width: 480px) {
  .check-list--label-col li { flex-direction: column; gap: 4px; }
  .check-list--label-col li > .check-list__link { flex-direction: column; gap: 4px; }
  .check-list--label-col li > strong,
  .check-list--label-col li > .check-list__link > strong { flex-basis: auto; }
}

/* ── Such-Overlay ── */
.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,26,4,.55);
  z-index: 1100;
  padding: 120px 20px 40px;
  overflow-y: auto;
}
.search-overlay.open { display: block; }
.search-overlay__panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  margin: 0 auto;
  padding: 32px;
  position: relative;
}
.search-overlay__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: transparent; cursor: pointer;
  color: var(--text-light);
  transition: var(--transition);
}
.search-overlay__close:hover { background: var(--gray-bg); color: var(--green-dark); }
.search-overlay__panel h2 { font-size: 1.3rem; margin-bottom: 18px; padding-right: 40px; }
.search-overlay__form { display: flex; gap: 10px; }
.search-overlay__form .btn { flex-shrink: 0; }
.search-overlay__input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  border: 2px solid var(--gray-light);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  transition: var(--transition);
}
.search-overlay__input:focus { outline: none; border-color: var(--focus-ring); }
.search-overlay__results { margin-top: 20px; display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.search-result { display: block; padding: 12px 14px; border-radius: 0; text-decoration: none; transition: var(--transition); }
.search-result:hover { background: var(--green-pale); }
.search-result__title { font-weight: 600; color: var(--anthracite); font-size: .95rem; }
.search-result__desc { font-size: .82rem; color: var(--text-light); margin-top: 2px; }
.search-overlay__empty { font-size: .88rem; color: var(--text-light); margin-top: 16px; text-align: center; padding: 12px 0; }
@media (max-width: 600px) {
  .search-overlay { padding: 90px 14px 30px; }
  .search-overlay__panel { padding: 24px 20px; }
}

/* ============================================================
   RESPONSIVE / BREAKPOINTS
   Gängige, konsolidierte Breakpoints (Desktop-Basis, mit klar
   benannten Stufen für Tablet, Mobile und sehr kleine Mobile-
   Displays). Jede Stufe wird nur an EINER Stelle definiert, um
   Widersprüche/Duplikate zu vermeiden. Dieser Block steht bewusst
   am Ende der Datei, damit er alle weiter oben definierten
   Basis-Regeln zuverlässig überschreiben kann.
   Desktop  (Standard, keine Query nötig)  : > 1024px
   Tablet   (Querformat / kleiner Desktop) : ≤ 1024px
   Tablet   (Hochformat) / Mobile groß     : ≤ 768px
   Mobile                                  : ≤ 480px
   Mobile (sehr klein, z.B. iPhone SE)     : ≤ 375px
   ============================================================ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ── Tablet Hochformat / Mobile groß (≤ 768px) ── */
@media (max-width: 768px) {
  .header__logo-bar .container { padding-top: 14px; padding-bottom: 14px; padding-left: 16px; padding-right: 16px; }
  .logo__img { height: 32px; }
  .nav-panel { width: 100%; }

  .contact-grid { grid-template-columns: 1fr; }
  .page-layout { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
  .footer__bottom div { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: center; }
  .footer__bottom div a { margin-left: 0; }
  .footer-locations { grid-template-columns: 1fr; gap: 14px; }

  .section { padding: 56px 0; }
}

/* ── Zwischenstufe (≤ 600px): Logo/Icons verschlanken, bevor der
   Header sonst zu eng wird ── */
@media (max-width: 600px) {
  .logo__img { height: 26px; }
  .header__logo-bar .container { padding-left: 14px; padding-right: 14px; }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .btn { height: 46px; padding: 0 20px; font-size: .88rem; }
  .btn--lg { height: 52px; padding: 0 24px; font-size: .92rem; }
  .cta-banner__btns { flex-direction: column; align-items: center; }
  .cta-banner__btns .btn { width: 100%; justify-content: center; }

  /* Sektionen kompakter */
  .section { padding: 40px 0; }

  /* Header: schmalere Kopfzeile auf kleinen Smartphones */
  .header__utility { gap: 2px; }
  .logo__img { height: 20px; }
  .header__logo-bar .container { padding-left: 8px; padding-right: 8px; }

  /* Icons etwas verschlanken, damit Logo + Anruf/Kundenportal/Suche/Menü
     bei allen Breiten bis 376px nebeneinander passen, ohne umzubrechen
     oder über den Viewport-Rand hinauszulaufen. Klickfläche bleibt per
     Hit-Slop (unsichtbare ::before-Erweiterung) bei ~44px komfortabel. */
  .search-trigger, .hamburger { width: 38px; height: 38px; position: relative; }
  .search-trigger::before, .hamburger::before { content: ''; position: absolute; inset: -3px; }
}

/* ── Mobile, sehr klein (≤ 375px, z. B. iPhone SE) ── */
@media (max-width: 375px) {
  /* Kopfzeile weiter verschlanken: Logo und Icons noch etwas kompakter,
     damit alle vier Icons (Anruf, Kundenportal, Suche, Menü) plus Logo
     auch bei 320px Breite ohne Umbruch/Overflow nebeneinanderpassen.
     Touch-freundlich bleibt es per unsichtbarer Klickflächen-Erweiterung
     (Hit-Slop) bei ~44px Zielgröße. */
  .logo__img { height: 17px; }
  .header__logo-bar .container { padding-left: 6px; padding-right: 6px; }
  .header__utility { gap: 0; }
  .search-trigger, .hamburger {
    width: 34px;
    height: 34px;
    position: relative;
  }
  .search-trigger::before,
  .hamburger::before {
    content: '';
    position: absolute;
    inset: -5px;
  }
}

/* =========================================================================
   Cookie-Consent-Banner & Google-Maps-Consent-Gate
   ========================================================================= */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: var(--anthracite);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .25);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.cookie-banner--visible { transform: translateY(0); }
.cookie-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
}
.cookie-banner__inner p {
  margin: 0;
  flex: 1 1 420px;
  color: rgba(255, 255, 255, .92);
  font-size: .88rem;
  line-height: 1.6;
}
.cookie-banner__inner a { color: var(--green-light); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

.gmap-consent-wrap { position: relative; }
.gmap-consent-overlay { display: none; }
.gmap-consent-wrap--blocked iframe { visibility: hidden; }
.gmap-consent-wrap--blocked .gmap-consent-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: absolute;
  inset: 0;
  background: var(--gray-light);
  text-align: center;
  padding: 24px;
}
.gmap-consent-overlay p {
  margin: 0;
  max-width: 360px;
  color: var(--text-light);
  font-size: .85rem;
  line-height: 1.6;
}
.gmap-consent-overlay p a { color: var(--green-text); font-weight: 600; }

#cookieSettingsLink { cursor: pointer; }

@media (max-width: 640px) {
  .cookie-banner__inner { padding: 16px 20px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1 1 auto; }
}

/* ── RESPONSIVE FIX: Mindest-Schriftgröße Mobile (≤ 480px) ──────────────────
   Verhindert, dass em/rem-basierte Schriften auf kleinen Viewports unter
   14px fallen. Betrifft z. B. Tabellen, Badges, Metainfo-Felder. */
@media (max-width: 480px) {
  p, li, td, th, figcaption,
  .metal-card__body, .metal-card__price,
  .service-item__text, .info-badge,
  .table-responsive td, .table-responsive th,
  .akkordeon-body p, .akkordeon-body li,
  .demontage-list li, .auto-list li {
    font-size: max(14px, 0.875rem);
    line-height: 1.6;
  }
}