/* ======= Design to Smile – Header & Footer ======= */
:root{
  --side:86px; --side-m:20px;
  --pill-h:55px; --radius:36px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gut-l:max(20px, env(safe-area-inset-left, 0px));
  --gut-r:max(20px, env(safe-area-inset-right, 0px));
  --ui-color:#000; --ui-contrast:#fff;

  /* Mobile frame spacing (für Highlight-Breite) */
  --frame-pad-x: clamp(16px, 4.2vw, 24px);
  --frame-pad-y: clamp(18px, 4.8vh, 28px);
}

body.header-light{ --ui-color:#fff; --ui-contrast:#000; }
body.header-dark { --ui-color:#000; --ui-contrast:#fff; }

.site-header, .main-navigation, #site-navigation, .inside-header{ display:none !important; }

/* Logo & Desktop */
.logo-container{ position:fixed; z-index:900; top:calc(34px + var(--safe-top)); left:var(--side); }
.logo{ width:56px; height:auto; display:block; transition: opacity .16s ease; }

.navbar{
  position:fixed; z-index:950; top:calc(34px + var(--safe-top)); right:var(--side);
  display:flex; align-items:center; gap:12px;
  height:var(--pill-h); padding:10px 10px; border-radius:var(--radius);
  border:1.5px solid var(--ui-color) !important;
  background:rgba(0,0,0,0.03);
  -webkit-backdrop-filter:saturate(160%) blur(8px); backdrop-filter:saturate(160%) blur(8px);
  color:var(--ui-color) !important;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.navbar a{
  text-decoration:none; position:relative; z-index:2; font:400 22px "Swear Display", serif;
  padding:0 12px; color:var(--ui-color) !important; white-space:nowrap; transition: color .16s ease;
}
.header-highlight{
  position:absolute; top:0; left:0; height:var(--pill-h); border-radius:var(--radius);
  background:var(--ui-color) !important; z-index:1;
  width:0; transform:translateX(0); opacity:0;
  transition: transform .28s cubic-bezier(0.23,1,0.32,1), width .28s cubic-bezier(0.23,1,0.32,1), background-color .16s ease, opacity .16s ease;
}
.navbar.has-active .header-highlight{ opacity:1; }
.navbar a.is-active{ color:var(--ui-contrast) !important; }

/* ===== Mobile: gemeinsame Optik ===== */
.mobile-link{
  font: 400 clamp(22px, 5.8vw, 32px) "Swear Display", serif;
  line-height:1.2;
  letter-spacing:0.01em;
  color:var(--ui-color) !important;
  text-decoration:none;
}

/* Mobile Toggle – jetzt „Glass/Blur“ wie Desktop, ohne grauen Fill */
.mobile-menu-toggle{
  display:none; position:fixed; z-index:100001;
  top:calc(16px + var(--safe-top)); right:var(--side);
  padding:10px 22px; border-radius:999px; height:auto;
  border:1.5px solid var(--ui-color) !important;
  /* Fallback-Hintergrund extrem dezent wie Desktop */
  background: rgba(0,0,0,0.03);
  /* iOS/Glass */
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent; cursor:pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease, opacity .16s ease;
}
/* Umschaltende Tönung je nach Modus (verhindert „grau“ auf weißem Grund) */
body.header-light .mobile-menu-toggle{ background: rgba(255,255,255,0.10); }
body.header-dark  .mobile-menu-toggle{ background: rgba(0,0,0,0.03); }

/* Modernere, feinere Tönung – wo unterstützt */
@supports (background: color-mix(in srgb, white 10%, transparent)){
  body.header-light .mobile-menu-toggle{ background: color-mix(in srgb, white 10%, transparent); }
  body.header-dark  .mobile-menu-toggle{ background: color-mix(in srgb, black 6%, transparent); }
}

.mobile-menu-toggle .label-close{ display:none; }
body.menu-open .mobile-menu-toggle .label-open{ display:none; }
body.menu-open .mobile-menu-toggle .label-close{ display:inline; }

/* Overlay */
.mobile-menu-overlay{
  position:fixed; inset:0; z-index:99999;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(9px) saturate(140%); backdrop-filter:blur(9px) saturate(140%);
  min-height:100dvh;
  padding: calc(var(--safe-top) + 24px) var(--gut-r) calc(var(--safe-bottom) + 24px) var(--gut-l);
  box-sizing:border-box; overflow:hidden;
}
body.menu-open .mobile-menu-overlay{ display:flex; }
body.menu-open{ overflow:hidden; }

/* Dialog → nur Container */
.mobile-menu-content{
  position:relative; width:100%; max-width:100%;
  border:0; background:transparent;
  color:var(--ui-color);
  display:flex; align-items:center; justify-content:center;
}

/* Rahmen + Links */
.mobile-menu-frame{
  position:relative;
  width: min(680px, calc(100% - 48px));
  margin: clamp(12vh, 22vh, 28vh) auto clamp(10vh, 16vh, 22vh);
  padding: var(--frame-pad-y) var(--frame-pad-x);
  border:1.8px solid var(--ui-color);
  border-radius: clamp(28px, 7vw, 44px);
  display:flex; flex-direction:column; align-items:center;
  gap: clamp(24px, 8vh, 64px);
  text-align:center;
  background: rgba(0,0,0,0.03);
  -webkit-backdrop-filter:saturate(160%) blur(9px); backdrop-filter:saturate(160%) blur(9px);
}
.mobile-menu-frame .mobile-link{ position:relative; z-index:2; }
.mobile-menu-frame .mobile-link.is-current{ color:var(--ui-contrast) !important; }

/* HIGHLIGHT-BALKEN */
.mobile-menu-highlight{
  position:absolute; z-index:1;
  left: var(--frame-pad-x);
  right: var(--frame-pad-x);
  top: 0;
  height: 56px;
  border-radius: 999px;
  background: var(--ui-color);
  opacity: 0;
  transform: translateY(0);
  transition: transform .28s cubic-bezier(0.23,1,0.32,1),
              opacity .18s ease,
              background-color .16s ease;
}

/* Sichtbarkeit nur Mobile */
@media (max-width:900px){
  .navbar{ display:none; }
  .logo-container{ left:var(--side-m); }
  .mobile-menu-toggle{
    display:inline-flex;
    right:var(--side-m);
    align-items:center; justify-content:center; gap:8px;
  }
}
@media (min-width:901px){
  .mobile-menu-toggle{ display:none !important; }
  .mobile-menu-overlay{ display:none !important; }
}

/* QoL */
.logo, .navbar, .mobile-menu-toggle, .mobile-menu-content, .mobile-menu-content a, .mobile-menu-frame, .mobile-menu-highlight{
  will-change: color, border-color, background-color, transform, opacity;
}

/* ==== Ergänzung: gemeinsame Nav-Typo für Header & Footer ==== */
.ui-nav-typo{
  font: 400 22px "Swear Display", serif;
  line-height:1.2;
  letter-spacing:0.01em;
}