/* Spam-Detektiv — Darstellung. Enthaelt keinen Stoff. */
:root{
  --papier:#F2F1EC; --flaeche:#FBFAF6; --tinte:#1A1D1B; --weich:#55605A; --linie:#C3C6BD;
  --akzent:#1F5D4C; --gut:#2C6E49; --warn:#8A4B1F; --gefahr:#A8322A; --markiert:#F6E3A1;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--papier:#141715;--flaeche:#1C201D;--tinte:#ECEFE9;--weich:#A5AFA8;--linie:#333A35;
        --akzent:#5FBFA1;--gut:#6FBF8F;--warn:#D98B4A;--gefahr:#E0685A;--markiert:#5A4A1C}
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);font:16px/1.6 var(--text)}
.rand{max-width:52rem;margin:0 auto;padding:0 1rem}
header{border-bottom:1px solid var(--linie);background:var(--flaeche);padding:.9rem 0}
.kopfzeile{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:baseline}
.wortmarke{font-family:var(--mono);letter-spacing:.14em;font-size:.95rem;border-bottom:2px solid var(--akzent);padding-bottom:2px}
.mono{font-family:var(--mono);font-size:.76rem;color:var(--weich)}
h1{font-size:1.6rem;margin:1.4rem 0 .3rem}
h2{font-size:1.1rem;margin:1rem 0 .4rem}
.lead{color:var(--weich);margin:.2rem 0 1rem}
.hinweis{background:var(--flaeche);border-left:4px solid var(--akzent);padding:.7rem 1rem;margin:1rem 0}
.hinweis p{margin:.2rem 0}
button{font:inherit;font-size:.95rem;cursor:pointer;padding:.5rem 1rem;border-radius:6px;border:1px solid var(--akzent);background:var(--akzent);color:var(--papier)}
button.zweit{background:transparent;color:var(--akzent)}
button:disabled{opacity:.45;cursor:default}
.knopfzeile{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}
.stand{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin:.6rem 0}
/* Nachricht */
.nachricht{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;overflow:hidden;margin:.6rem 0}
.nachricht .kopf{padding:.7rem 1rem;border-bottom:1px solid var(--linie);display:grid;gap:.15rem}
.nachricht .kanal{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--weich)}
.nachricht .von{font-weight:600;overflow-wrap:anywhere}
.nachricht .betreff{overflow-wrap:anywhere}
.nachricht .inhalt{padding:.9rem 1rem;overflow-wrap:anywhere}
.nachricht.kanal-sms .inhalt,.nachricht.kanal-messenger .inhalt,.nachricht.kanal-spiel-chat .inhalt{background:linear-gradient(var(--flaeche),var(--flaeche))}
.stelle{cursor:pointer;border-radius:4px;padding:0 .1rem;text-decoration:underline dotted var(--linie);text-underline-offset:3px}
.stelle:hover,.stelle:focus{outline:2px solid var(--akzent);outline-offset:1px}
.stelle.gefunden{background:var(--markiert);text-decoration:none}
.stelle.daneben{animation:wackeln .3s}
@keyframes wackeln{0%,100%{transform:none}33%{transform:translateX(-2px)}66%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.stelle.daneben{animation:none}}
.linkzeile{padding:0 1rem 1rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.linkknopf{font:inherit;background:none;border:none;padding:0;color:var(--akzent);text-decoration:underline;cursor:pointer}
.linkziel{font-family:var(--mono);font-size:.8rem;overflow-wrap:anywhere}
.linkziel.gefunden{background:var(--markiert);padding:0 .3rem;border-radius:4px}
/* Rueckmeldung */
.rueck{border-radius:10px;padding:.8rem 1rem;margin:.8rem 0;border:1px solid var(--linie);background:var(--flaeche)}
.rueck.gut{border-left:5px solid var(--gut)}
.rueck.nochnicht{border-left:5px solid var(--gefahr)}
.rueck ul{margin:.4rem 0 .2rem;padding-left:1.2rem}
.rueck li{margin:.2rem 0}
.meldung{min-height:1.6em;font-size:.92rem;color:var(--weich)}
.ende{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:1rem}
.ende .zahl{font-size:2rem;font-weight:700;color:var(--akzent)}
footer{margin:2rem 0 1.5rem}