/* huelle-katalog-wahl.css (25.10.2026): der eine Katalog aller Widgets und die Bild-Widgets für alle im Dialog
   „Reiter anpassen" (huelle-katalog-wahl.js, huelle-geteilt-dialog.js). Farben nur aus den Variablen von app.css,
   damit helles und dunkles Design stimmen; keine festen hellen Flächen. */

/* --- Suche und Gruppen ----------------------------------------------------------------------------------------- */

.wkWahl { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.wkSuche { display: flex; align-items: center; gap: 7px; padding: 6px 10px;
  background: var(--bg); border: 1px solid var(--linie); border-radius: 9px; }
.wkSuche:focus-within { border-color: var(--blau); }
.wkSuche .ikon { width: 15px; height: 15px; flex: none; color: var(--dim); }
.wkSuche input { flex: 1; min-width: 0; padding: 2px 0; border: 0; outline: none; background: transparent;
  color: var(--text); font: inherit; font-size: 13.5px; }
.wkLeer:empty { display: none; }
.wkGruppen { display: flex; flex-direction: column; gap: 10px; }
.wkGruppe[hidden] { display: none; }
.wkGruppeKopf { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font: 600 12.5px var(--schrift);
  color: var(--kopf, var(--text)); }
.wkGruppeKopf .ikon { width: 15px; height: 15px; color: var(--goldText, var(--dim)); }
.wkZahl { min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--zeile); color: var(--dim);
  font-size: 10.5px; font-weight: 500; line-height: 17px; text-align: center; }
.wkFormen { margin: 4px 0 0; }
.wkFormen .kdForm[hidden] { display: none; }
.kdForm:disabled { opacity: .45; cursor: not-allowed; }
.kdForm:disabled:hover { border-color: var(--linie); }

/* Die Marke einer geteilten Art: „live, für alle", mit dem Symbol der Gruppe. */
.wkMarke { display: inline-flex; align-items: center; gap: 4px; color: var(--blauText, var(--blau));
  border-color: color-mix(in srgb, var(--blau) 45%, var(--linie)); }
.wkMarke .ikon { width: 11px; height: 11px; }
.kdForm.mitSchema.wkGeteilt .bkSchema { border-color: color-mix(in srgb, var(--blau) 30%, var(--linie)); }

/* --- Schemabilder der geteilten Arten (dieselbe Bildsprache wie .bkSchema im Baukasten) -------------------------- */

.wkSchema { position: relative; }
.wkSchema i { background: var(--randStark, var(--linie)); }
/* Ziel-Ring: ein Bogen, drei Viertel voll */
.wkSchema[data-muster="wk-ring"] { place-items: center; }
.wkSchema[data-muster="wk-ring"] i { width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(var(--blau) 0 72%, var(--linie) 72% 100%);
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 42%); mask: radial-gradient(circle, transparent 40%, #000 42%); }
/* Fortschritt je Gruppe: drei kleine Ringe */
.wkSchema[data-muster="wk-ringe"] { grid-template-columns: repeat(3, 1fr); place-items: center; }
.wkSchema[data-muster="wk-ringe"] i { width: 22px; height: 22px; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 53%); mask: radial-gradient(circle, transparent 50%, #000 53%);
  background: conic-gradient(var(--gruen, #1D9E75) 0 80%, var(--linie) 80% 100%); }
.wkSchema[data-muster="wk-ringe"] i:nth-child(2) { background: conic-gradient(var(--gruen, #1D9E75) 0 45%, var(--linie) 45% 100%); }
.wkSchema[data-muster="wk-ringe"] i:nth-child(3) { background: conic-gradient(var(--gruen, #1D9E75) 0 20%, var(--linie) 20% 100%); }
/* Verteilung: eine Torte aus Zuständen */
.wkSchema[data-muster="wk-torte"] { place-items: center; }
.wkSchema[data-muster="wk-torte"] i { width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(#1D9E75 0 40%, #BA7517 40% 62%, #7F77DD 62% 90%, var(--linie) 90% 100%);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); mask: radial-gradient(circle, transparent 38%, #000 40%); }
/* Fortschritt über die Zeit: steigende Säulen */
.wkSchema[data-muster="wk-kurve"] { grid-template-columns: repeat(7, 1fr); align-items: end; gap: 3px; }
.wkSchema[data-muster="wk-kurve"] i { background: color-mix(in srgb, var(--blau) 70%, transparent); }
.wkSchema[data-muster="wk-kurve"] i:nth-child(1) { height: 15%; }
.wkSchema[data-muster="wk-kurve"] i:nth-child(2) { height: 25%; }
.wkSchema[data-muster="wk-kurve"] i:nth-child(3) { height: 32%; }
.wkSchema[data-muster="wk-kurve"] i:nth-child(4) { height: 48%; }
.wkSchema[data-muster="wk-kurve"] i:nth-child(5) { height: 60%; }
.wkSchema[data-muster="wk-kurve"] i:nth-child(6) { height: 78%; }
.wkSchema[data-muster="wk-kurve"] i:nth-child(7) { height: 92%; }
/* Countdown: ein Bogen und die Zahl daneben */
.wkSchema[data-muster="wk-countdown"] { grid-template-columns: 34px 1fr; align-items: center; }
.wkSchema[data-muster="wk-countdown"] i:nth-child(1) { width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(var(--warn, #BA7517) 0 35%, var(--linie) 35% 100%);
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 42%); mask: radial-gradient(circle, transparent 40%, #000 42%); }
.wkSchema[data-muster="wk-countdown"] i:nth-child(2) { width: 60%; height: 14px; background: var(--dim); }
/* Meilensteine: eine Linie mit Punkten, einer leuchtet */
.wkSchema[data-muster="wk-meilen"] { grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center;
  background: linear-gradient(var(--linie), var(--linie)) center / calc(100% - 14px) 2px no-repeat, var(--bg); }
.wkSchema[data-muster="wk-meilen"] i { width: 9px; height: 9px; border-radius: 50%; }
.wkSchema[data-muster="wk-meilen"] i:nth-child(-n+2) { background: var(--dim); opacity: .55; }
.wkSchema[data-muster="wk-meilen"] i:nth-child(3) { background: var(--blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 30%, transparent); }
.wkSchema[data-muster="wk-meilen"] i:nth-child(6) { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px;
  height: auto; border-radius: 1px; background: var(--warn, #BA7517); }
/* Phasenband: versetzte Balken */
.wkSchema[data-muster="wk-phasen"] { grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2px; }
.wkSchema[data-muster="wk-phasen"] i:nth-child(1) { grid-column: 1 / 4; grid-row: 1; background: var(--dim); }
.wkSchema[data-muster="wk-phasen"] i:nth-child(2) { grid-column: 3 / 6; grid-row: 2; background: var(--blau); }
.wkSchema[data-muster="wk-phasen"] i:nth-child(3) { grid-column: 5 / 8; grid-row: 3; }
.wkSchema[data-muster="wk-phasen"] i:nth-child(4) { grid-column: 7 / 9; grid-row: 4; }
/* Kalender: Kopfzeile und Tage, einer markiert */
.wkSchema[data-muster="wk-kalender"] { grid-template-columns: repeat(7, 1fr); grid-template-rows: 1fr 1fr; gap: 2px; }
.wkSchema[data-muster="wk-kalender"] i:nth-child(-n+7) { background: var(--dim); }
.wkSchema[data-muster="wk-kalender"] i:nth-child(11) { background: var(--blau); }
/* Uhr: ein Zifferblatt mit zwei Zeigern */
.wkSchema[data-muster="wk-uhr"] { place-items: center; }
.wkSchema[data-muster="wk-uhr"] i { grid-area: 1 / 1; }
.wkSchema[data-muster="wk-uhr"] i:nth-child(1) { width: 32px; height: 32px; border-radius: 50%; background: transparent;
  border: 2px solid var(--randStark, var(--linie)); box-sizing: border-box; }
.wkSchema[data-muster="wk-uhr"] i:nth-child(2) { width: 2px; height: 11px; background: var(--text);
  transform: translateY(-5px); }
.wkSchema[data-muster="wk-uhr"] i:nth-child(3) { width: 9px; height: 2px; background: var(--blau); transform: translateX(4px); }
/* Wer hat was: Köpfe mit Balken */
.wkSchema[data-muster="wk-team"] { grid-template-columns: 12px 1fr; grid-template-rows: repeat(3, 1fr); align-items: center; gap: 3px 5px; }
.wkSchema[data-muster="wk-team"] i:nth-child(odd) { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); }
.wkSchema[data-muster="wk-team"] i:nth-child(even) { height: 6px; background: color-mix(in srgb, var(--blau) 60%, transparent); }
.wkSchema[data-muster="wk-team"] i:nth-child(2) { width: 85%; }
.wkSchema[data-muster="wk-team"] i:nth-child(4) { width: 50%; }
.wkSchema[data-muster="wk-team"] i:nth-child(6) { width: 30%; }
/* Ampel: Zeilen mit grünem, gelbem, rotem Punkt */
.wkSchema[data-muster="wk-ampel"] { grid-template-columns: 10px 1fr; grid-template-rows: repeat(3, 1fr); align-items: center; gap: 3px 5px; }
.wkSchema[data-muster="wk-ampel"] i:nth-child(odd) { width: 9px; height: 9px; border-radius: 50%; }
.wkSchema[data-muster="wk-ampel"] i:nth-child(1) { background: #1D9E75; }
.wkSchema[data-muster="wk-ampel"] i:nth-child(3) { background: #D9A52B; }
.wkSchema[data-muster="wk-ampel"] i:nth-child(5) { background: #E24B4A; }
.wkSchema[data-muster="wk-ampel"] i:nth-child(even) { height: 5px; width: 80%; }
/* Risiko-Matrix: drei mal drei Felder, nach rechts oben heißer */
.wkSchema[data-muster="wk-matrix"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; }
.wkSchema[data-muster="wk-matrix"] i:nth-child(1), .wkSchema[data-muster="wk-matrix"] i:nth-child(2),
.wkSchema[data-muster="wk-matrix"] i:nth-child(5) { background: color-mix(in srgb, #E24B4A 55%, transparent); }
.wkSchema[data-muster="wk-matrix"] i:nth-child(3) { background: #E24B4A; }
.wkSchema[data-muster="wk-matrix"] i:nth-child(4), .wkSchema[data-muster="wk-matrix"] i:nth-child(8) {
  background: color-mix(in srgb, #D9A52B 50%, transparent); }
.wkSchema[data-muster="wk-matrix"] i:nth-child(7), .wkSchema[data-muster="wk-matrix"] i:nth-child(9),
.wkSchema[data-muster="wk-matrix"] i:nth-child(6) { background: color-mix(in srgb, #1D9E75 40%, transparent); }
/* Abhängigkeiten: Knoten, die aufeinander zeigen */
.wkSchema[data-muster="wk-knoten"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; place-items: center;
  background: linear-gradient(var(--linie), var(--linie)) 30% 32% / 40% 2px no-repeat,
              linear-gradient(var(--linie), var(--linie)) 70% 68% / 40% 2px no-repeat, var(--bg); }
.wkSchema[data-muster="wk-knoten"] i { width: 14px; height: 10px; border-radius: 3px; }
.wkSchema[data-muster="wk-knoten"] i:nth-child(1) { background: #E24B4A; }
.wkSchema[data-muster="wk-knoten"] i:nth-child(2) { background: var(--dim); }
.wkSchema[data-muster="wk-knoten"] i:nth-child(3) { opacity: 0; }
.wkSchema[data-muster="wk-knoten"] i:nth-child(4) { opacity: 0; }
.wkSchema[data-muster="wk-knoten"] i:nth-child(5) { grid-column: 3; grid-row: 2; background: var(--blau); }
/* Notiz: ein Zettel mit Zeilen */
.wkSchema[data-muster="wk-notiz"] { grid-template-rows: repeat(4, 1fr); background: color-mix(in srgb, var(--warn, #BA7517) 10%, var(--bg)); }
.wkSchema[data-muster="wk-notiz"] i { height: 3px; align-self: center; }
.wkSchema[data-muster="wk-notiz"] i:nth-child(2) { width: 80%; }
.wkSchema[data-muster="wk-notiz"] i:nth-child(4) { width: 55%; }
/* Aktivität: Balken je Tag */
.wkSchema[data-muster="wk-balken"] { grid-template-columns: repeat(8, 1fr); align-items: end; gap: 2px; }
.wkSchema[data-muster="wk-balken"] i { background: var(--dim); }
.wkSchema[data-muster="wk-balken"] i:nth-child(1) { height: 40%; } .wkSchema[data-muster="wk-balken"] i:nth-child(2) { height: 70%; }
.wkSchema[data-muster="wk-balken"] i:nth-child(3) { height: 25%; } .wkSchema[data-muster="wk-balken"] i:nth-child(4) { height: 90%; }
.wkSchema[data-muster="wk-balken"] i:nth-child(5) { height: 55%; } .wkSchema[data-muster="wk-balken"] i:nth-child(6) { height: 35%; }
.wkSchema[data-muster="wk-balken"] i:nth-child(7) { height: 75%; } .wkSchema[data-muster="wk-balken"] i:nth-child(8) { height: 60%; background: var(--blau); }
/* Bedarf: Stufen nach oben */
.wkSchema[data-muster="wk-stufen"] { grid-template-columns: repeat(5, 1fr); align-items: end; gap: 3px; }
.wkSchema[data-muster="wk-stufen"] i:nth-child(1) { height: 20%; } .wkSchema[data-muster="wk-stufen"] i:nth-child(2) { height: 38%; }
.wkSchema[data-muster="wk-stufen"] i:nth-child(3) { height: 56%; } .wkSchema[data-muster="wk-stufen"] i:nth-child(4) { height: 74%; }
.wkSchema[data-muster="wk-stufen"] i:nth-child(5) { height: 92%; background: var(--blau); }

/* --- Zeilen der geteilten Widgets im Dialog ---------------------------------------------------------------------- */

.kdZeile.wkZeile, .kdZeile.wkZeile.mitNeu { grid-template-columns: 18px 96px minmax(0, 1fr) auto 30px 30px; }
.wkFuerAlle { display: inline-flex; justify-content: center; color: var(--blauText, var(--blau)); }
.wkFuerAlle .ikon { width: 14px; height: 14px; }
.wkZeile.weg { opacity: .5; border-style: dashed; }
.wkZeile.weg .raTitelFeld { text-decoration: line-through; }
.wkZeile .wkZurueck { color: var(--blauText, var(--blau)); }
.wkEinst { margin-left: 26px; }
.wkNotiz { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; background: var(--bg);
  color: var(--text); border: 1px solid var(--linie); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 13px; }
.wkNotiz:focus { outline: none; border-color: var(--blau); }
.wkEinst input, .wkEinst select { min-width: 0; background: var(--bg); border: 1px solid var(--linie); border-radius: 7px;
  color: var(--text); padding: 6px 8px; font: inherit; font-size: 13px; }
.wkEinst input:focus, .wkEinst select:focus { outline: none; border-color: var(--blau); }
.wkNeuKopf { display: flex; align-items: center; gap: 7px; }
.wkNeuKopf .ikon { width: 15px; height: 15px; color: var(--goldText, var(--dim)); }
.wkNeuKopf .wkFuerAlle { margin-left: auto; }

/* Die Größe im Acht-Spalten-Raster: ein Klick auf eine Zelle heißt „so breit und so hoch". */
.bkFeld.wkFeld { grid-template-columns: repeat(8, 9px); grid-auto-rows: 7px; gap: 2px; }
.kdZeile .wkFeld { grid-template-columns: repeat(8, 7px); grid-auto-rows: 5px; gap: 1px; padding: 3px; }
.wkGroessen .bkMassWort { min-width: 70px; }
.wkGroessen .bkZelle:disabled { cursor: default; }

/* --- Die Skizze im Acht-Spalten-Raster --------------------------------------------------------------------------- */

.wkLageRaster { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 13px; gap: 3px;
  margin-bottom: 4px; }
.wkLageKachel { overflow: hidden; padding: 4px 6px; align-items: flex-start; }
.wkLageKachel[data-geteilt] { border-color: color-mix(in srgb, var(--blau) 55%, var(--linie));
  background: color-mix(in srgb, var(--blau) 8%, var(--panel)); }
.wkLageKachel[data-geteilt] .ikon { color: var(--blauText, var(--blau)); }

@media (max-width: 560px) {
  .kdZeile.wkZeile { display: flex; flex-wrap: wrap; }
}