/* ===== KI-Club Layout CSS ===== */
/* Global layout styling with Syncfusion Fluent2 theme integration */

:root {
    --ki-club-spacing-section: 60px;
    --ki-club-container-max-width: 1200px;
    --ki-club-border-radius: 8px;
    --ki-club-transition-speed: 0.3s;
}

/* Body Base Styling */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--sf-font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
    background-color: var(--sf-surface, #ffffff);
    color: var(--sf-on-surface, #212529);
    transition: background-color var(--ki-club-transition-speed) ease, 
                color var(--ki-club-transition-speed) ease;
}

#app {
    height: 100%;
}

/* Container */
.container,
.ki-club-container {
    max-width: var(--ki-club-container-max-width);
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

/* Section Styling */
section {
    padding: var(--ki-club-spacing-section) 0;
}

.section-bg {
    background-color: var(--sf-surface-container, #f8f9fa);
    transition: background-color var(--ki-club-transition-speed) ease;
}

/* Header/Hero Styling */
header.ki-club-header {
    background: linear-gradient(90deg, var(--sf-primary, #dc3545), var(--sf-secondary-container, #1e293b));
    color: var(--sf-on-primary, #ffffff);
    padding: 3rem 0;
    text-align: center;
}

header.ki-club-header h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

header.ki-club-header p {
    font-size: 1.25rem;
    opacity: 0.95;
}

/* Card Grid */
.ki-club-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Responsive Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--sf-on-surface, #212529);
    transition: color var(--ki-club-transition-speed) ease;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Links */
a {
    color: var(--sf-primary, #dc3545);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--sf-primary-dark, #a02622);
    text-decoration: underline;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.me-2 {
    margin-right: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    header.ki-club-header h1 {
        font-size: 2rem;
    }

    header.ki-club-header p {
        font-size: 1rem;
    }

    section {
        padding: 40px 0;
    }

    .ki-club-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Theme-specific overrides for better integration */
[data-theme="dark"],
[data-sf-theme="fluent2-dark"],
[data-sf-theme="ki-club-dark"],
[data-sf-theme="ki-club"] {
    --sf-surface: #212529;
    --sf-surface-container: #343a40;
    --sf-on-surface: #ffffff;
}

[data-sf-theme="ki-club"] {
    --sf-surface: #000000;
    --sf-surface-container: #070708;
    --sf-primary: #dc3545;
}

[data-sf-theme="professional-blue"] {
    --sf-primary: #3b82f6;
    --sf-surface-container: #f0f4f8;
}

[data-sf-theme="forest-green"] {
    --sf-primary: #22c55e;
    --sf-surface-container: #f0fdf4;
}

[data-sf-theme="warm-sunset"] {
    --sf-primary: #f59e0b;
    --sf-surface: #fffbeb;
    --sf-surface-container: #fef3c7;
    --sf-on-surface: #78350f;
}

/* ===== Hamburger-Menü: Desktop versteckt, Mobil sichtbar ===== */
/* Globale Regel (überschreibt Syncfusion e-btn Styles sicher) */
.mobile-menu-toggle.e-btn,
.mobile-menu-toggle {
    display: none !important;
    visibility: hidden !important;
}

@media (max-width: 768px) {
    .mobile-menu-toggle.e-btn,
    .mobile-menu-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        align-items: center;
        justify-content: center;
    }
}