/* =========================================================
   Team – Personenübersicht & Kartenlayout
   ---------------------------------------------------------
   Zweck:
   Enthält Layout- und Formatierungsregeln für Teamseiten
   und Team-Sektionen. Beeinflusst Team-Karten, Bilder,
   Tabellen, Namen und Kontaktinformationen.
   ---------------------------------------------------------
   Dateiname: team.css
   Ort: /custom/css/team.css
   Autor: Wimmer IT-Services
   ========================================================= */


/* ---------------------------------------------
   GRUNDLAYOUT – TEAMBEREICH
   ---------------------------------------------
   - Begrenzung der Gesamtbreite
   - Entfernt unnötige Außenabstände
------------------------------------------------ */
.team-row {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    padding: 0px !important;
}


/* ---------------------------------------------
   TEAM-KARTEN
   ---------------------------------------------
   - Vereinheitlichte Höhe und Abstand
   - Flexbox-Struktur für vertikale Ausrichtung
------------------------------------------------ */
.team-card {
    padding: 20px;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    display: flex;
    height: auto !important;
}


/* ---------------------------------------------
   KARTEN-INHALT
   ---------------------------------------------
   - Rundungen, Übergangseffekte, Zentrierung
   - Dynamische Höhe mit Flexbox
------------------------------------------------ */
.team-card .vc_column-inner {
    border-radius: 15px;
    padding: 15px;
    height: 100% !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

/* Hover-Effekt: leichte Anhebung */
.team-card .vc_column-inner:hover {
    transform: translateY(-5px);
}


/* ---------------------------------------------
   INHALTSSTRUKTUR
   ---------------------------------------------
   - Flex-Layout innerhalb der Karten
   - Sorgt für gleichmäßige vertikale Verteilung
------------------------------------------------ */
.team-card .wpb_wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    align-items: center;
}


/* ---------------------------------------------
   BILDBEREICH
   ---------------------------------------------
   - Einheitliche Höhe und Zentrierung
   - Fokus auf Porträts (Gesichtsbereich)
------------------------------------------------ */
.team-card .img-with-aniamtion-wrap {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    width: 100%;
    text-align: center;
}

/* Personenbilder */
.img-with-aniamtion-wrap .team-image {
    width: 220px !important;
    height: 280px !important;
    object-fit: cover;
    object-position: center top;
    border-radius: 20px !important;
    margin: 0 auto;
    display: block;
}


/* ---------------------------------------------
   TEXTBEREICH INNERHALB DER KARTEN
   ---------------------------------------------
   - Flexible Tabellen- und Textausrichtung
------------------------------------------------ */
.team-card .wpb_text_column {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.team-data-table {
    margin-top: 10px !important;
}


/* ---------------------------------------------
   TEAM-TABELLE
   ---------------------------------------------
   - Zentrale, aufgeräumte Darstellung der Personendaten
------------------------------------------------ */
.team-data-table table {
    width: 90%;
    border-collapse: separate;
    border-spacing: 0;
    height: auto;
    margin: 0 auto;
}

body:not(.woocommerce-cart) .main-content div.team-data-table table,
.team-data-table td,
.team-data-table tr {
    border: 0 !important;
    background-color: transparent !important;
    padding: 5px 0 !important;
    text-align: center;
}

/* Korrektur für Tabellenlayout */
.team-data-table tr {
    display: table-row;
    height: auto;
}

.team-data-table td {
    vertical-align: middle;
    height: auto;
}

/* Tabellenzelle mit Logo */
.team-data-table td[rowspan] {
    vertical-align: middle;
    text-align: center;
    display: table-cell;
}


/* ---------------------------------------------
   LOGO-DARSTELLUNG
   ---------------------------------------------
   - Begrenzte Größe und zentrierte Positionierung
------------------------------------------------ */
.team-data-table img {
    max-height: 70px;
    max-width: 70px;
    object-fit: contain;
    margin: 25px auto 10px auto !important;
    display: block;
}

/* Entfernt überflüssige Alignment-Klassen */
.team-data-table .alignleft,
.team-data-table .alignright,
.team-data-table .aligncenter {
    float: none !important;
    display: block !important;
}


/* ---------------------------------------------
   TYPOGRAFIE & LINKS
   ---------------------------------------------
   - Einheitliche Schriftgrößen und Abstände
   - Zentrierte Ausrichtung aller Inhalte
------------------------------------------------ */
.team-data-table h3 {
    margin: 0;
    text-align: center;
    margin-bottom: 0px !important;
}

.team-data-table a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.team-card p,
.team-card h3,
.team-card a {
    margin: 5px 0;
    text-align: center;
}


/* ---------------------------------------------
   NAMEN, POSITION & KONTAKT
   ---------------------------------------------
   - Name hervorgehoben, Position kleiner dargestellt
------------------------------------------------ */
.team-data-table h3,
.team-data-table strong {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 1.4rem !important;
}

/* Positionsangabe */
p.team-position {
    margin-top: -5px !important;
    padding-top: 0 !important;
    font-size: 0.95rem !important;
    text-align: center !important;
}

/* Kontaktzelle */
td.team-contact {
    padding: 0 !important;
    color: #54ae31 !important;
    line-height: 1;
}

/* Abstand zwischen Tabellenzeilen reduzieren */
tr:nth-child(2) td {
    padding-top: 0 !important;
}


/* ---------------------------------------------
   LAYOUT-KORREKTUREN
   ---------------------------------------------
   - Sicherstellung einheitlicher Höhe aller Spalten
------------------------------------------------ */
.team-card [class*="col"],
.team-card [class*="vc_col"] {
    height: 100%;
}


/* ---------------------------------------------
   RESPONSIVE DESIGN
   ---------------------------------------------
   - Zweispaltig auf Tablets, einspaltig auf Mobilgeräten
------------------------------------------------ */
@media only screen and (max-width: 1000px) {
    .team-card {
        width: 50% !important;
    }

    .img-with-aniamtion-wrap .team-image {
        width: 200px !important;
        height: 250px !important;
    }
}

@media only screen and (max-width: 690px) {
    .team-card {
        width: 100% !important;
    }

    .img-with-aniamtion-wrap .team-image {
        width: 220px !important;
        height: 280px !important;
    }
}