/* Modul spielexport – Ausgabe der kompletten Spiele-Kategorie.
   Eigene Datei, damit portal.css unangetastet bleibt. */

.spx-wrap { display: grid; gap: 18px; }
.spx-wrap .panel { overflow: visible; }
/* Rasterfelder dürfen von sich aus nicht breiter werden als ihr Platz.
   Ohne min-width:0 schiebt der breiteste Inhalt die ganze Spalte auf. */
.spx-wrap > *, .spx-wrap .panel-body > * { min-width: 0; }

/* Hinweisleiste über den Panels */
.spx-note {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 13px; background: var(--soft); color: var(--ink); font-size: 13px;
}
.spx-note > div { min-width: 0; }
.spx-note p, .spx-note strong { overflow-wrap: anywhere; }
.spx-note svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--blue); }
.spx-note.warn { border-left-color: var(--gold); background: var(--gold-soft); }
.spx-note.warn svg { color: #9a6c0b; }
.spx-note.bad { border-left-color: var(--red); background: var(--red-soft); }
.spx-note.bad svg { color: var(--red); }
.spx-note p { margin: 0; }
.spx-note p + p { margin-top: 6px; }
.spx-note strong { display: block; margin-bottom: 3px; }
.spx-note code { padding: 1px 5px; border-radius: 5px; background: #fff; font-size: 12px; }

/* Kennzahlen über der Auswahl */
.spx-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin: 0 0 16px; }
.spx-kennzahl { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); min-width: 0; }
.spx-kennzahl b { display: block; font: 800 21px/1.2 'Manrope', system-ui, sans-serif; color: var(--ink); }
.spx-kennzahl span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* Abschnittsauswahl */
.spx-abschnitte { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; }
.spx-abschnitt {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff;
  cursor: pointer; transition: .16s; min-width: 0;
}
.spx-abschnitt:hover { border-color: #b6c6d3; }
.spx-abschnitt.aktiv { border-color: var(--blue); background: #f3fafe; }
.spx-abschnitt.leer { opacity: .6; }
.spx-abschnitt input { width: 17px; height: 17px; margin: 2px 0 0; }
.spx-abschnitt > span { min-width: 0; }
.spx-abschnitt strong { display: block; font: 700 14px/1.3 'Manrope', system-ui, sans-serif; overflow-wrap: anywhere; }
.spx-abschnitt small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.spx-abschnitt em { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; }
.spx-rolle {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
  background: var(--gold-soft); color: #7a5405; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px;
}

/* Schnellwahl über der Liste */
.spx-schnellwahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.spx-schnellwahl button {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px; background: #fff;
  color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: .16s;
}
.spx-schnellwahl button:hover { border-color: var(--blue); color: var(--blue); }

/* Umfang und Format */
.spx-optionen { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-top: 16px; }
.spx-feld { display: grid; gap: 5px; min-width: 210px; }
.spx-feld > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.spx-feld select {
  height: 41px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); width: 100%; max-width: 100%;
}
.spx-feld small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.spx-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

.spx-schalter {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; margin-top: 16px;
}
.spx-schalter input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; }
.spx-schalter strong { display: block; font: 700 13px/1.3 'Manrope', system-ui, sans-serif; }
.spx-schalter small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }

/* Zahlentabelle der Vorschau */
.spx-tabelle-wrap { min-width: 0; overflow-x: auto; }
.spx-tabelle { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13px; }
.spx-tabelle th, .spx-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.spx-tabelle th:first-child, .spx-tabelle td:first-child { text-align: left; }
.spx-tabelle thead th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.spx-tabelle tbody tr:last-child td { border-bottom: 0; }
.spx-tabelle tbody th { font-weight: 700; text-align: left; }
.spx-tabelle .null { color: #b3c0cb; }
.spx-tabelle .stark { font-weight: 800; }
.spx-tabelle tfoot td, .spx-tabelle tfoot th { padding-top: 10px; font-weight: 800; border-bottom: 0; }

/* Verteilungen nebeneinander */
.spx-verteilungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 16px; }
.spx-verteilung { padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); min-width: 0; }
.spx-verteilung h3 { margin: 0 0 9px; font: 800 12px/1.2 'Manrope', system-ui, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.spx-verteilung ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.spx-verteilung li { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; font-size: 13px; }
.spx-verteilung li span { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.spx-verteilung li b { flex: none; font-weight: 800; }

.spx-status-punkt { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--muted); vertical-align: 1px; }
.spx-status-ingame { background: var(--green); }
.spx-status-prepared { background: var(--blue); }
.spx-status-data { background: var(--gold); }
.spx-status-concept { background: #b3c0cb; }

/* Ergebnis des letzten Exports */
.spx-ergebnis {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px;
  padding: 13px 16px; border: 1px solid var(--green); border-radius: 13px; background: var(--green-soft);
}
.spx-ergebnis svg { flex: none; width: 20px; height: 20px; color: var(--green); }
.spx-ergebnis p { flex: 1; min-width: 0; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.spx-ergebnis small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* Protokoll */
.spx-protokoll { display: grid; gap: 8px; }
.spx-protokoll-zeile {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 13px;
}
.spx-protokoll-zeile .spx-datei { flex: 1; min-width: 0; font-weight: 700; word-break: break-all; }
.spx-protokoll-zeile span { color: var(--muted); font-size: 12px; }
.spx-marke {
  padding: 2px 9px; border-radius: 20px; background: var(--soft); color: var(--muted);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
}

.spx-busy { color: var(--muted); font-size: 13px; }
.spx-fehler { margin: 0 0 14px; padding: 12px 15px; border: 1px solid var(--red); border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 13px; overflow-wrap: anywhere; }

/* Schmale Fenster: alles einspaltig, nichts läuft über den Rand */
@media (max-width: 760px) {
  .spx-abschnitte, .spx-verteilungen { grid-template-columns: 1fr; }
  .spx-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .spx-optionen { flex-direction: column; align-items: stretch; }
  .spx-aktionen { margin-left: 0; }
  .spx-aktionen .button { width: 100%; }
  .spx-feld { min-width: 0; }
  .spx-tabelle { min-width: 380px; }
}

/* Sehr schmale Fenster: die Zahlentabelle darf scrollen, alles andere
   nicht - der Bereich bleibt in der Breite des Fensters. */
@media (max-width: 460px) {
  .spx-kennzahlen { grid-template-columns: 1fr; }
  .spx-tabelle { min-width: 340px; }
  .spx-schnellwahl button { flex: 1 1 auto; }
}