/* ==============================================================================
   EroCMS.net - Mobile-Specific Stylesheets (< 768px)
   Dieses Stylesheet greift gezielt auf Smartphones und kleinen Tablets.
   ============================================================================== */

/* 1. Touch-Optimierungen & Tap-Highlights */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Flüssiges Scrollen für iOS */
.overflow-y-auto,
.modal-content {
    -webkit-overflow-scrolling: touch;
}

/* 2. Mobile Modal-Optimierungen (Perfekte Ausnutzung des Handydisplays) */
.modal-content {
    max-height: 85vh;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

#modal-impressum .bg-brand-card,
#modal-datenschutz .bg-brand-card {
    border-radius: 1.5rem;
    margin: 0.5rem;
    width: calc(100% - 1rem);
}

/* 3. Mobile Navigation & Dropdown Styling */
#mobile-menu {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
}

.mobile-link {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.mobile-link:active {
    background-color: rgba(255, 255, 255, 0.08);
    transform: scale(0.98);
}

/* 4. Sanfteres Scroll-Reveal auf Smartphones (Verhindert Ruckler) */
.reveal {
    transform: translateY(18px); /* Dezentere Bewegung auf kleinen Displays */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Auf Mobilgeräten Verzögerungen reduzieren für direkteres Feedback */
.delay-100,
.delay-200,
.delay-300 {
    transition-delay: 0.05s;
}

/* 5. Details / Akkordeon Touch-Tweaks */
details summary {
    user-select: none;
    -webkit-user-select: none;
}

details summary:active {
    background-color: rgba(255, 255, 255, 0.04);
}

/* 6. Schutz gegen iOS Font-Zooming in Inputs */
input, textarea, select {
    font-size: 16px !important; /* Verhindert automatisches Hereinzoomen von iOS Safari */
}

/* 7. Horizontale Scroll-Container & Table-Touch */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}