/**
 * E-LOU Konfigurator – nutzt die Design-Tokens aus dem Theme (style.css).
 * Fällt auf sinnvolle Defaults zurück, falls das Theme mal wechselt.
 */
.elou-cfg{
  --cfg-primary: var(--color-primary, #98f867);
  --cfg-primary-dark: var(--color-primary-dark, #7fe648);
  --cfg-ink: var(--color-ink, #14200c);
  --cfg-border: var(--color-grey-200, #e2e5df);
  --cfg-grey: var(--color-grey-100, #f5f6f4);
  --cfg-muted: var(--color-text-muted, #58614f);
  --cfg-radius: var(--radius-md, 16px);
  --cfg-mono: var(--font-mono, 'JetBrains Mono', monospace);
  max-width: 860px;
  margin: 0 auto;
}

/* Fortschritt */
.elou-cfg__progress{
  height:6px; background: var(--cfg-grey); border-radius:999px; overflow:hidden; margin-bottom:14px;
}
.elou-cfg__progress-bar{
  height:100%; width:16.6%; background: var(--cfg-primary);
  border-radius:999px; transition: width .35s cubic-bezier(.4,0,.2,1);
}
.elou-cfg__steplabel{
  font-family: var(--cfg-mono); font-size:.82rem; color: var(--cfg-muted); margin-bottom:26px;
}
.elou-cfg__steplabel span:first-child{ color: var(--cfg-primary-dark); font-weight:700; }
.elou-cfg__steplabel span:last-child{ color: var(--color-text, #161a13); font-weight:600; }

/* Ohne JS: alle Schritte sichtbar, Wizard-Buttons ausblenden. */
.elou-cfg:not(.is-enhanced) .elou-cfg__step[hidden]{ display:block; }
.elou-cfg:not(.is-enhanced) .elou-cfg__progress,
.elou-cfg:not(.is-enhanced) .elou-cfg__steplabel,
.elou-cfg:not(.is-enhanced) #elou-cfg-next,
.elou-cfg:not(.is-enhanced) #elou-cfg-back{ display:none; }
.elou-cfg:not(.is-enhanced) #elou-cfg-submit{ display:inline-flex !important; }
.elou-cfg:not(.is-enhanced) .elou-cfg__summary{ display:none; }
.elou-cfg:not(.is-enhanced) .elou-cfg__step{ margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid var(--cfg-border); }

.elou-cfg__step{ border:none; padding:0; margin:0; min-width:0; }
.elou-cfg__step legend{
  font-family: var(--font-display, 'Montserrat', sans-serif); font-weight:700;
  font-size: clamp(1.3rem,2.4vw,1.7rem); letter-spacing:-.015em; color: var(--color-text, #161a13);
  padding:0; margin-bottom:24px; line-height:1.2;
}
.elou-cfg__grouplabel{
  font-family: var(--cfg-mono); font-size:.8rem; color: var(--cfg-muted);
  margin:24px 0 12px; font-weight:600;
}
.elou-cfg__grouplabel::before{ content:"# "; color: var(--cfg-primary-dark); }

/* Icon-Karten (Projekttyp) */
.elou-cfg__cards{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
@media (max-width:600px){ .elou-cfg__cards{ grid-template-columns:1fr; } }
.elou-cfg__card{ position:relative; cursor:pointer; display:block; }
.elou-cfg__card input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.elou-cfg__card-inner{
  display:block; padding:24px; border:1.5px solid var(--cfg-border); border-radius: var(--cfg-radius);
  background:#fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; height:100%;
}
.elou-cfg__card:hover .elou-cfg__card-inner{ border-color: var(--cfg-primary-dark); transform: translateY(-2px); }
.elou-cfg__card input:checked + .elou-cfg__card-inner{
  border-color: var(--cfg-primary-dark); box-shadow:0 0 0 3px var(--color-primary-soft, #eafce0);
}
.elou-cfg__card input:focus-visible + .elou-cfg__card-inner{ outline:2.5px solid var(--cfg-primary-dark); outline-offset:2px; }
.elou-cfg__card-icon{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:12px;
  background: var(--color-primary-soft, #eafce0); color:#3f7a1e; margin-bottom:14px;
}
.elou-cfg__card-title{ display:block; font-family: var(--font-display,'Montserrat',sans-serif); font-weight:700; font-size:1.05rem; margin-bottom:4px; }
.elou-cfg__card-desc{ display:block; font-size:.88rem; color: var(--cfg-muted); }

/* Pills (Radio/Checkbox als Chips) */
.elou-cfg__pills{ display:flex; flex-wrap:wrap; gap:10px; }
.elou-cfg__pill{ position:relative; cursor:pointer; }
.elou-cfg__pill input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.elou-cfg__pill span{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1.5px solid var(--cfg-border);
  border-radius:999px; background:#fff; font-size:.92rem; font-weight:500; color: var(--color-text,#161a13);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.elou-cfg__pill:hover span{ border-color: var(--cfg-primary-dark); }
.elou-cfg__pill input:checked + span{
  background: var(--cfg-primary); border-color: var(--cfg-primary); color: var(--cfg-ink); font-weight:600;
}
.elou-cfg__pills--multi .elou-cfg__pill input:checked + span::before{ content:"✓ "; font-weight:700; }
.elou-cfg__pill input:focus-visible + span{ outline:2.5px solid var(--cfg-primary-dark); outline-offset:2px; }

/* Zusammenfassung im letzten Schritt */
.elou-cfg__summary{
  background: var(--cfg-grey); border:1px solid var(--cfg-border); border-radius: var(--cfg-radius);
  padding:22px 24px; margin-bottom:26px;
}
.elou-cfg__summary-title{
  font-family: var(--cfg-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--cfg-muted); margin:0 0 14px; font-weight:600;
}
.elou-cfg__summary-list{ margin:0; display:grid; gap:10px; }
.elou-cfg__summary-list > div{ display:flex; gap:14px; font-size:.92rem; align-items:baseline; }
.elou-cfg__summary-list dt{ flex:0 0 130px; color: var(--cfg-muted); font-weight:500; }
.elou-cfg__summary-list dd{ margin:0; font-weight:600; color: var(--color-text,#161a13); }
@media (max-width:520px){
  .elou-cfg__summary-list > div{ flex-direction:column; gap:2px; }
  .elou-cfg__summary-list dt{ flex-basis:auto; }
}

/* Navigation */
.elou-cfg__nav{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.elou-cfg__nav #elou-cfg-next,
.elou-cfg__nav #elou-cfg-submit{ margin-left:auto; }
@media (max-width:520px){
  .elou-cfg__nav{ flex-direction:column-reverse; }
  .elou-cfg__nav .btn{ width:100%; margin-left:0 !important; }
}