/* FXDE84 Streamkit · Bedienelemente der Karte "Dein Stream-Look"
   Nutzt nur die Variablen aus assets/css/site.css. Alle Klassen beginnen mit "skx-". */

.skx-hinweis{margin:0;padding:12px 14px;background:#000;border:1px solid var(--linie);border-left:4px solid #ffc233;color:var(--text);font-size:15px;line-height:1.45}
.skx-hinweis[hidden]{display:none}

.skx-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:22px 24px;align-items:start}
.skx-gruppe{display:flex;flex-direction:column;gap:12px;min-width:0;margin:0;padding:0;border:0}
.skx-farben{grid-column:1/-1}
.skx-farben-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px 20px}

.skx-gruppe>legend,.skx-gruppe>label,.skx-farbe>label{padding:0;font:600 13px/1.2 var(--font-text);letter-spacing:.04em;text-transform:uppercase;color:var(--gedimmt)}
.skx-gruppe>legend{margin-bottom:12px;float:left;width:100%}
.skx-gruppe>legend+*{clear:both}

.skx-farbe{display:flex;flex-direction:column;gap:8px;min-width:0}
.skx-farbzeile{display:flex;gap:10px;align-items:stretch;min-width:0}

.skx-feld,.skx-datei{box-sizing:border-box;width:100%;min-width:0;min-height:48px;padding:11px 14px;background:var(--schwarz);border:1px solid var(--linie);border-radius:0;color:var(--text);font:400 16px/1.3 var(--font-text)}
.skx-feld::placeholder{color:var(--leise);opacity:1}
.skx-feld[aria-invalid="true"]{border-color:#ff8a8a}
.skx-feld:hover,.skx-datei:hover{border-color:#555}
.skx-feld:focus-visible,.skx-datei:focus-visible,.skx-wahl:focus-visible,.skx-gruppe .knopf:focus-visible{outline:3px solid #fff;outline-offset:2px}
.skx-hex{text-transform:lowercase;font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;letter-spacing:.02em}

.skx-wahl{flex:0 0 52px;width:52px;min-height:48px;padding:3px;background:var(--schwarz);border:1px solid var(--linie);border-radius:0;cursor:pointer}
.skx-wahl:hover{border-color:#555}

.skx-datei{padding:8px 10px;color:var(--gedimmt);font-size:15px;cursor:pointer}
.skx-datei::file-selector-button{margin-right:12px;padding:8px 12px;background:#222;border:1px solid #444;border-radius:0;color:#fff;font:700 13px/1 var(--font-text);letter-spacing:.03em;text-transform:uppercase;cursor:pointer}
.skx-datei::file-selector-button:hover{background:#2c2c2c}

.skx-logozeile{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.skx-logobild{width:64px;height:64px;object-fit:contain;background:var(--tief);border:1px solid var(--linie);flex:0 0 auto}
.skx-logobild[hidden],.skx-gruppe .knopf[hidden]{display:none}
.skx-gruppe .knopf.skx-klein,.skx-aktionen .knopf{min-height:44px;padding:8px 18px;font-size:17px}

.skx-hilfe{margin:0;color:var(--gedimmt);font-size:14px;line-height:1.4}
.skx-meldung{margin:0;min-height:0;font-size:14px;line-height:1.4;color:var(--gedimmt)}
.skx-meldung:empty{display:none}
.skx-fehler{margin:0;font-size:14px;line-height:1.4;color:#ff8a8a}
.skx-fehler[hidden]{display:none}
.skx-meldung.skx-fehler{color:#ff8a8a}

/* Vorschau: die Farben kommen als Variablen --sk-primaer usw. vom Skript */
.skx-vorschau{--sk-primaer:#fff;--sk-sekundaer:#bdbdbd;--sk-akzent:#f00;--sk-hintergrund:#0b0b0b;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:16px 18px;background:var(--sk-hintergrund);border:1px solid var(--linie);border-left:6px solid var(--sk-akzent)}
.skx-vorschau-logo{width:56px;height:56px;object-fit:contain;flex:0 0 auto}
.skx-vorschau-logo[hidden]{display:none}
.skx-vorschau-text{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 160px}
.skx-vorschau-name{font:400 28px/1.05 var(--font-titel);letter-spacing:.01em;text-transform:uppercase;color:var(--sk-primaer);overflow-wrap:anywhere}
.skx-vorschau-zeile{font:600 13px/1.2 var(--font-text);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-sekundaer)}
.skx-vorschau-punkte{display:flex;gap:6px}
.skx-vorschau-punkte i{display:block;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px var(--linie)}
.skx-vorschau-punkte i:nth-child(1){background:var(--sk-primaer)}
.skx-vorschau-punkte i:nth-child(2){background:var(--sk-sekundaer)}
.skx-vorschau-punkte i:nth-child(3){background:var(--sk-akzent)}
.skx-vorschau-punkte i:nth-child(4){background:var(--sk-hintergrund)}

.skx-aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.skx-status{margin:0;min-height:1.4em;color:var(--gedimmt);font-size:15px;flex:1 1 220px}

@media (max-width:420px){
  .skx-vorschau-name{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .skx-aktionen .knopf{transition:none}
}