/* ============================================================
   Design-Varianten (09.10.2026)
   <html data-design="glas|clay|y2k|neu|brutal">, gesetzt im <head>
   (Standard aus layout.html, Vorschau per ?design=… , zurück mit ?design=glas).
   Hintergrund in allen Varianten wie Glas (Panel-Foto, fix, unscharf).
   Glas = alles oberhalb. Jede Variante überschreibt nur Flächen,
   Farben, Schrift und Schatten. Struktur und Logik bleiben gleich.
   ============================================================ */


/* ------------------------------------------------------------
   1) CLAYMORPHISM „Knet-Laden“
   Alles weiche Knete: doppelter Innen-Licht/Schatten + weicher Außenschatten.
   Kategorien rechts als 2×2 Knet-Kacheln, Pakete als runde Pastell-Teller.
   Schrift Fredoka (rund) + Nunito. Hintergrund wie Glas.
   ------------------------------------------------------------ */
html[data-design="clay"] {
    --fg: 58,36,16; --ink: 90,50,10; --strong: #3A2410;
    --primary: #F28C28; --primary-light: #9E4C07; --primary-rgb: 242,140,40;
    --font-head: 'Fredoka', 'Nunito', system-ui, sans-serif; --font-body: 'Nunito', system-ui, sans-serif;
    --c-surface: #FFF4E8; --c-sunk: #F3E1CC; --c-text: #3A2410; --c-soft: #6B4A2B;
    --c-peach: #FFD3B0; --c-mint: #C9EFD6; --c-lilac: #E3D5FF; --c-sky: #CDE8FF; --c-butter: #FFE7A3;
    --puff: 0 20px 34px -16px rgba(60,30,5,.6), inset 0 -9px 16px rgba(170,100,40,.22), inset 0 9px 16px rgba(255,255,255,.95);
    --puff-sm: 0 10px 18px -10px rgba(60,30,5,.55), inset 0 -5px 9px rgba(170,100,40,.2), inset 0 5px 9px rgba(255,255,255,.9);
    --press: inset 0 6px 12px rgba(150,85,20,.3), inset 0 -3px 8px rgba(255,255,255,.75);
    --tebex-legal-footer-text-color: rgba(58,36,16,.8);
}
html[data-design="clay"] ::selection { background: rgba(242,140,40,.35); color: #3A2410; }
html[data-design="clay"] :focus-visible { outline: 3px solid #F28C28; outline-offset: 3px; }
html[data-design="clay"] a { color: #8F4306; }

/* Flächen aus Knete */
html[data-design="clay"] :is(.card, dialog.dlg, .drawer, .toast, .announcement, .info-box, .account-card.loggedin, .pay-card) {
    background: var(--c-surface); color: var(--c-text); border: none; border-radius: 30px; box-shadow: var(--puff);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-design="clay"] :is(.pkg, .pkg-row, .cart-item, .co-item, .confirm-card, .step, .widget, .name-switch, .edition) {
    background: #FFF9F1; color: var(--c-text); border: none; border-radius: 26px; box-shadow: var(--puff-sm);
}
html[data-design="clay"] :is(.qty, .input, .login .input, .name-preview, .dlg-close, .social a, .currency-select, .footer-lang select) {
    background: var(--c-sunk); color: var(--c-text); border: none; border-radius: 16px; box-shadow: var(--press);
}
html[data-design="clay"] .input::placeholder { color: #7A5A3A; }
html[data-design="clay"] dialog.dlg::backdrop { background: rgba(60,30,5,.4); }

/* Knöpfe: Knete gibt beim Drücken nach */
html[data-design="clay"] .btn { border-radius: 999px; font-family: 'Fredoka', sans-serif; font-weight: 600; letter-spacing: 0; transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s; }
html[data-design="clay"] .btn:active { transform: scale(.96); box-shadow: var(--press); }
html[data-design="clay"] .btn-gold, html[data-design="clay"] .btn-gold:hover { background: #F7963A; color: #2E1600; filter: none; box-shadow: 0 12px 20px -10px rgba(190,90,10,.85), inset 0 -6px 10px rgba(160,60,0,.35), inset 0 6px 10px rgba(255,220,170,.85); }
html[data-design="clay"] .btn-gold:hover { background: #FFA24D; }
html[data-design="clay"] .btn-ghost, html[data-design="clay"] .btn-ghost:hover { background: #FFF1DE; color: #5A3410; border: none; filter: none; box-shadow: var(--puff-sm); }
html[data-design="clay"] .btn-danger { background: #E2574C; color: #2B0A06; box-shadow: 0 10px 18px -10px rgba(160,40,30,.8), inset 0 -5px 9px rgba(120,20,10,.35), inset 0 5px 9px rgba(255,200,190,.7); }
html[data-design="clay"] .btn-link, html[data-design="clay"] .topbar .btn-link { background: var(--c-surface); color: var(--c-soft); box-shadow: var(--puff-sm); border-radius: 999px; }
html[data-design="clay"] .btn-link:hover { color: var(--c-text); }
html[data-design="clay"] .btn[disabled], html[data-design="clay"] .btn.disabled { background: #EADCCB; color: #6B5A48; box-shadow: var(--press); }
html[data-design="clay"] .badge { color: #3A2410; }
html[data-design="clay"] .badge-gold { background: var(--c-peach); box-shadow: var(--puff-sm); }
html[data-design="clay"] .badge-muted { background: var(--c-sky); box-shadow: var(--puff-sm); }
html[data-design="clay"] .cart-pill { background: #fff; color: #8F4306; }
html[data-design="clay"] .cart-btn.filled .cart-pill { background: #3A2410; color: #FFB25C; }
html[data-design="clay"] .cart-btn.filled::after { display: none; }

/* Kopfleiste und Kopf: eine Knetleiste mittig */
html[data-design="clay"] .topbar.scrolled { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="clay"] .topbar.scrolled .container { background: rgba(255,244,232,.94); border: none; border-radius: 999px; box-shadow: var(--puff); }
html[data-design="clay"] .status-circle { background: var(--c-butter); color: #8F4306; border: none; box-shadow: var(--puff-sm); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="clay"] .status:active .status-circle { box-shadow: var(--press); }
html[data-design="clay"] .status-title { font-family: 'Fredoka', sans-serif; font-weight: 600; letter-spacing: 0; color: var(--c-text); }
html[data-design="clay"] .status-sub { color: var(--c-soft); }
html[data-design="clay"] .status-badge { background: #E2574C; color: #2B0A06; }
html[data-design="clay"] .hero-logo { filter: drop-shadow(0 10px 14px rgba(90,50,10,.45)); }
@media (min-width: 992px) {
    html[data-design="clay"] .hero { height: auto; }
    html[data-design="clay"] .hero-inner {
        position: relative; top: auto; width: fit-content; margin: 76px auto 0; display: flex; align-items: center; gap: 28px;
        padding: 14px 30px; background: var(--c-surface); border-radius: 999px; box-shadow: var(--puff);
    }
    html[data-design="clay"] .hero-logo { height: 92px; }
    html[data-design="clay"] .status-play, html[data-design="clay"] .status-discord { margin: 0; }
    html[data-design="clay"] .status-circle { width: 3.2rem; height: 3.2rem; font-size: 1.3rem; }
    html[data-design="clay"] .main-container { margin-top: 30px; }
    /* Seitenleiste rechts, schwebend */
    html[data-design="clay"] .main-grid { grid-template-columns: minmax(0,1fr) 290px; gap: 28px; }
    html[data-design="clay"] .main-grid > .sidebar { grid-column: 2; grid-row: 1; position: sticky; top: 84px; }
    html[data-design="clay"] .main-grid > main { grid-column: 1; grid-row: 1; }
}

/* Konto, Name ändern, Kategorie-Kacheln */
html[data-design="clay"] .side-label { display: none; }
html[data-design="clay"] .account-card { height: auto; min-height: 78px; padding: .8rem 0 .8rem 1rem; }
html[data-design="clay"] .account-card .account-name { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--c-text); }
html[data-design="clay"] .account-card .account-sub { color: var(--c-soft); font-weight: 700; }
html[data-design="clay"] .account-card .account-arrow { color: #E07A1C; }
html[data-design="clay"] .account-card:active { transform: scale(.98); box-shadow: var(--press); }
html[data-design="clay"] .account-avatar img { border-radius: 14px !important; }
html[data-design="clay"] .account-card.loggedout { background: var(--c-butter); color: var(--c-text); border: none; border-radius: 30px; box-shadow: var(--puff); animation: none; }
html[data-design="clay"] .account-card.loggedout .account-name, html[data-design="clay"] .account-card.loggedout .account-arrow { color: var(--c-text); }
html[data-design="clay"] .name-switch { margin-top: -.3rem; color: var(--c-soft); }
html[data-design="clay"] .name-switch b, html[data-design="clay"] .name-switch i { color: var(--c-text); }
html[data-design="clay"] .name-switch:hover { background: #FFF; }

html[data-design="clay"] .catnav.card { background: var(--c-surface); padding: 14px; border-radius: 30px; }
html[data-design="clay"] .cat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html[data-design="clay"] .catnav a, html[data-design="clay"] .cat-opener {
    width: auto; justify-content: center; padding: 1.1rem .5rem; border-radius: 22px; box-shadow: var(--puff-sm); color: var(--c-text);
    transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s;
}
html[data-design="clay"] .cat-list > a:nth-child(4n+1) { background: var(--c-peach); }
html[data-design="clay"] .cat-list > a:nth-child(4n+2) { background: var(--c-mint); }
html[data-design="clay"] .cat-list > a:nth-child(4n+3) { background: var(--c-lilac); }
html[data-design="clay"] .cat-list > a:nth-child(4n+4) { background: var(--c-sky); }
html[data-design="clay"] .catnav a:hover { transform: translateY(-2px); }
html[data-design="clay"] .catnav a:active { transform: scale(.95); box-shadow: var(--press); }
html[data-design="clay"] .catnav a.active { box-shadow: var(--press), 0 0 0 3px #F28C28; }
html[data-design="clay"] .catnav a.active::after { display: none; }
html[data-design="clay"] .cat-list .cat-icon img { opacity: 1 !important; filter: drop-shadow(0 3px 0 rgba(90,50,10,.35)) !important; transform: none !important; height: 34px; }
html[data-design="clay"] .cat-icon { min-width: 0; }
html[data-design="clay"] .sidebar-donator { border-top: none; }

/* Inhalt */
html[data-design="clay"] main > .card { padding: 2rem 2.2rem 2.4rem; }
html[data-design="clay"] .store-heading { font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--c-text); -webkit-text-fill-color: var(--c-text); letter-spacing: -.01em; }
html[data-design="clay"] .category-description { color: #5A3A1C; }
html[data-design="clay"] .category-description strong, html[data-design="clay"] .category-description b { font-family: var(--font-body); font-weight: 800; color: var(--c-text); }
html[data-design="clay"] .category-description p:first-child > strong:first-child { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -.01em; color: var(--c-text); }
html[data-design="clay"] .package-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; margin-top: 1.8rem; }
html[data-design="clay"] .pkg { padding: 1.3rem 1rem 1.3rem; overflow: visible; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
html[data-design="clay"] .pkg:hover { background: #FFFCF7; transform: translateY(-4px); box-shadow: 0 26px 36px -16px rgba(60,30,5,.6), inset 0 -5px 9px rgba(170,100,40,.2), inset 0 5px 9px rgba(255,255,255,.9); }
html[data-design="clay"] .pkg-img { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; background: var(--c-peach); box-shadow: var(--press); padding: 14px; }
html[data-design="clay"] .package-grid > .pkg:nth-child(5n+2) .pkg-img { background: var(--c-mint); }
html[data-design="clay"] .package-grid > .pkg:nth-child(5n+3) .pkg-img { background: var(--c-lilac); }
html[data-design="clay"] .package-grid > .pkg:nth-child(5n+4) .pkg-img { background: var(--c-sky); }
html[data-design="clay"] .package-grid > .pkg:nth-child(5n+5) .pkg-img { background: var(--c-butter); }
html[data-design="clay"] .pkg-img img { max-height: 118px; filter: drop-shadow(0 8px 8px rgba(90,50,10,.35)); transition: transform .35s cubic-bezier(.16,1,.3,1); }
html[data-design="clay"] .pkg:hover .pkg-img img { transform: translateY(-8px) scale(1.04); }
html[data-design="clay"] .pkg-badge { top: .7rem; left: .7rem; }
html[data-design="clay"] .pkg-name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--c-text); margin-top: .9rem; letter-spacing: 0; }
html[data-design="clay"] .pkg-price { margin-top: .45rem; font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--c-text); }
html[data-design="clay"] .pkg-price > span:not(.was):not(.ci-meta):not(.free) { background: var(--c-butter); padding: .25rem .8rem; border-radius: 999px; box-shadow: var(--puff-sm); }
html[data-design="clay"] .pkg-price .was { color: #B42318; font-family: var(--font-body); font-weight: 800; }
html[data-design="clay"] .pkg-qty-total { color: var(--c-soft); }
html[data-design="clay"] .qty-card button { color: var(--c-text); }
html[data-design="clay"] .qty-card button:hover { background: rgba(242,140,40,.18); color: var(--c-text); }
html[data-design="clay"] .qty-card input { color: var(--c-text); font-family: 'Fredoka', sans-serif; }
html[data-design="clay"] .pkg { display: flex; flex-direction: column; }
html[data-design="clay"] .pkg > .pkg-actions { margin-top: auto; padding-top: 1rem; }

/* Startseite, Infokästen */
html[data-design="clay"] .store-description, html[data-design="clay"] .store-subheading { color: #5A3A1C; }
html[data-design="clay"] .info-box { color: #5A3A1C; }
html[data-design="clay"] .info-title { background: var(--c-butter) !important; border: none; color: var(--c-text) !important; box-shadow: var(--puff-sm); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="clay"] .trust-row, html[data-design="clay"] .pay-icons { color: var(--c-soft); }
html[data-design="clay"] .trust-row .t i, html[data-design="clay"] .pay-trust .t i { color: #C2600A; }

/* Kasse */
html[data-design="clay"] .step { color: var(--c-soft); }
html[data-design="clay"] .step.current { background: var(--c-butter); color: var(--c-text); }
html[data-design="clay"] .step .num, html[data-design="clay"] .co-section-title .num { background: #fff; color: var(--c-text); box-shadow: var(--puff-sm); }
html[data-design="clay"] .step.current .num, html[data-design="clay"] .co-section-title .num { background: #F28C28; color: #2E1600; }
html[data-design="clay"] :is(.co-section-title, .confirm-name, .ci-name, .total-row .label, .drawer-title, .login-title) { color: var(--c-text); font-family: 'Fredoka', sans-serif; font-weight: 600; letter-spacing: 0; }
html[data-design="clay"] :is(.confirm-sub, .ci-meta, .ci-remove, .pay-note, .pay-trust, .pay-card .lines, .login-sub, .login-hint, .login-help) { color: var(--c-soft); }
html[data-design="clay"] .pay-note.warn { color: #8A3D00; }
html[data-design="clay"] .ci-price { color: var(--c-text); }
html[data-design="clay"] .confirm-card.confirmed { background: var(--c-mint); }
html[data-design="clay"] .confirm-avatar { border-radius: 18px; }
html[data-design="clay"] .total-row .value { font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--c-text); background: var(--c-butter); padding: .1rem .7rem; border-radius: 999px; box-shadow: var(--puff-sm); }

/* Login-Fenster */
html[data-design="clay"] .edition b, html[data-design="clay"] .edition i { color: var(--c-text); }
html[data-design="clay"] .edition small { color: var(--c-soft); }
html[data-design="clay"] .edition.active { background: var(--c-butter); box-shadow: var(--press), 0 0 0 3px #F28C28; }

/* Fußzeile, Hinweise */
html[data-design="clay"] .footer { color: var(--c-soft); border-top: none; background: rgba(255,244,232,.92); border-radius: 30px 30px 0 0; box-shadow: var(--puff); }
html[data-design="clay"] .footer .copyright, html[data-design="clay"] .footer-links a { color: var(--c-text); }
html[data-design="clay"] .footer .copyright span { color: #8F4306; }
html[data-design="clay"] .footer .copy-subtext { color: var(--c-soft); }
html[data-design="clay"] .cart-hint { font-family: 'Fredoka', sans-serif; color: var(--c-text); background: var(--c-surface); border-radius: 999px; box-shadow: var(--puff-sm); }
html[data-design="clay"] .mobile-cartbar .btn { box-shadow: var(--puff); }

/* Handy */
@media (max-width: 991px) {
    html[data-design="clay"] .hero-inner { margin: 4.2rem 12px 0; padding: 14px 12px 16px; background: var(--c-surface); border-radius: 30px; box-shadow: var(--puff); gap: .8rem .6rem; }
    html[data-design="clay"] .hero-logo { max-height: 84px; }
    html[data-design="clay"] .main-container { margin-top: 18px; }
    html[data-design="clay"] .cat-list { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
    html[data-design="clay"] .catnav.card { padding: 10px; }
    html[data-design="clay"] .catnav a { padding: .7rem .3rem; border-radius: 18px; }
    html[data-design="clay"] .catnav a .cat-icon { width: 100%; display: flex; justify-content: center; }
    html[data-design="clay"] .cat-list .cat-icon img { width: 100%; height: auto; max-height: 26px; object-fit: contain; }
    html[data-design="clay"] main > .card { padding: 1.4rem 1.1rem 1.8rem; }
}
@media (max-width: 575px) {
    html[data-design="clay"] .package-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    html[data-design="clay"] .pkg { padding: 1rem .6rem 1rem; }
    html[data-design="clay"] .pkg-img { width: 112px; height: 112px; padding: 10px; }
    html[data-design="clay"] .pkg-img img { max-height: 88px; }
    html[data-design="clay"] .pkg-name { font-size: .95rem; }
    html[data-design="clay"] .pkg-actions { gap: .35rem; }
    html[data-design="clay"] .pkg-actions .btn { padding: .55rem .7rem; font-size: .85rem; }
    html[data-design="clay"] .status-title { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-design="clay"] :is(.btn, .pkg, .catnav a, .pkg-img img) { transition: none; }
    html[data-design="clay"] .pkg:hover, html[data-design="clay"] .pkg:hover .pkg-img img { transform: none; }
}

/* ------------------------------------------------------------
   2) Y2K „Chrom-Desktop 2001“
   Der Store als glänzendes Programmfenster: Chrom-Titelleiste, schmales
   Chrom-Dock links mit Kategorie-Kapseln, Pakete als Gel-Blasen,
   Preise als LCD-Anzeige. Audiowide + Chakra Petch. Hintergrund wie Glas.
   ------------------------------------------------------------ */
html[data-design="y2k"] {
    --fg: 255,255,255; --ink: 0,0,0; --strong: #fff;
    --primary: #FBD04A; --primary-light: #FFE27A; --primary-rgb: 251,208,74;
    --font-head: 'Audiowide', 'Chakra Petch', system-ui, sans-serif; --font-body: 'Chakra Petch', system-ui, sans-serif;
    --y-glass: rgba(26,14,52,.78); --y-glass-2: rgba(255,255,255,.06);
    --chrome: linear-gradient(180deg, #FFFFFF 0%, #E3E6F0 34%, #9298AE 50%, #E8EBF4 68%, #FFFFFF 100%);
    --holo: linear-gradient(115deg, #9EF0FF 0%, #C8A8FF 30%, #FF9BE2 55%, #FFE27A 80%, #9EF0FF 100%);
    --aqua: radial-gradient(120% 95% at 32% 12%, #FFFFFF 0%, #C9F6FF 16%, #55C8FF 52%, #1C64C8 100%);
    --gel-gold: linear-gradient(180deg, #FFF6C8 0%, #FFE27A 38%, #F5B829 52%, #FFD34D 100%);
    --gloss: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(60,20,120,.25);
    --lcd: #7DF9FF;
}
html[data-design="y2k"] ::selection { background: rgba(255,155,226,.5); color: #fff; }
html[data-design="y2k"] :focus-visible { outline: 2px solid var(--lcd); outline-offset: 3px; }
html[data-design="y2k"] a { color: #9EF0FF; }

/* Flächen: violettes Glas mit Holo-Rand */
html[data-design="y2k"] :is(.card, dialog.dlg, .drawer, .toast, .announcement, .info-box, .account-card.loggedin, .pay-card) {
    background: linear-gradient(var(--y-glass), var(--y-glass)) padding-box, var(--holo) border-box;
    border: 2px solid transparent; border-radius: 20px; box-shadow: 0 30px 70px -30px rgba(120,80,255,.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); color: #fff;
}
html[data-design="y2k"] :is(.pkg, .pkg-row, .cart-item, .co-item, .confirm-card, .step, .widget, .name-switch, .edition) {
    background: var(--y-glass-2); border: 1px solid rgba(200,168,255,.35); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
html[data-design="y2k"] :is(.qty, .input, .login .input, .name-preview, .dlg-close, .social a, .currency-select, .footer-lang select) {
    background: rgba(6,4,20,.6); border: 1px solid rgba(158,240,255,.35); border-radius: 12px; color: #fff; box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}
html[data-design="y2k"] dialog.dlg::backdrop { background: rgba(10,4,30,.6); }

/* Fenster-Titelleiste über dem Inhalt */
html[data-design="y2k"] main > .card { position: relative; padding: 3.6rem 2.2rem 2.4rem; overflow: hidden; }
html[data-design="y2k"] main > .card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px; background: var(--chrome);
    border-bottom: 1px solid rgba(60,20,120,.4); box-shadow: inset 0 -1px 0 rgba(255,255,255,.6);
}
html[data-design="y2k"] main > .card::after {
    content: ""; position: absolute; top: 10px; right: 16px; width: 54px; height: 14px;
    background: radial-gradient(circle at 7px 7px, #FF7AC8 6px, transparent 7px), radial-gradient(circle at 27px 7px, #FFE27A 6px, transparent 7px), radial-gradient(circle at 47px 7px, #7DF9FF 6px, transparent 7px);
}

/* Knöpfe: Gel mit Glanzkante */
html[data-design="y2k"] .btn { border-radius: 999px; font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
html[data-design="y2k"] .btn-gold, html[data-design="y2k"] .btn-gold:hover { background: var(--gel-gold); color: #2A1640; filter: none; box-shadow: var(--gloss), 0 8px 22px -8px rgba(251,208,74,.75); }
html[data-design="y2k"] .btn-gold:hover { filter: brightness(1.06) saturate(1.1); }
html[data-design="y2k"] .btn-gold:active, html[data-design="y2k"] .btn-ghost:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(60,20,0,.4); }
html[data-design="y2k"] .btn-ghost, html[data-design="y2k"] .btn-ghost:hover { background: var(--chrome); color: #2A1640; border: none; filter: none; box-shadow: var(--gloss); }
html[data-design="y2k"] .btn-danger { background: linear-gradient(180deg, #FFC2E6 0%, #FF7AC8 45%, #E0459F 55%, #FF8FD3 100%); color: #2A0A22; box-shadow: var(--gloss); }
html[data-design="y2k"] .btn-link, html[data-design="y2k"] .topbar .btn-link { background: rgba(26,14,52,.7); color: #fff; border: 1px solid rgba(200,168,255,.45); border-radius: 999px; }
html[data-design="y2k"] .btn[disabled], html[data-design="y2k"] .btn.disabled { background: rgba(255,255,255,.14); color: rgba(255,255,255,.65); box-shadow: none; }
html[data-design="y2k"] .badge { color: #2A1640; }
html[data-design="y2k"] .badge-gold { background: var(--gel-gold); box-shadow: var(--gloss); }
html[data-design="y2k"] .badge-muted { background: var(--chrome); box-shadow: var(--gloss); }
html[data-design="y2k"] .cart-pill { background: #2A1640; color: var(--lcd); }
html[data-design="y2k"] .cart-btn.filled { color: #2A1640; }
html[data-design="y2k"] .cart-btn.filled .cart-pill { background: #2A1640; color: var(--lcd); }

/* Kopf: Logo mit Chrom-Orbit, Gel-Pillen darunter */
html[data-design="y2k"] .topbar.scrolled { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="y2k"] .topbar.scrolled .container { background: rgba(26,14,52,.82); border: 1px solid rgba(200,168,255,.4); border-radius: 999px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html[data-design="y2k"] .hero-logo-link { position: relative; display: inline-grid; place-items: center; }
html[data-design="y2k"] .hero-logo-link::before {
    content: ""; position: absolute; width: 150%; height: 46%; border-radius: 50%; border: 3px solid transparent;
    background: var(--chrome) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    background-size: 100% 300%; transform: rotate(-14deg); animation: y2k-sheen 5s linear infinite; pointer-events: none; opacity: .95;
}
@keyframes y2k-sheen { from { background-position: 0 0; } to { background-position: 0 100%; } }
html[data-design="y2k"] .status-circle { background: var(--chrome); color: #2A1640; border: none; box-shadow: var(--gloss), 0 10px 26px -10px rgba(158,240,255,.6); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="y2k"] .status-text { background: rgba(26,14,52,.75); border: 1px solid rgba(200,168,255,.45); border-radius: 999px; padding: .35rem 1rem; }
html[data-design="y2k"] .status-title { font-family: 'Audiowide', sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: .02em; color: #fff; }
html[data-design="y2k"] .status-sub { color: var(--lcd); }
@media (min-width: 992px) {
    html[data-design="y2k"] .hero { height: auto; }
    html[data-design="y2k"] .hero-inner { position: relative; top: auto; display: grid; grid-template-columns: auto auto; justify-content: center; gap: 1.4rem 2rem; padding: 80px 16px 0; }
    html[data-design="y2k"] .hero-logo-link { grid-column: 1 / -1; order: -1; }
    html[data-design="y2k"] .hero-logo { height: 120px; }
    html[data-design="y2k"] .status-play, html[data-design="y2k"] .status-discord { margin: 0; }
    html[data-design="y2k"] .main-container { margin-top: 34px; }
    /* Schmales Dock links */
    html[data-design="y2k"] .main-grid { grid-template-columns: 150px minmax(0,1fr); gap: 22px; }
    html[data-design="y2k"] .sidebar { position: sticky; top: 84px; gap: .8rem; }
    html[data-design="y2k"] .account-card { flex-direction: column; text-align: center; height: auto; padding: 1rem .6rem; gap: .5rem; }
    html[data-design="y2k"] .account-card .account-avatar { margin: 0; }
    html[data-design="y2k"] .account-card .account-arrow { display: none; }
    html[data-design="y2k"] .account-card .account-name { font-size: .95rem; word-break: break-all; }
    html[data-design="y2k"] .account-card .account-sub { font-size: .72rem; }
    html[data-design="y2k"] .name-switch { padding: .5rem .4rem; font-size: .8rem; }
}

/* Konto, Dock-Kapseln */
html[data-design="y2k"] .side-label { display: none; }
html[data-design="y2k"] .account-card .account-name { font-family: 'Audiowide', sans-serif; font-weight: 400; color: #fff; letter-spacing: .01em; }
html[data-design="y2k"] .account-card .account-sub { color: var(--lcd); font-weight: 600; }
html[data-design="y2k"] .account-card .account-arrow { color: var(--primary); }
html[data-design="y2k"] .account-avatar img { border-radius: 10px !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(158,240,255,.6); }
html[data-design="y2k"] .account-card.loggedout { background: var(--holo); color: #2A1640; border: none; border-radius: 20px; animation: none; box-shadow: var(--gloss); }
html[data-design="y2k"] .account-card.loggedout .account-name, html[data-design="y2k"] .account-card.loggedout .account-arrow { color: #2A1640; }
html[data-design="y2k"] .name-switch { color: #fff; }
html[data-design="y2k"] .name-switch i { color: var(--primary); }
html[data-design="y2k"] .name-switch b { color: #fff; }
html[data-design="y2k"] .catnav.card { padding: 12px 10px; border-radius: 26px; }
html[data-design="y2k"] .cat-list { flex-direction: column; gap: 10px; }
html[data-design="y2k"] .catnav a, html[data-design="y2k"] .cat-opener {
    width: 100%; justify-content: center; padding: .7rem .4rem; border-radius: 999px; background: rgba(255,255,255,.06);
    border: 1px solid rgba(200,168,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-design="y2k"] .catnav a:hover { background: rgba(158,240,255,.12); }
html[data-design="y2k"] .catnav a.active { background: var(--aqua); border-color: #fff; box-shadow: var(--gloss), 0 0 0 2px rgba(158,240,255,.5), 0 8px 24px -8px rgba(85,200,255,.8); }
html[data-design="y2k"] .catnav a.active::after { display: none; }
html[data-design="y2k"] .cat-list .cat-icon img { height: 30px; max-width: 100%; }
html[data-design="y2k"] .cat-list:has(a.active) > a:not(.active) .cat-icon img { filter: saturate(.35) brightness(.9); }
html[data-design="y2k"] .catnav a.active .cat-icon img { filter: drop-shadow(0 2px 0 rgba(20,40,120,.6)); transform: none; }
html[data-design="y2k"] .cat-icon { min-width: 0; }
html[data-design="y2k"] .sidebar-donator { display: none; }

/* Inhalt: Chrom-Titel, Gel-Blasen, LCD-Preise */
html[data-design="y2k"] .store-heading { font-family: 'Audiowide', sans-serif; font-weight: 400; color: #fff; -webkit-text-fill-color: #fff; }
html[data-design="y2k"] .category-description { color: rgba(255,255,255,.82); }
html[data-design="y2k"] .category-description strong, html[data-design="y2k"] .category-description b { font-family: var(--font-body); font-weight: 700; color: #fff; }
/* Bewusste Ausnahme: Chrom-Schrift ist das Kennzeichen von Y2K (Alex' Vorgabe), nur auf dem Seitentitel */
html[data-design="y2k"] .category-description p:first-child > strong:first-child {
    font-family: 'Audiowide', sans-serif; font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: .02em; text-transform: uppercase;
    background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(90,50,180,.8));
}
html[data-design="y2k"] .package-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 1.8rem; }
html[data-design="y2k"] .pkg { padding: 1.2rem 1rem 1.2rem; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s; }
html[data-design="y2k"] .pkg:hover { background: rgba(158,240,255,.08); border-color: rgba(158,240,255,.7); transform: translateY(-3px); }
html[data-design="y2k"] .pkg-img { width: 148px; height: 148px; margin: 0 auto; border-radius: 50%; background: var(--aqua); padding: 16px; box-shadow: inset 0 -10px 20px rgba(10,40,120,.5), 0 14px 30px -12px rgba(85,200,255,.7); position: relative; }
html[data-design="y2k"] .pkg-img::after { content: ""; position: absolute; left: 18%; top: 8%; width: 46%; height: 26%; border-radius: 50%; background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0)); pointer-events: none; }
html[data-design="y2k"] .pkg-img img { max-height: 112px; filter: drop-shadow(0 6px 6px rgba(10,30,90,.55)); }
html[data-design="y2k"] .pkg-badge { top: .7rem; left: .7rem; z-index: 2; }
html[data-design="y2k"] .pkg-name { font-family: 'Audiowide', sans-serif; font-weight: 400; font-size: .98rem; letter-spacing: .01em; color: #fff; margin-top: 1rem; }
html[data-design="y2k"] .pkg-price { margin-top: .55rem; font-family: 'Chakra Petch', sans-serif; font-weight: 700; color: #fff; }
html[data-design="y2k"] .pkg-price > span:not(.was):not(.ci-meta):not(.free) {
    background: #05040F; color: var(--lcd); border: 1px solid rgba(158,240,255,.45); border-radius: 8px; padding: .2rem .7rem;
    font-variant-numeric: tabular-nums; letter-spacing: .08em; box-shadow: inset 0 2px 8px rgba(0,0,0,.8), 0 0 14px -4px rgba(125,249,255,.6);
}
html[data-design="y2k"] .pkg-price .was { color: #FF9BC9; }
html[data-design="y2k"] .pkg-qty-total { color: var(--lcd); }
html[data-design="y2k"] .qty-card button { color: #fff; }
html[data-design="y2k"] .qty-card button:hover { background: rgba(158,240,255,.16); }
html[data-design="y2k"] .qty-card input { color: var(--lcd); font-family: 'Chakra Petch', sans-serif; }
html[data-design="y2k"] .pkg > .pkg-actions { margin-top: auto; padding-top: 1rem; }

/* Startseite, Infokästen */
html[data-design="y2k"] .info-title { background: var(--chrome) !important; color: #2A1640 !important; border: none; box-shadow: var(--gloss); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="y2k"] .trust-row .t i, html[data-design="y2k"] .pay-trust .t i { color: var(--lcd); }

/* Kasse */
html[data-design="y2k"] .step.current { background: rgba(158,240,255,.12); border-color: var(--lcd); }
html[data-design="y2k"] .step .num, html[data-design="y2k"] .co-section-title .num { background: var(--chrome); color: #2A1640; box-shadow: var(--gloss); }
html[data-design="y2k"] .step.current .num { background: var(--gel-gold); color: #2A1640; }
html[data-design="y2k"] :is(.co-section-title, .confirm-name, .total-row .label, .drawer-title, .login-title) { font-family: 'Audiowide', sans-serif; font-weight: 400; letter-spacing: .02em; color: #fff; }
html[data-design="y2k"] .total-row .value { font-family: 'Chakra Petch', sans-serif; font-weight: 700; color: var(--lcd); background: #05040F; padding: .1rem .6rem; border-radius: 8px; border: 1px solid rgba(158,240,255,.45); letter-spacing: .06em; }
html[data-design="y2k"] .ci-price { color: var(--lcd); }
html[data-design="y2k"] .confirm-card.confirmed { background: rgba(125,249,200,.12); border-color: #7DF9C8; }

/* Login */
html[data-design="y2k"] .edition.active { background: rgba(158,240,255,.14); border-color: var(--lcd); }
html[data-design="y2k"] .edition.active i { color: var(--lcd); }

/* Fußzeile */
html[data-design="y2k"] .footer { border-top: 1px solid rgba(200,168,255,.35); background: rgba(14,8,32,.7); }
html[data-design="y2k"] .footer .copyright span { color: var(--primary-light); }
html[data-design="y2k"] .cart-hint { font-family: 'Chakra Petch', sans-serif; font-weight: 700; color: #2A1640; background: var(--chrome); border-radius: 999px; box-shadow: var(--gloss); }

/* Handy: Dock wird zur Kapsel-Leiste */
@media (max-width: 991px) {
    html[data-design="y2k"] .hero-inner { padding: 4.4rem 12px 1.2rem; }
    html[data-design="y2k"] .hero-logo { max-height: 92px; }
    html[data-design="y2k"] .main-container { margin-top: 10px; }
    html[data-design="y2k"] .cat-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; flex-direction: row; }
    html[data-design="y2k"] .catnav a { padding: .55rem .3rem; }
    html[data-design="y2k"] .catnav a .cat-icon { width: 100%; display: flex; justify-content: center; }
    html[data-design="y2k"] .cat-list .cat-icon img { width: 100%; height: auto; max-height: 24px; object-fit: contain; }
    html[data-design="y2k"] main > .card { padding: 3.2rem 1.1rem 1.8rem; }
    html[data-design="y2k"] .status-text { padding: .25rem .6rem; }
    html[data-design="y2k"] .status-title { font-size: .82rem; }
    html[data-design="y2k"] .status-sub { font-size: .66rem; }
    html[data-design="y2k"] .hero-logo-link::before { width: 120%; }
}
@media (max-width: 575px) {
    html[data-design="y2k"] .package-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    html[data-design="y2k"] .pkg { padding: 1rem .55rem; }
    html[data-design="y2k"] .pkg-img { width: 108px; height: 108px; padding: 10px; }
    html[data-design="y2k"] .pkg-img img { max-height: 82px; }
    html[data-design="y2k"] .pkg-name { font-size: .8rem; }
    html[data-design="y2k"] .pkg-actions { gap: .35rem; }
    html[data-design="y2k"] .pkg-actions .btn { padding: .55rem .7rem; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-design="y2k"] .hero-logo-link::before { animation: none; }
    html[data-design="y2k"] .pkg, html[data-design="y2k"] .pkg:hover { transition: none; transform: none; }
}

/* ------------------------------------------------------------
   3) NEUMORPHISM „Soft-Konsole“ (dunkel)
   Alles aus einem Grafit. Tiefe nur aus Licht oben links + Schatten unten
   rechts. Kategorien in einer eingelassenen Rille, Pakete als liegende
   Regler-Karten, Logo in einem erhabenen Drehknopf. Manrope. Hintergrund wie Glas.
   ------------------------------------------------------------ */
html[data-design^="neu"] {
    --fg: 255,255,255; --ink: 0,0,0; --strong: var(--t1);
    --primary: #FCA532; --primary-light: #FFC266; --primary-rgb: 252,165,50;
    --font-head: 'Manrope', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif;
    --t1: #F2F3F5; --t2: #E6E8EC; --t3: #C9CDD4; --t4: #AEB3BC; --on-primary: #1E2025; --danger-t: #FF8A80;
    --photo-sh: rgba(0,0,0,.45); --photo-edge: rgba(255,255,255,.07); --g-body: #E6E8EC;
    --g: #1E2025; --g-hi: #2A2D34; --g-lo: #131519;
    --out: 9px 9px 18px var(--g-lo), -9px -9px 18px var(--g-hi);
    --out-sm: 5px 5px 10px var(--g-lo), -5px -5px 10px var(--g-hi);
    --in: inset 5px 5px 10px var(--g-lo), inset -5px -5px 10px var(--g-hi);
    --in-sm: inset 3px 3px 6px var(--g-lo), inset -3px -3px 6px var(--g-hi);
}
html[data-design^="neu"] ::selection { background: rgba(var(--primary-rgb),.4); color: #fff; }
html[data-design^="neu"] :focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

/* Grafit-Flächen ohne Rahmen */
html[data-design^="neu"] :is(.card, dialog.dlg, .drawer, .toast, .announcement, .info-box, .account-card.loggedin, .pay-card) {
    background: var(--g); color: var(--t2); border: none; border-radius: 26px; box-shadow: var(--out); -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-design^="neu"] :is(.pkg, .pkg-row, .cart-item, .co-item, .confirm-card, .step, .widget, .name-switch, .edition) {
    background: var(--g); border: none; border-radius: 22px; box-shadow: var(--out-sm);
}
html[data-design^="neu"] :is(.qty, .input, .login .input, .name-preview, .dlg-close, .social a, .currency-select, .footer-lang select) {
    background: var(--g); border: none; border-radius: 14px; box-shadow: var(--in-sm); color: var(--t1);
}
html[data-design^="neu"] dialog.dlg::backdrop { background: rgba(8,9,12,.65); }

/* Knöpfe: erhaben, beim Drücken eingelassen */
html[data-design^="neu"] .btn { border-radius: 16px; font-weight: 800; letter-spacing: .01em; transition: box-shadow .16s ease, color .16s; }
html[data-design^="neu"] .btn-gold, html[data-design^="neu"] .btn-gold:hover { background: var(--g); color: var(--primary); box-shadow: var(--out-sm); filter: none; }
html[data-design^="neu"] .btn-gold:hover { color: var(--primary-light); }
html[data-design^="neu"] .btn-ghost, html[data-design^="neu"] .btn-ghost:hover { background: var(--g); color: var(--t3); border: none; box-shadow: var(--out-sm); filter: none; }
html[data-design^="neu"] :is(.btn-gold, .btn-ghost, .btn-danger, .btn-link):active { box-shadow: var(--in-sm); }
html[data-design^="neu"] .btn-danger { background: var(--g); color: var(--danger-t); box-shadow: var(--in-sm); }
html[data-design^="neu"] .btn-link, html[data-design^="neu"] .topbar .btn-link { background: var(--g); color: var(--t3); box-shadow: var(--out-sm); border-radius: 14px; }
html[data-design^="neu"] .btn[disabled], html[data-design^="neu"] .btn.disabled { background: var(--g); color: var(--t4); box-shadow: var(--in-sm); }
html[data-design^="neu"] .cart-btn.filled { background: var(--primary); color: var(--on-primary); box-shadow: var(--out-sm); }
html[data-design^="neu"] .cart-btn.filled .cart-pill { background: var(--on-primary); color: var(--primary); }
html[data-design^="neu"] .cart-btn.filled::after { display: none; }
html[data-design^="neu"] .badge { color: var(--primary); background: var(--g); box-shadow: var(--out-sm); }
html[data-design^="neu"] .cart-pill { background: var(--primary); color: var(--on-primary); }

/* Kopf: Logo im Drehknopf, runde Knöpfe daneben */
html[data-design^="neu"] .topbar.scrolled { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design^="neu"] .topbar.scrolled .container { background: var(--g); border: none; border-radius: 20px; box-shadow: var(--out); }
html[data-design^="neu"] .hero-logo-link { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; background: var(--g); box-shadow: var(--out), inset 0 0 0 10px var(--g), inset 4px 4px 10px var(--g-hi); }
html[data-design^="neu"] .hero-logo { height: 92px; filter: drop-shadow(0 6px 8px var(--photo-sh)); }
html[data-design^="neu"] .status-circle { background: var(--g); color: var(--primary); border: none; box-shadow: var(--out-sm); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design^="neu"] .status:hover .status-circle { transform: none; color: var(--primary-light); }
html[data-design^="neu"] .status:active .status-circle { box-shadow: var(--in-sm); }
html[data-design^="neu"] .status-title { font-weight: 800; letter-spacing: 0; color: var(--t1); }
html[data-design^="neu"] .status-sub { color: var(--t4); }
html[data-design^="neu"] .status-badge { background: var(--primary); color: var(--on-primary); }
@media (min-width: 992px) {
    html[data-design^="neu"] .hero { height: auto; }
    html[data-design^="neu"] .hero-inner { position: relative; top: auto; display: flex; justify-content: center; align-items: center; gap: 44px; padding: 78px 16px 0; }
    html[data-design^="neu"] .status-play, html[data-design^="neu"] .status-discord { margin: 0; }
    html[data-design^="neu"] .main-container { margin-top: 36px; }
    /* Volle Breite: Kategorie-Rille links, Konto-Panel rechts */
    html[data-design^="neu"] .main-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
    html[data-design^="neu"] .sidebar { display: grid; grid-template-columns: minmax(0,1fr) 300px; column-gap: 30px; row-gap: 12px; align-items: center; }
    html[data-design^="neu"] .sidebar > .catnav { grid-column: 1; grid-row: 1 / span 2; }
    html[data-design^="neu"] .sidebar > .account-card { grid-column: 2; grid-row: 1; }
    html[data-design^="neu"] .sidebar > .name-switch { grid-column: 2; grid-row: 2; }
    html[data-design^="neu"] .sidebar > .sidebar-modules { grid-column: 1 / -1; }
}

/* Konto */
html[data-design^="neu"] .side-label { display: none; }
html[data-design^="neu"] .account-card { height: auto; min-height: 76px; padding: .8rem 0 .8rem 1rem; }
html[data-design^="neu"] .account-card .account-name { font-weight: 800; color: var(--t1); }
html[data-design^="neu"] .account-card .account-sub { color: var(--t4); }
html[data-design^="neu"] .account-card .account-arrow { color: var(--primary); }
html[data-design^="neu"] .account-card:active { box-shadow: var(--in); }
html[data-design^="neu"] .account-avatar img { border-radius: 12px !important; }
html[data-design^="neu"] .account-card.loggedout { background: var(--g); color: var(--t1); border: none; border-radius: 26px; box-shadow: var(--out); animation: none; }
html[data-design^="neu"] .account-card.loggedout .account-name { color: var(--primary); }
html[data-design^="neu"] .account-card.loggedout .account-arrow { color: var(--primary); }
html[data-design^="neu"] .name-switch { color: var(--t3); }
html[data-design^="neu"] .name-switch b { color: var(--t1); }
html[data-design^="neu"] .name-switch:active { box-shadow: var(--in-sm); }

/* Kategorie-Rille: eingelassene Bahn, aktives Segment hebt sich heraus */
html[data-design^="neu"] .catnav.card { padding: 10px; border-radius: 999px; box-shadow: var(--in); }
html[data-design^="neu"] .cat-list { flex-direction: row; flex-wrap: nowrap; gap: 8px; justify-content: space-between; }
html[data-design^="neu"] .catnav a, html[data-design^="neu"] .cat-opener { flex: 1; justify-content: center; width: auto; padding: .8rem .6rem; border-radius: 999px; transition: box-shadow .2s ease; }
html[data-design^="neu"] .catnav a:hover { box-shadow: var(--out-sm); }
html[data-design^="neu"] .catnav a.active { background: var(--g); box-shadow: var(--out-sm), inset 0 -3px 0 var(--primary); }
html[data-design^="neu"] .catnav a.active::after { display: none; }
html[data-design^="neu"] .cat-list .cat-icon img { height: 34px; max-width: 100%; }
html[data-design^="neu"] .cat-icon { min-width: 0; }
html[data-design^="neu"] .sidebar-donator { display: none; }

/* Inhalt: liegende Regler-Karten */
html[data-design^="neu"] main > .card { padding: 2.1rem 2.3rem 2.4rem; }
html[data-design^="neu"] .store-heading { font-weight: 800; color: var(--t1); -webkit-text-fill-color: var(--t1); letter-spacing: -.02em; }
html[data-design^="neu"] .category-description { color: var(--t3); }
html[data-design^="neu"] .category-description strong, html[data-design^="neu"] .category-description b { font-family: var(--font-body); font-weight: 800; color: var(--t1); }
html[data-design^="neu"] .category-description p:first-child > strong:first-child { font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: -.03em; color: var(--t1); }
html[data-design^="neu"] .package-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; margin-top: 1.9rem; }
html[data-design^="neu"] .pkg {
    display: grid; grid-template-columns: 132px minmax(0,1fr); column-gap: 20px; row-gap: .45rem; align-items: center; justify-items: start;
    text-align: left; padding: 1.1rem 1.3rem; transition: box-shadow .2s ease;
}
html[data-design^="neu"] .pkg:hover { background: var(--g); box-shadow: var(--out); }
html[data-design^="neu"] .pkg > * { grid-column: 2; margin: 0; }
html[data-design^="neu"] .pkg > .pkg-img { grid-column: 1; grid-row: 1 / span 6; width: 132px; height: 132px; border-radius: 26px; box-shadow: var(--in); padding: 12px; }
html[data-design^="neu"] .pkg > .pkg-badge { position: absolute; top: .8rem; left: .8rem; grid-column: auto; }
html[data-design^="neu"] .pkg-img img { max-height: 104px; filter: drop-shadow(0 6px 6px var(--photo-sh)); }
html[data-design^="neu"] .pkg-name { font-weight: 800; font-size: 1.1rem; color: var(--t1); letter-spacing: -.01em; }
html[data-design^="neu"] .pkg-price { justify-content: flex-start; font-weight: 800; color: var(--primary); }
html[data-design^="neu"] .pkg-price > span:not(.was):not(.ci-meta):not(.free) { background: var(--g); padding: .25rem .75rem; border-radius: 12px; box-shadow: var(--in-sm); font-variant-numeric: tabular-nums; }
html[data-design^="neu"] .pkg-price .was { color: var(--danger-t); }
html[data-design^="neu"] .pkg-qty-total { color: var(--t4); }
html[data-design^="neu"] .qty-card { margin-top: .2rem; }
html[data-design^="neu"] .qty-card button { color: var(--t2); }
html[data-design^="neu"] .qty-card button:hover { background: transparent; color: var(--primary); }
html[data-design^="neu"] .pkg-actions { justify-content: flex-start; margin-top: .3rem; }

/* Startseite, Infokästen */
html[data-design^="neu"] .info-title { background: var(--g) !important; border: none; box-shadow: var(--out-sm); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design^="neu"] .trust-row .t i, html[data-design^="neu"] .pay-trust .t i { color: var(--primary); }

/* Kasse */
html[data-design^="neu"] .step.current { background: var(--g); box-shadow: var(--in-sm); color: var(--t1); }
html[data-design^="neu"] .step .num, html[data-design^="neu"] .co-section-title .num { background: var(--g); color: var(--t2); box-shadow: var(--out-sm); }
html[data-design^="neu"] .step.current .num, html[data-design^="neu"] .co-section-title .num { color: var(--primary); }
html[data-design^="neu"] .total-row .value { color: var(--primary); background: var(--g); padding: .1rem .7rem; border-radius: 12px; box-shadow: var(--in-sm); }
html[data-design^="neu"] .ci-price { color: var(--primary); }
html[data-design^="neu"] .confirm-card.confirmed { box-shadow: var(--in-sm); background: var(--g); }
html[data-design^="neu"] .confirm-avatar { border-radius: 16px; box-shadow: var(--in-sm); }

/* Login */
html[data-design^="neu"] .edition.active { box-shadow: var(--in-sm); background: var(--g); }
html[data-design^="neu"] .edition.active i, html[data-design^="neu"] .edition.active b { color: var(--primary); }

/* Fußzeile */
html[data-design^="neu"] .footer { border-top: none; background: var(--g); box-shadow: 0 -9px 18px -9px var(--g-lo); }
html[data-design^="neu"] .cart-hint { background: var(--g); color: var(--primary); box-shadow: var(--out-sm); border-radius: 14px; }

/* Handy */
@media (max-width: 991px) {
    html[data-design^="neu"] .hero-inner { padding: 4.4rem 12px 1.2rem; }
    html[data-design^="neu"] .hero-logo-link { width: 112px; height: 112px; }
    html[data-design^="neu"] .hero-logo { height: 70px; max-height: 70px; }
    html[data-design^="neu"] .main-container { margin-top: 10px; }
    html[data-design^="neu"] .catnav.card { padding: 6px; }
    html[data-design^="neu"] .cat-list { gap: 4px; }
    html[data-design^="neu"] .catnav a { padding: .55rem .25rem; }
    html[data-design^="neu"] .catnav a .cat-icon { width: 100%; display: flex; justify-content: center; }
    html[data-design^="neu"] .cat-list .cat-icon img { width: 100%; height: auto; max-height: 24px; object-fit: contain; }
    html[data-design^="neu"] main > .card { padding: 1.4rem 1.1rem 1.8rem; }
    html[data-design^="neu"] .package-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 575px) {
    html[data-design^="neu"] .pkg { grid-template-columns: 96px minmax(0,1fr); column-gap: 14px; padding: .9rem 1rem; }
    html[data-design^="neu"] .pkg > .pkg-img { width: 96px; height: 96px; border-radius: 20px; padding: 8px; }
    html[data-design^="neu"] .pkg-img img { max-height: 78px; }
    html[data-design^="neu"] .pkg-name { font-size: 1rem; }
    html[data-design^="neu"] .pkg-actions { gap: .4rem; }
    html[data-design^="neu"] .pkg-actions .btn { padding: .55rem .8rem; font-size: .85rem; }
    html[data-design^="neu"] .status-title { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-design^="neu"] :is(.btn, .pkg, .catnav a) { transition: none; }
}

/* ------------------------------------------------------------
   4) NEO-BRUTALISM „Blockstapel“
   Jede Fläche ist ein weißer Block mit 3-px-Kante und gestuftem
   Pixel-Schatten. Kategorien als Block-Reiter oben (keine Seitenleiste),
   Pakete als Preisschild-Blöcke, Knöpfe drücken sich beim Klick ein.
   Schrift: Bungee (Schilder) + Archivo (Text). Hintergrund wie Glas.
   ------------------------------------------------------------ */
html[data-design="brutal"] {
    --ink-b: #111; --fg: 17,17,17; --ink: 0,0,0; --strong: #111;
    --primary: #FBD04A; --primary-light: #FBD04A; --primary-rgb: 251,208,74;
    --font-head: 'Bungee', 'Archivo', sans-serif; --font-body: 'Archivo', system-ui, sans-serif;
    --b3: 3px solid #111;
    --step: 3px 0 0 #111, 3px 3px 0 #111, 6px 3px 0 #111, 6px 6px 0 #111;
    --step-sm: 2px 0 0 #111, 2px 2px 0 #111, 4px 2px 0 #111, 4px 4px 0 #111;
    --gold: #FBD04A; --grass: #7BC043; --diamond: #5CE1E6; --redstone: #FF5A5A; --ring-brown: #B06116;
}
html[data-design="brutal"] body { color: #111; }
html[data-design="brutal"] ::selection { background: var(--gold); color: #111; }
html[data-design="brutal"] :focus-visible { outline: 3px solid #111; outline-offset: 3px; }

/* Grundflächen: Block statt Glas */
html[data-design="brutal"] :is(.card, dialog.dlg, .drawer, .toast, .announcement, .info-box, .account-card.loggedin, .pkg, .pkg-row, .cart-item, .co-item, .confirm-card, .step, .widget, .name-switch, .edition, .name-preview, .pay-card) {
    background: #fff; color: #111; border: var(--b3); border-radius: 0; box-shadow: var(--step);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-design="brutal"] dialog.dlg::backdrop { background: rgba(17,17,17,.55); }
html[data-design="brutal"] :is(.qty, .input, .login .input, .dlg-close, .social a, .currency-select, .footer-lang select) {
    background: #fff; color: #111; border: var(--b3); border-radius: 0; box-shadow: none;
}
html[data-design="brutal"] .input::placeholder { color: #555; }
html[data-design="brutal"] .input:focus { outline: none; background: #FFF8D6; }

/* Knöpfe: Blöcke, die sich beim Drücken einsetzen */
html[data-design="brutal"] .btn {
    border-radius: 0; border: var(--b3); box-shadow: var(--step-sm); font-family: var(--font-body); font-weight: 800;
    text-transform: uppercase; letter-spacing: .02em; transition: transform .08s steps(2), box-shadow .08s steps(2);
}
html[data-design="brutal"] .btn:active { transform: translate(4px,4px); box-shadow: none; }
html[data-design="brutal"] .btn-gold, html[data-design="brutal"] .btn-gold:hover { background: var(--gold); color: #111; filter: none; }
html[data-design="brutal"] .btn-gold:hover { background: #FFE07A; }
html[data-design="brutal"] .btn-ghost, html[data-design="brutal"] .btn-ghost:hover { background: #fff; color: #111; border: var(--b3); filter: none; }
html[data-design="brutal"] .btn-danger { background: var(--redstone); color: #111; }
html[data-design="brutal"] .btn-link, html[data-design="brutal"] .topbar .btn-link { background: #fff; color: #111; text-transform: none; }
html[data-design="brutal"] .btn-link:hover { background: var(--gold); color: #111; }
html[data-design="brutal"] .btn[disabled], html[data-design="brutal"] .btn.disabled { background: #E6E6E6; color: #555; box-shadow: none; }
html[data-design="brutal"] .badge { border-radius: 0; border: 2px solid #111; color: #111; }
html[data-design="brutal"] .badge-gold { background: var(--redstone); }
html[data-design="brutal"] .badge-muted { background: var(--diamond); }
html[data-design="brutal"] .cart-pill { background: #111; color: var(--gold); border-radius: 0; }
html[data-design="brutal"] .cart-btn.filled::after { display: none; }
html[data-design="brutal"] .cart-glow { animation: none; outline: 4px solid #111; outline-offset: 3px; }

/* Kopfleiste und Kopf */
html[data-design="brutal"] .topbar.scrolled { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="brutal"] .topbar.scrolled .container { background: #fff; border: var(--b3); border-radius: 0; box-shadow: var(--step-sm); }
html[data-design="brutal"] .status-circle { background: #fff; color: #111; border: var(--b3); border-radius: 0; box-shadow: var(--step-sm); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="brutal"] .status:hover .status-circle { transform: none; background: var(--gold); }
html[data-design="brutal"] .status-text { background: #fff; border: var(--b3); box-shadow: var(--step-sm); padding: .35rem .7rem; }
html[data-design="brutal"] .status-title { font-family: 'Bungee', sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; color: #111; }
html[data-design="brutal"] .status-sub { color: #111; font-weight: 700; }
html[data-design="brutal"] .status-badge { border-radius: 0; border: 2px solid #111; background: var(--redstone); color: #111; }
html[data-design="brutal"] .hero-logo { filter: drop-shadow(4px 4px 0 #111); }

/* Seitenleiste wird zur Leiste oben: Konto links, Kategorie-Reiter rechts */
html[data-design="brutal"] .side-label { font-family: 'Bungee', sans-serif; font-weight: 400; font-style: normal; letter-spacing: .04em; color: #111; background: var(--gold); border: var(--b3); padding: .15rem .55rem; justify-self: start; margin: 0; }
html[data-design="brutal"] .account-card.loggedin, html[data-design="brutal"] .account-card.loggedout { height: auto; min-height: 76px; padding: .7rem 0 .7rem .9rem; }
html[data-design="brutal"] .account-card.loggedout { background: var(--gold); color: #111; border: var(--b3); border-radius: 0; box-shadow: var(--step); animation: none; }
html[data-design="brutal"] .account-card.loggedout:hover { background: #FFE07A; }
html[data-design="brutal"] .account-card .account-name { font-family: 'Bungee', sans-serif; font-weight: 400; color: #111; letter-spacing: 0; }
html[data-design="brutal"] .account-card .account-sub { color: #222; font-weight: 600; }
html[data-design="brutal"] .account-card .account-arrow { color: #111; }
html[data-design="brutal"] .account-card:active { transform: translate(6px,6px); box-shadow: none; }
html[data-design="brutal"] .account-avatar img { border-radius: 0 !important; outline: 2px solid #111; }
html[data-design="brutal"] .account-card.loggedin .account-avatar::after { border-radius: 0; border: 2px solid #111; background: var(--gold); color: #111; box-shadow: none; }
html[data-design="brutal"] .name-switch { margin-top: 0; justify-content: flex-start; color: #111; font-weight: 600; }
html[data-design="brutal"] .name-switch b, html[data-design="brutal"] .name-switch i { color: #111; }
html[data-design="brutal"] .name-switch:hover { background: var(--gold); border-color: #111; }

html[data-design="brutal"] .catnav.card { background: transparent; border: none; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="brutal"] .sidebar-donator { display: none; }
html[data-design="brutal"] .cat-list { flex-direction: row; flex-wrap: wrap; gap: 14px; }
html[data-design="brutal"] .catnav a, html[data-design="brutal"] .cat-opener {
    width: auto; background: #fff; border: var(--b3); box-shadow: var(--step); padding: .7rem 1.1rem; color: #111;
    transition: transform .08s steps(2), box-shadow .08s steps(2), background .15s;
}
html[data-design="brutal"] .catnav a:hover { background: #FFF3C2; }
html[data-design="brutal"] .catnav a:active { transform: translate(6px,6px); box-shadow: none; }
html[data-design="brutal"] .catnav a.active { background: var(--gold); transform: translate(3px,3px); box-shadow: 3px 0 0 #111, 3px 3px 0 #111; }
html[data-design="brutal"] .catnav a.active::after { display: none; }
html[data-design="brutal"] .catnav a .cat-icon img, html[data-design="brutal"] .cat-list .cat-icon img { opacity: 1 !important; filter: none !important; transform: none !important; }
html[data-design="brutal"] .cat-icon { min-width: 0; }
html[data-design="brutal"] .cat-sub { background: #fff; border: var(--b3); border-radius: 0; box-shadow: var(--step); }
@media (min-width: 992px) {
    html[data-design="brutal"] .main-grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
    html[data-design="brutal"] .sidebar { display: grid; grid-template-columns: 290px minmax(0,1fr); column-gap: 26px; row-gap: 12px; align-items: start; }
    html[data-design="brutal"] .sidebar > .side-label { grid-column: 1; grid-row: 1; }
    html[data-design="brutal"] .sidebar > .account-card { grid-column: 1; grid-row: 2; }
    html[data-design="brutal"] .sidebar > .name-switch { grid-column: 1; grid-row: 3; }
    html[data-design="brutal"] .sidebar > .catnav { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
    html[data-design="brutal"] .sidebar > .sidebar-modules { grid-column: 1 / -1; }
    html[data-design="brutal"] .cat-list { justify-content: flex-end; }
    html[data-design="brutal"] .cat-icon img { height: 40px; }
}

/* Inhaltsblock: Titel als Schild, Pakete als Preisschilder */
html[data-design="brutal"] main > .card { padding: 2rem 2.2rem 2.4rem; }
html[data-design="brutal"] .store-heading { font-family: 'Bungee', sans-serif; font-weight: 400; color: #111; -webkit-text-fill-color: #111; letter-spacing: 0; }
html[data-design="brutal"] .category-description { color: #222; font-size: 1.02rem; max-width: 62ch; }
html[data-design="brutal"] .category-description strong, html[data-design="brutal"] .category-description b { font-family: var(--font-body); font-weight: 800; color: #111; }
html[data-design="brutal"] .category-description p:first-child > strong:first-child {
    display: inline-block; font-family: 'Bungee', sans-serif; font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1; letter-spacing: 0;
    color: #111; background: var(--gold); border: var(--b3); box-shadow: var(--step); padding: .35rem .7rem .25rem; margin: 0 0 .9rem; transform: rotate(-1.2deg);
}
html[data-design="brutal"] .package-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 22px; margin-top: 2rem; }
html[data-design="brutal"] .pkg { padding: 0 0 1.1rem; text-align: center; overflow: visible; transition: transform .08s steps(2), box-shadow .08s steps(2); }
html[data-design="brutal"] .pkg:hover { background: #fff; border-color: #111; transform: translate(-2px,-2px); box-shadow: 3px 0 0 #111, 3px 3px 0 #111, 6px 3px 0 #111, 6px 6px 0 #111, 9px 6px 0 #111, 9px 9px 0 #111; }
html[data-design="brutal"] .pkg-img { height: 170px; border-bottom: var(--b3); background: var(--gold); padding: 10px; }
html[data-design="brutal"] .package-grid > .pkg:nth-child(4n+2) .pkg-img { background: var(--grass); }
html[data-design="brutal"] .package-grid > .pkg:nth-child(4n+3) .pkg-img { background: var(--diamond); }
html[data-design="brutal"] .package-grid > .pkg:nth-child(4n+4) .pkg-img { background: var(--redstone); }
html[data-design="brutal"] .pkg-img img { max-height: 150px; filter: drop-shadow(3px 3px 0 rgba(17,17,17,.85)); }
html[data-design="brutal"] .pkg:hover .pkg-img img { transform: scale(1.06) rotate(-3deg); }
html[data-design="brutal"] .pkg-badge { top: -14px; left: -10px; z-index: 2; transform: rotate(-6deg); font-size: .72rem; padding: .3rem .6rem; box-shadow: 2px 2px 0 #111; }
html[data-design="brutal"] .pkg-name { font-family: 'Bungee', sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.15; letter-spacing: 0; color: #111; margin: 1rem .8rem 0; text-transform: none; }
html[data-design="brutal"] .pkg-price { margin-top: .6rem; color: #111; font-family: 'Bungee', sans-serif; font-weight: 400; font-size: 1.15rem; }
html[data-design="brutal"] .pkg-price > span:not(.was):not(.ci-meta):not(.free) { display: inline-block; background: var(--gold); border: var(--b3); padding: .15rem .5rem; transform: rotate(-2deg); box-shadow: var(--step-sm); text-decoration: underline; text-decoration-color: var(--ring-brown); text-decoration-thickness: 3px; text-underline-offset: 3px; }
html[data-design="brutal"] .pkg-price .was { font-family: var(--font-body); font-weight: 700; color: #C62828; text-decoration-thickness: 2px; text-decoration-color: #C62828; }
html[data-design="brutal"] .pkg-qty-total { color: #222; font-weight: 700; }
html[data-design="brutal"] .qty-card { margin-top: .9rem; }
html[data-design="brutal"] .qty-card button { color: #111; }
html[data-design="brutal"] .qty-card button:hover { background: var(--gold); color: #111; }
html[data-design="brutal"] .qty-card input { font-family: 'Bungee', sans-serif; color: #111; }
html[data-design="brutal"] .pkg-actions { padding: 0 .9rem; }
html[data-design="brutal"] .pkg-actions .btn-gold, html[data-design="brutal"] .pkg-actions .btn-danger { flex: 1; justify-content: center; }
html[data-design="brutal"] .pkg-row img { filter: drop-shadow(2px 2px 0 #111); }

/* Startseite, Infokästen, Module */
html[data-design="brutal"] .store-description, html[data-design="brutal"] .store-subheading { color: #222; }
html[data-design="brutal"] .info-title { background: var(--gold) !important; border: var(--b3); border-radius: 0; color: #111 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-design="brutal"] .info-box { color: #222; }
html[data-design="brutal"] .trust-row, html[data-design="brutal"] .pay-icons { color: #222; }
html[data-design="brutal"] .trust-row .t i, html[data-design="brutal"] .pay-trust .t i { color: var(--ring-brown); }

/* Kasse */
html[data-design="brutal"] .step { color: #222; }
html[data-design="brutal"] .step.current { background: var(--gold); border-color: #111; }
html[data-design="brutal"] .step .num, html[data-design="brutal"] .co-section-title .num { border-radius: 0; border: 2px solid #111; background: #fff; color: #111; }
html[data-design="brutal"] .step.current .num, html[data-design="brutal"] .co-section-title .num { background: #111; color: var(--gold); }
html[data-design="brutal"] .co-section-title, html[data-design="brutal"] .confirm-name, html[data-design="brutal"] .ci-name, html[data-design="brutal"] .total-row .label { color: #111; }
html[data-design="brutal"] .confirm-name { font-family: 'Bungee', sans-serif; font-weight: 400; }
html[data-design="brutal"] :is(.confirm-sub, .ci-meta, .ci-remove, .pay-note, .pay-trust, .pay-card .lines) { color: #333; }
html[data-design="brutal"] .pay-note.warn { color: #8A3D00; }
html[data-design="brutal"] .ci-price { color: #111; }
html[data-design="brutal"] .confirm-card.confirmed { background: #E7F8D8; border-color: #111; }
html[data-design="brutal"] .confirm-avatar { border-radius: 0; outline: 3px solid #111; }
html[data-design="brutal"] .total-row .value { font-family: 'Bungee', sans-serif; font-weight: 400; color: #111; background: var(--gold); border: var(--b3); padding: .05rem .45rem; box-shadow: 3px 3px 0 #111; }
html[data-design="brutal"] .btn-xl { letter-spacing: 0; font-size: 1rem; white-space: normal; line-height: 1.2; }
html[data-design="brutal"] .drawer-title, html[data-design="brutal"] .login-title { font-family: 'Bungee', sans-serif; font-weight: 400; color: #111; letter-spacing: 0; }

/* Login-Fenster */
html[data-design="brutal"] .login-sub, html[data-design="brutal"] .login-hint, html[data-design="brutal"] .login-help { color: #333; }
html[data-design="brutal"] .edition { box-shadow: var(--step-sm); }
html[data-design="brutal"] .edition b, html[data-design="brutal"] .edition i { color: #111; }
html[data-design="brutal"] .edition small { color: #333; }
html[data-design="brutal"] .edition.active { background: var(--gold); border-color: #111; transform: translate(2px,2px); box-shadow: 2px 0 0 #111, 2px 2px 0 #111; }
html[data-design="brutal"] .edition.active i { color: #111; }

/* Fußzeile, Hinweise */
html[data-design="brutal"] .footer { background: #fff; color: #222; border-top: var(--b3); }
html[data-design="brutal"] .footer .copyright span { color: #111; background: var(--gold); padding: 0 .3rem; }
html[data-design="brutal"] .footer-links a { color: #111; }
html[data-design="brutal"] .footer .copyright { color: #111; }
html[data-design="brutal"] .footer .copy-subtext { color: #333; }
html[data-design="brutal"] .cart-hint { font-family: 'Bungee', sans-serif; font-weight: 400; color: #111; background: #fff; border: var(--b3); border-radius: 0; box-shadow: var(--step-sm); }
html[data-design="brutal"] .mobile-cartbar .btn { box-shadow: var(--step); }

/* Handy */
@media (max-width: 991px) {
    html[data-design="brutal"] .cat-list { justify-content: center; gap: 10px; }
    html[data-design="brutal"] .catnav a { padding: .45rem .7rem; box-shadow: var(--step-sm); }
    html[data-design="brutal"] .catnav a.active { transform: translate(2px,2px); box-shadow: 2px 0 0 #111, 2px 2px 0 #111; }
    html[data-design="brutal"] .side-label { justify-self: center; }
    html[data-design="brutal"] main > .card { padding: 1.4rem 1.1rem 1.8rem; }
    html[data-design="brutal"] .status-title { font-size: .9rem; }
    html[data-design="brutal"] .status-sub { font-size: .7rem; }
}
@media (max-width: 575px) {
    html[data-design="brutal"] .status { gap: .4rem; }
    html[data-design="brutal"] .status-text { padding: .25rem .45rem; }
    html[data-design="brutal"] .status-title { font-size: .78rem; }
    html[data-design="brutal"] .status-sub { font-size: .6rem; }
    html[data-design="brutal"] .status-circle { width: 40px; height: 40px; }
}
@media (max-width: 575px) {
    html[data-design="brutal"] .package-grid { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
    html[data-design="brutal"] .pkg-img { height: 120px; }
    html[data-design="brutal"] .pkg-img img { max-height: 104px; }
    html[data-design="brutal"] .pkg-name { font-size: .82rem; margin: .7rem .5rem 0; }
    html[data-design="brutal"] .pkg-price { font-size: .95rem; }
    html[data-design="brutal"] .pkg-actions { padding: 0 .5rem; gap: .35rem; }
    html[data-design="brutal"] .pkg-actions .btn { padding: .55rem .5rem; font-size: .78rem; }
    html[data-design="brutal"] .qty-card button { width: 30px; }
    html[data-design="brutal"] .qty-card input { width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-design="brutal"] :is(.btn, .pkg, .catnav a) { transition: none; }
    html[data-design="brutal"] .pkg:hover .pkg-img img { transform: none; }
}

/* ---- Abschlussprüfung (impeccable finish review): Kopf, Reiter, Preise, erster Blick ---- */
html[data-design="brutal"] .side-label { display: none; }
/* Knopf sitzt immer unten, auch wenn die Karte höher ist */
html[data-design="brutal"] .pkg { display: flex; flex-direction: column; }
html[data-design="brutal"] .pkg > .pkg-actions { margin-top: auto; padding-top: 1rem; }
@media (min-width: 992px) {
    /* Kopf: kleines Logo links, Spielen/Discord als Schilder daneben, kein großer Glas-Kopf */
    html[data-design="brutal"] .hero { height: auto; }
    html[data-design="brutal"] .hero-inner { position: relative; top: auto; display: flex; align-items: center; gap: 22px; padding: 74px 16px 0; }
    html[data-design="brutal"] .hero-logo-link { order: -1; margin-right: auto; }
    html[data-design="brutal"] .hero-logo { height: 76px; margin: 0; }
    html[data-design="brutal"] .status-play, html[data-design="brutal"] .status-discord { margin: 0; }
    html[data-design="brutal"] .main-container { margin-top: 18px; }
    html[data-design="brutal"] .hero-inner { padding-top: 64px; }
    /* Erster Blick: Preis und Kaufen der ersten Reihe sichtbar */
    html[data-design="brutal"] main > .card { padding-top: 1.5rem; }
    html[data-design="brutal"] .category-description { font-size: .97rem; line-height: 1.42; }
    html[data-design="brutal"] .category-description p:first-child > strong:first-child { margin-bottom: .55rem; }
    html[data-design="brutal"] .package-grid { margin-top: 1.4rem; }
    html[data-design="brutal"] .pkg-img { height: 140px; }
    html[data-design="brutal"] .pkg-img img { max-height: 122px; }
    /* Aktiver Reiter steckt in der Inhaltsfläche */
    html[data-design="brutal"] .main-grid { gap: 0; }
    html[data-design="brutal"] .sidebar { position: relative; z-index: 5; }
    html[data-design="brutal"] .sidebar > .account-card { grid-row: 1; }
    html[data-design="brutal"] .sidebar > .name-switch { grid-row: 2; margin-bottom: 26px; }
    html[data-design="brutal"] .sidebar > .catnav { grid-row: 1 / span 2; }
    html[data-design="brutal"] .cat-list { align-items: flex-end; }
    html[data-design="brutal"] .catnav a { margin-bottom: 14px; }
    html[data-design="brutal"] .catnav a.active { margin-bottom: -3px; padding-bottom: calc(.7rem + 17px); border-bottom: 0; transform: none; box-shadow: 3px 0 0 #111, 6px 0 0 #111; }
}
@media (max-width: 991px) {
    html[data-design="brutal"] .hero-inner { padding: 4.2rem 12px 1rem; gap: .9rem .6rem; }
    html[data-design="brutal"] .hero-logo { max-height: 84px; }
    html[data-design="brutal"] .main-container { margin-top: 10px; }
    html[data-design="brutal"] .cat-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    html[data-design="brutal"] .catnav a { justify-content: center; padding: .45rem .3rem; }
    html[data-design="brutal"] .catnav a .cat-icon { width: 100%; display: flex; justify-content: center; }
    html[data-design="brutal"] .catnav a .cat-icon img { width: 100%; height: auto; max-height: 28px; object-fit: contain; }
}

/* ---- Prüfrunde 1 (Clay, Y2K, Neu): Preise einzeilig, Y2K-Ring, Neu-Kopfpillen, Clay-Handykopf ---- */
html:is([data-design="clay"],[data-design="y2k"],[data-design^="neu"]) .pkg-price > span:not(.was),
html:is([data-design="clay"],[data-design="y2k"],[data-design^="neu"]) .total-row .value { white-space: nowrap; }
html[data-design="y2k"] .hero-logo-link { justify-self: center; width: fit-content; }
html[data-design="y2k"] .hero-logo-link::before { width: 175%; height: 52%; }
html[data-design^="neu"] .status { background: var(--g); border-radius: 999px; box-shadow: var(--out-sm); padding: .45rem .5rem .45rem 1.3rem; }
html[data-design^="neu"] .status-discord { padding: .45rem 1.3rem .45rem .5rem; }
html[data-design^="neu"] .status:active { box-shadow: var(--in-sm); }
html[data-design^="neu"] .status .status-circle { box-shadow: var(--in-sm); }
@media (max-width: 991px) {
    html[data-design="clay"] .hero-inner { width: auto; margin-left: 12px; margin-right: 12px; }
    html[data-design^="neu"] .status { padding: .35rem .4rem .35rem .9rem; gap: .5rem; }
    html[data-design^="neu"] .status-discord { padding: .35rem .9rem .35rem .4rem; }
}
@media (max-width: 575px) {
    html[data-design="clay"] .pkg-price { font-size: .95rem; }
    html[data-design="clay"] .pkg-price > span:not(.was):not(.ci-meta):not(.free) { padding: .2rem .6rem; }
    html[data-design="y2k"] .pkg-price { font-size: .9rem; }
    html[data-design="y2k"] .pkg-price > span:not(.was):not(.ci-meta):not(.free) { padding: .2rem .45rem; letter-spacing: .04em; }
    html[data-design^="neu"] .status-title { font-size: .82rem; }
    html[data-design^="neu"] .status-sub { font-size: .62rem; }
}

/* ---- Abschlussprüfung Clay/Y2K/Neu (impeccable finish review) ---- */
/* Alle Designs: in der Kassen-Übersicht bricht der Name um, nie der Preis */
html[data-design] .pay-card .lines div { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: .8rem; }
html[data-design] .pay-card .lines div > span:last-child { white-space: nowrap; text-align: right; }
/* Clay + Y2K: neben der Seitenleiste ist die Kasse zu schmal, Bezahlen rutscht unter den Warenkorb */
@media (max-width: 1279px) {
    html:is([data-design="clay"],[data-design="y2k"]) .checkout-page { grid-template-columns: minmax(0,1fr); }
    html:is([data-design="clay"],[data-design="y2k"]) .pay-card { position: static; }
}
/* Y2K: inaktive Kapseln in voller Farbe, aktiv nur über das Aqua-Gel */
html[data-design="y2k"] .cat-list:has(a.active) > a:not(.active) .cat-icon img { opacity: 1; filter: none; }
html[data-design="y2k"] .catnav a:not(.active) { border-color: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.35); }
/* Y2K: Karten als dunkle Einsätze mit Chrom-Fase statt Glaskarte */
html[data-design="y2k"] :is(.pkg, .cart-item, .co-item, .confirm-card, .step) {
    background: linear-gradient(rgba(10,6,28,.66), rgba(10,6,28,.66)) padding-box, linear-gradient(180deg, #FFFFFF 0%, #B9BED0 30%, #5B5876 60%, #2A2440 100%) border-box;
    border: 1.5px solid transparent; box-shadow: inset 0 2px 8px rgba(0,0,0,.45);
}
html[data-design="y2k"] .pkg:hover { background: linear-gradient(rgba(16,10,40,.7), rgba(16,10,40,.7)) padding-box, var(--holo) border-box; border-color: transparent; }
html[data-design="y2k"] .step.current { background: linear-gradient(rgba(10,30,50,.7), rgba(10,30,50,.7)) padding-box, var(--aqua) border-box; }
/* Y2K: jeder Seitentitel in Chrom (bewusste Ausnahme, wie Kategorie-Titel) */
html[data-design="y2k"] .store-heading {
    font-family: 'Audiowide', sans-serif; text-transform: uppercase; letter-spacing: .02em;
    background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(90,50,180,.8));
}
/* Neu: Flächen direkt auf dem Foto: ein weicher Schatten + feine Lichtkante statt Doppelschatten */
html[data-design^="neu"] :is(main > .card, .account-card, .name-switch, .topbar.scrolled .container, .hero-logo-link, .status, .footer) {
    box-shadow: 12px 14px 28px var(--photo-sh), inset 1px 1px 0 var(--photo-edge);
}
html[data-design^="neu"] .catnav.card { box-shadow: var(--in), 12px 14px 28px var(--photo-sh); }
html[data-design^="neu"] .account-card:active, html[data-design^="neu"] .name-switch:active, html[data-design^="neu"] .status:active { box-shadow: var(--in); }
/* Neu: Kaufen ist der stärkste Knopf (gold gefüllt), „Im Warenkorb“ bleibt eingelassen */
html[data-design^="neu"] :is(.pkg-actions, .pv-actions, .rc-cta, .gift-fields, .login) .btn-gold { background: var(--primary); color: var(--on-primary); box-shadow: var(--out-sm); }
html[data-design^="neu"] :is(.pkg-actions, .pv-actions, .rc-cta, .gift-fields, .login) .btn-gold:hover { background: var(--primary-light); color: var(--on-primary); }
html[data-design^="neu"] :is(.pkg-actions, .pv-actions, .rc-cta, .gift-fields, .login) .btn-gold:active { box-shadow: inset 3px 3px 6px rgba(120,60,0,.55), inset -2px -2px 5px rgba(255,220,160,.4); }

/* ------------------------------------------------------------
   Neumorphism: Farbpaletten (gleicher Aufbau, nur andere Werkstoffe)
   neu = Grafit (dunkel), neu-grau = Mittelgrau, neu-weiss = helles Weiß,
   neu-bernstein = warmes Dunkelbraun mit RingSMP-Gold.
   ------------------------------------------------------------ */
html[data-design="neu-grau"] {
    --g: #A7ADB5; --g-hi: #C7CDD5; --g-lo: #858B93;
    --t1: #0E1014; --t2: #15181D; --t3: #1E2228; --t4: #262B31;
    --fg: 14,16,20; --strong: #0E1014;
    --primary: #4F2600; --primary-light: #3A1C00; --primary-rgb: 79,38,0; --on-primary: #FFFFFF; --danger-t: #6E0F0A;
    --photo-sh: rgba(0,0,0,.32); --photo-edge: rgba(255,255,255,.55);
}
html[data-design="neu-weiss"] {
    --g: #ECEFF3; --g-hi: #FFFFFF; --g-lo: #C5CBD3;
    --t1: #14171C; --t2: #1F232A; --t3: #333941; --t4: #444B54;
    --fg: 20,23,28; --strong: #14171C;
    --primary: #A35400; --primary-light: #824300; --primary-rgb: 163,84,0; --on-primary: #FFFFFF; --danger-t: #A3201A;
    --photo-sh: rgba(0,0,0,.25); --photo-edge: rgba(255,255,255,.9);
}
html[data-design="neu-bernstein"] {
    --g: #2A2119; --g-hi: #3A2E24; --g-lo: #1A140E;
    --t1: #FBF3E8; --t2: #F1E6D7; --t3: #D8C9B5; --t4: #C2B19B;
    --primary: #FFB547; --primary-light: #FFCB77; --primary-rgb: 255,181,71; --on-primary: #2A2119; --danger-t: #FF9B8A;
    --photo-sh: rgba(0,0,0,.5); --photo-edge: rgba(255,235,200,.08);
}
/* Helle Paletten: Texte, die das Glas-Grunddesign fest weiß setzt, dunkel machen */
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) body { color: var(--t2); }
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) :is(.co-section-title, .confirm-name, .ci-name, .total-row .label, .login-title, .drawer-title, .edition b, .pkg-name, .store-heading, .support-title, .options-title, .featured-title, .info-title) { color: var(--t1); -webkit-text-fill-color: var(--t1); }
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) :is(.ci-meta, .ci-remove, .pay-note, .pay-trust, .pay-card .lines, .confirm-sub, .trust-row, .pay-icons, .step, .copyright, .copy-subtext, .footer-links a, .footer, .login-sub, .login-hint, .login-help, .edition small, .edition i, .store-subheading, .store-description, .info-box, .category-description, .status-sub, .account-sub, .qty input, .qty button, .input, .social a, .dlg-close, .topbar .btn-link, .btn-link, .name-switch) { color: var(--t3); }
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) .input::placeholder { color: var(--t4); }
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) .pay-note.warn, html:is([data-design="neu-grau"],[data-design="neu-weiss"]) .footer .copyright span { color: var(--primary); }
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) ::selection { background: rgba(var(--primary-rgb),.25); color: var(--t1); }
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) .hero-logo { filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) dialog.dlg::backdrop { background: rgba(30,34,40,.45); }
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) .badge { color: var(--primary); }

/* ------------------------------------------------------------
   Neumorphism „Seitenleiste“: dunkles Grafit wie neu, aber Aufbau wie Glas
   (Konto + Kategorien links untereinander, Inhalt rechts).
   ------------------------------------------------------------ */
@media (min-width: 992px) {
    html[data-design="neu-seite"] .main-grid { grid-template-columns: 27% minmax(0,1fr); gap: 28px; }
    html[data-design="neu-seite"] .sidebar { display: flex; flex-direction: column; gap: 14px; }
    html[data-design="neu-seite"] .catnav.card { border-radius: 28px; padding: 12px; }
    html[data-design="neu-seite"] .cat-list { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
    html[data-design="neu-seite"] .catnav a, html[data-design="neu-seite"] .cat-opener { flex: none; width: 100%; justify-content: flex-start; padding: .8rem 1.1rem; border-radius: 18px; }
    html[data-design="neu-seite"] .catnav a.active { box-shadow: var(--out-sm), inset 4px 0 0 var(--primary); }
    /* Kategorie-Grafiken: alle gleich hoch wie im Original (44 px), Breite ergibt sich aus dem Wort */
    html[data-design="neu-seite"] .cat-list .cat-icon img { height: 44px; width: auto; max-width: 100%; }
    html[data-design="neu-seite"] .catnav a.active .cat-icon img { transform: none; }
    html[data-design="neu-seite"] .package-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
}
@media (min-width: 992px) {
    html[data-design="neu-seite"] .sidebar { align-items: stretch; }
    html[data-design="neu-seite"] .sidebar > * { width: 100%; max-width: none; }
    html[data-design="neu-seite"] .name-switch { justify-content: center; }
}
/* Zwei Karten nebeneinander: kleineres Bild, Knöpfe dürfen umbrechen */
@media (min-width: 992px) {
    html[data-design="neu-seite"] .package-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
    html[data-design="neu-seite"] .pkg { grid-template-columns: 96px minmax(0,1fr); column-gap: 16px; padding: 1rem 1.1rem; }
    html[data-design="neu-seite"] .pkg > .pkg-img { width: 96px; height: 96px; border-radius: 20px; padding: 8px; }
    html[data-design="neu-seite"] .pkg-img img { max-height: 78px; }
    html[data-design="neu-seite"] .pkg-name { font-size: 1rem; }
    html[data-design="neu-seite"] .pkg-actions { flex-wrap: wrap; gap: .5rem; }
    html[data-design="neu-seite"] .pkg-actions .btn { padding: .55rem .85rem; font-size: .88rem; }
}

/* ------------------------------------------------------------
   neu-seite: Schrift Exo 2 (technisch, abgerundet: passt zur weichen Konsole)
   Exo 2 = Titel, Namen, Preise · Manrope = Text und Knöpfe (wie neu)
   ------------------------------------------------------------ */
html[data-design="neu-seite"] { --font-head: 'Exo 2', 'Manrope', sans-serif; }
html[data-design="neu-seite"] :is(.store-heading, .category-description p:first-child > strong:first-child) {
    font-family: 'Exo 2', sans-serif; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; font-size: clamp(2.1rem, 3.4vw, 2.8rem);
}
html[data-design="neu-seite"] :is(.pkg-name, .ci-name, .confirm-name, .account-name, .status-title, .co-section-title, .login-title, .drawer-title, .total-row .label) {
    font-family: 'Exo 2', sans-serif; font-weight: 700; letter-spacing: 0;
}
html[data-design="neu-seite"] .pkg-name { font-size: 1.12rem; }
html[data-design="neu-seite"] :is(.pkg-price, .ci-price, .total-row .value) { font-family: 'Exo 2', sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; }
html[data-design="neu-seite"] .pkg-price .was { font-family: 'Manrope', sans-serif; font-weight: 700; }

/* Neumorphism: Logo schwebt nicht mehr, der Drehknopf dreht sich nur beim Überfahren kurz */
html[data-design^="neu"] .hero-logo, html[data-design^="neu"] .hero-logo.logo-animated { animation: none; }
html[data-design^="neu"] .hero-logo { transition: transform .5s cubic-bezier(.16,1,.3,1); }
html[data-design^="neu"] .hero-logo-link:hover .hero-logo { transform: rotate(-12deg); }
@media (prefers-reduced-motion: reduce) { html[data-design^="neu"] .hero-logo-link:hover .hero-logo { transform: none; } }

/* neu-seite: liegende Rechteck-Karte, Bild 160 px links, füllt die Mulde in der Mulde, Infos rechts */
@media (min-width: 992px) {
    html[data-design="neu-seite"] .pkg { display: grid; grid-template-columns: 160px minmax(0,1fr); column-gap: 14px; align-items: center; text-align: left; padding: .9rem 1rem; }
    html[data-design="neu-seite"] .pkg > .pkg-img { width: 160px; height: 176px; border-radius: 24px; padding: 6px; grid-row: 1 / span 6; display: flex; align-items: center; justify-content: center; }
    html[data-design="neu-seite"] .pkg-img img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
    html[data-design="neu-seite"] .pkg-name { font-size: 1.3rem; line-height: 1.15; margin-top: 0; text-wrap: balance; }
    html[data-design="neu-seite"] .pkg-price { justify-content: flex-start; margin-top: .2rem; }
    html[data-design="neu-seite"] .qty-card { justify-self: start; margin-top: .4rem; }
    html[data-design="neu-seite"] .pkg-actions { margin-top: .5rem; padding-top: 0; justify-content: flex-start; flex-wrap: nowrap; gap: .4rem; }
    html[data-design="neu-seite"] .pkg-actions .btn { padding: .5rem .65rem; font-size: .8rem; white-space: nowrap; }
    html[data-design="neu-seite"] .pkg-actions .btn-ghost { padding: .5rem .5rem; }
}

/* Alle Designs: „Im Korb“ kurz, beim Überfahren/Fokus „Entfernen“ (Klick nimmt den Artikel raus) */
[data-remove] .rm-cart { display: none; }
[data-remove]:is(:hover, :focus-visible) .in-cart { display: none; }
[data-remove]:is(:hover, :focus-visible) .rm-cart { display: inline; }

/* Alle Designs: Laufzeit-Schild hinter dem Paketnamen */
.pkg-term { display: inline-block; margin-left: .4em; padding: .12em .55em; border-radius: 999px; border: 1px solid currentColor; font-size: .62em; font-weight: 700; letter-spacing: .02em; line-height: 1.4; vertical-align: .2em; white-space: nowrap; opacity: .85; text-transform: none; }
html[data-design^="neu"] .pkg-term { border: none; background: var(--g); box-shadow: var(--in-sm); color: var(--primary); opacity: 1; }
/* „Details ansehen“: nur dort sichtbar, wo es das runde i ersetzt */
.pkg-details { display: none; }

/* neu-seite: Kaufen groß, i weg, stattdessen Textlink „Details ansehen“ */
@media (min-width: 992px) {
    html[data-design="neu-seite"] .pkg-details { display: inline-block; justify-self: start; margin-top: .15rem; padding: 0; background: none; border: none; color: var(--t3); font-size: .82rem; font-weight: 600; text-decoration: none; cursor: pointer; }
    html[data-design="neu-seite"] .pkg-details:hover { color: var(--primary); }
    html[data-design="neu-seite"] .pkg-actions .btn-ghost { display: none; }
    html[data-design="neu-seite"] .pkg-actions { width: 100%; justify-self: stretch; }
    html[data-design="neu-seite"] .pkg-term { display: table; margin: .35rem 0 0; font-size: .7rem; }
    html[data-design="neu-seite"] .pkg-actions :is(.btn-gold, .btn-danger) { flex: 1; justify-content: center; min-height: 42px; padding: .65rem 1rem; font-size: .95rem; }
    html[data-design="neu-seite"] .pkg-img { cursor: pointer; }
}

/* Neumorphism: Ring im Drehknopf größer, damit er den Knopf füllt */
@media (min-width: 992px) {
    html[data-design^="neu"] .hero-logo-link { width: 172px; height: 172px; }
    html[data-design^="neu"] .hero-logo { height: 122px; }
}
@media (max-width: 991px) {
    html[data-design^="neu"] .hero-logo-link { width: 126px; height: 126px; }
    html[data-design^="neu"] .hero-logo { height: 88px; max-height: 88px; }
}

/* Rang-Figuren (schmal, viel Rand im Bild) in der Mulde heranzoomen */
html[data-design^="neu"] .pkg-figur .pkg-img { overflow: hidden; }
html[data-design^="neu"] .pkg-figur .pkg-img img { transform: scale(1.12); }

/* Neumorphism: Kaufen mit feinem Licht-Verlauf (oben heller, unten satter) */
html[data-design^="neu"] :is(.pkg-actions, .pv-actions, .rc-cta, .gift-fields, .login) .btn-gold {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 78%, #fff) 0%, var(--primary) 52%, color-mix(in srgb, var(--primary) 88%, #000) 100%);
}
html[data-design^="neu"] :is(.pkg-actions, .pv-actions, .rc-cta, .gift-fields, .login) .btn-gold:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 75%, #fff) 0%, var(--primary-light) 55%, var(--primary) 100%); }
/* Neumorphism: Korb in der Konto-Karte als echter runder Knopf */
html[data-design^="neu"] .account-card .account-arrow {
    width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem;
    background: var(--g); box-shadow: var(--out-sm); margin: 0 .9rem 0 .5rem; transition: box-shadow .16s ease, color .16s ease;
}
html[data-design^="neu"] .account-card:hover .account-arrow { color: var(--primary-light); box-shadow: var(--out); transform: none; }
html[data-design^="neu"] .account-card:active .account-arrow { box-shadow: var(--in-sm); }
/* Kit-Ringe leicht heranzoomen; Mulde schneidet nicht ab, damit der Glow bleibt */
html[data-design^="neu"] .pkg-ring .pkg-img { overflow: visible; }
html[data-design^="neu"] .pkg-ring .pkg-img img { transform: scale(1.12); }
/* neu-seite: Schlüssel liegen quer, Mulde als liegendes Rechteck */
@media (min-width: 992px) {
    html[data-design="neu-seite"] .pkg.pkg-key { grid-template-columns: 172px minmax(0,1fr); }
    html[data-design="neu-seite"] .pkg-key > .pkg-img { width: 172px; height: 172px; }
}
/* Neumorphism: Anzahl im Warenkorb als rotes Abzeichen (bekannt aus Apps), hüpft beim Hinzufügen */
html[data-design^="neu"] .cart-btn .cart-pill, html[data-design^="neu"] .cart-btn.filled .cart-pill { background: #D32F2F; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); font-weight: 800; }

/* Alle Designs: Rabatt als rotes Schild mit Prozent, alter Preis gut sichtbar */
.pkg-badge.pkg-badge-save { background: #D32F2F; color: #fff; font-weight: 800; letter-spacing: .02em; }
html[data-design^="neu"] .pkg-badge.pkg-badge-save { background: #D32F2F; color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.pkg-sale .pkg-price .was { font-size: .95em; font-weight: 700; text-decoration-thickness: 2px; }
/* neu-seite: alle Karten gleich hoch, Figuren mit größerer Mulde */
@media (min-width: 992px) {
    html[data-design="neu-seite"] .pkg { min-height: 206px; }
    html[data-design="neu-seite"] .pkg.pkg-figur { grid-template-columns: 172px minmax(0,1fr); min-height: 230px; }
    html[data-design="neu-seite"] .pkg-figur > .pkg-img { width: 172px; height: 200px; }
}
/* neu-seite: alle Reihen gleich hoch (höchste Karte bestimmt), Rabatt-Schild größer */
@media (min-width: 992px) {
    html[data-design="neu-seite"] .package-grid { grid-auto-rows: 1fr; }
}
html[data-design^="neu"] .pkg-badge.pkg-badge-save { font-size: .85rem; padding: .32rem .7rem; z-index: 2; }
/* neu-seite: Rang-Figuren in hoher, schmaler Mulde; leerer Seitenrand wird abgeschnitten, Figur bleibt ganz */
@media (min-width: 992px) {
    html[data-design="neu-seite"] .pkg.pkg-figur { grid-template-columns: 150px minmax(0,1fr); }
    html[data-design="neu-seite"] .pkg-figur > .pkg-img { width: 150px; height: 232px; padding: 6px; }
    html[data-design="neu-seite"] .pkg-figur .pkg-img img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; transform: scale(.9); }
}
/* neu-seite: Schild oben links auf der Karte, kompakt, mit Abstand zur runden Ecke und zur Bild-Mulde */
html[data-design="neu-seite"] .pkg > .pkg-badge { top: 9px; left: 14px; }
html[data-design="neu-seite"] .pkg > .pkg-badge.pkg-badge-save { font-size: .78rem; padding: .24rem .6rem; }
/* Neumorphism: unscharfes Foto dunkler, passend zur dunklen Oberfläche (blendet abends nicht) */
html[data-design="neu"], html[data-design="neu-seite"], html[data-design="neu-bernstein"] { --bg-dim: .46; }
html:is([data-design="neu"],[data-design="neu-seite"],[data-design="neu-bernstein"]) .hero-bg { filter: blur(7px) saturate(.95) brightness(var(--bg-dim)); }

/* ===== Paket-Vorteile: Zahlenleiste, Befehlszeile, ruhige Liste (alle Designs) ===== */
.pv-desc .perks { display: flex; flex-direction: column; gap: 20px; line-height: 1.3; }
.perk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); padding: 14px 6px; border-radius: 16px; background: rgba(var(--fg),.05); }
.perk-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 8px; text-align: center; }
.perk-stat + .perk-stat { border-left: 1px solid rgba(var(--fg),.08); }
.perk-stat b { font-family: var(--font-num, var(--font-head)); font-size: 1.7rem; font-weight: 800; line-height: 1.05; color: var(--strong); font-variant-numeric: tabular-nums; }
.perk-stat span { font-size: .86rem; font-weight: 700; color: rgba(var(--fg),.85); }
.perk-stat small { font-size: .72rem; color: rgba(var(--fg),.5); }
.perk-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.perk-row-label { font-size: .86rem; font-weight: 700; color: rgba(var(--fg),.6); }
.perk-cmds { display: flex; flex-wrap: wrap; gap: 6px; }
.perk-cmd { padding: 5px 10px; border-radius: 8px; background: rgba(var(--fg),.06); font-family: var(--font-num, var(--font-head)); font-size: .88rem; font-weight: 700; color: var(--primary); cursor: help; }
.pv-desc .perk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 18px; }
.perk-list li { display: flex; align-items: center; gap: 9px; font-size: .92rem; color: rgba(var(--fg),.85); }
.perk-list li i { flex: none; color: var(--primary); font-size: .8rem; }
.perk-note { margin: 0; font-size: .82rem; color: rgba(var(--fg),.6); }
@media (max-width: 520px) { .perk-stats { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 14px; } .perk-stat:nth-child(odd) { border-left: none; } }
.pv-desc:has(.perks) { max-height: none; overflow: visible; }
dialog.dlg:has(.perks) { width: min(820px, calc(100vw - 24px)); }
html[data-design] .pv-name .pkg-term { display: table; margin: .45rem auto 0; font-size: .72rem; }

/* ===== Verschenken: mehrere Namen, Köpfe, Verlauf ===== */
.pv-side .btn-gift { width: 100%; justify-content: center; color: var(--primary); font-weight: 700; }
.pv-side .btn-gift[aria-expanded="true"] { color: var(--strong); }
.gift-fields { display: none; flex-direction: column; gap: 9px; padding: 12px; border-radius: 16px; background: rgba(var(--fg),.05); text-align: left; }
.gift-fields.open { display: flex; }
.gift-label { font-size: .85rem; font-weight: 700; color: var(--strong); }
.gift-row { display: flex; align-items: center; gap: 10px; }
.gift-head { flex: none; width: 40px; height: 40px; border-radius: 10px; image-rendering: pixelated; }
.gift-row .input { flex: 1; min-width: 0; }
.gift-hint { font-size: .74rem; line-height: 1.35; color: rgba(var(--fg),.55); }
.gift-fields.bad .gift-hint { color: var(--danger-text, #ff6b6b); }
.gift-list, .gift-recent { display: flex; flex-wrap: wrap; gap: 6px; }
.gift-list[hidden], .gift-recent[hidden] { display: none; }
.gift-token, .gift-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 4px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--strong); }
.gift-token { padding-right: 2px; background: rgba(var(--primary-rgb),.16); }
.gift-token img, .gift-chip img { width: 20px; height: 20px; border-radius: 6px; image-rendering: pixelated; }
.gift-token button { display: grid; place-items: center; width: 22px; height: 22px; border: none; border-radius: 50%; background: none; color: rgba(var(--fg),.6); cursor: pointer; }
.gift-token button:hover { color: var(--strong); background: rgba(var(--fg),.08); }
.gift-recent-label { align-self: center; margin-right: 2px; font-size: .72rem; color: rgba(var(--fg),.5); }
.gift-chip { padding-right: 10px; border: none; background: rgba(var(--fg),.06); color: rgba(var(--fg),.8); font-weight: 600; cursor: pointer; }
.gift-chip:hover { color: var(--strong); }
.gift-fields .btn { justify-content: center; }
.gift-fields .btn:disabled { opacity: .45; cursor: not-allowed; }
.gift-multi { margin: 0; font-size: .74rem; line-height: 1.4; color: rgba(var(--fg),.6); }
.package-view:has(.gift-fields.open) { grid-template-columns: 270px minmax(0,1fr); }
.gift-row { gap: 8px; }
.gift-row .gift-head { width: 34px; height: 34px; border-radius: 8px; }
.gift-row .input { padding: .55rem .7rem; font-size: .92rem; }
.gift-fields .btn { white-space: nowrap; }
.gift-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.18); font-size: .78rem; }
.gift-done { display: flex; gap: 7px; margin: 0; font-size: .8rem; line-height: 1.4; color: #7bd88f; }
.gift-done[hidden] { display: none; }
.gift-done i { margin-top: 3px; }
@media (max-width: 640px) { .package-view:has(.gift-fields.open) { grid-template-columns: 1fr; } }

/* Warenkorb: für wen ist der Artikel */
.ci-for { display: flex; align-items: center; gap: 6px; margin: 3px 0 2px; font-size: .78rem; color: rgba(var(--fg),.6); }
.ci-for img { width: 20px; height: 20px; border-radius: 5px; image-rendering: pixelated; }
.ci-for i { color: var(--primary); font-size: .72rem; }
.ci-for b { color: var(--strong); }
.is-gift .ci-for { color: rgba(var(--fg),.8); }

/* Warenkorb: Paketbilder größer, Ränge sind hohe Figuren */
html[data-design] .co-item { grid-template-columns: 84px minmax(0,1fr) auto; }
html[data-design] :is(.co-item, .cart-item) > img { width: 84px; height: 96px; padding: 6px; object-fit: contain; border-radius: 14px; background: rgba(var(--fg),.04); }
html[data-design^="neu"] :is(.co-item, .cart-item) > img { background: var(--g); box-shadow: var(--in-sm); }
@media (max-width: 575px) { html[data-design] .co-item { grid-template-columns: 68px minmax(0,1fr); } html[data-design] :is(.co-item, .cart-item) > img { width: 68px; height: 80px; } }
html[data-design] .ci-figur > img { padding: 0; object-fit: cover; }
html[data-design] .ci-for { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-design] .ci-for > * { vertical-align: middle; }
html[data-design] .ci-for img { display: inline-block; margin-right: 5px; }
html[data-design] .ci-for i { margin-right: 3px; }

/* Geschenk-Liste: nächster Empfänger */
.gq-wait { font-size: .85rem; font-weight: 700; color: var(--primary); }
.gift-queue { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; }
.gift-queue > img { flex: none; width: 44px; height: 44px; border-radius: 10px; image-rendering: pixelated; }
.gq-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gq-text b { color: var(--strong); font-size: .98rem; }
.gq-text span { font-size: .85rem; color: rgba(var(--fg),.65); }
.gq-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gq-actions .btn-link { background: none; border: none; color: rgba(var(--fg),.6); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: .85rem; }
@media (max-width: 560px) { .gift-queue { flex-wrap: wrap; } .gq-actions { width: 100%; } .gq-actions .btn { flex: 1; justify-content: center; } }

html[data-design^="neu"] .gift-fields { background: var(--g); box-shadow: var(--in-sm); }
html[data-design^="neu"] :is(.gift-head, .gift-queue > img) { box-shadow: var(--out-sm); }
html[data-design^="neu"] .gift-chip { background: var(--g); box-shadow: var(--out-sm); color: var(--t2); }
html[data-design^="neu"] .gift-token { background: var(--g); box-shadow: var(--in-sm); }
html[data-design^="neu"] .pv-side .btn-gift[aria-expanded="true"] { box-shadow: var(--in-sm); }
html[data-design^="neu"] :is(.gift-hint, .gift-multi, .gift-recent-label, .ci-for, .gq-text span) { color: var(--t3); }
html[data-design^="neu"] .is-gift .ci-for { color: var(--t2); }

/* ===== Ränge: Lohnt sich Legend? (Teil der Ränge-Karte) ===== */
.rank-compare { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(var(--fg),.08); }
.rank-compare h2 { margin: 0; font-family: var(--font-head); font-size: 1.65rem; font-weight: 800; color: var(--strong); letter-spacing: -.01em; }
.rc-sub { margin: 6px 0 0; max-width: 56ch; color: rgba(var(--fg),.75); font-size: 1rem; }
.rc-table { position: relative; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); grid-auto-rows: minmax(44px, auto); margin-top: 34px; }
.rc-hl { grid-column: 3; grid-row: 1 / span var(--rc-rows); border-radius: 18px; background: rgba(var(--primary-rgb),.10); box-shadow: inset 0 0 0 1.5px rgba(var(--primary-rgb),.45); }
.rc-cell { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; text-align: center; font-size: .95rem; color: rgba(var(--fg),.65); border-top: 1px solid rgba(var(--fg),.07); font-variant-numeric: tabular-nums; }
.rc-label { justify-content: flex-start; text-align: left; color: rgba(var(--fg),.85); font-weight: 600; }
.rc-head { flex-direction: column; gap: 2px; border-top: none; padding: 14px 10px 12px; }
.rc-name { font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; color: var(--strong); text-transform: uppercase; letter-spacing: .04em; }
.rc-price { font-size: .85rem; color: rgba(var(--fg),.6); font-variant-numeric: tabular-nums; }
.rc-num { font-family: var(--font-num, var(--font-head)); font-size: 1.15rem; font-weight: 800; color: var(--strong); }
.rc-legend .rc-num, .rc-word { color: var(--primary-light, var(--primary)); font-weight: 800; }
.rc-note { position: absolute; top: -27px; left: 50%; transform: translateX(-50%) rotate(-4deg); font-family: 'Caveat', cursive; font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--primary-light, var(--primary)); white-space: nowrap; }
.rc-x { padding: 1px 6px; border-radius: 6px; background: rgba(var(--primary-rgb),.2); color: var(--primary-light, var(--primary)); font-size: .72rem; font-weight: 800; }
.rc-yes { color: #7bd88f; }
.rc-no { color: #E5736A; opacity: .75; }
.rc-foot { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .9rem; color: rgba(var(--fg),.7); }
.rc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; }
.rc-cta .btn { min-width: 210px; justify-content: center; }
.rc-abo { font-size: .9rem; color: rgba(var(--fg),.75); }
.rc-cta .btn-link { margin-left: auto; background: none; border: none; color: rgba(var(--fg),.7); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: .9rem; }
.rc-incart { color: #7bd88f; font-weight: 700; }
@media (max-width: 560px) {
    .rc-cell { font-size: .85rem; padding: 8px 6px; }
    .rc-cta .btn { flex: 1 1 100%; min-width: 0; }
    .rc-cta .btn-link { margin-left: 0; }
}

/* Neumorphism: Mulden für Zahlen und Knöpfe, Legend-Spalte erhaben, Zahlen in Exo 2 */
html[data-design^="neu"] { --font-num: 'Exo 2', var(--font-head); }
html[data-design^="neu"] :is(.perk-stats, .perk-cmd, .gift-fields) { background: var(--g); box-shadow: var(--in-sm); }
html[data-design^="neu"] .gift-head { box-shadow: var(--out-sm); }
html[data-design^="neu"] :is(.perk-stat span, .perk-list li) { color: var(--t2); }
html[data-design^="neu"] :is(.perk-stat small, .perk-row-label, .perk-note, .gift-hint) { color: var(--t3); }
html[data-design^="neu"] .perk-stat + .perk-stat { border-left-color: rgba(255,255,255,.05); }
html[data-design^="neu"] .rank-compare { border-top: none; box-shadow: inset 0 1px 0 var(--g-lo), inset 0 2px 0 var(--g-hi); }
html[data-design^="neu"] .rank-compare h2 { font-family: var(--font-num); }
html[data-design^="neu"] .rc-hl { background: var(--g); box-shadow: var(--out-sm), inset 0 0 0 1.5px rgba(var(--primary-rgb),.35); }
html[data-design^="neu"] :is(.rc-sub, .rc-price, .rc-cell, .rc-foot, .rc-abo) { color: var(--t3); }
html[data-design^="neu"] .rc-cell.rc-label { color: var(--t2); }
html[data-design^="neu"] .rc-cell { border-top-color: rgba(255,255,255,.05); }
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) .rc-cell { border-top-color: rgba(0,0,0,.07); }
html:is([data-design="neu-grau"],[data-design="neu-weiss"]) .rc-yes { color: #2E7D32; }
html[data-design="neu-seite"] .pkg-name .pkg-term { font-size: .76rem; padding: .2em .75em; }

/* Neumorphism: „Hier anmelden“ deutlich. Goldener Knopf mit sanftem Stups alle paar Sekunden; nur der Pfeil bewegt sich, nichts verschiebt sich */
html[data-design^="neu"] .account-card.loggedout .account-name { color: var(--t1); font-size: 1.12rem; }
html[data-design^="neu"] .account-card.loggedout .account-sub { display: block; margin-top: 2px; font-size: .78rem; font-weight: 600; color: var(--t3); }
html[data-design^="neu"] .account-card.loggedout .account-arrow { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; font-size: 1.05rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 78%, #fff) 0%, var(--primary) 52%, color-mix(in srgb, var(--primary) 88%, #000) 100%); color: var(--on-primary); box-shadow: var(--out-sm); animation: login-nudge 3.6s ease-in-out infinite; }
html[data-design^="neu"] .account-card.loggedout .account-arrow::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: login-ring 3.6s ease-out infinite; }
html[data-design^="neu"] .account-card.loggedout:is(:hover, :focus-visible) .account-arrow, html[data-design^="neu"] .account-card.loggedout:is(:hover, :focus-visible) .account-arrow::after { animation: none; }
html[data-design^="neu"] .account-card.loggedout:hover .account-arrow { transform: translateX(3px); }
@keyframes login-nudge { 0%, 62%, 100% { transform: translateX(0); } 70% { transform: translateX(5px); } 78% { transform: translateX(0); } 86% { transform: translateX(3px); } }
@keyframes login-ring { 0%, 58% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb),.55); } 100% { box-shadow: 0 0 0 16px rgba(var(--primary-rgb),0); } }
@media (prefers-reduced-motion: reduce) { html[data-design^="neu"] .account-card.loggedout .account-arrow, html[data-design^="neu"] .account-card.loggedout .account-arrow::after { animation: none; } }

/* ============================================================
   Polish 12.10.: Dialog-X frei, Kategorie-Deckkraft, Vergleich-Badge, Kasse-Bestätigung
   ============================================================ */
/* Nr. 3: Schließen-X überlappte die Zahlen-Kacheln oben rechts */
dialog.dlg .perks .perk-stats { margin-right: 46px; }
@media (max-width: 575px) { dialog.dlg .perks .perk-stats { margin-right: 0; margin-top: 30px; } }

/* Nr. 6: inaktive Kategorien nur leicht zurückgenommen, nicht ausgegraut */
html[data-design^="neu"] .cat-list:has(a.active) > a:not(.active) .cat-icon img { opacity: .72; filter: none; transition: opacity .2s; }
html[data-design^="neu"] .cat-list:has(a.active) > a:not(.active):hover .cat-icon img { opacity: 1; }

/* Nr. 4: Vergleich – Legend als meistgekaufte Stufe markiert */
.rc-badge { display: inline-block; margin-bottom: 4px; padding: 3px 9px; border-radius: 999px; background: var(--primary); color: var(--on-primary, #1a1206); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.rc-head.rc-legend { gap: 4px; }
html[data-design^="neu"] .rc-badge { box-shadow: var(--out-sm); }

/* Nr. 22: Bestätigung direkt über dem Bezahl-Knopf, rot wenn sie fehlt */
.pay-wrap { position: relative; }
.pay-gate { position: absolute; inset: 0; z-index: 2; cursor: pointer; border-radius: 10px; }
.pay-wrap.ok .pay-gate { display: none; }
.pay-confirm { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--fg),.05); box-shadow: inset 0 0 0 1.5px rgba(var(--fg),.08); font-size: .9rem; color: rgba(var(--fg),.8); cursor: pointer; transition: box-shadow .25s, background .25s; }
.pay-confirm img { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.pay-confirm .pc-text { flex: 1; min-width: 0; line-height: 1.3; }
.pay-confirm .pc-text b { color: var(--strong); }
.pay-confirm .pc-text small { display: block; font-size: .78rem; color: rgba(var(--fg),.55); }
.pay-confirm .pc-box { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: rgba(var(--fg),.08); box-shadow: inset 0 0 0 1.5px rgba(var(--fg),.25); color: transparent; font-size: .85rem; transition: background .2s, color .2s; }
.pay-confirm.on { background: rgba(63,168,102,.12); box-shadow: inset 0 0 0 1.5px rgba(63,168,102,.7); }
.pay-confirm.on .pc-box { background: #3FA866; color: #fff; box-shadow: none; }
.pay-confirm.need { background: rgba(229,115,106,.12); box-shadow: inset 0 0 0 2px #E5736A; animation: pc-shake .45s cubic-bezier(.36,.07,.19,.97); }
.pay-confirm.need .pc-text small { color: #E5736A; font-weight: 700; }
.pay-confirm.need .pc-box { box-shadow: inset 0 0 0 2px #E5736A; }
@keyframes pc-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .pay-confirm.need { animation: none; } }
.pay-wrap:not(.ok) #pay-button { opacity: 1; }
html[data-design^="neu"] .pay-confirm { background: var(--g); box-shadow: var(--in-sm); }
html[data-design^="neu"] .pay-confirm.on { box-shadow: var(--in-sm), inset 0 0 0 1.5px rgba(63,168,102,.7); }
html[data-design^="neu"] .pay-confirm.need { box-shadow: var(--in-sm), inset 0 0 0 2px #E5736A; }
.pay-confirm:focus { outline: none; }
.pay-confirm:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Polish 3 (12.10.): Bezahl-Knopf immer voll orange (Sperre läuft über .pay-gate), Anmelde-Karte voll Gold mit Glanz */
.pay-wrap:not(.ok) #pay-button[disabled] { background: var(--primary); color: var(--on-primary, #1a1208); opacity: 1; cursor: pointer; box-shadow: var(--out-sm, inset 0 -5px 0 rgba(0,0,0,.15)); }
html[data-design^="neu"] .pay-wrap #pay-button, html[data-design^="neu"] .pay-wrap:not(.ok) #pay-button[disabled] { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 75%, #fff) 0%, var(--primary-light) 55%, var(--primary) 100%); color: var(--on-primary); box-shadow: var(--out-sm); }
html[data-design^="neu"] .pay-wrap #pay-button:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 85%, #fff) 0%, var(--primary-light) 60%, var(--primary) 100%); }
html[data-design^="neu"] .account-card.loggedout { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 75%, #fff) 0%, var(--primary-light) 55%, var(--primary) 100%); color: var(--on-primary); box-shadow: var(--out); }
html[data-design^="neu"] .account-card.loggedout .account-name, html[data-design^="neu"] .account-card.loggedout .account-sub { color: var(--on-primary); }
html[data-design^="neu"] .account-card.loggedout .account-sub { opacity: .8; }
html[data-design^="neu"] .account-card.loggedout .account-arrow { color: var(--primary); background: var(--on-primary); }
html[data-design^="neu"] .account-card.loggedout .account-arrow::after { display: none; }
html[data-design^="neu"] .account-card.loggedout:hover { filter: brightness(1.05); }
html[data-design^="neu"] .account-card.loggedout::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -30%; width: 22%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: login-shine 2.6s ease-in-out .8s 2 both; pointer-events: none; }
@keyframes login-shine { 0%, 78% { left: -30%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { html[data-design^="neu"] .account-card.loggedout::before { animation: none; display: none; } }
html[data-design^="neu"] .status-sub { text-transform: none; letter-spacing: .02rem; }

/* Kisten-GUI-Bilder in der Paketbeschreibung: nie breiter als die Spalte, kein Scrollbalken */
.pv-desc { overflow-x: hidden; }
.pv-desc img { display: block; max-width: 100% !important; width: auto !important; height: auto !important; margin: 10px 0 12px; border-radius: 8px; image-rendering: auto; }
/* Schlüssel-Inhalt als Kacheln unter dem GUI-Bild */
.item-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.item-chips li { padding: 6px 11px; border-radius: 9px; background: rgba(var(--fg),.07); font-size: .86rem; font-weight: 600; color: rgba(var(--fg),.88); line-height: 1.2; }
html[data-design^="neu"] .item-chips li { background: var(--g); box-shadow: var(--out-sm); color: var(--t2); }
/* Neumorphism: Spiel-GUI liegt als Original in einer weichen Mulde (Bild selbst bleibt unverändert, damit es echt bleibt) */
html[data-design^="neu"] .pv-desc img { padding: 8px; border-radius: 16px; background: var(--g); box-shadow: var(--in-sm); box-sizing: border-box; }

/* Polish 3: Vorteile im Dialog als zwei Gruppen mit Icons, Plus-Prozent an den Zahlen */
.perk-groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 22px; }
@media (max-width: 575px) { .perk-groups { grid-template-columns: minmax(0,1fr); } }
.perk-group-title { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--fg),.5); margin-bottom: 8px; }
html[data-design^="neu"] .perk-group-title { color: var(--t4); }
.perk-groups .perk-list { grid-template-columns: minmax(0,1fr); gap: 9px; }
.perk-groups .perk-list li i { width: 1.1rem; text-align: center; color: var(--primary); font-size: .85rem; }
.perk-cmd-li .perk-cmd { padding: 2px 7px; font-size: .78rem; margin-left: .1em; cursor: help; }
.perk-plus { display: inline-block; margin-left: .35em; padding: 0 .4em; border-radius: 999px; background: rgba(var(--primary-rgb),.18); color: var(--primary-light, var(--primary)); font-style: normal; font-weight: 800; font-size: .7rem; line-height: 1.5; }
.perk-stat small { white-space: nowrap; }

/* Polish 2 (12.10.): Kasse schlanker, Befehls-Chips im Vergleich, Abo-Hinweis, grauer Details-Strich */
.pay-confirm .pc-text b { font-weight: 800; }
.pay-confirm .pc-text small[hidden] { display: none; }
.pay-trust.compact { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem; margin-top: .9rem; }
.pay-card .pay-trust.compact .t { justify-content: center; }
.rc-cmd { display: inline-block; margin-left: .45em; padding: 1px 7px; border-radius: 6px; background: rgba(var(--fg),.07); font-family: var(--font-num, var(--font-head)); font-size: .78em; font-weight: 700; color: var(--primary); vertical-align: .08em; }
html[data-design^="neu"] .rc-cmd { background: var(--g); box-shadow: var(--in-sm); }
.pkg-abo-note { display: flex; align-items: center; gap: .4em; margin: .15rem 0 .1rem; font-size: .78rem; font-weight: 600; color: rgba(var(--fg),.6); }
.pkg-abo-note i { font-size: .72em; color: var(--primary); }
html[data-design^="neu"] .pkg-abo-note { color: var(--t3); }
@media (min-width: 992px) {
    html[data-design="neu-seite"] .pkg-details { text-decoration: underline; text-decoration-color: rgba(var(--fg),.3); text-underline-offset: 3px; }
    html[data-design="neu-seite"] .pkg-details:hover { text-decoration-color: var(--primary); }
}

/* Polish 4 (12.10.): X außerhalb des Scrollbereichs, Pfeil-Knopf ohne dunklen Schatten, Kacheln orange graviert, GUI-Bilder pixelgenau, Verschenken orange */
dialog.dlg { overflow: hidden; }
.dlg-body { max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(var(--fg),.22) transparent; }
dialog.dlg > .dlg-close { z-index: 3; }
html[data-design^="neu"] .account-card.loggedout .account-arrow { background: linear-gradient(180deg, #FFFDF7 0%, #FFF3D6 100%); color: var(--on-primary); box-shadow: 3px 3px 7px rgba(90,50,0,.32), -2px -2px 5px rgba(255,255,255,.5); animation: login-nudge 3.6s ease-in-out 1.2s 3 both; }
html[data-design^="neu"] .account-card.loggedout:hover .account-arrow { color: var(--on-primary); box-shadow: 4px 4px 9px rgba(90,50,0,.36), -2px -2px 5px rgba(255,255,255,.55); transform: translateX(3px); }
html[data-design^="neu"] .account-card.loggedout:active .account-arrow { box-shadow: inset 2px 2px 5px rgba(90,50,0,.3); }
.item-chips li { color: var(--primary); font-weight: 700; }
html[data-design^="neu"] .item-chips li { box-shadow: var(--in-sm); color: var(--primary); }
.pv-desc img.gui-img { image-rendering: auto; }
.pv-desc > p + .perks { margin-top: 14px; }
html[data-design^="neu"] .pv-desc img.gui-img { box-sizing: content-box; max-width: calc(100% - 16px) !important; }
html[data-design^="neu"] .pv-side .btn-gift, html[data-design^="neu"] .pv-side .btn-gift:hover { color: var(--primary); }
html[data-design^="neu"] .pv-side .btn-gift:hover { color: var(--primary-light); }
.pv-desc > :last-child { margin-bottom: 0; }
/* Polish 4: Topbar-Knöpfe schweben über dem Hintergrundbild → Glas statt Neumorphism-Schatten (der wirkt dort wie ein dunkler Fleck) */
html[data-design="neu-seite"] .topbar:not(.scrolled) .btn-link { background: rgba(18,20,25,.58); color: rgba(255,255,255,.92); box-shadow: none; border: 1px solid rgba(255,255,255,.09); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html[data-design="neu-seite"] .topbar:not(.scrolled) .btn-link:hover { background: rgba(18,20,25,.78); color: #fff; }

/* 12.10. Handy: untere Korb-Leiste weg, der Weg zur Kasse ist der goldene Knopf oben (Alex: Leiste ging unter, verwirrte) */
.mobile-cartbar { display: none !important; }