/**
 * TSV Winkelhaid – Vereinsmodule
 * Ansprechpartner-Karten (Frontend-Styling)
 *
 * Scope: Alle Regeln liegen unter .tsv-ansprechpartner, damit Astra- und
 * Elementor-Styles die Darstellung nicht verfälschen.
 * Farben werden über CSS-Custom-Properties gesteuert (zentrale Wartung).
 */

.tsv-ansprechpartner {
    /* Zentrale Design-Tokens – hier ändern, wirkt überall */
    --tsv-blau: #191970;          /* Vereinsfarbe (verbindlich)            */
    --tsv-blau-hover: #12124f;    /* Abgedunkelt für Hover/Focus           */
    --tsv-weiss: #ffffff;
    --tsv-text-muted: #555555;    /* Rolle: Kontrast 7,4:1 auf Weiß (AAA)  */
    --tsv-rahmen: #e2e2ea;
    --tsv-radius: 14px;
    --tsv-gap: 40px;

    box-sizing: border-box;
}

/* Box-Sizing an alle Kind-Elemente vererben (schützt vor Theme-Resets) */
.tsv-ansprechpartner *,
.tsv-ansprechpartner *::before,
.tsv-ansprechpartner *::after {
    box-sizing: border-box;
}

/* ---------- Raster ---------- */
/*
 * Das Grid liegt auf .tsv-ansprechpartner (dem tatsächlichen Wrapper-Element
 * aus dem Shortcode-HTML), nicht auf einer Unterklasse .tsv-karten-grid.
 *
 * Feste Breakpoints statt auto-fit, damit auf sehr breiten Monitoren
 * NICHT mehr als 4 Spalten entstehen. Mobile-first: Standard = 1 Spalte.
 */
.tsv-ansprechpartner {
    display: grid;
    grid-template-columns: 1fr;   /* Mobile: 1 Spalte */
    /*gap: var(--tsv-gap);*/
	column-gap: 40px; /* Abstand nach links/rechts */
    row-gap: 60px;    /* Abstand nach unten (erhöht) */
}

/* Kleine Tablets / große Handys quer: 2 Spalten */
@media (min-width: 600px) {
    .tsv-ansprechpartner {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets / kleine Laptops: 3 Spalten */
@media (min-width: 900px) {
    .tsv-ansprechpartner {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Große Monitore: 4 Spalten (Maximum) */
@media (min-width: 1200px) {
    .tsv-ansprechpartner {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Sehr große Monitore / Ultrawide: 5 Spalten (Maximum) *
@media (min-width: 2000px) {
    .tsv-ansprechpartner {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ---------- Karte ---------- */
.tsv-ansprechpartner .tsv-karte {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;                 /* Gleiche Höhe je Rasterzeile */
    margin: 0;
    padding: 24px 20px;
    background: var(--tsv-weiss);
    border: 1px solid var(--tsv-rahmen);
    border-radius: var(--tsv-radius);
    box-shadow: 0 2px 6px rgba(25, 25, 112, 0.06);
		position: relative;
		overflow: hidden;
}

.tsv-ansprechpartner .tsv-karte::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--tsv-blau) 0%, #3b3b9e 100%);
}

/*.tsv-ansprechpartner .tsv-karte::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--tsv-blau) 0%, #3b3b9e 100%);
}*/

/* ---------- Hover-Effekt auf der gesamten Karte ---------- */
.tsv-ansprechpartner .tsv-karte {
    transition: transform .15s ease, box-shadow .15s ease;
}

.tsv-ansprechpartner .tsv-karte:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(25, 25, 112, 0.15);
}

/* ---------- Foto / Initialen ---------- */
/*Originale Werte 
    width: 96px;
    height: 96px; */

.tsv-ansprechpartner .tsv-karte-media {
    /*width: 150px;
    height: 150px;*/
    margin-bottom: 10px;
    flex: 0 0 auto;
/*Neuer Abschnitt - Fügt eine Linie unterhalb des Bildes ein*/	
	position: relative;
    padding-bottom: 20px;
}

.tsv-ansprechpartner .tsv-karte-media::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 2px;
    background: var(--tsv-rahmen);
}
/*Neuer Abschnitte Ende*/

.tsv-ansprechpartner .tsv-karte-foto {
    width: 150px;
    height: 150px;
    display: block;
    object-fit: cover;            /* Foto füllt Kreis ohne Verzerrung */
	/*object-position: center 15%;  /* Verschiebt den sichtbaren Bereich weiter nach oben */
    border-radius: 50%;

}

.tsv-ansprechpartner .tsv-initialen {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tsv-blau);
    color: var(--tsv-weiss);      /* Kontrast ~14,8:1 – WCAG AAA */
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* ---------- Textblock ---------- */
.tsv-ansprechpartner .tsv-karte-name {
    margin: 0 0 4px;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--tsv-blau);
    line-height: 1.25;
}

.tsv-ansprechpartner .tsv-karte-rolle {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--tsv-text-muted);
    line-height: 1.3;
}

/* Abteilungsname (nur im Abteilungsleiter-Block, siehe Shortcode-Modus "abteilungsleiter") */
.tsv-ansprechpartner .tsv-karte-bereich {
    margin: 0 0 18px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tsv-blau);
}

/* Fehlt der Bereichsname (z. B. beim Vorstand), muss die Rolle den Abstand nach unten selbst übernehmen */
.tsv-ansprechpartner .tsv-karte-rolle:last-of-type {
    margin-bottom: 18px;
}

/* ---------- Aktionen ---------- */
/* margin-top:auto -> Buttons immer am unteren Kartenrand (gleiche Optik). */
.tsv-ansprechpartner .tsv-karte-aktionen {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tsv-ansprechpartner a.tsv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
	width: 200px;                 /* Feste, einheitliche Breite für alle Buttons */
    max-width: 100%;              /* Verhindert Überstehen auf sehr schmalen Screens */
	margin-left: auto;            /* Zentriert den Button horizontal in der Karte */
    margin-right: auto;           /* Zentriert den Button horizontal in der Karte */
    min-height: 44px;             /* Touch-Zielgröße (Mobile/A11y) */
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;        /* gegen Astra-Link-Unterstreichung */
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Falls Astra die Unterstreichung erzwingt, diese Zeile aktivieren:
.tsv-ansprechpartner a.tsv-btn { text-decoration: none !important; } */

/* Primär: Anrufen (gefüllt) */
.tsv-ansprechpartner a.tsv-btn--tel {
    background: var(--tsv-blau);
    color: var(--tsv-weiss);
    border: 2px solid var(--tsv-blau);
}
.tsv-ansprechpartner a.tsv-btn--tel:hover,
.tsv-ansprechpartner a.tsv-btn--tel:focus {
    background: var(--tsv-blau-hover);
    border-color: var(--tsv-blau-hover);
    color: var(--tsv-weiss);
}

/* Sekundär: Mail (Outline) */
.tsv-ansprechpartner a.tsv-btn--mail {
    background: transparent;
    color: var(--tsv-blau);
    border: 2px solid var(--tsv-blau);
}
.tsv-ansprechpartner a.tsv-btn--mail:hover,
.tsv-ansprechpartner a.tsv-btn--mail:focus {
    background: var(--tsv-blau);
    color: var(--tsv-weiss);
}

/* Sichtbarer Fokusrahmen für Tastaturnavigation */
.tsv-ansprechpartner a.tsv-btn:focus-visible {
    outline: 3px solid rgba(25, 25, 112, 0.45);
    outline-offset: 2px;
}

/* Icon im Button */
.tsv-ansprechpartner .tsv-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: currentColor;           /* Icon folgt der Textfarbe */
}

/* ---------- Optional: Blaue Akzent-Karte (Ist-Look) ---------- */
/* Aktivieren via Klasse .tsv-karte--blau am <li> (siehe Markup-Hinweis). */
.tsv-ansprechpartner .tsv-karte--blau {
    background: var(--tsv-blau);
    border-color: var(--tsv-blau);
}
.tsv-ansprechpartner .tsv-karte--blau .tsv-karte-name  { color: var(--tsv-weiss); }
.tsv-ansprechpartner .tsv-karte--blau .tsv-karte-rolle { color: rgba(255,255,255,0.82); }
.tsv-ansprechpartner .tsv-karte--blau .tsv-initialen {
    background: var(--tsv-weiss);
    color: var(--tsv-blau);
}
.tsv-ansprechpartner .tsv-karte--blau a.tsv-btn--tel {
    background: var(--tsv-weiss);
    color: var(--tsv-blau);
    border-color: var(--tsv-weiss);
}
.tsv-ansprechpartner .tsv-karte--blau a.tsv-btn--tel:hover,
.tsv-ansprechpartner .tsv-karte--blau a.tsv-btn--tel:focus {
    background: rgba(255,255,255,0.85);
    color: var(--tsv-blau);
}
.tsv-ansprechpartner .tsv-karte--blau a.tsv-btn--mail {
    background: transparent;
    color: var(--tsv-weiss);
    border-color: var(--tsv-weiss);
}
.tsv-ansprechpartner .tsv-karte--blau a.tsv-btn--mail:hover,
.tsv-ansprechpartner .tsv-karte--blau a.tsv-btn--mail:focus {
    background: var(--tsv-weiss);
    color: var(--tsv-blau);
}

/* ---------- Feinschliff sehr schmale Screens ---------- *
@media (max-width: 360px) {
    .tsv-ansprechpartner .tsv-karte { padding: 20px 16px; }
}*/









@media (max-width: 599px) {

    .tsv-ansprechpartner {
        --tsv-gap: 12px;
    }

    .tsv-ansprechpartner .tsv-karte {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 14px;
        text-align: left;
        padding: 16px;
    }

    /* "Entpackt" den Inhalt-Wrapper, seine Kinder werden zu direkten Grid-Elementen der Karte */
    .tsv-ansprechpartner .tsv-karte-inhalt {
        display: contents;
    }

    /* Foto + Textzeilen bilden gemeinsam die linke Spalte, automatisch untereinander gestapelt */
    .tsv-ansprechpartner .tsv-karte-media,
    .tsv-ansprechpartner .tsv-karte-name,
    .tsv-ansprechpartner .tsv-karte-rolle,
    .tsv-ansprechpartner .tsv-karte-bereich {
        grid-column: 1;
    }

    .tsv-ansprechpartner .tsv-karte-media {
        width: 84px;
        height: 84px;
        margin: 0;
        padding-bottom: 0;
    }

    .tsv-ansprechpartner .tsv-karte-media::after {
        content: none; /* Trennlinie passt zu diesem Layout nicht mehr */
    }

    .tsv-ansprechpartner .tsv-karte-foto,
    .tsv-ansprechpartner .tsv-initialen {
        width: 84px;
        height: 84px;
    }

    .tsv-ansprechpartner .tsv-initialen {
        font-size: 1.3rem;
    }

    .tsv-ansprechpartner .tsv-karte-name {
        font-size: 1rem;
        margin: 0;
    }

    .tsv-ansprechpartner .tsv-karte-rolle,
    .tsv-ansprechpartner .tsv-karte-bereich {
        font-size: 0.8rem;
        margin: 0;
    }

    .tsv-ansprechpartner .tsv-karte-rolle:last-of-type {
        margin-bottom: 0;
    }

    /* Buttons: eigene Spalte rechts, über die volle Höhe des Textblocks vertikal zentriert */
    .tsv-ansprechpartner .tsv-karte-aktionen {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        margin-top: 0;
        width: auto;
        gap: 8px;
    }
		
	

    .tsv-ansprechpartner a.tsv-btn {
        padding: 8px 12px;
        font-size: 0;       /* Text ausblenden, nur Icon sichtbar – wie in deinem Beispielbild */
        min-width: 100px;
        min-height: 44px;
    }

    .tsv-ansprechpartner .tsv-btn svg {
        width: 20px;
        height: 20px;
    }
}