/* Fachgebietsseiten unter /fachgebiet/<tag> (erzeugt von
 * static_pages/fachgebiete.py).
 *
 * Ergaenzt style.css, ersetzt es nicht: die Seiten sind Kopien der Startseite
 * mit zusaetzlichem Einstiegsinhalt (Einleitung, Einstiegsfragen,
 * Leitlinien-Verzeichnis, verwandte Fachgebiete). Alles Uebrige -- Topbar,
 * Suchleiste, Filterbereich, Trefferdarstellung -- kommt unveraendert aus
 * style.css, damit die Seite sich nicht von der Startseite unterscheidet,
 * sobald der Nutzer sucht.
 *
 * Farben ausschliesslich ueber die Variablen aus style.css (--bg, --fg,
 * --muted, --border, --accent); dadurch gilt der dortige Dark-Mode hier mit,
 * ohne dass er ein zweites Mal gepflegt werden muss.
 */

/* Der Einstiegsinhalt weicht dem Suchergebnis, sobald gesucht wird
 * (app.js, hideDisclaimer). style.css definiert .hidden nur je Komponente
 * (.intro.hidden, .disclaimer.hidden, ...), es gibt keine allgemeine Regel --
 * deshalb hier eine eigene. */
.startinhalt.hidden { display: none; }

/* ------------------------------------------------------------------ Kopf */

/* Auf diesen Seiten ist das Fachgebiet die h1; der Seitentitel in der Topbar
 * tritt deshalb zu einem <p> zurueck (zwei h1 waeren eine falsche
 * Dokumentgliederung). Optisch bleibt er, was er auf der Startseite ist --
 * die Regeln sind aus style.css .topbar h1 uebernommen. */
.topbar-titel {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}

.topbar-titel a {
  color: inherit;
  text-decoration: none;
}

.topbar-titel a:hover { text-decoration: underline; }

.fg-kopf {
  margin: 0 0 1rem;
}

.fg-kopf h1 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 0.4rem;
  text-wrap: balance;
}

.fg-untertitel {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--fg);
}

.fg-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ Abschnitte */
.fg-abschnitt {
  margin: 0 0 1.2rem;
}

.fg-abschnitt > h2 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}

.fg-hinweis {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ Einstiegsfragen */
.fg-fragen {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fg-fragen li {
  margin-bottom: 0.35rem;
}

.fg-fragen a {
  color: var(--accent);
  text-decoration: none;
}

.fg-fragen a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Leitlinien-Verzeichnis
 *
 * Bewusst eine Liste und keine Tabelle: der Titel ist das Tragende, die
 * Metadaten sind Beiwerk. Auf schmalen Displays bricht eine Liste sauber um,
 * eine vierspaltige Tabelle nicht.
 */
.fg-verzeichnis {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fg-eintrag {
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
}

.fg-eintrag:first-child { border-top: none; }

.fg-eintrag-titel {
  margin: 0 0 0.15rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fg-eintrag-titel a {
  color: var(--accent);
  text-decoration: none;
}

.fg-eintrag-titel a:hover { text-decoration: underline; }

.fg-eintrag-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Trennpunkte zwischen den Metadaten, ohne sie in den Text schreiben zu
 * muessen (ein echtes Zeichen wuerde beim Kopieren mitgehen). */
.fg-eintrag-meta span + span::before {
  content: " · ";
}

.fg-abgelaufen {
  color: var(--danger-fg);
}

/* ------------------------------------------------------------------ Verwandte Fachgebiete */
.fg-verwandt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fg-verwandt a {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
}

.fg-verwandt a:hover {
  border-color: var(--accent);
  text-decoration: underline;
}

/* ------------------------------------------------------------------ Fusszeile */
.fg-fuss {
  margin: 1.2rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

.fg-fuss a { color: var(--accent); }