/* ========================================
   CSS VARIABLES - ZENTRALE FARBDEFINITION
   ========================================
   Alle Farben hier ändern, wirkt sich auf gesamte Website aus.
   Format: HSL empfohlen für einfache Anpassungen
   - H (Hue): Farbton 0-360°
   - S (Saturation): Sättigung 0-100%
   - L (Lightness): Helligkeit 0-100%
*/

/* CSS Variables für Theme-System */
:root {
    /* Light Mode (default) */
    
    /* === HINTERGRUND & TEXT === */
    --bg-primary: hsla(0, 0%, 100%, 1);       /* Haupthintergrund - Weiß */
    --text-primary: hsla(50,50%,5%, 0.7);     /* Haupt-Textfarbe */
    --text-secondary: hsla(50,25%,5%, 0.5);   /* Neben-Text / weniger wichtig */
    
    /* === UI COLORS - Buttons, Links, Cards === */
    --color-primary: hsla(60, 12%, 5%, 0.4);      /* Haupt-Buttons / wichtige UI-Elemente - Mittelgrau */
    --color-secondary: hsla(60, 12%, 15%, 0.1);    /* Neben-Buttons / Links - Pink/Magenta */
    --color-primary-hover: #f356cc; /* Hover-State für Primary - Dunkelgrau */
    
    /* === BEREICHS-SPEZIFISCHE AKZENTE === */
    /* Yang = Aktiv/Extern/Handeln */
    --accent-yang: hsla(45,100%,50%, 0.7);           /* Yang Normal - Gelb */
    --accent-yang-secondary: hsla(45,100%,60%, 0.4); /* Yang Hover */
    
    /* Bian = Neutral/Wandel/Balance */
    --accent-bian: hsla(225,100%,50%, 0.7);          /* Bian Normal - Blau */
    --accent-bian-secondary: hsla(225,100%,60%, 0.4); /* Bian Hover */
    
    /* Yin = Passiv/Intern/Sammeln */
    --accent-yin: hsla(285,100%,50%, 0.7);           /* Yin Normal - Lila */
    --accent-yin-secondary: hsla(285,100%,60%, 0.2); /* Yin Hover */
}

[data-theme="dark"] {
    /* Dark Mode */
    
    /* === HINTERGRUND & TEXT === */
    --bg-primary: #282730;       /* Haupthintergrund - Dunkel */
    --text-primary: #f8f5f1;     /* Haupt-Textfarbe - Hell */
    --text-secondary: #f8f5f1a1; /* Neben-Text - Hell mit Transparenz */
    
    /* === UI COLORS - Buttons, Links, Cards === */
    --color-primary: #b8b8b8;      /* Haupt-Buttons - Hellgrau */
    --color-secondary: #8a8a8a;    /* Neben-Buttons / Links - Mittelgrau */
    --color-primary-hover: #d0d0d0; /* Hover-State - Fast Weiß */
    
    /* === BEREICHS-SPEZIFISCHE AKZENTE === */
    /* Im Dark Mode intensiver (höhere Opacity) */
    --accent-yang: rgba(255, 193, 7, 0.6);           /* Yang Normal - Gelb */
    --accent-yang-secondary: rgba(255, 193, 7, 0.8); /* Yang Hover - Sehr intensiv */
    
    --accent-bian: rgba(33, 150, 243, 0.6);           /* Bian Normal - Blau */
    --accent-bian-secondary: rgba(33, 150, 243, 0.8); /* Bian Hover - Sehr intensiv */
    
    --accent-yin: rgba(156, 39, 176, 0.6);           /* Yin Normal - Lila */
    --accent-yin-secondary: rgba(156, 39, 176, 0.8); /* Yin Hover - Sehr intensiv */
}

/* ========================================
   GOOGLE FONTS - Delicious Handrawn
   ========================================
   Handschrift-Font für persönlichen Look
*/
@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap');

/* ========================================
   BODY - GRUNDLEGENDES LAYOUT
   ========================================
   Betrifft: Gesamte Seite
   - Schriftart
   - Textfarbe
   - Hintergrundfarbe
*/
body {
    font-family: "Delicious Handrawn", "Helvetica Neue", Arial, cursive, sans-serif;
    color: var(--text-primary);      /* Textfarbe aus CSS Variables */
    background-color: var(--bg-primary); /* Hintergrund aus CSS Variables */
    margin: 0;                       /* Kein Rand */
    padding: 0;                      /* Kein Padding */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth Theme-Wechsel */
}

/* ========================================
   SHARED ICONS - Yang/Bian/Yin SVG-Icons
   ========================================
   Betrifft: Die drei Haupt-Icons auf index.html
   - Größe responsiv
   - Animations (slideRotateIn)
   - Filter-Effekte (Farbänderung)
*/
.shared-icon {
    width: 12vw;           /* 12% der Viewport-Breite */
    height: auto;
    max-width: 80px;       /* Maximal 80px auf großen Screens */
    min-width: 32px;       /* Minimal 32px auf kleinen Screens */
    transition: all 0.3s ease;
    opacity: 0;            /* Startet unsichtbar */
    animation: slideRotateIn 1.2s ease-out forwards; /* Erscheint mit Animation */
}

/* === YANG ICON (Aktiv/Extern) === */
.yang {
    filter: sepia(0.5) hue-rotate(120deg) saturate(5); /* Grün-Gelblich */
    transform: translateX(-100px) translateY(-50px) rotate(-60deg) scale(0.3); /* Start-Position */
    animation-delay: 0s;   /* Erscheint als Erstes */
}

/* === BIAN ICON (Neutral/Wandel) === */
.bian {
    filter: sepia(0.5) hue-rotate(180deg) saturate(5); /* Blaulich */
    transform: translateX(0px) translateY(-100px) rotate(-180deg) scale(0.3); /* Start-Position */
    animation-delay: 0.3s; /* Erscheint 0.3s später */
}

/* === YIN ICON (Passiv/Intern) === */
.yin {
    filter: sepia(0.5) hue-rotate(240deg) saturate(5); /* Lila */
    transform: translateX(100px) translateY(-50px) rotate(-300deg) scale(0.3); /* Start-Position */
    animation-delay: 0.6s; /* Erscheint 0.6s später */
}

/* === ANIMATION - Icons gleiten und rotieren rein === */
@keyframes slideRotateIn {
    to {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1); /* End-Position: Zentriert */
        opacity: 1; /* Voll sichtbar */
    }
}

/* ========================================
   HOVER-EFFEKTE - Icons werden größer/heller
   ========================================
   Betrifft: Yang/Bian/Yin Icons bei Hover
   Nutzt Accent-Farben aus CSS Variables
*/
.yang:hover {
    transform: scale(1.15) rotate(10deg); /* Vergrößert + leicht gedreht */
    filter: hue-rotate(45deg) saturate(2.5) brightness(2.4) drop-shadow(0 5px 15px var(--accent-yang));
}

.bian:hover {
    transform: scale(1.15) rotate(10deg);
    filter: hue-rotate(200deg) saturate(2.5) contrast(2.4) drop-shadow(0 5px 15px var(--accent-bian));
}

.yin:hover {
    transform: scale(1.15) rotate(10deg);
    filter: sepia(0.5) hue-rotate(290deg) saturate(2.2) brightness(1.4) drop-shadow(0 5px 15px var(--accent-yin));
}

/* ========================================
   THEME TOGGLE BUTTON - Dark/Light Mode Wechsel
   ========================================
   Betrifft: Floating Button rechts unten
   - Position: Fixed rechts unten
   - Icons: ☀️ (Sonne) und 🌙 (Mond)
   - JavaScript steuert welches Icon sichtbar ist
*/
.theme-toggle {
    position: fixed;       /* Bleibt an Position beim Scrollen */
    bottom: 20px;          /* 20px vom unteren Rand */
    right: 20px;           /* 20px vom rechten Rand */
    width: 50px;
    height: 50px;
    border-radius: 50%;    /* Rund */
    background-color: var(--text-primary); /* Button-Hintergrund */
    border: 2px solid var(--bg-primary);   /* Rand in Seiten-Hintergrundfarbe */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
    z-index: 1000;         /* Über allen anderen Elementen */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* === HOVER & ACTIVE STATES === */
.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);  /* Leicht größer + gedreht */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.theme-toggle:active {
    transform: scale(0.95);  /* Etwas kleiner beim Klick (Feedback) */
}

/* === ICON STYLING === */
.theme-toggle .icon {
    color: var(--color-secondary);  /* Icon-Farbe */
    transition: opacity 0.3s ease;  /* Smooth Icon-Wechsel */
}

.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
    position: absolute;  /* Übereinander positioniert */
}

/* === ICON VISIBILITY - Gesteuert durch Theme === */
/* Light Mode: Mond zeigen (zum Dark wechseln) */
:root .theme-toggle .sun-icon {
    opacity: 0;  /* Sonne versteckt */
}

:root .theme-toggle .moon-icon {
    opacity: 1;  /* Mond sichtbar */
}

/* Dark Mode: Sonne zeigen (zum Light wechseln) */
[data-theme="dark"] .theme-toggle .sun-icon {
    opacity: 1;  /* Sonne sichtbar */
}

[data-theme="dark"] .theme-toggle .moon-icon {
    opacity: 0;  /* Mond versteckt */
}

/* ========================================
   BUTTON BASE CLASS - Shared Button Styling
   ========================================
   Basis-Styling für alle Buttons auf der Website
   Wird von nav-links, representation-controls etc. genutzt
*/
.btn-base {
    padding: 0.75rem 1rem;
    margin: 0.25rem;
    border-radius: 28px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    cursor: pointer;
    border: 2px solid transparent;
    background: transparent;
}

/* === HOVER STATE === */
.btn-base:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* === ACTIVE STATE === */
.btn-base:active {
    transform: scale(0.95);
}

/* ========================================
   YANG/BIAN/YIN BUTTON COLORS - Zentrale Steuerung
   ========================================
   Diese Klassen funktionieren für ALLE Buttons:
   - Navigation (sidebar)
   - Representation Controls
   - Weitere Buttons
*/

/* === YANG (Aktiv/Extern/Handeln) === */
.yang-color {
    color: var(--accent-yang);
}

.yang-color .nav-icon,
.yang-color i {
    color: var(--accent-yang);
}

.yang-color:hover {
    color: var(--accent-yang) !important;
    background-color: var(--accent-yang-secondary) !important;
}

.yang-color:hover .nav-icon,
.yang-color:hover i {
    color: var(--accent-yang) !important;
    text-shadow: 0 0 10px var(--accent-yang-secondary-secondary) !important;
}

.yang-color:hover .nav-text {
    text-shadow: 0 0 8px var(--accent-yang-secondary);
}

/* === BIAN (Neutral/Wandel/Balance) === */
.bian-color {
    color: var(--accent-bian);
}

.bian-color .nav-icon,
.bian-color i {
    color: var(--accent-bian);
}

.bian-color:hover {
    color: var(--accent-bian) !important;
    background-color: var(--accent-bian-secondary) !important;
}

.bian-color:hover .nav-icon,
.bian-color:hover i {
    color: var(--accent-bian) !important;
    text-shadow: 0 0 10px var(--accent-bian-secondary) !important;
}

.bian-color:hover .nav-text {
    text-shadow: 0 0 8px var(--accent-bian-secondary);
}

/* === YIN (Passiv/Intern/Sammeln) === */
.yin-color {
    color: var(--accent-yin);
}

.yin-color .nav-icon,
.yin-color i {
    color: var(--accent-yin);
}

.yin-color:hover {
    color: var(--accent-yin) !important;
    background-color: var(--accent-yin-secondary) !important;
}

.yin-color:hover .nav-icon,
.yin-color:hover i {
    color: var(--accent-yin-secondary) !important;
    text-shadow: 0 0 10px var(--accent-yin-secondary) !important;
}

.yin-color:hover .nav-text {
    text-shadow: 0 0 8px var(--accent-yin-secondary);
}

/* ========================================
   TASK/TODO LIST STYLING - Aufgabenlisten
   ========================================
   Basis-Styling für Todo-Listen mit Checkboxen
   Unterstützt Yang/Bian/Yin Farben
*/

/* === TASK CONTAINER === */
.task-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    width: 100%;
}

/* === EINZELNES TASK-ITEM === */
.task-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background-color: var(--bg-primary);
    border-radius: 12px;
    border: 2px solid var(--color-secondary);
    transition: all 0.3s ease;
    cursor: pointer;
}

.task-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* === CUSTOM CHECKBOX === */
.task-checkbox {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--text-secondary);
    border-radius: 6px;
    margin-right: 1rem;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.task-checkbox:hover {
    border-color: var(--text-primary);
    transform: scale(1.1);
}

/* Checkmark (✓) wenn gecheckt */
.task-checkbox:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: var(--bg-primary);
}

/* === TASK TEXT === */
.task-text {
    flex: 1;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Durchgestrichen wenn erledigt */
.task-item.completed .task-text {
    text-decoration: line-through;
    opacity: 0.5;
}

/* === YANG TASK STYLING === */
.task-item.yang-task {
    border-color: var(--accent-yang);
}

.task-item.yang-task .task-checkbox {
    border-color: var(--accent-yang);
}

.task-item.yang-task .task-checkbox:checked {
    background-color: var(--accent-yang);
    border-color: var(--accent-yang);
}

.task-item.yang-task:hover {
    background-color: var(--accent-yang-secondary);
}

/* === BIAN TASK STYLING === */
.task-item.bian-task {
    border-color: var(--accent-bian);
}

.task-item.bian-task .task-checkbox {
    border-color: var(--accent-bian);
}

.task-item.bian-task .task-checkbox:checked {
    background-color: var(--accent-bian);
    border-color: var(--accent-bian);
}

.task-item.bian-task:hover {
    background-color: var(--accent-bian-secondary);
}

/* === YIN TASK STYLING === */
.task-item.yin-task {
    border-color: var(--accent-yin);
}

.task-item.yin-task .task-checkbox {
    border-color: var(--accent-yin);
}

.task-item.yin-task .task-checkbox:checked {
    background-color: var(--accent-yin);
    border-color: var(--accent-yin);
}

.task-item.yin-task:hover {
    background-color: var(--accent-yin-secondary);
}

/* === TASK PRIORITY INDICATOR (Optional) === */
.task-priority {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: 0.5rem;
}

.task-priority.high {
    background-color: #ff4444;
}

.task-priority.medium {
    background-color: #ffaa00;
}

.task-priority.low {
    background-color: #44ff44;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .task-item {
        padding: 0.6rem 0.8rem;
    }

    .task-checkbox {
        width: 20px;
        height: 20px;
        margin-right: 0.75rem;
    }

    .task-text {
        font-size: 0.95rem;
    }
}

/* ========================================
   RAINBOW TEXT - Regenbogen-Gradient Text
   ========================================
   Basis-Klasse für Rainbow-Text Effekte
   Nutzt background-clip für transparenten Text
*/

.rainbow-text {
    background-image: linear-gradient(
        to right,
        hsla(0, 100%, 75%, 1),
        hsla(39, 100%, 70%, 1),
        hsla(60, 100%, 70%, 1),
        hsla(120, 100%, 55%, 1),
        hsla(180, 100%, 55%, 1),
        hsla(240, 100%, 70%, 1),
        hsla(275, 100%, 75%, 1),
        hsla(300, 76%, 77%, 1)
    );
    background-size: 200% 100%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.05em;
}

/* === RAINBOW TEXT ANIMATION (Optional) === */
@keyframes rainbowSlide {
    0% {
        background-position: 200% 0;
        opacity: 0;
    }
    100% {
        background-position: 0 0;
        opacity: 1;
    }
}

.rainbow-text.animated {
    animation: rainbowSlide 3s ease-out forwards;
}

/* ========================================
   ICON LINK - Icon mit Label und Animation
   ========================================
   Für Icons mit Text-Label und Float-Animation
   Icon animiert mit .icon-anim Klasse
*/

.icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.icon-label {
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}

/* === ICON ANIMATION (Float Effect) === */
.icon-anim {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--text-primary);
    animation: iconFloat 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

@keyframes iconFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(-3deg);
    }
    75% {
        transform: translateY(-5px) rotate(3deg);
    }
}

.icon-link:hover .icon-anim {
    animation: iconFloatFast 0.5s ease-in-out infinite;
}

@keyframes iconFloatFast {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.1);
    }
}

/* === YANG/BIAN/YIN ICON COLORS === */
.icon-anim.yang-color {
    color: var(--accent-yang);
}

.icon-anim.bian-color {
    color: var(--accent-bian);
}

.icon-anim.yin-color {
    color: var(--accent-yin);
}

/* ========================================
   COLLAPSIBLE TASK BOX - Aufklappbare Box
   ========================================
   Box mit Header zum Aufklappen
   Zeigt/versteckt Task-Liste mit Smooth Transition
*/

/* === BOX CONTAINER === */
.task-box {
    margin: 1rem 0;
    border-radius: 12px;
    border: 2px solid var(--color-secondary);
    overflow: hidden;
    transition: all 0.3s ease;
}

.task-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* === HEADER (klickbar) === */
.task-box-header {
    padding: 1rem 1.5rem;
    background-color: var(--bg-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    user-select: none;
}

.task-box-header:hover {
    opacity: 0.8;
}

.task-box-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.2rem;
}

/* === CHEVRON ICON (▼ / ▲) === */
.task-box-chevron {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    color: var(--text-secondary);
}

.task-box.open .task-box-chevron {
    transform: rotate(180deg);
}

/* === CONTENT (Task Liste) === */
.task-box-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1rem;
}

.task-box.open .task-box-content {
    max-height: 1000px;
    padding: 1rem;
}

/* === YANG BOX === */
.task-box.yang-box {
    border-color: var(--accent-yang);
}

.task-box.yang-box .task-box-header {
    background: linear-gradient(to right, var(--accent-yang-secondary), transparent);
}

.task-box.yang-box .task-box-header h3 {
    color: var(--accent-yang);
}

/* === BIAN BOX === */
.task-box.bian-box {
    border-color: var(--accent-bian);
}

.task-box.bian-box .task-box-header {
    background: linear-gradient(to right, var(--accent-bian-secondary), transparent);
}

.task-box.bian-box .task-box-header h3 {
    color: var(--accent-bian);
}

/* === YIN BOX === */
.task-box.yin-box {
    border-color: var(--accent-yin);
}

.task-box.yin-box .task-box-header {
    background: linear-gradient(to right, var(--accent-yin-secondary), transparent);
}

.task-box.yin-box .task-box-header h3 {
    color: var(--accent-yin);
}

/* === TASK COUNT BADGE (Optional) === */
.task-count {
    display: inline-block;
    background-color: var(--color-secondary);
    color: var(--text-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    margin-left: 0.5rem;
    font-weight: normal;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .task-box-header {
        padding: 0.75rem 1rem;
    }

    .task-box-header h3 {
        font-size: 1rem;
    }

    .task-box-content {
        padding: 0 0.75rem;
    }

    .task-box.open .task-box-content {
        padding: 0.75rem;
    }
}