/* Motion-System des Assistenten (Version 0.40) – dezente Übergänge, alles über Tokens.
   Gesteuert von js/ui/wizard-motion.js (setzt nur Variablen --i, Klassen wm-* und Attribute am Dialog), Werte gespiegelt in js/motion-config.js.
   Animiert wird nur transform, opacity, clip-path (und beim Hover der Schatten). Schalter: <html data-motion="an | reduziert | aus">;
   Verlangsamung zum Beurteilen: ?motionslow=5 (setzt --motion-scale). */
:root {
  --motion-scale: 1;
  --motion-fast: calc(160ms * var(--motion-scale));       /* Micro-Interaktionen: Hover, Auswahl, Häkchen */
  --motion-base: calc(260ms * var(--motion-scale));       /* Elementwechsel: Karten, Meldungen */
  --motion-slow: calc(420ms * var(--motion-scale));       /* Fortschritt, Abschluss */
  --motion-step: calc(380ms * var(--motion-scale));       /* Schrittübergang (max. 450 ms) */
  --ease-out: cubic-bezier(.2, .7, .2, 1);                /* Eintritte */
  --ease-in-out: cubic-bezier(.45, 0, .25, 1);            /* Positionswechsel */
  --stagger-step: calc(45ms * var(--motion-scale));       /* Abstand je Karte (max. 40–60 ms) */
  --wm-versatz: 16px;                                     /* Seitenversatz beim Schrittwechsel (12–24 px) */
  --wm-hub: 8px;                                          /* Eintritt der Karten von unten */
  --wm-lift: 2px;                                         /* Hover-Lift */
  --wm-skala: .96;                                        /* Startgröße des Haupt-Knopfs im Abschluss */
}
/* Reduzierte Bewegung: keine Versätze, keine Staffelung, nur kurzes Ein-/Ausblenden */
:root[data-motion="reduziert"] {
  --motion-fast: 80ms; --motion-base: 100ms; --motion-slow: 120ms; --motion-step: 120ms; --stagger-step: 0ms;
  --wm-versatz: 0px; --wm-hub: 0px; --wm-lift: 0px; --wm-skala: 1;
}

/* ---- Schrittübergang: Frage und Inhalt gleiten richtungsabhängig ein (Dialogattribut data-richtung, vom Motion-Modul nach dem Übergang entfernt) */
@keyframes wm-ein-vor { from { opacity: 0; transform: translateX(var(--wm-versatz)); } to { opacity: 1; transform: none; } }
@keyframes wm-ein-zurueck { from { opacity: 0; transform: translateX(calc(var(--wm-versatz) * -1)); } to { opacity: 1; transform: none; } }
@keyframes wm-karte { from { opacity: 0; transform: translateY(var(--wm-hub)); } to { opacity: 1; transform: none; } }
@keyframes wm-aus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(var(--wm-aus-x, -12px)); } }
.wizard[data-richtung="vor"] .wizard-frage { animation: wm-ein-vor var(--motion-step) var(--ease-out) backwards; }
.wizard[data-richtung="zurueck"] .wizard-frage { animation: wm-ein-zurueck var(--motion-step) var(--ease-out) backwards; }
.wizard[data-richtung="vor"] .wizard-koerper { animation: wm-ein-vor var(--motion-step) var(--ease-out) backwards; }
.wizard[data-richtung="zurueck"] .wizard-koerper { animation: wm-ein-zurueck var(--motion-step) var(--ease-out) backwards; }
/* Karten, Chips, Farbfelder und Zusammenfassung: gestaffelt (Index --i setzt das Motion-Modul, begrenzt auf die Gesamtdauer) */
.wizard[data-richtung] :is(.wizard-kachel, .wizard-chip, .wizard-farbe, .wizard-zaehler-zeile, .wizard-zusammen > *, .wizard-preisblock) {
  animation: wm-karte var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger-step)); }
/* abtretender Inhalt (Kopie, vom Motion-Modul angelegt): blendet kurz aus, ohne den neuen Inhalt zu bremsen */
body.wizard-modus dialog.wizard[open] { position: relative; inset: auto; }   /* Bezug für die Kopie des abtretenden Inhalts */
.wm-geist { position: absolute; pointer-events: none; overflow: hidden; z-index: 2; background: var(--flaeche); animation: wm-aus var(--motion-fast) var(--ease-in-out) forwards; }

/* in der Kopie ruht alles (sonst spielt der Eintritt der Karten dort erneut) */
.wm-geist *, .wm-geist *::before, .wm-geist *::after { animation: none !important; transition: none !important; }

/* ---- Fortschrittsanzeige: Füllbalken je Schritt, Häkchen zeichnet sich ein */
@keyframes wm-fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wm-haken { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wm-punkt { from { transform: scale(.82); } to { transform: none; } }
.wizard-leiste li button { position: relative; transition: color var(--motion-slow) var(--ease-in-out); }
.wizard-leiste li.fertig button, .wizard-leiste li.aktuell button { border-top-color: var(--linie); }
.wizard-leiste li button::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--akzent); transform: scaleX(0); transform-origin: left center; }
.wizard-leiste li.fertig button::before, .wizard-leiste li.aktuell button::before { transform: none; }
.wizard-leiste li.wm-neu button::before { animation: wm-fuellen var(--motion-slow) var(--ease-in-out) backwards; }
.wizard-leiste li.wm-neu.aktuell .wizard-nr, .wizard-leiste li.wm-zurueck.aktuell .wizard-nr { animation: wm-punkt var(--motion-base) var(--ease-out) backwards; }
.wizard-leiste li.wm-fertig.fertig .wizard-haken { animation: wm-haken var(--motion-slow) var(--ease-out) backwards; }
.wizard-leiste li { transition: none; }
.wizard-haken { display: inline-block; }

/* ---- Optionskarten: Hover, Auswahl */
.wizard-kachel, .wizard-chip, .wizard-farbe, .wizard .gestalter-art {
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.wizard-kachel:hover, .wizard-farbe:hover, .wizard .gestalter-art:hover { transform: translateY(calc(var(--wm-lift) * -1)); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.wizard-kachel:active, .wizard-chip:active, .wizard-farbe:active { transform: none; transition-duration: 60ms; }
.wizard-kachel.an::after { animation: wm-haken var(--motion-fast) var(--ease-out) backwards; }
.wizard-fuss button, .wizard-ziele button, .wizard-ablage button, .wizard .knopfreihe button, .wizard .frage-reihe button {
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out); }
.wizard-weiter:not(:disabled):hover { filter: brightness(1.12) saturate(1.05); transform: translateY(calc(var(--wm-lift) * -1)); box-shadow: 0 6px 14px rgba(0, 0, 0, .22); }
.wizard-weiter:not(:disabled):active { transform: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); filter: brightness(.95); }
.wizard-weiter .sym, .wizard-weiter svg { transition: transform var(--motion-fast) var(--ease-out); }
.wizard-weiter:not(:disabled):hover .sym, .wizard-weiter:not(:disabled):hover svg { transform: translateX(calc(var(--wm-lift) * 1.5)); }
.wizard-zurueck:hover { transform: translateX(calc(var(--wm-lift) * -1)); }
.wizard-weiter:focus-visible, .wizard-zurueck:focus-visible, .wizard-kachel:focus-visible, .wizard-chip:focus-visible, .wizard-farbe:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset: 2px; }
.wizard-weiter:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Preis- und Wertanzeigen: feste Ziffernbreite, dezenter Hinweisblitz nach der Änderung, ruhiger Platzhalter beim Warten */
@keyframes wm-blitz { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wm-schimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.wizard-preis, .wizard-preisblock { position: relative; isolation: isolate; border-radius: 6px; }
.wizard-preis strong, .wizard-preisblock strong, .wizard-zahl, .wizard-zaehl-wert, .wizard-zusammen dd { font-variant-numeric: tabular-nums; }
.wizard-preis::after, .wizard-preisblock::after { content: ""; position: absolute; inset: -2px -4px; border-radius: inherit; background: var(--akzent-weich); opacity: 0; pointer-events: none; z-index: -1; }
.wizard-preis.wm-blitz::after, .wizard-preisblock.wm-blitz::after { animation: wm-blitz var(--motion-slow) var(--ease-out); }
.wizard-preis.wm-wartet strong { position: relative; display: inline-block; min-width: 6ch; overflow: hidden; border-radius: 4px; background: var(--flaeche-3); color: transparent; }
.wizard-preis.wm-wartet strong::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--flaeche) 70%, transparent), transparent); animation: wm-schimmer 1.1s var(--ease-in-out) 3; }
:root[data-motion="reduziert"] .wizard-preis.wm-wartet strong::after { animation: none; }

/* ---- Rückmeldungen: Meldung blendet ein; das Schütteln selbst steuert das Motion-Modul (Web Animations API) */
.wizard-problem:not([hidden]) { animation: wm-karte var(--motion-base) var(--ease-out) backwards; }
.wizard .wm-fehler { outline: 2px solid color-mix(in srgb, #c2413a 55%, transparent); outline-offset: 2px; }

/* ---- Abschluss: Zusammenfassung gestaffelt, Haupt-Knopf tritt sanft hervor */
@keyframes wm-cta { from { opacity: 0; transform: scale(var(--wm-skala)); } to { opacity: 1; transform: none; } }
.wizard[data-richtung][data-schritt="fertig"] .wizard-ablage .primaer { animation: wm-cta var(--motion-slow) var(--ease-out) backwards; animation-delay: var(--wm-cta-delay, 0ms); }

/* ---- Abschalten */
:root[data-motion="aus"] .wizard *, :root[data-motion="aus"] .wizard *::before, :root[data-motion="aus"] .wizard *::after, :root[data-motion="aus"] .wm-geist { animation: none !important; transition: none !important; }

/* ---- Version 0.40 (Ergänzung): weitere dezente Bewegungen */
:root { --wm-panel-x: 28px; --wm-pop: 6px; }
:root[data-motion="reduziert"] { --wm-panel-x: 0px; --wm-pop: 0px; }
/* Assistent öffnet: das Fenster gleitet von rechts ein (Klasse wm-panel setzt das Motion-Modul beim Öffnen) */
@keyframes wm-panel-ein { from { opacity: 0; transform: translateX(var(--wm-panel-x)); } to { opacity: 1; transform: none; } }
.wizard.wm-panel { animation: wm-panel-ein var(--motion-slow) var(--ease-out) backwards; }
/* Schrittzähler im Kopf folgt dem Übergang */
.wizard[data-richtung] .wizard-zaehler { display: inline-block; animation: wm-karte var(--motion-base) var(--ease-out) backwards; }
/* bedingte Bereiche (z. B. Eingabefeld „Individuell …“) blenden ein, statt zu springen */
.wizard-koerper .wizard-bedingt:not([hidden]) { animation: wm-karte var(--motion-base) var(--ease-out) backwards; }
/* Wertwechsel an Zählern (±): die Zahl rutscht kurz ein (Klasse wm-wert setzt das Motion-Modul) */
@keyframes wm-wert { from { opacity: .25; transform: translateY(var(--wm-pop)); } to { opacity: 1; transform: none; } }
.wizard-zaehl-wert.wm-wert { display: inline-grid; animation: wm-wert var(--motion-fast) var(--ease-out); }
/* Regler: der Griff wächst beim Anfassen */
.wizard .regler::-webkit-slider-thumb { transition: transform var(--motion-fast) var(--ease-out); }
.wizard .regler::-moz-range-thumb { transition: transform var(--motion-fast) var(--ease-out); }
.wizard .regler:active::-webkit-slider-thumb { transform: scale(1.18); }
.wizard .regler:active::-moz-range-thumb { transform: scale(1.18); }
:root[data-motion="reduziert"] .wizard .regler:active::-webkit-slider-thumb, :root[data-motion="reduziert"] .wizard .regler:active::-moz-range-thumb { transform: none; }
/* Farbfelder: gewähltes Muster sitzt etwas größer, Wechsel gleitet */
.wizard-farbe .wizard-muster { transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.wizard-farbe.an .wizard-muster { transform: scale(calc(1 + var(--wm-lift) * .03)); box-shadow: 0 0 0 2px var(--akzent); }
/* Eingabefelder: Fokusring gleitet ein */
.wizard-eingabe, .wizard-zahl { transition: box-shadow var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
.wizard-eingabe:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 30%, transparent); }
/* Fortschrittsleiste gleitet weich zum aktiven Schritt (schmale Bildschirme) */
.wizard-leiste { scroll-behavior: smooth; }
:root[data-motion="reduziert"] .wizard-leiste, :root[data-motion="aus"] .wizard-leiste { scroll-behavior: auto; }

/* ---- Version 0.42: Eröffnung des Assistenten (Klasse wm-start an Dialog und body, setzt das Motion-Modul beim Öffnen, ca. 1,9 s).
   Ablauf: Trennlinie zeichnet sich zwischen 3D-Bild und Panel · Kopf und Fortschrittspunkte treten der Reihe nach auf · die Frage wird aufgedeckt ·
   die Karten steigen gestaffelt auf, ihre Linienbilder werden aufgedeckt · das 3D-Bild fährt sanft heran. Nur transform, opacity, clip-path. */
@keyframes wm-wisch { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wm-rein { from { opacity: 0; transform: translateY(calc(var(--wm-hub) * .75)); } to { opacity: 1; transform: none; } }
@keyframes wm-linie { 0% { opacity: 0; transform: scaleY(0); } 25% { opacity: 1; } 55% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
@keyframes wm-szene { from { opacity: .45; transform: scale(1.035); } to { opacity: 1; transform: none; } }
body.wizard-modus dialog.wizard.wm-start::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 3; pointer-events: none; transform-origin: top center;
  background: linear-gradient(180deg, transparent, var(--akzent) 18%, var(--akzent) 82%, transparent);
  animation: wm-linie calc(var(--motion-slow) * 4) var(--ease-in-out) both; }
.wizard.wm-start .wizard-kopf-titel h2 { animation: wm-rein var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--motion-fast) * .75); }
.wizard.wm-start .wizard-zaehler { animation: wm-rein var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--motion-fast) * 1.3); }
.wizard.wm-start .wizard-schnell-hinweis { animation: wm-rein var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--motion-fast) * 1.8); }
.wizard.wm-start .wizard-leiste li { animation: wm-rein var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--motion-fast) * 2 + var(--k, 0) * var(--stagger-step)); }
.wizard.wm-start .wizard-frage h3 { animation: wm-wisch calc(var(--motion-slow) * 1.5) var(--ease-in-out) backwards; animation-delay: calc(var(--motion-base) * 1.4); }
.wizard.wm-start .wizard-hilfe { animation: wm-rein var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--motion-slow) * 1.6); }
.wizard.wm-start[data-richtung] :is(.wizard-kachel, .wizard-chip, .wizard-farbe, .wizard-zaehler-zeile) {
  animation-delay: calc(var(--motion-slow) * 1.7 + var(--i, 0) * var(--stagger-step) * 1.4); }
.wizard.wm-start .wizard-kachel .wizard-bild { animation: wm-wisch calc(var(--motion-slow) * 1.5) var(--ease-in-out) backwards; animation-delay: calc(var(--motion-slow) * 2.1 + var(--i, 0) * var(--stagger-step) * 1.4); }
.wizard.wm-start .wizard-leise { animation: wm-rein var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--motion-slow) * 3); }
.wizard.wm-start .wizard-fuss { animation: wm-rein var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--motion-slow) * 3.2); }
body.wm-start #viewer canvas { animation: wm-szene calc(var(--motion-slow) * 3.4) var(--ease-out) backwards; }
:root[data-motion="reduziert"] body.wm-start #viewer canvas, :root[data-motion="aus"] body.wm-start #viewer canvas, :root[data-motion="aus"] dialog.wizard.wm-start::before { animation: none; }
:root[data-motion="reduziert"] dialog.wizard.wm-start::before { display: none; }

/* ---- Version 0.42: Hinweis „Weitere Einstellungen“ – gilt auf jedem Gerät, sobald unter dem sichtbaren Bereich noch Einstellungen liegen.
   Dezent: weicher Verlauf am unteren Rand, Knopf (klickbar: scrollt weiter) tritt nach dem Aufbau des Schritts ein, ein leiser Ring und das Chevron
   weisen dreimal nach unten und ruhen dann; Schatten am oberen Rand und dünne Bildlaufleiste zeigen, dass der Bereich scrollt. Verschwindet am Ende. */
@keyframes wm-mehr-ein { from { opacity: 0; transform: translateX(-50%) translateY(calc(var(--wm-hub) * 1.5)) scale(var(--wm-skala)); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes wm-mehr-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.55); } }
@keyframes wm-mehr-nick { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
/* Assistentenkörper: Hinweis als Geschwister direkt unter dem scrollenden Bereich (nicht sticky) – steht fest am unteren Rand, auch beim Scrollen */
.wizard-mehr.aussen { position: relative; bottom: auto; margin: 0; padding: 0; height: 0; z-index: 3; }
.wizard-mehr.aussen::before { left: 0; right: 0; bottom: 0; height: 92px; transition: opacity var(--motion-base) var(--ease-out); }
.wizard-mehr.aussen .wizard-mehr-knopf { bottom: 12px; }
.wizard-mehr-knopf {
  min-height: 42px; padding: 4px 18px 4px 14px; font-size: 14.5px; background: var(--akzent-weich); cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--akzent) 28%, transparent), 0 1px 3px rgba(0, 0, 0, .18);
  transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); }
.wizard-mehr-knopf::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--akzent); border-radius: inherit; opacity: 0; pointer-events: none; }
.wizard-mehr.sichtbar .wizard-mehr-knopf:hover { background: var(--flaeche); transform: translateX(-50%) translateY(calc(var(--wm-lift) * -1)); }
.wizard-mehr-knopf:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset: 2px; }
.wizard[data-richtung] .wizard-mehr.sichtbar .wizard-mehr-knopf { animation: wm-mehr-ein var(--motion-slow) var(--ease-out) backwards; animation-delay: calc(var(--motion-slow) * 2.6); }
.wizard-mehr.sichtbar .wizard-mehr-knopf::after { animation: wm-mehr-ring calc(var(--motion-slow) * 3.2) var(--ease-out) calc(var(--motion-slow) * 3.2) 3; }
.wizard-mehr.sichtbar .wizard-mehr-knopf [sym], .wizard-mehr.sichtbar .wizard-mehr-knopf svg { animation: wm-mehr-nick calc(var(--motion-slow) * 3.2) var(--ease-in-out) calc(var(--motion-slow) * 3.2) 3; }
body.wizard-modus .wizard-koerper { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--akzent) 55%, transparent) transparent; transition: box-shadow var(--motion-base) var(--ease-out); }
body.wizard-modus .wizard-koerper.gescrollt { box-shadow: inset 0 14px 12px -14px rgba(0, 0, 0, .38); }
:root[data-motion="reduziert"] .wizard-mehr-knopf::after, :root[data-motion="reduziert"] .wizard-mehr.sichtbar .wizard-mehr-knopf [sym], :root[data-motion="reduziert"] .wizard-mehr.sichtbar .wizard-mehr-knopf svg { animation: none; }
:root[data-motion="aus"] .wizard-mehr-knopf, :root[data-motion="aus"] .wizard-mehr-knopf::after, :root[data-motion="aus"] .wizard-mehr-knopf *, :root[data-motion="aus"] .wizard-koerper { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .wizard-mehr-knopf::after { animation: none !important; } }

/* ---- Version 0.42: Feldwahl im Assistenten – das gewählte Feld ist in der Zeichnung und im 3D-Bild grün (js/ui/feldmarkierung.js). Klick im 3D-Bild wählt das Feld:
   die Zeichnung rollt ins Sichtfeld, das grüne Feld und der Kasten darunter leuchten kurz auf. Nur opacity/transform. */
@keyframes wm-feld-blitz { 0% { opacity: .3; } 45% { opacity: 1; } 60% { opacity: .55; } 100% { opacity: 1; } }
.gestalter-gruen { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #1f8a3b; }
.gestalter-gruen-punkt { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #2ea043; box-shadow: 0 0 0 3px rgba(46, 160, 67, .25); }
.wizard .g-feld.gewaehlt.aus-bild { animation: wm-feld-blitz calc(var(--motion-slow) * 2.4) var(--ease-in-out); }
.wizard .gestalter-wahl.aus-bild { animation: wm-karte var(--motion-base) var(--ease-out); }
.wizard .gestalter-wahl.aus-bild .gestalter-gruen-punkt { animation: wm-feld-blitz calc(var(--motion-slow) * 2.4) var(--ease-in-out); }
:root[data-motion="aus"] .wizard .aus-bild, :root[data-motion="aus"] .wizard .aus-bild * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wizard .aus-bild, .wizard .aus-bild * { animation: none !important; } }
.wizard .gestalter-wahl { scroll-margin-top: 6px; }

/* ---- Version 0.42: Schritt „Rückwand“ – die Schnittbilder der Montage setzen die Rückwand ein (gewählte Kachel beim Aufbau, andere beim Überfahren/Antippen).
   Falz/Nut/aufgesetzt: die Platte gleitet von hinten ein, aufgesetzt: danach setzen sich die Schrauben; „Nein, offen“: die Linie blendet ein. Nur transform/opacity. */
@keyframes wm-rw-ein { from { opacity: 0; transform: translateY(26px); } }
@keyframes wm-rw-schraube { 0% { opacity: 0; transform: scale(0); } 65% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wm-rw-linie { from { opacity: 0; } }
.wizard-bild-gross .w-schraube { transform-box: fill-box; transform-origin: center; }
:is(.wizard-kachel.an, .wizard-kachel:hover) .wizard-bild-gross .w-flaeche.rueck { animation: wm-rw-ein calc(var(--motion-slow) * 1.5) var(--ease-out) backwards; animation-delay: var(--motion-fast); }
:is(.wizard-kachel.an, .wizard-kachel:hover) .wizard-bild-gross .w-schraube { animation: wm-rw-schraube var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--motion-slow) * 1.7 + var(--motion-fast)); }
:is(.wizard-kachel.an, .wizard-kachel:hover) .wizard-bild-gross .w-linie.keine { animation: wm-rw-linie var(--motion-slow) var(--ease-out) backwards; animation-delay: var(--motion-fast); }
.wizard[data-richtung] .wizard-rw-tipp { animation: wm-karte var(--motion-base) var(--ease-out) backwards; }
:root[data-motion="aus"] .wizard-bild-gross * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wizard-bild-gross * { animation: none !important; } }

/* ---- Version 0.42: Seitenplatten im Schritt „Deckplatte & Seiten“ – Schalter und Einstellungen (Dicke 3 – 60 mm, bis zum Boden) bilden ein Element */
.wizard-seitenplatte { display: flex; flex-direction: column; }
.wizard-seitenplatte.an > .wizard-kachel { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.wizard-seitenplatte-innen:not([hidden]) {
  display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; border: 2px solid var(--akzent); border-top: 0; border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--akzent-weich) 55%, var(--flaeche)); animation: wm-karte var(--motion-base) var(--ease-out) backwards; }
.wizard-seitenplatte-innen .wizard-kachel { min-height: 0; padding: 8px 12px; }

/* =====================================================================================================================================
   Version 0.44 – „Weiter“ wird auffällig, Mini-Assistent „Material & Farbe“, Hero-Bereich „Elemente“, Rückwand-Skizze, LED der Glasböden.
   Alles über die Tokens oben; animiert wird nur transform, opacity, clip-path. Reduzierte Bewegung / data-motion="aus": nur ruhige, statische Hervorhebung.
   ===================================================================================================================================== */
:root { --wm-puls: calc(2200ms * var(--motion-scale)); --wm-nick: calc(1300ms * var(--motion-scale)); --wm-zug: calc(2800ms * var(--motion-scale)); }

/* ---- „Weiter“ leuchtet auf, sobald der Schritt entschieden ist (Klasse `bereit`, Ereignis wizard:bereit): Ring-Welle, nickender Pfeil, Hinweis daneben */
@keyframes wm-bereit-ring { 0% { opacity: .65; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.14, 1.55); } }
@keyframes wm-bereit-pfeil { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.wizard-weiter, .wizard-mini-weiter { position: relative; isolation: isolate; }
.wizard-weiter.bereit, .wizard-mini-weiter.bereit {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 28%, transparent), 0 8px 20px -6px color-mix(in srgb, var(--akzent) 70%, transparent); filter: saturate(1.15) brightness(1.04); }
.wizard-weiter.bereit::before, .wizard-weiter.bereit::after, .wizard-mini-weiter.bereit::before, .wizard-mini-weiter.bereit::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; border: 2px solid var(--akzent); opacity: 0; pointer-events: none; }
.wizard-weiter.bereit::before, .wizard-mini-weiter.bereit::before { animation: wm-bereit-ring var(--wm-puls) var(--ease-out) infinite; }
.wizard-weiter.bereit::after, .wizard-mini-weiter.bereit::after { animation: wm-bereit-ring var(--wm-puls) var(--ease-out) calc(var(--wm-puls) * .5) infinite; }
.wizard-weiter.bereit .sym, .wizard-weiter.bereit svg, .wizard-mini-weiter.bereit .sym, .wizard-mini-weiter.bereit svg { animation: wm-bereit-pfeil var(--wm-nick) var(--ease-in-out) infinite; }
.wizard-fuss { align-items: center; }
.wizard-bereit-hinweis { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px; text-align: center; font-size: 13.5px; font-weight: 650; line-height: 1.25; color: var(--akzent); }
.wizard-bereit-hinweis[hidden] { display: none; }
.wizard-bereit-hinweis:not([hidden]) { animation: wm-karte var(--motion-base) var(--ease-out) backwards; }
.wizard-bereit-haken { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--akzent); color: #fff; font-size: 13px; }
.wizard-bereit-hinweis:not([hidden]) .wizard-bereit-haken { animation: wm-haken var(--motion-slow) var(--ease-out) var(--motion-fast) backwards; }
@media (max-width: 520px) { .wizard-bereit-hinweis { font-size: 12px; } .wizard-bereit-haken { display: none; } }
:root[data-motion="reduziert"] .wizard-weiter.bereit::before, :root[data-motion="reduziert"] .wizard-weiter.bereit::after, :root[data-motion="reduziert"] .wizard-mini-weiter.bereit::before, :root[data-motion="reduziert"] .wizard-mini-weiter.bereit::after,
:root[data-motion="aus"] .wizard-weiter.bereit::before, :root[data-motion="aus"] .wizard-weiter.bereit::after, :root[data-motion="aus"] .wizard-mini-weiter.bereit::before, :root[data-motion="aus"] .wizard-mini-weiter.bereit::after { animation: none; opacity: .55; inset: -4px; }
:root[data-motion="reduziert"] .wizard-weiter.bereit .sym, :root[data-motion="reduziert"] .wizard-weiter.bereit svg, :root[data-motion="reduziert"] .wizard-mini-weiter.bereit .sym, :root[data-motion="reduziert"] .wizard-mini-weiter.bereit svg,
:root[data-motion="aus"] .wizard-weiter.bereit .sym, :root[data-motion="aus"] .wizard-weiter.bereit svg, :root[data-motion="aus"] .wizard-mini-weiter.bereit .sym, :root[data-motion="aus"] .wizard-mini-weiter.bereit svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .wizard-weiter.bereit::before, .wizard-weiter.bereit::after, .wizard-mini-weiter.bereit::before, .wizard-mini-weiter.bereit::after, .wizard-weiter.bereit svg, .wizard-mini-weiter.bereit svg { animation: none !important; } }

/* ---- Mini-Assistent im Schritt „Material & Farbe“: Fortschrittspunkte, bisherige Antworten, eine Frage je Karte mit Hilfe, Tipp und eigenem „Weiter“ */
.wizard-mini { display: flex; flex-direction: column; gap: 14px; }
.wizard-mini-punkte { display: flex; list-style: none; margin: 0; padding: 0; }
.wizard-mini-punkte li { position: relative; flex: 1 1 0; min-width: 0; }
.wizard-mini-punkte li + li::before { content: ""; position: absolute; top: 17px; left: calc(-50% + 19px); right: calc(50% + 19px); height: 3px; border-radius: 2px; background: var(--linie); }
.wizard-mini-punkte li + li::after { content: ""; position: absolute; top: 17px; left: calc(-50% + 19px); right: calc(50% + 19px); height: 3px; border-radius: 2px; background: var(--akzent); transform: scaleX(0); transform-origin: left center; transition: transform var(--motion-slow) var(--ease-in-out); }
.wizard-mini-punkte li.fertig + li::after, .wizard-mini-punkte li.fertig + li.aktuell::after { transform: scaleX(1); }
.wizard-mini-punkte button { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; padding: 0 2px; border: 0; background: none; color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.wizard-mini-nr { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--linie); border-radius: 50%; background: var(--flaeche); color: var(--text-2); font-weight: 700; font-size: 14px;
  transition: background-color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); }
.wizard-mini-haken { display: none; }
.wizard-mini-punkte li.aktuell .wizard-mini-nr { border-color: var(--akzent); color: var(--akzent); box-shadow: 0 0 0 5px var(--akzent-weich); transform: scale(1.06); }
.wizard-mini-punkte li.aktuell button { color: var(--text); font-weight: 650; }
.wizard-mini-punkte li.fertig .wizard-mini-nr { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.wizard-mini-punkte li.fertig .wizard-mini-zahl { display: none; }
.wizard-mini-punkte li.fertig .wizard-mini-haken { display: block; animation: wm-haken var(--motion-slow) var(--ease-out) backwards; }
.wizard-mini-punkte li.fertig.aktuell .wizard-mini-nr { box-shadow: 0 0 0 5px var(--akzent-weich); }
.wizard-mini-bilanz { display: flex; flex-wrap: wrap; gap: 6px; }
.wizard-mini-bilanz[hidden] { display: none; }
.wizard-mini-chip { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; height: auto; min-height: 44px; max-width: 100%; padding: 4px 12px; white-space: normal; line-height: 1.25; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche-2); color: var(--text); text-align: left; cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); }
.wizard-mini-chip:hover { border-color: var(--akzent); background: var(--akzent-weich); }
.wizard-mini-chip small { font-size: 11.5px; color: var(--text-2); letter-spacing: .02em; }
.wizard-mini-chip strong { font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; }
.wizard-mini-bilanz.fertig .wizard-mini-chip { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }
.wizard-mini-karte { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 2px solid color-mix(in srgb, var(--akzent) 38%, var(--linie)); border-radius: 16px; background: var(--flaeche); box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--akzent) 60%, transparent); }
.wizard-mini-karte[hidden] { display: none; }
.wizard-mini-karte[data-richtung="vor"] { animation: wm-ein-vor var(--motion-step) var(--ease-out) backwards; }
.wizard-mini-karte[data-richtung="zurueck"] { animation: wm-ein-zurueck var(--motion-step) var(--ease-out) backwards; }
.wizard-mini-karte[data-richtung] :is(.wizard-kachel, .wizard-chip, .wizard-farbe) { animation: wm-karte var(--motion-base) var(--ease-out) backwards; animation-delay: calc(var(--motion-fast) + var(--i, 0) * var(--stagger-step)); }
.wizard-mini-kopf { display: flex; flex-direction: column; gap: 2px; }
.wizard-mini-frage-nr { font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); }
.wizard-mini-kopf h4 { margin: 0; font-size: 1.22em; line-height: 1.25; text-transform: none; letter-spacing: 0; color: var(--text); }
.wizard-mini-hilfe, .wizard-mini-tipp { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.wizard-mini-hilfe { background: var(--flaeche-2); border: 1px solid var(--linie); }
.wizard-mini-tipp { background: var(--akzent-weich); }
.wizard-mini-icon { flex: none; display: inline-grid; place-items: center; color: var(--akzent); margin-top: 1px; }
.wizard-mini-inhalt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wizard-mini-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 2px; }
.wizard-mini-nav button { min-height: 46px; padding-inline: 18px; }
.wizard-mini-weiter { margin-left: auto; }
:root[data-motion="aus"] .wizard-mini *, :root[data-motion="aus"] .wizard-mini-karte { animation: none !important; transition: none !important; }

/* ---- Hero-Bereich im Schritt „Elemente“: Palette und 2D-Skizze in einem Rahmen; zwei Hinweise zeigen beide Ziele, ein Geist-Symbol macht das Ziehen vor */
@keyframes wm-hero-ab { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes wm-hero-schub { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes wm-hero-links { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes wm-hero-zug { 0% { opacity: 0; transform: translate(var(--x0, 0), var(--y0, 0)) scale(1); } 12% { opacity: 1; transform: translate(var(--x0, 0), var(--y0, 0)) scale(1.08); }
  68% { opacity: 1; transform: translate(var(--x1, 0), var(--y1, 0)) scale(1); } 82% { opacity: 1; transform: translate(var(--x1, 0), var(--y1, 0)) scale(.9); } 100% { opacity: 0; transform: translate(var(--x1, 0), var(--y1, 0)) scale(.8); } }
.gestalter-hero { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 14px; border: 2px solid color-mix(in srgb, var(--akzent) 42%, var(--linie)); border-radius: 18px;
  background: linear-gradient(180deg, var(--akzent-weich), var(--flaeche) 70%); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--akzent) 70%, transparent); }
.gestalter-hero > .gestalter-palette { margin: 0; padding: 0; border: 0; background: none; }
.gestalter-hero-ziele { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; font-size: 13px; font-weight: 650; }
.gestalter-hero-ziel { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 12px; border: 1px solid color-mix(in srgb, var(--akzent) 35%, var(--linie)); border-radius: 999px; background: var(--flaeche); color: var(--akzent); }
.gestalter-hero-ziel .pfeil { display: inline-flex; flex: none; }
.gestalter-hero-ziel.bild .pfeil svg { transform: scaleX(-1); }
.gestalter-hero-ziel.skizze .pfeil svg { transform: rotate(90deg); }
.gestalter-hero-ziel.bild .pfeil { animation: wm-hero-links var(--wm-nick) var(--ease-in-out) 6; }
.gestalter-hero-ziel.skizze .pfeil { animation: wm-hero-ab var(--wm-nick) var(--ease-in-out) 6; animation-delay: calc(var(--wm-nick) * .4); }
.gestalter-hero-oder { color: var(--text-2); font-weight: 500; }
.gestalter-hero-skizze { border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); padding: 6px; }
.gestalter-hero-skizze .gestalter-bild { margin: 0; }
.gestalter-hero-geist { position: absolute; left: 0; top: 0; z-index: 5; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2px solid var(--akzent); border-radius: 12px; background: var(--flaeche);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28); opacity: 0; pointer-events: none; }
.gestalter-hero-geist.laeuft { animation: wm-hero-zug var(--wm-zug) var(--ease-in-out) 1 both; }
.gestalter-hero .g-feld.ablage-ziel .g-flaeche { fill: color-mix(in srgb, var(--akzent) 40%, transparent); stroke: var(--akzent); stroke-width: 3.5; }
:root[data-motion="reduziert"] .gestalter-hero-ziel .pfeil, :root[data-motion="aus"] .gestalter-hero-ziel .pfeil { animation: none; }
:root[data-motion="reduziert"] .gestalter-hero-geist, :root[data-motion="aus"] .gestalter-hero-geist { display: none; }
@media (prefers-reduced-motion: reduce) { .gestalter-hero-ziel .pfeil { animation: none !important; } .gestalter-hero-geist { display: none; } }

/* ---- Schritt „Rückwand“: aufgesetzte Rückwand mit langen Schrauben (drehen sich ins Hirnholz der Seitenwand), Hinweis bei „Nein, offen“ */
@keyframes wm-rw-eindrehen { 0% { opacity: 0; transform: translateY(30px); } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes wm-rw-hinweis { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wizard-bild-gross .w-schraube { transform-box: fill-box; transform-origin: center; fill: none; }
.wizard-bild-gross .w-schraube .schaft { fill: #c4c9d2; stroke: currentColor; stroke-width: .6; }
.wizard-bild-gross .w-schraube .kopf { fill: #8f95a1; stroke: currentColor; stroke-width: .6; }
.wizard-bild-gross .w-schraube .gewinde { stroke: currentColor; stroke-width: .9; stroke-linecap: round; opacity: .55; fill: none; }
:is(.wizard-kachel.an, .wizard-kachel:hover) .wizard-bild-gross .w-schraube { animation: wm-rw-eindrehen calc(var(--motion-slow) * 1.6) var(--ease-out) backwards; animation-delay: calc(var(--motion-slow) * 1.5 + var(--motion-fast)); }
.wizard-bild-gross .w-hinweisbox rect { fill: var(--akzent-weich); stroke: var(--akzent); stroke-width: 1.2; stroke-dasharray: 3 2.2; }
.wizard-bild-gross .w-hinweisbox text { fill: var(--text); }
:is(.wizard-kachel.an, .wizard-kachel:hover) .wizard-bild-gross .w-hinweisbox { animation: wm-rw-hinweis var(--motion-slow) var(--ease-out) backwards; animation-delay: calc(var(--motion-slow) * 1.1); }

/* ---- LED der Glasböden: Zeichnung im Schnitt, Lichtfarben als leuchtende Punkte */
@keyframes wm-led-schein { 0% { opacity: .1; transform: scale(.6); } 45% { opacity: .85; transform: scale(1.18); } 100% { opacity: .55; transform: scale(1); } }
@keyframes wm-led-strahl { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { opacity: .85; clip-path: inset(0 0 0 0); } }
@keyframes wm-led-punkt { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.wizard-led { display: flex; flex-direction: column; gap: 10px; --led: #ffd9a0; }
.wizard-led-vorschau { padding: 8px 10px; border: 1px solid var(--linie); border-radius: 12px; background: color-mix(in srgb, var(--text) 9%, var(--flaeche-2)); }
.wizard-led-bild { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; color: var(--text); }
.w-led-wand { fill: color-mix(in srgb, var(--text) 20%, var(--flaeche)); stroke: currentColor; stroke-width: 1; opacity: .85; }
.w-led-glas { fill: color-mix(in srgb, #9fd3e0 60%, var(--flaeche)); stroke: #5fa9bd; stroke-width: 1; }
.w-led-streifen { fill: #747983; transition: fill var(--motion-slow) var(--ease-out); }
.w-led-schein { fill: var(--led); opacity: 0; transform-box: fill-box; transform-origin: 85% 50%; }
.w-led-strahl { stroke: var(--led); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 5; fill: none; opacity: 0; }
.wizard-led.led-an .w-led-streifen { fill: var(--led); }
.wizard-led.led-an .w-led-schein { opacity: .55; animation: wm-led-schein calc(var(--motion-slow) * 3) var(--ease-out) backwards; }
.wizard-led.led-an .w-led-strahl { opacity: .85; animation: wm-led-strahl calc(var(--motion-slow) * 2) var(--ease-out) var(--motion-base) backwards; }
.wizard-led-farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.wizard-led-farbe { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 6px; border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--text); font-size: 12.5px; cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.wizard-led-farbe:hover { border-color: var(--linie-2); transform: translateY(calc(var(--wm-lift) * -1)); }
.wizard-led-farbe.an { border-color: var(--akzent); background: var(--akzent-weich); }
.wizard-led-punkt { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 2px var(--flaeche), 0 0 16px 3px color-mix(in srgb, var(--led) 70%, transparent); }
.wizard-led-farbe.an .wizard-led-punkt { animation: wm-led-punkt var(--wm-puls) var(--ease-in-out) 3; }
.wizard-led-farbe .wizard-farbname { font-size: 12px; }
:root[data-motion="reduziert"] .wizard-led .w-led-schein, :root[data-motion="reduziert"] .wizard-led .w-led-strahl, :root[data-motion="reduziert"] .wizard-led-farbe .wizard-led-punkt,
:root[data-motion="aus"] .wizard-led .w-led-schein, :root[data-motion="aus"] .wizard-led .w-led-strahl, :root[data-motion="aus"] .wizard-led-farbe .wizard-led-punkt { animation: none; }
@media (prefers-reduced-motion: reduce) { .wizard-led .w-led-schein, .wizard-led .w-led-strahl, .wizard-led-farbe .wizard-led-punkt { animation: none !important; } }

/* ---- Ja/Nein-Entscheidung (Deckplatte, Seitenplatten): auch „Nein“ ist eine Wahl */
.wizard-janein { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px; border: 2px solid var(--linie); border-radius: 10px; background: var(--flaeche-2);
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out); }
.wizard-janein.an { border-color: var(--akzent); background: var(--akzent-weich); }
.wizard-janein-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.wizard-janein-text small { color: var(--text-2); font-size: 12.5px; }
.wizard-seitenplatte.an > .wizard-janein { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }

/* ---- Griffe: zu lange Griffe sind ausgegraut, der Hinweis erklärt warum */
.wizard-griff:disabled, .wizard-griff.zu-lang { opacity: .38; cursor: not-allowed; filter: grayscale(1); }
.wizard-griff.zu-lang.an { opacity: .75; filter: none; outline: 2px dashed #c2413a; outline-offset: 2px; }
.wizard-griff-laenge { margin: 8px 0 0; padding: 7px 10px; border-left: 3px solid var(--linie-2); border-radius: 4px; background: var(--flaeche-2); color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.wizard-griff-laenge[hidden] { display: none; }

/* ---- Hero „Elemente“: kompakte Palette; ab 580 px Breite stehen Palette (links) und Skizze (rechts) nebeneinander, darunter die beiden Ziele – so ist alles ohne Scrollen zu sehen */
.wizard-gestalter { container-type: inline-size; container-name: wg; }
.gestalter-hero .gestalter-palette h4 { margin: 0 0 8px; font-size: 14.5px; }
.gestalter-hero .gestalter-palette h4 small { flex-basis: 100%; font-size: 12px; }
.gestalter-hero .gestalter-palette .palette-arten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gestalter-hero .gestalter-palette .palette-art { min-height: 66px; padding: 6px 3px 5px; gap: 2px; font-size: 12px; border-radius: 9px; }
.gestalter-hero .gestalter-palette .palette-art svg { width: 38px; height: 31px; }
.gestalter-hero .gestalter-palette .palette-art > span { font-size: 12px; line-height: 1.2; }
@container wg (min-width: 580px) {
  .gestalter-hero { display: grid; grid-template-columns: minmax(200px, 5fr) minmax(0, 7fr); grid-template-areas: "palette skizze" "ziele ziele"; gap: 12px 14px; align-items: start; }
  .gestalter-hero > .gestalter-palette { grid-area: palette; }
  .gestalter-hero > .gestalter-hero-skizze { grid-area: skizze; }
  .gestalter-hero > .gestalter-hero-ziele { grid-area: ziele; }
  .gestalter-hero .gestalter-palette .palette-arten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gestalter-hero-ziel.skizze .pfeil svg { transform: none; }
  .gestalter-hero-ziel.skizze .pfeil { animation-name: wm-hero-schub; }
}
@container wg (max-width: 579px) { .gestalter-hero-ziele { flex-direction: row; } }

/* ---- Version 0.45: Mini-Assistent – die gewählte Antwort steht klein unter dem Fortschrittspunkt (statt eigener Knöpfe über der Frage) */
.wizard-mini-antwort { display: block; max-width: 100%; min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; line-height: 1.3; color: var(--akzent); }
.wizard-mini-antwort:empty { visibility: hidden; }
.wizard-mini-punkte li.aktuell .wizard-mini-antwort { visibility: hidden; }
.wizard-mini-punkte button { height: auto; min-height: 0; padding-bottom: 4px; }
.wizard-mini-punkte { margin-bottom: 2px; }