/* Konfigurator (v2) — dark, technical, animated. Same visual DNA as NetzwerkBOX. */

.konf2 {
  background:
    radial-gradient(900px 600px at 80% 10%, rgba(249,230,59,0.06), transparent 60%),
    radial-gradient(800px 500px at 10% 90%, rgba(59,192,249,0.05), transparent 60%),
    #0d0d0b;
  color: #f3f3ec;
  padding-bottom: 56px;
  margin-top: -1px;
  min-height: calc(100vh - 280px);
}

.konf2__header { padding-top: 24px; }
.konf2__header h1 { font-size: 56px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin: 12px 0 12px; }
.konf2__header p { color: rgba(243,243,236,0.6); max-width: 560px; font-size: 16px; }

.konf2__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 6px;
}
.konf2__tab {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.7);
  padding: 14px 16px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, color .15s ease;
}
.konf2__tab:hover { background: rgba(255,255,255,0.04); color: white; }
.konf2__tab.is-active {
  background: var(--ks-red);
  color: white;
}
.konf2__tab.is-active .mono { color: rgba(255,255,255,0.8) !important; }

.konf2__panel {
  margin-top: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
.konf2__panel > .konf2__form, .konf2__panel > .konf2__viz { position: relative; z-index: 2; }
.konf2__form { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.konf2__group {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px;
}

.konf2__field {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  font-size: 14px;
}
.konf2__field > span { color: rgba(255,255,255,0.7); }
.konf2__stepper { display: inline-flex; align-items: center; gap: 4px; }
.konf2__stepper button {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: white;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}
.konf2__stepper button:hover { background: rgba(255,255,255,0.12); }
.konf2__stepper input {
  width: 54px; height: 32px;
  background: transparent;
  border: 0;
  color: white;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}
.konf2__stepper input::-webkit-outer-spin-button,
.konf2__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.konf2__seg {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 4px;
  flex-wrap: wrap;
}
.konf2__seg button {
  flex: 1;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.7);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 80px;
  white-space: nowrap;
}
.konf2__seg button small { font-size: 10px; opacity: 0.7; font-weight: 400; }
.konf2__seg button:hover { background: rgba(255,255,255,0.04); color: white; }
.konf2__seg button.is-active { background: var(--ks-red); color: white; }
.konf2__seg button.is-active small { color: rgba(255,255,255,0.85); }

/* Range slider — CANON port of the NetzwerkBOX modal slider (atoms/ks-nbx-modal.ts .range):
   a thin 4px track (filled = ks-red up to --fill, rest faint), a small round thumb with a
   2px halo ring. The value + min/max labels sit in the eyebrow + .konf2__rangelabels. */
.konf2__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;             /* a real, grabbable hit area (4px was too thin to use) */
  background: transparent;
  outline: none;
  margin-top: 8px;
  cursor: pointer;
}
.konf2__range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px; border: none;
  background: linear-gradient(to right, var(--ks-red) var(--fill, 50%), rgba(255,255,255,0.16) var(--fill, 50%));
}
.konf2__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px; margin-top: -5px;
  border-radius: 50%; border: none; background: var(--ks-red, #DB0000);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,0.45);
  cursor: pointer;
}
.konf2__range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ks-red); }
.konf2__range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.16); }
.konf2__range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: none; background: var(--ks-red, #DB0000);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,0.45); cursor: pointer;
}
/* bright theme keeps the red rail + red thumb; ring stays white */
.konf2-modal--bright .konf2__range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--ks-red) var(--fill, 50%), rgba(0,0,0,0.14) var(--fill, 50%));
}
.konf2-modal--bright .konf2__range::-moz-range-track { background: rgba(0,0,0,0.14); }

/* Price pill — CANON port of .netzwerkbox-slot__length-pill: a red pill with the bare number
   in white (600/11px). Use wherever a button surfaces a price. */
.konf-pricepill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 50px; height: 22px; padding: 0 9px;
  border-radius: 999px; background: var(--ks-red, #DB0000); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1; font-style: normal;
  font-family: var(--font-mono, ui-monospace, monospace); white-space: nowrap;
}

.konf2__catalog {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 14px;
}
.konf2__len {
  height: 36px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.7);
  border-radius: 6px;
  cursor: pointer;
}
.konf2__len:hover { background: rgba(255,255,255,0.06); color: white; }
.konf2__len.is-active { background: var(--cable-yellow); border-color: var(--cable-yellow); color: #131310; }

/* Colour swatches — CANON port of .color-swatch (atoms/ks-nbx-modal.ts): small square chip,
   a faint inset edge so light colours read, and a FLOATING 2px accent ring on selection
   (offset -4px, radius 5px) — never a heavy outline. */
.konf2__cols { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; padding: 3px; align-items: center; justify-content: center; }
/* CANON = the netzwerkbox DROPDOWN swatch (.nb-color-dot): a ROUND 24px dot with a 1px subtle
   edge; selected = a white ring (the wrapping .nb-list-btn.is-active white border). Same
   everywhere (Patchkabel Farbe, Bedarf Kabelfarbe, Custom-Kabel Mantel). */
.konf2__col {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.30);
  padding: 0; cursor: pointer; box-sizing: border-box;
  transition: box-shadow .12s ease;
}
.konf2__col.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.28); }
.konf2-modal--bright .konf2__col { border-color: rgba(0,0,0,0.30); }
.konf2-modal--bright .konf2__col.is-active { box-shadow: 0 0 0 2px #141414, 0 0 0 3px rgba(255,255,255,0.5); }

/* Beschriftung & Brandmarkierung presets — netzwerkbox-grade pill chips (not flat boxes) */
.konf2__hud .chip {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.72);
  border-radius: 999px; padding: 7px 14px;
  font-size: 12px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.konf2__hud .chip:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.28); }
.konf2-modal--bright .konf2__hud .chip { border-color: rgba(0,0,0,0.14); background: rgba(0,0,0,0.03); color: rgba(0,0,0,0.7); }
.konf2-modal--bright .konf2__hud .chip:hover { background: rgba(0,0,0,0.07); color: #18180f; }

.konf2__viz {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.konf2__viz > svg { flex: 0 0 auto; }

.konf2__result {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.konf2__result-h {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.konf2__result-rows { display: flex; flex-direction: column; gap: 6px; }
.konf2__row {
  display: flex; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.konf2__row:last-child { border-bottom: 0; }

/* CUSTOM step navigation */
.konf2__steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  grid-column: 1 / -1;
  margin-bottom: 8px;
}
.konf2__step {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  text-align: left;
}
.konf2__step .mono { font-size: 11px; color: rgba(255,255,255,0.4); }
.konf2__step:hover { background: rgba(255,255,255,0.06); color: white; }
.konf2__step.is-current { background: var(--ks-red); color: white; border-color: var(--ks-red); }
.konf2__step.is-current .mono { color: rgba(255,255,255,0.8); }
.konf2__step.is-done { background: rgba(31,138,91,0.18); border-color: rgba(31,138,91,0.4); color: white; }
.konf2__step.is-done .mono { color: rgba(255,255,255,0.6); }

.konf2__custom-side { padding-top: 0; }
.konf2__h3 { font-size: 22px; font-weight: 500; margin: 6px 0 16px; letter-spacing: -0.02em; }
.konf2__connectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.konf2__connector {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: white;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.konf2__connector:hover { background: rgba(255,255,255,0.06); }
.konf2__connector.is-active { background: var(--ks-red); border-color: var(--ks-red); }

.konf2__price {
  text-align: right;
  margin: 20px 0;
  padding: 16px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
}

/* configurator as a fullscreen MODAL (operator 2026-06-12: float it like the netzwerkbox,
   no page layering / padding confusion) */
.konf2-modal { position: fixed; inset: 0; z-index: 900; }
.konf2-modal__bg { display: none; }
.konf2-modal__dialog { position: absolute; inset: 0; overflow-y: auto; color: #f3f3ec;
  background: radial-gradient(ellipse 82% 72% at 38% 20%, #262932 0%, #16181d 52%, #0d0e12 100%);
  padding: 28px 0 64px; animation: konfModalIn .3s cubic-bezier(.2,.7,.3,1) both; }
.konf2-modal__dialog .konf2__header,
.konf2-modal__dialog .konf2__tabs,
.konf2-modal__dialog .konf2__panel {
  max-width: 1280px; margin-left: auto; margin-right: auto;
}
@keyframes konfModalIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
/* header controls — netzwerkbox style: transparent (no bg/border/radius), theme top-LEFT, close top-RIGHT */
.konf2-modal__mode, .konf2-modal__x { position: fixed; top: 24px; z-index: 5; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: none; border: 0; color: #fff; cursor: pointer; opacity: 0.82; transition: opacity .15s; }
.konf2-modal__mode:hover, .konf2-modal__x:hover { opacity: 1; }
.konf2-modal__mode { left: 32px; }
.konf2-modal__x { right: 32px; }
/* light / dark — netzwerkbox-style backdrop + controls */
.konf2-modal--bright .konf2-modal__dialog { background: radial-gradient(ellipse 82% 72% at 38% 20%, #ffffff 0%, #eef1f6 52%, #dfe3ea 100%); color: #18180f; }
.konf2-modal--bright .konf2-modal__mode, .konf2-modal--bright .konf2-modal__x { color: #131310; }
.konf2-modal--bright h1, .konf2-modal--bright .konf2__h3 { color: #18180f; }
.konf2-modal--bright .konf2__header p, .konf2-modal--bright .mono { color: rgba(0,0,0,0.62) !important; }
.konf2-modal--bright .konf2__group, .konf2-modal--bright .konf2__tabs { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
.konf2-modal--bright .konf2__stepper, .konf2-modal--bright .konf2__seg button, .konf2-modal--bright .konf2__floor,
.konf2-modal--bright .konf2__entrybtns button, .konf2-modal--bright .konf2__field { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #18180f; }
.konf2-modal--bright .konf2__field span, .konf2-modal--bright .eyebrow { color: rgba(0,0,0,0.6); }

/* room-plan picker — top-down room: click walls to place sockets, set the entry side */
.konf2__roomplan { display: flex; gap: 14px; align-items: center; margin: 8px 0 4px; }
.konf2__plan { width: 150px; flex: 0 0 auto; }
.konf2__plan-floor { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.14); stroke-width: 1; }
.konf2__plan-wall { fill: rgba(255,255,255,0.16); cursor: pointer; transition: fill .15s; }
.konf2__plan-wall:hover { fill: rgba(255,255,255,0.3); }
.konf2__plan-wall.is-on { fill: var(--ks-red); }
.konf2__plan-entry { fill: var(--cable-yellow); stroke: #0d0d0b; stroke-width: 1; }
/* BRIGHT mode: the plan's white-on-transparent graphics vanish on a light bg -> dark fills (operator) */
.konf2-modal--bright .konf2__plan-floor { fill: rgba(0,0,0,0.05); stroke: rgba(0,0,0,0.22); }
.konf2-modal--bright .konf2__plan-wall { fill: rgba(0,0,0,0.22); }
.konf2-modal--bright .konf2__plan-wall:hover { fill: rgba(0,0,0,0.36); }
.konf2-modal--bright .konf2__plan-wall.is-on { fill: var(--ks-red); }
.konf2-modal--bright .konf2__plan-entry { stroke: #fff; }
.konf2-modal--bright .konf2__hint { color: rgba(0,0,0,0.5); }
.konf2-modal--bright .konf2__acc-sum { color: rgba(0,0,0,0.5); }
.konf2-modal--bright .konf2__focus > button, .konf2-modal--bright .konf2__focus-floors button { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.14); color: rgba(0,0,0,0.7); }
.konf2-modal--bright .konf2__readout-m { color: #b8860b; }
/* Patchkabel/Custom controls -> the Bedarf design language: pill shapes + bright mode (operator) */
.konf2-modal .konf2__len { border-radius: 999px; }
.konf2-modal .konf2__step { border-radius: 999px; }
.konf2-modal--bright .konf2__len { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.72); }
.konf2-modal--bright .konf2__len:hover { background: rgba(0,0,0,0.08); color: #18180f; }
.konf2-modal--bright .konf2__col { border-color: rgba(0,0,0,0.22); }
.konf2-modal--bright .konf2__connector { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #18180f; }
.konf2-modal--bright .konf2__step { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.6); }
.konf2-modal--bright .konf2__step .mono { color: rgba(0,0,0,0.45); }
.konf2-modal--bright .konf2__price { background: rgba(0,0,0,0.04); }
.konf2-modal--bright .konf2__row { border-bottom-color: rgba(0,0,0,0.08); }
.konf2-modal--bright .konf2__result { border-top-color: rgba(0,0,0,0.1); }
.konf2__plan-side { flex: 1; min-width: 0; }
.konf2__hint { font-size: 11px; color: rgba(255,255,255,0.5); }
.konf2__entrybtns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
.konf2__entrybtns button { padding: 5px 4px; font-size: 11px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
  background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.7); cursor: pointer; }
.konf2__entrybtns button:hover { background: rgba(255,255,255,0.06); }
.konf2__entrybtns button.is-active { background: var(--ks-red); border-color: var(--ks-red); color: white; }

/* unified-scene focus control — Gebaeude / Etage / Raum + a floor sub-selector */
.konf2__focus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.konf2__focus > button {
  padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.72);
  transition: background .15s, color .15s, border-color .15s;
}
.konf2__focus > button:hover { background: rgba(255,255,255,0.1); color: #fff; }
.konf2__focus > button.is-active { background: var(--ks-red); border-color: var(--ks-red); color: #fff; }
.konf2__focus-floors { display: inline-flex; gap: 4px; margin-left: 4px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.12); }
.konf2__focus-floors button {
  width: 38px; height: 30px; border-radius: 999px; font-size: 11px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
}
.konf2__focus-floors button:hover { background: rgba(255,255,255,0.1); color: #fff; }
.konf2__focus-floors button.is-active { background: var(--cable-yellow); border-color: var(--cable-yellow); color: #131310; }
.konf2-modal--bright .konf2__focus > button,
.konf2-modal--bright .konf2__focus-floors button { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.7); }
.konf2-modal--bright .konf2__focus-floors { border-left-color: rgba(0,0,0,0.14); }

/* per-floor selector — default-per-floor + click a floor to customise it */
.konf2__floors { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.konf2__floor { border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.02); }
.konf2__floor.is-sel { border-color: rgba(219,0,0,0.5); background: rgba(219,0,0,0.06); }
.konf2__floor.is-over .konf2__floor-tag { color: var(--ks-red); }
.konf2__floor-h { width: 100%; display: grid; grid-template-columns: 52px 1fr 20px; align-items: center; gap: 8px;
  padding: 9px 12px; background: none; border: 0; cursor: pointer; color: inherit; text-align: left; }
.konf2__floor-h:hover { background: rgba(255,255,255,0.04); }
.konf2__floor-tag { font-size: 12px; font-weight: 700; }
.konf2__floor-meta { font-size: 11px; color: rgba(255,255,255,0.55); }
.konf2__floor-chev { font-size: 15px; color: rgba(255,255,255,0.5); text-align: center; }
.konf2__floor-edit { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.konf2__floor-reset { align-self: flex-start; background: none; border: 0; color: rgba(255,255,255,0.6); font-size: 12px; cursor: pointer; padding: 2px 0; }
.konf2__floor-reset:hover { color: var(--ks-red); }

/* ── netzwerkbox FIDELITY (operator 2026-06-12): inside the modal, the controls
   FLOAT on the gradient like the netzwerkbox — dissolve the nested card chrome
   (panel / group / viz boxes) so it reads as ONE minimal floating surface, not
   boxes-within-boxes. Structure comes from the eyebrow labels + faint hairlines,
   not borders + fills. ── */
.konf2-modal .konf2__panel { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 56px; overflow: visible; }
.konf2-modal .konf2__form { gap: 30px; }
.konf2-modal .konf2__group { background: transparent; border: 0; padding: 0; }
.konf2-modal .konf2__form > .konf2__group + .konf2__group { padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.07); }
.konf2-modal .konf2__viz { background: transparent; border: 0; padding: 0; gap: 28px; }
.konf2-modal .konf2__result { border-top: 1px solid rgba(255,255,255,0.1); }
/* the 3D scene sits on the bare gradient like the netzwerkbox centerpiece */
.konf2-modal .konf2__viz > div:first-child { background: transparent; }
/* bright mode: hairlines go dark, no card fills */
.konf2-modal--bright .konf2__group { background: transparent; border: 0; }
.konf2-modal--bright .konf2__form > .konf2__group + .konf2__group { border-top-color: rgba(0,0,0,0.1); }
.konf2-modal--bright .konf2__viz { background: transparent; border: 0; }
.konf2-modal--bright .konf2__result { border-top-color: rgba(0,0,0,0.12); }

/* ── FULLSCREEN-CANVAS stage (operator: shock with a really fullscreen canvas; the
   building dominates the modal, controls float as glass HUDs over it like the
   netzwerkbox). Bedarf only — Custom/Patchkabel keep the column layout. ── */
.konf2__stage { position: fixed; inset: 0; z-index: 1; }
.konf2__stage-canvas { position: absolute; inset: 0; z-index: 0; }
.konf2__hud {
  position: fixed; top: 150px; bottom: 94px; width: 352px; z-index: 6;
  display: flex; flex-direction: column; gap: 26px;
  padding: 24px; overflow-y: auto;
  background: color-mix(in oklab, #16181d 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}
.konf2__hud::-webkit-scrollbar { width: 7px; }
.konf2__hud::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 99px; }
.konf2__hud--left { left: 24px; }
.konf2__hud--right { right: 24px; width: 376px; }
.konf2__hud > .konf2__group + .konf2__group { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); }
/* in the narrow HUD, stack segmented controls as full-width rows (label + hint inline)
   so long labels (Bruestungskanal / Decke·Aufputz) never overlap */
.konf2__hud .konf2__seg { flex-direction: column; gap: 3px; }
.konf2__hud .konf2__seg button { flex-direction: row; justify-content: space-between; align-items: baseline; width: 100%; min-width: 0; text-align: left; gap: 10px; padding: 9px 12px; }
.konf2__hud .konf2__seg button small { flex: 0 0 auto; }
.konf2__focus--float {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 7; margin: 0;
  padding: 8px 12px; border-radius: 999px;
  background: color-mix(in oklab, #16181d 58%, transparent);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 18px 44px rgba(0,0,0,0.5);
}
/* fullscreen Bedarf: drop the big page header so the canvas is the hero; mode tabs float on top */
/* minimal chrome for ALL modes (operator: Patchkabel/Custom adhere to the Bedarf design
   language) — drop the big page header everywhere; the mode tabs are the top element. */
.konf2-modal__dialog .konf2__header { display: none; }
.konf2-modal__dialog .konf2__tabs { margin-top: 8px; max-width: 760px; }
.konf2-modal__dialog:has(.konf2__stage) .konf2__tabs { position: relative; z-index: 6; }
.konf2-modal--bright .konf2__hud, .konf2-modal--bright .konf2__focus--float {
  background: color-mix(in oklab, #ffffff 62%, transparent); border-color: rgba(0,0,0,0.1); box-shadow: 0 30px 70px rgba(0,0,0,0.18); }
.konf2-modal--bright .konf2__hud > .konf2__group + .konf2__group { border-top-color: rgba(0,0,0,0.1); }

/* left HUD = progressive-disclosure ACCORDION (operator: don't dump everything; open
   detail as needed). The panel shrinks to its open section instead of a tall full panel. */
.konf2__hud--left { bottom: auto; max-height: calc(100vh - 196px); gap: 0; padding: 14px; }
.konf2__acc { border-bottom: 1px solid rgba(255,255,255,0.08); }
.konf2__acc:last-child { border-bottom: 0; }
.konf2__acc-h { width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px 2px; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; }
.konf2__acc-t { font-size: 14px; font-weight: 600; flex: 0 0 auto; }
.konf2__acc-sum { flex: 1; min-width: 0; font-size: 11px; color: rgba(255,255,255,0.45); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konf2__acc-chev { flex: 0 0 auto; font-size: 17px; color: rgba(255,255,255,0.5); width: 14px; text-align: center; }
.konf2__acc.is-open .konf2__acc-chev, .konf2__acc.is-open .konf2__acc-t { color: var(--ks-red); }
.konf2__acc-body { padding: 0 2px 18px; display: flex; flex-direction: column; gap: 8px; animation: konfAccIn .2s ease both; }
@keyframes konfAccIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.konf2-modal--bright .konf2__acc { border-bottom-color: rgba(0,0,0,0.1); }
.konf2-modal--bright .konf2__acc-t { color: #18180f; }
.konf2-modal--bright .konf2__acc.is-open .konf2__acc-t { color: var(--ks-red); }

/* readout floats top-right ON the canvas — no panel box, just legible text (operator:
   "write details straight on top", remove the half-empty right panel) */
.konf2__readout { position: fixed; top: 100px; right: 34px; z-index: 6; width: 300px; text-align: right;
  pointer-events: none; text-shadow: 0 2px 16px rgba(0,0,0,0.72); }
.konf2__readout .eyebrow { display: block; }
.konf2__readout-m { font-size: 50px; font-weight: 600; color: var(--cable-yellow); letter-spacing: -0.03em; line-height: 1; margin-top: 4px; }
.konf2__readout-chf { font-size: 26px; font-weight: 600; margin-top: 6px; }
.konf2__readout-sub { font-size: 11px; color: rgba(255,255,255,0.62); margin-top: 5px; }
.konf2__readout-warn { font-size: 11px; color: #ff7a7a; margin-top: 8px; }
.konf2__readout-rows { margin-top: 16px; display: flex; flex-direction: column; gap: 1px; }
.konf2__readout-rows .konf2__row { border-bottom: 0; padding: 3px 0; font-size: 12px; }
/* actions float bottom-right (operator: buttons bottom-right, not cut off in a panel) */
.konf2__actions { position: fixed; bottom: 26px; right: 34px; z-index: 7; display: flex; gap: 10px; align-items: center; }
.konf2-modal--bright .konf2__readout { text-shadow: 0 2px 16px rgba(255,255,255,0.7); }
.konf2-modal--bright .konf2__readout-sub { color: rgba(0,0,0,0.6); }

/* ── netzwerkbox DESIGN-LANGUAGE transfer (operator: "way different elements"): the
   netzwerkbox speaks in soft ROUNDED PILLS on dark glass with a gold value accent.
   Bring every Bedarf control to that same language. ── */
.konf2-modal .konf2__stepper button { border-radius: 999px; width: 30px; height: 30px; font-size: 16px; }
.konf2-modal .konf2__stepper input { font-weight: 500; font-size: 15px; }
.konf2-modal .konf2__field { font-size: 13.5px; padding: 7px 0; }
.konf2-modal .konf2__seg { border-radius: 14px; padding: 5px; gap: 4px; background: rgba(255,255,255,0.05); }
.konf2-modal .konf2__seg button { border-radius: 10px; }
.konf2-modal .konf2__entrybtns button { border-radius: 999px; padding: 7px 4px; }
.konf2-modal .konf2__floor { border-radius: 12px; }
.konf2-modal .konf2__floor-h { border-radius: 12px; }
/* the readout uses its space better (operator) */
.konf2__readout { width: 348px; }
.konf2__readout-m { font-size: 56px; }
.konf2__readout-chf { font-size: 28px; }
.konf2__readout-rows { margin-top: 18px; gap: 2px; }
.konf2__readout-rows .konf2__row { font-size: 12.5px; padding: 3.5px 0; }

/* ── Patchkabel + Custom-Kabel now share the immersive stage shell (operator: each
   tool must FIT its job, not sit on the legacy two-column grid). Patch = product
   hero on the canvas; Custom = a build wizard whose cable updates per step. ── */
.konf2__readout-title { font-size: 21px; font-weight: 500; margin-top: 4px; letter-spacing: -0.02em; line-height: 1.15; }
.konf2__rangelabels { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.konf2__instock { font-size: 12px; color: var(--cable-yellow); margin-top: 8px; }

/* Custom wizard HUD: stepper RAIL at the top of the left HUD, current step's controls
   below — nav stays next to the controls and clears the right-side price readout. */
.konf2__hud--wizard { padding-bottom: 16px; }
.konf2__steps--rail { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.konf2__steps--rail .konf2__step { width: 100%; justify-content: flex-start; gap: 10px; padding: 8px 12px; text-align: left; }
.konf2__hud--wizard .konf2__custom-side { padding-top: 0; }
.konf2__hud--wizard .konf2__connectors { grid-template-columns: 1fr; }
.konf2-modal--bright .konf2__steps--rail { border-bottom-color: rgba(0,0,0,0.1); }
.konf2-modal--bright .konf2__readout-title { color: #18180f; }
.konf2-modal--bright .konf2__instock { color: #b8860b; }

/* Grossauftrag (B2B tab): numeric + select controls fit the dark glass HUD. */
.konf2__b2b-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.konf2__b2b-num { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.konf2__b2b-num > span { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.konf2__hud--left .input, .konf2__hud--left .select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.konf2__hud--left .select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.konf2__hud--left .select option { background: #16171c; color: #fff; }
/* Custom-Kabel stage navigator — on the right, between the price and the Warenkorb button */
.konf2__rightsteps { position: fixed; right: 34px; bottom: 132px; z-index: 6; display: flex; flex-direction: column; gap: 4px; width: 196px; }
.konf2__rstep { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.1); background: rgba(18,18,16,0.55); backdrop-filter: blur(12px); color: rgba(255,255,255,0.72); font-size: 13px; cursor: pointer; text-align: left; transition: background .15s ease; }
.konf2__rstep .mono { font-size: 11px; color: rgba(255,255,255,0.4); }
.konf2__rstep:hover { background: rgba(40,40,38,0.72); color: #fff; }
.konf2__rstep.is-current { background: var(--ks-red); color: #fff; border-color: var(--ks-red); }
.konf2__rstep.is-current .mono { color: rgba(255,255,255,0.85); }
.konf2__rstep.is-done .mono { color: rgba(120,200,140,0.9); }
.konf2-modal--bright .konf2__rstep { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.7); }
.konf2-modal--bright .konf2__rstep.is-current { background: var(--ks-red); color: #fff; }

/* NETZWERKBOX RADIUS CONVENTION applied to the configurators (operator): containers = 3px
   (matches nbx .modal__dialog / .mini-cart / cards), small controls/buttons = 2px. */
.konf2__hud, .konf2__focus--float, .konf2__tabs, .konf2-modal__dialog,
.konf2__acc, .konf2-modal .konf2__floor, .konf2-modal .konf2__floor-h,
.konf2__hud--left .input, .konf2__hud--left .select, .konf2__roomplan { border-radius: 3px; }
.konf2-modal .konf2__seg, .konf2-modal .konf2__seg button, .konf2-modal .konf2__stepper button,
.konf2-modal .konf2__len, .konf2-modal .konf2__step, .konf2__qtychip, .konf2-modal .konf2__entrybtns button,
.konf2__tab { border-radius: 2px; }

/* left-HUD +/- steppers = the netzwerkbox qty control (operator): WHITE pill, red arrows, black number */
/* netzwerkbox theme tokens — --nb-white is the qty-pill SURFACE: #000 in dark, #fff in light
   (and --nb-black is the contrasting number). Same behaviour as the netzwerkbox modal. */
.konf2-modal { --nb-white: #000; --nb-black: #fff; }
.konf2-modal--bright { --nb-white: #fff; --nb-black: #18180f; }
.konf2-modal .konf2__stepper { display: inline-flex; align-items: center; background: var(--nb-white); border-radius: 2px; height: 34px; overflow: hidden; }
.konf2-modal .konf2__stepper button { background: transparent; border: 0; color: var(--ks-red, #DB0000); width: 34px; height: 34px; min-width: 34px; border-radius: 0; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.konf2-modal .konf2__stepper button:hover { background: rgba(127,127,127,0.16); }
.konf2-modal .konf2__stepper input { background: transparent; border: 0; color: var(--nb-black); width: 42px; text-align: center; font-weight: 700; font-size: 14px; }

/* NbxCartButton — verbatim port of the NetzwerkBOX modal checkout CTA */
/* matched to the real ks-nbx-modal checkout button: h48, radius 2px, padding 6px 36px,
   centred, red active; the qty pill is WHITE with red arrows + black number, absolute left */
.nbx-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 48px; position: relative; min-width: 340px; padding: 6px 36px 6px 110px; border: 0; border-radius: 2px; cursor: pointer; transition: background .3s ease; background: var(--ks-red, #DB0000); color: #fff; }
.nbx-cta:hover { background: #b00000; }
.nbx-cta[disabled] { cursor: default; background: rgba(255,255,255,0.3); }
.nbx-cta__qty { display: inline-flex; align-items: center; border-radius: 2px; background: var(--nb-white, #000); height: 36px; position: absolute; left: 6px; }
.nbx-cta__qty--fixed { justify-content: center; min-width: 48px; padding: 0 12px; }   /* Bedarf: static calculated count, no arrows */
.nbx-cta__unit { font-weight: 500; opacity: 0.82; }   /* feathered prefix (e.g. "Boxen") before "zum Warenkorb" */
.nbx-cta.is-added { background: #1f8f4d; }   /* brief confirmation the add worked (header cart is hidden behind the modal) */
.nbx-cta.is-added:hover { background: #1f8f4d; }
.nbx-cta__qty .arrow-down, .nbx-cta__qty .arrow-up { display: inline-flex; align-items: center; cursor: pointer; color: var(--ks-red, #DB0000); padding: 0 10px; }
.nbx-cta__qty .boxqty-text { width: 30px; min-width: 18px; text-align: center; font-weight: 700; color: var(--nb-black, #fff); font-size: 14px; background: transparent; border: 0; outline: none; padding: 0; -moz-appearance: textfield; }
.nbx-cta__qty input.boxqty-text::-webkit-outer-spin-button, .nbx-cta__qty input.boxqty-text::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ALL configurator action buttons conform to the netzwerkbox button (h48, 2px radius) */
.konf2__actions .btn { height: 48px; border-radius: 2px; padding: 6px 28px; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.nbx-cta-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; }
.nbx-cta-note { position: absolute; top: -45px; left: 0; right: 0; font-size: 11px; line-height: 1.35; color: var(--cable-yellow); text-align: center; background: rgba(0,0,0,0.55); padding: 6px 12px; border-radius: 2px; backdrop-filter: blur(8px); }
.nbx-cta__left { display: flex; flex-direction: column; color: #fff; text-align: left; }
.nbx-cta__label { font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.nbx-cta__icon { display: inline-flex; color: #fff; }

/* connector blocked / incompatible with the chosen cable type (validity matrix) */
.konf2__connector.is-blocked { opacity: 0.32; cursor: not-allowed; filter: grayscale(0.4); }
.konf2__connector.is-blocked:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }

/* Stückzahl quick-pick chips (designed, not a raw input) */
.konf2__qtychips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.konf2__qtychip { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); font-size: 13px; cursor: pointer; transition: background .15s ease; }
.konf2__qtychip small { color: rgba(255,255,255,0.5); font-size: 10px; }
.konf2__qtychip:hover { background: rgba(255,255,255,0.1); }
.konf2__qtychip.is-active { background: var(--ks-red); border-color: var(--ks-red); color: #fff; }
.konf2__qtychip.is-active small { color: rgba(255,255,255,0.8); }
.konf2-modal--bright .konf2__qtychip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #18180f; }
.konf2-modal--bright .konf2__qtychip small { color: rgba(0,0,0,0.45); }
.konf2-modal--bright .konf2__qtychip.is-active { background: var(--ks-red); border-color: var(--ks-red); color: #fff; }

.konf2-modal--bright .konf2__b2b-num > span { color: rgba(0,0,0,0.5); }
.konf2-modal--bright .konf2__hud--left .input, .konf2-modal--bright .konf2__hud--left .select { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); color: #18180f; }
.konf2-modal--bright .konf2__hud--left .select option { background: #fff; color: #18180f; }

/* readout rows use TOKENS (not inline whites) so light mode can recolor them */
.konf2__row-l { color: rgba(255,255,255,0.6); }
.konf2__row-r { color: #fff; }
.konf2__row-r.is-delta { color: var(--cable-yellow); }

/* ===== LIGHT-MODE pass: text + selection built white-on-dark now adapt (operator) ===== */
.konf2-modal--bright .konf2__tab { color: #18180f; }
.konf2-modal--bright .konf2__tab.is-active { background: var(--ks-red); color: #fff; }
.konf2-modal--bright .konf2__tab.is-active .mono { color: rgba(255,255,255,0.85) !important; }
.konf2-modal--bright .konf2__row-l { color: rgba(0,0,0,0.55); }
.konf2-modal--bright .konf2__row-r { color: #18180f; }
.konf2-modal--bright .konf2__row-r.is-delta { color: #b8860b; }
.konf2-modal--bright .konf2__readout-warn { color: #b00000; }
/* the SELECTED (red) state must survive the neutral bright overrides on these controls */
.konf2-modal--bright .konf2__seg button.is-active,
.konf2-modal--bright .konf2__connector.is-active,
.konf2-modal--bright .konf2__entrybtns button.is-active,
.konf2-modal--bright .konf2__focus > button.is-active,
.konf2-modal--bright .konf2__focus-floors button.is-active {
  background: var(--ks-red); border-color: var(--ks-red); color: #fff;
}
.konf2-modal--bright .konf2__seg button.is-active small { color: rgba(255,255,255,0.85); }
/* Stückliste (ghost) action button in light mode */
.konf2-modal--bright .konf2__actions .btn-ghost-dark { background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.14); color: #18180f; }
.konf2-modal--bright .konf2__actions .btn-ghost-dark:hover { background: rgba(0,0,0,0.08); color: #18180f; }

/* Hausanschluss intake pad — drag the dot onto the building edge (replaces the 4 side buttons) */
.konf2__entrypad { width: 160px; height: 160px; margin: 10px auto 0; display: block; touch-action: none; cursor: grab; }
.konf2__entrypad:active { cursor: grabbing; }
.konf2__entrypad-bld { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.2); stroke-width: 1.2; }
.konf2__entrypad-lbl { fill: rgba(255,255,255,0.32); font-size: 9px; font-family: var(--font-mono, monospace); letter-spacing: 1px; }
.konf2__entry-hint { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 8px; text-align: center; }
.konf2-modal--bright .konf2__entrypad-bld { fill: rgba(0,0,0,0.04); stroke: rgba(0,0,0,0.2); }
.konf2-modal--bright .konf2__entrypad-lbl { fill: rgba(0,0,0,0.38); }
.konf2-modal--bright .konf2__entry-hint { color: rgba(0,0,0,0.5); }

/* Stückliste bottom SHEET — fixed overlay that slides up; never shifts other elements */
.konf2__bom { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); width: min(620px, 92vw); z-index: 40;
  background: #16171b; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  box-shadow: 0 18px 52px rgba(0,0,0,0.6); padding: 16px 22px 22px; animation: konf2-bom-up .26s cubic-bezier(.2,.7,.3,1); }
@keyframes konf2-bom-up { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.konf2__bom-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.konf2__bom-title { font-size: 15px; font-weight: 700; color: #fff; }
.konf2__bom-x { background: transparent; border: 0; color: rgba(255,255,255,0.6); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.konf2__bom-x:hover { color: #fff; }
.konf2__bom-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 13px; color: rgba(255,255,255,0.78); }
.konf2__bom-row .mono { color: #fff; }
.konf2__bom-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.konf2__bom-foot .mono { color: rgba(255,255,255,0.6); font-size: 12px; }
.konf2__bom-chf { color: var(--cable-yellow) !important; font-size: 16px !important; font-weight: 700; }
.konf2-modal--bright .konf2__bom { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 -18px 46px rgba(0,0,0,0.18); }
.konf2-modal--bright .konf2__bom-title { color: #18180f; }
.konf2-modal--bright .konf2__bom-x { color: rgba(0,0,0,0.5); }
.konf2-modal--bright .konf2__bom-x:hover { color: #18180f; }
.konf2-modal--bright .konf2__bom-row { color: rgba(0,0,0,0.72); border-bottom-color: rgba(0,0,0,0.08); }
.konf2-modal--bright .konf2__bom-row .mono { color: #18180f; }
.konf2-modal--bright .konf2__bom-chf { color: #b8860b !important; }
/* Stückliste config row: seed code + copy/load + PDF offerte */
.konf2__bom-cfg { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.konf2__bom-code { font-size: 11px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.konf2__bom-cfgbtns { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.konf2__bom-cfgbtns button { height: 30px; padding: 0 12px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); font-size: 12px; cursor: pointer; }
.konf2__bom-cfgbtns button:hover { background: rgba(255,255,255,0.1); }
.konf2__bom-load { height: 30px; width: 116px; padding: 0 10px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); color: #fff; font-size: 11px; outline: none; }
.konf2__bom-pdf { background: var(--ks-red, #DB0000) !important; border-color: var(--ks-red, #DB0000) !important; color: #fff !important; font-weight: 600; }
.konf2__bom-pdf:hover { background: #b00000 !important; }
.konf2-modal--bright .konf2__bom-cfg { border-top-color: rgba(0,0,0,0.08); }
.konf2-modal--bright .konf2__bom-code { color: rgba(0,0,0,0.5); }
.konf2-modal--bright .konf2__bom-cfgbtns button { border-color: rgba(0,0,0,0.16); background: rgba(0,0,0,0.04); color: #18180f; }
.konf2-modal--bright .konf2__bom-load { border-color: rgba(0,0,0,0.16); background: rgba(0,0,0,0.04); color: #18180f; }

@media (max-width: 1100px) {
  .konf2__panel { grid-template-columns: 1fr; padding: 16px; }
  .konf2__viz { padding: 16px; }
  .konf2-modal .konf2__viz { padding: 0; }
  .konf2__hud { width: 280px; }
  .konf2__readout { width: 250px; }
  .konf2__readout-m { font-size: 46px; }
  .konf2__steps { grid-template-columns: repeat(3, 1fr); }
  .konf2__connectors { grid-template-columns: 1fr; }
}