/* ==========================================================
   Atlas Libart GmbH – Gebäudereinigung Nürnberg
   Styles (keine externen Fonts/Libraries – DSGVO-freundlich)
   ========================================================== */

:root{
  --orange:#F6600F;
  --orange-600:#dc5306;
  --orange-soft:#fff0e6;
  --ink:#15181b;
  --graphite:#1a1e22;
  --graphite-2:#252a2f;
  --steel:#8d9299;
  --silver:#AEB3B9;
  --mist:#f3f4f5;
  --mist-2:#e8eaed;
  --line:#e2e4e7;
  --muted:#5c636a;
  --wrap:1280px;
  --pad:clamp(20px,4vw,56px);
  --gutter:max(var(--pad), calc((100vw - var(--wrap)) / 2));
  --r-lg:28px;
  --r-md:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,'SF Pro Display','Helvetica Neue',Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.smooth{scroll-behavior:auto}
body{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--ink);
  background:#fff;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
::selection{background:var(--orange);color:#fff}

.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(88px,12vw,168px)}

h1,h2,h3{font-weight:600;letter-spacing:-.035em;line-height:1.04}
h2{font-size:clamp(2rem,4.6vw,4rem)}
h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.2}
/* Überschriften in den zweispaltigen Sektionen etwas kleiner, damit sie sauber umbrechen */
.values-copy h2,.contact-copy h2{font-size:clamp(2rem,3.7vw,3.3rem)}
.lead{font-size:clamp(1.05rem,1.35vw,1.25rem);color:var(--muted);max-width:54ch}
.accent{color:var(--orange)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
.dark .eyebrow,.eyebrow-light{color:rgba(255,255,255,.72)}

.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border-radius:999px;
  font-weight:600;font-size:1rem;line-height:1;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn .icon{width:18px;height:18px;stroke-width:2;transition:transform .35s var(--ease)}
.btn:hover .icon{transform:translateX(4px)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-600)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--orange)}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-sm{padding:12px 20px;font-size:.92rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;border-bottom:1.5px solid var(--ink);padding-bottom:4px}
.link-arrow .icon{width:18px;height:18px;stroke-width:2;transition:transform .35s var(--ease)}
.link-arrow:hover .icon{transform:translateX(5px)}

/* ---------- Scroll-Fortschritt ---------- */
.progress-bar{
  position:fixed;top:0;left:0;z-index:100;width:100%;height:3px;background:var(--orange);
  transform-origin:0 50%;transform:scaleX(var(--sp,0));pointer-events:none;
}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:60;pointer-events:none}
.nav-inner{
  pointer-events:auto;display:flex;align-items:center;gap:30px;margin-inline:auto;
  width:min(calc(100% - 2 * var(--pad) + 24px), calc(var(--wrap) + 24px));
  padding:9px 10px 9px 22px;border-radius:999px;color:#fff;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),color .45s var(--ease);
}
.nav.is-scrolled .nav-inner,.nav.is-solid .nav-inner{
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
  box-shadow:0 12px 40px -20px rgba(20,24,27,.4),0 0 0 1px rgba(20,24,27,.06);color:var(--ink);
}
.nav-logo{display:block;transition:opacity .45s var(--ease)}
.nav-logo img{height:30px;width:auto}
/* Im Hero zeigt das Video das Logo – deshalb blenden wir es oben in der Leiste aus */
.nav:not(.is-scrolled):not(.is-solid) .nav-logo{opacity:0;pointer-events:none}
.nav-links{display:flex;gap:30px;margin-left:auto;font-size:.95rem;font-weight:500}
.nav-links a{position:relative;padding:6px 0;opacity:.88;transition:opacity .25s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav-burger{display:none;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.16);cursor:pointer;position:relative;margin-left:auto}
.nav.is-scrolled .nav-burger{background:var(--mist)}
.nav-burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.nav-burger span:nth-child(1){top:18px}
.nav-burger span:nth-child(2){top:26px}
.menu-open .nav-burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .nav-burger span:nth-child(2){top:22px;transform:rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:55;background:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--pad) 40px;gap:8px;overflow-y:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease),visibility 0s .7s;
}
.menu-open .menu{clip-path:inset(0);visibility:visible;transition:clip-path .7s var(--ease)}
.menu a.menu-link{font-size:clamp(2rem,9vw,3rem);font-weight:600;letter-spacing:-.03em;line-height:1.25}
.menu-meta{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);display:grid;gap:6px}
.menu-open .nav-inner{background:transparent;box-shadow:none;color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-open .nav-logo{opacity:1 !important}

@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:block}
  .nav-inner{padding:6px 6px 6px 18px}
}

/* ---------- Reveal-Animationen ---------- */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv-scale{opacity:0;transform:scale(.94);transition:opacity 1s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s)}
.js .rv-scale.in{opacity:1;transform:none}
.js .rv-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease) var(--d,0s)}
.js .rv-wipe.in{clip-path:inset(0 0 0 0)}
.rv-lines .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.rv-lines .ln>span{display:block}
.js .rv-lines .ln>span{transform:translateY(108%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--d,0s) + var(--i,0) * 90ms)}
.js .rv-lines.in .ln>span{transform:none}
.rv-lines .ln:nth-child(2){--i:1}
.rv-lines .ln:nth-child(3){--i:2}
.rv-lines .ln:nth-child(4){--i:3}

/* ---------- Platzhalter ---------- */
.ph{
  position:relative;overflow:hidden;color:var(--steel);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.34) 0 2px,transparent 2px 22px),
    linear-gradient(135deg,#eceef0,#d6d9dd);
}
.ph-inner{position:absolute;inset:-6% -10%;display:grid;place-items:center;transform:translate3d(calc(var(--px,0) * 34px),0,0) scale(1.02);transition:scale .9s var(--ease)}
.ph .icon{width:clamp(44px,5vw,68px);height:auto;aspect-ratio:1;stroke-width:1;opacity:.75}
.ph-tag{
  position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.82);color:var(--muted);
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.ph-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* ==========================================================
   HERO
   ========================================================== */
.hero{position:relative;height:170vh;background:#fff}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-frame{
  position:absolute;inset:0;background:#5d6468;
  clip-path:inset(calc(var(--p,0) * 3vh) calc(var(--p,0) * 3vw) round calc(var(--p,0) * 44px));
  will-change:clip-path;
}
.hero-video{width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--p,0) * .12));will-change:transform}
.hero-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(21,24,27,.38) 0%,rgba(21,24,27,0) 22%),
    linear-gradient(0deg,rgba(21,24,27,.82) 0%,rgba(21,24,27,.34) 26%,rgba(21,24,27,0) 46%);
}
.hero-content{
  position:absolute;left:0;right:0;bottom:clamp(44px,8vh,92px);z-index:2;color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,410px);gap:clamp(24px,4vw,72px);align-items:end;
  opacity:calc(1 - var(--p,0) * 1.7);transform:translate3d(0,calc(var(--p,0) * -70px),0);
}
.hero h1{font-size:clamp(2.7rem,7vw,6.2rem);letter-spacing:-.045em;line-height:.98}
.hero-right p{font-size:clamp(1rem,1.25vw,1.15rem);color:rgba(255,255,255,.86);margin-bottom:24px}

@media (max-width:760px){
  /* Mobil: Video oben (Logo bleibt komplett sichtbar), Text darunter */
  .hero{height:auto;background:var(--graphite)}
  .hero-sticky{position:relative;height:auto;overflow:visible}
  .hero-frame{position:relative;height:50vh;height:50svh;clip-path:none}
  .hero-video{transform:none}
  .hero-shade{background:linear-gradient(180deg,rgba(26,30,34,.35) 0%,rgba(26,30,34,0) 26%,rgba(26,30,34,0) 62%,var(--graphite) 100%)}
  .hero-content{position:relative;bottom:auto;grid-template-columns:1fr;gap:18px;padding-top:4px;padding-bottom:64px;opacity:1;transform:none}
}

/* ==========================================================
   MARQUEE
   ========================================================== */
/* Unten Luft lassen und Zeilenhöhe großzügig halten, sonst werden g, p und j abgeschnitten */
.marquee{padding-block:clamp(40px,6vw,84px) clamp(10px,1.4vw,22px);overflow:hidden;background:#fff}
@media (max-width:760px){.marquee{border-radius:32px 32px 0 0;margin-top:-32px;position:relative;z-index:2}}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-group{display:flex;align-items:center;flex:none}
.marquee-group span{
  font-size:clamp(2.2rem,6.4vw,5.6rem);font-weight:600;letter-spacing:-.04em;line-height:1.35;white-space:nowrap;padding-inline:.32em;
}
.marquee-group span:nth-child(4n+3){color:transparent;-webkit-text-stroke:1.5px var(--silver)}
.marquee-group b{width:.9rem;height:.9rem;border-radius:50%;background:var(--orange);flex:none}

/* ==========================================================
   INTRO / STATEMENT
   ========================================================== */
.intro-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(20px,4vw,64px);align-items:start}
.statement{font-size:clamp(1.7rem,3.7vw,3.5rem);font-weight:600;letter-spacing:-.035em;line-height:1.12}
.statement .w{color:#cfd3d7;transition:color .45s var(--ease)}
.statement .w.on{color:var(--ink)}
.statement .w.hl.on{color:var(--orange)}
.intro-meta{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(28px,4vw,56px);padding-top:28px;border-top:1px solid var(--line)}
.intro-meta p{color:var(--muted);max-width:46ch}
@media (max-width:860px){.intro-grid{grid-template-columns:1fr}.intro-meta{grid-column:1}}

/* ==========================================================
   DUNKLE SEKTIONEN – wachsen beim Reinscrollen auf volle Breite
   ========================================================== */
.dark{background:var(--graphite);color:#fff;position:relative}
.dark .lead{color:rgba(255,255,255,.66)}
.grow{clip-path:inset(0 calc((1 - var(--p,1)) * 4vw) 0 calc((1 - var(--p,1)) * 4vw) round calc((1 - var(--p,1)) * 56px) calc((1 - var(--p,1)) * 56px) 0 0)}
/* Helle Sektion schiebt sich als abgerundetes Blatt über die dunkle davor */
.sheet{position:relative;z-index:2;background:#fff;border-radius:44px 44px 0 0;margin-top:-44px}

/* ---------- Zahlen ---------- */
.stats{padding-bottom:calc(clamp(88px,12vw,168px) + 44px)}
.stats-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(44px,7vw,96px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.5vw,40px)}
.stat{position:relative;padding-top:26px}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.2)}
.stat::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease) var(--d,0s)}
.stat.in::after{transform:scaleX(1)}
.stat-num{display:block;font-size:clamp(3.2rem,8.2vw,7.4rem);font-weight:600;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}
.stat-num small{font-size:.5em;color:var(--orange);letter-spacing:0;margin-left:.04em;vertical-align:.5em}
.stat-label{display:block;margin-top:14px;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.stat p{margin-top:8px;color:rgba(255,255,255,.6);font-size:.95rem;max-width:24ch}
@media (max-width:860px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}}

/* ==========================================================
   LEISTUNGEN – horizontaler Scroll (Desktop), Swipe (Mobil)
   ========================================================== */
.services-sticky{display:flex;flex-direction:column;gap:clamp(22px,4vh,48px);padding-block:clamp(72px,10vw,120px) clamp(56px,8vw,96px)}
.services-top{display:flex;align-items:end;justify-content:space-between;gap:32px}
.services-top .eyebrow{margin-bottom:16px}
.services-meter{display:flex;align-items:center;gap:16px;font-size:.85rem;font-weight:600;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;padding-bottom:10px}
.services-meter i{display:block;width:clamp(90px,12vw,180px);height:2px;background:var(--line);position:relative;overflow:hidden}
.services-meter i::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.services-track{display:flex;gap:22px;padding-inline:var(--gutter)}
.svc{
  flex:0 0 clamp(272px,29vw,400px);display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--mist);scroll-snap-align:center;transition:background .5s var(--ease);
}
.svc-media{aspect-ratio:4/3;flex:none}
.svc:hover .ph-inner{scale:1.07}
.svc-body{padding:22px 26px 28px;display:grid;gap:8px}
.svc-no{font-size:.78rem;font-weight:600;letter-spacing:.14em;color:var(--orange)}
.svc p{color:var(--muted);font-size:.97rem}
.svc-cta{background:var(--orange);color:#fff;justify-content:space-between;padding:30px 28px}
.svc-cta .big{font-size:clamp(3.4rem,6vw,5.4rem);font-weight:600;letter-spacing:-.05em;line-height:1}
.svc-cta h3{font-size:1.6rem;margin-block:10px 10px}
.svc-cta p{color:rgba(255,255,255,.88)}
.svc-cta .btn{align-self:flex-start;margin-top:22px;background:#fff;color:var(--ink)}
.svc-cta .btn:hover{background:var(--ink);color:#fff}

/* Ohne Pin (Mobil / reduzierte Bewegung): nativer horizontaler Swipe */
html:not(.pin-ok) .services-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html:not(.pin-ok) .services-track::-webkit-scrollbar{display:none}
html:not(.pin-ok) .services-meter{display:none}

/* Mit Pin: Sektion bleibt stehen, Karten fahren seitlich durch */
.pin-ok .services-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding-block:clamp(84px,13vh,128px) clamp(24px,5vh,56px)}
.pin-ok .services-track{flex:1;min-height:0;width:max-content;align-self:flex-start;will-change:transform}
.pin-ok .svc-media{aspect-ratio:auto;flex:1;min-height:90px}
.pin-ok .svc:not(.svc-cta) .svc-body{min-height:198px;align-content:start}
@media (max-height:700px){
  .pin-ok .services-top h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
  .pin-ok .svc:not(.svc-cta) .svc-body{padding:16px 22px 20px;gap:4px;min-height:158px}
  .pin-ok .svc p{font-size:.9rem;line-height:1.45}
}

/* ==========================================================
   ABLAUF – scroll-gesteuerte Bildsequenz
   ========================================================== */
.process-pin{height:360vh}
.process-sticky{
  position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);padding-block:96px 40px;
}
.process-copy h2{font-size:clamp(1.8rem,3.6vw,3.2rem);margin-bottom:clamp(18px,3vh,36px)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:6px 10px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14);opacity:.36;transition:opacity .6s var(--ease)}
.steps li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.steps li.is-active{opacity:1}
.steps .no{font-size:.78rem;font-weight:600;letter-spacing:.14em;color:var(--orange);padding-top:.42em}
.steps h3{font-size:1.2rem}
.steps p{grid-column:2;color:rgba(255,255,255,.68);font-size:.97rem;display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.steps p>span{overflow:hidden}
.steps li.is-active p{grid-template-rows:1fr}
.process-visual{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:#0e1113}
.process-visual canvas{width:100%;height:100%;object-fit:cover}
.seq-counter{position:absolute;right:14px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(21,24,27,.72);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.process-bar{position:absolute;left:0;right:0;top:0;height:3px;background:var(--orange);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@media (max-width:900px){
  .process-pin{height:300vh}
  .process-sticky{grid-template-columns:1fr;align-content:center;gap:22px;padding-block:84px 24px}
  .process-visual{order:-1}
  .process-copy .eyebrow{margin-bottom:12px}
  .steps li{padding:11px 0}
}

/* ==========================================================
   PRODUKTE & PARTNER
   ========================================================== */
.partners-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(40px,6vw,80px)}
.partners-head h2{font-size:clamp(2rem,4vw,3.6rem)}
.partners-head .lead{padding-bottom:.4em}
.partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.partner{border-radius:var(--r-lg);overflow:hidden;background:var(--mist);display:flex;flex-direction:column}
/* Logos haben unterschiedliche Formate – deshalb einheitliche Kachel, Logo mittig mit Luft */
.partner-logo{aspect-ratio:4/3;background:var(--tile,#fff);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;padding:12%;display:grid;place-items:center}
.partner-logo img{width:100%;height:100%;object-fit:contain}
.partner figcaption{padding:20px 24px 24px;display:grid;gap:2px}
.partner figcaption b{font-size:1.1rem;font-weight:600;letter-spacing:-.01em}
.partner figcaption span{color:var(--orange);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.partner figcaption p{color:var(--muted);font-size:.93rem;margin-top:8px;line-height:1.5}
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(22px,3vw,44px);margin-top:clamp(40px,6vw,84px)}
.benefit{padding:26px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:start}
.benefit .ico{grid-row:span 2;width:46px;height:46px;border-radius:50%;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center}
.benefit h3{font-size:1.12rem;padding-top:.5em}
.benefit p{color:var(--muted);font-size:.97rem}
@media (max-width:900px){
  .partners-head{grid-template-columns:1fr;align-items:start}
  .partners-head .lead{padding-bottom:0}
  .partners{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.benefits{grid-template-columns:1fr}.partners{gap:14px}.partner figcaption{padding:14px 16px 18px}.partner figcaption p{font-size:.88rem}}

/* ==========================================================
   PHILOSOPHIE – gestapelte Karten
   ========================================================== */
.values{background:var(--mist)}
.values-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start}
.values-copy{position:sticky;top:120px}
.values-copy h2{margin-bottom:24px}
.values-copy .lead{margin-bottom:30px}
.values-stack{display:grid;gap:22px}
.value{
  position:sticky;top:calc(104px + var(--i) * 18px);min-height:clamp(250px,36vh,330px);
  border-radius:var(--r-lg);padding:clamp(26px,3.2vw,44px);background:#fff;
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  transform-origin:50% 0;transform:scale(calc(1 - var(--o,0) * .05));
  box-shadow:0 -18px 44px -30px rgba(21,24,27,.3);
}
.value .no{font-size:.78rem;font-weight:600;letter-spacing:.14em;color:var(--orange)}
.value h3{font-size:clamp(1.6rem,2.6vw,2.3rem);letter-spacing:-.03em;margin-bottom:10px}
.value p{color:var(--muted);max-width:44ch}
.value.v-dark{background:var(--graphite);color:#fff}
.value.v-dark p{color:rgba(255,255,255,.7)}
.value.v-orange{background:var(--orange);color:#fff}
.value.v-orange p{color:rgba(255,255,255,.92)}
.value.v-orange .no{color:#fff}
@media (max-width:900px){
  .values-grid{grid-template-columns:1fr}
  .values-copy{position:static}
  .value{top:calc(84px + var(--i) * 12px)}
}

/* ---------- Vertrauen: Geschäftsführung & Mitgliedschaften ---------- */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(64px,9vw,128px)}
.trust-card{border-radius:var(--r-lg);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.trust-media{aspect-ratio:4/3;display:grid;place-items:center;background:#fff;border-bottom:1px solid var(--line)}
.trust-media.ph{border-bottom:0}
.trust-media img{width:100%;height:100%;object-fit:contain}
.trust-body{padding:22px 26px 26px;display:grid;gap:4px}
.trust-body small{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.trust-body b{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.trust-body span{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.trust{grid-template-columns:1fr}.trust-media{aspect-ratio:16/9}}

/* ==========================================================
   KONTAKT
   ========================================================== */
.contact{background:#fff;position:relative;z-index:2;border-radius:0 0 44px 44px}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start}
.contact-copy h2{margin-bottom:24px}
.contact-list{margin-top:36px;display:grid}
.contact-list li{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.contact-list li:last-child{border-bottom:1px solid var(--line)}
.contact-list .ico{width:46px;height:46px;border-radius:50%;background:var(--mist);display:grid;place-items:center;color:var(--orange)}
.contact-list small{display:block;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.contact-list a,.contact-list address{font-style:normal;font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
.contact-list a:hover{color:var(--orange)}
.contact-list em{font-style:normal;font-weight:400;font-size:.88rem;color:var(--steel);display:block}
.socials{display:flex;gap:10px;margin-top:28px}
.social{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.social:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-3px)}
.social .icon{width:20px;height:20px}

.form{background:var(--mist);border-radius:var(--r-lg);padding:clamp(24px,3.6vw,48px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:grid;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:15px 16px;border:1.5px solid transparent;border-radius:14px;background:#fff;outline:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;-webkit-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='%235c636a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(246,96,15,.14)}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.consent{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.9rem;color:var(--muted)}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--orange)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.form-status{font-size:.95rem;color:var(--muted);flex:1;min-width:220px}
.form-status.ok{color:#1c7a45;font-weight:600}
.form-status.err{color:#b3261e;font-weight:600}
.form.is-sending .btn{opacity:.6;pointer-events:none}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:560px){.form{grid-template-columns:1fr}}

/* ---------- Karte (2-Klick-Lösung) ---------- */
.map{position:relative;margin-top:clamp(48px,7vw,96px);border-radius:var(--r-lg);overflow:hidden;height:clamp(340px,46vw,520px);background:var(--mist-2)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-ph{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;
  background:
    linear-gradient(rgba(255,255,255,.55) 2px,transparent 2px) 0 0 / 100% 84px,
    linear-gradient(90deg,rgba(255,255,255,.55) 2px,transparent 2px) 0 0 / 132px 100%,
    linear-gradient(32deg,transparent 47.5%,rgba(255,255,255,.75) 47.5% 52.5%,transparent 52.5%),
    linear-gradient(135deg,#e6e8eb,#d9dce0);
}
.map-card{background:#fff;border-radius:var(--r-md);padding:26px 28px;max-width:400px;display:grid;gap:10px;justify-items:center;box-shadow:0 26px 60px -32px rgba(21,24,27,.45)}
.map-card .pin{width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center}
.map-card b{font-size:1.08rem;font-weight:600}
.map-card p{color:var(--muted);font-size:.95rem}
.map-card small{font-size:.78rem;color:var(--steel);line-height:1.45}
.map-card small a{text-decoration:underline;text-underline-offset:2px}
.map-card .btn-row{justify-content:center;margin-block:8px 4px}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{background:var(--graphite);color:#fff;padding-block:clamp(72px,9vw,128px) 30px}
.footer.is-reveal{position:fixed;left:0;right:0;bottom:0;z-index:0}
main{position:relative;z-index:1;background:#fff;border-radius:0 0 44px 44px}
.footer-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start}
.footer-brand img{width:min(360px,80%);height:auto}
.footer-brand p{margin-top:22px;color:rgba(255,255,255,.62);max-width:38ch}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.footer-cols h4{margin:0 0 14px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.footer-cols li,.footer-cols address{font-style:normal;color:rgba(255,255,255,.86);font-size:.97rem;line-height:1.75}
.footer-cols a:hover{color:var(--orange)}
.footer .social{border-color:rgba(255,255,255,.22)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;margin-top:clamp(48px,7vw,96px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.86rem;color:rgba(255,255,255,.55)}
.footer-bottom nav{display:flex;gap:22px}
.footer-bottom a:hover{color:#fff}
@media (max-width:900px){.footer-top{grid-template-columns:1fr}}
@media (max-width:620px){.footer-cols{grid-template-columns:1fr 1fr}}

/* ==========================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   ========================================================== */
.legal{padding-block:clamp(130px,16vw,190px) clamp(72px,10vw,128px)}
.legal .wrap{max-width:calc(820px + 2 * var(--pad))}
.legal h1{font-size:clamp(2.4rem,6vw,4.4rem);margin-bottom:clamp(32px,5vw,56px)}
.legal h2{font-size:1.45rem;letter-spacing:-.02em;margin:44px 0 12px}
.legal p,.legal li{color:#3d4349;margin-bottom:12px}
.legal ul{list-style:disc;padding-left:22px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal .hint{margin-bottom:36px;padding:16px 20px;border-radius:14px;background:var(--orange-soft);color:#7a3306;font-size:.94rem}

/* ==========================================================
   REDUZIERTE BEWEGUNG
   Greift nur, wenn in js/main.js RESPECT_REDUCED_MOTION = true
   gesetzt ist und das Gerät „weniger Bewegung“ meldet.
   ========================================================== */
html.reduced{scroll-behavior:auto}
.reduced.js .rv,.reduced.js .rv-scale,.reduced.js .rv-wipe,.reduced.js .rv-lines .ln>span{opacity:1;transform:none;clip-path:none;transition:none}
.reduced .hero{height:auto}
.reduced .hero-sticky{position:relative}
.reduced .statement .w{color:var(--ink)}
.reduced .statement .w.hl{color:var(--orange)}

/* ---------- Hero: Keyword-Zeile als Teil der H1 ---------- */
.h1-kicker{display:inline-flex;line-height:1.4}
.hero h1 .ln:nth-child(2){--i:0}
.hero h1 .ln:nth-child(3){--i:1}

/* ---------- Portrait Geschäftsführung ---------- */
.trust-photo{border-bottom:0}
.trust-photo img{object-fit:cover;object-position:50% 18%}

/* ---------- Leistungs-Fotos ---------- */
.svc-media img.svc-img{width:100%;height:100%;object-fit:cover;display:block;transform:translate3d(calc(var(--px,0) * -16px),0,0) scale(1.1);transition:scale .9s var(--ease)}
.svc:hover .svc-img{scale:1.16}
.pin-ok .svc-media{position:relative;overflow:hidden}