/* ===== CORE.CSS - Basis-Styles für alle Seiten ===== */
/* Test status update */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    /* Colors - Light Mode */
    --color-bg: #e8f5e9;
    --color-text: #333333;
    --color-text-secondary: #666666;
    --color-text-muted: #666666;

    /* Primary Colors */
    --color-primary: #2e7d32;
    --color-primary-rgb: 46, 125, 50;
    --color-primary-gradient-start: #667eea;
    --color-primary-gradient-end: #764ba2;

    /* Accent Colors */
    --color-accent: #764ba2;
    --color-accent-green: #10b981;
    --color-accent-green-dark: #059669;
    --color-accent-red: #ff8a65;

    /* UI Colors */
    --color-card-bg: #ffffff;
    --color-border: #dddddd;
    --color-shadow: rgba(0, 0, 0, 0.1);

    /* Gray Scale */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Thematische Farben */
    --color-teal: #14b8a6;
    --color-teal-light: #ccfbf1;
    --color-teal-dark: #0d9488;

    --color-blue: #3b82f6;
    --color-blue-light: #dbeafe;
    --color-blue-dark: #2563eb;

    --color-pink: #ec4899;
    --color-pink-light: #fce7f3;
    --color-pink-dark: #db2777;

    --color-purple: #8b5cf6;
    --color-purple-light: #ede9fe;
    --color-purple-dark: #7c3aed;

    --color-yellow: #f59e0b;
    --color-yellow-light: #fef3c7;
    --color-yellow-dark: #d97706;

    --color-orange: #f97316;
    --color-orange-light: #ffedd5;
    --color-orange-dark: #ea580c;

    /* Semantische Farben */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-error: #ef4444;
    --color-error-light: #fef2f2;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;

    /* Exercise/Section Colors */
    --color-exercise-bg: wheat;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Typography - Corporate Design (einheitlich für ALLE Seiten) */
    --font-family: 'Source Sans 3', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-heading: 'Lekton', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --line-height: 1.6;

    /* Border Radius */
    --border-radius: 8px;
    --border-radius-lg: 15px;

    /* Shadows */
    --shadow-sm: 0 2px 4px var(--color-shadow);
    --shadow: 0 4px 6px var(--color-shadow);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 6px 20px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.25);

    /* Transitions - OPTIMIZED for performance */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.25s ease-out;
    --transition-slow: 0.4s ease-out;

    /* ===== GOLDENER SCHNITT - Block Design ===== */
    --phi: 1.618;
    --section-gap: 24px;
    --header-gap: 15px;               /* ≈ 24px / 1.618 */
    --section-gap-mobile: 16px;
    --header-gap-mobile: 10px;
    --block-radius: 20px;
    --block-border-color: #667eea;
    --block-border-width: 2px;

    /* ===== NEUE DESIGN TOKENS (Inline-Vermeidung) ===== */

    /* Border Widths */
    --border-width-thin: 1px;
    --border-width-normal: 2px;
    --border-width-thick: 3px;
    --border-width-accent: 5px;

    /* Border Radius (erweitert) */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-2xl: 25px;
    --radius-round: 50%;
    --radius-full: 9999px;

    /* Z-Index System */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 900;
    --z-navigation: 1000;
    --z-modal-backdrop: 9000;
    --z-modal: 9500;
    --z-toast: 10000;
    --z-tooltip: 10500;

    /* Container-Breiten */
    --container-xs: 400px;
    --container-sm: 500px;
    --container-md: 800px;
    --container-lg: 1000px;
    --container-xl: 1200px;
    --container-xxl: 1400px;

    /* Button Sizes */
    --btn-padding-sm: 8px 16px;
    --btn-padding-md: 12px 24px;
    --btn-padding-lg: 15px 30px;
    --btn-radius: var(--radius-lg);

    /* Input/Form Sizes */
    --input-padding: 12px 15px;
    --input-radius: var(--radius-md);
    --input-border: var(--border-width-normal) solid var(--color-border);

    /* Animation Durations */
    --duration-instant: 0.1s;
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;
    --duration-slower: 0.6s;

    /* Easing Functions */
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Opacity Levels */
    --opacity-muted: 0.6;
    --opacity-disabled: 0.5;
    --opacity-hover: 0.8;
    --opacity-overlay-light: 0.1;
    --opacity-overlay-medium: 0.5;
    --opacity-overlay-dark: 0.7;

    /* Icon Sizes */
    --icon-xs: 14px;
    --icon-sm: 18px;
    --icon-md: 24px;
    --icon-lg: 32px;
    --icon-xl: 48px;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    --leading-loose: 2;

    /* Breakpoints (nur zur Dokumentation - CSS kann diese nicht in @media nutzen) */
    /* --bp-mobile: 480px;   */
    /* --bp-tablet: 768px;   */
    /* --bp-desktop: 1024px; */
    /* --bp-wide: 1200px;    */
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* GPU acceleration for animated elements */
.topic-card,
.topic-card-7,
.topic-card-8,
.topic-card-13,
.exercise-card,
.btn,
button {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce repaints */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Scroll behavior - auto verhindert Hüpfen bei Anchor-Links */
html {
    scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.exercise-section {
    background-color: wheat;
    padding: 12px;
}

.recipe-section {
    background-color: wheat;
    padding: 12px;
}

.calc-step {
    background: #4f81b4;
}

.calculator-section {
    background: linear-gradient(360deg, #f5f7fa, #5a86cc);
}

/* ===== PLACEHOLDER LINK STYLES ===== */

/* Coming Soon Badge */
.coming-soon {
    position: relative;
}

.coming-soon .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff9800;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7em;
    font-weight: bold;
    white-space: nowrap;
    /* Animation removed for better performance */
}

/* Deaktivierte Links */
.topic-link.coming-soon {
    color: #999 !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
}

.topic-link.coming-soon:hover {
    color: #999 !important;
    text-decoration: line-through !important;
    transform: none !important;
}

/* Project Link Coming Soon */
.project-link.coming-soon {
    opacity: 0.6;
    cursor: not-allowed;
    background: #ccc !important;
}

.project-link.coming-soon:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #ccc !important;
}

/* === RESET & BASICS === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    background: linear-gradient(to bottom, #e8f5e9 0%, #fff9c4 50%, #ffe0b2 100%);
    min-height: 100vh;
    padding: 20px;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== CORPORATE DESIGN - Typography Rules ===== */
/*
 * EINHEITLICH FÜR ALLE SEITEN:
 * - Überschriften: Lekton
 * - Fließtext: Source Sans 3
 *
 * Gilt für ALLE Klassen (1-13, BWL, etc.)
 */

/* Alle Überschriften: Lekton */
h1, h2, h3, h4, h5, h6,
.grundschule-header h1,
.mega-header,
.category-header,
.section-title {
    font-family: var(--font-family-heading);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* === USER INFO === */
.user-info {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95em;
    border-bottom: 3px solid #4caf50;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.user-info a {
    color: white;
    background: rgba(255,255,255,0.15);
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    /* transition removed for performance */
    border: 1px solid rgba(255,255,255,0.3);
    font-weight: 500;
    font-size: 0.9em;
}

.user-info a:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.user-info span {
    margin-left: auto;
    font-weight: 500;
    opacity: 0.95;
}

.logout-btn {
    background: rgba(244,67,54,0.2) !important;
    border-color: rgba(244,67,54,0.5) !important;
}

.logout-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

/* === BACK LINK === */
.back-to-main {
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 0 20px;
}

/* Back-Link Container - visuelle Styles nur auf dem a-Element (in klasse-common.css) */
.back-link,
.back-to-overview {
    margin-bottom: 15px;
}

/* Fallback fuer Seiten ohne klasse-common.css */
.back-link a,
.back-to-overview a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.back-link a:hover,
.back-to-overview a:hover {
    transform: translateX(-5px);
    color: #764ba2;
    background: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* === HEADER === */
.header-main {
    text-align: center;
    padding: 30px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 40px;
}

.header-main h1 {
    color: #2e7d32;
    font-size: 2.5em;
    margin-bottom: 10px;
}

.subtitle {
    color: #666;
    font-size: 1.1em;
}

/* === CONTENT === */
.content-main {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 30px;
}

.content-main h2 {
    color: #667eea;
    font-size: 2em;
    margin-bottom: 20px;
    border-bottom: 3px solid #667eea;
    padding-bottom: 10px;
}

.section {
    margin: 30px 0;
}

/* === INFO BOX === */
.info-box {
    background: #fff9e6;
    border-left: 5px solid #ffc107;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
}

.info-box h4 {
    color: #f57c00;
    margin-bottom: 10px;
}

/* === FOOTER === */
.site-footer {
    text-align: center;
    padding: 40px 20px;
    margin-top: 60px;
}

.footer-box {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 15px;
    padding: 20px 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.footer-copyright {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #4f46e5;
}

.footer-links .whatsapp-link {
    color: #25D366;
}

.footer-links .whatsapp-link:hover {
    color: #128C7E;
}

@media (max-width: 480px) {
    .footer-box {
        padding: 15px 20px;
        margin: 0 10px;
    }

    .footer-links {
        gap: 15px;
    }
}

/* === ACCESSIBILITY === */
/* Screen Reader Only - hides content visually but keeps it accessible to screenreaders */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip Link - visible nur beim Focus (für Tastaturnavigation) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: 600;
    z-index: 100;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Focus States - sichtbar für Tastaturnavigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[role="button"]:focus,
[tabindex]:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Spezielle Focus-States für verschiedene Element-Typen */
.btn:focus,
button[type="submit"]:focus {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(255, 171, 64, 0.2);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

/* Focus-visible (nur bei Tastatur, nicht bei Maus-Klick) */
*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    body { padding: 0; margin: 8px; }
    .header-main { padding: 25px 15px; margin-bottom: 30px; }
    .content-main { padding: 25px; }
    .user-info {
        flex-wrap: wrap;
        justify-content: center;
        padding: 12px 15px;
        font-size: 0.85em;
        gap: 8px;
    }
    .user-info a {
        padding: 6px 12px;
        font-size: 0.85em;
    }
    .user-info span {
        width: 100%;
        text-align: center;
        margin: 4px 0 0 0;
        font-size: 0.9em;
    }
    .back-to-main { padding: 0; margin: 0 8px; }
    .back-link { padding: 10px 16px; font-size: 0.95em; }
}

@media (max-width: 480px) {
    body { padding: 0; margin: 5px; }
    .header-main h1 { font-size: 1.8em; }
    .subtitle { font-size: 0.95em; }
    .content-main { padding: 20px; }
    .back-to-main { padding: 0; margin: 0 5px; }
}