/* ===========================================================
   PhiPaveOne für Institute (/institute) – ergänzt landing.css
   Nur Klassen mit Präfix inst-, damit andere Seiten unberührt bleiben.
   =========================================================== */

.inst-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center; }
.inst-benefits{ display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; list-style:none; font-size:.95rem; font-weight:600; color:var(--ink); }
.inst-benefits li{ display:flex; align-items:center; gap:.55em; }
.inst-benefits svg{ width:20px; height:20px; color:var(--sage); flex:none; }

.inst-illu{ margin:0; }
.inst-illu svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 16px 40px rgba(32,37,31,.08)); }
.inst-illu figcaption{ font-size:.8rem; color:var(--muted); text-align:center; margin-top:.8rem; }

.inst-cards{ display:grid; gap:20px; }
.inst-cards.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.inst-cards.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:980px; margin-inline:auto; }
.inst-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px); box-shadow:var(--shadow-sm);
}
.inst-card h3{ font-size:1.25rem; margin-bottom:.5rem; }
.inst-card p{ color:var(--muted); font-size:.98rem; line-height:1.6; }
.inst-card .ic, .inst-flow .ic, .inst-ki .ic{
  width:48px; height:48px; border-radius:13px; display:grid; place-items:center;
  background:var(--sage-tint); color:var(--sage-deep); margin-bottom:16px;
}
.inst-card .ic svg, .inst-flow .ic svg{ width:24px; height:24px; }

.inst-note{ text-align:center; color:var(--muted); font-size:.95rem; margin-top:1.6rem; }
.inst-note.left{ text-align:left; margin-top:1rem; font-size:.92rem; }

.inst-list{ list-style:none; display:grid; gap:.8rem; margin-top:1.6rem; }
.inst-list li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--ink); }
.inst-list svg{ width:20px; height:20px; color:var(--sage); flex:none; margin-top:.2rem; }

.inst-flow{ list-style:none; display:grid; gap:14px; counter-reset:flow; position:relative; }
.inst-flow li{
  position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm);
}
.inst-flow li .ic{ grid-row:span 2; margin:0; }
.inst-flow li strong{ font-family:var(--font-display); font-weight:500; font-size:1.2rem; }
.inst-flow li small{ color:var(--muted); font-size:.9rem; }
.inst-flow li + li::before{
  content:""; position:absolute; left:43px; top:-15px; width:2px; height:16px; background:var(--sage-soft);
}

.inst-ki{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,40px); align-items:start; max-width:920px; margin-inline:auto; }
.inst-ki .ic.big{ width:72px; height:72px; border-radius:20px; margin:0; }
.inst-ki .ic.big svg{ width:34px; height:34px; }

.inst-cta{ margin-top:clamp(32px,4vw,48px); text-align:center; display:grid; justify-items:center; gap:1.2rem; }
.inst-cta p{ color:var(--muted); font-size:1.05rem; max-width:56ch; }

@media (max-width:940px){
  .inst-hero-grid{ grid-template-columns:1fr; }
  .inst-illu{ max-width:520px; margin-inline:auto; }
  .inst-cards.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .inst-cards.cols-3, .inst-cards.cols-2{ grid-template-columns:1fr; }
  .inst-ki{ grid-template-columns:1fr; }
}