:root{--bg:#070a08;--panel:#0e1510;--panel2:#111b13;--text:#f3fff3;--muted:#a8b7a8;--green:#39ff14;--green2:#90ff75;--border:rgba(57,255,20,.18);--danger:#ff4d4d;--radius:16px}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 20% 0%,rgba(57,255,20,.12),transparent 30%),var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}.container{width:min(1180px,92%);margin:auto}.nav{position:sticky;top:0;z-index:50;background:rgba(7,10,8,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.5px}.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--green),#0d4506);box-shadow:0 0 28px rgba(57,255,20,.35)}.menu{display:flex;gap:18px;align-items:center}.menu a{color:var(--muted);font-weight:600}.menu a:hover{color:var(--green)}.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(57,255,20,.22),rgba(57,255,20,.08));color:var(--text);padding:11px 16px;border-radius:12px;font-weight:800;cursor:pointer}.btn:hover{box-shadow:0 0 30px rgba(57,255,20,.2);transform:translateY(-1px)}.btn-solid{background:var(--green);color:#071008;border-color:var(--green)}.hero{padding:88px 0 54px}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:center}.eyebrow{color:var(--green);font-weight:900;text-transform:uppercase;letter-spacing:2px}.hero h1{font-size:clamp(42px,7vw,82px);line-height:.95;margin:14px 0}.hero p{font-size:18px;color:var(--muted);line-height:1.7}.panel{background:linear-gradient(180deg,rgba(17,27,19,.92),rgba(11,15,12,.92));border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 18px 70px rgba(0,0,0,.32)}.status{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.stat{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:14px;padding:18px}.stat strong{display:block;font-size:26px;color:var(--green)}.section{padding:42px 0}.section h2{font-size:34px;margin:0 0 12px}.lead{color:var(--muted);line-height:1.7}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:.2s}.card:hover{transform:translateY(-3px);border-color:rgba(57,255,20,.38)}.card img{width:100%;height:190px;object-fit:cover;border-radius:12px;border:1px solid var(--border);margin-bottom:14px}.tag{display:inline-block;color:#071008;background:var(--green);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900}.form{display:grid;gap:14px}.form input,.form select,.form textarea{width:100%;background:#090e0a;border:1px solid var(--border);border-radius:12px;color:var(--text);padding:13px 14px;font:inherit}.form textarea{min-height:140px;resize:vertical}.alert{padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:rgba(57,255,20,.09);margin:14px 0}.footer{border-top:1px solid var(--border);padding:28px 0;color:var(--muted);margin-top:50px}.table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:14px;overflow:hidden}.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left}.admin-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:#070a08;border-right:1px solid var(--border);padding:22px;position:sticky;top:0;height:100vh}.sidebar a{display:block;color:var(--muted);padding:10px 12px;border-radius:10px}.sidebar a:hover{background:rgba(57,255,20,.1);color:var(--green)}.admin-main{padding:28px}.actions{display:flex;gap:10px;flex-wrap:wrap}.muted{color:var(--muted)}@media(max-width:900px){.hero-grid,.grid,.admin-layout{grid-template-columns:1fr}.menu{display:none}.status{grid-template-columns:1fr}.sidebar{position:relative;height:auto}}

/* WestsideV Design Upgrade */
.hero-upgrade {
    min-height: 620px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 80% 20%, rgba(57,255,20,.20), transparent 28%),
        radial-gradient(circle at 10% 90%, rgba(57,255,20,.10), transparent 35%),
        linear-gradient(180deg, rgba(7,10,8,.25), rgba(7,10,8,.95));
}

.hero-upgrade h1 {
    max-width: 760px;
    text-shadow: 0 0 45px rgba(57,255,20,.16);
}

.status-panel {
    position: relative;
    overflow: hidden;
}

.status-panel:before {
    content: "";
    position: absolute;
    inset: -80px -80px auto auto;
    width: 180px;
    height: 180px;
    background: rgba(57,255,20,.20);
    filter: blur(55px);
}

.status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.status-dot {
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
    border: 1px solid var(--border);
}

.status-dot.online {
    background: rgba(57,255,20,.15);
    color: var(--green);
}

.status-dot.offline {
    background: rgba(255,77,77,.12);
    color: #ff7777;
}

.full-btn {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
}

.feature-card {
    min-height: 220px;
}

.feature-icon {
    font-size: 34px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 18px rgba(57,255,20,.45));
}

.section-dark {
    background: linear-gradient(180deg, rgba(57,255,20,.035), rgba(0,0,0,0));
    border-top: 1px solid rgba(57,255,20,.08);
    border-bottom: 1px solid rgba(57,255,20,.08);
}

.split-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.mini-row {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin: 12px 0;
    display: grid;
    gap: 7px;
}

.mini-row strong {
    font-size: 20px;
}

.mini-row small {
    color: var(--muted);
}

@media(max-width:900px) {
    .split-preview {
        grid-template-columns: 1fr;
    }
}

/* WestsideV Design Feintuning */
body {
    overflow-x: hidden;
}

.nav {
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
}

.nav-inner {
    min-height: 82px;
}

.hero {
    padding-top: 120px !important;
    padding-bottom: 90px !important;
}

.hero-upgrade {
    min-height: auto !important;
    position: relative;
}

.hero-upgrade:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(57,255,20,.10), transparent 30%, rgba(57,255,20,.07)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 28%);
    opacity: .8;
}

.hero-upgrade .container {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: clamp(46px, 6vw, 78px) !important;
    line-height: 1.03 !important;
    margin-top: 18px !important;
    margin-bottom: 24px !important;
}

.hero p {
    max-width: 760px;
}

.status-panel {
    transform: translateY(8px);
    border-color: rgba(57,255,20,.32);
    box-shadow:
        0 0 0 1px rgba(57,255,20,.08),
        0 25px 80px rgba(0,0,0,.38),
        0 0 90px rgba(57,255,20,.08);
}

.card,
.panel,
.mini-row {
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.card {
    min-height: 180px;
}

.section {
    padding: 70px 0 !important;
}

.section h2 {
    font-size: clamp(32px, 4vw, 46px);
}

.grid {
    align-items: stretch;
}

.btn {
    transition: .18s ease;
}

.btn-solid {
    box-shadow: 0 0 35px rgba(57,255,20,.22);
}

.btn-solid:hover {
    box-shadow: 0 0 45px rgba(57,255,20,.36);
}

.feature-card {
    background:
        linear-gradient(180deg, rgba(57,255,20,.055), rgba(255,255,255,.02)),
        var(--panel);
}

.tag {
    width: fit-content;
}

.footer {
    background: rgba(0,0,0,.25);
}

@media(max-width:900px) {
    .hero {
        padding-top: 70px !important;
    }

    .hero h1 {
        font-size: 42px !important;
    }
}

/* Whitelist Bewerbung Upgrade */
.apply-hero {
    padding: 130px 0 70px;
    background:
        radial-gradient(circle at 20% 20%, rgba(57,255,20,.18), transparent 28%),
        radial-gradient(circle at 85% 30%, rgba(57,255,20,.10), transparent 32%),
        linear-gradient(180deg, rgba(57,255,20,.04), rgba(0,0,0,0));
    border-bottom: 1px solid rgba(57,255,20,.12);
}

.apply-hero h1 {
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1;
    margin: 16px 0 20px;
    text-shadow: 0 0 45px rgba(57,255,20,.18);
}

.apply-hero p {
    max-width: 820px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.apply-section {
    padding-top: 55px !important;
}

.apply-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.apply-main {
    min-width: 0;
}

.apply-form {
    display: grid;
    gap: 22px;
}

.form-block {
    background:
        linear-gradient(180deg, rgba(57,255,20,.045), rgba(255,255,255,.018)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.18);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 65px rgba(0,0,0,.28);
}

.form-block-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.form-block-head span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--green);
    color: #071008;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    box-shadow: 0 0 30px rgba(57,255,20,.25);
}

.form-block-head h2 {
    margin: 0;
    font-size: 25px;
}

.form-block-head p {
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.form-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.apply-form label {
    display: grid;
    gap: 8px;
    color: var(--text);
    font-weight: 800;
}

.apply-form input,
.apply-form textarea {
    width: 100%;
    background: rgba(5,9,6,.92);
    border: 1px solid rgba(57,255,20,.18);
    color: var(--text);
    border-radius: 14px;
    padding: 14px 15px;
    font: inherit;
    outline: none;
    transition: .16s ease;
}

.apply-form textarea {
    min-height: 145px;
    resize: vertical;
    line-height: 1.6;
}

.apply-form input:focus,
.apply-form textarea:focus {
    border-color: rgba(57,255,20,.55);
    box-shadow: 0 0 0 4px rgba(57,255,20,.09);
}

.check-line {
    display: flex !important;
    grid-template-columns: auto 1fr;
    flex-direction: row;
    align-items: center;
    gap: 12px !important;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(57,255,20,.13);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
}

.check-line input {
    width: 20px;
    height: 20px;
    accent-color: #39ff14;
}

.apply-submit {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    font-size: 16px;
    padding: 15px 18px;
}

.apply-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 105px;
}

.apply-info-card {
    border-radius: 20px;
    border-color: rgba(57,255,20,.25);
}

.apply-info-card h2 {
    margin-top: 14px;
    font-size: 25px;
}

.apply-step {
    border-left: 3px solid var(--green);
    padding-left: 14px;
    margin: 18px 0;
}

.apply-step strong {
    display: block;
    color: var(--text);
    margin-bottom: 5px;
}

.apply-step p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.success-alert {
    border-color: rgba(57,255,20,.35);
    background: rgba(57,255,20,.10);
}

.error-alert {
    border-color: rgba(255,77,77,.35);
    background: rgba(255,77,77,.10);
}

@media(max-width:1000px) {
    .apply-grid {
        grid-template-columns: 1fr;
    }

    .apply-sidebar {
        position: static;
    }
}

@media(max-width:700px) {
    .form-two {
        grid-template-columns: 1fr;
    }

    .apply-hero {
        padding-top: 90px;
    }

    .form-block {
        padding: 18px;
    }
}

/* Admin Bewerbungen Upgrade */
.admin-application-grid {
    display: grid;
    gap: 18px;
}

.application-card {
    background:
        linear-gradient(180deg, rgba(57,255,20,.045), rgba(255,255,255,.015)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.18);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 20px 65px rgba(0,0,0,.28);
}

.application-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.application-top h2 {
    margin: 12px 0 6px;
}

.application-id {
    color: var(--green);
    font-size: 28px;
    font-weight: 950;
    opacity: .9;
}

.application-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 18px 0;
}

.application-meta div {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(57,255,20,.13);
    border-radius: 14px;
    padding: 14px;
}

.application-meta strong {
    display: block;
    color: var(--green);
    font-size: 22px;
}

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

.application-details {
    border-top: 1px solid rgba(57,255,20,.13);
    padding-top: 16px;
}

.application-details summary {
    cursor: pointer;
    color: var(--green);
    font-weight: 900;
    margin-bottom: 14px;
}

.application-section {
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(57,255,20,.10);
    border-radius: 14px;
    padding: 16px;
    margin: 12px 0;
}

.application-section h3 {
    margin-top: 0;
}

.application-section p {
    color: var(--muted);
    line-height: 1.7;
}

.application-checks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.application-checks span {
    background: rgba(57,255,20,.09);
    border: 1px solid rgba(57,255,20,.18);
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--text);
    font-weight: 800;
}

@media(max-width:800px) {
    .application-top {
        flex-direction: column;
    }

    .application-meta {
        grid-template-columns: 1fr;
    }
}

/* Kontaktformular Upgrade */
.contact-hero {
    padding: 130px 0 70px;
    background:
        radial-gradient(circle at 18% 25%, rgba(57,255,20,.18), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(57,255,20,.10), transparent 30%),
        linear-gradient(180deg, rgba(57,255,20,.04), rgba(0,0,0,0));
    border-bottom: 1px solid rgba(57,255,20,.12);
}

.contact-hero h1 {
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1;
    margin: 16px 0 20px;
    text-shadow: 0 0 45px rgba(57,255,20,.18);
}

.contact-hero p {
    max-width: 820px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.contact-form {
    display: grid;
    gap: 22px;
}

.contact-form label {
    display: grid;
    gap: 8px;
    color: var(--text);
    font-weight: 800;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    background: rgba(5,9,6,.92);
    border: 1px solid rgba(57,255,20,.18);
    color: var(--text);
    border-radius: 14px;
    padding: 14px 15px;
    font: inherit;
    outline: none;
    transition: .16s ease;
}

.contact-form textarea {
    min-height: 170px;
    resize: vertical;
    line-height: 1.6;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: rgba(57,255,20,.55);
    box-shadow: 0 0 0 4px rgba(57,255,20,.09);
}

.contact-submit {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
    font-size: 16px;
    padding: 15px 18px;
}

.contact-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 105px;
}

.contact-info-card {
    border-radius: 20px;
    border-color: rgba(57,255,20,.25);
}

.contact-info-card h2 {
    margin-top: 14px;
    font-size: 25px;
}

.contact-point {
    border-left: 3px solid var(--green);
    padding-left: 14px;
    margin: 18px 0;
}

.contact-point strong {
    display: block;
    color: var(--text);
    margin-bottom: 5px;
}

.contact-point p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

@media(max-width:1000px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-sidebar {
        position: static;
    }
}

/* Admin Kontakt Upgrade */
.admin-contact-grid {
    display: grid;
    gap: 18px;
}

.contact-request-card {
    background:
        linear-gradient(180deg, rgba(57,255,20,.045), rgba(255,255,255,.015)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.18);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 20px 65px rgba(0,0,0,.28);
}

.contact-request-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.contact-request-top h2 {
    margin: 12px 0 6px;
}

.contact-request-id {
    color: var(--green);
    font-size: 28px;
    font-weight: 950;
    opacity: .9;
}

.contact-request-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 18px 0;
}

.contact-request-meta div {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(57,255,20,.13);
    border-radius: 14px;
    padding: 14px;
}

.contact-request-meta strong {
    display: block;
    color: var(--green);
    font-size: 18px;
    overflow-wrap: anywhere;
}

.contact-request-meta span {
    color: var(--muted);
}

.contact-message-box {
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(57,255,20,.10);
    border-radius: 14px;
    padding: 16px;
    margin: 12px 0 18px;
}

.contact-message-box h3 {
    margin-top: 0;
}

.contact-message-box p {
    color: var(--muted);
    line-height: 1.7;
}

@media(max-width:800px) {
    .contact-request-top {
        flex-direction: column;
    }

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

/* Admin News Upgrade */
.admin-news-layout {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.admin-news-form {
    position: sticky;
    top: 28px;
}

.admin-news-form label {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    font-weight: 800;
}

.admin-news-form input,
.admin-news-form textarea,
.admin-news-form select {
    width: 100%;
    background: rgba(5,9,6,.92);
    border: 1px solid rgba(57,255,20,.18);
    color: var(--text);
    border-radius: 14px;
    padding: 13px 14px;
    font: inherit;
    outline: none;
}

.admin-news-form textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

.admin-news-form input:focus,
.admin-news-form textarea:focus,
.admin-news-form select:focus {
    border-color: rgba(57,255,20,.55);
    box-shadow: 0 0 0 4px rgba(57,255,20,.09);
}

.admin-news-submit {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

.admin-news-list {
    display: grid;
    gap: 18px;
}

.admin-news-card {
    background:
        linear-gradient(180deg, rgba(57,255,20,.045), rgba(255,255,255,.015)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.18);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 20px 65px rgba(0,0,0,.28);
}

.admin-news-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.admin-news-top h2 {
    margin: 12px 0 6px;
}

.admin-news-id {
    color: var(--green);
    font-size: 28px;
    font-weight: 950;
    opacity: .9;
}

@media(max-width:1100px) {
    .admin-news-layout {
        grid-template-columns: 1fr;
    }

    .admin-news-form {
        position: static;
    }
}

@media(max-width:700px) {
    .admin-news-top {
        flex-direction: column;
    }
}

/* Admin CRUD Upgrade */
.admin-crud-layout {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.admin-crud-form {
    position: sticky;
    top: 28px;
}

.admin-crud-form label {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    font-weight: 800;
}

.admin-crud-form input,
.admin-crud-form textarea,
.admin-crud-form select {
    width: 100%;
    background: rgba(5,9,6,.92);
    border: 1px solid rgba(57,255,20,.18);
    color: var(--text);
    border-radius: 14px;
    padding: 13px 14px;
    font: inherit;
    outline: none;
}

.admin-crud-form textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.6;
}

.admin-crud-form input:focus,
.admin-crud-form textarea:focus,
.admin-crud-form select:focus {
    border-color: rgba(57,255,20,.55);
    box-shadow: 0 0 0 4px rgba(57,255,20,.09);
}

.admin-crud-submit {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

.admin-crud-list {
    display: grid;
    gap: 18px;
}

.admin-crud-card {
    background:
        linear-gradient(180deg, rgba(57,255,20,.045), rgba(255,255,255,.015)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.18);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 20px 65px rgba(0,0,0,.28);
}

.admin-crud-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.admin-crud-top h2 {
    margin: 12px 0 6px;
}

.admin-crud-id {
    color: var(--green);
    font-size: 28px;
    font-weight: 950;
    opacity: .9;
}

@media(max-width:1100px) {
    .admin-crud-layout {
        grid-template-columns: 1fr;
    }

    .admin-crud-form {
        position: static;
    }
}

@media(max-width:700px) {
    .admin-crud-top {
        flex-direction: column;
    }
}

/* Admin Galerie Upgrade */
.admin-gallery-card {
    background:
        linear-gradient(180deg, rgba(57,255,20,.045), rgba(255,255,255,.015)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.18);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 20px 65px rgba(0,0,0,.28);
}

.admin-gallery-image {
    width: 100%;
    height: 260px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(57,255,20,.16);
    margin-bottom: 18px;
    background: rgba(0,0,0,.25);
}

.admin-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Öffentliche Seiten Upgrade */
.page-hero {
    padding: 130px 0 70px;
    background:
        radial-gradient(circle at 20% 25%, rgba(57,255,20,.18), transparent 30%),
        radial-gradient(circle at 85% 25%, rgba(57,255,20,.10), transparent 30%),
        linear-gradient(180deg, rgba(57,255,20,.04), rgba(0,0,0,0));
    border-bottom: 1px solid rgba(57,255,20,.12);
}

.page-hero h1 {
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1;
    margin: 16px 0 20px;
    text-shadow: 0 0 45px rgba(57,255,20,.18);
}

.page-hero p {
    max-width: 820px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

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

.public-profile-card {
    background:
        linear-gradient(180deg, rgba(57,255,20,.045), rgba(255,255,255,.015)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.18);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 20px 65px rgba(0,0,0,.28);
}

.public-profile-image {
    height: 230px;
    background: rgba(0,0,0,.25);
    border-bottom: 1px solid rgba(57,255,20,.14);
}

.public-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.public-profile-content {
    padding: 22px;
}

.public-profile-content h2 {
    margin: 14px 0 8px;
}

@media(max-width:1000px) {
    .public-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:700px) {
    .public-card-grid {
        grid-template-columns: 1fr;
    }

    .page-hero {
        padding-top: 90px;
    }
}

/* Öffentliche Fraktionen Premium Upgrade */
.faction-hero {
    padding: 135px 0 80px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(57,255,20,.12);
    background:
        radial-gradient(circle at 18% 20%, rgba(57,255,20,.20), transparent 30%),
        radial-gradient(circle at 82% 30%, rgba(57,255,20,.12), transparent 32%),
        linear-gradient(180deg, rgba(57,255,20,.04), rgba(0,0,0,0));
}

.faction-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(57,255,20,.08), transparent 35%, rgba(57,255,20,.06)),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 80px
        );
    opacity: .45;
    pointer-events: none;
}

.faction-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 30px;
    align-items: center;
}

.faction-hero h1 {
    font-size: clamp(46px, 6vw, 82px);
    line-height: 1;
    margin: 16px 0 22px;
    max-width: 850px;
    text-shadow: 0 0 55px rgba(57,255,20,.18);
}

.faction-hero p {
    max-width: 780px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75;
}

.faction-hero-panel {
    background:
        linear-gradient(180deg, rgba(57,255,20,.07), rgba(255,255,255,.018)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.26);
    border-radius: 24px;
    padding: 24px;
    box-shadow:
        0 25px 80px rgba(0,0,0,.35),
        0 0 80px rgba(57,255,20,.08);
}

.faction-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
}

.faction-stats div {
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(57,255,20,.15);
    border-radius: 18px;
    padding: 18px;
}

.faction-stats strong {
    display: block;
    color: var(--green);
    font-size: 34px;
    line-height: 1;
}

.faction-stats span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-weight: 700;
}

.section-head-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 26px;
}

.section-head-row h2 {
    margin-bottom: 8px;
}

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

.faction-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(57,255,20,.045), rgba(255,255,255,.015)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.18);
    box-shadow: 0 24px 75px rgba(0,0,0,.30);
    transition: .18s ease;
}

.faction-card:hover {
    transform: translateY(-4px);
    border-color: rgba(57,255,20,.42);
    box-shadow:
        0 30px 90px rgba(0,0,0,.38),
        0 0 80px rgba(57,255,20,.08);
}

.faction-card:after {
    content: "";
    position: absolute;
    inset: auto -80px -80px auto;
    width: 180px;
    height: 180px;
    background: rgba(57,255,20,.14);
    filter: blur(55px);
    pointer-events: none;
}

.faction-image-wrap {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    border-bottom: 1px solid rgba(57,255,20,.14);
}

.faction-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .88;
    transform: scale(1.02);
    transition: .25s ease;
}

.faction-card:hover .faction-image-wrap img {
    transform: scale(1.07);
    opacity: 1;
}

.faction-image-wrap:after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(0,0,0,.72)),
        radial-gradient(circle at 20% 20%, rgba(57,255,20,.14), transparent 35%);
}

.faction-badges {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.faction-badge {
    background: rgba(7,10,8,.82);
    border: 1px solid rgba(57,255,20,.28);
    color: var(--text);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.badge-open {
    color: var(--green);
    background: rgba(57,255,20,.13);
}

.badge-closed {
    color: #ff7777;
    background: rgba(255,77,77,.12);
    border-color: rgba(255,77,77,.25);
}

.faction-content {
    position: relative;
    z-index: 2;
    padding: 24px;
}

.faction-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.faction-title-row small {
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 950;
}

.faction-title-row h2 {
    margin: 8px 0 0;
    font-size: 34px;
}

.faction-mark {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(57,255,20,.12);
    border: 1px solid rgba(57,255,20,.25);
    color: var(--green);
    font-size: 28px;
    font-weight: 950;
    box-shadow: 0 0 35px rgba(57,255,20,.10);
}

.faction-leader-box {
    margin: 20px 0 16px;
    padding: 15px;
    border-radius: 16px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(57,255,20,.13);
}

.faction-leader-box span {
    display: block;
    color: var(--muted);
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 800;
}

.faction-leader-box strong {
    color: var(--text);
    font-size: 18px;
}

.faction-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ghost-btn {
    background: rgba(255,255,255,.025);
}

@media(max-width:1050px) {
    .faction-hero-grid {
        grid-template-columns: 1fr;
    }

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

@media(max-width:700px) {
    .faction-hero {
        padding-top: 95px;
    }

    .section-head-row {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .faction-image-wrap {
        height: 210px;
    }

    .faction-title-row h2 {
        font-size: 28px;
    }
}

/* Fraktionen Premium V2 */
.faction-v2-hero {
    position: relative;
    overflow: hidden;
    padding: 145px 0 95px;
    border-bottom: 1px solid rgba(57,255,20,.14);
    background:
        radial-gradient(circle at 15% 20%, rgba(57,255,20,.22), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(57,255,20,.13), transparent 32%),
        linear-gradient(180deg, rgba(57,255,20,.055), rgba(0,0,0,0));
}

.faction-v2-grid-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.055) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 85%);
    opacity: .55;
}

.faction-v2-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -160px;
    top: 60px;
    background: rgba(57,255,20,.13);
    filter: blur(85px);
    border-radius: 50%;
}

.faction-v2-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 34px;
    align-items: center;
}

.faction-v2-copy h1 {
    font-size: clamp(50px, 6.5vw, 90px);
    line-height: .96;
    margin: 18px 0 24px;
    max-width: 900px;
    letter-spacing: -2px;
    text-shadow: 0 0 70px rgba(57,255,20,.20);
}

.faction-v2-copy p {
    max-width: 780px;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.75;
}

.faction-v2-command-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(57,255,20,.08), rgba(255,255,255,.018)),
        rgba(14,21,16,.96);
    border: 1px solid rgba(57,255,20,.30);
    border-radius: 28px;
    padding: 26px;
    box-shadow:
        0 30px 95px rgba(0,0,0,.42),
        0 0 90px rgba(57,255,20,.10);
}

.faction-v2-command-card:before {
    content: "";
    position: absolute;
    inset: -140px -120px auto auto;
    width: 260px;
    height: 260px;
    background: rgba(57,255,20,.22);
    filter: blur(70px);
}

.command-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.command-pulse {
    color: var(--green);
    font-weight: 900;
    font-size: 13px;
    text-shadow: 0 0 18px rgba(57,255,20,.45);
}

.command-big-number {
    position: relative;
    z-index: 2;
    color: var(--green);
    font-size: 92px;
    font-weight: 950;
    line-height: .9;
    margin: 34px 0 26px;
    letter-spacing: -4px;
}

.command-big-number span {
    display: block;
    color: var(--text);
    font-size: 18px;
    letter-spacing: 0;
    margin-top: 12px;
}

.command-stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.command-stats div {
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(57,255,20,.14);
    border-radius: 18px;
    padding: 17px;
}

.command-stats strong {
    display: block;
    color: var(--green);
    font-size: 28px;
}

.command-stats span {
    color: var(--muted);
    font-weight: 700;
}

.faction-v2-head {
    margin-bottom: 22px;
}

.faction-v2-head h2 {
    font-size: clamp(36px, 5vw, 58px);
    margin: 10px 0;
}

.faction-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 28px;
    padding: 12px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(57,255,20,.12);
    border-radius: 20px;
}

.faction-filter {
    border: 1px solid rgba(57,255,20,.18);
    background: rgba(5,9,6,.85);
    color: var(--text);
    border-radius: 999px;
    padding: 11px 16px;
    font-weight: 900;
    cursor: pointer;
    transition: .16s ease;
}

.faction-filter:hover,
.faction-filter.active {
    background: var(--green);
    color: #071008;
    border-color: var(--green);
    box-shadow: 0 0 30px rgba(57,255,20,.22);
}

.faction-v2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.faction-v2-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(57,255,20,.045), rgba(255,255,255,.014)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.18);
    box-shadow: 0 26px 85px rgba(0,0,0,.34);
    transition: .2s ease;
}

.faction-v2-card:hover {
    transform: translateY(-6px);
    border-color: rgba(57,255,20,.50);
    box-shadow:
        0 35px 110px rgba(0,0,0,.45),
        0 0 95px rgba(57,255,20,.10);
}

.faction-v2-card.type-illegal {
    border-color: rgba(255,70,70,.25);
}

.faction-v2-card.type-staatlich {
    border-color: rgba(57,255,20,.25);
}

.faction-v2-card.type-neutral {
    border-color: rgba(160,255,120,.18);
}

.faction-v2-image {
    position: relative;
    height: 310px;
    overflow: hidden;
    background: rgba(0,0,0,.28);
}

.faction-v2-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .86;
    transform: scale(1.02);
    transition: .28s ease;
}

.faction-v2-card:hover .faction-v2-image img {
    transform: scale(1.08);
    opacity: 1;
}

.faction-v2-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 25%, rgba(0,0,0,.84)),
        radial-gradient(circle at 25% 18%, rgba(57,255,20,.20), transparent 36%);
}

.faction-v2-badges {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 3;
}

.faction-v2-badges span {
    background: rgba(7,10,8,.76);
    border: 1px solid rgba(57,255,20,.26);
    color: var(--text);
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 950;
    backdrop-filter: blur(12px);
}

.faction-v2-badges .open {
    color: var(--green);
    background: rgba(57,255,20,.14);
}

.faction-v2-badges .closed {
    color: #ff7777;
    background: rgba(255,77,77,.13);
    border-color: rgba(255,77,77,.25);
}

.faction-v2-letter {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 3;
    width: 74px;
    height: 74px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(7,10,8,.76);
    border: 1px solid rgba(57,255,20,.28);
    color: var(--green);
    font-size: 38px;
    font-weight: 950;
    box-shadow: 0 0 42px rgba(57,255,20,.14);
    backdrop-filter: blur(12px);
}

.faction-v2-content {
    padding: 26px;
}

.faction-v2-title small {
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 1.7px;
    font-weight: 950;
}

.faction-v2-title h2 {
    margin: 9px 0 20px;
    font-size: clamp(30px, 4vw, 42px);
    letter-spacing: -1px;
}

.faction-v2-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

.faction-v2-info div {
    background: rgba(0,0,0,.23);
    border: 1px solid rgba(57,255,20,.12);
    border-radius: 17px;
    padding: 15px;
}

.faction-v2-info span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
}

.faction-v2-info strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.faction-v2-content p {
    color: var(--muted);
    line-height: 1.75;
    font-size: 16px;
}

.faction-v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.faction-v2-cta {
    margin-top: 34px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 30px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 80% 20%, rgba(57,255,20,.16), transparent 30%),
        linear-gradient(180deg, rgba(57,255,20,.065), rgba(255,255,255,.018)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.24);
    box-shadow: 0 30px 95px rgba(0,0,0,.35);
}

.faction-v2-cta h2 {
    margin: 14px 0 8px;
    font-size: clamp(30px, 4vw, 48px);
}

.faction-v2-cta p {
    color: var(--muted);
    max-width: 780px;
    line-height: 1.7;
}

@media(max-width:1100px) {
    .faction-v2-hero-inner {
        grid-template-columns: 1fr;
    }

    .faction-v2-grid {
        grid-template-columns: 1fr;
    }

    .faction-v2-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width:700px) {
    .faction-v2-hero {
        padding-top: 100px;
    }

    .faction-v2-copy h1 {
        font-size: 46px;
    }

    .command-big-number {
        font-size: 72px;
    }

    .command-stats,
    .faction-v2-info {
        grid-template-columns: 1fr;
    }

    .faction-v2-image {
        height: 235px;
    }

    .faction-filter-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .faction-filter {
        width: 100%;
    }
}

/* =========================================================
   WESTSIDEV CINEMATIC GLOBAL STYLE
   Dark GTA/FiveM Premium Look
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;600;800;900&display=swap');

:root {
    --bg: #030403;
    --panel: rgba(8, 12, 9, .92);
    --panel2: rgba(12, 18, 14, .96);
    --text: #f4fff2;
    --muted: #b4c2b4;
    --green: #39ff14;
    --green2: #9cff47;
    --orange: #ff7a18;
    --red: #ff3030;
    --blue: #1a9bff;
    --border: rgba(57,255,20,.24);
    --radius: 18px;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 15% 0%, rgba(57,255,20,.14), transparent 28%),
        radial-gradient(circle at 85% 12%, rgba(255,122,24,.09), transparent 28%),
        linear-gradient(180deg, #050705 0%, #020302 55%, #000 100%);
    color: var(--text);
    font-family: Inter, system-ui, sans-serif;
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background:
        linear-gradient(rgba(57,255,20,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.035) 1px, transparent 1px);
    background-size: 82px 82px;
    opacity: .35;
    mask-image: linear-gradient(180deg, black, transparent 90%);
}

body:after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,122,24,.08), transparent 30%),
        linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.65));
}

/* Header wie Premium FiveM Server */
.nav {
    background: rgba(0,0,0,.78) !important;
    border-bottom: 1px solid rgba(57,255,20,.25) !important;
    box-shadow: 0 12px 45px rgba(0,0,0,.65);
}

.nav-inner {
    min-height: 86px;
}

.brand {
    font-family: Anton, Inter, sans-serif;
    font-size: 24px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-shadow:
        0 0 18px rgba(57,255,20,.45),
        0 2px 0 #000;
}

.logo {
    width: 54px !important;
    height: 54px !important;
    border-radius: 13px !important;
    background:
        radial-gradient(circle at 30% 20%, #caffbf, transparent 22%),
        linear-gradient(135deg, #39ff14, #0f5e06 65%, #041f02) !important;
    box-shadow:
        0 0 25px rgba(57,255,20,.75),
        inset 0 0 18px rgba(255,255,255,.22) !important;
}

.menu a {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .7px;
    font-weight: 900 !important;
}

.menu a:hover {
    text-shadow: 0 0 16px rgba(57,255,20,.65);
}

/* Buttons härter und spieliger */
.btn {
    text-transform: uppercase;
    letter-spacing: .4px;
    border-radius: 8px !important;
    font-weight: 950 !important;
    border: 1px solid rgba(57,255,20,.36) !important;
    background:
        linear-gradient(180deg, rgba(57,255,20,.13), rgba(0,0,0,.22)) !important;
    box-shadow:
        inset 0 0 20px rgba(57,255,20,.05),
        0 0 20px rgba(57,255,20,.08);
}

.btn-solid {
    background:
        linear-gradient(180deg, #aaff00, #39ff14 45%, #189b08) !important;
    color: #061006 !important;
    border-color: #9cff47 !important;
    box-shadow:
        0 0 35px rgba(57,255,20,.38),
        inset 0 1px 0 rgba(255,255,255,.35) !important;
}

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

/* Große hero sections im Style deines Bildes */
.hero,
.page-hero,
.apply-hero,
.contact-hero,
.faction-v2-hero,
.faction-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.54), rgba(0,0,0,.88)),
        radial-gradient(circle at 55% 20%, rgba(255,122,24,.32), transparent 28%),
        radial-gradient(circle at 25% 45%, rgba(57,255,20,.22), transparent 28%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center/cover no-repeat !important;
    border-bottom: 1px solid rgba(57,255,20,.26) !important;
}

.hero:before,
.page-hero:before,
.apply-hero:before,
.contact-hero:before,
.faction-v2-hero:before,
.faction-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 70% 35%, rgba(57,255,20,.16), transparent 28%);
    background-size: 90px 90px, 90px 90px, auto;
    opacity: .42;
    pointer-events: none;
}

.hero:after,
.page-hero:after,
.apply-hero:after,
.contact-hero:after,
.faction-v2-hero:after,
.faction-hero:after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 130px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.92));
    pointer-events: none;
}

.hero .container,
.page-hero .container,
.apply-hero .container,
.contact-hero .container,
.faction-v2-hero-inner,
.faction-hero-grid {
    position: relative;
    z-index: 2;
}

/* Headline wie Poster / Game-Logo */
.hero h1,
.page-hero h1,
.apply-hero h1,
.contact-hero h1,
.faction-v2-copy h1,
.faction-hero h1 {
    font-family: Anton, Inter, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    color: #f8fff6;
    text-shadow:
        0 4px 0 #000,
        0 0 30px rgba(57,255,20,.28),
        0 0 70px rgba(255,122,24,.16) !important;
}

.eyebrow {
    font-family: Anton, Inter, sans-serif;
    color: var(--green) !important;
    text-shadow: 0 0 18px rgba(57,255,20,.65);
    letter-spacing: 2.5px !important;
}

/* Cards im Game-UI Look */
.card,
.panel,
.form-block,
.public-profile-card,
.admin-crud-card,
.admin-news-card,
.application-card,
.contact-request-card,
.admin-gallery-card,
.faction-v2-card,
.faction-card,
.mini-row {
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        linear-gradient(135deg, rgba(57,255,20,.07), rgba(255,122,24,.025)),
        rgba(6, 10, 7, .94) !important;
    border: 1px solid rgba(57,255,20,.22) !important;
    box-shadow:
        0 25px 90px rgba(0,0,0,.48),
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 0 35px rgba(57,255,20,.055) !important;
}

.card:hover,
.public-profile-card:hover,
.faction-v2-card:hover,
.faction-card:hover {
    border-color: rgba(57,255,20,.55) !important;
    box-shadow:
        0 35px 115px rgba(0,0,0,.55),
        0 0 75px rgba(57,255,20,.16) !important;
}

/* Tags wie Ingame Badges */
.tag {
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 950 !important;
    border-radius: 6px !important;
    background:
        linear-gradient(180deg, #9cff47, #39ff14 55%, #189b08) !important;
    box-shadow: 0 0 20px rgba(57,255,20,.35);
}

/* Status und Stats kantiger */
.stat,
.faction-stats div,
.command-stats div,
.faction-v2-info div,
.application-meta div,
.contact-request-meta div {
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(57,255,20,.06), rgba(0,0,0,.26)) !important;
    border: 1px solid rgba(57,255,20,.22) !important;
}

/* Bilder stärker */
.card img,
.public-profile-image img,
.admin-gallery-image img,
.faction-v2-image img,
.faction-image-wrap img {
    filter: contrast(1.12) saturate(1.14);
}

/* Footer wie Server Feature-Bar */
.footer {
    background:
        linear-gradient(90deg, rgba(57,255,20,.08), rgba(0,0,0,.7), rgba(255,122,24,.06)) !important;
    border-top: 1px solid rgba(57,255,20,.25) !important;
}

/* Öffentliche Grid-Seiten mehr Druck */
.public-card-grid {
    gap: 28px !important;
}

.public-profile-card {
    transition: .2s ease;
}

.public-profile-card:hover {
    transform: translateY(-5px);
}

.public-profile-content h2,
.card h3,
.card h2,
.faction-v2-title h2,
.admin-crud-top h2 {
    font-family: Anton, Inter, sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Formulare mit Premium-Gaming Input */
input,
textarea,
select {
    background: rgba(0,0,0,.52) !important;
    border: 1px solid rgba(57,255,20,.24) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(57,255,20,.75) !important;
    box-shadow: 0 0 0 4px rgba(57,255,20,.12), 0 0 28px rgba(57,255,20,.12) !important;
}

/* Startseite extra */
.hero-upgrade {
    min-height: 720px !important;
}

.hero-upgrade h1 {
    max-width: 880px !important;
}

.status-panel {
    backdrop-filter: blur(14px);
}

/* Mobile */
@media(max-width:900px) {
    .hero,
    .page-hero,
    .apply-hero,
    .contact-hero,
    .faction-v2-hero,
    .faction-hero {
        padding-top: 105px !important;
    }

    .menu {
        display: none !important;
    }
}

/* =========================================================
   WESTSIDEV CINEMATIC V2 - MEHR WIE DEIN BEISPIELBILD
========================================================= */

/* Navbar noch mehr Game-Header */
.nav {
    height: 92px;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.72)) !important;
}

.brand span:last-child {
    font-size: 30px;
    color: #f8fff6;
    text-shadow:
        0 0 18px rgba(57,255,20,.65),
        0 3px 0 #000;
}

/* Hero größer, heller, mehr Poster-Look */
.hero-upgrade {
    min-height: calc(100vh - 92px) !important;
    padding-top: 135px !important;
    padding-bottom: 120px !important;
    background:
        linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.36) 48%, rgba(0,0,0,.72) 100%),
        linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.28) 58%, rgba(0,0,0,.95) 100%),
        radial-gradient(circle at 55% 38%, rgba(255,120,20,.28), transparent 30%),
        radial-gradient(circle at 70% 42%, rgba(57,255,20,.18), transparent 26%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat !important;
}

/* Hero Overlay schwächer, damit das Bild mehr knallt */
.hero-upgrade:before {
    opacity: .20 !important;
}

.hero-upgrade:after {
    height: 190px !important;
    background: linear-gradient(180deg, transparent, #000) !important;
}

/* Hero Inhalt näher an Poster */
.hero-upgrade .hero-grid {
    grid-template-columns: 1.05fr .72fr;
    gap: 50px;
}

.hero-upgrade .eyebrow {
    font-size: 18px;
    letter-spacing: 4px !important;
    color: #39ff14 !important;
}

.hero-upgrade h1 {
    font-size: clamp(64px, 7.8vw, 112px) !important;
    line-height: .88 !important;
    max-width: 850px !important;
    color: #ffffff;
    -webkit-text-stroke: 1px rgba(57,255,20,.16);
    text-shadow:
        0 5px 0 #000,
        0 0 18px rgba(57,255,20,.55),
        0 0 70px rgba(57,255,20,.22),
        0 0 90px rgba(255,120,20,.22) !important;
}

/* Grüner Akzent in Headline */
.hero-upgrade h1::first-line {
    color: #fff;
}

.hero-upgrade p {
    font-size: 19px !important;
    color: #e4f3df !important;
    max-width: 720px;
    text-shadow: 0 2px 8px #000;
}

/* Buttons wie Server-Connect Buttons */
.hero-upgrade .actions .btn {
    min-width: 190px;
    justify-content: center;
    padding: 15px 22px;
    font-size: 14px;
}

/* Serverstatus mehr wie HUD */
.status-panel {
    background:
        linear-gradient(180deg, rgba(57,255,20,.13), rgba(0,0,0,.42)),
        rgba(8,14,9,.86) !important;
    border: 1px solid rgba(57,255,20,.42) !important;
    backdrop-filter: blur(16px);
    border-radius: 18px !important;
    box-shadow:
        0 0 0 1px rgba(57,255,20,.14),
        0 0 45px rgba(57,255,20,.22),
        0 28px 90px rgba(0,0,0,.65) !important;
}

.status-panel h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-panel .stat strong {
    font-size: 26px;
    text-shadow: 0 0 16px rgba(57,255,20,.55);
}

.status-dot.online {
    background: #39ff14 !important;
    color: #061006 !important;
    box-shadow: 0 0 25px rgba(57,255,20,.45);
}

/* Startseite Feature Cards mehr wie unterer Balken */
.hero-upgrade + .section {
    padding-top: 95px !important;
}

.feature-card {
    min-height: 240px;
    border-radius: 14px !important;
    position: relative;
    overflow: hidden;
}

.feature-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(57,255,20,.12), transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(255,120,20,.12), transparent 28%);
    pointer-events: none;
}

.feature-card h3 {
    font-size: 26px;
}

/* Alle Page-Heros auch mehr Bild sichtbar */
.page-hero,
.apply-hero,
.contact-hero,
.faction-v2-hero,
.faction-hero {
    background:
        linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.38), rgba(0,0,0,.78)),
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.88)),
        radial-gradient(circle at 55% 32%, rgba(255,120,20,.28), transparent 30%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat !important;
}

/* Section Headlines mehr Game-Style */
.section h2 {
    font-family: Anton, Inter, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow:
        0 3px 0 #000,
        0 0 24px rgba(57,255,20,.20);
}

/* Feature-Bar am Seitenende wie dein Beispiel */
.footer:before {
    content: "AKTIVE COMMUNITY   •   FAIRE REGELN   •   PERFORMANCE FIRST   •   CUSTOM INHALTE   •   WESTSIDEV";
    display: block;
    width: 100%;
    padding: 18px 0;
    margin-bottom: 20px;
    text-align: center;
    font-family: Anton, Inter, sans-serif;
    letter-spacing: 1.5px;
    color: #39ff14;
    text-shadow: 0 0 22px rgba(57,255,20,.55);
    border-bottom: 1px solid rgba(57,255,20,.18);
    background: rgba(0,0,0,.35);
}

/* Cards stärker wie GTA Server UI */
.card,
.public-profile-card,
.faction-v2-card,
.admin-gallery-card {
    border-radius: 14px !important;
}

.card h2,
.card h3,
.public-profile-content h2 {
    color: #fff;
    text-shadow: 0 3px 0 #000, 0 0 20px rgba(57,255,20,.18);
}

/* Fraktionen V2 nochmal aggressiver */
.faction-v2-hero {
    min-height: 620px;
    display: flex;
    align-items: center;
}

.faction-v2-copy h1 {
    font-size: clamp(62px, 7vw, 104px) !important;
}

.faction-v2-card {
    border-radius: 16px !important;
}

.faction-v2-image {
    height: 340px !important;
}

.faction-v2-title h2 {
    color: #fff;
    text-shadow:
        0 4px 0 #000,
        0 0 26px rgba(57,255,20,.20);
}

/* Mobile */
@media(max-width:900px) {
    .hero-upgrade {
        min-height: auto !important;
        padding-top: 110px !important;
    }

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

    .hero-upgrade h1 {
        font-size: 52px !important;
    }

    .status-panel {
        margin-top: 20px;
    }
}

/* =========================================================
   HERO TEXT FIX - weniger gedrückt, besser lesbar
========================================================= */

.hero-upgrade {
    min-height: 760px !important;
    padding-top: 120px !important;
    padding-bottom: 95px !important;
}

.hero-upgrade .hero-grid {
    grid-template-columns: 1fr .68fr !important;
    gap: 46px !important;
    align-items: center !important;
}

/* Headline wieder sauberer und weniger riesig */
.hero-upgrade h1 {
    font-size: clamp(48px, 5.8vw, 82px) !important;
    line-height: 1.02 !important;
    letter-spacing: .5px !important;
    max-width: 780px !important;
    margin-top: 18px !important;
    margin-bottom: 24px !important;
    -webkit-text-stroke: 0 !important;
    text-shadow:
        0 4px 0 #000,
        0 0 22px rgba(57,255,20,.45),
        0 0 55px rgba(57,255,20,.18) !important;
}

/* Text darunter wieder mehr Abstand */
.hero-upgrade p {
    max-width: 690px !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
    margin-bottom: 22px !important;
}

/* Eyebrow etwas kleiner */
.hero-upgrade .eyebrow {
    font-size: 15px !important;
    letter-spacing: 3px !important;
}

/* Buttons etwas runter und sauberer */
.hero-upgrade .actions {
    margin-top: 24px !important;
}

/* Statusbox etwas kleiner und nicht so dominant */
.status-panel {
    max-width: 460px !important;
    justify-self: end !important;
    padding: 26px !important;
}

.status-panel .status {
    grid-template-columns: 1.2fr .8fr .8fr !important;
}

.status-panel .stat {
    padding: 18px 16px !important;
}

.status-panel .stat strong {
    font-size: 23px !important;
}

/* Auf kleineren Bildschirmen sauber umbrechen */
@media(max-width:1100px) {
    .hero-upgrade .hero-grid {
        grid-template-columns: 1fr !important;
    }

    .status-panel {
        justify-self: start !important;
        max-width: 100% !important;
    }
}

@media(max-width:700px) {
    .hero-upgrade h1 {
        font-size: 42px !important;
        line-height: 1.05 !important;
    }
}

/* =========================================================
   JOBS PUBLIC PREMIUM CINEMATIC STYLE
========================================================= */

.jobs-hero {
    position: relative;
    overflow: hidden;
    padding: 145px 0 95px;
    min-height: 650px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(57,255,20,.20);
    background:
        linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.38), rgba(0,0,0,.78)),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.90)),
        radial-gradient(circle at 55% 32%, rgba(255,120,20,.28), transparent 30%),
        radial-gradient(circle at 76% 45%, rgba(57,255,20,.16), transparent 28%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat;
}

.jobs-grid-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.045) 1px, transparent 1px);
    background-size: 82px 82px;
    opacity: .34;
    mask-image: linear-gradient(180deg, black, transparent 88%);
}

.jobs-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -170px;
    top: 70px;
    background: rgba(57,255,20,.13);
    filter: blur(90px);
    border-radius: 50%;
}

.jobs-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 42px;
    align-items: center;
}

.jobs-copy h1 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: clamp(48px, 5.8vw, 82px);
    line-height: 1.02;
    letter-spacing: .5px;
    max-width: 850px;
    margin: 18px 0 24px;
    color: #fff;
    text-shadow:
        0 4px 0 #000,
        0 0 22px rgba(57,255,20,.45),
        0 0 55px rgba(57,255,20,.18);
}

.jobs-copy p {
    max-width: 760px;
    color: #e4f3df;
    font-size: 18px;
    line-height: 1.75;
    text-shadow: 0 2px 8px #000;
}

.jobs-command-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(57,255,20,.13), rgba(0,0,0,.42)),
        rgba(8,14,9,.86);
    border: 1px solid rgba(57,255,20,.42);
    border-radius: 18px;
    padding: 26px;
    backdrop-filter: blur(16px);
    box-shadow:
        0 0 0 1px rgba(57,255,20,.14),
        0 0 45px rgba(57,255,20,.22),
        0 28px 90px rgba(0,0,0,.65);
}

.jobs-head {
    margin-bottom: 22px;
}

.jobs-head h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: clamp(36px, 5vw, 58px);
    margin: 10px 0;
}

.job-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 28px;
    padding: 12px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(57,255,20,.12);
    border-radius: 20px;
}

.job-filter {
    border: 1px solid rgba(57,255,20,.18);
    background: rgba(5,9,6,.85);
    color: var(--text);
    border-radius: 999px;
    padding: 11px 16px;
    font-weight: 900;
    cursor: pointer;
    transition: .16s ease;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.job-filter:hover,
.job-filter.active {
    background: var(--green);
    color: #071008;
    border-color: var(--green);
    box-shadow: 0 0 30px rgba(57,255,20,.22);
}

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

.job-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        linear-gradient(135deg, rgba(57,255,20,.07), rgba(255,122,24,.025)),
        rgba(6, 10, 7, .94);
    border: 1px solid rgba(57,255,20,.22);
    box-shadow:
        0 26px 85px rgba(0,0,0,.34),
        0 0 35px rgba(57,255,20,.055);
    transition: .2s ease;
}

.job-card:hover {
    transform: translateY(-6px);
    border-color: rgba(57,255,20,.55);
    box-shadow:
        0 35px 110px rgba(0,0,0,.45),
        0 0 95px rgba(57,255,20,.10);
}

.job-card.category-staatlich {
    border-color: rgba(26,155,255,.32);
}

.job-card.category-unternehmen {
    border-color: rgba(57,255,20,.30);
}

.job-card.category-legal {
    border-color: rgba(156,255,71,.24);
}

.job-image {
    position: relative;
    height: 320px;
    overflow: hidden;
    background: rgba(0,0,0,.28);
}

.job-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .88;
    transform: scale(1.02);
    transition: .28s ease;
    filter: contrast(1.14) saturate(1.15);
}

.job-card:hover .job-image img {
    transform: scale(1.08);
    opacity: 1;
}

.job-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 25%, rgba(0,0,0,.84)),
        radial-gradient(circle at 25% 18%, rgba(57,255,20,.20), transparent 36%);
}

.job-badges {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 3;
}

.job-badges span {
    background: rgba(7,10,8,.76);
    border: 1px solid rgba(57,255,20,.26);
    color: var(--text);
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 950;
    backdrop-filter: blur(12px);
    text-transform: uppercase;
}

.job-badges .open {
    color: var(--green);
    background: rgba(57,255,20,.14);
}

.job-badges .closed {
    color: #ff7777;
    background: rgba(255,77,77,.13);
    border-color: rgba(255,77,77,.25);
}

.job-letter {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 3;
    width: 74px;
    height: 74px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(7,10,8,.76);
    border: 1px solid rgba(57,255,20,.28);
    color: var(--green);
    font-size: 38px;
    font-weight: 950;
    box-shadow: 0 0 42px rgba(57,255,20,.14);
    backdrop-filter: blur(12px);
}

.job-content {
    padding: 26px;
}

.job-title small {
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 1.7px;
    font-weight: 950;
}

.job-title h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin: 9px 0 20px;
    font-size: clamp(30px, 4vw, 42px);
    letter-spacing: -1px;
    text-shadow:
        0 4px 0 #000,
        0 0 26px rgba(57,255,20,.20);
}

.job-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.job-info div,
.job-salary {
    background:
        linear-gradient(180deg, rgba(57,255,20,.06), rgba(0,0,0,.26));
    border: 1px solid rgba(57,255,20,.18);
    border-radius: 12px;
    padding: 15px;
}

.job-info span,
.job-salary span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.job-info strong,
.job-salary strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.job-salary {
    margin-bottom: 18px;
}

.job-content p {
    color: var(--muted);
    line-height: 1.75;
    font-size: 16px;
}

.job-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.jobs-cta {
    margin-top: 34px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 30px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 80% 20%, rgba(57,255,20,.16), transparent 30%),
        linear-gradient(180deg, rgba(57,255,20,.065), rgba(255,255,255,.018)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.24);
    box-shadow: 0 30px 95px rgba(0,0,0,.35);
}

.jobs-cta h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    margin: 14px 0 8px;
    font-size: clamp(30px, 4vw, 48px);
}

.jobs-cta p {
    color: var(--muted);
    max-width: 780px;
    line-height: 1.7;
}

@media(max-width:1100px) {
    .jobs-hero-inner {
        grid-template-columns: 1fr;
    }

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

    .jobs-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width:700px) {
    .jobs-hero {
        padding-top: 105px;
    }

    .jobs-copy h1 {
        font-size: 44px;
    }

    .job-info {
        grid-template-columns: 1fr;
    }

    .job-image {
        height: 235px;
    }

    .job-filter-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .job-filter {
        width: 100%;
    }
}

/* =========================================================
   NEWS PUBLIC PREMIUM CINEMATIC STYLE
========================================================= */

.news-hero {
    position: relative;
    overflow: hidden;
    padding: 145px 0 95px;
    min-height: 650px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(57,255,20,.20);
    background:
        linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.38), rgba(0,0,0,.78)),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.90)),
        radial-gradient(circle at 55% 32%, rgba(255,120,20,.28), transparent 30%),
        radial-gradient(circle at 76% 45%, rgba(57,255,20,.16), transparent 28%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat;
}

.news-grid-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.045) 1px, transparent 1px);
    background-size: 82px 82px;
    opacity: .34;
    mask-image: linear-gradient(180deg, black, transparent 88%);
}

.news-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -170px;
    top: 70px;
    background: rgba(57,255,20,.13);
    filter: blur(90px);
    border-radius: 50%;
}

.news-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 42px;
    align-items: center;
}

.news-copy h1 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: clamp(48px, 5.8vw, 82px);
    line-height: 1.02;
    letter-spacing: .5px;
    max-width: 850px;
    margin: 18px 0 24px;
    color: #fff;
    text-shadow:
        0 4px 0 #000,
        0 0 22px rgba(57,255,20,.45),
        0 0 55px rgba(57,255,20,.18);
}

.news-copy p {
    max-width: 760px;
    color: #e4f3df;
    font-size: 18px;
    line-height: 1.75;
    text-shadow: 0 2px 8px #000;
}

.news-command-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(57,255,20,.13), rgba(0,0,0,.42)),
        rgba(8,14,9,.86);
    border: 1px solid rgba(57,255,20,.42);
    border-radius: 18px;
    padding: 26px;
    backdrop-filter: blur(16px);
    box-shadow:
        0 0 0 1px rgba(57,255,20,.14),
        0 0 45px rgba(57,255,20,.22),
        0 28px 90px rgba(0,0,0,.65);
}

.news-head {
    margin-bottom: 28px;
}

.news-head h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: clamp(36px, 5vw, 58px);
    margin: 10px 0;
}

.news-public-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.news-public-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        linear-gradient(135deg, rgba(57,255,20,.07), rgba(255,122,24,.025)),
        rgba(6, 10, 7, .94);
    border: 1px solid rgba(57,255,20,.22);
    box-shadow:
        0 26px 85px rgba(0,0,0,.34),
        0 0 35px rgba(57,255,20,.055);
    transition: .2s ease;
}

.news-public-card:hover {
    transform: translateY(-6px);
    border-color: rgba(57,255,20,.55);
    box-shadow:
        0 35px 110px rgba(0,0,0,.45),
        0 0 95px rgba(57,255,20,.10);
}

.news-public-image {
    position: relative;
    height: 310px;
    overflow: hidden;
    background: rgba(0,0,0,.28);
}

.news-public-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .88;
    transform: scale(1.02);
    transition: .28s ease;
    filter: contrast(1.14) saturate(1.15);
}

.news-public-card:hover .news-public-image img {
    transform: scale(1.08);
    opacity: 1;
}

.news-public-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 25%, rgba(0,0,0,.84)),
        radial-gradient(circle at 25% 18%, rgba(57,255,20,.20), transparent 36%);
}

.news-public-badges {
    position: absolute;
    left: 20px;
    top: 20px;
    display: flex;
    gap: 10px;
    z-index: 3;
}

.news-public-badges span {
    background: rgba(7,10,8,.76);
    border: 1px solid rgba(57,255,20,.26);
    color: var(--green);
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 950;
    backdrop-filter: blur(12px);
    text-transform: uppercase;
}

.news-public-content {
    padding: 26px;
}

.news-public-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--green);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.news-public-content h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin: 9px 0 16px;
    font-size: clamp(30px, 4vw, 42px);
    letter-spacing: -1px;
    text-shadow:
        0 4px 0 #000,
        0 0 26px rgba(57,255,20,.20);
}

.news-public-details {
    margin-top: 18px;
    border-top: 1px solid rgba(57,255,20,.16);
    padding-top: 16px;
}

.news-public-details summary {
    cursor: pointer;
    color: var(--green);
    font-weight: 950;
    text-transform: uppercase;
}

.news-public-details div {
    margin-top: 14px;
    color: var(--muted);
    line-height: 1.75;
}

.news-cta {
    margin-top: 34px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 30px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 80% 20%, rgba(57,255,20,.16), transparent 30%),
        linear-gradient(180deg, rgba(57,255,20,.065), rgba(255,255,255,.018)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.24);
    box-shadow: 0 30px 95px rgba(0,0,0,.35);
}

.news-cta h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    margin: 14px 0 8px;
    font-size: clamp(30px, 4vw, 48px);
}

.news-cta p {
    color: var(--muted);
    max-width: 780px;
    line-height: 1.7;
}

@media(max-width:1100px) {
    .news-hero-inner {
        grid-template-columns: 1fr;
    }

    .news-public-grid {
        grid-template-columns: 1fr;
    }

    .news-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width:700px) {
    .news-hero {
        padding-top: 105px;
    }

    .news-copy h1 {
        font-size: 44px;
    }

    .news-public-image {
        height: 235px;
    }
}

/* =========================================================
   GALERIE PUBLIC PREMIUM CINEMATIC STYLE
========================================================= */

.gallery-hero {
    position: relative;
    overflow: hidden;
    padding: 145px 0 95px;
    min-height: 650px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(57,255,20,.20);
    background:
        linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.38), rgba(0,0,0,.78)),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.90)),
        radial-gradient(circle at 55% 32%, rgba(255,120,20,.28), transparent 30%),
        radial-gradient(circle at 76% 45%, rgba(57,255,20,.16), transparent 28%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat;
}

.gallery-grid-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.045) 1px, transparent 1px);
    background-size: 82px 82px;
    opacity: .34;
    mask-image: linear-gradient(180deg, black, transparent 88%);
}

.gallery-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -170px;
    top: 70px;
    background: rgba(57,255,20,.13);
    filter: blur(90px);
    border-radius: 50%;
}

.gallery-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 42px;
    align-items: center;
}

.gallery-copy h1 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: clamp(48px, 5.8vw, 82px);
    line-height: 1.02;
    letter-spacing: .5px;
    max-width: 850px;
    margin: 18px 0 24px;
    color: #fff;
    text-shadow:
        0 4px 0 #000,
        0 0 22px rgba(57,255,20,.45),
        0 0 55px rgba(57,255,20,.18);
}

.gallery-copy p {
    max-width: 760px;
    color: #e4f3df;
    font-size: 18px;
    line-height: 1.75;
    text-shadow: 0 2px 8px #000;
}

.gallery-command-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(57,255,20,.13), rgba(0,0,0,.42)),
        rgba(8,14,9,.86);
    border: 1px solid rgba(57,255,20,.42);
    border-radius: 18px;
    padding: 26px;
    backdrop-filter: blur(16px);
    box-shadow:
        0 0 0 1px rgba(57,255,20,.14),
        0 0 45px rgba(57,255,20,.22),
        0 28px 90px rgba(0,0,0,.65);
}

.gallery-head {
    margin-bottom: 28px;
}

.gallery-head h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: clamp(36px, 5vw, 58px);
    margin: 10px 0;
}

.gallery-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 28px;
    padding: 12px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(57,255,20,.12);
    border-radius: 20px;
}

.gallery-filter {
    border: 1px solid rgba(57,255,20,.18);
    background: rgba(5,9,6,.85);
    color: var(--text);
    border-radius: 999px;
    padding: 11px 16px;
    font-weight: 900;
    cursor: pointer;
    transition: .16s ease;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.gallery-filter:hover,
.gallery-filter.active {
    background: var(--green);
    color: #071008;
    border-color: var(--green);
    box-shadow: 0 0 30px rgba(57,255,20,.22);
}

.gallery-public-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.gallery-public-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        linear-gradient(135deg, rgba(57,255,20,.07), rgba(255,122,24,.025)),
        rgba(6, 10, 7, .94);
    border: 1px solid rgba(57,255,20,.22);
    box-shadow:
        0 26px 85px rgba(0,0,0,.34),
        0 0 35px rgba(57,255,20,.055);
    transition: .2s ease;
}

.gallery-public-card:hover {
    transform: translateY(-6px);
    border-color: rgba(57,255,20,.55);
    box-shadow:
        0 35px 110px rgba(0,0,0,.45),
        0 0 95px rgba(57,255,20,.10);
}

.gallery-public-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: rgba(0,0,0,.28);
}

.gallery-public-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .9;
    transform: scale(1.02);
    transition: .28s ease;
    filter: contrast(1.14) saturate(1.15);
}

.gallery-public-card:hover .gallery-public-image img {
    transform: scale(1.09);
    opacity: 1;
}

.gallery-public-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 30%, rgba(0,0,0,.84)),
        radial-gradient(circle at 25% 18%, rgba(57,255,20,.20), transparent 36%);
}

.gallery-public-badges {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 3;
}

.gallery-public-badges span {
    background: rgba(7,10,8,.76);
    border: 1px solid rgba(57,255,20,.26);
    color: var(--green);
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 950;
    backdrop-filter: blur(12px);
    text-transform: uppercase;
}

.gallery-public-content {
    padding: 22px;
}

.gallery-public-content h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 12px;
    font-size: 30px;
    text-shadow:
        0 4px 0 #000,
        0 0 26px rgba(57,255,20,.20);
}

.gallery-public-content p {
    color: var(--muted);
    line-height: 1.7;
}

.gallery-cta {
    margin-top: 34px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 30px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 80% 20%, rgba(57,255,20,.16), transparent 30%),
        linear-gradient(180deg, rgba(57,255,20,.065), rgba(255,255,255,.018)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.24);
    box-shadow: 0 30px 95px rgba(0,0,0,.35);
}

.gallery-cta h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    margin: 14px 0 8px;
    font-size: clamp(30px, 4vw, 48px);
}

.gallery-cta p {
    color: var(--muted);
    max-width: 780px;
    line-height: 1.7;
}

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

@media(max-width:1100px) {
    .gallery-hero-inner {
        grid-template-columns: 1fr;
    }

    .gallery-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width:700px) {
    .gallery-hero {
        padding-top: 105px;
    }

    .gallery-copy h1 {
        font-size: 44px;
    }

    .gallery-public-grid {
        grid-template-columns: 1fr;
    }

    .gallery-public-image {
        height: 235px;
    }

    .gallery-filter-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gallery-filter {
        width: 100%;
    }
}

/* =========================================================
   TEAM PUBLIC PREMIUM CINEMATIC STYLE
========================================================= */

.team-hero {
    position: relative;
    overflow: hidden;
    padding: 145px 0 95px;
    min-height: 650px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(57,255,20,.20);
    background:
        linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.38), rgba(0,0,0,.78)),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.90)),
        radial-gradient(circle at 55% 32%, rgba(255,120,20,.28), transparent 30%),
        radial-gradient(circle at 76% 45%, rgba(57,255,20,.16), transparent 28%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat;
}

.team-grid-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.045) 1px, transparent 1px);
    background-size: 82px 82px;
    opacity: .34;
    mask-image: linear-gradient(180deg, black, transparent 88%);
}

.team-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -170px;
    top: 70px;
    background: rgba(57,255,20,.13);
    filter: blur(90px);
    border-radius: 50%;
}

.team-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 42px;
    align-items: center;
}

.team-copy h1 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: clamp(48px, 5.8vw, 82px);
    line-height: 1.02;
    letter-spacing: .5px;
    max-width: 850px;
    margin: 18px 0 24px;
    color: #fff;
    text-shadow:
        0 4px 0 #000,
        0 0 22px rgba(57,255,20,.45),
        0 0 55px rgba(57,255,20,.18);
}

.team-copy p {
    max-width: 760px;
    color: #e4f3df;
    font-size: 18px;
    line-height: 1.75;
    text-shadow: 0 2px 8px #000;
}

.team-command-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(57,255,20,.13), rgba(0,0,0,.42)),
        rgba(8,14,9,.86);
    border: 1px solid rgba(57,255,20,.42);
    border-radius: 18px;
    padding: 26px;
    backdrop-filter: blur(16px);
    box-shadow:
        0 0 0 1px rgba(57,255,20,.14),
        0 0 45px rgba(57,255,20,.22),
        0 28px 90px rgba(0,0,0,.65);
}

.team-head {
    margin-bottom: 28px;
}

.team-head h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: clamp(36px, 5vw, 58px);
    margin: 10px 0;
}

.team-public-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.team-public-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        linear-gradient(135deg, rgba(57,255,20,.07), rgba(255,122,24,.025)),
        rgba(6, 10, 7, .94);
    border: 1px solid rgba(57,255,20,.22);
    box-shadow:
        0 26px 85px rgba(0,0,0,.34),
        0 0 35px rgba(57,255,20,.055);
    transition: .2s ease;
}

.team-public-card:hover {
    transform: translateY(-6px);
    border-color: rgba(57,255,20,.55);
    box-shadow:
        0 35px 110px rgba(0,0,0,.45),
        0 0 95px rgba(57,255,20,.10);
}

.team-public-image {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: rgba(0,0,0,.28);
}

.team-public-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .9;
    transform: scale(1.02);
    transition: .28s ease;
    filter: contrast(1.14) saturate(1.15);
}

.team-public-card:hover .team-public-image img {
    transform: scale(1.08);
    opacity: 1;
}

.team-public-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 30%, rgba(0,0,0,.84)),
        radial-gradient(circle at 25% 18%, rgba(57,255,20,.20), transparent 36%);
}

.team-public-badges {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 3;
}

.team-public-badges span {
    background: rgba(7,10,8,.76);
    border: 1px solid rgba(57,255,20,.26);
    color: var(--green);
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 950;
    backdrop-filter: blur(12px);
    text-transform: uppercase;
}

.team-public-letter {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(7,10,8,.76);
    border: 1px solid rgba(57,255,20,.28);
    color: var(--green);
    font-size: 34px;
    font-weight: 950;
    box-shadow: 0 0 42px rgba(57,255,20,.14);
    backdrop-filter: blur(12px);
}

.team-public-content {
    padding: 24px;
}

.team-public-content small {
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 950;
}

.team-public-content h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    color: #fff;
    margin: 9px 0 16px;
    font-size: 34px;
    text-shadow:
        0 4px 0 #000,
        0 0 26px rgba(57,255,20,.20);
}

.team-discord-box {
    background:
        linear-gradient(180deg, rgba(57,255,20,.06), rgba(0,0,0,.26));
    border: 1px solid rgba(57,255,20,.18);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 16px;
}

.team-discord-box span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.team-discord-box strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.team-public-content p {
    color: var(--muted);
    line-height: 1.7;
}

.team-cta {
    margin-top: 34px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 30px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 80% 20%, rgba(57,255,20,.16), transparent 30%),
        linear-gradient(180deg, rgba(57,255,20,.065), rgba(255,255,255,.018)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.24);
    box-shadow: 0 30px 95px rgba(0,0,0,.35);
}

.team-cta h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    margin: 14px 0 8px;
    font-size: clamp(30px, 4vw, 48px);
}

.team-cta p {
    color: var(--muted);
    max-width: 780px;
    line-height: 1.7;
}

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

@media(max-width:1100px) {
    .team-hero-inner {
        grid-template-columns: 1fr;
    }

    .team-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width:700px) {
    .team-hero {
        padding-top: 105px;
    }

    .team-copy h1 {
        font-size: 44px;
    }

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

    .team-public-image {
        height: 235px;
    }
}

/* =========================================================
   REGELWERK PUBLIC PREMIUM CINEMATIC STYLE
========================================================= */

.rules-hero {
    position: relative;
    overflow: hidden;
    padding: 145px 0 95px;
    min-height: 650px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(57,255,20,.20);
    background:
        linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.38), rgba(0,0,0,.78)),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.90)),
        radial-gradient(circle at 55% 32%, rgba(255,120,20,.28), transparent 30%),
        radial-gradient(circle at 76% 45%, rgba(57,255,20,.16), transparent 28%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat;
}

.rules-grid-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.045) 1px, transparent 1px);
    background-size: 82px 82px;
    opacity: .34;
    mask-image: linear-gradient(180deg, black, transparent 88%);
}

.rules-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -170px;
    top: 70px;
    background: rgba(57,255,20,.13);
    filter: blur(90px);
    border-radius: 50%;
}

.rules-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 42px;
    align-items: center;
}

.rules-copy h1 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: clamp(48px, 5.8vw, 82px);
    line-height: 1.02;
    letter-spacing: .5px;
    max-width: 850px;
    margin: 18px 0 24px;
    color: #fff;
    text-shadow:
        0 4px 0 #000,
        0 0 22px rgba(57,255,20,.45),
        0 0 55px rgba(57,255,20,.18);
}

.rules-copy p {
    max-width: 760px;
    color: #e4f3df;
    font-size: 18px;
    line-height: 1.75;
    text-shadow: 0 2px 8px #000;
}

.rules-command-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(57,255,20,.13), rgba(0,0,0,.42)),
        rgba(8,14,9,.86);
    border: 1px solid rgba(57,255,20,.42);
    border-radius: 18px;
    padding: 26px;
    backdrop-filter: blur(16px);
    box-shadow:
        0 0 0 1px rgba(57,255,20,.14),
        0 0 45px rgba(57,255,20,.22),
        0 28px 90px rgba(0,0,0,.65);
}

.rules-head {
    margin-bottom: 28px;
}

.rules-head h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: clamp(36px, 5vw, 58px);
    margin: 10px 0;
}

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

.rule-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        linear-gradient(135deg, rgba(57,255,20,.07), rgba(255,122,24,.025)),
        rgba(6, 10, 7, .94);
    border: 1px solid rgba(57,255,20,.22);
    box-shadow:
        0 26px 85px rgba(0,0,0,.34),
        0 0 35px rgba(57,255,20,.055);
    transition: .2s ease;
}

.rule-card:hover {
    transform: translateY(-6px);
    border-color: rgba(57,255,20,.55);
    box-shadow:
        0 35px 110px rgba(0,0,0,.45),
        0 0 95px rgba(57,255,20,.10);
}

.rule-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 42px;
    border-radius: 10px;
    background: var(--green);
    color: #071008;
    font-weight: 950;
    box-shadow: 0 0 30px rgba(57,255,20,.32);
    margin-bottom: 18px;
}

.rule-card h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    color: #fff;
    font-size: 30px;
    margin: 0 0 14px;
    text-shadow:
        0 4px 0 #000,
        0 0 26px rgba(57,255,20,.20);
}

.rule-card p {
    color: var(--muted);
    line-height: 1.7;
}

.rules-cta {
    margin-top: 34px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 30px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 80% 20%, rgba(57,255,20,.16), transparent 30%),
        linear-gradient(180deg, rgba(57,255,20,.065), rgba(255,255,255,.018)),
        var(--panel);
    border: 1px solid rgba(57,255,20,.24);
    box-shadow: 0 30px 95px rgba(0,0,0,.35);
}

.rules-cta h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    margin: 14px 0 8px;
    font-size: clamp(30px, 4vw, 48px);
}

.rules-cta p {
    color: var(--muted);
    max-width: 780px;
    line-height: 1.7;
}

@media(max-width:1100px) {
    .rules-hero-inner {
        grid-template-columns: 1fr;
    }

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

    .rules-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width:700px) {
    .rules-hero {
        padding-top: 105px;
    }

    .rules-copy h1 {
        font-size: 44px;
    }

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

/* =========================================================
   REGELWERK REAL CONTENT DESIGN FIX
========================================================= */

.rules-document {
    display: grid;
    gap: 24px;
}

.rules-block {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        linear-gradient(135deg, rgba(57,255,20,.07), rgba(255,122,24,.025)),
        rgba(6, 10, 7, .94);
    border: 1px solid rgba(57,255,20,.22);
    box-shadow:
        0 26px 85px rgba(0,0,0,.34),
        0 0 35px rgba(57,255,20,.055);
}

.rules-intro {
    border-color: rgba(57,255,20,.38);
}

.rules-block h2 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    color: #fff;
    font-size: clamp(30px, 4vw, 48px);
    margin: 0 0 18px;
    text-shadow:
        0 4px 0 #000,
        0 0 26px rgba(57,255,20,.20);
}

.rules-block h3 {
    color: var(--green);
    font-size: 19px;
    margin: 22px 0 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rules-block p,
.rules-block li {
    color: #dce8d9;
    line-height: 1.75;
    font-size: 16px;
}

.rules-block ul {
    margin: 0;
    padding-left: 22px;
}

.rules-block li {
    margin-bottom: 8px;
}

.rules-warning,
.rules-allowed,
.rules-term {
    margin-top: 18px;
    padding: 18px;
    border-radius: 14px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(57,255,20,.14);
}

.rules-warning {
    border-color: rgba(255,70,70,.28);
    background:
        linear-gradient(180deg, rgba(255,0,0,.06), rgba(0,0,0,.28));
}

.rules-warning h3,
.rules-danger-block .rules-term p {
    color: #ff5252;
}

.rules-allowed {
    border-color: rgba(57,255,20,.28);
    background:
        linear-gradient(180deg, rgba(57,255,20,.07), rgba(0,0,0,.28));
}

.rules-term h3 {
    color: #ffffff;
    text-decoration: underline;
}

.rules-term p {
    margin: 8px 0 0;
}

.rules-term strong {
    color: #ff5252;
}

@media(max-width:700px) {
    .rules-block {
        padding: 22px;
    }

    .rules-block h2 {
        font-size: 32px;
    }
}

/* =========================================================
   BEWERBUNG FINAL CINEMATIC POLISH
========================================================= */

.apply-hero,
.application-hero,
.whitelist-hero {
    position: relative;
    overflow: hidden;
    min-height: 640px;
    padding: 145px 0 95px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(57,255,20,.20);
    background:
        linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.38), rgba(0,0,0,.78)),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.90)),
        radial-gradient(circle at 55% 32%, rgba(255,120,20,.28), transparent 30%),
        radial-gradient(circle at 76% 45%, rgba(57,255,20,.16), transparent 28%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat !important;
}

.apply-hero:before,
.application-hero:before,
.whitelist-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.045) 1px, transparent 1px);
    background-size: 82px 82px;
    opacity: .34;
    mask-image: linear-gradient(180deg, black, transparent 88%);
    pointer-events: none;
}

.apply-hero .container,
.application-hero .container,
.whitelist-hero .container {
    position: relative;
    z-index: 2;
}

.apply-hero h1,
.application-hero h1,
.whitelist-hero h1,
.application-page h1,
.apply-page h1 {
    font-family: Anton, Inter, sans-serif !important;
    text-transform: uppercase;
    font-size: clamp(48px, 5.8vw, 82px) !important;
    line-height: 1.02 !important;
    letter-spacing: .5px;
    max-width: 900px;
    margin: 18px 0 24px;
    color: #fff !important;
    text-shadow:
        0 4px 0 #000,
        0 0 22px rgba(57,255,20,.45),
        0 0 55px rgba(57,255,20,.18) !important;
}

.apply-hero p,
.application-hero p,
.whitelist-hero p {
    max-width: 760px;
    color: #e4f3df !important;
    font-size: 18px;
    line-height: 1.75;
    text-shadow: 0 2px 8px #000;
}

/* Bewerbungsformular als Premium Panel */
.application-form,
.apply-form,
form.card,
.form-card,
.application-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
    padding: 30px !important;
    background:
        radial-gradient(circle at 85% 15%, rgba(57,255,20,.13), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        linear-gradient(135deg, rgba(57,255,20,.07), rgba(255,122,24,.025)),
        rgba(6, 10, 7, .94) !important;
    border: 1px solid rgba(57,255,20,.24) !important;
    box-shadow:
        0 30px 95px rgba(0,0,0,.38),
        0 0 55px rgba(57,255,20,.075) !important;
}

.application-form:before,
.apply-form:before,
form.card:before,
.form-card:before,
.application-card:before {
    content: "WHITELIST";
    position: absolute;
    right: -10px;
    top: 8px;
    font-family: Anton, Inter, sans-serif;
    font-size: 96px;
    letter-spacing: 4px;
    color: rgba(57,255,20,.035);
    pointer-events: none;
}

/* Formularfelder */
.application-form label,
.apply-form label,
form.card label,
.form-card label,
.application-card label {
    color: #ffffff !important;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: .7px;
    font-size: 13px;
}

.application-form input,
.application-form textarea,
.application-form select,
.apply-form input,
.apply-form textarea,
.apply-form select,
form.card input,
form.card textarea,
form.card select,
.form-card input,
.form-card textarea,
.form-card select,
.application-card input,
.application-card textarea,
.application-card select {
    background:
        linear-gradient(180deg, rgba(57,255,20,.055), rgba(0,0,0,.24)) !important;
    border: 1px solid rgba(57,255,20,.22) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px 15px !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.application-form textarea,
.apply-form textarea,
form.card textarea,
.form-card textarea,
.application-card textarea {
    min-height: 150px;
    resize: vertical;
}

.application-form input:focus,
.application-form textarea:focus,
.application-form select:focus,
.apply-form input:focus,
.apply-form textarea:focus,
.apply-form select:focus,
form.card input:focus,
form.card textarea:focus,
form.card select:focus,
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus,
.application-card input:focus,
.application-card textarea:focus,
.application-card select:focus {
    border-color: rgba(57,255,20,.75) !important;
    box-shadow:
        0 0 0 3px rgba(57,255,20,.10),
        0 0 34px rgba(57,255,20,.13) !important;
}

/* Abschnitte / Überschriften im Formular */
.application-form h2,
.application-form h3,
.apply-form h2,
.apply-form h3,
form.card h2,
form.card h3,
.form-card h2,
.form-card h3,
.application-card h2,
.application-card h3 {
    font-family: Anton, Inter, sans-serif !important;
    text-transform: uppercase;
    color: #fff !important;
    text-shadow:
        0 4px 0 #000,
        0 0 26px rgba(57,255,20,.20);
}

/* Hinweise / Erfolgs- und Fehlerboxen */
.alert,
.success,
.error,
.message {
    border-radius: 14px !important;
    border: 1px solid rgba(57,255,20,.22) !important;
    background: rgba(0,0,0,.42) !important;
    color: #e4f3df !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.25);
}

.alert-success,
.success {
    border-color: rgba(57,255,20,.45) !important;
}

.alert-error,
.error {
    border-color: rgba(255,70,70,.42) !important;
}

/* Bewerbungsseite Content */
.apply-section,
.application-section,
.whitelist-section {
    background:
        radial-gradient(circle at 15% 0%, rgba(57,255,20,.08), transparent 34%),
        radial-gradient(circle at 90% 30%, rgba(255,122,24,.055), transparent 28%),
        #000 !important;
}

/* Mobile */
@media(max-width:700px) {
    .apply-hero,
    .application-hero,
    .whitelist-hero {
        padding-top: 105px;
        min-height: auto;
    }

    .apply-hero h1,
    .application-hero h1,
    .whitelist-hero h1 {
        font-size: 44px !important;
    }

    .application-form,
    .apply-form,
    form.card,
    .form-card,
    .application-card {
        padding: 22px !important;
    }
}

/* =========================================================
   BEWERBUNG ULTRA CINEMATIC FINAL
========================================================= */

/* Hero noch aggressiver */
.apply-hero,
.application-hero,
.whitelist-hero {
    min-height: 720px !important;
    background:
        linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.82) 100%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.92)),
        radial-gradient(circle at 52% 35%, rgba(255,122,24,.30), transparent 28%),
        radial-gradient(circle at 72% 42%, rgba(57,255,20,.20), transparent 30%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat !important;
}

/* Bewegender Scanline Effekt */
.apply-hero::after,
.application-hero::after,
.whitelist-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 5px
        );
    opacity: .20;
    pointer-events: none;
    animation: westScan 7s linear infinite;
}

@keyframes westScan {
    from { background-position: 0 0; }
    to { background-position: 0 220px; }
}

/* Hero Titel mit Whitelist Badge Optik */
.apply-hero h1,
.application-hero h1,
.whitelist-hero h1,
.application-page h1,
.apply-page h1 {
    position: relative;
    font-size: clamp(54px, 6.3vw, 94px) !important;
    max-width: 980px !important;
}

.apply-hero h1::after,
.application-hero h1::after,
.whitelist-hero h1::after {
    content: "WESTSIDEV ACCESS REQUEST";
    display: block;
    width: fit-content;
    margin-top: 18px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(57,255,20,.13);
    border: 1px solid rgba(57,255,20,.36);
    color: var(--green);
    font-family: Inter, sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(57,255,20,.45);
    box-shadow: 0 0 35px rgba(57,255,20,.12);
}

/* Bewerbungsbereich wie Control Center */
.apply-section,
.application-section,
.whitelist-section,
.section:has(.application-form),
.section:has(.apply-form) {
    position: relative;
    overflow: hidden;
}

.apply-section::before,
.application-section::before,
.whitelist-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.035) 1px, transparent 1px);
    background-size: 74px 74px;
    opacity: .28;
    pointer-events: none;
}

/* Formularcontainer stärker */
.application-form,
.apply-form,
form.card,
.form-card,
.application-card {
    position: relative;
    isolation: isolate;
    border-radius: 22px !important;
    padding: 34px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(57,255,20,.16), transparent 30%),
        radial-gradient(circle at 100% 10%, rgba(255,122,24,.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
        rgba(4, 8, 5, .96) !important;
    border: 1px solid rgba(57,255,20,.34) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.035),
        0 0 80px rgba(57,255,20,.10),
        0 35px 120px rgba(0,0,0,.55) !important;
}

/* leuchtender Rand */
.application-form::after,
.apply-form::after,
form.card::after,
.form-card::after,
.application-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(135deg, rgba(57,255,20,.75), transparent 30%, rgba(255,122,24,.42), transparent 70%, rgba(57,255,20,.48));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .65;
}

/* Großes Wasserzeichen */
.application-form:before,
.apply-form:before,
form.card:before,
.form-card:before,
.application-card:before {
    content: "ACCESS";
    right: -12px;
    top: -20px;
    font-size: 150px;
    color: rgba(57,255,20,.045);
    z-index: -1;
}

/* Formular Überschriften */
.application-form h2,
.application-form h3,
.apply-form h2,
.apply-form h3,
form.card h2,
form.card h3,
.form-card h2,
.form-card h3,
.application-card h2,
.application-card h3 {
    position: relative;
    padding-left: 18px;
}

.application-form h2::before,
.application-form h3::before,
.apply-form h2::before,
.apply-form h3::before,
form.card h2::before,
form.card h3::before,
.form-card h2::before,
.form-card h3::before,
.application-card h2::before,
.application-card h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    width: 5px;
    height: 1.05em;
    border-radius: 99px;
    background: var(--green);
    box-shadow: 0 0 24px rgba(57,255,20,.75);
}

/* Inputs noch hochwertiger */
.application-form input,
.application-form textarea,
.application-form select,
.apply-form input,
.apply-form textarea,
.apply-form select,
form.card input,
form.card textarea,
form.card select,
.form-card input,
.form-card textarea,
.form-card select,
.application-card input,
.application-card textarea,
.application-card select {
    min-height: 52px;
    background:
        linear-gradient(180deg, rgba(57,255,20,.075), rgba(0,0,0,.34)) !important;
    border: 1px solid rgba(57,255,20,.28) !important;
    color: #fff !important;
    font-size: 15px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 35px rgba(0,0,0,.18);
}

.application-form input::placeholder,
.application-form textarea::placeholder,
.apply-form input::placeholder,
.apply-form textarea::placeholder,
form.card input::placeholder,
form.card textarea::placeholder,
.form-card input::placeholder,
.form-card textarea::placeholder,
.application-card input::placeholder,
.application-card textarea::placeholder {
    color: rgba(220,232,217,.48);
}

/* Labels als kleine HUD-Tags */
.application-form label,
.apply-form label,
form.card label,
.form-card label,
.application-card label {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 8px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(57,255,20,.08);
    border: 1px solid rgba(57,255,20,.18);
    color: #eaffea !important;
}

/* Checkboxen / Radios besser */
.application-form input[type="checkbox"],
.application-form input[type="radio"],
.apply-form input[type="checkbox"],
.apply-form input[type="radio"],
form.card input[type="checkbox"],
form.card input[type="radio"] {
    min-height: auto !important;
    width: 18px;
    height: 18px;
    accent-color: #39ff14;
}

/* Submit Button maximal auffällig */
.application-form button[type="submit"],
.apply-form button[type="submit"],
form.card button[type="submit"],
.form-card button[type="submit"],
.application-card button[type="submit"],
.application-form .btn-solid,
.apply-form .btn-solid,
form.card .btn-solid {
    position: relative;
    overflow: hidden;
    min-height: 56px;
    border-radius: 14px !important;
    font-size: 15px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.16) inset,
        0 0 40px rgba(57,255,20,.38),
        0 18px 50px rgba(57,255,20,.18) !important;
}

.application-form button[type="submit"]::before,
.apply-form button[type="submit"]::before,
form.card button[type="submit"]::before,
.form-card button[type="submit"]::before,
.application-card button[type="submit"]::before,
.application-form .btn-solid::before,
.apply-form .btn-solid::before,
form.card .btn-solid::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-22deg);
    animation: westButtonShine 3.2s infinite;
}

@keyframes westButtonShine {
    0% { left: -80%; }
    45%,100% { left: 135%; }
}

/* Extra Info Cards, falls vorhanden */
.apply-info,
.application-info,
.whitelist-info,
.form-side,
.application-side,
.apply-side {
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,20,.16), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(5,9,6,.92) !important;
    border: 1px solid rgba(57,255,20,.24) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.40);
}

/* Kleine Status-HUD Leiste oben im Formular */
.application-form > *:first-child::before,
.apply-form > *:first-child::before,
form.card > *:first-child::before,
.form-card > *:first-child::before,
.application-card > *:first-child::before {
    content: "● WHITELIST SYSTEM ONLINE";
    display: block;
    width: fit-content;
    margin-bottom: 16px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #39ff14;
    background: rgba(57,255,20,.10);
    border: 1px solid rgba(57,255,20,.28);
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1.3px;
    box-shadow: 0 0 26px rgba(57,255,20,.14);
}

/* Erfolg/Fehler mit besserem Glow */
.alert-success,
.success {
    background:
        linear-gradient(180deg, rgba(57,255,20,.13), rgba(0,0,0,.42)) !important;
    border-color: rgba(57,255,20,.55) !important;
    box-shadow: 0 0 50px rgba(57,255,20,.16) !important;
}

.alert-error,
.error {
    background:
        linear-gradient(180deg, rgba(255,70,70,.13), rgba(0,0,0,.42)) !important;
    border-color: rgba(255,70,70,.55) !important;
    box-shadow: 0 0 50px rgba(255,70,70,.13) !important;
}

/* Mobile */
@media(max-width:700px) {
    .apply-hero,
    .application-hero,
    .whitelist-hero {
        min-height: auto !important;
    }

    .apply-hero h1,
    .application-hero h1,
    .whitelist-hero h1 {
        font-size: 46px !important;
    }

    .application-form,
    .apply-form,
    form.card,
    .form-card,
    .application-card {
        padding: 22px !important;
    }

    .application-form:before,
    .apply-form:before,
    form.card:before,
    .form-card:before,
    .application-card:before {
        font-size: 82px;
    }
}

/* =========================================================
   KONTAKT ULTRA CINEMATIC FINAL
========================================================= */

.contact-hero,
.kontakt-hero {
    position: relative;
    overflow: hidden;
    min-height: 700px !important;
    padding: 145px 0 95px !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(57,255,20,.20);
    background:
        linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.82) 100%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.92)),
        radial-gradient(circle at 52% 35%, rgba(255,122,24,.30), transparent 28%),
        radial-gradient(circle at 72% 42%, rgba(57,255,20,.20), transparent 30%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat !important;
}

.contact-hero::before,
.kontakt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.045) 1px, transparent 1px);
    background-size: 82px 82px;
    opacity: .34;
    mask-image: linear-gradient(180deg, black, transparent 88%);
    pointer-events: none;
}

.contact-hero::after,
.kontakt-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 5px
        );
    opacity: .18;
    pointer-events: none;
    animation: westScan 7s linear infinite;
}

.contact-hero .container,
.kontakt-hero .container {
    position: relative;
    z-index: 2;
}

.contact-hero h1,
.kontakt-hero h1,
.contact-page h1,
.kontakt-page h1 {
    position: relative;
    font-family: Anton, Inter, sans-serif !important;
    text-transform: uppercase;
    font-size: clamp(54px, 6.3vw, 94px) !important;
    line-height: 1.02 !important;
    letter-spacing: .5px;
    max-width: 980px;
    margin: 18px 0 24px;
    color: #fff !important;
    text-shadow:
        0 4px 0 #000,
        0 0 22px rgba(57,255,20,.45),
        0 0 55px rgba(57,255,20,.18) !important;
}

.contact-hero h1::after,
.kontakt-hero h1::after {
    content: "WESTSIDEV SUPPORT CHANNEL";
    display: block;
    width: fit-content;
    margin-top: 18px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(57,255,20,.13);
    border: 1px solid rgba(57,255,20,.36);
    color: var(--green);
    font-family: Inter, sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(57,255,20,.45);
    box-shadow: 0 0 35px rgba(57,255,20,.12);
}

.contact-hero p,
.kontakt-hero p {
    max-width: 760px;
    color: #e4f3df !important;
    font-size: 18px;
    line-height: 1.75;
    text-shadow: 0 2px 8px #000;
}

/* Kontakt-Bereich */
.contact-section,
.kontakt-section,
.section:has(.contact-form),
.section:has(.kontakt-form) {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 0%, rgba(57,255,20,.08), transparent 34%),
        radial-gradient(circle at 90% 30%, rgba(255,122,24,.055), transparent 28%),
        #000 !important;
}

.contact-section::before,
.kontakt-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.035) 1px, transparent 1px);
    background-size: 74px 74px;
    opacity: .28;
    pointer-events: none;
}

/* Kontaktformular */
.contact-form,
.kontakt-form,
.contact-card,
.kontakt-card,
form.card {
    position: relative;
    isolation: isolate;
    border-radius: 22px !important;
    padding: 34px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(57,255,20,.16), transparent 30%),
        radial-gradient(circle at 100% 10%, rgba(255,122,24,.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
        rgba(4, 8, 5, .96) !important;
    border: 1px solid rgba(57,255,20,.34) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.035),
        0 0 80px rgba(57,255,20,.10),
        0 35px 120px rgba(0,0,0,.55) !important;
}

.contact-form::before,
.kontakt-form::before,
.contact-card::before,
.kontakt-card::before,
form.card::before {
    content: "SUPPORT";
    position: absolute;
    right: -12px;
    top: -20px;
    font-family: Anton, Inter, sans-serif;
    font-size: 150px;
    letter-spacing: 4px;
    color: rgba(57,255,20,.045);
    z-index: -1;
    pointer-events: none;
}

.contact-form::after,
.kontakt-form::after,
.contact-card::after,
.kontakt-card::after,
form.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(135deg, rgba(57,255,20,.75), transparent 30%, rgba(255,122,24,.42), transparent 70%, rgba(57,255,20,.48));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .65;
}

.contact-form > *:first-child::before,
.kontakt-form > *:first-child::before,
.contact-card > *:first-child::before,
.kontakt-card > *:first-child::before,
form.card > *:first-child::before {
    content: "● SUPPORT SYSTEM ONLINE";
    display: block;
    width: fit-content;
    margin-bottom: 16px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #39ff14;
    background: rgba(57,255,20,.10);
    border: 1px solid rgba(57,255,20,.28);
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1.3px;
    box-shadow: 0 0 26px rgba(57,255,20,.14);
}

/* Kontaktformular Felder */
.contact-form label,
.kontakt-form label,
.contact-card label,
.kontakt-card label,
form.card label {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 8px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(57,255,20,.08);
    border: 1px solid rgba(57,255,20,.18);
    color: #eaffea !important;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: .7px;
    font-size: 13px;
}

.contact-form input,
.contact-form textarea,
.contact-form select,
.kontakt-form input,
.kontakt-form textarea,
.kontakt-form select,
.contact-card input,
.contact-card textarea,
.contact-card select,
.kontakt-card input,
.kontakt-card textarea,
.kontakt-card select,
form.card input,
form.card textarea,
form.card select {
    min-height: 52px;
    background:
        linear-gradient(180deg, rgba(57,255,20,.075), rgba(0,0,0,.34)) !important;
    border: 1px solid rgba(57,255,20,.28) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px 15px !important;
    font-size: 15px !important;
    outline: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 35px rgba(0,0,0,.18);
}

.contact-form textarea,
.kontakt-form textarea,
.contact-card textarea,
.kontakt-card textarea,
form.card textarea {
    min-height: 170px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.kontakt-form input:focus,
.kontakt-form textarea:focus,
.kontakt-form select:focus,
.contact-card input:focus,
.contact-card textarea:focus,
.contact-card select:focus,
.kontakt-card input:focus,
.kontakt-card textarea:focus,
.kontakt-card select:focus,
form.card input:focus,
form.card textarea:focus,
form.card select:focus {
    border-color: rgba(57,255,20,.75) !important;
    box-shadow:
        0 0 0 3px rgba(57,255,20,.10),
        0 0 34px rgba(57,255,20,.13) !important;
}

/* Submit Button */
.contact-form button[type="submit"],
.kontakt-form button[type="submit"],
.contact-card button[type="submit"],
.kontakt-card button[type="submit"],
form.card button[type="submit"] {
    position: relative;
    overflow: hidden;
    min-height: 56px;
    border-radius: 14px !important;
    font-size: 15px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.16) inset,
        0 0 40px rgba(57,255,20,.38),
        0 18px 50px rgba(57,255,20,.18) !important;
}

.contact-form button[type="submit"]::before,
.kontakt-form button[type="submit"]::before,
.contact-card button[type="submit"]::before,
.kontakt-card button[type="submit"]::before,
form.card button[type="submit"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-22deg);
    animation: westButtonShine 3.2s infinite;
}

/* Kontakt Info Boxen */
.contact-info,
.kontakt-info,
.support-info,
.contact-side,
.kontakt-side {
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,20,.16), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(5,9,6,.92) !important;
    border: 1px solid rgba(57,255,20,.24) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.40);
}

/* Mobile */
@media(max-width:700px) {
    .contact-hero,
    .kontakt-hero {
        min-height: auto !important;
        padding-top: 105px !important;
    }

    .contact-hero h1,
    .kontakt-hero h1 {
        font-size: 46px !important;
    }

    .contact-form,
    .kontakt-form,
    .contact-card,
    .kontakt-card,
    form.card {
        padding: 22px !important;
    }

    .contact-form::before,
    .kontakt-form::before,
    .contact-card::before,
    .kontakt-card::before,
    form.card::before {
        font-size: 82px;
    }
}

/* =========================================================
   KONTAKT ULTRA CINEMATIC FINAL
========================================================= */

.contact-hero,
.kontakt-hero {
    position: relative;
    overflow: hidden;
    min-height: 700px !important;
    padding: 145px 0 95px !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(57,255,20,.20);
    background:
        linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.82) 100%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.92)),
        radial-gradient(circle at 52% 35%, rgba(255,122,24,.30), transparent 28%),
        radial-gradient(circle at 72% 42%, rgba(57,255,20,.20), transparent 30%),
        url('/assets/img/westsidev-cinematic-bg.jpg') center center/cover no-repeat !important;
}

.contact-hero::before,
.kontakt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.045) 1px, transparent 1px);
    background-size: 82px 82px;
    opacity: .34;
    mask-image: linear-gradient(180deg, black, transparent 88%);
    pointer-events: none;
}

.contact-hero::after,
.kontakt-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 5px
        );
    opacity: .18;
    pointer-events: none;
    animation: westScan 7s linear infinite;
}

.contact-hero .container,
.kontakt-hero .container {
    position: relative;
    z-index: 2;
}

.contact-hero h1,
.kontakt-hero h1,
.contact-page h1,
.kontakt-page h1 {
    position: relative;
    font-family: Anton, Inter, sans-serif !important;
    text-transform: uppercase;
    font-size: clamp(54px, 6.3vw, 94px) !important;
    line-height: 1.02 !important;
    letter-spacing: .5px;
    max-width: 980px;
    margin: 18px 0 24px;
    color: #fff !important;
    text-shadow:
        0 4px 0 #000,
        0 0 22px rgba(57,255,20,.45),
        0 0 55px rgba(57,255,20,.18) !important;
}

.contact-hero h1::after,
.kontakt-hero h1::after {
    content: "WESTSIDEV SUPPORT CHANNEL";
    display: block;
    width: fit-content;
    margin-top: 18px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(57,255,20,.13);
    border: 1px solid rgba(57,255,20,.36);
    color: var(--green);
    font-family: Inter, sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(57,255,20,.45);
    box-shadow: 0 0 35px rgba(57,255,20,.12);
}

.contact-hero p,
.kontakt-hero p {
    max-width: 760px;
    color: #e4f3df !important;
    font-size: 18px;
    line-height: 1.75;
    text-shadow: 0 2px 8px #000;
}

/* Kontakt-Bereich */
.contact-section,
.kontakt-section,
.section:has(.contact-form),
.section:has(.kontakt-form) {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 0%, rgba(57,255,20,.08), transparent 34%),
        radial-gradient(circle at 90% 30%, rgba(255,122,24,.055), transparent 28%),
        #000 !important;
}

.contact-section::before,
.kontakt-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.035) 1px, transparent 1px);
    background-size: 74px 74px;
    opacity: .28;
    pointer-events: none;
}

/* Kontaktformular */
.contact-form,
.kontakt-form,
.contact-card,
.kontakt-card,
form.card {
    position: relative;
    isolation: isolate;
    border-radius: 22px !important;
    padding: 34px !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(57,255,20,.16), transparent 30%),
        radial-gradient(circle at 100% 10%, rgba(255,122,24,.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014)),
        rgba(4, 8, 5, .96) !important;
    border: 1px solid rgba(57,255,20,.34) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.035),
        0 0 80px rgba(57,255,20,.10),
        0 35px 120px rgba(0,0,0,.55) !important;
}

.contact-form::before,
.kontakt-form::before,
.contact-card::before,
.kontakt-card::before,
form.card::before {
    content: "SUPPORT";
    position: absolute;
    right: -12px;
    top: -20px;
    font-family: Anton, Inter, sans-serif;
    font-size: 150px;
    letter-spacing: 4px;
    color: rgba(57,255,20,.045);
    z-index: -1;
    pointer-events: none;
}

.contact-form::after,
.kontakt-form::after,
.contact-card::after,
.kontakt-card::after,
form.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(135deg, rgba(57,255,20,.75), transparent 30%, rgba(255,122,24,.42), transparent 70%, rgba(57,255,20,.48));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .65;
}

.contact-form > *:first-child::before,
.kontakt-form > *:first-child::before,
.contact-card > *:first-child::before,
.kontakt-card > *:first-child::before,
form.card > *:first-child::before {
    content: "● SUPPORT SYSTEM ONLINE";
    display: block;
    width: fit-content;
    margin-bottom: 16px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #39ff14;
    background: rgba(57,255,20,.10);
    border: 1px solid rgba(57,255,20,.28);
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1.3px;
    box-shadow: 0 0 26px rgba(57,255,20,.14);
}

/* Kontaktformular Felder */
.contact-form label,
.kontakt-form label,
.contact-card label,
.kontakt-card label,
form.card label {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 8px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(57,255,20,.08);
    border: 1px solid rgba(57,255,20,.18);
    color: #eaffea !important;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: .7px;
    font-size: 13px;
}

.contact-form input,
.contact-form textarea,
.contact-form select,
.kontakt-form input,
.kontakt-form textarea,
.kontakt-form select,
.contact-card input,
.contact-card textarea,
.contact-card select,
.kontakt-card input,
.kontakt-card textarea,
.kontakt-card select,
form.card input,
form.card textarea,
form.card select {
    min-height: 52px;
    background:
        linear-gradient(180deg, rgba(57,255,20,.075), rgba(0,0,0,.34)) !important;
    border: 1px solid rgba(57,255,20,.28) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px 15px !important;
    font-size: 15px !important;
    outline: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 12px 35px rgba(0,0,0,.18);
}

.contact-form textarea,
.kontakt-form textarea,
.contact-card textarea,
.kontakt-card textarea,
form.card textarea {
    min-height: 170px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus,
.kontakt-form input:focus,
.kontakt-form textarea:focus,
.kontakt-form select:focus,
.contact-card input:focus,
.contact-card textarea:focus,
.contact-card select:focus,
.kontakt-card input:focus,
.kontakt-card textarea:focus,
.kontakt-card select:focus,
form.card input:focus,
form.card textarea:focus,
form.card select:focus {
    border-color: rgba(57,255,20,.75) !important;
    box-shadow:
        0 0 0 3px rgba(57,255,20,.10),
        0 0 34px rgba(57,255,20,.13) !important;
}

/* Submit Button */
.contact-form button[type="submit"],
.kontakt-form button[type="submit"],
.contact-card button[type="submit"],
.kontakt-card button[type="submit"],
form.card button[type="submit"] {
    position: relative;
    overflow: hidden;
    min-height: 56px;
    border-radius: 14px !important;
    font-size: 15px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.16) inset,
        0 0 40px rgba(57,255,20,.38),
        0 18px 50px rgba(57,255,20,.18) !important;
}

.contact-form button[type="submit"]::before,
.kontakt-form button[type="submit"]::before,
.contact-card button[type="submit"]::before,
.kontakt-card button[type="submit"]::before,
form.card button[type="submit"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-22deg);
    animation: westButtonShine 3.2s infinite;
}

/* Kontakt Info Boxen */
.contact-info,
.kontakt-info,
.support-info,
.contact-side,
.kontakt-side {
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(57,255,20,.16), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(5,9,6,.92) !important;
    border: 1px solid rgba(57,255,20,.24) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.40);
}

/* Mobile */
@media(max-width:700px) {
    .contact-hero,
    .kontakt-hero {
        min-height: auto !important;
        padding-top: 105px !important;
    }

    .contact-hero h1,
    .kontakt-hero h1 {
        font-size: 46px !important;
    }

    .contact-form,
    .kontakt-form,
    .contact-card,
    .kontakt-card,
    form.card {
        padding: 22px !important;
    }

    .contact-form::before,
    .kontakt-form::before,
    .contact-card::before,
    .kontakt-card::before,
    form.card::before {
        font-size: 82px;
    }
}

/* =========================================================
   NAVBAR + FOOTER FINAL WESTSIDEV CINEMATIC
========================================================= */

/* Navbar final polish */
.nav {
    position: sticky;
    top: 0;
    z-index: 999;
    height: 92px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.76)) !important;
    border-bottom: 1px solid rgba(57,255,20,.22) !important;
    box-shadow:
        0 8px 40px rgba(0,0,0,.45),
        0 0 35px rgba(57,255,20,.055);
    backdrop-filter: blur(16px);
    transition: .22s ease;
}

.nav.nav-scrolled {
    height: 78px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.88)) !important;
    box-shadow:
        0 12px 45px rgba(0,0,0,.65),
        0 0 45px rgba(57,255,20,.09);
}

.brand {
    position: relative;
}

.brand span:first-child,
.brand img,
.logo-mark {
    box-shadow:
        0 0 28px rgba(57,255,20,.55),
        0 0 70px rgba(57,255,20,.18) !important;
}

.nav a,
.nav-links a {
    position: relative;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: .8px;
    transition: .18s ease;
}

.nav a:not(.btn)::after,
.nav-links a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 0;
    height: 3px;
    border-radius: 99px;
    background: var(--green);
    box-shadow: 0 0 20px rgba(57,255,20,.85);
    transform: translateX(-50%);
    transition: .18s ease;
}

.nav a:not(.btn):hover,
.nav-links a:not(.btn):hover,
.nav a.nav-active,
.nav-links a.nav-active {
    color: var(--green) !important;
    text-shadow: 0 0 18px rgba(57,255,20,.55);
}

.nav a:not(.btn):hover::after,
.nav-links a:not(.btn):hover::after,
.nav a.nav-active::after,
.nav-links a.nav-active::after {
    width: 80%;
}

/* Whitelist Button in Navbar */
.nav .btn,
.nav-links .btn {
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.16) inset,
        0 0 34px rgba(57,255,20,.38),
        0 16px 42px rgba(57,255,20,.16) !important;
}

.nav .btn::before,
.nav-links .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.50), transparent);
    transform: skewX(-22deg);
    animation: westButtonShine 3.2s infinite;
}

/* Footer */
.west-footer {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin-top: 0;
    background:
        radial-gradient(circle at 15% 0%, rgba(57,255,20,.13), transparent 32%),
        radial-gradient(circle at 90% 20%, rgba(255,122,24,.10), transparent 30%),
        linear-gradient(180deg, #050805, #000) !important;
    border-top: 1px solid rgba(57,255,20,.24);
}

.west-footer::before {
    display: none !important;
}

.west-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(57,255,20,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.035) 1px, transparent 1px);
    background-size: 76px 76px;
    opacity: .22;
    pointer-events: none;
}

.west-footer-strip {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 34px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 18px 20px;
    background:
        linear-gradient(90deg, rgba(57,255,20,.05), rgba(255,122,24,.04), rgba(57,255,20,.05));
    border-bottom: 1px solid rgba(57,255,20,.20);
    color: var(--green);
    font-family: Anton, Inter, sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(57,255,20,.55);
}

.west-footer-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr .75fr .75fr 1fr;
    gap: 34px;
    padding: 56px 0 36px;
}

.footer-logo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.footer-logo-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-block;
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.45), transparent 22%),
        linear-gradient(135deg, #39ff14, #138f08);
    box-shadow:
        0 0 32px rgba(57,255,20,.55),
        0 0 75px rgba(57,255,20,.18);
}

.footer-logo-row strong {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    font-size: 36px;
    letter-spacing: 1px;
    color: #fff;
    text-shadow:
        0 4px 0 #000,
        0 0 26px rgba(57,255,20,.32);
}

.west-footer-brand p,
.west-footer-col p {
    color: var(--muted);
    line-height: 1.75;
    max-width: 520px;
}

.footer-mini-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.footer-mini-stats span {
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(57,255,20,.09);
    border: 1px solid rgba(57,255,20,.20);
    color: var(--green);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.west-footer-col h3 {
    font-family: Anton, Inter, sans-serif;
    text-transform: uppercase;
    color: #fff;
    font-size: 26px;
    margin: 0 0 18px;
    text-shadow:
        0 3px 0 #000,
        0 0 22px rgba(57,255,20,.22);
}

.west-footer-col a {
    display: block;
    width: fit-content;
    color: var(--muted);
    margin: 0 0 12px;
    font-weight: 850;
    text-decoration: none;
    transition: .16s ease;
}

.west-footer-col a:hover {
    color: var(--green);
    transform: translateX(5px);
    text-shadow: 0 0 18px rgba(57,255,20,.48);
}

.footer-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.footer-actions a {
    display: inline-flex !important;
    margin: 0 !important;
}

.west-footer-bottom {
    position: relative;
    z-index: 2;
    padding: 20px 0 28px;
    border-top: 1px solid rgba(57,255,20,.14);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: rgba(220,232,217,.66);
    font-size: 14px;
}

/* Mobile Footer/Navbar */
@media(max-width:1100px) {
    .west-footer-grid {
        grid-template-columns: 1fr 1fr;
        padding-left: 18px;
        padding-right: 18px;
    }

    .west-footer-bottom {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media(max-width:760px) {
    .nav {
        height: auto;
        padding: 14px 0;
    }

    .nav .container {
        flex-wrap: wrap;
        gap: 14px;
    }

    .nav-links {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav a:not(.btn)::after,
    .nav-links a:not(.btn)::after {
        bottom: -6px;
    }

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

    .west-footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .west-footer-strip {
        gap: 16px;
        font-size: 14px;
    }

    .footer-logo-row strong {
        font-size: 32px;
    }
}

/* =========================================================
   FIVEM CONNECT BUTTON FINAL
========================================================= */

a[href^="fivem://connect"] {
    cursor: pointer;
}

.footer-connect,
.footer-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================================================
   WESTSIDEV LOGO FINAL
========================================================= */

.brand-logo-final {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.brand-logo-img-wrap {
    width: 245px !important;
    height: 76px !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,.28) !important;
    border: 1px solid rgba(57,255,20,.20) !important;
    box-shadow:
        0 0 24px rgba(57,255,20,.14),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.brand-logo-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    filter: contrast(1.08) saturate(1.08) !important;
}

.hero-logo-showcase {
    width: min(760px, 100%) !important;
    margin: 0 0 26px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    border: 1px solid rgba(57,255,20,.22) !important;
    background: rgba(0,0,0,.30) !important;
    box-shadow:
        0 28px 80px rgba(0,0,0,.60),
        0 0 44px rgba(57,255,20,.10),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.hero-logo-showcase img {
    width: 100% !important;
    display: block !important;
    aspect-ratio: 16 / 8.5 !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: contrast(1.06) saturate(1.08) !important;
}

@media(max-width: 900px) {
    .brand-logo-img-wrap {
        width: 190px !important;
        height: 60px !important;
    }

    .hero-logo-showcase {
        border-radius: 20px !important;
        margin-bottom: 20px !important;
    }
}

@media(max-width: 560px) {
    .brand-logo-img-wrap {
        width: 150px !important;
        height: 50px !important;
    }
}

/* =========================================================
   WESTSIDEV HOMEPAGE PREVIEW STYLE FINAL
========================================================= */

body {
    background: #020402 !important;
}

.wsv-header-logo {
    width: 260px !important;
    height: 86px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    text-decoration: none !important;
}

.wsv-header-logo img {
    width: 260px !important;
    height: 86px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
    filter: drop-shadow(0 0 22px rgba(57,255,20,.32)) contrast(1.1) saturate(1.1) !important;
}

.wsv-preview-hero {
    position: relative !important;
    min-height: 860px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(57,255,20,.25) !important;
    background: #000 !important;
}

.wsv-preview-bg {
    position: absolute !important;
    inset: 0 !important;
    background: url('/assets/img/westsidev-cinematic-bg.jpg') center / cover no-repeat !important;
    opacity: .95 !important;
    transform: scale(1.03) !important;
}

.wsv-preview-overlay {
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 50% 35%, rgba(57,255,20,.10), transparent 34%),
        linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.62) 45%, rgba(0,0,0,.96) 100%) !important;
}

.wsv-preview-inner {
    position: relative !important;
    z-index: 2 !important;
    width: min(1320px, calc(100% - 44px)) !important;
    margin: 0 auto !important;
    padding-top: 70px !important;
    text-align: center !important;
}

.wsv-big-logo {
    width: min(980px, 92vw) !important;
    margin: 0 auto 18px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    border: 1px solid rgba(57,255,20,.16) !important;
    box-shadow:
        0 36px 90px rgba(0,0,0,.72),
        0 0 70px rgba(57,255,20,.10) !important;
}

.wsv-big-logo img {
    width: 100% !important;
    display: block !important;
    aspect-ratio: 16 / 7.6 !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: contrast(1.08) saturate(1.08) !important;
}

.wsv-hero-kicker {
    color: #39ff14 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: 9px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 22px rgba(57,255,20,.35) !important;
    margin-bottom: 16px !important;
}

.wsv-preview-inner h1 {
    max-width: 1180px !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: clamp(42px, 5.2vw, 86px) !important;
    line-height: 1.02 !important;
    font-weight: 950 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    text-shadow:
        0 4px 0 #000,
        0 0 28px rgba(57,255,20,.18) !important;
}

.wsv-preview-inner h1 span {
    color: #39ff14 !important;
    text-shadow:
        0 4px 0 #000,
        0 0 32px rgba(57,255,20,.40) !important;
}

.wsv-preview-inner p {
    max-width: 820px !important;
    margin: 24px auto 0 !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

.wsv-hero-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-top: 34px !important;
}

.wsv-hero-actions .btn {
    min-width: 220px !important;
    height: 58px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
    letter-spacing: .8px !important;
}

.wsv-stats-bar {
    width: min(1120px, 100%) !important;
    margin: 46px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(5,12,6,.82), rgba(0,0,0,.76)) !important;
    border: 1px solid rgba(57,255,20,.18) !important;
    box-shadow:
        0 28px 80px rgba(0,0,0,.60),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: blur(8px) !important;
}

.wsv-stat {
    min-height: 126px !important;
    display: grid !important;
    place-content: center !important;
    gap: 7px !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
}

.wsv-stat:last-child {
    border-right: 0 !important;
}

.wsv-stat strong {
    color: #fff !important;
    font-size: 38px !important;
    font-weight: 950 !important;
    text-shadow: 0 0 22px rgba(57,255,20,.22) !important;
}

.wsv-stat span {
    color: rgba(255,255,255,.62) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    letter-spacing: 1.2px !important;
}

.wsv-home-content {
    width: min(1320px, calc(100% - 44px)) !important;
    margin: 34px auto 80px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.wsv-home-card {
    padding: 34px !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(7,14,8,.92), rgba(1,4,2,.98)) !important;
    border: 1px solid rgba(57,255,20,.18) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.48) !important;
}

.wsv-home-card span {
    color: #39ff14 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

.wsv-home-card h2 {
    margin: 12px 0 12px !important;
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.wsv-home-card p {
    color: rgba(255,255,255,.68) !important;
    line-height: 1.7 !important;
    margin-bottom: 22px !important;
}

@media(max-width: 1000px) {
    .wsv-preview-hero {
        min-height: 780px !important;
    }

    .wsv-stats-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .wsv-home-content {
        grid-template-columns: 1fr !important;
    }
}

@media(max-width: 620px) {
    .wsv-header-logo,
    .wsv-header-logo img {
        width: 180px !important;
        height: 60px !important;
    }

    .wsv-preview-inner {
        padding-top: 34px !important;
    }

    .wsv-preview-inner h1 {
        font-size: 38px !important;
        letter-spacing: 1px !important;
    }

    .wsv-hero-kicker {
        letter-spacing: 4px !important;
    }

    .wsv-stats-bar {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   WESTSIDEV HOMEPAGE FINAL POLISH
========================================================= */

/* Altes Text-Logo/Quadrat überschreiben */
.wsv-header-logo {
    width: 250px !important;
    height: 82px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.wsv-header-logo::before,
.wsv-header-logo::after,
.brand.wsv-header-logo::before,
.brand.wsv-header-logo::after {
    display: none !important;
    content: none !important;
}

.wsv-header-logo img {
    width: 250px !important;
    height: 82px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 10px !important;
    display: block !important;
    filter:
        drop-shadow(0 0 22px rgba(57,255,20,.36))
        contrast(1.1)
        saturate(1.12) !important;
}

/* Hero kompakter und sauberer sichtbar */
.wsv-preview-hero {
    min-height: 820px !important;
    padding-top: 0 !important;
    align-items: flex-start !important;
}

.wsv-preview-inner {
    padding-top: 66px !important;
}

.wsv-big-logo {
    width: min(900px, 86vw) !important;
    margin-bottom: 14px !important;
    border-radius: 24px !important;
}

.wsv-big-logo img {
    aspect-ratio: 16 / 7.1 !important;
    object-fit: cover !important;
    object-position: center 48% !important;
}

.wsv-hero-kicker {
    margin-top: 4px !important;
    margin-bottom: 14px !important;
}

.wsv-preview-inner h1 {
    font-size: clamp(42px, 4.7vw, 76px) !important;
    line-height: 1.04 !important;
    max-width: 1120px !important;
}

.wsv-preview-inner p {
    margin-top: 18px !important;
    font-size: 17px !important;
}

.wsv-hero-actions {
    margin-top: 28px !important;
}

.wsv-stats-bar {
    margin-top: 36px !important;
}

/* Header insgesamt etwas hochwertiger */
.site-header,
.header,
.navbar {
    min-height: 104px !important;
}

/* Mobile sauber */
@media(max-width: 900px) {
    .wsv-header-logo,
    .wsv-header-logo img {
        width: 190px !important;
        height: 64px !important;
    }

    .wsv-preview-hero {
        min-height: 760px !important;
    }

    .wsv-big-logo {
        width: min(720px, 92vw) !important;
    }
}

@media(max-width: 560px) {
    .wsv-header-logo,
    .wsv-header-logo img {
        width: 155px !important;
        height: 52px !important;
    }

    .wsv-preview-inner h1 {
        font-size: 36px !important;
    }
}

/* =========================================================
   WESTSIDEV CLEAN HEADER FINAL FIX
========================================================= */

.wsv-clean-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    min-height: 106px !important;
    background:
        linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.88)) !important;
    border-bottom: 1px solid rgba(57,255,20,.22) !important;
    box-shadow:
        0 18px 50px rgba(0,0,0,.55),
        0 0 28px rgba(57,255,20,.08) !important;
    backdrop-filter: blur(10px) !important;
}

.wsv-clean-header-inner {
    width: min(1320px, calc(100% - 44px)) !important;
    min-height: 106px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 260px 1fr 150px !important;
    align-items: center !important;
    gap: 28px !important;
}

.wsv-clean-logo {
    width: 250px !important;
    height: 76px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: transparent !important;
    text-decoration: none !important;
    box-shadow:
        0 0 28px rgba(57,255,20,.22),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.wsv-clean-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    filter: contrast(1.12) saturate(1.12) !important;
}

.wsv-clean-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    flex-wrap: wrap !important;
}

.wsv-clean-nav a {
    position: relative !important;
    color: rgba(255,255,255,.82) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: .2s ease !important;
}

.wsv-clean-nav a:hover,
.wsv-clean-nav a.active {
    color: #39ff14 !important;
    text-shadow: 0 0 16px rgba(57,255,20,.45) !important;
}

.wsv-clean-nav a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -12px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #39ff14 !important;
    box-shadow: 0 0 14px rgba(57,255,20,.55) !important;
}

.wsv-clean-whitelist {
    height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #39ff14, #18c900) !important;
    color: #021002 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    box-shadow:
        0 0 30px rgba(57,255,20,.42),
        inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.wsv-clean-whitelist:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.08) !important;
}

/* alte Header/Brand-Reste sicher verstecken */
.site-header:not(.wsv-clean-header),
.header:not(.wsv-clean-header),
.navbar:not(.wsv-clean-header),
.brand:not(.wsv-clean-logo):not(.wsv-header-logo) {
    box-shadow: none;
}

/* Hero nach sauberem Header */
.wsv-preview-hero {
    margin-top: 0 !important;
    min-height: calc(100vh - 106px) !important;
}

.wsv-preview-inner {
    padding-top: 54px !important;
}

.wsv-big-logo {
    width: min(860px, 82vw) !important;
}

.wsv-preview-inner h1 {
    font-size: clamp(40px, 4.3vw, 70px) !important;
}

@media(max-width: 1100px) {
    .wsv-clean-header-inner {
        grid-template-columns: 220px 1fr !important;
    }

    .wsv-clean-whitelist {
        display: none !important;
    }

    .wsv-clean-logo {
        width: 220px !important;
        height: 68px !important;
    }

    .wsv-clean-nav {
        justify-content: flex-end !important;
        gap: 14px !important;
    }
}

@media(max-width: 760px) {
    .wsv-clean-header {
        position: relative !important;
    }

    .wsv-clean-header-inner {
        grid-template-columns: 1fr !important;
        padding: 14px 0 !important;
    }

    .wsv-clean-logo {
        margin: 0 auto !important;
    }

    .wsv-clean-nav {
        justify-content: center !important;
    }
}

/* =========================================================
   WESTSIDEV TEXT LOGO ONLY
========================================================= */

.wsv-clean-header-inner {
    grid-template-columns: 340px 1fr 150px !important;
}

.wsv-clean-logo {
    width: auto !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-decoration: none !important;
}

.wsv-clean-logo img {
    display: none !important;
}

.wsv-wordmark {
    display: inline-block !important;
    font-size: 58px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #f5fff5 !important;
    text-shadow:
        0 2px 0 rgba(0,0,0,.75),
        0 0 10px rgba(57,255,20,.12),
        0 0 20px rgba(57,255,20,.08) !important;
}

.wsv-wordmark span {
    color: #39ff14 !important;
    text-shadow:
        0 0 10px rgba(57,255,20,.75),
        0 0 20px rgba(57,255,20,.45),
        0 0 35px rgba(57,255,20,.22) !important;
}

@media (max-width: 1100px) {
    .wsv-clean-header-inner {
        grid-template-columns: 280px 1fr 140px !important;
    }

    .wsv-wordmark {
        font-size: 46px !important;
    }
}

@media (max-width: 760px) {
    .wsv-clean-header-inner {
        grid-template-columns: 1fr !important;
    }

    .wsv-clean-logo {
        justify-content: center !important;
    }

    .wsv-wordmark {
        font-size: 34px !important;
        text-align: center !important;
    }
}

/* =========================================================
   WESTSIDEV HEADER LOGO VERSION 2
   kleines Bildlogo wie Referenz
========================================================= */

.wsv-clean-header {
    min-height: 96px !important;
}

.wsv-clean-header-inner {
    min-height: 96px !important;
    grid-template-columns: 210px 1fr 150px !important;
    gap: 28px !important;
}

/* altes Textlogo komplett aus */
.wsv-wordmark,
.wsv-clean-logo-text,
.wsv-clean-logo-text span {
    display: none !important;
}

/* neues kleines Bildlogo */
.wsv-clean-logo-v2 {
    width: 185px !important;
    height: 64px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    box-shadow:
        0 0 20px rgba(57,255,20,.18) !important;
    text-decoration: none !important;
}

.wsv-clean-logo-v2::before,
.wsv-clean-logo-v2::after {
    display: none !important;
    content: none !important;
}

.wsv-clean-logo-v2 img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 48% !important;
    border-radius: 7px !important;
    filter:
        contrast(1.12)
        saturate(1.15)
        drop-shadow(0 0 8px rgba(57,255,20,.30)) !important;
}

/* Navigation passend zur kleineren Logo-Version */
.wsv-clean-nav {
    justify-content: center !important;
    gap: 22px !important;
}

.wsv-clean-nav a {
    font-size: 13px !important;
}

.wsv-clean-whitelist {
    height: 54px !important;
}

/* Hero etwas nach oben ziehen, weil Header kleiner ist */
.wsv-preview-hero {
    min-height: calc(100vh - 96px) !important;
}

.wsv-preview-inner {
    padding-top: 48px !important;
}

@media(max-width: 1100px) {
    .wsv-clean-header-inner {
        grid-template-columns: 180px 1fr !important;
    }

    .wsv-clean-logo-v2 {
        width: 165px !important;
        height: 58px !important;
    }
}

@media(max-width: 760px) {
    .wsv-clean-header-inner {
        grid-template-columns: 1fr !important;
    }

    .wsv-clean-logo-v2 {
        width: 170px !important;
        height: 58px !important;
        margin: 0 auto !important;
    }
}

/* =========================================================
   HEADER LOGO V2 SMALL IMAGE
========================================================= */

.wsv-clean-header {
    min-height: 92px !important;
}

.wsv-clean-header-inner {
    min-height: 92px !important;
    grid-template-columns: 190px 1fr 150px !important;
    gap: 30px !important;
}

.wsv-logo-small-v2 {
    width: 170px !important;
    height: 58px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow:
        0 0 18px rgba(57,255,20,.18) !important;
    text-decoration: none !important;
}

.wsv-logo-small-v2::before,
.wsv-logo-small-v2::after {
    display: none !important;
    content: none !important;
}

.wsv-logo-small-v2 img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center 45% !important;
    border-radius: 4px !important;
    filter:
        contrast(1.16)
        saturate(1.18)
        drop-shadow(0 0 8px rgba(57,255,20,.35)) !important;
}

/* alte Textlogo-Reste deaktivieren */
.wsv-wordmark,
.wsv-clean-logo-text,
.wsv-clean-logo-text span {
    display: none !important;
}

/* Header etwas kompakter wie Beispiel */
.wsv-clean-nav {
    gap: 22px !important;
}

.wsv-clean-nav a {
    font-size: 13px !important;
}

.wsv-clean-whitelist {
    height: 54px !important;
}

/* Hero passend nach oben */
.wsv-preview-hero {
    min-height: calc(100vh - 92px) !important;
}

.wsv-preview-inner {
    padding-top: 44px !important;
}

@media(max-width: 1100px) {
    .wsv-clean-header-inner {
        grid-template-columns: 170px 1fr !important;
    }

    .wsv-logo-small-v2 {
        width: 155px !important;
        height: 52px !important;
    }
}

@media(max-width: 760px) {
    .wsv-clean-header-inner {
        grid-template-columns: 1fr !important;
    }

    .wsv-logo-small-v2 {
        width: 160px !important;
        height: 54px !important;
        margin: 0 auto !important;
    }
}