/* Plan-B-Seite (E-148): Visitenkarte mit Prüfpfad aus der Gegenprüfung vom 31.10.2026 (X-18).
   Nur auf /plan-b und /en/plan-b geladen, nach stil.css; die Startseite lädt diese Datei nicht. */

.pb { padding-top: clamp(16px, 2.4vw, 32px); } /* weniger Luft unter der Kopfzeile (E-189; vorher 32 bis 72 px) */

/* Kopf: Foto links in der Spalte der Überschriften, rechts Name, Satz und die eine Handlung */
.pb-kopf {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 32px; align-items: end;
}
.pb-bildspalte { width: 100%; max-width: 320px; }
.pb-kopf .bild { width: 100%; }
/* Status unter dem Namen in der Kopfzeile (E-199): Punkt, Pfeil und Fokus im Blau der Punkte statt im Türkis von Plan A.
   Das „Hi.“ über dem Porträt ist raus (vorher E-198, K-12, davor Handschrift E-192 bis E-194, Serif kursiv E-189) */
/* Punkt leicht kleiner, glatte 4 px statt .44em (4,8 px), damit er auf jedem Bildschirm rund bleibt; ohne Pfeil nach oben, ein Tipp auf das Wort springt weiter (E-200) */
.kopf-status .status-text::after { background: var(--punkte); width: 4px; height: 4px; }
.kopf-status .hoch, .kopf-status.kann-hoch .hoch { display: none; }
/* „Hi“ ganz oben mit kleinem i, die Wörter der Abschnitte bleiben in Großbuchstaben (E-204) */
.kopf-status .status-text.ist-start { text-transform: none; }
.kopf-status:focus-visible { outline-color: var(--punkte); }
.pb-kopf .rolle { margin-bottom: 16px; }
.pb-kopf h1 { font-size: clamp(56px, 8.4vw, 124px); line-height: .9; }
.pb-lead {
  font-size: clamp(21px, 2.05vw, 28px); line-height: 1.36; letter-spacing: -.006em;
  max-width: 30ch; margin: clamp(20px, 2.6vw, 32px) 0 30px;
}

/* Abschnitte: Linie, links die Überschrift, rechts der Text */
.pb-teil {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px 32px;
  border-top: 1px solid var(--tinte); padding-top: 20px; margin-top: clamp(64px, 8vw, 112px);
}
.pb-teil h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1; }
.pb-teil h2 .nr {
  display: block; margin-bottom: 14px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; color: var(--tinte); font-variant-numeric: tabular-nums;
}
.pb-text > p { margin: 0 0 .8em; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; max-width: 52ch; }
.pb-text > p:last-child { margin-bottom: 0; }

/* Werdegang: Firma und Rolle je Zeile */
.pb-stationen { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linie); }
.pb-stationen li {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4px 24px; align-items: baseline;
  padding: 14px 0 15px; border-top: 1px solid var(--linie);
}
.pb-stationen li:first-child { border-top: 0; padding-top: 4px; }
.pb-stationen .titel { font-family: var(--serif); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.1; letter-spacing: -.01em; }
.pb-stationen .rolle-text { font-size: 17px; line-height: 1.45; color: var(--leise); }
.pb-stationen .rolle-text a { color: inherit; }
.pb-weiter { margin: 22px 0 0; }

/* Was bisher steht: Datum und Tatsache */
.pb-daten { list-style: none; margin: 0; padding: 0; }
.pb-daten li {
  display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 4px 20px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--linie); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45;
}
.pb-daten li:first-child { border-top: 0; padding-top: 4px; }
.pb-daten time { font-size: 15px; color: var(--leise); font-variant-numeric: tabular-nums; }

/* Gespräch: eine Handlung, die Adresse lesbar daneben, der Hinweis klein darunter */
.pb-gespraech > p:first-child { margin: 0; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; max-width: 52ch; }
.pb-gespraech .knoepfe { margin-top: 28px; }

@media (max-width: 720px) {
  .pb-kopf, .pb-teil { grid-template-columns: minmax(0, 1fr); }
  .pb-bildspalte { max-width: 200px; }
  .pb-stationen li { grid-template-columns: minmax(0, 1fr); }
  .pb-daten li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}