/*
 * Die Kandidatenvorstellung (§ 5 Abs. 5 SVVO).
 *
 * Sie hat zwei Leben: als Aushang auf Papier im Klassenraum und als Seite an
 * der Tafel. Deshalb ist sie auf beides ausgelegt — am Bildschirm zwei Spalten,
 * beim Drucken schwarz auf weiß, ohne Knöpfe, und keine Karte wird zwischen
 * zwei Seiten zerrissen.
 */

.ars-sv-vorstellung {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem;
  box-sizing: border-box;
  color: var(--ars-text, #20252b);
}

.ars-sv-vorstellung__kopf { text-align: center; margin-bottom: 1.2rem; }
.ars-sv-vorstellung__eyebrow {
  margin: 0; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ars-tuerkis, #018186); font-weight: 700;
}
.ars-sv-vorstellung__kopf h1 { margin: .2rem 0 .3rem; font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
.ars-sv-vorstellung__unter { margin: 0; color: var(--ars-text-soft, #59616a); }

.ars-sv-vorstellung__druck { text-align: center; margin: 0 0 1.5rem; }

.ars-sv-vorstellung__leer { color: var(--ars-text-soft, #59616a); font-style: italic; text-align: center; }

.ars-sv-vorstellung__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem;
}

.ars-sv-vorstellung__karte {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--ars-border, #d9dedf);
  border-radius: 10px;
  background: var(--ars-bg, #fff);
  /* Eine Kandidatur gehört zusammen — beim Drucken nicht auseinanderreißen. */
  break-inside: avoid;
}

.ars-sv-vorstellung__bild {
  flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden; background: var(--ars-bg-soft, #eef2f3);
}
.ars-sv-vorstellung__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ars-sv-vorstellung__platzhalter { display: block; width: 100%; height: 100%; }

.ars-sv-vorstellung__text { min-width: 0; }
.ars-sv-vorstellung__name { margin: 0; font-size: 1.25rem; font-weight: 800; }
.ars-sv-vorstellung__klasse { margin: .1rem 0 .5rem; color: var(--ars-text-soft, #59616a); font-size: .9rem; }
.ars-sv-vorstellung__programm { margin: 0; line-height: 1.5; }
.ars-sv-vorstellung__ohne { margin: 0; color: var(--ars-text-soft, #59616a); font-style: italic; font-size: .92rem; }

.ars-sv-vorstellung__fuss {
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--ars-border, #d9dedf);
  font-size: .9rem; color: var(--ars-text-soft, #59616a);
}
.ars-sv-vorstellung__fuss p { margin: 0; }

/*
 * Auf Papier: schwarz auf weiß, damit die Fotos nicht in einer Tönung ersaufen
 * und der Ausdruck wenig Farbe braucht. Der Druckknopf verschwindet — er wäre
 * auf dem Blatt ein Rätsel.
 */
@media print {
  .ars-sv-vorstellung { max-width: none; padding: 0; color: #000; }
  .ars-sv-vorstellung__druck { display: none; }
  .ars-sv-vorstellung__liste { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .ars-sv-vorstellung__karte { border-color: #999; background: none; }
  .ars-sv-vorstellung__eyebrow,
  .ars-sv-vorstellung__klasse,
  .ars-sv-vorstellung__unter,
  .ars-sv-vorstellung__fuss { color: #333; }
}

/* Im Beitrag: Dieselben Karten, aber im Textfluss statt auf eigener Seite.
   Die Vorstellung für die Klassenräume und die im Beitrag sollen gleich
   aussehen — zwei Darstellungen wären zwei Pflegestellen und zwei Chancen,
   dass eine Kandidatur anders wirkt als die andere. */
.ars-sv-vorstellung--beitrag { max-width: none; margin: 1.5rem 0; padding: 0; }
.ars-sv-vorstellung--beitrag .ars-sv-vorstellung__fuss { margin-top: 1.2rem; }