:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#666;
  --steel:#6b7076;          /* Stahlgrau */
  --steel-dark:#4a4f55;
  --card:#f7f7f8;
  --border:#e7e7ea;
  --accent:#5a6a7a;
  --success:#0a84ff;        /* Hover für „Teilen“ */
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#171a1d; --text:#fff; --muted:#c8c8c8; --card:#1e2327; --border:#2a2f34; --accent:#8ea0b3; --steel:#8a9097; --steel-dark:#6c737a;}
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.45}
img{max-width:100%;height:auto}

/* Preloader */
#preloader{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s}
#preloader .pre-icon{font-size:28px;opacity:.8;margin-bottom:12px}
#preloader .pre-bar{width:180px;height:6px;background:var(--border);border-radius:999px;overflow:hidden}
#preloader .pre-bar span{display:block;height:100%;width:0;background:var(--steel);animation:load 1.2s ease-out forwards}
@keyframes load{to{width:100%}}

/* Header */
.header{position:sticky;top:0;z-index:1000;background:color-mix(in oklab, var(--bg), #000 8%);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--border)}
.header .brand{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem}
.logo-icon{font-size:18px}
.logo-text{font-weight:600}
.nav{display:flex;align-items:center;justify-content:space-between}
.nav-list{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.nav-list a, .nav-list button{background:none;border:0;color:var(--text);text-decoration:none;font:inherit;cursor:pointer}
.nav-list a:hover,.nav-list button:hover{color:var(--steel-dark)}
.has-sub{position:relative}
.dropdown-toggle{padding:.5rem .25rem}
.dropdown{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:.5rem;display:none;min-width:220px}
.has-sub.open .dropdown{display:block}
.dropdown a{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:6px}
.dropdown a:hover{background:var(--card)}
.actions{display:flex;align-items:center;gap:.5rem;padding-right:1rem}
#siteSearch{padding:.45rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);min-width:200px}
.lang{display:flex;align-items:center;gap:.35rem}
.lang-btn{background:none;border:0;color:var(--muted);cursor:pointer;padding:.25rem .35rem;border-radius:6px}
.lang-btn.active{color:var(--text);font-weight:600}
.theme{background:none;border:1px solid var(--border);border-radius:8px;padding:.35rem .5rem;cursor:pointer}

/* Burger (mobil) */
.burger{display:none;background:none;border:0;flex-direction:column;gap:4px;margin-right:.75rem}
.burger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px}

/* Hero */
.hero{position:relative}
.slides{position:relative;height:62vh;max-height:720px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1rem;background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, transparent 70%)}
.hero h1{color:#fff;max-width:920px;margin:0 0 1rem;font-weight:700}
.hero-cta{display:flex;gap:.75rem}
.btn{padding:.65rem 1rem;border-radius:10px;text-decoration:none;border:1px solid var(--steel);color:var(--text);background:transparent;display:inline-block}
.btn.primary{background:var(--steel);color:#fff;border-color:var(--steel)}
.btn.primary:hover{background:var(--steel-dark)}
.btn.outline:hover{background:var(--card)}
.btn.small{font-size:.9rem;padding:.5rem .75rem}
.dots{position:absolute;bottom:14px;display:flex;gap:8px}
.dots button{width:9px;height:9px;border-radius:999px;border:0;background:rgba(255,255,255,.6);cursor:pointer}
.dots button.active{background:#fff}

/* Sections */
.section{padding:3rem 1rem;max-width:1200px;margin:0 auto}
.section h2{margin:0 0 1rem;border-bottom:1px solid var(--border);padding-bottom:.5rem}
.sub{color:var(--muted);margin-top:-.25rem}

/* Grid & Cards */
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.card img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.card h3{margin:.9rem 1rem .25rem}
.card p{margin:.25rem 1rem .75rem}
.price{margin:0 1rem 1rem}
.muted{color:var(--muted)}
.label{display:inline-block;margin:0 1rem 1rem;padding:.25rem .5rem;border-radius:999px;background:#e9eaec;color:#333;font-size:.9rem}
@media (prefers-color-scheme: dark){ .label{background:#333;color:#eee}}

/* Intro */
.intro{max-width:980px;margin:2rem auto 0;padding:0 1rem;color:var(--muted);text-align:center}

/* Reviews */
.reviews{background:color-mix(in oklab, var(--bg), #000 6%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.reviews h2{margin-bottom:1rem}
.review-slider{display:flex;align-items:center;gap:1rem}
.review-track{display:flex;overflow:hidden;scroll-behavior:smooth}
.review-card{min-width:320px;max-width:360px;margin:.5rem;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:.75rem .9rem}
.stars{font-size:.95rem;color:#f5c542;margin-bottom:.25rem}
.rev-prev,.rev-next{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.4rem .6rem;cursor:pointer}
.rev-prev:hover,.rev-next:hover{background:var(--bg)}
.ebay{display:inline-block;margin-top:.5rem}

/* Kontakt (Hintergrundbild optional) */
.contact{position:relative;background:url('images/hero-2.jpg') center/cover no-repeat}
.contact .overlay{backdrop-filter:brightness(0.75);padding:3rem 1rem;text-align:center;color:#fff}
.contact .btn.primary{background:var(--steel);border-color:transparent}
.contact .contact-info{opacity:.95}
.social-row{display:flex;justify-content:center;gap:1rem;margin-top:1rem}
.ext{width:34px;height:34px;display:inline-block;background-size:contain;background-repeat:no-repeat}
.ext.ig{background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><defs><linearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22><stop stop-color=%22%23f58529%22/><stop offset=%220.5%25%22 stop-color=%22%23dd2a7b%22/><stop offset=%221%22 stop-color=%22%235158f6%22/></linearGradient></defs><path fill=%22url(%23g)%22 d=%22M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.9a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z%22/></svg>')}
.ext.ebay{background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 24%22><text x=%220%22 y=%2218%22 font-size=%2220%22 font-family=%22Arial%22 fill=%22%23000000%22>e</text><text x=%2212%22 y=%2218%22 font-size=%2220%22 font-family=%22Arial%22 fill=%22%23ff0000%22>b</text><text x=%2226%22 y=%2218%22 font-size=%2220%22 font-family=%22Arial%22 fill=%22%2300a000%22>a</text><text x=%2238%22 y=%2218%22 font-size=%2220%22 font-family=%22Arial%22 fill=%22%230000ff%22>y</text></svg>')}
.ext.kl{background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 24%22><circle cx=%228%22 cy=%2212%22 r=%225%22 fill=%22%2300a000%22/><circle cx=%2256%22 cy=%2212%22 r=%225%22 fill=%22%23ff0000%22/></svg>')}

/* Footer */
.footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem;border-top:1px solid var(--border);background:color-mix(in oklab, var(--bg), #000 6%)}
.foot-left{display:flex;align-items:center;gap:.5rem}
.tiny-icon{opacity:.7}
.foot-links{display:flex;align-items:center;gap:.5rem}
.foot-links a,.foot-links button{color:var(--text);text-decoration:none;background:none;border:0;cursor:pointer}
.foot-links a:hover,.foot-links button:hover{color:var(--success)}

/* Responsiv */
@media (max-width:980px){
  .nav-list{display:none}
  .burger{display:flex}
  .actions{gap:.35rem}
  #siteSearch{min-width:120px}
  .hero h1{font-size:1.25rem;padding:0 .25rem}
}

/* Optionales Bild-Wasserzeichen als Overlay (falls nötig) */
/*
.card img, .slide img{
  position:relative;
  isolation:isolate;
}
.card img::after, .slide img::after{
  content:"Werkraum Bayern";
  position:absolute; inset:0; display:grid; place-content:center;
  color:rgba(255,255,255,.12);
  font-weight:700; font-size:min(10vw,56px); transform:rotate(-24deg);
  mix-blend-mode:overlay; pointer-events:none;
}
*/