.frage-karte-entscheidung { --entscheidung-akzent: #2563eb; }
.entscheidung-form { display: grid; gap: 18px; margin-top: 18px; }
.entscheidung-block { border: 0; padding: 0; margin: 0; min-width: 0; }
.entscheidung-block legend { font-weight: 750; margin-bottom: 10px; }
.entscheidung-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.entscheidung-raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entscheidung-raster.strafen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Ohne "Keine": das gibt es nur in der ersten Reihe. */
.entscheidung-raster.strafen-weitere { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* overflow:hidden und das min-width:0 am Text beheben einen sichtbaren
   Fehler (Max' Screenshot vom 31.08.2026): "Schiedsrichter Ball" ist ein
   Wort, das breiter ist als der Knopf. Das Symbol steht auf
   flex:0 0 auto, kann also nicht schrumpfen - stattdessen lief der Text
   ueber, und weil der Inhalt zentriert ist, schob es das Icon links aus
   dem Knopf heraus. Es stand dann zwischen zwei Knoepfen im Nichts. */
.entscheidung-knopf { min-height: 54px; padding: 9px 8px; border: 1.5px solid #d8dee8; border-radius: 12px; background: #fff; color: #1f2937; display: flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-weight: 650; cursor: pointer; overflow: hidden; }
.entscheidung-knopf > span:last-child {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.15;
}
.entscheidung-knopf:hover { border-color: #93a4bb; background: #f8fafc; }
.entscheidung-knopf.aktiv { border-color: var(--entscheidung-akzent); background: #eff6ff; box-shadow: 0 0 0 2px rgb(37 99 235 / 12%); }
.entscheidung-symbol { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; }
.entscheidung-symbol svg { width: 28px; height: 28px; }
.entscheidung-trikot { width: 25px; height: 27px; background: var(--trikot); clip-path: polygon(18% 0, 36% 0, 42% 10%, 58% 10%, 64% 0, 82% 0, 100% 18%, 84% 36%, 76% 29%, 76% 100%, 24% 100%, 24% 29%, 16% 36%, 0 18%); border: 1px solid rgb(0 0 0 / 20%); }
/* Groesser und mit deutlicherem Rand: eine Karte erkennt man an der
   Flaeche, nicht an einem Strich. Max am 31.08.2026: "Die persoenliche
   Strafe sieht auch noch ein bisschen bloed aus, das muss deutlicher
   gemacht werden als so ein paar Striche."

   Gelb-Rot ist jetzt ein diagonaler Schnitt statt einer senkrechten
   Teilung. Damit bleibt die Karte in voller Groesse sichtbar, statt in
   zwei schmale Haelften zu zerfallen, die bei 20 px beide nach nichts
   aussehen - ebenfalls Max' Vorschlag. */
.entscheidung-karte { display: block; width: 20px; height: 28px; border-radius: 3px; border: 1px solid rgb(17 24 39 / 22%); box-shadow: 0 1px 3px rgb(0 0 0 / 25%); }
.entscheidung-karte.keine { border: 2px dashed #94a3b8; background: transparent; box-shadow: none; }
.entscheidung-karte.gelb { background: #facc15; }
.entscheidung-karte.rot { background: #ef4444; }
.entscheidung-karte.gelbrot { background: linear-gradient(135deg, #facc15 0 50%, #ef4444 50% 100%); }
.entscheidung-orte { display: flex; flex-wrap: wrap; gap: 8px; }
/* 16px, damit iOS Safari beim Antippen nicht in die Seite hineinzoomt -
   unter 16px tut es das und zoomt nicht von allein zurueck. */
.entscheidung-ort-auswahl { width: 100%; min-height: 46px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 16px; background: #fff; }
.entscheidung-knopf.ort-chip { min-height: 44px; width: auto; padding-inline: 12px; }
.entscheidung-anderer-ort, .entscheidung-person label { display: grid; gap: 6px; margin-top: 11px; font-size: .9rem; font-weight: 650; }
/* Ohne diese Zeile bleibt das Feld trotz hidden sichtbar: die
   display:grid-Regel oben ist staerker als das display:none, das der
   Browser fuer [hidden] mitbringt. Faellt beim Lesen des JavaScript
   nicht auf, weil dort korrekt "label.hidden = true" steht. */
.entscheidung-anderer-ort[hidden] { display: none; }
/* font-size: 16px steht hier, weil "font: inherit" die .9rem des
   umgebenden Labels erbt - also 14,4px. Unter 16px zoomt iOS Safari
   beim Antippen in die Seite hinein und zoomt nicht von allein
   zurueck. Dieselbe Regel wie bei .entscheidung-ort-auswahl. */
.entscheidung-anderer-ort input, .entscheidung-person input, .entscheidung-person select { width: 100%; min-height: 44px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 16px; background: #fff; }
.entscheidung-person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .45fr); gap: 10px; }
/* ============================================================
   Mehrere persoenliche Strafen (v104, 31.08.2026)
   ============================================================
   Jede Strafe ist ein eigener Block mit eigener Person. Der farbige
   Streifen links und der Abstand zwischen den Bloecken sind das
   Einzige, woran man auf 390 px sieht, wo die eine Strafe aufhoert und
   die naechste anfaengt - ohne ihn liest sich die zweite Karte wie ein
   weiteres Feld der ersten. */
.entscheidung-strafliste { display: grid; gap: 12px; margin-top: 12px; }
.entscheidung-strafliste:empty { display: none; }
.entscheidung-strafblock { display: grid; gap: 10px; padding: 11px 12px 13px; border: 1px solid #dbe2ec; border-left: 4px solid var(--entscheidung-akzent); border-radius: 12px; background: #fbfcfe; }
.entscheidung-strafblock-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.entscheidung-strafblock-titel { font-weight: 700; font-size: .92rem; }
.entscheidung-strafblock-hinweis { margin: 0; font-size: .86rem; font-weight: 650; color: #475569; }
.entscheidung-strafe-entfernen { min-height: 44px; padding: 6px 14px; border: 1px solid #e3c3c3; border-radius: 10px; background: #fff; color: #9f1239; font: inherit; font-size: .88rem; font-weight: 650; cursor: pointer; }
.entscheidung-strafe-entfernen:hover { border-color: #efa4a4; background: #fff1f2; }
/* Volle Breite und 50px hoch: dieser Knopf ist der einzige Weg zur
   zweiten Karte und muss auf dem Handy sicher zu treffen sein. */
.entscheidung-strafe-mehr { width: 100%; min-height: 50px; margin-top: 12px; border: 1.5px dashed #93a4bb; border-radius: 12px; background: #fff; color: #1f2937; font: inherit; font-weight: 650; cursor: pointer; }
.entscheidung-strafe-mehr:hover { border-color: var(--entscheidung-akzent); background: #eff6ff; }
.entscheidung-strafe-grenze { margin: 12px 0 0; font-size: .86rem; color: #475569; }
/* Untereinander statt in einer Zeile: bei drei Karten waere eine
   aneinandergehaengte Textzeile auf 390 px nicht mehr zu lesen. */
.entscheidung-strafen-anzeige { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 3px; }
.entscheidung-strafen-anzeige li::before { content: "•"; margin-right: 6px; }
.entscheidung-ergebnis { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 9px; }
.entscheidung-ergebnis-zeile { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; border: 1px solid; border-radius: 11px; padding: 10px 12px; }
.entscheidung-ergebnis-zeile.gut { border-color: #86c59b; background: #f0fdf4; }
.entscheidung-ergebnis-zeile.schlecht { border-color: #efa4a4; background: #fff1f2; }
.entscheidung-ergebnis-marke { font-size: 1.2rem; font-weight: 800; }
.entscheidung-ergebnis-zeile small { display: block; margin-top: 3px; }
.entscheidung-ort-feedback { font-size: .9rem; color: #7f1d1d; }
@media (max-width: 720px) {
  .entscheidung-raster, .entscheidung-raster.strafen, .entscheidung-raster.strafen-weitere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entscheidung-knopf { justify-content: flex-start; text-align: left; }
}
@media (max-width: 430px) {
  .entscheidung-person { grid-template-columns: 1fr; }
  .entscheidung-raster.fortsetzungen { grid-template-columns: 1fr 1fr; }
  .entscheidung-knopf { min-height: 50px; font-size: .86rem; }
}