/* CLAUDE: Mobile Floating Action Buttons (FABs) */
/* CLAUDE: Ersetzt mobile-cta-bar mit modernem FAB-Design */
/* CLAUDE: Rechts unten fixiert, nur auf Mobile sichtbar */
/* CLAUDE: Stand: 2026-02-04 */

/* ========================================
   CLAUDE: 1. FAB CONTAINER
   CLAUDE: Fixiert rechts unten am Viewport
   ======================================== */

/* CLAUDE: Hauptcontainer - versteckt auf Desktop */
.lhi-mobile-fab {
    /* CLAUDE: Auf Desktop ausblenden */
    display: none;

    /* CLAUDE: Fixierte Positionierung rechts unten */
    position: fixed;
    right: var(--lhi-space-sm, 1rem);
    bottom: var(--lhi-space-sm, 1rem);

    /* CLAUDE: z-index unter Header (1000) und Cookie-Notice (100001) */
    z-index: 999;

    /* CLAUDE: Vertikales Flex-Layout fuer gestapelte Buttons */
    flex-direction: column;
    align-items: flex-end;
    gap: var(--lhi-space-sm, 1rem);

    /* CLAUDE: Safe-Area fuer iPhone X+ (Notch, Home-Indicator) */
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* CLAUDE: Auf Mobile anzeigen (< 768px) */
@media (max-width: 768px) {
    .lhi-mobile-fab {
        display: flex;
    }
}

/* ========================================
   CLAUDE: 2. FAB BUTTONS
   CLAUDE: Runde Buttons mit Icon
   ======================================== */

/* CLAUDE: Basis-Style fuer alle FAB-Buttons */
.lhi-mobile-fab__btn {
    /* CLAUDE: Runder Button */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;

    /* CLAUDE: Reset fuer Links und Buttons */
    border: none;
    padding: 0;
    text-decoration: none;
    cursor: pointer;

    /* CLAUDE: Schatten fuer Tiefe */
    box-shadow: var(--lhi-shadow-lg, 0 10px 15px rgba(59, 42, 26, 0.15));

    /* CLAUDE: Sanfte Animation */
    transition: transform var(--lhi-transition-fast, 150ms ease),
                box-shadow var(--lhi-transition-fast, 150ms ease),
                background-color var(--lhi-transition-fast, 150ms ease);

    /* CLAUDE: Touch-Target Mindestgroesse (WCAG) */
    min-width: 48px;
    min-height: 48px;
}

/* CLAUDE: Hover/Focus-Zustand */
.lhi-mobile-fab__btn:hover,
.lhi-mobile-fab__btn:focus {
    transform: scale(1.05);
    box-shadow: var(--lhi-shadow-xl, 0 20px 25px rgba(59, 42, 26, 0.2));
}

/* CLAUDE: Active-Zustand (beim Klicken) */
.lhi-mobile-fab__btn:active {
    transform: scale(0.95);
}

/* CLAUDE: Focus-Visible fuer Keyboard-Navigation */
.lhi-mobile-fab__btn:focus-visible {
    outline: 3px solid var(--lhi-color-gold, #8a6b3f);
    outline-offset: 2px;
}

/* CLAUDE: Telefon-Button (Dark Umber) */
.lhi-mobile-fab__btn--phone {
    background-color: var(--lhi-color-text, #3B2A1A);
    color: var(--lhi-color-white, #FFFFFF);
}

.lhi-mobile-fab__btn--phone:hover,
.lhi-mobile-fab__btn--phone:focus {
    background-color: var(--lhi-color-secondary, #7C4A21);
    color: var(--lhi-color-white, #FFFFFF);
}

/* CLAUDE: Bewertungs-Button (Heritage Gold) */
.lhi-mobile-fab__btn--bewertung {
    background-color: var(--lhi-color-gold, #8a6b3f);
    color: var(--lhi-color-white, #FFFFFF);
}

.lhi-mobile-fab__btn--bewertung:hover,
.lhi-mobile-fab__btn--bewertung:focus {
    background-color: var(--lhi-color-secondary, #7C4A21);
    color: var(--lhi-color-white, #FFFFFF);
}

/* CLAUDE: Bewertungs-Button wenn Popup offen */
.lhi-mobile-fab__btn--bewertung[aria-expanded="true"] {
    background-color: var(--lhi-color-secondary, #7C4A21);
}

/* ========================================
   CLAUDE: 3. FAB ICONS
   CLAUDE: SVG-Icons im Button
   ======================================== */

/* CLAUDE: Icon-Groesse und Farbe */
.lhi-mobile-fab__icon {
    width: 24px;
    height: 24px;
    /* CLAUDE: SVG erbt Farbe vom Parent */
    color: inherit;
    stroke: currentColor;
    fill: none;
}

/* CLAUDE: Emoji-Fallback Style */
.lhi-mobile-fab__icon--emoji {
    width: auto;
    height: auto;
    font-size: 1.5rem;
    line-height: 1;
}

/* ========================================
   CLAUDE: 4. FAB GROUP (Button + Popup)
   CLAUDE: Container fuer Button mit Popup
   ======================================== */

/* CLAUDE: Relative Position fuer Popup */
.lhi-mobile-fab__group {
    position: relative;
}

/* ========================================
   CLAUDE: 5. POPUP
   CLAUDE: Info-Card mit Bewertungs-CTA
   ======================================== */

/* CLAUDE: Popup versteckt wenn aria-hidden="true" */
.lhi-mobile-fab__popup {
    /* CLAUDE: Positionierung links vom Button */
    position: absolute;
    right: calc(100% + var(--lhi-space-sm, 1rem));
    bottom: 0;

    /* CLAUDE: Card-Style */
    width: 280px;
    max-width: calc(100vw - 100px);
    padding: var(--lhi-space-sm, 1rem);
    background-color: var(--lhi-color-white, #FFFFFF);
    border-radius: var(--lhi-radius-lg, 12px);
    box-shadow: var(--lhi-shadow-xl, 0 20px 25px rgba(59, 42, 26, 0.15));

    /* CLAUDE: Initialer Zustand: versteckt */
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity var(--lhi-transition-normal, 250ms ease),
                visibility var(--lhi-transition-normal, 250ms ease),
                transform var(--lhi-transition-normal, 250ms ease);

    /* CLAUDE: Pfeil zum Button (CSS Triangle) */
    /* CLAUDE: Wird mit ::after erstellt */
}

/* CLAUDE: Popup sichtbar wenn aria-hidden="false" */
.lhi-mobile-fab__popup[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* CLAUDE: Pfeil-Indikator zum Button */
.lhi-mobile-fab__popup::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: 18px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--lhi-color-white, #FFFFFF);
}

/* CLAUDE: Popup-Titel */
.lhi-mobile-fab__popup-title {
    margin: 0 0 var(--lhi-space-xs, 0.5rem);
    font-family: var(--lhi-font-serif, 'Libre Baskerville', Georgia, serif);
    font-size: var(--lhi-font-size-base, 1rem);
    font-weight: 700;
    color: var(--lhi-color-text, #3B2A1A);
    line-height: var(--lhi-line-height-tight, 1.2);
}

/* CLAUDE: Popup-Text */
.lhi-mobile-fab__popup-text {
    margin: 0 0 var(--lhi-space-sm, 1rem);
    font-family: var(--lhi-font-sans, 'Source Sans Pro', sans-serif);
    font-size: var(--lhi-font-size-sm, 0.9rem);
    color: var(--lhi-color-secondary, #7C4A21);
    line-height: var(--lhi-line-height, 1.6);
}

/* CLAUDE: Popup CTA-Link */
.lhi-mobile-fab__popup-link {
    display: inline-flex;
    align-items: center;
    gap: var(--lhi-space-xs, 0.5rem);
    font-family: var(--lhi-font-sans, 'Source Sans Pro', sans-serif);
    font-size: var(--lhi-font-size-sm, 0.9rem);
    font-weight: 600;
    color: var(--lhi-color-gold, #8a6b3f);
    text-decoration: none;
    transition: color var(--lhi-transition-fast, 150ms ease);
}

.lhi-mobile-fab__popup-link:hover,
.lhi-mobile-fab__popup-link:focus {
    color: var(--lhi-color-secondary, #7C4A21);
    text-decoration: underline;
}

/* ========================================
   CLAUDE: 6. LANDSCAPE-MODUS
   CLAUDE: Anpassungen fuer Querformat
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    /* CLAUDE: Kompaktere Buttons im Landscape */
    .lhi-mobile-fab__btn {
        width: 48px;
        height: 48px;
    }

    .lhi-mobile-fab__icon {
        width: 20px;
        height: 20px;
    }

    /* CLAUDE: Popup max-height begrenzen */
    .lhi-mobile-fab__popup {
        max-height: 50vh;
        overflow-y: auto;
    }

    /* CLAUDE: Kleinerer Gap */
    .lhi-mobile-fab {
        gap: var(--lhi-space-xs, 0.5rem);
    }
}

/* ========================================
   CLAUDE: 7. REDUCED MOTION
   CLAUDE: Accessibility: Animationen deaktivieren
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .lhi-mobile-fab__btn,
    .lhi-mobile-fab__popup {
        transition: none;
    }

    .lhi-mobile-fab__btn:hover,
    .lhi-mobile-fab__btn:focus,
    .lhi-mobile-fab__btn:active {
        transform: none;
    }

    .lhi-mobile-fab__popup[aria-hidden="false"] {
        transform: none;
    }
}

/* ========================================
   CLAUDE: 8. EINBLEND-ANIMATION
   CLAUDE: FABs sliden von rechts ein
   ======================================== */

@keyframes lhi-fab-slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* CLAUDE: Animation nur wenn kein reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .lhi-mobile-fab {
        animation: lhi-fab-slide-in 0.4s ease forwards;
    }
}

/* ========================================
   CLAUDE: 9. KLEINE SCREENS (< 360px)
   CLAUDE: Extra-kompakte Darstellung
   ======================================== */

@media (max-width: 360px) {
    .lhi-mobile-fab {
        right: var(--lhi-space-xs, 0.5rem);
        bottom: var(--lhi-space-xs, 0.5rem);
    }

    .lhi-mobile-fab__popup {
        width: 240px;
        padding: var(--lhi-space-xs, 0.5rem);
    }

    .lhi-mobile-fab__popup-title {
        font-size: var(--lhi-font-size-sm, 0.9rem);
    }

    .lhi-mobile-fab__popup-text {
        font-size: var(--lhi-font-size-xs, 0.875rem);
    }
}