:root{
  color-scheme:dark;
  --bg:#050505;
  --fg:#f3f3f1;
  --muted:#a8a8a8;
  --gold:#d4a017;
  --accent:#d4a017;
  --stroke:#1b1b1b;
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,Arial,sans-serif;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}

/* ===== NAV V2 (JazzMaxx Gold / Sticky) ===== */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:1rem 3rem;
  background-color:rgba(5,5,5,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #222;
  position:sticky;
  top:0;
  z-index:1000;
  font-family:'Oswald', Inter, system-ui, Arial, sans-serif;
  text-transform:uppercase;
}

/* Logo Bereich */
.nav .brand{
  display:flex;
  align-items:center;
  gap:15px;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:2px;
  transition:opacity .3s;
}
.nav .brand:hover{ opacity:.8; }

/* Navigation-Links */
.nav a:not(.brand){
  color:#888;
  text-decoration:none;
  margin-left:2rem;
  font-size:1rem;
  font-weight:400;
  letter-spacing:1px;
  transition:all .3s ease;
  position:relative;
}

/* Shop-Link spezielles Styling */
.nav a[href*="shop.jazzmaxx.com"]{
  color:#d4a017 !important;
  font-weight:600 !important;
  padding:0.4rem 1rem;
  border:1px solid rgba(212,160,23,0.3);
  border-radius:4px;
  background:rgba(212,160,23,0.05);
}
.nav a[href*="shop.jazzmaxx.com"]:hover{
  background:rgba(212,160,23,0.15);
  border-color:#d4a017;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(212,160,23,0.2);
}

/* Hover & aktiv */
.nav a:not(.brand):hover,
.nav a[aria-current="true"]{
  color:var(--gold);
  text-shadow:0 0 20px rgba(212,160,23,0.4);
}

/* Goldener Unterstrich */
.nav a:not(.brand)::after{
  content:'';
  position:absolute;
  width:0;
  height:2px;
  bottom:-5px;
  left:0;
  background-color:var(--gold);
  transition:width .3s ease;
}
.nav a:not(.brand):hover::after,
.nav a[aria-current="true"]::after{
  width:100%;
}

/* Mobile */
@media (max-width: 900px){
  .nav{
    flex-direction:column;
    padding:1rem;
    gap:1rem;
  }
  .nav a:not(.brand){
    margin:0 0.5rem;
    font-size:0.9rem;
  }
  .nav a[href*="shop.jazzmaxx.com"]{
    margin-top:0.5rem;
    display:inline-block;
  }
}
/* ===== /NAV V2 ===== */

footer{
  border-top:1px solid var(--stroke);
  margin-top:40px;
  padding:20px;
  font-size:.85rem;
  color:var(--muted);
}
footer .foot-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  align-items:center;
  justify-content:space-between;
}
footer a{text-decoration:underline;}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
section[id]{scroll-margin-top:104px;}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}.hero-logo-img,.main-claim,.sub-claim,.hero-buttons,.scroll-cue,.hero-anim,.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1 !important;transform:none !important;}}

/* ===== PHOTO FRAME V1 (images) ===== */
/* Einheitlicher Rahmen für Produktfotos/Galerien – ohne Nav/Logo zu verändern */
.thumbs-grid figure{
  border-radius:16px;
  overflow:hidden;
}
.thumbs-grid img{
  display:block;
  width:100%;
  height:auto;
  border-radius:inherit;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.thumbs-grid figure:hover img{
  transform:scale(1.02);
}

/* Showcase Tiles (Startseite) */
a.tile{
  overflow:hidden;
}
a.tile > img{
  display:block;
  width:100%;
  height:auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
a.tile:hover > img{
  transform:scale(1.02);
}
/* ===== /PHOTO FRAME V1 ===== */

/* ===== PREMIUM POLISH V2 (global) ===== */
:root{
  --max:1200px;
  --pad:20px;

  --r-1:16px;
  --r-2:22px;

  --shadow-1:0 10px 30px rgba(0,0,0,.55);
  --shadow-2:0 16px 46px rgba(0,0,0,.65);

  --ease:cubic-bezier(.2,.8,.2,1);
}

html{
  scroll-behavior:smooth;
  text-size-adjust:100%;
}

body{
  line-height:1.55;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Subtiles Premium-Layer (ohne Layout-Änderung) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(212,160,23,.10), transparent 60%),
    radial-gradient(700px 500px at 85% 20%, rgba(212,160,23,.07), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%);
  opacity:.95;
}

/* Einheitliche Übergänge */
a, button{
  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease),
    border-color .22s var(--ease),
    background .22s var(--ease),
    color .22s var(--ease),
    opacity .22s var(--ease);
}

/* Fokus: klar und ruhig */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(212,160,23,.18);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}
/* ===== /PREMIUM POLISH V2 ===== */

/* ===== TYPO V1 ===== */
h1, h2, h3{
  letter-spacing:.02em;
}

h1{
  font-size:clamp(28px, 4.2vw, 46px);
  line-height:1.1;
}

h2{
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.2;
}

p{
  line-height:1.6;
}

/* Ruhigere Lesebreite wo möglich */
main p, .hero p, .copy p{
  max-width:72ch;
}

/* Links: nicht “schreiend”, aber klar */
a{
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
a:hover{
  color:var(--accent);
}
/* ===== /TYPO V1 ===== */

/* ===== MICRO DETAILS V1 ===== */
::selection{
  background:rgba(212,160,23,.22);
}

hr{
  border:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin:24px 0;
}

/* Karten/Container: falls vorhanden */
.tile, .panel, .product-card, .dealer-card, .card, figure{
  border-radius:var(--r-2);
}

/* Kleine Hover-Anhebung für “teurer” */
.tile:hover, .panel:hover, .product-card:hover, .dealer-card:hover, .card:hover, figure:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2);
}

/* Footer: sauberer Abschluss (falls Klassen existieren) */
.foot-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:26px var(--pad);
}
.foot-inner small{
  color:var(--muted);
}
/* ===== /MICRO DETAILS V1 ===== */

/* ===== LIGHTBOX V1 ===== */
body.jm-lightbox-open{
  overflow:hidden;
}

.jm-lightbox{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(6px);
}

.jm-lightbox[aria-hidden="false"]{
  display:grid;
  place-items:center;
}

.jm-lightbox__inner{
  width:min(1100px, 92vw);
  max-height:86vh;
  position:relative;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.72);
  background:rgba(10,10,10,.65);
}

.jm-lightbox__img{
  display:block;
  width:100%;
  height:auto;
  max-height:86vh;
  object-fit:contain;
  background:#000;
}

.jm-lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.55);
  color:var(--fg);
  cursor:pointer;
}
.jm-lightbox__close:hover{
  border-color:rgba(212,160,23,.55);
  transform:translateY(-1px);
}
/* ===== /LIGHTBOX V1 ===== */

/* ===== FOOTER LEGAL LINKS ===== */
.footer-legal{
  margin-top:14px;
  font-size:14px;
  opacity:.85;
}
.footer-legal a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.footer-legal a:hover{
  border-bottom-color:rgba(212,160,23,.55);
  opacity:1;
}
/* ===== /FOOTER LEGAL LINKS ===== */

/* ===== BREADCRUMBS ===== */
.breadcrumbs{
  padding:1rem 3rem;
  background:#0a0a0a;
  border-bottom:1px solid #222;
  font-size:0.85rem;
  color:#888;
}
.breadcrumbs ol{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.5rem;
  max-width:1200px;
  margin:0 auto;
}
.breadcrumbs li{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.breadcrumbs li:not(:last-child)::after{
  content:"/";
  color:#555;
  margin-left:0.5rem;
}
.breadcrumbs a{
  color:#888;
  text-decoration:none;
  transition:color 0.2s;
}
.breadcrumbs a:hover{
  color:#d4a017;
}
.breadcrumbs [aria-current="page"]{
  color:#d4a017;
  font-weight:600;
}
@media (max-width: 900px){
  .breadcrumbs{
    padding:1rem;
    font-size:0.8rem;
  }
}
/* ===== /BREADCRUMBS ===== */

/* ===== HOMEPAGE SHOP-SPOTLIGHTS (ERP Bild 1–3 + Preis) ===== */
.jm-home-spotlights{
  border-top:1px solid #222;
  background:linear-gradient(180deg,#000 0%,#060606 100%);
}
.jm-spotlights-wrap{
  background:linear-gradient(180deg,#000 0%,#060606 100%);
}
.jm-spotlights-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
  margin:0 auto;
  padding:1.5rem 1.5rem 2.5rem;
  max-width:1440px;
}
.jm-spotlights-section-title{
  grid-column:1/-1;
  margin:0;
  padding:2.5rem 0 1rem;
  font-family:Oswald,system-ui,sans-serif;
  font-size:clamp(1.15rem,2.5vw,1.4rem);
  font-weight:600;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#777;
  border-top:1px solid rgba(212,160,23,0.12);
  display:flex;
  align-items:center;
  gap:1rem;
}
.jm-spotlights-section-title::before{
  content:'';
  width:3px;
  height:1.1em;
  background:linear-gradient(180deg,#d4a017,transparent);
  flex-shrink:0;
  border-radius:2px;
}
.jm-spotlights-grid > .jm-spotlights-section-title:first-child{
  border-top:none;
  padding-top:1.5rem;
}

/* --- Card Base --- */
.jm-spotlight.jm-spotlight--card{
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  background:linear-gradient(180deg,#0e0e0e 0%,#0a0a0a 100%);
  display:flex;
  flex-direction:column;
  min-height:0;
  height:100%;
  overflow:hidden;
  position:relative;
  transition:
    transform 0.4s cubic-bezier(0.16,1,0.3,1),
    border-color 0.4s ease,
    box-shadow 0.4s cubic-bezier(0.16,1,0.3,1);
}
.jm-spotlight.jm-spotlight--card:hover{
  transform:translateY(-6px);
  border-color:rgba(212,160,23,0.5);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    0 0 40px rgba(212,160,23,0.08),
    inset 0 1px 0 rgba(212,160,23,0.1);
}

/* --- Image Area --- */
.jm-spotlight-visual{
  flex-shrink:0;
  background:#141414;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:relative;
  overflow:hidden;
}
.jm-spotlight-visual::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:60px;
  background:linear-gradient(to top,#0e0e0e,transparent);
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity 0.4s ease;
}
.jm-spotlight--card:hover .jm-spotlight-visual::after{
  opacity:0.5;
}
.jm-spotlight-mainwrap{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.25rem 1.25rem 1rem;
  background:#fff;
  position:relative;
}
.jm-spotlight--card .jm-spotlight-main{
  position:static;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  opacity:1;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,0.15));
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1), filter 0.5s ease;
}
.jm-spotlight--card:hover .jm-spotlight-main{
  transform:scale(1.05);
  filter:drop-shadow(0 12px 30px rgba(0,0,0,0.25));
}

/* --- Badge --- */
.jm-spotlight-badge{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.3rem 0.7rem;
  margin-bottom:0.25rem;
  background:rgba(212,160,23,0.08);
  border:1px solid rgba(212,160,23,0.2);
  border-radius:4px;
  width:fit-content;
  max-width:100%;
}
.jm-spotlight-badge-icon{
  font-size:0.8rem;
  line-height:1;
  color:#d4a017;
}
.jm-spotlight-badge-text{
  font-family:Oswald,system-ui,sans-serif;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#d4a017;
}

/* --- Body --- */
.jm-spotlight-body{
  padding:1.15rem 1.25rem 1.35rem;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  flex:1;
  min-height:0;
}
.jm-spotlight-body-push{
  flex:1;
  min-height:0.5rem;
}
.jm-spotlight-price-row{
  margin-top:auto;
  padding-top:0.5rem;
}

/* --- Typography --- */
.jm-spotlight-kicker{
  font-family:Oswald,system-ui,sans-serif;
  color:rgba(212,160,23,0.7);
  font-weight:500;
  font-size:0.7rem;
  letter-spacing:3px;
  text-transform:uppercase;
  margin:0;
}
.jm-spotlight-heading{
  font-family:Oswald,system-ui,sans-serif;
  color:#fff;
  font-size:clamp(1.2rem,2.8vw,1.5rem);
  margin:0;
  text-transform:uppercase;
  letter-spacing:2px;
  line-height:1.15;
  transition:color 0.3s ease;
}
.jm-spotlight--card:hover .jm-spotlight-heading{
  color:#d4a017;
}
.jm-spotlight-desc{
  margin:0;
  font-size:0.88rem;
  line-height:1.55;
  color:#999;
}
.jm-spotlight-note{
  margin:0;
  font-size:0.8rem;
  line-height:1.45;
  color:#777;
}
.jm-spotlight-body .jm-spotlight-pname{
  margin:0;
  font-size:0.78rem;
  color:#666;
  line-height:1.4;
}
.jm-spotlight-sub{
  margin:0;
  font-size:0.8rem;
  color:#666;
  line-height:1.45;
}

/* --- Price --- */
.jm-spotlight-body .jm-spotlight-price{
  font-family:Oswald,system-ui,sans-serif;
  font-size:1.35rem;
  font-weight:600;
  color:#d4a017;
  display:block;
  letter-spacing:0.5px;
}
.jm-spotlight-body .jm-spotlight-price--from{
  font-size:1.2rem;
  color:rgba(212,160,23,0.85);
}

/* --- Thumbnails --- */
.jm-spotlight-thumbs{
  position:relative;
  z-index:2;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  padding:0.6rem 0.65rem;
  background:rgba(0,0,0,0.4);
  pointer-events:auto;
}
.jm-spotlight-thumb{
  width:56px;
  height:56px;
  padding:0;
  border:2px solid rgba(255,255,255,0.1);
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  background:#111;
  flex-shrink:0;
  transition:border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.jm-spotlight-thumb:hover{
  border-color:rgba(212,160,23,0.5);
  transform:scale(1.08);
}
.jm-spotlight-thumb.is-active{
  border-color:#d4a017;
  box-shadow:0 0 14px rgba(212,160,23,0.3);
}
.jm-spotlight-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* --- Finish Picks --- */
.jm-spotlight-finish-picks{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.75rem;
  padding:0.65rem 0.75rem;
  background:rgba(0,0,0,0.3);
  border-top:1px solid rgba(255,255,255,0.05);
}
.jm-spotlight-finish-pick{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.35rem;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
  cursor:pointer;
  width:72px;
  flex-shrink:0;
  transition:transform 0.25s ease;
}
.jm-spotlight-finish-pick:hover{
  transform:scale(1.05);
}
.jm-spotlight-finish-pick-label{
  font-family:Oswald,system-ui,sans-serif;
  font-size:0.62rem;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#666;
  text-align:center;
  line-height:1.2;
  max-width:76px;
  transition:color 0.25s ease;
}
.jm-spotlight-finish-pick.is-active .jm-spotlight-finish-pick-label{
  color:#d4a017;
}
.jm-spotlight-finish-pick-frame{
  display:block;
  width:64px;
  height:64px;
  border:2px solid rgba(255,255,255,0.1);
  border-radius:6px;
  overflow:hidden;
  background:#1a1a1a;
  transition:border-color 0.25s ease, box-shadow 0.25s ease;
}
.jm-spotlight-finish-pick.is-active .jm-spotlight-finish-pick-frame{
  border-color:#d4a017;
  box-shadow:0 0 14px rgba(212,160,23,0.25);
}
.jm-spotlight-finish-pick-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* --- CTA Button --- */
.jm-spotlight-shop{
  display:inline-block;
  padding:0.65rem 1.5rem;
  border:1px solid rgba(212,160,23,0.4);
  border-radius:6px;
  color:#d4a017;
  text-decoration:none;
  font-family:Oswald,system-ui,sans-serif;
  text-transform:uppercase;
  font-size:0.8rem;
  letter-spacing:2.5px;
  position:relative;
  overflow:hidden;
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
}
.jm-spotlight-shop::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(212,160,23,0.15),transparent);
  transform:translateX(-100%);
  transition:transform 0.4s ease;
}
.jm-spotlight-shop:hover::before{
  transform:translateX(0);
}
.jm-spotlight-shop--block{
  display:block;
  width:100%;
  text-align:center;
  box-sizing:border-box;
  margin-top:0.5rem;
}
.jm-spotlight-shop:hover{
  border-color:#d4a017;
  color:#fff;
  box-shadow:0 4px 20px rgba(212,160,23,0.15);
  transform:translateY(-1px);
}

/* --- More Link --- */
.jm-spotlight-more{
  display:block;
  width:100%;
  font-size:0.72rem;
  color:#555;
  text-decoration:none;
  font-family:Oswald,system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-top:0.6rem;
  text-align:center;
  transition:color 0.3s ease, letter-spacing 0.3s ease;
}
.jm-spotlight-more:hover{
  color:#d4a017;
  letter-spacing:2.5px;
}

/* --- Fallback --- */
.jm-spotlight-fallback{
  grid-column:1/-1;
  text-align:center;
  color:#888;
  padding:3rem 1.5rem;
}
.jm-spotlight-fallback a{
  color:#d4a017;
}

/* --- Responsive --- */
@media (min-width:1200px){
  .jm-spotlights-grid{
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  }
}
@media (max-width:768px){
  .jm-spotlights-grid{
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:1rem;
    padding:1rem 0.85rem 1.5rem;
  }
  .jm-spotlight.jm-spotlight--card:hover{
    transform:translateY(-3px);
  }
  .jm-spotlight-thumb{
    width:48px;
    height:48px;
  }
  .jm-spotlight-finish-pick{
    width:64px;
  }
  .jm-spotlight-finish-pick-frame{
    width:56px;
    height:56px;
  }
}
@media (max-width:400px){
  .jm-spotlights-grid{
    grid-template-columns:1fr;
    padding:0.75rem 0.65rem 1.25rem;
  }
}
/* ===== /HOMEPAGE SPOTLIGHTS ===== */