/* Responsive safeguards across viewport changes. */
#globalCanvas {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw;
}

html {
  -moz-text-size-adjust: 100%;
}

.nav,
.nav-drop-menu,
.hero-social,
.hero-video-center-btn,
.rs-modal-overlay,
.holo-card {
  -webkit-backdrop-filter: blur(12px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav,
  .nav-drop-menu,
  .hero-social,
  .rs-modal-overlay,
  .holo-card {
    background-color: rgba(6, 14, 30, .96) !important;
  }
}

/* Performance layer: keep the holographic look, but avoid animating every CSS property. */
.btn,
.nav-cta,
.nav-drop-item,
.nav-drop-icon,
.exp-row,
.restrict-card,
.dash-footer-cta,
.tl-dot,
.about-detail,
.ac-badge,
.ac-tip,
.about-value,
.hex,
.wiz-opt,
.wiz-radio,
.wiz-btn,
.sm-btn,
.rs-modal-close,
.rs-modal-check input[type=checkbox],
.bk-reason,
.bk-fullscreen a,
.st-opt,
.st-btn-back,
.st-btn-next,
.st-result-pdf,
.st-result-cta,
.st-start-btn {
  transition-property: transform, opacity, color, background, background-color, border-color, box-shadow, filter !important;
}

@supports (content-visibility: auto) {
  main > section.reveal:not(:first-of-type),
  .proc-sec,
  .tm-sec,
  .about-sec,
  .check-sec,
  .faq-sec {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}

.ticker-wrap {
  overflow: hidden;
  min-height: 36px;
  position: relative;
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--brd);
  display: flex;
  align-items: center;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ticker {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  gap: 0;
  animation: tickScroll var(--ticker-duration, 68s) linear infinite;
  white-space: nowrap;
  padding: 6px 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.ticker:hover,
.ticker:focus-within {
  animation-play-state: paused;
}

.ticker-group {
  display: flex;
  align-items: center;
  gap: 48px;
  flex: 0 0 auto;
  padding-right: 48px;
}

.ticker span {
  font-size: 13px;
  font-weight: 600;
  color: #aebbd0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.35;
}

.process-assurance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: min(100%, 620px);
  margin: 16px auto 0;
  padding: 10px 18px;
  border: 1px solid rgba(56, 189, 248, .36);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(6, 182, 212, .09));
  color: #eaf4ff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
  box-shadow: 0 10px 34px rgba(6, 182, 212, .08), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.process-assurance::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22d3ee;
  box-shadow: 0 0 14px rgba(34, 211, 238, .72);
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .process-assurance {
    display: flex;
    width: 100%;
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 13px;
    text-align: center;
    overflow-wrap: anywhere;
  }
}

.rs-modal-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
}

.rs-modal-check input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(59, 130, 246, .5);
  background: rgba(6, 14, 30, .8);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
}

.rs-modal-check input[type=checkbox]:checked {
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18), 0 0 12px rgba(37, 99, 235, .3);
}

.rs-modal-check input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 7px;
  height: 11px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.rs-modal-check-label {
  font-size: 13.5px;
  color: var(--t3);
  line-height: 1.5;
}

.rs-modal-btn-p:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

@-moz-document url-prefix() {
  .gt,
  .slbl,
  .slider-val {
    color: transparent;
  }

  input[type="range"] {
    height: 6px;
    background: transparent;
  }

  input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(59, 130, 246, .15), rgba(6, 182, 212, .15));
  }

  input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: 3px solid #0d1a2e;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 20px rgba(37, 99, 235, .45);
  }
}

@media (max-width: 1023px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body * {
    min-width: 0;
  }

  img,
  svg,
  video,
  iframe {
    max-width: 100%;
  }

  .container,
  .hero-c,
  .legal-content,
  .kontakt-sec,
  .kontakt-wrap,
  .bk-module,
  .prose-sec {
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
  }

  .nav-in,
  .nav .container {
    min-width: 0;
  }

  .nav-in {
    height: 72px;
    gap: 12px;
  }

  .nav-logo {
    min-width: 0;
    max-width: calc(100% - 56px);
  }

  .nav-logo img,
  .f-logo img {
    max-width: min(70vw, 220px) !important;
    height: auto !important;
  }

  .mbtn {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    padding: 0 !important;
  }

  .mmenu {
    max-height: calc(100svh - 72px);
    overflow-y: auto;
    padding: 14px 20px 20px !important;
  }

  .mmenu a {
    line-height: 1.35;
    padding: 10px 0 !important;
  }

  .nav-lk {
    gap: 16px;
  }

  .hero {
    min-height: auto !important;
    align-items: flex-start;
    padding-top: 72px !important;
  }

  .hero-c {
    padding: clamp(28px, 7vw, 52px) clamp(16px, 5vw, 32px) !important;
  }

  .hero-split,
  .about-grid,
  .fk-split,
  .dash-panels,
  .prose-media,
  .kontakt-wrap,
  .lm-wrap {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 6vw, 32px) !important;
  }

  .hero-text,
  .hero p.sub,
  .hero .hero-hook {
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(25px, 7vw, 38px) !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .hero p.sub,
  .hero .hero-hook,
  .legal-hero .subtitle,
  .kontakt-intro p {
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.65 !important;
    overflow-wrap: break-word;
  }

  .hero-badge {
    max-width: 100%;
    white-space: normal;
    justify-content: center;
    line-height: 1.35;
    padding: 8px 14px !important;
  }

  .hero-btns,
  .st-result-actions,
  .lm-form {
    width: 100%;
    justify-content: center;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .nav-cta,
  .kf-submit,
  .lm-form button,
  .st-btn,
  .rs-modal-btn-p {
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  .rs-modal-overlay {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: max(12px, env(safe-area-inset-top)) clamp(12px, 4vw, 20px) max(12px, env(safe-area-inset-bottom)) !important;
  }

  .rs-modal {
    width: min(100%, 500px) !important;
    max-height: calc(100svh - 24px) !important;
    overflow-y: auto !important;
    padding: clamp(20px, 5vw, 32px) clamp(18px, 5vw, 32px) clamp(18px, 5vw, 28px) !important;
    -webkit-overflow-scrolling: touch;
  }

  .rs-modal-logo {
    margin-bottom: clamp(14px, 4vw, 22px) !important;
  }

  .rs-modal-logo img {
    max-width: min(56vw, 152px) !important;
    height: auto !important;
  }

  .rs-modal h2 {
    font-size: clamp(18px, 5vw, 21px) !important;
    line-height: 1.25 !important;
  }

  .rs-modal p {
    font-size: clamp(13px, 3.8vw, 14.5px) !important;
    line-height: 1.62 !important;
  }

  .rs-modal-divider {
    margin: clamp(16px, 4vw, 24px) 0 !important;
  }

  .hero-video {
    width: 100%;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    max-height: min(260px, 54vw) !important;
    margin-top: 0 !important;
  }

  .hero-video-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-video-label {
    max-width: calc(100% - 24px);
    white-space: normal;
    line-height: 1.25;
  }

  .ticker-wrap {
    width: 100%;
    max-width: 100% !important;
    height: 36px !important;
    min-height: 36px;
    margin-top: clamp(22px, 6vw, 32px) !important;
    overflow: hidden;
    contain: paint;
  }

  .ticker {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    width: max-content;
    min-width: max-content !important;
    gap: 0 !important;
    padding: 7px 0 !important;
    white-space: nowrap;
    will-change: transform;
  }

  .ticker-group {
    gap: clamp(28px, 9vw, 42px) !important;
    padding-right: clamp(28px, 9vw, 42px) !important;
  }

  .ticker span {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    font-size: clamp(11.5px, 3.4vw, 13px) !important;
    line-height: 1.25 !important;
    white-space: nowrap;
  }

  .ticker .dot {
    flex: 0 0 6px !important;
  }

  .spad {
    padding: clamp(42px, 10vw, 64px) clamp(16px, 5vw, 32px) !important;
  }

  .stit {
    font-size: clamp(23px, 6.2vw, 36px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .card,
  .compare-card,
  .tm-card,
  .faq-i,
  .kontakt-form,
  .bk-shell,
  .st-frame,
  .nis2-box,
  .lm-wrap,
  .slider-wrap,
  .savings,
  .info-card,
  .tech-card,
  .link-card,
  .contact-box,
  .highlight,
  .warning {
    max-width: 100%;
    padding: clamp(18px, 5vw, 28px) !important;
  }

  .compare-grid,
  .pp-grid,
  .tm-grid,
  .g4,
  .g3,
  .g3-2,
  .g2,
  .cov-grid,
  .bk-reasons,
  .bk-trust-strip {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 100% !important;
  }

  .fk-impact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .about-details {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ac-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
    gap: 8px !important;
  }

  .ac-badge,
  .legal-ref,
  .cc-feat,
  .fk-item,
  .feed-text,
  .dash-footer-txt,
  .st-opt,
  .bk-trust-strip > div,
  .bk-outcomes li {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .ac-badge {
    display: block;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  .ac-tip {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: 20svh !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
    transform: scale(.96) !important;
  }

  .ac-badge:hover .ac-tip {
    transform: scale(1) !important;
  }

  .about-certs,
  .about-photo {
    max-width: 100%;
    overflow: hidden;
  }

  .about-certs-title,
  .about-certs-count,
  .about-detail-label,
  .about-detail-val {
    overflow-wrap: anywhere;
  }

  .hc-item {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .hc-item span {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .holo-scene {
    width: 100% !important;
    height: auto !important;
    max-width: min(76vmin, calc(100vw - 32px)) !important;
    max-height: min(76vmin, calc(100vw - 32px)) !important;
    aspect-ratio: 1 / 1;
    margin-left: auto !important;
    margin-right: auto !important;
    transform-origin: center top;
  }

  .holo-canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .dash-frame {
    max-width: 100%;
    overflow: hidden;
  }

  .dash-header,
  .dash-trust,
  .dash-metrics,
  .dash-panels,
  .dash-footer {
    padding-left: clamp(12px, 4vw, 20px) !important;
    padding-right: clamp(12px, 4vw, 20px) !important;
  }

  .dash-header,
  .dash-footer,
  .gauge-wrap {
    align-items: flex-start;
  }

  .dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dm-card {
    padding: 14px 12px !important;
  }

  .dm-val {
    font-size: clamp(22px, 8vw, 34px) !important;
  }

  .dp-h,
  .feed-body,
  .staff-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .wizard-frame,
  .st-frame,
  .bk-shell,
  .bk-shell.bk-loaded,
  .wz-wrap {
    max-width: 100% !important;
  }

  .wizard-body,
  .st-body,
  #wzBody {
    padding: clamp(20px, 6vw, 28px) clamp(16px, 5vw, 24px) !important;
  }

  #wzBody,
  .wz-step,
  .wz-options,
  .wz-option,
  .wz-option span:last-child,
  .comp-text {
    max-width: 100%;
    min-width: 0;
  }

  .wz-option {
    align-items: flex-start;
    overflow-wrap: break-word;
  }

  .wz-option span:last-child,
  .wz-question,
  .comp-text h3,
  .comp-text p {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .wizard-footer,
  .st-footer,
  .wz-nav {
    gap: 12px;
    flex-wrap: wrap;
  }

  .wiz-btn,
  .st-btn,
  .wz-btn {
    flex: 1 1 140px;
  }

  #wzBody {
    overflow: hidden;
  }

  .lm-form {
    flex-direction: column;
  }

  .lm-form input,
  .lm-form button,
  .kf-row input,
  .kf-row select,
  .kf-row textarea {
    width: 100%;
    min-width: 0 !important;
    font-size: 16px;
  }

  .legal-hero {
    padding: 104px clamp(16px, 5vw, 24px) 36px !important;
  }

  .legal-content {
    padding: 0 clamp(16px, 5vw, 24px) 56px !important;
  }

  .legal-section h2,
  .legal-section h3,
  .legal-section h4,
  .legal-section p,
  .legal-section li,
  .link-card a,
  .contact-box a,
  .f-contact-item a,
  .f-sub,
  .f-copy {
    overflow-wrap: anywhere;
  }

  footer {
    padding: 44px clamp(16px, 5vw, 24px) 32px !important;
  }

  .f-contact {
    flex-direction: column;
    align-items: center;
    gap: 16px !important;
  }

  .f-contact-item {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .f-contact-item a {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  .f-lk {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 22px !important;
  }

  .sm-row {
    gap: 10px;
  }
}

@media (max-width: 820px) {
  .nav-lk {
    display: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1100px) {
  .ticker-wrap {
    height: 32px !important;
    min-height: 32px;
  }
}

@media (max-width: 430px) {
  .container,
  .hero-c,
  .legal-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
  }

  .hero-btns .btn,
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-badge {
    font-size: 12.5px !important;
  }

  .trust {
    gap: 8px !important;
  }

  .trust span {
    font-size: 10.5px !important;
    padding: 5px 8px !important;
  }

  .ticker-wrap {
    height: 34px !important;
    min-height: 34px;
  }

  .ticker {
    gap: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .ticker-group {
    gap: 24px !important;
    padding-right: 24px !important;
  }

  .ticker span {
    font-size: 11.5px !important;
  }

  .fk-impact,
  .dash-metrics {
    grid-template-columns: 1fr !important;
  }

  .hc-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-i {
    padding: 16px !important;
  }

  .faq-h h3,
  .faq-a p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .about-portrait-wrap {
    width: min(220px, 72vw) !important;
    height: min(220px, 72vw) !important;
  }

  .bk-steps {
    padding: 20px 16px !important;
  }

  /* ─────────────────────────────────────────────────────────
     Sequenz-Glow bleibt erhalten (Buttons 1 → 2 → 3 leuchten
     nacheinander auf), aber OHNE scale/filter-Pulse — der
     wirkte in der 1-Spalten-Anordnung auf Mobile als Vibration.
     Dafür eine eigene mobile Keyframe ohne transform/filter
     (Definition außerhalb des @media-Blocks weiter unten).
     ───────────────────────────────────────────────────────── */
  .bk-steps .bk-step:nth-child(1) .bk-step-num {
    animation: bkStepFlowMobile 3s ease-in-out infinite 0s !important;
    transform: none !important;
    filter: none !important;
  }

  .bk-steps .bk-step:nth-child(3) .bk-step-num {
    animation: bkStepFlowMobile 3s ease-in-out infinite 1s !important;
    transform: none !important;
    filter: none !important;
  }

  .bk-steps .bk-step:nth-child(5) .bk-step-num {
    animation: bkStepFlowMobile 3s ease-in-out infinite 2s !important;
    transform: none !important;
    filter: none !important;
  }
  /* Pfeile (bkArrowFlow) ändern nur color/text-shadow — keine Vibration,
     daher unverändert weiterlaufen lassen. */

  .bk-ph {
    padding: 32px 16px !important;
  }

  .wz-wrap {
    padding: 22px 16px !important;
  }

  #wzBody {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mobile-Variante der Step-Sequenz-Animation: identische Glow-Phasen wie
   bkStepFlow (in index.html definiert), aber ohne scale/filter — kein
   wahrnehmbares Vibrieren in der 1-Spalten-Anordnung auf Mobile. */
@keyframes bkStepFlowMobile {
  0%, 75%, 100% {
    box-shadow:
      0 0 14px rgba(37, 99, 235, .28),
      0 4px 12px rgba(0, 0, 0, .25);
  }
  15%, 33% {
    box-shadow:
      0 0 24px rgba(59, 130, 246, .7),
      0 0 48px rgba(6, 182, 212, .38),
      0 0 80px rgba(6, 182, 212, .15),
      0 4px 12px rgba(0, 0, 0, .3);
  }
}

@media (max-width: 360px) {
  .container,
  .hero-c,
  .legal-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero h1 {
    font-size: 24px !important;
  }

  .stit {
    font-size: 22px !important;
  }

  .hero-video-center-btn {
    width: 56px !important;
    height: 56px !important;
  }

  .ticker {
    gap: 0 !important;
  }

  .ticker-group {
    gap: 20px !important;
    padding-right: 20px !important;
  }

  .ticker span {
    font-size: 11px !important;
  }

  .slider-val {
    font-size: 34px !important;
  }

  .cc-price-val,
  .savings-amount .sav-num {
    font-size: 30px !important;
  }

  .err-code {
    font-size: 6.4rem !important;
  }

  .ac-badge {
    font-size: 10px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .comp-item {
    gap: 12px !important;
  }

  .comp-check {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Mobile-first corrections for iOS Safari and other rendering engines. */
.rs-modal {
  display: flex;
  flex-direction: column;
}

.rs-modal-copy {
  min-height: 0;
}

.rs-modal-actions {
  flex: 0 0 auto;
}

@supports (height: 100dvh) {
  @media (max-width: 1023px) {
    .mmenu {
      max-height: calc(100dvh - 72px) !important;
    }

    .rs-modal {
      max-height: calc(100dvh - 24px) !important;
    }
  }
}

@supports not (height: 100svh) {
  @media (max-width: 1023px) {
    .mmenu {
      max-height: calc(100vh - 72px) !important;
    }

    .rs-modal {
      max-height: calc(100vh - 24px) !important;
    }
  }
}

@media (max-width: 560px) {
  .rs-modal-overlay {
    padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)) !important;
  }

  .rs-modal {
    border-radius: 18px !important;
    padding: 16px 16px 14px !important;
    max-height: calc(100dvh - 18px) !important;
  }

  .rs-modal-logo {
    margin-bottom: 9px !important;
  }

  .rs-modal-logo img {
    max-width: 132px !important;
    height: 28px !important;
  }

  .rs-modal-badge {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    letter-spacing: .05em !important;
    padding: 6px 11px !important;
    margin-bottom: 10px !important;
  }

  .rs-modal h2 {
    font-size: 16px !important;
    line-height: 1.18 !important;
    margin-bottom: 8px !important;
  }

  .rs-modal-copy {
    max-height: min(43dvh, 360px) !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  .rs-modal p {
    font-size: 12.35px !important;
    line-height: 1.48 !important;
  }

  .rs-modal-divider {
    margin: 10px 0 !important;
  }

  .rs-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-top: 2px;
    background: linear-gradient(180deg, rgba(8, 15, 30, .84), #080f1e 45%) !important;
  }

  .rs-modal-check {
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .rs-modal-check input[type=checkbox] {
    width: 20px !important;
    height: 20px !important;
    margin-top: 0 !important;
  }

  .rs-modal-check input[type=checkbox]:checked::after {
    left: 5px !important;
    top: 2px !important;
  }

  .rs-modal-check-label {
    font-size: 12.4px !important;
    line-height: 1.35 !important;
  }

  .rs-modal-btn-p {
    min-height: 42px !important;
    padding: 11px 14px !important;
    font-size: 13.5px !important;
  }

  .rs-modal-micro {
    display: none !important;
  }
}

@media (max-width: 560px) and (min-height: 740px) {
  .rs-modal-copy {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  .rs-modal {
    justify-content: center !important;
  }
}

@media (max-width: 560px) and (max-height: 720px) {
  .rs-modal-copy {
    max-height: 34dvh !important;
  }

  .rs-modal-logo {
    display: none !important;
  }
}

@media (max-width: 700px) {
  .leist-sec {
    overflow: visible !important;
  }

  .holo-scene {
    width: min(100%, 520px) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 32px auto 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    position: relative !important;
    isolation: isolate;
    overflow: visible !important;
    transform: none !important;
  }

  /* Mittiger Holo-Flow-Effekt mobile entfernt – ersetzt durch Scroll-Linked Glow (siehe --glow Custom Property unten) */

  .holo-shield {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    grid-column: 1 / -1;
    justify-self: center;
    width: 92px !important;
    height: 92px !important;
    margin: 0 auto 6px !important;
    z-index: 2;
  }

  .holo-ring,
  .holo-canvas,
  .holo-particle {
    display: none !important;
  }

  .holo-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    /* --glow (0..1) wird in index.html per requestAnimationFrame aus der Scroll-Position berechnet
       und live als Custom Property auf die Card geschrieben. */
    --glow: 0;
    transform: translateY(calc(var(--glow) * -4px)) !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 186px;
    padding: 14px 12px !important;
    border-radius: 12px !important;
    justify-content: flex-start !important;
    /* Kein transition auf transform/box-shadow/border — die Werte werden direkt aus der
       Scroll-Position interpoliert, transitions würden den Effekt verzögert wirken lassen. */
    transition: none !important;
    z-index: 1;
    border-color: rgba(255, 255, 255, calc(.06 + var(--glow) * .50)) !important;
    background: rgba(59, 130, 246, calc(var(--glow) * .06)) !important;
    box-shadow:
      0 calc(var(--glow) * 10px) calc(8px + var(--glow) * 22px) rgba(37, 99, 235, calc(var(--glow) * .28)),
      0 0 calc(var(--glow) * 32px) rgba(56, 189, 248, calc(var(--glow) * .35)),
      0 0 0 calc(var(--glow) * 1px) rgba(56, 189, 248, calc(var(--glow) * .35)) inset !important;
  }

  .holo-card[data-service="09"] {
    /* Card spannt die volle Zeile, hat aber die Breite einer einzelnen Spalte
       und sitzt zentriert — gleiche Größe wie die anderen 8 Cards.
       Spaltenbreite = (100% − gap 10px) / 2 = 50% − 5px. */
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 5px) !important;
  }

  .holo-card.landed:hover {
    transform: translateY(calc(-2px + var(--glow) * -4px)) !important;
  }

  .holo-icon {
    width: 34px !important;
    height: 34px !important;
    margin-bottom: 10px !important;
  }

  .holo-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .holo-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    overflow-wrap: anywhere;
  }

  .holo-desc {
    display: block !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 360px) {
  .holo-scene {
    gap: 8px !important;
  }

  .holo-card {
    min-height: 174px;
    padding: 12px 10px !important;
  }

  .holo-card[data-service="09"] {
    /* Bei Gap 8px → eine Spalte = 50% − 4px */
    width: calc(50% - 4px) !important;
  }

  .holo-title {
    font-size: 12.5px !important;
  }

  .holo-desc {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.36 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PER-CARD SCROLL-LINKED GLOW (Mobile)
   --glow wird live (per rAF) aus der Scroll-Position berechnet
   und auf jede .holo-card geschrieben. Die visuellen Werte
   (border, box-shadow, transform, background) sitzen oben im
   .holo-card-Block und nutzen calc(var(--glow)).
   ══════════════════════════════════════════════════════════ */
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .holo-card {
    --glow: 0 !important;
    transform: none !important;
  }
}

.mobile-nav-cta {
  display: none;
}

@media (max-width: 768px) {
  .nav-in {
    gap: 10px !important;
    min-width: 0;
  }

  .nav-logo {
    margin-right: 0 !important;
    min-width: 0;
  }

  .nav-logo img {
    max-width: min(44vw, 168px) !important;
    height: auto !important;
  }

  .mobile-nav-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-left: auto;
    margin-right: 6px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, .26);
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
    box-shadow: 0 10px 26px rgba(37, 99, 235, .28), inset 0 1px 0 rgba(255,255,255,.18);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0;
  }

  .mbtn {
    flex: 0 0 auto;
  }
}

@media (max-width: 360px) {
  .mobile-nav-cta {
    min-height: 36px;
    padding: 0 9px;
    font-size: 11px;
  }

  .nav-logo img {
    max-width: 42vw !important;
  }
}

/* Mobile conversion compression: keep the message sharp, reduce scroll debt. */
@media (max-width: 700px) {
  #globalCanvas {
    display: none !important;
  }

  .spad {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .hero-c {
    padding-top: 28px !important;
    padding-bottom: 30px !important;
  }

  .hero-video {
    max-height: 205px !important;
    margin-top: 0 !important;
  }

  .dash-sec {
    display: none !important;
  }

  .mmenu a[href="#dashboard"] {
    display: none !important;
  }

  .compare-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 24px !important;
  }

  .compare-card.winner {
    border-color: rgba(59, 130, 246, .34) !important;
    box-shadow: 0 14px 44px rgba(37, 99, 235, .14) !important;
  }

  .savings {
    margin-top: 14px !important;
    padding: 16px !important;
  }

  .dash-sec > .container > p:not(.slbl) {
    margin-bottom: 22px !important;
  }

  .dash-frame {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .dm {
    min-height: 116px !important;
    padding: 15px 12px !important;
  }

  .dm-label,
  .dm-trend {
    line-height: 1.35 !important;
  }

  .dash-footer {
    margin-top: 12px !important;
    padding: 14px 0 0 !important;
    display: block !important;
    text-align: center !important;
  }

  .dash-footer-txt {
    margin-bottom: 10px !important;
  }

  .fk-split {
    gap: 14px !important;
  }

  .fk-col {
    padding: 16px !important;
  }

  .fk-impact {
    margin-top: 18px !important;
  }

  .about-grid {
    gap: 22px !important;
  }

  .bk-shell {
    padding: 18px !important;
  }

  .bk-ph {
    padding: 24px 14px !important;
  }

  .bk-ph-icon {
    display: none !important;
  }

  .bk-ph h3 {
    font-size: 16px !important;
  }

  .bk-ph p {
    font-size: 12.8px !important;
    margin-bottom: 18px !important;
  }
}

.savings-mobile-asp {
  display: none;
}

.mobile-compare-toggle {
  display: none;
}

/* Desktop Kostenvergleich: premium savings card matching the mobile visual language. */
@media (min-width: 901px) {
  html body #kosten .savings {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "top top"
      "amount amount"
      "per per"
      "yearly staff"
      "asp asp" !important;
    gap: 0 22px !important;
    width: min(100%, 980px) !important;
    margin: 18px auto 58px !important;
    padding: 42px 46px 36px !important;
    border: 1px solid rgba(125, 211, 252, .28) !important;
    border-radius: 30px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(14, 165, 233, .15), transparent 38%),
      linear-gradient(180deg, rgba(15, 34, 68, .94), rgba(4, 13, 29, .97)) !important;
    box-shadow:
      0 24px 70px rgba(0, 0, 0, .42),
      inset 0 1px 0 rgba(255, 255, 255, .06),
      0 0 46px rgba(6, 182, 212, .08) !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  html body #kosten .savings::before {
    content: "" !important;
    position: absolute !important;
    inset: 16px !important;
    padding: 0 !important;
    border: 1px solid rgba(148, 163, 184, .13) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)) !important;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: none !important;
  }

  html body #kosten .savings > * {
    position: relative;
    z-index: 1;
  }

  html body #kosten .savings-top {
    grid-area: top;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 0 36px !important;
  }

  html body #kosten .savings-top::before {
    content: "" !important;
    width: 78px !important;
    height: 78px !important;
    flex: 0 0 78px !important;
    margin-right: -38px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(45, 212, 191, .54) !important;
    background-color: rgba(8, 32, 58, .94) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='42'%20height='42'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2345f4e6'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15.5%208.5h.01'/%3E%3Cpath%20d='M5%2011.5c0-3%202.7-5.5%206.4-5.5h3.1c2.2%200%204.1%201.1%205.1%202.8H22v4h-2.1c-.4%201.1-1.2%202-2.1%202.7V19h-4v-2h-4v2h-4v-3.1A6%206%200%200%201%205%2011.5Z'/%3E%3Cpath%20d='M8.2%206.7A3.4%203.4%200%200%201%2011.3%204'/%3E%3Ccircle%20cx='14'%20cy='5'%20r='2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 42px 42px !important;
    box-shadow: 0 0 28px rgba(45, 212, 191, .18), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    z-index: 2;
  }

  html body #kosten .savings-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 66px !important;
    min-width: min(56vw, 430px) !important;
    padding: 0 38px 0 74px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(45, 212, 191, .44) !important;
    background: rgba(8, 32, 58, .72) !important;
    color: #67fff2 !important;
    text-transform: uppercase !important;
    letter-spacing: .18em !important;
    font-size: clamp(20px, 1.8vw, 30px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: 0 0 18px rgba(45, 212, 191, .35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  }

  html body #kosten .savings-amount {
    grid-area: amount;
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: clamp(34px, 3.4vw, 58px) !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html body #kosten .savings-amount .sav-num {
    display: block !important;
    margin: 18px auto 10px !important;
    color: #45e6cf !important;
    -webkit-text-fill-color: #45e6cf !important;
    font-size: clamp(92px, 10vw, 164px) !important;
    font-weight: 950 !important;
    line-height: .86 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 34px rgba(45, 212, 191, .18) !important;
    white-space: nowrap !important;
  }

  html body #kosten .savings-per {
    grid-area: per;
    margin: 12px 0 30px !important;
    color: rgba(148, 163, 184, .72) !important;
    font-size: clamp(17px, 1.5vw, 23px) !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
  }

  html body #kosten .savings-divider {
    display: none !important;
  }

  html body #kosten .savings-yearly,
  html body #kosten .savings-label {
    min-height: 138px !important;
    margin: 0 !important;
    padding: 22px 28px !important;
    background: linear-gradient(180deg, rgba(14, 63, 105, .38), rgba(8, 32, 58, .42)) !important;
    color: rgba(226, 232, 240, .92) !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 22px !important;
    text-align: left !important;
    line-height: 1.25 !important;
    min-width: 0 !important;
  }

  html body #kosten .savings-yearly {
    grid-area: yearly;
    border-radius: 22px 0 0 22px !important;
    border: 1px solid rgba(125, 211, 252, .14) !important;
    border-right: 1px solid rgba(125, 211, 252, .2) !important;
  }

  html body #kosten .savings-label {
    grid-area: staff;
    border-radius: 0 22px 22px 0 !important;
    border: 1px solid rgba(125, 211, 252, .14) !important;
    border-left: 0 !important;
    font-size: clamp(19px, 1.5vw, 25px) !important;
    font-weight: 760 !important;
  }

  html body #kosten .savings-label .sav-staff-copy {
    display: block !important;
    min-width: 0 !important;
    color: rgba(226, 232, 240, .92) !important;
    -webkit-text-fill-color: rgba(226, 232, 240, .92) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    white-space: normal !important;
  }

  html body #kosten .savings-yearly::before,
  html body #kosten .savings-label::before,
  html body #kosten .savings-mobile-asp::before {
    content: "" !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(45, 212, 191, .32) !important;
    background-color: rgba(8, 32, 58, .68) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 34px 34px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }

  html body #kosten .savings-yearly::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='34'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2345f4e6'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='5'%20width='16'%20height='15'%20rx='2'/%3E%3Cpath%20d='M8%203v4M16%203v4M4%2010h16M9%2014h.01M13%2014h.01M9%2017h.01'/%3E%3C/svg%3E") !important;
  }

  html body #kosten .savings-label::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='34'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2345f4e6'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='9'%20cy='7'%20r='4'/%3E%3Cpath%20d='M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75'/%3E%3C/svg%3E") !important;
  }

  html body #kosten .savings-yearly-val {
    display: block !important;
    color: rgba(226, 232, 240, .92) !important;
    font-size: clamp(19px, 1.5vw, 25px) !important;
    font-weight: 760 !important;
  }

  html body #kosten .savings-yearly-val .sav-yr-num,
  html body #kosten .savings-label .sav-staff-num {
    display: block !important;
    margin: 4px 0 !important;
    color: #45e6cf !important;
    -webkit-text-fill-color: #45e6cf !important;
    font-family: var(--mono);
    font-size: clamp(34px, 3vw, 50px) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body #kosten .savings-mobile-asp {
    grid-area: asp;
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 24px !important;
    margin-top: 26px !important;
    padding: 24px 30px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(45, 212, 191, .54) !important;
    background: linear-gradient(135deg, rgba(6, 182, 212, .16), rgba(45, 212, 191, .08)) !important;
    color: rgba(226, 232, 240, .92) !important;
    font-size: clamp(20px, 1.7vw, 28px) !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    box-shadow: 0 0 32px rgba(45, 212, 191, .12), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }

  html body #kosten .savings-mobile-asp::before {
    width: 76px !important;
    height: 76px !important;
    background-size: 40px 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2345f4e6'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17.5%2017H18a4%204%200%200%200%200-8h-.4A6%206%200%200%200%206.4%207.1A4.5%204.5%200%200%200%206.5%2016H7'/%3E%3Crect%20x='6'%20y='12'%20width='12'%20height='8'%20rx='1.5'/%3E%3Cpath%20d='M8.5%2015h.01M12%2015h3.5M8.5%2017.5h.01M12%2017.5h3.5'/%3E%3C/svg%3E") !important;
  }

  html body #kosten .savings-mobile-asp .sav-asp-copy {
    display: block !important;
    min-width: 0 !important;
    color: rgba(226, 232, 240, .92) !important;
    -webkit-text-fill-color: rgba(226, 232, 240, .92) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 750 !important;
    white-space: normal !important;
  }

  html body #kosten .savings-mobile-asp .sav-asp-copy strong {
    display: inline-block !important;
    margin-right: .18em !important;
    color: #45e6cf !important;
    -webkit-text-fill-color: #45e6cf !important;
    font-family: var(--mono);
    font-size: 1.22em !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }
}

/* Desktop Kostenvergleich: slimmer full-width savings banner. */
@media (min-width: 901px) {
  html body #kosten .savings {
    width: 100% !important;
    max-width: none !important;
    margin: 4px auto 54px !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }

  html body #kosten .savings::before {
    inset: 10px !important;
    border-radius: 20px !important;
  }

  html body #kosten .savings-top {
    margin: 0 !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
  }

  html body #kosten .savings-top::before {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
    margin-right: -28px !important;
    background-size: 31px 31px !important;
  }

  html body #kosten .savings-badge {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 16px 0 46px !important;
    letter-spacing: .14em !important;
    font-size: clamp(13px, 1.15vw, 17px) !important;
  }

  html body #kosten .savings-amount {
    align-self: end !important;
    text-align: left !important;
    font-size: clamp(21px, 2vw, 32px) !important;
    line-height: 1.12 !important;
  }

  html body #kosten .savings-amount .sav-num {
    margin: 8px 0 0 !important;
    font-size: clamp(58px, 5.7vw, 88px) !important;
    line-height: .88 !important;
  }

  html body #kosten .savings-per {
    align-self: start !important;
    margin: 4px 0 0 !important;
    text-align: left !important;
    font-size: clamp(13px, 1.15vw, 16px) !important;
  }

  html body #kosten .savings-yearly,
  html body #kosten .savings-label {
    min-height: 86px !important;
    padding: 14px 16px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 14px !important;
    border-radius: 18px !important;
  }

  html body #kosten .savings-yearly {
    border-right: 1px solid rgba(125, 211, 252, .14) !important;
  }

  html body #kosten .savings-label {
    border-left: 1px solid rgba(125, 211, 252, .14) !important;
    font-size: clamp(14px, 1.15vw, 16px) !important;
  }

  html body #kosten .savings-yearly::before,
  html body #kosten .savings-label::before,
  html body #kosten .savings-mobile-asp::before {
    width: 48px !important;
    height: 48px !important;
    background-size: 25px 25px !important;
  }

  html body #kosten .savings-yearly-val {
    font-size: clamp(14px, 1.15vw, 16px) !important;
  }

  html body #kosten .savings-yearly-val .sav-yr-num,
  html body #kosten .savings-label .sav-staff-num {
    margin: 2px 0 !important;
    font-size: clamp(24px, 2.1vw, 34px) !important;
  }

  html body #kosten .savings-mobile-asp {
    margin-top: 0 !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 14px !important;
    font-size: clamp(14px, 1.2vw, 17px) !important;
  }

  html body #kosten .savings-mobile-asp::before {
    width: 52px !important;
    height: 52px !important;
    background-size: 28px 28px !important;
  }
}

@media (min-width: 1100px) {
  html body #kosten .savings {
    grid-template-columns: minmax(190px, .72fr) minmax(270px, 1.08fr) minmax(180px, .72fr) minmax(220px, .92fr) !important;
    grid-template-areas:
      "top amount yearly asp"
      "top per staff asp" !important;
    gap: 14px 18px !important;
  }

  html body #kosten .savings-mobile-asp {
    align-self: stretch !important;
  }

  html body #kosten .savings-amount,
  html body #kosten .savings-per {
    transform: translateY(40px) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1199px) {
  html body #kosten .savings-yearly,
  html body #kosten .savings-label {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    text-align: center !important;
  }

  html body #kosten .savings-yearly::before,
  html body #kosten .savings-label::before {
    width: 38px !important;
    height: 38px !important;
    background-size: 21px 21px !important;
  }

  html body #kosten .savings-yearly-val,
  html body #kosten .savings-label {
    font-size: 13px !important;
  }

  html body #kosten .savings-yearly-val .sav-yr-num,
  html body #kosten .savings-label .sav-staff-num {
    font-size: 23px !important;
  }
}

@media (min-width: 901px) and (max-width: 1099px) {
  html body #kosten .savings {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
    grid-template-areas:
      "top amount"
      "per per"
      "yearly staff"
      "asp asp" !important;
    gap: 14px 16px !important;
  }

  html body #kosten .savings-per {
    text-align: center !important;
  }
}

/* Booking and certification polish shared by desktop and mobile. */
html body .bk-step-clickable {
  border: 1px solid rgba(96, 165, 250, .2) !important;
  background: linear-gradient(180deg, rgba(59, 130, 246, .105), rgba(14, 165, 233, .045)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px rgba(15, 23, 42, .18) !important;
}

html body .bk-step-clickable .bk-step-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(125, 211, 252, .24) !important;
  background: rgba(37, 99, 235, .18) !important;
  color: #e0f2fe !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

html body .bk-step-clickable:active {
  transform: translateY(1px) !important;
}

.ac-tip-label {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(59, 130, 246, .18);
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

/* Mobile-only retune for lead flow and iPhone/Safari rendering. */
@media (max-width: 900px) {
  html body .nav-in {
    gap: 8px !important;
  }

  html body .nav-logo {
    flex: 0 1 min(40vw, 152px) !important;
    max-width: min(40vw, 152px) !important;
  }

  html body .nav-logo img {
    max-width: 100% !important;
    height: auto !important;
  }

  html body .nav .mobile-nav-cta {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    min-height: 38px !important;
    max-width: 118px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(125, 211, 252, .32) !important;
    border-radius: 999px !important;
    background-color: #2563eb !important;
    background-image: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .3), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    transform: translateZ(0);
  }

  html body .nav .mobile-nav-cta:active {
    transform: translateY(1px) translateZ(0);
  }

  #dashboard,
  #dashboard.dash-sec,
  .dash-sec {
    display: none !important;
  }

  .mmenu a[href="#dashboard"],
  .nav-drop-item[href="#dashboard"] {
    display: none !important;
  }

  .fk-item,
  .fk-stat,
  .stag.fk-stat {
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .fk-stat,
  .stag.fk-stat {
    display: block !important;
  }

  .fk-stat-bar {
    opacity: 1 !important;
  }

  .about-details {
    display: none !important;
  }

  .faq-list .faq-i {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .savings-mobile-asp {
    display: block !important;
    margin-top: 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(45, 212, 191, .18) !important;
    background: rgba(45, 212, 191, .07) !important;
    color: rgba(203, 213, 225, .88) !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .savings-mobile-asp span {
    color: #5eead4 !important;
    font-family: var(--mono);
    font-weight: 900;
  }

  #kosten .compare-card.loser {
    padding: 18px 16px !important;
    border-color: rgba(239, 68, 68, .14) !important;
  }

  #kosten .compare-card.loser .cc-badge {
    margin-bottom: 10px !important;
  }

  #kosten .compare-card.loser .cc-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }

  #kosten .compare-card.loser .cc-sub {
    margin-bottom: 12px !important;
  }

  #kosten .compare-card.loser .cc-price {
    margin-bottom: 12px !important;
    padding: 14px !important;
  }

  #kosten .compare-card.loser:not(.mobile-open) .cc-features,
  #kosten .compare-card.loser:not(.mobile-open) .hidden-costs {
    display: none !important;
  }

  #kosten .compare-card.loser.mobile-open .cc-features {
    display: flex !important;
    margin-top: 14px !important;
  }

  #kosten .compare-card.loser.mobile-open .hidden-costs {
    display: block !important;
  }

  #kosten .mobile-compare-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(248, 113, 113, .24);
    border-radius: 12px;
    background: rgba(239, 68, 68, .08);
    color: #fecaca;
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #kosten .compare-card.loser.mobile-open .mobile-compare-toggle {
    background: rgba(239, 68, 68, .13);
    border-color: rgba(248, 113, 113, .36);
    color: #fff;
  }

  #kosten .compare-card.winner .mobile-compare-toggle {
    display: none !important;
  }

  #leistungen.leist-sec {
    display: flow-root !important;
    contain: layout !important;
    margin-bottom: clamp(96px, 24vw, 150px) !important;
    padding-bottom: clamp(88px, 24vw, 148px) !important;
    overflow: visible !important;
  }

  #leistungen .holo-scene {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(170px, auto) !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin-bottom: clamp(96px, 26vw, 156px) !important;
    padding-bottom: 8px !important;
    transform: none !important;
  }

  #fachkraefte.fk-sec {
    clear: both;
    margin-top: clamp(86px, 24vw, 146px) !important;
    position: relative;
    z-index: 2;
  }

  #leistungen .holo-shield,
  #leistungen .holo-card {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
  }

  #leistungen .holo-card {
    min-height: 170px !important;
  }

  .about-certs {
    padding: 12px 0 0 !important;
  }

  .about-certs-head {
    margin-bottom: 10px !important;
  }

  .ac-grid {
    display: flex !important;
    flex-direction: column;
    gap: 8px !important;
  }

  .ac-badge {
    display: flex !important;
    align-items: center;
    gap: 9px !important;
    width: 100%;
    min-height: 36px;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    background: rgba(59, 130, 246, .055) !important;
    border-color: rgba(59, 130, 246, .14) !important;
    color: rgba(226, 232, 240, .86) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .ac-cat {
    display: none !important;
  }

  .ac-code {
    flex: 0 0 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 7px;
    background: rgba(37, 99, 235, .2);
    border: 1px solid rgba(96, 165, 250, .18);
    color: #93c5fd;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .ac-label {
    display: block;
    color: rgba(226, 232, 240, .9);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .ac-tip {
    display: none !important;
  }
}

@media (max-width: 360px) {
  html body .nav-logo {
    flex-basis: min(38vw, 130px) !important;
    max-width: min(38vw, 130px) !important;
  }

  html body .nav .mobile-nav-cta {
    height: 36px !important;
    min-height: 36px !important;
    max-width: 106px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }
}

/* Final mobile overlap guard: neutralize animated offsets and keep every section in document flow. */
@media (max-width: 900px) {
  html body .rs-modal-overlay {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html body .rs-modal {
    width: min(100%, 560px) !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 24px 18px 18px !important;
    border-radius: 18px !important;
    transform: none !important;
  }

  html body .rs-modal-close {
    top: 18px !important;
    right: 18px !important;
    width: 34px !important;
    height: 34px !important;
    z-index: 5 !important;
    background: rgba(15, 23, 42, .82) !important;
    border-color: rgba(125, 211, 252, .22) !important;
  }

  html body .rs-modal-logo {
    display: none !important;
  }

  html body .rs-modal-badge {
    max-width: calc(100% - 52px) !important;
    margin: 0 52px 14px 0 !important;
    padding: 7px 12px !important;
    white-space: normal !important;
    text-align: left !important;
  }

  html body .rs-modal-copy {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  html body .rs-modal h2 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.22 !important;
    margin-bottom: 12px !important;
  }

  html body .rs-modal p {
    font-size: clamp(13px, 3.75vw, 15px) !important;
    line-height: 1.55 !important;
  }

  html body .rs-modal-actions {
    position: static !important;
    padding-top: 0 !important;
    background: transparent !important;
  }

  html body .rs-modal-check {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
  }

  html body .rs-modal-check input[type=checkbox] {
    width: 24px !important;
    height: 24px !important;
  }

  html body .rs-modal-check-label {
    min-width: 0 !important;
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }

  html body #kosten .compare-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  html body #kosten .compare-card,
  html body #kosten .compare-card.loser,
  html body #kosten .compare-card.winner,
  html body #kosten .compare-card.cc-elevate,
  html body #kosten .compare-card.win-elevate {
    position: relative !important;
    z-index: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html body #kosten .compare-card.winner {
    margin-top: 12px !important;
  }

  html body section[id] {
    scroll-margin-top: 86px !important;
  }

  html body .hero {
    min-height: auto !important;
    overflow: visible !important;
  }

  html body #leistungen.leist-sec {
    display: block !important;
    overflow: visible !important;
    contain: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  html body #leistungen .container {
    display: flow-root !important;
    overflow: visible !important;
  }

  html body #leistungen .holo-scene {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 520px !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 30px auto clamp(112px, 30vw, 180px) !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body #leistungen .holo-card,
  html body #leistungen .holo-card.landed,
  html body #leistungen .holo-card[style] {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 174px !important;
    margin: 0 !important;
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  html body #leistungen .holo-card[data-service="09"] {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    /* gap 12px → eine Card-Spalte = (100% − 12px) / 2 = 50% − 6px */
    width: calc(50% - 6px) !important;
  }

  html body #leistungen .holo-card.landed:hover {
    transform: translateY(calc(var(--glow, 0) * -4px)) !important;
  }

  html body #leistungen .holo-canvas,
  html body #leistungen .holo-ring,
  html body #leistungen .holo-particle {
    display: none !important;
  }

  html body #leistungen::after {
    content: "";
    display: block;
    clear: both;
    height: clamp(96px, 28vw, 170px);
  }

  html body #fachkraefte.fk-sec {
    clear: both !important;
    margin-top: clamp(82px, 24vw, 148px) !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

@media (max-width: 380px) {
  html body #leistungen .holo-scene {
    grid-template-columns: 1fr !important;
    max-width: 310px !important;
    margin-bottom: clamp(86px, 24vw, 128px) !important;
  }

  html body #leistungen .holo-card,
  html body #leistungen .holo-card[data-service="09"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: auto !important;
  }
}

/* Microsoft Bookings embed: sharp desktop sizing, locked and centered on mobile. */
@media (min-width: 821px) {
  html body .bk-module {
    max-width: 1240px !important;
  }

  html body .bk-shell.bk-loaded {
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body .bk-shell.bk-loaded .bk-iframe-wrap {
    height: 1120px !important;
  }

  html body .bk-shell.bk-loaded .bk-iframe-wrap iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    transform-origin: top center !important;
  }
}

@media (min-width: 1200px) {
  html body .bk-shell.bk-loaded {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
  }

  html body .bk-shell.bk-loaded .bk-iframe-wrap {
    height: 1160px !important;
  }

  html body .bk-shell.bk-loaded .bk-iframe-wrap iframe {
    height: 1160px !important;
  }
}

@media (min-width: 1920px) {
  html body .bk-module {
    max-width: 1440px !important;
  }

  html body .bk-shell.bk-loaded {
    width: min(100%, 1260px) !important;
    max-width: 1260px !important;
  }
}

@media (max-width: 600px) {
  html body #kontakt,
  html body #kontakt .container,
  html body .bk-module,
  html body .bk-shell,
  html body .bk-shell.bk-loaded,
  html body .bk-iframe-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body #kontakt .container,
  html body .bk-module,
  html body .bk-shell.bk-loaded {
    overflow-x: hidden !important;
  }

  @supports (overflow: clip) {
    html body #kontakt .container,
    html body .bk-module,
    html body .bk-shell.bk-loaded {
      overflow-x: clip !important;
    }
  }

  html body .bk-shell.bk-loaded {
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: translateZ(0);
  }

  html body .bk-shell.bk-loaded .bk-iframe-wrap {
    position: relative !important;
    overflow: hidden !important;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
    border-radius: 14px !important;
    background: #fff !important;
  }

  html body .bk-shell.bk-loaded .bk-iframe-wrap iframe {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 1450px !important;
    margin: 0 auto !important;
    border: 0 !important;
    transform: none !important;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
  }
}

/* Definitive mobile guard: services must own their full height before the next section starts. */
@media (max-width: 900px) {
  html body #leistungen.leist-sec,
  html body section#leistungen.reveal,
  html body section#leistungen.reveal.vis {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(38px, 10vw, 56px) 0 clamp(34px, 9vw, 54px) !important;
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
  }

  html body #leistungen .container,
  html body #leistungen .container.spad {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
  }

  html body #leistungen .holo-scene,
  html body #leistungen .holo-scene[style] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 12px !important;
    position: relative !important;
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 28px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    contain: none !important;
    transform: none !important;
  }

  html body #leistungen .holo-card,
  html body #leistungen .holo-card.landed,
  html body #leistungen .holo-card[style] {
    position: relative !important;
    display: flex !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    grid-column: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 190px !important;
    max-height: none !important;
    margin: 0 !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* transform muss den scroll-gekoppelten --glow-Lift erlauben */
    transform: translateY(calc(var(--glow, 0) * -4px)) !important;
  }

  html body #leistungen .holo-card[data-service="09"],
  html body #leistungen .holo-card.landed[data-service="09"],
  html body #leistungen .holo-card[style][data-service="09"] {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    /* gap 12px → eine Card-Spalte = (100% − 12px) / 2 = 50% − 6px */
    width: calc(50% - 6px) !important;
  }

  html body #leistungen .holo-card:hover,
  html body #leistungen .holo-card.landed:hover {
    transform: translateY(calc(var(--glow, 0) * -4px)) !important;
  }

  html body #leistungen .holo-canvas,
  html body #leistungen .holo-shield,
  html body #leistungen .holo-ring,
  html body #leistungen .holo-particle {
    display: none !important;
  }

  html body #leistungen::after {
    content: none !important;
    display: none !important;
  }

  html body #fachkraefte.fk-sec,
  html body section#fachkraefte.reveal,
  html body section#fachkraefte.reveal.vis {
    clear: both !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: clamp(34px, 9vw, 56px) !important;
    transform: none !important;
  }
}

@media (max-width: 380px) {
  html body #leistungen .holo-scene,
  html body #leistungen .holo-scene[style] {
    grid-template-columns: 1fr !important;
    max-width: 310px !important;
  }

  html body #leistungen .holo-card,
  html body #leistungen .holo-card[data-service="09"] {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 156px !important;
  }
}

/* Mobile Kostenvergleich: premium savings card. */
@media (max-width: 900px) {
  html body #kosten .savings {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "top top"
      "amount amount"
      "per per"
      "yearly staff"
      "asp asp" !important;
    gap: 0 12px !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 28px auto 34px !important;
    padding: 24px 14px 16px !important;
    border: 1px solid rgba(125, 211, 252, .26) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(180deg, rgba(15, 34, 68, .94), rgba(4, 13, 29, .96)),
      linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(45, 212, 191, .08)) !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 40px rgba(6, 182, 212, .08) !important;
    overflow: hidden !important;
    isolation: isolate;
  }

  html body #kosten .savings::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px !important;
    padding: 0 !important;
    border: 1px solid rgba(148, 163, 184, .12) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)) !important;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: none !important;
  }

  html body #kosten .savings > * {
    position: relative;
    z-index: 1;
  }

  html body #kosten .savings-top {
    grid-area: top;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 0 18px !important;
  }

  html body #kosten .savings-top::before {
    content: "" !important;
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    margin-right: -28px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(45, 212, 191, .5) !important;
    background-color: rgba(8, 32, 58, .92) !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='36'%20height='36'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2345f4e6'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15.5%208.5h.01'/%3E%3Cpath%20d='M5%2011.5c0-3%202.7-5.5%206.4-5.5h3.1c2.2%200%204.1%201.1%205.1%202.8H22v4h-2.1c-.4%201.1-1.2%202-2.1%202.7V19h-4v-2h-4v2h-4v-3.1A6%206%200%200%201%205%2011.5Z'/%3E%3Cpath%20d='M8.2%206.7A3.4%203.4%200%200%201%2011.3%204'/%3E%3Ccircle%20cx='14'%20cy='5'%20r='2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 32px 32px !important;
    box-shadow: 0 0 24px rgba(45, 212, 191, .18), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    z-index: 2;
  }

  html body #kosten .savings-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    min-width: min(78vw, 286px) !important;
    padding: 0 22px 0 52px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(45, 212, 191, .42) !important;
    background: rgba(8, 32, 58, .72) !important;
    color: #67fff2 !important;
    text-transform: uppercase !important;
    letter-spacing: .18em !important;
    font-size: clamp(14px, 3.8vw, 20px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: 0 0 18px rgba(45, 212, 191, .35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  }

  html body #kosten .savings-amount {
    grid-area: amount;
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: clamp(22px, 6.2vw, 32px) !important;
    font-weight: 850 !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  html body #kosten .savings-amount .sav-num {
    display: block !important;
    margin: 12px auto 6px !important;
    color: #45e6cf !important;
    -webkit-text-fill-color: #45e6cf !important;
    font-size: clamp(58px, 17.5vw, 88px) !important;
    font-weight: 950 !important;
    line-height: .86 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 28px rgba(45, 212, 191, .18) !important;
    white-space: nowrap !important;
  }

  html body #kosten .savings-per {
    grid-area: per;
    margin: 8px 0 18px !important;
    color: rgba(148, 163, 184, .72) !important;
    font-size: clamp(13px, 3.7vw, 17px) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  html body #kosten .savings-divider {
    display: none !important;
  }

  html body #kosten .savings-yearly,
  html body #kosten .savings-label {
    min-height: 116px !important;
    margin: 0 !important;
    padding: 12px 8px !important;
    background: rgba(14, 63, 105, .34) !important;
    color: rgba(226, 232, 240, .9) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    line-height: 1.25 !important;
    min-width: 0 !important;
  }

  html body #kosten .savings-yearly {
    grid-area: yearly;
    border-radius: 18px 0 0 18px !important;
    border: 1px solid rgba(125, 211, 252, .12) !important;
    border-right: 1px solid rgba(125, 211, 252, .18) !important;
  }

  html body #kosten .savings-label {
    grid-area: staff;
    border-radius: 0 18px 18px 0 !important;
    border: 1px solid rgba(125, 211, 252, .12) !important;
    border-left: 0 !important;
    font-size: clamp(12px, 3.2vw, 14px) !important;
    font-weight: 700 !important;
    overflow-wrap: normal !important;
  }

  html body #kosten .savings-label .sav-staff-copy {
    display: block !important;
    min-width: 0 !important;
    color: rgba(226, 232, 240, .9) !important;
    -webkit-text-fill-color: rgba(226, 232, 240, .9) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    white-space: normal !important;
  }

  html body #kosten .savings-yearly::before,
  html body #kosten .savings-label::before,
  html body #kosten .savings-mobile-asp::before {
    content: "" !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(45, 212, 191, .32) !important;
    background-color: rgba(8, 32, 58, .68) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 23px 23px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }

  html body #kosten .savings-yearly::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2345f4e6'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='5'%20width='16'%20height='15'%20rx='2'/%3E%3Cpath%20d='M8%203v4M16%203v4M4%2010h16M9%2014h.01M13%2014h.01M9%2017h.01'/%3E%3C/svg%3E") !important;
  }

  html body #kosten .savings-label::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2345f4e6'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='9'%20cy='7'%20r='4'/%3E%3Cpath%20d='M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75'/%3E%3C/svg%3E") !important;
  }

  html body #kosten .savings-yearly-val {
    display: block !important;
    color: rgba(226, 232, 240, .9) !important;
    font-size: clamp(12px, 3.2vw, 14px) !important;
    font-weight: 700 !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  html body #kosten .savings-yearly-val .sav-yr-num,
  html body #kosten .savings-label .sav-staff-num {
    display: block !important;
    margin: 2px 0 !important;
    color: #45e6cf !important;
    -webkit-text-fill-color: #45e6cf !important;
    font-family: var(--mono);
    font-size: clamp(22px, 6vw, 30px) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  html body #kosten .savings-mobile-asp {
    grid-area: asp;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 16px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(45, 212, 191, .54) !important;
    background: linear-gradient(135deg, rgba(6, 182, 212, .16), rgba(45, 212, 191, .08)) !important;
    color: rgba(226, 232, 240, .92) !important;
    font-size: clamp(13px, 3.7vw, 16px) !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    box-shadow: 0 0 28px rgba(45, 212, 191, .12), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }

  html body #kosten .savings-mobile-asp::before {
    width: 52px !important;
    height: 52px !important;
    background-size: 30px 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2345f4e6'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17.5%2017H18a4%204%200%200%200%200-8h-.4A6%206%200%200%200%206.4%207.1A4.5%204.5%200%200%200%206.5%2016H7'/%3E%3Crect%20x='6'%20y='12'%20width='12'%20height='8'%20rx='1.5'/%3E%3Cpath%20d='M8.5%2015h.01M12%2015h3.5M8.5%2017.5h.01M12%2017.5h3.5'/%3E%3C/svg%3E") !important;
  }

  html body #kosten .savings-mobile-asp .sav-asp-copy {
    display: block !important;
    min-width: 0 !important;
    color: rgba(226, 232, 240, .92) !important;
    -webkit-text-fill-color: rgba(226, 232, 240, .92) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 750 !important;
    white-space: normal !important;
  }

  html body #kosten .savings-mobile-asp .sav-asp-copy strong {
    display: inline-block !important;
    margin-right: .18em !important;
    color: #45e6cf !important;
    -webkit-text-fill-color: #45e6cf !important;
    font-family: var(--mono);
    font-size: 1.22em !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  html body #kosten .savings {
    padding: 22px 10px 14px !important;
    border-radius: 20px !important;
    gap: 0 8px !important;
  }

  html body #kosten .savings-top::before {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
    margin-right: -26px !important;
    background-size: 31px 31px !important;
  }

  html body #kosten .savings-badge {
    min-width: min(80vw, 270px) !important;
    min-height: 48px !important;
    padding-left: 50px !important;
    font-size: 14px !important;
  }

  html body #kosten .savings-amount .sav-num {
    font-size: clamp(52px, 17vw, 70px) !important;
  }

  html body #kosten .savings-yearly,
  html body #kosten .savings-label {
    min-height: 116px !important;
    padding: 12px 8px !important;
    text-align: center !important;
  }

  html body #kosten .savings-mobile-asp {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  html body #kosten .savings-mobile-asp::before {
    width: 46px !important;
    height: 46px !important;
    background-size: 27px 27px !important;
  }
}

/* Interactive savings card: gentle elevation, glow tracking and layered motion. */
html body #kosten .savings {
  --savings-card-tilt-x: 0deg;
  --savings-card-tilt-y: 0deg;
  --savings-glow-x: 50%;
  --savings-glow-y: 50%;
  --savings-copy-y: 0px;
  --savings-float-top-x: 0px;
  --savings-float-top-y: 0px;
  --savings-float-main-x: 0px;
  --savings-float-main-y: 0px;
  --savings-float-stat-x: 0px;
  --savings-float-stat-y: 0px;
  --savings-float-asp-x: 0px;
  --savings-float-asp-y: 0px;
  transform: perspective(1200px) rotateX(var(--savings-card-tilt-x)) rotateY(var(--savings-card-tilt-y)) translateY(0) translateZ(0) !important;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, box-shadow, border-color;
  transition:
    transform .34s cubic-bezier(.2, .8, .2, 1),
    border-color .34s ease,
    box-shadow .34s ease,
    filter .34s ease !important;
}

html body #kosten .savings::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at var(--savings-glow-x) var(--savings-glow-y), rgba(69, 230, 207, .24), transparent 33%),
    linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, .08) 47%, transparent 68%) !important;
  opacity: 0;
  pointer-events: none !important;
  z-index: 0;
  transition: opacity .34s ease !important;
}

html body #kosten .savings > * {
  z-index: 2;
}

html body #kosten .savings-top,
html body #kosten .savings-amount,
html body #kosten .savings-per,
html body #kosten .savings-yearly,
html body #kosten .savings-label,
html body #kosten .savings-mobile-asp {
  will-change: transform, filter, box-shadow;
  transition:
    transform .34s cubic-bezier(.2, .8, .2, 1),
    filter .34s ease,
    border-color .34s ease,
    box-shadow .34s ease,
    background .34s ease !important;
}

html body #kosten .savings-top {
  transform: translate3d(var(--savings-float-top-x), var(--savings-float-top-y), 0) !important;
}

html body #kosten .savings-amount,
html body #kosten .savings-per {
  transform: translate3d(var(--savings-float-main-x), calc(var(--savings-copy-y) + var(--savings-float-main-y)), 0) !important;
}

html body #kosten .savings-yearly,
html body #kosten .savings-label {
  transform: translate3d(var(--savings-float-stat-x), var(--savings-float-stat-y), 0) !important;
}

html body #kosten .savings-mobile-asp {
  transform: translate3d(var(--savings-float-asp-x), var(--savings-float-asp-y), 0) !important;
}

html body #kosten .savings .sav-num,
html body #kosten .savings .sav-yr-num,
html body #kosten .savings .sav-staff-num,
html body #kosten .savings-mobile-asp .sav-asp-copy strong {
  transition: filter .34s ease, text-shadow .34s ease, transform .34s ease !important;
}

html body #kosten .cost-note-mark {
  display: inline-block !important;
  margin-left: 2px !important;
  color: #7dd3fc !important;
  -webkit-text-fill-color: #7dd3fc !important;
  font-family: inherit !important;
  font-size: .32em !important;
  font-weight: 850 !important;
  line-height: 0 !important;
  vertical-align: super !important;
  text-shadow: none !important;
}

html body #kosten .savings.savings-interacting,
html body #kosten .savings:hover {
  border-color: rgba(94, 234, 212, .44) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .5),
    0 0 54px rgba(45, 212, 191, .16),
    inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  filter: saturate(1.08);
  transform: perspective(1200px) rotateX(var(--savings-card-tilt-x)) rotateY(var(--savings-card-tilt-y)) translateY(-5px) translateZ(0) !important;
}

html body #kosten .savings.savings-interacting::after,
html body #kosten .savings:hover::after {
  opacity: 1;
}

html body #kosten .savings.savings-interacting .savings-yearly,
html body #kosten .savings.savings-interacting .savings-label,
html body #kosten .savings.savings-interacting .savings-mobile-asp,
html body #kosten .savings-yearly:hover,
html body #kosten .savings-label:hover,
html body #kosten .savings-mobile-asp:hover {
  border-color: rgba(94, 234, 212, .34) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .24),
    0 0 24px rgba(45, 212, 191, .12),
    inset 0 1px 0 rgba(255, 255, 255, .09) !important;
  background: linear-gradient(180deg, rgba(14, 75, 120, .48), rgba(8, 32, 58, .46)) !important;
}

html body #kosten .savings.savings-interacting .sav-num,
html body #kosten .savings.savings-interacting .sav-yr-num,
html body #kosten .savings.savings-interacting .sav-staff-num,
html body #kosten .savings.savings-interacting .savings-mobile-asp .sav-asp-copy strong,
html body #kosten .savings:hover .sav-num,
html body #kosten .savings:hover .sav-yr-num,
html body #kosten .savings:hover .sav-staff-num,
html body #kosten .savings:hover .savings-mobile-asp .sav-asp-copy strong {
  filter: drop-shadow(0 0 12px rgba(69, 230, 207, .28));
}

@media (min-width: 1100px) {
  html body #kosten .savings {
    --savings-copy-y: 40px;
  }
}

/* Kostenvergleich: savings banner about 20% smaller on desktop. */
@media (min-width: 1200px) {
  html body #kosten .savings {
    --savings-copy-y: 32px;
    width: min(80%, 1100px) !important;
    margin: 4px auto 43px !important;
    padding: 19px !important;
    border-radius: 19px !important;
  }

  html body #kosten .savings::before {
    inset: 8px !important;
    border-radius: 16px !important;
  }

  html body #kosten .savings {
    grid-template-columns: minmax(160px, .72fr) minmax(230px, 1.08fr) minmax(154px, .72fr) minmax(188px, .92fr) !important;
    gap: 11px 14px !important;
  }

  html body #kosten .savings-top::before {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    margin-right: -22px !important;
    background-size: 25px 25px !important;
  }

  html body #kosten .savings-badge {
    min-height: 42px !important;
    padding: 0 13px 0 37px !important;
    font-size: clamp(10px, .92vw, 14px) !important;
  }

  html body #kosten .savings-amount {
    font-size: clamp(17px, 1.6vw, 26px) !important;
  }

  html body #kosten .savings-amount .sav-num {
    margin: 6px 0 0 !important;
    font-size: clamp(46px, 4.55vw, 70px) !important;
  }

  html body #kosten .savings-per {
    font-size: clamp(11px, .92vw, 13px) !important;
  }

  html body #kosten .savings-yearly,
  html body #kosten .savings-label {
    min-height: 69px !important;
    padding: 11px 13px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 11px !important;
    border-radius: 14px !important;
  }

  html body #kosten .savings-yearly::before,
  html body #kosten .savings-label::before,
  html body #kosten .savings-mobile-asp::before {
    width: 38px !important;
    height: 38px !important;
    background-size: 20px 20px !important;
  }

  html body #kosten .savings-yearly-val,
  html body #kosten .savings-label {
    font-size: clamp(11px, .92vw, 13px) !important;
  }

  html body #kosten .savings-yearly-val .sav-yr-num,
  html body #kosten .savings-label .sav-staff-num {
    font-size: clamp(19px, 1.68vw, 27px) !important;
  }

  html body #kosten .savings-mobile-asp {
    padding: 13px 14px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 11px !important;
    border-radius: 14px !important;
    font-size: clamp(11px, .96vw, 14px) !important;
  }

  html body #kosten .savings-mobile-asp::before {
    width: 42px !important;
    height: 42px !important;
    background-size: 22px 22px !important;
  }
}

@media (hover: none) {
  html body #kosten .savings:hover:not(.savings-interacting) {
    transform: perspective(1200px) rotateX(var(--savings-card-tilt-x)) rotateY(var(--savings-card-tilt-y)) translateY(0) translateZ(0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #kosten .savings,
  html body #kosten .savings-top,
  html body #kosten .savings-amount,
  html body #kosten .savings-per,
  html body #kosten .savings-yearly,
  html body #kosten .savings-label,
  html body #kosten .savings-mobile-asp,
  html body #kosten .savings .sav-num,
  html body #kosten .savings .sav-yr-num,
  html body #kosten .savings .sav-staff-num,
  html body #kosten .savings-mobile-asp .sav-asp-copy strong {
    transition: none !important;
  }

  html body #kosten .savings {
    transform: none !important;
  }

  html body #kosten .savings::after {
    display: none !important;
  }
}

/* Mobile stability guard: reveal animations must not visually slide sections into
   the following content. The 40px entrance offset caused overlap on iPhone Safari. */
@media (max-width: 900px) {
  html body .reveal,
  html body .reveal.vis,
  html body section.reveal,
  html body section.reveal.vis {
    transform: none !important;
  }
}

/* Onboarding portal integration */
html body .nav-a.nav-main-onboarding {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  color: #dbeafe !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(6, 182, 212, .1));
  border: 1px solid rgba(96, 165, 250, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

html body .nav-a.nav-main-onboarding::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--cyan, #06b6d4);
  box-shadow: 0 0 14px rgba(6, 182, 212, .85);
  flex: 0 0 auto;
}

html body .nav-a.nav-main-onboarding:hover,
html body .nav-a.nav-main-onboarding.active {
  color: #fff !important;
  border-color: rgba(6, 182, 212, .42);
  background: linear-gradient(135deg, rgba(37, 99, 235, .28), rgba(6, 182, 212, .18));
}

html body .nav-drop:focus-within .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

html body .learn-meta {
  position: relative;
  display: block !important;
  padding-right: 30px !important;
}

html body .learn-meta h4 {
  min-width: 0;
  overflow-wrap: normal;
  hyphens: manual;
  padding-right: 20px;
}

html body .learn-meta .dur,
html body .learn-meta > .dur {
  display: inline-flex;
  width: max-content;
  margin-top: 7px;
}

html body .learn-meta .status,
html body .learn-meta > .status {
  position: absolute;
  top: 12px;
  right: 12px;
}

html body .learn-card.locked .status {
  top: auto;
  bottom: 16px;
}

html body .learn-card.locked .learn-meta h4 {
  padding-right: 0;
}

@media (max-width: 900px) {
  html body .nav-a.nav-main-onboarding {
    display: none;
  }

  html body .dashboard-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 520px !important;
    margin-bottom: 22px !important;
  }

  html body .dash-tab {
    min-height: 44px !important;
    padding: 10px 12px !important;
    white-space: normal !important;
  }

  html body .onboard-frame {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  html body .onboard-side {
    display: none !important;
  }

  html body .onboard-main {
    padding: 18px !important;
  }

  html body .onboard-head {
    display: block !important;
  }

  html body .onboard-search {
    width: 100% !important;
    margin-top: 12px !important;
  }

  html body .learn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .onboarding-bridge-grid,
  html body .hero-grid,
  html body .path-grid,
  html body .pain-grid,
  html body .module-grid,
  html body .benefit-grid {
    grid-template-columns: 1fr !important;
  }

  html body .onboarding-bridge {
    padding: 24px !important;
  }

  html body .onboard-frame.onboard-mini {
    min-height: 0 !important;
  }

  html body .btn,
  html body .bridge-link,
  html body .onboard-more {
    min-height: 44px !important;
  }
}

@media (max-width: 520px) {
  html body .slbl {
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: .08em !important;
    padding: 8px 12px !important;
  }

  html body .hero-hook {
    font-size: 18px !important;
  }
}

@media (max-width: 360px) {
  html body .dashboard-tabs {
    grid-template-columns: 1fr !important;
  }

  html body .learn-grid,
  html body .onboard-mini .learn-grid {
    grid-template-columns: 1fr !important;
  }

  html body .onboard-main {
    padding: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .dash-view,
  html body .dash-tab,
  html body .learn-card {
    transition: none !important;
  }
}

html body.service-page .ticker-wrap {
  min-height: 36px;
  height: auto;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: rgba(255, 255, 255, .025);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

html body.service-page .ticker {
  align-items: center;
  width: max-content;
  min-width: max-content;
  animation: tickScroll var(--ticker-duration, 68s) linear infinite;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  padding: 6px 0;
}

html body.service-page .ticker:hover,
html body.service-page .ticker:focus-within {
  animation-play-state: paused;
}

html body.service-page .ticker-group {
  display: flex;
  align-items: center;
  gap: 48px;
  flex: 0 0 auto;
  padding-right: 48px;
}

/* Keep service pages readable before animation JS is active. */
html body.service-page:not(.anim-ready) .reveal,
html body.service-page:not(.anim-ready) .stag,
html body.service-page:not(.anim-ready) .fk-item,
html body.service-page:not(.anim-ready) .fk-stat,
html body.service-page:not(.anim-ready) .dm,
html body.service-page:not(.anim-ready) .dp {
  opacity: 1 !important;
  transform: none !important;
}

/* Keep GPU layer promotion short-lived on interactive savings cards. */
html body #kosten .savings,
html body #kosten .savings-top,
html body #kosten .savings-amount,
html body #kosten .savings-per,
html body #kosten .savings-yearly,
html body #kosten .savings-label,
html body #kosten .savings-mobile-asp {
  will-change: auto !important;
}

html body #kosten .savings.savings-interacting,
html body #kosten .savings:hover {
  will-change: transform !important;
}

html body #kosten .savings.savings-interacting .savings-top,
html body #kosten .savings.savings-interacting .savings-amount,
html body #kosten .savings.savings-interacting .savings-per,
html body #kosten .savings.savings-interacting .savings-yearly,
html body #kosten .savings.savings-interacting .savings-label,
html body #kosten .savings.savings-interacting .savings-mobile-asp,
html body #kosten .savings:hover .savings-top,
html body #kosten .savings:hover .savings-amount,
html body #kosten .savings:hover .savings-per,
html body #kosten .savings:hover .savings-yearly,
html body #kosten .savings:hover .savings-label,
html body #kosten .savings:hover .savings-mobile-asp {
  will-change: transform !important;
}

@media (prefers-reduced-motion: reduce) {
  #globalCanvas,
  #rs-ts-particles {
    display: none !important;
  }

  .ticker,
  .bk-steps .bk-step-num,
  .bk-steps .bk-step-arrow,
  #bookingsLoadBtn {
    animation: none !important;
  }
}

/* ============================================================
   27"/QHD-Skalierung (+20%) — zentral, generiert 2026-05-29.
   Macht ALLES (Text, Abstände, Grafiken) ~10% größer im Band
   2560–3439px (27"/32" QHD). ≥3440px nutzt die bestehende Leiter.
   Reversibel: diesen Block entfernen.
   ============================================================ */
@media (min-width: 2500px) and (max-width: 3439px) {
  body { zoom: 1.20; }
}