/* ══════════════════════════════════════════════════════════════
   Studien & Fachartikel — Bausteine „evidenz-legende" und
   „evidenz-karten". Neu für die Erwachsenenseite; im Kids-Projekt
   gibt es diese Seite nicht.
   Seitenfarbe: Studien #AB6D75 (--cat-* wird hier überschrieben,
   im PHP macht das fachrichtung_css_vars('studien')).
   ══════════════════════════════════════════════════════════════ */

:root{
  --cat-main:#AB6D75; --cat-dark:#7E4750; --cat-light:#F7EDEF;
  --cat-mid:#E0C0C8;  --cat-deeptext:#5A2F36;

  /* Gegenfarbe zum Altrosa: ein gedecktes Blaugrün, der Gegenüberliegende
     im Farbkreis (Rosa liegt bei etwa 350°, dieses Grün bei etwa 170°).
     Beide sind gleich stark entsättigt, deshalb streiten sie nicht.
     Aufgabenteilung: Rosa trägt die Studie (fremde Wissenschaft),
     Blaugrün trägt unsere eigene Stimme (Deutung, Team, Abschluss). */
  --gg-main:#4F7A72; --gg-dark:#33564F; --gg-light:#EAF2F0;
  --gg-mid:#C3DAD5;  --gg-band:#F1F7F5;
}

/* Hero dieser Seite in der Bereichsfarbe */
.hero{background:linear-gradient(135deg,#8E5259 0%,#5A2F36 70%)}
.hero-badge{background:rgba(90,47,54,.5);color:#F0DCDF;
  border-color:rgba(224,192,200,.45)}

/* ── Legende Evidenzgrad ─────────────────────────────────────── */
.ev-legende-band{background:var(--white);border-top:1px solid var(--cream-border);
  border-bottom:2px solid var(--gg-mid);padding:16px 0}
.ev-legende{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap}
.ev-legende-titel{font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gg-dark)}
.ev-le{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;
  color:var(--text-muted)}

/* ── Plakette Evidenzstufe ───────────────────────────────────── */
.ev-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:20px;
  white-space:nowrap;border:1px solid transparent}
/* Die Stufen bekommen eine eigene Skala, nicht die Bereichsfarbe:
   Metaanalyse ist die stärkste Evidenz und muss auch die stärkste
   Plakette sein. Sonst sehen alle vier gleich wichtig aus. */
.ev-meta-a{background:#7E4750;color:#fff;border-color:#7E4750}
.ev-review{background:#E0C0C8;color:#5A2F36;border-color:#C6A6AF}
.ev-rct{background:#F7EDEF;color:#7E4750;border-color:#E0C0C8}
.ev-studie{background:var(--white);color:var(--text-muted);border-color:var(--cream-border)}

/* Zwei Flächen im Wechsel statt vier gleiche: die Gruppen setzen sich
   voneinander ab, ohne dass eine wichtiger aussieht. */
.section-ggbg{background:var(--gg-band)}

/* ── Karten ──────────────────────────────────────────────────── */
.ev-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ev-karte{background:var(--white);border:1px solid var(--cream-border);
  border-left:5px solid var(--cat-main);border-radius:16px;padding:24px 26px;
  display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.ev-karte:hover{transform:translateY(-4px);
  box-shadow:0 16px 36px -12px var(--cat-main);border-color:var(--cat-mid)}
/* Einseitiger Rahmen und runde Ecken beissen sich nicht, solange die
   Radien klein bleiben — 16px auf 5px Rand liest sich noch als Karte. */
.ev-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:10px}
.ev-karte h3{font-size:17.5px;line-height:1.25;color:var(--cat-deeptext)}
.ev-titel{font-size:13.5px;font-weight:600;color:var(--text-primary);
  line-height:1.5;margin-bottom:8px}
.ev-quelle{font-size:12.5px;color:var(--text-muted);line-height:1.55;
  margin-bottom:16px}

.ev-deutung{background:var(--gg-light);border-left:3px solid var(--gg-main);
  border-radius:0 12px 12px 0;padding:16px 18px;margin-bottom:18px}
.ev-deutung b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gg-dark);margin-bottom:8px}
.ev-deutung p{font-size:13.5px;color:#3E5B55;line-height:1.6}
.ev-autor{margin-top:10px;font-size:12px;color:var(--text-muted)}
.ev-autor a{font-weight:700;color:var(--gg-dark);
  border-bottom:1px solid var(--gg-mid)}
.ev-autor a:hover{color:var(--gold-dark);border-color:var(--gold-main)}

/* Der Verweis sitzt unten, auch wenn die Karten unterschiedlich
   hoch werden — sonst wandert er je Karte auf eine andere Höhe. */
.ev-link{margin-top:auto;align-self:flex-start;display:inline-flex;
  align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--cat-dark);
  border-bottom:2px solid var(--gold-main);padding-bottom:2px;
  transition:gap .18s,color .18s}
.ev-link:hover{gap:11px;color:var(--gold-dark)}

@media(max-width:900px){ .ev-liste{grid-template-columns:1fr} }
@media(max-width:560px){
  .ev-karte{padding:20px}
  .ev-kopf{flex-direction:column;gap:8px}
}

/* ── Abschluss der Seite ─────────────────────────────────────── */
/* Das Band am Seitenende trug denselben Ton wie die Fusszeile und
   verschmolz mit ihr. Hier in der Gegenfarbe: es schliesst die Seite
   ab und die Fusszeile beginnt sichtbar neu. */
.cta-band{background:#33564F!important}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.78)}
.cta-band .btn-outline-light{border-color:rgba(255,255,255,.4)}
.cta-sub{color:rgba(255,255,255,.5)}

/* ══════════════════════════════════════════════════════════════
   Filterleiste, Jahr, Verknüpfungen — zweite Runde
   ══════════════════════════════════════════════════════════════ */

/* ── Filterband ──────────────────────────────────────────────── */
.ev-filter-band{background:var(--white);border-top:1px solid var(--cream-border);
  border-bottom:2px solid var(--gg-mid);padding:20px 0}
.ev-filter-zeile{display:grid;grid-template-columns:110px 1fr;gap:14px;
  align-items:baseline;margin-bottom:10px}
.ev-filter-titel{font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gg-dark);padding-top:9px}
.ev-filter-chips{display:flex;flex-wrap:wrap;gap:7px}
/* .chip kommt aus site.css; hier nur die aktive Fassung in der
   Bereichsfarbe statt im Kids-Grün. */
.ev-filter-chips .chip{min-height:34px;padding:6px 13px;font-size:12.5px}
.ev-filter-chips .chip:hover{border-color:var(--cat-mid);color:var(--cat-dark)}
.ev-filter-chips .chip.aktiv{background:var(--cat-dark);border-color:var(--cat-dark);
  color:#fff}

.ev-filter-fuss{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--cream-border)}
.ev-treffer{font-size:13px;color:var(--text-mid)}
.ev-treffer b{font-family:'Playfair Display',serif;font-size:18px;
  color:var(--cat-dark)}
.ev-zuruecksetzen{background:none;border:none;font-family:inherit;font-size:12.5px;
  font-weight:700;color:var(--gg-dark);cursor:pointer;padding:0;
  border-bottom:1px solid var(--gg-mid)}
.ev-zuruecksetzen:hover{color:var(--gold-dark);border-color:var(--gold-main)}
.ev-legende-hinweis{margin-left:auto;font-size:11.5px;color:var(--text-muted);
  max-width:520px;line-height:1.5}
.ev-legende-hinweis b{color:var(--cat-dark);font-weight:700}

/* ── Anzahl je Gruppe ────────────────────────────────────────── */
.ev-anzahl{font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--text-muted);margin-top:10px!important}
.ev-anzahl .ev-gruppe-zahl{color:var(--cat-dark);font-weight:700}

/* ── Jahr neben der Plakette ─────────────────────────────────── */
/* Das Jahr stand bisher mitten in der Quellenzeile. Es ist aber das
   Erste, was jemand wissen will — eine Cochrane-Arbeit von 2024 wiegt
   anders als eine von 2012. Deshalb nach oben, neben den Evidenzgrad. */
.ev-stufe{display:flex;align-items:center;gap:9px;flex-shrink:0}
.ev-jahr{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;
  color:var(--cat-main);line-height:1}

/* ── Verknüpfungen ───────────────────────────────────────────── */
/* Diese Verweise sind der eigentliche Nutzen der Seite: von der Arbeit
   zur Therapie, zum Produkt, zur Diagnose. Sie stehen unter der Deutung,
   nicht im Kopf — im Kopf würden sie mit dem Titel um Aufmerksamkeit
   streiten. */
.ev-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.ev-chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:20px;border:1px solid;transition:all .16s;
  white-space:nowrap}
.ev-chip:hover{transform:translateY(-1px)}
.ev-chip-fach{background:#F7EDEF;border-color:#E0C0C8;color:#7E4750}
.ev-chip-fach:hover{background:#E0C0C8}
.ev-chip-diag{background:var(--white);border-color:var(--cream-border);
  color:var(--text-mid)}
.ev-chip-diag:hover{border-color:var(--cat-main);color:var(--cat-dark)}
.ev-chip-prod{background:#FDF1E9;border-color:#F8D9C3;color:#8A3F10}
.ev-chip-prod:hover{background:#F8D9C3}
.ev-chip-ger{background:var(--gg-light);border-color:var(--gg-mid);
  color:var(--gg-dark)}
.ev-chip-ger:hover{background:var(--gg-mid)}

/* ── Zustand: nichts gefunden ────────────────────────────────── */
.ev-karte[hidden]{display:none}
.ev-leer{font-size:14px;color:var(--text-muted);font-style:italic;
  padding:8px 0}
.ev-gruppe[hidden]{display:none}

@media(max-width:700px){
  .ev-filter-zeile{grid-template-columns:1fr;gap:6px}
  .ev-filter-titel{padding-top:0}
  .ev-legende-hinweis{margin-left:0}
}