/* ==========================================
   Settings
========================================== */

/* Wir machen jede Sektion zu einem eleganten Glass-Panel */
.settings-section {
    margin-bottom: 42px;
    
    /* Übernimmt die Glass-Panel-Eigenschaften */
    background: rgba(15,23,42,.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: var(--radius-xl);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 12px 36px rgba(0,0,0,.18);
    padding: 32px;
    position: relative;
}

/* Der subtile Licht-Verlauf von oben links für das Panel */
.settings-section::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--glass-tint), transparent 65%);
    opacity: .7;
    pointer-events: none;
}

.settings-section-header {
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.settings-section-header h3 {
    margin: 0;
    font-size: 16pt;
    font-weight: 600;
    color: var(--text-main);
}

.settings-section-header p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 10pt;
}

.settings-grid {
    display: grid;
    /* Nutzt die volle Breite, da wir nur noch eine Hauptkarte in diesem Abschnitt haben */
    grid-template-columns: 1fr; 
    gap: 24px;
    position: relative;
    z-index: 1;
}

/* Die Settings-Card matched nun exakt die globale .glass-card */
.settings-card {
    position: relative;
    overflow: hidden;
    background: rgba(15,23,42,.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,.30);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Der Lichteffekt für die Card */
.settings-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--glass-tint), transparent 60%);
    opacity: .7;
    pointer-events: none;
    transition: opacity .25s ease;
}

.settings-card h4 {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: var(--text-main);
    font-size: 13pt;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--text-muted);
    font-size: 10pt;
    line-height: 1.5;
}

/* ==========================================
   Theme Selector
========================================== */

#theme-selector {
    margin-top: 24px;
    display: grid;
    /* Erlaubt den Theme-Karten, sich sauber nebeneinander aufzureihen */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    position: relative;
    z-index: 1;
}

/* Die Theme-Cards werden ebenfalls zu kleinen Glass-Cards */
.theme-card {
    position: relative;
    overflow: hidden;
    background: rgba(15,23,42,.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.theme-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: 
        0 12px 28px rgba(0,0,0,.30),
        0 0 15px color-mix(in srgb, var(--primary) 30%, transparent);
}

.theme-preview {
    height: 110px;
    background: var(--bg-main);
    padding: 12px;
    display: flex;
    gap: 10px;
}

.preview-sidebar {
    width: 28px;
    border-radius: 8px;
    background: var(--bg-sidebar);
}

.preview-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-card {
    flex: 1;
    background: var(--bg-card);
    border-radius: 8px;
}

.preview-button {
    height: 16px;
    width: 60%;
    background: var(--primary);
    border-radius: 999px;
}

.theme-info {
    padding: 14px;
    position: relative;
    z-index: 1;
}

.theme-info h5 {
    margin: 0;
    color: var(--text-main);
    font-size: 11pt;
}

.theme-info p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 9pt;
}

/* Aktiver Theme-Status sticht sauber heraus */
.theme-card.active {
    border-color: var(--primary);
    background: rgba(15,23,42,.50);
    box-shadow:
        0 0 0 1px var(--primary),
        0 0 20px color-mix(in srgb, var(--primary) 40%, transparent),
        0 15px 35px rgba(0,0,0,.35);
}

/* ==========================================
   Responsive
========================================== */

/* Ab 1024px Breite (z.B. kleinere Laptops/Tablets im Querformat) 
   brechen wir das asymmetrische Grid untereinander auf */
@media (max-width: 1024px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
    
    .settings-section {
        padding: 24px;
    }
}

@media (max-width: 600px) {
    #theme-selector {
        /* Auf ganz kleinen Bildschirmen zweispaltig oder einspaltig */
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}