/* =====================================================================
   KINKZ — ZENTRALE SHELL (Header + Footer + Logo + Buttons + Sprache)
   Wird auf ALLEN Seiten eingebunden. Nav/Footer hier (CSS) + shell.js (Markup).
   Nutzt die :root-Variablen der jeweiligen Seite.
   ===================================================================== */

/* SILBER-LOGO (Maske + Gradient + Hover-Glanz) */
.klogo { display:block; position:relative; overflow:hidden;
  background-image: linear-gradient(135deg,#ffffff 0%,#f6f4f0 40%,#e6e2db 70%,#d2cec6 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-mode:luminance; mask-mode:luminance; }
.klogo::after { content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.65) 50%, transparent 62%);
  background-size:230% 100%; background-position:145% 0; transition: background-position .9s cubic-bezier(.4,0,.2,1); }
a:hover > .klogo::after, .klogo:hover::after { background-position:-45% 0; }
.klogo-full  { -webkit-mask-image:url(assets/logo-full.png);  mask-image:url(assets/logo-full.png);  aspect-ratio:1061/948; }
.klogo-crown { -webkit-mask-image:url(assets/logo-crown.png); mask-image:url(assets/logo-crown.png); aspect-ratio:818/629; }
.klogo-text  { -webkit-mask-image:url(assets/logo-text.png);  mask-image:url(assets/logo-text.png);  aspect-ratio:1061/387; }

/* SPRACHE */
body.lang-de [data-lang="en"] { display:none; }
body.lang-en [data-lang="de"] { display:none; }

/* BUTTONS */
.btn-gold { background:var(--gold); color:#060504; font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:.85rem 2.2rem; border-radius:3px; border:none; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:.5rem; }
.btn-gold:hover { background:var(--gold2); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--muted); font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:.85rem 1.75rem; border-radius:3px; border:1px solid var(--border2); cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:.5rem; }
.btn-ghost:hover { color:var(--white); border-color:rgba(255,255,255,.28); }

/* NAV — einheitlich, sticky, auf allen Seiten gleich */
.site-nav { position:sticky; top:0; z-index:200; padding:.9rem 2.75rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; background:rgba(6,5,4,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--border); }
.nav-brand { display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.nav-brand-logo { height:26px; }
.nav-brand-txt { display:flex; flex-direction:column; line-height:1; }
.nav-brand-name { font-family:var(--cond); font-size:.95rem; font-weight:900; letter-spacing:.14em; color:var(--silver2); }
.nav-brand-sub { font-size:8px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-top:3px; }
.nav-links { display:flex; gap:1.75rem; list-style:none; justify-content:center; margin:0; padding:0; }
.nav-links a { color:var(--muted); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; transition:color .2s; }
.nav-links a:hover { color:var(--silver2); }
.nav-right { display:flex; align-items:center; gap:.85rem; justify-content:flex-end; }
.lt { display:flex; background:rgba(255,255,255,0.05); border-radius:3px; padding:2px; border:1px solid var(--border); }
.lb { background:none; border:none; color:var(--muted); font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:.1em; padding:.25rem .6rem; cursor:pointer; border-radius:2px; transition:all .2s; }
.lb.on { background:var(--gold); color:#060504; }
.nav-tickets { font-size:11px; padding:.5rem 1.2rem; letter-spacing:.1em; }

/* FOOTER */
.site-footer { border-top:1px solid var(--border); padding:2.25rem 2.75rem; position:relative; z-index:1; background:var(--bg); }
.footer-inner { max-width:1160px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.footer-brand { display:flex; flex-direction:column; gap:.55rem; }
.footer-logo-link { display:inline-block; width:max-content; }
.footer-serenity { font-size:9px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.footer-links { display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.footer-links a { font-size:11px; color:var(--muted); text-decoration:none; letter-spacing:.08em; text-transform:uppercase; font-weight:600; transition:color .2s; }
.footer-links a:hover { color:var(--white); }
.footer-end { display:flex; align-items:center; gap:1.5rem; }
.footer-insta { color:var(--muted); transition:color .2s; display:flex; }
.footer-insta:hover { color:var(--gold); }
.footer-copy { font-size:11px; color:var(--muted2); letter-spacing:.08em; }

@media (max-width:900px){
  .site-nav { padding:.9rem 1.25rem; grid-template-columns:auto auto; }
  .nav-links { display:none; }
}
@media (max-width:600px){
  .site-nav { padding:.75rem 1rem; gap:.6rem; }
  .nav-right { gap:.5rem; }
  .nav-brand { min-width:0; }
  .nav-tickets { padding:.45rem .85rem; font-size:10px; letter-spacing:.06em; }
}
@media (max-width:680px){
  .site-footer { padding:2.25rem 1.25rem; }
  .footer-inner { flex-direction:column; justify-content:center; text-align:center; gap:1.3rem; }
  .footer-brand { align-items:center; }
  .footer-links { justify-content:center; }
  .footer-end { justify-content:center; }
}