body {
    background-color: #f5f6f8;
}

a {
    color: #710302;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #8d3534;
}

a:active {
    color: #5a0201;
}

.login-header {
    height: 250px;
    background: #710302;
}

.dashboard-header {
    height: 165px;
    background: linear-gradient(to bottom, #710302, #7F1C1B);
}

.infernal_red {
    color: #710302;
}

.infernal_red_light {
    color: #c69999;
}

.infernal_black {
    color: #212529;
}

.infernal_black_background {
    background-color: #212529;
}

.infernal_red_background {
    background-color: #710302;
}

.infernal_background_light {
    background-color: #e8e9e9;
}

.infernal_red_background_light {
    background-color: #e2cccc;
}

/* MDB Änderungen Start */

@media (min-width: 1400px) {
    .with-sidebar main,
    .with-sidebar header,
    .with-sidebar #main-navbar {
        padding-left: 240px;
    }
}

/* DataTable Ladeanimation in Infernal Red */
div.dt-processing > div:last-child > div {
    background: #710302 !important;
}

.sidenav-primary .sidenav-item .sidenav-link:hover {
    background-color: #f0e5e5;
}

.sidenav-primary .sidenav-link:active, .sidenav-primary .sidenav-link:focus {
    background-color: #f7f2f2;
}

.form-check-input[type=checkbox]:checked {
    background-color: #c69999;
}

.form-check-input:checked {
    border-color: #710302;
}

.form-check-input[type=checkbox]:checked:focus {
    background-color: #c69999;
}

.form-check-input:checked:focus {
    border-color: #710302;
}

.form-check-input[type=radio]:checked:after {
    border-color: #710302;
    background-color: #710302;
}

.form-outline {
    --mdb-form-outline-select-notch-border-color: #710302;
}
.select-input.focused, .form-outline .form-control.select-input:focus {
    border-color: #710302;
}

.select-option.selected.active {
    background-color: #f0e5e5;
}

.select-option.selected:hover:not(.disabled) {
    background-color: #e2cccc;
}

.popconfirm-modal .btn-secondary {
    background-color: #f0e5e5;
    color: #710302;
}

.select-wrapper {
    --mdb-form-outline-select-label-color: #710302;
}

.btn-infernal {
    --mdb-btn-bg: #710302;
    --mdb-btn-color: #fff;
    --mdb-btn-box-shadow: 0 4px 9px -4px #650201;
    --mdb-btn-hover-bg: #7f1c1b;
    --mdb-btn-hover-color: #fff;
    --mdb-btn-focus-bg: #650201;
    --mdb-btn-focus-color: #fff;
    --mdb-btn-active-bg: #5a0201;
    --mdb-btn-active-color: #fff;
    --mdb-btn-box-shadow-state: 0 8px 9px -4px rgba(56, 107, 192, 0.3), 0 4px 18px 0 rgba(56, 107, 192, 0.2);
}

.btn-infernal-light {
    --mdb-btn-bg: #f0e5e5;
    --mdb-btn-color: #710302;
    --mdb-btn-box-shadow: 0 4px 9px -4px rgba(113, 3, 2, 0.3);
    --mdb-btn-hover-bg: #e2cccc;
    --mdb-btn-hover-color: #710302;
    --mdb-btn-focus-bg: #d4b3b3;
    --mdb-btn-focus-color: #710302;
    --mdb-btn-active-bg: #c69999;
    --mdb-btn-active-color: #710302;
    --mdb-btn-box-shadow-state: 0 8px 9px -4px rgba(113, 3, 2, 0.3), 0 4px 18px 0 rgba(113, 3, 2, 0.2);
}

.btn-link-infernal {
    --mdb-btn-font-weight: 500;
    --mdb-btn-color: #710302;
    --mdb-btn-hover-color: #7f1c1b;
    --mdb-btn-hover-bg: hsl(0, 0%, 96%);
    --mdb-btn-focus-color: #710302;
    --mdb-btn-active-color: #710302;
    --mdb-btn-disabled-color: #9e9e9e;
    --mdb-btn-box-shadow: none;
    text-decoration: none;
    box-shadow: var(--mdb-btn-box-shadow);
}

:root {
    --mdb-datepicker-toggle-focus-color: #710302;
    --mdb-input-focus-border-color: #710302;
    --mdb-input-focus-label-color: #710302;
    --mdb-picker-header-bg: #710302;
    --light-background: #f8f9fa;
    --light-surface: #ffffff;
    --light-surface-lighter: #f0f0f0;
    --light-surface-darker: #e9ecef;
    --light-text: #212529;
    --light-text-muted: #6c757d;
    --light-divider: #dee2e6;
    --light-shadow: rgba(0, 0, 0, 0.15);
    
    /* MDB Variablen für Light Mode */
    --mdb-modal-content-color: var(--light-text);
    --mdb-modal-content-bg: var(--light-surface);
    --mdb-modal-content-border-color: var(--light-divider);
    --mdb-modal-header-border-color: var(--light-divider);
    --mdb-modal-footer-border-color: var(--light-divider);
    --mdb-modal-backdrop-bg: #000;
    --mdb-modal-backdrop-opacity: 0.5;
}

.datepicker-cell.selected .datepicker-cell-content {
    background-color: #b38080;
}

.tooltip {
    z-index: 1070;
}

.accordion-button:not(.collapsed) {
    color: #710302;
    background-color: #e2cccc;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23710302' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

/* Anpassungen für die Button-Gruppe */
.input-group .btn-infernal {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

/* Anpassung der Breite des Buttons */
.input-group {
    width: 100%;
}

.input-group .form-outline {
    flex: 1;
    width: auto;
}

.input-group .btn-infernal {
    width: auto;
    white-space: nowrap;
}

.input-group>.form-control:focus {
    transition: all .2s linear;
    border-color: #710302;
    outline: 0;
    box-shadow: inset 0 0 0 1px #710302;
}

.select-option.selected {
    background-color: #f0e5e5;
}

/* MDB Änderungen Ende */

/* Übergangseffekt für Icons in den Passwortanforderungen */
#password-requirements i {
    transition: all 0.3s ease;
  }

/* Icons */
.fac-steam {
    color: #2a475e;
    background: -webkit-linear-gradient(rgba(27, 40, 56, 1) 0%, rgba(42, 71, 94, 1) 30%, rgba(102, 192, 244, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.25em;
    transition: transform 0.3s ease;
}

.fac-steam:hover {
    transform: scale(1.12);
}

.fac-battlenet {
    color: #0091D8;
    font-size: 1.25em;
    transition: transform 0.3s ease;
}

.fac-battlenet:hover {
    transform: scale(1.12);
}

.fac-facebook {
    color: #3b5998;
    font-size: 1.25em;
    transition: transform 0.3s ease;
}

.fac-facebook:hover {
    transform: scale(1.12);
}

.fac-twitch {
    color: #6441a5;
    font-size: 1.25em;
    transition: transform 0.3s ease;
}

.fac-twitch:hover {
    transform: scale(1.12);
}

.fac-instagram {
    color: #F56040;
    background: -webkit-linear-gradient(315deg, rgba(64,93,230,1) 0%, rgba(253,29,29,1) 50%, rgba(255,220,128,1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.25em;
    transition: transform 0.3s ease;
}

.fac-instagram:hover {
    transform: scale(1.12);
}

.fac-youtube {
    color: #FF0000;
    font-size: 1.25em;
    transition: transform 0.3s ease;
}

.fac-youtube:hover {
    transform: scale(1.12);
}

.fac-discord {
    color: #5865F2;
    font-size: 1.25em;
    transition: transform 0.3s ease;
}

.fac-discord:hover {
    transform: scale(1.12);
}

.fac-whatsapp {
    color: #25D366;
    font-size: 1.25em;
    transition: transform 0.3s ease;
}

.fac-whatsapp:hover {
    transform: scale(1.12);
}

.profile-image-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.profile-image-container img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 50%;
}

.profile-image-container .upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.profile-image-container:hover .upload-overlay {
    display: flex;
}

.profile-image-container.dragover {
    border: 2px dashed #007bff;
}

/* Container für den Cropper */
#cropperContainer {
    height: 400px; /* Anpassbare Höhe */
}

/* Benachrichtigungen Dropdown */
.notifications-dropdown {
    width: 500px; /* oder die gewünschte Breite */
    max-height: 500px; /* oder die gewünschte maximale Höhe */
    overflow-y: auto;
}

.notifications-dropdown .list-group-item {
    transition: background-color 0.3s;
}

.notifications-dropdown .list-group-item:hover {
    background-color: #eeeeee;
}

.notifications-dropdown .archive-notification {
    padding: 0;
}

/* Platform Icons */

.platform-badge {
    transition: transform 0.2s ease;
}

.platform-badge:hover {
    transform: scale(1.05);
}

.fac-green {
    color: #17c671;
}

.fac-red {
    color: #c4183c;
}

.game-select-option {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    margin: 2px;
}

/* Für bessere Sichtbarkeit der Icons im Modal */
.select-option-icon {
    background: rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
    padding: 3px !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.2) !important;
}

/* Zusätzliche Anpassungen für das Select */
.select-dropdown .select-option-icon {
    margin-right: 8px;
}

/* Hover-Effekt für bessere Sichtbarkeit */
.select-dropdown .select-option:hover .select-option-icon {
    background: rgba(0,0,0,0.15) !important;
}

.select-option-secondary {
    margin-top: 2px;
}

.select-option-secondary .badge {
    font-size: 0.7em;
    padding: 0.35em 0.65em;
    margin-right: 3px;
}

#darkModeToggle {
    padding: 0;
    color: #1f2b31;
    transition: transform 0.3s ease;
}

#darkModeToggle:hover {
    transform: scale(1.1);
}

/* Dark Mode Switch Styles */
.form-switch {
    display: flex;
    align-items: center;
    padding-left: 0;
}

.form-switch .form-check-input {
    cursor: pointer;
    width: 40px;
    margin: 0 0.5rem;
    /* Stelle sicher, dass der gesamte Switch klickbar ist */
    margin-top: 0;
    position: relative;
}

.form-switch .form-check-input:focus {
    border-color: rgba(0, 0, 0, 0.25);
    outline: 0;
    box-shadow: none;
}

.form-switch .form-check-input:checked {
    background-color: #c69999;
    border-color: #710302;
}

.form-switch .form-check-input:checked:focus {
    background-color: #c69999;
}

.form-switch .form-check-input:checked[type=checkbox]:after {
    background-color: #710302;
}

.form-switch .form-check-input:checked:focus:before {
    box-shadow: 3px -1px 0px 13px #d4b3b3;
}

.form-switch i {
    color: #1f2b31;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Sidenav Styles für Light Mode */
#main-sidenav .sidenav-link.active {
    color: #710302 !important;
    background-color: #f0e5e5 !important;
    border-left: 4px solid #710302;
}

/* Spezieller Style für Hauptmenü wenn nur Untermenü aktiv ist */
#main-sidenav .has-active-submenu {
    color: #710302 !important;
    background-color: #f8f1f1 !important;
    border-left: none;
}

/* Aktives Untermenü-Item */
#main-sidenav .sidenav-collapse .sidenav-link.active {
    color: #710302 !important;
    background-color: #f0e5e5 !important;
    border-left: 4px solid #710302;
}

/* Icon rot einfärben wenn Untermenü aktiv */
#main-sidenav .has-active-submenu i.fa-fw {
    color: #710302 !important;
}

/* Hover-Effekt für Menüpunkte */
#main-sidenav .sidenav-link:hover {
    background-color: #f8f1f1;
}

.form-check:not(.form-switch) .form-check-input:checked:focus::before,
.form-check:not(.form-switch) .form-check-input:checked:focus:before {
    box-shadow: 0px 0px 0px 13px rgba(113, 3, 2, 0.25) !important;
    transform: scale(1);
    transition: box-shadow .2s, transform .2s;
}

/* Pagination im Light Mode */
.page-link.active, .active>.page-link {
    color: #fff !important;
    background-color: #c69999 !important;
    border-color: #c69999 !important;
}

.page-link {
    color: #710302;
    padding: 0.5rem 0.75rem;
    min-width: 36px;
    text-align: center;
}

.page-link i {
    font-size: 0.9rem;
    line-height: 1.25;
}

/* Erste/Letzte Seite Icons etwas kleiner */
.page-link i.fa-angles-left,
.page-link i.fa-angles-right {
    font-size: 0.8rem;
}

.page-link:hover {
    color: #7F1C1B;
    background-color: #f0e5e5;
}

.page-link:focus {
    color: #710302;
    background-color: #e2cccc;
    box-shadow: 0 0 0 0.25rem rgba(198, 153, 153, 0.25);
}

/* DataTable Längenauswahl Styling */
.form-select-sm {
    padding: .32rem 2rem .32rem .75rem;
    font-size: 0.9rem;
    border-radius: 0.25rem;
}

.form-select {
    --mdb-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234f4f4f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    display: block;
    width: 100%;
    min-height: auto;
    padding: .32rem 2rem .32rem .75rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--mdb-surface-color);
    appearance: none;
    background-color: transparent;
    background-image: var(--mdb-form-select-bg-img), var(--mdb-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #bdbdbd;
    border-radius: 0.25rem;
    transition: all .2s linear;
}

.form-select:focus {
    border-color: #710302;
    outline: 0;
    box-shadow: inset 0px 0px 0px 1px #710302;
}

.form-select {
    -webkit-tap-highlight-color: transparent;
}

div.dt-container div.dt-length label {
    font-weight: 300;
    font-size: 0.9rem;
}

.dt-info {
    font-size: 0.9rem;
    font-weight: 300;
}

/* Styling für das DataTable Length Select */
.dt-length {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.dt-length .form-outline {
    margin: 0 !important;
    min-height: unset !important;
    flex-shrink: 0 !important;
}

.dt-length .form-label {
    white-space: nowrap !important;
    margin-bottom: 0 !important;
}

/* Entfernt den Sucheingabe-Style */
.dt-length .select-filter {
    display: none !important;
}

/* Korrektur für das Select-Dropdown */
.dt-length .select-wrapper {
    min-height: unset !important;
}

/* Basis-Styling für das DataTable Length Select */
.dt-length .form-select,
.dt-length .select-input,
.dt-length .form-outline .form-control.select-input {
    border: 1px solid #BDBDBD !important;
    border-radius: 0.25rem !important;
    transition: all .2s linear !important;
    color: rgb(79, 79, 79) !important;
}

/* Styling nur für den Fokus-Zustand */
.dt-length .select-input:focus,
.dt-length .form-outline .form-control.select-input:focus {
    border: 1px solid #710302 !important;
    border-radius: 0.25rem !important;
    box-shadow: inset 0 0 0 1px #710302 !important;
    outline: none !important;
}

/* Entfernen von unerwünschten Borders/Outlines */
.dt-length .form-outline .form-control.select-input:focus-within,
.dt-length .form-outline .form-control.select-input:focus-visible {
    outline: none !important;
    border: 1px solid #710302 !important;
}

/* Korrektur für das Select-Dropdown */
.dt-length .select-wrapper {
    min-height: unset !important;
}

/* Entfernen der Notch-Effekte nur für das DataTable Select */
.dt-length .form-outline .form-notch {
    display: none !important;
}

/* Entfernen der active/focused Klassen-Styles */
.dt-length .select-input.active,
.dt-length .select-input.focused,
.dt-length .form-outline .form-control.select-input.active {
    border: 1px solid #BDBDBD !important;
    box-shadow: none !important;
}

.table.dataTable thead th {
    background-color: #ffffff !important;
}

table.dataTable thead>tr>th.dt-orderable-asc:hover,
table.dataTable thead>tr>th.dt-orderable-desc:hover,
table.dataTable thead>tr>td.dt-orderable-asc:hover,
table.dataTable thead>tr>td.dt-orderable-desc:hover {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Umfassende Regeln für Paginierungs-Buttons */
.dt-paging-button,
.dt-paging-button *,
.dt-paging-button::before,
.dt-paging-button::after {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}

/* Spezifische Zustände */
.dt-paging-button:hover,
.dt-paging-button:focus,
.dt-paging-button:active,
.dt-paging-button.active {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}

/* Ripple-Effekt Überschreibung */
.dt-paging-button .ripple,
.dt-paging-button .ripple-surface {
    display: none !important;
}

/* Basis-Styling für die Pfeile */
.dt-paging-button i {
    color: #6c757d !important;  /* Dunkleres Grau für besseren Kontrast im Light Mode */
    transition: transform 0.2s ease, color 0.2s ease !important;
}

/* Hover-Effekt mit Vergrößerung */
.dt-paging-button:not(.disabled):hover i {
    color: #710302 !important;  /* Infernal Red beim Hover */
    transform: scale(1.2) !important;
}

/* Deaktivierte Pfeile */
.dt-paging-button.disabled i {
    color: #bdbdbd !important;  /* Helleres Grau für deaktivierte Pfeile */
    transform: none !important;
}

.mb-4-5 {
    margin-bottom: 2.2rem !important;
}

/* Hellerer Helper-Text */
.form-outline .form-helper {
    width: 100%;
    position: absolute;
    font-size: .875em;
    color: #bdbdbd;  /* Noch helleres Grau statt #9e9e9e */
}

/* Light Theme Timepicker */
.timepicker-wrapper {
    --mdb-timepicker-head-bg: #710302;
    --mdb-timepicker-button-color: #710302;
    --mdb-timepicker-button-hover-bg: rgba(113, 3, 2, 0.1);
    --mdb-timepicker-button-focus-bg: rgba(113, 3, 2, 0.2);
    --mdb-timepicker-current-color: #fff;
    --mdb-timepicker-clock-bg: #f0f0f0;
    --mdb-timepicker-time-tips-inner-active-bg: #710302;
    --mdb-timepicker-time-tips-inner-active-color: #fff;
    --mdb-timepicker-hand-pointer-bg: #710302;
    --mdb-timepicker-circle-bg: #710302;
    --mdb-timepicker-footer-bg: #fff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.timepicker-toggle-button {
    color: #710302;
}

.timepicker-toggle-button:hover {
    color: #7F1C1B;
}

.timepicker-modal .btn-close {
    color: #710302;
}

/* Timepicker Circle Styles */
.timepicker-circle {
    border: 14px solid #710302;
}

/* CKEditor Media Size Styles */
.media {
    margin: 1em 0;
}

.media.media-size-small {
    max-width: 400px;
    margin: 1em auto;
}

.media.media-size-medium {
    max-width: 720px;
    margin: 1em auto;
}

.media.media-size-large {
    max-width: 1024px;
    margin: 1em auto;
}

/* Nested Cards - Light Mode */
.card .card {
    background-color: #f5f5f5;  /* Mittlerer Grauton zwischen #f8f9fa und #f0f0f0 */
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);  /* Subtiler Schatten */
}

/* Nested Cards 2 cards - Light Mode */
.card .card .card {
    background-color: var(--mdb-card-bg);  /* Mittlerer Grauton zwischen #f8f9fa und #f0f0f0 */
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);  /* Subtiler Schatten */
}

/* Nested Cards 3 cards - Light Mode */
.card .card .card .card {
    background-color: #f7f0f0;  /* Leicht rötlich eingefärbter Hintergrund */
    border: 1px solid #e9d9d9;  /* Leicht rötlicher Border */
    box-shadow: 0 1px 4px rgba(113, 3, 2, 0.05);  /* Subtiler rötlicher Schatten */
}

/* Weiße Eingabefelder innerhalb von verschachtelten Karten - mit Ausnahme von Checkboxen und Radiobuttons */
.card .card input:not([type="checkbox"]):not([type="radio"]):not(:disabled),
.card .card select:not(:disabled),
.card .card textarea:not(:disabled),
.card .card .form-control:not([type="checkbox"]):not([type="radio"]):not(:disabled),
.card .card .form-select:not(:disabled) {
    background-color: #ffffff !important;
}

/* Spezifische Regel für Checkboxen innerhalb von Cards */
.card .card input[type="checkbox"]:checked {
    background-color: #c69999 !important;
    border-color: #710302 !important;
}

/* Card Header/Footer Borders - Light Mode */
.card .card-header {
    border-bottom: 1px solid #dee2e6;  /* Dunklere Linie für den Header */
}

.card .card-footer {
    border-top: 1px solid #dee2e6;  /* Dunklere Linie für den Footer */
}

/* Neue Badge Klasse für Sidenav */
.badge-sidenav {
    position: relative;
    font-size: 0.6rem;
    padding: 0.35em 0.65em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
}

/* Container Ausrichtung */
.sidenav-link .col-md-3 {
    display: flex;
    justify-content: flex-end;
    padding-right: 1rem;
}

/* Game Icon Hover Effect */
.game-icon {
    transition: transform 0.2s ease;
}

.game-icon:hover {
    transform: scale(1.1);
}

/* Light Mode Logo Optimierung */
#ichclan-logo {
    transform: translate3d(0, 0, 0); /* Präzisere GPU-Beschleunigung */
    filter: brightness(0);
    contain: strict; /* Strikte Containment für bessere Rendering-Performance */
    paint-order: normal;
    transform-style: preserve-3d;
    perspective: 1000px;
    isolation: isolate; /* Erstellt einen neuen Stacking Context */
}

/* Vermeiden von Layout-Shifts */
.navbar-brand {
    contain: layout size;
    contain-intrinsic-size: 107px;
}

/* Preload-Optimierung */
@media (prefers-color-scheme: light) {
    #ichclan-logo {
        content-visibility: auto;
        contain-intrinsic-size: 107px;
    }
}

/* Tabellen-Optimierungen */
table {
    content-visibility: auto;
    contain: layout style paint;
    contain-intrinsic-size: 400px; /* Geschätzte Durchschnittshöhe */
    will-change: transform; /* GPU-Beschleunigung */
    backface-visibility: hidden;
}

/* Optimierung für Tabellenzeilen */
tr {
    content-visibility: auto;
    contain: layout style;
    contain-intrinsic-size: 20px; /* Durchschnittliche Zeilenhöhe */
}

/* Optimierung für Tabellenzellen */
td, th {
    contain: layout style paint;
}

/* Viewport-basiertes Laden für große Tabellen */
@media screen and (min-height: 800px) {
    table {
        content-visibility: auto;
        contain-intrinsic-size: 800px;
    }
}

/* Nav Tabs Light Mode */
.nav-tabs {
    --mdb-nav-tabs-link-active-color: #710302;
    --mdb-nav-tabs-link-active-border-color: #710302 #710302;
    border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-link {
    color: #4f4f4f;
    transition: all 0.2s ease-in-out;
}

.nav-tabs .nav-link:hover {
    color: #710302;
    border-color: #e2cccc #e2cccc #dee2e6;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #710302;
    background-color: #fff;
    border-color: #710302 #710302;
}

/* Korrektur für Button-Gruppe mit eingewickelten Buttons */
.btn-group > span:not(:first-child) .btn,
.btn-group > button:not(:first-child),
.btn-group > a:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > span:not(:last-child) .btn,
.btn-group > button:not(:last-child),
.btn-group > a:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Anpassungen für deaktivierte Buttons im Light-Mode */
/* Allgemeine Regel für deaktivierte Buttons */
.btn:disabled, 
.btn.disabled, 
fieldset:disabled .btn {
  opacity: 0.65;
  box-shadow: none !important;
}

/* Spezifische Regel für deaktivierte Danger-Buttons */
.btn-danger:disabled,
.btn-danger.disabled,
fieldset:disabled .btn-danger,
span[data-mdb-tooltip-init] .btn-danger[disabled] {
  color: #fff;
  background-color: #dc4c64;
  border-color: #dc4c64;
  opacity: 0.65;
  box-shadow: none !important;
}

/* Spezifische Regel für deaktivierte Success-Buttons */
.btn-success:disabled,
.btn-success.disabled,
fieldset:disabled .btn-success,
span[data-mdb-tooltip-init] .btn-success[disabled] {
  color: #fff;
  background-color: #14a44d;
  border-color: #14a44d;
  opacity: 0.65;
  box-shadow: none !important;
}

/* Spezifische Regel für deaktivierte Info-Buttons (Access) */
.btn-info:disabled,
.btn-info.disabled,
fieldset:disabled .btn-info,
span[data-mdb-tooltip-init] .btn-info[disabled] {
  color: #fff;
  background-color: #54B4D3;
  border-color: #54B4D3;
  opacity: 0.65;
  box-shadow: none !important;
}

/* Spezifische Regel für deaktivierte Infernal-Light-Buttons */
.btn-infernal-light:disabled,
.btn-infernal-light.disabled,
fieldset:disabled .btn-infernal-light,
span[data-mdb-tooltip-init] .btn-infernal-light[disabled] {
  color: #710302 !important;
  background-color: #f0e5e5 !important;
  border-color: #f0e5e5 !important;
  opacity: 0.65 !important;
  box-shadow: none !important;
}

/* Modal-Anpassungen für Light Mode */
.modal-content {
    --mdb-modal-color: var(--light-text);
    --mdb-modal-bg: var(--light-surface);
    --mdb-modal-border-color: var(--light-divider);
    --mdb-modal-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    
    background-color: var(--light-surface);
    color: var(--light-text);
    border-color: var(--light-divider);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.modal-header {
    border-bottom-color: var(--light-divider);
    background-color: var(--light-surface-darker);
    color: var(--light-text);
}

.modal-header .btn-close {
    color: var(--light-text);
    text-shadow: none;
    opacity: 0.5;
}

.modal-header .btn-close:hover {
    opacity: 0.75;
}

.modal-title {
    color: var(--light-text);
    font-weight: 500;
}

.modal-footer {
    border-top-color: var(--light-divider);
    background-color: var(--light-surface-darker);
}

.modal-backdrop {
    --mdb-backdrop-opacity: 0.5;
    --mdb-backdrop-bg: #000;
    background-color: #000;
    opacity: 0.5;
}

/* Spezielle Modal-Varianten */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
}

.modal.fade.top .modal-dialog {
    transform: translate3d(0, -25%, 0);
}

.modal.fade.right .modal-dialog {
    transform: translate3d(25%, 0, 0);
}

.modal.fade.bottom .modal-dialog {
    transform: translate3d(0, 25%, 0);
}

.modal.fade.left .modal-dialog {
    transform: translate3d(-25%, 0, 0);
}

.modal.show .modal-dialog {
    transform: none !important;
}

/* Modal-Größen */
.modal-sm {
    --mdb-modal-width: 300px;
    max-width: 300px;
}

.modal-lg {
    --mdb-modal-width: 800px;
    max-width: 800px;
}

.modal-xl {
    --mdb-modal-width: 1140px;
    max-width: 1140px;
}

/* Seitenmodals */
.modal-side .modal-dialog {
    position: fixed;
    margin: 0;
    height: 100%;
    right: 10px;
}

.modal-side .modal-content {
    height: 100%;
}

/* Anpassung für Modals mit Infernal-Design */
.modal-content .btn-infernal {
    --mdb-btn-bg: #710302;
    --mdb-btn-color: #fff;
    --mdb-btn-hover-bg: #7f1c1b;
}

.modal-content .btn-infernal-light {
    --mdb-btn-bg: #f0e5e5;
    --mdb-btn-color: #710302;
    --mdb-btn-hover-bg: #e2cccc;
}

/* Scrollbar im Modal anpassen */
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--light-divider) var(--light-surface);
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: var(--light-surface);
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: var(--light-divider);
    border-radius: 4px;
}

/* Spezifische Anpassungen für Games-Modal */
[id^="gamesModal"] .modal-content {
    background-color: var(--light-surface);
    background-image: linear-gradient(to bottom, rgba(113, 3, 2, 0.02), transparent 200px);
}

[id^="gamesModal"] .modal-header {
    background-color: var(--light-surface-darker);
    border-bottom: 1px solid var(--light-divider);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

[id^="gamesModal"] .modal-footer {
    background-color: var(--light-surface-darker);
    border-top: 1px solid var(--light-divider);
}

/* Verbesserte Card-Darstellung im Games-Modal */
[id^="gamesModal"] .card {
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%; /* Gleiche Höhe für alle Karten */
}

[id^="gamesModal"] .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    border: none;
}

[id^="gamesModal"] .card-body {
    padding: 1rem;
}

/* Grid-Layout für die Spielkarten */
[id^="gamesModal"] .row {
    margin-left: -10px;
    margin-right: -10px;
}

[id^="gamesModal"] .col-md-4,
[id^="gamesModal"] .col-lg-3 {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

/* Hover-Effekt für Spielbilder */
[id^="gamesModal"] .card-img-top {
    border-bottom: 1px solid var(--light-divider);
    transition: all 0.3s ease;
    filter: brightness(1);
}

[id^="gamesModal"] .card:hover .card-img-top {
    filter: brightness(1.05);
}

[id^="gamesModal"] .card-title {
    color: var(--light-text);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

[id^="gamesModal"] .card-text {
    color: var(--light-text-muted);
}

[id^="gamesModal"] .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Verbesserte Darstellung der Plattform-Icons */
[id^="gamesModal"] .platform-badge {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.25rem;
    border-radius: 4px;
    margin-right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Verbesserte Paginierung im Games-Modal */
[id^="gamesModal"] .pagination {
    margin-top: 1rem;
    margin-bottom: 0;
}

[id^="gamesModal"] .pagination .page-item {
    margin: 0 2px; /* Abstand zwischen den Pagination-Elementen */
}

[id^="gamesModal"] .pagination .page-item .page-link {
    background-color: var(--light-surface);
    color: var(--light-text);
    border-color: var(--light-divider);
    transition: all 0.2s ease;
}

[id^="gamesModal"] .pagination .page-item .page-link:hover {
    background-color: var(--light-surface-darker);
    color: var(--light-text);
    border-color: var(--light-divider);
}

[id^="gamesModal"] .pagination .page-item.active .page-link {
    background-color: #710302;
    color: #fff;
    border-color: #710302;
    box-shadow: 0 0 8px rgba(113, 3, 2, 0.3);
}

[id^="gamesModal"] .pagination .page-item.disabled .page-link {
    background-color: var(--light-surface);
    color: var(--light-text-muted);
    border-color: var(--light-divider);
}

/* Z-Index für Modals und Backdrops */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

.modal-dialog {
    margin: 1.75rem auto;
    max-width: 800px;
}

/* Anpassung des X-Buttons im Suchfeld */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23710302'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>") no-repeat center center;
    background-size: 18px 18px;
    cursor: pointer;
}

.input-group-text {
    border: var(--mdb-border-width) solid #bdbdbd;
}

/* Fokus-Schatten für Formularelemente im Light Mode */
.form-control:focus {
    box-shadow: inset 0px 0px 0px 1px #710302 !important;
    border-color: #710302 !important;
}

/* Gleiche Anpassung für File-Inputs */
.form-control[type="file"]:focus:not(:disabled):not([readonly]) {
    box-shadow: inset 0px 0px 0px 1px #710302 !important;
    border-color: #710302 !important;
}

/* CKEditor Schriftart Anpassungen */
.ck-content,
.ck.ck-editor__main > .ck-editor__editable,
.ck.ck-content,
.ck-editor__editable,
.ck-editor .ck-editor__main > .ck-editor__editable {
    font-family: 'Exo', 'Roboto', sans-serif !important;
}

/* Loading Spinner Anpassungen für Corporate Design */

.loading-spinner {
    --mdb-loading-spinner-top: 50%;
    --mdb-loading-spinner-left: 50%;
    --mdb-loading-spinner-transform: translate(-50%, -50%);
    --mdb-loading-spinner-color: #710302; /* Infernal Red */
    position: absolute;
    top: var(--mdb-loading-spinner-top);
    left: var(--mdb-loading-spinner-left);
    transform: var(--mdb-loading-spinner-transform);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--mdb-loading-spinner-color);
    z-index: 1065;
    padding: 2rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.9); /* Solider weißer Hintergrund für das Spinner-Element */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.spinner-border {
    --mdb-spinner-width: 3rem; /* Größerer Spinner */
    --mdb-spinner-height: 3rem;
    --mdb-spinner-vertical-align: -0.125em;
    --mdb-spinner-border-width: 0.25em;
    --mdb-spinner-animation-speed: 0.85s; /* Etwas langsamere Animation */
    --mdb-spinner-animation-name: spinner-border;
    border: var(--mdb-spinner-border-width) solid currentcolor;
    border-right-color: rgba(113, 3, 2, 0.2); /* Transparentes Infernal Red für besseren Kontrast */
}

.spinner-grow, 
.spinner-border {
    display: inline-block;
    width: var(--mdb-spinner-width);
    height: var(--mdb-spinner-height);
    vertical-align: var(--mdb-spinner-vertical-align);
    border-radius: 50%;
    animation: var(--mdb-spinner-animation-speed) linear infinite var(--mdb-spinner-animation-name);
}

/* Anpassung des Textes im Loading Spinner */
.loading-text {
    margin-top: 1rem;
    color: #710302;
    font-weight: 500;
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); /* Textsschatten für bessere Lesbarkeit */
}

/* Verbesserter Backdrop mit radialem Verlauf für bessere Sichtbarkeit */
[id$="-backdrop"] {
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.9) 20%, 
        rgba(255, 255, 255, 0.8) 40%, 
        rgba(255, 255, 255, 0.7) 60%, 
        rgba(255, 255, 255, 0.6) 80%, 
        rgba(255, 255, 255, 0.5) 100%
    ) !important;
    backdrop-filter: blur(5px) !important;
}

.btn-outline-infernal {
    --mdb-btn-bg: transparent;
    --mdb-btn-color: #710302;
    --mdb-btn-hover-bg: #f0e5e5;
    --mdb-btn-hover-color: #710302;
    --mdb-btn-focus-bg: #e2cccc;
    --mdb-btn-focus-color: #710302;
    --mdb-btn-active-bg: #e2cccc;
    --mdb-btn-active-color: #710302;
    --mdb-btn-outline-border-color: #710302;
    --mdb-btn-outline-focus-border-color: #7f1c1b;
    --mdb-btn-outline-hover-border-color: #7f1c1b;
    border-color: var(--mdb-btn-outline-border-color);
}

.btn-outline-infernal:hover {
    background-color: var(--mdb-btn-hover-bg);
    color: var(--mdb-btn-hover-color);
    border-color: var(--mdb-btn-outline-hover-border-color);
}

.btn-outline-infernal:focus, 
.btn-outline-infernal:active {
    background-color: var(--mdb-btn-focus-bg);
    color: var(--mdb-btn-focus-color);
    border-color: var(--mdb-btn-outline-focus-border-color);
}

.btn-outline-infernal-unread {
    --mdb-btn-bg: transparent;
    --mdb-btn-color: #710302;
    --mdb-btn-hover-bg: #f0e5e5;
    --mdb-btn-hover-color: #710302;
    --mdb-btn-focus-bg: #e2cccc;
    --mdb-btn-focus-color: #710302;
    --mdb-btn-active-bg: #e2cccc;
    --mdb-btn-active-color: #710302;
    --mdb-btn-outline-border-color: #710302;
    --mdb-btn-outline-focus-border-color: #7f1c1b;
    --mdb-btn-outline-hover-border-color: #7f1c1b;
    border-color: var(--mdb-btn-outline-border-color);
    border-width: 2px;
    font-weight: 500;
    background-color: rgba(113, 3, 2, 0.05);
}

.btn-outline-infernal-unread:hover {
    background-color: var(--mdb-btn-hover-bg);
    color: var(--mdb-btn-hover-color);
    border-color: var(--mdb-btn-outline-hover-border-color);
}

.btn-outline-infernal-unread:focus, 
.btn-outline-infernal-unread:active {
    background-color: var(--mdb-btn-focus-bg);
    color: var(--mdb-btn-focus-color);
    border-color: var(--mdb-btn-outline-focus-border-color);
}

/* Form helper für Datei-Eingabefelder */
.mb-4 .form-helper {
    width: 100%;
    display: block;
    font-size: .875em;
    color: #bdbdbd;
}

.mb-4 .form-helper i {
    margin-left: 4px;
}

/* Custom tooltips für Datei-Eingabefelder */
.mb-4 .custom-tooltip .tooltip-inner {
    max-width: 350px;
    text-align: left;
}

/* F1 Statistikboxen Stile für Light-Mode */
.stat-box {
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.stat-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.stat-box.pole-position-box {
    border-left: 4px solid #3a3a3a !important; /* Dunkler als vorher, aber noch sichtbar im Light-Mode */
}

.stat-box.races-box {
    border-left: 4px solid #e10600 !important;
}

.stat-box.wins-box {
    border-left: 4px solid #ffd700 !important;
}

.stat-box.podiums-box {
    border-left: 4px solid #cd7f32 !important;
}

.stat-box.fastest-laps-box {
    border-left: 4px solid #9c27b0 !important;
}

.stat-box.points-box {
    border-left: 4px solid #0d6efd !important;
}

/* Hervorhebung für aktuelles Jahr in der Mitgliedsbeitrags-Tabelle */
#membership-table .current-year-column {
    background-color: rgba(113, 3, 2, 0.05); /* Leicht rötlicher Hintergrund */
}

/* Verstärkte Hervorhebung beim Darüberfahren mit der Maus */
#membership-table tbody tr:hover .current-year-column {
    background-color: rgba(113, 3, 2, 0.1);
}

/* Stil für den Header der aktuellen Jahresspalte */
#membership-table thead th.current-year-column {
    background-color: rgba(113, 3, 2, 0.1);
    border-bottom: 2px solid #710302 !important;
    font-weight: 700;
}

/* Zebra-Streifen mit aktuellem Jahr kombinieren */
#membership-table tbody tr:nth-of-type(odd) .current-year-column {
    background-color: rgba(113, 3, 2, 0.075);
}

/* Zebra-Streifen mit aktuellem Jahr kombinieren - bei Hover */
#membership-table tbody tr:nth-of-type(odd):hover .current-year-column {
    background-color: rgba(113, 3, 2, 0.125);
}

.prefix-size {
    width: 75px !important;
}

/* Spezifischer Selektor für das von MDB generierte Input-Element */
.input-group .select-input[aria-haspopup="true"] {
    width: 75px !important;
    min-width: 75px !important;
    flex: 0 0 75px !important;
}

/* Verbergen des Dropdown-Pfeils auf kleinen Geräten */
@media (max-width: 576px) {
    .input-group .select-arrow {
        padding-right: 0.2rem !important;
    }
}

/* Membership Badge Styles - Light Mode */
.membership-badge {
    margin-left: 5px;
    font-size: 1.25em;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.membership-badge:hover {
    transform: scale(1.2);
}

/* Standard Badge (1 Jahr) - Infernal Red */
.membership-badge-standard {
    color: #c69999;
}

/* Bronze Badge (2 Jahre) */
.membership-badge-bronze {
    color: #CD7F32;
}

/* Silver Badge (3 Jahre) */
.membership-badge-silver {
    color: #C0C0C0;
}

/* Gold Badge (5+ Jahre) */
.membership-badge-gold {
    color: #FFD700;
}