/**********************************************
 * INHALTSVERZEICHNIS
 **********************************************/
/* 
 * 1. Reset und Basiseinstellungen
 *    1.1 Reset-Regeln
 *    1.2 Globale Variablen
 *    1.3 Gemeinsame Klassen
 * 2. Basis-Layout
 *    2.1 Body
 *    2.2 Header & Footer
 *    2.3 Navigation
 * 3. Haupt-Inhalt
 *    3.1 Hero-Bereiche
 *    3.2 Info-Boxen
 *    3.3 Buttons
 * 4. Formulare & Interaktion
 *    4.1 Formulare
 *    4.2 Flash-Meldungen
 *    4.3 Modals
 * 5. Charakter-System
 *    5.1 Charakter-Karten
 *    5.2 Charakter-Erstellung
 *    5.3 Charakter-Profile
 * 6. Turnier-System
 *    6.1 Turnier-Details
 *    6.2 Turnier-Listen
 *    6.3 Turnier-Tabellen
 *    6.4 Matchups
 *    6.5 Tournament-Modals
 *    6.6 Final Standings & Podium
 * 7. Responsive Design
 */

/**********************************************
 * 1.1 RESET UND BASISEINSTELLUNGEN
 **********************************************/
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
      font-size: 14px;
  }

/**********************************************
 * 1.2 GLOBALE VARIABLEN
 **********************************************/
 :root {
    /* ==========================================
     * LIGHT MODE VARIABLES (Default)
     * ========================================== */
    
    /* Primary Colors */
    --primary-color: #e74c3c;
    --primary-hover: #c0392b;
    --primary-light: #ffebee;
    --primary-dark: #a93226;
    
    /* Status Colors */
    --success-color: #2ecc71;
    --success-light: #d5f4e6;
    --warning-color: #ff6b35;
    --warning-light: #fff2ed;
    --error-color: #e74c3c;
    --error-light: #ffebee;
    --info-color: #3498db;
    --info-light: #e3f2fd;
    
    /* Background Colors */
    --background-body: #ffffff;
    --background-light: #f4f4f4;
    --background-card: #f9f9f9;
    --background-elevated: #ffffff;
    --background-input: #ffffff;
    --background-hover: #f8f8f8;
    --background-active: #f0f0f0;
    
    /* Text Colors */
    --text-color: #333333;
    --text-light: #555555;
    --text-muted: #777777;
    --text-white: #ffffff;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-color: #dddddd;
    --border-light: #eeeeee;
    --border-dark: #cccccc;
    --border-focus: #e74c3c;
    
    /* Shadow Colors */
    --shadow-light: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.15);
    
    /* Overlay Colors */
    --overlay-dark: rgba(0, 0, 0, 0.5);
    
    /* Accent Colors for User Highlighting */
    --accent-color: #ff4500;
    --accent-light: rgba(255, 69, 0, 0.1);
    --overlay-light: rgba(255, 255, 255, 0.9);
    --overlay-backdrop: rgba(0, 0, 0, 0.6);
    
    /* Header/Footer Colors */
    --header-bg: #2c3e50;
    --header-text: #ffffff;
    --footer-bg: #2c3e50;
    --footer-text: #ffffff;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-slow: 0.3s ease-out;
    --transition-theme: 0.3s ease;
    
    /* Bilder - Klassen */
    --img-krieger: url('../images/krieger_alt.png');
    --img-ninja: url('../images/ninja_alt.png');
    --img-sura: url('../images/sura_alt.png');
    --img-schamane: url('../images/schamane_alt.png');
    
    /* Bilder - Lehren */
    --img-koerper: url('../images/krieger_koerper.png');
    --img-mental: url('../images/krieger_mental.png');
    --img-nahkampf: url('../images/ninja_nah.png');
    --img-fernkampf: url('../images/ninja_fern.png');
    --img-waffe: url('../images/sura_waffe.png');
    --img-magie: url('../images/sura_magie.png');
    --img-drache: url('../images/schamane_drache.png');
    --img-heil: url('../images/schamane_heil.png');
    
    /* Banner-Bilder */
    --img-banner-1: url('../images/shiva_banner_6.png');
    --img-banner-3: url('../images/shiva_banner_3.png');
}

/* ==========================================
 * DARK MODE VARIABLES
 * ========================================== */
:root[data-theme="dark"] {
    /* Primary Colors - bleiben gleich für Wiedererkennungswert */
    --primary-color: #e74c3c;
    --primary-hover: #c0392b;
    --primary-light: #4a1a16;
    --primary-dark: #ff6b6b;
    
    /* Status Colors - Orange bleibt im Dark Mode */
    --success-color: #00d68f;
    --success-light: #1a3a2e;
    --warning-color: #ff6b35;
    --warning-light: #3a2518;
    --error-color: #ff6b6b;
    --error-light: #4a1a1a;
    --info-color: #0066cc;
    --info-light: #1a2a3a;
    
    /* Background Colors */
    --background-body: #121212;
    --background-light: #1e1e1e;
    --background-card: #2d2d2d;
    --background-elevated: #3a3a3a;
    --background-input: #404040;
    --background-hover: #404040;
    --background-active: #4a4a4a;
    
    /* Text Colors */
    --text-color: #e0e0e0;
    --text-light: #b0b0b0;
    --text-muted: #888888;
    --text-white: #ffffff;
    --text-inverse: #121212;
    
    /* Border Colors */
    --border-color: #444444;
    --border-light: #333333;
    --border-dark: #555555;
    --border-focus: #e74c3c;
    
    /* Shadow Colors - angepasst für Dark Mode */
    --shadow-light: 0 2px 5px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.4);
    --shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Overlay Colors */
    --overlay-dark: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(45, 45, 45, 0.95);
    --overlay-backdrop: rgba(0, 0, 0, 0.8);
    
    /* Accent Colors for User Highlighting - Dark Mode */
    --accent-color: #ff6347;
    --accent-light: rgba(255, 99, 71, 0.15);
    
    /* Header/Footer Colors */
    --header-bg: #1a1a1a;
    --header-text: #e0e0e0;
    --footer-bg: #1a1a1a;
    --footer-text: #e0e0e0;
}

/**********************************************
 * 1.3 GEMEINSAME KLASSEN
 **********************************************/
/* Bild-Styling */
.bg-image-base {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-cover {
    background-size: cover;
    background-position: center;
}

/* Klassen-Bilder */
.img-krieger { background-image: var(--img-krieger); }
.img-ninja { background-image: var(--img-ninja); }
.img-sura { background-image: var(--img-sura); }
.img-schamane { background-image: var(--img-schamane); }

/* Lehren-Bilder */
.img-koerper { background-image: var(--img-koerper); }
.img-mental { background-image: var(--img-mental); }
.img-nahkampf { background-image: var(--img-nahkampf); }
.img-fernkampf { background-image: var(--img-fernkampf); }
.img-waffe { background-image: var(--img-waffe); }
.img-magie { background-image: var(--img-magie); }
.img-drache { background-image: var(--img-drache); }
.img-heil { background-image: var(--img-heil); }

/* Layout-Helfer */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-align {
    display: flex;
    align-items: center;
}

/* Basis-Karten-Styling */
.card-base,
.hero,
.tournament-hero,
.info-box,
.character-creation-container {
    background-color: var(--overlay-light);
    border-radius: 5px;
    box-shadow: var(--shadow-light);
    padding: 1.5rem;
}

/* Buttons */
.button,
button.button,
input[type="submit"].button {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--text-white);
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background-color var(--transition-fast);
}

.button:hover,
button.button:hover,
input[type="submit"].button:hover {
    background-color: var(--primary-hover);
}

/* Styling für Buttons */
.button.white-text {
    color: white;
}

.back-button {
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px;
}

.back-button .icon-back {
    margin-right: 5px;
}

.button.secondary {
    background-color: var(--primary-color);
}

.button.secondary:hover {
    background-color: var(--primary-hover);
}

.button.danger {
    background-color: var(--error-color);
}

.button.danger:hover {
    background-color: var(--primary-hover);
}

/* Tabs in Benutzerdetails */
.user-tabs {
    margin-top: 1.5rem;
    background-color: var(--background-card);
    border-radius: 5px;
    box-shadow: var(--shadow-light);
}

.tab-navigation {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.tab-button {
    padding: 0.8rem 1.2rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-light);
    transition: all var(--transition-fast);
}

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

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-content {
    padding: 1.5rem;
}

.tab-pane {
    display: none;
}

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

.admin-action-btn {
    display: inline-block;
    width: 100px;
    padding: 0.3rem 0;
    margin-right: 0.5rem;
    background-color: var(--primary-color);
    color: white !important;
    text-align: center;
    font-size: 1rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast);
    box-sizing: border-box;
    height: 31px;
    line-height: 23px;
}

.admin-action-btn:hover {
    background-color: var(--primary-hover);
}

.action-delete {
    background-color: #e74c3c;
}

.action-delete:hover {
    background-color: #c0392b;
}

/* Einladungscode Styles */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-active {
    background-color: var(--success-color);
    color: white;
}

.status-warning {
    background-color: var(--warning-color);
    color: white;
}

.status-light {
    background-color: #bdc3c7;
    color: #2c3e50;
}

.status-used {
    background-color: #95a5a6;
    color: white;
}

.no-data {
    text-align: center;
    color: var(--text-muted);
    padding: 1.5rem !important;
}

/**********************************************
 * 2.1 BASIS-LAYOUT - BODY
 **********************************************/

/* Theme-Transition für sanfte Übergänge */
*,
*::before,
*::after {
    transition: background-color var(--transition-theme),
                color var(--transition-theme),
                border-color var(--transition-theme),
                box-shadow var(--transition-theme);
}

/* Ausnahmen für Transitions */
.no-transition,
.no-transition *,
[data-no-transition],
[data-no-transition] * {
    transition: none !important;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--background-light);
    position: relative;
    color: var(--text-color);
    padding-bottom: 60px;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--img-banner-1);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    opacity: 0.7;
    z-index: -1;
}

/**********************************************
 * 2.2 HEADER & FOOTER
 **********************************************/
header,
footer {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    color: white;
    position: relative;
    z-index: 1;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    border-top: none;
}

footer {
    text-align: center;
    border-top: none;
    border-bottom: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

footer.visible {
    opacity: 1;
    visibility: visible;
}

/* Footer-Text ohne Hover-Effekt */

footer a {
    color: white;
    text-decoration: none;
    transition: transform var(--transition-fast), font-size var(--transition-fast);
    display: inline-block;
}

footer a:hover {
    transform: scale(1.1);
    font-size: 1.05rem;
    color: var(--primary-color);
}

.logo a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
    z-index: 2;
    transition: transform var(--transition-fast), font-size var(--transition-fast);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.logo a:hover {
    transform: scale(1.05);
    font-size: 1.6rem;
    color: var(--primary-color);
}

/**********************************************
 * 2.3 NAVIGATION
 **********************************************/
nav {
    position: relative;
    z-index: 1;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 1rem;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 0.5rem;
    transition: transform var(--transition-fast), font-size var(--transition-fast);
    display: inline-block;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

nav ul li a:hover {
    transform: scale(1.1);
    font-size: 1.05rem;
    color: var(--primary-color);
}

/* Hide mobile navigation on desktop */
@media screen and (min-width: 769px) {
    .mobile-hamburger,
    .mobile-sidebar,
    .mobile-overlay {
        display: none !important;
    }
}

/* Aktiver Link im Menü */
nav ul li a.active {
    color: var(--primary-color);
    font-weight: bold;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: none;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

.theme-toggle-btn .theme-icon {
    transition: transform var(--transition-fast);
    display: block;
}

.theme-toggle-btn:hover .theme-icon {
    transform: rotate(20deg);
}

/* Dark Mode Toggle Icon Animation */
:root[data-theme="dark"] .theme-toggle-btn .theme-icon {
    transform: rotate(180deg);
}

/**********************************************
 * 3.1 HAUPT-INHALT - HERO-BEREICHE
 **********************************************/
main {
    max-width: 1600px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.hero,
.tournament-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.hero h1 {
    margin-bottom: 1rem;
}

.hero p {
    margin-bottom: 1.5rem;
}

/* Profil-Header Styling */
.profile-header {
    background-color: var(--overlay-light);
    color: var(--text-color);
    border-radius: 5px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-light);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-header h1 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.profile-header p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.profile-header .role-badge {
    margin-top: 0.5rem;
}

.profile-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.profile-actions .button {
    margin-top: 0;
    flex: 1;
    text-align: center;
    height: auto;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.profile-actions .button.danger {
    background-color: #e74c3c;
}

.profile-actions .button.danger:hover {
    background-color: #c0392b;
}

/* Tournament Hero erbt Styles von .hero und .card-base */

/**********************************************
 * 3.2 INFO-BOXEN
 **********************************************/
.tournament-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Info-Box erbt Styles von .card-base */

.info-box h2 {
    margin-bottom: 0.8rem;
    color: var(--primary-color);
}

/**********************************************
 * 4.1 FORMULARE
 **********************************************/
.form-group {
    margin-bottom: 1rem;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    margin-top: 0.3rem;
    background-color: var(--background-elevated);
    color: var(--text-color);
}

.error-message {
    color: var(--primary-color);
    font-size: 1rem;
    display: block;
    margin-top: 0.3rem;
}

/* Autocomplete Styles */
.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--background-elevated);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 3px 3px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.autocomplete-suggestion {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-color);
    transition: background-color 0.2s ease;
}

.autocomplete-suggestion:last-child {
    border-bottom: none;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.active {
    background-color: var(--primary-color);
    color: white;
}

.autocomplete-suggestion .username {
    font-weight: 500;
}

/* Invitation Character Cards */
.invitation-character {
    border: 2px dashed var(--border-color);
    position: relative;
}

.invitation-section h4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Withdrawal Section */
.withdrawal-section {
    text-align: center;
    margin-top: 2rem;
    padding: 1.5rem;
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
}

.withdrawal-button {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.withdrawal-button:hover {
    background-color: #c82333;
}

.important-info-container {
    margin-bottom: 1.5rem;
}

.expand-button {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
    background-color: var(--background-card);
    border-radius: 5px;
    font-weight: normal;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-light);
}

.expand-button:hover {
    background-color: var(--background-hover);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.expand-button.expanded {
    background-color: var(--background-hover);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.expand-button .arrow {
    transition: transform var(--transition-fast);
    font-size: 1.2rem;
    margin-left: 1rem;
}

.expandable-content {
    display: none;
    animation: expandDown 0.3s ease-out;
}

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

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1rem;
}

.checkbox-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-container label {
    cursor: pointer;
    color: var(--text-color);
}

button.button:disabled, 
input[type="submit"].button:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
    opacity: 0.7;
}

button.button.active, 
input[type="submit"].button.active {
    background-color: var(--primary-color);
    cursor: pointer;
    opacity: 1;
}

/**********************************************
 * 4.2 FLASH-MELDUNGEN
 **********************************************/
.flash-messages {
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
}

.flash-message {
    padding: 0.8rem 1rem;
    color: white;
    margin-bottom: 0;
    display: block;
    width: 100%;
    text-align: center;
    font-weight: bold;
    background-color: rgba(231, 76, 60, 0.9);
    border-bottom: 1px solid rgba(231, 76, 60, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.flash-success {
    background-color: rgba(46, 204, 113, 0.9);
    border-bottom: 1px solid rgba(46, 204, 113, 1);
}

.flash-warning {
    background-color: rgba(243, 156, 18, 0.9);
    border-bottom: 1px solid rgba(243, 156, 18, 1);
}

.flash-info {
    background-color: rgba(52, 152, 219, 0.9);
    border-bottom: 1px solid rgba(52, 152, 219, 1);
}

/**********************************************
 * 4.3 MODALS
 **********************************************/
/* Modal Styles */
.result-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-dark);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--background-card);
    border-radius: 5px;
    max-width: 500px;
    width: 90%;
    padding: 1.5rem;
    box-shadow: var(--shadow-medium);
}

.modal-title {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.modal-form-container {
    margin-bottom: 1.5rem;
}

.modal-actions {
    display: flex;
    justify-content: space-between;
}

.modal-cancel-button {
    background-color: #777;
}

/**********************************************
 * 5.1 CHARAKTER-KARTEN
 **********************************************/
.character-card {
    position: relative;
    padding-bottom: 60px;
}

.delete-form {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
}

.character-profile-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
    max-width: 1200px;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
}

.character-count-1 {
    /* Bei einem Charakter */
    grid-template-columns: 1fr 1fr 1fr;
}

.character-count-1 .character-profile-card {
    grid-column: 2;
}

.character-count-2 {
    /* 2-spaltiges Grid für zwei Charaktere, zentriert */
    grid-template-columns: 1fr 1fr;
    max-width: 800px;
    margin: 1.5rem auto 0;
}

.character-profile-card {
    position: relative;
    background-color: var(--background-card);
    border-radius: 5px;
    border: 2px solid var(--border-color);
    padding: 1rem;
    padding-top: 120px;
    box-shadow: var(--shadow-light);
    padding-bottom: 60px;
}

.character-profile-card .card-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.character-profile-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    text-align: center;
}

.character-profile-card .teaching-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
}

.character-profile-card .creation-date {
    margin-bottom: 2.5rem;
}

/**********************************************
 * 5.2 CHARAKTER-ERSTELLUNG
 **********************************************/
.character-creation-container {
    max-width: 700px;
    margin: 0 auto;
}

.creation-section {
    margin-bottom: 2rem;
}

.creation-section h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.class-card, 
.teaching-card {
    position: relative;
    background-color: var(--background-card);
    border: 2px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-fast);
    overflow: hidden;
    text-align: center;
}

.class-card {
    width: 140px;
    height: 180px;
    display: flex;
    flex-direction: column;
}

.class-card .card-image {
    flex: 0 0 140px;
    width: 100%;
}

.class-card .card-name {
    padding: 8px 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teaching-card {
    width: 110px;
    height: 110px;
    padding-top: 80px;
}

.teaching-card .card-icon {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
}

.class-card.selected, 
.teaching-card.selected {
    background-color: var(--primary-color);
    border-color: var(--primary-hover);
    color: white;
}

.class-card:hover, 
.teaching-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.hidden {
    display: none;
}

.creation-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

/**********************************************
 * 6.1 TURNIER-DETAILS
 **********************************************/
.tournament-details h2 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
    font-size: 1.5rem;
}

.tournament-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.tournament-info-item {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.info-label {
    font-weight: bold;
    min-width: 150px;
    color: var(--text-light);
}

.info-value {
    flex: 1;
}

.tournament-description {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.tournament-registration {
    text-align: center;
    margin-bottom: 2rem;
    background-color: var(--overlay-light);
    border-left: 4px solid var(--primary-color);
}

.tournament-registration h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.tournament-registration a:not(.button) {
    color: var(--primary-color);
    font-weight: bold;
    text-decoration: underline;
}

.tournament-registration a:not(.button):hover {
    color: var(--primary-color);
    opacity: 0.8;
}

/**********************************************
 * 6.2 TURNIER-LISTEN
 **********************************************/
.tournament-info {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: 
        "current current upcoming upcoming completed completed"
        ". polls polls quick-info quick-info .";
    gap: 1.5rem;
    padding: 1rem;
    max-width: 1600px;
    margin: 0 auto;
}

.tournament-info .info-box {
    position: relative;
    padding: 1rem;
    padding-bottom: 60px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    min-height: 200px;
}

/* Grid Area Zuweisungen für Homepage Layout */
.tournament-info .info-box:nth-child(1) { grid-area: current; }
.tournament-info .info-box:nth-child(2) { grid-area: upcoming; }  
.tournament-info .info-box:nth-child(3) { grid-area: completed; }
.tournament-info .info-box:nth-child(4) { grid-area: polls; }
.tournament-info .info-box:nth-child(5) { grid-area: quick-info; }

/* Sonderregel, wenn nur ein Element vorhanden ist */
.tournament-info .info-box:only-child {
    width: 70%;
    margin: 0 auto;
}

/* Tournament List Seite - Zentrierte Karten */
.tournament-sections .tournament-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.tournament-sections .tournament-info .info-box {
    flex: 0 1 400px;
    max-width: 400px;
    min-width: 320px;
}

/* Kürzlich abgeschlossen - kleinere Karten */
.tournament-info-completed .info-box {
    min-height: 160px !important;
    padding-bottom: 40px !important;
}

/* Archiv - kleine Karten nebeneinander (Original-Stil) */
.tournament-info-archived {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.tournament-info-archived .info-box {
    flex: 0 1 400px;
    max-width: 400px;
    min-width: 320px;
}

/* Desktop: Archiv-Button gleich groß wie normale Buttons */
.tournament-info-archived .button-small {
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
}

.tournament-info .info-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.tournament-info .info-box h2 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1.3rem;
}

.tournament-status-badge {
    display: inline-block;
    margin-bottom: 1rem;
}

.tournament-desc {
    margin-bottom: 1rem;
    color: var(--text-color);
    line-height: 1.4;
}

.tournament-info .flex-center {
    position: absolute;
    bottom: 1rem;
    left: 0;
    right: 0;
}

.status-text-open {
    color: #2ecc71;
    font-weight: bold;
}

.status-text-closed {
    color: var(--text-muted);
}

/* Homepage Turnierdarstellung */
.homepage-section-title {
    color: var(--primary-color);
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--primary-color);
}

.homepage-tournaments {
    margin-top: 1.5rem;
}

.tournament-category {
    margin-bottom: 1.5rem;
}

.tournament-category-title {
    color: var(--text-light);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.2rem;
    margin-bottom: 0.8rem;
    text-align: center;
}

.homepage-tournament-item {
    background-color: var(--background-card);
    border-radius: 3px;
    padding: 0.8rem 1.2rem;
    margin-bottom: 0.8rem;
    box-shadow: var(--shadow-light);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.homepage-tournament-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.homepage-tournament-item h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1rem;
    flex: 2;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.homepage-tournament-item .tournament-status-badge {
    margin: 0 0.5rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.homepage-tournament-item p {
    margin: 0 1rem;
    font-size: 1rem;
    white-space: nowrap;
    font-weight: 500;
}

.homepage-tournament-item .button {
    margin: 0;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.info-message {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--text-light);
}

.button-container {
    text-align: center;
    padding: 1rem 0;
    margin-top: 0.5rem;
}

/**********************************************
 * 6.3 TURNIER-TABELLEN
 **********************************************/
.tournament-sections {
    margin-top: 2rem;
}

.tournament-section {
    margin-bottom: 1rem;
    background-color: var(--overlay-light);
    border-radius: 5px;
    box-shadow: var(--shadow-light);
    overflow: hidden;
}

.tournament-accordion-header {
    background-color: var(--background-card);
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-bottom: 2px solid var(--primary-color);
    transition: background-color var(--transition-slow);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tournament-accordion-header:hover {
    background-color: var(--background-hover);
}

.tournament-accordion-header h2 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.3rem;
}

.accordion-icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.accordion-icon:before,
.accordion-icon:after {
    content: '';
    position: absolute;
    background-color: var(--primary-color);
    transition: transform var(--transition-slow);
}

.accordion-icon:before {
    width: 2px;
    height: 20px;
    left: 9px;
    top: 0;
}

.accordion-icon:after {
    width: 20px;
    height: 2px;
    left: 0;
    top: 9px;
}

.tournament-accordion-header.active .accordion-icon:before {
    transform: rotate(90deg);
}

.tournament-accordion-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.tournament-accordion-header.active + .tournament-accordion-content {
    max-height: 2000px;
    padding: 0;
}

.participants-list-container {
    padding: 1.5rem;
}

.participants-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.participant-item {
    padding: 0.8rem;
    background-color: var(--background-card);
    border-radius: 3px;
    border-left: 3px solid var(--primary-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.participant-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.participant-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character-details {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
}

.username-wrapper {
    display: inline-block;
    min-width: 250px;
    max-width: 250px;
}

.participant-username {
    font-weight: bold;
    font-size: 1.1rem;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.character-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.character-name {
    margin: 0 0.3rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 125px; /* Begrenzt die Breite, sodass die Bilder immer sichtbar sind */
}

.team-info {
    display: flex;
    gap: 1rem;
}

.team-name {
    font-weight: bold;
    font-size: 1.1rem;
}

/* Team participants display styles */
.team-line-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.team-name-section {
    flex-shrink: 0;
    margin-right: 2rem;
    min-width: 250px;
    max-width: 250px;
}

.team-name-section .team-name {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.team-characters-section {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
}

.team-member-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 3.5rem;
    min-width: 200px;
}

/* Spezifische Styles für Teilnehmerliste - einheitliche Abstände */
.participants-list .participant-username {
    max-width: none;
    overflow: visible;
    text-overflow: unset;
}

.participants-list .team-name {
    max-width: none;
    overflow: visible;
    text-overflow: unset;
}

.participants-list .character-name {
    max-width: none;
    overflow: visible;
    text-overflow: unset;
}

.participants-list .username-wrapper {
    display: inline-block;
    min-width: 300px;
    max-width: 300px;
    margin-right: 2rem;
}

.participants-list .team-name-section {
    min-width: 400px;
    max-width: 400px;
    margin-right: 3rem;
}

.character-icons-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.character-class-icon, 
.character-teaching-icon {
    width: 22px;
    height: 22px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.tournament-table-container {
    padding: 1.5rem;
    overflow-x: auto;
}

/* Verhindere horizontale Scrollbar bei Character-Cards im Team-Management */
.tournament-table-container:has(.character-profile-card) {
    overflow-x: hidden;
}

/* Team Members Grid Layout */
.team-members-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 100%;
}

/* Spezifische Layouts basierend auf Anzahl der Mitglieder */
.team-members-1-count {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
}

.team-members-2-count {
    grid-template-columns: repeat(2, 1fr);
    max-width: 680px;
    margin: 0 auto;
}

.team-members-3-count {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1020px;
    margin: 0 auto;
}

.team-members-4-count {
    grid-template-columns: repeat(2, 1fr);
    max-width: 680px;
    margin: 0 auto;
}


.tournament-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    
}

.tournament-table th {
    background-color: var(--background-elevated);
    color: var(--text-color);
    font-weight: bold;
    text-align: center;
    padding: 0.8rem 1rem;
    border-bottom: 2px solid var(--primary-color);
    white-space: nowrap;
}

/* Rang-Überschrift linksbündig */
.tournament-table th:nth-child(1) {
    text-align: left;
}

.tournament-table th:nth-child(2),  /* Ergebnis/Name */
.tournament-table th:nth-child(3) { /* Status */
    text-align: center;
}

/* In Entscheidungsspiel-Tabellen soll auch die Name-Überschrift zentriert sein */
.single-tournament-table th:nth-child(2) {
    text-align: center;
}

/* Zentrierung der Daten in den Turniertabellen */
.tournament-table td:nth-child(4), /* Benutzer */
.tournament-table td:nth-child(5), /* Matchups */
.tournament-table td:nth-child(6), /* Siege */
.tournament-table td:nth-child(7), /* Niederlagen */
.tournament-table td.center-align {
    text-align: center !important;
}

/* Spezielle Klassen für Team-Turnier-Tabellen */
.team-tournament-table .team-name-cell {
    font-weight: bold;
    color: var(--primary-color);
    text-align: center; /* Team-Namen zentrieren wie die Überschrift */
}

.team-tournament-points {
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
}

/* Spezielle Klassen für 1v1-Turnier-Tabellen */
.single-tournament-table .player-name-cell {
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
}

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

.character-cell {
    padding: 0.2rem;
    text-align: center;
}

.character-cell .player-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.character-cell .player-with-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.final-stage .tournament-table th:nth-child(1),
.final-stage .tournament-table td:nth-child(1) {
    width: 50%;
}

.final-stage .tournament-table th:nth-child(2),
.final-stage .tournament-table td:nth-child(2) {
    width: 50%;
}

.final-stage .tournament-table th:nth-child(3),
.final-stage .tournament-table td:nth-child(3) {
    width: 50%;
}

.tournament-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.tournament-table tbody tr:hover {
    background-color: rgba(231, 76, 60, 0.05);
}

/* Round Robin 1v1 - Klassen-Spalte zentrieren */
.tournament-table td:nth-child(3) {
    text-align: center !important;
}




/* Center all character containers in Klasse and Lehre columns */
.tournament-table td:nth-child(3) .player-info,
.tournament-table td:nth-child(3) .player-with-icons,
.tournament-table td:nth-child(3) .player,
.tournament-table td:nth-child(4) .player-info,
.tournament-table td:nth-child(4) .player-with-icons,
.tournament-table td:nth-child(4) .player {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Final Standings - Lehre-Spalte zentrieren */
.tournament-table td:nth-child(4) {
    text-align: center !important;
}

/* 1v1 Final Standings - Character-Namen fett machen */
.tournament-1v1-pvp .tournament-table td:nth-child(2) {
    font-weight: bold;
}

/* Player info containers - separate styling to avoid affecting matchups */
.player-with-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}



.player {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Only apply special alignment to ranking tables, not matchups */
.player-with-icons span {
    min-width: 80px;
    text-align: left;
}

.tournament-table .points {
    font-weight: bold;
    color: var(--primary-color);
    text-align: center;
}

.highlighted-row {
    background-color: transparent;
}

.table-caption {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--text-light);
}

.group-section h3,
.final-stage h3 {
    text-align: center;
    margin: 1.5rem 0 1rem;
    color: var(--text-light);
    font-size: 1.2rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

/* Poule nutzt jetzt die gleichen Styles wie Round Robin - keine spezifischen Überschreibungen mehr */

.group-section:first-child h3,
.final-stage:first-child h3 {
    margin-top: 0;
}

/* Gruppentabellen identisch zu Round Robin formatieren */
.group-section .tournament-table .player-name-cell {
    text-align: center; /* Links wie in Round Robin */
    font-weight: bold;
    color: var(--text-color);
}

/* === FIX: Spieler-Namen in 1v1-Entscheidungsspiel-Tabellen richtig ausrichten === */
#tiebreaker-container .tournament-table.single-tournament-table .player-name-cell,
#tiebreaker-container .tournament-table.single-tournament-table td:nth-child(2) {
    text-align: left !important;  /* Namen linksbündig für 1v1 */
    vertical-align: middle !important;
    font-weight: bold !important;
}


/* Team-Namen (nur bei Team-Turnieren) in Orange */
.tournament-team-pvp #tiebreaker-container .tournament-table .player-name-cell,
.tournament-team-pvp #tiebreaker-container .tournament-table td:nth-child(2) {
    color: var(--primary-color) !important;  /* Team-Namen in Standard-Orange */
}

/* Tiebreaker Matchup Ergebnisse in Team-Turnieren sollen schwarz sein */
.tournament-team-pvp #tiebreaker-container .matchup-result .score {
    color: var(--text-color) !important;  /* Score schwarz statt orange */
}

/* 1v1-Spielernamen (Character-Namen) in Schwarz */  
.tournament-1v1-pvp #tiebreaker-container .tournament-table .player-name-cell,
.tournament-1v1-pvp #tiebreaker-container .tournament-table td:nth-child(2) {
    color: var(--text-color) !important;  /* Spielernamen in Schwarz */
}

/* Nur für 1v1-Ranglisten-Tabellen in Tiebreaker, nicht für Matchup-Tabellen */
#tiebreaker-container .tournament-table.single-tournament-table th:nth-child(2) {
    text-align: left !important;  /* Überschrift "Name" linksbündig für 1v1 */
}

/* === FIX: Team-Namen in Team-Entscheidungsspiel-Tabellen richtig ausrichten === */
#tiebreaker-container .tournament-table.team-tournament-table .team-name-cell,
#tiebreaker-container .tournament-table.team-tournament-table td:nth-child(2) {
    text-align: center !important;  /* Namen zentriert für Teams */
    vertical-align: middle !important;
    font-weight: bold !important;
}

/* Team-Header in Tiebreaker zentrieren */
#tiebreaker-container .tournament-table.team-tournament-table th:nth-child(2) {
    text-align: center !important;  /* Überschrift "Name" zentriert für Teams */
}

/* Feste Spaltenbreiten NUR für Poule-RANGLISTEN-Tabellen */
/* Wichtig: Nur Tabellen MIT .single-tournament-table oder .team-tournament-table sind Ranglisten */
.group-section .tournament-table.single-tournament-table,
.group-section .tournament-table.team-tournament-table {
    table-layout: auto;
}

/* Rang-Spalte kompakter machen - nur für Ranglisten */
.group-section .tournament-table.single-tournament-table th:nth-child(1),
.group-section .tournament-table.single-tournament-table td:nth-child(1),
.group-section .tournament-table.team-tournament-table th:nth-child(1),
.group-section .tournament-table.team-tournament-table td:nth-child(1) {
    width: 100px; /* Kompakte Breite */
    padding-right: 0.5rem; /* Weniger Abstand rechts */
}

.group-section .tournament-table.single-tournament-table th:nth-child(2),
.group-section .tournament-table.single-tournament-table td:nth-child(2),
.group-section .tournament-table.team-tournament-table th:nth-child(2),
.group-section .tournament-table.team-tournament-table td:nth-child(2) {
    width: 200px; /* Feste Breite für alle Gruppen */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Poule Matchup-Tabellen (ohne spezielle Klasse) wie Round Robin formatieren */
.group-section .tournament-table:not(.single-tournament-table):not(.team-tournament-table) {
    table-layout: auto; /* Dynamische Breiten wie Round Robin */
}

/**********************************************
 * 6.4 MATCHUPS
 **********************************************/
.matchup-pairing {
    min-width: 300px;
    width: 70%; /* Größerer Anteil für die Paarungen, kleinerer für Ergebnis/Status */
    max-width: 100%;
}

.player-vs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.player {
    gap: 0.8rem;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0; /* Wichtig für Text-Überlauf */
}

.vs-indicator {
    color: var(--text-color);
    font-weight: bold;
    font-size: 1.1rem; /* Etwas größer */
    padding: 0 2rem; /* Mehr Abstand für bessere Trennung */
    flex-shrink: 0;
}

.team-name {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--primary-color);
    flex-shrink: 0;
    width: 150px; /* Etwas kleinere feste Breite für alle Teamnamen */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Simple fix: Override styling for any team-name containing "Ausstehend" or "Pending" */
.team-name[data-pending="true"] {
    color: var(--text-color) !important;
    font-weight: normal !important;
    font-size: 1rem !important;
}


.team-characters {
    display: flex;
    flex-direction: row;
    gap: 0; /* Kein zusätzlicher Abstand, da wir einheitlichen Abstand durch margin in team-member-character setzen */
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0; /* Wichtig für Text-Überlauf */
    overflow: hidden;
}

.team-member-character {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0;
    margin-right: 0.6rem; /* Etwas geringerer Abstand zwischen Charakteren */
    flex-shrink: 0;
    width: 150px; /* Etwas kleinere feste Breite für alle Charakteranzeigen */
}

.team-members-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-left: 1rem;
}

.team-member-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
}

.member-username {
    font-size: 1rem;
    color: var(--text-muted);
    margin-left: 0.3rem;
}

.matchup-result {
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
}

.matchup-result .score {
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    color: var(--text-color);
}

.matchup-status {
    text-align: center;
}

/* Hervorhebung für eigene Matchups */
.user-matchup {
    background-color: var(--accent-light) !important;
    transition: all 0.3s ease;
}

.user-matchup:hover {
    background-color: rgba(255, 69, 0, 0.15) !important;
}

/* Dickerer Border nur für die erste Spalte (Paarung) */
.matchup-pairing.user-matchup {
    border-left: 3px solid var(--accent-color) !important;
    padding-left: 12px !important;
}

.matchup-pairing.user-matchup:hover {
    border-left: 4px solid var(--accent-color) !important;
    padding-left: 11px !important;
}

/* Hervorhebung für eigene Rankings in Tabellen */
.user-ranking {
    background-color: var(--accent-light) !important;
    transition: all 0.3s ease;
    border-left: 3px solid var(--accent-color) !important;
}

.user-ranking:hover {
    background-color: rgba(255, 69, 0, 0.15) !important;
    border-left: 4px solid var(--accent-color) !important;
}

.status-badge {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 3px;
    font-size: 0.85rem;
}

.status-pending {
    background-color: var(--background-active);
    color: var(--text-muted);
}

.status-active {
    background-color: #3498db;
    color: white;
}

.status-completed {
    background-color: #2ecc71;
    color: white;
}

.status-archived {
    background-color: #f1c40f;
    color: white;
}

.knockout-bracket {
    padding: 1.5rem;
    overflow-x: auto;
}

.bracket-rounds {
    display: flex;
    gap: 2rem;
}

.bracket-round {
    min-width: 260px;
}

.round-title {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-light);
    font-size: 1.1rem;
}

.bracket-matches {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bracket-match {
    position: relative;
}

.match-card {
    background-color: var(--background-card);
    border-radius: 5px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.match-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

.match-card.completed {
    border-left: 3px solid #2ecc71;
}

.match-card.active {
    border-left: 3px solid #3498db;
}

.match-card.pending {
    border-left: 3px solid #95a5a6;
}

.match-header {
    padding: 0.5rem 1rem;
    background-color: var(--background-active);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.match-number {
    font-weight: bold;
    color: var(--text-light);
}

.match-content {
    padding: 1rem;
}

.match-footer {
    padding: 0.5rem;
    text-align: center;
    border-top: 1px solid #eee;
}

.player-row {
    padding: 0.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.player-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
}

.player-row:first-child {
    border-bottom: 1px solid #eee;
}

.player-row.winner {
    background-color: rgba(46, 204, 113, 0.1);
}

.player-score {
    font-weight: bold;
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}

/**********************************************
 * 6.5 TOURNAMENT-MODALS
 **********************************************/
/* Result button styles */
.result-button {
    margin: 0;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
}

/* Ergebniseintragung */
.score-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-input {
    width: 40px;
    text-align: center;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.score-separator {
    margin: 0 5px;
    font-weight: bold;
    color: var(--text-color);
}

.match-action-button {
    margin: 0;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
} 

.match-action-button.disabled {
    background-color: #777 !important;
    cursor: not-allowed;
}

.final-stage-style {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.final-stage-style h3 {
    text-align: center;
    margin: 1.5rem 0 1rem;
    color: var(--text-light);
    font-size: 1.2rem;
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 0.5rem;
}

.tournament-table .matchup-result {
    padding-right: 25px;
}

.tournament-table .score-input-group {
    padding-right: 10px;
}

.save-match-result, .match-action-button {
    margin: 0; 
    position: relative;
    top: -6px;
    font-size: 0.8rem; 
    padding: 0.3rem 0.5rem;
    min-width: 90px;
    min-height: 28px; 
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* Admin Turnierverwaltung */
.tournament-admin-actions {
    margin-top: 1rem;
}

.tournament-management-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.tournament-action-card {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    background-color: var(--overlay-light);
    border-radius: 5px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.tournament-action-info {
    height: 80px;
    margin-bottom: 1.5rem;
}

.tournament-action-info h4 {
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.tournament-action-info p {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text-color);
}

.registration-button {
    background-color: #8bcde7 !important;
}

.registration-button:hover {
    background-color: hsl(187, 79%, 74%);
}

.registration-close-button {
    background-color: #1d3c72 !important; 
}

.registration-close-button:hover {
    background-color: #12161f !important;
}

.start-button {
    background-color: #2ecc71 !important; 
}

.start-button:hover {
    background-color: #27ae60 !important;
}

.complete-button {
    background-color: #9b59b6 !important;
}

.complete-button:hover {
    background-color: #8e44ad !important;
}

.reactivate-button {
    background-color: #e91e63 !important;
}

.reactivate-button:hover {
    background-color: #c2185b !important;
}

.archive-button {
    background-color: #ff9500 !important;
}

.archive-button:hover {
    background-color: #e6850e !important;
}

.edit-button {
    background-color: #16a085 !important;
}

.edit-button:hover {
    background-color: #1abc9c !important;
}

.regenerate-button {
    background-color: #28a745 !important;
}

.regenerate-button:hover {
    background-color: #218838 !important;
}

.reset-button {
    background-color: #f0b104 !important; 
}

.reset-button:hover {
    background-color: #c9ab00 !important; 
}

.delete-button {
    background-color: #e74c3c;
}

.delete-button:hover {
    background-color: #8b1205;
}

.disabled-button {
    background-color: #95a5a6 !important;
    cursor: pointer;
    opacity: 0.9;
}

/* Tournament Modal Styles */
.tournament-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-dark);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.tournament-modal-content {
    background-color: var(--background-card);
    border-radius: 5px;
    max-width: 600px;
    width: 90%;
    padding: 1.5rem;
    box-shadow: var(--shadow-medium);
}

.tournament-modal-content h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.tournament-modal-content p {
    margin-bottom: 1.5rem;
}

.tournament-modal-option {
    background-color: var(--background-active);
    border-radius: 5px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.tournament-modal-option h4 {
    margin-bottom: 0.5rem;
}

.tournament-modal-option.regenerate h4 {
    color: #28a745;
}

.tournament-modal-option.reset h4 {
    color: #f0b104;
}

.tournament-modal-option.delete h4 {
    color: #e74c3c;
}

.tournament-modal-option.start h4 {
    color: #28a745;
}

.tournament-modal-option.warning h4 {
    color: #f0b104;
}

.start-warning {
    margin-bottom: 1rem;
}

.tournament-modal-option p {
    margin: 0;
    font-size: 1rem;
}

.tournament-modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

.tournament-modal-buttons form {
    display: inline;
}

.tournament-modal-buttons .button {
    min-width: 130px;
}

.button-cancel {
    background-color: #777 !important;
}

.button-cancel:hover {
    background-color: #555 !important;
}

/* New Reset Modal Styles */
.tournament-modal-option.reset-section {
    background-color: var(--background-active);
    border: 1px solid var(--warning-color);
}

.option-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.option-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.option-content {
    flex: 1;
}

.reset-options {
    margin: 1rem 0;
    padding: 1rem;
    background-color: var(--background-light);
    border-radius: 4px;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.checkbox-container input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.checkbox-container label {
    flex: 1;
    cursor: pointer;
    line-height: 1.4;
}

.checkbox-container label small {
    color: var(--text-muted);
    display: block;
    margin-top: 0.25rem;
}

.warning-box {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.warning-icon {
    color: #856404;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.warning-content {
    flex: 1;
}

.warning-content strong {
    color: #856404;
    display: block;
    margin-bottom: 0.25rem;
}

.warning-content p {
    margin: 0;
    color: #856404;
    font-size: 1rem;
}

/* Tournament Completion Warning Styles */
.tournament-completion-warning {
    max-width: 600px;
    margin: 50px auto;
    background: var(--background-elevated);
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.warning-header {
    background: var(--error-light);
    color: var(--error-color);
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.warning-header h2 {
    margin: 0 0 10px 0;
    font-size: 24px;
}

.warning-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: normal;
}

.warning-content {
    padding: 30px;
    background: var(--background-card);
}

.warning-message {
    margin-bottom: 25px;
    padding: 15px;
    background: var(--warning-light);
    border: 1px solid var(--warning-color);
    border-radius: 4px;
}

.warning-message h4 {
    margin: 0 0 10px 0;
    color: var(--warning-color);
}

.warning-message p {
    margin: 5px 0;
    color: var(--warning-color);
}

.warning-question {
    margin-bottom: 20px;
}

.warning-question h4 {
    margin: 0 0 10px 0;
    color: var(--text-color);
}

.warning-question p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.warning-buttons {
    padding: 20px 30px 30px 30px;
    border-top: 1px solid var(--border-color);
    background: var(--background-light);
}

.warning-buttons .button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: stretch;
}

.warning-buttons .button-group > * {
    flex: 1;
    max-width: 180px;
}

.warning-buttons .button {
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    line-height: 1;
}

.warning-buttons .button-cancel {
    background: var(--text-muted);
    color: var(--text-white);
}

.warning-buttons .button-cancel:hover {
    background: var(--text-color);
    color: var(--text-white);
    text-decoration: none;
}

.warning-buttons .button-danger {
    background: var(--primary-color);
    color: white;
}

.warning-buttons .button-danger:hover {
    background: var(--primary-hover);
}

.inline-form {
    display: inline;
}

.warning-buttons .inline-form {
    width: 100%;
    margin: 0;
}

/* Tournament Completion Warning in Modal */
.completion-warning {
    margin: 15px 0;
    padding: 0;
}

.warning-message-box {
    background: var(--warning-light);
    border-left: 4px solid var(--warning-color);
    padding: 12px 16px;
    margin: 10px 0;
    font-size: 14px;
    color: var(--warning-color);
    border-radius: 0 4px 4px 0;
}

.warning-message-box h4 {
    margin: 0 0 6px 0;
    color: var(--warning-color);
    font-size: 14px;
    font-weight: 600;
}

.warning-message-box p {
    margin: 0 0 4px 0;
    color: var(--warning-color);
    font-size: 13px;
    line-height: 1.4;
}

.warning-message-box p:last-child {
    margin-bottom: 0;
    font-weight: 500;
}

.warning-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.warning-content h4 {
    margin: 0 0 8px 0;
    color: var(--warning-color);
    font-size: 14px;
    font-weight: 600;
}

.warning-content p {
    margin: 0 0 5px 0;
    color: var(--warning-color);
    font-size: 13px;
    line-height: 1.4;
}

.warning-content p:last-child {
    margin-bottom: 0;
    font-weight: 500;
}

.success-message-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: var(--success-light);
    border: 1px solid var(--success-color);
    border-radius: 4px;
    margin-bottom: 10px;
}

.error-message-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: var(--error-light);
    border: 1px solid var(--error-color);
    border-radius: 4px;
    margin-bottom: 10px;
}

.message-icon {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
    font-weight: bold;
}

.success-message-box .message-icon {
    color: var(--success-color);
}

.error-message-box .message-icon {
    color: var(--error-color);
}

.success-message-box .message-content p,
.error-message-box .message-content p {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.success-message-box .message-content p {
    color: var(--success-color);
}

.error-message-box .message-content p {
    color: var(--error-color);
}

/**********************************************
 * 7. ADMIN PANEL
 **********************************************/
.admin-panel {
    background-color: var(--background-card);
    border-radius: 5px;
    box-shadow: var(--shadow-medium);
    overflow: visible;
    border: 1px solid var(--border-color);
}

.admin-header {
    background-color: var(--background-card);
    padding: 1.5rem;
    color: var(--primary-color);
    text-align: center;
    border-bottom: 3px solid var(--primary-color);
    position: relative;
}

/* Spezielle Regel für Settings-Menu im Admin-Panel */
.admin-panel .settings-menu {
    z-index: 9999;
}

.admin-header h1 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.8rem;
}

.admin-container {
    display: flex;
    min-height: 600px;
    background-color: var(--background-card);
}

.admin-sidebar {
    width: 250px;
    background-color: var(--background-elevated);
    border-right: 2px solid var(--border-color);
    padding: 1.5rem 0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

.admin-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-menu li {
    margin-bottom: 0.5rem;
}

.admin-menu a {
    display: block;
    padding: 0.8rem 1.5rem;
    color: var(--text-color);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.admin-menu a:hover {
    background-color: var(--background-hover);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.admin-menu a.active {
    background-color: var(--background-hover);
    color: var(--primary-color);
    font-weight: bold;
    border-left-color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.admin-content {
    flex: 1;
    padding: 2rem;
    background-color: var(--background-body);
    border-left: 1px solid var(--border-color);
    box-shadow: -1px 0 3px rgba(0,0,0,0.03);
}

/* Admin Dashboard */
.dashboard-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stats-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.system-status-card {
    background-color: var(--background-card);
    border-radius: 5px;
    box-shadow: var(--shadow-light);
    padding: 1.5rem;
}

.system-status-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.stat-card {
    background-color: var(--background-card);
    border-radius: 5px;
    box-shadow: var(--shadow-light);
    padding: 1.5rem;
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.stat-header {
    color: var(--text-color);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.stat-value {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.stat-footer {
    color: var(--text-muted);
    font-size: 1rem;
}

.dashboard-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.table-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.action-link {
    color: var(--primary-color);
    text-decoration: none;
}

.action-link:hover {
    text-decoration: underline;
}

.dashboard-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dashboard-link-button {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    background-color: var(--background-hover);
    border-radius: 5px;
    color: var(--text-color);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-left: 3px solid var(--primary-color);
}

.dashboard-link-button:hover {
    background-color: var(--background-active);
    transform: translateX(5px);
}

.link-icon {
    margin-right: 0.8rem;
    font-size: 1.2rem;
}

.dashboard-section {
    background-color: var(--background-card);
    border-radius: 5px;
    box-shadow: var(--shadow-light);
    padding: 1.5rem;
    margin-bottom: 0;
    height: 100%;
}

.dashboard-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Rollen-Badges */
.role-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
}

.role-admin {
    background-color: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.role-manager {
    background-color: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.role-user {
    background-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.role-organizer {
    background-color: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
}

/* System-Status im Dashboard */
.system-overview {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.status-label {
    font-weight: bold;
    color: var(--text-light);
}

.system-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.quick-link-card {
    background-color: var(--background-hover);
    border-radius: 5px;
    padding: 1.5rem 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quick-link-card:hover {
    background-color: var(--background-active);
    transform: translateY(-3px);
    box-shadow: var(--shadow-light);
    color: var(--primary-color);
}

.quick-link-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.quick-link-title {
    font-weight: bold;
}

/* Admin Tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    table-layout: auto;
}

.admin-table th {
    background-color: var(--background-active);
    padding: 0.8rem;
    text-align: left;
    border-bottom: 2px solid var(--primary-color);
}

.admin-table td {
    padding: 0.8rem;
    border-bottom: 1px solid var(--border-color);
}

.admin-table tr:hover {
    background-color: var(--background-hover);
}

.action-buttons a {
    margin-right: 0.5rem;
    color: var(--primary-color);
    text-decoration: none;
}

.action-buttons a:hover {
    text-decoration: underline;
}

.action-button {
    margin-right: 0.5rem;
}

.admin-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.action-group {
    display: flex;
    gap: 0.5rem;
}

.search-group {
    flex-grow: 1;
    max-width: 600px;
}

.search-form {
    width: 100%;
}

.search-input-group {
    display: flex;
    gap: 0.5rem;
}

.search-button {
    margin-top: 0;
}

.user-filters {
    display: flex;
    margin-bottom: 1.5rem;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.role-filter {
    min-width: 150px;
}

.small-button {
    padding: 0.3rem 0.7rem;
    font-size: 1rem;
    margin-top: 0;
}

.danger-button {
    background-color: #e74c3c;
}

.danger-button:hover {
    background-color: #c0392b;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--background-card);
    padding: 0;
    border-radius: 5px;
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-medium);
    animation: modalOpen 0.3s ease;
}

@keyframes modalOpen {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    background-color: var(--primary-color);
    color: white;
    padding: 1rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
}

.close-modal {
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.close-modal:hover {
    color: #f1f1f1;
}

.modal-body {
    padding: 1.5rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.cancel-button {
    background-color: #95a5a6;
}

.cancel-button:hover {
    background-color: #7f8c8d;
}

.submit-button {
    background-color: #2ecc71;
}

.submit-button:hover {
    background-color: #27ae60;
}

.warning-text {
    color: var(--primary-color);
    font-weight: bold;
    margin-top: 0.5rem;
}

.help-text {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.3rem;
    display: block;
}

/* Filter and Search */
.user-filter {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.user-filter input,
.user-filter select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.user-filter input {
    flex: 1;
}

/* Status Indicators */
.status-used {
    background-color: rgba(149, 165, 166, 0.2);
    color: #333;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
}

.status-active {
    background-color: var(--success-color);
    color: var(--text-white);
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
}

.status-open {
    background-color: rgba(52, 152, 219, 0.2);
    color: #333;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
}

.status-expired {
    background-color: rgba(231, 76, 60, 0.2);
    color: #333;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
}

.status-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.status-card {
    background-color: var(--background-card);
    border-radius: 5px;
    box-shadow: var(--shadow-light);
    padding: 1.5rem;
    text-align: center;
}

.status-indicator {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

.status-ok {
    color: #2ecc71;
}

.status-error {
    color: var(--primary-color);
}

.system-section {
    background-color: var(--background-card);
    border-radius: 5px;
    box-shadow: var(--shadow-light);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.system-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/**********************************************
 * 8. SYSTEM-STATUS
 **********************************************/
/* Datenbank-Aktionen im System-Status-Bereich */
#database-actions-section .section-description {
    margin-bottom: 1.5rem;
    color: var(--text-light);
    text-align: center;
}

.db-action-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.db-action-card {
    background-color: var(--background-card);
    border-radius: 5px;
    border-left: 4px solid var(--primary-color);
    padding: 1.2rem;
    box-shadow: var(--shadow-light);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

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

.db-action-card h4 {
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.db-action-card p {
    color: var(--text-light);
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
    line-height: 1.4;
    flex-grow: 1;
}

.db-action-card .action-button {
    align-self: flex-start;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    margin-top: auto;
}

.db-action-card .action-button:hover {
    background-color: var(--primary-hover);
}

/* Backup-Liste */
.backup-list-card {
    grid-column: 1 / -1;
}

.backup-list {
    margin-top: 1.5rem;
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.backup-list h5 {
    color: var(--text-light);
    margin-bottom: 0.8rem;
    font-size: 1rem;
}

.backup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.backup-table th,
.backup-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.backup-table th {
    color: var(--text-light);
    font-weight: bold;
    border-bottom: 2px solid var(--primary-color);
}

.backup-table tr:hover {
    background-color: var(--background-hover);
}

.empty-list {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
}

/* Alte Styles für Abwärtskompatibilität */
.database-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.database-actions .action-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.8rem 1.2rem;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    min-width: 200px;
    margin-top: 0;
}

.database-actions .action-button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.database-actions .action-button:active {
    transform: translateY(0);
}

/* Info Buttons Grid */
.info-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.button-secondary {
    background: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
}

.button-secondary:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.button i {
    margin-right: 0.5rem;
}

section.tournament-info .info-box {
    min-height: 280px; /* Gleiche Höhe für alle Boxen */
    display: flex;
    flex-direction: column;
}

/* Profile specific card styles */
.profile-card-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.profile-card-container .info-box {
    position: relative;
    padding: 1.5rem;
    padding-bottom: 60px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    margin: 0 auto;
}

.profile-card-container .info-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

/* Fix für Profile-Formulare (Passwort ändern, Konto löschen) */
.profile-form .tournament-info {
    display: block;
    text-align: center;
}

.notification-date, .invitation-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
/* Character Card Selection and Hover Effects (Tournament Registration) */
.character-profile-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.character-profile-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: var(--shadow-medium);
}

.character-profile-card.selected {
    border: 3px solid var(--primary-color);
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1);
}

.character-profile-card.selected:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.2), var(--shadow-medium);
}

/* Hide the radio button */
.character-profile-card input[type="radio"] {
    display: none;
}

/* Style the select button in selected state */
.character-profile-card.selected .delete-form label {
    background-color: var(--primary-color);
    color: white;
}

.character-profile-card.selected .delete-form label:hover {
    background-color: var(--primary-hover);
}

/* Character Card Selection - Tournament Registration Specific */
.character-profile-cards .character-profile-card.selected {
    border: 3px solid var(--primary-color) \!important;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1) \!important;
}

.character-profile-cards .character-profile-card.selected:hover {
    border: 3px solid var(--primary-color) \!important;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.2), var(--shadow-medium) \!important;
}

/* Tournament Registration - Character Selection Visual Feedback */
form .character-profile-cards .character-profile-card.selected {
    border: 3px solid var(--primary-color) \!important;
    background-color: rgba(231, 76, 60, 0.05) \!important;
}

form .character-profile-cards .character-profile-card.selected .card-header {
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
}

/* Visual feedback for the label/button inside selected card */
form .character-profile-cards .character-profile-card.selected .delete-form label {
    background-color: var(--primary-color) \!important;
    color: white \!important;
    font-weight: 600;
}

/* Clear visual indicator for selected character cards */
.character-profile-card.selected {
    position: relative;
    overflow: visible \!important;
}

.character-profile-card.selected::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 3px solid var(--primary-color);
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
}

.character-profile-card.selected::before {
    content: "✓";
    position: absolute;
    top: -30px;
    right: 10px;
    background-color: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Tournament Character Selection Checkbox */
.text-center {
    text-align: center;
}

.tournament-submit {
    margin-top: 1.5rem;
}

.character-selection-check {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.character-radio-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.character-select-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
}

.character-radio-input:checked + .character-select-label .checkbox-custom {
    background-color: var(--primary-color);
}

.character-radio-input:checked + .character-select-label .checkbox-custom::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.character-radio-input:checked + .character-select-label {
    font-weight: 600;
    color: var(--primary-color);
}

/* Team Registration Improvements */
.team-registration-container {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.team-hint-box {
    margin-top: 2rem;
}

/* Character selection checkbox spacing */
.delete-form .character-selection-check {
    margin-top: 0.5rem;
}

/* Register Single - Selected Card Styling */
form .character-profile-cards .character-profile-card.selected {
    border: 3px solid var(--primary-color) \!important;
    position: relative;
    overflow: visible \!important;
}

form .character-profile-cards .character-profile-card.selected::before {
    content: "✓";
    position: absolute;
    top: -25px;
    right: 10px;
    background-color: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Fix for selected character cards with orange border */
.character-profile-cards .character-profile-card.selected {
    border-color: var(--primary-color) \!important;
    border-width: 3px \!important;
    position: relative \!important;
    overflow: visible \!important;
}

.character-profile-cards .character-profile-card.selected::before {
    content: "✓";
    position: absolute;
    top: -25px;
    right: 10px;
    background-color: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Fix gap between orange border and card */
.character-profile-cards .character-profile-card.selected {
    border: 3px solid var(--primary-color) \!important;
    position: relative \!important;
    overflow: visible \!important;
    box-shadow: 0 0 0 3px var(--primary-color), var(--shadow-light) \!important;
}

.character-profile-cards .character-profile-card.selected::after {
    display: none \!important;
}

/* Remove conflicting border styles */
form .character-profile-cards .character-profile-card.selected {
    border: 3px solid var(--primary-color) \!important;
    margin: -1px \!important;
}

/**********************************************
 * 6.6 FINAL STANDINGS
 **********************************************/

/* Final Standings Table */
.final-standings-table {
    margin-top: 2rem;
}

.final-standings-table h3 {
    color: var(--text-color);
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.final-standings-table .tournament-table {
    margin-top: 1rem;
}

/* Rank-specific styling */
.rank-1 {
    background-color: #fff8dc !important;
    color: #b8860b !important;
    font-weight: bold !important;
}

.rank-2 {
    background-color: #f8f8ff !important;
    color: #708090 !important;
    font-weight: bold !important;
}

.rank-3 {
    background-color: #fdf5e6 !important;
    color: #cd853f !important;
    font-weight: bold !important;
}

/* User highlighting in final standings */
.final-standings-table .user-ranking {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-left: 4px solid var(--primary-color) !important;
}

.final-standings-table .user-ranking td {
    font-weight: 600;
}

.current-user-highlight {
    background-color: var(--accent-light) !important;
    border-left: 3px solid var(--accent-color) !important;
}

.current-user-highlight td {
    font-weight: 600;
}


    .crown {
        position: relative;
        top: 0;
        transform: none;
        margin-top: 0.5rem;
    }

/* Tournament accordion for final standings - always open */
.tournament-accordion-content.tournament-accordion-open {
    display: block !important;
    max-height: none !important;
}

/* Special styling for completed tournament status */
.tournament-header .status.completed {
    background-color: var(--success-color);
    color: var(--text-white);
    position: relative;
}

.tournament-header .status.completed::after {
    content: " 🏆";
}

/* Modal Warning and Success Message Boxes */
.warning-message-box {
    background: var(--warning-light);
    border: 2px solid var(--warning-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
    color: var(--text-color);
}

.warning-message-box h4 {
    margin: 0 0 1rem 0;
    color: var(--warning-color);
    font-size: 1.2rem;
    font-weight: 600;
}

.warning-message-box p {
    margin: 0.8rem 0;
    line-height: 1.6;
    color: var(--text-color);
    font-size: 1rem;
}

.success-message-box {
    background: var(--success-light);
    border: 2px solid var(--success-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
    color: var(--text-color);
}

.success-message-box h4 {
    margin: 0 0 1rem 0;
    color: var(--success-color);
    font-size: 1.2rem;
    font-weight: 600;
}

.success-message-box p {
    margin: 0.8rem 0;
    line-height: 1.6;
    color: var(--text-color);
    font-size: 1rem;
}

.error-message-box {
    background: var(--error-light);
    border: 2px solid var(--error-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
    color: var(--text-color);
}

.error-message-box h4 {
    margin: 0 0 1rem 0;
    color: var(--error-color);
    font-size: 1.2rem;
    font-weight: 600;
}

.error-message-box p {
    margin: 0.8rem 0;
    line-height: 1.6;
    color: var(--text-color);
    font-size: 1rem;
}

.error-message-box .matchup-details {
    margin: 0.8rem 0;
}

.error-message-box .matchup-details p {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--text-color);
}

.error-message-box .matchup-item {
    margin: 0.3rem 0;
    padding-left: 0.5rem;
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.6;
}

/* Warning Button Style */
.button-warning {
    background-color: var(--warning-color) !important;
    color: var(--text-white) !important;
    border-color: var(--warning-color) !important;
}

.button-warning:hover {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    opacity: 0.8;
}

/* Disabled Button Style */
.button-disabled,
.button:disabled {
    background-color: var(--text-muted) !important;
    color: var(--text-white) !important;
    border-color: var(--text-muted) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.button-disabled:hover,
.button:disabled:hover {
    background-color: var(--text-muted) !important;
    border-color: var(--text-muted) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/**********************************************
 * INFO PORTAL - MODERN CALLOUT BOXES
 **********************************************/
.info-callout-box {
    background-color: var(--background-card);
    color: var(--text-color);
    padding: 2rem;
    border-radius: 5px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    border-left: 4px solid var(--primary-color);
    box-shadow: var(--shadow-light);
    transition: all var(--transition-fast);
}

.info-callout-box:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.info-callout-header {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.info-callout-header h3 {
    color: var(--primary-color);
    font-size: 1.4em;
    margin-bottom: 8px;
    font-weight: 600;
}

.info-callout-header .subtitle {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.95em;
}

.info-callout-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-callout-item {
    background-color: var(--background-elevated);
    padding: 1rem;
    margin: 8px 0;
    border-radius: 5px;
    border-left: 3px solid var(--primary-color);
    transition: all var(--transition-fast);
    position: relative;
}

.info-callout-item:hover {
    background-color: var(--background-hover);
    transform: translateX(5px);
    border-left-width: 4px;
}

.info-callout-item::before {
    content: attr(data-icon);
    margin-right: 12px;
    font-size: 1.2em;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.info-callout-item strong {
    color: var(--primary-color);
    font-weight: 600;
}

.info-callout-item p {
    margin: 0;
    color: var(--text-color);
    line-height: 1.5;
}


/**********************************************
 * INFO PORTAL - STEP GUIDE
 **********************************************/
.info-step-guide {
    margin: 20px 0;
}

.info-step {
    display: flex;
    align-items: flex-start;
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(90deg, var(--background-elevated) 0%, var(--background-card) 100%);
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
    transition: all var(--transition-fast);
}

.info-step:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-light);
}

.info-step-number {
    background: var(--primary-color);
    color: var(--text-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2em;
    margin-right: 20px;
    flex-shrink: 0;
    box-shadow: var(--shadow-light);
}

.info-step-content h4 {
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: 1.1em;
    font-weight: 600;
}

.info-step-content p {
    color: var(--text-color);
    margin: 0;
    line-height: 1.5;
}


/**********************************************
 * INFO PORTAL - STRUKTURIERTE REGEL-LISTE
 **********************************************/
.info-rule-list {
    list-style: none;
    margin: 20px 0;
}

.info-rule-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin: 8px 0;
    background-color: var(--background-card);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
    transition: all var(--transition-fast);
}

.info-rule-item:hover {
    background-color: var(--background-hover);
    transform: translateX(3px);
}

.info-rule-icon {
    color: var(--primary-color);
    font-size: 1.3em;
    margin-right: 15px;
    min-width: 25px;
    text-align: center;
    font-weight: bold;
}

.info-rule-text {
    color: var(--text-color);
    font-weight: 500;
}


/**********************************************
 * INFO PORTAL - TURNIER SYSTEME BADGE LAYOUT
 **********************************************/
.info-systems-grid {
    display: grid;
    gap: 25px;
    margin: 20px 0;
}

.info-system-badge-container {
    background-color: var(--background-elevated);
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow-light);
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
}

.info-system-badge-container:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.info-badge-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
}

.info-badge-icon {
    font-size: 2em;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.info-badge-title {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--text-color);
}

.info-badge-subtitle {
    color: var(--text-muted);
    font-size: 0.9em;
}

.info-badge-description {
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 15px;
}

.info-badge-features {
    list-style: none;
    margin: 15px 0 0 0;
}

.info-badge-features li {
    padding: 5px 0;
    padding-left: 20px;
    position: relative;
    color: var(--text-color);
    font-size: 0.95em;
}

.info-badge-features li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}


/**********************************************
 * INFO PORTAL - FAQ ACCORDION STYLE
 **********************************************/
.info-faq-accordion {
    margin: 20px 0;
}

.info-accordion-item {
    background: var(--background-elevated);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 10px 0;
    overflow: hidden;
}

.info-accordion-header {
    background: var(--background-card);
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-fast);
}

.info-accordion-header:hover {
    background: var(--background-hover);
}

.info-accordion-header.active {
    background: var(--primary-color);
    color: white;
}

.info-accordion-icon {
    transition: transform var(--transition-fast);
    color: var(--primary-color);
    font-weight: bold;
}

.info-accordion-header.active .info-accordion-icon {
    transform: rotate(180deg);
    color: white;
}

.info-accordion-content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: all var(--transition-fast);
    background: var(--background-elevated);
}

.info-accordion-content.active {
    padding: 20px;
    max-height: 300px;
}

.info-accordion-content p {
    color: var(--text-light);
    line-height: 1.6;
}


/**********************************************
 * INFO PORTAL - KONTAKT TEAM ÜBERSICHT
 **********************************************/
.info-team-intro {
    text-align: center;
    margin-bottom: 30px;
    color: var(--text-color);
    font-size: 1.1em;
    font-weight: 600;
}

.info-team-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.info-team-member {
    background: var(--background-elevated);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: var(--shadow-light);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.info-team-member::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-hover) 100%);
}

.info-team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.info-member-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: white;
    margin: 0 auto 15px;
    overflow: hidden;
    border: 3px solid var(--primary-color);
}

.info-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.info-member-name {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 5px;
}

.info-member-role {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 15px;
}

.info-member-contacts {
    list-style: none;
}

.info-member-contacts li {
    padding: 5px 0;
    color: var(--text-light);
    font-size: 0.9em;
}

    
    .info-member-contacts li {
        font-size: 0.85em;
    }

/**********************************************
 * INFO PORTAL - PROFILE HEADER ENHANCEMENT
 **********************************************/
/* Orangener Trennstrich nur für Info Portal */
.profile-header.info-page h1::after {
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background: var(--primary-color);
    margin: 15px auto;
}

/**********************************************
 * RANDOM DRAW STYLES
 **********************************************/

/* Random Draw spezifische Styles */
.hero-section {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--background-card), var(--background-light));
    border-radius: 15px;
    border-left: 5px solid var(--warning-color);
}

.hero-section h1 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.hero-section p {
    color: var(--text-light);
    font-size: 1.1rem;
}

/* Teilnehmer Pool */
.participant-pool {
    background: var(--background-elevated);
    border: 2px solid var(--warning-color);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.pool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--warning-color);
}

.pool-counter {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color);
}

.pool-controls {
    display: flex;
    gap: 10px;
}

.pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    min-height: 120px;
    padding: 10px 0;
}

.participant-card {
    background: var(--background-elevated);
    color: var(--text-color);
    border: 2px solid var(--warning-color);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: var(--shadow-light);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.participant-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-color);
}

.participant-card.focused {
    background: linear-gradient(135deg, var(--warning-color), var(--accent-color)) !important;
    color: var(--text-white) !important;
    transform: scale(1.1);
    box-shadow: var(--shadow-heavy);
    z-index: 10;
}

.participant-card.winner {
    background: linear-gradient(135deg, var(--warning-color), var(--accent-color)) !important;
    color: white !important;
    transform: scale(1.2);
    animation: winnerPulse 2s infinite;
    z-index: 15;
}

.participant-card.eliminated {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d) !important;
    transform: scale(0.9);
    opacity: 0.6;
    text-decoration: line-through;
}

.participant-card .remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--error-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}

.participant-card:hover .remove-btn {
    display: flex;
}

.empty-pool-message {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    background: var(--background-light);
    border-radius: 10px;
    border: 2px dashed var(--border-color);
}

@keyframes winnerPulse {
    0%, 100% { 
        box-shadow: 0 6px 25px rgba(255, 107, 53, 0.7);
        transform: scale(1.2);
    }
    50% { 
        box-shadow: 0 8px 35px rgba(255, 107, 53, 1);
        transform: scale(1.25);
    }
}

/* Ziehungs-Bereich */
.draw-section {
    text-align: center;
    margin: 30px 0;
}

.draw-button {
    background: linear-gradient(135deg, var(--warning-color), var(--accent-color));
    color: white;
    border: none;
    padding: 20px 40px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
    margin: 20px;
}

.draw-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
    background: linear-gradient(135deg, var(--accent-color), #e55a2b);
}

.draw-button:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.draw-button:disabled {
    background: var(--border-color);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    color: var(--text-muted);
}

/* Ziehungs-Animation */
.drawing-animation {
    padding: 30px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-radius: 15px;
    color: white;
    margin: 20px 0;
    font-size: 18px;
}

.drawing-spinner {
    font-size: 48px;
    animation: spin 1s linear infinite;
    margin: 20px 0;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Ergebnis-Anzeige - oben angepinnt wie Notification */
.result-display {
    background: var(--success-light);
    color: var(--text-color);
    border-left: 4px solid var(--success-color);
    padding: 12px 20px;
    border-radius: 0 0 6px 6px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    text-align: left;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.result-display.show {
    transform: translateY(0);
}

.result-display h2 {
    display: none;
}

.winner-name {
    font-size: 14px;
    margin: 0;
    color: var(--text-color);
    font-weight: 500;
}

.winner-name::before {
    content: "Gezogen: ";
    color: var(--text-muted);
    font-weight: normal;
}

/* Nach-Ziehungs-Optionen - Website Design */
.post-draw-options {
    background: var(--background-card);
    border-left: 4px solid var(--warning-color);
    border-radius: 8px;
    padding: 15px 20px;
    margin: 15px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    animation: slideDown 0.3s ease-out;
}

.post-draw-options h4 {
    color: var(--text-color);
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
}

.option-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.option-buttons .btn {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-width: 160px;
}

.option-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

@keyframes slideDown {
    from { 
        opacity: 0; 
        transform: translateY(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Form Styling für Random Draw */
.random-draw .form-group,
.form-group {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--background-light);
    border-radius: 8px;
    border-left: 4px solid var(--warning-color);
}

.random-draw .form-group label,
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color);
}

.random-draw .form-group .form-control,
.form-group .form-control {
    margin-bottom: 10px;
}

/* User Selection Header */
.user-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.selection-counter {
    background: var(--warning-color);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: bold;
}

/* Search Container */
.user-search-container {
    position: relative;
    margin-bottom: 8px;
}

.user-search-container .form-control {
    padding-right: 40px;
    margin-bottom: 0;
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 16px;
}

/* User Select Dropdown */
.user-select-dropdown {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-elevated);
    margin-bottom: 12px;
    max-height: 250px;
    overflow: hidden;
}

.user-options-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
}

.user-option {
    margin: 4px 0;
}

.no-results {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-style: italic;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin: 0;
    font-weight: normal;
    min-height: 48px;
}

.checkbox-label:hover {
    background: var(--warning-light);
}

/* Custom Checkbox Styling */
.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    margin-right: 15px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
    background: var(--background-body);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: linear-gradient(135deg, var(--warning-color), var(--accent-color));
    border-color: var(--warning-color);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    font-weight: bold;
}

.username {
    color: var(--text-color);
    font-size: 15px;
    user-select: none;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"]:checked ~ .username {
    color: var(--warning-color);
    font-weight: bold;
}

.select-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    align-items: center;
}

.select-controls .btn-sm {
    padding: 4px 8px;
    font-size: 13px;
}

.select-controls .btn-secondary {
    background: var(--border-color);
    color: var(--text-color);
    border: 1px solid var(--border-dark);
}

.select-controls .btn-secondary:hover {
    background: var(--text-muted);
    color: white;
}

/* Moderne Button Styles */
.btn-outline {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background: var(--warning-light);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

/* Hinzufügen Button mit User ausgewählt */
.btn-outline.has-selection {
    background: var(--warning-light);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.btn-outline.has-selection:hover {
    background: var(--warning-color);
    color: white;
}

.btn-modern {
    background: linear-gradient(135deg, var(--warning-color), var(--accent-color));
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.btn-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.btn-modern:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3);
}

.btn-icon {
    font-size: 16px;
}

/* Manual Button Container */
.manual-button-container {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
}


    .winner-name {
        font-size: 2rem;
    }

/* Auth Container - Moderne Card mit Gradient Header */
.auth-container {
    max-width: min(90vw, 480px);
    margin: 2rem auto;
    background: var(--background-elevated);
    border-radius: 16px;
    box-shadow: var(--shadow-heavy);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.auth-container-wide {
    max-width: min(90vw, 600px);
}

.auth-header {
    background: linear-gradient(135deg, var(--primary-color), var(--warning-color));
    color: white;
    padding: 2rem;
    text-align: center;
}

.auth-header h1 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
}

.auth-header p {
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
    font-size: 1rem;
}

.auth-body {
    padding: 2rem;
}

/* Auth Form Styles */
.auth-body .form-group {
    margin-bottom: 1.5rem;
}

.auth-body .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
}

/* Pflichtfeld-Kennzeichnung - Rote Sterne */
.auth-body .form-group label {
    color: var(--text-color);
}

.auth-body .form-group label:contains("*") {
    color: var(--text-color);
}

/* Alle * in Labels rot färben */
.auth-body .form-group label {
    position: relative;
}

.auth-body .form-group label[for*="username"],
.auth-body .form-group label[for*="password"],
.auth-body .form-group label[for*="invitation_code"] {
    color: var(--text-color);
}

/* CSS kann nicht direkt * in Text färben, daher über JavaScript */

/**********************************************
 * POLLS (UMFRAGEN) STYLES
 **********************************************/

/* Polls Sections */
.polls-section {
    margin-bottom: 2rem;
}

/* Polls Grid */
.polls-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Poll Cards */
.poll-card {
    background: var(--background-elevated);
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid var(--border-color);
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
}

.poll-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.poll-card.active-poll {
    border-left-color: var(--primary-color);
}

.poll-card.ended-poll {
    border-left-color: var(--success-color);
}

.poll-card.archived-poll {
    border-left-color: var(--text-light);
    opacity: 0.9;
}

/* Poll Header */
.poll-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
    font-size: 1.2rem;
}

.poll-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.poll-status, .poll-votes {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 1rem;
    color: var(--text-light);
}

.poll-status.active {
    color: var(--primary-color);
}

.poll-status.ended {
    color: var(--success-color);
}

.poll-status.archived {
    color: var(--text-light);
}

/* Poll Description */
.poll-description {
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Poll Form */
.poll-form {
    margin-top: 1rem;
}

.poll-options {
    margin: 1rem 0;
}

.poll-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.poll-option:hover {
    background-color: var(--background-light);
}

.poll-option input[type="radio"],
.poll-option input[type="checkbox"] {
    margin: 0;
}

.poll-option label {
    cursor: pointer;
    margin: 0;
    flex: 1;
    color: var(--text-color);
}

/* Poll Actions */
.poll-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.poll-voted {
    background-color: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: var(--success-color);
    padding: 0.75rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.poll-login-required {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 1rem;
    text-align: center;
}

.poll-login-required a {
    color: var(--primary-color);
    text-decoration: none;
}

.poll-login-required a:hover {
    text-decoration: underline;
}

/* Admin Poll Actions */
.admin-poll-actions {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Poll Button Fixes */
.admin-poll-actions .button-small,
.poll-actions .button,
.poll-actions .button-small {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 80px;
    padding: 0.4rem 0.8rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    background: var(--primary-color);
    color: white;
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1.2;
}

.admin-poll-actions .button-small.danger {
    background: #dc3545;
}

.admin-poll-actions .button-small:hover,
.poll-actions .button:hover,
.poll-actions .button-small:hover {
    text-decoration: none;
}

/* Fix für Delete-Form Buttons */
.delete-form {
    display: inline-block;
    margin: 0;
}

.delete-form .button-small {
    margin: 0;
}

.admin-actions {
    margin-top: 1rem;
}

/* Archive Toggle */
.archive-toggle {
    margin-top: 1rem;
}

.archive-content {
    margin-top: 1.5rem;
}

/* Button Variations */
.button-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    background: var(--primary-color);
    color: white;
}

.button-small:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.button-small.danger {
    background: #dc3545;
}

.button-small.danger:hover {
    background: #c82333;
}

/* Delete Form */
.delete-form {
    display: inline;
}

/* Text Info */
.text-info {
    color: var(--info-color);
    font-size: 0.875rem;
}

/* Poll Results Styles */
.poll-results {
    margin-top: 2rem;
}

.poll-result-item {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 6px;
    background: var(--background-light);
}

.poll-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.poll-result-text {
    font-weight: 500;
    color: var(--text-color);
}

.poll-result-stats {
    color: var(--text-light);
    font-size: 1rem;
}

.poll-result-bar {
    height: 8px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.poll-result-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--warning-color));
    transition: width 0.8s ease;
}

/* Text Answers */
.text-answers {
    margin-top: 1.5rem;
}

.text-answer {
    background: var(--background-elevated);
    border-left: 3px solid var(--primary-color);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0 6px 6px 0;
}

.text-answer-content {
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.text-answer-meta {
    color: var(--text-light);
    font-size: 0.875rem;
}

/* Poll Create/Edit Forms */
.poll-create-form,
.poll-edit-form {
    max-width: 800px;
}

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-light);
}

.form-section:last-child {
    border-bottom: none;
}

.form-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.form-hint {
    color: var(--text-light);
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* Poll Type Options */
.poll-type-options {
    display: grid;
    gap: 1rem;
}

.poll-type-option {
    background: var(--background-light);
    border-radius: 8px;
    padding: 1rem;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.poll-type-option:hover {
    border-color: var(--border-color);
}

.poll-type-option input[type="radio"]:checked + label {
    color: var(--primary-color);
}

.poll-type-option input[type="radio"]:checked ~ .poll-type-option {
    border-color: var(--primary-color);
    background: rgba(231, 76, 60, 0.05);
}

.poll-type-option input[type="radio"] {
    margin-right: 0.75rem;
}

.poll-type-option label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.poll-type-option label strong {
    font-size: 1rem;
}

.poll-type-option label span {
    font-size: 0.875rem;
    color: var(--text-light);
}

/* Option Inputs */
.option-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.option-input input {
    flex: 1;
}

.remove-option {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.remove-option:hover {
    background: #c82333;
}

/* DateTime Controls */
.datetime-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.quick-duration {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quick-duration button {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.quick-duration button:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.form-actions .button,
.form-actions .button-secondary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    font-size: 1rem;
    font-weight: normal;
    text-decoration: none;
    transition: background-color var(--transition-fast);
    white-space: nowrap;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;
}

/* Standard Button-Styles für Form Actions */
.form-actions .button {
    background-color: var(--primary-color);
    color: white;
}

.form-actions .button-secondary {
    background-color: #95a5a6;
    color: white;
}

.form-actions .button:hover {
    background-color: var(--primary-hover);
}

.form-actions .button-secondary:hover {
    background-color: #7f8c8d;
}

/* Poll Info (Edit Page) */
.poll-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.poll-info-item {
    background: var(--background-light);
    padding: 1rem;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.poll-info-item strong {
    color: var(--text-light);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.poll-info-item span {
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Readonly Options */
.readonly-options {
    background: var(--background-light);
    border-radius: 8px;
    padding: 1rem;
}

.readonly-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
}

.readonly-option:last-child {
    border-bottom: none;
}

.option-number {
    background: var(--primary-color);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

.option-text {
    flex: 1;
    color: var(--text-color);
}

.option-votes {
    color: var(--text-light);
    font-size: 0.875rem;
}

/* Warning Box */
.warning-box {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #856404;
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Multi-Question Blocks */
.question-block {
    background: var(--background-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.question-block:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-light);
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.question-header h4 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.question-controls {
    display: flex;
    gap: 0.5rem;
}

.question-content {
    margin-top: 1rem;
}

/* Question Type Options */
.question-type-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.question-type-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--background-elevated);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.question-type-option:hover {
    border-color: var(--primary-color);
}

.question-type-option input[type="radio"]:checked + label {
    color: var(--primary-color);
}

.question-type-option:has(input[type="radio"]:checked) {
    border-color: var(--primary-color);
    background: rgba(231, 76, 60, 0.05);
}

.question-type-option label {
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.question-type-option input[type="radio"] {
    margin: 0;
}

/* Question Options */
.question-options {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--background-elevated);
    border-radius: 6px;
    border: 1px solid var(--border-light);
}

.question-options label {
    font-weight: 500;
    margin-bottom: 0.75rem;
    display: block;
    color: var(--text-color);
}

.options-container {
    margin-bottom: 1rem;
}

.remove-question-option {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.remove-question-option:hover {
    background: #c82333;
}

/* Question Actions */
.question-actions {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
    margin: 0;
}

.checkbox-group label {
    margin: 0;
    cursor: pointer;
    color: var(--text-color);
}

/* Homepage Polls */
.homepage-polls {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.homepage-poll-item {
    background: var(--background-light);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--primary-color);
    transition: all 0.3s ease;
}

.homepage-poll-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-light);
}

.homepage-poll-item .poll-header h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
    font-size: 1.1rem;
}

.homepage-poll-item .poll-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.homepage-poll-item .poll-status,
.homepage-poll-item .poll-votes {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

.homepage-poll-item .poll-status.active {
    color: var(--primary-color);
}

.homepage-poll-item .poll-description {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.homepage-poll-item .poll-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.poll-voted-indicator {
    color: var(--success-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}


.auth-body .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-elevated);
    color: var(--text-color);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.auth-body .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.auth-body .form-control::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

/* Auth Button */
.auth-button {
    width: 100%;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, var(--primary-color), var(--warning-color));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.auth-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
}

.auth-button:disabled {
    background: #6c757d;
    color: #ffffff;
    opacity: 1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

/* Wrapper für Tooltip bei disabled buttons */
.auth-button-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

.auth-button-wrapper:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    margin-bottom: 5px;
    pointer-events: none;
}

/* Normaler Cursor für Elemente mit Tooltip */
[title] {
    cursor: default;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

/* Auth Footer */
.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.auth-footer p {
    margin: 0;
    color: var(--text-light);
}

.auth-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.auth-link:hover {
    text-decoration: underline;
    color: var(--warning-color);
}

/* Flash Messages in Auth */
.auth-body .flash-messages {
    margin-bottom: 1.5rem;
}

.auth-body .flash-message {
    background-color: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: var(--primary-color);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

/* Error Messages */
.auth-body .error-message {
    display: block;
    color: var(--primary-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    margin-left: 0.25rem;
}


/**********************************************
 * POLLS SYSTEM STYLES
 **********************************************/

/* ===== POLL LIST STYLES (polls.html) ===== */

/* Admin Poll Actions Styling */
.admin-poll-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.admin-poll-actions form {
    margin: 0;
}

.button-small.danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.button-small.danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}


/* ===== POLL RESULTS STYLES (results.html) ===== */

/* Poll Results Header */
.poll-results-header {
    margin-bottom: 2rem;
}

.poll-results-info {
    background: var(--background-light);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.poll-meta-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-light);
}

.admin-results-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-light);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.results-table th,
.results-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.results-table th {
    background: var(--background-light);
    font-weight: 600;
}

.voters-details summary {
    cursor: pointer;
    color: var(--primary-color);
}

.voters-list {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.voter-name {
    background: var(--background-light);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.admin-text-summary {
    background: var(--background-light);
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
}

/* Multi-Question Results Styling */
.question-results {
    margin-bottom: 2rem;
}

.question-results-title {
    color: var(--text-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
}

.question-results-title .required {
    color: var(--danger-color);
    margin-left: 0.25rem;
}

.question-stats {
    margin-top: 1rem;
    color: var(--text-light);
    font-size: 1rem;
    display: flex;
    gap: 1rem;
}

.question-separator {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 2rem 0;
}

/* Participants List Styling */
.participants-list {
    margin-top: 1.5rem;
}

.participant-card {
    background: var(--background-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.participant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    background: var(--background-elevated);
    transition: background-color 0.2s ease;
}

.participant-header:hover {
    background: var(--background-hover);
}

.participant-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.participant-info i {
    color: var(--primary-color);
}

.participant-time {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

.toggle-icon {
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.participant-details {
    padding: 0 1rem 1rem 1rem;
    border-top: 1px solid var(--border-light);
}

.participant-answer {
    margin-bottom: 1.5rem;
}

.participant-answer:last-child {
    margin-bottom: 0;
}

.answer-question {
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.answer-content {
    background: var(--background-light);
    padding: 0.75rem;
    border-radius: 6px;
    border-left: 3px solid var(--primary-color);
}

.answer-content.text-answer {
    border-left-color: var(--info-color);
}

.answer-content.choice-answer {
    border-left-color: var(--success-color);
}

.answer-content.no-answer {
    border-left-color: var(--text-muted);
    color: var(--text-muted);
    font-style: italic;
}

.choice-answer ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.choice-answer li {
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.choice-answer li i {
    color: var(--success-color);
    font-size: 0.875rem;
}

/* ===== POLL EDIT STYLES (edit_poll.html) ===== */

/* Edit Poll Multi-Question Styling */
.readonly-questions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.readonly-question {
    background: var(--background-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1.5rem;
}

.readonly-question .question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.readonly-question h4 {
    margin: 0;
    color: var(--text-color);
    flex: 1;
}

.readonly-question .required {
    color: var(--danger-color);
    margin-left: 0.25rem;
}

.question-type-badge {
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    white-space: nowrap;
}

.question-options-readonly {
    margin: 1rem 0;
}

.readonly-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}

.readonly-option:last-child {
    border-bottom: none;
}

.option-number {
    color: var(--text-light);
    font-weight: 600;
    min-width: 1.5rem;
}

.option-text {
    flex: 1;
    color: var(--text-color);
}

.option-votes {
    color: var(--text-light);
    font-size: 0.875rem;
}

.poll-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.poll-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-light);
}

/* Tournament Winner Highlight */
.tournament-winner {
    font-weight: bold;
    color: var(--primary-color);
}

/* === SETTINGS DROPDOWN - NEU === */
.settings-dropdown {
    position: relative;
}

.settings-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.settings-btn:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

/* Hamburger Lines */
.hamburger-line {
    display: block;
    width: 18px;
    height: 2px;
    background-color: #ffffff;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 1px;
}

.settings-btn:hover .hamburger-line {
    background-color: var(--primary-color);
}

/* Dark Mode Hamburger Lines */
:root[data-theme="dark"] .hamburger-line {
    background-color: #ffffff;
}

/* Hamburger Animation */
.settings-dropdown.open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.settings-dropdown.open .hamburger-line:nth-child(2) {
    opacity: 0;
}

.settings-dropdown.open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Dropdown Menu */
.settings-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-color);
    background: color-mix(in srgb, var(--bg-color) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.15s ease;
    margin-top: 5px;
}

.settings-dropdown.open .settings-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menu Sections */
.settings-section {
    padding: 12px 0;
}

.settings-section:first-child {
    padding-top: 16px;
}

.settings-section:last-child {
    padding-bottom: 16px;
}

/* Section Labels */
.settings-label {
    padding: 0 16px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Menu Items */
.settings-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--text-color);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s;
}

.settings-item:hover {
    background-color: rgba(var(--primary-color-rgb), 0.08);
    color: var(--primary-color);
}

.settings-item.active {
    background-color: rgba(var(--primary-color-rgb), 0.12);
    color: var(--primary-color);
}

/* Icons */
.flag {
    font-size: 16px;
}

.theme-icon-menu {
    font-size: 16px;
}

/* Divider */
.settings-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 8px 0;
}

/* === MEINE TEAMS ABSTÄNDE === */
.teams .team-card {
    margin-bottom: 2rem;
}

.teams .team-card:last-child {
    margin-bottom: 0;
}