/* Bark, Boney's */
/* ═══════════════════════════════════════════════════════════════
   Konfigurator im Cyberpunk-Design der restlichen Seite (Weiß/Rot auf Schwarz).
   Ergänzt style/cyber-fx.css für die statische Seite konfigurator.html und überschreibt deren Cyan-Akzente.
   Muss NACH dem Inline-<style> der Seite eingebunden werden.
   ═══════════════════════════════════════════════════════════════ */
:root { --kx-cut: 14px; }

/* ── Rahmen, Panels, Trennlinien: neutral statt Cyan ── */
html body .konfig-panel--left { border-right-color: rgb(var(--fx-ink) / .1); }
html body .konfig-panel--right { border-left-color: rgb(var(--fx-ink) / .1); }
html body .panel-header,
html body .panel-controls,
html body .dropdown-title { border-color: rgb(var(--fx-ink) / .08); }
html body .panel-label { color: rgb(var(--fx-red-soft)); opacity: .9; }
html body .part-list::-webkit-scrollbar-thumb,
html body .part-dropdown::-webkit-scrollbar-thumb { background-color: rgb(var(--fx-red) / .45); }
@media (max-width: 900px) {
  html body .konfig-panel--left, html body .konfig-panel--right { border-top-color: rgb(var(--fx-ink) / .1); }
}

/* ── Kacheln: abgeschrägte Ecken, rote Schrägkante, Lichtreflex ── */
html body :is(.start-opt, .comp-tab, .comp-scope, .design-option, .konfig-price, .part-btn) {
  border-radius: 0 18px 0 18px !important;
  clip-path: polygon(var(--kx-cut) 0, 100% 0, 100% calc(100% - var(--kx-cut)), calc(100% - var(--kx-cut)) 100%, 0 100%, 0 var(--kx-cut));
  border: 1px solid rgb(var(--fx-ink) / .16) !important;
  background-color: rgba(10, 14, 22, .92);
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(var(--fx-red)) calc(50% - 1px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(var(--fx-red)) calc(50% - 1px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(115deg, transparent 40%, rgb(var(--fx-ink) / .09) 50%, transparent 60%),
    var(--fx-grit),
    linear-gradient(180deg, rgb(var(--fx-ink) / .04), transparent 45%);
  background-size: var(--kx-cut) var(--kx-cut), var(--kx-cut) var(--kx-cut), 260% 100%, 220px 220px, 100% 100%;
  background-position: top left, bottom right, 130% 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  box-shadow: inset 0 0 24px rgb(var(--fx-red) / .05);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .3s, background-position 1s ease;
}
html body :is(.start-opt, .comp-tab, .comp-scope, .design-option, .part-btn):hover {
  transform: translateY(-3px);
  border-color: rgb(var(--fx-red) / .85) !important;
  background-position: top left, bottom right, -30% 0, 0 0, 0 0;
  box-shadow: inset 0 0 30px rgb(var(--fx-red) / .16), 0 10px 24px rgba(0, 0, 0, .55);
}
html body :is(.comp-tab.active, .design-option.active, .part-item.open .part-btn) {
  border-color: rgb(var(--fx-red) / .95) !important;
  background-color: rgb(var(--fx-red) / .14);
  box-shadow: inset 0 0 30px rgb(var(--fx-red) / .22), 0 0 18px rgb(var(--fx-red) / .25);
}
html body .comp-tab.active .comp-tab__name { color: #fff; }
html body :is(.comp-scope__change, .start-opt__price, .design-option__price, .part-surcharge, .color-price:not(.std)) { color: rgb(var(--fx-red-soft)); }
html body .konfig-price { border-radius: 0 16px 0 16px !important; }

/* ── Start-Dialog ── */
html body .konfig-start__card {
  border-radius: 4px 24px 4px 24px !important;
  border: 1px solid rgb(var(--fx-ink) / .18) !important;
  outline: 1px dashed rgb(var(--fx-red) / .32); outline-offset: -8px;
  background-color: rgba(8, 11, 18, .97);
  background-image: var(--fx-grit), linear-gradient(180deg, rgb(var(--fx-ink) / .04), transparent 40%);
  box-shadow: inset 0 0 40px rgb(var(--fx-red) / .06), 0 24px 60px rgba(0, 0, 0, .75);
}
html body .konfig-start__title { text-shadow: 0 0 18px rgb(var(--fx-red) / .35); }

/* ── Teile-Liste + Dropdown ── */
/* Teile rechts: gleiche Kacheln wie die Komponenten links */
html body .konfig-panel--right .part-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; }
@media (min-width: 901px) {
  html body .konfig-panel--right .part-list { padding-bottom: 8px; overflow-y: auto; }
}
html body .part-item { flex-shrink: 0; }
html body .part-btn {
  padding: 10px 14px; gap: 10px; color: var(--text-0);
  font-family: var(--font-body); font-weight: 600; font-size: .92rem; letter-spacing: 0; text-transform: none;
}
html body :is(.part-btn:hover, .part-item.open .part-btn) { color: #fff; }
html body .part-name { font-size: .92rem; }
html body .part-chevron { font-size: .7rem; opacity: .7; color: rgb(var(--fx-red-soft)); }
html body .part-surcharge { font-size: .8rem; }
html body .part-swatch { border-radius: 2px !important; width: 12px; height: 12px; }
html body .part-dropdown {
  border: 1px solid rgb(var(--fx-ink) / .18) !important;
  border-radius: 4px 20px 4px 20px !important;
  outline: 1px dashed rgb(var(--fx-red) / .3); outline-offset: -6px;
  background-color: rgba(6, 8, 14, .98);
  background-image: var(--fx-grit);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .75), inset 0 0 30px rgb(var(--fx-red) / .06) !important;
}
html body .dropdown-title { color: #fff; opacity: .9; font-family: var(--font-head); letter-spacing: 1.5px; }

/* Design-Abschnitt: Design-Name aufklappen -> Farbwahl */
html body .design-section { border-top: 1px solid rgb(var(--fx-ink) / .08); }
html body .design-section__head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px;
  background: rgb(var(--fx-red) / .08); border: 0 !important; border-bottom: 1px solid rgb(var(--fx-red) / .35) !important;
  border-radius: 0 !important; color: #fff; cursor: pointer; text-align: left; font-family: var(--font-body);
  transform: none !important; box-shadow: none !important;
}
html body .design-section__head:hover { background: rgb(var(--fx-red) / .16); }
html body .design-section__name { font-family: var(--font-head); font-weight: 900; font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase; }
html body .design-section__current { flex: 1; display: flex; align-items: center; gap: 6px; justify-content: flex-end; font-size: .7rem; color: var(--text-dim); min-width: 0; }
html body .design-section__current .color-swatch { width: 12px; height: 12px; }
html body .design-section__chev { font-size: .6rem; transition: transform .25s; color: rgb(var(--fx-red-soft)); }
html body .design-section.open .design-section__chev { transform: rotate(180deg); }
html body .design-section__body[hidden] { display: none; }
html body .design-section__body { animation: kxOpen .22s ease-out both; }
@keyframes kxOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

html body .color-group-label { background: rgb(var(--fx-red) / .06); color: rgb(var(--fx-red-soft)); }
html body .color-item { border-radius: 0 !important; transform: none !important; box-shadow: none !important; }
html body .color-item:hover { background: rgb(var(--fx-red) / .1); }
html body .color-item.active { background: rgb(var(--fx-red) / .16); color: #fff; box-shadow: inset 3px 0 0 rgb(var(--fx-red)) !important; }
html body .color-item.active::after { color: rgb(var(--fx-red-soft)); }
html body .color-swatch { border-radius: 3px !important; }
html body .konfig-target-btn { border-radius: 2px 8px 2px 8px !important; }
html body .konfig-target-btn:hover { border-color: rgb(var(--fx-red) / .6); color: #fff; }
html body .konfig-target-btn.active { border-color: rgb(var(--fx-red)); background: rgb(var(--fx-red) / .16); color: #fff; }
html body .konfig-asym-toggle input { accent-color: rgb(var(--fx-red)); }

/* ── Buttons: Schräge + Lichtkante wie auf der restlichen Seite ── */
html body :is(.konfig-cta, .konfig-cart, .konfig-save, .konfig-reset, .size-btn, .konfig-share__btn, .konfig-start__code-btn, .konfig-gate-btn) {
  border-radius: 0 12px 0 12px !important;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  border-color: rgb(var(--fx-ink) / .22);
}
html body :is(.konfig-cta, .konfig-gate-btn--primary) {
  background: linear-gradient(135deg, rgb(var(--fx-red)), rgb(170 0 0)) !important;
  border-color: rgb(var(--fx-red-soft)) !important; color: #fff !important;
  box-shadow: 0 0 18px rgb(var(--fx-red) / .35);
}
html body .konfig-cta:hover { box-shadow: inset 0 0 20px rgb(var(--fx-ink) / .25), 0 8px 24px rgb(var(--fx-red) / .45); }
html body :is(.konfig-cart, .konfig-save, .konfig-share__btn, .konfig-start__code-btn, .konfig-gate-btn):hover:not(:disabled) {
  border-color: rgb(var(--fx-red) / .85); background: rgb(var(--fx-red) / .14); color: #fff;
}
html body .konfig-reset { color: rgb(var(--fx-red-soft)); border-color: rgb(var(--fx-red) / .4); }
html body .size-btn:hover { border-color: rgb(var(--fx-red) / .7); color: #fff; }
html body .size-btn.active { background: rgb(var(--fx-red) / .22); border-color: rgb(var(--fx-red)); color: #fff; box-shadow: inset 0 0 14px rgb(var(--fx-red) / .3); }
html body .konfig-share__code { border-color: rgb(var(--fx-red) / .4); }

/* ── Eingaben (Code-Feld) ── */
html body .konfig-start__code-input { border-bottom: 2px solid rgb(var(--fx-red) / .85) !important; }

/* ── Bildfläche + Ansichtspunkte ── */
html body .image-stack {
  border: 0; outline: 0; box-shadow: none; border-radius: 0; background: transparent; overflow: visible;
  /* kein Rand: rundes Auslaufen in volle Transparenz, beginnend --kx-fade vom Rand */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 calc(100% - var(--kx-fade, 100px)), transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 calc(100% - var(--kx-fade, 100px)), transparent 100%);
}
html body .image-stack::before, html body .image-stack::after { display: none; }
/* Der frühere Ring-Glow (Lichtkranz) ist entfernt */
html body .konfig-glow { display: none; }

/* Mosaik anklickbar: Hover-/Aktiv-Glow, beim Antippen kurzes Wabern */
html body .image-stack { pointer-events: auto; }
html body .image-stack.is-over-part { cursor: pointer; }
html body .layer-img { transition: opacity .3s ease, filter .2s ease; }
html body .layer-img.is-hover,
html body .layer-img.is-active { filter: brightness(1.12) drop-shadow(0 0 5px rgb(var(--fx-red) / .95)); }
/* Glow auf dem Teil selbst: rote Überlagerung in Teile-Form (Maske per JS), pulsierend, ohne Schein nach außen */
html body .part-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: rgb(255 40 40); mix-blend-mode: hard-light; opacity: .5;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: kxGlowPulse 1.4s ease-in-out infinite;
}
@keyframes kxGlowPulse { 0%, 100% { opacity: .5; } 50% { opacity: .2; } }
html body .layer-img.is-wobble, html body .part-glow.is-wobble { animation: kxWobble .48s ease-in-out both; }
@keyframes kxWobble {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { html body :is(.layer-img.is-wobble, .part-glow, .part-glow.is-wobble) { animation: none; } }
/* Leerlauf-Showcase: sanftes Ein-/Ausblenden je Teil (kein Pulsieren), siehe scripts/konfigurator.js */
html body .idle-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: rgb(var(--fx-idle-glow)); mix-blend-mode: screen; opacity: 0;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: drop-shadow(0 0 8px rgb(var(--fx-idle-glow) / .85));
  transition: opacity .05s ease;
}
html body .idle-glow.is-visible { opacity: .8; }
/* Leerlauf-Atmosphäre (ab 30s Inaktivität): Hintergrund verblasst, Wolf-Logo blendet ein,
   das Mosaik "atmet" sanft auf und ab, siehe initIdleAmbience in scripts/konfigurator.js.
   Die Bild-URL des Wolf-Logos wird dort per JS inline gesetzt (relative Pfade in externen
   CSS-Dateien lösen sich sonst relativ zu style/ statt zum Dokument auf). */
html body .idle-wolf-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: auto 80%;
  opacity: 0;
}
html body .idle-wolf-bg--wide { inset: 10% 0; background-size: contain; }
/* Mosaik liegt als eigener Stapelkontext (z-index 1) immer vor dem Hintergrundmotiv (z-index 0) */
html body .idle-mosaic-wrap { position: absolute; inset: 0; z-index: 1; }
html body .idle-mosaic-wrap.idle-mosaic-breath { animation: kxIdleBreath 2s ease-in-out infinite; }
@keyframes kxIdleBreath {
  0%   { transform: translateY(-30px); }
  50%  { transform: translateY(30px); }
  100% { transform: translateY(-30px); }
}
@media (prefers-reduced-motion: reduce) { html body .idle-mosaic-wrap.idle-mosaic-breath { animation: none; } }
html body #fx-embers.fx-embers-frozen span { animation-play-state: paused !important; }
html body .view-dots .view-arrow { background: none; border: 0; padding: 0 4px; margin: 0; cursor: pointer; color: var(--text-dim); font-size: 1.3rem; line-height: 1; transition: color .2s, transform .2s; }
html body .view-dots .view-arrow:hover { color: rgb(var(--fx-red)); }
@media (max-width: 900px) { html body .view-dots .view-arrow { display: none; } }
html body .view-dots .dot { border-radius: 50% !important; clip-path: none !important; transform: none !important; box-shadow: none !important; }
html body .view-dots .dot.active { background: rgb(var(--fx-red)); border-color: rgb(var(--fx-red)); box-shadow: 0 0 10px rgb(var(--fx-red)) !important; }
html body .view-label { color: var(--text-dim); }

/* Buttons, die rund bleiben müssen */
html body :is(.konfig-start__close, .lang-btn, .search-btn, .cart-btn) { clip-path: none; }

/* -- restliche Cyan-Akzente -- */
html body :is(.konfig-cart, .konfig-save, .konfig-start__code-btn, .konfig-share__btn) { color: #fff; }
html body .konfig-auth-hint { color: var(--text-dim); }
/* Bestell-Sperre (nur VIP): Warenkorb/Bestellen sichtbar, aber ausgegraut mit Schloss; Hinweis darunter */
html body .is-order-locked { opacity: .5; filter: grayscale(.7); cursor: not-allowed; }
html body .is-order-locked::before { content: '\1F512\00a0'; }
html body .konfig-order-lock-hint { margin: 6px 0 0; font-size: .8rem; line-height: 1.4; color: rgb(var(--fx-red-soft)); }
html body .konfig-auth-hint a { color: rgb(var(--fx-red-soft)); }
html body .view-dots .dot:not(.active) { background: rgb(var(--fx-ink) / .22); border-color: rgb(var(--fx-ink) / .3); }
html body .konfig-lead-time { color: rgb(var(--fx-red-soft)); }

/* -- Bedienbereich unten rechts: ca. 30 % größer, besser lesbar -- */
@media (min-width: 901px) {
  html body .konfig-layout { grid-template-columns: clamp(250px, 26vw, 312px) 1fr clamp(250px, 26vw, 312px); }
  html body .panel-controls { padding: 10px; gap: 8px; }
  html body .panel-controls .size-label { font-size: .85rem; }
  html body .panel-controls .size-btn { font-size: .98rem; padding: 6px 8px; }
  html body .panel-controls .konfig-price { padding: 13px 15px; gap: 10px; }
  html body .panel-controls .price-label { font-size: .96rem; }
  html body .panel-controls .price-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  html body .panel-controls .price-item { min-width: 0; }
  html body .panel-controls .price-summary-row .price-item:last-child {
    grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline;
    padding-top: 8px; border-top: 1px dashed rgb(var(--fx-red) / .4);
  }
  html body .panel-controls .price-value { font-size: 1.3rem; }
  html body .panel-controls .price-value.total { font-size: 1.7rem; }
  html body .panel-controls .konfig-lead-time { font-size: .78rem; }
  html body .panel-controls :is(.konfig-reset, .konfig-save, .konfig-cart, .konfig-cta) { font-size: .93rem; padding: .5rem .6rem; }
  html body .panel-controls .konfig-auth-hint { font-size: .88rem; line-height: 1.35; }
  html body .panel-controls .konfig-share__btn { font-size: .8rem; white-space: nowrap; }
}

/* niedrige Bildschirme (z. B. 1280x720): etwas kompakter, damit die Teileliste nicht verdeckt wird */
@media (min-width: 901px) and (max-height: 740px) {
  html body .panel-controls { padding: 8px; gap: 6px; }
  html body .panel-controls .konfig-price { padding: 9px 13px; gap: 6px; }
  html body .panel-controls .price-value { font-size: 1.15rem; }
  html body .panel-controls .price-value.total { font-size: 1.45rem; }
  html body .panel-controls :is(.konfig-reset, .konfig-save, .konfig-cart, .konfig-cta) { padding: .35rem .5rem; }
  html body .panel-controls .konfig-share { margin-top: 4px; }
  html body .panel-controls .konfig-share__btn { padding: .35rem; }
}

/* niedrigere Bildschirme: Teile-Kacheln kompakter, damit die Liste ohne Scrollen passt */
@media (min-width: 901px) and (max-height: 800px) {
  html body .konfig-panel--right .part-list { gap: 3px; padding-top: 6px; }
  html body .part-btn { padding: 4px 12px; }
  html body .part-name { font-size: .86rem; }
}


/* Mosaik 150 % größer (Skalierung um die Mitte, Layout-Platz bleibt gleich); Rand-Ausblendung bleibt optisch 100 px */
@media (min-width: 901px) {
  html body .image-stack {
    --kx-fade: 66.67px;
    width: min(66%, calc((100dvh - 250px) * 1366 / 1785));
    max-height: none;
    margin: 0;
    transform: scale(1.5);
    transform-origin: 50% 50%;
  }
  /* Mosaik mittig im Mittelbereich, Ansichtspunkte direkt darunter (Platzhalter oben = Höhe von Punkten + Label) */
  html body .konfig-viewer { justify-content: center; }
  html body .konfig-viewer::before { content: ""; flex: 0 0 32px; }
}
html body :is(.view-dots, .view-label) { position: relative; z-index: 5; }

/* Handy: Popup als fixes, leicht transparentes Fenster am unteren Rand (Fenster ca. 30 % sichtbar, Schrift und Farben voll deckend). Die Seite scrollt nicht, der Inhalt kann scrollen. */
@media (max-width: 900px) {
  html body .part-item.open .part-dropdown {
    position: fixed !important; left: 8px; right: 8px; top: auto !important; width: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    max-height: min(52dvh, 460px); overflow-y: auto; z-index: 9999;
    background: rgba(6, 8, 14, .3) !important; background-image: none !important;
    backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgb(var(--fx-ink) / .22) !important; border-radius: 4px 20px 4px 20px !important;
    outline: 1px dashed rgb(var(--fx-red) / .3); outline-offset: -6px; box-shadow: none !important;
    animation: kxSheetIn .22s ease-out both;
  }
  html body .part-item.open .part-dropdown * { text-shadow: 0 1px 4px rgba(0, 0, 0, .95); }
}
@keyframes kxSheetIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Handy: Mosaik 30 % groesser (Skalierung um die Mitte, Platz wird oben/unten reserviert; Ausblendung bleibt optisch 100 px) */
@media (max-width: 900px) {
  html body .image-stack { --kx-fade: 77px; transform: scale(1.3); transform-origin: 50% 50%; margin: 19.6% 0; }
  html body .konfig-viewer { overflow-x: clip; }
}

/* Handy: Start-Auswahl passt auf kleine Displays (scrollbar, nicht oben abgeschnitten, unter der Kopfzeile) */
@media (max-width: 700px) {
  html body .konfig-start { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 72px 10px 16px; }
  html body .konfig-start__card { margin: auto; width: 100%; padding: 22px 14px 16px; }
  html body .konfig-start__title { font-size: 1.15rem; padding-right: 38px; }
  html body .konfig-start__sub { margin-bottom: 14px; font-size: .82rem; }
  html body .konfig-start__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body .start-opt { padding: 12px 12px 12px; gap: 2px; min-width: 0; }
  html body .start-opt__icon { font-size: 1.25rem; }
  html body .start-opt__name { font-size: .95rem; }
  html body .start-opt__desc { font-size: .74rem; line-height: 1.3; }
  html body .start-opt__price { margin-top: 4px; font-size: .8rem; }
  html body .konfig-start__code { margin-top: 14px; padding-top: 12px; }
}

/* Handy: untere Preis-/Aktionsleiste ist hinter der offenen Start-Auswahl ausgeblendet (sonst verdeckt sie das Code-Feld) */
@media (max-width: 900px) {
  html body:has(#konfigStart:not([hidden])) .sticky-price { display: none !important; }
}
@supports not selector(:has(*)) {
  @media (max-width: 700px) { html body .konfig-start { padding-bottom: 140px; } }
}