/* ==========================================================================
   Hirth & Scherer GbR – Nachbau hirth-scherer.com
   Alle Werte per getComputedStyle/getBoundingClientRect am Original gemessen.

   WICHTIG (Schriften): Das Original deklariert 'Oswald' und 'Open Sans',
   lädt aber KEINEN Webfont (kein Google-Fonts-Link, kein @font-face).
   Gerendert wird daher überall der System-Serif-Fallback (Times).
   Für 1:1-Treue werden hier exakt dieselben Font-Stacks OHNE Webfont-
   Einbindung verwendet – das Rendering entspricht damit dem Original.
   ========================================================================== */

:root {
  --green: rgb(48, 120, 39);          /* #307827 Primärgrün */
  --green-hover: rgb(40, 167, 69);    /* Hover Hero-Buttons */
  --green-dark: rgb(30, 75, 24);      /* Hover "Mehr zum Service" */
  --green-fav: rgb(51, 119, 33);      /* Favicon-Grün */
  --footer-bg: rgb(51, 51, 51);
  --text: rgb(102, 102, 102);
  --text-dark: rgb(23, 20, 34);
  --nav-gray: rgb(166, 166, 166);
  --divider-gray: rgb(163, 163, 163);
  --answer-gray: rgb(119, 119, 119);
  --link-blue: rgba(18, 53, 143, 1);
  --font-body: 'Open Sans', serif;    /* rendert wie Original: Serif-Fallback */
  --font-head: Oswald, serif;         /* rendert wie Original: Serif-Fallback */
  --font-system: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluide Größen: Originalwert ist ab 1024px exakt erreicht */
  --fs-h1-page: clamp(35px, calc(35px + 30 * (100vw - 320px) / 704), 65px);   /* 65 */
  --fs-h1-hero: clamp(28px, calc(28px + 26 * (100vw - 320px) / 704), 54px);   /* 54; Min 28px, damit „GARTENGERÄTE“ bei 320px nicht überläuft */
  --fs-h2-70:   clamp(34px, calc(34px + 36 * (100vw - 320px) / 704), 70px);   /* 70 */
  --fs-h2-54:   clamp(34px, calc(34px + 20 * (100vw - 320px) / 704), 54px);   /* 54 */
  --fs-h2-76:   clamp(43px, calc(43px + 33 * (100vw - 320px) / 704), 76px);   /* 76 */
  --fs-h2-45:   clamp(30px, calc(30px + 15 * (100vw - 320px) / 704), 45px);   /* 45 */
  --fs-sub-30:  clamp(20px, calc(20px + 10 * (100vw - 320px) / 704), 30px);   /* 30 */
  --fs-btn-28:  clamp(22px, calc(22px + 6 * (100vw - 320px) / 704), 28px);    /* 28 */
  --fs-foot-37: clamp(28px, calc(28px + 9 * (100vw - 320px) / 704), 37px);    /* 37 */
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
  padding-top: 120px; /* Ausgleich fixer Header (Original: .inhaltsbereich margin-top 120px) */
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--link-blue); }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Scroll-Reveal (Quix-Fade des Originals) */
.qx-fade { opacity: 0; transition: opacity 1s ease; }
.qx-fade.is-inview { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .qx-fade { opacity: 1; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Raster ---------- */
.row {
  display: flex; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto;
}
.col { padding: 15px; }
.col-30 { flex: 0 0 30%; max-width: 30%; }
.col-33 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-70 { flex: 0 0 70%; max-width: 70%; }
.col-40 { flex: 0 0 40%; max-width: 40%; }
.col-50 { flex: 0 0 50%; max-width: 50%; }
.col-60 { flex: 0 0 60%; max-width: 60%; }
.col-100 { flex: 0 0 100%; max-width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%;
  height: 80px;                              /* Original: .container 80px */
  background: #fff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  z-index: 9998;
  transition: transform 0.5s;
}
.site-header.header--hidden { transform: translateY(-120px); }
.site-header .kopf {
  background: #fff; height: 116px;           /* Original: Kopf 116px, ragt über die 80px-Leiste */
}
.kopf-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 15px;
  display: flex; justify-content: flex-start; align-items: flex-start;
  height: 116px;
}
.site-logo { display: block; margin-top: 15px; flex: 0 0 auto; }
.site-logo img { width: 390px; max-width: 100%; height: auto; display: block; } /* Original: fix 390×86 px */

.main-nav { margin-top: 38px; margin-left: 30px; }
.nav-toggle { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-nav a {
  display: block; height: 40px; line-height: 40px; padding: 0 20px;
  font-family: 'Open sans', serif;
  font-size: 16px; font-weight: 700; text-transform: uppercase;
  color: var(--nav-gray); text-decoration: none;
  transition: all 0.2s ease-out;
}
.main-nav a:hover, .main-nav li.active a { color: var(--green); }

/* Burger (Original-Stil dj-mobile-open-btn) */
.nav-toggle {
  display: none;
  margin-top: 37px;
  height: 42px; padding: 8px 8px;
  font-size: 25px; line-height: 1;
  background: #e4e4e4; color: #434343;
  border: 0; border-radius: 3px; cursor: pointer;
}

/* Offcanvas (Original: dunkles Panel, weiße Links, Trennlinien #555) */
.offcanvas {
  position: fixed; top: 0; left: 0; height: 100%;
  width: 280px; max-width: 85%;
  background: #333;
  z-index: 10001;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding-top: 54px;
}
.offcanvas.open { transform: translateX(0); }
.offcanvas ul { list-style: none; margin: 0; padding: 0; }
.offcanvas li { border-bottom: 1px solid #555555; }
.offcanvas a {
  display: block; padding: 0.9rem 1rem;
  color: #fff; text-decoration: none;
  font-family: var(--font-body); font-size: 16px; text-transform: uppercase; font-weight: 700;
}
.offcanvas a:hover, .offcanvas li.active > a {
  background-color: #444343; text-decoration: none;
}
.offcanvas-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer; padding: 6px 10px;
}
.offcanvas-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
  z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.offcanvas-overlay.open { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; text-decoration: none; text-align: center;
  border-radius: 1px; cursor: pointer;
  transition: background 0.3s, opacity 0.3s ease-in, border 0.3s ease-in, box-shadow 0.3s ease-in; }
.btn-outline {
  background: transparent; border: 2px solid #fff; color: #fff;
}
.btn-hero { display: block; width: 100%;
  font-family: var(--font-body); font-size: 20px; padding: 15px 12px; }
.btn-hero:hover { background: var(--green-hover); color: rgb(255, 252, 252); }
.btn-cta { font-family: var(--font-head); font-size: var(--fs-btn-28); padding: 10px 20px; }
.btn-cta:hover { background: var(--green); }
.btn-green {
  background: var(--green); border: 1px solid #fff; color: #fff;
  font-family: var(--font-head); font-size: var(--fs-btn-28); padding: 10px 20px;
}
.btn-green:hover { background: var(--green-dark); color: #fff; }

/* ---------- Hero (Start) ---------- */
.hero {
  background-image: url("../images/image.png");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  padding: 0 0 50px;
  display: flow-root; /* verhindert Margin-Collapse der Box */
}
.hero-box {
  max-width: 1200px; margin: 0 auto;
  margin-top: 400px;                          /* Original: col-wrap margin-top 400px */
  padding: 40px;
  background: rgba(48, 120, 39, 0.64);        /* halbtransparentes Grün */
}
.hero-box .pre {
  font-size: var(--fs-sub-30); font-weight: 300; line-height: 1.5; color: #fff; margin: 0;
}
.hero-box h1 {
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-h1-hero); line-height: 1.2; text-transform: uppercase;
  color: #fff; margin: 20px 0 30px; padding-bottom: 10px;
}
.hero-box .sub {
  font-size: var(--fs-sub-30); font-weight: 300; line-height: 1.5; color: #fff; margin: 0 0 30px;
}
.hero-buttons { display: flex; flex-wrap: wrap; margin: 0 0 30px; padding: 0; }
.hero-buttons .col { padding: 0 15px 0 0; }

/* ---------- Sektionen allgemein ---------- */
.section { padding: 80px 0; }
.services { padding-top: 110px; } /* 80px + 30px Leer-Reihe des Originals */
.section-heading {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h2-54); line-height: 1.6; text-transform: uppercase;
  color: var(--green); text-align: center; margin: 0; padding: 0;
}
.divider { text-align: center; margin-top: 20px; padding: 11px 0 40px; }
.divider span {
  display: block; margin: 0 auto; width: 19%;
  border-top: 3px solid var(--divider-gray);
}

/* Kicker/Überschriften der Unterseiten */
.kicker {
  font-family: var(--font-head); font-weight: 500; font-size: 16px;
  line-height: 1.1; text-transform: uppercase; letter-spacing: 0;
  color: rgba(0, 0, 0, 0.82); margin: 0 0 10px;
}
.kicker.light { color: #fff; }
.kicker.dark { color: rgb(51, 51, 51); }
.h2-70 {
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-h2-70); line-height: 1.1; text-transform: uppercase;
  color: var(--green); margin: 0; padding: 15px 0;
}
.h2-70.light { color: #fff; }
.h2-70.fw-500 { font-weight: 500; }

/* ---------- Service-Blurbs (Start) ---------- */
.blurb { text-align: center; }
.blurb img { display: block; margin: 0 auto 30px; }
.blurb h3 {
  font-family: var(--font-head); font-weight: 400;
  font-size: 27px; line-height: 1.4; color: var(--green); margin: 0 0 20px;
}
.blurb .pad-top { padding-top: 25px; }
.blurb img.tight { margin-bottom: 20px; }
.services .row-pull { margin-top: -50px; }  /* Original: row margin-top -50 */
.services .btn-row { text-align: center; padding: 15px; margin-top: 0; }

/* ---------- CTA-Band (Start, grasgrüner Hintergrund + Overlay) ---------- */
.cta-band {
  position: relative;
  background-image: url("../images/meadow-2184989_1920.jpg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  padding: 80px 0;
}
.cta-band .overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.82); opacity: 0.74;   /* Original: zwei Lagen (Farbe × Element-Opacity) */
}
.cta-band.overlay-weak .overlay { opacity: 0.39; }   /* Leistungen-Karten-Sektion */
.cta-band.overlay-mid .overlay { opacity: 0.64; }    /* FAQ-CTA */
.cta-band .row { position: relative; z-index: 1; }
.cta-band h2 {
  font-family: var(--font-head); font-weight: 400;
  font-size: var(--fs-h2-76); line-height: 1.4; color: #fff;
  text-align: center; margin: 0; padding: 0;
}
.cta-band p:not(.kicker) { color: #fff; font-size: 20px; line-height: 1.5; text-align: center; margin: 20px 0 0; }
.cta-band .btn-row { text-align: center; margin-top: 20px; }

/* Leerer Abstands-Abschnitt (Original qx-section-4188) */
.spacer-section { padding: 80px 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); padding: 80px 0 20px; }
.site-footer h2, .site-footer h3 { color: #fff; margin: 0; }
.footer-brand h2 {
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-foot-37); line-height: 1.6; text-transform: uppercase;
}
.footer-brand p { color: #fff; font-size: 20px; line-height: 1.5; margin: 20px 0 0; }
.footer-brand h3 {
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-foot-37); line-height: 1.4; color: rgb(255, 253, 253); margin-top: 20px;
}
.footer-hours p { color: #fff; font-size: 16px; line-height: 1.5; margin: 20px 0 0; }
.footer-hours p:first-child { margin-top: 0; }
.footer-col h2.small {
  font-family: var(--font-head); font-weight: 300; font-size: 25px; line-height: 1.6;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li {
  border-bottom: 1px solid #fff; border-radius: 1px;
  margin-top: 20px; padding-bottom: 0;
}
.footer-links a { color: #fff; font-size: 20px; text-decoration: none; font-family: var(--font-body); }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-col p { color: #fff; font-size: 20px; line-height: 1.5; margin: 20px 0 0; }
.footer-col p a { color: #fff; text-decoration: none; }
.footer-col h2.small + p { margin-top: 20px; }
.footer-col .group + .group { margin-top: 20px; }
.footer-copyright { color: rgb(255, 253, 253); font-size: 12px; line-height: 1.5; margin: 20px 0 0; }
.footer-copyright a { color: #fff; }

/* ---------- Marken-Leiste ---------- */
.col-20 { flex: 0 0 20%; max-width: 20%; }
.col-sp { flex: 0 0 10%; max-width: 10%; }
.brands { background: #fff; }
.brands img, .brand-img { display: block; margin: 0 auto; width: 210px; max-width: 100%; }
.brands .row + .row img { margin-top: -8px; }
.marken .col-20 { padding: 15px; }

/* ---------- Popup (Betriebsferien, Original .neo-popup) ---------- */
.neo-popup {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 9999;
  display: flex; justify-content: center; align-items: center;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
.neo-popup.active { visibility: visible; opacity: 1; pointer-events: auto; }
.neo-popup .box {
  background: #fff; padding: 40px 35px; border-radius: 14px;
  max-width: 620px; width: 90%; position: relative; text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.neo-popup .box .close {
  position: absolute; top: 12px; right: 16px; font-size: 28px;
  cursor: pointer; opacity: 0.6;
}
.neo-popup .box .close:hover { opacity: 1; }
.neo-popup .box img { width: 100%; height: auto; border-radius: 10px; margin: 15px 0; display: block; }
.neo-popup .box h2 {
  font-family: 'Open Sans', sans-serif; font-size: 28px; font-weight: 700;
  color: #000; margin: 0 0 10px;
}
.neo-popup .box p { margin: 10px 0; font-size: 20px; line-height: 1.4; color: var(--text); }

/* ---------- Back to top (Original .cd-top) ---------- */
.cd-top {
  display: inline-block; height: 40px; width: 40px;
  position: fixed; bottom: 40px; right: 10px; z-index: 9000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  overflow: hidden; text-indent: 100%; white-space: nowrap;
  background: rgb(78, 18, 8) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='2' d='M4 15l8-8 8 8'/></svg>") no-repeat center 50%;
  visibility: hidden; opacity: 0;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-top.cd-is-visible { visibility: visible; opacity: 0.8; transition: opacity 0.3s 0s, visibility 0s 0s; }
.cd-top.cd-fade-out { opacity: 0.8; }
.cd-top:hover { background-color: #A63030; opacity: 0.8; }
@media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } }
@media only screen and (min-width: 1024px) { .cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px; } }

/* ---------- Cookie-Banner ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  background: rgba(34, 34, 34, 0.97); color: #fff;
  padding: 14px 20px; font-size: 14px; font-family: var(--font-body);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center;
  text-align: center;
}
.cookie-banner a { color: #9fd08f; }
.cookie-banner button {
  background: var(--green); color: #fff; border: 0; border-radius: 1px;
  font-family: var(--font-body); font-size: 14px; padding: 8px 22px; cursor: pointer;
}
.cookie-banner button:hover { background: var(--green-dark); }
/* Solange Banner sichtbar: unten Platz reservieren, damit Footer-Links frei bleiben */
body.cookie-open { padding-bottom: 90px; }
body.cookie-open .cd-top { bottom: 100px; }

/* ==========================================================================
   Unterseiten
   ========================================================================== */

/* Grünes Kopf-Band (FAQ, Kontakt).
   Hinweis: Das Original referenziert zusätzlich images//Joomhost/header-bg.png –
   die Datei liefert 404 und wurde nie angezeigt; das Band ist daher rein grün. */
.page-band { background: var(--green); padding: 30px 0; }
.page-band .pre { color: #fff; font-size: 16px; line-height: 27px; margin: 0; font-family: var(--font-body); }
.page-band h1 {
  font-family: var(--font-head); font-size: var(--fs-h1-page); font-weight: 700;
  line-height: 1.155; text-transform: uppercase; color: #fff; margin: 0 0 45px; padding: 0;
}
.page-band.center { text-align: center; }
.page-band.center h1 { margin-bottom: 0; }
.page-band .col { padding-bottom: 0; }


.faq-cta h2.cta-left {
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-h2-45); line-height: 1.2; color: #fff;
  text-align: left; margin: 0; padding: 0;
}
.faq-cta .kicker { margin: 20px 0 0; }
.faq-cta .btn-col { text-align: right; }
.btn-faq {
  font-family: var(--font-head); font-size: 22px; padding: 15px 35px; text-transform: uppercase;
  margin-top: 13px;
}
.btn-faq:hover { background: var(--green); }
@media (max-width: 1024px) {
  .faq-cta .btn-col { text-align: left; }
}

/* Textseiten (Impressum/Datenschutz) */
.legal h1 {
  font-family: var(--font-head); font-size: var(--fs-h1-page); font-weight: 700;
  color: var(--green); margin: 0 0 30px; padding-bottom: 10px;
}
.legal { padding: 40px 0 80px; }
.legal p, .legal li { font-size: 20px; line-height: 1.5; color: var(--text); margin: 0 0 30px; }
.legal li { margin: 0 0 10px; }
.legal h2, .legal h3 { font-size: 20px; line-height: 1.5; color: var(--text); font-family: var(--font-body); font-weight: 700; margin: 30px 0 30px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--link-blue); }

/* Über-uns-Band (Hirth & Scherer) */
.about-band {
  position: relative;
  background-image: url("../images/meadow-2184989_1920.jpg");
  background-size: cover; background-position: center;
  padding: 0;
  display: flow-root;
}
.about-band > .overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.82); opacity: 0.47;  /* Original: zwei Lagen */
}
.about-band .inner { position: relative; z-index: 1; }
.about-band .inner {
  max-width: 1200px; margin: 0 auto;
}
.about-box {
  width: 906px; max-width: calc(100% - 30px);
  margin: 35px 24px 25px auto;              /* Original: Box sitzt rechtsbündig im Container */
  background: rgba(48, 120, 39, 0.64);
  padding: 40px; text-align: left;
}
.about-box .kicker { color: #fff; }
.about-box .h2-70 { margin-bottom: 30px; text-align: left; }
.about-box h2 { color: #fff; }
.about-box p { color: #fff; font-size: 18px; line-height: 1.7; margin: 20px 0 0; }
.container-sm { max-width: 690px; margin: 0 auto; }
.about-box p.kicker { margin: 0 0 10px; font-size: 16px; line-height: 1.1; }
.about-box .btn-row { margin-top: 20px; }
.about-box .btn-about { font-family: var(--font-body); font-size: 20px; padding: 16px 46px; }
.about-box .btn-about:hover { background: var(--green-hover); color: rgb(255, 252, 252); }

/* Marken-Grid (Unterseite) */
.marken { padding: 80px 0; text-align: center; }
.marken .grid1 { margin-top: 75px; }
.marken .h2-70 { color: rgba(48, 120, 39, 0.87); }

/* Rezensionen */
.review-band { background: var(--green); padding: 80px 0; text-align: center; }
.review-band .kicker { color: #fff; }
.review-band h2 { color: #fff; }
.review-band .container-sm > p:not(.kicker) { color: #fff; font-size: 20px; line-height: 1.5; margin: 20px 0 36px; }

.feedback { padding: 90px 0 100px; }
.feedback .row { align-items: flex-start; }
.testi { margin-top: 184px; }
.feedback-img img { display: block; width: 100%; }
@media (min-width: 1230px) {
  /* Original: Bild ragt 80px über den Container hinaus – nur bei voller Containerbreite */
  .feedback-img img { width: 600px; max-width: none; margin-left: -80px; }
}
.testi { position: relative; }
.testi .quote-icon { color: var(--green); margin-bottom: 29px; display: block; }
.testi-viewport { overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.testi-viewport.dragging { cursor: grabbing; }
.testi-track { display: flex; transition: transform 0.5s ease; margin: 0; padding: 0; list-style: none; }
.testi-slide { flex: 0 0 100%; min-width: 100%; }
.testi-slide p.quote { font-size: 24px; font-style: italic; line-height: 1.7; color: var(--text-dark); margin: 0 0 35px; }
.testi-slide p.name { font-size: 24px; color: var(--text-dark); margin: 0; }
.testi-dots { list-style: none; display: flex; justify-content: center; gap: 12px; margin: 20px 0 0; padding: 0; }
.testi-dots button {
  width: 15px; height: 15px; border-radius: 50%; border: 0; padding: 0;
  background: var(--green); cursor: pointer;
}
.testi-dots li.active button { background: rgba(0, 0, 0, 0.82); }

/* Zertifikate */
.cert-band { background: var(--green); padding: 80px 0; text-align: center; }
.cert-band .kicker, .cert-band h2, .cert-band p { color: #fff; }
.cert-band .container-sm > p:not(.kicker) { font-size: 20px; line-height: 1.5; margin: 20px 0 36px; }
.gallery { padding: 80px 0 82px; }
.gallery ul { list-style: none; display: flex; flex-wrap: wrap; margin: 0 auto; padding: 0; max-width: 1200px; }
.gallery li { flex: 0 0 20%; max-width: 20%; padding: 15px; text-align: center; }
.gallery a { display: inline-block; }
.gallery img { display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto; }
@media (min-width: 1230px) {
  .gallery img { width: 210px; height: 286px; object-fit: cover; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(0, 0, 0, 0.9);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 88vw; max-height: 88vh; width: auto; height: auto; display: block; }
.lightbox .lb-close {
  position: absolute; top: 10px; right: 18px; background: none; border: 0;
  color: #fff; font-size: 34px; cursor: pointer; line-height: 1; padding: 6px;
}
.lightbox .lb-prev, .lightbox .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; font-size: 44px; cursor: pointer; padding: 10px 16px;
  font-family: var(--font-system);
}
.lightbox .lb-prev { left: 10px; }
.lightbox .lb-next { right: 10px; }
.lightbox .lb-caption {
  position: absolute; bottom: 14px; left: 0; right: 0;
  color: #fff; text-align: center; font-size: 15px; font-family: var(--font-system);
}

/* ---------- Leistungen ---------- */
.intro-section { padding: 0 0 30px; text-align: center; }
.cta-band.service-cards { padding: 90px 0 100px; }
.service-cards .card {
  background: #fff; height: 100%;
  padding: 50px 35px 40px; text-align: center;
}
.service-cards .card img { display: block; margin: 0 auto 20px; }
.service-cards .col { display: flex; flex-direction: column; }
.service-cards .card h3 {
  font-family: var(--font-head); font-weight: 500;
  font-size: 30px; line-height: 1.2; color: var(--green); margin: 0 0 15px;
}
.service-cards .card p { font-size: 20px; line-height: 1.7; color: var(--text-dark); margin: 0; }

.visit .row { align-items: flex-start; }
.visit { padding: 80px 0 97px; }
.visit .h2-70 { text-align: left; }
.visit img { display: block; width: 100%; margin: 0; }
@media (min-width: 1230px) {
  .visit img { width: 620px; max-width: none; margin: 55px 0 0 -50px; }
} /* Original: Bild ragt 50px über den Container */
.visit .text-col { padding-left: 65px; }
.visit .text-col .kicker { margin-top: 20px; }
.visit p:not(.kicker) { font-size: 20px; line-height: 1.7; color: var(--text-dark); margin: 20px 0 0; }

.cta-green { background: var(--green); padding: 80px 0; }
.cta-green .row { align-items: flex-start; }
.cta-green h2 {
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-h2-45); line-height: 1.42; color: #fff; margin: 0;
}
.cta-green .kicker { color: #fff; margin: 30px 0 0; }
.cta-green .btn-col { text-align: right; }
.cta-green .btn-band {
  font-family: var(--font-head); font-size: 20px; padding: 15px 35px; text-transform: uppercase;
  margin-top: 25px;
}
@media (min-width: 1440px) {
  .cta-green .btn-band { white-space: nowrap; } /* wie Original: einzeilig, ragt in der Reihe nach rechts */
}
.cta-green .btn-band:hover { background: #fff; color: var(--green); }

/* ---------- FAQ ---------- */
.faq-list { padding: 80px 0 100px; }
.faq-list .row + .row { margin-top: 20px; }
.faq-item h4 {
  font-family: var(--font-system);
  font-size: 20px; font-weight: 700; line-height: 1.4;
  color: var(--green); margin: 0 0 20px;
}
.faq-item p { font-size: 15px; line-height: 1.8; color: var(--answer-gray); margin: 0 0 20px; }
.faq-item p:last-child { margin-bottom: 0; }

/* ---------- Kontakt ---------- */
.contact-section { padding: 80px 0; }
.contact-section h2 {
  font-family: 'Open Sans', sans-serif; font-weight: 300;
  font-size: 33px; line-height: 1.6; color: var(--green);
  margin: 0; padding: 15px 0;
}
.contact-section .intro { font-size: 16px; line-height: 24px; min-height: 68px; color: var(--text); margin: 21px 0 30px; }
.contact-form { padding: 0 5px; }
.contact-form .field { margin-bottom: 23px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px;
  color: rgb(73, 80, 87); background: #fff;
  border: 1px solid rgb(206, 212, 218); border-radius: 4px;
  padding: 6px 12px; height: 38px;
}
.contact-form textarea { height: auto; min-height: 98px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(48, 120, 39, 0.15);
}
/* Honeypot: unsichtbar für Menschen */
.contact-form .hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }
.contact-form button[type="submit"] {
  display: block; width: 100%;
  background: var(--green); color: #fff; border: 0; border-radius: 1px;
  font-family: var(--font-head); font-size: 29px; line-height: 1.5; padding: 18px 20px;
  cursor: pointer; transition: background 0.3s;
}
.contact-form button[type="submit"]:hover { background: var(--green-dark); }
.contact-form button[type="submit"][disabled] { opacity: 0.6; cursor: wait; }
.form-feedback { margin: 0 0 20px; padding: 12px 16px; border-radius: 4px; font-size: 16px; display: none; }
.form-feedback.show { display: block; }
.form-feedback.ok { background: #e6f4e6; color: #1e4b18; border: 1px solid #9fd08f; }
.form-feedback.err { background: #fdecea; color: #8a1f11; border: 1px solid #f5c6cb; }
.field-error { color: #8a1f11; font-size: 14px; margin: 4px 0 0; display: none; }
.field-error.show { display: block; }
.contact-form .invalid { border-color: #c0392b !important; }

.map-section { padding: 0; line-height: 0; }
.map-section iframe { width: 100%; height: 400px; border: 0; display: block; }

/* ---------- 404 ---------- */
.error-page { text-align: center; padding: 60px 0 100px; }
.error-page .code {
  font-family: var(--font-head); font-size: clamp(90px, 16vw, 180px);
  font-weight: 700; color: var(--green); line-height: 1; margin: 0;
}
.error-page h1 {
  font-family: var(--font-head); font-size: var(--fs-h2-54);
  text-transform: uppercase; color: var(--green); margin: 10px 0 0;
}
.error-page p { font-size: 20px; margin: 25px 0 35px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet (Original-Sektionspadding 40px) */
@media (max-width: 1024px) {
  .services { padding-top: 70px; }
  .service-cards .card { padding: 40px 20px 30px; }
  .service-cards .card h3 { font-size: 24px; }
  .service-cards .card p { font-size: 17px; }
  .cta-green .col-70, .cta-green .col-30, .faq-cta .col-70, .faq-cta .col-30 { flex: 0 0 100%; max-width: 100%; }
  .faq-cta .btn-col { text-align: left; }
  .btn-faq { margin-top: 0; }
  .cta-green h2 { margin-top: 0; }
  .cta-green .btn-band { margin-top: 20px; white-space: normal; }
  .cta-green { padding: 40px 0; }
  .section, .cta-band, .spacer-section, .site-footer, .review-band,
  .cert-band, .marken, .visit, .cta-green, .faq-list { padding-top: 40px; padding-bottom: 40px; }
  .site-footer { padding-bottom: 20px; }
  .main-nav { display: none; }
  .nav-toggle { display: inline-block; }
  .hero-box { margin-top: 260px; margin-left: 15px; margin-right: 15px; }
  .about-box { margin-left: 15px; margin-right: 15px; }
  .divider span { width: 25%; }
  .site-logo img { width: 320px; }
  .kopf-inner { align-items: center; }
  .site-logo { margin-top: 0; }
  .nav-toggle { margin-top: 0; }
  .site-header, .site-header .kopf { height: 90px; }
  .kopf-inner { height: 90px; }
  body { padding-top: 90px; }
  .site-header.header--hidden { transform: translateY(-92px); }
  .cta-green .btn-col { text-align: left; }
}

@media (max-width: 767px) {
  .services { padding-top: 50px; }
  .visit .text-col { padding-left: 15px; }
  .cta-band.service-cards { padding: 20px 0; }
  .about-box { margin: 20px auto; }
  .testi { margin-top: 20px; }
  .section, .cta-band, .spacer-section, .site-footer, .review-band,
  .cert-band, .marken, .visit, .cta-green, .faq-list { padding-top: 20px; padding-bottom: 20px; }
  .col-30, .col-33, .col-40, .col-50, .col-60, .col-70 { flex: 0 0 100%; max-width: 100%; }
  .brands .col-20 { flex: 0 0 50%; max-width: 50%; }
  .brands .col-sp { display: none; }
  .gallery li { flex: 0 0 50%; max-width: 50%; }
  .feedback { padding: 40px 0; }
  .divider span { width: 18%; }
  .hero { padding: 20px 0; }
  .hero-box { margin-top: 180px; padding: 25px; }
  .hero-buttons .col { flex: 0 0 100%; max-width: 100%; padding: 0; }
  .hero-buttons .col + .col { margin-top: 15px; }
  .services .row + .row { margin-top: 0; }
  .site-logo img { width: 240px; }
  .footer-copyright { margin-top: 25px; }
  .contact-form button[type="submit"] { font-size: 24px; }
  .map-section iframe { height: 320px; }
  .visit img { width: 100%; }
  .page-band h1 { margin-bottom: 10px; }
}

@media (max-width: 500px) {
  /* Original-Mobilregeln */
  .legal h1, .page-band h1 { font-size: 35px; line-height: 45px; padding-bottom: 10px; }
  .contact-section h2 { font-size: 30px; line-height: 40px; }
  .site-logo img { width: 200px; }
}

/* Zwei Bilder/Karten nebeneinander bleiben bis 768px erhalten (siehe brands/gallery oben) */
@media (max-width: 420px) {
  .brands .col-20 { flex: 0 0 100%; max-width: 100%; }
}