/**
 * MixFritz - Responsive Design Optimierungen
 * Enthält zusätzliche CSS-Regeln für optimale Darstellung auf allen Geräten
 */

/* ===== Basis-Einstellungen für Responsive Design ===== */
:root {
    --touch-target-size: 44px; /* Mindestgröße für Touch-Targets nach WCAG */
}

/* ===== Verbesserte Touch-Ziele für mobile Geräte ===== */
@media (max-width: 767px) {
    /* Größere Touch-Ziele für Buttons und Links im Menü */
    .mobile-touch-target,
    #mobile-navbar a,
    .burger-menu-button,
    .cta-button-hero {
        min-height: var(--touch-target-size);
        min-width: var(--touch-target-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mehr Abstand zwischen Touch-Elementen */
    #mobile-navbar a {
        margin: 0.25rem 0;
        padding: 0.75rem 1rem;
    }
    
    /* Verbesserte Formular-Elemente für Touch */
    input, select, textarea, button {
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }
    
    /* Größere Checkboxen und Radio-Buttons */
    input[type="checkbox"], input[type="radio"] {
        transform: scale(1.2);
        margin-right: 0.5rem;
    }
}

/* ===== Optimierte Bilddarstellung ===== */
/* Unterstützung für WebP mit Fallback */
.webp .bg-image-webp {
    background-image: var(--bg-image-webp);
}

.no-webp .bg-image-webp,
.bg-image-fallback {
    background-image: var(--bg-image-fallback);
}

/* Verbesserte Bildgrößen für verschiedene Bildschirmgrößen */
.responsive-image-container {
    position: relative;
    height: 0;
    overflow: hidden;
}

.responsive-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Aspect Ratios für verschiedene Inhaltstypen */
.aspect-hero {
    padding-bottom: 56.25%; /* 16:9 */
}

.aspect-square {
    padding-bottom: 100%; /* 1:1 */
}

.aspect-portrait {
    padding-bottom: 125%; /* 4:5 */
}

/* ===== Verbesserte Navigation ===== */
/* Sticky Header Optimierungen */
.header-scrolled {
    height: 80px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Verbesserte Fokus-Stile für Tastaturnavigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--handwerk-orange, #FF6600);
    outline-offset: 2px;
}

/* ===== Verbesserte Typografie für verschiedene Bildschirmgrößen ===== */
@media (max-width: 640px) {
    h1, .h1 {
        font-size: 1.875rem; /* 30px */
        line-height: 2.25rem; /* 36px */
    }
    
    h2, .h2 {
        font-size: 1.5rem; /* 24px */
        line-height: 2rem; /* 32px */
    }
    
    h3, .h3 {
        font-size: 1.25rem; /* 20px */
        line-height: 1.75rem; /* 28px */
    }
    
    body, p {
        font-size: 1rem; /* 16px */
        line-height: 1.5rem; /* 24px */
    }
}

/* ===== Verbesserte Darstellung auf größeren Bildschirmen ===== */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px; /* Begrenzt die maximale Breite für bessere Lesbarkeit */
    }
    
    /* Größere Abstände für bessere Lesbarkeit */
    .section-spacing-xl {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

/* ===== Druckoptimierungen ===== */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    /* Seitenzahlen und URLs anzeigen */
    @page {
        margin: 2cm;
    }
    
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }
}

/* ===== Reduzierte Bewegung für Barrierefreiheit ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Verbesserte Darstellung auf High-DPI Displays ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .high-dpi-optimized {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}