/**
 * ============================================
 * TAR Responsive Fixes - Override Stylesheet
 * ============================================
 *
 * Version: 1.0.0
 * Created: 2026-02-27
 * Based on: TAR-RESPONSIVE-AUDIT-V3.md
 *
 * IMPORTANT: This file is loaded AFTER tar-components-unified.css
 * All rules here use the same or higher specificity to override.
 *
 * NEVER use max-width: 768px (creates overlap)
 * Use max-width: 767px or min-width: 768px instead
 *
 * ============================================
 */

/* ============================================
   PHASE 1: QUICK WINS - Touch Target Fixes
   TAR-RESP-001 to TAR-RESP-004
   Estimated: 30 minutes
   ============================================ */

/* TAR-RESP-001: Footer Legal-Bar Overflow Fix (C-03) */
@media (width <= 767px) {
    .tar-footer__bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 12px;
    }

    .tar-footer__bottom-links a {
        padding: 12px 8px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* TAR-RESP-002: Standort Contact Links Touch Targets (C-04) */
.location-card__phone,
.location-card__email {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 12px;
}

/* TAR-RESP-003: iOS Safari Auto-Zoom Prevention (C-08) */
@media (width <= 1024px) {
    input[type='text'],
    input[type='email'],
    input[type='tel'],
    input[type='number'],
    input[type='url'],
    input[type='search'],
    input[type='password'],
    input[type='date'],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* TAR-RESP-004: Touch-Target Bundle (H-06 to H-11, M-08, M-09) */

/* H-06: Pillar "Mehr erfahren" – 21px → 44px */
.v1-pillar-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
}

/* H-07: Service Card CTAs – 21-43px → 44px */
.v1-card__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
}

/* H-08: Kontakt Service Card CTAs – 23px → 44px */
.tar-service-card__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
}

/* H-09: Team Sprach-Tags – 25px → 44px */
.team-card__language,
.team-card [class*='language'],
.team-card [class*='lang-tag'] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
}

/* H-10: Team "Mehr erfahren" Links – 21px → 44px */
.team-card__link,
.team-card a[class*='mehr'],
.team-card a[class*='link'] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
}

/* M-08: Philosophy Slider-Pfeile – 40px → 44px */
.philosophy__slider-arrow,
.v1-philosophy__arrow {
    min-width: 44px;
    min-height: 44px;
}

/* M-09: Ecosystem Links – 20px → 44px */
.tar-ecosystem__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 12px;
}

/* ============================================
   PHASE 2: SPRINT 1 - Grid & Layout Fixes
   TAR-RESP-005 to TAR-RESP-012
   Estimated: 2-3 hours
   ============================================ */

/* TAR-RESP-005: Hero Grid Overflow Fix at 375px (C-01) */
@media (width <= 767px) {
    .v1-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .v1-hero-content,
    .v1-hero-visual,
    .v1-hero-cta-group {
        grid-column: 1 / -1;
        max-width: 100%;
        overflow: hidden;
    }

    .v1-hero-content h1 {
        letter-spacing: 0.04em; /* reduced from 0.08em */
    }
}

/* TAR-RESP-006: iOS Safari 100vh → 100dvh (C-07) */
.v1-hero {
    min-height: 100dvh;
}

.modal-overlay,
.tar-navigation__mobile-backdrop {
    height: 100dvh;
}

@supports not (height: 100dvh) {
    .v1-hero {
        min-height: fill-available;
    }
}

/* backdrop-filter Prefix for Safari */
.tar-navigation__header,
.modal-overlay,
[class*='backdrop'] {
    backdrop-filter: blur(10px);
}

/* TAR-RESP-007: Tablet 2-Column Layouts at 768px (H-01) */
@media (width >= 768px) {
    .v1-pillars {
        grid-template-columns: repeat(2, 1fr);
    }

    .v1-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .tar-service-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-actions,
    .tar-quick-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Services 2-spaltig ab 768px (must match #services specificity) */
@media (width >= 768px) and (width <= 1279px) {
    #services .v1-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* TAR-RESP-008: Services 2-Column at 1024px (H-02) */
@media (width >= 1024px) and (width <= 1279px) {
    #services .v1-grid {
        gap: 32px;
    }
}

/* TAR-RESP-007 continued: Contact Cards 3-column at 1024px */
@media (width >= 1024px) {
    .tar-service-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

/* TAR-RESP-009: Quick-Actions 3-column at 1024px (H-03) */
@media (width >= 1024px) {
    .quick-actions,
    .tar-quick-actions {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* TAR-RESP-010: Philosophy Image Tablet Fix (H-04) */
@media (width >= 768px) and (width <= 1023px) {
    .philosophy__image,
    .v1-philosophy img {
        max-height: 500px;
        width: auto;
        object-fit: cover;
    }
}

/* TAR-RESP-011: Section Padding Tablet Reduction (H-05) */
@media (width >= 768px) and (width <= 1023px) {
    .v1-section,
    section[class*='section'] {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .tar-cta-banner {
        padding-top: 48px;
        padding-bottom: 64px;
    }
}

/* CTA-Banner Buttons gleichmäßig ab 768px */
@media (width >= 768px) {
    .tar-cta-banner__actions {
        display: flex;
        gap: 16px;
        flex-wrap: nowrap;
    }

    .tar-cta-banner__actions > * {
        flex: 1;
    }
}

/* TAR-RESP-012: Accessibility CSS Bundle (A11Y-01, A11Y-02, A11Y-08) */

/* A11Y-01: Skip-Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #3d3937;
    color: #fff;
    padding: 12px 24px;
    z-index: 10000;
    transition: top 0.2s ease;
    text-decoration: none;
    font-weight: 500;
}

.skip-link:focus {
    top: 0;
}

/* A11Y-02: Focus-Visible Styles */
:focus-visible {
    outline: 2px solid #73574a;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Focus on dark backgrounds */
.tar-footer :focus-visible,
[class*='dark'] :focus-visible,
.v1-hero :focus-visible {
    outline-color: #f7f5f2;
}

/* No focus ring on mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

/* A11Y-08: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .v1-hero-carousel,
    .v1-hero-carousel__slide {
        animation: none;
        transition: none;
    }
}

/* ============================================
   PHASE 3: SPRINT 2 - JS/Asset Dependent
   TAR-RESP-013 to TAR-RESP-018
   To be implemented after Phase 1 & 2 validation
   ============================================ */

/* TAR-RESP-013: Modal Forms Mobile Fix - CSS Workaround */

/* Fixes height: 0 issue on mobile for both modal systems */
@media (width <= 767px) {
    /* MultiStepForm System */
    .modal-form-body,
    .form-steps-container {
        min-height: 200px;
        height: auto !important;
        overflow: visible;
    }

    /* TAR Modal v3 System */
    .tar-modal-v3__body {
        min-height: 300px;
        height: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tar-step-v3.is-active,
    .tar-step.is-active {
        display: block !important;
        height: auto !important;
        min-height: 200px;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure form fields are visible */
    .tar-modal-v3 .tar-field,
    .tar-modal-v3 .tar-input,
    .tar-modal-v3 .tar-select,
    .tar-modal-v3 .tar-textarea {
        height: auto;
        min-height: 44px;
    }

    /* Fix overlay height for iOS Safari */
    .tar-overlay.is-open {
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* TAR-RESP-016: Mobile Menu CTA Styling */
.tar-navigation__item--cta-mobile {
    display: none; /* Hidden on desktop */
}

@media (width <= 1023px) {
    .tar-navigation__item--cta-mobile {
        display: block;
        padding: 16px;
        margin-top: 16px;
        border-top: 1px solid var(--tar-light-gray, #e5e5e5);
    }

    .tar-navigation__mobile-cta {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 12px 24px;
        background-color: var(--tar-brown-80, #5c4338);
        color: var(--tar-alpine-white, #fff);
        font-weight: 600;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.2s ease;
    }

    .tar-navigation__mobile-cta:hover,
    .tar-navigation__mobile-cta:focus {
        background-color: var(--tar-brown-100, #73574a);
    }
}

/* ============================================
   PHASE 4: BACKLOG - Low Priority Cosmetic
   TAR-RESP-019
   ============================================ */

/* L-02: CTA-Banner Font Size */
@media (width <= 767px) {
    .tar-cta-banner__text {
        font-size: 15px;
    }
}

@media (width >= 1024px) {
    .tar-cta-banner__text {
        font-size: 16px;
    }
}

/* L-03: Back-to-Top Mobile Position */
@media (width <= 767px) {
    .scroll-to-top,
    .back-to-top {
        right: 16px;
        bottom: 16px;
    }
}

/* L-04: Desktop Nav Hidden in Hamburger Mode */
@media (width <= 1023px) {
    .tar-navigation__menu:not(.is-open) {
        visibility: hidden;
    }
}

/* L-05 & L-06: Minimum Font Sizes on Mobile */
@media (width <= 767px) {
    .tar-footer__link,
    .location-card__detail,
    .tar-footer__legal,
    .location-card__phone,
    .location-card__email {
        font-size: 14px;
    }
}

/* ============================================
   TAR-RESP-020: Hero Header Overlap Fix
   Issue: Badge text overlapped by fixed navigation header
   Solution: Add breathing room to hero padding-top
   ============================================ */
.v1-hero {
    padding-top: 110px; /* 90px header + 20px breathing room */
}

@media (width <= 767px) {
    .v1-hero {
        padding-top: 100px; /* 80px header + 20px breathing room */
    }
}

@media (width <= 480px) {
    .v1-hero {
        padding-top: 96px; /* Slightly less on smallest screens */
    }
}

/* ============================================
   TAR-RESP-021: Hero Carousel 375px Horizontal Scroll Fix
   Issue: .v1-hero-visual overflows on very small viewports
   Root Cause: calc(100% + var(--space-lg) * 2) + negative margins
   Solution: Remove bleed effect on smallest viewports
   ============================================ */

/* Global overflow protection */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Extra small mobile - prevent carousel horizontal scroll */
@media (width <= 375px) {
    .v1-hero {
        overflow-x: hidden;
    }

    .v1-hero-visual {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .v1-hero-visual .hero-carousel,
    .v1-hero-visual .v1-image {
        width: 100%;
        max-width: 100%;
    }
}