/**
 * ----------------------------------------------------------------------------
 * Globale Schriften & Einstellungen
 * ----------------------------------------------------------------------------
 */

/* Importiert eine benutzerdefinierte Schriftart für die Webseite. */
@font-face {
    font-family: "tthm";
    src: url('https://techtalkers.hm.edu/wp-content/themes/tt-blocksy-child/fonts/untitled-sans-web-regular.woff2') format('woff2');
}

/* Setzt die benutzerdefinierte Schriftart als Standard für alle Elemente. */
* {
    font-family: "tthm", Courier, monospace !important;
}

/* Globale HTML-Einstellungen */
html {
    /* Aktiviert weiches Scrollen, wenn auf Anker-Links geklickt wird. */
    scroll-behavior: smooth;
    /* Eine CSS-Variable für die Höhe des fixierten Headers der Seite. */
    /* Dies wird verwendet, um die "sticky" Positionierung korrekt zu berechnen. */
    --header-offset: 95px; 
}


/**
 * ----------------------------------------------------------------------------
 * Globale WordPress-Block-Anpassungen
 * ----------------------------------------------------------------------------
 */

/* Fügt dem ersten Überschriften-Block auf einer Seite einen oberen Abstand hinzu. */
/* Dies verhindert, dass der Seitentitel zu nah am Seiten-Header klebt. */
/* Das ">" Zeichen stellt sicher, dass nur direkte untergeordnete Elemente betroffen sind. */
.entry-content > .wp-block-heading:first-child {
    margin-top: 4rem; 
}


/**
 * ----------------------------------------------------------------------------
 * Autorenverzeichnis-Komponente ([custom_team_list])
 * ----------------------------------------------------------------------------
 */

/* === Alphabet-Navigationsleiste === */
.team-alphabet {
    margin-top: 2rem; /* Abstand zur Überschrift darüber. */
    background: #fff;
    padding: 0.5em 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 2em; /* Abstand zum Grid darunter. */
    justify-content: flex-start;
}

/* Styling für die einzelnen Buchstaben-Links in der Navigationsleiste. */
.team-alphabet a {
    text-decoration: none;
    font-weight: bold;
    padding: 0.3em 0.6em;
    border-radius: 3px;
    background: #eee;
    color: #000;
    font-size: 0.9em;
    transition: background 0.2s;
}

.team-alphabet a:hover {
    background: #ccc;
}


/* === Sticky Buchstaben-Titel === */
/* Dieser Wrapper wird beim Scrollen unter dem Header "kleben" bleiben. */
.letter-label-wrapper {
    position: -webkit-sticky; /* Für maximale Kompatibilität mit älteren Safari-Versionen */
    position: sticky;
    top: var(--header-offset); /* Dockt exakt unter dem Seiten-Header an. */
    z-index: 10;

    /* Der Wrapper selbst ist durchsichtig, damit nur der Buchstabe einen Hintergrund hat. */
    background: transparent;
    padding-top: 20px;
    padding-bottom: 0.4em;
    margin-bottom: 0.8em;
}

/* Styling für den sichtbaren, "schwebenden" Buchstaben. */
.letter-label {
    display: inline-block;
    font-weight: 700;
    font-size: 1em;
    color: #111;
    background: #fff;
    padding: 0.3em 0.8em;
    border-radius: 4px;
    border: 1px solid #ddd;
}


/* === Team-Grid Layout === */
/* Container für eine komplette Buchstabengruppe (Titel + Personen). */
.letter-group {
    padding-left: 1.5em;
    margin-bottom: 4em;
}

/* Erzeugt die abwechselnden farbigen Linien links neben den Gruppen. */
.letter-group:nth-of-type(odd) {
    border-left: 4px solid #006D6D;
}
.letter-group:nth-of-type(even) {
    border-left: 4px solid #ccc;
}

/* Flexbox-Container, der die Benutzerkarten anordnet. */
.letter-users {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
}


/* === Einzelne Team-Mitglied-Karte === */
.team-member { 
    width: 100%; 
    max-width: 260px; 
    aspect-ratio: 4 / 5; 
    background: white; 
    border: 1px solid transparent; 
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 1.2em; 
    text-align: center; 
    text-decoration: none; 
    color: inherit; 
    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease; 
}

/* Visueller Effekt, wenn man mit der Maus über eine Karte fährt. */
.team-member:hover { 
    border: 1px solid #999; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 
    transform: translateY(-2px); 
}

/* Styling für das Profilbild und dessen Platzhalter. */
.team-member img,
.team-member .platzhalter { 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    object-fit: cover; 
    margin-bottom: 0.8em; 
    flex-shrink: 0; 
}

/* Hintergrund für den Fall, dass kein Profilbild vorhanden ist. */
.platzhalter { 
    background: #ccc; 
    display: block; 
}

/* Styling für den Namen des Team-Mitglieds. */
.team-member h3 { 
    margin: 0 0 0.3em 0; 
    font-size: 1.05em; 
    font-weight: 700; 
    line-height: 1.2; 
}

/* Styling für die Rolle(n) unter dem Namen. */
.team-rolle { 
    font-size: 0.85em; 
    color: #333; 
    line-height: 1.3; 
    margin: 0.3em 0; 
    max-height: 2.6em; /* Begrenzt die Höhe auf ca. zwei Zeilen. */
    overflow: hidden;        /* Versteckt den überstehenden Inhalt. */
    text-overflow: ellipsis; /* Fügt "..." am Ende von zu langem Text hinzu. */
    white-space: nowrap;     /* Verhindert Zeilenumbrüche in den Rollen. */
}


/* === "Zurück nach oben"-Button === */
.back-to-top-container { 
    text-align: center; 
    margin: 4em 0 2em 0; 
}

.back-to-top-button { 
    display: inline-block; 
    padding: 0.6em 1em; 
    background: #006D6D; 
    font-weight: bold; 
    border-radius: 3px; 
    transition: background-color 0.2s ease; 
    color: #fff !important; 
    text-decoration: none !important; 
}

.back-to-top-button:hover { 
    background: #005a5a; 
}