:root{
  --bg-900:#0a0a0a; --bg-850:#0f0d0b; --bg-800:#141210; --bg-750:#181512;
  --line:rgba(255,255,255,.08);
  --ink:#f5f5f5; --ink-dim:#d9d9d9; --muted:#a6a6a6;
  --amber:#b27a3c; --amber-2:#946533; --amber-glow:rgba(178,122,60,.38);
  --radius:18px; --radius-sm:12px; --shadow:0 12px 32px rgba(0,0,0,.45);
  --max:1200px; --pad:clamp(16px,2.4vw,28px); --trans:all .25s ease;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg-900);color:var(--ink)}
a{color:inherit;text-decoration:none;transition:var(--trans)}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.hh,.sec-title,.hero__title{font-family:"Playfair Display",Georgia,serif}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:#000;border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{color:#fff;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

.nav__toggle{display:none;background:transparent;border:0;padding:10px;border-radius:10px;position:relative;z-index:1001}
.nav__toggle .bar{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

.nav__links{display:flex;align-items:center;gap:22px}
.nav__link{color:#fff;text-transform:uppercase;letter-spacing:.12em;font-weight:700;padding:10px 0;position:relative}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:transparent;transition:var(--trans)}
.nav__link:hover::after{background:var(--amber)}

@media (max-width:1024px){
  .nav__toggle{display:block}
  .nav__links{
    position:fixed; left:0; right:0; top:72px; height:calc(100dvh - 72px);
    background:#000; transform:translateY(-120%); transition:transform .25s ease;
    display:flex; flex-direction:column; gap:28px; padding:28px 20px;
    overflow:auto; -webkit-overflow-scrolling:touch;
  }
  .nav__links.open{transform:translateY(0)}
  body.menu-open{overflow:hidden}
}

/* HERO */
.hero{position:relative;background:#000;color:var(--ink);touch-action:pan-y}
.hero__bg{position:absolute;inset:0;overflow:hidden;touch-action:pan-y}

/* Hintergrundbild (ruhig, kein Parallax) */
#heroImg{
  position:absolute; left:0; top:0; width:100%; height:115%;
  object-fit:cover; object-position:center;
  filter:saturate(.9) brightness(.7);
  transform:translateZ(0); will-change:transform;
}

.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65))}

/* -------- CSS-Glitter ohne Canvas -------- */
.glitter-layer{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  mix-blend-mode:screen; opacity:.75;
  will-change:background-position, transform;
  transform:translateZ(0);
  background-repeat:repeat;
}

/* Wir bauen „Goldstaub“-Kacheln via mehreren radial-gradient Mustern */
.glitter-fast{
  background-image:
    radial-gradient(rgba(255,220,150,.95) 1.2px, rgba(0,0,0,0) 1.3px),
    radial-gradient(rgba(210,160,80,.9) 1px, rgba(0,0,0,0) 1.1px);
  background-size: 120px 120px, 150px 150px;
  background-position: 0 0, 60px 40px;
  animation: glitter-fall 55s linear infinite;
}

.glitter-slow{
  background-image:
    radial-gradient(rgba(255,230,170,.7) 1.6px, rgba(0,0,0,0) 1.7px),
    radial-gradient(rgba(200,150,70,.6) 1.2px, rgba(0,0,0,0) 1.3px);
  background-size: 180px 180px, 220px 220px;
  background-position: 30px -60px, 100px -20px;
  animation: glitter-fall 95s linear infinite reverse;
  opacity:.5;
}

@media (max-width:600px){
  .glitter-layer{ mix-blend-mode:normal; opacity:.6; }
}

@keyframes glitter-fall{
  from { background-position: 0 0, 60px 40px; }
  to   { background-position: 0 1000px, 60px 1040px; }
}

.hero__content{position:relative;min-height:min(86vh,860px);display:grid;place-items:center}
.title-wrap{display:flex;align-items:center;gap:28px;width:100%}
.title-line{flex:1;height:1px;background:rgba(178,122,60,.35)}
.hero__title{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(28px,6vw,56px);color:#fff;white-space:nowrap}
@media (max-width:640px){.title-wrap{gap:16px}.hero__title{white-space:normal;text-align:center}}

/* Pills */
.pills{background:var(--bg-900);border-bottom:1px solid var(--line);box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)}
.pills__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:18px 0}
.pill{padding:10px 20px;border:1px solid var(--amber);border-radius:999px;font-weight:600;color:var(--amber);background:transparent;letter-spacing:.04em;transition:all .3s ease}
.pill:hover{background:var(--amber);color:var(--bg-900);transform:translateY(-2px);box-shadow:0 0 16px var(--amber-glow)}

/* Sections / Cards */
.section{padding:clamp(52px,8vw,96px) 0;background:var(--bg-900);color:var(--ink);content-visibility:auto;contain-intrinsic-size:1000px}
.section--alt{background:var(--bg-850)}
.sec-title{font-size:clamp(24px,3.6vw,36px);letter-spacing:.04em;text-transform:uppercase;color:#fff;margin:0 0 .6rem}
.sec-title--small{font-size:clamp(22px,3vw,30px)}
.sec-lead{color:var(--ink-dim);max-width:820px}

.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.grid-2,.grid-3{grid-template-columns:1fr}}

.cards .card{padding:0;overflow:hidden;background:var(--bg-800);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.card img{width:100%;height:320px;object-fit:cover;filter:saturate(.9) brightness(.85)}
.card__body{padding:20px}
.card__title{font-weight:700;margin:.2rem 0 .4rem;color:#fff}
.card__text{color:var(--muted);margin:0 0 .8rem}

/* Buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:999px;background:var(--amber);color:#0b0b0b;font-weight:700;letter-spacing:.04em;transition:var(--trans);box-shadow:0 0 12px var(--amber-glow);text-align:center}
.btn:hover{transform:translateY(-2px);opacity:.95;box-shadow:0 0 18px rgba(178,122,60,.55)}
.btn.btn--ghost{background:transparent;color:var(--amber);border:2px solid var(--amber)}

/* Contact */
.section--contact{background:linear-gradient(180deg,var(--bg-850),var(--bg-900))}
.field{display:flex;flex-direction:column;gap:8px}
.field span{font-size:.9rem;color:var(--muted)}
.field input,.field textarea{padding:12px 14px;border-radius:12px;border:1px solid var(--line);font:inherit;background:var(--bg-750);color:var(--ink);transition:border var(--trans),box-shadow var(--trans)}
.field input::placeholder,.field textarea::placeholder{color:#8b8b8b}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--amber-2);box-shadow:0 0 0 4px rgba(148,101,51,.22)}
.field--full{grid-column:1/-1}

/* Kontakt-Toast */
.toast{margin-top:12px;font-size:.95rem;line-height:1.4;padding:10px 12px;border-radius:10px;border:1px solid transparent}
.toast--ok{color:#0f5132;background:#d1e7dd;border-color:#badbcc}
.toast--err{color:#842029;background:#f8d7da;border-color:#f5c2c7}
#contactForm.was-validated input:invalid,#contactForm.was-validated textarea:invalid{border-color:#b00020}

/* Footer */
.footer{background:#000;color:#fff;padding:28px 0;border-top:1px solid var(--line)}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:16px}
.footer__nav{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:640px){.footer__inner{flex-direction:column}}

/* Button-Reihe */
.btn-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start}
.btn-row .btn{flex:1 1 auto;min-width:220px;text-align:center}

/* ===============================
   🔔 Cookie Banner Styles (NEU)
   =============================== */
#cookie-banner{
  position: fixed;
  inset: auto 0 16px 0;
  z-index: 99999;
  display: none; /* per JS sichtbar */
}
.cookie-wrap{
  margin: 0 auto;
  max-width: min(980px, 92vw);
  background: linear-gradient(135deg, rgba(20,18,16,.80), rgba(20,18,16,.66));
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cookie-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 18px;
  align-items: center;
}
.cookie-title{
  font-weight: 800;
  font-size: 1rem;
  color: var(--amber);
  margin: 0 0 .2rem 0;
}
.cookie-text{
  font-size: .95rem;
  color: var(--ink-dim);
  margin: 0;
}
.cookie-actions{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookie-btn{
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--bg-800);
  color: var(--ink);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.cookie-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.14);
}
.cookie-btn-accept{
  background: linear-gradient(145deg, var(--amber), #e0b07a);
  color: #0b0b0b;
  border: none;
  box-shadow: 0 0 16px var(--amber-glow);
}
.cookie-link{ color: var(--amber); font-weight: 700; text-decoration: none; }
.cookie-link:hover{ text-decoration: underline; }

@media (max-width: 575.98px){
  .cookie-inner{ grid-template-columns: 1fr; }
  .cookie-actions{ justify-content: stretch; }
  .cookie-actions .cookie-btn{ flex: 1 1 auto; text-align: center; }
}

/* Noscript Hinweis minimal */
#cookie-noscript{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background:#111; color:#fff;
  padding:.6rem .9rem; text-align:center;
  font-size:.9rem; z-index:99998;
}