/* CLAUDE: Kontaktseiten-Layout | 2-Spalten Grid mit Sidebar | Anpassen: Grid-Verhältnisse und Breakpoints */

/* ==========================================================================
   CLAUDE: Hero Bereich - Überschrift und Subline
   ========================================================================== */

.pvm-contact-hero {
    padding: 80px 0 60px;                  /* CLAUDE: Großzügiges Padding */
    text-align: center;                    /* CLAUDE: Zentriert */
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%); /* CLAUDE: Sanfter Gradient */
}

.pvm-contact-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);     /* CLAUDE: Responsive Schriftgröße */
    margin-bottom: 16px;                   /* CLAUDE: Abstand zur Subline */
    background: var(--gradient, linear-gradient(36deg, #8C0AB7 0%, #4C41E0 100%));
    -webkit-background-clip: text;         /* CLAUDE: Gradient auf Text */
    -webkit-text-fill-color: transparent;  /* CLAUDE: Text transparent */
    background-clip: text;                 /* CLAUDE: Standard Property */
}

.pvm-contact-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);  /* CLAUDE: Responsive Subline */
    color: #666;                           /* CLAUDE: Gedämpfte Farbe */
    max-width: 600px;                      /* CLAUDE: Max-Breite für Lesbarkeit */
    margin: 0 auto;                        /* CLAUDE: Zentriert */
    line-height: 1.6;                      /* CLAUDE: Gute Lesbarkeit */
}

/* ==========================================================================
   CLAUDE: Hauptbereich - Container
   ========================================================================== */

.pvm-contact-main {
    padding: 60px 0 100px;                 /* CLAUDE: Padding oben/unten */
}

.pvm-contact-main .content {
    width: 90%;                            /* CLAUDE: Etwas breiter als Standard */
    max-width: 1200px;                     /* CLAUDE: Maximale Breite */
    margin: 0 auto;                        /* CLAUDE: Zentriert */
}

/* ==========================================================================
   CLAUDE: 2-Spalten Grid - Formular + Sidebar
   ========================================================================== */

.pvm-contact-grid {
    display: grid;                         /* CLAUDE: CSS Grid Layout */
    grid-template-columns: 1fr 380px;      /* CLAUDE: Formular flexibel, Sidebar 380px */
    gap: 48px;                             /* CLAUDE: Großzügiger Abstand */
    align-items: start;                    /* CLAUDE: Nach oben ausrichten */
}

/* ==========================================================================
   CLAUDE: Formular-Wrapper - Linke Spalte
   ========================================================================== */

.pvm-contact-form-wrapper {
    background: #fff;                      /* CLAUDE: Weißer Hintergrund */
    padding: 40px;                         /* CLAUDE: Innenabstand */
    border-radius: 16px;                   /* CLAUDE: Abgerundete Ecken */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); /* CLAUDE: Sanfter Schatten */
}

.pvm-contact-form-wrapper h2 {
    font-size: 1.5rem;                     /* CLAUDE: Überschrift */
    color: var(--blau, #4C41E0);           /* CLAUDE: Blau */
    margin-bottom: 32px;                   /* CLAUDE: Abstand zum Formular */
    padding-bottom: 0;                     /* CLAUDE: Kein Standard-Padding */
}

/* ==========================================================================
   CLAUDE: Sidebar - Rechte Spalte
   ========================================================================== */

.pvm-contact-sidebar {
    display: flex;                         /* CLAUDE: Flexbox für vertikale Anordnung */
    flex-direction: column;                /* CLAUDE: Untereinander */
    gap: 24px;                             /* CLAUDE: Abstand zwischen Cards */
}

/* ==========================================================================
   CLAUDE: Contact Cards - Einheitliches Card-Design
   ========================================================================== */

.pvm-contact-card {
    background: #fff;                      /* CLAUDE: Weißer Hintergrund */
    padding: 28px;                         /* CLAUDE: Innenabstand */
    border-radius: 12px;                   /* CLAUDE: Abgerundete Ecken */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* CLAUDE: Leichter Schatten */
}

.pvm-contact-card h3 {
    font-size: 12px;                       /* CLAUDE: Klein */
    color: #999;                           /* CLAUDE: Grau */
    text-transform: uppercase;             /* CLAUDE: Großbuchstaben */
    letter-spacing: 0.1em;                 /* CLAUDE: Buchstabenabstand */
    margin-bottom: 20px;                   /* CLAUDE: Abstand */
    font-weight: 600;                      /* CLAUDE: Semi-bold */
}

/* ==========================================================================
   CLAUDE: Ansprechpartner Card
   ========================================================================== */

.pvm-contact-card--person .pvm-contact-card__content {
    display: flex;                         /* CLAUDE: Flexbox */
    align-items: center;                   /* CLAUDE: Vertikal zentrieren */
    gap: 20px;                             /* CLAUDE: Abstand zwischen Avatar und Info */
}

.pvm-contact-card__avatar {
    width: 80px;                           /* CLAUDE: Avatar Breite */
    height: 80px;                          /* CLAUDE: Avatar Höhe */
    border-radius: 50%;                    /* CLAUDE: Rund */
    object-fit: cover;                     /* CLAUDE: Bild einpassen */
    flex-shrink: 0;                        /* CLAUDE: Nicht schrumpfen */
}

.pvm-contact-card__info {
    flex: 1;                               /* CLAUDE: Restlichen Platz nutzen */
}

.pvm-contact-card__name {
    font-weight: 600;                      /* CLAUDE: Semi-bold */
    font-size: 18px;                       /* CLAUDE: Größer */
    margin: 0 0 4px 0;                     /* CLAUDE: Kleiner Abstand unten */
    color: #333;                           /* CLAUDE: Dunkle Farbe */
}

.pvm-contact-card__position {
    color: #666;                           /* CLAUDE: Grau */
    margin: 0;                             /* CLAUDE: Kein Margin */
    font-size: 14px;                       /* CLAUDE: Kleiner */
}

/* ==========================================================================
   CLAUDE: Kontaktliste
   ========================================================================== */

.pvm-contact-list {
    list-style: none;                      /* CLAUDE: Keine Bullets */
    padding: 0;                            /* CLAUDE: Kein Padding */
    margin: 0;                             /* CLAUDE: Kein Margin */
}

.pvm-contact-list__item {
    display: flex;                         /* CLAUDE: Flexbox für Icon + Text */
    align-items: flex-start;               /* CLAUDE: Nach oben ausrichten */
    gap: 14px;                             /* CLAUDE: Abstand zwischen Icon und Text */
    padding: 14px 0;                       /* CLAUDE: Vertikales Padding */
    border-bottom: 1px solid #eee;         /* CLAUDE: Trennlinie */
}

.pvm-contact-list__item:last-child {
    border-bottom: none;                   /* CLAUDE: Keine Linie beim letzten */
    padding-bottom: 0;                     /* CLAUDE: Kein Padding unten */
}

.pvm-contact-list__item:first-child {
    padding-top: 0;                        /* CLAUDE: Kein Padding oben */
}

.pvm-contact-list__icon {
    flex-shrink: 0;                        /* CLAUDE: Nicht schrumpfen */
    color: var(--lila, #8C0AB7);           /* CLAUDE: Primary Farbe */
    margin-top: 2px;                       /* CLAUDE: Leichte Anpassung */
}

.pvm-contact-list__item a {
    color: #333;                           /* CLAUDE: Dunkle Farbe */
    text-decoration: none;                 /* CLAUDE: Keine Unterstreichung */
    transition: color 0.2s ease;           /* CLAUDE: Smooth Transition */
}

.pvm-contact-list__item a:hover {
    color: var(--lila, #8C0AB7);           /* CLAUDE: Primary auf Hover */
}

.pvm-contact-list__item address {
    font-style: normal;                    /* CLAUDE: Nicht kursiv */
    line-height: 1.6;                      /* CLAUDE: Gute Zeilenhöhe */
    color: #333;                           /* CLAUDE: Dunkle Farbe */
}

/* ==========================================================================
   CLAUDE: Aktions-Card mit Button
   ========================================================================== */

.pvm-contact-card--actions .pvm-contact-actions {
    display: flex;                         /* CLAUDE: Flexbox */
    flex-direction: column;                /* CLAUDE: Untereinander */
    gap: 12px;                             /* CLAUDE: Abstand */
}

.pvm-contact-card--actions .pvm-btn {
    display: flex;                         /* CLAUDE: Flexbox für Icon + Text */
    align-items: center;                   /* CLAUDE: Zentrieren */
    justify-content: center;               /* CLAUDE: Zentrieren */
    gap: 10px;                             /* CLAUDE: Abstand */
    padding: 14px 24px;                    /* CLAUDE: Padding */
    font-size: 15px;                       /* CLAUDE: Schriftgröße */
    font-weight: 500;                      /* CLAUDE: Medium */
    border-radius: 100px;                  /* CLAUDE: Pill-Form */
    text-decoration: none;                 /* CLAUDE: Keine Unterstreichung */
    transition: all 0.2s ease;             /* CLAUDE: Smooth Transition */
}

.pvm-contact-card--actions .pvm-btn--outline {
    background: transparent;               /* CLAUDE: Transparent */
    border: 2px solid var(--lila, #8C0AB7); /* CLAUDE: Primary Border */
    color: var(--lila, #8C0AB7);           /* CLAUDE: Primary Text */
}

.pvm-contact-card--actions .pvm-btn--outline:hover {
    background: var(--lila, #8C0AB7);      /* CLAUDE: Primary Hintergrund */
    color: #fff;                           /* CLAUDE: Weiße Schrift */
}

.pvm-contact-card--actions .pvm-btn svg {
    width: 18px;                           /* CLAUDE: Icon Größe */
    height: 18px;                          /* CLAUDE: Icon Größe */
}

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

.pvm-contact-social {
    text-align: center;                    /* CLAUDE: Zentriert */
    padding-top: 8px;                      /* CLAUDE: Abstand oben */
}

.pvm-contact-social h4 {
    font-size: 12px;                       /* CLAUDE: Klein */
    color: #999;                           /* CLAUDE: Grau */
    text-transform: uppercase;             /* CLAUDE: Großbuchstaben */
    letter-spacing: 0.1em;                 /* CLAUDE: Buchstabenabstand */
    margin-bottom: 16px;                   /* CLAUDE: Abstand */
    font-weight: 600;                      /* CLAUDE: Semi-bold */
}

.pvm-contact-social__links {
    display: flex;                         /* CLAUDE: Flexbox */
    justify-content: center;               /* CLAUDE: Zentrieren */
    gap: 16px;                             /* CLAUDE: Abstand zwischen Icons */
}

.pvm-contact-social__links a {
    display: flex;                         /* CLAUDE: Flexbox */
    align-items: center;                   /* CLAUDE: Zentrieren */
    justify-content: center;               /* CLAUDE: Zentrieren */
    width: 48px;                           /* CLAUDE: Größe */
    height: 48px;                          /* CLAUDE: Größe */
    border-radius: 50%;                    /* CLAUDE: Rund */
    background: #f5f5f5;                   /* CLAUDE: Heller Hintergrund */
    color: #666;                           /* CLAUDE: Graue Farbe */
    transition: all 0.2s ease;             /* CLAUDE: Smooth Transition */
}

.pvm-contact-social__links a:hover {
    background: var(--lila, #8C0AB7);      /* CLAUDE: Primary Hintergrund */
    color: #fff;                           /* CLAUDE: Weiße Icons */
    transform: translateY(-3px);           /* CLAUDE: Lift-Effekt */
}

.pvm-contact-social__links svg {
    width: 22px;                           /* CLAUDE: Icon Größe */
    height: 22px;                          /* CLAUDE: Icon Größe */
}

/* ==========================================================================
   CLAUDE: Responsive - Tablet
   ========================================================================== */

@media screen and (max-width: 1024px) {
    .pvm-contact-grid {
        grid-template-columns: 1fr 340px;  /* CLAUDE: Schmalere Sidebar */
        gap: 32px;                         /* CLAUDE: Kleinerer Abstand */
    }

    .pvm-contact-form-wrapper {
        padding: 32px;                     /* CLAUDE: Weniger Padding */
    }
}

/* ==========================================================================
   CLAUDE: Responsive - Mobile
   ========================================================================== */

@media screen and (max-width: 768px) {
    .pvm-contact-hero {
        padding: 60px 0 40px;              /* CLAUDE: Weniger Padding */
    }

    .pvm-contact-main {
        padding: 40px 0 60px;              /* CLAUDE: Weniger Padding */
    }

    .pvm-contact-grid {
        grid-template-columns: 1fr;        /* CLAUDE: Eine Spalte */
        gap: 32px;                         /* CLAUDE: Abstand zwischen Sektionen */
    }

    .pvm-contact-sidebar {
        order: -1;                         /* CLAUDE: Sidebar zuerst auf Mobile */
    }

    .pvm-contact-form-wrapper {
        padding: 24px;                     /* CLAUDE: Weniger Padding */
        border-radius: 12px;               /* CLAUDE: Kleinere Rundung */
    }

    .pvm-contact-card {
        padding: 20px;                     /* CLAUDE: Weniger Padding */
    }

    .pvm-contact-card--person .pvm-contact-card__content {
        flex-direction: column;            /* CLAUDE: Untereinander */
        text-align: center;                /* CLAUDE: Zentriert */
    }

    .pvm-contact-card__avatar {
        width: 100px;                      /* CLAUDE: Größerer Avatar */
        height: 100px;                     /* CLAUDE: Größerer Avatar */
    }

    .pvm-contact-social__links a {
        width: 44px;                       /* CLAUDE: Minimum Touch-Target */
        height: 44px;                      /* CLAUDE: Minimum Touch-Target */
    }
}

/* ==========================================================================
   CLAUDE: Responsive - Small Mobile
   ========================================================================== */

@media screen and (max-width: 480px) {
    .pvm-contact-hero {
        padding: 40px 0 30px;              /* CLAUDE: Noch weniger Padding */
    }

    .pvm-contact-form-wrapper,
    .pvm-contact-card {
        padding: 20px 16px;                /* CLAUDE: Minimal Padding */
    }

    .pvm-contact-card__name {
        font-size: 16px;                   /* CLAUDE: Etwas kleiner */
    }
}

/* ==========================================================================
   CLAUDE: Dark Mode Support
   CLAUDE: Dual-Selector Pattern für manuellen Toggle + System-Präferenz
   ========================================================================== */

/* CLAUDE: Manueller Toggle */
html[data-theme="dark"] .pvm-contact-hero {
    background: linear-gradient(180deg, var(--pvm-dark-bg, #12121e) 0%, var(--pvm-dark-surface, #1e1e2f) 100%);
}

html[data-theme="dark"] .pvm-contact-hero__subtitle {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-contact-form-wrapper {
    background: var(--pvm-dark-surface, #1e1e2f);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .pvm-contact-card {
    background: var(--pvm-dark-surface, #1e1e2f);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .pvm-contact-card h3 {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-contact-card__name {
    color: var(--pvm-dark-text, #e8e6f0);
}

html[data-theme="dark"] .pvm-contact-card__position {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-contact-list__item {
    border-color: var(--pvm-dark-border, #2d2d44);
}

html[data-theme="dark"] .pvm-contact-list__item a,
html[data-theme="dark"] .pvm-contact-list__item address {
    color: var(--pvm-dark-text, #e8e6f0);
}

html[data-theme="dark"] .pvm-contact-social h4 {
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-contact-social__links a {
    background: var(--pvm-dark-bg, #12121e);
    color: var(--pvm-dark-text-muted, #a8a5b5);
}

html[data-theme="dark"] .pvm-contact-social__links a:hover {
    background: var(--pvm-primary, #8C0AB7);
    color: #fff;
}

/* CLAUDE: System-Präferenz - Fallback */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pvm-contact-hero {
        background: linear-gradient(180deg, var(--pvm-dark-bg, #12121e) 0%, var(--pvm-dark-surface, #1e1e2f) 100%);
    }

    html:not([data-theme="light"]) .pvm-contact-hero__subtitle {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-contact-form-wrapper {
        background: var(--pvm-dark-surface, #1e1e2f);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    }

    html:not([data-theme="light"]) .pvm-contact-card {
        background: var(--pvm-dark-surface, #1e1e2f);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    html:not([data-theme="light"]) .pvm-contact-card h3 {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-contact-card__name {
        color: var(--pvm-dark-text, #e8e6f0);
    }

    html:not([data-theme="light"]) .pvm-contact-card__position {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-contact-list__item {
        border-color: var(--pvm-dark-border, #2d2d44);
    }

    html:not([data-theme="light"]) .pvm-contact-list__item a,
    html:not([data-theme="light"]) .pvm-contact-list__item address {
        color: var(--pvm-dark-text, #e8e6f0);
    }

    html:not([data-theme="light"]) .pvm-contact-social h4 {
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-contact-social__links a {
        background: var(--pvm-dark-bg, #12121e);
        color: var(--pvm-dark-text-muted, #a8a5b5);
    }

    html:not([data-theme="light"]) .pvm-contact-social__links a:hover {
        background: var(--pvm-primary, #8C0AB7);
        color: #fff;
    }
}