/* Gemeinsame Stile der Forschungsseiten (Übersicht + Unterseiten) */

.fo{max-width:840px;margin:0 auto;padding:6px 22px 70px}
.fo .intro{text-align:center;margin-bottom:8px}
.fo h1{font-size:clamp(28px,5vw,44px);font-weight:900;color:var(--navy);letter-spacing:-.5px;margin:8px 0 10px}
.fo .lead{max-width:620px;margin:0 auto;font-size:17px;line-height:1.6;font-weight:600;color:#3F5392}
.fo h2{font-size:clamp(21px,3.6vw,27px);font-weight:900;color:var(--navy);margin:44px 0 8px;letter-spacing:-.3px}
.fo p{font-size:16px;line-height:1.7;font-weight:500;color:#3F5392;margin:0 0 12px}
.fo strong{color:var(--navy);font-weight:800}
.fh3{font-size:16px;font-weight:900;color:var(--navy);margin:26px 0 10px;letter-spacing:-.2px}

/* ---------- Wegweiser-Karten auf der Übersicht ---------- */
.rnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:22px 0 8px}
.rcard{display:block;background:#fff;border:2px solid var(--line);border-radius:20px;padding:20px 20px 18px;transition:transform .18s,box-shadow .18s,border-color .18s}
.rcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(38,53,107,.10);border-color:#cfe0f3}
.rcard .ricon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;background:#EAF1FB}
.rcard .ricon svg{width:23px;height:23px}
.rcard .rt{font-size:17px;font-weight:900;color:var(--navy);line-height:1.25;margin-bottom:5px}
.rcard .rd{font-size:13.5px;font-weight:600;color:#5E73B0;line-height:1.5}
.rcard .rgo{display:inline-flex;align-items:center;gap:5px;margin-top:11px;font-size:13px;font-weight:800;color:var(--orange)}
.rcard .rgo svg{width:14px;height:14px}

/* ---------- Kernzahlen-Kacheln ---------- */
.kfigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:20px 0 6px}
.kfig{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:20px 18px 18px;display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s}
.kfig:hover{border-color:#cfe0f3;box-shadow:0 10px 24px rgba(38,53,107,.07)}
.kfig .kn{font-size:clamp(28px,4.6vw,36px);font-weight:900;color:var(--navy);line-height:1;letter-spacing:-1.2px;font-variant-numeric:tabular-nums}
.kfig .kn::after{content:"";display:block;width:26px;height:3px;border-radius:3px;background:var(--blue);margin-top:11px}
.kfig .kt{font-size:13.5px;font-weight:700;color:#5E73B0;line-height:1.5;margin-top:11px;flex:1}
.kfig .ks{align-self:flex-start;margin-top:14px;background:#F1F5FB;color:#5E73B0;border-radius:20px;padding:5px 12px;font-size:11.5px;font-weight:700;line-height:1.35}

/* ---------- Befund- und Praxisboxen ---------- */
.befund{background:#fff;border:1.5px solid var(--line);border-left:4px solid var(--blue);border-radius:16px;padding:16px 20px;margin:14px 0}
.befund .bl{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#74BEEC;margin-bottom:5px}
.befund p{margin:0;font-size:15.5px;line-height:1.65}
.befund p+p{margin-top:8px}

.prax{background:#EAF7F0;border-left:4px solid var(--grass);border-radius:0 16px 16px 0;padding:16px 20px;margin:16px 0}
.prax .pl{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#1d7a4f;margin-bottom:6px}
.prax .pl svg{width:15px;height:15px;flex:none}
.prax p,.prax li{font-size:15px;line-height:1.65;font-weight:600;color:#1d6e49;margin:0}
.prax ul{margin:0;padding-left:19px}
.prax li+li{margin-top:6px}

.qbox{background:#F4F7FC;border:1.5px solid var(--line);border-left:4px solid var(--blue);border-radius:16px;padding:18px 22px;margin:14px 0 22px}
.qbox .lab{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#74BEEC}
.qbox p{font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.55;margin:6px 0 0}

/* Ethikvotum-Auszeichnung */
.ethik{display:flex;gap:16px;align-items:flex-start;background:#fff;border:2px solid #bfe3d3;border-radius:20px;padding:20px 22px;margin:14px 0 18px;box-shadow:0 8px 22px rgba(31,163,121,.08)}
.ethik .esiegel{flex:none;width:52px;height:52px;border-radius:50%;background:#EAF7F0;display:flex;align-items:center;justify-content:center}
.ethik .esiegel svg{width:27px;height:27px}
.ethik .elabel{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#1FA379}
.ethik .etitel{font-size:18px;font-weight:900;color:var(--navy);margin:2px 0 6px;letter-spacing:-.2px}
.ethik p{font-size:14.5px;line-height:1.6;font-weight:600;color:#5E73B0;margin:0}
.ethik p strong{color:var(--navy);font-weight:800}
@media (max-width:520px){.ethik{flex-direction:column;gap:12px}}

.hinweis{background:#FBF0CC;border-radius:14px;padding:14px 18px;margin:16px 0;font-size:13.5px;font-weight:600;color:#6B5400;line-height:1.6}
.hinweis b{color:#5a4600;font-weight:800}

/* ---------- Abbildungen ---------- */
.figure{background:#fff;border:2px solid var(--line);border-radius:20px;padding:18px;margin:20px 0;text-align:center}
.figure img{width:100%;max-width:560px;height:auto;margin:0 auto}
.figure figcaption{font-size:12px;color:#8094BE;margin-top:10px;font-weight:600;line-height:1.55}
.figure svg{width:100%;height:auto;display:block;margin:0 auto}
.figure svg text{font-family:Nunito,sans-serif}
.chartlegend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:4px}
.chartlegend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#5E73B0}
.chartlegend i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none}

/* Balken wachsen beim Einscrollen */
.figure .bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.figure.in .bar{animation:bargrow .85s cubic-bezier(.2,.75,.3,1) forwards}
.figure .barh{transform-box:fill-box;transform-origin:0% 50%;transform:scaleX(0)}
.figure.in .barh{animation:bargrowh .8s cubic-bezier(.2,.75,.3,1) forwards}
.figure .vals text,.figure .lategroup{opacity:0}
.figure.in .vals text,.figure.in .lategroup{animation:chartfade .45s ease forwards;animation-delay:.85s}
@keyframes bargrow{to{transform:scaleY(1)}}
@keyframes bargrowh{to{transform:scaleX(1)}}
@keyframes chartfade{to{opacity:1}}

/* Linien zeichnen sich */
.figure .drawline{stroke-dasharray:1000;stroke-dashoffset:1000}
.figure.in .drawline{animation:draw 1.6s ease forwards}
.figure.in .drawline.d2{animation-delay:.35s}
.figure .dot{opacity:0}
.figure.in .dot{animation:chartfade .4s ease forwards;animation-delay:1.5s}
@keyframes draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .figure .bar{transform:none}
  .figure .barh{transform:none}
  .figure .vals text,.figure .lategroup,.figure .dot{opacity:1}
  .figure .drawline{stroke-dashoffset:0}
  .figure.in .bar,.figure.in .barh,.figure.in .vals text,
  .figure.in .lategroup,.figure.in .drawline,.figure.in .dot{animation:none}
}

/* Zwei-Panel-Abbildung */
.abb1 .twopanel{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:flex-start}
.abb1 .panel{flex:1 1 250px;max-width:330px}
.abb1 .ptitle{font-size:15px;font-weight:900;color:var(--navy);margin-bottom:1px;line-height:1.3}
.abb1 .psub{font-size:12px;font-weight:700;color:#8094BE;margin-bottom:6px;line-height:1.35}
.abb1 .panel > svg{width:100%;height:auto;display:block}
.abb1 .pcap{font-size:12px;font-weight:600;color:#5E73B0;margin-top:2px}
.abb1 .pcap b{color:var(--navy);font-weight:800}

/* ---------- Literaturlisten ---------- */
.lit{background:#fff;border:2px solid var(--line);border-radius:20px;padding:10px 20px;margin:14px 0}
.lit p{font-size:13.5px;line-height:1.55;color:#3F5392;font-weight:500;padding:11px 0;margin:0;border-bottom:1px dashed #E3EAF5}
.lit p:last-child{border-bottom:none}
.lit .note{font-size:12px;color:#8094BE;font-style:italic}

/* ---------- Zurück-Leiste auf Unterseiten ---------- */
.backbar{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:30px;padding:9px 18px 9px 14px;margin-bottom:4px;transition:border-color .18s,transform .18s}
.backbar:hover{border-color:#cfe0f3;transform:translateX(-2px)}
.backbar svg{width:15px;height:15px}

/* Weiterlesen-Leiste am Seitenende */
.weiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:16px 0 0}
.weiter a{display:block;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;transition:border-color .18s,transform .18s}
.weiter a:hover{border-color:#cfe0f3;transform:translateY(-2px)}
.weiter .wl{font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#74BEEC}
.weiter .wt{font-size:15px;font-weight:800;color:var(--navy);margin-top:3px;line-height:1.3}