/*
  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}
}


/* Keep menu out of document flow so opening it does not stretch the sticky header */
.hamburger-menu{ position:absolute; top:54px; right:0; }
.hamburger-close-btn{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:999px; border:1px solid rgba(245,210,122,.24); background:rgba(9,11,18,.9); color:rgba(255,255,255,.92); font-size:22px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); z-index:2; }
.hamburger-close-btn:hover{ border-color:rgba(245,210,122,.42); color:#fff; background:rgba(18,20,28,.96); }
.hamburger-close-btn:focus-visible{ outline:2px solid rgba(245,210,122,.55); outline-offset:2px; }
.hamburger-menu > .hamburger-group-title:first-of-type, .hamburger-menu > a:first-of-type{ margin-top: 16px; }
@media (max-width: 640px){ .hamburger-close-btn{ top:8px; right:8px; width:30px; height:30px; font-size:20px; } }

.hamburger-group-title{display:block;padding:8px 11px 4px;color:rgba(240,237,228,.62);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.hamburger-group-title.is-current{color:rgba(245,210,122,.88);}
.hamburger-group-title--link{cursor:pointer;}
.hamburger-group-title--link:hover{color:#f0ede4;}
.hamburger-sep{border:0;border-top:1px solid rgba(255,255,255,.08);margin:8px 0;}
.hamburger-menu a.is-current{background:rgba(212,175,55,.14);color:#f5d27a;font-weight:600;}


/* --- Theme variants: one shared header, multiple visual modes --- */
.r4x-header--dark .nav-btn{
  background:radial-gradient(circle at 30% 30%, #444 0, #000 40%, #000 100%);
  color:#fff;
  border-color:rgba(212,175,55,0.55);
  box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 3px 8px rgba(0,0,0,0.35);
}
.r4x-header--dark .hamburger-btn{border-color:rgba(255,255,255,0.08); background:transparent;}
.r4x-header--dark .hamburger-btn span{background:rgba(240,237,228,0.72);}
.r4x-header--dark .hamburger-menu{
  background:#14171d;
  border-color:rgba(212,175,55,0.22);
  box-shadow:0 18px 48px rgba(0,0,0,0.5);
}
.r4x-header--dark .hamburger-menu a{color:rgba(240,237,228,0.72);}
.r4x-header--dark .hamburger-menu a:hover{background:rgba(255,255,255,0.055);color:#f0ede4;}

.r4x-header--light{
  background:#fff;
  border-bottom-color:#d4af37;
}
.r4x-header--light .nav-btn{
  background:radial-gradient(circle at 30% 30%, #444 0, #000 40%, #000 100%);
  color:#fff;
  border-color:rgba(212,175,55,0.55);
  box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 3px 8px rgba(0,0,0,0.35);
}
.r4x-header--light .nav-btn:hover{box-shadow:0 6px 14px rgba(0,0,0,0.45);filter:brightness(1.05)}
.r4x-header--light .nav-btn:active{transform:translateY(0);box-shadow:0 3px 8px rgba(0,0,0,0.45);filter:brightness(0.97)}
.r4x-header--light .hamburger-btn{border-color:rgba(18,18,18,0.14); background:transparent;}
.r4x-header--light .hamburger-btn span{background:rgba(18,18,18,0.82);}
.r4x-header--light .hamburger-menu{
  background:#14171d;
  border-color:rgba(212,175,55,0.22);
  box-shadow:0 18px 48px rgba(0,0,0,0.5);
}
.r4x-header--light .hamburger-menu a{color:rgba(240,237,228,0.72);}
.r4x-header--light .hamburger-menu a:hover{background:rgba(255,255,255,0.055);color:#f0ede4;}
.r4x-header--light .hamburger-group-title{color:rgba(240,237,228,.62);}
.r4x-header--light .hamburger-group-title.is-current{color:rgba(245,210,122,.88);}
.r4x-header--light .hamburger-group-title--link:hover{color:#fff;}
.r4x-header--light .hamburger-sep{border-top-color:rgba(255,255,255,.08);}
.r4x-header--light .hamburger-menu a.is-current{background:rgba(212,175,55,.14);color:#f5d27a;}
.r4x-header--light .hamburger-close-btn{
  border-color:rgba(245,210,122,.24);
  background:rgba(9,11,18,.9);
  color:rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.r4x-header--light .hamburger-close-btn:hover{border-color:rgba(245,210,122,.42); color:#fff; background:rgba(18,20,28,.96);}

.hamburger-current-tool{display:block !important;padding:0 11px 10px 26px !important;margin-top:-2px;background:transparent !important;border-radius:0 !important;color:#f0a43a !important;font-size:11px !important;line-height:1.15 !important;font-weight:600 !important;letter-spacing:.01em;text-decoration:none !important;}
.r4x-header--light .hamburger-current-tool,.r4x-header--dark .hamburger-current-tool{color:#f0a43a !important;}


/* r4x-v209-beginner-start-link shared hamburger spacing polish */
.hamburger-menu .hamburger-subnav.is-current{
  background: rgba(212,175,55,.14);
  color: #f5d27a;
  font-weight:600;
  padding: 7px 11px 6px !important;
  border-radius: 10px;
}
.hamburger-menu .hamburger-current-tool{
  display:block !important;
  padding:1px 11px 10px 26px !important;
  margin-top:2px;
  background:transparent !important;
  border-radius:0 !important;
  color:#f0a43a !important;
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:600 !important;
  letter-spacing:.01em;
  text-decoration:none !important;
}


/* r4x-v209-beginner-start-link beginner submenu in hamburger */
.hamburger-beginner-group{
  margin: 4px 0 8px;
  padding: 0 0 2px 0;
}
.hamburger-beginner-label{
  padding: 0 11px 8px 26px;
  color: #f0a43a;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: .01em;
}
.hamburger-beginner-list{
  display: grid;
  gap: 2px;
  padding: 0 0 0 18px;
}
.hamburger-menu a.hamburger-beginner-link{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 11px 8px 8px;
  border-radius: 10px;
  background: transparent;
  color: rgba(240,237,228,.72);
  font-size: 13px;
  line-height: 1.25;
}
.hamburger-menu a.hamburger-beginner-link:hover{
  background: rgba(255,255,255,.04);
  color: #f0ede4;
}
.hamburger-beginner-num{
  color: rgba(240,237,228,.45);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.hamburger-beginner-title{
  min-width: 0;
}
.hamburger-menu a.hamburger-beginner-link.is-current{
  background: transparent;
  color: #f0a43a;
  font-weight: 700;
}
.hamburger-menu a.hamburger-beginner-link.is-current .hamburger-beginner-num{
  color: #f0a43a;
}
.r4x-header--light .hamburger-beginner-label,
.r4x-header--dark .hamburger-beginner-label,
.r4x-header--light .hamburger-menu a.hamburger-beginner-link.is-current,
.r4x-header--dark .hamburger-menu a.hamburger-beginner-link.is-current,
.r4x-header--light .hamburger-menu a.hamburger-beginner-link.is-current .hamburger-beginner-num,
.r4x-header--dark .hamburger-menu a.hamburger-beginner-link.is-current .hamburger-beginner-num{
  color: #f0a43a;
}
.hamburger-plus-status{
  margin: 10px 0 8px;
  padding: 10px 11px;
  border: 1px solid rgba(245,210,122,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.hamburger-plus-status-label{
  color: rgba(240,237,228,.58);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.hamburger-plus-status-value{
  color: #f5d27a;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
}
.hamburger-plus-status.is-free .hamburger-plus-status-value{ color: rgba(240,237,228,.86); }
.hamburger-plus-status-link{
  display: inline-flex !important;
  padding: 0 !important;
  margin-top: 7px;
  color: #f5d27a !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.hamburger-plus-status-link:hover{ color:#fff2b5 !important; background:transparent !important; }


/* r4x-v286 hamburger layer and scroll lock
   Menu must sit above page/floating controls and the page background must not scroll while open. */
html.r4x-hamburger-open,
body.r4x-hamburger-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.r4x-hamburger-open::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:10980;
  background:rgba(0,0,0,.32);
  pointer-events:none;
}
.r4x-header{
  z-index:11000;
}
.r4x-header-right{
  z-index:11040;
}
.hamburger-btn{
  z-index:11060;
}
.hamburger-menu,
.hamburger-menu.open{
  z-index:11050!important;
}
body.r4x-hamburger-open .r4x-float-actions{
  z-index:10020!important;
}


/* r4x-v287: robust hamburger overlay positioning and scroll lock.
   The menu must remain visible after scrolling and must sit above glossary floating controls. */
body.r4x-hamburger-open.r4x-glossar-focus-mode .r4x-header,
html.r4x-hamburger-open body.r4x-glossar-focus-mode .r4x-header{
  display:flex!important;
}
html.r4x-hamburger-open .r4x-header,
body.r4x-hamburger-open .r4x-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:11100!important;
}
html.r4x-hamburger-open .hamburger-menu.open,
body.r4x-hamburger-open .hamburger-menu.open{
  position:fixed!important;
  top:calc(var(--r4x-shared-header-height, 88px) + 8px)!important;
  right:16px!important;
  left:auto!important;
  width:min(340px, calc(100vw - 24px))!important;
  max-height:calc(100dvh - var(--r4x-shared-header-height, 88px) - 20px)!important;
  overflow:auto!important;
  z-index:11120!important;
}
html.r4x-hamburger-open .hamburger-btn,
body.r4x-hamburger-open .hamburger-btn{
  z-index:11130!important;
}
body.r4x-hamburger-open .r4x-float-actions,
body.r4x-hamburger-open .r4x-float-search-panel,
body.r4x-hamburger-open .r4x-filter-drawer.is-open{
  z-index:10020!important;
}
@media(max-width:720px){
  html.r4x-hamburger-open .hamburger-menu.open,
  body.r4x-hamburger-open .hamburger-menu.open{
    top:calc(var(--r4x-shared-header-height, 68px) + 8px)!important;
    right:10px!important;
    width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - var(--r4x-shared-header-height, 68px) - 18px)!important;
  }
}


/* v312 · Shared header guard
   Header links must not inherit tool-level global anchor hover styles. */
.r4x-header a,
.r4x-header a:visited,
.r4x-header a:hover,
.r4x-header a:focus,
.r4x-header a:active,
.r4x-header .nav-btn,
.r4x-header .nav-btn:hover,
.r4x-header .hamburger-menu a,
.r4x-header .hamburger-menu a:hover {
  text-decoration: none !important;
}

.r4x-header .nav-btn:hover {
  transform: translateY(-1px);
}


/* ============================================================
   R4X Shared Footer – v312
   Two variants auto-injected by shared-header.v312.js
   .r4x-shared-footer            → dark theme
   .r4x-shared-footer--light     → light theme
   ============================================================ */

/* --- Dark footer (default) --- */
.r4x-shared-footer {
  position: relative;
  margin-top: 34px;
  padding: 24px 16px 18px;
  background: rgba(1, 1, 3, 0.98);
  color: rgba(245, 245, 247, 0.9);
  text-align: center;
  flex-shrink: 0;
}
.r4x-shared-footer::before {
  content: "";
  display: block;
  width: min(700px, calc(100% - 40px));
  height: 3px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}
.r4x-shared-footer-inner {
  max-width: 980px;
  margin: 0 auto;
}
.r4x-shared-footer-disclaimer {
  margin: 0 auto 12px;
  max-width: 980px;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  color: rgba(245, 245, 247, 0.95);
  text-wrap: balance;
}
.r4x-shared-footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  color: rgba(245, 245, 247, 0.95);
}
.r4x-shared-footer-copy { white-space: nowrap; }
.r4x-shared-footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.r4x-shared-footer a {
  color: rgba(245, 245, 247, 0.96);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.r4x-shared-footer a:hover { color: rgba(245, 245, 247, 1); }

/* --- Light footer modifier --- */
.r4x-shared-footer--light {
  background: transparent;
  color: #202020;
  margin-top: 26px;
  padding: 22px 16px 22px;
  border-top: none;
}
.r4x-shared-footer--light::before {
  background: #111111;
  width: min(520px, 72%);
  height: 4px;
}
.r4x-shared-footer--light .r4x-shared-footer-disclaimer {
  color: #303030;
}
.r4x-shared-footer--light .r4x-shared-footer-meta {
  color: #3a3a3a;
}
.r4x-shared-footer--light a {
  color: #3a3a3a;
  text-decoration: none;
}
.r4x-shared-footer--light a:hover { text-decoration: underline; }

/* --- Responsive --- */
@media (max-width: 640px) {
  .r4x-shared-footer { margin-top: 26px; padding: 22px 14px 16px; }
  .r4x-shared-footer::before { width: min(520px, calc(100% - 28px)); margin-bottom: 12px; }
  .r4x-shared-footer-disclaimer,
  .r4x-shared-footer-meta { font-size: 11px !important; line-height: 1.35 !important; }
  .r4x-shared-footer-copy { white-space: normal; }
}


/* ============================================================
   R4X Tool-Exit Confirmation Overlay – v314
   ============================================================ */
.r4x-exit-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.r4x-exit-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.r4x-exit-card {
  width: 100%;
  max-width: 360px;
  padding: 28px 24px 22px;
  border-radius: 20px;
  border: 1px solid rgba(245, 210, 122, .28);
  background: linear-gradient(160deg, rgba(18,22,30,.99), rgba(11,14,20,1));
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  text-align: center;
  transform: translateY(8px) scale(.97);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.r4x-exit-overlay.is-visible .r4x-exit-card {
  transform: translateY(0) scale(1);
}
.r4x-exit-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 12px;
}
.r4x-exit-title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f0ede4;
  letter-spacing: -.01em;
}
.r4x-exit-sub {
  margin: 0 0 22px;
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(220, 216, 206, .65);
}
.r4x-exit-actions {
  display: flex;
  gap: 10px;
}
.r4x-exit-btn-cancel {
  flex: 1;
  padding: .72rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(240,237,228,.85);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s;
}
.r4x-exit-btn-cancel:hover { background: rgba(255,255,255,.1); }
.r4x-exit-btn-leave {
  flex: 1;
  padding: .72rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(245,210,122,.35);
  background: linear-gradient(135deg, #d4af37, #c9a227);
  color: #0b0c0f;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .14s;
}
.r4x-exit-btn-leave:hover { opacity: .88; }