/* support (docs/16) — eigene Datei, damit die Bausteine sich nicht in app.css ins Gehege kommen.

   Drei Teile: der Knopf oben rechts in der Leitstelle, das Fenster „Hilfe & Support“
   (Mockup „Hilfe und Support im Spiel“) und auf der Anmeldeseite die Kontosperre mit
   dem Einspruch. Farben aus den Variablen der Leitstelle (app.css) bzw. der
   Anmeldeseite (lage.css, --l-*); was dort fehlt — die Töne für „Antwort da“ und
   „gelöst“ —, steht hier einmal ausgeschrieben, wie im Backoffice. */

/* ── Knopf ──────────────────────────────────────────────────────────────── */

.support-knopf { display: inline-flex; align-items: center; gap: .35rem; }
.support-knopf.hat-antwort { border-color: var(--gelb, var(--accent)); color: var(--text); }
/* Eine neue Antwort blinkt ein paar Mal auf (Support live, docs/16). */
.support-knopf.blinkt { animation: support-blink 1s ease-in-out 6; }
@keyframes support-blink {
  0%, 100% { background: transparent; box-shadow: none; }
  50% { background: rgba(244, 197, 66, .28); box-shadow: 0 0 0 3px rgba(244, 197, 66, .35); }
}
.support-zahl {
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px;
  background: var(--gelb, var(--accent)); color: #1a1204;
  font-size: .68rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}

/* ── Fenster ────────────────────────────────────────────────────────────── */

.modal.support-fenster {
  width: min(940px, 96vw); height: min(680px, 88dvh); max-height: 88dvh;
  border-radius: 18px; border-color: var(--line-2); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.support-fenster .modal-head { align-items: center; padding: .9rem 1.25rem; }
.support-titel { font-family: var(--cond); font-size: 1.6rem; font-weight: 700; }

.support-raster { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px minmax(0, 1fr); }

.support-seite {
  border-right: 1px solid var(--line); background: #0f1620;
  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto;
}
.btn.support-neu { height: 42px; width: 100%; font-size: .95rem; border-radius: 10px; }
.support-etikett {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px;
}
.support-liste { display: flex; flex-direction: column; gap: 6px; }
.support-eintrag {
  text-align: left; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--panel); color: var(--text); font: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
}
.support-eintrag:hover { border-color: var(--line-2); }
.support-eintrag.an { border-color: var(--gelb, var(--accent)); }
.support-eintrag-titel { font-weight: 600; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.support-eintrag.erledigt .support-eintrag-titel { color: #b9c4d2; font-weight: 500; }
.support-chip { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.support-chip.antwort { color: #45d192; }
.support-chip.arbeit { color: var(--gelb, var(--accent)); }
.support-chip.offen { color: #95a3b5; }
.support-stand { margin-top: 2px; }
.support-punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.support-chip.geloest .support-punkt { background: transparent; border: 1.5px solid currentColor; }

.support-inhalt.modal-body { padding: 20px 24px; gap: 14px; min-height: 0; }
.support-leise { color: var(--muted); font-size: .85rem; margin: 0; }
.support-fehler {
  margin: 0; padding: .6rem .75rem; border-radius: 8px;
  background: #3a1512; border: 1px solid #7a2520; color: #ffb4ad; font-size: .88rem;
}
.support-reihe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Neue Anfrage */
.support-kategorien { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.support-kategorien legend { padding: 0 0 8px; font-size: .98rem; font-weight: 600; }
.support-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.support-kachel {
  text-align: left; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line-2);
  background: #0d141d; color: var(--text); font: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
}
.support-kachel:hover { border-color: #3a4c66; }
.support-kachel.an { border-color: var(--gelb, var(--accent)); background: #2a2314; }
.support-kachel-titel { font-weight: 600; font-size: .95rem; }
.support-kachel-text { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.support-einspruch-knopf {
  align-self: flex-start; background: none; border: 0; padding: 2px 0; font: inherit; font-size: .82rem;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.support-einspruch-knopf:hover, .support-einspruch-knopf.an { color: var(--gelb, var(--accent)); }

.support-feld { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--muted); }
.support-feld input, .support-feld textarea, .support-antwort textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--line-2); background: #0d141d; color: var(--text);
  font: inherit; font-size: .98rem; line-height: 1.45;
}
.support-feld input { height: 42px; }
.support-feld textarea { resize: vertical; min-height: 110px; }
.support-feld input:focus, .support-feld textarea:focus, .support-antwort textarea:focus {
  outline: none; border-color: var(--gelb, var(--accent));
}
.support-haken { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; color: #b9c4d2; line-height: 1.4; cursor: pointer; }
.support-haken input { accent-color: var(--gelb, var(--accent)); margin-top: 3px; }
.support-fuss { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.btn.support-senden { height: 44px; padding: 0 18px; font-size: 1rem; border-radius: 10px; }
.support-danke {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px;
  background: #12291f; border: 1px solid #1f4a37; color: #bdebd4;
}
.support-danke b { color: var(--text); }

/* Verlauf einer Anfrage */
.support-kopf { display: flex; flex-direction: column; gap: 4px; }
.support-meta { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.support-betreff { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 1.6rem; line-height: 1.15; overflow-wrap: anywhere; }
.support-verlauf { display: flex; flex-direction: column; gap: 14px; }
.support-msg { max-width: 80%; display: flex; flex-direction: column; gap: 4px; }
.support-msg.player { align-self: flex-end; align-items: flex-end; }
.support-msg.team { align-self: flex-start; }
.support-msg.system { align-self: center; max-width: none; }
.support-msg-kopf { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.support-msg.team .support-msg-kopf { color: #6cb4ff; }
.support-mod {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; padding: 1px 5px;
  border-radius: 4px; background: #122338;
}
.support-msg-text {
  padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: #172230; font-size: .98rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.support-msg.player .support-msg-text { border-top-right-radius: 4px; }
.support-msg.team .support-msg-text { background: #122338; border-color: #1f3a5c; border-top-left-radius: 4px; }
.support-msg.system .support-msg-text { background: none; border: 0; padding: 0; color: var(--muted); font-size: .85rem; }
/* Live dazugekommen: leuchtet kurz auf. */
.support-msg.neu .support-msg-text { animation: support-neu 1.4s ease-out 2; }
@keyframes support-neu { 0% { box-shadow: 0 0 0 0 rgba(108, 180, 255, .55); } 100% { box-shadow: 0 0 0 10px rgba(108, 180, 255, 0); } }
/* „… schreibt“ */
.support-tippt { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #6cb4ff; }
.support-punkte { display: inline-flex; gap: 3px; }
.support-punkte i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: support-punkt 1.2s infinite ease-in-out; }
.support-punkte i:nth-child(2) { animation-delay: .15s; }
.support-punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes support-punkt { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.support-frage {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; background: #12291f; border: 1px solid #1f4a37;
}
.support-frage > span { font-size: .95rem; color: #bdebd4; }
.btn.support-ja { background: #45d192; border-color: #45d192; color: #07251a; font-weight: 600; }
.btn.support-ja:hover:not(:disabled) { background: #5fe0a5; }
.support-zu { padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line-2); }

.support-antwort { margin-top: auto; display: flex; gap: 8px; align-items: flex-end; }
.support-antwort textarea { flex: 1; resize: vertical; min-height: 42px; }
.support-antwort .btn { height: 42px; padding: 0 16px; font-size: .95rem; }

.support-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 760px) {
  .modal.support-fenster { height: 92dvh; max-height: 92dvh; }
  .support-raster { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .support-seite { border-right: 0; border-bottom: 1px solid var(--line); max-height: 34dvh; }
  .support-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support-msg { max-width: 92%; }
}

/* ── Anmeldung mit Kontosperre ──────────────────────────────────────────── */

.support-sperre { display: flex; flex-direction: column; gap: 4px; }
.support-sperre b { font-weight: 600; }
.lage-seite textarea.support-einspruch-text {
  height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.45; resize: vertical;
}
.lage-seite textarea.support-einspruch-text:focus { padding: 11px 13px; }
.support-einspruch-ok p { margin: 0; }
.support-einspruch-verlauf { display: flex; flex-direction: column; gap: 8px; }
.support-einspruch-zeile {
  padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; white-space: pre-wrap;
  background: var(--l-raised); border: 1px solid var(--l-line); color: var(--l-ink);
}
.support-einspruch-zeile b { margin-right: 6px; }