:root {
    --brand-gold: #C79F4B;
    --brand-gold-hover: #b08c3f;
    --brand-dark: #1A1A1A;
    --brand-bg: #FCFCFC;
    --brand-beige: #EBE6DF;
}

body { 
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--brand-bg); 
    color: var(--brand-dark); 
}

/* =========================================
   FRONTEND STYLES (index.php)
   ========================================= */

/* Typografie & Logo */
.cityluxx-logo { font-weight: 400; letter-spacing: 2px; line-height: 1; text-align: center; color: var(--brand-gold); text-decoration: none; display: inline-block; }
.nav-logo { max-height: 45px; width: auto; margin: 10px 0; }
.apt-heading { font-weight: 900; font-size: 2.2rem; letter-spacing: -1px; color: var(--brand-dark); }
.apt-desc { font-weight: 400; color: #555; }
.apt-select-title { font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 1rem; color: #666; }
.mb-5 { margin-bottom: 2rem !important; }
.nav-tabs { margin-bottom: 0 !important; }
.border-1 { border: 1px solid var(--brand-dark) !important; }

/* Navigation & Container */
.container-narrow { max-width: 600px; }
.container-medium { max-width: 800px; padding-bottom: 50px; }
.nav-title-truncate { max-width: 150px; }
.back-btn { opacity: 0.5; transition: opacity 0.2s; }
.back-btn:hover { opacity: 1; }

/* Flaggen & Auswahl-Buttons */
.flag-btn { font-size: 1.5rem; text-decoration: none; margin: 0 3px; opacity: 0.4; filter: grayscale(100%); transition: 0.3s; } 
.flag-btn.active { opacity: 1; filter: grayscale(0%); transform: scale(1.1); } 
.apt-btn { border: 2px solid transparent; transition: 0.3s; background: #fff; color: var(--brand-dark); text-transform: uppercase; font-weight: 800;}
.apt-btn:hover, .apt-btn:focus { border-color: var(--brand-gold); color: var(--brand-gold); background: #fff;}

/* Karten & Kategorien */
.card { border-radius: 12px; overflow: hidden; margin-bottom: 2rem !important; border: 1px solid var(--brand-dark) !important; }
.card-header { background-color: var(--brand-beige) !important; color: var(--brand-dark) !important; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 15px 20px; border-bottom: 0; }
.list-group-item { border-color: #f0f0f0; }

/* Checkboxen & Labels */
.task-checkbox-container { width: 40px; text-align: center; flex-shrink: 0; } 
.task-checkbox-lg { transform: scale(2.2); border-radius: 4px; }
.form-check-input { border-color: #ccc; cursor: pointer; transition: 0.2s; }
.form-check-input:checked { background-color: var(--brand-gold); border-color: var(--brand-gold); }
.label-spaced { letter-spacing: 1px; }

/* Aufgaben-Texte */
.task-title { font-weight: 500; color: var(--brand-dark); } /* HIER ANGEPASST: Nicht mehr fett */
.task-desc { font-weight: 400; color: #666; font-size: 0.9rem; }
.monthly-task { background-color: #fffaf0; } 
.monthly-border { border-left: 4px solid var(--brand-gold) !important; }
.badge-monthly { background-color: var(--brand-beige); color: var(--brand-dark); font-weight: 800; letter-spacing: 1px; border: 1px solid var(--brand-gold); }

/* Bilder Galerie & Modal */
.image-gallery { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.image-gallery img { max-height: 100px; border-radius: 8px; border: 1px solid #eee; cursor: zoom-in; object-fit: cover;}
#imageModal .modal-content { background-color: transparent; border: none; }
#imageModal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 1; }

/* Erfolgs-Meldung */
.success-alert { background-color: var(--brand-beige); border: 2px solid var(--brand-gold); }
.success-icon { font-size: 4rem; color: var(--brand-gold); }
.success-title { color: var(--brand-dark); text-transform: uppercase; }

/* Buttons & Formulare */
.btn-brand { background-color: var(--brand-gold); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; border: none; padding: 15px; border-radius: 8px; transition: 0.3s;}
.btn-brand:hover:not(:disabled) { background-color: var(--brand-gold-hover); color: #fff; }
.btn-brand:disabled { background-color: #ddd; color: #999; }
.cleaner-input { border: 2px solid #eee; border-radius: 8px; font-weight: 600; padding: 12px 15px; }
.cleaner-input:focus { border-color: var(--brand-gold); box-shadow: none; }


/* =========================================
   BACKEND STYLES (admin.php)
   ========================================= */

/* Login View */
.login-wrapper { height: 100vh; }
.login-card { width: 350px; }

/* Backend UI Elements */
.action-btn { text-decoration: none; padding: 2px 6px; border-radius: 4px; } 
.action-btn:hover { background: #eee; }
.drag-handle { cursor: grab; font-size: 1.2rem; opacity: 0.5; margin-right: 10px; }
.drag-handle:hover { opacity: 1; }
.sortable-ghost { background-color: #f8f9fa; opacity: 0.8; }
.img-preview-box { display: inline-block; position: relative; margin-right: 10px; margin-bottom: 10px; border: 1px solid #ddd; padding: 5px; border-radius: 5px; background: #fff;}
.img-preview-box img { height: 80px; display: block; }
.admin-logo-preview { max-height: 80px; }

/* Backend Utilities */
.filter-select { width: auto; }
.action-col { width: 100px; }
.pointer { cursor: pointer; }
.checkbox-md { transform: scale(1.3); }

/* =========================================
   LOADING OVERLAY (Für Foto-Uploads)
   ========================================= */
#loading-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(252, 252, 252, 0.9); /* Transparentes Weiß/Beige */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#loading-overlay.show {
    visibility: visible;
    opacity: 1;
}
.spinner-brand {
    color: var(--brand-gold);
    width: 4rem;
    height: 4rem;
    border-width: 0.3rem;
}