/* Mobile First Approach - Base styles are in main.css */

/* Scroll margin for anchor links – entspricht Header-Höhe je Breakpoint */
:root {
    --scroll-margin-header: 120px;
}

/* Large Screens / 4K Monitor Optimization */
@media (min-width: 1600px) {
    /* Scale up base font size for better readability on high-res */
    html {
        font-size: 18px; 
    }

    /* Moderate container increase, but keep it centered and readable */
    .container {
        max-width: 1400px;
    }

    /* Logo größer auf großen Bildschirmen */
    :root { --scroll-margin-header: 130px; }
    .logo-img {
        height: 115px;
        max-width: 598px;
    }
    .navbar {
        min-height: 130px;
    }

    /* Team Grid Specifics for Large Screens - Use higher specificity to override components.css */
    body .team-grid {
        gap: 40px;
    }

    body .team-member-image {
        width: 110px; /* Larger profile pictures */
        height: 146px;
    }

    body .team-member-name {
        font-size: 1.5rem;
    }
    
    body .team-card-header {
        padding: 30px; /* More spacing inside cards */
    }
}

@media (min-width: 1920px) {
    :root { --scroll-margin-header: 138px; }
    .logo-img {
        height: 122px;
        max-width: 634px;
    }
    .navbar {
        min-height: 138px;
    }
}

@media (min-width: 2200px) {
    html {
        font-size: 20px;
    }
    
    .container {
        max-width: 1500px; /* Don't stretch too wide even on huge screens */
    }

    /* Logo auf sehr großen Bildschirmen noch größer */
    :root { --scroll-margin-header: 148px; }
    .logo-img {
        height: 132px;
        max-width: 686px;
    }
    .navbar {
        min-height: 148px;
    }
}

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) {
    .container {
        padding: 0 30px;
    }
}

/* iPad Portrait / Tablet Portrait (< 1024px) */
@media (max-width: 1024px) {
    .logo {
        font-size: 1.5rem;
    }
    
    .logo-img {
        height: 80px;
        max-width: 416px;
    }

    /* Navigation: geringere Abstände, damit alle Menüpunkte bei 1024px (z. B. iPad 13" vertikal) Platz haben */
    .nav-menu {
        gap: 0.75rem;
    }
    .nav-link {
        font-size: 0.95rem;
    }
    
    /* Contact Page: Single column on tablets */
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .contact-wrapper > * {
        min-width: 0;
        max-width: 100%;
    }

    .find-us-grid {
        grid-template-columns: 1fr;
    }
}

/* iPad Mini / Smaller Tablets Portrait (< 834px) */
@media (max-width: 834px) {
    :root { --scroll-margin-header: 112px; }
    .logo {
        font-size: 1.35rem;
    }
    
    .logo-img {
        height: 72px;
        max-width: 374px;
    }
}

/* Mobile & Tablet Navigation (≤ 834px, inkl. iPad Portrait 820px) */
@media (max-width: 834px) {
    header .container {
        padding-right: 2rem;
    }
    .navbar {
        min-height: 112px;
        padding: 0.5rem 0 0.5rem 0;
        padding-right: 1rem;
    }
    .logo {
        max-width: 80%;
        margin-left: 6px;
    }
    .logo-img {
        height: auto;
        max-height: 100px;
        max-width: 100%;
        width: auto;
    }
    
    .hamburger {
        display: block;
        z-index: 1001;
        margin-right: 8px;
    }

    .hamburger.active .bar:nth-child(2) {
        transform: scaleX(0);
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 112px; /* Unter dem Header */
        gap: 0;
        flex-direction: column;
        background-color: var(--color-background);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow-nav-mobile);
        padding: 2rem 0;
    }

    .nav-item {
        margin: 16px 0;
    }

    .nav-menu.active {
        left: 0;
    }

    /* Contact Page Mobile Fixes */
    .contact-info-box {
        padding: 2rem 1.5rem;
    }
    
    .contact-detail-row {
        grid-template-columns: 1fr;
        gap: 0.35rem 0;
    }
    
    .contact-detail-value a {
        word-break: break-all;
        overflow-wrap: break-word;
    }
    
    .info-item {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .info-item p {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    .info-item a {
        word-break: break-all;
    }
    
    .hero {
        padding: 4rem 0;
    }

    /* Index Hero: Buttons ~30 % kürzer, Wave ~10 % tiefer (mehr Abstand nach unten = Wave sitzt tiefer) */
    .hero .hero-btns {
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero:has(.wave-divider) {
        padding-bottom: calc(4rem + 10vh);
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }
}

/* Small Mobile (< 576px) */
@media (max-width: 576px) {
    :root { --scroll-margin-header: 114px; }
    .container {
        padding: 0 15px;
    }
    header .container {
        padding-right: 1.5rem;
    }
    
    .services-grid, .team-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-btns--equal {
        grid-template-columns: 1fr;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .card {
        padding: 2rem;
    }

    h1 {
        font-size: 2rem;
    }
    
    /* Mobile-Optimierungen */
    .check-grid {
        grid-template-columns: 1fr;
    }
    
    .content-two-col {
        grid-template-columns: 1fr;
    }

    .focus-blocks {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .navbar {
        min-height: 114px;
        padding: 0.5rem 1rem 0.5rem 0;
    }
    
    .logo {
        max-width: 80%;
        margin-left: 6px;
    }
    .logo-img {
        height: auto;
        max-height: 100px;
        max-width: 100%;
        width: auto;
    }
    
    .nav-menu {
        top: 114px;
    }
    
    .intro-image {
        height: auto;
        max-height: 40vh;
    }
    
    .cta-box {
        padding: 2.5rem 1.5rem;
    }
    
    .legal-content {
        padding: 2rem 1.5rem;
    }
    
    /* Contact Page Small Mobile */
    .contact-info-box {
        padding: 1.5rem 1rem;
    }
    
    .form-control {
        padding: 12px;
        font-size: 16px; /* Prevents iOS zoom on input focus */
    }

    .footer-logo-main {
        font-size: 1.15rem;
    }

    .footer-logo-subline {
        font-size: 0.8rem;
    }

    .footer-logo-owners {
        font-size: 0.65rem;
    }

    /* Stellenangebot: Staff-Carousel – kleinere Kreise auf schmalen Viewports */
    .staff-carousel__item {
        width: 110px;
        height: 110px;
    }
}

/* Very Small Mobile (< 375px) - iPhone SE, older devices */
@media (max-width: 375px) {
    :root { --scroll-margin-header: 108px; }
    .container {
        padding: 0 12px;
    }
    header .container {
        padding-right: 1.25rem;
    }
    
    .logo {
        max-width: 80%;
        margin-left: 6px;
    }
    .logo-img {
        height: auto;
        max-height: 96px;
        max-width: 100%;
        width: auto;
    }
    
    .navbar {
        min-height: 108px;
        padding: 0.5rem 0.75rem 0.5rem 0;
    }
    
    .nav-menu {
        top: 108px;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    /* Contact Page Very Small Mobile */
    .contact-info-box {
        padding: 1.25rem 0.75rem;
    }
    
    .contact-info-box__title {
        font-size: 1.3rem;
    }
    
    .contact-detail-label {
        font-size: 0.8rem;
    }
    
    .contact-detail-value {
        font-size: 0.95rem;
    }
    
    .info-item h5 {
        font-size: 1rem;
    }
    
    .info-item p {
        font-size: 0.9rem;
    }
}

/* ============================================
   Company Name (GbR) - eine Zeile bis 1400px (z. B. 1366px), kleinere Schrift
   ============================================ */
.company-name {
    display: block;
    line-height: 1.4;
}

@media (max-width: 1400px) {
    .company-name {
        font-size: 0.85rem;
        white-space: nowrap;
    }
}

/* Ab ~1200px (z. B. 1180px): noch etwas kleiner, damit eine Zeile in den Container passt */
@media (max-width: 1200px) {
    .company-name {
        font-size: 0.7rem;
    }
}

/* Very Small Mobile (< 375px - iPhone SE, mini): Footer-Logo */
@media (max-width: 375px) {
    .footer-logo-main {
        font-size: 1.05rem;
    }

    .footer-logo-subline {
        font-size: 0.75rem;
    }

    .footer-logo-owners {
        font-size: 0.6rem;
    }
}