:root {

    --bg:#060606;
    --bg2:#0a0a0a;

    --panel:#101010;
    --panel2:#151515;

    --white:#f5f4ef;
    --muted:#aaa8a1;

    --orange:#f36b08;
    --orange2:#ff891f;

    --gold:#d6a548;
    --gold2:#f0c86b;

    --line:rgba(255,255,255,.09);

    --radius:24px;

    --shell:1280px;

    --shadow:
        0 28px 80px rgba(0,0,0,.48);
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {

    margin:0;

    color:var(--white);

    background:
        radial-gradient(
            circle at 78% 4%,
            rgba(243,107,8,.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 8% 42%,
            rgba(214,165,72,.065),
            transparent 25%
        ),
        var(--bg);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height:1.55;
}

body::before {

    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    z-index:-1;

    opacity:.85;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:
        46px 46px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 90%
        );
}

img {
    display:block;
    max-width:100%;
}

a {
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea {
    font:inherit;
}

.shell {

    width:min(
        calc(100% - 42px),
        var(--shell)
    );

    margin-inline:auto;
}

.section {
    padding:105px 0;
}

.section-dark {

    border-block:
        1px solid var(--line);

    background:
        rgba(255,255,255,.018);
}

.eyebrow {

    display:block;

    margin-bottom:15px;

    color:var(--orange);

    text-transform:uppercase;

    letter-spacing:.17em;

    font-size:.77rem;

    font-weight:950;
}

h1,
h2,
h3,
h4,
p {
    margin-top:0;
}

h1 {

    max-width:1100px;

    margin-bottom:28px;

    font-size:
        clamp(3.7rem,7.7vw,7.8rem);

    line-height:.9;

    letter-spacing:-.06em;

    text-transform:uppercase;
}

h2 {

    margin-bottom:30px;

    font-size:
        clamp(2.5rem,4.7vw,4.8rem);

    line-height:.97;

    letter-spacing:-.045em;
}

h3 {
    font-size:1.45rem;
}

.lead {

    max-width:790px;

    color:#ceccc5;

    font-size:
        clamp(1.08rem,1.8vw,1.35rem);
}

.orange {
    color:var(--orange);
}

.gold {
    color:var(--gold2);
}

/* HEADER */

.site-header {

    position:sticky;
    top:0;

    z-index:1000;

    border-bottom:
        1px solid var(--line);

    background:
        rgba(6,6,6,.88);

    backdrop-filter:
        blur(20px);
}

.header-inner {

    min-height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;
}

.brand {

    display:flex;

    align-items:center;

    gap:13px;
}

.brand-logo-wrap {

    width:56px;
    height:56px;

    display:grid;

    place-items:center;
}

.brand-logo {

    max-width:56px;
    max-height:56px;

    object-fit:contain;
}

.brand-fallback {

    width:48px;
    height:48px;

    display:none;

    place-items:center;

    color:var(--gold2);

    font-family:Georgia,serif;

    font-weight:950;

    font-size:1.25rem;
}

.brand-copy {
    display:grid;
}

.brand-copy strong {
    font-size:.9rem;
}

.brand-copy span {

    color:#92918c;

    font-size:.69rem;
}

.main-nav {

    display:flex;

    align-items:center;

    gap:3px;
}

.main-nav > a,
.nav-parent > button {

    padding:11px 10px;

    color:#d8d7d2;

    border:0;

    background:none;

    cursor:pointer;

    font-size:.85rem;

    font-weight:820;
}

.main-nav > a:hover,
.main-nav > a.active,
.nav-parent > button:hover {
    color:var(--orange);
}

.nav-parent {
    position:relative;
}

.nav-dropdown {

    position:absolute;

    top:100%;
    left:0;

    display:none;

    min-width:220px;

    padding:8px;

    border:
        1px solid var(--line);

    border-radius:14px;

    background:#111;

    box-shadow:var(--shadow);
}

.nav-parent:hover
.nav-dropdown {
    display:block;
}

.nav-dropdown a {

    display:block;

    padding:11px 12px;

    border-radius:9px;

    color:#ccc;
}

.nav-dropdown a:hover {

    color:var(--orange);

    background:
        rgba(243,107,8,.1);
}

.main-nav .nav-cta {

    margin-left:6px;

    padding-inline:18px;

    border-radius:999px;

    color:#080808;

    background:var(--orange);
}

.menu-button {
    display:none;
}

/* HERO */

.hero {

    position:relative;

    min-height:
        calc(100svh - 78px);

    display:flex;

    align-items:center;

    overflow:hidden;
}

.hero::after {

    content:"HSU";

    position:absolute;

    right:-2vw;
    bottom:-7vw;

    color:transparent;

    font-family:
        Georgia,
        serif;

    font-size:
        min(34vw,520px);

    font-weight:900;

    line-height:1;

    -webkit-text-stroke:
        1px rgba(255,255,255,.055);

    pointer-events:none;
}

.hero-content {

    position:relative;

    z-index:2;

    padding:110px 0;
}

.hero-title span {
    display:block;
}

.hero-subline {

    max-width:800px;

    color:#cbc9c2;

    font-size:
        clamp(1.16rem,2vw,1.55rem);
}

.actions {

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:32px;
}

.button {

    min-height:52px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:0 24px;

    border:
        1px solid var(--line);

    border-radius:999px;

    cursor:pointer;

    font-weight:900;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.button:hover {
    transform:translateY(-2px);
}

.button-primary {

    color:#080808;

    border-color:var(--orange);

    background:var(--orange);
}

.button-primary:hover {
    background:var(--orange2);
}

.button-secondary {
    background:rgba(255,255,255,.035);
}

.button-secondary:hover {

    color:var(--orange);

    border-color:
        rgba(243,107,8,.45);
}

.hero-stats {

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:64px;
}

.hero-stat {

    padding:
        7px 24px 7px 17px;

    border-left:
        2px solid var(--orange);
}

.hero-stat strong {

    display:block;

    font-size:1.18rem;
}

.hero-stat span {

    display:block;

    color:var(--muted);

    font-size:.78rem;
}

/* GRIDS */

.grid2,
.grid3,
.grid4 {

    display:grid;

    gap:22px;
}

.grid2 {
    grid-template-columns:
        repeat(2,1fr);
}

.grid3 {
    grid-template-columns:
        repeat(3,1fr);
}

.grid4 {
    grid-template-columns:
        repeat(4,1fr);
}

.card {

    position:relative;

    overflow:hidden;

    padding:30px;

    border:
        1px solid var(--line);

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.036),
            transparent
        ),
        var(--panel);

    box-shadow:
        0 20px 60px rgba(0,0,0,.2);

    transition:
        transform .24s ease,
        border-color .24s ease;
}

.card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(243,107,8,.34);
}

.card-number {

    color:var(--orange);

    font-size:3rem;

    font-weight:950;
}

/* TEAM */

.team-card {

    min-height:450px;

    display:flex;

    align-items:flex-end;

    background-size:cover;

    background-position:center;
}

.team-card::before {

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.98),
            rgba(0,0,0,.40) 62%,
            rgba(0,0,0,.15)
        ),
        radial-gradient(
            circle at 90% 8%,
            rgba(243,107,8,.22),
            transparent 35%
        );
}

.team-card-content {

    position:relative;

    z-index:2;
}

.team-league {

    color:var(--orange);

    font-size:.8rem;

    font-weight:950;

    letter-spacing:.1em;
}

.team-card h3 {

    margin:7px 0;

    font-size:
        clamp(2.2rem,4vw,4rem);
}

.image-placeholder {

    min-height:460px;

    display:grid;

    align-content:center;

    justify-items:center;

    gap:8px;

    border:
        1px dashed rgba(255,255,255,.15);

    border-radius:var(--radius);

    background:
        radial-gradient(
            circle at center,
            rgba(243,107,8,.11),
            transparent 40%
        ),
        #0d0d0d;
}

.image-placeholder span {

    color:var(--gold);

    font-family:Georgia,serif;

    font-size:6rem;

    font-weight:950;
}

.image-placeholder small {
    color:var(--muted);
}

/* DATA */

.data-block {

    min-height:250px;

    padding:34px;

    border:
        1px dashed rgba(255,255,255,.18);

    border-radius:
        var(--radius);

    background:#101010;
}

.status {

    display:inline-flex;

    padding:7px 11px;

    border-radius:999px;

    color:var(--orange);

    background:
        rgba(243,107,8,.11);

    font-size:.78rem;

    font-weight:900;
}

.embed-frame {

    width:100%;
    height:900px;

    border:0;

    border-radius:20px;

    background:#fff;
}

/* METRICS */

.metric {

    padding:27px;

    border-top:
        2px solid var(--orange);

    border-radius:
        0 0 15px 15px;

    background:#101010;
}

.metric strong {

    display:block;

    font-size:2rem;
}

.metric span {
    color:var(--muted);
}

/* AUDIO */

.hymn {

    display:grid;

    grid-template-columns:
        1.25fr 1fr;

    align-items:center;

    gap:50px;
}

.audio-card {

    padding:30px;

    border:
        1px solid var(--line);

    border-radius:
        var(--radius);

    background:#111;
}

audio {
    width:100%;
}

/* PARTNERS */

.partner-logo-wrap {

    min-height:145px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;
}

.partner-logo {

    max-width:260px;
    max-height:120px;

    object-fit:contain;
}

.partner-fallback {

    color:var(--gold2);

    font-size:1.55rem;

    font-weight:900;

    text-align:center;
}

/* SPONSOR */

.price {

    margin:12px 0 3px;

    font-size:3.5rem;

    font-weight:950;

    letter-spacing:-.06em;
}

.price-card.featured {

    border-color:
        rgba(243,107,8,.52);

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(243,107,8,.19),
            transparent 38%
        ),
        #111;
}

.badge {

    display:inline-flex;

    padding:6px 10px;

    border-radius:999px;

    color:#080808;

    background:var(--orange);

    font-size:.72rem;

    font-weight:950;
}

.list {

    list-style:none;

    padding:0;
}

.list li {

    position:relative;

    margin:12px 0;

    padding-left:27px;

    color:#ccc;
}

.list li::before {

    content:"✓";

    position:absolute;

    left:0;

    color:var(--orange);

    font-weight:950;
}

/* CTA */

.cta {

    padding:
        clamp(38px,7vw,85px);

    border:
        1px solid rgba(243,107,8,.28);

    border-radius:30px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(214,165,72,.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(243,107,8,.14),
            transparent 48%
        ),
        #111;
}

/* VENUE */

.venue-address {

    font-size:
        clamp(1.45rem,3vw,2.5rem);

    font-weight:900;
}

/* FOOTER */

.site-footer {

    padding:
        70px 0 25px;

    border-top:
        1px solid var(--line);

    background:#040404;
}

.footer-grid {

    display:grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1fr;

    gap:34px;
}

.footer-brand {

    color:var(--gold2);

    font-family:Georgia,serif;

    font-size:4rem;

    font-weight:950;
}

.footer-tagline strong {
    color:var(--orange);
}

.footer-grid h4 {

    color:var(--orange);

    font-size:.74rem;

    letter-spacing:.16em;

    text-transform:uppercase;
}

.footer-grid a {

    display:block;

    margin:8px 0;

    color:#969590;
}

.footer-grid a:hover {
    color:#fff;
}

.footer-bottom {

    margin-top:50px;

    padding-top:19px;

    display:flex;

    justify-content:space-between;

    gap:20px;

    border-top:
        1px solid var(--line);

    color:#777;

    font-size:.78rem;
}

/* MOBILE */

@media(max-width:920px) {

    .menu-button {

        width:46px;
        height:42px;

        display:grid;

        align-content:center;

        gap:5px;

        padding:9px;

        border:
            1px solid var(--line);

        border-radius:12px;

        background:#111;
    }

    .menu-button span {

        display:block;

        height:2px;

        background:#fff;
    }

    .main-nav {

        position:fixed;

        top:78px;
        left:0;
        right:0;

        display:none;

        padding:18px;

        flex-direction:column;

        align-items:stretch;

        border-bottom:
            1px solid var(--line);

        background:#080808;
    }

    .main-nav.open {
        display:flex;
    }

    .main-nav > a,
    .nav-parent > button {

        width:100%;

        text-align:left;

        font-size:1rem;
    }

    .nav-dropdown {

        position:static;

        display:block;

        width:auto;

        margin-left:15px;

        border:0;

        background:none;

        box-shadow:none;
    }

    .grid2,
    .grid3,
    .grid4,
    .hymn {

        grid-template-columns:1fr;
    }

    .footer-grid {

        grid-template-columns:
            1fr 1fr;
    }
}

@media(max-width:560px) {

    .shell {
        width:calc(100% - 26px);
    }

    .brand-copy {
        display:none;
    }

    .hero {
        min-height:auto;
    }

    .hero-content {
        padding:88px 0;
    }

    .section {
        padding:72px 0;
    }

    h1 {

        font-size:
            clamp(3.5rem,18vw,5.8rem);
    }

    .footer-grid {
        grid-template-columns:1fr;
    }

    .footer-bottom {
        flex-direction:column;
    }

    .price {
        font-size:2.9rem;
    }
}

/* =========================================
   V2 VISUAL SYSTEM
========================================= */

.hero-photo {

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.96) 0%,
            rgba(5,5,5,.78) 48%,
            rgba(5,5,5,.40) 100%
        ),
        url('/assets/img/hero.webp'),
        url('/assets/img/placeholder-darts.svg');

    background-size:cover;
    background-position:center;
}

.visual-strip {

    position:relative;

    min-height:570px;

    display:flex;

    align-items:flex-end;

    overflow:hidden;
}

.visual-strip-image {

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(5,5,5,.96),
            rgba(5,5,5,.20)
        ),
        url('/assets/img/community.webp'),
        url('/assets/img/placeholder-darts.svg');

    background-size:cover;
    background-position:center;
}

.visual-strip-content {

    position:relative;

    z-index:2;

    padding-bottom:70px;
}

.visual-strip h2 {
    max-width:760px;
    margin:0;
}

.players-grid {

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}

.player-card {

    overflow:hidden;

    border:
        1px solid var(--line);

    border-radius:
        var(--radius);

    background:#101010;

    transition:
        transform .25s ease,
        border-color .25s ease;
}

.player-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(243,107,8,.5);
}

.player-image {

    height:390px;

    overflow:hidden;

    background:#080808;
}

.player-image img {

    width:100%;
    height:100%;

    object-fit:cover;
}

.player-content {
    padding:24px;
}

.player-content h3 {
    margin-bottom:2px;
}

.player-nickname {

    display:block;

    margin-bottom:20px;

    color:var(--gold2);
}

.player-more {

    color:var(--orange);

    font-size:.86rem;

    font-weight:850;
}

.player-profile-grid {

    display:grid;

    grid-template-columns:
        minmax(300px,.8fr)
        minmax(400px,1.2fr);

    gap:70px;

    align-items:center;
}

.player-profile-image {

    overflow:hidden;

    border-radius:28px;

    border:
        1px solid var(--line);

    box-shadow:var(--shadow);
}

.player-profile-image img {

    width:100%;
    aspect-ratio:4/5;

    object-fit:cover;
}

.player-big-nickname {

    color:var(--gold2);

    font-size:1.5rem;

    font-weight:900;
}

.player-facts {

    margin:
        30px 0;
}

.board-grid {
    align-items:start;
}

.board-card {

    overflow:hidden;

    border:
        1px solid var(--line);

    border-radius:22px;

    background:#101010;
}

.board-photo {

    height:320px;

    overflow:hidden;
}

.board-photo img {

    width:100%;
    height:100%;

    object-fit:cover;
}

.board-info {
    padding:22px;
}

.board-info h3 {
    margin-bottom:10px;
}

.contact-link {

    color:var(--muted);

    font-size:.82rem;

    word-break:break-word;
}

.contact-link:hover {
    color:var(--orange);
}

.contact-grid {

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:18px;

    margin-top:30px;
}

.contact-grid-large {

    grid-template-columns:
        repeat(3,1fr);

    margin-top:55px;
}

.contact-card {

    min-height:160px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:7px;

    padding:28px;

    border:
        1px solid var(--line);

    border-radius:20px;

    background:#111;
}

.contact-card:hover {

    border-color:
        rgba(243,107,8,.5);
}

.contact-card strong {

    font-size:1.2rem;
}

.contact-card span:last-child {

    color:var(--muted);

    font-size:.87rem;
}

.contact-icon {

    color:var(--orange);

    font-size:1.8rem;
}

.partner-card {
    display:block;
}

.partner-link {

    display:block;

    margin-top:18px;

    color:var(--orange);

    font-weight:850;

    font-size:.84rem;
}


/* =========================================
   MOBILE V2
========================================= */

@media(max-width:920px) {

    .hero-photo {

        min-height:
            calc(100svh - 78px);

        background:
            linear-gradient(
                to bottom,
                rgba(5,5,5,.60),
                rgba(5,5,5,.95)
            ),
            url('/assets/img/hero-mobile.webp'),
            url('/assets/img/placeholder-darts.svg');

        background-size:cover;
        background-position:center;
    }

    .hero-content {

        padding:
            110px 0 70px;
    }

    .hero-title {

        max-width:100%;
    }

    .hero-subline {

        max-width:95%;
    }

    .hero-stats {

        display:grid;

        grid-template-columns:
            repeat(2,1fr);

        width:100%;
    }

    .hero-stat {

        padding:14px;

        border-left:0;

        border-top:
            2px solid var(--orange);

        background:
            rgba(10,10,10,.75);
    }

    .players-grid {

        grid-template-columns:
            repeat(2,1fr);
    }

    .player-profile-grid {

        grid-template-columns:1fr;

        gap:35px;
    }

    .contact-grid-large {

        grid-template-columns:1fr;
    }

    .visual-strip {
        min-height:430px;
    }
}

@media(max-width:600px) {

    .main-nav {

        height:
            calc(100svh - 78px);

        overflow-y:auto;
    }

    .main-nav .nav-cta {

        margin:
            10px 0 0;

        text-align:center;
    }

    .players-grid {
        grid-template-columns:1fr;
    }

    .player-image {
        height:440px;
    }

    .contact-grid {
        grid-template-columns:1fr;
    }

    .hero-title {

        font-size:
            clamp(3rem,16vw,5rem);

        line-height:.92;
    }

    .hero-stats {
        grid-template-columns:1fr 1fr;
    }

    .actions {

        flex-direction:column;
    }

    .actions .button {
        width:100%;
    }

    .card {
        padding:24px;
    }

    .section {
        padding:64px 0;
    }

    .visual-strip-content {
        padding-bottom:40px;
    }

    .visual-strip h2 {
        font-size:2.5rem;
    }
}

/* =========================================================
   HSU V3 — PREMIUM VISUAL SYSTEM
========================================================= */

:root{
    --hsu-bg:#050505;
    --hsu-bg-soft:#0a0a0a;
    --hsu-card:#101010;
    --hsu-card-2:#141414;
    --hsu-orange:#ff6a00;
    --hsu-orange-soft:#ff8a2b;
    --hsu-gold:#d8ad55;
    --hsu-text:#f4f1ea;
    --hsu-muted:#a9a59d;
    --hsu-line:rgba(255,255,255,.08);
    --hsu-line-strong:rgba(255,106,0,.22);
    --hsu-shadow:0 30px 90px rgba(0,0,0,.55);
    --hsu-radius:28px;
}

body{
    background:
        radial-gradient(circle at 80% 0%, rgba(255,106,0,.11), transparent 30%),
        radial-gradient(circle at 15% 30%, rgba(216,173,85,.05), transparent 26%),
        linear-gradient(180deg,#050505 0%,#080808 100%);
}

main{
    overflow:hidden;
}

/* HEADER */

.site-header{
    background:rgba(5,5,5,.78);
    backdrop-filter:blur(24px) saturate(140%);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.header-inner{
    min-height:84px;
}

.brand-logo-wrap{
    width:62px;
    height:62px;
}

.brand-logo{
    max-width:62px;
    max-height:62px;
}

.brand-copy strong{
    font-size:.95rem;
    letter-spacing:.01em;
}

.brand-copy span{
    margin-top:2px;
    color:#7f7c76;
    letter-spacing:.05em;
    text-transform:uppercase;
    font-size:.6rem;
}

.main-nav > a,
.nav-parent > button{
    position:relative;
    padding:13px 12px;
    font-size:.82rem;
    letter-spacing:.02em;
}

.main-nav > a::after,
.nav-parent > button::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:4px;
    height:1px;
    background:var(--hsu-orange);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .2s ease;
}

.main-nav > a:hover::after,
.nav-parent > button:hover::after{
    transform:scaleX(1);
}

.nav-dropdown{
    padding:10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(14,14,14,.96);
}

.nav-dropdown a{
    padding:12px 14px;
    border-radius:12px;
}

.main-nav .nav-cta{
    margin-left:10px;
    padding:13px 18px;
    border:1px solid rgba(255,130,40,.32);
    background:
        linear-gradient(135deg,#ff6a00,#f09a2b);
    color:#090909;
    box-shadow:0 10px 35px rgba(255,106,0,.18);
}

/* TYPOGRAPHY */

.eyebrow{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    font-size:.72rem;
    letter-spacing:.22em;
}

.eyebrow::before{
    content:"";
    width:26px;
    height:1px;
    background:var(--hsu-orange);
}

h1{
    max-width:1180px;
    font-size:clamp(4rem,8vw,8.3rem);
    line-height:.88;
    letter-spacing:-.065em;
}

h2{
    font-size:clamp(2.65rem,5vw,5.15rem);
    line-height:.94;
    letter-spacing:-.05em;
}

h3{
    font-size:1.5rem;
    letter-spacing:-.02em;
}

.lead{
    max-width:820px;
    color:#c7c3bb;
    line-height:1.75;
}

/* SECTIONS */

.section{
    position:relative;
    padding:125px 0;
}

.section-dark{
    background:
        linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
    border-block:1px solid rgba(255,255,255,.055);
}

/* HERO */

.hero,
.hero-photo{
    min-height:calc(100svh - 84px);
}

.hero-photo{
    background:
        linear-gradient(90deg,rgba(5,5,5,.97) 0%,rgba(5,5,5,.82) 45%,rgba(5,5,5,.36) 100%),
        radial-gradient(circle at 75% 30%,rgba(255,106,0,.16),transparent 25%),
        url('/assets/img/hero.webp'),
        url('/assets/img/placeholder-darts.svg');
    background-size:cover;
    background-position:center;
}

.hero-content{
    max-width:1080px;
    padding:130px 0 100px;
}

.hero-subline{
    max-width:730px;
    font-size:clamp(1.12rem,1.6vw,1.42rem);
    line-height:1.7;
}

.hero-stats{
    margin-top:72px;
    gap:12px;
}

.hero-stat{
    min-width:150px;
    padding:18px 20px;
    border-left:0;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:rgba(10,10,10,.48);
    backdrop-filter:blur(12px);
}

.hero-stat strong{
    font-size:1.28rem;
}

.hero-stat span{
    margin-top:2px;
}

/* BUTTONS */

.button{
    min-height:56px;
    padding:0 27px;
    border-radius:999px;
    letter-spacing:.015em;
}

.button-primary{
    background:linear-gradient(135deg,#ff6a00,#f3a13a);
    border-color:transparent;
    box-shadow:0 15px 36px rgba(255,106,0,.19);
}

.button-primary:hover{
    box-shadow:0 20px 42px rgba(255,106,0,.28);
}

.button-secondary{
    background:rgba(255,255,255,.025);
    backdrop-filter:blur(10px);
}

/* CARDS */

.card{
    padding:34px;
    border-radius:var(--hsu-radius);
    border:1px solid rgba(255,255,255,.07);
    background:
        linear-gradient(145deg,rgba(255,255,255,.035),transparent 45%),
        linear-gradient(180deg,#111,#0c0c0c);
    box-shadow:0 20px 70px rgba(0,0,0,.24);
}

.card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,106,0,.24);
    box-shadow:0 28px 80px rgba(0,0,0,.35);
}

/* VISUAL STRIP */

.visual-strip{
    min-height:680px;
}

.visual-strip-image{
    background:
        linear-gradient(to top,rgba(5,5,5,.98),rgba(5,5,5,.35) 65%,rgba(5,5,5,.05)),
        linear-gradient(90deg,rgba(5,5,5,.78),transparent 60%),
        url('/assets/img/community.webp'),
        url('/assets/img/placeholder-darts.svg');
    background-size:cover;
    background-position:center;
}

.visual-strip-content{
    padding-bottom:90px;
}

/* TEAM CARDS */

.team-card{
    min-height:540px;
    padding:38px;
    border-radius:30px;
}

.team-card::before{
    background:
        linear-gradient(to top,rgba(0,0,0,.98) 0%,rgba(0,0,0,.63) 45%,rgba(0,0,0,.15) 75%),
        radial-gradient(circle at 85% 10%,rgba(255,106,0,.22),transparent 35%);
}

.team-card h3{
    font-size:clamp(2.7rem,4.5vw,4.7rem);
}

.team-card-content p{
    max-width:390px;
    color:#bcb8b0;
}

/* PLAYER CARDS */

.players-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
}

.player-card{
    border-radius:24px;
    border:1px solid rgba(255,255,255,.07);
    background:linear-gradient(180deg,#111,#0b0b0b);
    box-shadow:0 22px 60px rgba(0,0,0,.25);
}

.player-image{
    position:relative;
    height:430px;
}

.player-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(7,7,7,.7),transparent 50%);
    pointer-events:none;
}

.player-content{
    padding:27px 28px 30px;
}

.player-content h3{
    font-size:1.65rem;
}

.player-nickname{
    margin-top:3px;
}

/* BOARD / RESPONSIBLE PEOPLE */

.board-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
}

.board-card{
    position:relative;
    overflow:hidden;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.07);
    background:linear-gradient(180deg,#111,#0b0b0b);
    box-shadow:0 25px 70px rgba(0,0,0,.28);
    transition:transform .25s ease,border-color .25s ease;
}

.board-card:hover{
    transform:translateY(-7px);
    border-color:rgba(255,106,0,.25);
}

.board-photo{
    height:390px;
    position:relative;
}

.board-photo::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(8,8,8,.8),transparent 58%);
    pointer-events:none;
}

.board-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.board-info{
    padding:26px 26px 30px;
}

.board-info .eyebrow{
    margin-bottom:10px;
}

.board-info h3{
    margin-bottom:12px;
    font-size:1.55rem;
}

.contact-link{
    display:inline-flex;
    margin-top:2px;
    color:#9c9890;
}

/* CONTACT */

.contact-grid{
    gap:20px;
}

.contact-card{
    min-height:190px;
    padding:34px;
    border-radius:22px;
    background:
        radial-gradient(circle at 90% 10%,rgba(255,106,0,.08),transparent 35%),
        #101010;
    transition:transform .22s ease,border-color .22s ease;
}

.contact-card:hover{
    transform:translateY(-4px);
}

.contact-icon{
    font-size:2rem;
}

/* PARTNERS */

.partner-card{
    min-height:280px;
}

.partner-logo-wrap{
    min-height:165px;
}

.partner-link{
    margin-top:20px;
}

/* CTA */

.cta{
    border-radius:34px;
    padding:clamp(48px,7vw,92px);
    background:
        radial-gradient(circle at 90% 15%,rgba(216,173,85,.12),transparent 28%),
        radial-gradient(circle at 20% 20%,rgba(255,106,0,.12),transparent 35%),
        linear-gradient(135deg,#121212,#090909);
    box-shadow:0 35px 100px rgba(0,0,0,.35);
}

/* FOOTER */

.site-footer{
    padding:90px 0 30px;
    background:
        radial-gradient(circle at 15% 0%,rgba(255,106,0,.05),transparent 25%),
        #030303;
}

.footer-grid{
    gap:48px;
}

.footer-brand{
    font-size:4.6rem;
    letter-spacing:-.05em;
}

.footer-grid h4{
    margin-bottom:16px;
}

.footer-grid a{
    margin:10px 0;
}

/* MOBILE */

@media(max-width:1100px){
    .board-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:920px){

    .header-inner{
        min-height:76px;
    }

    .main-nav{
        top:76px;
        padding:24px 20px 36px;
        background:rgba(5,5,5,.98);
        backdrop-filter:blur(22px);
    }

    .nav-dropdown{
        margin:4px 0 8px;
        padding:0 0 0 14px;
    }

    .hero-photo{
        min-height:calc(100svh - 76px);
        background:
            linear-gradient(to bottom,rgba(5,5,5,.42),rgba(5,5,5,.96) 78%),
            url('/assets/img/hero-mobile.webp'),
            url('/assets/img/placeholder-darts.svg');
        background-size:cover;
        background-position:center;
    }

    .hero-content{
        padding:105px 0 70px;
    }

    .hero-title{
        max-width:720px;
    }

    .hero-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .grid3,
    .players-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .visual-strip{
        min-height:520px;
    }

    .section{
        padding:90px 0;
    }
}

@media(max-width:620px){

    .shell{
        width:calc(100% - 28px);
    }

    h1{
        font-size:clamp(3.1rem,16vw,5rem);
    }

    h2{
        font-size:clamp(2.3rem,11vw,3.4rem);
    }

    .hero-content{
        padding:84px 0 52px;
    }

    .hero-subline{
        font-size:1.05rem;
        line-height:1.65;
    }

    .hero-stats{
        grid-template-columns:1fr 1fr;
        gap:10px;
        margin-top:46px;
    }

    .hero-stat{
        min-width:0;
        padding:15px 14px;
    }

    .grid2,
    .grid3,
    .grid4,
    .players-grid,
    .board-grid{
        grid-template-columns:1fr;
    }

    .team-card{
        min-height:430px;
        padding:27px;
    }

    .player-image{
        height:470px;
    }

    .board-photo{
        height:420px;
    }

    .section{
        padding:72px 0;
    }

    .card{
        padding:26px;
    }

    .contact-card{
        min-height:150px;
        padding:26px;
    }

    .visual-strip{
        min-height:430px;
    }

    .visual-strip-content{
        padding-bottom:48px;
    }

    .footer-grid{
        gap:30px;
    }

    .footer-brand{
        font-size:3.7rem;
    }
}

/* =========================================================
   HSU V4 · PREMIUM SPORTS BRAND
========================================================= */

:root{
    --black:#040404;
    --surface:#0a0a0a;
    --surface2:#101010;
    --surface3:#151515;
    --cream:#f4f0e7;
    --grey:#9c9890;
    --orange:#f36a0a;
    --orange-bright:#ff7b18;
    --gold:#cda052;
    --border:rgba(255,255,255,.075);
    --border-orange:rgba(243,106,10,.3);
    --radius-xl:34px;
    --radius-lg:26px;
    --ease:cubic-bezier(.22,1,.36,1);
}

html{
    background:#040404;
}

body{
    min-height:100%;
    background:
        radial-gradient(circle at 80% 0%,rgba(243,106,10,.08),transparent 26%),
        #050505;
}

body.menu-open{
    overflow:hidden;
}

.page-glow{
    position:fixed;
    z-index:-2;
    width:600px;
    height:600px;
    border-radius:50%;
    filter:blur(120px);
    pointer-events:none;
    opacity:.12;
}

.page-glow-one{
    right:-300px;
    top:120px;
    background:#f36a0a;
}

.page-glow-two{
    left:-350px;
    top:55%;
    background:#bd9148;
}

/* HEADER */

.site-header{
    background:rgba(4,4,4,.82);
    border-bottom:1px solid rgba(255,255,255,.055);
    backdrop-filter:blur(26px) saturate(130%);
}

.header-inner{
    min-height:88px;
}

.brand{
    gap:15px;
}

.brand-mark{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
}

.brand-logo{
    width:100%;
    height:100%;
    max-width:64px;
    max-height:64px;
    object-fit:contain;
}

.brand-fallback{
    width:56px;
    height:56px;
    border:1px solid rgba(243,106,10,.34);
    border-radius:50%;
    place-items:center;
    font-family:Georgia,serif;
    color:var(--gold);
}

.brand-copy strong{
    color:#f6f2e9;
    font-size:.94rem;
    letter-spacing:.015em;
}

.brand-copy span{
    margin-top:4px;
    color:#77736c;
    font-size:.58rem;
    font-weight:750;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.main-nav{
    gap:2px;
}

.main-nav > a,
.nav-parent > button{
    padding:14px 11px;
    color:#c9c5bd;
    font-size:.8rem;
    font-weight:760;
}

.main-nav > a:hover,
.nav-parent > button:hover{
    color:#fff;
}

.nav-dropdown{
    top:calc(100% + 9px);
    min-width:245px;
    padding:9px;
    border-radius:18px;
    background:rgba(11,11,11,.98);
}

.nav-dropdown a{
    display:grid;
    gap:2px;
    padding:13px 14px;
}

.nav-dropdown a span{
    font-weight:800;
}

.nav-dropdown a small{
    color:#716f6a;
    font-size:.69rem;
}

.nav-dropdown a:hover small{
    color:#a7a39b;
}

.main-nav .nav-cta{
    padding:12px 18px;
    margin-left:9px;
    color:#090909;
    background:
        linear-gradient(
            135deg,
            #f56608,
            #f89a39
        );
}

/* GENERAL */

.eyebrow{
    font-size:.69rem;
    letter-spacing:.22em;
}

.eyebrow::before{
    width:31px;
}

.section-heading{
    display:grid;
    grid-template-columns:1.45fr .55fr;
    gap:60px;
    align-items:end;
    margin-bottom:58px;
}

.section-heading h2{
    margin:0;
}

.section-heading > p{
    margin:0 0 8px;
    max-width:450px;
    color:#97938c;
}

.text-link{
    display:inline-flex;
    align-items:center;
    gap:16px;
    color:#ded9d0;
    font-size:.88rem;
    font-weight:800;
}

.text-link span{
    color:var(--orange);
    transition:transform .25s var(--ease);
}

.text-link:hover span{
    transform:translateX(5px);
}

/* HOME HERO */

.hero-home{
    position:relative;
    min-height:calc(100svh - 88px);
    isolation:isolate;
    display:flex;
    align-items:center;
}

.hero-home::after{
    content:"HSU";
    right:-3vw;
    bottom:-9vw;
    z-index:-1;
    font-size:min(35vw,560px);
    opacity:.65;
}

.hero-media{
    position:absolute;
    z-index:-4;
    inset:0;
    background:
        url('/assets/img/hero.webp'),
        url('/assets/img/visuals/darts-action.svg');
    background-size:cover;
    background-position:center;
}

.hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,
            rgba(3,3,3,.98) 0%,
            rgba(3,3,3,.88) 40%,
            rgba(3,3,3,.48) 70%,
            rgba(3,3,3,.18) 100%
        ),
        linear-gradient(to top,
            rgba(4,4,4,.96),
            transparent 38%
        );
}

.hero-noise{
    position:absolute;
    z-index:-3;
    inset:0;
    opacity:.18;
    background-image:
        radial-gradient(
            rgba(255,255,255,.2) .6px,
            transparent .6px
        );
    background-size:5px 5px;
    mask-image:
        linear-gradient(to right,#000,transparent 80%);
}

.hero-content{
    width:100%;
    padding:110px 0 55px;
}

.hero-copy{
    max-width:970px;
}

.hero-title{
    margin-bottom:32px;
    font-size:clamp(4.7rem,8vw,8.8rem);
}

.hero-subline{
    max-width:680px;
    color:#c9c5bd;
}

.button-arrow{
    margin-left:18px;
    transition:transform .25s var(--ease);
}

.button:hover .button-arrow{
    transform:translateX(5px);
}

.button-ghost{
    border-color:rgba(255,255,255,.15);
    background:rgba(10,10,10,.45);
    backdrop-filter:blur(15px);
}

.button-ghost:hover{
    border-color:rgba(243,106,10,.45);
}

.hero-bottom{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    max-width:820px;
    margin-top:70px;
    border-top:1px solid rgba(255,255,255,.12);
}

.hero-bottom .hero-stat{
    min-width:0;
    padding:22px 24px 18px 0;
    border:0;
    border-radius:0;
    background:none;
    backdrop-filter:none;
}

.hero-bottom .hero-stat > span{
    display:block;
    margin-bottom:10px;
    color:var(--orange);
    font-size:.65rem;
    font-weight:800;
}

.hero-bottom .hero-stat strong{
    color:#f7f2e9;
    font-size:1.38rem;
}

.hero-bottom .hero-stat small{
    display:block;
    color:#7f7b75;
    font-size:.72rem;
}

.scroll-hint{
    position:absolute;
    right:38px;
    bottom:34px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#77736d;
    font-size:.66rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    transform:rotate(90deg);
    transform-origin:right bottom;
}

.scroll-hint span{
    width:44px;
    height:1px;
    background:var(--orange);
}

/* STATEMENT */

.statement-section{
    padding:135px 0;
    border-bottom:1px solid var(--border);
}

.statement-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:90px;
    align-items:end;
}

.statement-grid h2{
    margin:0;
}

.statement-copy{
    padding-bottom:9px;
}

.statement-copy p{
    color:#aaa69e;
    font-size:1.1rem;
    line-height:1.8;
}

/* PHOTO BREAK */

.photo-break{
    position:relative;
    min-height:720px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
}

.photo-community{
    background:
        url('/assets/img/community.webp'),
        url('/assets/img/visuals/darts-action.svg');
    background-size:cover;
    background-position:center;
}

.photo-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(to top,
            rgba(4,4,4,.97),
            rgba(4,4,4,.22) 65%,
            rgba(4,4,4,.13)
        ),
        linear-gradient(90deg,
            rgba(4,4,4,.55),
            transparent 55%
        );
}

.photo-break-copy{
    position:relative;
    z-index:2;
    padding-bottom:90px;
}

.photo-break-copy h2{
    max-width:790px;
    margin-bottom:18px;
}

.photo-break-copy p{
    color:#9d9992;
}

/* TEAM SHOWCASE */

.teams-home{
    padding-top:130px;
}

.team-showcase{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:25px;
}

.team-feature{
    position:relative;
    min-height:610px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:30px;
    background:#0a0a0a;
}

.team-feature-bg{
    position:absolute;
    inset:0;
    transition:transform .8s var(--ease);
    background-size:cover;
    background-position:center;
}

.team-one{
    background-image:
        url('/assets/img/team-hsu.webp'),
        url('/assets/img/visuals/darts-action.svg');
}

.team-two{
    background-image:
        url('/assets/img/team-amateure.webp'),
        url('/assets/img/visuals/darts-action.svg');
}

.team-feature-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(to top,
            rgba(3,3,3,.99) 0%,
            rgba(3,3,3,.55) 48%,
            rgba(3,3,3,.12) 76%
        );
}

.team-feature:hover .team-feature-bg{
    transform:scale(1.045);
}

.team-feature-top,
.team-feature-bottom{
    position:absolute;
    z-index:2;
    left:34px;
    right:34px;
}

.team-feature-top{
    top:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#c3bfb7;
    font-size:.73rem;
}

.tag{
    display:inline-flex;
    padding:7px 11px;
    border:1px solid rgba(243,106,10,.35);
    border-radius:999px;
    color:var(--orange);
    background:rgba(5,5,5,.65);
    backdrop-filter:blur(10px);
    font-weight:850;
}

.team-feature-bottom{
    bottom:31px;
}

.team-index{
    display:block;
    margin-bottom:8px;
    color:var(--orange);
    font-size:.7rem;
    font-weight:900;
}

.team-feature h3{
    margin:0 0 8px;
    font-size:clamp(2.8rem,4.5vw,5rem);
    line-height:.95;
}

.team-feature p{
    margin:0;
    color:#aaa69f;
}

.team-arrow{
    position:absolute;
    right:0;
    bottom:4px;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    color:var(--orange);
    transition:
        transform .25s var(--ease),
        background .25s var(--ease);
}

.team-feature:hover .team-arrow{
    transform:translateX(4px);
    background:rgba(243,106,10,.1);
}

/* MATCH PREVIEW */

.match-preview{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.012),
            transparent
        );
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--border);
}

.feature-card{
    min-height:260px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:24px;
    padding:38px 32px;
    border-right:1px solid var(--border);
    transition:background .3s var(--ease);
}

.feature-card:first-child{
    border-left:1px solid var(--border);
}

.feature-card:hover{
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(243,106,10,.08),
            transparent 50%
        );
}

.feature-number{
    color:var(--orange);
    font-size:.7rem;
    font-weight:900;
}

.feature-card h3{
    margin-bottom:10px;
    font-size:1.75rem;
}

.feature-card p{
    max-width:280px;
    color:#96928b;
}

.feature-icon{
    color:#6f6b65;
    font-size:1.5rem;
    transition:
        color .25s,
        transform .25s;
}

.feature-card:hover .feature-icon{
    color:var(--orange);
    transform:translateX(5px);
}

/* VENUE */

.venue-home{
    position:relative;
    min-height:700px;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.venue-home-media{
    position:absolute;
    inset:0;
    background:
        url('/assets/img/venue.webp'),
        url('/assets/img/visuals/venue.svg');
    background-size:cover;
    background-position:center;
}

.venue-home-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,
            rgba(3,3,3,.96),
            rgba(3,3,3,.64) 56%,
            rgba(3,3,3,.26)
        );
}

.venue-home-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr .65fr;
    gap:90px;
    align-items:center;
}

.venue-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    border-radius:25px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
}

.venue-panel > div{
    min-height:145px;
    padding:27px;
    background:rgba(8,8,8,.8);
}

.venue-panel span{
    display:block;
    color:#f4efe6;
    font-size:2rem;
    font-weight:900;
}

.venue-panel small{
    color:#8e8a83;
}

.venue-panel .button{
    grid-column:1 / -1;
    margin:18px;
}

/* PARTNERS */

.partner-premium-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.partner-premium{
    min-height:310px;
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid var(--border);
    border-radius:28px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            transparent 55%
        ),
        #0b0b0b;
    transition:
        transform .35s var(--ease),
        border-color .35s;
}

.partner-premium:hover{
    transform:translateY(-7px);
    border-color:rgba(243,106,10,.28);
}

.partner-premium-logo{
    min-height:180px;
    display:grid;
    place-items:center;
}

.partner-premium-logo img{
    max-width:290px;
    max-height:130px;
    object-fit:contain;
}

.partner-premium-logo > span{
    color:#e3ddd4;
    font-size:1.7rem;
    font-weight:850;
}

.partner-premium-bottom{
    position:relative;
    display:grid;
    gap:2px;
    padding-top:20px;
    border-top:1px solid var(--border);
}

.partner-premium-bottom > span:first-child{
    color:var(--orange);
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.partner-premium-bottom strong{
    font-size:1.15rem;
}

.partner-go{
    position:absolute;
    right:0;
    bottom:0;
    color:var(--orange);
    font-size:1.4rem;
}

/* SPONSOR */

.sponsor-home{
    padding-top:40px;
}

.sponsor-master{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:75px;
    align-items:end;
    padding:clamp(45px,7vw,90px);
    border:1px solid rgba(243,106,10,.26);
    border-radius:36px;
    background:
        radial-gradient(
            circle at 82% 15%,
            rgba(205,160,82,.14),
            transparent 25%
        ),
        radial-gradient(
            circle at 15% 20%,
            rgba(243,106,10,.10),
            transparent 32%
        ),
        #0b0b0b;
}

.sponsor-master h2{
    margin-bottom:24px;
}

.sponsor-master-action{
    display:grid;
    align-content:end;
}

.sponsor-price{
    display:block;
    font-size:clamp(3.2rem,5vw,5.5rem);
    font-weight:950;
    letter-spacing:-.06em;
}

.sponsor-master-action small{
    margin-bottom:25px;
    color:#89857e;
}

/* SUB HERO */

.subhero{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
}

.subhero-bg{
    position:absolute;
    inset:0;
    background:
        url('/assets/img/community.webp'),
        url('/assets/img/visuals/darts-action.svg');
    background-size:cover;
    background-position:center;
}

.subhero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(to top,
            rgba(4,4,4,.99),
            rgba(4,4,4,.58) 55%,
            rgba(4,4,4,.26)
        ),
        linear-gradient(90deg,
            rgba(4,4,4,.76),
            transparent 72%
        );
}

.subhero-inner{
    position:relative;
    z-index:2;
    padding-bottom:80px;
}

.subhero h1{
    max-width:1050px;
}

/* BOARD */

.board-section{
    padding-top:105px;
}

.board-premium-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.board-premium-card{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    min-height:430px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:28px;
    background:#0b0b0b;
    transition:
        transform .35s var(--ease),
        border-color .35s;
}

.board-premium-card:hover{
    transform:translateY(-6px);
    border-color:rgba(243,106,10,.25);
}

.board-premium-photo{
    position:relative;
    min-height:430px;
    overflow:hidden;
}

.board-premium-photo::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(to right,
            transparent 60%,
            rgba(11,11,11,.35)
        );
}

.board-premium-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.board-number{
    position:absolute;
    z-index:2;
    left:20px;
    bottom:18px;
    color:var(--orange);
    font-size:.75rem;
    font-weight:900;
}

.board-premium-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:42px;
}

.board-premium-info h3{
    margin-bottom:22px;
    font-size:2rem;
}

.board-premium-info > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding-top:18px;
    border-top:1px solid var(--border);
    color:#8f8b84;
    font-size:.78rem;
    word-break:break-word;
}

.board-premium-info > a span{
    color:var(--orange);
}

.contact-dark{
    border-top:1px solid var(--border);
    background:#030303;
}

.contact-editorial{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
}

.contact-editorial-links{
    display:grid;
}

.contact-editorial-links a{
    position:relative;
    display:grid;
    gap:5px;
    padding:25px 45px 25px 0;
    border-bottom:1px solid var(--border);
}

.contact-editorial-links a:first-child{
    border-top:1px solid var(--border);
}

.contact-editorial-links span{
    color:var(--orange);
    font-size:.67rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.contact-editorial-links strong{
    font-size:1rem;
    word-break:break-word;
}

.contact-editorial-links b{
    position:absolute;
    right:4px;
    top:50%;
    color:#77736d;
    transform:translateY(-50%);
}

/* ANIMATIONS */

.reveal{
    opacity:0;
    transform:translateY(34px);
    transition:
        opacity .8s var(--ease),
        transform .8s var(--ease);
}

.reveal.revealed{
    opacity:1;
    transform:none;
}

.team-feature.reveal:nth-child(2),
.partner-premium.reveal:nth-child(2),
.board-premium-card.reveal:nth-child(even){
    transition-delay:.08s;
}

.feature-card.reveal:nth-child(2){
    transition-delay:.07s;
}

.feature-card.reveal:nth-child(3){
    transition-delay:.14s;
}

/* MOBILE */

@media(max-width:1050px){

    .team-showcase,
    .sponsor-master,
    .board-premium-grid{
        grid-template-columns:1fr 1fr;
    }

    .board-premium-card{
        grid-template-columns:1fr;
    }

    .board-premium-photo{
        min-height:380px;
    }

}

@media(max-width:920px){

    .header-inner{
        min-height:76px;
    }

    .brand-mark{
        width:54px;
        height:54px;
    }

    .brand-logo{
        max-width:54px;
        max-height:54px;
    }

    .menu-button{
        border-radius:50%;
        background:#0d0d0d;
    }

    .menu-button span{
        transition:
            transform .25s,
            opacity .25s;
    }

    .menu-button.active span:nth-child(1){
        transform:
            translateY(7px)
            rotate(45deg);
    }

    .menu-button.active span:nth-child(2){
        opacity:0;
    }

    .menu-button.active span:nth-child(3){
        transform:
            translateY(-7px)
            rotate(-45deg);
    }

    .main-nav{
        top:76px;
        height:calc(100svh - 76px);
        padding:25px 22px 45px;
        gap:4px;
    }

    .main-nav > a,
    .nav-parent > button{
        min-height:52px;
        padding:14px 5px;
        font-size:1.1rem;
        border-bottom:1px solid rgba(255,255,255,.05);
    }

    .nav-dropdown{
        position:static;
        display:grid;
        gap:2px;
        margin:0 0 8px 12px;
        padding:5px 0 5px 12px;
        border:0;
        border-left:1px solid rgba(243,106,10,.26);
        border-radius:0;
        background:none;
        box-shadow:none;
    }

    .nav-dropdown a{
        padding:9px 4px;
    }

    .main-nav .nav-cta{
        margin:15px 0 0;
        text-align:center;
        border:0;
        border-radius:999px;
    }

    .hero-home{
        min-height:calc(100svh - 76px);
    }

    .hero-media{
        background:
            url('/assets/img/hero-mobile.webp'),
            url('/assets/img/visuals/darts-action.svg');
        background-size:cover;
        background-position:center;
    }

    .hero-media::after{
        background:
            linear-gradient(to bottom,
                rgba(3,3,3,.45),
                rgba(3,3,3,.93) 72%,
                rgba(3,3,3,.99)
            );
    }

    .hero-content{
        padding:90px 0 42px;
    }

    .hero-title{
        font-size:clamp(3.8rem,14vw,6.4rem);
    }

    .hero-bottom{
        max-width:none;
        grid-template-columns:repeat(2,1fr);
    }

    .scroll-hint{
        display:none;
    }

    .statement-grid,
    .venue-home-grid,
    .contact-editorial{
        grid-template-columns:1fr;
        gap:38px;
    }

    .team-showcase{
        grid-template-columns:1fr;
    }

    .team-feature{
        min-height:500px;
    }

    .feature-grid{
        grid-template-columns:1fr;
    }

    .feature-card{
        min-height:170px;
        border-left:1px solid var(--border);
        border-bottom:1px solid var(--border);
    }

    .partner-premium-grid{
        grid-template-columns:1fr;
    }

    .sponsor-master{
        grid-template-columns:1fr;
        gap:35px;
    }

    .board-premium-grid{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:620px){

    .brand-copy{
        display:grid;
    }

    .brand-copy strong{
        max-width:170px;
        font-size:.76rem;
    }

    .brand-copy span{
        font-size:.48rem;
    }

    .hero-title{
        font-size:clamp(3.2rem,15vw,4.8rem);
        letter-spacing:-.055em;
    }

    .hero-subline{
        max-width:100%;
        font-size:1rem;
    }

    .hero-bottom{
        margin-top:48px;
        gap:0;
    }

    .hero-bottom .hero-stat{
        padding:17px 10px 14px 0;
    }

    .statement-section{
        padding:80px 0;
    }

    .photo-break{
        min-height:510px;
    }

    .photo-break-copy{
        padding-bottom:48px;
    }

    .section-heading{
        grid-template-columns:1fr;
        gap:18px;
        margin-bottom:38px;
    }

    .team-feature{
        min-height:430px;
        border-radius:23px;
    }

    .team-feature-top,
    .team-feature-bottom{
        left:23px;
        right:23px;
    }

    .team-feature h3{
        font-size:2.7rem;
    }

    .feature-card{
        padding:27px 22px;
    }

    .venue-home{
        min-height:720px;
        padding:75px 0;
    }

    .venue-panel > div{
        min-height:115px;
        padding:19px;
    }

    .venue-panel span{
        font-size:1.6rem;
    }

    .partner-premium{
        min-height:270px;
        padding:23px;
    }

    .partner-premium-logo{
        min-height:150px;
    }

    .sponsor-master{
        padding:35px 24px;
        border-radius:25px;
    }

    .board-premium-grid{
        grid-template-columns:1fr;
    }

    .board-premium-card{
        grid-template-columns:1fr;
    }

    .board-premium-photo{
        min-height:440px;
    }

    .board-premium-info{
        padding:28px 24px;
    }

    .subhero{
        min-height:540px;
    }

    .subhero-inner{
        padding-bottom:50px;
    }

}

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }

    .reveal{
        opacity:1;
        transform:none;
    }

}

/* =========================================================
   HSU FINAL V5
========================================================= */

.hero-facts{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    max-width:850px;
    margin-top:70px;
    border-top:1px solid rgba(255,255,255,.12);
}

.hero-facts > div{
    padding:24px 24px 18px 0;
}

.hero-facts strong{
    display:block;
    color:#f6f1e8;
    font-size:1.5rem;
    line-height:1;
}

.hero-facts span{
    display:block;
    margin-top:7px;
    color:#807c75;
    font-size:.73rem;
}

.final-features .feature-card{
    grid-template-columns:1fr auto;
}

.club-facts{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:28px;
    background:var(--border);
}

.club-facts > div{
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:30px;
    background:#0b0b0b;
}

.club-facts strong{
    font-size:2.2rem;
    letter-spacing:-.04em;
}

.club-facts span{
    margin-top:6px;
    color:#88847d;
}

.name-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.name-card{
    min-height:250px;
    padding:35px;
    border:1px solid var(--border);
    border-radius:25px;
    background:
        radial-gradient(circle at 90% 10%,rgba(243,106,10,.08),transparent 35%),
        #0b0b0b;
}

.name-card strong{
    display:block;
    margin-bottom:25px;
    color:var(--orange);
    font-size:2.2rem;
}

.name-card p{
    color:#949089;
}

.team-hero-final{
    position:relative;
    min-height:690px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
}

.team-hero-final-image{
    position:absolute;
    inset:0;
    background-size:cover !important;
    background-position:center !important;
}

.team-hero-final-content{
    position:relative;
    z-index:2;
    padding-bottom:75px;
}

.team-hero-final h1{
    margin-bottom:20px;
}

.match-team-heading{
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:end;
    margin-bottom:40px;
}

.match-team-heading h2{
    margin:0;
}

.match-data-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.match-data-grid .data-block{
    min-height:320px;
}

.venue-hero-final{
    position:relative;
    min-height:690px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
}

.venue-hero-final-content{
    position:relative;
    z-index:2;
    padding-bottom:75px;
}

.venue-detail-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:start;
}

.venue-story p{
    max-width:650px;
    color:#a5a199;
    font-size:1.08rem;
    line-height:1.8;
}

.venue-specs{
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:28px;
    background:var(--border);
    gap:1px;
}

.venue-specs > div{
    min-height:170px;
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#0b0b0b;
}

.venue-specs strong{
    color:#f4efe6;
    font-size:2rem;
}

.venue-specs span{
    margin-top:5px;
    color:#88847c;
}

.sponsor-packages{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.sponsor-package{
    padding:35px;
    border:1px solid var(--border);
    border-radius:28px;
    background:#0b0b0b;
}

.sponsor-package-main{
    border-color:rgba(243,106,10,.35);
    background:
        radial-gradient(circle at 90% 0,rgba(243,106,10,.13),transparent 35%),
        #0b0b0b;
}

.package-price{
    display:block;
    margin-top:22px;
    font-size:3.2rem;
    letter-spacing:-.05em;
}

.package-period{
    display:block;
    margin-bottom:25px;
    color:#858179;
    font-size:.75rem;
}

.contact-final-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.contact-final-card{
    position:relative;
    min-height:200px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px 60px 34px 34px;
    border:1px solid var(--border);
    border-radius:25px;
    background:#0b0b0b;
    transition:
        transform .3s var(--ease),
        border-color .3s;
}

.contact-final-card:hover{
    transform:translateY(-5px);
    border-color:rgba(243,106,10,.3);
}

.contact-final-card > span{
    margin-bottom:8px;
    color:var(--orange);
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.contact-final-card strong{
    font-size:1.1rem;
    word-break:break-word;
}

.contact-final-card b{
    position:absolute;
    right:30px;
    color:var(--orange);
    font-size:1.4rem;
}

.footer-logo{
    width:110px;
    height:110px;
    object-fit:contain;
    margin-bottom:18px;
}

.footer-bottom a{
    color:#777;
}

.footer-bottom a:hover{
    color:#fff;
}

@media(max-width:920px){

    .hero-facts,
    .club-facts{
        grid-template-columns:repeat(2,1fr);
    }

    .match-data-grid,
    .venue-detail-grid,
    .sponsor-packages{
        grid-template-columns:1fr;
    }

    .name-grid{
        grid-template-columns:1fr;
    }

    .team-hero-final,
    .venue-hero-final{
        min-height:590px;
    }

}

@media(max-width:620px){

    .hero-facts{
        margin-top:45px;
    }

    .hero-facts > div{
        padding:18px 10px 16px 0;
    }

    .hero-facts strong{
        font-size:1.25rem;
    }

    .club-facts{
        grid-template-columns:1fr 1fr;
    }

    .club-facts > div{
        min-height:130px;
        padding:20px;
    }

    .club-facts strong{
        font-size:1.55rem;
    }

    .team-hero-final,
    .venue-hero-final{
        min-height:520px;
    }

    .team-hero-final-content,
    .venue-hero-final-content{
        padding-bottom:45px;
    }

    .contact-final-grid{
        grid-template-columns:1fr;
    }

    .contact-final-card{
        min-height:150px;
        padding:25px 50px 25px 24px;
    }

    .venue-specs > div{
        min-height:120px;
        padding:18px;
    }

    .sponsor-package{
        padding:27px 24px;
    }

}

/* =========================================================
   HSU V5.1 · DESKTOP DROPDOWN FIX
========================================================= */

@media (min-width:921px){

    .nav-parent{
        position:relative;
        padding-bottom:0;
    }

    /* Kein Zwischenraum mehr zwischen Menüpunkt und Dropdown */
    .nav-dropdown{
        top:100%;
        margin-top:0;
        transform:translateY(0);
    }

    /* Unsichtbare Hover-Brücke als zusätzliche Sicherheit */
    .nav-parent::before{
        content:"";
        position:absolute;
        left:-5px;
        right:-5px;
        top:70%;
        height:45px;
        z-index:1;
        pointer-events:auto;
    }

    .nav-parent > button{
        position:relative;
        z-index:3;
    }

    .nav-dropdown{
        z-index:20;
    }

    /* Dropdown bleibt bei Maus UND Tastatur offen */
    .nav-parent:hover .nav-dropdown,
    .nav-parent:focus-within .nav-dropdown{
        display:block;
    }

    /* Kleine Einblendanimation */
    .nav-dropdown{
        opacity:0;
        visibility:hidden;
        display:block;
        pointer-events:none;
        transform:translateY(8px);

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease;
    }

    .nav-parent:hover .nav-dropdown,
    .nav-parent:focus-within .nav-dropdown{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }

}

/* =========================================================
   HSU V5.1 · DESKTOP DROPDOWN FIX
========================================================= */

@media (min-width:921px){

    .nav-parent{
        position:relative;
        padding-bottom:0;
    }

    /* Kein Zwischenraum mehr zwischen Menüpunkt und Dropdown */
    .nav-dropdown{
        top:100%;
        margin-top:0;
        transform:translateY(0);
    }

    /* Unsichtbare Hover-Brücke als zusätzliche Sicherheit */
    .nav-parent::before{
        content:"";
        position:absolute;
        left:-5px;
        right:-5px;
        top:70%;
        height:45px;
        z-index:1;
        pointer-events:auto;
    }

    .nav-parent > button{
        position:relative;
        z-index:3;
    }

    .nav-dropdown{
        z-index:20;
    }

    /* Dropdown bleibt bei Maus UND Tastatur offen */
    .nav-parent:hover .nav-dropdown,
    .nav-parent:focus-within .nav-dropdown{
        display:block;
    }

    /* Kleine Einblendanimation */
    .nav-dropdown{
        opacity:0;
        visibility:hidden;
        display:block;
        pointer-events:none;
        transform:translateY(8px);

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease;
    }

    .nav-parent:hover .nav-dropdown,
    .nav-parent:focus-within .nav-dropdown{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }

}


/* =========================================================
   HSU · MOBILE RESPONSIVE MASTER
   Smartphones + Tablets
========================================================= */


/* ---------- GENERELLE SICHERHEIT ---------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

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

img {
    height: auto;
}

* {
    min-width: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
strong {
    overflow-wrap: break-word;
}


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 920px) {

    /* ---------- LAYOUT ---------- */

    .container,
    .shell,
    .section-inner,
    .hero-inner {
        width: 100%;
        max-width: 100%;
        padding-left: 22px;
        padding-right: 22px;
    }


    section {
        overflow: visible;
    }


    /* ---------- TEXTE NIE ABSCHNEIDEN ---------- */

    .hero,
    .hero-copy,
    .hero-content,
    .section-copy,
    .card,
    .team-card,
    .partner-card,
    .player-card,
    .board-card,
    .feature-card {
        height: auto;
        min-height: 0;
        overflow: visible;
    }


    p {
        max-width: 100%;
        white-space: normal;
    }


    /* ---------- HEADLINES ---------- */

    h1,
    .hero h1 {
        font-size: clamp(2.55rem, 10vw, 4.4rem);
        line-height: .94;
        letter-spacing: -.055em;
        max-width: 100%;
    }


    h2 {
        font-size: clamp(2rem, 8vw, 3.2rem);
        line-height: 1;
        letter-spacing: -.045em;
    }


    h3 {
        line-height: 1.08;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: auto;
        height: auto;
        padding-top: 60px;
        padding-bottom: 50px;
    }


    .hero-grid,
    .hero-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
    }


    .hero-copy {
        width: 100%;
        max-width: 100%;
    }


    .hero-copy p,
    .hero-lead {
        font-size: 1.05rem;
        line-height: 1.65;
        max-width: 100%;
    }


    /* ---------- BUTTONS ---------- */

    .hero-actions,
    .button-row,
    .cta-actions,
    .section-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }


    .btn,
    .button,
    .cta-button {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }


    /* ---------- GRIDS ---------- */

    .team-grid,
    .teams-grid,
    .partner-grid,
    .partners-grid,
    .player-grid,
    .players-grid,
    .board-grid,
    .feature-grid,
    .match-grid,
    .stats-grid,
    .contact-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }


    /* ---------- BILDER ---------- */

    .media,
    .image-wrap,
    .visual,
    .photo,
    .hero-media,
    .section-media {
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }


    .media img,
    .image-wrap img,
    .visual img,
    .photo img,
    .hero-media img,
    .section-media img {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: cover;
        object-position: center;
    }


    /* ---------- SPIELERFOTOS ---------- */

    .player-card img,
    .player-photo img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: center top;
    }


    /* ---------- VORSTAND ---------- */

    .board-card img,
    .official-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: center top;
    }


    /* ---------- PARTNER ---------- */

    .partner-card {
        width: 100%;
    }


    .partner-card img,
    .partner-logo img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }


    /* ---------- STATISTIKEN ---------- */

    .stats,
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        width: 100%;
    }


    /* ---------- MATCHCENTER ---------- */

    .match-card,
    .matchcenter-card {
        width: 100%;
        height: auto;
        min-height: 0;
    }


    /* ---------- FOOTER ---------- */

    footer,
    .site-footer {
        overflow: visible;
    }


    .footer-grid {
        gap: 34px;
    }


    .site-footer a {
        white-space: normal;
    }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 600px) {

    body {
        font-size: 16px;
    }


    .container,
    .shell,
    .section-inner,
    .hero-inner {
        padding-left: 18px;
        padding-right: 18px;
    }


    section {
        padding-top: 64px;
        padding-bottom: 64px;
    }


    /* ---------- HERO ---------- */

    .hero {
        padding-top: 42px;
        padding-bottom: 44px;
    }


    h1,
    .hero h1 {
        font-size: clamp(2.45rem, 12.5vw, 3.7rem);
        line-height: .94;
    }


    h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }


    /* ---------- BUTTONS ---------- */

    .hero-actions,
    .button-row,
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }


    .hero-actions a,
    .button-row a,
    .cta-actions a,
    .btn {
        width: 100%;
        justify-content: center;
    }


    /* ---------- STATS ---------- */

    .stats,
    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* ---------- CARDS ---------- */

    .team-card,
    .partner-card,
    .player-card,
    .board-card,
    .feature-card,
    .match-card {
        width: 100%;
        max-width: 100%;
        height: auto;
    }


    /* ---------- LANGE EMAILADRESSEN ---------- */

    a[href^="mailto:"] {
        overflow-wrap: anywhere;
        word-break: break-word;
    }


    /* ---------- LOGO ---------- */

    .site-logo img,
    .brand img,
    .header-logo img {
        max-width: 58px;
        height: auto;
    }

}


/* =========================================================
   KLEINE IPHONES
========================================================= */

@media (max-width: 390px) {

    .container,
    .shell,
    .section-inner,
    .hero-inner {
        padding-left: 15px;
        padding-right: 15px;
    }


    h1,
    .hero h1 {
        font-size: clamp(2.25rem, 12vw, 3rem);
    }


    .stats,
    .hero-stats {
        grid-template-columns: 1fr 1fr;
    }


    .btn,
    .button,
    .cta-button {
        padding-left: 16px;
        padding-right: 16px;
    }

}


/* =========================================================
   HSU V6.2 · IOS SAFE AREA HEADER FIX
========================================================= */

@media (max-width: 920px) {

    /*
     * Der komplette Header beginnt unterhalb
     * von iPhone Notch / Dynamic Island / Statusleiste.
     */
    .site-header {
        top: 0;
        z-index: 99999;

        padding-top:
            env(safe-area-inset-top, 0px);

        background:
            rgba(4,4,4,.97);
    }

    /*
     * 76px ist nur die eigentliche HSU-Navigationsleiste.
     * Die iOS Safe Area kommt darüber.
     */
    .header-inner {
        min-height: 76px;
        height: 76px;

        padding-top: 0;
        padding-bottom: 0;

        display: flex;
        align-items: center;
    }

    /*
     * Hamburger niemals bis an den rechten Bildschirmrand.
     */
    .menu-button {
        position: relative;
        z-index: 100001;

        flex: 0 0 46px;

        width: 46px;
        height: 46px;

        margin-left: auto;
        margin-right:
            env(safe-area-inset-right, 0px);
    }

    /*
     * Logo ebenfalls innerhalb des sicheren Bereichs.
     */
    .brand {
        position: relative;
        z-index: 100001;

        flex: 1 1 auto;

        margin-left:
            env(safe-area-inset-left, 0px);
    }

    /*
     * Das ausgeklappte Menü muss unterhalb
     * von Safe Area + 76px Header beginnen.
     */
    .main-nav {
        position: fixed;

        top:
            calc(
                76px +
                env(safe-area-inset-top, 0px)
            );

        left: 0;
        right: 0;

        height:
            calc(
                100dvh -
                76px -
                env(safe-area-inset-top, 0px)
            );

        padding-left:
            calc(
                22px +
                env(safe-area-inset-left, 0px)
            );

        padding-right:
            calc(
                22px +
                env(safe-area-inset-right, 0px)
            );

        padding-bottom:
            calc(
                35px +
                env(safe-area-inset-bottom, 0px)
            );

        overflow-y: auto;
        overscroll-behavior: contain;
    }

}


/* Sehr kleine iPhones */

@media (max-width: 600px) {

    .header-inner {
        min-height: 72px;
        height: 72px;
    }

    .main-nav {
        top:
            calc(
                72px +
                env(safe-area-inset-top, 0px)
            );

        height:
            calc(
                100dvh -
                72px -
                env(safe-area-inset-top, 0px)
            );
    }

}


/* =========================================================
   HSU PREMIUM V7
   Homepage Editorial / Sports Club Design
========================================================= */

.v7-hero{
    position:relative;
}

.v7-hero-vignette{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 70% 45%,
            transparent 0,
            rgba(0,0,0,.08) 35%,
            rgba(0,0,0,.58) 100%
        );
}

.v7-scroll-hint{
    position:absolute;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    font-size:9px;
    letter-spacing:.22em;
    font-weight:800;
    opacity:.58;
}

.v7-scroll-hint i{
    width:1px;
    height:34px;
    background:linear-gradient(
        to bottom,
        var(--orange),
        transparent
    );
}


/* MATCHDAY */

.v7-matchday{
    background:#080808;
}

.v7-match-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.v7-match-card{
    position:relative;
    padding:28px;
    min-height:390px;
    border:1px solid rgba(255,255,255,.1);
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(255,104,0,.12),
            transparent 30%
        ),
        #0d0d0d;
    display:flex;
    flex-direction:column;
    transition:
        transform .35s ease,
        border-color .35s ease;
}

.v7-match-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,112,0,.55);
}

.v7-match-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#aaa;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.14em;
}

.v7-match-team{
    display:flex;
    align-items:center;
    gap:17px;
    margin-top:38px;
}

.v7-match-team img{
    width:64px;
    height:64px;
    object-fit:contain;
}

.v7-match-team small{
    color:#777;
    font-size:9px;
    letter-spacing:.16em;
}

.v7-match-team h3{
    margin:3px 0 0;
    font-size:27px;
}

.v7-match-placeholder{
    margin-top:32px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;
    flex-direction:column;
}

.v7-match-placeholder span{
    color:var(--orange);
    font-size:9px;
    letter-spacing:.17em;
    font-weight:800;
}

.v7-match-placeholder strong{
    margin-top:7px;
    font-size:22px;
}

.v7-match-placeholder small{
    margin-top:5px;
    color:#777;
}

.v7-match-card > a{
    margin-top:auto;
    padding-top:24px;
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}


/* COMMUNITY */

.v7-community{
    background:#0a0a0a;
}

.v7-editorial{
    display:grid;
    grid-template-columns:1.65fr .75fr;
    gap:14px;
}

.v7-editorial-side{
    display:grid;
    gap:14px;
}

.v7-photo{
    position:relative;
    overflow:hidden;
    background:#111;
    border:1px solid rgba(255,255,255,.08);
}

.v7-photo-main{
    min-height:600px;
}

.v7-photo-small{
    min-height:293px;
}

.v7-photo-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,.8)
        ),
        radial-gradient(
            circle at 70% 20%,
            rgba(255,105,0,.14),
            transparent 35%
        ),
        #151515;
}

.v7-photo-placeholder::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.12;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 25px,
            rgba(255,255,255,.08) 26px
        );
}

.v7-photo-placeholder span,
.v7-photo-placeholder strong,
.v7-photo-placeholder small{
    position:relative;
    z-index:1;
}

.v7-photo-placeholder span{
    color:var(--orange);
    font-size:9px;
    letter-spacing:.2em;
    font-weight:900;
}

.v7-photo-placeholder strong{
    margin-top:5px;
    font-size:clamp(27px,4vw,60px);
    line-height:.9;
}

.v7-photo-placeholder small{
    margin-top:12px;
    color:#8c8c8c;
}


/* TEAMS */

.v7-team-watermark{
    position:absolute;
    right:-8px;
    bottom:45px;
    z-index:1;
    font-size:130px;
    line-height:.7;
    font-weight:950;
    letter-spacing:-.08em;
    color:rgba(255,255,255,.045);
    pointer-events:none;
}

.team-feature-bottom small{
    color:var(--orange);
    font-size:9px;
    letter-spacing:.16em;
    font-weight:800;
}


/* MATCHCENTER */

.v7-matchcenter{
    background:#070707;
}

.v7-matchcenter-grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:14px;
}

.v7-mc-main{
    min-height:500px;
    padding:38px;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255,105,0,.18),
            transparent 35%
        ),
        #111;
    border:1px solid rgba(255,255,255,.1);
    color:white;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
}

.v7-mc-main::after{
    content:"HSU";
    position:absolute;
    right:-18px;
    bottom:-28px;
    font-size:220px;
    font-weight:950;
    letter-spacing:-.1em;
    color:rgba(255,255,255,.025);
}

.v7-mc-label{
    color:var(--orange);
    font-size:10px;
    font-weight:900;
    letter-spacing:.2em;
}

.v7-mc-main > div{
    margin-top:auto;
    position:relative;
    z-index:2;
}

.v7-mc-main strong{
    font-size:10px;
    color:#777;
    letter-spacing:.16em;
}

.v7-mc-main h3{
    margin:8px 0 14px;
    font-size:clamp(42px,5vw,72px);
    line-height:.88;
    letter-spacing:-.055em;
}

.v7-mc-main p{
    max-width:370px;
    color:#aaa;
}

.v7-big-arrow{
    position:absolute;
    right:35px;
    top:35px;
    font-size:34px;
    color:var(--orange);
}

.v7-mc-side{
    display:grid;
    gap:14px;
}

.v7-mc-card{
    padding:28px;
    border:1px solid rgba(255,255,255,.1);
    background:#101010;
    color:white;
    text-decoration:none;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:20px;
    align-items:start;
    transition:.3s ease;
}

.v7-mc-card:hover{
    background:#151515;
    border-color:rgba(255,105,0,.45);
}

.v7-mc-card small{
    color:var(--orange);
    font-weight:900;
}

.v7-mc-card h3{
    margin:0;
    font-size:25px;
}

.v7-mc-card p{
    margin:10px 0 0;
    color:#888;
    line-height:1.5;
}


/* VENUE */

.v7-address{
    margin-top:30px;
    color:#aaa;
    line-height:1.6;
}


/* SPONSOR */

.v7-sponsor{
    background:#050505;
}

.v7-sponsor-box{
    min-height:480px;
    padding:clamp(35px,6vw,80px);
    border:1px solid rgba(255,255,255,.1);
    background:
        linear-gradient(
            110deg,
            rgba(0,0,0,.95),
            rgba(0,0,0,.72)
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(255,105,0,.25),
            transparent 30%
        ),
        #101010;
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:60px;
    align-items:end;
    position:relative;
    overflow:hidden;
}

.v7-sponsor-box::after{
    content:"HSU";
    position:absolute;
    right:-30px;
    top:-35px;
    font-size:250px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.1em;
    color:rgba(255,255,255,.025);
}

.v7-sponsor-box h2{
    max-width:760px;
    font-size:clamp(42px,5.5vw,78px);
    line-height:.93;
}

.v7-sponsor-box p{
    max-width:590px;
    margin-top:25px;
    color:#aaa;
    font-size:17px;
    line-height:1.7;
    white-space:pre-line;
}

.v7-sponsor-action{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
}

.v7-sponsor-action > span{
    font-size:10px;
    letter-spacing:.2em;
    font-weight:900;
    color:var(--orange);
}


/* SOCIAL */

.v7-social{
    background:#0b0b0b;
}

.v7-social-head{
    max-width:780px;
    margin-bottom:50px;
}

.v7-social-head h2{
    margin-top:12px;
}

.v7-social-head p{
    margin-top:20px;
    color:#888;
}

.v7-social-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.v7-social-card{
    min-height:300px;
    padding:34px;
    border:1px solid rgba(255,255,255,.1);
    background:#111;
    color:#fff;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.v7-social-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,105,0,.5);
    background:#151515;
}

.v7-social-type{
    color:var(--orange);
    font-size:9px;
    letter-spacing:.2em;
    font-weight:900;
}

.v7-social-card strong{
    margin-top:35px;
    font-size:clamp(24px,3vw,38px);
    letter-spacing:-.035em;
}

.v7-social-card p{
    margin-top:12px;
    color:#888;
    line-height:1.55;
}

.v7-social-card b{
    margin-top:auto;
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
}


/* =========================================================
   V7 MOBILE
========================================================= */

@media(max-width:920px){

    .v7-match-grid,
    .v7-editorial,
    .v7-matchcenter-grid,
    .v7-sponsor-box,
    .v7-social-grid{
        grid-template-columns:1fr;
    }

    .v7-photo-main{
        min-height:500px;
    }

    .v7-editorial-side{
        grid-template-columns:1fr 1fr;
    }

    .v7-photo-small{
        min-height:300px;
    }

    .v7-mc-main{
        min-height:430px;
    }

    .v7-sponsor-box{
        min-height:auto;
    }

}


@media(max-width:620px){

    .v7-scroll-hint{
        display:none;
    }

    .v7-match-grid{
        gap:10px;
    }

    .v7-match-card{
        min-height:350px;
        padding:22px;
    }

    .v7-match-team{
        margin-top:28px;
    }

    .v7-match-team img{
        width:52px;
        height:52px;
    }

    .v7-editorial{
        display:block;
    }

    .v7-photo-main{
        min-height:420px;
    }

    .v7-editorial-side{
        display:grid;
        grid-template-columns:1fr;
        margin-top:10px;
        gap:10px;
    }

    .v7-photo-small{
        min-height:270px;
    }

    .v7-photo-placeholder{
        padding:22px;
    }

    .v7-team-watermark{
        font-size:90px;
    }

    .v7-mc-main{
        min-height:390px;
        padding:25px;
    }

    .v7-mc-main::after{
        font-size:140px;
    }

    .v7-mc-card{
        padding:22px;
        grid-template-columns:auto 1fr auto;
        gap:14px;
    }

    .v7-sponsor-box{
        padding:32px 23px;
        gap:40px;
    }

    .v7-sponsor-box::after{
        font-size:140px;
    }

    .v7-social-card{
        min-height:260px;
        padding:25px;
    }

}


/* =========================================================
   ACCESSIBILITY / MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .v7-match-card,
    .v7-social-card,
    .v7-mc-card{
        transition:none;
    }

}

/* HSU · Vorstand echte Portraits */

.board-premium-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 25%;
}

.board-premium-photo{
    background:#0b0b0b;
}

@media(max-width:620px){

    .board-premium-photo{
        min-height:460px;
    }

    .board-premium-photo img{
        object-position:center 22%;
    }

}


/* =========================================================
   HSU V8 · ZUHAUSE / MARIAS HASENECK
========================================================= */

.venue-hero-v8{
    position:relative;
    min-height:760px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:#050505;
}

.venue-hero-v8-image{
    position:absolute;
    inset:0;

    background-image:
        url('/assets/img/haseneck-home-bg-v1.png');

    background-size:cover;
    background-position:center;
}

.venue-hero-v8-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(3,3,3,.96) 0%,
            rgba(3,3,3,.74) 44%,
            rgba(3,3,3,.30) 78%,
            rgba(3,3,3,.18) 100%
        );
}

.venue-hero-v8-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            #050505 0%,
            rgba(5,5,5,.55) 30%,
            transparent 65%
        );
}

.venue-hero-v8-content{
    position:relative;
    z-index:2;
    width:100%;
    padding-bottom:85px;
}

.venue-hero-v8 h1{
    max-width:900px;
    margin-bottom:20px;
}

.venue-address-v8{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:30px;
}

.venue-pin{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(243,106,10,.4);
    border-radius:50%;
    color:var(--orange);
    font-size:22px;
}

.venue-address-v8 div{
    display:grid;
}

.venue-address-v8 strong{
    color:#f4f0e8;
}

.venue-address-v8 span{
    margin-top:3px;
    color:#aaa59c;
    font-size:.85rem;
}


/* STORY */

.venue-story-v8{
    background:#080808;
}

.venue-story-grid-v8{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:start;
}

.venue-story-text-v8{
    max-width:650px;
    color:#a7a39b;
    font-size:1.08rem;
    line-height:1.8;
    white-space:pre-line;
}

.venue-facts-v8{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:28px;
    background:var(--border);
}

.venue-facts-v8 > div{
    min-height:155px;
    padding:27px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#0d0d0d;
}

.venue-facts-v8 strong{
    color:#f3eee5;
    font-size:1.9rem;
    letter-spacing:-.04em;
}

.venue-facts-v8 span{
    margin-top:5px;
    color:#88847d;
    font-size:.82rem;
}


/* SECOND LOCATION IMAGE */

.venue-photo-v8{
    position:relative;
    min-height:600px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:32px;

    background:
        linear-gradient(
            to top,
            rgba(3,3,3,.94),
            rgba(3,3,3,.12) 68%
        ),
        url('/assets/img/haseneck.jpg');

    background-size:cover;
    background-position:center;
}

.venue-photo-copy-v8{
    position:absolute;
    left:clamp(25px,5vw,60px);
    bottom:clamp(30px,5vw,60px);
}

.venue-photo-copy-v8 h2{
    margin-bottom:12px;
}

.venue-photo-copy-v8 p{
    color:#b8b3aa;
}


/* MATCHDAYS */

.venue-matchdays-v8{
    background:#070707;
}

.venue-days-grid-v8{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.venue-day-card-v8{
    min-height:310px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:30px;
    padding:35px;
    border:1px solid var(--border);
    border-radius:28px;
    background:#0c0c0c;
    transition:
        transform .3s ease,
        border-color .3s ease;
}

.venue-day-card-v8:hover{
    transform:translateY(-5px);
    border-color:rgba(243,106,10,.35);
}

.venue-day-v8{
    width:70px;
    height:70px;
    display:grid;
    place-items:center;

    border:1px solid rgba(243,106,10,.35);
    border-radius:50%;

    color:var(--orange);
    font-size:1.4rem;
    font-weight:950;
}

.venue-day-card-v8 h3{
    margin:20px 0 10px;
    font-size:2rem;
}

.venue-day-card-v8 p{
    color:#918d86;
}

.venue-day-card-v8 a{
    display:inline-block;
    margin-top:25px;
    color:#eee9e0;
    font-size:.8rem;
    font-weight:850;
}


/* GOOGLE MAP */

.venue-location-v8{
    background:#0b0b0b;
}

.venue-map-v8{
    position:relative;
    min-height:560px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:30px;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(243,106,10,.11),
            transparent 35%
        ),
        #101010;
}

.venue-map-placeholder-v8{
    min-height:560px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:40px;
    text-align:center;
}

.venue-map-pin-v8{
    width:75px;
    height:75px;
    display:grid;
    place-items:center;

    margin-bottom:30px;

    border:1px solid rgba(243,106,10,.42);
    border-radius:50%;

    color:var(--orange);
    font-size:34px;

    box-shadow:
        0 0 60px rgba(243,106,10,.1);
}

.venue-map-placeholder-v8 > span{
    color:var(--orange);
    font-size:.65rem;
    font-weight:900;
    letter-spacing:.2em;
}

.venue-map-placeholder-v8 h3{
    margin:7px 0 15px;
    font-size:clamp(2rem,4vw,3.5rem);
}

.venue-map-placeholder-v8 p{
    max-width:490px;
    margin-bottom:25px;
    color:#8f8b84;
}

.venue-route-link-v8{
    margin-top:18px;
    color:#98948d;
    font-size:.75rem;
}

.venue-map-frame-v8{
    width:100%;
    height:560px;
    display:block;
    border:0;
}


/* FINAL */

.venue-final-v8{
    background:#050505;
}

.venue-final-box-v8{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:45px;
    align-items:center;

    padding:45px;

    border:1px solid rgba(243,106,10,.22);
    border-radius:30px;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(243,106,10,.10),
            transparent 35%
        ),
        #0b0b0b;
}

.venue-final-box-v8 img{
    width:115px;
    height:115px;
    object-fit:contain;
}

.venue-final-box-v8 h2{
    margin:5px 0 10px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:920px){

    .venue-hero-v8{
        min-height:680px;
    }

    .venue-story-grid-v8{
        grid-template-columns:1fr;
        gap:45px;
    }

    .venue-days-grid-v8{
        grid-template-columns:1fr;
    }

    .venue-final-box-v8{
        grid-template-columns:auto 1fr;
    }

    .venue-final-box-v8 .button{
        grid-column:1 / -1;
    }

}


@media(max-width:620px){

    .venue-hero-v8{
        min-height:620px;
    }

    .venue-hero-v8-image{
        background-position:52% center;
    }

    .venue-hero-v8-image::after{
        background:
            linear-gradient(
                to top,
                rgba(3,3,3,.97),
                rgba(3,3,3,.48) 70%,
                rgba(3,3,3,.20)
            );
    }

    .venue-hero-v8-content{
        padding-bottom:45px;
    }

    .venue-address-v8{
        align-items:flex-start;
    }

    .venue-facts-v8{
        grid-template-columns:1fr 1fr;
    }

    .venue-facts-v8 > div{
        min-height:125px;
        padding:18px;
    }

    .venue-facts-v8 strong{
        font-size:1.45rem;
    }

    .venue-photo-v8{
        min-height:430px;
        border-radius:23px;
    }

    .venue-day-card-v8{
        grid-template-columns:1fr;
        min-height:auto;
        padding:25px;
    }

    .venue-map-v8,
    .venue-map-placeholder-v8{
        min-height:480px;
    }

    .venue-map-placeholder-v8{
        padding:28px 20px;
    }

    .venue-map-frame-v8{
        height:500px;
    }

    .venue-final-box-v8{
        grid-template-columns:1fr;
        padding:30px 23px;
    }

    .venue-final-box-v8 img{
        width:90px;
        height:90px;
    }

}

/* =========================================================
   HSU V8.1 · TEAM CONTACT
========================================================= */

.team-contact-strip{
    padding:28px 0 0;
    background:#070707;
}

.team-contact-inner{
    display:grid;
    grid-template-columns:1fr minmax(300px,420px);
    gap:55px;
    align-items:center;

    padding:36px 40px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:26px;

    background:
        radial-gradient(
            circle at 92% 40%,
            rgba(243,106,10,.12),
            transparent 35%
        ),
        #0d0d0d;
}

.team-contact-inner h2{
    margin:5px 0 9px;
    font-size:clamp(1.8rem,3vw,3rem);
}

.team-contact-inner p{
    margin:0;
    color:#8f8b84;
}

.team-contact-mail{
    position:relative;
    display:block;

    padding:22px 55px 22px 24px;

    border:1px solid rgba(243,106,10,.30);
    border-radius:18px;

    color:#fff;
    background:rgba(243,106,10,.045);
}

.team-contact-mail > span{
    display:block;
    margin-bottom:6px;

    color:var(--orange);
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.17em;
}

.team-contact-mail strong{
    font-size:.94rem;
}

.team-contact-mail b{
    position:absolute;
    right:22px;
    top:50%;
    transform:translateY(-50%);

    color:var(--orange);
    font-size:1.35rem;
}

.team-contact-mail:hover{
    border-color:rgba(243,106,10,.7);
}

@media(max-width:760px){

    .team-contact-inner{
        grid-template-columns:1fr;
        gap:24px;
        padding:27px 22px;
    }

    .team-contact-mail{
        width:100%;
    }

    .team-contact-mail strong{
        overflow-wrap:anywhere;
    }

}


/* =========================================================
   HSU V9 · STARTSEITEN HERO
   Ein einziges Motiv – keine doppelten Inhalte
========================================================= */

.hsu-hero-v9{
    position:relative;

    width:100%;
    min-height:clamp(610px,66vw,930px);

    overflow:hidden;

    background:#030303;
}


/* DAS NEUE HSU MOTIV */

.hsu-hero-v9-media{
    position:absolute;
    inset:0;

    background-image:
        url('/assets/img/hsu-hero-v9.png');

    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;

    transform:scale(1.002);
}


/*
   Ganz leichter Übergang zum restlichen dunklen Seitendesign.
   Das Bild selbst bleibt trotzdem klar sichtbar.
*/

.hsu-hero-v9-shade{
    position:absolute;
    inset:0;
    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.03) 0%,
            transparent 78%,
            rgba(5,5,5,.40) 100%
        );
}


/* SEO / ACCESSIBILITY OHNE SICHTBARE DOPPELUNG */

.hsu-hero-v9-accessible{
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);
    white-space:nowrap;

    border:0;
}


/* UNSICHTBARE CTA-KLICKFLÄCHEN */

.hsu-hero-v9-hotspot{
    position:absolute;
    z-index:5;

    display:block;

    border-radius:8px;

    transition:
        background .2s ease,
        box-shadow .2s ease;
}


/*
   Positionen entsprechen den beiden sichtbaren Buttons
   innerhalb des generierten Hero-Motivs.
*/

.hsu-hero-v9-hotspot-match{
    left:4.0%;
    top:75.2%;

    width:16.4%;
    height:6.5%;
}

.hsu-hero-v9-hotspot-club{
    left:21.9%;
    top:75.2%;

    width:15.5%;
    height:6.5%;
}


/* Nur dezentes Feedback – Gestaltung bleibt Teil des Bildes */

.hsu-hero-v9-hotspot:hover{
    background:rgba(255,122,0,.07);

    box-shadow:
        0 0 25px rgba(255,122,0,.12);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:980px){

    .hsu-hero-v9{
        min-height:650px;
    }

    .hsu-hero-v9-media{
        /*
           Linke Bildhälfte ist für Branding/Text wichtiger.
           Dartboard bleibt trotzdem teilweise sichtbar.
        */
        background-position:42% center;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px){

    .hsu-hero-v9{
        /*
           Auf Smartphone bewusst höher,
           damit der Einstieg nicht wie ein schmaler Banner wirkt.
        */
        min-height:610px;
    }

    .hsu-hero-v9-media{
        /*
           Fokus auf Logo + Claim.
           Der rechte Dartboard-Bereich darf mobil stärker croppen.
        */
        background-position:27% center;
    }


    /*
       Die Desktop-Buttonpositionen passen bei starkem Mobile-Crop
       nicht mehr zuverlässig. Deshalb dienen die Buttons im Motiv
       mobil rein visuell.

       Der Matchcenter-/Vereinszugang ist ohnehin direkt über
       Navigation und die nachfolgenden Bereiche erreichbar.
    */

    .hsu-hero-v9-hotspot{
        display:none;
    }

}


/* sehr kleine Smartphones */

@media(max-width:390px){

    .hsu-hero-v9{
        min-height:570px;
    }

    .hsu-hero-v9-media{
        background-position:24% center;
    }

}

/* =========================================================
   HSU MATCHCENTER HERO V1
========================================================= */

.matchcenter-hero-v1{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#050505;
}

.matchcenter-hero-v1-bg{
    position:absolute;
    inset:0;

    background-image:
        url('/assets/img/matchcenter-hero-v1.png');

    background-size:cover;
    background-position:center center;
}

.matchcenter-hero-v1-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,3,.98) 0%,
            rgba(3,3,3,.90) 30%,
            rgba(3,3,3,.58) 52%,
            rgba(3,3,3,.08) 88%
        ),
        linear-gradient(
            to top,
            #050505 0%,
            rgba(5,5,5,.28) 22%,
            transparent 55%
        );
}

.matchcenter-hero-v1-inner{
    position:relative;
    z-index:2;
    width:100%;
    padding-top:75px;
    padding-bottom:75px;
}

.matchcenter-hero-v1-copy{
    max-width:700px;
}

.matchcenter-hero-v1 h1{
    margin:8px 0 0;

    max-width:680px;

    font-size:
        clamp(3.8rem,7vw,7.3rem);

    line-height:.88;
    letter-spacing:-.055em;
}

.matchcenter-hero-v1-lead{
    margin-top:27px;

    color:#f4f0e8;

    font-size:
        clamp(1.15rem,2vw,1.5rem);

    font-weight:800;
}

.matchcenter-hero-v1-sub{
    max-width:520px;

    margin-top:13px;

    color:#9d9991;

    font-size:1rem;
    line-height:1.7;
}

.matchcenter-hero-v1-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:32px;
}

.matchcenter-hero-v1-tags a{
    min-width:245px;

    padding:17px 20px;

    border:1px solid rgba(243,106,10,.34);
    border-radius:14px;

    color:#fff;
    text-decoration:none;

    background:rgba(7,7,7,.62);

    backdrop-filter:blur(10px);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.matchcenter-hero-v1-tags a:hover{
    transform:translateY(-3px);

    border-color:rgba(243,106,10,.75);

    background:rgba(243,106,10,.08);
}

.matchcenter-hero-v1-tags span{
    display:block;

    margin-bottom:4px;

    color:var(--orange);

    font-size:.62rem;
    font-weight:900;
    letter-spacing:.14em;
}

.matchcenter-hero-v1-tags strong{
    font-size:.88rem;
}


/* TABLET */

@media(max-width:900px){

    .matchcenter-hero-v1{
        min-height:620px;
    }

    .matchcenter-hero-v1-bg{
        background-position:62% center;
    }

}


/* MOBILE */

@media(max-width:620px){

    .matchcenter-hero-v1{
        min-height:590px;
    }

    .matchcenter-hero-v1-bg{
        background-position:73% center;
    }

    .matchcenter-hero-v1-overlay{
        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.48) 0%,
                rgba(3,3,3,.84) 42%,
                rgba(3,3,3,.98) 100%
            );
    }

    .matchcenter-hero-v1-inner{
        padding-top:65px;
        padding-bottom:42px;
    }

    .matchcenter-hero-v1 h1{
        font-size:
            clamp(3rem,16vw,4.8rem);
    }

    .matchcenter-hero-v1-tags{
        display:grid;
        grid-template-columns:1fr;
    }

    .matchcenter-hero-v1-tags a{
        width:100%;
        min-width:0;
    }

}

/* =========================================================
   HSU MATCHCENTER HERO V1
========================================================= */

.matchcenter-hero-v1{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#050505;
}

.matchcenter-hero-v1-bg{
    position:absolute;
    inset:0;

    background-image:
        url('/assets/img/matchcenter-hero-v1.png');

    background-size:cover;
    background-position:center center;
}

.matchcenter-hero-v1-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,3,.98) 0%,
            rgba(3,3,3,.90) 30%,
            rgba(3,3,3,.58) 52%,
            rgba(3,3,3,.08) 88%
        ),
        linear-gradient(
            to top,
            #050505 0%,
            rgba(5,5,5,.28) 22%,
            transparent 55%
        );
}

.matchcenter-hero-v1-inner{
    position:relative;
    z-index:2;
    width:100%;
    padding-top:75px;
    padding-bottom:75px;
}

.matchcenter-hero-v1-copy{
    max-width:700px;
}

.matchcenter-hero-v1 h1{
    margin:8px 0 0;

    max-width:680px;

    font-size:
        clamp(3.8rem,7vw,7.3rem);

    line-height:.88;
    letter-spacing:-.055em;
}

.matchcenter-hero-v1-lead{
    margin-top:27px;

    color:#f4f0e8;

    font-size:
        clamp(1.15rem,2vw,1.5rem);

    font-weight:800;
}

.matchcenter-hero-v1-sub{
    max-width:520px;

    margin-top:13px;

    color:#9d9991;

    font-size:1rem;
    line-height:1.7;
}

.matchcenter-hero-v1-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:32px;
}

.matchcenter-hero-v1-tags a{
    min-width:245px;

    padding:17px 20px;

    border:1px solid rgba(243,106,10,.34);
    border-radius:14px;

    color:#fff;
    text-decoration:none;

    background:rgba(7,7,7,.62);

    backdrop-filter:blur(10px);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.matchcenter-hero-v1-tags a:hover{
    transform:translateY(-3px);

    border-color:rgba(243,106,10,.75);

    background:rgba(243,106,10,.08);
}

.matchcenter-hero-v1-tags span{
    display:block;

    margin-bottom:4px;

    color:var(--orange);

    font-size:.62rem;
    font-weight:900;
    letter-spacing:.14em;
}

.matchcenter-hero-v1-tags strong{
    font-size:.88rem;
}


/* TABLET */

@media(max-width:900px){

    .matchcenter-hero-v1{
        min-height:620px;
    }

    .matchcenter-hero-v1-bg{
        background-position:62% center;
    }

}


/* MOBILE */

@media(max-width:620px){

    .matchcenter-hero-v1{
        min-height:590px;
    }

    .matchcenter-hero-v1-bg{
        background-position:73% center;
    }

    .matchcenter-hero-v1-overlay{
        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.48) 0%,
                rgba(3,3,3,.84) 42%,
                rgba(3,3,3,.98) 100%
            );
    }

    .matchcenter-hero-v1-inner{
        padding-top:65px;
        padding-bottom:42px;
    }

    .matchcenter-hero-v1 h1{
        font-size:
            clamp(3rem,16vw,4.8rem);
    }

    .matchcenter-hero-v1-tags{
        display:grid;
        grid-template-columns:1fr;
    }

    .matchcenter-hero-v1-tags a{
        width:100%;
        min-width:0;
    }

}


/* =========================================================
   HSU V10.2 · FINAL MOBILE HERO CROPS
   Startseite + Matchcenter
========================================================= */

@media (max-width: 620px){

    /* -----------------------------------------
       STARTSEITE
       ----------------------------------------- */

    .hsu-hero-v10{
        min-height:680px;
        overflow:hidden;
    }

    .hsu-hero-v10-bg{
        /*
         * Auf Mobile nur die atmosphärische/rechte Bildhälfte.
         * Dadurch keine doppelte Schrift aus dem Hintergrund.
         */
        background-size:auto 100%;
        background-repeat:no-repeat;
        background-position:79% center;
    }

    .hsu-hero-v10-bg::after{
        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.28) 0%,
                rgba(3,3,3,.58) 30%,
                rgba(3,3,3,.90) 66%,
                rgba(3,3,3,.99) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3,3,3,.90) 0%,
                rgba(3,3,3,.52) 70%,
                rgba(3,3,3,.15) 100%
            );
    }

    .hsu-hero-v10-inner{
        padding-top:72px;
        padding-bottom:42px;
    }

    .hsu-hero-v10-copy{
        max-width:100%;
    }

    .hsu-hero-v10-logo{
        width:78px;
        height:78px;
        margin:14px 0 18px;
    }

    .hsu-hero-v10 h1{
        max-width:100%;
        font-size:clamp(2.8rem,14vw,4.25rem);
        line-height:.91;
        overflow-wrap:normal;
        word-break:normal;
    }

    .hsu-hero-v10-copy > p{
        max-width:92%;
    }

    .hsu-hero-v10 .actions{
        width:100%;
    }

    .hsu-hero-v10 .button{
        min-height:50px;
    }


    /* -----------------------------------------
       MATCHCENTER
       ----------------------------------------- */

    .matchcenter-hero-v1{
        min-height:640px;
        overflow:hidden;
    }

    .matchcenter-hero-v1-bg{
        /*
         * Eigener Crop:
         * Dartboard und HSU-Darts bleiben erkennbar,
         * dunkle Fläche links bleibt für HTML.
         */
        background-size:auto 100%;
        background-repeat:no-repeat;
        background-position:84% center;
    }

    .matchcenter-hero-v1-overlay{
        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.26) 0%,
                rgba(3,3,3,.61) 34%,
                rgba(3,3,3,.92) 71%,
                rgba(3,3,3,.99) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3,3,3,.92) 0%,
                rgba(3,3,3,.55) 70%,
                rgba(3,3,3,.08) 100%
            );
    }

    .matchcenter-hero-v1-inner{
        padding-top:76px;
        padding-bottom:42px;
    }

    .matchcenter-hero-v1-copy{
        max-width:100%;
    }

    .matchcenter-hero-v1 h1{
        max-width:100%;
        font-size:clamp(3rem,15vw,4.5rem);
        line-height:.9;
    }

    .matchcenter-hero-v1-sub{
        max-width:92%;
    }

    .matchcenter-hero-v1-tags{
        width:100%;
        margin-top:26px;
    }

    .matchcenter-hero-v1-tags a{
        width:100%;
    }

}


/* Kleine iPhones */

@media (max-width: 390px){

    .hsu-hero-v10-bg{
        background-position:81% center;
    }

    .matchcenter-hero-v1-bg{
        background-position:86% center;
    }

    .hsu-hero-v10 h1{
        font-size:2.8rem;
    }

    .matchcenter-hero-v1 h1{
        font-size:3rem;
    }

}

/* =========================================================
   HSU V10.3 · FINAL START HERO MOBILE
========================================================= */

@media (max-width:620px){

    .hsu-hero-v10{
        min-height:720px;
        display:flex;
        align-items:flex-end;
        overflow:hidden;
    }

    .hsu-hero-v10-bg{
        background-image:url('/assets/img/hsu-hero-v9.png');
        background-size:auto 100%;
        background-repeat:no-repeat;

        /*
         * Fokus bewusst auf Dartboard / Atmosphäre.
         * Die eingebrannte linke Schrift des Motivs
         * verschwindet weitgehend aus dem Mobile-Crop.
         */
        background-position:78% center;
    }

    .hsu-hero-v10-bg::after{
        content:"";
        position:absolute;
        inset:0;

        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.16) 0%,
                rgba(3,3,3,.42) 28%,
                rgba(3,3,3,.84) 62%,
                rgba(3,3,3,.99) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3,3,3,.90) 0%,
                rgba(3,3,3,.48) 72%,
                rgba(3,3,3,.08) 100%
            );
    }

    .hsu-hero-v10-inner{
        width:100%;
        padding-top:120px;
        padding-bottom:38px;
    }

    .hsu-hero-v10-copy{
        max-width:100%;
    }

    .hsu-hero-v10 h1{
        margin-top:10px;

        font-size:clamp(2.75rem,13.5vw,4rem);
        line-height:.91;
        letter-spacing:-.045em;

        word-break:normal;
        overflow-wrap:normal;
    }

    .hsu-hero-v10-copy > p{
        max-width:95%;
        margin-top:20px;
    }

    .hsu-hero-v10-sub{
        max-width:92% !important;
    }

    .hsu-hero-v10 .actions{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;

        width:100%;
        margin-top:25px;
    }

    .hsu-hero-v10 .button{
        width:100%;
        min-height:50px;
        justify-content:center;
    }

    .hsu-hero-v10-facts{
        grid-template-columns:1fr 1fr;
        width:100%;
        margin-top:30px;
    }

    .hsu-hero-v10-facts > div{
        min-height:82px;
    }

}

@media (max-width:390px){

    .hsu-hero-v10-bg{
        background-position:80% center;
    }

    .hsu-hero-v10 h1{
        font-size:2.7rem;
    }

}

/* =========================================================
   HSU V9 · MOBILE FIX FINAL
   Desktop bleibt unverändert
========================================================= */

@media (max-width:620px){

    .hsu-hero-v9{
        /*
         * Originalbild: 1536 × 1024 = Seitenverhältnis 1.5
         * Auf Mobile zeigen wir das GESAMTE Motiv.
         */
        width:100%;
        min-height:0;
        height:auto;
        aspect-ratio:3 / 2;

        position:relative;
        overflow:hidden;
        background:#030303;
    }

    .hsu-hero-v9-media{
        position:absolute;
        inset:0;

        background-image:url('/assets/img/hsu-hero-v9.png');

        /*
         * ENTSCHEIDEND:
         * contain statt cover.
         * Damit wird nichts links/rechts abgeschnitten.
         */
        background-size:contain;
        background-position:center top;
        background-repeat:no-repeat;

        transform:none;
    }

    .hsu-hero-v9-shade{
        position:absolute;
        inset:0;

        background:linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.04) 78%,
            rgba(5,5,5,.22) 100%
        );
    }

    .hsu-hero-v9-hotspot{
        display:none;
    }
}


/* sehr kleine Smartphones */

@media (max-width:390px){

    .hsu-hero-v9{
        min-height:0;
        height:auto;
        aspect-ratio:3 / 2;
    }

    .hsu-hero-v9-media{
        background-size:contain;
        background-position:center top;
        transform:none;
    }

}


/* =========================================================
   HSU V9 · DEDICATED MOBILE HERO IMAGE
========================================================= */

@media (max-width:620px){

    .hsu-hero-v9{
        width:100%;
        height:auto;
        min-height:0;
        aspect-ratio:9 / 16;
        position:relative;
        overflow:hidden;
        background:#030303;
    }

    .hsu-hero-v9-media{
        position:absolute;
        inset:0;

        background-image:
            url('/assets/img/hsu-hero-mobile-v1.png');

        background-size:cover;
        background-position:center center;
        background-repeat:no-repeat;

        transform:none;
    }

    .hsu-hero-v9-shade{
        position:absolute;
        inset:0;

        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,.06) 0%,
                rgba(0,0,0,.10) 55%,
                rgba(5,5,5,.52) 100%
            );
    }

    .hsu-hero-v9-hotspot{
        display:none;
    }
}

@media (max-width:390px){

    .hsu-hero-v9{
        aspect-ratio:9 / 16;
    }

    .hsu-hero-v9-media{
        background-position:center center;
    }
}


/* =========================================================
   HSU · FINAL MOBILE HERO
   eigenes Motiv + echter HTML Layer
========================================================= */

.hsu-mobile-hero-content{
    display:none;
}

@media(max-width:620px){

    .hsu-hero-v9{
        min-height:860px;
        height:auto;
        aspect-ratio:auto;
        display:flex;
        align-items:flex-end;
        background:#050505;
    }

    .hsu-hero-v9-media{
        background-image:url('/assets/img/hsu-hero-mobile-v1.png');
        background-size:cover;
        background-position:center center;
        background-repeat:no-repeat;
        transform:none;
    }

    .hsu-hero-v9-shade{
        background:
            linear-gradient(
                to bottom,
                rgba(2,2,2,.15) 0%,
                rgba(2,2,2,.32) 30%,
                rgba(2,2,2,.80) 62%,
                rgba(4,4,4,.98) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3,3,3,.55),
                rgba(3,3,3,.10)
            );
    }

    .hsu-mobile-hero-content{
        position:relative;
        z-index:4;

        display:block;

        width:100%;
        padding:
            75px
            max(22px,env(safe-area-inset-right))
            34px
            max(22px,env(safe-area-inset-left));

        color:#fff;
    }

    .hsu-mobile-eyebrow{
        display:block;
        margin-bottom:14px;

        color:#f36a0a;

        font-size:.66rem;
        font-weight:900;
        letter-spacing:.18em;
    }

    .hsu-mobile-hero-logo{
        width:78px;
        height:78px;
        object-fit:contain;

        margin-bottom:18px;

        filter:
            drop-shadow(0 10px 25px rgba(0,0,0,.4));
    }

    .hsu-mobile-hero-content h1{
        margin:0;

        max-width:100%;

        color:#f5f2ec;

        font-size:clamp(3rem,14vw,4.2rem);
        line-height:.88;
        letter-spacing:-.055em;
    }

    .hsu-mobile-hero-content h1 span{
        color:#f36a0a;
    }

    .hsu-mobile-hero-claim{
        margin:23px 0 0;

        color:#f3efe8;

        font-size:1.05rem;
        font-weight:750;
        line-height:1.42;
    }

    .hsu-mobile-hero-claim strong{
        color:#f36a0a;
    }

    .hsu-mobile-hero-text{
        max-width:330px;

        margin:16px 0 0;

        color:#aaa69f;

        font-size:.91rem;
        line-height:1.65;
    }

    .hsu-mobile-hero-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        margin-top:25px;
    }

    .hsu-mobile-hero-actions a{
        min-height:52px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;

        padding:0 15px;

        border:1px solid rgba(243,106,10,.65);
        border-radius:10px;

        color:#fff;

        font-size:.72rem;
        font-weight:900;
        letter-spacing:.055em;
        text-transform:uppercase;

        background:rgba(5,5,5,.52);
        backdrop-filter:blur(8px);
    }

    .hsu-mobile-hero-actions a:first-child{
        border-color:#f36a0a;
        background:#f36a0a;
    }

    .hsu-mobile-hero-facts{
        display:grid;
        grid-template-columns:1fr 1fr;

        margin-top:22px;

        overflow:hidden;

        border:1px solid rgba(255,255,255,.10);
        border-radius:16px;

        background:rgba(4,4,4,.65);
        backdrop-filter:blur(10px);
    }

    .hsu-mobile-hero-facts > div{
        min-height:78px;

        display:flex;
        flex-direction:column;
        justify-content:center;

        padding:14px 16px;

        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .hsu-mobile-hero-facts > div:nth-child(odd){
        border-right:1px solid rgba(255,255,255,.08);
    }

    .hsu-mobile-hero-facts > div:nth-last-child(-n+2){
        border-bottom:0;
    }

    .hsu-mobile-hero-facts strong{
        color:#fff;
        font-size:1.25rem;
        line-height:1;
    }

    .hsu-mobile-hero-facts span{
        margin-top:6px;

        color:#89857e;

        font-size:.62rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.06em;
    }

    /*
     * Alte Klickflächen des Desktopbilds mobil deaktivieren.
     */
    .hsu-hero-v9-hotspot{
        display:none;
    }

}


@media(max-width:390px){

    .hsu-hero-v9{
        min-height:830px;
    }

    .hsu-mobile-hero-content h1{
        font-size:2.85rem;
    }

    .hsu-mobile-hero-actions{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   HSU · FINAL MOBILE HERO
   eigenes Motiv + echter HTML Layer
========================================================= */

.hsu-mobile-hero-content{
    display:none;
}

@media(max-width:620px){

    .hsu-hero-v9{
        min-height:860px;
        height:auto;
        aspect-ratio:auto;
        display:flex;
        align-items:flex-end;
        background:#050505;
    }

    .hsu-hero-v9-media{
        background-image:url('/assets/img/hsu-hero-mobile-v1.png');
        background-size:cover;
        background-position:center center;
        background-repeat:no-repeat;
        transform:none;
    }

    .hsu-hero-v9-shade{
        background:
            linear-gradient(
                to bottom,
                rgba(2,2,2,.15) 0%,
                rgba(2,2,2,.32) 30%,
                rgba(2,2,2,.80) 62%,
                rgba(4,4,4,.98) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3,3,3,.55),
                rgba(3,3,3,.10)
            );
    }

    .hsu-mobile-hero-content{
        position:relative;
        z-index:4;

        display:block;

        width:100%;
        padding:
            75px
            max(22px,env(safe-area-inset-right))
            34px
            max(22px,env(safe-area-inset-left));

        color:#fff;
    }

    .hsu-mobile-eyebrow{
        display:block;
        margin-bottom:14px;

        color:#f36a0a;

        font-size:.66rem;
        font-weight:900;
        letter-spacing:.18em;
    }

    .hsu-mobile-hero-logo{
        width:78px;
        height:78px;
        object-fit:contain;

        margin-bottom:18px;

        filter:
            drop-shadow(0 10px 25px rgba(0,0,0,.4));
    }

    .hsu-mobile-hero-content h1{
        margin:0;

        max-width:100%;

        color:#f5f2ec;

        font-size:clamp(3rem,14vw,4.2rem);
        line-height:.88;
        letter-spacing:-.055em;
    }

    .hsu-mobile-hero-content h1 span{
        color:#f36a0a;
    }

    .hsu-mobile-hero-claim{
        margin:23px 0 0;

        color:#f3efe8;

        font-size:1.05rem;
        font-weight:750;
        line-height:1.42;
    }

    .hsu-mobile-hero-claim strong{
        color:#f36a0a;
    }

    .hsu-mobile-hero-text{
        max-width:330px;

        margin:16px 0 0;

        color:#aaa69f;

        font-size:.91rem;
        line-height:1.65;
    }

    .hsu-mobile-hero-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        margin-top:25px;
    }

    .hsu-mobile-hero-actions a{
        min-height:52px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;

        padding:0 15px;

        border:1px solid rgba(243,106,10,.65);
        border-radius:10px;

        color:#fff;

        font-size:.72rem;
        font-weight:900;
        letter-spacing:.055em;
        text-transform:uppercase;

        background:rgba(5,5,5,.52);
        backdrop-filter:blur(8px);
    }

    .hsu-mobile-hero-actions a:first-child{
        border-color:#f36a0a;
        background:#f36a0a;
    }

    .hsu-mobile-hero-facts{
        display:grid;
        grid-template-columns:1fr 1fr;

        margin-top:22px;

        overflow:hidden;

        border:1px solid rgba(255,255,255,.10);
        border-radius:16px;

        background:rgba(4,4,4,.65);
        backdrop-filter:blur(10px);
    }

    .hsu-mobile-hero-facts > div{
        min-height:78px;

        display:flex;
        flex-direction:column;
        justify-content:center;

        padding:14px 16px;

        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .hsu-mobile-hero-facts > div:nth-child(odd){
        border-right:1px solid rgba(255,255,255,.08);
    }

    .hsu-mobile-hero-facts > div:nth-last-child(-n+2){
        border-bottom:0;
    }

    .hsu-mobile-hero-facts strong{
        color:#fff;
        font-size:1.25rem;
        line-height:1;
    }

    .hsu-mobile-hero-facts span{
        margin-top:6px;

        color:#89857e;

        font-size:.62rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.06em;
    }

    /*
     * Alte Klickflächen des Desktopbilds mobil deaktivieren.
     */
    .hsu-hero-v9-hotspot{
        display:none;
    }

}


@media(max-width:390px){

    .hsu-hero-v9{
        min-height:830px;
    }

    .hsu-mobile-hero-content h1{
        font-size:2.85rem;
    }

    .hsu-mobile-hero-actions{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   HSU V11 · MOBILE HERO FINAL
   Nur Mobile · Desktop bleibt unverändert
========================================================= */

@media (max-width:620px){

    .hsu-mobile-hero-logo{
        display:none !important;
    }

    .hsu-hero-v9{
        min-height:820px;
    }

    .hsu-mobile-hero-content{
        padding-top:58px;
        padding-bottom:30px;
    }

    .hsu-mobile-eyebrow{
        margin-bottom:22px;
    }

    .hsu-mobile-hero-content h1{
        width:100%;
        max-width:none;
        font-size:clamp(3rem,13.5vw,4rem);
        line-height:.88;
        letter-spacing:-.055em;
    }

    .hsu-mobile-community{
        display:block;
        width:100%;
        white-space:nowrap;

        /*
         * Gemeinschaft ist deutlich länger als
         * Schwerte / Darts und bekommt deshalb
         * eine eigene responsive Schriftgröße.
         */
        font-size:clamp(2.15rem,10.2vw,3.15rem);
        line-height:1;
        letter-spacing:-.045em;
    }

    .hsu-mobile-hero-claim{
        margin-top:24px;
    }

    .hsu-mobile-hero-text{
        margin-top:16px;
    }

    .hsu-mobile-hero-actions{
        margin-top:24px;
    }

    .hsu-mobile-hero-facts{
        margin-top:20px;
    }

}


/* Kleine iPhones */

@media (max-width:390px){

    .hsu-hero-v9{
        min-height:800px;
    }

    .hsu-mobile-hero-content{
        padding-top:50px;
    }

    .hsu-mobile-hero-content h1{
        font-size:2.85rem;
    }

    .hsu-mobile-community{
        font-size:2.08rem;
        letter-spacing:-.05em;
    }

}



/* =========================================================
   HSU V11 · MOBILE HERO FINAL
   Nur Mobile · Desktop bleibt unverändert
========================================================= */

@media (max-width:620px){

    .hsu-mobile-hero-logo{
        display:none !important;
    }

    .hsu-hero-v9{
        min-height:820px;
    }

    .hsu-mobile-hero-content{
        padding-top:58px;
        padding-bottom:30px;
    }

    .hsu-mobile-eyebrow{
        margin-bottom:22px;
    }

    .hsu-mobile-hero-content h1{
        width:100%;
        max-width:none;
        font-size:clamp(3rem,13.5vw,4rem);
        line-height:.88;
        letter-spacing:-.055em;
    }

    .hsu-mobile-community{
        display:block;
        width:100%;
        white-space:nowrap;

        /*
         * Gemeinschaft ist deutlich länger als
         * Schwerte / Darts und bekommt deshalb
         * eine eigene responsive Schriftgröße.
         */
        font-size:clamp(2.15rem,10.2vw,3.15rem);
        line-height:1;
        letter-spacing:-.045em;
    }

    .hsu-mobile-hero-claim{
        margin-top:24px;
    }

    .hsu-mobile-hero-text{
        margin-top:16px;
    }

    .hsu-mobile-hero-actions{
        margin-top:24px;
    }

    .hsu-mobile-hero-facts{
        margin-top:20px;
    }

}


/* Kleine iPhones */

@media (max-width:390px){

    .hsu-hero-v9{
        min-height:800px;
    }

    .hsu-mobile-hero-content{
        padding-top:50px;
    }

    .hsu-mobile-hero-content h1{
        font-size:2.85rem;
    }

    .hsu-mobile-community{
        font-size:2.08rem;
        letter-spacing:-.05em;
    }

}



/* =========================================================
   HSU V11.1 · COMMUNITY PHOTO SERIES
   Drei echte Bilder statt Platzhalter
========================================================= */

.hsu-community-photo{
    position:relative;
    overflow:hidden;
    background:#080808;
}

.hsu-community-photo > img{
    position:absolute;
    inset:0;

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        filter .7s ease;
}

.hsu-community-photo::after{
    content:"";

    position:absolute;
    inset:0;
    z-index:1;

    pointer-events:none;

    background:
        linear-gradient(
            to top,
            rgba(3,3,3,.92) 0%,
            rgba(3,3,3,.48) 34%,
            rgba(3,3,3,.08) 68%,
            rgba(3,3,3,.03) 100%
        );
}

.hsu-community-caption{
    position:absolute;

    left:28px;
    right:28px;
    bottom:25px;

    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.hsu-community-caption span{
    color:#f36a0a;

    font-size:.68rem;
    font-weight:900;
    line-height:1;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.hsu-community-caption strong{
    margin-top:8px;

    color:#fff;

    font-size:clamp(1.5rem,2.3vw,2.6rem);
    font-weight:900;
    line-height:.92;
    letter-spacing:-.04em;
}

.hsu-community-caption small{
    margin-top:9px;

    color:rgba(255,255,255,.66);

    font-size:.72rem;
    font-weight:650;
    letter-spacing:.035em;
}

@media (hover:hover){

    .hsu-community-photo:hover > img{
        transform:scale(1.035);
        filter:brightness(1.06);
    }

}


/* MOBILE */

@media(max-width:620px){

    .hsu-community-gallery{
        gap:14px;
    }

    .hsu-community-photo{
        min-height:330px;
    }

    .v7-photo-main.hsu-community-photo{
        min-height:430px;
    }

    .v7-editorial-side{
        gap:14px;
    }

    .hsu-community-photo > img{
        object-position:center center;
    }

    .hsu-community-caption{
        left:20px;
        right:20px;
        bottom:20px;
    }

    .hsu-community-caption strong{
        font-size:1.8rem;
    }

    .hsu-community-caption small{
        font-size:.68rem;
    }

}




/* =========================================================
   HSU · FINAL TEAM CARDS CLEAN
   Eine einzige Definition
========================================================= */

.v7-teams .team-showcase{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
}

.v7-teams .team-feature{
    position:relative;
    width:100%;
    aspect-ratio:3 / 2;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden;
    background:#050505;
    border-radius:18px;
}

.v7-teams .team-feature-bg{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;
    transform:none !important;
}

.v7-teams .team-feature-bg.team-one{
    background-image:url('/assets/img/home-team-hsu-v1.png') !important;
}

.v7-teams .team-feature-bg.team-two{
    background-image:url('/assets/img/home-team-amateure-v1.png?v=amateure-v2-20260901-095011') !important;
}

/* Keine doppelte HTML-Textebene */
.v7-teams .team-feature-top,
.v7-teams .team-feature-bottom > div,
.v7-teams .v7-team-watermark{
    display:none !important;
}

/* Nur sehr leichter Shade */
.v7-teams .team-feature-shade{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,0) 38%
        ) !important;
}

/* Pfeil bleibt */
.v7-teams .team-feature-bottom{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:5 !important;
    display:flex !important;
    justify-content:flex-end !important;
    padding:22px !important;
    pointer-events:none;
}

.v7-teams .team-arrow{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:52px !important;
    height:52px !important;
    border-radius:50% !important;
    border:1px solid rgba(255,122,0,.55) !important;
    background:rgba(5,5,5,.72) !important;
}

/* Mobile */
@media(max-width:760px){

    .v7-teams .team-showcase{
        grid-template-columns:1fr;
        gap:16px;
    }

    .v7-teams .team-feature{
        aspect-ratio:3 / 2;
        min-height:0 !important;
    }

    .v7-teams .team-feature-bg{
        background-size:cover !important;
        background-position:center center !important;
    }
}



/* =========================================================
   HSU · PLAYER CARDS V1
   Echtes Portrait-System Desktop + Mobile
========================================================= */

.players-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
}


/* CARD */

.player-card{
    position:relative;

    display:flex;
    flex-direction:column;

    min-width:0;

    overflow:hidden;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            #111 0%,
            #090909 100%
        );

    box-shadow:
        0 18px 48px rgba(0,0,0,.24);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


/* PHOTO AREA */

.player-image{
    position:relative;

    width:100%;
    height:auto !important;

    aspect-ratio:4 / 5;

    overflow:hidden;

    background:#080808;
}


.player-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    /*
     * Standardwert für Portraits.
     * Köpfe bleiben im oberen Bereich.
     */
    object-position:center 24%;
}


/* Benjamin Frieg:
   etwas mehr Oberkörper / Trikot sichtbar */

.player-card[href*="benjamin-frieg"]
.player-image img{
    object-position:center 30%;
}


/* sanfter Foto-Gradient */

.player-image::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            to top,
            rgba(5,5,5,.72) 0%,
            rgba(5,5,5,.12) 34%,
            rgba(5,5,5,0) 58%
        );
}


/* SPIELERNUMMER AUF FOTO */

.player-number{
    position:absolute;

    left:18px;
    bottom:16px;

    z-index:3;

    display:inline-flex;
    align-items:center;

    min-height:32px;

    padding:0 12px;

    border:
        1px solid rgba(255,122,0,.48);

    border-radius:999px;

    background:
        rgba(5,5,5,.74);

    backdrop-filter:
        blur(8px);

    color:#fff;

    font-size:.72rem;
    font-weight:850;

    letter-spacing:.08em;
}


/* CONTENT */

.player-content{
    display:flex;
    flex-direction:column;

    flex:1;

    padding:21px 21px 22px;
}


.player-role{
    display:inline-flex;

    width:max-content;

    margin-bottom:10px;

    color:#9b9791;

    font-size:.66rem;
    font-weight:900;

    letter-spacing:.16em;

    text-transform:uppercase;
}


/* CAPTAIN */

.player-role-captain{
    color:#ff7300;
}

.player-role-captain::before{
    content:"●";

    margin-right:7px;

    font-size:.55rem;
}


/* CO-CAPTAIN */

.player-role-co{
    color:#d7d3cd;
}

.player-role-co::before{
    content:"●";

    margin-right:7px;

    color:#ff7300;

    font-size:.55rem;
}


.player-content h3{
    margin:0;

    color:#fff;

    font-size:
        clamp(1.25rem,1.6vw,1.7rem);

    line-height:1.02;

    letter-spacing:-.04em;
}


.player-nickname{
    display:block;

    margin-top:8px;
    margin-bottom:0;

    color:#ff7300;

    font-size:.82rem;
}


/* Desktop: ID ist bereits auf dem Foto */

.player-id-mobile{
    display:none;
}


.player-more{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:auto;
    padding-top:22px;

    color:#b5b1ab;

    font-size:.78rem;
    font-weight:750;

    transition:
        color .25s ease;
}


.player-more span{
    color:#ff7300;

    transition:
        transform .25s ease;
}


/* HOVER */

@media(hover:hover){

    .player-card:hover{
        transform:
            translateY(-5px);

        border-color:
            rgba(255,115,0,.38);

        box-shadow:
            0 24px 65px rgba(0,0,0,.34);
    }

    .player-card:hover .player-more{
        color:#fff;
    }

    .player-card:hover .player-more span{
        transform:
            translateX(4px);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

    .players-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


@media(max-width:800px){

    .players-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:16px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .players-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .player-card{
        border-radius:18px;
    }

    .player-image{
        /*
         * Hochformat, aber nicht riesig.
         */
        aspect-ratio:4 / 4.8;
        height:auto !important;
    }

    .player-image img{
        object-position:center 24%;
    }

    .player-card[href*="benjamin-frieg"]
    .player-image img{
        object-position:center 29%;
    }

    .player-content{
        padding:20px 20px 22px;
    }

    .player-content h3{
        font-size:1.65rem;
    }

    .player-number{
        display:none;
    }

    .player-id-mobile{
        display:block;

        margin-top:9px;

        color:#77736e;

        font-size:.72rem;
        font-weight:700;

        letter-spacing:.035em;
    }

    .player-more{
        margin-top:18px;
        padding-top:16px;

        border-top:
            1px solid rgba(255,255,255,.06);
    }

}


/* Kleine Smartphones */

@media(max-width:390px){

    .player-image{
        aspect-ratio:4 / 5;
    }

    .player-content h3{
        font-size:1.5rem;
    }

}



/* =========================================================
   HSU · STARTSEITE · MARIAS HASENECK PHOTO SECTION
   Echtes Foto + bestehendes HTML
========================================================= */

.hsu-home-venue-photo{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    /*
     * Genug Raum für das Motiv, ohne die
     * ursprüngliche Sektion künstlich aufzublähen.
     */
    min-height:620px;
}


/* =========================================================
   ECHTES HASENECK-FOTO
========================================================= */

.hsu-home-venue-photo::before{
    content:"";

    position:absolute;
    inset:0;
    z-index:-2;

    background-image:
        url('/assets/img/haseneck.jpg');

    background-size:cover;
    background-repeat:no-repeat;

    /*
     * Eingang / Haseneck möglichst hinter der
     * linken Textseite sichtbar halten.
     */
    background-position:center 46%;

    transform:scale(1.015);
}


/* =========================================================
   CINEMATIC DARK OVERLAY
========================================================= */

.hsu-home-venue-photo::after{
    content:"";

    position:absolute;
    inset:0;
    z-index:-1;

    pointer-events:none;

    background:

        /* links: Text gut lesbar */
        linear-gradient(
            90deg,
            rgba(3,3,3,.97) 0%,
            rgba(3,3,3,.86) 27%,
            rgba(3,3,3,.47) 55%,
            rgba(3,3,3,.64) 100%
        ),

        /* unten: weicher Auslauf */
        linear-gradient(
            to top,
            rgba(3,3,3,.94) 0%,
            rgba(3,3,3,.28) 45%,
            rgba(3,3,3,.18) 100%
        );
}


/* Inhalt garantiert über dem Foto */

.hsu-home-venue-photo > *{
    position:relative;
    z-index:2;
}


/* =========================================================
   HEADLINE
========================================================= */

.hsu-home-venue-photo h2{
    text-shadow:
        0 3px 28px rgba(0,0,0,.48);
}


/* =========================================================
   RECHTE INFO-KARTE
========================================================= */

/*
 * Bestehende Karten bleiben bestehen.
 * Wir geben ihnen nur den Glass-/Premium-Look
 * aus dem Mockup.
 */

.hsu-home-venue-photo .home-venue-card,
.hsu-home-venue-photo .venue-card,
.hsu-home-venue-photo .v7-venue-card,
.hsu-home-venue-photo .home-card{
    background:
        linear-gradient(
            145deg,
            rgba(13,13,13,.94),
            rgba(8,8,8,.88)
        );

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    border:
        1px solid rgba(255,255,255,.11);

    box-shadow:
        0 28px 80px rgba(0,0,0,.34);
}


/* =========================================================
   DEZENTER ORANGE GLOW
========================================================= */

.hsu-home-venue-photo .shell::after{
    content:"";

    position:absolute;

    width:460px;
    height:460px;

    right:8%;
    top:50%;

    transform:
        translateY(-50%);

    border:
        7px solid rgba(243,106,10,.29);

    border-radius:50%;

    pointer-events:none;

    z-index:-1;

    filter:
        drop-shadow(
            0 0 35px rgba(243,106,10,.08)
        );
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    .hsu-home-venue-photo{
        min-height:0;
    }

    .hsu-home-venue-photo::before{
        background-position:center center;
    }

    .hsu-home-venue-photo::after{
        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.47) 0%,
                rgba(3,3,3,.76) 55%,
                rgba(3,3,3,.96) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3,3,3,.75) 0%,
                rgba(3,3,3,.38) 100%
            );
    }

    .hsu-home-venue-photo .shell::after{
        width:340px;
        height:340px;

        right:-110px;
        top:36%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px){

    .hsu-home-venue-photo{
        min-height:0;
    }

    .hsu-home-venue-photo::before{

        /*
         * Auf dem iPhone anderer Bildausschnitt:
         * Gebäude bleibt erkennbar, ohne dass wir
         * Desktop einfach brutal croppen.
         */
        background-size:auto 100%;
        background-position:48% center;
    }

    .hsu-home-venue-photo::after{
        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.30) 0%,
                rgba(3,3,3,.66) 32%,
                rgba(3,3,3,.91) 65%,
                rgba(3,3,3,.99) 100%
            );
    }

    .hsu-home-venue-photo .shell::after{
        width:260px;
        height:260px;

        right:-145px;
        top:27%;

        border-width:4px;

        opacity:.7;
    }

}


/* Kleine iPhones */

@media(max-width:390px){

    .hsu-home-venue-photo::before{
        background-position:51% center;
    }

}


/* =========================================================
   HSU HOME VENUE · LAYER FIX
========================================================= */

.hsu-home-venue-photo{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
    background:#050505;
}

/* FOTO */
.hsu-home-venue-photo::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;

    background-image:
        url('/assets/img/haseneck-home-bg-v1.png') !important;

    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;

    opacity:1 !important;
}

/* OVERLAY */
.hsu-home-venue-photo::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,3,.94) 0%,
            rgba(3,3,3,.70) 34%,
            rgba(3,3,3,.24) 62%,
            rgba(3,3,3,.57) 100%
        ),
        linear-gradient(
            to top,
            rgba(3,3,3,.88) 0%,
            rgba(3,3,3,.08) 58%
        ) !important;
}

/* HTML */
.hsu-home-venue-photo > *{
    position:relative !important;
    z-index:2 !important;
}

@media(max-width:620px){

    .hsu-home-venue-photo::before{
        background-position:center center !important;
    }

    .hsu-home-venue-photo::after{
        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.25) 0%,
                rgba(3,3,3,.55) 36%,
                rgba(3,3,3,.90) 70%,
                rgba(3,3,3,.98) 100%
            ) !important;
    }

}

/* =========================================================
   HSU · HOME VENUE FINAL
   Startseite · Marias Haseneck
========================================================= */

.v7-venue,
.venue-home{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    background:
        #050505
        url('/assets/img/haseneck-home-bg-v1.png')
        center center / cover
        no-repeat !important;
}


/* Fotoabdunklung */

.v7-venue::before,
.venue-home::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,3,.94) 0%,
            rgba(3,3,3,.73) 34%,
            rgba(3,3,3,.28) 62%,
            rgba(3,3,3,.56) 100%
        ),
        linear-gradient(
            to top,
            rgba(3,3,3,.84) 0%,
            rgba(3,3,3,.10) 58%
        );

    pointer-events:none;
}


/* vorhandenes Overlay nicht mehr als schwarze Wand */

.v7-venue .venue-home-overlay,
.venue-home .venue-home-overlay{
    position:absolute;
    inset:0;
    z-index:1;

    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(243,106,10,.12),
            transparent 34%
        ) !important;

    pointer-events:none;
}


/* Inhalt */

.v7-venue .venue-home-grid,
.venue-home .venue-home-grid{
    position:relative;
    z-index:2;
}


/* rechte Infokarte */

.v7-venue .venue-panel,
.venue-home .venue-panel{
    background:
        linear-gradient(
            145deg,
            rgba(12,12,12,.93),
            rgba(6,6,6,.86)
        ) !important;

    border:
        1px solid rgba(255,255,255,.11) !important;

    box-shadow:
        0 28px 80px rgba(0,0,0,.34);

    backdrop-filter:
        blur(13px);

    -webkit-backdrop-filter:
        blur(13px);
}


/* Mobile */

@media(max-width:620px){

    .v7-venue,
    .venue-home{
        background-position:center center !important;
    }

    .v7-venue::before,
    .venue-home::before{
        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.22) 0%,
                rgba(3,3,3,.50) 32%,
                rgba(3,3,3,.86) 67%,
                rgba(3,3,3,.98) 100%
            ) !important;
    }

    .v7-venue .venue-panel,
    .venue-home .venue-panel{
        backdrop-filter:
            blur(9px);

        -webkit-backdrop-filter:
            blur(9px);
    }

}


/* =========================================================
   HSU · HOME VENUE MEDIA FIX
   Echtes Hintergrundbild auf vorhandener Media-Ebene
========================================================= */

.venue-home{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    background:#050505 !important;
}


/* FOTOEBENE */

.venue-home-media{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    background-image:
        url('/assets/img/haseneck-home-bg-v1.png') !important;

    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;

    opacity:1 !important;

    transform:scale(1.01);
}


/* OVERLAY */

.venue-home-overlay{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,3,.92) 0%,
            rgba(3,3,3,.68) 34%,
            rgba(3,3,3,.22) 62%,
            rgba(3,3,3,.55) 100%
        ),
        linear-gradient(
            to top,
            rgba(3,3,3,.82) 0%,
            rgba(3,3,3,.08) 60%
        ) !important;

    pointer-events:none;
}


/* INHALT */

.venue-home-grid{
    position:relative !important;
    z-index:2 !important;
}


/* INFO-PANEL */

.venue-home .venue-panel{
    background:
        linear-gradient(
            145deg,
            rgba(12,12,12,.92),
            rgba(6,6,6,.84)
        ) !important;

    border:
        1px solid rgba(255,255,255,.11) !important;

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 28px 80px rgba(0,0,0,.34);
}


/* MOBILE */

@media(max-width:620px){

    .venue-home-media{
        background-size:cover !important;
        background-position:center center !important;
        transform:none;
    }

    .venue-home-overlay{
        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.26) 0%,
                rgba(3,3,3,.55) 35%,
                rgba(3,3,3,.88) 70%,
                rgba(3,3,3,.98) 100%
            ) !important;
    }

}

/* HSU HERO MOBILE CLEAN V12.7 */

/* HSU HERO MOBILE CLEAN V12.7
   ---------------------------------------------------------
   Einheitliche Smartphone-Regel für iPhone + Android.
   Desktop-Hero bleibt unverändert.
--------------------------------------------------------- */

@media screen and (max-width:620px){

    .hsu-hero-v9{
        position:relative !important;

        display:flex !important;
        align-items:flex-end !important;

        width:100% !important;
        min-height:820px !important;
        height:auto !important;

        aspect-ratio:auto !important;

        overflow:hidden !important;
        isolation:isolate !important;

        background:#050505 !important;
    }


    /* FOTO */

    .hsu-hero-v9-media{
        position:absolute !important;
        inset:0 !important;

        display:block !important;

        width:100% !important;
        height:100% !important;

        z-index:0 !important;

        background-image:
            url('/assets/img/hsu-hero-mobile-v1.png') !important;

        background-size:cover !important;
        background-position:center center !important;
        background-repeat:no-repeat !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;
    }


    /* ABDUNKLUNG */

    .hsu-hero-v9-shade{
        position:absolute !important;
        inset:0 !important;

        display:block !important;

        z-index:1 !important;

        background:
            linear-gradient(
                to bottom,
                rgba(2,2,2,.10) 0%,
                rgba(2,2,2,.22) 28%,
                rgba(2,2,2,.72) 60%,
                rgba(4,4,4,.98) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3,3,3,.42) 0%,
                rgba(3,3,3,.08) 100%
            ) !important;

        pointer-events:none !important;
    }


    /* MOBILE HTML CONTENT */

    .hsu-mobile-hero-content{
        position:relative !important;

        display:block !important;

        z-index:4 !important;

        width:100% !important;

        padding:
            58px
            max(22px,env(safe-area-inset-right))
            30px
            max(22px,env(safe-area-inset-left)) !important;

        color:#fff !important;
    }


    .hsu-mobile-eyebrow{
        display:block !important;

        margin-bottom:22px !important;

        color:#f36a0a !important;

        font-size:.66rem !important;
        font-weight:900 !important;
        letter-spacing:.18em !important;
    }


    .hsu-mobile-hero-logo{
        display:none !important;
    }


    .hsu-mobile-hero-content h1{
        width:100% !important;
        max-width:none !important;

        margin:0 !important;

        color:#f5f2ec !important;

        font-size:clamp(3rem,13.5vw,4rem) !important;
        line-height:.88 !important;
        letter-spacing:-.055em !important;

        word-break:normal !important;
        overflow-wrap:normal !important;
    }


    .hsu-mobile-community{
        display:block !important;

        width:100% !important;

        white-space:nowrap !important;

        color:#f36a0a !important;

        font-size:clamp(2.15rem,10.2vw,3.15rem) !important;
        line-height:1 !important;
        letter-spacing:-.045em !important;
    }


    .hsu-mobile-hero-claim{
        margin:24px 0 0 !important;

        color:#f3efe8 !important;

        font-size:1.05rem !important;
        font-weight:750 !important;
        line-height:1.42 !important;
    }


    .hsu-mobile-hero-claim strong{
        color:#f36a0a !important;
    }


    .hsu-mobile-hero-text{
        max-width:330px !important;

        margin:16px 0 0 !important;

        color:#aaa69f !important;

        font-size:.91rem !important;
        line-height:1.65 !important;
    }


    .hsu-mobile-hero-actions{
        display:grid !important;

        grid-template-columns:1fr 1fr !important;

        gap:10px !important;

        width:100% !important;

        margin-top:24px !important;
    }


    .hsu-mobile-hero-actions a{
        min-height:52px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        gap:10px !important;

        padding:0 15px !important;

        border:
            1px solid rgba(243,106,10,.65) !important;

        border-radius:10px !important;

        color:#fff !important;

        font-size:.72rem !important;
        font-weight:900 !important;

        letter-spacing:.055em !important;
        text-transform:uppercase !important;

        background:
            rgba(5,5,5,.52) !important;
    }


    .hsu-mobile-hero-actions a:first-child{
        border-color:#f36a0a !important;
        background:#f36a0a !important;
    }


    .hsu-mobile-hero-facts{
        display:grid !important;

        grid-template-columns:1fr 1fr !important;

        width:100% !important;

        margin-top:20px !important;

        overflow:hidden !important;

        border:
            1px solid rgba(255,255,255,.10) !important;

        border-radius:16px !important;

        background:
            rgba(4,4,4,.65) !important;
    }


    .hsu-mobile-hero-facts > div{
        min-height:78px !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;

        padding:14px 16px !important;

        border-bottom:
            1px solid rgba(255,255,255,.08) !important;
    }


    .hsu-mobile-hero-facts > div:nth-child(odd){
        border-right:
            1px solid rgba(255,255,255,.08) !important;
    }


    .hsu-mobile-hero-facts > div:nth-last-child(-n+2){
        border-bottom:0 !important;
    }


    .hsu-mobile-hero-facts strong{
        color:#fff !important;

        font-size:1.25rem !important;
        line-height:1 !important;
    }


    .hsu-mobile-hero-facts span{
        margin-top:6px !important;

        color:#89857e !important;

        font-size:.62rem !important;
        font-weight:700 !important;

        text-transform:uppercase !important;
        letter-spacing:.06em !important;
    }


    /* Desktop-Hotspots auf Smartphones nicht verwenden */

    .hsu-hero-v9-hotspot{
        display:none !important;
    }

}


/* Kleine Smartphones */

@media screen and (max-width:390px){

    .hsu-hero-v9{
        min-height:800px !important;
    }

    .hsu-mobile-hero-content{
        padding-top:50px !important;
    }

    .hsu-mobile-hero-content h1{
        font-size:2.85rem !important;
    }

    .hsu-mobile-community{
        font-size:2.08rem !important;
        letter-spacing:-.05em !important;
    }

    .hsu-mobile-hero-actions{
        grid-template-columns:1fr !important;
    }

}

/* =========================================================
   HSU · HERO PICTURE V12.9
   Robustes echtes Bild für Android + iPhone + Desktop
========================================================= */

.hsu-hero-v9{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
}


/* Echtes HTML-Bild statt CSS Background */

.hsu-hero-v9-picture{
    position:absolute !important;
    inset:0 !important;

    z-index:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;

    pointer-events:none !important;
}


.hsu-hero-v9-picture img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center center !important;

    opacity:1 !important;
    visibility:visible !important;
}


/* Shade über dem Bild */

.hsu-hero-v9-shade{
    position:absolute !important;
    inset:0 !important;

    z-index:1 !important;

    pointer-events:none !important;
}


/* Mobile HTML-Inhalt */

.hsu-mobile-hero-content{
    position:relative !important;
    z-index:4 !important;
}


/* Accessibility-Inhalt */

.hsu-hero-v9-accessible{
    z-index:5;
}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width:620px){

    .hsu-hero-v9{
        min-height:820px !important;
        height:auto !important;
        aspect-ratio:auto !important;

        display:flex !important;
        align-items:flex-end !important;

        background:#050505 !important;
    }

    .hsu-hero-v9-picture{
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
    }

    .hsu-hero-v9-picture img{
        object-fit:cover !important;
        object-position:center center !important;
    }

    /*
     * Alte Background-Ebene existiert im HTML
     * ab jetzt nicht mehr.
     */
    .hsu-hero-v9-media{
        display:none !important;
    }

}


/* Kleine Smartphones */

@media screen and (max-width:390px){

    .hsu-hero-v9{
        min-height:800px !important;
    }

}


/* =========================================================
   HSU · HOME VENUE MOBILE READABILITY V12.10
   Bild bleibt gleich – Mobile Crop + Lesbarkeit optimiert
========================================================= */

@media screen and (max-width:620px){

    .venue-home{
        position:relative !important;
        overflow:hidden !important;
    }


    /* -----------------------------------------------------
       FOTO
       Motiv bewusst nach rechts verschieben.
       Links entsteht mehr ruhige Fläche für den HTML-Text.
    ----------------------------------------------------- */

    .venue-home-media{
        background-image:
            url('/assets/img/haseneck-home-bg-v1.png') !important;

        background-size:cover !important;
        background-repeat:no-repeat !important;

        /*
         * Der helle Haseneck-Schriftzug wandert weiter
         * nach rechts und kollidiert nicht mehr so stark
         * mit unserer Headline.
         */
        background-position:62% center !important;

        opacity:1 !important;
    }


    /* -----------------------------------------------------
       MOBILE OVERLAY
       Links dunkel für Text – rechts darf das Foto leben.
    ----------------------------------------------------- */

    .venue-home-overlay{
        background:

            /* Hauptverlauf für Textbereich */
            linear-gradient(
                90deg,
                rgba(3,3,3,.94) 0%,
                rgba(3,3,3,.82) 34%,
                rgba(3,3,3,.48) 62%,
                rgba(3,3,3,.18) 100%
            ),

            /* oben zusätzliche Beruhigung */
            linear-gradient(
                to bottom,
                rgba(3,3,3,.38) 0%,
                rgba(3,3,3,.12) 44%,
                rgba(3,3,3,.38) 72%,
                rgba(3,3,3,.82) 100%
            ) !important;
    }


    /* -----------------------------------------------------
       TEXTBLOCK
    ----------------------------------------------------- */

    .venue-home-grid{
        position:relative !important;
        z-index:2 !important;

        padding-top:54px !important;
        padding-bottom:54px !important;
    }


    .venue-home .eyebrow{
        color:#f36a0a !important;

        text-shadow:
            0 2px 14px rgba(0,0,0,.90);
    }


    .venue-home h2{
        max-width:94% !important;

        margin-top:14px !important;

        font-size:clamp(3.1rem,13vw,4.2rem) !important;
        line-height:.90 !important;
        letter-spacing:-.055em !important;

        text-shadow:
            0 4px 24px rgba(0,0,0,.90),
            0 1px 4px rgba(0,0,0,1);
    }


    .venue-home h2 .orange{
        color:#f36a0a !important;
    }


    .venue-home .lead{
        max-width:310px !important;

        margin-top:34px !important;

        color:#f2eee8 !important;

        font-size:1.22rem !important;
        line-height:1.55 !important;

        text-shadow:
            0 3px 18px rgba(0,0,0,.95);
    }


    .venue-home .v7-address{
        margin-top:36px !important;

        color:#d4d0ca !important;

        font-size:1rem !important;
        line-height:1.55 !important;

        text-shadow:
            0 3px 18px rgba(0,0,0,.95);
    }


    /* -----------------------------------------------------
       INFO PANEL
    ----------------------------------------------------- */

    .venue-home .venue-panel{
        margin-top:42px !important;

        background:
            rgba(5,5,5,.92) !important;

        backdrop-filter:
            blur(14px) !important;

        -webkit-backdrop-filter:
            blur(14px) !important;
    }

}


/* =========================================================
   Kleine Smartphones
========================================================= */

@media screen and (max-width:390px){

    .venue-home-media{
        background-position:65% center !important;
    }

    .venue-home h2{
        font-size:2.95rem !important;
    }

}

/* =========================================================
   HSU · VENUE MOBILE V12.11
   Deutlich bessere Lesbarkeit auf Smartphone
========================================================= */

@media screen and (max-width:620px){

    /* -----------------------------------------------------
       FOTO deutlich stärker nach rechts
    ----------------------------------------------------- */

    .venue-home-media{
        background-size:auto 100% !important;
        background-position:72% center !important;
        background-repeat:no-repeat !important;
    }


    /* -----------------------------------------------------
       Gesamtbild etwas beruhigen
    ----------------------------------------------------- */

    .venue-home-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(2,2,2,.82) 0%,
                rgba(2,2,2,.66) 46%,
                rgba(2,2,2,.25) 74%,
                rgba(2,2,2,.08) 100%
            ),
            linear-gradient(
                to bottom,
                rgba(2,2,2,.20) 0%,
                rgba(2,2,2,.10) 48%,
                rgba(2,2,2,.62) 100%
            ) !important;
    }


    /* -----------------------------------------------------
       TEXTBEREICH bekommt eigene dunkle Lesefläche
    ----------------------------------------------------- */

    .venue-home-grid > div:first-child{
        position:relative !important;

        padding:
            28px
            22px
            30px !important;

        margin:
            0
            -4px !important;

        border-radius:18px !important;

        background:
            linear-gradient(
                135deg,
                rgba(4,4,4,.88),
                rgba(4,4,4,.58)
            ) !important;

        border:
            1px solid rgba(255,255,255,.07) !important;

        box-shadow:
            0 20px 55px rgba(0,0,0,.28) !important;

        backdrop-filter:
            blur(5px) !important;

        -webkit-backdrop-filter:
            blur(5px) !important;
    }


    /* Eyebrow */

    .venue-home .eyebrow{
        margin-bottom:16px !important;

        color:#f36a0a !important;

        text-shadow:none !important;
    }


    /* Headline */

    .venue-home h2{
        margin:0 !important;

        max-width:100% !important;

        font-size:clamp(2.7rem,12vw,3.75rem) !important;
        line-height:.91 !important;

        letter-spacing:-.055em !important;

        text-shadow:
            0 2px 16px rgba(0,0,0,.65) !important;
    }


    /* Claim */

    .venue-home .lead{
        margin-top:28px !important;

        color:#f4f1eb !important;

        font-size:1.18rem !important;
        line-height:1.5 !important;

        text-shadow:none !important;
    }


    /* Adresse */

    .venue-home .v7-address{
        margin-top:30px !important;

        color:#c7c3bd !important;

        font-size:.96rem !important;
        line-height:1.55 !important;

        text-shadow:none !important;
    }


    /* -----------------------------------------------------
       Panel klar vom oberen Textblock trennen
    ----------------------------------------------------- */

    .venue-home .venue-panel{
        margin-top:26px !important;

        background:
            rgba(5,5,5,.94) !important;

        border:
            1px solid rgba(255,255,255,.10) !important;

        box-shadow:
            0 22px 60px rgba(0,0,0,.32) !important;
    }

}


/* Kleine Smartphones */

@media screen and (max-width:390px){

    .venue-home-media{
        background-position:76% center !important;
    }

    .venue-home h2{
        font-size:2.65rem !important;
    }

    .venue-home-grid > div:first-child{
        padding:
            24px
            18px
            26px !important;
    }

}


/* =========================================================
   HSU · PARTNER PREMIUM VISUAL V12.12
========================================================= */

.v7-partners .partner-premium{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    min-height:360px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:28px;

    background:#0a0a0a;

    box-shadow:
        0 24px 70px rgba(0,0,0,.30);
}


/* BACKGROUND IMAGE */

.v7-partners .partner-premium-media{
    position:absolute;
    inset:0;
    z-index:0;

    background-image:var(--partner-bg, none);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    transform:scale(1.01);

    transition:
        transform .6s ease;
}


/* DARK OVERLAY */

.v7-partners .partner-premium-shade{
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(5,5,5,.98) 0%,
            rgba(5,5,5,.78) 28%,
            rgba(5,5,5,.25) 65%,
            rgba(5,5,5,.12) 100%
        );
}


/* LOGO */

.v7-partners .partner-premium-logo{
    position:absolute;
    z-index:2;

    left:32px;
    top:30px;

    width:min(220px,52%);
    height:105px;

    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.v7-partners .partner-premium-logo img{
    display:block;

    width:auto;
    max-width:100%;

    height:auto;
    max-height:100%;

    object-fit:contain;

    filter:
        drop-shadow(
            0 4px 18px rgba(0,0,0,.55)
        );
}


/* BOTTOM INFORMATION */

.v7-partners .partner-premium-bottom{
    position:absolute;
    z-index:3;

    left:0;
    right:0;
    bottom:0;

    padding:
        32px 34px 30px;

    display:grid;

    grid-template-columns:
        1fr auto;

    align-items:end;
}

.v7-partners .partner-premium-bottom > span:first-child{
    grid-column:1;

    margin-bottom:7px;

    color:var(--orange);

    font-size:.72rem;
    font-weight:800;

    letter-spacing:.14em;
    text-transform:uppercase;
}

.v7-partners .partner-premium-bottom strong{
    grid-column:1;

    color:#fff;

    font-size:
        clamp(1.35rem,2vw,1.8rem);

    line-height:1.05;
}

.v7-partners .partner-go{
    grid-column:2;
    grid-row:1 / span 2;

    align-self:end;

    display:flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:50%;

    color:#fff;

    font-size:1.25rem;

    background:
        rgba(0,0,0,.32);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


/* HOVER */

.v7-partners .partner-premium:hover
.partner-premium-media{
    transform:scale(1.055);
}

.v7-partners .partner-premium:hover
.partner-go{
    background:var(--orange);
    border-color:var(--orange);
    transform:translate(2px,-2px);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px){

    .v7-partners .partner-premium{
        min-height:300px;
        border-radius:22px;
    }

    .v7-partners .partner-premium-media{
        background-position:center center;
    }

    .v7-partners .partner-premium-shade{
        background:
            linear-gradient(
                to top,
                rgba(5,5,5,.99) 0%,
                rgba(5,5,5,.80) 35%,
                rgba(5,5,5,.26) 72%,
                rgba(5,5,5,.12) 100%
            );
    }

    .v7-partners .partner-premium-logo{
        left:22px;
        top:22px;

        width:min(190px,58%);
        height:82px;
    }

    .v7-partners .partner-premium-bottom{
        padding:
            25px 22px 23px;
    }

    .v7-partners .partner-go{
        width:42px;
        height:42px;
    }

}



/* =========================================================
   HSU · PARTNER PREMIUM VISUAL V12.12
========================================================= */

.v7-partners .partner-premium{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    min-height:360px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:28px;

    background:#0a0a0a;

    box-shadow:
        0 24px 70px rgba(0,0,0,.30);
}


/* BACKGROUND IMAGE */

.v7-partners .partner-premium-media{
    position:absolute;
    inset:0;
    z-index:0;

    background-image:var(--partner-bg, none);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    transform:scale(1.01);

    transition:
        transform .6s ease;
}


/* DARK OVERLAY */

.v7-partners .partner-premium-shade{
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(5,5,5,.98) 0%,
            rgba(5,5,5,.78) 28%,
            rgba(5,5,5,.25) 65%,
            rgba(5,5,5,.12) 100%
        );
}


/* LOGO */

.v7-partners .partner-premium-logo{
    position:absolute;
    z-index:2;

    left:32px;
    top:30px;

    width:min(220px,52%);
    height:105px;

    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.v7-partners .partner-premium-logo img{
    display:block;

    width:auto;
    max-width:100%;

    height:auto;
    max-height:100%;

    object-fit:contain;

    filter:
        drop-shadow(
            0 4px 18px rgba(0,0,0,.55)
        );
}


/* BOTTOM INFORMATION */

.v7-partners .partner-premium-bottom{
    position:absolute;
    z-index:3;

    left:0;
    right:0;
    bottom:0;

    padding:
        32px 34px 30px;

    display:grid;

    grid-template-columns:
        1fr auto;

    align-items:end;
}

.v7-partners .partner-premium-bottom > span:first-child{
    grid-column:1;

    margin-bottom:7px;

    color:var(--orange);

    font-size:.72rem;
    font-weight:800;

    letter-spacing:.14em;
    text-transform:uppercase;
}

.v7-partners .partner-premium-bottom strong{
    grid-column:1;

    color:#fff;

    font-size:
        clamp(1.35rem,2vw,1.8rem);

    line-height:1.05;
}

.v7-partners .partner-go{
    grid-column:2;
    grid-row:1 / span 2;

    align-self:end;

    display:flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:50%;

    color:#fff;

    font-size:1.25rem;

    background:
        rgba(0,0,0,.32);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


/* HOVER */

.v7-partners .partner-premium:hover
.partner-premium-media{
    transform:scale(1.055);
}

.v7-partners .partner-premium:hover
.partner-go{
    background:var(--orange);
    border-color:var(--orange);
    transform:translate(2px,-2px);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px){

    .v7-partners .partner-premium{
        min-height:300px;
        border-radius:22px;
    }

    .v7-partners .partner-premium-media{
        background-position:center center;
    }

    .v7-partners .partner-premium-shade{
        background:
            linear-gradient(
                to top,
                rgba(5,5,5,.99) 0%,
                rgba(5,5,5,.80) 35%,
                rgba(5,5,5,.26) 72%,
                rgba(5,5,5,.12) 100%
            );
    }

    .v7-partners .partner-premium-logo{
        left:22px;
        top:22px;

        width:min(190px,58%);
        height:82px;
    }

    .v7-partners .partner-premium-bottom{
        padding:
            25px 22px 23px;
    }

    .v7-partners .partner-go{
        width:42px;
        height:42px;
    }

}



/* =========================================================
   HSU · VORSTAND HERO TYPOGRAPHY V12.13
========================================================= */

.board-hero-title{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    width:min(100%, 1450px);
    max-width:none;

    margin:22px 0 38px;

    line-height:.82;
    letter-spacing:-.065em;

    text-transform:uppercase;
}


/* jede Hauptzeile bleibt vollständig */

.board-title-line{
    display:block;

    white-space:nowrap;

    word-break:keep-all !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
}


/* Zeile 1 */

.board-title-white{
    color:#f5f2ec;

    font-size:
        clamp(4.8rem, 8.1vw, 9.4rem);
}


/* längere Zeile bewusst etwas kleiner */

.board-title-orange{
    margin-top:10px;

    color:var(--orange);

    font-size:
        clamp(4.15rem, 6.75vw, 7.8rem);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .board-title-white{
        font-size:
            clamp(4rem, 8vw, 6.7rem);
    }

    .board-title-orange{
        font-size:
            clamp(3.3rem, 6.65vw, 5.55rem);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px){

    .board-hero-title{
        width:100%;

        margin:
            18px 0 28px;

        line-height:.88;
        letter-spacing:-.055em;
    }

    .board-title-white{
        font-size:
            clamp(2.55rem, 12.3vw, 4rem);
    }

    /*
     * RESPONSIVE, aber kein Wortumbruch.
     * Verantwortliche bleibt immer zusammen.
     */
    .board-title-orange{
        margin-top:8px;

        font-size:
            clamp(1.95rem, 9.1vw, 3rem);
    }

}


/* sehr schmale Smartphones */

@media(max-width:390px){

    .board-title-white{
        font-size:2.45rem;
    }

    .board-title-orange{
        font-size:1.84rem;
        letter-spacing:-.06em;
    }

}



/* =========================================================
   HSU FANZONE V1
   ========================================================= */

.fanzone-hero{
    position:relative;
    overflow:hidden;
    min-height:620px;
    display:flex;
    align-items:center;
    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(255,105,0,.17),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #0b0b0b 55%,
            #15100c 100%
        );
}

.fanzone-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );
    background-size:70px 70px;
    mask-image:
        linear-gradient(
            to right,
            transparent,
            #000,
            transparent
        );
}

.fanzone-hero-glow{
    position:absolute;
    width:420px;
    height:420px;
    right:-100px;
    top:50%;
    transform:translateY(-50%);
    background:rgba(255,103,0,.18);
    filter:blur(110px);
    border-radius:50%;
}

.fanzone-hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    display:grid;
    grid-template-columns:
        minmax(0,1.25fr)
        minmax(320px,.75fr);
    gap:80px;
    align-items:center;
    padding-top:90px;
    padding-bottom:90px;
}

.fanzone-hero-copy h1{
    margin:14px 0 24px;
    max-width:760px;
    color:#fff;
    font-size:clamp(56px,7vw,104px);
    line-height:.88;
    letter-spacing:-.065em;
}

.fanzone-hero-copy .lead{
    max-width:600px;
    color:rgba(255,255,255,.68);
    font-size:19px;
    line-height:1.65;
}

.fanzone-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:34px;
}

.fanzone-hero-card{
    position:relative;
    min-height:390px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:34px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.015)
        );
    box-shadow:
        0 35px 90px rgba(0,0,0,.35);
}

.fanzone-hero-card::before{
    content:"";
    position:absolute;
    width:230px;
    height:230px;
    right:-65px;
    top:-70px;
    border:42px solid rgba(255,103,0,.11);
    border-radius:50%;
}

.fanzone-live-label{
    position:absolute;
    top:30px;
    left:30px;
    display:flex;
    align-items:center;
    gap:9px;
    color:rgba(255,255,255,.58);
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
}

.fanzone-live-label span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff6900;
    box-shadow:
        0 0 16px rgba(255,105,0,.8);
}

.fanzone-hero-mark{
    position:absolute;
    right:22px;
    top:64px;
    color:rgba(255,255,255,.035);
    font-size:150px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.09em;
}

.fanzone-hero-card strong{
    position:relative;
    color:#fff;
    font-size:32px;
    line-height:1.05;
    letter-spacing:-.035em;
}

.fanzone-hero-card p{
    position:relative;
    margin:14px 0 30px;
    max-width:320px;
    color:rgba(255,255,255,.55);
    line-height:1.55;
}

.fanzone-hero-card-bottom{
    position:relative;
    display:flex;
    justify-content:space-between;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.10);
    color:rgba(255,255,255,.38);
    font-size:10px;
    font-weight:800;
    letter-spacing:.14em;
}


/* PLAYER OF MATCH */

.fanzone-section{
    background:#f5f5f3;
}

.fanzone-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:42px;
}

.fanzone-section-heading h2,
.fanzone-module h2,
.fanzone-season h2,
.fanzone-community h2{
    margin:10px 0 0;
    font-size:clamp(42px,5vw,72px);
    line-height:.94;
    letter-spacing:-.055em;
}

.fanzone-status{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 14px;
    border-radius:999px;
    background:#e7e7e4;
    color:#6c6c68;
    font-size:11px;
    font-weight:850;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.fanzone-status span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#999;
}

.fanzone-status.is-open{
    background:#111;
    color:#fff;
}

.fanzone-status.is-open span{
    background:#ff6900;
}

.fanzone-closed-card{
    min-height:300px;
    display:grid;
    grid-template-columns:120px 1fr;
    gap:38px;
    align-items:center;
    padding:48px;
    border-radius:24px;
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:
        0 24px 60px rgba(0,0,0,.05);
}

.fanzone-closed-icon{
    width:110px;
    height:110px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#090909;
    color:#ff6900;
    font-size:44px;
}

.fanzone-closed-card h3{
    max-width:650px;
    margin:9px 0 12px;
    font-size:clamp(30px,4vw,48px);
    line-height:1;
    letter-spacing:-.04em;
}

.fanzone-closed-card p{
    max-width:670px;
    margin:0;
    color:#777;
    line-height:1.65;
}

.fanzone-player-grid{
    display:grid;
    grid-template-columns:
        repeat(5,minmax(0,1fr));
    gap:16px;
}

.fanzone-player-card{
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:
        0 15px 35px rgba(0,0,0,.06);
}

.fanzone-player-photo{
    position:relative;
    height:250px;
    overflow:hidden;
    background:#ddd;
}

.fanzone-player-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.fanzone-player-photo-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            transparent 55%,
            rgba(0,0,0,.35)
        );
}

.fanzone-player-info{
    padding:18px;
}

.fanzone-player-info > span{
    color:#ff6900;
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.fanzone-player-info h3{
    margin:5px 0 16px;
    font-size:20px;
    letter-spacing:-.025em;
}

.fanzone-vote-button{
    width:100%;
    padding:12px;
    border:0;
    border-radius:9px;
    background:#111;
    color:#fff;
    font-weight:800;
}


/* TIP + RANKING */

.fanzone-dark-section{
    background:#080808;
}

.fanzone-two-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.fanzone-module{
    min-height:560px;
    padding:38px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:24px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );
    color:#fff;
}

.fanzone-module-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:25px;
}

.fanzone-module-number{
    color:rgba(255,255,255,.12);
    font-size:58px;
    font-weight:950;
    letter-spacing:-.07em;
}

.fanzone-matchup{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        auto
        minmax(0,1fr);
    align-items:center;
    gap:20px;
    margin:55px 0 42px;
}

.fanzone-team{
    text-align:center;
}

.fanzone-team-logo,
.fanzone-opponent-placeholder{
    width:88px;
    height:88px;
    display:grid;
    place-items:center;
    margin:0 auto 14px;
    border-radius:50%;
    background:rgba(255,255,255,.07);
}

.fanzone-team-logo img{
    max-width:62px;
    max-height:62px;
}

.fanzone-opponent-placeholder{
    color:rgba(255,255,255,.35);
    font-size:32px;
    font-weight:900;
}

.fanzone-team strong{
    font-size:13px;
}

.fanzone-score-input{
    display:flex;
    align-items:center;
    gap:10px;
}

.fanzone-score-input div{
    width:48px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#fff;
    color:#111;
    font-size:26px;
    font-weight:900;
}

.fanzone-score-input span{
    color:#ff6900;
    font-size:22px;
    font-weight:900;
}

.fanzone-module-message{
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.10);
}

.fanzone-module-message strong{
    font-size:18px;
}

.fanzone-module-message p,
.fanzone-ranking-empty p{
    color:rgba(255,255,255,.48);
    line-height:1.6;
}

.fanzone-action-disabled{
    width:100%;
    margin-top:20px;
    padding:15px 18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.35);
    font-weight:800;
}

.fanzone-ranking-empty{
    padding:45px 0 25px;
    text-align:center;
}

.fanzone-trophy{
    margin-bottom:16px;
    font-size:48px;
}

.fanzone-ranking-empty h3{
    margin:0 auto;
    max-width:380px;
    font-size:28px;
    line-height:1.1;
}

.fanzone-ranking-empty p{
    max-width:430px;
    margin:14px auto 0;
}

.fanzone-ranking-preview{
    display:grid;
    gap:8px;
    margin-top:20px;
}

.fanzone-ranking-preview > div{
    display:grid;
    grid-template-columns:36px 1fr auto;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-radius:10px;
    background:rgba(255,255,255,.045);
}

.fanzone-ranking-preview span{
    color:#ff6900;
    font-weight:900;
}

.fanzone-ranking-preview small{
    color:rgba(255,255,255,.35);
    font-weight:800;
}


/* PLAYER OF SEASON */

.fanzone-season{
    background:#f5f5f3;
}

.fanzone-season-box{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:50px;
    align-items:center;
    padding:55px;
    border-radius:26px;
    background:#fff;
    box-shadow:
        0 25px 70px rgba(0,0,0,.055);
}

.fanzone-season-box p{
    max-width:640px;
    color:#747474;
    line-height:1.65;
}

.fanzone-season-placeholder{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:#0a0a0a;
    color:#fff;
}

.fanzone-season-placeholder span{
    color:#ff6900;
    font-size:12px;
    font-weight:900;
    letter-spacing:.2em;
}

.fanzone-season-placeholder strong{
    margin-top:4px;
    font-size:48px;
    letter-spacing:-.06em;
}


/* COMMUNITY */

.fanzone-community{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(255,105,0,.18),
            transparent 38%
        ),
        #070707;
    color:#fff;
}

.fanzone-community-inner{
    max-width:850px;
    margin:auto;
    padding:40px 0;
    text-align:center;
}

.fanzone-community h2{
    margin-top:14px;
}

.fanzone-community p{
    max-width:650px;
    margin:22px auto 30px;
    color:rgba(255,255,255,.55);
    line-height:1.7;
}


/* TABLET */

@media(max-width:900px){

    .fanzone-hero-inner{
        grid-template-columns:1fr;
        gap:40px;
    }

    .fanzone-hero-card{
        min-height:310px;
    }

    .fanzone-player-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .fanzone-two-column{
        grid-template-columns:1fr;
    }

}


/* MOBILE */

@media(max-width:620px){

    .fanzone-hero{
        min-height:auto;
    }

    .fanzone-hero-inner{
        padding-top:70px;
        padding-bottom:55px;
    }

    .fanzone-hero-copy h1{
        font-size:clamp(48px,15vw,68px);
        line-height:.91;
    }

    .fanzone-hero-copy .lead{
        font-size:16px;
    }

    .fanzone-hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .fanzone-hero-actions .button{
        width:100%;
        justify-content:center;
    }

    .fanzone-hero-card{
        min-height:300px;
        padding:26px;
        border-radius:19px;
    }

    .fanzone-hero-card strong{
        font-size:28px;
    }

    .fanzone-section-heading{
        display:block;
    }

    .fanzone-status{
        width:max-content;
        margin-top:20px;
    }

    .fanzone-section-heading h2,
    .fanzone-module h2,
    .fanzone-season h2,
    .fanzone-community h2{
        font-size:clamp(39px,12vw,55px);
    }

    .fanzone-closed-card{
        grid-template-columns:1fr;
        gap:25px;
        padding:28px;
    }

    .fanzone-closed-icon{
        width:76px;
        height:76px;
        font-size:30px;
    }

    .fanzone-player-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .fanzone-player-photo{
        height:210px;
    }

    .fanzone-module{
        min-height:auto;
        padding:26px;
    }

    .fanzone-module-number{
        font-size:42px;
    }

    .fanzone-matchup{
        gap:9px;
        margin:40px 0 32px;
    }

    .fanzone-team-logo,
    .fanzone-opponent-placeholder{
        width:66px;
        height:66px;
    }

    .fanzone-team-logo img{
        max-width:48px;
        max-height:48px;
    }

    .fanzone-score-input{
        gap:5px;
    }

    .fanzone-score-input div{
        width:38px;
        height:49px;
        font-size:22px;
    }

    .fanzone-team strong{
        font-size:11px;
    }

    .fanzone-season-box{
        grid-template-columns:1fr;
        gap:30px;
        padding:28px;
    }

    .fanzone-season-placeholder{
        min-height:170px;
    }

    .fanzone-season-placeholder strong{
        font-size:40px;
    }

}

@media(max-width:390px){

    .fanzone-player-grid{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   HSU FANZONE AUTH V1
========================================================= */

.fan-auth-page{
    min-height:calc(100vh - 90px);
    display:flex;
    align-items:center;
    padding:90px 0;
    background:
        radial-gradient(
            circle at 18% 40%,
            rgba(255,105,0,.14),
            transparent 30%
        ),
        #080808;
    color:#fff;
}

.fan-auth-shell{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(390px,.75fr);
    gap:90px;
    align-items:center;
}

.fan-auth-copy h1{
    margin:14px 0 25px;
    font-size:clamp(58px,7vw,105px);
    line-height:.88;
    letter-spacing:-.065em;
}

.fan-auth-copy > p{
    max-width:580px;
    color:rgba(255,255,255,.58);
    font-size:18px;
    line-height:1.7;
}

.fan-auth-benefits{
    display:flex;
    gap:10px;
    margin-top:38px;
}

.fan-auth-benefits div{
    min-width:130px;
    padding:18px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:rgba(255,255,255,.035);
}

.fan-auth-benefits strong{
    display:block;
    color:#ff6900;
    font-size:22px;
}

.fan-auth-benefits span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.46);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.fan-auth-card{
    padding:38px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.018)
        );
    box-shadow:
        0 35px 90px rgba(0,0,0,.35);
}

.fan-auth-card h2{
    margin:8px 0 12px;
    font-size:36px;
    letter-spacing:-.04em;
}

.fan-auth-intro{
    margin-bottom:28px;
    color:rgba(255,255,255,.52);
    line-height:1.6;
}

.fan-auth-form{
    display:grid;
    gap:18px;
}

.fan-auth-form label{
    display:grid;
    gap:8px;
}

.fan-auth-form label > span{
    color:rgba(255,255,255,.72);
    font-size:12px;
    font-weight:800;
}

.fan-auth-form input[type="text"],
.fan-auth-form input[type="email"]{
    width:100%;
    min-height:52px;
    padding:0 15px;
    border:
        1px solid rgba(255,255,255,.12);
    border-radius:10px;
    outline:none;
    background:rgba(0,0,0,.28);
    color:#fff;
    font:inherit;
}

.fan-auth-form input:focus{
    border-color:#ff6900;
}

.fan-auth-form small{
    color:rgba(255,255,255,.36);
    line-height:1.45;
}

.fan-auth-name-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.fan-auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:3px 0;
    color:rgba(255,255,255,.28);
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.fan-auth-divider::before,
.fan-auth-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:rgba(255,255,255,.09);
}

.fan-auth-check{
    grid-template-columns:auto 1fr !important;
    align-items:flex-start;
    gap:10px !important;
}

.fan-auth-check input{
    margin-top:3px;
}

.fan-auth-check span{
    font-weight:500 !important;
    line-height:1.5;
}

.fan-auth-check a{
    color:#ff6900;
}

.fan-auth-submit{
    width:100%;
    justify-content:center;
    margin-top:4px;
}

.fan-auth-message{
    margin:20px 0;
    padding:14px 16px;
    border-radius:10px;
    font-size:13px;
    line-height:1.5;
}

.fan-auth-message.success{
    border:1px solid rgba(58,205,122,.35);
    background:rgba(58,205,122,.10);
}

.fan-auth-message.error{
    border:1px solid rgba(255,83,83,.35);
    background:rgba(255,83,83,.10);
}

.fan-auth-note{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.42);
    font-size:12px;
    line-height:1.55;
}

.fan-auth-note strong{
    color:#fff;
}

.fan-auth-simple{
    max-width:760px;
}

.fan-auth-simple h1{
    margin:13px 0 25px;
    font-size:clamp(52px,7vw,90px);
    line-height:.9;
}

.fan-auth-simple p{
    margin-bottom:30px;
    color:rgba(255,255,255,.58);
}

.fanzone-user-welcome{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-top:25px;
}

.fanzone-user-welcome span{
    color:rgba(255,255,255,.35);
    font-size:10px;
    font-weight:850;
    letter-spacing:.12em;
}

.fanzone-user-welcome strong{
    color:#ff6900;
}

.fanzone-user-welcome small{
    color:rgba(255,255,255,.38);
}


@media(max-width:900px){

    .fan-auth-shell{
        grid-template-columns:1fr;
        gap:45px;
    }

}


@media(max-width:620px){

    .fan-auth-page{
        padding:60px 0;
    }

    .fan-auth-copy h1{
        font-size:clamp(50px,15vw,68px);
    }

    .fan-auth-benefits{
        display:grid;
        grid-template-columns:
            repeat(3,1fr);
    }

    .fan-auth-benefits div{
        min-width:0;
        padding:13px;
    }

    .fan-auth-card{
        padding:25px;
        border-radius:19px;
    }

    .fan-auth-name-grid{
        grid-template-columns:1fr;
    }

    .fanzone-user-welcome{
        flex-wrap:wrap;
    }

}


/* =========================================================
   HSU FANZONE AUTH TABS V12.16
========================================================= */

.fan-auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;

    margin:
        22px 0 24px;

    padding:5px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:12px;

    background:
        rgba(0,0,0,.26);
}

.fan-auth-tabs a{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:46px;

    padding:
        10px 14px;

    border-radius:8px;

    color:
        rgba(255,255,255,.48);

    font-size:.78rem;
    font-weight:850;

    letter-spacing:.06em;
    text-transform:uppercase;

    transition:
        background .2s ease,
        color .2s ease;
}

.fan-auth-tabs a:hover{
    color:#fff;
}

.fan-auth-tabs a.active{
    background:#fff;
    color:#090909;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.22);
}

.fan-auth-note a{
    color:#ff6900;
    font-weight:800;
}

@media(max-width:390px){

    .fan-auth-tabs a{
        font-size:.68rem;
        padding:
            10px 8px;
    }

}



/* =========================================================
   HSU FANZONE PASSWORD AUTH V12.17
========================================================= */

.fan-auth-form input[type="password"]{
    width:100%;
    min-height:52px;

    padding:
        0 15px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:10px;

    outline:none;

    background:
        rgba(0,0,0,.28);

    color:#fff;

    font:inherit;
}

.fan-auth-form input[type="password"]:focus{
    border-color:#ff6900;
}

.fan-auth-links{
    display:flex;
    justify-content:space-between;
    gap:20px;

    margin-top:24px;

    padding-top:20px;

    border-top:
        1px solid rgba(255,255,255,.08);
}

.fan-auth-links a,
.fan-auth-back a{
    color:#ff6900;
    font-size:.82rem;
    font-weight:800;
}

.fan-auth-recovery{
    max-width:520px;
    margin-top:30px;
}

.fan-auth-back{
    margin-top:25px;
}

@media(max-width:620px){

    .fan-auth-links{
        flex-direction:column;
        gap:10px;
    }

}



/* =========================================================
   HSU WORLD ACCOUNT V12.18
========================================================= */

.fanzone-user-name{
    color:#ff6900;
    font-weight:900;
    text-decoration:none;
}

.fanzone-user-name:hover{
    color:#fff;
}

.fanzone-user-points{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:7px 10px;

    border:
        1px solid rgba(255,105,0,.25);

    border-radius:999px;

    background:
        rgba(255,105,0,.09);

    text-decoration:none;
}

.fanzone-user-points strong{
    color:#ff6900;
    font-size:14px;
}

.fanzone-user-points span{
    color:rgba(255,255,255,.55);
    font-size:9px;
    font-weight:850;
    letter-spacing:.08em;
}

.fanzone-account-link{
    color:rgba(255,255,255,.58);
    font-size:11px;
    font-weight:800;
    text-decoration:none;
}

.fanzone-account-link:hover{
    color:#fff;
}


.fan-account-hero{
    padding:
        clamp(80px,10vw,145px)
        0
        70px;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(255,105,0,.16),
            transparent 32%
        ),
        #080808;

    color:#fff;
}

.fan-account-top{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:60px;
    align-items:end;
}

.fan-account-top h1{
    margin:12px 0 20px;

    font-size:
        clamp(58px,8vw,112px);

    line-height:.88;
    letter-spacing:-.065em;
}

.fan-account-top p{
    max-width:520px;

    color:
        rgba(255,255,255,.55);

    font-size:18px;
    line-height:1.65;
}

.fan-account-points{
    min-width:220px;

    padding:26px;

    border:
        1px solid rgba(255,105,0,.25);

    border-radius:20px;

    background:
        rgba(255,105,0,.08);
}

.fan-account-points > span{
    display:block;

    color:
        rgba(255,255,255,.45);

    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}

.fan-account-points strong{
    display:block;

    margin:8px 0 2px;

    color:#ff6900;

    font-size:58px;
    line-height:1;
}

.fan-account-points small{
    color:
        rgba(255,255,255,.42);
}

.fan-account-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:16px;
}

.fan-account-card{
    min-height:220px;

    padding:28px;

    border:
        1px solid rgba(0,0,0,.08);

    border-radius:20px;

    background:#fff;
}

.fan-account-card h2{
    margin:25px 0 14px;

    font-size:48px;
    line-height:1;
}

.fan-account-card h2 span{
    font-size:13px;
    color:#ff6900;
}

.fan-account-card p{
    color:#6f6f6f;
    line-height:1.6;
}

.fan-account-card-points{
    background:#0a0a0a;
    color:#fff;
}

.fan-account-card-points p{
    color:
        rgba(255,255,255,.5);
}

.fan-account-actions{
    display:flex;
    gap:12px;
    margin-top:35px;
}

.fan-points-explainer{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:15px;
}

.fan-points-explainer > div{
    padding:32px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:18px;

    background:
        rgba(255,255,255,.035);
}

.fan-points-explainer strong{
    display:block;

    color:#ff6900;

    font-size:30px;
}

.fan-points-explainer span{
    display:block;

    margin-top:6px;

    color:
        rgba(255,255,255,.48);
}


@media(max-width:1000px){

    .fan-account-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:700px){

    .fan-account-top{
        grid-template-columns:1fr;
        gap:30px;
    }

    .fan-account-points{
        min-width:0;
    }

    .fan-account-grid,
    .fan-points-explainer{
        grid-template-columns:1fr;
    }

    .fanzone-user-welcome{
        gap:8px 12px;
    }

}



/* =========================================================
   HSU FANZONE · REAL TIP GAME V13
========================================================= */

.fanzone-tip-intro{
    max-width:650px;
    margin-top:14px;
    color:rgba(255,255,255,.5);
    line-height:1.65;
}

.fanzone-score-rules{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.fanzone-score-rules span{
    display:flex;
    align-items:center;
    gap:7px;

    padding:8px 13px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;

    color:rgba(255,255,255,.55);

    font-size:11px;
    font-weight:800;
}

.fanzone-score-rules strong{
    color:#ff6900;
    font-size:14px;
}

.fanzone-tip-message{
    margin:25px 0;

    padding:16px 18px;

    border-radius:12px;

    font-weight:750;
}

.fanzone-tip-message.success{
    background:rgba(40,180,90,.12);
    border:1px solid rgba(40,180,90,.25);
    color:#9ee1b7;
}

.fanzone-tip-message.error{
    background:rgba(220,70,70,.12);
    border:1px solid rgba(220,70,70,.25);
    color:#efaaaa;
}

.fanzone-tip-games{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:22px;
}

.fanzone-tip-game{
    padding:30px;

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:22px;

    background:
        rgba(255,255,255,.035);
}

.fanzone-match-waiting{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:20px;
    align-items:center;

    min-height:200px;
    margin:25px 0;

    padding:25px;

    border:
        1px dashed rgba(255,255,255,.12);

    border-radius:16px;
}

.fanzone-match-waiting-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:62px;
    height:62px;

    border-radius:50%;

    background:
        rgba(255,105,0,.1);

    color:#ff6900;

    font-weight:950;
}

.fanzone-match-waiting h3{
    margin:5px 0 10px;
    color:#fff;
    font-size:22px;
}

.fanzone-match-waiting p{
    color:rgba(255,255,255,.45);
    line-height:1.55;
}

.fanzone-match-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;

    margin:22px 0 18px;

    color:rgba(255,255,255,.4);

    font-size:10px;
    font-weight:900;
    letter-spacing:.09em;
}

.fanzone-real-matchup{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:15px;

    padding:22px 0;
}

.fanzone-real-team{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;

    text-align:center;
}

.fanzone-real-team img,
.fanzone-real-team .fanzone-opponent-placeholder{
    width:70px;
    height:70px;
    object-fit:contain;
}

.fanzone-real-team strong{
    color:#fff;
    font-size:16px;
}

.fanzone-versus{
    color:rgba(255,255,255,.22);

    font-size:11px;
    font-weight:950;
}

.fanzone-deadline{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;

    padding:13px 0;

    border-top:
        1px solid rgba(255,255,255,.07);

    border-bottom:
        1px solid rgba(255,255,255,.07);

    font-size:11px;
}

.fanzone-deadline span{
    color:rgba(255,255,255,.35);
    font-weight:900;
}

.fanzone-deadline strong{
    color:#fff;
}

.fanzone-real-tip-form{
    display:grid;
    gap:17px;
    margin-top:23px;
}

.fanzone-score-select{
    display:grid;
    gap:8px;
}

.fanzone-score-select > span,
.fanzone-decider > span{
    color:rgba(255,255,255,.55);

    font-size:11px;
    font-weight:850;
}

.fanzone-score-select select{
    width:100%;

    padding:14px 15px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:12px;

    background:#151515;
    color:#fff;

    font:inherit;
    font-weight:800;
}

.fanzone-decider{
    display:grid;
    gap:9px;

    padding:15px;

    border:
        1px solid rgba(255,105,0,.18);

    border-radius:13px;

    background:
        rgba(255,105,0,.06);
}

.fanzone-decider[hidden]{
    display:none;
}

.fanzone-decider label{
    display:flex;
    align-items:center;
    gap:9px;

    color:#fff;

    cursor:pointer;
}

.fanzone-current-tip{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:5px 12px;

    padding:14px;

    border-radius:12px;

    background:
        rgba(255,255,255,.05);
}

.fanzone-current-tip span{
    color:rgba(255,255,255,.38);

    font-size:9px;
    font-weight:900;
}

.fanzone-current-tip strong{
    color:#ff6900;
    font-size:22px;
}

.fanzone-current-tip small{
    grid-column:1 / -1;

    color:
        rgba(255,255,255,.48);
}

.fanzone-tip-closed,
.fanzone-login-required{
    margin-top:22px;

    padding:18px;

    border-radius:13px;

    background:
        rgba(255,255,255,.04);
}

.fanzone-tip-closed strong{
    color:#fff;
}

.fanzone-tip-closed p,
.fanzone-login-required p{
    margin:7px 0 0;

    color:
        rgba(255,255,255,.45);
}

.fanzone-login-required{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.fanzone-team-ranking{
    margin-top:28px;

    padding-top:22px;

    border-top:
        1px solid rgba(255,255,255,.08);
}

.fanzone-ranking-head{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:15px;
}

.fanzone-ranking-head span{
    color:
        rgba(255,255,255,.35);

    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.fanzone-ranking-head strong{
    color:#fff;
    font-size:12px;
}

.fanzone-ranking-empty-small{
    padding:14px 0;

    color:
        rgba(255,255,255,.35);
}

.fanzone-ranking-list{
    display:grid;
}

.fanzone-ranking-row{
    display:grid;

    grid-template-columns:
        28px
        minmax(0,1fr)
        auto
        auto;

    gap:10px;
    align-items:center;

    padding:11px 0;

    border-bottom:
        1px solid rgba(255,255,255,.05);
}

.fanzone-ranking-row strong{
    color:#fff;
}

.fanzone-ranking-row > span:not(.fanzone-rank-position){
    color:#ff6900;
    font-weight:900;
}

.fanzone-ranking-row small{
    color:
        rgba(255,255,255,.32);
}

.fanzone-rank-position{
    color:
        rgba(255,255,255,.3);

    font-size:11px;
    font-weight:900;
}


@media(max-width:900px){

    .fanzone-tip-games{
        grid-template-columns:1fr;
    }

}


@media(max-width:600px){

    .fanzone-tip-game{
        padding:20px;
    }

    .fanzone-real-team img,
    .fanzone-real-team .fanzone-opponent-placeholder{
        width:55px;
        height:55px;
    }

    .fanzone-login-required{
        align-items:flex-start;
        flex-direction:column;
    }

}



/* =========================================================
   HSU WORLD · ACCOUNT STATS V14
========================================================= */

.fan-world-stats-v2{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:14px;

    margin-top:28px;
}

.fan-world-stat-v2{
    padding:20px;

    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;

    background:#f7f7f7;
}

.fan-world-stat-v2 > span{
    display:block;

    color:#888;

    font-size:9px;
    font-weight:900;
    letter-spacing:.11em;
}

.fan-world-stat-v2 strong{
    display:block;

    margin:8px 0 3px;

    color:#111;

    font-size:32px;
    line-height:1;
}

.fan-world-stat-v2 small{
    color:#888;
}


.fan-world-history{
    margin-top:28px;

    padding:26px;

    border:
        1px solid rgba(0,0,0,.08);

    border-radius:20px;

    background:#fff;
}

.fan-world-history-head{
    margin-bottom:18px;
}

.fan-world-history-head h2{
    margin:5px 0 0;

    font-size:
        clamp(26px,4vw,42px);
}

.fan-world-history-list{
    display:grid;
}

.fan-world-history-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    padding:13px 0;

    border-bottom:
        1px solid rgba(0,0,0,.06);
}

.fan-world-history-row:last-child{
    border-bottom:0;
}

.fan-world-history-row div{
    display:grid;
    gap:3px;
}

.fan-world-history-row strong{
    color:#161616;
}

.fan-world-history-row small{
    color:#999;
    font-size:11px;
}

.fan-world-history-row > span{
    font-weight:950;
    font-size:16px;
}

.fan-world-history-row > span.plus{
    color:#ff6900;
}

.fan-world-history-row > span.minus{
    color:#b32626;
}

.fan-world-history-empty{
    color:#888;
}


@media(max-width:850px){

    .fan-world-stats-v2{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:520px){

    .fan-world-stats-v2{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   HSU FANZONE · POTM V2
========================================================= */

.fanzone-potm-intro{
    max-width:620px;
    margin-top:14px;
    color:#777;
    line-height:1.65;
}

.fanzone-potm-points{
    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 15px;

    border:1px solid rgba(255,105,0,.18);
    border-radius:999px;

    background:rgba(255,105,0,.06);
}

.fanzone-potm-points strong{
    color:#ff6900;
    font-size:22px;
    line-height:1;
}

.fanzone-potm-points span{
    max-width:78px;

    color:#777;

    font-size:9px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:.07em;
}


.fanzone-potm-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;
    margin-top:32px;
}

.fanzone-potm-team{
    padding:28px;

    border:1px solid rgba(0,0,0,.08);
    border-radius:22px;

    background:#fff;
}

.fanzone-potm-team .fanzone-module-top h3{
    margin:5px 0 0;

    font-size:
        clamp(28px,4vw,44px);

    line-height:.95;
    letter-spacing:-.04em;
}

.fanzone-potm-team-badge{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border-radius:50%;

    background:#111;
    color:#ff6900;

    font-size:18px;
}


.fanzone-potm-empty{
    margin-top:26px;
    padding:25px;

    border:1px dashed rgba(0,0,0,.12);
    border-radius:16px;

    background:#fafafa;
}

.fanzone-potm-empty h4{
    margin:12px 0 8px;

    font-size:22px;
    line-height:1.1;
}

.fanzone-potm-empty p{
    margin:0;

    color:#777;
    line-height:1.6;
}


.fanzone-potm-status{
    display:inline-flex;

    padding:6px 9px;

    border-radius:999px;

    background:#eee;
    color:#777;

    font-size:9px;
    font-weight:950;
    letter-spacing:.09em;
}

.fanzone-potm-status.open{
    background:rgba(255,105,0,.11);
    color:#ff6900;
}

.fanzone-potm-status.finished{
    background:#111;
    color:#fff;
}


.fanzone-potm-live{
    margin-top:25px;
}

.fanzone-potm-live-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.fanzone-potm-live-head small{
    color:#999;
}

.fanzone-potm-result-context{
    margin:14px 0 18px;

    color:#888;
    font-size:12px;
}


.fanzone-potm-form{
    display:grid;
    gap:20px;
}

.fanzone-potm-players{
    display:grid;
    gap:10px;
}

.fanzone-potm-player{
    display:block;
    cursor:pointer;
}

.fanzone-potm-player > input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.fanzone-potm-player-card{
    display:grid;

    grid-template-columns:
        56px
        minmax(0,1fr)
        auto;

    gap:14px;
    align-items:center;

    padding:10px;

    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.fanzone-potm-player-card img{
    width:56px;
    height:56px;

    object-fit:cover;

    border-radius:11px;

    background:#eee;
}

.fanzone-potm-player-card > div{
    display:grid;
    gap:2px;
}

.fanzone-potm-player-card strong{
    color:#111;
    font-size:15px;
}

.fanzone-potm-player-card small{
    color:#999;
    font-size:11px;
}

.fanzone-potm-select{
    padding:6px 9px;

    border-radius:999px;

    background:#f1f1f1;
    color:#777;

    font-size:8px;
    font-weight:950;
    letter-spacing:.08em;
}

.fanzone-potm-player:hover
.fanzone-potm-player-card{
    border-color:rgba(255,105,0,.35);
    transform:translateY(-1px);
}

.fanzone-potm-player > input:checked
+ .fanzone-potm-player-card{
    border-color:#ff6900;
    background:rgba(255,105,0,.055);
}

.fanzone-potm-player > input:checked
+ .fanzone-potm-player-card
.fanzone-potm-select{
    background:#ff6900;
    color:#fff;
}

.fanzone-potm-submit{
    width:100%;
}


.fanzone-potm-voted{
    display:grid;
    justify-items:center;

    margin-top:18px;
    padding:24px;

    border-radius:17px;

    background:#f7f7f7;

    text-align:center;
}

.fanzone-potm-voted > span{
    color:#999;

    font-size:9px;
    font-weight:950;
    letter-spacing:.1em;
}

.fanzone-potm-voted img{
    width:100px;
    height:100px;

    margin:16px 0 10px;

    object-fit:cover;

    border-radius:50%;

    background:#eee;
}

.fanzone-potm-voted strong{
    font-size:24px;
}

.fanzone-potm-voted small{
    margin-top:3px;
    color:#888;
}

.fanzone-potm-voted p{
    max-width:310px;

    margin:15px 0 0;

    color:#888;
    line-height:1.5;
}


.fanzone-potm-winners{
    display:grid;
    gap:14px;
    margin-top:18px;
}

.fanzone-potm-winner{
    display:grid;
    justify-items:center;

    padding:22px;

    border-radius:18px;

    background:#0b0b0b;
    color:#fff;

    text-align:center;
}

.fanzone-potm-winner img{
    width:110px;
    height:110px;

    object-fit:cover;

    border-radius:50%;

    background:#222;
}

.fanzone-potm-winner > span{
    margin-top:15px;

    color:#ff6900;

    font-size:9px;
    font-weight:950;
    letter-spacing:.1em;
}

.fanzone-potm-winner strong{
    margin-top:5px;

    font-size:27px;
}

.fanzone-potm-winner small{
    color:rgba(255,255,255,.48);
}

.fanzone-potm-winner div{
    margin-top:12px;

    padding:6px 9px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    color:rgba(255,255,255,.65);

    font-size:10px;
    font-weight:850;
}


@media(max-width:900px){

    .fanzone-potm-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:600px){

    .fanzone-potm-team{
        padding:20px;
    }

    .fanzone-potm-player-card{
        grid-template-columns:
            50px
            minmax(0,1fr);
    }

    .fanzone-potm-player-card img{
        width:50px;
        height:50px;
    }

    .fanzone-potm-select{
        grid-column:1 / -1;
        justify-self:start;
    }

}



/* =========================================================
   HSU FANZONE · PLAYER OF THE SEASON V16
========================================================= */

.fanzone-season-potm{
    background:#f6f6f6;
}

.fanzone-season-potm-intro{
    max-width:650px;
    margin-top:14px;
    color:#777;
    line-height:1.65;
}

.fanzone-season-potm-badge{
    display:flex;
    align-items:center;
    justify-content:center;

    width:52px;
    height:52px;

    border-radius:50%;

    background:#111;
    color:#ff6900;

    font-size:22px;
}

.fanzone-season-potm-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;
    margin-top:30px;
}

.fanzone-season-potm-card{
    padding:28px;

    border:1px solid rgba(0,0,0,.08);
    border-radius:22px;

    background:#fff;
}

.fanzone-season-potm-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.fanzone-season-potm-head h3{
    margin:5px 0 0;

    font-size:
        clamp(28px,4vw,42px);

    line-height:.95;
    letter-spacing:-.04em;
}

.fanzone-season-potm-head > span{
    padding:6px 9px;

    border-radius:999px;

    background:#111;
    color:#fff;

    font-size:8px;
    font-weight:950;
    letter-spacing:.1em;
}

.fanzone-season-potm-empty{
    margin-top:25px;
    padding:24px;

    border:1px dashed rgba(0,0,0,.12);
    border-radius:16px;

    background:#fafafa;
}

.fanzone-season-potm-empty strong{
    display:block;

    font-size:20px;
    color:#111;
}

.fanzone-season-potm-empty p{
    margin:8px 0 0;

    color:#777;
    line-height:1.6;
}

.fanzone-season-potm-list{
    display:grid;
    margin-top:22px;
}

.fanzone-season-potm-row{
    display:grid;

    grid-template-columns:
        30px
        minmax(0,1fr)
        auto;

    gap:14px;
    align-items:center;

    padding:12px 0;

    border-bottom:
        1px solid rgba(0,0,0,.06);
}

.fanzone-season-potm-row:last-child{
    border-bottom:0;
}

.fanzone-season-potm-position{
    color:#aaa;

    font-size:12px;
    font-weight:950;
}

.fanzone-season-potm-player{
    display:grid;

    grid-template-columns:
        48px
        minmax(0,1fr);

    gap:11px;
    align-items:center;
}

.fanzone-season-potm-player img{
    width:48px;
    height:48px;

    object-fit:cover;

    border-radius:50%;

    background:#eee;
}

.fanzone-season-potm-player > div{
    display:grid;
    gap:2px;
}

.fanzone-season-potm-player strong{
    color:#111;
    font-size:14px;
}

.fanzone-season-potm-player small{
    color:#999;
    font-size:10px;
}

.fanzone-season-potm-stats{
    display:flex;
    gap:15px;
}

.fanzone-season-potm-stats > div{
    display:grid;
    justify-items:end;
}

.fanzone-season-potm-stats strong{
    color:#111;
    font-size:18px;
}

.fanzone-season-potm-stats span{
    color:#aaa;

    font-size:7px;
    font-weight:950;
    letter-spacing:.08em;
}

.fanzone-season-potm-note{
    margin-top:18px;

    padding-top:14px;

    border-top:
        1px solid rgba(0,0,0,.06);

    color:#999;

    font-size:10px;
}

.fanzone-season-potm-note strong{
    color:#666;
}


@media(max-width:900px){

    .fanzone-season-potm-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:560px){

    .fanzone-season-potm-card{
        padding:20px;
    }

    .fanzone-season-potm-row{
        grid-template-columns:
            24px
            minmax(0,1fr);
    }

    .fanzone-season-potm-stats{
        grid-column:2;
        justify-content:flex-start;
    }

    .fanzone-season-potm-stats > div{
        justify-items:start;
    }

}



/* =========================================================
   HSU FANZONE · STEP 11
   LIGHT SECTION CONTRAST FIX
========================================================= */

.fanzone-section,
.fanzone-season-potm{
    color:#111;
}

.fanzone-section .fanzone-section-heading h2,
.fanzone-season-potm .fanzone-section-heading h2{
    color:#111;
}

.fanzone-section .fanzone-section-heading h2 .orange,
.fanzone-season-potm .fanzone-section-heading h2 .orange{
    color:#ff6900;
}

.fanzone-potm-section .fanzone-module-top h3,
.fanzone-season-potm-head h3{
    color:#111;
}

.fanzone-potm-section .fanzone-potm-intro,
.fanzone-season-potm-intro{
    color:#666;
}

.fanzone-potm-section .eyebrow,
.fanzone-season-potm .eyebrow{
    color:#ff6900;
}

.fanzone-potm-section .fanzone-potm-empty h4{
    color:#111;
}

.fanzone-potm-section .fanzone-potm-empty p{
    color:#777;
}


/*
 * Alte globale Fanzone-Regeln setzen große Überschriften
 * teilweise auf Weiß. In den hellen POTM-/Season-Flächen
 * müssen sie ausdrücklich dunkel sein.
 */

body .fanzone-potm-section h2,
body .fanzone-potm-section h3,
body .fanzone-potm-section h4,
body .fanzone-season-potm h2,
body .fanzone-season-potm-head h3{
    color:#111;
}

body .fanzone-potm-section h2 .orange,
body .fanzone-season-potm h2 .orange{
    color:#ff6900;
}



/* =========================================================
   HSU FANZONE · CONTRAST FINAL V17.1
========================================================= */

/*
 * Helle Fanzone-Bereiche:
 * Headlines immer dunkel.
 */

body .fanzone-potm-section
.fanzone-section-heading h2,

body .fanzone-season-potm
.fanzone-section-heading h2,

body .fanzone-potm-section
.fanzone-module-top h3,

body .fanzone-season-potm
.fanzone-season-potm-head h3{

    color:#111 !important;
}


/*
 * Orange Highlights ausdrücklich erhalten.
 */

body .fanzone-potm-section
.fanzone-section-heading h2 .orange,

body .fanzone-season-potm
.fanzone-section-heading h2 .orange{

    color:#ff6900 !important;
}


/*
 * Karten.
 */

body .fanzone-potm-team{
    color:#111;
}

body .fanzone-potm-empty h4{
    color:#111 !important;
}

body .fanzone-potm-empty p{
    color:#6d6d6d !important;
}

body .fanzone-potm-intro,
body .fanzone-season-potm-intro{
    color:#666 !important;
}


/*
 * Eyebrows auf hellen Bereichen.
 */

body .fanzone-potm-section .eyebrow,
body .fanzone-season-potm .eyebrow{
    color:#f36a0a !important;
}



/* =========================================================
   HSU WORLD · POINTS CENTER V2
========================================================= */

.fan-points-center-v2{
    margin:42px 0;
    padding:38px;
    background:#111;
    color:#fff;
    border-radius:28px;
    overflow:hidden;
    position:relative;
}

.fan-points-center-v2::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-100px;
    top:-120px;
    border-radius:50%;
    background:rgba(255,105,0,.12);
}

.fan-points-center-head{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    gap:40px;
    align-items:center;
    margin-bottom:30px;
}

.fan-points-center-head h2{
    margin:5px 0 10px;
    color:#fff;
    font-size:clamp(30px,4vw,48px);
    line-height:1;
}

.fan-points-center-head p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.68);
    line-height:1.7;
}

.fan-points-balance-v2{
    min-width:190px;
    padding:22px 26px;
    background:#ff6900;
    border-radius:20px;
    text-align:center;
    color:#fff;
}

.fan-points-balance-v2 span{
    display:block;
    font-size:11px;
    font-weight:900;
    letter-spacing:.13em;
}

.fan-points-balance-v2 strong{
    display:block;
    margin:3px 0;
    font-size:52px;
    line-height:1;
}

.fan-points-balance-v2 small{
    font-size:12px;
    font-weight:800;
}

.fan-points-earn-grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.fan-points-earn-card{
    padding:22px;
    background:#fff;
    color:#111;
    border-radius:18px;
}

.fan-points-icon{
    display:flex;
    width:34px;
    height:34px;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:50%;
    background:#111;
    color:#fff;
    font-weight:900;
}

.fan-points-earn-card > strong{
    display:block;
    color:#ff6900;
    font-size:32px;
    line-height:1;
}

.fan-points-earn-card h3{
    margin:7px 0 7px;
    color:#111;
    font-size:17px;
}

.fan-points-earn-card p{
    margin:0;
    color:#666;
    font-size:13px;
    line-height:1.55;
}

.fan-points-reward-preview{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    gap:30px;
    align-items:center;
    margin-top:18px;
    padding:26px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
}

.fan-points-reward-preview h3{
    margin:4px 0 7px;
    color:#fff;
    font-size:23px;
}

.fan-points-reward-preview p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.65);
    line-height:1.6;
}

.fan-points-reward-lock{
    min-width:130px;
    text-align:center;
}

.fan-points-reward-lock span,
.fan-points-reward-lock small{
    display:block;
    color:rgba(255,255,255,.55);
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}

.fan-points-reward-lock strong{
    display:block;
    color:#ff6900;
    font-size:27px;
}

.fan-points-legal-note{
    position:relative;
    display:flex;
    gap:14px;
    margin-top:18px;
    padding:18px 20px;
    background:rgba(255,255,255,.06);
    border-radius:14px;
    font-size:12px;
    line-height:1.6;
}

.fan-points-legal-note strong{
    flex:0 0 auto;
    color:#fff;
}

.fan-points-legal-note span{
    color:rgba(255,255,255,.58);
}


@media (max-width:900px){

    .fan-points-earn-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media (max-width:650px){

    .fan-points-center-v2{
        padding:24px 18px;
        border-radius:22px;
    }

    .fan-points-center-head{
        grid-template-columns:1fr;
        gap:20px;
    }

    .fan-points-balance-v2{
        width:100%;
    }

    .fan-points-earn-grid{
        grid-template-columns:1fr;
    }

    .fan-points-reward-preview{
        grid-template-columns:1fr;
    }

    .fan-points-reward-lock{
        text-align:left;
    }

    .fan-points-legal-note{
        display:block;
    }

    .fan-points-legal-note strong{
        display:block;
        margin-bottom:5px;
    }

}



/* =========================================================
   HSU CASH · V1
========================================================= */

.hsu-cash-page,
.hsu-cash-result-page{
    min-height:70vh;
    padding:60px 0;
    background:#0b0b0b;
}

.hsu-cash-shell{
    max-width:720px;
}

.hsu-cash-head{
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:flex-start;
    margin-bottom:28px;
}

.hsu-cash-head h1{
    margin:5px 0 10px;
    color:#fff;
    font-size:clamp(38px,7vw,70px);
    line-height:.9;
}

.hsu-cash-head p{
    max-width:450px;
    color:rgba(255,255,255,.6);
}

.hsu-cash-user{
    text-align:right;
}

.hsu-cash-user span,
.hsu-cash-location span{
    display:block;
    color:rgba(255,255,255,.4);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-cash-user strong,
.hsu-cash-location strong{
    color:#fff;
}

.hsu-cash-partners{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.hsu-cash-partners a{
    padding:9px 13px;
    border-radius:999px;
    background:#1a1a1a;
    color:#aaa;
    font-size:11px;
    font-weight:800;
}

.hsu-cash-partners a.active{
    background:#ff6900;
    color:#fff;
}

.hsu-cash-location{
    margin-bottom:18px;
}

.hsu-cash-scanner{
    position:relative;
    overflow:hidden;
    aspect-ratio:3/4;
    max-height:620px;
    border-radius:28px;
    background:#151515;
}

.hsu-cash-scanner video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hsu-cash-frame{
    position:absolute;
    inset:20%;
    pointer-events:none;
}

.hsu-cash-frame span{
    position:absolute;
    width:38px;
    height:38px;
    border-color:#ff6900;
    border-style:solid;
}

.hsu-cash-frame span:nth-child(1){
    top:0;
    left:0;
    border-width:4px 0 0 4px;
}

.hsu-cash-frame span:nth-child(2){
    top:0;
    right:0;
    border-width:4px 4px 0 0;
}

.hsu-cash-frame span:nth-child(3){
    bottom:0;
    left:0;
    border-width:0 0 4px 4px;
}

.hsu-cash-frame span:nth-child(4){
    bottom:0;
    right:0;
    border-width:0 4px 4px 0;
}

.hsu-cash-scanner-status{
    position:absolute;
    left:18px;
    right:18px;
    bottom:18px;
    padding:12px;
    border-radius:12px;
    background:rgba(0,0,0,.72);
    color:#fff;
    text-align:center;
    font-size:12px;
}

.hsu-cash-actions{
    margin-top:16px;
}

.hsu-cash-actions .button{
    width:100%;
}

.hsu-cash-manual{
    margin-top:26px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.08);
}

.hsu-cash-manual > span{
    display:block;
    margin-bottom:8px;
    color:rgba(255,255,255,.4);
    font-size:9px;
    font-weight:900;
}

.hsu-cash-manual form{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
}

.hsu-cash-manual input{
    min-width:0;
    padding:13px 14px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:#171717;
    color:#fff;
}


.hsu-cash-result-page .shell{
    max-width:640px;
}

.hsu-cash-result{
    padding:36px;
    border-radius:28px;
    background:#fff;
    text-align:center;
}

.hsu-cash-result-icon{
    display:flex;
    width:74px;
    height:74px;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    border-radius:50%;
    font-size:36px;
    font-weight:950;
}

.hsu-cash-result.valid
.hsu-cash-result-icon{
    background:#e8f8ed;
    color:#17883c;
}

.hsu-cash-result.redeemed
.hsu-cash-result-icon{
    background:#e8f8ed;
    color:#17883c;
}

.hsu-cash-result.invalid
.hsu-cash-result-icon{
    background:#fdecec;
    color:#bb2424;
}

.hsu-cash-result h1{
    margin:5px 0;
    color:#111;
    font-size:clamp(34px,6vw,54px);
}

.hsu-cash-result-message{
    color:#777;
}

.hsu-cash-reward-card{
    margin:26px 0;
    padding:25px;
    border-radius:18px;
    background:#111;
    color:#fff;
    text-align:left;
}

.hsu-cash-reward-card > span,
.hsu-cash-reward-card div span{
    display:block;
    color:rgba(255,255,255,.42);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-cash-reward-card > strong{
    display:block;
    margin:5px 0 20px;
    color:#ff6900;
    font-size:30px;
}

.hsu-cash-reward-card div{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:9px 0;
    border-top:1px solid rgba(255,255,255,.08);
}

.hsu-cash-confirm{
    width:100%;
    font-size:16px;
}

.hsu-cash-warning{
    margin:10px 0 20px;
    color:#999;
    font-size:11px;
}

.hsu-cash-next{
    width:100%;
}


@media(max-width:600px){

    .hsu-cash-page,
    .hsu-cash-result-page{
        padding:30px 0;
    }

    .hsu-cash-head{
        display:block;
    }

    .hsu-cash-user{
        margin-top:20px;
        text-align:left;
    }

    .hsu-cash-result{
        padding:25px 18px;
    }

}



/* =========================================================
   HSU CONTROL · V1
========================================================= */

.hsu-control-hero{
    padding:80px 0 55px;
    background:#0b0b0b;
    color:#fff;
}

.hsu-control-hero-inner{
    display:flex;
    justify-content:space-between;
    gap:40px;
    align-items:flex-end;
}

.hsu-control-hero h1{
    margin:7px 0 12px;
    color:#fff;
    font-size:clamp(42px,7vw,78px);
    line-height:.9;
}

.hsu-control-hero p{
    max-width:520px;
    color:rgba(255,255,255,.6);
    line-height:1.6;
}

.hsu-control-user{
    text-align:right;
}

.hsu-control-user span{
    display:block;
    color:rgba(255,255,255,.4);
    font-size:9px;
    font-weight:900;
    letter-spacing:.11em;
}

.hsu-control-user strong{
    color:#fff;
    font-size:20px;
}


.hsu-control-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.hsu-control-stats > div{
    padding:22px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    background:#f7f7f7;
}

.hsu-control-stats span{
    display:block;
    color:#999;
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-control-stats strong{
    display:block;
    margin-top:6px;
    color:#111;
    font-size:34px;
}


.hsu-control-menu{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:30px;
}

.hsu-control-menu a{
    display:grid;
    gap:7px;
    padding:26px;
    border-radius:20px;
    background:#111;
    color:#fff;
    text-decoration:none;
}

.hsu-control-menu a > span{
    color:#ff6900;
    font-size:11px;
    font-weight:900;
}

.hsu-control-menu strong{
    font-size:22px;
}

.hsu-control-menu small{
    color:rgba(255,255,255,.5);
}


.hsu-control-page{
    min-height:70vh;
}

.hsu-control-page-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    margin-bottom:30px;
}

.hsu-control-page-head h1{
    margin:5px 0 0;
    color:#111;
    font-size:clamp(38px,6vw,62px);
    line-height:.9;
}

.hsu-control-message{
    margin-bottom:20px;
    padding:14px 16px;
    border-radius:12px;
    font-weight:800;
}

.hsu-control-message.success{
    background:#eaf8ef;
    color:#207b40;
}

.hsu-control-message.error{
    background:#fdeeee;
    color:#a42b2b;
}


.hsu-control-users{
    display:grid;
    gap:18px;
}

.hsu-control-user-card{
    padding:24px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:20px;
    background:#fff;
}

.hsu-control-user-main{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.hsu-control-user-main > div:first-child > span{
    color:#aaa;
    font-size:9px;
    font-weight:900;
}

.hsu-control-user-main h2{
    margin:4px 0;
    color:#111;
}

.hsu-control-user-main p{
    margin:0;
    color:#666;
}

.hsu-control-user-main small{
    color:#999;
}

.hsu-control-user-status{
    height:max-content;
    padding:6px 9px;
    border-radius:999px;
    background:#eef7f0;
    color:#32824b;
    font-size:9px;
    font-weight:900;
}

.hsu-control-role-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:20px 0;
}

.hsu-control-role-chip{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 8px 8px 12px;
    border-radius:999px;
    background:#111;
    color:#fff;
}

.hsu-control-role-chip > div{
    display:grid;
}

.hsu-control-role-chip strong{
    font-size:11px;
}

.hsu-control-role-chip small{
    color:rgba(255,255,255,.45);
    font-size:8px;
}

.hsu-control-role-chip button{
    display:flex;
    width:24px;
    height:24px;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
    cursor:pointer;
}

.hsu-control-no-role{
    color:#999;
}

.hsu-control-role-form{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:10px;
    align-items:end;
}

.hsu-control-role-form label{
    display:grid;
    gap:5px;
}

.hsu-control-role-form label > span{
    color:#777;
    font-size:9px;
    font-weight:900;
}

.hsu-control-role-form select{
    width:100%;
    padding:12px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    background:#fff;
}


.hsu-audit-list{
    border:1px solid rgba(0,0,0,.08);
    border-radius:20px;
    overflow:hidden;
}

.hsu-audit-row{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:15px;
    align-items:center;
    padding:16px 18px;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.hsu-audit-row:last-child{
    border-bottom:0;
}

.hsu-audit-row > div{
    display:grid;
    gap:2px;
}

.hsu-audit-row span{
    color:#aaa;
    font-size:8px;
    font-weight:900;
}

.hsu-audit-row strong{
    color:#111;
    font-size:12px;
}

.hsu-audit-action strong{
    color:#ff6900;
}

.hsu-audit-row small{
    color:#aaa;
    font-size:9px;
}

.hsu-audit-empty{
    padding:30px;
    color:#888;
}


@media(max-width:850px){

    .hsu-control-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .hsu-control-menu{
        grid-template-columns:1fr;
    }

    .hsu-control-role-form{
        grid-template-columns:1fr;
    }

    .hsu-audit-row{
        grid-template-columns:1fr 1fr;
    }

}


@media(max-width:560px){

    .hsu-control-hero-inner,
    .hsu-control-page-head{
        display:block;
    }

    .hsu-control-user{
        margin-top:25px;
        text-align:left;
    }

    .hsu-control-page-head .button{
        margin-top:18px;
    }

    .hsu-control-stats{
        grid-template-columns:1fr 1fr;
    }

    .hsu-audit-row{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   HSU WORLD · WALLET V1
========================================================= */

.hsu-wallet-hero{
    padding:75px 0 55px;
    background:#0b0b0b;
    color:#fff;
}

.hsu-wallet-hero-inner{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
}

.hsu-wallet-hero h1{
    margin:6px 0 12px;
    color:#fff;
    font-size:clamp(44px,8vw,82px);
    line-height:.88;
}

.hsu-wallet-hero p{
    color:rgba(255,255,255,.6);
}

.hsu-wallet-balance{
    min-width:190px;
    padding:23px 28px;
    border-radius:20px;
    background:#ff6900;
    text-align:center;
}

.hsu-wallet-balance span,
.hsu-wallet-balance small{
    display:block;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.hsu-wallet-balance strong{
    display:block;
    margin:3px 0;
    font-size:52px;
    line-height:1;
}

.hsu-wallet-nav{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-bottom:35px;
}

.hsu-wallet-nav a{
    color:#111;
    font-weight:850;
}

.hsu-wallet-title h2,
.hsu-wallet-passes-head h2{
    margin:5px 0 25px;
    color:#111;
    font-size:clamp(34px,5vw,54px);
    line-height:.95;
}

.hsu-wallet-rewards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
}

.hsu-wallet-reward{
    display:flex;
    flex-direction:column;
    min-height:330px;
    padding:22px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:20px;
    background:#fff;
}

.hsu-wallet-reward.locked{
    background:#f8f8f8;
}

.hsu-wallet-reward-top{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
}

.hsu-wallet-reward-top > span{
    color:#999;
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-wallet-reward-top strong{
    color:#ff6900;
    font-size:34px;
    line-height:1;
}

.hsu-wallet-reward-top small{
    grid-column:2;
    color:#999;
    font-size:8px;
    font-weight:900;
}

.hsu-wallet-reward h3{
    margin:22px 0 7px;
    color:#111;
    font-size:22px;
}

.hsu-wallet-reward p{
    margin:0;
    color:#777;
    line-height:1.55;
    font-size:12px;
}

.hsu-wallet-partners{
    margin-top:18px;
    padding-top:13px;
    border-top:1px solid rgba(0,0,0,.06);
}

.hsu-wallet-partners span{
    display:block;
    color:#aaa;
    font-size:8px;
    font-weight:900;
}

.hsu-wallet-partners strong{
    color:#555;
    font-size:10px;
}

.hsu-wallet-reward form,
.hsu-wallet-progress{
    margin-top:auto;
    padding-top:20px;
}

.hsu-wallet-reward form .button{
    width:100%;
}

.hsu-wallet-progress > div{
    height:6px;
    overflow:hidden;
    border-radius:999px;
    background:#e8e8e8;
}

.hsu-wallet-progress > div span{
    display:block;
    height:100%;
    border-radius:999px;
    background:#ff6900;
}

.hsu-wallet-progress small{
    display:block;
    margin-top:8px;
    color:#999;
}

.hsu-wallet-progress strong{
    color:#111;
}

.hsu-wallet-passes-head{
    margin-top:55px;
}

.hsu-wallet-empty{
    padding:30px;
    border:1px dashed rgba(0,0,0,.13);
    border-radius:18px;
    background:#fafafa;
}

.hsu-wallet-empty strong{
    color:#111;
}

.hsu-wallet-empty p{
    color:#777;
}

.hsu-wallet-pass-list{
    display:grid;
    gap:10px;
}

.hsu-wallet-pass-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    padding:18px 20px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
}

.hsu-wallet-pass-row > div:first-child{
    display:grid;
}

.hsu-wallet-pass-row > div:first-child > span{
    color:#ff6900;
    font-size:8px;
    font-weight:900;
}

.hsu-wallet-pass-row strong{
    color:#111;
}

.hsu-wallet-pass-row small{
    color:#999;
}

.hsu-wallet-pass-row-actions{
    display:flex;
    gap:8px;
}

.hsu-wallet-pass-finished{
    color:#777;
    font-size:10px;
    font-weight:900;
}

.hsu-wallet-legal{
    margin-top:35px;
}


/* ACCOUNT TOOLS */

.hsu-account-tools{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin:28px 0;
}

.hsu-account-tool{
    display:grid;
    gap:5px;
    padding:23px;
    border-radius:18px;
    text-decoration:none;
}

.hsu-account-tool.wallet{
    background:#111;
    color:#fff;
}

.hsu-account-tool.control{
    background:#ff6900;
    color:#fff;
}

.hsu-account-tool > span{
    font-size:9px;
    font-weight:900;
    letter-spacing:.11em;
    opacity:.6;
}

.hsu-account-tool strong{
    font-size:23px;
}

.hsu-account-tool small{
    opacity:.65;
}


/* =========================================================
   HSU WORLD · DIGITAL REWARD PASS
========================================================= */

.hsu-pass-page{
    min-height:75vh;
    padding:45px 0 65px;
    background:#111;
}

.hsu-pass-shell{
    max-width:520px;
}

.hsu-pass-back{
    display:inline-block;
    margin-bottom:18px;
    color:rgba(255,255,255,.65);
}

.hsu-pass-card{
    position:relative;
    overflow:hidden;
    padding:28px;
    border-radius:30px;
    background:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.28);
}

.hsu-pass-card::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-90px;
    top:-90px;
    border-radius:50%;
    background:rgba(255,105,0,.11);
}

.hsu-pass-brand{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
}

.hsu-pass-brand img{
    width:52px;
    height:52px;
    object-fit:contain;
}

.hsu-pass-brand div{
    display:grid;
}

.hsu-pass-brand span{
    color:#ff6900;
    font-size:9px;
    font-weight:950;
    letter-spacing:.1em;
}

.hsu-pass-brand strong{
    color:#111;
    font-size:13px;
}

.hsu-pass-reward{
    position:relative;
    margin:32px 0 22px;
}

.hsu-pass-reward > span{
    color:#aaa;
    font-size:9px;
    font-weight:900;
}

.hsu-pass-reward h1{
    margin:4px 0 7px;
    color:#111;
    font-size:clamp(34px,8vw,52px);
    line-height:.92;
}

.hsu-pass-reward p{
    margin:0;
    color:#777;
}

.hsu-pass-qr{
    display:flex;
    justify-content:center;
    padding:22px;
    border:1px solid rgba(0,0,0,.07);
    border-radius:20px;
    background:#fff;
}

.hsu-pass-qr img,
.hsu-pass-qr canvas{
    max-width:100%;
    height:auto !important;
}

.hsu-pass-owner{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:20px;
}

.hsu-pass-owner > div{
    padding:12px;
    border-radius:12px;
    background:#f5f5f5;
}

.hsu-pass-owner span,
.hsu-pass-partner span{
    display:block;
    color:#aaa;
    font-size:7px;
    font-weight:900;
    letter-spacing:.09em;
}

.hsu-pass-owner strong{
    display:block;
    margin-top:3px;
    color:#111;
}

.hsu-pass-partner{
    margin-top:12px;
    padding:13px;
    border-radius:12px;
    background:#111;
}

.hsu-pass-partner strong{
    color:#fff;
    font-size:11px;
}

.hsu-pass-status{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    padding-top:17px;
    border-top:1px solid rgba(0,0,0,.07);
}

.hsu-pass-status span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#35a854;
}

.hsu-pass-status strong{
    color:#397447;
    font-size:10px;
    letter-spacing:.08em;
}

.hsu-pass-note{
    margin:18px auto 0;
    max-width:390px;
    color:rgba(255,255,255,.5);
    text-align:center;
    font-size:11px;
    line-height:1.6;
}


@media(max-width:950px){

    .hsu-wallet-rewards{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:600px){

    .hsu-wallet-hero-inner{
        display:block;
    }

    .hsu-wallet-balance{
        margin-top:25px;
        width:100%;
    }

    .hsu-wallet-rewards{
        grid-template-columns:1fr;
    }

    .hsu-wallet-pass-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .hsu-wallet-pass-row-actions{
        width:100%;
    }

    .hsu-wallet-pass-row-actions .button,
    .hsu-wallet-pass-row-actions form{
        flex:1;
    }

    .hsu-wallet-pass-row-actions form .button{
        width:100%;
    }

    .hsu-account-tools{
        grid-template-columns:1fr;
    }

    .hsu-pass-card{
        padding:21px;
        border-radius:22px;
    }

    .hsu-pass-owner{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   HSU WORLD · WALLET V1.1
   DARK PAGE CONTRAST FIX
========================================================= */

/*
 * Die Wallet-Seite liegt auf dunklem Grund.
 * Überschriften außerhalb der weißen Reward-Cards
 * müssen daher weiß sein.
 */

body:has(.hsu-wallet-hero){
    background:#000;
}


/* REWARDS / WALLET PASSES HEADLINES */

body .hsu-wallet-title h2,
body .hsu-wallet-passes-head h2{
    color:#fff;
}

body .hsu-wallet-title h2 .orange,
body .hsu-wallet-passes-head h2 .orange{
    color:#ff6900;
}


/* EYEBROWS */

body .hsu-wallet-title .eyebrow,
body .hsu-wallet-passes-head .eyebrow{
    color:#ff6900;
}


/* NAVIGATION ÜBER DEN REWARDS */

body .hsu-wallet-nav a{
    color:rgba(255,255,255,.72);
}

body .hsu-wallet-nav a:hover{
    color:#fff;
}


/*
 * Reward-Karten bleiben bewusst hell.
 */

body .hsu-wallet-reward{
    color:#111;
}

body .hsu-wallet-reward h3{
    color:#111;
}

body .hsu-wallet-reward p{
    color:#777;
}

body .hsu-wallet-reward .hsu-wallet-partners strong{
    color:#555;
}


/*
 * Leerer Wallet-Pass:
 * dunkle Variante statt grauer Box auf Schwarz.
 */

body .hsu-wallet-empty{
    border-color:rgba(255,255,255,.14);
    background:rgba(255,255,255,.055);
}

body .hsu-wallet-empty strong{
    color:#fff;
}

body .hsu-wallet-empty p{
    color:rgba(255,255,255,.58);
}


/*
 * Legal Note auf dunklem Wallet-Hintergrund.
 */

body .hsu-wallet-legal{
    border-color:rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
}

body .hsu-wallet-legal strong{
    color:#fff;
}

body .hsu-wallet-legal span{
    color:rgba(255,255,255,.58);
}


/*
 * Bereits vorhandene Wallet-Pässe:
 * weiterhin weiße Karten.
 */

body .hsu-wallet-pass-row{
    background:#fff;
    color:#111;
}

body .hsu-wallet-pass-row strong{
    color:#111;
}

body .hsu-wallet-pass-row small{
    color:#888;
}


/*
 * Section selbst transparent halten,
 * damit der schwarze Wallet-Untergrund
 * durchgehend bleibt.
 */

body:has(.hsu-wallet-hero) .section{
    background:#000;
}




/* =========================================================
   HSU PARTNER · DASHBOARD V1
========================================================= */

.hsu-partner-hero{
    padding:72px 0 50px;
    background:#0b0b0b;
    color:#fff;
}

.hsu-partner-hero-inner{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:35px;
}

.hsu-partner-hero h1{
    margin:6px 0 10px;
    color:#fff;
    font-size:clamp(42px,7vw,76px);
    line-height:.9;
}

.hsu-partner-hero p{
    max-width:570px;
    color:rgba(255,255,255,.6);
}

.hsu-partner-login{
    text-align:right;
}

.hsu-partner-login span{
    display:block;
    color:rgba(255,255,255,.4);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-partner-login strong{
    color:#fff;
}

.hsu-partner-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
}

.hsu-partner-tabs a{
    padding:9px 13px;
    border-radius:999px;
    background:#eee;
    color:#666;
    font-size:10px;
    font-weight:850;
}

.hsu-partner-tabs a.active{
    background:#111;
    color:#fff;
}

.hsu-partner-actions{
    margin-bottom:24px;
}

.hsu-partner-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px;
}

.hsu-partner-stats > div{
    padding:21px;
    border-radius:17px;
    background:#111;
    color:#fff;
}

.hsu-partner-stats span{
    display:block;
    color:rgba(255,255,255,.4);
    font-size:8px;
    font-weight:900;
    letter-spacing:.09em;
}

.hsu-partner-stats strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:32px;
}

.hsu-partner-section-head{
    margin-top:45px;
}

.hsu-partner-section-head h2{
    margin:5px 0 22px;
    color:#111;
    font-size:clamp(34px,5vw,54px);
}

.hsu-partner-empty{
    padding:28px;
    border:1px dashed rgba(0,0,0,.12);
    border-radius:18px;
    background:#fafafa;
}

.hsu-partner-empty strong{
    color:#111;
}

.hsu-partner-empty p{
    margin-bottom:0;
    color:#777;
}

.hsu-redemption-table{
    overflow:hidden;
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;
}

.hsu-redemption-row{
    display:grid;
    grid-template-columns:
        1.5fr
        1fr
        .6fr
        1fr
        1fr
        auto;

    gap:14px;
    align-items:center;

    padding:15px 17px;

    border-bottom:
        1px solid rgba(0,0,0,.06);
}

.hsu-redemption-row:last-child{
    border-bottom:0;
}

.hsu-redemption-row > div{
    display:grid;
}

.hsu-redemption-row div > span:first-child{
    color:#aaa;
    font-size:7px;
    font-weight:900;
    letter-spacing:.08em;
}

.hsu-redemption-row strong{
    color:#111;
    font-size:11px;
}

.hsu-redemption-status span{
    display:inline-flex;
    padding:5px 7px;
    border-radius:999px;
    font-size:8px;
    font-weight:900;
}

.hsu-redemption-status .redeemed{
    background:#e9f7ed;
    color:#277945;
}

.hsu-redemption-status .cancelled{
    background:#fdecec;
    color:#a52a2a;
}


/* =========================================================
   HSU CONTROL · REDEMPTION MANAGEMENT
========================================================= */

.hsu-control-redemptions{
    display:grid;
    gap:15px;
}

.hsu-control-redemption{
    padding:23px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:19px;
    background:#fff;
}

.hsu-control-redemption-main{
    display:flex;
    justify-content:space-between;
    gap:25px;
}

.hsu-control-redemption-main > div:first-child > span{
    color:#aaa;
    font-size:8px;
    font-weight:900;
}

.hsu-control-redemption-main h2{
    margin:4px 0;
    color:#111;
    font-size:25px;
}

.hsu-control-redemption-main p{
    margin:0;
    color:#777;
}

.hsu-control-redemption-state{
    height:max-content;
    padding:6px 9px;
    border-radius:999px;
    font-size:8px;
    font-weight:900;
}

.hsu-control-redemption-state.redeemed{
    background:#e9f7ed;
    color:#287a46;
}

.hsu-control-redemption-state.cancelled{
    background:#fdeaea;
    color:#ad2929;
}

.hsu-control-redemption-meta{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:18px;
}

.hsu-control-redemption-meta > div{
    padding:10px;
    border-radius:10px;
    background:#f6f6f6;
}

.hsu-control-redemption-meta span{
    display:block;
    color:#aaa;
    font-size:7px;
    font-weight:900;
}

.hsu-control-redemption-meta strong{
    color:#111;
    font-size:10px;
}

.hsu-control-cancel-reason{
    margin-top:13px;
    padding:11px 13px;
    border-radius:10px;
    background:#fff3e9;
    color:#6d4b32;
    font-size:11px;
}

.hsu-control-reversal-form{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:end;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(0,0,0,.07);
}

.hsu-control-reversal-form label{
    display:grid;
    gap:5px;
}

.hsu-control-reversal-form label span{
    color:#999;
    font-size:8px;
    font-weight:900;
}

.hsu-control-reversal-form input{
    width:100%;
    padding:12px 13px;
    border:1px solid rgba(0,0,0,.13);
    border-radius:10px;
}


@media(max-width:900px){

    .hsu-partner-stats{
        grid-template-columns:repeat(2,1fr);
    }

    .hsu-redemption-row{
        grid-template-columns:1fr 1fr;
    }

    .hsu-control-redemption-meta{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:600px){

    .hsu-partner-hero-inner{
        display:block;
    }

    .hsu-partner-login{
        margin-top:22px;
        text-align:left;
    }

    .hsu-partner-stats{
        grid-template-columns:1fr 1fr;
    }

    .hsu-redemption-row{
        grid-template-columns:1fr;
    }

    .hsu-control-redemption-main{
        display:block;
    }

    .hsu-control-redemption-state{
        display:inline-flex;
        margin-top:12px;
    }

    .hsu-control-redemption-meta{
        grid-template-columns:1fr 1fr;
    }

    .hsu-control-reversal-form{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   HSU WORLD · MANUAL REDEMPTION CODE
========================================================= */

.hsu-pass-manual-code{
    margin-top:14px;
    padding:17px;
    border:2px dashed rgba(255,105,0,.45);
    border-radius:14px;
    background:#fff8f2;
    text-align:center;
}

.hsu-pass-manual-code span{
    display:block;
    color:#9a765d;
    font-size:9px;
    font-weight:900;
    letter-spacing:.09em;
}

.hsu-pass-manual-code strong{
    display:block;
    margin:6px 0 4px;
    color:#111;
    font-size:28px;
    font-weight:950;
    letter-spacing:.12em;
}

.hsu-pass-manual-code small{
    display:block;
    color:#8b7668;
    font-size:10px;
}



/* =========================================================
   HSU WORLD · CASH ACTIVITY
========================================================= */

.hsu-account-cash-activity{
    margin:45px 0 30px;
}

.hsu-account-cash-activity h2{
    margin:5px 0 20px;
    color:#111;
    font-size:clamp(34px,5vw,52px);
    line-height:.95;
}

.hsu-account-cash-list{
    display:grid;
    gap:10px;
}

.hsu-account-cash-row{
    display:grid;
    grid-template-columns:2fr .7fr 1.2fr 1.2fr;
    gap:12px;
    align-items:center;
    padding:17px 18px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:15px;
    background:#fff;
}

.hsu-account-cash-row > div{
    display:grid;
    gap:2px;
}

.hsu-account-cash-row span{
    color:#aaa;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.hsu-account-cash-row strong{
    color:#111;
    font-size:12px;
}

.hsu-account-cash-row small{
    color:#888;
}

.hsu-account-cash-cancel{
    padding:9px 10px;
    border-radius:10px;
    background:#fff3e8;
}

.hsu-account-cash-cancel strong{
    color:#b35a17;
}


@media(max-width:760px){

    .hsu-account-cash-row{
        grid-template-columns:1fr 1fr;
    }

}


@media(max-width:500px){

    .hsu-account-cash-row{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   HSU PARTNER · DASHBOARD V2
========================================================= */

.hsu-partner-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

.hsu-partner-periods{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.hsu-partner-periods a{
    padding:9px 14px;
    border:1px solid rgba(0,0,0,.09);
    border-radius:999px;
    background:#fff;
    color:#777;
    font-size:9px;
    font-weight:900;
    text-decoration:none;
    letter-spacing:.04em;
}

.hsu-partner-periods a.active{
    background:#111;
    color:#fff;
    border-color:#111;
}

.hsu-partner-context{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    color:#777;
}

.hsu-partner-context span{
    color:#ff6900;
    font-size:8px;
    font-weight:950;
    letter-spacing:.09em;
}

.hsu-partner-context strong{
    color:#111;
    font-size:13px;
}

.hsu-partner-context small{
    color:#999;
}

.hsu-partner-login small{
    display:block;
    margin-top:3px;
    opacity:.65;
    font-size:9px;
}

.hsu-partner-stats > div small{
    display:block;
    margin-top:3px;
    color:#aaa;
    font-size:8px;
}

.hsu-partner-module{
    margin-top:48px;
}

.hsu-partner-reward-grid{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );
    gap:12px;
}

.hsu-partner-reward-card{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:20px;
    align-items:center;
    padding:20px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    background:#fff;
}

.hsu-partner-reward-card span{
    display:block;
    color:#aaa;
    font-size:8px;
    font-weight:900;
    letter-spacing:.07em;
}

.hsu-partner-reward-card h3{
    margin:4px 0 0;
    color:#111;
    font-size:16px;
}

.hsu-partner-reward-card strong{
    color:#111;
    font-size:22px;
    font-weight:950;
}

.hsu-partner-reward-number{
    text-align:right;
}

.hsu-redemption-head{
    color:#999;
    font-size:8px;
    font-weight:900;
    letter-spacing:.07em;
}

.hsu-partner-status{
    display:inline-flex;
    padding:6px 9px;
    border-radius:999px;
    font-size:8px;
    font-weight:950;
    letter-spacing:.05em;
}

.hsu-partner-status.redeemed{
    background:#eef9f0;
    color:#347546;
}

.hsu-partner-status.cancelled{
    background:#fff0e6;
    color:#b65e1d;
}

.hsu-partner-bottom-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:35px;
}


@media(max-width:820px){

    .hsu-partner-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .hsu-partner-reward-card{
        grid-template-columns:1fr 1fr;
    }

    .hsu-partner-reward-card > div:first-child{
        grid-column:1 / -1;
    }

}


@media(max-width:600px){

    .hsu-partner-periods{
        width:100%;
    }

    .hsu-partner-periods a{
        flex:1;
        text-align:center;
    }

    .hsu-partner-reward-card{
        grid-template-columns:1fr;
    }

    .hsu-partner-reward-card > div:first-child{
        grid-column:auto;
    }

    .hsu-partner-reward-number{
        text-align:left;
    }

}



/* =========================================================
   HSU PARTNER V2 · DEFINITIVE CONTRAST FIX
   STEP 17.1
========================================================= */


/* ---------------------------------------------------------
   HERO = DUNKLER BEREICH
--------------------------------------------------------- */

body .hsu-partner-hero,
body .hsu-partner-hero-inner{
    color:#fff;
}

body .hsu-partner-hero h1,
body .hsu-partner-hero h2,
body .hsu-partner-hero h3,
body .hsu-partner-hero p,
body .hsu-partner-hero strong{
    color:#fff;
}

body .hsu-partner-hero .eyebrow,
body .hsu-partner-hero .eyebrow.light{
    color:#ff6900;
}

body .hsu-partner-login{
    color:#fff;
}

body .hsu-partner-login span,
body .hsu-partner-login strong{
    color:#fff;
}

body .hsu-partner-login small{
    color:rgba(255,255,255,.68);
}


/* ---------------------------------------------------------
   HAUPTBEREICH = HELL
--------------------------------------------------------- */

body .hsu-partner-page{
    color:#111;
}

body .hsu-partner-page h1,
body .hsu-partner-page h2,
body .hsu-partner-page h3,
body .hsu-partner-page h4,
body .hsu-partner-page strong{
    color:#111;
}

body .hsu-partner-page p{
    color:#6f6f6f;
}

body .hsu-partner-page .orange{
    color:#ff6900;
}

body .hsu-partner-page .eyebrow{
    color:#ff6900;
}


/* ---------------------------------------------------------
   PARTNER TABS
--------------------------------------------------------- */

body .hsu-partner-tabs a{
    color:#666;
}

body .hsu-partner-tabs a.active{
    color:#fff;
}

body .hsu-partner-tabs a.active strong,
body .hsu-partner-tabs a.active span{
    color:#fff;
}


/* ---------------------------------------------------------
   ZEITRAUM FILTER
--------------------------------------------------------- */

body .hsu-partner-periods a{
    color:#666;
    background:#fff;
}

body .hsu-partner-periods a.active{
    color:#fff;
    background:#111;
}

body .hsu-partner-periods a.active span,
body .hsu-partner-periods a.active strong{
    color:#fff;
}


/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

body .hsu-partner-page .button-primary,
body .hsu-partner-page a.button-primary{
    background:#ff6900;
    color:#fff;
}

body .hsu-partner-page .button-primary *,
body .hsu-partner-page a.button-primary *{
    color:#fff;
}

body .hsu-partner-bottom-actions .button:not(.button-primary){
    color:#111;
}


/* ---------------------------------------------------------
   AUSWERTUNG
--------------------------------------------------------- */

body .hsu-partner-context{
    color:#777;
}

body .hsu-partner-context span{
    color:#ff6900;
}

body .hsu-partner-context strong{
    color:#111;
}

body .hsu-partner-context small{
    color:#888;
}


/* ---------------------------------------------------------
   KPI CARDS
--------------------------------------------------------- */

body .hsu-partner-stats > div{
    color:#111;
}

body .hsu-partner-stats > div span{
    color:#888;
}

body .hsu-partner-stats > div strong{
    color:#111;
}

body .hsu-partner-stats > div small{
    color:#999;
}


/* ---------------------------------------------------------
   MODULE HEADINGS
--------------------------------------------------------- */

body .hsu-partner-section-head,
body .hsu-partner-module{
    color:#111;
}

body .hsu-partner-section-head h2,
body .hsu-partner-module h2,
body .hsu-partner-module h3{
    color:#111;
}

body .hsu-partner-section-head .orange,
body .hsu-partner-module .orange{
    color:#ff6900;
}


/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */

body .hsu-partner-empty{
    color:#111;
}

body .hsu-partner-empty strong{
    color:#111;
}

body .hsu-partner-empty p{
    color:#777;
}


/* ---------------------------------------------------------
   REWARD PERFORMANCE CARDS
--------------------------------------------------------- */

body .hsu-partner-reward-card{
    background:#fff;
    color:#111;
}

body .hsu-partner-reward-card h3,
body .hsu-partner-reward-card strong{
    color:#111;
}

body .hsu-partner-reward-card span{
    color:#999;
}


/* ---------------------------------------------------------
   REDEMPTION TABLE
--------------------------------------------------------- */

body .hsu-redemption-table{
    color:#111;
}

body .hsu-redemption-row{
    color:#111;
}

body .hsu-redemption-row strong{
    color:#111;
}

body .hsu-redemption-row span{
    color:#999;
}

body .hsu-redemption-head,
body .hsu-redemption-head div{
    color:#888;
}


/* Status bewusst zuletzt, damit globale Regeln
   diese Farben nicht überschreiben.
--------------------------------------------------------- */

body .hsu-partner-page .hsu-partner-status.redeemed{
    background:#eef9f0;
    color:#347546;
}

body .hsu-partner-page .hsu-partner-status.cancelled{
    background:#fff0e6;
    color:#b65e1d;
}


/* ---------------------------------------------------------
   LINK-FALLBACKS IM HELLEN BEREICH
--------------------------------------------------------- */

body .hsu-partner-page a:not(.button):not(.active){
    color:inherit;
}

body .hsu-partner-page
.hsu-partner-tabs a:not(.active),
body .hsu-partner-page
.hsu-partner-periods a:not(.active){
    color:#666;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media(max-width:600px){

    body .hsu-partner-page,
    body .hsu-partner-module,
    body .hsu-redemption-row{
        color:#111;
    }

}




/* =========================================================
   HSU PARTNER V2 · REDEMPTION TABLE DARK MODE
   STEP 17.2
========================================================= */


/*
 * Die Redemption-Tabelle liegt direkt
 * auf dem schwarzen Partner-Hintergrund.
 */

body .hsu-partner-page .hsu-redemption-table{
    color:#fff;
}


/*
 * Tabellenkopf
 */

body .hsu-partner-page
.hsu-redemption-row.hsu-redemption-head{
    color:#8e8e8e;
}

body .hsu-partner-page
.hsu-redemption-row.hsu-redemption-head > div{
    color:#8e8e8e;
}


/*
 * Einzelne Redemption-Zeilen
 */

body .hsu-partner-page
.hsu-redemption-table
.hsu-redemption-row:not(.hsu-redemption-head){
    color:#fff;
}


/*
 * Hauptwerte:
 *
 * Freibier
 * AvG
 * 500
 * Scanner
 * Zeitpunkt
 */

body .hsu-partner-page
.hsu-redemption-table
.hsu-redemption-row:not(.hsu-redemption-head)
strong{
    color:#f4f4f4;
}


/*
 * Kleine Labels:
 *
 * #1
 * FAN
 * HSU POINTS
 * EINGELÖST VON
 * ZEITPUNKT
 */

body .hsu-partner-page
.hsu-redemption-table
.hsu-redemption-row:not(.hsu-redemption-head)
span:not(.hsu-partner-status){
    color:#7f7f7f;
}


/*
 * Direkte Div-Fallbacks gegen
 * ältere globale Regeln.
 */

body .hsu-partner-page
.hsu-redemption-table
.hsu-redemption-row:not(.hsu-redemption-head)
> div{
    color:#f4f4f4;
}


/*
 * Status-Badges ausdrücklich getrennt.
 */

body .hsu-partner-page
.hsu-redemption-table
.hsu-partner-status.cancelled{
    background:#fff0e6;
    color:#b65e1d;
}

body .hsu-partner-page
.hsu-redemption-table
.hsu-partner-status.redeemed{
    background:#eaf7ed;
    color:#347546;
}


/*
 * Dezente Trennlinien auf Schwarz.
 */

body .hsu-partner-page
.hsu-redemption-table
.hsu-redemption-row{
    border-color:rgba(255,255,255,.08);
}


/*
 * Mobile ebenfalls hell erzwingen.
 */

@media(max-width:700px){

    body .hsu-partner-page
    .hsu-redemption-table
    .hsu-redemption-row:not(.hsu-redemption-head)
    strong{
        color:#f4f4f4;
    }

    body .hsu-partner-page
    .hsu-redemption-table
    .hsu-redemption-row:not(.hsu-redemption-head)
    span:not(.hsu-partner-status){
        color:#8a8a8a;
    }

}



/* =========================================================
   HSU CONTROL · REWARD CENTER V2
========================================================= */

.hsu-reward-admin{
    color:#111;
}

.hsu-reward-admin-intro{
    margin-bottom:28px;
}

.hsu-reward-admin-intro h2{
    margin:5px 0 8px;
    color:#111;
}

.hsu-reward-admin-intro p{
    color:#777;
}

.hsu-reward-admin-grid{
    display:grid;
    gap:18px;
}

.hsu-reward-admin-card{
    padding:22px;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
}

.hsu-reward-admin-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:20px;
}

.hsu-reward-admin-head span{
    display:block;
    color:#ff6900;
    font-size:8px;
    font-weight:950;
    letter-spacing:.08em;
}

.hsu-reward-admin-head strong{
    display:block;
    margin-top:4px;
    color:#111;
    font-size:20px;
}

.hsu-reward-admin-fields{
    display:grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
    gap:12px;
}

.hsu-reward-admin-fields label,
.hsu-reward-partners{
    display:block;
}

.hsu-reward-admin-fields label > span,
.hsu-reward-partners > span{
    display:block;
    margin-bottom:5px;
    color:#777;
    font-size:8px;
    font-weight:900;
    letter-spacing:.06em;
}

.hsu-reward-admin-fields input,
.hsu-reward-admin-fields select{
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    background:#fff;
    color:#111;
}

.hsu-reward-admin-fields small{
    display:block;
    margin-top:4px;
    color:#aaa;
    font-size:8px;
}

.hsu-reward-partners{
    margin-top:18px;
}

.hsu-reward-partners > div{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.hsu-reward-partners label{
    display:flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border-radius:999px;
    background:#f4f4f4;
}

.hsu-reward-partners strong{
    color:#111;
    font-size:9px;
}

.hsu-reward-admin-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid rgba(0,0,0,.07);
}

.hsu-reward-admin-footer span{
    display:block;
    color:#aaa;
    font-size:8px;
    font-weight:900;
}

.hsu-reward-admin-footer strong{
    color:#111;
    font-size:12px;
}

.hsu-switch{
    display:flex;
    align-items:center;
    gap:7px;
}

.hsu-switch span{
    color:#111;
}

@media(max-width:900px){

    .hsu-reward-admin-fields{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}

@media(max-width:600px){

    .hsu-reward-admin-fields{
        grid-template-columns:1fr;
    }

    .hsu-reward-admin-footer{
        align-items:stretch;
        flex-direction:column;
    }

}



/* =========================================================
   HSU · 18C.1B · WALLET AVAILABILITY UX
========================================================= */


.hsu-wallet-reward-state{
    display:inline-flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    margin:0 0 14px;
    padding:7px 10px;
    border-radius:999px;

    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;

    background:#f1f1f1;
    color:#333;
}


/* AVAILABLE */

.hsu-wallet-reward-state.available{
    background:#111;
    color:#fff;
}


/* NOCH NICHT GENUG POINTS */

.hsu-wallet-reward-state.locked{
    background:#f0f0f0;
    color:#666;
}


/* PAUSIERT */

.hsu-wallet-reward-state.inactive{
    background:#ededed;
    color:#777;
}


/* ZEITGESTEUERT */

.hsu-wallet-reward-state.scheduled{
    background:#fff3e8;
    color:#a84d00;
}


/* ABGELAUFEN */

.hsu-wallet-reward-state.expired{
    background:#eee;
    color:#777;
}


/* SOLD OUT */

.hsu-wallet-reward-state.sold-out{
    background:#111;
    color:#fff;
}


/* USER LIMIT */

.hsu-wallet-reward-state.limit-reached{
    background:#fff3e8;
    color:#a84d00;
}


/* FALLBACK */

.hsu-wallet-reward-state.unavailable{
    background:#ededed;
    color:#666;
}


/* Nicht verfügbare Rewards visuell zurücknehmen */

.hsu-wallet-reward.inactive,
.hsu-wallet-reward.expired,
.hsu-wallet-reward.sold-out,
.hsu-wallet-reward.limit-reached,
.hsu-wallet-reward.unavailable{
    opacity:.72;
}


/* Statusbox statt Button */

.hsu-wallet-unavailable{
    margin-top:auto;
    padding:14px 15px;

    border-radius:12px;

    background:#f3f3f3;
    border:1px solid rgba(0,0,0,.05);
}

.hsu-wallet-unavailable strong{
    display:block;

    margin-bottom:4px;

    color:#111;

    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
}

.hsu-wallet-unavailable span{
    display:block;

    color:#666;

    font-size:12px;
    line-height:1.45;
}


/* Locked Cards sollen weiter gut lesbar sein */

body .hsu-wallet-reward.locked{
    opacity:1;
}




/* =========================================================
   HSU · WALLET HISTORY & PASS LIFECYCLE V2
   19.1 · Active / History Split
========================================================= */

.hsu-wallet-active-empty{
    margin-top:14px;
}

.hsu-wallet-active-pass-list{
    margin-top:14px;
}

.hsu-wallet-pass-active{
    background:#fff;
    box-shadow:0 8px 30px rgba(0,0,0,.04);
}

.hsu-wallet-pass-status{
    display:inline-flex;
    width:max-content;
    margin-bottom:4px;
    font-size:8px;
    font-weight:950;
    letter-spacing:.08em;
}

.hsu-wallet-pass-status.issued{
    color:#ff6900;
}

.hsu-wallet-pass-status.pending{
    color:#111;
}

.hsu-wallet-history{
    margin-top:55px;
}

.hsu-wallet-history-head{
    margin-bottom:18px;
}

.hsu-wallet-history-head p{
    max-width:560px;
    margin-top:8px;
    color:#777;
}

.hsu-wallet-history-list{
    display:grid;
    gap:8px;
}

.hsu-wallet-history-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 17px;
    border:1px solid rgba(0,0,0,.065);
    border-radius:14px;
    background:#fafafa;
}

.hsu-wallet-history-main{
    display:grid;
    min-width:0;
}

.hsu-wallet-history-main strong{
    overflow:hidden;
    color:#222;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hsu-wallet-history-main small{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    color:#999;
}

.hsu-wallet-history-status{
    width:max-content;
    margin-bottom:2px;
    font-size:8px;
    font-weight:950;
    letter-spacing:.08em;
}

.hsu-wallet-history-status.redeemed{
    color:#ff6900;
}

.hsu-wallet-history-status.cancelled{
    color:#999;
}

.hsu-wallet-history-id{
    flex:0 0 auto;
    color:#bbb;
    font-size:9px;
    font-weight:900;
}

@media (max-width:700px){

    .hsu-wallet-pass-row{
        align-items:flex-start;
        flex-direction:column;
        gap:14px;
    }

    .hsu-wallet-pass-row-actions{
        width:100%;
        flex-wrap:wrap;
    }

    .hsu-wallet-pass-row-actions > a,
    .hsu-wallet-pass-row-actions > form{
        flex:1 1 auto;
    }

    .hsu-wallet-pass-row-actions form button{
        width:100%;
    }

    .hsu-wallet-history-row{
        align-items:flex-start;
    }

}




/*
 * ============================================
 * HSU · PASS STATUS UX V2
 * Schritt 19.3A
 * ============================================
 */

.hsu-pass-status.pending{
    opacity: .9;
}

.hsu-pass-status.pending span{
    animation:
        hsu-pass-pending-pulse
        1.6s
        ease-in-out
        infinite;
}

@keyframes hsu-pass-pending-pulse{

    0%,
    100%{
        opacity: .35;
        transform: scale(.82);
    }

    50%{
        opacity: 1;
        transform: scale(1);
    }

}




/* =========================================================
   HSU · ACCOUNT UX V2 · 22B.1
========================================================= */

.hsu-account-v2{
    --hsu-orange:#ff6900;
    --hsu-black:#080808;
    --hsu-dark:#111111;
    --hsu-text:#111111;
    --hsu-muted:#5f6368;
    --hsu-white:#ffffff;

    background:#f4f4f4;
    color:#111111;
}

.hsu-account-v2 *,
.hsu-account-v2 *::before,
.hsu-account-v2 *::after{
    box-sizing:border-box;
}

.hsu-account-v2 a{
    text-decoration:none;
}

.hsu-account-v2-hero{
    padding:
        clamp(72px,9vw,120px)
        0
        clamp(38px,6vw,65px);

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(255,105,0,.22),
            transparent 34%
        ),
        #080808;

    color:#ffffff;
}

.hsu-account-v2-hero-grid{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(220px,300px);
    gap:45px;
    align-items:end;
}

.hsu-account-v2-kicker{
    display:block;
    color:#ff6900;
    font-size:11px;
    font-weight:950;
    letter-spacing:.12em;
}

.hsu-account-v2-welcome h1{
    margin:10px 0 14px;
    color:#ffffff;
    font-size:clamp(48px,7vw,88px);
    line-height:.92;
    letter-spacing:-.055em;
}

.hsu-account-v2-welcome h1 span{
    color:#ff6900;
}

.hsu-account-v2-welcome p{
    max-width:570px;
    margin:0;
    color:#e0e0e0;
    font-size:clamp(16px,2vw,19px);
    line-height:1.55;
}

.hsu-account-v2-balance{
    display:block;
    padding:24px;
    border:1px solid rgba(255,105,0,.45);
    border-radius:22px;
    background:#17100b;
    color:#ffffff;
}

.hsu-account-v2-balance > span{
    display:block;
    color:#f1f1f1;
    font-size:10px;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-account-v2-balance strong{
    display:block;
    margin:7px 0 0;
    color:#ff6900;
    font-size:58px;
    line-height:1;
}

.hsu-account-v2-balance small{
    display:block;
    margin-top:4px;
    color:#ffffff;
    font-size:13px;
    font-weight:750;
}

.hsu-account-v2-balance b{
    display:block;
    margin-top:18px;
    color:#ffffff;
    font-size:12px;
}

.hsu-account-v2-main{
    padding:clamp(28px,5vw,55px) 0 65px;
    background:#f4f4f4;
    color:#111111;
}


/* PRIMARY NAV */

.hsu-account-v2-primary-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:38px;
}

.hsu-account-v2-action{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    min-height:110px;
    padding:20px;
    border:1px solid #dddddd;
    border-radius:19px;
    background:#ffffff;
    color:#111111;
    box-shadow:0 8px 24px rgba(0,0,0,.045);
}

.hsu-account-v2-action-primary{
    border-color:#ff6900;
    background:#ff6900;
    color:#111111;
}

.hsu-account-v2-action-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:13px;
    background:#eeeeee;
    color:#111111;
    font-size:21px;
}

.hsu-account-v2-action-primary .hsu-account-v2-action-icon{
    background:#111111;
    color:#ffffff;
}

.hsu-account-v2-action div{
    min-width:0;
}

.hsu-account-v2-action strong{
    display:block;
    color:inherit;
    font-size:16px;
}

.hsu-account-v2-action small{
    display:block;
    margin-top:4px;
    color:#606060;
    font-size:11px;
    line-height:1.35;
}

.hsu-account-v2-action-primary small{
    color:#242424;
}

.hsu-account-v2-action > b{
    color:#111111;
    font-size:18px;
}


/* HEADINGS */

.hsu-account-v2-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:24px;
}

.hsu-account-v2-section-head > div > span{
    display:block;
    color:#d85800;
    font-size:10px;
    font-weight:950;
    letter-spacing:.1em;
}

.hsu-account-v2-section-head h2{
    margin:5px 0 0;
    color:#111111;
    font-size:clamp(30px,4vw,44px);
    line-height:.95;
}

.hsu-account-v2-section-head p{
    max-width:390px;
    margin:0;
    color:#555555;
    line-height:1.45;
}

.hsu-account-v2-section-head > a{
    color:#9c3d00;
    font-size:12px;
    font-weight:900;
}


/* ROLE QUICK ACCESS */

.hsu-account-v2-role-zone{
    margin-bottom:38px;
    padding:clamp(22px,4vw,34px);
    border-radius:24px;
    background:#111111;
    color:#ffffff;
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head > div > span{
    color:#ff8a3c;
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head h2{
    color:#ffffff;
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head p{
    color:#d0d0d0;
}

.hsu-account-v2-role-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.hsu-account-v2-scanner{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:20px;
    align-items:center;
    padding:clamp(20px,4vw,30px);
    border-radius:20px;
    background:#ff6900;
    color:#111111;
}

.hsu-account-v2-scanner-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    border-radius:16px;
    background:#111111;
    color:#ffffff;
    font-size:28px;
}

.hsu-account-v2-scanner small{
    display:block;
    color:#2a1608;
    font-size:9px;
    font-weight:950;
    letter-spacing:.11em;
}

.hsu-account-v2-scanner strong{
    display:block;
    margin:2px 0 4px;
    color:#111111;
    font-size:clamp(21px,3vw,30px);
}

.hsu-account-v2-scanner p{
    margin:0;
    color:#2b1a0f;
    font-size:12px;
}

.hsu-account-v2-scanner > b{
    color:#111111;
    font-size:13px;
}

.hsu-account-v2-role-card{
    display:grid;
    gap:5px;
    padding:20px;
    border:1px solid #383838;
    border-radius:17px;
    background:#1b1b1b;
    color:#ffffff;
}

.hsu-account-v2-role-card > span{
    color:#ff8a3c;
    font-size:9px;
    font-weight:950;
    letter-spacing:.1em;
}

.hsu-account-v2-role-card strong{
    color:#ffffff;
    font-size:18px;
}

.hsu-account-v2-role-card small{
    color:#d0d0d0;
    font-size:11px;
}


/* CONTENT */

.hsu-account-v2-panel{
    margin-bottom:26px;
    padding:clamp(22px,4vw,34px);
    border:1px solid #dedede;
    border-radius:23px;
    background:#ffffff;
    color:#111111;
}

.hsu-account-v2-stat-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.hsu-account-v2-stat-grid > div{
    padding:20px;
    border-radius:16px;
    background:#f2f2f2;
    color:#111111;
}

.hsu-account-v2-stat-grid span{
    display:block;
    color:#555555;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}

.hsu-account-v2-stat-grid strong{
    display:block;
    margin-top:7px;
    color:#111111;
    font-size:clamp(30px,5vw,46px);
    line-height:1;
}

.hsu-account-v2-team-results{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:12px;
}

.hsu-account-v2-team-results > div{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:4px 15px;
    align-items:center;
    padding:18px 20px;
    border:1px solid #e3e3e3;
    border-radius:15px;
    background:#ffffff;
    color:#111111;
}

.hsu-account-v2-team-results span{
    color:#555555;
    font-size:9px;
    font-weight:900;
}

.hsu-account-v2-team-results strong{
    grid-row:1 / 3;
    grid-column:2;
    color:#111111;
    font-size:21px;
}

.hsu-account-v2-team-results small{
    color:#666666;
}


/* POINTS */

.hsu-account-v2-points-top{
    display:flex;
    align-items:center;
    gap:30px;
    margin-bottom:22px;
}

.hsu-account-v2-points-top > div{
    min-width:160px;
    padding:18px;
    border-radius:16px;
    background:#111111;
    color:#ffffff;
}

.hsu-account-v2-points-top strong{
    display:block;
    color:#ff7a20;
    font-size:42px;
    line-height:1;
}

.hsu-account-v2-points-top span{
    display:block;
    margin-top:4px;
    color:#ffffff;
    font-size:11px;
    font-weight:800;
}

.hsu-account-v2-points-top p{
    margin:0;
    color:#555555;
    line-height:1.5;
}

.hsu-account-v2-earn-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.hsu-account-v2-earn-list > div{
    display:flex;
    gap:14px;
    align-items:center;
    padding:15px;
    border:1px solid #e1e1e1;
    border-radius:14px;
    background:#fafafa;
    color:#111111;
}

.hsu-account-v2-earn-list b{
    min-width:42px;
    color:#b64600;
    font-size:20px;
}

.hsu-account-v2-earn-list span{
    display:grid;
    gap:2px;
}

.hsu-account-v2-earn-list strong{
    color:#111111;
}

.hsu-account-v2-earn-list small{
    color:#595959;
}

.hsu-account-v2-legal{
    display:flex;
    gap:15px;
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid #dedede;
    color:#444444;
    font-size:11px;
    line-height:1.5;
}

.hsu-account-v2-legal strong{
    flex:0 0 auto;
    color:#111111;
}


/* FOOTER */

.hsu-account-v2-footer-actions{
    display:flex;
    gap:10px;
    margin-top:30px;
}

.hsu-account-v2-footer-actions .button-ghost{
    border-color:#777777;
    color:#222222;
}


/* HOVER */

@media(hover:hover){

    .hsu-account-v2-action,
    .hsu-account-v2-role-card,
    .hsu-account-v2-scanner,
    .hsu-account-v2-balance{
        transition:
            transform .16s ease,
            box-shadow .16s ease;
    }

    .hsu-account-v2-action:hover,
    .hsu-account-v2-role-card:hover,
    .hsu-account-v2-scanner:hover,
    .hsu-account-v2-balance:hover{
        transform:translateY(-2px);
        box-shadow:0 12px 30px rgba(0,0,0,.10);
    }
}


/* TABLET */

@media(max-width:900px){

    .hsu-account-v2-primary-actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* MOBILE */

@media(max-width:620px){

    .hsu-account-v2-hero{
        padding:58px 0 30px;
    }

    .hsu-account-v2-hero-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .hsu-account-v2-welcome h1{
        font-size:clamp(43px,14vw,62px);
    }

    .hsu-account-v2-welcome p{
        color:#ededed;
        font-size:15px;
    }

    .hsu-account-v2-balance{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:1px 15px;
        padding:18px 20px;
    }

    .hsu-account-v2-balance > span,
    .hsu-account-v2-balance small{
        grid-column:1;
    }

    .hsu-account-v2-balance strong{
        grid-column:2;
        grid-row:1 / 3;
        margin:0;
        font-size:46px;
    }

    .hsu-account-v2-balance b{
        grid-column:1 / -1;
        margin-top:11px;
    }

    .hsu-account-v2-main{
        padding-top:20px;
    }

    .hsu-account-v2-primary-actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
        margin-bottom:25px;
    }

    .hsu-account-v2-action{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        min-height:150px;
        padding:16px;
        gap:10px;
    }

    .hsu-account-v2-action > b{
        margin-top:auto;
    }

    .hsu-account-v2-action small{
        font-size:10px;
    }

    .hsu-account-v2-section-head{
        display:block;
    }

    .hsu-account-v2-section-head p,
    .hsu-account-v2-section-head > a{
        display:block;
        margin-top:10px;
    }

    .hsu-account-v2-role-zone{
        margin-left:-4px;
        margin-right:-4px;
        padding:20px 16px;
    }

    .hsu-account-v2-role-actions{
        grid-template-columns:1fr;
    }

    .hsu-account-v2-scanner{
        grid-template-columns:auto minmax(0,1fr);
        gap:14px;
    }

    .hsu-account-v2-scanner > b{
        grid-column:1 / -1;
        display:block;
        padding:12px;
        border-radius:11px;
        background:#111111;
        color:#ffffff;
        text-align:center;
    }

    .hsu-account-v2-scanner-icon{
        width:50px;
        height:50px;
    }

    .hsu-account-v2-stat-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
    }

    .hsu-account-v2-stat-grid > div{
        padding:14px 10px;
    }

    .hsu-account-v2-stat-grid span{
        font-size:7px;
    }

    .hsu-account-v2-stat-grid strong{
        font-size:27px;
    }

    .hsu-account-v2-team-results{
        grid-template-columns:1fr;
    }

    .hsu-account-v2-points-top{
        display:block;
    }

    .hsu-account-v2-points-top > div{
        margin-bottom:15px;
    }

    .hsu-account-v2-earn-list{
        grid-template-columns:1fr;
    }

    .hsu-account-v2-legal{
        display:block;
    }

    .hsu-account-v2-legal strong{
        display:block;
        margin-bottom:5px;
    }

    .hsu-account-v2-footer-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .hsu-account-v2-footer-actions .button{
        width:100%;
        text-align:center;
    }

}


/* VERY SMALL MOBILE */

@media(max-width:390px){

    .hsu-account-v2-primary-actions{
        grid-template-columns:1fr;
    }

    .hsu-account-v2-action{
        display:grid;
        grid-template-columns:auto minmax(0,1fr) auto;
        min-height:0;
        align-items:center;
    }

    .hsu-account-v2-action > b{
        margin-top:0;
    }

    .hsu-account-v2-stat-grid{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   HSU · ACCOUNT PREMIUM · 22B.2
   Visual refinement only
========================================================= */


/* ---------------------------------------------------------
   01 · GLOBAL ACCOUNT SURFACE
--------------------------------------------------------- */

.hsu-account-v2{
    --premium-black:#090909;
    --premium-dark:#121212;
    --premium-card:#ffffff;
    --premium-soft:#f6f6f5;
    --premium-line:#dededb;
    --premium-text:#111111;
    --premium-muted:#595959;
    --premium-orange:#f26522;

    background:#f5f5f4;
    color:#111111;
}

.hsu-account-v2-main{
    padding:
        clamp(28px,4vw,48px)
        0
        72px;

    background:#f5f5f4;
}


/* ---------------------------------------------------------
   02 · HERO
--------------------------------------------------------- */

.hsu-account-v2-hero{
    position:relative;
    overflow:hidden;

    padding:
        clamp(52px,6vw,78px)
        0
        clamp(44px,5vw,64px);

    background:#090909;
    color:#ffffff;
}

.hsu-account-v2-hero::after{
    content:"";

    position:absolute;
    top:-180px;
    right:-100px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(242,101,34,.20) 0%,
            rgba(242,101,34,.07) 38%,
            rgba(242,101,34,0) 70%
        );

    pointer-events:none;
}

.hsu-account-v2-hero-grid{
    position:relative;
    z-index:1;

    grid-template-columns:
        minmax(0,1fr)
        240px;

    gap:64px;
    align-items:center;
}

.hsu-account-v2-kicker{
    color:#ff7b36;

    font-size:10px;
    font-weight:900;

    letter-spacing:.16em;
}

.hsu-account-v2-welcome h1{
    max-width:720px;

    margin:
        9px
        0
        13px;

    color:#ffffff;

    font-size:
        clamp(46px,5.4vw,70px);

    line-height:.94;
    letter-spacing:-.055em;
}

.hsu-account-v2-welcome h1 span{
    color:#ff6d24;
}

.hsu-account-v2-welcome p{
    max-width:540px;

    color:#d6d6d6;

    font-size:
        clamp(14px,1.4vw,16px);

    line-height:1.55;
}


/* ---------------------------------------------------------
   03 · BALANCE
--------------------------------------------------------- */

.hsu-account-v2-balance{
    position:relative;

    padding:22px;

    border:
        1px solid
        rgba(242,101,34,.40);

    border-radius:18px;

    background:
        rgba(255,255,255,.035);

    color:#ffffff;

    box-shadow:none;
}

.hsu-account-v2-balance > span{
    color:#d9d9d9;

    font-size:9px;
    font-weight:900;

    letter-spacing:.13em;
}

.hsu-account-v2-balance strong{
    margin-top:9px;

    color:#ff6d24;

    font-size:44px;
    font-weight:900;

    letter-spacing:-.04em;
}

.hsu-account-v2-balance small{
    color:#ffffff;

    font-size:11px;
    font-weight:800;
}

.hsu-account-v2-balance b{
    margin-top:17px;

    color:#ffffff;

    font-size:10px;
    font-weight:850;
}


/* ---------------------------------------------------------
   04 · PRIMARY NAVIGATION
--------------------------------------------------------- */

.hsu-account-v2-primary-actions{
    gap:10px;
    margin-bottom:26px;
}

.hsu-account-v2-action{
    min-height:86px;

    padding:16px 17px;

    border:1px solid #dededb;
    border-radius:15px;

    background:#ffffff;
    color:#111111;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.025);
}

.hsu-account-v2-action-primary{
    border-color:#f26522;

    background:#f26522;
    color:#111111;
}

.hsu-account-v2-action-icon{
    width:36px;
    height:36px;

    border-radius:11px;

    background:#f1f1ef;

    color:#111111;

    font-size:0;
}


/*
 * Neutral CSS symbols instead of emoji presentation.
 */

.hsu-account-v2-action:nth-child(1)
.hsu-account-v2-action-icon::before{
    content:"●";

    font-size:17px;
    color:#111111;
}

.hsu-account-v2-action:nth-child(2)
.hsu-account-v2-action-icon::before{
    content:"◇";

    font-size:22px;
    color:#111111;
}

.hsu-account-v2-action:nth-child(3)
.hsu-account-v2-action-icon::before{
    content:"▲";

    font-size:15px;
    color:#111111;
}

.hsu-account-v2-action:nth-child(4)
.hsu-account-v2-action-icon::before{
    content:"✦";

    font-size:18px;
    color:#111111;
}

.hsu-account-v2-action-primary
.hsu-account-v2-action-icon{
    background:#111111;
}

.hsu-account-v2-action-primary
.hsu-account-v2-action-icon::before{
    color:#ffffff;
}

.hsu-account-v2-action strong{
    color:inherit;

    font-size:13px;
    font-weight:850;
}

.hsu-account-v2-action small{
    margin-top:3px;

    color:#666666;

    font-size:9px;
    line-height:1.3;
}

.hsu-account-v2-action-primary small{
    color:#2b1a11;
}

.hsu-account-v2-action > b{
    color:#111111;

    font-size:14px;
}


/* ---------------------------------------------------------
   05 · SECTION HEADINGS
--------------------------------------------------------- */

.hsu-account-v2-section-head{
    gap:32px;
    margin-bottom:20px;
}

.hsu-account-v2-section-head > div > span{
    color:#b84b12;

    font-size:9px;
    font-weight:900;

    letter-spacing:.13em;
}

.hsu-account-v2-section-head h2{
    margin-top:4px;

    color:#111111;

    font-size:
        clamp(27px,3vw,36px);

    line-height:1;
    letter-spacing:-.045em;
}

.hsu-account-v2-section-head p{
    max-width:330px;

    color:#626262;

    font-size:12px;
    line-height:1.45;
}

.hsu-account-v2-section-head > a{
    color:#9b3d0d;

    font-size:10px;
    font-weight:900;
}


/* ---------------------------------------------------------
   06 · ROLE / MANAGEMENT ZONE
--------------------------------------------------------- */

.hsu-account-v2-role-zone{
    margin-bottom:26px;

    padding:
        clamp(22px,3vw,28px);

    border:
        1px solid
        #1f1f1f;

    border-radius:20px;

    background:#101010;
    color:#ffffff;
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head{
    align-items:center;
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head > div > span{
    color:#ff7b36;
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head h2{
    color:#ffffff;

    font-size:
        clamp(27px,3vw,36px);
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head p{
    color:#cfcfcf;
}


/* ---------------------------------------------------------
   07 · SCANNER
--------------------------------------------------------- */

.hsu-account-v2-role-actions{
    gap:9px;
}

.hsu-account-v2-scanner{
    position:relative;

    min-height:96px;

    padding:
        18px
        20px;

    border:
        1px solid
        #363636;

    border-radius:15px;

    background:#181818;
    color:#ffffff;
}

.hsu-account-v2-scanner::before{
    content:"";

    position:absolute;

    top:-1px;
    bottom:-1px;
    left:-1px;

    width:5px;

    border-radius:
        15px
        0
        0
        15px;

    background:#f26522;
}

.hsu-account-v2-scanner-icon{
    width:48px;
    height:48px;

    border:
        1px solid
        #454545;

    border-radius:13px;

    background:#0d0d0d;
    color:#ffffff;

    font-size:0;
}

.hsu-account-v2-scanner-icon::before{
    content:"";

    width:18px;
    height:18px;

    border:2px solid #ffffff;
    border-radius:2px;

    box-shadow:
        inset 0 0 0 4px #0d0d0d;
}

.hsu-account-v2-scanner small{
    color:#ff7b36;

    font-size:8px;
    font-weight:950;

    letter-spacing:.15em;
}

.hsu-account-v2-scanner strong{
    margin:
        3px
        0
        3px;

    color:#ffffff;

    font-size:
        clamp(17px,2vw,21px);

    letter-spacing:-.025em;
}

.hsu-account-v2-scanner p{
    color:#c8c8c8;

    font-size:10px;
}

.hsu-account-v2-scanner > b{
    padding:
        10px
        14px;

    border-radius:9px;

    background:#f26522;
    color:#111111;

    font-size:10px;
    font-weight:900;
}


/* ---------------------------------------------------------
   08 · ROLE SECONDARY ACTIONS
--------------------------------------------------------- */

.hsu-account-v2-role-card{
    min-height:72px;

    padding:15px 16px;

    border:
        1px solid
        #333333;

    border-radius:13px;

    background:#181818;
    color:#ffffff;
}

.hsu-account-v2-role-card > span{
    color:#ff7b36;

    font-size:8px;
    letter-spacing:.13em;
}

.hsu-account-v2-role-card strong{
    color:#ffffff;

    font-size:14px;
}

.hsu-account-v2-role-card small{
    color:#c7c7c7;

    font-size:9px;
}


/* ---------------------------------------------------------
   09 · MAIN CONTENT PANELS
--------------------------------------------------------- */

.hsu-account-v2-panel{
    margin-bottom:18px;

    padding:
        clamp(21px,3vw,28px);

    border:
        1px solid
        #dededb;

    border-radius:18px;

    background:#ffffff;
    color:#111111;

    box-shadow:none;
}


/* ---------------------------------------------------------
   10 · TIP STATS
--------------------------------------------------------- */

.hsu-account-v2-stat-grid{
    gap:8px;
}

.hsu-account-v2-stat-grid > div{
    padding:16px;

    border:
        1px solid
        #ededeb;

    border-radius:12px;

    background:#f5f5f3;
    color:#111111;
}

.hsu-account-v2-stat-grid span{
    color:#555555;

    font-size:8px;
    font-weight:900;

    letter-spacing:.11em;
}

.hsu-account-v2-stat-grid strong{
    margin-top:7px;

    color:#111111;

    font-size:
        clamp(27px,4vw,38px);

    letter-spacing:-.04em;
}

.hsu-account-v2-team-results{
    gap:8px;
    margin-top:8px;
}

.hsu-account-v2-team-results > div{
    padding:
        14px
        16px;

    border:
        1px solid
        #e3e3e0;

    border-radius:12px;

    background:#ffffff;
}

.hsu-account-v2-team-results span{
    color:#555555;

    font-size:8px;
    letter-spacing:.08em;
}

.hsu-account-v2-team-results strong{
    color:#111111;

    font-size:16px;
}

.hsu-account-v2-team-results small{
    color:#656565;

    font-size:9px;
}


/* ---------------------------------------------------------
   11 · POINTS
--------------------------------------------------------- */

.hsu-account-v2-points-top{
    gap:22px;
    margin-bottom:18px;
}

.hsu-account-v2-points-top > div{
    min-width:145px;

    padding:16px;

    border-radius:12px;

    background:#111111;
    color:#ffffff;
}

.hsu-account-v2-points-top strong{
    color:#ff762f;

    font-size:36px;
    letter-spacing:-.04em;
}

.hsu-account-v2-points-top span{
    color:#ffffff;

    font-size:9px;
}

.hsu-account-v2-points-top p{
    color:#555555;

    font-size:12px;
}

.hsu-account-v2-earn-list{
    gap:8px;
}

.hsu-account-v2-earn-list > div{
    min-height:65px;

    padding:13px 14px;

    border:
        1px solid
        #e3e3e0;

    border-radius:11px;

    background:#fafaf9;
}

.hsu-account-v2-earn-list b{
    min-width:38px;

    color:#a94310;

    font-size:17px;
}

.hsu-account-v2-earn-list strong{
    color:#111111;

    font-size:11px;
}

.hsu-account-v2-earn-list small{
    color:#5c5c5c;

    font-size:9px;
}

.hsu-account-v2-legal{
    margin-top:17px;
    padding-top:15px;

    border-top:
        1px solid
        #e1e1df;

    color:#505050;

    font-size:9px;
}

.hsu-account-v2-legal strong{
    color:#111111;
}


/* ---------------------------------------------------------
   12 · FOOTER ACTIONS
--------------------------------------------------------- */

.hsu-account-v2-footer-actions{
    margin-top:22px;
}

.hsu-account-v2-footer-actions .button{
    min-height:42px;

    border-radius:10px;

    font-size:10px;
    font-weight:900;
}


/* ---------------------------------------------------------
   13 · DESKTOP WIDTH / VISUAL RHYTHM
--------------------------------------------------------- */

@media(min-width:901px){

    .hsu-account-v2 .shell{
        max-width:1100px;
    }

}


/* ---------------------------------------------------------
   14 · HOVER
--------------------------------------------------------- */

@media(hover:hover){

    .hsu-account-v2-action:hover{
        transform:translateY(-1px);

        border-color:#cfcfcb;

        box-shadow:
            0 7px 20px
            rgba(0,0,0,.055);
    }

    .hsu-account-v2-action-primary:hover{
        border-color:#e65a17;
    }

    .hsu-account-v2-scanner:hover{
        transform:translateY(-1px);

        border-color:#4b4b4b;

        box-shadow:
            0 8px 24px
            rgba(0,0,0,.18);
    }

    .hsu-account-v2-role-card:hover{
        transform:translateY(-1px);

        border-color:#4a4a4a;

        background:#1d1d1d;
    }

    .hsu-account-v2-balance:hover{
        transform:translateY(-1px);

        border-color:
            rgba(242,101,34,.65);
    }

}


/* ---------------------------------------------------------
   15 · MOBILE PREMIUM
--------------------------------------------------------- */

@media(max-width:620px){

    .hsu-account-v2-hero{
        padding:
            44px
            0
            27px;
    }

    .hsu-account-v2-hero::after{
        width:320px;
        height:320px;

        top:-120px;
        right:-130px;
    }

    .hsu-account-v2-hero-grid{
        gap:20px;
    }

    .hsu-account-v2-welcome h1{
        margin-top:7px;

        font-size:
            clamp(40px,13vw,54px);
    }

    .hsu-account-v2-welcome p{
        max-width:390px;

        color:#dddddd;

        font-size:13px;
    }

    .hsu-account-v2-balance{
        padding:
            15px
            17px;

        border-radius:14px;
    }

    .hsu-account-v2-balance strong{
        font-size:38px;
    }

    .hsu-account-v2-primary-actions{
        gap:7px;
        margin-bottom:18px;
    }

    .hsu-account-v2-action{
        min-height:125px;

        padding:14px;

        border-radius:13px;
    }

    .hsu-account-v2-action-icon{
        width:34px;
        height:34px;
    }

    .hsu-account-v2-role-zone{
        margin-bottom:18px;

        padding:
            18px
            14px;

        border-radius:17px;
    }

    .hsu-account-v2-role-zone
    .hsu-account-v2-section-head{
        margin-bottom:16px;
    }

    .hsu-account-v2-role-zone
    .hsu-account-v2-section-head p{
        color:#d1d1d1;

        font-size:10px;
    }

    .hsu-account-v2-scanner{
        padding:15px;

        border-radius:13px;
    }

    .hsu-account-v2-scanner::before{
        border-radius:
            13px
            0
            0
            13px;
    }

    .hsu-account-v2-scanner > b{
        padding:10px;

        border-radius:8px;

        background:#f26522;
        color:#111111;
    }

    .hsu-account-v2-role-card{
        min-height:68px;
    }

    .hsu-account-v2-panel{
        padding:
            19px
            15px;

        border-radius:16px;
    }

    .hsu-account-v2-section-head h2{
        font-size:27px;
    }

    .hsu-account-v2-stat-grid{
        gap:6px;
    }

    .hsu-account-v2-stat-grid > div{
        padding:
            13px
            9px;
    }

    .hsu-account-v2-stat-grid strong{
        font-size:25px;
    }

}


/* ---------------------------------------------------------
   16 · VERY SMALL MOBILE
--------------------------------------------------------- */

@media(max-width:390px){

    .hsu-account-v2-primary-actions{
        grid-template-columns:1fr;
    }

    .hsu-account-v2-action{
        display:grid;

        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;

        min-height:68px;
    }

    .hsu-account-v2-stat-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

    .hsu-account-v2-stat-grid span{
        font-size:7px;
    }

    .hsu-account-v2-stat-grid strong{
        font-size:22px;
    }

}



/* =========================================================
   HSU · ACCOUNT PIXEL POLISH · 22B.2A
   Final visual / contrast refinement
========================================================= */


/* ---------------------------------------------------------
   01 · PAGE RHYTHM
--------------------------------------------------------- */

.hsu-account-v2-main{
    padding-top:38px;
    padding-bottom:58px;
}

.hsu-account-v2-primary-actions{
    margin-bottom:28px;
}

.hsu-account-v2-role-zone{
    margin-bottom:28px;
}

.hsu-account-v2-panel{
    margin-bottom:18px;
}


/* ---------------------------------------------------------
   02 · TOP NAV CARDS
--------------------------------------------------------- */

.hsu-account-v2-action{
    min-height:82px;

    padding:
        15px
        16px;

    border-color:#d8d8d5;

    border-radius:14px;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,.025);

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.hsu-account-v2-action-icon{
    width:34px;
    height:34px;

    border-radius:10px;

    background:#f2f2f0;
}

.hsu-account-v2-action strong{
    font-size:12px;
    line-height:1.2;
}

.hsu-account-v2-action small{
    color:#565656;

    font-size:8px;
    line-height:1.35;
}

.hsu-account-v2-action-primary{
    border-color:#f26522;
    background:#f26522;
}

.hsu-account-v2-action-primary small{
    color:#3d1d0c;
}


/* refined abstract icon weight */

.hsu-account-v2-action:nth-child(1)
.hsu-account-v2-action-icon::before{
    content:"";
    width:10px;
    height:10px;

    border:2px solid #ffffff;
    border-radius:50%;
}

.hsu-account-v2-action:nth-child(2)
.hsu-account-v2-action-icon::before{
    content:"";
    width:9px;
    height:9px;

    border:1.5px solid #111111;

    transform:rotate(45deg);
}

.hsu-account-v2-action:nth-child(3)
.hsu-account-v2-action-icon::before{
    content:"";
    width:0;
    height:0;

    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:9px solid #111111;
}

.hsu-account-v2-action:nth-child(4)
.hsu-account-v2-action-icon::before{
    content:"";
    width:10px;
    height:10px;

    background:#111111;

    clip-path:polygon(
        50% 0,
        61% 36%,
        100% 50%,
        61% 64%,
        50% 100%,
        39% 64%,
        0 50%,
        39% 36%
    );
}


/* ---------------------------------------------------------
   03 · MANAGEMENT HIERARCHY
--------------------------------------------------------- */

.hsu-account-v2-role-zone{
    padding:25px;

    border-radius:18px;
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head{
    margin-bottom:18px;
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head h2{
    font-size:
        clamp(25px,2.6vw,32px);
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head p{
    color:#d2d2d2;
}


/* ---------------------------------------------------------
   04 · SCANNER FINAL
--------------------------------------------------------- */

.hsu-account-v2-scanner{
    min-height:92px;

    border-color:#393939;

    background:#181818;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

.hsu-account-v2-scanner::before{
    width:4px;
}

.hsu-account-v2-scanner strong{
    font-size:
        clamp(16px,1.8vw,20px);
}

.hsu-account-v2-scanner p{
    color:#d0d0d0;
}

.hsu-account-v2-scanner > b{
    min-width:112px;

    text-align:center;

    color:#111111;
    background:#f26522;
}


/* ---------------------------------------------------------
   05 · SECONDARY MANAGEMENT
--------------------------------------------------------- */

.hsu-account-v2-role-card{
    min-height:68px;

    border-color:#353535;

    background:#191919;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease;
}

.hsu-account-v2-role-card strong{
    font-size:13px;
}

.hsu-account-v2-role-card small{
    color:#d0d0d0;
}


/* ---------------------------------------------------------
   06 · CONTENT HEADINGS
--------------------------------------------------------- */

.hsu-account-v2-panel
.hsu-account-v2-section-head h2{
    font-size:
        clamp(25px,2.7vw,33px);
}

.hsu-account-v2-panel
.hsu-account-v2-section-head{
    margin-bottom:17px;
}


/* ---------------------------------------------------------
   07 · STATS
--------------------------------------------------------- */

.hsu-account-v2-stat-grid > div{
    min-height:78px;

    padding:15px;

    background:#f5f5f3;
}

.hsu-account-v2-stat-grid strong{
    font-size:
        clamp(26px,3vw,34px);
}

.hsu-account-v2-team-results > div{
    min-height:55px;
}


/* ---------------------------------------------------------
   08 · POINTS
--------------------------------------------------------- */

.hsu-account-v2-points-top > div{
    min-width:135px;

    padding:15px;

    border-radius:11px;
}

.hsu-account-v2-points-top strong{
    font-size:34px;
}

.hsu-account-v2-points-top p{
    color:#4e4e4e;
}

.hsu-account-v2-earn-list > div{
    min-height:60px;
}

.hsu-account-v2-earn-list b{
    color:#a33d0a;
}


/* ---------------------------------------------------------
   09 · FOOTER BUTTONS
--------------------------------------------------------- */

.hsu-account-v2-footer-actions{
    gap:8px;
    margin-top:20px;
}

.hsu-account-v2-footer-actions .button{
    min-height:38px;

    padding:
        0
        20px;

    border-radius:8px;

    font-size:9px;
    letter-spacing:.01em;
}

.hsu-account-v2-footer-actions
.button:not(.button-secondary){
    border:1px solid #f26522;

    background:#f26522;
    color:#111111;
}

.hsu-account-v2-footer-actions
.button-secondary{
    border:1px solid #767676;

    background:#858585;
    color:#111111;
}


/* ---------------------------------------------------------
   10 · KEYBOARD ACCESSIBILITY
--------------------------------------------------------- */

.hsu-account-v2 a:focus-visible,
.hsu-account-v2 button:focus-visible{
    outline:
        3px solid
        #ff7a33;

    outline-offset:3px;
}


/* ---------------------------------------------------------
   11 · CONTRAST FREEZE
--------------------------------------------------------- */

/*
   Explicit text colors are repeated here intentionally.
   This protects the account UI against inherited global
   theme colors causing unreadable combinations.
*/

.hsu-account-v2-panel,
.hsu-account-v2-stat-grid > div,
.hsu-account-v2-team-results > div,
.hsu-account-v2-earn-list > div{
    color:#111111;
}

.hsu-account-v2-panel p,
.hsu-account-v2-panel small{
    color:#555555;
}

.hsu-account-v2-panel strong,
.hsu-account-v2-panel h2{
    color:#111111;
}

.hsu-account-v2-role-zone,
.hsu-account-v2-role-zone h2,
.hsu-account-v2-role-zone strong{
    color:#ffffff;
}

.hsu-account-v2-role-zone p,
.hsu-account-v2-role-zone small{
    color:#d0d0d0;
}

.hsu-account-v2-role-zone
.hsu-account-v2-section-head > div > span,
.hsu-account-v2-scanner small,
.hsu-account-v2-role-card > span{
    color:#ff7b36;
}


/* ---------------------------------------------------------
   12 · DESKTOP
--------------------------------------------------------- */

@media(min-width:901px){

    .hsu-account-v2 .shell{
        max-width:1080px;
    }

}


/* ---------------------------------------------------------
   13 · MOBILE
--------------------------------------------------------- */

@media(max-width:620px){

    .hsu-account-v2-main{
        padding-top:22px;
        padding-bottom:42px;
    }

    .hsu-account-v2-primary-actions{
        margin-bottom:20px;
    }

    .hsu-account-v2-role-zone{
        margin-bottom:20px;

        padding:
            18px
            14px;
    }

    .hsu-account-v2-role-zone
    .hsu-account-v2-section-head h2{
        font-size:25px;
    }

    .hsu-account-v2-panel
    .hsu-account-v2-section-head h2{
        font-size:25px;
    }

    .hsu-account-v2-scanner{
        min-height:88px;
    }

    .hsu-account-v2-scanner > b{
        min-width:auto;
    }

    .hsu-account-v2-footer-actions{
        display:grid;

        grid-template-columns:
            1fr
            1fr;
    }

    .hsu-account-v2-footer-actions .button{
        width:100%;
        padding:0 10px;
    }

}


/* ---------------------------------------------------------
   14 · REDUCED MOTION
--------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

    .hsu-account-v2 *,
    .hsu-account-v2 *::before,
    .hsu-account-v2 *::after{
        scroll-behavior:auto !important;
        transition:none !important;
    }

}



/* ==========================================================
   HSU · FANZONE HUB UX V2 · 22C.1
   ========================================================== */


/* ----------------------------------------------------------
   GLOBAL FANZONE POLISH
   ---------------------------------------------------------- */

.fanzone-hero,
.fanzone-potm-section,
.fanzone-dark-section,
.fanzone-season-potm,
.fanzone-community,
.hsu-fanzone-v2-hub{
    position:relative;
}

.fanzone-section-heading h2{
    letter-spacing:-.045em;
}

.fanzone-potm-team,
.fanzone-tip-game,
.fanzone-season-potm-card{
    border-radius:22px;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.fanzone-hero{
    min-height:auto;
    padding-top:clamp(62px,7vw,100px);
    padding-bottom:clamp(54px,6vw,86px);
}

.fanzone-hero-inner{
    align-items:center;
}

.fanzone-hero-copy h1{
    max-width:760px;
    font-size:clamp(3.25rem,7vw,6.6rem);
    line-height:.88;
    letter-spacing:-.065em;
}

.fanzone-hero-copy .lead{
    max-width:610px;
    margin-top:25px;
    font-size:clamp(1rem,1.4vw,1.18rem);
    line-height:1.65;
}

.fanzone-hero-actions{
    margin-top:30px;
}

.fanzone-user-welcome{
    margin-top:34px;
    border-radius:18px;
}

.fanzone-hero-card{
    border-radius:26px;
    overflow:hidden;
}


/* ----------------------------------------------------------
   HUB
   ---------------------------------------------------------- */

.hsu-fanzone-v2-hub{
    z-index:4;
    padding:46px 0 58px;
    background:#f5f3ee;
    color:#111;
}

.hsu-fanzone-v2-hub .shell{
    position:relative;
}

.hsu-fanzone-v2-hub-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:25px;
}

.hsu-fanzone-v2-hub-head > div > span{
    display:block;
    margin-bottom:8px;
    color:#e95d0f;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.17em;
}

.hsu-fanzone-v2-hub-head h2{
    margin:0;
    color:#111;
    font-size:clamp(1.8rem,3vw,2.7rem);
    line-height:1.02;
    letter-spacing:-.045em;
}

.hsu-fanzone-v2-hub-head h2 strong{
    display:block;
    color:#e95d0f;
    font-weight:inherit;
}

.hsu-fanzone-v2-hub-head p{
    max-width:330px;
    margin:0 0 3px;
    color:#66625d;
    font-size:.93rem;
    line-height:1.55;
}

.hsu-fanzone-v2-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.hsu-fanzone-v2-action{
    min-height:128px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:19px;
    color:#111;
    text-decoration:none;
    background:#fff;
    border:1px solid rgba(17,17,17,.09);
    border-radius:18px;
    box-shadow:
        0 7px 25px rgba(17,17,17,.035);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.hsu-fanzone-v2-action-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#111;
    background:#f2f0eb;
    font-size:.9rem;
    font-weight:950;
    letter-spacing:-.04em;
}

.hsu-fanzone-v2-action-icon > span{
    display:block;
}

.hsu-fanzone-v2-action div{
    min-width:0;
    flex:1;
}

.hsu-fanzone-v2-action strong{
    display:block;
    color:inherit;
    font-size:.98rem;
    line-height:1.22;
}

.hsu-fanzone-v2-action small{
    display:block;
    margin-top:5px;
    color:#77736d;
    font-size:.73rem;
    line-height:1.35;
}

.hsu-fanzone-v2-action > b{
    color:#e95d0f;
    font-size:1.12rem;
}

.hsu-fanzone-v2-action-primary{
    color:#fff;
    background:#111;
    border-color:#111;
}

.hsu-fanzone-v2-action-primary
.hsu-fanzone-v2-action-icon{
    color:#fff;
    background:#e95d0f;
}

.hsu-fanzone-v2-action-primary small{
    color:rgba(255,255,255,.63);
}


/* ----------------------------------------------------------
   POTM · LIGHT EXPERIENCE
   ---------------------------------------------------------- */

.fanzone-potm-section{
    padding-top:clamp(68px,7vw,104px);
    padding-bottom:clamp(72px,8vw,116px);
    background:#fff;
}

.fanzone-potm-section
.fanzone-section-heading{
    margin-bottom:35px;
}

.fanzone-potm-intro{
    max-width:630px;
    color:#66625d;
    line-height:1.65;
}

.fanzone-potm-points{
    border-radius:18px;
}

.fanzone-potm-grid{
    gap:18px;
}

.fanzone-potm-team{
    overflow:hidden;
    border:1px solid rgba(17,17,17,.09);
    box-shadow:
        0 10px 34px rgba(17,17,17,.045);
}

.fanzone-potm-player-card{
    border-radius:16px;
}

.fanzone-potm-submit{
    min-height:52px;
}


/* ----------------------------------------------------------
   TIPPSPIEL · DARK MATCHDAY ZONE
   ---------------------------------------------------------- */

.fanzone-dark-section{
    padding-top:clamp(72px,8vw,116px);
    padding-bottom:clamp(72px,8vw,116px);
}

.fanzone-dark-section
.fanzone-section-heading{
    margin-bottom:38px;
}

.fanzone-tip-intro{
    max-width:640px;
    line-height:1.65;
}

.fanzone-score-rules{
    border-radius:18px;
}

.fanzone-tip-games{
    gap:18px;
}

.fanzone-tip-game{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11);
}

.fanzone-real-match{
    border-radius:18px;
}

.fanzone-score-select select{
    min-height:52px;
    border-radius:13px;
}

.fanzone-tip-submit{
    min-height:52px;
}


/* ----------------------------------------------------------
   SEASON POTM
   ---------------------------------------------------------- */

.fanzone-season-potm{
    padding-top:clamp(72px,8vw,112px);
    padding-bottom:clamp(72px,8vw,112px);
    background:#f5f3ee;
}

.fanzone-season-potm-grid{
    gap:18px;
}

.fanzone-season-potm-card{
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(17,17,17,.08);
    box-shadow:
        0 9px 30px rgba(17,17,17,.035);
}


/* ----------------------------------------------------------
   DESKTOP INTERACTION
   ---------------------------------------------------------- */

@media (hover:hover) and (pointer:fine){

    .hsu-fanzone-v2-action:hover{
        transform:translateY(-3px);
        border-color:rgba(233,93,15,.38);
        box-shadow:
            0 14px 36px rgba(17,17,17,.075);
    }

    .hsu-fanzone-v2-action-primary:hover{
        border-color:#111;
    }
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width:980px){

    .hsu-fanzone-v2-actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hsu-fanzone-v2-hub-head{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

    .hsu-fanzone-v2-hub-head p{
        max-width:520px;
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:640px){

    .fanzone-hero{
        padding-top:48px;
        padding-bottom:42px;
    }

    .fanzone-hero-copy h1{
        font-size:clamp(2.8rem,15vw,4.35rem);
        line-height:.9;
    }

    .fanzone-hero-copy .lead{
        margin-top:20px;
        font-size:.96rem;
        line-height:1.55;
    }

    .fanzone-hero-actions{
        margin-top:24px;
    }

    .fanzone-user-welcome{
        margin-top:25px;
    }

    .hsu-fanzone-v2-hub{
        padding:34px 0 42px;
    }

    .hsu-fanzone-v2-hub-head{
        margin-bottom:19px;
    }

    .hsu-fanzone-v2-hub-head h2{
        font-size:1.8rem;
    }

    .hsu-fanzone-v2-hub-head p{
        font-size:.84rem;
    }

    .hsu-fanzone-v2-actions{
        grid-template-columns:1fr;
        gap:9px;
    }

    .hsu-fanzone-v2-action{
        min-height:84px;
        padding:14px 15px;
        border-radius:15px;
    }

    .hsu-fanzone-v2-action-icon{
        width:44px;
        height:44px;
        flex-basis:44px;
        border-radius:12px;
    }

    .hsu-fanzone-v2-action strong{
        font-size:.94rem;
    }

    .hsu-fanzone-v2-action small{
        margin-top:3px;
        font-size:.7rem;
    }

    .fanzone-potm-section,
    .fanzone-dark-section,
    .fanzone-season-potm{
        padding-top:58px;
        padding-bottom:64px;
    }

    .fanzone-section-heading h2{
        font-size:clamp(2rem,10vw,2.8rem);
        line-height:.96;
    }

    .fanzone-potm-team,
    .fanzone-tip-game,
    .fanzone-season-potm-card{
        border-radius:17px;
    }

    .fanzone-potm-submit,
    .fanzone-tip-submit{
        width:100%;
        min-height:52px;
    }
}


/* ----------------------------------------------------------
   SMALL MOBILE
   ---------------------------------------------------------- */

@media (max-width:390px){

    .fanzone-hero-copy h1{
        font-size:2.65rem;
    }

    .hsu-fanzone-v2-action{
        padding-left:12px;
        padding-right:12px;
    }

    .hsu-fanzone-v2-action-icon{
        width:41px;
        height:41px;
        flex-basis:41px;
    }
}



/* =========================================================
   HSU · FANZONE PIXEL POLISH · 22C.2
   Responsive + Contrast Freeze
========================================================= */


/* ---------------------------------------------------------
   01 · GENERAL RHYTHM
--------------------------------------------------------- */

.hsu-fanzone-v2-hub,
.fanzone-potm-section,
.fanzone-dark-section,
.fanzone-season-potm{
    scroll-margin-top:90px;
}


/* ---------------------------------------------------------
   02 · HUB POLISH
--------------------------------------------------------- */

.hsu-fanzone-v2-hub-head{
    margin-bottom:24px;
}

.hsu-fanzone-v2-action{
    min-width:0;
}

.hsu-fanzone-v2-action div{
    min-width:0;
}

.hsu-fanzone-v2-action strong,
.hsu-fanzone-v2-action small{
    overflow-wrap:normal;
    word-break:normal;
}

.hsu-fanzone-v2-action small{
    color:#66625d;
}

.hsu-fanzone-v2-action-primary small{
    color:#d2d2d2;
}


/* ---------------------------------------------------------
   03 · POTM
--------------------------------------------------------- */

.fanzone-potm-section{
    padding-top:clamp(64px,7vw,96px);
    padding-bottom:clamp(68px,7vw,102px);
}

.fanzone-potm-section
.fanzone-section-heading{
    margin-bottom:30px;
}

.fanzone-potm-grid{
    align-items:stretch;
}

.fanzone-potm-team{
    height:100%;
}

.fanzone-potm-empty{
    min-height:150px;
}

.fanzone-potm-empty p{
    max-width:540px;
}


/* contrast safety */

.fanzone-potm-section,
.fanzone-potm-section h2,
.fanzone-potm-section h3,
.fanzone-potm-section h4,
.fanzone-potm-section strong{
    color:#111111;
}

.fanzone-potm-section p,
.fanzone-potm-section small{
    color:#5d5d5d;
}


/* ---------------------------------------------------------
   04 · TIPPSPIEL
--------------------------------------------------------- */

.fanzone-dark-section{
    padding-top:clamp(68px,7vw,102px);
    padding-bottom:clamp(70px,7vw,106px);
}

.fanzone-dark-section
.fanzone-section-heading{
    margin-bottom:32px;
}

.fanzone-tip-games{
    align-items:stretch;
}

.fanzone-tip-game{
    height:100%;
}


/*
 * FIX:
 * Modulnummern 01 / 02 dürfen niemals umbrechen.
 */

.fanzone-module-number{
    display:block;

    flex:0 0 auto;

    min-width:2.3ch;
    width:auto;

    white-space:nowrap;
    word-break:keep-all;
    overflow-wrap:normal;

    line-height:.9;

    text-align:right;
}


/* waiting state */

.fanzone-match-waiting{
    min-height:160px;
}

.fanzone-ranking-empty-small{
    min-height:54px;
}


/* dark contrast freeze */

.fanzone-dark-section,
.fanzone-dark-section h2,
.fanzone-dark-section h3,
.fanzone-dark-section h4,
.fanzone-dark-section strong{
    color:#ffffff;
}

.fanzone-dark-section p,
.fanzone-dark-section small{
    color:#bdbdbd;
}

.fanzone-dark-section
.fanzone-ranking-empty-small{
    color:#a9a9a9;
}

.fanzone-dark-section
.fanzone-module-number{
    color:#343434;
}


/* ---------------------------------------------------------
   05 · PLAYER OF THE SEASON
--------------------------------------------------------- */

.fanzone-season-potm{
    padding-top:clamp(66px,7vw,100px);
    padding-bottom:clamp(68px,7vw,102px);
}

.fanzone-season-potm
.fanzone-section-heading{
    align-items:flex-end;
    margin-bottom:28px;
}

.fanzone-season-potm-badge{
    align-self:flex-end;

    margin:0 0 4px auto;

    transform:none;
}

.fanzone-season-potm-grid{
    align-items:stretch;
}

.fanzone-season-potm-card{
    height:100%;
}

.fanzone-season-potm-empty{
    min-height:125px;
}

.fanzone-season-potm-empty p{
    max-width:520px;
}


/* light contrast freeze */

.fanzone-season-potm,
.fanzone-season-potm h2,
.fanzone-season-potm h3,
.fanzone-season-potm strong{
    color:#111111;
}

.fanzone-season-potm p,
.fanzone-season-potm small{
    color:#5b5b5b;
}


/* ---------------------------------------------------------
   06 · FOCUS / KEYBOARD
--------------------------------------------------------- */

.hsu-fanzone-v2-hub a:focus-visible,
.fanzone-potm-section a:focus-visible,
.fanzone-potm-section button:focus-visible,
.fanzone-dark-section a:focus-visible,
.fanzone-dark-section button:focus-visible,
.fanzone-dark-section select:focus-visible,
.fanzone-season-potm a:focus-visible{
    outline:3px solid #ff6a00;
    outline-offset:3px;
}


/* ---------------------------------------------------------
   07 · TABLET
--------------------------------------------------------- */

@media(max-width:980px){

    .fanzone-module-number{
        min-width:2.5ch;
    }

    .fanzone-season-potm-badge{
        margin-left:auto;
    }

}


/* ---------------------------------------------------------
   08 · MOBILE
--------------------------------------------------------- */

@media(max-width:640px){

    .hsu-fanzone-v2-hub,
    .fanzone-potm-section,
    .fanzone-dark-section,
    .fanzone-season-potm{
        scroll-margin-top:70px;
    }


    .fanzone-potm-section,
    .fanzone-dark-section,
    .fanzone-season-potm{
        padding-top:54px;
        padding-bottom:58px;
    }


    .fanzone-potm-section
    .fanzone-section-heading,
    .fanzone-dark-section
    .fanzone-section-heading,
    .fanzone-season-potm
    .fanzone-section-heading{
        margin-bottom:22px;
    }


    .fanzone-potm-empty,
    .fanzone-match-waiting,
    .fanzone-season-potm-empty{
        min-height:0;
    }


    .fanzone-module-top{
        align-items:flex-start;
    }


    .fanzone-module-number{
        min-width:2.4ch;

        white-space:nowrap;

        font-size:clamp(
            2.5rem,
            13vw,
            4.4rem
        );

        line-height:.9;
    }


    .fanzone-season-potm-badge{
        align-self:flex-start;

        margin:
            4px
            0
            0
            auto;
    }

}


/* ---------------------------------------------------------
   09 · VERY SMALL MOBILE
--------------------------------------------------------- */

@media(max-width:390px){

    .fanzone-module-number{
        min-width:2.4ch;
        font-size:2.55rem;
    }

    .hsu-fanzone-v2-action{
        min-width:0;
    }

    .hsu-fanzone-v2-action strong{
        font-size:.9rem;
    }

}


/* ---------------------------------------------------------
   10 · REDUCED MOTION
--------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

    .hsu-fanzone-v2-hub *,
    .fanzone-potm-section *,
    .fanzone-dark-section *,
    .fanzone-season-potm *{
        transition:none !important;
        scroll-behavior:auto !important;
    }

}




/* =========================================================
   HSU · 22D.1 · WALLET UX V2
   Premium / Mobile First / Contrast Safe
   ========================================================= */


/* ---------- PAGE ---------- */

body:has(.hsu-wallet-hero){
    background:#090909;
}

body:has(.hsu-wallet-hero) .section{
    background:#090909;
    color:#fff;
    padding-top:34px;
    padding-bottom:72px;
}


/* ---------- HERO ---------- */

.hsu-wallet-hero{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(242,101,34,.18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #090909 0%,
            #111 58%,
            #171717 100%
        );
    border-bottom:1px solid rgba(255,255,255,.08);
}

.hsu-wallet-hero::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-180px;
    bottom:-220px;
    border:1px solid rgba(242,101,34,.16);
    border-radius:50%;
    pointer-events:none;
}

.hsu-wallet-hero-inner{
    min-height:310px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:48px;
    padding-top:62px;
    padding-bottom:62px;
}

.hsu-wallet-hero .eyebrow{
    display:block;
    margin-bottom:13px;
    color:#f26522;
    font-size:12px;
    font-weight:900;
    letter-spacing:.18em;
}

.hsu-wallet-hero h1{
    margin:0;
    max-width:620px;
    color:#fff;
    font-size:clamp(48px,7vw,88px);
    line-height:.92;
    letter-spacing:-.055em;
    font-weight:950;
}

.hsu-wallet-hero h1 .orange{
    color:#f26522;
}

.hsu-wallet-hero p{
    max-width:520px;
    margin:23px 0 0;
    color:#c8c8c8;
    font-size:17px;
    line-height:1.65;
}


/* ---------- BALANCE ---------- */

.hsu-wallet-balance{
    flex:0 0 auto;
    min-width:245px;
    padding:29px 32px;
    background:#fff;
    color:#111;
    border-radius:24px;
    box-shadow:
        0 22px 60px rgba(0,0,0,.30);
}

.hsu-wallet-balance span{
    display:block;
    color:#666;
    font-size:10px;
    font-weight:900;
    letter-spacing:.18em;
}

.hsu-wallet-balance strong{
    display:block;
    margin:7px 0 0;
    color:#111;
    font-size:66px;
    line-height:.95;
    letter-spacing:-.055em;
}

.hsu-wallet-balance small{
    display:block;
    margin-top:9px;
    color:#f26522;
    font-size:11px;
    font-weight:950;
    letter-spacing:.13em;
}


/* ---------- NAV ---------- */

.hsu-wallet-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:48px;
}

body .hsu-wallet-nav a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0 17px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    color:#fff;
    background:rgba(255,255,255,.04);
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

body .hsu-wallet-nav a:hover{
    background:#fff;
    border-color:#fff;
    color:#111;
    transform:translateY(-1px);
}


/* ---------- SECTION HEADINGS ---------- */

.hsu-wallet-title,
.hsu-wallet-passes-head,
.hsu-wallet-history-head{
    margin-bottom:24px;
}

body .hsu-wallet-title .eyebrow,
body .hsu-wallet-passes-head .eyebrow,
body .hsu-wallet-history-head .eyebrow{
    display:block;
    margin-bottom:8px;
    color:#f26522;
    font-size:10px;
    line-height:1;
    font-weight:950;
    letter-spacing:.18em;
}

body .hsu-wallet-title h2,
body .hsu-wallet-passes-head h2,
body .hsu-wallet-history-head h2{
    margin:0;
    color:#fff;
    font-size:clamp(32px,4.5vw,52px);
    line-height:1;
    letter-spacing:-.04em;
}

body .hsu-wallet-title h2 .orange,
body .hsu-wallet-passes-head h2 .orange,
body .hsu-wallet-history-head h2 .orange{
    color:#f26522;
}

body .hsu-wallet-history-head p{
    max-width:600px;
    margin:13px 0 0;
    color:#aaa;
    line-height:1.55;
}


/* ---------- REWARD GRID ---------- */

.hsu-wallet-rewards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-bottom:72px;
}

body .hsu-wallet-reward{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:340px;
    padding:27px;
    overflow:hidden;
    background:#f7f5f1;
    color:#111;
    border:1px solid rgba(0,0,0,.08);
    border-radius:22px;
    box-shadow:
        0 18px 48px rgba(0,0,0,.18);
}

body .hsu-wallet-reward.available{
    border-top:4px solid #f26522;
}

body .hsu-wallet-reward.locked,
body .hsu-wallet-reward.inactive,
body .hsu-wallet-reward.expired,
body .hsu-wallet-reward.sold-out,
body .hsu-wallet-reward.limit-reached,
body .hsu-wallet-reward.unavailable{
    background:#e9e7e3;
}

.hsu-wallet-reward-top{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    column-gap:10px;
}

.hsu-wallet-reward-top > span{
    grid-column:1;
    color:#777;
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
}

.hsu-wallet-reward-top strong{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
    color:#111;
    font-size:40px;
    line-height:1;
    letter-spacing:-.04em;
}

.hsu-wallet-reward-top small{
    grid-column:1;
    margin-top:4px;
    color:#999;
    font-size:9px;
    font-weight:900;
    letter-spacing:.13em;
}

.hsu-wallet-reward-state{
    align-self:flex-start;
    margin-top:23px;
    padding:7px 10px;
    border-radius:999px;
    font-size:9px;
    font-weight:950;
    letter-spacing:.11em;
}

.hsu-wallet-reward-state.available{
    background:#111;
    color:#fff;
}

.hsu-wallet-reward-state.locked{
    background:#ddd8d1;
    color:#403b36;
}

.hsu-wallet-reward-state.inactive,
.hsu-wallet-reward-state.expired,
.hsu-wallet-reward-state.sold-out,
.hsu-wallet-reward-state.limit-reached,
.hsu-wallet-reward-state.unavailable{
    background:#d6d2cc;
    color:#49443f;
}

.hsu-wallet-reward-state.scheduled{
    background:#fff0e8;
    color:#a23c0c;
}

body .hsu-wallet-reward h3{
    margin:19px 0 8px;
    color:#111;
    font-size:25px;
    line-height:1.08;
    letter-spacing:-.025em;
}

body .hsu-wallet-reward p{
    margin:0 0 18px;
    color:#595959;
    font-size:14px;
    line-height:1.55;
}

.hsu-wallet-partners{
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid rgba(0,0,0,.09);
}

.hsu-wallet-partners span{
    display:block;
    margin-bottom:4px;
    color:#888;
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
}

body .hsu-wallet-partners strong{
    color:#222;
    font-size:13px;
}

.hsu-wallet-reward form,
.hsu-wallet-progress,
.hsu-wallet-unavailable{
    margin-top:18px;
}

.hsu-wallet-reward form .button{
    width:100%;
    min-height:50px;
    border-radius:13px;
    font-weight:900;
}

.hsu-wallet-reward form .button-primary{
    background:#f26522;
    border-color:#f26522;
    color:#fff;
}

.hsu-wallet-progress > div{
    height:7px;
    overflow:hidden;
    background:#d8d4ce;
    border-radius:999px;
}

.hsu-wallet-progress > div span{
    display:block;
    height:100%;
    background:#f26522;
    border-radius:inherit;
}

.hsu-wallet-progress small{
    display:block;
    margin-top:9px;
    color:#555;
}

.hsu-wallet-progress strong{
    color:#111;
}

.hsu-wallet-unavailable{
    padding:13px 15px;
    background:rgba(0,0,0,.05);
    border-radius:12px;
}

.hsu-wallet-unavailable strong{
    display:block;
    color:#222;
    font-size:11px;
}

.hsu-wallet-unavailable span{
    display:block;
    margin-top:3px;
    color:#666;
    font-size:12px;
}


/* ---------- ACTIVE PASSES ---------- */

.hsu-wallet-passes-head{
    padding-top:6px;
}

.hsu-wallet-active-empty{
    margin-bottom:68px;
}

body .hsu-wallet-empty{
    padding:28px;
    background:#151515;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
}

body .hsu-wallet-empty strong{
    display:block;
    color:#fff;
    font-size:17px;
}

body .hsu-wallet-empty p{
    margin:6px 0 0;
    color:#aaa;
    line-height:1.5;
}

.hsu-wallet-active-pass-list{
    display:grid;
    gap:13px;
    margin-bottom:68px;
}

body .hsu-wallet-pass-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:22px 24px;
    background:#fff;
    color:#111;
    border:1px solid rgba(0,0,0,.08);
    border-left:5px solid #f26522;
    border-radius:18px;
}

.hsu-wallet-pass-row > div:first-child{
    min-width:0;
}

.hsu-wallet-pass-status{
    display:inline-flex;
    margin-bottom:8px;
    padding:6px 9px;
    background:#111;
    color:#fff;
    border-radius:999px;
    font-size:9px;
    font-weight:950;
    letter-spacing:.12em;
}

.hsu-wallet-pass-status.pending{
    background:#f26522;
    color:#fff;
}

body .hsu-wallet-pass-row strong{
    display:block;
    color:#111;
    font-size:20px;
}

body .hsu-wallet-pass-row small{
    display:block;
    margin-top:4px;
    color:#666;
}

.hsu-wallet-pass-row-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
}

.hsu-wallet-pass-row-actions .button{
    min-height:45px;
    border-radius:12px;
}

.hsu-wallet-pass-row-actions .button-primary{
    background:#f26522;
    border-color:#f26522;
    color:#fff;
}


/* ---------- HISTORY ---------- */

.hsu-wallet-history{
    margin-top:8px;
}

.hsu-wallet-history-list{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:#121212;
}

.hsu-wallet-history-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 20px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.hsu-wallet-history-row:last-child{
    border-bottom:0;
}

.hsu-wallet-history-main{
    min-width:0;
}

.hsu-wallet-history-status{
    display:inline-flex;
    margin-bottom:6px;
    color:#aaa;
    font-size:9px;
    font-weight:950;
    letter-spacing:.12em;
}

.hsu-wallet-history-status.redeemed{
    color:#f26522;
}

.hsu-wallet-history-main strong{
    display:block;
    color:#fff;
    font-size:15px;
}

.hsu-wallet-history-main small{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:4px;
    color:#8f8f8f;
    font-size:12px;
}

.hsu-wallet-history-id{
    flex:0 0 auto;
    color:#666;
    font-size:11px;
    font-weight:800;
}


/* ---------- LEGAL ---------- */

body .hsu-wallet-legal{
    display:flex;
    gap:14px;
    margin-top:32px;
    padding:17px 19px;
    background:#111;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
}

body .hsu-wallet-legal strong{
    flex:0 0 auto;
    color:#fff;
}

body .hsu-wallet-legal span{
    color:#8e8e8e;
    line-height:1.45;
}


/* ---------- MESSAGES ---------- */

body:has(.hsu-wallet-hero) .hsu-control-message{
    margin-bottom:28px;
    padding:14px 17px;
    border-radius:12px;
    font-weight:750;
}

body:has(.hsu-wallet-hero) .hsu-control-message.success{
    background:#e8f6ed;
    color:#165c31;
}

body:has(.hsu-wallet-hero) .hsu-control-message.error{
    background:#fae7e7;
    color:#8c2020;
}


/* ---------- TABLET ---------- */

@media(max-width:820px){

    .hsu-wallet-hero-inner{
        min-height:0;
        padding-top:48px;
        padding-bottom:48px;
    }

    .hsu-wallet-balance{
        min-width:200px;
    }

    .hsu-wallet-rewards{
        grid-template-columns:1fr;
    }

}


/* ---------- MOBILE ---------- */

@media(max-width:640px){

    body:has(.hsu-wallet-hero) .section{
        padding-top:24px;
        padding-bottom:52px;
    }

    .hsu-wallet-hero-inner{
        display:block;
        padding-top:38px;
        padding-bottom:38px;
    }

    .hsu-wallet-hero h1{
        font-size:52px;
    }

    .hsu-wallet-hero p{
        margin-top:17px;
        font-size:15px;
    }

    .hsu-wallet-balance{
        width:100%;
        min-width:0;
        margin-top:28px;
        padding:22px 24px;
        border-radius:18px;
    }

    .hsu-wallet-balance strong{
        font-size:54px;
    }

    .hsu-wallet-nav{
        margin-bottom:38px;
    }

    body .hsu-wallet-nav a{
        min-height:42px;
        padding:0 13px;
        font-size:12px;
    }

    .hsu-wallet-rewards{
        gap:13px;
        margin-bottom:54px;
    }

    body .hsu-wallet-reward{
        min-height:0;
        padding:22px;
        border-radius:18px;
    }

    .hsu-wallet-reward-top strong{
        font-size:34px;
    }

    body .hsu-wallet-reward h3{
        font-size:22px;
    }

    body .hsu-wallet-pass-row{
        display:block;
        padding:20px;
    }

    .hsu-wallet-pass-row-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        margin-top:18px;
    }

    .hsu-wallet-pass-row-actions .button,
    .hsu-wallet-pass-row-actions form,
    .hsu-wallet-pass-row-actions form .button{
        width:100%;
    }

    .hsu-wallet-history-row{
        align-items:flex-start;
        padding:16px;
    }

    body .hsu-wallet-legal{
        display:block;
    }

    body .hsu-wallet-legal span{
        display:block;
        margin-top:5px;
    }

}


/* ---------- VERY SMALL ---------- */

@media(max-width:390px){

    .hsu-wallet-hero h1{
        font-size:46px;
    }

    .hsu-wallet-nav{
        display:grid;
        grid-template-columns:1fr;
    }

    body .hsu-wallet-nav a{
        justify-content:center;
    }

    .hsu-wallet-pass-row-actions{
        grid-template-columns:1fr;
    }

}



/* =========================================================
   HSU · 22D.2 · WALLET POLISH
   Points Display + Collapsible History
   ========================================================= */


/* POINTS:
   weg vom weißen Kalender-Look
   hin zu einer kompakten digitalen Member-Anzeige */

.hsu-wallet-balance{
    position:relative;
    min-width:310px;
    padding:24px 28px 24px 31px;

    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:22px;

    background:
        linear-gradient(
            135deg,
            #181818 0%,
            #101010 100%
        );

    color:#fff;

    border:
        1px solid rgba(255,255,255,.12);

    border-left:
        4px solid #f26522;

    border-radius:16px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);
}


.hsu-wallet-balance::before{
    content:"DEIN GUTHABEN";

    position:absolute;
    right:22px;
    top:18px;

    color:#707070;

    font-size:8px;
    font-weight:900;
    letter-spacing:.17em;
}


.hsu-wallet-balance span{
    grid-column:2;
    grid-row:1;

    align-self:end;

    margin:0 0 3px;

    color:#8d8d8d;

    font-size:9px;
    font-weight:900;
    letter-spacing:.16em;
}


.hsu-wallet-balance strong{
    grid-column:1;
    grid-row:1 / span 2;

    margin:0;

    color:#f26522;

    font-size:62px;
    line-height:.85;
    font-weight:950;
    letter-spacing:-.06em;
}


.hsu-wallet-balance small{
    grid-column:2;
    grid-row:2;

    align-self:start;

    margin:0;

    color:#fff;

    font-size:15px;
    line-height:1;
    font-weight:900;
    letter-spacing:.06em;
}


/* -----------------------------------------
   COLLAPSIBLE HISTORY
   ----------------------------------------- */

.hsu-wallet-history{
    margin-top:12px;
}


.hsu-wallet-history-details{
    overflow:hidden;

    background:#121212;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius:18px;
}


.hsu-wallet-history-summary{
    min-height:96px;
    padding:22px 24px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    cursor:pointer;

    list-style:none;

    transition:
        background .18s ease;
}


.hsu-wallet-history-summary::-webkit-details-marker{
    display:none;
}


.hsu-wallet-history-summary::marker{
    display:none;
    content:"";
}


.hsu-wallet-history-summary:hover{
    background:#181818;
}


.hsu-wallet-history-summary > div:first-child > span{
    display:block;

    margin-bottom:6px;

    color:#f26522;

    font-size:9px;
    font-weight:950;
    letter-spacing:.17em;
}


.hsu-wallet-history-summary > div:first-child > strong{
    display:block;

    color:#fff;

    font-size:23px;
    line-height:1.05;
    letter-spacing:-.025em;
}


.hsu-wallet-history-summary-meta{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:16px;
}


.hsu-wallet-history-summary-meta span{
    color:#8e8e8e;

    font-size:12px;
    font-weight:700;
}


.hsu-wallet-history-summary-meta b{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    background:#f26522;
    color:#fff;

    border-radius:50%;

    font-size:24px;
    line-height:1;
    font-weight:500;

    transition:
        transform .2s ease;
}


.hsu-wallet-history-details[open]
.hsu-wallet-history-summary-meta b{
    transform:rotate(45deg);
}


.hsu-wallet-history-content{
    padding:
        0 24px 24px;

    border-top:
        1px solid rgba(255,255,255,.08);
}


.hsu-wallet-history-content
.hsu-wallet-history-head{
    padding-top:25px;
    margin-bottom:20px;
}


/* Die große doppelte Überschrift
   innerhalb des geöffneten Dropdowns
   wird nicht mehr benötigt. */

.hsu-wallet-history-content
.hsu-wallet-history-head .eyebrow,

.hsu-wallet-history-content
.hsu-wallet-history-head h2{
    display:none;
}


.hsu-wallet-history-content
.hsu-wallet-history-head p{
    margin-top:0;
}


/* Historie kompakter */

.hsu-wallet-history-content
.hsu-wallet-history-list{
    border-radius:13px;
}


.hsu-wallet-history-content
.hsu-wallet-history-row{
    padding:14px 16px;
}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media(max-width:640px){

    .hsu-wallet-balance{
        width:100%;
        min-width:0;

        grid-template-columns:auto 1fr;

        padding:
            20px 21px;

        column-gap:17px;

        border-radius:14px;
    }


    .hsu-wallet-balance::before{
        right:18px;
        top:15px;
    }


    .hsu-wallet-balance strong{
        font-size:50px;
    }


    .hsu-wallet-balance small{
        font-size:13px;
    }


    .hsu-wallet-history-summary{
        min-height:82px;

        padding:
            18px 17px;

        gap:12px;
    }


    .hsu-wallet-history-summary
    > div:first-child > strong{
        font-size:19px;
    }


    .hsu-wallet-history-summary-meta{
        gap:9px;
    }


    .hsu-wallet-history-summary-meta span{
        font-size:10px;
    }


    .hsu-wallet-history-summary-meta b{
        width:34px;
        height:34px;

        font-size:21px;
    }


    .hsu-wallet-history-content{
        padding:
            0 14px 14px;
    }

}



/* =========================================================
   HSU · 22B.3 · MOBILE HERO TYPO FIX
   Kein Wortumbruch innerhalb von HALLO
   ========================================================= */

@media(max-width:620px){

    .hsu-account-v2-welcome{
        min-width:0;
        width:100%;
    }

    .hsu-account-v2-welcome h1{
        width:100%;
        max-width:none;

        font-size:clamp(42px,12.2vw,54px);
        line-height:.92;

        word-break:normal;
        overflow-wrap:normal;
        hyphens:none;
    }

    .hsu-account-v2-welcome h1 span{
        display:block;

        width:100%;

        word-break:normal;
        overflow-wrap:normal;
        hyphens:none;
    }

}

@media(max-width:380px){

    .hsu-account-v2-welcome h1{
        font-size:43px;
    }

}



/* =========================================================
   HSU · 22B.4 · MOBILE ACCOUNT HERO STACK FIX
   Headline / Beschreibung / Guthaben strikt untereinander
   ========================================================= */

@media(max-width:620px){

    .hsu-account-v2-hero-inner{
        display:block !important;
        width:100%;
    }

    .hsu-account-v2-welcome{
        display:block;
        width:100%;
        max-width:none;
        padding-right:0;
    }

    .hsu-account-v2-welcome h1{
        width:100%;
        max-width:100%;
        margin-right:0;
    }

    .hsu-account-v2-welcome p{
        width:100%;
        max-width:290px;
        margin-right:0;
    }

    .hsu-account-v2-balance,
    .hsu-account-v2-points,
    .hsu-account-v2-wallet-card{
        position:relative !important;
        inset:auto !important;
        float:none !important;

        width:100% !important;
        max-width:none !important;

        margin:
            28px 0 0 !important;
    }

}



/* =========================================================
   HSU · 22B.5 · ADAPTIVE NICKNAME TYPOGRAPHY
   ========================================================= */

/*
 * Desktop:
 * kurze Namen bleiben maximal groß,
 * längere Nicks werden kontrolliert skaliert.
 */

.hsu-account-v2-welcome h1 .nick-short{
    font-size:1em;
}

.hsu-account-v2-welcome h1 .nick-medium{
    font-size:.82em;
    letter-spacing:-.045em;
}

.hsu-account-v2-welcome h1 .nick-long{
    font-size:.68em;
    letter-spacing:-.035em;
}


/*
 * Mobile:
 * Name immer auf eigener Zeile.
 * Keine Überlagerung mit Guthabenkarte.
 */

@media(max-width:620px){

    .hsu-account-v2-welcome h1 .nick-short,
    .hsu-account-v2-welcome h1 .nick-medium,
    .hsu-account-v2-welcome h1 .nick-long{
        display:block;
        width:100%;
        max-width:100%;

        word-break:normal;
        hyphens:none;
    }

    .hsu-account-v2-welcome h1 .nick-short{
        font-size:1em;
    }

    .hsu-account-v2-welcome h1 .nick-medium{
        font-size:.80em;
    }

    .hsu-account-v2-welcome h1 .nick-long{
        font-size:.64em;

        /*
         * Nur als letzte Absicherung für
         * außergewöhnlich lange Nicks.
         */
        overflow-wrap:anywhere;
    }

}


/* Sehr kleine Displays */

@media(max-width:380px){

    .hsu-account-v2-welcome h1 .nick-medium{
        font-size:.74em;
    }

    .hsu-account-v2-welcome h1 .nick-long{
        font-size:.58em;
    }

}



/* =========================================================
   HSU · 22E.1 · DIGITAL REWARD PASS V2
   Mobile-first Digital Pass
   ========================================================= */

.hsu-pass-v2{
    padding:
        38px 0 70px;
}

.hsu-pass-v2 .hsu-pass-shell{
    width:min(100% - 32px, 620px);
    margin-inline:auto;
}


/* TOPBAR */

.hsu-pass-topbar{
    margin-bottom:16px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.hsu-pass-v2 .hsu-pass-back{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#fff;

    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;

    text-decoration:none;
}

.hsu-pass-v2 .hsu-pass-back span{
    color:#f26522;
    font-size:18px;
}

.hsu-pass-topbar-label{
    color:rgba(255,255,255,.42);

    font-size:9px;
    font-weight:900;
    letter-spacing:.16em;
}


/* MAIN PASS */

.hsu-pass-v2 .hsu-pass-card{
    position:relative;
    overflow:hidden;

    padding:0;

    background:
        linear-gradient(
            145deg,
            #181818 0%,
            #101010 52%,
            #090909 100%
        );

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:24px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.38);
}

.hsu-pass-v2 .hsu-pass-card::before{
    content:"";

    position:absolute;
    left:0;
    top:0;

    width:100%;
    height:4px;

    background:#f26522;
}


/* HEADER */

.hsu-pass-card-head{
    padding:
        23px 25px 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.hsu-pass-v2 .hsu-pass-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.hsu-pass-v2 .hsu-pass-brand img{
    width:44px;
    height:44px;
    object-fit:contain;
}

.hsu-pass-v2 .hsu-pass-brand span{
    display:block;

    margin-bottom:3px;

    color:#f26522;

    font-size:8px;
    font-weight:950;
    letter-spacing:.18em;
}

.hsu-pass-v2 .hsu-pass-brand strong{
    display:block;

    color:#fff;

    font-size:14px;
    line-height:1;
    font-weight:950;
    letter-spacing:.04em;
}


/* STATUS */

.hsu-pass-v2 .hsu-pass-status{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin:0;
    padding:
        9px 12px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:999px;

    background:
        rgba(255,255,255,.055);
}

.hsu-pass-status-dot{
    width:8px;
    height:8px;

    flex:0 0 auto;

    border-radius:50%;

    background:#f26522;

    box-shadow:
        0 0 0 4px rgba(242,101,34,.13);
}

.hsu-pass-v2 .hsu-pass-status strong{
    color:#fff;

    font-size:8px;
    line-height:1;
    font-weight:950;
    letter-spacing:.11em;
}

.hsu-pass-v2 .hsu-pass-status.pending
.hsu-pass-status-dot{
    opacity:.6;
}


/* REWARD */

.hsu-pass-v2 .hsu-pass-reward{
    padding:
        30px 25px 23px;
}

.hsu-pass-label{
    display:block;

    margin-bottom:8px;

    color:#f26522;

    font-size:9px;
    font-weight:950;
    letter-spacing:.18em;
}

.hsu-pass-v2 .hsu-pass-reward h1{
    margin:0;

    color:#fff;

    font-size:
        clamp(34px,7vw,52px);

    line-height:.94;
    font-weight:950;
    letter-spacing:-.045em;

    overflow-wrap:anywhere;
}

.hsu-pass-v2 .hsu-pass-reward p{
    max-width:440px;

    margin:
        13px 0 0;

    color:rgba(255,255,255,.58);

    font-size:13px;
    line-height:1.55;
}


/* SCAN AREA */

.hsu-pass-scan{
    margin:
        0 18px 18px;

    padding:
        20px;

    background:#fff;
    color:#111;

    border-radius:19px;
}

.hsu-pass-scan-head{
    margin-bottom:17px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.hsu-pass-scan-head span{
    color:#111;

    font-size:9px;
    font-weight:950;
    letter-spacing:.14em;
}

.hsu-pass-scan-head small{
    color:#777;

    font-size:9px;
    font-weight:800;
}


/* QR */

.hsu-pass-qr-frame{
    display:flex;
    justify-content:center;

    padding:
        8px 0 18px;
}

.hsu-pass-v2 .hsu-pass-qr{
    width:250px;
    height:250px;

    display:grid;
    place-items:center;

    margin:0;
    padding:10px;

    background:#fff;
}

.hsu-pass-v2 .hsu-pass-qr img,
.hsu-pass-v2 .hsu-pass-qr canvas{
    display:block;

    width:230px !important;
    height:230px !important;

    max-width:100%;
}


/* MANUAL CODE */

.hsu-pass-v2 .hsu-pass-manual-code{
    margin:0;
    padding:
        17px 15px 5px;

    text-align:center;

    border-top:
        1px dashed #d3d3d3;

    background:transparent;
}

.hsu-pass-v2 .hsu-pass-manual-code span{
    display:block;

    margin-bottom:6px;

    color:#777;

    font-size:8px;
    font-weight:950;
    letter-spacing:.15em;
}

.hsu-pass-v2 .hsu-pass-manual-code strong{
    display:block;

    color:#111;

    font-size:
        clamp(25px,6vw,34px);

    line-height:1;
    font-weight:950;
    letter-spacing:.12em;
}

.hsu-pass-v2 .hsu-pass-manual-code small{
    display:block;

    margin-top:7px;

    color:#888;

    font-size:9px;
}


/* PARTNER */

.hsu-pass-v2 .hsu-pass-partner{
    margin:0;

    padding:
        19px 25px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    background:
        rgba(242,101,34,.08);

    border-top:
        1px solid rgba(242,101,34,.18);

    border-bottom:
        1px solid rgba(242,101,34,.18);
}

.hsu-pass-v2 .hsu-pass-partner span{
    color:#f26522;

    font-size:8px;
    font-weight:950;
    letter-spacing:.15em;
}

.hsu-pass-v2 .hsu-pass-partner strong{
    color:#fff;

    text-align:right;

    font-size:12px;
    line-height:1.3;
    font-weight:900;
}


/* PASS DATA */

.hsu-pass-v2 .hsu-pass-owner{
    margin:0;
    padding:
        21px 25px;

    display:grid;
    grid-template-columns:
        minmax(0,1.5fr)
        minmax(70px,.7fr)
        minmax(70px,.7fr);

    gap:20px;
}

.hsu-pass-v2 .hsu-pass-owner > div{
    min-width:0;
}

.hsu-pass-v2 .hsu-pass-owner span{
    display:block;

    margin-bottom:5px;

    color:rgba(255,255,255,.36);

    font-size:8px;
    font-weight:950;
    letter-spacing:.15em;
}

.hsu-pass-v2 .hsu-pass-owner strong{
    display:block;

    overflow:hidden;

    color:#fff;

    font-size:14px;
    line-height:1.15;
    font-weight:950;

    text-overflow:ellipsis;
}


/* FOOT */

.hsu-pass-card-foot{
    padding:
        14px 25px;

    display:flex;
    justify-content:space-between;
    gap:20px;

    border-top:
        1px solid rgba(255,255,255,.07);

    color:rgba(255,255,255,.26);

    font-size:7px;
    font-weight:900;
    letter-spacing:.14em;
}


/* NOTE */

.hsu-pass-v2 .hsu-pass-note{
    max-width:520px;

    margin:
        17px auto 0;

    color:rgba(255,255,255,.46);

    text-align:center;

    font-size:11px;
    line-height:1.5;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

    .hsu-pass-v2{
        padding:
            20px 0 48px;
    }

    .hsu-pass-v2 .hsu-pass-shell{
        width:
            min(100% - 20px, 620px);
    }

    .hsu-pass-topbar{
        margin-bottom:11px;
        padding:0 4px;
    }

    .hsu-pass-v2 .hsu-pass-card{
        border-radius:19px;
    }

    .hsu-pass-card-head{
        padding:
            18px 17px 16px;

        gap:10px;
    }

    .hsu-pass-v2 .hsu-pass-brand{
        gap:9px;
    }

    .hsu-pass-v2 .hsu-pass-brand img{
        width:36px;
        height:36px;
    }

    .hsu-pass-v2 .hsu-pass-brand strong{
        font-size:11px;
    }

    .hsu-pass-v2 .hsu-pass-status{
        padding:
            8px 9px;

        gap:6px;
    }

    .hsu-pass-v2 .hsu-pass-status strong{
        font-size:7px;
        letter-spacing:.07em;
    }

    .hsu-pass-status-dot{
        width:7px;
        height:7px;
    }

    .hsu-pass-v2 .hsu-pass-reward{
        padding:
            24px 17px 18px;
    }

    .hsu-pass-v2 .hsu-pass-reward h1{
        font-size:
            clamp(32px,10.5vw,46px);
    }

    .hsu-pass-v2 .hsu-pass-reward p{
        margin-top:10px;

        font-size:12px;
    }

    .hsu-pass-scan{
        margin:
            0 10px 10px;

        padding:
            16px 13px;

        border-radius:15px;
    }

    .hsu-pass-scan-head{
        margin-bottom:10px;
    }

    .hsu-pass-qr-frame{
        padding:
            4px 0 13px;
    }

    .hsu-pass-v2 .hsu-pass-qr{
        width:min(250px,74vw);
        height:min(250px,74vw);
    }

    .hsu-pass-v2 .hsu-pass-qr img,
    .hsu-pass-v2 .hsu-pass-qr canvas{
        width:
            min(230px,68vw) !important;

        height:
            min(230px,68vw) !important;
    }

    .hsu-pass-v2 .hsu-pass-partner{
        padding:
            16px 17px;

        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .hsu-pass-v2 .hsu-pass-partner strong{
        text-align:left;
    }

    .hsu-pass-v2 .hsu-pass-owner{
        padding:
            18px 17px;

        grid-template-columns:
            minmax(0,1.4fr)
            auto
            auto;

        gap:14px;
    }

    .hsu-pass-v2 .hsu-pass-owner strong{
        font-size:12px;
    }

    .hsu-pass-card-foot{
        padding:
            12px 17px;

        gap:10px;

        font-size:6px;
    }

    .hsu-pass-v2 .hsu-pass-note{
        padding:
            0 14px;

        font-size:10px;
    }

}


@media(max-width:370px){

    .hsu-pass-topbar-label{
        display:none;
    }

    .hsu-pass-v2 .hsu-pass-status strong{
        max-width:95px;
    }

    .hsu-pass-v2 .hsu-pass-owner{
        grid-template-columns:
            minmax(0,1fr)
            auto;
    }

    .hsu-pass-v2
    .hsu-pass-owner > div:last-child{
        display:none;
    }

}



/* =========================================================
   HSU CONTROL · POINTS MANAGEMENT V1
========================================================= */

.hsu-points-admin{
    color:#111;
}

.hsu-points-admin-intro{
    margin-bottom:28px;
}

.hsu-points-admin-intro h2{
    margin:5px 0 8px;
    color:#111;
}

.hsu-points-admin-intro p{
    max-width:650px;
    color:#777;
}

.hsu-points-admin-users{
    display:grid;
    gap:18px;
}

.hsu-points-admin-card{
    padding:24px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:20px;
    background:#fff;
}

.hsu-points-admin-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:22px;
}

.hsu-points-admin-person > span{
    display:block;
    margin-bottom:4px;
    color:#ff6900;
    font-size:9px;
    font-weight:950;
    letter-spacing:.08em;
}

.hsu-points-admin-person h3{
    margin:0;
    color:#111;
    font-size:24px;
}

.hsu-points-admin-person p{
    margin:4px 0 0;
    color:#777;
}

.hsu-points-admin-balance{
    min-width:160px;
    padding:16px 20px;
    border-radius:16px;
    background:#111;
    text-align:right;
}

.hsu-points-admin-balance span,
.hsu-points-admin-balance small{
    display:block;
    color:#aaa;
    font-size:8px;
    font-weight:900;
    letter-spacing:.07em;
}

.hsu-points-admin-balance strong{
    display:block;
    margin:3px 0;
    color:#ff6900;
    font-size:34px;
    line-height:1;
}

.hsu-points-adjust-form{
    display:grid;
    grid-template-columns:
        minmax(130px,.35fr)
        minmax(260px,1fr)
        auto;
    align-items:end;
    gap:12px;
    padding-top:20px;
    border-top:1px solid rgba(0,0,0,.07);
}

.hsu-points-adjust-form label > span{
    display:block;
    margin-bottom:5px;
    color:#777;
    font-size:8px;
    font-weight:900;
    letter-spacing:.06em;
}

.hsu-points-adjust-form input{
    width:100%;
    min-height:46px;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    background:#fff;
    color:#111;
}

.hsu-points-adjust-form button{
    min-height:46px;
    white-space:nowrap;
}

.hsu-points-history{
    margin-top:18px;
    border-top:1px solid rgba(0,0,0,.07);
}

.hsu-points-history summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 0 0;
    color:#111;
    cursor:pointer;
    font-weight:900;
    list-style:none;
}

.hsu-points-history summary::-webkit-details-marker{
    display:none;
}

.hsu-points-history summary strong{
    display:grid;
    width:28px;
    height:28px;
    place-items:center;
    border-radius:999px;
    background:#f2f2f2;
    color:#777;
    font-size:10px;
}

.hsu-points-history-list{
    display:grid;
    gap:8px;
    padding-top:14px;
}

.hsu-points-history-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 12px;
    border-radius:10px;
    background:#f7f7f7;
}

.hsu-points-history-row > div{
    display:flex;
    align-items:center;
    gap:12px;
}

.hsu-points-history-row strong{
    min-width:58px;
    font-size:14px;
}

.hsu-points-history-row strong.positive{
    color:#16843d;
}

.hsu-points-history-row strong.negative{
    color:#c82d2d;
}

.hsu-points-history-row span,
.hsu-points-history-row small{
    color:#777;
    font-size:10px;
}

.hsu-points-history-empty{
    margin:0;
    color:#777;
}


/* Control-Seiten dürfen mobil nicht vom
   globalen Reveal-System unsichtbar bleiben. */
@media(max-width:700px){

    .hsu-points-admin.reveal,
    .hsu-reward-admin.reveal{
        opacity:1 !important;
        transform:none !important;
    }

    .hsu-points-admin-head{
        align-items:stretch;
        flex-direction:column;
    }

    .hsu-points-admin-balance{
        width:100%;
        text-align:left;
    }

    .hsu-points-adjust-form{
        grid-template-columns:1fr;
    }

    .hsu-points-adjust-form button{
        width:100%;
    }

    .hsu-points-history-row{
        align-items:flex-start;
        flex-direction:column;
    }

}



/* =========================================================
   HSU · 22E.2 · PASS META CONTRAST FIX
   FAN / REWARD / POINTS
========================================================= */

.hsu-pass-v2 .hsu-pass-owner > div{
    background:#1b1b1b !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:#fff !important;
}

.hsu-pass-v2 .hsu-pass-owner span{
    color:#ff6900 !important;
    opacity:1 !important;
}

.hsu-pass-v2 .hsu-pass-owner strong{
    color:#fff !important;
    opacity:1 !important;
}


/* Mobile: Kontrast zusätzlich erzwingen */
@media(max-width:700px){

    .hsu-pass-v2 .hsu-pass-owner > div{
        background:#1b1b1b !important;
        border-color:rgba(255,255,255,.14) !important;
    }

    .hsu-pass-v2 .hsu-pass-owner span{
        color:#ff6900 !important;
    }

    .hsu-pass-v2 .hsu-pass-owner strong{
        color:#fff !important;
    }

}



/* =========================================================
   HSU · 22F.1 · MOBILE WALLET POLISH
   Compact Mobile Layout
   Presentation only
========================================================= */

@media(max-width:640px){

    /* ---------- PAGE ---------- */

    body:has(.hsu-wallet-hero) .section{
        padding-top:24px !important;
        padding-bottom:52px !important;
    }


    /* ---------- HERO ---------- */

    .hsu-wallet-hero-inner{
        min-height:0 !important;
        padding-top:30px !important;
        padding-bottom:30px !important;
        gap:22px !important;
    }

    .hsu-wallet-hero .eyebrow{
        margin-bottom:9px !important;
    }

    .hsu-wallet-hero h1{
        font-size:clamp(42px,13vw,58px) !important;
    }

    .hsu-wallet-hero p{
        margin-top:15px !important;
        font-size:15px !important;
        line-height:1.5 !important;
    }


    /* ---------- BALANCE ---------- */

    .hsu-wallet-balance{
        min-width:0 !important;
        padding:18px 20px !important;
        border-radius:18px !important;
    }

    .hsu-wallet-balance strong{
        margin-top:3px !important;
        font-size:52px !important;
    }

    .hsu-wallet-balance small{
        margin-top:5px !important;
    }


    /* ---------- NAV ---------- */

    .hsu-wallet-nav{
        margin-bottom:32px !important;
        gap:8px !important;
    }

    body .hsu-wallet-nav a{
        min-height:40px !important;
        padding:0 14px !important;
        font-size:12px !important;
    }


    /* ---------- SECTION HEADINGS ---------- */

    .hsu-wallet-title,
    .hsu-wallet-passes-head{
        margin-bottom:18px !important;
    }

    body .hsu-wallet-title h2,
    body .hsu-wallet-passes-head h2{
        font-size:34px !important;
    }


    /* ---------- REWARD LIST ---------- */

    .hsu-wallet-rewards{
        gap:13px !important;
        margin-bottom:48px !important;
    }

    body .hsu-wallet-reward{
        min-height:0 !important;
        padding:19px !important;
        border-radius:18px !important;
    }

    .hsu-wallet-reward-top strong{
        font-size:34px !important;
    }

    .hsu-wallet-reward-state{
        margin-top:14px !important;
        padding:6px 9px !important;
    }

    body .hsu-wallet-reward h3{
        margin:13px 0 6px !important;
        font-size:23px !important;
    }

    body .hsu-wallet-reward p{
        margin-bottom:13px !important;
        font-size:13px !important;
        line-height:1.45 !important;
    }

    .hsu-wallet-partners{
        padding-top:12px !important;
    }

    .hsu-wallet-reward form,
    .hsu-wallet-progress,
    .hsu-wallet-unavailable{
        margin-top:13px !important;
    }

    .hsu-wallet-reward form .button{
        min-height:45px !important;
    }

    .hsu-wallet-progress small{
        margin-top:6px !important;
        font-size:12px !important;
    }


    /* ---------- ACTIVE PASSES ---------- */

    .hsu-wallet-passes-head{
        padding-top:0 !important;
    }

    .hsu-wallet-active-empty{
        margin-bottom:42px !important;
    }

    body .hsu-wallet-empty{
        padding:18px 19px !important;
        border-radius:15px !important;
    }

    body .hsu-wallet-empty strong{
        font-size:15px !important;
    }

    body .hsu-wallet-empty p{
        margin-top:4px !important;
        font-size:13px !important;
        line-height:1.4 !important;
    }


    /* ---------- REAL ACTIVE PASS ---------- */

    .hsu-wallet-active-pass-list{
        gap:10px !important;
        margin-bottom:42px !important;
    }

    body .hsu-wallet-pass-row{
        padding:17px 18px !important;
        gap:14px !important;
        border-radius:15px !important;
    }

    .hsu-wallet-pass-status{
        margin-bottom:6px !important;
        padding:5px 8px !important;
    }

    body .hsu-wallet-pass-row strong{
        font-size:18px !important;
    }

    body .hsu-wallet-pass-row small{
        font-size:12px !important;
    }

    .hsu-wallet-pass-row-actions .button{
        min-height:41px !important;
    }


    /* ---------- LEGAL ---------- */

    body .hsu-wallet-legal{
        margin-top:24px !important;
    }

}


/* Very small iPhones */
@media(max-width:380px){

    .hsu-wallet-hero-inner{
        padding-top:25px !important;
        padding-bottom:25px !important;
    }

    .hsu-wallet-nav{
        gap:6px !important;
    }

    body .hsu-wallet-nav a{
        padding-left:11px !important;
        padding-right:11px !important;
        font-size:11px !important;
    }

    body .hsu-wallet-reward{
        padding:17px !important;
    }

}



/* =========================================================
   HSU · 22G.1B · FAN RANKING
========================================================= */

.hsu-fan-ranking{
    background:#f4f3f0;
    color:#111;
}

.hsu-fan-ranking-hero{
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255,105,0,.18),
            transparent 34%
        ),
        #090909;
    color:#fff;
}

.hsu-fan-ranking-hero-grid{
    min-height:390px;
    padding:64px 0 46px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    gap:70px;
    align-items:center;
}

.hsu-fan-ranking-intro .eyebrow,
.hsu-fan-ranking-heading .eyebrow{
    color:#ff6900;
    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
}

.hsu-fan-ranking-intro h1{
    margin:10px 0 18px;
    font-size:clamp(62px,8vw,104px);
    line-height:.82;
    letter-spacing:-.065em;
    text-transform:uppercase;
}

.hsu-fan-ranking-intro h1 span{
    color:#ff6900;
}

.hsu-fan-ranking-intro p{
    max-width:560px;
    margin:0;
    color:#c8c8c8;
    font-size:16px;
    line-height:1.55;
}

.hsu-fan-ranking-me{
    padding:28px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:24px;
    background:rgba(255,255,255,.055);
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.hsu-fan-ranking-me > span{
    display:block;
    color:#ff6900;
    font-size:11px;
    font-weight:900;
    letter-spacing:.15em;
}

.hsu-fan-ranking-me > strong{
    display:block;
    margin-top:6px;
    font-size:82px;
    line-height:1;
    letter-spacing:-.06em;
}

.hsu-fan-ranking-me > strong.is-empty{
    color:#777;
}

.hsu-fan-ranking-me > small{
    display:block;
    margin-top:5px;
    color:#aaa;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
}

.hsu-fan-ranking-me > p{
    margin:17px 0 0;
    color:#bbb;
    font-size:13px;
    line-height:1.5;
}

.hsu-fan-ranking-me-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:22px;
}

.hsu-fan-ranking-me-stats div{
    padding:11px 8px;
    border-radius:12px;
    background:#171717;
    text-align:center;
}

.hsu-fan-ranking-me-stats b{
    display:block;
    color:#fff;
    font-size:19px;
}

.hsu-fan-ranking-me-stats span{
    display:block;
    margin-top:2px;
    color:#ff6900;
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-fan-ranking-nav{
    display:flex;
    gap:10px;
    padding-bottom:28px;
}

.hsu-fan-ranking-nav a{
    display:inline-flex;
    min-height:42px;
    padding:0 16px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}

.hsu-fan-ranking-nav a:hover{
    border-color:#ff6900;
    color:#ff6900;
}

.hsu-fan-ranking-main{
    padding-top:64px;
    padding-bottom:80px;
}

.hsu-fan-ranking-heading{
    margin-bottom:25px;
}

.hsu-fan-ranking-heading h2{
    margin:7px 0 5px;
    color:#111;
    font-size:clamp(42px,5vw,66px);
    line-height:.94;
    letter-spacing:-.05em;
}

.hsu-fan-ranking-heading p{
    margin:0;
    color:#666;
}

.hsu-fan-ranking-subheading{
    margin-top:76px;
}

.hsu-fan-ranking-board{
    overflow:hidden;
    border-radius:22px;
    background:#fff;
    box-shadow:0 12px 40px rgba(0,0,0,.06);
}

.hsu-fan-ranking-board-head,
.hsu-fan-ranking-row{
    display:grid;
    grid-template-columns:80px minmax(160px,1fr) 100px 100px 100px;
    align-items:center;
}

.hsu-fan-ranking-board-head{
    min-height:46px;
    padding:0 24px;
    background:#111;
    color:#aaa;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
}

.hsu-fan-ranking-row{
    min-height:72px;
    padding:0 24px;
    border-bottom:1px solid #ececec;
}

.hsu-fan-ranking-row:last-child{
    border-bottom:0;
}

.hsu-fan-ranking-row.is-me{
    background:#fff1e7;
    box-shadow:inset 4px 0 #ff6900;
}

.hsu-fan-ranking-position strong{
    font-size:18px;
}

.hsu-fan-ranking-position .medal{
    font-size:25px;
}

.hsu-fan-ranking-name{
    display:flex;
    gap:9px;
    align-items:center;
}

.hsu-fan-ranking-name strong{
    font-size:16px;
}

.hsu-fan-ranking-name small{
    padding:3px 6px;
    border-radius:999px;
    background:#ff6900;
    color:#fff;
    font-size:8px;
    font-weight:900;
}

.hsu-fan-ranking-value{
    font-size:14px;
    font-weight:800;
}

.hsu-fan-ranking-value.primary{
    color:#ff6900;
    font-size:21px;
}

.hsu-fan-ranking-empty{
    padding:50px 28px;
    border-radius:22px;
    background:#fff;
    text-align:center;
}

.hsu-fan-ranking-empty > span{
    display:block;
    margin-bottom:13px;
    font-size:38px;
}

.hsu-fan-ranking-empty > strong{
    display:block;
    font-size:22px;
}

.hsu-fan-ranking-empty p{
    max-width:500px;
    margin:10px auto 22px;
    color:#666;
    line-height:1.55;
}

.hsu-fan-ranking-team-grid,
.hsu-fan-potm-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.hsu-fan-ranking-team,
.hsu-fan-potm-card{
    overflow:hidden;
    border-radius:22px;
    background:#111;
    color:#fff;
}

.hsu-fan-ranking-team header,
.hsu-fan-potm-card header{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:23px 24px 20px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.hsu-fan-ranking-team header span,
.hsu-fan-potm-card header span{
    color:#ff6900;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
}

.hsu-fan-ranking-team header h3,
.hsu-fan-potm-card header h3{
    margin:4px 0 0;
    color:#fff;
    font-size:25px;
}

.hsu-fan-ranking-team header > strong,
.hsu-fan-potm-card header > strong{
    color:#777;
    font-size:10px;
    letter-spacing:.12em;
}

.hsu-fan-ranking-team-row{
    display:grid;
    grid-template-columns:45px minmax(0,1fr) 80px 70px;
    min-height:58px;
    padding:0 24px;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.hsu-fan-ranking-team-row:last-child{
    border-bottom:0;
}

.hsu-fan-ranking-team-row.is-me{
    background:rgba(255,105,0,.13);
    box-shadow:inset 4px 0 #ff6900;
}

.hsu-fan-ranking-team-row > span{
    color:#ff6900;
    font-weight:900;
}

.hsu-fan-ranking-team-row > b{
    text-align:right;
    color:#fff;
}

.hsu-fan-ranking-team-row > small{
    text-align:right;
    color:#888;
}

.hsu-fan-ranking-team-empty{
    padding:34px 24px;
}

.hsu-fan-ranking-team-empty strong{
    display:block;
    margin-bottom:7px;
    font-size:17px;
}

.hsu-fan-ranking-team-empty p{
    margin:0;
    color:#999;
    font-size:13px;
    line-height:1.5;
}

.hsu-fan-potm-row{
    display:grid;
    grid-template-columns:42px 46px minmax(0,1fr) 55px 65px;
    gap:10px;
    min-height:72px;
    padding:0 20px;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.hsu-fan-potm-row:last-child{
    border-bottom:0;
}

.hsu-fan-potm-rank{
    color:#ff6900;
    font-weight:900;
}

.hsu-fan-potm-row img{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    background:#222;
}

.hsu-fan-potm-player strong,
.hsu-fan-potm-player small{
    display:block;
}

.hsu-fan-potm-player small{
    margin-top:2px;
    color:#888;
    font-size:10px;
}

.hsu-fan-potm-stat{
    text-align:center;
}

.hsu-fan-potm-stat strong{
    display:block;
    font-size:18px;
}

.hsu-fan-potm-stat span{
    display:block;
    margin-top:2px;
    color:#ff6900;
    font-size:8px;
    font-weight:900;
}

.hsu-fan-ranking-note{
    margin-top:50px;
    padding:23px 25px;
    border-left:4px solid #ff6900;
    border-radius:0 15px 15px 0;
    background:#e8e6e1;
}

.hsu-fan-ranking-note strong{
    display:block;
    font-size:11px;
    letter-spacing:.12em;
}

.hsu-fan-ranking-note p{
    margin:6px 0 0;
    color:#555;
    font-size:13px;
    line-height:1.5;
}


@media(max-width:760px){

    .hsu-fan-ranking-hero-grid{
        min-height:0;
        padding:38px 0 26px;
        grid-template-columns:1fr;
        gap:28px;
    }

    .hsu-fan-ranking-intro h1{
        font-size:clamp(58px,19vw,82px);
    }

    .hsu-fan-ranking-me{
        padding:20px;
        border-radius:19px;
    }

    .hsu-fan-ranking-me > strong{
        font-size:68px;
    }

    .hsu-fan-ranking-nav{
        overflow-x:auto;
        padding-bottom:22px;
        scrollbar-width:none;
    }

    .hsu-fan-ranking-nav::-webkit-scrollbar{
        display:none;
    }

    .hsu-fan-ranking-nav a{
        flex:0 0 auto;
        min-height:39px;
        padding:0 13px;
    }

    .hsu-fan-ranking-main{
        padding-top:42px;
        padding-bottom:58px;
    }

    .hsu-fan-ranking-heading h2{
        font-size:43px;
    }

    .hsu-fan-ranking-subheading{
        margin-top:54px;
    }

    .hsu-fan-ranking-board{
        border-radius:18px;
    }

    .hsu-fan-ranking-board-head{
        display:none;
    }

    .hsu-fan-ranking-row{
        grid-template-columns:48px minmax(0,1fr) 55px;
        min-height:68px;
        padding:0 16px;
    }

    .hsu-fan-ranking-row
    .hsu-fan-ranking-value:nth-of-type(4),
    .hsu-fan-ranking-row
    .hsu-fan-ranking-value:nth-of-type(5){
        display:none;
    }

    .hsu-fan-ranking-value.primary{
        text-align:right;
    }

    .hsu-fan-ranking-team-grid,
    .hsu-fan-potm-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .hsu-fan-ranking-team,
    .hsu-fan-potm-card{
        border-radius:18px;
    }

    .hsu-fan-ranking-team-row{
        grid-template-columns:38px minmax(0,1fr) 70px;
        padding:0 17px;
    }

    .hsu-fan-ranking-team-row small{
        display:none;
    }

    .hsu-fan-potm-row{
        grid-template-columns:34px 42px minmax(0,1fr) 48px 54px;
        gap:7px;
        padding:0 13px;
    }

}


@media(max-width:380px){

    .hsu-fan-ranking-me-stats{
        gap:5px;
    }

    .hsu-fan-ranking-me-stats div{
        padding-left:4px;
        padding-right:4px;
    }

    .hsu-fan-potm-row{
        grid-template-columns:30px 38px minmax(0,1fr) 44px 48px;
        padding-left:10px;
        padding-right:10px;
    }

    .hsu-fan-potm-row img{
        width:36px;
        height:36px;
    }

}



/* =========================================================
   HSU · 22G.1C · MOBILE FAN RANKING POLISH
========================================================= */

@media(max-width:760px){

    .hsu-fan-ranking-empty{
        padding:36px 22px 38px;
        border-radius:19px;
    }

    .hsu-fan-ranking-empty > span{
        margin-bottom:10px;
        font-size:34px;
    }

    .hsu-fan-ranking-empty > strong{
        font-size:20px;
        line-height:1.25;
    }

    .hsu-fan-ranking-empty p{
        margin:9px auto 18px;
        font-size:14px;
        line-height:1.48;
    }

    .hsu-fan-ranking-empty .button{
        min-height:46px;
        padding-left:24px;
        padding-right:24px;
    }

    .hsu-fan-ranking-subheading{
        margin-top:46px;
    }

    .hsu-fan-ranking-heading{
        margin-bottom:20px;
    }

    .hsu-fan-ranking-team-grid,
    .hsu-fan-potm-grid{
        gap:12px;
    }

    .hsu-fan-ranking-team-empty{
        padding:28px 22px 30px;
    }

    .hsu-fan-ranking-note{
        margin-top:40px;
        padding:20px 21px;
    }

}


@media(max-width:380px){

    .hsu-fan-ranking-empty{
        padding:32px 18px 34px;
    }

    .hsu-fan-ranking-subheading{
        margin-top:42px;
    }

}


/* =========================================================
   HSU · 22H.1B · FANZONE ACCOUNT CTA FIX
   Correct target: .fanzone-account-link
   CSS ONLY
========================================================= */

.fanzone-user-welcome .fanzone-account-link{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:42px;
    padding:0 18px;

    border:1px solid rgba(255,105,0,.68);
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(255,105,0,.17),
            rgba(255,105,0,.055)
        );

    color:#fff !important;

    font-size:13px;
    font-weight:800;
    line-height:1;

    text-decoration:none !important;
    white-space:nowrap;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 8px 26px rgba(255,105,0,.09);

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


/* Orange Account-Indikator */

.fanzone-user-welcome .fanzone-account-link::before{
    content:"";

    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:#ff6900;

    box-shadow:
        0 0 0 4px rgba(255,105,0,.13);
}


/* Desktop Hover */

@media(hover:hover){

    .fanzone-user-welcome .fanzone-account-link:hover{
        border-color:#ff6900;

        background:
            linear-gradient(
                135deg,
                rgba(255,105,0,.26),
                rgba(255,105,0,.09)
            );

        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.035),
            0 10px 30px rgba(255,105,0,.15);

        transform:translateY(-1px);
    }

}


/* Accessibility */

.fanzone-user-welcome .fanzone-account-link:focus-visible{
    outline:2px solid #ff6900;
    outline-offset:3px;
}


/* MOBILE */

@media(max-width:700px){

    .fanzone-user-welcome .fanzone-account-link{
        min-height:44px;

        padding-left:16px;
        padding-right:16px;

        border-color:rgba(255,105,0,.78);

        background:
            linear-gradient(
                135deg,
                rgba(255,105,0,.20),
                rgba(255,105,0,.07)
            );

        font-size:13px;
        font-weight:800;

        box-shadow:
            0 7px 22px rgba(255,105,0,.09);
    }

}


/* VERY SMALL MOBILE */

@media(max-width:380px){

    .fanzone-user-welcome .fanzone-account-link{
        min-height:42px;

        padding-left:13px;
        padding-right:13px;

        gap:7px;

        font-size:12px;
    }

    .fanzone-user-welcome .fanzone-account-link::before{
        width:6px;
        height:6px;

        flex-basis:6px;

        box-shadow:
            0 0 0 3px rgba(255,105,0,.13);
    }

}



/* =========================================================
   HSU OFFICIAL SCHEDULE 2026/27
========================================================= */

.v7-match-live{
    margin-top:24px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.12);
}

.v7-match-date{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.v7-match-date span{
    font-size:14px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    opacity:.68;
}

.v7-match-date strong{
    font-size:22px;
    line-height:1;
}

.v7-match-opponent{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.v7-match-opponent small{
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    color:var(--orange);
}

.v7-match-opponent strong{
    font-size:21px;
    line-height:1.2;
}


/* SEASON */

.hsu-season{
    overflow:hidden;
}

.hsu-season-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:42px;
}

.hsu-season-head h2{
    margin:8px 0 12px;
}

.hsu-season-head p{
    margin:0;
    opacity:.68;
}

.hsu-season-legend{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.hsu-season-legend span{
    display:flex;
    align-items:center;
    gap:8px;
}

.hsu-season-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    display:inline-block;
}

.hsu-season-dot.home{
    background:var(--orange);
}

.hsu-season-dot.away{
    border:2px solid currentColor;
}

.hsu-season-rounds{
    display:grid;
    gap:18px;
}

.hsu-season-round{
    display:grid;
    grid-template-columns:130px 1fr;
    border:1px solid rgba(128,128,128,.2);
    border-radius:18px;
    overflow:hidden;
    background:rgba(128,128,128,.035);
}

.hsu-season-round-head{
    padding:25px 22px;
    background:#111;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hsu-season-round-head span{
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
    opacity:.55;
}

.hsu-season-round-head strong{
    margin-top:4px;
    font-size:38px;
    line-height:1;
    color:var(--orange);
}

.hsu-season-games{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.hsu-season-game{
    position:relative;
    padding:23px 26px 25px;
}

.hsu-season-game + .hsu-season-game{
    border-left:1px solid rgba(128,128,128,.18);
}

.hsu-season-game.is-home:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--orange);
}

.hsu-season-game-top{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
}

.hsu-season-game-top > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.hsu-season-league{
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.52;
}

.hsu-season-game-top strong{
    font-size:18px;
}

.hsu-season-place{
    border:1px solid rgba(128,128,128,.28);
    border-radius:999px;
    padding:5px 9px;
    font-size:9px;
    line-height:1;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-season-game.is-home .hsu-season-place{
    color:var(--orange);
    border-color:var(--orange);
}

.hsu-season-date{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-top:22px;
}

.hsu-season-date strong{
    font-size:14px;
}

.hsu-season-date span{
    font-size:13px;
    opacity:.62;
}

.hsu-season-versus{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-top:15px;
}

.hsu-season-versus small{
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
    opacity:.45;
}

.hsu-season-versus strong{
    font-size:19px;
    line-height:1.2;
}

.hsu-season-source{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid rgba(128,128,128,.18);
}

.hsu-season-source span{
    color:var(--orange);
    font-size:10px;
    font-weight:900;
    letter-spacing:.15em;
}

.hsu-season-source p{
    margin:5px 0 0;
    font-size:13px;
    opacity:.58;
}


@media (max-width:800px){

    .hsu-season-head{
        display:block;
    }

    .hsu-season-legend{
        margin-top:22px;
    }

    .hsu-season-round{
        grid-template-columns:1fr;
    }

    .hsu-season-round-head{
        padding:15px 18px;
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        gap:8px;
    }

    .hsu-season-round-head strong{
        margin:0;
        font-size:22px;
    }

    .hsu-season-games{
        grid-template-columns:1fr;
    }

    .hsu-season-game{
        padding:20px;
    }

    .hsu-season-game + .hsu-season-game{
        border-left:0;
        border-top:1px solid rgba(128,128,128,.18);
    }

    .hsu-season-game.is-home:before{
        width:3px;
    }

}


@media (max-width:520px){

    .v7-match-date{
        display:block;
    }

    .v7-match-date strong{
        display:block;
        margin-top:6px;
    }

    .hsu-season-date{
        display:block;
    }

    .hsu-season-date span{
        display:block;
        margin-top:4px;
    }

}

/* =========================================================
   HSU MATCHCENTER — MOBILE LAYOUT FIX
   Scoped exclusively to Matchcenter components.
========================================================= */

@media (max-width: 620px){

    /* Matchcenter: section spacing */
    .matchcenter-hero-v1 + .hsu-season{
        padding-top:52px;
        padding-bottom:64px;
    }

    .hsu-season ~ .section{
        padding-top:58px;
        padding-bottom:64px;
    }

    /* Season heading */
    .hsu-season-head{
        margin-bottom:30px;
    }

    .hsu-season-head h2{
        margin-top:7px;
        margin-bottom:10px;
    }

    .hsu-season-head p{
        max-width:100%;
        line-height:1.55;
    }

    .hsu-season-legend{
        margin-top:18px;
        gap:12px 18px;
        font-size:10px;
    }

    /* Matchday cards */
    .hsu-season-round{
        border-radius:14px;
    }

    .hsu-season-round-head{
        padding:13px 16px;
    }

    .hsu-season-round-head strong{
        font-size:21px;
    }

    .hsu-season-game{
        min-width:0;
        padding:18px 17px 20px;
    }

    .hsu-season-game-top{
        gap:10px;
    }

    .hsu-season-game-top > div{
        min-width:0;
    }

    .hsu-season-game-top strong{
        font-size:16px;
        line-height:1.25;
        overflow-wrap:anywhere;
    }

    .hsu-season-place{
        flex:0 0 auto;
        white-space:nowrap;
        font-size:8px;
        padding:5px 8px;
    }

    .hsu-season-date{
        margin-top:17px;
    }

    .hsu-season-date strong{
        font-size:13px;
        line-height:1.35;
    }

    .hsu-season-date span{
        font-size:12px;
    }

    .hsu-season-versus{
        margin-top:12px;
    }

    .hsu-season-versus strong{
        font-size:17px;
        overflow-wrap:anywhere;
    }

    .hsu-season-source{
        margin-top:20px;
        padding-top:16px;
    }

    /* Team/table sections */
    .hsu-season ~ .section .match-team-heading{
        margin-bottom:27px;
        gap:18px;
        align-items:flex-end;
    }

    .hsu-season ~ .section .match-team-heading h2{
        font-size:clamp(2rem,10vw,3rem);
        line-height:1;
    }

    .hsu-season ~ .section .text-link{
        white-space:nowrap;
        font-size:12px;
    }

    .hsu-season ~ .section .match-data-grid{
        grid-template-columns:1fr;
        gap:16px;
        width:100%;
        min-width:0;
    }

    .hsu-season ~ .section .match-data-grid .data-block{
        min-width:0;
        width:100%;
        overflow:hidden;
    }
}

/* Extra-tight phones */
@media (max-width:390px){

    .matchcenter-hero-v1 + .hsu-season{
        padding-top:46px;
        padding-bottom:56px;
    }

    .hsu-season ~ .section{
        padding-top:50px;
        padding-bottom:56px;
    }

    .hsu-season-game{
        padding-left:15px;
        padding-right:15px;
    }

    .hsu-season-game-top{
        gap:7px;
    }

    .hsu-season-place{
        font-size:7px;
        padding:4px 7px;
    }
}


/* =========================================================
   HSU MATCHCENTER — MOBILE OVERFLOW FIX
   Local, defensive layout constraints
========================================================= */

@media (max-width: 760px){

    .matchcenter-hero-v1,
    .matchcenter-hero-v1-inner,
    .matchcenter-hero-v1-copy,
    .hsu-season,
    .hsu-season .shell,
    .hsu-season-rounds,
    .hsu-season-round,
    .hsu-season-games,
    .section:has(.match-data-grid),
    .section:has(.match-data-grid) .shell,
    .match-data-grid,
    .match-data-grid .data-block,
    .hsu-live-table,
    .hsu-table-scroll {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .match-data-grid{
        display:grid;
        grid-template-columns:minmax(0,1fr);
        width:100%;
        gap:16px;
    }

    .match-data-grid .data-block{
        width:100%;
        min-width:0;
        overflow:hidden;
        padding:24px;
    }

    .hsu-live-table{
        width:100%;
        min-width:0;
    }

    .hsu-table-scroll{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
    }

    .hsu-2k-table{
        min-width:720px;
        width:max-content;
    }

    .match-team-heading{
        min-width:0;
        max-width:100%;
    }

    .match-team-heading > div{
        min-width:0;
    }

    .match-team-heading .text-link{
        flex-shrink:0;
    }
}

@media (max-width:390px){

    .match-data-grid .data-block{
        padding:20px;
    }

}


/* =========================================================
   HSU MATCHCENTER — MOBILE VISIBILITY FORCE
   Diagnose/Fix: Spieltage müssen auf Mobile sichtbar sein
========================================================= */

@media (max-width: 760px){

    .hsu-season-rounds{
        display:grid !important;
        visibility:visible !important;
        opacity:1 !important;
        height:auto !important;
        max-height:none !important;
        overflow:visible !important;
    }

    .hsu-season-round{
        display:grid !important;
        visibility:visible !important;
        opacity:1 !important;
        transform:none !important;
        height:auto !important;
        max-height:none !important;
        overflow:hidden !important;
    }

    .hsu-season-games{
        display:grid !important;
        visibility:visible !important;
        opacity:1 !important;
        height:auto !important;
        max-height:none !important;
    }

    .hsu-season-game{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        transform:none !important;
        height:auto !important;
        max-height:none !important;
    }
}



/* ==========================================================
   HSU MEMBER WORLD V1
   ========================================================== */

.hsu-member-world,
.hsu-profile-page,
.hsu-profile-edit{
    min-height:70vh;
    padding:72px 0 100px;
    background:
        radial-gradient(circle at 85% 10%,rgba(255,112,0,.13),transparent 30%),
        #070707;
    color:#fff;
}

.hsu-member-world-head,
.hsu-profile-edit-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin-bottom:48px;
}

.hsu-member-world h1,
.hsu-profile-edit h1{
    margin:10px 0 12px;
    font-size:clamp(42px,7vw,82px);
    line-height:.92;
    letter-spacing:-.055em;
}

.hsu-member-world h1 span,
.hsu-profile-edit h1 span{
    color:#ff7000;
}

.hsu-member-world-head p,
.hsu-profile-edit-head p{
    max-width:600px;
    color:#aaa;
    font-size:17px;
}

.hsu-member-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.hsu-member-card{
    position:relative;
    overflow:hidden;
    display:block;
    text-decoration:none;
    color:#fff;
    background:#111;
    border:1px solid rgba(255,255,255,.09);
    border-radius:24px;
    transition:.2s ease;
}

.hsu-member-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,112,0,.65);
}

.hsu-member-avatar{
    aspect-ratio:1/1;
    overflow:hidden;
    background:#191919;
}

.hsu-member-avatar img,
.hsu-profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hsu-member-card-body{
    padding:22px;
}

.hsu-member-status,
.hsu-profile-status{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,112,0,.13);
    color:#ff8a2a;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
}

.hsu-member-card h2{
    margin:12px 0 5px;
    font-size:26px;
}

.hsu-member-card p{
    margin:0;
    color:#999;
}

.hsu-member-card-xp{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-top:18px;
}

.hsu-member-card-xp strong{
    font-size:26px;
}

.hsu-member-card-xp span{
    color:#ff7000;
    font-size:11px;
    font-weight:900;
}

.hsu-profile-back{
    display:inline-block;
    margin-bottom:30px;
    color:#aaa;
    text-decoration:none;
}

.hsu-profile-hero{
    display:grid;
    grid-template-columns:220px 1fr;
    align-items:center;
    gap:42px;
    padding:34px;
    background:#111;
    border:1px solid rgba(255,255,255,.09);
    border-radius:30px;
}

.hsu-profile-avatar{
    width:220px;
    height:220px;
    overflow:hidden;
    border-radius:50%;
    background:#191919;
    border:4px solid rgba(255,112,0,.8);
}

.hsu-profile-identity h1{
    margin:10px 0 4px;
    font-size:clamp(42px,6vw,76px);
    line-height:.95;
}

.hsu-profile-identity p{
    color:#777;
    font-weight:800;
    letter-spacing:.14em;
    font-size:12px;
    margin-bottom:22px;
}

.hsu-profile-section{
    margin-top:30px;
    padding:34px;
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
}

.hsu-profile-section-head span,
.hsu-profile-bio span{
    color:#ff7000;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
}

.hsu-profile-section-head h2{
    margin:5px 0 26px;
    font-size:32px;
}

.hsu-profile-stat-grid,
.hsu-profile-about{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.hsu-profile-stat-grid > div,
.hsu-profile-about > div{
    padding:20px;
    border-radius:18px;
    background:#181818;
}

.hsu-profile-stat-grid span,
.hsu-profile-about span{
    display:block;
    color:#777;
    font-size:10px;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-profile-stat-grid strong,
.hsu-profile-about strong{
    display:block;
    margin-top:7px;
    font-size:22px;
}

.hsu-profile-bio{
    margin-top:22px;
    padding:22px;
    border-radius:18px;
    background:#181818;
}

.hsu-profile-bio p{
    margin:9px 0 0;
    color:#ccc;
    line-height:1.7;
}

.hsu-profile-form{
    padding:34px;
    border-radius:28px;
    background:#111;
    border:1px solid rgba(255,255,255,.09);
}

.hsu-profile-avatar-editor{
    display:flex;
    align-items:center;
    gap:28px;
    margin-bottom:34px;
}

.hsu-profile-avatar-editor .hsu-profile-avatar{
    width:130px;
    height:130px;
}

.hsu-profile-avatar-editor label{
    display:block;
    font-weight:900;
    margin-bottom:10px;
}

.hsu-profile-avatar-editor small{
    display:block;
    margin-top:8px;
    color:#777;
}

.hsu-profile-form-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.hsu-profile-form label span,
.hsu-profile-bio-field span{
    display:block;
    margin-bottom:8px;
    color:#aaa;
    font-size:12px;
    font-weight:800;
}

.hsu-profile-form input[type="text"],
.hsu-profile-form input[type="date"],
.hsu-profile-form textarea{
    width:100%;
    box-sizing:border-box;
    padding:15px 16px;
    color:#fff;
    background:#181818;
    border:1px solid rgba(255,255,255,.1);
    border-radius:13px;
    font:inherit;
}

.hsu-profile-bio-field{
    display:block;
    margin-top:20px;
}

.hsu-profile-privacy{
    display:grid;
    gap:12px;
    margin:28px 0;
    padding:22px;
    background:#181818;
    border-radius:18px;
}

.hsu-profile-privacy h2{
    margin:0 0 8px;
    font-size:19px;
}

.hsu-profile-privacy label{
    display:flex;
    align-items:center;
    gap:10px;
    color:#ccc;
}

.hsu-profile-message{
    padding:16px 18px;
    margin-bottom:20px;
    border-radius:14px;
}

.hsu-profile-message.success{
    background:rgba(39,174,96,.14);
}

.hsu-profile-message.error{
    background:rgba(220,53,69,.14);
}

@media(max-width:900px){

    .hsu-member-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hsu-profile-stat-grid,
    .hsu-profile-about{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hsu-profile-form-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:620px){

    .hsu-member-world,
    .hsu-profile-page,
    .hsu-profile-edit{
        padding:42px 0 70px;
    }

    .hsu-member-world-head,
    .hsu-profile-edit-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .hsu-member-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .hsu-member-card{
        border-radius:18px;
    }

    .hsu-member-card-body{
        padding:15px;
    }

    .hsu-member-card h2{
        font-size:19px;
    }

    .hsu-profile-hero{
        grid-template-columns:1fr;
        text-align:center;
        padding:26px 18px;
    }

    .hsu-profile-avatar{
        width:160px;
        height:160px;
        margin:auto;
    }

    .hsu-profile-stat-grid,
    .hsu-profile-about{
        grid-template-columns:1fr 1fr;
    }

    .hsu-profile-section{
        padding:22px 16px;
    }

    .hsu-profile-avatar-editor{
        flex-direction:column;
        align-items:flex-start;
    }

    .hsu-profile-form{
        padding:22px 16px;
    }
}



/* ==========================================================
   HSU GLOBAL ACCOUNT HEADER V1
   ========================================================== */

.hsu-header-account{
    position:relative;
    margin:0;
}

.hsu-header-account summary{
    list-style:none;
}

.hsu-header-account summary::-webkit-details-marker{
    display:none;
}

.hsu-header-account-chip{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    min-height:46px;
    padding:5px 13px 5px 6px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(255,255,255,.045);
    color:#fff;
    cursor:pointer;
    user-select:none;
    transition:
        border-color .18s ease,
        background .18s ease;
}

.hsu-header-account-chip:hover,
.hsu-header-account[open] .hsu-header-account-chip{
    border-color:rgba(255,112,0,.7);
    background:rgba(255,112,0,.08);
}

.hsu-header-account-avatar{
    position:relative;
    flex:0 0 auto;
    width:36px;
    height:36px;
    border-radius:50%;
}

.hsu-header-account-avatar img{
    display:block;
    width:36px;
    height:36px;
    border-radius:50%;
    object-fit:cover;
    background:#171717;
    border:1px solid rgba(255,112,0,.55);
}

.hsu-header-unread-badge{
    position:absolute;
    top:-6px;
    right:-7px;
    display:grid;
    place-items:center;
    min-width:19px;
    height:19px;
    padding:0 5px;
    border-radius:999px;
    background:#ff7000;
    color:#050505;
    border:2px solid #050505;
    font-size:10px;
    font-weight:950;
    line-height:1;
}

.hsu-header-account-name{
    max-width:105px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:900;
}

.hsu-header-account-chevron{
    color:#777;
    font-size:15px;
    transform:translateY(-1px);
}

.hsu-header-account[open]
.hsu-header-account-chevron{
    transform:rotate(180deg);
}

.hsu-header-account-menu{
    position:absolute;
    z-index:2000;
    top:calc(100% + 12px);
    right:0;
    width:280px;
    overflow:hidden;
    border-radius:20px;
    background:#101010;
    border:1px solid rgba(255,255,255,.11);
    box-shadow:
        0 24px 70px rgba(0,0,0,.55);
}

.hsu-header-account-menu::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:2px;
    background:#ff7000;
}

.hsu-header-account-menu-head{
    padding:20px 20px 15px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.hsu-header-account-menu-head span{
    display:block;
    color:#ff7000;
    font-size:9px;
    font-weight:950;
    letter-spacing:.15em;
}

.hsu-header-account-menu-head strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:20px;
}

.hsu-header-account-menu > a{
    display:block;
    padding:13px 20px;
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.055);
    transition:background .15s ease;
}

.hsu-header-account-menu > a:hover{
    background:rgba(255,255,255,.055);
}

.hsu-header-account-menu > a span{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    font-size:14px;
    font-weight:850;
}

.hsu-header-account-menu > a small{
    display:block;
    margin-top:3px;
    color:#747474;
    font-size:11px;
}

.hsu-header-message-link b{
    display:grid;
    place-items:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:#ff7000;
    color:#080808;
    font-size:10px;
    font-weight:950;
}

.hsu-header-account-menu
.hsu-header-account-logout{
    color:#999;
    border-bottom:0;
}


/*
 * Desktop space optimisation.
 */

@media(min-width:1101px){

    .main-nav{
        gap:25px;
    }

}


/*
 * Mobile account block.
 *
 * The existing mobile navigation keeps controlling
 * visibility/open state of .main-nav.
 */

@media(max-width:1100px){

    .hsu-header-account{
        width:100%;
        order:-1;
        margin-bottom:7px;
    }

    .hsu-header-account-chip{
        width:100%;
        box-sizing:border-box;
        justify-content:flex-start;
        min-height:58px;
        padding:8px 12px 8px 8px;
        border-radius:16px;
    }

    .hsu-header-account-avatar,
    .hsu-header-account-avatar img{
        width:42px;
        height:42px;
    }

    .hsu-header-account-name{
        max-width:none;
        flex:1;
        font-size:15px;
    }

    .hsu-header-account-menu{
        position:static;
        width:100%;
        margin-top:8px;
        box-shadow:none;
        border-radius:16px;
    }

}



/* ==========================================================
   HSU PRIVATE MESSENGER V1
   ========================================================== */

.hsu-messenger{
    min-height:75vh;
    padding:62px 0 90px;
    color:#fff;
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(255,112,0,.12),
            transparent 32%
        ),
        #070707;
}

.hsu-messenger-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:34px;
}

.hsu-messenger-title h1{
    margin:8px 0 8px;
    font-size:clamp(44px,6vw,76px);
    line-height:.95;
    letter-spacing:-.05em;
}

.hsu-messenger-title p{
    margin:0;
    color:#888;
}

.hsu-messenger-layout{
    display:grid;
    grid-template-columns:330px minmax(0,1fr);
    min-height:660px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    border-radius:28px;
    background:#101010;
    box-shadow:0 30px 80px rgba(0,0,0,.28);
}

.hsu-messenger-sidebar{
    border-right:1px solid rgba(255,255,255,.08);
    background:#0d0d0d;
}

.hsu-messenger-sidebar-head{
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.hsu-messenger-sidebar-head strong{
    font-size:19px;
}

.hsu-messenger-sidebar-head a{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    text-decoration:none;
    color:#050505;
    background:#ff7000;
    font-size:20px;
    font-weight:900;
}

.hsu-messenger-conversations{
    max-height:588px;
    overflow-y:auto;
}

.hsu-messenger-conversation{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    min-height:76px;
    padding:10px 16px;
    border-bottom:1px solid rgba(255,255,255,.055);
    color:#fff;
    text-decoration:none;
    transition:background .15s ease;
}

.hsu-messenger-conversation:hover{
    background:rgba(255,255,255,.035);
}

.hsu-messenger-conversation.active{
    background:rgba(255,112,0,.09);
    box-shadow:inset 3px 0 #ff7000;
}

.hsu-messenger-mini-avatar{
    width:48px;
    height:48px;
    overflow:hidden;
    border-radius:50%;
    background:#181818;
}

.hsu-messenger-mini-avatar img,
.hsu-messenger-chat-avatar img,
.hsu-messenger-first-avatar img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hsu-messenger-conversation-copy{
    min-width:0;
}

.hsu-messenger-conversation-copy strong,
.hsu-messenger-conversation-copy small{
    display:block;
}

.hsu-messenger-conversation-copy strong{
    font-size:14px;
}

.hsu-messenger-conversation-copy small{
    margin-top:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#707070;
    font-size:11px;
}

.hsu-messenger-unread{
    display:grid;
    place-items:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:#ff7000;
    color:#080808;
    font-size:10px;
    font-weight:950;
}

.hsu-messenger-empty-list{
    padding:26px 20px;
}

.hsu-messenger-empty-list strong{
    display:block;
    margin-bottom:7px;
}

.hsu-messenger-empty-list p{
    color:#777;
    font-size:13px;
    line-height:1.5;
}

.hsu-messenger-empty-list a{
    color:#ff7000;
    font-weight:800;
    text-decoration:none;
}

.hsu-messenger-chat{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    min-width:0;
    min-height:660px;
    background:
        radial-gradient(
            circle at 70% 0%,
            rgba(255,112,0,.05),
            transparent 30%
        ),
        #121212;
}

.hsu-messenger-chat-head{
    height:72px;
    display:flex;
    align-items:center;
    padding:0 22px;
    border-bottom:1px solid rgba(255,255,255,.07);
    background:rgba(12,12,12,.92);
}

.hsu-messenger-chat-person{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
}

.hsu-messenger-chat-avatar{
    width:42px;
    height:42px;
    overflow:hidden;
    border-radius:50%;
    background:#181818;
    border:1px solid rgba(255,112,0,.4);
}

.hsu-messenger-chat-person strong,
.hsu-messenger-chat-person small{
    display:block;
}

.hsu-messenger-chat-person strong{
    font-size:15px;
}

.hsu-messenger-chat-person small{
    margin-top:2px;
    color:#777;
    font-size:10px;
}

.hsu-messenger-messages{
    min-height:0;
    max-height:520px;
    overflow-y:auto;
    padding:26px 22px;
    scroll-behavior:smooth;
}

.hsu-message-row{
    display:flex;
    margin:7px 0;
}

.hsu-message-row.mine{
    justify-content:flex-end;
}

.hsu-message-row.theirs{
    justify-content:flex-start;
}

.hsu-message-bubble{
    max-width:min(72%,620px);
    padding:11px 14px 8px;
    border-radius:18px;
}

.hsu-message-row.mine .hsu-message-bubble{
    background:#ff7000;
    color:#080808;
    border-bottom-right-radius:5px;
}

.hsu-message-row.theirs .hsu-message-bubble{
    background:#202020;
    color:#f3f3f3;
    border-bottom-left-radius:5px;
}

.hsu-message-bubble p{
    margin:0;
    line-height:1.45;
    word-break:break-word;
    font-size:14px;
}

.hsu-message-bubble footer{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:5px;
    opacity:.62;
    font-size:9px;
    font-weight:700;
}

.hsu-message-read{
    white-space:nowrap;
}

.hsu-messenger-compose{
    display:grid;
    grid-template-columns:minmax(0,1fr) 48px;
    align-items:end;
    gap:10px;
    padding:14px 18px 18px;
    border-top:1px solid rgba(255,255,255,.07);
    background:#0e0e0e;
}

.hsu-messenger-compose textarea{
    width:100%;
    min-height:48px;
    max-height:140px;
    box-sizing:border-box;
    resize:none;
    padding:14px 17px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:22px;
    outline:none;
    background:#191919;
    color:#fff;
    font:inherit;
}

.hsu-messenger-compose textarea:focus{
    border-color:rgba(255,112,0,.7);
}

.hsu-messenger-compose button{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    padding:0;
    border:0;
    border-radius:50%;
    cursor:pointer;
    background:#ff7000;
    color:#070707;
    font-size:20px;
    font-weight:950;
}

.hsu-messenger-first-message{
    display:grid;
    justify-items:center;
    padding:50px 20px;
    text-align:center;
    color:#777;
}

.hsu-messenger-first-avatar{
    width:82px;
    height:82px;
    overflow:hidden;
    margin-bottom:14px;
    border-radius:50%;
    border:2px solid rgba(255,112,0,.5);
}

.hsu-messenger-first-message strong{
    color:#fff;
    font-size:20px;
}

.hsu-messenger-first-message p{
    margin:5px 0 0;
}

.hsu-messenger-no-chat{
    grid-row:1 / -1;
    align-self:center;
    justify-self:center;
    max-width:430px;
    padding:50px 25px;
    text-align:center;
}

.hsu-messenger-no-chat > div{
    display:grid;
    place-items:center;
    width:70px;
    height:70px;
    margin:0 auto 18px;
    border-radius:50%;
    background:rgba(255,112,0,.1);
    color:#ff7000;
    font-size:30px;
}

.hsu-messenger-no-chat h2{
    margin:0 0 8px;
    font-size:30px;
}

.hsu-messenger-no-chat p{
    margin:0 0 24px;
    color:#777;
    line-height:1.6;
}


@media(max-width:800px){

    .hsu-messenger{
        padding:35px 0 60px;
    }

    .hsu-messenger-title{
        align-items:flex-start;
        flex-direction:column;
    }

    .hsu-messenger-layout{
        grid-template-columns:1fr;
        min-height:auto;
        border-radius:22px;
    }

    .hsu-messenger-sidebar{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .hsu-messenger-conversations{
        display:flex;
        max-height:none;
        overflow-x:auto;
        overflow-y:hidden;
    }

    .hsu-messenger-conversation{
        flex:0 0 225px;
        border-right:1px solid rgba(255,255,255,.055);
        border-bottom:0;
    }

    .hsu-messenger-conversation.active{
        box-shadow:inset 0 -3px #ff7000;
    }

    .hsu-messenger-chat{
        min-height:590px;
    }

    .hsu-messenger-messages{
        max-height:470px;
        padding:20px 12px;
    }

    .hsu-message-bubble{
        max-width:84%;
    }

}


@media(max-width:520px){

    .hsu-messenger-title h1{
        font-size:46px;
    }

    .hsu-messenger-layout{
        margin-left:-8px;
        margin-right:-8px;
        border-radius:17px;
    }

    .hsu-messenger-sidebar-head,
    .hsu-messenger-chat-head{
        height:64px;
    }

    .hsu-messenger-chat{
        min-height:calc(100vh - 250px);
    }

    .hsu-messenger-messages{
        max-height:calc(100vh - 390px);
    }

    .hsu-messenger-compose{
        padding:10px;
    }

}



/* ==========================================================
   HSU MESSENGER V2 · MEDIA
   ========================================================== */

.hsu-messenger-compose{
    grid-template-columns:auto minmax(0,1fr) 48px;
}

.hsu-messenger-media-actions{
    display:flex;
    align-items:center;
    gap:5px;
    padding-bottom:1px;
}

.hsu-messenger-media-button{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:42px;
    height:42px;
    padding:0;
    border:0;
    border-radius:50%;
    cursor:pointer;
    background:#202020;
    color:#ddd;
    font:inherit;
    text-decoration:none;
    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.hsu-messenger-media-button:hover{
    background:#292929;
    color:#ff7000;
}

.hsu-messenger-media-button.recording{
    background:#ff7000;
    color:#080808;
    animation:
        hsu-record-pulse
        1.2s
        infinite;
}

@keyframes hsu-record-pulse{

    0%,
    100%{
        box-shadow:
            0 0 0 0
            rgba(255,112,0,.32);
    }

    50%{
        box-shadow:
            0 0 0 10px
            rgba(255,112,0,0);
    }
}

.hsu-messenger-recording{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:9px;
    min-height:34px;
    padding:6px 12px;
    border-radius:13px;
    background:
        rgba(255,112,0,.09);
    color:#ddd;
    font-size:11px;
}

.hsu-messenger-recording[hidden]{
    display:none;
}

.hsu-messenger-recording-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff7000;
    animation:
        hsu-record-dot
        1s
        infinite;
}

@keyframes hsu-record-dot{

    50%{
        opacity:.3;
    }
}

.hsu-messenger-recording time{
    color:#ff8a2a;
    font-weight:900;
}

.hsu-messenger-recording button{
    width:auto;
    height:auto;
    margin-left:auto;
    padding:5px 9px;
    border-radius:999px;
    background:transparent;
    border:1px solid rgba(255,255,255,.14);
    color:#aaa;
    font-size:10px;
}

.hsu-message-image-link{
    display:block;
    max-width:420px;
    overflow:hidden;
    border-radius:13px;
}

.hsu-message-image-link img{
    display:block;
    width:100%;
    max-height:440px;
    object-fit:contain;
    background:#090909;
    border-radius:13px;
}

.hsu-message-row.mine
.hsu-message-image-link{
    margin:-6px -9px 0;
}

.hsu-message-row.theirs
.hsu-message-image-link{
    margin:-6px -9px 0;
}

.hsu-message-audio{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:280px;
    max-width:420px;
}

.hsu-message-audio > span{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:
        rgba(0,0,0,.12);
}

.hsu-message-audio audio{
    width:100%;
    min-width:220px;
    height:38px;
}


@media(max-width:620px){

    .hsu-messenger-compose{
        grid-template-columns:
            auto
            minmax(0,1fr)
            44px;
    }

    .hsu-messenger-media-button{
        width:38px;
        height:38px;
    }

    .hsu-messenger-send-button{
        width:44px !important;
        height:44px !important;
    }

    .hsu-message-image-link{
        max-width:
            min(
                72vw,
                340px
            );
    }

    .hsu-message-audio{
        min-width:
            min(
                66vw,
                290px
            );
    }

    .hsu-message-audio audio{
        min-width:0;
    }

}



/* ==========================================================
   HSU MOBILE NAVIGATION V2
   Account-first navigation
   ========================================================== */

.hsu-header-login-mobile{
    display:none;
}


@media(max-width:1100px){

    /*
     * Main mobile menu becomes a clean vertical sheet.
     */

    .main-nav{
        align-items:stretch !important;
        gap:0 !important;
        overflow-y:auto;
        overscroll-behavior:contain;
        padding-bottom:
            calc(
                28px
                + env(safe-area-inset-bottom)
            ) !important;
    }


    /*
     * PERSONAL AREA FIRST
     */

    .hsu-header-account{
        order:-20 !important;
        width:100%;
        margin:
            2px
            0
            18px !important;
        padding:
            0
            0
            18px;
        border-bottom:
            1px solid
            rgba(255,255,255,.1);
    }

    .hsu-header-account-chip{
        min-height:68px;
        padding:9px 12px 9px 9px;
        border-radius:18px;
        background:#121212;
        border:
            1px solid
            rgba(255,255,255,.1);
    }

    .hsu-header-account-avatar,
    .hsu-header-account-avatar img{
        width:50px;
        height:50px;
    }

    .hsu-header-account-name{
        font-size:17px;
        max-width:none;
        flex:1;
    }

    /*
     * Mobile: personal shortcuts are always visible.
     * No second nested menu interaction required.
     */

    .hsu-header-account-menu{
        position:static !important;
        display:grid !important;
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        width:100% !important;
        margin-top:10px;
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }

    .hsu-header-account-menu::before{
        display:none;
    }

    .hsu-header-account-menu-head{
        display:none;
    }

    .hsu-header-account-menu > a{
        min-height:57px;
        box-sizing:border-box;
        padding:11px 12px;
        margin:4px;
        border:
            1px solid
            rgba(255,255,255,.075);
        border-radius:13px;
        background:#111;
    }

    .hsu-header-account-menu > a span{
        font-size:13px;
    }

    .hsu-header-account-menu > a small{
        margin-top:3px;
        font-size:9px;
    }

    .hsu-header-account-menu
    .hsu-header-account-logout{
        grid-column:1 / -1;
        min-height:auto;
        text-align:center;
        color:#888;
        background:transparent;
    }

    .hsu-header-account-chevron{
        display:none;
    }


    /*
     * LOGGED OUT PERSONAL AREA
     */

    .hsu-header-login-mobile{
        order:-20;
        display:grid;
        grid-template-columns:48px minmax(0,1fr);
        gap:12px;
        width:100%;
        box-sizing:border-box;
        margin:
            2px
            0
            18px;
        padding:
            14px;
        border:
            1px solid
            rgba(255,112,0,.22);
        border-radius:18px;
        background:
            linear-gradient(
                135deg,
                rgba(255,112,0,.1),
                rgba(255,255,255,.025)
            );
    }

    .hsu-header-login-mobile-icon{
        grid-row:1 / 3;
        display:grid;
        place-items:center;
        width:48px;
        height:48px;
        border-radius:50%;
        background:#1d1d1d;
        color:#ff7000;
        font-size:22px;
    }

    .hsu-header-login-mobile-copy span,
    .hsu-header-login-mobile-copy strong,
    .hsu-header-login-mobile-copy small{
        display:block;
    }

    .hsu-header-login-mobile-copy span{
        color:#ff7000;
        font-size:9px;
        font-weight:950;
        letter-spacing:.13em;
    }

    .hsu-header-login-mobile-copy strong{
        margin-top:3px;
        color:#fff;
        font-size:15px;
    }

    .hsu-header-login-mobile-copy small{
        margin-top:2px;
        color:#777;
        font-size:10px;
    }

    .hsu-header-login-mobile > a{
        grid-column:1 / -1;
        display:block;
        margin-top:4px;
        padding:13px 15px;
        border-radius:999px;
        text-align:center;
        text-decoration:none;
        background:#ff7000;
        color:#080808;
        font-size:13px;
        font-weight:950;
    }


    /*
     * MAIN NAV ITEMS
     */

    .main-nav > a:not(.nav-cta),
    .nav-parent{
        width:100%;
        box-sizing:border-box;
        border-bottom:
            1px solid
            rgba(255,255,255,.075);
    }

    .main-nav > a:not(.nav-cta),
    .nav-parent > button{
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        width:100%;
        min-height:59px;
        box-sizing:border-box;
        padding:
            0
            8px !important;
        color:#e7e7e7;
        font-size:17px !important;
        font-weight:850;
        text-align:left;
    }

    .nav-parent > button::after{
        content:"＋" !important;
        position:static !important;
        display:block !important;
        width:auto !important;
        height:auto !important;
        margin-left:auto;
        background:none !important;
        color:#777;
        font-size:20px;
        line-height:1;
        transform:none !important;
    }

    .nav-parent.mobile-open
    > button{
        color:#ff7000;
    }

    .nav-parent.mobile-open
    > button::after{
        content:"−" !important;
        color:#ff7000;
    }


    /*
     * IMPORTANT:
     * Existing desktop hover rules must not force
     * dropdowns open on touch devices.
     */

    .main-nav
    .nav-parent
    .nav-dropdown,
    .main-nav
    .nav-parent:hover
    .nav-dropdown,
    .main-nav
    .nav-parent:focus-within
    .nav-dropdown{
        position:static !important;
        display:none !important;
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:
            0
            0
            9px
            16px !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        pointer-events:auto !important;
    }

    .main-nav
    .nav-parent.mobile-open
    > .nav-dropdown{
        display:block !important;
    }

    .main-nav
    .nav-dropdown
    a{
        display:block;
        min-height:auto;
        padding:
            10px
            12px !important;
        margin:
            2px
            0;
        border-left:
            2px solid
            rgba(255,112,0,.3);
        border-radius:
            0
            10px
            10px
            0;
        background:
            rgba(255,255,255,.018);
    }

    .main-nav
    .nav-dropdown
    a span{
        font-size:14px;
        font-weight:800;
    }

    .main-nav
    .nav-dropdown
    a small{
        margin-top:2px;
        color:#777;
        font-size:10px;
    }


    /*
     * Fanzone remains visually important.
     */

    .main-nav
    > a.active{
        color:#ff7000 !important;
    }


    /*
     * Sponsor CTA at the end, not mixed with account.
     */

    .main-nav
    .nav-cta{
        order:50;
        display:block;
        width:100%;
        box-sizing:border-box;
        margin:
            22px
            0
            0 !important;
        padding:
            15px
            18px !important;
        border-radius:999px;
        text-align:center;
        font-size:13px !important;
    }

}


@media(max-width:520px){

    .hsu-header-account-menu{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .hsu-header-account-menu > a{
        padding:
            10px
            9px;
    }

}



/* ==========================================================
   HSU PROFILE CROPPER V1
   ========================================================== */

.hsu-cropper-modal{
    position:fixed;
    inset:0;
    z-index:100000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:
        max(
            18px,
            env(safe-area-inset-top)
        )
        18px
        max(
            18px,
            env(safe-area-inset-bottom)
        );
}

.hsu-cropper-modal.open{
    display:flex;
}

.hsu-cropper-backdrop{
    position:absolute;
    inset:0;
    background:
        rgba(0,0,0,.88);
    backdrop-filter:
        blur(8px);
}

.hsu-cropper-dialog{
    position:relative;
    z-index:1;
    width:
        min(
            94vw,
            680px
        );
    max-height:
        calc(
            100dvh - 36px
        );
    overflow-y:auto;
    box-sizing:border-box;
    padding:22px;
    border:
        1px solid
        rgba(255,255,255,.12);
    border-radius:22px;
    background:#101010;
    box-shadow:
        0 30px 90px
        rgba(0,0,0,.55);
}

.hsu-cropper-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:18px;
}

.hsu-cropper-head small{
    display:block;
    color:#ff7000;
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
}

.hsu-cropper-head strong{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:
        clamp(
            20px,
            4vw,
            28px
        );
}

.hsu-cropper-close{
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:#202020;
    color:#fff;
    font-size:27px;
    line-height:1;
    cursor:pointer;
}

.hsu-cropper-stage{
    position:relative;
    width:100%;
    max-width:600px;
    aspect-ratio:1 / 1;
    margin:auto;
    overflow:hidden;
    border-radius:18px;
    background:#050505;
    touch-action:none;
}

.hsu-cropper-canvas{
    display:block;
    width:100%;
    height:100%;
    cursor:grab;
}

.hsu-cropper-canvas:active{
    cursor:grabbing;
}

.hsu-cropper-guide{
    position:absolute;
    inset:5%;
    pointer-events:none;
    border:
        2px solid
        rgba(255,255,255,.82);
    border-radius:50%;
    box-shadow:
        0 0 0 2000px
        rgba(0,0,0,.22);
}

.hsu-cropper-help{
    margin:14px 2px 0;
    color:#888;
    font-size:12px;
    line-height:1.5;
}

.hsu-cropper-zoom{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:16px;
    margin-top:18px;
    color:#ddd;
    font-size:13px;
}

.hsu-cropper-range{
    width:100%;
    accent-color:#ff7000;
}

.hsu-cropper-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;
}

.hsu-cropper-actions button{
    min-height:46px;
    padding:0 18px;
    border-radius:999px;
    font-weight:900;
    cursor:pointer;
}

.hsu-cropper-cancel{
    border:
        1px solid
        rgba(255,255,255,.12);
    background:#171717;
    color:#aaa;
}

.hsu-cropper-save{
    border:0;
    background:#ff7000;
    color:#080808;
}

body.hsu-cropper-open{
    overflow:hidden;
}


/* ==========================================================
   HSU COMMUNITY MEMBER PHOTO V2
   ========================================================== */

.hsu-community-card-photo-holder{
    position:relative !important;
    overflow:hidden !important;
    background:#111 !important;
}

.hsu-community-card-photo{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;

    /*
     * Slight bias towards the face instead of torso.
     */
    object-position:center 28% !important;
}


/*
 * Community cards:
 * prevent extremely tall desktop portraits.
 */

@media(min-width:701px){

    .hsu-community-card-photo-holder{
        aspect-ratio:
            4 / 3 !important;
        max-height:
            430px !important;
    }

    .hsu-community-card-photo-holder
    .hsu-community-card-photo{
        position:absolute !important;
        inset:0 !important;
    }
}


@media(max-width:700px){

    .hsu-cropper-dialog{
        width:100%;
        padding:15px;
        border-radius:18px;
    }

    .hsu-cropper-actions{
        display:grid;
        grid-template-columns:
            1fr
            1.6fr;
    }

    .hsu-cropper-actions button{
        padding:
            0
            10px;
        font-size:12px;
    }

    .hsu-community-card-photo-holder{
        aspect-ratio:
            1 / 1 !important;
    }

}


/* ==========================================================
   HSU MOBILE NAV HARD FALLBACK V3
   ========================================================== */

@media(max-width:1100px){

    .main-nav
    .nav-parent
    > .nav-dropdown,

    .main-nav
    .nav-parent:hover
    > .nav-dropdown,

    .main-nav
    .nav-parent:focus-within
    > .nav-dropdown{

        display:none !important;
        position:static !important;

        height:0 !important;
        max-height:0 !important;

        overflow:hidden !important;

        opacity:0 !important;
        visibility:hidden !important;

        pointer-events:none !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;
    }


    .main-nav
    .nav-parent.mobile-open
    > .nav-dropdown,

    .main-nav
    .nav-parent.mobile-open:hover
    > .nav-dropdown,

    .main-nav
    .nav-parent.mobile-open:focus-within
    > .nav-dropdown{

        display:block !important;

        height:auto !important;
        max-height:1000px !important;

        overflow:visible !important;

        opacity:1 !important;
        visibility:visible !important;

        pointer-events:auto !important;

        padding:
            0
            0
            10px
            16px !important;
    }


    .main-nav
    .nav-parent
    > button{

        cursor:pointer !important;
        touch-action:manipulation !important;
        -webkit-tap-highlight-color:
            transparent;
    }


    .main-nav
    .nav-parent
    > button::after{

        content:"＋" !important;
    }


    .main-nav
    .nav-parent.mobile-open
    > button::after{

        content:"−" !important;
        color:#ff7000 !important;
    }


    .main-nav
    .nav-parent.mobile-open
    > button{

        color:#ff7000 !important;
    }

}



/* ==========================================================
   HSU PUSH NOTIFICATIONS V1
   ========================================================== */

.hsu-push-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    margin: 0 0 24px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.04);
}

.hsu-push-card h2 {
    margin: 4px 0 8px;
}

.hsu-push-card p {
    margin: 0;
}

.hsu-push-ios-hint {
    margin-top: 10px !important;
    opacity: .72;
}

@media (max-width: 720px) {

    .hsu-push-card {
        align-items: stretch;
        flex-direction: column;
    }

    .hsu-push-card .button {
        width: 100%;
    }
}


/* ==========================================================
   HSU COMMUNITY PERSONAL NAV V1
   ========================================================== */

.hsu-header-account-avatar{
    position:relative;
}

.hsu-header-unread-badge{
    position:absolute;
    top:-5px;
    right:-7px;
    z-index:3;
    display:grid;
    place-items:center;
    min-width:22px;
    height:22px;
    box-sizing:border-box;
    padding:0 6px;
    border:2px solid #090909;
    border-radius:999px;
    background:#ff7000;
    color:#070707;
    font-size:10px;
    line-height:1;
    font-weight:950;
    box-shadow:0 4px 14px rgba(255,112,0,.32);
}

.hsu-header-account-menu
.hsu-header-quick-link{
    position:relative;
    display:grid;
    grid-template-columns:
        38px
        minmax(0,1fr)
        auto;
    align-items:center;
    gap:10px;
}

.hsu-header-quick-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    background:#181818;
    color:#ff7000;
    font-size:15px;
    font-weight:950;
}

.hsu-header-quick-copy{
    min-width:0;
}

.hsu-header-account-menu
.hsu-header-quick-copy strong,
.hsu-header-account-menu
.hsu-header-quick-copy small{
    display:block;
}

.hsu-header-account-menu
.hsu-header-quick-copy strong{
    color:#fff;
    font-size:13px;
    font-weight:900;
}

.hsu-header-account-menu
.hsu-header-quick-copy small{
    margin-top:3px;
    color:#777;
    font-size:9px;
    line-height:1.25;
}

.hsu-header-quick-badge{
    display:grid;
    place-items:center;
    min-width:24px;
    height:24px;
    box-sizing:border-box;
    padding:0 6px;
    border-radius:999px;
    background:#ff7000;
    color:#070707;
    font-size:10px;
    line-height:1;
    font-weight:950;
}

.hsu-header-account-menu
.hsu-header-message-link.has-unread{
    border-color:rgba(255,112,0,.38);
    background:
        linear-gradient(
            135deg,
            rgba(255,112,0,.13),
            rgba(255,255,255,.025)
        );
}

.hsu-header-message-link.has-unread
.hsu-header-quick-icon{
    border-color:rgba(255,112,0,.32);
    background:rgba(255,112,0,.12);
}


@media(max-width:1100px){

    /*
     * The personal card itself becomes the unmistakable
     * entry point for the HSU Community account.
     */

    .hsu-header-account-chip{
        position:relative;
        border-color:rgba(255,255,255,.12);
    }

    .hsu-header-account-menu{
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;
        gap:8px;
        margin-top:12px;
    }

    .hsu-header-account-menu
    > .hsu-header-quick-link{
        min-height:72px;
        margin:0 !important;
        padding:12px !important;
        grid-template-columns:
            38px
            minmax(0,1fr)
            auto;
        border-radius:15px;
    }

    .hsu-header-account-menu
    > .hsu-header-message-link{
        grid-column:1 / -1;
        min-height:76px;
    }

    .hsu-header-account-menu
    > .hsu-header-message-link
    .hsu-header-quick-copy strong{
        font-size:15px;
    }

    .hsu-header-account-menu
    > .hsu-header-account-logout{
        grid-column:1 / -1;
        margin-top:3px !important;
    }

}


@media(max-width:520px){

    .hsu-header-account-menu{
        gap:7px;
    }

    .hsu-header-account-menu
    > .hsu-header-quick-link{
        grid-template-columns:
            34px
            minmax(0,1fr)
            auto;
        gap:8px;
        padding:10px !important;
    }

    .hsu-header-quick-icon{
        width:34px;
        height:34px;
        font-size:13px;
    }

    .hsu-header-account-menu
    .hsu-header-quick-copy strong{
        font-size:12px;
    }

    .hsu-header-account-menu
    .hsu-header-quick-copy small{
        font-size:8px;
    }

}


/* ==========================================================
   HSU COMMUNITY MOBILE POLISH V1
   Visual only – no application logic
   ========================================================== */

@media(max-width:520px){

    /*
     * Personal Community area:
     * one clear vertical flow instead of cramped 2x2 tiles.
     */

    .hsu-header-account{
        margin-bottom:20px !important;
        padding-bottom:20px !important;
    }


    .hsu-header-account-chip{
        min-height:72px;
        padding:10px 13px 10px 10px;
        border-radius:20px;
    }


    .hsu-header-account-avatar,
    .hsu-header-account-avatar img{
        width:52px;
        height:52px;
    }


    .hsu-header-account-name{
        font-size:18px;
        font-weight:900;
    }


    .hsu-header-account-menu{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
        margin-top:12px !important;
    }


    /*
     * All shortcuts become full-width rows.
     */

    .hsu-header-account-menu
    > .hsu-header-quick-link{
        grid-column:1 / -1 !important;

        display:grid !important;

        grid-template-columns:
            42px
            minmax(0,1fr)
            auto
            !important;

        align-items:center;

        min-height:66px !important;

        margin:0 !important;

        padding:
            11px
            13px
            !important;

        gap:12px !important;

        border-radius:16px !important;

        background:#111 !important;
    }


    /*
     * Messages remains the primary action.
     */

    .hsu-header-account-menu
    > .hsu-header-message-link{
        min-height:78px !important;

        padding:
            13px
            14px
            !important;

        border-color:
            rgba(255,112,0,.28)
            !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,112,0,.10),
                rgba(255,255,255,.025)
            )
            !important;
    }


    .hsu-header-account-menu
    > .hsu-header-message-link.has-unread{
        border-color:
            rgba(255,112,0,.55)
            !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,112,0,.18),
                rgba(255,255,255,.03)
            )
            !important;
    }


    /*
     * Icons.
     */

    .hsu-header-quick-icon{
        width:42px !important;
        height:42px !important;

        border-radius:12px !important;

        font-size:15px !important;

        flex-shrink:0;
    }


    /*
     * Text gets the entire remaining row width.
     * No mid-word breaking.
     */

    .hsu-header-quick-copy{
        display:block;
        min-width:0;
    }


    .hsu-header-account-menu
    .hsu-header-quick-copy strong{
        display:block;

        margin:0;

        color:#fff;

        font-size:14px !important;
        line-height:1.2 !important;
        font-weight:900;

        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
        hyphens:none !important;
    }


    .hsu-header-account-menu
    .hsu-header-message-link
    .hsu-header-quick-copy strong{
        font-size:16px !important;
    }


    .hsu-header-account-menu
    .hsu-header-quick-copy small{
        display:block;

        margin-top:4px !important;

        color:#777;

        font-size:10px !important;
        line-height:1.3 !important;

        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
        hyphens:none !important;
    }


    /*
     * Keep badge visually separate from labels.
     */

    .hsu-header-quick-badge{
        justify-self:end;

        min-width:26px;
        height:26px;

        padding:0 7px;

        font-size:11px;
    }


    /*
     * Logout becomes a quiet footer action.
     */

    .hsu-header-account-menu
    > .hsu-header-account-logout{
        grid-column:1 / -1 !important;

        min-height:auto !important;

        margin:
            3px
            0
            0
            !important;

        padding:
            11px
            14px
            !important;

        border:
            1px solid
            rgba(255,255,255,.055)
            !important;

        border-radius:14px !important;

        background:
            rgba(255,255,255,.015)
            !important;

        text-align:left !important;
        color:#727272 !important;
    }


    .hsu-header-account-menu
    > .hsu-header-account-logout
    span{
        font-size:12px !important;
        font-weight:800;
    }

}


/* ==========================================================
   HSU COMMUNITY QUICK ACCESS V1
   Direct mobile messages + open-chat badge
   ========================================================== */


/*
 * Desktop:
 * keep the dedicated mobile shortcut invisible.
 */

.hsu-mobile-message-shortcut{
    display:none;
}


@media(max-width:1100px){

    /*
     * Header actions:
     * brand | direct messages | burger
     */

    .header-inner{
        position:relative;
    }


    .hsu-mobile-message-shortcut{
        position:absolute;
        z-index:30;

        right:76px;
        top:50%;

        transform:
            translateY(-50%);

        display:grid;
        place-items:center;

        width:48px;
        height:48px;

        box-sizing:border-box;

        border:
            1px solid
            rgba(255,112,0,.42);

        border-radius:50%;

        background:
            rgba(10,10,10,.96);

        color:#fff;

        text-decoration:none;

        box-shadow:
            0 8px 28px
            rgba(0,0,0,.28);
    }


    .hsu-mobile-message-shortcut-icon{
        display:block;

        color:#fff;

        font-size:23px;
        line-height:1;

        transform:
            translateY(-1px);
    }


    /*
     * New messages:
     * stronger orange visual state.
     */

    .hsu-mobile-message-shortcut.has-unread{
        border-color:#ff7000;

        background:
            radial-gradient(
                circle at 50% 50%,
                rgba(255,112,0,.15),
                rgba(9,9,9,.98) 68%
            );

        box-shadow:
            0 0 0 1px
            rgba(255,112,0,.10),
            0 8px 28px
            rgba(255,112,0,.12);
    }


    .hsu-mobile-message-shortcut-badge{
        position:absolute;

        top:-5px;
        right:-5px;

        z-index:2;

        display:grid;
        place-items:center;

        min-width:23px;
        height:23px;

        box-sizing:border-box;

        padding:
            0
            6px;

        border:
            2px solid
            #050505;

        border-radius:
            999px;

        background:#ff7000;

        color:#070707;

        font-size:10px;
        line-height:1;
        font-weight:950;

        box-shadow:
            0 5px 16px
            rgba(255,112,0,.38);
    }


    /*
     * When the burger menu is visible, the account
     * summary no longer needs to behave visually like
     * another collapsed menu layer.
     */

    .main-nav
    .hsu-header-account
    > summary{
        cursor:default;
    }


    /*
     * Give the user card a clear identity status.
     */

    .hsu-header-account-chip::after{
        content:"HSU Community";

        display:inline-flex;
        align-items:center;

        margin-left:auto;

        padding:
            5px
            9px;

        border-radius:
            999px;

        background:
            rgba(255,255,255,.055);

        color:#777;

        font-size:9px;
        line-height:1;
        font-weight:850;
        letter-spacing:.02em;
    }


    /*
     * Existing chevron stays unnecessary on mobile,
     * because the personal area is auto-expanded.
     */

    .hsu-header-account-chevron{
        display:none !important;
    }

}


@media(max-width:520px){

    .hsu-mobile-message-shortcut{
        right:68px;

        width:46px;
        height:46px;
    }


    .hsu-mobile-message-shortcut-icon{
        font-size:22px;
    }


    .hsu-header-account-chip::after{
        padding:
            5px
            8px;

        font-size:8px;
    }

}


/* ==========================================================
   HSU MOBILE MESSAGE SHORTCUT
   iOS TAP FIX V1
   ========================================================== */

@media(max-width:1100px){

    /*
     * Explicit stacking hierarchy:
     *
     * message shortcut = 60
     * burger           = 50
     * navigation       = below header controls
     */

    .header-inner{
        position:relative;
    }


    .hsu-mobile-message-shortcut{
        z-index:60 !important;

        pointer-events:auto !important;

        touch-action:manipulation;

        -webkit-tap-highlight-color:
            transparent;

        cursor:pointer;
    }


    /*
     * Children must never become separate
     * touch targets on Safari/iOS.
     */

    .hsu-mobile-message-shortcut
    > *{
        pointer-events:none !important;
    }


    .menu-button{
        position:relative;

        z-index:50 !important;

        pointer-events:auto;
    }


    /*
     * Keep the mobile nav below the two
     * permanent header controls.
     */

    .main-nav{
        z-index:40;
    }

}

/* ==========================================================
   HSU MOBILE MESSAGE SHORTCUT
   FLEX HITBOX FIX V1
   ========================================================== */

@media(max-width:1100px){

    /*
     * The message shortcut is a real header flex item.
     * No absolute overlap / invisible Safari hitbox.
     */

    .hsu-mobile-message-shortcut{

        position:relative !important;

        top:auto !important;
        right:auto !important;

        transform:none !important;

        z-index:60 !important;

        flex:
            0
            0
            48px;

        width:48px;
        height:48px;

        margin-left:auto;
        margin-right:10px;

        pointer-events:auto !important;

        touch-action:manipulation;
    }


    .menu-button{

        flex:
            0
            0
            auto;

        margin-left:0 !important;
    }
}


@media(max-width:520px){

    .hsu-mobile-message-shortcut{

        right:auto !important;

        flex-basis:46px;

        width:46px;
        height:46px;

        margin-right:8px;
    }
}



/* ==========================================================
   HSU COMMUNITY PRESENCE V1
   ========================================================== */

.hsu-community-presence,
.hsu-profile-presence,
.hsu-messenger-partner-presence{
    display:flex;
    align-items:center;
    gap:7px;
    color:#777;
    font-size:12px;
    font-weight:800;
}

.hsu-community-presence{
    margin-bottom:10px;
}

.hsu-profile-presence{
    margin:8px 0 4px;
}

.hsu-community-presence-dot{
    display:inline-block;
    flex:0 0 auto;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#666;
}

.hsu-community-presence.is-online,
.hsu-profile-presence.is-online,
.hsu-messenger-partner-presence.is-online{
    color:#55d982;
}

.is-online > .hsu-community-presence-dot{
    background:#39d76d;
    box-shadow:
        0 0 0 3px rgba(57,215,109,.12),
        0 0 12px rgba(57,215,109,.28);
}

.hsu-member-card:has(.hsu-community-presence.is-online){
    border-color:rgba(57,215,109,.32);
}

.hsu-messenger-partner-presence{
    margin-top:3px;
}

@media(max-width:620px){

    .hsu-community-presence{
        font-size:10px;
        gap:5px;
    }

    .hsu-community-presence-dot{
        width:7px;
        height:7px;
    }

    .hsu-profile-presence{
        justify-content:center;
    }
}



/* ==========================================================
   HSU PERSONAL FEED V1.1
   ========================================================== */

.hsu-feed-page{
    min-height:100vh;
    padding:32px 18px 70px;
}

.hsu-feed-shell{
    width:min(760px,100%);
    margin:0 auto;
}

.hsu-feed-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

.hsu-feed-eyebrow{
    display:block;
    margin-bottom:7px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    color:#f47a22;
}

.hsu-feed-hero h1{
    margin:0;
    font-size:clamp(30px,5vw,48px);
    line-height:1;
}

.hsu-feed-hero p{
    margin:10px 0 0;
    color:#888;
}

.hsu-feed-community-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    text-decoration:none;
    font-size:12px;
    font-weight:900;
}

.hsu-feed-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.hsu-feed-card{
    padding:18px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:20px;
    background:rgba(255,255,255,.025);
}

.hsu-feed-card-head{
    display:flex;
    align-items:center;
    gap:11px;
}

.hsu-feed-avatar{
    flex:0 0 auto;
    width:44px;
    height:44px;
    border-radius:50%;
    overflow:hidden;
    background:#171717;
}

.hsu-feed-avatar img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hsu-feed-author{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    flex-direction:column;
    gap:2px;
}

.hsu-feed-author a{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:inherit;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
}

.hsu-feed-author small{
    color:#777;
    font-size:11px;
}

.hsu-feed-meta{
    flex:0 0 auto;
    font-size:9px;
    line-height:1;
    font-weight:900;
    letter-spacing:.08em;
    color:#777;
}

.hsu-feed-content{
    padding:16px 0 2px 55px;
}

.hsu-feed-type{
    display:inline-block;
    margin-bottom:6px;
    color:#f47a22;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.hsu-feed-content h2{
    margin:0;
    font-size:21px;
    line-height:1.2;
}

.hsu-feed-content p{
    margin:7px 0 0;
    color:#999;
    line-height:1.45;
    font-size:13px;
}

.hsu-feed-empty{
    padding:30px;
    border:1px dashed rgba(255,255,255,.14);
    border-radius:20px;
    text-align:center;
}

.hsu-feed-empty strong{
    display:block;
    font-size:18px;
}

.hsu-feed-empty p{
    margin:8px auto 0;
    max-width:420px;
    color:#888;
    line-height:1.5;
}

@media(max-width:620px){

    .hsu-feed-page{
        padding:24px 13px 55px;
    }

    .hsu-feed-hero{
        align-items:flex-start;
    }

    .hsu-feed-card{
        padding:15px;
        border-radius:17px;
    }

    .hsu-feed-content{
        padding-left:0;
        padding-top:15px;
    }

    .hsu-feed-meta{
        font-size:8px;
    }

    .hsu-feed-content h2{
        font-size:18px;
    }
}



/* ==========================================================
   HSU PERSONAL FEED V1.2
   COMMUNITY POSTS + IMAGES
   ========================================================== */

.hsu-feed-composer{
    margin-bottom:18px;
    padding:18px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:20px;
    background:rgba(255,255,255,.035);
}

.hsu-feed-composer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:13px;
}

.hsu-feed-composer-head strong{
    font-size:17px;
}

.hsu-feed-composer-head span{
    color:#f47a22;
    font-size:10px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hsu-feed-post-form textarea{
    display:block;
    width:100%;
    min-height:88px;
    box-sizing:border-box;
    resize:vertical;
    padding:14px 15px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    outline:none;
    background:rgba(0,0,0,.20);
    color:inherit;
    font:inherit;
    line-height:1.45;
}

.hsu-feed-post-form textarea:focus{
    border-color:rgba(244,122,34,.65);
}

.hsu-feed-post-form textarea::placeholder{
    color:#777;
}

.hsu-feed-post-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
}

.hsu-feed-image-button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    cursor:pointer;
    font-size:12px;
    font-weight:900;
}

.hsu-feed-image-button input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.hsu-feed-image-name{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#888;
    font-size:11px;
}

.hsu-feed-submit{
    flex:0 0 auto;
    min-height:40px;
    padding:0 18px;
    border:0;
    border-radius:999px;
    cursor:pointer;
    background:#f47a22;
    color:#fff;
    font-weight:900;
}

.hsu-feed-post-success{
    margin-bottom:12px;
    padding:10px 12px;
    border-radius:12px;
    background:rgba(70,180,90,.12);
    font-size:12px;
    font-weight:800;
}

.hsu-feed-type-post{
    color:#fff;
}

.hsu-feed-post-media{
    margin-top:15px;
    overflow:hidden;
    border-radius:16px;
    background:#111;
}

.hsu-feed-post-media img{
    display:block;
    width:100%;
    max-height:640px;
    object-fit:cover;
}

@media(max-width:620px){

    .hsu-feed-composer{
        padding:14px;
        border-radius:17px;
    }

    .hsu-feed-post-actions{
        flex-wrap:wrap;
    }

    .hsu-feed-image-name{
        order:3;
        flex-basis:100%;
    }

    .hsu-feed-submit{
        margin-left:auto;
    }

    .hsu-feed-post-media{
        margin-left:-15px;
        margin-right:-15px;
        margin-bottom:-2px;
        border-radius:0 0 17px 17px;
    }
}



/* ==========================================================
   HSU PERSONAL FEED V1.3
   LIKES + COMMENTS
   ========================================================== */

.hsu-feed-social{
    margin-top:15px;
    padding-top:13px;
    border-top:1px solid rgba(255,255,255,.075);
}

.hsu-feed-social-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.hsu-feed-like-form{
    margin:0;
}

.hsu-feed-like-button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0;
    border:0;
    background:transparent;
    color:#8b8b8b;
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:850;
}

.hsu-feed-like-heart{
    font-size:19px;
    line-height:1;
    transition:
        transform .15s ease,
        color .15s ease;
}

.hsu-feed-like-button:hover
.hsu-feed-like-heart{
    transform:scale(1.12);
}

.hsu-feed-like-button.is-liked{
    color:#f47a22;
}

.hsu-feed-like-button.is-liked
.hsu-feed-like-heart{
    color:#f47a22;
}

.hsu-feed-like-button strong{
    font-size:11px;
}

.hsu-feed-comment-count{
    color:#777;
    font-size:11px;
}

.hsu-feed-comments{
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:13px;
}

.hsu-feed-comment{
    display:flex;
    align-items:flex-start;
    gap:8px;
}

.hsu-feed-comment-avatar{
    flex:0 0 auto;
    width:30px;
    height:30px;
    overflow:hidden;
    border-radius:50%;
    background:#171717;
}

.hsu-feed-comment-avatar img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hsu-feed-comment-bubble{
    flex:1 1 auto;
    min-width:0;
    padding:9px 11px;
    border-radius:13px;
    background:rgba(255,255,255,.045);
}

.hsu-feed-comment-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.hsu-feed-comment-head a{
    overflow:hidden;
    color:inherit;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    font-weight:900;
}

.hsu-feed-comment-head small{
    flex:0 0 auto;
    color:#666;
    font-size:9px;
}

.hsu-feed-comment-bubble p{
    margin:4px 0 0;
    color:#bbb;
    font-size:12px;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.hsu-feed-comment-form{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:11px;
}

.hsu-feed-comment-form input[type="text"]{
    flex:1 1 auto;
    min-width:0;
    height:38px;
    box-sizing:border-box;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;
    outline:none;
    background:rgba(0,0,0,.18);
    color:inherit;
    font:inherit;
    font-size:12px;
}

.hsu-feed-comment-form input[type="text"]:focus{
    border-color:rgba(244,122,34,.55);
}

.hsu-feed-comment-form input[type="text"]::placeholder{
    color:#6f6f6f;
}

.hsu-feed-comment-form button{
    flex:0 0 auto;
    width:38px;
    height:38px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#f47a22;
    color:#fff;
    cursor:pointer;
    font-size:17px;
    font-weight:900;
}

.hsu-feed-card:target{
    border-color:rgba(244,122,34,.30);
}

@media(max-width:620px){

    .hsu-feed-social{
        margin-top:13px;
    }

    .hsu-feed-comment-bubble{
        padding:8px 10px;
    }

    .hsu-feed-comment-form input[type="text"]{
        font-size:16px;
    }
}



/* ==========================================================
   HSU PERSONAL FEED V1.4
   OWN CONTENT DELETE
   ========================================================== */

.hsu-feed-head-actions{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:8px;
}

.hsu-feed-delete-post-form,
.hsu-feed-delete-comment-form{
    margin:0;
}

.hsu-feed-delete-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:27px;
    height:27px;
    padding:0;
    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;
    background:transparent;
    color:#777;
    cursor:pointer;
    font-size:18px;
    line-height:1;
}

.hsu-feed-delete-button:hover{
    border-color:rgba(244,122,34,.35);
    color:#f47a22;
}

.hsu-feed-comment-meta{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:5px;
}

.hsu-feed-delete-comment-form button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:19px;
    height:19px;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#666;
    cursor:pointer;
    font-size:14px;
    line-height:1;
}

.hsu-feed-delete-comment-form button:hover{
    color:#f47a22;
}

@media(max-width:620px){

    .hsu-feed-delete-button{
        width:30px;
        height:30px;
    }

    .hsu-feed-delete-comment-form button{
        width:23px;
        height:23px;
    }
}



/* ==========================================================
   HSU STORIES V1
   ========================================================== */

.hsu-stories{
    margin:0 0 18px;
    padding:16px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.025);
}

.hsu-stories-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.hsu-stories-head strong{
    font-size:15px;
}

.hsu-story-upload-form{
    margin:0;
}

.hsu-story-add{
    display:inline-flex;
    align-items:center;
    gap:5px;
    cursor:pointer;
    color:#f47a22;
    font-size:13px;
    font-weight:800;
}

.hsu-story-add span{
    font-size:20px;
    line-height:1;
}

.hsu-story-add input{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
}

.hsu-story-rail{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:2px 1px 6px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.hsu-story-rail::-webkit-scrollbar{
    display:none;
}

.hsu-story-person{
    display:flex;
    flex:0 0 68px;
    width:68px;
    flex-direction:column;
    align-items:center;
    gap:7px;
    padding:0;
    border:0;
    background:none;
    color:inherit;
    cursor:pointer;
}

.hsu-story-avatar-ring{
    display:flex;
    width:62px;
    height:62px;
    align-items:center;
    justify-content:center;
    padding:3px;
    border-radius:50%;
    background:#555;
}

.hsu-story-person.is-unseen
.hsu-story-avatar-ring{
    background:#f47a22;
}

.hsu-story-person.is-seen
.hsu-story-avatar-ring{
    background:#555;
}

.hsu-story-avatar-ring img{
    width:100%;
    height:100%;
    border:3px solid #111;
    border-radius:50%;
    object-fit:cover;
    background:#222;
}

.hsu-story-person-name{
    display:block;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    font-size:11px;
    font-weight:700;
}

.hsu-story-empty{
    color:#777;
    font-size:13px;
}

body.hsu-story-open{
    overflow:hidden;
}

.hsu-story-viewer[hidden]{
    display:none !important;
}

.hsu-story-viewer{
    position:fixed;
    z-index:100000;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(0,0,0,.94);
}

.hsu-story-viewer-stage{
    position:relative;
    width:min(100%, 520px);
    height:min(88vh, 820px);
    overflow:hidden;
    border-radius:20px;
    background:#080808;
    box-shadow:0 20px 80px rgba(0,0,0,.55);
}

.hsu-story-viewer-image{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#050505;
}

.hsu-story-progress{
    position:absolute;
    z-index:4;
    top:10px;
    right:12px;
    left:12px;
    display:flex;
    gap:4px;
}

.hsu-story-progress span{
    height:3px;
    flex:1;
    border-radius:10px;
    background:rgba(255,255,255,.28);
}

.hsu-story-progress span.is-active{
    background:#f47a22;
}

.hsu-story-viewer-top{
    position:absolute;
    z-index:5;
    top:23px;
    right:14px;
    left:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border-radius:14px;
    background:rgba(0,0,0,.42);
    backdrop-filter:blur(8px);
}

.hsu-story-viewer-user{
    display:flex;
    min-width:0;
    align-items:center;
    gap:9px;
}

.hsu-story-viewer-avatar{
    width:36px;
    height:36px;
    flex:0 0 36px;
    border:2px solid #f47a22;
    border-radius:50%;
    object-fit:cover;
}

.hsu-story-viewer-user div{
    min-width:0;
}

.hsu-story-viewer-user strong,
.hsu-story-viewer-user small{
    display:block;
}

.hsu-story-viewer-user strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
}

.hsu-story-viewer-user small{
    margin-top:1px;
    color:#aaa;
    font-size:10px;
}

.hsu-story-viewer-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

.hsu-story-delete-form{
    margin:0;
}

.hsu-story-delete-form button{
    border:0;
    background:transparent;
    color:#ddd;
    cursor:pointer;
    font-size:11px;
    font-weight:700;
}

.hsu-story-close{
    display:flex;
    width:34px;
    height:34px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
    cursor:pointer;
    font-size:25px;
    line-height:1;
}

.hsu-story-nav{
    position:absolute;
    z-index:4;
    top:110px;
    bottom:0;
    width:35%;
    border:0;
    background:transparent;
    color:transparent;
    cursor:pointer;
    font-size:0;
}

.hsu-story-prev{
    left:0;
}

.hsu-story-next{
    right:0;
}

@media(max-width:620px){

    .hsu-stories{
        margin-right:-4px;
        margin-left:-4px;
        padding:14px 12px;
        border-radius:16px;
    }

    .hsu-story-viewer{
        padding:0;
    }

    .hsu-story-viewer-stage{
        width:100%;
        height:100dvh;
        max-height:none;
        border-radius:0;
    }

    .hsu-story-viewer-top{
        top:21px;
    }
}



/* ==========================================================
   HSU STORIES V1.0.1 DELETE FIX
   ========================================================== */

.hsu-story-viewer-actions{
    position:relative;
    z-index:20;
}

.hsu-story-delete-form{
    position:relative;
    z-index:21;
}

.hsu-story-delete-form button{
    position:relative;
    z-index:22;
    min-height:36px;
    padding:7px 9px;
    touch-action:manipulation;
}

.hsu-story-close{
    position:relative;
    z-index:22;
    touch-action:manipulation;
}



/* ==========================================================
   HSU STORIES V1.1 AUTOPLAY
   ========================================================== */

.hsu-story-progress span{
    position:relative;
    overflow:hidden;
}

.hsu-story-progress span.is-complete{
    background:#f47a22;
}

.hsu-story-progress span.is-current{
    background:rgba(255,255,255,.28);
}

.hsu-story-progress span.is-current i{
    position:absolute;
    inset:0;
    display:block;
    width:0;
    border-radius:inherit;
    background:#f47a22;
}

.hsu-story-progress span.is-current i.is-running{
    width:100%;
    transition:
        width 5s linear;
}



/* =========================================================
   HSU MATCHDAY LOUNGE V1
   ========================================================= */

.hsu-lounge-page{
    width:min(100%,1100px);
    margin:0 auto;
    padding:28px 18px 70px;
}

.hsu-lounge-shell{
    display:flex;
    flex-direction:column;
    min-height:70vh;
    border:1px solid rgba(255,255,255,.09);
    border-radius:22px;
    overflow:hidden;
    background:#111;
}

.hsu-lounge-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:22px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.hsu-lounge-kicker{
    display:block;
    margin-bottom:6px;
    color:#f47a22;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.hsu-lounge-head h1{
    margin:0;
    font-size:clamp(1.25rem,4vw,2rem);
    line-height:1.15;
}

.hsu-lounge-head h1 span{
    color:#777;
    font-size:.72em;
    font-weight:500;
}

.hsu-lounge-head p{
    margin:8px 0 0;
    color:#999;
    font-size:.9rem;
}

.hsu-lounge-state{
    display:flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:8px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:#aaa;
    font-size:.78rem;
    font-weight:700;
}

.hsu-lounge-state span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#666;
}

.hsu-lounge-state.is-open{
    color:#fff;
}

.hsu-lounge-state.is-open span{
    background:#36c76c;
    box-shadow:0 0 0 4px rgba(54,199,108,.12);
}

.hsu-lounge-messages{
    flex:1;
    min-height:360px;
    max-height:62vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:20px;
}

.hsu-lounge-empty{
    display:flex;
    min-height:300px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    color:#777;
}

.hsu-lounge-empty strong{
    color:#ddd;
}

.hsu-lounge-empty p{
    margin:5px 0 0;
}

.hsu-lounge-message{
    display:flex;
    align-items:flex-end;
    gap:9px;
    margin:0 0 15px;
}

.hsu-lounge-message.mine{
    justify-content:flex-end;
}

.hsu-lounge-avatar-wrap{
    position:relative;
    width:34px;
    height:34px;
    flex:0 0 34px;
}

.hsu-lounge-avatar{
    display:block;
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
    background:#222;
}

.hsu-lounge-online-dot{
    position:absolute;
    right:-1px;
    bottom:-1px;
    width:10px;
    height:10px;
    border:2px solid #111;
    border-radius:50%;
    background:#36c76c;
}

.hsu-lounge-message-content{
    max-width:min(76%,620px);
}

.hsu-lounge-author{
    display:block;
    margin:0 0 4px 3px;
    color:#aaa;
    font-size:.75rem;
}

.hsu-lounge-bubble{
    padding:10px 12px 7px;
    border-radius:16px 16px 16px 5px;
    background:#252525;
}

.hsu-lounge-message.mine .hsu-lounge-bubble{
    border-radius:16px 16px 5px 16px;
    background:#f47a22;
    color:#fff;
}

.hsu-lounge-bubble p{
    margin:0;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.4;
}

.hsu-lounge-bubble time{
    display:block;
    margin-top:4px;
    text-align:right;
    color:rgba(255,255,255,.55);
    font-size:.65rem;
}

.hsu-lounge-composer{
    display:flex;
    align-items:flex-end;
    gap:10px;
    padding:13px;
    border-top:1px solid rgba(255,255,255,.08);
    background:#151515;
}

.hsu-lounge-composer textarea{
    flex:1;
    min-height:46px;
    max-height:130px;
    resize:none;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:15px;
    outline:none;
    background:#222;
    color:#fff;
    font:inherit;
}

.hsu-lounge-composer textarea:focus{
    border-color:rgba(244,122,34,.7);
}

.hsu-lounge-composer button{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    flex:0 0 46px;
    border:0;
    border-radius:50%;
    background:#f47a22;
    color:#fff;
    font-size:1.05rem;
    cursor:pointer;
}

.hsu-lounge-closed-note{
    padding:18px 20px;
    border-top:1px solid rgba(255,255,255,.08);
    background:#151515;
    text-align:center;
}

.hsu-lounge-closed-note strong{
    color:#ddd;
}

.hsu-lounge-closed-note p{
    margin:5px 0 0;
    color:#888;
    font-size:.86rem;
}

@media (max-width:700px){

    .hsu-lounge-page{
        padding:12px 0 40px;
    }

    .hsu-lounge-shell{
        min-height:calc(100dvh - 120px);
        border-right:0;
        border-left:0;
        border-radius:0;
    }

    .hsu-lounge-head{
        padding:17px 14px;
    }

    .hsu-lounge-state{
        padding:7px 9px;
        font-size:.7rem;
    }

    .hsu-lounge-messages{
        max-height:none;
        padding:16px 12px;
    }

    .hsu-lounge-message-content{
        max-width:82%;
    }

    .hsu-lounge-composer{
        position:sticky;
        bottom:0;
        z-index:10;
        padding:
            10px
            10px
            calc(10px + env(safe-area-inset-bottom));
    }
}


/* =========================================================
   HSU DEEP MEMBER PROFILES V1
   ========================================================= */

.hsu-deep-profile{
    display:grid;
    gap:22px;
    margin-top:26px;
}

.hsu-deep-identity-card,
.hsu-deep-block{
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );
    overflow:hidden;
}

.hsu-deep-identity-card{
    padding:22px;
    position:relative;
}

.hsu-deep-identity-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:#f47a22;
}

.hsu-deep-identity-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.hsu-deep-eyebrow,
.hsu-deep-block-head > div > span{
    display:block;
    margin-bottom:5px;
    color:#f47a22;
    font-size:.69rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.hsu-deep-identity-top h2,
.hsu-deep-block-head h2{
    margin:0;
    color:#fff;
}

.hsu-deep-identity-top h2{
    font-size:1.45rem;
}

.hsu-deep-active-title{
    min-width:145px;
    padding:10px 13px;
    border:1px solid rgba(244,122,34,.28);
    border-radius:13px;
    background:rgba(244,122,34,.08);
    text-align:right;
}

.hsu-deep-active-title span{
    display:block;
    margin-bottom:2px;
    color:#999;
    font-size:.68rem;
    text-transform:uppercase;
}

.hsu-deep-active-title strong{
    color:#f47a22;
    font-size:.84rem;
}

.hsu-deep-progress-main{
    display:grid;
    grid-template-columns:1.3fr .85fr .85fr;
    gap:10px;
}

.hsu-deep-progress-main > div{
    min-height:90px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:14px 16px;
    border-radius:16px;
    background:#181818;
}

.hsu-deep-progress-main span,
.hsu-deep-progress-secondary span{
    color:#888;
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
}

.hsu-deep-progress-main strong{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:1.45rem;
}

.hsu-deep-status-mark strong{
    color:#f47a22;
}

.hsu-deep-progress-secondary{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:10px;
}

.hsu-deep-progress-secondary > div{
    padding:11px 14px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:13px;
}

.hsu-deep-progress-secondary strong{
    display:block;
    margin-top:2px;
    color:#ddd;
}

.hsu-deep-title-description{
    margin:16px 0 0;
    color:#999;
    font-size:.84rem;
    line-height:1.5;
}

.hsu-deep-block{
    padding:22px;
}

.hsu-deep-block-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:17px;
}

.hsu-deep-block-head > strong{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:50%;
    background:rgba(244,122,34,.11);
    color:#f47a22;
    font-size:.8rem;
}

.hsu-trophy-showcase{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.hsu-trophy-card{
    position:relative;
    min-height:210px;
    padding:18px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:17px;
    background:#181818;
}

.hsu-trophy-slot{
    position:absolute;
    top:11px;
    right:12px;
    color:#666;
    font-size:.65rem;
    font-weight:800;
    text-transform:uppercase;
}

.hsu-trophy-icon{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    margin-bottom:18px;
    border-radius:14px;
    background:rgba(244,122,34,.1);
    color:#f47a22;
    font-size:1.2rem;
}

.hsu-trophy-copy h3,
.hsu-achievement-card h3{
    margin:3px 0 8px;
    color:#fff;
    line-height:1.15;
}

.hsu-trophy-copy h3{
    font-size:1rem;
}

.hsu-trophy-copy p,
.hsu-achievement-card > p{
    margin:0;
    color:#999;
    font-size:.78rem;
    line-height:1.45;
}

.hsu-rarity{
    color:#888;
    font-size:.63rem;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.hsu-trophy-card[data-rarity="rare"],
.hsu-achievement-card[data-rarity="rare"]{
    border-color:rgba(255,255,255,.15);
}

.hsu-trophy-card[data-rarity="epic"],
.hsu-achievement-card[data-rarity="epic"]{
    border-color:rgba(244,122,34,.28);
}

.hsu-trophy-card[data-rarity="legendary"],
.hsu-achievement-card[data-rarity="legendary"]{
    border-color:rgba(244,122,34,.52);
    box-shadow:
        inset 0 0 0 1px rgba(244,122,34,.06);
}

.hsu-achievement-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.hsu-achievement-card{
    padding:16px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px;
    background:#181818;
}

.hsu-achievement-card header{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:12px;
}

.hsu-achievement-symbol{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:11px;
    background:rgba(244,122,34,.1);
    color:#f47a22;
}

.hsu-achievement-card h3{
    font-size:.95rem;
}

.hsu-achievement-card footer{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:13px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.055);
    color:#666;
    font-size:.66rem;
    font-weight:700;
    text-transform:uppercase;
}

.hsu-deep-empty{
    padding:30px 20px;
    border:1px dashed rgba(255,255,255,.09);
    border-radius:16px;
    text-align:center;
}

.hsu-deep-empty > div{
    margin-bottom:9px;
    color:#f47a22;
    font-size:1.45rem;
}

.hsu-deep-empty strong{
    display:block;
    color:#ddd;
}

.hsu-deep-empty p{
    max-width:430px;
    margin:5px auto 0;
    color:#777;
    font-size:.8rem;
    line-height:1.45;
}

@media (max-width:760px){

    .hsu-deep-profile{
        gap:15px;
        margin-top:20px;
    }

    .hsu-deep-identity-card,
    .hsu-deep-block{
        padding:17px;
        border-radius:18px;
    }

    .hsu-deep-identity-top{
        align-items:stretch;
        flex-direction:column;
        gap:12px;
        margin-bottom:15px;
    }

    .hsu-deep-active-title{
        min-width:0;
        text-align:left;
    }

    .hsu-deep-progress-main{
        grid-template-columns:1fr 1fr;
    }

    .hsu-deep-status-mark{
        grid-column:1 / -1;
    }

    .hsu-deep-progress-main > div{
        min-height:76px;
        padding:12px;
    }

    .hsu-deep-progress-main strong{
        font-size:1.2rem;
    }

    .hsu-deep-progress-secondary{
        grid-template-columns:1fr 1fr;
    }

    .hsu-deep-progress-secondary > div:last-child{
        grid-column:1 / -1;
    }

    .hsu-trophy-showcase,
    .hsu-achievement-grid{
        grid-template-columns:1fr;
    }

    .hsu-trophy-card{
        min-height:0;
    }
}


/* =========================================================
   HSU SOCIAL IDENTITY V1
   Active titles + equipped trophy identity
   ========================================================= */

.hsu-social-identity{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}

.hsu-social-identity-member{
    margin:-1px 0 11px;
}

.hsu-social-identity-feed{
    margin:0;
}

.hsu-social-title{
    display:inline-flex;
    align-items:center;
    min-width:0;
    color:#f47a22;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.075em;
    text-transform:uppercase;
}

.hsu-social-title::before{
    content:"◆";
    margin-right:5px;
    font-size:7px;
    opacity:.8;
}

.hsu-social-trophy{
    display:inline-flex;
    align-items:center;
    gap:4px;
    max-width:100%;
    padding:4px 7px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:999px;
    color:#aaa;
    background:rgba(255,255,255,.035);
    font-size:9px;
    line-height:1.1;
    font-weight:850;
}

.hsu-social-trophy > span{
    color:#f47a22;
}

.hsu-social-trophy[data-rarity="rare"]{
    border-color:rgba(255,255,255,.2);
    color:#ccc;
}

.hsu-social-trophy[data-rarity="epic"]{
    border-color:rgba(244,122,34,.34);
    color:#e6e6e6;
}

.hsu-social-trophy[data-rarity="legendary"]{
    border-color:rgba(244,122,34,.6);
    background:rgba(244,122,34,.08);
    color:#fff;
}

.hsu-social-trophy-compact{
    overflow:hidden;
    max-width:170px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hsu-social-title-messenger{
    display:flex;
    width:max-content;
    max-width:100%;
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px;
}

.hsu-messenger-conversation-copy
.hsu-social-title-messenger{
    margin-top:3px;
}

.hsu-messenger-chat-person
.hsu-social-title-messenger{
    margin-top:3px;
}

@media (max-width:760px){

    .hsu-social-identity-member{
        margin-bottom:9px;
    }

    .hsu-social-trophy-compact{
        max-width:130px;
    }
}

/* =========================================================
   HSU COMMUNITY CALENDAR V1
   ========================================================= */

.hsu-calendar-page{
    min-height:70vh;
    padding:48px 0 88px;
    background:
        radial-gradient(
            circle at top right,
            rgba(244,111,20,.10),
            transparent 34%
        ),
        #0c0c0d;
    color:#fff;
}

.hsu-calendar-shell{
    max-width:1120px;
}

.hsu-calendar-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:48px;
}

.hsu-calendar-eyebrow,
.hsu-calendar-section-label{
    display:block;
    margin-bottom:8px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.16em;
    color:#f46f14;
}

.hsu-calendar-hero h1{
    margin:0;
    font-size:clamp(42px,7vw,78px);
    line-height:.92;
    letter-spacing:-.045em;
}

.hsu-calendar-hero h1 span{
    color:#f46f14;
}

.hsu-calendar-hero p{
    max-width:600px;
    margin:18px 0 0;
    color:rgba(255,255,255,.68);
    font-size:17px;
    line-height:1.55;
}

.hsu-calendar-matchcenter-link,
.hsu-calendar-footer-cta a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    color:#fff;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
}

.hsu-calendar-matchcenter-link:hover,
.hsu-calendar-footer-cta a:hover{
    border-color:#f46f14;
    color:#f46f14;
}

.hsu-calendar-next{
    margin-bottom:56px;
}

.hsu-calendar-next-card{
    position:relative;
    display:grid;
    grid-template-columns:180px minmax(0,1fr) 120px;
    gap:28px;
    align-items:center;
    overflow:hidden;
    padding:28px;
    border:1px solid rgba(244,111,20,.38);
    border-radius:24px;
    background:
        linear-gradient(
            135deg,
            rgba(244,111,20,.17),
            rgba(255,255,255,.035) 55%
        );
    box-shadow:0 20px 55px rgba(0,0,0,.22);
}

.hsu-calendar-next-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:#f46f14;
}

.hsu-calendar-next-date{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.hsu-calendar-next-date strong{
    color:#f46f14;
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hsu-calendar-next-date span{
    font-size:25px;
    font-weight:850;
}

.hsu-calendar-next-date small{
    color:rgba(255,255,255,.66);
    font-size:14px;
}

.hsu-calendar-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:9px;
}

.hsu-calendar-tags span,
.hsu-calendar-game-head small{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 9px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.72);
    font-size:10px;
    font-weight:850;
    letter-spacing:.08em;
}

.hsu-calendar-tags .is-home,
.hsu-calendar-game-head small.is-home{
    background:rgba(244,111,20,.16);
    color:#ff8b3d;
}

.hsu-calendar-next-main h2{
    margin:0;
    font-size:27px;
}

.hsu-calendar-next-main p{
    margin:6px 0 0;
    color:rgba(255,255,255,.65);
}

.hsu-calendar-next-main p strong{
    color:#fff;
}

.hsu-calendar-next-round{
    text-align:right;
}

.hsu-calendar-next-round span,
.hsu-calendar-round-number span{
    display:block;
    color:rgba(255,255,255,.38);
    font-size:10px;
    font-weight:850;
    letter-spacing:.14em;
}

.hsu-calendar-next-round strong{
    display:block;
    margin-top:2px;
    color:#f46f14;
    font-size:42px;
    line-height:1;
}

.hsu-calendar-season-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:24px;
}

.hsu-calendar-season-head h2{
    margin:0;
    font-size:32px;
}

.hsu-calendar-legend{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:14px;
    color:rgba(255,255,255,.55);
    font-size:12px;
}

.hsu-calendar-legend span{
    display:flex;
    align-items:center;
    gap:6px;
}

.hsu-calendar-legend i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#f46f14;
}

.hsu-calendar-legend i.is-amateurs{
    background:rgba(255,255,255,.55);
}

.hsu-calendar-timeline{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.hsu-calendar-round{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:18px;
    padding:18px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:rgba(255,255,255,.025);
}

.hsu-calendar-round.is-past{
    opacity:.54;
}

.hsu-calendar-round-number{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:150px;
    border-right:1px solid rgba(255,255,255,.08);
}

.hsu-calendar-round-number strong{
    margin-top:4px;
    color:#f46f14;
    font-size:34px;
    line-height:1;
}

.hsu-calendar-games{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.hsu-calendar-game{
    position:relative;
    overflow:hidden;
    padding:18px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:17px;
    background:#151516;
}

.hsu-calendar-game::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    background:#f46f14;
}

.hsu-calendar-game.is-amateurs::before{
    background:rgba(255,255,255,.5);
}

.hsu-calendar-game.is-past{
    filter:saturate(.7);
}

.hsu-calendar-game-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}

.hsu-calendar-game-head > div{
    display:flex;
    flex-direction:column;
}

.hsu-calendar-game-head > div span{
    color:rgba(255,255,255,.42);
    font-size:10px;
    font-weight:850;
    letter-spacing:.1em;
}

.hsu-calendar-game-head > div strong{
    margin-top:2px;
    font-size:16px;
}

.hsu-calendar-game-date{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-top:22px;
}

.hsu-calendar-game-date > div{
    display:flex;
    flex-direction:column;
}

.hsu-calendar-game-date > div strong{
    color:#f46f14;
    font-size:12px;
}

.hsu-calendar-game.is-amateurs
.hsu-calendar-game-date > div strong{
    color:rgba(255,255,255,.72);
}

.hsu-calendar-game-date > div span{
    margin-top:2px;
    font-size:19px;
    font-weight:800;
}

.hsu-calendar-game-date time{
    font-size:23px;
    font-weight:900;
    line-height:1;
}

.hsu-calendar-game-date time span{
    margin-left:2px;
    color:rgba(255,255,255,.35);
    font-size:9px;
    letter-spacing:.08em;
}

.hsu-calendar-opponent{
    display:flex;
    flex-direction:column;
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.07);
}

.hsu-calendar-opponent span{
    color:rgba(255,255,255,.35);
    font-size:9px;
    font-weight:850;
    letter-spacing:.12em;
}

.hsu-calendar-opponent strong{
    margin-top:3px;
    font-size:15px;
}

.hsu-calendar-footer-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:34px;
    padding:22px 24px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:rgba(255,255,255,.025);
}

.hsu-calendar-footer-cta p{
    margin:0;
    color:rgba(255,255,255,.58);
    font-size:14px;
    line-height:1.5;
}

@media (max-width:760px){

    .hsu-calendar-page{
        padding:30px 0 64px;
    }

    .hsu-calendar-hero{
        display:block;
        margin-bottom:36px;
    }

    .hsu-calendar-hero p{
        font-size:15px;
    }

    .hsu-calendar-matchcenter-link{
        margin-top:20px;
    }

    .hsu-calendar-next-card{
        grid-template-columns:1fr auto;
        gap:18px;
        padding:22px;
    }

    .hsu-calendar-next-date{
        grid-column:1 / -1;
        padding-bottom:16px;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .hsu-calendar-next-main h2{
        font-size:22px;
    }

    .hsu-calendar-next-round strong{
        font-size:34px;
    }

    .hsu-calendar-season-head{
        display:block;
    }

    .hsu-calendar-legend{
        justify-content:flex-start;
        margin-top:14px;
    }

    .hsu-calendar-round{
        display:block;
        padding:14px;
    }

    .hsu-calendar-round-number{
        flex-direction:row;
        justify-content:flex-start;
        gap:7px;
        min-height:0;
        margin-bottom:12px;
        padding:0 0 12px;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .hsu-calendar-round-number strong{
        margin:0;
        font-size:20px;
    }

    .hsu-calendar-games{
        grid-template-columns:1fr;
    }

    .hsu-calendar-game{
        padding:17px;
    }

    .hsu-calendar-footer-cta{
        display:block;
    }

    .hsu-calendar-footer-cta a{
        margin-top:16px;
    }
}

/* =========================================================
   HSU CENTRAL INBOX V1
   ========================================================= */

.hsu-inbox-page{
    padding:42px 0 72px;
}

.hsu-inbox-shell{
    max-width:920px;
}

.hsu-inbox-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px;
}

.hsu-inbox-eyebrow{
    display:block;
    margin-bottom:8px;
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--orange,#f58220);
}

.hsu-inbox-hero h1{
    margin:0;
    font-size:clamp(2rem,6vw,4rem);
    line-height:.98;
}

.hsu-inbox-hero p{
    max-width:600px;
    margin:12px 0 0;
    opacity:.72;
}

.hsu-inbox-read-all{
    flex:0 0 auto;
}

.hsu-inbox-read-all button{
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    padding:10px 15px;
    background:rgba(255,255,255,.05);
    color:inherit;
    font:inherit;
    font-size:.8rem;
    font-weight:800;
    cursor:pointer;
}

.hsu-inbox-summary{
    display:flex;
    align-items:baseline;
    gap:9px;
    margin-bottom:18px;
    padding:13px 16px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:rgba(255,255,255,.025);
}

.hsu-inbox-summary strong{
    color:var(--orange,#f58220);
    font-size:1.2rem;
}

.hsu-inbox-summary span{
    font-size:.84rem;
    opacity:.66;
}

.hsu-inbox-list{
    display:grid;
    gap:9px;
}

.hsu-inbox-item{
    margin:0;
}

.hsu-inbox-item-button{
    width:100%;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center;
    gap:13px;
    padding:15px 16px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.025);
    color:inherit;
    text-align:left;
    font:inherit;
    cursor:pointer;
}

.hsu-inbox-item.is-unread
.hsu-inbox-item-button{
    border-color:rgba(245,130,32,.38);
    background:rgba(245,130,32,.075);
}

.hsu-inbox-item-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(255,255,255,.07);
    font-size:1rem;
    font-weight:900;
}

.hsu-inbox-item.is-unread
.hsu-inbox-item-icon{
    background:rgba(245,130,32,.15);
    color:var(--orange,#f58220);
}

.hsu-inbox-item-copy{
    min-width:0;
    display:grid;
    gap:4px;
}

.hsu-inbox-item-topline{
    display:flex;
    align-items:center;
    gap:8px;
}

.hsu-inbox-item-topline strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hsu-inbox-unread-dot{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:var(--orange,#f58220);
}

.hsu-inbox-item-body{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.88rem;
    opacity:.76;
}

.hsu-inbox-item-copy small{
    font-size:.72rem;
    opacity:.48;
}

.hsu-inbox-item-arrow{
    font-size:1.65rem;
    opacity:.35;
}

.hsu-inbox-empty{
    padding:58px 24px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:rgba(255,255,255,.025);
    text-align:center;
}

.hsu-inbox-empty > span{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    margin:0 auto 16px;
    border-radius:50%;
    background:rgba(245,130,32,.12);
    color:var(--orange,#f58220);
    font-size:1.3rem;
    font-weight:900;
}

.hsu-inbox-empty h2{
    margin:0;
}

.hsu-inbox-empty p{
    margin:8px 0 0;
    opacity:.62;
}

.hsu-header-inbox-link.has-unread
.hsu-header-quick-icon{
    color:var(--orange,#f58220);
}

@media (max-width:700px){

    .hsu-inbox-page{
        padding:28px 0 56px;
    }

    .hsu-inbox-hero{
        display:grid;
        align-items:start;
    }

    .hsu-inbox-read-all{
        width:100%;
    }

    .hsu-inbox-read-all button{
        width:100%;
    }

    .hsu-inbox-item-button{
        grid-template-columns:40px minmax(0,1fr) auto;
        gap:11px;
        padding:13px;
        border-radius:16px;
    }

    .hsu-inbox-item-icon{
        width:40px;
        height:40px;
        border-radius:12px;
    }

    .hsu-inbox-item-body{
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
}

/* =========================================================
   HSU STARTSEITE V2 · COMMUNITY HUB
========================================================= */

.hsu-home-community-v2{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 14% 12%,
            rgba(243,106,10,.10),
            transparent 34%
        ),
        #080808;
}

.hsu-home-community-v2::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.018),
            transparent 35%
        );
}

.hsu-home-community-v2-head{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:42px;
}

.hsu-home-community-v2-head h2{
    margin:8px 0 0;
}

.hsu-home-community-v2-head p{
    max-width:620px;
    margin:18px 0 0;
    color:#9d9992;
    line-height:1.7;
}

.hsu-home-community-v2-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
    gap:18px;
}

.hsu-home-community-v2-main{
    position:relative;
    min-height:430px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:38px;
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(243,106,10,.24);
    background:
        radial-gradient(
            circle at 75% 28%,
            rgba(243,106,10,.20),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #17120f 0%,
            #0b0b0b 52%,
            #070707 100%
        );
    transition:
        transform .25s ease,
        border-color .25s ease;
}

.hsu-home-community-v2-main:hover{
    transform:translateY(-3px);
    border-color:rgba(243,106,10,.58);
}

.hsu-home-community-v2-main::after{
    content:"HSU";
    position:absolute;
    right:-18px;
    bottom:-48px;
    font-size:clamp(8rem,17vw,15rem);
    line-height:.8;
    font-weight:900;
    letter-spacing:-.08em;
    color:rgba(255,255,255,.025);
    pointer-events:none;
}

.hsu-home-community-v2-glow{
    position:absolute;
    width:260px;
    height:260px;
    right:-70px;
    top:-90px;
    border-radius:50%;
    background:rgba(243,106,10,.13);
    filter:blur(40px);
    pointer-events:none;
}

.hsu-home-community-v2-label{
    position:relative;
    z-index:1;
    width:max-content;
    padding:8px 11px;
    border:1px solid rgba(243,106,10,.38);
    color:#f36a0a;
    font-size:.64rem;
    font-weight:850;
    letter-spacing:.16em;
}

.hsu-home-community-v2-main-copy{
    position:relative;
    z-index:1;
    max-width:500px;
}

.hsu-home-community-v2-main-copy small,
.hsu-home-community-v2-card small{
    display:block;
    color:#f36a0a;
    font-size:.62rem;
    font-weight:850;
    letter-spacing:.16em;
}

.hsu-home-community-v2-main-copy h3{
    margin:9px 0 14px;
    font-size:clamp(2.5rem,5vw,5rem);
    line-height:.91;
    letter-spacing:-.055em;
}

.hsu-home-community-v2-main-copy p{
    max-width:430px;
    margin:0;
    color:#aaa59d;
    font-size:.98rem;
    line-height:1.65;
}

.hsu-home-community-v2-arrow{
    position:absolute;
    right:32px;
    bottom:28px;
    z-index:2;
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:50%;
    background:#f36a0a;
    color:#080808;
    font-size:1.35rem;
    font-weight:900;
}

.hsu-home-community-v2-links{
    display:grid;
    grid-template-rows:repeat(3,1fr);
    gap:18px;
}

.hsu-home-community-v2-card{
    min-height:0;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    padding:24px 25px;
    color:#f5f1e9;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.075);
    background:rgba(255,255,255,.025);
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.hsu-home-community-v2-card:hover{
    transform:translateX(3px);
    border-color:rgba(243,106,10,.36);
    background:rgba(243,106,10,.045);
}

.hsu-home-community-v2-icon{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border:1px solid rgba(243,106,10,.28);
    color:#f36a0a;
    font-size:1.25rem;
}

.hsu-home-community-v2-card h3{
    margin:4px 0 3px;
    font-size:1.25rem;
}

.hsu-home-community-v2-card p{
    margin:0;
    color:#85817b;
    font-size:.84rem;
}

.hsu-home-community-v2-card b{
    color:#f36a0a;
    font-size:1.15rem;
}

@media (max-width:900px){

    .hsu-home-community-v2-grid{
        grid-template-columns:1fr;
    }

    .hsu-home-community-v2-main{
        min-height:370px;
    }

    .hsu-home-community-v2-links{
        grid-template-rows:none;
    }
}

@media (max-width:620px){

    .hsu-home-community-v2-head{
        display:block;
        margin-bottom:28px;
    }

    .hsu-home-community-v2-head .text-link{
        display:inline-flex;
        margin-top:18px;
    }

    .hsu-home-community-v2-head p{
        font-size:.92rem;
    }

    .hsu-home-community-v2-main{
        min-height:330px;
        padding:27px 23px;
    }

    .hsu-home-community-v2-main-copy{
        padding-right:28px;
    }

    .hsu-home-community-v2-main-copy h3{
        font-size:2.7rem;
    }

    .hsu-home-community-v2-main-copy p{
        max-width:280px;
        font-size:.88rem;
    }

    .hsu-home-community-v2-arrow{
        right:20px;
        bottom:20px;
        width:44px;
        height:44px;
    }

    .hsu-home-community-v2-card{
        grid-template-columns:42px minmax(0,1fr) auto;
        gap:14px;
        padding:20px 18px;
    }

    .hsu-home-community-v2-icon{
        width:40px;
        height:40px;
    }

    .hsu-home-community-v2-card h3{
        font-size:1.08rem;
    }

    .hsu-home-community-v2-card p{
        font-size:.78rem;
    }
}

/* =========================================================
   HSU STARTSEITE V2.2 · PREMIUM SIMPLIFICATION
========================================================= */

.hsu-home-community-compact{
    position:relative;
    padding:32px 0;
    background:#080808;
}

.hsu-home-community-compact-inner{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    padding:34px 38px;
    border:1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(
            circle at 82% 50%,
            rgba(243,106,10,.12),
            transparent 30%
        ),
        #101010;
}

.hsu-home-community-compact-inner::after{
    content:"HSU";
    position:absolute;
    right:19%;
    top:50%;
    transform:translateY(-50%);
    color:rgba(255,255,255,.025);
    font-size:7rem;
    font-weight:900;
    line-height:1;
    letter-spacing:-.07em;
    pointer-events:none;
}

.hsu-home-community-compact-copy{
    position:relative;
    z-index:1;
}

.hsu-home-community-compact-copy h2{
    margin:7px 0 8px;
    font-size:clamp(1.8rem,3.3vw,3rem);
    line-height:1;
    letter-spacing:-.045em;
}

.hsu-home-community-compact-copy p{
    margin:0;
    color:#8f8b84;
    font-size:.9rem;
}

.hsu-home-community-compact-action{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:22px;
    flex-shrink:0;
}

.hsu-home-community-compact-user{
    color:#8f8b84;
    font-size:.78rem;
}

.hsu-home-community-compact-user strong{
    color:#f4f0e8;
    font-weight:800;
}

.hsu-home-partner-cta{
    padding:0 0 28px;
    background:#080808;
}

.hsu-home-partner-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:25px 30px;
    color:#f4f0e8;
    text-decoration:none;
    border:1px solid rgba(243,106,10,.23);
    background:
        linear-gradient(
            105deg,
            rgba(243,106,10,.10),
            rgba(255,255,255,.018)
        );
    transition:
        border-color .2s ease,
        transform .2s ease;
}

.hsu-home-partner-cta-inner:hover{
    border-color:rgba(243,106,10,.55);
    transform:translateY(-2px);
}

.hsu-home-partner-cta-inner > div{
    display:flex;
    align-items:center;
    gap:22px;
}

.hsu-home-partner-cta-inner span{
    color:#f36a0a;
    font-size:.61rem;
    font-weight:900;
    letter-spacing:.15em;
    white-space:nowrap;
}

.hsu-home-partner-cta-inner strong{
    max-width:470px;
    font-size:1.05rem;
    line-height:1.3;
}

.hsu-home-partner-cta-inner > b{
    color:#f36a0a;
    font-size:.78rem;
    white-space:nowrap;
}

@media (max-width:760px){

    .hsu-home-community-compact{
        padding:22px 0;
    }

    .hsu-home-community-compact-inner{
        display:block;
        padding:27px 23px;
    }

    .hsu-home-community-compact-inner::after{
        right:-20px;
        top:26px;
        transform:none;
        font-size:6rem;
    }

    .hsu-home-community-compact-copy h2{
        max-width:330px;
        font-size:2rem;
    }

    .hsu-home-community-compact-action{
        justify-content:space-between;
        margin-top:24px;
        gap:15px;
    }

    .hsu-home-community-compact-user{
        max-width:110px;
        line-height:1.35;
    }

    .hsu-home-community-compact-action .button{
        flex-shrink:0;
    }

    .hsu-home-partner-cta{
        padding-bottom:20px;
    }

    .hsu-home-partner-cta-inner{
        display:block;
        padding:22px 21px;
    }

    .hsu-home-partner-cta-inner > div{
        display:block;
    }

    .hsu-home-partner-cta-inner strong{
        display:block;
        margin-top:7px;
        font-size:1rem;
    }

    .hsu-home-partner-cta-inner > b{
        display:block;
        margin-top:17px;
    }
}

@media (max-width:390px){

    .hsu-home-community-compact-action{
        display:block;
    }

    .hsu-home-community-compact-user{
        display:block;
        max-width:none;
        margin-bottom:14px;
    }
}

/* =========================================================
   HSU FANZONE V3 · PERSONAL COMMUNITY DASHBOARD
   ========================================================= */

.hsu-fanzone-v3{
    position:relative;
    overflow:hidden;
    padding:76px 0 54px;
    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(244,112,24,.16),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #090909 0%,
            #111 58%,
            #171717 100%
        );
    color:#fff;
}

.hsu-fanzone-v3-glow{
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    top:-190px;
    border-radius:50%;
    background:rgba(244,112,24,.12);
    filter:blur(80px);
    pointer-events:none;
}

.hsu-fanzone-v3 .shell{
    position:relative;
    z-index:1;
}

.hsu-fanzone-v3-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:32px;
}

.hsu-fanzone-v3-intro{
    max-width:760px;
}

.hsu-fanzone-v3-kicker,
.hsu-fanzone-v3-section-head > div > span{
    display:block;
    margin-bottom:12px;
    color:#f47018;
    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.18em;
}

.hsu-fanzone-v3 h1{
    margin:0;
    max-width:850px;
    font-size:clamp(42px,6vw,78px);
    line-height:.94;
    letter-spacing:-.055em;
}

.hsu-fanzone-v3 h1 span{
    color:#f47018;
}

.hsu-fanzone-v3-intro > p{
    max-width:620px;
    margin:22px 0 0;
    color:rgba(255,255,255,.68);
    font-size:17px;
    line-height:1.6;
}

.hsu-fanzone-v3-profile-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-width:190px;
    padding:15px 18px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    color:#fff;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.hsu-fanzone-v3-profile-link span{
    color:#f47018;
}

.hsu-fanzone-v3-stats{
    display:grid;
    grid-template-columns:1.35fr repeat(3,1fr);
    gap:12px;
    margin-bottom:48px;
}

.hsu-fanzone-v3-stat{
    min-width:0;
    padding:22px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:rgba(255,255,255,.045);
    color:#fff;
    text-decoration:none;
    box-shadow:0 14px 36px rgba(0,0,0,.18);
}

.hsu-fanzone-v3-stat-main{
    border-color:rgba(244,112,24,.34);
    background:
        linear-gradient(
            135deg,
            rgba(244,112,24,.17),
            rgba(255,255,255,.045)
        );
}

.hsu-fanzone-v3-stat > span{
    display:block;
    margin-bottom:12px;
    color:rgba(255,255,255,.52);
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.15em;
}

.hsu-fanzone-v3-stat strong{
    display:block;
    overflow:hidden;
    margin-bottom:8px;
    color:#fff;
    font-size:clamp(24px,3vw,38px);
    line-height:1;
    font-weight:950;
    letter-spacing:-.035em;
    text-overflow:ellipsis;
}

.hsu-fanzone-v3-stat-main strong{
    color:#f47018;
}

.hsu-fanzone-v3-stat small{
    color:rgba(255,255,255,.48);
    font-size:11px;
}

.hsu-fanzone-v3-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:20px;
}

.hsu-fanzone-v3-section-head h2{
    margin:0;
    font-size:clamp(28px,4vw,46px);
    line-height:1;
    letter-spacing:-.045em;
}

.hsu-fanzone-v3-section-head h2 strong{
    color:#f47018;
}

.hsu-fanzone-v3-unread{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 14px;
    border-radius:999px;
    background:#f47018;
    color:#111;
    font-size:12px;
    font-weight:900;
    text-decoration:none;
}

.hsu-fanzone-v3-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.hsu-fanzone-v3-card{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    min-height:92px;
    padding:17px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:17px;
    background:rgba(255,255,255,.045);
    color:#fff;
    text-decoration:none;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.hsu-fanzone-v3-card-primary{
    border-color:rgba(244,112,24,.36);
    background:rgba(244,112,24,.12);
}

.hsu-fanzone-v3-card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:13px;
    background:rgba(255,255,255,.08);
    color:#f47018;
    font-size:12px;
    font-weight:950;
    letter-spacing:-.03em;
}

.hsu-fanzone-v3-card-primary
.hsu-fanzone-v3-card-icon{
    background:#f47018;
    color:#111;
}

.hsu-fanzone-v3-card div{
    min-width:0;
}

.hsu-fanzone-v3-card strong{
    display:block;
    margin-bottom:4px;
    font-size:15px;
}

.hsu-fanzone-v3-card small{
    display:block;
    overflow:hidden;
    color:rgba(255,255,255,.50);
    font-size:11px;
    line-height:1.35;
    text-overflow:ellipsis;
}

.hsu-fanzone-v3-card > b{
    color:#f47018;
    font-size:17px;
}

.hsu-fanzone-v3-matchday{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    margin-top:18px;
    padding:24px 26px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:19px;
    background:#fff;
    color:#111;
}

.hsu-fanzone-v3-matchday > div:first-child > span{
    display:block;
    margin-bottom:7px;
    color:#f47018;
    font-size:10px;
    font-weight:950;
    letter-spacing:.16em;
}

.hsu-fanzone-v3-matchday strong{
    display:block;
    font-size:20px;
    line-height:1.15;
}

.hsu-fanzone-v3-matchday p{
    margin:6px 0 0;
    color:#666;
    font-size:12px;
}

.hsu-fanzone-v3-matchday-actions{
    display:flex;
    flex-shrink:0;
    gap:8px;
}

.hsu-fanzone-v3-matchday
.button-ghost{
    border-color:#ddd;
    color:#111;
}

.hsu-fanzone-v3-guest{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
    align-items:center;
    gap:54px;
}

.hsu-fanzone-v3-guest > div:first-child > p{
    max-width:620px;
    margin:22px 0 0;
    color:rgba(255,255,255,.68);
    font-size:17px;
    line-height:1.6;
}

.hsu-fanzone-v3-guest-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}

.hsu-fanzone-v3-guest-card{
    padding:30px;
    border:1px solid rgba(244,112,24,.30);
    border-radius:22px;
    background:
        linear-gradient(
            145deg,
            rgba(244,112,24,.14),
            rgba(255,255,255,.04)
        );
    box-shadow:0 26px 70px rgba(0,0,0,.28);
}

.hsu-fanzone-v3-guest-card > span{
    color:#f47018;
    font-size:10px;
    font-weight:950;
    letter-spacing:.16em;
}

.hsu-fanzone-v3-guest-card > strong{
    display:block;
    margin-top:20px;
    font-size:32px;
    line-height:1.03;
    letter-spacing:-.045em;
}

.hsu-fanzone-v3-guest-card > p{
    margin:18px 0 26px;
    color:rgba(255,255,255,.58);
    font-size:13px;
    line-height:1.55;
}

.hsu-fanzone-v3-guest-card > div{
    display:flex;
    justify-content:space-between;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.10);
    color:rgba(255,255,255,.42);
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

@media (hover:hover){

    .hsu-fanzone-v3-profile-link:hover,
    .hsu-fanzone-v3-card:hover,
    .hsu-fanzone-v3-stat:hover{
        transform:translateY(-2px);
        border-color:rgba(244,112,24,.48);
    }

    .hsu-fanzone-v3-card:hover{
        background:rgba(255,255,255,.075);
    }

    .hsu-fanzone-v3-card-primary:hover{
        background:rgba(244,112,24,.17);
    }
}

.hsu-fanzone-v3 a:focus-visible{
    outline:3px solid rgba(244,112,24,.72);
    outline-offset:3px;
}

@media (max-width:900px){

    .hsu-fanzone-v3-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hsu-fanzone-v3-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hsu-fanzone-v3-guest{
        grid-template-columns:1fr;
        gap:32px;
    }
}

@media (max-width:640px){

    .hsu-fanzone-v3{
        padding:42px 0 34px;
    }

    .hsu-fanzone-v3-head{
        display:block;
        margin-bottom:24px;
    }

    .hsu-fanzone-v3 h1{
        font-size:clamp(38px,12vw,58px);
    }

    .hsu-fanzone-v3-intro > p,
    .hsu-fanzone-v3-guest > div:first-child > p{
        margin-top:16px;
        font-size:14px;
    }

    .hsu-fanzone-v3-profile-link{
        width:100%;
        margin-top:22px;
    }

    .hsu-fanzone-v3-stats{
        gap:8px;
        margin-bottom:34px;
    }

    .hsu-fanzone-v3-stat{
        padding:17px 15px;
        border-radius:15px;
    }

    .hsu-fanzone-v3-stat strong{
        font-size:25px;
    }

    .hsu-fanzone-v3-stat small{
        font-size:10px;
    }

    .hsu-fanzone-v3-section-head{
        display:block;
    }

    .hsu-fanzone-v3-unread{
        margin-top:14px;
    }

    .hsu-fanzone-v3-grid{
        grid-template-columns:1fr;
        gap:8px;
    }

    .hsu-fanzone-v3-card{
        min-height:78px;
        padding:14px;
        border-radius:15px;
    }

    .hsu-fanzone-v3-card-icon{
        width:44px;
        height:44px;
    }

    .hsu-fanzone-v3-matchday{
        display:block;
        margin-top:12px;
        padding:20px;
    }

    .hsu-fanzone-v3-matchday-actions{
        margin-top:18px;
    }

    .hsu-fanzone-v3-matchday-actions .button{
        flex:1;
        min-width:0;
    }

    .hsu-fanzone-v3-guest-card{
        padding:23px;
    }
}

@media (max-width:380px){

    .hsu-fanzone-v3-stats{
        grid-template-columns:1fr;
    }

    .hsu-fanzone-v3-matchday-actions{
        display:grid;
        grid-template-columns:1fr;
    }
}



/* ==========================================================
   HSU VEREIN V2
   Isolated page styles
   ========================================================== */

.hsu-verein-v2{
    --verein-orange:#f47b20;
    --verein-black:#090909;
    --verein-dark:#111;
    --verein-line:rgba(255,255,255,.12);
    overflow:hidden;
    background:#fff;
}

.hsu-verein-v2 *,
.hsu-verein-v2 *::before,
.hsu-verein-v2 *::after{
    box-sizing:border-box;
}

.hsu-verein-v2-eyebrow{
    display:block;
    margin-bottom:18px;
    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--verein-orange);
}

.hsu-verein-v2-hero{
    position:relative;
    overflow:hidden;
    background:var(--verein-black);
    color:#fff;
}

.hsu-verein-v2-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            115deg,
            rgba(244,123,32,.09),
            transparent 42%
        );
    pointer-events:none;
}

.hsu-verein-v2-hero-glow{
    position:absolute;
    width:520px;
    height:520px;
    right:-180px;
    top:-230px;
    border-radius:50%;
    background:rgba(244,123,32,.13);
    filter:blur(100px);
    pointer-events:none;
}

.hsu-verein-v2-hero-inner{
    position:relative;
    z-index:1;
    min-height:600px;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
    gap:80px;
    align-items:center;
    padding-top:100px;
    padding-bottom:100px;
}

.hsu-verein-v2-hero-copy{
    max-width:780px;
}

.hsu-verein-v2-hero h1{
    max-width:850px;
    margin:0;
    font-size:clamp(48px,7vw,96px);
    line-height:.94;
    letter-spacing:-.055em;
    font-weight:950;
    color:#fff;
}

.hsu-verein-v2-hero h1 span{
    color:var(--verein-orange);
}

.hsu-verein-v2-hero-copy > p{
    max-width:620px;
    margin:30px 0 0;
    font-size:clamp(18px,2vw,23px);
    line-height:1.55;
    color:rgba(255,255,255,.72);
}

.hsu-verein-v2-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    align-items:center;
    margin-top:38px;
}

.hsu-verein-v2-text-link{
    display:inline-flex;
    gap:12px;
    align-items:center;
    color:#fff;
    text-decoration:none;
    font-weight:850;
}

.hsu-verein-v2-text-link span{
    color:var(--verein-orange);
    transition:transform .2s ease;
}

.hsu-verein-v2-text-link:hover span{
    transform:translateX(5px);
}

.hsu-verein-v2-hero-mark{
    justify-self:end;
    width:min(100%,340px);
    aspect-ratio:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:42px;
    border:1px solid rgba(255,255,255,.13);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.018)
        );
    position:relative;
}

.hsu-verein-v2-hero-mark::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:72px;
    height:5px;
    background:var(--verein-orange);
}

.hsu-verein-v2-hero-mark > span{
    font-size:clamp(72px,9vw,126px);
    line-height:.8;
    font-weight:950;
    letter-spacing:-.08em;
    color:#fff;
}

.hsu-verein-v2-hero-mark small{
    margin-top:30px;
    font-size:13px;
    line-height:1.35;
    letter-spacing:.18em;
    font-weight:900;
    color:var(--verein-orange);
}

.hsu-verein-v2-story{
    padding:120px 0;
    background:#fff;
}

.hsu-verein-v2-story-grid{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:100px;
    align-items:start;
}

.hsu-verein-v2-story h2,
.hsu-verein-v2-section-head h2,
.hsu-verein-v2-home h2,
.hsu-verein-v2-people h2{
    margin:0;
    font-size:clamp(40px,5vw,70px);
    line-height:.98;
    letter-spacing:-.045em;
    font-weight:950;
    color:#111;
}

.hsu-verein-v2-story h2 span,
.hsu-verein-v2-section-head h2 span,
.hsu-verein-v2-home h2 span,
.hsu-verein-v2-people h2 span{
    color:var(--verein-orange);
}

.hsu-verein-v2-story-copy{
    max-width:720px;
}

.hsu-verein-v2-story-copy p{
    margin:0 0 24px;
    font-size:18px;
    line-height:1.72;
    color:#555;
}

.hsu-verein-v2-story-copy
.hsu-verein-v2-story-lead{
    margin-bottom:26px;
    font-size:clamp(23px,2.5vw,31px);
    line-height:1.35;
    letter-spacing:-.02em;
    font-weight:850;
    color:#111;
}

.hsu-verein-v2-facts{
    background:var(--verein-orange);
}

.hsu-verein-v2-facts-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.hsu-verein-v2-fact{
    min-height:190px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px;
    border-right:1px solid rgba(0,0,0,.15);
}

.hsu-verein-v2-fact:last-child{
    border-right:0;
}

.hsu-verein-v2-fact strong{
    display:block;
    font-size:clamp(32px,4vw,52px);
    line-height:1;
    letter-spacing:-.045em;
    font-weight:950;
    color:#090909;
}

.hsu-verein-v2-fact span{
    margin-top:10px;
    font-size:13px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(0,0,0,.68);
}

.hsu-verein-v2-teams{
    padding:120px 0;
    background:#f4f4f2;
}

.hsu-verein-v2-section-head{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
    gap:70px;
    align-items:end;
    margin-bottom:56px;
}

.hsu-verein-v2-section-head > p{
    max-width:520px;
    justify-self:end;
    margin:0;
    font-size:18px;
    line-height:1.65;
    color:#5d5d5d;
}

.hsu-verein-v2-team-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
}

.hsu-verein-v2-team-card{
    position:relative;
    min-height:400px;
    display:flex;
    flex-direction:column;
    padding:34px;
    overflow:hidden;
    background:#0c0c0c;
    color:#fff;
    text-decoration:none;
    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.hsu-verein-v2-team-card::after{
    content:"";
    position:absolute;
    right:-80px;
    bottom:-120px;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(244,123,32,.11);
    filter:blur(55px);
    pointer-events:none;
}

.hsu-verein-v2-team-card:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 50px rgba(0,0,0,.16);
}

.hsu-verein-v2-team-top{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:start;
    padding-bottom:28px;
    border-bottom:1px solid var(--verein-line);
}

.hsu-verein-v2-team-top span{
    font-size:12px;
    font-weight:900;
    letter-spacing:.15em;
    color:var(--verein-orange);
}

.hsu-verein-v2-team-top strong{
    font-size:14px;
    color:rgba(255,255,255,.35);
}

.hsu-verein-v2-team-main{
    position:relative;
    z-index:1;
    flex:1;
    display:flex;
    gap:28px;
    align-items:center;
    padding:44px 0;
}

.hsu-verein-v2-team-main img{
    width:100px;
    height:100px;
    object-fit:contain;
    flex:0 0 auto;
}

.hsu-verein-v2-team-main small{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    color:rgba(255,255,255,.45);
}

.hsu-verein-v2-team-main h3{
    margin:0;
    font-size:clamp(32px,4vw,52px);
    line-height:1;
    letter-spacing:-.04em;
    color:#fff;
}

.hsu-verein-v2-team-main p{
    margin:14px 0 0;
    color:rgba(255,255,255,.62);
}

.hsu-verein-v2-team-link{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:22px;
    border-top:1px solid var(--verein-line);
    font-size:14px;
    font-weight:900;
    color:#fff;
}

.hsu-verein-v2-team-link span{
    font-size:22px;
    color:var(--verein-orange);
    transition:transform .2s ease;
}

.hsu-verein-v2-team-card:hover
.hsu-verein-v2-team-link span{
    transform:translateX(5px);
}

.hsu-verein-v2-home{
    position:relative;
    min-height:640px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#090909;
    color:#fff;
}

.hsu-verein-v2-home-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.93) 0%,
            rgba(0,0,0,.78) 42%,
            rgba(0,0,0,.38) 72%,
            rgba(0,0,0,.58) 100%
        ),
        url('/assets/img/haseneck-home-bg-v1.png')
        center / cover no-repeat;
    transform:scale(1.01);
}

.hsu-verein-v2-home-inner{
    position:relative;
    z-index:1;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:80px;
    align-items:end;
    padding-top:110px;
    padding-bottom:110px;
}

.hsu-verein-v2-home-copy{
    max-width:680px;
}

.hsu-verein-v2-home h2{
    color:#fff;
}

.hsu-verein-v2-home-copy p{
    max-width:570px;
    margin:28px 0 34px;
    font-size:19px;
    line-height:1.65;
    color:rgba(255,255,255,.75);
}

.hsu-verein-v2-home-badge{
    padding:30px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(0,0,0,.52);
    backdrop-filter:blur(8px);
}

.hsu-verein-v2-home-badge small{
    display:block;
    margin-bottom:18px;
    font-size:10px;
    letter-spacing:.16em;
    font-weight:900;
    color:var(--verein-orange);
}

.hsu-verein-v2-home-badge strong{
    display:block;
    font-size:30px;
    line-height:1.1;
    letter-spacing:-.03em;
    color:#fff;
}

.hsu-verein-v2-home-badge span{
    display:block;
    margin-top:24px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.15);
    font-size:12px;
    font-weight:850;
    color:rgba(255,255,255,.65);
}

.hsu-verein-v2-people{
    padding:110px 0;
    background:#fff;
}

.hsu-verein-v2-people-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
    gap:90px;
    align-items:center;
}

.hsu-verein-v2-people-copy{
    max-width:540px;
    justify-self:end;
}

.hsu-verein-v2-people-copy p{
    margin:0 0 30px;
    font-size:18px;
    line-height:1.7;
    color:#5b5b5b;
}


@media (max-width:900px){

    .hsu-verein-v2-hero-inner{
        min-height:auto;
        grid-template-columns:1fr;
        gap:54px;
        padding-top:78px;
        padding-bottom:78px;
    }

    .hsu-verein-v2-hero-mark{
        justify-self:start;
        width:260px;
    }

    .hsu-verein-v2-story-grid,
    .hsu-verein-v2-section-head,
    .hsu-verein-v2-home-inner,
    .hsu-verein-v2-people-inner{
        grid-template-columns:1fr;
        gap:44px;
    }

    .hsu-verein-v2-section-head > p,
    .hsu-verein-v2-people-copy{
        justify-self:start;
    }

    .hsu-verein-v2-facts-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .hsu-verein-v2-fact{
        border-bottom:1px solid rgba(0,0,0,.15);
    }

    .hsu-verein-v2-fact:nth-child(2){
        border-right:0;
    }

    .hsu-verein-v2-fact:nth-child(3),
    .hsu-verein-v2-fact:nth-child(4){
        border-bottom:0;
    }

    .hsu-verein-v2-team-grid{
        grid-template-columns:1fr;
    }

    .hsu-verein-v2-home-inner{
        align-items:start;
    }

    .hsu-verein-v2-home-badge{
        max-width:320px;
    }

}


@media (max-width:600px){

    .hsu-verein-v2-hero-inner{
        padding-top:62px;
        padding-bottom:62px;
    }

    .hsu-verein-v2-hero h1{
        font-size:clamp(46px,14vw,66px);
    }

    .hsu-verein-v2-hero-copy > p{
        font-size:18px;
    }

    .hsu-verein-v2-hero-actions{
        align-items:flex-start;
        flex-direction:column;
    }

    .hsu-verein-v2-hero-mark{
        width:210px;
        padding:28px;
    }

    .hsu-verein-v2-story,
    .hsu-verein-v2-teams,
    .hsu-verein-v2-people{
        padding-top:78px;
        padding-bottom:78px;
    }

    .hsu-verein-v2-story h2,
    .hsu-verein-v2-section-head h2,
    .hsu-verein-v2-home h2,
    .hsu-verein-v2-people h2{
        font-size:clamp(38px,11vw,54px);
    }

    .hsu-verein-v2-facts-grid{
        grid-template-columns:1fr 1fr;
    }

    .hsu-verein-v2-fact{
        min-height:145px;
        padding:22px 18px;
    }

    .hsu-verein-v2-fact strong{
        font-size:clamp(27px,8vw,38px);
    }

    .hsu-verein-v2-team-card{
        min-height:360px;
        padding:25px;
    }

    .hsu-verein-v2-team-main{
        gap:20px;
    }

    .hsu-verein-v2-team-main img{
        width:72px;
        height:72px;
    }

    .hsu-verein-v2-team-main h3{
        font-size:36px;
    }

    .hsu-verein-v2-home{
        min-height:auto;
    }

    .hsu-verein-v2-home-bg{
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.74) 0%,
                rgba(0,0,0,.91) 68%,
                #090909 100%
            ),
            url('/assets/img/haseneck-home-bg-v1.png')
            center / cover no-repeat;
    }

    .hsu-verein-v2-home-inner{
        padding-top:86px;
        padding-bottom:86px;
    }

    .hsu-verein-v2-home-copy p{
        font-size:17px;
    }

}


/* ==========================================================
   HSU TEAMSEITEN V2
   Shared isolated team page presentation
   ========================================================== */

.hsu-team-v2{
    --team-orange:#f47b20;
    --team-black:#070707;
    --team-dark:#0d0d0d;
    --team-line:rgba(255,255,255,.11);
    overflow:hidden;
    background:#fff;
}

.hsu-team-v2 *,
.hsu-team-v2 *::before,
.hsu-team-v2 *::after{
    box-sizing:border-box;
}

.hsu-team-v2-eyebrow{
    display:block;
    margin-bottom:18px;
    color:var(--team-orange);
    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
}


/* HERO */

.hsu-team-v2-hero{
    position:relative;
    min-height:680px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:var(--team-black);
    color:#fff;
}

.hsu-team-v2-hero-media{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transform:scale(1.005);
}

.hsu-team-v2-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(244,123,32,.11),
            transparent 31%
        );
    pointer-events:none;
}

.hsu-team-v2-hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) 250px;
    gap:70px;
    align-items:end;
    padding-top:130px;
    padding-bottom:80px;
}

.hsu-team-v2-hero-copy{
    max-width:820px;
}

.hsu-team-v2-hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    margin-bottom:22px;
}

.hsu-team-v2-hero-meta span,
.hsu-team-v2-hero-meta b{
    display:inline-flex;
    align-items:center;
    min-height:31px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.18);
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.14em;
}

.hsu-team-v2-hero-meta span{
    border-color:rgba(244,123,32,.5);
    background:rgba(244,123,32,.12);
    color:var(--team-orange);
}

.hsu-team-v2-hero-meta b{
    color:rgba(255,255,255,.72);
}

.hsu-team-v2-hero h1{
    margin:0;
    max-width:900px;
    color:#fff;
    font-size:clamp(60px,9vw,126px);
    line-height:.86;
    letter-spacing:-.065em;
    font-weight:950;
}

.hsu-team-v2-hero-copy > p{
    max-width:650px;
    margin:28px 0 0;
    color:rgba(255,255,255,.72);
    font-size:clamp(17px,2vw,22px);
    line-height:1.55;
}

.hsu-team-v2-matchday{
    display:flex;
    gap:18px;
    align-items:center;
    margin-top:25px;
}

.hsu-team-v2-matchday small{
    color:rgba(255,255,255,.45);
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
}

.hsu-team-v2-matchday strong{
    color:#fff;
    font-size:17px;
}

.hsu-team-v2-hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:25px;
    margin-top:38px;
}

.hsu-team-v2-text-link{
    display:inline-flex;
    gap:12px;
    align-items:center;
    color:#fff;
    text-decoration:none;
    font-weight:850;
}

.hsu-team-v2-text-link span{
    color:var(--team-orange);
    transition:transform .2s ease;
}

.hsu-team-v2-text-link:hover span{
    transform:translateY(4px);
}

.hsu-team-v2-number{
    justify-self:end;
    min-width:210px;
    padding:26px 0 4px;
    border-top:4px solid var(--team-orange);
}

.hsu-team-v2-number > span{
    display:block;
    color:rgba(255,255,255,.96);
    font-size:clamp(80px,10vw,140px);
    line-height:.75;
    letter-spacing:-.075em;
    font-weight:950;
}

.hsu-team-v2-number small{
    display:block;
    margin-top:30px;
    color:rgba(255,255,255,.45);
    font-size:10px;
    line-height:1.5;
    font-weight:900;
    letter-spacing:.17em;
}


/* TEAM / PLAYERS */

.hsu-team-v2-intro{
    padding:115px 0 125px;
    background:#fff;
}

.hsu-team-v2-intro-grid{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:90px;
    align-items:start;
    margin-bottom:65px;
}

.hsu-team-v2-intro h2,
.hsu-team-v2-section-head h2,
.hsu-team-v2-contact h2{
    margin:0;
    font-size:clamp(40px,5vw,70px);
    line-height:.96;
    letter-spacing:-.045em;
    font-weight:950;
}

.hsu-team-v2-intro h2 span,
.hsu-team-v2-section-head h2 span,
.hsu-team-v2-contact h2 span{
    color:var(--team-orange);
}

.hsu-team-v2-intro-copy{
    max-width:690px;
}

.hsu-team-v2-intro-copy > p{
    margin:0;
    max-width:650px;
    color:#505050;
    font-size:20px;
    line-height:1.65;
}

.hsu-team-v2-intro-facts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    margin-top:32px;
    overflow:hidden;
    background:#ddd;
    border:1px solid #ddd;
}

.hsu-team-v2-intro-facts > div{
    min-height:105px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:22px;
    background:#f5f5f3;
}

.hsu-team-v2-intro-facts small{
    margin-bottom:7px;
    color:#777;
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
}

.hsu-team-v2-intro-facts strong{
    color:#111;
    font-size:20px;
}

.hsu-team-v2-players{
    margin-top:0;
}


/* DATA SECTIONS */

.hsu-team-v2-schedule,
.hsu-team-v2-table{
    padding:115px 0;
}

.hsu-team-v2-schedule{
    background:#090909;
    color:#fff;
}

.hsu-team-v2-table{
    background:#f3f3f1;
    color:#111;
}

.hsu-team-v2-section-head{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
    gap:60px;
    align-items:end;
    margin-bottom:52px;
}

.hsu-team-v2-section-head > p{
    max-width:480px;
    justify-self:end;
    margin:0;
    font-size:17px;
    line-height:1.65;
}

.hsu-team-v2-schedule
.hsu-team-v2-section-head > p{
    color:rgba(255,255,255,.58);
}

.hsu-team-v2-table
.hsu-team-v2-section-head > p{
    color:#666;
}

.hsu-team-v2-schedule
.hsu-team-v2-section-head h2{
    color:#fff;
}

.hsu-team-v2-data{
    position:relative;
}


/* CONTACT */

.hsu-team-v2-contact{
    padding:100px 0;
    background:#fff;
}

.hsu-team-v2-contact-card{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,440px);
    gap:70px;
    align-items:center;
    padding:55px;
    background:#0a0a0a;
    color:#fff;
}

.hsu-team-v2-contact-card::after{
    content:"";
    position:absolute;
    right:-100px;
    top:-130px;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(244,123,32,.12);
    filter:blur(70px);
    pointer-events:none;
}

.hsu-team-v2-contact h2{
    position:relative;
    z-index:1;
    color:#fff;
}

.hsu-team-v2-contact-card p{
    position:relative;
    z-index:1;
    max-width:590px;
    margin:22px 0 0;
    color:rgba(255,255,255,.6);
    font-size:17px;
    line-height:1.65;
}

.hsu-team-v2-contact-link{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px 20px;
    align-items:center;
    padding:25px;
    border:1px solid rgba(244,123,32,.36);
    background:rgba(244,123,32,.055);
    color:#fff;
    text-decoration:none;
    transition:
        border-color .2s ease,
        background .2s ease;
}

.hsu-team-v2-contact-link small{
    grid-column:1 / -1;
    color:var(--team-orange);
    font-size:9px;
    font-weight:900;
    letter-spacing:.16em;
}

.hsu-team-v2-contact-link strong{
    min-width:0;
    overflow-wrap:anywhere;
    font-size:15px;
}

.hsu-team-v2-contact-link span{
    color:var(--team-orange);
    font-size:24px;
    transition:transform .2s ease;
}

.hsu-team-v2-contact-link:hover{
    border-color:rgba(244,123,32,.8);
    background:rgba(244,123,32,.09);
}

.hsu-team-v2-contact-link:hover span{
    transform:translateX(5px);
}


/* RESPONSIVE */

@media(max-width:900px){

    .hsu-team-v2-hero{
        min-height:620px;
    }

    .hsu-team-v2-hero-inner{
        grid-template-columns:1fr;
        gap:50px;
        padding-top:110px;
        padding-bottom:65px;
    }

    .hsu-team-v2-number{
        justify-self:start;
        min-width:180px;
    }

    .hsu-team-v2-intro-grid,
    .hsu-team-v2-section-head,
    .hsu-team-v2-contact-card{
        grid-template-columns:1fr;
        gap:42px;
    }

    .hsu-team-v2-section-head > p{
        justify-self:start;
    }

}


@media(max-width:600px){

    .hsu-team-v2-hero{
        min-height:590px;
    }

    .hsu-team-v2-hero-media{
        background-position:center top;
    }

    .hsu-team-v2-hero-inner{
        gap:38px;
        padding-top:95px;
        padding-bottom:52px;
    }

    .hsu-team-v2-hero h1{
        font-size:clamp(54px,17vw,82px);
    }

    .hsu-team-v2-hero-actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .hsu-team-v2-number{
        min-width:135px;
        padding-top:18px;
    }

    .hsu-team-v2-number > span{
        font-size:74px;
    }

    .hsu-team-v2-number small{
        margin-top:20px;
    }

    .hsu-team-v2-intro,
    .hsu-team-v2-schedule,
    .hsu-team-v2-table{
        padding-top:78px;
        padding-bottom:78px;
    }

    .hsu-team-v2-contact{
        padding-top:65px;
        padding-bottom:65px;
    }

    .hsu-team-v2-intro-grid{
        margin-bottom:45px;
    }

    .hsu-team-v2-intro h2,
    .hsu-team-v2-section-head h2,
    .hsu-team-v2-contact h2{
        font-size:clamp(38px,12vw,54px);
    }

    .hsu-team-v2-intro-copy > p{
        font-size:17px;
    }

    .hsu-team-v2-intro-facts{
        grid-template-columns:1fr;
    }

    .hsu-team-v2-intro-facts > div{
        min-height:90px;
    }

    .hsu-team-v2-contact-card{
        padding:30px 24px;
    }

    .hsu-team-v2-contact-link{
        padding:21px 18px;
    }

}


/* ==========================================================
   HSU TEAMSEITEN V2.1
   Local schedule + preseason standings
   ========================================================== */

.hsu-team-v2-next{
    padding:105px 0;
    background:#f3f3f1;
}

.hsu-team-v2-next-card{
    display:grid;
    grid-template-columns:220px 1fr;
    min-height:190px;
    overflow:hidden;
    border:1px solid #ddd;
    background:#fff;
}

.hsu-team-v2-next-date{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:30px;
    border-right:1px solid #ddd;
}

.hsu-team-v2-next-date small,
.hsu-team-v2-fixture-date small{
    color:var(--team-orange);
    font-size:10px;
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.hsu-team-v2-next-date strong{
    margin-top:7px;
    color:#111;
    font-size:27px;
}

.hsu-team-v2-next-date span{
    margin-top:5px;
    color:#777;
    font-size:14px;
}

.hsu-team-v2-next-fixture{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:35px 45px;
}

.hsu-team-v2-next-fixture > span{
    margin-bottom:13px;
    color:#777;
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
}

.hsu-team-v2-next-fixture > div{
    display:flex;
    align-items:center;
    gap:23px;
}

.hsu-team-v2-next-fixture strong{
    color:#111;
    font-size:clamp(22px,3vw,38px);
    line-height:1.08;
}

.hsu-team-v2-next-fixture b{
    flex:0 0 auto;
    color:var(--team-orange);
    font-size:13px;
    letter-spacing:.12em;
}

.hsu-team-v2-fixtures{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11);
    background:rgba(255,255,255,.07);
}

.hsu-team-v2-fixture{
    display:grid;
    grid-template-columns:190px 1fr;
    min-height:112px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.hsu-team-v2-fixture:last-child{
    border-bottom:0;
}

.hsu-team-v2-fixture-date{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:22px 26px;
    border-right:1px solid rgba(255,255,255,.1);
}

.hsu-team-v2-fixture-date strong{
    margin-top:5px;
    color:#fff;
    font-size:18px;
}

.hsu-team-v2-fixture-date span{
    margin-top:3px;
    color:rgba(255,255,255,.5);
    font-size:13px;
}

.hsu-team-v2-fixture-game{
    display:grid;
    grid-template-columns:80px minmax(0,1fr) 35px minmax(0,1fr);
    gap:16px;
    align-items:center;
    padding:22px 28px;
}

.hsu-team-v2-fixture-game small{
    color:var(--team-orange);
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.hsu-team-v2-fixture-game strong{
    color:#fff;
    font-size:17px;
}

.hsu-team-v2-fixture-game b{
    color:rgba(255,255,255,.35);
    font-size:11px;
    text-align:center;
    text-transform:uppercase;
}

.hsu-team-v2-standing-wrap{
    overflow-x:auto;
    border:1px solid #d7d7d4;
    background:#fff;
}

.hsu-team-v2-standing{
    width:100%;
    border-collapse:collapse;
    min-width:540px;
}

.hsu-team-v2-standing th,
.hsu-team-v2-standing td{
    padding:17px 20px;
    border-bottom:1px solid #e6e6e2;
    text-align:left;
}

.hsu-team-v2-standing th{
    color:#777;
    background:#ececea;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.hsu-team-v2-standing td{
    color:#252525;
    font-size:15px;
}

.hsu-team-v2-standing tr.is-hsu td{
    background:rgba(244,123,32,.09);
    font-weight:850;
}

.hsu-team-v2-standing tr.is-hsu td:first-child{
    border-left:4px solid var(--team-orange);
}

.hsu-team-v2-standing-note{
    margin:0;
    padding:17px 20px;
    color:#777;
    background:#f6f6f4;
    font-size:12px;
}

.hsu-team-v2-empty{
    padding:35px;
    border:1px solid #ddd;
    background:#fff;
}


@media(max-width:700px){

    .hsu-team-v2-next{
        padding:78px 0;
    }

    .hsu-team-v2-next-card{
        grid-template-columns:1fr;
    }

    .hsu-team-v2-next-date{
        border-right:0;
        border-bottom:1px solid #ddd;
    }

    .hsu-team-v2-next-fixture{
        padding:28px 24px;
    }

    .hsu-team-v2-next-fixture > div{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .hsu-team-v2-fixture{
        grid-template-columns:1fr;
    }

    .hsu-team-v2-fixture-date{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.1);
    }

    .hsu-team-v2-fixture-game{
        grid-template-columns:1fr;
        gap:6px;
    }

    .hsu-team-v2-fixture-game b{
        text-align:left;
    }

}


/* ==========================================================
   HSU TEAMSEITEN V2.1.1
   Explicit contrast safety for light/dark sections
   ========================================================== */

/*
 * LIGHT SECTIONS
 * Never inherit white typography from global HSU headings.
 */

.hsu-team-v2-intro,
.hsu-team-v2-next,
.hsu-team-v2-table,
.hsu-team-v2-contact{
    color:#111;
}

.hsu-team-v2-intro h1,
.hsu-team-v2-intro h2,
.hsu-team-v2-intro h3,
.hsu-team-v2-intro h4,
.hsu-team-v2-next h1,
.hsu-team-v2-next h2,
.hsu-team-v2-next h3,
.hsu-team-v2-table h1,
.hsu-team-v2-table h2,
.hsu-team-v2-table h3{
    color:#111;
}

.hsu-team-v2-intro p,
.hsu-team-v2-next p,
.hsu-team-v2-table p{
    color:#5c5c5c;
}

.hsu-team-v2-intro
.hsu-team-v2-eyebrow,
.hsu-team-v2-next
.hsu-team-v2-eyebrow,
.hsu-team-v2-table
.hsu-team-v2-eyebrow{
    color:var(--team-orange);
}

.hsu-team-v2-intro h2 span,
.hsu-team-v2-next h2 span,
.hsu-team-v2-table h2 span{
    color:var(--team-orange);
}


/*
 * Player cards keep their own dark-card presentation,
 * even while sitting inside the white team section.
 */

.hsu-team-v2-intro .player-card,
.hsu-team-v2-intro .player-card a{
    color:#fff;
}

.hsu-team-v2-intro .player-card h2,
.hsu-team-v2-intro .player-card h3,
.hsu-team-v2-intro .player-card h4,
.hsu-team-v2-intro .player-card strong{
    color:#fff;
}


/*
 * NEXT MATCH
 */

.hsu-team-v2-next-date small{
    color:var(--team-orange);
}

.hsu-team-v2-next-date strong,
.hsu-team-v2-next-fixture strong{
    color:#111;
}

.hsu-team-v2-next-date span,
.hsu-team-v2-next-fixture > span{
    color:#666;
}

.hsu-team-v2-next-fixture b{
    color:var(--team-orange);
}


/*
 * PRESEASON TABLE
 */

.hsu-team-v2-table
.hsu-team-v2-standing th{
    color:#666;
    background:#e8e8e5;
}

.hsu-team-v2-table
.hsu-team-v2-standing td{
    color:#222;
    background:#fff;
}

.hsu-team-v2-table
.hsu-team-v2-standing tr.is-hsu td{
    color:#111;
    background:rgba(244,123,32,.11);
}

.hsu-team-v2-table
.hsu-team-v2-standing-note{
    color:#666;
    background:#f3f3f0;
}


/*
 * DARK SECTIONS
 * Explicitly protect their light typography as well.
 */

.hsu-team-v2-hero,
.hsu-team-v2-schedule,
.hsu-team-v2-contact-card{
    color:#fff;
}

.hsu-team-v2-hero h1,
.hsu-team-v2-hero h2,
.hsu-team-v2-hero h3,
.hsu-team-v2-schedule h1,
.hsu-team-v2-schedule h2,
.hsu-team-v2-schedule h3,
.hsu-team-v2-contact-card h1,
.hsu-team-v2-contact-card h2,
.hsu-team-v2-contact-card h3{
    color:#fff;
}

.hsu-team-v2-schedule
.hsu-team-v2-section-head > p,
.hsu-team-v2-contact-card p{
    color:rgba(255,255,255,.64);
}

.hsu-team-v2-schedule
.hsu-team-v2-eyebrow,
.hsu-team-v2-contact-card
.hsu-team-v2-eyebrow{
    color:var(--team-orange);
}

.hsu-team-v2-schedule h2 span,
.hsu-team-v2-contact-card h2 span{
    color:var(--team-orange);
}


/*
 * Fixture rows are dark.
 */

.hsu-team-v2-fixture-game strong,
.hsu-team-v2-fixture-date strong{
    color:#fff;
}

.hsu-team-v2-fixture-date span{
    color:rgba(255,255,255,.55);
}

.hsu-team-v2-fixture-game b{
    color:rgba(255,255,255,.42);
}



/* ==========================================================
   HSU PARTNER & SPONSORING V2
   ========================================================== */

.hsu-partner-v2,
.hsu-sponsor-v2{
    --ps-orange:#f47b20;
    --ps-black:#080808;
    --ps-dark:#101010;
    --ps-line:rgba(255,255,255,.11);
    --ps-muted:#9b9790;
}

.hsu-partner-v2 *,
.hsu-partner-v2 *::before,
.hsu-partner-v2 *::after,
.hsu-sponsor-v2 *,
.hsu-sponsor-v2 *::before,
.hsu-sponsor-v2 *::after{
    box-sizing:border-box;
}

.hsu-partner-v2-eyebrow,
.hsu-sponsor-v2-eyebrow{
    display:block;
    margin-bottom:18px;
    color:var(--ps-orange);
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.22em;
}

.hsu-partner-v2 h1,
.hsu-partner-v2 h2,
.hsu-partner-v2 h3,
.hsu-sponsor-v2 h1,
.hsu-sponsor-v2 h2,
.hsu-sponsor-v2 h3{
    margin-top:0;
}

.hsu-partner-v2 h1 span,
.hsu-partner-v2 h2 span,
.hsu-sponsor-v2 h1 span,
.hsu-sponsor-v2 h2 span{
    color:var(--ps-orange);
}


/* ==========================================================
   PARTNER HERO
   ========================================================== */

.hsu-partner-v2-hero{
    position:relative;
    min-height:720px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:#050505;
}

.hsu-partner-v2-hero-media{
    position:absolute;
    inset:0;
    background:
        url('/assets/img/partner-cube-bg-v1.jpg'),
        url('/assets/img/community.webp');
    background-size:cover;
    background-position:center;
    opacity:.58;
}

.hsu-partner-v2-hero-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(4,4,4,.98) 0%,
            rgba(4,4,4,.86) 47%,
            rgba(4,4,4,.35) 100%
        ),
        linear-gradient(
            to top,
            #050505 0%,
            transparent 45%
        );
}

.hsu-partner-v2-hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:60px;
    align-items:end;
    padding-top:130px;
    padding-bottom:80px;
}

.hsu-partner-v2-hero-copy{
    max-width:900px;
}

.hsu-partner-v2-hero h1{
    max-width:900px;
    margin-bottom:28px;
    color:#fff;
    font-size:clamp(4rem,7.5vw,8rem);
    line-height:.88;
    letter-spacing:-.065em;
}

.hsu-partner-v2-hero h1 span{
    display:block;
}

.hsu-partner-v2-hero-copy > p{
    max-width:720px;
    margin:0;
    color:#c8c3bb;
    font-size:1.12rem;
    line-height:1.75;
}

.hsu-partner-v2-hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:24px;
    margin-top:34px;
}

.hsu-partner-v2-text-link,
.hsu-sponsor-v2-text-link{
    display:inline-flex;
    gap:12px;
    align-items:center;
    color:#eee9df;
    font-weight:800;
}

.hsu-partner-v2-text-link span,
.hsu-sponsor-v2-text-link span{
    color:var(--ps-orange);
}

.hsu-partner-v2-hero-mark{
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-end;
    border-right:1px solid rgba(255,255,255,.18);
    padding-right:28px;
}

.hsu-partner-v2-hero-mark span{
    color:#fff;
    font-size:5.6rem;
    font-weight:950;
    line-height:.8;
    letter-spacing:-.08em;
}

.hsu-partner-v2-hero-mark small{
    margin-top:17px;
    color:var(--ps-orange);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.24em;
}


/* ==========================================================
   PARTNER CARDS
   ========================================================== */

.hsu-partner-v2-current{
    padding:110px 0 125px;
    background:#f2f0eb;
    color:#111;
}

.hsu-partner-v2-section-head,
.hsu-sponsor-v2-section-head{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
    gap:60px;
    align-items:end;
    margin-bottom:55px;
}

.hsu-partner-v2-section-head h2{
    max-width:750px;
    margin-bottom:0;
    color:#111;
    font-size:clamp(3rem,5.5vw,5.8rem);
    line-height:.92;
    letter-spacing:-.055em;
}

.hsu-partner-v2-section-head > p{
    max-width:430px;
    margin:0 0 8px;
    color:#66615b;
    line-height:1.7;
}

.hsu-partner-v2-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.hsu-partner-v2-card{
    position:relative;
    min-height:430px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:30px;
    border-radius:30px;
    background:#101010;
    color:#fff;
    isolation:isolate;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.hsu-partner-v2-card:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 60px rgba(0,0,0,.2);
}

.hsu-partner-v2-card-media{
    position:absolute;
    z-index:-3;
    inset:0;
    background:
        var(--hsu-partner-card-bg),
        linear-gradient(135deg,#191919,#080808);
    background-size:cover;
    background-position:center;
}

.hsu-partner-v2-card-shade{
    position:absolute;
    z-index:-2;
    inset:0;
    background:
        linear-gradient(
            to bottom,
            rgba(5,5,5,.30),
            rgba(5,5,5,.50) 45%,
            rgba(5,5,5,.96)
        );
}

.hsu-partner-v2-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.hsu-partner-v2-card-top span{
    color:#fff;
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.hsu-partner-v2-card-top b{
    color:var(--ps-orange);
    font-size:1.5rem;
}

.hsu-partner-v2-card-logo{
    min-height:180px;
    display:grid;
    place-items:center;
    padding:25px;
}

.hsu-partner-v2-card-logo img{
    display:block;
    max-width:72%;
    max-height:145px;
    object-fit:contain;
    filter:
        drop-shadow(
            0 7px 22px rgba(0,0,0,.35)
        );
}

.hsu-partner-v2-card-logo strong{
    color:#fff;
    font-size:2rem;
}

.hsu-partner-v2-card-bottom{
    display:grid;
    gap:4px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.15);
}

.hsu-partner-v2-card-bottom small{
    color:var(--ps-orange);
    font-size:.62rem;
    font-weight:850;
    letter-spacing:.15em;
}

.hsu-partner-v2-card-bottom strong{
    color:#fff;
    font-size:1.4rem;
}


/* ==========================================================
   PARTNER VALUE
   ========================================================== */

.hsu-partner-v2-value{
    padding:125px 0;
    background:#090909;
}

.hsu-partner-v2-value-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:90px;
    align-items:start;
}

.hsu-partner-v2-value-copy h2{
    max-width:500px;
    color:#fff;
    font-size:clamp(3rem,5vw,5.4rem);
    line-height:.93;
}

.hsu-partner-v2-value-copy > p{
    max-width:520px;
    color:#a29d95;
    line-height:1.75;
}

.hsu-partner-v2-value-list{
    border-top:1px solid var(--ps-line);
}

.hsu-partner-v2-value-list article{
    display:grid;
    grid-template-columns:70px 1fr;
    gap:22px;
    padding:26px 0;
    border-bottom:1px solid var(--ps-line);
}

.hsu-partner-v2-value-list article > span{
    color:var(--ps-orange);
    font-size:.76rem;
    font-weight:900;
}

.hsu-partner-v2-value-list strong{
    display:block;
    color:#fff;
    font-size:1.2rem;
}

.hsu-partner-v2-value-list p{
    margin:5px 0 0;
    color:#89857e;
}


/* ==========================================================
   PARTNER CTA
   ========================================================== */

.hsu-partner-v2-cta{
    padding:50px 0 120px;
    background:#090909;
}

.hsu-partner-v2-cta-inner{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:70px;
    align-items:end;
    padding:clamp(40px,6vw,80px);
    border:1px solid rgba(244,123,32,.35);
    border-radius:36px;
    background:
        radial-gradient(
            circle at 85% 0,
            rgba(244,123,32,.17),
            transparent 30%
        ),
        #111;
}

.hsu-partner-v2-cta h2{
    max-width:720px;
    margin-bottom:20px;
    color:#fff;
    font-size:clamp(3rem,5vw,5.2rem);
    line-height:.94;
}

.hsu-partner-v2-cta p{
    max-width:560px;
    color:#aaa59d;
}

.hsu-partner-v2-cta-offer{
    display:grid;
    justify-items:start;
}

.hsu-partner-v2-cta-offer > small{
    color:#8f8a82;
    font-size:.67rem;
    font-weight:850;
    letter-spacing:.14em;
}

.hsu-partner-v2-cta-offer > strong{
    margin:8px 0 24px;
    color:#fff;
    font-size:clamp(3.5rem,6vw,6rem);
    line-height:1;
    letter-spacing:-.065em;
}


/* ==========================================================
   SPONSOR HERO
   ========================================================== */

.hsu-sponsor-v2-hero{
    position:relative;
    min-height:760px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:#050505;
}

.hsu-sponsor-v2-hero-media{
    position:absolute;
    inset:0;
    background:
        url('/assets/img/haseneck-home-bg-v1.png'),
        url('/assets/img/haseneck.jpg');
    background-size:cover;
    background-position:center;
    opacity:.62;
}

.hsu-sponsor-v2-hero-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(4,4,4,.98),
            rgba(4,4,4,.83) 55%,
            rgba(4,4,4,.52)
        ),
        linear-gradient(
            to top,
            #050505 0%,
            transparent 55%
        );
}

.hsu-sponsor-v2-hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:65px;
    align-items:end;
    padding-top:135px;
    padding-bottom:78px;
}

.hsu-sponsor-v2-hero-copy{
    max-width:900px;
}

.hsu-sponsor-v2-hero h1{
    max-width:930px;
    margin-bottom:28px;
    color:#fff;
    font-size:clamp(4rem,7.7vw,8.1rem);
    line-height:.88;
    letter-spacing:-.065em;
}

.hsu-sponsor-v2-hero h1 span{
    display:block;
}

.hsu-sponsor-v2-hero-copy > p{
    max-width:680px;
    color:#c7c2ba;
    font-size:1.12rem;
    line-height:1.75;
}

.hsu-sponsor-v2-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:25px;
    align-items:center;
    margin-top:35px;
}

.hsu-sponsor-v2-main-offer{
    padding:30px 28px;
    border-top:2px solid var(--ps-orange);
    background:rgba(8,8,8,.74);
    backdrop-filter:blur(15px);
}

.hsu-sponsor-v2-main-offer > span{
    display:block;
    color:var(--ps-orange);
    font-size:.67rem;
    font-weight:900;
    letter-spacing:.16em;
}

.hsu-sponsor-v2-main-offer > small{
    display:block;
    margin-top:18px;
    color:#8f8b84;
    font-size:.65rem;
    font-weight:800;
    letter-spacing:.14em;
}

.hsu-sponsor-v2-main-offer > strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:4rem;
    line-height:1;
    letter-spacing:-.06em;
}

.hsu-sponsor-v2-main-offer p{
    margin:18px 0 0;
    color:#aaa59d;
    line-height:1.55;
}


/* ==========================================================
   SPONSOR INTRO + FACTS
   ========================================================== */

.hsu-sponsor-v2-intro{
    padding:115px 0;
    background:#f2f0eb;
    color:#111;
}

.hsu-sponsor-v2-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:85px;
    align-items:start;
}

.hsu-sponsor-v2-intro h2{
    max-width:650px;
    color:#111;
    font-size:clamp(3rem,5.4vw,5.7rem);
    line-height:.92;
}

.hsu-sponsor-v2-intro-copy{
    padding-top:35px;
}

.hsu-sponsor-v2-intro-copy p{
    color:#5f5b55;
    font-size:1.07rem;
    line-height:1.75;
}

.hsu-sponsor-v2-intro-copy p:first-child{
    color:#171717;
    font-size:1.25rem;
    font-weight:700;
}

.hsu-sponsor-v2-facts{
    background:var(--ps-orange);
    color:#0b0b0b;
}

.hsu-sponsor-v2-facts-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.hsu-sponsor-v2-facts article{
    min-height:190px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:30px;
    border-right:1px solid rgba(0,0,0,.16);
}

.hsu-sponsor-v2-facts article:last-child{
    border-right:0;
}

.hsu-sponsor-v2-facts strong{
    font-size:2.6rem;
    line-height:1;
    letter-spacing:-.05em;
}

.hsu-sponsor-v2-facts span{
    margin-top:10px;
    font-size:1rem;
    font-weight:900;
}

.hsu-sponsor-v2-facts small{
    margin-top:4px;
    color:rgba(0,0,0,.63);
}


/* ==========================================================
   SPONSOR PACKAGES
   ========================================================== */

.hsu-sponsor-v2-packages{
    padding:125px 0;
    background:#080808;
}

.hsu-sponsor-v2-section-head h2{
    margin-bottom:0;
    color:#fff;
    font-size:clamp(3rem,5.5vw,5.7rem);
    line-height:.92;
}

.hsu-sponsor-v2-section-head > p{
    max-width:430px;
    margin:0 0 8px;
    color:#99958e;
    line-height:1.7;
}

.hsu-sponsor-v2-package-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.hsu-sponsor-v2-package{
    position:relative;
    min-height:650px;
    display:flex;
    flex-direction:column;
    padding:34px;
    border:1px solid var(--ps-line);
    border-radius:28px;
    background:#101010;
}

.hsu-sponsor-v2-package.is-main{
    border-color:rgba(244,123,32,.48);
    background:
        radial-gradient(
            circle at 90% 0,
            rgba(244,123,32,.15),
            transparent 32%
        ),
        #101010;
}

.hsu-sponsor-v2-package-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:22px;
    border-bottom:1px solid var(--ps-line);
}

.hsu-sponsor-v2-package-head span{
    color:var(--ps-orange);
    font-size:.67rem;
    font-weight:900;
    letter-spacing:.16em;
}

.hsu-sponsor-v2-package-head small{
    color:#65615c;
    font-weight:900;
}

.hsu-sponsor-v2-package h3{
    margin:30px 0 0;
    color:#fff;
    font-size:1.8rem;
}

.hsu-sponsor-v2-package-price{
    margin-top:18px;
}

.hsu-sponsor-v2-package-price strong{
    color:#fff;
    font-size:3.3rem;
    line-height:1;
    letter-spacing:-.055em;
}

.hsu-sponsor-v2-package-price small{
    display:block;
    margin-top:6px;
    color:#77736d;
}

.hsu-sponsor-v2-package-lead{
    min-height:52px;
    margin:25px 0 10px;
    color:#aaa59d;
}

.hsu-sponsor-v2-package ul{
    list-style:none;
    margin:15px 0 32px;
    padding:0;
}

.hsu-sponsor-v2-package li{
    position:relative;
    padding:11px 0 11px 25px;
    border-bottom:1px solid rgba(255,255,255,.055);
    color:#d0cbc3;
}

.hsu-sponsor-v2-package li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--ps-orange);
    font-weight:900;
}

.hsu-sponsor-v2-package .button,
.hsu-sponsor-v2-package-link{
    margin-top:auto;
}

.hsu-sponsor-v2-package-link{
    display:inline-flex;
    color:var(--ps-orange);
    font-weight:850;
}


/* ==========================================================
   SPONSOR VISIBILITY
   ========================================================== */

.hsu-sponsor-v2-visibility{
    padding:120px 0;
    background:#f2f0eb;
    color:#111;
}

.hsu-sponsor-v2-visibility-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:85px;
}

.hsu-sponsor-v2-visibility h2{
    color:#111;
    font-size:clamp(3rem,5vw,5.4rem);
    line-height:.93;
}

.hsu-sponsor-v2-touchpoints{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.12);
    border-radius:25px;
    background:rgba(0,0,0,.12);
}

.hsu-sponsor-v2-touchpoints article{
    min-height:210px;
    padding:28px;
    background:#fff;
}

.hsu-sponsor-v2-touchpoints span{
    color:var(--ps-orange);
    font-size:.67rem;
    font-weight:900;
}

.hsu-sponsor-v2-touchpoints strong{
    display:block;
    margin-top:30px;
    color:#111;
    font-size:1.45rem;
}

.hsu-sponsor-v2-touchpoints p{
    color:#6b6761;
    line-height:1.6;
}


/* ==========================================================
   SPONSOR CONTACT
   ========================================================== */

.hsu-sponsor-v2-contact{
    padding:120px 0;
    background:#080808;
}

.hsu-sponsor-v2-contact-inner{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:70px;
    align-items:center;
}

.hsu-sponsor-v2-contact h2{
    max-width:680px;
    color:#fff;
    font-size:clamp(3rem,5vw,5.3rem);
    line-height:.93;
}

.hsu-sponsor-v2-contact p{
    max-width:590px;
    color:#99958e;
    line-height:1.75;
}

.hsu-sponsor-v2-contact-card{
    position:relative;
    min-height:240px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:38px 70px 38px 38px;
    border:1px solid rgba(244,123,32,.35);
    border-radius:28px;
    background:
        radial-gradient(
            circle at 90% 0,
            rgba(244,123,32,.15),
            transparent 38%
        ),
        #111;
}

.hsu-sponsor-v2-contact-card small{
    margin-bottom:10px;
    color:var(--ps-orange);
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.15em;
}

.hsu-sponsor-v2-contact-card strong{
    color:#fff;
    font-size:1.15rem;
    overflow-wrap:anywhere;
}

.hsu-sponsor-v2-contact-card span{
    margin-top:8px;
    color:#85817a;
}

.hsu-sponsor-v2-contact-card b{
    position:absolute;
    right:30px;
    top:50%;
    color:var(--ps-orange);
    font-size:1.7rem;
    transform:translateY(-50%);
}


/* ==========================================================
   PARTNER / SPONSORING V2 MOBILE
   ========================================================== */

@media(max-width:920px){

    .hsu-partner-v2-hero-inner,
    .hsu-sponsor-v2-hero-inner,
    .hsu-partner-v2-section-head,
    .hsu-sponsor-v2-section-head,
    .hsu-partner-v2-value-grid,
    .hsu-partner-v2-cta-inner,
    .hsu-sponsor-v2-intro-grid,
    .hsu-sponsor-v2-visibility-grid,
    .hsu-sponsor-v2-contact-inner{
        grid-template-columns:1fr;
    }

    .hsu-partner-v2-hero-mark{
        display:none;
    }

    .hsu-partner-v2-hero,
    .hsu-sponsor-v2-hero{
        min-height:650px;
    }

    .hsu-partner-v2-hero-inner,
    .hsu-sponsor-v2-hero-inner{
        padding-top:110px;
        padding-bottom:60px;
    }

    .hsu-partner-v2-grid{
        grid-template-columns:1fr;
    }

    .hsu-partner-v2-card{
        min-height:390px;
    }

    .hsu-sponsor-v2-package-grid{
        grid-template-columns:1fr;
    }

    .hsu-sponsor-v2-package{
        min-height:0;
    }

    .hsu-sponsor-v2-facts-grid{
        grid-template-columns:1fr 1fr;
    }

    .hsu-sponsor-v2-facts article:nth-child(2){
        border-right:0;
    }

    .hsu-sponsor-v2-facts article:nth-child(-n+2){
        border-bottom:1px solid rgba(0,0,0,.16);
    }

}

@media(max-width:620px){

    .hsu-partner-v2-hero,
    .hsu-sponsor-v2-hero{
        min-height:570px;
    }

    .hsu-partner-v2-hero h1,
    .hsu-sponsor-v2-hero h1{
        font-size:clamp(3rem,15vw,4.6rem);
    }

    .hsu-partner-v2-hero-copy > p,
    .hsu-sponsor-v2-hero-copy > p{
        font-size:1rem;
    }

    .hsu-partner-v2-hero-actions,
    .hsu-sponsor-v2-hero-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .hsu-partner-v2-hero-actions .button,
    .hsu-sponsor-v2-hero-actions .button{
        width:100%;
        justify-content:center;
    }

    .hsu-partner-v2-current,
    .hsu-partner-v2-value,
    .hsu-sponsor-v2-intro,
    .hsu-sponsor-v2-packages,
    .hsu-sponsor-v2-visibility,
    .hsu-sponsor-v2-contact{
        padding-top:80px;
        padding-bottom:80px;
    }

    .hsu-partner-v2-card{
        min-height:330px;
        padding:22px;
        border-radius:23px;
    }

    .hsu-partner-v2-card-logo{
        min-height:145px;
    }

    .hsu-partner-v2-cta{
        padding-bottom:80px;
    }

    .hsu-partner-v2-cta-inner{
        padding:32px 24px;
        border-radius:25px;
    }

    .hsu-sponsor-v2-main-offer{
        padding:23px;
    }

    .hsu-sponsor-v2-main-offer > strong{
        font-size:3.3rem;
    }

    .hsu-sponsor-v2-facts article{
        min-height:145px;
        padding:20px;
    }

    .hsu-sponsor-v2-facts strong{
        font-size:2rem;
    }

    .hsu-sponsor-v2-package{
        padding:27px 23px;
        border-radius:23px;
    }

    .hsu-sponsor-v2-package-price strong{
        font-size:2.8rem;
    }

    .hsu-sponsor-v2-touchpoints{
        grid-template-columns:1fr;
    }

    .hsu-sponsor-v2-touchpoints article{
        min-height:165px;
    }

    .hsu-sponsor-v2-contact-card{
        min-height:190px;
        padding:28px 55px 28px 25px;
    }

}



/* ==========================================================
   HSU WORLD ONBOARDING V1
   ========================================================== */

html.hsu-onboarding-open,
body.hsu-onboarding-open{
    overflow:hidden;
}

.hsu-onboarding{
    position:fixed;
    inset:0;
    z-index:100000;
    display:grid;
    place-items:center;
    padding:
        max(22px,env(safe-area-inset-top))
        18px
        max(22px,env(safe-area-inset-bottom));
}

.hsu-onboarding-backdrop{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(242,95,20,.18),
            transparent 38%
        ),
        rgba(2,2,2,.91);
    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);
}

.hsu-onboarding-card{
    position:relative;
    z-index:1;
    width:min(100%,560px);
    min-height:570px;
    padding:28px;
    border:
        1px solid
        rgba(255,255,255,.12);
    border-radius:30px;
    background:
        linear-gradient(
            145deg,
            rgba(24,24,24,.98),
            rgba(8,8,8,.99)
        );
    box-shadow:
        0 35px 100px rgba(0,0,0,.65),
        0 0 70px rgba(242,95,20,.08);
    color:#fff;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.hsu-onboarding-card::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-130px;
    top:-130px;
    border-radius:50%;
    background:
        rgba(242,95,20,.13);
    filter:blur(15px);
    pointer-events:none;
}

.hsu-onboarding-progress{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:52px;
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.12em;
    color:rgba(255,255,255,.52);
}

.hsu-onboarding-progress > div{
    height:3px;
    flex:1;
    overflow:hidden;
    border-radius:99px;
    background:rgba(255,255,255,.1);
}

.hsu-onboarding-progress i{
    display:block;
    width:20%;
    height:100%;
    border-radius:inherit;
    background:#f25f14;
    transition:width .3s ease;
}

.hsu-onboarding-step{
    display:none;
    position:relative;
    z-index:2;
    animation:
        hsuOnboardingIn
        .28s ease both;
}

.hsu-onboarding-step.active{
    display:block;
}

@keyframes hsuOnboardingIn{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.hsu-onboarding-kicker{
    display:block;
    margin-bottom:15px;
    color:#f25f14;
    font-size:.76rem;
    line-height:1;
    font-weight:950;
    letter-spacing:.17em;
}

.hsu-onboarding-number{
    display:block;
    position:absolute;
    right:0;
    top:-18px;
    color:rgba(255,255,255,.055);
    font-size:6.2rem;
    line-height:1;
    font-weight:950;
    letter-spacing:-.08em;
}

.hsu-onboarding-step h2{
    position:relative;
    margin:0 0 20px;
    max-width:470px;
    color:#fff;
    font-size:
        clamp(2.5rem,8vw,4.25rem);
    line-height:.91;
    letter-spacing:-.065em;
    text-transform:uppercase;
}

.hsu-onboarding-step h2 strong{
    color:#f25f14;
    font-weight:950;
}

.hsu-onboarding-step p{
    max-width:440px;
    margin:0;
    color:rgba(255,255,255,.7);
    font-size:1rem;
    line-height:1.65;
}

.hsu-onboarding-feature-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:28px;
}

.hsu-onboarding-feature-row span{
    padding:8px 11px;
    border:
        1px solid
        rgba(255,255,255,.12);
    border-radius:999px;
    color:rgba(255,255,255,.72);
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-onboarding-link{
    display:inline-flex;
    margin-top:24px;
    color:#fff;
    font-size:.85rem;
    font-weight:850;
    text-decoration:none;
}

.hsu-onboarding-reward{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:28px;
}

.hsu-onboarding-reward span{
    padding:16px;
    border:
        1px solid
        rgba(242,95,20,.28);
    border-radius:17px;
    background:
        rgba(242,95,20,.08);
    color:rgba(255,255,255,.66);
    font-size:.68rem;
    font-weight:900;
    letter-spacing:.08em;
}

.hsu-onboarding-reward strong{
    display:block;
    margin-bottom:3px;
    color:#f25f14;
    font-size:1.65rem;
    letter-spacing:-.04em;
}

.hsu-onboarding-actions{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    padding-top:35px;
}

.hsu-onboarding-actions .button{
    min-height:48px;
}

.hsu-onboarding-finish-form{
    display:none;
}


@media(max-width:620px){

    .hsu-onboarding{
        place-items:end center;
        padding:
            12px
            10px
            max(10px,env(safe-area-inset-bottom));
    }

    .hsu-onboarding-card{
        width:100%;
        min-height:
            min(620px,calc(100dvh - 22px));
        max-height:
            calc(100dvh - 22px);
        padding:24px 21px 20px;
        border-radius:27px;
    }

    .hsu-onboarding-progress{
        margin-bottom:38px;
    }

    .hsu-onboarding-step h2{
        font-size:
            clamp(2.45rem,13vw,3.65rem);
    }

    .hsu-onboarding-step p{
        font-size:.94rem;
        line-height:1.55;
    }

    .hsu-onboarding-number{
        font-size:5rem;
    }

    .hsu-onboarding-actions{
        align-items:stretch;
    }

    .hsu-onboarding-actions .button{
        padding-left:16px;
        padding-right:16px;
    }

    .hsu-onboarding-skip{
        flex:0 0 auto;
    }

    .hsu-onboarding-next{
        flex:1;
    }

}



/* ==========================================================
   HSU WORLD ONBOARDING V1.0.2
   SKIP BUTTON CONTRAST FIX
   ========================================================== */

.hsu-onboarding .hsu-onboarding-skip,
.hsu-onboarding .hsu-onboarding-skip:visited{
    color:rgba(255,255,255,.82);
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.025);
}

.hsu-onboarding .hsu-onboarding-skip:hover,
.hsu-onboarding .hsu-onboarding-skip:focus-visible{
    color:#fff;
    border-color:rgba(255,255,255,.38);
    background:rgba(255,255,255,.07);
}

/* ==========================================================
   HSU APP START V1
   ========================================================== */

html:has(.hsu-app-start),
body:has(.hsu-app-start){
    overflow:hidden;
}

.hsu-app-start{
    position:fixed;
    inset:0;
    z-index:10050;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:
        max(18px, env(safe-area-inset-top))
        18px
        max(18px, env(safe-area-inset-bottom));

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

.hsu-app-start[hidden]{
    display:none !important;
}

.hsu-app-start-backdrop{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(242,101,34,.18),
            transparent 42%
        ),
        rgba(0,0,0,.91);

    backdrop-filter:
        blur(15px);
    -webkit-backdrop-filter:
        blur(15px);
}

.hsu-app-start-card{
    position:relative;
    z-index:1;

    width:min(100%,460px);

    padding:34px 28px 24px;

    overflow:hidden;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            rgba(27,27,27,.98),
            rgba(8,8,8,.99)
        );

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:28px;

    box-shadow:
        0 28px 90px rgba(0,0,0,.6);
}

.hsu-app-start-card::before{
    content:"";

    position:absolute;
    top:0;
    left:26px;
    right:26px;

    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #f26522,
            transparent
        );
}

.hsu-app-start-step[hidden]{
    display:none !important;
}

.hsu-app-start-kicker{
    display:block;

    margin-bottom:17px;

    color:#f26522;

    font-size:11px;
    font-weight:900;
    line-height:1;
    letter-spacing:.19em;
    text-transform:uppercase;
}

.hsu-app-start-step h2{
    margin:0;

    color:#fff;

    font-size:
        clamp(34px,8vw,48px);

    line-height:.96;
    letter-spacing:-.045em;
    text-transform:uppercase;
}

.hsu-app-start-step h2 strong{
    color:#f26522;
    font-weight:900;
}

.hsu-app-start-step > p{
    max-width:390px;

    margin:22px 0 25px;

    color:rgba(255,255,255,.72);

    font-size:15px;
    line-height:1.62;
}

.hsu-app-start-step > .button{
    width:100%;
    min-height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    font-size:14px;
    font-weight:900;
    letter-spacing:.035em;
}

.hsu-app-start-step > .button:disabled{
    opacity:.62;
    cursor:default;
}

.hsu-app-start-ios-guide{
    display:grid;
    gap:10px;

    margin:
        -3px 0 24px;
}

.hsu-app-start-ios-guide[hidden]{
    display:none !important;
}

.hsu-app-start-ios-guide span{
    display:flex;
    align-items:center;
    gap:12px;

    padding:12px 13px;

    color:rgba(255,255,255,.86);

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:14px;

    font-size:13px;
    line-height:1.35;
}

.hsu-app-start-ios-guide b{
    flex:0 0 27px;

    width:27px;
    height:27px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#050505;
    background:#f26522;

    border-radius:50%;

    font-size:12px;
    font-weight:950;
}

.hsu-app-start-later{
    display:block;

    width:100%;

    margin:14px 0 0;
    padding:10px 8px 2px;

    color:rgba(255,255,255,.57);
    background:transparent;

    border:0;

    appearance:none;
    -webkit-appearance:none;

    font:inherit;
    font-size:13px;
    font-weight:750;

    text-align:center;

    cursor:pointer;
}

.hsu-app-start-later:hover,
.hsu-app-start-later:focus-visible{
    color:#fff;
}

@media(max-width:600px){

    .hsu-app-start{
        align-items:flex-end;

        padding:
            16px
            12px
            max(
                12px,
                env(safe-area-inset-bottom)
            );
    }

    .hsu-app-start-card{
        width:100%;

        padding:
            29px
            22px
            20px;

        border-radius:26px;
    }

    .hsu-app-start-step h2{
        font-size:
            clamp(34px,11vw,45px);
    }

    .hsu-app-start-step > p{
        margin:
            18px 0 21px;

        font-size:14px;
    }

}

@media(prefers-reduced-motion:reduce){

    .hsu-app-start,
    .hsu-app-start *{
        scroll-behavior:auto !important;
        animation:none !important;
        transition:none !important;
    }

}


/* ==========================================================
   HSU APP START V1.0.1 · IOS GUIDE FOCUS
   ========================================================== */

.hsu-app-start-ios-guide.is-active{
    position:relative;

    padding:12px;
    margin-top:2px;

    background:rgba(242,101,34,.08);

    border:
        1px solid rgba(242,101,34,.34);

    border-radius:18px;

    box-shadow:
        0 12px 34px rgba(0,0,0,.24);
}

.hsu-app-start-ios-guide.is-active::before{
    content:"JETZT IN SAFARI";

    display:block;

    padding:1px 3px 3px;

    color:#f26522;

    font-size:10px;
    font-weight:950;
    line-height:1;
    letter-spacing:.18em;
}

.hsu-app-start-ios-guide.is-active span{
    background:rgba(255,255,255,.065);
    border-color:rgba(255,255,255,.12);
}

.hsu-app-start-ios-guide.is-active span.is-current{
    background:rgba(242,101,34,.13);
    border-color:rgba(242,101,34,.68);
}


/* ==========================================================
   HSU APP START V1.0.2 · IOS SIX STEPS
   ========================================================== */

.hsu-app-start-ios-guide strong{
    color:#fff;
    font-weight:900;
}

.hsu-app-start-ios-guide.is-active{
    max-height:
        min(
            54vh,
            470px
        );

    overflow-y:auto;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;
}

@media(max-width:600px){

    .hsu-app-start-ios-guide.is-active{
        max-height:48vh;
    }

}


/* ==========================================================
   HSU APP START V1.0.3 · MOBILE BREATHING ROOM
   ========================================================== */

@media(max-width:600px){

    .hsu-app-start{
        padding-top:
            max(
                26px,
                env(safe-area-inset-top)
            );
    }

    .hsu-app-start-card{
        max-height:
            calc(
                100dvh
                - 150px
            );

        overflow-y:auto;
        -webkit-overflow-scrolling:touch;

        padding-top:40px;

        scrollbar-width:none;
    }

    .hsu-app-start-card::-webkit-scrollbar{
        display:none;
    }

    .hsu-app-start-kicker{
        margin-bottom:20px;
    }

    .hsu-app-start-step h2{
        margin-top:2px;
    }

    .hsu-app-start-step > p{
        margin-top:27px;
    }

}


/* ==========================================================
   HSU APP-FIRST V1 · PUBLIC APP CTA
   ========================================================== */

.hsu-home-app-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}

.hsu-home-app-cta-icon{
    width:22px;
    height:22px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex:0 0 22px;

    color:#050505;
    background:#f26522;

    border-radius:6px;

    font-size:18px;
    font-weight:900;
    line-height:1;
}

@media(min-width:761px){

    /*
     * APP-FIRST prompt is intentionally mobile-first.
     * Desktop keeps the frozen public Website V2 hierarchy.
     */

    .hsu-home-app-cta{
        display:none;
    }

}


/* ==========================================================
   HSU APP-FIRST V1.0.2 · MOBILE COMMUNITY CLEANUP
   ========================================================== */

@media(max-width:760px){

    .hsu-home-community-compact-inner{
        align-items:stretch;
    }

    .hsu-home-community-compact-action{
        width:100%;

        display:flex;
        flex-direction:column;
        align-items:stretch;

        gap:12px;

        margin-top:24px;
    }

    .hsu-home-community-compact-user{
        width:100%;

        display:block;

        margin:0 0 4px;

        white-space:normal;

        color:rgba(255,255,255,.58);

        font-size:14px;
        line-height:1.4;

        text-align:left;
    }

    .hsu-home-community-compact-user strong{
        display:inline;

        color:#fff;
        font-weight:900;
    }

    .hsu-home-community-compact-action > .button{
        width:100%;
        max-width:none;
        min-width:0;

        min-height:58px;

        display:flex;
        align-items:center;
        justify-content:center;

        margin:0;

        padding:
            15px
            20px;

        border-radius:18px;

        white-space:normal;

        text-align:center;
    }

    .hsu-home-community-compact-action
    > .button-primary{
        font-size:16px;
        font-weight:900;
    }

    .hsu-home-app-cta{
        position:relative;

        gap:10px;

        color:#fff;

        background:
            rgba(255,255,255,.025);

        border:
            1px solid rgba(255,255,255,.18);
    }

    .hsu-home-app-cta-icon{
        width:25px;
        height:25px;

        flex:0 0 25px;

        border-radius:7px;

        font-size:19px;
    }

    .hsu-home-app-cta > span:last-child{
        min-width:0;

        font-size:15px;
        font-weight:850;

        overflow-wrap:anywhere;
    }

}


/* ==========================================================
   HSU MOBILE UI POLISH V1 · PUSH + PREMIUM MESSENGER
   Presentation only.
   ========================================================== */


/* ----------------------------------------------------------
   PUSH CARD
   Prevent ugly single-letter wrapping on mobile.
   ---------------------------------------------------------- */

.hsu-push-card h2{
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
}

@media(max-width:760px){

    .hsu-push-card h2{
        font-size:
            clamp(
                34px,
                9.6vw,
                48px
            );

        line-height:.94;
        letter-spacing:-.045em;

        white-space:nowrap;
    }

}

@media(max-width:390px){

    .hsu-push-card h2{
        font-size:
            clamp(
                30px,
                8.8vw,
                38px
            );
    }

}


/* ----------------------------------------------------------
   PREMIUM MOBILE MESSENGER
   ---------------------------------------------------------- */

@media(max-width:760px){

    .hsu-messenger{
        padding-top:28px;
    }


    /* Page intro */

    .hsu-messenger-title{
        gap:18px;
        margin-bottom:26px;
    }

    .hsu-messenger-title h1{
        letter-spacing:-.045em;
    }


    /* Main messenger becomes one clean mobile surface */

    .hsu-messenger-layout{
        display:block;

        overflow:hidden;

        border:
            1px solid rgba(255,255,255,.12);

        border-radius:24px;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.035),
                rgba(255,255,255,.012)
            );

        box-shadow:
            0 24px 70px rgba(0,0,0,.34);
    }


    /* Chat selector */

    .hsu-messenger-sidebar{
        width:100%;
        min-width:0;

        border:0;
        border-bottom:
            1px solid rgba(255,255,255,.10);

        background:
            rgba(5,5,5,.76);
    }

    .hsu-messenger-sidebar-head{
        min-height:68px;

        padding:
            14px
            18px;

        border-bottom:
            1px solid rgba(255,255,255,.08);
    }

    .hsu-messenger-sidebar-head strong{
        font-size:18px;
        letter-spacing:-.02em;
    }

    .hsu-messenger-sidebar-head a{
        width:44px;
        height:44px;

        display:flex;
        align-items:center;
        justify-content:center;

        flex:0 0 44px;

        border-radius:50%;

        background:#ff6b00;
        color:#050505;

        font-size:27px;
        font-weight:900;
        line-height:1;

        box-shadow:
            0 10px 26px rgba(255,107,0,.18);
    }


    /* Horizontal conversation switcher */

    .hsu-messenger-conversations{
        display:flex;

        width:100%;

        overflow-x:auto;
        overflow-y:hidden;

        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        padding:
            10px
            12px
            12px;

        gap:8px;
    }

    .hsu-messenger-conversations::-webkit-scrollbar{
        display:none;
    }

    .hsu-messenger-conversation{
        position:relative;

        width:auto;
        min-width:210px;
        max-width:260px;

        flex:
            0
            0
            min(
                72vw,
                250px
            );

        scroll-snap-align:start;

        display:flex;
        align-items:center;

        padding:
            11px
            13px;

        border:
            1px solid rgba(255,255,255,.09);

        border-radius:18px;

        background:
            rgba(255,255,255,.025);

        transition:
            transform .18s ease,
            border-color .18s ease,
            background .18s ease;
    }

    .hsu-messenger-conversation.active{
        border-color:
            rgba(255,107,0,.62);

        background:
            linear-gradient(
                135deg,
                rgba(255,107,0,.16),
                rgba(255,107,0,.045)
            );

        box-shadow:
            inset 0 -3px 0 #ff6b00,
            0 8px 24px rgba(0,0,0,.16);
    }

    .hsu-messenger-conversation.active::before{
        content:"";

        position:absolute;

        top:11px;
        right:11px;

        width:7px;
        height:7px;

        border-radius:50%;

        background:#ff6b00;

        box-shadow:
            0 0 0 4px rgba(255,107,0,.11);
    }

    .hsu-messenger-mini-avatar{
        width:48px;
        height:48px;

        flex:
            0
            0
            48px;

        border-radius:50%;

        overflow:hidden;

        border:
            1px solid rgba(255,255,255,.12);

        background:#111;
    }

    .hsu-messenger-conversation.active
    .hsu-messenger-mini-avatar{
        border-color:
            rgba(255,107,0,.75);
    }

    .hsu-messenger-conversation-copy{
        min-width:0;
    }

    .hsu-messenger-conversation-copy strong{
        font-size:15px;
        line-height:1.15;
    }

    .hsu-messenger-conversation-copy small{
        margin-top:4px;

        overflow:hidden;

        text-overflow:ellipsis;
        white-space:nowrap;

        font-size:12px;
    }


    /* Active chat */

    .hsu-messenger-chat{
        width:100%;
        min-width:0;

        border:0;

        background:#0d0d0d;
    }

    .hsu-messenger-chat-head{
        position:relative;

        min-height:82px;

        padding:
            13px
            17px;

        display:flex;
        align-items:center;

        border-bottom:
            1px solid rgba(255,255,255,.09);

        background:
            linear-gradient(
                110deg,
                rgba(255,107,0,.095),
                rgba(255,107,0,.018) 45%,
                rgba(255,255,255,.015)
            );
    }

    .hsu-messenger-chat-head::after{
        content:"";

        position:absolute;

        left:17px;
        right:17px;
        bottom:-1px;

        height:1px;

        background:
            linear-gradient(
                90deg,
                #ff6b00,
                rgba(255,107,0,0)
            );

        opacity:.65;
    }

    .hsu-messenger-chat-person{
        gap:12px;
        min-width:0;
    }

    .hsu-messenger-chat-avatar{
        width:52px;
        height:52px;

        flex:
            0
            0
            52px;

        border-radius:50%;

        overflow:hidden;

        border:
            2px solid rgba(255,107,0,.58);

        background:#111;

        box-shadow:
            0 0 0 4px rgba(255,107,0,.07);
    }

    .hsu-messenger-chat-person strong{
        font-size:17px;
        line-height:1.1;
        letter-spacing:-.015em;
    }

    .hsu-messenger-chat-person small{
        margin-top:4px;
        line-height:1.25;
    }

    .hsu-messenger-partner-presence{
        margin-top:5px;
    }


    /* Message area */

    .hsu-messenger-messages{
        padding:
            22px
            14px
            18px;

        background:
            radial-gradient(
                circle at 100% 0,
                rgba(255,107,0,.045),
                transparent 32%
            ),
            #0d0d0d;
    }

    .hsu-message-row{
        margin-bottom:10px;
    }

    .hsu-message-bubble{
        border-radius:18px;

        box-shadow:
            0 7px 18px rgba(0,0,0,.12);
    }

    .hsu-message-row.mine
    .hsu-message-bubble{
        border-bottom-right-radius:6px;
    }

    .hsu-message-row.theirs
    .hsu-message-bubble{
        border-bottom-left-radius:6px;
    }


    /* Composer feels attached to the conversation */

    .hsu-messenger-compose{
        padding:
            12px
            13px
            max(
                12px,
                env(safe-area-inset-bottom)
            );

        border-top:
            1px solid rgba(255,255,255,.09);

        background:
            rgba(10,10,10,.96);

        box-shadow:
            0 -14px 32px rgba(0,0,0,.18);
    }

}


/* Very small phones */

@media(max-width:390px){

    .hsu-messenger-conversation{
        flex-basis:
            min(
                78vw,
                235px
            );
    }

    .hsu-messenger-messages{
        padding-left:10px;
        padding-right:10px;
    }

}


/* ==========================================================
   HSU MESSENGER V2 · MOBILE APP EXPERIENCE
   Presentation only.
   Existing transport / polling / smart-scroll untouched.
   ========================================================== */

@media(max-width:760px){

    /* ------------------------------------------------------
       PAGE
       ------------------------------------------------------ */

    .hsu-messenger{
        padding:
            18px
            0
            34px;
    }

    .hsu-messenger > .shell{
        width:100%;
        max-width:none;

        padding:
            0
            12px;
    }

    .hsu-messenger-title{
        margin:
            0
            4px
            20px;

        align-items:flex-end;
    }

    .hsu-messenger-title h1{
        margin-top:6px;

        font-size:
            clamp(
                38px,
                11vw,
                54px
            );

        line-height:.92;
    }

    .hsu-messenger-title p{
        max-width:310px;
    }

    /*
     * Community link remains available but visually
     * secondary to the actual messenger.
     */

    .hsu-messenger-title > .button{
        min-height:42px;

        padding:
            10px
            15px;

        font-size:12px;
    }


    /* ------------------------------------------------------
       APP SHELL
       ------------------------------------------------------ */

    .hsu-messenger-layout{
        display:block;

        width:100%;

        overflow:hidden;

        background:#090909;

        border:
            1px solid rgba(255,255,255,.11);

        border-radius:26px;

        box-shadow:
            0
            28px
            80px
            rgba(0,0,0,.42);
    }


    /* ------------------------------------------------------
       CHAT NAVIGATION
       ------------------------------------------------------ */

    .hsu-messenger-sidebar{
        position:relative;

        width:100%;

        border:0;

        background:
            linear-gradient(
                180deg,
                #111,
                #0b0b0b
            );
    }

    .hsu-messenger-sidebar-head{
        min-height:66px;

        display:flex;
        align-items:center;
        justify-content:space-between;

        padding:
            11px
            13px
            9px
            17px;

        border-bottom:
            1px solid rgba(255,255,255,.07);
    }

    .hsu-messenger-sidebar-head strong{
        color:#fff;

        font-size:20px;
        font-weight:900;
        letter-spacing:-.025em;
    }


    /* New chat = explicit action, not anonymous + */

    .hsu-messenger-sidebar-head
    .hsu-messenger-new-chat{
        width:auto;
        height:42px;

        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:6px;

        padding:
            0
            13px
            0
            9px;

        color:#050505;
        background:#ff6b00;

        border:0;
        border-radius:999px;

        text-decoration:none;

        box-shadow:
            0
            9px
            24px
            rgba(255,107,0,.18);
    }

    .hsu-messenger-new-chat > span{
        width:26px;
        height:26px;

        display:flex;
        align-items:center;
        justify-content:center;

        flex:
            0
            0
            26px;

        color:#050505;

        font-size:22px;
        font-weight:950;
        line-height:1;
    }

    .hsu-messenger-new-chat > strong{
        color:#050505;

        font-size:12px;
        font-weight:950;
        line-height:1;

        white-space:nowrap;
    }


    /* Horizontal contact rail */

    .hsu-messenger-conversations{
        display:flex;

        width:100%;

        gap:9px;

        padding:
            11px
            12px
            13px;

        overflow-x:auto;
        overflow-y:hidden;

        scroll-snap-type:x proximity;
        overscroll-behavior-x:contain;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
    }

    .hsu-messenger-conversations::-webkit-scrollbar{
        display:none;
    }


    /*
     * Each conversation behaves like a compact person chip.
     * Enough preview to identify the chat, but never a huge
     * sidebar card.
     */

    .hsu-messenger-conversation{
        position:relative;

        flex:
            0
            0
            184px;

        min-width:184px;
        max-width:184px;

        min-height:68px;

        display:flex;
        align-items:center;

        gap:10px;

        padding:
            9px
            11px;

        overflow:hidden;

        scroll-snap-align:start;

        color:#fff;

        background:
            rgba(255,255,255,.028);

        border:
            1px solid rgba(255,255,255,.085);

        border-radius:17px;

        box-shadow:none;
    }

    .hsu-messenger-conversation:hover{
        transform:none;
    }

    .hsu-messenger-conversation.active{
        background:
            linear-gradient(
                135deg,
                rgba(255,107,0,.17),
                rgba(255,107,0,.045)
            );

        border-color:
            rgba(255,107,0,.64);

        box-shadow:
            inset 0 -3px 0 #ff6b00;
    }

    .hsu-messenger-conversation.active::before{
        content:"";

        position:absolute;

        top:9px;
        right:9px;

        width:7px;
        height:7px;

        background:#ff6b00;

        border-radius:50%;

        box-shadow:
            0 0 0 4px
            rgba(255,107,0,.11);
    }

    .hsu-messenger-mini-avatar{
        width:44px;
        height:44px;

        flex:
            0
            0
            44px;

        overflow:hidden;

        border:
            1px solid rgba(255,255,255,.15);

        border-radius:50%;

        background:#111;
    }

    .hsu-messenger-conversation.active
    .hsu-messenger-mini-avatar{
        border:
            2px solid rgba(255,107,0,.8);
    }

    .hsu-messenger-conversation-copy{
        min-width:0;

        display:flex;
        flex-direction:column;
    }

    .hsu-messenger-conversation-copy strong{
        overflow:hidden;

        color:#fff;

        font-size:14px;
        font-weight:900;
        line-height:1.15;

        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .hsu-messenger-conversation-copy small{
        width:100%;

        margin-top:4px;

        overflow:hidden;

        color:
            rgba(255,255,255,.47);

        font-size:11px;
        line-height:1.15;

        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .hsu-messenger-unread{
        position:absolute;

        right:8px;
        bottom:8px;

        min-width:19px;
        height:19px;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:0 5px;

        color:#050505;
        background:#ff6b00;

        border-radius:999px;

        font-size:10px;
        font-weight:950;
    }


    /* ------------------------------------------------------
       ACTIVE CONVERSATION
       ------------------------------------------------------ */

    .hsu-messenger-chat{
        display:flex;
        flex-direction:column;

        width:100%;
        min-width:0;

        overflow:hidden;

        background:#0b0b0b;

        border:0;
    }


    /*
     * Contact header stays visually attached to chat.
     */

    .hsu-messenger-chat-head{
        position:sticky;
        top:0;
        z-index:5;

        min-height:76px;

        display:flex;
        align-items:center;

        padding:
            11px
            15px;

        background:
            linear-gradient(
                110deg,
                rgba(255,107,0,.10),
                rgba(15,15,15,.98) 48%,
                rgba(10,10,10,.98)
            );

        border-bottom:
            1px solid rgba(255,255,255,.09);

        box-shadow:
            0
            8px
            22px
            rgba(0,0,0,.16);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);
    }

    .hsu-messenger-chat-head::after{
        content:"";

        position:absolute;

        left:15px;
        right:15px;
        bottom:-1px;

        height:1px;

        background:
            linear-gradient(
                90deg,
                #ff6b00,
                rgba(255,107,0,0)
            );

        opacity:.72;
    }

    .hsu-messenger-chat-person{
        width:100%;
        min-width:0;

        display:flex;
        align-items:center;

        gap:12px;
    }

    .hsu-messenger-chat-avatar{
        position:relative;

        width:50px;
        height:50px;

        flex:
            0
            0
            50px;

        overflow:hidden;

        border:
            2px solid rgba(255,107,0,.72);

        border-radius:50%;

        background:#111;

        box-shadow:
            0
            0
            0
            4px
            rgba(255,107,0,.08);
    }

    .hsu-messenger-chat-person strong{
        overflow:hidden;

        color:#fff;

        font-size:17px;
        font-weight:950;
        line-height:1.12;
        letter-spacing:-.02em;

        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .hsu-messenger-chat-person small{
        margin-top:4px;

        color:
            rgba(255,255,255,.48);

        font-size:12px;
    }

    .hsu-messenger-partner-presence{
        margin-top:4px;

        font-size:11px;
    }

    .hsu-messenger-partner-presence.is-online{
        color:#fff;
    }


    /* ------------------------------------------------------
       MESSAGE WINDOW
       ------------------------------------------------------ */

    .hsu-messenger-messages{
        /*
         * The existing JS already treats this as the
         * scroll container. We only define its mobile
         * viewport, never change its behavior.
         */

        height:
            min(
                56dvh,
                620px
            );

        min-height:390px;

        overflow-y:auto;
        overflow-x:hidden;

        padding:
            22px
            13px
            20px;

        scroll-behavior:smooth;

        background:
            radial-gradient(
                circle at 90% 4%,
                rgba(255,107,0,.045),
                transparent 28%
            ),
            radial-gradient(
                circle at 5% 90%,
                rgba(255,255,255,.025),
                transparent 30%
            ),
            #0b0b0b;

        -webkit-overflow-scrolling:touch;
    }

    .hsu-message-row{
        display:flex;

        width:100%;

        margin:
            0
            0
            9px;
    }

    .hsu-message-row.mine{
        justify-content:flex-end;
    }

    .hsu-message-row.theirs{
        justify-content:flex-start;
    }

    .hsu-message-bubble{
        max-width:82%;

        padding:
            11px
            13px
            8px;

        border-radius:18px;

        box-shadow:
            0
            8px
            22px
            rgba(0,0,0,.15);
    }

    .hsu-message-row.mine
    .hsu-message-bubble{
        border-bottom-right-radius:5px;
    }

    .hsu-message-row.theirs
    .hsu-message-bubble{
        border-bottom-left-radius:5px;

        border:
            1px solid rgba(255,255,255,.055);
    }

    .hsu-message-bubble p{
        font-size:15px;
        line-height:1.42;
    }

    .hsu-message-bubble footer{
        margin-top:5px;

        font-size:10px;
    }


    /* Media belongs visually to message flow */

    .hsu-message-image-link{
        max-width:84%;

        border-radius:18px;

        overflow:hidden;
    }

    .hsu-message-image-link img{
        border-radius:18px;
    }

    .hsu-message-audio{
        max-width:
            min(
                88%,
                330px
            );

        border-radius:18px;
    }


    /* ------------------------------------------------------
       COMPOSER
       ------------------------------------------------------ */

    .hsu-messenger-compose{
        position:sticky;
        bottom:0;
        z-index:6;

        width:100%;

        display:grid;

        padding:
            11px
            12px
            max(
                11px,
                env(safe-area-inset-bottom)
            );

        background:
            rgba(8,8,8,.97);

        border-top:
            1px solid rgba(255,255,255,.09);

        box-shadow:
            0
            -12px
            30px
            rgba(0,0,0,.25);

        backdrop-filter:
            blur(16px);

        -webkit-backdrop-filter:
            blur(16px);
    }

    .hsu-messenger-compose textarea{
        min-height:46px;
        max-height:120px;

        border-radius:16px;

        background:
            rgba(255,255,255,.055);

        border:
            1px solid rgba(255,255,255,.12);
    }

    .hsu-messenger-compose textarea:focus{
        border-color:
            rgba(255,107,0,.68);

        box-shadow:
            0
            0
            0
            3px
            rgba(255,107,0,.08);
    }

    .hsu-messenger-media-button,
    .hsu-messenger-send-button{
        border-radius:14px;
    }

}


/* ----------------------------------------------------------
   SMALL IPHONE WIDTHS
   ---------------------------------------------------------- */

@media(max-width:390px){

    .hsu-messenger-conversation{
        flex-basis:168px;

        min-width:168px;
        max-width:168px;
    }

    .hsu-messenger-new-chat > strong{
        display:none;
    }

    .hsu-messenger-sidebar-head
    .hsu-messenger-new-chat{
        width:42px;

        padding:0;
    }

    .hsu-message-bubble{
        max-width:87%;
    }

    .hsu-messenger-messages{
        min-height:360px;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

    .hsu-messenger *,
    .hsu-messenger-conversations,
    .hsu-messenger-messages{
        scroll-behavior:auto !important;
        transition:none !important;
    }

}


/* ==========================================================
   HSU MESSENGER V3 · PREMIUM MOBILE CHAT
   Visual layer only.
   ========================================================== */

@media(max-width:760px){

    /* ------------------------------------------------------
       TOP
       ------------------------------------------------------ */

    .hsu-messenger{
        padding-top:24px;
    }

    .hsu-messenger-title{
        display:grid;
        grid-template-columns:1fr;
        gap:16px;

        margin:
            0
            5px
            24px;
    }

    .hsu-messenger-title h1{
        max-width:100%;

        font-size:
            clamp(
                38px,
                10.4vw,
                52px
            );

        line-height:.92;

        overflow-wrap:normal;
        word-break:normal;
    }

    .hsu-messenger-title p{
        margin-top:15px;

        max-width:330px;

        font-size:14px;
        line-height:1.5;
    }

    .hsu-messenger-title > .button{
        justify-self:end;

        width:auto;

        min-height:44px;

        padding:
            11px
            17px;

        border-radius:999px;
    }


    /* ------------------------------------------------------
       FULL CHAT SHELL
       ------------------------------------------------------ */

    .hsu-messenger-layout{
        overflow:visible;

        border-radius:26px;

        background:
            linear-gradient(
                180deg,
                #111 0,
                #090909 22%,
                #090909 100%
            );

        border:
            1px solid rgba(255,255,255,.13);

        box-shadow:
            0
            26px
            90px
            rgba(0,0,0,.45);
    }


    /* ------------------------------------------------------
       CHATS HEADER
       ------------------------------------------------------ */

    .hsu-messenger-sidebar{
        overflow:hidden;

        border-radius:
            26px
            26px
            0
            0;
    }

    .hsu-messenger-sidebar-head{
        min-height:70px;

        padding:
            13px
            15px
            10px
            18px;
    }

    .hsu-messenger-sidebar-head strong{
        font-size:19px;
    }


    /*
     * Explicit Neuer Chat pill.
     * Overrides old generic anchor dimensions.
     */

    .hsu-messenger-sidebar-head
    > a.hsu-messenger-new-chat{
        width:auto !important;
        min-width:128px !important;
        max-width:none !important;
        height:44px !important;

        flex:
            0
            0
            auto !important;

        display:inline-flex !important;
        align-items:center;
        justify-content:center;

        gap:6px;

        padding:
            0
            15px
            0
            9px !important;

        overflow:hidden;

        color:#050505 !important;
        background:
            linear-gradient(
                135deg,
                #ff6500,
                #ff8a18
            ) !important;

        border:0 !important;
        border-radius:999px !important;

        white-space:nowrap;

        box-shadow:
            0
            10px
            28px
            rgba(255,101,0,.22);
    }

    .hsu-messenger-new-chat > span{
        width:28px;
        height:28px;

        flex:
            0
            0
            28px;

        display:flex;
        align-items:center;
        justify-content:center;

        font-size:22px;
        font-weight:950;
    }

    .hsu-messenger-new-chat > strong{
        display:block !important;

        color:#050505 !important;

        font-size:12px !important;
        font-weight:950 !important;

        white-space:nowrap;
    }


    /* ------------------------------------------------------
       CONTACT RAIL – PEOPLE, NOT CARDS
       ------------------------------------------------------ */

    .hsu-messenger-conversations{
        align-items:flex-start;

        gap:8px;

        padding:
            10px
            12px
            16px;
    }

    .hsu-messenger-conversation{
        position:relative;

        flex:
            0
            0
            78px;

        width:78px;
        min-width:78px;
        max-width:78px;

        min-height:106px;

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:6px;

        padding:
            2px
            3px
            4px;

        overflow:visible;

        background:transparent;

        border:0;

        border-radius:0;

        box-shadow:none;
    }

    .hsu-messenger-conversation.active{
        background:transparent;

        border:0;

        box-shadow:none;
    }

    .hsu-messenger-conversation.active::before{
        display:none;
    }

    .hsu-messenger-mini-avatar{
        position:relative;

        width:58px;
        height:58px;

        flex:
            0
            0
            58px;

        margin-bottom:1px;

        border:
            2px solid rgba(255,255,255,.16);

        border-radius:50%;

        background:#111;

        box-shadow:
            0
            0
            0
            3px
            #0d0d0d;
    }

    .hsu-messenger-conversation.active
    .hsu-messenger-mini-avatar{
        border:
            3px solid #ff6b00;

        box-shadow:
            0
            0
            0
            3px
            #0d0d0d,
            0
            0
            0
            4px
            rgba(255,107,0,.22);
    }

    .hsu-messenger-conversation-copy{
        width:100%;

        display:flex;
        align-items:center;

        text-align:center;
    }

    .hsu-messenger-conversation-copy strong{
        width:100%;

        color:#fff;

        font-size:12px;
        font-weight:900;

        text-align:center;

        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .hsu-messenger-conversation-copy small{
        width:100%;

        margin-top:2px;

        color:
            rgba(255,255,255,.42);

        font-size:9px;
        line-height:1.25;

        text-align:center;

        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .hsu-messenger-unread{
        top:1px;
        right:7px;
        bottom:auto;

        min-width:18px;
        height:18px;

        padding:0 4px;

        border:
            2px solid #0d0d0d;
    }


    /* ------------------------------------------------------
       ACTIVE PERSON BAR
       ------------------------------------------------------ */

    .hsu-messenger-chat-head{
        position:relative;

        top:auto;

        min-height:78px;

        padding:
            12px
            15px;

        background:
            linear-gradient(
                110deg,
                rgba(255,107,0,.09),
                #101010 48%,
                #0d0d0d
            );

        border-top:
            1px solid rgba(255,255,255,.07);

        border-bottom:
            1px solid rgba(255,255,255,.09);

        box-shadow:none;
    }

    .hsu-messenger-chat-avatar{
        width:51px;
        height:51px;

        flex:
            0
            0
            51px;

        border:
            2px solid #ff6b00;

        box-shadow:
            0
            0
            0
            3px
            rgba(255,107,0,.08);
    }

    .hsu-messenger-chat-person strong{
        font-size:18px;
    }

    .hsu-messenger-chat-person small{
        font-size:11px;
    }

    .hsu-messenger-partner-presence.is-online{
        color:#38d75c;
    }


    /* ------------------------------------------------------
       CHAT CANVAS
       ------------------------------------------------------ */

    .hsu-messenger-messages{
        height:
            min(
                55dvh,
                590px
            );

        min-height:380px;

        padding:
            22px
            13px
            24px;

        background:
            radial-gradient(
                circle at 95% 5%,
                rgba(255,107,0,.055),
                transparent 26%
            ),
            linear-gradient(
                180deg,
                #0b0b0b,
                #090909
            );
    }

    .hsu-message-row{
        margin-bottom:11px;
    }

    .hsu-message-bubble{
        max-width:82%;

        border-radius:19px;

        box-shadow:none;
    }

    .hsu-message-row.mine
    .hsu-message-bubble{
        color:#050505;

        background:
            linear-gradient(
                135deg,
                #ff6500,
                #ff8618
            );

        border-bottom-right-radius:5px;
    }

    .hsu-message-row.theirs
    .hsu-message-bubble{
        color:#fff;

        background:#1b1b1b;

        border:
            1px solid rgba(255,255,255,.055);

        border-bottom-left-radius:5px;
    }

    .hsu-message-row.mine
    .hsu-message-bubble footer,
    .hsu-message-row.mine
    .hsu-message-read{
        color:
            rgba(5,5,5,.62);
    }

    .hsu-message-image-link{
        overflow:hidden;

        border:
            1px solid rgba(255,107,0,.62);

        border-radius:19px;
    }

    .hsu-message-image-link img{
        display:block;

        border-radius:18px;
    }

    .hsu-message-audio{
        border-radius:19px;
    }


    /* ------------------------------------------------------
       WHATSAPP-LIKE COMPOSER
       ------------------------------------------------------ */

    .hsu-messenger-compose{
        position:relative;

        display:grid;

        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;

        grid-template-areas:
            "actions input send"
            "record record record";

        align-items:center;

        gap:8px;

        padding:
            10px
            11px
            max(
                11px,
                env(safe-area-inset-bottom)
            );

        background:#0c0c0c;

        border-top:
            1px solid rgba(255,255,255,.08);

        box-shadow:
            0
            -10px
            28px
            rgba(0,0,0,.20);
    }

    .hsu-messenger-media-actions{
        grid-area:actions;

        display:flex;
        align-items:center;

        gap:5px;
    }

    .hsu-messenger-media-button{
        width:38px !important;
        height:38px !important;

        min-width:38px !important;
        min-height:38px !important;

        display:flex;
        align-items:center;
        justify-content:center;

        flex:
            0
            0
            38px;

        padding:0 !important;

        color:#ff6b00;

        background:
            rgba(255,255,255,.035);

        border:
            1px solid rgba(255,255,255,.10);

        border-radius:50%;

        font-size:19px;
    }

    .hsu-messenger-emoji-button{
        font-size:22px;
    }

    #hsuMessengerInput{
        grid-area:input;

        width:100%;

        min-height:44px;
        max-height:115px;

        margin:0;

        padding:
            11px
            13px;

        resize:none;

        color:#fff;

        background:
            rgba(255,255,255,.055);

        border:
            1px solid rgba(255,255,255,.10);

        border-radius:18px;

        font-size:15px;
        line-height:1.4;
    }

    #hsuMessengerInput::placeholder{
        color:
            rgba(255,255,255,.38);
    }

    .hsu-messenger-send-button{
        grid-area:send;

        width:44px !important;
        height:44px !important;

        min-width:44px !important;
        min-height:44px !important;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:0 !important;

        color:#050505;

        background:
            linear-gradient(
                135deg,
                #ff6500,
                #ff8618
            );

        border:0;

        border-radius:50%;

        font-size:20px;

        box-shadow:
            0
            8px
            22px
            rgba(255,107,0,.18);
    }

    .hsu-messenger-recording{
        grid-area:record;
    }


    /* ------------------------------------------------------
       EMOJI PICKER
       ------------------------------------------------------ */

    .hsu-messenger-emoji-picker{
        position:absolute;

        left:12px;
        bottom:
            calc(
                100%
                + 8px
            );

        z-index:30;

        width:
            min(
                300px,
                calc(100vw - 48px)
            );

        display:grid;
        grid-template-columns:
            repeat(
                8,
                1fr
            );

        gap:5px;

        padding:10px;

        background:
            rgba(22,22,22,.98);

        border:
            1px solid rgba(255,255,255,.13);

        border-radius:18px;

        box-shadow:
            0
            20px
            50px
            rgba(0,0,0,.55);

        backdrop-filter:
            blur(16px);

        -webkit-backdrop-filter:
            blur(16px);
    }

    .hsu-messenger-emoji-picker[hidden]{
        display:none !important;
    }

    .hsu-messenger-emoji-picker button{
        width:31px !important;
        height:31px !important;

        min-width:31px !important;
        min-height:31px !important;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:0 !important;

        color:inherit;
        background:
            rgba(255,255,255,.035);

        border:
            1px solid transparent;

        border-radius:9px;

        font-size:19px;
        line-height:1;

        box-shadow:none;
    }

    .hsu-messenger-emoji-picker button:active{
        background:
            rgba(255,107,0,.15);

        border-color:
            rgba(255,107,0,.45);
    }

}


/* ----------------------------------------------------------
   NARROW MOBILE
   ---------------------------------------------------------- */

@media(max-width:390px){

    .hsu-messenger-sidebar-head
    > a.hsu-messenger-new-chat{
        min-width:116px !important;

        padding-right:12px !important;
    }

    .hsu-messenger-new-chat > strong{
        display:block !important;

        font-size:11px !important;
    }

    .hsu-messenger-conversation{
        flex-basis:72px;

        width:72px;
        min-width:72px;
        max-width:72px;
    }

    .hsu-messenger-mini-avatar{
        width:54px;
        height:54px;

        flex-basis:54px;
    }

    .hsu-messenger-media-button{
        width:35px !important;
        height:35px !important;

        min-width:35px !important;
        min-height:35px !important;
    }

    .hsu-messenger-emoji-picker{
        grid-template-columns:
            repeat(
                6,
                1fr
            );
    }

}


/* =========================================================
   HSU HOME V2 · PERSONAL APP DASHBOARD
   ========================================================= */

.hsu-home-v2{
    --home-orange:#f47018;
    --home-dark:#090909;
    --home-panel:#151515;
    --home-line:rgba(255,255,255,.10);
    position:relative;
    overflow:hidden;
    padding:64px 0 48px;
    background:
        radial-gradient(circle at 88% 5%,rgba(244,112,24,.18),transparent 29%),
        linear-gradient(150deg,#080808,#101010 58%,#171717);
    color:#fff;
}

.hsu-home-v2 *,
.hsu-home-v2 *::before,
.hsu-home-v2 *::after{
    box-sizing:border-box;
}

.hsu-home-v2-glow{
    position:absolute;
    width:420px;
    height:420px;
    top:-220px;
    right:-180px;
    border-radius:50%;
    background:rgba(244,112,24,.14);
    filter:blur(80px);
    pointer-events:none;
}

.hsu-home-v2 .shell{
    position:relative;
    z-index:1;
}

.hsu-home-v2-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:28px;
    margin-bottom:28px;
}

.hsu-home-v2-kicker,
.hsu-home-v2-section-title > span,
.hsu-home-v2-section-title > div > span{
    display:block;
    margin-bottom:10px;
    color:var(--home-orange);
    font-size:10px;
    line-height:1;
    font-weight:950;
    letter-spacing:.18em;
}

.hsu-home-v2-head h1,
.hsu-home-v2-guest h1{
    margin:0;
    font-size:clamp(44px,6vw,76px);
    line-height:.94;
    letter-spacing:-.055em;
    font-weight:950;
}

.hsu-home-v2-head h1 span,
.hsu-home-v2-guest h1 span{
    color:var(--home-orange);
}

.hsu-home-v2-head p{
    margin:13px 0 0;
    color:rgba(255,255,255,.52);
    font-size:13px;
    font-weight:700;
}

.hsu-home-v2-profile{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    min-width:125px;
    padding:13px 15px;
    border:1px solid var(--home-line);
    border-radius:14px;
    background:rgba(255,255,255,.04);
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
    text-decoration:none;
}

.hsu-home-v2-profile b{
    color:var(--home-orange);
    font-size:16px;
}

.hsu-home-v2-match{
    overflow:hidden;
    margin-bottom:16px;
    padding:24px 26px;
    border:1px solid rgba(244,112,24,.28);
    border-radius:22px;
    background:
        linear-gradient(
            135deg,
            rgba(244,112,24,.13),
            rgba(255,255,255,.045)
        );
    box-shadow:0 22px 55px rgba(0,0,0,.22);
}

.hsu-home-v2.is-matchday .hsu-home-v2-match{
    border-color:rgba(244,112,24,.62);
    box-shadow:
        0 22px 55px rgba(0,0,0,.26),
        0 0 55px rgba(244,112,24,.08);
}

.hsu-home-v2-match-top{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
}

.hsu-home-v2-match-top span{
    display:block;
    margin-bottom:7px;
    color:var(--home-orange);
    font-size:9px;
    font-weight:950;
    letter-spacing:.17em;
}

.hsu-home-v2-match-top strong{
    font-size:14px;
}

.hsu-home-v2-match-top em{
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.62);
    font-size:9px;
    line-height:1;
    font-style:normal;
    font-weight:900;
    letter-spacing:.1em;
}

.hsu-home-v2-versus{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:24px;
    align-items:center;
    margin:30px 0 18px;
}

.hsu-home-v2-versus > div:last-child{
    text-align:right;
}

.hsu-home-v2-versus strong{
    display:block;
    font-size:clamp(25px,4vw,45px);
    line-height:1;
    letter-spacing:-.04em;
}

.hsu-home-v2-versus > span{
    color:var(--home-orange);
    font-size:11px;
    font-weight:950;
    letter-spacing:.12em;
}

.hsu-home-v2-match-meta{
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.55);
    font-size:12px;
    font-weight:750;
}

.hsu-home-v2-match-meta b{
    color:var(--home-orange);
}

.hsu-home-v2-matchday-live{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid var(--home-line);
}

.hsu-home-v2-matchday-live span,
.hsu-home-v2-matchday-live small{
    display:block;
}

.hsu-home-v2-matchday-live span{
    margin-bottom:5px;
    color:var(--home-orange);
    font-size:9px;
    font-weight:950;
    letter-spacing:.15em;
}

.hsu-home-v2-matchday-live strong{
    display:block;
    font-size:17px;
}

.hsu-home-v2-matchday-live small{
    margin-top:4px;
    color:rgba(255,255,255,.48);
    font-size:11px;
}

.hsu-home-v2-progress,
.hsu-home-v2-now,
.hsu-home-v2-quick{
    margin-top:30px;
}

.hsu-home-v2-section-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:13px;
}

.hsu-home-v2-section-title > span{
    margin:0;
}

.hsu-home-v2-section-title a{
    color:rgba(255,255,255,.52);
    font-size:10px;
    font-weight:800;
    text-decoration:none;
}

.hsu-home-v2-section-title h2{
    margin:0;
    font-size:clamp(26px,4vw,40px);
    line-height:1;
    letter-spacing:-.04em;
}

.hsu-home-v2-section-title h2 strong{
    color:var(--home-orange);
}

.hsu-home-v2-progress-grid{
    display:grid;
    grid-template-columns:1.5fr repeat(2,1fr);
    gap:9px;
}

.hsu-home-v2-progress-main,
.hsu-home-v2-progress-stat{
    display:block;
    min-width:0;
    padding:18px;
    border:1px solid var(--home-line);
    border-radius:17px;
    background:rgba(255,255,255,.045);
    color:#fff;
    text-decoration:none;
}

.hsu-home-v2-progress-main{
    border-color:rgba(244,112,24,.30);
    background:rgba(244,112,24,.10);
}

.hsu-home-v2-progress-grid small{
    display:block;
    margin-bottom:9px;
    color:rgba(255,255,255,.45);
    font-size:9px;
    font-weight:950;
    letter-spacing:.13em;
}

.hsu-home-v2-progress-grid strong{
    display:block;
    overflow:hidden;
    color:#fff;
    font-size:clamp(23px,3vw,34px);
    line-height:1;
    letter-spacing:-.035em;
    text-overflow:ellipsis;
}

.hsu-home-v2-progress-main strong{
    color:var(--home-orange);
}

.hsu-home-v2-progress-grid span{
    display:block;
    margin-top:7px;
    color:rgba(255,255,255,.45);
    font-size:10px;
}

.hsu-home-v2-priority{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.hsu-home-v2-priority-card{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    align-items:center;
    gap:13px;
    min-height:88px;
    padding:15px;
    border:1px solid var(--home-line);
    border-radius:16px;
    background:rgba(255,255,255,.045);
    color:#fff;
    text-decoration:none;
}

.hsu-home-v2-priority-card.is-hot{
    border-color:rgba(244,112,24,.34);
    background:
        linear-gradient(
            135deg,
            rgba(244,112,24,.13),
            rgba(255,255,255,.04)
        );
}

.hsu-home-v2-priority-card.is-calm{
    grid-column:1/-1;
}

.hsu-home-v2-priority-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:13px;
    background:rgba(255,255,255,.08);
    color:var(--home-orange);
    font-size:15px;
    font-weight:950;
}

.hsu-home-v2-priority-card.is-hot
.hsu-home-v2-priority-icon{
    background:var(--home-orange);
    color:#111;
}

.hsu-home-v2-priority-card small{
    display:block;
    margin-bottom:3px;
    color:rgba(255,255,255,.42);
    font-size:8px;
    font-weight:950;
    letter-spacing:.13em;
}

.hsu-home-v2-priority-card strong{
    display:block;
    font-size:14px;
}

.hsu-home-v2-priority-card p{
    overflow:hidden;
    margin:4px 0 0;
    color:rgba(255,255,255,.47);
    font-size:10px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.hsu-home-v2-priority-card > b{
    color:var(--home-orange);
}

.hsu-home-v2-quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

.hsu-home-v2-quick-grid > a{
    position:relative;
    display:flex;
    min-height:78px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    border:1px solid var(--home-line);
    border-radius:15px;
    background:rgba(255,255,255,.04);
    color:#fff;
    text-decoration:none;
}

.hsu-home-v2-quick-grid > a > span{
    color:var(--home-orange);
    font-size:17px;
    font-weight:950;
}

.hsu-home-v2-quick-grid > a > strong{
    font-size:10px;
}

.hsu-home-v2-quick-grid > a > b{
    position:absolute;
    top:8px;
    right:8px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:var(--home-orange);
    color:#111;
    font-size:9px;
    line-height:18px;
    text-align:center;
}

.hsu-home-v2-guest{
    max-width:760px;
}

.hsu-home-v2-guest p{
    max-width:600px;
    margin:22px 0 0;
    color:rgba(255,255,255,.62);
    font-size:16px;
    line-height:1.55;
}

.hsu-home-v2-guest > div{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:26px;
}

@media (hover:hover){

    .hsu-home-v2-profile:hover,
    .hsu-home-v2-progress-main:hover,
    .hsu-home-v2-progress-stat:hover,
    .hsu-home-v2-priority-card:hover,
    .hsu-home-v2-quick-grid > a:hover{
        border-color:rgba(244,112,24,.48);
        transform:translateY(-2px);
    }
}

.hsu-home-v2 a:focus-visible{
    outline:3px solid rgba(244,112,24,.72);
    outline-offset:3px;
}

@media (max-width:700px){

    .hsu-home-v2{
        padding:36px 0 30px;
    }

    .hsu-home-v2-head{
        align-items:center;
        margin-bottom:22px;
    }

    .hsu-home-v2-head h1{
        font-size:clamp(39px,12vw,56px);
    }

    .hsu-home-v2-profile{
        min-width:auto;
        padding:11px 12px;
    }

    .hsu-home-v2-profile span{
        display:none;
    }

    .hsu-home-v2-match{
        padding:19px 17px;
        border-radius:19px;
    }

    .hsu-home-v2-versus{
        gap:12px;
        margin:25px 0 15px;
    }

    .hsu-home-v2-versus strong{
        font-size:clamp(22px,7vw,31px);
    }

    .hsu-home-v2-matchday-live{
        display:block;
    }

    .hsu-home-v2-matchday-live .button{
        width:100%;
        margin-top:15px;
    }

    .hsu-home-v2-progress{
        margin-top:24px;
    }

    .hsu-home-v2-progress-grid{
        grid-template-columns:1.4fr 1fr 1fr;
        gap:6px;
    }

    .hsu-home-v2-progress-main,
    .hsu-home-v2-progress-stat{
        padding:14px 11px;
        border-radius:14px;
    }

    .hsu-home-v2-progress-grid strong{
        font-size:21px;
    }

    .hsu-home-v2-progress-grid span{
        font-size:8px;
    }

    .hsu-home-v2-priority{
        grid-template-columns:1fr;
        gap:7px;
    }

    .hsu-home-v2-priority-card{
        min-height:79px;
        padding:13px;
    }

    .hsu-home-v2-quick-grid{
        grid-template-columns:repeat(4,1fr);
        gap:5px;
    }

    .hsu-home-v2-quick-grid > a{
        min-height:70px;
        border-radius:13px;
    }

    .hsu-home-v2-section-title h2{
        font-size:29px;
    }
}

@media (max-width:390px){

    .hsu-home-v2-progress-grid{
        grid-template-columns:1.25fr 1fr;
    }

    .hsu-home-v2-progress-main{
        grid-column:1/-1;
    }

    .hsu-home-v2-match-top{
        gap:10px;
    }

    .hsu-home-v2-match-top em{
        font-size:8px;
    }
}


/* =========================================================
   HSU HOME V2 · REAL DEVICE MOBILE SPACING FIX V1
   Prevent global section rules from creating oversized
   vertical gaps inside the personal dashboard.
   ========================================================= */

.hsu-home-v2 .hsu-home-v2-progress,
.hsu-home-v2 .hsu-home-v2-now,
.hsu-home-v2 .hsu-home-v2-quick{
    min-height:0;
    padding-top:0;
    padding-bottom:0;
}

.hsu-home-v2 .hsu-home-v2-progress{
    margin-top:30px;
}

.hsu-home-v2 .hsu-home-v2-now{
    margin-top:34px;
}

.hsu-home-v2 .hsu-home-v2-quick{
    margin-top:30px;
    margin-bottom:0;
}

@media (max-width:700px){

    .hsu-home-v2 .hsu-home-v2-progress{
        margin-top:24px;
    }

    .hsu-home-v2 .hsu-home-v2-now{
        margin-top:30px;
    }

    .hsu-home-v2 .hsu-home-v2-quick{
        margin-top:26px;
    }
}

/* =========================================================
   HSU MOBILE FINAL POLISH
   Contrast + HOME match orientation
   ========================================================= */

.hsu-home-v2-versus > div small{
    display:block;
    margin-top:8px;
    color:rgba(255,255,255,.42);
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}


/* =========================================================
   HSU HOME V2 · MATCH TIP CONTEXT V1
   ========================================================= */

.hsu-home-v2-match-tip{
    display:flex;
    align-items:center;
    gap:12px;
    width:fit-content;
    margin-top:18px;
    padding:11px 15px;
    border:1px solid rgba(255,112,0,.32);
    border-radius:14px;
    background:rgba(255,112,0,.07);
    color:#fff;
    text-decoration:none;
}

.hsu-home-v2-match-tip span{
    color:#ff7000;
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
}

.hsu-home-v2-match-tip strong{
    font-size:18px;
    line-height:1;
}

.hsu-home-v2-match-tip small{
    margin-left:auto;
    color:rgba(255,255,255,.55);
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

@media (max-width:700px){

    .hsu-home-v2-match-tip{
        width:100%;
        box-sizing:border-box;
    }
}


/* =========================================================
   HSU MOBILE COMPACT APP MENU V2
   Real-device compact navigation.
   Desktop remains unchanged.
   ========================================================= */

.hsu-mobile-compact-menu,
.hsu-mobile-grow-card,
.hsu-mobile-bottom-dock{
    display:none;
}


@media (max-width:1100px){

    /*
     * Main menu becomes a compact scrollable app drawer.
     */

    .main-nav{
        padding-bottom:104px !important;
    }


    /*
     * Logged-in personal block first.
     */

    .main-nav .hsu-header-account{
        order:-20;
        width:100%;
        margin:0 0 14px;
    }

    .main-nav .hsu-header-account[open]
    .hsu-header-account-menu{
        padding:
            18px
            16px
            8px !important;
    }


    /*
     * Hide the former tall personal menu only on mobile.
     * It stays in DOM and remains desktop-authoritative.
     */

    .hsu-header-account-menu
    > .hsu-header-account-menu-head,

    .hsu-header-account-menu
    > .hsu-header-quick-link,

    .hsu-header-account-menu
    > .hsu-account-menu-link,

    .hsu-header-account-menu
    > .hsu-header-account-logout{
        display:none !important;
    }


    /*
     * New compact personal menu.
     */

    .hsu-mobile-compact-menu{
        display:block;
        width:100%;
    }


    .hsu-mobile-compact-profile{
        display:block;
        padding:16px;
        border:
            1px solid
            rgba(255,112,0,.72);
        border-radius:22px;
        background:
            linear-gradient(
                135deg,
                rgba(255,112,0,.12),
                rgba(255,112,0,.025)
            );
        color:#fff;
        text-decoration:none;
    }


    .hsu-mobile-compact-profile-top{
        display:grid;
        grid-template-columns:
            54px
            minmax(0,1fr)
            auto;
        gap:12px;
        align-items:center;
    }


    .hsu-mobile-compact-avatar{
        display:block;
        width:54px;
        height:54px;
        border:
            2px solid
            #ff7000;
        border-radius:50%;
        overflow:hidden;
    }


    .hsu-mobile-compact-avatar img{
        display:block;
        width:100%;
        height:100%;
        object-fit:cover;
    }


    .hsu-mobile-compact-profile-top > strong{
        min-width:0;
        font-size:24px;
        line-height:1;
        font-weight:900;
        letter-spacing:-.025em;
    }


    .hsu-mobile-compact-profile-top > small{
        padding:7px 10px;
        border-radius:999px;
        background:
            rgba(255,255,255,.07);
        color:
            rgba(255,255,255,.48);
        font-size:10px;
        font-weight:850;
        letter-spacing:.04em;
        white-space:nowrap;
    }


    .hsu-mobile-compact-stats{
        display:grid;
        grid-template-columns:
            repeat(3,1fr);
        margin-top:16px;
        padding-top:15px;
        border-top:
            1px solid
            rgba(255,255,255,.08);
    }


    .hsu-mobile-compact-stats > span{
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        min-width:0;
    }


    .hsu-mobile-compact-stats > span
    + span::before{
        content:"";
        position:absolute;
        left:0;
        top:4px;
        bottom:4px;
        width:1px;
        background:
            rgba(255,255,255,.11);
    }


    .hsu-mobile-compact-stats strong{
        color:#ff8a34;
        font-size:18px;
        font-weight:900;
        line-height:1;
    }


    .hsu-mobile-compact-stats small{
        margin-top:6px;
        color:
            rgba(255,255,255,.48);
        font-size:10px;
        font-weight:700;
    }


    .hsu-mobile-compact-label{
        display:block;
        margin:
            22px
            2px
            10px;
        color:
            rgba(255,255,255,.46);
        font-size:11px;
        font-weight:900;
        letter-spacing:.13em;
    }


    /*
     * 2 x 4 quick grid.
     */

    .hsu-mobile-compact-grid{
        display:grid;
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap:9px;
    }


    .hsu-mobile-compact-grid > a{
        position:relative;
        display:flex;
        align-items:center;
        gap:10px;
        min-height:68px;
        padding:12px;
        border:
            1px solid
            rgba(255,255,255,.09);
        border-radius:16px;
        background:#121212;
        color:#fff;
        text-decoration:none;
    }


    .hsu-mobile-compact-grid > a:active{
        transform:scale(.985);
    }


    .hsu-mobile-compact-grid i{
        display:grid;
        place-items:center;
        flex:0 0 32px;
        width:32px;
        height:32px;
        border-radius:10px;
        background:
            rgba(255,255,255,.045);
        color:#ff7000;
        font-style:normal;
        font-size:17px;
        font-weight:900;
    }


    .hsu-mobile-compact-grid i.is-hsu{
        font-size:12px;
        letter-spacing:.03em;
    }


    .hsu-mobile-compact-grid strong{
        min-width:0;
        font-size:13px;
        line-height:1.12;
        font-weight:800;
    }


    .hsu-mobile-compact-grid b{
        position:absolute;
        right:8px;
        top:8px;
        display:grid;
        place-items:center;
        min-width:19px;
        height:19px;
        padding:0 5px;
        border-radius:999px;
        background:#ff7000;
        color:#090909;
        font-size:9px;
        font-weight:900;
    }


    .hsu-mobile-compact-grid
    > a.has-unread{
        border-color:
            rgba(255,112,0,.46);
    }


    .hsu-mobile-compact-after{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:12px;
    }


    .hsu-mobile-compact-logout{
        margin-bottom:8px;
        color:
            rgba(255,255,255,.32);
        font-size:11px;
        font-weight:700;
        text-decoration:none;
    }


    /*
     * Existing public nav becomes compact "Entdecken".
     */

    .main-nav > a:not(.nav-cta):not(.hsu-mobile-grow-card),
    .main-nav > .nav-parent{
        min-height:52px !important;
        margin:0 16px 6px !important;
        border:
            1px solid
            rgba(255,255,255,.075) !important;
        border-radius:14px !important;
        background:#111 !important;
    }


    .main-nav > a:not(.nav-cta):not(.hsu-mobile-grow-card){
        display:flex !important;
        align-items:center !important;
        padding:
            0
            16px !important;
        font-size:15px !important;
        font-weight:800 !important;
    }


    .main-nav > a[href="/"]::before{
        content:"⌂";
        margin-right:13px;
        color:#fff;
        font-size:19px;
    }


    .main-nav > a[href="/matchcenter.php"]::before{
        content:"◎";
        margin-right:13px;
        color:#fff;
        font-size:19px;
    }


    .main-nav > a[href="/fanzone.php"]::before{
        content:"♜";
        margin-right:13px;
        color:#fff;
        font-size:18px;
    }


    .main-nav > .nav-parent > button{
        min-height:50px !important;
        padding:
            0
            16px !important;
        font-size:15px !important;
        font-weight:800 !important;
    }


    .main-nav > .nav-parent:first-of-type
    > button::before{
        content:"◎";
        margin-right:13px;
        font-size:18px;
    }


    .main-nav > .nav-parent:nth-of-type(2)
    > button::before{
        content:"♢";
        margin-right:13px;
        font-size:18px;
    }


    /*
     * Dropdowns remain collapsible.
     */

    .main-nav .nav-dropdown{
        margin:
            0
            8px
            8px !important;
    }


    /*
     * Growth card.
     */

    .hsu-mobile-grow-card{
        order:80;
        display:grid;
        grid-template-columns:
            40px
            minmax(0,1fr)
            auto;
        gap:12px;
        align-items:center;
        margin:
            12px
            16px
            10px;
        padding:
            14px
            15px;
        border:
            1px solid
            rgba(255,255,255,.08);
        border-radius:16px;
        background:
            linear-gradient(
                120deg,
                #111,
                rgba(255,112,0,.08)
            );
        color:#fff;
        text-decoration:none;
    }


    .hsu-mobile-grow-card > span:first-child{
        display:grid;
        place-items:center;
        width:40px;
        height:40px;
        border:
            1px solid
            rgba(255,255,255,.10);
        border-radius:12px;
        color:
            rgba(255,255,255,.38);
        font-size:22px;
    }


    .hsu-mobile-grow-card strong,
    .hsu-mobile-grow-card small{
        display:block;
    }


    .hsu-mobile-grow-card strong{
        font-size:13px;
        font-weight:850;
    }


    .hsu-mobile-grow-card small{
        margin-top:3px;
        color:
            rgba(255,255,255,.47);
        font-size:10px;
    }


    .hsu-mobile-grow-card > b{
        color:
            rgba(255,255,255,.55);
        font-size:24px;
    }


    /*
     * Existing sponsor CTA becomes compact.
     */

    .main-nav > .nav-cta{
        order:90;
        min-height:48px !important;
        margin:
            0
            16px
            18px !important;
        border-radius:14px !important;
        font-size:14px !important;
    }


    /*
     * Bottom app dock.
     */

    .hsu-mobile-bottom-dock{
        position:fixed;
        z-index:9999;
        left:0;
        right:0;
        bottom:0;
        display:grid;
        grid-template-columns:
            1fr
            1fr
            1fr
            1fr
            1fr;
        align-items:end;
        min-height:74px;
        padding:
            9px
            max(12px,env(safe-area-inset-right))
            calc(
                8px
                + env(safe-area-inset-bottom)
            )
            max(12px,env(safe-area-inset-left));
        border-top:
            1px solid
            rgba(255,255,255,.075);
        background:
            rgba(12,12,12,.97);
        backdrop-filter:
            blur(18px);
    }


    .hsu-mobile-bottom-dock > a{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-end;
        gap:3px;
        min-width:0;
        color:
            rgba(255,255,255,.58);
        text-decoration:none;
        font-size:9px;
        font-weight:700;
    }


    .hsu-mobile-bottom-dock i{
        font-style:normal;
        font-size:20px;
        line-height:1;
    }


    .hsu-mobile-bottom-dock
    .hsu-mobile-bottom-plus{
        align-self:center;
        justify-content:center;
    }


    .hsu-mobile-bottom-dock
    .hsu-mobile-bottom-plus i{
        display:grid;
        place-items:center;
        width:48px;
        height:48px;
        border-radius:50%;
        background:#ff7000;
        color:#fff;
        box-shadow:
            0
            8px
            28px
            rgba(255,112,0,.28);
        font-size:32px;
        font-weight:400;
    }


    /*
     * Keep existing account summary invisible in the open
     * mobile drawer because the compact hero replaces it.
     */

    .main-nav
    .hsu-header-account
    > summary{
        display:none !important;
    }

}


@media (max-width:520px){

    .hsu-mobile-compact-profile-top{
        grid-template-columns:
            50px
            minmax(0,1fr)
            auto;
    }

    .hsu-mobile-compact-avatar{
        width:50px;
        height:50px;
    }

    .hsu-mobile-compact-profile-top > strong{
        font-size:22px;
    }

    .hsu-mobile-compact-profile-top > small{
        padding:6px 8px;
        font-size:9px;
    }

    .hsu-mobile-compact-grid > a{
        min-height:64px;
    }

}


/* =========================================================
   HSU MOBILE MENU · PREMIUM COMPACT V2.1

   Ziele:
   - weniger vertikaler Scrollweg
   - Fanzone schneller erreichbar
   - kein Bottom-Dock-Overlap
   - hochwertigere Abstände
   - vorhandene Links / Logik unverändert
   ========================================================= */

@media (max-width:1100px){

    /*
     * DRAWER
     */

    .main-nav{
        overflow-y:auto !important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;

        padding-top:12px !important;

        padding-bottom:
            calc(
                92px
                + env(safe-area-inset-bottom)
            ) !important;
    }


    /*
     * ACCOUNT WRAPPER
     */

    .main-nav .hsu-header-account{
        margin:
            0
            0
            8px !important;
    }

    .main-nav
    .hsu-header-account[open]
    .hsu-header-account-menu{
        padding:
            10px
            14px
            4px !important;
    }


    /*
     * PROFILE HERO
     */

    .hsu-mobile-compact-profile{
        position:relative;

        padding:
            13px
            14px
            12px;

        border-radius:20px;

        background:
            radial-gradient(
                circle at 85% 0%,
                rgba(255,112,0,.10),
                transparent 38%
            ),
            linear-gradient(
                135deg,
                rgba(255,112,0,.09),
                rgba(255,255,255,.018)
            );
    }


    .hsu-mobile-compact-profile::after{
        content:"›";

        position:absolute;
        right:15px;
        top:17px;

        color:
            rgba(255,255,255,.62);

        font-size:27px;
        line-height:1;
        font-weight:400;
    }


    .hsu-mobile-compact-profile-top{
        grid-template-columns:
            48px
            minmax(0,1fr)
            auto;

        gap:11px;

        padding-right:24px;
    }


    .hsu-mobile-compact-avatar{
        width:48px;
        height:48px;
    }


    .hsu-mobile-compact-profile-top > strong{
        font-size:22px;
    }


    .hsu-mobile-compact-profile-top > small{
        padding:
            6px
            9px;

        font-size:9px;

        background:
            rgba(255,255,255,.065);
    }


    /*
     * PROFILE STATS
     */

    .hsu-mobile-compact-stats{
        margin-top:11px;
        padding-top:11px;
    }


    .hsu-mobile-compact-stats strong{
        font-size:17px;
    }


    .hsu-mobile-compact-stats small{
        margin-top:4px;
        font-size:9px;
    }


    /*
     * LABELS
     */

    .hsu-mobile-compact-label{
        margin:
            16px
            2px
            8px;

        font-size:10px;
        letter-spacing:.15em;
    }


    /*
     * QUICK GRID
     *
     * Vorher auf echtem iPhone zu hoch.
     */

    .hsu-mobile-compact-grid{
        gap:7px;
    }


    .hsu-mobile-compact-grid > a{
        min-height:56px;

        padding:
            9px
            10px;

        gap:8px;

        border-radius:14px;

        background:
            linear-gradient(
                145deg,
                #151515,
                #111
            );
    }


    .hsu-mobile-compact-grid i{
        flex-basis:29px;

        width:29px;
        height:29px;

        border-radius:9px;

        font-size:15px;
    }


    .hsu-mobile-compact-grid i.is-hsu{
        font-size:11px;
    }


    .hsu-mobile-compact-grid strong{
        font-size:12.5px;
        line-height:1.08;
    }


    .hsu-mobile-compact-grid b{
        right:6px;
        top:6px;

        min-width:17px;
        height:17px;

        font-size:8px;
    }


    /*
     * ENTDECKEN + LOGOUT
     */

    .hsu-mobile-compact-after{
        min-height:31px;

        align-items:center;
    }


    .hsu-mobile-compact-after
    .hsu-mobile-compact-label{
        margin-top:15px;
        margin-bottom:7px;
    }


    .hsu-mobile-compact-logout{
        margin:
            13px
            2px
            7px
            auto;

        color:
            rgba(255,255,255,.30);

        font-size:10px;
    }


    /*
     * PUBLIC NAV CARDS
     */

    .main-nav
    > a:not(.nav-cta):not(.hsu-mobile-grow-card),

    .main-nav
    > .nav-parent{

        min-height:45px !important;

        margin:
            0
            14px
            5px !important;

        border-radius:13px !important;
    }


    .main-nav
    > a:not(.nav-cta):not(.hsu-mobile-grow-card){

        padding:
            0
            13px !important;

        font-size:14px !important;
    }


    .main-nav
    > .nav-parent
    > button{

        min-height:43px !important;

        padding:
            0
            13px !important;

        font-size:14px !important;
    }


    /*
     * Fanzone bewusst hervorheben.
     *
     * Sie ist das Hauptziel für Mitglieder.
     */

    .main-nav > a[href="/fanzone.php"]{
        border-color:
            rgba(255,112,0,.42) !important;

        background:
            linear-gradient(
                100deg,
                rgba(255,112,0,.10),
                #111 44%
            ) !important;
    }


    .main-nav > a[href="/fanzone.php"]::before{
        color:#ff7000 !important;
    }


    /*
     * Dropdown-Untermenüs
     */

    .main-nav .nav-dropdown{
        margin:
            0
            6px
            6px !important;
    }


    /*
     * GROWTH CARD
     */

    .hsu-mobile-grow-card{
        min-height:54px;

        margin:
            9px
            14px
            7px;

        padding:
            10px
            12px;

        grid-template-columns:
            35px
            minmax(0,1fr)
            auto;

        gap:10px;

        border-radius:14px;
    }


    .hsu-mobile-grow-card
    > span:first-child{
        width:35px;
        height:35px;

        border-radius:10px;

        font-size:18px;
    }


    .hsu-mobile-grow-card strong{
        font-size:12.5px;
    }


    .hsu-mobile-grow-card small{
        margin-top:2px;
        font-size:9px;
    }


    .hsu-mobile-grow-card > b{
        font-size:20px;
    }


    /*
     * SPONSOR CTA
     */

    .main-nav > .nav-cta{
        min-height:44px !important;

        margin:
            0
            14px
            12px !important;

        border-radius:13px !important;

        font-size:13px !important;

        box-shadow:
            0
            8px
            22px
            rgba(255,112,0,.10) !important;
    }


    /*
     * BOTTOM DOCK
     *
     * Kleiner und sauber oberhalb des
     * iPhone Safe Areas.
     */

    .hsu-mobile-bottom-dock{
        min-height:62px;

        padding:
            7px
            12px
            calc(
                6px
                + env(safe-area-inset-bottom)
            );

        background:
            rgba(10,10,10,.985);

        box-shadow:
            0
            -8px
            30px
            rgba(0,0,0,.42);
    }


    .hsu-mobile-bottom-dock > a{
        gap:2px;

        font-size:8px;
    }


    .hsu-mobile-bottom-dock i{
        font-size:18px;
    }


    .hsu-mobile-bottom-dock
    .hsu-mobile-bottom-plus i{

        width:44px;
        height:44px;

        font-size:28px;

        box-shadow:
            0
            8px
            22px
            rgba(255,112,0,.30);
    }


    /*
     * Home ist aktiver Einstieg.
     */

    .hsu-mobile-bottom-dock
    > a:first-child{
        color:#ff7000;
    }


    /*
     * Drawer-Inhalt darf niemals vom Dock
     * verdeckt werden.
     */

    .main-nav > *:last-child{
        margin-bottom:
            calc(
                76px
                + env(safe-area-inset-bottom)
            ) !important;
    }

}


/*
 * SMALL iPHONE
 */

@media (max-width:430px){

    .main-nav
    .hsu-header-account[open]
    .hsu-header-account-menu{
        padding-left:11px !important;
        padding-right:11px !important;
    }


    .hsu-mobile-compact-profile{
        padding:
            11px
            12px;
    }


    .hsu-mobile-compact-profile-top{
        grid-template-columns:
            44px
            minmax(0,1fr)
            auto;
    }


    .hsu-mobile-compact-avatar{
        width:44px;
        height:44px;
    }


    .hsu-mobile-compact-profile-top > strong{
        font-size:20px;
    }


    .hsu-mobile-compact-profile-top > small{
        font-size:8px;
    }


    .hsu-mobile-compact-stats strong{
        font-size:16px;
    }


    .hsu-mobile-compact-grid > a{
        min-height:53px;
    }


    .hsu-mobile-compact-grid strong{
        font-size:12px;
    }

}

/* =========================================================
   HSU MOBILE MEMBER MENU · HIDE PARTNER CTA V1
   Sponsor acquisition is irrelevant inside the logged-in
   member navigation. Public website CTA remains unchanged.
   ========================================================= */

@media (max-width:1100px){

    .main-nav:has(.hsu-mobile-compact-menu)
    > .nav-cta{
        display:none !important;
    }

    .main-nav:has(.hsu-mobile-compact-menu)
    > *:last-child{
        margin-bottom:
            calc(
                76px
                + env(safe-area-inset-bottom)
            ) !important;
    }

}


/* =========================================================
   HSU MOBILE NAV · FINAL ACCORDION FLOW V2

   AUTHORITATIVE MOBILE RULESET

   Problem:
   Mehrere historische Mobile-Dropdown-Regeln konkurrieren
   miteinander. Das Dropdown wird sichtbar, erweitert aber
   den nav-parent nicht zuverlässig.

   Lösung:
   Jeder nav-parent ist ein echtes Grid.
   Bei mobile-open erhält das Dropdown eine zweite,
   intrinsisch hohe Grid-Zeile.

   Ergebnis:
   Teams
     HSU
     HSU Amateure
   Matchcenter
   Fanzone
   Verein

   Keine Überlagerung.
   ========================================================= */

@media (max-width:1100px){

    /*
     * Hauptnavigation zwingend als normaler
     * vertikaler Dokumentfluss.
     */

    .main-nav.open{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
    }


    /*
     * JEDER Accordion-Parent besitzt seine
     * eigene reale Höhe.
     */

    .main-nav > .nav-parent{
        position:relative !important;

        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-rows:auto !important;

        align-items:stretch !important;
        align-content:start !important;

        width:auto !important;

        height:auto !important;
        min-height:45px !important;
        max-height:none !important;

        overflow:visible !important;

        box-sizing:border-box !important;
    }


    /*
     * Button = erste Grid-Zeile.
     */

    .main-nav > .nav-parent > button{
        position:relative !important;

        grid-column:1 !important;
        grid-row:1 !important;

        width:100% !important;

        margin:0 !important;

        z-index:1 !important;
    }


    /*
     * DEFAULT:
     * Dropdown vollständig aus dem Layout entfernen.
     *
     * Wir überschreiben hier bewusst ALLE älteren
     * Hover-, Focus- und Fallback-Regeln.
     */

    .main-nav
    > .nav-parent
    > .nav-dropdown,

    .main-nav
    > .nav-parent:hover
    > .nav-dropdown,

    .main-nav
    > .nav-parent:focus-within
    > .nav-dropdown{

        position:static !important;

        grid-column:1 !important;
        grid-row:2 !important;

        display:none !important;

        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        height:0 !important;
        min-height:0 !important;
        max-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        border:0 !important;

        overflow:hidden !important;

        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;

        transform:none !important;
        translate:none !important;

        z-index:auto !important;
    }


    /*
     * OPEN:
     * zweite Grid-Zeile wird realer Bestandteil
     * der Navigation.
     *
     * Dadurch wächst .nav-parent automatisch.
     */

    .main-nav
    > .nav-parent.mobile-open{

        grid-template-rows:
            auto
            auto !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        overflow:visible !important;

        padding-bottom:5px !important;
    }


    .main-nav
    > .nav-parent.mobile-open
    > .nav-dropdown,

    .main-nav
    > .nav-parent.mobile-open:hover
    > .nav-dropdown,

    .main-nav
    > .nav-parent.mobile-open:focus-within
    > .nav-dropdown{

        position:static !important;

        grid-column:1 !important;
        grid-row:2 !important;

        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;

        gap:5px !important;

        width:100% !important;

        height:auto !important;
        min-height:min-content !important;
        max-height:none !important;

        margin:
            1px
            0
            0 !important;

        padding:
            5px
            7px
            7px !important;

        box-sizing:border-box !important;

        border:0 !important;
        border-top:
            1px solid
            rgba(255,255,255,.065) !important;

        border-radius:
            0
            0
            12px
            12px !important;

        background:
            rgba(255,255,255,.018) !important;

        overflow:visible !important;

        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;

        transform:none !important;
        translate:none !important;

        z-index:auto !important;
    }


    /*
     * Unterpunkte echte Grid-Items,
     * niemals absolut positioniert.
     */

    .main-nav
    > .nav-parent.mobile-open
    > .nav-dropdown
    > a{

        position:relative !important;

        display:grid !important;
        grid-template-columns:
            minmax(0,1fr)
            auto !important;

        grid-template-rows:
            auto
            auto !important;

        column-gap:10px !important;

        width:100% !important;

        min-height:42px !important;

        margin:0 !important;

        padding:
            8px
            10px !important;

        box-sizing:border-box !important;

        border:
            1px solid
            rgba(255,255,255,.055) !important;

        border-radius:10px !important;

        background:
            rgba(255,255,255,.025) !important;

        color:#fff !important;

        z-index:auto !important;
    }


    .main-nav
    > .nav-parent.mobile-open
    > .nav-dropdown
    > a
    > span{

        grid-column:1 !important;
        grid-row:1 !important;

        font-size:13px !important;
        font-weight:850 !important;
        line-height:1.15 !important;
    }


    .main-nav
    > .nav-parent.mobile-open
    > .nav-dropdown
    > a
    > small{

        grid-column:1 !important;
        grid-row:2 !important;

        margin-top:2px !important;

        color:
            rgba(255,255,255,.37) !important;

        font-size:9px !important;
        font-weight:650 !important;
        line-height:1.15 !important;
    }


    .main-nav
    > .nav-parent.mobile-open
    > .nav-dropdown
    > a::after{

        content:"›" !important;

        grid-column:2 !important;
        grid-row:1 / span 2 !important;

        align-self:center !important;

        margin:0 !important;
        padding:0 !important;

        color:
            rgba(255,255,255,.34) !important;

        font-size:20px !important;
        line-height:1 !important;
    }


    /*
     * Alle NACHFOLGENDEN Hauptnavigationselemente
     * bleiben im normalen Flex-Flow.
     */

    .main-nav > .nav-parent,
    .main-nav > a{
        flex:
            0
            0
            auto !important;
    }


    /*
     * Open-State optisch sauber.
     */

    .main-nav
    > .nav-parent.mobile-open{

        border-color:
            rgba(255,112,0,.28) !important;

        background:
            linear-gradient(
                105deg,
                rgba(255,112,0,.055),
                #111 45%
            ) !important;
    }


    .main-nav
    > .nav-parent.mobile-open
    > button{

        color:#ff7000 !important;
    }


    .main-nav
    > .nav-parent.mobile-open
    > button::after{

        content:"−" !important;
        color:#ff7000 !important;
    }

}


/*
 * Kleine iPhones
 */

@media (max-width:430px){

    .main-nav
    > .nav-parent.mobile-open
    > .nav-dropdown{

        padding:
            4px
            6px
            6px !important;

        gap:4px !important;
    }


    .main-nav
    > .nav-parent.mobile-open
    > .nav-dropdown
    > a{

        min-height:40px !important;

        padding:
            7px
            9px !important;
    }

}


/* =========================================================
   HSU MOBILE NAV · VEREIN DOCK FINAL V1

   Scope:
   ONLY the bottom app dock while the Verein accordion
   is open.

   Nothing else changes:
   - normal links stay native
   - main-nav stays untouched
   - accordion stays untouched
   - burger stays untouched
   - JavaScript stays untouched
   ========================================================= */

@media (max-width:1100px){

    /*
     * Verein contains substantially more submenu rows
     * than Teams.
     *
     * While Verein is open, slide the fixed dock below
     * the viewport instead of restructuring the menu.
     *
     * This keeps the complete Verein submenu unobstructed.
     */

    .main-nav
    > .hsu-nav-verein.mobile-open
    ~ .hsu-mobile-bottom-dock{

        transform:
            translateY(
                calc(
                    100%
                    + env(safe-area-inset-bottom)
                    + 18px
                )
            ) !important;

        pointer-events:none !important;

        transition:
            transform .22s ease !important;
    }


    /*
     * Closed state:
     * explicitly retain the existing fixed dock position.
     */

    .main-nav
    > .hsu-nav-verein:not(.mobile-open)
    ~ .hsu-mobile-bottom-dock{

        transform:
            translateY(0) !important;

        pointer-events:auto !important;

        transition:
            transform .22s ease !important;
    }


    /*
     * A little extra scroll space while Verein is open
     * so Kontakt remains comfortably reachable.
     *
     * We do NOT change main-nav positioning/display.
     */

    .main-nav
    > .hsu-nav-verein.mobile-open{

        margin-bottom:
            calc(
                18px
                + env(safe-area-inset-bottom)
            ) !important;
    }

}


/* =========================================================
   HSU MOBILE NAV · VEREIN DOCK HIDE FINAL

   Verein accordion is already correct.
   Only remove the fixed app dock while Verein is open.
   ========================================================= */

@media (max-width:1100px){

    .main-nav
    > .hsu-nav-verein.mobile-open
    ~ .hsu-mobile-bottom-dock{

        transform:
            translateY(140%) !important;

        opacity:0 !important;
        visibility:hidden !important;

        pointer-events:none !important;
    }


    .main-nav
    > .hsu-nav-verein:not(.mobile-open)
    ~ .hsu-mobile-bottom-dock{

        transform:
            translateY(0) !important;

        opacity:1 !important;
        visibility:visible !important;

        pointer-events:auto !important;
    }


    /*
     * Enough free space after the last Verein item,
     * including iPhone safe area.
     */

    .main-nav
    > .hsu-nav-verein.mobile-open{

        margin-bottom:
            calc(
                28px
                + env(safe-area-inset-bottom)
            ) !important;
    }

}

/*
 * =========================================================
 * HSU COMMUNITY LIVE VIEWER V1
 * HOME V2 · isolated live presentation only
 * =========================================================
 */

.hsu-home-v2-match:has(.hsu-home-v2-live-score){
    border-color:rgba(255,72,72,.62);
    box-shadow:
        0 18px 55px rgba(0,0,0,.34),
        0 0 34px rgba(255,48,48,.10);
}

.hsu-home-v2-live-score{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:94px;
    padding:8px 14px;
    border-radius:16px;
    font-size:clamp(2rem,7vw,3.4rem);
    line-height:1;
    font-weight:950;
    letter-spacing:-.06em;
    color:#fff;
    background:rgba(255,45,45,.14);
    border:1px solid rgba(255,72,72,.38);
}

.hsu-home-v2-live-state{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
    margin:4px 0 15px;
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hsu-home-v2-live-state strong{
    color:#ff5959;
}

.hsu-home-v2-live-state small{
    color:rgba(255,255,255,.58);
    font-size:.68rem;
    letter-spacing:.04em;
    text-transform:none;
}

.hsu-home-v2-live-dot{
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
    background:#ff3b3b;
    box-shadow:0 0 0 0 rgba(255,59,59,.55);
    animation:hsu-community-live-pulse 1.45s infinite;
}

@keyframes hsu-community-live-pulse{
    0%{
        box-shadow:0 0 0 0 rgba(255,59,59,.55);
    }
    70%{
        box-shadow:0 0 0 8px rgba(255,59,59,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(255,59,59,0);
    }
}

@media (max-width:640px){

    .hsu-home-v2-live-score{
        min-width:76px;
        padding:7px 10px;
        font-size:2.2rem;
    }

    .hsu-home-v2-live-state{
        margin-top:0;
        text-align:center;
    }
}

/*
 * =========================================================
 * HSU COMMUNITY LIVE VIEWER V2
 * MULTI-LIVE · HOME V2
 * =========================================================
 */

.hsu-home-live-root[hidden]{
    display:none !important;
}

.hsu-home-live-root{
    margin:0 0 18px;
}

.hsu-home-live-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin:0 0 10px;
}

.hsu-home-live-heading span{
    font-size:.73rem;
    font-weight:950;
    letter-spacing:.13em;
}

.hsu-home-live-heading strong{
    font-size:.72rem;
    letter-spacing:.08em;
    opacity:.58;
}

.hsu-home-live-stack{
    display:grid;
    gap:12px;
}

.hsu-home-live-card{
    position:relative;
    overflow:hidden;
    padding:18px;
    border-radius:22px;
    border:1px solid rgba(255,70,70,.48);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,48,48,.12),
            transparent 55%
        ),
        rgba(16,16,18,.92);
    box-shadow:
        0 18px 55px rgba(0,0,0,.34),
        0 0 34px rgba(255,48,48,.09);
}

.hsu-home-live-top{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:9px;
    font-size:.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hsu-home-live-top strong{
    margin-right:auto;
}

.hsu-home-live-top em{
    font-style:normal;
    opacity:.62;
}

.hsu-home-live-badge{
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(255,50,50,.18);
    border:1px solid rgba(255,72,72,.42);
    color:#ff6060;
    font-weight:950;
    letter-spacing:.13em;
}

.hsu-home-live-team{
    margin-bottom:17px;
    font-size:.83rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.74;
}

.hsu-home-live-versus{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:14px;
}

.hsu-home-live-side{
    min-width:0;
}

.hsu-home-live-side:last-child{
    text-align:right;
}

.hsu-home-live-side strong{
    display:block;
    font-size:clamp(1rem,4vw,1.35rem);
    line-height:1.15;
    overflow-wrap:anywhere;
}

.hsu-home-live-side small{
    display:block;
    margin-top:5px;
    font-size:.62rem;
    letter-spacing:.1em;
    opacity:.48;
}

.hsu-home-live-score-main{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:104px;
    padding:9px 13px;
    border-radius:17px;
    background:rgba(255,45,45,.13);
    border:1px solid rgba(255,72,72,.34);
}

.hsu-home-live-score-main strong{
    font-size:clamp(2.2rem,8vw,3.5rem);
    line-height:.9;
    letter-spacing:-.06em;
}

.hsu-home-live-score-main span{
    font-size:1.5rem;
    font-weight:900;
    opacity:.58;
}

.hsu-home-live-state{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
    margin:18px 0 14px;
}

.hsu-home-live-state strong{
    color:#ff5a5a;
    font-size:.72rem;
    letter-spacing:.1em;
}

.hsu-home-live-state small{
    font-size:.68rem;
    opacity:.58;
}

.hsu-home-live-pulse{
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
    background:#ff3b3b;
    box-shadow:0 0 0 0 rgba(255,59,59,.55);
    animation:hsu-community-live-v2-pulse 1.45s infinite;
}

@keyframes hsu-community-live-v2-pulse{
    0%{
        box-shadow:0 0 0 0 rgba(255,59,59,.55);
    }
    70%{
        box-shadow:0 0 0 9px rgba(255,59,59,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(255,59,59,0);
    }
}

.hsu-home-live-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.hsu-home-live-actions .button{
    justify-content:center;
    text-align:center;
}

@media (max-width:640px){

    .hsu-home-live-card{
        padding:15px;
        border-radius:19px;
    }

    .hsu-home-live-versus{
        gap:8px;
    }

    .hsu-home-live-score-main{
        min-width:78px;
        padding:8px 9px;
    }

    .hsu-home-live-score-main strong{
        font-size:2.25rem;
    }

    .hsu-home-live-side strong{
        font-size:.95rem;
    }

    .hsu-home-live-actions{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   HSU MATCHDAY EXPERIENCE V1
   HOME ORCHESTRATION UI

   ISOLATED SELECTORS ONLY.
   DO NOT MODIFY MOBILE NAV / LIVE VIEWER.
   ========================================================= */

.hsu-home-matchday-experience{
    display:grid;
    gap:14px;
    margin:0 0 18px;
}

.hsu-home-matchday-experience-card{
    position:relative;
    overflow:hidden;
    padding:21px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:25px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(255,121,0,.12),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #171717,
            #0d0d0d
        );
}

.hsu-home-matchday-experience-card::after{
    content:"";
    position:absolute;
    inset:auto -80px -100px auto;
    width:210px;
    height:210px;
    border-radius:50%;
    background:rgba(255,121,0,.06);
    pointer-events:none;
}

.hsu-home-matchday-experience-head{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.hsu-home-matchday-experience-head span{
    color:#ff7900;
    font-size:11px;
    font-weight:950;
    letter-spacing:.12em;
}

.hsu-home-matchday-experience-head strong{
    color:#858585;
    font-size:9px;
    letter-spacing:.12em;
}

.hsu-home-matchday-experience-card h2{
    position:relative;
    z-index:1;
    margin:15px 0 4px;
    color:#fff;
    font-size:clamp(25px,7vw,37px);
    line-height:1;
    letter-spacing:-.05em;
}

.hsu-home-matchday-experience-context{
    position:relative;
    z-index:1;
    margin:0;
    color:#8c8c8c;
    font-size:13px;
}

.hsu-home-matchday-experience-match{
    position:relative;
    z-index:1;
    margin-top:20px;
    padding:15px 0;
    border-top:1px solid rgba(255,255,255,.09);
    border-bottom:1px solid rgba(255,255,255,.09);
}

.hsu-home-matchday-experience-match > small{
    display:block;
    margin-bottom:13px;
    color:#707070;
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.hsu-home-matchday-experience-versus{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        auto
        minmax(0,1fr);
    align-items:center;
    gap:10px;
}

.hsu-home-matchday-experience-versus > div:last-child{
    text-align:right;
}

.hsu-home-matchday-experience-versus em{
    display:block;
    margin-bottom:5px;
    color:#666;
    font-style:normal;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.hsu-home-matchday-experience-versus strong{
    display:block;
    color:#fff;
    font-size:15px;
    line-height:1.05;
    overflow-wrap:anywhere;
}

.hsu-home-matchday-experience-vs{
    color:#707070;
    font-size:12px;
    letter-spacing:.1em;
}

.hsu-home-matchday-experience-score{
    display:flex;
    align-items:center;
    gap:5px;
    color:#fff;
    font-size:31px;
    line-height:1;
    letter-spacing:-.06em;
}

.hsu-home-matchday-experience-score span{
    color:#777;
}

.hsu-home-matchday-experience-actions{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:15px;
}

.hsu-home-matchday-experience-actions .button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:45px;
    padding:9px 11px;
    text-align:center;
    font-size:10px;
    font-weight:900;
}

.hsu-home-matchday-experience-note{
    position:relative;
    z-index:1;
    margin-top:13px;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(255,255,255,.035);
    color:#999;
    font-size:10px;
    line-height:1.45;
}

.hsu-home-matchday-experience-note strong{
    color:#fff;
}

.hsu-home-matchday-experience-note.is-final{
    color:#ff8a21;
    font-weight:850;
}

.hsu-home-matchday-experience-card.is-post-match{
    border-color:rgba(255,121,0,.22);
}

.hsu-home-matchday-experience-card.is-final{
    border-color:rgba(255,121,0,.34);
}

@media(max-width:520px){

    .hsu-home-matchday-experience-card{
        padding:17px;
        border-radius:21px;
    }

    .hsu-home-matchday-experience-actions{
        grid-template-columns:1fr;
    }

    .hsu-home-matchday-experience-score{
        font-size:27px;
    }

    .hsu-home-matchday-experience-versus{
        gap:7px;
    }

    .hsu-home-matchday-experience-versus strong{
        font-size:14px;
    }
}



/* =========================================================
   HSU MATCHDAY EXPERIENCE V1 · FINAL VISUAL POLISH

   ONLY .hsu-home-matchday-experience-* SELECTORS.
   ========================================================= */

.hsu-home-matchday-experience-card{
    padding:24px;
}

.hsu-home-matchday-experience-context{
    margin-top:8px;
    color:#aaa;
    font-size:13px;
    line-height:1.45;
}

.hsu-home-matchday-experience-match{
    margin-top:24px;
    padding:17px 0 18px;
}

.hsu-home-matchday-experience-match > small{
    margin-bottom:17px;
    color:#8b8b8b;
    font-size:9px;
    line-height:1.2;
}

.hsu-home-matchday-experience-versus{
    grid-template-columns:
        minmax(0,1fr)
        minmax(64px,auto)
        minmax(0,1fr);
    gap:16px;
}

.hsu-home-matchday-experience-versus > div{
    min-width:0;
}

.hsu-home-matchday-experience-versus em{
    margin-bottom:7px;
    color:#777;
    font-size:8px;
    line-height:1;
}

.hsu-home-matchday-experience-versus strong{
    color:#fff;
    font-size:clamp(17px,4.6vw,23px);
    font-weight:900;
    line-height:1.08;
    letter-spacing:-.025em;
}

.hsu-home-matchday-experience-vs{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:64px;
    min-height:52px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;
    background:rgba(255,255,255,.035);
    color:#777;
    font-size:12px;
    font-weight:950;
    letter-spacing:.08em;
}

.hsu-home-matchday-experience-score{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:92px;
    padding:10px 13px;
    border:1px solid rgba(255,121,0,.28);
    border-radius:17px;
    background:
        linear-gradient(
            145deg,
            rgba(255,121,0,.15),
            rgba(255,121,0,.04)
        );
    color:#fff;
    font-size:clamp(31px,8vw,43px);
    font-weight:950;
    line-height:.9;
    letter-spacing:-.07em;
    box-shadow:
        0 12px 34px rgba(0,0,0,.20);
}

.hsu-home-matchday-experience-score span{
    margin:0 2px;
    color:#ff7900;
    font-size:.72em;
}

.hsu-home-matchday-experience-actions{
    gap:9px;
    margin-top:18px;
}

.hsu-home-matchday-experience-actions .button{
    min-height:48px;
    border-radius:15px;
    padding:10px 12px;
    font-size:10px;
    line-height:1.15;
}

.hsu-home-matchday-experience-note{
    margin-top:15px;
    padding:13px 14px;
    border-color:rgba(255,255,255,.10);
    background:rgba(255,255,255,.045);
    color:#aaa;
    font-size:10px;
    line-height:1.5;
}

.hsu-home-matchday-experience-note.is-final{
    border-color:rgba(255,121,0,.22);
    background:rgba(255,121,0,.07);
    color:#ff9b42;
}


/*
 * POST MATCH / FINAL:
 * give the result more visual weight.
 */

.hsu-home-matchday-experience-card.is-post-match
.hsu-home-matchday-experience-match,

.hsu-home-matchday-experience-card.is-final
.hsu-home-matchday-experience-match{
    border-top-color:rgba(255,121,0,.18);
    border-bottom-color:rgba(255,121,0,.18);
}


/*
 * MOBILE
 *
 * Keep the match itself horizontal.
 * Actions stay 2 × 2 where four actions exist.
 */

@media(max-width:520px){

    .hsu-home-matchday-experience-card{
        padding:19px 17px;
    }

    .hsu-home-matchday-experience-context{
        margin-top:7px;
        font-size:12px;
    }

    .hsu-home-matchday-experience-match{
        margin-top:20px;
        padding:15px 0 16px;
    }

    .hsu-home-matchday-experience-match > small{
        margin-bottom:14px;
    }

    .hsu-home-matchday-experience-versus{
        grid-template-columns:
            minmax(0,1fr)
            minmax(56px,auto)
            minmax(0,1fr);
        gap:8px;
    }

    .hsu-home-matchday-experience-versus strong{
        font-size:15px;
    }

    .hsu-home-matchday-experience-vs{
        min-width:56px;
        min-height:48px;
        border-radius:14px;
        font-size:10px;
    }

    .hsu-home-matchday-experience-score{
        min-width:72px;
        padding:9px 9px;
        border-radius:14px;
        font-size:29px;
    }

    .hsu-home-matchday-experience-actions{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .hsu-home-matchday-experience-actions .button{
        min-height:46px;
        padding:9px 8px;
        font-size:9px;
    }

    .hsu-home-matchday-experience-note{
        margin-top:12px;
        padding:11px 12px;
    }
}


/*
 * Very narrow phones:
 * preserve readability without affecting other HOME UI.
 */

@media(max-width:360px){

    .hsu-home-matchday-experience-versus{
        grid-template-columns:
            minmax(0,1fr)
            50px
            minmax(0,1fr);
        gap:6px;
    }

    .hsu-home-matchday-experience-versus strong{
        font-size:13px;
    }

    .hsu-home-matchday-experience-vs{
        min-width:50px;
    }

    .hsu-home-matchday-experience-score{
        min-width:50px;
        padding:8px 5px;
        font-size:25px;
    }

    .hsu-home-matchday-experience-actions .button{
        font-size:8px;
    }
}



/* =========================================================
   HSU SOCIAL IDENTITY V2 · PLAYER LOADOUT
   Isolated V2.0 UI
   ========================================================= */

.hsu-loadout-page{
    min-height:75vh;
    background:
        radial-gradient(
            circle at 82% 0,
            rgba(244,122,34,.13),
            transparent 32%
        ),
        #0b0b0c;
    color:#fff;
}

.hsu-loadout-hero{
    padding:46px 0 100px;
}

.hsu-loadout-hero-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:28px;
    margin-bottom:28px;
}

.hsu-loadout-hero-top h1{
    margin:5px 0 8px;
    font-size:clamp(40px,7vw,72px);
    line-height:.92;
    letter-spacing:-.055em;
}

.hsu-loadout-hero-top h1 span{
    color:#f47a22;
}

.hsu-loadout-hero-top p{
    max-width:560px;
    margin:0;
    color:#aaa;
    line-height:1.55;
}

.hsu-loadout-message{
    margin:0 0 20px;
    padding:13px 16px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:#151515;
    font-weight:800;
}

.hsu-loadout-message.success{
    border-color:rgba(244,122,34,.55);
}

.hsu-loadout-message.error{
    border-color:rgba(255,255,255,.28);
}

.hsu-loadout-player-card{
    display:flex;
    align-items:center;
    gap:22px;
    margin-bottom:22px;
    padding:24px;
    border:1px solid rgba(244,122,34,.34);
    border-radius:22px;
    background:
        linear-gradient(
            135deg,
            rgba(244,122,34,.10),
            rgba(255,255,255,.025) 42%,
            rgba(255,255,255,.015)
        );
    box-shadow:0 22px 70px rgba(0,0,0,.28);
}

.hsu-loadout-avatar{
    width:108px;
    height:108px;
    flex:0 0 108px;
    overflow:hidden;
    border:2px solid rgba(244,122,34,.72);
    border-radius:50%;
    background:#171717;
}

.hsu-loadout-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.hsu-loadout-player-main{
    min-width:0;
    flex:1;
}

.hsu-loadout-label{
    display:block;
    margin-bottom:5px;
    color:#f47a22;
    font-size:10px;
    font-weight:950;
    letter-spacing:.12em;
}

.hsu-loadout-player-main h2{
    margin:0;
    font-size:32px;
    line-height:1;
}

.hsu-loadout-active-title{
    margin-top:7px;
    color:#f47a22;
    font-size:12px;
    font-weight:950;
    letter-spacing:.08em;
}

.hsu-loadout-active-title.empty{
    color:#777;
}

.hsu-loadout-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:18px;
}

.hsu-loadout-stats > div{
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:rgba(0,0,0,.22);
}

.hsu-loadout-stats span{
    display:block;
    margin-bottom:3px;
    color:#777;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.hsu-loadout-stats strong{
    font-size:14px;
}

.hsu-loadout-section{
    margin-top:18px;
    padding:22px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:20px;
    background:#111112;
}

.hsu-loadout-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.hsu-loadout-section-head h2{
    margin:0;
    font-size:24px;
}

.hsu-loadout-count{
    color:#777;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}

.hsu-loadout-empty{
    padding:20px;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:14px;
    color:#888;
}

.hsu-loadout-empty strong{
    display:block;
    margin-bottom:5px;
    color:#ddd;
}

.hsu-loadout-empty p{
    margin:0;
    font-size:13px;
}

.hsu-loadout-title-grid{
    display:grid;
    gap:10px;
}

.hsu-loadout-choice{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:15px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:#161617;
}

.hsu-loadout-choice.equipped{
    border-color:rgba(244,122,34,.5);
    background:rgba(244,122,34,.06);
}

.hsu-loadout-choice span,
.hsu-loadout-choice strong,
.hsu-loadout-choice small{
    display:block;
}

.hsu-loadout-choice span{
    margin-bottom:4px;
    color:#777;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}

.hsu-loadout-choice strong{
    color:#fff;
}

.hsu-loadout-choice small{
    max-width:650px;
    margin-top:4px;
    color:#888;
}

.hsu-loadout-trophy-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.hsu-loadout-slot{
    min-width:0;
    padding:15px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;
    background:#161617;
}

.hsu-loadout-slot-number{
    margin-bottom:12px;
    color:#777;
    font-size:9px;
    font-weight:950;
    letter-spacing:.11em;
}

.hsu-loadout-slot-current,
.hsu-loadout-slot-empty{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:62px;
    padding:11px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    background:rgba(0,0,0,.22);
}

.hsu-loadout-slot-current > span{
    color:#f47a22;
}

.hsu-loadout-slot-current strong,
.hsu-loadout-slot-current small{
    display:block;
}

.hsu-loadout-slot-current small{
    margin-top:3px;
    color:#777;
    font-size:9px;
}

.hsu-loadout-slot-current[data-rarity="epic"],
.hsu-loadout-slot-current[data-rarity="legendary"]{
    border-color:rgba(244,122,34,.38);
}

.hsu-loadout-slot-empty{
    color:#666;
}

.hsu-loadout-slot-empty > span{
    font-size:20px;
}

.hsu-loadout-slot-form{
    display:grid;
    gap:8px;
    margin-top:10px;
}

.hsu-loadout-slot-form select{
    width:100%;
    min-width:0;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    outline:none;
    color:#fff;
    background:#0d0d0e;
}

.hsu-loadout-slot-hint{
    margin:10px 0 0;
    color:#777;
    font-size:12px;
}

.hsu-loadout-footer-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:20px;
}

@media (max-width:760px){

    .hsu-loadout-hero{
        padding:30px 0 88px;
    }

    .hsu-loadout-hero-top{
        display:block;
    }

    .hsu-loadout-hero-top > .button{
        margin-top:16px;
    }

    .hsu-loadout-player-card{
        align-items:flex-start;
        gap:14px;
        padding:17px;
    }

    .hsu-loadout-avatar{
        width:72px;
        height:72px;
        flex-basis:72px;
    }

    .hsu-loadout-player-main h2{
        font-size:25px;
    }

    .hsu-loadout-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hsu-loadout-section{
        padding:16px;
    }

    .hsu-loadout-trophy-grid{
        grid-template-columns:1fr;
    }

    .hsu-loadout-choice{
        align-items:flex-start;
        flex-direction:column;
    }

    .hsu-loadout-choice .button{
        width:100%;
    }

    .hsu-loadout-footer-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .hsu-loadout-footer-actions .button{
        width:100%;
        text-align:center;
    }
}

/* ==========================================================
   HSU DESKTOP ACCOUNT MENU V3 · 10/10 QUICK ACCESS
   Desktop only. Mobile navigation untouched.
   ========================================================== */

@media (min-width: 901px){

    .hsu-header-account-menu{
        width: 448px;
        max-width: calc(100vw - 32px);
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.10);
        border-top: 2px solid #ff7200;
        border-radius: 22px;
        background:
            radial-gradient(circle at 100% 0%, rgba(255,114,0,.10), transparent 38%),
            rgba(12,12,12,.985);
        box-shadow:
            0 28px 70px rgba(0,0,0,.58),
            0 8px 24px rgba(0,0,0,.34);
    }

    .hsu-header-account-menu::before{
        display:none;
    }

    .hsu-header-account-menu
    > .hsu-header-account-menu-head{
        display:grid;
        grid-template-columns:1fr auto;
        gap:4px 18px;
        padding:22px 22px 18px;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .hsu-header-account-menu-head span{
        grid-column:1 / -1;
        margin:0;
        color:#ff7200;
        font-size:10px;
        line-height:1;
        font-weight:900;
        letter-spacing:.19em;
        text-transform:uppercase;
    }

    .hsu-header-account-menu-head strong{
        color:#fff;
        font-size:24px;
        line-height:1.1;
        font-weight:900;
        letter-spacing:-.025em;
    }

    .hsu-header-account-menu-head small{
        align-self:end;
        color:rgba(255,255,255,.38);
        font-size:11px;
        line-height:1.2;
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
    }

    .hsu-desktop-account-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        padding:16px;
    }

    .hsu-header-account-menu
    .hsu-desktop-account-tile{
        position:relative;
        display:grid;
        grid-template-columns:42px minmax(0,1fr);
        align-items:center;
        gap:11px;
        min-width:0;
        min-height:74px;
        padding:12px;
        color:#fff;
        text-decoration:none;
        border:1px solid rgba(255,255,255,.09);
        border-radius:15px;
        background:
            linear-gradient(145deg,
                rgba(255,255,255,.045),
                rgba(255,255,255,.018));
        transition:
            transform .16s ease,
            border-color .16s ease,
            background .16s ease;
    }

    .hsu-header-account-menu
    .hsu-desktop-account-tile:hover{
        transform:translateY(-1px);
        border-color:rgba(255,114,0,.48);
        background:
            linear-gradient(145deg,
                rgba(255,114,0,.11),
                rgba(255,255,255,.025));
    }

    .hsu-desktop-account-icon{
        display:flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        border-radius:12px;
        background:rgba(255,255,255,.045);
        color:#ff7200;
    }

    .hsu-desktop-account-icon svg{
        width:24px;
        height:24px;
        display:block;
        fill:none;
        stroke:currentColor;
        stroke-width:1.9;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .hsu-desktop-account-tile > span{
        display:block;
        min-width:0;
    }

    .hsu-desktop-account-tile > span > strong{
        display:block;
        margin:0 0 4px;
        color:#fff;
        font-size:14px;
        line-height:1.12;
        font-weight:850;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .hsu-desktop-account-tile > span > small{
        display:block;
        margin:0;
        color:rgba(255,255,255,.42);
        font-size:10px;
        line-height:1.2;
        font-weight:650;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .hsu-desktop-account-fanzone{
        border-color:rgba(255,114,0,.25) !important;
        background:
            linear-gradient(145deg,
                rgba(255,114,0,.12),
                rgba(255,114,0,.025)) !important;
    }

    .hsu-desktop-account-fanzone:hover{
        border-color:rgba(255,114,0,.70) !important;
    }

    .hsu-header-account-menu
    .hsu-header-quick-badge{
        position:absolute;
        top:8px;
        right:8px;
        display:flex;
        align-items:center;
        justify-content:center;
        min-width:19px;
        height:19px;
        padding:0 5px;
        border-radius:999px;
        background:#ff7200;
        color:#050505;
        font-size:9px;
        line-height:1;
        font-weight:950;
    }

    .hsu-header-account-menu
    > .hsu-header-account-logout{
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:48px;
        padding:0 22px;
        border-top:1px solid rgba(255,255,255,.08);
        background:rgba(255,255,255,.018);
        color:rgba(255,255,255,.45);
        font-size:12px;
        font-weight:800;
        text-decoration:none;
    }

    .hsu-header-account-menu
    > .hsu-header-account-logout:hover{
        color:#fff;
        background:rgba(255,255,255,.035);
    }

}


/* ==========================================================
   HSU DESKTOP ACCOUNT V3 · MOBILE ISOLATION FIX V1
   Desktop grid must never render inside mobile account menu.
   ========================================================== */

@media (max-width: 900px) {

    .hsu-header-account-menu
    > .hsu-desktop-account-grid {
        display: none !important;
    }

    .hsu-header-account-menu
    > .hsu-header-account-menu-head {
        display: none !important;
    }

    .hsu-header-account-menu
    > .hsu-header-account-logout {
        display: none !important;
    }

}


/* =========================================================
   HSU FANZONE ACCOUNT V2.1 · FINAL POLISH
   Visual / responsive layer only
   ========================================================= */

.hsu-account-v2{
    --hsu-v21-orange:#ff6900;
    --hsu-v21-black:#0d0d0d;
    --hsu-v21-line:rgba(15,15,15,.13);
}

/* ---------- HERO ---------- */

.hsu-account-v2-welcome{
    min-width:0;
}

.hsu-account-v2-welcome h1{
    max-width:100%;
    line-height:.91;
    letter-spacing:-.055em;
}

.hsu-account-v2-welcome h1 span{
    display:block;
    width:100%;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:none;
}

.hsu-account-v2-welcome h1 span.nick-short{
    font-size:1em;
}

.hsu-account-v2-welcome h1 span.nick-medium{
    font-size:.82em;
}

.hsu-account-v2-welcome h1 span.nick-long{
    font-size:.66em;
    line-height:.96;
    letter-spacing:-.045em;
}

.hsu-account-v2-balance{
    position:relative;
    overflow:hidden;
}

.hsu-account-v2-balance::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-95px;
    top:-105px;
    border-radius:50%;
    background:rgba(255,105,0,.08);
    pointer-events:none;
}

/* ---------- PRIMARY NAV ---------- */

.hsu-account-v2-primary-actions{
    align-items:stretch;
}

.hsu-account-v2-action{
    min-width:0;
    overflow:hidden;
    isolation:isolate;
}

.hsu-account-v2-action div{
    min-width:0;
}

.hsu-account-v2-action-icon{
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}

.hsu-account-v2-action-icon svg{
    display:block;
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/*
 * Old generated icon pseudo-elements must not remain visible.
 */
.hsu-account-v2-action-icon::before,
.hsu-account-v2-action-icon::after{
    content:none !important;
    display:none !important;
}

.hsu-account-v2-action strong{
    text-wrap:balance;
}

.hsu-account-v2-action small{
    line-height:1.35;
}

.hsu-account-v2-action-primary{
    box-shadow:
        0 16px 38px rgba(255,105,0,.13);
}

/* ---------- ROLE / MANAGEMENT ---------- */

.hsu-account-v2-role-zone{
    overflow:hidden;
}

.hsu-account-v2-role-card,
.hsu-account-v2-scanner{
    min-width:0;
}

.hsu-account-v2-role-card strong,
.hsu-account-v2-scanner strong{
    text-wrap:balance;
}

/* ---------- CONTENT PANELS ---------- */

.hsu-account-v2-panel{
    overflow:hidden;
}

.hsu-account-v2-stat-grid > div,
.hsu-account-v2-team-results > div,
.hsu-account-v2-earn-list > div{
    min-width:0;
}

/* ---------- DESKTOP ---------- */

@media (min-width:901px){

    .hsu-account-v2-hero-grid{
        grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
        gap:64px;
        align-items:center;
    }

    .hsu-account-v2-welcome h1{
        max-width:760px;
    }

    .hsu-account-v2-primary-actions{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .hsu-account-v2-action{
        min-height:168px;
    }

    .hsu-account-v2-action-primary{
        grid-column:span 1;
    }

    .hsu-account-v2-role-actions{
        grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);
    }
}

/* ---------- TABLET / MOBILE ---------- */

@media (max-width:900px){

    .hsu-account-v2-hero{
        padding-top:68px;
        padding-bottom:58px;
    }

    .hsu-account-v2-hero-grid{
        gap:34px;
    }

    .hsu-account-v2-welcome h1{
        font-size:clamp(58px,15vw,88px);
    }

    .hsu-account-v2-welcome h1 span.nick-medium{
        font-size:.76em;
    }

    .hsu-account-v2-welcome h1 span.nick-long{
        font-size:.56em;
        line-height:1;
    }

    .hsu-account-v2-welcome p{
        max-width:15em;
    }

    .hsu-account-v2-primary-actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }

    .hsu-account-v2-action{
        min-height:196px;
        padding:28px 25px 24px;
    }

    .hsu-account-v2-action-icon{
        width:58px;
        height:58px;
        margin-bottom:20px;
    }

    .hsu-account-v2-action strong{
        font-size:22px;
        line-height:1.08;
    }

    .hsu-account-v2-action small{
        margin-top:7px;
        font-size:15px;
    }

    .hsu-account-v2-action > b{
        margin-top:auto;
        padding-top:20px;
    }

    .hsu-account-v2-role-zone{
        margin-top:38px;
    }

    .hsu-account-v2-panel{
        margin-top:38px;
    }
}

@media (max-width:520px){

    .hsu-account-v2-hero{
        padding-top:54px;
        padding-bottom:48px;
    }

    .hsu-account-v2-welcome h1{
        font-size:clamp(52px,14.5vw,72px);
    }

    .hsu-account-v2-welcome h1 span.nick-medium{
        font-size:.72em;
    }

    .hsu-account-v2-welcome h1 span.nick-long{
        font-size:.50em;
        line-height:1.03;
        letter-spacing:-.035em;
    }

    .hsu-account-v2-primary-actions{
        gap:12px;
    }

    .hsu-account-v2-action{
        min-height:178px;
        padding:24px 18px 20px;
        border-radius:22px;
    }

    .hsu-account-v2-action-icon{
        width:52px;
        height:52px;
        margin-bottom:17px;
    }

    .hsu-account-v2-action-icon svg{
        width:24px;
        height:24px;
    }

    .hsu-account-v2-action strong{
        font-size:19px;
    }

    .hsu-account-v2-action small{
        font-size:13.5px;
    }

    .hsu-account-v2-section-head h2{
        line-height:.98;
    }

    .hsu-account-v2-role-zone{
        border-radius:28px;
    }

    .hsu-account-v2-scanner,
    .hsu-account-v2-role-card{
        border-radius:20px;
    }

    .hsu-account-v2-stat-grid{
        gap:10px;
    }

    .hsu-account-v2-stat-grid > div{
        padding-left:16px;
        padding-right:16px;
    }
}

/*
 * Very long names:
 * preserve the composition rather than forcing an ugly accidental wrap.
 */
@media (max-width:390px){

    .hsu-account-v2-welcome h1 span.nick-long{
        font-size:.45em;
    }

    .hsu-account-v2-action{
        padding-left:16px;
        padding-right:16px;
    }

    .hsu-account-v2-action strong{
        font-size:18px;
    }
}

/* =========================================================
   HSU FANZONE ACCOUNT V2.2 · FINAL MOBILE POLISH
   ========================================================= */

/* ---------- POINTS BALANCE: NUMBER MUST BE VISIBLE ---------- */

.hsu-account-v2-points-top > div{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:18px;
    background:#101010;
}

.hsu-account-v2-points-top strong{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#ff6900 !important;
    font-weight:950;
    line-height:1;
}

.hsu-account-v2-points-top span{
    color:#fff !important;
    opacity:.90;
}


/* ---------- MOBILE RHYTHM ---------- */

@media (max-width:900px){

    .hsu-account-v2-primary-actions{
        gap:12px;
    }

    .hsu-account-v2-action{
        min-height:164px;
        padding:22px 20px 19px;
    }

    .hsu-account-v2-action-icon{
        width:50px;
        height:50px;
        margin-bottom:15px;
    }

    .hsu-account-v2-action strong{
        font-size:20px;
    }

    .hsu-account-v2-action small{
        font-size:14px;
        line-height:1.3;
    }

    .hsu-account-v2-action > b{
        padding-top:14px;
    }


    /* Verwaltung bewusst sekundärer als Kern-Fanzone */

    .hsu-account-v2-role-zone{
        padding:28px 26px;
        border-radius:26px;
    }

    .hsu-account-v2-role-zone
    .hsu-account-v2-section-head{
        margin-bottom:22px;
    }

    .hsu-account-v2-role-zone
    .hsu-account-v2-section-head h2{
        font-size:40px;
    }

    .hsu-account-v2-role-zone
    .hsu-account-v2-section-head p{
        max-width:24em;
        font-size:15px;
    }

    .hsu-account-v2-role-actions{
        gap:12px;
    }

    .hsu-account-v2-scanner{
        padding:20px;
    }

    .hsu-account-v2-scanner-icon{
        width:58px;
        height:58px;
    }

    .hsu-account-v2-scanner strong{
        font-size:22px;
    }

    .hsu-account-v2-scanner > b{
        min-height:48px;
    }

    .hsu-account-v2-role-card{
        min-height:112px;
        padding:20px 22px;
    }


    /* Panels etwas dichter */

    .hsu-account-v2-panel{
        padding-top:30px;
        padding-bottom:30px;
    }

    .hsu-account-v2-points-top{
        margin-top:22px;
    }

    .hsu-account-v2-points-top > div{
        min-height:104px;
        padding:22px 26px;
        border-radius:18px;
    }

    .hsu-account-v2-points-top strong{
        font-size:42px;
    }

    .hsu-account-v2-earn-list{
        gap:10px;
    }

    .hsu-account-v2-earn-list > div{
        min-height:92px;
    }


    /* Footer: primary action + secondary logout */

    .hsu-account-v2-footer-actions{
        gap:12px;
    }

    .hsu-account-v2-footer-actions
    .button-primary{
        background:#ff6900;
        color:#090909;
        border-color:#ff6900;
    }

    .hsu-account-v2-footer-actions
    .button-ghost{
        background:transparent !important;
        color:#111 !important;
        border:1px solid rgba(15,15,15,.22) !important;
        box-shadow:none !important;
    }
}


/* ---------- SMALL IPHONE ---------- */

@media (max-width:520px){

    .hsu-account-v2-action{
        min-height:152px;
        padding:20px 16px 17px;
    }

    .hsu-account-v2-action-icon{
        width:47px;
        height:47px;
        margin-bottom:13px;
    }

    .hsu-account-v2-action strong{
        font-size:18px;
    }

    .hsu-account-v2-action small{
        font-size:13px;
    }

    .hsu-account-v2-role-zone{
        padding:25px 20px;
    }

    .hsu-account-v2-role-zone
    .hsu-account-v2-section-head h2{
        font-size:36px;
    }

    .hsu-account-v2-points-top > div{
        padding:20px;
    }

    .hsu-account-v2-points-top strong{
        font-size:38px;
    }
}


/* ==========================================================
   HSU_HOME_APP_PROFILE_UX_V2_START
   Mobile app card + desktop direct account access.
   ========================================================== */

.hsu-desktop-profile-direct{
    display:none;
}

@media (min-width:1101px){

    .main-nav > .hsu-desktop-profile-direct,
    .main-nav > .hsu-desktop-login-direct{
        min-height:43px;

        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:9px;

        margin-left:7px;
        padding:10px 16px;

        color:#fff;

        background:
            rgba(242,101,34,.11);

        border:
            1px solid rgba(242,101,34,.82);

        border-radius:999px;

        box-shadow:
            0 8px 24px rgba(242,101,34,.14);

        font-size:.84rem;
        font-weight:900;
        line-height:1;
        white-space:nowrap;

        transition:
            color .18s ease,
            background .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }

    .main-nav > .hsu-desktop-profile-direct:hover,
    .main-nav > .hsu-desktop-profile-direct:focus-visible,
    .main-nav > .hsu-desktop-login-direct:hover,
    .main-nav > .hsu-desktop-login-direct:focus-visible{
        color:#080808;

        background:#f26522;

        transform:translateY(-1px);

        box-shadow:
            0 12px 30px rgba(242,101,34,.28);
    }

    .hsu-desktop-profile-direct svg,
    .hsu-desktop-login-direct svg{
        width:19px;
        height:19px;

        fill:none;
        stroke:currentColor;
        stroke-width:1.9;
        stroke-linecap:round;
        stroke-linejoin:round;
    }
}

@media (max-width:720px){

    .hsu-home-app-cta{
        position:relative;
        isolation:isolate;

        width:100%;
        min-height:116px;

        display:grid !important;
        grid-template-columns:
            54px minmax(0,1fr);
        align-items:center;
        column-gap:15px;

        margin-top:8px;
        padding:
            31px
            54px
            18px
            17px !important;

        overflow:hidden;

        color:#fff !important;
        text-align:left !important;
        text-decoration:none !important;

        background:
            radial-gradient(
                circle at 92% 10%,
                rgba(255,255,255,.26),
                transparent 35%
            ),
            linear-gradient(
                135deg,
                #f26522,
                #cf4508
            ) !important;

        border:
            1px solid rgba(255,184,128,.78) !important;

        border-radius:22px !important;

        box-shadow:
            0 18px 44px rgba(242,101,34,.31),
            inset 0 1px 0 rgba(255,255,255,.19);

        transform:none !important;
    }

    .hsu-home-app-cta::before{
        content:"HSU COMMUNITY APP";

        position:absolute;
        top:13px;
        left:86px;

        color:
            rgba(255,255,255,.76);

        font-size:9px;
        font-weight:950;
        line-height:1;
        letter-spacing:.16em;
        text-transform:uppercase;
    }

    .hsu-home-app-cta::after{
        content:"→";

        position:absolute;
        top:50%;
        right:18px;

        width:29px;
        height:29px;

        display:grid;
        place-items:center;

        color:#f26522;
        background:#fff;

        border-radius:50%;

        font-size:18px;
        font-weight:950;

        transform:translateY(-50%);
    }

    .hsu-home-app-cta-icon{
        width:54px;
        height:54px;

        display:grid;
        place-items:center;

        color:#f26522;
        background:#fff;

        border-radius:16px;

        box-shadow:
            0 8px 22px rgba(70,16,0,.25);

        font-size:32px;
        font-weight:500;
        line-height:1;
    }

    .hsu-home-app-cta > span:last-child{
        display:block;

        padding-top:5px;

        color:#fff;

        font-size:
            clamp(18px,5.2vw,21px);
        font-weight:950;
        line-height:1.08;
        letter-spacing:-.025em;
    }

    .hsu-home-app-cta:active{
        filter:brightness(.95);

        transform:
            scale(.985) !important;
    }
}

/* HSU_HOME_APP_PROFILE_UX_V2_END */

/* ==========================================================
   HSU_DESKTOP_GUEST_LOGIN_FIX_V3_START
   Reveal only the guest login action on desktop.
   Existing mobile presentation remains unchanged.
   ========================================================== */

@media (min-width:1101px){

    /*
     * The guest login link lives inside the mobile account
     * wrapper. On desktop the wrapper was entirely hidden.
     */
    .main-nav > .hsu-header-login-mobile{
        width:auto;

        display:flex !important;
        align-items:center;

        margin:0 0 0 7px;
        padding:0;

        border:0;
        background:transparent;
    }

    /*
     * Keep the mobile explanatory content hidden on desktop.
     * Only the actual login button is exposed.
     */
    .main-nav >
    .hsu-header-login-mobile >
    .hsu-header-login-mobile-icon,
    .main-nav >
    .hsu-header-login-mobile >
    .hsu-header-login-mobile-copy{
        display:none !important;
    }

    .main-nav >
    .hsu-header-login-mobile >
    .hsu-desktop-login-direct{
        min-height:43px;

        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        gap:9px;

        padding:10px 16px;

        color:#fff;

        background:
            rgba(242,101,34,.11);

        border:
            1px solid rgba(242,101,34,.82);

        border-radius:999px;

        box-shadow:
            0 8px 24px rgba(242,101,34,.14);

        font-size:.84rem;
        font-weight:900;
        line-height:1;
        white-space:nowrap;

        transition:
            color .18s ease,
            background .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }

    .main-nav >
    .hsu-header-login-mobile >
    .hsu-desktop-login-direct:hover,
    .main-nav >
    .hsu-header-login-mobile >
    .hsu-desktop-login-direct:focus-visible{
        color:#080808;
        background:#f26522;

        transform:translateY(-1px);

        box-shadow:
            0 12px 30px rgba(242,101,34,.28);
    }

    .main-nav >
    .hsu-header-login-mobile >
    .hsu-desktop-login-direct svg{
        width:19px;
        height:19px;

        display:block;

        fill:none;
        stroke:currentColor;
        stroke-width:1.9;
        stroke-linecap:round;
        stroke-linejoin:round;
    }
}

/* HSU_DESKTOP_GUEST_LOGIN_FIX_V3_END */

/* HSU_MOBILE_PROFILE_CARD_V4_START
   Compact guest-login card in the opened mobile navigation.
   Desktop account controls and PWA install flow remain unchanged.
*/

@media (max-width: 1100px) {

    .main-nav .hsu-header-login-mobile {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        column-gap: 14px !important;
        row-gap: 16px !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;

        margin: 0 0 16px !important;
        padding: 17px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;

        border: 1px solid rgba(255, 111, 0, 0.48) !important;
        border-radius: 20px !important;
        background:
            linear-gradient(
                135deg,
                rgba(255, 111, 0, 0.12),
                rgba(255, 111, 0, 0.025)
            ) !important;
    }

    .main-nav .hsu-header-login-mobile-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: grid !important;
        place-items: center !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        width: 54px !important;
        min-width: 54px !important;
        max-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        aspect-ratio: 1 / 1 !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 50% !important;
        background: #1b1b1b !important;
        color: #ff7100 !important;

        font-size: 20px !important;
        line-height: 1 !important;
        overflow: hidden !important;
    }

    .main-nav .hsu-header-login-mobile-copy {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 3px !important;

        position: static !important;
        transform: none !important;

        width: auto !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .main-nav .hsu-header-login-mobile-copy > span {
        display: block !important;
        margin: 0 !important;
        color: #ff7100 !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.13em !important;
        text-transform: uppercase !important;
    }

    .main-nav .hsu-header-login-mobile-copy > strong {
        display: block !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-size: 19px !important;
        font-weight: 850 !important;
        line-height: 1.2 !important;
    }

    .main-nav .hsu-header-login-mobile-copy > small {
        display: block !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.58) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    .main-nav
    .hsu-header-login-mobile
    > .hsu-desktop-login-direct {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        aspect-ratio: auto !important;

        margin: 0 !important;
        padding: 0 18px !important;
        box-sizing: border-box !important;

        border: 1px solid #ff7a0a !important;
        border-radius: 14px !important;
        background: #ff7100 !important;
        color: #090909 !important;

        box-shadow:
            0 10px 26px rgba(255, 103, 0, 0.18) !important;

        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0.01em !important;
        text-decoration: none !important;

        overflow: hidden !important;
    }

    .main-nav
    .hsu-header-login-mobile
    > .hsu-desktop-login-direct::before,
    .main-nav
    .hsu-header-login-mobile
    > .hsu-desktop-login-direct::after {
        content: none !important;
        display: none !important;
    }

    .main-nav
    .hsu-header-login-mobile
    > .hsu-desktop-login-direct svg {
        display: block !important;

        position: static !important;
        inset: auto !important;
        transform: none !important;

        width: 21px !important;
        min-width: 21px !important;
        max-width: 21px !important;
        height: 21px !important;
        min-height: 21px !important;
        max-height: 21px !important;
        aspect-ratio: 1 / 1 !important;

        margin: 0 !important;
        padding: 0 !important;

        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        overflow: visible !important;
    }

    .main-nav
    .hsu-header-login-mobile
    > .hsu-desktop-login-direct > span {
        display: inline !important;
        position: static !important;
        transform: none !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        color: inherit !important;
        font: inherit !important;
        line-height: 1 !important;
    }
}

/* HSU_MOBILE_PROFILE_CARD_V4_END */