/* CLAUDE: Footer Styles - Modernisierter Footer */
/* CLAUDE: Verwendet Gradient Background mit Logo Overlay */
/* CLAUDE: Anpassen: Spalten, Abstände in CSS Variables */

/* ==========================================================================
   CLAUDE: Footer Container
   ========================================================================== */

.pvm-footer {
    position: relative;                            /* CLAUDE: Für Background */
    background: var(--pvm-gradient);              /* CLAUDE: Marken-Gradient */
    color: #fff;                                   /* CLAUDE: Weißer Text */
    padding: var(--pvm-space-3xl) 0 var(--pvm-space-lg); /* CLAUDE: Großzügiges Padding */
    margin-top: 0;                                 /* CLAUDE: Kein Abstand - CTA-Sections haben eigenes padding */
    overflow: hidden;                              /* CLAUDE: Overflow verstecken */
}

/* ==========================================================================
   CLAUDE: Footer Background Logo
   ========================================================================== */

.pvm-footer__bg {
    position: absolute;                            /* CLAUDE: Absolut positioniert */
    inset: 0;                                      /* CLAUDE: Füllt Container */
    pointer-events: none;                          /* CLAUDE: Klicks durchlassen */
    overflow: hidden;                              /* CLAUDE: Overflow verstecken */
}

.pvm-footer__bg-logo {
    position: absolute;                            /* CLAUDE: Absolut */
    right: -10%;                                   /* CLAUDE: Rechts überlappend */
    bottom: -20%;                                  /* CLAUDE: Unten überlappend */
    width: 60%;                                    /* CLAUDE: 60% Breite */
    max-width: 600px;                              /* CLAUDE: Maximum */
    opacity: 0.08;                                 /* CLAUDE: Sehr transparent */
    mix-blend-mode: overlay;                       /* CLAUDE: Overlay Blending */
}

/* ==========================================================================
   CLAUDE: Footer Content Container
   ========================================================================== */

.pvm-footer__content {
    position: relative;                            /* CLAUDE: Über Background */
    z-index: 1;                                    /* CLAUDE: Z-Index */
}

/* ==========================================================================
   CLAUDE: Footer Grid - 6-Spalten Layout für kompakte Darstellung
   CLAUDE: Desktop: 6 Spalten | Tablet: 3 Spalten | Mobile: 1 Spalte
   ========================================================================== */

.pvm-footer__grid {
    display: grid;                                 /* CLAUDE: Grid Layout */
    grid-template-columns: repeat(6, 1fr);        /* CLAUDE: 6 gleichmäßige Spalten Desktop */
    gap: var(--pvm-space-lg) var(--pvm-space-md); /* CLAUDE: Weniger Gap für kompaktere Darstellung */
}

/* CLAUDE: Tablet - 3 Spalten */
@media (max-width: 1200px) {
    .pvm-footer__grid {
        grid-template-columns: repeat(3, 1fr);    /* CLAUDE: 3 Spalten auf Tablet */
        gap: var(--pvm-space-md);
    }
}

/* CLAUDE: Mobile - 1 Spalte mit Accordion */
@media (max-width: 767px) {
    .pvm-footer__grid {
        grid-template-columns: 1fr;               /* CLAUDE: Eine Spalte auf Mobile */
        gap: 0;                                    /* CLAUDE: Kein Gap - Accordion hat eigene Borders */
    }
}

/* ==========================================================================
   CLAUDE: Footer Spalten
   ========================================================================== */

.pvm-footer__col {
    display: flex;                                 /* CLAUDE: Flexbox */
    flex-direction: column;                        /* CLAUDE: Vertikal */
    gap: var(--pvm-space-sm);                     /* CLAUDE: Abstand */
}

/* CLAUDE: Überschriften */
.pvm-footer__heading {
    font-size: var(--pvm-font-size-lg);           /* CLAUDE: Größere Schrift */
    font-weight: 700;                              /* CLAUDE: Fett */
    margin-bottom: var(--pvm-space-xs);           /* CLAUDE: Abstand unten */
    color: #fff;                                   /* CLAUDE: Weiß */
}

/* ==========================================================================
   CLAUDE: Footer Adresse
   ========================================================================== */

.pvm-footer__address {
    font-style: normal;                            /* CLAUDE: Nicht kursiv */
}

.pvm-footer__address p,
.pvm-footer__legal p {
    margin: 0;                                     /* CLAUDE: Kein Margin */
    opacity: 0.9;                                  /* CLAUDE: Leicht transparent */
    line-height: 1.8;                              /* CLAUDE: Lockere Zeilenhöhe */
}

/* ==========================================================================
   CLAUDE: Footer Kontakt Links
   ========================================================================== */

.pvm-footer__contact {
    display: flex;                                 /* CLAUDE: Flexbox */
    flex-direction: column;                        /* CLAUDE: Vertikal */
    gap: var(--pvm-space-xs);                     /* CLAUDE: Abstand */
    margin-top: var(--pvm-space-sm);              /* CLAUDE: Abstand oben */
}

.pvm-footer__link {
    display: inline-flex;                          /* CLAUDE: Inline Flex */
    align-items: center;                           /* CLAUDE: Vertikal zentriert */
    gap: var(--pvm-space-xs);                     /* CLAUDE: Abstand zum Icon */
    color: #fff;                                   /* CLAUDE: Weiß */
    text-decoration: none;                         /* CLAUDE: Keine Unterstreichung */
    transition: opacity var(--pvm-transition-fast); /* CLAUDE: Smooth Hover */
}

.pvm-footer__link:hover {
    opacity: 0.8;                                  /* CLAUDE: Leicht transparent */
    color: #fff;                                   /* CLAUDE: Bleibt weiß */
}

.pvm-footer__link svg {
    flex-shrink: 0;                                /* CLAUDE: Icon nicht schrumpfen */
}

/* ==========================================================================
   CLAUDE: Footer Navigation
   ========================================================================== */

.pvm-footer__nav {
    display: flex;                                 /* CLAUDE: Flexbox */
    flex-direction: column;                        /* CLAUDE: Vertikal */
    gap: var(--pvm-space-2xs);                    /* CLAUDE: Kleiner Abstand */
}

.pvm-footer__nav a {
    color: #fff;                                   /* CLAUDE: Weiß */
    text-decoration: none;                         /* CLAUDE: Keine Unterstreichung */
    opacity: 0.9;                                  /* CLAUDE: Leicht transparent */
    transition: opacity var(--pvm-transition-fast),
                padding-left var(--pvm-transition-fast); /* CLAUDE: Smooth Hover */
}

.pvm-footer__nav a:hover {
    opacity: 1;                                    /* CLAUDE: Volle Deckkraft */
    padding-left: 4px;                             /* CLAUDE: Leichte Einrückung */
}

/* CLAUDE: Legal Navigation (horizontal) */
.pvm-footer__nav--legal {
    flex-direction: row;                           /* CLAUDE: Horizontal */
    gap: var(--pvm-space-md);                     /* CLAUDE: Größerer Abstand */
    margin-top: var(--pvm-space-sm);              /* CLAUDE: Abstand oben */
}

/* ==========================================================================
   CLAUDE: Footer Legal Info
   ========================================================================== */

.pvm-footer__legal {
    font-size: var(--pvm-font-size-sm);           /* CLAUDE: Kleinere Schrift */
}

.pvm-footer__legal strong {
    font-weight: 600;                              /* CLAUDE: Semi-bold */
}

/* ==========================================================================
   CLAUDE: Footer Bottom Bar - Rechtliches + Copyright kompakt
   ========================================================================== */

.pvm-footer__bottom {
    margin-top: var(--pvm-space-xl);              /* CLAUDE: Weniger Abstand oben */
    padding-top: var(--pvm-space-md);             /* CLAUDE: Weniger Padding */
    border-top: 1px solid rgba(255, 255, 255, 0.15); /* CLAUDE: Subtiler Border */
}

/* CLAUDE: Inner Container für Flex-Layout */
.pvm-footer__bottom-inner {
    display: flex;                                 /* CLAUDE: Flexbox */
    flex-wrap: wrap;                               /* CLAUDE: Wrap bei Bedarf */
    justify-content: center;                       /* CLAUDE: Zentriert - verhindert Überlappung mit Sticky-CTA */
    align-items: center;                           /* CLAUDE: Vertikal zentriert */
    gap: var(--pvm-space-md);                     /* CLAUDE: Gap zwischen Legal-Info und Nav */
    margin-bottom: var(--pvm-space-sm);           /* CLAUDE: Abstand zum Copyright */
}

/* CLAUDE: Rechtliche Infos (HRB, USt-IdNr) */
.pvm-footer__legal-info {
    display: flex;                                 /* CLAUDE: Flexbox */
    flex-wrap: wrap;                               /* CLAUDE: Wrap bei Bedarf */
    align-items: center;                           /* CLAUDE: Zentriert */
    gap: var(--pvm-space-xs);                     /* CLAUDE: Kleiner Gap */
    font-size: var(--pvm-font-size-sm);           /* CLAUDE: Kleine Schrift */
    opacity: 0.75;                                 /* CLAUDE: Leicht transparent */
}

/* CLAUDE: Separator zwischen Legal-Items */
.pvm-footer__separator {
    opacity: 0.5;                                  /* CLAUDE: Sehr transparent */
}

/* CLAUDE: Legal Navigation (Impressum, Datenschutz) */
.pvm-footer__legal-nav {
    display: flex;                                 /* CLAUDE: Flexbox */
    gap: var(--pvm-space-md);                     /* CLAUDE: Gap zwischen Links */
}

.pvm-footer__legal-nav a {
    color: #fff;                                   /* CLAUDE: Weiß */
    text-decoration: none;                         /* CLAUDE: Keine Unterstreichung */
    font-size: var(--pvm-font-size-sm);           /* CLAUDE: Kleine Schrift */
    opacity: 0.85;                                 /* CLAUDE: Leicht transparent */
    transition: opacity 0.2s ease;                /* CLAUDE: Smooth Hover */
}

.pvm-footer__legal-nav a:hover {
    opacity: 1;                                    /* CLAUDE: Volle Deckkraft */
}

/* CLAUDE: Copyright Zeile */
.pvm-footer__copyright {
    opacity: 0.65;                                 /* CLAUDE: Transparent */
    font-size: var(--pvm-font-size-xs);           /* CLAUDE: Sehr klein */
    margin: 0;                                     /* CLAUDE: Kein Margin */
    text-align: center;                            /* CLAUDE: Zentriert */
}

/* CLAUDE: Mobile Bottom Bar */
@media (max-width: 767px) {
    .pvm-footer__bottom-inner {
        flex-direction: column;                   /* CLAUDE: Vertikal auf Mobile */
        text-align: center;                        /* CLAUDE: Zentriert */
    }

    .pvm-footer__legal-info {
        justify-content: center;                  /* CLAUDE: Zentriert */
    }
}

/* ==========================================================================
   CLAUDE: Back to Top Button
   ========================================================================== */

.pvm-back-to-top {
    position: fixed;                               /* CLAUDE: Fixed Position */
    bottom: var(--pvm-space-lg);                  /* CLAUDE: Abstand unten */
    right: var(--pvm-space-lg);                   /* CLAUDE: Abstand rechts */
    width: 48px;                                   /* CLAUDE: Breite */
    height: 48px;                                  /* CLAUDE: Höhe */
    background: var(--pvm-primary);               /* CLAUDE: Primary Farbe */
    color: #fff;                                   /* CLAUDE: Weiß */
    border: none;                                  /* CLAUDE: Kein Border */
    border-radius: var(--pvm-radius-full);        /* CLAUDE: Komplett rund */
    cursor: pointer;                               /* CLAUDE: Pointer */
    display: flex;                                 /* CLAUDE: Flexbox */
    align-items: center;                           /* CLAUDE: Zentriert */
    justify-content: center;                       /* CLAUDE: Zentriert */
    box-shadow: var(--pvm-shadow-lg);             /* CLAUDE: Schatten */
    transition: transform var(--pvm-transition-fast),
                opacity var(--pvm-transition-fast),
                background var(--pvm-transition-fast); /* CLAUDE: Transitions */
    z-index: var(--pvm-z-fixed);                  /* CLAUDE: Z-Index */
    opacity: 0;                                    /* CLAUDE: Initial versteckt */
    transform: translateY(20px);                   /* CLAUDE: Versetzt */
    pointer-events: none;                          /* CLAUDE: Keine Klicks */
}

/* CLAUDE: Sichtbarer Zustand */
.pvm-back-to-top:not([hidden]) {
    opacity: 1;                                    /* CLAUDE: Sichtbar */
    transform: translateY(0);                      /* CLAUDE: Position */
    pointer-events: auto;                          /* CLAUDE: Klicks erlauben */
}

/* CLAUDE: Hover */
.pvm-back-to-top:hover {
    background: var(--pvm-primary-dark);          /* CLAUDE: Dunkleres Primary */
    transform: translateY(-4px);                   /* CLAUDE: Lift */
}

/* CLAUDE: Focus */
.pvm-back-to-top:focus {
    outline: 2px solid #fff;                       /* CLAUDE: Weißer Focus Ring */
    outline-offset: 2px;                           /* CLAUDE: Abstand */
}

/* ==========================================================================
   CLAUDE: Back-to-Top - Kontrast-Optimierung für Footer (Option A+B)
   CLAUDE: Löst Sichtbarkeitsproblem wenn Button über lila Footer liegt
   ========================================================================== */

/* CLAUDE: Basis-Verbesserung - subtiler Border für Sichtbarkeit auf jedem Hintergrund */
.pvm-back-to-top {
    border: 2px solid rgba(255, 255, 255, 0.2);   /* CLAUDE: Dezenter weißer Border */
    box-shadow:
        var(--pvm-shadow-lg),                      /* CLAUDE: Standard-Schatten */
        0 0 0 2px rgba(255, 255, 255, 0.08);      /* CLAUDE: Äußerer Glow */
    transition:
        transform var(--pvm-transition-fast),      /* CLAUDE: Lift-Animation */
        opacity var(--pvm-transition-fast),        /* CLAUDE: Ein-/Ausblenden */
        background 0.3s ease,                      /* CLAUDE: Farbwechsel smooth */
        color 0.3s ease,                           /* CLAUDE: Textfarbe smooth */
        border-color 0.3s ease,                    /* CLAUDE: Border smooth */
        box-shadow 0.3s ease;                      /* CLAUDE: Schatten smooth */
}

/* CLAUDE: Invertierte Farben wenn über lila Footer - wird via JS aktiviert */
.pvm-back-to-top.over-footer {
    background: #ffffff !important;               /* CLAUDE: Weißer Hintergrund */
    color: var(--pvm-primary) !important;         /* CLAUDE: Lila Iconfarbe */
    border-color: rgba(140, 10, 183, 0.2);        /* CLAUDE: Dezenter lila Border */
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.15),           /* CLAUDE: Weicher Schatten */
        0 0 0 2px rgba(140, 10, 183, 0.1);        /* CLAUDE: Lila Glow */
}

/* CLAUDE: SVG-Icon Farbe anpassen wenn über Footer */
.pvm-back-to-top.over-footer svg {
    stroke: var(--pvm-primary);                   /* CLAUDE: Lila Stroke für Pfeil */
}

/* CLAUDE: Hover-State wenn über Footer */
.pvm-back-to-top.over-footer:hover {
    background: #f5f5f5 !important;               /* CLAUDE: Leicht grau bei Hover */
    transform: translateY(-4px);                   /* CLAUDE: Lift-Effekt */
    box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.2),            /* CLAUDE: Stärkerer Schatten */
        0 0 0 3px rgba(140, 10, 183, 0.15);       /* CLAUDE: Stärkerer Glow */
}

/* CLAUDE: Focus-State wenn über Footer */
.pvm-back-to-top.over-footer:focus {
    outline: 2px solid var(--pvm-primary);        /* CLAUDE: Lila Focus Ring */
    outline-offset: 2px;                           /* CLAUDE: Abstand */
}

/* ==========================================================================
   CLAUDE: Responsive Footer
   ========================================================================== */

@media (max-width: 768px) {
    .pvm-footer {
        padding: var(--pvm-space-2xl) 0 var(--pvm-space-lg); /* CLAUDE: Weniger Padding */
    }

    .pvm-footer__grid {
        gap: var(--pvm-space-lg);                 /* CLAUDE: Weniger Gap */
    }

    .pvm-footer__nav--legal {
        flex-wrap: wrap;                           /* CLAUDE: Wrappen erlauben */
    }

    .pvm-back-to-top {
        bottom: var(--pvm-space-sm);              /* CLAUDE: Weniger Abstand */
        right: var(--pvm-space-sm);               /* CLAUDE: Weniger Abstand */
        width: 44px;                               /* CLAUDE: Kleiner */
        height: 44px;                              /* CLAUDE: Kleiner */
    }
}

/* ==========================================================================
   CLAUDE: Footer Accordion - Responsive Hybrid
   CLAUDE: Desktop: Alle offen, kein Klick | Mobile: Accordion-Verhalten
   ========================================================================== */

/* CLAUDE: Accordion Container */
.pvm-footer__accordion {
    border: none;                                  /* CLAUDE: Kein Browser-Default-Border */
    margin-bottom: 0;                              /* CLAUDE: Kein Margin - Grid hat Gap */
}

/* CLAUDE: Heading innerhalb von Accordion */
.pvm-footer__accordion .pvm-footer__heading {
    margin: 0;                                     /* CLAUDE: Kein Margin */
    font-size: var(--pvm-font-size-sm);           /* CLAUDE: Kompaktere Schrift */
}

/* CLAUDE: External Link Icon */
.pvm-footer__external-icon {
    display: inline-block;                         /* CLAUDE: Inline */
    vertical-align: middle;                        /* CLAUDE: Vertikal zentriert */
    margin-left: 4px;                              /* CLAUDE: Abstand zum Text */
    opacity: 0.6;                                  /* CLAUDE: Dezent */
}

/* CLAUDE: Nav-Spalte Optimierung */
.pvm-footer__col--nav {
    min-width: 0;                                  /* CLAUDE: Verhindert Grid-Overflow */
}

/* CLAUDE: Summary/Trigger Element */
.pvm-footer__accordion-trigger {
    display: flex;                                 /* CLAUDE: Flexbox für Icon-Ausrichtung */
    justify-content: space-between;               /* CLAUDE: Text links, Icon rechts */
    align-items: center;                           /* CLAUDE: Vertikal zentriert */
    font-size: var(--pvm-font-size-base);         /* CLAUDE: Standard Schriftgröße */
    font-weight: 600;                              /* CLAUDE: Semi-bold für Kategorie */
    color: #fff;                                   /* CLAUDE: Weiß */
    cursor: pointer;                               /* CLAUDE: Pointer auf Mobile */
    padding: var(--pvm-space-xs) 0;               /* CLAUDE: Vertikales Padding */
    list-style: none;                              /* CLAUDE: Entfernt default Marker */
}

/* CLAUDE: Entfernt Webkit-Marker (Safari/Chrome) */
.pvm-footer__accordion-trigger::-webkit-details-marker {
    display: none;
}

/* CLAUDE: Focus State für Accessibility */
.pvm-footer__accordion-trigger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);  /* CLAUDE: Sichtbarer Focus Ring */
    outline-offset: 2px;                           /* CLAUDE: Abstand */
    border-radius: 4px;                            /* CLAUDE: Abgerundet */
}

/* CLAUDE: Chevron Icon */
.pvm-footer__chevron {
    transition: transform 0.3s ease;              /* CLAUDE: Smooth Rotation */
    flex-shrink: 0;                                /* CLAUDE: Icon nicht schrumpfen */
    opacity: 0.8;                                  /* CLAUDE: Leicht transparent */
}

/* CLAUDE: Chevron rotiert wenn Accordion offen */
.pvm-footer__accordion[open] .pvm-footer__chevron {
    transform: rotate(180deg);                     /* CLAUDE: 180° Rotation */
}

/* CLAUDE: Subnav Container (die Links) */
.pvm-footer__subnav {
    display: flex;                                 /* CLAUDE: Flexbox */
    flex-direction: column;                        /* CLAUDE: Vertikal */
    gap: 2px;                                      /* CLAUDE: Minimaler Abstand für Kompaktheit */
    padding-left: 0;                               /* CLAUDE: Keine Einrückung auf Desktop */
    margin-top: var(--pvm-space-xs);              /* CLAUDE: Abstand zum Trigger */
}

/* CLAUDE: Subnav Links */
.pvm-footer__subnav a {
    color: rgba(255, 255, 255, 0.85);             /* CLAUDE: Leicht transparent */
    text-decoration: none;                         /* CLAUDE: Keine Unterstreichung */
    font-size: var(--pvm-font-size-sm);           /* CLAUDE: Kleinere Schrift */
    transition: color 0.2s ease,
                padding-left 0.2s ease;            /* CLAUDE: Smooth Hover */
    padding: 2px 0;                                /* CLAUDE: Kleines vertikales Padding */
}

/* CLAUDE: Subnav Links Hover */
.pvm-footer__subnav a:hover {
    color: #fff;                                   /* CLAUDE: Volle Deckkraft */
    padding-left: 4px;                             /* CLAUDE: Slide-Effekt */
}

/* CLAUDE: Subnav Links Focus */
.pvm-footer__subnav a:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.6);  /* CLAUDE: Subtiler Focus */
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   CLAUDE: Desktop - Alle Accordions immer offen
   CLAUDE: WICHTIG: Überschreibt Browser UA-Stylesheet mit !important
   ========================================================================== */

@media (min-width: 769px) {
    /* CLAUDE: Trigger auf Desktop nicht klickbar */
    .pvm-footer__accordion-trigger {
        pointer-events: none;                      /* CLAUDE: Klick deaktiviert */
        cursor: default;                           /* CLAUDE: Kein Pointer */
    }

    /* CLAUDE: Chevron auf Desktop ausblenden */
    .pvm-footer__chevron {
        display: none;                             /* CLAUDE: Versteckt */
    }

    /* CLAUDE: KRITISCH - ALLE Subnavs auf Desktop immer sichtbar */
    /* CLAUDE: Überschreibt Browser-UA für geschlossene UND offene Details */
    .pvm-footer__accordion > .pvm-footer__subnav,
    .pvm-footer__accordion:not([open]) > .pvm-footer__subnav,
    .pvm-footer__accordion[open] > .pvm-footer__subnav {
        display: flex !important;                  /* CLAUDE: Immer sichtbar */
        visibility: visible !important;            /* CLAUDE: Sichtbar */
        opacity: 1 !important;                     /* CLAUDE: Volle Deckkraft */
        height: auto !important;                   /* CLAUDE: Automatische Höhe */
        overflow: visible !important;              /* CLAUDE: Kein Overflow */
    }

    /* CLAUDE: Subnav Links wieder klickbar (da Trigger pointer-events: none hat) */
    .pvm-footer__subnav {
        pointer-events: auto;                      /* CLAUDE: Links klickbar */
    }

    /* CLAUDE: Subnav Links explizit sichtbar */
    .pvm-footer__subnav a {
        display: block !important;                 /* CLAUDE: Links als Block */
        visibility: visible !important;            /* CLAUDE: Sichtbar */
    }
}

/* ==========================================================================
   CLAUDE: Mobile - Accordion aktiv
   ========================================================================== */

@media (max-width: 768px) {
    /* CLAUDE: Trigger mit Touch-Target Mindestgröße */
    .pvm-footer__accordion-trigger {
        min-height: 44px;                          /* CLAUDE: 44px Touch Target */
        padding: var(--pvm-space-sm) 0;           /* CLAUDE: Mehr Padding */
    }

    /* CLAUDE: Animation für Subnav beim Öffnen */
    .pvm-footer__accordion[open] .pvm-footer__subnav {
        animation: pvm-slideDown 0.3s ease;       /* CLAUDE: Slide-Animation */
    }

    /* CLAUDE: Slide-Down Keyframes */
    @keyframes pvm-slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* CLAUDE: Leistungen-Spalte volle Breite auf Mobile */
    .pvm-footer__col--services {
        order: -1;                                 /* CLAUDE: Oben anzeigen */
    }
}

/* ==========================================================================
   CLAUDE: Social Links
   ========================================================================== */

.pvm-footer__social {
    display: flex;                                 /* CLAUDE: Flexbox */
    gap: var(--pvm-space-sm);                     /* CLAUDE: Abstand zwischen Icons */
    margin-top: var(--pvm-space-md);              /* CLAUDE: Abstand oben */
}

.pvm-footer__social-link {
    display: flex;                                 /* CLAUDE: Flexbox */
    align-items: center;                           /* CLAUDE: Zentriert */
    justify-content: center;                       /* CLAUDE: Zentriert */
    width: 40px;                                   /* CLAUDE: Breite */
    height: 40px;                                  /* CLAUDE: Höhe */
    background: rgba(255, 255, 255, 0.1);         /* CLAUDE: Leicht transparent */
    border-radius: var(--pvm-radius-full);        /* CLAUDE: Rund */
    color: #fff;                                   /* CLAUDE: Weiß */
    transition: background 0.2s ease,
                transform 0.2s ease;               /* CLAUDE: Smooth Hover */
}

.pvm-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.2);         /* CLAUDE: Heller bei Hover */
    transform: translateY(-2px);                   /* CLAUDE: Lift-Effekt */
}

.pvm-footer__social-link:focus-visible {
    outline: 2px solid #fff;                       /* CLAUDE: Focus Ring */
    outline-offset: 2px;                           /* CLAUDE: Abstand */
}

/* CLAUDE: SVG im Social Link */
.pvm-footer__social-link svg {
    width: 20px;                                   /* CLAUDE: Icon Größe */
    height: 20px;                                  /* CLAUDE: Icon Größe */
}

/* ==========================================================================
   CLAUDE: Footer CTA Button (Termin buchen)
   ========================================================================== */

.pvm-footer__cta-btn {
    display: inline-flex;                          /* CLAUDE: Flexbox für Icon+Text */
    align-items: center;                           /* CLAUDE: Vertikal zentriert */
    gap: var(--pvm-space-xs);                     /* CLAUDE: Abstand Icon-Text */
    margin-top: var(--pvm-space-md);              /* CLAUDE: Abstand oben */
    padding: var(--pvm-space-sm) var(--pvm-space-md); /* CLAUDE: Padding */
    background: rgba(255, 255, 255, 0.15);        /* CLAUDE: Semi-transparent */
    border: 1px solid rgba(255, 255, 255, 0.3);   /* CLAUDE: Subtiler Border */
    border-radius: var(--pvm-radius-md);          /* CLAUDE: Abgerundet */
    color: #fff;                                   /* CLAUDE: Weiß */
    font-size: var(--pvm-font-size-sm);           /* CLAUDE: Kleine Schrift */
    font-weight: 500;                              /* CLAUDE: Medium */
    text-decoration: none;                         /* CLAUDE: Keine Unterstreichung */
    transition: background 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease;               /* CLAUDE: Smooth Hover */
}

.pvm-footer__cta-btn:hover {
    background: rgba(255, 255, 255, 0.25);        /* CLAUDE: Heller */
    border-color: rgba(255, 255, 255, 0.5);       /* CLAUDE: Stärkerer Border */
    transform: translateY(-2px);                   /* CLAUDE: Lift */
    color: #fff;                                   /* CLAUDE: Bleibt weiß */
}

.pvm-footer__cta-btn:focus-visible {
    outline: 2px solid #fff;                       /* CLAUDE: Focus Ring */
    outline-offset: 2px;                           /* CLAUDE: Abstand */
}

.pvm-footer__cta-btn svg {
    flex-shrink: 0;                                /* CLAUDE: Icon nicht schrumpfen */
}

/* ==========================================================================
   CLAUDE: Dark Mode Footer (Gradient bleibt)
   CLAUDE: Dual-Selector Pattern - Manueller Toggle + System-Präferenz
   ========================================================================== */

/* CLAUDE: Manueller Toggle */
html[data-theme="dark"] .pvm-footer {
    background: var(--pvm-gradient);
}

/* CLAUDE: System-Präferenz - Fallback */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pvm-footer {
        background: var(--pvm-gradient);
    }
}