/* Handzeichen – gemeinsames Layout (Handy, Folie, Leitung). Farben angelehnt an die Szenarioheld-Palette. */
:root{
  --bg:#fafbf6; --fl:#ffffff; --text:#171e2a; --leise:#4b5563; --linie:#dfe3e8;
  --akzent:#2845e8; --akzent-tief:#1a2fb5; --akzent-hell:#e5edfc; --limette:#d8f58c; --gut:#3d5a12; --fehler:#b4231f;
  --b0:#2845e8; --b1:#c42a67; --b2:#3d8a5a; --b3:#d98a00; --b4:#5938aa; --b5:#0f8aa8; --b6:#7a5a2a; --b7:#4b5563;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.btn{border:0;border-radius:999px;padding:.7em 1.3em;background:var(--akzent);color:#fff;font-weight:650}
.btn:hover{background:var(--akzent-tief)}
.btn.zweit{background:var(--akzent-hell);color:var(--akzent-tief)}
.btn.leise{background:transparent;color:var(--leise);border:1px solid var(--linie)}
.btn:disabled{opacity:.45;cursor:default}
.feld{display:block;width:100%;padding:.65em .8em;border:1px solid var(--linie);border-radius:10px;background:#fff}
.feld:focus{outline:2px solid var(--akzent);outline-offset:1px}
label.t{display:block;font-size:.85em;font-weight:650;color:var(--leise);margin:.9em 0 .3em}
.hinweis{font-size:.8em;color:var(--leise)}
.fehlertext{color:var(--fehler);font-size:.9em;margin-top:.5em;min-height:1.2em}
.marke{font-weight:800;letter-spacing:-.01em}
.marke b{color:var(--akzent)}
.linkknopf{background:none;border:0;color:var(--akzent-tief);text-decoration:underline;font-size:.9em;padding:0}
.pille{display:inline-block;padding:.15em .6em;border-radius:999px;background:var(--akzent-hell);color:var(--akzent-tief);font-size:.8em;font-weight:650}

/* Typ-Wahl im Editor */
.typen{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em}
.typen.klein{grid-template-columns:repeat(3,1fr)}
@media (max-width:520px){.typen{grid-template-columns:repeat(2,1fr)}}
.typen button{border:1px solid var(--linie);background:#fff;border-radius:12px;padding:.7em .4em;text-align:center;font-size:.9em}
.typen button span{display:block;font-size:1.6em;line-height:1.2}
.typen button.an{border-color:var(--akzent);background:var(--akzent-hell);color:var(--akzent-tief);font-weight:650}

/* ===== Ergebnisdarstellung (skaliert mit der Größe des Rahmens) ===== */
.erg{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
.balken{display:flex;align-items:flex-end;gap:2.2%;height:100%;padding:0 2%}
.balken .s{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.balken .spur{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.balken .wert{font-weight:800;font-size:var(--fs-wert);margin-bottom:.15em}
.balken .saeule{width:100%;border-radius:10px 10px 0 0;min-height:4px;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.balken .name{font-size:var(--fs-name);text-align:center;margin-top:.35em;line-height:1.15;max-height:2.4em;overflow:hidden;width:100%;word-wrap:break-word}
.skalainfo{display:flex;justify-content:space-between;font-size:var(--fs-name);color:var(--leise);padding:0 2%;margin-top:.2em}
.mittel{font-size:var(--fs-wert);font-weight:800;text-align:center;margin-bottom:.3em}
.wolke{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;align-items:center;gap:.1em .5em;height:100%;overflow:hidden;padding:0 3%}
.wolke span{font-weight:750;line-height:1.05;transition:font-size .4s}
.leer{display:flex;align-items:center;justify-content:center;height:100%;color:var(--leise);font-size:var(--fs-name)}

/* Editor-Zusätze */
.haken{display:flex;align-items:center;gap:.5em;margin-top:.6em;font-size:.9em}
.reihe{display:flex;gap:.5em;align-items:center}
.reihe .t{margin:0}
.reihe4{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em;margin-top:.6em}
.reihe4 label{font-size:.8em;font-weight:650;color:var(--leise);display:flex;flex-direction:column;gap:.25em}
@media (max-width:520px){.reihe4{grid-template-columns:repeat(2,1fr)}}
.feld.kurz{max-width:10em}
.ampelfelder{display:grid;grid-template-columns:repeat(2,1fr);gap:.5em}
.ampelfelder label{display:flex;align-items:center;gap:.5em}
.ampelfelder i{flex:0 0 1.1em;height:1.1em;border-radius:50%;background:var(--c)}

/* Ergebnis-Zusätze */
.balken .s.blass{opacity:.35}
.balken .s.richtig .name{font-weight:800;color:var(--gut)}
.leer.gross{font-size:calc(var(--fs-name) * 1.3);font-weight:650;text-align:center}
.quizlauf{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.2em}
.quizlauf .uhr{font-size:calc(var(--fs-wert) * 4);font-weight:850;color:var(--akzent);line-height:1}
.quizlauf .leise{font-size:var(--fs-name);color:var(--leise)}
.karten{display:flex;flex-wrap:wrap;gap:.6em;align-content:flex-start;height:100%;overflow:hidden;padding:0 1%}
.karte{background:#fff;border:2px solid var(--linie);border-left-width:.5em;border-radius:12px;padding:.45em .7em;font-size:var(--fs-name);max-width:32%;line-height:1.25;box-shadow:0 2px 6px #0000000d}
.kbwrap{height:100%;display:flex;justify-content:center}
.kb{width:100%;height:100%;display:block}
.schaetz{display:flex;flex-direction:column;height:100%;padding:0 3%}
.sfeld{flex:1;position:relative;display:flex;align-items:flex-end;gap:2px;border-bottom:2px solid var(--leise);min-height:0}
.sk{flex:1;background:var(--b0);border-radius:6px 6px 0 0;min-height:2px;transition:height .5s}
.slinie{position:absolute;top:0;bottom:0;width:0;border-left:3px dashed var(--text)}
.slinie span{position:absolute;top:0;left:.4em;white-space:nowrap;font-weight:800;font-size:var(--fs-name);background:#ffffffd9;padding:0 .3em;border-radius:6px}
.slinie.ziel{border-left:4px solid var(--b1)}
.slinie.ziel span{top:1.6em;color:var(--b1)}
.sachse{display:flex;justify-content:space-between;font-size:var(--fs-name);color:var(--leise);margin-top:.2em}
.naechste{display:flex;gap:1.2em;justify-content:center;font-size:var(--fs-name);font-weight:650;margin-top:.4em}
.rangliste{display:flex;flex-direction:column;gap:.35em;max-width:70%;margin:0 auto;width:100%}
.rz{display:flex;align-items:center;gap:.8em;background:#fff;border:1px solid var(--linie);border-radius:12px;padding:.35em .8em;font-size:var(--fs-name)}
.rz b{width:1.6em;text-align:center;font-size:1.2em}
.rz span{flex:1;font-weight:650}
.rz i{font-style:normal;font-weight:800;color:var(--akzent)}
.rz.p1{background:#fff7d6;border-color:#e3b600}.rz.p2{background:#f1f3f6}.rz.p3{background:#fbeee4}