:root{
  --bg:#0a0b0d;
  --bg-2:#111317;
  --panel:rgba(255,255,255,.055);
  --panel-2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.11);
  --text:#f3f5f7;
  --muted:#a7afb9;
  --muted-2:#cfd5dd;
  --accent:#d7dbe0;
  --anthracite:#1d2024;
  --shadow:0 20px 70px rgba(0,0,0,.38);
  --radius:30px;
  --radius-sm:22px;
  --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 22%),
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.035), transparent 20%),
    linear-gradient(180deg,#0a0b0d 0%, #0f1115 35%, #090a0c 100%);
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
main{display:block}
.container{width:min(calc(100% - 32px), var(--max));margin:0 auto}
.muted{color:var(--muted)}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(22px) saturate(150%);
  background:rgba(8,10,13,.62);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:82px}
.brand{display:flex; align-items:center; gap:14px}
.brand-mark{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
  overflow:hidden;
  background:transparent;
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter: brightness(0) invert(1);
}
.brand-text strong{display:block;font:700 1rem/1 Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.brand-text span{display:block;margin-top:4px;font-size:.83rem;color:var(--muted)}
.nav-links{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px}
.nav-links a{padding:11px 14px; border-radius:999px; color:#e6eaef; font-size:.95rem; transition:.22s ease}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.08); transform:translateY(-1px)}
.cta-small{border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04))}
.hero{padding:38px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:22px; align-items:stretch}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
.hero-copy{padding:58px 54px; position:relative; overflow:hidden}
.hero-copy::before{
  content:""; position:absolute; inset:auto auto -180px -90px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#dce1e8; text-transform:uppercase; letter-spacing:.1em; font-size:.8rem}
.hero h1{font:700 clamp(2.7rem, 6.2vw, 5.3rem)/1 Montserrat,sans-serif; letter-spacing:-.05em; margin:20px 0 18px; max-width:11ch}.hero h1 span{display:block}
.hero p.lead{margin:0; max-width:62ch; color:var(--muted-2); font-size:1.08rem; line-height:1.7}
.button-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 22px; border-radius:999px; font-weight:600; border:1px solid rgba(255,255,255,.12);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(180deg,#f5f7fa,#cbd1d9); color:#111317; box-shadow:0 16px 34px rgba(209,214,221,.14)}
.btn-secondary{background:rgba(255,255,255,.05)}
.hero-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:34px}
.stat-chip{padding:16px; border-radius:24px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08)}
.stat-chip strong{display:block; font:700 1rem/1.15 Montserrat,sans-serif; margin-bottom:4px}
.stat-chip span{display:block; color:var(--muted); font-size:.92rem}
.hero-visual{padding:18px; position:relative; overflow:hidden}
.hero-visual-wrap{position:relative; height:100%; min-height:620px; border-radius:26px; overflow:hidden; background:#0f1114; border:1px solid rgba(255,255,255,.08)}
.hero-visual-wrap::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,7,9,.1), rgba(6,7,9,.36) 70%, rgba(6,7,9,.7)); z-index:2}
.hero-visual-wrap::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 18%, rgba(255,255,255,.22), transparent 22%), radial-gradient(circle at 0% 0%, rgba(255,255,255,.1), transparent 20%); z-index:1; pointer-events:none}
.hero-visual-image{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08); filter:saturate(.9) contrast(1.04);}
.hero-float{
  position:absolute; z-index:3; left:22px; right:22px; bottom:22px;
  display:grid; gap:10px;
}
.glass-card{padding:18px 18px; border-radius:24px; background:rgba(9,12,16,.48); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.1)}
.glass-card strong{display:block; font:700 1.16rem/1.1 Montserrat,sans-serif; margin-bottom:6px}
.glass-card span{color:#d6dbe2; font-size:.95rem}
.hero-small-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
section{padding:28px 0 64px}
.section-header{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px}
.section-header h2{margin:0; font:700 clamp(2rem,3.5vw,3.2rem)/1.02 Montserrat,sans-serif; letter-spacing:-.04em}
.section-header p{margin:0; max-width:60ch; color:var(--muted); line-height:1.7}
.grid-2,.grid-3,.grid-4{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card,.service-card,.process-step,.feature-card,.faq-item,.contact-card,.gallery-card,.legal-card,.stat-card{
  padding:26px; border-radius:var(--radius-sm); background:var(--panel); border:1px solid rgba(255,255,255,.08);
  transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover,.service-card:hover,.process-step:hover,.feature-card:hover,.faq-item:hover,.contact-card:hover,.gallery-card:hover,.legal-card:hover,.stat-card:hover{
  transform:translateY(-5px); background:var(--panel-2); border-color:rgba(255,255,255,.14); box-shadow:0 18px 40px rgba(0,0,0,.22)
}
.icon-pill{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); margin-bottom:16px; font:700 .95rem/1 Montserrat,sans-serif}
.card-title{margin:0 0 12px; font:700 1.12rem/1.2 Montserrat,sans-serif}
.card-copy{margin:0; color:var(--muted); line-height:1.7}
.band{padding:10px 0 70px}
.quote{padding:30px 32px; display:grid; gap:16px}
.quote blockquote{margin:0; font:700 clamp(1.6rem,3vw,2.5rem)/1.1 Montserrat,sans-serif; letter-spacing:-.03em}
.quote p{margin:0; color:var(--muted)}
.process-step{position:relative; padding-top:58px}
.process-step::before{content:attr(data-step); position:absolute; top:20px; left:24px; color:#d6dbe2; font:700 .95rem/1 Montserrat,sans-serif}
.notice{padding:16px 18px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#d9dfe6}
.feature-split{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.contact-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:18px}
.contact-card ul{margin:14px 0 0; padding-left:18px; color:var(--muted); line-height:1.8}
.contact-card li a{text-decoration:underline; text-underline-offset:3px}
.footer{padding:34px 0 46px; border-top:1px solid rgba(255,255,255,.08); margin-top:20px}
.footer-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px}
.footer-links{display:flex; flex-wrap:wrap; gap:16px; color:var(--muted)}
.subhero{padding:40px 0 24px}
.subhero .panel{padding:42px 40px}
.breadcrumbs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; color:var(--muted); font-size:.92rem}
.subhero h1{margin:0 0 14px; font:700 clamp(2.3rem,4.5vw,4.2rem)/1 Montserrat,sans-serif; letter-spacing:-.04em}
.subhero p{margin:0; max-width:68ch; color:var(--muted); line-height:1.7}
.gallery-layout{display:grid; grid-template-columns:1.15fr .85fr; gap:18px}
.gallery-stack{display:grid; gap:18px}
.image-card{position:relative; overflow:hidden; min-height:360px; padding:0}
.image-card img{width:100%; height:100%; object-fit:cover}
.image-card .overlay{position:absolute; left:18px; right:18px; bottom:18px; padding:16px 18px; border-radius:18px; background:rgba(8,11,15,.54); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.08)}
.image-card .overlay strong{display:block; margin-bottom:4px}
.image-card .overlay span{color:#d7dce3; font-size:.94rem}
.image-card.tall{min-height:520px}
.image-card.medium{min-height:250px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.stat-card strong{display:block; font:700 clamp(1.8rem,4vw,2.6rem)/1 Montserrat,sans-serif; margin-bottom:8px}
.stat-card span{display:block; color:var(--muted); line-height:1.6}
.faq-item h3,.legal-card h2,.legal-card h3{font-family:Montserrat,sans-serif}
.faq-item h3{margin:0 0 10px; font-size:1rem}
.faq-item p,.legal-card p,.legal-card li{color:var(--muted); line-height:1.7}
.legal-content{display:grid; gap:18px}
.tag-list{display:flex; flex-wrap:wrap; gap:10px}
.tag{padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#dbe0e7; font-size:.92rem}
.reveal{opacity:0; transform:translateY(28px) scale(.985); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1; transform:translateY(0) scale(1)}
.parallax{transform:translateY(var(--parallax, 0px)) scale(var(--scale,1)); transition:transform .2s linear}
.story-wrap{position:relative; height:220vh; margin-top:8px}
.story-sticky{position:sticky; top:92px; height:calc(100vh - 120px); border-radius:34px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#0d0f12; box-shadow:var(--shadow)}
.story-stage{position:absolute; inset:0; overflow:hidden}
.story-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.story-before{z-index:1}
.story-after{z-index:2; clip-path:inset(0 0 0 100%)}
.story-darken{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,10,13,.18), rgba(8,10,13,.22) 45%, rgba(8,10,13,.7)); z-index:3; pointer-events:none}
.story-ui{position:absolute; inset:0; z-index:4; pointer-events:none}
.story-line{position:absolute; top:0; bottom:0; left:0; width:2px; background:rgba(255,255,255,.8); box-shadow:0 0 24px rgba(255,255,255,.3)}
.story-knob{position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; display:grid; place-items:center; touch-action:none; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(14px); font:700 .92rem/1 Montserrat,sans-serif; color:#fff}
.story-labels{position:absolute; left:22px; right:22px; top:22px; display:flex; justify-content:space-between; gap:12px}
.story-label{padding:12px 16px; border-radius:999px; background:rgba(8,12,16,.48); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(16px); color:#eef2f5; font-size:.9rem}
.story-copy{position:absolute; left:22px; bottom:22px; max-width:560px; padding:22px 24px; border-radius:24px; background:rgba(8,12,16,.52); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(18px)}
.story-copy h3{margin:0 0 10px; font:700 clamp(1.5rem,2.5vw,2.1rem)/1.06 Montserrat,sans-serif; letter-spacing:-.03em}
.story-copy p{margin:0; color:#d3d9e1; line-height:1.7}
.story-progress{position:absolute; right:22px; bottom:22px; display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.story-progress .progress-track{width:180px; height:8px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.story-progress .progress-fill{height:100%; width:0%; background:linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.98))}
.story-progress span{font-size:.88rem; color:#e9edf2}
.inline-highlight{font-weight:600; color:#eef2f6}
.compare-inline{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.compare-card{overflow:hidden; padding:0}
.compare-card img{width:100%; height:100%; min-height:300px; object-fit:cover}
.compare-caption{padding:18px 20px; background:rgba(255,255,255,.045); border-top:1px solid rgba(255,255,255,.08)}
.compare-caption strong{display:block; margin-bottom:6px; font:700 1rem/1.1 Montserrat,sans-serif}
.compare-caption span{display:block; color:var(--muted); line-height:1.6}
@media (max-width:1100px){
  .hero-grid,.grid-4,.grid-3,.feature-split,.contact-grid,.gallery-layout,.stats,.grid-2,.compare-inline{grid-template-columns:1fr 1fr}
  .hero-meta{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav{padding:14px 0; flex-direction:column; align-items:flex-start}
  .nav-links{justify-content:flex-start}
  .hero-copy{padding:38px 28px}
  .hero h1{font-size:clamp(2.45rem, 12vw, 4.2rem);max-width:9ch}
  .hero-grid,.grid-4,.grid-3,.feature-split,.contact-grid,.gallery-layout,.stats,.grid-2,.compare-inline{grid-template-columns:1fr}
  .hero-visual-wrap{min-height:420px}
  .subhero .panel{padding:32px 24px}
  .story-wrap{height:160vh}
  .story-sticky{top:92px; height:72vh}
  .story-copy{right:22px; max-width:none}
  .story-progress{left:22px; right:auto; align-items:flex-start}
  .story-progress .progress-track{width:140px}
}
@media (max-width:620px){
  .container{width:min(calc(100% - 20px), var(--max))}
  .hero h1{font-size:clamp(2.5rem, 13vw, 4rem)}
  .section-header{flex-direction:column; align-items:flex-start}
  .story-labels{top:14px; left:14px; right:14px}
  .story-copy{left:14px; right:14px; bottom:14px; padding:18px}
  .story-progress{display:none}
  .story-knob{width:52px; height:52px; font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.btn,.card,.service-card,.process-step,.feature-card,.faq-item,.contact-card,.gallery-card,.legal-card,.stat-card,.nav-links a,.parallax{transition:none}
  .parallax{transform:none!important}
}


.compare-grid-4{grid-template-columns:repeat(4,1fr)}
.cta-band{padding-top:8px}
.cta-panel{display:flex; justify-content:space-between; align-items:center; gap:24px; padding:32px}
.story-copy.compact{max-width:320px}
.story-knob{cursor:ew-resize; pointer-events:auto; color:transparent}
.compare-stage{touch-action:none; user-select:none; cursor:ew-resize}
.compare-stage.is-dragging{cursor:ew-resize}
.gallery-pairs{display:grid; gap:18px}
.pair-card{overflow:hidden; border-radius:var(--radius-sm); background:var(--panel); border:1px solid rgba(255,255,255,.08)}
.pair-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.08)}
.pair-grid img{width:100%; height:100%; min-height:420px; object-fit:cover; display:block; background:#0d0f12}
.muted{color:var(--muted)}
.story-copy.compact p{margin:0;color:#d3d9e1;line-height:1.5}
.quote blockquote:only-child{margin:0}
@media (max-width:1100px){.compare-grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.cta-panel{flex-direction:column; align-items:flex-start}.pair-grid{grid-template-columns:1fr}.pair-grid img{min-height:320px}}
@media (max-width:620px){.compare-grid-4{grid-template-columns:1fr}.story-wrap{height:135vh}.story-sticky{height:66vh}}

.story-progress{display:none!important}
/* ============================================================
   BEFORE / AFTER SLIDER  –  Mobile-first, robust
   ============================================================ */

.ba-wrapper {
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.ba-slider {
  position: relative;
  width: 100%;
  /* Seitenverhältnis 16:9 – passe es an deine Bilder an */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0f12;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: ew-resize;
  /* CRITICAL für Mobile: verhindert, dass der Browser den Touch
     als Scroll interpretiert, wenn horizontal gezogen wird     */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Beide Bild-Layer */
.ba-before,
.ba-after {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ba-before img,
.ba-after img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}


/* Vorher = liegt unten */
.ba-before {
  z-index: 1;
}

/* Nachher = liegt oben, wird durch clip-path aufgedeckt */
.ba-after {
  z-index: 2;
  /* Initial: Nachher-Bild zu 50% sichtbar */
  clip-path: inset(0 50% 0 0);
  will-change: clip-path;
}

/* Labels Vorher / Nachher */
.ba-label {
  position: absolute;
  bottom: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(9, 12, 16, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #eef2f5;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
}

.ba-label--before {
  left: 18px;
}

.ba-label--after {
  right: 18px;
}

/* Trennlinie-Wrapper */
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  /* startet bei 50% */
  left: 50%;
  width: 0;
  z-index: 10;
  pointer-events: none;
}

/* Die eigentliche vertikale Linie */
.ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.4),
    0 0 24px rgba(255, 255, 255, 0.15);
}

/* Der Handle-Knopf */
.ba-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  cursor: ew-resize;
  pointer-events: auto;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 0 0 6px rgba(255, 255, 255, 0.06);
  /* CRITICAL auf Mobile: Handle selbst darf nicht scrollen */
  touch-action: none;
}

.ba-handle:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 6px 30px rgba(0, 0, 0, 0.45),
    0 0 0 8px rgba(255, 255, 255, 0.1);
}

.ba-handle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

/* Aktiv-Zustand beim Ziehen */
.ba-slider.is-dragging .ba-handle {
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow:
    0 8px 36px rgba(0, 0, 0, 0.5),
    0 0 0 10px rgba(255, 255, 255, 0.12);
}

/* Leichter Verlauf-Overlay für Tiefe */
.ba-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 13, 0.08) 0%,
    transparent 30%,
    transparent 70%,
    rgba(8, 10, 13, 0.28) 100%
  );
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
}

/* Responsive Anpassungen */
@media (max-width: 860px) {
  .ba-slider {
    /* Auf Mobile eher quadratisch / hochkant */
    aspect-ratio: 4 / 3;
    border-radius: 22px;
  }
  .ba-wrapper {
    border-radius: 22px;
  }
  .ba-handle {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 620px) {
  .ba-slider {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    touch-action: none; /* Auf kleinen Screens komplett übernehmen */
  }
  .ba-wrapper {
    border-radius: 18px;
  }
  .ba-label {
    font-size: 0.78rem;
    padding: 6px 12px;
    bottom: 12px;
  }
  .ba-label--before { left: 12px; }
  .ba-label--after  { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-after { will-change: auto; }
  .ba-handle { transition: none; }
  .ba-slider.is-dragging .ba-handle { transform: translate(-50%, -50%); }
}