/* Licht und Tiefe für Website-Pakete, Abos und Zusatzoptionen. */
:is(#pakete,#abos) .packages{perspective:1200px;gap:24px}
:is(#pakete,#abos) .packages>article{--card-color:#64e8f5;--card-rgb:56,211,239;--pointer-x:50%;--pointer-y:30%;--tilt-x:0deg;--tilt-y:0deg;position:relative;isolation:isolate;overflow:visible;transform-origin:center;transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;background:linear-gradient(145deg,#111827d9,#0d101c);border:1px solid #ffffff24;box-shadow:0 12px 30px #00000012}
:is(#pakete,#abos) .packages>article:nth-child(2){--card-color:#b29aff;--card-rgb:163,123,255}
:is(#pakete,#abos) .packages>article:nth-child(3){--card-color:#ff9ecb;--card-rgb:255,119,187}
:is(#pakete,#abos) .packages>article.featured{border-color:#a37bff88;background:linear-gradient(145deg,#33204d75,#111321)}
:is(#pakete,#abos) .packages>article::before{content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;border-radius:inherit;padding:1px;background:linear-gradient(125deg,transparent 10%,var(--card-color) 35%,#ffffffd9 48%,var(--card-color) 60%,transparent 90%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity .3s}
:is(#pakete,#abos) .packages>article::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(300px circle at var(--pointer-x) var(--pointer-y),rgba(var(--card-rgb),.2),transparent 75%);opacity:0;transition:opacity .35s}
:is(#pakete,#abos) .packages>article>*{position:relative;z-index:1}
:is(#pakete,#abos) .packages>article:is(:hover,:focus-within){transform:translateY(-10px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));border-color:rgba(var(--card-rgb),.7);box-shadow:0 20px 50px #0007,0 8px 45px rgba(var(--card-rgb),.15);z-index:3}
:is(#pakete,#abos) .packages>article:is(:hover,:focus-within)::before,:is(#pakete,#abos) .packages>article:is(:hover,:focus-within)::after{opacity:1}
:is(#pakete,#abos) .packages .eyebrow{transition:color .3s,letter-spacing .3s}.packages>article:is(:hover,:focus-within)>.eyebrow{color:var(--card-color);letter-spacing:2.5px}
:is(#pakete,#abos) .price{transition:color .3s,text-shadow .3s,transform .3s}.packages>article:is(:hover,:focus-within) .price{color:var(--card-color);text-shadow:0 0 25px rgba(var(--card-rgb),.25);transform:translateX(3px)}
:is(#pakete,#abos) .packages li::marker{color:#8c95ad;transition:color .3s}.packages>article:is(:hover,:focus-within) li::marker{color:var(--card-color)}
:is(#pakete,#abos) .packages button{position:relative;isolation:isolate;overflow:hidden;min-height:46px;transition:background .3s,box-shadow .3s,border-color .3s,transform .2s;filter:none}
:is(#pakete,#abos) .packages button::before{content:"";pointer-events:none;position:absolute;inset:-40% -100%;z-index:-1;background:linear-gradient(110deg,transparent 35%,#ffffff3b 48%,transparent 60%);transform:translateX(-45%)}
:is(#pakete,#abos) .packages button:is(:hover,:focus-visible){background:linear-gradient(110deg,#624ced,#9b4edb);border-color:var(--card-color);box-shadow:0 0 25px rgba(var(--card-rgb),.25)}
:is(#pakete,#abos) .packages button:is(:hover,:focus-visible)::before{animation:package-shine .8s ease-out 1}
:is(#pakete,#abos) .packages button:active{transform:scale(.98)}
@keyframes package-shine{to{transform:translateX(45%)}}
:is(#pakete,#abos) .configurator{position:relative;transition:border-color .3s,box-shadow .3s;background:linear-gradient(135deg,#151b2b88,#10132155)}
:is(#pakete,#abos) .configurator:is(:hover,:focus-within){border-color:#8197d255;box-shadow:0 5px 40px #5547d910}
#options{gap:12px}#options label{position:relative;display:flex;align-items:center;gap:9px;min-height:46px;transition:transform .2s,border-color .25s,background .25s,box-shadow .25s;background:#ffffff03;border-color:#ffffff24;border-radius:10px}
#options input{width:17px;height:17px;flex-shrink:0;accent-color:#b197ff}
#options label:is(:hover,:focus-within){transform:translateY(-3px);border-color:#b3a4ff;background:#8570e51a;box-shadow:0 5px 20px #8673f51a}
#options label:has(input:checked){background:linear-gradient(110deg,#513b8b66,#174c5d44);border-color:#8ce7ef;box-shadow:inset 0 0 20px #8e66ff15,0 0 18px #49c9df12;color:#edfcff}
#options label:has(input:checked)::after{content:"";position:absolute;inset:auto 12px -1px;height:2px;background:linear-gradient(90deg,transparent,#6beaf2,#b894ff,transparent);border-radius:3px}
#subscription{transition:border-color .25s,box-shadow .25s;background-color:#0c1020;min-height:48px}#subscription:is(:hover,:focus){border-color:#b09aff;box-shadow:0 0 0 3px #9272eb16,0 0 25px #9272eb15}
#subscriptionStatus,#selection{color:#aebada}
/* Auswahl ist auch ohne Maus durch Fokus und Rahmen erkennbar. */
:is(#pakete,#abos) article:has(button[aria-pressed=true]){border-color:#77e6ec;box-shadow:0 0 0 1px #77e6ec33,0 8px 30px #4fd3e51a}
.a11y-motion :is(#pakete,#abos) .packages>article:is(:hover,:focus-within),.a11y-motion :is(#pakete,#abos) .price,.a11y-motion #options label:is(:hover,:focus-within){transform:none!important}
.a11y-contrast :is(#pakete,#abos) .packages>article::before,.a11y-contrast :is(#pakete,#abos) .packages>article::after,.a11y-contrast :is(#pakete,#abos) .packages button::before{display:none}
.a11y-contrast #options label:has(input:checked){border:2px solid #ffec72;background:#000!important;color:#fff}
@media(prefers-reduced-motion:reduce){:is(#pakete,#abos) .packages>article,:is(#pakete,#abos) .packages button,:is(#pakete,#abos) .price,#options label{transition:none!important;transform:none!important}:is(#pakete,#abos) .packages button::before{animation:none!important}}
@media(hover:none){:is(#pakete,#abos) .packages>article{--tilt-x:0deg!important;--tilt-y:0deg!important}:is(#pakete,#abos) .packages>article:is(:hover,:focus-within){transform:none}#options label:hover{transform:none}}
/* Dauerhafte Farbstimmung der Abo-Karten wie beim Projekt-Pfeilweg. */
#abos .packages>article{background:linear-gradient(145deg,rgba(var(--card-rgb),.43) 0%,rgba(var(--card-rgb),.16) 28%,#0c101e 72%);border-color:rgba(var(--card-rgb),.32)}
#abos .packages>article:nth-child(1){--card-color:#68e7f6;--card-rgb:50,215,239}
#abos .packages>article:nth-child(2){--card-color:#9ca7ff;--card-rgb:117,128,255}
#abos .packages>article:nth-child(3){--card-color:#ffa7b5;--card-rgb:255,114,158}
#abos .packages>article.featured{background:linear-gradient(145deg,rgba(var(--card-rgb),.43) 0%,rgba(var(--card-rgb),.16) 28%,#0c101e 72%)}
/* Website-Pakete mit derselben dauerhaften Farbgebung wie die Abos. */
#pakete .packages>article{background:linear-gradient(145deg,rgba(var(--card-rgb),.43) 0%,rgba(var(--card-rgb),.16) 28%,#0c101e 72%);border-color:rgba(var(--card-rgb),.32)}
#pakete .packages>article:nth-child(1){--card-color:#68e7f6;--card-rgb:50,215,239}
#pakete .packages>article:nth-child(2){--card-color:#9ca7ff;--card-rgb:117,128,255}
#pakete .packages>article:nth-child(3){--card-color:#ffa7b5;--card-rgb:255,114,158}
#pakete .packages>article.featured{background:linear-gradient(145deg,rgba(var(--card-rgb),.43) 0%,rgba(var(--card-rgb),.16) 28%,#0c101e 72%)}