/* =====================================================
   AI IST DA - THEME SYSTEM v5
   5 Themes: Bonbon, Rexult, Business, Community, AloeVera
   ===================================================== */

:root {
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 50px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
    --shadow-xl: 0 15px 30px rgba(0,0,0,0.22), 0 5px 15px rgba(0,0,0,0.15);
    
    /* Status Colors (all themes) */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.1);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.1);
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.1);
}

/* Theme Switcher Dots - zentral für alle Seiten */
.theme-dot.aloevera { background: linear-gradient(135deg, #a8d8c0, #f8c8a8); }
.theme-dot.bonbon { background: linear-gradient(135deg, #e8909f, #7cc4b2); }
.theme-dot.rexult { background: linear-gradient(135deg, #494875, #F8A82A); }
.theme-dot.business { background: linear-gradient(135deg, #1E3A5F, #0EA5E9); }
.theme-dot.community { background: linear-gradient(135deg, #4CAF50, #F97316); }


/* =====================================================
   🍬 BONBON THEME - Original Pastel mit Gradienten
   ===================================================== */
[data-theme="bonbon"] {
    --bg-gradient: linear-gradient(165deg, #f0ebe6 0%, #e8e0d8 50%, #ebe6e0 100%);
    --bg-solid: #f0ebe6;
    
    --text: #3a3030;
    --text-inverse: #ffffff;
    --text-light: #5a4a4a;
    --text-muted: #7a6a65;
    
    /* Rose als Primary */
    --primary: #e8909f;
    --primary-dark: #d47085;
    --primary-rgb: 232, 144, 159;
    
    /* Mint als Accent */
    --accent: #7dcdb8;
    --accent-light: #9dd4c6;
    --accent-dark: #5cb89f;
    --accent-rgb: 125, 205, 184;
    
    /* Category Bands - Semi-transparent, Original-Farben */
    --band-method: rgba(255, 160, 112, 0.65);
    --band-fragen: rgba(232, 144, 159, 0.6);
    --band-lernen: rgba(125, 205, 184, 0.6);
    --band-schreiben: rgba(240, 216, 96, 0.7);
    --band-lesen: rgba(112, 184, 224, 0.6);
    --band-verwalten: rgba(240, 160, 128, 0.6);
    --band-fundament: rgba(240, 224, 184, 0.75);
    
    /* UI Elements */
    --card-bg: #ffffff;
    --card-bg-hover: #fefefe;
    --card-border: rgba(255, 255, 255, 0.4);
    --card-shadow: 0 4px 12px rgba(0,0,0,0.12);
    --card-shadow-hover: 0 15px 30px rgba(0,0,0,0.22), 0 5px 15px rgba(0,0,0,0.15);
    
    --border: #e8e0d8;
    --border-light: #f0e8e0;
    
    --gradient-primary: linear-gradient(145deg, #e8909f 0%, #d47085 100%);
    --gradient-accent: linear-gradient(145deg, #7dcdb8 0%, #5cb89f 100%);
    
    --hover-overlay: rgba(232, 144, 159, 0.08);
    --active-overlay: rgba(232, 144, 159, 0.15);
    --focus-ring: rgba(232, 144, 159, 0.4);
    
    --input-bg: #ffffff;
    --input-border: #e8e0d8;
    --input-placeholder: #aaaaaa;
}

/* Bonbon Kategorie-Bänder - Pill-Form */
[data-theme="bonbon"] .kategorie-band {
    border-radius: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
}

/* Bonbon Kacheln - Basis-Styling */
[data-theme="bonbon"] .card {
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-theme="bonbon"] .card:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.22), 0 5px 15px rgba(0,0,0,0.15) !important;
}

/* Bonbon Card Colors - MIT GRADIENTEN */
[data-theme="bonbon"] .card.purple { 
    background: linear-gradient(145deg, #e8909f 0%, #d47085 100%) !important; 
    color: white !important; 
}
[data-theme="bonbon"] .card.purple-dark { 
    background: linear-gradient(145deg, #70b8e0 0%, #50a0d0 100%) !important; 
    color: white !important; 
}
[data-theme="bonbon"] .card.orange { 
    background: linear-gradient(145deg, #ffa070 0%, #f08050 100%) !important; 
    color: white !important; 
}
[data-theme="bonbon"] .card.orange-light { 
    background: linear-gradient(145deg, #f0d860 0%, #e0c840 100%) !important; 
    color: #4a4030 !important; 
}

/* Extra Bonbon-Farben für mehr Vielfalt */
[data-theme="bonbon"] .card.mint { 
    background: linear-gradient(145deg, #7dcdb8 0%, #5cb89f 100%) !important; 
    color: white !important; 
}
[data-theme="bonbon"] .card.peach { 
    background: linear-gradient(145deg, #f0a080 0%, #e08868 100%) !important; 
    color: white !important; 
}
[data-theme="bonbon"] .card.sky { 
    background: linear-gradient(145deg, #70b8e0 0%, #50a0d0 100%) !important; 
    color: white !important; 
}
[data-theme="bonbon"] .card.vanilla { 
    background: linear-gradient(145deg, #f0e0b8 0%, #e0d098 100%) !important; 
    color: #4a4030 !important; 
}
[data-theme="bonbon"] .card.lemon { 
    background: linear-gradient(145deg, #f0d860 0%, #e0c840 100%) !important; 
    color: #4a4030 !important; 
}
[data-theme="bonbon"] .card.rose { 
    background: linear-gradient(145deg, #e8909f 0%, #d47085 100%) !important; 
    color: white !important; 
}
[data-theme="bonbon"] .card.apricot { 
    background: linear-gradient(145deg, #ffa070 0%, #f08050 100%) !important; 
    color: white !important; 
}

/* Text-Schatten für bessere Lesbarkeit auf bunten Kacheln */
[data-theme="bonbon"] .card.purple,
[data-theme="bonbon"] .card.purple-dark,
[data-theme="bonbon"] .card.orange,
[data-theme="bonbon"] .card.mint,
[data-theme="bonbon"] .card.peach,
[data-theme="bonbon"] .card.sky,
[data-theme="bonbon"] .card.rose,
[data-theme="bonbon"] .card.apricot {
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Bonbon User-Bar in Apricot wie Methode-Band */
[data-theme="bonbon"] .user-bar {
    background: var(--band-method) !important;
}

/* Bonbon Unterseiten - harmonischere Farben */
[data-theme="bonbon"] .card-title {
    color: #7dcdb8 !important;  /* Mint statt Rosa */
}

[data-theme="bonbon"] .btn-load {
    background: linear-gradient(145deg, #70b8e0 0%, #50a0d0 100%) !important;
}

[data-theme="bonbon"] .btn-start {
    background: linear-gradient(145deg, #ffa070 0%, #f08050 100%) !important;
    color: white !important;
}

[data-theme="bonbon"] .btn-reset {
    background: white !important;
    color: #e8909f !important;
    border: 2px solid #e8909f !important;
}

[data-theme="bonbon"] .form-input,
[data-theme="bonbon"] .form-textarea {
    border-color: #e0c840 !important;
}

[data-theme="bonbon"] .form-hint {
    color: #5a4a4a !important;  /* etwas dunkler für bessere Lesbarkeit */
}


/* =====================================================
   💎 REXULT THEME - Purple & Gold Corporate
   ===================================================== */
[data-theme="rexult"] {
    --bg-gradient: linear-gradient(180deg, #D7D7E1 0%, #c8c8d4 100%);
    --bg-solid: #D7D7E1;
    
    --text: #37366B;
    --text-inverse: #ffffff;
    --text-light: #494875;
    --text-muted: #6b7280;
    
    --primary: #494875;
    --primary-dark: #37366B;
    --primary-rgb: 73, 72, 117;
    
    --accent: #F8A82A;
    --accent-light: #F9B952;
    --accent-dark: #e09000;
    --accent-rgb: 248, 168, 42;
    
    /* Category Bands - Rexult Purple/Orange */
    --band-method: rgba(248, 168, 42, 0.35);
    --band-fragen: rgba(73, 72, 117, 0.25);
    --band-lernen: rgba(248, 168, 42, 0.3);
    --band-schreiben: rgba(73, 72, 117, 0.2);
    --band-lesen: rgba(248, 168, 42, 0.25);
    --band-verwalten: rgba(73, 72, 117, 0.25);
    --band-fundament: rgba(248, 168, 42, 0.2);
    
    --card-bg: #ffffff;
    --card-bg-hover: #fafafa;
    --card-border: rgba(73, 72, 117, 0.2);
    --card-shadow: 0 4px 20px rgba(73, 72, 117, 0.15);
    
    --border: #c8c8d4;
    --border-light: #e0e0e8;
    
    --gradient-primary: linear-gradient(145deg, #494875 0%, #37366B 100%);
    --gradient-accent: linear-gradient(145deg, #F8A82A 0%, #e09000 100%);
    
    --hover-overlay: rgba(73, 72, 117, 0.08);
    --active-overlay: rgba(73, 72, 117, 0.15);
    --focus-ring: rgba(73, 72, 117, 0.4);
    
    --input-bg: #ffffff;
    --input-border: #c8c8d4;
    --input-placeholder: #9ca3af;
}

/* Rexult Kategorie-Bänder */
[data-theme="rexult"] .kategorie-band {
    border-radius: 22px !important;
}

/* Rexult Kacheln */
[data-theme="rexult"] .card {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 14px !important;
}

[data-theme="rexult"] .card:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 15px 30px rgba(73, 72, 117, 0.25), 0 5px 15px rgba(0,0,0,0.15) !important;
}

/* Rexult Card Colors - MIT GRADIENTEN */
[data-theme="rexult"] .card.purple { 
    background: linear-gradient(145deg, #494875 0%, #37366B 100%) !important; 
    color: white !important; 
}
[data-theme="rexult"] .card.purple-dark { 
    background: linear-gradient(145deg, #37366B 0%, #2a2950 100%) !important; 
    color: white !important; 
}
[data-theme="rexult"] .card.orange { 
    background: linear-gradient(145deg, #F8A82A 0%, #e09000 100%) !important; 
    color: #37366B !important; 
}
[data-theme="rexult"] .card.orange-light { 
    background: linear-gradient(145deg, #F9B952 0%, #F8A82A 100%) !important; 
    color: #37366B !important; 
}

/* Rexult Extra-Farben - Vollständige Palette */
[data-theme="rexult"] .card.mint { 
    background: linear-gradient(145deg, #F8A82A 0%, #e09000 100%) !important; 
    color: #37366B !important; 
}
[data-theme="rexult"] .card.rose { 
    background: linear-gradient(145deg, #494875 0%, #37366B 100%) !important; 
    color: white !important; 
}
[data-theme="rexult"] .card.lemon { 
    background: linear-gradient(145deg, #F9B952 0%, #F8A82A 100%) !important; 
    color: #37366B !important; 
}
[data-theme="rexult"] .card.vanilla { 
    background: linear-gradient(145deg, #e8e0d0 0%, #d8d0c0 100%) !important; 
    color: #37366B !important; 
}
[data-theme="rexult"] .card.sky { 
    background: linear-gradient(145deg, #6868a8 0%, #585890 100%) !important; 
    color: white !important; 
}
[data-theme="rexult"] .card.apricot { 
    background: linear-gradient(145deg, #c9a050 0%, #b89040 100%) !important; 
    color: #37366B !important; 
}
[data-theme="rexult"] .card.peach { 
    background: linear-gradient(145deg, #d4b896 0%, #c4a886 100%) !important; 
    color: #37366B !important; 
}

/* Rexult Text-Schatten für dunkle Kacheln */
[data-theme="rexult"] .card.rose,
[data-theme="rexult"] .card.sky {
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}


/* =====================================================
   💼 BUSINESS THEME - Navy & Sky Professional
   ===================================================== */
[data-theme="business"] {
    --bg-gradient: linear-gradient(180deg, #f0f4f8 0%, #e2e8f0 100%);
    --bg-solid: #f0f4f8;
    
    --text: #1E3A5F;
    --text-inverse: #ffffff;
    --text-light: #334155;
    --text-muted: #64748b;
    
    --primary: #1E3A5F;
    --primary-dark: #152a45;
    --primary-rgb: 30, 58, 95;
    
    --accent: #0EA5E9;
    --accent-light: #38BDF8;
    --accent-dark: #0284C7;
    --accent-rgb: 14, 165, 233;
    
    /* Category Bands - Business Navy/Sky */
    --band-method: rgba(14, 165, 233, 0.25);
    --band-fragen: rgba(30, 58, 95, 0.2);
    --band-lernen: rgba(14, 165, 233, 0.2);
    --band-schreiben: rgba(30, 58, 95, 0.15);
    --band-lesen: rgba(14, 165, 233, 0.25);
    --band-verwalten: rgba(30, 58, 95, 0.2);
    --band-fundament: rgba(14, 165, 233, 0.15);
    
    --card-bg: #ffffff;
    --card-bg-hover: #f8fafc;
    --card-border: rgba(30, 58, 95, 0.15);
    --card-shadow: 0 4px 20px rgba(30, 58, 95, 0.12);
    
    --border: #cbd5e1;
    --border-light: #e2e8f0;
    
    --gradient-primary: linear-gradient(145deg, #1E3A5F 0%, #152a45 100%);
    --gradient-accent: linear-gradient(145deg, #0EA5E9 0%, #0284C7 100%);
    
    --hover-overlay: rgba(30, 58, 95, 0.06);
    --active-overlay: rgba(30, 58, 95, 0.12);
    --focus-ring: rgba(14, 165, 233, 0.4);
    
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-placeholder: #94a3b8;
}

/* Business Kategorie-Bänder */
[data-theme="business"] .kategorie-band {
    border-radius: 22px !important;
}

/* Business Kacheln */
[data-theme="business"] .card {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 14px !important;
}

[data-theme="business"] .card:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 15px 30px rgba(30, 58, 95, 0.2), 0 5px 15px rgba(0,0,0,0.15) !important;
}

/* Business Card Colors - MIT GRADIENTEN */
[data-theme="business"] .card.purple { 
    background: linear-gradient(145deg, #1E3A5F 0%, #152a45 100%) !important; 
    color: white !important; 
}
[data-theme="business"] .card.purple-dark { 
    background: linear-gradient(145deg, #152a45 0%, #0f1f30 100%) !important; 
    color: white !important; 
}
[data-theme="business"] .card.orange { 
    background: linear-gradient(145deg, #0EA5E9 0%, #0284C7 100%) !important; 
    color: white !important; 
}
[data-theme="business"] .card.orange-light { 
    background: linear-gradient(145deg, #38BDF8 0%, #0EA5E9 100%) !important; 
    color: #1E3A5F !important; 
}

/* Business Extra-Farben - Vollständige Palette */
[data-theme="business"] .card.mint { 
    background: linear-gradient(145deg, #0EA5E9 0%, #0284C7 100%) !important; 
    color: white !important; 
}
[data-theme="business"] .card.rose { 
    background: linear-gradient(145deg, #1E3A5F 0%, #152a45 100%) !important; 
    color: white !important; 
}
[data-theme="business"] .card.lemon { 
    background: linear-gradient(145deg, #38BDF8 0%, #0EA5E9 100%) !important; 
    color: #1E3A5F !important; 
}
[data-theme="business"] .card.vanilla { 
    background: linear-gradient(145deg, #e2e8f0 0%, #cbd5e1 100%) !important; 
    color: #1E3A5F !important; 
}
[data-theme="business"] .card.sky { 
    background: linear-gradient(145deg, #60a5fa 0%, #3b82f6 100%) !important; 
    color: white !important; 
}
[data-theme="business"] .card.apricot { 
    background: linear-gradient(145deg, #334155 0%, #1e293b 100%) !important; 
    color: white !important; 
}
[data-theme="business"] .card.peach { 
    background: linear-gradient(145deg, #94a3b8 0%, #64748b 100%) !important; 
    color: white !important; 
}

/* Business Text-Schatten für dunkle Kacheln */
[data-theme="business"] .card.rose,
[data-theme="business"] .card.mint,
[data-theme="business"] .card.sky,
[data-theme="business"] .card.apricot,
[data-theme="business"] .card.peach {
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}


/* =====================================================
   🌿 COMMUNITY THEME - Green & Orange Fresh
   ===================================================== */
[data-theme="community"] {
    --bg-gradient: linear-gradient(165deg, #f0fdf4 0%, #dcfce7 50%, #f0fdf4 100%);
    --bg-solid: #f0fdf4;
    
    --text: #14532d;
    --text-inverse: #ffffff;
    --text-light: #166534;
    --text-muted: #4ade80;
    
    --primary: #4CAF50;
    --primary-dark: #388E3C;
    --primary-rgb: 76, 175, 80;
    
    --accent: #F97316;
    --accent-light: #FB923C;
    --accent-dark: #EA580C;
    --accent-rgb: 249, 115, 22;
    
    /* Category Bands - Community Green/Orange */
    --band-method: rgba(249, 115, 22, 0.25);
    --band-fragen: rgba(76, 175, 80, 0.25);
    --band-lernen: rgba(249, 115, 22, 0.2);
    --band-schreiben: rgba(76, 175, 80, 0.2);
    --band-lesen: rgba(249, 115, 22, 0.25);
    --band-verwalten: rgba(76, 175, 80, 0.25);
    --band-fundament: rgba(249, 115, 22, 0.15);
    
    --card-bg: #ffffff;
    --card-bg-hover: #f0fdf4;
    --card-border: rgba(76, 175, 80, 0.2);
    --card-shadow: 0 4px 20px rgba(76, 175, 80, 0.12);
    
    --border: #bbf7d0;
    --border-light: #dcfce7;
    
    --gradient-primary: linear-gradient(145deg, #4CAF50 0%, #388E3C 100%);
    --gradient-accent: linear-gradient(145deg, #F97316 0%, #EA580C 100%);
    
    --hover-overlay: rgba(76, 175, 80, 0.08);
    --active-overlay: rgba(76, 175, 80, 0.15);
    --focus-ring: rgba(76, 175, 80, 0.4);
    
    --input-bg: #ffffff;
    --input-border: #bbf7d0;
    --input-placeholder: #86efac;
}

/* Community Kategorie-Bänder */
[data-theme="community"] .kategorie-band {
    border-radius: 22px !important;
}

/* Community Kacheln */
[data-theme="community"] .card {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 14px !important;
}

[data-theme="community"] .card:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 15px 30px rgba(76, 175, 80, 0.2), 0 5px 15px rgba(0,0,0,0.15) !important;
}

/* Community Card Colors - MIT GRADIENTEN */
[data-theme="community"] .card.purple { 
    background: linear-gradient(145deg, #4CAF50 0%, #388E3C 100%) !important; 
    color: white !important; 
}
[data-theme="community"] .card.purple-dark { 
    background: linear-gradient(145deg, #388E3C 0%, #2E7D32 100%) !important; 
    color: white !important; 
}
[data-theme="community"] .card.orange { 
    background: linear-gradient(145deg, #F97316 0%, #EA580C 100%) !important; 
    color: white !important; 
}
[data-theme="community"] .card.orange-light { 
    background: linear-gradient(145deg, #FB923C 0%, #F97316 100%) !important; 
    color: white !important; 
}

/* Community Extra-Farben - Vollständige Palette */
[data-theme="community"] .card.mint { 
    background: linear-gradient(145deg, #66BB6A 0%, #4CAF50 100%) !important; 
    color: white !important; 
}
[data-theme="community"] .card.rose { 
    background: linear-gradient(145deg, #4CAF50 0%, #388E3C 100%) !important; 
    color: white !important; 
}
[data-theme="community"] .card.lemon { 
    background: linear-gradient(145deg, #FB923C 0%, #F97316 100%) !important; 
    color: white !important; 
}
[data-theme="community"] .card.vanilla { 
    background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%) !important; 
    color: #14532d !important; 
}
[data-theme="community"] .card.sky { 
    background: linear-gradient(145deg, #34d399 0%, #10b981 100%) !important; 
    color: white !important; 
}
[data-theme="community"] .card.apricot { 
    background: linear-gradient(145deg, #F97316 0%, #EA580C 100%) !important; 
    color: white !important; 
}
[data-theme="community"] .card.peach { 
    background: linear-gradient(145deg, #fdba74 0%, #fb923c 100%) !important; 
    color: #14532d !important; 
}

/* Community Text-Schatten für dunkle Kacheln */
[data-theme="community"] .card.rose,
[data-theme="community"] .card.mint,
[data-theme="community"] .card.lemon,
[data-theme="community"] .card.sky,
[data-theme="community"] .card.apricot {
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}


/* =====================================================
   🌱 ALOEVERA THEME - Zartes Mint, Apricot, Zitrone, Lavendel, Himmelblau
   ===================================================== */
[data-theme="aloevera"] {
    --bg-gradient: linear-gradient(150deg, #f7faf5 0%, #fcfaf5 25%, #faf9f5 50%, #f5f9f5 75%, #f9fbf7 100%);
    --bg-solid: #f9faf7;
    
    --text: #4a5a48;
    --text-inverse: #ffffff;
    --text-light: #5a6a58;
    --text-muted: #8a9a88;
    
    /* Zartes Mint */
    --primary: #a8d8c0;
    --primary-dark: #8cc8a8;
    --primary-rgb: 168, 216, 192;
    
    /* Zartes Apricot */
    --accent: #f8c8a8;
    --accent-light: #fcdcc8;
    --accent-dark: #f0b090;
    --accent-rgb: 248, 200, 168;
    
    /* Category Bands - Ganz zarte Pastelle */
    --band-method: rgba(248, 200, 168, 0.5);
    --band-fragen: rgba(168, 216, 192, 0.45);
    --band-lernen: rgba(248, 232, 168, 0.5);
    --band-schreiben: rgba(216, 208, 232, 0.45);
    --band-lesen: rgba(216, 240, 248, 0.55);
    --band-verwalten: rgba(168, 216, 192, 0.45);
    --band-fundament: rgba(252, 248, 238, 0.75);
    
    --card-bg: #ffffff;
    --card-bg-hover: #fcfdf9;
    --card-border: rgba(168, 216, 192, 0.3);
    --card-shadow: 0 4px 20px rgba(168, 216, 192, 0.15);
    
    --border: #e0f0e5;
    --border-light: #f0f7f2;
    
    --gradient-primary: linear-gradient(145deg, #a8d8c0 0%, #8cc8a8 100%);
    --gradient-accent: linear-gradient(145deg, #f8c8a8 0%, #f0b090 100%);
    
    --hover-overlay: rgba(168, 216, 192, 0.12);
    --active-overlay: rgba(168, 216, 192, 0.2);
    --focus-ring: rgba(168, 216, 192, 0.45);
    
    --input-bg: #ffffff;
    --input-border: #e0f0e5;
    --input-placeholder: #b8d8c8;
}

/* AloeVera Kategorie-Bänder */
[data-theme="aloevera"] .kategorie-band {
    border-radius: 22px !important;
}

/* AloeVera Kacheln */
[data-theme="aloevera"] .card {
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 14px !important;
}

[data-theme="aloevera"] .card:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 15px 30px rgba(168, 216, 192, 0.25), 0 5px 15px rgba(0,0,0,0.1) !important;
}

/* AloeVera Card Colors - 5 Zarte Pastelle */

/* 🌿 Zartes Mint */
[data-theme="aloevera"] .card.purple { 
    background: linear-gradient(145deg, #a8d8c0 0%, #8cc8a8 100%) !important; 
    color: #3a5a48 !important; 
}

/* 💜 Ganz zartes Lavendel */
[data-theme="aloevera"] .card.purple-dark { 
    background: linear-gradient(145deg, #e8e0f0 0%, #dcd4e8 100%) !important; 
    color: #5a5868 !important; 
}

/* 🍑 Zartes Apricot */
[data-theme="aloevera"] .card.orange { 
    background: linear-gradient(145deg, #f8c8a8 0%, #f0b090 100%) !important; 
    color: #5a4a40 !important; 
}

/* 🍋 Zartes Zitrone */
[data-theme="aloevera"] .card.orange-light { 
    background: linear-gradient(145deg, #f8e8a8 0%, #f0d888 100%) !important; 
    color: #5a5a40 !important; 
}

/* 🩵 Zartes Himmelblau */
[data-theme="aloevera"] .card.sky { 
    background: linear-gradient(145deg, #d8f0f8 0%, #c8e8f4 100%) !important; 
    color: #3a5a68 !important; 
}

/* AloeVera Extra-Farben - Vollständige Palette */
[data-theme="aloevera"] .card.mint { 
    background: linear-gradient(145deg, #a8d8c0 0%, #8cc8a8 100%) !important; 
    color: #3a5a48 !important; 
}
[data-theme="aloevera"] .card.rose { 
    background: linear-gradient(145deg, #f0c8d8 0%, #e8b8c8 100%) !important; 
    color: #5a4048 !important; 
}
[data-theme="aloevera"] .card.lemon { 
    background: linear-gradient(145deg, #f8e8a8 0%, #f0d888 100%) !important; 
    color: #5a5a40 !important; 
}
[data-theme="aloevera"] .card.vanilla { 
    background: linear-gradient(145deg, #f8f0e0 0%, #f0e8d0 100%) !important; 
    color: #5a5040 !important; 
}
[data-theme="aloevera"] .card.apricot { 
    background: linear-gradient(145deg, #f8c8a8 0%, #f0b090 100%) !important; 
    color: #5a4a40 !important; 
}
[data-theme="aloevera"] .card.peach { 
    background: linear-gradient(145deg, #fcd8c0 0%, #f8c8b0 100%) !important; 
    color: #5a4a40 !important; 
}

/* AloeVera Unterseiten - harmonische Farben wie Pyramide */
[data-theme="aloevera"] .card-title {
    color: #8cc8a8 !important;  /* Mint */
}

[data-theme="aloevera"] .btn-load {
    background: linear-gradient(145deg, #e8e0f0 0%, #dcd4e8 100%) !important;
    color: #5a5868 !important;  /* Lavendel */
}

[data-theme="aloevera"] .btn-start {
    background: linear-gradient(145deg, #f8c8a8 0%, #f0b090 100%) !important;
    color: #5a4a40 !important;  /* Apricot */
}

[data-theme="aloevera"] .btn-reset {
    background: white !important;
    color: #8cc8a8 !important;
    border: 2px solid #8cc8a8 !important;  /* Mint Outline */
}

[data-theme="aloevera"] .form-input,
[data-theme="aloevera"] .form-textarea {
    border-color: #f0d888 !important;  /* Zitrone */
}

[data-theme="aloevera"] .form-hint {
    color: #5a6a58 !important;  /* etwas dunkler */
}


/* =====================================================
   DEFAULT (wenn kein Theme gesetzt)
   ===================================================== */
:root:not([data-theme]) {
    --bg-solid: #f0ebe6;
    --bg-gradient: linear-gradient(165deg, #f0ebe6 0%, #e8e0d8 50%, #ebe6e0 100%);
    --text: #3a3030;
    --text-inverse: #ffffff;
    --text-light: #5a4a4a;
    --text-muted: #7a6a65;
    --primary: #e8909f;
    --primary-dark: #d47085;
    --primary-rgb: 232, 144, 159;
    --accent: #7dcdb8;
    --accent-light: #9dd4c6;
    --accent-dark: #5cb89f;
    --accent-rgb: 125, 205, 184;
    --card-bg: #ffffff;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.12);
    --border: #e8e0d8;
    --gradient-primary: linear-gradient(145deg, #e8909f 0%, #d47085 100%);
    --gradient-accent: linear-gradient(145deg, #7dcdb8 0%, #5cb89f 100%);
    --hover-overlay: rgba(232, 144, 159, 0.08);
    --input-bg: #ffffff;
    --input-border: #e8e0d8;
    
    /* Default Bands - Bonbon */
    --band-method: rgba(255, 160, 112, 0.65);
    --band-fragen: rgba(232, 144, 159, 0.6);
    --band-lernen: rgba(125, 205, 184, 0.6);
    --band-schreiben: rgba(240, 216, 96, 0.7);
    --band-lesen: rgba(112, 184, 224, 0.6);
    --band-verwalten: rgba(240, 160, 128, 0.6);
    --band-fundament: rgba(240, 224, 184, 0.75);
}

/* Default Card Styling */
:root:not([data-theme]) .kategorie-band {
    border-radius: 22px !important;
}

:root:not([data-theme]) .card {
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 14px !important;
}

:root:not([data-theme]) .card:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.22), 0 5px 15px rgba(0,0,0,0.15) !important;
}

:root:not([data-theme]) .card.purple { 
    background: linear-gradient(145deg, #e8909f 0%, #d47085 100%) !important; 
    color: white !important; 
}
:root:not([data-theme]) .card.purple-dark { 
    background: linear-gradient(145deg, #70b8e0 0%, #50a0d0 100%) !important; 
    color: white !important; 
}
:root:not([data-theme]) .card.orange { 
    background: linear-gradient(145deg, #ffa070 0%, #f08050 100%) !important; 
    color: white !important; 
}
:root:not([data-theme]) .card.orange-light { 
    background: linear-gradient(145deg, #f0d860 0%, #e0c840 100%) !important; 
    color: #4a4030 !important; 
}

/* Default Extra-Farben - Bonbon Style */
:root:not([data-theme]) .card.mint { 
    background: linear-gradient(145deg, #7dcdb8 0%, #5cb89f 100%) !important; 
    color: white !important; 
}
:root:not([data-theme]) .card.rose { 
    background: linear-gradient(145deg, #e8909f 0%, #d47085 100%) !important; 
    color: white !important; 
}
:root:not([data-theme]) .card.lemon { 
    background: linear-gradient(145deg, #f0d860 0%, #e0c840 100%) !important; 
    color: #4a4030 !important; 
}
:root:not([data-theme]) .card.vanilla { 
    background: linear-gradient(145deg, #f0e0b8 0%, #e0d098 100%) !important; 
    color: #4a4030 !important; 
}
:root:not([data-theme]) .card.sky { 
    background: linear-gradient(145deg, #70b8e0 0%, #50a0d0 100%) !important; 
    color: white !important; 
}
:root:not([data-theme]) .card.apricot { 
    background: linear-gradient(145deg, #ffa070 0%, #f08050 100%) !important; 
    color: white !important; 
}
:root:not([data-theme]) .card.peach { 
    background: linear-gradient(145deg, #f0a080 0%, #e08868 100%) !important; 
    color: white !important; 
}

/* =====================================================
   🌐 LANGUAGE DROPDOWN - Global Styles
   ===================================================== */
.language-dropdown,
.language-dropdown-login {
    position: relative;
}

.language-dropdown .language-toggle,
.language-dropdown-login .language-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--card-bg, white);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text, #1a1a1a);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
}

.language-dropdown .language-toggle:hover,
.language-dropdown-login .language-toggle:hover {
    box-shadow: var(--shadow-md);
}

.language-dropdown .language-options,
.language-dropdown-login .language-options {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--card-bg, white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: none;
    min-width: 160px;
    z-index: 1001;
    overflow: hidden;
}

.language-dropdown.open .language-options,
.language-dropdown-login.open .language-options {
    display: block;
}

.language-dropdown .language-option,
.language-dropdown-login .language-option {
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    color: var(--text, #1a1a1a);
    border-left: 3px solid transparent;
}

.language-dropdown .language-option:hover,
.language-dropdown-login .language-option:hover {
    background: var(--bg-solid, #f0f0f0);
    border-left: 3px solid var(--primary, #494875);
    padding-left: 18px;
}

.language-dropdown .language-option.active,
.language-dropdown-login .language-option.active {
    background: var(--primary, #494875);
    color: var(--text-inverse, white);
    border-left: 3px solid var(--accent, #F8A82A);
}

.language-dropdown .dropdown-arrow,
.language-dropdown-login .dropdown-arrow {
    font-size: 0.6rem;
    opacity: 0.7;
}

.language-dropdown .language-name {
    display: none;
}

@media (min-width: 500px) {
    .language-dropdown .language-name {
        display: inline;
    }
}