/**
 * TOUCH TARGET OPTIMIZATION
 * Erhöht alle interaktiven Elemente auf mindestens 44x44px (iOS Standard)
 * für bessere Mobile UX und WCAG AA Konformität
 */

/* Desktop: Minimum 44x44px */
.btn,
.button,
button,
a.cta,
.nav-link,
.dropdown-item,
.form-control,
input[type="submit"],
input[type="button"],
input[type="reset"],
.card a,
.service-card a,
.package-card a {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Spezielle Behandlung für Icons und kleine Buttons */
.icon-button,
.close-button,
.hamburger-menu,
.social-icon {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px !important;
}

/* Links in Text-Absätzen (min. height für Zeilen-Höhe) */
p a,
li a {
    min-height: 44px !important;
    display: inline-block !important;
    padding: 4px 8px !important;
}

/* Form-Elemente */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
    min-height: 44px !important;
    padding: 12px !important;
    font-size: 16px !important; /* Verhindert iOS Zoom */
}

/* Checkboxen und Radio-Buttons */
input[type="checkbox"],
input[type="radio"] {
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 10px !important; /* Vergrößert Touch-Area */
}

/* Label für Checkboxen/Radios */
label {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
}

/* Mobile-Optimierung (noch größer) */
@media (max-width: 768px) {
    .btn,
    .button,
    button,
    a.cta,
    .nav-link,
    .dropdown-item,
    .form-control,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .card a,
    .service-card a,
    .package-card a {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 14px 28px !important;
        font-size: 16px !important; /* iOS Zoom verhindern */
    }

    /* Icons und kleine Buttons */
    .icon-button,
    .close-button,
    .hamburger-menu,
    .social-icon {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 12px !important;
    }

    /* Form-Elemente */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        min-height: 48px !important;
        padding: 14px !important;
        font-size: 16px !important;
    }

    /* Checkboxen/Radio größer */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 28px !important;
        min-height: 28px !important;
        margin: 12px !important;
    }

    /* Label */
    label {
        min-height: 48px !important;
        padding: 6px 10px !important;
        font-size: 16px !important;
    }
}

/* Spezielle OYROPA-Klassen */
.oyropa-cta,
.oyropa-btn-primary,
.oyropa-btn-secondary {
    min-height: 48px !important;
    padding: 14px 32px !important;
}

/* Navigation Touch Targets */
header nav a,
header .nav-link,
.navbar-nav .nav-link {
    min-height: 48px !important;
    padding: 12px 16px !important;
}

/* Dropdown-Menü Items */
.dropdown-menu .dropdown-item {
    min-height: 48px !important;
    padding: 12px 20px !important;
}

/* Spacing zwischen Touch-Targets (min. 8px Abstand) */
.btn + .btn,
button + button,
a.cta + a.cta {
    margin-left: 8px !important;
}

/* Vertikaler Spacing */
.btn-group-vertical .btn,
.btn-group-vertical button {
    margin-top: 8px !important;
}

/* Accessibility: Focus-Indicator */
.btn:focus,
.button:focus,
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #D69E2E !important; /* OYROPA Gold */
    outline-offset: 2px !important;
}

/* Visited Links */
a:visited {
    /* Keine Größenänderung bei visited */
}

/* Hover-Effekte (größere Fläche) */
@media (hover: hover) {
    .btn:hover,
    .button:hover,
    button:hover,
    a.cta:hover {
        transform: scale(1.02) !important;
        transition: transform 0.15s ease !important;
    }
}

/* Active State (Touch-Feedback) */
.btn:active,
.button:active,
button:active,
a.cta:active {
    transform: scale(0.98) !important;
    transition: transform 0.05s ease !important;
}

/**
 * STATISTIK:
 * - Desktop: 44x44px minimum (iOS Standard)
 * - Mobile: 48x48px minimum (Android & iOS Empfehlung)
 * - Spacing: 8px minimum zwischen Touch-Targets
 * - Font-Size: 16px minimum (verhindert iOS Auto-Zoom)
 * - Focus: 3px Outline für bessere Accessibility
 *
 * WCAG AA KONFORMITÄT: ✅
 * iOS GUIDELINES: ✅
 * Android GUIDELINES: ✅
 */