/* dhamma-suche.css — Seiten-Styles der Dhamma-Suche (Hygiene-Audit 2026-07-03:
   aus dem EJS-Template extrahiert; cachebar, editierbar ohne Template-Risiko). */

/* ---------- Farbleitsystem (Entwurf 12.07., Codex-Review, live 13.07.) ----------
   Acht Überlieferungs-Familien, jede mit kräftigem Ton (Text/Kante) und weichem Flächenton.
   Alle Töne sind auf das warme Elfenbein der Seite abgestimmt — gedeckt und erdig, keine
   Signalfarben.

   Gewählt ist Variante C (Codex-Empfehlung): FARBE IN DER ÜBERSICHT, RUHE BEIM LESEN.
   Die Familienblöcke unter „Was wird durchsucht?" tragen ihren Flächenton; die Trefferkarten
   bleiben hell und bekommen nur eine farbige Kante plus gefärbte Metadaten. Grund: langer
   Quelltext auf getönter Fläche konkurriert beim Lesen dauernd mit dem Text — Farbe gehört an
   Kante, Metadaten und Übersicht, nicht unter mehrere lange Zitate.

   Kontrast (Codex-Korrektur 12.07.): die ersten Entwurfstöne fielen als NORMALER TEXT unter
   WCAG AA (3,70–4,26:1) — Korpus-Badges sind nur 0,78rem groß, für sie gilt 4,5:1, nicht 3:1.
   Die Werte unten bestehen in allen sechs Lagen (eigene weiche Fläche · --surface · --bg ·
   weiß-auf-Farbe · und die beiden halbtransparenten Flächen). Schwächste Kombination 4,89:1.
   Wer diese Farben ändert, prüft alle sechs Lagen nach — sonst kippt die Lesbarkeit. */
:root {
  --f-pali:      #7e5e0b;  --f-pali-soft:      #f3e7c8;   /* min 4,89 */
  --f-tibet:     #8e3b46;  --f-tibet-soft:     #f5e0e0;   /* min 5,80 */
  --f-sanskrit:  #9c4318;  --f-sanskrit-soft:  #f8e2d0;   /* min 5,20 */
  --f-china:     #376c52;  --f-china-soft:     #e1efe6;   /* min 5,16 */
  --f-veden:     #5d6b23;  --f-veden-soft:     #edf0d6;   /* min 5,02 */
  --f-darshana:  #445d8c;  --f-darshana-soft:  #e2e9f4;   /* min 5,39 */
  --f-hindu:     #8c4a78;  --f-hindu-soft:     #f4e2ee;   /* min 5,04 */
  --f-wege:      #286c72;  --f-wege-soft:      #dcedee;   /* min 5,00 */
}
/* Jedes Element mit data-fam erbt die Familienfarben als lokale Variablen. */
[data-fam="pali"]     { --fam: var(--f-pali);     --fam-soft: var(--f-pali-soft); }
[data-fam="tibet"]    { --fam: var(--f-tibet);    --fam-soft: var(--f-tibet-soft); }
[data-fam="sanskrit"] { --fam: var(--f-sanskrit); --fam-soft: var(--f-sanskrit-soft); }
[data-fam="china"]    { --fam: var(--f-china);    --fam-soft: var(--f-china-soft); }
[data-fam="veden"]    { --fam: var(--f-veden);    --fam-soft: var(--f-veden-soft); }
[data-fam="darshana"] { --fam: var(--f-darshana); --fam-soft: var(--f-darshana-soft); }
[data-fam="hindu"]    { --fam: var(--f-hindu);    --fam-soft: var(--f-hindu-soft); }
[data-fam="wege"]     { --fam: var(--f-wege);     --fam-soft: var(--f-wege-soft); }
  /* Verdichtung 2026-07-03: breitere Nutzfläche + zweispaltiges Layout (Ergebnis | Info) */
  /* main.content ist global auf 1200px gedeckelt — dieser <style> existiert nur auf
     dieser Seite, darum darf er den Rahmen hier weiten. */
  main.content { max-width: 1320px; }
  .ds-wrap { max-width: 100%; padding: 0; }
  .ds-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.2rem; align-items: start; }
  .ds-haupt, .ds-seite { min-width: 0; }
  .ds-seite { font-size: 0.92rem; border-left: 1px solid var(--line); padding-left: 1.4rem; }
  .ds-seite .ds-hinweis { margin: 0 0 0.6rem; }
  .ds-seite .such-zaehler { margin: 0 0 0.9rem; }
  .ds-seite .ds-scope { font-size: 0.85rem; margin: 1.1rem 0 0; }
  @media (max-width: 980px) {
    .ds-layout { grid-template-columns: 1fr; gap: 1rem; }
    .ds-seite { border-left: 0; padding-left: 0; }
    .ds-wrap { padding: 0 1rem; }
    .ds-korpora-raster { grid-template-columns: 1fr; }
    details.ds-korpora { overflow-x: auto; }
  }
  /* ---------- Einstieg: Claim + aufklappbare Hilfe (13.07.) ---------- */
  .ds-claim { font-family: var(--read); font-size: 1.08rem; color: var(--ink-soft);
    max-width: 720px; margin: 0 0 1rem; }
  .ds-claim em { color: var(--ink); font-style: italic; }
  /* Drei eigene Aufklapper (Owner 14.07.) statt eines mit drei Blöcken darin: nebeneinander auf
     dem Desktop, gestapelt auf dem Handy. Zu bleiben sie so oder so, bis jemand klickt — damit
     kostet die Leiste geschlossen nur drei Zeilen und drängt die Suche nicht unter die Falz. */
  .ds-hilfe-leiste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem;
    margin: 0 0 1.2rem; align-items: start; }
  /* Mobil zählt jede Zeile über dem Suchfeld. Gemessen auf 360×640 (kleines Android) lag die
     Suche sonst UNTER der Falz — genau der Fehler, dessentwegen die Leiste am 13.07. überhaupt
     zugeklappt wurde. Claim und Aufklapper werden hier darum enger gesetzt, nicht gekürzt. */
  @media (max-width: 900px) {
    .ds-hilfe-leiste { grid-template-columns: 1fr; gap: 0.35rem; margin-bottom: 0.8rem; }
    .ds-hilfe > summary { padding: 0.45rem 0.85rem; font-size: 0.85rem; }
    .ds-claim { font-size: 0.9rem; line-height: 1.4; margin-bottom: 0.7rem; }
    /* Der Untertitel im Banner sagt mobil fast dasselbe wie der Claim direkt darunter — zwei
       Zeilen für eine Aussage, und die Suche rutscht dafür unter die Falz. Auf dem Handy
       trägt der Claim die Aussage allein. Wirkt nur hier: dieses Stylesheet lädt ausschliesslich
       die Dhamma-Suche, /suche behält seinen Untertitel. */
    .page-banner.schmal p { display: none; }
  }
  .ds-hilfe { margin: 0; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); max-width: 100%; }
  .ds-hilfe > summary { cursor: pointer; list-style: none; padding: 0.7rem 1.1rem;
    font: 600 0.92rem var(--sans); color: var(--accent-deep);
    display: flex; gap: 0.45rem; align-items: baseline; }
  .ds-hilfe > summary::-webkit-details-marker { display: none; }
  .ds-hilfe > summary::before { content: "▸"; flex: 0 0 auto; }
  .ds-hilfe[open] > summary::before { content: "▾"; }
  .ds-hilfe[open] > summary { border-bottom: 1px solid var(--line); }
  .ds-hilfe > summary .sym { flex: 0 0 auto; }
  .ds-erklaer { padding: 0.9rem 1.1rem; }
  .ds-erklaer p, .ds-erklaer li { font-size: 0.86rem; color: var(--ink-soft);
    margin: 0; line-height: 1.5; }
  .ds-erklaer ul { margin: 0; padding-left: 1.1rem; }
  .ds-erklaer li { margin-bottom: 0.25rem; }
  .ds-erklaer li strong, .ds-erklaer em { color: var(--ink); }

  /* Farbschlüssel — der Schlüssel zum Leitsystem. Ohne ihn wäre die Farbe ein Code ohne Legende. */
  .ds-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center;
    font: 0.8rem var(--sans); color: var(--muted); margin: 0 0 1rem; }
  .ds-legende .fam { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink-soft); }
  .ds-legende .fam::before { content: ''; width: 0.7rem; height: 0.7rem; border-radius: 3px;
    background: var(--fam); flex: 0 0 auto; }

  .ds-suchzeile { display: flex; gap: 0.6rem; max-width: 760px; margin: 0 0 0.9rem; }
  .ds-suchzeile input { flex: 1; min-width: 0; padding: 0.7rem 1rem; border: 1px solid var(--line);
    border-radius: 10px; font: 1rem var(--sans); background: #fff; }
  /* Kontrast (Palmblatt-Palette 18.07.): der Knopftext ist 0,95rem/600 und zählt NICHT als
     „großer Text", also gelten 4,5:1. Weiß auf --accent-deep misst 7,69:1 —
     tests/kontrast.test.js rechnet die deklarierten Ausdrücke im Browser nach. */
  .ds-suchzeile button { padding: 0.7rem 1.4rem; border: 0; border-radius: 10px;
    background: var(--accent-deep); color: #fff; font: 600 0.95rem var(--sans); cursor: pointer; }
  .ds-suchzeile button:hover { background: color-mix(in oklch, var(--accent-deep) 85%, var(--ink)); }
  .ds-hinweis { font-size: 0.82rem; color: var(--muted); margin: 0 0 0.9rem; }
  /* Beispiel- und Traditions-Chips (2026-07-02): Einstieg ohne Vorwissen + optionaler Traditions-Fokus. */
  .ds-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; max-width: 760px; margin: 0 0 0.9rem; }
  .ds-chips .lbl { font-size: 0.8rem; color: var(--muted); margin-right: 0.15rem; }
  .ds-bsp { font: 0.82rem var(--sans); padding: 0.25rem 0.7rem; border: 1px dashed var(--line);
    border-radius: 999px; background: transparent; color: var(--accent-deep); cursor: pointer; }
  .ds-bsp:hover { border-style: solid; }
  .ds-trad { font: 0.8rem var(--sans); padding: 0.25rem 0.7rem; border: 1px solid var(--line);
    border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; }
  .ds-trad.an { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
  /* Traditions-Chips in Familienfarbe — aber NUR die eindeutigen. Mahāyāna (Sanskrit+China),
     Vajrayāna (Tibet+China+Sanskrit) und Vedānta (Darśana+Veden) laufen über mehrere Familien
     und bleiben neutral: eine einzige Farbe wäre dort schlicht falsch (Codex-Befund). */
  .ds-trad[data-fam] { color: var(--fam); border-color: var(--fam); background: transparent; }
  .ds-trad[data-fam]::before { content: ''; display: inline-block; width: 0.55rem; height: 0.55rem;
    border-radius: 50%; background: var(--fam); margin-right: 0.4rem; }
  .ds-trad[data-fam].an { background: var(--fam); border-color: var(--fam); color: #fff; }
  .ds-trad[data-fam].an::before { background: #fff; }
  /* Der aktive Zustand zusätzlich per Häkchen — nicht allein über Farbe/Füllung (WCAG 1.4.1). */
  .ds-trad.an::after { content: ' ✓'; font-weight: 700; }
  /* Antwort-Karte: die quellengebundene deutsche Antwort, prominent über den Stellen. */
  .ds-antwort { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent-deep);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.2rem; margin: 0 0 1.1rem; }
  .ds-antwort .titel { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-deep); font-weight: 700; margin-bottom: 0.4rem; }
  .ds-antwort .text { font-family: var(--read); white-space: pre-wrap; }
  .ds-antwort .note { font-size: 0.75rem; color: var(--muted); font-style: italic; margin-top: 0.5rem; }
  /* Belege-Knopf (Owner 2026-07-12): Im Ruhezustand ist die Antwort reine Prosa — .ds-satz trägt
     bewusst KEINE eigene Gestaltung. Erst .belege-an macht die belegten Sätze anklickbar und
     zeigt die Werkzeile. Der flüchtige Leser sieht nur Text, der prüfende bekommt den Nachweis. */
  .ds-belege-btn { margin-top: 0.7rem; font: 0.78rem var(--sans); border: 1px solid var(--line);
    background: transparent; color: var(--muted); border-radius: 999px; padding: 0.2rem 0.85rem; cursor: pointer; }
  .ds-belege-btn:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
  .ds-antwort.belege-an .ds-satz[data-belege] { cursor: pointer; border-bottom: 1px dotted var(--accent-deep); }
  .ds-antwort.belege-an .ds-satz[data-belege]:hover { border-bottom-style: solid; }
  .ds-werke { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
    margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
  .ds-werke[hidden] { display: none; }
  .ds-werke-label { font: 0.72rem var(--sans); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--muted); margin-right: 0.25rem; }
  .ds-werk { font: 0.78rem var(--sans); border: none; background: transparent; color: var(--accent-deep);
    cursor: pointer; padding: 0.1rem 0.25rem; border-radius: 4px; }
  .ds-werk:hover { text-decoration: underline; }
  .ds-werk-trenn { color: var(--muted); }
  .ds-treffer.ds-hervor { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
  /* Konkordanz-Antwort (Welle 204): kuratierte Bedeutungen nebeneinander statt einer Deutung.
     Bewusst NICHT wie die KI-Karte gestaltet — dieser Text ist kuratiert, nicht generiert. */
  .ds-kontrast { background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--accent-deep); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 1rem 1.2rem; margin: 0 0 1.1rem; }
  .ds-kontrast .titel { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-deep); font-weight: 700; margin-bottom: 0.3rem; }
  .ds-kontrast .unter { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.9rem; }
  .ds-sinn { padding: 0.6rem 0; border-top: 1px solid var(--line); }
  .ds-sinn:first-of-type { border-top: none; padding-top: 0; }
  .ds-sinn .sinn-kopf { font-weight: 700; color: var(--ink); margin-bottom: 0.15rem; }
  .ds-sinn .sinn-gist { font-family: var(--read); color: var(--ink); }
  .ds-sinn .sinn-beleg { margin-top: 0.4rem; padding-left: 0.7rem;
    border-left: 2px solid var(--line); font-size: 0.88rem; }
  .ds-sinn .beleg-locus { display: block; font: 0.72rem var(--sans); color: var(--muted);
    letter-spacing: 0.03em; margin-bottom: 0.1rem; }
  .ds-sinn .beleg-text { font-family: var(--read); color: var(--ink-soft); }
  .ds-kontrast .note { font-size: 0.75rem; color: var(--muted); font-style: italic;
    margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
  .ds-feedback { margin-top: 0.6rem; font: 0.8rem var(--sans); color: var(--muted); }
  .ds-feedback button { margin-left: 0.45rem; padding: 0.15rem 0.7rem; border: 1px solid var(--line);
    border-radius: 999px; background: transparent; color: var(--accent-deep); cursor: pointer; font: inherit; }
  .ds-feedback button:hover { border-color: var(--accent-deep); }
  .ds-warnung { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
    border-radius: var(--radius); padding: 0.8rem 1.2rem; margin: 0 0 1.1rem; font-size: 0.9rem; color: var(--ink-soft); }
  /* Welle 231: typisierte Konzept-Relation über dem Vergleich. Der Rahmen unterscheidet
     die Typen sichtbar, damit „verwandt" nicht wie „gleich" gelesen wird. */
  .ds-relation { background: var(--surface); border: 1px solid var(--line);
    border-left: 4px solid var(--accent); border-radius: var(--radius);
    padding: 0.9rem 1.2rem; margin: 0 0 1rem; }
  .ds-relation .satz { margin: 0; font: 600 1.05rem var(--sans); color: var(--accent-deep); }
  .ds-relation .vorbehalt { margin: 0.3rem 0 0; font: italic 0.88rem var(--sans); color: var(--ink-soft); }
  .ds-relation .begruendung { margin: 0.55rem 0 0; font-family: var(--read); font-size: 0.95rem;
    color: var(--ink-soft); }
  .ds-relation .herkunft { margin: 0.6rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--line);
    font: 0.75rem var(--sans); color: var(--muted); }
  .ds-relation.ds-rel-kontrastierend { border-left-color: var(--accent-deep); }
  .ds-zitieren { margin-left: auto; font: 0.72rem var(--sans); border: 1px solid var(--line);
    background: transparent; color: var(--muted); border-radius: 6px; padding: 0.1rem 0.55rem; cursor: pointer; }
  .ds-zitieren:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
  /* Vergleichsmodus (2026-07-02): Spalten je Tradition + Kontraste. */
  /* Welle 165: Ein-Klick-Vergleich über die gefundenen Traditionen */
  .ds-vgl-auto { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0.9rem 0; }
  .ds-vgl-auto button { padding: 0.55rem 1.1rem; border: 1px solid var(--accent); border-radius: 999px;
    background: #fff; color: var(--accent-deep); font: 600 0.9rem var(--sans); cursor: pointer; }
  .ds-vgl-auto button:hover { background: var(--accent); color: #fff; }
  .ds-vgl-auto .vgl-namen { font: 0.82rem var(--sans); color: var(--muted); }
  .ds-vgl-opt { display: none; align-items: center; gap: 0.45rem; font: 0.85rem var(--sans);
    color: var(--accent-deep); margin: -0.4rem 0 0.9rem; }
  .ds-vgl-opt.sichtbar { display: flex; }
  /* Codex-Produktreview R1 (Befund 4): `minmax(330px, 1fr)` setzt einen HARTEN Boden. Ist der
     Container schmaler als 330px, schrumpft die Spur nicht — sie läuft heraus. Auf 360px
     (kleines Android) blieben nach den Rändern 328px Container, die Spaltenkante stand bei 370px:
     10px draussen, von `body { overflow-x: hidden }` nur weggeschnitten statt verhindert.
     `min(330px, 100%)` deckelt den Boden an der Containerbreite — damit kann keine Fensterbreite
     die Spur mehr sprengen. Auf dem Desktop (Container >= 330px) ist die Regel unverändert. */
  .ds-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 1.1rem; align-items: start; }
  /* Handy: eine Spalte, ausdrücklich mit minmax(0, 1fr) — die 0 ist das Gegenteil des harten
     330px-Bodens. min-width: 0 auf den Grid-Kindern, weil ein Grid-Item sonst nicht unter seine
     min-content-Breite schrumpfen darf; ein langes Kompositum wäre genau diese Sperre. */
  @media (max-width: 700px) {
    .ds-spalten { grid-template-columns: minmax(0, 1fr); }
    .ds-spalte, .ds-spalten .ds-treffer { min-width: 0; }
  }
  /* Lange Komposita (Nāmarūpaparicchedañāṇa…) tragen keine Umbruchstelle: gemessen 693px Text in
     einem 293px breiten Kasten. `overflow-wrap: anywhere` bricht sie notfalls im Wort — und geht
     (anders als `break-word`) schon in die min-content-Breite ein, sodass das Grid-Item wirklich
     schmaler werden darf. Umbrechen, nicht abschneiden. */
  .ds-treffer .inhalt, .ds-treffer .translit, .ds-treffer .ds-de, .ds-treffer .ds-erl,
  .ds-spalte .spalten-syn, .ds-antwort .text, .ds-kontrast { overflow-wrap: anywhere; }
  .ds-spalte h3 { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--accent-deep);
    border-bottom: 2px solid var(--line); padding-bottom: 0.3rem; }
  .ds-spalte .spalten-syn { font-family: var(--read); font-size: 0.95rem; background: var(--surface);
    border-left: 3px solid var(--accent-deep); border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.6rem 0.9rem; margin: 0 0 0.8rem; white-space: pre-wrap; }
  .ds-kontrast { border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.6rem 0.9rem; margin: 0 0 0.6rem; font-size: 0.92rem; }
  .ds-kontrast .paar { font-weight: 700; color: var(--accent-deep); margin-right: 0.4rem; }
  .ds-treffer .meta .nr { font-weight: 700; color: var(--accent-deep); }
  .ds-status { color: var(--muted); padding: 1rem 0; }
  /* Lade-Anzeige: Spinner + Meldung, während die Suche (mit KI-Übersetzung/-Erläuterung) läuft. */
  .ds-loading { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.3rem 0; color: var(--muted); }
  .ds-spinner { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; margin-top: 0.15rem;
    border: 3px solid var(--line); border-top-color: var(--accent-deep);
    border-radius: 50%; animation: ds-spin 0.8s linear infinite; }
  @keyframes ds-spin { to { transform: rotate(360deg); } }
  .ds-loading .ds-load-bar { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 0.6rem; }
  .ds-loading .ds-load-bar::after { content: ''; display: block; width: 40%; height: 100%;
    background: var(--accent-deep); border-radius: 3px; animation: ds-slide 1.3s ease-in-out infinite; }
  @keyframes ds-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
  .ds-suchzeile button:disabled { opacity: 0.6; cursor: progress; }
  /* Pro-Stelle-Platzhalter, während Phase 2 (KI-Übersetzung/-Erläuterung) nachlädt. */
  .ds-treffer .ds-ki-laden { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted);
    font-size: 0.85rem; font-style: italic; border-top: 1px dashed var(--line); padding-top: 0.6rem; margin-top: 0.7rem; }
  .ds-erl-btn { margin-top: 0.55rem; font: 0.78rem var(--sans); border: 1px dashed var(--line);
    background: transparent; color: var(--muted); border-radius: 999px; padding: 0.2rem 0.75rem; cursor: pointer; }
  .ds-erl-btn:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
  /* Signal je Stelle (Engine-Welle 226 / H2): leise am Fuß der Karte — es soll da sein, wenn
     man es sucht, und beim Lesen nicht mit den Quellstellen um Aufmerksamkeit ringen. */
  .ds-signal { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px dashed var(--line);
    font: 0.76rem var(--sans); color: var(--muted); display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
  .ds-signal button { font: inherit; border: 1px solid var(--line); background: transparent;
    color: var(--muted); border-radius: 999px; padding: 0.1rem 0.65rem; cursor: pointer; }
  .ds-signal button:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
  .ds-signal .ds-signal-frage { margin-right: 0.15rem; }
  .ds-spinner-mini { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; border: 2px solid var(--line);
    border-top-color: var(--accent-deep); border-radius: 50%; animation: ds-spin 0.8s linear infinite; }
  .ds-treffer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: 0.75rem 1rem; margin: 0 0 0.7rem; }
  .ds-treffer .meta { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: baseline;
    font-size: 0.78rem; color: var(--muted); margin-bottom: 0.45rem; }
  .ds-treffer .meta .korpus { font-weight: 600; color: var(--accent-deep); }
  /* Variante C: die Trefferkarte bleibt hell (Lesefläche), Farbe nur an Kante + Metadaten. */
  .ds-treffer[data-fam] { border-left: 4px solid var(--fam); }
  /* Der Familienname steht AUSGESCHRIEBEN — die Farbe beschleunigt nur, sie trägt die
     Information nicht allein (WCAG 1.4.1: bei Deuteranopie kollabieren Pāli und Sanskrit fast). */
  .ds-treffer .meta .familie { color: var(--fam); font-weight: 700; }
  .ds-treffer .meta .familie::before { content: ''; display: inline-block; width: 0.5rem;
    height: 0.5rem; border-radius: 2px; background: var(--fam); margin-right: 0.35rem; }
  .ds-treffer[data-fam] .meta .korpus { color: var(--fam); background: var(--fam-soft);
    border-radius: 999px; padding: 0.08rem 0.6rem; }
  /* Sprache ausgeschrieben: die Farbe zeigt die FAMILIE, nicht die Sprache — beides zu
     vermischen wäre fachlich falsch (Codex). Darum steht die Sprache als eigener Chip da. */
  .ds-treffer[data-fam] .meta .sprache { border: 1px solid var(--fam); color: var(--fam);
    border-radius: 999px; padding: 0.05rem 0.55rem; }
  .ds-treffer:not([data-fam]) .meta .sprache { border: 1px solid var(--line); color: var(--muted);
    border-radius: 999px; padding: 0.05rem 0.55rem; }
  /* Unbekannter Korpus (die Engine liefert etwas Neues): neutral, aber nicht unsichtbar. */
  .ds-treffer:not([data-fam]) { border-left: 4px solid var(--line); }
  .ds-treffer:not([data-fam]) .meta .korpus { color: var(--muted); background: var(--bg-soft);
    border-radius: 999px; padding: 0.08rem 0.6rem; }

  /* Fundverteilung — welche Familien unter den ANGEZEIGTEN Stellen vertreten sind.
     Bewusst nicht „Gefunden in:" (das suggerierte Vollständigkeit, gezählt werden aber nur
     die bis zu 8 gezeigten Treffer). */
  .ds-verteilung { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
    font: 0.8rem var(--sans); margin: 0 0 1rem; }
  .ds-verteilung .lbl { color: var(--muted); margin-right: 0.2rem; }
  .ds-verteilung .v { display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--fam-soft); color: var(--fam); border-radius: 999px; padding: 0.15rem 0.65rem; }
  .ds-verteilung .v b { font-weight: 700; }
  .ds-treffer .meta .trad { border: 1px solid var(--line); border-radius: 999px; padding: 0.05rem 0.55rem; }
  .ds-treffer .meta .anker { background: var(--gold-soft); border-radius: 999px; padding: 0.05rem 0.55rem; color: var(--accent-deep); }
  .ds-treffer .meta .benachbart { border: 1px solid var(--line, #d8d2c4); border-radius: 999px; padding: 0.05rem 0.55rem; color: var(--ink-soft, #6b6558); font-style: italic; }
  /* Welle 267 Teil B: die Relevanz-Stufe steht an derselben Stelle wie der bisherige Chip
     „thematisch benachbart" — es IST derselbe Chip, nur mit drei statt einem Zustand.
     Bewusst zurückhaltend: „behandelt" ist keine Auszeichnung, sondern eine Auskunft. */
  .ds-treffer .meta .behandelt { border: 1px solid var(--accent-deep, #8a6d3b); border-radius: 999px;
    padding: 0.05rem 0.55rem; color: var(--accent-deep, #8a6d3b); }
  .ds-treffer .meta .beilaeufig { border: 1px solid var(--line, #d8d2c4); border-radius: 999px;
    padding: 0.05rem 0.55rem; color: var(--muted, #8b8577); }
  /* Die Zahlen unter der Stelle: der nachzählbare Beleg der Stufe, im Fussnoten-Ton. */
  .ds-treffer .ds-relevanz { font-size: 0.78rem; color: var(--muted); margin: 0.5rem 0 0;
    font-family: var(--sans); white-space: normal; }
  /* Welle 267 Teil B: der vollständige Abschnitt auf Klick — gleiche Optik wie das
     einklappbare Original darüber, damit die Seite nicht zwei Aufklapp-Sprachen spricht. */
  .ds-treffer details.ds-mehr { margin-top: 0.55rem; }
  .ds-treffer details.ds-mehr > summary { cursor: pointer; font-size: 0.8rem; color: var(--muted);
    font-family: var(--sans); list-style: none; }
  .ds-treffer details.ds-mehr > summary::before { content: "▸ "; color: var(--accent-deep); }
  .ds-treffer details.ds-mehr[open] > summary::before { content: "▾ "; }
  .ds-treffer details.ds-mehr .inhalt { font-size: 0.95em; margin-top: 0.45rem;
    border-left: 3px solid var(--line); padding-left: 0.7rem; }
  .ds-treffer .inhalt { font-family: var(--read); white-space: pre-wrap; }
  /* Welle 164: Original einklappbar unter der Quellenübersetzung */
  .ds-treffer details.ds-original { margin-top: 0.55rem; border-top: 1px dashed var(--line); padding-top: 0.5rem; }
  .ds-treffer details.ds-original > summary { cursor: pointer; font-size: 0.8rem; color: var(--muted);
    font-family: var(--sans); list-style: none; }
  .ds-treffer details.ds-original > summary::before { content: "▸ "; color: var(--accent-deep); }
  .ds-treffer details.ds-original[open] > summary::before { content: "▾ "; }
  .ds-treffer details.ds-original .inhalt { font-size: 0.92em; color: var(--ink-soft); margin-top: 0.4rem; }
  .ds-treffer .translit { font-size: 0.88em; color: var(--ink-soft); border-top: 1px dashed var(--line);
    margin-top: 0.5rem; padding-top: 0.5rem; white-space: pre-wrap; }
  .ds-treffer .ds-de { font-family: var(--read); border-top: 1px solid var(--line);
    margin-top: 0.6rem; padding-top: 0.55rem; white-space: pre-wrap; }
  .ds-treffer .ds-erl { font-size: 0.92em; color: var(--ink-soft); border-top: 1px dotted var(--line);
    margin-top: 0.5rem; padding-top: 0.5rem; white-space: pre-wrap; }
  /* Welle 247: maschinelle Lesefassung — sichtbar als Sekundärtext abgesetzt (eingerückt,
     eigener Rand), damit sie optisch nie mit der Quelle darüber verwechselt wird. */
  .ds-treffer .ds-lesefassung { font-family: var(--read); border-left: 3px solid var(--line);
    margin-top: 0.6rem; padding: 0.1rem 0 0.1rem 0.7rem; white-space: pre-wrap; }
  .ds-treffer .ds-lesefassung-hinweis { font-size: 0.78rem; color: var(--muted);
    margin: 0.35rem 0 0; white-space: normal; }
  /* Welle 253: die Absage bzw. der Verweis auf den ganzen deutschen Text. Bewusst leise
     (Fussnoten-Ton, kein Warnkasten) — es ist eine sachliche Auskunft, keine Störung. */
  .ds-treffer .ds-kein-deutsch { font-size: 0.82rem; color: var(--muted); font-style: italic;
    border-top: 1px dashed var(--line); margin: 0.6rem 0 0; padding-top: 0.5rem; }
  .ds-treffer .ds-kein-deutsch a { font-style: normal; color: var(--accent-deep); }
  .ds-treffer .ki-label { display: block; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.28rem; white-space: normal; }
  .ds-korpora h2 { margin-top: 2.6rem; }
  /* Variante C: die Übersicht ist der Ort der Farbe — jede Familie ein Block in ihrem Ton,
     zweispaltig, damit man die acht Familien auf einen Blick als Ganzes sieht. */
  .ds-korpora-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .ds-gruppe { background: var(--fam-soft); border-top: 4px solid var(--fam);
    border-radius: var(--radius); padding: 1rem 1.15rem; }
  .ds-gruppe h3 { font-size: 1.02rem; margin: 0 0 0.15rem; color: var(--fam); }
  .ds-gruppe .gruppen-text { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 0.55rem; }
  /* Korpus-Liste: Name + Zahl in der Kopfzeile, Beschreibung SICHTBAR darunter (kein
     title-Tooltip — auf Touch-Geräten gibt es kein Hover, die Erklärung wäre dort weg). */
  .ds-gruppe .korpora { margin: 0; }
  /* Die Korpus-Namen kommen aus der Engine und sind teils lang („Kangyur (84000 TEI)").
     Der Name darf umbrechen, die Abschnitts-Zahl bleibt rechts und ungebrochen. */
  .ds-gruppe .korpora dt { display: flex; gap: 0.5rem; align-items: baseline; margin-top: 0.5rem; }
  .ds-gruppe .korpora dt .k { font: 600 0.84rem var(--sans); color: var(--fam); flex: 1 1 auto; min-width: 0; }
  .ds-gruppe .korpora dt .n { font-size: 0.75rem; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
  .ds-gruppe .korpora dd { margin: 0.05rem 0 0; font-size: 0.8rem; color: var(--ink); line-height: 1.4; }
  .ds-scope { color: var(--ink-soft); margin: 1.4rem 0 1.6rem; }
  details.ds-korpora { margin-top: 2.25rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
  details.ds-korpora > summary { cursor: pointer; list-style: none; }
  details.ds-korpora > summary::-webkit-details-marker { display: none; }
  details.ds-korpora > summary::before { content: "▸"; color: var(--accent-deep); margin-right: 0.5rem; }
  details.ds-korpora[open] > summary::before { content: "▾"; }

/* Welle 173: Volltext-Link je tipitaka-Stelle */
.ds-treffer .meta .ds-ganz { margin-left: 0.3rem; font-size: 0.78rem; white-space: nowrap; }