/* ============================================================
   JMF – Haus & Garten · Design-System v4 (09/2026)
   Marke: dunkel, grün, robust, sauber. Digitale Verlängerung der
   Arbeitskleidung: Anthrazit + Waldgrün als Flächen, Blattgrün als
   einziger Akzent, kompakte Versal-Headlines, eine Handschrift als
   sparsamer Akzent. Formsprache aus dem Signet: die Dachlinie.
   ============================================================ */

/* ---------- Schriften · self-hosted (DSGVO), SIL Open Font License ----------
   Barlow Semi Condensed traegt Headlines und Zahlen (kompakt, kraeftig,
   Workwear-Charakter), Barlow den Fliesstext (dieselbe Familie, ruhig).
   Caveat ist die Handschrift fuer maximal eine Zeile pro Seite. */
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/barlowsc-600-latin.woff2') 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: 'Barlow Semi Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/barlowsc-600-latinext.woff2') 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: 'Barlow Semi Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/barlowsc-700-latin.woff2') 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: 'Barlow Semi Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/barlowsc-700-latinext.woff2') 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: 'Barlow Semi Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/barlowsc-800-latin.woff2') 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: 'Barlow Semi Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/barlowsc-800-latinext.woff2') 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: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/barlow-400-latin.woff2') 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: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/barlow-400-latinext.woff2') 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: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/barlow-500-latin.woff2') 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: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/barlow-500-latinext.woff2') 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: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/barlow-600-latin.woff2') 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: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/barlow-600-latinext.woff2') 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: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/barlow-700-latin.woff2') 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: 'Barlow'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/barlow-700-latinext.woff2') 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: 'Caveat'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('fonts/caveat-400-700-latin.woff2') 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: 'Caveat'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('fonts/caveat-400-700-latinext.woff2') 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; }

:root {
  /* ======================================================================
     FARBE – aus den Logodateien und dem Moodboard abgeleitet.
     Blattgruen #8DB66A ist die Blattfarbe aller Logofassungen.
     #22262A ist das Anthrazit der Buchstaben in der hellen Fassung.
     #F3F3F3 ist die Buchstabenfarbe der farbigen Fassung -> Textweiss.

     REGEL – strikt einhalten:
       --gruen      #8DB66A  NUR auf dunklem Grund (7,6:1 auf --bg, 5,3:1 auf --wald-2)
       --gruen-tief #3F6B24  NUR auf hellem Grund (5,5:1 auf --hell)
     Fläche wechseln = Akzent-Token wechseln. .section--light dreht es automatisch.
     Alle Paare gerechnet (WCAG 2.1), Stand 15.09.2026.
     ====================================================================== */
  --bg: #111518;          /* Grundton = Anthrazit aus dem Header (Daraz, 15.09.) */
  --bg-2: #181C1F;        /* abgesetzte Sektion, neutral */
  --bg-0: #0C0F11;        /* Footer - eine Stufe tiefer als der Grundton */
  --wald: #1F3329;        /* Waldgruen-Flaeche (Workwear) */
  --wald-2: #24392E;      /* Waldgruen, angehoben */
  --anth: #22262A;        /* Anthrazit (Logo) – Panels, Header solide */
  --anth-2: #2A2F34;      /* Anthrazit, angehoben (Hover) */
  --anth-950: #111518;    /* tiefste Flaeche, Footer */

  --hell: #F0F0EE;        /* Off White */
  --hell-2: #E4E5E2;      /* Off White, abgesetzt */
  --white: #FFFFFF;

  --text: #F3F3F3;
  --text-2: #C7CBCE;
  --text-3: #9EA3A8;      /* unterste erlaubte Stufe auf dunkel (6,0:1 auf --anth) */

  --ink: #181C1F;         /* Text auf hell */
  --ink-2: #3C4146;
  --ink-3: #5E6368;       /* 5,3:1 auf --hell */

  --gruen: #8DB66A;       /* Blattgruen – Akzent auf dunkel */
  --gruen-hell: #A6C98A;  /* Hover des Akzents auf dunkel */
  --gruen-600: #74A83A;   /* Verlaufsende im Logo – Flaechen, Linien */
  --gruen-tief: #3F6B24;  /* Akzent auf hell */
  --gruen-tief-2: #35591F;/* Hover auf hell */
  --gruen-ink: #14180F;   /* Text AUF Blattgruen-Flaeche (7,4:1) */

  --line: rgba(243, 243, 243, .13);         /* dekorativ auf dunkel */
  --line-strong: #6E7478;                    /* funktionale Raender auf dunkel, >= 3:1 */
  --line-light: rgba(24, 28, 31, .16);       /* dekorativ auf hell */
  --line-light-strong: #85898C;              /* funktionale Raender auf hell */

  --ok: #A6C98A;
  --err: #F0B4A6;

  /* ---------- SCHRIFT ---------- */
  --font-display: 'Barlow Semi Condensed', 'Barlow', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-script: 'Caveat', 'Segoe Script', cursive;

  /* Typo-Skala. Display und H1/H2 laufen in Versalien in der Semi Condensed –
     deshalb duerfen sie groesser sein als in einer normalbreiten Schrift. */
  --fs-display: clamp(3.6rem, 9.2vw, 8.2rem);
  --fs-h1: clamp(2.7rem, 6vw, 5.2rem);
  --fs-h2: clamp(2.2rem, 4.2vw, 3.6rem);
  --fs-h3: clamp(1.25rem, 1.7vw, 1.55rem);
  --fs-lead: clamp(1.14rem, 1.5vw, 1.32rem);
  --fs-body: 1.0625rem;
  --fs-sm: .94rem;
  --fs-label: .78rem;

  /* ---------- ABSTAENDE ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --sp-section: clamp(80px, 10vw, 150px);
  --sp-block: clamp(32px, 4vw, 56px);
  --sp-gap: clamp(28px, 4vw, 66px);

  /* ---------- FORM ---------- */
  --maxw: 1240px;
  --r-sm: 3px;
  --r: 4px;               /* Buttons, Felder – kantig, robust */
  --r-lg: 6px;            /* Bilder, Panels */
  --r-pill: 999px;        /* nur Merkmal-Chips */
  /* Kopfleiste: fixed, liegt ueber dem Hero. Initial hoch (Logo 60px),
     nach dem ersten Scroll kompakt (--header-c). Sprungleisten und
     scroll-margin rechnen mit der KOMPAKTEN Hoehe, weil man dort immer
     schon gescrollt hat. */
  --header-h: 92px;
  --header-c: 70px;

  /* ---------- ELEVATION ---------- */
  --el-1: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.25);
  --el-2: 0 6px 18px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.35);

  /* ---------- BEWEGUNG ----------
     Ruhig und bestimmt. Bewegt wird opacity, transform, clip-path.
     Ease-out fuer alles, was erscheint. Kein Bounce. */
  --dur-0: 120ms;
  --dur-1: 200ms;
  --dur-2: 320ms;
  --dur-3: 520ms;
  --dur-4: 720ms;
  --stagger: 70ms;
  --stagger-line: 90ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(.16, .84, .3, 1);
}

/* ============================================================
   Basis
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--anth-2) var(--bg); }
[hidden] { display: none !important; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  caret-color: var(--gruen);
  accent-color: var(--gruen);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gruen); color: var(--gruen-ink); }
b, strong { font-weight: 600; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 3vw, 40px); }
.section { padding: var(--sp-section) 0; }
.section--tight { padding: var(--sp-block) 0; }

.section--dark, .section--tann { background: var(--anth); color: var(--text); }   /* frueher Waldgruen - Gruen ist nur noch Akzent */
.section--deep, .section--stein { background: var(--bg-2); color: var(--text); }
.section--anth { background: var(--anth); color: var(--text); }
.section--light { background: var(--hell); color: var(--ink); }
.section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: var(--ink); }
.section--light .lead { color: var(--ink-2); }
.section--light .muted { color: var(--ink-3); }

/* Dachlinien-Trenner: der Uebergang zwischen zwei Sektionen traegt den
   Knick aus dem Signet. Die Flaeche OBERHALB der Linie bekommt die Farbe der
   vorangehenden Sektion (--roof-from, Standard --bg) und liegt INNERHALB der
   eigenen Sektion - nichts ragt in die Nachbarsektion und ueberdeckt dort Inhalt. */
.section--roof { --roof-from: var(--bg); --roof-h: clamp(40px, 5vw, 84px); position: relative; padding-top: calc(var(--sp-section) + var(--roof-h)); }
.section--roof::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: calc(var(--roof-h) + 1px);
  background: var(--roof-from);
  clip-path: polygon(0 0, 100% 0, 100% 64%, 58% 0, 40% 6%, 40% 0, 36% 0, 36% 10%, 0 46%);
  pointer-events: none;
}

/* ============================================================
   Typografie
   ============================================================ */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); }
h1, h2, .display {
  hyphens: manual;
  overflow-wrap: anywhere;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .94;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: .88; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.18; letter-spacing: 0; }
h4 { font-size: 1.05rem; font-weight: 700; }
p { max-width: 64ch; text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 58ch; }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }

/* Ueberschrift + Vorspann als Block: mehr Luft darueber als darunter */
.head { margin-bottom: var(--sp-block); }
.head h2 + .lead, .head h1 + .lead { margin-top: 18px; }
.head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.head--row .lead { margin-top: 0; }

/* Label / Typenschild – nur fuer DATEN (Dachart, Kategorie), nie als Kicker */
.label {
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.section--light .label { color: var(--ink-3); }

/* Handschrift – SPARSAM. Eine Zeile, nie Fliesstext. */
.script {
  font-family: var(--font-script); font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15;
  color: var(--gruen); letter-spacing: .005em;
  text-transform: none;
}
.section--light .script { color: var(--gruen-tief); }

/* Gruen im Text (Headline-Zeile, Zahl) */
.g { color: var(--gruen); }
.section--light .g { color: var(--gruen-tief); }

/* Abstands-Utilities */
.mb-block { margin-bottom: var(--sp-block); }
.mb-gap { margin-bottom: var(--sp-gap); }
.mt-block { margin-top: var(--sp-block); }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; } .mt-6 { margin-top: 32px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-gap); align-items: start; }
.grid-2--center { align-items: center; }
.stack { display: grid; gap: clamp(48px, 7vw, 96px); }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   Bedienelemente
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.08rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 15px 26px; border-radius: var(--r);
  border: 1.5px solid transparent; cursor: pointer; line-height: 1.1;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--gruen); color: var(--gruen-ink); border-color: var(--gruen); }
.btn--primary:hover { background: var(--gruen-hell); border-color: var(--gruen-hell); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(141,182,106,.12); }
.btn--outline, .btn--ondark { background: transparent; color: var(--text); border-color: rgba(243,243,243,.38); }
.btn--outline:hover, .btn--ondark:hover { border-color: var(--text); background: rgba(243,243,243,.06); transform: translateY(-1px); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.section--light .btn--primary { background: var(--gruen-tief); color: var(--white); border-color: var(--gruen-tief); }
.section--light .btn--primary:hover { background: var(--gruen-tief-2); border-color: var(--gruen-tief-2); box-shadow: 0 8px 20px rgba(63,107,36,.22); }
.section--light .btn--outline, .section--light .btn--ondark { color: var(--ink); border-color: rgba(24,28,31,.4); }
.section--light .btn--outline:hover, .section--light .btn--ondark:hover { border-color: var(--ink); background: rgba(24,28,31,.05); }

/* Druckpunkt */
.btn:active, .tile:active span, .lyr-btn:active, .tabs__tab:active, .ort-btn:active, .burger:active {
  transform: translateY(0) scale(.985); transition-duration: var(--dur-0);
}

/* Textlink mit Pfeil: gruene Linie darunter, Pfeil rueckt beim Hover nach */
.arrow {
  font-family: var(--font-body); font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 3px; background: linear-gradient(var(--gruen), var(--gruen)) left bottom / 100% 2px no-repeat;
  transition: gap var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background-size var(--dur-2) var(--ease);
}
.arrow:hover { gap: 13px; color: var(--gruen); }
.arrow svg { width: 16px; height: 16px; color: var(--gruen); flex: none; }
.section--light .arrow { color: var(--ink); background-image: linear-gradient(var(--gruen-tief), var(--gruen-tief)); }
.section--light .arrow:hover { color: var(--gruen-tief); }
.section--light .arrow svg { color: var(--gruen-tief); }

/* Inline-Textlinks in Fliesstext */
.link, .faq-a a, .legal a, .check a, .muted a:not(.arrow) { color: var(--gruen); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover, .faq-a a:hover, .legal a:hover { color: var(--gruen-hell); }
.section--light .link, .section--light .faq-a a, .section--light .check a, .section--light .muted a:not(.arrow) { color: var(--gruen-tief); }

/* Line-Icons: ein Strich, eine Staerke */
.ico { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 18px; height: 18px; }

/* ============================================================
   Bilder
   ============================================================ */
.media { position: relative; background: var(--anth); border-radius: var(--r-lg); overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 4 / 5; }
a:hover .media img, .media--zoom:hover img { transform: scale(1.04); }

/* Symbolbild-/Herstellerfoto-Kennzeichnung (Ehrlichkeits-Regel).
   Beim Tausch gegen ein eigenes Foto NUR das Attribut data-stock entfernen. */
[data-stock="1"], [data-stock="hersteller"] { position: relative; }
[data-stock="1"]::after, [data-stock="hersteller"]::after {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; pointer-events: none;
  font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-2); background: rgba(17, 21, 24, .8); padding: 4px 8px; border-radius: 3px;
}
[data-stock="1"]::after { content: 'Symbolbild'; }
[data-stock="hersteller"]::after { content: 'Herstellerfoto'; }

/* ============================================================
   Header – fixed, liegt ueber dem Hero, wird beim Scrollen kompakt
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  --hh: var(--header-h);
  background: transparent;
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.site-header.is-solid {
  --hh: var(--header-c);
  background: rgba(17, 21, 24, .9);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 rgba(243,243,243,.08);
}
@supports not (backdrop-filter: blur(1px)) { .site-header.is-solid { background: var(--anth-950); } }
/* Transparent ueber dem Foto: ein weicher Verlauf von oben sichert Telefonnummer
   und Burger die Lesbarkeit, egal wie hell das Motiv oben ist. */
.site-header:not(.is-solid)::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 160%; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(17, 21, 24, .78) 0%, rgba(17, 21, 24, .45) 55%, rgba(17, 21, 24, 0) 100%);
}
.header-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 28px; height: var(--hh); transition: height var(--dur-2) var(--ease); }
.brand { display: flex; align-items: center; flex: none; }
.brand .logo-img { height: calc(var(--hh) - 30px); width: auto; transition: height var(--dur-2) var(--ease); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a:not(.header-cta) {
  position: relative; padding: 10px 12px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}
.nav a:not(.header-cta)::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gruen);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease);
}
.nav a:not(.header-cta):hover, .nav a[aria-current="page"]:not(.header-cta) { color: var(--text); }
.nav a:not(.header-cta):hover::after, .nav a[aria-current="page"]:not(.header-cta)::after { transform: scaleX(1); }
.header-phone {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  letter-spacing: .02em; color: var(--text); white-space: nowrap; padding: 10px 6px 10px 12px;
}
.header-phone svg { color: var(--gruen); }
.header-cta { padding: 12px 20px; font-size: .98rem; margin-left: 8px; }

.burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 0 10px; background: none; border: 0; cursor: pointer; margin-left: 4px; }
.burger span { display: block; width: 28px; height: 2px; background: var(--text); transition: transform var(--dur-2) var(--ease), opacity var(--dur-1); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Lesefortschritt – 2px Blattgruen an der Unterkante des Headers */
.scrollbar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.scrollbar__fill { display: block; height: 100%; background: var(--gruen); transform: scaleX(0); transform-origin: left; will-change: transform; }

/* ============================================================
   Footer – Anthrazit, angeschnittenes Signet, Handschrift
   ============================================================ */
.site-footer { position: relative; background: var(--bg-0); color: var(--text-2); overflow: hidden; }
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gruen) 0 34%, transparent 34%); }
.footer-sig { position: absolute; right: -4%; bottom: -12%; width: clamp(300px, 36vw, 620px); opacity: .1; pointer-events: none; }
.footer-top { position: relative; display: grid; grid-template-columns: 1.5fr .9fr .9fr 1.2fr; gap: 40px; padding: clamp(64px, 8vw, 110px) 0 56px; }
.footer-brand .logo-img { width: auto; height: 84px; margin-bottom: 22px; }
.footer-brand p { font-size: .98rem; max-width: 34ch; }
.footer-brand .script { display: block; margin-top: 22px; font-size: 1.7rem; }
.footer-col h4 { font-family: var(--font-display); font-size: .98rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 18px; }
.footer-col a, .footer-col span { display: block; font-size: .98rem; margin-bottom: 9px; color: var(--text-2); transition: color var(--dur-1); }
.footer-col a:hover { color: var(--gruen); }
.footer-col .big { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: .01em; }
.footer-bottom { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 22px 0 26px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--text-3); }
.footer-bottom a:hover { color: var(--text); }

/* ---------- Actionbar (Anrufen · WhatsApp · Anfrage) ---------- */
.actionbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.actionbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .03em; text-transform: uppercase; background: var(--anth-950); color: var(--text); white-space: nowrap; min-height: 56px; }
.actionbar .mb-quote { background: var(--gruen); color: var(--gruen-ink); }
.actionbar a:hover { background: var(--anth); }
.actionbar .mb-quote:hover { background: var(--gruen-hell); }
@media (min-width: 861px) {
  .actionbar {
    left: auto; right: 24px; bottom: 24px; width: auto; flex-direction: column; gap: 0;
    border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--el-2);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .actionbar.is-on { display: flex; opacity: 1; transform: none; pointer-events: auto; }
  .actionbar a { justify-content: flex-start; padding: 13px 20px; font-size: .95rem; }
}

/* ============================================================
   Formular
   ============================================================ */
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }
.field label .req { color: var(--gruen); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1.05rem; color: var(--text);
  padding: 14px 16px; background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: var(--r);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); opacity: 1; }
.field select option { background: var(--bg); color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(141, 182, 106, .22); }
.field textarea { resize: vertical; min-height: 130px; }
.form-hint { margin-top: 8px; font-size: .88rem; color: var(--text-3); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field [aria-invalid="true"]:focus { border-color: var(--err); box-shadow: 0 0 0 3px rgba(240, 180, 166, .22); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* Mehrstufiges Formular. Ohne .wz-on (kein JS) stehen alle drei Schritte
   untereinander und das Formular laeuft als Langformular. */
.formpanel { background: var(--bg-2); border-radius: var(--r-lg); padding: clamp(22px, 3.2vw, 40px); box-shadow: var(--el-1); }
.wz-pane { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.wz-legend { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--text); padding: 0; margin-bottom: 18px; line-height: 1.1; }
.wz-on .wz-pane { display: none; margin-bottom: 0; }
.wz-on .wz-pane.is-active { display: block; animation: paneIn var(--dur-2) var(--ease-out) both; }
.wz-nav { display: flex; gap: 12px; align-items: center; margin-top: var(--sp-5); }
.wz-nav .wz-next { margin-left: auto; }
.wz-on .wz-submit { width: auto; margin-left: auto; }

/* Fortschritt: drei Segmente, das aktive in Blattgruen */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--sp-6); }
.steps li { font-size: .84rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding-top: 10px; border-top: 3px solid var(--line-strong); transition: border-color var(--dur-2), color var(--dur-2); }
.steps li span { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-right: 6px; color: inherit; }
.steps li.is-current { color: var(--text); border-top-color: var(--gruen); }
.steps li.is-done { color: var(--text-2); border-top-color: var(--gruen-600); }

/* Klickkacheln (Schritt 1 + Filter) */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; cursor: pointer; }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile span {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 16px; border-radius: var(--r);
  background: var(--bg); border: 1.5px solid var(--line-strong); font-weight: 600; font-size: 1.02rem; line-height: 1.25;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.tile span::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: background var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-1); }
.tile:hover span { border-color: var(--gruen); transform: translateY(-1px); }
.tile input:checked + span { border-color: var(--gruen); background: rgba(141, 182, 106, .1); color: var(--text); }
.tile input:checked + span::before { background: var(--gruen); border-color: var(--gruen); box-shadow: inset 0 0 0 4px var(--bg); }
.tile input[type="checkbox"] + span::before { border-radius: 4px; }
.tile input[type="checkbox"]:checked + span::before { box-shadow: inset 0 0 0 3px var(--bg); }
.tile input:focus-visible + span { outline: 3px solid var(--gruen); outline-offset: 2px; }
.section--light .tile span { background: var(--white); border-color: var(--line-light-strong); color: var(--ink); }
.section--light .tile span::before { border-color: var(--line-light-strong); }
.section--light .tile:hover span, .section--light .tile input:checked + span { border-color: var(--gruen-tief); }
.section--light .tile input:checked + span { background: rgba(63, 107, 36, .08); }
.section--light .tile input:checked + span::before { background: var(--gruen-tief); border-color: var(--gruen-tief); box-shadow: inset 0 0 0 4px var(--white); }
.section--light .tile input[type="checkbox"]:checked + span::before { box-shadow: inset 0 0 0 3px var(--white); }
.section--light .tile input:focus-visible + span { outline-color: var(--gruen-tief); }
@media (max-width: 460px) {
  .tiles { grid-template-columns: 1fr; }
  .wz-nav { flex-wrap: wrap; }
  .wz-nav .wz-next, .wz-nav .wz-back { flex: 1; }
}

.check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--text-2); margin: 4px 0 18px; }
.check input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .88rem; color: var(--text-3); text-align: center; margin-top: 14px; }
.form-msg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-msg.is-ok, .form-msg.is-err { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin-top: 16px; padding: 14px 16px; border-radius: var(--r); font-weight: 500; }
.form-msg.is-ok { background: rgba(166, 201, 138, .12); color: var(--ok); border: 1px solid rgba(166, 201, 138, .35); }
.form-msg.is-err { background: rgba(240, 180, 166, .12); color: var(--err); border: 1px solid rgba(240, 180, 166, .35); }
.form-msg a { color: inherit; text-decoration: underline; }

/* ============================================================
   Einsatzgebiet-Karte (Inline-SVG)
   ============================================================ */
.karte { background: var(--bg-2); border-radius: var(--r-lg); padding: clamp(16px, 2.5vw, 28px); }
.section--deep .karte, .section--stein .karte { background: var(--bg); }
.karte svg { display: block; width: 100%; height: auto; }
.karte figcaption { margin-top: 14px; font-size: .84rem; line-height: 1.5; color: var(--text-3); }
.karte__wasser { fill: rgba(158, 163, 168, .10); }
.karte__grenze { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 10 9; opacity: .6; }
.karte__grenzlabel { fill: var(--text-3); font-family: var(--font-body); font-size: 20px; letter-spacing: .06em; }
.karte__ring circle { fill: none; stroke: var(--line); stroke-width: 1.5; }
.karte__ringlabel { fill: var(--text-3); font-family: var(--font-body); font-size: 17px; text-anchor: middle; letter-spacing: .04em; }
.karte__punkt { fill: var(--gruen); transition: r var(--dur-2) var(--ease), fill var(--dur-2) var(--ease); }
.karte__label { fill: var(--text-2); font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: .02em; transition: fill var(--dur-2) var(--ease); }
.karte__ort { transition: opacity var(--dur-2) var(--ease); }
.karte__ort--basis .karte__punkt { fill: var(--text); }
.karte__ort--basis .karte__label { fill: var(--text); font-weight: 700; }
.karte__ort.is-on .karte__punkt { r: 15; fill: var(--text); }
.karte__ort.is-on .karte__label { fill: var(--text); }
.karte__ort.is-dim { opacity: .35; }

.orte { list-style: none; columns: 2; column-gap: 30px; margin: 20px 0 26px; }
.orte li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .98rem; font-weight: 500; break-inside: avoid; }
.orte--km li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.orte--km .ort-km { font-size: .82rem; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.orte--km li.is-on { background: rgba(141, 182, 106, .1); border-radius: var(--r-sm); }
.ort-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; border-bottom: 1.5px dotted transparent; transition: color var(--dur-1), border-color var(--dur-1); }
.ort-btn:hover, .ort-btn[aria-pressed="true"] { color: var(--gruen); border-bottom-color: var(--gruen); }
@media (max-width: 560px) { .karte__label { display: none; } .karte__ringlabel { font-size: 22px; } .orte { columns: 1; } }

/* ============================================================
   Tabs (Varianten-Umschalter) – ohne JS ein 2x2-Raster
   ============================================================ */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tabs--on { display: block; }
.tabs__bar { display: flex; gap: 4px; margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs__bar::-webkit-scrollbar { display: none; }
.tabs__tab { position: relative; background: none; border: 0; cursor: pointer; padding: 12px 18px; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); transition: color var(--dur-1) var(--ease); }
.tabs__tab:hover, .tabs__tab[aria-selected="true"] { color: var(--text); }
.tabs__tab::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--gruen); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabs--on .tabs__pane > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tabs--on .tabs__pane { animation: paneIn var(--dur-2) var(--ease-out) both; }
.tabs__pane { padding: clamp(20px, 3vw, 32px); background: var(--bg-2); border-radius: var(--r-lg); }
.tabs--on .tabs__pane { background: none; padding: 0; }
.tabs__pane h3 { margin-bottom: 10px; }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .tabs { grid-template-columns: 1fr; } }

/* ============================================================
   Sprungnavigation – klebt unter dem (kompakten) Header
   ============================================================ */
.jump { position: sticky; top: var(--header-c); z-index: 99; background: rgba(17, 21, 24, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
@supports not (backdrop-filter: blur(1px)) { .jump { background: var(--bg); } }
.jump__inner { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.jump__inner::-webkit-scrollbar { display: none; }
.jump a { padding: 14px 14px; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; border-bottom: 3px solid transparent; transition: color var(--dur-1), border-color var(--dur-1); }
.jump a:hover { color: var(--text); }
.jump a[aria-current="true"] { color: var(--text); border-bottom-color: var(--gruen); }
.jump-target { scroll-margin-top: calc(var(--header-c) + 60px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ============================================================
   Bewegung
   ============================================================ */
/* Zeilenweises Headline-Reveal */
html.js .lines .ln { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
html.js .lines .ln__i { display: block; transform: translateY(105%); opacity: 0; transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-4) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger-line)); }
html.js .lines.is-in .ln__i { transform: none; opacity: 1; }
/* Reveal – nur mit html.js ausgeblendet */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal--stagger > * { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
html.js .reveal--stagger.in > * { opacity: 1; transform: none; }
/* Bildmaske: oeffnet sich von links */
html.js .reveal-wipe { clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-4) var(--ease-out); }
html.js .reveal-wipe.in { clip-path: inset(0 0 0 0); }

/* ============================================================
   no-JS-Fallback (Notluke, nicht das Design)
   ============================================================ */
.nav-fallback, .foot-fallback { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 16px clamp(20px, 3vw, 40px); font-size: .95rem; background: var(--anth-950); border-bottom: 1px solid var(--line); }
.foot-fallback { display: block; border-bottom: 0; border-top: 1px solid var(--line); color: var(--text-2); line-height: 2; }
.nav-fallback a { color: var(--text); font-weight: 600; }
.foot-fallback a { color: var(--gruen); text-decoration: underline; }
/* Ohne JS gibt es keinen fixed Header, aber der Hero rechnet dessen Hoehe ein –
   dann waere oben ein Loch. Ohne html.js also: kein Abzug. */
html:not(.js) .hero, html:not(.js) .subhero, html:not(.js) .pagehead { padding-top: 0; }

/* ============================================================
   A11y
   ============================================================ */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: 3px;
}
.section--light a:focus-visible, .section--light button:focus-visible, .section--light summary:focus-visible { outline-color: var(--gruen-tief); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--gruen); color: var(--gruen-ink); padding: 12px 18px; font-weight: 700; border-radius: 0 0 var(--r) var(--r); }
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  /* Jede animierte Klasse auf ihren ENDZUSTAND, nicht nur transition:none */
  .reveal, .reveal--stagger > *, .lines .ln__i, .reveal-wipe,
  .tabs__pane, .ba__art, .lyr, .karte__ort, .wz-pane.is-active,
  .hero__sig path, .ablauf__line path, .duo__half, .hero__bg img {
    opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
    clip-path: none !important; stroke-dashoffset: 0 !important;
  }
  .lines .ln { overflow: visible; }
  .scrollbar__fill { transition: none; }
  * { scroll-behavior: auto !important; }
  .media img, a:hover .media img { transform: none !important; transition: none !important; }
}

/* ============================================================
   Responsive: Header
   ============================================================ */
@media (max-width: 1080px) {
  :root { --header-h: 76px; --header-c: 66px; }
  .nav { display: none; }
  .header-phone { margin-left: auto; }
  .burger { display: flex; }
  /* Fullscreen-Menue */
  .nav.is-open {
    display: flex; position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; margin: 0; padding: calc(var(--header-c) + 24px) clamp(20px, 5vw, 40px) 40px; background: var(--anth-950); overflow-y: auto;
  }
  .nav.is-open > a:not(.header-cta) { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.7rem, 6vw, 2.4rem); font-weight: 700; color: var(--text); }
  .nav.is-open > a:not(.header-cta)::after { display: none; }
  .nav.is-open > a[aria-current="page"]:not(.header-cta) { color: var(--gruen); }
  .nav.is-open .header-cta { margin: 28px 0 0; padding: 18px 24px; font-size: 1.1rem; }
  .nav.is-open .nav__extra { margin-top: auto; padding-top: 32px; display: grid; gap: 10px; color: var(--text-3); font-size: .95rem; }
  .nav.is-open .nav__extra a { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 4px 0; }
  .nav.is-open .nav__extra a::after { display: none; }
  .nav.is-open .nav__extra svg { color: var(--gruen); }
  .nav:not(.is-open) .nav__extra { display: none; }
  .site-header.is-open { background: var(--anth-950); }
  /* Logo, Telefon und Burger liegen UEBER dem fixierten Menue (sie sind dessen Geschwister) */
  .site-header .brand, .site-header .header-phone, .site-header .burger { position: relative; z-index: 3; }
  .actionbar.is-on { display: flex; }
  html:not(.js) .actionbar { display: flex; }
  body { padding-bottom: 60px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (min-width: 1081px) { .nav__extra, .nav__more { display: none; } }
@media (max-width: 560px) {
  .header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .header-phone { padding: 10px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   STARTSEITE
   ============================================================ */

/* ---- Hero: Foto vollflaechig, links das schraeg angeschnittene
   Anthrazit-Panel mit Text (die Schraege = Dachlinie), dahinter das
   Signet als Linienzeichnung. Der Text steht IMMER auf dem opaken Panel –
   die Lesbarkeit haengt nicht am Motiv. ---- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--anth-950); padding-top: var(--header-h); }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 62%; }
html.js .hero__bg img { transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
html.js .hero.is-in .hero__bg img { transform: scale(1); }
/* Symbolbild-Badge des Heros sitzt rechts unten – ausserhalb des Panels */
.hero__bg[data-stock]::after { bottom: 18px; right: 18px; }
.hero__panel {
  position: absolute; inset: 0; z-index: 1; width: 66%;
  background: var(--anth-950);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}
/* Gruene Kante entlang der Schraege: eigenes Element, weil ein Rand am
   geclippten Panel mit abgeschnitten wuerde */
.hero__edge { position: absolute; inset: 0; z-index: 1; width: calc(66% + 4px); background: var(--gruen); clip-path: polygon(calc(100% - 4px) 0, 100% 0, calc(84% + 0.5px) 100%, calc(84% - 3.5px) 100%); pointer-events: none; }
.hero__sig { position: absolute; z-index: 1; left: -8%; bottom: -10%; width: 60%; max-width: 860px; opacity: .08; pointer-events: none; }
.hero__sig path { fill: none; stroke: var(--text); stroke-width: 6; stroke-linejoin: round; }
html.js .hero__sig path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-out) .3s; }
html.js .hero.is-in .hero__sig path { stroke-dashoffset: 0; }
.hero__content { position: relative; z-index: 2; padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); }
.hero__content > * { max-width: min(640px, 47vw); }
.hero__content .display { margin: 0 0 22px; }
.hero__content .lead { margin-bottom: 30px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__call { font-size: 1rem; color: var(--text-2); margin-top: 26px; }
.hero__call a { color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; padding-bottom: 1px; background: linear-gradient(var(--gruen), var(--gruen)) left bottom / 100% 2px no-repeat; }
.hero__call a:hover { color: var(--gruen); }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .9rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.hero__trust span { display: inline-flex; align-items: center; gap: 9px; }
.hero__trust svg { width: 16px; height: 16px; color: var(--gruen); stroke-width: 2.2; }
.hero__script { display: block; margin-bottom: 14px; }
@media (max-width: 1200px) {
  .hero__panel { width: 72%; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); }
  .hero__edge { width: calc(72% + 4px); clip-path: polygon(calc(100% - 4px) 0, 100% 0, calc(80% + 0.5px) 100%, calc(80% - 3.5px) 100%); }
  .hero__content > * { max-width: min(600px, 52vw); }
}
@media (max-width: 900px) {
  /* Gestapelt: Foto oben, Panel mit schraeger Oberkante darunter */
  .hero { display: block; padding-top: 0; min-height: 0; }
  .hero__bg { position: relative; height: max(52svh, 360px); }
  .hero__bg img { object-position: 50% 62%; }
  .hero__panel, .hero__edge { display: none; }
  .hero__sig { left: auto; right: -20%; bottom: -6%; width: 80%; opacity: .07; }
  .hero__content { background: var(--anth-950); margin-top: -7vw; padding: calc(7vw + 28px) clamp(20px, 5vw, 40px) 48px; clip-path: polygon(0 7vw, 100% 0, 100% 100%, 0 100%); }
  .hero__content::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7vw; background: linear-gradient(to right bottom, transparent 49.6%, var(--gruen) 49.6%, var(--gruen) 50.4%, transparent 50.4%); opacity: .9; }
  .hero__content > * { max-width: 100%; }
  .hero__trust { gap: 8px 18px; font-size: .84rem; }
}
@media (max-width: 520px) {
  .hero__actions, .ctaband-actions { flex-direction: column; align-items: stretch; }
}

/* ---- Leistungen: zwei Schwerpunkte als Bildflaechen, darunter Garten | Haus als Liste ----
   Ersetzt die fruehere 10-Zeilen-Liste mit Bildbuehne (war zu unuebersichtlich). */
.leist-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); margin-top: var(--sp-block); }
.leist-col__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--gruen); }
.leist-col__head h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; text-transform: uppercase; line-height: 1; }
.leist-col__head .arrow { font-size: .95rem; }
.leist-list { list-style: none; }
.leist-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.leist-list b { font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--text); transition: color var(--dur-1) var(--ease); }
.leist-list span { grid-column: 1; font-size: .95rem; color: var(--text-3); }
.leist-list svg { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--text-3); transition: transform var(--dur-2) var(--ease-out), color var(--dur-1); }
.leist-list a:hover b, .leist-list a:focus-visible b { color: var(--gruen); }
.leist-list a:hover svg, .leist-list a:focus-visible svg { transform: translateX(5px); color: var(--gruen); }
@media (max-width: 760px) { .leist-cols { grid-template-columns: 1fr; gap: 40px; } }

/* ---- Haus + Garten: zwei Haelften, schraege Naht, Gewichtung beim Hover ---- */
.duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.duo__half { position: relative; display: block; min-height: 480px; overflow: hidden; background: var(--bg-2); }
.duo__half--garten { background: var(--anth); }
.duo__img { position: absolute; inset: 0; height: 64%; overflow: hidden; }   /* beschneidet den Hover-Zoom, sonst ragt das Bild unten in den Text */
.duo__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.duo__half:hover .duo__img img { transform: scale(1.05); }
.duo__half:hover .duo__word, .duo__half:focus-visible .duo__word { color: var(--gruen); }
.duo__word { transition: color var(--dur-1) var(--ease); }
.duo__img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to bottom, rgba(24,28,31,0), rgba(24,28,31,.92)); }
.duo__half--garten .duo__img::after { background: linear-gradient(to bottom, rgba(34,38,42,0), rgba(34,38,42,.92)); }
.duo__img[data-stock]::after { content: ''; }   /* Badge sitzt hier NICHT am ::after (belegt) – siehe .duo__badge */
.duo__badge { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); background: rgba(17,21,24,.8); padding: 4px 8px; border-radius: 3px; }
.duo__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(24px, 4vw, 56px) clamp(32px, 4vw, 52px); }
.duo__word { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 7.4vw, 6.6rem); line-height: .86; text-transform: uppercase; color: var(--text); letter-spacing: -.01em; margin-bottom: 14px; }
.duo__word small { display: block; font-size: .32em; font-weight: 600; letter-spacing: .08em; color: var(--gruen); margin-bottom: 8px; }
.duo__body p { color: var(--text-2); max-width: 44ch; margin-bottom: 16px; }
.duo__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 22px; font-size: .95rem; color: var(--text-2); }
.duo__list li { display: inline-flex; align-items: center; gap: 8px; }
.duo__list li::before { content: ''; width: 5px; height: 5px; background: var(--gruen); flex: none; }
.duo__seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: var(--gruen); transform: translateX(-50%); z-index: 3; pointer-events: none; }
.duo__plus { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 4; width: 64px; height: 64px; display: grid; place-items: center; background: var(--gruen); color: var(--gruen-ink); font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; border-radius: 50%; pointer-events: none; }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .duo__half { min-height: 0; }
  .duo__img { position: relative; height: auto; aspect-ratio: 16 / 9; }
  .duo__body { position: relative; padding-top: 22px; }
  .duo__word { font-size: clamp(2.8rem, 12vw, 4rem); }
  .duo__seam { display: none; }
  .duo__plus { display: none; }
}

/* ---- Warum JMF: nummerierte Aussagen ---- */
.gruende { list-style: none; border-top: 1px solid var(--line); }
.gruende li { display: grid; grid-template-columns: 72px 1fr; gap: 10px 24px; align-items: start; padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); }
.gruende__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3vw, 2.8rem); line-height: .9; color: var(--gruen); font-variant-numeric: tabular-nums; }
.gruende h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: 0; }
.gruende p { grid-column: 2; color: var(--text-2); max-width: 52ch; }
.warum-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) {
  .warum-grid { grid-template-columns: 1fr; gap: 32px; }
  .gruende li { grid-template-columns: 52px 1fr; }
}

/* Verkaufs-Bruecke (Hausmeisterseite): drei Schritte, dieselbe Nummern-Typo wie .gruende */
.bruecke { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.bruecke li { padding-top: 22px; border-top: 3px solid var(--line); }
.bruecke li:last-child { border-top-color: var(--gruen); }
.bruecke .gruende__num { display: block; margin-bottom: 10px; }
.bruecke h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.bruecke p { color: var(--text-2); font-size: .98rem; }
.bruecke .partner { display: inline-block; margin-top: 8px; font-size: .84rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen); }
@media (max-width: 760px) { .bruecke { grid-template-columns: 1fr; gap: 20px; } }


/* ---- Verbund JMF + DC-Finanzen: zwei Logos, dazwischen die Dachlinie als Verbinder ----
   Beide Marken gehoeren demselben Inhaber. Das DC-Logo (weiss/gold) ist fuer dunkle
   Flaechen gebaut - .marken deshalb immer auf Anthrazit, nie auf .section--light. */
.marken { display: grid; grid-template-columns: 1fr clamp(96px, 9vw, 130px) 1fr; align-items: stretch; }
.marken__logo { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(24px, 3.4vw, 48px); border-radius: var(--r-lg); background: var(--bg); box-shadow: inset 0 0 0 1px rgba(141, 182, 106, .35); }
.marken__logo--dc { order: 3; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .28); }
.marken__logo img { height: clamp(62px, 6.4vw, 88px); width: auto; }
.marken__logo--dc img { height: clamp(46px, 4.8vw, 64px); margin: 8px 0; }
.marken__logo b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--text); }
.marken__logo p { font-size: 1rem; color: var(--text-2); max-width: 36ch; }
.marken__logo a { color: var(--gruen); font-weight: 600; }
/* Verbinder in der Fuge: gruene Linie, darauf ein Kreis mit gezeichnetem Plus, darunter "Ein Inhaber" */
.marken__link { order: 2; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.marken__link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: var(--gruen); transform: translateY(-50%); z-index: 0; }
.marken__link svg { display: none; }
.marken__link::before {
  content: ''; position: relative; z-index: 1; width: clamp(56px, 5vw, 72px); height: clamp(56px, 5vw, 72px); border-radius: 50%;
  background-color: var(--gruen);
  background-image: linear-gradient(var(--gruen-ink), var(--gruen-ink)), linear-gradient(var(--gruen-ink), var(--gruen-ink));
  background-size: 38% 4px, 4px 38%; background-position: center; background-repeat: no-repeat;
}
.marken__link span { position: absolute; top: calc(50% + clamp(36px, 3.2vw, 46px)); left: 0; right: 0; font-family: var(--font-display); font-size: .92rem; font-weight: 700; line-height: 1.15; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen); }
@media (max-width: 760px) {
  .marken { grid-template-columns: 1fr; grid-template-rows: auto 96px auto; }
  .marken__link::after { left: 50%; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform: translateX(-50%); }
  .marken__link span { top: 50%; left: calc(50% + 40px); right: auto; transform: translateY(-50%); text-align: left; white-space: nowrap; }
}

/* Kontakt: Hinweis auf den Verkauf nur, wenn Entruempelung/Haushaltsaufloesung gewaehlt ist (CSS-only) */
.verkauf-hinweis { display: none; margin: -6px 0 18px; padding: 14px 16px; border: 1px solid rgba(141, 182, 106, .45); border-radius: var(--r); background: rgba(141, 182, 106, .08); font-size: .95rem; color: var(--text-2); }
form:has(input[name="topic"][value^="Entrümpelung"]:checked) .verkauf-hinweis { display: block; }
.verkauf-hinweis b { color: var(--text); }

/* ---- Ablauf: vier Schritte auf der Dachlinie ---- */
.ablauf { position: relative; }
.ablauf__line { display: block; width: 100%; height: auto; margin-bottom: -6px; }
.ablauf__line path { fill: none; stroke: var(--gruen); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
html.js .ablauf__line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out); }
html.js .ablauf.in .ablauf__line path { stroke-dashoffset: 0; }
.ablauf__line circle { fill: var(--bg); stroke: var(--gruen); stroke-width: 3; }
html.js .ablauf__line circle { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
html.js .ablauf.in .ablauf__line circle { opacity: 1; }
html.js .ablauf.in .ablauf__line circle:nth-of-type(1) { transition-delay: .2s; }
html.js .ablauf.in .ablauf__line circle:nth-of-type(2) { transition-delay: .7s; }
html.js .ablauf.in .ablauf__line circle:nth-of-type(3) { transition-delay: 1.2s; }
html.js .ablauf.in .ablauf__line circle:nth-of-type(4) { transition-delay: 1.7s; }
.section--deep .ablauf__line circle, .section--stein .ablauf__line circle { fill: var(--bg-2); }
.ablauf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.ablauf-step { padding-top: 26px; }
.ablauf-step .num { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--gruen); letter-spacing: .08em; }
.ablauf-step h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 800; text-transform: uppercase; margin: 8px 0 8px; }
.ablauf-step p { color: var(--text-2); font-size: .98rem; max-width: 30ch; }
@media (max-width: 860px) {
  .ablauf__line { display: none; }
  .ablauf-grid { grid-template-columns: 1fr; gap: 0; border-left: 3px solid var(--gruen); margin-left: 8px; }
  .ablauf-step { position: relative; padding: 4px 0 32px 28px; }
  .ablauf-step::before { content: ''; position: absolute; left: -9px; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg-2); border: 3px solid var(--gruen); }
  .ablauf-step:last-child { padding-bottom: 4px; }
}

/* ---- Feature-Reihe (Bild | Text, abwechselnd) ---- */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.frow--rev .frow__media { order: 2; }
.frow h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 14px; }
.frow .flist { margin-top: 18px; }
.frow__media .media { aspect-ratio: 4 / 3; }
.frow__note { margin-top: 16px; font-size: .95rem; color: var(--text-3); }
.frow__text .quote { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.25; color: var(--text); padding-left: 18px; margin: 22px 0; border-left: 1px solid var(--gruen); }
.frow__text .sign { font-size: .88rem; font-weight: 500; color: var(--text-3); margin-bottom: 22px; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 860px) { .frow { grid-template-columns: 1fr; gap: 24px; } .frow--rev .frow__media { order: 0; } }

/* ---- Einsatzgebiet ---- */
.einsatz-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
@media (max-width: 860px) { .einsatz-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---- FAQ ---- */
.faq-list { max-width: 880px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; line-height: 1.2; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 18px; transition: color var(--dur-1); }
.faq-item summary:hover { color: var(--gruen); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; width: 16px; height: 16px; flex: none; background: linear-gradient(var(--gruen), var(--gruen)) center / 100% 2px no-repeat, linear-gradient(var(--gruen), var(--gruen)) center / 2px 100% no-repeat; transition: transform var(--dur-2) var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 0 24px; color: var(--text-2); max-width: 70ch; }
.section--light .faq-item summary { color: var(--ink); }
.section--light .faq-item summary::after { background-image: linear-gradient(var(--gruen-tief), var(--gruen-tief)), linear-gradient(var(--gruen-tief), var(--gruen-tief)); }
.section--light .faq-item .faq-a { color: var(--ink-2); }
.section--light .faq-list, .section--light .faq-item { border-color: var(--line-light); }

/* ---- CTA-Band mit Pinselflaeche ---- */
.ctaband { position: relative; overflow: hidden; }
.ctaband-inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.ctaband-inner h2 { max-width: 20ch; }
.ctaband-inner .lead { max-width: 40ch; margin-top: 16px; }
.ctaband-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Die Pinselflaeche: ein organischer Fleck in Waldgruen hinter der Ueberschrift */
.brush { position: absolute; z-index: 0; pointer-events: none; width: clamp(420px, 56vw, 820px); left: -4%; top: 50%; transform: translateY(-52%) rotate(-2deg); opacity: 1; }
.brush path { fill: var(--anth); }
.ctaband .wrap { position: relative; z-index: 1; }
@media (max-width: 560px) { .ctaband-inner { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   UNTERSEITEN
   ============================================================ */
/* Kopfband: Foto rechts vollflaechig, schraeges Panel links – wie der Hero,
   nur niedriger und ohne Signetzeichnung. Ohne Foto (Kontakt, Rechtstexte)
   traegt .pagehead nur das Panel. */
.subhero { position: relative; min-height: 64svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--anth-950); padding-top: var(--header-h); }
.subhero__bg { position: absolute; inset: 0; z-index: 0; }
.subhero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.subhero__bg[data-stock]::after, .subhero__bg[data-stock="hersteller"]::after { bottom: 18px; right: 18px; }
.subhero__panel { position: absolute; inset: 0; z-index: 1; width: 63%; background: var(--anth-950); clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); }
.subhero__edge { position: absolute; inset: 0; z-index: 1; width: calc(63% + 4px); background: var(--gruen); clip-path: polygon(calc(100% - 4px) 0, 100% 0, calc(84% + 0.5px) 100%, calc(84% - 3.5px) 100%); pointer-events: none; }
.subhero .wrap { position: relative; z-index: 2; padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 72px); }
.subhero .wrap > * { max-width: min(600px, 44vw); }
.subhero h1 { margin-bottom: 18px; font-size: clamp(2.3rem, 4.1vw, 3.7rem); }   /* so, dass HAUSMEISTERSERVICE / HAUSHALTSAUFLOESUNG in 600px auf eine Zeile passen */
.subhero .lead { margin-bottom: 0; }
.subhero .hero__actions { margin-top: 28px; }
.crumbs { font-size: .84rem; font-weight: 500; color: var(--text-3); margin-bottom: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--text); }
.crumbs span { opacity: .5; }
@media (max-width: 1200px) { .subhero__panel { width: 70%; } .subhero__edge { width: calc(70% + 4px); } .subhero .wrap > * { max-width: min(560px, 52vw); } }
@media (max-width: 900px) {
  .subhero { display: block; padding-top: 0; min-height: 0; }
  .subhero__bg { position: relative; height: max(40svh, 280px); }
  .subhero__panel, .subhero__edge { display: none; }
  .subhero .wrap { background: var(--anth-950); margin-top: -6vw; clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%); padding-top: calc(6vw + 24px); padding-bottom: 40px; max-width: none; }
  .subhero .wrap > * { max-width: 100%; }
}
/* Kopf ohne Foto */
.pagehead { background: var(--bg-2); padding: calc(var(--header-h) + clamp(28px, 4vw, 56px)) 0 clamp(36px, 5vw, 64px); }
.pagehead h1 { margin-bottom: 16px; max-width: 24ch; }
.pagehead .lead { max-width: 60ch; }

/* Feature-Liste */
.flist { list-style: none; }
.flist li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); color: var(--text); }
.flist li::before { content: ''; position: absolute; left: 0; top: 21px; width: 12px; height: 2px; background: var(--gruen); }
.section--light .flist li { border-color: var(--line-light); color: var(--ink); }
.section--light .flist li::before { background: var(--gruen-tief); }
.flist--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 560px) { .flist--2 { grid-template-columns: 1fr; } }

/* Winterdienst-Block: Waldgruen-Flaeche mit eigener Ueberschrift */
.winter { background: var(--anth); color: var(--text); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.winter h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 14px; }
.winter > div > p { color: var(--text-2); }
@media (max-width: 860px) { .winter { grid-template-columns: 1fr; } }

/* Aufbau-Schnitt (Inline-SVG) */
.schnitt { background: var(--bg); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); }
.schnitt svg { display: block; width: 100%; height: auto; }
.lyr__flaeche--planum { fill: #2B2F33; }
.lyr__flaeche--frost { fill: #363B40; }
.lyr__flaeche--bettung { fill: #4A5055; }
.lyr__steine rect { fill: #80878D; stroke: var(--bg); stroke-width: 3; }
.lyr__randstein { fill: #9CA2A7; stroke: var(--bg); stroke-width: 2.5; }
.lyr__betonbett { fill: #5F666B; stroke: var(--bg); stroke-width: 2; }
.lyr__kante { stroke: #8C9298; stroke-width: 1.5; }
.lyr__fuehrung { stroke: var(--gruen); stroke-width: 1.5; fill: none; }
.lyr__label { fill: var(--gruen); font-family: var(--font-body); font-size: 17px; font-weight: 600; }
.lyr__label--links { font-size: 15px; }
.schnitt__gefaelle path { stroke: var(--gruen); stroke-width: 2.5; fill: none; }
.schnitt__gefaelle text { fill: var(--gruen); font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.schnitt__hinweis { fill: var(--text-2); font-family: var(--font-body); font-size: 14px; }
.lyr { transition: opacity var(--dur-2) var(--ease); }
.lyr.is-dim { opacity: .3; }
.lyr.is-on .lyr__flaeche, .lyr.is-on .lyr__steine rect, .lyr.is-on .lyr__randstein { stroke: var(--gruen); stroke-width: 3; }
.lyr.is-on .lyr__label { fill: var(--text); }
html:not(.js) .lyr { pointer-events: none; }
html.js .flist--lyr-on .lyr { cursor: pointer; }
.lyr-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--text); border-bottom: 1.5px dotted var(--gruen); transition: color var(--dur-1); }
.lyr-btn:hover, .lyr-btn[aria-pressed="true"] { color: var(--gruen); }
.flist--lyr li { transition: background var(--dur-2); border-radius: var(--r-sm); padding-left: 26px; padding-right: 10px; }
.flist--lyr li.is-on { background: rgba(141, 182, 106, .1); }
.flist--lyr li.is-on::before { background: var(--text); }

/* Flaechen-Liste (Pflaster: vier typische Flaechen) – ohne Karten */
.arealist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); border-top: 1px solid var(--line); }
.arealist li { padding: 26px 0; border-bottom: 1px solid var(--line); }
.arealist h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.arealist p { color: var(--text-2); }
@media (max-width: 760px) { .arealist { grid-template-columns: 1fr; } }

/* Bild-Teaser (Hub zu den Schwerpunkt-Seiten) */
.teasers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
/* Hoehe statt aspect-ratio + min-height: die Kombination hat die Breite ueber die Grid-Spalte hinaus gedrueckt */
.teaser { position: relative; display: block; min-width: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--anth); height: clamp(340px, 32vw, 460px); }
.teaser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.teaser:hover img { transform: scale(1.05); }
.teaser__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 32px); background: linear-gradient(to top, rgba(17,21,24,.94) 0%, rgba(17,21,24,.7) 60%, rgba(17,21,24,0) 100%); padding-top: 90px; }
.teaser h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; text-transform: uppercase; margin-bottom: 6px; }
.teaser p { color: var(--text-2); font-size: .98rem; max-width: 48ch; margin-bottom: 12px; }
.teaser .arrow { color: var(--text); }
.teaser__badge { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); background: rgba(17,21,24,.8); padding: 4px 8px; border-radius: 3px; }
@media (max-width: 760px) { .teasers { grid-template-columns: 1fr; } .teaser { height: auto; min-height: 380px; } }

/* Galerie / Projekte */
.projgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 40px) clamp(20px, 2.5vw, 32px); }
.projcard .media { margin-bottom: 14px; }
.projcard h3 { font-size: 1.25rem; }
.projcard p { color: var(--text-2); font-size: .95rem; margin-top: 4px; }
.projcard .label { display: block; margin-bottom: 6px; }
@media (max-width: 860px) { .projgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .projgrid { grid-template-columns: 1fr; } }

/* Referenzen: Projektstruktur mit Filter (CSS-only per :has) */
.refgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.ref { display: flex; flex-direction: column; }
.ref .media { aspect-ratio: 3 / 2; margin-bottom: 16px; }
.ref__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.ref__meta .label { color: var(--gruen); }
.ref__meta .label + .label { color: var(--text-3); }
.ref__meta .label + .label::before { content: '·'; margin-right: 14px; }
.ref h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.ref p { color: var(--text-2); font-size: .98rem; }
.ref dl { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .95rem; }
.ref dt { color: var(--text-3); font-weight: 500; }
.ref dd { color: var(--text-2); }
.refs:has(#rf-garten:checked)      .refgrid > :not([data-kat~="garten"]),
.refs:has(#rf-pflaster:checked)    .refgrid > :not([data-kat~="pflaster"]),
.refs:has(#rf-terrasse:checked)    .refgrid > :not([data-kat~="terrasse"]),
.refs:has(#rf-hausmeister:checked) .refgrid > :not([data-kat~="hausmeister"]),
.refs:has(#rf-renovierung:checked) .refgrid > :not([data-kat~="renovierung"]) { display: none; }
.refs { counter-reset: rzahl; }
.refgrid > .ref { counter-increment: rzahl; }
.rcount::after { content: counter(rzahl) ' Beispiele'; }
@media (max-width: 700px) { .refgrid { grid-template-columns: 1fr; } }

/* Filterleisten (Modelle, Referenzen): Kacheln in einer Reihe */
.mfilter { border: 0; padding: 0; margin: 0; min-width: 0; }
.mfilter legend { padding: 0; margin-bottom: 10px; }
.filters { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-bottom: var(--sp-6); align-items: flex-start; }
.tiles--filter { display: flex; flex-wrap: wrap; gap: 8px; }
.tiles--filter .tile span { min-height: 44px; padding: 9px 14px; font-size: .95rem; gap: 9px; }
.tiles--filter .tile span::before { width: 14px; height: 14px; }
.tiles--filter .tile input:checked + span::before { box-shadow: inset 0 0 0 3px var(--bg); }
.tiles--filter .tile input[type="checkbox"]:checked + span::before { box-shadow: inset 0 0 0 2px var(--bg); }
.mreset { display: none; align-self: end; }
.mreset.is-on { display: inline-flex; }
@media (max-width: 600px) { .filters { gap: 14px; } .filters .mfilter { width: 100%; } }

/* ---------- Produktfinder (Terrassenueberdachung) ----------
   Der Filter laeuft OHNE JavaScript: Radios/Checkboxen in .tile-Labels,
   :has() liest sie am Abschnitt ab. Drei Achsen = drei Regelgruppen; jede
   blendet die Nicht-Treffer aus, zusammen ergibt das eine UND-Verknuepfung.
   Kennt ein Browser :has() nicht, ist die REGEL ungueltig und alle Karten
   bleiben stehen. KEIN data-tabs im Abschnitt (wireTabs nimmt querySelector).
   .reveal--stagger nur am Raster, nie an einer Karte. */
.mbrowse:has(#mf-kunststoff:checked) .mgrid > :not([data-dach~="kunststoff"]),
.mbrowse:has(#mf-glas:checked)       .mgrid > :not([data-dach~="glas"]),
.mbrowse:has(#mf-lamellen:checked)   .mgrid > :not([data-dach~="lamellen"]),
.mbrowse:has(#mm-wand:checked)       .mgrid > :not([data-montage~="wand"]),
.mbrowse:has(#mm-frei:checked)       .mgrid > :not([data-montage~="frei"]),
.mbrowse:has(#me-led:checked)        .mgrid > :not([data-eig~="led"]),
.mbrowse:has(#me-spann:checked)      .mgrid > :not([data-eig~="spann"]),
.mbrowse:has(#me-carport:checked)    .mgrid > :not([data-eig~="carport"]),
.mbrowse:has(#me-erweiterbar:checked) .mgrid > :not([data-eig~="erweiterbar"]) { display: none; }
.mbrowse { counter-reset: mzahl; }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 48px) clamp(20px, 2.5vw, 32px); }
.mgrid > .mcard { counter-increment: mzahl; }
.mcount { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-3); }
.mcount::after { content: counter(mzahl) ' Modelle angezeigt'; }
.mempty { margin-top: var(--sp-5); padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--text-2); }
.mcard { display: flex; flex-direction: column; }
.mcard .media { margin-bottom: 14px; aspect-ratio: 3 / 2; }
.mcard .label { display: block; color: var(--text-3); margin-bottom: 6px; font-size: .72rem; letter-spacing: .09em; }
.mcard h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); font-weight: 800; text-transform: uppercase; margin-bottom: 8px; }
.mcard > p { color: var(--text-2); font-size: var(--fs-sm); margin: 8px 0 0; }
.mcard .flist { margin-top: 10px; }
.mcard .flist li { padding: 7px 0 7px 22px; font-size: var(--fs-sm); line-height: 1.45; }
.mcard .flist li:last-child { border-bottom: 0; }
.mcard .flist li::before { top: 15px; width: 10px; }
.mcard .flist b { color: var(--text); font-weight: 600; }
.mcard .faq-item { margin: 4px 0 14px; border-top: 1px solid var(--line); }
.mcard .arrow { margin-top: auto; align-self: flex-start; }
.mtags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.mtag { font-size: .74rem; font-weight: 600; letter-spacing: .04em; padding: 3px 10px; border: 1px solid rgba(141, 182, 106, .45); border-radius: var(--r-pill); color: var(--gruen); }
.faq-item--sm summary { font-size: var(--fs-sm); font-family: var(--font-body); font-weight: 600; padding: 12px 0; }
.faq-item--sm summary::after { width: 12px; height: 12px; }
.faq-item--sm .faq-a { padding: 0 0 14px; }
.faq-item--sm .faq-a .flist li { padding: 7px 0 7px 22px; font-size: .9rem; }
.faq-item--sm .faq-a .flist li::before { top: 15px; }
.mquelle { margin-top: var(--sp-5); font-size: .88rem; color: var(--text-3); max-width: 70ch; }
@media (max-width: 1000px) { .mgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mgrid { grid-template-columns: 1fr; } }

/* Vorher/Nachher-Slider */
.ba { position: relative; aspect-ratio: 16 / 10; max-width: 1000px; border-radius: var(--r-lg); overflow: hidden; user-select: none; touch-action: none; background: var(--anth); }
.ba__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ba__layer .ba__ph { width: 54px; height: 54px; stroke: var(--ink); stroke-width: 1.2; fill: none; opacity: .14; }
.ba__layer .ba__art { width: 100%; height: 100%; display: block; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; }
.ba__after { background: #E7E6E1; }
.ba__before { background: #CFCEC8; clip-path: inset(0 50% 0 0); }
.ba__before img { filter: grayscale(.55) brightness(.82) contrast(.96); }
.ba__tag { position: absolute; bottom: 14px; z-index: 3; max-width: 44%; line-height: 1.25; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; }
.ba__tag--b { left: 14px; background: rgba(17, 21, 24, .85); color: var(--text); }
.ba__tag--a { right: 14px; text-align: right; background: var(--gruen); color: var(--gruen-ink); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--gruen); transform: translateX(-1.5px); z-index: 4; pointer-events: none; }
.ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--gruen); color: var(--gruen-ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--el-1); }
.ba__grip svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 5; }
html:not(.js) .ba__range, html:not(.js) .ba__grip, html:not(.js) .ba__handle { display: none; }

/* ---- Kontakt ---- */
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.channels { list-style: none; display: grid; margin: 24px 0 28px; border-top: 1px solid var(--line); }
.channels li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.channels svg { width: 22px; height: 22px; stroke: var(--gruen); stroke-width: 1.7; fill: none; flex: none; margin-top: 4px; }
.channels b { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.channels a, .channels span { display: block; color: var(--text); font-weight: 500; }
.channels a { display: inline-block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: .01em; }
.channels a:hover { color: var(--gruen); }
.channels .hint { display: block; margin-top: 3px; font-size: .88rem; font-weight: 400; color: var(--text-3); }
.ablaufmini { list-style: none; display: grid; gap: 14px; margin-top: 8px; }
.ablaufmini li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; font-size: .96rem; color: var(--text-2); }
.ablaufmini .num { font-family: var(--font-display); font-weight: 700; color: var(--gruen); font-size: 1.1rem; padding-top: 2px; }
.ablaufmini strong { display: block; color: var(--text); font-weight: 600; }
.anfahrt { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.anfahrt p { margin-bottom: 8px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---- Rechtstexte ---- */
.legal { padding: calc(var(--header-h) + clamp(24px, 4vw, 48px)) 0 clamp(48px, 6vw, 80px); }
html:not(.js) .legal { padding-top: clamp(24px, 4vw, 48px); }
.legal .wrap { max-width: 860px; }
.legal h1 { margin-bottom: 22px; }
.legal h2 { font-size: 1.4rem; margin: 36px 0 10px; }
.legal p, .legal address { color: var(--text-2); margin-bottom: 12px; font-style: normal; }

/* ---- Ueber uns: Werte ---- */
.werte { list-style: none; border-top: 1px solid var(--line); }
.werte li { padding: 22px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px 32px; }
.werte h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 800; text-transform: uppercase; }
.werte p { color: var(--text-2); }
@media (max-width: 700px) { .werte li { grid-template-columns: 1fr; } }
.zitat { position: relative; padding: clamp(28px, 4vw, 48px) 0; }
.zitat .script { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 22ch; }
.zitat .sign { margin-top: 12px; font-size: .88rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* Danke / 404 */
.notice { min-height: 60svh; display: grid; align-items: center; padding: calc(var(--header-h) + 40px) 0 80px; }
.notice .wrap { max-width: 760px; }
.notice h1 { margin-bottom: 18px; }
.notice .lead { margin-bottom: 28px; }