/* Nachtrag 28.10.2026 (Lucas): (1) Leistungen-Umschalter gleitet wie ein iPhone-Schalter, (2) Footer: Wortzeichen zuerst, Rechtslinks mittig ganz unten */
/* (1) Der Knopf ist ein eigenes Element unter den Beschriftungen und wandert mit Federkurve; die Beschriftungen wechseln die Farbe im Takt. */
.service-switch.sw-glide{position:relative;isolation:isolate}
.service-switch.sw-glide::before{content:"";position:absolute;z-index:-1;left:0;top:0;width:var(--pill-w,0);height:var(--pill-h,0);transform:translate3d(var(--pill-x,0),var(--pill-y,0),0);border-radius:99px;background:var(--text);opacity:0}
.service-switch.sw-glide.sw-bereit::before{opacity:1;transition:transform .55s cubic-bezier(.34,1.3,.5,1),width .55s cubic-bezier(.34,1.3,.5,1),height .3s ease-out}
.service-switch.sw-glide button{position:relative;transition:color .35s ease-out}
.service-switch.sw-glide button[aria-selected=true]{background:transparent;border-color:transparent}
/* Die Inhalte wechseln nacheinander: das alte weicht nach oben, das neue steigt auf */
.value-panel.pn-aus{opacity:0;transform:translate3d(0,-10px,0);transition:opacity .2s ease-in,transform .2s ease-in}
.value-panel.pn-ein{animation:pn-ein .55s cubic-bezier(.22,1,.36,1) both}
@keyframes pn-ein{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.service-switch.sw-glide.sw-bereit::before,.service-switch.sw-glide button{transition:none}.value-panel.pn-aus{transition:none}.value-panel.pn-ein{animation:none}}

/* (2) Footer: Wortzeichen ganz groß zuerst, darunter Zeile mit Marke und Slogan, unter dem dünnen Strich mittig Impressum, Datenschutz, Cookie, Animationen, dann die Fußzeile */
footer{display:flex;flex-direction:column}
footer .footer-wordmark{order:1;max-width:1360px;width:100%;margin:0 auto clamp(20px,3vw,40px);font-size:clamp(46px,16.2vw,240px);line-height:1.02;letter-spacing:-.07em;padding-bottom:.06em}
footer .footer-top{order:2;width:100%;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding-bottom:clamp(24px,3vw,40px)}
footer .footer-top .brand-logo{height:34px;width:auto}
footer .footer-bottom{order:3;width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
footer .footer-bottom .footer-links{justify-content:center;max-width:none;gap:4px 28px;font-size:13px}
footer .footer-bottom .footer-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 28px;font-size:12px;color:var(--muted)}
footer .footer-bottom .footer-meta>a{display:inline-flex;align-items:center;min-height:44px;padding-block:7px}
@media (max-width:720px){
  footer .footer-wordmark{font-size:15.6vw;margin-bottom:22px}
  footer .footer-top{gap:12px}
  footer .footer-bottom .footer-links{gap:2px 20px;font-size:12px}
  footer .footer-bottom .footer-meta{font-size:11px;gap:2px 18px}
}

/* Handy-Szene "Eine Seite. Von oben bis unten." (Lucas, 28.10.2026, iPhone-Screenshots): kein Kippen, voller Rahmen in jeder Fensterhöhe, Überschrift unter der Kopfleiste */
@media (max-width:720px){
  .js .showcase-pin{padding-block:116px 20px}
  .phone{transform:none;width:clamp(120px,calc((100svh - 372px) * .462),230px);max-width:54vw}
}
/* kurze Fenster (iPhone mit Safari-Leisten): Dachzeile und Hinweiszeile entfallen, damit der Rahmen ganz ins Bild passt */
@media (max-width:720px) and (max-height:760px){.showcase-copy .eyebrow,.showcase-copy .live-hinweis{display:none}.js .showcase-pin{padding-block:104px 16px}}