/**
 * Custom CSS
 * Überschreibt oder erweitert Tailwind CSS
 */

/* ===== ALPINE.JS FOUC PREVENTION ===== */
/* Verhindert Flackern von Elementen vor Alpine-Initialisierung */
[x-cloak] { display: none !important; }

/* Footer-Content: Auf Desktop NICHT mehr immer sichtbar - jetzt auch ausklappbar */
/* Entfernt, da Footer nun auf Desktop auch collapsed startet */

/* ===== DESIGN TOKENS (CSS CUSTOM PROPERTIES) ===== */
:root {
    /* Spacing Scale */
    --spacing-section-standard: 4rem;      /* py-16 - Standard für Sections */
    --spacing-section-compact: 3rem;       /* py-12 - Sekundärer Content */
    --spacing-section-tight: 2rem;         /* py-8 - Alerts, Info-Bars */

    /* Card Padding */
    --card-padding-standard: 2rem;         /* p-8 - Standard für alle Cards */
    --card-padding-compact: 1.5rem;        /* p-6 - Nur bei Platzproblemen */

    /* Button Sizing */
    --button-padding-x-standard: 2rem;     /* px-8 */
    --button-padding-x-compact: 1.5rem;    /* px-6 */
    --button-padding-y-large: 1rem;        /* py-4 */
    --button-padding-y-standard: 0.75rem;  /* py-3 */

    /* Border & Shadow */
    --radius-standard: 0.5rem;             /* rounded-lg - 8px */
    --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Typography */
    --leading-heading: 1.2;
    --leading-subheading: 1.3;
    --leading-body: 1.75;

    /* ===== APP-ARCHITECTURE (Mobile) ===== */
    --header-height: 110px;
    --footer-collapsed: 60px;
    --dots-safe-space: 80px;
    /* svh (small viewport height) als CSS-Fallback */
    --app-height: calc(100svh - var(--header-height) - var(--footer-collapsed));
    /* JavaScript setzt --app-height-js mit tatsächlicher Viewport-Höhe */
    --app-height-js: var(--app-height);
}

/* Fallback für Browser ohne svh-Unterstützung */
@supports not (height: 100svh) {
    :root {
        /* vh als Fallback - kann sich leicht ändern mit Browser-Chrome */
        --app-height: calc(100vh - var(--header-height) - var(--footer-collapsed));
    }
}

/* Smooth Scroll für Anchor-Links */
html {
    scroll-behavior: smooth;
}

/* Smooth Transitions für alle Elemente */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Premium Golden Scrollbar - Dezent & Elegant */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(135, 106, 59, 0.4) 0%,
        rgba(135, 106, 59, 0.6) 50%,
        rgba(135, 106, 59, 0.4) 100%);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        rgba(135, 106, 59, 0.6) 0%,
        rgba(135, 106, 59, 0.8) 50%,
        rgba(135, 106, 59, 0.6) 100%);
    background-clip: padding-box;
}

/* Custom Scrollbar für Split-Layouts (schmaler) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(11, 44, 49, 0.03);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(135, 106, 59, 0.25);
    border-radius: 3px;
    border: none;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(135, 106, 59, 0.4);
}

/* Print Styles */
@media print {
    .no-print, nav, footer {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}

/* Animationen */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.6s ease-out;
}

/* ===== NAVBAR SCROLL BEHAVIOR (Desktop) ===== */
@media (min-width: 1024px) {
    header {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    header.navbar-hidden {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }

    header.navbar-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
}

/* Focus Styles für Accessibility - nur bei Keyboard-Navigation sichtbar */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #876A3B;
    outline-offset: 2px;
}

/* Kein Outline bei Mausklick */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* ===== COMPONENT LIBRARY ===== */

/* ===== UNIFIED BUTTON SYSTEM ===== */

/* Base Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* Primary: Gold mit Shine-Effekt */
.btn-primary {
    background-color: #876A3B;
    color: #E7E6D4;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.7s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    background-color: #9A7D4A;
    box-shadow: 0 8px 25px rgba(135, 106, 59, 0.4);
    transform: translateY(-2px);
}

.btn-primary > * {
    position: relative;
    z-index: 10;
}

/* Secondary: Navy mit Fill-Effekt */
.btn-secondary {
    background-color: transparent;
    color: #0B2C31;
    border: 2px solid #0B2C31;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0B2C31;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 0;
}

.btn-secondary:hover::before {
    transform: scaleX(1);
}

.btn-secondary:hover {
    color: #E7E6D4;
    border-color: #0B2C31;
}

.btn-secondary > * {
    position: relative;
    z-index: 10;
}

/* Outline: Gold mit Fill-Effekt */
.btn-outline {
    background-color: transparent;
    color: #876A3B;
    border: 2px solid #876A3B;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #876A3B;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 0;
}

.btn-outline:hover::before {
    transform: scaleX(1);
}

.btn-outline:hover {
    color: #E7E6D4;
    border-color: #876A3B;
}

.btn-outline > * {
    position: relative;
    z-index: 10;
}

/* Size Modifiers */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.btn-lg {
    padding: 1rem 2.5rem;
    font-size: 1rem;
}

/* Full Width */
.btn-full {
    width: 100%;
}

/* Icon Animation */
.btn svg {
    transition: transform 0.3s ease;
}

.btn:hover svg {
    transform: translateX(0.25rem);
}

/* ----- CARD COMPONENTS ----- */

.card {
    background-color: #E8E4DA;
    padding: var(--card-padding-standard);
    border-radius: var(--radius-standard);
    border-top: 4px solid #876A3B;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
}

.card-featured {
    background-color: #E8E4DA;
    padding: var(--card-padding-standard);
    border-radius: var(--radius-standard);
    border-top: 4px solid #876A3B;
    box-shadow: var(--shadow-card-hover);
    position: relative;
}

.card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-standard);
    border: 2px solid rgba(135, 106, 59, 0.2);
    pointer-events: none;
}

/* ----- FORM COMPONENTS ----- */

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: white;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius-standard);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-input:hover {
    border-color: rgba(135, 106, 59, 0.5);
}

.form-input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px #876A3B;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0B2C31;
    margin-bottom: 0.5rem;
}

/* ----- SECTION SPACING ----- */

.section-standard {
    padding-top: var(--spacing-section-standard);
    padding-bottom: var(--spacing-section-standard);
}

.section-compact {
    padding-top: var(--spacing-section-compact);
    padding-bottom: var(--spacing-section-compact);
}

.section-tight {
    padding-top: var(--spacing-section-tight);
    padding-bottom: var(--spacing-section-tight);
}

/* ----- ICON CONTAINER ----- */

.icon-container {
    width: 5rem;
    height: 5rem;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(135, 106, 59, 0.15);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.icon-container:hover {
    background-color: rgba(135, 106, 59, 0.25);
}

/* ----- TYPOGRAPHY LINE HEIGHTS ----- */

h1, .text-4xl, .text-5xl, .text-6xl {
    line-height: var(--leading-heading);
}

h2, .text-3xl {
    line-height: var(--leading-subheading);
}

h3, h4, .text-xl, .text-2xl {
    line-height: 1.4;
}

p, .text-base, .text-lg {
    line-height: var(--leading-body);
}

/* Hover-Effekte für Karten */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Loading Spinner */
.spinner {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #876A3B;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Custom Gradient Background */
.gradient-bg {
    background: linear-gradient(135deg, #0B2C31 0%, #143D44 100%);
}

/* ===== CI-KONFORMER HERO/FOOTER GRADIENT ===== */
/* Premium Navy Gradient mit Gold-Dot Pattern - für Hero & Footer */
.ci-gradient-bg {
    background: linear-gradient(135deg, #0B2C31 0%, #0a2328 50%, #0B2C31 100%);
    position: relative;
}

/* Pattern Overlay als Pseudo-Element */
.ci-gradient-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: radial-gradient(circle at 2px 2px, #876A3B 1px, transparent 0);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

/* ===== NAVIGATION ACTIVE STATE GRADIENT ===== */

/* Primary: Navy → Gold */
.nav-active-primary {
    position: relative;
}

.nav-active-primary::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0B2C31 0%, #876A3B 100%);
    border-radius: 2px;
    animation: navGradientSlide 0.4s ease-out;
}

/* Fallback: Navy → Light Blue (für Tests) */
.nav-active-fallback {
    position: relative;
}

.nav-active-fallback::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0B2C31 0%, #4A9DB5 100%);
    border-radius: 2px;
    animation: navGradientSlide 0.4s ease-out;
}

@keyframes navGradientSlide {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* Mobile: Vertikaler Gradient-Border links */
@media (max-width: 1024px) {
    .nav-active-primary::after,
    .nav-active-fallback::after {
        bottom: 0;
        left: 0;
        right: auto;
        width: 4px;
        height: 100%;
        top: 0;
    }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .nav-active-primary::after,
    .nav-active-fallback::after {
        animation: none;
    }
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent Text Selection on UI Elements */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Custom Shadows */
.shadow-soft {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

/* ===== PREMIUM ELEVATION SYSTEM ===== */
/* Layered shadows für Tiefe - Desktop Stock Page */
.shadow-elevated {
    box-shadow:
        0 4px 6px rgba(11, 44, 49, 0.03),
        0 12px 24px rgba(11, 44, 49, 0.06),
        0 24px 48px rgba(11, 44, 49, 0.09);
}

.shadow-elevated-lg {
    box-shadow:
        0 4px 8px rgba(11, 44, 49, 0.02),
        0 12px 32px rgba(11, 44, 49, 0.06),
        0 32px 64px rgba(11, 44, 49, 0.1),
        0 0 0 1px rgba(135, 106, 59, 0.05);
}

/* Dropdown floating card */
.shadow-dropdown {
    box-shadow:
        0 4px 6px rgba(11, 44, 49, 0.04),
        0 10px 20px rgba(11, 44, 49, 0.08),
        0 20px 40px rgba(11, 44, 49, 0.12);
}

/* Mobile Menu Animations */
@media (max-width: 768px) {
    .mobile-menu-enter {
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ===== MOBILE-FIRST OPTIMIERUNGEN ===== */

/* Touch-Target Mindestgröße (44x44px) für bessere Usability */
button,
a.inline-flex,
.mobile-nav a,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
}

/* Touch-Feedback für Mobile Devices */
@media (hover: none) and (pointer: coarse) {
    button:active,
    a.inline-flex:active,
    .card-lift:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Mobile Navigation Spacing */
@media (max-width: 1024px) {
    .mobile-nav a {
        padding: 1rem 0;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* Verbesserte Mobile Typografie */
@media (max-width: 640px) {
    /* Kleinere Headlines auf Mobile */
    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    /* Bessere Lesbarkeit für Fließtext */
    p {
        font-size: 1rem;
        line-height: 1.75;
    }

    /* Mehr Padding für Mobile */
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Optimierte Card-Hover-Effekte auf Mobile (keine Hover-Effekte) */
@media (hover: none) {
    .hover-lift:hover {
        transform: none;
    }

    .card-lift:hover {
        transform: none;
    }
}

/* Mobile-optimierte Buttons */
@media (max-width: 640px) {
    /* Buttons auf Mobile volle Breite wenn in flex-col */
    .flex-col a.inline-flex,
    .flex-col button {
        width: 100%;
        justify-content: center;
    }
}

/* ===== SCROLL-REVEAL ANIMATIONEN ===== */

/* Initial State - versteckt und nach unten verschoben */
[x-intersect] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated State - sichtbar und in Position */
[x-intersect].animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Verzögerungen für Stagger-Effekt */
[data-delay="0"] { transition-delay: 0s; }
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
/* Erweiterte Stagger-Delays für "Warum Azzam?" Karten (800ms Abstand) */
[data-delay="800"] { transition-delay: 0.8s; }
[data-delay="1600"] { transition-delay: 1.6s; }

/* Accessibility: Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    [x-intersect] {
        opacity: 1;
        transform: none;
        transition: opacity 0.3s ease;
    }

    [x-intersect].animate-in {
        opacity: 1;
        transform: none;
    }

    [data-delay="0"],
    [data-delay="100"],
    [data-delay="200"],
    [data-delay="300"],
    [data-delay="400"],
    [data-delay="500"],
    [data-delay="800"],
    [data-delay="1600"] {
        transition-delay: 0s;
    }
}

/* ===== PREMIUM HERO ANIMATIONEN ===== */

/* Contact Bar Shimmer Effect */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.animate-shimmer {
    animation: shimmer 3s ease-in-out infinite;
}

/* Shimmer Animation mit Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .animate-shimmer {
        animation: none;
    }
}


/* ===== NAVIGATION ENHANCEMENTS ===== */

/* Smooth Logo Resize */
.nav-logo-transition {
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Nav Link Underline Animation */
.nav-link-underline {
    position: relative;
}

.nav-link-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #0B2C31, #876A3B, #9A7D4A);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nav-link-underline:hover::after,
.nav-link-underline.active::after {
    width: 80%;
}

/* ===== CONTACT BAR ENHANCEMENTS ===== */

/* Link Hover Underline */
.contact-link-underline {
    position: relative;
}

.contact-link-underline::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #0B2C31;
    transition: width 0.3s ease;
}

.contact-link-underline:hover::after {
    width: 100%;
}

/* ===== HERO CTA BUTTON ENHANCEMENTS ===== */

/* Glow Effect for Primary CTA */
.cta-glow {
    position: relative;
}

.cta-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #876A3B, #9A7D4A, #876A3B);
    border-radius: 10px;
    opacity: 0;
    z-index: -1;
    filter: blur(8px);
    transition: opacity 0.3s ease;
}

.cta-glow:hover::before {
    opacity: 0.6;
}


/* Mobile Optimizations */
@media (max-width: 640px) {
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
    .btn {
        min-height: 48px;
    }

    .btn:active {
        transform: scale(0.98);
    }

    .btn-primary:hover {
        transform: none;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .btn::before,
    .btn svg {
        transition: none;
    }

    .btn-primary:hover,
    .btn:hover {
        transform: none;
    }
}


/* ===== ACCESSIBILITY - REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
    .animate-shimmer {
        animation: none;
    }

    * {
        transition-duration: 0.1s !important;
    }
}


/* ===== MOBILE SLIDER STYLES ===== */

/* Slider Container */
.mobile-slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Prevent text selection during drag */
.mobile-slider-container.dragging {
    user-select: none;
    -webkit-user-select: none;
}

/* Slide Wrapper */
.slider-slides-wrapper {
    display: flex;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Individual Slide */
.slider-slide {
    flex-shrink: 0;
    width: 100%;
    overflow-x: hidden;
    /* min-height entfernt - Slides passen sich dem Content an */
}

/* Navigation Dots Container - jetzt relativ innerhalb des Karussells */
.slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    /* position: fixed entfernt - Dots sind jetzt Teil des Karussells */
}

/* Dot Styles - Einheitlicher Approach für Desktop & Mobile */
.slider-dot {
    /* Unsichtbarer Touch-Target (44px für Mobile-Freundlichkeit) */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

/* Sichtbarer Dot via ::after */
.slider-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(135, 106, 59, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-dot:hover::after {
    background: rgba(135, 106, 59, 0.6);
    transform: scale(1.2);
}

.slider-dot.active::after {
    width: 12px;
    height: 12px;
    background: #876A3B;
}

.slider-dot:focus {
    outline: none;
}

.slider-dot:focus-visible::after {
    box-shadow: 0 0 0 3px rgba(135, 106, 59, 0.3);
}

/* Swipe Hint Animation */
.swipe-hint {
    animation: bounce-gentle 2s infinite;
}

@keyframes bounce-gentle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Desktop Hero Scroll Indicator Animation */
@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
}

/* Slide Content Animations */
.slide-fade-in {
    animation: slideContentFadeIn 0.6s ease-out;
}

@keyframes slideContentFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Process Modal - Bottom Sheet (Mobile) */
@media (max-width: 767px) {
    .process-modal-content {
        border-radius: 1.5rem 1.5rem 0 0;
        max-height: 85vh;
    }
}

/* Process Modal - Centered (Tablet+) */
@media (min-width: 768px) {
    .process-modal-content {
        border-radius: 1rem;
        max-height: 90vh;
    }
}

/* Touch targets bereits in .slider-dot integriert (44x44px) */

/* Height transition smoothing */
.slider-container-height-transition {
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .slider-slides-wrapper,
    .slider-dot,
    .swipe-hint,
    .slide-fade-in {
        transition: none;
        animation: none;
    }
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ===== MOBILE OVERSCROLL BEHAVIOR ===== */

/* Verhindert das Pull-to-Refresh und Bounce-Effekte auf Mobile */
@media (max-width: 1023px) {
    html, body {
        overscroll-behavior-y: none;
        /* CI-konformer Gradient-Hintergrund für gesamte Mobile-Seite */
        background: linear-gradient(135deg, #0B2C31 0%, #0a2328 50%, #0B2C31 100%);
        background-attachment: fixed;
    }

    /* Verbesserte Touch-Steuerung fuer den Mobile Slider */
    .mobile-slider-container,
    [x-data="mobileSlider()"] {
        touch-action: pan-y pinch-zoom;
    }
}

/* ===== IOS SAFE AREA BACKGROUND FIX ===== */
/* Stellt sicher, dass der Gradient bis zum Home-Indicator reicht */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 1023px) {
        html {
            /* Gradient-Hintergrund auch unter Safe Area */
            background: linear-gradient(135deg, #0B2C31 0%, #0a2328 50%, #0B2C31 100%);
            background-attachment: fixed;
            /* Safe Area padding für html */
            padding-bottom: env(safe-area-inset-bottom, 0);
        }

        /* Alternativer Fix: Pseudo-Element unter Footer für Safe Area */
        footer.mobile-footer::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: env(safe-area-inset-bottom, 0);
            background: linear-gradient(135deg, #0B2C31 0%, #0a2328 50%, #0B2C31 100%);
            z-index: -1;
            transform: translateY(100%);
        }
    }
}

/* ===== APP-LIKE LAYOUT FÜR ALLE SEITEN (Mobile) ===== */
@media (max-width: 1023px) {
    /* Main Content scrollbar mit fester Höhe - App-Gefühl auf allen Seiten */
    main {
        height: var(--app-height-js);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Padding unten für Footer-Clearance */
        padding-bottom: calc(var(--footer-collapsed) + 1rem);
    }

    /* Homepage mit Slider braucht kein extra Padding (hat eigene Slide-Höhen) */
    main.mobile-slider-page {
        padding-bottom: 0;
        overflow: hidden; /* Slider übernimmt das Scrollen */
    }
}

/* ===============================================
   APP-LIKE MOBILE EXPERIENCE OPTIMIZATIONS
   =============================================== */

/* ===== 1. APP-ARCHITECTURE: DIE 3 SLIDE-LAYOUT-TYPEN ===== */
@media (max-width: 1023px) {

    /* ----- SLIDER VIEWPORT: Feste Höhe von Anfang an ----- */
    .mobile-slider-viewport {
        height: var(--app-height-js);
    }

    /* ----- SLIDE 1: "THE CENTER STAGE" (Hero) ----- */
    /* Einfaches zentriertes Layout ohne absolute Positionierung */
    .mobile-slide-hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: var(--app-height-js);
        padding: 1.5rem 1rem calc(var(--dots-safe-space) + 1rem);
        text-align: center;
        position: relative;
    }

    .mobile-slide-hero .hero-text {
        width: 100%;
        max-width: 28rem; /* max-w-md */
    }

    .mobile-slide-hero .hero-cta {
        margin-top: 2rem;
    }

    /* ----- SLIDE 2: "THE SPACE FILLER" (Services) ----- */
    /* Scrollbar wenn Inhalt größer als Viewport */
    .mobile-slide-services {
        display: flex;
        flex-direction: column;
        height: var(--app-height-js);
        background: #E8E4DA; /* azzam-warm */
        overflow: hidden;
    }

    /* Scrollbarer Bereich innerhalb von Slide 2 */
    .mobile-services-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem 1rem calc(var(--dots-safe-space) + 1rem);
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pinch-zoom;
    }

    /* Custom Scrollbar für Services */
    .mobile-services-scroll::-webkit-scrollbar {
        width: 4px;
    }

    .mobile-services-scroll::-webkit-scrollbar-thumb {
        background: rgba(135, 106, 59, 0.3);
        border-radius: 2px;
    }

    .mobile-slide-services .service-header {
        text-align: center;
        margin-bottom: 1rem;
    }

    .mobile-slide-services .service-cards {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .mobile-slide-services .service-footer {
        text-align: center;
        margin-top: 1rem;
        padding-bottom: 1rem;
    }

    /* ----- SLIDE 3: "THE SCROLL CONTAINER" (Kontakt) ----- */
    /* Scrollbarer Bereich ohne Überlappung mit Dots */
    .mobile-slide-contact {
        display: flex;
        flex-direction: column;
        height: var(--app-height-js);
        background: #E8E4DA; /* azzam-warm */
        overflow: hidden;
    }

    .mobile-contact-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 0.75rem 1rem 1.25rem;
        -webkit-overflow-scrolling: touch;
        /* Erlaubt horizontales Wischen an den Parent (Slider) weiterzuleiten,
           während vertikales Scrollen hier bleibt */
        touch-action: pan-y pinch-zoom;
    }

    /* Smooth Scroll für iOS */
    .mobile-contact-scroll {
        scroll-behavior: smooth;
    }

    /* Custom Scrollbar für den Container */
    .mobile-contact-scroll::-webkit-scrollbar {
        width: 4px;
    }

    .mobile-contact-scroll::-webkit-scrollbar-thumb {
        background: rgba(135, 106, 59, 0.3);
        border-radius: 2px;
    }
}

/* Safe Area Insets für Geräte mit Notch */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 1023px) {
        .mobile-slide-hero,
        .mobile-slide-services {
            padding-top: max(1.5rem, env(safe-area-inset-top));
        }

        .mobile-contact-scroll {
            padding-top: max(0.75rem, env(safe-area-inset-top));
        }
    }
}

/* ===== 2. GLASSMORPHISM NAVIGATION DOTS ===== */
@media (max-width: 1023px) {
    .slider-dots-glassmorphism {
        position: fixed;
        bottom: calc(var(--footer-collapsed) + 1rem);
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;

        /* Glassmorphism Effekt */
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        background: rgba(11, 44, 49, 0.25);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 9999px;
        border: 1px solid rgba(135, 106, 59, 0.3);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    }

    /* Glas-Dot Button */
    .slider-dot-glass {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
        position: relative;
    }

    /* Sichtbarer Dot via ::after */
    .slider-dot-glass::after {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(231, 230, 212, 0.5);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .slider-dot-glass:hover::after {
        background: rgba(231, 230, 212, 0.8);
        transform: scale(1.15);
    }

    .slider-dot-glass.active::after {
        width: 12px;
        height: 12px;
        background: #876A3B;
        box-shadow: 0 0 10px rgba(135, 106, 59, 0.5);
    }

    .slider-dot-glass:focus {
        outline: none;
    }

    .slider-dot-glass:focus-visible::after {
        box-shadow: 0 0 0 3px rgba(135, 106, 59, 0.4);
    }
}

/* Fallback für Browser ohne backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
    @media (max-width: 1023px) {
        .slider-dots-glassmorphism {
            background: rgba(11, 44, 49, 0.85);
        }
    }
}

/* ===== 3. KOMPAKTE SERVICE-KARTEN ===== */
@media (max-width: 1023px) {
    .mobile-card-compact {
        padding: 1rem 1.25rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .mobile-card-compact .flex.items-start {
        gap: 0.75rem;
    }

    .mobile-icon-compact {
        width: 3rem;
        height: 3rem;
    }

    .mobile-icon-compact svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .mobile-card-compact h3 {
        font-size: 1.125rem;
        margin-bottom: 0.375rem;
    }

    .mobile-card-compact p {
        font-size: 0.8125rem;
        line-height: 1.5;
        margin-bottom: 0.625rem;
    }

    .mobile-card-compact .btn-sm {
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
    }

    /* Weniger Abstand zwischen Karten */
    .mobile-card-compact + .mobile-card-compact {
        margin-top: -0.25rem;
    }
}

/* ===== 4. ENHANCED SWIPE FEEDBACK ===== */
@media (max-width: 1023px) {
    /* Swipe-Richtungsanzeiger */
    [x-data="mobileSlider()"].swiping::before,
    [x-data="mobileSlider()"].swiping::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: rgba(135, 106, 59, 0.15);
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 40;
        pointer-events: none;
    }

    [x-data="mobileSlider()"].swiping::before {
        left: 1rem;
    }

    [x-data="mobileSlider()"].swiping::after {
        right: 1rem;
    }

    /* Zeige Pfeil-Indikatoren basierend auf Swipe-Richtung */
    [x-data="mobileSlider()"].swipe-right::before {
        opacity: 1;
        background: rgba(135, 106, 59, 0.25);
        transform: translateY(-50%) scale(1.1);
    }

    [x-data="mobileSlider()"].swipe-left::after {
        opacity: 1;
        background: rgba(135, 106, 59, 0.25);
        transform: translateY(-50%) scale(1.1);
    }

    /* Erfolgs-Feedback Puls */
    [x-data="mobileSlider()"].swipe-success {
        animation: swipePulse 0.3s ease-out;
    }

    @keyframes swipePulse {
        0% {
            box-shadow: inset 0 0 0 0 rgba(135, 106, 59, 0.3);
        }
        50% {
            box-shadow: inset 0 0 0 4px rgba(135, 106, 59, 0.2);
        }
        100% {
            box-shadow: inset 0 0 0 0 rgba(135, 106, 59, 0);
        }
    }

    /* Slide-Wrapper Drag-Verhalten */
    [x-data="mobileSlider()"].dragging .slider-slides-wrapper {
        transition: none;
    }
}

/* Reduced Motion: Swipe-Animationen deaktivieren */
@media (prefers-reduced-motion: reduce) {
    [x-data="mobileSlider()"].swipe-success {
        animation: none;
    }

    [x-data="mobileSlider()"].swiping::before,
    [x-data="mobileSlider()"].swiping::after {
        display: none;
    }
}

/* ===== 5. EXPANDABLE MOBILE FOOTER ===== */

/* Navigation Dots ausblenden wenn Footer ausgeklappt ist */
@media (max-width: 1023px) {
    body.footer-expanded .slider-dots-glassmorphism {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
}

@media (max-width: 1023px) {
    /* Footer Container - fixed am unteren Rand */
    footer.mobile-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        z-index: 40;
        max-height: 100vh;
        overflow: visible;
        /* Navy bis ganz unten inkl. Safe Area */
        padding-bottom: env(safe-area-inset-bottom, 0);
        /* Gradient wird über .ci-gradient-bg gesteuert */
    }

    /* Footer Toggle Button */
    .footer-toggle-btn {
        min-height: var(--footer-collapsed);
        position: relative;
        overflow: hidden;
    }

    /* Subtiler Shine-Effekt auf Toggle */
    .footer-toggle-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(135, 106, 59, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .footer-toggle-btn:hover::before {
        left: 100%;
    }

    /* Chevron Animation */
    .footer-toggle-btn svg {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Footer Content als Overlay wenn expanded */
    .footer-content-wrapper {
        -webkit-overflow-scrolling: touch;
    }

    /* Footer State Classes - Collapsed */
    .footer-content-wrapper.footer-collapsed-state {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
    }

    /* Footer State Classes - Expanded */
    .footer-content-wrapper.footer-expanded-state {
        max-height: 70vh;
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
    }

    /* Minimal Footer Bar Styling - erbt CI-Gradient vom Parent */
    .footer-minimal-bar {
        background: transparent;
    }

    .footer-minimal-bar a {
        transition: color 0.2s ease;
    }

    .footer-minimal-bar a:hover {
        color: #876A3B;
    }
}

/* Desktop: Footer als Teil des Dokumentflusses (keine Lücke) */
@media (min-width: 1024px) {
    /* Header-Höhe reduziert, da Kontaktleiste auf Desktop ausgeblendet */
    :root {
        --header-height: 80px;
        --footer-collapsed: 44px;
    }

    /* Footer Container - normaler Dokumentfluss, nicht fixed */
    footer.mobile-footer,
    footer.desktop-footer {
        position: relative !important;
        bottom: auto !important;
        z-index: 40;
        /* Gradient wird über .ci-gradient-bg gesteuert */
    }

    /* Footer Toggle Button - auch auf Desktop sichtbar */
    .footer-toggle-btn {
        min-height: var(--footer-collapsed);
        position: relative;
        overflow: hidden;
    }

    /* Footer State Classes - Desktop Collapsed */
    .footer-content-wrapper.footer-collapsed-state {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
    }

    /* Footer State Classes - Desktop Expanded */
    .footer-content-wrapper.footer-expanded-state {
        max-height: 60vh;
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
    }

    /* Footer Content Padding auf Desktop reduzieren */
    .footer-content-wrapper .container {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    /* Grid Gap auf Desktop kompakter */
    .footer-content-wrapper .grid {
        gap: 1.5rem;
        margin-bottom: 1rem;
    }

    /* Main-Content - kein extra Padding nötig (Footer ist Teil des Flows) */
    main {
        padding-bottom: 0;
    }

    /* CTA-Banner - Teil des normalen Dokumentflusses */
    .sticky-cta-banner {
        position: relative !important;
        bottom: auto !important;
    }
}

/* ===============================================
   MOBILE UX & USABILITY IMPROVEMENTS
   =============================================== */

/* ===== 1. CI-KONFORME LESBARKEIT (Gold auf Dunkel) ===== */
/* Verbessert Kontrast ohne CI-Farben zu ändern */
.bg-azzam-navy .text-azzam-gold,
.bg-gradient-to-r .text-azzam-gold,
[style*="background: linear-gradient"] .text-azzam-gold {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ===== 2. BUTTON-SHINE FÜR MOBILE (ohne Hover) ===== */
@keyframes mobileShine {
    0% { background-position: -100% 0; }
    20% { background-position: 200% 0; }
    100% { background-position: 200% 0; }
}

@media (hover: none) {
    .btn-primary {
        background: linear-gradient(105deg, #876A3B 20%, #9A7D4A 40%, #876A3B 60%) !important;
        background-size: 200% auto !important;
        animation: mobileShine 4s infinite linear;
    }
}

/* Reduced Motion: Keine Animation */
@media (prefers-reduced-motion: reduce) {
    .btn-primary {
        animation: none !important;
    }
}

/* ===== 3. FORMULAR-USABILITY ===== */
@media (max-width: 768px) {
    /* Größere Touch-Targets & verhindert iOS-Zoom */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        min-height: 50px !important;
        font-size: 16px !important;
        padding: 12px !important;
    }

    /* Mehr Abstand zwischen Formularfeldern */
    .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1.5rem;
    }
}

/* ===== 4. QUICKLINKS-ABSTÄNDE (Footer) ===== */
@media (max-width: 1023px) {
    footer ul.space-y-3 > li,
    footer ul.space-y-4 > li {
        margin-top: 1rem;
    }

    footer ul a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ===============================================
   MOBILE ICON NAVIGATION BAR
   =============================================== */

/* Mobile Icon Navigation - nur auf Mobile sichtbar */
@media (max-width: 1023px) {
    /* Icon Button */
    .mobile-nav-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        color: #0B2C31; /* azzam-navy */
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .mobile-nav-icon:hover,
    .mobile-nav-icon:active {
        color: #876A3B; /* azzam-gold */
        background-color: rgba(135, 106, 59, 0.1);
    }

    .mobile-nav-icon.active {
        color: #876A3B; /* azzam-gold */
        background-color: rgba(135, 106, 59, 0.1);
    }

    /* Language Button */
    .mobile-lang-btn {
        width: 28px;
        height: 28px;
        font-size: 0.625rem;
        font-weight: 700;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(11, 44, 49, 0.6); /* azzam-navy/60 */
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .mobile-lang-btn:hover {
        color: #0B2C31;
    }

    .mobile-lang-btn.active {
        background-color: #876A3B; /* azzam-gold */
        color: white;
    }

    /* Focus styles for accessibility */
    .mobile-nav-icon:focus-visible,
    .mobile-lang-btn:focus-visible {
        outline: 2px solid #876A3B;
        outline-offset: 2px;
    }
}

/* ===============================================
   DESKTOP STOCK PAGE STYLES (Mobile-inspired)
   =============================================== */

/* Control Bar - Navy Header im iFrame-Bereich */
.stock-control-bar {
    background: linear-gradient(135deg, #0B2C31 0%, #0a2328 100%);
}

/* iFrame Container - vh-basierte Höhe für größere Bildschirme */
@media (min-width: 768px) and (min-height: 900px) {
    .stock-iframe-viewport {
        height: 75vh !important;
    }
}

/* Coming Soon Visual Enhancement mit Pattern */
.coming-soon-visual {
    position: relative;
}

.coming-soon-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(135, 106, 59, 0.08) 1px, transparent 0);
    background-size: 32px 32px;
    opacity: 0.6;
    pointer-events: none;
}

/* ===============================================
   HAPTIC FEEDBACK - VISUAL SCALE ON TAP (Mobile)
   =============================================== */
@media (hover: none) and (pointer: coarse) {
    /* Primäre Buttons - stärkeres Feedback */
    .btn-primary:active,
    .btn:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Sekundäre interaktive Elemente */
    button:active,
    [role="button"]:active,
    a.inline-flex:active {
        transform: scale(0.97);
        transition: transform 0.08s ease-out;
    }

    /* Navigation Dots - dezentes Feedback */
    .slider-dot-glass:active {
        transform: scale(0.85);
    }

    /* Karten Touch-Feedback */
    .card:active,
    .bg-azzam-warm:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ===============================================
   BOTTOM-SHEET MODAL STYLES
   =============================================== */
@media (max-width: 767px) {
    /* Bottom Sheet Container */
    .bottom-sheet-modal {
        align-items: flex-end !important;
    }

    /* Bottom Sheet Content */
    .bottom-sheet-content {
        border-radius: 1.5rem 1.5rem 0 0 !important;
        max-height: 80vh;
        padding-bottom: env(safe-area-inset-bottom, 0.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #F8F6F1; /* azzam-warm */
    }

    /* Extended height for slider modals (10% more with top gap) */
    .bottom-sheet-content.bottom-sheet-extended {
        max-height: 88vh;
        margin-top: 5vh;
    }

    /* Drag Handle - Interactive for swipe */
    .bottom-sheet-handle {
        width: 36px;
        height: 4px;
        background: rgba(11, 44, 49, 0.2);
        border-radius: 2px;
        margin: 0.5rem auto;
        cursor: grab;
        touch-action: none;
    }

    .bottom-sheet-handle:active {
        cursor: grabbing;
        background: rgba(11, 44, 49, 0.35);
    }

    /* Swipe-to-dismiss dragging state */
    .bottom-sheet-content.is-dragging {
        transition: none !important;
        overflow: hidden !important;
    }

    .bottom-sheet-content.is-closing {
        transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    /* Bottom Sheet Animations */
    .bottom-sheet-enter {
        animation: bottomSheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .bottom-sheet-leave {
        animation: bottomSheetSlideDown 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes bottomSheetSlideUp {
        from {
            transform: translateY(100%);
            opacity: 0.8;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes bottomSheetSlideDown {
        from {
            transform: translateY(0);
            opacity: 1;
        }
        to {
            transform: translateY(100%);
            opacity: 0.8;
        }
    }
}

/* ===============================================
   FLOATING LABEL FORM INPUTS - Premium Design
   =============================================== */
.floating-label-group {
    position: relative;
    margin-bottom: 0;
}

.floating-label-input,
input.floating-label-input,
select.floating-label-input {
    display: block;
    width: 100%;
    padding: 1.5rem 1rem 0.625rem;
    font-size: 1rem;
    font-family: inherit;
    background-color: white;
    border: 1.5px solid #D1D5DB;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Select Pfeil */
select.floating-label-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

.floating-label-input:hover {
    border-color: rgba(135, 106, 59, 0.5);
}

.floating-label-input:focus {
    border-color: #876A3B;
    box-shadow: 0 0 0 3px rgba(135, 106, 59, 0.1);
}

.floating-label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    color: #6B7280;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    padding: 0 0.25rem;
    white-space: nowrap;
}

/* Label schwebt nach oben bei Fokus oder Wert */
.floating-label-input:focus ~ .floating-label,
.floating-label-input:not(:placeholder-shown) ~ .floating-label,
.floating-label-input.has-value ~ .floating-label,
select.floating-label-input ~ .floating-label {
    top: 0.625rem;
    transform: translateY(0);
    font-size: 0.7rem;
    color: #876A3B;
    font-weight: 600;
    background: white;
    letter-spacing: 0.025em;
}

/* Required Indikator */
.floating-label .required {
    color: #EF4444;
    margin-left: 0.125rem;
}

/* Select Styling für Floating Labels - Label immer oben */
.floating-label-select ~ .floating-label {
    top: 0.625rem;
    transform: translateY(0);
    font-size: 0.7rem;
    color: #876A3B;
    font-weight: 600;
    background: white;
}

/* Textarea Anpassung */
.floating-label-textarea {
    min-height: 120px;
    padding-top: 1.75rem;
    resize: vertical;
}

.floating-label-textarea ~ .floating-label {
    top: 1rem;
    transform: translateY(0);
}

.floating-label-textarea:focus ~ .floating-label,
.floating-label-textarea:not(:placeholder-shown) ~ .floating-label {
    top: 0.625rem;
    font-size: 0.7rem;
    color: #876A3B;
    font-weight: 600;
    background: white;
}

/* Mobile Optimierung - verhindert iOS Zoom */
@media (max-width: 768px) {
    .floating-label-input,
    .floating-label-select,
    .floating-label-textarea {
        min-height: 56px;
        font-size: 16px;
    }
}

/* ===============================================
   PHOSPHOR ICON UTILITIES
   =============================================== */
/* Größen passend zu bestehenden SVG-Klassen */
.icon-sm { font-size: 1rem; }      /* w-4 h-4 equivalent */
.icon-md { font-size: 1.25rem; }   /* w-5 h-5 equivalent */
.icon-lg { font-size: 1.5rem; }    /* w-6 h-6 equivalent */
.icon-xl { font-size: 2rem; }      /* w-8 h-8 equivalent */
.icon-2xl { font-size: 2.5rem; }   /* w-10 h-10 equivalent */

/* Vertikale Ausrichtung für Phosphor Icons */
.ph-thin, .ph-light, .ph {
    vertical-align: middle;
    line-height: 1;
}

/* Icon in runden Containern zentrieren */
.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================================
   LOTTIE ANIMATION CONTAINER
   =============================================== */
.lottie-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lottie-success {
    width: 96px;
    height: 96px;
}

/* ===============================================
   FLIP CARD COMPONENT (Desktop Service Cards)
   =============================================== */
.flip-card-container {
    perspective: 1500px;
    position: relative;
}

.flip-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card.flipped {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0.5rem;
}

.flip-card-front {
    z-index: 2;
    transform: rotateY(0deg);
}

.flip-card-back {
    transform: rotateY(180deg);
    z-index: 1;
}

/* Info Button (i) & Close Button - einheitlich */
.card-info-btn,
.card-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    z-index: 20;
    border: none;
}

.card-info-btn {
    font-size: 0.875rem;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
}

.card-info-btn-gold {
    background: rgba(135, 106, 59, 0.1);
    color: #876A3B;
}

.card-info-btn-gold:hover {
    background: #876A3B;
    color: white;
    transform: scale(1.05);
}

.card-info-btn-navy {
    background: rgba(11, 44, 49, 0.1);
    color: #0B2C31;
}

.card-info-btn-navy:hover {
    background: #0B2C31;
    color: white;
    transform: scale(1.05);
}

.card-close-btn {
    background: rgba(11, 44, 49, 0.1);
}

.card-close-btn:hover {
    background: rgba(11, 44, 49, 0.2);
    transform: scale(1.05);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .flip-card {
        transition: none;
    }

    .flip-card.flipped {
        transform: none;
    }

    .flip-card.flipped .flip-card-front {
        visibility: hidden;
    }

    .flip-card.flipped .flip-card-back {
        transform: none;
        visibility: visible;
    }
}

/* ===============================================
   SUCCESS CHECKMARK ANIMATION (CSS Fallback)
   =============================================== */
.checkmark-svg {
    animation: checkmark-scale 0.5s ease-out;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: checkmark-circle-draw 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkmark-check-draw 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes checkmark-scale {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes checkmark-circle-draw {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmark-check-draw {
    100% {
        stroke-dashoffset: 0;
    }
}

/* ===============================================
   ANKAUF SPLIT-LAYOUT (Desktop)
   =============================================== */
@media (min-width: 1024px) {
    .ankauf-form-desktop {
        /* Kompaktere Abstände für Desktop Split-Layout */
    }

    .ankauf-form-desktop .floating-label-group {
        margin-bottom: 0;
    }

    .ankauf-form-desktop .bg-azzam-warm {
        /* Kompakteres Padding für Steps */
    }
}

/* ===============================================
   TRUST BADGES - Haendlerbewertungen
   =============================================== */

.trust-badges-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.5rem;
    background: white;
    border-radius: 0.75rem;
    border: 1px solid rgba(135, 106, 59, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.trust-badge:hover {
    border-color: rgba(135, 106, 59, 0.4);
    box-shadow: 0 8px 24px rgba(135, 106, 59, 0.15);
    transform: translateY(-3px);
}

.trust-badge:focus-visible {
    outline: 2px solid #876A3B;
    outline-offset: 2px;
}

.trust-badge-logo {
    width: 5.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.trust-badge-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.trust-badge-rating-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trust-badge-stars {
    display: flex;
    gap: 0.125rem;
}

.trust-badge-star {
    width: 1rem;
    height: 1rem;
    color: #876A3B;
}

.trust-badge-star-empty {
    color: rgba(135, 106, 59, 0.25);
}

.trust-badge-rating {
    font-weight: 700;
    font-size: 1.125rem;
    color: #0B2C31;
}

.trust-badge-count {
    font-size: 0.75rem;
    color: rgba(11, 44, 49, 0.6);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .trust-badge {
        transition: none;
    }
    .trust-badge:hover {
        transform: none;
    }
}