/* Zentrales Theme — stephanlange.info-Branding 2026-05-06 */
/* ============================================
   Dashboard-/Admin-Theme.
   Default = Dark. Light-Mode via [data-theme="light"].
   Brand-Palette: Gold (#c9a84c) auf tiefem Schwarz (#0a0a0a),
   Champagne-Akzent (#e5c666), Glass-Cards.
   Aliase fuer Legacy-Variablen bleiben erhalten.
   ============================================ */

:root {
    /* Backgrounds */
    --bg-body: #0a0a0a;
    --bg-card: rgba(255,255,255,0.04);
    --bg-card-hover: rgba(255,255,255,0.07);
    --bg-section: #0e0e0e;
    --bg-input: rgba(255,255,255,0.04);

    /* Accents — Gold-Palette stephanlange.info */
    --accent: #c9a84c;
    --accent-light: #e5c666;
    --accent-hover: #b89636;
    --accent-glow: rgba(201,168,76,0.35);
    --accent2: #e5c666;
    --accent3: #d4b35e;

    /* Status */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --info: #c9a84c;

    /* Text */
    --text: #f5f5f0;
    --text-muted: #a8a89e;
    --text-bright: #ffffff;
    --text-heading: #ffffff;

    /* Borders & Shadows */
    --border: rgba(255,255,255,0.08);
    --border-hover: rgba(201,168,76,0.4);
    --shadow: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.55);

    /* Misc */
    --gradient-main: linear-gradient(135deg, #c9a84c, #e5c666, #b89636);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --radius: 14px;
    --radius-sm: 8px;
    --transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    /* ===== Legacy-Aliase (Uebergang) ===== */
    --primary-color: var(--accent);
    --secondary-color: var(--accent-hover);
    --success-color: var(--success);
    --warning-color: var(--warning);
    --danger-color: var(--danger);
    --info-color: var(--info);
    --text-color: var(--text);
    --bg-light: var(--bg-body);
    --background-color: var(--bg-body);
    --border-color: var(--border);
}

[data-theme="light"] :root,
[data-theme="light"] {
    --bg-body: #fafaf8;
    --bg-card: #ffffff;
    --bg-card-hover: #f6f5f1;
    --bg-section: #f3f2ee;
    --bg-input: #f3f2ee;

    --accent: #9a7b2e;
    --accent-light: #b89636;
    --accent-hover: #7d6322;
    --accent-glow: rgba(154,123,46,0.18);

    --text: #1a1a1a;
    --text-muted: #6a6a64;
    --text-bright: #0a0a0a;
    --text-heading: #0a0a0a;

    --border: rgba(0,0,0,0.08);
    --border-hover: rgba(154,123,46,0.4);
    --shadow: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);

    /* Legacy-Aliase im Light-Mode */
    --primary-color: var(--accent);
    --secondary-color: var(--accent-hover);
    --text-color: var(--text);
    --bg-light: var(--bg-body);
    --background-color: var(--bg-body);
    --border-color: var(--border);
}

/* ===== UX-Polish Stufe 2 ===== */
@keyframes dk24RippleAnim {
    to { transform: scale(1); opacity: 0; }
}

@keyframes dk24EyePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(201,168,76,0)); }
    50%      { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(229,198,102,0.7)); }
}
.dk24-eye-pulse {
    display: inline-block;
    animation: dk24EyePulse 2.2s ease-in-out infinite;
    transform-origin: center;
}
.file-card:hover .dk24-eye-pulse { animation: none; transform: none; filter: none; }

@keyframes dk24Heartbeat {
    0%, 28%, 100% { transform: scale(1); }
    14%           { transform: scale(1.16); }
    42%           { transform: scale(1.10); }
}
.dk24-heartbeat {
    animation: dk24Heartbeat 0.9s ease-in-out infinite;
    box-shadow: 0 0 0 3px rgba(201,168,76,0.18), 0 0 18px rgba(229,198,102,0.45) !important;
}

#dk24LoadingBar {
    will-change: width, opacity;
}

/* ===== UX-Polish Stufe 3 ===== */

/* Toast Slide-Out + Stack-Übergänge */
@keyframes dk24ToastOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(40px) scale(0.95); }
}
.toast.dk24-toast-out {
    animation: dk24ToastOut 0.32s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    pointer-events: none;
}
#toastContainer .toast {
    transition: margin-top 0.25s ease, transform 0.25s ease;
}

/* Inline-Spinner: kleines goldenes Ringlein, drehend */
@keyframes dk24SpinRotate { to { transform: rotate(360deg); } }
.dk24-spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(201,168,76,0.25);
    border-top-color: var(--accent, #c9a84c);
    animation: dk24SpinRotate 0.7s linear infinite;
    vertical-align: middle;
}
.dk24-spinner-inline.dk24-large { width: 22px; height: 22px; border-width: 3px; }

/* Container, der gerade lädt: leicht ausgegraut + Cursor */
.dk24-loading-overlay {
    position: relative;
    pointer-events: none;
}
.dk24-loading-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.35);
    backdrop-filter: blur(1px);
    border-radius: inherit;
    z-index: 5;
    pointer-events: none;
}
.dk24-loading-overlay > .dk24-spinner-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
}

/* Reduced-Motion: alle UX-Stufe-2-Animationen deaktivieren */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .dk24-eye-pulse,
    .dk24-heartbeat {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
    #dk24ConfettiCanvas { display: none !important; }
    .dk24-spinner-inline { animation: dk24SpinRotate 1.5s linear infinite !important; }
}


/* A/B-Tests-Tabelle: Desktop-Mindestbreite (Mobile-Override greift via #abTestsList table in theme-mobile.css) */
.dk24-ab-table { min-width: 640px; }