/* M-Co Mail-Ablauf — gemeinsame Bühne von Mail-Check und Phishing-Check v2.
   Markup: site/snippets/mailflow.php · Verhalten: assets/js/mailflow.js.
   Nutzt nur die Farb- und Mass-Token aus main.css (:root) und legt keine eigenen Farben an,
   ausser den halbtransparenten Flächen der Zustände — dieselben Werte wie bei .ph-verdict. */

.mf-stage{margin-top:44px;overflow-x:clip}
.mf-grid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.mf-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}

.mf-col{background:var(--ink-2);border:1px solid rgba(160,200,87,.18);border-radius:var(--radius-l);padding:24px 26px;font-family:var(--font-mono);font-size:.85rem}
@media(max-width:560px){.mf-col{padding:20px 16px}}
.mf-head{font-family:var(--font-mono);font-weight:400;font-size:.76rem;letter-spacing:0;line-height:1.4;color:var(--txt-3);margin:0 0 18px}
.mf-empty{color:var(--txt-3);font-size:.82rem;line-height:1.6}

/* Ablauf links: eine senkrechte Linie verbindet die Punkte */
.mf-steps{list-style:none;margin:0;padding:0}
.mf-step{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;padding-bottom:20px}
.mf-step:last-child{padding-bottom:0}
.mf-step:not(:last-child)::before{content:"";position:absolute;left:8px;top:22px;bottom:2px;width:1px;background:var(--line-dark)}
.mf-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--txt-3);margin-top:2px;box-sizing:border-box;background:var(--ink-2);position:relative}
.mf-step-body b{display:block;font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:-.01em;color:var(--txt);line-height:1.35}
.mf-step-body p{margin:4px 0 0;color:var(--txt-2);font-size:.8rem;line-height:1.6}
.mf-step-body .mf-sum{color:var(--txt);word-break:break-word}
.mf-step-body .mf-sum:empty{display:none}
.mf-step.is-wartet .mf-step-body b{color:var(--txt-2)}
.mf-step.is-laeuft .mf-dot{border-color:var(--green-neon);border-right-color:transparent;animation:mfDreh .8s linear infinite}
.mf-step.is-ok .mf-dot{border-color:var(--green-neon);background:var(--green-neon)}
.mf-step.is-warn .mf-dot{border-color:var(--amber);background:var(--amber)}
.mf-step.is-bad .mf-dot{border-color:var(--red-dark);background:var(--red-dark)}
.mf-step.is-info .mf-dot{border-color:var(--txt-2)}
.mf-step.is-ok .mf-sum{color:var(--green-neon)}
.mf-step.is-warn .mf-sum{color:var(--amber)}
.mf-step.is-bad .mf-sum{color:var(--red-dark)}
.mf-step:not(.is-wartet){animation:mfAuf .32s var(--ease) both}

/* Ergebnisse rechts: Karten fliegen von rechts ein */
.mf-cards{display:grid;gap:14px}
.mf-card{background:rgba(240,236,222,.03);border:1px solid var(--line-dark);border-left:3px solid var(--txt-3);border-radius:var(--radius-l);padding:18px 20px;animation:mfEin .55s var(--ease) both}
.mf-card.is-ok{border-left-color:var(--green-neon)}
.mf-card.is-warn{border-left-color:var(--amber)}
.mf-card.is-bad{border-left-color:var(--red-dark)}
.mf-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mf-badge{font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:-.01em;color:var(--txt)}
.mf-res{font-size:.8rem;color:var(--txt-2)}
.mf-card.is-ok .mf-res{color:var(--green-neon)}
.mf-card.is-warn .mf-res{color:var(--amber)}
.mf-card.is-bad .mf-res{color:var(--red-dark)}
.mf-ico{display:inline-block;min-width:1.1em;text-align:center;font-weight:700}
.mf-text{margin:10px 0 0;color:var(--txt-2);font-size:.8rem;line-height:1.65}
.mf-rows{margin:12px 0 0;display:grid;gap:6px}
.mf-rows div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:12px}
@media(max-width:560px){.mf-rows div{grid-template-columns:minmax(0,1fr);gap:0}}
.mf-rows dt{color:var(--txt-3);font-size:.76rem}
.mf-rows dd{margin:0;color:var(--txt);font-size:.8rem;word-break:break-word}
.mf-hops{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.mf-hops li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;font-size:.78rem;color:var(--txt-2);word-break:break-word}
.mf-hops li.is-ein{color:var(--txt)}
.mf-hops em{font-style:normal;color:var(--green-neon)}
.mf-hop-nr{color:var(--txt-3)}
.mf-ip{color:var(--txt-3)}
.mf-findings{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.mf-findings li{display:grid;grid-template-columns:1.2em minmax(0,1fr);gap:8px}
.mf-findings b{font-family:var(--font-body);font-weight:700;color:var(--txt);font-size:.82rem}
.mf-findings p{margin:2px 0 0;color:var(--txt-2);font-size:.78rem;line-height:1.6}
.mf-findings .is-ok .mf-ico{color:var(--green-neon)}
.mf-findings .is-warn .mf-ico{color:var(--amber)}
.mf-findings .is-bad .mf-ico{color:var(--red-dark)}
.mf-findings .is-info .mf-ico{color:var(--txt-2)}
.mf-records{margin-top:12px}
.mf-records summary{cursor:pointer;font-size:.78rem;color:var(--txt-2);display:inline-flex;align-items:center;min-height:24px}
.mf-records summary:hover,.mf-records summary:focus-visible{color:var(--green-neon)}
.mf-record{margin:8px 0 0 calc(var(--tiefe,0) * 14px);font-size:.74rem}
.mf-record span{display:block;color:var(--txt-3)}
.mf-record code{display:block;color:var(--txt);word-break:break-all;white-space:pre-wrap}

/* Urteil oben rechts */
.mf-verdict{border-radius:var(--radius-l);padding:20px 22px;margin-bottom:14px;animation:mfEin .6s var(--ease) both}
.mf-verdict b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;margin-bottom:6px}
.mf-verdict p{margin:0;color:var(--txt);font-size:.82rem;line-height:1.65}
.mf-verdict .mf-quelle{display:block;margin-top:10px;font-size:.74rem;color:var(--txt-2)}
.mf-verdict.lvl1{background:rgba(160,200,87,.1);border:1px solid rgba(160,200,87,.45)}
.mf-verdict.lvl1 b{color:var(--green-neon)}
.mf-verdict.lvl2{background:rgba(224,166,63,.1);border:1px solid rgba(224,166,63,.5)}
.mf-verdict.lvl2 b{color:var(--amber)}
.mf-verdict.lvl3{background:rgba(255,138,128,.1);border:1px solid rgba(255,138,128,.5)}
.mf-verdict.lvl3 b{color:var(--red-dark)}
.mf-aktion{margin-top:14px}

@keyframes mfEin{from{opacity:0;transform:translateX(56px) rotate(1.2deg)}to{opacity:1;transform:none}}
@keyframes mfEinUnten{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes mfAuf{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mfDreh{to{transform:rotate(360deg)}}
/* Schmal: von unten statt von der Seite — ein seitlicher Einflug sähe dort aus wie ein Wischen. */
@media(max-width:899px){.mf-card,.mf-verdict{animation-name:mfEinUnten}}

/* Bewegung reduzieren: keine Animation, kein Drehen. mailflow.js lässt dann auch die
   Pausen weg — das Ergebnis steht sofort vollständig da. */
@media(prefers-reduced-motion:reduce){
  .mf-step,.mf-step:not(.is-wartet),.mf-card,.mf-verdict{animation:none}
  .mf-step.is-laeuft .mf-dot{animation:none;border-right-color:var(--green-neon);border-style:dotted}
}