:root {
    --primary: #ef6eff;
    --secondary: #1e0039;
    --accent: #e74c3c;
    --light: #ecf0f1;
    --dark: #2c3e50;
    --gray: #7f8c8d;
    --text: #333;
    --card-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    --smooth-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s ease;
}

        /* Header-Bereich */
        .main-header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 60px 0;
            text-align: center;
            border-radius: 12px;
            margin: 25px 0;
            box-shadow: var(--smooth-shadow);
        }
        
        .main-header h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            font-weight: 800;
        }
        
        .main-header p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* Suchbereich */
        .search-section {
            background-color: #fff;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: var(--card-shadow);
        }
        
        .search-box {
            display: flex;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .search-input {
            flex: 1;
            padding: 15px 20px;
            border: 2px solid var(--light);
            border-radius: 30px 0 0 30px;
            font-size: 1rem;
            outline: none;
        }
        
        .search-button {
            background-color: var(--accent);
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 0 30px 30px 0;
            cursor: pointer;
            font-weight: bold;
            transition: var(--transition);
        }
        
        .search-button:hover {
            background-color: #c0392b;
        }
        
        span.fas-icon_fire::before {
            font-family: 'FontAwesome';
            content: '\f46a';
            margin: 0px 10px 0px 0px;
            display: inline-block;
        }
        span.fas-icon_clock::before {
            font-family: 'FontAwesome';
            content: '\f017';
            margin: 0px 10px 0px 0px;
            display: inline-block;
        }



        span.fas-icon_rpg::before {
            font-family: 'FontAwesome';
            content: '\f702';
            margin: 0px 10px 0px 0px;
            display: inline-block;
        }
        span.fas-icon_action::before {
            font-family: 'FontAwesome';
            content: '\f70c';
            margin: 0px 10px 0px 0px;
            display: inline-block;
        }
        span.fas-icon_strategy::before {
            font-family: 'FontAwesome';
            content: '\f439';
            margin: 0px 10px 0px 0px;
            display: inline-block;
        }
        span.fas-icon_adventure::before {
            font-family: 'FontAwesome';
            content: '\f11b';
            margin: 0px 10px 0px 0px;
            display: inline-block;
        }



        span.fas-icon_arrowleft::before {
            font-family: 'FontAwesome';
            content: '\f053';
            margin: 2px 1px 0px 0px;
            display: inline-block;
        }
        span.fas-icon_arrowright::before {
            font-family: 'FontAwesome';
            content: '\f054';
            margin: 2px -1px 0px 0px;
            display: inline-block;
        }

        /* Spiele-Karussell */
        .games-section {
            margin: 40px 0;
            position: relative;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0px;
        }
        
        .section-title {
            font-size: 1.8rem;
            color: var(--secondary);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .carousel-nav {
            display: flex;
            gap: 10px;
        }
        
        .carousel-button {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--light);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .carousel-button:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .games-carousel {
            display: flex;
            overflow-x: hidden;
            gap: 25px;
            padding: 20px 5px;
            scroll-behavior: smooth;
        }
        
        .game-card {
            background-color: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
            transition: var(--transition);
            text-decoration: none;
            color: inherit;
            display: block;
            flex: 0 0 calc(25% - 19px); /* 4 Karten pro Reihe mit Abstand */
            min-width: 250px;
        }
        
        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.3);
        }
        
        .game-card-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .game-card-content {
            padding: 20px;
        }
        
        .game-card-title {
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: var(--secondary);
            font-weight: 700;
        }
        
        .game-card-meta {
            color: var(--gray);
            font-size: 0.9rem;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .game-card-description {
            font-size: 0.95rem;
            line-height: 1.5;
        }


        /* Kategorien-Bereich */
        .categories-section {
            margin: 40px 0 60px 0px;
        }
        
        .categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .category-card {
            background-color: #fff;
            border-radius: 12px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            text-align: center;
        }
        
        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
        
        .category-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 15px;
        }
        
        .category-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: var(--secondary);
        }

.archive_content {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    font-family: "Open Sans", Lato, Helvetica, Helvetica Neue, Arial;
    background-color: #f8f9fa;
    color: var(--text);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

/* Header-Bereich */
.game-header {
    display: flex;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: var(--smooth-shadow);
    margin: 25px 0;
    overflow: hidden;
    transition: var(--transition);
}

.game-header:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.game-cover {
    flex: 0 0 280px;
    position: relative;
    overflow: hidden;
}

.game-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition);
}

.game-cover:hover img {
    transform: scale(1.05);
}

.game-info {
    flex: 1;
    padding: 25px;
    position: relative;
}

h1.game-title {
    padding:0;
    /*margin-top:0;*/
    margin-top:-10px;
    margin-bottom:0px;
}

.game-title {
    font-size: 2.4rem;
    margin-bottom: 12px;
    color: var(--secondary);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.game-meta {
    color: var(--gray);
    margin-bottom: 15px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.game-description-short {
    /*margin-bottom: 25px;
    font-size: 1.05rem;*/
    margin-bottom: 20px
    font-size: 1.0rem;
    line-height: 1.7;
}

.game-rating {
    display: flex;
    gap: 20px;
}

.rating-item {
    background-color: var(--light);
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.price-box {
    flex: 0 0 250px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.price-label {
    font-size: 0.95rem;
    margin-bottom: 8px;
    opacity: 0.9;
}

.price-amount {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.price-button {
    background-color: var(--accent);
    color: white;
    border: none;
    padding: 12px 25px 12px 35px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.price-button:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.price-info {
    font-size: 0.8rem;
    margin-top: 15px;
    opacity: 0.8;
    text-align: center;
}

/* Tab-Navigation */
.tabs-container {
    margin-top: 20px;
    width: 100%;
}

    /*
.tabs {
    display: inline-flex;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    position: relative;
    z-index: 2;
}

.tab {
    padding: 16px 25px;
    cursor: pointer;
    background-color: #fff;
    border: none;
    text-align: center;
    font-weight: 600;
    transition: var(--transition);
    color: var(--gray);
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab:hover {
    color: var(--primary);
    background-color: #f8f9fa;
}

.tab.active {
    color: var(--primary);
    background-color: #f8f9fa;
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}*/

/* Tab-Inhalte */
.tab-content-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: var(--card-shadow);
    min-height: 300px;
    position: relative;
    z-index: 1;
    margin-top: -1px;
    border: 3px solid #b121ff;
}

.tab-content-container h2 {
    margin-top:0;
}
/*
.tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-pane.active {
    display: block;
}*/

/* Hauptlayout mit Sidebar */
.main-layout {
    display: flex;
    gap: 25px;
}

.main-content {
    flex: 1;
}

.sidebar {
    flex: 0 0 320px;
}

/* Sidebar Boxen */
.sidebar-box {
    background-color: #fff;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
}

.sidebar-box:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

h2.sidebar-title {
    margin-top:0;
}

.sidebar-title {
    font-size: 1.3rem;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    color: var(--secondary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.info-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    transition: var(--transition);
}

.info-list li:hover {
    background-color: #f9f9f9;
}

.info-list li:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    flex: 0 0 150px;
    color: var(--gray);
}

.info-value {
    flex: 1;
}

/* Beschreibung und Systemanforderungen */
.game-description {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
}

.game-description:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

h2.section-title {
    margin-top:0;
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 18px;
    color: var(--secondary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-description p {
    margin-bottom: 15px;
    line-height: 1.7;
}

/* Responsive Design */
@media (max-width: 992px) {
    .main-layout {
        flex-direction: column;
    }
    
    .sidebar {
        flex: 1;
    }
    
    .game-header {
        flex-direction: column;
    }
    
    .game-cover {
        flex: 1;
    }
    
    .price-box {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .tabs {
        flex-wrap: wrap;
        width: 100%;
    }
    
    .tab {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }
    
    .tab-content-container {
        border-radius: 12px;
    }
}

@media (max-width: 576px) {
    .game-title {
        font-size: 2rem;
    }
    
    .tab {
        flex: 0 0 50%;
        padding: 14px 15px;
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1.3rem;
    }
    
    .sidebar-title {
        font-size: 1.2rem;
    }
}

.badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 8px;
    margin-bottom: 8px;
}

.badge-primary {
    background-color: var(--primary);
    color: white;
}

.badge-secondary {
    background-color: var(--secondary);
    color: white;
}

.platform-icons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.platform-icon {
    width: 30px;
    height: 30px;
    background-color: var(--light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--dark);
}

.price-comparison {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.price-comparison th, .price-comparison td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.price-comparison th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.price-comparison tr:hover {
    background-color: #f8f9fa;
}

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.screenshot-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    cursor: pointer;
}

.screenshot-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.screenshot-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.price-button::before {
    font-family: 'FontAwesome';
    content: '\f07a';
    position: absolute;
    margin: 8px 15px 8px -20px;
    display: block;
    opacity:0.5;
}

span.fas-icon_preisvergleich {
    float:left;
}
span.fas-icon_preisvergleich::before {
    font-family: 'FontAwesome';
    content: '\f54e';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_newspaper::before {
    font-family: 'FontAwesome';
    content: '\f1ea';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}
span.fas-icon_stars::before {
    font-family: 'FontAwesome';
    content: '\f005';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}
span.fas-icon_video::before {
    font-family: 'FontAwesome';
    content: '\f144';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}



span.fas-icon_beschreibung::before {
    font-family: 'FontAwesome';
    content: '\f249';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_hardware::before {
    font-family: 'FontAwesome';
    content: '\f2db';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_sprachen::before {
    font-family: 'FontAwesome';
    content: '\f1ab';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_download::before {
    font-family: 'FontAwesome';
    content: '\f0ed';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_info::before {
    font-family: 'FontAwesome';
    content: '\f05a';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_users::before {
    font-family: 'FontAwesome';
    content: '\f0c0';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_links::before {
    font-family: 'FontAwesome';
    content: '\f0c1';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_tags::before {
    font-family: 'FontAwesome';
    content: '\f02c';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_help::before {
    font-family: 'FontAwesome';
    content: '\f059';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_ad::before {
    font-family: 'FontAwesome';
    content: '\f641';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}


span.fas-icon_genre::before {
    font-family: 'FontAwesome';
    content: '\f11b';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}
span.fas-icon_releasedate::before {
    font-family: 'FontAwesome';
    content: '\f073';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}
span.fas-icon_playtime::before {
    font-family: 'FontAwesome';
    content: '\f017';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}
span.fas-icon_agerestriction::before {
    font-family: 'FontAwesome';
    content: '\f1ae';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}
span.fas-icon_metascore::before {
    font-family: 'FontAwesome';
    content: '\f5c0';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}
span.fas-icon_userscore::before {
    font-family: 'FontAwesome';
    content: '\f007';
    margin: 0px 10px 0px 0px;
    display: inline-block;
}

span.fas-icon_windows::before {
    content: ' ';
    margin: 0px -1px -4px 0px;
    height: 16px;
    width: 16px;
    display: inline-block;
    background-repeat:no-repeat;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDUuMTUuNCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0wIDkzLjdsMTgzLjYtMjUuM3YxNzcuNEgwVjkzLjd6bTAgMzI0LjZsMTgzLjYgMjUuM1YyNjguNEgwdjE0OS45em0yMDMuOCAyOEw0NDggNDgwVjI2OC40SDIwMy44djE3Ny45em0wLTM4MC42djE4MC4xSDQ0OFYzMkwyMDMuOCA2NS43eiIvPjwvc3ZnPg==")
}
span.fas-icon_mac::before {
    content: ' ';
    margin: 0px -4px -3px 0px;
    height: 16px;
    width: 16px;
    display: inline-block;
    background-repeat:no-repeat;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDUuMTUuNCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0zMTguNyAyNjguN2MtLjItMzYuNyAxNi40LTY0LjQgNTAtODQuOC0xOC44LTI2LjktNDcuMi00MS43LTg0LjctNDQuNi0zNS41LTIuOC03NC4zIDIwLjctODguNSAyMC43LTE1IDAtNDkuNC0xOS43LTc2LjQtMTkuN0M2My4zIDE0MS4yIDQgMTg0LjggNCAyNzMuNXEwIDM5LjMgMTQuNCA4MS4yYzEyLjggMzYuNyA1OSAxMjYuNyAxMDcuMiAxMjUuMiAyNS4yLS42IDQzLTE3LjkgNzUuOC0xNy45IDMxLjggMCA0OC4zIDE3LjkgNzYuNCAxNy45IDQ4LjYtLjcgOTAuNC04Mi41IDEwMi42LTExOS4zLTY1LjItMzAuNy02MS43LTkwLTYxLjctOTEuOXptLTU2LjYtMTY0LjJjMjcuMy0zMi40IDI0LjgtNjEuOSAyNC03Mi41LTI0LjEgMS40LTUyIDE2LjQtNjcuOSAzNC45LTE3LjUgMTkuOC0yNy44IDQ0LjMtMjUuNiA3MS45IDI2LjEgMiA0OS45LTExLjQgNjkuNS0zNC4zeiIvPjwvc3ZnPg==")
}
span.fas-icon_linux::before {
    content: ' ';
    margin: 0px -1px -4px 0px;
    height: 16px;
    width: 16px;
    display: inline-block;
    background-repeat:no-repeat;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDUuMTUuNCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0yMjAuOCAxMjMuM2MxIC41IDEuOCAxLjcgMyAxLjcgMS4xIDAgMi44LS40IDIuOS0xLjUuMi0xLjQtMS45LTIuMy0zLjItMi45LTEuNy0uNy0zLjktMS01LjUtLjEtLjQuMi0uOC43LS42IDEuMS4zIDEuMyAyLjMgMS4xIDMuNCAxLjd6bS0yMS45IDEuN2MxLjIgMCAyLTEuMiAzLTEuNyAxLjEtLjYgMy4xLS40IDMuNS0xLjYuMi0uNC0uMi0uOS0uNi0xLjEtMS42LS45LTMuOC0uNi01LjUuMS0xLjMuNi0zLjQgMS41LTMuMiAyLjkuMSAxIDEuOCAxLjUgMi44IDEuNHpNNDIwIDQwMy44Yy0zLjYtNC01LjMtMTEuNi03LjItMTkuNy0xLjgtOC4xLTMuOS0xNi44LTEwLjUtMjIuNC0xLjMtMS4xLTIuNi0yLjEtNC0yLjktMS4zLS44LTIuNy0xLjUtNC4xLTIgOS4yLTI3LjMgNS42LTU0LjUtMy43LTc5LjEtMTEuNC0zMC4xLTMxLjMtNTYuNC00Ni41LTc0LjQtMTcuMS0yMS41LTMzLjctNDEuOS0zMy40LTcyQzMxMS4xIDg1LjQgMzE1LjcuMSAyMzQuOCAwIDEzMi40LS4yIDE1OCAxMDMuNCAxNTYuOSAxMzUuMmMtMS43IDIzLjQtNi40IDQxLjgtMjIuNSA2NC43LTE4LjkgMjIuNS00NS41IDU4LjgtNTguMSA5Ni43LTYgMTcuOS04LjggMzYuMS02LjIgNTMuMy02LjUgNS44LTExLjQgMTQuNy0xNi42IDIwLjItNC4yIDQuMy0xMC4zIDUuOS0xNyA4LjNzLTE0IDYtMTguNSAxNC41Yy0yLjEgMy45LTIuOCA4LjEtMi44IDEyLjQgMCAzLjkuNiA3LjkgMS4yIDExLjggMS4yIDguMSAyLjUgMTUuNy44IDIwLjgtNS4yIDE0LjQtNS45IDI0LjQtMi4yIDMxLjcgMy44IDcuMyAxMS40IDEwLjUgMjAuMSAxMi4zIDE3LjMgMy42IDQwLjggMi43IDU5LjMgMTIuNSAxOS44IDEwLjQgMzkuOSAxNC4xIDU1LjkgMTAuNCAxMS42LTIuNiAyMS4xLTkuNiAyNS45LTIwLjIgMTIuNS0uMSAyNi4zLTUuNCA0OC4zLTYuNiAxNC45LTEuMiAzMy42IDUuMyA1NS4xIDQuMS42IDIuMyAxLjQgNC42IDIuNSA2Ljd2LjFjOC4zIDE2LjcgMjMuOCAyNC4zIDQwLjMgMjMgMTYuNi0xLjMgMzQuMS0xMSA0OC4zLTI3LjkgMTMuNi0xNi40IDM2LTIzLjIgNTAuOS0zMi4yIDcuNC00LjUgMTMuNC0xMC4xIDEzLjktMTguMy40LTguMi00LjQtMTcuMy0xNS41LTI5Ljd6TTIyMy43IDg3LjNjOS44LTIyLjIgMzQuMi0yMS44IDQ0LS40IDYuNSAxNC4yIDMuNiAzMC45LTQuMyA0MC40LTEuNi0uOC01LjktMi42LTEyLjYtNC45IDEuMS0xLjIgMy4xLTIuNyAzLjktNC42IDQuOC0xMS44LS4yLTI3LTkuMS0yNy4zLTcuMy0uNS0xMy45IDEwLjgtMTEuOCAyMy00LjEtMi05LjQtMy41LTEzLTQuNC0xLTYuOS0uMy0xNC42IDIuOS0yMS44ek0xODMgNzUuOGMxMC4xIDAgMjAuOCAxNC4yIDE5LjEgMzMuNS0zLjUgMS03LjEgMi41LTEwLjIgNC42IDEuMi04LjktMy4zLTIwLjEtOS42LTE5LjYtOC40LjctOS44IDIxLjItMS44IDI4LjEgMSAuOCAxLjktLjItNS45IDUuNS0xNS42LTE0LjYtMTAuNS01Mi4xIDguNC01Mi4xem0tMTMuNiA2MC43YzYuMi00LjYgMTMuNi0xMCAxNC4xLTEwLjUgNC43LTQuNCAxMy41LTE0LjIgMjcuOS0xNC4yIDcuMSAwIDE1LjYgMi4zIDI1LjkgOC45IDYuMyA0LjEgMTEuMyA0LjQgMjIuNiA5LjMgOC40IDMuNSAxMy43IDkuNyAxMC41IDE4LjItMi42IDcuMS0xMSAxNC40LTIyLjcgMTguMS0xMS4xIDMuNi0xOS44IDE2LTM4LjIgMTQuOS0zLjktLjItNy0xLTkuNi0yLjEtOC0zLjUtMTIuMi0xMC40LTIwLTE1LTguNi00LjgtMTMuMi0xMC40LTE0LjctMTUuMy0xLjQtNC45IDAtOSA0LjItMTIuM3ptMy4zIDMzNGMtMi43IDM1LjEtNDMuOSAzNC40LTc1LjMgMTgtMjkuOS0xNS44LTY4LjYtNi41LTc2LjUtMjEuOS0yLjQtNC43LTIuNC0xMi43IDIuNi0yNi40di0uMmMyLjQtNy42LjYtMTYtLjYtMjMuOS0xLjItNy44LTEuOC0xNSAuOS0yMCAzLjUtNi43IDguNS05LjEgMTQuOC0xMS4zIDEwLjMtMy43IDExLjgtMy40IDE5LjYtOS45IDUuNS01LjcgOS41LTEyLjkgMTQuMy0xOCA1LjEtNS41IDEwLTguMSAxNy43LTYuOSA4LjEgMS4yIDE1LjEgNi44IDIxLjkgMTZsMTkuNiAzNS42YzkuNSAxOS45IDQzLjEgNDguNCA0MSA2OC45em0tMS40LTI1LjljLTQuMS02LjYtOS42LTEzLjYtMTQuNC0xOS42IDcuMSAwIDE0LjItMi4yIDE2LjctOC45IDIuMy02LjIgMC0xNC45LTcuNC0yNC45LTEzLjUtMTguMi0zOC4zLTMyLjUtMzguMy0zMi41LTEzLjUtOC40LTIxLjEtMTguNy0yNC42LTI5LjlzLTMtMjMuMy0uMy0zNS4yYzUuMi0yMi45IDE4LjYtNDUuMiAyNy4yLTU5LjIgMi4zLTEuNy44IDMuMi04LjcgMjAuOC04LjUgMTYuMS0yNC40IDUzLjMtMi42IDgyLjQuNi0yMC43IDUuNS00MS44IDEzLjgtNjEuNSAxMi0yNy40IDM3LjMtNzQuOSAzOS4zLTExMi43IDEuMS44IDQuNiAzLjIgNi4yIDQuMSA0LjYgMi43IDguMSA2LjcgMTIuNiAxMC4zIDEyLjQgMTAgMjguNSA5LjIgNDIuNCAxLjIgNi4yLTMuNSAxMS4yLTcuNSAxNS45LTkgOS45LTMuMSAxNy44LTguNiAyMi4zLTE1IDcuNyAzMC40IDI1LjcgNzQuMyAzNy4yIDk1LjcgNi4xIDExLjQgMTguMyAzNS41IDIzLjYgNjQuNiAzLjMtLjEgNyAuNCAxMC45IDEuNCAxMy44LTM1LjctMTEuNy03NC4yLTIzLjMtODQuOS00LjctNC42LTQuOS02LjYtMi42LTYuNSAxMi42IDExLjIgMjkuMiAzMy43IDM1LjIgNTkgMi44IDExLjYgMy4zIDIzLjcuNCAzNS43IDE2LjQgNi44IDM1LjkgMTcuOSAzMC43IDM0LjgtMi4yLS4xLTMuMiAwLTQuMiAwIDMuMi0xMC4xLTMuOS0xNy42LTIyLjgtMjYuMS0xOS42LTguNi0zNi04LjYtMzguMyAxMi41LTEyLjEgNC4yLTE4LjMgMTQuNy0yMS40IDI3LjMtMi44IDExLjItMy42IDI0LjctNC40IDM5LjktLjUgNy43LTMuNiAxOC02LjggMjktMzIuMSAyMi45LTc2LjcgMzIuOS0xMTQuMyA3LjJ6bTI1Ny40LTExLjVjLS45IDE2LjgtNDEuMiAxOS45LTYzLjIgNDYuNS0xMy4yIDE1LjctMjkuNCAyNC40LTQzLjYgMjUuNXMtMjYuNS00LjgtMzMuNy0xOS4zYy00LjctMTEuMS0yLjQtMjMuMSAxLjEtMzYuMyAzLjctMTQuMiA5LjItMjguOCA5LjktNDAuNi44LTE1LjIgMS43LTI4LjUgNC4yLTM4LjcgMi42LTEwLjMgNi42LTE3LjIgMTMuNy0yMS4xLjMtLjIuNy0uMyAxLS41LjggMTMuMiA3LjMgMjYuNiAxOC44IDI5LjUgMTIuNiAzLjMgMzAuNy03LjUgMzguNC0xNi4zIDktLjMgMTUuNy0uOSAyMi42IDUuMSA5LjkgOC41IDcuMSAzMC4zIDE3LjEgNDEuNiAxMC42IDExLjYgMTQgMTkuNSAxMy43IDI0LjZ6TTE3My4zIDE0OC43YzIgMS45IDQuNyA0LjUgOCA3LjEgNi42IDUuMiAxNS44IDEwLjYgMjcuMyAxMC42IDExLjYgMCAyMi41LTUuOSAzMS44LTEwLjggNC45LTIuNiAxMC45LTcgMTQuOC0xMC40czUuOS02LjMgMy4xLTYuNi0yLjYgMi42LTYgNS4xYy00LjQgMy4yLTkuNyA3LjQtMTMuOSA5LjgtNy40IDQuMi0xOS41IDEwLjItMjkuOSAxMC4ycy0xOC43LTQuOC0yNC45LTkuN2MtMy4xLTIuNS01LjctNS03LjctNi45LTEuNS0xLjQtMS45LTQuNi00LjMtNC45LTEuNC0uMS0xLjggMy43IDEuNyA2LjV6Ii8+PC9zdmc+")
}
span.fas-icon_xbox::before {
    content: ' ';
    margin: 0px -1px -4px 0px;
    height: 16px;
    width: 16px;	
    display: inline-block;
    background-repeat:no-repeat;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDUuMTUuNCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0zNjkuOSAzMTguMmM0NC4zIDU0LjMgNjQuNyA5OC44IDU0LjQgMTE4LjctNy45IDE1LjEtNTYuNyA0NC42LTkyLjYgNTUuOS0yOS42IDkuMy02OC40IDEzLjMtMTAwLjQgMTAuMi0zOC4yLTMuNy03Ni45LTE3LjQtMTEwLjEtMzlDOTMuMyA0NDUuOCA4NyA0MzguMyA4NyA0MjMuNGMwLTI5LjkgMzIuOS04Mi4zIDg5LjItMTQyLjEgMzItMzMuOSA3Ni41LTczLjcgODEuNC03Mi42IDkuNCAyLjEgODQuMyA3NS4xIDExMi4zIDEwOS41ek0xODguNiAxNDMuOGMtMjkuNy0yNi45LTU4LjEtNTMuOS04Ni40LTYzLjQtMTUuMi01LjEtMTYuMy00LjgtMjguNyA4LjEtMjkuMiAzMC40LTUzLjUgNzkuNy02MC4zIDEyMi40LTUuNCAzNC4yLTYuMSA0My44LTQuMiA2MC41IDUuNiA1MC41IDE3LjMgODUuNCA0MC41IDEyMC45IDkuNSAxNC42IDEyLjEgMTcuMyA5LjMgOS45LTQuMi0xMS0uMy0zNy41IDkuNS02NCAxNC4zLTM5IDUzLjktMTEyLjkgMTIwLjMtMTk0LjR6bTMxMS42IDYzLjVDNDgzLjMgMTI3LjMgNDMyLjcgNzcgNDI1LjYgNzdjLTcuMyAwLTI0LjIgNi41LTM2IDEzLjktMjMuMyAxNC41LTQxIDMxLjQtNjQuMyA1Mi44QzM2Ny43IDE5NyA0MjcuNSAyODMuMSA0NDguMiAzNDZjNi44IDIwLjcgOS43IDQxLjEgNy40IDUyLjMtMS43IDguNS0xLjcgOC41IDEuNCA0LjYgNi4xLTcuNyAxOS45LTMxLjMgMjUuNC00My41IDcuNC0xNi4yIDE1LTQwLjIgMTguNi01OC43IDQuMy0yMi41IDMuOS03MC44LS44LTkzLjR6TTE0MS4zIDQzQzE4OSA0MC41IDI1MSA3Ny41IDI1NS42IDc4LjRjLjcuMSAxMC40LTQuMiAyMS42LTkuNyA2My45LTMxLjEgOTQtMjUuOCAxMDcuNC0yNS4yLTYzLjktMzkuMy0xNTIuNy01MC0yMzMuOS0xMS43LTIzLjQgMTEuMS0yNCAxMS45LTkuNCAxMS4yeiIvPjwvc3ZnPg==")
}
span.fas-icon_playstation::before {
    content: ' ';
    margin: 0px -1px -4px 0px;
    height: 16px;
    width: 16px;
    display: inline-block;
    background-repeat:no-repeat;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDUuMTUuNCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik01NzAuOSAzNzIuM2MtMTEuMyAxNC4yLTM4LjggMjQuMy0zOC44IDI0LjNMMzI3IDQ3MC4ydi01NC4zbDE1MC45LTUzLjhjMTcuMS02LjEgMTkuOC0xNC44IDUuOC0xOS40LTEzLjktNC42LTM5LjEtMy4zLTU2LjIgMi45TDMyNyAzODEuMXYtNTYuNGMyMy4yLTcuOCA0Ny4xLTEzLjYgNzUuNy0xNi44IDQwLjktNC41IDkwLjkuNiAxMzAuMiAxNS41IDQ0LjIgMTQgNDkuMiAzNC43IDM4IDQ4Ljl6bS0yMjQuNC05Mi41di0xMzljMC0xNi4zLTMtMzEuMy0xOC4zLTM1LjYtMTEuNy0zLjgtMTkgNy4xLTE5IDIzLjR2MzQ3LjlsLTkzLjgtMjkuOFYzMmMzOS45IDcuNCA5OCAyNC45IDEyOS4yIDM1LjRDNDI0LjEgOTQuNyA0NTEgMTI4LjcgNDUxIDIwNS4yYzAgNzQuNS00NiAxMDIuOC0xMDQuNSA3NC42ek00My4yIDQxMC4yYy00NS40LTEyLjgtNTMtMzkuNS0zMi4zLTU0LjggMTkuMS0xNC4yIDUxLjctMjQuOSA1MS43LTI0LjlsMTM0LjUtNDcuOHY1NC41bC05Ni44IDM0LjZjLTE3LjEgNi4xLTE5LjcgMTQuOC01LjggMTkuNCAxMy45IDQuNiAzOS4xIDMuMyA1Ni4yLTIuOWw0Ni40LTE2Ljl2NDguOGMtNTEuNiA5LjMtMTAxLjQgNy4zLTE1My45LTEweiIvPjwvc3ZnPg==")
}


        /* ## TAB-NAVIGATION ## */
.archive_tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 20px;
    transition: border-color 0.3s;
}

.archive_tab {
    padding: 15px 20px;
    cursor: pointer;
    background: none;
    border: none;
    color: #8c8c8c;
    font-size: 1rem;
    font-weight: 600;
    position: relative;
    transition: color 0.3s ease;
    flex: 1;
    text-align: center;
}
.archive_tab:hover { color: #000; }
.archive_tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #b121ff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
}
.archive_tab.active { color: #b121ff; }
.archive_tab.active::after { transform: scaleX(1); }

.tab-pane { display: none; animation: fadeIn 0.5s ease; }
.tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.archive-headnav {
    width: auto;
    clear: both;
    width: 100%;
    height: 66px;
    clear: both;
    background-color: #DCE9F4;
    border-radius: 12px;
    margin-bottom: 25px;
}
.archive-headnav .archive-headnav-wrap {
    display: flex;
    align-items: center;      /* vertikale Zentrierung */
    justify-content: space-between; /* verteilt Logo – Navi – Suche */
    padding: 15px;
    margin-top: 10px;
    border-radius: 12px;
}
.archive-headnav .archive-headnav-wrap .archive-logo {
    width: 150px;
    float: left;
    background-color: #4487f0;
    border-radius: 6px;
    color: #FFF;
    font-size: 18px;
    padding: 4px;
    text-align: center;
    font-weight:300;
}
.archive-headnav .archive-headnav-wrap .archive-navi {
    flex: 1;                 /* nimmt den freien Platz ein */
    text-align: center;      /* Inhalt mittig */
    padding: 4px;
    color:#217fff;
}
.archive-headnav .archive-headnav-wrap .archive-search {
    width: auto;
}
#searchfield {
    width: 200px;
    border-radius: 6px 0 0 6px;
    border: 1px solid #ccc;
    background-color: #FFF;
}
#searchbutton, #searchfield {
    -webkit-appearance: none;
    padding: 8px 5px;
    font-family: "Open Sans";
    font-size: 16px;
    outline-width: 0;
}
#searchbutton {
    color: transparent;
    background-size: 60%;
    background-position: 7px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJzZWFyY2giIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1zZWFyY2ggZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01MDUgNDQyLjdMNDA1LjMgMzQzYy00LjUtNC41LTEwLjYtNy0xNy03SDM3MmMyNy42LTM1LjMgNDQtNzkuNyA0NC0xMjhDNDE2IDkzLjEgMzIyLjkgMCAyMDggMFMwIDkzLjEgMCAyMDhzOTMuMSAyMDggMjA4IDIwOGM0OC4zIDAgOTIuNy0xNi40IDEyOC00NHYxNi4zYzAgNi40IDIuNSAxMi41IDcgMTdsOTkuNyA5OS43YzkuNCA5LjQgMjQuNiA5LjQgMzMuOSAwbDI4LjMtMjguM2M5LjQtOS40IDkuNC0yNC42LjEtMzR6TTIwOCAzMzZjLTcwLjcgMC0xMjgtNTcuMi0xMjgtMTI4IDAtNzAuNyA1Ny4yLTEyOCAxMjgtMTI4IDcwLjcgMCAxMjggNTcuMiAxMjggMTI4IDAgNzAuNy01Ny4yIDEyOC0xMjggMTI4eiI+PC9wYXRoPjwvc3ZnPg==);
    background-repeat: no-repeat;
    width: 35px;
    border: 1px solid #CCC;
    border-radius: 0px 6px 6px 0px;
    border-left: 0px;
    background-color: #FFF;
}
a.a4logolink {
    color:#FFF;
    text-decoration-line: none;
}
a.a4logolink:hover {
    color:#FFF;
    text-decoration-line: none;
}
a.a4anlink {
    color:#217fff;
    text-decoration-line: none;
}
a.a4anlink:hover {
    color:#4487f0;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}
a.newspostlink {
    color:#4487f0;
    text-decoration-line: none;
}
a.newspostlink:hover {
    color:#4487f0;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}
@media (max-width: 1100px) {
    .archive-headnav .archive-headnav-wrap .archive-navi {
        display:none;
    }
}