/* R69 V3.08-FIX1I — R69DE Baseline adapted for Rastaman69DE */
:root{--bg-dark:#070604;--card-bg:rgba(18,18,18,.92);--card-border:rgba(255,204,0,.18);--text-main:#fff8e7;--text-muted:#d6c89d;--reggae-red:#ff3b32;--reggae-gold:#ffcc00;--reggae-green:#00cc44;--shadow:0 24px 70px rgba(0,0,0,.48)}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 12% 10%,rgba(0,204,68,.16),transparent 25%),radial-gradient(circle at 78% 12%,rgba(255,204,0,.14),transparent 28%),radial-gradient(circle at 82% 62%,rgba(255,59,50,.13),transparent 32%),linear-gradient(135deg,#050403,#171006 55%,#050403);color:var(--text-main);font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.5;padding:18px;min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.22;background:repeating-linear-gradient(90deg,transparent 0 42px,rgba(255,255,255,.04) 43px 44px),linear-gradient(to bottom,rgba(255,204,0,.08),transparent 32%)}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.site-header{max-width:1320px;margin:0 auto 24px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:rgba(8,7,5,.86);border:1px solid var(--card-border);padding:12px 18px;border-radius:14px;box-shadow:0 16px 45px rgba(0,0,0,.35);backdrop-filter:blur(14px)}.private-preview-badge{color:var(--reggae-gold);font-size:.82rem;font-weight:900;letter-spacing:1px;border:1px solid rgba(255,204,0,.35);background:rgba(255,204,0,.10);border-radius:999px;padding:7px 12px;white-space:nowrap}.main-navigation ul{display:flex;justify-content:center;align-items:center;list-style:none;gap:24px;flex-wrap:wrap}.main-navigation a{color:#f2e7c4;text-decoration:none;font-weight:800;font-size:.9rem;transition:color .3s ease;position:relative}.main-navigation a:hover,.main-navigation a.active{color:var(--reggae-gold);text-shadow:0 0 8px rgba(255,204,0,.35)}.main-navigation a.active:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--reggae-red),var(--reggae-gold),var(--reggae-green))}.language-selector{display:flex;gap:7px}.lang-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,204,0,.24);color:#f2e7c4;padding:7px 10px;border-radius:999px;cursor:pointer;font-size:.82rem;font-weight:900}.lang-btn.active,.lang-btn:hover{background:var(--reggae-gold);border-color:var(--reggae-gold);color:#160f04}.dashboard-container{max-width:1320px;margin:0 auto}.hero-section{background:linear-gradient(180deg,rgba(18,18,18,.18) 0%,rgba(10,10,10,.98) 100%),radial-gradient(circle at 20% 20%,rgba(0,204,68,.18),transparent 34%),radial-gradient(circle at 74% 14%,rgba(255,204,0,.17),transparent 30%),radial-gradient(circle at 84% 58%,rgba(255,51,51,.14),transparent 34%),linear-gradient(135deg,rgba(10,9,6,.97),rgba(28,18,8,.97));border:1px solid var(--card-border);border-radius:24px;padding:44px;display:grid;grid-template-columns:220px 1fr 180px;align-items:center;gap:36px;margin-bottom:20px;position:relative;overflow:hidden;box-shadow:var(--shadow);min-height:360px}.hero-section:before{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;opacity:.42;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 70%),repeating-linear-gradient(90deg,transparent 0 24px,rgba(0,204,68,.42) 25px 31px,rgba(255,204,0,.46) 32px 38px,rgba(255,51,51,.40) 39px 45px,transparent 46px 62px);mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}.hero-section:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 8%,rgba(255,204,0,.65) 0 6px,transparent 8px),radial-gradient(circle at 22% 11%,rgba(0,204,68,.50) 0 6px,transparent 8px),radial-gradient(circle at 86% 12%,rgba(255,51,51,.45) 0 6px,transparent 8px);opacity:.55}.avatar-container{position:relative;width:205px;height:205px;border-radius:50%;padding:8px;background:conic-gradient(from 220deg,var(--reggae-green),var(--reggae-gold),var(--reggae-red),var(--reggae-green));box-shadow:0 0 45px rgba(255,204,0,.17),0 20px 52px rgba(0,0,0,.52);z-index:2}.profile-avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;background-color:#000;border:4px solid rgba(0,0,0,.65)}.hero-branding{z-index:2;min-width:0}.brand-title{font-family:Impact,'Arial Black','Segoe UI Black',sans-serif;font-size:clamp(3.2rem,8vw,7.4rem);font-weight:900;line-height:.82;letter-spacing:-3px;background:linear-gradient(90deg,var(--reggae-red),var(--reggae-gold),var(--reggae-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:14px;text-transform:uppercase;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}.brand-title:after{content:"";display:block;width:min(620px,95%);height:12px;margin-top:10px;border-radius:999px;background:linear-gradient(90deg,var(--reggae-red),var(--reggae-gold),var(--reggae-green));transform:skewX(-18deg)}.slogan-primary{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(2.1rem,4vw,3.8rem);font-weight:900;color:var(--reggae-gold);line-height:1;text-transform:uppercase;text-shadow:0 8px 18px rgba(0,0,0,.55)}.slogan-secondary{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(1.9rem,3.7vw,3.3rem);font-weight:900;color:var(--reggae-green);line-height:1;margin-bottom:12px;text-transform:uppercase;text-shadow:0 8px 18px rgba(0,0,0,.55)}.slogan-accent{color:var(--text-main);font-family:Impact,'Arial Black',sans-serif;font-size:clamp(1.4rem,2.6vw,2.4rem);font-weight:900;font-style:italic;letter-spacing:2px;text-shadow:0 8px 18px rgba(0,0,0,.55)}.hero-text{color:var(--text-muted);font-size:1rem;max-width:720px;margin-top:14px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.hero-visuals{z-index:2;min-height:180px;position:relative}.lion-icon{position:absolute;right:20px;top:24px;width:86px;height:86px;border-radius:22px;display:grid;place-items:center}.lion-icon:before{content:"♛";color:var(--reggae-gold);font-size:4rem;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}.audio-visualizer-bg{position:absolute;right:0;bottom:18px;width:160px;height:94px;border-radius:16px;opacity:.9;background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(0,204,68,.55) 12px 17px,rgba(255,204,0,.58) 18px 23px,rgba(255,51,51,.45) 24px 29px,transparent 30px 42px);mask-image:linear-gradient(to top,black,transparent 95%)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.stat-card{background:linear-gradient(180deg,rgba(18,18,18,.97),rgba(7,7,6,.98));border:1px solid var(--card-border);border-radius:18px;padding:18px;display:flex;align-items:center;gap:15px;transition:transform .2s ease,border-color .2s ease;box-shadow:var(--shadow);min-height:112px;position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--reggae-red),var(--reggae-gold),var(--reggae-green));opacity:.82}.stat-card:hover{transform:translateY(-2px)}.card-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:rgba(255,255,255,.045);border:1px solid rgba(255,204,0,.22);font-size:1.6rem}.tiktok-icon:before{content:"♪";color:#ff5f6d}.energy-icon:before{content:"▥";color:var(--reggae-green)}.status-icon:before{content:"⌁";color:var(--reggae-gold)}.mixcloud-icon:before{content:"☁";color:#76ff6a}.card-info h2{font-size:.76rem;color:#f4e8bf;letter-spacing:1px;text-transform:uppercase}.stat-number{font-size:2rem;font-weight:900;margin:2px 0;line-height:1}.tiktok-card .stat-number{color:#ff5f6d}.energy-card .stat-number{color:#79ff68}.radio-status-card .stat-number.coming-soon{color:var(--reggae-gold);font-size:1.35rem}.mixcloud-card .stat-number{color:#79ff68}.stat-desc{font-size:.68rem;color:var(--text-muted);font-weight:800;text-transform:uppercase}.content-columns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px}.content-card{background:radial-gradient(circle at 16% 12%,rgba(255,204,0,.07),transparent 28%),linear-gradient(180deg,rgba(18,18,18,.97),rgba(7,7,6,.98));border:1px solid var(--card-border);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}.card-header{border-bottom:1px solid rgba(255,204,0,.14);padding:15px 18px;display:flex;align-items:center;gap:10px}.card-header h3{font-size:.92rem;letter-spacing:1px;color:var(--reggae-gold);text-transform:uppercase}.card-body{padding:18px;flex-grow:1}.radio-player-section .card-body{display:flex;gap:15px}.album-art-container{width:112px;height:112px;border-radius:12px;overflow:hidden;flex-shrink:0;border:1px solid rgba(255,204,0,.24);background:radial-gradient(circle at 28% 18%,rgba(255,204,0,.26),transparent 30%),linear-gradient(135deg,rgba(255,51,51,.28),rgba(0,204,68,.20));display:grid;place-items:center}.album-art-container:before{content:"GOOD\A VIBES\A RADIO";white-space:pre;color:var(--reggae-gold);font-family:Impact,'Arial Black',sans-serif;font-size:1.6rem;line-height:.92;text-align:center}.player-info h4{font-size:1.2rem;margin-top:5px}.badge-now-playing{font-size:.68rem;background-color:rgba(0,204,68,.15);color:var(--reggae-green);padding:3px 7px;border-radius:6px;font-weight:900}.station-sub{font-size:.82rem;color:var(--text-muted)}.genres{font-size:.78rem;color:var(--reggae-gold);margin-top:4px}.mini-visualizer{margin-top:10px;width:120px;height:34px;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(0,204,68,.70) 8px 12px,rgba(255,204,0,.75) 13px 17px,rgba(255,51,51,.58) 18px 22px,transparent 23px 30px);mask-image:linear-gradient(to top,black,transparent 95%)}.card-footer{padding:15px 18px;border-top:1px solid rgba(255,204,0,.14);display:flex;gap:10px}.btn{flex:1;padding:11px 12px;border-radius:999px;font-weight:900;font-size:.82rem;cursor:pointer;text-align:center;text-decoration:none;border:none;transition:opacity .2s,transform .2s}.btn:hover{opacity:.92;transform:translateY(-1px)}.btn-play{background:linear-gradient(90deg,var(--reggae-red),var(--reggae-gold),var(--reggae-green));color:#120d05}.btn-secondary{background-color:transparent;border:1px solid rgba(255,204,0,.24);color:var(--text-main)}.split-layout{display:flex;justify-content:space-between;align-items:center;gap:15px}.social-links-list{list-style:none;display:flex;flex-direction:column;gap:11px}.social-link{color:var(--text-main);font-size:.86rem;transition:color .2s}.social-link:hover{color:var(--reggae-gold)}.qr-code-container{text-align:center;border:1px solid rgba(255,204,0,.24);padding:9px;border-radius:12px;background:#fff;width:122px;flex-shrink:0}.qr-code-container img{width:100%;height:auto}.qr-caption{font-size:.62rem;color:#000;font-weight:900;margin-top:4px}.features-list{display:flex;flex-direction:column;gap:14px}.feature-item{display:flex;gap:14px;align-items:flex-start}.feature-icon{font-size:1.2rem;padding:8px;min-width:38px;height:38px;border-radius:10px;background-color:rgba(255,255,255,.05);display:grid;place-items:center;border:1px solid rgba(255,204,0,.14)}.icon-red{color:var(--reggae-red)}.icon-yellow{color:var(--reggae-gold)}.icon-green{color:var(--reggae-green)}.feature-text h4{font-size:.86rem;letter-spacing:.5px;color:#fff0c9}.feature-text p{font-size:.78rem;color:var(--text-muted)}.btn-gold-outline{background:transparent;border:1px solid var(--reggae-gold);color:var(--reggae-gold);width:100%}.qr-overview{background:linear-gradient(180deg,rgba(18,18,18,.94),rgba(7,7,6,.97));border:1px solid var(--card-border);border-radius:18px;padding:18px;margin-bottom:20px;box-shadow:var(--shadow)}.qr-overview h3{color:var(--reggae-gold);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.qr-intro{color:var(--text-muted);margin-bottom:14px}.qr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.qr-item{display:grid;place-items:center;gap:8px;padding:12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,204,0,.14)}.qr-item img{width:118px;height:118px;object-fit:contain;padding:7px;background:#fff;border-radius:10px}.qr-item strong{color:#f8edc7;font-size:.85rem}.site-footer{max-width:1320px;margin:0 auto;display:flex;justify-content:center;gap:40px;border-top:1px solid rgba(255,204,0,.15);padding:22px 20px;font-weight:900;font-size:.9rem;letter-spacing:1px;flex-wrap:wrap}.site-footer .ticker-item:nth-child(1){color:var(--reggae-red)}.site-footer .ticker-item:nth-child(2){color:var(--reggae-gold)}.site-footer .ticker-item:nth-child(3){color:var(--reggae-green)}@media(max-width:1180px){.site-header{grid-template-columns:1fr;justify-items:start}.main-navigation ul{justify-content:flex-start;gap:16px}.hero-section{grid-template-columns:180px 1fr}.hero-visuals{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}.content-columns-grid{grid-template-columns:1fr}.qr-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){body{padding:12px}.site-header{padding:12px}.private-preview-badge{font-size:.74rem}.main-navigation ul{gap:12px;font-size:.8rem}.hero-section{grid-template-columns:1fr;text-align:center;padding:28px 18px}.avatar-container{margin:0 auto;width:190px;height:190px}.brand-title{font-size:clamp(3rem,16vw,4.5rem);letter-spacing:-2px}.brand-title:after{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.stats-grid{grid-template-columns:1fr}.split-layout{flex-direction:column}.radio-player-section .card-body{flex-direction:column;align-items:center;text-align:center}.card-footer{flex-direction:column}.qr-grid{grid-template-columns:1fr}.site-footer{gap:18px;font-size:.82rem}}

/* ==========================================================================
   V3.08-FIX1J — Mockup Closer Polish
   Keeps R69DE structure, improves stage / hero / avatar / premium look.
   ========================================================================== */

body {
    padding-top: 16px;
}

.site-header {
    max-width: 1420px;
    border-radius: 16px;
}

.dashboard-container,
.site-footer {
    max-width: 1420px;
}

/* Hero closer to Mockup 2: larger stage, bigger avatar, stronger brand */
.hero-section {
    min-height: 470px;
    grid-template-columns: 280px 1fr 210px;
    padding: 58px 54px 54px;
    gap: 42px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(18,18,18,0.05) 0%, rgba(10,10,10,.96) 100%),
        radial-gradient(circle at 17% 24%, rgba(0,204,68,.26), transparent 34%),
        radial-gradient(circle at 58% 20%, rgba(255,204,0,.18), transparent 30%),
        radial-gradient(circle at 84% 50%, rgba(255,51,51,.18), transparent 34%),
        linear-gradient(135deg, rgba(7,7,5,.98), rgba(34,18,8,.97));
}

/* Equalizer band less like test bars, more like stage floor */
.hero-section::before {
    height: 132px;
    opacity: .34;
    background:
        linear-gradient(to top, rgba(0,0,0,.80), transparent 78%),
        repeating-linear-gradient(
            90deg,
            transparent 0 30px,
            rgba(0,204,68,.45) 31px 38px,
            rgba(255,204,0,.50) 39px 46px,
            rgba(255,51,51,.38) 47px 54px,
            transparent 55px 76px
        );
}

/* More stage particles, still not too much */
.hero-section::after {
    background:
        radial-gradient(circle at 12% 9%, rgba(255,204,0,.70) 0 6px, transparent 8px),
        radial-gradient(circle at 22% 13%, rgba(0,204,68,.55) 0 6px, transparent 8px),
        radial-gradient(circle at 88% 10%, rgba(255,51,51,.50) 0 6px, transparent 8px),
        radial-gradient(circle at 76% 75%, rgba(255,204,0,.30) 0 4px, transparent 7px);
    opacity: .62;
}

/* Avatar bigger and more like hero identity anchor */
.avatar-container {
    width: 248px;
    height: 248px;
    padding: 9px;
    box-shadow:
        0 0 0 1px rgba(255,204,0,.30),
        0 0 52px rgba(255,204,0,.18),
        0 24px 70px rgba(0,0,0,.62);
}

/* Brand larger and more poster-like */
.brand-title {
    font-size: clamp(4.2rem, 9.5vw, 8.9rem);
    line-height: .80;
    letter-spacing: -4px;
    filter:
        drop-shadow(0 14px 18px rgba(0,0,0,.72))
        drop-shadow(0 0 10px rgba(255,204,0,.10));
}

.brand-title::after {
    height: 15px;
    width: min(760px, 96%);
    margin-top: 12px;
}

.slogan-primary {
    font-size: clamp(2.5rem, 4.6vw, 4.4rem);
}

.slogan-secondary {
    font-size: clamp(2.25rem, 4.25vw, 3.9rem);
}

.slogan-accent {
    font-size: clamp(1.7rem, 3vw, 2.75rem);
    margin-top: 4px;
}

.hero-text {
    max-width: 780px;
    font-size: 1.06rem;
    color: #f0dfb7;
}

.hero-actions .btn {
    min-width: 160px;
    padding-top: 13px;
    padding-bottom: 13px;
}

/* Right side: stronger crown / speaker / stage feeling */
.hero-visuals {
    min-height: 250px;
}

.lion-icon {
    right: 28px;
    top: 34px;
    width: 105px;
    height: 105px;
}

.lion-icon::before {
    font-size: 5.2rem;
}

.audio-visualizer-bg {
    right: 4px;
    bottom: 38px;
    width: 210px;
    height: 132px;
    border-radius: 20px;
    opacity: .82;
}

/* Simulated speaker stack at the right edge */
.hero-visuals::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 92px;
    width: 74px;
    height: 190px;
    border-radius: 28px;
    border: 1px solid rgba(255,204,0,.18);
    background:
        radial-gradient(circle at 50% 24%, rgba(255,204,0,.55) 0 8px, rgba(0,0,0,.92) 9px 18px, rgba(255,204,0,.20) 19px 28px, transparent 29px),
        radial-gradient(circle at 50% 54%, rgba(255,204,0,.55) 0 8px, rgba(0,0,0,.92) 9px 18px, rgba(255,204,0,.20) 19px 28px, transparent 29px),
        radial-gradient(circle at 50% 82%, rgba(255,204,0,.55) 0 8px, rgba(0,0,0,.92) 9px 18px, rgba(255,204,0,.20) 19px 28px, transparent 29px),
        linear-gradient(180deg, rgba(20,17,12,.94), rgba(5,5,4,.98));
    box-shadow: 0 24px 50px rgba(0,0,0,.55);
}

/* KPI cards a little stronger and closer */
.stats-grid {
    margin-top: -4px;
    gap: 18px;
}

.stat-card {
    min-height: 122px;
    border-radius: 20px;
    padding: 20px;
}

.stat-number {
    font-size: 2.25rem;
}

/* Main cards more premium */
.content-card,
.qr-overview {
    border-radius: 20px;
    border-color: rgba(255,204,0,.22);
}

.content-columns-grid {
    gap: 20px;
}

/* On medium screens avoid forcing the right speaker */
@media (max-width: 1180px) {
    .hero-section {
        grid-template-columns: 240px 1fr;
        min-height: auto;
    }

    .avatar-container {
        width: 230px;
        height: 230px;
    }

    .brand-title {
        font-size: clamp(3.6rem, 10vw, 6.5rem);
    }
}

@media (max-width: 720px) {
    .hero-section {
        padding: 34px 20px 36px;
    }

    .avatar-container {
        width: 210px;
        height: 210px;
    }

    .brand-title {
        font-size: clamp(3.1rem, 17vw, 4.8rem);
    }

    .slogan-primary {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .slogan-secondary {
        font-size: clamp(1.8rem, 9vw, 2.7rem);
    }

    .slogan-accent {
        font-size: clamp(1.25rem, 7vw, 2rem);
    }
}

/* ==========================================================================
   V3.08-FIX1M — Target Mockup Alignment Patch
   Zielbild: Premium-Reggae-Bühne, KPI am Hero-Floor, 3 Cards darunter.
   ========================================================================== */

/* Gesamtrahmen näher an Mockup: kompakter, weniger Dashboard-Leere */
body {
    padding: 14px;
    background:
        radial-gradient(circle at 12% 8%, rgba(0,204,68,.12), transparent 28%),
        radial-gradient(circle at 78% 8%, rgba(255,204,0,.11), transparent 26%),
        linear-gradient(135deg, #050403, #150d06 58%, #050403);
}

.site-header,
.dashboard-container,
.site-footer {
    max-width: 1280px;
}

/* Header kompakter wie Zielbild */
.site-header {
    min-height: 54px;
    padding: 9px 16px;
    margin-bottom: 18px;
    border-radius: 12px;
}

.private-preview-badge {
    font-size: .75rem;
    padding: 6px 10px;
}

.main-navigation a {
    font-size: .82rem;
}

.language-selector .lang-btn,
.lang-btn {
    padding: 6px 9px;
    font-size: .75rem;
}

/* Hero: mehr Stage, weniger leerer Rahmen */
.hero-section {
    min-height: 395px;
    grid-template-columns: 285px minmax(0, 1fr) 170px;
    padding: 38px 38px 72px;
    gap: 30px;
    border-radius: 20px;
    margin-bottom: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.74) 100%),
        radial-gradient(circle at 19% 33%, rgba(0,204,68,.22), transparent 33%),
        radial-gradient(circle at 52% 8%, rgba(255,204,0,.17), transparent 28%),
        radial-gradient(circle at 87% 44%, rgba(255,51,51,.16), transparent 30%),
        linear-gradient(135deg, rgba(7,6,4,.98), rgba(30,17,8,.98));
}

/* Crowd-/Stage-Floor näher an Mockup */
.hero-section::before {
    height: 138px;
    opacity: .42;
    background:
        linear-gradient(to top, rgba(0,0,0,.90), rgba(0,0,0,.18) 62%, transparent),
        repeating-linear-gradient(
            90deg,
            transparent 0 22px,
            rgba(0,204,68,.46) 23px 29px,
            rgba(255,204,0,.50) 30px 36px,
            rgba(255,51,51,.40) 37px 43px,
            transparent 44px 64px
        );
}

/* Bühnenlichter stärker */
.hero-section::after {
    opacity: .75;
    background:
        radial-gradient(circle at 12% 9%, rgba(255,204,0,.80) 0 5px, transparent 8px),
        radial-gradient(circle at 21% 13%, rgba(0,204,68,.60) 0 5px, transparent 8px),
        radial-gradient(circle at 88% 10%, rgba(255,51,51,.60) 0 5px, transparent 8px),
        radial-gradient(circle at 76% 72%, rgba(255,204,0,.38) 0 4px, transparent 7px),
        radial-gradient(circle at 48% 78%, rgba(0,204,68,.24) 0 4px, transparent 8px);
}

/* Avatar wie Zielbild: links größer und klarer */
.avatar-container {
    width: 255px;
    height: 255px;
    padding: 8px;
    align-self: center;
}

/* Logo muss komplett sichtbar bleiben */
.hero-branding {
    min-width: 0;
    transform: translateY(-4px);
}

.brand-title {
    font-size: clamp(4.2rem, 7.2vw, 6.9rem);
    line-height: .84;
    letter-spacing: -2px;
    white-space: nowrap;
    max-width: 100%;
    filter:
        drop-shadow(0 10px 16px rgba(0,0,0,.78))
        drop-shadow(0 0 9px rgba(255,204,0,.12));
}

/* Brush-Eindruck minimal stärker, ohne echte Logo-Grafik */
.brand-title {
    transform: skewX(-4deg);
}

.brand-title::after {
    height: 13px;
    width: min(630px, 88%);
    margin-top: 9px;
}

/* Slogans näher an Mockup */
.slogan-primary {
    font-size: clamp(2.2rem, 3.45vw, 3.5rem);
    line-height: .96;
}

.slogan-secondary {
    font-size: clamp(2rem, 3.15vw, 3.15rem);
    line-height: .96;
}

.slogan-accent {
    font-size: clamp(1.35rem, 2.25vw, 2.1rem);
    margin-top: 10px;
}

.hero-text {
    font-size: .96rem;
    max-width: 700px;
    margin-top: 12px;
    color: #ead9ac;
}

/* Buttons wie Zielbild: kompakt, unten im Hero */
.hero-actions {
    margin-top: 16px;
}

.hero-actions .btn {
    min-width: 150px;
    padding: 11px 14px;
}

/* Rechte Stage-Seite: mehr Mockup, aber nicht störend */
.hero-visuals {
    min-height: 245px;
}

.lion-icon {
    right: 24px;
    top: 72px;
    width: 78px;
    height: 78px;
    opacity: .95;
}

.lion-icon::before {
    font-size: 4.1rem;
}

.audio-visualizer-bg {
    right: 24px;
    bottom: 70px;
    width: 146px;
    height: 124px;
    opacity: .75;
}

.hero-visuals::after {
    right: -2px;
    top: 116px;
    width: 60px;
    height: 165px;
    opacity: .86;
}

/* KPI-Karten an Hero-Floor ziehen wie im Zielbild */
.stats-grid {
    position: relative;
    z-index: 4;
    margin-top: -42px;
    margin-bottom: 18px;
    gap: 12px;
}

.stat-card {
    min-height: 112px;
    padding: 17px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20,20,18,.96), rgba(8,8,7,.98));
}

.card-icon {
    width: 54px;
    height: 54px;
}

.stat-number {
    font-size: 2rem;
}

.radio-status-card .stat-number.coming-soon {
    font-size: 1.22rem;
}

/* Cards kompakter, näher am Zielbild */
.content-columns-grid {
    gap: 12px;
    margin-bottom: 14px;
}

.content-card {
    border-radius: 14px;
}

.card-header {
    padding: 12px 16px;
}

.card-body {
    padding: 16px;
}

.card-footer {
    padding: 12px 16px;
}

/* Follow QR stärker wie im Zielbild */
.qr-code-container {
    width: 150px;
    padding: 8px;
    border-radius: 10px;
}

.social-links-list {
    gap: 10px;
}

/* Radio Cover größer */
.album-art-container {
    width: 128px;
    height: 128px;
}

/* QR-Übersicht ausblenden: im Zielbild sitzt QR nur im Follow-Panel */
.qr-overview {
    display: none;
}

/* Footer wie Zielbild kompakter und stärker */
.site-footer {
    margin-top: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255,204,0,.18);
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 1.05rem;
}

/* Desktop kleiner: Logo nicht abschneiden */
@media (max-width: 1280px) {
    .hero-section {
        grid-template-columns: 255px minmax(0,1fr);
        padding-right: 34px;
    }

    .hero-visuals {
        display: none;
    }

    .brand-title {
        white-space: normal;
        font-size: clamp(3.7rem, 7.6vw, 6rem);
    }

    .avatar-container {
        width: 240px;
        height: 240px;
    }
}

@media (max-width: 980px) {
    .stats-grid {
        margin-top: 14px;
    }
}

@media (max-width: 720px) {
    .hero-section {
        padding: 30px 18px 42px;
    }

    .stats-grid {
        margin-top: 14px;
    }

    .avatar-container {
        width: 210px;
        height: 210px;
    }

    .brand-title {
        transform: none;
        white-space: normal;
    }
}

/* ==========================================================================
   V3.08-FIX1N — Viewport Composition / Card Visibility
   Ziel: Hero + KPI + 3 Premium-Cards näher wie Zielmockup im ersten Blick.
   ========================================================================== */

/* Header etwas kompakter */
.site-header {
    margin-bottom: 14px;
}

/* Hero vertikal kompakter, ohne Zielbild-Richtung zu verlieren */
.hero-section {
    min-height: 345px;
    padding: 28px 36px 60px;
    grid-template-columns: 245px minmax(0, 1fr) 145px;
    gap: 26px;
}

/* Avatar bleibt groß, aber nicht mehr viewport-fressend */
.avatar-container {
    width: 225px;
    height: 225px;
}

/* Logo/Slogans minimal kompakter */
.brand-title {
    font-size: clamp(3.7rem, 6.65vw, 6.25rem);
    line-height: .82;
}

.brand-title::after {
    height: 11px;
    margin-top: 7px;
}

.slogan-primary {
    font-size: clamp(2rem, 3.1vw, 3.05rem);
}

.slogan-secondary {
    font-size: clamp(1.85rem, 2.85vw, 2.75rem);
}

.slogan-accent {
    font-size: clamp(1.25rem, 1.95vw, 1.85rem);
    margin-top: 7px;
}

.hero-text {
    font-size: .9rem;
    margin-top: 9px;
}

.hero-actions {
    margin-top: 12px;
}

.hero-actions .btn {
    padding: 9px 13px;
    min-width: 140px;
}

/* Stage-Floor bleibt, aber nimmt weniger Höhe */
.hero-section::before {
    height: 112px;
}

/* Rechte Elemente dezenter, weniger Platzverbrauch */
.hero-visuals {
    min-height: 200px;
}

.lion-icon {
    top: 54px;
}

.audio-visualizer-bg {
    bottom: 52px;
    height: 100px;
}

.hero-visuals::after {
    top: 96px;
    height: 145px;
}

/* KPI-Karten stärker wie Zielmockup an Hero-Floor ziehen */
.stats-grid {
    margin-top: -54px;
    gap: 10px;
    margin-bottom: 12px;
}

.stat-card {
    min-height: 98px;
    padding: 14px;
}

.card-icon {
    width: 48px;
    height: 48px;
}

.card-info h2 {
    font-size: .68rem;
}

.stat-number {
    font-size: 1.75rem;
}

.radio-status-card .stat-number.coming-soon {
    font-size: 1.05rem;
}

.stat-desc {
    font-size: .60rem;
}

/* 3 Premium Cards im ersten Blick besser sichtbar */
.content-columns-grid {
    gap: 10px;
    margin-bottom: 10px;
}

.card-header {
    padding: 10px 14px;
}

.card-body {
    padding: 13px;
}

.card-footer {
    padding: 10px 14px;
}

.album-art-container {
    width: 112px;
    height: 112px;
}

.qr-code-container {
    width: 132px;
}

/* Footer nicht zu weit unten ziehen */
.site-footer {
    margin-top: 8px;
    padding: 12px 18px;
}

/* Bei kleineren Desktops nicht abschneiden */
@media (max-width: 1280px) {
    .hero-section {
        grid-template-columns: 225px minmax(0, 1fr);
        min-height: 340px;
    }

    .avatar-container {
        width: 210px;
        height: 210px;
    }

    .stats-grid {
        margin-top: -38px;
    }
}

@media (max-width: 980px) {
    .stats-grid {
        margin-top: 12px;
    }
}


/* ==========================================================================
   V3.08-FIX1O — Final Fine Tuning / Card Visibility
   Ziel: Zielbild-Richtung behalten, unten mehr Premium-Cards sichtbar machen.
   ========================================================================== */

/* Minimal kompakter, damit mehr vom Gesamtbild sichtbar wird */
body {
    padding-top: 10px;
}

.site-header {
    margin-bottom: 10px;
}

/* Hero noch leicht kompakter, aber ohne Wirkung zu verlieren */
.hero-section {
    min-height: 320px;
    padding-top: 24px;
    padding-bottom: 52px;
}

/* Avatar nur minimal kleiner, Zielbild bleibt stark */
.avatar-container {
    width: 212px;
    height: 212px;
}

/* Brand minimal kleiner, dadurch bessere Gesamtkomposition */
.brand-title {
    font-size: clamp(3.55rem, 6.25vw, 5.9rem);
}

.slogan-primary {
    font-size: clamp(1.9rem, 2.9vw, 2.85rem);
}

.slogan-secondary {
    font-size: clamp(1.75rem, 2.65vw, 2.55rem);
}

.slogan-accent {
    font-size: clamp(1.18rem, 1.8vw, 1.72rem);
}

/* Text/Buttons etwas kompakter */
.hero-text {
    font-size: .86rem;
    margin-top: 7px;
}

.hero-actions {
    margin-top: 9px;
}

.hero-actions .btn {
    padding: 8px 12px;
}

/* KPI weiter sauber am Hero-Floor */
.stats-grid {
    margin-top: -50px;
    margin-bottom: 10px;
}

.stat-card {
    min-height: 92px;
    padding: 12px 14px;
}

/* Untere Premium-Cards sichtbarer */
.content-columns-grid {
    margin-top: 0;
}

.content-card {
    min-height: 250px;
}

.card-header {
    padding-top: 9px;
    padding-bottom: 9px;
}

.card-body {
    padding-top: 12px;
    padding-bottom: 12px;
}

.card-footer {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* QR im Follow-Panel etwas höher/kompakter */
.qr-code-container {
    width: 118px;
}

.social-links-list {
    gap: 8px;
}

.social-link {
    font-size: .80rem;
}

/* Radio-Card kompakter */
.album-art-container {
    width: 102px;
    height: 102px;
}

.player-info h4 {
    font-size: 1.05rem;
}

.station-sub,
.genres,
.feature-text p {
    font-size: .72rem;
}

/* Speaker rechts etwas weniger dominant */
.hero-visuals::after {
    opacity: .72;
}

.lion-icon {
    opacity: .88;
}

/* Bei 16:9 Desktop soll die erste Seite mehr wie Zielbild wirken */
@media (min-width: 1200px) {
    .dashboard-container,
    .site-header,
    .site-footer {
        max-width: 1240px;
    }
}


/* ==========================================================================
   V3.08-FIX1P — Hero Cohesion / Stage Integration Patch
   Ziel: Hero als echte Bühnen-Komposition statt lose Elemente.
   ========================================================================== */

/* --- 1) HERO stärker als eine zusammenhängende Bühne --- */
.hero-section {
    position: relative;
    isolation: isolate;
    min-height: 332px;
    padding: 24px 34px 58px;
    grid-template-columns: 250px minmax(0, 1fr) 130px;
    gap: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.54) 100%),
        radial-gradient(circle at 16% 34%, rgba(0,204,68,.18), transparent 30%),
        radial-gradient(circle at 55% 12%, rgba(255,204,0,.13), transparent 25%),
        radial-gradient(circle at 88% 24%, rgba(255,51,51,.14), transparent 24%),
        linear-gradient(135deg, rgba(7,7,5,.98), rgba(28,15,7,.98) 52%, rgba(23,9,6,.98));
}

/* zusätzlicher dunkler Bühnenkörper hinter Avatar + Branding */
.hero-section .hero-branding,
.hero-section .avatar-container,
.hero-section .hero-visuals {
    position: relative;
    z-index: 2;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 50%, rgba(255,204,0,.05), transparent 22%),
        radial-gradient(circle at 72% 42%, rgba(255,120,0,.06), transparent 26%),
        linear-gradient(to right, rgba(0,0,0,.16), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 78%, rgba(0,0,0,.18));
}

/* --- 2) Avatar und Branding enger koppeln --- */
.avatar-container {
    width: 214px;
    height: 214px;
    align-self: center;
    justify-self: center;
    margin-right: -8px;
    box-shadow:
        0 0 0 1px rgba(255,204,0,.24),
        0 0 38px rgba(255,204,0,.10),
        0 18px 40px rgba(0,0,0,.38);
}

.hero-branding {
    align-self: center;
    margin-left: -6px;
}

.brand-title {
    font-size: clamp(3.7rem, 6.15vw, 5.8rem);
    line-height: .84;
    margin-bottom: 4px;
    text-shadow: 0 10px 18px rgba(0,0,0,.45);
}

.brand-title::after {
    width: min(760px, 94%);
    height: 10px;
    margin-top: 6px;
    border-radius: 999px;
    opacity: .95;
}

.slogan-primary {
    margin-top: 2px;
    font-size: clamp(1.95rem, 2.95vw, 2.8rem);
}

.slogan-secondary {
    margin-top: -2px;
    font-size: clamp(1.78rem, 2.7vw, 2.45rem);
}

.slogan-accent {
    margin-top: 6px;
    font-size: clamp(1.16rem, 1.75vw, 1.62rem);
}

/* textblock insgesamt kompakter und hero-näher */
.hero-text {
    max-width: 840px;
    margin-top: 8px;
    font-size: .84rem;
    line-height: 1.35;
    color: #e6d6ab;
}

/* Buttons leicht dichter unter Text */
.hero-actions {
    margin-top: 8px;
    gap: 12px;
}

.hero-actions .btn {
    padding: 8px 12px;
    min-width: 138px;
    border-radius: 999px;
}

/* --- 3) Rechte Seite subtiler und integrierter --- */
.hero-visuals {
    align-self: center;
    justify-self: end;
    min-height: 180px;
    opacity: .90;
}

/* Krone, Streifen, Speaker sauberer zusammenfassen */
.lion-icon {
    top: 86px;
    right: 14px;
    width: 62px;
    height: 62px;
    opacity: .72;
    filter: drop-shadow(0 0 10px rgba(255,204,0,.14));
}

.lion-icon::before {
    font-size: 3.3rem;
}

.audio-visualizer-bg {
    right: 20px;
    bottom: 70px;
    width: 118px;
    height: 88px;
    opacity: .50;
    border-radius: 12px;
    filter: blur(.1px);
}

.hero-visuals::after {
    right: 2px;
    top: 88px;
    width: 48px;
    height: 134px;
    border-radius: 18px;
    opacity: .56;
    box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

/* --- 4) Untere Hero-Zone als hochwertiger Stage-Floor --- */
.hero-section::before {
    height: 108px;
    opacity: .32;
    background:
        linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.28) 52%, transparent 100%),
        repeating-linear-gradient(
            90deg,
            transparent 0 28px,
            rgba(0,204,68,.38) 29px 36px,
            rgba(255,204,0,.42) 37px 44px,
            rgba(255,51,51,.30) 45px 52px,
            transparent 53px 78px
        );
}

/* zusätzliche Lichtkante, damit der Floor hochwertiger wirkt */
.hero-section .hero-branding::after {
    content: "";
    position: absolute;
    left: 0;
    right: 8%;
    bottom: -18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,204,0,.22), rgba(0,204,68,.18), transparent);
    opacity: .8;
    pointer-events: none;
}

/* --- 5) KPI-Leiste stärker an den Hero anbinden --- */
.stats-grid {
    position: relative;
    margin-top: -58px;
    margin-bottom: 12px;
    gap: 8px;
    z-index: 5;
}

.stats-grid::before {
    content: "";
    position: absolute;
    left: 1.5%;
    right: 1.5%;
    top: -10px;
    height: 16px;
    background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.18));
    pointer-events: none;
}

.stat-card {
    min-height: 88px;
    padding: 11px 13px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(17,17,15,.98), rgba(8,8,7,.98));
    box-shadow:
        0 8px 18px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.02);
}

.card-icon {
    width: 44px;
    height: 44px;
}

.card-info h2 {
    font-size: .66rem;
}

.stat-number {
    font-size: 1.62rem;
}

.stat-desc {
    font-size: .58rem;
}

/* --- 6) untene Cards minimal sauberer anschließen --- */
.content-columns-grid {
    gap: 10px;
    margin-top: 2px;
}

.content-card {
    border-radius: 14px;
    overflow: hidden;
}

.card-header {
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}

.card-body {
    padding: 13px;
}

.card-footer {
    padding: 10px 14px;
}

/* --- 7) falls rechts zu dekorativ wirkt: auf kleineren Screens beruhigen --- */
@media (max-width: 1280px) {
    .hero-section {
        grid-template-columns: 225px minmax(0, 1fr);
        gap: 16px;
    }

    .hero-visuals {
        display: none;
    }

    .avatar-container {
        width: 205px;
        height: 205px;
        margin-right: 0;
    }

    .hero-branding {
        margin-left: 0;
    }
}

@media (max-width: 980px) {
    .stats-grid {
        margin-top: 10px;
    }
}

@media (max-width: 720px) {
    .hero-section {
        min-height: auto;
        padding: 24px 18px 34px;
    }

    .avatar-container {
        width: 190px;
        height: 190px;
    }

    .brand-title {
        font-size: clamp(3.1rem, 13vw, 4.8rem);
    }

    .hero-text {
        font-size: .82rem;
    }
}


/* ==========================================================================
   V3.08-FIX1Q — Brand Light / Stage Energy Restore
   Ziel: FIX1P-Komposition behalten, aber Branding und Bühne wieder lebendiger.
   ========================================================================== */

/* Hero wieder etwas heller und lebendiger, ohne Überladung */
.hero-section {
    background:
        linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.44) 100%),
        radial-gradient(circle at 16% 34%, rgba(0,204,68,.24), transparent 31%),
        radial-gradient(circle at 49% 10%, rgba(255,204,0,.20), transparent 28%),
        radial-gradient(circle at 84% 32%, rgba(255,51,51,.18), transparent 27%),
        linear-gradient(135deg, rgba(7,7,5,.98), rgba(31,17,7,.98) 52%, rgba(24,9,6,.98));
}

/* Abdunklung reduzieren */
.hero-section::after {
    opacity: .55;
    background:
        radial-gradient(circle at 19% 44%, rgba(255,204,0,.07), transparent 24%),
        radial-gradient(circle at 68% 36%, rgba(255,120,0,.08), transparent 28%),
        linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.10));
}

/* Logo wieder hell, kräftig, markenstark */
.brand-title {
    background: linear-gradient(90deg, #ff3b32 0%, #ff8a24 24%, #ffcc00 52%, #9fe01d 74%, #00cc44 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 11px 15px rgba(0,0,0,.68))
        drop-shadow(0 0 10px rgba(255,204,0,.14));
    opacity: 1;
}

/* Unterstrich wieder frischer */
.brand-title::after {
    background: linear-gradient(90deg, #ff3b32, #ffcc00, #00cc44);
    opacity: 1;
}

/* Slogans wieder etwas mehr Licht */
.slogan-primary {
    color: #ffd21f;
    text-shadow: 0 7px 15px rgba(0,0,0,.56);
}

.slogan-secondary {
    color: #00d954;
    text-shadow: 0 7px 15px rgba(0,0,0,.56);
}

.slogan-accent {
    color: #fff7e8;
    text-shadow:
        0 7px 15px rgba(0,0,0,.62),
        0 0 10px rgba(255,204,0,.10);
}

/* Avatar minimal mehr Glanz, bleibt echt und nicht künstlich */
.avatar-container {
    box-shadow:
        0 0 0 1px rgba(255,204,0,.30),
        0 0 42px rgba(255,204,0,.16),
        0 18px 42px rgba(0,0,0,.42);
}

/* Stage-Floor hochwertiger, weniger dumpf */
.hero-section::before {
    opacity: .40;
    background:
        linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.20) 52%, transparent 100%),
        repeating-linear-gradient(
            90deg,
            transparent 0 28px,
            rgba(0,204,68,.48) 29px 36px,
            rgba(255,204,0,.52) 37px 44px,
            rgba(255,51,51,.34) 45px 52px,
            transparent 53px 78px
        );
}

/* Rechte Seite: nicht lauter, nur hochwertiger sichtbar */
.lion-icon {
    opacity: .82;
}

.lion-icon::before {
    color: #ffd21f;
    filter: drop-shadow(0 0 12px rgba(255,204,0,.20));
}

.audio-visualizer-bg {
    opacity: .62;
}

.hero-visuals::after {
    opacity: .62;
}

/* KPI-Leiste leicht stärker, damit sie wie Teil der Bühne wirkt */
.stat-card {
    background:
        linear-gradient(180deg, rgba(22,22,19,.985), rgba(8,8,7,.99));
    border-color: rgba(255,204,0,.22);
}

.stat-card::after {
    opacity: 1;
}

/* Cards nicht dunkler machen als nötig */
.content-card {
    background:
        radial-gradient(circle at 16% 12%, rgba(255,204,0,.055), transparent 28%),
        linear-gradient(180deg, rgba(18,18,16,.97), rgba(7,7,6,.98));
}


/* ==========================================================================
   V3.08-FIX1R — SVG Hero Asset Foundation / Hybrid Layout Integration
   Hybrid-Hero: SVG-Bühne als skalierbare Grafiklayer, echte Inhalte bleiben HTML.
   ========================================================================== */

.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(135deg, #050403, #160d06 55%, #260b06);
}

/* Alte CSS-Deko im Hero zurücknehmen: SVG übernimmt die Bühne */
.hero-section::before,
.hero-section::after {
    opacity: 0 !important;
}

/* SVG Stage Layer */
.hero-svg-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
    overflow: hidden;
}

.hero-svg-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* echte HTML-Inhalte über SVG */
.hero-section .avatar-container,
.hero-section .hero-branding,
.hero-section .hero-visuals {
    position: relative;
    z-index: 2;
}

/* Avatar stärker mit Bühne verbinden */
.avatar-container {
    background:
        conic-gradient(from 220deg, #00cc44, #ffcc00, #ff3333, #00cc44);
    box-shadow:
        0 0 0 1px rgba(255,204,0,.35),
        0 0 38px rgba(255,204,0,.16),
        0 20px 52px rgba(0,0,0,.60);
}

/* Branding bleibt echter HTML-Text, bekommt aber mehr Bühnenlicht */
.brand-title {
    background: linear-gradient(90deg, #ff3b32 0%, #ff8a24 24%, #ffcc00 52%, #9fe01d 74%, #00cc44 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 12px 18px rgba(0,0,0,.78))
        drop-shadow(0 0 12px rgba(255,204,0,.16));
}

.brand-title::after {
    background: linear-gradient(90deg, #ff3333, #ffcc00, #00cc44);
    box-shadow: 0 0 18px rgba(255,204,0,.12);
}

/* rechte lose CSS-Deko zurücknehmen: SVG trägt Speaker/EQ */
.hero-visuals {
    opacity: .28;
}

.lion-icon,
.audio-visualizer-bg,
.hero-visuals::after {
    opacity: .22 !important;
}

/* KPI stärker in SVG-Stage integrieren */
.stats-grid {
    position: relative;
    z-index: 5;
}

.stat-card {
    backdrop-filter: blur(8px);
    background:
        linear-gradient(180deg, rgba(18,18,16,.94), rgba(7,7,6,.985));
    border-color: rgba(255,204,0,.26);
}

/* SVG-Fallback: falls img nicht lädt, bleibt Gradient sichtbar */
.hero-svg-stage img:not([src]) {
    display: none;
}

/* Mobile: SVG bleibt Hintergrund, Inhalte bleiben lesbar */
@media (max-width: 720px) {
    .hero-svg-stage img {
        object-position: center center;
    }

    .hero-section {
        background:
            radial-gradient(circle at 20% 20%, rgba(0,204,68,.16), transparent 35%),
            radial-gradient(circle at 70% 10%, rgba(255,204,0,.14), transparent 30%),
            linear-gradient(135deg, #050403, #160d06 55%, #260b06);
    }
}

/* ==========================================================================
   V3.08-FIX1S — SVG Layer Tuning / Brand Readability
   Ziel: SVG-Bühne behalten, aber Branding/Claims klar nach vorne holen.
   ========================================================================== */

/* SVG-Bühne soll Bühne sein, nicht Text übermalen */
.hero-svg-stage {
    opacity: .72;
}

.hero-svg-stage img {
    object-position: center center;
    filter:
        saturate(1.08)
        contrast(1.02)
        brightness(.88);
}

/* Hero-Inhalte deutlich über die SVG-Bühne */
.hero-section .avatar-container,
.hero-section .hero-branding {
    z-index: 6;
}

/* Alte rechte CSS-Deko konsequent rausnehmen, SVG übernimmt die Stage */
.hero-visuals,
.lion-icon,
.audio-visualizer-bg,
.hero-visuals::after {
    display: none !important;
}

/* Hero-Grid neu balancieren: keine leere dritte Spalte mehr */
.hero-section {
    grid-template-columns: 245px minmax(0, 1fr);
    gap: 24px;
    padding-right: 42px;
}

/* Logo wieder hell, kräftig und lesbar */
.brand-title {
    background: linear-gradient(
        90deg,
        #ff3b32 0%,
        #ff7a1a 22%,
        #ffcc00 50%,
        #b8e928 72%,
        #00d957 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 9px 13px rgba(0,0,0,.82))
        drop-shadow(0 0 7px rgba(255,204,0,.18)) !important;
}

/* Dezent dunkler Leserahmen hinter Branding, damit SVG nicht stört */
.hero-branding {
    position: relative;
}

.hero-branding::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -18px;
    right: -22px;
    top: -18px;
    bottom: -18px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 30% 30%, rgba(0,0,0,.36), rgba(0,0,0,.18) 48%, transparent 78%);
    pointer-events: none;
}

/* Claims wieder knackiger */
.slogan-primary {
    color: #ffd21f !important;
    text-shadow:
        0 7px 12px rgba(0,0,0,.82),
        0 0 6px rgba(255,204,0,.12);
}

.slogan-secondary {
    color: #00dd55 !important;
    text-shadow:
        0 7px 12px rgba(0,0,0,.82),
        0 0 6px rgba(0,204,68,.14);
}

.slogan-accent {
    color: #fff8ed !important;
    text-shadow:
        0 7px 12px rgba(0,0,0,.82),
        0 0 7px rgba(255,204,0,.12);
}

/* Avatar stärker mit Bühne, aber nicht überstrahlen */
.avatar-container {
    z-index: 6;
    box-shadow:
        0 0 0 1px rgba(255,204,0,.38),
        0 0 44px rgba(255,204,0,.18),
        0 18px 44px rgba(0,0,0,.58);
}

/* CTA-Zeile lesbarer über Bühne */
.hero-actions {
    position: relative;
    z-index: 7;
}

.hero-actions .btn {
    box-shadow: 0 10px 22px rgba(0,0,0,.30);
}

/* KPI bleibt angebunden, aber etwas stärker vom Hero abgesetzt */
.stats-grid {
    z-index: 8;
    margin-top: -48px;
}

.stat-card {
    backdrop-filter: blur(10px);
    box-shadow:
        0 14px 30px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.03);
}

/* Card-Zone minimal nach vorn holen */
.content-columns-grid {
    position: relative;
    z-index: 4;
}

/* Fallback bleibt sauber */
@media (max-width: 1280px) {
    .hero-section {
        grid-template-columns: 220px minmax(0, 1fr);
        padding-right: 30px;
    }
}

@media (max-width: 720px) {
    .hero-svg-stage {
        opacity: .58;
    }

    .hero-branding::before {
        left: -10px;
        right: -10px;
        top: -10px;
        bottom: -10px;
    }
}


/* ==========================================================================
   V3.08-FIX1T — Hero SVG Composition v2 / Target Mockup Layer Pack
   SVG-Layer v2: EQ nach rechts/unten, Speaker sauberer, Floor hochwertiger.
   ========================================================================== */

.hero-svg-stage {
    opacity: .78;
}

.hero-svg-stage img {
    filter:
        saturate(1.18)
        contrast(1.06)
        brightness(.94);
}

/* echte Inhalte bleiben klar vor der Bühne */
.hero-section .avatar-container,
.hero-section .hero-branding {
    z-index: 8;
}

.hero-branding::before {
    background:
        radial-gradient(circle at 28% 32%, rgba(0,0,0,.22), rgba(0,0,0,.10) 46%, transparent 78%);
}

/* Logo wieder kräftiger und weniger matt */
.brand-title {
    filter:
        drop-shadow(0 10px 14px rgba(0,0,0,.72))
        drop-shadow(0 0 10px rgba(255,204,0,.18)) !important;
}

.brand-title::after {
    box-shadow: 0 0 14px rgba(255,204,0,.18);
}

/* Avatar mit Stage verbinden, aber nicht verdecken */
.avatar-container {
    box-shadow:
        0 0 0 1px rgba(255,204,0,.38),
        0 0 48px rgba(255,204,0,.18),
        0 20px 50px rgba(0,0,0,.62);
}

/* KPI noch klar über dem Stage-Floor */
.stats-grid {
    z-index: 9;
    margin-top: -50px;
}

.stat-card {
    background:
        linear-gradient(180deg, rgba(18,18,16,.955), rgba(7,7,6,.99));
}

/* Mobile: Bühne nicht überladen */
@media (max-width: 720px) {
    .hero-svg-stage {
        opacity: .62;
    }
}

/* ==========================================================================
   V3.08-FIX1U — SVG Brand Lockup / Hero Typography Integration
   Große Hero-Typografie wird SVG-Brandgrafik; echte Inhalte bleiben HTML.
   ========================================================================== */

/* Brandgrafik als Haupttypografie */
.brand-lockup {
    display: block;
    width: min(860px, 100%);
    max-width: 100%;
    margin: 0 0 8px;
    position: relative;
    z-index: 9;
}

.brand-lockup img {
    width: 100%;
    height: auto;
    display: block;
    filter:
        drop-shadow(0 12px 18px rgba(0,0,0,.44))
        drop-shadow(0 0 8px rgba(255,204,0,.06));
}

/* Alte Text-Typografie bleibt für SEO/Screenreader als echter HTML-Fallback erhalten */
.hero-branding > .brand-title,
.hero-branding > .slogan-primary,
.hero-branding > .slogan-secondary,
.hero-branding > .slogan-accent {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Brandbereich auf SVG abstimmen */
.hero-branding {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Text und Buttons rücken sauber unter Brand-Lockup */
.hero-text {
    margin-top: 2px;
    max-width: 900px;
}

.hero-actions {
    margin-top: 10px;
}

/* SVG-Stage darf Brand-Lockup nicht schlucken */
.hero-svg-stage {
    opacity: .76;
}

/* Hero etwas mehr Luft für Brand-Lockup */
.hero-section {
    grid-template-columns: 245px minmax(0, 1fr);
    min-height: 342px;
    padding-top: 24px;
}

/* Avatar + Brand enger wie Marke */
.avatar-container {
    margin-right: -4px;
}

/* Desktop Feinjustierung */
@media (min-width: 1200px) {
    .brand-lockup {
        width: min(900px, 100%);
    }
}

/* Tablet */
@media (max-width: 1280px) {
    .brand-lockup {
        width: min(760px, 100%);
    }
}

/* Mobile */
@media (max-width: 720px) {
    .brand-lockup {
        width: min(640px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .hero-section {
        min-height: auto;
    }
}

/* ==========================================================================
   V3.08-FIX1V — Brand Lockup v2 Cleanup
   Korrigiert FIX1U: weniger Comic, weniger Chaos, weniger Swoosh-Überladung.
   ========================================================================== */

.brand-lockup {
    width: min(760px, 100%);
    margin: 0 0 2px;
}

.brand-lockup img {
    filter:
        drop-shadow(0 10px 14px rgba(0,0,0,.42))
        drop-shadow(0 0 5px rgba(255,204,0,.05));
}

/* Hero-Lockup soll nicht den ganzen Header dominieren */
.hero-section {
    min-height: 330px;
    padding-top: 22px;
    padding-bottom: 50px;
}

/* Stage etwas ruhiger hinter der neuen Brandgrafik */
.hero-svg-stage {
    opacity: .70;
}

.hero-svg-stage img {
    filter:
        saturate(1.08)
        contrast(1.02)
        brightness(.90);
}

/* Text + Buttons näher unter der Brandgrafik */
.hero-text {
    margin-top: -2px;
    font-size: .84rem;
}

.hero-actions {
    margin-top: 8px;
}

/* Avatar bleibt stark, aber Brand steht nicht mehr im Kampf damit */
.avatar-container {
    width: 210px;
    height: 210px;
}

/* KPI unverändert stark angebunden */
.stats-grid {
    margin-top: -48px;
}

@media (min-width: 1200px) {
    .brand-lockup {
        width: min(790px, 100%);
    }
}

@media (max-width: 1280px) {
    .brand-lockup {
        width: min(720px, 100%);
    }
}

@media (max-width: 720px) {
    .brand-lockup {
        width: min(640px, 100%);
    }
}

/* ==========================================================================
   V3.08-FIX1X — Clean Hero Asset Slot / HTML Overlay Reset
   Ziel: sauberer Hero mit optionalem hero_bg.jpg + echtem HTML-Overlay.
   ========================================================================== */

/* ---------------- HEADER CLEAN MATCH ---------------- */

.site-header {
    background:
        linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.34)) !important;
    border: 1px solid rgba(255,204,0,.10) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 13px 22px;
    margin-bottom: 12px;
}

.private-preview-badge {
    background: rgba(255,204,0,.045) !important;
    border: 1px solid rgba(255,204,0,.32) !important;
    color: #ffd700 !important;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .075em;
    padding: 7px 12px;
    border-radius: 999px;
    box-shadow: none !important;
}

.main-navigation ul {
    gap: 28px;
}

.main-navigation a {
    color: #d8cfad !important;
    font-weight: 900;
    font-size: .84rem;
    letter-spacing: .035em;
    padding-bottom: 7px;
    border-bottom: 2px solid transparent;
    text-shadow: none !important;
}

.main-navigation a.active,
.main-navigation a:hover {
    color: #ffd700 !important;
}

.main-navigation a.active::after {
    display: none !important;
}

.main-navigation a.active {
    border-bottom: 2px solid transparent;
    background:
        linear-gradient(90deg, #ff3333 0%, #ffcc00 50%, #00cc44 100%)
        left bottom / 100% 3px no-repeat;
}

.language-selector {
    display: flex;
    gap: 6px;
    background: rgba(10,10,9,.34);
    border: 1px solid rgba(255,204,0,.13);
    border-radius: 999px;
    padding: 3px;
}

.lang-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #bdb291 !important;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 900;
}

.lang-btn.active {
    border-color: rgba(255,204,0,.85) !important;
    color: #130d04 !important;
    background: #ffd700 !important;
}

/* ---------------- CLEAN HERO ASSET SLOT ---------------- */

.hero-section.clean-asset-hero {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    padding: 38px 54px 76px;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,204,0,.16);
    box-shadow:
        inset 0 0 100px rgba(0,0,0,.72),
        0 20px 55px rgba(0,0,0,.36);
    background:
        linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.70)),
        url("assets/hero_bg.jpg") center top / cover no-repeat,
        url("assets/hero_svg/hero_stage_desktop.svg") center top / cover no-repeat,
        linear-gradient(135deg, #041309, #140d06 58%, #250a06);
}

/* alte Layer vollständig deaktivieren */
.clean-asset-hero .hero-svg-stage,
.clean-asset-hero .brand-lockup,
.clean-asset-hero .hero-visuals {
    display: none !important;
}

.clean-asset-hero::before,
.clean-asset-hero::after {
    display: none !important;
}

/* Overlay für Lesbarkeit */
.clean-asset-hero .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 18% 44%, rgba(0,204,68,.10), transparent 32%),
        linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.67));
    pointer-events: none;
}

/* echter Inhalt über dem Hintergrund */
.clean-asset-hero .hero-inner-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 48px;
    width: 100%;
}

.clean-asset-hero .avatar-container {
    position: relative;
    width: 228px;
    height: 228px;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 7px;
    background: linear-gradient(135deg, #ff3333 0%, #ffcc00 50%, #00cc44 100%);
    box-shadow:
        0 0 0 1px rgba(255,204,0,.28),
        0 0 35px rgba(255,204,0,.22),
        0 20px 48px rgba(0,0,0,.58);
    margin: 0 !important;
}

.clean-asset-hero .profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #090806;
    background: #111;
}

.clean-asset-hero .hero-branding {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin: 0 !important;
}

/* alte Screenreader-Hiding-Regeln für diese neue Hero-Version überschreiben */
.clean-asset-hero .brand-title,
.clean-asset-hero .slogan-primary,
.clean-asset-hero .slogan-secondary,
.clean-asset-hero .slogan-accent {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: 0 !important;
}

/* Brand-Text sauber, stark, aber nicht als chaotische SVG */
.clean-asset-hero .brand-title {
    font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
    font-size: clamp(4.4rem, 8vw, 7.4rem);
    line-height: .84;
    letter-spacing: -3px;
    text-transform: uppercase;
    transform: skewX(-5deg);
    filter:
        drop-shadow(3px 4px 0 rgba(0,0,0,.80))
        drop-shadow(0 12px 22px rgba(0,0,0,.70));
}

.clean-asset-hero .brand-red { color: #ff3333; }
.clean-asset-hero .brand-gold { color: #ffcc00; }
.clean-asset-hero .brand-green { color: #00cc44; }

.clean-asset-hero .brand-title::after {
    content: "";
    display: block;
    width: min(760px, 94%);
    height: 12px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff3333, #ffcc00, #00cc44);
    transform: skewX(-12deg);
    box-shadow: 0 0 16px rgba(255,204,0,.13);
}

.clean-asset-hero .slogan-wrapper {
    margin-top: 16px;
    margin-bottom: 12px;
}

.clean-asset-hero .slogan-primary {
    font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
    font-size: clamp(2.2rem, 3.65vw, 3.8rem);
    line-height: .98;
    color: #ffcc00 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-shadow: 2px 4px 10px rgba(0,0,0,.85);
}

.clean-asset-hero .slogan-secondary {
    font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
    font-size: clamp(2rem, 3.25vw, 3.3rem);
    line-height: .98;
    color: #00d957 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-shadow: 2px 4px 10px rgba(0,0,0,.85);
}

.clean-asset-hero .slogan-accent {
    color: #fff6e6 !important;
    font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
    font-size: clamp(1.35rem, 2.15vw, 2rem);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-shadow:
        2px 4px 10px rgba(0,0,0,.86),
        0 0 8px rgba(255,255,255,.12);
}

.clean-asset-hero .hero-text {
    color: #ead9ac;
    font-size: .96rem;
    line-height: 1.35;
    max-width: 900px;
    margin-top: 14px;
}

.clean-asset-hero .hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.clean-asset-hero .hero-actions .btn {
    min-width: 170px;
    padding: 11px 16px;
    border-radius: 999px;
}

/* KPI wieder sauber am Hero-Floor */
.stats-grid {
    margin-top: -44px;
    z-index: 5;
    position: relative;
}

/* Responsive */
@media (max-width: 1100px) {
    .hero-section.clean-asset-hero {
        padding: 34px 30px 66px;
    }

    .clean-asset-hero .hero-inner-container {
        gap: 30px;
    }

    .clean-asset-hero .avatar-container {
        width: 205px;
        height: 205px;
    }

    .clean-asset-hero .brand-title {
        font-size: clamp(3.5rem, 8vw, 5.8rem);
    }
}

@media (max-width: 760px) {
    .hero-section.clean-asset-hero {
        min-height: auto;
        padding: 32px 18px 46px;
        background:
            linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.74)),
            url("assets/hero_bg.jpg") center top / cover no-repeat,
            url("assets/hero_svg/hero_stage_mobile.svg") center top / cover no-repeat,
            linear-gradient(135deg, #041309, #140d06 58%, #250a06);
    }

    .clean-asset-hero .hero-inner-container {
        flex-direction: column;
        gap: 22px;
        text-align: center;
    }

    .clean-asset-hero .avatar-container {
        width: 190px;
        height: 190px;
    }

    .clean-asset-hero .brand-title {
        font-size: clamp(3rem, 15vw, 4.5rem);
        transform: none;
    }

    .clean-asset-hero .brand-title::after {
        margin-left: auto;
        margin-right: auto;
    }

    .clean-asset-hero .slogan-primary {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .clean-asset-hero .slogan-secondary {
        font-size: clamp(1.75rem, 8vw, 2.65rem);
    }

    .clean-asset-hero .slogan-accent {
        font-size: clamp(1.18rem, 6vw, 1.7rem);
    }

    .clean-asset-hero .hero-actions {
        justify-content: center;
    }

    .stats-grid {
        margin-top: 12px;
    }
}


/* ==========================================================================
   V3.08-FIX1Y-REPAIR — Force CI Hero Image Only
   Ziel: Hero zeigt ausschließlich hero_ci_master.png. Kein CSS-Text-Hero.
   ========================================================================== */

.hero-section.hero-ci-master {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,204,0,.18) !important;
    background: #030302 !important;
    box-shadow:
        inset 0 0 60px rgba(0,0,0,.45),
        0 20px 55px rgba(0,0,0,.32) !important;
}

/* ALLES alte im Hero ausblenden, falls noch irgendwo vorhanden */
.hero-ci-master .hero-svg-stage,
.hero-ci-master .brand-lockup,
.hero-ci-master .hero-overlay,
.hero-ci-master .hero-inner-container,
.hero-ci-master .avatar-container,
.hero-ci-master .profile-avatar,
.hero-ci-master .hero-branding,
.hero-ci-master .brand-title,
.hero-ci-master .slogan-wrapper,
.hero-ci-master .slogan-primary,
.hero-ci-master .slogan-secondary,
.hero-ci-master .slogan-accent,
.hero-ci-master .hero-text,
.hero-ci-master .hero-actions,
.hero-ci-master .hero-visuals {
    display: none !important;
}

.hero-ci-master::before,
.hero-ci-master::after {
    display: none !important;
    content: none !important;
}

/* Das CI-Hero-Bild selbst */
.hero-ci-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    border: 0 !important;
}

/* SEO-/Fallback-Text bleibt im HTML, aber unsichtbar */
.hero-ci-accessibility {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

/* KPI direkt unter Hero, nicht überlappen */
.stats-grid {
    margin-top: 12px !important;
    position: relative !important;
    z-index: 3 !important;
}

/* Mobile sauber */
@media (max-width: 760px) {
    .hero-section.hero-ci-master {
        border-radius: 14px !important;
    }

    .stats-grid {
        margin-top: 12px !important;
    }
}


/* ==========================================================================
   V3.08-FIX1Z — CI Hero Crop / Lower Crowd Reduction
   Ziel: Hero-Bild behalten, aber unteren Fan-/Crowd-Bereich weniger dominant.
   ========================================================================== */

/* Hero als kontrollierter Bildausschnitt, nicht komplette volle Bildhöhe */
.hero-section.hero-ci-master {
    aspect-ratio: 3.05 / 1 !important;
    max-height: 455px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
}

/* Bild wird in den Rahmen gecroppt:
   - object-fit cover statt contain
   - object-position etwas höher, damit unten weniger Fans sichtbar sind */
.hero-ci-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 38% !important;
}

/* KPI-Leiste etwas näher an den Hero, ohne ins Bild zu kleben */
.stats-grid {
    margin-top: 4px !important;
}

/* Cards weiter sauber darunter */
.content-columns-grid {
    margin-top: 4px !important;
}

/* Für sehr breite Screens etwas mehr Hero-Höhe erlauben */
@media (min-width: 1500px) {
    .hero-section.hero-ci-master {
        aspect-ratio: 3.15 / 1 !important;
        max-height: 470px !important;
    }
}

/* Mobile: Bild nicht zu hart croppen */
@media (max-width: 760px) {
    .hero-section.hero-ci-master {
        aspect-ratio: 2.15 / 1 !important;
        max-height: none !important;
    }

    .hero-ci-image {
        object-position: center center !important;
    }
}