/* Version 0.42: Griffwahl mit Zeichnungen (Assistent: Schritt „Ausstattung“ und Einstellungen einer Front).
   Markup: griffWaehler() in js/ui/wizard.js, Bilder: js/ui/griffbilder.js (Klassen gb-*). Bewegung nur über die Tokens aus css/wizard-motion.css. */

/* ---- Farben der Zeichnungen: Metall folgt „Farbe der Griffe“ (data-farbe), Holz, Porzellan und Leder sind fest */
.wizard-griffwahl {
  --gb-panel: var(--flaeche-3); --gb-kante: var(--linie-2);
  --gb-m: #aab2bc; --gb-d: #67707b; --gb-h: #ffffff;
  display: flex; flex-direction: column; gap: 12px;
}
.wizard-griffwahl[data-farbe="MESSING"] { --gb-m: #dcb255; --gb-d: #8c6a1c; --gb-h: #fff3c9; }
.wizard-griffwahl[data-farbe="SCHWARZ"] { --gb-m: #3b3e44; --gb-d: #17181a; --gb-h: #9097a0; }
.wizard-griffwahl[data-farbe="WEISS"] { --gb-m: #f4f2ed; --gb-d: #b9b4a7; --gb-h: #ffffff; }
.wizard-griffwahl[data-farbe="CHROM"] { --gb-m: #e3e9f0; --gb-d: #75828f; --gb-h: #ffffff; }
.gb { display: block; width: 100%; height: auto; overflow: visible; }
.gb .gb-holz { --gb-m: #c18f58; --gb-d: #85592f; --gb-h: #f1d3a6; }
.gb .gb-weiss { --gb-m: #f6f4ef; --gb-d: #b8b3a6; --gb-h: #ffffff; }
.gb-fl { fill: var(--gb-panel); stroke: var(--gb-kante); stroke-width: 1; }
.gb-top { fill: color-mix(in srgb, var(--gb-panel) 70%, #fff); stroke: var(--gb-kante); stroke-width: 1; }
.gb-seite { fill: color-mix(in srgb, var(--gb-panel) 82%, #000); stroke: var(--gb-kante); stroke-width: 1; }
.gb :is(line, path).gb-d { stroke: var(--gb-d); }
.gb :is(line, path).gb-m { stroke: var(--gb-m); }
.gb :is(line, path).gb-h { stroke: var(--gb-h); opacity: .8; }
.gb :is(rect, circle, ellipse).gb-d, .gb .gb-df, .gb .gb-rim { fill: var(--gb-d); stroke: none; }
.gb :is(rect, circle, ellipse).gb-m { fill: var(--gb-m); stroke: none; }
.gb .gb-hw { fill: var(--gb-h); opacity: .85; stroke: none; }
.gb .gb-ol { fill: color-mix(in srgb, var(--gb-m) 55%, var(--gb-h)); stroke: none; }
.gb :is(rect, circle, ellipse).gb-sch { fill: rgba(0, 0, 0, .17); stroke: none; }
.gb :is(line, path).gb-sch { stroke: rgba(0, 0, 0, .17); fill: none; }
.gb .gb-hohl { fill: rgba(0, 0, 0, .38); stroke: none; }
.gb .gb-mulde { fill: rgba(0, 0, 0, .42); stroke: none; }
.gb .gb-ringd { fill: none; stroke: var(--gb-d); stroke-width: 3.8; }
.gb .gb-ringm { fill: none; stroke: var(--gb-m); stroke-width: 2.2; }
.gb .gb-lederd { stroke: #6f4220; } .gb .gb-lederm { stroke: #b27a45; }
.gb .gb-leer { stroke: var(--text-3); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.gb .gb-druck { stroke: var(--akzent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Kacheln */
.wizard-griffraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.wizard-griff {
  position: relative; height: auto; min-height: 0; padding: 6px 6px 8px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; white-space: normal;
  text-align: center; color: var(--text); background: var(--flaeche-2); border: 2px solid var(--linie); border-radius: 12px; cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.wizard-griff-bild { display: block; border-radius: 8px; overflow: hidden; background: var(--flaeche); transition: transform var(--motion-base) var(--ease-out); }
.wizard-griff-name { font-size: 12.5px; line-height: 1.25; min-height: 2.5em; display: grid; place-items: center; overflow-wrap: anywhere; }
.wizard-griff:hover { border-color: var(--akzent); transform: translateY(calc(var(--wm-lift, 2px) * -1)); box-shadow: 0 6px 14px rgba(0, 0, 0, .14); }
.wizard-griff:hover .wizard-griff-bild { transform: scale(1.03); }
.wizard-griff:active { transform: none; transition-duration: 60ms; }
.wizard-griff:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset: 2px; }
.wizard-griff.an { border-color: var(--akzent); background: var(--akzent-weich); font-weight: 650; }
.wizard-griff.an::after {
  content: "✓"; position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--akzent); color: var(--akzent-text); font-size: 12px; font-weight: 800; line-height: 1; animation: gr-haken var(--motion-base) cubic-bezier(.34, 1.56, .64, 1) backwards;
}
@keyframes gr-haken { from { opacity: 0; transform: scale(.4); } }

/* ---- Katalog (aufklappbar) */
.wizard-griffkatalog { border: 1px solid var(--linie-2); border-radius: 12px; background: var(--flaeche); overflow: hidden; }
.wizard-griffkatalog > summary {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; list-style: none; min-height: 56px;
  transition: background-color var(--motion-fast) var(--ease-out);
}
.wizard-griffkatalog > summary::-webkit-details-marker { display: none; }
.wizard-griffkatalog > summary:hover { background: var(--flaeche-2); }
.wizard-griffkatalog > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset: -3px; }
.wizard-griff-sumbild { flex: none; width: 76px; border-radius: 8px; overflow: hidden; background: var(--flaeche); border: 1px solid var(--linie); }
.wizard-griff-sumbild:empty { display: none; }
.wizard-griff-sumtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wizard-griff-sumtext strong { font-size: 14.5px; line-height: 1.25; }
.wizard-griff-sumtext small { color: var(--text-2); font-size: 12.5px; line-height: 1.3; }
.wizard-griff-pfeil { flex: none; display: grid; place-items: center; color: var(--akzent); transition: transform var(--motion-base) var(--ease-in-out); }
.wizard-griffkatalog[open] .wizard-griff-pfeil { transform: rotate(180deg); }
.wizard-griffkatalog.hat-wahl { border-color: var(--akzent); }
.wizard-griffgruppe { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.wizard-griffgruppe h5 { margin: 8px 0 0; font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.wizard-griffkatalog[open] > summary { border-bottom: 1px solid var(--linie); }
/* Kacheln steigen beim Aufklappen gestaffelt auf */
@keyframes gr-rein { from { opacity: 0; transform: translateY(var(--wm-hub, 8px)); } }
.wizard-griffkatalog[open] .wizard-griff { animation: gr-rein var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger-step) * .6); }

@media (pointer: coarse) { .wizard-griff { min-height: 72px; } .wizard-griff-name { font-size: 13.5px; } }
@media (max-width: 640px) { .wizard-griffraster { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; } }
:root[data-motion="aus"] .wizard-griff, :root[data-motion="aus"] .wizard-griff *, :root[data-motion="aus"] .wizard-griff::after, :root[data-motion="aus"] .wizard-griffkatalog * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .wizard-griffkatalog[open] .wizard-griff, .wizard-griff.an::after { animation: none; } }
:root[data-motion="reduziert"] .wizard-griffkatalog[open] .wizard-griff { animation: none; }

/* ---- Version 0.42: Kopf von „Tür einstellen“ / „Schubladenfront einstellen“ / „Blende einstellen“ – 2D-Bildzeichen der Art und Frontansicht mit dem gewählten Feld in Grün */
.wizard-isk > summary.wizard-isk-kopf { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; min-height: 64px; }
.wizard-isk > summary.wizard-isk-kopf::before { flex: none; margin-right: 0; }
.wizard-isk-bilder { flex: none; display: flex; align-items: center; gap: 8px; }
.wizard-isk-symbol { display: grid; place-items: center; color: var(--text); }
.wizard-isk-symbol svg { display: block; width: 44px; height: auto; }
.wizard-isk-lagebild { display: grid; place-items: center; padding: 3px; border-radius: 6px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.wizard-isk-lage { display: block; width: 66px; height: 54px; }
.wizard-isk-lage .lage-korpus { fill: var(--flaeche); stroke: var(--text-2); stroke-width: 1.4; }
.wizard-isk-lage .lage-feld { fill: none; stroke: var(--linie-2); stroke-width: 0.8; stroke-dasharray: 2 2; }
.wizard-isk-lage .lage-feld.belegt { fill: color-mix(in srgb, var(--akzent) 16%, transparent); stroke: var(--akzent); stroke-dasharray: none; }
.wizard-isk-lage .lage-feld.sel { fill: rgba(46, 160, 67, .55); stroke: #1f8a3b; stroke-width: 1.6; stroke-dasharray: none; }
.wizard-isk-kopftext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wizard-isk-kopftext strong { font-size: 15.5px; line-height: 1.25; }
.wizard-isk-kopftext small { font-size: 12.5px; font-weight: 400; color: var(--text-2); line-height: 1.3; }
@media (max-width: 420px) { .wizard-isk-symbol svg { width: 36px; } .wizard-isk-lage { width: 54px; height: 44px; } }
/* Auftritt: das grüne Feld blendet kurz auf (nur opacity) */
@keyframes gr-lage-ein { from { opacity: .2; } }
.wizard-isk-lage .lage-feld.sel { animation: gr-lage-ein var(--motion-slow) var(--ease-out) backwards; animation-delay: var(--motion-fast); }
.wizard-isk-symbol svg { animation: gr-lage-ein var(--motion-base) var(--ease-out) backwards; }
:root[data-motion="aus"] .wizard-isk-lage .lage-feld, :root[data-motion="aus"] .wizard-isk-symbol svg { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wizard-isk-lage .lage-feld.sel, .wizard-isk-symbol svg { animation: none; } }

/* ---- Version 0.42: aktive Auswahl im ganzen Assistenten deutlich erkennbar.
   Gewählte Karten, Farbfelder, Griffe und Chips bekommen eine kräftige Füllung in der Akzentfarbe, einen doppelten Rahmen, einen Balken links und eine runde Markierung mit
   Haken; nicht gewählte Karten zeigen einen leeren Kreis (wie bei einer Auswahlliste) – so ist auf einen Blick klar, was gilt. Haken springt ein (nur transform/opacity). */
.wizard .wizard-kachel { position: relative; padding-right: 48px; }
.wizard .wizard-kachel::after {
  content: ""; position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--linie-2); background: var(--flaeche); display: grid; place-items: center; color: transparent; font-size: 13px; font-weight: 800; line-height: 1;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.wizard .wizard-kachel:hover::after { border-color: var(--akzent); }
.wizard .wizard-kachel.an {
  border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 15%, var(--flaeche));
  box-shadow: inset 6px 0 0 var(--akzent), 0 0 0 1px var(--akzent), 0 6px 16px color-mix(in srgb, var(--akzent) 22%, transparent);
}
.wizard .wizard-kachel.an strong { color: color-mix(in srgb, var(--akzent) 78%, var(--text)); }
.wizard .wizard-kachel.an::after { content: "✓"; border-color: var(--akzent); background: var(--akzent); color: var(--akzent-text); animation: gr-haken var(--motion-base) cubic-bezier(.34, 1.56, .64, 1) backwards; }
.wizard .wizard-kachel.an:hover { transform: none; }

.wizard .wizard-farbe.an {
  border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 15%, var(--flaeche));
  box-shadow: inset 5px 0 0 var(--akzent), 0 0 0 1px var(--akzent), 0 5px 14px color-mix(in srgb, var(--akzent) 22%, transparent);
}
.wizard .wizard-farbe.an::after {
  content: "✓"; position: absolute; top: 5px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--akzent); color: var(--akzent-text); font-size: 12px; font-weight: 800; line-height: 1; animation: gr-haken var(--motion-base) cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.wizard .wizard-farbe.an .wizard-farbname { font-weight: 700; }

.wizard .wizard-chip.an { border-color: var(--akzent); background: var(--akzent); color: var(--akzent-text); font-weight: 700; box-shadow: 0 0 0 1px var(--akzent), 0 4px 12px color-mix(in srgb, var(--akzent) 30%, transparent); }
.wizard .wizard-chip.an::before { content: "✓"; margin-right: 6px; font-weight: 800; animation: gr-haken var(--motion-base) cubic-bezier(.34, 1.56, .64, 1) backwards; }

.wizard .wizard-griff.an {
  border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 15%, var(--flaeche));
  box-shadow: 0 0 0 1px var(--akzent), 0 6px 16px color-mix(in srgb, var(--akzent) 24%, transparent);
}
.wizard .wizard-griff.an::after { top: 8px; right: 8px; width: 24px; height: 24px; font-size: 14px; }
.wizard .wizard-griff:not(.an)::after { content: ""; position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--linie-2); background: color-mix(in srgb, var(--flaeche) 80%, transparent); }

.wizard .gestalter-art.an, .wizard .gestalter-schritt.an, .wizard .gestalter-reiter-knopf.an, .wizard .gestalter-seite-knopf.an {
  border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 16%, var(--flaeche)); color: var(--text); font-weight: 700;
  box-shadow: inset 0 -4px 0 var(--akzent), 0 0 0 1px var(--akzent);
}
.wizard .gestalter-art.an .front-symbol { color: var(--akzent); }

:root[data-motion="aus"] .wizard .wizard-kachel.an::after, :root[data-motion="aus"] .wizard .wizard-farbe.an::after, :root[data-motion="aus"] .wizard .wizard-chip.an::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wizard .wizard-kachel.an::after, .wizard .wizard-farbe.an::after, .wizard .wizard-chip.an::before { animation: none; } }