/* Alu-Konfigurator. Nur CSS-Variablen (mit Fallback), fluide Schriftgroessen ueber --text-*, keine px-Schriftgroessen. */
.cb-configurator, .cb-configurator-mini {
  --cb-primary: var(--color-primary, #0D6AB3);
  --cb-primary-hover: var(--color-primary-hover, #0A5390);
  --cb-surface: var(--color-surface, #F5F6F6);
  --cb-light: var(--color-surface-light, #EBF6FF);
  --cb-border: var(--color-border, #DCDFE1);
  --cb-ink: var(--color-heading, #1C1F23);
  --cb-text: var(--color-ink, #31363D);
  --cb-caption: var(--color-muted, #636B74);
  --cb-error: var(--color-error, #E5533D);
  --cb-success: var(--color-success, #2E9E5B);
  --cb-warning: var(--color-warning, #E0A106);
  --cb-radius: var(--radius-s, 4px);
  --cb-radius-l: var(--radius-l, 10px);
  --cb-shadow: var(--shadow-m, 0 4px 14px rgba(8, 40, 72, .08));
  color: var(--cb-text);
  font-size: var(--text-base, 1rem);
  line-height: 1.5;
}
.cb-configurator *, .cb-configurator-mini * { box-sizing: border-box; }
.cb-configurator__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 1.5rem; align-items: start; }
.cb-configurator__steps { display: grid; gap: 1.1rem; min-width: 0; }
.cb-configurator__step { border: 1px solid var(--cb-border); border-radius: var(--cb-radius-l); background: #fff; padding: 1.4rem 1.5rem 1.5rem; min-width: 0; margin: 0; }
.cb-configurator__legend { float: left; width: 100%; display: flex; align-items: center; gap: .75rem; font-family: var(--font-head, inherit); font-size: var(--text-lg, 1.125rem); font-weight: 700; color: var(--cb-ink); margin: 0 0 1.1rem; padding: 0; }
.cb-configurator__legend + * { clear: both; }
.cb-configurator__num { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--cb-light); color: var(--cb-primary); font-size: var(--text-sm, .875rem); flex: none; }
.cb-configurator__step.is-done .cb-configurator__num { background: var(--cb-primary); color: #fff; }
.cb-configurator__choice { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cb-configurator__card { cursor: pointer; position: relative; }
.cb-configurator__card input { position: absolute; opacity: 0; pointer-events: none; }
.cb-configurator__card-in { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; border: 1.5px solid var(--cb-border); border-radius: var(--cb-radius-l); color: var(--cb-ink); transition: border-color .15s, background .15s; }
.cb-configurator__card input:checked + .cb-configurator__card-in { border-color: var(--cb-primary); background: var(--cb-light); box-shadow: inset 0 0 0 1px var(--cb-primary); }
.cb-configurator__card input:focus-visible + .cb-configurator__card-in { outline: 2px solid var(--cb-primary); outline-offset: 2px; }
.cb-configurator__field { display: grid; gap: .35rem; min-width: 0; }
.cb-configurator__label { font-size: var(--text-sm, .875rem); font-weight: 600; color: var(--cb-ink); }
.cb-configurator__select, .cb-configurator__input, .cb-configurator-mini__select {
  width: 100%; min-height: 2.9rem; border: 1.5px solid var(--cb-border); border-radius: var(--cb-radius); padding: 0 .8rem; font: inherit; color: var(--cb-ink); background: #fff; min-width: 0;
}
.cb-configurator__select:focus, .cb-configurator__input:focus, .cb-configurator-mini__select:focus { outline: 2px solid var(--cb-primary); outline-offset: 1px; border-color: var(--cb-primary); }
.cb-configurator__select:disabled, .cb-configurator-mini__select:disabled { background: var(--cb-surface); color: var(--cb-caption); }
.cb-configurator__hint { font-size: var(--text-xs, .8125rem); color: var(--cb-caption); }
.cb-configurator__field.is-invalid .cb-configurator__input { border-color: var(--cb-error); }
.cb-configurator__field.is-invalid .cb-configurator__hint { color: var(--cb-error); font-weight: 600; }
.cb-configurator__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.cb-configurator__density { margin: 1rem 0 0; font-size: var(--text-sm, .875rem); color: var(--cb-caption); }
.cb-configurator__density strong { color: var(--cb-primary); }
.cb-configurator__qty { display: flex; align-items: center; gap: .5rem; max-width: 14rem; }
.cb-configurator__qty .cb-configurator__input { text-align: center; }
.cb-configurator__qty-btn { width: 2.9rem; height: 2.9rem; flex: none; border: 1.5px solid var(--cb-border); border-radius: var(--cb-radius); background: #fff; color: var(--cb-ink); font: inherit; font-size: var(--text-lg, 1.125rem); cursor: pointer; }
.cb-configurator__qty-btn:hover { border-color: var(--cb-primary); color: var(--cb-primary); }
.cb-configurator__note { display: flex; gap: .75rem; padding: 1rem 1.2rem; background: var(--cb-surface); border-radius: var(--cb-radius-l); font-size: var(--text-sm, .875rem); color: var(--cb-caption); }
.cb-configurator__note p { margin: 0; }
.cb-configurator__ph { display: inline-block; font-size: var(--text-xs, .8125rem); font-weight: 600; color: #8a5a00; background: #fff4d6; border: 1px dashed var(--cb-warning); border-radius: var(--cb-radius); padding: .1rem .45rem; margin-top: .3rem; }
.cb-configurator__ph[hidden] { display: none; }
.cb-configurator__summary { position: sticky; top: 1.5rem; min-width: 0; }
.cb-configurator__card-sum { background: #fff; border: 1px solid var(--cb-border); border-radius: var(--cb-radius-l); box-shadow: var(--cb-shadow); padding: 1.5rem; }
.cb-configurator__sum-title { font-family: var(--font-head, inherit); font-size: var(--text-lg, 1.125rem); font-weight: 700; color: var(--cb-ink); margin: 0 0 .9rem; }
.cb-configurator__sketch { background: var(--cb-surface); border-radius: var(--cb-radius-l); margin-bottom: 1rem; }
.cb-configurator__sketch svg { display: block; width: 100%; height: auto; }
.cb-configurator__sk-body { fill: var(--cb-light); stroke: var(--cb-primary); stroke-width: 1.5; }
.cb-configurator__sk-dim { stroke: var(--cb-caption); stroke-width: 1; }
.cb-configurator__sk-t { fill: var(--cb-ink); font-family: inherit; }
.cb-configurator__sum { display: grid; margin: 0 0 1rem; }
.cb-configurator__sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--cb-border); font-size: var(--text-sm, .875rem); }
.cb-configurator__sum-row dt { color: var(--cb-caption); flex: none; }
.cb-configurator__sum-row dd { margin: 0; color: var(--cb-ink); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.cb-configurator__price { display: grid; gap: .15rem; padding: .9rem 1rem; background: var(--cb-surface); border-radius: var(--cb-radius-l); margin-bottom: .75rem; }
.cb-configurator__price-label { font-size: var(--text-xs, .8125rem); text-transform: uppercase; letter-spacing: .05em; color: var(--cb-caption); font-weight: 600; }
.cb-configurator__price-val { font-family: var(--font-head, inherit); font-size: var(--text-xl, 1.5rem); color: var(--cb-ink); }
.cb-configurator__price-sub { font-size: var(--text-xs, .8125rem); color: var(--cb-caption); margin-top: .35rem; }
.cb-configurator__price-sub a { color: var(--cb-primary); text-decoration: underline; }
.cb-configurator__deliv { font-size: var(--text-sm, .875rem); color: var(--cb-ink); font-weight: 600; margin: .75rem 0; padding-left: .75rem; border-left: 3px solid var(--cb-success); }
.cb-configurator__error { color: var(--cb-error); font-size: var(--text-sm, .875rem); font-weight: 600; margin: 0 0 .6rem; }
.cb-configurator__error[hidden] { display: none; }
.cb-configurator__submit, .cb-configurator-mini__go { display: inline-flex; width: 100%; justify-content: center; align-items: center; gap: .5rem; min-height: 3rem; padding: .6rem 1.2rem; border: 0; border-radius: var(--cb-radius); background: var(--cb-primary); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background .15s; }
.cb-configurator__submit:hover, .cb-configurator-mini__go:hover { background: var(--cb-primary-hover); }
.cb-configurator__submit:focus-visible, .cb-configurator-mini__go:focus-visible { outline: 2px solid var(--cb-ink); outline-offset: 2px; }
.cb-configurator__help { font-size: var(--text-sm, .875rem); color: var(--cb-caption); margin: .75rem 0 0; text-align: center; }
.cb-configurator__help a { color: var(--cb-primary); font-weight: 600; }
.cb-configurator__price-hint { color: var(--cb-caption); }

/* Mini */
.cb-configurator-mini { display: grid; gap: .9rem; padding: 1.5rem; background: #fff; border-radius: var(--cb-radius-l); box-shadow: var(--cb-shadow); max-width: 28rem; }
.cb-configurator-mini__head { display: grid; gap: .15rem; margin: 0; color: var(--cb-ink); }
.cb-configurator-mini__step { font-size: var(--text-xs, .8125rem); text-transform: uppercase; letter-spacing: .05em; color: var(--cb-primary); font-weight: 700; }
.cb-configurator-mini__head strong { font-family: var(--font-head, inherit); font-size: var(--text-lg, 1.125rem); }
.cb-configurator-mini__seg { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; background: var(--cb-surface); padding: .3rem; border-radius: var(--cb-radius); }
.cb-configurator-mini__seg-item { position: relative; text-align: center; cursor: pointer; }
.cb-configurator-mini__seg-item input { position: absolute; opacity: 0; pointer-events: none; }
.cb-configurator-mini__seg-item span { display: block; padding: .55rem .5rem; border-radius: var(--cb-radius); font-weight: 600; color: var(--cb-caption); }
.cb-configurator-mini__seg-item input:checked + span { background: #fff; color: var(--cb-primary); box-shadow: 0 1px 2px rgba(8, 40, 72, .12); }
.cb-configurator-mini__seg-item input:focus-visible + span { outline: 2px solid var(--cb-primary); }
.cb-configurator-mini__field { display: grid; gap: .3rem; }
.cb-configurator-mini__label { font-size: var(--text-sm, .875rem); font-weight: 600; color: var(--cb-ink); }
.cb-configurator-mini__alt { margin: 0; font-size: var(--text-sm, .875rem); color: var(--cb-caption); text-align: center; }
.cb-configurator-mini__alt a { color: var(--cb-primary); font-weight: 600; }

@media (max-width: 62rem) {
  .cb-configurator__form { grid-template-columns: minmax(0, 1fr); }
  .cb-configurator__summary { position: static; }
}
@media (max-width: 40rem) {
  .cb-configurator__grid { grid-template-columns: minmax(0, 1fr); }
  .cb-configurator__step { padding: 1.1rem 1rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .cb-configurator *, .cb-configurator-mini * { transition: none !important; } }

.cb-configurator .cb-configurator__submit[aria-disabled="true"] { background: var(--cb-surface); color: var(--color-muted, #636B74); box-shadow: inset 0 0 0 1.5px var(--cb-border); cursor: not-allowed; }
.cb-configurator .cb-configurator__submit[aria-disabled="true"]:hover { background: var(--cb-surface); }
/* Mini-Umschalter wie mockup-v2 (Quadrat = Platte, Kreis = Rundstange, aktive Wahl blau gefüllt) */
.cb-configurator-mini__seg-item span { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--cb-ink); }
.cb-configurator-mini__seg-item span::before { content: ""; width: .85em; height: .85em; border: 1.5px solid currentColor; border-radius: 2px; flex: none; }
.cb-configurator-mini__seg-item:nth-child(2) span::before { border-radius: 50%; }
.cb-configurator-mini__seg-item input:checked + span { background: var(--cb-primary); color: #fff; box-shadow: none; }
.cb-configurator-mini__seg-item span:hover { color: var(--cb-primary); }
.cb-configurator-mini__seg-item input:checked + span:hover { color: #fff; }