/* Verzeichnis und Profilseite. */

.directory-intro { padding-bottom: var(--space-5); }
.directory-intro h1 { max-width: 22ch; margin-bottom: 0; }
.directory-content { padding-top: var(--space-5); }
.directory-layout, .profile-layout { display: grid; gap: var(--space-8); align-items: start; }

/* Filter: am Handy zusammengeklappt, damit die Ergebnisse sofort sichtbar sind.
   Ab 900px ist der Block dauerhaft offen und die Zusammenfassung verschwindet. */
.directory-filters { margin-bottom: var(--space-5); }
.directory-filters__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.directory-filters__summary::-webkit-details-marker { display: none; }
.directory-filters__summary::after {
  content: "";
  width: .5rem; height: .5rem;
  margin-left: auto;
  border-right: 2px solid var(--color-primary-dark);
  border-bottom: 2px solid var(--color-primary-dark);
  transform: translateY(-25%) rotate(45deg);
}
.directory-filters[open] .directory-filters__summary { margin-bottom: var(--space-4); }
.directory-filters[open] .directory-filters__summary::after { transform: translateY(25%) rotate(-135deg); }
.directory-filters__summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* Zwischenüberschrift über der Ergebnisliste: Ohne sie sprang die Gliederung
   von h1 direkt auf die h3 der Profilkarten. Größe aus der Skala (h2). */
.directory-heading { margin: 0 0 var(--space-2); }
.directory-total { font-size: var(--fs-md); margin-bottom: var(--space-5); }
/* Karten nicht auf gleiche Höhe strecken: kurze Karten bekamen sonst ein Loch. */
.directory-results { align-items: start; margin-bottom: var(--space-6); }
.directory-results .expert-card { height: auto; }

/* Blätter-Navigation deutlich vom Kleingedruckten absetzen. */
.directory-content .pagination { margin-bottom: var(--space-6); }
.directory-content .divider { margin: var(--space-6) 0 var(--space-4); }

/* Profilseite */
.profile-back { display: inline-block; margin-bottom: var(--space-5); font-weight: 600; }
.profile-heading { display: flex; align-items: flex-start; gap: var(--space-5); }
.profile-heading h1 { margin-bottom: var(--space-3); }
.profile-heading > div > * + * { margin-top: var(--space-2); }
/* Der Demo-Hinweis war vorher ein farbiger Kasten über dem Namen und damit
   auffälliger als die Fachperson selbst. Jetzt eine Zeile unter dem Namen. */
.profile-demo { font-size: var(--fs-sm); color: var(--color-text-muted); }
.profile-topics { list-style: none; padding: 0; margin: 0; }
/* Silbengerecht trennen statt willkürlich mitten im Wort umbrechen. */
.preserve-lines { white-space: pre-line; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
/* Die Nebenkarte ist eine Stufe leiser als der Hauptteil. */
.profile-contact h3 { font-size: var(--fs-lg); margin: 0; }
.profile-contact dt { font-weight: 600; margin-top: var(--space-4); }
.profile-contact dd { margin: 0; color: var(--color-text-muted); }
.profile-contact dl { margin: 0 0 var(--space-5); }

@media (max-width: 639px) {
  /* Kompaktere Karten am Handy: Name, Fachrichtung, Ort, zwei Themen. */
  .directory-results .expert-card__topics li:nth-child(n+3) { display: none; }
}

@media (min-width: 900px) {
  .directory-layout { grid-template-columns: 18rem minmax(0, 1fr); }
  /* Die Kontaktkarte beginnt auf derselben Oberkante wie der Namensblock. */
  .profile-layout { grid-template-columns: minmax(0, 1fr) 22rem; }
  .directory-filters { margin-bottom: 0; }
  .directory-filters__summary { display: none; }
}