/* ============================================================
   ShimmerGates — Layout (Header, Footer, Grid-System)
   ============================================================ */

/* ── Header ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(6,6,8,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--iron);transition:background .3s}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:var(--space-md)}
.site-logo{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--light);letter-spacing:.04em}
.site-logo__mark{width:42px;height:42px;position:relative;flex-shrink:0;background:url('../images/shimmergates-logo-v2.png') center/contain no-repeat}
.site-logo__mark::after,.site-logo__mark::before{content:none}

/* ── Navigation ── */
.main-nav{display:none}
.main-nav ul{display:flex;align-items:center;gap:var(--space-xs)}
.main-nav a{display:block;padding:.4rem .7rem;font-size:.82rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--mist);border-radius:var(--radius);transition:color .2s,background .2s}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--light);background:rgba(255,255,255,.04)}
.main-nav .btn--sm{margin-left:.5rem}

/* Der Kopfbereich bleibt auf allen Bildschirmgrößen bewusst kompakt. */
.nav-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--bone);background:var(--slate);border:1px solid var(--iron);border-radius:var(--radius)}
.nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
.nav-toggle[aria-expanded="false"] .nav-toggle__close{display:none}

/* Aufklappbares Hauptmenü */
.mobile-nav{position:fixed;top:64px;right:0;bottom:0;width:min(430px,100%);overflow-y:auto;background:rgba(10,10,14,.98);border-top:1px solid var(--iron);border-left:1px solid var(--iron);padding:var(--space-md);transform:translateX(100%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .3s ease,opacity .3s ease,visibility .3s;z-index:999}
.mobile-nav.is-open{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto}
.mobile-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
.mobile-nav li:last-child{grid-column:1/-1}
.mobile-nav a{display:flex;align-items:center;min-height:52px;padding:.8rem 1rem;font-size:.86rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mist);border:1px solid var(--stone);border-radius:var(--radius);transition:color .2s,background .2s,border-color .2s}
.mobile-nav a:hover,.mobile-nav a[aria-current="page"]{color:var(--light);background:rgba(255,255,255,.05);border-color:var(--iron)}
.mobile-nav .btn{width:100%;margin-top:.3rem;justify-content:center}
.nav-backdrop{position:fixed;inset:64px 0 0;z-index:998;width:100%;height:auto;padding:0;border:0;background:rgba(0,0,0,.62);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s}
.nav-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}
body.nav-is-open{overflow:hidden}
@media(max-width:520px){
  .mobile-nav{border-left:0}
  .mobile-nav ul{grid-template-columns:1fr}
  .mobile-nav li:last-child{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){.mobile-nav,.nav-backdrop{transition:none}}

/* ── Footer ── */
.site-footer{background:var(--abyss);border-top:1px solid var(--iron);padding-block:var(--space-2xl) var(--space-lg)}
.site-footer__grid{display:grid;gap:var(--space-xl);margin-bottom:var(--space-xl)}
@media(min-width:768px){.site-footer__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.site-footer__grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.site-footer__brand p{color:var(--mist);font-size:.95rem;margin-top:var(--space-sm);max-width:32ch}
.site-footer__title{font-family:var(--font-display);font-size:.95rem;color:var(--light);margin-bottom:var(--space-sm);letter-spacing:.04em}
.site-footer ul{display:flex;flex-direction:column;gap:.35rem}
.site-footer a{color:var(--mist);font-size:.9rem;transition:color .2s}
.site-footer a:hover{color:var(--light)}
.site-footer__bottom{display:flex;flex-direction:column;gap:var(--space-sm);align-items:center;padding-top:var(--space-lg);border-top:1px solid var(--stone);color:var(--mist);font-size:.8rem}
@media(min-width:768px){.site-footer__bottom{flex-direction:row;justify-content:space-between}}
.site-footer__legal{display:flex;gap:var(--space-md);flex-wrap:wrap;justify-content:center}

/* ── Grid-System ── */
.grid{display:grid;gap:var(--space-md)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1023px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ── Zwei-Spalten-Layout ── */
.cols-2{display:grid;gap:var(--space-xl);align-items:start}
@media(min-width:768px){.cols-2{grid-template-columns:1fr 1fr}}
.cols-2--wide{grid-template-columns:1.2fr .8fr}
@media(max-width:767px){.cols-2--wide{grid-template-columns:1fr}}