/* Themen-Wolke mit Live-Suche (Startseite). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wolke-seite { padding: 2.5rem 0 0.5rem; }
.wolke-titel a { color: inherit; text-decoration: none; }
.wolke-titel a:hover { color: inherit; }
.wolke-titel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.wolke-titel { margin: 0 0 1.25rem; font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; text-align: center; }
.wolke-suche { max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.wolke-los { align-self: center; }
.wolke-los[hidden] { display: none; }
.wolke-suche input {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  padding: 0.95rem 1.2rem;
  border: none;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
}
.wolke-suche input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wolke-status { min-height: 1.4rem; margin: 0.75rem 0 0; text-align: center; font-size: 0.9rem; color: var(--muted); }

/* Rasterspalte und Wolke duerfen schmaler als ihr Inhalt werden: sonst macht ein langes,
   nicht umbrechendes Wort ("Psychische Erkrankung in der Familie") die Seite breiter als das
   Fenster, und wolke.js kann es nicht auf die echte Breite verkleinern */
.katalog > .ergebnisse, .wolke-bereich, .wolke { min-width: 0; max-width: 100%; }
.wolke {
  --dim: var(--ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* Zeilen mittig zusammenhalten: ohne das streckt flex-wrap wenige Zeilen auf die volle
     Mindesthoehe, und oben/unten ausgerichtete Woerter rissen grosse Luecken auf */
  align-content: center;
  gap: 0.7rem 1.2rem;
  min-height: 22rem;
  padding: 1.5rem 0;
  max-width: 62rem;
  margin: 0 auto;
}
/* Waehrend der Suche: nur so hoch wie die Treffer, sonst bliebe bei wenigen Woertern ein leeres Band */
.wolke.wolke-suchend { min-height: 9rem; }
.wort {
  position: relative;
  display: inline-block;
  line-height: 1.15;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--farbe, var(--dim));
  white-space: nowrap;
  /* lebendige Versetzung: je Wort eine feste, kleine Verschiebung nach oben/unten */
  top: var(--dy, 0);
  align-self: var(--ausrichtung, center);
}
.wort[hidden] { display: none; }
.wort.verwandt { font-weight: 600; }   /* etwas leichter als die Treffer, aber nicht duenn */
.wort.wort-unter { font-weight: 700; }   /* Unterthemen in derselben Schrift wie die Hauptwolke */
/* Unterthemen-Wolke: Helligkeit der Themenfarbe je Wort leicht variiert (--misch/--mischanteil aus wolke.js) */
.wolke .wort.wort-unter.verwandt {
  color: color-mix(in srgb, var(--farbe, var(--dim)), var(--misch, #fff) var(--mischanteil, 0%));
}
/* Ausgewaehltes Thema mit Unterthemen: mitten in der Wolke (wolke.js), in Akzentgruen statt
   der Themenfarbe der Unterthemen */
.wolke .wort.wort-haupt, .wolke .wort.wort-genau { color: var(--accent-hover); }
.wolke .wort.wort-haupt { top: 0; align-self: center; }
.wort { transition: transform 0.16s ease; }
.wort:hover, .wort:focus-visible { transform: translateY(-3px) scale(1.07); z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .wort { transition: none; }
  .wort:hover, .wort:focus-visible { transform: none; }
}
.wort:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wort-diagnose { --dim: #b03a2e; }
.wort-emotionen { --dim: #7d3c98; }
.wort-konflikte { --dim: #b94700; }
.wort-situationen { --dim: #1f618d; }
.wort-loesungsstrategien { --dim: #0e6655; }
.wort-entwicklungsaufgaben { --dim: #196f3d; }
.wort-diversitaet { --dim: #ad1457; }
.wort-figuren { --dim: #7a5c3e; }
.wort-altersgruppe { --dim: #4a5a6a; }
/* Gefuehle tragen ihre eigene Farbe (wie Filter-Badges und Karten-Sticker) */
.wort-emotionen { --farbe: var(--dim); }
.wort-trauer { --farbe: var(--c-trauer); } .wort-einsamkeit { --farbe: var(--c-einsamkeit); } .wort-heimweh { --farbe: var(--c-heimweh); }
.wort-angst { --farbe: var(--c-angst); } .wort-scham { --farbe: var(--c-scham); } .wort-schuldgefuehle { --farbe: var(--c-schuldgefuehle); }
.wort-wut { --farbe: var(--c-wut); } .wort-mut { --farbe: var(--c-mut); } .wort-ueberforderung { --farbe: var(--c-ueberforderung); }
.wort-selbstwert { --farbe: var(--c-selbstwert); } .wort-empathie { --farbe: #2a8a55; } .wort-neid { --farbe: var(--c-neid); }
.wort-schuechternheit { --farbe: var(--c-schuechternheit); } .wort-unsicherheit { --farbe: var(--c-unsicherheit); } .wort-sorge { --farbe: #1f7a82; }
.wort-enttaeuschung { --farbe: #9a6700; } .wort-eifersucht { --farbe: #8a5a00; }
.wort-emotionen.wort-wut, .wort-emotionen.wort-angst { font-weight: 800; }

@media (max-width: 600px) {
  .wolke { gap: 0.25rem 0.8rem; min-height: 18rem; }
  .wolke.wolke-suchend { min-height: 7rem; }
  .wort { white-space: normal; max-width: 100%; text-align: center; }
  .wolke-seite { padding-top: 1.5rem; }
}

/* "Alle Themen im Ueberblick": die bisherige gruppierte Liste, eingeklappt unter der Wolke */
.alle-themen { max-width: 62rem; margin: 1.5rem auto 2rem; }
.alle-themen > summary { cursor: pointer; text-align: center; font-weight: 700; color: var(--ink); padding: 0.6rem; list-style: none; }
.alle-themen > summary::-webkit-details-marker { display: none; }
.alle-themen > summary::after { content: " +"; color: var(--accent); }
.alle-themen[open] > summary::after { content: " \2212"; }
.alle-themen .tag-cloud { margin-top: 1rem; }

/* Spezifische Buecher unter der Wolke (nur bei wenigen, genau passenden Treffern) */
.wolke-buecher { max-width: 62rem; margin: 1.5rem auto 0; }
.wolke-buecher[hidden] { display: none; }
.wolke-buecher-titel { margin: 0 0 1rem; text-align: center; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.wolke-buecher-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem 1.25rem; }
.wolke-buecher-liste li { flex: 0 0 8.5rem; max-width: 8.5rem; }
.wolke-buecher-liste li[hidden] { display: none; }
.wolke-buecher-mehr[hidden], #wolke-buecher-mehr[hidden] { display: none; }
.wolke-buecher-liste a { display: flex; flex-direction: column; gap: 0.35rem; color: var(--ink); text-decoration: none; }
.wolke-buch-cover { display: block; aspect-ratio: 3 / 4; background: var(--surface-muted); }
.wolke-buch-cover img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform 0.16s ease; }
.wolke-buch-platz { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0.5rem; text-align: center; font-weight: 700; font-size: 0.85rem; }
.wolke-buch-titel { font-weight: 700; font-size: 0.9rem; line-height: 1.25; }
.wolke-buch-autor { font-size: 0.8rem; color: var(--muted); line-height: 1.3; }
.wolke-buecher-liste a:hover .wolke-buch-titel, .wolke-buecher-liste a:focus-visible .wolke-buch-titel { text-decoration: underline; }
.wolke-buecher-liste a:hover img { transform: translateY(-3px); }
.wolke-buecher-mehr { text-align: center; margin: 1.25rem 0 0; }
@media (prefers-reduced-motion: reduce) { .wolke-buch-cover img { transition: none; } .wolke-buecher-liste a:hover img { transform: none; } }
@media (max-width: 600px) { .wolke-buecher-liste li { flex-basis: 7rem; max-width: 7rem; } }

/* Verfeinern-Zeile ueber der Ergebnisliste (nur bei vielen Treffern, siehe filter.js) */
.verfeinern { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin: 0 0 1.25rem; }
.verfeinern[hidden] { display: none; }
.vf-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.vf-label { margin-right: 0.25rem; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.vf-chip {
  font: inherit; font-size: 0.88rem; font-weight: 600;
  padding: 0.35rem 0.8rem;
  border: none; border-radius: 999px;
  background: var(--surface); color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.vf-chip:hover { background: var(--accent-soft); }
.vf-chip[aria-pressed="true"] { background: var(--accent); color: #fff; }
.vf-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vf-zahl { font-weight: 700; color: var(--accent-hover); margin-left: 0.15rem; }
.vf-chip[aria-pressed="true"] .vf-zahl { color: #fff; }   /* auf gruenem Grund weiss */