@import url('header.css');
@import url('hero-section.css');
@import url('section-angles.css');
@import url('services-section.css');
@import url('about-me-section.css');
@import url('references-section.css');
@import url('contact-section.css');
@import url('animation.css');
@import url('footer.css');
@import url('workflow-section.css');

/* --- Global: Anker-Scroll-Offset wegen fixed Header --- */
section {
    scroll-margin-top: 120px; /* Desktop-Header-Höhe */
}

@media (max-width: 768px) {
    section {
        scroll-margin-top: 140px; /* Mobile-Header-Höhe */
    }
}

/* --- iPhone 12 mini / kleine Hochkant-Screens --- */
@media (max-width: 390px) {
    /* Header & Logo optimieren */
    .header {
        --header-h: 64px;
    }
    .container {
        padding: 0 16px;
    }
    .logo img {
        height: 36px;
        padding-left: 0;
    }
    .nav a {
        font-size: 14px;
    }

    /* Hero-Text kompakter */
    .hero__title {
        font-size: clamp(22px, 6vw, 32px);
    }
    .hero__subtitle {
        font-size: clamp(14px, 4vw, 18px);
    }
    .hero__brand {
        font-size: clamp(24px, 7vw, 40px);
    }

    /* Services & About Spalten-Abstände enger */
    .services-container,
    .about-container,
    .references-container {
        padding: 0 16px;
    }

    /* Bilder & Logos auf volle Breite */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Footer-Abstände */
    .footer-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 16px;
    }
}

html, body {
    width: 100%;
    overflow-x: hidden; /* verhindert das „Rechts-Scrollen“ */
}