/* ==========================================================
   VEREINSSPORT UI KIT 2.0
   Foundation
   Version 2.0
========================================================== */


/* ==========================================================
   01 RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    font-size:18px;
}

html,
body{
    overflow-x:hidden;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f6f7f9;
    color:#2b2b2b;
    line-height:1.6;
}

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

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

button,
input,
select,
textarea{
    font:inherit;
}


/* ==========================================================
   02 CSS VARIABLES
========================================================== */

:root{

    /* Farben */

    --vs-primary:#083b7f;
    --vs-primary-hover:#062f66;

    --vs-white:#ffffff;
    --vs-bg:#f6f7f9;

    --vs-text:#2b2b2b;
    --vs-text-light:#666666;

    --vs-border:#e6e8eb;

    --vs-success:#2e7d32;
    --vs-warning:#ef6c00;
    --vs-danger:#c62828;

    /* Radius */

    --vs-radius-xs:6px;
    --vs-radius-s:12px;
    --vs-radius:18px;
    --vs-radius-l:22px;
    --vs-radius-round:999px;

    /* Schatten */

    --vs-shadow:
        0 8px 24px rgba(0,0,0,.08);

    --vs-shadow-hover:
        0 18px 40px rgba(0,0,0,.12);

    /* Animation */

    --vs-transition:.25s ease;

    /* Abstände */

    --vs-space-xs:10px;
    --vs-space-s:20px;
    --vs-space-m:30px;
    --vs-space-l:50px;
    --vs-space-xl:70px;

}


/* ==========================================================
   03 CONTAINER
========================================================== */

.vs-container{

    width:100%;
    max-width:1200px;

    margin:0 auto;

    padding:0 20px;

}

.vs-container-small{

    width:100%;
    max-width:900px;

    margin:0 auto;

    padding:0 20px;

}

.vs-container-wide{

    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding:0 20px;

}


/* ==========================================================
   04 SECTION
========================================================== */

.vs-section{

    margin:70px 0;

}

.vs-section-small{

    margin:40px 0;

}

.vs-section-large{

    margin:100px 0;

}


/* ==========================================================
   05 GRID
========================================================== */

.vs-grid{

    display:grid;
    gap:30px;

}

.vs-grid-2{

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

}

.vs-grid-3{

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

}

.vs-grid-4{

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

}


/* ==========================================================
   06 FLEX
========================================================== */

.vs-flex{

    display:flex;

}

.vs-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.vs-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.vs-flex-column{

    display:flex;

    flex-direction:column;

}


/* ==========================================================
   07 UTILITIES
========================================================== */

.vs-center{

    text-align:center;

}

.vs-left{

    text-align:left;

}

.vs-right{

    text-align:right;

}

.vs-hidden{

    display:none !important;

}

.vs-shadow{

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

}

.vs-radius{

    border-radius:var(--vs-radius);

}

.vs-bg-white{

    background:#fff;

}

.vs-bg{

    background:var(--vs-bg);

}


/* ==========================================================
   08 TYPOGRAFIE
========================================================== */

.vs-title{

    font-size:2.6rem;
    font-weight:700;
    line-height:1.2;
    color:var(--vs-text);

    margin-bottom:20px;

}

.vs-subtitle{

    font-size:2rem;
    font-weight:700;
    line-height:1.3;

    color:var(--vs-text);

    margin-bottom:20px;

}

.vs-heading{

    font-size:1.5rem;
    font-weight:700;

    color:var(--vs-text);

    margin-bottom:15px;

}

.vs-text{

    font-size:1rem;

    line-height:1.8;

    color:var(--vs-text-light);

}

.vs-text-small{

    font-size:.9rem;

    color:var(--vs-text-light);

}


/* ==========================================================
   09 LINKS
========================================================== */

.vs-link{

    color:var(--vs-primary);

    font-weight:600;

    text-decoration:underline;
    text-decoration-thickness:2px;
    text-underline-offset:3px;

    transition:var(--vs-transition);

}

.vs-link:hover{

    color:var(--vs-primary-hover);

}



/* ==========================================================
   10 BUTTONS
========================================================== */

.vs-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    min-height:35px;

    padding:0 24px;

    font-size:.7rem;

    border:none;

    border-radius:999px;

    background:var(--vs-primary);

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:var(--vs-transition);

}

.vs-btn:hover{

    background:var(--vs-primary-hover);

    transform:translateY(-2px);

}

.vs-btn-secondary{

    background:#fff;

    color:var(--vs-primary);

    border:2px solid var(--vs-primary);

}

.vs-btn-secondary:hover{

    background:var(--vs-primary);

    color:#fff;

}

.vs-btn-small{

    min-height:38px;

    padding:0 18px;

}

.vs-btn-large{

    min-height:56px;

    padding:0 34px;

    font-size:.7rem;

}



/* ==========================================================
   11 BUTTON GROUP
========================================================== */

.vs-button-group{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.vs-button-group-center{

    justify-content:center;

}

/* ==========================================================
   VEREINSLOGO - SPORTARTEN AUSWAHL
========================================================== */

.vereinslogo-sportarten-buttons {
    gap: 25px;
}



/* ==========================================================
   12 BADGES
========================================================== */

.vs-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:6px 14px;

    border-radius:999px;

    background:#eef5ff;

    color:var(--vs-primary);

    border:1px solid #d2e3fb;

    font-size:.7rem;

    font-weight:600;

}

.vs-badge-dark{

    background:var(--vs-primary);

    color:#fff;

    border:none;

}

.vs-badge-gray{

    background:#f5f5f5;

    color:#555;

    font-size:0.7rem;

    border:1px solid #e5e5e5;

}


/* ==========================================================
   FILTER CHIPS
========================================================== */

.vs-chip-group{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:0 auto 40px;
}

.vs-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 16px;
    border-radius:999px;
    background:#e8f4ec;
    border:1px solid #cfe8d6;
    color:#215d32;
    font-size:.95rem;
    font-weight:600;
    text-decoration:none;
    transition:var(--vs-transition);
}

.vs-chip:hover{
    background:#dff0e4;
    border-color:#8fc49d;
}

.vs-chip-active,
.vs-chip.active{
    background:var(--vs-success);
    border-color:var(--vs-success);
    color:#fff;
}

.vs-chip-active:hover,
.vs-chip.active:hover{
    background:#246628;
    border-color:#246628;
    color:#fff;
}


/* ==========================================================
   PLZ FILTER CHIPS
========================================================== */

.vs-chip-group-plz{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:15px auto 40px;
}

.vs-chip-plz{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;
    padding:8px 18px;

    border-radius:999px;

    background:#e8f4ec;
    border:1px solid #cfe8d6;

    color:#215d32;
    font-size:.95rem;
    font-weight:600;

    text-decoration:none;
    white-space:nowrap;

    transition:var(--vs-transition);
}

.vs-chip-plz:hover{
    background:#dff0e4;
    border-color:#8fc49d;
    transform:translateY(-2px);
}

.vs-chip-plz-active{
    background:var(--vs-success);
    border-color:var(--vs-success);
    color:#fff;
}

.vs-chip-plz-active:hover{
    background:var(--vs-success);
    border-color:var(--vs-success);
    color:#fff;
}

.vs-chip-close {
    color: #78aada;
    font-weight: 700;
    margin-left: 6px;
}

.vs-chip:hover .vs-chip-close {
    color: #000;
}

/* ==========================================================
   FILTER INFO SPORTVEREIN DEUTSCHLAND SUCHEN
========================================================== */

.vs-filter-badge-select{
    width:min(calc(100% - 32px),760px);
    border-radius:18px;
    box-sizing:border-box;

    gap:4px;
}

.vs-filter-badge-select .vs-filter-title{
    line-height:1.3;
    margin:0;
}

.vs-filter-badge-select .vs-filter-subtitle{
    margin:0;
    line-height:1.2;
    font-weight:700;
}


/* ==========================================================
   13 DIVIDER
========================================================== */

.vs-divider{

    width:100%;

    height:1px;

    background:var(--vs-border);

    margin:30px 0;

}


/* ==========================================================
   14 VS HERO KOMPONENTE
========================================================== */

.vs-hero{

    text-align:center;

    max-width:900px;

    margin:0 auto 60px;

}

.vs-hero h1{

    font-size:2.8rem;

    line-height:1.2;

    color:var(--vs-text);

    margin-bottom:20px;

}

.vs-hero p{

    font-size:1.1rem;

    line-height:1.8;

    color:var(--vs-text-light);

}



/* ==========================================================
   15 INTRO
========================================================== */

.vs-intro{

    max-width:900px;

    margin:0 auto 50px;

    text-align:center;

}

.vs-intro p{

    line-height:1.8;

    color:var(--vs-text-light);

}



/* ==========================================================
   16 STATISTIK
========================================================== */

.vs-stats{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin:50px 0;

}

.vs-stat{

    background:#fff;

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

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

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

    transition:var(--vs-transition);

}

.vs-stat:hover{

    transform:translateY(-5px);

    box-shadow:var(--vs-shadow-hover);

}

.vs-stat-number{

    font-size:2.5rem;

    font-weight:700;

    color:var(--vs-primary);

    margin-bottom:10px;

}

.vs-stat-label{

    color:var(--vs-text-light);

    font-size:1rem;

}



/* ==========================================================
   17 CONTENT BOX
========================================================== */

.vs-box{

    background:#fff;

    border-radius:22px;

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

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

    padding:40px;

    margin:40px 0;

}

.vs-box h2{

    margin-bottom:20px;

    color:var(--vs-text);

}

.vs-box p{

    line-height:1.8;

    color:var(--vs-text-light);

}



/* ==========================================================
   18 ALERTS
========================================================== */

.vs-alert{

    padding:20px;

    border-radius:18px;

    margin:30px 0;

}

.vs-alert-info{

    background:#eef5ff;

    border:1px solid #cfe0fb;

    color:var(--vs-primary);

}

.vs-alert-success{

    background:#eef8ef;

    border:1px solid #cde8cf;

    color:#2e7d32;

    max-width: 700px;

    margin:30px auto

}

.vs-alert-warning{

    background:#fff7eb;

    border:1px solid #f4d6a5;

    color:#d17a00;

}

.vs-alert-danger{

    background:#fff0f0;

    border:1px solid #efc4c4;

    color:#c62828;

}

.vs-alert-center{
    text-align:center;
}

.vs-alert-inline{
    display:inline-block;
    max-width:800px;
    width:auto;
    margin:25px auto;
}

.vs-alert-inline p:last-child{
    margin-bottom:0;
}

.vs-alert a {
    color: #0056b3;
    font-weight: 600;
    text-decoration: underline;
}

.vs-alert a:hover {
    color: #003d80;
}


/* ==========================================================
   19 VS PANEL
========================================================== */

.vs-panel{

    background:#fff;

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

    border-radius:18px;

    overflow:hidden;

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

    transition:var(--vs-transition);

    margin-bottom:40px;

}

.vs-panel:hover{

    transform:translateY(-5px);

    box-shadow:var(--vs-shadow-hover);

}


/* ==========================================================
   PANEL INNER
========================================================== */

.vs-panel-inner{

    padding:32px;

}


/* ==========================================================
   PANEL HEADER
========================================================== */

.vs-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:30px;

}


/* ==========================================================
   PANEL TITLE
========================================================== */

.vs-panel-title{

    font-size:2rem;

    font-weight:700;

    line-height:1.3;

    color:var(--vs-text);

    margin-bottom:25px;

}


/* ==========================================================
   PANEL BODY
========================================================== */

.vs-panel-body{

    font-size:1rem;

    line-height:1.8;

    color:var(--vs-text-light);

    margin-bottom:35px;

}


/* ==========================================================
   PANEL META
========================================================== */

.vs-panel-meta{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    padding-top:25px;

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

}


/* ==========================================================
   META ITEM
========================================================== */

.vs-meta-item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:7px 14px;

    border-radius:999px;

    background:#f5f7fa;

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

    color:var(--vs-text);

    font-size:0.7rem;

    font-weight:600;

}

.vs-meta-item a{
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    color: inherit;
    transition: .2s;
}

.vs-meta-item a:hover{
    color: var(--vs-primary);
}


/* ==========================================================
   META BOX (mehrzeilige Informationen)
========================================================== */

.vs-meta-box{

    flex:1 1 260px;

    padding:16px 18px;

    background:#f5f7fa;

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

    border-radius:16px;

    text-align:left;

    line-height:1.5;

}

.vs-meta-box strong{

    display:block;

    margin-bottom:4px;

    color:var(--vs-primary);

    font-size:.95rem;

}



/* ==========================================================
   TEXT MUTED
========================================================== */

.vs-text-muted{

    color:#666;

    font-size:.8rem;

    line-height:1.6;

    margin-bottom:20px;

}


/* ==========================================================
   PANEL FOOTER
========================================================== */

.vs-panel-footer{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:35px;

}


/* ==========================================================
   PANEL IMAGE (optional)
========================================================== */

.vs-panel-image{

    width:100%;

    height:auto;

    display:block;

}

.vs-panel-image img{

    width:100%;

    display:block;

}


/* ==========================================================
   PANEL HORIZONTAL
========================================================== */

.vs-panel-horizontal{

    display:grid;

    grid-template-columns:320px 1fr;

}

.vs-panel-horizontal .vs-panel-image{

    height:100%;

}

.vs-panel-horizontal .vs-panel-image img{

    height:100%;

    object-fit:cover;

}


/* ==========================================================
   20 FORMULARE
========================================================== */

.vs-form{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.vs-input,
.vs-select,
.vs-textarea{

    width:100%;

    height:54px;

    padding:0 20px;

    background:#fff;

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

    border-radius:14px;

    color:var(--vs-text);

    transition:var(--vs-transition);

    font-size:16px;
}

.vs-input:focus,
.vs-select:focus,
.vs-textarea:focus{

    outline:none;

    border-color:var(--vs-primary);

    box-shadow:0 0 0 3px rgba(8,59,127,.12);

}

.vs-textarea{

    min-height:180px;

    resize:vertical;

}


/* ==========================
   SELECT FELDER
========================== */

.form-container select {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    border: 1px solid #d8dde6;
    border-radius: 12px;
    background: #fff;
    font-size: 1rem;
    font-family: inherit;
    color: #2b2b2b;
    transition: all .2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.form-container select:focus {
    outline: none;
    border-color: #2f7d32;
    box-shadow: 0 0 0 4px rgba(47,125,50,.12);
}

select.vs-select-xs{
    width:120px;
}

select.vs-select-sm{
    width:180px;
}

select.vs-select-md{
    width:260px;
}

select.vs-select-lg{
    width:400px;
}

select.vs-select-xl{
    width:600px;
}


/* ==========================================================
   21 SUCHFELDER
========================================================== */

.vs-search{

    display:flex;

    align-items:center;

    gap:18px;

    max-width:1000px;

    margin:20px auto;

}

.autocomplete-wrapper{

    flex:1 1 auto;

}

.vs-search .vs-input{

    width:100%;

    min-width:0;

}

.vs-search .vs-btn{

    flex:0 0 290px;

    white-space:nowrap;

}


.sportart-row{
    margin-bottom:24px;
}

.sportart-row label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
}

.sportart-row .vs-input{
    margin-bottom:12px;
}

.sportart-row .vs-select{
    margin-bottom:12px;
}


/* ==========================================================
   22 TABELLEN
========================================================== */

.vs-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border-radius:var(--vs-radius);

    overflow:hidden;

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

}

.vs-table th{

    background:var(--vs-primary);

    color:#fff;

    text-align:left;

    padding:16px;

}

.vs-table td{

    padding:16px;

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

}

.vs-table tr:last-child td{

    border-bottom:none;

}

.vs-table tr:hover{

    background:#f7faff;

}



/* ==========================================================
   23 PAGINATION
========================================================== */

.vs-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:50px auto;
}

.vs-pagination a,
.vs-pagination .active{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    text-decoration:none;
    box-sizing:border-box;
}

.vs-pagination a{
    background:#fff;
    border:1px solid var(--vs-border);
    color:var(--vs-text);
    transition:var(--vs-transition);
}

.vs-pagination a:hover{
    background:var(--vs-primary);
    color:#fff;
}

.vs-pagination .active{
    background:var(--vs-primary);
    color:#fff;
    font-weight:700;
    border:1px solid var(--vs-primary);
}



/* ==========================================================
   24 FOOTER CTA
========================================================== */

.vs-cta{

    background:#083b7f;

    color:#fff;

    border-radius:22px;

    padding:50px;

    text-align:center;

    margin:70px 0;

}

.vs-cta h2{

    margin-bottom:15px;

}

.vs-cta p{

    margin-bottom:30px;

}



/* ==========================================================
   25 RESPONSIVE
========================================================== */

@media (max-width:1024px){

    .vs-grid-4{

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

    }

}


@media (max-width:768px){

    html{

        font-size:16px;

    }

    .vs-container{

        padding:0 15px;

    }

    .vs-grid-2,
    .vs-grid-3,
    .vs-grid-4{

        grid-template-columns:1fr;

    }

    .vs-panel-inner{

        padding:25px;

    }

    .vs-panel-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .vs-panel-title{

        font-size:1.6rem;

    }

    .vs-panel-footer{

        flex-direction:column;

    }

    .vs-btn{

        width:100%;

    }

    .vs-search{

        flex-direction:column;

    }

    .vs-search .vs-input{

        width:100%;

    }

    .vs-table{

        display:block;

        overflow-x:auto;

    }

    .vs-hero h1{

        font-size:2rem;

    }

    .vs-stat{

        padding:25px;

    }

}


/* ==========================================================
   MAIN CONTAINER
========================================================== */

.main-container{
    width:100%;

    max-width:1200px;

    margin:40px auto;

    background:#eaedf0;

    padding:30px;

    border-radius:12px;

    box-shadow:0 6px 18px rgba(200, 230, 255, 0.18);

    text-align:center;
}


/* ==========================================================
   FILTER HINWEIS
========================================================== */

.vs-filter-info{
    display:flex;

    justify-content:center;

    margin:35px auto 40px;
}

.vs-filter-badge{
    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    background:#e8f4ec;

    border:1px solid #cfe8d6;

    border-radius:999px;


    color:#215d32;

    font-size:.95rem;

    font-weight:600;

    width:fit-content;

    max-width:100%;

    text-align:center;
}

.vs-filter-badge-plz{
    width:min(100% - 32px, 760px);
    border-radius:18px;
    box-sizing:border-box;
}

.vs-filter-title,
.vs-filter-subtitle{
    width:100%;
}

.vs-filter-subtitle{
    margin-top:2px;
}

.vs-chip-group-plz-inline{
    margin:8px auto 0;
}

.vs-filter-reset{
    color:#215d32;

    text-decoration:underline;

    text-underline-offset:3px;

    font-size:.9rem;
    
    font-weight:500;
}

.vs-filter-reset:hover{
    color:var(--vs-primary);
}

/* ==========================================================
   FORMULAR HINWEIS
========================================================== */

.form-hint{
    display:none;

    margin-top:8px;

    padding:10px 14px;

    background:#e8f4ec;

    border:1px solid #cfe8d6;

    border-radius:10px;

    color:#215d32;

    font-size:.92rem;

    font-weight:600;

    line-height:1.4;
}

.form-hint:not(:empty){
    display:block;
}

/* ==========================================================
   26 HEADER
========================================================== */

.header{

    width:100%;
    background:#fff;

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

    box-shadow:0 3px 16px rgba(0,0,0,.05);

    position:relative;
    z-index:1000;

}

.header .container{

    max-width:1200px;
    margin:0 auto;

    padding:0 20px;

}

.header-inner{

    min-height:110px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}

.logo{

    flex-shrink:0;

}

.logo img{

    height:92px;

    width:auto;

    display:block;

}


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

@media (max-width:768px){

.header-inner{

    min-height:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:12px 0;

}

.logo{

    display:flex;

    justify-content:center;

    width:100%;

}

.logo img{

    height:72px;

    margin-bottom:4px;

}

.nav{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;

    gap:0;

}

.nav > a,
.nav > .dropdown{

    margin:0;

}

.dropdown{

    width:100%;

    display:flex;

    justify-content:center;

    margin:0;

}

.dropdown-btn{

    padding:4px 0;

    margin:0;

    min-height:unset;

    line-height:1.2;

}

}


/* =================================================
    SPORTART LOGO
================================================= */

.sportart-logo {
    width: 120px;
    height: 120px;
    margin: 20px auto 12px;

    border-radius: 50%;
    overflow: hidden;

    border: 3px solid #d9dce0;
}

.sportart-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================
   SPORTART DETAIL
========================================== */

.sportart-detail{
    max-width:1200px;
    width:100%;
    margin:40px auto;
}

.sportart-header{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:18px;
    margin-bottom:35px;
}

.sportart-logo{
    width:120px;
    height:120px;
}

.sportart-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.sportart-header .vs-panel-title{
    margin:0;
}

.sportart-header .vs-panel-meta{
    justify-content:center;
    padding-top:10px;
    border-top:none;
}

@media (max-width:768px){

    .sportart-logo{
        width:90px;
        height:90px;
    }

    .sportart-header{
        gap:15px;
        margin-bottom:25px;
    }

}


/* ==========================================
   SPORTART REGELN
========================================== */

.sportart-regeln{
    margin-top:35px;
    padding:30px 35px 10px;
    border-top:1px solid var(--vs-border);

    line-height:1.8;
    color:var(--vs-text);
}

.sportart-regeln h2,
.sportart-regeln h3{
    margin:30px 0 15px;
    color:var(--vs-text);
}

.sportart-regeln p{
    margin-bottom:18px;
}

.sportart-regeln ul,
.sportart-regeln ol{
    margin:15px 0 20px 25px;
}

.sportart-regeln li{
    margin-bottom:8px;
}


/* ==========================================================
   27 NAVIGATION
========================================================== */

.nav{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:34px;

    flex:1;

}

.nav>a,
.dropdown-btn{

    position:relative;

    background:none;

    border:none;

    cursor:pointer;

    font-size:1rem;

    font-weight:600;

    color:var(--vs-text);

    padding:12px 0;

    transition:.25s;

}

.nav>a::after,
.dropdown-btn::after{

    content:"";

    position:absolute;

    left:0;
    bottom:4px;

    width:0;

    height:2px;

    background:var(--vs-primary);

    transition:.25s;

}

.nav>a:hover,
.dropdown-btn:hover{

    color:var(--vs-primary);

}

.nav>a:hover::after,
.dropdown-btn:hover::after{

    width:100%;

}


/* ==========================================================
   28 DROPDOWN
========================================================== */

.dropdown{

    position:relative;

    display:flex;
    align-items:center;

}

.dropdown-btn{

    display:flex;
    align-items:center;
    gap:6px;

}

.dropdown-content{

    position:absolute;

    top:calc(100% + 18px);
    left:50%;

    transform:translateX(-50%) translateY(10px);

    width:430px;

    background:#fff;

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

    border-radius:20px;

    box-shadow:
        0 18px 40px rgba(0,0,0,.12);

    padding:18px;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s;

    z-index:9999;

}

.dropdown:last-child .dropdown-content{

    left:auto;
    right:0;

    transform:translateY(10px);

}

.dropdown.open .dropdown-content,
.dropdown:hover .dropdown-content{

    opacity:1;

    visibility:visible;

}

.dropdown.open .dropdown-content{

    transform:translateX(-50%) translateY(0);

}

.dropdown:last-child.open .dropdown-content{

    transform:translateY(0);

}

.dropdown-inner{

    display:flex;

    flex-direction:column;

    gap:2px;

}

.dropdown-content a{

    display:flex;

    align-items:center;

    width:100%;

    padding:11px 14px;

    border-radius:12px;

    color:var(--vs-text);

    font-size:.95rem;

    line-height:1.45;

    transition:
        background .2s,
        color .2s,
        padding-left .2s;

}

.dropdown-content a:hover{

    background:#eef5ff;

    color:var(--vs-primary);

    padding-left:20px;

}

.dropdown-content br{

    display:none;

}


/* ==========================================================
   29 SEITEN HERO
========================================================== */

.hero{

    background:#f6f7f9;

    padding:25px 0 20px;

}

.hero-inner{

    position:relative;

    max-width:1400px;

    margin:0 auto;

    aspect-ratio:16/6;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

.hero-content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    width:100%;

    text-align:center;

    padding:60px;

    background:
        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.45)
        );

}

.hero-title{

    width:100%;

    max-width:900px;

    margin:0 auto 25px;

    color:#fff;

    font-size:3rem;

    font-weight:700;

    line-height:1.15;

    text-align:center;

}

.hero-subtitle{

    width:100%;

    max-width:900px;

    margin:0 auto;

    color:#fff;

    font-size:1.2rem;

    line-height:1.7;

    text-align:center;

    text-shadow:
        0 2px 10px rgba(0,0,0,.45);

}


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

@media (max-width:768px){

.hero{

    padding:10px 0;

}

.hero-inner{

    min-height:280px;

    border-radius:18px;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center center;

}

.hero-content{

    position:relative;

    min-height:280px;

    display:flex;

    justify-content:center;
    align-items:center;
    flex-direction:column;

    padding:30px 20px;

    background:linear-gradient(
        rgba(0,0,0,.30),
        rgba(0,0,0,.55)
    );

}

.hero-title{

    font-size:1.8rem;

    margin-bottom:14px;

}

.hero-subtitle{

    font-size:1rem;

    line-height:1.5;

}

}


/* ==========================================================
   SCROLL TO TOP
========================================================== */

#scrollTopBtn{

    position:fixed;

    right:25px;
    bottom:25px;

    width:52px;
    height:52px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:var(--vs-primary);

    color:#fff;

    font-size:24px;

    text-decoration:none;

    box-shadow:0 8px 22px rgba(0,0,0,.18);

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:9999;

}

#scrollTopBtn:hover{

    transform:translateY(-3px);

    background:var(--vs-primary-hover);

}


@media (max-width:768px){

.nav{

    gap:0 !important;

}

.nav > *{

    margin:0 !important;

}

.dropdown{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.dropdown-btn{

        display:block;

        width:100%;

        max-width:280px;

        margin:0 auto;

        padding:6px 0;

        text-align:center;

    }

}


/* ==========================================================
   30 FOOTER
========================================================== */

.footer{

    margin:70px auto 25px;

    padding:28px 20px 22px;

    background:#111111;

    color:#fff;

}

.footer-links{

    max-width:1200px;

    margin:0 auto 5px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:35px;

}

.footer-links a{

    color:#fff;

    font-weight:500;

    transition:.25s;

}

.footer-links a:hover{

    color:#ffffff;

    opacity:.8;

    text-decoration:underline;

    text-underline-offset:4px;

}

.footer-login{

    text-align:center;

    margin-bottom:15px;

}

.footer-login span{

    font-size:.95rem;

    color:#fff;

}

.footer-socials{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

}


.social-icon{

    width:24px;

    height:24px;

    fill:#083b7f;

    transition:.25s;

}

.footer-socials a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#ffffff;

    transition:.25s;

}

.footer-socials a:hover{

    background:#062f66;

    transform:translateY(-3px);

}

.footer-socials a:hover .social-icon{

    fill:#ffffff;

}


/* ==========================================================
   FOOTER SIGNATURE
========================================================== */

.heart-container{

    margin:18px 0 35px;

    text-align:center;

}

.heart-text{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-size:.9rem;

}

.heart-text a{

    color:var(--vs-text);

    transition:.25s;

}

.heart-text a:hover{

    color:var(--vs-primary);

}

.footer-signature-btn{

    min-height:44px;

    padding:0 24px;

    font-size:.95rem;

    color:#fff !important;

    text-decoration:none;

}

.footer-signature-btn:hover{

    color:#fff !important;

    text-decoration:none;

}

.heart{

    font-size:20px;

    margin-left:8px;

    animation:heartbeat 2.5s infinite;

}

@keyframes heartbeat{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.15);
    }

}


/* ==========================================================
   ADSENSE
========================================================== */

.adsense-wrapper{

    max-width:970px;

    margin:50px auto;

    padding:0 20px;

    text-align:center;

}


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

@media (max-width:768px){

.footer{

    padding:30px 15px;

}

.footer-links{

    flex-direction:column;

    gap:14px;

}

.footer-login{

    margin:20px 0;

}

.footer-socials{

    gap:12px;

}

.footer-socials a{

    width:42px;

    height:42px;

}

}


/* ==========================================================
   MOBILE SPORTEVENTS SUCHBUTTON
========================================================== */

@media (max-width:768px){

    .vs-search{

        flex-direction:column;

    }

    .autocomplete-wrapper{

        width:100%;

    }

    .vs-search .vs-btn{

        width:auto;

        min-width:260px;

        max-width:320px;

        margin:0 auto;

        flex:none;

    }

}


/* ==========================================================
   FORMULAR EINTRAG
========================================================== */

.card--form {
    max-width: 900px;
    margin: 0 auto 50px;
    padding: 40px;
}

.form-container {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text);
}

.form-container input,
.form-container select,
.form-container textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d8d8d8;
    border-radius: 12px;
    font-size: 1rem;
    transition: .2s;
    background: #fff;
    box-sizing: border-box;
}

.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(198,167,94,.15);
}

.form-container textarea {
    min-height: 180px;
    resize: vertical;
}

.form-grid {
    display: grid;
    gap: 18px;
}

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

.form-grid-location {
    grid-template-columns: 180px 1fr;
}

.form-grid-address {
    grid-template-columns: 1fr 140px;
}

.form-grid-phone {
    grid-template-columns: 120px 1fr;
}

@media (max-width:768px) {

    .form-grid-2,
    .form-grid-location,
    .form-grid-address,
    .form-grid-phone {
        grid-template-columns: 1fr;
    }

}

.required {
    color: #d32f2f;
    font-weight: 700;
}

.field-info {
    display: block;
    margin: 6px 0 12px;
    color: #666;
    font-size: .9rem;
    line-height: 1.4;
}


/* =================================================
ERFOLGSMELDUNG
================================================= */
.success-message{
color:#1a7f37;
font-weight:bold;
font-size:18px;
text-align:center;
margin-top:20px;
}


.button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

@media (max-width: 768px) {

    .button-group {
        flex-direction: column;
        align-items: center;
    }

    .button-group .vs-btn {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

}


/* ==========================================================
   AUTOCOMPLETE EINGABE SPORTARTEN
========================================================== */

.autocomplete-list{

    position:absolute;

    top:100%;

    left:0;

    right:0;

    z-index:999;

    margin-top:8px;

    background:#fff;

    border:1px solid #dfe3e8;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

}

.autocomplete-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 16px;

    cursor:pointer;

    transition:.15s;

}

.autocomplete-item:hover{

    background:#f3f7ff;

}

.autocomplete-item.active{

    background:#e8f0ff;

}

.form-group{

    margin:0;

    position:relative;

}

.autocomplete-list{
    pointer-events:auto;
}

.autocomplete-item{
    pointer-events:auto;
}

.autocomplete-item:hover{
    background:#f5f5f5;
}


/* ==========================================================
   jQuery UI AUTOCOMPLETE
========================================================== */

.ui-autocomplete{

    margin-top:8px !important;

    background:#fff;

    border:1px solid #dfe3e8 !important;

    border-radius:14px !important;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    padding:0;

}

.ui-menu-item{

    margin:0 !important;

}

.ui-menu-item-wrapper{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 16px !important;

    transition:.15s;

    border:none !important;

}

.ui-menu-item-wrapper.ui-state-active{

    background:#f3f7ff !important;

    color:inherit !important;

    margin:0 !important;

}


/* ==========================================================
   SOCIAL / ANGEBOTS KARTEN
========================================================== */

.vs-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
    max-width:1200px;
    margin:30px auto;
    width:100%;
}

.vs-card{
    background:#fff;
    border:1px solid var(--vs-border);
    border-radius:18px;
    padding:18px;
    text-align:center;
    box-shadow:var(--vs-shadow);
    transition:var(--vs-transition);

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    height:100%;
}

.vs-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--vs-shadow-hover);
}

.vs-card-title{
    font-size:1rem;
    font-weight:700;
    color:var(--vs-text);

    margin-top:auto;
    width:100%;
    min-height:2.6em;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1.35;
}

.vs-card img{
    width:100%;
    height:auto;
    max-height:420px;
    object-fit:contain;
    margin:0 auto 20px;
}

.vs-card-text{
    line-height:1.7;
    color:var(--vs-text-light);
    margin-bottom:20px;
}

.vs-card-price{
    margin-top:15px;
    padding:12px 16px;
    border-radius:14px;
    background:#eef8ef;
    color:var(--vs-success);
    font-weight:700;
    font-size:1rem;
}

.vs-card-note{
    margin-top:20px;
    text-align:center;
    font-size:.85rem;
    color:#888;
}


/* ==========================================================
   AFFILIATE HINWEIS / ANGEBOT
========================================================== */

.affiliate-box{
    margin-top:40px;
    padding-top:35px;
    border-top:1px solid var(--vs-border);
    text-align:center;
}

.affiliate-box .vs-heading{
    text-align:center;
    margin-bottom:25px;
}

.affiliate-banner{
    display:flex;
    justify-content:center;
    margin:0 auto 30px;
}

.affiliate-banner a{
    display:flex;
    justify-content:center;
    align-items:center;
}

.affiliate-banner img{
    width:220px;
    height:220px;
    object-fit:contain;
    object-position:center;

    border-radius:50%;
    background:#fff;
    border:1px solid var(--vs-border);
    padding:15px;

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

.affiliate-banner img:hover{
    transform:scale(1.03);
    box-shadow:var(--vs-shadow-hover);
}

.affiliate-text{
    max-width:850px;
    margin:0 auto 30px;
    text-align:center;
    line-height:1.8;
    color:var(--vs-text);
}

.affiliate-cta{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.affiliate-hinweis{
    margin-bottom:18px;
}

.affiliate-button{
    margin-bottom:12px;
}

.affiliate-cta small{
    font-size:.8rem;
    color:var(--vs-text-light);
}

@media (max-width:768px){

    .affiliate-banner img{
        width:170px;
        height:170px;
        padding:12px;
    }

}


/* ==========================================================
   SPORTVERBÄNDE
========================================================== */
.verband-abc{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:35px auto 45px;
}

.abc-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;

    border-radius:12px;
    font-weight:700;

    transition:var(--vs-transition);
}

.abc-button.active{
    background:#fff;
    border:1px solid var(--vs-border);
    box-shadow:var(--vs-shadow);
}

.abc-button.active:hover{
    background:var(--vs-primary);
    color:#fff;
}

.abc-button.inactive{
    background:#f2f2f2;
    color:#aaa;
    cursor:default;
}

.abc-button.current{
    background:var(--vs-primary);
    color:#fff;
    border-color:var(--vs-primary);
}


.verbaende-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:22px;
    max-width:1200px;
    margin:0 auto;
}

.verband-card{
    padding:28px 20px;
}

.verband-icon{
    font-size:2.4rem;
    margin-bottom:18px;
}

.verband-link{
    margin-top:15px;
    color:var(--vs-primary);
    font-size:.9rem;
    word-break:break-word;
}

.verband-card:hover .verband-link{
    text-decoration:underline;
}


/* ==========================================================
   AUSGEGRAUTE KARTEN
========================================================== */
.vs-card-disabled{
    opacity:.55;
    cursor:default;
    pointer-events:none;
    filter:grayscale(100%);
}

.vs-card-disabled:hover{
    transform:none;
    box-shadow:var(--shadow);
}

/* Vereinskarten im Grid kompakter */

.vs-grid .vs-panel{
    margin-bottom:0;
}

.vs-grid .vs-panel-inner{
    padding:22px;
}


/* ==========================================================
   VEREINSKARTEN
========================================================== */

.vs-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.vs-card-title-verein{

    min-height:58px;

    display:flex;
    align-items:flex-start;
    justify-content:center;

    text-align:center;
    font-weight: bold;
    color: #062f66;
}

.vs-card-address{
    min-height:72px;

    display:flex;
    flex-direction:column;
}

.vs-address-line{
    font-size:0.85rem;
    line-height:1.35;
}

.vs-card-address{
    min-height:72px;

    display:flex;
    flex-direction:column;
}

.vs-city-line{
    font-size:0.85rem;
    line-height:1.35;
}

.vs-card-meta{

    margin:18px 0;

}

.vs-btn{

    margin-top:auto;

}

/* ==========================================================
   VEREINSLOGO
========================================================== */

.verein-logo{
    width:95px;
    height:95px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 18px;

    background:#fff;
    border:1px solid #e3e6ea;
    border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,.06);

    overflow:hidden;
}

.verein-logo img{
    display:block;
    max-width:72px;
    max-height:72px;

    width:auto;
    height:auto;

    object-fit:contain;
}


/* ==========================================================
   TRAININGSORT UND ZEITEN intern
========================================================== */

.training-day{
    margin-top:40px;
    padding-top:30px;
    border-top:1px solid var(--vs-border);
}

.training-day .vs-subheading{
    text-align:left;
    margin-bottom:25px;
}

.training-slot{
    background:#fff;
    border:1px solid var(--vs-border);
    border-radius:16px;
    padding:24px;
    margin-bottom:24px;
}

.training-slot .vs-card-title{
    display:block;
    width:100%;
    text-align:left;
    color:#6b7280;
    font-size:0.85rem;
    font-weight:600;
    margin:0 0 20px 0;
    padding-bottom:10px;
    border-bottom:1px solid var(--vs-border);
}

.training-slot .form-group{
    align-items:flex-start;
}

.training-slot .form-group label{
    display:block;
    width:100%;
    text-align:left;
    font-weight:600;
    margin-bottom:8px;
}

.training-panel{
    background:transparent;
}


.training-panel.vs-panel{
    background:transparent;
}

.form-grid-time{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.form-grid-time .vs-select{
    width:110px !important;
}

@media (max-width:768px){

    .form-grid-time{
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   SOCIAL MEDIA FORMULAR
   ========================================================== */

.social-media-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    margin-top:20px;
}

.social-media-item {
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px;
    background:#fff;
    border:1px solid var(--vs-border);
    border-radius:14px;
}

.social-media-item img {
    width:42px;
    height:42px;
    object-fit:cover;
    border-radius:8px;
    flex-shrink:0;
}

.social-media-field {
    flex:1;
}

.social-media-field label {
    display:block;
    margin-bottom:6px;
    font-weight:600;
    color:var(--vs-text);
}

.social-media-field .vs-input {
    width:100%;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:768px) {

    .social-media-grid {
        grid-template-columns:1fr;
    }

    .social-media-item {
        padding:14px;
    }

}


/* ==========================================================
   VEREINSLOGO UPLOAD
========================================================== */

.upload-form{
    max-width:700px;
    margin:40px auto 50px;
    padding:40px;

    background:#fff;
    border:1px solid var(--vs-border);
    border-radius:22px;

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

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:25px;

    text-align:center;
}


/* ==========================================================
   DATEI AUSWÄHLEN
========================================================== */

.upload-file-section{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;
}


.file-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:48px;
    padding:0 24px;

    background:#fff;
    color:var(--vs-primary);

    border:2px solid var(--vs-primary);
    border-radius:999px;

    font-size:.9rem;
    font-weight:600;

    cursor:pointer;

    transition:var(--vs-transition);
}

.file-label:hover{
    background:var(--vs-primary);
    color:#fff;

    transform:translateY(-2px);
}


/* EIGENTLICHES DATEIFELD VERSTECKEN */

.file-input{
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;
}


/* HINWEIS */

.upload-file-info{
    color:var(--vs-text-light);

    font-size:.85rem;
    line-height:1.5;

    text-align:center;
}


/* ==========================================================
   LOGO VORSCHAU
========================================================== */

.preview-container{
    width:220px;
    height:220px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f8f9fb;

    border:1px solid var(--vs-border);
    border-radius:22px;

    overflow:hidden;

    padding:15px;

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


.preview-container img{
    display:block;

    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;
}


/* ==========================================================
   UPLOAD BUTTON
========================================================== */

.upload-button-wrapper{
    display:flex;
    justify-content:center;

    width:100%;
}


.upload-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:48px;

    padding:0 28px;

    border:none;
    border-radius:999px;

    background:var(--vs-primary);
    color:#fff;

    font-size:.9rem;
    font-weight:600;

    cursor:pointer;

    transition:var(--vs-transition);
}


.upload-button:hover{
    background:var(--vs-primary-hover);

    transform:translateY(-2px);
}


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

@media (max-width:768px){

    .upload-form{
        width:calc(100% - 30px);

        margin:30px auto 40px;

        padding:25px 20px;

        border-radius:18px;

        gap:20px;
    }


    .file-label{
        width:100%;
        max-width:320px;
    }


    .preview-container{
        width:180px;
        height:180px;

        border-radius:18px;

        padding:12px;
    }


    .upload-button{
        width:100%;
        max-width:320px;
    }

}

/* ==========================================================
   VEREINSLOGO ÄNDERN – AKTUELLES LOGO
========================================================== */

.logo-change-card{
    max-width:700px;
    margin:40px auto 30px;
    padding:35px 40px;

    background:#fff;
    border:1px solid var(--vs-border);
    border-radius:22px;

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

    text-align:center;
}


/* ==========================================================
   ÜBERSCHRIFT
========================================================== */

.logo-change-header{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:6px;

    margin-bottom:30px;
}


.logo-change-title{
    font-size:1.1rem;
    font-weight:600;
    color:var(--vs-text-light);
}


.logo-change-sport{
    font-size:1.7rem;
    font-weight:700;
    line-height:1.3;

    color:var(--vs-primary);
}


/* ==========================================================
   AKTUELLES LOGO
========================================================== */

.current-logo-preview{
    display:flex;
    flex-direction:column;
    align-items:center;
}


.current-logo-label{
    margin-bottom:15px;

    font-size:.85rem;
    font-weight:600;

    color:var(--vs-text-light);
}


/* Logo-Fläche */

.current-logo-image{
    width:180px;
    height:180px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:18px;

    background:#f8f9fb;

    border:1px solid var(--vs-border);
    border-radius:22px;

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

    overflow:hidden;
}


/* tatsächliches Logo */

.current-logo-image img{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:100%;

    object-fit:contain;
}


/* ==========================================================
   KEIN LOGO VORHANDEN
========================================================== */

.current-logo-empty{
    max-width:500px;
    margin:0 auto;

    padding:25px 30px;

    background:#fff7eb;

    border:1px solid #f4d6a5;
    border-radius:18px;

    text-align:center;
}


.current-logo-empty-icon{
    font-size:2rem;

    margin-bottom:8px;
}


.current-logo-empty-title{
    margin-bottom:6px;

    color:#d17a00;

    font-size:1rem;
    font-weight:700;
}


.current-logo-empty-text{
    color:#8a6a35;

    font-size:.9rem;
    line-height:1.5;
}


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

@media (max-width:768px){

    .logo-change-card{
        width:calc(100% - 30px);

        margin:30px auto 25px;

        padding:25px 20px;

        border-radius:18px;
    }


    .logo-change-title{
        font-size:1rem;
    }


    .logo-change-sport{
        font-size:1.4rem;
    }


    .current-logo-image{
        width:160px;
        height:160px;

        padding:15px;

        border-radius:18px;
    }


    .current-logo-empty{
        padding:20px;
    }

}


/* ==========================================================
   SPORT EVENT FORMULAR – ERGÄNZUNGEN
   ========================================================== */

.form-group{
    position:relative;
}

.form-group > label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
    color:var(--vs-text);
}


/* Datum */

.flex-datum{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:15px;
}

.datum-trenner{
    color:var(--vs-text-light);
    font-weight:600;
}


/* Fehlermeldungen */

.error-message{
    display:block;
    margin-top:6px;
    color:var(--vs-danger);
    font-size:.9rem;
    font-weight:600;
    line-height:1.4;
}


/* Fehlerfeld */

.form-container .has-error{
    border-color:var(--vs-danger);
}


/* Mobile */

@media (max-width:768px){

    .flex-datum{
        grid-template-columns:1fr;
        gap:10px;
    }

    .datum-trenner{
        display:none;
    }

}