/* ==========================================================================
   Ansprechpartner-Box auf den Kursseiten
   ==========================================================================
   Gebaut aus den vorhandenen Bausteinen: .sk-band --sk-band--panel liefert
   Flaeche, Innenabstand und die Goldkante, .sk-eyebrow die Ueberzeile,
   .sk-btn--ghost den Knopf, .sk-ph die Platzhalterkachel. Hier stehen nur
   die Regeln, die es fuer das zweispaltige Innere zusaetzlich braucht.

   Alle Farben, Abstaende und Schriften kommen aus den Tokens in main.css.
   Keine eigenen Hex-Werte, keine eigenen Pixelgroessen.
   ========================================================================== */

.sk-ansprechpartner__karte {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sk-space-md);
	align-items: start;
}

/* Ab 640px steht das Bild links neben dem Text. Darunter -- und damit auf
   jedem Telefon bis hinunter zu 320px -- stapeln sich beide Spalten. */
@media (min-width: 640px) {
	.sk-ansprechpartner__karte {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
		align-items: center;
	}
}

.sk-ansprechpartner__bild {
	min-width: 0;
}

/* Das Foto behaelt sein eigenes Seitenverhaeltnis, solange es nicht zu hoch
   wird. Erst ein Hochformat wird auf 20rem gedeckelt und dabei leicht
   oberhalb der Mitte beschnitten -- dort steht bei Portraits das Gesicht.
   Ein gepflegter Bildausschnitt aus der Mediathek (--sk-fokus) gewinnt. */
.sk-ansprechpartner__foto {
	display: block;
	width: 100%;
	height: auto;
	max-height: 20rem;
	object-fit: cover;
	object-position: var(--sk-fokus, 50% 30%);
	border: 1px solid var(--sk-color-border);
	border-radius: var(--sk-radius);
}

/* Ohne gepflegtes Foto: dieselbe Kachel wie ueberall auf der Website, mit
   den Initialen statt eines fremden Bildes. Bewusst kein Symbolfoto. */
.sk-ansprechpartner__platzhalter .sk-ph__label {
	font-size: var(--sk-fs-h3);
	letter-spacing: 0.08em;
	color: var(--sk-color-text-muted);
}

.sk-ansprechpartner__text {
	min-width: 0;
}

.sk-ansprechpartner__text > * {
	margin-block: 0;
}

.sk-ansprechpartner__text > * + * {
	margin-block-start: var(--sk-space-xs);
}

.sk-ansprechpartner__name {
	font-size: var(--sk-fs-h3);
	line-height: var(--sk-lh-heading);
	color: var(--sk-color-heading);
}

.sk-ansprechpartner__rolle {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-eyebrow);
	letter-spacing: var(--sk-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sk-color-gold);
}

.sk-ansprechpartner__bio,
.sk-ansprechpartner__lead {
	font-size: var(--sk-fs-base);
	line-height: var(--sk-lh-body);
	color: var(--sk-color-text);
	max-width: var(--sk-measure-tight, 62ch);
}

.sk-ansprechpartner__bio {
	color: var(--sk-color-text-muted);
}

/* Kontaktwege der Schule. Bewusst eine Liste und keine Knopfreihe: der
   Probetrainings-Knopf darunter soll die einzige Hauptaktion bleiben. */
.sk-ansprechpartner__wege {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-2xs) var(--sk-space-md);
	margin-block-start: var(--sk-space-sm);
}

.sk-ansprechpartner__weg {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sk-space-3xs) var(--sk-space-2xs);
	margin: 0;
	padding: 0;
}

.sk-ansprechpartner__weg::before {
	content: none;
}

.sk-ansprechpartner__wegname {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sk-color-text-dim);
}

.sk-ansprechpartner__weglink {
	color: var(--sk-color-gold);
	text-decoration: none;
	border-block-end: 1px solid rgba(var(--sk-color-gold-rgb), 0.35);
	/* Lange Mailadressen duerfen umbrechen statt die Spalte zu sprengen. */
	overflow-wrap: anywhere;
	transition: border-color var(--sk-transition), color var(--sk-transition);
}

.sk-ansprechpartner__weglink:hover,
.sk-ansprechpartner__weglink:focus-visible {
	color: var(--sk-color-gold-light);
	border-block-end-color: var(--sk-color-gold-light);
}

.sk-ansprechpartner__weglink:focus-visible {
	outline: var(--sk-focus-ring);
	outline-offset: var(--sk-focus-offset);
}

.sk-ansprechpartner__aktion {
	margin-block-start: var(--sk-space-md);
}

/* Der Knopf bricht auf schmalen Bildschirmen nicht aus der Spalte aus:
   seine Beschriftung ist lang, die Flaeche darf deshalb mehrzeilig werden. */
.sk-ansprechpartner__aktion .sk-btn {
	max-width: 100%;
	text-align: center;
	white-space: normal;
}