:root{
  color-scheme:dark;
  --bg:#050505;
  --fg:#f3f3f1;
  --muted:#a8a8a8;
  --gold:#2dd4bf;
  --accent:#2dd4bf;
  --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{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(0,0,0,.75);
  backdrop-filter:saturate(1.2) blur(6px);
  border:2px solid var(--gold);
  border-radius:999px;
  padding:6px 14px;
  box-shadow:0 6px 20px rgba(0,0,0,.6);
}
.nav .brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;}
.nav .brand .logo-wrap{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:999px;
  background:#000;
  border:2px solid var(--gold);
  box-shadow:0 0 14px rgba(45,212,191,.7);
}
.nav .brand img{height:46px;width:auto;filter:drop-shadow(0 0 8px rgba(45,212,191,.95));}
.nav .brand .word{letter-spacing:.05em;font-size:18px;}
@media (max-width:520px){.nav .brand .word{display:none;}}
.nav a{padding:6px 10px;border-radius:999px;font-weight:700;font-size:.9rem;}
.nav a[aria-current="true"]{background:#111;}
.nav a:hover{background:#111;}

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;}}

/* ===== 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(45,212,191,.10), transparent 60%),
    radial-gradient(700px 500px at 85% 20%, rgba(45,212,191,.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(45,212,191,.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(45,212,191,.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(45,212,191,.55);
  transform:translateY(-1px);
}
/* ===== /LIGHTBOX V1 ===== */