@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ================================================================
   HIGH-SPECIFICITY OVERRIDES — Ceres-CSS überschreiben
   ================================================================ */
#konfigurator-app .container {
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#konfigurator-app .row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: -8px !important;
  margin-right: -8px !important;
}
#konfigurator-app [class*="col-"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}
#konfigurator-app .col-12 { flex: 0 0 100%; max-width: 100%; }
/* Basis-Spaltenzahl ZUERST — die responsiven row-cols-* (in den Media-Queries
   weiter unten) müssen sie bei größeren Breakpoints überschreiben können. */
#konfigurator-app .row-cols-1 > * { flex: 0 0 100%; max-width: 100%; }
#konfigurator-app .row-cols-2 > * { flex: 0 0 50%; max-width: 50%; }
@media (min-width: 576px) {
  #konfigurator-app .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  #konfigurator-app .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  #konfigurator-app .col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  #konfigurator-app .row-cols-sm-2 > * { flex: 0 0 50% !important; max-width: 50% !important; }
  #konfigurator-app .row-cols-sm-3 > * { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
}
@media (min-width: 768px) {
  #konfigurator-app .row-cols-md-4 > * { flex: 0 0 25% !important; max-width: 25% !important; }
}
@media (min-width: 992px) {
  #konfigurator-app .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  #konfigurator-app .col-lg-8 { flex: 0 0 66.667%; max-width: 66.667%; }
}
@media (min-width: 1200px) {
  #konfigurator-app .row-cols-xl-3 > * { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
}
/* Bulletproof 2-up via CSS-GRID: Grid-Items werden in Zellen platziert und
   können sich prinzipbedingt NIE überlappen (weder horizontal noch vertikal) —
   unabhängig davon, was Ceres/Bootstrap an .row/.col macht. Gleich hohe Karten
   via stretch. Ersetzt die fragile Flexbox-Lösung. */
#konfigurator-app .k2up {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  margin: 0 !important;
}
@media (min-width: 576px) {
  #konfigurator-app .k2up { grid-template-columns: 1fr 1fr !important; }
}
#konfigurator-app .k2up > .col {
  flex: none !important; width: auto !important; max-width: none !important;
  min-width: 0 !important; box-sizing: border-box !important;
  padding: 0 !important; margin: 0 !important;
  display: flex !important; flex-direction: column !important;
}
/* border-box ist ENTSCHEIDEND: ohne das rechnet content-box die Karten-Innen-
   Polster (z. B. .choice-big / .p-3 / .p-4) ZUSÄTZLICH zur 100%-Breite und die
   Karte laeuft ueber ihre Grid-Zelle -> Ueberlappung mit der Nachbarkarte. */
#konfigurator-app .k2up > .col > * { width: 100% !important; height: 100%; box-sizing: border-box !important; }
#konfigurator-app .sel-card,
#konfigurator-app .choice-big {
  display: block !important;
  background: #fff !important;
  border: 1.5px solid rgba(33,37,41,.12) !important;
}
#konfigurator-app .sel-card--on,
#konfigurator-app .choice-big--on {
  border-color: #FFCC00 !important;
  background: rgba(255,204,0,.07) !important;
}
/* Empfohlenes (guenstigstes ausreichendes) Netzteil: dauerhaft hervorgehoben, auch ungewaehlt */
#konfigurator-app .sel-card--reco {
  border-color: #FFCC00 !important;
  box-shadow: 0 0 0 2.5px var(--c-yellow-ring) !important;
}
/* Ausreichend, aber ueberdimensioniert -> optisch zuruecknehmen */
#konfigurator-app .sel-card--dim { opacity: .82; }
#konfigurator-app .sel-card--dim:hover { opacity: 1; }
#konfigurator-app .card {
  background: #fff !important;
  border: none !important;
}

/* Flexbox utilities (für Step-Indicator und Card-Layouts) */
#konfigurator-app .d-flex          { display: flex !important; }
#konfigurator-app .d-inline-flex   { display: inline-flex !important; }
#konfigurator-app .d-block         { display: block !important; }
#konfigurator-app .d-none          { display: none !important; }
@media (min-width: 576px) {
  #konfigurator-app .d-sm-block    { display: block !important; }
  #konfigurator-app .d-sm-flex     { display: flex !important; }
}
#konfigurator-app .flex-column            { flex-direction: column !important; }
#konfigurator-app .flex-row               { flex-direction: row !important; }
#konfigurator-app .flex-wrap              { flex-wrap: wrap !important; }
#konfigurator-app .flex-shrink-0          { flex-shrink: 0 !important; }
#konfigurator-app .flex-grow-1            { flex-grow: 1 !important; }
#konfigurator-app .align-items-start      { align-items: flex-start !important; }
#konfigurator-app .align-items-center     { align-items: center !important; }
#konfigurator-app .align-items-end        { align-items: flex-end !important; }
#konfigurator-app .justify-content-start  { justify-content: flex-start !important; }
#konfigurator-app .justify-content-center { justify-content: center !important; }
#konfigurator-app .justify-content-between{ justify-content: space-between !important; }
#konfigurator-app .justify-content-end    { justify-content: flex-end !important; }
#konfigurator-app .text-center            { text-align: center !important; }
#konfigurator-app .text-muted             { color: rgba(33,37,41,.64) !important; }
#konfigurator-app .w-100                  { width: 100% !important; }
#konfigurator-app .h-100                  { height: 100% !important; }
#konfigurator-app .mx-auto                { margin-left: auto !important; margin-right: auto !important; }
#konfigurator-app .mb-0  { margin-bottom: 0 !important; }
#konfigurator-app .mb-1  { margin-bottom: .25rem !important; }
#konfigurator-app .mb-2  { margin-bottom: .5rem !important; }
#konfigurator-app .mb-3  { margin-bottom: 1rem !important; }
#konfigurator-app .mb-4  { margin-bottom: 1.5rem !important; }
#konfigurator-app .mt-2  { margin-top: .5rem !important; }
#konfigurator-app .mt-3  { margin-top: 1rem !important; }
#konfigurator-app .ml-1  { margin-left: .25rem !important; }
#konfigurator-app .mr-1  { margin-right: .25rem !important; }
#konfigurator-app .p-3   { padding: 1rem !important; }
#konfigurator-app .p-4   { padding: 1.5rem !important; }
#konfigurator-app .p-5   { padding: 3rem !important; }
#konfigurator-app .py-4  { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
#konfigurator-app .py-5  { padding-top: 3rem !important; padding-bottom: 3rem !important; }
#konfigurator-app .py-lg-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
#konfigurator-app .pl-4  { padding-left: 1.5rem !important; }

/* ================================================================
   DESIGN TOKENS — Primärfarben Hansemut GmbH
   ================================================================ */
:root {
  --c-yellow:       #FFCC00;
  --c-dark:         #212529;
  --c-gray:         #333333;
  --c-cream:        #F5F5F3;
  --c-white:        #FFFFFF;

  --c-yellow-tint:  rgba(255, 204,   0, .07);
  --c-yellow-soft:  rgba(255, 204,   0, .13);
  --c-yellow-ring:  rgba(255, 204,   0, .25);
  --c-dark-tint:    rgba( 33,  37,  41, .05);
  --c-dark-mid:     rgba( 33,  37,  41, .55);
  --c-border:       rgba( 33,  37,  41, .12);
  --c-border-hover: rgba( 33,  37,  41, .30);

  --r-card:  16px;
  --r-btn:   10px;
  --r-chip:   6px;
  --r-big:   20px;

  --t: all .18s cubic-bezier(.4, 0, .2, 1);

  --s-card:     0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --s-card-up:  0 8px 28px rgba(0,0,0,.10);
  --s-card-sel: 0 0 0 3.5px var(--c-yellow-ring), 0 4px 16px rgba(255,204,0,.12);
  --s-btn:      0 4px 14px rgba(255,204,0,.38);
}

/* ── Base ─────────────────────────────────────────────────────── */
#konfigurator-app {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--c-cream);
  color: var(--c-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#konfigurator-app a { color: var(--c-dark); }
#konfigurator-app a:hover { color: var(--c-gray); }

/* ── Page Header ──────────────────────────────────────────────── */
.konfig-header {
  background: var(--c-dark);
  position: relative;
  overflow: hidden;
  padding: 26px 0 24px;
}
.konfig-header::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,204,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,204,0,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.konfig-header::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,204,0,.18) 0%, transparent 70%);
  pointer-events: none;
}
.konfig-header-icon {
  width: 44px; height: 44px;
  background: var(--c-yellow);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--c-dark);
  flex-shrink: 0;
}
.konfig-header-label {
  font-size: .68rem; font-weight: 700;
  color: rgba(255,204,0,.75);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 3px;
}
.konfig-header h1 {
  font-size: 1.3rem; font-weight: 800;
  color: var(--c-white);
  letter-spacing: -.02em; margin-bottom: 0;
}
.konfig-header p {
  color: rgba(255,255,255,.6);
  font-size: .82rem; line-height: 1.5;
  margin-bottom: 0;
}
/* Wertversprechen rechts im Hero — Vertrauensanker, statt Fließtext */
.konfig-header-trust {
  display: flex; align-items: center; gap: 18px;
  color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 600;
}
.konfig-header-trust i { color: var(--c-yellow); margin-right: 6px; }
@media (max-width: 767px) { .konfig-header-trust { display: none; } }

/* ── Step Indicator ───────────────────────────────────────────── */
.konfig-stepper {
  border-radius: var(--r-card);
  padding: 18px 24px 18px;
  box-shadow: var(--s-card);
}
/* Prominente Schritt-Anzeige statt gedrängter Label-Kette */
.stepper-now { display: flex; align-items: baseline; gap: 10px; }
.stepper-now-num { font-size: 1.05rem; font-weight: 800; color: var(--c-dark); letter-spacing: -.01em; }
.stepper-now-tot { color: rgba(33,37,41,.4); font-weight: 700; }
.stepper-now-sep { color: var(--c-yellow); font-weight: 800; }
.stepper-now-name { font-size: 1.05rem; font-weight: 700; color: var(--c-dark); }
.stepper-pct { font-size: .78rem; font-weight: 700; color: rgba(33,37,41,.45); }
/* Beim Schrittwechsel rastet der Stepper mit etwas Abstand am oberen Rand ein */
#konfig-top { scroll-margin-top: 14px; }
.step-progress-track {
  height: 5px; border-radius: 99px;
  background: rgba(33,37,41,.08);
  overflow: hidden;
}
.step-progress-fill {
  height: 100%; border-radius: 99px;
  background: var(--c-yellow);
  transition: width .4s ease;
}
.step-ci {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  flex-shrink: 0;
  transition: var(--t);
}
.step-ci-done    { background: var(--c-yellow); color: var(--c-dark); }
.step-ci-current {
  background: var(--c-dark); color: var(--c-yellow);
  width: 30px; height: 30px; font-size: .8rem;
  box-shadow: 0 0 0 4px var(--c-yellow-ring);
}
.step-ci-future  { background: rgba(33,37,41,.08); color: rgba(33,37,41,.4); }
.step-short {
  font-size: .6rem; font-weight: 600;
  letter-spacing: .02em;
  margin-top: 4px; text-align: center;
  max-width: 40px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step-short-done    { color: rgba(33,37,41,.45); }
.step-short-current { color: var(--c-dark); font-weight: 700; }
.step-short-future  { color: rgba(33,37,41,.25); }
.step-conn {
  flex: 1; height: 2px; border-radius: 99px;
  margin: 12px 3px 0; transition: background .3s ease;
}
.step-conn-done   { background: var(--c-yellow); }
.step-conn-future { background: rgba(33,37,41,.08); }

/* ── Step Card ────────────────────────────────────────────────── */
.konfig-card {
  border-radius: var(--r-card);
  box-shadow: var(--s-card);
  overflow: hidden;
}
.konfig-card-header {
  background: var(--c-white);
  padding: 22px 26px 20px 30px;
  border-bottom: 1px solid var(--c-border);
  position: relative;
}
.konfig-card-header::before {
  content: '';
  position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 4px; border-radius: 0 3px 3px 0;
  background: var(--c-yellow);
}
.step-badge {
  display: inline-flex; align-items: center;
  background: var(--c-dark);
  color: var(--c-yellow);
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 10px;
}
.konfig-card-header h2 {
  color: var(--c-dark);
  font-size: 1.38rem; font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 5px;
}
.konfig-card-header p { color: rgba(33,37,41,.62); font-size: .88rem; margin-bottom: 0; }
/* Kopf-Icon + „Schritt X von 9"-Label: nur auf Mobil sichtbar (Mockup-Kopf).
   Desktop nutzt weiterhin das .step-badge und zeigt Icon/Step-Label nicht. */
.ch-icon { display: none; }
.ch-step { display: none; }
.konfig-card-body { padding: 24px 26px; }
.konfig-card-footer {
  padding: 14px 26px;
  border-top: 1px solid var(--c-cream);
  background: rgba(245,245,243,.45);
  gap: 12px;
}
/* Footer: Zurück links, Hinweis + Weiter rechts (3 direkte Kinder, damit sie auf
   Mobil sauber umbrechen können). Desktop-Look bleibt via auto-Margin identisch. */
.footer-hint { font-size: .8rem; color: rgba(33,37,41,.55); font-weight: 600; line-height: 1.35; }
.konfig-card-footer .footer-hint { margin-left: auto; }
.konfig-card-footer .footer-next { margin-left: 14px; }
.konfig-card-footer .btn-back + .footer-next { margin-left: auto; } /* wenn kein Hinweis: Weiter nach rechts */

/* ── Step Content Animation (Vue Transition) ──────────────────── */
.step-enter-active { animation: konfStepIn .22s ease-out; }
.step-leave-active { animation: konfStepOut .14s ease-in forwards; }
@keyframes konfStepIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes konfStepOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-5px); } }
.sub-reveal { animation: konfStepIn .2s ease-out; }

/* ── Selectable Cards ─────────────────────────────────────────── */
.sel-card {
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: var(--t);
  position: relative;
  overflow: hidden;   /* verhindert, dass Kopfbilder über den Kartenrand bluten */
}
.sel-card:hover:not(.sel-card--on):not(.sel-card--off):not(.sel-card--locked) {
  border-color: var(--c-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--s-card-up);
}
.sel-card--on {
  border-color: var(--c-yellow) !important;
  background: var(--c-yellow-tint);
  box-shadow: var(--s-card-sel) !important;
}
.sel-card--off { opacity: .35; cursor: not-allowed; pointer-events: none; }
/* gesperrt, aber weiterhin hover-/tooltip-fähig (Grund bleibt sichtbar) */
.sel-card--locked { opacity: .78; cursor: not-allowed; background: rgba(176,42,42,.035) !important; border-color: rgba(176,42,42,.4) !important; }
.sel-card--locked:hover { border-color: rgba(176,42,42,.5) !important; }
/* Diagonal-Marker, damit unpassende Karten auf einen Blick erkennbar sind */
.sel-card--locked::after { content: ""; position: absolute; top: 0; right: 0; border-width: 0 34px 34px 0; border-style: solid; border-color: transparent #b02a2a transparent transparent; border-top-right-radius: inherit; }
.sel-card--locked .pcard-media { filter: grayscale(.85); }

.sel-check {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px;
  background: var(--c-yellow);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-dark);
  font-size: .6rem; font-weight: 900;
  box-shadow: 0 2px 6px rgba(255,204,0,.4);
  z-index: 1;
}

/* ── LED-Streifen-Karte (Entscheidungs-Layout mit CTA) ────────── */
.led-card {
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-card);
  overflow: hidden;
  cursor: pointer;
  transition: var(--t);
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
}
.led-card:hover:not(.led-card--on):not(.led-card--locked) {
  border-color: var(--c-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--s-card-up);
}
.led-card--on {
  border-color: var(--c-yellow) !important;
  box-shadow: var(--s-card-sel) !important;
}
.led-card--locked { opacity: .6; cursor: not-allowed; background: rgba(33,37,41,.02); }
.led-card-body { padding: 16px 18px 14px; display: flex; gap: 15px; flex: 1; }
.led-thumb {
  width: 112px; height: 112px; border-radius: 12px;
  object-fit: contain; flex-shrink: 0; padding: 8px;
  background: var(--c-white); border: 1px solid var(--c-border);
}

/* ── Produktbild in Auswahlkarten (größer, konsistent, kein Bleed) ── */
/* Links, horizontale Karten (Controller, Netzteil) */
.prod-thumb {
  width: 108px; height: 108px; border-radius: 12px;
  object-fit: contain; padding: 8px; flex-shrink: 0;
  background: var(--c-white); border: 1px solid var(--c-border);
}
/* Zentriert, für zentrierte Karten (Fernbedienungen) */
.prod-thumb-c {
  width: 132px; height: 132px; border-radius: 14px;
  object-fit: contain; padding: 10px;
  background: var(--c-white); border: 1px solid var(--c-border);
  display: block; margin: 0 auto 14px;
}
/* ── EINHEITLICHE PRODUKTKARTE — Bild oben, Text unten (überall gleich) ──
   Eine Struktur für ALLE Auswahlkarten (Profil, Abdeckung, LED, Controller,
   Fernbedienung, Netzteil): .pcard = Karte (Flex-Spalte), .pcard-media =
   Kopfbereich mit Produktbild oder Icon, .pcard-body = Textbereich darunter. */
#konfigurator-app .pcard { display: flex !important; flex-direction: column; height: 100%; }
.pcard-media {
  height: 300px; background: var(--c-cream);
  border-radius: var(--r-card) var(--r-card) 0 0;
  overflow: hidden; flex-shrink: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.pcard-media img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 16px; }
/* Icon-only-Karten (Abdeckung, Profil ohne Foto): kein Sinn in einer grossen
   Bildflaeche fuer ein einzelnes Glyph -> deutlich niedriger, spart Weissraum. */
.pcard-media--glyph { height: 128px; }
/* Bildergalerie: Pfeile links/rechts + Dots unten */
.gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.92);
  box-shadow: 0 2px 9px rgba(0,0,0,.18);
  color: var(--c-dark); font-size: .9rem; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t);
}
.gal-arrow:hover { background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.24); }
.gal-arrow:active { transform: translateY(-50%) scale(.92); }
.gal-arrow--l { left: 9px; }
.gal-arrow--r { right: 9px; }
.gal-dots {
  position: absolute; bottom: 11px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: 6px;
}
.gal-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(33,37,41,.25); cursor: pointer; transition: var(--t);
}
.gal-dot--on { background: var(--c-dark); width: 20px; border-radius: 99px; }
.pcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pcard-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Live-Preis auf den Produktkarten */
.konfig-price { font-size: .98rem; font-weight: 800; color: var(--c-dark); line-height: 1.2; }
.konfig-price small { font-weight: 600; font-size: .72rem; color: #8a8f94; }
.konfig-price--muted { font-size: .72rem; font-weight: 700; color: #b02a2a; }
.konfig-price--load { font-size: .72rem; font-weight: 600; color: #b7bcc1; }
/* Großes Icon, wenn kein Produktbild vorhanden (z. B. „Ohne"-Karten) */
.ir-xl { width: 76px; height: 76px; border-radius: 20px; font-size: 2.1rem; }
/* Abdeckungs-Typen: kein Kasten, nur ein klares großes Symbol auf der Media-Fläche */
.cover-glyph { font-size: 4.2rem; line-height: 1; transition: var(--t); }
/* Kompat.-Alias: Profilkarte nutzt weiterhin .profile-media */
.profile-media { height: 180px; background: var(--c-cream); border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.profile-media img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 16px; }
.led-type {
  display: inline-flex; align-items: center;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-chip);
  flex-shrink: 0;
}
.led-name {
  font-size: 1.02rem; font-weight: 800; color: var(--c-dark);
  letter-spacing: -.01em; line-height: 1.15; margin: 6px 0 4px;
}
.led-desc {
  font-size: .8rem; color: rgba(33,37,41,.66); line-height: 1.4;
  margin-bottom: 8px;
}
.led-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 18px;
  border-top: 1px solid var(--c-cream);
  background: rgba(245,245,243,.5);
}
/* ── LED Split-Wahl (inline unter gewaehltem Streifen) ───────────── */
.led-split { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(33,37,41,.18); }
.led-split-q { font-size: .8rem; font-weight: 700; color: var(--c-dark); margin: 0 0 8px; }
.led-split-opt { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 6px; padding: 9px 12px; border: 1.5px solid var(--c-border); border-radius: 12px; cursor: pointer; transition: var(--t); }
.led-split-opt:last-child { margin-bottom: 0; }
.led-split-opt:hover { border-color: rgba(33,37,41,.32); }
.led-split-opt--on { border-color: var(--c-yellow); background: rgba(255,204,0,.10); }
.led-split-opt input { accent-color: var(--c-yellow); margin: 0; }
.led-split-label { flex: 1; font-size: .84rem; font-weight: 600; color: var(--c-dark); }
.led-split-price { font-size: .84rem; font-weight: 800; color: var(--c-dark); }
.led-compat { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; padding: 4px 11px; border-radius: 99px; }
.led-compat-ok  { color: #1a7a34; background: rgba(26,122,52,.12); }
.led-compat-err { color: #b02a2a; background: rgba(176,42,42,.14); font-weight: 800; letter-spacing: .01em; }
.led-compat-ok i  { color: #1a7a34; }
.led-compat-err i { color: #b02a2a; }
.led-select-btn {
  background: var(--c-yellow); color: var(--c-dark);
  border: none; border-radius: var(--r-btn);
  font-weight: 700; font-size: .82rem; font-family: inherit;
  padding: 8px 18px; cursor: pointer; flex-shrink: 0;
  transition: var(--t);
  display: inline-flex; align-items: center; gap: 7px;
}
.led-select-btn:hover { background: #e6b800; box-shadow: var(--s-btn); }
.led-card--on .led-select-btn { background: var(--c-dark); color: var(--c-yellow); }
.led-select-btn:disabled { background: rgba(33,37,41,.1); color: rgba(33,37,41,.4); cursor: not-allowed; box-shadow: none; }

/* ── Category / Tab Buttons ───────────────────────────────────── */
/* Abschnitts-Überschrift + Subtext (z. B. „Profilfarbe") */
.sec-head { font-size: .86rem; font-weight: 700; color: var(--c-dark); }
.sec-sub  { font-size: .8rem; color: rgba(33,37,41,.55); }
.cat-btn {
  background: var(--c-cream);
  border: 1.5px solid var(--c-border);
  color: var(--c-gray);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .81rem; font-weight: 600;
  cursor: pointer;
  transition: var(--t);
  margin-right: 6px; margin-bottom: 6px;
  font-family: inherit;
  outline: none;
}
.cat-btn:hover { border-color: var(--c-border-hover); background: rgba(33,37,41,.05); }
.cat-btn.active { background: var(--c-dark); color: var(--c-yellow); border-color: var(--c-dark); }

/* ── Big Choice Cards ─────────────────────────────────────────── */
.choice-big {
  background: var(--c-white);
  border: 2px solid var(--c-border);
  border-radius: var(--r-big);
  cursor: pointer;
  transition: var(--t);
  text-align: center;
  padding: 36px 24px;
}
.choice-big:hover:not(.choice-big--on) {
  border-color: var(--c-border-hover);
  transform: translateY(-3px);
  box-shadow: var(--s-card-up);
}
.choice-big--on {
  border-color: var(--c-yellow) !important;
  background: var(--c-yellow-tint);
  box-shadow: var(--s-card-sel) !important;
}
/* "Ohne LED-Beleuchtung" — dezenter als die beiden Haupt-Optionen */
.choice-big--muted {
  border-style: dashed;
  background: rgba(33,37,41,.015);
}

/* ── Icon Ring ────────────────────────────────────────────────── */
.ir {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.05rem;
  transition: var(--t);
}
.ir-default { background: var(--c-cream); color: var(--c-gray); }
.ir-yellow  { background: rgba(255,204,0,.14); color: var(--c-dark); }
.ir-dark    { background: var(--c-dark); color: var(--c-yellow); }
.ir-big { width: 58px; height: 58px; border-radius: 16px; font-size: 1.5rem; }

/* ── Chips / Badges ───────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-chip);
  font-size: .7rem; font-weight: 600; line-height: 1.65;
}
.chip-default { background: var(--c-cream); color: var(--c-gray); border: 1px solid rgba(33,37,41,.08); }
.chip-yellow  { background: rgba(255,204,0,.15); color: var(--c-dark); }
.chip-dark    { background: rgba(33,37,41,.08); color: var(--c-dark); }
.chip-ok      { background: rgba(33,37,41,.06); color: var(--c-dark); border: 1px solid rgba(33,37,41,.12); }
.chip-err     { background: rgba(33,37,41,.06); color: var(--c-dark); border: 1px solid rgba(33,37,41,.22); }
.chip-single  { background: rgba(255,204,0,.12); color: var(--c-dark); }
.chip-cct     { background: rgba(33,37,41,.07); color: var(--c-dark); }
.chip-rgb     { background: rgba(33,37,41,.1);  color: var(--c-dark); font-weight: 700; }
.chip-rgbw    { background: rgba(33,37,41,.12); color: var(--c-dark); font-weight: 700; }
.chip-cob     { background: rgba(255,204,0,.2); color: var(--c-dark); }

/* ── Alert Varianten ──────────────────────────────────────────── */
.al {
  border-radius: 12px;
  padding: 13px 16px;
  font-size: .82rem;
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 0;
  line-height: 1.5;
}
.al-info    { background: var(--c-yellow-tint);  border: 1px solid rgba(255,204,0,.3);  color: var(--c-dark); }
.al-success { background: var(--c-dark-tint);    border: 1px solid var(--c-border);     color: var(--c-dark); }
.al-warn    { background: rgba(255,204,0,.12);   border: 1px solid rgba(255,204,0,.45); color: var(--c-dark); }
.al-error   { background: rgba(33,37,41,.06);    border: 1px solid rgba(33,37,41,.25);  color: var(--c-dark); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-brand {
  background: var(--c-yellow);
  color: var(--c-dark);
  border: none;
  border-radius: var(--r-btn);
  font-weight: 700; font-size: .88rem;
  padding: 11px 24px;
  transition: var(--t);
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-brand:hover  { background: #e6b800; color: var(--c-dark); transform: translateY(-1px); box-shadow: var(--s-btn); }
.btn-brand:active { transform: translateY(0); box-shadow: none; }
.btn-brand:disabled { opacity: .42; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-brand-lg { padding: 13px 28px; font-size: .95rem; border-radius: 12px; }

.btn-back {
  background: transparent;
  color: var(--c-dark);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-btn);
  font-weight: 600; font-size: .88rem;
  padding: 10px 20px;
  transition: var(--t);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-back:hover   { border-color: var(--c-border-hover); background: rgba(33,37,41,.03); }
.btn-back:disabled { opacity: .4; cursor: not-allowed; }

.btn-cart {
  background: var(--c-dark);
  color: var(--c-yellow);
  border: none; border-radius: var(--r-btn);
  font-weight: 700; font-size: 1rem;
  padding: 16px 28px; width: 100%;
  transition: var(--t);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  letter-spacing: .01em;
}
.btn-cart:hover  { background: var(--c-gray); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(33,37,41,.22); }
.btn-cart:active { transform: translateY(0); }
.btn-cart:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

.btn-reset {
  background: transparent;
  color: rgba(33,37,41,.5);
  border: none;
  font-size: .82rem; font-weight: 500;
  padding: 10px; width: 100%; text-align: center;
  transition: var(--t); border-radius: 8px;
}
.btn-reset:hover { color: var(--c-dark); background: rgba(33,37,41,.04); }

/* ── Sicherungsfrage "Neu starten" ──────────────────────────── */
.reset-confirm {
  border: 1px solid rgba(220,53,69,.35);
  background: rgba(220,53,69,.05);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.reset-confirm-q {
  color: #b02a37; font-size: .86rem; font-weight: 600;
  margin: 0 0 12px;
}
.reset-confirm-actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.reset-confirm-actions .btn-reset { width: auto; flex: 1 1 auto; }
.btn-reset--danger {
  color: #fff !important; background: #dc3545 !important;
  font-weight: 600;
}
.btn-reset--danger:hover { background: #b02a37 !important; }
.btn-reset--ghost {
  color: rgba(33,37,41,.7) !important;
  border: 1px solid rgba(33,37,41,.15) !important;
}

/* ── Mengen-Stepper ───────────────────────────────────────────── */
#konfigurator-app .qty-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1.5px solid var(--c-border); background: #fff; color: var(--c-dark);
  font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--t); flex-shrink: 0;
}
#konfigurator-app .qty-btn:hover { border-color: var(--c-dark); background: var(--c-cream); }
#konfigurator-app .qty-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Custom Toggle ────────────────────────────────────────────── */
.tog {
  width: 40px; height: 22px;
  border-radius: 999px;
  background: #dee2e6;
  transition: background .15s ease;
  cursor: pointer; position: relative; flex-shrink: 0;
}
.tog.tog-on { background: var(--c-dark); }
.tog::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-white);
  transition: transform .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tog.tog-on::after { transform: translateX(18px); }

/* ── Summary Table ────────────────────────────────────────────── */
.conf-table thead th {
  background: var(--c-cream);
  font-size: .7rem; font-weight: 700;
  color: rgba(33,37,41,.55);
  text-transform: uppercase; letter-spacing: .07em;
  padding: 10px 16px; text-align: left;
  border-bottom: 1.5px solid var(--c-border);
}
.conf-table tbody td {
  padding: 11px 16px;
  font-size: .82rem; color: var(--c-dark);
  border-bottom: 1px solid var(--c-cream);
  vertical-align: middle;
}
.conf-table tfoot td {
  padding: 12px 16px;
  border-top: 2px solid var(--c-border);
  font-size: .88rem;
}
.conf-table tbody tr:last-child td { border-bottom: none; }
.conf-table tbody tr:hover td { background: rgba(255,204,0,.03); }

/* ── Sidebar ──────────────────────────────────────────────────── */
.konfig-sidebar {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--s-card);
}
.sidebar-hd {
  background: var(--c-dark);
  padding: 14px 16px;
  gap: 9px;
}
.sidebar-hd span { font-size: .84rem; font-weight: 700; color: var(--c-white); }
.sidebar-hd i { color: var(--c-yellow); }
.sidebar-hd-count {
  margin-left: auto; font-size: .72rem; font-weight: 700;
  color: var(--c-yellow); background: rgba(255,204,0,.16);
  padding: 2px 10px; border-radius: 999px;
}
.sidebar-row {
  padding: 11px 16px;
  border-bottom: 1px solid var(--c-cream);
  gap: 11px; align-items: center;
  transition: var(--t);
}
.sidebar-row:last-child { border-bottom: none; }
.sidebar-row--current { background: var(--c-yellow-tint); box-shadow: inset 3px 0 0 var(--c-yellow); }
.sidebar-row-label {
  font-size: .62rem; font-weight: 700;
  color: rgba(33,37,41,.45);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 1px;
}
.sidebar-row--current .sidebar-row-label { color: var(--c-dark); }
.sidebar-row-value { font-size: .82rem; font-weight: 700; color: var(--c-dark); line-height: 1.3; }
.sidebar-row-price { font-size: .82rem; font-weight: 800; color: var(--c-dark); white-space: nowrap; margin-left: 10px; align-self: center; }
.sidebar-row-empty { font-size: .76rem; font-weight: 600; color: rgba(33,37,41,.35); }
.sidebar-row--current .sidebar-row-empty { color: var(--c-dark); font-weight: 700; }
.sb-ic {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; flex-shrink: 0; transition: var(--t);
}
.sb-ic--done    { background: var(--c-yellow); color: var(--c-dark); }
.sb-ic--current { background: var(--c-dark); color: var(--c-yellow); }
.sb-ic--pending { background: transparent; border: 1.5px dashed var(--c-border); color: rgba(33,37,41,.3); }
.sb-ic--skipped { background: transparent; border: 1.5px dashed var(--c-border); color: rgba(33,37,41,.22); }
.sidebar-power {
  background: var(--c-cream);
  padding: 12px 16px;
  border-top: 1px solid var(--c-border);
}
.power-bar-track {
  height: 3px; border-radius: 99px;
  background: rgba(33,37,41,.08);
  margin-top: 8px; overflow: hidden;
}
.power-bar-fill {
  height: 100%; border-radius: 99px;
  background: var(--c-yellow);
  transition: width .5s ease;
}
.sidebar-total {
  background: var(--c-dark);
  padding: 14px 16px;
}
.sidebar-total-label { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.sidebar-total-value { font-size: 1.35rem; font-weight: 800; color: var(--c-white); }
.sidebar-total-note { font-size: .68rem; color: rgba(255,255,255,.45); margin-top: 4px; }
@media (min-width: 992px) {
  .sidebar-sticky { position: sticky; top: 24px; }
}
/* Chevron nur auf Mobil (dort ist der Header ein Aufklapp-Toggle) */
.sidebar-toggle-ic { display: none; }
@media (max-width: 991px) {
  .konfig-sidebar { margin-top: 4px; }
  .sidebar-hd { cursor: pointer; user-select: none; }
  .sidebar-toggle-ic {
    display: inline-block; color: var(--c-yellow);
    transition: transform .25s ease;
  }
  .konfig-sidebar:not(.is-collapsed) .sidebar-toggle-ic { transform: rotate(180deg); }
  .konfig-sidebar.is-collapsed .sidebar-body { display: none; }
}

/* ── Swatch Farbkreis ─────────────────────────────────────────── */
.swatch {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid rgba(33,37,41,.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  flex-shrink: 0;
}

/* ── Farb-Filter über den Profilen ────────────────────────────── */
#konfigurator-app .cf-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
  display: inline-block; margin-right: 7px; vertical-align: middle;
}
#konfigurator-app .mini-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.14);
  display: inline-block; flex-shrink: 0;
  transition: var(--t);
  position: relative;
}
/* Touch-Trefferflaeche auf ~44px vergroessern (der sichtbare Punkt ist nur 24px).
   Ohne das trifft ein Finger auf Mobil oft die Karte STATT des Swatches -> es
   feuert selectProfile (Karte) statt selectProfileColor (Swatch) -> die Farbe
   springt auf den Standard zurueck = "Farbwechsel geht nicht". Der Pseudo-Bereich
   gehoert zum Swatch, daher greift dessen @click.stop weiterhin. Visuell unveraendert. */
#konfigurator-app .mini-swatch::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%;
}
#konfigurator-app .mini-swatch--on { box-shadow: 0 0 0 2.5px var(--c-yellow); }

/* ── Längen-Regler (Slider) ───────────────────────────────────── */
.length-slider-wrap {
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 26px 26px 18px;
}
.length-value { font-size: 3rem; font-weight: 800; color: var(--c-yellow); line-height: 1; letter-spacing: -.02em; }
.length-value--empty { color: rgba(33,37,41,.3); font-size: 1.35rem; font-weight: 700; }
.length-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; border-radius: 99px;
  outline: none; margin: 20px 0 8px; cursor: pointer;
}
.length-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-yellow); border: 4px solid #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.28); cursor: grab; margin-top: -13px;
}
.length-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.length-range::-webkit-slider-runnable-track { height: 10px; border-radius: 99px; }
.length-range::-moz-range-thumb {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-yellow); border: 4px solid #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.28); cursor: grab;
}
.length-ticks span {
  font-size: .72rem; font-weight: 700; color: rgba(33,37,41,.4);
  cursor: pointer; padding: 2px 4px; transition: var(--t);
}
.length-ticks span.on { color: var(--c-dark); }
.drag-hint {
  text-align: center; margin-top: 14px;
  font-size: .84rem; font-weight: 600; color: var(--c-dark);
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.drag-hint i { color: var(--c-yellow); font-size: 1.05rem; animation: dragWiggle 1.3s ease-in-out infinite; }
@keyframes dragWiggle { 0%,100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }

/* ── Hintergrundflächen in Steps ──────────────────────────────── */
.info-strip {
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px 16px;
  gap: 12px;
}
.toggle-row {
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px 18px;
  gap: 14px;
}

/* ── Power Calculation Banner ─────────────────────────────────── */
.power-calc-banner {
  background: linear-gradient(135deg, var(--c-yellow-tint) 0%, rgba(255,204,0,.04) 100%);
  border: 1px solid rgba(255,204,0,.35);
  border-radius: 14px;
  padding: 16px 18px;
}
.power-calc-banner .pbar-track {
  height: 4px; border-radius: 99px;
  background: rgba(255,204,0,.2); margin-top: 10px;
}
.power-calc-banner .pbar-fill {
  height: 100%; border-radius: 99px;
  background: var(--c-yellow);
  transition: width .5s ease;
}

/* ── Einführungs-Tour (Coachmark: scharfer Cutout + verankertes Popover) ── */
.tour-restart-wrap { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.tour-restart-link {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .76rem; font-weight: 600; color: rgba(33,37,41,.62);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px;
}
.tour-restart-link i { color: var(--c-yellow); }
.tour-restart-link:hover { color: var(--c-dark); background: var(--c-yellow-tint); }

/* Cutout: scharfe, rechteckige Aussparung um das Ziel; Dim = box-shadow ringsum */
.tour-cut {
  position: fixed; z-index: 1200; pointer-events: none;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(15,18,22,.55);
  transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}
/* Kompaktes, am Ziel verankertes Popover */
.tour-pop {
  position: fixed; z-index: 1201; width: 340px; max-width: calc(100vw - 24px);
  background: #fff; border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.tour-pop-arrow {
  position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg);
}
.tour-pop--below .tour-pop-arrow { top: -7px; box-shadow: -3px -3px 6px rgba(0,0,0,.04); }
.tour-pop--above .tour-pop-arrow { bottom: -7px; box-shadow: 3px 3px 6px rgba(0,0,0,.04); }
.tour-pop-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(33,37,41,.42); margin-bottom: 7px;
}
.tour-pop-title { font-size: 1.02rem; font-weight: 800; color: var(--c-dark); line-height: 1.25; margin-bottom: 5px; }
.tour-pop-text { font-size: .85rem; color: rgba(33,37,41,.68); line-height: 1.45; margin-bottom: 15px; }
.tour-pop-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-end {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .82rem; font-weight: 600; color: rgba(33,37,41,.62); padding: 6px 4px;
}
.tour-end:hover { color: var(--c-dark); }
.tour-go {
  background: var(--c-yellow); border: none; color: var(--c-dark); font-weight: 700; font-size: .83rem;
  padding: 8px 15px; border-radius: 9px; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.tour-go:hover { filter: brightness(.96); }
/* Mobil: Popover als kompaktes Bottom-Sheet, Ziel bleibt oben hervorgehoben */
@media (max-width: 767px) {
  .tour-pop {
    position: fixed !important; left: 12px !important; right: 12px !important;
    top: auto !important; bottom: 14px !important; width: auto !important; max-width: none !important;
  }
  .tour-pop-arrow { display: none; }
}

/* ── Lade-Overlay ─────────────────────────────────────────────── */
.konfig-loading {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-cream);
}

/* ── Mobil-Redesign (≤767px) — Mockup-orientiert ──────────────────
   Ziel: Produkt sofort im Vordergrund. Dunkle Branding-Zeile + Dot-Stepper
   entfallen; ein kompakter Karten-Kopf (Kreis-Icon + „Schritt X von 9" + Titel)
   ersetzt die dreifach gestapelten Überschriften. Weniger Weißraum, größeres
   Produktbild. Der Schritt-Sprung weicht via scrollToStepper() auf die Karte aus. */
@media (max-width: 767px) {
  /* Platzfresser oben entfernen */
  .konfig-header { display: none; }
  .konfig-stepper { display: none; }
  .container.py-4 { padding-top: 6px !important; }
  .konfig-card { scroll-margin-top: 8px; }
  .col-12.col-lg-8.mb-4 { margin-bottom: 10px !important; }

  /* FLACH statt verschachtelt: die aeussere weisse Karte (weisser Grund + Schatten
     + Radius) entfaellt auf Mobil. Header-Text + Produktkarten liegen dann direkt
     auf dem Seiten-Hintergrund (cream); die weissen Produktkarten mit Rahmen
     "poppen" als eigenstaendige Karten statt weiss-auf-weiss verschachtelt. */
  #konfigurator-app .konfig-card,
  #konfigurator-app .konfig-card.card {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* Karten-Kopf im Mockup-Stil: Kreis-Icon links, Step-Label + Titel rechts.
     Transparent (kein weisser Kasten mehr, keine Trennlinie) -> sitzt auf cream. */
  .konfig-card-header {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 6px 4px 12px;
    background: transparent; border-bottom: none;
  }
  .konfig-card-header::before { display: none; } /* kein gelber Akzentbalken */
  .step-badge { display: none; }
  .ch-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--c-yellow-tint); color: var(--c-dark); font-size: 1.05rem;
  }
  .ch-text { min-width: 0; }
  .ch-step { display: block; font-size: .74rem; font-weight: 700; color: rgba(33,37,41,.5); margin-bottom: 2px; }
  .konfig-card-header h2 { font-size: 1.24rem; line-height: 1.18; margin-bottom: 3px; }
  .konfig-card-header p { font-size: .83rem; line-height: 1.4; margin-bottom: 0; }

  /* Body transparent -> Produktkarten liegen direkt auf dem Seiten-Hintergrund.
     Minimaler Innenabstand (der Screen-Rand kommt vom Container-Padding). */
  .konfig-card-body { padding: 4px 3px 16px; background: transparent; }

  /* Farb-Filter als sauberes 2-Spalten-Raster (statt ungleichem Umbruch) */
  .cfilter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .cfilter-grid .cat-btn {
    margin: 0; width: 100%; text-align: left;
    padding: 11px 14px; font-size: .85rem; border-radius: 12px;
  }
  .cfilter-grid .cat-btn:last-child:nth-child(odd) { grid-column: 1 / -1; } /* letzte, wenn allein: volle Breite */

  /* Volle Breite ausnutzen: seitliches Container-Padding reduzieren (war 22px) */
  #konfigurator-app .container { padding-left: 10px !important; padding-right: 10px !important; }

  /* Produktbild prominent, aber nicht dominant (war 300px -> fraß halbe Höhe) */
  .pcard-media, .profile-media { height: 214px; }
  .pcard-media img, .profile-media img { padding: 6px; }
  /* Icon-only-Karten (Abdeckung, Profil ohne Foto): kompakt statt Riesen-Leerfeld */
  .pcard-media--glyph { height: 94px; }
  .col.mb-3 { margin-bottom: 12px !important; }

  /* Kartentext dichter an den Rand + weniger Innen-Weißraum */
  .pcard-body { padding: 12px 14px 14px; }

  /* Footer: Hinweis eigene Zeile, darunter Zurück + Weiter (großes Tap-Ziel).
     Transparent (kein Grau-Balken, keine Trennlinie) -> Buttons sitzen auf cream. */
  .konfig-card-footer { flex-wrap: wrap; padding: 14px 4px 4px; row-gap: 10px; background: transparent; border-top: none; }
  .konfig-card-footer .footer-hint { order: -1; flex-basis: 100%; margin-left: 0; text-align: center; }
  .konfig-card-footer .btn-back { margin-left: 0; flex-shrink: 0; }
  .konfig-card-footer .footer-next,
  .konfig-card-footer .btn-back + .footer-next {
    margin-left: 0; flex: 1 1 auto; justify-content: center;
    white-space: nowrap; padding-left: 14px; padding-right: 14px;
  }

  /* Zusammenfassung: die 4-Spalten-Tabelle bricht auf 390px -> pro Position eine
     gestapelte Zeile (Komponente-Label oben, Artikel + Menge links, Preis rechts). */
  .conf-table, .conf-table tbody, .conf-table tfoot, .conf-table tr, .conf-table td { display: block; }
  .conf-table thead { display: none; }
  .conf-table tbody tr { position: relative; padding: 11px 14px; border-bottom: 1px solid var(--c-cream); }
  .conf-table tbody td { border: none !important; padding: 0 !important; }
  .conf-table tbody td:nth-child(1) { font-size: .63rem; letter-spacing: .06em; color: rgba(33,37,41,.5); margin-bottom: 2px; }
  .conf-table tbody td:nth-child(2) { font-weight: 600; font-size: .86rem; padding-right: 92px !important; }
  .conf-table tbody td:nth-child(3) { font-size: .76rem; color: rgba(33,37,41,.55); text-align: left !important; margin-top: 2px; }
  .conf-table tbody td:nth-child(4) { position: absolute; top: 11px; right: 14px; text-align: right !important; font-weight: 700; }
  .conf-table tfoot tr { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; }
  .conf-table tfoot td { text-align: left !important; }

  /* Sidebar kompakter (liegt am Seitenende, einklappbar) */
  .sidebar-hd { padding: 12px 14px; }
  .sidebar-row { padding: 10px 14px; }
}