* { margin: 0; padding: 0; box-sizing: border-box; }

/* ========================================
   MIMIKAMA STYLE - Basis Variablen
   ======================================== */
:root { 
    /* ========================================
       🎯 MEDIENACHTSAMKEITS-CHECK
       Ein Projekt von Mimikama
       
       "Wer hier liest, ist neugierig - gut so!"
       Made with ☕ and mass frustration
       ======================================== */
    
    /* 🎨 Primary Colors - Mimikama Teal für Light Mode */
    --rc-primary: #3F5F63;           /* Mimikama Teal - Hauptfarbe */
    --rc-primary-dark: #2D4548;      /* Darker Blau für Hover */
    --rc-primary-light: #e8f2ed;     /* Light Teal Background */
    --rc-primary-10: rgba(63, 95, 99, 0.1);  /* Subtle Teal */
    
    /* Secondary - Accent (Gold) */
    --rc-accent: #E9C46A;            /* Goldgelb - für Badges, Spezial */
    --rc-accent-light: #FDF6E3;      /* Light Gold Background */
    
    /* Semantic Colors - Feedback */
    --rc-success: #2E7D32;           /* Grün - Richtig, Positiv */
    --rc-success-light: #F3FBF7;
    --rc-warning: #F4A261;           /* Sand/Orange - Achtung */
    --rc-warning-light: #FFFAF0;
    --rc-error: #8B2C32;             /* Mimikama Rot - Falsch, Negativ */
    --rc-error-light: #FFF5F5;
    
    /* 🔘 Neutrale Farben - Die stillen Helden - Light Mode Glassmorphism */
    --rc-text: #3F5F63;              /* Mimikama Teal Primary Text */
    --rc-text-secondary: #5A7A7D;    /* Teal Gray Secondary */
    --rc-text-tertiary: #6B8A8E;     /* Tertiary/Disabled */
    --rc-background: #fafcfa;        /* Fallback Background */
    --rc-card: rgba(232, 242, 237, 0.65);  /* Glass Card - Light Teal Style */
    --rc-card-solid: #FFFFFF;        /* Solid Card (wenn nötig) */
    --rc-border: rgba(63, 95, 99, 0.15);  /* Subtle Teal Border */
    --rc-border-light: rgba(63, 95, 99, 0.25);  /* Light Teal Border - SICHTBAR! */
    --rc-divider: rgba(63, 95, 99, 0.15);  /* Teal Dividers */
    
    /* Light Mode Glassmorphism Effects */
    --glass-blur: blur(16px);
    --glass-bg: rgba(232, 242, 237, 0.65);
    --glass-bg-strong: rgba(230, 238, 238, 0.66);
    --glass-border: 1.5px solid rgba(63, 95, 99, 0.30);
    --glass-shadow: 0 8px 32px rgba(63, 95, 99, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
    --glass-shadow-hover: 0 16px 48px rgba(63, 95, 99, 0.15), 0 4px 12px rgba(0, 0, 0, 0.06);
    --glass-inset: inset 0 1px 0 rgba(232, 242, 237, 0.65);
    
    /* Dark Mode Colors - Premium Dashboard Style 2026 */
    --rc-dark-text: #e8f2ed;
    --rc-dark-text-secondary: #6B8A8E;
    --rc-dark-text-muted: #4A6568;
    --rc-dark-background: #0A1215;
    --rc-dark-background-elevated: #0D1B1E;
    --rc-dark-card: rgba(15, 35, 40, 0.8);
    --rc-dark-card-solid: #0F2328;
    --rc-dark-card-elevated: #152D33;
    --rc-dark-border: rgba(42, 157, 143, 0.25);
    --rc-dark-border-strong: rgba(42, 157, 143, 0.4);
    --rc-dark-border-glow: rgba(90, 154, 146, 0.5);
    --rc-dark-glow: 0 0 20px rgba(42, 157, 143, 0.15);
    --rc-dark-glow-strong: 0 0 30px rgba(42, 157, 143, 0.25);
    --rc-dark-accent: #5A9A92;
    --rc-dark-accent-dim: #3A8A80;
    
    /* Light Mode Accent - Mimikama Teal Palette */
    --rc-accent-primary: #3F5F63;
    --rc-accent-secondary: #B8D8D0;
    --rc-accent-bg: #e8f2ed;
    
    /* Spacing System - 8px Grid */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    
    /* 🔵 Rundungen - Ecken sind out */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* 📝 Schriften - Lesbarkeit ist King */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 17px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    
    /* 👤 Schatten - Tiefe ohne 3D-Brille - Mimikama Teal Accent */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 30px rgba(63, 95, 99, 0.3);
    --shadow-neon: 0 0 20px rgba(63, 95, 99, 0.5), 0 0 40px rgba(63, 95, 99, 0.3);
    
    /* Mimikama Teal Premium Gradients */
    --gradient-primary: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
    --gradient-success: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
    --gradient-premium: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
    --gradient-sunset: linear-gradient(135deg, #4A7A7E 0%, #3F5F63 100%);
    --gradient-ocean: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
    --gradient-dark: linear-gradient(135deg, rgba(21, 32, 37, 0.95) 0%, rgba(90, 154, 146, 0.1) 100%);
    
    /* Glassmorphism - Light Blue Dashboard */
    --glass-bg: rgba(232, 242, 237, 0.65);
    --glass-border: rgba(232, 242, 237, 0.62);
    --glass-blur: blur(16px);
    --glass-bg-dark: rgba(21, 32, 37, 0.85);
    --glass-border-dark: rgba(90, 154, 146, 0.15);
    
    /* Focus Ring for Accessibility - Mimikama Teal */
    --focus-ring: 0 0 0 3px rgba(63, 95, 99, 0.4);
    --focus-ring-dark: 0 0 0 3px rgba(90, 154, 146, 0.5);
    
    /* Legacy Vars für Kompatibilität */
    --mm-primary: var(--rc-primary);
    --mm-primary-dark: var(--rc-primary-dark);
    --mm-primary-light: var(--rc-primary-light);
    --mm-black: #1a1a1a;
    --mm-white: #ffffff;
    --mm-gray: var(--rc-text-secondary);
    --mm-gray-light: var(--rc-border-light);
    --mm-gray-bg: var(--rc-background);
    --mm-red: var(--rc-error);
    --mm-green: var(--rc-success);
    --mm-orange: var(--rc-warning);
    --mm-text: var(--rc-text);
    
    /* Legacy Vars */
    --blue: var(--rc-primary); 
    --dark: var(--rc-text); 
    --gray: var(--rc-text-secondary); 
    --light: var(--rc-background); 
    --card: var(--rc-card); 
    --border: var(--rc-border); 
    --green: var(--rc-success); 
    --red: var(--rc-error); 
    --orange: var(--rc-warning); 
    --purple: var(--rc-accent); 
    
    /* Apple Design System Compatibility */
    --apple-blue: var(--rc-primary);
    --apple-gray: var(--rc-text-secondary);
    --apple-border: var(--rc-border);
    --apple-card: var(--rc-card);
    --apple-bg: var(--rc-background);
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    /* Mimikama 2026 Teal Background - Gradient statt Bild */
    background: linear-gradient(180deg, #c5dcd5 0%, #e8f2ed 50%, #d5e8e0 100%);
    background-attachment: fixed;
    color: var(--rc-text); 
    min-height: 100vh; 
    font-weight: 400; 
    -webkit-font-smoothing: antialiased;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

/* ========================================
   TYPOGRAPHY - Mimikama Design
   ======================================== */

/* Headings */
.text-3xl { font-size: var(--font-size-3xl); line-height: 1.2; }
.text-2xl { font-size: var(--font-size-2xl); line-height: 1.25; }
.text-xl { font-size: var(--font-size-xl); line-height: 1.3; }
.text-lg { font-size: var(--font-size-lg); line-height: 1.4; }
.text-base { font-size: var(--font-size-base); line-height: 1.5; }
.text-sm { font-size: var(--font-size-sm); line-height: 1.5; }
.text-xs { font-size: var(--font-size-xs); line-height: 1.5; }

/* Font Weights */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Text Colors */
.text-primary { color: var(--rc-primary); }
.text-secondary { color: var(--rc-text-secondary); }
.text-tertiary { color: var(--rc-text-tertiary); }
.text-success { color: var(--rc-success); }
.text-warning { color: var(--rc-warning); }
.text-error { color: var(--rc-error); }

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Semantic Headings */
h1, .h1 { 
    font-size: var(--font-size-2xl); 
    font-weight: 700; 
    line-height: 1.25;
    color: var(--rc-text);
    margin: 0 0 var(--space-md) 0;
}
h2, .h2 { 
    font-size: var(--font-size-xl); 
    font-weight: 600; 
    line-height: 1.3;
    color: var(--rc-text);
    margin: 0 0 var(--space-sm) 0;
}
h3, .h3 { 
    font-size: var(--font-size-lg); 
    font-weight: 600; 
    line-height: 1.4;
    color: var(--rc-text);
    margin: 0 0 var(--space-sm) 0;
}

/* Paragraph */
p { 
    margin: 0 0 var(--space-md) 0;
    color: var(--rc-text);
}
p:last-child { margin-bottom: 0; }

/* Small/Caption Text */
small, .caption { 
    font-size: var(--font-size-xs); 
    color: var(--rc-text-secondary);
}

/* Dark Mode Typography */
.app.dark h1, .app.dark .h1,
.app.dark h2, .app.dark .h2,
.app.dark h3, .app.dark .h3 {
    color: var(--rc-dark-text);
}
.app.dark p {
    color: var(--rc-dark-text);
}
.app.dark .text-secondary {
    color: var(--rc-dark-text-secondary);
}

/* ========================================
   ABSTÄNDE - Platz ist Luxus - 8px Grid - Designers love this one weird trick
   ======================================== */

/* Margin */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Gap (for flex/grid) */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* ========================================
   LAYOUT HELFER - Ordnung muss sein
   ======================================== */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

.w-full { width: 100%; }
.h-full { height: 100%; }

/* 🔵 Rundungen - Ecken sind out */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* 👤 Schatten - Tiefe ohne 3D-Brille */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ========================================
   KARTEN - Nicht zum Pokern
   ======================================== */
.card {
    background: var(--rc-card);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--rc-border-light);
    box-shadow: var(--shadow-sm);
}
.app.dark .card {
    background: var(--rc-dark-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--rc-dark-border);
    box-shadow: var(--rc-dark-glow), 0 8px 32px rgba(0, 0, 0, 0.4);
}

.app.dark .card:hover {
    border-color: var(--rc-dark-border-strong);
    box-shadow: var(--rc-dark-glow-strong), 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ========================================
   🔥 GLASS EFFECTS - Weil wir es können 🔥
   ======================================== */

/* GLASSMORPHISM CARDS */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.app.dark .glass-card {
    background: var(--rc-dark-card);
    border: 1px solid var(--rc-dark-border);
    box-shadow: var(--rc-dark-glow), 0 8px 32px rgba(0, 0, 0, 0.4);
}

.app.dark .glass-card:hover {
    border-color: var(--rc-dark-border-strong);
    box-shadow: var(--rc-dark-glow-strong), 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* GRADIENT TEXT - Super Trend 2026 */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-premium {
    background: var(--gradient-premium);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-sunset {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* NEON GLOW EFFECTS */
.neon-glow {
    box-shadow: var(--shadow-neon);
}
.neon-text {
    text-shadow: 0 0 10px rgba(63, 95, 99, 0.8), 
                 0 0 20px rgba(63, 95, 99, 0.6),
                 0 0 30px rgba(63, 95, 99, 0.4);
}
.app.dark .neon-glow {
    box-shadow: 0 0 20px rgba(63, 95, 99, 0.6), 
                0 0 40px rgba(63, 95, 99, 0.4),
                0 0 60px rgba(63, 95, 99, 0.2);
}

/* 3D CARD HOVER EFFECT */
.card-3d {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}
.card-3d:hover {
    transform: translateY(-8px) rotateX(2deg);
    box-shadow: var(--shadow-xl);
}

/* FLOATING ANIMATION */
.float {
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* SHIMMER/SKELETON LOADING */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--rc-border-light) 25%,
        var(--rc-background) 50%,
        var(--rc-border-light) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.app.dark .skeleton {
    background: linear-gradient(
        90deg,
        var(--rc-dark-border) 25%,
        var(--rc-dark-card-elevated) 50%,
        var(--rc-dark-border) 75%
    );
    background-size: 200% 100%;
}

/* PREMIUM BUTTON WITH GLOW */
.btn-premium {
    background: var(--gradient-premium);
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
    z-index: -1;
}
.btn-premium:hover::before {
    left: 100%;
}
.btn-premium:hover {
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.4);
    transform: translateY(-2px);
}

/* MORPHING BORDER */
.morph-border {
    position: relative;
    background: var(--rc-card);
    border-radius: var(--radius-lg);
}
.morph-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-primary);
    border-radius: calc(var(--radius-lg) + 2px);
    z-index: -1;
    opacity: 0; /* Jetzt siehst du mich, jetzt nicht */

    transition: opacity 0.3s ease;
}
.morph-border:hover::before {
    opacity: 1;
}

/* MAGNETIC HOVER (subtle movement) */
.magnetic {
    transition: transform 0.2s ease;
}
.magnetic:hover {
    transform: scale(1.02);
}

/* BADGE WITH PULSE */
.badge-pulse {
    position: relative;
}
.badge-pulse::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: var(--rc-error);
    border-radius: 50%;
    animation: badge-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes badge-ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* SCROLL REVEAL ANIMATION */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* STAGGER ANIMATION FOR LISTS */
.stagger-item {
    opacity: 0;
    transform: translateX(-20px);
    animation: staggerIn 0.4s ease forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }
@keyframes staggerIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* AURORA BACKGROUND */
.aurora-bg {
    background: linear-gradient(
        45deg,
        rgba(63, 95, 99, 0.1) 0%,
        rgba(63, 95, 99, 0.1) 25%,
        rgba(231, 111, 81, 0.1) 50%,
        rgba(244, 162, 97, 0.1) 75%,
        rgba(63, 95, 99, 0.1) 100%
    );
    background-size: 400% 400%;
    animation: aurora 15s ease infinite;
}
@keyframes aurora {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* NEUMORPHISM LIGHT */
.neumorphic {
    background: var(--rc-background);
    border-radius: var(--radius-lg);
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.1),
        -8px -8px 16px rgba(232, 242, 237, 0.65);
}
.neumorphic-inset {
    background: var(--rc-background);
    border-radius: var(--radius-lg);
    box-shadow: 
        inset 4px 4px 8px rgba(0, 0, 0, 0.1),
        inset -4px -4px 8px rgba(232, 242, 237, 0.65);
}
.app.dark .neumorphic {
    background: var(--rc-dark-card);
    box-shadow: 
        8px 8px 16px rgba(0, 0, 0, 0.4),
        -8px -8px 16px rgba(36, 59, 71, 0.3);
}

/* CONFETTI BURST BUTTON */
.btn-celebrate {
    position: relative;
    overflow: visible;
}
.btn-celebrate::after {
    content: '\1F389';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}
.btn-celebrate:active::after {
    transform: translate(-50%, -50%) scale(2);
    opacity: 1;
}

/* ========================================
   ACCESSIBILITY - Barrierefreiheit - Für alle Menschen
   ======================================== */

/* Focus States - Visible Focus Ring */
*:focus {
    outline: none;
}
*:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.app.dark *:focus-visible {
    box-shadow: var(--focus-ring-dark);
}

/* Button Focus */
.btn:focus-visible,
button:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Skip Link for Screen Readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--rc-primary);
    color: white;
    padding: var(--space-sm) var(--space-md);
    z-index: 9999; /* Wichtigkeitslevel: Chef */

    transition: top 0.3s ease;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
    top: 0;
}

/* Screen Reader Only Text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .confetti-container {
        display: none !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --rc-text: #000000;
        --rc-text-secondary: #333333;
        --rc-border: #000000;
        --rc-border-light: #333333;
    }
    .btn-primary {
        border: 2px solid #000000;
    }
}

/* Color Blind Friendly Indicators */
.success-indicator::before {
    content: '\2714 ';
}
.error-indicator::before {
    content: '\2717 ';
}
.warning-indicator::before {
    content: '\26A0 ';
}

/* Minimum Touch Target Size (44x44px) */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Link Underlines for Accessibility */
a:not(.btn):not(.no-underline) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
a:not(.btn):not(.no-underline):hover {
    text-decoration-thickness: 2px;
}

/* Form Accessibility */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: var(--focus-ring);
    border-color: var(--rc-primary);
}

/* Error State with Icon */
.input-error {
    border-color: var(--rc-error) !important;
    box-shadow: 0 0 0 3px rgba(231, 111, 81, 0.2);
}

/* ========================================
   ANIMATIONEN - Das Auge isst mit 👀
   ======================================== */

/* Success Animation */
.animate-success {
    animation: successPop 0.5s ease;
}
@keyframes successPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Error/Shake Animation */
.animate-shake {
    animation: shake 0.5s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* Pulse Animation */
.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Bounce Animation */
.animate-bounce {
    animation: bounceIn 0.6s ease;
}
@keyframes bounceIn {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

/* Slide Up Animation */
.animate-slide-up {
    animation: slideUp 0.4s ease;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fade In Animation */
.animate-fade-in {
    animation: fadeInSmooth 0.3s ease;
}
@keyframes fadeInSmooth {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Confetti Container */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Glow Effect for Success */
.glow-success {
    box-shadow: 0 0 20px rgba(63, 95, 99, 0.5);
    transition: box-shadow 0.3s ease;
}

/* Haptic-like Visual Feedback */
.tap-feedback {
    transition: transform 0.1s ease, opacity 0.1s ease;
}
.tap-feedback:active {
    transform: scale(0.97);
    opacity: 0.9;
}

.app { 
    max-width: 640px; 
    margin: 0 auto; 
    min-height: 100vh; 
    /* Glassmorphism ohne backdrop-filter für Fixed Overlay Kompatibilität */
    background: rgba(232, 242, 237, 0.85);
    position: relative; 
}

.app.dark {
    background: linear-gradient(180deg, #0A1215 0%, #0D1B1E 100%);
}

/* Responsive: Breiter auf Desktop */
@media (min-width: 768px) {
    .app {
        max-width: 560px;
        box-shadow: 0 8px 32px rgba(63, 95, 99, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
        border-radius: 20px;
        border: 1.5px solid rgba(63, 95, 99, 0.30);
        margin: 20px auto;
        min-height: calc(100vh - 40px);
    }
}
@media (min-width: 1024px) {
    .app {
        max-width: 600px;
    }
}

/* ========================================
   HEADER - Der erste Eindruck zählt
   ======================================== */
.header { 
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: var(--space-sm) var(--space-md); 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    border-bottom: 1px solid rgba(232, 242, 237, 0.65);
    box-shadow: 0 4px 24px rgba(63, 95, 99, 0.08);
}
.logo { height: 28px; max-width: 140px; object-fit: contain; transition: transform 0.3s ease; }
.logo:hover { transform: scale(1.05); }
.logo-dark { display: none; } /* Header ist weiß, also dunkles Logo */
.header-right { display: flex; align-items: center; gap: var(--space-sm); }
.skill-counter { 
    display: flex; 
    align-items: center; 
    gap: var(--space-xs); 
    background: var(--gradient-primary); 
    padding: var(--space-xs) var(--space-md); 
    border-radius: var(--radius-full); 
    color: white; 
    font-size: var(--font-size-sm); 
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(63, 95, 99, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill-counter:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.4);
}
.skill-counter-icon { font-size: 1.1em; }
.about-btn, .help-btn, .tips-btn, .dark-mode-btn, .lang-btn { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: var(--rc-background); 
    border: 1px solid var(--rc-border-light);
    font-size: 1.1em; 
    cursor: pointer; 
    color: var(--rc-text); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    position: relative;
}
.about-btn:hover, .help-btn:hover, .tips-btn:hover, .dark-mode-btn:hover, .lang-btn:hover { 
    background: var(--rc-primary-light);
    border-color: var(--rc-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.about-btn {
    background: #e8f2ed;
    border-color: #B8D8D0;
}
.about-btn:hover {
    background: #d5e8e0;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.3);
}
.help-btn {
    background: #FEF3EF;
    border-color: #FCC9BC;
}
.help-btn:hover {
    background: #FDDDD5;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(231, 111, 81, 0.3);
}

/* Help Overlay */
.help-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 999999 !important;  /* Höher als alles andere */
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    /* Fix für backdrop-filter Bug */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.help-overlay.show {
    display: flex !important;
}
.help-modal {
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 24px;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: helpPop 0.3s ease;
    border: 1.5px solid rgba(63, 95, 99, 0.32);
    box-shadow: 0 20px 60px rgba(63, 95, 99, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
}
@media (min-width: 1024px) {
    .help-modal {
        max-width: 600px;
    }
}
@keyframes helpPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.help-header {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
    color: white;
    padding: 20px;
    text-align: center;
    position: relative;
    border-radius: 24px 24px 0 0;
}
.help-header-icon {
    font-size: 2.5em;
    margin-bottom: 8px;
}
.help-header-title {
    font-size: 1.3em;
    font-weight: 700;
    margin: 0;
}
.help-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2em;
    cursor: pointer;
    transition: background 0.2s;
}
.help-close:hover {
    background: rgba(255,255,255,0.3);
}
.help-body {
    padding: 20px;
}
.help-intro {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}
.help-contact {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: #f8fcfa;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: transform 0.2s;
}
.help-contact:hover {
    transform: translateX(4px);
}
.help-contact-icon {
    font-size: 2em;
    width: 50px;
    text-align: center;
}
.help-contact-name {
    font-weight: 700;
    font-size: 1em;
    color: #1f2937;
}
.help-contact-desc {
    font-size: 0.85em;
    color: #5D6D74;
    margin: 2px 0 6px;
}
.help-contact-link {
    font-size: 0.9em;
    color: #3F5F63;
    text-decoration: none;
    font-weight: 600;
}
.help-contact-link:hover {
    text-decoration: underline;
}
.help-section-title {
    font-size: 0.85em;
    font-weight: 700;
    color: #5D6D74;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 8px;
    padding-left: 4px;
}
.help-section-title:first-of-type {
    margin-top: 0;
}
.help-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.help-links .help-contact-link {
    font-size: 0.85em;
    padding: 4px 8px;
    background: #e8f2ed;
    border-radius: 6px;
}
.help-footer {
    background: #f0f8f5;
    padding: 16px;
    text-align: center;
    border-radius: 0 0 20px 20px;
}
.help-footer p {
    margin: 0;
    color: #065f46;
    font-weight: 600;
}

/* About Modal Sections */
.about-section {
    margin-bottom: 20px;
}
.about-section-title {
    font-weight: 700;
    font-size: 1em;
    color: #3F5F63;
    margin-bottom: 8px;
}
.about-section p {
    font-size: 0.9em;
    color: #3A5664;
    line-height: 1.5;
    margin: 0;
}
.about-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.9em;
    color: #3A5664;
    line-height: 1.8;
}
.about-link {
    display: inline-block;
    margin-top: 8px;
    color: #3F5F63;
    font-weight: 600;
    text-decoration: none;
}
.about-link:hover {
    text-decoration: underline;
}
.about-modal .help-footer {
    background: linear-gradient(135deg, #e8f2ed, #d5e8e0);
}
.about-modal .help-footer p {
    color: #2D4548;
}

/* Dark Mode - About */
.app.dark .about-btn { background: #1F7A6F; border-color: #3F5F63; }
.app.dark .about-section-title { color: #4A9A8A; }
.app.dark .about-section p { color: #A8B5BC; }
.app.dark .about-list { color: #A8B5BC; }
.app.dark .about-link { color: #4A9A8A; }
.app.dark .about-modal .help-footer { background: linear-gradient(135deg, #1F7A6F, #1F7A6F); }
.app.dark .about-modal .help-footer p { color: #8ABAB8; }

/* Dark Mode - Help */
.app.dark .help-btn { background: #450a0a; border-color: #7f1d1d; }
.app.dark .help-modal { 
    background: rgba(21, 32, 37, 0.9); 
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(90, 154, 146, 0.15);
}
.app.dark .help-intro { color: #A8B5BC; }
.app.dark .help-section-title { color: #A8B5BC; }
.app.dark .help-contact { 
    background: rgba(21, 32, 37, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .help-contact-name { color: #E8E8E8; }
.app.dark .help-contact-desc { color: #A8B5BC; }
.app.dark .help-contact-link { color: #4A9A8A; }
.app.dark .help-links .help-contact-link { background: #1F7A6F; }
.app.dark .help-footer { background: #064e3b; }
.app.dark .help-footer p { color: #6ec7a7; }

.tips-btn .badge-count { 
    position: absolute; 
    top: -4px; 
    right: -4px; 
    background: var(--mm-red); 
    color: white; 
    font-size: 0.6em; 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
}
.lang-btn { 
    font-size: 0.75em; 
    font-weight: 700;
}

/* DARK MODE - Stylish wie die Nacht */
.app.dark { 
    background: #0A1215;
    color: #E8E8E8; 
}
body:has(.app.dark) { background: #0A1215; }

/* Dark Mode Body Background - Teal Dashboard */
body.dark-mode {
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(90, 154, 146, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(42, 157, 143, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #0A1215 0%, #0D1B1E 50%, #0A1215 100%) !important;
    background-attachment: fixed;
}

.app.dark .header { 
    background: rgba(21, 32, 37, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
    border-color: rgba(90, 154, 146, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.app.dark .logo-light { display: none; }
.app.dark .logo-dark { display: block; }
.app.dark .dark-mode-btn { 
    background: rgba(90, 154, 146, 0.1);
    border: 1px solid rgba(90, 154, 146, 0.15);
}
.app.dark .dark-mode-btn:hover { 
    background: rgba(90, 154, 146, 0.25);
}
.app.dark .lang-btn { 
    background: rgba(90, 154, 146, 0.15);
    color: #E8E8E8;
    border: 1px solid rgba(90, 154, 146, 0.2);
}
.app.dark .lang-btn:hover { 
    background: rgba(90, 154, 146, 0.25);
}
.app.dark .skill-counter { 
    background: rgba(90, 154, 146, 0.15);
    color: #E8E8E8;
}
.app.dark .tips-btn { 
    background: rgba(90, 154, 146, 0.15);
    color: #E8E8E8;
}
.app.dark .progress-wrap { 
    background: rgba(90, 154, 146, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(90, 154, 146, 0.12);
}
.app.dark .progress-chapter { color: #E8E8E8; }
.app.dark .progress-dot { background: rgba(232, 242, 237, 0.3); }
.app.dark .progress-dot.done { background: #4A8A85; }
/* ===== DARK MODE - GLASSMORPHISM STYLE ===== */

/* Intro Screen */
.app.dark .intro-hero { 
    background: linear-gradient(180deg, #0A1215 0%, #152025 100%);
    color: #E8E8E8; 
}
.app.dark .intro-content { 
    /* Überschrieben durch neuen Neon Style am Ende */
}
.app.dark .intro-card { 
    background: rgba(10, 28, 32, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
    box-shadow: 0 0 12px rgba(90, 154, 146, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
.app.dark .intro-card-title { color: #FFFFFF !important; }
.app.dark .intro-list li { color: #94B8BC !important; border-color: rgba(90, 154, 146, 0.25) !important; }
.app.dark .intro-stat { 
    background: rgba(90, 154, 146, 0.1) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.3) !important;
}
.app.dark .intro-stat-number { color: #5A9A92 !important; text-shadow: 0 0 8px rgba(90, 154, 146, 0.4) !important; }
.app.dark .intro-stat-label { color: #5A8A90 !important; }
.app.dark .intro-warning { 
    background: rgba(90, 154, 146, 0.1) !important;
    border: 1px solid rgba(90, 154, 146, 0.3) !important;
}
.app.dark .intro-warning-title { color: #FFFFFF !important; }
.app.dark .intro-warning-text { color: #94B8BC !important; }

/* Start Form - kein eigener Container-Style */
.app.dark .start-form { 
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.app.dark .form-title { color: #FFFFFF !important; }
.app.dark .form-label { color: #94B8BC !important; }
.app.dark .form-input { 
    background: rgba(10, 28, 32, 0.8) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
    color: #FFFFFF !important;
}
.app.dark .form-input:focus { 
    border-color: #4A8A85;
    background: rgba(21, 32, 37, 0.9);
    box-shadow: 0 0 20px rgba(90, 154, 146, 0.15);
}
.app.dark .avatar-btn { 
    background: rgba(21, 32, 37, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.15);
}
.app.dark .avatar-btn.selected { 
    border-color: #5A9A92;
    background: rgba(90, 154, 146, 0.2);
    box-shadow: 0 0 20px rgba(90, 154, 146, 0.25);
}

/* Meet Screen - NEON STYLE */
.app.dark .meet { background: transparent !important; }
.app.dark .meet-card { 
    background: rgba(10, 28, 32, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
    box-shadow: 0 0 12px rgba(90, 154, 146, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
.app.dark .meet-header { background: rgba(0, 0, 0, 0.2) !important; }
.app.dark .meet-body { background: transparent !important; }
.app.dark .meet-story { color: #94B8BC !important; }
.app.dark .meet-quote { 
    background: rgba(90, 154, 146, 0.08) !important;
    border: 1px solid rgba(90, 154, 146, 0.25) !important;
}
.app.dark .meet-quote-text { color: #FFFFFF !important; }

/* Decide/React Screen - NEON STYLE */
.app.dark .decide { background: transparent !important; }
.app.dark .decide-instruction { 
    background: rgba(90, 154, 146, 0.08);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .decide-instruction-text { color: #E8E8E8; }
.app.dark .decide-input-fake { 
    background: rgba(90, 154, 146, 0.05);
    color: rgba(232, 242, 237, 0.65);
}
.app.dark .decide-title { color: #E8E8E8; }
.app.dark .option { 
    background: rgba(90, 154, 146, 0.08);
    border: 1px solid rgba(90, 154, 146, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.app.dark .option:hover { 
    border-color: #4A8A85;
    box-shadow: 0 0 20px rgba(90, 154, 146, 0.15);
}
.app.dark .option-text { color: #E8E8E8; }
.app.dark .option-expand { background: rgba(90, 154, 146, 0.08); color: rgba(232, 242, 237, 0.65); }
.app.dark .option-preview { 
    background: rgba(90, 154, 146, 0.05);
    border: 1px solid rgba(90, 154, 146, 0.1);
}
.app.dark .preview-stat { 
    background: rgba(21, 32, 37, 0.8); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .preview-stat-icon { color: #5A9A92; }
.app.dark .preview-stat-value { color: #E8E8E8; }
.app.dark .preview-stat-label { color: rgba(232, 242, 237, 0.65); }
.app.dark .preview-stat.good .preview-stat-value { color: #5A9A92; }
.app.dark .preview-stat.warn .preview-stat-value { color: #F4A261; }
.app.dark .preview-stat.bad .preview-stat-value { color: #E76F51; }
.app.dark .preview-victim { 
    background: rgba(21, 32, 37, 0.8); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .intro-hero { background: linear-gradient(180deg, #0A1215 0%, #152025 100%); }
.app.dark .intro-title { color: #E8E8E8; }
.app.dark .intro-card[style*="fef3c7"] { 
    background: rgba(233, 196, 106, 0.1) !important;
    border-color: rgba(233, 196, 106, 0.3) !important;
}
.app.dark .intro-card[style*="fef3c7"] .intro-card-title, .app.dark .intro-card[style*="fef3c7"] p { color: #E9C46A !important; }
.app.dark .intro-card[style*="e0f2fe"] { 
    background: rgba(90, 154, 146, 0.1) !important;
    border-color: rgba(90, 154, 146, 0.3) !important;
}
.app.dark .intro-card[style*="e0f2fe"] .intro-card-title, .app.dark .intro-card[style*="e0f2fe"] p { color: #4A8A85 !important; }
.app.dark .intro-highlight { color: #4A8A85; }
.app.dark .intro-section-title { color: #E8E8E8; }
.app.dark .intro-tagline { color: rgba(232, 242, 237, 0.62); }

/* Post Screen */
.app.dark .post-screen { background: linear-gradient(180deg, #0A1215 0%, #152025 100%); }
.app.dark .post-status { 
    background: linear-gradient(135deg, rgba(90, 154, 146, 0.2), rgba(63, 95, 99, 0.2));
    border: 1px solid rgba(90, 154, 146, 0.3);
}
.app.dark .post { 
    background: rgba(90, 154, 146, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .post-name { color: #E8E8E8; }
.app.dark .post-content { color: #E8E8E8; }
.app.dark .post-engagement { border-color: rgba(90, 154, 146, 0.12); }
.app.dark .post-actions { border-color: rgba(90, 154, 146, 0.12); }
.app.dark .post-action { color: rgba(232, 242, 237, 0.65); }
.app.dark .post-action:hover { background: rgba(21, 32, 37, 0.9); }
.app.dark .post-reach { background: rgba(21, 32, 37, 0.9); }
.app.dark .post-reach-title { color: #E8E8E8; }
/* Comments */
.app.dark .comment-bubble { 
    background: rgba(21, 32, 37, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.15);
}
.app.dark .comment-name { color: #E8E8E8; }
.app.dark .comment-text { color: rgba(232, 242, 237, 0.65); }
.app.dark .comment-meta { color: rgba(232, 242, 237, 0.65); }
.app.dark .comment-action { color: rgba(232, 242, 237, 0.65); }
.app.dark .comment-time { color: rgba(232, 242, 237, 0.65); }
.app.dark .comment-dot { color: rgba(232, 242, 237, 0.65); }
.app.dark .comment-replies { color: #5A9A92; }
.app.dark .comment-reactions { 
    background: rgba(21, 32, 37, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(90, 154, 146, 0.15);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.app.dark .comment-reactions-count { color: #5A9A92; }
.app.dark .comment-reactions-icon { border-color: rgba(90, 154, 146, 0.2); }
.app.dark .post-comments { 
    background: rgba(21, 32, 37, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.app.dark .post-comments-header { 
    color: #E8E8E8;
    background: rgba(21, 32, 37, 0.9);
    border-bottom: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .comments-hint { 
    color: #E8E8E8 !important;
    background: linear-gradient(135deg, rgba(90, 154, 146, 0.2), rgba(63, 95, 99, 0.15)) !important;
    border: none !important;
    border-bottom: 1px solid rgba(90, 154, 146, 0.2) !important;
}
.app.dark .comments-hint-icon {
    color: #5A9A92;
}
.app.dark .comment-replies-toggle { 
    color: #5A9A92; 
    background: transparent;
    border: none;
}
.app.dark .comment-replies-toggle:hover {
    background: rgba(90, 154, 146, 0.1);
}
.app.dark .reply-avatar { background: rgba(90, 154, 146, 0.15); }
.app.dark .reply-bubble { 
    background: rgba(21, 32, 37, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .reply-name { color: #E8E8E8; }
.app.dark .reply-text { color: rgba(232, 242, 237, 0.65); }
.app.dark .typing-dots { 
    background: rgba(21, 32, 37, 0.8);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .typing-dots span { background: #5A9A92; }
.app.dark .cta { 
    background: rgba(10, 18, 21, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(90, 154, 146, 0.12);
}

/* Consequences */
.app.dark .cons-intro-title { color: #4A8A85; }
.app.dark .cons-section { 
    background: rgba(10, 18, 21, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .cons-header { 
    color: #E8E8E8;
    border-color: rgba(90, 154, 146, 0.12);
    background: rgba(90, 154, 146, 0.08);
}
.app.dark .cons-body { background: transparent; }
.app.dark .timeline-item { border-color: rgba(90, 154, 146, 0.12); }
.app.dark .timeline-action { color: #E8E8E8; }
.app.dark .timeline-time { color: rgba(232, 242, 237, 0.65); }
.app.dark .timeline-consequence { color: rgba(195, 220, 210, 0.68); }
.app.dark .timeline-icon.good { background: #4A8A85; box-shadow: 0 0 15px rgba(90, 154, 146, 0.4); }
.app.dark .timeline-icon.warn { background: #F4A261; box-shadow: 0 0 15px rgba(244, 162, 97, 0.4); }
.app.dark .timeline-icon.bad { background: #E76F51; box-shadow: 0 0 15px rgba(231, 111, 81, 0.4); }
.app.dark .victim-card { 
    background: rgba(90, 154, 146, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .victim-card.positive { 
    background: rgba(90, 154, 146, 0.1);
    border-color: rgba(90, 154, 146, 0.3);
}
.app.dark .victim-card.negative { 
    background: rgba(231, 111, 81, 0.1);
    border-color: rgba(231, 111, 81, 0.3);
}
.app.dark .victim-name { color: #E8E8E8; }
.app.dark .victim-header { border-color: rgba(255,255,255,0.1); }

/* Dark Mode - Vorher/Nachher Boxen */
.app.dark .victim-before-box { 
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.1);
}
.app.dark .victim-after-box { background: rgba(90, 154, 146, 0.05); }
.app.dark .victim-box-label { color: rgba(232, 242, 237, 0.65); }
.app.dark .victim-box-text { color: rgba(195, 220, 210, 0.68); }
.app.dark .victim-after-box .victim-box-label { color: #F9A999; }
.app.dark .victim-after-box .victim-box-text { color: #F9A999; }
.app.dark .victim-card.positive .victim-after-box .victim-box-label { color: #7ABAB2; }
.app.dark .victim-card.positive .victim-after-box .victim-box-text { color: #7ABAB2; }

/* Dark Mode - Message Bubble */
.app.dark .victim-message-bubble { 
    background: rgba(90, 154, 146, 0.08);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .victim-message-name { color: #E8E8E8; }
.app.dark .victim-message-text { color: rgba(232, 242, 237, 0.65); }
.app.dark .victim-message-time { color: rgba(232, 242, 237, 0.65); }

.app.dark .preview-tl-item { border-color: rgba(90, 154, 146, 0.12); }
.app.dark .preview-tl-text { color: #E8E8E8; }
.app.dark .preview-tl-time { color: rgba(232, 242, 237, 0.65); }
.app.dark .preview-tl-consequence { color: rgba(195, 220, 210, 0.68); }
.app.dark .preview-tl-icon.good { background: #4A8A85; }
.app.dark .preview-tl-icon.warn { background: #F4A261; }
.app.dark .preview-tl-icon.bad { background: #E76F51; }
.app.dark .preview-timeline { 
    background: rgba(21, 32, 37, 0.8); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}

/* Quiz */
.app.dark .quiz-card { 
    background: rgba(90, 154, 146, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .quiz-header { background: rgba(0, 0, 0, 0.2); }
.app.dark .quiz-title { color: #E8E8E8; }
.app.dark .quiz-subtitle { color: rgba(232, 242, 237, 0.65); }
.app.dark .quiz-option { 
    background: rgba(90, 154, 146, 0.08);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .quiz-option:hover { 
    background: rgba(90, 154, 146, 0.1);
    border-color: rgba(90, 154, 146, 0.3);
}
.app.dark .quiz-option-letter { 
    background: rgba(90, 154, 146, 0.12);
    color: rgba(195, 220, 210, 0.68);
}

/* Learned */
.app.dark .learned { background: linear-gradient(180deg, #0A1215 0%, #152025 100%); }
.app.dark .learned-card { 
    background: rgba(90, 154, 146, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .learned-card-title { color: #E8E8E8; }
.app.dark .learned-card-text { color: rgba(195, 220, 210, 0.68); }
.app.dark .learned-tip { 
    background: rgba(233, 196, 106, 0.1);
    border: 1px solid rgba(233, 196, 106, 0.3);
}
.app.dark .learned-tip-title { color: #E9C46A; }
.app.dark .learned-tip-text { color: #fcd34d; }
.app.dark .learned-feedback { background: rgba(90, 154, 146, 0.05); }
.app.dark .learned-feedback-title { color: #E8E8E8; }
.app.dark .learned-progress { 
    background: rgba(90, 154, 146, 0.08);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .learned-progress-title { color: #E8E8E8; }
.app.dark .learned-progress-dot { background: rgba(232, 242, 237, 0.3); }

/* Result Screen */
.app.dark .result-hero { 
    background: linear-gradient(180deg, #0A1215 0%, #152025 100%);
}
.app.dark .result-content { background: linear-gradient(180deg, #152025 0%, #0A1215 100%); }
.app.dark .result-score { 
    background: rgba(90, 154, 146, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .result-score-title { color: #E8E8E8; }
.app.dark .result-score-bar { background: rgba(90, 154, 146, 0.12); }
.app.dark .personality { 
    background: rgba(90, 154, 146, 0.08);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .personality-type { color: #E8E8E8; }
.app.dark .transfer-task { 
    background: rgba(90, 154, 146, 0.08);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .transfer-title { color: #E8E8E8; }
.app.dark .transfer-text { color: rgba(195, 220, 210, 0.68); }
.app.dark .transfer-checklist { background: rgba(90, 154, 146, 0.05); }
.app.dark .transfer-item { color: #E8E8E8; border-color: rgba(90, 154, 146, 0.12); }
.app.dark .badges { 
    background: rgba(90, 154, 146, 0.08);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .achievements-section { 
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.15), rgba(244, 162, 97, 0.1));
    border: 1px solid rgba(233, 196, 106, 0.3);
}
.app.dark .achievements-title { color: #E9C46A; }
.app.dark .achievement { 
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .achievement-name { color: #E8E8E8; }
.app.dark .achievement-desc { color: rgba(232, 242, 237, 0.65); }
.app.dark .whatif-teaser { 
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.2), rgba(63, 95, 99, 0.15));
    border: 1px solid rgba(63, 95, 99, 0.3);
}
.app.dark .whatif-title { color: #4A8A85; }
.app.dark .whatif-text { color: #4A8A85; }
.app.dark .whatif-teaser .btn { 
    background: linear-gradient(135deg, #4A8A85, #3A8A80);
    border: none;
}

/* Was wäre wenn? - Philosophie im Code */
.whatif-screen { padding: 20px; }
.whatif-header { text-align: center; margin-bottom: 24px; }
.whatif-header-icon { font-size: 3em; margin-bottom: 8px; }
.whatif-header-title { font-size: 1.5em; font-weight: 800; margin-bottom: 8px; }
.whatif-header-sub { font-size: 0.95em; color: var(--gray); }
.whatif-stories { display: flex; flex-direction: column; gap: 16px; }
.whatif-story { 
    background: rgba(230, 238, 238, 0.66); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px; 
    padding: 16px; 
    border-left: 4px solid #8B2C32;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    border-left: 4px solid #8B2C32;
}
.whatif-story-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.whatif-story-icon { font-size: 2em; }
.whatif-story-chapter { font-weight: 700; font-size: 0.9em; color: #2D4548; }
.whatif-story-victim { font-size: 0.85em; color: var(--gray); }
.whatif-story-post { background: #FDDDD5; border-radius: 8px; padding: 12px; margin-bottom: 12px; font-size: 0.9em; color: #991b1b; font-style: italic; }
.whatif-story-consequence { font-size: 0.9em; color: #2D4548; }
.whatif-story-consequence strong { color: #D45A3D; }

.app.dark .whatif-header-title { color: #E8E8E8; }
.app.dark .whatif-story { 
    background: rgba(21, 32, 37, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(90, 154, 146, 0.12);
    border-left: 4px solid #8B2C32;
}
.app.dark .whatif-story-chapter { color: #E8E8E8; }
.app.dark .whatif-story-post { background: #450a0a; color: #F9A999; }
.app.dark .whatif-story-consequence { color: #d1d5db; }
.app.dark .whatif-story-consequence strong { color: #FCA5A5; }
.app.dark .badges-title { color: #E8E8E8; }
.app.dark .badge { background: rgba(21, 32, 37, 0.9); border-color: rgba(90, 154, 146, 0.15); }
.app.dark .badge.earned { border-color: #4A8A85; }
.app.dark .badge-name { color: #E8E8E8; }
.app.dark .certificate { background: rgba(90, 154, 146, 0.1); }
.app.dark .certificate-title { color: #E8E8E8; }
.app.dark .certificate-text { color: #A0AEB5; }
.app.dark .certificate-name { color: #E8E8E8; }
.app.dark .my-tips { background: rgba(90, 154, 146, 0.1); }
.app.dark .my-tips-title { color: #E8E8E8; }
.app.dark .my-tips-item { background: rgba(21, 32, 37, 0.9); color: #E8E8E8; }
.app.dark .share { background: rgba(90, 154, 146, 0.1); }
.app.dark .summary { background: rgba(21, 32, 37, 0.9); }
.app.dark .summary-title { color: #E8E8E8; }
.app.dark .summary-card { background: rgba(90, 154, 146, 0.1); }
.app.dark .summary-card-title { color: #E8E8E8; }
.app.dark .summary { background: rgba(21, 32, 37, 0.9); }
.app.dark .summary-item { 
    background: rgba(21, 32, 37, 0.8); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(90, 154, 146, 0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3); 
}
.app.dark .summary-item-title { color: #E8E8E8; }
.app.dark .summary-item-desc { color: #A0AEB5; }
.app.dark .tips-panel { 
    background: rgba(10, 18, 21, 0.9); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.app.dark .tips-panel-header { 
    background: rgba(21, 32, 37, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.app.dark .tips-panel-body { 
    background: rgba(21, 32, 37, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.app.dark .tip-item { 
    background: rgba(90, 154, 146, 0.08); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .tip-item-title { color: #E8E8E8; }
.app.dark .tip-item-text { background: rgba(21, 32, 37, 0.9); color: #A0AEB5; }
.app.dark .newspaper { 
    background: rgba(90, 154, 146, 0.08); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .newspaper-title { color: #E8E8E8; }
.app.dark .newspaper-text { color: #A0AEB5; }

/* PROGRESS - Einfacher und klarer */
/* ========================================
   PROGRESS BAR - Immer sichtbar, wie ein guter Freund
   ======================================== */
.progress-wrap { 
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(184, 220, 210, 0.18) 0%, transparent 40%),
        linear-gradient(135deg, var(--rc-primary), var(--rc-primary-dark), #4A7A7E);
    padding: 14px 20px; 
    position: sticky;
    top: 60px; /* Under header */
    z-index: 90;
    box-shadow: 0 4px 20px rgba(63, 95, 99, 0.25);
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(184, 220, 210, 0.12);
}
.progress-wrap.minimized {
    padding: 10px 20px;
}
.progress-simple {
    display: flex;
    align-items: center;
    gap: 20px;
}
.progress-label { 
    font-weight: 700; 
    color: white; 
    font-size: 0.9em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.progress-label-icon {
    font-size: 1.3em;
}
.progress-bar-simple {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.25);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.progress-bar-fill {
    height: 100%;
    background: white;
    border-radius: var(--radius-full);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.progress-bar-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
    border-radius: var(--radius-full);
}
.progress-percentage {
    color: white;
    font-weight: 700;
    font-size: 0.9em;
    min-width: 45px;
    text-align: right;
}

/* Story Counter in Progress */
.progress-stories {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}
.progress-story-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: all 0.3s ease;
}
.progress-story-dot.done {
    background: white;
    transform: scale(1.1);
}
.progress-story-dot.current {
    background: var(--rc-warning);
    animation: pulse 1.5s ease infinite;
}

/* Dark Mode Progress */
.app.dark .progress-wrap { 
    background: linear-gradient(135deg, rgba(21, 32, 37, 0.9), rgba(90, 154, 146, 0.1));
    border-bottom: 1px solid var(--rc-dark-border);
}
.app.dark .progress-bar-simple {
    background: rgba(255,255,255,0.15);
}
.app.dark .progress-bar-fill {
    background: var(--rc-primary);
}

/* SCREENS */
.screen { 
    display: none; 
    min-height: auto;
    background: transparent;
}
.screen.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.app.dark .screen {
    background: transparent;
}

/* ========================================
   MIMIKAMA STYLE - Intro Screen
   ======================================== */
/* intro-hero ausgeblendet - Logo ist redundant, bereits im Header */
.intro-hero { 
    display: none;
}
.intro-icon { font-size: 4em; margin-bottom: 20px; display: none; }
.intro-logo { 
    width: 160px; 
    height: 160px; 
    margin-bottom: 20px; 
    object-fit: contain;
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 60px rgba(232, 242, 237, 0.4);
    animation: float 4s ease-in-out infinite;
    background: rgba(184, 220, 210, 0.12);
    padding: 15px;
}
/* Intro Screen - Blau macht schlau, also weißes Logo */
.intro-logo-light { display: none; }
.intro-logo-dark { 
    display: inline-block;
    filter: none; /* Light Mode: kein Glow */
}
.app.dark .intro-logo-light { display: none; }
.app.dark .intro-logo-dark { 
    display: inline-block;
    filter: 
        drop-shadow(0 0 3px rgba(90, 154, 146, 0.4))
        drop-shadow(0 0 8px rgba(90, 154, 146, 0.2));
}
.intro-title { 
    font-size: var(--font-size-2xl); 
    font-weight: 800; 
    margin-bottom: var(--space-sm); 
    color: white;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.intro-subtitle { 
    font-size: var(--font-size-base); 
    opacity: 0.95; 
    color: white;
}
.intro-tagline { 
    font-weight: 600; 
    color: white; 
    margin-bottom: var(--space-sm); 
    font-size: var(--font-size-base);
    opacity: 0.9;
}

.intro-content { 
    padding: 20px 16px; 
    background: linear-gradient(180deg, #e8f2ed 0%, #FFFFFF 100%);
}
.intro-highlight { 
    color: #3F5F63;
    font-weight: 600; 
    font-size: 0.95em; 
    margin-bottom: 16px; 
}
.intro-section-title { 
    font-weight: 600; 
    font-size: 0.9em; 
    margin-bottom: 10px; 
    color: var(--mm-text); 
}
.intro-card { 
    background: rgba(230, 238, 238, 0.66);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    border-radius: 16px; 
    padding: 20px; 
    margin-bottom: 12px;
    box-shadow: 
        0 8px 32px rgba(63, 95, 99, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
}
.intro-card-title { 
    font-weight: 600; 
    font-size: 0.95em; 
    margin-bottom: 12px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.intro-list { list-style: none; }
.intro-list li { 
    padding: 10px 0; 
    padding-left: 28px; 
    position: relative; 
    color: var(--mm-gray); 
    font-size: 0.9em; 
    border-bottom: 1px solid var(--mm-gray-light); 
}
.intro-list li:last-child { border: none; }
.intro-list li::before { 
    content: attr(data-icon); 
    position: absolute; 
    left: 0; 
    font-size: 1em; 
}

.intro-stats { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
    margin-bottom: 12px; 
}
.intro-stat { 
    background: rgba(232, 242, 237, 0.65); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px; 
    padding: 14px 10px; 
    text-align: center;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    box-shadow: 0 2px 8px rgba(63, 95, 99, 0.06);
}
.intro-stat-icon { font-size: 1.3em; margin-bottom: 4px; }
.intro-stat-number { 
    font-size: 1.3em; 
    font-weight: 700; 
    color: var(--mm-primary); 
}
.intro-stat-label { 
    font-size: 0.65em; 
    color: var(--mm-gray); 
    margin-top: 2px; 
    text-transform: uppercase; 
    letter-spacing: 0.3px; 
}

.intro-warning { 
    background: #FDF6E3; 
    border-radius: 12px; 
    padding: 14px; 
    margin-bottom: 16px;
    border: 1px solid #E9C46A;
}
.intro-warning-title { 
    font-weight: 600; 
    font-size: 0.9em; 
    margin-bottom: 4px; 
    color: var(--mm-text); 
}
.intro-warning-text { 
    font-size: 0.85em; 
    color: var(--mm-gray); 
    line-height: 1.4; 
}

.start-form { 
    background: rgba(230, 238, 238, 0.66); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px; 
    padding: 20px 16px;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    box-shadow: 0 4px 16px rgba(63, 95, 99, 0.08);
}
/* Welcome Text Styles */
.welcome-name-text {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--mm-text);
    margin-bottom: 4px;
}
.welcome-subtext {
    font-size: 0.95em;
    color: var(--mm-gray);
}
.app.dark .welcome-name-text {
    color: #E8E8E8;
}
.app.dark .welcome-subtext {
    color: #a1a1a6;
}
/* Intro Note */
.intro-note {
    margin-top: 16px;
    font-size: 0.8em;
    color: var(--mm-gray);
}
.app.dark .intro-note {
    color: #a1a1a6;
}
.form-title { 
    font-weight: 600; 
    font-size: 1em; 
    margin-bottom: 16px; 
    text-align: center; 
}
.form-group { margin-bottom: 16px; }
.form-label { 
    display: block; 
    font-size: 0.85em; 
    font-weight: 600; 
    margin-bottom: 8px; 
    color: var(--mm-text); 
}
.form-input { 
    width: 100%; 
    padding: 14px 16px; 
    border: 1.5px solid rgba(63, 95, 99, 0.30); 
    border-radius: 12px; 
    font-size: 0.95em; 
    transition: all 0.2s; 
    background: rgba(232, 242, 237, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(232, 242, 237, 0.65);
}
.form-input:focus { 
    outline: none; 
    border-color: rgba(63, 95, 99, 0.5); 
    background: rgba(195, 220, 210, 0.68);
    box-shadow: 0 0 0 3px rgba(63, 95, 99, 0.1), inset 0 1px 0 rgba(232, 242, 237, 0.65);
}
.avatar-grid { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap: 10px; 
}
.avatar-btn { 
    width: 52px; 
    height: 52px; 
    border-radius: 50%; 
    border: 1.5px solid rgba(63, 95, 99, 0.30); 
    background: linear-gradient(135deg, #a8d4d0 0%, #c5e0d8 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 1.5em; 
    cursor: pointer; 
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(63, 95, 99, 0.08);
    overflow: hidden;
}
.avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    
}
.avatar-btn:hover { 
    transform: translateY(-2px); 
    border-color: rgba(63, 95, 99, 0.4);
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.15);
}
.avatar-btn.selected { 
    border-color: #3F5F63;
    border-width: 2.5px;
    background: linear-gradient(135deg, #a8d4d0 0%, #c5e0d8 100%);
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.2);
}

/* Age Group Selection */
.age-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}
.age-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    border-radius: 16px;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    background: rgba(232, 242, 237, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(63, 95, 99, 0.08);
}
.age-btn:hover {
    border-color: rgba(63, 95, 99, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.15);
}
.age-btn.selected {
    border: 2px solid #3F5F63;
    background: rgba(63, 95, 99, 0.1);
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.2);
}
/* Dark Mode für Age Buttons - Vampire approved 🧛 */
.app.dark .age-btn {
    background: rgba(21, 32, 37, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(90, 154, 146, 0.15);
}
.app.dark .age-btn:hover {
    border-color: rgba(90, 154, 146, 0.3);
    background: rgba(21, 32, 37, 0.9);
}
.app.dark .age-btn.selected {
    background: rgba(90, 154, 146, 0.2);
    border-color: #5A9A92;
}
.app.dark .age-label {
    color: #E8E8E8;
}
.app.dark .age-range {
    color: #a1a1a6;
}
.age-icon {
    font-size: 1.8em;
    margin-bottom: 4px;
}
.age-label {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--mm-text);
}
.age-range {
    font-size: 0.8em;
    color: var(--mm-gray);
}
.age-hint {
    font-size: 0.8em;
    color: var(--mm-gray);
    text-align: center;
    margin-top: 8px;
}

/* ========================================
   MIMIKAMA BUTTONS
   ======================================== */
/* ========================================
   BUTTONS - Mimikama Design
   ======================================== */
.btn { 
    width: 100%; 
    padding: var(--space-md) var(--space-lg);
    border: none; 
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.2s ease;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: var(--space-sm);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:active {
    transform: scale(0.98);
}

/* Primary Button - Hauptaktion (Lila) */
.btn-primary { 
    background: linear-gradient(135deg, #3F5F63 0%, #2D4548 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.35);
}
.btn-primary:hover { 
    background: linear-gradient(135deg, #2D4548 0%, #1a5c54 100%);
    box-shadow: 0 6px 20px rgba(63, 95, 99, 0.45);
    transform: translateY(-1px);
}

/* Secondary Button - Glassmorphism */
.btn-secondary { 
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #3F5F63;
    margin-top: var(--space-md);
    border: 1.5px solid rgba(63, 95, 99, 0.30);
}
.btn-secondary:hover { 
    background: rgba(232, 242, 237, 0.62);
    border-color: rgba(63, 95, 99, 0.3);
}

/* Ghost Button - Boo! 👻 - Abbrechen, Zurück */
.btn-ghost {
    background: transparent;
    color: #3F5F63;
    border: none;
}
.btn-ghost:hover {
    background: rgba(63, 95, 99, 0.1);
}

/* Tertiary Button - Outline Style */
.btn-tertiary {
    background: transparent;
    color: #3F5F63;
    border: 1px solid #3F5F63;
}
.btn-tertiary:hover {
    background: rgba(63, 95, 99, 0.1);
}

/* Success Button */
.btn-success {
    background: var(--rc-success);
    color: white;
}
.btn-success:hover {
    background: #2DA94E;
}

/* Warning Button */
.btn-warning {
    background: var(--rc-warning);
    color: white;
}

/* Error/Danger Button */
.btn-danger {
    background: var(--rc-error);
    color: white;
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
}
.btn-lg {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--font-size-lg);
}

/* Dark Mode Buttons - Glassmorphism */
.app.dark .btn-primary { 
    background: linear-gradient(135deg, #4A8A85 0%, #3A8A80 100%);
    box-shadow: 0 4px 20px rgba(90, 154, 146, 0.3);
}
.app.dark .btn-primary:hover {
    box-shadow: 0 6px 30px rgba(90, 154, 146, 0.4);
}
.app.dark .btn-secondary { 
    background: rgba(90, 154, 146, 0.08);
    color: var(--rc-dark-text);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .btn-secondary:hover {
    background: rgba(90, 154, 146, 0.12);
    border-color: rgba(90, 154, 146, 0.3);
}
.app.dark .btn-ghost {
    color: #3F5F63;
}
.app.dark .btn-ghost:hover {
    background: rgba(63, 95, 99, 0.15);
}
.app.dark .btn-tertiary {
    color: #3F5F63;
    border-color: #3F5F63;
}

/* ========================================
   MIMIKAMA STYLE - Meet Victim (Profil-Karte)
   ======================================== */
.meet { 
    padding: var(--space-md); 
    background: var(--rc-background);
}
.meet-card { 
    background: var(--rc-card); 
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--rc-border-light);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.meet-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.meet-header { 
    background: 
        radial-gradient(ellipse at 30% 30%, rgba(63, 95, 99, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, #3F5F63 0%, #0a324f 100%);
    padding: var(--space-lg) var(--space-lg); 
    color: white; 
    text-align: center;
    position: relative;
    overflow: hidden;
}
.meet-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}
.meet-label { 
    font-size: var(--font-size-xs); 
    opacity: 0.9; 
    margin-bottom: var(--space-sm); 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-weight: 600; 
}
.meet-emoji { font-size: 3.5em; margin: var(--space-md) 0; }
.meet-photo { 
    width: 120px; 
    height: 120px; 
    border-radius: 50%; 
    object-fit: cover; 
    margin: var(--space-md) 0; 
    border: 4px solid rgba(255,255,255,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 40px rgba(63, 95, 99, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Meet photo im Story Ring - Kreis beibehalten */
.story-ring .meet-photo {
    width: 112px;
    height: 112px;
    margin: 0;
    border: 3px solid white;
    box-shadow: none;
}

.meet-card:hover .meet-photo {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 60px rgba(63, 95, 99, 0.3);
}
.meet-name { 
    font-size: var(--font-size-xl); 
    font-weight: 700; 
}
.meet-role { 
    opacity: 0.85; 
    font-size: var(--font-size-sm); 
    font-weight: 400; 
}
.meet-body { 
    padding: var(--space-lg) var(--space-md); 
}
.meet-story { 
    color: var(--rc-text); 
    line-height: 1.7; 
    font-size: var(--font-size-base); 
    margin-bottom: var(--space-md); 
}
.meet-quote { 
    background: var(--rc-primary-light); 
    border-radius: var(--radius-md); 
    padding: var(--space-md); 
    font-style: italic; 
    position: relative;
    border-left: 4px solid var(--rc-primary);
    transition: transform 0.2s ease;
}
.meet-quote:hover {
    transform: translateX(4px);
}
.meet-quote::before { display: none; }
.meet-quote-text { 
    color: var(--rc-text); 
    font-size: var(--font-size-base);
}
.meet-situation { 
    margin-top: 20px; 
    padding: 20px; 
    background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
    border-radius: 16px;
    border-left: 5px solid #ffc107;
    box-shadow: 0 4px 15px rgba(233, 196, 106, 0.2);
    position: relative;
    overflow: hidden;
}
.meet-situation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255,193,7,0.1) 0%, transparent 50%);
    pointer-events: none;
}
.meet-situation-title { 
    font-weight: 700; 
    font-size: 1.1em; 
    margin-bottom: 12px; 
    color: #856404;
    display: flex;
    align-items: center;
    gap: 8px;
}
.meet-situation-title::before {
    content: "\26A0\FE0F";
    font-size: 1.3em;
}
.meet-situation-text { 
    font-size: 1.05em; 
    line-height: 1.6; 
    color: #664d03;
    font-weight: 500;
}
.app.dark .meet-situation { 
    background: linear-gradient(135deg, #3d3200 0%, #4a3d00 100%);
    border-left-color: #ffc107;
}
.app.dark .meet-situation-title { color: #ffc107; }
.app.dark .meet-situation-text { color: #ffe066; }
.meet-story-image { 
    width: 100%; 
    border-radius: 12px; 
    margin-top: 16px; 
}
.meet-image-caption { 
    font-size: 0.8em; 
    color: var(--mm-gray); 
    text-align: center; 
    margin-top: 8px; 
}

/* ========================================
   MIMIKAMA STYLE - Decide/Options
   ======================================== */
.decide { 
    padding: var(--space-md); 
    background: var(--rc-background); 
}

/* Neue klare Instruction - Glass Effekt */
.decide-instruction {
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    text-align: center;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    box-shadow: 0 4px 16px rgba(63, 95, 99, 0.08);
    position: relative;
    overflow: hidden;
}
.decide-instruction::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}
.decide-instruction-icon {
    font-size: 3em;
    margin-bottom: var(--space-md);
    animation: float 3s ease-in-out infinite;
}
.decide-instruction-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--rc-text);
    margin-bottom: var(--space-sm);
}
.decide-instruction-hint {
    font-size: var(--font-size-sm);
    color: var(--rc-text-secondary);
}

.option { 
    background: var(--rc-card); 
    border: 2px solid var(--rc-border-light); 
    border-radius: var(--radius-lg); 
    margin-bottom: var(--space-md); 
    overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    cursor: pointer;
    position: relative;
}

/* Option C: Social-Media-Post-Style */
.option.option-post-style {
    cursor: default;
    background: var(--rc-card);
}
.option.option-post-style .option-header {
    padding: 12px 16px 8px 16px;
    border-bottom: 1px solid var(--rc-border-light);
    background: rgba(63, 95, 99, 0.03);
}
.option.option-post-style .option-post-preview {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: 0;
}
.option.option-post-style .option-post-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3F5F63 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(63, 95, 99, 0.1);
}
.option.option-post-style .option-post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.option.option-post-style .option-post-avatar span {
    font-size: 20px;
}
.option.option-post-style .option-post-content {
    flex: 1;
    min-width: 0;
}
.option.option-post-style .option-post-name {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--rc-primary);
    margin-bottom: 6px;
}
.option.option-post-style .option-post-text {
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--mm-text);
    background: #f8f9fa;
    padding: 12px 14px;
    border-radius: 12px;
    border-left: 3px solid var(--rc-primary);
    position: relative;
}
.option.option-post-style .option-post-text::before {
    content: '"';
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 1.5em;
    color: var(--rc-primary);
    opacity: 0.3;
    font-family: Georgia, serif;
}
.option.option-post-style .option-choose {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 16px 16px;
    padding: 14px 24px;
    background: var(--rc-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s ease;
}
.option.option-post-style .option-choose:hover {
    background: var(--rc-primary-dark, #0a3250);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.3);
}
.option.option-post-style:hover {
    transform: none;
    border-color: var(--rc-primary);
    box-shadow: var(--shadow-md);
}

/* Option B: Vereinfachte Optionen ohne Vorschau - legacy support */
.option.option-simple {
    cursor: default;
}
.option.option-simple .option-main {
    padding: var(--space-md);
    padding-bottom: var(--space-sm);
}
.option.option-simple .option-choose {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 16px 16px;
    padding: 12px 20px;
    background: var(--rc-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.2s ease;
}
.option.option-simple .option-choose:hover {
    background: var(--rc-primary-dark, #0a3250);
    transform: translateY(-1px);
}
.option.option-simple:hover {
    transform: none;
    border-color: var(--rc-primary);
}
.option::before {
    display: none; /* Linker Rand deaktiviert */
}
.option:hover { 
    border-color: var(--rc-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.option:hover::before {
    display: none;
}
.option.expanded { 
    border-color: var(--rc-primary); 
    box-shadow: var(--shadow-lg), 0 0 20px rgba(63, 95, 99, 0.1);
}
.option.expanded::before {
    display: none;
}
.option-main { padding: var(--space-md); }
.option-top { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 8px; 
}
.option-badge { 
    padding: 4px 10px; 
    border-radius: 6px; 
    font-size: 0.7em; 
    font-weight: 600; 
    text-transform: uppercase;
    background: rgba(63, 95, 99, 0.12);
    color: #3F5F63;
    border: 1.5px solid rgba(63, 95, 99, 0.32);
}
/* Alle Optionen gleich neutral - Mimikama Teal */
.option-a .option-badge { background: rgba(63, 95, 99, 0.12); color: #3F5F63; }
.option-b .option-badge { background: rgba(63, 95, 99, 0.12); color: #3F5F63; }
.option-c .option-badge { background: rgba(63, 95, 99, 0.12); color: #3F5F63; }
.option-expand { 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    background: var(--mm-gray-bg); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.7em; 
    transition: transform 0.3s; 
    color: var(--mm-gray); 
}
.option.expanded .option-expand { transform: rotate(180deg); }
.option-text { 
    font-size: 0.9em; 
    line-height: 1.5; 
    color: var(--mm-text);
    /* Alle Optionen gleich hoch - damit Textlänge nicht verrät welche "richtig" ist */
    min-height: 3em;
}

.option-preview { 
    display: none; 
    border-top: 1px solid var(--mm-gray-light); 
    background: var(--mm-gray-bg); 
    padding: 14px; 
}
.option.expanded .option-preview { display: block; }
.preview-section { margin-bottom: 14px; }
.preview-section:last-child { margin-bottom: 0; }
.preview-title { 
    font-size: 0.7em; 
    font-weight: 600; 
    color: var(--mm-gray); 
    margin-bottom: 8px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preview-stat { 
    background: rgba(232, 242, 237, 0.65); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px; 
    padding: 10px 8px; 
    text-align: center;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
}
.preview-stat-icon { font-size: 1.2em; margin-bottom: 4px; }
.preview-stat-value { font-size: 1em; font-weight: 600; }
.preview-stat.good .preview-stat-value { color: var(--mm-green); }
.preview-stat.warn .preview-stat-value { color: var(--mm-orange); }
.preview-stat.bad .preview-stat-value { color: var(--mm-red); }
.preview-stat-label { font-size: 0.65em; color: var(--mm-gray); }
.preview-timeline { 
    background: rgba(232, 242, 237, 0.65); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px; 
    padding: 12px;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
}
.preview-tl-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mm-gray-light); }
.preview-tl-item:last-child { border: none; }
.preview-tl-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85em; flex-shrink: 0; }
.preview-tl-icon.good { background: #dcfce7; }
.preview-tl-icon.warn { background: #FDF6E3; }
.preview-tl-icon.bad { background: #FDDDD5; }
.preview-tl-content { flex: 1; }
.preview-tl-time { font-size: 0.75em; color: var(--gray); }
.preview-tl-text { font-size: 0.85em; font-weight: 500; }
.preview-tl-consequence { font-size: 0.8em; color: var(--gray); }
.preview-victim { 
    background: rgba(232, 242, 237, 0.65); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px; 
    padding: 12px; 
    display: flex; 
    gap: 12px; 
    align-items: center;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
}
.preview-victim-emoji { font-size: 2em; }
.preview-victim-change { display: flex; align-items: center; gap: 8px; font-size: 0.9em; }
.preview-victim-text { font-size: 0.8em; color: var(--gray); margin-top: 4px; }
.option-choose { background: var(--blue); color: white; border: none; width: 100%; padding: 14px; font-size: 0.95em; font-weight: 700; cursor: pointer; }
.option-choose:hover { background: #3F5F63; }

/* POST */
.post-screen { background: var(--light); }
.post-status { background: linear-gradient(135deg, #3F5F63, #2D4548); color: white; padding: 12px 16px; text-align: center; font-weight: 600; font-size: 0.95em; animation: statusPulse 1.5s infinite; }
@keyframes statusPulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
.post { 
    background: rgba(230, 238, 238, 0.66); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    margin: 8px;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
}
.post-header { display: flex; padding: 12px 16px; gap: 10px; align-items: center; }
.post-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 1.4em; color: white; flex-shrink: 0; }
.post-info { flex: 1; }
.post-name { font-weight: 600; font-size: 0.95em; }
.post-meta { font-size: 0.8em; color: var(--gray); }
.post-content { padding: 4px 16px 16px; font-size: 0.95em; line-height: 1.5; }
.post-image { width: 100%; max-height: 400px; object-fit: cover; }
.post-engagement { padding: 10px 16px; border-top: 1px solid var(--border); }
.post-reactions-row { display: flex; justify-content: space-between; align-items: center; }
.post-reactions-icons { display: flex; align-items: center; }
.post-reaction-bubble { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7em; margin-right: -6px; border: 2px solid white; }
.post-reaction-bubble.like { background: var(--blue); }
.post-reaction-bubble.love { background: #ff3b30; }
.post-reaction-bubble.angry { background: #ff9500; }
.post-reactions-count { margin-left: 12px; font-size: 0.9em; color: var(--gray); }
.post-shares { font-size: 0.9em; color: var(--gray); }
.post-actions { display: none; }

/* ========================================
   INSTAGRAM STYLE - Kommentar-Ansicht
   ======================================== */

/* Header mit Zieh-Leiste */
.insta-header {
    text-align: center;
    padding: 12px 16px 8px;
    border-bottom: 1px solid #E8E9E6;
}
.insta-header-bar {
    width: 40px;
    height: 4px;
    background: #c7c7c7;
    border-radius: 2px;
    margin: 0 auto 12px;
}
.insta-header-title {
    font-weight: 600;
    font-size: 1em;
    color: #1A2830;
}

/* ========================================
   GROSSER INSTAGRAM POST (Feed Style)
   ======================================== */
.insta-post {
    background: rgba(195, 220, 210, 0.68);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(232, 242, 237, 0.62);
    border-radius: 16px;
    margin: 8px;
    box-shadow: 0 4px 20px rgba(63, 95, 99, 0.08);
}

.insta-post-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.insta-post-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.insta-post-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mm-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    color: white;
    flex-shrink: 0;
}

.insta-post-user-info {
    display: flex;
    flex-direction: column;
}

.insta-post-name {
    font-weight: 600;
    font-size: 0.9em;
    color: #1A2830;
}

.insta-post-location {
    font-size: 0.75em;
    color: #8A9BA2;
}

.insta-post-more {
    font-size: 1em;
    color: #1A2830;
    cursor: pointer;
    letter-spacing: 2px;
}

/* GROSSES BILD */
.insta-post-image-container {
    width: 100%;
    /* aspect-ratio entfernt - Bild bestimmt natürliche Höhe */
    overflow: hidden;
    background: #fafafa;
}

.insta-post-image-big {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 500px;
}

/* Post Actions */
.insta-post-actions {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
}

.insta-post-actions-left {
    display: flex;
    gap: 16px;
}

.insta-action-icon {
    font-size: 1.5em;
    cursor: pointer;
    transition: transform 0.2s;
}

.insta-action-icon:hover {
    transform: scale(1.1);
}

.insta-action-icon.liked {
    color: #ed4956;
}

/* Likes */
.insta-post-likes {
    padding: 0 16px 8px;
    font-weight: 600;
    font-size: 0.9em;
    color: #1A2830;
}

/* Caption */
.insta-post-caption {
    padding: 0 16px 8px;
    font-size: 0.9em;
    line-height: 1.4;
}

.insta-post-caption-name {
    font-weight: 600;
    color: #1A2830;
    margin-right: 6px;
}

.insta-post-caption-text {
    color: #1A2830;
}

/* View Comments Link */
.insta-view-comments {
    padding: 0 16px 8px;
    color: #8A9BA2;
    font-size: 0.85em;
    cursor: pointer;
}

/* Post Time */
.insta-post-time {
    padding: 0 16px 12px;
    font-size: 0.7em;
    color: #8A9BA2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Kommentare Header */
.insta-comments-header {
    background: rgba(195, 220, 210, 0.68);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(232, 242, 237, 0.62);
    padding: 16px;
}

.insta-comments-header .insta-header-bar {
    margin-bottom: 12px;
}

.insta-comments-header .insta-header-title {
    margin-bottom: 8px;
}

.insta-comments-header .insta-filter {
    border: none;
    padding: 0;
}

/* Filter "Für dich" - Algorithmus des Grauens */
.insta-filter {
    padding: 12px 16px;
    font-size: 0.9em;
    color: #8A9BA2;
    display: flex;
    align-items: center;
    gap: 4px;
}
.insta-filter-arrow { font-size: 0.7em; }

/* Kommentar-Liste */
.insta-comments {
    padding: 0;
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-height: 200px;
}

/* Einzelner Kommentar - Instagram Style */
.comment {
    display: flex;
    padding: 12px 16px;
    gap: 12px;
    animation: instaFadeIn 0.4s ease;
}
@keyframes instaFadeIn { 
    from { opacity: 0; transform: translateY(8px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E8E9E6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    flex-shrink: 0;
    overflow: hidden;
}
.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.comment-content {
    flex: 1;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.comment-name {
    font-weight: 600;
    font-size: 0.9em;
    color: #1A2830;
}

.comment-time {
    font-size: 0.8em;
    color: #8A9BA2;
}

.comment-text {
    font-size: 0.95em;
    line-height: 1.4;
    color: #1A2830;
    word-break: break-word;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.8em;
    color: #8A9BA2;
}

.comment-action {
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: #8A9BA2;
}

/* Herz-Icon rechts */
.comment-like {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.comment-like-icon {
    font-size: 1.1em;
    color: #8A9BA2;
    transition: transform 0.2s;
}
.comment-like-icon.liked,
.comment-like-icon:hover {
    color: #ed4956;
}
.comment-like-count {
    font-size: 0.75em;
    color: #8A9BA2;
}

/* Antworten Toggle */
.comment-replies-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8em;
    color: #8A9BA2;
    margin: 8px 0 0 56px;
    cursor: pointer;
    font-weight: 500;
}
.comment-replies-toggle::before {
    content: "";
    width: 24px;
    height: 1px;
    background: #8A9BA2;
}

.comment-replies-list {
    margin-left: 56px;
    padding-top: 4px;
}

.reply {
    display: flex;
    gap: 10px;
    padding: 8px 0;
}
.reply-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E8E9E6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    flex-shrink: 0;
    overflow: hidden;
}
.reply-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reply-content { flex: 1; }
.reply-name { font-weight: 600; font-size: 0.85em; color: #1A2830; }
.reply-text { font-size: 0.9em; color: #1A2830; }

/* Reel Info */
.insta-reel-info {
    padding: 16px;
    font-size: 0.85em;
    color: #8A9BA2;
    border-top: 1px solid #E8E9E6;
}

/* Stats */
.insta-stats {
    display: flex;
    justify-content: space-around;
    padding: 12px 16px;
    background: #fafafa;
    border-top: 1px solid #E8E9E6;
}
.insta-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
}
.insta-stat-icon { font-size: 1.1em; }
.insta-stat-value { font-weight: 600; color: #1A2830; }

/* Input Bar - Instagram Style */
.insta-input {
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(232, 242, 237, 0.62);
    position: sticky;
    bottom: 0;
    z-index: 50;
}

/* Emoji-Leiste wie bei Instagram */
.insta-emoji-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.insta-emoji-bar span {
    font-size: 1.5em;
    cursor: pointer;
    transition: transform 0.15s;
}
.insta-emoji-bar span:hover {
    transform: scale(1.2);
}

/* Comment Feedback Popup */
.comment-feedback {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 16px;
    padding: 16px;
    background: linear-gradient(135deg, #f0f8f5, #e0f2fe);
    border: 1px solid #0ea5e9;
    border-radius: 12px;
    animation: feedbackSlide 0.4s ease;
    transition: opacity 0.3s;
}
.comment-feedback.green {
    background: linear-gradient(135deg, #f0f8f5, #d1fae5);
    border-color: #3F5F63;
}
.comment-feedback.green .comment-feedback-title { color: #059669; }
.comment-feedback.green .comment-feedback-text { color: #047857; }
.comment-feedback.green .comment-feedback-close { color: #059669; }

.comment-feedback.orange {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: #f97316;
}
.comment-feedback.orange .comment-feedback-title { color: #ea580c; }
.comment-feedback.orange .comment-feedback-text { color: #c2410c; }
.comment-feedback.orange .comment-feedback-close { color: #ea580c; }

.comment-feedback.yellow {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border-color: #eab308;
}
.comment-feedback.yellow .comment-feedback-title { color: #ca8a04; }
.comment-feedback.yellow .comment-feedback-text { color: #a16207; }
.comment-feedback.yellow .comment-feedback-close { color: #ca8a04; }

.comment-feedback.gray {
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
    border-color: #9ca3af;
}
.comment-feedback.gray .comment-feedback-title { color: #3A5664; }
.comment-feedback.gray .comment-feedback-text { color: #5D6D74; }
.comment-feedback.gray .comment-feedback-close { color: #5D6D74; }

@keyframes feedbackSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.comment-feedback-icon {
    font-size: 1.5em;
    flex-shrink: 0;
}
.comment-feedback-content {
    flex: 1;
}
.comment-feedback-title {
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 4px;
}
.comment-feedback-text {
    font-size: 0.9em;
    color: #0c4a6e;
    line-height: 1.5;
}
.comment-feedback-close {
    background: none;
    border: none;
    color: #0369a1;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0;
    opacity: 0.6;
}
.comment-feedback-close:hover {
    opacity: 1;
}

/* Emotionaler Kommentar - leichte Markierung */
.comment-emotional .comment-text {
    border-left: 3px solid #F4A261;
    padding-left: 8px;
}

/* Sachlicher Kommentar - positive Markierung */
.comment-sachlich .comment-text {
    border-left: 3px solid #3F5F63;
    padding-left: 8px;
}

/* ========================================
   🤖 FEATURE 1: BOT KOMMENTARE - Beep Boop 🤖
   ======================================== */
.bot-comment {
    opacity: 0.85;
    background: linear-gradient(135deg, rgba(255,193,7,0.08), rgba(255,152,0,0.05));
    border-left: 2px solid #FFA726;
}
.bot-comment .bot-name {
    color: #E65100;
    font-style: italic;
}
.bot-comment .bot-avatar {
    background: linear-gradient(135deg, #FFE082, #FFCA28);
}
.app.dark .bot-comment {
    background: linear-gradient(135deg, rgba(255,193,7,0.12), rgba(255,152,0,0.08));
}

/* ========================================
   🔥 FEATURE 2: VIRAL OVERLAY - Internet-Ruhm simulieren
   ======================================== */
.viral-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.viral-overlay.show {
    opacity: 1;
}
.viral-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 400px;
    padding: 20px;
}
.viral-phone {
    width: 280px;
    height: 200px;
    background: #1a1a1a;
    border-radius: 24px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.viral-screen {
    background: #000;
    border-radius: 18px;
    height: 100%;
    overflow: hidden;
}
.viral-header {
    background: linear-gradient(135deg, #3F5F63, #764ba2);
    color: white;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.9em;
}
.viral-notifications {
    padding: 8px;
    height: calc(100% - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.viral-notif {
    background: linear-gradient(135deg, rgba(239,68,68,0.9), rgba(220,38,38,0.9));
    color: white;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.8em;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    animation: viralShake 0.3s ease;
}
.viral-notif.show {
    transform: translateX(0);
    opacity: 1;
}
@keyframes viralShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.viral-message {
    text-align: center;
    color: white;
}
.viral-icon {
    font-size: 3em;
    animation: viralPulse 1s ease infinite;
}
@keyframes viralPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.viral-title {
    font-size: 1.5em;
    font-weight: 700;
    margin: 12px 0 8px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.viral-text {
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
    font-size: 0.95em;
}
.viral-close-btn {
    margin-top: 16px;
    padding: 12px 32px;
    background: linear-gradient(135deg, #3F5F63, #2D4548);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}
.viral-close-btn:hover {
    transform: scale(1.05);
}

/* ========================================
   💬 FEATURE 3: DM POPUP - Vorsicht vor Fremden
   ======================================== */
.dm-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 9999;
    transform: translateY(100%) scale(0.8);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.dm-popup.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.dm-popup-header {
    background: linear-gradient(135deg, #3F5F63, #764ba2);
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dm-popup-icon {
    font-size: 1.2em;
}
.dm-popup-title {
    flex: 1;
    font-weight: 600;
}
.dm-popup-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    opacity: 0.7;
}
.dm-popup-close:hover {
    opacity: 1;
}
.dm-popup-body {
    padding: 16px;
}
.dm-sender {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.dm-sender-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
}
.dm-sender-name {
    font-weight: 600;
    color: #333;
    font-size: 0.9em;
}
.dm-message {
    background: #f5f5f5;
    padding: 12px 16px;
    border-radius: 12px;
    color: #333;
    line-height: 1.4;
}
.dm-popup-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
}
.dm-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.dm-btn-ignore {
    background: #f5f5f5;
    color: #666;
}
.dm-btn-ignore:hover {
    background: #e8e8e8;
}
.dm-btn-reply {
    background: linear-gradient(135deg, #3F5F63, #764ba2);
    color: white;
}
.dm-btn-reply:hover {
    transform: scale(1.02);
}

/* Dark Mode DM */
.app.dark .dm-popup,
body.dark-mode .dm-popup {
    background: #1e1e1e;
}
.app.dark .dm-sender-name,
body.dark-mode .dm-sender-name {
    color: #e0e0e0;
}
.app.dark .dm-message,
body.dark-mode .dm-message {
    background: #2d2d2d;
    color: #e0e0e0;
}
.app.dark .dm-btn-ignore,
body.dark-mode .dm-btn-ignore {
    background: #2d2d2d;
    color: #aaa;
}

/* ========================================
   💥 FEATURE 4: SOCIAL PROOF - Wenn alle springen...
   ======================================== */
.social-proof-banner {
    background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(59,130,246,0.05));
    border-bottom: 1px solid rgba(37,99,235,0.2);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.3s ease;
}
.social-proof-banner.show {
    transform: translateY(0);
    opacity: 1;
}
.social-proof-icon {
    font-size: 1.3em;
}
.social-proof-text {
    flex: 1;
    font-size: 0.85em;
    color: #2D4548;
}
.social-proof-text strong {
    color: #3F5F63;
}
.social-proof-close {
    background: none;
    border: none;
    color: #3F5F63;
    font-size: 1em;
    cursor: pointer;
    opacity: 0.6;
}
.social-proof-close:hover {
    opacity: 1;
}

/* Dark Mode Social Proof */
.app.dark .social-proof-banner {
    background: linear-gradient(135deg, rgba(78,205,196,0.15), rgba(12,62,100,0.1));
    border-bottom-color: rgba(78,205,196,0.2);
}
.app.dark .social-proof-text {
    color: #5A9A92;
}
.app.dark .social-proof-text strong {
    color: #7ABAB2;
}
.app.dark .social-proof-close {
    color: #5A9A92;
}

/* ========================================
   🥚 EASTER EGGS CSS
   ======================================== */

/* Konfetti */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10002;
    overflow: hidden;
}
.confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: confettiFall linear forwards;
}
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Mimikama Easter Egg */
.mimikama-easter-egg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, #3F5F63, #2D4548);
    border-radius: 20px;
    padding: 32px 40px;
    z-index: 10001;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 60px rgba(63, 95, 99, 0.4);
    text-align: center;
    max-width: 320px;
}
.mimikama-easter-egg.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.mimikama-egg-icon {
    font-size: 3em;
    margin-bottom: 12px;
}
.mimikama-egg-title {
    font-size: 1.4em;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}
.mimikama-egg-text {
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
    margin-bottom: 16px;
}
.mimikama-egg-signature {
    font-style: italic;
    color: rgba(255,255,255,0.7);
    font-size: 0.9em;
}

/* Hacker Mode */
body.hacker-mode {
    background: #0a0a0a !important;
}
body.hacker-mode * {
    font-family: 'Courier New', monospace !important;
}
body.hacker-mode .app,
body.hacker-mode .phone-frame {
    background: #0d1117 !important;
    border-color: #00ff00 !important;
}
body.hacker-mode .phone-screen,
body.hacker-mode .insta-container {
    background: #0d1117 !important;
}
body.hacker-mode .comment,
body.hacker-mode .insta-header,
body.hacker-mode .insta-content {
    background: rgba(0, 255, 0, 0.05) !important;
    border-color: rgba(0, 255, 0, 0.2) !important;
}
body.hacker-mode .comment-name,
body.hacker-mode .comment-text,
body.hacker-mode .insta-name,
body.hacker-mode .insta-caption {
    color: #00ff00 !important;
}
body.hacker-mode .comment-time {
    color: #00aa00 !important;
}
body.hacker-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 0, 0.03) 0px,
        rgba(0, 255, 0, 0.03) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 9999;
}

/* Input-Zeile */
.insta-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.insta-input-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mm-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    flex-shrink: 0;
}
.insta-input-field {
    flex: 1;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
    font-size: 0.9em;
    color: var(--mm-text);
    outline: none;
    border-radius: 20px;
    padding: 10px 16px;
    min-height: 40px;
    transition: all 0.2s ease;
}
.insta-input-field:focus {
    border-color: var(--mm-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(63, 95, 99, 0.1);
}
.insta-input-field::placeholder {
    color: #8A9BA2;
}
.insta-send-btn {
    background: none;
    border: none;
    color: var(--mm-primary);
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.insta-send-btn:hover,
.insta-send-btn.active {
    opacity: 1;
}

/* Typing Animation */
.typing {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.typing-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E8E9E6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    overflow: hidden;
}
.typing-dots {
    display: flex;
    gap: 4px;
}
.typing-dots span {
    width: 8px;
    height: 8px;
    background: #8A9BA2;
    border-radius: 50%;
    animation: instaBounce 1.4s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes instaBounce { 
    0%, 60%, 100% { transform: translateY(0); } 
    30% { transform: translateY(-6px); } 
}

.cta { 
    padding: 16px; 
    background: rgba(232, 242, 237, 0.65); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(232, 242, 237, 0.62); 
    position: sticky; 
    bottom: 0; 
}

/* Kommentar-Interaktions-Hinweis */
.comment-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 8px 16px;
    background: linear-gradient(135deg, rgba(184, 220, 210, 0.1) 0%, rgba(63, 95, 99, 0.08) 100%);
    border-radius: 12px;
    border-left: 3px solid #3F5F63;
    animation: hintPulse 2s ease-in-out;
}
.comment-hint-icon {
    font-size: 1.3em;
    color: #3F5F63;
}
.comment-hint-text {
    font-size: 0.85em;
    color: rgba(21, 32, 37, 0.9);
    line-height: 1.4;
}
@keyframes hintPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}
.app.dark .comment-hint {
    background: linear-gradient(135deg, rgba(90, 154, 146, 0.15) 0%, rgba(63, 95, 99, 0.1) 100%);
    border-left: 3px solid #5A9A92;
}
.app.dark .comment-hint-text {
    color: #E8E8E8;
}
.app.dark .comment-hint-icon {
    color: #5A9A92;
}

/* Post-Reach versteckt, wir nutzen insta-stats */
.post-reach { display: none; }
.post-reach-title { display: none; }
.post-reach-stats { display: none; }
.comment {
    display: flex; 
    gap: 12px; 
    padding: 12px 16px; 
    animation: commentIn 0.4s ease; 
}
.comment-avatar { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: var(--light); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1em; 
    flex-shrink: 0; 
    overflow: hidden; 
}
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-body { flex: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.comment-content { flex: 1; }
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.comment-name { font-weight: 600; font-size: 0.9em; color: var(--dark); }
.comment-time { font-size: 0.8em; color: var(--gray); }
.comment-text { font-size: 0.95em; line-height: 1.4; color: var(--dark); }
.comment-actions { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    margin-top: 6px; 
    font-size: 0.8em; 
}
.comment-action { 
    color: var(--gray); 
    font-weight: 500; 
    cursor: pointer; 
    background: none; 
    border: none; 
    padding: 0; 
}
.comment-action:hover { color: var(--dark); }
.comment-like { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 2px; 
    padding: 8px;
    cursor: pointer;
}
.comment-like-icon { font-size: 1.2em; color: var(--gray); }
.comment-like-icon.liked { color: #ff3b5c; }
.comment-like-count { font-size: 0.75em; color: var(--gray); }

/* Replies - Instagram Style */
.comment-replies-toggle { 
    font-size: 0.8em; 
    color: var(--gray); 
    margin-top: 8px; 
    margin-left: 52px;
    cursor: pointer; 
    display: flex;
    align-items: center;
    gap: 8px;
}
.comment-replies-toggle::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--gray);
}
.comment-replies-toggle:hover { color: var(--dark); }
.comment-replies-list { margin-left: 52px; }
.reply { 
    display: flex; 
    gap: 10px; 
    padding: 10px 0;
}
.reply-avatar { 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    background: var(--light); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.7em; 
    flex-shrink: 0; 
    overflow: hidden; 
}
.reply-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reply-content { flex: 1; }
.reply-name { font-weight: 600; font-size: 0.85em; color: var(--dark); }
.reply-text { font-size: 0.9em; color: var(--dark); margin-top: 1px; }

/* Comment Input Bar - Instagram Style */
.comment-input-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid rgba(232, 242, 237, 0.62);
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.comment-input-emojis {
    display: flex;
    gap: 8px;
    font-size: 1.3em;
    opacity: 0.7;
}
.comment-input-field {
    flex: 1;
    background: none;
    border: none;
    font-size: 0.9em;
    color: var(--gray);
    outline: none;
}

.typing { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.typing-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--light); display: flex; align-items: center; justify-content: center; font-size: 1em; overflow: hidden; }
.typing-dots { display: flex; gap: 4px; }
.typing-dots span { width: 6px; height: 6px; background: var(--gray); border-radius: 50%; animation: bounce 1.4s infinite; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} }

/* ========================================
   FACEBOOK THEME (für 30+ / Adults)
   Basierend auf echtem Facebook-Layout
   ======================================== */

/* Facebook Farben */
.theme-facebook {
    --fb-blue: #3F5F63;
    --fb-blue-light: #e7f3ff;
    --fb-bg: #f0f2f5;
    --fb-card: #ffffff;
    --fb-text: #050505;
    --fb-text-secondary: #65676b;
    --fb-border: #dadde1;
    --fb-green: #31a24c;
    --fb-red: #fa3e3e;
}

/* Facebook Post Container */
.theme-facebook .post,
.theme-facebook .insta-post {
    background: var(--fb-card);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: 8px;
}

/* Facebook Post Header */
.theme-facebook .post-header,
.theme-facebook .insta-post-header-bar {
    padding: 12px 16px;
}

.theme-facebook .post-avatar,
.theme-facebook .insta-post-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--fb-blue), #B8D8D0);
}

.theme-facebook .post-name,
.theme-facebook .insta-post-name {
    color: var(--fb-text);
    font-weight: 600;
}

.theme-facebook .post-meta,
.theme-facebook .insta-post-location {
    color: var(--fb-text-secondary);
    font-size: 0.8em;
}

/* Facebook Reaktions-Leiste (oben) */
.theme-facebook .fb-reactions-bar {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    color: var(--fb-text-secondary);
    font-size: 0.9em;
}

.theme-facebook .fb-reactions-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.theme-facebook .fb-reaction-icons {
    display: flex;
}

.theme-facebook .fb-reaction-icons span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    margin-right: -4px;
    border: 2px solid white;
}

.theme-facebook .fb-reactions-right {
    display: flex;
    gap: 12px;
}

/* Facebook Action Buttons - HORIZONTAL wie echt */
.theme-facebook .fb-actions {
    display: flex;
    border-top: 1px solid var(--fb-border);
    border-bottom: 1px solid var(--fb-border);
    padding: 4px 8px;
}

.theme-facebook .fb-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    background: none;
    border: none;
    color: var(--fb-text-secondary);
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.theme-facebook .fb-action-btn:hover {
    background: var(--fb-bg);
}

.theme-facebook .fb-action-btn.liked {
    color: var(--fb-blue);
}

/* Facebook Filter "Relevanteste zuerst" */
.theme-facebook .fb-filter {
    padding: 12px 16px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--fb-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.theme-facebook .fb-filter-arrow {
    font-size: 0.7em;
}

/* Facebook Kommentare - OHNE Bubble! */
.theme-facebook .insta-comments,
.theme-facebook .post-comments {
    background: var(--fb-card);
    padding: 0 16px;
}

.theme-facebook .comment {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 0;
    animation: fbCommentSlide 0.4s ease;
}

@keyframes fbCommentSlide { 
    from { opacity: 0; transform: translateX(-10px); } 
    to { opacity: 1; transform: translateX(0); } 
}

.theme-facebook .comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Facebook Kommentar Body - KEIN Bubble! */
.theme-facebook .comment-body {
    flex: 1;
    display: block;
}

.theme-facebook .comment-content {
    background: var(--fb-bg);
    border-radius: 18px;
    padding: 8px 12px;
    display: inline-block;
    max-width: 100%;
}

.theme-facebook .comment-header {
    display: block;
    margin-bottom: 0;
}

.theme-facebook .comment-name {
    font-weight: 600;
    font-size: 0.85em;
    color: var(--fb-text);
    display: block;
}

.theme-facebook .comment-time {
    display: none; /* Zeit kommt in Meta-Zeile */
}

.theme-facebook .comment-text {
    font-size: 0.9em;
    color: var(--fb-text);
    margin-top: 2px;
}

/* Facebook Meta-Zeile - Nostalgie pur: "2 Tage · Gefällt mir · Antworten" */
.theme-facebook .comment-actions {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 4px;
    padding-left: 12px;
    font-size: 0.75em;
    color: var(--fb-text-secondary);
}

.theme-facebook .comment-meta-time {
    color: var(--fb-text-secondary);
}

.theme-facebook .comment-meta-dot {
    margin: 0 6px;
    color: var(--fb-text-secondary);
}

.theme-facebook .comment-action {
    font-weight: 600;
    color: var(--fb-text-secondary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.theme-facebook .comment-action:hover {
    text-decoration: underline;
}

/* Facebook Reaktionen rechts neben Kommentar */
.theme-facebook .comment-like {
    display: none; /* Alte Herz-Version ausblenden */
}

.theme-facebook .fb-comment-reactions {
    display: flex;
    align-items: center;
    gap: 4px;
    float: right;
    margin-top: 4px;
    font-size: 0.8em;
    color: var(--fb-text-secondary);
}

.theme-facebook .fb-comment-reactions-icons {
    display: flex;
}

.theme-facebook .fb-comment-reactions-icons span {
    font-size: 0.9em;
}

/* Facebook "Alle X Antworten ansehen" */
.theme-facebook .comment-replies-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 8px 40px;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--fb-text-secondary);
    cursor: pointer;
    background: none;
    border-radius: 0;
}

.theme-facebook .comment-replies-toggle::before {
    content: "\21B3";
    color: var(--fb-text-secondary);
    width: auto;
    height: auto;
    background: none;
}

.theme-facebook .comment-replies-toggle:hover {
    text-decoration: underline;
    background: none;
}

.theme-facebook .comment-replies-toggle .reply-count-badge {
    display: none; /* Badge-Style entfernen für Facebook */
}

/* Facebook Input unten */
.theme-facebook .insta-input {
    background: var(--fb-card);
    border-top: 1px solid var(--fb-border);
    padding: 12px 16px;
}

.theme-facebook .insta-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-facebook .insta-input-avatar {
    width: 32px;
    height: 32px;
}

.theme-facebook .insta-input-field {
    flex: 1;
    background: var(--fb-bg);
    border: none;
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 0.9em;
    color: var(--fb-text);
}

.theme-facebook .insta-input-field::placeholder {
    color: var(--fb-text-secondary);
}

/* Facebook Emoji-Leiste */
.theme-facebook .insta-emoji-bar {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    justify-content: flex-end;
}

.theme-facebook .insta-emoji-bar span {
    cursor: pointer;
    font-size: 1.2em;
    opacity: 0.6;
}

.theme-facebook .insta-emoji-bar span:hover {
    opacity: 1;
}

/* Hide Instagram-specific elements in Facebook mode */
.theme-facebook .insta-header-bar,
.theme-facebook .insta-filter,
.theme-facebook .comments-hint-icon {
    display: none;
}

.theme-facebook .insta-header-title {
    text-align: left;
    font-weight: normal;
}

.theme-facebook .comments-hint {
    background: var(--fb-bg);
    color: var(--fb-text-secondary);
    border: none;
    justify-content: flex-start;
    padding-left: 16px;
}

/* Facebook Dark Mode */
.app.dark.theme-facebook {
    --fb-bg: rgba(21, 32, 37, 0.9);
    --fb-card: rgba(21, 32, 37, 0.85);
    --fb-text: #e4e6eb;
    --fb-text-secondary: #5A9A92;
    --fb-border: rgba(90, 154, 146, 0.15);
}

.app.dark.theme-facebook .comment-content {
    background: rgba(21, 32, 37, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.15);
    border-radius: 12px;
}

/* ========================================
   KOMMENTARE - Deine Meinung zählt
   (für alle Themes)
   ======================================== */

/* Hinweis dass Kommentare interaktiv sind */
.comments-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(184, 220, 210, 0.12), rgba(63, 95, 99, 0.08));
    color: #3F5F63;
    font-size: 0.85em;
    font-weight: 500;
    border-bottom: 1px solid rgba(63, 95, 99, 0.15);
    animation: hintPulse 2s ease infinite;
}

@keyframes hintPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.comments-hint-icon {
    font-size: 1.1em;
    color: #3F5F63;
    animation: hintBounce 1s ease infinite;
}

@keyframes hintBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.theme-facebook .comments-hint {
    background: var(--fb-blue-light);
    color: var(--fb-blue);
    border-bottom-color: #a8d4fb;
}

/* Replies noch prominenter */
.comment-replies-toggle {
    background: rgba(63, 95, 99, 0.08);
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
}

.comment-replies-toggle:hover {
    background: rgba(63, 95, 99, 0.15);
}

.comment-replies-toggle .reply-count-badge {
    background: #0095f6;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    font-weight: 600;
    margin-left: 8px;
}

.theme-facebook .comment-replies-toggle {
    background: var(--fb-blue-light);
}

.theme-facebook .comment-replies-toggle:hover {
    background: #d5e8e0;
}

.theme-facebook .comment-replies-toggle .reply-count-badge {
    background: var(--fb-blue);
}

/* Neue Antwort Animation */
.reply.new {
    animation: newReplyPop 0.5s ease;
    background: rgba(63, 95, 99, 0.05);
    border-radius: 8px;
    margin: 4px 0;
    padding: 10px !important;
}

@keyframes newReplyPop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

.theme-facebook .reply.new {
    background: var(--fb-blue-light);
}

/* Alternative Reaktion Highlight */
.comment-alternative {
    position: relative;
    border: 2px solid #3F5F63;
    border-radius: 12px;
    padding: 12px !important;
    background: linear-gradient(135deg, #f0f8f5, #d1fae5) !important;
    margin-top: 16px;
}

.comment-alternative::before {
    content: "\1F4A1  So hättest du auch reagieren können";
    position: absolute;
    top: -12px;
    left: 16px;
    background: #3F5F63;
    color: white;
    font-size: 0.7em;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
}

.theme-facebook .comment-alternative {
    border-color: var(--fb-green);
    background: linear-gradient(135deg, #e6f4ea, #ceead6) !important;
}

.theme-facebook .comment-alternative::before {
    background: var(--fb-green);
}

/* NPC-Reaktionen auf User-Kommentare */
.npc-reaction {
    animation: npcSlideIn 0.5s ease;
    border-left: 3px solid transparent;
    margin-left: 20px;
    position: relative;
}

.npc-reaction::before {
    content: "\21B3";
    position: absolute;
    left: -18px;
    top: 12px;
    color: #8A9BA2;
    font-size: 0.9em;
}

@keyframes npcSlideIn {
    from { 
        opacity: 0; 
        transform: translateX(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

.npc-reaction.comment-emotional {
    border-left-color: #F4A261;
    background: linear-gradient(90deg, rgba(244, 162, 97, 0.08), transparent);
}

.npc-reaction.comment-sachlich {
    border-left-color: #3F5F63;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), transparent);
}

/* User-Kommentar hervorheben */
.user-comment {
    border-left: 3px solid var(--mm-primary);
    background: linear-gradient(90deg, rgba(63, 95, 99, 0.05), transparent);
}

.user-comment .comment-name {
    color: var(--mm-primary) !important;
}

.user-comment .comment-name::after {
    content: " (du)";
    font-size: 0.75em;
    font-weight: 400;
    opacity: 0.7;
}

body[data-lang="en"] .user-comment .comment-name::after {
    content: " (you)";
}

.theme-facebook .npc-reaction::before {
    color: var(--fb-text-secondary);
}

.theme-facebook .user-comment {
    border-left-color: var(--fb-blue);
    background: linear-gradient(90deg, rgba(24, 119, 242, 0.05), transparent);
}

.theme-facebook .user-comment .comment-name {
    color: var(--fb-blue) !important;
}

/* Facebook Theme: Instagram Actions (Like, Comment, Share) anpassen */
.theme-facebook .insta-post-actions {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid var(--fb-border, #E4E6EB);
    border-bottom: 1px solid var(--fb-border, #E4E6EB);
    padding: 4px 8px;
    margin: 0 0 8px 0;
}

.theme-facebook .insta-post-actions-left {
    display: flex;
    flex: 1;
    justify-content: space-around;
    gap: 0;
}

.theme-facebook .insta-action-icon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    font-size: 1.2em;
    color: var(--fb-text-secondary, #65676B);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
}

.theme-facebook .insta-action-icon:hover {
    background: var(--fb-bg, #F0F2F5);
    transform: none;
}

.theme-facebook .insta-action-icon.liked {
    color: var(--fb-blue, #1877F2);
}

/* Facebook Like Text unter den Actions */
.theme-facebook .insta-post-likes {
    padding: 8px 16px;
    font-size: 0.9em;
    color: var(--fb-text-secondary, #65676B);
}

.cta { 
    padding: 16px; 
    background: rgba(232, 242, 237, 0.65); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(232, 242, 237, 0.62); 
    position: sticky; 
    bottom: 0; 
}

/* CONSEQUENCE */
.cons-intro { 
    text-align: center; 
    padding: 24px 20px 8px; 
}
.cons-intro-title { 
    font-size: 1.1em; 
    font-weight: 600; 
    color: var(--mm-primary); 
}

/* Impact Banner - für alle Entscheidungen */
.impact-banner {
    margin: 16px;
    padding: 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    animation: impactPop 0.5s ease;
}
@keyframes impactPop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
.impact-banner-icon {
    font-size: 2.5em;
}
.impact-banner-title {
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 4px;
}
.impact-banner-subtitle {
    font-size: 0.9em;
}

/* Grün - Sachlich (p=0) */
.impact-banner.good {
    background: linear-gradient(135deg, #f0f8f5, #d1fae5);
    border: 2px solid #4A7A7E;
}
.impact-banner.good .impact-banner-title { color: #166534; }
.impact-banner.good .impact-banner-subtitle { color: #15803d; }

/* Orange - Emotional (p=1) */
.impact-banner.warn {
    background: linear-gradient(135deg, #fffbeb, #FDF6E3);
    border: 2px solid #F4A261;
}
.impact-banner.warn .impact-banner-title { color: #8B6B35; }
.impact-banner.warn .impact-banner-subtitle { color: #a16207; }

/* Rot - Extrem (p=2) */
.impact-banner.bad {
    background: linear-gradient(135deg, #FEF3EF, #FDDDD5);
    border: 2px solid #8B2C32;
}
.impact-banner.bad .impact-banner-title { color: #991b1b; }
.impact-banner.bad .impact-banner-subtitle { color: #C04A35; }

/* Dark Mode */
.app.dark .impact-banner.good {
    background: linear-gradient(135deg, #064e3b, #065f46);
    border-color: #3A8A80;
}
.app.dark .impact-banner.good .impact-banner-title { color: #7ABAB2; }
.app.dark .impact-banner.good .impact-banner-subtitle { color: #6ec7a7; }

.app.dark .impact-banner.warn {
    background: linear-gradient(135deg, #422006, #78350f);
    border-color: #d97706;
}
.app.dark .impact-banner.warn .impact-banner-title { color: #F5E4B8; }
.app.dark .impact-banner.warn .impact-banner-subtitle { color: #fcd34d; }

.app.dark .impact-banner.bad {
    background: linear-gradient(135deg, #450a0a, #7f1d1d);
    border-color: #D45A3D;
}
.app.dark .impact-banner.bad .impact-banner-title { color: #F9A999; }
.app.dark .impact-banner.bad .impact-banner-subtitle { color: #FCA5A5; }

.cons-section { 
    margin: 0; 
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0; 
    overflow: visible;
    border: none;
    box-shadow: none;
}

/* === INSTAGRAM STORY STYLE CONSEQUENCE === */
#screen-consequence {
    background: linear-gradient(180deg, #3F5F63 0%, #4A7A7E 50%, #2A7AB8 100%) !important;
    min-height: 100vh !important;
    position: relative;
    padding-bottom: 100px;
}

#screen-consequence::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(90, 154, 146, 0.15) 0%, transparent 50%) !important;
    pointer-events: none;
    z-index: 0;
}

#screen-consequence .cons-intro {
    padding: 20px 16px 16px;
    text-align: center;
    position: relative;
    z-index: 1;
}

#screen-consequence .cons-intro-title {
    color: white !important;
    font-size: 1.3em;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Story Progress Bar - Instagram Style */
#screen-consequence .cons-section::before {
    content: '';
    display: block;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
    margin: 0 16px 16px;
    position: relative;
}

#screen-consequence .cons-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    height: 3px;
    width: 60%;
    background: white;
    border-radius: 3px;
}

/* Timeline als Instagram Sticker Style */
#screen-consequence .cons-header {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    padding: 12px 16px;
    font-weight: 600;
    border: none;
    border-radius: 16px;
    margin: 0 16px 12px;
    font-size: 0.95em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#screen-consequence .cons-body {
    padding: 0 16px;
}

#screen-consequence .timeline-item {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    opacity: 1;
    transform: none;
    animation: storyItemPop 0.4s ease backwards;
}

#screen-consequence .timeline-item:nth-child(1) { animation-delay: 0.1s; }
#screen-consequence .timeline-item:nth-child(2) { animation-delay: 0.3s; }
#screen-consequence .timeline-item:nth-child(3) { animation-delay: 0.5s; }

@keyframes storyItemPop {
    from { 
        opacity: 0; 
        transform: scale(0.8) translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

#screen-consequence .timeline-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1em;
}

#screen-consequence .timeline-action {
    color: #3F5F63;
    font-weight: 700;
}

#screen-consequence .timeline-time {
    background: rgba(63, 95, 99, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
    color: #3F5F63;
}

#screen-consequence .timeline-consequence {
    color: #4a5568;
}

/* Newspaper als Breaking News Sticker */
#screen-consequence .newspaper {
    margin: 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    border: none;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    animation: storyItemPop 0.4s ease 0.6s backwards;
}

#screen-consequence .newspaper-banner {
    background: linear-gradient(90deg, #e63946, #d00000);
    padding: 10px 16px;
    font-size: 0.8em;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#screen-consequence .newspaper-banner::before {
    content: '⚡';
    animation: pulse 1s infinite;
}

#screen-consequence .newspaper-body {
    padding: 16px;
}

#screen-consequence .newspaper-source {
    color: rgba(255,255,255,0.6);
}

#screen-consequence .newspaper-headline {
    color: white;
    font-size: 1.1em;
    line-height: 1.4;
}

/* Victim Card als Instagram Profil Style */
#screen-consequence .victim-card {
    margin: 16px;
    background: rgba(255,255,255,0.97);
    border-radius: 24px;
    padding: 0;
    border: none;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    animation: storyItemPop 0.5s ease 0.7s backwards;
}

#screen-consequence .victim-card.positive,
#screen-consequence .victim-card.negative {
    background: rgba(255,255,255,0.97);
    border: none;
}

#screen-consequence .victim-header {
    background: linear-gradient(135deg, #f8fcfa 0%, #e2e8f0 100%);
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

#screen-consequence .victim-photo {
    width: 56px;
    height: 56px;
    border: 3px solid white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

#screen-consequence .victim-name {
    font-size: 1.05em;
    color: #3F5F63;
}

#screen-consequence .victim-role {
    color: #64748b;
    font-size: 0.85em;
}

/* Vorher/Nachher als Story Poll Style */
#screen-consequence .victim-change-dramatic {
    padding: 20px;
    gap: 12px;
    background: white;
}

#screen-consequence .victim-before-box,
#screen-consequence .victim-after-box {
    border-radius: 16px;
    padding: 16px;
    flex: 1;
}

#screen-consequence .victim-before-box {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 2px solid #e2e8f0;
}

#screen-consequence .victim-after-box {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2);
}

#screen-consequence .victim-card.positive .victim-after-box {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.2);
}

#screen-consequence .victim-box-emoji {
    font-size: 2.5em;
}

#screen-consequence .victim-change-arrow {
    font-size: 1.8em;
    color: #94a3b8;
}

#screen-consequence .victim-card.negative .victim-change-arrow {
    color: #ef4444;
}

#screen-consequence .victim-card.positive .victim-change-arrow {
    color: #22c55e;
}

/* Zitat als Instagram DM Style */
#screen-consequence .victim-message {
    padding: 0 20px 20px;
    background: white;
}

#screen-consequence .victim-message-bubble {
    background: linear-gradient(135deg, #f8fcfa 0%, #f1f5f9 100%);
    border-radius: 20px;
    border-left: none;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    position: relative;
}

#screen-consequence .victim-message-bubble::before {
    content: '"';
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 3em;
    color: rgba(63, 95, 99, 0.1);
    font-family: Georgia, serif;
    line-height: 1;
}

#screen-consequence .victim-card.negative .victim-message-bubble {
    border-left: none;
    background: linear-gradient(135deg, #fef2f2 0%, #fce7e7 100%);
}

#screen-consequence .victim-card.positive .victim-message-bubble {
    border-left: none;
    background: linear-gradient(135deg, #f0fdf4 0%, #e8fce8 100%);
}

#screen-consequence .victim-message-avatar {
    width: 40px;
    height: 40px;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#screen-consequence .victim-message-text {
    font-size: 1em;
    color: #334155;
    padding-left: 20px;
}

/* CTA Button im Story Style */
#screen-consequence .cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(0deg, rgba(12,62,100,0.95) 0%, transparent 100%);
    z-index: 10;
}

#screen-consequence .cta .btn-primary {
    background: white;
    color: #3F5F63;
    font-weight: 700;
    border-radius: 30px;
    padding: 16px 24px;
    font-size: 1em;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border: none;
}

#screen-consequence .cta .btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}

/* Impact Banner im Story Style */
#screen-consequence .impact-banner {
    margin: 0 16px 16px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: none;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    animation: storyItemPop 0.4s ease backwards;
}

#screen-consequence .impact-banner-icon {
    font-size: 2.2em;
}

#screen-consequence .impact-banner-title {
    font-weight: 700;
    color: #3F5F63;
    font-size: 1.05em;
}

#screen-consequence .impact-banner-subtitle {
    color: #64748b;
    font-size: 0.9em;
}
.cons-header { padding: 16px; font-weight: 600; border-bottom: 1px solid var(--border); }
.cons-body { padding: 16px; }
.timeline-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--light); opacity: 0; }
.timeline-item:last-child { border: none; }
.timeline-item.show { animation: tlShow 0.5s ease forwards; }
@keyframes tlShow { to{opacity:1} }
.timeline-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2em; flex-shrink: 0; }
.timeline-icon.good { background: #dcfce7; }
.timeline-icon.warn { background: #FDF6E3; }
.timeline-icon.bad { background: #FDDDD5; }
.timeline-content { flex: 1; min-width: 0; }
.timeline-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 12px; }
.timeline-action { font-weight: 600; font-size: 0.95em; }
.timeline-time { font-size: 0.8em; color: var(--gray); white-space: nowrap; }
.timeline-consequence { font-size: 0.85em; color: var(--gray); line-height: 1.4; }
.newspaper { 
    margin: 16px; 
    background: rgba(195, 220, 210, 0.68); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px; 
    overflow: hidden; 
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.1);
    border: 1.5px solid rgba(63, 95, 99, 0.30);
}
.newspaper-banner { background: linear-gradient(90deg, #D45A3D, #8B2C32); color: white; padding: 8px 16px; font-weight: 700; font-size: 0.85em; }
.newspaper-body { padding: 16px; }
.newspaper-source { font-size: 0.75em; color: var(--gray); text-transform: uppercase; margin-bottom: 6px; }
.newspaper-headline { font-size: 1.15em; font-weight: 700; }
.victim-card { margin: 16px; border-radius: 16px; padding: 24px; }
.victim-card.positive { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 2px solid #B8D8D0; }
.victim-card.negative { background: linear-gradient(135deg, #FEF3EF, #FDDDD5); border: 2px solid #FCC9BC; }
.victim-card.shake { animation: shake 0.6s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
.victim-header { display: flex !important; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,0.1); min-height: 80px; }
.victim-photo { width: 64px; height: 64px; min-width: 64px; min-height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.8); box-shadow: 0 4px 12px rgba(0,0,0,0.15); background: #B8D8D0; }
.victim-info { text-align: left; }
.victim-name { font-weight: 700; font-size: 1.1em; }
.victim-role { font-size: 0.85em; color: var(--gray); }

/* Vorher/Nachher - Dramatisch */
.victim-change-dramatic { display: flex; align-items: stretch; gap: 8px; margin-bottom: 20px; }
.victim-before-box, .victim-after-box { flex: 1; padding: 16px 12px; border-radius: 12px; text-align: center; }
.victim-before-box { background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.1); }
.victim-after-box { background: white; border: 2px solid #8B2C32; box-shadow: 0 4px 16px rgba(239,68,68,0.25); }
.victim-card.positive .victim-after-box { border-color: #4A7A7E; box-shadow: 0 4px 16px rgba(34,197,94,0.25); }
.victim-card.negative .victim-after-box { animation: pulseRed 2s infinite; }
@keyframes pulseRed { 0%, 100% { box-shadow: 0 4px 16px rgba(239,68,68,0.25); } 50% { box-shadow: 0 4px 24px rgba(239,68,68,0.5); } }
.victim-box-label { font-size: 0.65em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray); margin-bottom: 8px; }
.victim-after-box .victim-box-label { color: #C04A35; }
.victim-card.positive .victim-after-box .victim-box-label { color: #15803d; }
.victim-box-emoji { font-size: 2.2em; margin-bottom: 8px; }
.victim-after-box .victim-box-emoji { font-size: 2.8em; }
.victim-box-text { font-size: 0.85em; color: var(--gray); line-height: 1.4; }
.victim-after-box .victim-box-text { font-weight: 600; color: #C04A35; }
.victim-card.positive .victim-after-box .victim-box-text { color: #15803d; }
.victim-change-arrow { display: flex; align-items: center; font-size: 1.5em; color: var(--gray); padding: 0 4px; }
.victim-card.negative .victim-change-arrow { color: #8B2C32; }
.victim-card.positive .victim-change-arrow { color: #4A7A7E; }

/* Zitat als Chat-Nachricht */
.victim-message { margin-top: 8px; }
.victim-message-bubble { display: flex; gap: 12px; background: white; border-radius: 16px; padding: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-left: 4px solid var(--mm-primary); animation: messageSlide 0.5s ease 0.3s both; }
@keyframes messageSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.victim-card.negative .victim-message-bubble { border-left-color: #8B2C32; }
.victim-card.positive .victim-message-bubble { border-left-color: #4A7A7E; }
.victim-message-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.victim-message-content { flex: 1; }
.victim-message-name { font-weight: 600; font-size: 0.9em; margin-bottom: 4px; }
.victim-message-text { font-size: 1.05em; line-height: 1.5; color: #1f2937; font-style: italic; }
.victim-message-time { font-size: 0.75em; color: var(--gray); margin-top: 8px; }

/* Empathie-Reflexion */
.empathy-section {
    margin: 16px;
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    border: 2px solid #B8D8D0;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}
.empathy-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.empathy-icon {
    font-size: 1.8em;
}
.empathy-title {
    font-weight: 700;
    font-size: 1.1em;
    color: #9B7BB8;
}
.empathy-question {
    font-size: 1em;
    color: #5b21b6;
    margin-bottom: 16px;
    line-height: 1.5;
}
.empathy-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.empathy-btn {
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid rgba(192, 132, 252, 0.5);
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.2s;
}
.empathy-btn:hover {
    background: rgba(237, 233, 254, 0.8);
    transform: scale(1.05);
}
.empathy-btn.selected {
    background: #9B7BB8;
    color: white;
    border-color: #9B7BB8;
}
.empathy-response {
    margin-top: 16px;
    padding: 16px;
    background: rgba(230, 238, 238, 0.66);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    animation: fadeIn 0.3s ease;
}
.empathy-response-text {
    color: #5b21b6;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Dark Mode - Empathy */
.app.dark .empathy-section {
    background: linear-gradient(135deg, #2e1065, #4c1d95);
    border-color: #3A8A80;
}
.app.dark .empathy-title { color: #4A8A85; }
.app.dark .empathy-question { color: #E8F5F3; }
.app.dark .empathy-btn {
    background: rgba(21, 32, 37, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #E8E8E8;
    border-color: #3A8A80;
}
.app.dark .empathy-btn:hover { background: rgba(21, 32, 37, 0.9); }
.app.dark .empathy-btn.selected { background: #9B7BB8; color: white; }
.app.dark .empathy-response { 
    background: rgba(21, 32, 37, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(90, 154, 146, 0.12);
}
.app.dark .empathy-response-text { color: #4A8A85; }

/* TRICK REVEAL - Vereinfachter Screen */
.trick-reveal { 
    padding: var(--space-lg);
    background: var(--rc-background);
}
.trick-reveal-header { 
    text-align: center; 
    margin-bottom: var(--space-xl);
}
.trick-reveal-icon { 
    font-size: 5em; 
    margin-bottom: var(--space-md);
    animation: bounce 0.6s ease;
    filter: drop-shadow(0 0 20px rgba(63, 95, 99, 0.3));
}
.trick-reveal-label { 
    font-size: var(--font-size-sm); 
    color: var(--rc-text-secondary); 
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}
.trick-reveal-title { 
    font-size: var(--font-size-xl); 
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.trick-reveal-explanation { 
    background: var(--rc-card); 
    border-radius: var(--radius-xl); 
    padding: var(--space-lg); 
    margin-bottom: var(--space-lg); 
    font-size: var(--font-size-base); 
    line-height: 1.7; 
    color: var(--rc-text);
    border-left: 4px solid var(--rc-primary);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.trick-reveal-explanation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.03) 0%, transparent 100%);
    pointer-events: none;
}

.trick-reveal-question { 
    background: 
        radial-gradient(ellipse at 30% 30%, rgba(63, 95, 99, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, #f0f8f5 0%, #e0f2fe 100%); 
    border-radius: var(--radius-xl); 
    padding: var(--space-xl); 
    text-align: center;
    margin-bottom: var(--space-lg);
    border: 1.5px solid rgba(63, 95, 99, 0.32);
    box-shadow: var(--shadow-lg);
}
.trick-reveal-question-text { 
    font-size: var(--font-size-lg); 
    font-weight: 700; 
    margin-bottom: var(--space-md); 
    color: var(--rc-text);
}
.trick-reveal-buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
.trick-btn { 
    padding: var(--space-md) var(--space-xl); 
    border-radius: var(--radius-full); 
    border: none; 
    font-size: var(--font-size-base); 
    font-weight: 700; 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.trick-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}
.trick-btn:hover::before {
    left: 100%;
}
.trick-btn-yes { 
    background: var(--gradient-primary); 
    color: white;
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.3);
}
.trick-btn-yes:hover { 
    transform: translateY(-3px) scale(1.05); 
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.4);
}
.trick-btn-yes.selected { 
    background: var(--rc-success); 
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.4); 
}

/* +1 Floating Animation */
/* CALM DESIGN: Dezente +1 Animation */
.plus-one-float {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    font-weight: 600;
    color: #3F5F63;
    pointer-events: none;
    z-index: 1000;
    animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -100%); }
}

.trick-btn-no { 
    background: white; 
    color: var(--mm-primary); 
    border: 2px solid var(--mm-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.trick-btn-no:hover { background: #f0f8f5; }
.trick-btn-no.selected { background: #FDF6E3; border-color: #F4A261; color: #8B6B35; }

.trick-reveal-more {
    background: linear-gradient(135deg, #f0f8f5, #d1fae5);
    border: 1px solid #34d399;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease;
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* Neue strukturierte Erklär-mir-mehr Sektionen */
.trick-more-section {
    background: white;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid #10b981;
}
.trick-more-section:last-child {
    margin-bottom: 0;
}
.trick-more-section:nth-child(2) {
    border-left-color: #f59e0b;
}
.trick-more-section:nth-child(3) {
    border-left-color: #3b82f6;
}
.trick-more-title { 
    font-weight: 700; 
    color: #065f46; 
    margin-bottom: 10px;
    font-size: 1em;
}
.trick-more-text { 
    color: #374151; 
    line-height: 1.7;
    font-size: 0.95em;
}

/* Vergleich mit anderen */
.trick-compare {
    background: linear-gradient(135deg, #f0f8f5, #e8f2ed);
    border: 1px solid #4A7A7E;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideDown 0.3s ease;
}
.trick-compare-icon { font-size: 1.5em; }
.trick-compare-text { font-size: 0.95em; color: #2D4548; font-weight: 500; }

.trick-reveal-progress { 
    background: white; 
    border-radius: 12px; 
    padding: 16px; 
}
.trick-progress-bar { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.trick-progress-dot { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    background: var(--mm-gray-light); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1em; 
}
.trick-progress-dot.done { background: var(--mm-primary); color: white; }
.trick-progress-dot.new { background: #4A7A7E; color: white; animation: pulse 1s ease; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.trick-progress-text { text-align: center; color: var(--gray); font-size: 0.85em; }

/* Dark Mode - Trick Reveal */
.app.dark .trick-reveal { background: linear-gradient(180deg, #0A1215 0%, #152025 100%); }
.app.dark .trick-reveal-label { color: rgba(195, 220, 210, 0.68); }
.app.dark .trick-reveal-title { color: #4A9A8A; -webkit-text-fill-color: #4A9A8A; }
.app.dark .trick-reveal-explanation { background: rgba(90, 154, 146, 0.1); color: #E8E8E8; border-left-color: #4A8A85; border: 1px solid rgba(90, 154, 146, 0.15); }
.app.dark .trick-reveal-question { background: linear-gradient(135deg, rgba(90, 154, 146, 0.15) 0%, rgba(42, 157, 143, 0.1) 100%); border-color: rgba(90, 154, 146, 0.2); }
.app.dark .trick-reveal-question-text { color: #E8E8E8; }
.app.dark .trick-btn-no { background: rgba(21, 32, 37, 0.9); color: #4A9A8A; border-color: #4A8A85; }
.app.dark .trick-btn-no:hover { background: rgba(90, 154, 146, 0.15); }
.app.dark .trick-reveal-more { background: linear-gradient(135deg, rgba(42, 157, 143, 0.15), rgba(90, 154, 146, 0.1)); border-color: #4A8A85; }
.app.dark .trick-more-title { color: #4A9A8A; }
.app.dark .trick-more-text { color: #7ABAB2; }
.app.dark .trick-compare { background: linear-gradient(135deg, rgba(90, 154, 146, 0.15), rgba(42, 157, 143, 0.1)); border-color: #4A8A85; }
.app.dark .trick-compare-text { color: #7ABAB2; }
.app.dark .trick-reveal-progress { background: rgba(90, 154, 146, 0.08); border: 1px solid rgba(90, 154, 146, 0.12); }
.app.dark .trick-progress-dot { background: rgba(90, 154, 146, 0.15); color: #A0AEB5; }
.app.dark .trick-progress-dot.done { background: #3A8A80; color: white; }
.app.dark .trick-progress-dot.new { background: #4A8A85; color: white; }
.app.dark .trick-progress-text { color: rgba(232, 242, 237, 0.65); }

/* TIPS PANEL - können wir später entfernen */
.tips-panel { 
    position: fixed; 
    top: 0; 
    right: -100%; 
    width: 100%; 
    max-width: 400px; 
    height: 100vh; 
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 200; 
    transition: right 0.3s ease;
    box-shadow: -8px 0 40px rgba(63, 95, 99, 0.15);
}
.tips-panel.open { right: 0; }
.tips-panel-header { background: var(--dark); color: white; padding: 20px; display: flex; align-items: center; justify-content: space-between; }
.tips-panel-title { font-weight: 600; font-size: 1.1em; display: flex; align-items: center; gap: 8px; }
.tips-panel-close { background: rgba(255,255,255,0.1); border: none; width: 36px; height: 36px; border-radius: 50%; color: white; font-size: 1.2em; cursor: pointer; transition: all 0.2s; }
.tips-panel-close:hover { background: rgba(255,255,255,0.2); }
.tips-panel-body { padding: 20px; height: calc(100vh - 76px); overflow-y: auto; background: var(--light); }
.tips-panel-empty { text-align: center; padding: 60px 20px; }
.tips-panel-empty-icon { font-size: 3em; margin-bottom: 16px; }
.tips-panel-empty-title { font-weight: 600; font-size: 1em; margin-bottom: 8px; color: var(--dark); }
.tips-panel-empty-text { color: var(--gray); font-size: 0.9em; }
.tip-item { 
    background: rgba(230, 238, 238, 0.66); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px; 
    padding: 16px; 
    margin-bottom: 12px;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    box-shadow: 0 4px 16px rgba(63, 95, 99, 0.08);
}
.tip-item-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tip-item-num { width: 28px; height: 28px; background: var(--blue); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85em; }
.tip-item-icon { font-size: 1.3em; }
.tip-item-title { font-weight: 600; font-size: 0.95em; color: var(--dark); }
.tip-item-text { font-size: 0.9em; color: var(--gray); line-height: 1.6; background: var(--light); padding: 12px; border-radius: 8px; margin-top: 8px; }
.tips-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 199; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.tips-overlay.open { opacity: 1; pointer-events: auto; }

/* QUIZ */
.quiz-card { 
    margin: var(--space-md); 
    background: var(--rc-card); 
    border-radius: var(--radius-xl); 
    overflow: hidden; 
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--rc-border-light);
}
.quiz-header { 
    background: var(--gradient-premium); 
    padding: var(--space-xl); 
    text-align: center; 
    color: white;
    position: relative;
    overflow: hidden;
}
.quiz-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 60%);
}
.quiz-icon { 
    font-size: 3em; 
    margin-bottom: var(--space-sm);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
}
.quiz-title { 
    font-size: var(--font-size-xl); 
    font-weight: 800; 
    margin-bottom: var(--space-xs);
    position: relative;
    z-index: 1;
}
.quiz-subtitle { 
    font-size: var(--font-size-base); 
    opacity: 0.9; 
    font-weight: 400;
    position: relative;
    z-index: 1;
}
.quiz-body { padding: var(--space-md); }
.quiz-option { 
    background: var(--rc-background); 
    border: 2px solid transparent; 
    border-radius: var(--radius-md); 
    padding: var(--space-md); 
    margin-bottom: var(--space-sm); 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: var(--space-md); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.quiz-option:hover { 
    background: var(--rc-primary-light);
    border-color: var(--rc-primary);
    transform: translateX(8px);
}
.quiz-option-letter { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: var(--rc-card); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    color: var(--rc-text-secondary); 
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}
.quiz-option:hover .quiz-option-letter {
    background: var(--rc-primary);
    color: white;
    box-shadow: 0 0 15px rgba(63, 95, 99, 0.3);
}
.quiz-option.correct { 
    background: var(--rc-success-light); 
    border-color: var(--rc-success);
    animation: bounce 0.5s ease;
}
.quiz-option.correct .quiz-option-letter { 
    background: var(--rc-success); 
    color: white;
    box-shadow: 0 0 15px rgba(63, 95, 99, 0.4);
}
.quiz-option.wrong { 
    background: rgba(231, 111, 81, 0.1); 
    border-color: var(--rc-error);
    animation: shake 0.5s ease;
}
.quiz-option.wrong .quiz-option-letter { 
    background: var(--rc-error); 
    color: white;
}
.quiz-option.disabled { pointer-events: none; }
.quiz-result { 
    padding: var(--space-md); 
    text-align: center; 
    border-radius: var(--radius-md); 
    margin-top: var(--space-md); 
    font-weight: 700;
    font-size: var(--font-size-lg);
}
.quiz-result.correct { 
    background: var(--rc-success-light); 
    color: #166534;
    box-shadow: 0 0 20px rgba(63, 95, 99, 0.2);
}
.quiz-result.wrong { 
    background: rgba(231, 111, 81, 0.1); 
    color: #D45A3D;
}

/* RESULT */
.result-hero { 
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(63, 95, 99, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(63, 95, 99, 0.3) 0%, transparent 50%),
        var(--dark); 
    padding: 60px 24px; 
    text-align: center; 
    color: white;
    position: relative;
    overflow: hidden;
}
.result-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 70%);
    animation: aurora 12s ease-in-out infinite;
}
.result-icon { 
    font-size: 5em; 
    margin-bottom: var(--space-lg);
    animation: bounce 0.6s ease;
    filter: drop-shadow(0 0 30px rgba(63, 95, 99, 0.5));
}
.result-title { 
    font-size: var(--font-size-2xl); 
    font-weight: 800; 
    margin-bottom: var(--space-sm); 
    letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
    color: white !important;
}
.result-subtitle { 
    opacity: 0.8; 
    font-weight: 400; 
    font-size: var(--font-size-lg);
    color: rgba(232, 242, 237, 0.65) !important;
}
.result-content { padding: var(--space-lg); background: var(--rc-background); }
/* Result Summary - Das hast du gemacht */
.result-summary {
    background: 
        radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 50%),
        linear-gradient(135deg, var(--rc-primary) 0%, #4A7A7E 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-bottom: var(--space-md);
    color: white;
    box-shadow: var(--shadow-xl), 0 0 40px rgba(63, 95, 99, 0.2);
    position: relative;
    overflow: hidden;
}
.result-summary::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: float 6s ease-in-out infinite;
}
.result-summary-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    text-align: center;
    position: relative;
    z-index: 1;
}
.result-summary-grid {
    display: flex;
    justify-content: space-around;
    gap: var(--space-md);
    position: relative;
    z-index: 1;
}
.result-summary-item {
    text-align: center;
    transition: transform 0.3s ease;
}
.result-summary-item:hover {
    transform: scale(1.1);
}
.result-summary-value {
    font-size: 3em;
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-xs);
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.result-summary-label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.result-score { 
    background: var(--rc-card); 
    border-radius: var(--radius-xl); 
    padding: var(--space-lg); 
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--rc-border-light);
    transition: transform 0.3s ease;
}
.result-score:hover {
    transform: translateY(-4px);
}
.result-score-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
.result-score-title { font-weight: 700; font-size: var(--font-size-lg); }
.result-score-value { 
    font-size: var(--font-size-2xl); 
    font-weight: 800; 
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.result-score-bar { 
    height: 12px; 
    background: var(--rc-border-light); 
    border-radius: var(--radius-full); 
    overflow: hidden; 
    margin-bottom: var(--space-md);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.result-score-fill { 
    height: 100%; 
    background: var(--gradient-primary); 
    border-radius: var(--radius-full); 
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.result-score-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
    border-radius: var(--radius-full);
}
.result-score-compare { font-size: var(--font-size-sm); color: var(--rc-text-secondary); }
.personality { 
    background: linear-gradient(135deg, var(--rc-primary-light) 0%, rgba(63, 95, 99, 0.1) 100%); 
    border-radius: var(--radius-xl); 
    padding: var(--space-xl); 
    text-align: center; 
    margin-bottom: var(--space-md);
    border: 1px solid var(--rc-border-light);
}
.personality-label { font-size: var(--font-size-xs); color: var(--rc-text-secondary); text-transform: uppercase; margin-bottom: var(--space-sm); letter-spacing: 2px; font-weight: 600; }
.personality-type { 
    font-size: var(--font-size-xl); 
    font-weight: 800; 
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-sm); 
}
.personality-desc { color: var(--rc-text-secondary); font-size: var(--font-size-base); }
.transfer-task { background: var(--rc-card); border-radius: var(--radius-xl); padding: var(--space-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-md); }
.transfer-title { font-weight: 700; font-size: var(--font-size-lg); color: var(--rc-text); margin-bottom: var(--space-md); text-align: center; }
.transfer-text { font-size: var(--font-size-base); color: var(--rc-text-secondary); margin-bottom: var(--space-md); text-align: center; line-height: 1.7; }
.transfer-checklist { background: var(--rc-background); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); }
.transfer-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--rc-border-light); font-size: var(--font-size-base); color: var(--rc-text); }
.transfer-item:last-child { border-bottom: none; }
.transfer-cta { text-align: center; font-weight: 600; color: var(--rc-primary); font-size: var(--font-size-base); }
.badges { background: var(--rc-card); border-radius: var(--radius-xl); padding: var(--space-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-md); }

/* Achievements */
.achievements-section { 
    background: linear-gradient(135deg, #FDF6E3 0%, #F5E4B8 100%); 
    border-radius: var(--radius-xl); 
    padding: var(--space-lg); 
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-lg);
}
.achievements-title { font-weight: 800; font-size: var(--font-size-lg); margin-bottom: var(--space-md); color: #8B6B35; }
.achievements-grid { display: flex; flex-direction: column; gap: var(--space-md); }
.achievement { 
    display: flex; 
    align-items: center; 
    gap: var(--space-md); 
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md); 
    padding: var(--space-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.achievement:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}
.achievement-icon { font-size: 2em; }
.achievement-name { font-weight: 700; font-size: var(--font-size-base); color: var(--rc-text); }
.achievement-desc { font-size: var(--font-size-sm); color: var(--rc-text-secondary); }

/* Was wäre wenn */
.whatif-teaser { 
    background: linear-gradient(135deg, #e8f2ed 0%, #e8f2ed 100%); 
    border-radius: var(--radius-xl); 
    padding: var(--space-lg); 
    margin-bottom: var(--space-md); 
    text-align: center;
    box-shadow: var(--shadow-md);
}
.whatif-title { font-weight: 800; font-size: var(--font-size-xl); color: #5b21b6; margin-bottom: var(--space-sm); }
.whatif-text { font-size: var(--font-size-base); color: #6b21a8; margin-bottom: var(--space-md); }
.whatif-teaser .btn { background: linear-gradient(135deg, #9B7BB8, #8B2C32); border: none; box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3); }
.badges-title { font-weight: 700; margin-bottom: var(--space-lg); text-align: center; font-size: var(--font-size-lg); }
.badges-grid { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
.badge { 
    background: var(--rc-background); 
    border: 2px solid var(--rc-border-light); 
    border-radius: var(--radius-lg); 
    padding: var(--space-md) var(--space-sm); 
    text-align: center; 
    min-width: 90px; 
    position: relative; 
    overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.badge:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-lg);
}
.badge.earned { 
    background: var(--rc-card); 
    border-color: var(--rc-primary);
    box-shadow: 0 0 20px rgba(63, 95, 99, 0.15);
}
.badge.locked { opacity: 0.4; }
.badge-icon { 
    width: 50px; 
    height: 50px; 
    display: block; 
    margin: 0 auto var(--space-xs); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.badge-name { font-size: var(--font-size-xs); font-weight: 700; margin-top: var(--space-sm); color: var(--rc-text); }
.badge.locked .badge-name { color: var(--rc-text-tertiary); }
.badge-check { 
    position: absolute; 
    top: -4px; 
    right: -4px; 
    width: 24px; 
    height: 24px; 
    background: var(--rc-success); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    font-size: var(--font-size-xs);
    box-shadow: 0 2px 8px rgba(63, 95, 99, 0.4);
}
.certificate { 
    background: linear-gradient(135deg, var(--rc-card) 0%, rgba(63, 95, 99, 0.05) 100%); 
    border-radius: var(--radius-xl); 
    padding: var(--space-xl); 
    text-align: center; 
    margin-bottom: var(--space-md);
    border: 2px solid var(--rc-border-light);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.certificate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}
.certificate-icon { font-size: 3em; margin-bottom: var(--space-sm); }
.certificate-title { font-weight: 700; font-size: var(--font-size-lg); color: var(--rc-text); margin-bottom: var(--space-xs); }
.certificate-text { font-size: var(--font-size-sm); color: var(--rc-text-secondary); margin-bottom: var(--space-md); }
.certificate-name { 
    font-size: var(--font-size-xl); 
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.certificate-date { font-size: var(--font-size-sm); color: var(--rc-text-secondary); margin-top: var(--space-xs); }
.my-tips { background: var(--rc-card); border-radius: var(--radius-xl); padding: var(--space-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-md); }
.my-tips-title { font-weight: 700; color: var(--rc-text); margin-bottom: var(--space-md); text-align: center; font-size: var(--font-size-lg); }
.my-tips-grid { display: grid; gap: 10px; }
.my-tips-item { background: var(--light); border-radius: 10px; padding: 12px; display: flex; align-items: center; gap: 10px; font-size: 0.85em; }
.my-tips-item-icon { font-size: 1.3em; }
.share { background: var(--dark); border-radius: 12px; padding: 20px; text-align: center; color: white; }
.share-title { font-weight: 500; margin-bottom: 12px; }
.share-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.share-btn { padding: 12px 20px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; font-size: 0.9em; transition: opacity 0.2s; }
.share-btn:hover { opacity: 0.9; }
.share-btn.wa { background: #25d366; color: white; }
.share-btn.copy { 
    background: rgba(195, 220, 210, 0.68); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--dark); 
    border: 1.5px solid rgba(63, 95, 99, 0.30);
}

/* Certificate Section */
.certificate-section {
    background: linear-gradient(135deg, #FDF6E3, #F5E4B8);
    border: 2px solid #F4A261;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-top: 16px;
}
.certificate-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #8B6B35;
    margin-bottom: 8px;
}
.certificate-desc {
    font-size: 0.9em;
    color: #a16207;
    margin-bottom: 16px;
}
.btn-certificate {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 25px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(244, 162, 97, 0.4);
    transition: all 0.2s;
}
.btn-certificate:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(244, 162, 97, 0.5);
}
.app.dark .certificate-section {
    background: linear-gradient(135deg, #422006, #78350f);
    border-color: #d97706;
}
.app.dark .certificate-title { color: #F5E4B8; }
.app.dark .certificate-desc { color: #fcd34d; }

/* SUMMARY */
.summary { padding: 24px; background: var(--light); }
.summary-header { text-align: center; margin-bottom: 24px; }
.summary-icon { font-size: 2.5em; margin-bottom: 8px; }
.summary-title { font-size: 1.4em; font-weight: 800; }
.summary-item { 
    background: rgba(230, 238, 238, 0.66); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    border-radius: 16px; 
    padding: 16px; 
    margin-bottom: 12px; 
    display: flex; 
    gap: 14px; 
    align-items: flex-start; 
    box-shadow: 0 4px 20px rgba(63, 95, 99, 0.08), inset 0 1px 0 rgba(232, 242, 237, 0.65);
}
.summary-item-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--blue), #B8D8D0); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
.summary-item-title { font-weight: 700; font-size: 0.95em; margin-bottom: 4px; }
.summary-item-desc { font-size: 0.85em; color: var(--gray); line-height: 1.4; }

/* EFFECTS */
.notif { 
    position: fixed; 
    top: 80px; 
    left: 50%; 
    transform: translateX(-50%) translateY(-120px); 
    background: rgba(232, 242, 237, 0.65); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px; 
    padding: 14px 20px; 
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.15), 0 4px 12px rgba(0,0,0,0.08); 
    border: 1.5px solid rgba(63, 95, 99, 0.32);
    z-index: 1000; 
    transition: transform 0.5s cubic-bezier(0.68,-0.55,0.27,1.55); 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.notif.show { transform: translateX(-50%) translateY(0); }
.app.dark .notif { 
    background: rgba(21, 32, 37, 0.9); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.15);
    color: #E8E8E8; 
    box-shadow: 0 8px 32px rgba(0,0,0,0.4); 
}
.confetti { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.confetti-piece { position: absolute; width: 8px; height: 8px; border-radius: 50%; top: -20px; animation: fall 3s linear forwards; }
@keyframes fall { to{top:110vh;transform:rotate(720deg)} }
.heart { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); font-size: 6em; pointer-events: none; z-index: 999; }
.heart.show { animation: heartBurst 1s forwards; }
@keyframes heartBurst { 0%{transform:translate(-50%,-50%) scale(0);opacity:1} 40%{transform:translate(-50%,-50%) scale(1.4);opacity:1} 100%{transform:translate(-50%,-50%) scale(1.2);opacity:0} }
/* FOOTER */
.app-footer { padding: 16px; text-align: center; border-top: 1px solid var(--border); background: var(--light); }
.footer-link { background: none; border: none; color: var(--gray); font-size: 0.85em; cursor: pointer; padding: 4px 8px; }
.footer-link:hover { color: var(--blue); text-decoration: underline; }
.footer-sep { color: var(--border); margin: 0 4px; }
.app.dark .app-footer { 
    background: rgba(90, 154, 146, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(90, 154, 146, 0.12);
}
.app.dark .footer-link { color: rgba(232, 242, 237, 0.65); }
.app.dark .footer-link:hover { color: #4A8A85; }
.app.dark .footer-sep { color: rgba(232, 242, 237, 0.3); }

/* DONATE SECTION */
.donate-section {
    background: linear-gradient(135deg, #fff5f5 0%, #FEF3EF 100%);
    border: 2px solid #FCC9BC;
    border-radius: 16px;
    padding: 24px;
    margin: 24px 0;
    text-align: center;
}
.donate-icon { font-size: 2.5em; margin-bottom: 8px; }
.donate-title { font-size: 1.1em; font-weight: 700; color: #991b1b; margin: 0 0 8px 0; }
.donate-text { font-size: 0.9em; color: #7f1d1d; line-height: 1.5; margin: 0 0 16px 0; }
.donate-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-donate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 0.95em;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-donate-primary {
    background: #D45A3D;
    color: white;
}
.btn-donate-primary:hover { background: #C04A35; transform: translateY(-2px); }
.btn-donate-secondary {
    background: rgba(195, 220, 210, 0.68);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #D45A3D;
    border: 2px solid #D45A3D;
}
.btn-donate-secondary:hover { background: #FEF3EF; transform: translateY(-2px); }

.app.dark .donate-section {
    background: linear-gradient(135deg, rgba(21, 32, 37, 0.9) 0%, #2c1a1a 100%);
    border-color: #7f1d1d;
}
.app.dark .donate-title { color: #F9A999; }
.app.dark .donate-text { color: #FCC9BC; }
.app.dark .btn-donate-primary { background: #C04A35; }
.app.dark .btn-donate-primary:hover { background: #991b1b; }
.app.dark .btn-donate-secondary { background: rgba(90, 154, 146, 0.1); border-color: #D45A3D; color: #F9A999; }
.app.dark .btn-donate-secondary:hover { background: #3c2a2a; }

/* LEGAL MODALS */
.modal-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(0,0,0,0.6); 
    z-index: 99999;  /* Sehr hoch - über allen anderen Popups */
    display: none; 
    align-items: center; 
    justify-content: center; 
    padding: 20px;
    /* Fix für backdrop-filter Bug */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.modal-overlay.show { display: flex; }
.legal-modal { 
    background: rgba(232, 242, 237, 0.65); 
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 20px; 
    max-width: 500px; 
    width: 100%; 
    max-height: 80vh; 
    overflow: hidden;
    border: 1.5px solid rgba(63, 95, 99, 0.32);
    box-shadow: 0 20px 60px rgba(63, 95, 99, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
}
.legal-modal .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.legal-modal .modal-title { font-size: 1.1em; font-weight: 700; }
.legal-modal .modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--light); cursor: pointer; font-size: 1em; }
.legal-modal .modal-body { padding: 20px; overflow-y: auto; max-height: calc(80vh - 60px); }
.legal-modal h4 { font-size: 0.95em; font-weight: 700; margin: 16px 0 8px 0; color: var(--dark); }
.legal-modal h4:first-child { margin-top: 0; }
.legal-modal p { font-size: 0.9em; color: var(--gray); line-height: 1.6; margin-bottom: 12px; }
.legal-modal a { color: var(--blue); }
.legal-warning { background: #FDF6E3; border: 1px solid #F4A261; border-radius: 8px; padding: 12px; margin: 16px 0; }
.legal-warning strong { color: #8B6B35; }
.legal-highlight { background: #dcfce7; border: 1px solid #4A7A7E; border-radius: 8px; padding: 12px; margin: 16px 0; }
.legal-highlight p { color: #166534; margin: 0; }
.legal-date { font-size: 0.8em; color: var(--gray); font-style: italic; margin-top: 20px; }

.app.dark .legal-modal { 
    background: #0f1e1c !important; 
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(90, 154, 146, 0.25) !important;
}
.app.dark .legal-modal .modal-header { border-color: rgba(90, 154, 146, 0.15); background: #0f1e1c !important; }
.app.dark .legal-modal .modal-title { color: #E8E8E8 !important; }
.app.dark .legal-modal .modal-close { background: rgba(90, 154, 146, 0.1); color: #E8E8E8; }
.app.dark .legal-modal .modal-body { background: #0f1e1c !important; }
.app.dark .legal-modal h4 { color: #E8E8E8 !important; }
.app.dark .legal-modal p { color: #A0AEB5 !important; }
.app.dark .legal-modal a { color: #4A8A85; }
.app.dark .legal-warning { background: #422006; border-color: #8B6B35; }
.app.dark .legal-warning strong { color: #E9C46A; }
.app.dark .legal-warning span, 
.app.dark #infoNotText { color: #E8D5B5 !important; }

/* Dark Mode für Modals außerhalb von .app (body.dark-mode) */
body.dark-mode .legal-modal { 
    background: #0f1e1c !important; 
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(90, 154, 146, 0.25) !important;
}
body.dark-mode .legal-modal .modal-header { border-color: rgba(90, 154, 146, 0.15); background: #0f1e1c !important; }
body.dark-mode .legal-modal .modal-title { color: #E8E8E8 !important; }
body.dark-mode .legal-modal .modal-close { background: rgba(90, 154, 146, 0.1); color: #E8E8E8; }
body.dark-mode .legal-modal .modal-body { background: #0f1e1c !important; }
body.dark-mode .legal-modal h4 { color: #E8E8E8 !important; }
body.dark-mode .legal-modal p { color: #A0AEB5 !important; }
body.dark-mode .legal-modal a { color: #4A8A85; }
body.dark-mode .legal-warning { background: #422006 !important; border-color: #8B6B35 !important; }
body.dark-mode .legal-warning strong { color: #E9C46A !important; }
body.dark-mode .legal-warning span,
body.dark-mode #infoNotText { color: #E8D5B5 !important; }

/* Modal Overlay Dark Mode */
body.dark-mode .modal-overlay { background: rgba(0, 0, 0, 0.8); }
.app.dark .legal-highlight { background: #14532d; border-color: #4A8A85; }
.app.dark .legal-highlight p { color: #7ABAB2; }

/* CONFIRM MODAL - Light Mode Glassmorphism */
.confirm-modal { 
    background: rgba(240, 248, 255, 0.97); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px; 
    max-width: 420px; 
    width: 90%; 
    padding: 0; 
    text-align: center; 
    animation: modalPop 0.3s ease; 
    overflow: hidden;
    border: 2px solid rgba(63, 95, 99, 0.15);
    box-shadow: 
        0 25px 80px rgba(63, 95, 99, 0.25),
        0 10px 30px rgba(0, 0, 0, 0.12);
}
@keyframes modalPop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }

/* Module Selection Modal - Glassmorphism */
.module-modal { 
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: var(--radius-xl); 
    max-width: 450px; 
    width: 95%; 
    padding: 0; 
    text-align: center; 
    animation: modalPop 0.3s ease; 
    overflow: hidden;
    border: 1.5px solid rgba(63, 95, 99, 0.32);
    box-shadow: 
        0 20px 60px rgba(63, 95, 99, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.08);
}
.module-header { 
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%); 
    padding: var(--space-lg); 
    color: white; 
}
.module-header-icon { font-size: 2.5em; margin-bottom: var(--space-sm); }
.module-header-title { font-size: var(--font-size-xl); font-weight: 700; }
.module-header-subtitle { font-size: var(--font-size-base); opacity: 0.9; margin-top: var(--space-sm); line-height: 1.4; }
.module-body { padding: var(--space-lg); }

.module-option { 
    display: flex; 
    align-items: center; 
    gap: var(--space-md); 
    padding: var(--space-md); 
    border-radius: var(--radius-lg); 
    border: 1.5px solid rgba(63, 95, 99, 0.30); 
    margin-bottom: var(--space-md); 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    text-align: left; 
    background: rgba(232, 242, 237, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    box-shadow: 0 2px 8px rgba(63, 95, 99, 0.08);
}
.module-option::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.3s ease, width 0.3s ease;
}
.module-option::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,122,255,0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.module-option:hover { 
    border-color: rgba(63, 95, 99, 0.5); 
    background: rgba(195, 220, 210, 0.68); 
    transform: translateY(-4px) scale(1.02); 
    box-shadow: 0 8px 24px rgba(63, 95, 99, 0.15), 0 0 20px rgba(63, 95, 99, 0.1);
}
.module-option:hover::before {
    background: var(--gradient-primary);
    width: 6px;
}
.module-option:hover::after {
    opacity: 1;
}
.module-option.recommended { 
    border-color: rgba(63, 95, 99, 0.5); 
    background: rgba(63, 95, 99, 0.1);
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.15);
}
.module-option.recommended::before {
    background: var(--gradient-primary);
    width: 6px;
}
.module-option.completed {
    border-color: rgba(63, 95, 99, 0.5);
    background: rgba(63, 95, 99, 0.08);
}
.module-option.completed::before {
    background: var(--rc-success);
    width: 6px;
}
.module-option.disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
}
.module-option.disabled:hover { 
    transform: none; 
    box-shadow: none; 
    border-color: var(--rc-border-light); 
    background: var(--rc-card);
}
.module-option.disabled::before {
    background: transparent;
    width: 4px;
}
.module-option.disabled::after {
    opacity: 0;
}

.module-option-icon { 
    font-size: 2em; 
    width: 50px; 
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rc-background);
    border-radius: var(--radius-md);
}
.module-option-content { flex: 1; }
.module-option-title { 
    font-size: var(--font-size-lg); 
    font-weight: 600; 
    color: var(--rc-text); 
    display: flex; 
    align-items: center; 
    gap: var(--space-sm);
}
.module-option-badge { 
    font-size: var(--font-size-xs); 
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%); 
    color: white; 
    padding: 3px 8px; 
    border-radius: var(--radius-full); 
    font-weight: 600;
}
.module-option-badge.completed {
    background: var(--rc-success);
}
.module-option-desc { 
    font-size: var(--font-size-sm); 
    color: var(--rc-text-secondary); 
    margin-top: var(--space-xs);
}
.module-option-stories { 
    font-size: var(--font-size-xs); 
    color: var(--rc-primary); 
    font-weight: 600; 
    margin-top: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.module-option-progress {
    display: flex;
    gap: 3px;
    margin-top: var(--space-sm);
}
.module-option-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rc-border);
}
.module-option-progress-dot.done {
    background: var(--rc-success);
}

.module-back { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.module-back-btn { 
    background: none; 
    border: none; 
    color: var(--rc-text-secondary); 
    font-size: var(--font-size-base); 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: var(--space-xs); 
    margin: 0 auto;
    transition: color 0.2s ease;
}
.module-back-btn:hover { color: var(--rc-text); }

/* Module Dark Mode - Glassmorphism */
.app.dark .module-modal { 
    background: #0f1e1c !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(90, 154, 146, 0.25) !important;
}
.app.dark .module-header { background: #0f1e1c !important; }
.app.dark .module-header h3 { color: #E8E8E8 !important; }
.app.dark .module-option { 
    background: rgba(63, 95, 99, 0.1) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(90, 154, 146, 0.2) !important;
}
.app.dark .module-option:hover { 
    border-color: #4A8A85 !important;
    background: rgba(63, 95, 99, 0.2) !important;
    box-shadow: 0 0 20px rgba(90, 154, 146, 0.15);
}
.app.dark .module-option.recommended { 
    background: rgba(90, 154, 146, 0.2) !important;
    border-color: rgba(90, 154, 146, 0.4) !important;
}
.app.dark .module-option-title { color: #E8E8E8 !important; }
.app.dark .module-option-desc { color: rgba(195, 220, 210, 0.68) !important; }
.app.dark .module-option-icon { background: rgba(90, 154, 146, 0.15) !important; }
.app.dark .module-back-btn { color: rgba(232, 242, 237, 0.65); }
.app.dark .module-back-btn:hover { color: #E8E8E8; }

.confirm-header { 
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%); 
    padding: var(--space-lg); 
    color: white;
}
.confirm-icon { font-size: 3.5em; margin-bottom: var(--space-sm); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
.confirm-title { font-size: var(--font-size-xl); font-weight: 700; color: white; letter-spacing: 0.3px; }
.confirm-subtitle { font-size: var(--font-size-base); color: rgba(255,255,255,0.9); margin-top: var(--space-sm); }
.confirm-body { padding: var(--space-lg); }
.confirm-intro { font-size: var(--font-size-base); color: var(--rc-text-secondary); margin-bottom: var(--space-md); font-weight: 500; }
.confirm-post { 
    background: var(--rc-background); 
    border-radius: var(--radius-lg); 
    padding: var(--space-lg); 
    font-style: normal; 
    color: var(--rc-text); 
    margin-bottom: var(--space-lg); 
    font-size: var(--font-size-base); 
    line-height: 1.6; 
    border: 2px solid var(--rc-border-light);
    position: relative;
}
.confirm-post::before {
    content: "\1F4F1  DEIN POST";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rc-primary);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
}
body[data-lang="en"] .confirm-post::before {
    content: "\1F4F1  YOUR POST";
}
.confirm-warning { 
    font-size: var(--font-size-base); 
    color: var(--rc-text-secondary); 
    margin-bottom: var(--space-md); 
    padding: var(--space-md);
    background: var(--rc-primary-light);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--rc-primary);
}
.confirm-warning strong { color: var(--rc-primary); }
.confirm-question { font-weight: 700; color: var(--rc-text); font-size: var(--font-size-lg); margin-bottom: var(--space-sm); }
.confirm-actions { display: flex; flex-direction: column; gap: var(--space-md); padding: 0 var(--space-lg) var(--space-lg); }
.confirm-actions .btn { margin: 0; padding: var(--space-md) var(--space-lg); font-size: var(--font-size-base); }
.confirm-actions .btn-primary { 
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
}
.app.dark .confirm-modal,
.app.dark .modal.confirm-modal { 
    background: #0f1e1c !important; 
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(90, 154, 146, 0.25) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
.app.dark .confirm-header { background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important; }
.app.dark .confirm-title { color: white !important; }
.app.dark .confirm-subtitle { color: rgba(232, 242, 237, 0.65) !important; }
.app.dark .confirm-body { 
    background: #0f1e1c !important; 
    color: #E8E8E8 !important;
}
.app.dark .confirm-intro { color: rgba(195, 220, 210, 0.68) !important; }
.app.dark .confirm-post { 
    background: rgba(63, 95, 99, 0.15) !important; 
    color: #E8E8E8 !important; 
    border: 1px solid rgba(90, 154, 146, 0.3) !important; 
}
.app.dark .confirm-post::before { background: #3A8A80 !important; }
.app.dark .confirm-warning { 
    background: rgba(63, 95, 99, 0.15) !important; 
    border-left-color: #3A8A80 !important; 
    color: #E8E8E8 !important; 
}
.app.dark .confirm-warning strong { color: #5A9A92 !important; }
.app.dark .confirm-question { color: #E8E8E8 !important; }
.app.dark .confirm-actions { background: #0f1e1c !important; }
.app.dark .confirm-actions .btn { 
    background: rgba(63, 95, 99, 0.1) !important;
    border-color: rgba(90, 154, 146, 0.3) !important;
    color: #E8E8E8 !important;
}
.app.dark .confirm-actions .btn:hover {
    background: rgba(63, 95, 99, 0.2) !important;
}
.app.dark .confirm-actions .btn-primary { 
    background: linear-gradient(135deg, #3A8A80 0%, #1e7268 100%) !important;
    border: none !important;
    color: white !important;
}

/* ========================================
   DARK MODE - Instagram Design (Stylish wie die Nacht)
   ======================================== */
/* Großer Post */
.app.dark .insta-post { 
    background: rgba(21, 32, 37, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(90, 154, 146, 0.12); 
}
.app.dark .insta-post-header-bar { 
    background: rgba(21, 32, 37, 0.9); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px 16px 0 0;
}
.app.dark .insta-post-name { color: #E8E8E8; }
.app.dark .insta-post-location { color: rgba(232, 242, 237, 0.62); }
.app.dark .insta-post-more { color: #E8E8E8; }
.app.dark .insta-post-image-container { background: #0A1215; }
.app.dark .insta-post-actions { 
    background: rgba(21, 32, 37, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.app.dark .insta-action-icon { color: #E8E8E8; }
.app.dark .insta-post-likes { color: #E8E8E8; }
.app.dark .insta-post-caption-name { color: #E8E8E8; }
.app.dark .insta-post-caption-text { color: #E8E8E8; }
.app.dark .insta-view-comments { color: rgba(232, 242, 237, 0.62); }
.app.dark .insta-post-time { color: rgba(232, 242, 237, 0.62); }

/* Post Status */
.app.dark .post-status { 
    background: rgba(21, 32, 37, 0.85); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.15);
    color: #E8E8E8; 
}

/* Kommentare Header */
.app.dark .insta-comments-header { 
    background: rgba(21, 32, 37, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(90, 154, 146, 0.1); 
}
.app.dark .insta-header-title { color: #E8E8E8; }
.app.dark .insta-filter { color: #E8E8E8; }

/* Kommentare */
.app.dark .insta-comments { 
    background: rgba(21, 32, 37, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 8px; /* Padding für den Container */
}
.app.dark .comment { 
    background: rgba(21, 32, 37, 0.8); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.15);
    border-radius: 12px;
    padding: 16px 18px; /* Mehr Innenabstand */
    margin-bottom: 10px; /* Abstand zwischen Kommentaren */
}
.app.dark .comment:last-child {
    margin-bottom: 0;
}
.app.dark .comment-avatar { background: rgba(90, 154, 146, 0.15); }
.app.dark .comment-name { color: #E8E8E8; }
.app.dark .comment-time { color: #5A9A92; }
.app.dark .comment-text { color: #E8E8E8; }
.app.dark .comment-action { color: #5A9A92; }
.app.dark .comment-like-icon { color: #5A9A92; }
.app.dark .comment-like-count { color: #5A9A92; }
.app.dark .comment-replies-toggle { 
    color: #5A9A92; 
    background: transparent;
    border: none;
}
.app.dark .comment-replies-toggle::before { background: #5A9A92; }
.app.dark .comment-replies-toggle:hover { 
    background: rgba(90, 154, 146, 0.1);
}

/* Typing Indicator */
.app.dark .typing { 
    background: rgba(21, 32, 37, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.app.dark .typing-avatar { background: rgba(90, 154, 146, 0.15); }

/* Stats */
.app.dark .insta-stats { 
    background: rgba(21, 32, 37, 0.9); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(90, 154, 146, 0.15); 
}
.app.dark .insta-stat { color: #E8E8E8; }
.app.dark .insta-stat-icon { color: #5A9A92; }
.app.dark .insta-stat-value { color: #E8E8E8; }

/* Input Bar */
.app.dark .insta-input { 
    background: rgba(21, 32, 37, 0.9); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(90, 154, 146, 0.15); 
}
.app.dark .insta-emoji-bar { border-color: rgba(90, 154, 146, 0.12); }
.app.dark .insta-input-avatar { 
    background: rgba(90, 154, 146, 0.15); 
}
.app.dark .insta-input-field { 
    background: rgba(10, 28, 32, 0.8) !important; 
    color: #FFFFFF !important; 
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    min-height: 40px !important;
}
.app.dark .insta-input-field::placeholder { color: #5A8A90 !important; }
.app.dark .insta-input-field:focus { 
    border-color: #5A9A92 !important; 
    background: rgba(10, 28, 32, 0.95) !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.25) !important;
}
.app.dark .insta-send-btn { color: #5A9A92; }

/* Comment Feedback */
.app.dark .comment-feedback { 
    background: rgba(21, 32, 37, 0.9); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(90, 154, 146, 0.15); 
}
.app.dark .comment-feedback-title { color: #E8E8E8; }
.app.dark .comment-feedback-text { color: rgba(195, 220, 210, 0.68); }
.app.dark .comment-feedback-close { color: #5A9A92; }
.app.dark .comment-feedback.green { 
    background: rgba(21, 32, 37, 0.9); 
    border-color: #5A9A92; 
}
.app.dark .comment-feedback.green .comment-feedback-title { color: #5A9A92; }
.app.dark .comment-feedback.green .comment-feedback-text { color: #7ABAB2; }
.app.dark .comment-feedback.orange { background: #431407; border-color: #f97316; }
.app.dark .comment-feedback.orange .comment-feedback-title { color: #fdba74; }
.app.dark .comment-feedback.orange .comment-feedback-text { color: #fb923c; }
.app.dark .comment-feedback.yellow { background: #422006; border-color: #eab308; }
.app.dark .comment-feedback.yellow .comment-feedback-title { color: #fde047; }
.app.dark .comment-feedback.yellow .comment-feedback-text { color: #facc15; }
.app.dark .comment-feedback.gray { background: rgba(21, 32, 37, 0.9); border-color: #3A5664; }

/* Reel Info */
.app.dark .insta-reel-info { background: rgba(21, 32, 37, 0.9); color: #A0AEB5; }

/* ========================================
   LOGIN SCREEN - Minimalistisch, aber nicht langweilig
   ======================================== */

.login-screen {
    display: none;
    min-height: 100vh;
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(63, 95, 99, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(184, 220, 210, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(63, 95, 99, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #e8f2ed 0%, #FFFFFF 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    position: relative;
    overflow: hidden;
}
.login-screen::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(63, 95, 99, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(184, 220, 210, 0.05) 0%, transparent 40%);
    animation: aurora 20s ease-in-out infinite;
    pointer-events: none;
}

.login-screen.active {
    display: block;
    animation: fadeInSmooth 0.5s ease;
}

/* DARK MODE - Glassmorphism Style */
body.dark-mode .login-screen {
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(90, 154, 146, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(63, 95, 99, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 150, 255, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0A1215 0%, #152025 100%);
}
body.dark-mode .login-screen::before {
    background: 
        radial-gradient(circle at 30% 30%, rgba(90, 154, 146, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(63, 95, 99, 0.06) 0%, transparent 40%);
}

/* ============================================== */
/* LOGO TOGGLE: Light Mode vs Dark Mode          */
/* ============================================== */

/* === LIGHT MODE (Standard) === */
/* Mimikama Teal Logo sichtbar */
.desktop-logo-light,
/* === LOGO VISIBILITY - VERALTET, NUR FÜR FALLBACK ===
   Die eigentlichen Regeln sind am Ende der Datei im MASTER FIX Block.
   Diese Regeln hier werden überschrieben.
*/

/* Desktop-Logo im Seitenheader (nicht Login-Screen) */
.desktop-logo-light {
    display: block !important;
}

.desktop-logo-dark {
    display: none !important;
}

body.dark-mode .desktop-logo-light,
.app.dark .desktop-logo-light {
    display: none !important;
}

body.dark-mode .desktop-logo-dark,
.app.dark .desktop-logo-dark {
    display: block !important;
    filter: 
        drop-shadow(0 0 3px rgba(90, 154, 146, 0.4))
        drop-shadow(0 0 8px rgba(90, 154, 146, 0.2));
}

/* === SITE FOOTER LOGO - eigene Logik === */
/* Light Mode: farbiges Logo (mimikama_logo.png) */
.site-footer-logo-light,
.login-footer-logo-light {
    display: inline-block;
}
.site-footer-logo-dark,
.login-footer-logo-dark {
    display: none;
}

/* Dark Mode: weißes Logo (mimikama_logo_white.webp) */
body.dark-mode .site-footer-logo-light,
body.dark-mode .login-footer-logo-light {
    display: none;
}
body.dark-mode .site-footer-logo-dark,
body.dark-mode .login-footer-logo-dark {
    display: inline-block;
}


/* === MOBILE LOGOS - Dark Mode Explizit === */
/* Mobile Light Logos verstecken im Dark Mode */
body.dark-mode .login-logo-mobile.login-logo-light,
body.dark-mode .login-top-icon-mobile.login-logo-light {
    display: none !important;
}

/* Mobile Dark Logos zeigen im Dark Mode */
body.dark-mode .login-logo-mobile.login-logo-dark,
body.dark-mode .login-top-icon-mobile.login-logo-dark {
    display: inline-block !important;
    filter: 
        drop-shadow(0 0 3px rgba(90, 154, 146, 0.4))
        drop-shadow(0 0 8px rgba(90, 154, 146, 0.2));
}

/* Mobile/Desktop Logo Toggle */
.login-logo-mobile {
    display: inline-block;
}

.login-logo-desktop {
    display: none;
}

.login-title-mobile {
    display: none; /* Titel im rechteckigen Logo enthalten */
}

/* Desktop: Rechteckiges Logo, Titel ausblenden */
@media (min-width: 1024px) {
    .login-logo-mobile {
        display: none !important;
    }
    
    /* Desktop: nur das Desktop-Logo zeigen */
    /* Light Mode: Blau-Logo auf Desktop */
    .login-logo-desktop.login-logo-light {
        display: inline-block;
    }
    
    .login-logo-desktop.login-logo-dark {
        display: none;
    }
    
    /* Dark Mode auf Desktop: Teal-Logo */
    body.dark-mode .login-logo-desktop.login-logo-light {
        display: none !important;
    }
    
    body.dark-mode .login-logo-desktop.login-logo-dark {
        display: inline-block !important;
    }
    
    /* Titel auf Desktop ausblenden (ist im Logo) */
    .login-title-mobile {
        display: none;
    }
    
    /* Desktop Logo - vernünftige Größe für scharfe Darstellung */
    .login-logo.login-logo-desktop {
        width: auto !important;
        max-width: 450px !important;
        height: auto !important;
    }
}

/* Top Bar */
.login-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(232, 242, 237, 0.65);
    box-shadow: 0 4px 24px rgba(63, 95, 99, 0.06);
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Buttons nach rechts */
    padding: 0 24px;
    z-index: 1000;
}

body.dark-mode .login-top-bar {
    background: rgba(10, 18, 21, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(90, 154, 146, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.login-top-bar-logo {
    display: none; /* Logo nur im Login-Bereich zeigen, nicht doppelt in Top-Bar */
    align-items: center;
    gap: 12px;
}

.login-top-icon {
    height: 36px;
    width: auto;
}

/* Mobile: quadratisches Logo */
.login-top-icon-mobile {
    display: inline-block;
}

/* Desktop: rechteckiges Logo (auf Mobile versteckt) */
.login-top-icon-desktop {
    display: none;
}

/* Desktop: rechteckiges Logo zeigen - nur weißes Logo */
@media (min-width: 1024px) {
    .login-top-icon-mobile {
        display: none !important;
    }
    
    /* Light Mode: Blau-Logo in Top Bar */
    .login-top-icon-desktop.login-logo-light {
        display: inline-block;
    }
    
    .login-top-icon-desktop.login-logo-dark {
        display: none;
    }
    
    /* Dark Mode: Teal-Logo in Top Bar */
    body.dark-mode .login-top-icon-desktop.login-logo-light {
        display: none !important;
    }
    
    body.dark-mode .login-top-icon-desktop.login-logo-dark {
        display: inline-block !important;
    }
    
    .login-top-icon-desktop {
        height: 36px;
        width: auto;
    }
}

.login-logo-text {
    font-weight: 600;
    font-size: 1em;
    color: #2D4548;
}

body.dark-mode .login-logo-text {
    color: #E8E8E8;
}

.login-top-bar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.login-top-btn {
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: #86868b;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.login-top-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--apple-text);
}

body.dark-mode .login-top-btn {
    color: rgba(232, 242, 237, 0.65);
}

body.dark-mode .login-top-btn:hover {
    background: rgba(90, 154, 146, 0.12);
    color: #E8E8E8;
}

.login-top-btn.active {
    color: #3F5F63;
    font-weight: 600;
}

body.dark-mode .login-top-btn.active {
    color: #4A8A85;
}

/* Main Content */
.login-main {
    min-height: 100vh;
    padding: 88px 24px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-content {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

/* Linke Spalte Container (nur auf Desktop relevant, mobile = normaler Flow) */
.login-left-column {
    width: 100%;
}

/* Hero */
.login-hero {
    margin-bottom: var(--space-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-logo {
    width: 280px;
    max-width: 100%;
    height: auto;
    margin-bottom: var(--space-sm);
    /* Weißer Schatten für besseren Kontrast auf blauem Hintergrund */
    filter: drop-shadow(0 0 20px rgba(232, 242, 237, 0.62));
}

.login-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 var(--space-sm) 0;
    animation: float 4s ease-in-out infinite;
    text-align: center;
}

body.dark-mode .login-title {
    background: linear-gradient(135deg, #5A9A92 0%, #7ABAB2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-tagline {
    font-size: var(--font-size-lg);
    color: var(--rc-text-secondary);
    margin: 0;
    text-align: center;
}

/* How it works */
.login-howto {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.06) 0%, rgba(184, 220, 210, 0.04) 100%);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 1.5px solid rgba(63, 95, 99, 0.28);
}

.login-howto-text {
    font-size: 16px;
    color: var(--rc-text);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.login-howto-text strong {
    color: #3F5F63;
    font-weight: 600;
}

/* Dark Mode: Glassmorphism */
body.dark-mode .login-howto {
    background: rgba(90, 154, 146, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(90, 154, 146, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

body.dark-mode .login-howto-text {
    color: rgba(232, 242, 237, 0.65);
}

body.dark-mode .login-howto-text strong {
    color: #5A9A92;
}

/* Features */
.login-features {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.login-feature {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.login-feature-icon {
    font-size: 1em;
}

.login-feature-text {
    font-size: var(--font-size-sm);
    color: var(--rc-text-secondary);
}

/* NEUE Feature-Karten */
.login-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: var(--space-xl);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.login-feature-card {
    background: white;
    border-radius: 16px;
    padding: 20px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 12px rgba(63, 95, 99, 0.08);
    border: 1px solid rgba(63, 95, 99, 0.1);
    transition: all 0.3s ease;
}

.login-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(63, 95, 99, 0.15);
    border-color: rgba(63, 95, 99, 0.25);
}

.login-feature-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f2ed 0%, #d0e8e0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3F5F63;
    margin-bottom: 4px;
}

.login-feature-icon-circle.accent {
    background: linear-gradient(135deg, #FEF0EC 0%, #FDDDD4 100%);
    color: #8B2C32;
}

.login-feature-icon-circle svg {
    width: 24px;
    height: 24px;
}

.login-feature-label {
    font-size: 15px;
    font-weight: 600;
    color: #3F5F63;
    text-align: center;
    width: 100%;
}

.login-feature-sublabel {
    font-size: 12px;
    color: #6B8A85;
    line-height: 1.3;
    text-align: center;
    width: 100%;
}

/* Dark Mode Feature-Karten */
body.dark-mode .login-feature-card,
.app.dark .login-feature-card {
    background: rgba(63, 95, 99, 0.08);
    border-color: rgba(90, 154, 146, 0.15);
}

body.dark-mode .login-feature-card:hover,
.app.dark .login-feature-card:hover {
    background: rgba(63, 95, 99, 0.12);
    border-color: rgba(90, 154, 146, 0.3);
}

body.dark-mode .login-feature-icon-circle,
.app.dark .login-feature-icon-circle {
    background: rgba(63, 95, 99, 0.2);
    color: #5A9A92;
}

body.dark-mode .login-feature-icon-circle.accent,
.app.dark .login-feature-icon-circle.accent {
    background: rgba(231, 111, 81, 0.2);
    color: #F4A261;
}

body.dark-mode .login-feature-label,
.app.dark .login-feature-label {
    color: #ffffff;
}

body.dark-mode .login-feature-sublabel,
.app.dark .login-feature-sublabel {
    color: rgba(232, 242, 237, 0.65);
}

/* Mobile: Feature-Karten */
@media (max-width: 480px) {
    /* Mobile: Logo kleiner */
    .login-logo {
        width: 200px;
        max-width: 60%;
        margin-bottom: var(--space-xs);
    }
    
    .login-title {
        font-size: 1.8rem;
    }
    
    .login-features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        max-width: 100%;
    }
    
    .login-feature-card {
        padding: 14px 8px;
        text-align: center;
    }
    
    .login-feature-icon-circle {
        width: 40px;
        height: 40px;
    }
    
    .login-feature-icon-circle svg {
        width: 20px;
        height: 20px;
    }
    
    .login-feature-label {
        font-size: 13px;
        text-align: center;
        width: 100%;
    }
    
    .login-feature-sublabel {
        font-size: 11px;
        text-align: center;
        width: 100%;
    }
}

/* Card */
.login-card {
    background: rgba(232, 242, 237, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 
        0 8px 32px rgba(63, 95, 99, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
    margin-bottom: var(--space-xl);
    border: 1.5px solid rgba(63, 95, 99, 0.32);
    transition: all 0.3s ease;
}
.login-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 16px 48px rgba(63, 95, 99, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
    border-color: rgba(63, 95, 99, 0.2);
}

/* Dark Mode: Glassmorphism Card */
body.dark-mode .login-card {
    background: rgba(21, 32, 37, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(90, 154, 146, 0.1);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

body.dark-mode .login-card:hover {
    border-color: rgba(90, 154, 146, 0.2);
}

.login-card-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--rc-text);
    margin: 0 0 var(--space-lg) 0;
}

body.dark-mode .login-card-title {
    color: #ffffff;
}

/* Form */
.login-form {
    text-align: left;
}

.login-form-group {
    margin-bottom: 20px;
}

.login-label {
    display: block;
    font-size: 0.9em;
    font-weight: 600;
    color: #3F5F63;
    margin-bottom: 8px;
}

body.dark-mode .login-label {
    color: #E8E8E8;
}

.login-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1em;
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    border-radius: 12px;
    background: rgba(232, 242, 237, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #3F5F63;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(232, 242, 237, 0.65);
}

.login-input::placeholder {
    color: #6B8A84;
}

.login-input:focus {
    border-color: rgba(63, 95, 99, 0.5);
    background: rgba(195, 220, 210, 0.68);
    box-shadow: 0 0 0 3px rgba(63, 95, 99, 0.1), inset 0 1px 0 rgba(232, 242, 237, 0.65);
}

body.dark-mode .login-input {
    background: rgba(21, 32, 37, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(90, 154, 146, 0.18);
    color: #E8E8E8;
}

body.dark-mode .login-input:focus {
    background: rgba(21, 32, 37, 0.9);
    border-color: #5A9A92;
    box-shadow: 0 0 20px rgba(90, 154, 146, 0.15);
}

body.dark-mode .login-tagline {
    color: rgba(195, 220, 210, 0.68);
}

body.dark-mode .login-input::placeholder {
    color: rgba(232, 242, 237, 0.65);
}

/* Avatar Grid */
.login-avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.login-avatar {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    background: rgba(232, 242, 237, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(63, 95, 99, 0.08);
}

.login-avatar:hover {
    background: rgba(195, 220, 210, 0.68);
    transform: translateY(-2px);
    border-color: rgba(63, 95, 99, 0.4);
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.15);
}

.login-avatar.selected {
    border: 2px solid #3F5F63;
    background: rgba(63, 95, 99, 0.1);
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.2);
}

body.dark-mode .login-avatar {
    background: rgba(21, 32, 37, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(90, 154, 146, 0.15);
}

body.dark-mode .login-avatar:hover {
    background: rgba(21, 32, 37, 0.9);
    border-color: rgba(90, 154, 146, 0.3);
}

body.dark-mode .login-avatar.selected {
    background: rgba(90, 154, 146, 0.2);
    border-color: #5A9A92;
}

/* Button */
.login-btn {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #ffffff;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.3);
}
.login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}
.login-btn:hover:not(:disabled)::before {
    left: 100%;
}

.login-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.4);
}

.login-btn:active:not(:disabled) {
    transform: translateY(-1px);
}

.login-btn:disabled {
    background: var(--rc-text-tertiary);
    cursor: not-allowed;
    box-shadow: none;
}

.login-btn-arrow {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}
.login-btn:hover:not(:disabled) .login-btn-arrow {
    transform: translateX(4px);
}

/* Footer */
.login-footer {
    text-align: center;
}

.login-footer-logo {
    height: 24px;
    width: auto;
    margin-bottom: 8px;
    opacity: 0.6;
}

.login-footer-text {
    font-size: 0.8em;
    color: #86868b;
    margin: 0 0 8px 0;
}

.login-footer-links {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.login-footer-links a {
    font-size: 0.8em;
    color: #3F5F63;
    text-decoration: none;
}

.login-footer-links a:hover {
    text-decoration: underline;
}

/* ========================================
   DESKTOP LAYOUT (3-Spalten) - Für Leute mit großen Bildschirmen
   Nur sichtbar ab 1024px Breite
   ======================================== */

/* Mobile: Desktop-Elemente verstecken, App zeigen */
.desktop-header { display: none; }
.desktop-sidebar-left { display: none; }
.desktop-sidebar-right { display: none; }

/* Mobile: Layout ist Block, zeigt nur die App */
.desktop-layout { 
    display: block;
}

/* Mobile: Center ist einfach sichtbar */
.desktop-center {
    display: block;
}

/* Apple Design Variables - Light Mode Glassmorphism */
:root {
    --apple-bg: rgba(63, 95, 99, 0.05);
    --apple-card: rgba(195, 220, 210, 0.68);
    --apple-text: #3F5F63;
    --apple-text-secondary: #5D7A75;
    --apple-border: rgba(232, 242, 237, 0.62);
    --apple-accent: #3F5F63;
    --apple-green: #34c759;
    --apple-shadow: 0 8px 32px rgba(63, 95, 99, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.dark-mode {
    --apple-bg: #0A1215;
    --apple-card: rgba(20, 40, 45, 0.75);
    --apple-text: #E8E8E8;
    --apple-text-secondary: rgba(232, 242, 237, 0.62);
    --apple-border: rgba(90, 154, 146, 0.1);
    --teal-glow: rgba(90, 154, 146, 0.5);
    --teal-glow-strong: rgba(90, 154, 146, 0.8);
    --teal-bright: #5A9A92;
    /* Dark Mode Glassmorphism Background */
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(90, 154, 146, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(63, 95, 99, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 30%, rgba(90, 154, 146, 0.04) 0%, transparent 40%),
        #0A1215;
    background-attachment: fixed;
}

/* Desktop Media Query - Apple Design */
@media (min-width: 1024px) {
    
    /* ========================================
       DESKTOP LOGIN SCREEN
       ======================================== */
    .login-screen {
        display: none;
    }
    
    .login-screen.active {
        display: flex;
        flex-direction: column;
    }
    
    .login-main {
        flex: 1;
        padding: 100px 48px 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .login-content {
        max-width: 1100px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 40px 60px;
        text-align: left;
        padding: 0 24px;
    }
    
    /* Linke Spalte Container */
    .login-left-column {
        flex: 1;
        max-width: 520px;
    }
    
    .login-hero {
        margin-bottom: var(--space-lg);
        text-align: left;
    }
    
    .login-howto {
        text-align: center;
        margin-bottom: var(--space-lg);
    }
    
    .login-features {
        justify-content: flex-start;
        gap: var(--space-lg);
        margin-bottom: 0;
    }
    
    /* Rechte Spalte: Card */
    .login-card {
        flex: 0 0 400px;
        margin-bottom: 0;
        padding: var(--space-xl) var(--space-xl);
    }
    
    /* Rechte Spalte: Onboarding Wizard */
    .onboarding-wizard {
        flex: 0 0 420px;
        margin: 0;
        padding: 32px;
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-radius: 24px;
        border: var(--glass-border);
        box-shadow: var(--glass-shadow);
    }
    
    body.dark-mode .onboarding-wizard {
        background: rgba(21, 32, 37, 0.85);
        border: 1px solid rgba(90, 154, 146, 0.2);
    }
    
    /* Footer - separate row unter dem Flexbox content */
    .login-footer {
        width: 100%;
        padding: 24px 0;
        margin-top: var(--space-lg);
        background: transparent !important;
        flex-basis: 100%;
    }
    
    .login-logo {
        width: 320px;
        margin-bottom: var(--space-md);
    }
    
    .login-title {
        font-size: 2.8rem;
        margin-bottom: var(--space-sm);
    }
    
    .login-tagline {
        font-size: 1.15rem;
        margin-bottom: 0;
    }
    
    .login-howto-text {
        text-align: center;
        font-size: 1.05rem;
    }
    
    .login-features-grid {
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .login-feature-card {
        text-align: center;
    }
    
    .login-feature-label,
    .login-feature-sublabel {
        text-align: center;
        width: 100%;
    }
    
    .login-feature-text {
        font-size: 1rem;
    }
    
    .login-card-title {
        font-size: 1.5rem;
        text-align: center;
    }
    
    .login-form {
        text-align: left;
    }
    
    .login-label {
        font-size: 1rem;
    }
    
    .login-input {
        font-size: 1rem;
        padding: 14px 18px;
    }
    
    .login-avatar-grid {
        gap: 12px;
    }
    
    .login-avatar {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }
    
    .login-btn {
        font-size: 1.1rem;
        padding: 16px 32px;
    }
    
    body {
        /* Light Mode Glassmorphism Background - NUR TEAL */
        background: 
            radial-gradient(ellipse at 20% 20%, rgba(63, 95, 99, 0.12) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 80%, rgba(184, 220, 210, 0.10) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 60%, rgba(61, 180, 166, 0.08) 0%, transparent 45%),
            linear-gradient(135deg, #e8f2ed 0%, #d0e8e0 50%, #f0f8f5 100%);
        background-attachment: fixed;
        min-height: 100vh;
    }
    
    body.dark-mode {
        /* Dark Mode Glassmorphism Background */
        background: 
            radial-gradient(ellipse at 20% 20%, rgba(90, 154, 146, 0.08) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 80%, rgba(63, 95, 99, 0.06) 0%, transparent 50%),
            radial-gradient(ellipse at 60% 30%, rgba(90, 154, 146, 0.04) 0%, transparent 40%),
            #0A1215;
        background-attachment: fixed;
    }
    
    /* Mobile Header und Footer auf Desktop verstecken */
    .app > .header {
        display: none !important;
    }
    
    .app-footer {
        display: none !important;
    }
    
    /* Desktop Layout aktivieren */
    .desktop-layout {
        display: flex;
        max-width: 1400px;
        margin: 0 auto;
        padding: 92px 24px 24px; /* Mehr Abstand zum Header */
        gap: 24px;
        align-items: flex-start; /* Alle Spalten oben ausrichten */
    }
    
    /* Sidebars auf Desktop zeigen */
    .desktop-sidebar-left,
    .desktop-sidebar-right {
        display: block;
    }
    
    /* Desktop Header - Apple Style */
    .desktop-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: rgba(232, 242, 237, 0.65);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(232, 242, 237, 0.65);
        box-shadow: 0 4px 24px rgba(63, 95, 99, 0.06);
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        z-index: 1000;
    }
    
    .desktop-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .desktop-logo {
        height: 36px;
    }
    
    .desktop-app-title {
        font-size: 1.1em;
        font-weight: 600;
        color: #3F5F63;
        letter-spacing: -0.02em;
    }
    
    .desktop-header-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(63, 95, 99, 0.08);
        padding: 6px;
        border-radius: 12px;
    }
    
    .desktop-nav-btn {
        padding: 10px 20px;
        border: none;
        background: transparent;
        color: #5D7A75;
        font-size: 0.9em;
        font-weight: 500;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.2s;
    }
    
    .desktop-nav-btn:hover {
        color: #3F5F63;
    }
    
    .desktop-nav-btn.active {
        background: rgba(232, 242, 237, 0.65);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #3F5F63;
        box-shadow: 0 2px 8px rgba(63, 95, 99, 0.15);
        font-weight: 600;
    }
    
    /* Desktop Header Dark Mode */
    body.dark-mode .desktop-header {
        background: rgba(10, 18, 21, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(90, 154, 146, 0.08);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    }
    
    body.dark-mode .desktop-app-title {
        color: #E8E8E8;
    }
    
    body.dark-mode .desktop-header-nav {
        background: rgba(90, 154, 146, 0.05);
        border: 1px solid rgba(90, 154, 146, 0.08);
    }
    
    body.dark-mode .desktop-nav-btn {
        color: rgba(210, 230, 250, 0.5);
    }
    
    body.dark-mode .desktop-nav-btn:hover {
        color: #5A9A92;
    }
    
    body.dark-mode .desktop-nav-btn.active {
        background: rgba(90, 154, 146, 0.15);
        color: #5A9A92;
        box-shadow: 
            0 0 15px rgba(90, 154, 146, 0.5),
            0 0 30px rgba(90, 154, 146, 0.3),
            0 0 45px rgba(90, 154, 146, 0.15);
    }
    
    .desktop-header-right {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    
    .desktop-header-user {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 14px 5px 5px;
        background: linear-gradient(135deg, rgba(63, 95, 99, 0.1), rgba(63, 95, 99, 0.1));
        border-radius: 24px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1.5px solid rgba(63, 95, 99, 0.32);
    }
    
    .desktop-header-user:hover {
        background: linear-gradient(135deg, rgba(63, 95, 99, 0.15), rgba(63, 95, 99, 0.15));
        transform: scale(1.02);
        box-shadow: 0 4px 15px rgba(63, 95, 99, 0.2);
    }
    
    .desktop-header-avatar {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, #3F5F63, #4A7A7E);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1em;
        box-shadow: 0 2px 8px rgba(63, 95, 99, 0.3);
    }
    
    .desktop-header-name {
        font-size: 0.9em;
        font-weight: 600;
        color: var(--apple-text);
    }
    
    body.dark-mode .desktop-header-user {
        background: rgba(90, 154, 146, 0.08);
        border: 1px solid rgba(90, 154, 146, 0.12);
    }
    
    body.dark-mode .desktop-header-user:hover {
        background: rgba(90, 154, 146, 0.1);
        border-color: rgba(90, 154, 146, 0.3);
        box-shadow: 0 4px 15px rgba(90, 154, 146, 0.2);
    }
    
    body.dark-mode .desktop-header-name {
        color: #E8E8E8;
    }
    
    body.dark-mode .desktop-header-avatar {
        background: linear-gradient(135deg, #4A8A85, #3A8A80);
        box-shadow: 0 2px 12px rgba(90, 154, 146, 0.4);
    }
    
    .desktop-lang-switch {
        display: flex;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
        padding: 3px;
        gap: 3px;
    }
    
    .desktop-lang-btn {
        padding: 6px 12px;
        font-size: 0.85em;
        font-weight: 500;
        border: none;
        border-radius: 6px;
        background: transparent;
        color: var(--apple-text-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .desktop-lang-btn:hover {
        color: var(--apple-text);
    }
    
    .desktop-lang-btn.active {
        background: var(--apple-card);
        color: var(--apple-accent);
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    body.dark-mode .desktop-lang-switch {
        background: rgba(90, 154, 146, 0.08);
    }
    
    body.dark-mode .desktop-lang-btn {
        color: rgba(232, 242, 237, 0.65);
    }
    
    body.dark-mode .desktop-lang-btn:hover {
        color: #E8E8E8;
    }
    
    body.dark-mode .desktop-lang-btn.active {
        background: rgba(90, 154, 146, 0.15);
        color: #4A8A85;
    }
    
    .desktop-icon-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1em;
        transition: all 0.2s;
    }
    
    .desktop-icon-btn:hover {
        background: var(--apple-bg);
    }
    
    body.dark-mode .desktop-icon-btn:hover {
        background: rgba(90, 154, 146, 0.12);
    }
    
    .desktop-mobile-toggle {
        background: #E8E8E8;
        border: 1px solid var(--apple-border);
    }
    
    .desktop-mobile-toggle:hover {
        background: #e8e8ed;
    }
    
    body.dark-mode .desktop-mobile-toggle {
        background: rgba(90, 154, 146, 0.1);
    }
    
    body.dark-mode .desktop-mobile-toggle:hover {
        background: #3c3c3e;
    }
    
    /* Mobile View Mode - zeigt nur die App zentriert */
    body.mobile-view-mode .desktop-sidebar-left,
    body.mobile-view-mode .desktop-sidebar-right {
        display: none !important;
    }
    
    body.mobile-view-mode .desktop-center {
        max-width: 480px;
        margin: 0 auto;
    }
    
    body.mobile-view-mode .app > .header {
        display: flex !important;
    }
    
    body.mobile-view-mode .app-footer {
        display: flex !important;
    }
    
    body.mobile-view-mode .desktop-mobile-toggle {
        background: #3F5F63;
        color: white;
    }
    
    /* Left Sidebar - Spielverlauf */
    .desktop-sidebar-left {
        width: 280px;
        flex-shrink: 0;
        position: sticky;
        top: 68px;
        height: fit-content;
    }
    
    .desktop-sidebar-card {
        background: rgba(232, 242, 237, 0.62);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: 20px;
        padding: 24px;
        box-shadow: 
            0 8px 32px rgba(63, 95, 99, 0.08),
            0 2px 8px rgba(0, 0, 0, 0.03),
            inset 0 1px 0 rgba(232, 242, 237, 0.65);
        margin-bottom: 20px;
        border: 1.5px solid rgba(63, 95, 99, 0.32);
        transition: all 0.3s ease;
    }
    
    .desktop-sidebar-card:hover {
        transform: translateY(-4px);
        box-shadow: 
            0 16px 48px rgba(63, 95, 99, 0.12),
            0 4px 12px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(232, 242, 237, 0.65);
        border-color: rgba(63, 95, 99, 0.2);
    }
    
    body.dark-mode .desktop-sidebar-card {
        background: rgba(21, 32, 37, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(90, 154, 146, 0.08);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    
    body.dark-mode .desktop-sidebar-card:hover {
        border-color: rgba(90, 154, 146, 0.15);
    }
    
    .desktop-sidebar-title {
        font-size: 0.7em;
        font-weight: 700;
        color: var(--apple-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .desktop-sidebar-title::before {
        content: '';
        width: 4px;
        height: 16px;
        background: linear-gradient(135deg, #3F5F63, #4A7A7E);
        border-radius: 2px;
    }
    
    /* Person Card */
    .desktop-person-card {
        text-align: center;
        padding: 28px 20px;
        position: relative;
        overflow: hidden;
    }
    
    .desktop-person-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(135deg, rgba(63, 95, 99, 0.1) 0%, rgba(63, 95, 99, 0.1) 100%);
        border-radius: 20px 20px 0 0;
    }
    
    .desktop-person-avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
        margin: 0 auto 16px;
        position: relative;
        z-index: 1;
        box-shadow: 0 8px 24px rgba(63, 95, 99, 0.3);
        animation: float 4s ease-in-out infinite;
    }
    
    .desktop-person-name {
        font-weight: 700;
        font-size: 1.1em;
        margin-bottom: 4px;
        color: var(--apple-text);
    }
    
    .desktop-person-role {
        font-size: 0.85em;
        color: var(--apple-text-secondary);
        background: linear-gradient(135deg, rgba(63, 95, 99, 0.1), rgba(63, 95, 99, 0.1));
        padding: 4px 12px;
        border-radius: 12px;
        display: inline-block;
    }
    
    .desktop-person-stats {
        display: flex;
        justify-content: center;
        gap: 12px;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        margin-top: 20px;
    }
    
    .desktop-person-stat {
        text-align: center;
        transition: all 0.3s ease;
        padding: 12px 16px;
        border-radius: 12px;
        background: rgba(63, 95, 99, 0.06);
        border: 1.5px solid rgba(63, 95, 99, 0.28);
    }
    
    .desktop-person-stat:hover {
        transform: scale(1.05);
        border-color: rgba(63, 95, 99, 0.25);
        box-shadow: 0 4px 12px rgba(63, 95, 99, 0.1);
    }
    
    .desktop-person-stat-value {
        font-size: 1.5em;
        font-weight: 800;
        background: linear-gradient(135deg, #3F5F63, #4A7A7E);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .desktop-person-stat-label {
        font-size: 0.7em;
        color: var(--apple-text-secondary);
        font-weight: 500;
    }
    
    /* Story Progress List */
    .desktop-story-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    
    .desktop-story-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: 14px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }
    
    .desktop-story-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: transparent;
        transition: all 0.3s ease;
    }
    
    .desktop-story-item:hover {
        background: rgba(63, 95, 99, 0.08);
        transform: translateX(4px);
    }
    
    .desktop-story-item:hover::before {
        background: linear-gradient(135deg, #3F5F63, #4A7A7E);
    }
    
    .desktop-story-item.completed { 
        opacity: 1; 
        background: rgba(63, 95, 99, 0.1);
    }
    .desktop-story-item.completed::before {
        background: #3F5F63;
    }
    .desktop-story-item.current { 
        background: rgba(63, 95, 99, 0.12);
        box-shadow: 0 0 20px rgba(63, 95, 99, 0.1);
    }
    .desktop-story-item.current::before {
        background: linear-gradient(135deg, #3F5F63, #4A7A7E);
        width: 4px;
    }
    .desktop-story-item.locked { opacity: 0.4; }
    
    .desktop-story-status {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85em;
        font-weight: 700;
        flex-shrink: 0;
    }
    
    .desktop-story-status.done {
        background: var(--apple-green);
        color: white;
    }
    
    .desktop-story-status.active {
        background: var(--apple-accent);
        color: white;
        animation: desktop-pulse 2s infinite;
    }
    
    @keyframes desktop-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(63, 95, 99, 0.4); }
        50% { box-shadow: 0 0 0 8px rgba(63, 95, 99, 0); }
    }
    
    .desktop-story-status.pending {
        background: var(--apple-bg);
        border: 2px solid var(--apple-border);
        color: var(--apple-text-secondary);
    }
    
    .desktop-story-info { flex: 1; }
    
    .desktop-story-name {
        font-size: 0.9em;
        font-weight: 500;
        color: var(--apple-text);
    }
    
    .desktop-story-desc {
        font-size: 0.75em;
        color: var(--apple-text-secondary);
    }
    
    /* Center Content */
    .desktop-center {
        flex: 0 0 720px;
        width: 720px;
    }
    
    /* App im Desktop-Center - Glass-Effekt wie Sidebar Cards */
    .desktop-center .app {
        max-width: 100% !important;
        width: 100%;
        margin: 0 !important;
        border-radius: 20px;
        overflow: hidden;
        min-height: auto;
        background: rgba(232, 242, 237, 0.62);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1.5px solid rgba(63, 95, 99, 0.30);
        box-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.02),
            0 8px 16px rgba(0, 0, 0, 0.04),
            0 16px 32px rgba(63, 95, 99, 0.06);
    }
    
    body.dark-mode .desktop-center .app {
        background: linear-gradient(180deg, #0A1215 0%, #152025 100%);
        border: 1px solid rgba(90, 154, 146, 0.2);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(90, 154, 146, 0.05);
    }
    
    /* Progress Bar auf Desktop - kein Header oben */
    .desktop-center .progress-wrap {
        top: 0;
        border-radius: 0;
    }
    
    /* Right Sidebar */
    .desktop-sidebar-right {
        width: 280px;
        flex-shrink: 0;
        position: sticky;
        top: 68px;
        height: fit-content;
    }
    
    .desktop-panel-card {
        background: rgba(232, 242, 237, 0.62);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: 20px;
        padding: 24px;
        margin-bottom: 20px;
        box-shadow: 
            0 8px 32px rgba(63, 95, 99, 0.08),
            0 2px 8px rgba(0, 0, 0, 0.03),
            inset 0 1px 0 rgba(232, 242, 237, 0.65);
        border: 1.5px solid rgba(63, 95, 99, 0.32);
        transition: all 0.3s ease;
    }
    
    .desktop-panel-card:hover {
        transform: translateY(-4px);
        box-shadow: 
            0 16px 48px rgba(63, 95, 99, 0.12),
            0 4px 12px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(232, 242, 237, 0.65);
        border-color: rgba(63, 95, 99, 0.2);
    }
    
    body.dark-mode .desktop-panel-card {
        background: rgba(10, 28, 32, 0.92) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(90, 154, 146, 0.35) !important;
        box-shadow: 0 0 12px rgba(90, 154, 146, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    }
    
    body.dark-mode .desktop-panel-card:hover {
        border-color: rgba(90, 154, 146, 0.55) !important;
        box-shadow: 0 0 18px rgba(90, 154, 146, 0.3), 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    }
    
    .desktop-panel-title {
        font-size: 0.95em;
        font-weight: 700;
        margin-bottom: 20px;
        color: var(--apple-text);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .desktop-panel-title::before {
        content: '';
        width: 4px;
        height: 16px;
        background: linear-gradient(135deg, #3F5F63, #4A7A7E);
        border-radius: 2px;
    }
    
    /* Badges Grid */
    .desktop-badges-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .desktop-badge {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: var(--apple-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4em;
        opacity: 0.25;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }
    
    .desktop-badge:hover {
        transform: translateY(-4px) scale(1.1);
    }
    
    .desktop-badge.earned {
        opacity: 1;
        background: linear-gradient(135deg, rgba(63, 95, 99, 0.1), rgba(63, 95, 99, 0.1));
        box-shadow: 0 4px 15px rgba(63, 95, 99, 0.2);
    }
    
    .desktop-badge.earned::after {
        content: '\2714';
        position: absolute;
        top: -4px;
        right: -4px;
        width: 18px;
        height: 18px;
        background: #3F5F63;
        border-radius: 50%;
        font-size: 10px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(63, 95, 99, 0.4);
    }
    
    /* Tip Card */
    .desktop-tip-card {
        background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 50%, #3A7AB0 100%);
        color: white;
        position: relative;
        overflow: hidden;
    }
    
    .desktop-tip-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
        animation: float 6s ease-in-out infinite;
    }
    
    .desktop-tip-card .desktop-panel-title {
        color: white;
        position: relative;
        z-index: 1;
    }
    
    .desktop-tip-card .desktop-panel-title::before {
        background: rgba(232, 242, 237, 0.62);
    }
    
    .desktop-tip-text {
        font-size: 0.9em;
        line-height: 1.6;
        position: relative;
        z-index: 1;
        color: white !important; /* Immer weiß auf grünem Hintergrund */
    }
    
    /* Dark Mode für Tipp-Karte - alles weiß */
    body.dark-mode .desktop-tip-card,
    body.dark-mode .desktop-tip-card .desktop-panel-title,
    body.dark-mode .desktop-tip-text {
        color: white !important;
    }
    
    /* Wusstest du? Card */
    .desktop-didyouknow-card {
        background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
        color: white;
        position: relative;
        overflow: hidden;
    }
    
    .desktop-didyouknow-card::before {
        content: '';
        position: absolute;
        top: -30%;
        right: -30%;
        width: 80%;
        height: 80%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
        animation: float 8s ease-in-out infinite;
    }
    
    .desktop-didyouknow-card .desktop-panel-title {
        color: white;
        position: relative;
        z-index: 1;
    }
    
    .desktop-didyouknow-card .desktop-panel-title::before {
        background: rgba(210, 230, 250, 0.5);
    }
    
    .desktop-didyouknow-text {
        font-size: 0.9em;
        line-height: 1.6;
        position: relative;
        z-index: 1;
        color: white !important;
    }
    
    /* Dark Mode für Wusstest du */
    body.dark-mode .desktop-didyouknow-card,
    body.dark-mode .desktop-didyouknow-card .desktop-panel-title,
    body.dark-mode .desktop-didyouknow-text {
        color: white !important;
    }
    
    /* Weißen Schein im Dark Mode entfernen */
    body.dark-mode .desktop-didyouknow-card::before,
    body.dark-mode .desktop-tip-card::before {
        display: none !important;
    }
    
    /* Progress Bars */
    .desktop-progress-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--apple-border);
    }
    
    .desktop-progress-item:last-child {
        border-bottom: none;
    }
    
    .desktop-progress-icon {
        font-size: 1.3em;
    }
    
    .desktop-progress-info {
        flex: 1;
    }
    
    .desktop-progress-name {
        font-size: 0.85em;
        font-weight: 500;
        color: var(--apple-text);
        margin-bottom: 4px;
    }
    
    .desktop-progress-bar {
        height: 4px;
        background: var(--apple-bg);
        border-radius: 2px;
    }
    
    .desktop-progress-fill {
        height: 100%;
        background: var(--apple-accent);
        border-radius: 2px;
    }
    
    .desktop-progress-percent {
        font-size: 0.8em;
        font-weight: 600;
        color: var(--apple-accent);
    }
    
    /* Menu Items */
    .desktop-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        color: var(--apple-text);
        margin-bottom: 4px;
    }
    
    .desktop-menu-item:hover {
        background: var(--apple-bg);
    }
    
    .desktop-menu-item.active {
        background: var(--apple-accent);
        color: white;
    }
    
    .desktop-menu-icon {
        font-size: 1.1em;
    }
    
    .desktop-menu-text {
        font-size: 0.9em;
        font-weight: 500;
    }
    
    .desktop-section-title {
        font-size: 0.7em;
        font-weight: 600;
        color: var(--apple-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 8px;
        padding-left: 12px;
    }
    
    .desktop-card {
        background: var(--apple-card);
        border-radius: 16px;
        padding: 6px;
        box-shadow: var(--apple-shadow);
        margin-bottom: 20px;
    }
}

/* ========================================
   EULEN-HELFER 🦉 - Dein freundlicher Helfer
   CALM DESIGN: Dezent, ohne Ablenkung
   ======================================== */

.owl-helper {
    display: none;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 16px 0;
    background: rgba(63, 95, 99, 0.08);
    border-radius: 12px;
    border: 1.5px solid rgba(63, 95, 99, 0.32);
    /* Keine Animation beim Erscheinen */
}

.owl-helper.active {
    display: flex;
}

.owl-helper-avatar {
    flex-shrink: 0;
    /* Keine Bounce-Animation mehr */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mimi Avatar innerhalb owl-helper - GRÖSSER */
.owl-helper-avatar .mimi-avatar {
    width: 80px;
    height: 80px;
}

.owl-helper-content {
    flex: 1;
}

.owl-helper-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #3F5F63;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.owl-helper-text {
    font-size: 1rem;
    color: var(--rc-text);
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

/* Teens: Voller Helper mit Eule */
.owl-helper.style-teens .owl-helper-avatar {
    display: block;
}

/* Young Adults: Nur Text, minimaler Style */
.owl-helper.style-youngadults {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.05) 0%, rgba(63, 95, 99, 0.05) 100%);
    border-color: rgba(63, 95, 99, 0.15);
    padding: 12px 16px;
}

.owl-helper.style-youngadults .owl-helper-avatar {
    display: flex;
}

.owl-helper.style-youngadults .owl-helper-name {
    color: var(--rc-primary);
}

/* Adults: Herr Boomer Stil */
.owl-helper.style-adults {
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.1) 0%, rgba(210, 180, 140, 0.1) 100%);
    border-color: rgba(139, 90, 43, 0.25);
}

.owl-helper.style-adults .owl-helper-name {
    color: #8B5A2B;
}

.owl-helper.style-adults .owl-helper-name::before {
    content: "🔍 ";
}

.owl-helper-global.style-adults {
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.1) 0%, rgba(210, 180, 140, 0.1) 100%);
    border-color: rgba(139, 90, 43, 0.25);
}

.owl-helper-global.style-adults .owl-helper-avatar {
    display: flex;
}

/* Dark Mode */
body.dark-mode .owl-helper {
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.12) 0%, rgba(244, 162, 97, 0.12) 100%);
    border-color: rgba(233, 196, 106, 0.3);
}

body.dark-mode .owl-helper-text {
    color: var(--rc-dark-text);
}

body.dark-mode .owl-helper.style-youngadults {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.1) 0%, rgba(233, 196, 106, 0.1) 100%);
    border-color: rgba(63, 95, 99, 0.25);
}

body.dark-mode .owl-helper.style-adults {
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.15) 0%, rgba(210, 180, 140, 0.1) 100%);
    border-color: rgba(210, 180, 140, 0.3);
}

body.dark-mode .owl-helper.style-adults .owl-helper-name {
    color: #D4A574;
}

/* Animations */
@keyframes helperSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes owlBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Desktop: Etwas größer */
@media (min-width: 1024px) {
    .owl-helper {
        padding: 20px;
        margin: 20px 0;
    }
    
    .owl-helper-avatar {
        font-size: 2.5rem;
    }
    
    .owl-helper-text {
        font-size: 1rem;
    }
}

/* ========================================
   MIMI HELFER - Dein digitaler Buddy (Inline Version)
   ======================================== */

.owl-helper-global {
    display: none;
    max-width: 100%;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 16px 0;
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.15) 0%, rgba(244, 162, 97, 0.15) 100%);
    border: 1px solid rgba(233, 196, 106, 0.3);
    border-radius: 16px;
    animation: helperSlideIn 0.4s ease-out;
}

.owl-helper-global.active {
    display: flex;
}

.owl-helper-global .owl-helper-avatar {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.owl-helper-global .owl-helper-content {
    flex: 1;
    min-width: 0;
}

.owl-helper-global .owl-helper-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.owl-helper-global .owl-helper-text {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
}

/* Kein X-Button mehr nötig bei inline */
.owl-helper-close {
    display: none;
}

/* Young Adults: Dezentere Version */
.owl-helper-global.style-youngadults {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.1) 0%, rgba(63, 95, 99, 0.1) 100%);
    border-color: rgba(63, 95, 99, 0.2);
}

.owl-helper-global.style-youngadults .owl-helper-avatar {
    display: flex;
}

/* Dark Mode */
body.dark-mode .owl-helper-global {
    background: linear-gradient(135deg, rgba(244, 162, 97, 0.12) 0%, rgba(255, 120, 0, 0.12) 100%);
    border-color: rgba(233, 196, 106, 0.25);
}

body.dark-mode .owl-helper-global.style-youngadults {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.12) 0%, rgba(233, 196, 106, 0.12) 100%);
    border-color: rgba(63, 95, 99, 0.2);
}

/* === SITE FOOTER ADDITIONAL STYLES === */
/* Site Footer - nur auf Desktop */
.site-footer {
    display: none;
}

@media (min-width: 1024px) {
    .site-footer {
display: block;
background: var(--apple-card);
border-top: 1px solid var(--apple-border);
padding: 24px;
margin-top: 40px;
    }
    
    .site-footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
    }
    
    .site-footer-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
color: var(--apple-text);
    }
    
    .site-footer-logo {
height: 24px;
width: auto;
    }
    
    .site-footer-links {
display: flex;
gap: 24px;
    }
    
    .site-footer-links a {
color: #64748b;
text-decoration: none;
font-size: 0.9em;
transition: color 0.2s;
    }
    
    .site-footer-links a:hover {
color: #3F5F63;
    }
    
    .site-footer-copy {
color: #94a3b8;
font-size: 0.85em;
    }
    
    /* Dark Mode Footer */
    body.dark-mode .site-footer {
background: rgba(21, 32, 37, 0.9);
border-top-color: rgba(90, 154, 146, 0.15);
    }
    
    body.dark-mode .site-footer-brand {
color: #E8E8E8;
    }
    
    body.dark-mode .site-footer-links a {
color: #5A9A92;
    }
    
    body.dark-mode .site-footer-links a:hover {
color: #7ABAB2;
    }
    
    body.dark-mode .site-footer-copy {
color: rgba(232, 242, 237, 0.65);
    }
}

/* ========================================
   🚀 INTERAKTIONS-MAGIE ✨
   ======================================== */

/* ========================================
   1. MICRO-INTERACTIONS - Button Effects
   ======================================== */

/* Ripple Effect für alle Buttons */
.btn, .login-btn, button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn::after, .login-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(232, 242, 237, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn:active::after, .login-btn:active::after {
    width: 300px;
    height: 300px;
}

/* Enhanced Hover States */
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.3);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.2);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #238B7E 0%, #2FA799 100%);
    box-shadow: 0 8px 30px rgba(63, 95, 99, 0.4);
}

.btn-secondary:hover {
    background: rgba(63, 95, 99, 0.15);
    border-color: var(--rc-primary);
}

/* Card Hover Effects */
.option-card, .age-card, .module-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.option-card:hover, .age-card:hover, .module-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(63, 95, 99, 0.15);
}

/* Input Focus Glow */
input:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(63, 95, 99, 0.2), 0 0 20px rgba(63, 95, 99, 0.1);
    border-color: var(--rc-primary);
    transition: all 0.3s ease;
}

/* ========================================
   2. IMPROVED WHITESPACE & TYPOGRAPHY
   ======================================== */

/* Better Spacing */
.screen {
    padding: var(--space-lg) var(--space-md);
}

.story-text, .consequence-text, .learned-text {
    line-height: 1.7;
    letter-spacing: 0.01em;
}

/* 📝 Schriften - Lesbarkeit ist King Hierarchy */
h1, .result-title, .screen-title {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

h2, .section-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h3, .card-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

p, .body-text {
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.01em;
}

/* Improved CTA Buttons */
.cta {
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-md);
}

.cta .btn {
    padding: 16px 28px;
    font-size: var(--font-size-base);
    font-weight: 600;
}

/* ========================================
   3. ANIMATED PROGRESS BAR (Top of Screen)
   ======================================== */

.global-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(63, 95, 99, 0.1);
    z-index: 10000;
    overflow: hidden;
}

.global-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3F5F63, #B8D8D0, #3F5F63);
    background-size: 200% 100%;
    animation: progressShine 2s ease-in-out infinite;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(63, 95, 99, 0.5);
}

@keyframes progressShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

body.dark-mode .global-progress {
    background: rgba(90, 154, 146, 0.1);
}

body.dark-mode .global-progress-bar {
    background: linear-gradient(90deg, #5A9A92, #7ABAB2, #5A9A92);
    background-size: 200% 100%;
}

/* ========================================
   4. ENHANCED DARK MODE TOGGLE
   ======================================== */

.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode-toggle:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: var(--glass-shadow-hover);
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

body.dark-mode .dark-mode-toggle {
    background: rgba(21, 32, 37, 0.8);
    border: 1px solid rgba(90, 154, 146, 0.3);
    box-shadow: 0 0 20px rgba(90, 154, 146, 0.2);
}

/* Smooth transition for entire page */
body {
    transition: background-color 0.5s ease, color 0.5s ease;
}

body.dark-mode {
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* ========================================
   5. ENHANCED CELEBRATIONS
   ======================================== */

/* Longer, more satisfying confetti */
.confetti-piece {
    animation: confettiFall 4s ease-out forwards;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-100vh) rotate(0deg);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

/* Success celebration glow */
.celebration-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(circle at 50% 50%, rgba(63, 95, 99, 0.3) 0%, transparent 70%);
    animation: celebrationPulse 1s ease-out;
}

@keyframes celebrationPulse {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: scale(2); }
}

/* Badge earned animation */
.badge-earned-animation {
    animation: badgeEarned 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes badgeEarned {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    50% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ========================================
   6. LOADING STATES / SKELETT-ANSICHTEN - Spooky Loading 💀
   ======================================== */

.skeleton {
    background: linear-gradient(90deg, 
        rgba(63, 95, 99, 0.1) 25%, 
        rgba(63, 95, 99, 0.2) 50%, 
        rgba(63, 95, 99, 0.1) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-text:last-child {
    width: 60%;
}

.skeleton-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.skeleton-card {
    height: 120px;
    margin-bottom: var(--space-md);
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

body.dark-mode .skeleton {
    background: linear-gradient(90deg, 
        rgba(90, 154, 146, 0.05) 25%, 
        rgba(90, 154, 146, 0.1) 50%, 
        rgba(90, 154, 146, 0.05) 75%);
    background-size: 200% 100%;
}

/* ========================================
   7. WILLKOMMENS-TOUR - Erste Schritte
   ======================================== */

.onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.onboarding-overlay.active {
    opacity: 1;
    visibility: visible;
}

.onboarding-card {
    background: #ffffff;
    border-radius: 24px;
    max-width: 400px;
    width: 90%;
    padding: 32px;
    text-align: center;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

.onboarding-overlay.active .onboarding-card {
    transform: scale(1) translateY(0);
}

.onboarding-icon {
    font-size: 4em;
    margin-bottom: 24px;
    animation: onboardingBounce 2s ease-in-out infinite;
}

@keyframes onboardingBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.onboarding-title {
    font-size: 1.5em;
    font-weight: 800;
    margin-bottom: 16px;
    color: #3F5F63 !important;
}

.onboarding-text {
    font-size: 1.05em;
    color: #4a5568 !important;
    line-height: 1.6;
    margin-bottom: 24px;
}

.onboarding-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.onboarding-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(63, 95, 99, 0.2);
    transition: all 0.3s ease;
}

.onboarding-dot.active {
    background: #3F5F63;
    transform: scale(1.2);
}

.onboarding-btn {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
    color: white !important;
    border: none;
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.3);
}

.onboarding-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.4);
}

.onboarding-skip {
    display: block;
    margin-top: 16px;
    color: #94a3b8 !important;
    font-size: 0.9em;
    cursor: pointer;
    transition: color 0.3s ease;
}

.onboarding-skip:hover {
    color: #64748b !important;
}

/* Dark Mode Onboarding */
body.dark-mode .onboarding-card,
.app.dark .onboarding-card {
    background: linear-gradient(135deg, #0A1215 0%, #152025 100%) !important;
    border: 1px solid rgba(90, 154, 146, 0.2);
}

body.dark-mode .onboarding-title,
.app.dark .onboarding-title {
    color: #E8E8E8 !important;
}

body.dark-mode .onboarding-text,
.app.dark .onboarding-text {
    color: rgba(184, 220, 210, 0.8) !important;
}

body.dark-mode .onboarding-btn,
.app.dark .onboarding-btn {
    background: linear-gradient(135deg, #5A9A92 0%, #4A8A85 100%);
    color: #0A1215 !important;
}

body.dark-mode .onboarding-skip,
.app.dark .onboarding-skip {
    color: rgba(184, 220, 210, 0.5) !important;
}

body.dark-mode .onboarding-dot,
.app.dark .onboarding-dot {
    background: rgba(90, 154, 146, 0.3);
}

body.dark-mode .onboarding-dot.active,
.app.dark .onboarding-dot.active {
    background: #5A9A92;
}

/* ========================================
   8. SAFE SPACE - Hier bist du sicher 🏠
   ======================================== */

.safe-space-banner {
    background: linear-gradient(135deg, #e8f2ed 0%, #d0e8e0 100%);
    border: 1.5px solid rgba(63, 95, 99, 0.32);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.safe-space-icon {
    font-size: 2em;
    flex-shrink: 0;
}

.safe-space-content {
    flex: 1;
}

.safe-space-title {
    font-weight: 700;
    color: var(--rc-primary-dark);
    margin-bottom: var(--space-xs);
}

.safe-space-text {
    font-size: var(--font-size-sm);
    color: var(--rc-text-secondary);
    line-height: 1.5;
}

.safe-space-skip {
    color: var(--rc-text-tertiary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
}

body.dark-mode .safe-space-banner {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.1) 0%, rgba(63, 95, 99, 0.05) 100%);
    border-color: rgba(90, 154, 146, 0.2);
}

body.dark-mode .safe-space-title {
    color: #7ABAB2;
}

/* ========================================
   9. PAUSE-TIMER - Erst denken, dann posten (Before Posting)
   ======================================== */

.cooldown-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cooldown-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cooldown-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(63, 95, 99, 0.1);
    border: 4px solid var(--rc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cooldown-number {
    font-size: 4em;
    font-weight: 800;
    color: white;
    animation: cooldownPulse 1s ease-in-out infinite;
}

@keyframes cooldownPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.cooldown-progress {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(var(--rc-primary) var(--progress, 0%), transparent var(--progress, 0%));
    animation: cooldownSpin 5s linear forwards;
}

@keyframes cooldownSpin {
    0% { --progress: 0%; }
    100% { --progress: 100%; }
}

.cooldown-text {
    color: white;
    margin-top: var(--space-xl);
    font-size: var(--font-size-lg);
    text-align: center;
    max-width: 300px;
}

.cooldown-subtext {
    color: rgba(232, 242, 237, 0.65);
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
}

/* ========================================
   10. EMPATHIE-ANZEIGE - Gefühle zählen ❤️
   ======================================== */

/* Empathy Score Card */
.empathy-score {
    background: linear-gradient(135deg, #FFE5EC 0%, #FFF0F5 100%);
    border: 1px solid rgba(231, 111, 81, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.empathy-icon {
    font-size: 2.5em;
}

.empathy-info {
    flex: 1;
}

.empathy-label {
    font-size: var(--font-size-sm);
    color: var(--rc-text-secondary);
}

.empathy-value {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: #8B2C32;
}

body.dark-mode .empathy-score {
    background: linear-gradient(135deg, rgba(231, 111, 81, 0.1) 0%, rgba(231, 111, 81, 0.05) 100%);
}

/* Streak Display */
.streak-display {
    background: linear-gradient(135deg, #FFF4E5 0%, #FFFAF0 100%);
    border: 1px solid rgba(233, 196, 106, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.streak-fire {
    font-size: 2.5em;
    animation: streakFlame 0.5s ease-in-out infinite alternate;
}

@keyframes streakFlame {
    0% { transform: scale(1) rotate(-3deg); }
    100% { transform: scale(1.1) rotate(3deg); }
}

.streak-info {
    flex: 1;
}

.streak-label {
    font-size: var(--font-size-sm);
    color: var(--rc-text-secondary);
}

.streak-value {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: #D97706;
}

body.dark-mode .streak-display {
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.1) 0%, rgba(233, 196, 106, 0.05) 100%);
}

/* ========================================
   11. REFLEXION - Was hast du gelernt? (After Each Story)
   ======================================== */

.reflection-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.reflection-modal.active {
    opacity: 1;
    visibility: visible;
}

.reflection-card {
    background: white;
    border-radius: var(--radius-xl);
    max-width: 450px;
    width: 100%;
    padding: var(--space-xl);
    text-align: center;
    transform: translateY(30px);
    transition: all 0.4s ease;
}

.reflection-modal.active .reflection-card {
    transform: translateY(0);
}

.reflection-emoji {
    font-size: 3em;
    margin-bottom: var(--space-md);
}

.reflection-question {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--rc-text);
    margin-bottom: var(--space-lg);
}

.reflection-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.reflection-option {
    padding: var(--space-md);
    border: 2px solid rgba(63, 95, 99, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.reflection-option:hover {
    border-color: var(--rc-primary);
    background: var(--rc-primary-10);
}

.reflection-option.selected {
    border-color: var(--rc-primary);
    background: var(--rc-primary-light);
}

body.dark-mode .reflection-card {
    background: #152025;
}

body.dark-mode .reflection-question {
    color: #E8E8E8;
}

/* ========================================
   12. SOUND TOGGLE
   ======================================== */

/* Sound war hier mal - RIP 🪦 */

/* ========================================
   13. ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--rc-primary);
    outline-offset: 3px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rc-primary);
    color: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    z-index: 100001;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 10px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --rc-text: #000000;
        --rc-background: #FFFFFF;
        --rc-primary: #006B5F;
    }
    
    .btn, .option-card, .age-card {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   14. TEILEN - Wissen verbreiten
   ======================================== */

.share-card {
    background: linear-gradient(135deg, var(--rc-primary) 0%, #4A7A7E 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    color: white;
    text-align: center;
    margin-bottom: var(--space-lg);
}

.share-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.share-score {
    font-size: 3em;
    font-weight: 800;
    margin-bottom: var(--space-sm);
}

.share-subtitle {
    opacity: 0.9;
    margin-bottom: var(--space-lg);
}

.share-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.share-btn {
    background: rgba(232, 242, 237, 0.3);
    border: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
    transition: all 0.3s ease;
}

.share-btn:hover {
    background: rgba(232, 242, 237, 0.4);
    transform: translateY(-2px);
}
/* ========================================
   🚀 NOCH MEHR MAGIE 🪄
   ======================================== */

/* ========================================
   1. GEDANKEN-BLASE - Was denkst du? 💭 (Vor dem Posten)
   ======================================== */

.thought-bubble {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF4D6 100%);
    border: 2px solid #E9C46A;
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    max-width: 350px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(233, 196, 106, 0.3);
    z-index: 99990;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.thought-bubble.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.thought-bubble::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #E9C46A;
}

.thought-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #FFF4D6;
}

.thought-bubble-icon {
    font-size: 2em;
    text-align: center;
    margin-bottom: var(--space-sm);
}

.thought-bubble-text {
    font-size: var(--font-size-base);
    color: #8B6914;
    text-align: center;
    line-height: 1.5;
}

.thought-bubble-dismiss {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.thought-bubble-dismiss:hover {
    opacity: 1;
}

body.dark-mode .thought-bubble {
    background: linear-gradient(135deg, #2A2510 0%, #3D3518 100%);
    border-color: #B8972F;
}

body.dark-mode .thought-bubble-text {
    color: #E9C46A;
}

/* ========================================
   2. NOCHMAL-BUTTON - Übung macht den Meister
   ======================================== */

.replay-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: linear-gradient(135deg, #F4A261 0%, #E9C46A 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: var(--space-md);
}

.replay-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 162, 97, 0.4);
}

.replay-btn .replay-icon {
    font-size: 1.2em;
}

/* ========================================
   3. RÜCKGÄNGIG - Jeder verdient eine zweite Chance
   ======================================== */

.undo-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #3F5F63;
    color: white;
    padding: 16px 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.undo-toast.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.undo-toast-text {
    font-size: var(--font-size-sm);
}

.undo-toast-btn {
    background: rgba(232, 242, 237, 0.3);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.undo-toast-btn:hover {
    background: rgba(232, 242, 237, 0.4);
}

.undo-toast-timer {
    width: 100%;
    height: 3px;
    background: rgba(232, 242, 237, 0.3);
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0 0 var(--radius-full) var(--radius-full);
    overflow: hidden;
}

.undo-toast-timer-bar {
    height: 100%;
    background: white;
    animation: undoTimer 5s linear forwards;
}

@keyframes undoTimer {
    from { width: 100%; }
    to { width: 0%; }
}

/* ========================================
   4. VORLESEN - Für die Ohren 👂
   ======================================== */

.tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2em;
}

.tts-btn:hover {
    transform: scale(1.1);
    background: var(--rc-primary-10);
}

.tts-btn.speaking {
    background: var(--rc-primary);
    color: white;
    animation: ttsPulse 1s ease-in-out infinite;
}

@keyframes ttsPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(63, 95, 99, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(63, 95, 99, 0); }
}

.tts-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

body.dark-mode .tts-btn {
    background: rgba(21, 32, 37, 0.8);
    border: 1px solid rgba(90, 154, 146, 0.2);
}

/* ========================================
   5. FONT SIZE CONTROLS
   ======================================== */

.font-size-controls {
    /* Angepasst: weiter unten um Header nicht zu verdecken */
    position: fixed;
    top: 110px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 9997;
}

.font-size-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    color: var(--rc-text);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.font-size-btn:hover {
    transform: scale(1.1);
    background: var(--rc-primary-10);
}

body.dark-mode .font-size-btn {
    background: rgba(21, 32, 37, 0.8);
    border: 1px solid rgba(90, 154, 146, 0.2);
    color: #E8E8E8;
}

/* Font size classes */
body.font-size-small {
    font-size: 14px;
}

body.font-size-normal {
    font-size: 16px;
}

body.font-size-large {
    font-size: 18px;
}

body.font-size-xlarge {
    font-size: 20px;
}

/* ========================================
   6. TRIGGER WARNING
   ======================================== */

.trigger-warning {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.trigger-warning.active {
    opacity: 1;
    visibility: visible;
}

.trigger-warning-card {
    background: white;
    border-radius: var(--radius-xl);
    max-width: 420px;
    width: 100%;
    padding: var(--space-xl);
    text-align: center;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.trigger-warning.active .trigger-warning-card {
    transform: scale(1);
}

.trigger-warning-icon {
    font-size: 3em;
    margin-bottom: var(--space-md);
}

.trigger-warning-title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: #8B2C32;
    margin-bottom: var(--space-md);
}

.trigger-warning-text {
    font-size: var(--font-size-base);
    color: var(--rc-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.trigger-warning-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.trigger-topic {
    background: #FEF3EF;
    color: #8B2C32;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.trigger-warning-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

.trigger-btn-continue {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.trigger-btn-skip {
    background: transparent;
    color: var(--rc-text-secondary);
    border: 2px solid rgba(0, 0, 0, 0.1);
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.trigger-btn-continue:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.4);
}

.trigger-btn-skip:hover {
    border-color: var(--rc-text-secondary);
}

body.dark-mode .trigger-warning-card {
    background: #152025;
}

body.dark-mode .trigger-warning-title {
    color: #FF8A70;
}

body.dark-mode .trigger-warning-text {
    color: #A0AEB5;
}

body.dark-mode .trigger-topic {
    background: rgba(231, 111, 81, 0.15);
}

/* ========================================
   8. ENHANCED REFLEXION - Was hast du gelernt?
   ======================================== */

.reflection-modal .reflection-type {
    display: inline-block;
    background: var(--rc-primary-10);
    color: var(--rc-primary);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.reflection-modal .reflection-progress {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: var(--space-lg);
}

.reflection-modal .reflection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(63, 95, 99, 0.2);
}

.reflection-modal .reflection-dot.active {
    background: var(--rc-primary);
}

.reflection-modal .reflection-dot.completed {
    background: var(--rc-success);
}
/* ========================================
   🚀 PREMIUM UPGRADE v58 - PHASE 3
   ======================================== */

/* ========================================
   1. PARALLAX-EFFEKTE
   ======================================== */

.parallax-container {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.parallax-layer-back {
    transform: translateZ(-100px) scale(1.1);
}

.parallax-layer-front {
    transform: translateZ(50px) scale(0.95);
}

/* Phone mockup parallax */
.phone-mockup {
    transition: transform 0.3s ease-out;
}

.phone-mockup:hover {
    transform: rotateY(-5deg) rotateX(5deg);
}

.phone-mockup .post-image {
    transition: transform 0.5s ease-out;
}

.phone-mockup:hover .post-image {
    transform: scale(1.05) translateZ(20px);
}

/* Story cards subtle parallax */
.story-card, .option-card {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

.option-card:hover {
    transform: translateY(-8px) rotateX(2deg);
}

/* Background parallax layers */
.app::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(63, 95, 99, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 70% 70%, rgba(233, 196, 106, 0.05) 0%, transparent 50%);
    animation: parallaxFloat 20s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes parallaxFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(2%, 2%) rotate(1deg); }
    50% { transform: translate(0, 4%) rotate(0deg); }
    75% { transform: translate(-2%, 2%) rotate(-1deg); }
}

/* ========================================
   2. ANIMIERTE NPC-AVATARE
   ======================================== */

.comment-avatar {
    position: relative;
    transition: transform 0.3s ease;
}

.comment-avatar::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--rc-primary), var(--rc-accent), var(--rc-primary));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.comment:hover .comment-avatar {
    transform: scale(1.1);
    animation: avatarBounce 0.5s ease;
}

.comment:hover .comment-avatar::after {
    opacity: 1;
    animation: avatarGlow 2s linear infinite;
}

@keyframes avatarBounce {
    0%, 100% { transform: scale(1.1); }
    50% { transform: scale(1.15); }
}

@keyframes avatarGlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Avatar emotions */
.avatar-emotion {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.8em;
    animation: emotionPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes emotionPop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* ========================================
   3. MOOD-FARBEN JE STORY
   ======================================== */

/* Positive mood */
.mood-positive {
    --mood-color: #3F5F63;
    --mood-bg: linear-gradient(135deg, #e8f2ed 0%, #d0e8e0 100%);
    --mood-glow: rgba(63, 95, 99, 0.2);
}

.mood-positive .screen {
    background: var(--mood-bg);
}

.mood-positive .phone-mockup {
    box-shadow: 0 20px 60px var(--mood-glow);
}

/* Negative mood */
.mood-negative {
    --mood-color: #8B2C32;
    --mood-bg: linear-gradient(135deg, #FEF3EF 0%, #FDE8E4 100%);
    --mood-glow: rgba(231, 111, 81, 0.2);
}

.mood-negative .screen {
    background: var(--mood-bg);
}

.mood-negative .phone-mockup {
    box-shadow: 0 20px 60px var(--mood-glow);
}

/* Warning mood */
.mood-warning {
    --mood-color: #F4A261;
    --mood-bg: linear-gradient(135deg, #FEF6EE 0%, #FDF0E3 100%);
    --mood-glow: rgba(244, 162, 97, 0.2);
}

.mood-warning .screen {
    background: var(--mood-bg);
}

/* Neutral mood */
.mood-neutral {
    --mood-color: #5D7A75;
    --mood-bg: linear-gradient(135deg, #F5F7F6 0%, #EEF1F0 100%);
    --mood-glow: rgba(93, 122, 117, 0.15);
}

/* Mood transition */
.app {
    transition: background 0.8s ease;
}

.app[data-mood] .screen {
    transition: background 0.8s ease;
}

/* Dark mode mood adjustments */
body.dark-mode .mood-positive .screen {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.1) 0%, rgba(63, 95, 99, 0.05) 100%);
}

body.dark-mode .mood-negative .screen {
    background: linear-gradient(135deg, rgba(231, 111, 81, 0.1) 0%, rgba(231, 111, 81, 0.05) 100%);
}

body.dark-mode .mood-warning .screen {
    background: linear-gradient(135deg, rgba(244, 162, 97, 0.1) 0%, rgba(244, 162, 97, 0.05) 100%);
}

/* ========================================
   4. PERSPEKTIVWECHSEL-BOX
   ======================================== */

.perspective-box {
    background: linear-gradient(135deg, #F0E6FF 0%, #E8DEFF 100%);
    border: 2px solid #3F5F63;
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    position: relative;
    overflow: hidden;
}

.perspective-box::before {
    content: '\1F441\FE0F';
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 5em;
    opacity: 0.1;
    transform: rotate(15deg);
}

.perspective-icon {
    font-size: 2em;
    margin-bottom: var(--space-sm);
}

.perspective-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #6D28D9;
    margin-bottom: var(--space-sm);
}

.perspective-text {
    font-size: var(--font-size-sm);
    color: #5B21B6;
    line-height: 1.6;
    font-style: italic;
}

body.dark-mode .perspective-box {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.15) 0%, rgba(63, 95, 99, 0.08) 100%);
    border-color: rgba(63, 95, 99, 0.4);
}

body.dark-mode .perspective-title,
body.dark-mode .perspective-text {
    color: #4A8A85;
}

/* ========================================
   5. EXIT-STRATEGIE BOX
   ======================================== */

.exit-strategy {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 2px solid #10B981;
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.exit-strategy-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.exit-strategy-icon {
    font-size: 1.5em;
}

.exit-strategy-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #047857;
}

.exit-strategy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.exit-strategy-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: var(--font-size-sm);
    color: #065F46;
}

.exit-strategy-item::before {
    content: '\2714';
    color: #10B981;
    font-weight: bold;
}

body.dark-mode .exit-strategy {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    border-color: rgba(16, 185, 129, 0.4);
}

body.dark-mode .exit-strategy-title,
body.dark-mode .exit-strategy-item {
    color: #6ec7a7;
}

/* ========================================
   6. "DER ANDERE WEG" MODAL
   ======================================== */

.alternative-path-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.alternative-path-modal.active {
    opacity: 1;
    visibility: visible;
}

.alternative-path-card {
    background: white;
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(30px);
    transition: all 0.4s ease;
}

.alternative-path-modal.active .alternative-path-card {
    transform: translateY(0);
}

.alternative-path-header {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
    color: white;
    padding: var(--space-xl);
    text-align: center;
}

.alternative-path-icon {
    font-size: 3em;
    margin-bottom: var(--space-sm);
}

.alternative-path-title {
    font-size: var(--font-size-xl);
    font-weight: 800;
}

.alternative-path-content {
    padding: var(--space-xl);
}

.alternative-path-scenario {
    background: var(--rc-primary-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.alternative-path-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--rc-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.alternative-path-text {
    font-size: var(--font-size-base);
    color: var(--rc-text);
    line-height: 1.6;
}

.alternative-path-outcome {
    border-left: 4px solid var(--rc-success);
    padding-left: var(--space-md);
    margin-bottom: var(--space-lg);
}

.alternative-path-outcome-title {
    font-weight: 700;
    color: var(--rc-success);
    margin-bottom: var(--space-xs);
}

.alternative-path-btn {
    width: 100%;
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 16px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.alternative-path-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.4);
}

body.dark-mode .alternative-path-card {
    background: #152025;
}

body.dark-mode .alternative-path-scenario {
    background: rgba(63, 95, 99, 0.1);
}

body.dark-mode .alternative-path-text {
    color: #E8E8E8;
}

/* ========================================
   7. TRANSFERAUFGABEN
   ======================================== */

.transfer-task {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 2px solid #F59E0B;
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
    position: relative;
}

.transfer-task-badge {
    position: absolute;
    top: -12px;
    left: var(--space-lg);
    background: #F59E0B;
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.transfer-task-icon {
    font-size: 2em;
    margin-bottom: var(--space-sm);
}

.transfer-task-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #92400E;
    margin-bottom: var(--space-sm);
}

.transfer-task-text {
    font-size: var(--font-size-sm);
    color: #78350F;
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.transfer-task-duration {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: #B45309;
    background: rgba(232, 242, 237, 0.62);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

body.dark-mode .transfer-task {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.4);
}

body.dark-mode .transfer-task-title,
body.dark-mode .transfer-task-text {
    color: #FCD34D;
}

body.dark-mode .transfer-task-badge {
    background: #D97706;
}

/* ========================================
   8. ADAPTIVE DIFFICULTY INDICATOR
   ======================================== */

.difficulty-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
}

.difficulty-label {
    color: var(--rc-text-secondary);
}

.difficulty-level {
    display: flex;
    gap: 3px;
}

.difficulty-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(63, 95, 99, 0.2);
    transition: all 0.3s ease;
}

.difficulty-dot.active {
    background: var(--rc-primary);
}

.difficulty-dot.active.hard {
    background: #F59E0B;
}

.difficulty-dot.active.expert {
    background: #8B2C32;
}

/* Difficulty adjustment animation */
.difficulty-change {
    animation: difficultyPulse 0.5s ease;
}

@keyframes difficultyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Kontrast-Modus: Vielleicht 2025 🤷 */

/* ========================================
   MOBILE-OPTIMIERUNG/* ========================================
   MOBILE-OPTIMIERUNG FÜR FLOATING BUTTONS
   ======================================== */

/* Auf kleinen Screens: Buttons verkleinern und anders positionieren */
@media (max-width: 480px) {
    
    /* Font Size Controls auf Mobile ausblenden oder kompakter */
    .font-size-controls {
        top: auto;
        bottom: 20px;
        right: 110px;
        flex-direction: row;
        gap: 2px;
    }
    
    .font-size-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
}

/* Noch kleinere Screens: Einige Buttons ausblenden */
@media (max-width: 360px) {
    .font-size-controls {
        display: none;
    }
    
}

/* Tablet: Normale Positionierung aber etwas kleiner */
@media (min-width: 481px) and (max-width: 768px) {
    .font-size-btn {
        width: 32px;
        height: 32px;
    }
}
/* ========================================
   KIDS (10-13) SPEZIFISCHE STYLES
   ======================================== */

/* Kids bekommen größere Touch-Targets */
.app[data-age="kids"] .btn,
.app[data-age="kids"] .option-btn {
    min-height: 54px;
    font-size: 1.1em;
}

/* Kids: Freundlichere Farben */
.app[data-age="kids"] {
    --rc-primary: #2ECC71;
    --rc-accent: #F39C12;
}

/* Kids: Größere Avatare */
.app[data-age="kids"] .comment-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.2em;
}

/* Kids: Mehr Emojis/Visuelle Hinweise */
.app[data-age="kids"] .learning-point::before {
    font-size: 1.5em;
}

/* Kids: Einfachere Sprache - größere Schrift */
.app[data-age="kids"] .post-caption,
.app[data-age="kids"] .consequence-text {
    font-size: 1.05em;
    line-height: 1.7;
}
/* ========================================
   ONBOARDING WIZARD - 4 Schritte
   ======================================== */

.onboarding-wizard {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 24px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 20px;
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

body.dark-mode .onboarding-wizard {
    background: rgba(21, 32, 37, 0.85);
    border: 1px solid rgba(90, 154, 146, 0.2);
}

/* Progress Indicator */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    gap: 8px;
}

.wizard-progress-step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(63, 95, 99, 0.2);
    color: #3F5F63 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
    border: 2px solid rgba(63, 95, 99, 0.3);
}

/* Dark Mode */
.app.dark .wizard-progress-step {
    background: rgba(90, 154, 146, 0.25);
    color: rgba(232, 242, 237, 0.65) !important;
    border-color: rgba(90, 154, 146, 0.4);
}

.wizard-progress-step.active {
    background: #3F5F63 !important;
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.4);
    border-color: #3F5F63 !important;
}

.wizard-progress-step.completed {
    background: #3F5F63 !important;
    color: white !important;
    border-color: #3F5F63 !important;
}

.wizard-progress-step.completed::after {
    content: '\2713';
}

.wizard-progress-line {
    width: 40px;
    height: 3px;
    background: rgba(63, 95, 99, 0.2);
    border-radius: 2px;
    transition: background 0.3s ease;
}

.wizard-progress-line.active {
    background: #3F5F63;
}

/* Wizard Steps */
.wizard-step {
    display: none;
    animation: wizardFadeIn 0.4s ease;
}

.wizard-step.active {
    display: block;
}

@keyframes wizardFadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wizard-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 24px;
    color: var(--apple-text);
}

.wizard-content {
    margin-bottom: 24px;
}

/* Wizard Input */
.wizard-input {
    width: 100%;
    padding: 16px 20px;
    font-size: 1.1rem;
    border: 2px solid rgba(63, 95, 99, 0.3);
    border-radius: 12px;
    background: var(--glass-bg);
    color: var(--apple-text);
    transition: all 0.3s ease;
    text-align: center;
}

.wizard-input:focus {
    outline: none;
    border-color: var(--teal-primary);
    box-shadow: 0 0 0 4px rgba(63, 95, 99, 0.15);
}

.wizard-input::placeholder {
    color: var(--apple-text-secondary);
}

/* Wizard Hinweis (z.B. "Wird nicht gespeichert") */
.wizard-hint {
    font-size: 0.85rem;
    color: var(--apple-text-secondary);
    margin-top: 8px;
    font-style: italic;
    opacity: 0.8;
}

body.dark-mode .wizard-hint {
    color: rgba(255, 255, 255, 0.5);
}

/* Wizard Button */
.wizard-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #3F5F63, #2D4548);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.3);
}

.wizard-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.4);
}

.wizard-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: linear-gradient(135deg, #5A8A8E, #8ABAB8);
    color: rgba(232, 242, 237, 0.62);
    box-shadow: none;
}

.wizard-btn-start {
    font-size: 1.2rem;
    padding: 18px 28px;
    background: linear-gradient(135deg, #3F5F63, #4A7A7E);
}

.wizard-btn-start:hover {
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.5);
}

.wizard-btn-arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.wizard-btn:hover .wizard-btn-arrow {
    transform: translateX(4px);
}

/* Back Button */
.wizard-nav {
    margin-top: 16px;
    text-align: center;
}

.wizard-btn-back {
    padding: 10px 20px;
    font-size: 0.9rem;
    color: var(--apple-text-secondary);
    background: transparent;
    border: 1px solid rgba(63, 95, 99, 0.3);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.wizard-btn-back:hover {
    background: rgba(63, 95, 99, 0.1);
    color: var(--teal-primary);
}

.wizard-btn-back .wizard-btn-arrow {
    font-size: 1rem;
}

.wizard-btn-back:hover .wizard-btn-arrow {
    transform: translateX(-4px);
}

/* Age Group Grid */
.wizard-age-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.wizard-age-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: var(--glass-bg);
    border: 2px solid rgba(63, 95, 99, 0.2);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wizard-age-btn:hover {
    border-color: rgba(63, 95, 99, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(63, 95, 99, 0.15);
}

.wizard-age-btn.selected {
    border-color: var(--teal-primary);
    background: rgba(63, 95, 99, 0.1);
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.25);
}

.wizard-age-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.wizard-age-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--apple-text);
    margin-bottom: 4px;
}

.wizard-age-range {
    font-size: 0.8rem;
    color: var(--apple-text-secondary);
}

/* Avatar Grid */
.wizard-avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    background: none;
}

/* Wizard Module Grid */
.wizard-module-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.wizard-module-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(63, 95, 99, 0.1);
    border: 2px solid rgba(63, 95, 99, 0.3);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.wizard-module-btn:hover {
    background: rgba(63, 95, 99, 0.2);
    border-color: var(--teal-primary);
    transform: translateY(-2px);
}

.wizard-module-btn.selected {
    background: rgba(63, 95, 99, 0.25);
    border-color: var(--teal-primary);
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.3);
}

.wizard-module-icon {
    font-size: 2rem;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-module-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.wizard-module-info {
    flex: 1;
}

.wizard-module-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.wizard-module-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.wizard-module-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.wizard-module-stories {
    font-size: 0.75rem;
    color: var(--teal-primary);
    background: rgba(63, 95, 99, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
}

.wizard-module-badge {
    font-size: 0.7rem;
    color: #fff;
    background: var(--coral);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.wizard-summary-module {
    font-size: 0.9rem;
    color: var(--teal-primary);
    margin-top: 4px;
}

/* Dark Mode für Wizard Module */
.dark-mode .wizard-module-btn {
    background: rgba(63, 95, 99, 0.15);
    border-color: rgba(63, 95, 99, 0.4);
}

.dark-mode .wizard-module-btn:hover {
    background: rgba(63, 95, 99, 0.25);
    border-color: var(--teal-primary);
}

.dark-mode .wizard-module-btn.selected {
    background: rgba(63, 95, 99, 0.3);
    border-color: var(--teal-primary);
}

.dark-mode .wizard-module-name {
    color: #fff;
}

.dark-mode .wizard-module-desc {
    color: rgba(195, 220, 210, 0.68);
}

/* Light Mode für Wizard Module */
body:not(.dark-mode) .wizard-module-btn {
    background: rgba(63, 95, 99, 0.08);
    border-color: rgba(63, 95, 99, 0.25);
}

body:not(.dark-mode) .wizard-module-btn:hover {
    background: rgba(63, 95, 99, 0.15);
}

body:not(.dark-mode) .wizard-module-name {
    color: #1a3a34;
}

body:not(.dark-mode) .wizard-module-desc {
    color: #4a5568;
}

.wizard-avatar {
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    background: transparent;
}

.wizard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.wizard-avatar:hover {
    transform: scale(1.05);
    border-color: rgba(63, 95, 99, 0.5);
}

.wizard-avatar.selected {
    border-color: var(--teal-primary);
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(63, 95, 99, 0.4);
}

.wizard-avatar.selected::after {
    content: '\2714';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: var(--teal-primary);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Summary */
.wizard-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--glass-bg);
    border-radius: 20px;
    border: 1.5px solid rgba(63, 95, 99, 0.32);
}

.wizard-summary-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(63, 95, 99, 0.2);
    background: linear-gradient(135deg, #a8d4d0 0%, #c5e0d8 100%);
}

.wizard-summary-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    
}

.wizard-summary-info {
    flex: 1;
}

.wizard-summary-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--apple-text);
    margin-bottom: 4px;
}

.wizard-summary-age {
    font-size: 1rem;
    color: var(--apple-text-secondary);
}

/* Dark Mode */
body.dark-mode .wizard-input {
    background: rgba(21, 32, 37, 0.8);
    border-color: rgba(90, 154, 146, 0.3);
}

body.dark-mode .wizard-age-btn {
    background: rgba(21, 32, 37, 0.8);
    border-color: rgba(90, 154, 146, 0.2);
}

body.dark-mode .wizard-age-btn.selected {
    background: rgba(90, 154, 146, 0.15);
}

body.dark-mode .wizard-summary {
    background: rgba(21, 32, 37, 0.8);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .wizard-avatar-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .wizard-age-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .wizard-title {
        font-size: 1.3rem;
    }
    
    .wizard-summary {
        flex-direction: column;
        text-align: center;
    }
}
/* ========================================
   AVATAR-BILDER IN DER APP
   ======================================== */

/* Desktop Header Avatar */
.desktop-header-avatar {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Sidebar Person Avatar */
.desktop-person-avatar {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Welcome Avatar */
#welcomeAvatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#welcomeAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* ========================================
   AVATAR HINTERGRUND FIX - Teal für alle Container
   ======================================== */

/* Alle Avatar-Container bekommen Hellblau-Hintergrund 
   damit transparente Stellen nicht dunkel/lila werden */

.wizard-avatar,
.wizard-summary-avatar,
.desktop-header-avatar,
.desktop-person-avatar,
#welcomeAvatar,
.comment-avatar,
.reply-avatar,
#postAvatar,
#inputAvatar,
.wizard-avatar,
.wizard-summary-avatar,
.desktop-header-avatar,
.desktop-person-avatar,
.comment-avatar {
    background: linear-gradient(135deg, #a8d4d0 0%, #c5e0d8 100%) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

/* Bilder innerhalb von Avataren - leicht vergrößern um lila Rand abzuschneiden */
.wizard-avatar img,
.wizard-summary-avatar img,
.desktop-header-avatar img,
.desktop-person-avatar img,
#welcomeAvatar img,
.comment-avatar img,
.reply-avatar img {
    width: 115% !important;
    height: 115% !important;
    margin: -7.5% !important;
    object-fit: cover !important;
    background: linear-gradient(135deg, #a8d4d0 0%, #c5e0d8 100%) !important;
    border-radius: 50% !important;
    
}

/* ========================================
   🌙 PREMIUM DARK MODE 2026 - NEON GLOW Edition
   Dezent aber sichtbar - der perfekte Mittelweg
   ======================================== */

/* === GRUNDLEGENDE DARK MODE FARBEN === */
.app.dark {
    --text-primary: #FFFFFF;
    --text-secondary: #94B8BC;
    --text-muted: #5A8A90;
    --bg-primary: #060D10;
    --bg-elevated: #0A1418;
    --bg-card: rgba(10, 28, 32, 0.92);
    --bg-card-solid: #0A1C20;
    --neon-cyan: #5A9A92;
    --neon-teal: #3A8A80;
    --border-glow: rgba(90, 154, 146, 0.35);
    --border-glow-hover: rgba(90, 154, 146, 0.55);
    --border-glow-active: rgba(90, 154, 146, 0.75);
    --glow-soft: 0 0 12px rgba(90, 154, 146, 0.2);
    --glow-medium: 0 0 18px rgba(90, 154, 146, 0.3);
    --glow-strong: 0 0 25px rgba(90, 154, 146, 0.4);
}

/* === DARK BACKGROUND === */
.app.dark {
    background: linear-gradient(180deg, #0A1418 0%, #060D10 100%) !important;
}

/* === ALLE CARDS & BOXEN === */
.app.dark .meet-card,
.app.dark .decide,
.app.dark .insta-post,
.app.dark .result-card,
.app.dark .quiz-container,
.app.dark .learned-card,
.app.dark .summary-card,
.app.dark .intro-content,
.app.dark .card,
.app.dark .glass-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-glow) !important;
    box-shadow: var(--glow-soft), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Start-form OHNE eigenen Border (ist in intro-content) */
.app.dark .start-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.app.dark .meet-card:hover,
.app.dark .insta-post:hover,
.app.dark .result-card:hover,
.app.dark .card:hover,
.app.dark .glass-card:hover {
    border-color: var(--border-glow-hover) !important;
    box-shadow: var(--glow-medium), 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* === HEADER === */
.app.dark .header {
    background: rgba(6, 13, 16, 0.96) !important;
    border-bottom: 1px solid var(--border-glow) !important;
    box-shadow: 0 2px 15px rgba(90, 154, 146, 0.1) !important;
}

/* === BUTTONS === */
.app.dark .btn {
    border: 1px solid var(--border-glow) !important;
    box-shadow: var(--glow-soft) !important;
    transition: all 0.3s ease !important;
}

.app.dark .btn:hover {
    border-color: var(--border-glow-hover) !important;
    box-shadow: var(--glow-medium) !important;
}

.app.dark .btn-primary {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
    border: 1px solid rgba(90, 154, 146, 0.6) !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.35), 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.app.dark .btn-primary:hover {
    box-shadow: 0 0 22px rgba(90, 154, 146, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* === OPTION CARDS === */
.app.dark .option-card {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-glow) !important;
    box-shadow: var(--glow-soft) !important;
}

.app.dark .option-card:hover {
    border-color: var(--border-glow-hover) !important;
    box-shadow: var(--glow-medium) !important;
    transform: translateY(-2px) !important;
}

.app.dark .option-card.selected {
    border: 2px solid var(--border-glow-active) !important;
    box-shadow: var(--glow-strong), inset 0 0 20px rgba(90, 154, 146, 0.08) !important;
    background: rgba(90, 154, 146, 0.08) !important;
}

/* === STAT BOXEN === */
.app.dark .stat-box,
.app.dark .score-item,
.app.dark .age-btn {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-glow) !important;
    box-shadow: var(--glow-soft) !important;
}

.app.dark .stat-box:hover,
.app.dark .score-item:hover,
.app.dark .age-btn:hover {
    border-color: var(--border-glow-hover) !important;
    box-shadow: var(--glow-medium) !important;
}

.app.dark .age-btn.selected {
    border: 2px solid var(--neon-cyan) !important;
    box-shadow: var(--glow-strong), inset 0 0 15px rgba(90, 154, 146, 0.1) !important;
    background: rgba(90, 154, 146, 0.1) !important;
}

/* === TEXT HIERARCHIE === */
.app.dark h1, .app.dark h2, .app.dark h3,
.app.dark .meet-name,
.app.dark .result-title,
.app.dark .quiz-question,
.app.dark .welcome-name-text {
    color: #FFFFFF !important;
}

.app.dark p,
.app.dark .meet-story,
.app.dark .meet-role,
.app.dark .option-text {
    color: var(--text-secondary) !important;
}

.app.dark .text-muted,
.app.dark .intro-note,
.app.dark label,
.app.dark .age-range {
    color: var(--text-muted) !important;
}

/* === ZAHLEN & WERTE === */
.app.dark .stat-value,
.app.dark .score-value,
.app.dark .age-label {
    color: var(--neon-cyan) !important;
    text-shadow: 0 0 8px rgba(90, 154, 146, 0.4) !important;
    font-weight: 700 !important;
}

/* === PROGRESS BARS === */
.app.dark .progress-fill,
.app.dark .quiz-progress-fill {
    background: linear-gradient(90deg, #3A8A80 0%, #5A9A92 100%) !important;
    box-shadow: 0 0 10px rgba(90, 154, 146, 0.5) !important;
}

.app.dark .progress-bar,
.app.dark .quiz-progress {
    background: rgba(90, 154, 146, 0.1) !important;
    border: 1px solid rgba(90, 154, 146, 0.2) !important;
}

/* === INSTAGRAM POST === */
.app.dark .insta-post {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-glow) !important;
}

.app.dark .insta-post-header-bar {
    border-bottom: 1px solid rgba(90, 154, 146, 0.2) !important;
    border-radius: 16px 16px 0 0;
}

.app.dark .insta-post-actions {
    border-top: 1px solid rgba(90, 154, 146, 0.2) !important;
}

/* === KOMMENTARE === */
.app.dark .comment,
.app.dark .reply {
    background: rgba(10, 28, 32, 0.7) !important;
    border: 1px solid rgba(90, 154, 146, 0.2) !important;
    border-radius: 12px !important;
}

.app.dark .comment:hover {
    border-color: var(--border-glow) !important;
}

/* === QUIZ OPTIONEN === */
.app.dark .quiz-option {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-glow) !important;
}

.app.dark .quiz-option:hover {
    border-color: var(--border-glow-hover) !important;
    box-shadow: var(--glow-soft) !important;
}

.app.dark .quiz-option.correct {
    border: 2px solid #10B981 !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

.app.dark .quiz-option.wrong {
    border: 2px solid #EF4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* === EULEN-HELFER 🦉 === */
.app.dark .owl-helper {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-glow-hover) !important;
    box-shadow: var(--glow-medium) !important;
}

/* === BADGES === */
.app.dark .badge,
.app.dark .skill-counter {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
    border: 1px solid rgba(90, 154, 146, 0.5) !important;
    box-shadow: 0 0 12px rgba(90, 154, 146, 0.3) !important;
}

/* === MODALS === */
.app.dark .modal-content,
.app.dark .reflection-card,
.app.dark .cooldown-modal {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-glow-hover) !important;
    box-shadow: var(--glow-strong), 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* === INPUTS === */
.app.dark input,
.app.dark textarea,
.app.dark select {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-glow) !important;
    color: #FFFFFF !important;
}

.app.dark input:focus,
.app.dark textarea:focus,
.app.dark select:focus {
    border-color: var(--neon-cyan) !important;
    box-shadow: var(--glow-medium) !important;
    outline: none !important;
}

.app.dark input::placeholder {
    color: var(--text-muted) !important;
}

/* === WIZARD === */
.app.dark .wizard-container,
.app.dark .login-screen {
    background: linear-gradient(180deg, #0A1418 0%, #060D10 100%) !important;
}

.app.dark .wizard-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-glow) !important;
    box-shadow: var(--glow-medium), 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

.app.dark .wizard-avatar-option {
    border: 2px solid var(--border-glow) !important;
    background: var(--bg-card-solid) !important;
}

.app.dark .wizard-avatar-option:hover {
    border-color: var(--border-glow-hover) !important;
    box-shadow: var(--glow-soft) !important;
}

.app.dark .wizard-avatar-option.selected {
    border-color: var(--neon-cyan) !important;
    box-shadow: var(--glow-strong) !important;
}

/* === WIZARD PROGRESS STEPS === */
.app.dark .wizard-progress-step {
    color: rgba(90, 154, 146, 0.7) !important;
    background: rgba(90, 154, 146, 0.1) !important;
    border: 1px solid var(--border-glow) !important;
}

.app.dark .wizard-progress-step.active {
    background: var(--neon-cyan) !important;
    color: #060D10 !important;
    border-color: var(--neon-cyan) !important;
    box-shadow: var(--glow-medium) !important;
}

.app.dark .wizard-progress-step.completed {
    background: var(--neon-teal) !important;
    color: #FFFFFF !important;
    border-color: var(--neon-teal) !important;
}

.app.dark .wizard-progress-line {
    background: rgba(90, 154, 146, 0.25) !important;
}

.app.dark .wizard-progress-line.active {
    background: linear-gradient(90deg, #3A8A80, #5A9A92) !important;
    box-shadow: 0 0 8px rgba(90, 154, 146, 0.4) !important;
}

/* === LINKS === */
.app.dark a:not(.btn) {
    color: var(--neon-cyan) !important;
}

/* === ICONS === */
.app.dark .icon,
.app.dark .menu-icon,
.app.dark .age-icon {
    color: var(--neon-cyan) !important;
}

/* === SCROLLBAR === */
.app.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.app.dark ::-webkit-scrollbar-track {
    background: #060D10;
}

.app.dark ::-webkit-scrollbar-thumb {
    background: rgba(90, 154, 146, 0.4);
    border-radius: 4px;
}

.app.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(90, 154, 146, 0.6);
}

/* === DIVIDERS === */
.app.dark hr,
.app.dark .divider {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(90, 154, 146, 0.3) 20%, 
        rgba(90, 154, 146, 0.5) 50%, 
        rgba(90, 154, 146, 0.3) 80%, 
        transparent 100%) !important;
}

/* ========================================
   🎭 MASKOTTCHEN SYSTEM
   3 verschiedene Charaktere nach Altersgruppe:
   - Mimi (Capybara): Kids & Teens (10-17)
   - Dr. Klar: Junge Erwachsene (18-30)
   - Herr Boomer: Erwachsene (30+)
   ======================================== */

/* Basis-Container für alle Maskottchen */
.mimi-avatar {
    width: 100px;
    height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    flex-shrink: 0;
}

/* Größen */
.mimi-avatar.small {
    width: 60px;
    height: 60px;
}

.mimi-avatar.large {
    width: 120px;
    height: 120px;
}

.mimi-avatar.xlarge {
    width: 150px;
    height: 150px;
}

/* Animation */
@keyframes mimi-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.mimi-avatar.animated {
    animation: mimi-bounce 1s ease-in-out infinite;
}

/* Mimi in der Owl-Helper Box - GRÖSSER */
.owl-helper .mimi-avatar {
    width: 80px;
    height: 80px;
}

/* Mimi im Intro - GRÖSSER */
#mimiIntro .mimi-avatar {
    width: 140px;
    height: 140px;
}

/* ========================================
   🫎 MIMI (CAPYBARA) - Kids & Teens (10-17)
   Default + .age-kids + .age-teens
   ======================================== */

/* Default: Mimi für Kids/Teens */
.mimi-avatar,
.mimi-avatar.wave,
.mimi-avatar.waving {
    background-image: url('assets/mimi/mimi-wave.png');
}

.mimi-avatar.celebrate,
.mimi-avatar.happy,
.mimi-avatar.celebrating,
.mimi-avatar.thumbsup {
    background-image: url('assets/mimi/mimi-celebrate.png');
}

.mimi-avatar.think,
.mimi-avatar.thinking,
.mimi-avatar.sad {
    background-image: url('assets/mimi/mimi-think.png');
}

.mimi-avatar.warn,
.mimi-avatar.warning,
.mimi-avatar.alert,
.mimi-avatar.phone,
.mimi-avatar.magnify {
    background-image: url('assets/mimi/mimi-warn.png');
}

.mimi-avatar.explain,
.mimi-avatar.explaining,
.mimi-avatar.teaching,
.mimi-avatar.point,
.mimi-avatar.facepalm,
.mimi-avatar.arms {
    background-image: url('assets/mimi/mimi-explain.png');
}

/* ========================================
   🎓 DR. KLAR - Junge Erwachsene (18-30)
   .age-youngadults
   ======================================== */

.age-youngadults .mimi-avatar,
.age-youngadults .mimi-avatar.wave,
.age-youngadults .mimi-avatar.waving {
    background-image: url('assets/dr-klar/dr-klar-wave.png');
}

.age-youngadults .mimi-avatar.celebrate,
.age-youngadults .mimi-avatar.happy,
.age-youngadults .mimi-avatar.celebrating,
.age-youngadults .mimi-avatar.thumbsup {
    background-image: url('assets/dr-klar/dr-klar-thumbsup.png');
}

.age-youngadults .mimi-avatar.think,
.age-youngadults .mimi-avatar.thinking,
.age-youngadults .mimi-avatar.sad {
    background-image: url('assets/dr-klar/dr-klar-think.png');
}

.age-youngadults .mimi-avatar.warn,
.age-youngadults .mimi-avatar.warning,
.age-youngadults .mimi-avatar.alert,
.age-youngadults .mimi-avatar.phone,
.age-youngadults .mimi-avatar.magnify {
    background-image: url('assets/dr-klar/dr-klar-phone.png');
}

.age-youngadults .mimi-avatar.explain,
.age-youngadults .mimi-avatar.explaining,
.age-youngadults .mimi-avatar.teaching,
.age-youngadults .mimi-avatar.point,
.age-youngadults .mimi-avatar.facepalm,
.age-youngadults .mimi-avatar.arms {
    background-image: url('assets/dr-klar/dr-klar-facepalm.png');
}

/* ========================================
   🕵️ HERR BOOMER - Erwachsene (30+)
   .age-adults
   ======================================== */

.age-adults .mimi-avatar,
.age-adults .mimi-avatar.wave,
.age-adults .mimi-avatar.waving {
    background-image: url('assets/boomer/boomer-wave.png');
}

.age-adults .mimi-avatar.celebrate,
.age-adults .mimi-avatar.happy,
.age-adults .mimi-avatar.celebrating,
.age-adults .mimi-avatar.thumbsup {
    background-image: url('assets/boomer/boomer-point.png');
}

.age-adults .mimi-avatar.think,
.age-adults .mimi-avatar.thinking,
.age-adults .mimi-avatar.sad {
    background-image: url('assets/boomer/boomer-facepalm.png');
}

.age-adults .mimi-avatar.warn,
.age-adults .mimi-avatar.warning,
.age-adults .mimi-avatar.alert,
.age-adults .mimi-avatar.phone,
.age-adults .mimi-avatar.magnify {
    background-image: url('assets/boomer/boomer-magnify.png');
}

.age-adults .mimi-avatar.explain,
.age-adults .mimi-avatar.explaining,
.age-adults .mimi-avatar.teaching,
.age-adults .mimi-avatar.point,
.age-adults .mimi-avatar.facepalm,
.age-adults .mimi-avatar.arms {
    background-image: url('assets/boomer/boomer-arms.png');
}

/* ========================================
   🎭 MASKOTTCHEN SYSTEM - END
   ======================================== */

/* === INTRO EXPLANATION === */
.app.dark #introExplanation li span {
    color: var(--neon-cyan) !important;
}

/* === MIMI INTRO BOX === */
.app.dark #mimiIntro {
    background: rgba(90, 154, 146, 0.1) !important;
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
    box-shadow: 0 0 12px rgba(90, 154, 146, 0.15) !important;
}

.app.dark #mimiIntro div:first-of-type + div > div:first-child {
    color: #FFFFFF !important;
}

.app.dark #mimiIntro div:first-of-type + div > div:last-child {
    color: #94B8BC !important;
}

/* === FLOATING BUTTONS === */
.app.dark .dark-mode-btn,

.app.dark .dark-mode-btn:hover,

/* ========================================
   🖥️ DESKTOP DARK MODE - NEON GLOW Edition
   Alle Elemente außerhalb .app (Sidebars, Header)
   ======================================== */

/* === DESKTOP BODY DARK MODE === */
body.dark-mode {
    background: linear-gradient(180deg, #0A1418 0%, #060D10 100%) !important;
}

/* === DESKTOP HEADER === */
body.dark-mode .desktop-header {
    background: rgba(6, 13, 16, 0.96) !important;
    border-bottom: 1px solid rgba(90, 154, 146, 0.35) !important;
    box-shadow: 0 2px 20px rgba(90, 154, 146, 0.15) !important;
}

body.dark-mode .desktop-header-logo {
    filter: brightness(1.2);
}

body.dark-mode .desktop-header-nav-item {
    color: #94B8BC !important;
}

body.dark-mode .desktop-header-nav-item:hover {
    color: #5A9A92 !important;
    background: rgba(90, 154, 146, 0.1) !important;
}

body.dark-mode .desktop-header-nav-item.active {
    color: #5A9A92 !important;
    background: rgba(90, 154, 146, 0.15) !important;
}

body.dark-mode .desktop-header-user {
    background: rgba(10, 28, 32, 0.9) !important;
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
}

body.dark-mode .desktop-header-user:hover {
    border-color: rgba(90, 154, 146, 0.55) !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .desktop-header-name {
    color: #FFFFFF !important;
}

body.dark-mode .desktop-header-avatar {
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.3) !important;
}

/* === DESKTOP SIDEBAR CARDS (Links & Rechts) === */
body.dark-mode .desktop-sidebar-card {
    background: rgba(10, 28, 32, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
    box-shadow: 0 0 12px rgba(90, 154, 146, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .desktop-sidebar-card:hover {
    border-color: rgba(90, 154, 146, 0.55) !important;
    box-shadow: 0 0 18px rgba(90, 154, 146, 0.3), 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* === SIDEBAR TITLE === */
body.dark-mode .desktop-sidebar-title {
    color: #5A8A90 !important;
}

body.dark-mode .desktop-sidebar-title::before {
    background: linear-gradient(135deg, #3A8A80, #5A9A92) !important;
    box-shadow: 0 0 8px rgba(90, 154, 146, 0.4) !important;
}

/* === PERSON CARD (Benutzer-Profil) === */
body.dark-mode .desktop-person-card {
    background: rgba(10, 28, 32, 0.92) !important;
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
}

body.dark-mode .desktop-person-card::before {
    background: linear-gradient(135deg, rgba(90, 154, 146, 0.15) 0%, rgba(63, 95, 99, 0.1) 100%) !important;
}

body.dark-mode .desktop-person-avatar {
    background: linear-gradient(135deg, #3A8A80 0%, #5A9A92 100%) !important;
    box-shadow: 0 0 20px rgba(90, 154, 146, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .desktop-person-name {
    color: #FFFFFF !important;
}

body.dark-mode .desktop-person-role {
    color: #94B8BC !important;
    background: rgba(90, 154, 146, 0.1) !important;
    border: 1px solid rgba(90, 154, 146, 0.2) !important;
}

/* === PERSON STATS === */
/* === PERSON STATS === */
body.dark-mode .desktop-person-stats {
    border-top-color: rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .desktop-person-stat {
    background: rgba(90, 154, 146, 0.08) !important;
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: 0 0 8px rgba(90, 154, 146, 0.1) !important;
}

body.dark-mode .desktop-person-stat:hover {
    border-color: rgba(90, 154, 146, 0.55) !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.25) !important;
}

body.dark-mode .desktop-person-stat-value {
    color: #5A9A92 !important;
    text-shadow: 0 0 8px rgba(90, 154, 146, 0.4) !important;
}

body.dark-mode .desktop-person-stat-label {
    color: #5A8A90 !important;
}

/* === STORY LIST (Fortschritt) === */
body.dark-mode .desktop-story-item {
    border: 1px solid transparent !important;
}

body.dark-mode .desktop-story-item:hover {
    background: rgba(90, 154, 146, 0.1) !important;
    border-color: rgba(90, 154, 146, 0.25) !important;
}

body.dark-mode .desktop-story-item.current {
    background: rgba(90, 154, 146, 0.12) !important;
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .desktop-story-item.current::before {
    background: linear-gradient(135deg, #3A8A80, #5A9A92) !important;
    box-shadow: 0 0 8px rgba(90, 154, 146, 0.5) !important;
}

body.dark-mode .desktop-story-item.completed {
    background: rgba(90, 154, 146, 0.08) !important;
}

body.dark-mode .desktop-story-item.completed::before {
    background: #3A8A80 !important;
}

/* === STORY STATUS BADGES === */
body.dark-mode .desktop-story-status.pending {
    background: rgba(90, 154, 146, 0.1) !important;
    border: 2px solid rgba(90, 154, 146, 0.3) !important;
    color: #5A8A90 !important;
}

body.dark-mode .desktop-story-status.active {
    background: linear-gradient(135deg, #3A8A80, #5A9A92) !important;
    border: none !important;
    color: #060D10 !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.5) !important;
}

body.dark-mode .desktop-story-status.done {
    background: #3A8A80 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(63, 95, 99, 0.4) !important;
}

/* === STORY TEXT === */
body.dark-mode .desktop-story-name {
    color: #FFFFFF !important;
}

body.dark-mode .desktop-story-desc {
    color: #5A8A90 !important;
}

body.dark-mode .desktop-story-item.current .desktop-story-name {
    color: #5A9A92 !important;
}

/* === RIGHT SIDEBAR - TIPPS === */
body.dark-mode .desktop-tips-card {
    background: rgba(10, 28, 32, 0.92) !important;
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
}

body.dark-mode .desktop-tip-item {
    background: rgba(90, 154, 146, 0.08) !important;
    border: 1px solid rgba(90, 154, 146, 0.2) !important;
    color: #94B8BC !important;
}

body.dark-mode .desktop-tip-item:hover {
    border-color: rgba(90, 154, 146, 0.4) !important;
    background: rgba(90, 154, 146, 0.12) !important;
}

body.dark-mode .desktop-tip-icon {
    color: #5A9A92 !important;
}

/* === RIGHT SIDEBAR - BADGES === */
body.dark-mode .desktop-badge-item {
    background: rgba(90, 154, 146, 0.1) !important;
    border: 1px solid rgba(90, 154, 146, 0.25) !important;
}

body.dark-mode .desktop-badge-item:hover {
    border-color: rgba(90, 154, 146, 0.45) !important;
    box-shadow: 0 0 12px rgba(90, 154, 146, 0.25) !important;
}

body.dark-mode .desktop-badge-item.earned {
    background: rgba(90, 154, 146, 0.15) !important;
    border-color: rgba(90, 154, 146, 0.5) !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .desktop-badge-name {
    color: #FFFFFF !important;
}

body.dark-mode .desktop-badge-desc {
    color: #5A8A90 !important;
}

/* === DESKTOP BADGE ICONS (kleine Kreise) === */
body.dark-mode .desktop-badge {
    background: rgba(10, 28, 32, 0.9) !important;
    border: 1px solid rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .desktop-badge:hover {
    border-color: rgba(90, 154, 146, 0.5) !important;
    box-shadow: 0 0 12px rgba(90, 154, 146, 0.25) !important;
}

body.dark-mode .desktop-badge.earned {
    background: rgba(90, 154, 146, 0.15) !important;
    border-color: rgba(90, 154, 146, 0.5) !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.35) !important;
}

/* === PANEL TITLE IM DARK MODE === */
body.dark-mode .desktop-panel-title {
    color: #FFFFFF !important;
}

body.dark-mode .desktop-panel-title::before {
    background: linear-gradient(135deg, #3A8A80, #5A9A92) !important;
    box-shadow: 0 0 8px rgba(90, 154, 146, 0.4) !important;
}

/* === MOBILE VIEW TOGGLE === */
body.dark-mode .desktop-view-toggle {
    background: rgba(10, 28, 32, 0.9) !important;
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
}

body.dark-mode .desktop-view-toggle:hover {
    border-color: rgba(90, 154, 146, 0.55) !important;
    box-shadow: 0 0 12px rgba(90, 154, 146, 0.25) !important;
}

/* === ALLGEMEINE DESKTOP TEXT-FARBEN === */
body.dark-mode .desktop-sidebar-left,
body.dark-mode .desktop-sidebar-right {
    color: #94B8BC !important;
}

body.dark-mode .desktop-sidebar-left h1,
body.dark-mode .desktop-sidebar-left h2,
body.dark-mode .desktop-sidebar-left h3,
body.dark-mode .desktop-sidebar-right h1,
body.dark-mode .desktop-sidebar-right h2,
body.dark-mode .desktop-sidebar-right h3 {
    color: #FFFFFF !important;
}

/* === DESKTOP SCROLLBAR === */
body.dark-mode .desktop-sidebar-left::-webkit-scrollbar,
body.dark-mode .desktop-sidebar-right::-webkit-scrollbar {
    width: 6px;
}

body.dark-mode .desktop-sidebar-left::-webkit-scrollbar-track,
body.dark-mode .desktop-sidebar-right::-webkit-scrollbar-track {
    background: transparent;
}

body.dark-mode .desktop-sidebar-left::-webkit-scrollbar-thumb,
body.dark-mode .desktop-sidebar-right::-webkit-scrollbar-thumb {
    background: rgba(90, 154, 146, 0.3);
    border-radius: 3px;
}

body.dark-mode .desktop-sidebar-left::-webkit-scrollbar-thumb:hover,
body.dark-mode .desktop-sidebar-right::-webkit-scrollbar-thumb:hover {
    background: rgba(90, 154, 146, 0.5);
}

/* === LOGIN SCREEN === */
body.dark-mode .login-screen,
body.dark-mode #loginScreen {
    background: linear-gradient(180deg, #0A1418 0%, #060D10 100%) !important;
}

body.dark-mode .login-card {
    background: rgba(10, 28, 32, 0.92) !important;
    border: 1px solid rgba(90, 154, 146, 0.35) !important;
    box-shadow: 0 0 25px rgba(90, 154, 146, 0.2), 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* === DESKTOP FOOTER === */
body.dark-mode .desktop-footer {
    background: rgba(6, 13, 16, 0.96) !important;
    border-top: 1px solid rgba(90, 154, 146, 0.25) !important;
    color: #5A8A90 !important;
}

body.dark-mode .desktop-footer a {
    color: #5A9A92 !important;
}

/* === GLOBALE ÜBERSCHREIBUNGEN FÜR KONSISTENZ === */
body.dark-mode {
    --apple-bg: #060D10;
    --apple-bg-secondary: #0A1418;
    --apple-text: #FFFFFF;
    --apple-text-secondary: #94B8BC;
    --apple-border: rgba(90, 154, 146, 0.35);
    --apple-accent: #5A9A92;
}

/* ========================================
   🔧 GLOBALE SCREEN HINTERGRUND FIXES
   Alle alten grauen Gradients → transparent
   ======================================== */

.app.dark .intro-hero,
.app.dark .post-screen,
.app.dark .posted,
.app.dark .learned,
.app.dark .result,
.app.dark .result-content,
.app.dark .summary,
.app.dark .summary-content,
.app.dark .trick-reveal,
.app.dark .consequence,
.app.dark .quiz,
.app.dark .whatif,
.app.dark .screen {
    background: transparent !important;
}

/* ========================================
   ✨ PREMIUM LIGHT MODE - GLASSMORPHISM & SOFT GLOW
   Moderne Effekte für ein WOW-Erlebnis
   ======================================== */

/* Verbesserter Hintergrund mit mehr Tiefe */
body:not(.dark-mode) {
    background: 
        radial-gradient(ellipse at 15% 15%, rgba(63, 95, 99, 0.15) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 20%, rgba(233, 196, 106, 0.12) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 80%, rgba(63, 95, 99, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 70%, rgba(61, 180, 166, 0.08) 0%, transparent 45%),
        linear-gradient(160deg, #FAF9F6 0%, #e8f2ed 30%, #f0f8f5 60%, #FAF9F6 100%);
    background-attachment: fixed;
}

/* ========================================
   FROSTED GLASS CARDS
   ======================================== */

/* Standard Card - Glassmorphism */
body:not(.dark-mode) .card,
body:not(.dark-mode) .welcome-card,
body:not(.dark-mode) .intro-hero,
body:not(.dark-mode) .module-info {
    background: rgba(230, 238, 238, 0.66) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1.5px solid rgba(63, 95, 99, 0.3) !important;
    box-shadow: 
        0 8px 32px rgba(63, 95, 99, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body:not(.dark-mode) .card:hover,
body:not(.dark-mode) .welcome-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 20px 50px rgba(63, 95, 99, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(63, 95, 99, 0.25) !important;
}

/* 🎯 OPTION CARDS - Light Mode Glass-Effekt */
.app:not(.dark) .option-card {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(63, 95, 99, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.app:not(.dark) .option-card:hover {
    transform: translateY(-3px);
    background: rgba(230, 238, 238, 0.66) !important;
    border-color: rgba(63, 95, 99, 0.3) !important;
    box-shadow: 0 8px 24px rgba(63, 95, 99, 0.12);
}

.app:not(.dark) .option-card.selected {
    border: 2px solid #3F5F63 !important;
    background: rgba(195, 220, 210, 0.68) !important;
    box-shadow: 0 8px 24px rgba(63, 95, 99, 0.15);
}

/* Post Container */
body:not(.dark-mode) .post,
body:not(.dark-mode) .post-container {
    background: rgba(195, 220, 210, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    box-shadow: 
        0 10px 40px rgba(63, 95, 99, 0.10),
        0 4px 12px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(195, 220, 210, 0.68);
    border-radius: 20px;
}

/* Screen Containers */
body:not(.dark-mode) .screen,
body:not(.dark-mode) .meet,
body:not(.dark-mode) .decide,
body:not(.dark-mode) .consequence,
body:not(.dark-mode) .quiz,
body:not(.dark-mode) .learned,
body:not(.dark-mode) .result {
    background: rgba(232, 242, 237, 0.62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ========================================
   SOFT GLOW BUTTONS
   ======================================== */

/* Primary Button - Teal Glow */
body:not(.dark-mode) .btn-primary,
body:not(.dark-mode) .btn-start,
body:not(.dark-mode) button[type="submit"] {
    background: linear-gradient(135deg, #3F5F63 0%, #2D4548 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 
        0 4px 15px rgba(63, 95, 99, 0.4),
        0 2px 6px rgba(63, 95, 99, 0.25),
        inset 0 1px 0 rgba(232, 242, 237, 0.35);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

body:not(.dark-mode) .btn-primary::before,
body:not(.dark-mode) .btn-start::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

body:not(.dark-mode) .btn-primary:hover::before,
body:not(.dark-mode) .btn-start:hover::before {
    left: 100%;
}

body:not(.dark-mode) .btn-primary:hover,
body:not(.dark-mode) .btn-start:hover {
    background: linear-gradient(135deg, #4A7A7E 0%, #3F5F63 100%) !important;
    transform: translateY(-3px);
    box-shadow: 
        0 8px 28px rgba(63, 95, 99, 0.5),
        0 4px 12px rgba(63, 95, 99, 0.35),
        inset 0 1px 0 rgba(232, 242, 237, 0.45);
}

body:not(.dark-mode) .btn-primary:active,
body:not(.dark-mode) .btn-start:active {
    transform: translateY(-1px);
    box-shadow: 
        0 4px 15px rgba(63, 95, 99, 0.4),
        0 2px 6px rgba(63, 95, 99, 0.25);
}

/* Secondary Button - Frosted Glass */
body:not(.dark-mode) .btn-secondary,
body:not(.dark-mode) .btn-ghost {
    background: rgba(195, 220, 210, 0.68) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #3F5F63 !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
    transition: all 0.3s ease;
}

body:not(.dark-mode) .btn-secondary:hover,
body:not(.dark-mode) .btn-ghost:hover {
    background: rgba(232, 242, 237, 0.65) !important;
    border-color: rgba(63, 95, 99, 0.4) !important;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(63, 95, 99, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ========================================
   GLOWING BADGES
   ======================================== */

body:not(.dark-mode) .badge,
body:not(.dark-mode) .achievement-badge,
body:not(.dark-mode) .tag {
    background: linear-gradient(135deg, #E9C46A 0%, #ddb85a 100%);
    color: #2D4548;
    box-shadow: 
        0 3px 12px rgba(233, 196, 106, 0.4),
        inset 0 1px 0 rgba(232, 242, 237, 0.62);
    border: none;
    transition: all 0.3s ease;
}

body:not(.dark-mode) .badge:hover,
body:not(.dark-mode) .achievement-badge:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 6px 20px rgba(233, 196, 106, 0.55),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
}

/* Teal Badge Variant */
body:not(.dark-mode) .badge-primary,
body:not(.dark-mode) .badge-teal {
    background: linear-gradient(135deg, #3F5F63 0%, #2D4548 100%);
    color: white;
    box-shadow: 
        0 3px 12px rgba(63, 95, 99, 0.35),
        inset 0 1px 0 rgba(232, 242, 237, 0.35);
}

/* Koralle Badge Variant */
body:not(.dark-mode) .badge-warning,
body:not(.dark-mode) .badge-error {
    background: linear-gradient(135deg, #8B2C32 0%, #d65a3c 100%);
    color: white;
    box-shadow: 
        0 3px 12px rgba(231, 111, 81, 0.35),
        inset 0 1px 0 rgba(232, 242, 237, 0.35);
}

/* ========================================
   GLOWING PROGRESS BARS
   ======================================== */

body:not(.dark-mode) .progress-bar,
body:not(.dark-mode) .progress-wrapper,
body:not(.dark-mode) .story-progress {
    background: rgba(63, 95, 99, 0.12);
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

body:not(.dark-mode) .progress-bar-fill,
body:not(.dark-mode) .progress-fill,
body:not(.dark-mode) .story-progress-fill {
    background: linear-gradient(90deg, #3F5F63 0%, #4A7A7E 50%, #3F5F63 100%);
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
    box-shadow: 
        0 0 15px rgba(63, 95, 99, 0.5),
        0 0 30px rgba(63, 95, 99, 0.25);
    border-radius: 10px;
    position: relative;
}

body:not(.dark-mode) .progress-bar-fill::after,
body:not(.dark-mode) .progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);
    border-radius: 10px 10px 0 0;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   GLASS INPUTS
   ======================================== */

body:not(.dark-mode) input[type="text"],
body:not(.dark-mode) input[type="email"],
body:not(.dark-mode) input[type="password"],
body:not(.dark-mode) textarea,
body:not(.dark-mode) .input-field,
body:not(.dark-mode) .comment-input {
    background: rgba(195, 220, 210, 0.68) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(63, 95, 99, 0.28) !important;
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.04),
        0 1px 0 rgba(232, 242, 237, 0.65);
    transition: all 0.3s ease;
    color: var(--rc-text);
}

body:not(.dark-mode) input[type="text"]:focus,
body:not(.dark-mode) textarea:focus,
body:not(.dark-mode) .input-field:focus,
body:not(.dark-mode) .comment-input:focus {
    outline: none;
    background: rgba(232, 242, 237, 0.65) !important;
    border-color: rgba(63, 95, 99, 0.5) !important;
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.04),
        0 0 0 4px rgba(63, 95, 99, 0.12),
        0 1px 0 rgba(255, 255, 255, 1);
}

/* ========================================
   GLASS HEADER
   ======================================== */

body:not(.dark-mode) .header,
body:not(.dark-mode) .app-header {
    background: rgba(195, 220, 210, 0.72) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(63, 95, 99, 0.1) !important;
    box-shadow: 
        0 4px 20px rgba(63, 95, 99, 0.08),
        inset 0 -1px 0 rgba(232, 242, 237, 0.62);
}

/* ========================================
   EULEN-HELFER 🦉 / MASKOTTCHEN BOX
   ======================================== */

body:not(.dark-mode) .owl-helper,
body:not(.dark-mode) .owl-helper-global {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(63, 95, 99, 0.28) !important;
    box-shadow: 
        0 8px 32px rgba(63, 95, 99, 0.10),
        inset 0 1px 0 rgba(195, 220, 210, 0.68);
}

body:not(.dark-mode) .owl-helper:hover {
    box-shadow: 
        0 12px 40px rgba(63, 95, 99, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ========================================
   QUIZ OPTIONS
   ======================================== */

body:not(.dark-mode) .quiz-option,
body:not(.dark-mode) .option-btn,
body:not(.dark-mode) .answer-option {
    background: rgba(195, 220, 210, 0.68);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(63, 95, 99, 0.28);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
    transition: all 0.3s ease;
}

body:not(.dark-mode) .quiz-option:hover,
body:not(.dark-mode) .option-btn:hover,
body:not(.dark-mode) .answer-option:hover {
    background: rgba(232, 242, 237, 0.65);
    border-color: rgba(63, 95, 99, 0.3);
    transform: translateY(-3px);
    box-shadow: 
        0 10px 30px rgba(63, 95, 99, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

body:not(.dark-mode) .quiz-option.correct,
body:not(.dark-mode) .option-btn.correct {
    background: rgba(63, 95, 99, 0.15);
    border-color: rgba(63, 95, 99, 0.4);
    box-shadow: 
        0 0 20px rgba(63, 95, 99, 0.25),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
}

body:not(.dark-mode) .quiz-option.wrong,
body:not(.dark-mode) .option-btn.wrong {
    background: rgba(231, 111, 81, 0.12);
    border-color: rgba(231, 111, 81, 0.4);
    box-shadow: 
        0 0 20px rgba(231, 111, 81, 0.2),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
}

/* ========================================
   MODALS & OVERLAYS
   ======================================== */

body:not(.dark-mode) .modal,
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .overlay-content {
    background: rgba(230, 238, 238, 0.66) !important;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    box-shadow: 
        0 25px 80px rgba(63, 95, 99, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Modal Backdrop */
body:not(.dark-mode) .modal-backdrop,
body:not(.dark-mode) .overlay {
    background: rgba(63, 95, 99, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ========================================
   TOOLTIP & POPOVER
   ======================================== */

body:not(.dark-mode) .tooltip,
body:not(.dark-mode) .popover {
    background: rgba(195, 220, 210, 0.68);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(63, 95, 99, 0.28);
    box-shadow: 
        0 10px 40px rgba(63, 95, 99, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ========================================
   STORY CARDS / AGE SELECTION
   ======================================== */

body:not(.dark-mode) .age-btn,
body:not(.dark-mode) .story-card,
body:not(.dark-mode) .module-card {
    background: rgba(195, 220, 210, 0.68);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(63, 95, 99, 0.30);
    box-shadow: 
        0 6px 24px rgba(63, 95, 99, 0.08),
        inset 0 1px 0 rgba(195, 220, 210, 0.68);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body:not(.dark-mode) .age-btn:hover,
body:not(.dark-mode) .story-card:hover,
body:not(.dark-mode) .module-card:hover {
    background: rgba(232, 242, 237, 0.65);
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(63, 95, 99, 0.25);
    box-shadow: 
        0 20px 50px rgba(63, 95, 99, 0.18),
        0 8px 20px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

body:not(.dark-mode) .age-btn.selected,
body:not(.dark-mode) .age-btn:active {
    background: rgba(63, 95, 99, 0.12);
    border-color: rgba(63, 95, 99, 0.4);
    box-shadow: 
        0 0 0 3px rgba(63, 95, 99, 0.15),
        0 8px 25px rgba(63, 95, 99, 0.2),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
}

/* ========================================
   COMMENT SECTION
   ======================================== */

body:not(.dark-mode) .comment,
body:not(.dark-mode) .comment-box,
body:not(.dark-mode) .npc-comment {
    background: rgba(230, 238, 238, 0.66);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(63, 95, 99, 0.1);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(232, 242, 237, 0.65);
}

/* ========================================
   ICONS & EMOJI CONTAINERS
   ======================================== */

body:not(.dark-mode) .icon-circle,
body:not(.dark-mode) .emoji-container,
body:not(.dark-mode) .avatar-circle {
    background: rgba(232, 242, 237, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(63, 95, 99, 0.32);
    box-shadow: 
        0 4px 15px rgba(63, 95, 99, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* ========================================
   RESULT & SUMMARY SECTIONS
   ======================================== */

body:not(.dark-mode) .result-card,
body:not(.dark-mode) .summary-card,
body:not(.dark-mode) .stat-card {
    background: rgba(195, 220, 210, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(63, 95, 99, 0.28);
    box-shadow: 
        0 10px 40px rgba(63, 95, 99, 0.08),
        inset 0 1px 0 rgba(195, 220, 210, 0.68);
}

/* ========================================
   DIVIDERS & SEPARATORS
   ======================================== */

body:not(.dark-mode) hr,
body:not(.dark-mode) .divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(63, 95, 99, 0.2) 20%, 
        rgba(63, 95, 99, 0.3) 50%, 
        rgba(63, 95, 99, 0.2) 80%, 
        transparent 100%);
    border: none;
    height: 1px;
}

/* ========================================
   TEXT GLOW EFFECTS
   ======================================== */

body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) .title-main {
    text-shadow: 0 1px 2px rgba(232, 242, 237, 0.62);
}

body:not(.dark-mode) .highlight-text,
body:not(.dark-mode) .accent-text {
    color: #3F5F63;
    text-shadow: 0 0 20px rgba(63, 95, 99, 0.2);
}

/* ========================================
   FLOATING ANIMATION
   ======================================== */

@keyframes float-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

body:not(.dark-mode) .float-animation {
    animation: float-subtle 4s ease-in-out infinite;
}

/* ========================================
   PREMIUM LIGHT MODE - END
   ======================================== */

/* ========================================
   MOBILE VERBESSERUNGEN & FEATURES
   ======================================== */

/* =============================================
   MOBILE KOMPAKTERE DARSTELLUNG
   ============================================= */
@media (max-width: 768px) {
    /* FONT SIZE CONTROLS AUF MOBILE VERSTECKEN */
    .font-size-controls {
        display: none !important;
    }
    
    /* HIGH CONTRAST TOGGLE AUF MOBILE VERSTECKEN */
    
    /* SOUND TOGGLE AUF MOBILE VERSTECKEN */
    
    /* LOGO KLEINER AUF MOBILE */
    .intro-logo {
        width: 100px !important;
        height: 100px !important;
        padding: 10px !important;
        margin-bottom: 12px !important;
    }
    
    /* INTRO TITLE KLEINER */
    .intro-title {
        font-size: 24px !important;
    }
    
    .intro-tagline {
        font-size: 16px !important;
    }
    
    /* ALLGEMEIN KOMPAKTER */
    .screen {
        padding: 12px !important;
    }
    
    /* Cards kompakter */
    .glass-card,
    .card,
    .wizard-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    
    /* Buttons kompakter */
    .btn {
        padding: 12px 16px !important;
        font-size: 15px !important;
    }
    
    .btn-primary {
        padding: 14px 20px !important;
    }
    
    /* Age Cards kompakter */
    .age-card,
    .wizard-age-btn {
        padding: 12px 8px !important;
    }
    
    .age-emoji {
        font-size: 28px !important;
    }
    
    .age-title {
        font-size: 13px !important;
    }
    
    /* Wizard kompakter */
    .wizard-step-title {
        font-size: 18px !important;
    }
    
    .wizard-age-icon {
        font-size: 32px !important;
    }
    
    .wizard-age-label {
        font-size: 12px !important;
    }
    
    /* Story Screens kompakter */
    .meet-photo,
    .meet-avatar {
        width: 80px !important;
        height: 80px !important;
    }
    
    .story-image {
        max-height: 200px !important;
    }
    
    /* Header kompakter */
    .header {
        padding: 8px 12px !important;
    }
    
    .logo {
        height: 24px !important;
        max-width: 120px !important;
    }
    
    /* Progress Bar kompakter */
    .progress-container {
        padding: 8px 12px !important;
    }
    
    .progress-text {
        font-size: 13px !important;
    }
    
    /* Footer kompakter */
    .app-footer {
        padding: 10px !important;
    }
    
    .footer-link {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    
    /* Option Cards kompakter */
    .option-card {
        padding: 12px !important;
    }
    
    .option-card-title {
        font-size: 14px !important;
    }
    
    /* Mascot kleiner */
    .mascot-image,
    .mascot-avatar {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Texte generell etwas kleiner */
    .meet-story,
    .consequence-text,
    .story-text {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
}

/* Extra kompakt für sehr kleine Screens */
@media (max-width: 380px) {
    .intro-logo {
        width: 80px !important;
        height: 80px !important;
    }
    
    .intro-title {
        font-size: 20px !important;
    }
    
    .btn {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
    
    .wizard-age-btn {
        padding: 10px 6px !important;
    }
    
    .age-emoji,
    .wizard-age-icon {
        font-size: 24px !important;
    }
}

/* 1. SAFE AREA SUPPORT (iPhone Notch & Home Indicator) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .app {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .app-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    
    .cta {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* 2. 100vh FIX für iOS Safari */
@supports (min-height: 100dvh) {
    .app,
    .login-screen {
        min-height: 100dvh;
    }
}

/* Fallback für ältere Browser */
@supports not (min-height: 100dvh) {
    .app,
    .login-screen {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/* 3. PULL-TO-REFRESH VERHINDERN */
html, body {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
}

/* 4. SMOOTH SCROLL für iOS */
.screen,
.modal-overlay,
.help-overlay {
    -webkit-overflow-scrolling: touch;
}

/* 5. TOUCH-OPTIMIERUNGEN */
.btn,
.option-card,
.age-btn,
.wizard-age-btn,
.comment-btn,
.empathy-option,
button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* Text-Selection nur bei Textfeldern erlauben */
.app {
    -webkit-user-select: none;
    user-select: none;
}

input, textarea, .story-text, .meet-story, .consequence-text, p {
    -webkit-user-select: text;
    user-select: text;
}

/* 6. GRÖßERE TOUCH-TARGETS für Mobile */
@media (max-width: 768px) {
    /* Footer Links größer */
    .footer-link {
        padding: 12px 16px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Header Buttons größer */
    .header-right button {
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }
    
    /* Lang Button größer */
    .lang-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.2em;
    }
}

/* ========================================
   MOBILE TIP TOAST (unten einblenden)
   ======================================== */
.mobile-tip-toast {
    position: fixed;
    bottom: 80px;
    left: 16px;
    right: 16px;
    background: linear-gradient(135deg, #3F5F63 0%, #2D4548 100%);
    color: white;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.4);
    z-index: 999;
    transform: translateY(150%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.mobile-tip-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.mobile-tip-toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.mobile-tip-toast-text {
    flex: 1;
}

.mobile-tip-toast-close {
    background: rgba(232, 242, 237, 0.3);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-tip-toast-close:active {
    background: rgba(232, 242, 237, 0.4);
}

/* Mit Safe Area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-tip-toast {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* ========================================
   MOBILE BADGES MODAL
   ======================================== */
.mobile-badges-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-badges-modal.show {
    opacity: 1;
    visibility: visible;
}

.mobile-badges-content {
    background: white;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-height: 70vh;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.mobile-badges-modal.show .mobile-badges-content {
    transform: translateY(0);
}

.mobile-badges-handle {
    width: 36px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 auto 16px;
}

.mobile-badges-title {
    font-size: 20px;
    font-weight: 700;
    color: #3F5F63;
    margin-bottom: 16px;
    text-align: center;
}

.mobile-badges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mobile-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: rgba(63, 95, 99, 0.08);
    border-radius: 12px;
    text-align: center;
}

.mobile-badge-item.locked {
    opacity: 0.4;
    filter: grayscale(1);
}

.mobile-badge-icon {
    font-size: 32px;
}

.mobile-badge-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

/* Dark Mode */
.app.dark .mobile-badges-content {
    background: #0f1e1c;
}

.app.dark .mobile-badges-handle {
    background: rgba(232, 242, 237, 0.3);
}

.app.dark .mobile-badge-item {
    background: rgba(90, 154, 146, 0.1);
}

.app.dark .mobile-badge-name {
    color: rgba(232, 242, 237, 0.65);
}

/* Safe Area für Modal */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-badges-content {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* ========================================
   MOBILE PROGRESS MODAL
   ======================================== */
.mobile-progress-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-progress-modal.show {
    opacity: 1;
    visibility: visible;
}

.mobile-progress-content {
    background: white;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-height: 80vh;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-progress-modal.show .mobile-progress-content {
    transform: translateY(0);
}

.mobile-progress-title {
    font-size: 20px;
    font-weight: 700;
    color: #3F5F63;
    margin-bottom: 16px;
    text-align: center;
}

.mobile-progress-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-progress-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(63, 95, 99, 0.05);
    border-radius: 12px;
    border-left: 3px solid #ddd;
}

.mobile-progress-item.completed {
    border-left-color: #3F5F63;
    background: rgba(63, 95, 99, 0.1);
}

.mobile-progress-item.current {
    border-left-color: #E9C46A;
    background: rgba(233, 196, 106, 0.15);
}

.mobile-progress-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ddd;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.mobile-progress-item.completed .mobile-progress-number {
    background: #3F5F63;
}

.mobile-progress-item.current .mobile-progress-number {
    background: #E9C46A;
    color: #333;
}

.mobile-progress-info {
    flex: 1;
    min-width: 0;
}

.mobile-progress-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-progress-status {
    font-size: 11px;
    color: var(--text-secondary, #888);
}

/* Dark Mode */
.app.dark .mobile-progress-content {
    background: #0f1e1c;
}

.app.dark .mobile-progress-item {
    background: rgba(90, 154, 146, 0.05);
}

.app.dark .mobile-progress-name {
    color: rgba(232, 242, 237, 0.65);
}

/* Safe Area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-progress-content {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* ========================================
   MOBILE SCROLL FIX
   Verhindert Auto-Scroll zu fokussierten Buttons
   ======================================== */

/* Entferne scroll-margin von fokussierten Elementen */
button:focus,
.btn:focus,
.option-card:focus,
.age-btn:focus,
.wizard-age-btn:focus {
    scroll-margin: 0 !important;
    scroll-margin-top: 0 !important;
    scroll-snap-margin: 0 !important;
}

/* Verhindere Focus-Scroll auf Mobile */
@media (max-width: 768px) {
    /* Kein Outline das Platz braucht */
    button:focus,
    .btn:focus {
        outline: none !important;
        outline-offset: 0 !important;
    }
    
    /* Screens starten immer oben */
    .screen {
        scroll-margin-top: 0 !important;
    }
    
    /* Body scroll behavior */
    html, body {
        scroll-behavior: auto !important;
    }
    
    /* Verhindere dass Container selbst scrollen */
    .screen.active {
        overflow-anchor: none;
    }
}

/* ========================================
   MOBILE CONFIRM MODAL FIX
   Popup "Moment mal..." scrollbar machen
   ======================================== */

@media (max-width: 768px) {
    /* Modal Overlay - zentriert */
    .modal-overlay {
        padding: 10px !important;
        align-items: center !important;
    }
    
    /* Confirm Modal - Höhe begrenzen und scrollbar */
    .confirm-modal {
        max-height: 85vh !important;
        max-height: 85dvh !important;
        display: flex !important;
        flex-direction: column !important;
        width: 95% !important;
        max-width: 360px !important;
        margin: auto !important;
    }
    
    /* Header kompakter */
    .confirm-header {
        padding: 16px !important;
        flex-shrink: 0 !important;
    }
    
    .confirm-icon {
        font-size: 2.5em !important;
        margin-bottom: 4px !important;
    }
    
    .confirm-title {
        font-size: 18px !important;
    }
    
    .confirm-subtitle {
        font-size: 13px !important;
        margin-top: 4px !important;
    }
    
    /* Body scrollbar */
    .confirm-body {
        padding: 12px 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 !important;
        min-height: 0 !important;
    }
    
    .confirm-intro {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    
    .confirm-post {
        font-size: 14px !important;
        padding: 10px 12px !important;
        margin-bottom: 12px !important;
    }
    
    .confirm-warning {
        font-size: 12px !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
    }
    
    .confirm-question {
        font-size: 15px !important;
        margin-bottom: 0 !important;
    }
    
    /* Actions immer sichtbar am unteren Rand */
    .confirm-actions {
        padding: 12px 16px !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
        background: rgba(232, 242, 237, 0.62) !important;
    }
    
    .confirm-actions .btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    .confirm-actions .btn-secondary {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
}

/* Extra kleine Screens */
@media (max-width: 380px) {
    .confirm-modal {
        max-height: 90vh !important;
        max-height: 90dvh !important;
    }
    
    .confirm-header {
        padding: 12px !important;
    }
    
    .confirm-icon {
        font-size: 2em !important;
    }
    
    .confirm-title {
        font-size: 16px !important;
    }
    
    .confirm-body {
        padding: 10px 12px !important;
    }
    
    .confirm-warning {
        font-size: 11px !important;
        padding: 8px !important;
    }
}

/* ========================================
   MOBILE POPUP STACKING FIX
   Verhindert überlappende Popups
   ======================================== */

/* Z-Index Hierarchie für Popups */
.thought-bubble {
    z-index: 10000 !important;
}

.undo-toast {
    z-index: 10001 !important;
}

.secret-achievement-popup {
    z-index: 10002 !important;
}

.mimikama-easter-egg {
    z-index: 10003 !important;
}

/* Mobile: Popups besser positionieren */
@media (max-width: 768px) {
    /* Achievement Popup - oben rechts, kompakter */
    .secret-achievement-popup {
        top: 60px !important;
        right: 10px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        max-width: 280px !important;
        width: auto !important;
    }
    
    .secret-achievement-popup.show {
        transform: translateX(0) !important;
    }
    
    /* Easter Egg - Mitte des Bildschirms */
    .mimikama-easter-egg {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        max-width: 300px !important;
        width: 90% !important;
    }
    
    .mimikama-easter-egg.show {
        transform: translate(-50%, -50%) scale(1) !important;
    }
    
    /* Thought Bubble - unten links */
    .thought-bubble {
        bottom: 80px !important;
        left: 10px !important;
        right: auto !important;
        top: auto !important;
        max-width: 280px !important;
    }
    
    /* Undo Toast - ganz unten, über Bottom Nav */
    .undo-toast {
        bottom: 70px !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        max-width: 320px !important;
        width: 90% !important;
    }
    
    .undo-toast.active {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ========================================
   CSS BADGE SYSTEM
   6 einheitliche Badges für alle Altersgruppen
   ======================================== */

.css-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: transparent;
}

.css-badge:hover {
    transform: scale(1.1);
}

/* Badge-Icon innerhalb von css-badge */
.css-badge .badge-icon {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Locked/Gesperrt Badge */
.css-badge.badge-locked {
    filter: grayscale(100%) brightness(0.6);
    opacity: 0.5;
    cursor: default;
}

.css-badge.badge-locked:hover {
    transform: none;
}

/* Badge Grid Container */
.badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

/* Badge Item mit Label */
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.badge-label {
    font-size: 11px;
    color: #666;
    text-align: center;
    max-width: 70px;
}

.app.dark .badge-label {
    color: #aaa;
}

/* Kleine Badges für Header/Kompaktansicht */
.css-badge.badge-small {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* Große Badges für Modal/Endscreen */
.css-badge.badge-large {
    width: 80px;
    height: 80px;
    font-size: 36px;
}

/* Badge Tooltip */
.css-badge[title] {
    cursor: pointer;
}

/* Animation für neu freigeschaltetes Badge */
@keyframes badgeUnlock {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

.css-badge.badge-new {
    animation: badgeUnlock 0.6s ease-out;
}

/* Badge Glow für freigeschaltete */
.css-badge.badge-unlocked {
    position: relative;
}

/* CALM DESIGN: Kein Glow mehr, nur Farbe zeigt Status */

/* ========================================
   BADGE INFO BUTTON & MODAL
   ======================================== */

.badge-info-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.2s;
    vertical-align: middle;
    margin-left: 5px;
}

.badge-info-btn:hover {
    opacity: 1;
}

.badge-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.badge-info-modal.show {
    opacity: 1;
    visibility: visible;
}

.badge-info-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.app.dark .badge-info-content {
    background: #0f1e1c;
    color: #e0e0e0;
}

.badge-info-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.6;
}

.badge-info-close:hover {
    opacity: 1;
}

.badge-info-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    text-align: center;
}

.badge-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.badge-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 10px;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.badge-info-item.earned {
    opacity: 1;
    background: #e8f2ed;
}

.app.dark .badge-info-item {
    background: #2a2a3e;
}

.app.dark .badge-info-item.earned {
    background: rgba(63, 95, 99, 0.2);
}

.badge-info-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.badge-info-item .css-badge {
    width: 45px;
    height: 45px;
    font-size: 20px;
    flex-shrink: 0;
}

.badge-info-subtitle {
    text-align: center;
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

.app.dark .badge-info-subtitle {
    color: #aaa;
}

.badge-info-progress {
    text-align: center;
    margin-top: 15px;
    font-weight: 600;
    color: #3F5F63;
    font-size: 16px;
}

.badge-info-text {
    flex: 1;
}

.badge-info-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.badge-info-desc {
    font-size: 12px;
    color: #666;
}

.app.dark .badge-info-desc {
    color: #aaa;
}

/* ========================================
   BADGE UNLOCK POPUP
   Erscheint wenn ein neues Badge freigeschaltet wird
   ======================================== */

/* CALM DESIGN: Dezente Badge-Notification statt großem Popup */
.badge-notification {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0f1e1c;
    color: #fff;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(63, 95, 99, 0.3);
}

.badge-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.badge-notification-icon {
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin-right: 8px;
}

/* Badge kurz hervorheben wenn freigeschaltet */
.css-badge.badge-just-unlocked {
    animation: badgeUnlockPulse 0.6s ease;
    box-shadow: 0 0 20px rgba(63, 95, 99, 0.6);
}

@keyframes badgeUnlockPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Light Mode */
.app:not(.dark) .badge-notification {
    background: #fff;
    color: #0f1e1c;
    border-color: rgba(63, 95, 99, 0.3);
}

/* ========================================
   MIMI TOAST - Prominente Maskottchen-Nachrichten
   DEAKTIVIERT - Inline Mimi reicht
   ======================================== */

.mimi-toast {
    display: none !important; /* CALM DESIGN: Toast deaktiviert */
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
    border: 2px solid #3F5F63;
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 
        0 10px 40px rgba(63, 95, 99, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    max-width: 90%;
    width: auto;
    min-width: 280px;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
}

.mimi-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.mimi-toast-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #E9C46A 0%, #F4A261 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mimiWiggle 0.5s ease;
}

@keyframes mimiWiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

.mimi-toast-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mimi-toast-content {
    flex: 1;
    min-width: 0;
}

.mimi-toast-name {
    font-size: 11px;
    font-weight: 700;
    color: #3F5F63;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.mimi-toast-text {
    font-size: 14px;
    color: #0f1e1c;
    line-height: 1.4;
    font-weight: 500;
}

.mimi-toast-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.2s;
}

.mimi-toast-close:hover {
    color: #333;
}

/* Success Variante */
.mimi-toast-success {
    border-color: #3F5F63;
}

.mimi-toast-success .mimi-toast-avatar {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
}

/* Info Variante */
.mimi-toast-info {
    border-color: #3F5F63;
}

.mimi-toast-info .mimi-toast-avatar {
    background: linear-gradient(135deg, #3F5F63 0%, #2D4548 100%);
}

/* Dark Mode */
.app.dark .mimi-toast {
    background: linear-gradient(135deg, #0f1e1c 0%, #152320 100%);
    border-color: #3A8A80;
}

.app.dark .mimi-toast-text {
    color: #e0e0e0;
}

.app.dark .mimi-toast-close {
    color: #666;
}

.app.dark .mimi-toast-close:hover {
    color: #fff;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .mimi-toast {
        top: 10px;
        left: 10px;
        right: 10px;
        transform: translateX(0) translateY(-100px);
        max-width: none;
        min-width: auto;
    }
    
    .mimi-toast.show {
        transform: translateX(0) translateY(0);
    }
}

/* ========================================
   DARK MODE OVERRIDES - ALLE POPUPS
   Stellt sicher dass alle Modals dunkel sind
   ======================================== */

/* Confirm Modal - Komplett dunkel */
body.dark-mode .confirm-modal,
body.dark-mode .modal.confirm-modal,
.app.dark .confirm-modal,
.app.dark .modal.confirm-modal,
html.dark .confirm-modal {
    background: #0f1e1c !important;
    border: 1px solid rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .confirm-body,
.app.dark .confirm-body,
html.dark .confirm-body {
    background: #0f1e1c !important;
    color: #E8E8E8 !important;
}

body.dark-mode .confirm-intro,
.app.dark .confirm-intro,
html.dark .confirm-intro {
    color: rgba(195, 220, 210, 0.68) !important;
}

body.dark-mode .confirm-post,
.app.dark .confirm-post,
html.dark .confirm-post {
    background: rgba(63, 95, 99, 0.15) !important;
    color: #E8E8E8 !important;
    border: 1px solid rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .confirm-warning,
.app.dark .confirm-warning,
html.dark .confirm-warning {
    background: rgba(63, 95, 99, 0.15) !important;
    color: #E8E8E8 !important;
    border-left-color: #3A8A80 !important;
}

body.dark-mode .confirm-question,
.app.dark .confirm-question,
html.dark .confirm-question {
    color: #E8E8E8 !important;
}

body.dark-mode .confirm-actions,
.app.dark .confirm-actions,
html.dark .confirm-actions {
    background: #0f1e1c !important;
}

body.dark-mode .confirm-actions .btn-secondary,
.app.dark .confirm-actions .btn-secondary,
html.dark .confirm-actions .btn-secondary {
    background: rgba(63, 95, 99, 0.1) !important;
    border: 1px solid rgba(90, 154, 146, 0.3) !important;
    color: #E8E8E8 !important;
}

/* Legal Modal */
body.dark-mode .legal-modal,
.app.dark .legal-modal,
html.dark .legal-modal {
    background: #0f1e1c !important;
}

body.dark-mode .legal-modal .modal-body,
.app.dark .legal-modal .modal-body,
html.dark .legal-modal .modal-body {
    background: #0f1e1c !important;
    color: #E8E8E8 !important;
}

/* Module Modal */
body.dark-mode .module-modal,
.app.dark .module-modal,
html.dark .module-modal {
    background: #0f1e1c !important;
}

body.dark-mode .module-header,
.app.dark .module-header,
html.dark .module-header {
    background: #0f1e1c !important;
    color: #E8E8E8 !important;
}

/* Badge Info Modal */
body.dark-mode .badge-info-content,
.app.dark .badge-info-content,
html.dark .badge-info-content {
    background: #0f1e1c !important;
    color: #E8E8E8 !important;
}

body.dark-mode .badge-info-item,
.app.dark .badge-info-item,
html.dark .badge-info-item {
    background: rgba(63, 95, 99, 0.1) !important;
}

body.dark-mode .badge-info-desc,
.app.dark .badge-info-desc,
html.dark .badge-info-desc {
    color: #aaa !important;
}

/* ========================================
   DARK MODE - KOMPLETTER FIX ALLER POPUPS
   body.dark-mode wird auch verwendet!
   ======================================== */

/* MIMI TOAST - Dark Mode */
body.dark-mode .mimi-toast,
.app.dark .mimi-toast,
.dark .mimi-toast {
    background: #0f1e1c !important;
    border-color: rgba(90, 154, 146, 0.4) !important;
}

body.dark-mode .mimi-toast-text,
.app.dark .mimi-toast-text,
.dark .mimi-toast-text {
    color: #E8E8E8 !important;
}

body.dark-mode .mimi-toast-name,
.app.dark .mimi-toast-name,
.dark .mimi-toast-name {
    color: #3A8A80 !important;
}

/* IMPRESSUM & DATENSCHUTZ MODAL - Dark Mode */
body.dark-mode .legal-modal,
body.dark-mode .modal.legal-modal,
.app.dark .legal-modal,
.dark .legal-modal {
    background: #0f1e1c !important;
    border: 1px solid rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .legal-modal .modal-header,
.app.dark .legal-modal .modal-header,
.dark .legal-modal .modal-header {
    background: #0f1e1c !important;
    border-bottom-color: rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .legal-modal .modal-title,
.app.dark .legal-modal .modal-title,
.dark .legal-modal .modal-title {
    color: #3A8A80 !important;
}

body.dark-mode .legal-modal .modal-body,
.app.dark .legal-modal .modal-body,
.dark .legal-modal .modal-body {
    background: #0f1e1c !important;
    color: #E8E8E8 !important;
}

body.dark-mode .legal-modal h4,
.app.dark .legal-modal h4,
.dark .legal-modal h4 {
    color: #3A8A80 !important;
}

body.dark-mode .legal-modal p,
.app.dark .legal-modal p,
.dark .legal-modal p {
    color: #c0c0c0 !important;
}

body.dark-mode .legal-modal a,
.app.dark .legal-modal a,
.dark .legal-modal a {
    color: #B8D8D0 !important;
}

body.dark-mode .legal-modal .modal-close,
.app.dark .legal-modal .modal-close,
.dark .legal-modal .modal-close {
    background: rgba(90, 154, 146, 0.15) !important;
    color: #E8E8E8 !important;
}

/* Legal Highlight Box (grüner Kasten "Keine Datenspeicherung") */
body.dark-mode .legal-highlight,
.app.dark .legal-highlight,
.dark .legal-highlight {
    background: rgba(63, 95, 99, 0.15) !important;
    border-color: rgba(90, 154, 146, 0.4) !important;
}

body.dark-mode .legal-highlight p,
body.dark-mode .legal-highlight strong,
.app.dark .legal-highlight p,
.app.dark .legal-highlight strong,
.dark .legal-highlight p,
.dark .legal-highlight strong {
    color: #E8E8E8 !important;
}

/* INFO MODAL - Dark Mode */
body.dark-mode #infoModal .legal-modal,
.app.dark #infoModal .legal-modal,
.dark #infoModal .legal-modal {
    background: #0f1e1c !important;
}

/* EULEN-HELFER 🦉 / TIPP BOX - Dark Mode */
body.dark-mode .owl-helper,
.app.dark .owl-helper,
.dark .owl-helper {
    background: rgba(63, 95, 99, 0.15) !important;
    border-color: rgba(90, 154, 146, 0.4) !important;
}

body.dark-mode .owl-helper-text,
.app.dark .owl-helper-text,
.dark .owl-helper-text {
    color: #E8E8E8 !important;
}

body.dark-mode .owl-helper-name,
.app.dark .owl-helper-name,
.dark .owl-helper-name {
    color: #3A8A80 !important;
}

/* SECRET ACHIEVEMENT POPUP - Dark Mode */
body.dark-mode .secret-achievement-popup,
.app.dark .secret-achievement-popup,
.dark .secret-achievement-popup {
    background: #0f1e1c !important;
    border-color: rgba(90, 154, 146, 0.4) !important;
}

body.dark-mode .secret-achievement-popup h4,
body.dark-mode .secret-achievement-popup p,
.app.dark .secret-achievement-popup h4,
.app.dark .secret-achievement-popup p,
.dark .secret-achievement-popup h4,
.dark .secret-achievement-popup p {
    color: #E8E8E8 !important;
}

/* DM POPUP - Vorsicht vor Fremden - Dark Mode */
body.dark-mode .dm-popup,
.app.dark .dm-popup,
.dark .dm-popup {
    background: #0f1e1c !important;
    border-color: rgba(90, 154, 146, 0.4) !important;
}

body.dark-mode .dm-popup-title,
body.dark-mode .dm-popup-body,
.app.dark .dm-popup-title,
.app.dark .dm-popup-body,
.dark .dm-popup-title,
.dark .dm-popup-body {
    color: #E8E8E8 !important;
}

/* HELP MODAL - Dark Mode */
body.dark-mode .help-modal,
.app.dark .help-modal,
.dark .help-modal {
    background: #0f1e1c !important;
}

body.dark-mode .help-modal h3,
body.dark-mode .help-modal p,
.app.dark .help-modal h3,
.app.dark .help-modal p,
.dark .help-modal h3,
.dark .help-modal p {
    color: #E8E8E8 !important;
}

/* ABOUT MODAL - Dark Mode */
body.dark-mode .about-modal,
.app.dark .about-modal,
.dark .about-modal {
    background: #0f1e1c !important;
}

/* GENERAL MODAL DARK FIX */
body.dark-mode .modal,
.app.dark .modal:not(.confirm-modal):not(.module-modal):not(.legal-modal) {
    background: #0f1e1c !important;
}

/* MIMI TOAST AVATAR - Zeigt Maskottchen-Bild */
.mimi-toast-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ========================================
   🎯 FINALE LIGHT MODE OVERRIDES
   Diese Regeln haben höchste Priorität!
   ======================================== */

/* Option Cards im Light Mode - GLASS EFFEKT */
.app:not(.dark) .option-card,
.app:not(.dark) .options .option-card,
body:not(.dark-mode) .option-card,
html:not(.dark) .option-card {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(63, 95, 99, 0.08) !important;
}

.app:not(.dark) .option-card:hover,
body:not(.dark-mode) .option-card:hover {
    background: rgba(230, 238, 238, 0.66) !important;
    border-color: rgba(63, 95, 99, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(63, 95, 99, 0.12) !important;
}

/* ========================================
   🎉 DU HAST BIS HIERHER GESCROLLT?
   
   Respekt! Du bist entweder:
   a) Ein Entwickler auf der Suche nach Bugs
   b) Sehr neugierig
   c) Komplett verloren
   
   Wie auch immer - schönen Tag noch!
   
   PS: Kaffee-Spenden an tom@mimikama.org
   ======================================== */

/* ========================================
   INTRO-SCREEN: Dachmarke & Untertitel
   ======================================== */

.intro-tagline {
    font-size: 0.9em;
    color: var(--rc-text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: center;
}

.intro-subtitle {
    font-size: 1.2em;
    color: var(--rc-text);
    margin-top: 16px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Dark Mode */
.app.dark .intro-tagline {
    color: rgba(195, 220, 210, 0.68);
}

.app.dark .intro-subtitle {
    color: #E8E8E8;
}

/* Login-Screen Dachmarke */
.login-dachmarke {
    font-size: 0.85em;
    color: var(--rc-text-secondary);
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-align: center;
}

.app.dark .login-dachmarke {
    color: rgba(232, 242, 237, 0.65);
}

/* ========================================
   HEADER CENTER: Posting-Simulator
   ======================================== */

.desktop-header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.header-subtitle {
    font-size: 1em;
    font-weight: 600;
    color: var(--rc-text-secondary);
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* Dark Mode */
.app.dark .header-subtitle,
body.dark-mode .header-subtitle {
    color: rgba(195, 220, 210, 0.68);
}

/* Mobile: ausblenden */
@media (max-width: 1024px) {
    .desktop-header-center {
        display: none;
    }
}

/* ========================================
   PROMINENTES MASKOTTCHEN INTRO
   Sprechblase mit großem Avatar
   ======================================== */

.mascot-intro-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 16px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.12) 0%, rgba(233, 196, 106, 0.08) 100%);
    border-radius: 20px;
    border: 2px solid rgba(63, 95, 99, 0.25);
    animation: mascotFadeIn 0.6s ease-out;
}

@keyframes mascotFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mascot-intro-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mimi-avatar.xxlarge {
    width: 120px;
    height: 120px;
    animation: mascotBounce 2s ease-in-out infinite;
}

@keyframes mascotBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.mascot-name-badge {
    margin-top: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #3F5F63 0%, #2D4548 100%);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.3);
}

.mascot-speech-bubble {
    position: relative;
    width: 100%;
    max-width: 320px;
}

.mascot-speech-content {
    background: white;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1.5px solid rgba(63, 95, 99, 0.28);
    text-align: center;
}

.mascot-speech-arrow {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid white;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.05));
}

.mascot-greeting {
    font-size: 1.2rem;
    font-weight: 700;
    color: #3F5F63;
    margin-bottom: 8px;
}

.mascot-message {
    font-size: 0.95rem;
    color: var(--rc-text-secondary, #666);
    line-height: 1.5;
}

/* Herr Boomer Style (Adults) */
.mascot-intro-card.style-adults {
    background: linear-gradient(135deg, rgba(139, 90, 43, 0.12) 0%, rgba(210, 180, 140, 0.1) 100%);
    border-color: rgba(139, 90, 43, 0.25);
}

.mascot-intro-card.style-adults .mascot-name-badge {
    background: linear-gradient(135deg, #8B5A2B 0%, #6B4423 100%);
}

.mascot-intro-card.style-adults .mascot-greeting {
    color: #8B5A2B;
}

/* Dr. Klar Style (Young Adults) */
.mascot-intro-card.style-young {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.15) 0%, rgba(184, 220, 210, 0.1) 100%);
}

/* Dark Mode */
body.dark-mode .mascot-intro-card,
.app.dark .mascot-intro-card {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.15) 0%, rgba(233, 196, 106, 0.08) 100%);
    border-color: rgba(90, 154, 146, 0.3);
}

body.dark-mode .mascot-speech-content,
.app.dark .mascot-speech-content {
    background: rgba(30, 40, 50, 0.95);
    border-color: rgba(90, 154, 146, 0.2);
}

body.dark-mode .mascot-speech-arrow,
.app.dark .mascot-speech-arrow {
    border-bottom-color: rgba(30, 40, 50, 0.95);
}

body.dark-mode .mascot-message,
.app.dark .mascot-message {
    color: rgba(232, 242, 237, 0.62);
}

/* Mobile Optimierung */
@media (max-width: 480px) {
    .mimi-avatar.xxlarge {
        width: 100px;
        height: 100px;
    }
    
    .mascot-intro-card {
        padding: 20px 12px;
    }
    
    .mascot-greeting {
        font-size: 1.1rem;
    }
    
    .mascot-message {
        font-size: 0.9rem;
    }
}

/* ========================================
   POST INTERAKTIONS-BUTTONS
   Report als Fake & Teilen mit Konsequenz
   ======================================== */

.post-interaction-bar {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 8px;
    background: rgba(63, 95, 99, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(63, 95, 99, 0.1);
}

.interaction-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.interaction-btn-icon {
    font-size: 1.1rem;
}

.interaction-btn-text {
    white-space: nowrap;
}

/* Report Button */
.interaction-btn.report-btn {
    background: linear-gradient(135deg, rgba(231, 111, 81, 0.1) 0%, rgba(231, 111, 81, 0.05) 100%);
    color: #8B2C32;
    border: 1px solid rgba(231, 111, 81, 0.2);
}

.interaction-btn.report-btn:hover {
    background: linear-gradient(135deg, rgba(231, 111, 81, 0.2) 0%, rgba(231, 111, 81, 0.1) 100%);
    transform: translateY(-1px);
}

.interaction-btn.report-btn:active {
    transform: scale(0.98);
}

.interaction-btn.report-btn.reported {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.15) 0%, rgba(63, 95, 99, 0.1) 100%);
    color: #3F5F63;
    border-color: rgba(63, 95, 99, 0.3);
    cursor: default;
}

/* Share Button */
.interaction-btn.share-btn {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.1) 0%, rgba(63, 95, 99, 0.05) 100%);
    color: #3F5F63;
    border: 1.5px solid rgba(63, 95, 99, 0.32);
}

.interaction-btn.share-btn:hover {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.2) 0%, rgba(63, 95, 99, 0.1) 100%);
    transform: translateY(-1px);
}

.interaction-btn.share-btn:active {
    transform: scale(0.98);
}

.interaction-btn.share-btn.shared {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.2) 0%, rgba(63, 95, 99, 0.15) 100%);
    color: #2D4548;
    border-color: rgba(63, 95, 99, 0.4);
}

/* Save Button Animation */
.insta-action-icon.saved {
    color: #3F5F63;
    animation: savePopIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes savePopIn {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Dark Mode */
body.dark-mode .post-interaction-bar,
.app.dark .post-interaction-bar {
    background: rgba(90, 154, 146, 0.08);
    border-color: rgba(90, 154, 146, 0.15);
}

body.dark-mode .interaction-btn.report-btn,
.app.dark .interaction-btn.report-btn {
    background: rgba(231, 111, 81, 0.15);
    color: #F4A261;
    border-color: rgba(231, 111, 81, 0.25);
}

body.dark-mode .interaction-btn.share-btn,
.app.dark .interaction-btn.share-btn {
    background: rgba(90, 154, 146, 0.15);
    color: #5A9A92;
    border-color: rgba(90, 154, 146, 0.25);
}

/* Facebook Theme (Adults 30+) */
.app.theme-facebook .post-interaction-bar {
    background: rgba(24, 119, 242, 0.05);
    border-color: rgba(24, 119, 242, 0.1);
}

.app.theme-facebook .interaction-btn.report-btn {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.2);
}

.app.theme-facebook .interaction-btn.share-btn {
    background: rgba(24, 119, 242, 0.1);
    color: #1877F2;
    border-color: rgba(24, 119, 242, 0.2);
}

/* Mobile Optimierung */
@media (max-width: 400px) {
    .post-interaction-bar {
        flex-direction: column;
        gap: 8px;
    }
    
    .interaction-btn {
        width: 100%;
    }
    
    .interaction-btn-text {
        font-size: 0.8rem;
    }
}
/* ============================================== */
/* LIGHT MODE: Grafik-Farbanpassung (Teal → Blau) */
/* ============================================== */
/* Diese Filter verschieben türkise Elemente in Grafiken zu Blau */
/* Nur im Light Mode aktiv - Dark Mode bleibt unverändert */

/* Avatar-Bilder - türkiser Hintergrund → blau */
body:not(.dark-mode) .wizard-avatar img,
body:not(.dark-mode) .wizard-summary-avatar img,
body:not(.dark-mode) .desktop-header-avatar img,
body:not(.dark-mode) .desktop-person-avatar img,
body:not(.dark-mode) .avatar-option img,
body:not(.dark-mode) .selected-avatar img {
    
}

/* Altersgruppen-Icons */
body:not(.dark-mode) .wizard-age-option img,
body:not(.dark-mode) .age-category img,
body:not(.dark-mode) img[src*="icon_age_"] {
    
}

/* Modul-Icons */
body:not(.dark-mode) .wizard-module-icon img,
body:not(.dark-mode) .module-option-icon img,
body:not(.dark-mode) .desktop-module-icon img {
    
}

/* Story/Trick Icons */
body:not(.dark-mode) img[src*="trick_"] {
    
}

/* Allgemeine UI-Icons mit türkis */
body:not(.dark-mode) img[src*="icon_tip"],
body:not(.dark-mode) img[src*="icon_think"],
body:not(.dark-mode) img[src*="icon_write"] {
    
}

/* App.dark Override - KEINE Filter im Dark Mode */
.app.dark .wizard-avatar img,
.app.dark .wizard-summary-avatar img,
.app.dark .desktop-header-avatar img,
.app.dark .desktop-person-avatar img,
.app.dark .avatar-option img,
.app.dark .selected-avatar img,
.app.dark .wizard-age-option img,
.app.dark .age-category img,
.app.dark .wizard-module-icon img,
.app.dark .module-option-icon img,
.app.dark .desktop-module-icon img,
.app.dark img[src*="icon_"],
.app.dark img[src*="trick_"] {
    filter: none !important;
}


/* ============================================== */
/* DARK MODE FIX: body.dark-mode Overrides       */
/* ============================================== */
/* Viele Elemente sind außerhalb von .app und brauchen body.dark-mode Regeln */

/* Mascot/Companion Name Badge */
body.dark-mode .mascot-name-badge {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
    box-shadow: 0 4px 12px rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .mascot-greeting {
    color: #5A9A92 !important;
}

/* Buttons - Primary */
body.dark-mode .btn-primary {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
    box-shadow: 0 4px 20px rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .btn-primary:hover {
    box-shadow: 0 6px 30px rgba(90, 154, 146, 0.4) !important;
}

/* Buttons - Secondary */
body.dark-mode .btn-secondary {
    background: rgba(90, 154, 146, 0.08) !important;
    color: #5A9A92 !important;
    border-color: rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .btn-secondary:hover {
    background: rgba(90, 154, 146, 0.15) !important;
    border-color: rgba(90, 154, 146, 0.5) !important;
}

/* Wizard Button */
body.dark-mode .wizard-btn {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
    box-shadow: 0 4px 15px rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .wizard-btn:hover:not(:disabled) {
    box-shadow: 0 8px 25px rgba(90, 154, 146, 0.4) !important;
}

body.dark-mode .wizard-btn:disabled {
    background: linear-gradient(135deg, rgba(90, 154, 146, 0.3), rgba(90, 154, 146, 0.2)) !important;
}

/* Option Cards/Buttons */
body.dark-mode .option-card.selected,
body.dark-mode .option-btn.selected {
    border-color: #5A9A92 !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.3) !important;
}

/* Confirm Actions */
body.dark-mode .confirm-header {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
}

body.dark-mode .confirm-actions .btn-primary {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
}

/* Post Badge / Label */
body.dark-mode .post-label,
body.dark-mode .post-badge,
body.dark-mode .dein-post-badge {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
}

/* Quiz/Learned Buttons */
body.dark-mode .learned-btn-primary,
body.dark-mode .quiz-btn-yes,
body.dark-mode .trick-btn-yes {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
}

body.dark-mode .learned-btn-secondary,
body.dark-mode .quiz-btn-no,
body.dark-mode .trick-btn-no {
    color: #5A9A92 !important;
    border-color: rgba(90, 154, 146, 0.4) !important;
}

/* Person/Character Header Lines */
body.dark-mode .person-line,
body.dark-mode .character-line,
body.dark-mode .meet-separator,
body.dark-mode .story-divider {
    background: linear-gradient(90deg, transparent, #3A8A80, transparent) !important;
}

/* Progress Steps */
body.dark-mode .wizard-progress-step.active,
body.dark-mode .wizard-progress-step.completed {
    background: #3A8A80 !important;
    border-color: #3A8A80 !important;
}

body.dark-mode .wizard-progress-line.active {
    background: #3A8A80 !important;
}

/* Avatar Selection */
body.dark-mode .avatar-btn.selected,
body.dark-mode .avatar-option.selected {
    border-color: #5A9A92 !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.4) !important;
}

/* Age/Category Selection */
body.dark-mode .age-btn.selected,
body.dark-mode .age-card.selected,
body.dark-mode .category-card.selected {
    border-color: #5A9A92 !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.3) !important;
}

/* Module Options */
body.dark-mode .module-option.selected,
body.dark-mode .module-option.recommended {
    border-color: rgba(90, 154, 146, 0.5) !important;
}

body.dark-mode .module-option-badge {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
}

/* Highlights & Accents */
body.dark-mode .intro-highlight,
body.dark-mode .text-highlight,
body.dark-mode .accent-text {
    color: #5A9A92 !important;
}

/* Borders & Lines */
body.dark-mode .section-divider,
body.dark-mode .content-divider,
body.dark-mode hr {
    border-color: rgba(90, 154, 146, 0.2) !important;
}

/* Trennlinie unter Person-Namen (Paul, 9) */
body.dark-mode .person-header::after,
body.dark-mode .character-intro::after,
body.dark-mode .meet-info::after {
    background: linear-gradient(90deg, #3A8A80 0%, #5A9A92 100%) !important;
}


/* Desktop Person Styles - Dark Mode */
body.dark-mode .desktop-person-stats {
    border-top-color: rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .desktop-person-stat {
    background: rgba(90, 154, 146, 0.08) !important;
    border-color: rgba(90, 154, 146, 0.15) !important;
}

body.dark-mode .desktop-person-stat:hover {
    border-color: rgba(90, 154, 146, 0.35) !important;
    box-shadow: 0 4px 12px rgba(90, 154, 146, 0.15) !important;
}

body.dark-mode .desktop-person-stat-value {
    background: linear-gradient(135deg, #5A9A92, #4A8A85) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

body.dark-mode .desktop-person-role {
    background: linear-gradient(135deg, rgba(90, 154, 146, 0.15), rgba(90, 154, 146, 0.1)) !important;
}

body.dark-mode .desktop-person-avatar {
    box-shadow: 0 8px 24px rgba(90, 154, 146, 0.2) !important;
}

/* Story Intro Line (die blaue Linie unter "Paul, 9") */
body.dark-mode .story-intro-line,
body.dark-mode .person-intro-line,
body.dark-mode .meet-intro-bar {
    background: linear-gradient(90deg, #3A8A80, #5A9A92) !important;
}

/* Header mit Gradient - Blau zu Teal im Dark Mode */
body.dark-mode .meet-header,
body.dark-mode .story-header,
body.dark-mode .section-header.gradient {
    background: linear-gradient(135deg, rgba(42, 157, 143, 0.2), rgba(90, 154, 146, 0.1)) !important;
}

/* Option Select Button */
body.dark-mode .option-select-btn,
body.dark-mode .select-option-btn,
body.dark-mode .choice-select-btn {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
    box-shadow: 0 4px 15px rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .option-select-btn:hover,
body.dark-mode .select-option-btn:hover {
    box-shadow: 0 6px 20px rgba(90, 154, 146, 0.4) !important;
}


/* Story Progress Bar - Dark Mode */
body.dark-mode .story-progress,
body.dark-mode .progress-bar,
body.dark-mode .progress-wrapper {
    background: rgba(90, 154, 146, 0.15) !important;
}

body.dark-mode .story-progress-fill,
body.dark-mode .progress-bar-fill,
body.dark-mode .progress-fill {
    background: linear-gradient(90deg, #3A8A80 0%, #5A9A92 50%, #3A8A80 100%) !important;
    box-shadow: 0 0 15px rgba(90, 154, 146, 0.5) !important;
}

/* Die blaue Highlight-Linie unter Person-Namen */
body.dark-mode .person-highlight,
body.dark-mode .story-highlight,
body.dark-mode .intro-highlight-bar,
body.dark-mode .accent-bar {
    background: linear-gradient(90deg, #3A8A80, #5A9A92) !important;
}

/* Post Label "DEIN POST" Badge */
body.dark-mode .confirm-label,
body.dark-mode .post-type-label,
body.dark-mode .your-post-label {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
    color: white !important;
}

/* Quiz Ergebnis Buttons */
body.dark-mode .result-btn-primary,
body.dark-mode .feedback-btn-yes,
body.dark-mode [class*="btn"][class*="yes"],
body.dark-mode [class*="btn"][class*="primary"]:not(.btn-donate-primary) {
    background: linear-gradient(135deg, #3A8A80 0%, #4A8A85 100%) !important;
}

body.dark-mode .result-btn-secondary,
body.dark-mode .feedback-btn-no,
body.dark-mode [class*="btn"][class*="no"]:not(.btn-donate-no),
body.dark-mode [class*="btn"][class*="secondary"]:not(.btn-donate-secondary) {
    color: #5A9A92 !important;
    border-color: rgba(90, 154, 146, 0.4) !important;
    background: transparent !important;
}

/* Allgemeine blaue Elemente → Teal im Dark Mode */
body.dark-mode [style*="background: #3F5F63"],
body.dark-mode [style*="background:#3F5F63"],
body.dark-mode [style*="background-color: #3F5F63"],
body.dark-mode [style*="background-color:#3F5F63"] {
    background: #3A8A80 !important;
}

body.dark-mode [style*="border-color: #3F5F63"],
body.dark-mode [style*="border-color:#3F5F63"] {
    border-color: #3A8A80 !important;
}

body.dark-mode [style*="color: #3F5F63"],
body.dark-mode [style*="color:#3F5F63"] {
    color: #5A9A92 !important;
}


/* === INLINE STYLE OVERRIDES (mit höchster Priorität) === */
/* Diese überschreiben Inline-Styles im Dark Mode */

body.dark-mode .help-header[style*="#3F5F63"],
body.dark-mode .help-header[style*="#4A7A7E"],
body.dark-mode [style*="background: linear-gradient"][style*="#3F5F63"] {
    background: linear-gradient(135deg, #3A8A80, #4A8A85) !important;
}

body.dark-mode li span[style*="color: #3F5F63"],
body.dark-mode span[style*="color: #3F5F63"],
body.dark-mode [style*="color:#3F5F63"],
body.dark-mode [style*="color: #3F5F63"] {
    color: #5A9A92 !important;
}

body.dark-mode .share-btn[style*="background:#3F5F63"],
body.dark-mode button[style*="background:#3F5F63"],
body.dark-mode [style*="background:#3F5F63"] {
    background: #3A8A80 !important;
}
/* ========================================================================
   🎨 LIGHT BLUE DASHBOARD - 1:1 KOPIE
   Kräftiger blauer Hintergrund + Leicht transparente weiße Cards
   ======================================================================== */

/* === HINTERGRUND - MIT TIEFE FÜR GLASS-EFFEKT (NUR LIGHT MODE) === */
body:not(.dark-mode) {
    background: linear-gradient(180deg, #c5dcd5 0%, #e8f2ed 50%, #d5e8e0 100%) !important;
    background-attachment: fixed !important;
}

/* === DARK MODE HINTERGRUND - DUNKEL BLEIBT DUNKEL === */
body.dark-mode {
    background: linear-gradient(180deg, #0A1215 0%, #0D1B1E 50%, #0A1215 100%) !important;
    background-attachment: fixed !important;
}

/* === SCREENS & APP TRANSPARENT === */
.screen,
.login-screen,
.app:not(.dark),
body:not(.dark-mode) .screen,
body:not(.dark-mode) .login-screen,
body:not(.dark-mode) .app {
    background: transparent !important;
}

/* === ALLE CARDS - LEICHT TRANSPARENT WIE LIGHT BLUE === */
body:not(.dark-mode) .login-card,
body:not(.dark-mode) .onboarding-card,
body:not(.dark-mode) .desktop-sidebar-card,
body:not(.dark-mode) .desktop-panel-card,
body:not(.dark-mode) .desktop-center .app,
body:not(.dark-mode) .desktop-person-card {
    background: rgba(195, 220, 210, 0.72) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 8px 16px rgba(0, 0, 0, 0.04),
        0 16px 32px rgba(63, 95, 99, 0.06) !important;
}

/* === FEATURE CARDS === */
body:not(.dark-mode) .login-feature-card {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.06) !important;
}

body:not(.dark-mode) .login-feature-card:hover {
    transform: translateY(-4px) !important;
    background: rgba(232, 242, 237, 0.65) !important;
    box-shadow: 0 8px 24px rgba(63, 95, 99, 0.1) !important;
}

body:not(.dark-mode) .login-feature-icon-circle {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
}

/* === OPTION CARDS === */
body:not(.dark-mode) .option-card {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.05) !important;
}

body:not(.dark-mode) .option-card:hover {
    transform: translateY(-2px) !important;
    background: rgba(232, 242, 237, 0.65) !important;
    box-shadow: 0 8px 20px rgba(63, 95, 99, 0.08) !important;
}

body:not(.dark-mode) .option-card.selected {
    background: rgba(195, 220, 210, 0.68) !important;
    border: 2px solid #3F5F63 !important;
    box-shadow: 0 4px 16px rgba(63, 95, 99, 0.12) !important;
}

/* === TOP BAR === */
body:not(.dark-mode) .login-top-bar,
body:not(.dark-mode) .desktop-header {
    background: rgba(195, 220, 210, 0.68) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(232, 242, 237, 0.62) !important;
    box-shadow: 0 2px 8px rgba(63, 95, 99, 0.04) !important;
}

/* === TIP & WUSSTEST DU === */
body:not(.dark-mode) .desktop-tip-card,
body:not(.dark-mode) .desktop-didyouknow-card {
    background: rgba(195, 220, 210, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    color: #3F5F63 !important;
}

body:not(.dark-mode) .desktop-tip-card .desktop-panel-title,
body:not(.dark-mode) .desktop-tip-text,
body:not(.dark-mode) .desktop-didyouknow-card .desktop-panel-title,
body:not(.dark-mode) .desktop-didyouknow-text {
    color: #3F5F63 !important;
}

body:not(.dark-mode) .desktop-tip-card::before,
body:not(.dark-mode) .desktop-didyouknow-card::before {
    display: none !important;
}

/* === MASCOT CARD === */
body:not(.dark-mode) .mascot-intro-card,
body:not(.dark-mode) .mascot-intro-card.style-adults {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

body:not(.dark-mode) .mascot-intro-card.style-adults .mascot-name-badge {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
}

body:not(.dark-mode) .mascot-intro-card.style-adults .mascot-greeting {
    color: #3F5F63 !important;
}

body:not(.dark-mode) .mascot-speech-content {
    background: rgba(232, 242, 237, 0.65) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
}

/* === HOWTO BOX === */
body:not(.dark-mode) .login-howto {
    background: rgba(195, 220, 210, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
}

/* === BUTTONS === */
body:not(.dark-mode) .btn-primary,
body:not(.dark-mode) .login-btn,
body:not(.dark-mode) .wizard-btn {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.25) !important;
}

/* === WIZARD PROGRESS STEPS === */
body:not(.dark-mode) .wizard-progress-step {
    background: rgba(232, 242, 237, 0.65) !important;
    border: 2px solid rgba(63, 95, 99, 0.15) !important;
    color: #5A7A8E !important;
}

body:not(.dark-mode) .wizard-progress-step.active,
body:not(.dark-mode) .wizard-progress-step.completed {
    background: #3F5F63 !important;
    border-color: #3F5F63 !important;
    color: #FFFFFF !important;
}

/* === INPUTS === */
body:not(.dark-mode) .wizard-input,
body:not(.dark-mode) input[type="text"] {
    background: rgba(232, 242, 237, 0.65) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.28) !important;
    color: #3F5F63 !important;
}

/* === DARK MODE BEHÄLT SEIN DESIGN === */
body.dark-mode,
html.dark-mode body {
    background: linear-gradient(135deg, #0A1215 0%, #0D1B1E 50%, #0A1215 100%) !important;
}

/* ========================================
   GLOBALER GLASS-EFFEKT FÜR ALLE ELEMENTE
   ======================================== */

/* === OWL HELPER / MASKOTTCHEN BOX === */
body:not(.dark-mode) .owl-helper,
body:not(.dark-mode) .owl-helper-global {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === DECIDE INSTRUCTION BOX === */
body:not(.dark-mode) .decide-instruction {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === MEET CARD === */
body:not(.dark-mode) .meet-card {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === VICTIM CARD === */
body:not(.dark-mode) .victim-card {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === INSTA POST === */
body:not(.dark-mode) .insta-post {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === TRICK REVEAL === */
body:not(.dark-mode) .trick-reveal {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === RESULT SECTIONS === */
body:not(.dark-mode) .result-score,
body:not(.dark-mode) .my-tips,
body:not(.dark-mode) .personality,
body:not(.dark-mode) .transfer-task,
body:not(.dark-mode) .badges,
body:not(.dark-mode) .share,
body:not(.dark-mode) .whatif-teaser,
body:not(.dark-mode) .certificate-section {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === RESULT PAGE TEXT COLORS (LIGHT MODE) === */
body:not(.dark-mode) .result-score-title,
body:not(.dark-mode) .result-score-value,
body:not(.dark-mode) .result-score-compare,
body:not(.dark-mode) .my-tips-title,
body:not(.dark-mode) .my-tips-item,
body:not(.dark-mode) .transfer-title,
body:not(.dark-mode) .transfer-text,
body:not(.dark-mode) .transfer-item,
body:not(.dark-mode) .transfer-cta,
body:not(.dark-mode) .badges-title,
body:not(.dark-mode) .certificate-title,
body:not(.dark-mode) .certificate-desc,
body:not(.dark-mode) .whatif-title,
body:not(.dark-mode) .whatif-text,
body:not(.dark-mode) .share-title,
body:not(.dark-mode) .achievements-title,
body:not(.dark-mode) .achievement-title,
body:not(.dark-mode) .achievement-desc {
    color: #3F5F63 !important;
}

body:not(.dark-mode) .result-score-compare,
body:not(.dark-mode) .transfer-text,
body:not(.dark-mode) .certificate-desc,
body:not(.dark-mode) .whatif-text,
body:not(.dark-mode) .achievement-desc {
    color: #1A5276 !important;
}

body:not(.dark-mode) .my-tips-item {
    background: rgba(63, 95, 99, 0.08) !important;
    color: #3F5F63 !important;
}

body:not(.dark-mode) .transfer-item {
    color: #3F5F63 !important;
    border-color: rgba(63, 95, 99, 0.15) !important;
}

body:not(.dark-mode) .transfer-checklist {
    background: rgba(63, 95, 99, 0.06) !important;
}

/* === PERSONALITY SECTION TEXT === */
body:not(.dark-mode) .personality-label {
    color: #1A5276 !important;
}

body:not(.dark-mode) .personality-type {
    color: #3F5F63 !important;
}

body:not(.dark-mode) .personality-desc {
    color: #1A5276 !important;
}

/* === SUMMARY === */
body:not(.dark-mode) .summary {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === SUMMARY ITEMS === */
body:not(.dark-mode) .summary-item {
    background: rgba(195, 220, 210, 0.68) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 12px !important;
}

body:not(.dark-mode) .summary-title,
body:not(.dark-mode) .summary-item-title {
    color: #3F5F63 !important;
}

body:not(.dark-mode) .summary-item-desc {
    color: #1A5276 !important;
}

/* === DONATE SECTION === */
body:not(.dark-mode) .donate-section {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === CONS SECTIONS === */
body:not(.dark-mode) .cons-section {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === IMPACT BANNER === */
body:not(.dark-mode) .impact-banner {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
}

/* === INTRO CONTENT / START FORM === */
body:not(.dark-mode) .intro-content,
body:not(.dark-mode) .start-form {
    background: transparent !important;
}

/* === NEWSPAPER === */
body:not(.dark-mode) .newspaper {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
}

/* === COMMENTS === */
body:not(.dark-mode) .insta-comments-header {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

body:not(.dark-mode) .comment {
    background: rgba(195, 220, 210, 0.68) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 12px !important;
}

/* === HEADER INNERHALB DER APP === */
body:not(.dark-mode) .header {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(232, 242, 237, 0.62) !important;
}

/* === PROGRESS WRAP - BLAUER GRADIENT BLEIBT === */
body:not(.dark-mode) .progress-wrap {
    background: linear-gradient(135deg, #3F5F63, #4A7A7E) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 20px rgba(63, 95, 99, 0.25) !important;
}

body:not(.dark-mode) .progress-label {
    color: white !important;
}

/* === CTA BEREICH === */
body:not(.dark-mode) .cta {
    background: rgba(195, 220, 210, 0.68) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* === FOOTER === */
body:not(.dark-mode) .app-footer {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* === HELP/ABOUT MODALS === */
body:not(.dark-mode) .help-modal,
body:not(.dark-mode) .about-modal {
    background: rgba(195, 220, 210, 0.68) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
}

/* === INSTA INPUT BAR === */
body:not(.dark-mode) .insta-input {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(232, 242, 237, 0.62) !important;
}

/* === RESULT HERO === */
body:not(.dark-mode) .result-hero {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
}

/* === WHATIF SCREEN === */
body:not(.dark-mode) .whatif-screen {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
}

/* === LOGO FIX (nur Login-Bereich, NICHT Top-Bar) === */
.login-logo-light, .login-logo-dark, .login-logo-mobile, .login-logo-desktop { display: none !important; }
.login-top-icon-mobile, .login-top-icon-desktop { display: none !important; } /* Top-Bar Logo immer versteckt */
.desktop-logo-light { display: block !important; }
.desktop-logo-dark { display: none !important; }
body.dark-mode .desktop-logo-light { display: none !important; }
body.dark-mode .desktop-logo-dark { display: block !important; }

/* Mobile: NUR login-logo zeigen (NICHT top-icon) */
.login-logo-mobile.login-logo-light { display: inline-block !important; }
body.dark-mode .login-logo-mobile.login-logo-light { display: none !important; }
body.dark-mode .login-logo-mobile.login-logo-dark { display: inline-block !important; }

@media (min-width: 1024px) {
    .login-logo-mobile, .login-logo-mobile.login-logo-light, .login-logo-mobile.login-logo-dark,
    body.dark-mode .login-logo-mobile, body.dark-mode .login-logo-mobile.login-logo-light,
    body.dark-mode .login-logo-mobile.login-logo-dark { display: none !important; }
    .login-logo-desktop.login-logo-light { display: inline-block !important; }
    body.dark-mode .login-logo-desktop.login-logo-light { display: none !important; }
    body.dark-mode .login-logo-desktop.login-logo-dark { display: inline-block !important; }
}

.site-footer-logo-light, .login-footer-logo-light { display: inline-block !important; }
.site-footer-logo-dark, .login-footer-logo-dark { display: none !important; }
body.dark-mode .site-footer-logo-light, body.dark-mode .login-footer-logo-light { display: none !important; }
body.dark-mode .site-footer-logo-dark, body.dark-mode .login-footer-logo-dark { display: inline-block !important; }

/* ========================================================================
   🔮 LIGHT BLUE GLASS EFFEKT - FINALE VERSION
   Alle Elemente einheitlich mit modernem Glass-Look
   ======================================================================== */

/* === WIZARD CARD (Hauptcontainer) === */
body:not(.dark-mode) .wizard-card,
body:not(.dark-mode) .login-card,
body:not(.dark-mode) .onboarding-card {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(63, 95, 99, 0.20) !important;
}

/* === WIZARD PROGRESS STEPS (1, 2, 3, 4) === */
body:not(.dark-mode) .wizard-progress-step {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 2px solid rgba(63, 95, 99, 0.15) !important;
    color: #5A7A8E !important;
}

body:not(.dark-mode) .wizard-progress-step.active,
body:not(.dark-mode) .wizard-progress-step.completed {
    background: #3F5F63 !important;
    border-color: #3F5F63 !important;
    color: #FFFFFF !important;
}

body:not(.dark-mode) .wizard-progress-line {
    background: rgba(63, 95, 99, 0.15) !important;
}

body:not(.dark-mode) .wizard-progress-line.completed {
    background: #3F5F63 !important;
}

/* === AGE BUTTONS (Kids, Teens, etc.) === */
body:not(.dark-mode) .age-btn {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
    transition: all 0.3s ease !important;
}

body:not(.dark-mode) .age-btn:hover {
    background: rgba(195, 220, 210, 0.68) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(63, 95, 99, 0.12) !important;
    border-color: rgba(63, 95, 99, 0.2) !important;
}

body:not(.dark-mode) .age-btn.selected {
    background: rgba(195, 220, 210, 0.72) !important;
    border: 2px solid #3F5F63 !important;
    box-shadow: 0 8px 24px rgba(63, 95, 99, 0.15) !important;
}

/* === MODULE CARDS (Grundlagen, KI im Alltag, etc.) === */
body:not(.dark-mode) .module-card,
body:not(.dark-mode) .module-item,
body:not(.dark-mode) .wizard-module-card {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

body:not(.dark-mode) .module-card:hover,
body:not(.dark-mode) .module-item:hover,
body:not(.dark-mode) .wizard-module-card:hover {
    background: rgba(195, 220, 210, 0.68) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(63, 95, 99, 0.1) !important;
}

body:not(.dark-mode) .module-card.selected,
body:not(.dark-mode) .module-item.selected,
body:not(.dark-mode) .wizard-module-card.selected {
    border: 2px solid #3F5F63 !important;
}

/* === USER SUMMARY CARD (Avatar + Name) === */
body:not(.dark-mode) .wizard-summary,
body:not(.dark-mode) .user-summary,
body:not(.dark-mode) .ready-card {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === OWL HELPER / MASKOTTCHEN (THINKBERT etc.) === */
body:not(.dark-mode) .owl-helper,
body:not(.dark-mode) .owl-helper-global,
body:not(.dark-mode) .mascot-intro-card {
    background: rgba(232, 242, 237, 0.68) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.18) !important;
}

/* === DECIDE INSTRUCTION === */
body:not(.dark-mode) .decide-instruction {
    background: rgba(232, 242, 237, 0.68) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.18) !important;
}

/* === OPTION CARDS (A, B, C) === */
body:not(.dark-mode) .option-card,
body:not(.dark-mode) .option {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

body:not(.dark-mode) .option-card:hover,
body:not(.dark-mode) .option:hover {
    background: rgba(195, 220, 210, 0.68) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(63, 95, 99, 0.1) !important;
    border-color: rgba(63, 95, 99, 0.15) !important;
}

body:not(.dark-mode) .option-card.selected,
body:not(.dark-mode) .option.selected,
body:not(.dark-mode) .option-card.expanded,
body:not(.dark-mode) .option.expanded {
    background: rgba(195, 220, 210, 0.72) !important;
    border: 2px solid #3F5F63 !important;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.12) !important;
}

/* === OPTION PREVIEW (Ausgeklappte Vorschau) === */
body:not(.dark-mode) .option-preview,
body:not(.dark-mode) .preview-stats,
body:not(.dark-mode) .preview-timeline {
    background: rgba(248, 250, 252, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
}

/* === BUTTONS === */
body:not(.dark-mode) .btn-secondary,
body:not(.dark-mode) .wizard-btn-back {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    color: #3F5F63 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(63, 95, 99, 0.06) !important;
}

body:not(.dark-mode) .btn-secondary:hover,
body:not(.dark-mode) .wizard-btn-back:hover {
    background: rgba(195, 220, 210, 0.68) !important;
    border-color: #3F5F63 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.1) !important;
}

body:not(.dark-mode) .btn-primary,
body:not(.dark-mode) .wizard-btn {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(63, 95, 99, 0.25) !important;
    color: white !important;
}

body:not(.dark-mode) .btn-primary:hover,
body:not(.dark-mode) .wizard-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(63, 95, 99, 0.35) !important;
}

/* === SIDEBAR CARDS === */
body:not(.dark-mode) .desktop-sidebar-card,
body:not(.dark-mode) .desktop-panel-card,
body:not(.dark-mode) .desktop-person-card {
    background: rgba(232, 242, 237, 0.63) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.18) !important;
}

/* === CENTER APP === */
body:not(.dark-mode) .desktop-center .app {
    background: rgba(232, 242, 237, 0.63) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(63, 95, 99, 0.20) !important;
}

/* === MEET CARD === */
body:not(.dark-mode) .meet-card {
    background: rgba(232, 242, 237, 0.68) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.18) !important;
}

/* === INSTA POST === */
body:not(.dark-mode) .insta-post {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(63, 95, 99, 0.08) !important;
}

/* === VICTIM CARD === */
body:not(.dark-mode) .victim-card {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.18) !important;
}

/* === TRICK REVEAL === */
body:not(.dark-mode) .trick-reveal {
    background: rgba(232, 242, 237, 0.68) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.18) !important;
}

/* === CONS SECTION === */
body:not(.dark-mode) .cons-section {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.16) !important;
}

/* === RESULT SECTIONS === */
body:not(.dark-mode) .result-hero,
body:not(.dark-mode) .result-score,
body:not(.dark-mode) .my-tips,
body:not(.dark-mode) .personality,
body:not(.dark-mode) .transfer-task,
body:not(.dark-mode) .badges,
body:not(.dark-mode) .share,
body:not(.dark-mode) .certificate-section,
body:not(.dark-mode) .whatif-teaser {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.18) !important;
}

/* Result Summary behält dunklen Gradient für weißen Text */
body:not(.dark-mode) .result-summary {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
    color: white !important;
    border: none !important;
}

/* === SUMMARY === */
body:not(.dark-mode) .summary {
    background: rgba(232, 242, 237, 0.68) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.18) !important;
}

body:not(.dark-mode) .summary-item {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 14px !important;
}

/* === DONATE SECTION === */
body:not(.dark-mode) .donate-section {
    background: rgba(232, 242, 237, 0.68) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(63, 95, 99, 0.18) !important;
}

/* === HEADER === */
body:not(.dark-mode) .header,
body:not(.dark-mode) .desktop-header,
body:not(.dark-mode) .login-top-bar {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(232, 242, 237, 0.62) !important;
    box-shadow: 0 2px 12px rgba(63, 95, 99, 0.04) !important;
}

/* === FOOTER === */
body:not(.dark-mode) .app-footer {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(232, 242, 237, 0.62) !important;
}

/* === INPUTS === */
body:not(.dark-mode) input[type="text"],
body:not(.dark-mode) .wizard-input,
body:not(.dark-mode) .form-input {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.28) !important;
    border-radius: 12px !important;
}

body:not(.dark-mode) input[type="text"]:focus,
body:not(.dark-mode) .wizard-input:focus,
body:not(.dark-mode) .form-input:focus {
    border-color: #3F5F63 !important;
    box-shadow: 0 0 0 3px rgba(63, 95, 99, 0.1) !important;
}

/* === AVATAR BUTTONS === */
body:not(.dark-mode) .avatar-btn {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 14px !important;
}

body:not(.dark-mode) .avatar-btn:hover {
    background: rgba(195, 220, 210, 0.68) !important;
    transform: translateY(-2px) !important;
}

body:not(.dark-mode) .avatar-btn.selected {
    border: 2px solid #3F5F63 !important;
    background: rgba(195, 220, 210, 0.72) !important;
}

/* === STORY LIST ITEMS === */
body:not(.dark-mode) .desktop-story-item {
    background: rgba(195, 220, 210, 0.68) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 12px !important;
}

body:not(.dark-mode) .desktop-story-item.current {
    background: rgba(232, 242, 237, 0.65) !important;
    border-color: rgba(63, 95, 99, 0.2) !important;
}

/* === COMMENTS === */
body:not(.dark-mode) .comment {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 14px !important;
}

/* === MODALS === */
body:not(.dark-mode) .help-modal,
body:not(.dark-mode) .about-modal,
body:not(.dark-mode) .legal-modal {
    background: rgba(195, 220, 210, 0.68) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 24px !important;
}

/* === INSTA INPUT === */
body:not(.dark-mode) .insta-input {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(232, 242, 237, 0.62) !important;
}

/* === BADGE ITEMS === */
body:not(.dark-mode) .badge-item .css-badge {
    background: rgba(232, 242, 237, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
}

/* === NEWSPAPER === */
body:not(.dark-mode) .newspaper {
    background: rgba(230, 238, 238, 0.66) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 16px !important;
}

/* === IMPACT BANNER === */
body:not(.dark-mode) .impact-banner {
    background: rgba(232, 242, 237, 0.68) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
    border-radius: 16px !important;
}

/* === TIMELINE ITEMS === */
body:not(.dark-mode) .timeline-item {
    background: rgba(232, 242, 237, 0.62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
}

/* === WHATIF SCREEN === */
body:not(.dark-mode) .whatif-screen,
body:not(.dark-mode) .whatif-story {
    background: rgba(232, 242, 237, 0.68) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.32) !important;
    border-radius: 20px !important;
}

/* === STORY ITEMS IN SIDEBAR === */
body:not(.dark-mode) .desktop-story-item {
    background: rgba(232, 242, 237, 0.58) !important;
    border: 1px solid rgba(63, 95, 99, 0.12) !important;
    border-radius: 12px !important;
}

body:not(.dark-mode) .desktop-story-item:hover {
    background: rgba(232, 242, 237, 0.68) !important;
    border-color: rgba(63, 95, 99, 0.2) !important;
}

body:not(.dark-mode) .desktop-story-item.current {
    background: rgba(232, 242, 237, 0.70) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.30) !important;
}

body:not(.dark-mode) .desktop-story-status.pending {
    background: rgba(232, 242, 237, 0.72) !important;
    border: 2px solid rgba(63, 95, 99, 0.2) !important;
    color: #3F5F63 !important;
}

body:not(.dark-mode) .desktop-story-status.active {
    background: #3F5F63 !important;
    color: white !important;
}

/* === OPTION BADGE FÜR LIGHT MODE === */
body:not(.dark-mode) .option-badge {
    background: rgba(63, 95, 99, 0.1) !important;
    color: #3F5F63 !important;
    border: 1px solid rgba(63, 95, 99, 0.2) !important;
}

/* === ALLE INNEREN ELEMENTE MIT BORDER === */
body:not(.dark-mode) .wizard-age-option,
body:not(.dark-mode) .wizard-module-option,
body:not(.dark-mode) .avatar-option {
    background: rgba(232, 242, 237, 0.65) !important;
    border: 1.5px solid rgba(63, 95, 99, 0.25) !important;
    border-radius: 16px !important;
}

body:not(.dark-mode) .wizard-age-option:hover,
body:not(.dark-mode) .wizard-module-option:hover,
body:not(.dark-mode) .avatar-option:hover {
    background: rgba(232, 242, 237, 0.72) !important;
    border-color: rgba(63, 95, 99, 0.28) !important;
}

body:not(.dark-mode) .wizard-age-option.selected,
body:not(.dark-mode) .wizard-module-option.selected,
body:not(.dark-mode) .avatar-option.selected {
    background: rgba(232, 242, 237, 0.78) !important;
    border: 2px solid #3F5F63 !important;
}

/* === WIZARD SUMMARY AVATAR - RUND UND BLAU === */
body:not(.dark-mode) .wizard-summary-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #a8d4d0 0%, #c5e0d8 100%) !important;
    box-shadow: 0 6px 20px rgba(63, 95, 99, 0.15) !important;
}

body:not(.dark-mode) .wizard-summary-avatar img {
    width: 115% !important;
    height: 115% !important;
    margin: -7.5% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    
}

/* ======================================================================== */

/* ========================================================================
   GLASSMORPHISM - SAUBERER NEUANFANG
   Farben die zum Hintergrundbild passen
   ======================================================================== */

/* === HAUPT-CARDS (Sidebar, Center, Panels) === */
body:not(.dark-mode) .desktop-sidebar-card,
body:not(.dark-mode) .desktop-panel-card,
body:not(.dark-mode) .desktop-person-card,
body:not(.dark-mode) .desktop-center .app,
body:not(.dark-mode) .login-card,
body:not(.dark-mode) .wizard-card,
body:not(.dark-mode) .onboarding-card {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.85) 0%, 
        rgba(240, 248, 255, 0.75) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 
        0 8px 32px rgba(100, 150, 200, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* === INNERE CARDS (Mascot, Options, etc.) === */
body:not(.dark-mode) .mascot-intro-card,
body:not(.dark-mode) .decide-instruction,
body:not(.dark-mode) .owl-helper,
body:not(.dark-mode) .meet-card,
body:not(.dark-mode) .wizard-summary,
body:not(.dark-mode) .insta-post {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(245, 250, 255, 0.8) 100%) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 
        0 4px 16px rgba(100, 150, 200, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* === OPTION CARDS === */
body:not(.dark-mode) .option-card,
body:not(.dark-mode) .option {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.92) 0%, 
        rgba(248, 252, 255, 0.85) 100%) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(180, 210, 240, 0.5) !important;
    box-shadow: 0 4px 16px rgba(100, 150, 200, 0.1) !important;
}

body:not(.dark-mode) .option-card:hover,
body:not(.dark-mode) .option:hover {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(250, 253, 255, 0.92) 100%) !important;
    border-color: rgba(100, 150, 200, 0.4) !important;
    box-shadow: 0 8px 24px rgba(100, 150, 200, 0.18) !important;
    transform: translateY(-2px) !important;
}

/* === STORY ITEMS === */
body:not(.dark-mode) .desktop-story-item {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(180, 210, 240, 0.4) !important;
}

body:not(.dark-mode) .desktop-story-item.current {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(100, 150, 200, 0.5) !important;
}

/* === BUTTONS === */
body:not(.dark-mode) .btn-secondary,
body:not(.dark-mode) .wizard-btn-back {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(180, 210, 240, 0.5) !important;
    color: #3F5F63 !important;
}

/* === BADGES === */
body:not(.dark-mode) .css-badge {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(245, 250, 255, 0.8) 100%) !important;
    border: 1px solid rgba(180, 210, 240, 0.4) !important;
}

/* === COMMENTS === */
body:not(.dark-mode) .comment {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(180, 210, 240, 0.4) !important;
}

/* === TIPP & WUSSTEST DU === */
body:not(.dark-mode) .desktop-tip-card,
body:not(.dark-mode) .desktop-didyouknow-card {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.88) 0%, 
        rgba(245, 250, 255, 0.78) 100%) !important;
    border: 1px solid rgba(180, 210, 240, 0.5) !important;
}

/* === HEADER === */
body:not(.dark-mode) .header,
body:not(.dark-mode) .desktop-header {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(180, 210, 240, 0.4) !important;
}

/* === PROGRESS BAR === */
body:not(.dark-mode) .progress-wrap {
    background: linear-gradient(135deg, #3F5F63, #4A7A7E) !important;
}

/* === AGE & MODULE OPTIONS === */
body:not(.dark-mode) .age-btn,
body:not(.dark-mode) .wizard-age-option,
body:not(.dark-mode) .wizard-module-option,
body:not(.dark-mode) .module-card {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(248, 252, 255, 0.82) 100%) !important;
    border: 1px solid rgba(180, 210, 240, 0.5) !important;
}

body:not(.dark-mode) .age-btn:hover,
body:not(.dark-mode) .wizard-age-option:hover,
body:not(.dark-mode) .wizard-module-option:hover,
body:not(.dark-mode) .module-card:hover {
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(252, 254, 255, 0.92) 100%) !important;
    border-color: rgba(100, 150, 200, 0.5) !important;
}

body:not(.dark-mode) .age-btn.selected,
body:not(.dark-mode) .wizard-age-option.selected,
body:not(.dark-mode) .wizard-module-option.selected {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 2px solid #3F5F63 !important;
}

/* === AVATAR BUTTONS === */
body:not(.dark-mode) .avatar-btn {
    background: linear-gradient(145deg, #a8d4d0 0%, #c5e0d8 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
}

body:not(.dark-mode) .avatar-btn.selected {
    border: 3px solid #3F5F63 !important;
}

/* === OPTION BADGE === */
body:not(.dark-mode) .option-badge {
    background: rgba(63, 95, 99, 0.1) !important;
    color: #3F5F63 !important;
    border: 1px solid rgba(63, 95, 99, 0.2) !important;
}


/* ========================================================================
   FINALE FARB-HARMONIE - Passend zum Hintergrund
   ======================================================================== */

/* Alle Cards mit warmen hellen Blauton */
body:not(.dark-mode) .desktop-sidebar-card,
body:not(.dark-mode) .desktop-panel-card,
body:not(.dark-mode) .desktop-person-card,
body:not(.dark-mode) .desktop-center .app,
body:not(.dark-mode) .login-card,
body:not(.dark-mode) .wizard-card {
    background: linear-gradient(160deg, 
        rgba(255, 255, 255, 0.82) 0%, 
        rgba(230, 242, 255, 0.72) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 
        0 4px 24px rgba(120, 160, 200, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Innere Elemente noch heller */
body:not(.dark-mode) .mascot-intro-card,
body:not(.dark-mode) .decide-instruction,
body:not(.dark-mode) .owl-helper,
body:not(.dark-mode) .wizard-summary,
body:not(.dark-mode) .insta-post,
body:not(.dark-mode) .meet-card {
    background: linear-gradient(160deg, 
        rgba(255, 255, 255, 0.92) 0%, 
        rgba(240, 248, 255, 0.85) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
}

/* Option Cards */
body:not(.dark-mode) .option-card,
body:not(.dark-mode) .option,
body:not(.dark-mode) .comment {
    background: linear-gradient(160deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(245, 250, 255, 0.88) 100%) !important;
    border: 1px solid rgba(200, 220, 245, 0.6) !important;
}

/* Desktop Story Items */
body:not(.dark-mode) .desktop-story-item {
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(200, 220, 245, 0.5) !important;
}

body:not(.dark-mode) .desktop-story-item.current {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(63, 95, 99, 0.25) !important;
}

/* Tipp & Wusstest du */
body:not(.dark-mode) .desktop-tip-card,
body:not(.dark-mode) .desktop-didyouknow-card {
    background: linear-gradient(160deg, 
        rgba(255, 255, 255, 0.88) 0%, 
        rgba(235, 245, 255, 0.78) 100%) !important;
    border: 1px solid rgba(200, 220, 245, 0.5) !important;
}

/* Kein unnötiger Freiraum */
body:not(.dark-mode) .screen,
body:not(.dark-mode) .app {
    min-height: auto !important;
}


/* ========================================================================
   INSTA POST BEREICH - EINFACH WEISS
   Authentischer Social Media Look
   ======================================================================== */

body:not(.dark-mode) .insta-post,
body:not(.dark-mode) .post-container,
body:not(.dark-mode) .post {
    background: #FFFFFF !important;
    border: 1px solid rgba(200, 215, 230, 0.5) !important;
    box-shadow: 0 2px 12px rgba(100, 140, 180, 0.08) !important;
}

body:not(.dark-mode) .insta-header,
body:not(.dark-mode) .insta-content,
body:not(.dark-mode) .insta-actions,
body:not(.dark-mode) .insta-likes,
body:not(.dark-mode) .insta-caption,
body:not(.dark-mode) .insta-comments-toggle {
    background: transparent !important;
}

body:not(.dark-mode) .comment,
body:not(.dark-mode) .comment-item {
    background: #f8fcfa !important;
    border: 1px solid rgba(200, 215, 230, 0.4) !important;
}

body:not(.dark-mode) .insta-input,
body:not(.dark-mode) .comment-input-area {
    background: #FFFFFF !important;
    border-top: 1px solid rgba(200, 215, 230, 0.5) !important;
}

body:not(.dark-mode) .emoji-bar,
body:not(.dark-mode) .emoji-row {
    background: #FFFFFF !important;
}

body:not(.dark-mode) .owl-helper,
body:not(.dark-mode) .mascot-intro-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(200, 215, 230, 0.5) !important;
    box-shadow: 0 2px 12px rgba(100, 140, 180, 0.08) !important;
}

body:not(.dark-mode) .decide-instruction {
    background: #FFFFFF !important;
    border: 1px solid rgba(200, 215, 230, 0.5) !important;
}

body:not(.dark-mode) .option-card,
body:not(.dark-mode) .option {
    background: #FFFFFF !important;
    border: 1px solid rgba(200, 215, 230, 0.5) !important;
}

body:not(.dark-mode) .option-card:hover,
body:not(.dark-mode) .option:hover {
    background: #fafcfa !important;
    border-color: rgba(63, 95, 99, 0.3) !important;
    box-shadow: 0 4px 16px rgba(100, 140, 180, 0.12) !important;
}


/* ========================================================================
   ECHTER GLASSMORPHISM - Basierend auf .glass-card Referenz
   ======================================================================== */

/* === HAUPT-CARDS === */
body:not(.dark-mode) .desktop-sidebar-card,
body:not(.dark-mode) .desktop-panel-card,
body:not(.dark-mode) .desktop-person-card,
body:not(.dark-mode) .desktop-center .app,
body:not(.dark-mode) .login-card,
body:not(.dark-mode) .wizard-card {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(19px) !important;
    -webkit-backdrop-filter: blur(19px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 26px 13px rgba(255, 255, 255, 0.3) !important;
    position: relative;
    overflow: hidden;
}

/* Licht-Effekt oben */
body:not(.dark-mode) .desktop-sidebar-card::before,
body:not(.dark-mode) .desktop-panel-card::before,
body:not(.dark-mode) .desktop-person-card::before,
body:not(.dark-mode) .desktop-center .app::before,
body:not(.dark-mode) .login-card::before,
body:not(.dark-mode) .wizard-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    ) !important;
    z-index: 1 !important;
}

/* === INNERE CARDS (etwas weniger transparent) === */
body:not(.dark-mode) .mascot-intro-card,
body:not(.dark-mode) .decide-instruction,
body:not(.dark-mode) .owl-helper,
body:not(.dark-mode) .wizard-summary,
body:not(.dark-mode) .meet-card,
body:not(.dark-mode) .desktop-tip-card,
body:not(.dark-mode) .desktop-didyouknow-card {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 20px 10px rgba(255, 255, 255, 0.25) !important;
}

/* === INSTA POST & CONTENT - Weiß für Lesbarkeit === */
body:not(.dark-mode) .insta-post,
body:not(.dark-mode) .post-container,
body:not(.dark-mode) .post {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* === OPTION CARDS === */
body:not(.dark-mode) .option-card,
body:not(.dark-mode) .option {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

body:not(.dark-mode) .option-card:hover,
body:not(.dark-mode) .option:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-2px) !important;
}

/* === COMMENTS === */
body:not(.dark-mode) .comment {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
}

/* === STORY ITEMS === */
body:not(.dark-mode) .desktop-story-item {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

body:not(.dark-mode) .desktop-story-item.current {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 0 0 15px 5px rgba(255, 255, 255, 0.2) !important;
}

/* === AGE & MODULE BUTTONS === */
body:not(.dark-mode) .age-btn,
body:not(.dark-mode) .wizard-age-option,
body:not(.dark-mode) .wizard-module-option,
body:not(.dark-mode) .module-card {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

body:not(.dark-mode) .age-btn:hover,
body:not(.dark-mode) .wizard-age-option:hover,
body:not(.dark-mode) .wizard-module-option:hover,
body:not(.dark-mode) .module-card:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

body:not(.dark-mode) .age-btn.selected,
body:not(.dark-mode) .wizard-age-option.selected,
body:not(.dark-mode) .wizard-module-option.selected {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 2px solid #3F5F63 !important;
}

/* === HEADER === */
body:not(.dark-mode) .header,
body:not(.dark-mode) .desktop-header {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(19px) !important;
    -webkit-backdrop-filter: blur(19px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* === CSS BADGES === */
body:not(.dark-mode) .css-badge {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}


/* ========================================================================
   CONTENT BEREICH - ALLES EINHEITLICH WEISS
   Kein Farbchaos mehr!
   ======================================================================== */

/* Der gesamte mittlere Content-Bereich */
body:not(.dark-mode) .desktop-center .app,
body:not(.dark-mode) .desktop-center .screen {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Insta Post komplett weiß */
body:not(.dark-mode) .insta-post,
body:not(.dark-mode) .post-container,
body:not(.dark-mode) .post,
body:not(.dark-mode) .insta-header,
body:not(.dark-mode) .insta-content,
body:not(.dark-mode) .insta-image,
body:not(.dark-mode) .insta-actions,
body:not(.dark-mode) .insta-likes,
body:not(.dark-mode) .insta-caption,
body:not(.dark-mode) .insta-comments-toggle,
body:not(.dark-mode) .insta-time {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Kommentare Bereich */
body:not(.dark-mode) .comments-section,
body:not(.dark-mode) .insta-comments,
body:not(.dark-mode) .comments-header {
    background: #FFFFFF !important;
}

/* Einzelne Kommentare - ganz leichtes Grau */
body:not(.dark-mode) .comment,
body:not(.dark-mode) .comment-item {
    background: #f8fcfa !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #EEF2F6 !important;
    box-shadow: none !important;
}

/* Emoji Bar & Input */
body:not(.dark-mode) .emoji-bar,
body:not(.dark-mode) .emoji-row,
body:not(.dark-mode) .insta-input,
body:not(.dark-mode) .comment-input-area,
body:not(.dark-mode) .comment-input {
    background: #FFFFFF !important;
    border: none !important;
    border-top: 1px solid #EEF2F6 !important;
}

/* Tipp Box am Ende */
body:not(.dark-mode) .tip-box,
body:not(.dark-mode) .helper-tip {
    background: #F0F7FF !important;
    border: 1px solid #d0e3e0 !important;
}

/* Mascot/Thinkbert Box */
body:not(.dark-mode) .owl-helper,
body:not(.dark-mode) .mascot-intro-card,
body:not(.dark-mode) .mascot-speech {
    background: #FFFFFF !important;
    border: 1px solid #E0EBF5 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Reaction Stats */
body:not(.dark-mode) .reaction-stats,
body:not(.dark-mode) .stats-row {
    background: #FFFFFF !important;
}

/* Trennlinien einheitlich */
body:not(.dark-mode) .divider,
body:not(.dark-mode) .section-divider,
body:not(.dark-mode) hr {
    border-color: #EEF2F6 !important;
    background: #EEF2F6 !important;
}

/* Button "Sieh was du ausgelöst hast" bleibt farbig */
body:not(.dark-mode) .btn-primary,
body:not(.dark-mode) .cta-button,
body:not(.dark-mode) .action-btn {
    background: linear-gradient(135deg, #3F5F63, #4A7A7E) !important;
    color: white !important;
}


/* ========================================================================
   KOMMENTARE - ABSTAND ZWISCHEN EINTRÄGEN
   ======================================================================== */

body:not(.dark-mode) .comment,
body:not(.dark-mode) .comment-item {
    margin-bottom: 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
}

body:not(.dark-mode) .comment:last-child {
    margin-bottom: 0 !important;
}

/* Comments Container mit Gap */
body:not(.dark-mode) .comments-list,
body:not(.dark-mode) .insta-comments {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}


/* ========================================================================
   LOGIN SEITE - GLASS EFFEKT
   ======================================================================== */

/* Haupt Login Card (links) */
body:not(.dark-mode) .login-card,
body:not(.dark-mode) .login-content-card {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(19px) !important;
    -webkit-backdrop-filter: blur(19px) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 26px 13px rgba(255, 255, 255, 0.3) !important;
}

/* Wizard Card (rechts) */
body:not(.dark-mode) .wizard-card,
body:not(.dark-mode) .onboarding-card {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(19px) !important;
    -webkit-backdrop-filter: blur(19px) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 26px 13px rgba(255, 255, 255, 0.3) !important;
}

/* Feature Cards (14 Stories, Tricks, 15-20 Min) */
body:not(.dark-mode) .login-feature-card,
body:not(.dark-mode) .feature-card {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 16px 8px rgba(255, 255, 255, 0.2) !important;
}

body:not(.dark-mode) .login-feature-card:hover,
body:not(.dark-mode) .feature-card:hover {
    background: rgba(255, 255, 255, 0.65) !important;
    transform: translateY(-2px) !important;
}

/* Tagline Box ("Erlebe die Wirkung...") */
body:not(.dark-mode) .login-tagline,
body:not(.dark-mode) .tagline-box {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 16px !important;
}

/* Input Feld */
body:not(.dark-mode) .wizard-input,
body:not(.dark-mode) .login-input,
body:not(.dark-mode) input[type="text"] {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(200, 220, 245, 0.5) !important;
    border-radius: 12px !important;
}

body:not(.dark-mode) .wizard-input:focus,
body:not(.dark-mode) .login-input:focus,
body:not(.dark-mode) input[type="text"]:focus {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #3F5F63 !important;
    box-shadow: 0 0 0 3px rgba(63, 95, 99, 0.1) !important;
}

/* Weiter Button */
body:not(.dark-mode) .wizard-btn,
body:not(.dark-mode) .login-btn {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(63, 95, 99, 0.3) !important;
}

body:not(.dark-mode) .wizard-btn:hover,
body:not(.dark-mode) .login-btn:hover {
    box-shadow: 0 6px 24px rgba(63, 95, 99, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Progress Steps */
body:not(.dark-mode) .wizard-progress-step {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 2px solid rgba(200, 220, 245, 0.5) !important;
}

body:not(.dark-mode) .wizard-progress-step.active,
body:not(.dark-mode) .wizard-progress-step.completed {
    background: #3F5F63 !important;
    border-color: #3F5F63 !important;
    color: white !important;
}

/* Footer */
body:not(.dark-mode) .login-footer,
body:not(.dark-mode) .site-footer {
    background: transparent !important;
}


/* ========================================================================
   CONFIRM MODAL - GLASS EFFEKT
   ======================================================================== */

body:not(.dark-mode) .confirm-modal,
body:not(.dark-mode) .modal.confirm-modal {
    background: rgba(248, 250, 252, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    border: 2px solid rgba(63, 95, 99, 0.12) !important;
    box-shadow: 
        0 25px 80px rgba(63, 95, 99, 0.25),
        0 10px 40px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden;
}

/* Header (Moment mal...) */
body:not(.dark-mode) .confirm-header {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
    padding: 24px !important;
    text-align: center;
}

body:not(.dark-mode) .confirm-title,
body:not(.dark-mode) .confirm-subtitle {
    color: white !important;
}

/* Body */
body:not(.dark-mode) .confirm-body {
    background: transparent !important;
    padding: 24px !important;
}

body:not(.dark-mode) .confirm-intro,
body:not(.dark-mode) .confirm-question {
    color: #3F5F63 !important;
}

/* Post Preview Box */
body:not(.dark-mode) .confirm-post {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(200, 220, 245, 0.5) !important;
    border-left: 4px solid #3F5F63 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 16px 0 !important;
}

/* Warning Box */
body:not(.dark-mode) .confirm-warning {
    background: rgba(240, 248, 255, 0.8) !important;
    border: 1px solid rgba(200, 220, 245, 0.5) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    color: #3F5F63 !important;
}

/* Actions */
body:not(.dark-mode) .confirm-actions {
    padding: 20px 24px 24px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body:not(.dark-mode) .confirm-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(63, 95, 99, 0.2) !important;
    color: #3F5F63 !important;
}

body:not(.dark-mode) .confirm-actions .btn-primary {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
    border: none !important;
    color: white !important;
}

/* Modal Overlay */
body:not(.dark-mode) .modal-overlay {
    background: rgba(63, 95, 99, 0.3) !important;
    backdrop-filter: blur(4px) !important;
}


/* ========================================================================
   FIXES - Tagline, Age Buttons, Module Buttons
   ======================================================================== */

/* Login Tagline - weniger Rundung */
body:not(.dark-mode) .login-tagline,
body:not(.dark-mode) p.login-tagline {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Age Buttons - Glass mit Abhebung */
body:not(.dark-mode) .wizard-age-btn,
body:not(.dark-mode) .age-btn {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

body:not(.dark-mode) .wizard-age-btn:hover,
body:not(.dark-mode) .age-btn:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-3px) !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body:not(.dark-mode) .wizard-age-btn.selected,
body:not(.dark-mode) .age-btn.selected {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #3F5F63 !important;
    box-shadow: 
        0 6px 20px rgba(63, 95, 99, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Module Buttons - Kein Grau mehr */
body:not(.dark-mode) .wizard-module-btn,
body:not(.dark-mode) .module-card,
body:not(.dark-mode) .module-btn {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

body:not(.dark-mode) .wizard-module-btn:hover,
body:not(.dark-mode) .module-card:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body:not(.dark-mode) .wizard-module-btn.selected,
body:not(.dark-mode) .module-card.selected {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #3F5F63 !important;
}

/* Module Meta (Stories Badge) */
body:not(.dark-mode) .wizard-module-stories,
body:not(.dark-mode) .module-stories {
    background: #3F5F63 !important;
    color: white !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
}

/* Empfohlen Badge */
body:not(.dark-mode) .wizard-module-badge {
    background: transparent !important;
    color: #3A8A80 !important;
    font-weight: 600 !important;
}

/* Module Name & Desc */
body:not(.dark-mode) .wizard-module-name {
    color: #3F5F63 !important;
}

body:not(.dark-mode) .wizard-module-desc {
    color: #5A7A8E !important;
}

/* Age Label & Range */
body:not(.dark-mode) .wizard-age-label {
    color: #3F5F63 !important;
    font-weight: 600 !important;
}

body:not(.dark-mode) .wizard-age-range {
    color: #5A7A8E !important;
}


/* ========================================================================
   OPTION PREVIEW - Nicht mehr verschachtelt aussehen
   ======================================================================== */

/* Option Card wenn expanded */
body:not(.dark-mode) .option.expanded {
    background: rgba(255, 255, 255, 0.7) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Option Preview (DAS WIRD PASSIEREN) */
body:not(.dark-mode) .option-preview {
    background: rgba(245, 250, 255, 0.9) !important;
    border-top: 1px solid rgba(200, 220, 245, 0.6) !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 0 0 16px 16px !important;
}

/* Preview Stats */
body:not(.dark-mode) .preview-stat {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(200, 220, 245, 0.5) !important;
    border-radius: 12px !important;
}

/* Preview Timeline */
body:not(.dark-mode) .preview-timeline {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(200, 220, 245, 0.5) !important;
}

/* Preview Title */
body:not(.dark-mode) .preview-title {
    color: #3F5F63 !important;
}


/* ========================================================================
   OPTION EXPANDED - Preview INNERHALB der Card
   ======================================================================== */

/* Option wenn expanded - kein border-radius unten */
body:not(.dark-mode) .option.expanded {
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Preview schließt sich nahtlos an */
body:not(.dark-mode) .option.expanded + .option-preview,
body:not(.dark-mode) .option.expanded .option-preview,
body:not(.dark-mode) .option-preview {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(200, 220, 245, 0.5) !important;
    border-top: 1px solid rgba(200, 220, 245, 0.4) !important;
    border-radius: 0 0 16px 16px !important;
    margin-top: -1px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Oder: Alles als eine Einheit */
body:not(.dark-mode) .option.expanded {
    border-radius: 16px !important;
    border: 1px solid rgba(200, 220, 245, 0.5) !important;
    overflow: visible !important;
}

body:not(.dark-mode) .option.expanded .option-preview {
    margin: 0 -1px -1px -1px !important;
    border: 1px solid rgba(200, 220, 245, 0.5) !important;
    border-top: none !important;
    border-radius: 0 0 16px 16px !important;
    background: #F8FBFF !important;
}


/* ========================================================================
   FIXES - Mascot Arrow, Timeline Padding, Dark Mode Meet
   ======================================================================== */

/* 1. Mascot Speech Arrow - passend zur Box */
body:not(.dark-mode) .mascot-speech-arrow {
    border-bottom-color: rgba(245, 250, 255, 0.95) !important;
}

body:not(.dark-mode) .mascot-speech-arrow::before,
body:not(.dark-mode) .mascot-speech-arrow::after {
    border-bottom-color: rgba(245, 250, 255, 0.95) !important;
}

/* Oder Arrow komplett ausblenden wenn es komisch aussieht */
body:not(.dark-mode) .mascot-intro-card .mascot-speech-arrow {
    display: none !important;
}

/* 2. Timeline Items - mehr Innenabstand */
body:not(.dark-mode) .timeline-item,
body:not(.dark-mode) .preview-tl-item {
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(200, 220, 245, 0.4) !important;
}

body:not(.dark-mode) .timeline-item:last-child,
body:not(.dark-mode) .preview-tl-item:last-child {
    margin-bottom: 0 !important;
}

body:not(.dark-mode) .timeline-content {
    padding-left: 12px !important;
}

body:not(.dark-mode) .timeline-icon {
    flex-shrink: 0 !important;
}

/* 3. Dark Mode - Meet Header Linie */
body.dark-mode .meet-header,
.app.dark .meet-header {
    border-bottom: 1px solid rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .meet-card,
.app.dark .meet-card {
    border: 1px solid rgba(90, 154, 146, 0.15) !important;
}

/* Dark Mode Progress Bar auch anpassen */
body.dark-mode .progress-bar,
.app.dark .progress-bar {
    background: linear-gradient(135deg, #3A8A80, #5A9A92) !important;
}

body.dark-mode .progress-wrap,
.app.dark .progress-wrap {
    background: rgba(90, 154, 146, 0.1) !important;
    border: 1px solid rgba(90, 154, 146, 0.2) !important;
}


/* ========================================================================
   FIX: "Dieses Bild kursiert gerade..." ausblenden
   ======================================================================== */

.image-caption,
.story-image-caption,
.situation-image-caption,
[class*="kursiert"],
.kursiert-text {
    display: none !important;
}


/* ========================================================================
   ZURÜCK ZUM BEITRAG - Auffälliger Button
   ======================================================================== */

body:not(.dark-mode) .btn-back-to-post,
body:not(.dark-mode) #btnBackToPost {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 14px 20px !important;
    margin-bottom: 20px !important;
    background: linear-gradient(135deg, #E8F4FD 0%, #d5e8e0 100%) !important;
    border: 2px dashed #3F5F63 !important;
    border-radius: 12px !important;
    color: #3F5F63 !important;
    font-size: 0.95em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body:not(.dark-mode) .btn-back-to-post:hover,
body:not(.dark-mode) #btnBackToPost:hover {
    background: linear-gradient(135deg, #d5e8e0 0%, #c5e0d8 100%) !important;
    border-color: #0A3254 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(63, 95, 99, 0.15) !important;
}

/* Dark Mode */
body.dark-mode .btn-back-to-post,
body.dark-mode #btnBackToPost,
.app.dark .btn-back-to-post,
.app.dark #btnBackToPost {
    background: rgba(90, 154, 146, 0.1) !important;
    border: 2px dashed rgba(90, 154, 146, 0.5) !important;
    color: #5A9A92 !important;
}


/* ========================================================================
   RESULT/SUMMARY PAGE - Harmonisches Design
   ======================================================================== */

/* Haupt-Result Container */
body:not(.dark-mode) #result,
body:not(.dark-mode) .result-screen,
body:not(.dark-mode) #summary {
    background: transparent !important;
}

/* Alle Cards auf der Result-Seite */
body:not(.dark-mode) .result-card,
body:not(.dark-mode) .summary-card,
body:not(.dark-mode) .stats-card,
body:not(.dark-mode) .tips-card,
body:not(.dark-mode) .personality-card,
body:not(.dark-mode) .mission-card,
body:not(.dark-mode) .badges-card,
body:not(.dark-mode) .achievements-card,
body:not(.dark-mode) .whatif-card,
body:not(.dark-mode) .share-card,
body:not(.dark-mode) .cert-card,
body:not(.dark-mode) .tricks-card,
body:not(.dark-mode) [class*="result"] > div,
body:not(.dark-mode) #result > div,
body:not(.dark-mode) #summary > div {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 16px !important;
    padding: 20px !important;
}

/* Header Bereich (Avatar + Name) */
body:not(.dark-mode) .result-header,
body:not(.dark-mode) .summary-header {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    color: white !important;
    text-align: center !important;
}

body:not(.dark-mode) .result-header *,
body:not(.dark-mode) .summary-header * {
    color: white !important;
}

/* Stats Box (6 - 2 - 4 Zahlen) */
body:not(.dark-mode) .result-stats,
body:not(.dark-mode) .stats-grid,
body:not(.dark-mode) .score-grid {
    background: #FFFFFF !important;
    border: 1px solid #E8F0F6 !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

body:not(.dark-mode) .stat-item,
body:not(.dark-mode) .score-item {
    background: #F8FBFD !important;
    border-radius: 10px !important;
    padding: 12px !important;
    text-align: center !important;
}

body:not(.dark-mode) .stat-value,
body:not(.dark-mode) .score-value {
    color: #3F5F63 !important;
    font-weight: 700 !important;
    font-size: 1.8em !important;
}

body:not(.dark-mode) .stat-label,
body:not(.dark-mode) .score-label {
    color: #5A7A8E !important;
    font-size: 0.85em !important;
}

/* Medienkompetenz Score */
body:not(.dark-mode) .score-section,
body:not(.dark-mode) .competence-score {
    background: #FFFFFF !important;
    border: 1px solid #E8F0F6 !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

body:not(.dark-mode) .score-bar-wrap {
    background: #E8F0F6 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

body:not(.dark-mode) .score-bar {
    background: linear-gradient(135deg, #3F5F63, #3A8A80) !important;
}

body:not(.dark-mode) .score-percentage {
    color: #3F5F63 !important;
    font-weight: 700 !important;
}

/* Tipps Liste */
body:not(.dark-mode) .tips-list,
body:not(.dark-mode) .tip-item {
    background: #F8FBFD !important;
    border: 1px solid #E8F0F6 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    color: #1F4A42 !important;
}

body:not(.dark-mode) .tip-item:last-child {
    margin-bottom: 0 !important;
}

/* Persönlichkeitstyp */
body:not(.dark-mode) .personality-type,
body:not(.dark-mode) .pers-type {
    background: linear-gradient(135deg, #E8F4FD 0%, #d5e8e0 100%) !important;
    border: 2px solid #3F5F63 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    text-align: center !important;
}

body:not(.dark-mode) .personality-type h3,
body:not(.dark-mode) .pers-type-title {
    color: #3F5F63 !important;
    font-weight: 700 !important;
}

/* Mission Box */
body:not(.dark-mode) .mission-questions,
body:not(.dark-mode) .mission-item {
    background: #FFFFFF !important;
    border-left: 3px solid #3A8A80 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
}


/* Achievements */
body:not(.dark-mode) .achievement-item {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%) !important;
    border: 1px solid #F0E6CC !important;
    border-radius: 10px !important;
    padding: 12px !important;
}

/* Share Buttons */
body:not(.dark-mode) .share-buttons,
body:not(.dark-mode) .share-grid {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

body:not(.dark-mode) .share-btn,
body:not(.dark-mode) [id^="share"] {
    background: #FFFFFF !important;
    border: 1px solid #E8F0F6 !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    color: #3F5F63 !important;
    font-weight: 500 !important;
}

body:not(.dark-mode) .share-btn:hover,
body:not(.dark-mode) [id^="share"]:hover {
    background: #F0F7FF !important;
    border-color: #3F5F63 !important;
}

/* Zertifikat Section */
body:not(.dark-mode) .cert-section,
body:not(.dark-mode) #certSection {
    background: linear-gradient(135deg, #E8F4FD 0%, #d5e8e0 100%) !important;
    border: 2px solid #3F5F63 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    text-align: center !important;
}

body:not(.dark-mode) .cert-btn,
body:not(.dark-mode) #btnCertificate {
    background: linear-gradient(135deg, #3F5F63, #4A7A7E) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* Restart Buttons */
body:not(.dark-mode) .restart-btn,
body:not(.dark-mode) #btnRestart,
body:not(.dark-mode) #btnNewPlayer {
    background: #FFFFFF !important;
    border: 1px solid #E8F0F6 !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    color: #3F5F63 !important;
    width: 100% !important;
    margin-top: 8px !important;
}

body:not(.dark-mode) .restart-btn:hover,
body:not(.dark-mode) #btnRestart:hover,
body:not(.dark-mode) #btnNewPlayer:hover {
    background: #F0F7FF !important;
    border-color: #3F5F63 !important;
}

/* Section Titles */
body:not(.dark-mode) .section-title,
body:not(.dark-mode) .card-title,
body:not(.dark-mode) #result h3,
body:not(.dark-mode) #summary h3 {
    color: #3F5F63 !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

/* Owl/Mascot im Result */
body:not(.dark-mode) .result-mascot,
body:not(.dark-mode) .mascot-speech {
    background: #FFFFFF !important;
    border: 1px solid #E8F0F6 !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

/* What If Section */
body:not(.dark-mode) .whatif-btn,
body:not(.dark-mode) #btnWhatIf {
    background: #FFFFFF !important;
    border: 2px dashed #F59E0B !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    color: #92400E !important;
    width: 100% !important;
}

body:not(.dark-mode) .whatif-btn:hover,
body:not(.dark-mode) #btnWhatIf:hover {
    background: #FFFBEB !important;
}


/* "Dieses Bild kursiert gerade..." ausblenden */
.meet-image-caption,
#meetImageCaption {
    display: none !important;
}


/* ========================================================================
   DARK MODE FIXES - Alle blauen Elemente auf Teal
   ======================================================================== */

/* Zurück zum Beitrag Button */
body.dark-mode .btn-back-to-post,
body.dark-mode #btnBackToPost,
.app.dark .btn-back-to-post,
.app.dark #btnBackToPost {
    background: rgba(90, 154, 146, 0.15) !important;
    border: 2px dashed rgba(90, 154, 146, 0.6) !important;
    color: #5A9A92 !important;
}

body.dark-mode .btn-back-to-post:hover,
body.dark-mode #btnBackToPost:hover,
.app.dark .btn-back-to-post:hover,
.app.dark #btnBackToPost:hover {
    background: rgba(90, 154, 146, 0.25) !important;
    border-color: #5A9A92 !important;
}

/* Decide Instruction */
body.dark-mode .decide-instruction-text,
body.dark-mode .decide-instruction-hint,
body.dark-mode #decideInstructionText,
body.dark-mode #decideInstructionHint,
.app.dark .decide-instruction-text,
.app.dark .decide-instruction-hint,
.app.dark #decideInstructionText,
.app.dark #decideInstructionHint {
    color: #B8C5CC !important;
}

/* Option Choose Button */
body.dark-mode .option-choose,
.app.dark .option-choose {
    background: linear-gradient(135deg, #3A8A80, #5A9A92) !important;
    color: white !important;
    border: none !important;
}

body.dark-mode .option-choose:hover,
.app.dark .option-choose:hover {
    background: linear-gradient(135deg, #4A8A85, #5FD4CB) !important;
}

/* Option Badge */
body.dark-mode .option-badge,
.app.dark .option-badge {
    background: rgba(90, 154, 146, 0.15) !important;
    color: #5A9A92 !important;
    border: 1px solid rgba(90, 154, 146, 0.3) !important;
}

/* Option Cards Linker Border */
body.dark-mode .option,
body.dark-mode .option-card,
.app.dark .option,
.app.dark .option-card {
    border-left-color: rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .option.expanded,
.app.dark .option.expanded {
    border-color: rgba(90, 154, 146, 0.4) !important;
}

/* Alle Optionen gleiche Farbe - NEUTRAL, verrät nicht die Antwort! */
body.dark-mode .option-a,
.app.dark .option-a {
    border-left: 4px solid rgba(90, 154, 146, 0.5) !important;
}

body.dark-mode .option-b,
.app.dark .option-b {
    border-left: 4px solid rgba(90, 154, 146, 0.5) !important;
}

body.dark-mode .option-c,
.app.dark .option-c {
    border-left: 4px solid rgba(90, 154, 146, 0.5) !important;
}

/* Confirm Modal */
body.dark-mode .confirm-post,
body.dark-mode #confirmPostText,
.app.dark .confirm-post,
.app.dark #confirmPostText {
    border-left-color: #5A9A92 !important;
    background: rgba(90, 154, 146, 0.1) !important;
    color: #E8E8E8 !important;
}

body.dark-mode .confirm-warning,
body.dark-mode #confirmWarning,
.app.dark .confirm-warning,
.app.dark #confirmWarning {
    color: #B8C5CC !important;
}

body.dark-mode .confirm-warning strong,
body.dark-mode #confirmWarning strong,
.app.dark .confirm-warning strong,
.app.dark #confirmWarning strong {
    color: #5A9A92 !important;
}

/* Victim Box Border */
body.dark-mode .victim-after-box,
body.dark-mode .victim-before-box,
.app.dark .victim-after-box,
.app.dark .victim-before-box {
    border-color: rgba(90, 154, 146, 0.3) !important;
    background: rgba(90, 154, 146, 0.1) !important;
}

body.dark-mode .victim-box-label,
.app.dark .victim-box-label {
    color: #5A9A92 !important;
}

body.dark-mode .victim-box-text,
.app.dark .victim-box-text {
    color: #B8C5CC !important;
}

/* Victim Message Bubble */
body.dark-mode .victim-message-bubble,
.app.dark .victim-message-bubble {
    border-left: 3px solid #5A9A92 !important;
    background: rgba(90, 154, 146, 0.08) !important;
}

body.dark-mode .victim-message-name,
.app.dark .victim-message-name {
    color: #5A9A92 !important;
}

body.dark-mode .victim-message-text,
.app.dark .victim-message-text {
    color: #E8E8E8 !important;
}

body.dark-mode .victim-message-time,
.app.dark .victim-message-time {
    color: #8899A6 !important;
}

/* Preview Sections */
body.dark-mode .preview-title,
.app.dark .preview-title {
    color: #5A9A92 !important;
}

body.dark-mode .preview-stat,
.app.dark .preview-stat {
    background: rgba(90, 154, 146, 0.1) !important;
    border-color: rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .preview-timeline,
.app.dark .preview-timeline {
    background: rgba(90, 154, 146, 0.08) !important;
    border-color: rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .preview-tl-item,
.app.dark .preview-tl-item {
    border-bottom-color: rgba(90, 154, 146, 0.15) !important;
}

body.dark-mode .preview-tl-time,
.app.dark .preview-tl-time {
    color: #5A9A92 !important;
}

body.dark-mode .preview-tl-text,
.app.dark .preview-tl-text {
    color: #E8E8E8 !important;
}

body.dark-mode .preview-tl-consequence,
.app.dark .preview-tl-consequence {
    color: #B8C5CC !important;
}

/* Emotionale Übertreibung Text */
body.dark-mode em[style*="color:var(--gray)"],
body.dark-mode em[style*="color: var(--gray)"],
.app.dark em[style*="color:var(--gray)"],
.app.dark em[style*="color: var(--gray)"] {
    color: #8899A6 !important;
}

/* Option Preview Victim */
body.dark-mode .preview-victim,
.app.dark .preview-victim {
    background: rgba(90, 154, 146, 0.08) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

body.dark-mode .preview-victim-text,
.app.dark .preview-victim-text {
    color: #B8C5CC !important;
}

/* Confirm Header */
body.dark-mode .confirm-header,
.app.dark .confirm-header {
    background: linear-gradient(135deg, #1A3A4A, #2A5A6A) !important;
}

/* General Text in Dark Mode */
body.dark-mode .option-text,
.app.dark .option-text {
    color: #E8E8E8 !important;
}


/* ========================================================================
   DARK MODE - Zurück Button wie Light Mode
   ======================================================================== */

body.dark-mode .btn-back-to-post,
body.dark-mode #btnBackToPost,
.app.dark .btn-back-to-post,
.app.dark #btnBackToPost {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 14px 20px !important;
    margin-bottom: 20px !important;
    background: rgba(90, 154, 146, 0.12) !important;
    border: 2px dashed rgba(90, 154, 146, 0.5) !important;
    border-radius: 12px !important;
    color: #5A9A92 !important;
    font-size: 0.95em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

body.dark-mode .btn-back-to-post:hover,
body.dark-mode #btnBackToPost:hover,
.app.dark .btn-back-to-post:hover,
.app.dark #btnBackToPost:hover {
    background: rgba(90, 154, 146, 0.2) !important;
    border-color: #5A9A92 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(90, 154, 146, 0.2) !important;
}


/* ========================================================================
   LIGHT MODE - Victim Box und andere Elemente auf Mimikama Teal
   ======================================================================== */

/* Victim Box */
body:not(.dark-mode) .victim-after-box,
body:not(.dark-mode) .victim-before-box {
    border: 2px solid rgba(63, 95, 99, 0.2) !important;
    background: rgba(63, 95, 99, 0.05) !important;
    border-radius: 12px !important;
}

body:not(.dark-mode) .victim-box-label {
    color: #3F5F63 !important;
    font-weight: 600 !important;
}

body:not(.dark-mode) .victim-box-text {
    color: #5A7A8E !important;
}

/* Victim Message Bubble */
body:not(.dark-mode) .victim-message-bubble {
    border-left: 3px solid #3F5F63 !important;
    background: rgba(63, 95, 99, 0.05) !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 12px 16px !important;
}

body:not(.dark-mode) .victim-message-name {
    color: #3F5F63 !important;
    font-weight: 600 !important;
}

body:not(.dark-mode) .victim-message-text {
    color: #1F4A42 !important;
}

body:not(.dark-mode) .victim-message-time {
    color: #8899A6 !important;
}

/* Confirm Post Border */
body:not(.dark-mode) .confirm-post,
body:not(.dark-mode) #confirmPostText {
    border-left: 4px solid #3F5F63 !important;
    background: rgba(63, 95, 99, 0.05) !important;
}

/* Confirm Warning */
body:not(.dark-mode) .confirm-warning strong,
body:not(.dark-mode) #confirmWarning strong {
    color: #3F5F63 !important;
}

/* Preview Title */
body:not(.dark-mode) .preview-title {
    color: #3F5F63 !important;
}

/* Preview Stats */
body:not(.dark-mode) .preview-stat {
    background: rgba(63, 95, 99, 0.05) !important;
    border: 1px solid rgba(63, 95, 99, 0.15) !important;
}

/* Preview Timeline */
body:not(.dark-mode) .preview-timeline {
    background: rgba(63, 95, 99, 0.03) !important;
    border: 1px solid rgba(63, 95, 99, 0.12) !important;
}

body:not(.dark-mode) .preview-tl-time {
    color: #3F5F63 !important;
    font-weight: 600 !important;
}

/* Preview Victim */
body:not(.dark-mode) .preview-victim {
    background: rgba(63, 95, 99, 0.05) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

}
/* ========================================================================
   DARK MODE - Login & Wizard Elemente auf Teal
   ======================================================================== */

/* Login Dachmarke */
body.dark-mode .login-dachmarke,
body.dark-mode #loginDachmarke,
.app.dark .login-dachmarke,
.app.dark #loginDachmarke {
    color: #5A9A92 !important;
}

/* Login Footer Links */
body.dark-mode .login-footer-links a,
body.dark-mode #loginImpressumLink,
body.dark-mode #loginDatenschutzLink,
.app.dark .login-footer-links a,
.app.dark #loginImpressumLink,
.app.dark #loginDatenschutzLink {
    color: #5A9A92 !important;
}

body.dark-mode .login-footer-links a:hover,
.app.dark .login-footer-links a:hover {
    color: #5FD4CB !important;
}

/* Wizard Progress Steps */
body.dark-mode .wizard-progress-step,
.app.dark .wizard-progress-step {
    background: rgba(90, 154, 146, 0.15) !important;
    color: #5A9A92 !important;
    border: 2px solid rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .wizard-progress-step.active,
.app.dark .wizard-progress-step.active {
    background: #5A9A92 !important;
    color: #1A2A3A !important;
    border-color: #5A9A92 !important;
}

body.dark-mode .wizard-progress-step.completed,
.app.dark .wizard-progress-step.completed {
    background: #3A8A80 !important;
    color: white !important;
    border-color: #3A8A80 !important;
}

/* Wizard Progress Line */
body.dark-mode .wizard-progress-line,
.app.dark .wizard-progress-line {
    background: rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .wizard-progress-line.completed,
.app.dark .wizard-progress-line.completed {
    background: #5A9A92 !important;
}

/* Wizard Module Button */
body.dark-mode .wizard-module-btn,
.app.dark .wizard-module-btn {
    background: rgba(90, 154, 146, 0.08) !important;
    border: 1px solid rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .wizard-module-btn:hover,
.app.dark .wizard-module-btn:hover {
    background: rgba(90, 154, 146, 0.15) !important;
    border-color: rgba(90, 154, 146, 0.4) !important;
}

body.dark-mode .wizard-module-btn.selected,
.app.dark .wizard-module-btn.selected {
    background: rgba(90, 154, 146, 0.2) !important;
    border: 2px solid #5A9A92 !important;
}

body.dark-mode .wizard-module-name,
.app.dark .wizard-module-name {
    color: #E8E8E8 !important;
}

body.dark-mode .wizard-module-desc,
.app.dark .wizard-module-desc {
    color: #B8C5CC !important;
}

body.dark-mode .wizard-module-stories,
.app.dark .wizard-module-stories {
    background: #5A9A92 !important;
    color: #1A2A3A !important;
}

body.dark-mode .wizard-module-badge,
.app.dark .wizard-module-badge {
    color: #5A9A92 !important;
}

/* Wizard Summary Module */
body.dark-mode .wizard-summary-module,
body.dark-mode #wizardSummaryModule,
.app.dark .wizard-summary-module,
.app.dark #wizardSummaryModule {
    color: #5A9A92 !important;
    background: rgba(90, 154, 146, 0.1) !important;
    border: 1px solid rgba(90, 154, 146, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

/* Wizard Summary Age */
body.dark-mode .wizard-summary-age,
body.dark-mode #wizardSummaryAge,
.app.dark .wizard-summary-age,
.app.dark #wizardSummaryAge {
    color: #B8C5CC !important;
}

/* Wizard Summary Name */
body.dark-mode .wizard-summary-name,
body.dark-mode #wizardSummaryName,
.app.dark .wizard-summary-name,
.app.dark #wizardSummaryName {
    color: #E8E8E8 !important;
}


/* ========================================================================
   DARK MODE - Alle verbleibenden blauen Elemente auf Teal
   ======================================================================== */

/* Help Header */
body.dark-mode .help-header,
.app.dark .help-header {
    background: linear-gradient(135deg, #1A3A4A 0%, #2A5A6A 100%) !important;
}

/* Intro Highlight */
body.dark-mode .intro-highlight,
.app.dark .intro-highlight {
    color: #5A9A92 !important;
}

/* Avatar Button Selected */
body.dark-mode .avatar-btn.selected,
.app.dark .avatar-btn.selected {
    border-color: #5A9A92 !important;
}

/* Age Button Selected */
body.dark-mode .age-btn.selected,
.app.dark .age-btn.selected {
    border: 2px solid #5A9A92 !important;
}

/* Primary Button */
body.dark-mode .btn-primary,
.app.dark .btn-primary {
    background: linear-gradient(135deg, #3A8A80 0%, #1A7A6F 100%) !important;
}

/* Option Badges */
body.dark-mode .option-a .option-badge,
body.dark-mode .option-b .option-badge,
body.dark-mode .option-c .option-badge,
.app.dark .option-a .option-badge,
.app.dark .option-b .option-badge,
.app.dark .option-c .option-badge {
    background: rgba(90, 154, 146, 0.15) !important;
    color: #5A9A92 !important;
}

/* Post Status */
body.dark-mode .post-status,
.app.dark .post-status {
    background: linear-gradient(135deg, #3A8A80, #1A7A6F) !important;
}

/* Comment Sachlich */
body.dark-mode .comment-sachlich .comment-text,
body.dark-mode .npc-reaction.comment-sachlich,
.app.dark .comment-sachlich .comment-text,
.app.dark .npc-reaction.comment-sachlich {
    border-left-color: #5A9A92 !important;
}

/* Social Proof Text */
body.dark-mode .social-proof-text strong,
.app.dark .social-proof-text strong {
    color: #5A9A92 !important;
}

/* Confirm Header */
body.dark-mode .confirm-header,
.app.dark .confirm-header {
    background: linear-gradient(135deg, #1A3A4A, #2A5A6A) !important;
}

/* Confirm Actions Button */
body.dark-mode .confirm-actions .btn-primary,
.app.dark .confirm-actions .btn-primary {
    background: linear-gradient(135deg, #3A8A80, #1A7A6F) !important;
}

/* Login Avatar Selected */
body.dark-mode .login-avatar.selected,
.app.dark .login-avatar.selected {
    border-color: #5A9A92 !important;
}

/* Login Howto Text */
body.dark-mode .login-howto-text strong,
.app.dark .login-howto-text strong {
    color: #5A9A92 !important;
}

/* Login Top Button Active */
body.dark-mode .login-top-btn.active,
.app.dark .login-top-btn.active {
    border-color: #5A9A92 !important;
    color: #5A9A92 !important;
}

/* Mimi Toast Info */
body.dark-mode .mimi-toast-info,
body.dark-mode .mimi-toast-success,
.app.dark .mimi-toast-info,
.app.dark .mimi-toast-success {
    background: rgba(90, 154, 146, 0.15) !important;
    border-color: #5A9A92 !important;
}

body.dark-mode .mimi-toast-info .mimi-toast-avatar,
body.dark-mode .mimi-toast-success .mimi-toast-avatar,
.app.dark .mimi-toast-info .mimi-toast-avatar,
.app.dark .mimi-toast-success .mimi-toast-avatar {
    background: #5A9A92 !important;
}

/* Mobile Progress Item */
body.dark-mode .mobile-progress-item.completed,
.app.dark .mobile-progress-item.completed {
    border-color: #5A9A92 !important;
}

body.dark-mode .mobile-progress-item.completed .mobile-progress-number,
.app.dark .mobile-progress-item.completed .mobile-progress-number {
    background: #5A9A92 !important;
    color: #1A2A3A !important;
}

/* Module Header */
body.dark-mode .module-header,
.app.dark .module-header {
    background: linear-gradient(135deg, #1A3A4A, #2A5A6A) !important;
}

/* Mood Positive */
body.dark-mode .mood-positive,
.app.dark .mood-positive {
    color: #5A9A92 !important;
}

/* Instagram Saved Icon */
body.dark-mode .insta-action-icon.saved,
.app.dark .insta-action-icon.saved {
    color: #5A9A92 !important;
}

/* Alternative Path Header */
body.dark-mode .alternative-path-header,
.app.dark .alternative-path-header {
    background: linear-gradient(135deg, #1A3A4A, #2A5A6A) !important;
}

/* Certificate Button */
body.dark-mode .btn-certificate,
.app.dark .btn-certificate {
    background: linear-gradient(135deg, #3A8A80, #1A7A6F) !important;
}


/* Theme Facebook in Dark Mode */
body.dark-mode .theme-facebook,
.app.dark .theme-facebook {
    background: #1A3A4A !important;
}

/* Wizard Progress Line Active */
body.dark-mode .wizard-progress-line.active,
.app.dark .wizard-progress-line.active {
    background: #5A9A92 !important;
}

/* Allgemeine Links */
body.dark-mode a:not([class]),
.app.dark a:not([class]) {
    color: #5A9A92 !important;
}

body.dark-mode a:not([class]):hover,
.app.dark a:not([class]):hover {
    color: #5FD4CB !important;
}


/* ========================================================================
   DARK MODE - Verbleibende blaue Elemente auf Teal
   ======================================================================== */

/* Option Badges A, B, C */
body.dark-mode .option-a .option-badge,
body.dark-mode .option-b .option-badge,
body.dark-mode .option-c .option-badge,
.app.dark .option-a .option-badge,
.app.dark .option-b .option-badge,
.app.dark .option-c .option-badge {
    background: rgba(90, 154, 146, 0.15) !important;
    color: #5A9A92 !important;
}

/* Post Status */
body.dark-mode .post-status,
.app.dark .post-status {
    background: linear-gradient(135deg, #1A3A4A, #2A4A5A) !important;
    color: #5A9A92 !important;
}

/* Victim Card Positive */
body.dark-mode .victim-card.positive,
.app.dark .victim-card.positive {
    background: linear-gradient(135deg, rgba(90, 154, 146, 0.1), rgba(42, 157, 143, 0.15)) !important;
    border-color: rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .victim-card.positive .victim-after-box,
.app.dark .victim-card.positive .victim-after-box {
    border-color: #5A9A92 !important;
    box-shadow: 0 4px 16px rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .victim-card.positive .victim-box-label,
.app.dark .victim-card.positive .victim-box-label {
    color: #5A9A92 !important;
}

body.dark-mode .victim-card.positive .victim-box-text,
.app.dark .victim-card.positive .victim-box-text {
    color: #5A9A92 !important;
}

body.dark-mode .victim-card.positive .victim-change-arrow,
.app.dark .victim-card.positive .victim-change-arrow {
    color: #5A9A92 !important;
}

body.dark-mode .victim-card.positive .victim-message-bubble,
.app.dark .victim-card.positive .victim-message-bubble {
    border-left-color: #5A9A92 !important;
}

/* Victim Card Negative */
body.dark-mode .victim-card.negative,
.app.dark .victim-card.negative {
    background: linear-gradient(135deg, rgba(231, 111, 81, 0.1), rgba(244, 162, 97, 0.15)) !important;
    border-color: rgba(231, 111, 81, 0.3) !important;
}

/* Chat Header */
body.dark-mode .chat-header,
.app.dark .chat-header {
    background: linear-gradient(135deg, #1A3A4A, #2A4A5A) !important;
    border-color: rgba(90, 154, 146, 0.2) !important;
}

/* Legend Items */
body.dark-mode .legend-item,
.app.dark .legend-item {
    color: #B8C5CC !important;
}

/* Section Headers/Titles mit Blau */
body.dark-mode [class*="section-title"],
body.dark-mode [class*="card-title"],
body.dark-mode [class*="panel-title"],
.app.dark [class*="section-title"],
.app.dark [class*="card-title"],
.app.dark [class*="panel-title"] {
    color: #5A9A92 !important;
}

/* Desktop Panel Title */
body.dark-mode .desktop-panel-title,
.app.dark .desktop-panel-title {
    color: #5A9A92 !important;
}

/* Trick Tag/Badge */
body.dark-mode .trick-tag,
body.dark-mode .trick-badge,
.app.dark .trick-tag,
.app.dark .trick-badge {
    background: rgba(90, 154, 146, 0.15) !important;
    color: #5A9A92 !important;
    border-color: rgba(90, 154, 146, 0.3) !important;
}

/* Quiz/Question Elements */
body.dark-mode .quiz-title,
body.dark-mode .question-title,
.app.dark .quiz-title,
.app.dark .question-title {
    color: #5A9A92 !important;
}

/* Tips/Hints */
body.dark-mode .tip-highlight,
body.dark-mode .hint-box,
.app.dark .tip-highlight,
.app.dark .hint-box {
    background: rgba(90, 154, 146, 0.1) !important;
    border-left-color: #5A9A92 !important;
    color: #E8E8E8 !important;
}

/* Score/Progress Elements */
body.dark-mode .score-label,
body.dark-mode .progress-label,
.app.dark .score-label,
.app.dark .progress-label {
    color: #B8C5CC !important;
}

body.dark-mode .score-value,
body.dark-mode .progress-value,
.app.dark .score-value,
.app.dark .progress-value {
    color: #5A9A92 !important;
}

/* Links allgemein */
body.dark-mode a:not(.btn):not(.share-btn):not([class*="button"]),
.app.dark a:not(.btn):not(.share-btn):not([class*="button"]) {
    color: #5A9A92 !important;
}

body.dark-mode a:not(.btn):not(.share-btn):not([class*="button"]):hover,
.app.dark a:not(.btn):not(.share-btn):not([class*="button"]):hover {
    color: #5FD4CB !important;
}

/* Feature List Checkmarks */
body.dark-mode li span[style*="#3A8A80"],
body.dark-mode span[style*="color: #3A8A80"],
.app.dark li span[style*="#3A8A80"],
.app.dark span[style*="color: #3A8A80"] {
    color: #5A9A92 !important;
}

/* Modal Close Button */
body.dark-mode .modal-close,
body.dark-mode .close-btn,
.app.dark .modal-close,
.app.dark .close-btn {
    color: #B8C5CC !important;
}

body.dark-mode .modal-close:hover,
body.dark-mode .close-btn:hover,
.app.dark .modal-close:hover,
.app.dark .close-btn:hover {
    color: #5A9A92 !important;
}

/* FB Blue Variable Override */
body.dark-mode {
    --fb-blue: #5A9A92 !important;
}

.app.dark {
    --fb-blue: #5A9A92 !important;
}

/* Story Meta Info */
body.dark-mode .story-meta,
body.dark-mode .story-info,
.app.dark .story-meta,
.app.dark .story-info {
    color: #B8C5CC !important;
}

/* Help/Info Icons */
body.dark-mode .help-icon,
body.dark-mode .info-icon,
body.dark-mode .badge-info-btn,
.app.dark .help-icon,
.app.dark .info-icon,
.app.dark .badge-info-btn {
    color: #5A9A92 !important;
    background: transparent !important;
}


/* ========================================================================
   DARK MODE - ALLE Blautöne (#3F5F63, #2D4548, #2D4548, #4A7A7E, etc.) auf Teal
   ======================================================================== */

/* Whatif Story Elements */
body.dark-mode .whatif-story-chapter,
.app.dark .whatif-story-chapter {
    color: #5A9A92 !important;
}

body.dark-mode .whatif-story-consequence,
.app.dark .whatif-story-consequence {
    color: #B8C5CC !important;
}

body.dark-mode .whatif-story-post,
.app.dark .whatif-story-post {
    background: rgba(231, 111, 81, 0.15) !important;
    color: #E76F51 !important;
}

body.dark-mode .whatif-story,
.app.dark .whatif-story {
    background: rgba(90, 154, 146, 0.08) !important;
    border-color: rgba(90, 154, 146, 0.2) !important;
}

/* Trick Compare Elements */
body.dark-mode .trick-compare,
.app.dark .trick-compare {
    background: rgba(90, 154, 146, 0.08) !important;
    border-color: rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .trick-compare-text,
.app.dark .trick-compare-text {
    color: #E8E8E8 !important;
}

/* Trick Progress Dots */
body.dark-mode .trick-progress-dot,
.app.dark .trick-progress-dot {
    background: rgba(90, 154, 146, 0.2) !important;
    color: #B8C5CC !important;
}

body.dark-mode .trick-progress-dot.done,
.app.dark .trick-progress-dot.done {
    background: #3A8A80 !important;
    color: white !important;
}

body.dark-mode .trick-progress-dot.new,
.app.dark .trick-progress-dot.new {
    background: #5A9A92 !important;
    color: #1A2A3A !important;
}

body.dark-mode .trick-progress-dot.active,
.app.dark .trick-progress-dot.active {
    background: #5A9A92 !important;
    color: #1A2A3A !important;
}

/* Legal Highlight */
body.dark-mode .legal-highlight,
.app.dark .legal-highlight {
    background: rgba(90, 154, 146, 0.1) !important;
    border-color: rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .legal-highlight p,
.app.dark .legal-highlight p {
    color: #5A9A92 !important;
}

/* Alle Inline-Styles mit Blautönen überschreiben */
body.dark-mode [style*="#3F5F63"],
body.dark-mode [style*="#2D4548"],
body.dark-mode [style*="#2D4548"],
body.dark-mode [style*="#4A7A7E"],
body.dark-mode [style*="#0D4067"],
body.dark-mode [style*="#0D3F66"],
body.dark-mode [style*="#0D4168"],
body.dark-mode [style*="#0A3254"],
body.dark-mode [style*="#0B3"],
body.dark-mode [style*="#083"],
.app.dark [style*="#3F5F63"],
.app.dark [style*="#2D4548"],
.app.dark [style*="#2D4548"],
.app.dark [style*="#4A7A7E"],
.app.dark [style*="#0D4067"],
.app.dark [style*="#0D3F66"],
.app.dark [style*="#0D4168"],
.app.dark [style*="#0A3254"],
.app.dark [style*="#0B3"],
.app.dark [style*="#083"] {
    color: #5A9A92 !important;
}

/* Background Overrides für Blautöne */
body.dark-mode [style*="background"][style*="#3F5F63"],
body.dark-mode [style*="background"][style*="#2D4548"],
body.dark-mode [style*="background"][style*="#2D4548"],
body.dark-mode [style*="background"][style*="#4A7A7E"],
body.dark-mode [style*="background"][style*="#0D4067"],
body.dark-mode [style*="background"][style*="#0D3F66"],
.app.dark [style*="background"][style*="#3F5F63"],
.app.dark [style*="background"][style*="#2D4548"],
.app.dark [style*="background"][style*="#2D4548"],
.app.dark [style*="background"][style*="#4A7A7E"],
.app.dark [style*="background"][style*="#0D4067"],
.app.dark [style*="background"][style*="#0D3F66"] {
    background: linear-gradient(135deg, #1A3A4A, #2A4A5A) !important;
}

/* Border Overrides für Blautöne */
body.dark-mode [style*="border"][style*="#3F5F63"],
body.dark-mode [style*="border"][style*="#2D4548"],
body.dark-mode [style*="border"][style*="#4A7A7E"],
body.dark-mode [style*="border"][style*="#0D4067"],
.app.dark [style*="border"][style*="#3F5F63"],
.app.dark [style*="border"][style*="#2D4548"],
.app.dark [style*="border"][style*="#4A7A7E"],
.app.dark [style*="border"][style*="#0D4067"] {
    border-color: rgba(90, 154, 146, 0.3) !important;
}

/* CSS Variables Override für Dark Mode */
body.dark-mode,
.app.dark {
    --rc-primary: #5A9A92 !important;
    --rc-primary-dark: #3A8A80 !important;
    --rc-text: #E8E8E8 !important;
    --rc-accent-primary: #5A9A92 !important;
    --gradient-primary: linear-gradient(135deg, #3A8A80 0%, #5A9A92 100%) !important;
    --gradient-premium: linear-gradient(135deg, #3A8A80 0%, #5A9A92 100%) !important;
    --gradient-sunset: linear-gradient(135deg, #5A9A92 0%, #3A8A80 100%) !important;
    --gradient-ocean: linear-gradient(135deg, #3A8A80 0%, #5A9A92 100%) !important;
}

/* Before/After Pseudo-Elemente */
body.dark-mode *::before,
body.dark-mode *::after,
.app.dark *::before,
.app.dark *::after {
    border-color: inherit !important;
}

/* Spezifische Before/After mit Blau */
body.dark-mode .step-indicator::before,
body.dark-mode .progress-step::before,
body.dark-mode .timeline-item::before,
.app.dark .step-indicator::before,
.app.dark .progress-step::before,
.app.dark .timeline-item::before {
    background: #5A9A92 !important;
    border-color: #5A9A92 !important;
}

body.dark-mode .step-indicator::after,
body.dark-mode .progress-step::after,
body.dark-mode .timeline-item::after,
.app.dark .step-indicator::after,
.app.dark .progress-step::after,
.app.dark .timeline-item::after {
    background: rgba(90, 154, 146, 0.3) !important;
}

/* Connector Lines */
body.dark-mode .connector,
body.dark-mode .line,
body.dark-mode .progress-line,
.app.dark .connector,
.app.dark .line,
.app.dark .progress-line {
    background: rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .connector.active,
body.dark-mode .line.active,
body.dark-mode .progress-line.active,
body.dark-mode .progress-line.completed,
.app.dark .connector.active,
.app.dark .line.active,
.app.dark .progress-line.active,
.app.dark .progress-line.completed {
    background: #5A9A92 !important;
}

/* Module/Step Numbers */
body.dark-mode .step-number,
body.dark-mode .module-number,
.app.dark .step-number,
.app.dark .module-number {
    background: rgba(90, 154, 146, 0.15) !important;
    color: #5A9A92 !important;
    border-color: rgba(90, 154, 146, 0.3) !important;
}

body.dark-mode .step-number.active,
body.dark-mode .module-number.active,
.app.dark .step-number.active,
.app.dark .module-number.active {
    background: #5A9A92 !important;
    color: #1A2A3A !important;
}

/* Header/Navigation Elements */
body.dark-mode .nav-item.active,
body.dark-mode .tab.active,
.app.dark .nav-item.active,
.app.dark .tab.active {
    color: #5A9A92 !important;
    border-bottom-color: #5A9A92 !important;
}

/* Dividers/Separators */
body.dark-mode hr,
body.dark-mode .divider,
body.dark-mode .separator,
.app.dark hr,
.app.dark .divider,
.app.dark .separator {
    border-color: rgba(90, 154, 146, 0.2) !important;
    background: rgba(90, 154, 146, 0.2) !important;
}

/* Input Focus States */
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
.app.dark input:focus,
.app.dark textarea:focus,
.app.dark select:focus {
    border-color: #5A9A92 !important;
    box-shadow: 0 0 0 3px rgba(90, 154, 146, 0.2) !important;
}

/* Checkbox/Radio Custom Styles */
body.dark-mode input[type="checkbox"]:checked,
body.dark-mode input[type="radio"]:checked,
.app.dark input[type="checkbox"]:checked,
.app.dark input[type="radio"]:checked {
    background: #5A9A92 !important;
    border-color: #5A9A92 !important;
}

/* Toggle/Switch */
body.dark-mode .toggle.active,
body.dark-mode .switch.active,
.app.dark .toggle.active,
.app.dark .switch.active {
    background: #5A9A92 !important;
}

/* Tooltips */
body.dark-mode .tooltip,
body.dark-mode [data-tooltip]::after,
.app.dark .tooltip,
.app.dark [data-tooltip]::after {
    background: #2A4A5A !important;
    color: #E8E8E8 !important;
    border-color: rgba(90, 154, 146, 0.2) !important;
}

/* Dropdown Menus */
body.dark-mode .dropdown-menu,
body.dark-mode .select-dropdown,
.app.dark .dropdown-menu,
.app.dark .select-dropdown {
    background: #1A2A3A !important;
    border-color: rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .select-option:hover,
.app.dark .dropdown-item:hover,
.app.dark .select-option:hover {
    background: rgba(90, 154, 146, 0.15) !important;
}

body.dark-mode .dropdown-item.selected,
body.dark-mode .select-option.selected,
.app.dark .dropdown-item.selected,
.app.dark .select-option.selected {
    background: rgba(90, 154, 146, 0.2) !important;
    color: #5A9A92 !important;
}

/* ========================================================================
   BADGE LAYOUT - IDENTISCH FÜR BEIDE MODI (FINAL OVERRIDE)
   ======================================================================== */

/* Entferne alle Light Mode spezifischen Badge Backgrounds/Borders */
body:not(.dark-mode) .badge-item,
body:not(.dark-mode) .desktop-badges-grid .badge-item,
body:not(.dark-mode) #desktopBadgesGrid .badge-item {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* CSS Badge - nur das Icon, kein extra Hintergrund */
body:not(.dark-mode) .css-badge,
body:not(.dark-mode) .badge-item .css-badge {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Badges Grid - simple flexbox wie Dark Mode */
body:not(.dark-mode) .desktop-badges-grid,
body:not(.dark-mode) #desktopBadgesGrid,
body:not(.dark-mode) .badges-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
}


/* ========================================================================
   FIX: Top-Bar Logo IMMER versteckt (Login-Bereich zeigt bereits ein Logo)
   ======================================================================== */

.login-top-bar-logo {
    display: none !important;
}


/* ========================================================================
   MASTER FIX: Logo-Sichtbarkeit
   - Login-Bereich: Ein Logo je nach Mode/Breakpoint
   - Top-Bar: KEIN Logo (immer versteckt, da redundant)
   ======================================================================== */

/* Top-Bar Logos: IMMER versteckt */
.login-top-icon-mobile,
.login-top-icon-mobile.login-logo-light,
.login-top-icon-mobile.login-logo-dark,
.login-top-icon-desktop,
.login-top-icon-desktop.login-logo-light,
.login-top-icon-desktop.login-logo-dark,
body.dark-mode .login-top-icon-mobile,
body.dark-mode .login-top-icon-mobile.login-logo-light,
body.dark-mode .login-top-icon-mobile.login-logo-dark,
body.dark-mode .login-top-icon-desktop,
body.dark-mode .login-top-icon-desktop.login-logo-light,
body.dark-mode .login-top-icon-desktop.login-logo-dark {
    display: none !important;
}

/* === MOBILE (Default, < 1024px): Login-Logo === */

/* Desktop-Logos verstecken auf Mobile */
.login-logo-desktop,
.login-logo-desktop.login-logo-light,
.login-logo-desktop.login-logo-dark {
    display: none !important;
}

/* Light Mode Mobile: Light-Logo zeigen */
.login-logo-mobile.login-logo-light {
    display: inline-block !important;
}

/* Light Mode Mobile: Dark-Logo verstecken */
.login-logo-mobile.login-logo-dark {
    display: none !important;
}

/* Dark Mode Mobile: Light-Logo verstecken */
body.dark-mode .login-logo-mobile.login-logo-light {
    display: none !important;
}

/* Dark Mode Mobile: Dark-Logo zeigen */
body.dark-mode .login-logo-mobile.login-logo-dark {
    display: inline-block !important;
}

/* === DESKTOP (≥ 1024px): Login-Logo === */
@media (min-width: 1024px) {
    /* Mobile-Logos IMMER verstecken auf Desktop */
    .login-logo-mobile,
    .login-logo-mobile.login-logo-light,
    .login-logo-mobile.login-logo-dark,
    body.dark-mode .login-logo-mobile,
    body.dark-mode .login-logo-mobile.login-logo-light,
    body.dark-mode .login-logo-mobile.login-logo-dark {
        display: none !important;
    }
    
    /* Light Mode Desktop: Light-Logo zeigen */
    .login-logo-desktop.login-logo-light {
        display: inline-block !important;
    }
    
    /* Light Mode Desktop: Dark-Logo verstecken */
    .login-logo-desktop.login-logo-dark {
        display: none !important;
    }
    
    /* Dark Mode Desktop: Light-Logo verstecken */
    body.dark-mode .login-logo-desktop.login-logo-light {
        display: none !important;
    }
    
    /* Dark Mode Desktop: Dark-Logo zeigen */
    body.dark-mode .login-logo-desktop.login-logo-dark {
        display: inline-block !important;
    }
}

/* ========================================================================
   INTRO-SCREEN CLEANUP: "So funktionierts" und "Dauer" ausblenden
   Diese Infos wurden bereits auf der Startseite gezeigt
   ======================================================================== */

#introExplainTitle,
#introExplainList,
.intro-note {
    display: none !important;
}
/* =====================================================
   SOCIAL MEDIA POST STYLES - Reality Check
   ===================================================== */

/* === BASE CONTAINER === */
.social-post-container {
    margin: 16px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.social-post {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
}

.social-post-header {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 10px;
}

.social-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.social-post-user-info {
    flex: 1;
    min-width: 0;
}

.social-post-username {
    font-weight: 600;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-post-time {
    font-size: 12px;
    opacity: 0.7;
}

.social-post-content {
    padding: 0 12px 12px;
    word-wrap: break-word;
}

.social-post-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

.social-post-stats {
    display: flex;
    gap: 16px;
    padding: 8px 12px 12px;
    font-size: 13px;
    opacity: 0.8;
}

.social-post-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.social-post-platform-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 16px;
    opacity: 0.6;
}

/* === INSTAGRAM === */
.social-post.instagram {
    background: #fff;
    color: #262626;
    border: 1px solid #dbdbdb;
}

.social-post.instagram .social-post-avatar {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: white;
}

.social-post.instagram .social-post-header {
    border-bottom: 1px solid #efefef;
}

.social-post.instagram .social-post-stats {
    border-top: 1px solid #efefef;
}

/* === WHATSAPP === */
.social-post.whatsapp {
    background: #e7ffdb;
    color: #111b21;
    border-radius: 8px;
    border-left: 4px solid #25d366;
}

.social-post.whatsapp .social-post-avatar {
    background: #25d366;
    color: white;
}

.social-post.whatsapp .social-post-header {
    background: #dcf8c6;
}

.social-post.whatsapp .social-post-time {
    color: #667781;
}

/* === TIKTOK === */
.social-post.tiktok {
    background: #000;
    color: #fff;
}

.social-post.tiktok .social-post-avatar {
    background: linear-gradient(45deg, #69C9D0, #EE1D52);
    color: white;
}

.social-post.tiktok .social-post-username {
    color: #fff;
}

.social-post.tiktok .social-post-time {
    color: rgba(255,255,255,0.6);
}

.social-post.tiktok .social-post-content {
    color: #fff;
}

.social-post.tiktok .social-post-stats {
    color: rgba(255,255,255,0.8);
}

/* === TWITTER/X === */
.social-post.twitter {
    background: #fff;
    color: #0f1419;
    border: 1px solid #eff3f4;
}

.social-post.twitter .social-post-avatar {
    background: #1d9bf0;
    color: white;
}

.social-post.twitter .social-post-stats {
    color: #536471;
}

/* === FACEBOOK === */
.social-post.facebook {
    background: #fff;
    color: #050505;
    border: 1px solid #dddfe2;
}

.social-post.facebook .social-post-avatar {
    background: #1877f2;
    color: white;
}

.social-post.facebook .social-post-time {
    color: #65676b;
}

.social-post.facebook .social-post-stats {
    border-top: 1px solid #ced0d4;
    color: #65676b;
}

/* === YOUTUBE === */
.social-post.youtube {
    background: #0f0f0f;
    color: #fff;
}

.social-post.youtube .social-post-avatar {
    background: #ff0000;
    color: white;
}

.social-post.youtube .social-post-username {
    color: #fff;
}

.social-post.youtube .social-post-time {
    color: #aaa;
}

.social-post.youtube .social-post-content {
    color: #fff;
}

.social-post.youtube .social-post-stats {
    color: #aaa;
}

/* === DISCORD === */
.social-post.discord {
    background: #36393f;
    color: #dcddde;
    border-left: 4px solid #5865f2;
}

.social-post.discord .social-post-avatar {
    background: #5865f2;
    color: white;
    border-radius: 8px;
}

.social-post.discord .social-post-username {
    color: #fff;
}

.social-post.discord .social-post-time {
    color: #72767d;
}

/* === SLACK === */
.social-post.slack {
    background: #fff;
    color: #1d1c1d;
    border-left: 4px solid #4a154b;
}

.social-post.slack .social-post-avatar {
    background: #4a154b;
    color: white;
    border-radius: 4px;
}

.social-post.slack .social-post-time {
    color: #616061;
}

/* === SNAPCHAT === */
.social-post.snapchat {
    background: #fffc00;
    color: #000;
}

.social-post.snapchat .social-post-avatar {
    background: #000;
    color: #fffc00;
}

.social-post.snapchat .social-post-content {
    font-weight: 500;
}

/* === VERIFIED BADGE === */
.social-post-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #1d9bf0;
    border-radius: 50%;
    margin-left: 4px;
    font-size: 10px;
    color: white;
}

.social-post-verified::after {
    content: '✓';
}

/* === SPONSORED TAG === */
.social-post-sponsored {
    font-size: 11px;
    color: #65676b;
    margin-left: 4px;
}

/* === CONTEXT TEXT (sit field) === */
.meet-situation-context {
    margin-top: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
    border-left: 3px solid var(--primary, #8b5cf6);
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: var(--text-secondary, #666);
    font-style: italic;
}

.meet-situation-context:empty {
    display: none;
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    .social-post {
        font-size: 13px;
    }
    
    .social-post-avatar {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    .social-post-header {
        padding: 10px;
    }
    
    .social-post-content {
        padding: 0 10px 10px;
    }
}

/* ========================================================================
   CONSEQUENCE PAGE - INSTAGRAM STORY STYLE - FINAL OVERRIDES
   ======================================================================== */

/* Force Instagram Story Style for Consequence Screen */
body:not(.dark-mode) #screen-consequence,
.app:not(.dark) #screen-consequence,
html:not(.dark) #screen-consequence {
    background: linear-gradient(180deg, 
        #3F5F63 0%, 
        #4A7A7E 25%, 
        #3A8ABF 50%,
        #5BA3D4 75%,
        #7FBCE8 100%) !important;
    min-height: 100vh;
    padding-bottom: 100px !important;
}

/* Dezentes Pattern für weniger "leeren" Look */
body:not(.dark-mode) #screen-consequence::after,
.app:not(.dark) #screen-consequence::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(0deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    pointer-events: none;
}

body:not(.dark-mode) #screen-consequence .cons-intro-title,
.app:not(.dark) #screen-consequence .cons-intro-title {
    color: white !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

body:not(.dark-mode) #screen-consequence .cons-header,
.app:not(.dark) #screen-consequence .cons-header {
    background: rgba(255,255,255,0.15) !important;
    color: white !important;
    border: none !important;
    border-radius: 16px !important;
    margin: 0 16px 12px !important;
    display: inline-block !important;
}

body:not(.dark-mode) #screen-consequence .cons-section,
.app:not(.dark) #screen-consequence .cons-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body:not(.dark-mode) #screen-consequence .timeline-item,
.app:not(.dark) #screen-consequence .timeline-item {
    background: rgba(255,255,255,0.95) !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

body:not(.dark-mode) #screen-consequence .timeline-time,
.app:not(.dark) #screen-consequence .timeline-time {
    background: rgba(63, 95, 99, 0.1) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    color: #3F5F63 !important;
}

body:not(.dark-mode) #screen-consequence .victim-card,
.app:not(.dark) #screen-consequence .victim-card {
    background: rgba(255,255,255,0.97) !important;
    border-radius: 24px !important;
    border: none !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2) !important;
}

body:not(.dark-mode) #screen-consequence .impact-banner,
.app:not(.dark) #screen-consequence .impact-banner {
    background: rgba(255,255,255,0.95) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important;
}

body:not(.dark-mode) #screen-consequence .cta,
.app:not(.dark) #screen-consequence .cta {
    background: linear-gradient(0deg, rgba(12,62,100,0.95) 0%, transparent 100%) !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 16px !important;
    z-index: 10 !important;
}

body:not(.dark-mode) #screen-consequence .cta .btn-primary,
.app:not(.dark) #screen-consequence .cta .btn-primary {
    background: white !important;
    color: #3F5F63 !important;
    border-radius: 30px !important;
    border: none !important;
}

/* ========================================================================
   CONSEQUENCE PAGE - DARK MODE FIX
   ======================================================================== */

/* Dark Mode: Keep original dark style, NOT Instagram gradient */
body.dark-mode #screen-consequence,
.app.dark #screen-consequence,
html.dark #screen-consequence {
    background: transparent !important;
    min-height: auto !important;
}

body.dark-mode #screen-consequence::before,
.app.dark #screen-consequence::before {
    display: none !important;
}

body.dark-mode #screen-consequence .cons-intro-title,
.app.dark #screen-consequence .cons-intro-title {
    color: #E8E8E8 !important;
    text-shadow: none !important;
}

body.dark-mode #screen-consequence .cons-section,
.app.dark #screen-consequence .cons-section {
    margin: 16px !important;
    background: rgba(90, 154, 146, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(90, 154, 146, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode #screen-consequence .cons-header,
.app.dark #screen-consequence .cons-header {
    background: transparent !important;
    color: #E8E8E8 !important;
    border-bottom: 1px solid rgba(90, 154, 146, 0.12) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    display: block !important;
}

body.dark-mode #screen-consequence .timeline-item,
.app.dark #screen-consequence .timeline-item {
    background: rgba(21, 32, 37, 0.8) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    border: 1px solid rgba(90, 154, 146, 0.1) !important;
    box-shadow: none !important;
    padding: 14px !important;
}

body.dark-mode #screen-consequence .timeline-action,
.app.dark #screen-consequence .timeline-action {
    color: #E8E8E8 !important;
}

body.dark-mode #screen-consequence .timeline-time,
.app.dark #screen-consequence .timeline-time {
    background: rgba(90, 154, 146, 0.15) !important;
    color: #5A9A92 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
}

body.dark-mode #screen-consequence .timeline-consequence,
.app.dark #screen-consequence .timeline-consequence {
    color: rgba(184, 220, 210, 0.68) !important;
}

body.dark-mode #screen-consequence .newspaper,
.app.dark #screen-consequence .newspaper {
    background: rgba(21, 32, 37, 0.9) !important;
    border: 1px solid rgba(90, 154, 146, 0.12) !important;
    border-radius: 16px !important;
}

body.dark-mode #screen-consequence .victim-card,
.app.dark #screen-consequence .victim-card {
    background: rgba(90, 154, 146, 0.08) !important;
    border: 1px solid rgba(90, 154, 146, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    margin: 16px !important;
    padding: 24px !important;
}

body.dark-mode #screen-consequence .victim-header,
.app.dark #screen-consequence .victim-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(90, 154, 146, 0.1) !important;
}

body.dark-mode #screen-consequence .victim-name,
.app.dark #screen-consequence .victim-name {
    color: #E8E8E8 !important;
}

body.dark-mode #screen-consequence .victim-role,
.app.dark #screen-consequence .victim-role {
    color: rgba(184, 220, 210, 0.68) !important;
}

body.dark-mode #screen-consequence .victim-change-dramatic,
.app.dark #screen-consequence .victim-change-dramatic {
    background: transparent !important;
    padding: 20px 0 !important;
}

body.dark-mode #screen-consequence .victim-before-box,
.app.dark #screen-consequence .victim-before-box {
    background: rgba(21, 32, 37, 0.6) !important;
    border: 1px solid rgba(90, 154, 146, 0.1) !important;
    border-radius: 12px !important;
}

body.dark-mode #screen-consequence .victim-after-box,
.app.dark #screen-consequence .victim-after-box {
    background: rgba(21, 32, 37, 0.8) !important;
    border: 2px solid #E76F51 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(231, 111, 81, 0.25) !important;
}

body.dark-mode #screen-consequence .victim-card.positive .victim-after-box,
.app.dark #screen-consequence .victim-card.positive .victim-after-box {
    border-color: #5A9A92 !important;
    box-shadow: 0 4px 16px rgba(90, 154, 146, 0.25) !important;
}

body.dark-mode #screen-consequence .victim-box-label,
.app.dark #screen-consequence .victim-box-label {
    color: rgba(184, 220, 210, 0.68) !important;
}

body.dark-mode #screen-consequence .victim-box-text,
.app.dark #screen-consequence .victim-box-text {
    color: #E8E8E8 !important;
}

body.dark-mode #screen-consequence .victim-message,
.app.dark #screen-consequence .victim-message {
    background: transparent !important;
    padding: 0 !important;
}

body.dark-mode #screen-consequence .victim-message-bubble,
.app.dark #screen-consequence .victim-message-bubble {
    background: rgba(21, 32, 37, 0.8) !important;
    border-radius: 16px !important;
    border-left: 4px solid #5A9A92 !important;
}

body.dark-mode #screen-consequence .victim-message-bubble::before,
.app.dark #screen-consequence .victim-message-bubble::before {
    color: rgba(90, 154, 146, 0.2) !important;
}

body.dark-mode #screen-consequence .victim-message-name,
.app.dark #screen-consequence .victim-message-name {
    color: #E8E8E8 !important;
}

body.dark-mode #screen-consequence .victim-message-text,
.app.dark #screen-consequence .victim-message-text {
    color: rgba(184, 220, 210, 0.9) !important;
}

body.dark-mode #screen-consequence .victim-message-time,
.app.dark #screen-consequence .victim-message-time {
    color: rgba(184, 220, 210, 0.5) !important;
}

body.dark-mode #screen-consequence .impact-banner,
.app.dark #screen-consequence .impact-banner {
    background: rgba(90, 154, 146, 0.1) !important;
    border: 1px solid rgba(90, 154, 146, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

body.dark-mode #screen-consequence .impact-banner-title,
.app.dark #screen-consequence .impact-banner-title {
    color: #E8E8E8 !important;
}

body.dark-mode #screen-consequence .impact-banner-subtitle,
.app.dark #screen-consequence .impact-banner-subtitle {
    color: rgba(184, 220, 210, 0.68) !important;
}

body.dark-mode #screen-consequence .cta,
.app.dark #screen-consequence .cta {
    background: transparent !important;
    position: relative !important;
    padding: 16px !important;
}

body.dark-mode #screen-consequence .cta .btn-primary,
.app.dark #screen-consequence .cta .btn-primary {
    background: linear-gradient(135deg, #5A9A92 0%, #4A8A85 100%) !important;
    color: #0A1215 !important;
    border-radius: 12px !important;
    border: none !important;
}

/* ========================================================================
   IMMERSIVE FEATURES - Confetti, Shake, Animations
   ======================================================================== */

/* === 1. CONFETTI ANIMATION === */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: confetti-fall 3s ease-out forwards;
}

.confetti:nth-child(odd) { border-radius: 50%; }
.confetti:nth-child(even) { border-radius: 2px; }

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(-100px) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg) scale(0.5);
    }
}

/* === 2. SCREEN SHAKE === */
@keyframes screen-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-screen {
    animation: screen-shake 0.5s ease-in-out;
}

/* === 3. INSTAGRAM PROFILE RING === */
.story-ring {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-radius: 50%;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.story-ring img,
.story-ring .avatar-emoji {
    border: 3px solid white;
    border-radius: 50%;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.story-ring.seen {
    background: #dbdbdb;
}

body.dark-mode .story-ring img,
body.dark-mode .story-ring .avatar-emoji,
.app.dark .story-ring img,
.app.dark .story-ring .avatar-emoji {
    border-color: #0A1215;
}

/* === 4. TYPING INDICATOR === */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: #f0f0f0;
    border-radius: 18px;
    margin: 8px 0;
}

body.dark-mode .typing-indicator,
.app.dark .typing-indicator {
    background: rgba(90, 154, 146, 0.1);
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #999;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

body.dark-mode .typing-indicator span,
.app.dark .typing-indicator span {
    background: #5A9A92;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0s; }

@keyframes typing-bounce {
    0%, 80%, 100% { 
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% { 
        transform: scale(1);
        opacity: 1;
    }
}

/* === 5. LIKE HEART ANIMATION === */
.like-heart-float {
    position: absolute;
    font-size: 24px;
    pointer-events: none;
    animation: heart-float 1s ease-out forwards;
    z-index: 100;
}

@keyframes heart-float {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(-30px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(1);
    }
}

/* Like button pulse */
.like-btn.liked {
    animation: like-pulse 0.3s ease;
}

@keyframes like-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* === 6. REACTION EMOJIS BAR === */
.reaction-bar {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.03);
    border-radius: 24px;
    margin-top: 8px;
}

body.dark-mode .reaction-bar,
.app.dark .reaction-bar {
    background: rgba(90, 154, 146, 0.08);
}

.reaction-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

body.dark-mode .reaction-btn,
.app.dark .reaction-btn {
    background: rgba(21, 32, 37, 0.8);
    color: #E8E8E8;
}

.reaction-btn:hover {
    transform: scale(1.1);
}

.reaction-btn.active {
    background: #e8f4fd;
    box-shadow: 0 0 0 2px #3F5F63;
}

body.dark-mode .reaction-btn.active,
.app.dark .reaction-btn.active {
    background: rgba(90, 154, 146, 0.2);
    box-shadow: 0 0 0 2px #5A9A92;
}

.reaction-count {
    font-weight: 600;
    font-size: 12px;
    color: #666;
}

body.dark-mode .reaction-count,
.app.dark .reaction-count {
    color: rgba(184, 220, 210, 0.68);
}

/* Reaction pop animation */
.reaction-btn.just-reacted {
    animation: reaction-pop 0.4s ease;
}

@keyframes reaction-pop {
    0% { transform: scale(1); }
    30% { transform: scale(1.4); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* === 7. TIMERAFFER UHR === */
.time-lapse {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(63, 95, 99, 0.05);
    border-radius: 16px;
    margin: 16px;
}

body.dark-mode .time-lapse,
.app.dark .time-lapse {
    background: rgba(90, 154, 146, 0.08);
}

.time-lapse-icon {
    font-size: 2em;
    animation: clock-tick 1s infinite;
}

@keyframes clock-tick {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
}

.time-lapse-display {
    font-size: 1.5em;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: #3F5F63;
    min-width: 120px;
    text-align: center;
}

body.dark-mode .time-lapse-display,
.app.dark .time-lapse-display {
    color: #5A9A92;
}

.time-lapse-label {
    font-size: 0.85em;
    color: #666;
}

body.dark-mode .time-lapse-label,
.app.dark .time-lapse-label {
    color: rgba(184, 220, 210, 0.68);
}

/* === 8. NEWS TICKER === */
.news-ticker {
    background: linear-gradient(90deg, #c0392b, #e74c3c);
    color: white;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
}

.news-ticker::before {
    content: '⚡ EILMELDUNG';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 10px 16px;
    background: #922b21;
    font-weight: 700;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    z-index: 1;
}

.news-ticker-content {
    display: inline-block;
    padding-left: 140px;
    white-space: nowrap;
    animation: ticker-scroll 15s linear infinite;
}

@keyframes ticker-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.news-ticker-text {
    font-weight: 500;
}

/* === 9. FOLLOWER COUNTER === */
.follower-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border-radius: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    font-weight: 600;
}

body.dark-mode .follower-counter,
.app.dark .follower-counter {
    background: rgba(21, 32, 37, 0.9);
}

.follower-counter-icon {
    font-size: 1.2em;
}

.follower-counter-value {
    font-size: 1.1em;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: #3F5F63;
    transition: all 0.3s ease;
}

body.dark-mode .follower-counter-value,
.app.dark .follower-counter-value {
    color: #5A9A92;
}

.follower-counter-value.increasing {
    color: #27ae60;
    animation: counter-pop 0.3s ease;
}

.follower-counter-value.decreasing {
    color: #e74c3c;
    animation: counter-pop 0.3s ease;
}

@keyframes counter-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.follower-counter-label {
    font-size: 0.85em;
    color: #666;
}

body.dark-mode .follower-counter-label,
.app.dark .follower-counter-label {
    color: rgba(184, 220, 210, 0.68);
}

/* ========================================================================
   USER POST BOX - Deutlicher als eigener Beitrag erkennbar
   ======================================================================== */

.user-post-box {
    background: linear-gradient(135deg, rgba(63, 95, 99, 0.08) 0%, rgba(63, 95, 99, 0.04) 100%);
    border: 2px solid rgba(63, 95, 99, 0.15);
    border-left: 4px solid #3F5F63;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 12px 16px;
    position: relative;
}

.user-post-label {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #3F5F63;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-post-content {
    font-size: 1em;
    line-height: 1.5;
    color: #1a1a1a;
}

.user-post-content .insta-post-caption-name {
    font-weight: 700;
    color: #3F5F63;
    margin-right: 8px;
}

.user-post-content .insta-post-caption-text {
    color: #333;
}

/* Dark Mode */
body.dark-mode .user-post-box,
.app.dark .user-post-box {
    background: linear-gradient(135deg, rgba(90, 154, 146, 0.1) 0%, rgba(90, 154, 146, 0.05) 100%);
    border-color: rgba(90, 154, 146, 0.2);
    border-left-color: #5A9A92;
}

body.dark-mode .user-post-label,
.app.dark .user-post-label {
    color: #5A9A92;
}

body.dark-mode .user-post-content,
.app.dark .user-post-content {
    color: #E8E8E8;
}

body.dark-mode .user-post-content .insta-post-caption-name,
.app.dark .user-post-content .insta-post-caption-name {
    color: #5A9A92;
}

body.dark-mode .user-post-content .insta-post-caption-text,
.app.dark .user-post-content .insta-post-caption-text {
    color: rgba(184, 220, 210, 0.9);
}

/* Schlechte Entscheidung - Roter Akzent */
.user-post-box.bad-choice {
    border-left-color: #e74c3c;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.08) 0%, rgba(231, 76, 60, 0.03) 100%);
}

.user-post-box.bad-choice .user-post-label {
    color: #c0392b;
}

body.dark-mode .user-post-box.bad-choice,
.app.dark .user-post-box.bad-choice {
    border-left-color: #E76F51;
    background: linear-gradient(135deg, rgba(231, 111, 81, 0.15) 0%, rgba(231, 111, 81, 0.05) 100%);
}

body.dark-mode .user-post-box.bad-choice .user-post-label,
.app.dark .user-post-box.bad-choice .user-post-label {
    color: #E76F51;
}

/* Gute Entscheidung - Grüner Akzent */
.user-post-box.good-choice {
    border-left-color: #27ae60;
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.08) 0%, rgba(39, 174, 96, 0.03) 100%);
}

.user-post-box.good-choice .user-post-label {
    color: #1e8449;
}

/* ========================================================================
   BADGE UNLOCK POPUP - Grosses animiertes Popup
   ======================================================================== */

.badge-unlock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: badgeOverlayFadeIn 0.3s ease;
    transition: opacity 0.3s;
}

@keyframes badgeOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.badge-unlock-popup {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
    max-width: 340px;
    width: 90%;
    position: relative;
    overflow: hidden;
    animation: badgePopupBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

@keyframes badgePopupBounce {
    0% { transform: scale(0.3) translateY(50px); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.badge-unlock-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(63, 95, 99, 0.1) 0%, transparent 50%);
    animation: badgeGlowRotate 3s linear infinite;
    pointer-events: none;
}

@keyframes badgeGlowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.badge-unlock-icon {
    font-size: 5em;
    margin-bottom: 16px;
    animation: badgeIconPulse 1s ease infinite;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 15px rgba(63, 95, 99, 0.3));
}

@keyframes badgeIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.badge-unlock-label {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #3F5F63;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.badge-unlock-name {
    font-size: 1.8em;
    font-weight: 800;
    color: #3F5F63;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.badge-unlock-desc {
    font-size: 1em;
    color: #4a5568;
    margin-bottom: 24px;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

.badge-unlock-btn {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(63, 95, 99, 0.3);
}

.badge-unlock-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 30px rgba(63, 95, 99, 0.4);
}

/* Dark Mode Variante */
body.dark-mode .badge-unlock-popup,
.app.dark .badge-unlock-popup {
    background: linear-gradient(135deg, #0A1215 0%, #152025 50%, #1A2A30 100%);
    box-shadow: 
        0 0 60px rgba(90, 154, 146, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.5);
}

body.dark-mode .badge-unlock-glow,
.app.dark .badge-unlock-glow {
    background: radial-gradient(circle, rgba(90, 154, 146, 0.3) 0%, transparent 50%);
}

body.dark-mode .badge-unlock-label,
.app.dark .badge-unlock-label {
    color: #5A9A92;
}

body.dark-mode .badge-unlock-name,
.app.dark .badge-unlock-name {
    color: white;
}

body.dark-mode .badge-unlock-desc,
.app.dark .badge-unlock-desc {
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .badge-unlock-btn,
.app.dark .badge-unlock-btn {
    background: linear-gradient(135deg, #5A9A92 0%, #4A8A85 100%);
    color: #0A1215;
}

/* ========================================================================
   CONTINUE DIALOG - Fortsetzen-Dialog
   ======================================================================== */

.continue-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
    padding: 20px;
}

.continue-dialog {
    background: white;
    border-radius: 24px;
    padding: 32px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.continue-dialog-icon {
    font-size: 4em;
    margin-bottom: 16px;
}

.continue-dialog-title {
    font-size: 1.5em;
    font-weight: 700;
    color: #3F5F63;
    margin-bottom: 12px;
}

.continue-dialog-text {
    font-size: 1.05em;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 24px;
}

.continue-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.continue-btn {
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.continue-btn-primary {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(63, 95, 99, 0.3);
}

.continue-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(63, 95, 99, 0.4);
}

.continue-btn-secondary {
    background: #f1f5f9;
    color: #64748b;
    border: 2px solid #e2e8f0;
}

.continue-btn-secondary:hover {
    background: #e2e8f0;
    color: #475569;
}

/* Dark Mode */
body.dark-mode .continue-dialog,
.app.dark .continue-dialog {
    background: linear-gradient(135deg, #0A1215 0%, #152025 100%);
    border: 1px solid rgba(90, 154, 146, 0.2);
}

body.dark-mode .continue-dialog-title,
.app.dark .continue-dialog-title {
    color: #5A9A92;
}

body.dark-mode .continue-dialog-text,
.app.dark .continue-dialog-text {
    color: rgba(184, 220, 210, 0.8);
}

body.dark-mode .continue-btn-primary,
.app.dark .continue-btn-primary {
    background: linear-gradient(135deg, #5A9A92 0%, #4A8A85 100%);
    color: #0A1215;
}

body.dark-mode .continue-btn-secondary,
.app.dark .continue-btn-secondary {
    background: rgba(90, 154, 146, 0.1);
    color: rgba(184, 220, 210, 0.7);
    border-color: rgba(90, 154, 146, 0.2);
}

body.dark-mode .continue-btn-secondary:hover,
.app.dark .continue-btn-secondary:hover {
    background: rgba(90, 154, 146, 0.2);
}

/* ========================================================================
   ONBOARDING FIX - FINALE FARBEN (überschreibt alles!)
   ======================================================================== */

.onboarding-card {
    background: #ffffff !important;
}

.onboarding-title {
    color: #3F5F63 !important;
    -webkit-text-fill-color: #3F5F63 !important;
}

.onboarding-text {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
}

.onboarding-btn {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.onboarding-skip {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* Dark Mode Override */
body.dark-mode .onboarding-card,
.app.dark .onboarding-card,
html.dark .onboarding-card {
    background: #0A1215 !important;
}

body.dark-mode .onboarding-title,
.app.dark .onboarding-title,
html.dark .onboarding-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.dark-mode .onboarding-text,
.app.dark .onboarding-text,
html.dark .onboarding-text {
    color: #E8E8E8 !important;
    -webkit-text-fill-color: #E8E8E8 !important;
}

body.dark-mode .onboarding-btn,
.app.dark .onboarding-btn,
html.dark .onboarding-btn {
    background: linear-gradient(135deg, #5A9A92 0%, #4A8A85 100%) !important;
    color: #0A1215 !important;
    -webkit-text-fill-color: #0A1215 !important;
}

body.dark-mode .onboarding-skip,
.app.dark .onboarding-skip,
html.dark .onboarding-skip {
    color: #A0AEB5 !important;
    -webkit-text-fill-color: #A0AEB5 !important;
}


/* ========================================================================
   LIGHT MODE CONSEQUENCE - Bessere Raumnutzung
   ======================================================================== */

/* Content Container soll mehr Platz nutzen */
body:not(.dark-mode) #screen-consequence .consequence,
.app:not(.dark) #screen-consequence .consequence {
    padding-bottom: 120px !important;
    min-height: calc(100vh - 120px) !important;
}

/* Victim Card größer und prominenter */
body:not(.dark-mode) #screen-consequence .victim-card,
.app:not(.dark) #screen-consequence .victim-card {
    padding: 24px !important;
    margin: 20px 16px !important;
}

/* Quote prominenter */
body:not(.dark-mode) #screen-consequence .victim-quote,
.app:not(.dark) #screen-consequence .victim-quote {
    font-size: 1.1em !important;
    padding: 20px !important;
    background: rgba(63, 95, 99, 0.05) !important;
    border-left: 4px solid #3F5F63 !important;
    border-radius: 0 12px 12px 0 !important;
    margin-top: 16px !important;
}

/* Impact Banner größer */
body:not(.dark-mode) #screen-consequence .impact-banner,
.app:not(.dark) #screen-consequence .impact-banner {
    padding: 20px 24px !important;
    margin: 16px !important;
}

/* Timeline Items mit mehr Abstand */
body:not(.dark-mode) #screen-consequence .timeline-item,
.app:not(.dark) #screen-consequence .timeline-item {
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
}

/* Newspaper prominenter wenn vorhanden */
body:not(.dark-mode) #screen-consequence .newspaper,
.app:not(.dark) #screen-consequence .newspaper {
    margin: 20px 16px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
}

/* Section Titel */
body:not(.dark-mode) #screen-consequence .cons-section-title,
.app:not(.dark) #screen-consequence .cons-section-title {
    color: white !important;
    font-size: 0.9em !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    opacity: 0.9 !important;
    margin: 24px 16px 12px !important;
}

/* ========================================================================
   OPTIONS - Linker Rand komplett deaktivieren
   ======================================================================== */

/* Alle ::before Pseudo-Elemente bei Options entfernen */
.option::before,
.option:hover::before,
.option.expanded::before,
.option.selected::before,
body:not(.dark-mode) .option::before,
body:not(.dark-mode) .option:hover::before,
body:not(.dark-mode) .option.expanded::before,
body.dark-mode .option::before,
body.dark-mode .option:hover::before,
body.dark-mode .option.expanded::before,
.app.dark .option::before,
.app.dark .option:hover::before,
.app.dark .option.expanded::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* Hover ohne translateX */
.option:hover,
body:not(.dark-mode) .option:hover {
    transform: translateY(-2px) !important;
}

.option.expanded,
body:not(.dark-mode) .option.expanded {
    transform: none !important;
}
/* ================================================================
   LIGHT MODE FIX - Result Screen (27.12.2025)
   Alle Texte müssen im hellen Modus lesbar sein
   ================================================================ */

/* Result Summary Box - Zahlen und Labels */
body:not(.dark-mode) .result-summary {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
    color: white !important;
}
body:not(.dark-mode) .result-summary-title,
body:not(.dark-mode) .result-summary-value,
body:not(.dark-mode) .result-summary-label {
    color: white !important;
}
body:not(.dark-mode) .result-summary-item {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    padding: 16px !important;
}
body:not(.dark-mode) .result-summary-grid {
    color: white !important;
}

/* Badges Grid - Alle Badges sichtbar machen */
body:not(.dark-mode) .badges {
    background: rgba(255, 255, 255, 0.85) !important;
}
body:not(.dark-mode) .badges-title {
    color: #3F5F63 !important;
}
body:not(.dark-mode) .badge {
    background: white !important;
    border: 2px solid rgba(63, 95, 99, 0.2) !important;
}
body:not(.dark-mode) .badge.earned {
    border-color: #3F5F63 !important;
    background: rgba(63, 95, 99, 0.05) !important;
}
body:not(.dark-mode) .badge-name {
    color: #3F5F63 !important;
}
body:not(.dark-mode) .badge.locked .badge-name {
    color: #888 !important;
}

/* My Tips */
body:not(.dark-mode) .my-tips {
    background: rgba(255, 255, 255, 0.85) !important;
}
body:not(.dark-mode) .my-tips-title {
    color: #3F5F63 !important;
}
body:not(.dark-mode) .my-tips-item {
    background: rgba(63, 95, 99, 0.05) !important;
    color: #3F5F63 !important;
    border: 1px solid rgba(63, 95, 99, 0.15) !important;
}

/* Personality / Medien-Typ */
body:not(.dark-mode) .personality {
    background: rgba(255, 255, 255, 0.85) !important;
}
body:not(.dark-mode) .personality-label {
    color: #1A5276 !important;
}
body:not(.dark-mode) .personality-type {
    color: #3F5F63 !important;
    -webkit-text-fill-color: #3F5F63 !important;
    background: none !important;
}
body:not(.dark-mode) .personality-desc {
    color: #374151 !important;
}

/* Transfer Task / Mission */
body:not(.dark-mode) .transfer-task {
    background: rgba(255, 255, 255, 0.85) !important;
}
body:not(.dark-mode) .transfer-title {
    color: #3F5F63 !important;
}
body:not(.dark-mode) .transfer-text {
    color: #374151 !important;
}
body:not(.dark-mode) .transfer-checklist {
    background: rgba(63, 95, 99, 0.05) !important;
}
body:not(.dark-mode) .transfer-item {
    color: #3F5F63 !important;
    border-color: rgba(63, 95, 99, 0.1) !important;
}
body:not(.dark-mode) .transfer-cta {
    color: #3F5F63 !important;
}

/* Achievements */
body:not(.dark-mode) .achievements-section {
    background: linear-gradient(135deg, #FDF6E3 0%, #F5E4B8 100%) !important;
}
body:not(.dark-mode) .achievements-title {
    color: #8B6B35 !important;
}
body:not(.dark-mode) .achievement {
    background: rgba(255, 255, 255, 0.9) !important;
}
body:not(.dark-mode) .achievement-name {
    color: #3F5F63 !important;
}
body:not(.dark-mode) .achievement-desc {
    color: #666 !important;
}

/* What If Teaser */
body:not(.dark-mode) .whatif-teaser {
    background: rgba(255, 255, 255, 0.85) !important;
}
body:not(.dark-mode) .whatif-title {
    color: #5b21b6 !important;
}
body:not(.dark-mode) .whatif-text {
    color: #6b21a8 !important;
}

/* Share Section */
body:not(.dark-mode) .share {
    background: rgba(255, 255, 255, 0.85) !important;
}
body:not(.dark-mode) .share-title {
    color: #3F5F63 !important;
}

/* Certificate Section */
body:not(.dark-mode) .certificate-section {
    background: rgba(255, 255, 255, 0.85) !important;
}
body:not(.dark-mode) .certificate-title {
    color: #3F5F63 !important;
}
body:not(.dark-mode) .certificate-desc {
    color: #374151 !important;
}

/* Result Score */
body:not(.dark-mode) .result-score {
    background: rgba(255, 255, 255, 0.85) !important;
}
body:not(.dark-mode) .result-score-title {
    color: #3F5F63 !important;
}
body:not(.dark-mode) .result-score-value {
    color: #3F5F63 !important;
}
body:not(.dark-mode) .result-score-compare {
    color: #374151 !important;
}
body:not(.dark-mode) .result-score-bar {
    background: rgba(63, 95, 99, 0.1) !important;
}
body:not(.dark-mode) .result-score-fill {
    background: linear-gradient(90deg, #3F5F63 0%, #4A7A7E 100%) !important;
}

/* === CRITICAL FIX: Help Overlay Stacking Context === */
/* Sicherstellen dass help-overlay wirklich über allem liegt */
body .help-overlay.show,
html .help-overlay.show,
.app .help-overlay.show,
.desktop-center .help-overlay.show,
#helpOverlay.show,
#aboutOverlay.show {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    background: rgba(0,0,0,0.6) !important;
}

/* Help-Modal muss auch sichtbar sein */
.help-overlay.show .help-modal,
#helpOverlay.show .help-modal,
#aboutOverlay.show .help-modal,
#aboutOverlay.show .about-modal {
    position: relative !important;
    z-index: 1000000 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    max-width: 500px !important;
    width: 90% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    background: rgba(232, 242, 237, 0.95) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

/* === BILD-FARBKORREKTUR: Cyan → Teal === */
/* Avatare, Icons und andere Grafiken farblich anpassen */

/* Avatare */
.avatar-picker img,
.avatar-img,
.user-avatar img,
.desktop-avatar img,
.intro-avatar img,
img[src*="avatar"] {
    filter: hue-rotate(-25deg) saturate(0.65) brightness(1.0);
}

/* Age-Group Icons (Controller, Handy, AirPods, Like) */
.wizard-age-icon img,
.age-icon img,
img[src*="icon_age"] {
    filter: hue-rotate(-25deg) saturate(0.60) brightness(1.0);
}

/* Module Icons */
.module-icon img,
img[src*="modul"] {
    filter: hue-rotate(-25deg) saturate(0.65);
}

/* General Teal Adjustment für alle UI-Bilder */
img[src*="assets/images/ui/"] {
    filter: hue-rotate(-25deg) saturate(0.65) brightness(1.0);
}

/* Ausnahme: Logo und Favicons nicht anpassen */
img[src*="mimikama_logo"],
img[src*="favicon"],
img[src*="Vertrag"] {
    filter: none !important;
}

/* === VERSTÄRKTE BILD-FARBKORREKTUR === */
/* Alle Grafiken: Cyan/Blau → gedämpftes Teal */

/* Alle Bilder in der App außer Logo */
.app img:not([src*="mimikama_logo"]):not([src*="favicon"]),
.screen img:not([src*="mimikama_logo"]),
.avatar-picker img,
.intro-avatar img,
.desktop-avatar img,
.user-avatar img,
.wizard-age-icon img,
.age-card img,
.module-icon img,
.module-card img,
img[src*="avatar"],
img[src*="icon"],
img[src*="modul"] {
    filter: hue-rotate(-30deg) saturate(0.55) brightness(0.98) !important;
}

/* Avatare speziell - noch gedämpfter */
.avatar-option img,
.avatar-selected img,
.intro-avatar img {
    filter: hue-rotate(-30deg) saturate(0.50) brightness(0.95) !important;
}

/* ================================================================
   🔧 LIGHT MODE FIX - Result Hero & Stats LESBAR (19.01.2026)
   Alle Texte im Result Screen müssen lesbar sein!
   ================================================================ */

/* Result Hero - Titel und Subtitle dunkel machen */
body:not(.dark-mode) .result-hero .result-title,
body:not(.dark-mode) .result-title {
    color: #2D4548 !important;
    text-shadow: none !important;
}

body:not(.dark-mode) .result-hero .result-subtitle,
body:not(.dark-mode) .result-subtitle {
    color: #3F5F63 !important;
    opacity: 1 !important;
}

/* Result Stats Zahlen (6, 2, 2 etc.) - dunkel und lesbar */
body:not(.dark-mode) .result-summary-value,
body:not(.dark-mode) .result-stat-value,
body:not(.dark-mode) .result-stats .stat-value,
body:not(.dark-mode) .intro-stat-number,
body:not(.dark-mode) .stats-grid .stat-number {
    color: #2D4548 !important;
    font-weight: 700 !important;
}

body:not(.dark-mode) .result-summary-label,
body:not(.dark-mode) .result-stat-label,
body:not(.dark-mode) .result-stats .stat-label,
body:not(.dark-mode) .intro-stat-label,
body:not(.dark-mode) .stats-grid .stat-label {
    color: #3F5F63 !important;
}

/* Result Summary Box - dunkler Hintergrund für Kontrast */
body:not(.dark-mode) .result-summary {
    background: linear-gradient(135deg, #3F5F63 0%, #4A7A7E 100%) !important;
}

body:not(.dark-mode) .result-summary .result-summary-value,
body:not(.dark-mode) .result-summary .result-summary-label,
body:not(.dark-mode) .result-summary .result-summary-title {
    color: white !important;
}

/* Medienkompetenz Score */
body:not(.dark-mode) .result-score-title,
body:not(.dark-mode) .score-title {
    color: #2D4548 !important;
}

body:not(.dark-mode) .result-score-value,
body:not(.dark-mode) .score-value,
body:not(.dark-mode) .score-percent {
    color: #3F5F63 !important;
    font-weight: 800 !important;
}

/* Tipps Titel */
body:not(.dark-mode) .my-tips-title,
body:not(.dark-mode) .tips-title {
    color: #2D4548 !important;
}

/* CHILLBERT Nachricht */
body:not(.dark-mode) .mascot-message,
body:not(.dark-mode) .chillbert-message {
    color: #2D4548 !important;
}