/*
  Shared header (Design + Behavior Support)
  Ziel: Header-Design wie im Kauf Check / Projekt Check und identisches Hamburger-Verhalten.
  Diese Datei darf in jedem Tool geladen werden, ohne den restlichen Tool-Style zu verändern.
*/

/* --- Header Shell (wie in den Checks) --- */
.r4x-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 16px 6px 16px;
  border-bottom:3px solid #d4af37;
  background:#000;
  position:sticky;
  top:0;
  z-index:300;
}
.r4x-header--light{background:#fff}
.r4x-header--dark{background:#000}

.r4x-logo-wrap{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.r4x-logo{width:2cm;height:2cm;object-fit:contain}

.r4x-header-main-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.r4x-nav{display:flex;flex-wrap:wrap;gap:8px}

.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  border:1.5px solid rgba(212,175,55,0.55);
  background:radial-gradient(circle at 30% 30%, #444 0, #000 40%, #000 100%);
  color:#fff;
  font-size:0.78rem;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 3px 8px rgba(0,0,0,0.35);
  transition:transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
  white-space:nowrap;
}
.nav-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,0.45);filter:brightness(1.05)}
.nav-btn:active{transform:translateY(0);box-shadow:0 3px 8px rgba(0,0,0,0.45);filter:brightness(0.97)}

/* --- Hamburger (Design wie in den Checks, ohne Hover/Fokus-Autologik) --- */
.r4x-header-right{position:relative;display:flex;align-items:center;justify-content:flex-end;z-index:260}

.hamburger-btn{
  position:relative;
  z-index:261;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  padding:0 10px;
  box-shadow:none;
  pointer-events:auto;
}
.hamburger-btn span{display:block;height:2px;border-radius:2px;background:rgba(240,237,228,0.72)}
.hamburger-btn:hover,.hamburger-btn:active{transform:none;box-shadow:none;filter:none}

.hamburger-menu{
  display:none;
  position:absolute;
  top:54px;
  right:0;
  width:min(320px,calc(100vw - 24px));
  max-height:70vh;
  overflow:auto;
  background:#14171d;
  border:1px solid rgba(212,175,55,0.22);
  border-radius:16px;
  padding:10px;
  box-shadow:0 18px 48px rgba(0,0,0,0.5);
  z-index:262;
}
.hamburger-menu.open{display:block !important}
.hamburger-menu a{
  display:block;
  font-size:13px;
  color:rgba(240,237,228,0.72);
  text-decoration:none;
  padding:9px 11px;
  border-radius:10px;
  white-space:normal;
}
.hamburger-menu a:hover{background:rgba(255,255,255,0.055);color:#f0ede4}

@media (max-width:768px){
  .r4x-header{padding:8px 10px 6px 10px;gap:10px}
  .r4x-nav{gap:4px}
  .nav-btn{padding:3px 8px;font-size:0.7rem}
  .r4x-logo{width:1.6cm;height:1.6cm}
}