/* ═════════════════════════════════════════════════════════════════════════
   Wave 87BS — One UI Premium FX
   Event-Theme · Seasonal Banner · Floating CTA · Sticky Mobile · Microinteractions
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── 1. EVENT-BANNER (oben unter Header) ───────────────────────────── */
.aob-event-banner {
    position: relative;
    background: linear-gradient(135deg, var(--aob-event-accent, #90a7ac), var(--aob-event-accent-2, #dabe92));
    color: #fff;
    padding: .85rem 0;
    font-size: .92rem;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    animation: aob-event-banner-in .55s cubic-bezier(.4, 0, .2, 1);
}
.aob-event-banner__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-right: 2.5rem;
}
.aob-event-banner__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.aob-event-banner__text strong { font-size: 1.02rem; font-weight: 600; }
.aob-event-banner__text span   { font-size: .85rem; opacity: .9; margin-top: .15rem; }
.aob-event-banner__cta {
    background: rgba(255, 255, 255, .94);
    color: var(--aob-event-accent, #1a1a1a);
    padding: .55rem 1.15rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.aob-event-banner__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.aob-event-banner__close {
    position: absolute;
    right: .65rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .8);
    font-size: 1.4rem;
    line-height: 1;
    padding: .25rem .5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.aob-event-banner__close:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.aob-event-banner.is-dismissed { display: none; }

@keyframes aob-event-banner-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
    .aob-event-banner { padding: .65rem 0; }
    .aob-event-banner__inner { flex-direction: column; align-items: flex-start; gap: .55rem; padding-right: 2rem; }
    .aob-event-banner__cta { align-self: stretch; text-align: center; }
}

/* ─── 2. FLOATING TERMIN-CTA (rechts unten, alle Geräte) ────────────── */
/* Wave 87BW.41: bottom: 5.5rem (90px) damit nicht mit WhatsApp-FAB (.aob-wa-fab right:22px bottom:22px) overlapt */
.aob-floating-cta {
    position: fixed;
    right: 1.2rem;
    bottom: 5.5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.35rem;
    background: linear-gradient(135deg, var(--aob-event-accent, #90a7ac), var(--aob-event-accent-2, #dabe92));
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(144, 167, 172, .35), 0 4px 12px rgba(0, 0, 0, .12);
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, opacity .3s ease;
    z-index: 998;
    will-change: transform;
}
.aob-floating-cta:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 14px 38px rgba(144, 167, 172, .45), 0 6px 18px rgba(0, 0, 0, .18);
}
.aob-floating-cta:active { transform: translateY(0) scale(.98); }
.aob-floating-cta__pulse {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: 0 0 0 0 var(--aob-event-accent, #90a7ac);
    animation: aob-pulse 2.4s ease-out infinite;
    opacity: .6;
    pointer-events: none;
}
@keyframes aob-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(144, 167, 172, .55); }
    70%  { box-shadow: 0 0 0 18px rgba(144, 167, 172, 0); }
    100% { box-shadow: 0 0 0 0 rgba(144, 167, 172, 0); }
}
.aob-floating-cta__icon { font-size: 1.15rem; }

/* hide floating CTA on small screens (sticky-mobile-cta übernimmt dann) */
@media (max-width: 720px) {
    .aob-floating-cta { display: none; }
}
/* hide floating CTA on Admin + Checkout pages (via body-class) */
body.is-admin .aob-floating-cta,
body.is-checkout .aob-floating-cta { display: none; }

/* ─── 3. STICKY MOBILE BOTTOM CTA BAR ───────────────────────────────── */
.aob-sticky-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 997;
    display: none; /* default hidden, only mobile */
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 1px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding: max(.4rem, env(safe-area-inset-bottom, 0)) 0 max(.65rem, env(safe-area-inset-bottom, 0));
    transition: transform .3s ease;
}
.aob-sticky-mobile-cta__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text, #0f172a);
    padding: .4rem .25rem;
    transition: background .15s, color .15s, transform .15s;
}
.aob-sticky-mobile-cta__btn span:first-child { font-size: 1.35rem; line-height: 1; }
.aob-sticky-mobile-cta__btn:active { transform: scale(.95); }
.aob-sticky-mobile-cta__btn--call { color: #0f5b3a; }
.aob-sticky-mobile-cta__btn--whatsapp { color: #128c46; }
.aob-sticky-mobile-cta__btn--book {
    color: #fff;
    background: linear-gradient(135deg, var(--aob-event-accent, #90a7ac), var(--aob-event-accent-2, #dabe92));
    margin: 0 .35rem .15rem;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
@media (max-width: 720px) {
    .aob-sticky-mobile-cta { display: grid; }
    /* Push the page-content up so the sticky-bar doesn't cover content */
    body:not(.is-admin):not(.is-checkout) { padding-bottom: max(72px, calc(72px + env(safe-area-inset-bottom, 0))); }
}
body.is-admin .aob-sticky-mobile-cta,
body.is-checkout .aob-sticky-mobile-cta { display: none !important; }

/* Auto-hide bei Scroll-Down, Show bei Scroll-Up (JS-gesteuert) */
.aob-sticky-mobile-cta.is-hidden { transform: translateY(100%); }

/* ─── 4. BIRTHDAY-BANNER (im account-Bereich oder Header) ───────────── */
.aob-birthday-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.4rem;
    background: linear-gradient(135deg, #fde2b8, #f0c794);
    color: #5b3a1a;
    border-radius: 14px;
    margin: 1rem auto;
    max-width: 880px;
    box-shadow: 0 8px 24px rgba(218, 190, 146, .35);
    animation: aob-birthday-shine 3.5s ease-in-out infinite;
}
.aob-birthday-banner__emoji { font-size: 2.2rem; }
.aob-birthday-banner__text { display: flex; flex-direction: column; gap: .2rem; line-height: 1.35; }
.aob-birthday-banner__text strong { font-size: 1.05rem; font-weight: 600; }
.aob-birthday-banner__text code {
    background: rgba(255, 255, 255, .85);
    padding: .1rem .5rem;
    border-radius: 4px;
    font-size: .9rem;
    margin-left: .25rem;
    color: #8b1525;
}
@keyframes aob-birthday-shine {
    0%, 100% { box-shadow: 0 8px 24px rgba(218, 190, 146, .35); }
    50%      { box-shadow: 0 8px 28px rgba(218, 190, 146, .65); }
}

/* ─── 5. PARTIKEL-LAYER (Schnee / Herzchen / Blätter / Sparkle) ────── */
.aob-particle-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}
.aob-particle {
    position: absolute;
    top: -3rem;
    opacity: .65;
    animation: aob-fall linear infinite;
    user-select: none;
}
@keyframes aob-fall {
    0%   { transform: translateY(-10vh) translateX(0)   rotate(0); opacity: 0; }
    10%  { opacity: .55; }
    90%  { opacity: .35; }
    100% { transform: translateY(110vh) translateX(24px) rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .aob-particle-layer { display: none; }
}
@media (max-width: 720px) {
    .aob-particle-layer { display: none; } /* mobile: keine particles aus Perf-Gründen */
}

/* ─── 6. MICROINTERACTIONS (Premium Hover, Glow, Magnetic) ─────────── */

/* Glow-Premium-Button */
.aob-btn-glow {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.aob-btn-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--aob-event-accent, #90a7ac), var(--aob-event-accent-2, #dabe92));
    z-index: -1;
    opacity: 0;
    transition: opacity .3s ease;
    filter: blur(8px);
}
.aob-btn-glow:hover::before { opacity: .55; }

/* Magnetic-Button (JS-gesteuert) */
.aob-magnetic { transition: transform .25s cubic-bezier(.18, .89, .32, 1.28); will-change: transform; }

/* Card lift-on-hover (Apple-style) */
.product-card, .service-card, .b-card, .vip-tile, .fv-shop-tile,
.aob-card-lift {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
@media (hover: hover) {
    .product-card:hover, .service-card:hover, .b-card:hover, .vip-tile:hover, .fv-shop-tile:hover,
    .aob-card-lift:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 38px rgba(0, 0, 0, .12);
    }
}

/* Smooth-Reveal beim Scroll (intersection-observer) */
.aob-fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.aob-fade-up.is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .aob-fade-up { opacity: 1; transform: none; transition: none; }
}

/* ─── 7. THEME-SPEZIFISCHE BANNER-DEKO ───────────────────────────── */

/* Weihnachts-Schimmer im Banner */
.aob-event-banner--christmas {
    background: linear-gradient(135deg, #8b1525, #b8334f 60%, #dabe92);
}
.aob-event-banner--christmas::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .15) 1.5px, transparent 2px),
                      radial-gradient(circle at 80% 60%, rgba(255, 255, 255, .15) 1.5px, transparent 2px),
                      radial-gradient(circle at 50% 80%, rgba(255, 255, 255, .12) 1px, transparent 1.5px);
    background-size: 80px 80px;
    opacity: .5;
    pointer-events: none;
    animation: aob-twinkle 4s ease-in-out infinite;
}
@keyframes aob-twinkle {
    0%, 100% { opacity: .35; }
    50%      { opacity: .65; }
}

.aob-event-banner--valentine {
    background: linear-gradient(135deg, #c93030, #e8b4a8);
}
.aob-event-banner--newyear {
    background: linear-gradient(135deg, #1f4a6b, #dabe92 70%, #f5d99a);
}
.aob-event-banner--blackweek {
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d 60%, #dabe92);
}
.aob-event-banner--mothersday {
    background: linear-gradient(135deg, #b85770, #dabe92);
}
.aob-event-banner--easter {
    background: linear-gradient(135deg, #7a8b5a, #c7d099 60%, #dabe92);
}

/* ─── 8. THEME-INTENSITY: subtle vs medium ──────────────────────── */
.aob-theme-intensity-subtle .aob-event-banner { padding: .65rem 0; font-size: .88rem; }
.aob-theme-intensity-medium .aob-event-banner { padding: 1rem 0; }

/* ─── 9. SMART-HEADER: glasmorph-saturate auf Scroll ─────────────── */
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
    transition: background .3s ease, box-shadow .3s ease;
}

/* ─── 10. ACCESSIBILITY-HARDENING ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .aob-event-banner, .aob-floating-cta, .aob-floating-cta__pulse,
    .aob-birthday-banner, .aob-particle, .aob-event-banner--christmas::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   Wave 87BV — PRÄGNANTER (User-Wunsch: noch mehr von allem)
   ═════════════════════════════════════════════════════════════════════════ */

/* Banner: deutlich präsenter (größer, mehr padding, animierter shine) */
.aob-event-banner {
    padding: 1.4rem 0 !important;
    font-size: 1rem;
    background-size: 200% 200%;
    animation: aob-event-banner-in .55s cubic-bezier(.4, 0, .2, 1),
               aob-banner-shimmer 8s ease-in-out infinite;
}
.aob-event-banner__text strong { font-size: 1.18rem !important; letter-spacing: .015em; }
.aob-event-banner__text span   { font-size: .92rem; }
.aob-event-banner__cta {
    padding: .75rem 1.6rem !important;
    font-size: .98rem !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
    font-weight: 700;
    letter-spacing: .01em;
}
@keyframes aob-banner-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@media (max-width: 720px) {
    .aob-event-banner { padding: 1rem 0 !important; }
    .aob-event-banner__text strong { font-size: 1.02rem !important; }
}

/* Floating-CTA: kräftiger, größerer Pulse-Ring, premium-glow */
.aob-floating-cta {
    padding: 1rem 1.6rem !important;
    font-size: 1rem !important;
    font-weight: 700;
    letter-spacing: .015em;
    box-shadow: 0 12px 32px rgba(144, 167, 172, .45), 0 6px 16px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.aob-floating-cta__icon { font-size: 1.35rem !important; }
.aob-floating-cta__pulse {
    animation: aob-pulse-strong 2.2s ease-out infinite;
}
@keyframes aob-pulse-strong {
    0%   { box-shadow: 0 0 0 0   rgba(144, 167, 172, .75); }
    60%  { box-shadow: 0 0 0 30px rgba(144, 167, 172, 0); }
    100% { box-shadow: 0 0 0 0   rgba(144, 167, 172, 0); }
}

/* Sticky-Mobile-CTA prominenter — größere Button-Höhe */
.aob-sticky-mobile-cta__btn { padding: .6rem .3rem !important; font-size: .82rem !important; font-weight: 700; }
.aob-sticky-mobile-cta__btn span:first-child { font-size: 1.6rem !important; }
.aob-sticky-mobile-cta__btn--book {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22) !important;
    transform: translateY(-3px);
}
@media (max-width: 720px) {
    body:not(.is-admin):not(.is-checkout) { padding-bottom: max(86px, calc(86px + env(safe-area-inset-bottom, 0))); }
}

/* Particles: dichter + AUCH auf Mobile (User will mehr) */
.aob-particle-layer { z-index: 60 !important; }
.aob-particle { opacity: .85 !important; }
@media (max-width: 720px) {
    .aob-particle-layer { display: block !important; }
    .aob-particle { font-size: 14px !important; }
}

/* Theme-spezifisch: noch mehr Drama */
.aob-event-banner--christmas {
    background: linear-gradient(135deg, #6f0a1a 0%, #b8334f 50%, #f3d99f 100%) !important;
    background-size: 200% 200% !important;
}
.aob-event-banner--christmas::after {
    background-size: 60px 60px !important;
    opacity: .85 !important;
    animation: aob-twinkle 2.5s ease-in-out infinite;
}
.aob-event-banner--valentine {
    background: linear-gradient(135deg, #b81b1b 0%, #e84a8b 50%, #f5c2cf 100%) !important;
    background-size: 200% 200% !important;
}
.aob-event-banner--blackweek {
    background: linear-gradient(135deg, #000 0%, #2d2d2d 40%, #c89944 80%, #f5d99a 100%) !important;
}
.aob-event-banner--mothersday {
    background: linear-gradient(135deg, #9b3556 0%, #e0a3b4 60%, #f3d99f 100%) !important;
    background-size: 200% 200% !important;
}

/* Headline-Theme-Akzent (Hero-h1 bekommt theme-Farbe als underline) */
body.aob-theme-christmas main h1::after,
body.aob-theme-valentine main h1::after,
body.aob-theme-mothersday main h1::after {
    content: '';
    display: block;
    width: 90px;
    height: 4px;
    margin-top: .65rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--aob-event-accent, #90a7ac), var(--aob-event-accent-2, #dabe92));
    animation: aob-accent-pulse 2.5s ease-in-out infinite;
}
@keyframes aob-accent-pulse {
    0%, 100% { opacity: .9; width: 90px; }
    50%      { opacity: 1;  width: 130px; }
}

/* Birthday-Banner größer + animierter */
.aob-birthday-banner {
    padding: 1.4rem 1.8rem !important;
    font-size: 1.05rem;
}
.aob-birthday-banner__emoji {
    font-size: 2.8rem !important;
    animation: aob-bday-bounce 2.5s ease-in-out infinite;
}
@keyframes aob-bday-bounce {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-6px) rotate(4deg); }
}

/* === /Wave 87BV === */