/* Bark, Boney's */
/* ═══════════════════════════════════════════════════════════════
   Cyberpunk-Effekte (aus dem Demo-Design übernommen) — Xbreed-Farben bleiben (Weiß/Rot auf Schwarz).
   Form + Effekte von Karten, Buttons und Eingabefeldern, aufsteigende Partikel, Wolf im Hintergrund,
   Einblenden beim Scrollen, Ladebalken/Spinner, Seitenübergang. Gesteuert von CyberFxService.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --fx-red: 255 0 0;
  --fx-red-soft: 255 96 96;
  --fx-ink: 255 255 255;
  --fx-idle-glow: 0 229 255; /* Leerlauf-Showcase im Konfigurator (siehe style/konfig-fx.css) */
  --fx-grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.08'/%3E%3C/svg%3E");
  --fx-wolf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66.7 64.6'%3E%3Cpath fill='%23ffffff' fill-opacity='.035' d='M61.1,39.2l2.7-9l-7.3,3.1c-0.4-0.9-0.9-2-1.3-2.9c1.8-2.9,2.8-7.3,3.1-13.3c0.3-5-0.1-9.7-0.2-10.8L57.2,0l-4.8,7.5l-0.6-2L40.7,18.6L39,18.3l-5.6,0l-5.6,0l-1.7,0.3L14.8,5.5l-0.6,2L9.5,0L8.6,6.3c-0.1,1.1-0.5,5.7-0.2,10.8c0.3,6,1.4,10.4,3.1,13.3c-0.4,0.9-0.9,2-1.3,2.9l-7.3-3.1l2.7,9L0,38.8l18.8,21.1l0.8-2.9l5.9,6.2l3.2,1.4h9.5l3.2-1.4l5.9-6.2l0.8,2.9l18.8-21.1L61.1,39.2zM55.4,44.4l-5.2,5.8l-0.7-2.6l-11,11.7l-1.4,0.6l-0.8,0l4.3-5.5l-3.9-3.1H30l-3.9,3.1l4.3,5.5l-0.8,0l-1.4-0.6l-11-11.7l-0.7,2.6l-5.2-5.8l0.8,0.1l-1.8-5.9l2.2,0.9l1-2.1c0.1-0.2,2-4.3,2.8-6.3l0.6-1.4l-1-1.1c-2.2-2.6-2.9-9-3-14.2l2.9,4.6l1-3.7l7.2,8.4l3.9-0.6l5.2,0l5.2,0l3.9,0.6l7.2-8.4l1,3.7l2.9-4.6c-0.1,5.2-0.8,11.6-3,14.2l-1,1.1l0.6,1.4c0.9,2,2.7,6.1,2.8,6.3l1,2.1l2.2-0.9l-1.8,5.9L55.4,44.4zM33.4,59.2l-3.6-4.6l1.3-1.1h4.5l1.3,1.1L33.4,59.2z'/%3E%3Cpolygon fill='%23ff1744' fill-opacity='.13' points='23.2,34.3 20.1,31.2 16.9,34.4 20.5,37.9 16.9,41.5 20.1,44.7 23.2,41.6 '/%3E%3Cpolygon fill='%23ff1744' fill-opacity='.13' points='30.4,34.4 27.2,31.2 24.1,34.3 24.1,41.6 27.2,44.7 30.4,41.5 26.8,37.9 '/%3E%3Cpolygon fill='%23ff1744' fill-opacity='.13' points='42.9,34.3 39.8,31.2 36.6,34.4 40.2,37.9 36.6,41.5 39.8,44.7 42.9,41.6 '/%3E%3Cpolygon fill='%23ff1744' fill-opacity='.13' points='50.1,34.4 46.9,31.2 43.8,34.3 43.8,41.6 46.9,44.7 50.1,41.5 46.5,37.9 '/%3E%3C/svg%3E");
  --fx-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 8 378 352'%3E%3Cdefs%3E%3Cfilter id='cl' filterUnits='userSpaceOnUse' x='0' y='0' width='420' height='382'%3E%3CfeMorphology operator='dilate' radius='18'/%3E%3CfeMorphology operator='erode' radius='5'/%3E%3C/filter%3E%3Cfilter id='rm' filterUnits='userSpaceOnUse' x='0' y='0' width='420' height='382'%3E%3CfeMorphology operator='dilate' radius='21'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='%23ffffff' filter='url(%23rm)'%3E%3Cpath d='M236 29 L252 31 L298 77 L298 124 L270 153 L263 155 L243 155 L216 130 L214 50 Z'/%3E%3Cpath d='M156 31 L170 32 L186 50 L187 128 L162 156 L151 157 L134 156 L105 130 L104 80 L150 33 Z'/%3E%3Cpath d='M325 126 L350 126 L367 145 L367 200 L331 233 L306 233 L288 216 L286 164 Z'/%3E%3Cpath d='M71 131 L87 135 L117 167 L117 219 L102 236 L86 240 L75 240 L37 205 L37 151 L54 134 Z'/%3E%3Cpath d='M209 155 L224 156 L262 194 L267 225 L314 269 L317 304 L286 338 L237 340 L220 329 L198 329 L185 330 L172 340 L121 341 L89 310 L89 276 L136 228 L140 221 L141 198 L178 160 Z'/%3E%3C/g%3E%3Cg fill='%2305070a' filter='url(%23cl)'%3E%3Cpath d='M236 29 L252 31 L298 77 L298 124 L270 153 L263 155 L243 155 L216 130 L214 50 Z'/%3E%3Cpath d='M156 31 L170 32 L186 50 L187 128 L162 156 L151 157 L134 156 L105 130 L104 80 L150 33 Z'/%3E%3Cpath d='M325 126 L350 126 L367 145 L367 200 L331 233 L306 233 L288 216 L286 164 Z'/%3E%3Cpath d='M71 131 L87 135 L117 167 L117 219 L102 236 L86 240 L75 240 L37 205 L37 151 L54 134 Z'/%3E%3Cpath d='M209 155 L224 156 L262 194 L267 225 L314 269 L317 304 L286 338 L237 340 L220 329 L198 329 L185 330 L172 340 L121 341 L89 310 L89 276 L136 228 L140 221 L141 198 L178 160 Z'/%3E%3C/g%3E%3Cg fill='%2339ff14'%3E%3Cpath d='M236 29 L252 31 L298 77 L298 124 L270 153 L263 155 L243 155 L216 130 L214 50 Z'/%3E%3Cpath d='M156 31 L170 32 L186 50 L187 128 L162 156 L151 157 L134 156 L105 130 L104 80 L150 33 Z'/%3E%3Cpath d='M325 126 L350 126 L367 145 L367 200 L331 233 L306 233 L288 216 L286 164 Z'/%3E%3Cpath d='M71 131 L87 135 L117 167 L117 219 L102 236 L86 240 L75 240 L37 205 L37 151 L54 134 Z'/%3E%3Cpath d='M209 155 L224 156 L262 194 L267 225 L314 269 L317 304 L286 338 L237 340 L220 329 L198 329 L185 330 L172 340 L121 341 L89 310 L89 276 L136 228 L140 221 L141 198 L178 160 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Hintergrund: Wolf als blasse Schablone + aufsteigende Partikel ── */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: var(--fx-wolf) right 3vw bottom 9vh / min(22vw, 280px) auto no-repeat;
}
#fx-embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#fx-embers span {
  position: absolute; bottom: -50px; left: var(--x); width: calc(var(--s) * .16); height: calc(var(--s) * .16); border-radius: 50%;
  background: rgb(var(--fx-red-soft)); box-shadow: 0 0 8px 2px rgb(var(--fx-red) / .75);
  animation: fxRise var(--t) linear var(--d) infinite;
}
#fx-embers span:nth-child(3n) { background: rgb(var(--fx-ink)); box-shadow: 0 0 8px 2px rgb(var(--fx-ink) / .5); }
@keyframes fxRise {
  0% { transform: translate(0, 0); opacity: 0; }
  14% { opacity: .75; }
  100% { transform: translate(var(--sw), -115vh); opacity: 0; }
}

/* ── Karten: spitze und runde Ecken, Kontrastnaht, Lichtreflex ── */
:is(.glass, .prod-card, .tile, .hub-tile, .stat, .modal, .card, [class*="-card"]:not([class*="card-"])) {
  border-radius: 4px 22px 4px 22px !important;
  border: 1px solid rgb(var(--fx-ink) / .16) !important;
  outline: 1px dashed rgb(var(--fx-red) / .32); outline-offset: -7px;
  box-shadow: inset 0 0 28px rgb(var(--fx-red) / .05), 0 14px 30px rgba(0, 0, 0, .6) !important;
  background-image:
    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: 260% 100%, 220px 220px, 100% 100%;
  background-position: 130% 0, 0 0, 0 0; background-repeat: no-repeat, repeat, no-repeat;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .25s, outline-color .25s, background-position 1s ease;
}
/* Kacheln mit abgeschrägten Ecken (oben links / unten rechts) */
:is(.prod-card, .tile, .hub-tile, .stat):is(.prod-card, .tile, .hub-tile, .stat):is(.prod-card, .tile, .hub-tile, .stat) {
  border-radius: 0 22px 0 22px !important;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  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: 18px 18px, 18px 18px, 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;
}
:is(.prod-card, .tile, .hub-tile, .card):hover {
  transform: translateY(-4px); border-color: rgb(var(--fx-red) / .85) !important; outline-color: rgb(var(--fx-red-soft) / .7);
  box-shadow: inset 0 0 34px rgb(var(--fx-red) / .16), 0 14px 30px rgba(0, 0, 0, .6) !important;
}
:is(.prod-card, .tile, .hub-tile, .stat):is(.prod-card, .tile, .hub-tile, .stat):is(.prod-card, .tile, .hub-tile, .stat):hover { background-position: top left, bottom right, -30% 0, 0 0, 0 0; }
.card:hover { background-position: -30% 0, 0 0, 0 0; }
.prod-card { outline: none; }
.prod-card::before { display: none; }
.prod-card::after {
  content: ""; position: absolute; inset: 7px; z-index: 6; pointer-events: none; border-radius: 0 16px 0 16px;
  border: 1px dashed rgb(var(--fx-red) / .35); transition: border-color .25s;
}
.prod-card:hover::after { border-color: rgb(var(--fx-red) / .85); }
.prod-card .badge-price { border-radius: 0 10px 0 10px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

/* ── Buttons: Rundung + Schräge, Lichtkante, heben sich beim Hover ── */
:is(button, .btn, .xb-cta, .chip, .tab, a.btn, [class*="btn-"]):not(.burger):not([class*="close"]) {
  border-radius: 3px 12px 3px 12px !important;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .3s, color .3s, border-color .25s;
}
:is(.btn, .xb-cta, .btn-primary, .primary, .chip, .tab):not(.burger):not([class*="close"]) {
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  border-radius: 0 12px 0 12px !important;
}
:is(button, .btn, .xb-cta, .chip, .tab, a.btn, [class*="btn-"]):not(.burger):not([class*="close"]):focus-visible { outline: 2px solid rgb(var(--fx-red-soft)); outline-offset: 2px; }
:is(button, .btn, .xb-cta, .chip, .tab):not(.burger):not([class*="close"]):hover { transform: translateY(-2px); box-shadow: inset 0 0 20px rgb(var(--fx-red) / .3), 0 8px 20px rgb(var(--fx-red) / .22); }
:is(button, .btn, .xb-cta, .chip, .tab):not(.burger):not([class*="close"]):active { transform: translateY(1px) scale(.98); }

/* ── Eingabefelder ── */
:is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]) {
  border-radius: 3px 12px 3px 12px !important;
  border-bottom: 2px solid rgb(var(--fx-red) / .8) !important;
  transition: box-shadow .25s, border-color .25s;
}
:is(input, textarea, select):focus { border-color: rgb(var(--fx-red)) !important; box-shadow: 0 0 0 2px rgb(var(--fx-red) / .22), 0 0 22px rgb(var(--fx-red) / .3) !important; outline: none; }

/* ── Einblenden beim Scrollen ── */
[data-rv]:not(.rv-in) { opacity: 0; transform: translateY(26px) skewX(-3deg); filter: blur(3px) brightness(1.6); }
[data-rv] { transition: opacity .5s ease var(--rv-d, 0s), transform .6s cubic-bezier(.2, .8, .2, 1) var(--rv-d, 0s), filter .5s ease var(--rv-d, 0s), box-shadow .3s, border-color .25s, outline-color .25s, background-position 1s ease; }

/* ── Seitenwechsel: Glitch-Einblendung ── */
router-outlet + * { display: block; }
html.route-in router-outlet + * { animation: fxRoute .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fxRoute {
  0% { opacity: 0; transform: translateX(-26px) skewX(-5deg); filter: brightness(2) blur(3px); }
  35% { opacity: .7; transform: translateX(8px) skewX(2deg); filter: brightness(1.4) drop-shadow(3px 0 0 rgb(255 0 110 / .6)) drop-shadow(-3px 0 0 rgb(0 240 255 / .6)); }
  60% { opacity: 1; transform: translateX(-3px); filter: none; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Startseite: schlichtes Einblenden von Schwarz statt Glitch-Übergang */
html.route-in router-outlet + app-home { animation: fxFadeFromBlack 1s ease-out both; }
@keyframes fxFadeFromBlack {
  0% { opacity: 0; filter: brightness(0); }
  100% { opacity: 1; filter: none; }
}

/* ── Ladevorgänge: Neon-Linie mit Leuchtkopf, Ring-Spinner ── */
#fx-progress { position: fixed; left: 0; top: 0; right: 0; z-index: 10000; height: 3px; pointer-events: none; opacity: 0; transition: opacity .35s .15s; }
#fx-progress i { display: block; height: 100%; width: 0; position: relative; transition: width .35s ease-out;
  background: linear-gradient(90deg, rgb(150 0 0), rgb(var(--fx-red)) 60%, rgb(var(--fx-ink)));
  box-shadow: 0 0 12px rgb(var(--fx-red)), 0 0 28px rgb(var(--fx-red) / .5); }
#fx-progress i::after { content: ""; position: absolute; right: -4px; top: -5px; width: 14px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, rgb(var(--fx-red-soft)) 45%, transparent 70%); filter: blur(.5px); }
#fx-progress.is-loading { opacity: 1; transition: none; }
#fx-progress.is-loading i { width: 82%; transition: width 6s cubic-bezier(.1, .7, .2, 1); }
#fx-progress.is-done { opacity: 1; }
#fx-progress.is-done i { width: 100%; transition: width .25s ease-out; }
:is(.spinner, .spinner-lg, .loader, [class*="spinner"]) {
  border: none !important; border-radius: 50% !important; background: conic-gradient(from 0deg, transparent 0 22%, rgb(var(--fx-red)) 100%) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  box-shadow: none; filter: drop-shadow(0 0 6px rgb(var(--fx-red))); animation: fxSpin .9s linear infinite !important;
}
@keyframes fxSpin { to { transform: rotate(360deg); } }
.loading-bar { background: rgb(var(--fx-red) / .12); border-radius: 0 8px 0 8px; border: 0; }
.loading-bar-inner { background: linear-gradient(90deg, rgb(150 0 0), rgb(var(--fx-red-soft))) !important; border-radius: 0 8px 0 8px; box-shadow: 0 0 12px rgb(var(--fx-red)); }

/* ── Easter Egg: bei jedem 20. Klick stempelt eine weiß/neongrüne Pfote (CyberFxService, konfig-fx.js) ── */
.fx-paw {
  position: fixed; z-index: 10001; width: 52px; height: 49px; pointer-events: none; background: var(--fx-paw) center / contain no-repeat;
  filter: drop-shadow(0 0 9px rgb(57 255 20 / .75)); animation: fxStamp 2s ease-out forwards;
}
@keyframes fxStamp {
  0% { transform: translate(-50%, -50%) rotate(var(--r)) scale(1.35); opacity: 0; }
  15% { transform: translate(-50%, -50%) rotate(var(--r)) scale(1); opacity: .95; }
  60% { opacity: .75; }
  100% { transform: translate(-50%, -46%) rotate(var(--r)) scale(1); opacity: 0; }
}

/* ── Bewegung reduzieren ── */
@media (prefers-reduced-motion: reduce) {
  #fx-embers { display: none; }
  [data-rv] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  html.route-in router-outlet + * { animation: none !important; }
}