/* ============================================================
   Maler Köck — v5
   Heller Handwerks-Ton, abgerundete Bilder, Farbleitsystem sichtbar.
   Fraunces (Display, italic-freudig) + Inter (Body)
   ============================================================ */

:root {
  /* Markenfarben (aus Briefing) */
  --gold: #D4A843;
  --rot:  #D15A3A;
  --blau: #4A7CB8;

  --gold-soft: #F2E3B4;
  --rot-soft:  #F6D6CA;
  --blau-soft: #CEDCEE;

  --gold-deep: #B38E33;
  --rot-deep:  #B04527;
  --blau-deep: #355E8F;

  /* Helle, warme Basis */
  --paper:   #F7F2E6;   /* Hintergrund — warmes Cream */
  --paper-2: #FBF7EC;   /* Leichte Einschübe */
  --paper-3: #FFFCF3;   /* Karten / Flächen */
  --ink:     #1F1B13;   /* Text */
  --ink-2:   #3A3326;
  --ink-3:   #6B6256;
  --mute:    #9A917F;

  --line:     rgba(31, 27, 19, 0.10);
  --line-2:   rgba(31, 27, 19, 0.18);

  /* Typografie */
  --serif: "Fraunces", "Playfair Display", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Raster */
  --max:       1320px;
  --pad:       clamp(20px, 3.4vw, 56px);
  --gap-lg:    clamp(32px, 4vw, 64px);
  --stack:     clamp(80px, 10vw, 140px);
  --stack-lg:  clamp(100px, 12vw, 180px);

  /* Radien — alle Bilder weich gerundet */
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* Schatten */
  --sh-sm: 0 2px 10px rgba(31, 27, 19, 0.06);
  --sh-md: 0 10px 30px rgba(31, 27, 19, 0.08);
  --sh-lg: 0 20px 60px rgba(31, 27, 19, 0.12);

  /* Aktive Akzentfarbe (wechselt beim Scrollen durch JS) */
  --accent: var(--gold);
  --accent-soft: var(--gold-soft);
}

/* ----------- Reset ----------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  background: var(--paper);
  overflow-x: clip;            /* iOS-Safari respektiert overflow-x: hidden auf body nicht immer; clip greift zuverlässig */
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s ease; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; padding: 0; margin: 0; }

/* ----------- Layout utils ----------- */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.num {
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.dot--gold { background: var(--gold); }
.dot--rot  { background: var(--rot);  }
.dot--blau { background: var(--blau); }
.dot--neutral { background: var(--ink-2); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.9em;
  margin: 0 2px;
}
.chip--gold { background: var(--gold-soft); color: var(--gold-deep); }
.chip--rot  { background: var(--rot-soft);  color: var(--rot-deep);  }
.chip--blau { background: var(--blau-soft); color: var(--blau-deep); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--paper-3);
  color: var(--ink);
  border: 1px solid var(--line);
}
.tag--gold { background: var(--gold-soft); color: var(--gold-deep); border-color: var(--gold); }
.tag--rot  { background: var(--rot-soft);  color: var(--rot-deep);  border-color: var(--rot); }
.tag--blau { background: var(--blau-soft); color: var(--blau-deep); border-color: var(--blau); }

/* ----------- Buttons ----------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn--ink {
  background: var(--ink);
  color: var(--paper-3);
}
.btn--ink:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
  background: #000;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--paper-3);
}
.btn--full { width: 100%; justify-content: center; }
.btn--lg {
  padding: 18px 32px;
  font-size: 17px;
  font-family: var(--serif);
  font-style: normal;
  letter-spacing: 0.01em;
  gap: 14px;
}
.btn--lg svg { width: 20px; height: 20px; }
.btn:hover svg { transform: none; }
.btn--ink:hover svg, .btn--ghost:hover svg { transform: translateX(3px); }
.btn[href^="tel:"]:hover svg { transform: rotate(-12deg); }

/* ----------- Ambient soft — CSS-only Gradient, langsam wandernd ----------- */
.ambient-soft {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 720px 560px at 15% 20%,  rgba(212, 168, 67, 0.26) 0%, transparent 65%),
    radial-gradient(ellipse 820px 640px at 85% 70%,  rgba(209,  90, 58, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 670px 520px at 55% 85%,  rgba( 74, 124, 184, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 600px 460px at 40% 15%,  rgba(255, 246, 220, 0.45) 0%, transparent 70%);
  background-size: 220% 220%;
  background-position: 0% 0%, 100% 100%, 50% 0%, 20% 80%;
  animation: ambient-drift 32s ease-in-out infinite alternate;
}
@keyframes ambient-drift {
  0%   { background-position:   0%   0%, 100% 100%,  20%  10%, 10% 90%; }
  33%  { background-position:  80%  40%,  20%  60%,  90%  70%, 70% 20%; }
  66%  { background-position:  30% 100%,  70%  10%,  40%  30%, 90% 60%; }
  100% { background-position: 100%  20%,   0%  80%,  70% 100%, 30% 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-soft { animation: none; }
}
/* Mobile: Auf kleinem Display wirken die 4 gestapelten Radial-Gradients wie ein
   dauerhafter Schleier über dem Content — komplett ausblenden, nicht nur die
   Animation stoppen. Spart zusätzlich den Vollflächen-Repaint pro Frame. */
@media (max-width: 920px) {
  .ambient-soft { display: none; }
}

/* ----------- Cursor trail (canvas, Spring-Physik, 3-Farben-Fade) ----------- */
.cursor-trail {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  .cursor-trail { display: none; }
}
@media (hover: none), (max-width: 920px) {
  .cursor-trail { display: none; }
}

/* ----------- Brush dividers ----------- */
.brush {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  pointer-events: none;
  position: relative;
  margin-top: calc(var(--stack) * -0.45);
  margin-bottom: calc(var(--stack) * -0.35);
  z-index: 2;
}
.brush svg {
  width: 100%;
  height: clamp(80px, 10vw, 140px);
  display: block;
  overflow: visible;
}
.brush--triple svg { height: clamp(100px, 12vw, 160px); }

@media (prefers-reduced-motion: reduce) {
  .paintspot { display: none; }
}

/* ----------- Progress bar ----------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--accent);
  z-index: 1001;
  transition: background .5s ease, width .12s linear;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  /* FIXED ans Viewport-Top — klebt garantiert immer da, unabhängig von Scroll-Position
     oder Layout-Edge-Cases (sticky war fragil — brach bei overflow auf Parents,
     transform/contain-Eigenschaften etc.). z-index 1000 wie auf Invictus. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, border-color .35s ease;
}
/* Die Nav ist jetzt fixed (nicht mehr im Document-Flow). Damit der erste
   Section-Inhalt nicht unter der Nav verschwindet, kompensiert jede Top-Section
   ihre eigene Padding-Top. Heros (Subseiten + sub-hero) und legal-Seiten haben
   bereits clamp(120px..160px) — reicht. Nur die Home-Hero hatte zu wenig. */
/* Sobald gescrollt wird, Blur abschalten und Hintergrund leicht opaker machen.
   Safari rebluut sonst pro Frame den Bereich hinter der Sticky-Nav = Scroll-Jank. */
.nav.is-scrolled {
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  border-bottom-color: rgba(31, 27, 19, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding-block: 14px;
}
.nav__logo img {
  height: clamp(60px, 7.5vw, 88px);
  width: auto;
  display: block;
}
.nav__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 0;
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset: auto 0 2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease, background .35s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__cta { padding: 12px 18px; font-size: 13px; }

/* ============================================================
   NAV-DROPDOWN — Leistungen Mega-Menu
   ============================================================ */
.has-dropdown { position: relative; }
/* Unsichtbare Hover-Brücke zwischen Toggle und Dropdown — verhindert,
   dass das Dropdown beim Mauswechsel zwischen Toggle und Panel schließt */
.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 16px;
  pointer-events: none;
  opacity: 0;
}
.has-dropdown:hover::after,
.has-dropdown.is-open::after { pointer-events: auto; }
.nav__dropdown-toggle {
  background: transparent;
  border: 0;
  padding: 8px 0;
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: inherit;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-block;
  position: relative;
  letter-spacing: 0.01em;
  vertical-align: baseline;
}
.nav__dropdown-toggle svg {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  margin-top: -2px;
}
.nav__dropdown-toggle::after {
  content: "";
  position: absolute;
  inset: auto 16px 2px 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease, background .35s ease;
}
.nav__dropdown-toggle:hover { color: var(--ink); }
.has-dropdown:hover .nav__dropdown-toggle::after,
.has-dropdown.is-open .nav__dropdown-toggle::after { transform: scaleX(1); }
.nav__dropdown-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform .25s ease;
}
.has-dropdown:hover .nav__dropdown-toggle svg,
.has-dropdown.is-open .nav__dropdown-toggle svg { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 600px;
  padding: 20px 26px;
  background: color-mix(in oklab, var(--paper-3) 96%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 40px rgba(31, 27, 19, 0.12);
  /* 3 Spalten × 3 Zeilen, items füllen column-wise (1-3 → Spalte 1, 4-6 → Spalte 2, 7-9 → Spalte 3) */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 6px 24px;
  list-style: none;
  margin: 0;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.nav__dropdown > li > a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: background .15s ease, border-left-color .15s ease;
}
.nav__dropdown > li > a:hover,
.nav__dropdown > li > a[aria-current="page"] {
  background: var(--paper-3);
  border-left-color: var(--ink);
}
.nav__dropdown > li > a::after { display: none; }
.has-dropdown:hover .nav__dropdown,
.has-dropdown.is-open .nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
}
.nav__dropdown-group { --k: var(--ink); }
.nav__dropdown-group[data-color="gold"] { --k: var(--gold); }
.nav__dropdown-group[data-color="rot"]  { --k: var(--rot); }
.nav__dropdown-group[data-color="blau"] { --k: var(--blau); }
.nav__dropdown-heading {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k);
  margin-bottom: 10px;
  padding-left: 16px;
  position: relative;
}
.nav__dropdown-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--k);
}
.nav__dropdown-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav__dropdown-group a {
  display: block;
  padding: 7px 14px;
  font-size: 14.5px;
  font-family: var(--serif);
  color: var(--ink);
  border-radius: var(--r-sm);
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
  white-space: nowrap;
}
.nav__dropdown-group a::after { display: none; }
.nav__dropdown-group a:hover {
  background: color-mix(in oklab, var(--k) 14%, transparent);
  color: var(--k);
  padding-left: 18px;
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background .25s ease, border-color .25s ease;
}
.nav__toggle:hover { background: rgba(31, 27, 19, 0.04); }
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px auto;
  border-radius: 2px;
  transition: transform .3s ease, opacity .25s ease;
  transform-origin: center;
}

@media (max-width: 920px) {
  .nav__row { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: block; }

  /* Burger → X */
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Mobile-Menu — Fullscreen-Overlay nach Invictus-Pattern.
     .nav__links selbst ist das Overlay, slide-in von rechts.
     KEIN .nav.is-open-Wrapper-Selektor — direkt auf das Element. */
  .nav__links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    /* Fullscreen-Overlay, ans Viewport gebunden (kein Containing-Block-Issue) */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    height: 100vh;
    z-index: 10001;
    background: var(--paper);
    padding: 88px clamp(24px, 6vw, 56px) 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Versteckt bis is-open per slide-in von rechts */
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links li {
    width: 100%;
    border-bottom: 1px solid rgba(31, 27, 19, 0.08);
  }
  .nav__links li:last-child { border-bottom: none; }
  .nav__links a {
    display: block;
    padding: 18px 0;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    text-align: center;
    width: 100%;
  }
  .nav__links a::after { display: none; }
  .nav__links a[aria-current="page"] { color: var(--rot); }

  /* Burger immer über dem Overlay (X-Button bleibt klickbar) */
  .nav__toggle { z-index: 10002; position: relative; }

  body.is-nav-open { overflow: hidden; }

  /* Dropdown im Mobile-Burger-Menu — wird zum Inline-Accordion */
  .nav__links .has-dropdown {
    position: static;
    text-align: center;
  }
  .nav__links .has-dropdown::after { display: none; }
  .nav__links .nav__dropdown-toggle {
    width: 100%;
    padding: 18px 0;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    justify-content: center;
    gap: 10px;
  }
  .nav__links .nav__dropdown {
    position: static;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 14px;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 2px;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, opacity .25s ease, padding .25s ease;
  }
  .nav__links .nav__dropdown > li {
    border-bottom: none;
  }
  .nav__links .nav__dropdown > li > a {
    padding: 10px 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink-2);
    text-align: center;
    border-left: none;
    border-radius: 0;
  }
  .nav__links .nav__dropdown > li > a:hover,
  .nav__links .nav__dropdown > li > a[aria-current="page"] {
    color: var(--rot);
    background: transparent;
  }
  .nav__links .has-dropdown.is-open .nav__dropdown {
    max-height: 600px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  /* Hover-Trigger auf Mobile NICHT verwenden — er persistiert nach Tap und blockiert Toggle */
  .nav__links .has-dropdown:hover .nav__dropdown {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
  .nav__links .has-dropdown.is-open:hover .nav__dropdown {
    max-height: 600px;
    opacity: 1;
    pointer-events: auto;
  }
  .nav.is-open .nav__dropdown-group {
    padding-left: 14px;
    border-left: 2px solid var(--k);
  }
  .nav.is-open .nav__dropdown-heading {
    margin-bottom: 4px;
    padding-left: 0;
    font-size: 10.5px;
  }
  .nav.is-open .nav__dropdown-heading::before { display: none; }
  .nav.is-open .nav__dropdown-group a {
    padding: 8px 0;
    font-size: 16px;
    white-space: normal;
  }
  .nav.is-open .nav__dropdown-group a:hover { padding-left: 4px; }
}
@keyframes nav-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  /* +72px Nav-Höhe addiert, damit kein Overlap mit der jetzt-fixed Nav */
  padding-top: clamp(100px, 10vw, 132px);
  padding-bottom: 0;
}
.hero__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-bottom: clamp(56px, 6vw, 96px);
  position: relative;
}
.hero__text { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 32px); }

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 6.2vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
}
.hero__title .num {
  font-style: italic;
  color: var(--ink);
}

.hero__lede {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Hero Figure — breiteres Landschafts-Format */
.hero__figure {
  position: relative;
  border-radius: var(--r-xl);
  overflow: visible;
  aspect-ratio: 4 / 3;
  max-height: 560px;
}
.hero__brush {
  position: absolute;
  top: -60px;
  left: -80px;
  right: -60px;
  bottom: -40px;
  width: calc(100% + 140px);
  height: calc(100% + 100px);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  /* Weicher Fade an allen vier Kanten — Pinselstriche laufen organisch in den Hintergrund */
  mask-image:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.3) 5%,
      black 16%,
      black 84%,
      rgba(0,0,0,0.3) 95%,
      transparent 100%),
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,0.3) 4%,
      black 14%,
      black 86%,
      rgba(0,0,0,0.3) 96%,
      transparent 100%);
  -webkit-mask-image:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.3) 5%,
      black 16%,
      black 84%,
      rgba(0,0,0,0.3) 95%,
      transparent 100%),
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,0.3) 4%,
      black 14%,
      black 86%,
      rgba(0,0,0,0.3) 96%,
      transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.hero__figure img:first-of-type {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
.hero__figure figcaption { z-index: 2; }
.hero__pauli { z-index: 3; }
.hero__figure figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: color-mix(in oklab, var(--paper-3) 92%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--r-lg);
  font-size: 12px;
  color: var(--ink);
  box-shadow: var(--sh-sm);
  max-width: calc(100% - 32px);
}
.hero__figure figcaption .tag {
  padding: 5px 10px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}
.hero__addr {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
}

.hero__pauli {
  position: absolute;
  left: clamp(750px, 65vw, 1050px);
  bottom: clamp(15px, 2.5vw, 45px);
  width: clamp(205px, 24vw, 350px);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 28px rgba(31, 27, 19, 0.22));
  pointer-events: none;
  object-fit: contain;
  background: transparent;
  z-index: 3;
}
.hero__pauli img { width: 100%; height: auto; display: block; }

@media (max-width: 920px) {
  .hero__pauli {
    position: absolute;
    right: -20px;
    bottom: -73px;
    left: auto;
    top: auto;
    width: clamp(220px, 48vw, 340px);
    margin: 0;
  }
}
@media (max-width: 540px) {
  .hero__pauli {
    right: -28px;
    bottom: -67px;
    width: clamp(200px, 56vw, 280px);
  }
}

/* Trust strip — Ink-Band mit Gold-Akzent */
.trust {
  background:
    linear-gradient(135deg, #1F1B13 0%, #2B241A 55%, #1F1B13 100%);
  border-top: 1px solid rgba(212, 168, 67, 0.28);
  border-bottom: 1px solid rgba(212, 168, 67, 0.28);
  position: relative;
  overflow: hidden;
}
.trust::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(212, 168, 67, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(209, 90, 58, 0.06) 0%, transparent 55%);
  pointer-events: none;
}
.trust__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 32px);
  padding-block: clamp(24px, 3vw, 36px);
  position: relative;
  z-index: 1;
}
.trust__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.trust__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.trust__num sup {
  font-size: 0.55em;
  color: var(--gold);
  opacity: 0.7;
  margin-left: 2px;
}
.trust__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 242, 230, 0.55);
}

/* Google-Bewertung — Logo + Zahl + 5 Sterne */
.trust__item--google .trust__num { gap: 10px; }
.g-logo {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.trust__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #FFC441;
  margin-top: 2px;
}
.trust__stars svg {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 0 4px rgba(255, 196, 65, 0.35));
}

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { aspect-ratio: 16/10; max-height: 420px; order: 2; }
  .trust__row { grid-template-columns: repeat(3, 1fr); row-gap: 20px; justify-items: center; }
  .trust__row .trust__item { align-items: center; text-align: center; }
  .trust__row .trust__item:nth-child(4) { grid-column: 1 / 2; }
  .trust__row .trust__item:nth-child(5) { grid-column: 3 / 4; }
}
@media (max-width: 540px) {
  .trust__row { grid-template-columns: repeat(2, 1fr); }
  .trust__row .trust__item:nth-child(4) { grid-column: auto; }
  .trust__row .trust__item:nth-child(5) { grid-column: 1 / -1; }
}

/* ============================================================
   Section head — gemeinsam
   ============================================================ */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 860px;
  padding-bottom: clamp(32px, 4vw, 56px);
}
.sec-head--center { align-items: center; text-align: center; margin-inline: auto; }
.sec-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sec-title em { font-style: italic; font-weight: 400; }
.sec-lede {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
}

/* ============================================================
   INTRO
   ============================================================ */
.intro {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}

/* Farb-Drips — rinnen aus der Trust-Bar in die Intro, HINTER den Text */
.paint-drips {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 220px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.88;
  filter: drop-shadow(0 3px 8px rgba(31, 27, 19, 0.10));
}
.paint-drips svg { overflow: visible !important; }
.intro__grid { position: relative; z-index: 2; }
.paint-drips svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.paint-drips path {
  transform-box: fill-box;
  transform-origin: top center;
  /* Startzustand: fast keine Länge — GSAP zieht sie beim Scrollen auseinander */
  transform: scaleY(0.08);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .paint-drips path { transform: none; }
}
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.intro__claim {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 12px;
}
.intro__claim em { font-style: italic; color: var(--gold-deep); }
.intro__body { display: flex; flex-direction: column; gap: 16px; color: var(--ink-2); }
.intro__body p { font-size: 16px; line-height: 1.7; max-width: 58ch; }

@media (max-width: 780px) {
  .intro__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   BEREICHE — Wand · Fassade · Boden mit eingebetteten Leistungen
   ============================================================ */
.bereiche {
  padding-block: var(--stack-lg);
  background: transparent;
  position: relative;
  overflow: hidden;
}
.wash-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Weicher Fade oben + unten — Farbflächen laufen organisch aus, kein Cut an Section-Kante */
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.7) 10%,
    black 28%,
    black 55%,
    rgba(0,0,0,0.5) 78%,
    transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.7) 10%,
    black 28%,
    black 55%,
    rgba(0,0,0,0.5) 78%,
    transparent 96%);
}
/* Mobile: feTurbulence/feDisplacementMap kostet auf iOS Safari pro Repaint einen
   CPU-Pass. Filter aus, Rechtecke werden flach gerendert — Maske + Opacity
   ergeben trotzdem ein weiches Farbband. */
@media (max-width: 920px) {
  .wash-layer rect { filter: none !important; }
  /* drop-shadow auf spielenden Pauli-Videos zwingt Safari pro Frame zu Composite-Readback.
     Auf Mobile aus — Paulis liegen visuell auf hellem Hintergrund, der Schatten ist kein
     unverzichtbarer Gestaltungs-Anker. */
  .hero__pauli,
  .fachhandel__pauli,
  .prozess__pauli,
  .kontakt__pauli,
  .erfahrungen__pauli,
  .footer__pauli,
  .sub-hero__pauli,
  .leistung-warum__pauli { filter: none !important; }
}
.wash-layer--bereiche,
.wash-layer--komp {
  transform: translateY(60px);
}
.wash-layer--prozess,
.wash-layer--referenzen,
.wash-layer--haus {
  transform: translateY(40px);
}
.prozess__pauli {
  position: absolute;
  top: clamp(20px, 3vw, 60px);
  right: clamp(40px, 5vw, 120px);
  --pw: clamp(220px, 26vw, 360px);
  width: var(--pw);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  pointer-events: none;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 18px 22px rgba(31, 27, 19, 0.18));
  z-index: 2;
}
@media (max-width: 1200px) {
  .prozess__pauli {
    --pw: clamp(180px, 38vw, 260px);
    width: var(--pw);
    top: clamp(8px, 2vw, 24px);
    right: clamp(-30px, -1vw, -10px);
  }
}
@media (max-width: 540px) {
  .prozess__pauli {
    --pw: clamp(160px, 44vw, 220px);
    right: -32px;
  }
}
.sub-hero__pauli {
  position: absolute;
  top: clamp(110px, 10vw, 170px);
  left: clamp(120px, 16vw, 280px);
  width: clamp(220px, 24vw, 340px);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  pointer-events: none;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 12px 16px rgba(31, 27, 19, 0.16));
  z-index: 2;
}
@media (max-width: 720px) {
  .sub-hero__pauli { display: none; }
}
.bereiche .wrap,
.prozess .wrap,
.referenzen .wrap,
.haus .wrap,
.faq .wrap { position: relative; z-index: 1; }

/* ============================================================
   FAQ — Häufige Fragen vor Kontakt
   ============================================================ */
.faq {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.wash-layer--faq { transform: translateY(40px); }
.faq__list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
}
.faq__item {
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.faq__item:hover { border-color: var(--ink-3); }
.faq__item details > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  user-select: none;
}
.faq__item details > summary::-webkit-details-marker { display: none; }
.faq__q {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.faq__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  transition: transform .3s ease, background .25s ease, color .25s ease;
}
.faq__item details[open] .faq__icon {
  transform: rotate(180deg);
  background: var(--gold);
  color: var(--paper-3);
}
.faq__a {
  padding: 0 22px 20px;
  border-top: 1px solid var(--line);
  margin-top: 0;
}
.faq__a p {
  padding-top: 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 64ch;
}
.faq__item details[open] > summary { padding-bottom: 14px; }
.faq__item details[open] > summary .faq__q { color: var(--rot); }
@media (max-width: 540px) {
  .faq__item details > summary { padding: 14px 16px; }
  .faq__a { padding: 0 16px 16px; }
}

.bereiche__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}

.bereich {
  --k: var(--ink);
  --k-soft: var(--paper-3);
  --k-deep: var(--ink);
  display: flex;
  flex-direction: column;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}
.bereich::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--k);
  z-index: 2;
}
.bereich:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}
.bereich[data-color="gold"] { --k: var(--gold); --k-soft: var(--gold-soft); --k-deep: var(--gold-deep); }
.bereich[data-color="rot"]  { --k: var(--rot);  --k-soft: var(--rot-soft);  --k-deep: var(--rot-deep);  }
.bereich[data-color="blau"] { --k: var(--blau); --k-soft: var(--blau-soft); --k-deep: var(--blau-deep); }

.bereich__head {
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bereich__tag {
  align-self: flex-start;
  padding: 5px 12px;
  background: var(--k);
  color: var(--paper-3);
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bereich__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bereich__lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 30ch;
}

.bereich__services {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 10px;
}
.service {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.service::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  background: var(--k);
  opacity: 0;
  border-radius: 3px;
  transition: opacity .25s ease;
}
.service:hover,
.service:focus-visible {
  background: var(--paper-3);
  border-color: var(--k-soft);
  transform: translateX(2px);
  outline: none;
}
.service:hover::before,
.service:focus-visible::before { opacity: 1; }

.service__fig {
  width: 92px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.service__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.service:hover .service__fig img { transform: scale(1.06); }
.service__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.service__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.15;
  color: var(--ink);
}
.service__lede {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.service__arrow {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  color: var(--k);
  opacity: 0.45;
  transition: opacity .25s ease, transform .25s ease;
}
.service:hover .service__arrow,
.service:focus-visible .service__arrow {
  opacity: 1;
  transform: translateX(3px);
}

@media (max-width: 980px) {
  .bereiche__grid { grid-template-columns: 1fr; }
}

/* ----------- Variant-Picker (Spalten / Ziehharmonika) ----------- */
.vp-picker {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  margin-bottom: clamp(24px, 3vw, 40px);
  position: relative;
  z-index: 2;
}
.vp-tab {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  transition: background .25s ease, color .25s ease;
  white-space: nowrap;
}
.vp-tab:hover { color: var(--ink); background: var(--paper-2); }
.vp-tab.is-active { background: var(--ink); color: var(--paper-3); }
.vp-pane { display: none; }
.vp-pane.is-active { display: block; animation: vpFade .45s ease both; }
@keyframes vpFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------- Ziehharmonika (vertikaler Text) ----------- */
.acc {
  display: flex;
  gap: 10px;
  height: clamp(520px, 68vh, 720px);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.acc__item {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  transition: flex .8s cubic-bezier(.2,.85,.2,1);
  box-shadow: var(--sh-sm);
}
/* Leistungs-Karten: Farb-Codierung Wand=gold, Fassade=rot, Boden=blau
   (Florian-Feedback 2026-05-19) — Beschriftungs-Tags (Wand/Fassade/Boden) bleiben raus,
   nur das Overlay nutzt die Farbe */
.acc__item[data-color="gold"] { --acc-c: var(--gold); }
.acc__item[data-color="rot"]  { --acc-c: var(--rot);  }
.acc__item[data-color="blau"] { --acc-c: var(--blau); }
.acc__item::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Section-bewusster Verlauf: oben transparent (Bild durchscheinend), unten in der Bereichsfarbe abgedunkelt für Text-Kontrast */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.08) 0%,
    color-mix(in oklab, var(--acc-c) 28%, black) 72%,
    color-mix(in oklab, var(--acc-c) 38%, black) 100%);
  transition: background .5s ease;
  z-index: 1;
}
.acc__item::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--acc-c);
  z-index: 4;
}
/* Hover- und Focus-Expansion (kein Klick nötig) */
.acc__item:hover,
.acc__item:focus-within,
.acc__item.is-open { flex: 5; }

.acc__item:hover::before,
.acc__item:focus-within::before,
.acc__item.is-open::before {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--acc-c) 32%, black) 0%,
    color-mix(in oklab, var(--acc-c) 22%, rgba(0,0,0,0.55)) 55%,
    color-mix(in oklab, var(--acc-c) 14%, rgba(0,0,0,0.18)) 100%);
}

/* Wenn der Benutzer irgendeinen anderen Eintrag hovert, soll die vorab geöffnete Karte wieder schrumpfen */
.acc:hover .acc__item.is-open:not(:hover):not(:focus-within) { flex: 1; }
.acc:hover .acc__item.is-open:not(:hover):not(:focus-within)::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.78) 100%);
}

.acc__collapsed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 10px 18px;
  color: #fff;
  transition: opacity .3s ease;
}
.acc__item:hover .acc__collapsed,
.acc__item:focus-within .acc__collapsed,
.acc__item.is-open .acc__collapsed { opacity: 0; pointer-events: none; }
.acc:hover .acc__item.is-open:not(:hover):not(:focus-within) .acc__collapsed { opacity: 1; pointer-events: auto; }
.acc__collapsed .acc__tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 9px;
  background: var(--acc-c);
  border-radius: var(--r-pill);
  white-space: nowrap;
  margin-top: 12px;
}
.acc__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 21px);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.acc__expanded {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 48px);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px);
  transition: opacity .5s ease .25s, transform .5s ease .25s;
}
.acc__item:hover .acc__expanded,
.acc__item:focus-within .acc__expanded,
.acc__item.is-open .acc__expanded { opacity: 1; pointer-events: auto; transform: translateX(0); }
.acc:hover .acc__item.is-open:not(:hover):not(:focus-within) .acc__expanded {
  opacity: 0; pointer-events: none; transform: translateX(-12px);
}
.acc__tag--open {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  padding: 6px 14px;
  background: var(--acc-c);
  border-radius: var(--r-pill);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 20px;
  order: 99;
}
.acc__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: #fff;
  max-width: 100%;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.acc__expanded p {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, #fff 92%, transparent);
  max-width: 52ch;
}
.acc__list { display: grid; gap: 6px; max-width: 42ch; margin-bottom: 18px; }
.acc__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, #fff 88%, transparent);
}
.acc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--acc-c);
}
.acc__cta {
  align-self: flex-start;
  padding: 10px 16px;
  border: 1.5px solid var(--acc-c);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .25s ease, transform .25s ease;
}
.acc__cta:hover {
  background: var(--acc-c);
  transform: translateX(3px);
}
@media (max-width: 900px) {
  .acc { flex-direction: column; height: auto; gap: 8px; }
  .acc__item {
    height: 80px;
    flex: 0 0 auto;
    overflow: hidden;
    transition: height .55s cubic-bezier(.2,.85,.2,1);
  }
  .acc__item.is-open {
    height: 520px;
    flex: 0 0 auto;
  }

  /* Hover/Focus auf Mobile NICHT mehr expansionswirksam — nur is-open */
  .acc__item:hover, .acc__item:focus-within { flex: 0 0 auto; }
  .acc__item:hover::before,
  .acc__item:focus-within::before {
    background: linear-gradient(180deg,
      rgba(0,0,0,0.08) 0%,
      color-mix(in oklab, var(--acc-c) 28%, black) 72%,
      color-mix(in oklab, var(--acc-c) 38%, black) 100%);
  }
  .acc__item:hover .acc__collapsed,
  .acc__item:focus-within .acc__collapsed { opacity: 1; pointer-events: auto; }
  .acc__item:hover .acc__expanded,
  .acc__item:focus-within .acc__expanded { opacity: 0; pointer-events: none; transform: translateX(-12px); }
  .acc__item.is-open .acc__collapsed { opacity: 0; pointer-events: none; }
  .acc__item.is-open .acc__expanded { opacity: 1; pointer-events: auto; transform: translateX(0); }
  .acc:hover .acc__item.is-open:not(:hover):not(:focus-within) { flex: 0 0 auto; }
  .acc:hover .acc__item.is-open:not(:hover):not(:focus-within) .acc__collapsed { opacity: 0; }
  .acc:hover .acc__item.is-open:not(:hover):not(:focus-within) .acc__expanded { opacity: 1; pointer-events: auto; transform: translateX(0); }

  .acc__label {
    writing-mode: horizontal-tb;
    transform: none;
    order: 1;
    flex: 1;
    text-align: left;
    font-size: clamp(16px, 4.5vw, 20px);
  }
  .acc__collapsed {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 18px 22px;
    gap: 14px;
  }
  .acc__collapsed .acc__tag {
    margin-top: 0;
    order: 0;
    flex-shrink: 0;
  }
  /* Förder-Badge auf Dämmung — Mobile: nur im aufgeklappten Zustand sichtbar */
  .foerder-badge {
    top: 16px;
    bottom: auto;
    right: 16px;
    padding: 5px 10px;
    font-size: 9.5px;
    letter-spacing: 0.05em;
    gap: 5px;
  }
  .foerder-badge svg { width: 11px; height: 11px; }
  .foerder-badge__long { display: none; }
  .foerder-badge__short { display: inline; }
  /* Chevron-Icon — zeigt nach unten, dreht sich beim Öffnen, ganz rechts */
  .acc__collapsed::after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    order: 2;
    margin-left: auto;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .35s ease;
  }
  .acc__expanded {
    padding: 24px 22px 28px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease .12s, transform .4s ease .12s;
  }
  .acc__item.is-open .acc__expanded {
    opacity: 1;
    transform: translateY(0);
  }
  .acc__title { font-size: clamp(20px, 5vw, 26px); }
  .acc__list { max-width: 100%; }
  .acc__list li { font-size: 13.5px; }
}

/* Auto-Highlight (Mobile, IntersectionObserver) — Inhalt im mittleren Viewport bekommt Akzent */
@media (hover: none) {
  .leistung-bento__card.is-in-view {
    border-color: var(--k);
    transform: translateY(-2px);
    box-shadow: var(--sh-md);
  }
  .leistung-bento__card.is-in-view::before { transform: scaleX(1); }
  .lst-card.is-in-view {
    border-color: var(--k);
    box-shadow: var(--sh-md);
  }
  .step.is-in-view {
    box-shadow: var(--sh-md);
    border-color: var(--k);
  }
  .step.is-in-view::before {
    transform: scaleX(1);
    opacity: 1;
  }
  .partner.is-in-view {
    border-color: var(--ink-3);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }
  .partner.is-in-view .partner__logo {
    filter: grayscale(0) contrast(1);
    opacity: 1;
  }
  .sortiment__item.is-in-view {
    transform: translateY(-2px);
    border-color: var(--ink-3);
  }
}

.komp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

.komp {
  --k: var(--ink);
  --k-soft: var(--paper-3);
  --k-deep: var(--ink);
  display: flex;
  flex-direction: column;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
  position: relative;
}
.komp::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--k);
}
.komp:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--k);
}

.komp--gold { --k: var(--gold); --k-soft: var(--gold-soft); --k-deep: var(--gold-deep); }
.komp--rot  { --k: var(--rot);  --k-soft: var(--rot-soft);  --k-deep: var(--rot-deep);  }
.komp--blau { --k: var(--blau); --k-soft: var(--blau-soft); --k-deep: var(--blau-deep); }

.komp__fig {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin: 16px 16px 0;
  border-radius: var(--r-lg);
}
.komp__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.komp:hover .komp__fig img { transform: scale(1.04); }
.komp__tag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 12px;
  background: var(--k);
  color: var(--paper-3);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.komp__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 32px);
  flex: 1;
}
.komp__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.komp__lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.komp__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.komp__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
}
.komp__list a::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--k);
  opacity: 0.6;
  transition: opacity .25s ease, transform .25s ease;
}
.komp__list a:hover { color: var(--k-deep); }
.komp__list a:hover::before { opacity: 1; transform: scale(1.4); }

.komp__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 16px;
  border: 1.5px solid var(--k);
  color: var(--k-deep);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 13px;
  transition: background .25s ease, color .25s ease;
  align-self: flex-start;
}
.komp__cta:hover {
  background: var(--k);
  color: var(--paper-3);
}
.komp__cta svg { transition: transform .25s ease; }
.komp__cta:hover svg { transform: translateX(3px); }

@media (max-width: 920px) {
  .komp__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FACHHANDEL
   ============================================================ */
.fachhandel {
  padding-block: var(--stack-lg);
  background: transparent;
  position: relative;
  overflow: hidden;
}
.wash-layer--fachhandel {
  transform: translateY(40px);
}
.fachhandel .wrap { position: relative; z-index: 1; }

.fachhandel__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  max-width: none;
  padding-bottom: clamp(32px, 4vw, 56px);
}
.fachhandel__pauli {
  --pw: clamp(240px, 26vw, 410px);
  width: var(--pw);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 24px rgba(31, 27, 19, 0.18));
  background: transparent;
  object-fit: contain;
  position: relative;
  z-index: 2;
  /* 0,25 Pauli-Breite nach rechts + dezent nach unten — vorher 0.5 Pauli-Breite, jetzt 3/4 Pauli-Höhe (= 0.42 Pauli-Breite) höher gesetzt */
  transform: translate(calc(var(--pw) * 0.25), calc(var(--pw) * 0.078));
}
.fachhandel__pauli img { width: 100%; height: auto; display: block; }

.fachhandel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: clamp(14px, 1.6vw, 22px);
  grid-template-areas:
    "big      small1   small2"
    "feat     feat     feat"
    "foot     foot     foot"
    "partners partners partners";
}
.fachhandel__big {
  grid-area: big;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  box-shadow: var(--sh-md);
}
.fachhandel__big img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.fachhandel__big figcaption {
  position: absolute;
  left: 20px; bottom: 20px;
  padding: 8px 14px;
  background: color-mix(in oklab, var(--paper-3) 92%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.fachhandel__small {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
}
.fachhandel__small--1 { grid-area: small1; aspect-ratio: 4/3; }
.fachhandel__small--2 { grid-area: small2; aspect-ratio: 4/3; }
.fachhandel__small img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.fachhandel__small-cap {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 6px 12px;
  background: color-mix(in oklab, var(--paper-3) 92%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  font-size: 11px;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.fachhandel__feat {
  grid-area: feat;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 22px) clamp(22px, 2.2vw, 36px);
  padding: clamp(22px, 2.2vw, 32px) clamp(26px, 2.6vw, 40px);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.fachhandel__feat li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  align-items: flex-start;
  border-bottom: 0;
  padding: 0;
}
.fachhandel__feat li .dot { margin-top: 6px; width: 8px; height: 8px; }
.fachhandel__feat h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 3px;
}
.fachhandel__feat p {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
@media (max-width: 720px) {
  .fachhandel__feat { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .fachhandel__feat { grid-template-columns: 1fr; }
}

.fachhandel__foot {
  grid-area: foot;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: clamp(22px, 2.4vw, 28px) clamp(22px, 2.4vw, 32px);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  flex-wrap: wrap;
}
.fachhandel__hours p {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  margin-top: 6px;
}
.fachhandel__partners {
  grid-area: partners;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 28px);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.fachhandel__partners > .eyebrow {
  display: block;
  text-align: center;
  margin-bottom: clamp(16px, 1.8vw, 24px);
}

@media (max-width: 920px) {
  .fachhandel__head { grid-template-columns: 1fr; }
  .fachhandel__pauli {
    order: -1;
    --pw: clamp(200px, 50vw, 280px);
    width: var(--pw);
    margin: 0 auto;
    /* leichter Versatz nach rechts, nur minimal nach unten — Layout bleibt sauber */
    transform: translate(15%, 10%);
    position: relative;
    z-index: 2;
  }
  .fachhandel__grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "big      small1   small2"
      "feat     feat     feat"
      "foot     foot     foot"
      "partners partners partners";
  }
  .fachhandel__big,
  .fachhandel__small--1,
  .fachhandel__small--2 { aspect-ratio: 4/3; }
}
@media (max-width: 560px) {
  .fachhandel__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "big"
      "small1"
      "small2"
      "feat"
      "foot"
      "partners";
  }
  .fachhandel__big,
  .fachhandel__small--1,
  .fachhandel__small--2 { aspect-ratio: 16/9; }
}

/* ============================================================
   ERFAHRUNGEN
   ============================================================ */
/* ============================================================
   KARRIERE-TEASER (Bar direkt unter Hero)
   ============================================================ */
.career-teaser {
  background: linear-gradient(90deg, var(--gold-soft) 0%, var(--paper-2) 50%, var(--rot-soft) 100%);
  border-bottom: 1px solid var(--line);
}
.career-teaser__row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
  padding-block: 14px;
  flex-wrap: wrap;
}
.career-teaser__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rot-deep);
  flex-shrink: 0;
}
.career-teaser__text {
  font-size: 14px;
  color: var(--ink-2);
  flex: 1;
  min-width: 200px;
}
.career-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper-3);
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background .25s ease, transform .25s ease;
}
.career-teaser__cta:hover { background: var(--rot); transform: translateX(2px); }
.career-teaser__cta svg { transition: transform .25s ease; }
.career-teaser__cta:hover svg { transform: translateX(2px); }

/* ============================================================
   PROZESS — So läuft's ab (4 Schritte)
   ============================================================ */
.prozess {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  counter-reset: step;
}
.step {
  --k: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: var(--r-xl);
  right: var(--r-xl);
  height: 3px;
  background: var(--k);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform .4s ease, opacity .3s ease;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--k);
}
.step:hover::before {
  transform: scaleX(1);
  opacity: 1;
}
.step[data-color="gold"] { --k: var(--gold); }
.step[data-color="rot"]  { --k: var(--rot);  }
.step[data-color="blau"] { --k: var(--blau); }
.step[data-color="ink"]  { --k: var(--ink);  }
.step__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--k);
  letter-spacing: -0.02em;
}
.step__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.15;
  color: var(--ink);
}
.step__lede {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 920px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .steps { grid-template-columns: 1fr; }
}

/* ============================================================
   ÜBER UNS / HAUS — Selim-Portrait + Zitat
   ============================================================ */
.haus {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.haus__grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.4fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.haus__portrait {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--sh-md);
}
.haus__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.03);
}
.haus__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(31,27,19,0.85) 80%);
  color: var(--paper-3);
}
.haus__caption strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
}
.haus__caption span {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 242, 230, 0.7);
}

.haus__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.haus__quote {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.haus__quote em { font-style: italic; color: var(--rot-deep); }
.haus__quot {
  font-family: var(--serif);
  font-style: italic;
  color: var(--rot);
  font-size: 1.4em;
  line-height: 0;
  padding: 0 4px;
}
.haus__quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.haus__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 60ch;
}
.haus__text .num { color: var(--rot-deep); font-weight: 500; }

.haus__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.haus__facts > div {
  padding: 16px 20px;
  background: var(--paper-3);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.haus__facts > div:nth-child(2n) { border-right: 0; }
.haus__facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.haus__facts dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.haus__facts dd {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}

@media (max-width: 920px) {
  .haus__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   VORHER / NACHHER — Drag-Slider
   ============================================================ */
.ba-wrap {
  margin-top: clamp(40px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: center;
  text-align: center;
}
.ba-head {
  max-width: 56ch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.ba-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ba-head p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}

.ba-carousel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(0px, 5vw, 64px);
}
.ba-carousel__track {
  position: relative;
  min-height: 440px;
}
.ba-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: var(--sh-md);
  transition: background .25s ease, transform .25s ease, color .25s ease;
}
.ba-carousel__nav:hover { background: var(--ink); color: var(--paper-3); transform: translateY(-50%) scale(1.05); }
.ba-carousel__nav--prev { left: -8px; }
.ba-carousel__nav--next { right: -8px; }

.ba-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(20px, 2.4vw, 32px);
}
.ba-carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--line-2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.ba-carousel__dot:hover { background: var(--ink-3); }
.ba-carousel__dot.is-active {
  background: var(--rot);
  transform: scale(1.4);
}

/* Pairs werden absolut gestapelt, nur das aktive ist sichtbar */
.ba-carousel__track .ba-pair {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.ba-carousel__track .ba-pair.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Backwards-compat: alte ba-grid-Regel bleibt für mögliche statische Nutzung */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 32px);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.ba-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(8px, 1vw, 16px);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(14px, 1.6vw, 22px);
  box-shadow: var(--sh-sm);
  position: relative;
}
.ba-pair__col {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.ba-pair__col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-pair__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  align-self: center;
}
.ba-pair__tag {
  position: absolute;
  top: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-3);
  backdrop-filter: blur(6px);
}
.ba-pair__tag--before { left: 12px; background: rgba(74, 70, 60, 0.82); }
.ba-pair__tag--after  { right: 12px; background: rgba(176, 69, 39, 0.92); }
.ba-pair__caption {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 6px 0;
  border-top: 1px dashed var(--line);
  margin-top: clamp(10px, 1.2vw, 16px);
}
.ba-pair__caption strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
}
.ba-pair__caption span {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.ba-pair--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg,
      var(--paper-3) 0, var(--paper-3) 12px,
      var(--paper-2) 12px, var(--paper-2) 24px);
  border-style: dashed;
  min-height: 180px;
}
.ba-pair__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 20px;
  text-align: center;
}
.ba-pair__hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .ba-pair { grid-template-columns: 1fr; }
  .ba-pair__divider { transform: rotate(90deg); padding: 4px 0; }
}

/* ============================================================
   FÖRDER-BADGE auf Dämmung-Karte
   ============================================================ */
.foerder-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--rot-deep);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(31, 27, 19, 0.18);
  white-space: nowrap;
  /* Wie der expanded-Text: erst beim Aufklappen sichtbar */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .35s ease .2s, transform .35s ease .2s;
}
.acc__item:hover .foerder-badge,
.acc__item:focus-within .foerder-badge,
.acc__item.is-open .foerder-badge {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Wenn der Benutzer eine andere Karte hovert, vorab-geöffnete Karte verbergen */
.acc:hover .acc__item.is-open:not(:hover):not(:focus-within) .foerder-badge {
  opacity: 0;
  transform: translateY(-6px);
}
.foerder-badge__short { display: none; }

/* ============================================================
   PARTNER / MITGLIEDSCHAFTEN — eingebettet in Fachhandel
   ============================================================ */
.partners__logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  padding: 0;
  list-style: none;
}
.partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 22px 20px;
  min-height: 160px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.partner:hover {
  transform: translateY(-2px);
  border-color: var(--ink-3);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.partner__sub {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  line-height: 1.35;
  text-transform: uppercase;
  font-weight: 500;
}
.partner__logo {
  display: block;
  max-width: 100%;
  width: auto;
  height: 76px;
  object-fit: contain;
  filter: grayscale(1) contrast(0.95);
  opacity: 0.85;
  transition: filter .25s ease, opacity .25s ease;
}
.partner--logo:hover .partner__logo {
  filter: grayscale(0) contrast(1);
  opacity: 1;
}
.partner__logo--sto    { height: 42px; }
.partner__logo--adler  { height: 54px; mix-blend-mode: multiply; }
.partner__logo--innung { height: 56px; }

.partners__certs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 18px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cert {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}
.cert strong {
  color: var(--ink-2);
  font-weight: 600;
  margin-right: 4px;
}

@media (max-width: 920px) {
  .partners__logos { grid-template-columns: repeat(2, 1fr); }
  .partner { min-height: 140px; }
  .partner__logo { height: 64px; }
  .partner__logo--sto { height: 36px; }
  .partner__logo--adler { height: 46px; }
  .partner__logo--innung { height: 48px; }
}
@media (max-width: 540px) {
  .partners__logos { grid-template-columns: 1fr; gap: 12px; }
  .partner { min-height: 120px; padding: 22px 18px 16px; }
}

/* ============================================================
   MAPS — DSGVO-freundliche Karten (kein Iframe)
   ============================================================ */
/* Override des bestehenden Map-CSS für die neue Click-Card-Struktur */
.maps__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.maps__frame {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--paper-2);
  overflow: hidden;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.maps__leaflet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--paper-2);
}
.maps__leaflet .leaflet-container {
  width: 100%;
  height: 100%;
  background: var(--paper-2);
  font-family: var(--font-sans);
}
.maps__leaflet .leaflet-tile-pane { filter: saturate(0.85) contrast(0.96); }
.maps__leaflet .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255,255,255,0.78);
  color: var(--ink-3);
  padding: 1px 6px;
}
.maps__leaflet .leaflet-control-attribution a { color: var(--rot); }
.maps__leaflet .leaflet-popup-content-wrapper {
  background: var(--paper-3);
  color: var(--ink);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.maps__leaflet .leaflet-popup-content {
  font-family: var(--serif);
  font-size: 14px;
  margin: 10px 14px;
  line-height: 1.35;
}
.maps__leaflet .leaflet-popup-tip { background: var(--paper-3); }

.maps__info {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
  background: var(--paper-3);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.maps__info p {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.3;
}

/* ============================================================
   REFERENZEN — 3D rotierende Galerie
   ============================================================ */
.referenzen {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.erfahrungen {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}

/* Google-Bewertungs-Badge bei Erfahrungen */
.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-2);
  align-self: flex-start;
  box-shadow: var(--sh-sm);
}
.google-badge .g-logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 999px;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.google-badge__stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #FFC441;
  filter: drop-shadow(0 0 4px rgba(255, 196, 65, 0.35));
}
.google-badge__stars svg {
  width: 16px;
  height: 16px;
}
.google-badge__label {
  font-weight: 500;
  color: var(--ink);
}
.erfahrungen__pauli {
  position: absolute;
  top: clamp(40px, 5vw, 80px);
  right: clamp(120px, 16vw, 380px);
  width: clamp(205px, 24vw, 350px);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  pointer-events: none;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 16px 22px rgba(31, 27, 19, 0.18));
  z-index: 1;
}
.erfahrungen__pauli img { width: 100%; height: auto; display: block; }

@media (max-width: 780px) {
  .erfahrungen__pauli {
    top: -20px;
    right: -10px;
    width: clamp(160px, 36vw, 220px);
  }
}
.testis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.testi {
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}
.testi:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.testi__quot {
  font-family: var(--serif);
  font-style: italic;
  font-size: 56px;
  line-height: 0.5;
  color: var(--gold);
  height: 22px;
  overflow: hidden;
}
.testi p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
  flex: 1;
}
.testi footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.testi footer strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.testi footer span {
  font-size: 12px;
  color: var(--ink-3);
}
.testi__stars {
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 2px;
}
.erfahrungen__note {
  margin-top: 24px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--mute);
  font-size: 14px;
}

@media (max-width: 920px) {
  .testis { grid-template-columns: 1fr; }
}

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt {
  padding-block: var(--stack-lg);
  position: relative;
  overflow: hidden;
}
.kontakt__pauli {
  position: absolute;
  top: clamp(115px, 10vw, 220px);
  left: clamp(140px, 14vw, 260px);
  width: clamp(205px, 24vw, 350px);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  pointer-events: none;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 18px 22px rgba(31, 27, 19, 0.18));
  z-index: 1;
}
.kontakt__pauli img { width: 100%; height: auto; display: block; }

.kontakt__phone-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto clamp(36px, 4.4vw, 60px);
  text-align: center;
  position: relative;
  z-index: 2;
}
.kontakt__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.kontakt__phone-meta {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.5;
}
.kontakt__phone-meta-line { display: block; }
.kontakt__phone-meta-line--dim { color: var(--ink-3); opacity: 0.75; }

@media (max-width: 540px) {
  .kontakt__phone-meta {
    font-size: 11.5px;
    letter-spacing: 0.06em;
  }
  /* Mobile: Buttons als 1-Spalten-Stack, jeder Button volle Breite */
  .kontakt__cta-row {
    flex-direction: column;
    width: 100%;
  }
  .kontakt__cta-row .btn { width: 100%; justify-content: center; }
}

@media (max-width: 780px) {
  .kontakt__pauli {
    /* Auf Höhe der Headline 'Am liebsten am Telefon', nicht ganz oben */
    top: clamp(110px, 20vw, 170px);
    left: -45px;
    width: clamp(220px, 48vw, 340px);
    transform: none;
  }
}
@media (max-width: 540px) {
  .kontakt__pauli {
    width: clamp(160px, 40vw, 220px);
    left: -35px;
    top: clamp(140px, 32vw, 200px);
  }
}

.maps {
  display: grid;
  grid-template-columns: 1fr;  /* nur 1 Standort — Karte nimmt volle Container-Breite */
  gap: clamp(20px, 2.4vw, 32px);
  max-width: var(--max);
  margin: 0 auto clamp(40px, 5vw, 72px);
}
.maps .maps__frame {
  aspect-ratio: 21 / 9;  /* breiter als 16:10, da volle Container-Breite */
  min-height: 420px;
}
.maps__card {
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-sm);
  transition: transform .35s ease, box-shadow .35s ease;
}
.maps__card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.maps__frame {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--paper-2);
  overflow: hidden;
}
.maps__link {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--rot);
  padding: 6px 0;
  border-bottom: 1px solid var(--rot);
  margin-top: 6px;
  transition: color .25s ease, border-color .25s ease;
}
.maps__link:hover { color: var(--rot-deep); border-color: var(--rot-deep); }

@media (max-width: 780px) {
  .maps { grid-template-columns: 1fr; }
}

.kontakt__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  max-width: 1180px;
  margin-inline: auto;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.form legend { display: block; margin-bottom: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; }
.chips span {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: all .2s ease;
}
.chips label:hover span { border-color: var(--ink); color: var(--ink); }
.chips input:checked + span {
  background: var(--ink);
  color: var(--paper-3);
  border-color: var(--ink);
}

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; }
.form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form__field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.form__opt {
  text-transform: none;
  font-weight: 400;
  color: var(--mute);
  letter-spacing: 0;
}
.form__field input,
.form__field textarea,
.form__field select {
  font: inherit;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color .25s ease, background .25s ease;
  resize: vertical;
  width: 100%;
  max-width: 100%;
  min-width: 0;       /* Flex/Grid-Klassiker: ohne min-width:0 schrumpft Input nicht unter content-width */
}
/* File-Input ist auf Mobile der größte Übeltäter — Browser-Default-Button + Filename-Label sprengen den Container */
.form__field input[type="file"] {
  max-width: 100%;
  display: block;
  font-size: 14px;
}
.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--paper-3);
}

.orte { display: flex; flex-direction: column; gap: 16px; }
.ort {
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ort h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
}
.ort p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.ort__link {
  display: inline-flex;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  align-self: flex-start;
}
.ort__link:hover { color: var(--rot); border-color: var(--rot); }
.ort--hours p {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}

@media (max-width: 920px) {
  .kontakt__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(56px, 7vw, 88px) 24px;
}
.footer .wrap { padding-inline: var(--pad); }
.footer a { color: var(--paper); }
.footer a:hover { color: var(--gold); }

.footer__top {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(247, 242, 230, 0.12);
}
.footer__logo {
  height: 56px;
  width: auto;
}
.footer__claim {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  color: var(--paper);
  flex: 1;
}
.footer__claim em { font-style: italic; color: var(--gold); }
.footer__pauli {
  width: clamp(180px, 20vw, 280px);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  opacity: 0.95;
  background: transparent;
  object-fit: contain;
}
.footer__pauli img { width: 100%; height: auto; display: block; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-bottom: 40px;
}
.footer__cols .eyebrow { color: rgba(247, 242, 230, 0.5); }
.footer__cols .eyebrow em { color: var(--paper); }
.footer__cols ul { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.footer__cols a, .footer__cols p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(247, 242, 230, 0.8);
  margin-top: 8px;
}
.footer__cols a { margin-top: 0; }
.footer__cols a:hover { color: var(--gold); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 242, 230, 0.12);
  font-size: 12px;
  color: rgba(247, 242, 230, 0.5);
  flex-wrap: wrap;
  gap: 12px;
}
.footer__dots { display: inline-flex; gap: 6px; }

@media (max-width: 780px) {
  .footer__top { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   FAB
   ============================================================ */
.fab {
  position: fixed;
  right: clamp(16px, 2vw, 24px);
  bottom: clamp(16px, 2vw, 24px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--sh-lg);
  transform: translateY(80px);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease, background .25s ease;
}
.fab:hover { background: var(--accent); color: var(--paper-3); }
.fab.is-visible { transform: translateY(0); opacity: 1; }

/* Scroll-to-top: runder Icon-Button, erscheint oberhalb des Kontakt-FAB */
.fab--top {
  padding: 14px;
  width: 48px;
  height: 48px;
  justify-content: center;
  bottom: calc(clamp(16px, 2vw, 24px) + 60px);
  background: var(--paper-3);
  color: var(--ink);
  border: 1px solid var(--line);
  transform: translateY(40px) scale(0.85);
}
.fab--top:hover { background: var(--ink); color: var(--paper-3); }
.fab--top.is-visible { transform: translateY(0) scale(1); }

/* ============================================================
   EDIT-MODE (?edit oder Alt+E)
   ============================================================ */
body.is-edit-mode [contenteditable="true"] {
  outline: 1px dashed rgba(212, 168, 67, 0.55);
  outline-offset: 4px;
  border-radius: 4px;
  cursor: text;
  transition: outline-color .15s ease, background-color .15s ease;
}
body.is-edit-mode [contenteditable="true"]:hover {
  outline-color: var(--gold);
  background: rgba(212, 168, 67, 0.08);
}
body.is-edit-mode [contenteditable="true"]:focus {
  outline: 2px solid var(--rot);
  outline-offset: 4px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

#edit-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper-3);
  font-size: 13px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  font-family: var(--font-sans);
  letter-spacing: .01em;
}
#edit-banner kbd {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 2px;
  background: rgba(255,255,255,.12);
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  border: 1px solid rgba(255,255,255,.2);
}
#edit-banner strong {
  color: var(--gold);
  font-weight: 600;
}

/* ============================================================
   SUB-HERO (Unterseiten)
   ============================================================ */
.sub-hero {
  padding: clamp(120px, 12vw, 160px) 0 clamp(48px, 6vw, 80px);
  position: relative;
}
.sub-hero__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.sub-hero__text .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}
.sub-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: clamp(18px, 2vw, 28px);
}
.sub-hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--rot);
}
.sub-hero__lede {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: clamp(22px, 2.4vw, 32px);
  max-width: 56ch;
}
.sub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sub-hero__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  aspect-ratio: 4/3;
}
.sub-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 920px) {
  .sub-hero__row { grid-template-columns: 1fr; }
  /* Auf Mobile: kompaktes Padding, aber genug damit Hero NICHT unter die fixed Nav rutscht (Nav ~60-72px) */
  .sub-hero,
  .sub-hero--narrow { padding: clamp(90px, 14vw, 120px) 0 clamp(40px, 6vw, 64px); }
  /* Pauli kompakter positionieren auf Mobile */
  .sub-hero__pauli {
    top: clamp(20px, 4vw, 50px);
    left: clamp(12px, 4vw, 60px);
    width: clamp(140px, 32vw, 200px);
  }
}
.sub-hero--narrow {
  padding: clamp(120px, 12vw, 160px) 0 clamp(32px, 4vw, 56px);
}
.sub-hero__centered {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.sub-hero__title--center { margin-inline: auto; }
.sub-hero__lede--center {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.referenzen--page { padding-block: clamp(20px, 3vw, 40px) clamp(48px, 6vw, 80px); }

/* CTA-Band — Anrufen-Aufforderung am Ende der Unterseiten */
.cta-band {
  padding-block: clamp(48px, 6vw, 80px);
  background: var(--ink);
  color: var(--paper-3);
}
.cta-band__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.cta-band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  margin-bottom: 8px;
}
.cta-band p {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.55;
  max-width: 50ch;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}
.cta-band .btn--ink {
  background: var(--gold);
  color: var(--ink);
}
.cta-band .btn--ink:hover { background: #E2B650; }
.cta-band .btn--ghost {
  color: var(--paper-3);
  border-color: rgba(255, 252, 243, 0.55);
  background: rgba(255, 252, 243, 0.04);
}
.cta-band .btn--ghost:hover {
  border-color: var(--paper-3);
  background: rgba(255, 252, 243, 0.12);
  color: var(--paper-3);
}
@media (max-width: 720px) {
  .cta-band__row { grid-template-columns: 1fr; }
  .cta-band__actions { justify-content: flex-start; }
}

/* ============================================================
   SHOWROOM (Fachhandel-Seite)
   ============================================================ */
.showroom {
  padding-block: var(--stack);
}
.showroom__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.showroom__grid figure {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  box-shadow: var(--sh-sm);
}
.showroom__grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.showroom__grid figure:hover img { transform: scale(1.04); }
.showroom__grid figcaption {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 6px 14px;
  background: color-mix(in oklab, var(--paper-3) 92%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
@media (max-width: 720px) {
  .showroom__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BRANDS — Marken-Spotlights
   ============================================================ */
.brands {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.wash-layer--brands { transform: translateY(40px); }
.brands .wrap { position: relative; z-index: 1; }
.brands__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
@media (max-width: 1000px) {
  .brands__grid { grid-template-columns: 1fr 1fr; }
}
.brand-card {
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.brand-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.brand-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.brand-card__logo {
  height: 48px;
  width: auto;
  max-width: 60%;
  object-fit: contain;
}
.brand-card__logo--adler {
  mix-blend-mode: multiply;
  height: 56px;
}
.brand-card__logo--sonnhaus {
  height: 56px;
  object-fit: contain;
}
.brand-card__tag {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}
.brand-card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  color: var(--ink);
}
.brand-card__lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.brand-card__list {
  list-style: none;
  padding: 0;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brand-card__list li {
  font-size: 13.5px;
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.brand-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  background: var(--gold);
}
.brands__more {
  text-align: center;
  font-style: italic;
  color: var(--ink-3);
  font-size: 14px;
  max-width: 60ch;
  margin: 0 auto;
}
@media (max-width: 780px) {
  .brands__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SORTIMENT (Fachhandel-Seite)
   ============================================================ */
.sortiment {
  padding-block: var(--stack);
}
.sortiment__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.sortiment__item {
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .25s ease, border-color .25s ease;
  position: relative;
}
.sortiment__item:hover {
  transform: translateY(-2px);
  border-color: var(--ink-3);
}
.sortiment__item .dot {
  width: 10px;
  height: 10px;
  margin-bottom: 8px;
}
.sortiment__icon {
  --k: var(--ink);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--k);
  transition: transform .35s ease;
}
.sortiment__icon svg { width: 100%; height: 100%; }
.sortiment__item[data-color="gold"] .sortiment__icon { --k: var(--gold); }
.sortiment__item[data-color="rot"] .sortiment__icon  { --k: var(--rot); }
.sortiment__item[data-color="blau"] .sortiment__icon { --k: var(--blau); }
.sortiment__item:hover .sortiment__icon {
  transform: translateY(-2px) scale(1.06);
}
.sortiment__item h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
}
.sortiment__item p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
@media (max-width: 920px) { .sortiment__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sortiment__grid { grid-template-columns: 1fr; } }

/* ============================================================
   VISIT — Öffnungszeiten + Standort (Fachhandel-Seite)
   ============================================================ */
.visit {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.wash-layer--visit { transform: translateY(40px); }
.visit .wrap { position: relative; z-index: 1; }
.visit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
}
.visit__info .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}
.visit__hours {
  margin: clamp(20px, 2.4vw, 32px) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.visit__hours div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.visit__hours dt {
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
}
.visit__hours dd {
  font-family: var(--serif);
  color: var(--ink-2);
  font-size: 15px;
}
.visit__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.visit__map {
  aspect-ratio: 1/1;
  max-width: 480px;
  margin-left: auto;
}
@media (max-width: 920px) {
  .visit__grid { grid-template-columns: 1fr; }
  .visit__map { margin-left: 0; max-width: 100%; aspect-ratio: 4/3; }
}

.ba-wrap__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.4vw, 44px);
}

/* ============================================================
   KONTAKT-PAGE — Form mit Topic-Switcher
   ============================================================ */
.kontakt-form {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.wash-layer--kontakt-form,
.wash-layer--kontakt-direkt { transform: translateY(40px); }
.kontakt-form .wrap,
.kontakt-direkt .wrap { position: relative; z-index: 1; max-width: 880px; }

.form--page {
  margin-top: clamp(28px, 3.4vw, 44px);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
}

.topic-switcher {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0;
}
.topic-switcher__opt {
  position: relative;
  cursor: pointer;
}
.topic-switcher__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.topic-switcher__opt > span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 18px;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.topic-switcher__opt > span svg {
  margin-bottom: 4px;
  color: var(--ink-3);
  transition: color .2s ease;
}
.topic-switcher__opt > span strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
}
.topic-switcher__opt > span small {
  font-size: 12px;
  color: var(--ink-3);
}
.topic-switcher__opt:hover > span { border-color: var(--ink-3); }
.topic-switcher__opt input:checked + span {
  border-color: var(--rot);
  background: var(--paper-3);
  box-shadow: 0 4px 14px rgba(209, 90, 58, 0.12);
}
.topic-switcher__opt input:checked + span svg { color: var(--rot); }
.topic-switcher__opt input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.form__topic-block {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form__topic-block[hidden] {
  display: none !important;
}
.form__topic-block legend {
  margin-bottom: 8px;
}

.form--page input[type="text"],
.form--page input[type="email"],
.form--page input[type="tel"],
.form--page select,
.form--page textarea,
.form--page input[type="file"] {
  background: var(--paper-2);
}

/* Honeypot — versteckt für Menschen, sichtbar für Bots, die alle Felder befüllen.
   Submissions mit ausgefülltem bot-field werden von Netlify automatisch verworfen. */
.form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
  pointer-events: none;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.form__consent input {
  margin-top: 3px;
  flex-shrink: 0;
}
.form__consent a {
  color: var(--rot);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kontakt-direkt {
  padding-block: var(--stack);
  position: relative;
}
.orte--page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
  margin: 0 0 clamp(36px, 4vw, 56px);
  list-style: none;
  padding: 0;
}
.orte--page .ort {
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.orte--page .ort h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.15;
  color: var(--ink);
}
.orte--page .ort__hours {
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 6px;
}

@media (max-width: 720px) {
  .topic-switcher { grid-template-columns: 1fr; }
  .orte--page { grid-template-columns: 1fr; }
}

/* ============================================================
   LEISTUNG-DETAIL — /leistungen/{slug}/
   ============================================================ */
.leistung-hero {
  --k: var(--ink);
  padding: clamp(120px, 12vw, 160px) 0 clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.leistung-hero[data-color="gold"] { --k: var(--gold); }
.leistung-hero[data-color="rot"]  { --k: var(--rot); }
.leistung-hero[data-color="blau"] { --k: var(--blau); }
.wash-layer--leistung-hero { transform: translateY(40px); }
.leistung-hero .wrap { position: relative; z-index: 1; }
.leistung-hero__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  transition: color .25s ease, transform .25s ease;
}
.back-link::before {
  content: "←";
  margin-right: 4px;
  transition: transform .25s ease;
}
.back-link:hover { color: var(--rot); }
.back-link:hover::before { transform: translateX(-3px); }
.leistung-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: color-mix(in oklab, var(--paper-3) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k);
  margin-bottom: 16px;
}
.leistung-hero__tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--k);
}
.leistung-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: clamp(18px, 2vw, 28px);
}
.leistung-hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--k);
  display: block;
  font-size: 0.7em;
  margin-top: 4px;
}
.leistung-hero__lede {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: clamp(22px, 2.4vw, 32px);
  max-width: 56ch;
}
.leistung-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.leistung-hero__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  aspect-ratio: 4/3;
  position: relative;
}
.leistung-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.leistung-hero__badge {
  position: absolute;
  right: 18px; top: 18px;
  padding: 8px 14px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}
/* Hero-Pauli — peekt auf Mobile aus dem unteren Eck des Hero-Bilds, auf Desktop versteckt */
.leistung-hero__media { position: relative; }
.leistung-hero__pauli {
  display: none;
  position: absolute;
  bottom: -40px;
  right: -20px;
  width: clamp(140px, 36vw, 200px);
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  z-index: 3;
}
.leistung-hero__pauli img { width: 100%; height: auto; display: block; }

/* CTA-Band-Pauli — peekt links oben aus dem schwarzen Band */
.cta-band { position: relative; overflow: visible; }
.cta-band__pauli {
  display: none;
  position: absolute;
  top: -60px;
  right: clamp(8px, 4vw, 24px);
  width: clamp(120px, 30vw, 160px);
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  z-index: 3;
}
.cta-band__pauli img { width: 100%; height: auto; display: block; }

@media (max-width: 920px) {
  .leistung-hero__row { grid-template-columns: 1fr; }
  /* Auf Mobile: kompaktes Padding, aber genug damit Hero NICHT unter die fixed Nav rutscht (Nav ~60-72px) */
  .leistung-hero { padding: clamp(90px, 14vw, 120px) 0 clamp(56px, 7vw, 80px); }
  /* Pauli-Sichtbarkeit auf Mobile: Hero, "Drei Gründe", CTA-Band */
  .leistung-hero__pauli { display: block; }
  .leistung-warum__pauli { width: clamp(160px, 44vw, 220px); top: auto; bottom: -10px; right: 8px; left: auto; }
  .cta-band__pauli { display: block; }
}

/* Fließtext-Sektion mit zwei Hauptprinzipien aus dem Briefing */
.leistung-prinzipien {
  padding-block: clamp(48px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}
.leistung-prinzipien .wrap { max-width: 1040px; position: relative; z-index: 1; }
.leistung-prinzipien__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.5vw, 56px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.leistung-prinzipien article h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 12px;
}
.leistung-prinzipien article p {
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.65;
  color: var(--ink-2);
}
@media (max-width: 780px) {
  .leistung-prinzipien__grid { grid-template-columns: 1fr; gap: 32px; }
}

.leistung-was {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.leistung-was .wrap { max-width: 880px; position: relative; z-index: 1; }
.leistung-list {
  list-style: none;
  padding: 0;
  margin-top: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.leistung-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
  padding: 18px 22px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .2s ease, transform .2s ease;
}
.leistung-list li:hover {
  border-color: var(--ink-3);
  transform: translateX(2px);
}
.leistung-list__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
  margin-top: 2px;
}
.leistung-list strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.2;
}
.leistung-list p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.leistung-warum {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.wash-layer--leistung-warum { transform: translateY(40px); }
.leistung-warum .wrap { position: relative; z-index: 1; }
.leistung-warum__pauli {
  position: absolute;
  top: clamp(30px, 3vw, 60px);
  right: clamp(80px, 10vw, 180px);
  width: clamp(220px, 26vw, 360px);
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  pointer-events: none;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 18px 22px rgba(31, 27, 19, 0.18));
  z-index: 2;
}
.leistung-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(28px, 3.4vw, 44px);
  list-style: none;
  padding: 0;
}
/* Variante mit zwei Säulen (für Pages, deren Briefing-Inhalt nur zwei Hauptprinzipien enthält) */
.leistung-trust--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 920px;
}
.leistung-trust li {
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leistung-trust__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  color: var(--gold);
}
.leistung-trust h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.2;
  color: var(--ink);
}
.leistung-trust p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 920px) {
  .leistung-trust { grid-template-columns: 1fr; }
}

/* ============================================================
   TRUST-STRIP MINI — auf Leistungs-Detailseiten
   ============================================================ */
.trust-strip-mini {
  padding-block: clamp(28px, 3.4vw, 48px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.trust-strip-mini__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
}
.trust-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.trust-mark strong {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.trust-mark span {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
}
.trust-mark__logo {
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(0.4) opacity(0.85);
  transition: filter .2s ease;
}
.trust-mark:hover .trust-mark__logo { filter: grayscale(0) opacity(1); }
.trust-mark__star {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.trust-mark__star svg { color: #fbbc05; width: 14px; height: 14px; }
@media (max-width: 920px) {
  .trust-strip-mini__row { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .trust-mark:nth-child(n+4) { display: none; }
}

/* ============================================================
   LEISTUNG-BENTO — Cards statt Liste
   ============================================================ */
.leistung-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  list-style: none;
  padding: 0;
  margin-top: clamp(24px, 3vw, 40px);
}
.leistung-bento__card {
  --k: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.leistung-bento__card[data-color="gold"] { --k: var(--gold); }
.leistung-bento__card[data-color="rot"]  { --k: var(--rot); }
.leistung-bento__card[data-color="blau"] { --k: var(--blau); }
.leistung-bento__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--k);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.leistung-bento__card:hover {
  transform: translateY(-3px);
  border-color: var(--k);
  box-shadow: var(--sh-md);
}
.leistung-bento__card:hover::before { transform: scaleX(1); }
.leistung-bento__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--k);
  line-height: 1;
  margin-bottom: 4px;
}
.leistung-bento__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--k);
  margin-bottom: 6px;
  transition: transform .35s ease;
}
.leistung-bento__icon svg {
  width: 100%;
  height: 100%;
}
.leistung-bento__card:hover .leistung-bento__icon {
  transform: translateY(-2px) scale(1.06);
}
.leistung-bento__card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.2;
  color: var(--ink);
  /* Kein In-Wort-Trennstrich — bricht nur an Leerzeichen oder <wbr> */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
}
.leistung-bento__card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: pretty;
}
@media (max-width: 540px) {
  .leistung-bento__card {
    padding: 18px 18px;
  }
  .leistung-bento__card h3 {
    font-size: 16px;
  }
}
@media (max-width: 920px) { .leistung-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .leistung-bento { grid-template-columns: 1fr; } }

/* ============================================================
   MINI-REFS — Beispiele aus dem Bereich
   ============================================================ */
.leistung-refs {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.leistung-refs .wrap { position: relative; z-index: 1; }
.leistung-refs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(24px, 3vw, 40px);
}
.leistung-refs__grid figure {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
  box-shadow: var(--sh-sm);
}
.leistung-refs__grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.leistung-refs__grid figure:hover img { transform: scale(1.04); }
.leistung-refs__grid figcaption {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 6px 12px;
  background: color-mix(in oklab, var(--paper-3) 92%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.leistung-refs__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3vw, 40px);
}
@media (max-width: 720px) { .leistung-refs__grid { grid-template-columns: 1fr; } }

/* ============================================================
   LEISTUNG-FAQ — kleinere FAQ-Variante auf Detail-Seiten
   ============================================================ */
.leistung-faq {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.wash-layer--leistung-faq { transform: translateY(40px); }
.leistung-faq .wrap { position: relative; z-index: 1; max-width: 880px; }

/* ============================================================
   LEISTUNG-REVIEWS — Google-Badge + 2 Testimonials
   ============================================================ */
.leistung-reviews {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.leistung-reviews .wrap { max-width: 1100px; position: relative; z-index: 1; }
.leistung-reviews__head {
  text-align: center;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.leistung-reviews__head .google-badge {
  margin-top: 16px;
}
.leistung-reviews__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 720px) { .leistung-reviews__grid { grid-template-columns: 1fr; } }

/* ============================================================
   LEISTUNG-RELATED — 3 Karten "Auch interessant"
   ============================================================ */
.leistung-related {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
.leistung-related .wrap { max-width: 1180px; position: relative; z-index: 1; }
.leistung-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(24px, 3vw, 40px);
  list-style: none;
  padding: 0;
}
.related-card {
  --k: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.related-card[data-color="gold"] { --k: var(--gold); }
.related-card[data-color="rot"]  { --k: var(--rot); }
.related-card[data-color="blau"] { --k: var(--blau); }
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--k);
}
.related-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.related-card__media {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.related-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.related-card:hover .related-card__media img { transform: scale(1.04); }
.related-card__body {
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.related-card__tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k);
  font-weight: 600;
}
.related-card__body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
}
.related-card__body p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  flex: 1;
}
.related-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--k);
}
.related-card:hover .related-card__cta svg { transform: translateX(3px); }
@media (max-width: 920px) { .leistung-related__grid { grid-template-columns: 1fr; } }

/* ============================================================
   LEISTUNGEN — Übersichts-Grid auf /leistungen/
   ============================================================ */
.leistungen-grid {
  padding-block: var(--stack);
  position: relative;
  overflow: hidden;
}
.wash-layer--leistungen { transform: translateY(40px); }
.leistungen-grid .wrap { position: relative; z-index: 1; }
.lst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  list-style: none;
  padding: 0;
}
.lst-card {
  --k: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.lst-card[data-color="gold"] { --k: var(--gold); }
.lst-card[data-color="rot"]  { --k: var(--rot);  }
.lst-card[data-color="blau"] { --k: var(--blau); }
.lst-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--k);
}
.lst-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.lst-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.lst-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.lst-card:hover .lst-card__media img { transform: scale(1.04); }
.lst-card__tag {
  position: absolute;
  left: 14px; top: 14px;
  padding: 6px 12px;
  background: color-mix(in oklab, var(--paper-3) 92%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k);
  box-shadow: var(--sh-sm);
}
.lst-card__badge {
  position: absolute;
  right: 14px; top: 14px;
  padding: 6px 12px;
  background: var(--gold);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
}
.lst-card__body {
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.lst-card__body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  color: var(--ink);
}
.lst-card__body h3 span {
  display: block;
  font-style: italic;
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 2px;
}
.lst-card__body p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  flex: 1;
}
.lst-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--k);
  letter-spacing: 0.01em;
}
.lst-card__cta svg { transition: transform .25s ease; }
.lst-card:hover .lst-card__cta svg { transform: translateX(4px); }
@media (max-width: 920px) {
  .lst-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .lst-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LEGAL — Impressum & Datenschutz
   ============================================================ */
.legal {
  padding: clamp(120px, 12vw, 160px) 0 clamp(48px, 6vw, 84px);
  position: relative;
}
.legal .wrap {
  max-width: 820px;
}
.legal__head { margin-bottom: clamp(32px, 4vw, 56px); }
.legal__head .eyebrow { display: inline-block; margin-bottom: 14px; }
.legal__head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.legal__intro {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.legal section {
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.legal h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.legal p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.legal p:last-child { margin-bottom: 0; }
.legal a {
  color: var(--rot);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal a:hover { color: var(--rot-deep); }
.legal ul {
  list-style: disc;
  padding-left: 22px;
  margin: 8px 0 12px;
}
.legal ul li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.legal strong { color: var(--ink); font-weight: 600; }
.legal em { color: var(--ink-3); font-style: italic; }
.legal__updated {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}
[data-todo] {
  background: rgba(212, 168, 67, 0.10);
  border-left: 2px solid var(--gold);
  padding: 8px 12px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====== WhatsApp-Akzent (Selims Ausbesserungen, 2026-05-12) ====== */
:root {
  --wa: #25D366;
  --wa-dark: #128C7E;
  --wa-bg: #DCF8C6;
}

/* Nav-Button neben Anrufen — übernimmt .btn-Padding, überschreibt nur Farben */
.btn--wa {
  background: var(--wa);
  color: #fff;
  border-color: var(--wa);
}
.btn--wa:hover {
  background: var(--wa-dark);
  border-color: var(--wa-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}
.btn--wa:hover svg { transform: none; }

.nav__cta--wa { margin-left: 6px; }

/* FAB-Variante — verhält sich wie der Anrufen-FAB (erscheint beim Scrollen) */
.fab--wa {
  background: var(--wa);
  color: #fff;
  bottom: calc(clamp(16px, 2vw, 24px) + 60px); /* über dem Standard-FAB */
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35);
}
.fab--wa:hover { background: var(--wa-dark); color: #fff; }

/* fabTop rutscht eine Stufe höher, um WA nicht zu überlappen */
.fab--top { bottom: calc(clamp(16px, 2vw, 24px) + 120px); }

/* Kontakt-Ort-Card für WhatsApp */
.ort--whatsapp .eyebrow em { color: var(--wa-dark); }
.ort__link--whatsapp {
  color: var(--wa-dark);
  font-weight: 600;
}
.ort__link--whatsapp:hover {
  color: var(--wa);
  border-color: var(--wa);
}

@media (max-width: 720px) {
  /* WA-Button im Mobile-Nav klein halten — nur Icon, kein Text */
  .nav__cta--wa span { display: none; }
  .nav__cta--wa { padding: 10px; }
}

/* ====== Fachhandel-Features: Marken-Badges + Logo (Selims Ausbesserungen, 2026-05-13) ====== */
.fachhandel__feat .feat__brand {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--paper-3, #f6f1e7);
  color: var(--ink-3, #5a564f);
  vertical-align: middle;
}
.fachhandel__feat .feat__logo {
  display: block;
  margin: 10px auto 0;
  height: 30px;
  width: auto;
  opacity: 1;
  object-fit: contain;
}
.fachhandel__feat .feat__logo--lg {
  height: 40px;
}

/* ====== Nav-Dropdown FLACH (Selims Ausbesserungen, 2026-05-13) ====== */
/* Ohne Farbgruppierung — einfache Liste, alle 9 Leistungen untereinander */
.nav__dropdown--flat {
  display: block;
  min-width: 280px;
  padding: 16px 0;
  grid-template-columns: none;
  gap: 0;
}
.nav__dropdown--flat > li {
  margin: 0;
  padding: 0;
}
.nav__dropdown--flat > li > a {
  display: block;
  padding: 10px 26px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  border-left: 3px solid transparent;
}
.nav__dropdown--flat > li > a:hover,
.nav__dropdown--flat > li > a[aria-current="page"] {
  background: var(--paper-3);
  color: var(--ink);
  border-left-color: var(--ink);
}
.nav__dropdown--flat > li > a::after { display: none; }

/* ============================================================
   PROJEKTE-AUSWAHL — Multi-Slider (Selims Ausbesserungen, 2026-05-13)
   Horizontal scrollbarer Slider mit Karten, Pfeil-Navigation,
   scroll-snap für sauberes Snappen, Mobile-touch-freundlich
   ============================================================ */
.projekte-auswahl {
  position: relative;
  padding: clamp(60px, 8vw, 110px) 0;
  overflow: hidden;
}
.projekte-auswahl .wash-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.projekte-auswahl .wrap { position: relative; z-index: 1; }

.projekte-slider {
  position: relative;
  margin-top: clamp(28px, 4vw, 50px);
}
.projekte-slider__track {
  display: flex;
  gap: clamp(14px, 1.8vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 6px 16px;
  margin: 0 -6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.projekte-slider__track::-webkit-scrollbar { height: 6px; }
.projekte-slider__track::-webkit-scrollbar-track { background: transparent; }
.projekte-slider__track::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

.projekte-card {
  flex: 0 0 calc((100% - 2 * clamp(14px, 1.8vw, 24px)) / 3);
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: 0 6px 22px rgba(31, 27, 19, 0.10);
  transition: transform .35s ease, box-shadow .35s ease;
}
.projekte-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(31, 27, 19, 0.18);
}
.projekte-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.projekte-card:hover img { transform: scale(1.05); }
.projekte-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0) 100%);
  font-size: 13px;
}
.projekte-card figcaption strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.projekte-card figcaption span {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.projekte-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--sh-md);
  z-index: 3;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.projekte-slider__nav:hover { background: var(--ink); color: var(--paper-3); }
.projekte-slider__nav:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.projekte-slider__nav--prev { left: -10px; }
.projekte-slider__nav--next { right: -10px; }

@media (max-width: 920px) {
  .projekte-card { flex-basis: calc((100% - clamp(14px, 1.8vw, 24px)) / 2); }
}
@media (max-width: 600px) {
  .projekte-card { flex-basis: 82%; }
  .projekte-slider__nav { display: none; }
  .projekte-slider__track { scroll-padding-left: 6px; }
}

/* ====== Reviews-More CTA (Selims Ausbesserungen, 2026-05-18) ====== */
.reviews-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 36px);
  position: relative;
  z-index: 2;
}
.reviews-more .btn {
  gap: 10px;
}
.reviews-more svg:first-of-type {
  color: #4285F4;
}

/* ============================================================
   FÖRDERUNGS-BLOCK auf Dämmung-Subseite (Selims Ausbesserungen, 2026-05-18)
   Prägnante, auffallende Sektion für KfW / BEG / Steuerbonus
   ============================================================ */
.foerderung {
  padding: clamp(60px, 8vw, 110px) 0;
  position: relative;
}
.foerderung__card {
  background: linear-gradient(135deg, var(--ink) 0%, #2A2418 100%);
  color: var(--paper);
  border-radius: clamp(20px, 2vw, 32px);
  padding: clamp(36px, 5vw, 64px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(31, 27, 19, 0.25);
}
.foerderung__card::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,67,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.foerderung__head {
  max-width: 720px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
  position: relative;
  z-index: 1;
}
.foerderung__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--gold);
  color: var(--ink);
  margin-bottom: 18px;
}
.foerderung__eyebrow {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.foerderung__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.foerderung__title strong {
  color: var(--gold);
  font-weight: 600;
}
.foerderung__title em {
  font-style: italic;
}
.foerderung__lede {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
  margin: 0;
}
.foerderung__lede strong {
  color: var(--paper);
  font-weight: 600;
}
.foerderung__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  position: relative;
  z-index: 1;
}
.foerderung__grid > li {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: clamp(20px, 2vw, 28px);
}
.foerderung__pill {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.foerderung__grid h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--paper);
}
.foerderung__grid p {
  font-size: 13px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
  margin: 0;
}
.foerderung__grid em {
  font-style: italic;
  color: var(--gold);
}
.foerderung__cta {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  position: relative;
  z-index: 1;
}
.foerderung__cta .btn--ink {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.foerderung__cta .btn--ink:hover {
  background: #E5BC56;
  border-color: #E5BC56;
  color: var(--ink);
}
.foerderung__cta-meta {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}
@media (max-width: 820px) {
  .foerderung__grid { grid-template-columns: 1fr; }
}

/* Hero-Förder-Pill (Dämmung-Subseite) — auffälliger Hinweis-Link zum Förder-Block */
.hero-foerder-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  margin: 14px 0 6px;
  background: linear-gradient(135deg, var(--ink) 0%, #2A2418 100%);
  color: var(--paper);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(31, 27, 19, 0.18);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  z-index: 2;
}
.hero-foerder-pill svg:first-of-type { color: var(--gold); }
.hero-foerder-pill strong { color: var(--gold); font-weight: 700; }
.hero-foerder-pill svg:last-of-type {
  opacity: 0.5;
  transition: transform .25s ease, opacity .25s ease;
}
.hero-foerder-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(31, 27, 19, 0.28);
}
.hero-foerder-pill:hover svg:last-of-type {
  transform: translateX(3px);
  opacity: 1;
}
@media (max-width: 640px) {
  .hero-foerder-pill { font-size: 12px; padding: 8px 14px; gap: 8px; }
}

/* ============================================================
   KONTAKT-KARTE — volle Breite direkt unter dem Formular
   (Selims Ausbesserungen, 2026-05-18)
   ============================================================ */
.kontakt-map {
  margin: clamp(40px, 5vw, 80px) 0 clamp(50px, 6vw, 90px);
  position: relative;
}
.kontakt-map__frame {
  width: 100%;
  height: clamp(420px, 55vh, 600px);
  background: var(--paper-3);
  overflow: hidden;
  position: relative;
  border-radius: var(--r-xl);
  box-shadow: 0 12px 32px rgba(31, 27, 19, 0.12);
}
.kontakt-map__frame .maps__leaflet {
  width: 100%;
  height: 100%;
}
.kontakt-map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding-top: 22px;
  padding-bottom: 4px;
}
.kontakt-map__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kontakt-map__info p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.kontakt-map__info p strong {
  color: var(--ink);
  font-weight: 600;
}
.kontakt-map__bar .btn {
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .kontakt-map__frame { height: 360px; }
  .kontakt-map__bar { padding-top: 18px; }
}

/* ====== Tel-Buttons mit Länder-Flaggen, übereinander (V3, 2026-05-21) ====== */
.hero__actions--stacked {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 380px;
  gap: 10px;
}
.hero__actions--stacked .btn--wa {
  width: 100%;
  justify-content: center;
}
.hero__tels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.hero__tels .btn--tel {
  min-width: 0;
  padding: 10px 12px;
  gap: 8px;
}
.hero__tels .btn__tel-label small {
  font-size: 9px;
  letter-spacing: 0.06em;
}
.hero__tels .btn__tel-label .js-tel-display {
  font-size: 13px;
}
.hero__tels .btn__flag {
  width: 22px;
  height: 15px;
}
.kontakt__tels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn--tel {
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  min-width: 220px;
}
.btn__flag {
  display: inline-block;
  width: 26px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
  flex-shrink: 0;
}
.btn__flag svg {
  display: block;
  width: 100%;
  height: 100%;
}
.btn__tel-label {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
}
.btn__tel-label small {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: 600;
}
.btn__tel-label .js-tel-display {
  font-weight: 600;
}
.kontakt__cta-row--stacked-tels {
  align-items: flex-start;
}
.kontakt__cta-stack--home {
  max-width: 540px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kontakt__cta-stack--home .kontakt__cta-row--tels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.kontakt__cta-stack--home .btn--tel {
  width: 100%;
  justify-content: flex-start;
  min-width: 0;
  text-align: left;
}
.kontakt__cta-wa-home {
  justify-content: center;
  width: 100%;
}
@media (max-width: 600px) {
  .kontakt__cta-stack--home .kontakt__cta-row--tels {
    grid-template-columns: 1fr;
  }
}
.kontakt__cta-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
.kontakt__cta-row--top,
.kontakt__cta-row--tels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.kontakt__cta-row--top .btn,
.kontakt__cta-row--tels .btn {
  width: 100%;
  justify-content: center;
}
.kontakt__cta-row--tels .btn--tel {
  justify-content: flex-start;
  text-align: left;
  min-width: 0;
}
@media (max-width: 600px) {
  /* Tel-Stacks auf Mobile: kompakt, zentriert, max 320px (V3-fix, 2026-05-22) */
  .kontakt__cta-stack,
  .kontakt__cta-stack--home,
  .danke__cta-stack {
    width: 100% !important;
    max-width: 320px !important;
    margin-inline: auto !important;
    align-items: stretch !important;
  }
  .kontakt__cta-stack .kontakt__cta-row--top,
  .kontakt__cta-stack .kontakt__cta-row--tels,
  .kontakt__cta-stack--home .kontakt__cta-row--top,
  .kontakt__cta-stack--home .kontakt__cta-row--tels,
  .danke__cta-stack .danke__tels {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    gap: 10px !important;
  }
  /* Home Hero Stack: Tel-Buttons nebeneinander oben, WhatsApp drunter — alle gleich breit */
  .hero__actions--stacked {
    width: 100% !important;
    max-width: 360px !important;
  }
  .hero__actions .hero__tels {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
  }
  .hero__actions .hero__tels .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
  .hero__actions--stacked .btn--wa {
    width: 100% !important;
  }
  .kontakt__cta-stack .btn,
  .kontakt__cta-stack--home .btn,
  .danke__cta-stack .btn,
  .hero__actions .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
  .btn--tel {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Leistungs-Subseiten Hero + CTA-Band: alle 4 Buttons als 2x2-Grid (DE+AT oben, WA+Anfrage unten) */
  .leistung-hero__actions,
  .cta-band__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-inline: auto !important;
  }
  .leistung-hero__actions .btn,
  .cta-band__actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
  }
  .leistung-hero__actions .btn--tel,
  .cta-band__actions .btn--tel {
    justify-content: flex-start;
    padding-inline: 10px;
  }
  /* Fachhandel Sub-Hero Actions: gleiche Logik */
  .sub-hero__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-inline: auto !important;
  }
  .sub-hero__actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
  }
  .sub-hero__actions .btn--tel {
    justify-content: flex-start;
    padding-inline: 10px;
  }
}

/* ====== Pflichtfeld-Marker (V3, 2026-05-22) ====== */
.form__req {
  color: var(--rot, #D15A3A);
  font-weight: 600;
  margin-left: 2px;
}
.form__consent .form__req {
  margin-right: 4px;
  margin-left: 0;
}

/* ====== Danke-Seite (V3, 2026-05-22) ====== */
.danke {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Wash-Layer Hintergrund (Blau / Rot / Gold) — wie auf den Leistungs-Heroes */
.wash-layer--danke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}

.danke__hero {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 0 40px;
  overflow: hidden;
}

/* Pauli: absolut links, vertikal mittig auf gleicher Höhe wie Textblock */
.danke__pauli-wrap {
  position: absolute;
  left: clamp(20px, 4vw, 80px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 22vw, 320px);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.danke__pauli {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

/* Content: horizontal zentriert */
.danke__row {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  width: 100%;
}
.danke__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
}

/* Mobile: Pauli klein über dem Content */
@media (max-width: 860px) {
  .danke__hero {
    padding: 90px 0 24px;
    flex-direction: column;
    gap: 16px;
  }
  .danke__pauli-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 140px;
    margin-inline: auto;
  }
}
.danke__hero {
  width: 100%;
}
.danke__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--paper-3, #f6f1e7);
  color: var(--gold, #D4A843);
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.danke__title {
  font-family: var(--serif);
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.08;
  margin-bottom: 14px;
  color: var(--ink);
}
.danke__title em {
  color: var(--gold, #D4A843);
  font-style: italic;
}
.danke__lede {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 22px;
}
.danke__cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.danke__tels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.danke__cta-stack .btn--tel {
  min-width: 0;
  width: 100%;
  justify-content: flex-start;
}
.danke__cta-stack .btn--wa {
  justify-content: center;
  width: 100%;
}
.danke__back {
  justify-content: center;
  width: 100%;
  margin-top: 8px;
}
@media (max-width: 540px) {
  .danke__tels {
    grid-template-columns: 1fr;
  }
}