/* Entscheidungshilfe im Beitrag „FCI vs. Availability Groups, Teil 4“ (/wissen/sql-server-fci-vs-availability-groups/entscheidungshilfe/).
   Andockpunkt aus Prototypen/fci_grafiken.py: <div class="fev" data-fev></div>, Daten im Inline-JSON #fev-daten, Skript
   assets/js/fci-entscheidung.js, Präfix fev-. Farben und Schriften aus site.css; Orange = gewählt oder Enterprise-Pflicht,
   Blau = Standard-Weg, Grau = ausgeschlossen. Breite über Container-Abfragen auf der Abbildung (.fev-fig). */

.fev-fig{container-type:inline-size;container-name:fev}
.fev{--r:var(--radius,22px);--gut:#7fd1a8;--bedingt:#f5b841;--aus:#7a8b97;--rot:#ff7a5c;position:relative;
  background:radial-gradient(900px 420px at 70% 10%,rgba(11,74,113,.45),transparent 70%),#03131f;color:#d4e6f3;
  border-radius:var(--r);border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 70px rgba(5,28,44,.28);padding:18px 20px 16px;
  font-size:15px;line-height:1.5}
.fev:empty{min-height:2400px}
@container fev (min-width:760px){.fev:empty{min-height:1500px}}
.fev a{color:#9ccbea}
.fev a:hover{color:#fff}
.fev button{font:inherit}
.fev button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.fev-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fev-noscript{margin:0;font-size:.95rem;color:var(--ink-2)}

/* Zwei Spalten ab 760 px Containerbreite (die Textspalte ist etwa 820 px breit): Fragen links, Ergebnis rechts (haftend) */
.fev-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@container fev (min-width:760px){
  .fev-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .fev-ergebnis{position:sticky;top:92px}}

.fev-kopfzeile{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:12px}
.fev-h{margin:0;font:600 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7fa3bd}
.fev-stand{font-family:var(--mono);font-size:.78rem;color:#9fb7c8}
.fev-stand b{color:#fff;font-weight:600}

/* Fragen (Absätze als .fev p.…, weil .article p aus site.css sonst die Farbe überstimmt) */
.fev-fragen{display:flex;flex-direction:column;gap:14px}
.fev-frage{padding:14px 16px 12px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);transition:border-color .25s}
.fev-frage.ist-beantwortet{border-color:rgba(240,125,26,.45)}
.fev-frage-kopf{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.fev-nr{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 .78rem var(--mono);color:#fff;background:rgba(95,167,214,.3);border:1px solid rgba(95,167,214,.6);transition:background .25s,border-color .25s}
.fev-frage.ist-beantwortet .fev-nr{background:var(--orange);border-color:var(--orange)}
.fev p.fev-frage-text{margin:0;font-weight:600;color:#fff;font-size:1rem;line-height:1.4}
.fev p.fev-frage-hinweis{margin:4px 0 0;font-size:.86rem;color:#9fb7c8}
.fev-seg{display:flex;flex-wrap:wrap;gap:6px}
.fev-seg button{font-weight:550;font-size:.86rem;line-height:1.3;padding:8px 13px;min-height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:#c3d6e4;cursor:pointer;text-align:left;transition:background .25s,color .25s,border-color .25s}
.fev-seg button:hover{color:#fff;border-color:rgba(240,125,26,.6)}
.fev-seg button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.fev-seg button.fev-unbekannt{border-style:dashed}
.fev-seg button.fev-unbekannt[aria-pressed="true"]{background:rgba(245,184,65,.22);border-color:var(--bedingt);color:#fff}

/* Ergebnis */
.fev-ergebnis{display:flex;flex-direction:column;gap:12px}
.fev p.fev-leer{margin:0;padding:18px 16px;border-radius:16px;border:1px dashed rgba(255,255,255,.18);color:#9fb7c8;font-size:.95rem}
.fev-kand{border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);padding:14px 16px;transition:opacity .3s,border-color .3s}
.fev-kand.ist-aus{opacity:.62;border-style:dashed}
.fev-kand.ist-erster{border-color:rgba(240,125,26,.7);box-shadow:0 0 0 1px rgba(240,125,26,.25) inset}
.fev-kand-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:6px}
.fev-rang{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 .82rem var(--mono);background:rgba(255,255,255,.08);color:#fff}
.fev-kand.ist-erster .fev-rang{background:var(--orange)}
.fev-kand.ist-aus .fev-rang{background:transparent;border:1px dashed rgba(255,255,255,.3);color:#9fb7c8}
.fev-kand-name{margin:0;font-size:1.08rem;font-weight:650;color:#fff;font-family:var(--display,var(--text))}
.fev-label{margin-left:auto;font:600 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid currentColor}
.fev-label.gut{color:var(--gut)}.fev-label.bedingt{color:var(--bedingt)}.fev-label.eher-nicht{color:#b9cddb}.fev-label.aus{color:var(--aus)}.fev-label.offen{color:#9fb7c8;border-style:dashed}
.fev p.fev-kand-kurz{margin:0 0 8px;font-size:.9rem;color:#b9cddb}
.fev-liste{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.fev-liste li{position:relative;padding-left:20px;font-size:.9rem;line-height:1.45;color:#d4e6f3}
.fev-liste li::before{content:"";position:absolute;left:3px;top:.55em;width:8px;height:8px;border-radius:50%;background:currentColor}
.fev-liste.plus li::before{background:var(--gut)}
.fev-liste.minus li::before{background:var(--bedingt)}
.fev-liste.aus li::before{background:var(--rot)}
.fev-liste.hinweis li::before{background:#5fa7d6}
.fev-liste-h{display:block;margin-top:10px;font:600 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7fa3bd}
.fev-liste a{text-decoration:underline;text-decoration-color:rgba(156,203,234,.45);text-underline-offset:2px}

.fev-klaeren{border-radius:16px;border:1px solid rgba(245,184,65,.45);background:rgba(245,184,65,.07);padding:14px 16px}
.fev-klaeren .fev-h{color:var(--bedingt)}
.fev-klaeren ol{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:.9rem}
.fev-klaeren li::marker{color:var(--bedingt);font-family:var(--mono)}

.fev-aktionen{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fev-aktionen button{font-weight:600;font-size:.88rem;padding:10px 16px;min-height:40px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.fev-kopieren{border:0;background:var(--orange);color:#fff}
.fev-kopieren:hover{background:var(--orange-600,#d96a0b)}
.fev-kopieren:disabled{background:rgba(255,255,255,.1);color:#7fa3bd;cursor:default}
.fev-reset{border:1px solid rgba(255,255,255,.2);background:transparent;color:#c3d6e4}
.fev-reset:hover{color:#fff;border-color:#fff}
.fev p.fev-fuss{margin:0;font-size:.86rem;color:#9fb7c8}
.fev-fuss b{color:#fff}
.fev-kopie{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0}

@media (prefers-reduced-motion:reduce){.fev *{transition:none!important}}