/* public_html/css/mobile.css - Mobile Optimized Styles */

@media (max-width: 900px) {
    
    /* --- Global Layout --- */
    .container {
        width: 90%;
        padding: 0; /* Padding ist oft im Container selbst schon drin durch Width */
    }
    
    .glass-section, .clean-section {
        padding: 60px 0; /* Weniger vertikaler Abstand */
    }
    
    /* --- Typografie --- */
    h1, .hero-line {
        font-size: clamp(2.5rem, 10vw, 3.5rem) !important; /* Kleiner als Desktop */
        line-height: 1.1;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    p {
        font-size: 1rem !important;
        line-height: 1.6;
    }
    
    /* --- Hero Section (Index) --- */
    .hero-section.new-hero-layout {
        padding-top: 100px; /* Platz für Header */
        padding-bottom: 60px;
        min-height: auto; /* Keine fixe Höhe erzwingen */
    }
    
    .hero-content-grid {
        grid-template-columns: 1fr; /* Einspaltig */
        gap: 40px;
        text-align: center;
    }
    
    .hero-visual {
        height: 300px; /* Kleiner */
        margin-bottom: 20px;
    }
    
    .image-wrapper-hero {
        width: 240px;
        height: 240px;
    }
    
    .hero-text-content {
        align-items: center; /* Alles zentrieren */
    }
    
    .modern-headline-wrapper {
        align-items: center;
        margin-bottom: 20px;
    }
    
    .hero-line {
        justify-content: center; /* Text zentrieren */
        flex-wrap: wrap; /* Umbruch erlauben wenn nötig */
        gap: 10px;
    }
    
    .hero-description {
        font-size: 1rem;
        max-width: 100%;
        margin-bottom: 30px;
    }
    
    .hero-cta {
        justify-content: center;
    }
    
    .glow-button {
        padding: 15px 35px;
        font-size: 1rem;
        width: 100%; /* Breiter Button auf Mobile klickt sich besser */
        max-width: 300px;
    }
    
    /* Scroll Indicator */
    .scroll-indicator {
        display: none; /* Auf Mobile oft unnötig/störend */
    }

    /* --- About Me Hero --- */
    .glass-grid-intro {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .intro-image-col {
        order: 1;
        justify-content: center;
    }
    .clean-profile-image {
        max-width: 280px;
    }
    .intro-text-col {
        order: 2;
    }
    .intro-text-col h1 {
        font-size: 2.5rem;
    }

    /* --- Produzenten Hero --- */
    .prod-hero h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    /* Sehr kleine Screens */
    .hero-line {
        font-size: 2.2rem !important;
    }
    .stat-number {
        font-size: 2.5rem !important;
    }
}