/* ══════════════════════════════════════════════════════════════
   SOLARREINIGUNG BAYREUTH — Solar Energy
   Manrope sans-serif · soft radii · Logo-Blau (Photovoltaik) +
   Solar-Amber · ertrags- und trust-first. Built for conversion.

   Akzent-Palette aus dem Firmenlogo abgeleitet: Logo-Hellblau
   (#1870b0) als Primär-Akzent, Logo-Navy (#283060) als Trust-Anker,
   warmes Solar-Amber (Sonne/Ertrag) als Sekundär-Akzent. Struktur,
   Radien, Schatten, Typo, Motion und Gradient-Style sind identisch —
   dieselbe Machart, nur die Farbwerte tragen die Logo-Identität.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Surface & Ink — kühle Neutrals (slate) mit leichter Blau-Bias, passt zum Logo-Blau */
  --paper:        #ffffff;
  --paper-soft:   #f7f9fc;       /* slate/blue-50 */
  --paper-deep:   #eef2f8;       /* slate/blue-100 */
  --line:         #dde5ef;       /* slate/blue-200 */
  --line-soft:    #eef2f8;       /* slate/blue-100 */
  --line-strong:  #c4d0e0;       /* slate/blue-300 */

  --ink:          #111a2e;       /* deep navy-slate */
  --ink-soft:     #33415c;       /* navy-700 */
  --ink-mute:     #64748b;       /* slate-500 */
  --ink-faint:    #94a3b8;       /* slate-400 */

  /* Akzent — Logo-Blau (Photovoltaik / Technik / Vertrauen).
     Die --clay*-Namen sind aus der Referenz beibehalten, damit das
     komplette Komponenten-System unverändert greift — nur die Werte
     tragen jetzt die Solar-Identität.
     --clay      = primärer Akzent (Buttons, Headlines em, Hover)
     --clay-deep = Aktiv/Hover-State, dunkler
     --clay-soft = heller Akzent auf dunklem Grund
     --clay-tint = sehr helle Fläche für Badges/Pills */
     Werte übernommen aus dem Firmenlogo: Hellblau (#1870b0, das „A“)
     als Primär-Akzent, Navy (#283060, das „N“) als Trust-Anker. */
  --clay:         #1870b0;       /* Logo-Blau (hell) */
  --clay-deep:    #155e94;       /* dunkler für Hover/Aktiv */
  --clay-soft:    #7ec4ee;       /* helles Himmelblau für dunklen Grund */
  --clay-tint:    #e8f2fb;       /* sehr helle Blau-Fläche für Badges/Pills */

  /* Sekundär-Akzent — Solar-Amber (Sonne / Ertrag).
     Sparsam eingesetzt: Ertrags-Kennzahlen, Sonnen-Akzente, Sterne. */
  /* Reines Logo-Gelb (leuchtendes Gold) statt Amber/Orange.
     Gelb-Text auf hellem Grund bleibt leuchtend (--sun) und wird über einen
     dünnen dunklen Textschatten lesbar gemacht (siehe .yield-figure). */
  --sun:          #fccf00;       /* Logo-Gelb (leuchtend) — Text-Highlights, Flächen, Verläufe */
  --sun-deep:     #e0a800;       /* Gold — Akzente auf dunklem Grund / Icons */
  --sun-soft:     #ffe14d;       /* helles Gelb für dunklen Grund */
  --sun-tint:     #fff9e0;       /* sehr helle Gelb-Fläche für Badges/Pills */
  --sun-ink-badge: #8a6600;      /* lesbares Gold für kleinen Badge-Text auf hellem Tint (AA) */
  --sun-badge-border: #ffe9a3;   /* weiche Gelb-Border für Badge-Pillen */
  /* Linksbündige Ausrichtung des Badge-Textes zum Titel: Pille um ihren linken
     Innenabstand (Padding 12 + Punkt 6 + Gap 8 = 26px) nach links, aber nie
     über den Seiten-Gutter hinaus (mobilsicher via max()). */
  --badge-pull: max(-26px, calc(var(--gutter) * -1 + .25rem));

  /* Gradient — gleiche Struktur/Style wie zuvor (dunkel → mittel → hell),
     jetzt in den Logo-Blautönen: Navy → Logo-Blau → Himmelblau. */
  --gradient-clean: linear-gradient(135deg, #1a3a6b 0%, #1870b0 55%, #3a9bd8 100%);
  --gradient-clean-soft: linear-gradient(135deg, #e8f2fb 0%, #d3e6f7 100%);
  --gradient-clean-dark: linear-gradient(135deg, #16264d 0%, #1a4a80 100%);
  /* Sonnen-Ertrag-Gradient — leuchtendes Logo-Gelb: tiefes Gold → Logo-Gelb → helles Gelb.
     Für Flächen/Badges und (mit dünner Kontur) große Gelb-Highlights. */
  --gradient-sun: linear-gradient(135deg, #e0a800 0%, #fccf00 55%, #ffe14d 100%);

  /* Trust-Anker — tiefes Logo-Navy statt Petrol */
  --trust:        #141d33;       /* tiefes Navy (aus Logo #283060 abgeleitet) */
  --trust-deep:   #0b1122;       /* near-black Navy */

  /* Feedback-Farben (für Form-Validierung etc.) */
  --danger:       #b04545;

  /* Typo — Manrope für alles, kein Serif mehr */
  --sans:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* --mono ist auf Manrope gemappt — Mikrotext bleibt damit modern statt technisch.
     Stellen, die wirklich Tabular-Numerals brauchen, können font-variant-numeric verwenden. */
  --mono:   var(--sans);
  /* Legacy fallback — wenn irgendwo noch --serif referenziert, sieht es gut aus */
  --serif:  var(--sans);

  /* Type-Scale — 13 / 14 / 15 / 16 / 18 / 22 / 30 / 40 / 52 / 72 */
  --t-xs:   .8125rem;   /* 13 */
  --t-sm:   .875rem;    /* 14 */
  --t-base: 1rem;       /* 16 */
  --t-md:   1.125rem;   /* 18 */
  --t-lg:   1.375rem;   /* 22 */

  /* Spacing — 4/8 dp rhythm */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --s-10: 9rem; --s-11: 12rem;

  /* Layout */
  --max: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Radien — modern, weich, aber nicht spielerisch */
  --r-sm:  8px;     /* Pills, Tags */
  --r-md:  12px;    /* Buttons */
  --r-lg:  16px;    /* Cards */
  --r-xl:  24px;    /* Large feature cards */
  --r-full: 999px;  /* nur noch für Avatars + Icon-Buttons */

  /* Schatten — gestaffelte Trust-Schatten */
  --shadow-sm: 0 1px 2px rgba(28,27,24,.05), 0 1px 1px rgba(28,27,24,.04);
  --shadow:    0 2px 6px -1px rgba(28,27,24,.06), 0 4px 12px -2px rgba(28,27,24,.06);
  --shadow-lg: 0 8px 24px -4px rgba(28,27,24,.08), 0 16px 48px -12px rgba(28,27,24,.10);
  --shadow-xl: 0 24px 60px -16px rgba(28,27,24,.16), 0 40px 100px -30px rgba(28,27,24,.18);

  /* Motion */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Heading-Defaults — Manrope mit klarer Hierarchie */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
}
h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
h4, h5, h6 { font-weight: 600; }

img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--clay); color: var(--paper); }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }

/* Skip link */
.skip-link {
  position: absolute; top: -100px; left: var(--s-4);
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; font-size: .9rem; z-index: 100;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: var(--s-3); }
section[id], :target { scroll-margin-top: 92px; }

/* ════════════ TOP-METER ════════════════════════════════════
   Vercel-/Linear-style dünner Progress-Streifen am Top         */
.top-meter {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 2px; background: transparent; pointer-events: none;
}
.top-meter__bar { height: 100%; width: 0%; background: var(--gradient-clean); transition: width .1s linear; }

/* ════════════ NAV ════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--s-5);
  padding: var(--s-3) var(--gutter);
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), padding .25s var(--ease), background .25s var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  padding-top: var(--s-2); padding-bottom: var(--s-2);
  background: rgba(255,255,255,.96);
}

.nav__brand { display: inline-flex; align-items: center; gap: var(--s-3); }
/* echtes AY-Icon (Monogramm · Sonne · Solarmodul) — Seitenverhältnis
   229:131 ≈ 1.75:1, deshalb feste Höhe + auto-Breite, kein Beschneiden */
.nav__brand-mark {
  display: inline-flex; align-items: center;
  height: 42px;
}
.nav__brand-mark img {
  height: 100%; width: auto;
  display: block;
  object-fit: contain;
}
.nav__brand-mark::after { display: none; }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1.2; gap: 2px; }
.nav__brand-name {
  font-family: var(--sans); font-weight: 700; font-size: var(--t-base);
  letter-spacing: -.015em; color: var(--ink);
}
.nav__brand-meta {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-mute);
  text-transform: none; letter-spacing: 0; font-weight: 500;
}

.nav__links {
  display: flex; align-items: center; gap: var(--s-5);
  justify-self: center;
}
.nav__links a {
  position: relative;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-soft);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__links a:not(.nav__cta)::before { display: none; }
.nav__links a:not(.nav__cta):hover { color: var(--ink); background: var(--paper-soft); }

.nav__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--trust); color: var(--paper) !important;
  padding: 10px 18px !important;
  font-size: var(--t-sm) !important; font-weight: 600;
  border-radius: var(--r-md);
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
  touch-action: manipulation;
  box-shadow: var(--shadow-sm);
}
.nav__cta:hover { background: var(--clay-deep); transform: translateY(-1px); box-shadow: var(--shadow); }
.nav__cta::after { display: none; }

.nav__menu { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 6px; }
.nav__menu span { height: 1.5px; background: var(--ink); border-radius: 1px; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav[hidden] { display: none !important; }
.mobile-nav {
  position: fixed; inset: 64px 0 0 0; z-index: 49;
  background: var(--paper); padding: var(--s-6) var(--gutter);
  display: flex; flex-direction: column; gap: var(--s-4);
  border-bottom: 1px solid var(--line);
  overflow-y: auto;
  animation: fade-in .35s var(--ease);
}
.mobile-nav a {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 400;
  color: var(--ink); padding: .35rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__cta { color: var(--clay-deep) !important; border-bottom: none !important; padding-top: var(--s-3) !important; font-style: italic; }
@keyframes fade-in { from { opacity: 0; transform: translateY(-6px);} to { opacity: 1; transform: translateY(0);} }

/* ════════════ BUTTONS — moderne weiche Rechtecke ═══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 14px 24px;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: -.005em;
  border-radius: var(--r-md);
  transition: transform .25s var(--ease-out), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(168,137,107,.18);
  position: relative;
  min-height: 48px;        /* a11y touch target */
}
.btn--primary {
  background: var(--gradient-clean);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: var(--paper);
  box-shadow: 0 4px 14px -2px rgba(24,112,176,.45), var(--shadow-sm);
  transition: transform .25s var(--ease-out), background-position .4s var(--ease),
              box-shadow .25s var(--ease);
}
.btn--primary:hover {
  background-position: 100% 0%;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(24,112,176,.55), var(--shadow);
}
.btn--ghost {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
  background: var(--paper-soft); border-color: var(--ink);
  transform: translateY(-1px);
}
.btn--block { display: flex; width: 100%; }
.btn__arrow {
  display: inline-block;
  transition: transform .35s var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ════════════ HERO ═══════════════════════════════════════════ */
.hero {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

/* Full-bleed Hintergrundbild — rechts positioniert, verläuft nach links
   immer blasser ins Weiß (analog Baugesellschaft-Hero).
   Nur ab Desktop (>1100px) — mobil bleibt das kompakte Foto-Karten-Layout. */
.hero__bg { display: none; }
@media (min-width: 1101px) {
  .hero__bg {
    display: block;
    position: absolute; inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  /* Slideshow-Stack — rechte Hälfte, leicht herausgezoomt.
     3 Motive überblenden alle 15 s (45 s Gesamtzyklus). */
  .hero__slides { position: absolute; inset: 0; }
  .hero__slide {
    position: absolute; inset: 0;
    background-repeat: no-repeat;
    background-position: 92% center;
    background-size: contain;
    opacity: 0;
    animation: heroSlide 45s linear infinite;
  }
  /* Jedes Motiv als avif mit webp-Fallback (image-set). */
  .hero__slide--1 {
    background-image: image-set(
      url('./assets/img/hero-reinigung.avif') type('image/avif'),
      url('./assets/img/hero-reinigung.webp') type('image/webp'));
    /* -3s: startet mitten in der Sichtbarkeitsphase → kein blanker Hero beim Load */
    animation-delay: -3s;
  }
  .hero__slide--2 {
    background-image: image-set(
      url('./assets/img/vorher-nachher.avif') type('image/avif'),
      url('./assets/img/vorher-nachher.webp') type('image/webp'));
    animation-delay: -18s;
  }
  .hero__slide--3 {
    background-image: image-set(
      url('./assets/img/tech-hubsteiger.avif') type('image/avif'),
      url('./assets/img/tech-hubsteiger.webp') type('image/webp'));
    animation-delay: -33s;
  }
  /* Ein Motiv ist pro 15-s-Fenster (33,3 % des 45-s-Zyklus) sichtbar,
     mit weichem ~2-s-Crossfade am Anfang/Ende des Fensters. */
  @keyframes heroSlide {
    0%    { opacity: 0; }
    4%    { opacity: 1; }
    29%   { opacity: 1; }
    33.3% { opacity: 0; }
    100%  { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__slide { animation: none; }
    .hero__slide--1 { opacity: 1; }
    .hero__slide--2,
    .hero__slide--3 { opacity: 0; }
  }
  /* Links→Rechts-Verlauf: links deckend Weiß, zur Mitte hin transparent,
     sodass rechts das Bild klar sichtbar bleibt und links die Textspalte
     einen ruhigen, lesbaren Hintergrund behält. */
  .hero__bg-fade {
    position: absolute; inset: 0;
    background: linear-gradient(
      90deg,
      var(--paper) 0%,
      var(--paper) 34%,
      color-mix(in srgb, var(--paper) 78%, transparent) 46%,
      color-mix(in srgb, var(--paper) 32%, transparent) 58%,
      transparent 74%
    );
  }
  /* Unten-Verlauf: Bild löst sich sauber in den Seitenhintergrund auf,
     statt hart an der Sektionskante abzuschneiden. */
  .hero__bg-fade-bottom {
    position: absolute; inset-inline: 0; bottom: 0; height: 42%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in srgb, var(--paper) 55%, transparent) 45%,
      var(--paper) 100%
    );
  }
  /* Dezenter Marken-Glow am rechten Rand als kleiner Farbanker */
  .hero__bg-glow {
    position: absolute; right: 0; top: 30%;
    width: 42%; height: 60%; opacity: .28;
    background: radial-gradient(
      ellipse at right,
      color-mix(in srgb, var(--clay) 22%, transparent),
      transparent 70%
    );
  }

  /* Meta-Zeile, Grid und Trust-Leiste über dem Hintergrundbild halten */
  .hero__meta,
  .hero__grid,
  .hero__trust,
  .hero .marquee { position: relative; z-index: 1; }

  /* Auf Desktop trägt der Hintergrund das Bild — die kompakte Foto-Karte
     in der rechten Spalte wird ausgeblendet, die Textspalte darf sich
     über die volle Breite legen. (höhere Spezifität, damit die Basis-
     Regel .hero__aside { display:flex } weiter unten nicht gewinnt) */
  .hero .hero__aside { display: none; }
  .hero .hero__grid { grid-template-columns: 1fr; }
  .hero .hero__copy { max-width: 60ch; }
}

/* Meta-Row über Hero — kompakte Trust-Chips statt gedehnter Dateline ── */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) 0;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: -.005em;
  color: var(--ink-mute);
}
/* jeder Chip trägt eine Hairline-Trennung nach links (außer der erste) */
.hero__meta-chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 0 var(--s-4);
  line-height: 1.15;
  white-space: nowrap;
  border-left: 1px solid var(--line);
}
.hero__meta-chip:first-child { padding-left: 0; border-left: 0; }
.hero__meta-chip strong { color: var(--ink); font-weight: 650; }

.hero__meta-ic {
  width: 1.05em; height: 1.05em;
  flex: none;
  color: var(--clay);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Rating-Chip: Sterne in Sonnen-Gelb, klare Zahl */
.hero__meta-stars {
  color: var(--sun-deep);
  letter-spacing: .04em;
  font-size: .9em;
}
.hero__meta-chip--rating strong { color: var(--ink); }

/* Live-Chip: pulsierender Punkt signalisiert Aktivität */
.hero__meta-dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: var(--r-full);
  background: #16a34a;
  box-shadow: 0 0 0 0 color-mix(in srgb, #16a34a 55%, transparent);
  animation: meta-pulse 2.4s ease-out infinite;
}
@keyframes meta-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, #16a34a 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, #16a34a 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, #16a34a 0%, transparent); }
}
.hero__meta-chip--live { color: var(--ink-mute); }
.hero__meta-chip--live #js-today { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .hero__meta-dot { animation: none; }
}

/* Hauptgrid — Text links, Querformat-Bild rechts, beide gleich hoch
   Owner-Card ist absolut am unteren Bildrand verankert, damit
   die rechte Spalte exakt auf gleicher Höhe wie die linke endet. */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-top: var(--s-7);
  align-items: stretch;
}
.hero__copy { display: flex; flex-direction: column; min-width: 0; justify-content: center; }
.hero__aside {
  min-width: 0; width: 100%;
  position: relative;
  display: flex; flex-direction: column;
}
.hero__photo { margin: 0; }

.hero__lefthead {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding: 6px 14px 6px 6px;
  background: var(--gradient-clean-soft);
  border: 1px solid #cbe0f2;
  border-radius: var(--r-full);
  box-shadow: 0 2px 8px -2px rgba(24,112,176,.15);
}
.hero__lefthead::before {
  content: ""; width: 8px; height: 8px;
  background: var(--gradient-clean); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(58,155,216,.2);
}
.hero__index {
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: -.005em;
  color: var(--clay-deep);
  text-transform: none;
}
.hero__lefthead-divider { display: none; }
.hero__lefthead-since {
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 500; color: var(--ink-mute);
  text-transform: none; letter-spacing: 0;
  padding-left: var(--s-3);
  border-left: 1px solid var(--clay);
}

.hero__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__title-row {
  display: block;
  overflow: hidden;
  /* Padding verhindert Clipping bei Ober-/Unterlängen wie g, j, p, ä, ö, ü */
  padding-top: .12em;
  padding-bottom: .14em;
  margin-top: -.12em;
  margin-bottom: -.14em;
}
.hero__title-row > span {
  display: inline-block;
  opacity: 0; transform: translateY(60%);
  animation: rise 1s var(--ease-out) forwards;
  padding-top: .02em;
  padding-bottom: .02em;
}
.hero__title-row:nth-child(1) > span { animation-delay: .1s; }
.hero__title-row:nth-child(2) > span { animation-delay: .25s; }
.hero__title em {
  font-style: normal;
  font-weight: 800;
  background: var(--gradient-clean);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
/* „Solar- & Photovoltaik-" im Standard-Gelb-Verlauf.
   Dünne dunkle Kontur sichert die Lesbarkeit der großen Wortgruppe auf Weiß. */
.hero__title-solar {
  color: var(--sun);
  background: var(--gradient-sun);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .5px rgba(120,86,0,.4);
  text-shadow: 0 1px 3px rgba(120,86,0,.18);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__title-solar { color: transparent; }
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

.hero__lead {
  max-width: 58ch;
  font-size: var(--t-md);
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 400;
  margin-top: var(--s-6);
  opacity: 0; animation: rise .9s var(--ease-out) .7s forwards;
}
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-6);
  opacity: 0; animation: rise .9s var(--ease-out) .85s forwards;
}

/* Hero-Aside (rechte Spalte) — jetzt mit Foto + Owner-Card
   align-self: start verhindert, dass die Spalte auf die volle
   Grid-Höhe gestreckt wird — sonst entsteht unter dem 3:2-Bild
   eine graue Fläche (hero__photo background). */
.hero__aside {
  align-self: start;
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-4);
  opacity: 0; animation: rise 1s var(--ease-out) .5s forwards;
}

.hero__photo {
  position: relative;
  margin: 0;
  background: var(--paper-deep);
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.hero__photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1.8s var(--ease-out);
}
.hero__photo:hover img { transform: scale(1.04); }
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
/* Badge unter dem Bild (nicht mehr auf dem Bild) */
.hero__photo-caption {
  margin: var(--s-3) 0 0;
  display: flex;
}
.hero__photo-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: -.005em; text-transform: none;
  padding: 8px 14px;
  background: var(--gradient-clean-soft);
  border: 1px solid #cbe0f2;
  border-radius: var(--r-full);
  color: #155e94;
  box-shadow: 0 2px 8px -2px rgba(24,112,176,.15);
}
.hero__photo-tag-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3a9bd8;
  box-shadow: 0 0 0 4px rgba(58,155,216,.3);
  animation: pulseDot 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: .65; }
}

/* Trust-Strip — 4 gleich breite Karten: Angebot · Festpreis · Ansprechpartner · Öffnungszeiten */
.hero__trust {
  margin-top: var(--s-7);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  opacity: 0; animation: rise .9s var(--ease-out) 1s forwards;
}

/* Ansprechpartner-Card — Name + klickbare Telefonnummer */
.hero__trust-item--contact { gap: var(--s-2); }
.hero__trust-contact-name {
  font-family: var(--sans); font-weight: 800;
  font-size: var(--t-md); letter-spacing: -.018em;
  color: var(--ink);
  line-height: 1.15;
  margin: 0;
}
/* zwei Nummern (Festnetz + Mobil) untereinander */
.hero__trust-contact-phones {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: var(--s-2);
}
.hero__trust-contact-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: -.005em;
  color: var(--clay-deep);
  padding: 8px 12px;
  background: var(--gradient-clean-soft);
  border: 1px solid #cbe0f2;
  border-radius: var(--r-md);
  width: fit-content;
  transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease-out);
}
.hero__trust-contact-phone:hover {
  background: var(--gradient-clean);
  color: #fff;
  transform: translateY(-1px);
  border-color: var(--clay);
}
.hero__trust-contact-phone:hover .hero__trust-contact-kind {
  background: rgba(255,255,255,.22); color: #fff;
}
.hero__trust-contact-phone svg { flex-shrink: 0; }
/* kleines Label: Festnetz / Mobil */
.hero__trust-contact-kind {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--clay-deep);
  background: #dcebf8;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: background .25s var(--ease), color .25s var(--ease);
}

/* Öffnungszeiten-Card — kompakte Stack-List */
.hero__trust-item--hours { gap: var(--s-2); }
.hero__trust-hours {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--sans); font-size: var(--t-sm);
  color: var(--ink-soft); font-weight: 500;
  margin-top: var(--s-2);
  line-height: 1.4;
}
.hero__trust-hours span {
  display: flex; align-items: baseline; gap: 8px;
}
.hero__trust-hours strong {
  font-family: var(--sans); font-weight: 700;
  color: var(--ink);
  min-width: 42px;
  display: inline-block;
}
.hero__trust-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-5);
  background: var(--paper-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.hero__trust-item:hover {
  background: var(--clay-tint);
  border-color: var(--clay-soft);
  transform: translateY(-2px);
}
.hero__trust-item::before { display: none; }
.hero__trust-num {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -.03em; line-height: 1;
  color: var(--ink);
}
.hero__trust-num sup { font-size: .5em; vertical-align: super; color: var(--clay-deep); margin-left: 2px; font-weight: 700; }
.hero__trust-num em { font-style: normal; color: var(--clay); }
/* Ertrags-Kennzahl trägt die Sonnen-Semantik (Ertrag = Sonne = Gewinn).
   Leuchtendes Logo-Gelb (wie 0€-Badge) + dünner dunkler Schatten für Lesbarkeit. */
.hero__trust-num--yield em,
.hero__trust-num--yield sup {
  color: var(--sun);
  background: linear-gradient(120deg, #e0a800 0%, #fccf00 50%, #ffdb33 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .4px rgba(120,86,0,.4);
  text-shadow: 0 1px 3px rgba(120,86,0,.22);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__trust-num--yield em,
  .hero__trust-num--yield sup { color: transparent; }
}

/* Ertrags-Kennzahl im Fließtext / in Titeln — leuchtendes Logo-Gelb (wie 0€-Badge).
   Trägt überall dieselbe Sonnen-/Ertrags-Semantik (2–7 %, 30 % mehr Ertrag …).
   Auf hellem Grund sichert ein dünner dunkler Textschatten die Lesbarkeit,
   damit das kräftige Gelb bleibt und nicht abgedunkelt werden muss. */
.yield-figure {
  font-weight: inherit;
  /* leichter Gelb-Verlauf (Logo-Gelb → helleres Gelb) als Text-Clip;
     dünne dunkle Kontur sichert die Lesbarkeit auf hellem Grund. */
  color: var(--sun);
  background: linear-gradient(120deg, #e0a800 0%, #fccf00 50%, #ffdb33 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .35px rgba(120,86,0,.4);
  text-shadow: 0 1px 2px rgba(120,86,0,.22);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .yield-figure { color: transparent; }
}
strong.yield-figure { font-weight: 700; }
.hero__trust-label {
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: -.005em;
  color: var(--clay-deep);
  text-transform: none;
  margin-bottom: var(--s-2);
}
.hero__trust-desc { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; margin-top: 4px; max-width: 28ch; }

/* Marquee — Sans, freundlich, mit Pill-Style ──────────── */
.marquee {
  margin-top: var(--s-8);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: inline-flex; gap: var(--s-5); white-space: nowrap;
  font-family: var(--sans); font-style: normal; font-weight: 600;
  font-size: var(--t-md);
  color: var(--ink);
  animation: marquee 55s linear infinite;
}
.marquee-track span:nth-child(4n+2),
.marquee-track span:nth-child(4n+4) { color: var(--clay-deep); }
.marquee-track .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay); align-self: center; opacity: .7;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ════════════ SECTION SHELLS ════════════════════════════════ */
.section {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(4rem, 9vw, 8rem) var(--gutter);
  position: relative;
}
.section--alt { background: var(--paper-deep); max-width: none; }
.section--alt > * { max-width: var(--max); margin-left: auto; margin-right: auto; }

.section__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: flex-end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.section__id {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--sans); font-size: var(--t-sm);
  font-weight: 600;
  color: var(--sun-ink-badge);
  text-transform: none; letter-spacing: -.005em;
  margin-bottom: var(--s-3);
  padding: 6px 12px;
  background: var(--sun-tint);
  border: 1px solid var(--sun-badge-border);
  border-radius: var(--r-full);
  width: fit-content;
  margin-left: var(--badge-pull);   /* Badge-Text linksbündig zum Titel */
}
.section__id::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sun);
}

/* Badge-Text im leuchtenden Logo-Gelb-Verlauf (matcht den Hero-Titel).
   Der Verlauf wird NUR auf diesen inneren Span geclippt — die Pillen-Fläche
   (--sun-tint) und der Punkt bleiben davon unberührt. Dünne Kontur = Lesbarkeit. */
.badge-label {
  background: linear-gradient(120deg, #d99e00 0%, #fccf00 50%, #ffd21a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .3px rgba(110,78,0,.55);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .badge-label { color: transparent; }
}
/* Auf dunklem Grund (Technik-, Kontakt-Bereich): helles Gelb im Verlauf,
   damit der Text hell genug bleibt (kein dunkler Gold-Ton auf Dunkel). */
.process .section__id .badge-label,
.contact__id .badge-label {
  background: linear-gradient(120deg, #fccf00 0%, #ffe14d 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 0;
}
.section__title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.85rem, 4.5vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.028em;
  color: inherit; text-wrap: balance;
  max-width: 16ch;
}
.section__title em { font-style: normal; color: var(--clay); font-weight: 800; }
.section__lede {
  font-size: var(--t-md); line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
  font-weight: 400;
}
.process .section__lede,
.contact__lede { color: rgba(255,255,255,.88); }
/* Section-ID Pills auf dunklem Grund — helles Gelb statt dunkles Tint */
.process .section__id,
.contact__id {
  background: rgba(252,207,0,.12);
  color: var(--sun-soft);
  border: 1px solid rgba(255,225,77,.32);
}
.process .section__id::before,
.contact__id::before { background: var(--sun-soft); }

/* ════════════ SERVICES — KOMPAKTES CARD-GRID ════════════════
   3×3 auf Desktop · 2×x auf Tablet · 1-spaltig auf Mobile.
   Einheitliches Card-Format: Bild oben, Titel + 1-Liner + Tags. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.svc-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color .25s var(--ease), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  isolation: isolate;
  overflow: hidden;
}
.svc-card:hover {
  border-color: var(--clay);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.svc-card__link {
  display: flex; flex-direction: column;
  height: 100%;
  color: inherit;
}
.svc-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-deep);
}
.svc-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(35%) contrast(1.02);
  transition: filter .6s var(--ease-out), transform 1.4s var(--ease-out);
}
.svc-card:hover .svc-card__media img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.05);
}
.svc-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(26,23,20,.25));
  opacity: 0; transition: opacity .35s var(--ease);
}
.svc-card:hover .svc-card__media::after { opacity: 1; }

/* Badge (z. B. "15 % Rabatt im 1. Jahr") */
.svc-card__badge {
  position: absolute; top: 12px; left: 12px;
  z-index: 2;
  background: var(--gradient-clean); color: #fff;
  font-family: var(--sans);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: -.005em;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(24,112,176,.55);
}

.svc-card__body {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
}
.svc-card__num {
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: -.005em;
  color: var(--clay-deep);
  text-transform: none;
}
.svc-card__title {
  font-family: var(--sans); font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.2; letter-spacing: -.02em;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.svc-card:hover .svc-card__title { color: var(--clay-deep); }
.svc-card__title em { font-style: normal; font-weight: 700; color: var(--clay); }

.svc-card__desc {
  font-size: var(--t-sm); line-height: 1.55;
  color: var(--ink-soft);
}

.svc-card__tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.svc-card__tags span {
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 500; letter-spacing: -.005em;
  color: var(--ink-mute);
  padding: 4px 10px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-transform: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.svc-card:hover .svc-card__tags span { background: var(--clay-tint); border-color: var(--clay-soft); color: var(--clay-deep); }

.svc-card__arrow {
  position: absolute; right: var(--s-4); top: var(--s-4);
  z-index: 2;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1rem; font-weight: 400;
  transform: translate(8px,-4px); opacity: 0;
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out),
              background .3s var(--ease), color .3s var(--ease);
}
.svc-card:hover .svc-card__arrow {
  transform: translate(0,0); opacity: 1;
  background: var(--clay); color: #fff;
}

/* Featured Card (Unterhaltsreinigung – №01) etwas hervorgehoben */
.svc-card--featured { border-color: var(--ink); }
.svc-card--featured .svc-card__media { aspect-ratio: 16 / 10; }

/* ════════════ PROCESS ═══════════════════════════════════════ */
.process {
  /* Räumliche Tiefe durch geschichtete Verläufe:
     1) Rand-Vignette (dunkler zu den Ecken → zieht Blick in die Mitte)
     2) vertikaler Grundverlauf: oben mit Blaustich heller, unten fast schwarz */
  background:
    radial-gradient(120% 80% at 50% 38%, transparent 55%, rgba(2,6,23,.55) 100%),
    linear-gradient(180deg, #16233f 0%, var(--trust) 42%, var(--trust-deep) 100%);
  color: var(--paper);
  max-width: none;
  position: relative;
  overflow: hidden;
}
.process::before {
  content: ""; position: absolute;
  top: -10%; left: -10%; width: 60%; height: 60%;
  background: radial-gradient(circle at center, rgba(24,112,176,.22), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.process::after {
  content: ""; position: absolute;
  bottom: -20%; right: -10%; width: 50%; height: 60%;
  background: radial-gradient(circle at center, rgba(58,155,216,.15), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.process .section { max-width: var(--max); position: relative; z-index: 1; }
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.process__step {
  padding: var(--s-7) var(--s-5) var(--s-6);
  border-right: 1px solid rgba(255,255,255,.14);
  position: relative;
  display: flex; flex-direction: column;
  transition: background .4s var(--ease);
}
.process__step:last-child { border-right: 0; }
.process__step:hover { background: rgba(255,255,255,.03); }

.process__num {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  font-family: var(--sans); font-weight: 700; font-style: normal;
  font-size: var(--t-md);
  line-height: 1; letter-spacing: -.02em;
  background: var(--gradient-clean);
  color: #fff;
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  box-shadow: 0 6px 16px -4px rgba(24,112,176,.55), 0 0 0 1px rgba(126,196,238,.2) inset;
}
.process__num::after { display: none; }
.process__step h3 {
  font-family: var(--sans); font-weight: 700; font-size: var(--t-lg);
  letter-spacing: -.018em; margin-bottom: var(--s-2);
  color: var(--paper);
}
.process__step p {
  font-size: var(--t-sm); line-height: 1.55;
  color: rgba(255,255,255,.7);
  margin-bottom: 0;
}

/* Bildband unter den Steps ─────────────────────────────── */
.process__band {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
}
.process__band img {
  width: 100%; height: clamp(220px, 32vw, 420px);
  object-fit: cover;
  filter: grayscale(45%) contrast(1.05);
  transition: filter 1.5s var(--ease-out), transform 8s var(--ease-out);
}
.process__band:hover img { filter: grayscale(0%); transform: scale(1.03); }
.process__band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,.55), rgba(13,13,13,.15) 50%, rgba(13,13,13,.65));
  pointer-events: none;
}
.process__band figcaption {
  position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5);
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5);
  color: var(--paper); z-index: 2;
  font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .14em;
}
.process__band figcaption span:first-child { color: var(--clay-soft); }
.process__band figcaption span:last-child {
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  letter-spacing: -.005em; text-transform: none; color: var(--paper);
  max-width: 50%; text-align: right;
}

/* ════════════ TECHNIK-KARTEN (dunkle Sektion, mit Gerätefoto) ═══
   Ersetzt die reinen Text-Steps: jede Karte zeigt das echte Gerät
   im Einsatz + Nummer-Badge. 3 Spalten Desktop, wrap darunter. */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.tech-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease), background .3s var(--ease);
}
.tech-card:hover {
  transform: translateY(-4px);
  border-color: rgba(126,196,238,.35);
  background: rgba(24,112,176,.10);
}
.tech-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--trust-deep); }
.tech-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.tech-card:hover .tech-card__media img { transform: scale(1.05); }
.tech-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5,16,15,.6) 100%);
  pointer-events: none;
}
.tech-card__num {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1;
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  font-family: var(--sans); font-weight: 700; font-size: var(--t-base);
  line-height: 1; letter-spacing: -.02em;
  background: var(--gradient-clean); color: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 6px 16px -4px rgba(24,112,176,.55), 0 0 0 1px rgba(126,196,238,.2) inset;
}
.tech-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.tech-card__body h3 {
  font-family: var(--sans); font-weight: 700; font-size: var(--t-lg);
  letter-spacing: -.018em; color: var(--paper);
}
.tech-card__body p { font-size: var(--t-sm); line-height: 1.55; color: rgba(255,255,255,.72); margin: 0; }

/* ════════════ ABOUT ══════════════════════════════════════════ */
.about__grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.2fr) 1.5fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: flex-start;
}

/* Linke Spalte: Foto + Logo + Stempel ─────────────────── */
.about__mark {
  position: relative;
  display: grid;
  gap: var(--s-4);
}
.about__photo {
  position: relative; margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.about__photo img:first-child {
  display: block; width: 100%; height: auto;
  aspect-ratio: 9 / 8;
  object-fit: cover;
  object-position: center bottom;
  filter: grayscale(15%) contrast(1.02);
  transition: transform 2s var(--ease-out);
}
.about__photo:hover img:first-child { transform: scale(1.05); }
.about__photo figcaption {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 600; text-transform: none; letter-spacing: -.005em;
  color: var(--paper);
  background: rgba(28,27,24,.85);
  padding: 8px 14px;
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Logo-Frame — gefüllter Cyan-Gradient mit subtilem Dot-Pattern, Logo füllt den Raum aus */
.about__logo-card {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid rgba(207,250,254,.8);
  box-shadow: 0 4px 16px rgba(15,23,42,.15);
  padding: 6px;
}

.about__stamp {
  position: absolute; bottom: -32px; right: -32px;
  width: 128px; height: 128px;
  background: var(--ink); color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-family: var(--mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .14em;
  line-height: 1.6;
  transform: rotate(-12deg);
  box-shadow: 0 22px 50px -16px rgba(0,0,0,.35);
}
.about__stamp strong {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 2.1rem; letter-spacing: -.02em; text-transform: none;
  color: var(--clay-soft);   /* „Chemie" wieder Logo-Blau (wie ursprünglich) */
}
/* „OHNE" ist die Kern-Info → etwas größer & kräftiger als „Bayreuth". */
.about__stamp span:first-child {
  font-size: .8rem; font-weight: 700; letter-spacing: .16em;
  color: var(--paper);
}

.about__copy { display: flex; flex-direction: column; gap: var(--s-5); }
.about__id {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--sans); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: -.005em;
  color: var(--sun-ink-badge);
  text-transform: none;
  padding: 6px 12px;
  background: var(--sun-tint);
  border: 1px solid var(--sun-badge-border);
  border-radius: var(--r-full);
  width: fit-content;
  margin-left: var(--badge-pull);   /* Badge-Text linksbündig zum Titel */
}
.about__id::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sun);
}
.about__title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.85rem, 4.5vw, 3.2rem);
  line-height: 1.1; letter-spacing: -.028em;
  text-wrap: balance; max-width: 18ch;
}
.about__title em { font-style: normal; font-weight: 800; color: var(--clay); }
.about__lead {
  font-family: var(--sans); font-weight: 500; font-style: normal;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--ink);
  max-width: 36ch;
  padding-left: var(--s-5);
  border-left: 3px solid var(--clay);
}
.about__lead em { font-style: normal; font-weight: 700; color: var(--clay-deep); }
.about__copy p { color: var(--ink-soft); line-height: 1.65; font-size: var(--t-base); }

.about__signature {
  display: flex; align-items: center; gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  margin-top: var(--s-3);
}
.about__signature-name {
  font-family: var(--sans); font-style: normal; font-weight: 700;
  font-size: var(--t-md); color: var(--ink);
  letter-spacing: -.01em;
}
.about__signature-role {
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 500; text-transform: none; letter-spacing: -.005em;
  color: var(--ink-mute);
}

.about__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.about__stats > div {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--s-4);
  background: var(--paper-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.about__stats dt {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--ink); letter-spacing: -.028em; line-height: 1;
}
.about__stats dt em {
  font-style: normal;
  /* Ertragszahl in leuchtendem Gelb-Verlauf (wie übrige Ertrags-Highlights) */
  color: var(--sun);
  background: linear-gradient(120deg, #e0a800 0%, #fccf00 50%, #ffdb33 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .35px rgba(120,86,0,.4);
  text-shadow: 0 1px 2px rgba(120,86,0,.22);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .about__stats dt em { color: transparent; }
}
.about__stats dd {
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 500; text-transform: none; letter-spacing: -.005em;
  color: var(--ink-mute);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}

/* ════════════ ZERTIFIKATE — Nachweis-Karten + Dokument ══════ */
.certs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.cert-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.cert-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 18px 40px -24px rgba(17,26,46,.35);
  transform: translateY(-2px);
}

.cert-card__body { display: flex; flex-direction: column; min-width: 0; }

.cert-card__head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}
.cert-card__issuer {
  font-family: var(--sans); font-weight: 700;
  font-size: var(--t-sm); letter-spacing: -.01em;
  color: var(--clay-deep);
}
.cert-card__issuer--wp { color: var(--sun-deep); }
.cert-card__issuer--thermo { color: #c2410c; }  /* thermografie: warmes Infrarot-Orange */

/* Einzel-Zertifikat (Thermografie-Seite): Karte mittig, angenehm begrenzt */
.certs--single { margin: clamp(1.5rem, 4vw, 2.5rem) 0; }
.certs--single .cert-card { max-width: 680px; }

.cert-card__badge {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .01em;
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--paper-deep);
  color: var(--ink-soft);
  white-space: nowrap;
}
.cert-card__badge--valid {
  background: color-mix(in srgb, #16a34a 12%, #fff);
  color: #15803d;
}

.cert-card__title {
  font-family: var(--sans); font-weight: 750;
  font-size: var(--t-lg); line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--ink);
  hyphens: auto;
  margin-bottom: var(--s-3);
}
.cert-card__desc {
  font-size: var(--t-sm); line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}
.cert-card__desc strong { color: var(--ink); font-weight: 650; }

/* Fakten-Tabelle (Zertifikat 1) */
.cert-card__meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
  margin-top: auto;
}
.cert-card__meta dt {
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.cert-card__meta dd {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Themen-Liste (Zertifikat 2) */
.cert-card__topics {
  list-style: none; margin: auto 0 0;
  display: grid; gap: 7px;
}
.cert-card__topics li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--t-sm); line-height: 1.35;
  color: var(--ink-soft);
}
.cert-card__topics li::before {
  content: "";
  position: absolute; left: 0; top: .28em;
  width: 13px; height: 13px;
  background: var(--sun-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Dokument-Vorschau — anklickbar. contain statt cover, damit ein echter
   Zertifikat-Scan (A4-Hochformat) IMMER vollständig sichtbar bleibt und
   nichts Wichtiges abgeschnitten wird — unabhängig vom Seitenverhältnis. */
.cert-card__doc {
  position: relative;
  display: block;
  width: clamp(150px, 19vw, 210px);
  align-self: stretch;
  min-height: 240px;
  padding: 0;
  cursor: pointer;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, #fff 0%, var(--paper-soft) 100%);
  box-shadow: 0 8px 20px -14px rgba(17,26,46,.4);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.cert-card__doc:hover { border-color: var(--line-strong); box-shadow: 0 14px 30px -16px rgba(17,26,46,.5); }
/* contain: das komplette Zertifikat bleibt sichtbar — nichts wird beschnitten */
.cert-card__doc img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  display: block;
  padding: 10px;
  transition: transform .35s ease;
}
.cert-card__doc:hover img { transform: scale(1.03); }

.cert-card__zoom {
  position: absolute; inset: auto 8px 8px 8px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  backdrop-filter: blur(4px);
}
.cert-card__zoom svg { width: 14px; height: 14px; }
.cert-card__doc:hover .cert-card__zoom,
.cert-card__doc:focus-visible .cert-card__zoom { opacity: 1; transform: translateY(0); }

/* Fußnote unter den Karten */
.certs__note {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: var(--s-4) var(--s-5);
  background: var(--clay-tint);
  border-radius: var(--r-md);
  font-size: var(--t-sm); line-height: 1.5;
  color: var(--ink-soft);
}
.certs__note svg { width: 22px; height: 22px; flex: none; color: var(--clay-deep); }
.certs__note strong { color: var(--ink); font-weight: 650; }

@media (max-width: 860px) {
  .certs__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cert-card { grid-template-columns: 1fr; }
  .cert-card__doc {
    width: 100%;
    min-height: 0;
    aspect-ratio: 556 / 791;   /* echtes Hochformat der Zertifikat-Scans */
    max-width: 320px;          /* nicht unnötig breit auf großen Phones */
    margin-inline: auto;
    align-self: auto;
  }
  .cert-card__doc img { object-position: center; }
  .cert-card__zoom { opacity: 1; transform: none; }  /* auf Touch immer sichtbar */
}

/* ════════════ ZERTIFIKAT-MODAL (Lightbox) ══════════════════ */
.cert-modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease;
}
.cert-modal.is-open { opacity: 1; }
.cert-modal[hidden] { display: none; }

.cert-modal__stage {
  position: relative;
  max-width: min(720px, 92vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  gap: var(--s-3);
  transform: scale(.97) translateY(6px);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.cert-modal.is-open .cert-modal__stage { transform: none; }

.cert-modal__img {
  max-width: 100%;
  max-height: calc(90vh - 3rem);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.cert-modal__caption {
  color: rgba(255,255,255,.9);
  font-size: var(--t-sm); line-height: 1.4;
  text-align: center; text-wrap: balance;
  max-width: 60ch; margin: 0 auto;
}

.cert-modal__close {
  position: absolute; top: clamp(.75rem, 3vw, 1.5rem); right: clamp(.75rem, 3vw, 1.5rem);
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: none; cursor: pointer;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.14);
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.cert-modal__close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .cert-modal, .cert-modal__stage { transition: none; }
  .cert-modal__close:hover { transform: none; }
}

/* ════════════ OBJECTS — Card-Grid mit Gap ═══════════════════ */
.objects__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
/* Object-Cards — echtes <img> als Hintergrund (SEO: alt-Text), Cyan-Titel, weiße Schrift */
.object {
  border-radius: var(--r-lg);
  position: relative;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
  background: var(--trust);
  box-shadow: var(--shadow-sm);
  color: #fff;
  display: flex;
}
.object:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Hintergrund-Bild als echtes <img> — indexierbar, mit alt */
.object__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
  transition: transform 1.4s var(--ease-out), filter 1s var(--ease-out);
  filter: grayscale(25%) brightness(.78);
}
.object:hover .object__bg {
  transform: scale(1.06);
  filter: grayscale(0%) brightness(.85);
}

/* Dunkles Overlay für Lesbarkeit */
.object::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.85) 100%),
    linear-gradient(135deg, rgba(24,112,176,.18) 0%, transparent 60%);
  transition: opacity .35s var(--ease);
}

.object__inner {
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  width: 100%;
}
.object__title {
  font-family: var(--sans); font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: -.02em; line-height: 1.2;
  color: var(--clay-soft);
  text-shadow: 0 2px 8px rgba(15,23,42,.4);
}
.object__desc {
  font-size: var(--t-sm); line-height: 1.55;
  color: rgba(255,255,255,.92);
  margin-top: var(--s-2);
  text-shadow: 0 1px 4px rgba(15,23,42,.5);
}
.object__cta {
  margin-top: auto; padding-top: var(--s-3);
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--t-sm);
  color: #fff;
  text-shadow: 0 1px 4px rgba(15,23,42,.5);
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.object__cta span { transition: transform .25s var(--ease); }
.object:hover .object__cta { color: var(--clay-soft); gap: var(--s-3); }
.object:hover .object__cta span { transform: translateX(2px); }

/* Ertrags-Karte: dezenter Solar-Akzent statt Blau — die eine positive
   „Gewinn"-Karte trägt die Sonnen-Semantik (Verlust/Schutz bleiben blau). */
#ertrag.object::after {
  background:
    linear-gradient(180deg, rgba(15,23,42,.35) 0%, rgba(15,23,42,.85) 100%),
    linear-gradient(135deg, rgba(252,207,0,.24) 0%, transparent 60%);
}
/* Titel im leuchtenden Gelb-Verlauf (wie die übrigen Ertrags-Highlights).
   Auf dunklem Bild-Grund ohne Kontur — Kontrast reicht. */
#ertrag .object__title {
  color: var(--sun-soft);
  background: var(--gradient-sun);
  -webkit-background-clip: text; background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  #ertrag .object__title { color: transparent; }
}
#ertrag:hover .object__cta { color: var(--sun-soft); }

/* ════════════ PULL QUOTE — Vollbreite mit Hintergrundfoto ═══ */
.pull-wrap {
  position: relative;
  isolation: isolate;
  color: var(--paper);
  overflow: hidden;
  background: var(--ink);
}
.pull-wrap__bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(80%) brightness(.55) contrast(1.05);
  transform: scale(1.03);
  animation: kenburns 28s linear infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.03) translate(0,0); }
  to   { transform: scale(1.08) translate(-1.5%, -1%); }
}
.pull-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(15,23,42,.78) 0%, rgba(15,23,42,.5) 50%, rgba(24,112,176,.35) 100%);
}
/* Inhalt: einspaltig zentriert, saubere optische Achse */
.pull-wrap__inner {
  max-width: 880px; margin: 0 auto;
  padding: clamp(4.5rem, 11vw, 9rem) var(--gutter);
  position: relative;
  text-align: center;
}

/* Anführungszeichen als dekoratives Hintergrund-Ornament hinter der Headline */
.pull-wrap__mark {
  position: absolute;
  top: clamp(2rem, 6vw, 4rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans); font-style: normal; font-weight: 800;
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: .7;
  color: var(--clay);
  opacity: .12;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.pull-wrap__eyebrow {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: -.005em; text-transform: none;
  color: #fff;
  margin-bottom: var(--s-5);
  padding: 6px 14px;
  background: rgba(168,137,107,.25);
  border: 1px solid rgba(197,169,134,.4);
  border-radius: var(--r-full);
}
.pull-wrap__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--clay-soft);
}

.pull-wrap__body {
  position: relative; z-index: 1;
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3; letter-spacing: -.025em;
  text-wrap: balance;
  max-width: 26ch;
  margin: 0 auto;
  color: #fff;
}
.pull-wrap__body em {
  font-style: normal; color: var(--clay-soft); font-weight: 700;
  white-space: nowrap;
}

.pull-wrap__cite {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
}
.pull-wrap__cite::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 2px; border-radius: 1px;
  background: var(--clay-soft);
}
.pull-wrap__sign {
  font-family: var(--sans); font-style: normal; font-weight: 700;
  font-size: var(--t-md); letter-spacing: -.01em;
  color: var(--paper);
}
.pull-wrap__role {
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 500; text-transform: none; letter-spacing: -.005em;
  color: rgba(255,255,255,.6);
}

/* Trust-Linie: 3 Garantien — als Tag-Grid */
.pull-wrap__trust {
  position: relative; z-index: 1;
  display: inline-flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pull-wrap__trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 500; letter-spacing: -.005em; text-transform: none;
  color: rgba(255,255,255,.9);
  padding: 8px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pull-wrap__trust li span {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  background: var(--clay); color: #fff;
  border-radius: 50%;
  font-size: .65rem; line-height: 1;
  font-weight: 700;
}

/* Sekundäre CTA — invertiert, fügt sich in die Trust-Zone ein */
.pull-wrap__cta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-6);
  padding: 14px 24px;
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-md);
  font-family: var(--sans); font-weight: 600; font-size: var(--t-sm);
  letter-spacing: -.005em;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease-out), box-shadow .25s var(--ease);
  touch-action: manipulation;
  box-shadow: var(--shadow);
  min-height: 48px;
}
.pull-wrap__cta:hover {
  background: var(--clay); color: var(--paper);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.pull-wrap__cta span {
  transition: transform .35s var(--ease-out);
  display: inline-block;
}
.pull-wrap__cta:hover span { transform: translateX(4px); }

/* ════════════ FAQ ════════════════════════════════════════════ */
.faq__layout {
  display: grid; grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: flex-start;
}
.faq__head .section__title { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.faq__list {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.faq details {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.faq details[open] { background: var(--paper); border-color: var(--clay-soft); }
.faq details > summary { display: flex; }
.faq summary::marker { content: ""; font-size: 0; color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }
details > summary::marker { content: ""; }
details > summary::-webkit-details-marker { display: none; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  -webkit-appearance: none; appearance: none;
  gap: var(--s-4);
  font-family: var(--sans); font-weight: 600;
  font-size: var(--t-md);
  color: var(--ink); letter-spacing: -.018em;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--clay-deep); }
.faq__plus {
  flex-shrink: 0; width: 32px; height: 32px;
  background: var(--clay-tint); border-radius: 50%;
  position: relative;
  transition: background .25s var(--ease);
}
.faq__plus::before, .faq__plus::after {
  content: ""; position: absolute; background: var(--clay-deep);
  top: 50%; left: 50%; border-radius: 1px;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.faq__plus::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq__plus::after  { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq details[open] summary { color: var(--clay-deep); }
.faq details[open] .faq__plus { background: var(--clay); }
.faq details[open] .faq__plus::before, .faq details[open] .faq__plus::after { background: #fff; }
.faq details[open] .faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details p {
  padding-top: var(--s-3);
  font-size: var(--t-sm); line-height: 1.65;
  color: var(--ink-soft); max-width: 60ch;
}

/* ════════════ CONTACT ═══════════════════════════════════════ */
.contact {
  /* Räumliche Tiefe – gleiches Rezept wie die Prozess-Sektion:
     Rand-Vignette + vertikaler Grundverlauf (oben blaustichig heller,
     unten fast schwarz). */
  background:
    radial-gradient(120% 80% at 50% 38%, transparent 55%, rgba(2,6,23,.55) 100%),
    linear-gradient(180deg, #16233f 0%, var(--trust) 42%, var(--trust-deep) 100%);
  color: var(--paper);
  max-width: none;
  position: relative; overflow: hidden;
}
.contact::before {
  content: ""; position: absolute;
  top: -30%; right: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(circle at center, rgba(24,112,176,.22), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.contact::after {
  content: ""; position: absolute;
  bottom: -25%; left: -12%;
  width: 620px; height: 620px;
  background: radial-gradient(circle at center, rgba(58,155,216,.15), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.contact__inner {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(4rem, 9vw, 8rem) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  position: relative; z-index: 1;
}

/* Contact-Eyebrow: gleiche Pill-Form wie alle anderen Section-IDs */
.contact__id {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--sans); font-size: var(--t-sm);
  font-weight: 600; letter-spacing: -.005em; text-transform: none;
  margin-bottom: var(--s-4);
  padding: 6px 14px;
  background: rgba(252,207,0,.12);
  color: var(--sun-soft);
  border: 1px solid rgba(255,225,77,.32);
  border-radius: var(--r-full);
  width: fit-content;
  /* Badge-Text linksbündig zum Titel (Padding 14 + Punkt 6 + Gap 8 = 28px) */
  margin-left: max(-28px, calc(var(--gutter) * -1 + .25rem));
}
.contact__id::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sun-soft);
}
.contact__title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.08; letter-spacing: -.028em;
  /* explizit hell: die globale h2-Regel setzt sonst --ink (dunkel) →
     "Ein Anruf." / "Ein Festpreis." wären auf dem dunklen Grund unlesbar */
  color: var(--paper);
  margin-bottom: var(--s-5);
}
.contact__title em { font-style: normal; font-weight: 800; color: var(--clay-soft); }
.contact__lede {
  font-size: var(--t-md); line-height: 1.65;
  color: rgba(255,255,255,.88);
  max-width: 42ch;
}

/* Channels — als rounded Cards mit dezenter Innenfläche, kein Hairline mehr */
.contact__channels {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  border: 0;
}
.contact__channels li {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: var(--s-4) var(--s-5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  align-items: flex-start;
}
.contact__channels li:hover {
  background: rgba(24,112,176,.12);
  border-color: rgba(126,196,238,.3);
  transform: translateY(-2px);
}
.contact__channels li > span:first-child {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: -.005em; text-transform: none;
  color: var(--clay-soft);
}
.contact__channels li > span:first-child::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay-soft);
  box-shadow: 0 0 0 3px rgba(126,196,238,.2);
}
.contact__channels a, .contact__channels li p {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--t-md);
  color: var(--paper); letter-spacing: -.01em;
  transition: color .25s var(--ease);
  line-height: 1.35;
}
.contact__channels a:hover { color: var(--clay-soft); }

/* Sprechzeiten: jeder Zeit-Block bleibt als Einheit zusammen (nowrap).
   Der Umbruch erfolgt dann NUR zwischen den Blöcken — nie mitten in
   "Fr 08:00–13:30". Bei breiter Karte nebeneinander, bei schmaler
   sauber untereinander, ohne verirrten Trenner. */
.contact__hours {
  display: flex; flex-wrap: wrap;
  column-gap: var(--s-3); row-gap: 2px;
}
.contact__hours > span { white-space: nowrap; }

/* Formular ────────────────────────────────────────────── */
.contact__form {
  background: var(--paper); color: var(--ink);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; gap: var(--s-4);
  box-shadow: var(--shadow-xl);
  border-radius: var(--r-xl);
  position: relative;
}
.contact__form::before {
  content: "01 / Anfrage"; position: absolute;
  top: clamp(2rem, 4vw, 3rem); right: clamp(2rem, 4vw, 3rem);
  font-family: var(--mono); font-size: .65rem;
  color: var(--clay); letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.55rem;
}
.contact__form-title {
  font-family: var(--serif); font-weight: 700; font-size: 1.55rem;
  letter-spacing: -.018em;
  /* Platz rechts, damit der lange Titel nicht unter den "01 / Anfrage"-Marker läuft */
  padding-right: 6rem; padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
}
.contact__form label { display: flex; flex-direction: column; gap: var(--s-2); }
.contact__form label > span {
  font-family: var(--mono); font-size: .65rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-mute);
}
.contact__form input, .contact__form select, .contact__form textarea {
  font: inherit; font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  border-radius: var(--r-md);
  min-height: 48px;
}
.contact__form input:focus-visible,
.contact__form select:focus-visible,
.contact__form textarea:focus-visible {
  border-color: var(--clay); background: var(--paper-soft);
  outline: 2px solid var(--clay); outline-offset: 2px;
}
.contact__form textarea { resize: vertical; min-height: 110px; }
.contact__form select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%230d0d0d' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ── Modernes, anpassbares <select> (Chrome/Edge 2024+) ──────────────────
   Progressive Enhancement: In unterstützenden Browsern wird das aufgeklappte
   Menü selbst gerendert → abgerundete Ecken + Ice-Blau-Auswahl.
   In Safari/Firefox greift dieser Block nicht; dort bleibt das native Menü. */
@supports (appearance: base-select) {
  .contact__form select,
  .contact__form select::picker(select) {
    appearance: base-select;
  }
  /* Trigger: eigenen Pfeil aus dem Fallback ausblenden (base-select liefert eigenen) */
  .contact__form select {
    background-image: none;
    padding-right: 2.5rem;
    align-items: center;
  }
  .contact__form select::picker-icon {
    color: var(--ink-mute);
    transition: transform .2s var(--ease);
  }
  .contact__form select:open::picker-icon { transform: rotate(180deg); }

  /* Aufgeklapptes Menü — abgerundet, weicher Schatten */
  .contact__form select::picker(select) {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    margin-top: 6px;
    overflow: hidden;
  }
  /* Einzelne Optionen */
  .contact__form select option {
    font: inherit; font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
    color: var(--ink);
    padding: 10px 12px;
    border-radius: var(--r-sm);
    display: flex; align-items: center;
    transition: background .12s var(--ease), color .12s var(--ease);
  }
  /* Häkchen der aktiven Option in Ice-Blau statt Standard */
  .contact__form select option::checkmark {
    color: var(--clay);
    order: 1; margin-left: auto;
  }
  /* Hover / Tastatur-Fokus → Ice-Blau-Highlight statt System-Blau */
  .contact__form select option:hover,
  .contact__form select option:focus,
  .contact__form select option:checked {
    background: var(--clay-tint);
    color: var(--clay-deep);
  }
  .contact__form select option:hover,
  .contact__form select option:focus {
    background: var(--clay);
    color: var(--paper);
  }
  .contact__form select option:hover::checkmark,
  .contact__form select option:focus::checkmark {
    color: var(--paper);
  }
}
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.contact__form button[type="submit"] {
  margin-top: var(--s-2);
  border-radius: var(--r-md);
  background: var(--trust); color: var(--paper);
}
.contact__form button[type="submit"]:hover { background: var(--clay-deep); }
.contact__note {
  font-size: .75rem; color: var(--ink-mute);
  text-align: center; margin-top: var(--s-1);
}
.contact__note a { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ════════════ FOOTER ═════════════════════════════════════════ */
.footer {
  /* Schwarz mit etwas Tiefe: reines Schwarz, aber nicht flach –
     oben ein Hauch aufgehellt, zu den Rändern/unten in tiefes Schwarz
     (dezente Vignette). Keine Farbe, nur Schwarzabstufungen. */
  background:
    radial-gradient(120% 100% at 50% 0%, #141414 0%, #0a0a0a 45%, #050505 100%),
    #050505;
  color: rgba(255,255,255,.55);
  padding: var(--s-8) 0 var(--s-5);
  position: relative; overflow: hidden;
}
.footer::before {
  content: ""; position: absolute;
  inset: 0;
  background: radial-gradient(130% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.7) 100%);
  pointer-events: none; z-index: 0;
}
.footer__top {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.2fr 2fr;
  gap: var(--s-8); align-items: flex-start;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__brand { display: flex; gap: var(--s-4); align-items: center; }
/* echtes AY-Icon auf heller Platte, damit das Marken-Blau erhalten bleibt
   (kein invert(1) — das würde die Firmenfarben verfälschen) */
.footer__brand img {
  height: 44px; width: auto; object-fit: contain;
  background: #fff;
  padding: 7px 10px;
  border-radius: var(--r-md);
}
.footer__name {
  font-family: var(--sans); font-weight: 700; font-size: var(--t-md); color: var(--paper);
  letter-spacing: -.018em;
}
.footer__tag {
  font-family: var(--sans); font-style: normal; font-weight: 400;
  font-size: var(--t-sm); color: rgba(255,255,255,.5);
  margin-top: 4px;
}

.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.footer__cols h4 {
  font-family: var(--sans); font-size: var(--t-xs);
  text-transform: none; letter-spacing: -.005em;
  color: var(--clay-soft); margin-bottom: var(--s-3);
  font-weight: 700;
}
.footer__cols div { display: flex; flex-direction: column; gap: var(--s-2); }
.footer__cols a, .footer__cols p {
  font-size: .88rem; color: rgba(255,255,255,.55);
  transition: color .25s var(--ease);
  line-height: 1.5;
}
.footer__cols a:hover { color: var(--paper); }

.footer__bottom {
  position: relative; z-index: 1;
  max-width: var(--max); margin: var(--s-5) auto 0;
  padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-5);
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.35);
}

/* ════════════ FLOATING SIDE INDEX ═══════════════════════════
   rechts schwebende Sektion-Anchors (Editorial-Pagination)    */
.side-index { display: none; }
.side-index a {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: .65rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  transition: color .25s var(--ease);
}
.side-index a::before {
  content: ""; width: 14px; height: 1px;
  background: currentColor;
  transition: width .3s var(--ease), background .3s var(--ease);
}
.side-index a:hover, .side-index a.is-active { color: var(--clay); }
.side-index a.is-active::before { width: 28px; }
.side-index a span { opacity: 0; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.side-index a:hover span, .side-index a.is-active span { opacity: 1; transform: translateX(0); }

/* ════════════ FAB (call) ═════════════════════════════════════ */
/* ════════════ PROMO — 15 % Aktion ══════════════════════════ */
.promo {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  margin-top: clamp(-1rem, -1vw, 0rem);
}
.promo__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  background: var(--gradient-clean-dark);
  color: var(--paper);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.promo__inner::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 100% 0%, rgba(126,196,238,.22), transparent 55%);
  pointer-events: none;
}
.promo__badge {
  display: grid; place-items: center; text-align: center;
  width: clamp(96px, 12vw, 128px); height: clamp(96px, 12vw, 128px);
  border-radius: 50%;
  /* Gratis-Wert = Gewinn-Moment → dezenter Solar-Schimmer statt neutralem Weiß */
  background: rgba(252,207,0,.12);
  border: 1px solid rgba(255,225,77,.5);
  position: relative; z-index: 1;
}
.promo__badge-num {
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; line-height: 1;
  letter-spacing: -.03em;
  background: var(--gradient-sun);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.promo__badge-label { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); margin-top: 4px; max-width: 12ch; }
.promo__body { position: relative; z-index: 1; }
.promo__eyebrow { font-size: var(--t-sm); font-weight: 600; color: var(--clay-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s-2); }
.promo__title { font-size: clamp(1.5rem, 2.9vw, 2.1rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: #fff; max-width: 24ch; }
.promo__text { font-size: var(--t-base); line-height: 1.6; color: rgba(255,255,255,.85); margin-top: var(--s-3); max-width: 52ch; }
.promo__points { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.promo__points li { font-size: var(--t-sm); color: rgba(255,255,255,.9); display: flex; align-items: center; gap: 6px; }
.promo__points li::before { content: "✓"; color: var(--clay-soft); font-weight: 700; }
.promo__cta-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); text-align: center; }
.promo__cta-wrap .btn--primary { background: #fff; color: var(--trust-deep); white-space: nowrap; }
.promo__cta-wrap .btn--primary:hover { background: var(--clay-tint); }
.promo__call { font-size: var(--t-sm); color: rgba(255,255,255,.8); }
.promo__call:hover { color: #fff; text-decoration: underline; }

/* ════════════ REVIEWS — Social Proof ═══════════════════════ */
.reviews__score { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; }
.reviews__stars, .review-card__stars { color: #f5a623; letter-spacing: 2px; font-size: 1.1rem; }
.reviews__score-text { font-size: var(--t-sm); color: var(--ink-soft); }
.reviews__score-text strong { color: var(--ink); font-weight: 700; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.review-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.review-card blockquote { font-size: var(--t-base); color: var(--ink-soft); line-height: 1.55; flex: 1; }
.review-card__who { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; }
.review-card__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--gradient-clean); color: #fff; font-weight: 700; font-size: .8rem;
}
.review-card__who span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.review-card__who strong { font-weight: 700; font-size: var(--t-sm); }
.review-card__who em { font-style: normal; font-size: var(--t-xs); color: var(--ink-mute); }

/* ════════════ CONTACT — Primär-CTAs (Anruf + WhatsApp) ═════ */
.contact__primary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-6); margin-bottom: var(--s-5); }
.contact__primary-btn {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  color: #fff;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.contact__primary-btn svg { flex-shrink: 0; }
.contact__primary-btn span { display: flex; flex-direction: column; line-height: 1.25; }
.contact__primary-btn strong { font-weight: 700; font-size: var(--t-base); }
.contact__primary-btn em { font-style: normal; font-size: var(--t-xs); opacity: .85; }
.contact__primary-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); filter: brightness(1.05); }
.contact__primary-btn--call { background: var(--gradient-clean); }
.contact__primary-btn--wa { background: #25d366; }
.contact__primary-btn--wa strong, .contact__primary-btn--wa em { color: #05391f; }

/* ════════════ FAB-STACK — WhatsApp + Anruf ═════════════════ */
.fab-stack {
  position: fixed; bottom: var(--s-5); right: var(--s-5); z-index: 41;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.fab {
  display: flex; align-items: center; gap: var(--s-2);
  height: 56px; padding: 0 var(--s-4);
  color: var(--paper);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.fab svg { flex-shrink: 0; }
.fab__label { font-weight: 700; font-size: var(--t-sm); white-space: nowrap; }
.fab:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.05); }
.fab--wa { background: #25d366; }
.fab--call {
  background: var(--gradient-clean);
  animation: pulseRing 2.8s var(--ease) infinite;
}
@keyframes pulseRing {
  0% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(24,112,176,.45); }
  70% { box-shadow: var(--shadow-lg), 0 0 0 16px rgba(24,112,176,0); }
  100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(24,112,176,0); }
}

/* ════════════ LEGAL — Impressum / Datenschutz / AGB ════════ */
.legal { background: var(--paper-deep); border-top: 1px solid var(--line); }
.legal--page { min-height: 62vh; border-top: 0; }
.legal__inner { max-width: 920px; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter); }
.legal__block { scroll-margin-top: 100px; padding-bottom: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.legal__block:last-of-type { border-bottom: 0; }
.legal__title { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800; letter-spacing: -.025em; }
.legal__note { font-size: var(--t-sm); color: var(--ink-mute); margin-top: var(--s-2); margin-bottom: var(--s-5); }
.legal__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.legal__block h3 { font-size: var(--t-base); font-weight: 700; margin-top: var(--s-5); margin-bottom: var(--s-2); }
.legal__block h3:first-of-type { margin-top: 0; }
.legal__block p { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.7; }
.legal__block a { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal__todo { color: var(--danger); background: rgba(176,69,69,.08); padding: 1px 6px; border-radius: 4px; font-weight: 600; font-size: .9em; }
.legal__disclaimer { margin-top: var(--s-5); padding: var(--s-4); background: rgba(24,112,176,.06); border-left: 3px solid var(--clay); border-radius: var(--r-sm); font-size: var(--t-xs) !important; color: var(--ink-soft); }
.legal__back { margin-top: var(--s-4); }
.legal__back a { font-weight: 600; color: var(--clay-deep); }

/* ════════════ LEISTUNGSSEITE (Landing pro Service) ═════════ */
.crumb {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) 0;
  font-size: var(--t-sm); color: var(--ink-mute);
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
}
.crumb a { color: var(--ink-mute); transition: color .2s var(--ease); }
.crumb a:hover { color: var(--clay-deep); }
.crumb span[aria-current] { color: var(--ink); font-weight: 600; }

.lp { max-width: var(--max); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 7vw, 6rem); }
.lp__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* Badge + Titel über beide Spalten (Zeile 1); Text + Bild darunter (Zeile 2)
   → Bild-Oberkante fluchtet automatisch mit dem Fließtext, egal wie hoch der Titel ist */
.lp__head { grid-column: 1 / -1; grid-row: 1; }
.lp__copy { grid-column: 1; grid-row: 2; }
.lp__copy > :first-child { margin-top: 0; } /* Lead bündig zur Bild-Oberkante */
.lp__media { grid-column: 2; grid-row: 2; }
.lp__id {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--sun-ink-badge);
  background: var(--sun-tint); border: 1px solid var(--sun-badge-border);
  border-radius: var(--r-full);
  padding: 6px 12px; margin-bottom: var(--s-4); width: fit-content;
  margin-left: var(--badge-pull);   /* Badge-Text linksbündig zum Titel */
}
.lp__title { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.lp__lead { font-size: var(--t-md); color: var(--ink-soft); margin-top: var(--s-5); line-height: 1.6; }
.lp__text { color: var(--ink-soft); margin-top: var(--s-4); }
.lp__list { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.lp__list li { position: relative; padding-left: 1.9rem; font-size: var(--t-base); color: var(--ink-soft); }
.lp__list li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--clay-tint); box-shadow: inset 0 0 0 1px var(--clay);
}
.lp__list li::after {
  content: ""; position: absolute; left: 6px; top: calc(.28em + 5px);
  width: 6px; height: 3px; border-left: 1.5px solid var(--clay-deep); border-bottom: 1.5px solid var(--clay-deep);
  transform: rotate(-45deg);
}
/* Vollbreite Vorteils-Liste im lp__more-Bereich (2-spaltig ab Tablet) */
.lp__list--wide { margin-top: var(--s-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .lp__list--wide { grid-template-columns: 1fr; } }

/* Zwischenüberschrift im lp__more-Fließtext */
.lp__sub {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  letter-spacing: -.018em; color: var(--ink);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* „Zum Nachdenken“-Tipp-Box — Highlight mit Akzent-Rand */
.lp__tip {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: var(--s-5) var(--s-6);
  background: var(--gradient-clean-soft);
  border: 1px solid var(--clay-soft);
  border-left: 4px solid var(--clay);
  border-radius: var(--r-md);
}
.lp__tip-label {
  display: inline-block;
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--clay-deep);
  margin-bottom: var(--s-2);
}
.lp__tip p {
  font-size: var(--t-md); line-height: 1.65; color: var(--ink-soft);
  font-style: italic; margin: 0;
}
.lp__promo {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--gradient-clean-soft);
  border: 1px solid var(--clay-soft);
  border-radius: var(--r-md);
  font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5;
}
.lp__promo-badge {
  flex-shrink: 0;
  display: grid; place-items: center;
  min-width: 46px; height: 46px; padding: 0 .5rem;
  /* Gratis-Wert = Gewinn-Moment → leuchtender Solar-Verlauf (wie Startseiten-0€-Badge).
     Dunkler Text auf Gelb für sauberen Kontrast. */
  background: var(--gradient-sun); color: var(--ink);
  font-weight: 800; font-size: 1rem; letter-spacing: -.02em;
  border-radius: var(--r-sm);
}
.lp__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.lp__media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.lp__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.svc-related { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 7vw, 6rem); }
.svc-related__title { font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--s-4); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.svc-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.svc-related__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-4); font-weight: 600; font-size: var(--t-sm);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink-soft); transition: border-color .2s var(--ease), color .2s var(--ease), transform .25s var(--ease-out);
}
.svc-related__item::after { content: "→"; color: var(--clay-deep); }
.svc-related__item:hover { border-color: var(--clay); color: var(--ink); transform: translateY(-2px); }

/* Leistungsseite — vertiefender Content + FAQ */
.lp__more { background: var(--paper-deep); border-top: 1px solid var(--line); }
.lp__more-inner { max-width: 860px; margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter); }
.lp__more-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.lp__more-title--faq { margin-top: clamp(2.5rem, 5vw, 4rem); }
.lp__more-text { font-size: var(--t-md); color: var(--ink-soft); line-height: 1.7; margin-top: var(--s-4); }
.lp__faq { margin-top: var(--s-5); }

/* Bildergalerie in der Leistungs-Unterseite (echte Einsatzfotos) */
.lp__gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.lp__gallery figure {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  background: var(--paper);
}
.lp__gallery img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.lp__gallery figure:hover img { transform: scale(1.04); }
@media (max-width: 720px) { .lp__gallery { grid-template-columns: 1fr 1fr; gap: var(--s-3); } }

/* Wärmebild-Beispiele (Thermografie) — Bilder nicht beschneiden
   (Temperaturskala muss sichtbar bleiben) → contain auf dunklem Grund */
.thermo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.thermo-shot {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.thermo-shot picture {
  display: block; background: #141d33;
}
.thermo-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: contain;
}
.thermo-shot figcaption {
  padding: var(--s-4);
  font-size: var(--t-sm); line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 900px) { .thermo-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }

/* ════════════ TÜV-CARD (About-Overlay statt Logo-Frame) ════
   Ersetzt die Logo-Karte der Referenz durch ein Text-Trust-Siegel
   „TÜV Rheinland geprüft“ — kein fremdes Logo, faktische Aussage. */
.about__tuv-card {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center;
  width: 104px; height: 104px;
  background: #fff;
  border: 1px solid var(--clay-tint);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(13,26,31,.15);
  padding: var(--s-3);
}
.about__tuv-card strong {
  font-family: var(--sans); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -.02em; line-height: 1;
  color: var(--clay-deep);
}
.about__tuv-card span {
  font-family: var(--sans); font-size: .62rem; font-weight: 600;
  line-height: 1.25; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ════════════ REFERENZ-GALERIE — Karussell + Lightbox ══════
   Echte Projektfotos in einem swipe-/scrollbaren Karussell
   (scroll-snap, touch-nativ) mit Prev/Next-Buttons. Klick öffnet
   die Lightbox. Keine erfundenen Kundenstimmen. */
.gallery {
  position: relative;
}
.gallery__track {
  display: flex;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px var(--s-3);
  margin: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.gallery__track::-webkit-scrollbar { height: 8px; }
.gallery__track::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.gallery__track::-webkit-scrollbar-track { background: transparent; }
.gallery__slide {
  flex: 0 0 clamp(260px, 32%, 380px);
  scroll-snap-align: start;
}
.gallery__item {
  display: block; width: 100%; padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.gallery__item img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  filter: grayscale(12%) contrast(1.02);
  transition: filter .6s var(--ease-out), transform 1.4s var(--ease-out);
}
.gallery__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--clay-soft); }
.gallery__item:hover img { filter: grayscale(0%); transform: scale(1.05); }

/* Prev/Next-Buttons — schweben über den Rändern */
.gallery__nav {
  position: absolute; top: calc(50% - var(--s-3)); transform: translateY(-50%);
  z-index: 3;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease-out), opacity .25s var(--ease);
}
.gallery__nav:hover { background: var(--clay); color: #fff; border-color: var(--clay); transform: translateY(-50%) scale(1.06); }
.gallery__nav--prev { left: calc(-1 * var(--s-3)); }
.gallery__nav--next { right: calc(-1 * var(--s-3)); }
.gallery__nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  .gallery__nav--prev { left: 2px; }
  .gallery__nav--next { right: 2px; }
  .gallery__slide { flex-basis: 78%; }
}

.ref-note {
  margin-top: var(--s-5);
  font-size: var(--t-sm); color: var(--ink-mute); text-align: center;
}
.ref-more { margin-top: var(--s-6); display: flex; justify-content: center; }

/* ════════════ LIGHTBOX ═════════════════════════════════════ */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(5,16,15,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lb-fade .25s var(--ease);
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage {
  margin: 0; grid-column: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  min-width: 0;
}
.lightbox__img {
  max-width: 100%; max-height: 78vh;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  object-fit: contain;
  background: var(--trust-deep);
}
.lightbox__caption {
  font-family: var(--sans); font-size: var(--t-sm);
  color: rgba(255,255,255,.8); text-align: center; max-width: 60ch;
}
.lightbox__nav, .lightbox__close {
  display: grid; place-items: center;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  transition: background .2s var(--ease), transform .2s var(--ease-out);
}
.lightbox__nav { width: 52px; height: 52px; }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--clay); transform: scale(1.08); }
.lightbox__close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 46px; height: 46px; z-index: 2;
}
.lightbox__count {
  position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  color: rgba(255,255,255,.65); text-transform: uppercase;
}
@media (max-width: 720px) {
  .lightbox { grid-template-columns: 1fr; }
  .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
  .lightbox__nav--prev { left: var(--s-3); grid-column: auto; }
  .lightbox__nav--next { right: var(--s-3); grid-column: auto; }
  .lightbox__stage { grid-column: auto; }
  .lightbox__img { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__track { scroll-behavior: auto; }
  .lightbox { animation: none; }
}

/* ════════════ PORTFOLIO / REFERENZEN-SEITE ═════════════════
   Dedizierte Galerie: Masonry-artiges Raster mit Ort-Overlay,
   klickbar → Lightbox. Bilder AVIF/WebP. */
.portfolio__head {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(2rem, 4vw, 3rem);
}
.portfolio__title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  line-height: 1.08; letter-spacing: -.03em;
  text-wrap: balance; max-width: 18ch;
  margin-top: var(--s-3);
}
.portfolio__title em { font-style: normal; color: var(--clay); }
.portfolio__lead {
  font-size: var(--t-md); line-height: 1.6; color: var(--ink-soft);
  max-width: 60ch; margin-top: var(--s-5);
}
.portfolio__stats {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-6);
}
.portfolio__stats > div {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-4) var(--s-5);
  background: var(--paper-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.portfolio__stats strong {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -.028em; line-height: 1; color: var(--clay-deep);
}
/* Ertrags-Kennzahl trägt die Sonnen-Semantik — nur diese eine Box in leuchtendem Gelb.
   Dünner dunkler Schatten sichert Lesbarkeit auf hellem Grund. */
.portfolio__stats-item--yield strong {
  color: var(--sun);
  background: linear-gradient(120deg, #e0a800 0%, #fccf00 50%, #ffdb33 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .35px rgba(120,86,0,.4);
  text-shadow: 0 1px 2px rgba(120,86,0,.22);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .portfolio__stats-item--yield strong { color: transparent; }
}
.portfolio__stats span { font-size: var(--t-xs); color: var(--ink-mute); font-weight: 500; }

.portfolio { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem); }
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  margin: 0;
}
.portfolio__item { margin: 0; }
.portfolio__btn {
  position: relative; display: block; width: 100%; padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-deep);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease);
}
.portfolio__btn img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  filter: grayscale(10%) contrast(1.02);
  transition: filter .6s var(--ease-out), transform 1.4s var(--ease-out);
}
.portfolio__btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--clay-soft); }
.portfolio__btn:hover img { filter: grayscale(0%); transform: scale(1.06); }
.portfolio__place {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: -.005em; color: #fff;
  padding: 6px 12px;
  background: rgba(13,26,31,.72);
  border-radius: var(--r-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.portfolio__place::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay-soft);
}
.portfolio__btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13,26,31,.45) 100%);
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.portfolio__btn:hover::after { opacity: 1; }

/* Kontakt-Band unten */
.portfolio__cta-band {
  background: var(--gradient-clean-dark);
  color: var(--paper);
}
.portfolio__cta-inner {
  max-width: 820px; margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
  text-align: center;
}
.portfolio__cta-inner h2 {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  letter-spacing: -.025em; color: var(--paper);
  text-wrap: balance; max-width: 22ch; margin: 0 auto;
}
.portfolio__cta-inner p {
  font-size: var(--t-md); line-height: 1.6;
  color: rgba(255,255,255,.85); max-width: 52ch; margin: var(--s-4) auto 0;
}
.portfolio__cta-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
  margin-top: var(--s-6);
}
.portfolio__cta-actions .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.portfolio__cta-actions .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }

@media (max-width: 900px) { .portfolio__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .portfolio__grid { grid-template-columns: 1fr; } }

/* Einsatzorte — echte Ortsliste als Pill-Wolke (Local-SEO + Info) */
.ref-places {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.ref-places__title {
  font-family: var(--sans); font-weight: 700;
  font-size: var(--t-lg); letter-spacing: -.018em;
  color: var(--ink); margin-bottom: var(--s-4);
}
.ref-places__list {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.ref-places__list li {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-soft);
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.ref-places__list li:hover {
  border-color: var(--clay-soft); background: var(--clay-tint); color: var(--clay-deep);
}

/* ════════════ REVEAL ═══════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ════════════ RESPONSIVE — 3-Stufen-Strategie ═════════════════
   ≤1100  Tablet (Side-Index aus, Grid 2-spaltig)
   ≤720   Phablet (Hero stacked, Footer 2-cols, Marquee kleiner)
   ≤480   Phone   (1-spaltig durchgehend, kompakt)             */

/* — Tablet ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .side-index { display: none; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .objects__grid { grid-template-columns: repeat(2, 1fr); }
  .about__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .about__mark { max-width: 460px; margin: 0 auto; width: 100%; }
  .faq__layout { grid-template-columns: 1fr; }
  .contact__inner { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .process__step:nth-child(2) { border-right: 0; }
  .process__step:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .section__head { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero__aside { order: 2; max-width: 520px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }

  /* Neue Sektionen — Tablet */
  .promo__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .promo__body { text-align: center; }
  .promo__title, .promo__text { max-width: 46ch; margin-left: auto; margin-right: auto; }
  .promo__points { justify-content: center; }
  .promo__cta-wrap { width: 100%; max-width: 340px; }
  .reviews__grid { grid-template-columns: 1fr; }
  .legal__cols { grid-template-columns: 1fr; }

  /* Leistungsseite — Tablet: einspaltig, Reihenfolge Titel → Bild → Text */
  .lp__grid { grid-template-columns: 1fr; gap: var(--s-6); display: flex; flex-direction: column; }
  .lp__head { order: 0; }
  .lp__media { order: 1; grid-column: auto; grid-row: auto; }
  .lp__copy { order: 2; grid-column: auto; grid-row: auto; }
  .lp__media img { aspect-ratio: 16 / 9; }
  .svc-related__grid { grid-template-columns: repeat(2, 1fr); }
}

/* — Phablet ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  body { font-size: 15px; }

  /* Nav */
  .nav { grid-template-columns: 1fr auto; padding: var(--s-3) var(--gutter); }
  .nav__links { display: none; }
  .nav__menu { display: flex; }
  .nav__cta { display: none; }
  .nav__brand-meta { font-size: .58rem; }
  .nav__brand-name { font-size: .95rem; }

  /* Sections kompakter */
  .section { padding-top: clamp(3rem, 9vw, 4rem); padding-bottom: clamp(3rem, 9vw, 4rem); }
  .section__head { margin-bottom: clamp(1.5rem, 5vw, 2.5rem); padding-bottom: var(--s-4); }
  .section__title { font-size: clamp(1.85rem, 8vw, 2.6rem); }
  .section__lede { font-size: .98rem; }

  /* Hero */
  .hero { padding: clamp(1.25rem, 5vw, 2rem) var(--gutter) clamp(2rem, 6vw, 3rem); }
  .hero__meta {
    gap: var(--s-2) 0;
    padding-bottom: var(--s-4);
    font-size: .78rem;
  }
  /* auf schmalen Screens: Chips ohne linke Trennung, engeres Padding */
  .hero__meta-chip {
    padding: 0 var(--s-3);
    border-left-color: var(--line-soft);
  }
  /* der Live-Chip ist auf Mobile redundant zur Rating-Zeile */
  .hero__meta-chip--live { display: none; }
  .hero__title { font-size: clamp(2.6rem, 14vw, 4.2rem); letter-spacing: -.04em; }
  .hero__lefthead { flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
  .hero__lefthead-divider { display: none; }
  .hero__lead { font-size: 1rem; margin-top: var(--s-5); }
  .hero__ctas { gap: var(--s-3); margin-top: var(--s-4); }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .hero__trust { grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-6); }
  /* Grid-Items duerfen unter ihren min-content schrumpfen, sonst zwingt die
     Kontakt-Card (Telefon-Pills) beide 1fr-Spalten breiter als der Viewport
     und die rechte Spalte wird abgeschnitten. */
  .hero__trust-item { min-width: 0; }
  .hero__trust-contact-phone { flex-wrap: wrap; max-width: 100%; }
  /* Erste Reihe (Ertrag | Reinigung) bleibt 2-spaltig; Kontakt- und
     Oeffnungszeiten-Card spannen volle Breite und stehen untereinander. */
  .hero__trust-item--contact,
  .hero__trust-item--hours { grid-column: 1 / -1; }
  .hero__trust-num { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .hero__trust-desc { font-size: .78rem; max-width: 22ch; }
  .hero__photo figcaption { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); flex-wrap: wrap; gap: var(--s-2); }
  .marquee { margin-top: var(--s-7); padding: var(--s-3) 0; }
  .marquee-track { font-size: 1.1rem; gap: var(--s-4); }

  /* Service-Cards — 1-spaltig, kompakter */
  .svc-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .svc-card__body { padding: var(--s-4); gap: var(--s-2); }
  .svc-card__title { font-size: 1.25rem; }
  .svc-card__desc { font-size: .9rem; }
  .svc-card__media { aspect-ratio: 16 / 9; }
  /* Pfeil immer sichtbar auf Touch */
  .svc-card__arrow { opacity: 1; transform: translate(0,0); }
  /* Featured nicht extra hervorheben auf Phone — Ruhe wahren */
  .svc-card--featured { border-color: var(--line-soft); }

  /* Process */
  /* Mobil: Beleuchtungs-Glow großzügig über die schmale Sektion legen und
     früher ausblenden, damit der Kreis nicht an den Box-Kanten hart
     abgeschnitten wird (sonst wirkt der Effekt eckig). */
  .process::before {
    top: -8%; left: -30%; width: 160%; height: 45%;
    background: radial-gradient(ellipse at center, rgba(24,112,176,.16), transparent 70%);
  }
  .process::after {
    bottom: -8%; right: -30%; width: 160%; height: 45%;
    background: radial-gradient(ellipse at center, rgba(58,155,216,.10), transparent 70%);
  }
  .process__steps { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; }
  .process__step { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding: var(--s-5) 0; }
  .process__step:last-child { border-bottom: 0; }
  /* Größere Box, damit die vergrößerte Zahl nicht an den Rändern anstößt */
  .process__num { width: 72px; height: 72px; font-size: 2.5rem; margin-bottom: var(--s-3); }
  .process__step h3 { font-size: 1.3rem; }
  .process__step p { font-size: .9rem; margin-bottom: 0; }
  .process__band { margin-top: var(--s-6); }
  .process__band img { height: 220px; }
  .process__band figcaption { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); flex-direction: column; gap: 4px; align-items: flex-start; }
  .process__band figcaption span:last-child { text-align: left; max-width: 100%; font-size: .85rem; }

  /* About */
  .about__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .about__lead { font-size: 1.1rem; padding-left: var(--s-4); }
  .about__stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
  .about__stats dt { font-size: 1.6rem; }
  .about__stamp { width: 92px; height: 92px; right: -8px; bottom: -16px; font-size: .55rem; }
  .about__stamp strong { font-size: 1.5rem; }
  .about__photo img:first-child { aspect-ratio: 5 / 4; }

  /* Objects */
  .objects__grid { grid-template-columns: 1fr; }
  .object { min-height: 240px; }
  .object__inner { padding: var(--s-5); }
  .object__title { font-size: 1.25rem; }

  .about__tuv-card { width: 88px; height: 88px; }
  .about__tuv-card strong { font-size: 1.25rem; }

  /* Pull-Quote */
  .pull-wrap__inner { padding: clamp(3.5rem, 12vw, 5rem) var(--gutter); }
  .pull-wrap__mark { font-size: clamp(8rem, 28vw, 14rem); top: clamp(1.5rem, 5vw, 3rem); opacity: .12; }
  .pull-wrap__body { font-size: clamp(1.3rem, 6vw, 1.8rem); max-width: 18ch; }
  .pull-wrap__trust { padding: var(--s-3) var(--s-4); gap: var(--s-3); border-radius: 16px; }
  .pull-wrap__trust li { font-size: .66rem; }
  .pull-wrap__eyebrow { font-size: .66rem; }
  .pull-wrap__cta { font-size: .88rem; padding: .85rem 1.4rem; }

  /* FAQ */
  .faq summary { font-size: 1.05rem; gap: var(--s-3); }
  .faq__plus { width: 26px; height: 26px; }
  .faq details p { font-size: .95rem; }

  /* Contact */
  /* Mobil: Glows als weite Ellipsen über die volle Breite, damit sie
     nicht als abgeschnittener Kreis eckig wirken (wie bei .process) */
  .contact::before {
    top: -6%; right: -30%; left: auto;
    width: 160%; height: 40%;
    background: radial-gradient(ellipse at center, rgba(24,112,176,.18), transparent 70%);
  }
  .contact::after {
    bottom: -6%; left: -30%;
    width: 160%; height: 40%;
    background: radial-gradient(ellipse at center, rgba(58,155,216,.10), transparent 70%);
  }
  .contact__inner { padding: clamp(3rem, 9vw, 5rem) var(--gutter); }
  .contact__title { font-size: clamp(1.9rem, 9vw, 2.6rem); margin-bottom: var(--s-4); }
  .contact__lede { font-size: 1rem; }
  .contact__channels { grid-template-columns: 1fr; gap: var(--s-2); }
  .contact__channels li { padding: var(--s-3) var(--s-4); }
  .contact__channels a, .contact__channels li p { font-size: var(--t-base); }
  .contact__form { padding: var(--s-5); }
  .contact__form::before { font-size: .58rem; top: var(--s-4); right: var(--s-4); }
  .contact__form-title { font-size: 1.3rem; }
  .contact__row { grid-template-columns: 1fr; gap: var(--s-3); }

  /* Footer */
  .footer { padding: var(--s-7) 0 var(--s-4); }
  .footer__top { padding-bottom: var(--s-5); gap: var(--s-5); }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .footer__bottom { flex-direction: column; gap: var(--s-2); text-align: center; padding-top: var(--s-4); }

  /* Neue Sektionen — Phablet */
  .contact__primary { grid-template-columns: 1fr; gap: var(--s-3); }
  .reviews__score { align-items: flex-start; margin-top: var(--s-3); }
  .promo__badge { width: 92px; height: 92px; }
  /* FAB-Stack — kompakter, Label ausblenden für weniger Verdeckung */
  .fab-stack { bottom: var(--s-4); right: var(--s-4); gap: var(--s-3); }
  .fab { height: 52px; padding: 0; width: 52px; justify-content: center; }
  .fab__label { display: none; }

  /* Leistungsseite — Phablet */
  .lp__title { font-size: clamp(1.7rem, 7vw, 2.3rem); }
  .lp__ctas .btn { width: 100%; justify-content: center; }
  .svc-related__grid { grid-template-columns: 1fr; }
  .crumb { font-size: var(--t-xs); }
}

/* — Phone (kleine Geräte) ─────────────────────────────────── */
@media (max-width: 480px) {
  :root { --gutter: 1.1rem; }
  .hero__title { font-size: clamp(2.4rem, 15vw, 3.5rem); }
  .section__title { font-size: clamp(1.7rem, 8vw, 2.2rem); }

  /* Trust auf 1 Spalte umbrechen für sehr enge Screens? Nein — 2-spaltig bleibt lesbar */
  .hero__trust-desc { display: none; }
  .hero__trust { gap: var(--s-3); }

  .footer__cols { grid-template-columns: 1fr; }
  .svc-card__media { aspect-ratio: 5 / 3; }
  .nav__brand-text { max-width: 180px; overflow: hidden; }

  /* Mobile-Nav A-Items */
  .mobile-nav a { font-size: 1.35rem; }
}

/* ════════════ PREISRECHNER (Funnel) ═════════════════════════════ */
.calc-section { max-width: none; background: var(--paper-soft); }
.calc-section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }

.calc {
  margin-top: var(--s-5);
  max-width: 820px;        /* kompakter — keine überbreite leere Fläche */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  position: relative;
  overflow: hidden;
}
/* dezenter Solar-Verlauf am oberen Rand */
.calc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--gradient-sun);
}

/* ── Fortschritt ── */
.calc__progress { margin-bottom: var(--s-5); }
.calc__progress-track {
  height: 6px; border-radius: var(--r-full);
  background: var(--paper-deep); overflow: hidden;
}
.calc__progress-bar {
  display: block; height: 100%; width: 33.33%;
  background: var(--gradient-clean);
  border-radius: var(--r-full);
  transition: width .45s var(--ease-out);
}
.calc__progress-label {
  margin-top: var(--s-3);
  font-size: var(--t-sm); color: var(--ink-mute); font-weight: 500;
}
.calc__progress-label strong { color: var(--clay); font-weight: 700; }

/* ── Schritt ── */
.calc__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc__legend {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-lg); font-weight: 700; color: var(--ink);
  letter-spacing: -.02em; margin-bottom: var(--s-4); padding: 0;
}
.calc__legend-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-full);
  background: var(--clay-tint); color: var(--clay);
  font-size: var(--t-sm); font-weight: 700;
}

.calc__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.calc__field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.calc__field--wide { margin-bottom: var(--s-4); }
.calc__field label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft);
}
.calc__unit { color: var(--ink-faint); font-weight: 500; }

.calc__field input[type="number"] {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--sans); font-size: var(--t-base); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); min-height: 48px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.calc__field input[type="number"]:focus-visible {
  outline: none; border-color: var(--clay);
  box-shadow: 0 0 0 4px rgba(24,112,176,.14);
}
.calc__field input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(176,69,69,.12);
}

.calc__hint { font-size: var(--t-xs); }
.calc__hint--error { color: var(--danger); font-weight: 600; }

/* ── Custom Select ── */
.calc__select { position: relative; }
.calc__select::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute);
  transform: translateY(-70%) rotate(45deg);
}
.calc__select select {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 12px 40px 12px 16px;
  font-family: var(--sans); font-size: var(--t-base); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); min-height: 48px; cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.calc__select select:hover { border-color: var(--line-strong); }
.calc__select select:focus-visible {
  outline: none; border-color: var(--clay);
  box-shadow: 0 0 0 4px rgba(24,112,176,.14);
}

/* ── Info-Tooltip ── */
.calc__info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none;
  border-radius: var(--r-full);
  background: var(--clay-tint); color: var(--clay);
  font-size: 12px; line-height: 1; cursor: help;
  position: relative;
}
.calc__info:hover, .calc__info:focus-visible { background: var(--clay); color: #fff; outline: none; }
.calc__info::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 240px;
  padding: 10px 12px; z-index: 5;
  background: var(--trust-deep); color: #fff;
  font-size: var(--t-xs); font-weight: 500; line-height: 1.45;
  text-align: left; border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease-out);
}
.calc__info:hover::after, .calc__info:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ── Aktionen ── */
.calc__actions {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-5); flex-wrap: wrap;
}
.calc__btn-next, .calc__btn-go { margin-left: auto; }
.calc__btn-prev {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-mute); padding: 12px 4px; min-height: 48px;
  transition: color .2s var(--ease);
}
.calc__btn-prev:hover { color: var(--clay); }

/* ── Ergebnis ── */
.calc__result { text-align: center; outline: none; }
.calc__result-eyebrow {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--s-4);
}
.calc__price {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-2);
}
.calc__price-val {
  font-size: clamp(2.25rem, 7vw, 3.75rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
  /* leuchtender Logo-Gelb-Verlauf (wie 0€-Badge); dünne dunkle Kontur sichert
     Lesbarkeit auf der weißen Kalkulator-Fläche. */
  color: var(--sun);
  background: var(--gradient-sun);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .5px rgba(120,86,0,.45);
  text-shadow: 0 1px 2px rgba(120,86,0,.28);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .calc__price-val { color: transparent; }
}
.calc__price-sep { font-size: var(--t-md); font-weight: 600; color: var(--ink-mute); }
.calc__price-note { font-size: var(--t-sm); color: var(--ink-mute); margin-bottom: var(--s-6); }

.calc__yield {
  display: inline-flex; align-items: center; gap: var(--s-4);
  text-align: left; margin: 0 auto var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--sun-tint); border: 1px solid var(--sun-soft);
  border-radius: var(--r-lg);
}
.calc__yield-icon { font-size: 1.75rem; line-height: 1; color: var(--sun-deep); }
.calc__yield-label { font-size: var(--t-sm); color: var(--ink-soft); font-weight: 500; }
.calc__yield-val {
  font-size: var(--t-lg); font-weight: 800; letter-spacing: -.02em;
  color: var(--sun-deep);
  background: linear-gradient(120deg, #cf9a00 0%, #e8b400 50%, #fccf00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .3px rgba(120,86,0,.35);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .calc__yield-val { color: transparent; }
}

.calc__disclaimer {
  max-width: 52ch; margin: 0 auto var(--s-6);
  font-size: var(--t-xs); line-height: 1.55; color: var(--ink-faint);
}

.calc__result-actions {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.calc__result-call { font-size: var(--t-sm); font-weight: 600; color: var(--clay); }
.calc__result-call:hover { color: var(--clay-deep); }
.calc__result-edit {
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-mute);
  text-decoration: underline; text-underline-offset: 3px; padding: 8px;
}
.calc__result-edit:hover { color: var(--ink); }

@media (max-width: 560px) {
  .calc__actions { flex-direction: column-reverse; align-items: stretch; }
  .calc__btn-next, .calc__btn-go { margin-left: 0; width: 100%; }
  .calc__btn-prev { justify-content: center; }
  .calc__yield { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .calc__progress-bar { transition: none; }
  .calc__info::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   VORHER / NACHHER — Bildvergleich-Schieberegler
   ═══════════════════════════════════════════════════════════════ */
.compare {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;              /* horizontales Draggen nicht scrollen lassen */
  cursor: ew-resize;
  background: var(--paper-deep);
}

.compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Beschnittene Ebene (vorher/dreckig) liegt über nachher */
.compare__clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* --pos wird per JS gesetzt (0–100). Alles rechts von --pos wird abgeschnitten. */
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
  will-change: clip-path;
}

/* Labels */
.compare__label {
  position: absolute;
  top: var(--s-4);
  z-index: 2;
  padding: 6px 14px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.compare__label--before {
  left: var(--s-4);
  color: #fff;
  background: rgba(17, 26, 46, .72);   /* --ink, transparent */
}
.compare__label--after {
  right: var(--s-4);
  color: var(--trust);
  background: rgba(252, 207, 0, .92);  /* --sun */
}

/* Trennlinie + Griff */
.compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 3;
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 26, 46, .12), 0 0 14px rgba(17, 26, 46, .28);
  will-change: left;
  /* Pointer laufen durch die Linie hindurch zum .compare-Container,
     damit das Ziehen auch exakt auf der Linie/dem Griff startet. */
  pointer-events: none;
}

.compare__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  border: 3px solid #fff;
  background: var(--clay);
  color: #fff;
  cursor: ew-resize;
  /* Klicks auf den Griff nicht abfangen — der .compare-Container übernimmt
     das gesamte Pointer-Handling (auch mittig auf dem Griff). */
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: var(--shadow-lg);
  transition: transform .15s ease, background .15s ease;
  touch-action: none;
}
.compare__handle:hover,
.compare__handle:focus-visible {
  background: var(--clay-deep);
  transform: translate(-50%, -50%) scale(1.08);
}
.compare__handle:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}
.compare.is-dragging .compare__handle {
  transform: translate(-50%, -50%) scale(1.05);
}

.compare__handle-arrow {
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
}

.compare.is-dragging { cursor: ew-resize; }
.compare.is-dragging .compare__clip,
.compare.is-dragging .compare__divider { will-change: clip-path, left; }

@media (max-width: 560px) {
  .compare__handle { width: 46px; height: 46px; }
  .compare__label { top: var(--s-3); font-size: 11px; padding: 5px 11px; }
  .compare__label--before { left: var(--s-3); }
  .compare__label--after { right: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .compare__handle { transition: none; }
}