/* huelle-stil.css: Reiter-Arten `stil` und `sammlung` (25.09.2026, Flow), zu
   huelle-stil.js und huelle-sammlung.js. Farbe nie allein: jedes Urteil trägt
   ein Wort, jede Verwendung eine Zahl. */

/* --- Stil: links die Steuerung, rechts die Vorschau ------------------------ */
.stilFlaeche { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 22px; align-items: start; }
@media (max-width: 900px) { .stilFlaeche { grid-template-columns: minmax(0, 1fr); } }
.stilSteuer { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.stilAbschnitt { display: flex; flex-direction: column; gap: 8px; }
.stilUeberschrift { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--dim); }

.stilThemenReihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.stilThema { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid var(--linie);
  border-radius: var(--rundKlein, 8px); background: transparent; color: var(--text); font: inherit;
  font-size: 12.5px; cursor: pointer; text-align: left; }
.stilThema:hover:not(:disabled), .stilThema:focus-visible { border-color: var(--randStark); outline: none; }
.stilThema.aktiv { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); color: var(--goldText); }
.stilThema:disabled { cursor: default; }
/* Eine Folie im Kleinen: Titel, Akzentstrich, eine leise Zeile. */
.stilThemaBild { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px;
  overflow: hidden; border: 1px solid var(--linie); }
.stilThemaTitel { position: absolute; left: 9%; top: 14%; font-size: 17px; font-weight: 700; line-height: 1; }
.stilThemaAkzent { position: absolute; left: 9%; top: 52%; width: 34%; height: 4px; border-radius: 2px; }
.stilThemaText { position: absolute; left: 9%; top: 68%; width: 62%; height: 3px; border-radius: 2px; opacity: .7; }

.stilFarbe { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 4px 0; cursor: pointer; }
.stilFarbe input[type="color"] { width: 34px; height: 28px; padding: 0; border: 1px solid var(--linie);
  border-radius: 6px; background: none; cursor: pointer; }
.stilFarbe input[type="color"]:disabled { cursor: default; }
.stilFarbWorte { display: flex; flex-direction: column; min-width: 0; }
.stilFarbName { font-size: 13px; color: var(--text); }
.stilFarbSatz { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stilHex { font-family: var(--schriftMono, ui-monospace, monospace); font-size: 11.5px; color: var(--dim); }

.stilSchrift { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: center; gap: 10px; }
.stilSchrift select { font-size: 14px; color: var(--text); background: var(--panel);
  border: 1px solid var(--linie); border-radius: 6px; padding: 5px 8px; }

.stilLesZeile { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 5.5em; align-items: center;
  gap: 10px; font-size: 12.5px; }
.stilLesProbe { display: grid; place-items: center; height: 24px; border-radius: 5px; font-weight: 700;
  border: 1px solid var(--linie); }
.stilLesZahl { color: var(--dim); font-variant-numeric: tabular-nums; }
.stilLesUrteil { justify-self: start; padding: 1px 8px; border-radius: 9px; border: 1px solid var(--linie); }
.stilLesZeile[data-stufe="gut"] .stilLesUrteil { color: var(--gruenText, var(--gruen)); border-color: var(--gruen); }
.stilLesZeile[data-stufe="knapp"] .stilLesUrteil { color: var(--warnText); border-color: var(--warn); }
.stilLesZeile[data-stufe="schwach"] .stilLesUrteil { color: var(--warnText); border-color: var(--warn);
  border-width: 2px; font-weight: 600; }
.stilHinweis { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dim); }

.stilAktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px;
  border-top: 1px solid var(--linie); }
.stilAktionen .stilHinweis { flex: 1 0 100%; }

.stilVorschau { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stilVorschauTitel { margin: 0; font-size: 12px; color: var(--dim); }
.stilVorschauRaster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stilVorschauRaster .folieRahmen:first-child { grid-column: 1 / -1; }

/* --- Sammlung: Zone, Leiste, Raster aus Karten ------------------------------- */
.samWarnung { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--warn); border-radius: var(--rundKlein, 8px);
  color: var(--warnText); font-size: 12.5px; }
.samZone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px;
  margin-bottom: 12px; border: 1.5px dashed var(--randStark); border-radius: var(--rund, 12px);
  color: var(--dim); cursor: pointer; text-align: center; }
.samZone .ikon { width: 22px; height: 22px; }
.samZone:hover, .samZone:focus-visible, .samZone.drueber { border-color: var(--gold); color: var(--text);
  background: color-mix(in srgb, var(--gold) 7%, transparent); outline: none; }
.samZoneWort { font-size: 14px; color: var(--text); }
.samZoneKlein { font-size: 12px; }

.samLeiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.samSuche { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--panel); border: 1px solid var(--linie); border-radius: 6px; padding: 6px 10px; }
.samSuche:focus-visible { border-color: var(--gold); outline: none; }
.samFrei { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); cursor: pointer; }
.samZahl { font-size: 12.5px; color: var(--dim); }

.samRaster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.samKarte { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--linie);
  border-radius: var(--rundKlein, 8px); overflow: hidden; background: var(--panel); }
/* Das Schachbrett zeigt, wo ein Asset durchsichtig ist: ein Logo ohne Grund. */
.samBild { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 8px;
  background: repeating-conic-gradient(var(--zeile) 0% 25%, transparent 0% 50%) 50% / 16px 16px; }
.samBild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.samUnterschrift { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 10px;
  border-top: 1px solid var(--linie); font-size: 12px; }
.samName { grid-column: 1; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.samMasse { grid-column: 1; color: var(--dim); font-variant-numeric: tabular-nums; }
.samVerwendet { grid-column: 1; justify-self: start; margin-top: 3px; padding: 0 7px; border-radius: 9px;
  border: 1px solid var(--gold); color: var(--goldText); }
.samVerwendet[data-frei="ja"] { border-color: var(--linie); color: var(--dim); }
.samAktionen { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 2px; }

/* Verwerfen: leiser Umriss neben dem goldenen Sichern. Gesperrt heißt blass,
   sichtbar bleibt der Knopf trotzdem, damit er nicht springt. */
.stilVerwerfen { padding: 7px 14px; border: 1px solid var(--linie); border-radius: var(--rundKlein, 8px);
  background: transparent; color: var(--dim); font: inherit; font-size: 13.5px; cursor: pointer; }
.stilVerwerfen:hover:not(:disabled), .stilVerwerfen:focus-visible { border-color: var(--gold); color: var(--text); outline: none; }
.stilAktionen button:disabled { opacity: .45; cursor: default; }