.services-page{overflow-x:clip}
.services-page h2{font-size:48px!important;line-height:1.05;letter-spacing:-.03em}
.services-page h3{font-size:24px!important;line-height:1.15}

.svc-hero{position:relative;overflow:hidden;color:#fff}
.svc-hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center;padding-top:var(--hero-pad);padding-bottom:var(--hero-pad)}
.svc-hero-copy h1{margin:0 0 28px;max-width:none;font-size:var(--h1-size);line-height:1.02;letter-spacing:-.04em;text-wrap:pretty}
.svc-hero-copy>p:not(.eyebrow){max-width:62ch;margin:0;color:rgba(255,255,255,.88);font-size:18px;line-height:1.75}
.svc-hero-nav{display:grid;gap:14px}
.svc-hero-nav a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:22px 24px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);border-radius:16px 0 16px 0;color:#fff;transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s ease,border-color .3s ease}
.svc-hero-nav a:hover{transform:translateX(6px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.svc-hero-nav-text{display:flex;flex-direction:column;gap:4px}
.svc-hero-nav-text strong{font-size:18px;line-height:1.2}
.svc-hero-nav-text span{font-size:13px;color:rgba(255,255,255,.7)}
.svc-hero-nav-arrow{font-size:20px;color:var(--red);transition:transform .3s ease}
.svc-hero-nav a:hover .svc-hero-nav-arrow{transform:translateX(4px)}
.svc-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:54px;height:54px;border-radius:14px 0 14px 0;background:var(--red);color:#fff}
.svc-icon svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.svc-intro{padding:var(--section-pad) 0}
.svc-intro-grid{max-width:860px;margin:0 auto;text-align:center}
.svc-intro-heading{margin-bottom:36px}
.svc-intro-heading h2{margin:0 auto;max-width:none;text-wrap:pretty}
.svc-intro-copy p{margin:0 0 24px;font-size:18px;line-height:1.78;color:#4e4e4e}
.svc-intro-copy p:last-child{margin-bottom:0}

.svc-detail{position:relative;padding:var(--section-pad) 0;scroll-margin-top:100px}
.svc-detail-soft{background:linear-gradient(180deg,#f7f7f7 0%,#f1f1f1 100%)}
.svc-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;align-items:start}
.svc-index{display:block;margin-bottom:22px;font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--red)}
.svc-detail-heading h2{margin:0 0 24px;max-width:none;text-wrap:pretty}
.svc-detail-heading>p:not(.eyebrow){margin:0;max-width:56ch;font-size:17px;line-height:1.75;color:#555}
.svc-detail-reverse .svc-detail-heading{order:2;text-align:left}
.svc-detail-reverse .svc-detail-heading h2,.svc-detail-reverse .svc-detail-heading>p:not(.eyebrow){margin-left:0}
.svc-detail-reverse .svc-detail-panel{order:1}
.section-charcoal .svc-detail-heading>p:not(.eyebrow){color:#cfcfcf}
.section-charcoal .svc-detail-heading h2{color:#fff}
.svc-detail-panel{padding:44px 44px 40px;background:#fff;color:#181818;border:1px solid rgba(24,24,24,.07);border-radius:18px 0 18px 0;box-shadow:0 18px 40px rgba(24,24,24,.07)}
.svc-detail-panel-outline{background:linear-gradient(145deg,#fff 0%,#f6f6f6 100%)}
.svc-detail-panel h3{margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid rgba(24,24,24,.1)}
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.svc-list li{position:relative;padding-left:34px;font-size:17px;line-height:1.5;font-weight:700;color:#181818}
.svc-list li:before{content:'';position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:rgba(227,0,23,.1)}
.svc-list li:after{content:'';position:absolute;left:6px;top:7px;width:7px;height:4px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.svc-list-norms{gap:20px}
.svc-list-norms li{display:flex;flex-direction:column;gap:3px}
.svc-list-norms li span{font-size:15px;font-weight:400;color:#666}
.svc-panel-note{margin:26px 0 0;padding-top:22px;border-top:1px solid rgba(24,24,24,.1);font-size:15px;line-height:1.7;color:#666}

.svc-faq{padding:var(--section-pad) 0;scroll-margin-top:100px}
.svc-faq-grid{max-width:900px;margin:0 auto}
.svc-faq-heading{text-align:center;margin-bottom:48px}
.svc-faq-heading h2{margin:0 auto;max-width:none;text-wrap:pretty}
.svc-faq-list{border-top:1px solid rgba(24,24,24,.12)}
.svc-faq-item{border-bottom:1px solid rgba(24,24,24,.12)}
.svc-faq-item summary{position:relative;list-style:none;cursor:pointer;padding:26px 56px 26px 0;font-size:20px;font-weight:800;line-height:1.3;color:#181818;transition:color .2s ease}
.svc-faq-item summary::-webkit-details-marker{display:none}
.svc-faq-item summary:hover{color:var(--red)}
.svc-faq-item summary:after{content:'';position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.svc-faq-item[open] summary:after{transform:translateY(-30%) rotate(225deg)}
.svc-faq-answer{padding:0 56px 28px 0}
.svc-faq-answer p{margin:0;font-size:17px;line-height:1.75;color:#555}

.svc-cta{padding:var(--cta-pad) 0}
.svc-cta-inner{display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center}
.svc-cta h2{margin:0 auto 16px;max-width:none;color:#fff;text-wrap:pretty}
.svc-cta p:not(.eyebrow){margin:0;font-size:18px;color:rgba(255,255,255,.9)}

@media(max-width:1200px){
  .svc-hero-inner{gap:48px}
  .svc-intro-grid,.svc-detail-grid,.svc-faq-grid{gap:64px}
}
@media(max-width:1100px){
  .services-page h2{font-size:42px!important}
  .services-page h3{font-size:22px!important}
  .svc-hero-inner{grid-template-columns:1fr;gap:46px}
  .svc-hero-copy h1{max-width:none}
  .svc-detail-grid{grid-template-columns:1fr;gap:44px}
  .svc-detail-reverse .svc-detail-heading{order:0;text-align:left}
  .svc-detail-reverse .svc-detail-heading h2,.svc-detail-reverse .svc-detail-heading>p:not(.eyebrow){margin-left:0}
  .svc-detail-reverse .svc-detail-panel{order:0}
  .svc-detail-heading h2,.svc-intro-heading h2,.svc-faq-heading h2{max-width:none}
}
@media(max-width:760px){
  .services-page h2{font-size:36px!important;line-height:1.05}
  .services-page h3{font-size:22px!important}
  .svc-hero-inner{gap:36px}
  .svc-hero-copy>p:not(.eyebrow){font-size:16px;line-height:1.7}
  .svc-hero-nav a{padding:18px;gap:16px;border-radius:14px 0 14px 0}
  .svc-icon{width:46px;height:46px}
  .svc-icon svg{width:22px;height:22px}
  .svc-detail-grid{gap:34px}
  .svc-intro-heading{margin-bottom:26px}
  .svc-intro-copy{text-align:left}
  .svc-faq-heading{margin-bottom:32px}
  .svc-intro-copy p{font-size:16px;line-height:1.75}
  .svc-detail-panel{padding:30px 26px 28px;border-radius:14px 0 14px 0}
  .svc-list li{font-size:16px}
  .svc-faq-item summary{font-size:18px;padding:22px 44px 22px 0}
  .svc-faq-answer{padding-right:0}
  .svc-cta-inner{gap:28px}
  .svc-cta h2{max-width:none}
}

.svc-intro-grid{max-width:none;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:110px;text-align:left;align-items:start}
.svc-intro-heading{margin-bottom:0}
.svc-intro-heading h2{margin:0;max-width:none}
.svc-intro-copy{padding-top:28px}

#montage .svc-detail-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center}
#montage .svc-detail-panel{position:relative;padding:58px 54px;background:linear-gradient(145deg,#f6f6f6,#ededed);box-shadow:none;border:0}
#montage .svc-detail-panel:before{content:'01';position:absolute;right:34px;top:24px;font-size:86px;font-weight:900;line-height:1;color:rgba(24,24,24,.045);letter-spacing:-.06em}
#montage .svc-detail-panel h3{position:relative}

#wartung{padding-top:var(--section-pad);padding-bottom:var(--section-pad)}
#wartung .svc-detail-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center}
#wartung .svc-detail-panel{border:1px solid rgba(255,255,255,.1);background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.2)}

#instandsetzung{padding:0}
#instandsetzung .svc-detail-grid{gap:0;align-items:stretch}
#instandsetzung .svc-detail-heading{padding:var(--section-pad) 9% var(--section-pad) 0;display:flex;flex-direction:column;justify-content:center}
#instandsetzung .svc-detail-panel{--shell-w:min(1440px,100vw - 64px);margin-right:calc((100vw - var(--shell-w)) / -2);padding:var(--section-pad) max(44px,calc((100vw - var(--shell-w)) / 2)) var(--section-pad) 72px;border:0;border-radius:0;background:var(--red);box-shadow:none;color:#fff;display:flex;flex-direction:column;justify-content:center}
#instandsetzung .svc-detail-panel h3{color:#fff;border-bottom-color:rgba(255,255,255,.2)}
#instandsetzung .svc-list li{color:#fff}
#instandsetzung .svc-list li:before{background:rgba(255,255,255,.16)}
#instandsetzung .svc-list li:after{border-color:#fff}
#instandsetzung .svc-panel-note{color:rgba(255,255,255,.84);border-top-color:rgba(255,255,255,.2)}

.svc-faq{background:#f4f4f4}
.svc-faq-grid{max-width:none;display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:100px;align-items:start}
.svc-faq-heading{text-align:left;margin-bottom:0;position:sticky;top:130px}
.svc-faq-heading h2{margin:0;max-width:none}
.svc-faq-list{background:#fff;padding:10px 36px;border-top:0;border-radius:18px 0 18px 0;box-shadow:0 18px 40px rgba(24,24,24,.05)}

.svc-cta-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:70px;text-align:left}
.svc-cta h2{margin:0 0 16px;max-width:none}

@media(max-width:1100px){
  .svc-intro-grid,.svc-faq-grid{grid-template-columns:1fr;gap:44px}
  .svc-intro-copy{padding-top:0}
  .svc-intro-heading h2,.svc-faq-heading h2{max-width:none}
  .svc-faq-heading{position:static}
  #montage .svc-detail-grid,#wartung .svc-detail-grid{grid-template-columns:1fr}
  #instandsetzung .svc-detail-grid{grid-template-columns:1fr}
  #instandsetzung .svc-detail-heading{padding:var(--section-pad) 0 50px}
  #instandsetzung .svc-detail-panel{margin:0;padding:54px 44px;border-radius:18px 0 18px 0}
}
@media(max-width:760px){
  .svc-intro-grid,.svc-faq-grid{gap:32px}
  #montage .svc-detail-panel{padding:36px 28px}
  #montage .svc-detail-panel:before{font-size:64px}
  #instandsetzung .svc-detail-heading{padding:var(--section-pad) 0 38px}
  #instandsetzung .svc-detail-panel{padding:36px 28px;border-radius:14px 0 14px 0}
  .svc-faq-list{padding:6px 24px;border-radius:14px 0 14px 0}
  .svc-cta-inner{grid-template-columns:1fr;gap:28px;align-items:start}
}

.svc-detail-cta{margin-top:28px;align-self:flex-start}
.svc-norms{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.svc-norms li{padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);background:rgba(227,0,23,.08);border:1px solid rgba(227,0,23,.18);border-radius:8px 0 8px 0}
.svc-norms-light li{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.svc-norms-light li:before{content:'';display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;border-radius:50%;background:var(--red)}
.svc-media{position:relative;display:grid;place-items:center;margin-top:36px;aspect-ratio:16/10;max-height:320px;overflow:hidden;border:1px solid rgba(24,24,24,.12);background:linear-gradient(135deg,#e7e7e7 0%,#d2d2d2 55%,#bdbdbd 100%);border-radius:18px 0 18px 0}
.svc-media:before,.svc-media:after{content:'';position:absolute;left:-15%;right:-15%;bottom:18%;height:2px;background:rgba(24,24,24,.13);transform:rotate(-16deg)}
.svc-media:after{transform:rotate(16deg)}
.svc-media span{position:relative;z-index:1;padding:9px 12px;background:rgba(255,255,255,.82);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#555}
.svc-media-dark{background:linear-gradient(145deg,#303030,#484848);border-color:rgba(255,255,255,.12)}
.svc-media-dark span{background:rgba(255,255,255,.92)}
.svc-media-dark:before,.svc-media-dark:after{background:rgba(255,255,255,.1)}
#wartung .svc-detail-heading .svc-media{margin-left:auto}
#wartung .svc-detail-panel,#instandsetzung .svc-detail-panel{position:relative;overflow:hidden}
#wartung .svc-detail-panel:before,#instandsetzung .svc-detail-panel:before{position:absolute;right:34px;top:24px;font-size:86px;font-weight:900;line-height:1;letter-spacing:-.06em;pointer-events:none}
#wartung .svc-detail-panel:before{content:'02';color:rgba(24,24,24,.045)}
#instandsetzung .svc-detail-panel:before{content:'03';color:rgba(255,255,255,.12)}
#wartung .svc-detail-panel h3,#instandsetzung .svc-detail-panel h3{position:relative}

.svc-subnav{position:sticky;top:70px;z-index:15;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(24,24,24,.08)}
.svc-subnav-inner{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svc-subnav-inner::-webkit-scrollbar{display:none}
.svc-subnav a{position:relative;flex:0 0 auto;padding:18px 16px;font-size:14px;font-weight:800;color:#555;white-space:nowrap;transition:color .2s ease}
.svc-subnav a:after{content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.svc-subnav a:hover{color:#181818}
.svc-subnav a.is-active{color:var(--red)}
.svc-subnav a.is-active:after{transform:scaleX(1)}
.svc-detail,.svc-faq,.svc-process{scroll-margin-top:140px}

.svc-process{padding:var(--section-pad) 0}
.svc-process-head{max-width:760px;margin:0 auto 56px;text-align:center}
.svc-process-head h2{margin:0;text-wrap:pretty}
.svc-process-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:step}
.svc-process-steps li{position:relative;padding:34px 30px 32px;background:linear-gradient(180deg,#fff,#f6f6f6);border:1px solid rgba(24,24,24,.07);border-radius:18px 0 18px 0;box-shadow:0 14px 30px rgba(24,24,24,.05)}
.svc-process-steps li:not(:last-child):after{content:'';position:absolute;top:56px;right:-22px;width:22px;height:2px;background:rgba(227,0,23,.35)}
.svc-process-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:22px;border-radius:12px 0 12px 0;background:var(--red);color:#fff;font-size:16px;font-weight:800}
.svc-process-steps h3{margin:0 0 10px}
.svc-process-steps p{margin:0;font-size:15px;line-height:1.7;color:#555}

@media(max-width:1100px){
  .svc-process-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-process-steps li:nth-child(2):after{display:none}
  #wartung .svc-detail-heading .svc-media{margin-left:0}
  .svc-subnav{top:70px}
}
@media(max-width:760px){
  .svc-subnav{top:66px}
  .svc-subnav a{padding:15px 12px;font-size:13px}
  .svc-media{margin-top:26px;border-radius:14px 0 14px 0}
  .svc-detail-cta{margin-top:22px;width:100%}
  .svc-process-head{margin-bottom:34px;text-align:left}
  .svc-process-steps{grid-template-columns:1fr;gap:14px}
  .svc-process-steps li{padding:26px 22px}
  .svc-process-steps li:after{display:none}
  .svc-detail,.svc-faq,.svc-process{scroll-margin-top:120px}
}

.svc-process{background:linear-gradient(180deg,#f7f7f7 0%,#f1f1f1 100%)}
.svc-faq{background:#fff}
.svc-faq-list{border:1px solid rgba(24,24,24,.07)}

.svc-subnav{background:var(--red);border-bottom:0;backdrop-filter:none}
.svc-subnav a{color:rgba(255,255,255,.78)}
.svc-subnav a:hover{color:#fff}
.svc-subnav a.is-active{color:#fff}
.svc-subnav a:after{background:#fff}

#instandsetzung .svc-detail-panel-outline{border-radius:0 0 0 18px}
@media(max-width:1100px){#instandsetzung .svc-detail-panel-outline{border-radius:0 0 0 18px}}
@media(max-width:760px){#instandsetzung .svc-detail-panel-outline{border-radius:0 0 0 14px}}

#montage .svc-detail-grid{align-items:stretch}
#montage .svc-detail-heading{display:flex;flex-direction:column;justify-content:center}
#montage .svc-detail-panel{display:flex;flex-direction:column}
#montage .svc-panel-note{margin-top:auto;padding-top:26px}
#montage .svc-list{margin-bottom:26px}

#montage .svc-detail-grid{padding:72px 64px;background:linear-gradient(135deg,var(--red) 0%,#cf0015 52%,var(--red-dark) 100%);color:#fff;border-radius:18px 0 18px 0;box-shadow:0 26px 60px rgba(227,0,23,.22)}
#montage .svc-index,#montage .svc-detail-heading .eyebrow{color:#fff}
#montage .svc-detail-heading h2{color:#fff}
#montage .svc-detail-heading>p:not(.eyebrow){color:rgba(255,255,255,.9)}
#montage .svc-detail-panel{background:#fff;box-shadow:0 22px 48px rgba(80,0,10,.22)}
#montage .svc-media{border-color:rgba(255,255,255,.25)}
@media(max-width:1100px){#montage .svc-detail-grid{padding:56px 44px}}
@media(max-width:760px){#montage .svc-detail-grid{padding:36px 22px;border-radius:14px 0 14px 0}}

.svc-intro{padding-bottom:100px}
#montage{padding-top:0}

[data-slide-from="right"]{transform:translate3d(var(--slide-x,70vw),0,0);will-change:transform}
@media(max-width:1100px){[data-slide-from="right"]{transform:none!important}}
@media(prefers-reduced-motion:reduce){[data-slide-from="right"]{transform:none!important}}

#instandsetzung .svc-list-norms li span{color:rgba(255,255,255,.82)}
#instandsetzung .svc-list-norms{gap:26px}
#instandsetzung .svc-detail-panel h3{margin-bottom:30px}
#instandsetzung .svc-panel-note{margin-top:40px;padding-top:30px}

.svc-media-image{background:#e7e7e7}
.svc-media-image:before,.svc-media-image:after{display:none}
.svc-media-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

.svc-hero-nav a{background:rgba(18,18,18,.82);border-color:rgba(255,255,255,.18);backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.svc-hero-nav a:hover{background:rgba(24,24,24,.94);border-color:rgba(255,255,255,.4)}
.svc-hero-nav-text strong{color:#fff}
.svc-hero-nav-text span{color:rgba(255,255,255,.88)}

.svc-hero .hero-bg{background-image:url('/assets/img/heller-und-sembach-schwedt-tueren-tore-torantriebe-leistungen-herobg.webp')}
