/* =========================================================================
   Smurf-Account-Shops (/league-of-legends/premium-accounts,
   /valorant/premium-accounts): Hero, Account-Karten und die Inhalte unter
   dem Grid. Markup in public/views/website/components/accounts/smurf-*.php.
   Hero und Hintergrund gelten auch fuer die Ranked-Shops (/<spiel>/accounts),
   die diese Datei zusammen mit ranked-shop.css laden.

   Boxen im Look der Boost-Formular-Boxen (heller Hauch statt eigener Farbe,
   feiner Rand), Akzent #5f62ee wie FAQ- und Review-Block der Boost-Seiten.
   ========================================================================= */

/* Seitenfarbe wie die Item-Seiten (Grundfarbe aus main.css) */
html body.premium-accounts-page{ background:#050713; }

/* Der Hero sitzt unter den festen Leisten oben */
main > .sm-hero:first-child,
.page-zoom > main > .sm-hero:first-child{ margin-top:var(--lb-content-top, 0px); }

/* Sprungziel "Browse accounts" nicht unter die festen Leisten schieben */
#accounts{ scroll-margin-top:calc(var(--lb-content-top, 0px) + 12px); }

body.premium-accounts-page .sr-only{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.sm-hero{
    position:relative; isolation:isolate; overflow:hidden;
    color:#fff;
}

/* Key-Art des Spiels hinter der ganzen Seite: Die Shops geben
   lb_game_backdrop() an das Layout (.lb-page-backdrop). Es gelten die
   Grundregeln aus main.css und die Seitenfarbe, also genau dasselbe wie auf
   den Item-Seiten; hier gibt es dafuer keine eigenen Regeln mehr. */
.sm-hero__inner{
    box-sizing:border-box;
    width:100%; max-width:min(92%, 1560px);
    margin:0 auto; padding:22px 0 34px;
}
.sm-hero__main{ max-width:720px; min-width:0; }

.sm-crumbs{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
    margin:0 0 22px; padding:0; list-style:none;
    color:rgba(255,255,255,.48); font-size:12.5px; font-weight:600;
}
.sm-crumbs a{ color:rgba(255,255,255,.62); text-decoration:none; transition:color .15s ease; }
.sm-crumbs a:hover{ color:#fff; }
.sm-crumbs li{ display:inline-flex; align-items:center; gap:8px; }
.sm-crumbs li + li::before{
    content:""; width:5px; height:5px;
    border-top:1.5px solid rgba(255,255,255,.3); border-right:1.5px solid rgba(255,255,255,.3);
    transform:rotate(45deg);
}
.sm-crumbs [aria-current]{ color:rgba(255,255,255,.86); }

.sm-hero__eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    margin-bottom:12px;
    color:#a5b4fc;
    font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
}
.sm-hero__eyebrow img{ width:22px; height:22px; border-radius:6px; object-fit:contain; }
.sm-hero__title{
    margin:0; color:#fff;
    font-size:clamp(30px, 3.4vw, 46px); font-weight:900; line-height:1.06; letter-spacing:-.03em;
}
.sm-hero__desc{
    max-width:620px; margin:14px 0 0;
    color:rgba(255,255,255,.68); font-size:15.5px; line-height:1.6;
}

.sm-hero__proof{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:20px; }
.sm-hero__rating,
.sm-hero__rating:hover,
.sm-hero__rating:focus{ text-decoration:none; }
.sm-hero__rating{
    display:inline-flex; align-items:center; gap:9px;
    height:36px; padding:0 14px 0 12px;
    border:1px solid rgba(255,255,255,.09); border-radius:999px;
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.62); font-size:13px; font-weight:600;
    transition:border-color .15s ease, background .15s ease;
}
.sm-hero__rating:hover{ border-color:rgba(251,191,36,.35); background:rgba(255,255,255,.07); }
.sm-hero__stars{ display:inline-flex; gap:2px; color:#fbbf24; font-size:11.5px; }
.sm-hero__rating b{ color:#fff; font-size:14px; font-weight:900; }
.sm-hero__trust{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:0; padding:0; list-style:none; }
.sm-hero__trust li{
    display:inline-flex; align-items:center; gap:8px;
    color:rgba(255,255,255,.8); font-size:13px; font-weight:700;
}
.sm-hero__trust i{ color:#a5b4fc; font-size:12.5px; }

/* Smurf / Ranked: Segment-Schalter statt zweier grosser Kacheln */
.sm-switch{
    display:inline-flex; gap:4px;
    margin-top:24px; padding:5px;
    border:1px solid rgba(255,255,255,.08); border-radius:15px;
    background:rgba(255,255,255,.04);
}
.sm-switch a,
.sm-switch a:hover,
.sm-switch a:focus{ text-decoration:none; }
.sm-switch a{
    display:inline-flex; align-items:center; gap:9px;
    height:42px; padding:0 18px 0 10px;
    border-radius:11px;
    color:rgba(255,255,255,.66); font-size:14px; font-weight:800; white-space:nowrap;
    transition:background .15s ease, color .15s ease;
}
.sm-switch a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sm-switch a.is-active{ background:#5f62ee; color:#fff; box-shadow:0 8px 22px rgba(95,98,238,.32); }
.sm-switch img{ width:26px; height:26px; border-radius:8px; object-fit:contain; }
.sm-switch a:focus-visible{ outline:2px solid #a3adff; outline-offset:2px; }

@media (max-width:900px){
    .sm-hero__inner{ padding:16px 0 22px; }
}
@media (max-width:767px){
    .sm-crumbs{ margin-bottom:16px; font-size:12px; }
    .sm-hero__eyebrow{ margin-bottom:10px; font-size:11px; }
    .sm-hero__title{ font-size:28px; }
    .sm-hero__desc{ margin-top:10px; font-size:14px; line-height:1.55; }
    .sm-hero__proof{ gap:12px; margin-top:16px; }
    .sm-hero__trust{ gap:8px 14px; }
    .sm-hero__trust li{ font-size:12.5px; }
    .sm-switch{ display:grid; grid-template-columns:1fr 1fr; width:100%; margin-top:18px; }
    .sm-switch a{ justify-content:center; padding:0 10px; font-size:13.5px; }
}

/* ── Filterleiste ─────────────────────────────────────────────────────────
   Drei ruhige Zeilen statt verschachtelter Kaesten: Regionen als Segment-
   Schalter, darunter eine einzige Leiste mit Suche und den Filtern, darunter
   die Rang-Chips. IDs und Klassen sind die, die die Filter-Skripte der Seiten
   benutzen. Mobil (.accounts-toolhead--sheet) heftet sich die Leiste beim
   Scrollen oben an und oeffnet die Filter als Vollbild-Sheet. */
body.premium-accounts-page main > .container{
    max-width:min(92%, 1560px) !important;
    margin:0 auto 48px !important;
    padding-top:0 !important;
}
body.premium-accounts-page .accounts-toolhead{
    position:relative; z-index:120;
    display:flex; flex-direction:column; gap:12px;
    margin:0 0 22px; padding:0;
    border:0; border-radius:0; background:none; box-shadow:none;
}

/* Regionen */
body.premium-accounts-page .accounts-toolhead > .nav-tabs{
    display:inline-flex; align-self:flex-start; flex-wrap:nowrap; gap:4px;
    margin:0; padding:4px;
    border:1px solid rgba(255,255,255,.08); border-radius:14px;
    background:rgba(255,255,255,.035);
}
body.premium-accounts-page .accounts-toolhead > .nav-tabs > a{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:40px; padding:0 16px;
    border:0; border-radius:10px; background:transparent;
    color:rgba(255,255,255,.66); font-size:14px; font-weight:800; text-decoration:none;
    transition:background .15s ease, color .15s ease;
}
body.premium-accounts-page .accounts-toolhead > .nav-tabs > a i{ color:rgba(255,255,255,.42); font-size:12px; }
body.premium-accounts-page .accounts-toolhead > .nav-tabs > a small{
    padding:2px 7px; border-radius:999px;
    background:rgba(255,255,255,.07); color:rgba(255,255,255,.58);
    font-size:11px; font-weight:800;
}
body.premium-accounts-page .accounts-toolhead > .nav-tabs > a:hover{ background:rgba(255,255,255,.06); color:#fff; }
body.premium-accounts-page .accounts-toolhead > .nav-tabs > a.active{
    background:#5f62ee; color:#fff;
    box-shadow:0 8px 22px rgba(95,98,238,.3);
}
body.premium-accounts-page .accounts-toolhead > .nav-tabs > a.active i{ color:#fff; }
body.premium-accounts-page .accounts-toolhead > .nav-tabs > a.active small{ background:rgba(255,255,255,.2); color:#fff; }

/* Suche und Filter in einer Leiste */
body.premium-accounts-page .accounts-toolhead > .shop-filterbar{
    position:relative; z-index:130;
    display:flex; flex-direction:column; gap:12px;
    margin:0; padding:0;
    border:0; background:none; box-shadow:none;
}
body.premium-accounts-page .shop-filterbar__row{
    display:flex; flex-wrap:wrap; align-items:center; gap:4px;
    padding:5px;
    border:1px solid rgba(255,255,255,.08); border-radius:15px;
    background:rgba(255,255,255,.035);
}
body.premium-accounts-page .shop-filterbar__panel{ display:contents; }
body.premium-accounts-page .shop-filterbar__panelhead,
body.premium-accounts-page .shop-mobile-filter-trigger,
body.premium-accounts-page .shop-mobile-filter-apply{ display:none; }
/* Die Region waehlen am Desktop die Tabs darueber; im Handy-Sheet bleibt sie */
body.premium-accounts-page #serverFilterPill{ display:none; }

body.premium-accounts-page .shop-filterbar__search{
    flex:1 1 260px; min-width:200px;
    display:flex; align-items:center; gap:10px;
    height:42px; padding:0 14px;
    border:0; border-radius:11px;
    background:rgba(255,255,255,.045);
    transition:background .15s ease, box-shadow .15s ease;
}
body.premium-accounts-page .shop-filterbar__search:focus-within{
    background:rgba(255,255,255,.07);
    box-shadow:0 0 0 2px rgba(95,98,238,.35);
}
body.premium-accounts-page .shop-filterbar__search i{ color:rgba(255,255,255,.45); font-size:14px; }
body.premium-accounts-page .shop-filterbar__search input{
    flex:1 1 auto; min-width:0; height:100%;
    margin:0; padding:0; border:0; outline:0; background:transparent;
    color:#fff; font-family:inherit; font-size:14px; font-weight:600;
    -webkit-appearance:none; appearance:none;
}
body.premium-accounts-page .shop-filterbar__search input::placeholder{ color:rgba(255,255,255,.4); }

body.premium-accounts-page .shop-pill{ position:relative; flex:0 0 auto; }
body.premium-accounts-page .shop-pill__btn,
body.premium-accounts-page .shop-pill--toggle,
body.premium-accounts-page .shop-clear-all{
    display:inline-flex; align-items:center; gap:8px;
    height:42px; margin:0; padding:0 14px;
    border:0; border-radius:11px; background:transparent;
    color:rgba(255,255,255,.78); font-family:inherit; font-size:13.5px; font-weight:700; white-space:nowrap;
    cursor:pointer; box-shadow:none;
    transition:background .15s ease, color .15s ease;
}
body.premium-accounts-page .shop-pill__btn i:first-child,
body.premium-accounts-page .shop-pill--toggle i{ color:rgba(255,255,255,.45); font-size:13px; transition:color .15s ease; }
body.premium-accounts-page .shop-pill__caret{ color:rgba(255,255,255,.4); font-size:11px; transition:transform .15s ease; }
body.premium-accounts-page .shop-pill__value{ max-width:170px; overflow:hidden; text-overflow:ellipsis; }
body.premium-accounts-page .shop-pill__btn:hover,
body.premium-accounts-page .shop-pill--toggle:hover,
body.premium-accounts-page .shop-clear-all:hover{ background:rgba(255,255,255,.06); color:#fff; }
body.premium-accounts-page .shop-pill__btn[aria-expanded="true"]{ background:rgba(255,255,255,.07); color:#fff; }
body.premium-accounts-page .shop-pill__btn[aria-expanded="true"] .shop-pill__caret{ transform:rotate(180deg); }
body.premium-accounts-page .shop-pill--toggle[aria-pressed="true"]{ background:rgba(95,98,238,.18); color:#fff; }
body.premium-accounts-page .shop-pill--toggle[aria-pressed="true"] i{ color:#a5b4fc; }
body.premium-accounts-page .shop-clear-all{ margin-left:auto; color:rgba(255,255,255,.6); }
body.premium-accounts-page .shop-clear-all i{ font-size:12px; }

/* Aufklappmenues (Rang, Sortierung, Region im Sheet) */
body.premium-accounts-page .shop-pill__menu{
    position:absolute; top:calc(100% + 8px); left:0; z-index:600;
    min-width:220px; max-height:320px; overflow-y:auto;
    margin:0; padding:6px; list-style:none;
    border:1px solid rgba(255,255,255,.1); border-radius:14px;
    background:#17142c;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
}
body.premium-accounts-page .shop-pill__menu[hidden]{ display:none; }
body.premium-accounts-page .shop-pill__menu li{
    display:flex; align-items:center; gap:10px;
    min-height:38px; padding:0 10px;
    border-radius:9px;
    color:rgba(255,255,255,.8); font-size:13.5px; font-weight:700; white-space:nowrap;
    cursor:pointer;
}
body.premium-accounts-page .shop-pill__menu li img{ width:20px; height:20px; object-fit:contain; }
body.premium-accounts-page .shop-pill__menu li > i{ width:18px; text-align:center; color:rgba(255,255,255,.5); font-size:13px; }
body.premium-accounts-page .shop-pill__menu li:hover,
body.premium-accounts-page .shop-pill__menu li:focus{ background:rgba(255,255,255,.06); color:#fff; outline:none; }
body.premium-accounts-page .shop-pill__menu li[aria-selected="true"],
body.premium-accounts-page .shop-pill__menu li.is-selected{ background:rgba(95,98,238,.22); color:#fff; }
body.premium-accounts-page .shop-pill__menu li[data-unavailable="1"]{ display:none; }

/* Rang-Chips */
body.premium-accounts-page .shop-popular{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    margin:0; padding:0; border:0; background:none;
}
body.premium-accounts-page .shop-popular[hidden]{ display:none; }
body.premium-accounts-page .shop-popular__label{
    margin-right:4px;
    color:rgba(255,255,255,.42); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
}
body.premium-accounts-page .shop-popular__chip{
    display:inline-flex; align-items:center; gap:7px;
    height:34px; margin:0; padding:0 13px 0 9px;
    border:1px solid rgba(255,255,255,.07); border-radius:999px;
    background:rgba(255,255,255,.03);
    color:rgba(255,255,255,.75); font-family:inherit; font-size:13px; font-weight:700; white-space:nowrap;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
}
body.premium-accounts-page .shop-popular__chip img{ width:20px; height:20px; object-fit:contain; }
body.premium-accounts-page .shop-popular__chip:hover{ background:rgba(255,255,255,.06); color:#fff; }
body.premium-accounts-page .shop-popular__chip.is-active{
    background:rgba(95,98,238,.18); border-color:rgba(95,98,238,.55); color:#fff;
}

/* Leere Treffer */
body.premium-accounts-page .accounts-empty-state{
    display:none; flex-direction:column; align-items:center; gap:10px;
    padding:48px 20px; text-align:center;
    color:rgba(255,255,255,.75); font-size:14px;
}
body.premium-accounts-page .accounts-empty-state:not([hidden]){ display:flex; }
body.premium-accounts-page .accounts-empty-state i{ font-size:26px; color:rgba(255,255,255,.45); }
body.premium-accounts-page .accounts-empty-state button{
    margin-top:4px; padding:8px 16px;
    border:1px solid rgba(255,255,255,.18); border-radius:999px;
    background:rgba(255,255,255,.06); color:#fff;
    font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
}
body.premium-accounts-page .accounts-empty-state button:hover{ background:rgba(255,255,255,.12); }
body.premium-accounts-page .val-filter-empty{ display:none; padding:38px 20px; text-align:center; color:rgba(255,255,255,.62); font-weight:800; }
body.premium-accounts-page .val-filter-empty.is-visible{ display:block; }

@media (max-width:767px){
    body.premium-accounts-page .accounts-toolhead{ margin-bottom:16px; }
    body.premium-accounts-page .accounts-toolhead > .nav-tabs{
        display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
        align-self:stretch;
    }
    body.premium-accounts-page .accounts-toolhead > .nav-tabs > a{ padding:0 8px; font-size:13.5px; white-space:nowrap; }
    body.premium-accounts-page .accounts-toolhead > .nav-tabs > a small span{ display:none; } /* nur die Zahl */
    body.premium-accounts-page .shop-popular{
        flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px;
        scrollbar-width:none; -webkit-overflow-scrolling:touch;
    }
    body.premium-accounts-page .shop-popular::-webkit-scrollbar{ display:none; }
    body.premium-accounts-page .shop-popular__label,
    body.premium-accounts-page .shop-popular__chip{ flex:0 0 auto; }

    /* Die festen Leisten oben weichen beim Scrollen, die Filterleiste rueckt
       an ihre Stelle - aber nur, solange die Karten zu sehen sind. Die Body-
       Klassen setzen die Skripte beider Seiten (Namen noch aus dem LoL-Shop). */
    body.premium-accounts-page .navbar-mobile,
    body.premium-accounts-page .lb-mobile-gamebar{ transition:transform .22s ease, opacity .18s ease, visibility .18s ease; }
    body.premium-accounts-page.lol-mobile-bars-hidden .navbar-mobile,
    body.premium-accounts-page.lol-mobile-bars-hidden .lb-mobile-gamebar{
        transform:translateY(-115%) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    }
    body.lol-accounts-grid-focus .lb-mobile-bottomnav,
    body.lol-accounts-grid-focus [class*="lb-mobile-bottomnav--"]{ display:none !important; }

    body.premium-accounts-page .accounts-toolhead--sheet > .shop-filterbar{
        position:fixed; top:0; left:0; right:0; z-index:500;
        gap:10px;
        padding:calc(10px + env(safe-area-inset-top)) 14px 12px;
        border-bottom:1px solid rgba(255,255,255,.08); border-radius:0 0 16px 16px;
        background:#110f22;
        box-shadow:0 12px 30px rgba(0,0,0,.45);
        transform:translateY(-110%); opacity:0; visibility:hidden; pointer-events:none;
        transition:transform .22s ease, opacity .18s ease, visibility .18s ease;
    }
    body.premium-accounts-page.lol-mobile-bars-hidden .accounts-toolhead--sheet > .shop-filterbar{
        transform:none; opacity:1; visibility:visible; pointer-events:auto;
    }
    /* Unter dem Shop (FAQ, About Us ...) wuerde sie nur Inhalt verdecken */
    body.premium-accounts-page.lol-mobile-bars-hidden.lol-accounts-past:not(.lol-filters-sheet-open) .accounts-toolhead--sheet > .shop-filterbar{
        transform:translateY(-110%); opacity:0; visibility:hidden; pointer-events:none;
    }
    body.premium-accounts-page .accounts-toolhead--sheet .shop-filterbar__row{
        display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px;
        padding:0; border:0; background:none;
    }
    body.premium-accounts-page .accounts-toolhead--sheet .shop-filterbar__search{
        height:46px; min-width:0;
        border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.05);
    }
    body.premium-accounts-page .accounts-toolhead--sheet .shop-filterbar__search input{ font-size:16px; } /* kein iOS-Zoom */
    body.premium-accounts-page .shop-mobile-filter-trigger{
        display:inline-flex; align-items:center; justify-content:center; gap:8px;
        height:46px; padding:0 16px;
        border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.05);
        color:#fff; font-family:inherit; font-size:14px; font-weight:800; white-space:nowrap; cursor:pointer;
    }
    body.premium-accounts-page .shop-mobile-filter-trigger[aria-expanded="true"]{ background:#5f62ee; border-color:#5f62ee; }
    body.premium-accounts-page .accounts-toolhead--sheet .shop-filterbar__panel{ display:none; }

    /* Filter-Sheet */
    body.lol-filters-sheet-open{ overflow:hidden; }
    body.lol-filters-sheet-open .lb-mobile-bottomnav,
    body.lol-filters-sheet-open [class*="lb-mobile-bottomnav--"]{ display:none !important; }
    body.lol-filters-sheet-open .accounts-toolhead--sheet .shop-popular{ display:none; }
    body.lol-filters-sheet-open .accounts-toolhead--sheet .shop-filterbar__panel{
        position:fixed; inset:0; z-index:700;
        display:flex; flex-direction:column; gap:10px;
        height:100dvh; overflow-y:auto;
        padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
        background:#110f22;
    }
    body.lol-filters-sheet-open .shop-filterbar__panelhead{
        display:flex; align-items:center; justify-content:space-between; gap:12px;
        margin-bottom:6px;
    }
    body.premium-accounts-page .shop-filterbar__paneltitle{ color:#fff; font-size:20px; font-weight:900; }
    body.premium-accounts-page .shop-filterbar__panelactions{ display:inline-flex; align-items:center; gap:10px; }
    body.premium-accounts-page .shop-filterbar__clear{
        padding:6px 4px; border:0; background:transparent;
        color:rgba(255,255,255,.6); font-family:inherit; font-size:14px; font-weight:800; cursor:pointer;
    }
    body.premium-accounts-page .shop-filterbar__close{
        display:inline-flex; align-items:center; justify-content:center;
        width:38px; height:38px;
        border:1px solid rgba(255,255,255,.14); border-radius:50%; background:rgba(255,255,255,.07);
        color:#fff; font-size:17px; cursor:pointer;
    }
    body.lol-filters-sheet-open #serverFilterPill{ display:block; }
    body.lol-filters-sheet-open .accounts-toolhead--sheet .shop-pill{ width:100%; }
    body.lol-filters-sheet-open .accounts-toolhead--sheet .shop-pill__btn,
    body.lol-filters-sheet-open .accounts-toolhead--sheet .shop-pill--toggle{
        width:100%; height:52px; margin:0; padding:0 16px;
        border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.04);
        font-size:15px;
    }
    body.lol-filters-sheet-open .accounts-toolhead--sheet .shop-pill__value{ flex:1 1 auto; max-width:none; text-align:left; }
    /* Zuruecksetzen steht im Sheet schon oben als "Clear Filters" */
    body.lol-filters-sheet-open .accounts-toolhead--sheet .shop-clear-all{ display:none; }
    body.lol-filters-sheet-open .accounts-toolhead--sheet .shop-pill__menu{
        position:static; width:100%; min-width:0; max-height:260px; margin-top:8px; box-shadow:none;
    }
    body.lol-filters-sheet-open .shop-mobile-filter-apply{
        display:block; flex:0 0 auto;
        width:100%; height:54px; margin-top:auto;
        border:0; border-radius:12px; background:#5f62ee;
        color:#fff; font-family:inherit; font-size:16px; font-weight:800; cursor:pointer;
        box-shadow:0 8px 22px rgba(95,98,238,.35);
    }
}
@media (prefers-reduced-motion:reduce){
    body.premium-accounts-page .accounts-toolhead *{ transition:none !important; }
}

/* ── Account-Karten ──────────────────────────────────────────────────── */
body.premium-accounts-page .tab-pane .accounts-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(min(100%, 268px), 1fr)) !important;
    gap:16px !important; align-items:stretch !important;
}
.sm-card.is-filter-hidden{ display:none !important; }

.sm-card{
    --tier:138,143,168;
    position:relative;
    display:flex; flex-direction:column;
    min-width:0;
    border:1px solid rgba(255,255,255,.09); border-radius:18px;
    background:
        radial-gradient(110% 60% at 0% 0%, rgba(var(--tier), .13), transparent 62%),
        #10111f;
    color:#fff;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sm-card:hover,
.sm-card:focus-within{ z-index:5; }
.sm-card:hover{
    border-color:rgba(var(--tier), .45);
    transform:translateY(-2px);
    box-shadow:0 18px 44px rgba(0,0,0,.32);
}

.sm-card__top{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:16px 16px 0;
}
.sm-card__server{
    display:inline-flex; align-items:center; gap:7px;
    height:28px; padding:0 11px;
    border-radius:999px; background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.86); font-size:12px; font-weight:800; letter-spacing:.02em;
}
.sm-card__server i{ color:rgba(255,255,255,.5); font-size:11px; }

.sm-card__ready{
    position:relative;
    display:inline-flex; align-items:center; gap:6px;
    height:28px; padding:0 11px;
    border:1px solid transparent; border-radius:999px;
    font-size:11.5px; font-weight:800; white-space:nowrap;
    cursor:help;
}
.sm-card__ready i{ font-size:11px; }
.sm-card__ready small{ color:rgba(255,255,255,.62); font-size:10.5px; font-weight:700; }
.sm-card__ready--yes{ color:#34d399; border-color:rgba(52,211,153,.3); background:rgba(52,211,153,.1); }
.sm-card__ready--no{ color:#fbbf24; border-color:rgba(251,191,36,.3); background:rgba(251,191,36,.1); }
.sm-card__tip{
    position:absolute; right:0; top:calc(100% + 10px); z-index:30;
    width:230px; padding:10px 12px;
    border:1px solid rgba(255,255,255,.18); border-radius:10px;
    background:#1a1b2e;
    box-shadow:0 12px 34px rgba(0,0,0,.5);
    color:#fff; font-size:11.5px; font-weight:600; line-height:1.4; white-space:normal; text-align:left;
    opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none;
    transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.sm-card__ready:hover .sm-card__tip,
.sm-card__ready:focus .sm-card__tip{ opacity:1; visibility:visible; transform:translateY(0); }

.sm-card__head{
    display:flex; align-items:center; gap:14px;
    padding:16px 16px 18px;
}
.sm-card__emblem{
    flex:0 0 auto;
    display:grid; place-items:center;
    width:56px; height:56px; border-radius:50%;
    border:1px solid rgba(var(--tier), .45);
    background:radial-gradient(circle at 50% 40%, rgba(var(--tier), .3), rgba(var(--tier), .06) 70%);
    box-shadow:0 0 24px rgba(var(--tier), .22);
}
.sm-card__emblem img{ width:40px; height:40px; object-fit:contain; }
.sm-card__heading{ min-width:0; }
.sm-card__tier{
    display:block; margin-bottom:4px;
    color:rgb(var(--tier)); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
}
.sm-card__title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    min-height:2.6em; margin:0;
    color:#fff; font-size:15.5px; font-weight:800; line-height:1.3;
    overflow-wrap:anywhere;
}

.sm-card__feats{
    display:flex; flex-direction:column; gap:9px; flex:1 1 auto;
    margin:0; padding:16px;
    border-top:1px solid rgba(255,255,255,.06);
    list-style:none;
}
.sm-card__feats li{
    display:flex; align-items:center; gap:10px;
    margin:0; padding:0;
    color:rgba(255,255,255,.82); font-size:13px; font-weight:600; line-height:1.35;
}
.sm-card__feats li::before{ content:none; }
.sm-card__feats i{
    flex:0 0 24px;
    display:inline-grid; place-items:center;
    width:24px; height:24px; border-radius:8px;
    background:rgba(95,98,238,.14); color:#a5b4fc; font-size:11px;
}
.sm-card__feats span{ min-width:0; }

.sm-card__foot{
    display:flex; flex-direction:column; gap:12px;
    margin-top:auto; padding:16px;
    border-top:1px solid rgba(255,255,255,.06);
    background:rgba(0,0,0,.12);
    border-radius:0 0 17px 17px;
}
/* Statuszeile: immer genau ein Hinweis, damit jeder Fuss gleich hoch ist */
.sm-card__status{ display:flex; min-width:0; height:26px; }
.sm-card__pill{
    display:inline-flex; align-items:center; gap:6px;
    max-width:100%; height:26px; padding:0 10px;
    border:1px solid transparent; border-radius:999px;
    font-size:11.5px; font-weight:800; white-space:nowrap;
}
.sm-card__pill > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.sm-card__pill i{ font-size:11px; }
.sm-card__pill--stock{ color:#34d399; background:rgba(52,211,153,.08); border-color:rgba(52,211,153,.22); }
.sm-card__pill--left{ color:#ff7b7b; background:rgba(255,82,82,.12); border-color:rgba(255,82,82,.35); }
.sm-card__pill--sold{ color:#fbbf24; background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.3); }
.sm-card__pill--out{ color:rgba(255,255,255,.55); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }

.sm-card__buy{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sm-card__price{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sm-card__price small{ color:rgba(255,255,255,.48); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.sm-card__price b{ color:#fff; font-size:26px; font-weight:900; line-height:1; letter-spacing:-.02em; }
.sm-card__form{ margin:0; }
.sm-card__btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:46px; min-width:132px; padding:0 20px;
    border:0; border-radius:12px;
    background:#5f62ee; color:#fff;
    font-family:inherit; font-size:14px; font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(95,98,238,.3);
    transition:background .15s ease, transform .12s ease;
}
.sm-card__btn:hover{ background:#6a6df0; }
.sm-card__btn:active{ transform:scale(.98); }
.sm-card__btn:focus-visible{ outline:2px solid #a3adff; outline-offset:3px; }
.sm-card__btn--ghost{
    background:rgba(255,255,255,.05); color:rgba(255,255,255,.86);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.sm-card__btn--ghost:hover{ background:rgba(255,255,255,.09); color:#fff; }
.sm-card__btn i{ font-size:13px; }

.sm-card__perks{
    display:flex; flex-wrap:nowrap; align-items:center; gap:14px;
    height:16px; overflow:hidden;
    color:rgba(255,255,255,.55); font-size:12px; font-weight:700; white-space:nowrap;
}
.sm-card__perks span{ display:inline-flex; align-items:center; gap:6px; }
.sm-card__perks i{ font-size:11px; color:#a5b4fc; }
.sm-card__perks .is-cash,
.sm-card__perks .is-cash i{ color:#34d399; }

.sm-card.is-sold-out{ --tier:110,112,130; }
.sm-card.is-sold-out:hover{ transform:none; box-shadow:none; }
.sm-card.is-sold-out .sm-card__head,
.sm-card.is-sold-out .sm-card__feats{ opacity:.6; }
.sm-card.is-sold-out .sm-card__price b{ color:rgba(255,255,255,.45); }

@media (max-width:680px){
    body.premium-accounts-page .tab-pane .accounts-grid{ grid-template-columns:minmax(0,1fr) !important; gap:12px !important; }
    .sm-card:hover{ transform:none; }
    .sm-card__head{ padding:14px 16px 16px; }
    .sm-card__emblem{ width:50px; height:50px; }
    .sm-card__emblem img{ width:36px; height:36px; }
    .sm-card__feats{ padding:14px 16px; gap:8px; }
}
@media (prefers-reduced-motion:reduce){
    .sm-card, .sm-card__btn, .sm-card__tip{ transition:none; }
}

/* ── Inhalte unter dem Grid ──────────────────────────────────────────── */
.lb-acci{
    --acci-card:#10111f;
    --acci-line:rgba(255,255,255,.09);
    --acci-text:#a3adc4;
    --acci-muted:rgba(255,255,255,.58);
    display:flex; flex-direction:column; gap:168px;
    max-width:1240px; margin:0 auto; padding:128px 16px 144px;
    color:#fff;
}
.lb-acci *,.lb-acci *::before,.lb-acci *::after{ box-sizing:border-box; }

.lb-acci-head{ max-width:760px; margin-bottom:28px; }
.lb-acci-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    margin-bottom:12px;
    color:#a5b4fc;
    font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
}
.lb-acci-eyebrow::before{ content:""; width:24px; height:2px; border-radius:99px; background:#5f62ee; }
.lb-acci-title{
    margin:0; color:#fff;
    font-size:clamp(24px,2.3vw,30px); font-weight:800; letter-spacing:-.02em; line-height:1.15;
}
.lb-acci-lead{ margin:10px 0 0; color:var(--acci-muted); font-size:14.5px; line-height:1.65; }

.lb-acci-ic{
    flex:0 0 auto;
    display:grid; place-items:center;
    width:44px; height:44px;
    border-radius:13px;
    background:rgba(95,98,238,.14);
    color:#a5b4fc;
    font-size:17px;
}

.lb-acci-btn,
.lb-acci-btn:hover,
.lb-acci-btn:focus{ text-decoration:none; }
.lb-acci-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:42px; padding:0 16px;
    border-radius:11px;
    background:#5f62ee; border:1px solid #5f62ee;
    color:#fff;
    font-size:13.5px; font-weight:800; white-space:nowrap;
    transition:background .16s ease, border-color .16s ease;
}
.lb-acci-btn:hover{ background:#6a6df0; border-color:#6a6df0; color:#fff; }
.lb-acci-btn:focus-visible{ outline:2px solid #a3adff; outline-offset:3px; }

/* Ablauf: vier Schritte in einer Reihe, verbunden durch eine feine Linie */
.lb-acci-steps__list{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
    margin:0; padding:0; list-style:none;
}
.lb-acci-step{
    position:relative;
    padding:20px 20px 22px;
    border:1px solid var(--acci-line);
    border-radius:18px;
    background:var(--acci-card);
}
.lb-acci-step:not(:last-child)::after{
    content:""; position:absolute; top:41px; right:-15px;
    width:16px; height:2px;
    background:rgba(95,98,238,.45);
}
.lb-acci-step__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.lb-acci-step__num{ color:rgba(165,180,252,.55); font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.lb-acci-step h3,
.lb-acci-card h3{ margin:0 0 6px; color:#fff; font-size:16px; font-weight:800; line-height:1.3; }
.lb-acci-step p,
.lb-acci-card p{ margin:0; color:var(--acci-text); font-size:13.5px; line-height:1.65; }
.lb-acci-help{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    margin-top:14px; padding:10px 10px 10px 18px;
    border:1px solid var(--acci-line); border-radius:16px;
    background:var(--acci-card);
}
.lb-acci-help__note{ display:flex; align-items:center; gap:10px; color:var(--acci-text); font-size:14px; line-height:1.45; }
.lb-acci-help__note i{ color:#34d399; }

/* Bewertungen und FAQ: Abstaende kommen hier vom gap, nicht von den Bloecken */
div.lb-acci > .lbRev4.lbRev4--wide{ padding:0; }
div.lb-acci > .lb-seofaq{ max-width:none; margin:0; padding:0; }
body.premium-accounts-page .lb-seofaq__item,
body.premium-accounts-page .lb-seofaq__item[open]{ background:#10111f; border-color:rgba(255,255,255,.09); }
body.premium-accounts-page .lb-seofaq__item:hover{ border-color:rgba(255,255,255,.18); }
body.premium-accounts-page .lb-seofaq__item[open]{ border-color:rgba(95,98,238,.5); }
body.premium-accounts-page .lbRev4--wide .lbRev4Card,
body.premium-accounts-page .lbRev4--wide .lbRev4Sum{ background:#10111f; border-color:rgba(255,255,255,.09); }
body.premium-accounts-page .lb-seofaq__btn--ghost{ background:rgba(255,255,255,.04); }

/* Ratgeber-Karten */
.lb-acci-guide__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.lb-acci-card{
    padding:22px;
    border:1px solid var(--acci-line); border-radius:18px;
    background:var(--acci-card);
    transition:border-color .18s ease;
}
.lb-acci-card:hover{ border-color:rgba(95,98,238,.35); }
.lb-acci-card .lb-acci-ic{ margin-bottom:16px; }

/* About Us: Text links, Spielfigur rechts, wie auf den Boost-Seiten */
.lb-acci-about{
    position:relative; isolation:isolate;
    min-height:400px;
    border:1px solid var(--acci-line); border-radius:24px;
    overflow:hidden;
    background:#10111f;
}
@media (min-width:768px){
    /* Das Bild bringt eigene runde Ecken mit, die als zweiter Rand durch die Karte schimmern.
       Es sitzt deshalb ein Stueck (Eckenradius = 3,2% der Bildbreite) ueber dem rechten Rand
       und wird von der Karte abgeschnitten; links blendet es sanft aus. */
    .lb-acci-about--lol .lb-acci-about__art{
        top:0; right:0; bottom:auto;
        width:auto; max-width:none; height:100%;
        aspect-ratio:1760 / 701;
        object-fit:fill; object-position:right center;
        transform:translateX(3.2%);
        -webkit-mask-image:linear-gradient(90deg, transparent 30%, rgba(0,0,0,.35) 46%, #000 62%);
        mask-image:linear-gradient(90deg, transparent 30%, rgba(0,0,0,.35) 46%, #000 62%);
    }
}
.lb-acci-about__art{
    position:absolute; top:0; right:0; bottom:0;
    width:62%; height:100%;
    object-fit:cover; object-position:right center;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 42%);
    mask-image:linear-gradient(90deg, transparent 0, #000 42%);
    pointer-events:none; user-select:none;
}
.lb-acci-about--val .lb-acci-about__art{
    top:4%; right:6%; width:40%; height:96%;
    object-fit:contain; object-position:center bottom;
    -webkit-mask-image:none; mask-image:none;
}
.lb-acci-about__content{ position:relative; z-index:1; max-width:600px; padding:56px; }
.lb-acci-about__content p{ margin:14px 0 0; color:var(--acci-text); font-size:15px; line-height:1.75; }
.lb-acci-about__facts{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; padding:0; list-style:none; }
.lb-acci-about__facts li{
    display:inline-flex; align-items:center; gap:8px;
    height:34px; padding:0 13px;
    border:1px solid rgba(255,255,255,.08); border-radius:999px;
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.86);
    font-size:12.5px; font-weight:700;
}
.lb-acci-about__facts i{ color:#a5b4fc; font-size:12px; }

@media (max-width:1000px){
    .lb-acci-steps__list,
    .lb-acci-guide__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .lb-acci-step:not(:last-child)::after{ display:none; }
}
@media (max-width:767px){
    .lb-acci{ gap:104px; padding-top:80px; padding-bottom:96px; }
    .lb-acci-head{ margin-bottom:18px; }
    .lb-acci-lead{ font-size:14px; }

    /* Schritte und Karten: Symbol links, Text rechts - halb so hoch */
    .lb-acci-steps__list,
    .lb-acci-guide__grid{ grid-template-columns:minmax(0,1fr); gap:10px; }
    .lb-acci-step,
    .lb-acci-card{ display:grid; grid-template-columns:44px minmax(0,1fr); align-items:start; column-gap:14px; padding:16px; border-radius:16px; }
    .lb-acci-step__top{ grid-row:span 2; flex-direction:column; justify-content:flex-start; gap:8px; margin:0; }
    .lb-acci-step__num{ order:2; }
    .lb-acci-card .lb-acci-ic{ grid-row:span 2; margin:0; }
    .lb-acci-step h3,
    .lb-acci-card h3{ font-size:15px; }
    .lb-acci-help{ flex-direction:column; align-items:stretch; padding:14px; }
    .lb-acci-help__note{ align-items:flex-start; }
    .lb-acci-btn{ width:100%; }

    /* About: Figur als Banner oben, Text darunter */
    .lb-acci-about{ min-height:0; border-radius:20px; }
    .lb-acci-about__art,
    .lb-acci-about--val .lb-acci-about__art{
        position:relative; top:auto; right:auto; bottom:auto;
        display:block; width:100%; height:190px;
        -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent);
        mask-image:linear-gradient(180deg, #000 55%, transparent);
    }
    .lb-acci-about--lol .lb-acci-about__art{ object-position:88% center; }
    .lb-acci-about--val .lb-acci-about__art{ object-fit:contain; object-position:center top; height:220px; }
    .lb-acci-about__content{ max-width:none; margin-top:-34px; padding:0 20px 24px; }
    .lb-acci-about__content p{ font-size:14.5px; line-height:1.7; }
}
@media (prefers-reduced-motion:reduce){
    .lb-acci-card, .lb-acci-btn, .sm-switch a, .sm-hero__rating{ transition:none; }
}