/* ============================================================
   CLEANINSPECT UG — Design v1
   Technisch, hygienisch, seriös: Navy + Azurblau, cleane Cards
   mit Schatten, Pill-Buttons, Foto-Hero. Ohne Deko-Elemente.
   ============================================================ */

/* ---------- Fonts (selbst gehostet, DSGVO) ---------- */
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/bricolage-grotesque-v9-latin-700.woff2') format('woff2');
}
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/bricolage-grotesque-v9-latin-800.woff2') format('woff2');
}
@font-face{
  font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('fonts/rubik-v31-latin-var.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --ink:#26374a;            /* Marken-Navy (Wortmarke) */
  --ink-soft:#586a7d;
  --sky:#eef4fb;
  --green:#2098f0;          /* Azur-Akzent (das "I" im Logo) – Füllungen/Buttons/Icons */
  --green-dark:#1274c9;     /* dunkleres Azur – Text-Akzent auf Weiß (Kontrast) */
  --mint:#e9f3fc;           /* helle Azur-Tönung */
  --navy:#1e2b3b;           /* tiefes Navy – Footer/CTA-Flächen */
  --white:#fff;
  --border:#e2e9f4;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Rubik',system-ui,sans-serif;
  --r-lg:26px;
  --r-md:18px;
  --shadow:0 18px 40px -24px rgba(30,43,59,.24);
  --shadow-sm:0 8px 22px -14px rgba(30,43,59,.18);
  --nav-h:74px;
}

/* ---------- Reset & Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:var(--white);
  line-height:1.62;font-size:1rem;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px;border-radius:6px}

.container{width:min(1180px,92vw);margin-inline:auto}

h1,h2{font-family:var(--display);font-weight:800;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.1vw,2.4rem)}
.hl{color:var(--green-dark)}

p{color:var(--ink-soft)}
.lead{font-size:1.125rem;max-width:34rem}

/* Eyebrow */
.label{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--white);border:1px solid var(--border);color:var(--ink);
  font-weight:600;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.45em 1.1em;border-radius:999px;margin-bottom:1.1rem;box-shadow:var(--shadow-sm);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--body);font-weight:600;font-size:1rem;
  padding:.85em 1.7em;border-radius:999px;border:0;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  color:var(--ink);background:var(--white);box-shadow:var(--shadow-sm);
}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-primary,.btn-green{background:var(--green)}
.btn-light{background:var(--white)}
.btn-ghost{background:var(--white);border:1px solid var(--border);box-shadow:none}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid rgba(226,233,244,.55);transition:box-shadow .25s ease;
}
.nav.menu-open{background:var(--white)}
.nav.scrolled{box-shadow:0 10px 30px -18px rgba(17,27,64,.25)}
.nav-inner{height:100%;display:flex;align-items:center;gap:2rem}
.nav-logo{flex:none}
.nav-logo img{height:40px;width:auto}
.nav-links{display:flex;align-items:center;gap:1.7rem;margin-left:auto}
.nav-links a{flex:none;white-space:nowrap}
.nav-links a:not(.btn){font-weight:500;color:var(--ink);position:relative;padding:.2em 0}
.nav-links a:not(.btn)::after{
  content:'';position:absolute;left:0;right:100%;bottom:-2px;height:3px;
  border-radius:99px;background:var(--green);transition:right .22s ease;
}
.nav-links a:not(.btn):hover::after,.nav-links a.active:not(.btn)::after{right:0}
.nav-cta{padding:.7em 1.6em;font-size:.95rem;box-shadow:none;white-space:nowrap}

/* Transparente Nav über Foto-Heros (wird beim Scrollen weiß) */
.nav-clear:not(.scrolled):not(.menu-open){background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.nav-clear:not(.scrolled):not(.menu-open) .nav-links a:not(.btn){color:#fff}
.nav-logo .logo-light{display:none}
.nav-clear:not(.scrolled):not(.menu-open) .logo-dark{display:none}
.nav-clear:not(.scrolled):not(.menu-open) .logo-light{display:block}
.nav-clear:not(.scrolled):not(.menu-open) .burger span{background:#fff}


.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{width:26px;height:3px;border-radius:3px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:55;background:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:var(--display);font-weight:700;font-size:1.4rem;color:var(--ink)}
.mobile-menu .mm-cta{
  font-family:var(--body);font-weight:600;font-size:1.05rem;
  background:var(--green);border-radius:999px;padding:.8em 1.8em;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:linear-gradient(180deg,var(--sky) 0%,#f7fafd 100%);
  padding:calc(var(--nav-h) + clamp(3rem,7vh,5rem)) 0 clamp(3rem,6vh,4.5rem);
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative}
.hero-copy h1{margin:0 0 1.2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  background:var(--white);border:1px solid var(--border);border-radius:999px;
  font-size:.88rem;font-weight:500;padding:.45em 1em;
}
.chip svg{width:1em;height:1em;color:var(--green-dark)}

.hero-visual{position:relative}
.hero-img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--white)}
.hero-img img{width:100%;height:clamp(320px,42vw,460px);object-fit:cover}
.hero-float{
  position:absolute;left:-9%;bottom:-9%;width:38%;
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow);background:var(--white);border:4px solid var(--white);
}
.hero-float img{aspect-ratio:1/1;object-fit:cover}
.hero-badge{
  position:absolute;top:6%;right:-4%;display:flex;gap:.7rem;align-items:center;
  background:var(--white);border-radius:999px;
  padding:.7rem 1.3rem .7rem 1rem;box-shadow:var(--shadow);
}
.hero-badge strong{display:block;font-size:.92rem;line-height:1.25}
.hero-badge span{font-size:.8rem;color:var(--ink-soft)}
.dotpulse{width:.7rem;height:.7rem;border-radius:50%;background:var(--green-dark);flex:none;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(18,116,201,.35)}55%{box-shadow:0 0 0 9px rgba(18,116,201,0)}}

/* ---------- Split-Hero (Startseite: Garten oder Reinigung) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.choice-wrap{position:relative}
.choice{
  position:relative;height:100vh;min-height:560px;background:var(--white);
}
.choice-panel{
  position:absolute;top:0;bottom:0;overflow:hidden;
  display:flex;align-items:flex-end;
}
/* Weicher Übergang: Panels überlappen, rechtes Bild blendet ins linke */
.choice-panel:first-child{left:0;width:56%}
.choice-panel:last-child{
  right:0;width:56%;
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 24%);
  mask-image:linear-gradient(90deg,transparent 2%,#000 24%);
}
.choice-panel:last-child>img{object-position:82% 50%}
/* Übergangszone dunkel füllen: beide Bilder faden in denselben Navy-Schleier */
.choice-panel:first-child::after{
  background:
    linear-gradient(90deg,rgba(17,27,64,0) 52%,rgba(17,27,64,.6) 96%),
    linear-gradient(180deg,rgba(17,27,64,.38) 0%,rgba(17,27,64,.06) 32%,rgba(17,27,64,.8) 100%);
}
.choice-panel:last-child::after{
  background:
    linear-gradient(90deg,rgba(17,27,64,.6) 2%,rgba(17,27,64,0) 42%),
    linear-gradient(180deg,rgba(17,27,64,.38) 0%,rgba(17,27,64,.06) 32%,rgba(17,27,64,.8) 100%);
}
.choice-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.choice-panel:hover>img{transform:scale(1.045)}
.choice-panel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,27,64,.38) 0%,rgba(17,27,64,.06) 32%,rgba(17,27,64,.8) 100%);
}
.choice-copy{position:relative;z-index:1;padding:clamp(1.5rem,4vw,3.5rem);padding-bottom:clamp(4.5rem,10vh,7rem);color:#fff}
.choice-panel:first-child .choice-copy{
  padding-left:max(clamp(1.5rem,4vw,3.5rem),calc((100vw - min(1180px,92vw))/2));
  padding-right:clamp(2rem,17vw,18rem);
}
.choice-panel:last-child .choice-copy{padding-left:clamp(2rem,11vw,11rem);max-width:52rem}
.choice-copy .tag{
  display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  border-radius:999px;padding:.35em 1em;margin-bottom:.8rem;backdrop-filter:blur(4px);
}
.choice-copy h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.7rem);margin-bottom:.4rem}
.choice-copy p{color:rgba(255,255,255,.88);max-width:26rem;margin-bottom:1.2rem}
.choice-copy .btn{box-shadow:none}

/* ---------- Foto-Hero (full-bleed) ---------- */
.home-hero{min-height:100vh}
.home-hero h1{max-width:100%}
.home-hero .hero-chips{
  position:absolute;right:clamp(1.5rem,5vw,5.5rem);bottom:clamp(3.5rem,10vh,7rem);
  display:flex;flex-direction:column;align-items:flex-end;gap:.9rem;z-index:2;
}
.hchip{
  display:inline-flex;align-items:center;gap:.55em;
  background:rgba(30,43,59,.42);border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-weight:600;font-size:.95rem;border-radius:999px;padding:.65em 1.3em;
  text-shadow:0 1px 6px rgba(15,22,32,.5);box-shadow:0 8px 24px -14px rgba(15,22,32,.7);
}
.hchip svg{width:1.25em;height:1.25em;flex:none;background:var(--green);border-radius:50%;padding:.22em;color:#fff}
.photo-hero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:min(82vh,780px);
  padding:calc(var(--nav-h) + 3rem) 0 clamp(3.5rem,8vh,5.5rem);
}
.photo-hero.pad-edge{padding-bottom:calc(clamp(3.5rem,8vh,5.5rem) + 64px)}
.ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-hero::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(17,27,64,.62) 0%,rgba(17,27,64,.32) 42%,rgba(17,27,64,.04) 72%),
    linear-gradient(180deg,rgba(17,27,64,.42) 0%,rgba(17,27,64,.12) 35%,rgba(17,27,64,.72) 100%);
}
.ph-copy{position:relative;z-index:2}
.ph-copy .tag{
  display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;
  border-radius:999px;padding:.35em 1em;margin-bottom:1rem;backdrop-filter:blur(4px);
}
.ph-copy h1{color:#fff;max-width:18ch}
.ph-copy h1 .hl{color:var(--green)}
.ph-copy p{color:rgba(255,255,255,.9);font-size:1.1rem;max-width:32rem;margin:1rem 0 1.6rem}
.photo-hero .edge{z-index:2}
.photo-hero .bubble{z-index:1}

/* ---------- Themen-Kanten (Unterseiten) ---------- */
.subhero.pad-edge{padding-bottom:calc(clamp(2.5rem,6vh,4rem) + 64px)}
.edge{
  position:absolute;left:0;right:0;bottom:-1px;height:64px;pointer-events:none;
  background-repeat:repeat-x;background-position:bottom center;background-size:auto 100%;
}
.edge-grass{background-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%2080'%20preserveAspectRatio='none'><path%20fill='%236cb043'%20fill-opacity='.7'%20d='M0%2080%20L0%2076%20L-6.0%2076%20L-4.7%2027%20L0.4%2076%20L-2.1%2076%20L1.4%2029%20L4.9%2076%20L3.2%2076%20L7.6%2048%20L8.4%2076%20L7.0%2076%20L8.2%2023%20L14.8%2076%20L11.0%2076%20L16.6%2018%20L16.3%2076%20L16.5%2076%20L21.4%2026%20L21.7%2076%20L21.7%2076%20L27.0%2037%20L29.5%2076%20L26.7%2076%20L32.0%2045%20L33.0%2076%20L32.0%2076%20L37.6%2029%20L38.2%2076%20L35.9%2076%20L36.2%2024%20L43.6%2076%20L40.2%2076%20L41.3%2049%20L46.6%2076%20L45.1%2076%20L45.9%2050%20L52.7%2076%20L49.8%2076%20L52.3%2038%20L57.5%2076%20L55.1%2076%20L57.8%2049%20L60.5%2076%20L59.7%2076%20L62.4%2038%20L66.3%2076%20L64.0%2076%20L69.1%2045%20L70.9%2076%20L67.8%2076%20L68.2%2048%20L75.6%2076%20L72.4%2076%20L77.8%2041%20L79.2%2076%20L77.4%2076%20L77.7%2048%20L84.1%2076%20L82.3%2076%20L83.5%2035%20L90.2%2076%20L86.8%2076%20L93.4%2045%20L94.0%2076%20L90.5%2076%20L94.0%2027%20L98.2%2076%20L94.8%2076%20L97.9%2049%20L102.8%2076%20L99.6%2076%20L99.8%2043%20L104.6%2076%20L104.0%2076%20L105.4%2045%20L109.9%2076%20L108.0%2076%20L107.5%2047%20L114.6%2076%20L113.1%2076%20L115.6%2019%20L120.5%2076%20L118.1%2076%20L120.9%2046%20L124.8%2076%20L122.1%2076%20L126.1%2025%20L130.0%2076%20L127.5%2076%20L132.2%2042%20L134.2%2076%20L131.4%2076%20L131.4%2034%20L138.9%2076%20L136.7%2076%20L144.0%2034%20L144.2%2076%20L142.2%2076%20L142.0%2050%20L149.0%2076%20L146.6%2076%20L151.2%2032%20L154.0%2076%20L152.0%2076%20L154.9%2041%20L158.1%2076%20L156.1%2076%20L161.6%2032%20L164.0%2076%20L159.7%2076%20L163.6%2026%20L166.1%2076%20L164.8%2076%20L170.5%2033%20L171.8%2076%20L170.1%2076%20L176.7%2044%20L176.6%2076%20L174.1%2076%20L174.1%2045%20L179.5%2076%20L179.2%2076%20L180.4%2038%20L186.8%2076%20L183.6%2076%20L183.6%2026%20L190.3%2076%20L188.2%2076%20L191.9%2034%20L195.0%2076%20L193.6%2076%20L196.5%2023%20L198.7%2076%20L198.2%2076%20L204.5%2046%20L204.8%2076%20L202.8%2076%20L208.5%2046%20L210.7%2076%20L207.8%2076%20L210.0%2019%20L213.1%2076%20L212.2%2076%20L217.1%2047%20L219.1%2076%20L215.8%2076%20L216.5%2021%20L221.5%2076%20L220.9%2076%20L227.5%2019%20L228.1%2076%20L224.5%2076%20L229.3%2047%20L231.3%2076%20L228.8%2076%20L227.7%2038%20L234.0%2076%20L233.8%2076%20L235.3%2049%20L239.1%2076%20L238.3%2076%20L243.2%2049%20L244.9%2076%20L241.9%2076%20L240.6%2030%20L247.2%2076%20L247.3%2076%20L254.6%2026%20L254.1%2076%20L252.5%2076%20L256.5%2028%20L257.8%2076%20L256.9%2076%20L256.5%2036%20L262.3%2076%20L260.5%2076%20L262.1%2045%20L265.7%2076%20L265.5%2076%20L267.6%2038%20L271.9%2076%20L270.3%2076%20L275.2%2034%20L276.0%2076%20L275.1%2076%20L281.2%2034%20L280.2%2076%20L278.7%2076%20L277.8%2024%20L284.0%2076%20L282.7%2076%20L287.6%2036%20L290.2%2076%20L287.5%2076%20L292.6%2048%20L292.9%2076%20L293.0%2076%20L300.1%2025%20L300.3%2076%20L298.2%2076%20L298.3%2044%20L306.0%2076%20L302.6%2076%20L305.7%2030%20L308.9%2076%20L300%2076%20L300%2080%20Z'/><path%20fill='%233e7d18'%20d='M0%2080%20L0%2076%20L-6.0%2076%20L-4.8%2046%20L0.7%2076%20L-1.3%2076%20L5.2%2049%20L5.1%2076%20L2.1%2076%20L9.1%2047%20L9.0%2076%20L5.7%2076%20L8.8%2051%20L12.8%2076%20L10.6%2076%20L13.3%2057%20L17.5%2076%20L14.6%2076%20L19.3%2043%20L22.3%2076%20L19.1%2076%20L25.7%2058%20L25.4%2076%20L23.2%2076%20L29.6%2063%20L30.2%2076%20L26.8%2076%20L34.6%2060%20L34.5%2076%20L30.0%2076%20L31.6%2046%20L36.1%2076%20L33.5%2076%20L35.2%2066%20L39.3%2076%20L37.8%2076%20L38.6%2054%20L44.4%2076%20L41.0%2076%20L45.5%2046%20L46.1%2076%20L45.1%2076%20L44.5%2062%20L50.5%2076%20L49.7%2076%20L50.4%2053%20L54.7%2076%20L53.1%2076%20L55.0%2046%20L58.7%2076%20L57.3%2076%20L61.3%2048%20L64.7%2076%20L61.9%2076%20L60.9%2064%20L67.8%2076%20L65.7%2076%20L66.2%2055%20L72.9%2076%20L70.4%2076%20L74.0%2049%20L75.5%2076%20L74.9%2076%20L80.3%2040%20L82.5%2076%20L78.2%2076%20L81.3%2047%20L84.7%2076%20L82.6%2076%20L84.6%2043%20L90.2%2076%20L86.1%2076%20L88.1%2053%20L94.0%2076%20L90.9%2076%20L93.9%2051%20L98.8%2076%20L95.4%2076%20L95.7%2056%20L101.3%2076%20L100.3%2076%20L105.2%2056%20L108.1%2076%20L103.9%2076%20L109.1%2042%20L110.8%2076%20L107.6%2076%20L109.4%2041%20L113.9%2076%20L111.9%2076%20L116.2%2048%20L118.0%2076%20L115.0%2076%20L114.7%2043%20L122.2%2076%20L118.9%2076%20L119.2%2048%20L126.3%2076%20L122.1%2076%20L129.5%2060%20L129.7%2076%20L125.3%2076%20L125.3%2042%20L133.1%2076%20L129.2%2076%20L128.5%2055%20L135.7%2076%20L134.0%2076%20L139.7%2064%20L140.3%2076%20L137.3%2076%20L140.6%2066%20L142.4%2076%20L140.7%2076%20L141.0%2045%20L147.4%2076%20L144.5%2076%20L148.2%2043%20L151.9%2076%20L148.1%2076%20L153.3%2045%20L153.2%2076%20L151.1%2076%20L154.6%2057%20L156.1%2076%20L154.8%2076%20L154.2%2056%20L160.2%2076%20L158.5%2076%20L159.8%2058%20L165.8%2076%20L161.7%2076%20L162.6%2062%20L167.3%2076%20L165.1%2076%20L170.8%2062%20L171.6%2076%20L169.1%2076%20L174.2%2046%20L175.5%2076%20L172.2%2076%20L173.4%2062%20L177.2%2076%20L175.9%2076%20L179.7%2057%20L181.6%2076%20L180.5%2076%20L182.8%2047%20L187.0%2076%20L184.1%2076%20L189.8%2059%20L191.3%2076%20L187.6%2076%20L189.5%2066%20L193.8%2076%20L190.9%2076%20L198.4%2046%20L198.8%2076%20L194.7%2076%20L193.8%2054%20L200.4%2076%20L198.1%2076%20L199.1%2050%20L205.5%2076%20L203.0%2076%20L203.0%2042%20L209.8%2076%20L207.2%2076%20L213.0%2060%20L212.8%2076%20L211.8%2076%20L213.9%2044%20L219.4%2076%20L216.3%2076%20L219.6%2046%20L224.0%2076%20L220.5%2076%20L226.4%2054%20L227.6%2076%20L224.4%2076%20L226.4%2063%20L230.6%2076%20L228.2%2076%20L227.4%2040%20L234.1%2076%20L231.6%2076%20L237.9%2051%20L237.7%2076%20L236.2%2076%20L235.7%2059%20L241.6%2076%20L239.5%2076%20L246.1%2062%20L246.1%2076%20L243.7%2076%20L250.2%2054%20L248.9%2076%20L248.5%2076%20L247.8%2054%20L255.0%2076%20L251.6%2076%20L255.5%2052%20L259.5%2076%20L255.7%2076%20L262.5%2049%20L261.6%2076%20L259.5%2076%20L260.8%2045%20L266.3%2076%20L263.0%2076%20L264.4%2051%20L268.9%2076%20L267.7%2076%20L274.0%2057%20L275.5%2076%20L271.1%2076%20L277.9%2040%20L277.4%2076%20L274.6%2076%20L281.2%2050%20L280.9%2076%20L278.3%2076%20L280.4%2066%20L283.6%2076%20L281.8%2076%20L287.9%2046%20L288.9%2076%20L286.1%2076%20L290.2%2040%20L292.9%2076%20L290.7%2076%20L291.9%2066%20L296.5%2076%20L293.9%2076%20L293.9%2060%20L301.3%2076%20L298.4%2076%20L301.1%2053%20L303.6%2076%20L302.0%2076%20L304.8%2040%20L307.3%2076%20L305.7%2076%20L312.3%2059%20L311.5%2076%20L300%2076%20L300%2080%20Z'/></svg>")}
.edge-foam{height:88px;background-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20100'%20preserveAspectRatio='none'><circle%20cx='-10'%20cy='109'%20r='48'%20fill='%23fff'/><circle%20cx='34'%20cy='103'%20r='58'%20fill='%23fff'/><circle%20cx='85'%20cy='99'%20r='52'%20fill='%23fff'/><circle%20cx='126'%20cy='103'%20r='50'%20fill='%23fff'/><circle%20cx='172'%20cy='97'%20r='39'%20fill='%23fff'/><circle%20cx='206'%20cy='97'%20r='38'%20fill='%23fff'/><circle%20cx='240'%20cy='106'%20r='56'%20fill='%23fff'/><circle%20cx='282'%20cy='103'%20r='46'%20fill='%23fff'/><circle%20cx='325'%20cy='106'%20r='53'%20fill='%23fff'/><rect%20y='88'%20width='320'%20height='12'%20fill='%23fff'/></svg>")}

/* Dezente Seifenblasen (nur Reinigung-Subhero) */
.bubble{
  position:absolute;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,255,255,.85);
  background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.9) 0 8%,transparent 24%);
}
.photo-hero .bubble:nth-of-type(1){width:120px;height:120px;top:20%;right:14%}
.photo-hero .bubble:nth-of-type(2){width:60px;height:60px;top:42%;right:6%}

/* ---------- Sections ---------- */
.section{padding:clamp(3.5rem,8vh,5.5rem) 0;position:relative}
.section-head{max-width:44rem;margin-bottom:2.6rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head p{margin-top:.9rem}
.section-head h1,.section-head h2{text-wrap:balance}

/* ---------- Leistungen: 4 Karten auf einen Blick ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:stretch}
.svc-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow-sm);
}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.svc-card .thumb{aspect-ratio:16/11;overflow:hidden}
.svc-card .thumb img{width:100%;height:100%;object-fit:cover}
.svc-card .body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.svc-card h3{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:.5rem}
.svc-card p{font-size:.93rem;flex:1}
.svc-card .more{
  display:inline-flex;align-items:center;gap:.45em;margin-top:1.1rem;
  font-weight:600;color:var(--green-dark);font-size:.95rem;
}
.svc-card .more svg{width:1.05em;height:1.05em;transition:transform .18s ease}
.svc-card .more:hover svg{transform:translateX(4px)}

/* ---------- Stats-Band ---------- */
.stats{background:var(--sky);padding:clamp(2.6rem,6vh,3.8rem) 0}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,3vw,2rem);text-align:center}
.stat b{
  font-family:var(--display);font-weight:800;display:block;
  font-size:clamp(1.6rem,5.4vw,3.2rem);color:var(--ink);line-height:1.1;
}
.stat{min-width:0}
.stat b em{font-style:normal;color:var(--green-dark)}
.stat span{font-weight:500;color:var(--ink-soft);display:block;margin-top:.4rem;font-size:clamp(.72rem,2.2vw,1rem);overflow-wrap:break-word;hyphens:auto}

/* ---------- Warum Smile (Features) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.feat{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);
  padding:1.7rem 1.4rem;transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow-sm);
}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feat .ico{
  width:52px;height:52px;border-radius:14px;background:var(--mint);
  display:grid;place-items:center;margin-bottom:1rem;
}
.feat .ico svg{width:24px;height:24px;color:var(--green-dark)}
.feat h3{font-family:var(--display);font-weight:700;font-size:1.08rem;margin-bottom:.45rem}
.feat p{font-size:.94rem}

/* ---------- Ablauf-Steps ---------- */
.steps-wrap{background:var(--mint)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:step}
.step{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);
  padding:1.6rem 1.5rem;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:.6rem;
}
.step i{
  font-style:normal;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--green);color:var(--ink);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.05rem;
}
.step strong{font-family:var(--display);font-weight:700;font-size:1.08rem}
.step span{font-size:.93rem;color:var(--ink-soft)}

/* ---------- Karte / Region ---------- */
.map-wrap{
  position:relative;border-radius:var(--r-lg);border:1px solid var(--border);
  overflow:hidden;box-shadow:var(--shadow);
}
.map-wrap>img{width:100%;height:clamp(320px,44vw,480px);object-fit:cover}
.map-wrap>iframe{width:100%;height:clamp(340px,46vw,500px);border:0;display:block}
.map-card{
  position:absolute;left:clamp(1rem,4vw,2.5rem);bottom:clamp(1rem,4vw,2.5rem);
  background:var(--white);border-radius:var(--r-md);
  padding:1.4rem 1.6rem;box-shadow:var(--shadow);max-width:290px;
}
.map-card h3{font-family:var(--display);font-weight:700;font-size:1.1rem;margin-bottom:.35rem}
.map-card p{margin-bottom:1rem;font-size:.95rem}
.city-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.city-chips .chip{background:var(--sky);border-color:transparent}

/* ---------- Kundenstimmen ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:stretch}
.quote{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
}
.quote .stars{color:var(--green-dark);letter-spacing:.18em;padding:1.5rem 1.6rem 0}
.quote p{padding:.7rem 1.6rem 1.3rem;flex:1}
.quote footer{
  display:flex;align-items:center;gap:.8rem;
  padding:1rem 1.6rem;border-top:1px solid var(--border);
  font-weight:600;font-size:.98rem;
}
.avatar{
  width:2.5rem;height:2.5rem;border-radius:50%;flex:none;
  background:var(--sky);color:var(--ink);
  display:grid;place-items:center;font-weight:700;font-size:.85rem;
}


/* ---------- Google-Bewertungen ---------- */
.gbadge{
  display:inline-flex;align-items:center;gap:.65em;margin-top:1.3rem;
  background:var(--white);border:1px solid var(--border);border-radius:999px;
  padding:.6em 1.4em;box-shadow:var(--shadow-sm);font-weight:600;
  transition:transform .18s ease,box-shadow .18s ease;
}
.gbadge:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.gbadge svg{width:1.25em;height:1.25em;flex:none}
.gbadge .gstars{color:#f5b50a;letter-spacing:.1em}
.gbadge b{font-family:var(--display);font-weight:800}
.gbadge span{color:var(--ink-soft);font-weight:500}
.rev-marquee{overflow:hidden;position:relative;margin-top:2.6rem}
.rev-marquee::before,.rev-marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none;
}
.rev-marquee::before{left:0;background:linear-gradient(90deg,var(--white),transparent)}
.rev-marquee::after{right:0;background:linear-gradient(270deg,var(--white),transparent)}
.rev-track{display:flex;gap:1.1rem;width:max-content;animation:rev-scroll 60s linear infinite}
.rev-marquee:hover .rev-track{animation-play-state:paused}
@keyframes rev-scroll{to{transform:translateX(-50%)}}
.rev-card{
  width:min(340px,78vw);flex:none;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);
  padding:1.35rem 1.5rem;box-shadow:var(--shadow-sm);
}
.rev-card .gstars{color:#f5b50a;letter-spacing:.15em;font-size:.9rem;margin-bottom:.45rem}
.rev-card p{font-size:.92rem;flex:1}
.rev-card footer{display:flex;align-items:center;gap:.7rem;margin-top:1rem;font-weight:600;font-size:.94rem}
.rev-more{text-align:center;margin-top:2.2rem}
@media (prefers-reduced-motion:reduce){
  .rev-track{animation:none}
  .rev-marquee{overflow-x:auto}
}

/* ---------- CTA-Panel (Navy) ---------- */
.cta{
  background:linear-gradient(135deg,#22374f 0%,#16212e 100%);
  border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:clamp(2.2rem,5vw,3.4rem);display:grid;grid-template-columns:1.3fr 1fr;
  gap:2rem;align-items:center;
}
.cta h2{color:var(--white);margin-bottom:.6rem}
.cta p{color:rgba(255,255,255,.82)}
.cta .actions{display:flex;flex-direction:column;gap:1rem;align-items:flex-end;justify-self:end}
.cta .btn-light{background:var(--green);box-shadow:none}
.cta .tel{
  display:inline-flex;align-items:center;gap:.6em;color:var(--white);font-weight:600;font-size:1rem;
  border:1.5px solid rgba(255,255,255,.85);border-radius:999px;padding:.8em 1.6em;
  transition:background .18s ease,transform .18s ease;
}
.cta .tel:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.cta .tel svg{width:1.2em;height:1.2em}

/* ---------- Footer (Navy) ---------- */
.footer{background:var(--navy);color:#fff;padding-top:clamp(2.5rem,6vh,4rem)}
.footer-inner{
  display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:2.5rem;
  padding-bottom:2.8rem;
}
.f-logo img{height:46px;width:auto;margin-bottom:1rem}
.f-logo p{font-size:.94rem;max-width:26rem;color:rgba(255,255,255,.75)}
.footer h4{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:1rem}
.footer ul{display:flex;flex-direction:column;gap:.55rem}
.footer ul a{color:rgba(255,255,255,.78);font-weight:500;transition:color .15s ease}
.footer ul a:hover{color:var(--green)}
.footer .muted{color:rgba(255,255,255,.72)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14)}
.footer-bottom-inner{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  padding:1.1rem 0;font-size:.9rem;font-weight:500;
  color:rgba(255,255,255,.75);
}
.footer-bottom a:hover{color:var(--green)}

/* ---------- Subhero (Unterseiten) ---------- */
.subhero{
  position:relative;background:linear-gradient(180deg,var(--sky) 0%,#f7fafd 100%);
  padding:calc(var(--nav-h) + clamp(2.5rem,6vh,4rem)) 0 clamp(2.5rem,6vh,4rem);
}
.subhero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.subhero-copy p{font-size:1.1rem;max-width:32rem;margin-top:1rem}
.subhero-img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--white)}
.subhero-img img{width:100%;height:clamp(240px,30vw,340px);object-fit:cover}

/* ---------- Listen (Leistungen Unterseiten) ---------- */
.list-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.list-item{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);
  padding:1.2rem 1.4rem;transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow-sm);
}
.list-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.list-item svg{
  width:2rem;height:2rem;flex:none;padding:.45rem;color:var(--green-dark);
  background:var(--mint);border-radius:50%;
}
.list-item strong{display:block;font-weight:600}
.list-item span{font-size:.92rem;color:var(--ink-soft)}

/* ---------- Split (So arbeiten wir) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split .img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.split .img img{width:100%;height:clamp(300px,36vw,430px);object-fit:cover}
.ticks{display:flex;flex-direction:column;gap:.7rem;margin-top:1.3rem}
.ticks li{display:flex;gap:.7em;align-items:flex-start;font-weight:500}
.ticks svg{
  width:1.5rem;height:1.5rem;flex:none;padding:.3rem;margin-top:.1em;
  background:var(--mint);border-radius:50%;color:var(--green-dark);
}

/* ---------- Galerie (Slider-Loop) ---------- */
.gallery-marquee{overflow:hidden;position:relative;margin-top:2.4rem;width:100vw;margin-left:calc(50% - 50vw)}
.gallery-track{display:flex;gap:1.1rem;width:max-content;animation:gallery-scroll 45s linear infinite}
.gallery-marquee:hover .gallery-track{animation-play-state:paused}
@keyframes gallery-scroll{to{transform:translateX(calc(-50% - .55rem))}}
.g-slide{
  flex:none;width:min(440px,82vw);border-radius:var(--r-md);overflow:hidden;
  background:var(--white);box-shadow:var(--shadow-sm);
}
.g-slide img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){
  .gallery-track{animation:none}
  .gallery-marquee{overflow-x:auto}
}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:1.4rem;align-items:start}
.info-card{
  background:var(--mint);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.2rem);
}
.info-card h3{font-family:var(--display);font-weight:700;font-size:1.25rem;margin-bottom:1.4rem}
.info-rows{display:flex;flex-direction:column;gap:1.15rem}
.info-row{display:flex;gap:1rem;align-items:flex-start}
.info-row .ico{
  width:46px;height:46px;flex:none;border-radius:14px;
  background:var(--white);display:grid;place-items:center;box-shadow:var(--shadow-sm);
}
.info-row .ico svg{width:21px;height:21px;color:var(--green-dark)}
.info-row strong{display:block;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.info-row a,.info-row span{font-weight:500}
.info-row a:hover{color:var(--green-dark)}

.form-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3.5vw,2.4rem);box-shadow:var(--shadow);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full,.full{grid-column:1/-1}
.field label{font-weight:600;font-size:.92rem;color:var(--ink)}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:var(--white);
  border:1px solid #ccd6e6;border-radius:12px;padding:.72em 1em;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111b40' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;background-size:1em}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green-dark);box-shadow:0 0 0 3px rgba(18,116,201,.18);
}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem}
.consent label{color:var(--ink-soft);font-weight:400}
.consent a{text-decoration:underline}
.consent input{width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--green-dark);flex:none}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-msg{margin-top:1rem;font-weight:600;display:none;border-radius:var(--r-md);padding:.8rem 1.2rem}
.form-msg.ok{display:block;background:var(--mint);color:var(--green-dark)}
.form-msg.err{display:block;background:#ffe3e3;color:#a02020}


/* ---------- Schwebende Elemente: Bewertungs-Badge + Kontakt-Button ---------- */
.float-rating{
  position:fixed;left:1.1rem;bottom:1.1rem;z-index:52;
  display:flex;align-items:center;gap:.65rem;
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  padding:.55rem .95rem;box-shadow:0 12px 34px -14px rgba(17,27,64,.4);
  transition:transform .18s ease,box-shadow .18s ease;
}
.float-rating:hover{transform:translateY(-3px);box-shadow:0 16px 40px -14px rgba(17,27,64,.5)}
.float-rating svg{width:1.6rem;height:1.6rem;flex:none}
.float-rating .fr-top{display:flex;align-items:center;gap:.4rem;line-height:1.25}
.float-rating .fr-top b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.float-rating .gstars{color:#f5b50a;letter-spacing:.08em;font-size:.85rem}
.float-rating small{display:block;font-size:.74rem;color:var(--ink-soft);font-weight:500;line-height:1.2}
.float-contact{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:52;
  box-shadow:0 12px 34px -14px rgba(17,27,64,.5);
}
@media (max-width:1024px){
  .home-hero .hero-chips{display:none}
}
@media (max-width:640px){
  :root{--nav-h:64px}
  .nav-logo img{height:34px}
  .float-rating{padding:.45rem .7rem;gap:.5rem;left:.7rem;bottom:.7rem}
  .float-rating small{display:none}
  .float-contact{right:.7rem;bottom:.7rem;padding:.7em 1.2em}
}

/* ---------- Rechtsseiten ---------- */
.legal{padding-top:calc(var(--nav-h) + 3rem)}
.legal h1{margin-bottom:2rem}
.legal h2{font-size:1.35rem;margin:2.2rem 0 .7rem}
.legal h3{margin:1.6rem 0 .5rem;font-size:1.05rem}
.legal p,.legal li{color:var(--ink-soft)}
.legal ul{list-style:disc;padding-left:1.4rem}
.legal a{color:var(--green-dark);text-decoration:underline}
.ph{color:#c22525;background:#ffe9e9;padding:.1em .45em;border-radius:6px;font-weight:600}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .feat-grid,.svc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta{display:none}
  .hero-grid,.subhero-grid,.split{grid-template-columns:1fr}
  .choice{height:auto;min-height:0}
  .choice-panel{position:relative;min-height:min(52vh,460px)}
  .choice-panel:first-child,.choice-panel:last-child{width:100%;-webkit-mask-image:none;mask-image:none}
  .choice-copy{padding-bottom:clamp(1.5rem,4vw,3.5rem)}
  .photo-hero{min-height:70vh}
  .home-hero{min-height:100vh;min-height:94svh;align-items:center}
  .hero-visual{margin-top:1.2rem}
  .hero-badge{right:2%}
  .hero-float{left:-2%}
  .contact-grid{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .cta .actions{align-items:flex-start;justify-self:start}
  .quotes{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .steps{grid-template-columns:1fr;max-width:560px}
  .footer-inner{grid-template-columns:1fr;gap:1.8rem}
}
@media (max-width:640px){
  .list-grid,.svc-grid,.feat-grid,.form-grid{grid-template-columns:1fr}
  .g-slide{width:min(340px,80vw)}
  .hero-badge{display:none}
  .footer-bottom-inner{justify-content:center;text-align:center}
  .ph-copy .tag{white-space:nowrap;font-size:clamp(.5rem,2.7vw,.78rem);letter-spacing:.03em;padding:.4em .9em}
}

/* ---------- Trust-Band (Mitgliedschaften/Richtlinien) ---------- */
.trust{padding:clamp(2rem,5vh,3rem) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust .t-label{text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.4rem}
.trust-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.8rem,6vw,4.5rem)}
.trust-logos img{height:clamp(42px,6vw,60px);width:auto;opacity:.72;filter:grayscale(1);transition:opacity .2s ease,filter .2s ease}
.trust-logos img:hover{opacity:1;filter:none}
@media (prefers-reduced-motion:reduce){.trust-logos img{transition:none}}

/* ---------- Bewertungs-Slider mit Pfeilen ---------- */
.rev-slider{position:relative;margin-top:2.4rem;padding-inline:clamp(3.2rem,6vw,4.6rem)}
.rev-viewport{overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding:.6rem .2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 32px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 32px),transparent 100%);}
.rev-viewport::-webkit-scrollbar{display:none}
.rev-track2{display:flex;gap:1.1rem;width:max-content}
.rev-track2 .rev-card{scroll-snap-align:start}
.rev-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--border);
  background:var(--white);box-shadow:var(--shadow-sm);display:grid;place-items:center;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;
}
.rev-arrow:hover{box-shadow:var(--shadow);transform:translateY(-50%) scale(1.06)}
.rev-arrow svg{width:20px;height:20px;color:var(--ink)}
.rev-prev{left:clamp(.3rem,2vw,1.3rem)}
.rev-next{right:clamp(.3rem,2vw,1.3rem)}
@media (max-width:640px){.rev-slider{padding-inline:1rem}.rev-arrow{display:none}}

/* Abwechselnde Split-Bilder */
.split.img-right .img{order:2}

/* ============================================================
   Leistungs-Blöcke: Bild neben Text (Desktop),
   Überschrift → Foto → Text (Mobil). Nie zwei Fotos untereinander.
   ============================================================ */
.svc-split{display:grid;gap:clamp(1.3rem,4vw,3rem);grid-template-columns:1fr;
  grid-template-areas:"head" "media" "body"}
.svc-head{grid-area:head}
.svc-media{grid-area:media;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.svc-media img{width:100%;display:block;object-fit:cover;height:clamp(240px,62vw,380px)}
.svc-body{grid-area:body}
@media (min-width:1025px){
  .svc-split{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,4rem);row-gap:.4rem;
    align-items:center;grid-template-areas:"media head" "media body"}
  .svc-split.img-right{grid-template-areas:"head media" "body media"}
  .svc-media{grid-row:1 / span 2;align-self:center}
  .svc-media img{height:clamp(340px,33vw,440px)}
  .svc-head{align-self:end}
  .svc-body{align-self:start}
}

/* ============================================================
   Mobile-Feinschliff (nur bis 640px)
   ============================================================ */
@media (max-width:640px){
  /* Bewertungs-Slider: Karten mittig einrasten */
  .rev-viewport{scroll-snap-type:x mandatory}
  .rev-track2 .rev-card{scroll-snap-align:center}
  .rev-card{width:86vw;max-width:360px}
  /* Zielbranchen-Chips kompakter */
  .city-chips{gap:.5rem}
  .city-chips .chip{font-size:.8rem;padding:.42em .85em}
  /* Trust-Logos in einer Reihe */
  .trust-logos{flex-wrap:nowrap;gap:clamp(.4rem,2vw,1rem);justify-content:space-between}
  .trust-logos img{height:clamp(20px,6.2vw,28px)}
  /* Eyebrow einzeilig, gecroppt */
  .label-oneline{white-space:nowrap;font-size:clamp(.5rem,2.4vw,.64rem);letter-spacing:.02em;
    padding:.42em .8em;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}