/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ===================================
   CSS Variables für Gradients
   =================================== */
:root {
    /* Haupt-Gradient - Verschiedene Optionen zum Testen */
    
    /* Option 1: Grau/Schwarz (sehr dezent und professionell) */
    /*--gradient-primary-start: #434343;
    --gradient-primary-end: #000000;*/
    
    /* Option 2: Hellgrau/Dunkelgrau (weicher) */
    /* --gradient-primary-start: #bdc3c7;
    --gradient-primary-end: #2c3e50; */
    
    /* Option 3: Mittelgrau/Dunkelgrau (ausgewogen) */
    /* --gradient-primary-start: #757F9A;
    --gradient-primary-end: #D7DDE8; */
    
    /* Option 4: Anthrazit (edel und modern) */
    --gradient-primary-start: #2c3e50;
    --gradient-primary-end: #34495e;
    
    /* Option 5: Blaugrau (wie aktuell aber grauer) */
    /*--gradient-primary-start: #536976;
    --gradient-primary-end: #292E49;*/
    
    /* Aktuell aktiv: Dunkelblau */
    /* --gradient-primary-start: #2c4a7a;
    --gradient-primary-end: #667eea; */
    
    --gradient-primary: linear-gradient(135deg, var(--gradient-primary-start) 0%, var(--gradient-primary-end) 100%);
    
    /* Warnung Gradient (Gelb) */
    --gradient-warning-start: #ffc107;
    --gradient-warning-end: #e0a800;
    --gradient-warning: linear-gradient(135deg, var(--gradient-warning-start) 0%, var(--gradient-warning-end) 100%);
    
    /* Gefahr Gradient (Rot) */
    --gradient-danger-start: #dc3545;
    --gradient-danger-end: #b02a37;
    --gradient-danger: linear-gradient(135deg, var(--gradient-danger-start) 0%, var(--gradient-danger-end) 100%);
    
    /* Success Gradient (Grün) */
    --gradient-success-start: #11998e;
    --gradient-success-end: #38ef7d;
    --gradient-success: linear-gradient(135deg, var(--gradient-success-start) 0%, var(--gradient-success-end) 100%);
    
    /* Info Gradient (Pink/Rosa) */
    --gradient-info-start: #f093fb;
    --gradient-info-end: #f5576c;
    --gradient-info: linear-gradient(135deg, var(--gradient-info-start) 0%, var(--gradient-info-end) 100%);
}

/* Helper Classes */
.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}
.bg-gradient-warning {
    background: var(--gradient-warning) !important;
}
.bg-gradient-danger {
    background: var(--gradient-danger) !important;
}
.bg-gradient-success {
    background: var(--gradient-success) !important;
}
.bg-gradient-info {
    background: var(--gradient-info) !important;
}

/* ===================================
   Profile Image Security
   =================================== */
/* Prevent profile images from breaking layout */
img[src^="data:image/"],
img[src*="/images/pictures/"],
img[alt*="Profilbild"],
img[alt*="profile"] {
    max-width: 100% !important;
    height: auto !important;
}

/* Specific size constraints for different contexts */
.profile-avatar img,
.user-avatar img {
    max-width: 200px !important;
    max-height: 200px !important;
}

.comment img,
.media img {
    max-width: 80px !important;
    max-height: 80px !important;
}

/* ===================================
   Original Custom CSS
   =================================== */

body{
    position:relative;
    height:101%;
    min-height:101%;
    background-color:#f9f9f9;
    /*background-image:url('../images/bg2.jpg');
    background-repeat:no-repeat;
    margin:0;
    padding:0;

    background-position: top center;
    background-attachment: fixed;
    */
}


.page-heading {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    text-align: center;
    padding: 50px 0;
    position: relative;

    object-fit: cover;
    overflow: hidden;
    background: #C33764;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(181, 0, 0, 0.62), rgba(187, 182, 184, 0.8)), url('../images/Unbenannt-2.jpg');
    background: linear-gradient(rgb(146, 146, 146), rgb(93, 92, 92), rgba(255, 255, 255, 0.5)), url('../images/Unbenannt-2.jpg'); /* The least supported option. */

}

.page-heading::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url('../images/black-linen.png');
    background-size: auto;
    background-position: 100% 0;
    background-repeat: repeat;
    opacity: 0.4;
}

.page-heading-fix {
    height: 120px;
padding: 0;
    background: #C33764;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(181, 0, 0, 0.62), rgba(187, 182, 184, 0.8)), url('https://www.spielbar.de/cache/images/5/150305-top-topteaser1200.jpg?C8BB7');
    background: linear-gradient(rgb(146, 146, 146), rgba(93, 92, 92, 0.63), rgba(168, 165, 165, 0.82)), url('https://www.spielbar.de/cache/images/5/150305-top-topteaser1200.jpg?C8BB7'); /* The least supported option. */
}

.page-heading p, .page-heading span, .page-heading h1,  .page-heading h2,  .page-heading h3 {
    color: #fff !important;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
    object-fit: cover;
    background: black;
    overflow: hidden;
    background: #C33764;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(181, 0, 0, 0.62), rgba(187, 182, 184, 0.8)), url('../images/Unbenannt-2.jpg');
    background: linear-gradient(rgb(255, 255, 255), rgba(154, 145, 149, 0.8)), url('../images/Unbenannt-2.jpg'); /* The least supported option. */
}

.button .button-red{
    color: #b50000;
}

@media (min-width: 992px) {
    .page-heading {
        padding: 110px 0 106px 0;
    }
}

.page-heading .breadcrumb {
    font-size: 10px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 0;
}

.link {
    color: #6e6e6e;
}

.link:hover {
    color: #af0000;
}

.label {
font-weight: bold;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.5em;
padding: 0.6em;
font-size: 9px;
font-family: "Montserrat", sans-serif;
color: #fff;
text-transform: uppercase;
}

.team-prestige {
    font-weight: bold;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.5em;
    padding: 0.6em;
    font-size: 9px;
    font-family: "Montserrat", sans-serif;
    color: #af0000;
    text-transform: uppercase;

    border: outset;
    border-color: #af0000;

    display: block;
    float: left;
    font-style: normal;
}

.team-intern {
    font-weight: bold;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.5em;
    padding: 0.6em;
    font-size: 9px;
    font-family: "Montserrat", sans-serif;
    color: cornflowerblue;
    text-transform: uppercase;

    border: outset;
    border-color: cornflowerblue;

    display: block;
    float: left;
    font-style: normal;
}

.posts__cat-label {
    border: outset;
    border-color: #ccc;
    background-color: rgba(175, 0, 0, 0.73);
    display: block;
    float: left;
    font-style: normal;
}

.posts__cat-label img {
    margin-right: 0.5em;
}


.linkhover:hover {
    cursor: pointer;
    background-color: #e0e0e0;
    color: rgba(175, 0, 0, 0.73);
    font-weight: bold;
}


.posts__cat-label + .posts__title {
    margin-top: 0.55em;
}

.posts__cat-label + .posts__cat-label {
    margin-left: 0.5em;
}


.matchday-active {
    background-color: #e0e0e0;
}



/* Card
/* ------------------------- */

.card-style {
    border: 1px solid #e4e7ed;
    border-radius: 0.75rem;
    background-color: rgba(0, 0, 0, 0.03);
    margin-bottom: 15px;
}

.card-style-header {
    padding: 15px 0;
    border-radius: 7px 7px 0 0;
    position: relative;
    border-bottom: 1px solid #e4e7ed;
    overflow: hidden;
    background-color: transparent;
    background-size: auto;
    background-position: 100% 0;
    background-repeat: repeat;
    /*opacity: 0.5;*/
}

.card-style-header-text {
    content: '';
    color: #b50000;
    opacity: 1.0;
    margin: 0;
}

.card-style2-header {
    padding: 15px 0;
    border-radius: 7px 7px 0 0;
    position: relative;
    border-bottom: 1px solid #e4e7ed;
    overflow: hidden;
    /*background-color: transparent;*/

    background-size: auto;
    background-position: 100% 0;
    background-repeat: repeat;
    /*opacity: 0.5;*/
    /*background-image: url('../images/black-linen.png');*/

    background: -webkit-linear-gradient(rgba(181, 0, 0, 0.8), rgba(187, 182, 184, 0.5)), url('../images/black-linen.png');
    background: linear-gradient(rgba(255, 255, 255, 0.52), rgba(181, 0, 0, 0.27), rgba(181, 0, 0, 0.7)), url('../images/black-linen.png'); /* The least supported option. */
}

.card-style2-header-text {
    content: '';
    color: #ececec;
    opacity: 1.0;
    margin: 0;
    font-size:26px;
    font-weight: bold;
}

.card-style-header2::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: 0;
    /*border-radius: 5px 5px 0 0;*/


    background: -webkit-linear-gradient(rgba(181, 0, 0, 0.8), rgba(187, 182, 184, 0.5)), url('../images/black-linen.png');
    background: linear-gradient(rgba(181, 0, 0, 0.3), rgba(255, 255, 255, 0.52), rgba(154, 145, 149, 0.19)), url('../images/black-linen.png'); /* The least supported option. */


}

.card-style-header > h4 {
    margin-bottom: 0;
    line-height: 1.5em;
    letter-spacing: 0.05em;
    font-style: normal;
}

.card-yr-img {
    background-image: url("../img/table/icons8-red-card-16.png");
    border: none;
    background-repeat: no-repeat;
    background-position: center;
}

.icons_sprite {
    background-image: url(https://tmssl.akamaized.net/images/icons/iconset_sprite.png);
    background-repeat: no-repeat;
    cursor: inherit !important;
    display: inline-block;
}

.icon-gelbekarte-table, .icon-gelbekarte-table-header, .ausfall-1-table {
    background-position: -363px -88px
}

.icon-gelbrotekarte-table, .icon-gelbrotekarte-table-header, .ausfall-2-table {
    background-position: -374px -88px
}

.icon-rotekarte-table, .icon-rotekarte-table-header, .ausfall-3-table {
    background-position: -385px -88px
}

.ausfall-table, .ausfall-1-table, .ausfall-2-table, .ausfall-3-table {
    height: 12px;
    margin-left: 3px;
    vertical-align: text-top;
    width: 12px;
}

/* ===================================
   Star Rating Display
   =================================== */
.stars {
    display: inline-block;
    position: relative;
    font-size: var(--s, 20px);
    line-height: 1;
    white-space: nowrap;
}

.stars::before,
.stars::after {
    content: "★★★★★";
    font-size: inherit;
    line-height: inherit;
}

.stars::after {
    color: #ddd;
}

.stars::before {
	position: absolute;
	top: 0;
	left: 0;
	color: #ffd700;
	width: calc(var(--l, 0) * 20%);
	overflow: hidden;
}

/* ===================================
   Navigation Dropdown Fix
   =================================== */
/* Fix: Verhindert dass Dropdown verschwindet wenn Maus über header-misc Buttons geht */
@media (min-width: 992px) {
    /* Erweitere den Hover-Bereich des Menüpunkts nach unten */
    .primary-menu:not(.on-click) .menu-item {
        position: relative;
    }
    
    /* Füge unsichtbaren Bereich zwischen Menü und Dropdown hinzu */
    .primary-menu:not(.on-click) .menu-item > .sub-menu-container::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 60px;
        background: transparent;
        pointer-events: auto;
    }
    
    /* Erhöhe z-index des Dropdowns, sodass es über den Buttons liegt */
    .primary-menu:not(.on-click) .menu-item:hover > .sub-menu-container,
    .primary-menu:not(.on-click) .menu-item:hover > .mega-menu-content {
        z-index: 499 !important;
    }
    
    /* Verzögere das Ausblenden des Dropdowns leicht */
    .primary-menu:not(.on-click) .menu-item > .sub-menu-container {
        transition: opacity .2s ease, visibility .2s ease, margin-top .2s ease;
        transition-delay: 0s, 0s, 0s;
    }
    
    .primary-menu:not(.on-click) .menu-item:not(:hover) > .sub-menu-container {
        transition-delay: 0.15s, 0.15s, 0.15s;
    }
}

/* ===================================
   Mobile Navigation - Global Color Fix
   =================================== */
@media (max-width: 991.98px) {
    .menu-container > .menu-item > .menu-link {
        color: #f0f0f0 !important;
    }

    .menu-container > .menu-item:hover > .menu-link,
    .menu-container > .menu-item.current > .menu-link {
        color: #b50000 !important;
    }

    .menu-container > .menu-item > .sub-menu-trigger,
    .menu-container > .menu-item > .menu-link i.icon-angle-down {
        color: #f0f0f0 !important;
    }

    .sub-menu-container .menu-link,
    .mega-menu-content .menu-link {
        color: #d0d0d0 !important;
    }

    .sub-menu-container .menu-item:hover > .menu-link,
    .mega-menu-content .menu-item:hover > .menu-link {
        color: #fff !important;
    }

    .sub-menu-container .menu-item .sub-menu-trigger,
    .mega-menu-content .menu-item .sub-menu-trigger {
        color: #d0d0d0 !important;
    }

    .sub-menu-container,
    .mega-menu-content {
        border-top-color: rgba(255, 255, 255, 0.08) !important;
    }

    .mega-menu-content .mega-menu-title > .menu-link {
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 0.7rem !important;
        letter-spacing: 1.5px;
        padding-top: 10px !important;
        padding-bottom: 4px !important;
    }

    .mega-menu-dropdown .menu-link {
        color: #bbb !important;
        padding-left: 10px !important;
    }

    .mega-menu-dropdown .menu-item:hover > .menu-link {
        color: #fff !important;
    }

    .sub-menu-container .menu-link img {
        width: 18px;
        height: auto;
        margin-right: 6px;
        vertical-align: middle;
    }
}

/* ===================================
   Competitions Mega Menu - Desktop
   =================================== */
@media (min-width: 992px) {
    .competitions-mega-menu .mega-menu-content {
        max-width: 600px;
    }

    .competitions-nav-inner {
        padding: 0;
    }

    .competitions-nav-columns {
        display: flex;
    }

    .competitions-nav-col {
        flex: 1 1 auto;
        min-width: 0;
        padding: 24px 25px !important;
        border-top: 0 !important;
    }

    .competitions-nav-col:first-child {
        border-right: 1px solid #f0f0f0;
    }

    .competitions-nav-col .mega-menu-title > .menu-link {
        font-size: 0.75rem !important;
        letter-spacing: 1.5px;
        color: #999 !important;
        margin-bottom: 8px;
    }

    .competitions-nav-col .sub-menu-container .menu-link {
        padding: 6px 5px !important;
        font-size: 0.85rem;
    }

    .competitions-nav-col .sub-menu-container .menu-link img {
        width: 20px;
        height: auto;
        margin-right: 6px;
        vertical-align: middle;
    }
}