:root{
  --abo-card-w: 480px;
  --abo-grid-gap: 24px;
  --abo-card-min-h-desktop: 640px;

  --fs-hero-title: clamp(0.95rem, 0.8rem + 1.4vw, 1.25rem);

  --fs-plan-name: clamp(0.95rem, 0.85rem + 1.8vw, 1.35rem);
  --fs-plan-desc: clamp(0.84rem, 0.8rem + 0.7vw, 0.98rem);

  --fs-price-currency: clamp(0.78rem, 0.7rem + 0.7vw, 1.05rem);
  --fs-price-major: clamp(1.55rem, 1.0rem + 3.8vw, 2.45rem);
  --fs-price-minor: clamp(1.05rem, 0.9rem + 2.2vw, 1.7rem);
  --fs-price-per: clamp(0.72rem, 0.66rem + 0.7vw, 0.84rem);

  --fs-feature: clamp(0.8rem, 0.76rem + 0.7vw, 0.95rem);
  --fs-legal: clamp(0.78rem, 0.72rem + 0.5vw, 0.92rem);
  --fs-footnote: clamp(0.72rem, 0.68rem + 0.5vw, 0.85rem);

  --fs-cta: clamp(0.82rem, 0.78rem + 0.5vw, 1rem);
  --cta-h: clamp(34px, 5.2vh, 44px);

  --card-pad-x: clamp(12px, 2.8vw, 24px);
  --card-pad-y: clamp(12px, 2.8vw, 22px);

  --feature-gap: clamp(7px, 1.8vw, 10px);
  --features-li-m: clamp(6px, 1.6vw, 10px);
  --icon-size: clamp(13px, 3.4vw, 18px);

  --price-gap: clamp(6px, 1.8vw, 10px);

  --carousel-side-pad: 10vw;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* A11Y Utilities */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}
[role="tooltip"][aria-hidden="true"] {
  display: none !important;
}

/* Desktop Container/Layout */
.abo-section-root{
  padding: 28px 16px 56px;
  width: 100%;
  display: flex;
  justify-content: center !important;
}

.abo-container{
  width: 100%;
  max-width: calc(var(--abo-card-w) * 3 + var(--abo-grid-gap) * 2);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center !important;
}

.abo-hero{
  width: 100%;
  max-width: 920px;
  margin: 6px auto 18px !important;
  text-align: center !important;
}
.abo-title{
  font-size: var(--fs-hero-title);
  font-weight: 800;
  margin: 0 0 8px;
  color: #e5e7eb;
  letter-spacing: 0;
}
.abo-subtitle{ display: none; }

.abo-plans{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, var(--abo-card-w));
  gap: var(--abo-grid-gap);
  justify-content: center !important;
  align-items: stretch;
  margin-top: 10px;
}

html.abo-initial .abo-card{ transition: none !important; }

.abo-plans[data-snap="off"]{ scroll-snap-type: none !important; }
.abo-plans[data-snap="on"]{  scroll-snap-type: x mandatory; }

.abo-card{
  width: var(--abo-card-w);
  background: #1b1c1f;
  border: 1px solid #2f3339;
  border-radius: 16px;
  padding: var(--card-pad-y) var(--card-pad-x);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.02) inset,
    0 10px 24px rgba(0,0,0,0.32);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 1.5vh;
  min-height: var(--abo-card-min-h-desktop);
  position: relative;
  overflow: visible;
  transition: transform .25s ease, opacity .25s ease, box-shadow .2s ease;
  will-change: transform;
}

.abo-card.featured{
  background: #1b1c1f;
  border-color: #6d28d9;
  box-shadow:
    0 0 0 2px rgba(167, 139, 250, 0.85),
    0 14px 30px rgba(139, 92, 246, 0.20),
    0 10px 24px rgba(0,0,0,0.32);
}
.abo-card.featured:hover{
  box-shadow:
    0 0 0 2px rgba(196, 181, 253, 0.95),
    0 18px 36px rgba(139, 92, 246, 0.26),
    0 12px 26px rgba(0,0,0,0.35);
}

.top-reco-badge{
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 900;
  color: #0b1220;
  background: linear-gradient(135deg, #d6bcfa 0%, #c4b5fd 50%, #a78bfa 100%);
  border: 1px solid rgba(109, 40, 217, 0.6);
  border-radius: 999px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.25);
  letter-spacing: .2px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.abo-card .plan-name{
  font-size: var(--fs-plan-name);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}
.abo-card .plan-desc{
  color: #e6e8eb;
  font-size: var(--fs-plan-desc);
  margin-top: 12px;
  line-height: 1.5;
  min-height: unset;
  font-weight: 700;
}

.abo-card .plan-price{
  display: flex;
  align-items: flex-end;
  gap: var(--price-gap);
  margin: 4px 0 12px;
  color: #fff;
}
.price-value{
  display: inline-flex;
  align-items: baseline;
  gap: var(--price-gap);
  line-height: 1;
}
.price-currency{ font-size: var(--fs-price-currency); font-weight: 800; opacity: .95; }
.price-major{ font-size: var(--fs-price-major); font-weight: 900; letter-spacing: -0.5px; }
.price-minor{
  display: inline-block;
  font-size: var(--fs-price-minor);
  font-weight: 900;
  opacity: .95;
  letter-spacing: -0.25px;
  line-height: 1;
  transform: translateY(-6px);
}

.per{
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-price-per);
  color: #c2c7cd;
  margin-left: 0;
  font-weight: 700;
}
.per .unit-currency{ letter-spacing: .2px; }

.abo-card ul.features{
  margin: 14px 0 0;
  padding: 0;
  color: #d3d7dc;
  line-height: 1.65;
  flex: 0 0 auto;
}
.abo-card ul.features li{
  list-style: none;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--feature-gap);
  margin: var(--features-li-m) 0;
}
.abo-card ul.features li .feature-icon{
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  color: #a78bfa;
  opacity: .95;
  margin-top: 2px;
}
.abo-card ul.features li .feature-text{
  color: #d7dbe1;
  font-size: var(--fs-feature);
  font-weight: 600;
}

.card-spacer{
  flex: 1 1 auto;
  min-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* CTA Buttons – Dunkleres Weiß */
.abo-card .cta{
  margin-top: 16px;
  width: 100%;
  height: var(--cta-h);
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
  border: 1px solid transparent;
  font-size: var(--fs-cta);
  background: #e9eaec;
  color: #0c1119;
  border-color: #e9eaec;
  box-shadow: 0 8px 20px -10px rgba(233,234,236,0.35), 0 0 0 1px rgba(0,0,0,0.40);
}
.abo-card .cta:hover:not([disabled]){
  background: #f5f6f7;
  border-color: #f5f6f7;
  box-shadow: 0 12px 26px -12px rgba(233,234,236,0.45), 0 0 0 1px rgba(0,0,0,0.45);
  color: #0b1218;
}
.abo-card .cta:active:not([disabled]){
  background: #dcdde0;
  border-color: #dcdde0;
  box-shadow: 0 6px 16px -10px rgba(233,234,236,0.30), 0 0 0 1px rgba(0,0,0,0.55);
  transform: translateY(1px) scale(0.985);
}
.abo-card .cta:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.08),
    0 0 0 5px rgba(167,139,250,0.35),
    0 8px 20px -10px rgba(233,234,236,0.35);
}

.abo-card .cta[disabled]{
  background: #2a2d33 !important;
  color: #bfc4ca !important;
  border-color: #3a3d43 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03) !important;
  cursor: not-allowed !important;
  opacity: .9 !important;
}
.abo-card .cta[disabled]:hover{
  background: #2a2d33 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}
.abo-card .cta[disabled]:active{ transform: none !important; }

/* Legal Block unten fixieren */
.abo-legal-block{
  margin-top: auto;
  padding-top: 12px;
}
.abo-legal-links{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-legal);
  color: #cfd4da;
}
.abo-legal-links a{
  color: #cfd4da;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.abo-legal-links .sep{ color: #9aa1a8; }
.abo-footnote{ margin-top: 4px; font-size: var(--fs-footnote); color: #9aa1a8; }

.abo-billing-next{
  font-size: var(--fs-legal);
  font-weight: 800;
  color: #e6e8eb;
  margin: 8px 0 6px;
}

#mdc-inline-chat,
#global-chat-input-form,
.crypto-searchbar-wrapper,
#mobile-inline-search{ display: none !important; }

/* Ultrawide (≥2200px) */
@media (min-width: 2200px){
  :root{
    --abo-card-w: 660px;
    --abo-grid-gap: 36px;
    --abo-card-min-h-desktop: 820px;

    --fs-hero-title: clamp(1.28rem, 0.9rem + 2.0vw, 2.0rem);

    --fs-plan-name: clamp(1.28rem, 1.1rem + 2.2vw, 2.0rem);
    --fs-plan-desc: clamp(1.08rem, 0.96rem + 1.1vw, 1.32rem);

    --fs-price-currency: clamp(1.02rem, 0.9rem + 1.1vw, 1.38rem);
    --fs-price-major: clamp(2.5rem, 1.4rem + 5.0vw, 3.8rem);
    --fs-price-minor: clamp(1.42rem, 1.1rem + 3.2vw, 2.25rem);
    --fs-price-per: clamp(0.96rem, 0.86rem + 1.1vw, 1.16rem);

    --fs-feature: clamp(1.02rem, 0.92rem + 1.1vw, 1.24rem);
    --fs-legal: clamp(0.96rem, 0.86rem + 0.9vw, 1.18rem);
    --fs-footnote: clamp(0.9rem, 0.82rem + 0.9vw, 1.08rem);

    --fs-cta: clamp(1.08rem, 0.98rem + 1.0vw, 1.32rem);
    --cta-h: clamp(50px, 5.6vh, 62px);

    --card-pad-x: clamp(20px, 3.0vw, 34px);
    --card-pad-y: clamp(20px, 3.0vw, 32px);

    --feature-gap: clamp(10px, 2.0vw, 16px);
    --features-li-m: clamp(9px, 2.0vw, 16px);
    --icon-size: clamp(20px, 3.4vw, 26px);

    --price-gap: clamp(10px, 2.0vw, 16px);
  }
}

/* Extreme Ultrawide (≥2600px) */
@media (min-width: 2600px){
  :root{
    --abo-card-w: 720px;
    --abo-grid-gap: 40px;
    --abo-card-min-h-desktop: 880px;

    --fs-hero-title: clamp(1.4rem, 1.0rem + 2.2vw, 2.2rem);

    --fs-plan-name: clamp(1.4rem, 1.2rem + 2.4vw, 2.2rem);
    --fs-plan-desc: clamp(1.16rem, 1.02rem + 1.2vw, 1.42rem);

    --fs-price-currency: clamp(1.1rem, 0.98rem + 1.2vw, 1.5rem);
    --fs-price-major: clamp(2.8rem, 1.6rem + 5.4vw, 4.2rem);
    --fs-price-minor: clamp(1.56rem, 1.2rem + 3.2vw, 2.45rem);
    --fs-price-per: clamp(1.04rem, 0.94rem + 1.2vw, 1.22rem);

    --fs-feature: clamp(1.1rem, 1.0rem + 1.2vw, 1.32rem);
    --fs-legal: clamp(1.02rem, 0.92rem + 1.0vw, 1.24rem);
    --fs-footnote: clamp(0.96rem, 0.88rem + 1.0vw, 1.14rem);

    --fs-cta: clamp(1.16rem, 1.04rem + 1.1vw, 1.42rem);
    --cta-h: clamp(54px, 5.8vh, 66px);

    --card-pad-x: clamp(22px, 3.2vw, 36px);
    --card-pad-y: clamp(22px, 3.2vw, 34px);

    --feature-gap: clamp(12px, 2.2vw, 18px);
    --features-li-m: clamp(10px, 2.2vw, 18px);
    --icon-size: clamp(22px, 3.6vw, 28px);

    --price-gap: clamp(12px, 2.2vw, 18px);
  }
}

/* XXXL (≥3000px) */
@media (min-width: 3000px){
  :root{
    --abo-card-w: 780px;
    --abo-grid-gap: 44px;
    --abo-card-min-h-desktop: 940px;

    --fs-hero-title: clamp(1.6rem, 1.2rem + 2.4vw, 2.4rem);

    --fs-plan-name: clamp(1.56rem, 1.3rem + 2.6vw, 2.4rem);
    --fs-plan-desc: clamp(1.22rem, 1.06rem + 1.3vw, 1.5rem);

    --fs-price-currency: clamp(1.2rem, 1.06rem + 1.3vw, 1.6rem);
    --fs-price-major: clamp(3.2rem, 1.8rem + 5.8vw, 4.6rem);
    --fs-price-minor: clamp(1.72rem, 1.32rem + 3.8vw, 2.7rem);
    --fs-price-per: clamp(1.12rem, 1.0rem + 1.3vw, 1.28rem);

    --fs-feature: clamp(1.2rem, 1.06rem + 1.3vw, 1.4rem);
    --fs-legal: clamp(1.1rem, 0.98rem + 1.1vw, 1.3rem);
    --fs-footnote: clamp(1.02rem, 0.94rem + 1.1vw, 1.2rem);

    --fs-cta: clamp(1.26rem, 1.12rem + 1.2vw, 1.52rem);
    --cta-h: clamp(58px, 6.0vh, 72px);

    --card-pad-x: clamp(24px, 3.4vw, 40px);
    --card-pad-y: clamp(24px, 3.4vw, 40px);

    --feature-gap: clamp(14px, 2.4vw, 20px);
    --features-li-m: clamp(12px, 2.4vw, 20px);
    --icon-size: clamp(24px, 3.8vw, 30px);

    --price-gap: clamp(14px, 2.4vw, 20px);
  }
}

/* Mobile Karussell (reduzierte Höhe) */
@media (max-width: 1100px){
  html.abo-no-scroll, body.abo-no-scroll{
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    height: 100svh !important;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
  }

  .abo-hero{ margin: 6px auto 6px !important; }

  .abo-plans{
    display: flex !important;
    grid-template-columns: none !important;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--carousel-side-pad, 10vw) calc(16px + var(--safe-bottom));
    scroll-padding: 0 var(--carousel-side-pad, 10vw);
    align-items: stretch;
    justify-content: flex-start !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
  }
  .abo-plans::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; background:transparent !important; }
  .abo-plans::-webkit-scrollbar-thumb{ background:transparent !important; }
  .abo-plans::-webkit-scrollbar-track{ background:transparent !important; }

  .abo-card{
    flex: 0 0 80vw;
    width: 80vw;
    max-width: 520px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: scale(.94);
    opacity: .6;
    z-index: 1;
    filter: saturate(.85) brightness(.98);
    border-color: #2f3339 !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.02) inset,
      0 10px 24px rgba(0,0,0,0.32) !important;
    /* Neue reduzierte Mindesthöhe */
    min-height: var(--abo-card-min-h-mobile);
    height: auto;
    padding: clamp(10px, 2.4vw, 18px) clamp(12px, 2.6vw, 20px); /* etwas kompakter */
  }

  .abo-card.featured{
    background: #1b1c1f;
    border-color: #2f3339 !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.02) inset,
      0 10px 24px rgba(0,0,0,0.32) !important;
  }

  .abo-card.is-center,
  .abo-card.featured.is-center{
    transform: scale(1);
    opacity: 1;
    z-index: 2;
    filter: none;
    border-color: #6d28d9 !important;
    box-shadow:
      0 0 0 2px rgba(167, 139, 250, 0.90),
      0 18px 36px rgba(139, 92, 246, 0.26),
      0 12px 26px rgba(0,0,0,0.35) !important;
  }

  .card-spacer{ display:none !important; }

  .abo-section-root{
    padding: 16px 12px calc(36px + var(--safe-bottom));
  }
}

/* Neue geringere Basis-Mindesthöhe für mobile: mehr Reduktion */
@media (max-width: 1100px){
  :root{ --abo-card-min-h-mobile: clamp(320px, calc(100svh - 260px), 760px); }
}

@media (max-width: 400px){
  :root{
    --abo-card-min-h-mobile: clamp(310px, calc(100svh - 250px), 640px);
    --fs-hero-title: clamp(0.88rem, 0.78rem + 0.9vw, 1.08rem);
    --fs-plan-name: clamp(0.92rem, 0.84rem + 1.2vw, 1.18rem);
    --fs-plan-desc: clamp(0.80rem, 0.78rem + 0.5vw, 0.94rem);
    --fs-price-currency: clamp(0.70rem, 0.66rem + 0.4vw, 0.90rem);
    --fs-price-major: clamp(1.38rem, 0.96rem + 3.0vw, 2.05rem);
    --fs-price-minor: clamp(0.96rem, 0.86rem + 1.9vw, 1.45rem);
    --fs-price-per: clamp(0.68rem, 0.64rem + 0.4vw, 0.80rem);
    --fs-feature: clamp(0.76rem, 0.72rem + 0.4vw, 0.90rem);
    --fs-legal: clamp(0.74rem, 0.70rem + 0.3vw, 0.88rem);
    --fs-footnote: clamp(0.68rem, 0.64rem + 0.3vw, 0.82rem);
    --fs-cta: clamp(0.76rem, 0.72rem + 0.3vw, 0.96rem);
    --cta-h: clamp(30px, 4.8vh, 38px);
    --card-pad-x: clamp(11px, 2.4vw, 20px);
    --card-pad-y: clamp(10px, 2.4vw, 18px);
    --feature-gap: clamp(6px, 1.6vw, 9px);
    --features-li-m: clamp(5px, 1.4vw, 8px);
    --icon-size: clamp(12px, 3.0vw, 16px);
    --price-gap: clamp(5px, 1.6vw, 9px);
  }
  .price-minor{ transform: translateY(-4px); }
}

@media (max-width: 380px){
  :root{
    --abo-card-min-h-mobile: clamp(300px, calc(100svh - 250px), 560px);
    --fs-hero-title: clamp(0.80rem, 0.74rem + 0.7vw, 0.98rem);
    --fs-plan-name: clamp(0.88rem, 0.80rem + 1.0vw, 1.08rem);
    --fs-plan-desc: clamp(0.76rem, 0.74rem + 0.3vw, 0.88rem);
    --fs-price-currency: clamp(0.64rem, 0.62rem + 0.3vw, 0.82rem);
    --fs-price-major: clamp(1.22rem, 0.88rem + 2.4vw, 1.82rem);
    --fs-price-minor: clamp(0.84rem, 0.78rem + 1.5vw, 1.16rem);
    --fs-price-per: clamp(0.64rem, 0.60rem + 0.3vw, 0.76rem);
    --fs-feature: clamp(0.70rem, 0.68rem + 0.3vw, 0.84rem);
    --fs-legal: clamp(0.70rem, 0.66rem + 0.3vw, 0.84rem);
    --fs-footnote: clamp(0.64rem, 0.60rem + 0.3vw, 0.78rem);
    --fs-cta: clamp(0.72rem, 0.68rem + 0.3vw, 0.90rem);
    --cta-h: clamp(28px, 4.4vh, 34px);
    --card-pad-x: clamp(9px, 2.1vw, 16px);
    --card-pad-y: clamp(8px, 2.1vw, 16px);
    --feature-gap: clamp(5px, 1.4vw, 8px);
    --features-li-m: clamp(4px, 1.2vw, 7px);
    --icon-size: clamp(11px, 2.8vw, 15px);
    --price-gap: clamp(5px, 1.4vw, 8px);
  }
  .abo-card .plan-desc{ line-height: 1.38; }
  .abo-card ul.features{ line-height: 1.48; margin-top: 6px; }
  .abo-card .cta{ margin-top: 8px; }
  .price-minor{ transform: translateY(-3px); }
}

@media (max-width: 340px){
  :root{
    --fs-plan-name: clamp(0.84rem, 0.76rem + 0.9vw, 1.02rem);
    --fs-plan-desc: clamp(0.72rem, 0.70rem + 0.3vw, 0.84rem);

    --fs-price-currency: clamp(0.60rem, 0.58rem + 0.4vw, 0.76rem);
    --fs-price-major: clamp(1.12rem, 0.82rem + 2.2vw, 1.60rem);
    --fs-price-minor: clamp(0.78rem, 0.74rem + 1.3vw, 1.04rem);
    --fs-price-per: clamp(0.60rem, 0.56rem + 0.4vw, 0.72rem);

    --fs-feature: clamp(0.68rem, 0.66rem + 0.5vw, 0.80rem);
    --fs-cta: clamp(0.70rem, 0.66rem + 0.4vw, 0.86rem);
    --cta-h: clamp(26px, 4.2vh, 32px);

    --card-pad-x: clamp(8px, 1.9vw, 14px);
    --card-pad-y: clamp(7px, 1.9vw, 14px);

    --icon-size: clamp(10px, 2.6vw, 14px);
    --price-gap: clamp(3.5px, 1.0vw, 6px);

    --abo-card-min-h-mobile: clamp(286px, calc(100svh - 300px), 440px);
  }
  .price-minor{ transform: translateY(-2px); }
  .abo-card ul.features li{ margin: 4px 0; }
}

@media (max-width: 320px){
  :root{
    --fs-plan-name: clamp(0.82rem, 0.74rem + 0.8vw, 0.98rem);
    --fs-plan-desc: clamp(0.70rem, 0.68rem + 0.3vw, 0.82rem);
    --fs-price-currency: clamp(0.58rem, 0.56rem + 0.4vw, 0.70rem);
    --fs-price-major: clamp(1.04rem, 0.76rem + 2.0vw, 1.44rem);
    --fs-price-minor: clamp(0.74rem, 0.70rem + 1.1vw, 0.98rem);
    --fs-price-per: clamp(0.58rem, 0.54rem + 0.4vw, 0.68rem);
    --fs-feature: clamp(0.66rem, 0.64rem + 0.4vw, 0.78rem);
    --fs-cta: clamp(0.68rem, 0.64rem + 0.4vw, 0.84rem);
    --cta-h: clamp(24px, 4.0vh, 30px);
    --card-pad-x: clamp(7px, 1.6vw, 12px);
    --card-pad-y: clamp(6px, 1.6vw, 12px);
    --icon-size: clamp(9.5px, 2.4vw, 13px);
    --price-gap: clamp(3.5px, 1.0vw, 6px);
    --abo-card-min-h-mobile: clamp(270px, calc(100svh - 320px), 420px);
  }
  .price-minor{ transform: translateY(-2px); }
  .abo-card ul.features{ line-height: 1.42; }
}

/* Desktop Scroll-Deaktivierung */
@media (min-width: 1101px){
  html.abo-no-scroll, body.abo-no-scroll{ overflow: hidden !important; }
  .abo-section-root{ padding-bottom: 40px; }
}

/* Kündigungs-Dialog */
.abo-cancel-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1000;
}
.abo-cancel-backdrop.active{ opacity:1; pointer-events:auto; }

.abo-cancel-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%) scale(.98);
  width: calc(100% - 32px);
  max-width: 560px;
  background: #1d1f22;
  border: 1px solid #2a2d31;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03) inset;
  padding: 28px 24px 22px;
  color: #e6e8eb;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1001;
}
.abo-cancel-modal.active{
  opacity:1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events:auto;
}

.abo-cancel-title{
  margin: 4px 8px 12px;
  text-align: center;
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
}
.abo-cancel-text{
  margin: 0 6px 16px;
  text-align: center;
  font-size: 0.98rem;
  color: #cfd4da;
}

.abo-cancel-pass{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 6px 14px;
  font-size: 0.95rem;
  color: #d7dbe1;
  font-weight: 600;
}
.abo-cancel-pass-label{ font-weight:700; color:#e6e8eb; }
.abo-cancel-pass input{
  width:100%;
  background:#2a2d33;
  border:1px solid #3a3d43;
  border-radius:10px;
  padding:10px 12px;
  font-size:0.95rem;
  color:#e6e8eb;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.abo-cancel-pass input:focus{
  border-color:#6d28d9;
  box-shadow:0 0 0 2px rgba(167,139,250,0.4);
}

.abo-cancel-error{
  min-height:18px;
  margin:4px 6px 0;
  font-size:0.78rem;
  font-weight:600;
  color:#ff9494;
  letter-spacing:.2px;
}

.abo-cancel-close{
  position:absolute;
  top:8px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#2a2d33;
  color:#e6e8eb;
  border:1px solid #3a3d43;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, box-shadow .15s ease, transform .08s ease;
}
.abo-cancel-close:hover{
  background:#343840;
  box-shadow:0 0 0 2px rgba(255,255,255,0.06) inset;
}
.abo-cancel-close:active{ transform:translateY(1px); }

.abo-cancel-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 6px 12px;
  font-size:0.95rem;
  color:#d7dbe1;
  font-weight:600;
}
.abo-cancel-check input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:#a78bfa;
  cursor:pointer;
}

.abo-cancel-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  justify-content:center;
}
.abo-cancel-btn{
  min-width:180px;
  height:44px;
  border-radius:999px;
  font-weight:800;
  font-size:0.98rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.abo-cancel-btn.primary{
  background:#ffffff;
  color:#0b1220;
  border-color:#ffffff;
  box-shadow:0 8px 20px -8px rgba(255,255,255,0.35);
}
.abo-cancel-btn.primary:hover{ box-shadow:0 12px 24px -10px rgba(255,255,255,0.45); }
.abo-cancel-btn.primary[disabled]{
  background:#2a2d33 !important;
  color:#bfc4ca !important;
  border-color:#3a3d43 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03) !important;
  cursor:not-allowed !important;
  opacity:.9 !important;
}
.abo-cancel-btn.secondary{
  background:#2a2d33;
  color:#e6e8eb;
  border:1px solid #3a3d43;
}
.abo-cancel-btn.secondary:hover{
  background:#343840;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset;
}
.abo-cancel-btn:active{ transform:translateY(1px) scale(0.99); }

@media (max-width: 520px){
  .abo-cancel-title{ font-size:1.4rem; }
  .abo-cancel-text{ font-size:0.94rem; }
  .abo-cancel-btn{
    min-width:140px;
    height:48px;
    font-size:0.94rem;
  }
  .abo-cancel-pass input{
    font-size:0.9rem;
    padding:9px 11px;
  }
  .abo-cancel-error{ font-size:0.72rem; }
}