/* Gemeinsame Premium-Komponenten der vier Leistungsseiten. */

.service-rating{
  display:inline-flex;align-items:center;gap:9px;margin:1.05rem 0 .15rem;padding:9px 13px 9px 10px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.92);
  box-shadow:0 9px 24px -19px rgba(11,34,57,.58);color:var(--ink);font-size:.86rem;font-weight:750
}
.service-rating .google-mark{width:22px;height:22px;flex:none}
.service-rating__stars{color:#f4b400;font-size:1rem;letter-spacing:.035em;line-height:1}
.service-rating__text{white-space:nowrap}

.service-content-section{position:relative;overflow:hidden;background:
  radial-gradient(38% 75% at 0 45%,rgba(18,58,94,.055),transparent 75%),var(--paper)}
.service-highlight{
  position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start;
  margin:0 0 2.3rem;padding:25px 27px;overflow:hidden;border:1px solid rgba(18,58,94,.15);
  border-radius:16px;background:#fff;box-shadow:0 22px 54px -40px rgba(11,34,57,.65)
}
.service-highlight::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cta),var(--brass) 42%,var(--navy))}
.service-highlight__icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(229,132,43,.25);border-radius:50%;background:#fff7ed;color:var(--cta)}
.service-highlight__icon svg{width:22px;height:22px}
.service-highlight p{margin:0;color:var(--text);font-size:1.02rem;line-height:1.72}

.service-steps-section{position:relative;overflow:hidden;background:
  radial-gradient(36% 74% at 0 55%,rgba(45,127,255,.065),transparent 76%),
  radial-gradient(32% 68% at 100% 48%,rgba(229,132,43,.07),transparent 76%),var(--paper-alt)}
.service-steps-section .steps{display:grid;gap:30px;margin-top:2.35rem;counter-reset:s}
.service-steps-section .step{
  --step-accent:45,127,255;position:relative;overflow:visible;min-width:0;min-height:220px;
  padding:92px 28px 30px;border:1px solid rgba(18,58,94,.1);border-radius:18px;background:rgba(255,255,255,.94);
  box-shadow:0 16px 38px rgba(18,58,94,.075);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease
}
.service-steps-section .step:nth-child(2){--step-accent:190,143,74}
.service-steps-section .step:nth-child(3){--step-accent:229,132,43}
.service-steps-section .step::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(var(--step-accent),.78),transparent)}
.service-steps-section .step .n{
  counter-increment:s;position:absolute;z-index:3;top:24px;left:50%;transform:translateX(-50%);
  display:grid;place-items:center;width:56px;height:56px;margin:0;border:5px solid #fff;border-radius:50%;
  background:rgb(var(--step-accent));box-shadow:0 8px 22px rgba(var(--step-accent),.24);color:#fff;
  font-family:var(--serif);font-size:1.38rem;font-weight:700
}
.service-steps-section .step .n::before{content:counter(s)}
.service-steps-section .step .n::after{content:"";position:absolute;inset:-8px;border:1px solid rgba(var(--step-accent),.38);border-radius:50%;animation:serviceStepPulse 5.4s ease-out infinite}
.service-steps-section .step:nth-child(2) .n::after{animation-delay:1.8s}
.service-steps-section .step:nth-child(3) .n::after{animation-delay:3.6s}
.service-steps-section .step h3{margin-bottom:.48em;font-family:var(--sans);font-size:1.08rem;text-align:center}
.service-steps-section .step p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.65;text-align:center}
.service-steps-section .step-arrow{position:absolute;z-index:4;top:40px;left:calc(50% + 36px);width:calc(100% - 42px);height:28px;overflow:visible;pointer-events:none;color:rgb(var(--step-accent))}
.service-steps-section .step-arrow__base{fill:none;stroke:rgba(18,58,94,.18);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.service-steps-section .step-arrow__flow{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:18 94;filter:drop-shadow(0 0 5px rgba(var(--step-accent),.5));animation:serviceStepLineFlow 5.4s ease-in-out infinite}
.service-steps-section .step:nth-child(2) .step-arrow__flow{animation-delay:1.8s}
.service-steps-section .steps-cta{margin-top:2.35rem;text-align:center}

.service-faq-section{background:#fff}
.service-faq-section .faq{max-width:880px}
.service-faq-section .qa{border-color:rgba(18,58,94,.13);border-radius:14px;box-shadow:0 12px 32px -28px rgba(11,34,57,.55);transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.service-faq-section .qa.open{border-color:rgba(185,138,70,.42);box-shadow:0 18px 38px -28px rgba(11,34,57,.52)}
.service-faq-section .qa button{padding:19px 22px}

@keyframes serviceStepLineFlow{
  0%,12%{stroke-dashoffset:112;opacity:0}22%{opacity:1}54%{stroke-dashoffset:0;opacity:1}68%,100%{stroke-dashoffset:-34;opacity:0}
}
@keyframes serviceStepPulse{
  0%,16%{transform:scale(.82);opacity:0}30%{opacity:.72}56%,100%{transform:scale(1.35);opacity:0}
}
@media(hover:hover){
  .service-steps-section .step:hover{transform:translateY(-4px);border-color:rgba(var(--step-accent),.3);box-shadow:0 22px 46px rgba(18,58,94,.12)}
  .service-faq-section .qa:hover{transform:translateY(-1px);border-color:rgba(18,58,94,.24)}
}
@media(min-width:820px){.service-steps-section .steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:819px){
  .service-rating{max-width:100%;align-items:flex-start;border-radius:14px}
  .service-rating__text{white-space:normal}
  .service-highlight{grid-template-columns:42px minmax(0,1fr);gap:14px;padding:22px 20px}
  .service-highlight__icon{width:40px;height:40px}
  .service-steps-section .steps{gap:30px}
  .service-steps-section .step{min-height:0;padding:27px 22px 27px 90px}
  .service-steps-section .step .n{top:27px;left:22px;transform:none;width:52px;height:52px}
  .service-steps-section .step h3,.service-steps-section .step p{text-align:left}
  .service-steps-section .step-arrow{top:auto;left:48px;bottom:-30px;width:38px;height:24px;transform:rotate(90deg);transform-origin:0 50%}
}
@media(max-width:430px){
  .service-rating{display:grid;grid-template-columns:22px auto;column-gap:9px;row-gap:2px}
  .service-rating__text{grid-column:2}
  .service-highlight{grid-template-columns:1fr;padding:22px 19px}
  .service-highlight p{font-size:.95rem}
}
@media(prefers-reduced-motion:reduce){
  .service-steps-section .step,.service-steps-section .step .n::after,.service-steps-section .step-arrow__flow,.service-faq-section .qa{animation:none!important;transition:none!important}
  .service-steps-section .step .n::after{opacity:.45;transform:none}
  .service-steps-section .step-arrow__flow{stroke-dasharray:none;opacity:.7}
}