/* SCF Team – Frontend-Styles v1.2.2
   ───────────────────────────────────────────────────────────
   Kader, Ansprechpartner, Trainingszeiten.
   Palette und Schriften wie in scf-nuliga:
     Blau #006ead (Herren) · Türkis #00a5ad (Damen) · Grün #00ad5c (Jugend)
     Saira Stencil (Namen, Nummern) · Saira Semi Condensed (Labels)
   Container-Queries, damit die Karten auch in Drittel-Spalten funktionieren.
   ─────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
   KADER ([scf_kader])
   Foto als Fläche, Text als Overlay darauf. Gleich hohe Karten,
   Namen brechen sauber statt zu überlaufen.
   ══════════════════════════════════════════════════════════ */
.scf-kader { --scf-akzent: #009ff9; --scf-akzent-mid: #006ead; --scf-akzent-dark: #005485; }
.scf-kader.scf-bereich-damen  { --scf-akzent: #00eef9; --scf-akzent-mid: #00a5ad; --scf-akzent-dark: #007e85; }
.scf-kader.scf-bereich-jugend { --scf-akzent: #00f983; --scf-akzent-mid: #00ad5c; --scf-akzent-dark: #008547; }
.scf-kader.scf-bereich-verein { --scf-akzent: #ffffff; --scf-akzent-mid: #2a2a2a; --scf-akzent-dark: #0a0a0a; }

.scf-kader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(10px, 1.6vw, 22px);
    align-items: stretch;
}

.scf-kader-grid .scf-person {
    container-type: inline-size;
    position: relative;
    display: block;
    background: #0a0a0a;
    overflow: hidden;
}

/* Foto füllt die Karte, festes Verhältnis für gleiche Höhen */
.scf-kader-grid .scf-person-foto {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--scf-akzent-dark);
}

.scf-kader-grid .scf-person-bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    filter: saturate(.9);
    transition: transform .4s ease;
}
.scf-kader-grid .scf-person:hover .scf-person-bild { transform: scale(1.04); }

/* Platzhalter ohne Freigabe: Initialen auf Bereichsfarbe */
.scf-kader-grid .scf-person-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--scf-akzent-dark);
    color: rgba(255, 255, 255, .25);
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 900;
    font-size: clamp(48px, 30cqw, 96px);
    line-height: 1;
}

/* Nummer oben links auf dem Bild */
.scf-kader-grid .scf-person-nummer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 4px 12px 6px;
    background: var(--scf-akzent-mid);
    color: #ffffff;
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 900;
    font-size: clamp(20px, 9cqw, 30px);
    line-height: 1;
}

/* Text als Overlay unten – Verlauf sorgt für Lesbarkeit auf jedem Foto */
.scf-kader-grid .scf-person-text {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 48px 16px 16px;
    background: linear-gradient(to top, rgba(10, 10, 10, .92) 38%, rgba(10, 10, 10, 0));
}

.scf-kader-grid .scf-person-name {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 7.5cqw, 21px);
    line-height: 1.05;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 4px;
    hyphens: auto;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.scf-kader-grid .scf-person-meta {
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: clamp(12px, 4.5cqw, 14px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--scf-akzent);
    margin: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* Akzentkante beim Hover */
.scf-kader-grid .scf-person::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 3;
    height: 4px;
    background: var(--scf-akzent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}
.scf-kader-grid .scf-person:hover::after { transform: scaleX(1); }

/* ── Listenlayout: helle Zeilen, kleines Bild links ── */
.scf-kader-liste { display: flex; flex-direction: column; gap: 2px; }

.scf-kader-liste .scf-person {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #ffffff;
    border-left: 6px solid var(--scf-akzent-mid);
    transition: background-color .2s;
}
.scf-kader-liste .scf-person:hover { background: #f5f3ee; }

.scf-kader-liste .scf-person-foto { flex-shrink: 0; width: 64px; }
.scf-kader-liste .scf-person-bild { width: 64px; height: 64px; object-fit: cover; display: block; }
.scf-kader-liste .scf-person-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--scf-akzent-dark);
    color: #ffffff;
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
}

.scf-kader-liste .scf-person-text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }

.scf-kader-liste .scf-person-nummer {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    min-width: 1.8ch;
    color: var(--scf-akzent-mid);
}

.scf-kader-liste .scf-person-name {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #0a0a0a;
    margin: 0;
}

.scf-kader-liste .scf-person-meta {
    flex-basis: 100%;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b6b6b;
    margin: 0;
}


/* ── WISCHEN (Scroll-Snap, kein JS) ──
   slider="mobil" (Standard): unter 900px wischen, darüber Raster
   slider="ja": immer wischen  ·  slider="nein": immer Raster
   Karten rasten ein, die angeschnittene nächste Karte zeigt, dass es weitergeht. */
.scf-kader-grid.scf-slider {
    display: flex;
    gap: clamp(10px, 1.6vw, 22px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--scf-akzent-mid) #e6e2da;
    padding-bottom: 10px;
}

.scf-kader-grid.scf-slider .scf-person {
    flex: 0 0 clamp(180px, 44%, 240px);
    scroll-snap-align: start;
}

/* Scrollbar dezent, aber sichtbar – sie ist der Hinweis, dass es weitergeht */
.scf-kader-grid.scf-slider::-webkit-scrollbar { height: 6px; }
.scf-kader-grid.scf-slider::-webkit-scrollbar-track { background: #e6e2da; }
.scf-kader-grid.scf-slider::-webkit-scrollbar-thumb { background: var(--scf-akzent-mid); }

/* Tastaturfokus sichtbar machen, der Bereich ist fokussierbar */
.scf-kader-grid.scf-slider:focus-visible { outline: 3px solid var(--scf-akzent-mid); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════
   ANSPRECHPARTNER ([scf_ansprechpartner])
   ══════════════════════════════════════════════════════════ */
.scf-ansprechpartner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2px;
}

.scf-kontakt {
    container-type: inline-size;
    display: flex;
    gap: 16px;
    background: #ffffff;
    color: #0a0a0a;
    border-left: 6px solid #0a0a0a;
    padding: 18px 20px;
}

.scf-kontakt .scf-person-foto { flex-shrink: 0; width: 72px; }
.scf-kontakt .scf-person-platzhalter { aspect-ratio: 1; font-size: 26px; background: #2a2a2a; }

.scf-kontakt-funktion {
    font-family: 'Saira Semi Condensed', sans-serif;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: inherit;
    opacity: .75;
    margin: 2px 0 8px;
}

.scf-kontakt-daten {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: clamp(14px, 1.1vw, 16px);
    margin: 0;
}

.scf-kontakt-daten a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(128, 128, 128, .45);
}
.scf-kontakt-daten a:hover { border-bottom-color: currentColor; }

/* ══════════════════════════════════════════════════════════
   KONTAKTE ([scf_kontakte])
   Nachschlagedaten als Tabelle. Unter 640px klappt jede Zeile
   in einen Block um, die Spaltentitel stehen dann davor.
   ══════════════════════════════════════════════════════════ */
.scf-kontakte {
    --scf-akzent: #006ead;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;              /* gleiche Spaltenbreiten wie die Trainingszeiten */
    font-family: 'Saira Semi Condensed', sans-serif;
}

.scf-kontakte th,
.scf-kontakte td { width: 25%; }

.scf-kontakte.scf-bereich-damen  { --scf-akzent: #00a5ad; }
.scf-kontakte.scf-bereich-jugend { --scf-akzent: #00ad5c; }
.scf-kontakte.scf-bereich-verein { --scf-akzent: #0a0a0a; }

.scf-kontakte th {
    font-weight: 700;
    font-size: clamp(14px, 1.1vw, 16px);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid currentColor;
}

.scf-kontakte td {
    padding: 14px 16px;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.4;
    border-bottom: 1px solid rgba(128, 128, 128, .35);
    vertical-align: middle;
}

/* Name etwas kräftiger, er ist der Einstieg in die Zeile */
.scf-kontakte td:first-child {
    font-weight: 700;
}

.scf-kontakte a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(128, 128, 128, .5);
}

.scf-kontakte a:hover {
    border-bottom-color: currentColor;
}

/* Rolle erbt die Textfarbe, damit sie auf jedem Hintergrund passt */
.scf-kontakte td:nth-child(2) {
    font-weight: 700;
    opacity: .75;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: clamp(14px, 1.1vw, 15px);
}

@media (max-width: 640px) {
    /* Feste Spaltenbreiten aufheben, sonst zerlegt der Browser jede
       Telefonnummer in einzelne Zeilen */
    .scf-kontakte { table-layout: auto; }
    .scf-kontakte th,
    .scf-kontakte td { width: auto; }

    .scf-kontakte thead { display: none; }

    .scf-kontakte tbody,
    .scf-kontakte tr,
    .scf-kontakte td { display: block; }

    .scf-kontakte tr {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid rgba(128, 128, 128, .35);
    }

    .scf-kontakte td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        padding: 4px 0;
        border: 0;
        text-align: right;
    }

    /* Nummern und Adressen dürfen nicht mitten im Wort brechen */
    .scf-kontakte td a,
    .scf-kontakte td .scf-mail-link,
    .scf-kontakte td .scf-tel-link {
        white-space: nowrap;
        overflow-wrap: anywhere;
    }

    .scf-kontakte td:last-child a { white-space: normal; }

    .scf-kontakte td::before {
        content: attr(data-titel);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        opacity: .6;
        text-align: left;
        flex-shrink: 0;
    }

    .scf-kontakte td:first-child {
        font-size: 18px;
        padding-bottom: 8px;
    }
}

/* ══════════════════════════════════════════════════════════
   TRAINING ([scf_training])
   ══════════════════════════════════════════════════════════ */
.scf-training { display: flex; flex-direction: column; gap: 24px; }

.scf-training-team { --scf-akzent: #006ead; }
.scf-training-team.scf-bereich-damen  { --scf-akzent: #00a5ad; }
.scf-training-team.scf-bereich-jugend { --scf-akzent: #00ad5c; }
.scf-training-team.scf-bereich-verein { --scf-akzent: #0a0a0a; }

.scf-training-titel {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.1;
    text-transform: uppercase;
    color: inherit;
    margin: 0 0 10px;
    padding-left: 12px;
    border-left: 6px solid var(--scf-akzent);
}

.scf-training-liste { list-style: none; margin: 0; padding: 0; }

/* Kopfzeile wie bei der Kontakttabelle */
.scf-training-kopf {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 16px;
    padding: 12px 16px;
    border-bottom: 2px solid currentColor;
    font-family: 'Saira Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.1vw, 16px);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scf-training-einheit {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: baseline;
    gap: 8px 16px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(128, 128, 128, .35);
    font-family: 'Saira Semi Condensed', sans-serif;
    color: inherit;
}

.scf-training-tag {
    font-weight: 700;
    font-size: clamp(15px, 1.2vw, 17px);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: inherit;
}

.scf-training-zeit {
    font-family: 'Saira Stencil', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--scf-akzent);
}

/* Halle und Anschrift sind eigene Spalten – der Wrapper verschwindet im Raster */
.scf-training-ort { display: contents; }

.scf-training-halle {
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 700;
    color: inherit;
}

.scf-training-adresse {
    font-size: clamp(13px, 1vw, 15px);
    color: inherit;
    opacity: .7;
    overflow-wrap: anywhere;
}

.scf-training-adresse a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(128, 128, 128, .45);
}

.scf-training-adresse a:hover {
    opacity: 1;
    border-bottom-color: currentColor;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIV
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .scf-kader-grid.scf-slider-mobil {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--scf-akzent-mid) #e6e2da;
        padding-bottom: 10px;
    }

    .scf-kader-grid.scf-slider-mobil .scf-person {
        flex: 0 0 clamp(170px, 62%, 230px);
        scroll-snap-align: start;
    }

    .scf-kader-grid.scf-slider-mobil::-webkit-scrollbar { height: 6px; }
    .scf-kader-grid.scf-slider-mobil::-webkit-scrollbar-track { background: #e6e2da; }
    .scf-kader-grid.scf-slider-mobil::-webkit-scrollbar-thumb { background: var(--scf-akzent-mid); }
}

@media (max-width: 640px) {
    .scf-training-kopf { display: none; }

    .scf-training-einheit {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 12px 0;
    }

    .scf-training-tag { font-size: 17px; }
    .scf-kader-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .scf-kader-grid .scf-person-text { padding: 32px 12px 12px; }
    .scf-kader-liste .scf-person-foto { width: 52px; }
    .scf-kader-liste .scf-person-bild,
    .scf-kader-liste .scf-person-platzhalter { width: 52px; height: 52px; font-size: 20px; }
    .scf-kontakt { flex-direction: column; }
    .scf-kontakt .scf-person-foto { width: 64px; }
    .scf-training-tag { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .scf-kader-grid .scf-person-bild { transition: none; }
    .scf-kader-grid .scf-person:hover .scf-person-bild { transform: none; }
}