/* ============================================================
   SOLUTION LAB — Oberflaeche
   ============================================================
   Setzt die Tokens aus sg.css voraus (--bg, --line, --accent ...).
   Nur was das Labor zusaetzlich braucht steht hier; Kopf, Fuss und
   Fliesstext kommen von dort.
   ============================================================ */

/* Beschriftung nur fuer Vorleseprogramme: Das Feld traegt sichtbar einen
   Platzhalter, aber ein Platzhalter ist keine Beschriftung. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Sprachschalter (wie auf beispiele.html) ---------- */
.lang{display:flex;border:1px solid var(--line)}
.lang button{width:34px;height:31px;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim-2)}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.lang button+button{border-left:1px solid var(--line)}

/* ---------- Eingabe ----------
   Das Feld ist der Kern der Seite und darf so gross sein. Ein kleines
   Kaestchen laedt zu drei Woertern ein, und aus drei Woertern wird keine
   brauchbare Analyse. */
.eingabe{margin-top:clamp(24px,3.5vw,40px)}
.eingabe textarea{width:100%;min-height:160px;resize:vertical;
  border:1px solid var(--feld,var(--line));background:var(--bg);color:var(--fg);
  padding:18px 20px;font-family:inherit;font-size:clamp(15.5px,1.3vw,17px);
  line-height:1.6;letter-spacing:-.01em}
.eingabe textarea:focus{outline:none;border-color:var(--accent)}
.eingabe textarea::placeholder{color:var(--dim-2)}

.unterzeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px}
.unterzeile .hinweis{font-size:13px;color:var(--dim-2);line-height:1.5}
.zaehler{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--dim-2)}
.zaehler.knapp{color:var(--warn)}

.knopfzeile{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:20px}
.tun{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
  font-family:inherit;font-size:15.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer}
.tun:hover:not(:disabled){filter:brightness(1.12)}
.tun:disabled{opacity:.45;cursor:not-allowed}
.tun .arw{transition:transform .25s var(--ease)}
.tun:hover:not(:disabled) .arw{transform:translateX(4px)}

/* Kontingent: dezent, nie drohend. */
.kontingent{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim-2)}
.kontingent b{color:var(--accent);font-weight:700}

/* ---------- Beispiel-Anstoesse ---------- */
.anstoss{margin-top:26px}
.anstoss-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2);margin-bottom:12px}
.anstoss-liste{display:flex;flex-wrap:wrap;gap:8px}
.anstoss-liste button{border:1px solid var(--line);background:var(--bg);color:var(--dim);
  padding:9px 14px;min-height:40px;font-family:inherit;font-size:13.5px;cursor:pointer;
  text-align:left;transition:border-color .2s var(--ease),color .2s var(--ease)}
.anstoss-liste button:hover,.anstoss-liste button:focus-visible{
  border-color:var(--accent);color:var(--fg)}

/* ---------- Meldung ---------- */
.meldung{margin-top:20px;padding:16px 18px;border:1px solid var(--line);
  background:var(--bg-2);font-size:14.5px;line-height:1.6;color:var(--dim)}
.meldung.warn{border-color:var(--warn);color:var(--fg)}
.meldung b{color:var(--fg)}

/* ============================================================
   LAUF — Fortschritt und Spiel nebeneinander
   ============================================================
   Der Fortschritt bleibt sichtbar. Das Spiel ist ein Angebot, kein
   Ersatz: Wer zuschauen will, schaut zu.
*/
.lauf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(24px,3.5vw,40px)}
@media(max-width:840px){.lauf{grid-template-columns:1fr}}

.schritte{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line)}
.schritte li{background:var(--bg);padding:14px 16px;display:flex;align-items:baseline;gap:14px;
  font-size:14.5px;color:var(--dim-2);transition:color .3s var(--ease)}
.schritte .nr{font-family:var(--mono);font-size:11px;letter-spacing:.1em;flex:0 0 22px}
.schritte .was{flex:1}
.schritte .stand{font-family:var(--mono);font-size:11px;letter-spacing:.1em;flex:0 0 auto}
.schritte li[data-stand="laeuft"]{color:var(--fg);background:var(--bg-2)}
.schritte li[data-stand="laeuft"] .nr{color:var(--accent)}
.schritte li[data-stand="fertig"]{color:var(--dim)}
.schritte li[data-stand="fertig"] .stand{color:var(--accent)}
/* Der laufende Schritt pulsiert leicht — aber nur, wenn Bewegung
   erwuenscht ist. */
@media(prefers-reduced-motion:no-preference){
  .schritte li[data-stand="laeuft"] .stand{animation:puls 1.4s ease-in-out infinite}
}
@keyframes puls{50%{opacity:.35}}

/* ---------- Das Spiel ---------- */
.spiel{border:1px solid var(--line);background:var(--bg-2);padding:20px}
.spiel-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:14px}
.spiel-kopf b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim-2);font-weight:400}
.spiel-stand{font-size:13px;color:var(--dim)}

.brett{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);aspect-ratio:1;max-width:280px;margin-inline:auto}
.brett button{background:var(--bg);border:0;cursor:pointer;font-family:var(--mono);
  font-size:clamp(26px,6vw,34px);font-weight:700;color:var(--fg);
  display:grid;place-items:center;padding:0}
.brett button:hover:not(:disabled){background:var(--bg-3,var(--bg-2))}
.brett button:disabled{cursor:default}
.brett button[data-wer="du"]{color:var(--accent)}
.brett button[data-wer="ich"]{color:var(--dim-2)}
.brett button.gewinn{background:var(--accent);color:var(--accent-ink)}

.spiel-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px}
.spiel-neu{border:1px solid var(--line);background:none;color:var(--dim);
  padding:8px 14px;min-height:40px;font-family:inherit;font-size:13px;cursor:pointer}
.spiel-neu:hover{border-color:var(--accent);color:var(--fg)}
.spiel-punkte{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim-2)}

/* Wenn die Analyse fertig ist, waehrend noch gespielt wird. */
.fertighinweis{margin-top:16px;padding:14px 16px;border:1px solid var(--accent);
  background:var(--bg);display:grid;gap:10px}
.fertighinweis p{margin:0;font-size:14px;color:var(--fg);line-height:1.5}
.fertighinweis button{justify-self:start}

/* ============================================================
   ERGEBNIS
   ============================================================ */
.erg-kopf{display:grid;gap:14px;padding-bottom:clamp(22px,3vw,32px);
  border-bottom:1px solid var(--line)}
.erg-kennung{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim-2)}
.erg-kopf h2{margin:0;font-size:clamp(26px,3.6vw,44px);letter-spacing:-.035em;
  font-weight:800;line-height:1.1}
.erg-kopf .lead{margin:0}

/* Machbarkeit: Farbe UND Wort UND Zeichen. Nie nur Farbe — wer sie nicht
   unterscheiden kann, muss die Aussage trotzdem lesen koennen. */
.mach{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;
  border:1px solid var(--line);background:var(--bg-2);margin-top:26px}
.mach-zeichen{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;font-size:14px;font-weight:700;color:var(--accent-ink)}
.mach-text{flex:1;display:grid;gap:6px}
.mach-wort{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.mach-warum{font-size:14.5px;line-height:1.6;color:var(--dim)}
.mach[data-stufe="good"]{border-color:var(--gut,#1f7a4d)}
.mach[data-stufe="good"] .mach-zeichen{background:var(--gut,#1f7a4d)}
.mach[data-stufe="good"] .mach-wort{color:var(--gut,#1f7a4d)}
.mach[data-stufe="review"]{border-color:var(--accent)}
.mach[data-stufe="review"] .mach-zeichen{background:var(--accent)}
.mach[data-stufe="review"] .mach-wort{color:var(--accent)}
.mach[data-stufe="critical"]{border-color:var(--warn)}
.mach[data-stufe="critical"] .mach-zeichen{background:var(--warn)}
.mach[data-stufe="critical"] .mach-wort{color:var(--warn)}
.mach[data-stufe="not_recommended"]{border-color:var(--warn);background:var(--bg-3,var(--bg-2))}
.mach[data-stufe="not_recommended"] .mach-zeichen{background:var(--warn)}
.mach[data-stufe="not_recommended"] .mach-wort{color:var(--warn)}

/* ---------- Abschnitte ---------- */
.block{margin-top:clamp(30px,4vw,52px)}
.block>h3{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-2);font-weight:400}
.block p{margin:0;font-size:15px;line-height:1.65;color:var(--dim);max-width:76ch}

/* Zwei Spalten, wo es sich lohnt. */
.paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
@media(max-width:760px){.paar{grid-template-columns:1fr}}

/* ---------- Fluss ----------
   Waagerecht, wo Platz ist; senkrecht auf dem Handy. Die Pfeile stehen
   als eigene Elemente, damit sie beim Umbruch mitdrehen. */
.fluss{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:4px}
.fluss-schritt{flex:1 1 150px;min-width:0;border:1px solid var(--line);background:var(--bg-2);
  padding:14px 16px;display:grid;gap:6px;align-content:start}
.fluss-schritt b{font-size:14px;letter-spacing:-.015em;color:var(--fg);font-weight:650}
.fluss-schritt span{font-size:12.5px;line-height:1.5;color:var(--dim-2)}
.fluss-pfeil{align-self:center;color:var(--accent);font-family:var(--mono);flex:0 0 auto}
@media(max-width:620px){
  .fluss{flex-direction:column}
  .fluss-pfeil{transform:rotate(90deg);align-self:flex-start;margin-left:20px}
}

/* ---------- Listen mit Name und Erklaerung ---------- */
.punkte{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line)}
.punkte li{background:var(--bg);padding:14px 16px;display:grid;gap:5px}
.punkte b{font-size:14.5px;letter-spacing:-.015em;color:var(--fg);font-weight:650}
.punkte span{font-size:13.5px;line-height:1.55;color:var(--dim-2)}

/* Datenquellen mit Status — wieder Wort statt nur Farbe. */
.quelle-stand{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 7px;border:1px solid currentColor;
  justify-self:start;margin-top:2px}
.quelle-stand[data-s="verified"]{color:var(--gut,#1f7a4d)}
.quelle-stand[data-s="review"]{color:var(--accent)}
.quelle-stand[data-s="unknown"]{color:var(--dim-2)}

/* ---------- Aufzaehlung ---------- */
.haken{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.haken li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.55;color:var(--dim)}
.haken li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border:1px solid var(--accent)}

/* ---------- Aufwand ---------- */
.aufwand{display:flex;align-items:center;gap:4px;margin-bottom:12px}
.aufwand i{width:38px;height:6px;background:var(--line);font-style:normal}
.aufwand i.an{background:var(--accent)}
.aufwand-wort{margin-left:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg)}

/* ---------- Abschluss ---------- */
.abschluss{margin-top:clamp(36px,5vw,64px);padding-top:clamp(26px,3.5vw,40px);
  border-top:1px solid var(--line);display:grid;gap:16px;justify-items:start}
.abschluss h3{margin:0;font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;font-weight:700;
  text-transform:none;font-family:inherit;color:var(--fg)}
.abschluss p{margin:0;max-width:62ch}
.abschluss-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.knopf-voll{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
  font-family:inherit;font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer}
.knopf-voll:hover{filter:brightness(1.12)}
.knopf-leer{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;
  background:none;color:var(--fg);border:1px solid var(--line);
  font-family:inherit;font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer}
.knopf-leer:hover{border-color:var(--accent)}

.fussnote{margin-top:26px;font-size:12.5px;line-height:1.6;color:var(--dim-2);max-width:80ch}

/* ============================================================
   DRUCK — die Analyse als PDF ueber den Browser
   ============================================================
   Kein Server-PDF und keine Bibliothek: Der Browser kann das, auf jedem
   Geraet, ohne dass jemand eine Adresse hinterlassen muss.
*/
@media print{
  header,footer,#hoch,#status,#plot,.eingabe,.anstoss,.lauf,.abschluss-knoepfe,
  .lang,.spiel{display:none !important}
  body{background:#fff;color:#000}
  .wrap{max-width:none;padding:0}
  .block,.mach,.punkte li,.fluss-schritt{break-inside:avoid}
  .erg-kopf h2{font-size:22pt}
  a[href]::after{content:""}
  .druckfuss{display:block !important}
}
.druckfuss{display:none;margin-top:24px;padding-top:12px;border-top:1px solid #000;
  font-size:9pt;line-height:1.5}