/* Zeichenfabrik -- Dozent*innen-Übersicht, sektionsspezifische Stile.
   .uebersicht-hero/.uebersicht-byline kommen aus kursuebersicht.css (identisches Hero-Muster). */

.dozenten-liste {
  padding: 32px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 1024px) { .dozenten-liste { padding: 44px 56px 60px; } }

.dozent-zeile {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  scroll-margin-top: 90px;
}
@media (min-width: 760px) { .dozent-zeile { grid-template-columns: 300px 1fr; } }

.dozent-zeile-bild {
  position: relative;
  display: flex;
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--farbe-rand);
  text-decoration: none;
}
@media (min-width: 760px) {
  .dozent-zeile-bild { aspect-ratio: 3 / 4; border-bottom: none; border-right: 1px solid var(--farbe-rand); }
}
.dozent-zeile-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.dozent-zeile-inhalt { padding: 28px 24px; display: flex; flex-direction: column; }
@media (min-width: 760px) { .dozent-zeile-inhalt { padding: 32px 34px; } }

.dozent-zeile-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.dozent-zeile-kopf h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.dozent-zeile-kopf h2 a { text-decoration: none; color: inherit; }
.dozent-zeile-kopf h2 a:hover { color: var(--farbe-teal); }
.dozent-seit {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--farbe-teal);
  white-space: nowrap;
}

.dozent-zeile-meta { font-size: 14px; color: #6B665E; margin-bottom: 16px; }
.dozent-zeile-bio { margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: #37342D; max-width: 46em; }

.dozent-zeile-kurse { margin-top: auto; }
.dozent-zeile-kurse-label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8377;
  margin: 0 0 10px;
}
.dozent-zeile-kurse-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.dozent-kurs-pill {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #D8D3C9;
  background: var(--farbe-creme);
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 600;
  color: var(--farbe-tinte);
}
.dozent-kurs-pill:hover { border-color: var(--farbe-teal); color: var(--farbe-teal); }
.dozent-kurs-pill span { color: #8A8377; font-weight: 500; }

/* ---- Mitmachen-Teaser ---- */
.dozenten-mitmachen { padding: 56px 24px; background: var(--farbe-teal-hell); }
@media (min-width: 1024px) { .dozenten-mitmachen { padding: 56px; } }
.dozenten-mitmachen-inhalt { max-width: 760px; }
.dozenten-mitmachen-inhalt .kicker--dunkel { color: #22403F; }
.dozenten-mitmachen-inhalt h2 { margin: 0 0 14px; font-size: 28px; font-weight: 800; color: #152B2A; }
.dozenten-mitmachen-inhalt p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: #1C3A39; max-width: 38em; }
.btn-mitmachen {
  text-decoration: none;
  display: inline-block;
  background: #211C14;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
}
.btn-mitmachen:hover { filter: brightness(1.3); }