/* job-detail-vorschau.css — Darstellung der von js/job-detail.js erzeugten Inserats-Ansicht
 * innerhalb der VERWALTUNG (Stellenformular, Vorlagen-Editor, Prüfansicht).
 *
 * Der Renderer ist für die Karriereseite gebaut und bringt deren Klassennamen mit. In der
 * Verwaltung gelten aber die V4-Tokens — diese Datei übersetzt das eine ins andere.
 *
 * ZUSAMMENGEFÜHRT am 21.08.2026 aus zwei Kopien (jobs-form.html mit #pvKarriere,
 * templates.html mit #jtPvKarriere), die bereits auseinandergelaufen waren: dem
 * Vorlagen-Editor fehlten Kontaktkarte und Bewerbungsschluss, dem Stellenformular die
 * Absatzabstände im Vorspann. Beim Bau der Prüfansicht wäre eine dritte Kopie entstanden —
 * stattdessen tragen jetzt alle drei Seiten die Klasse .jd-vorschau am Container.
 *
 * DER WICHTIGSTE PUNKT hier ist die Rücknahme von .modal-content:
 * Im V4-System ist das der Modal-RAHMEN (Karte mit Rand und Schatten), im Renderer dagegen
 * ein Textabschnitt. Ohne diese Rücknahme sieht jeder Abschnitt der Vorschau aus wie ein
 * Eingabefeld — genau das war der Befund an der Prüfansicht (21.08.2026).
 */

.jd-vorschau .modal-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.jd-vorschau .mp {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; color: var(--ink-2);
  background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: 999px; padding: .3rem .65rem;
}
.jd-vorschau .mp svg { color: var(--gold); flex: 0 0 auto; }

.jd-vorschau .modal-deadline {
  margin-top: .9rem; font-size: .82rem; color: var(--ink-3);
  background: var(--bg-inset); border-radius: 8px; padding: .5rem .7rem; text-align: center;
}
.jd-vorschau .modal-deadline.urgent { background: var(--gold-soft); color: var(--gold-text); }

/* Einleitung: eigener Absatz ohne System-Überschrift, mit Trennlinie darunter. */
.jd-vorschau .modal-vorspann {
  color: var(--ink-2); line-height: 1.7; font-size: .92rem;
  padding-bottom: 1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border);
}
.jd-vorschau .modal-vorspann p { margin: 0 0 .7rem; }
.jd-vorschau .modal-vorspann p:last-child { margin-bottom: 0; }

.jd-vorschau .modal-section { margin-bottom: 1.35rem; }
.jd-vorschau .modal-section:last-child { margin-bottom: 0; }
.jd-vorschau .modal-section h4 {
  display: flex; align-items: center; gap: .6rem;
  font-size: .9rem; font-weight: 700; color: var(--ink); margin: 0 0 .6rem;
}
.jd-vorschau .modal-section h4 svg {
  color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-med);
  padding: 7px; width: 16px; height: 16px; box-sizing: content-box;
  border-radius: 9px; flex: 0 0 auto;
}

/* Namenskollision, siehe Dateikopf: hier ist .modal-content ein Textabschnitt,
   kein Modal-Rahmen. */
.jd-vorschau .modal-content {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  max-width: none; width: auto; padding: 0; margin: 0;
  color: var(--ink-2); line-height: 1.7; font-size: .92rem;
}
.jd-vorschau .modal-content p { margin: 0 0 .7rem; }
.jd-vorschau .modal-content p:last-child { margin-bottom: 0; }
.jd-vorschau .modal-content ul,
.jd-vorschau .modal-content ol { margin: 0 0 .7rem; padding-left: 1.25rem; }

/* Schlussteil: freier Abschlusstext des Kunden, deshalb wie der Vorspann ohne
   System-Überschrift — aber als ABSCHLUSS mit Trennlinie darüber statt darunter. */
.jd-vorschau .modal-schlussteil {
  color: var(--ink-2); line-height: 1.7; font-size: .92rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.jd-vorschau .modal-schlussteil p { margin: 0 0 .7rem; }
.jd-vorschau .modal-schlussteil p:last-child { margin-bottom: 0; }

/* Kontaktkarte */
.jd-vorschau .contact-persons { display: flex; flex-direction: column; gap: .85rem; }
.jd-vorschau .contact-person { display: flex; align-items: center; gap: .85rem; }
.jd-vorschau .contact-photo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.jd-vorschau .contact-photo-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-inset); color: var(--ink-3); font-weight: 700; font-size: .85rem;
  position: relative; overflow: hidden;
}
/* Foto über den Initialen — fehlt die Datei, bleiben die Initialen (siehe job-detail.js) */
.jd-vorschau .contact-photo-fallback img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
}
.jd-vorschau .contact-person-info { line-height: 1.45; font-size: .88rem; min-width: 0; }
.jd-vorschau .contact-person-name { font-weight: 700; color: var(--ink); }
.jd-vorschau .contact-role,
.jd-vorschau .contact-role-add { color: var(--ink-3); font-size: .82rem; }
.jd-vorschau .contact-person-info a { color: var(--gold-text); text-decoration: none; overflow-wrap: anywhere; }
.jd-vorschau .contact-person-info a:hover { text-decoration: underline; }
.jd-vorschau .contact-phone { color: var(--ink-2); }