/* =========================================================
   Footer: Öffnungszeiten, Trust, Kontakt, Claim
   ========================================================= */

/* Öffnungszeiten */
.opening-hours div {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    color: #F1EFE9;
    border-bottom: 1px solid rgba(241, 239, 233, 0.1);
}

.opening-hours div span {
    color: #F1EFE9;
}

.opening-hours .today {
    color: #7B3FE4;
    font-weight: 600;
}

.opening-hours .today span {
    color: #7B3FE4;
}

/* Status Heute geöffnet / geschlossen */
.open-status {
    margin-bottom: 10px;
    font-weight: 600;
}

.open-status.open {
    color: #7B3FE4;
}

.open-status.closed {
    color: rgba(241, 239, 233, 0.6);
}

/* Claim */
.footer-claim {
    text-align: center;
    font-size: 20px;
    color: #F1EFE9;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Trust-Elemente */
.footer-trust {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
    color: #F1EFE9;
    align-items: center;
}

.footer-trust span {
    color: #7B3FE4;
    margin-right: 8px;
}

/* Kontaktblock */
.footer-contact {
    color: #F1EFE9;
    line-height: 1.6;
}

.footer-contact a {
    color: #7B3FE4;
    text-decoration: none;
}

/* CTA */
.footer-cta {
    text-align: center;
}

.footer-button {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #7B3FE4;
    color: #EEE9E9;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
}

.footer-button:hover {
background: #ccafff;
color: #000000;
}

/* Regionstext */
.footer-region {
    margin-top: 10px;
    font-size: 14px;
    color: #F1EFE9;
    opacity: 0.7;
    text-align: center;
}

/* Proof */
.footer-proof {
    margin-top: 20px;
    font-size: 14px;
    color: #F1EFE9;
    opacity: 0.8;
    text-align: center;
}

.footer-proof span {
    color: #E6C384;
    margin-right: 6px;
}

/* Trennlinie */
.footer-divider {
    height: 1px;
    background: rgba(241, 239, 233, 0.1);
    margin: 40px 0;
}

/* Darstellung Check Haken */
.footer-trust span img,
.footer-proof span img {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 8px;
}

.footer-proof span {
    margin-right: 0;
}

/* =========================================
   Footer Links Hover Effekt
   Macht Links lebendig und hochwertig
========================================= */
.footer-contact a,
.footer-bottom a,
.footer-proof a {
    transition: color 0.3s ease, opacity 0.3s ease;
}

.footer-contact a:hover,
.footer-bottom a:hover,
.footer-proof a:hover {
    color: #7B3FE4; /* Gold */
    opacity: 0.8;
}

/* =========================================
   CTA Button Hover Effekt
   Leichtes Anheben + Schatten für Tiefe
========================================= */
.footer-button {
    transition: all 0.3s ease;
}

.footer-button:hover {
    transform: translateY(-2px); /* leicht nach oben */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* =========================================
   Footer Fade-In Effekt beim Laden
   Sorgt für ruhigen, hochwertigen Eindruck
========================================= */
.footer-claim,
.footer-trust,
.footer-contact,
.footer-cta,
.footer-region,
.footer-proof,
.opening-hours {
    opacity: 0;
    transform: translateY(10px);
    animation: footerFadeIn 0.8s ease forwards;
}

/* leichte Verzögerung für Staffelung */
.footer-trust { animation-delay: 0.1s; }
.footer-contact { animation-delay: 0.2s; }
.footer-cta { animation-delay: 0.3s; }
.footer-region { animation-delay: 0.4s; }
.footer-proof { animation-delay: 0.5s; }
.opening-hours { animation-delay: 0.6s; }

/* Animation selbst */
@keyframes footerFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   Trust Elemente Hover
   Minimale Bewegung für mehr Dynamik
========================================= */
.footer-trust div {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-trust div:hover {
    transform: translateX(5px);
    opacity: 0.9;
}

/* =========================================
   Scroll Reveal Grundzustand
   Elemente sind anfangs leicht nach unten versetzt
   und unsichtbar
========================================= */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

/* =========================================
   Sichtbarer Zustand
   Sobald das Element im Viewport ist, wird es eingeblendet
========================================= */
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   Staffelung für einen hochwertigeren Effekt
   Elemente erscheinen leicht zeitversetzt
========================================= */
.reveal-delay-1 {
    transition-delay: 0.08s;
}

.reveal-delay-2 {
    transition-delay: 0.16s;
}

.reveal-delay-3 {
    transition-delay: 0.24s;
}

.reveal-delay-4 {
    transition-delay: 0.32s;
}

.reveal-delay-5 {
    transition-delay: 0.40s;
}

/* =========================================
   Mobile Optimierung
   Bewegung etwas dezenter halten
========================================= */
@media (max-width: 768px) {
    .reveal-on-scroll {
        transform: translateY(12px);
        transition-duration: 0.6s;
    }
}

/* =========================================
   Barrierefreiheit
   Wenn Nutzer reduzierte Bewegung bevorzugen,
   Animationen deaktivieren
========================================= */
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll,
    .reveal-on-scroll.is-visible,
    .reveal-delay-1,
    .reveal-delay-2,
    .reveal-delay-3,
    .reveal-delay-4,
    .reveal-delay-5 {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}





/* =========================================
   CSS für Consent Banner
========================================= */
/* Minimierten Consent Button heller und besser sichtbar machen */
#cmplz-manage-consent .cmplz-manage-consent {
    background: rgba(135,135,135,0.85) !important;
    color: #111111 !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
}

#cmplz-manage-consent .cmplz-manage-consent:hover {
    background: #9a9a9a !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.15) !important;
}


/*
=====================================
Footer Lokalzeit
=====================================
*/
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    letter-spacing: 2px;
}

.status-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

/* Zustand offen */
.status-dot.open {
    background: #39ff14;
    box-shadow: 0 0 8px rgba(57,255,20,0.6);
}

/* Zustand geschlossen */
.status-dot.closed {
    background: #ff3b3b;
    box-shadow: 0 0 8px rgba(255,59,59,0.6);
}

.clock {
    font-family: monospace;
    opacity: 0.8;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.4; }
    100% { transform: scale(1); opacity: 1; }
}

.status-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: var(--space-before,0px);
    margin-bottom: var(--space-after, 0px);
}

.status-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clock {
    font-family: monospace;
}

/*
 * Titel: HubSpotChat Positionierung
 * Beschreibung:
 */
#hubspot-messages-iframe-container {
    bottom: 200px !important;
}

#hubspot-messages-iframe-container.widget-align-right {
    bottom: 200px !important;
}