/* ============================================
   MOBILE.CSS - Wegweiser Digital
   Wird NACH main.css geladen und ueberschreibt
   alle Mobile-spezifischen Regeln sauber.
   ============================================ */

/* ============================================
   TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .leistungen-grid,
    .mission-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* ------------------------------------------
       Header: Stacking Context entfernen
       backdrop-filter erzeugt Stacking Context.
       Auf Mobile: opaker Hintergrund statt blur.
       ------------------------------------------ */
    .header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(10, 15, 26, 0.95) !important;
    }

    .header.scrolled {
        background: rgba(10, 15, 26, 0.98) !important;
    }

    [data-theme="light"] .header {
        background: rgba(248, 250, 252, 0.95) !important;
    }

    [data-theme="light"] .header.scrolled {
        background: rgba(248, 250, 252, 0.98) !important;
    }

    /* ------------------------------------------
       Mobile Menu: Fullscreen Overlay
       z-index 199 = unter Header (200), damit der
       Hamburger-Button klickbar bleibt.
       ------------------------------------------ */
    .mobile-menu {
        z-index: 199 !important;
        background: var(--color-bg-primary) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 80px;
    }

    .mobile-menu-link {
        font-size: 1.125rem;
        padding: var(--space-4);
    }

    .mobile-dropdown-menu {
        background: rgba(59, 130, 246, 0.06);
        border-radius: var(--radius-lg);
        margin: var(--space-1) 0;
        padding: var(--space-2) var(--space-4);
    }

    [data-theme="light"] .mobile-dropdown-menu {
        background: rgba(59, 130, 246, 0.08);
    }

    /* ------------------------------------------
       Gradient Blobs: Performance-optimiert auf Mobile
       filter:blur + Animationen sind GPU-intensiv auf
       echten Mobilgeraeten und verursachen lange Ladezeiten.
       Blobs bei 15% Opacity kaum sichtbar → statisch + weniger Blur.
       ------------------------------------------ */
    .gradient-blob {
        opacity: 0.15 !important;
        filter: blur(30px) !important;
        animation: none !important;
        will-change: auto !important;
    }

    .gradient-blob-1 { width: 250px !important; height: 250px !important; }
    .gradient-blob-2 { width: 200px !important; height: 200px !important; }
    .gradient-blob-3 { width: 160px !important; height: 160px !important; }
    .gradient-blob-4 { width: 140px !important; height: 140px !important; }
    .gradient-blob-5 { width: 120px !important; height: 120px !important; }

    /* Noise-Textur: mix-blend-mode teuer auf Mobile GPU,
       bei 3% Opacity ohnehin unsichtbar */
    .gradient-bg::after {
        display: none !important;
    }

    /* ------------------------------------------
       Reveal-Elemente: sofort sichtbar auf Mobile.
       Kein Warten auf JS/IntersectionObserver.
       ------------------------------------------ */
    .reveal-element {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* ------------------------------------------
       Neural Network Canvas: weniger dicht
       ------------------------------------------ */
    .neural-bg-canvas {
        opacity: 0.4;
    }

    /* ------------------------------------------
       Container & Layout
       ------------------------------------------ */
    .container {
        padding: 0 var(--space-4);
    }

    /* ------------------------------------------
       Hero Sections
       ------------------------------------------ */
    .page-hero {
        padding: var(--space-16) 0 var(--space-10);
        min-height: auto;
    }

    .hero-container {
        padding: 0 var(--space-4);
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .hero-content .section-badge,
    .hero-content .glass-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-title {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.6;
    }

    .hero-buttons {
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* ------------------------------------------
       Carousel: Hoehe fuer groesste Card (KI-Strategiewoche)
       Overflow hidden damit Cards nicht in Hero bluten.
       ------------------------------------------ */
    .carousel {
        height: 480px !important;
        overflow: hidden !important;
    }

    .carousel-card {
        height: 460px !important;
        overflow: hidden !important;
        text-align: center;
    }

    /* Carousel Card Inhalte zentrieren */
    .ui-card-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-2);
    }

    .nav-card-desc {
        text-align: center;
    }

    .nav-card-features {
        justify-content: center;
        gap: var(--space-1);
    }

    .nav-card-feature {
        font-size: 0.6875rem;
        padding: 2px var(--space-2);
    }

    /* ------------------------------------------
       Section Spacing
       ------------------------------------------ */
    .leistungen-section,
    .features-section,
    .cta-section,
    .lernpfad-section,
    .inhouse-section,
    .hub-section,
    .mission-section {
        padding: var(--space-12) 0;
    }

    .section-header {
        margin-bottom: var(--space-8);
    }

    .section-title {
        font-size: 1.5rem;
    }

    .section-subtitle {
        font-size: 0.9375rem;
    }

    .section-badge {
        font-size: 0.8rem;
    }

    /* ------------------------------------------
       Glass Cards: kein overflow-clipping
       ------------------------------------------ */
    .glass-card,
    .glass-card-large,
    .stat-card,
    .feature-card,
    .value-card,
    .wb-module-card,
    .sw-day,
    .station-card,
    .inhouse-card,
    .foerder-weg-card,
    .hub-product-card {
        overflow: visible !important;
    }

    /* Blauer Gradient-Strich: auf Mobile ausblenden
       (schaut bei overflow:visible als Punkt hervor) */
    .stat-card::before {
        display: none !important;
    }

    /* ------------------------------------------
       Stats Row & Stat Cards
       Im Hero: zentriert mit max-width
       ------------------------------------------ */
    .stats-row {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
        gap: var(--space-4);
    }

    .stat-card {
        padding: var(--space-5);
        text-align: center;
        width: 100%;
        max-width: 400px;
    }

    /* ------------------------------------------
       Feature Cards & Grids
       ------------------------------------------ */
    .features-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .feature-card {
        padding: var(--space-5);
        text-align: center;
    }

    /* ------------------------------------------
       Values Grid
       ------------------------------------------ */
    .values-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* ------------------------------------------
       WB Module Grid (15-Wochen)
       ------------------------------------------ */
    .wb-module-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 0;
    }

    .wb-module-card {
        padding: var(--space-5);
    }

    /* ------------------------------------------
       Strategiewoche Days
       ------------------------------------------ */
    .sw-day {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-5);
    }

    /* ------------------------------------------
       Inhouse Card
       ------------------------------------------ */
    .inhouse-card {
        padding: var(--space-5);
    }

    .inhouse-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .inhouse-title {
        font-size: 1.5rem;
    }

    /* ------------------------------------------
       Foerder-Weg Cards
       ------------------------------------------ */
    .foerder-wege-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .foerder-weg-card {
        max-width: 100%;
        padding: var(--space-6);
    }

    /* ------------------------------------------
       Kontakt Page
       ------------------------------------------ */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .kontakt-form-card {
        padding: var(--space-5);
    }

    .calendly-embed,
    .calendly-inline-widget {
        min-height: 500px !important;
    }

    /* ------------------------------------------
       Founder Card (Ueber-uns)
       ------------------------------------------ */
    .founder-content {
        flex-direction: column;
        text-align: center;
    }

    .founder-image {
        width: 160px;
        height: 160px;
    }

    /* ------------------------------------------
       CTA Buttons
       ------------------------------------------ */
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* ------------------------------------------
       Footer: 2 Spalten, kompakt
       ------------------------------------------ */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5) var(--space-4);
        text-align: left;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-brand .logo-img {
        height: 28px;
        max-width: 180px;
        width: auto;
    }

    .footer-desc {
        max-width: 100%;
        font-size: 0.8125rem;
    }

    .footer-links h4 {
        font-size: 0.75rem;
        margin-bottom: var(--space-2);
    }

    .footer-links ul {
        gap: 0;
    }

    .footer-links li {
        margin-bottom: 0;
    }

    .footer-links a {
        font-size: 0.75rem;
        padding: var(--space-1) 0;
        display: block;
    }

    .footer-bottom {
        font-size: 0.6875rem;
    }

    /* ------------------------------------------
       Formular
       ------------------------------------------ */
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px;
    }

    /* ------------------------------------------
       FAQ Grid
       ------------------------------------------ */
    .faq-grid {
        grid-template-columns: 1fr;
    }

    /* Page Transition: Auf Mobile deaktiviert.
       JS navigiert direkt ohne page-transition-from Flag,
       daher kein page-entering CSS noetig. */
}

/* ============================================
   KLEINE HANDYS (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {

    .page-hero {
        padding: var(--space-12) 0 var(--space-8);
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.875rem;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .section-subtitle {
        font-size: 0.875rem;
    }

    /* Sections kompakter */
    .leistungen-section,
    .features-section,
    .cta-section,
    .lernpfad-section,
    .inhouse-section,
    .hub-section,
    .mission-section {
        padding: var(--space-8) 0;
    }

    /* Cards */
    .feature-card,
    .value-card,
    .stat-card,
    .wb-module-card,
    .inhouse-card {
        padding: var(--space-4);
    }

    .stat-card {
        max-width: 100%;
    }

    .stat-desc {
        font-size: 0.8125rem;
    }

    .glass-card-large {
        border-radius: var(--radius-xl);
    }

    .foerder-weg-card {
        padding: var(--space-5);
    }

    .foerder-hinweis {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .sw-day {
        padding: var(--space-4);
    }

    .sw-day-marker {
        width: 40px;
        height: 40px;
    }

    .kontakt-form-card {
        padding: var(--space-4);
    }

    .contact-methods-inline {
        flex-direction: column;
        align-items: stretch;
    }

    /* Footer: 2 Spalten beibehalten, noch kompakter */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4) var(--space-3);
        text-align: left;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-brand .logo-img {
        height: 24px;
        max-width: 160px;
    }

    .footer-links h4 {
        font-size: 0.6875rem;
    }

    .footer-links a {
        font-size: 0.6875rem;
    }

    /* Buttons */
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn,
    .cta-actions .btn {
        width: 100%;
    }

    .kurse-grid,
    .leistungen-grid {
        max-width: 100%;
    }
}

/* ============================================
   SEHR KLEINE HANDYS (max-width: 360px)
   ============================================ */
@media (max-width: 360px) {
    .container {
        padding: 0 var(--space-3);
    }

    .hero-title {
        font-size: 1.375rem;
    }

    .section-title {
        font-size: 1.125rem;
    }

    .footer-brand .logo-img {
        height: 22px;
        max-width: 140px;
    }
}