/* Garten-Assistent. Alle Werte aus den Design-Tokens. */
.mg-assistant { scroll-margin-top: calc(var(--mg-header-h) + 16px); }
.mg-assistant__card { position: relative; background: var(--mg-surface-alt); border-radius: var(--mg-radius-lg); padding: clamp(1.25rem, 3.5vw, 2.25rem); }
.mg-assistant__head { display: none; align-items: center; gap: 1rem; }
.mg-assistant__title { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin: 0; }
.mg-assistant__progress { margin: .1rem 0 0; color: var(--mg-text-muted); font-size: .98rem; }
.mg-assistant__sprout { flex: none; width: 76px; height: 95px; display: grid; place-items: end center; }
.mg-assistant__sprout svg { width: 76px; height: 95px; }
.mg-assistant__bar { display: none; height: 6px; margin: 1rem 0 1.5rem; background: var(--mg-line); border-radius: 6px; overflow: hidden; }
.mg-assistant__bar span { display: block; height: 100%; width: 20%; background: var(--mg-primary); border-radius: 6px; transition: width .35s ease; }
.mg-assistant.is-enhanced .mg-assistant__head { display: flex; }
.mg-assistant.is-enhanced .mg-assistant__bar { display: block; }

/* Ohne JavaScript: alle Schritte untereinander, nur „Anfrage senden“ */
.mg-form { display: grid; gap: 2rem; margin-top: 1rem; }
.mg-assistant.is-enhanced .mg-form { margin-top: 0; }
.mg-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.mg-step__title { padding: 0; font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: .5rem; }
.mg-step__title:focus { outline: none; }
.mg-step__hint { color: var(--mg-text-muted); margin-bottom: 1rem; font-size: 1rem; }
.mg-assistant.is-enhanced .mg-step { display: none; }
.mg-assistant.is-enhanced .mg-step.is-active { display: block; animation: mg-step-in .3s ease; }
@keyframes mg-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.mg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Kacheln (echte Checkboxen/Radios, per Tastatur bedienbar) */
.mg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: .7rem; }
.mg-tiles--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.mg-tile { position: relative; display: block; cursor: pointer; }
.mg-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.mg-tile__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 112px; padding: .9rem .6rem; text-align: center; background: var(--mg-bg); border: 2px solid var(--mg-line); border-radius: var(--mg-radius); transition: border-color .2s, background-color .2s, transform .2s; }
.mg-tile__label { font-weight: 600; font-size: .98rem; line-height: 1.2; }
.mg-tile:hover .mg-tile__body { border-color: var(--mg-primary); }
.mg-tile input:checked + .mg-tile__body { border-color: var(--mg-primary); background: color-mix(in srgb, var(--mg-primary) 12%, var(--mg-bg)); }
.mg-tile input:checked + .mg-tile__body::after { content: ""; position: absolute; top: .55rem; right: .65rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--mg-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
:root[data-theme="dark"] .mg-tile input:checked + .mg-tile__body::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%230F1A16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mg-tile input:focus-visible + .mg-tile__body { outline: 2px solid var(--mg-focus); outline-offset: 3px; }

/* Größe */
.mg-size { display: grid; gap: .75rem; }
.mg-size__label { font-weight: 600; }
.mg-size input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--mg-primary); background: transparent; cursor: pointer; }
.mg-size__marks { list-style: none; display: flex; justify-content: space-between; margin: -.4rem 0 0; padding: 0; font-size: .9rem; color: var(--mg-text-muted); }
.mg-size__out { margin: 0; min-height: 1.6em; font-weight: 600; font-size: 1.15rem; }
.mg-check { display: flex; align-items: flex-start; gap: .7rem; min-height: 44px; cursor: pointer; }
.mg-check input { flex: none; width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--mg-primary); cursor: pointer; }

/* Fotos */
.mg-drop { position: relative; }
.mg-drop__label { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; min-height: 112px; background: var(--mg-bg); border: 2px dashed var(--mg-line); border-radius: var(--mg-radius); cursor: pointer; transition: border-color .2s, background-color .2s; }
.mg-drop__label .mg-icon { color: var(--mg-primary); }
.mg-drop__text { display: flex; flex-direction: column; color: var(--mg-text-muted); }
.mg-drop__text strong { color: var(--mg-text); font-size: 1.1rem; }
.mg-drop:hover .mg-drop__label, .mg-drop.is-over .mg-drop__label { border-color: var(--mg-primary); }
.mg-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mg-drop input[type="file"]:focus-visible + * , .mg-drop:focus-within .mg-drop__label { outline: 2px solid var(--mg-focus); outline-offset: 3px; }
.mg-previews { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 0; padding: 0; }
.mg-previews li { position: relative; width: 96px; height: 96px; border-radius: 16px; overflow: hidden; background: var(--mg-surface); border: 1px solid var(--mg-line); }
.mg-previews img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-previews button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgb(15 26 22 / .78); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.mg-previews .mg-prev__name { position: absolute; inset: auto 0 0 0; padding: 2px 6px; font-size: .7rem; background: rgb(15 26 22 / .7); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Felder */
.mg-fields { display: grid; gap: 1rem 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mg-fields { grid-template-columns: 1fr 1fr; } .mg-fields__full { grid-column: 1 / -1; } }
.mg-field { display: grid; gap: .35rem; align-content: start; border: 0; padding: 0; margin: 0; min-width: 0; }
.mg-field > label, .mg-field > legend { font-weight: 600; padding: 0; }
.mg-field input[type="text"], .mg-field input[type="tel"], .mg-field input[type="email"], .mg-field textarea {
  width: 100%; min-height: 48px; padding: .7rem 1rem; font: inherit; color: var(--mg-text); background: var(--mg-bg);
  border: 2px solid var(--mg-line); border-radius: 14px; transition: border-color .2s;
}
.mg-field textarea { min-height: 120px; resize: vertical; }
.mg-field input:hover, .mg-field textarea:hover { border-color: var(--mg-text-muted); }
.mg-field input:focus-visible, .mg-field textarea:focus-visible { outline: 2px solid var(--mg-focus); outline-offset: 2px; border-color: var(--mg-focus); }
.mg-field [aria-invalid="true"] { border-color: var(--mg-error); }
.mg-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.mg-chip { position: relative; }
.mg-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mg-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.1rem; background: var(--mg-bg); border: 2px solid var(--mg-line); border-radius: var(--mg-radius-pill); font-weight: 600; transition: border-color .2s, background-color .2s; }
.mg-chip input:checked + span { border-color: var(--mg-primary); background: color-mix(in srgb, var(--mg-primary) 14%, var(--mg-bg)); }
.mg-chip input:focus-visible + span { outline: 2px solid var(--mg-focus); outline-offset: 2px; }

.mg-error { margin: .35rem 0 0; color: var(--mg-error); font-weight: 600; font-size: .98rem; }
.mg-error:empty { display: none; }
abbr[title] { text-decoration: none; color: var(--mg-primary); }

/* Aktionen */
.mg-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: flex-end; }
.mg-assistant.is-enhanced .mg-actions { justify-content: space-between; }
.mg-assistant.is-enhanced .mg-actions [data-mg-next], .mg-assistant.is-enhanced .mg-actions [data-mg-submit] { margin-left: auto; }
.mg-assistant__phone { margin: 0; color: var(--mg-text-muted); font-size: .98rem; }
.mg-assistant__phone a { font-weight: 600; }

/* Danke */
.mg-assistant__done { text-align: center; padding: 1rem 0 .5rem; }
.mg-assistant__done[hidden] { display: none; }
.mg-assistant__done p { margin-inline: auto; }
.mg-done__title { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); outline: none; }
.mg-done__hint { color: var(--mg-text-muted); }
.mg-assistant.is-done .mg-assistant__bar span { width: 100%; }
.mg-assistant.is-done .mg-assistant__sprout svg { animation: mg-sprout .9s cubic-bezier(.2, .9, .3, 1.2); transform-origin: 50% 100%; }
@keyframes mg-sprout { from { transform: scale(.6); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mg-assistant.is-enhanced .mg-step.is-active, .mg-assistant.is-done .mg-assistant__sprout svg { animation: none; }
  .mg-assistant__bar span, .mg-tile__body, .mg-btn { transition: none; }
}
.mg-form[hidden] { display: none; }

/* Divi setzt Überschriften grau: im Assistenten wieder Token-Farben */
.mg-assistant :where(h2, h3, legend, label, p) { color: var(--mg-text); font-family: var(--mg-font); padding: 0; }
.mg-assistant .mg-step__hint, .mg-assistant .mg-assistant__progress, .mg-assistant .mg-assistant__phone, .mg-assistant .mg-done__hint { color: var(--mg-text-muted); }
.mg-assistant .mg-error { color: var(--mg-error); }
.mg-assistant input[type="text"], .mg-assistant input[type="tel"], .mg-assistant input[type="email"], .mg-assistant textarea { font-family: var(--mg-font); }