/**
 * nav-greedy.css – jraduss.net
 * - Fixed, halbtransparenter Header (grau)
 * - Rechtsbündige Greedy-Navigation
 * - Buttons: aktiv blau/auf orange, inaktiv weiß/auf blau, Hover orange/auf blau
 * - Burger-Menü: gleiche Buttons wie in der Hauptnavigation (volle Breite)
 * - Modal/Popup (falls vorhanden) bleibt kompatibel
 */

:root{
  --jra-blue: #3a7cd4;     /* Corporate Blau */
  --jra-blue-dark: #2c68b6;
  --jra-orange: #f5a000;
  --jra-header-bg: rgba(30,34,46,.70);
  --jra-header-h: 84px;    /* wird von JS zur Laufzeit gesetzt */
  --jra-btn-h: 48px;       /* EINHEITLICHE BUTTON-HÖHE */
}

/* ===== Header fixed & transparent ===== */
.jra-nav{
  position: fixed; inset: 0 0 auto 0;
  height: var(--jra-header-h);
  z-index: 3000; /* hoch genug, um über Content zu liegen */
  background: var(--jra-header-bg);
  color:#fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.jra-nav__inner{
  height:100%;
  padding: 12px 20px;
  display:flex; align-items:center; gap:16px;
}

/* Logo groß links */
.jra-nav__logo{ flex:0 0 auto; }
.jra-nav__logo img{ display:block; height:100%; max-height:68px; }

/* Nav rechtsbündig */
.jra-nav__bar{ margin-left:auto; display:flex; align-items:center; gap:12px; position:relative; }

/* Sichtbare Liste, rechtsbündig */
.jra-nav__list{
  margin:0; padding:0; list-style:none;
  display:flex; align-items:center; gap:10px; white-space:nowrap;
}
.jra-nav__list--visible{ justify-content:flex-end; max-width:100%; }
.jra-nav__item{ flex:0 0 auto; display:flex; align-items:center; }

/* ======= BUTTONS (sichtbar) – harte Ausrichtung ======= */
.jra-nav__link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height: var(--jra-btn-h) !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;

  border-radius:10px;
  background: var(--jra-blue);
  color:#fff;
  text-decoration:none; font-weight:700;
  transition: color .12s ease, background .12s ease, box-shadow .12s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
.jra-nav__link:hover{ color: var(--jra-orange); background: var(--jra-blue); text-decoration:none; }
.jra-nav__link.is-active{
  background: var(--jra-orange);
  color: var(--jra-blue);
}
.jra-nav__link:active{ transform: none !important; }

/* Burger rechts */
.jra-nav__burger{
  width:46px; height:40px; border:0; background:transparent; color:#fff; cursor:pointer;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
}
.jra-nav__burger-bar{ position:absolute; width:24px; height:2px; background:currentColor; border-radius:2px; }
.jra-nav__burger-bar:nth-child(1){ transform: translateY(-8px); }
.jra-nav__burger-bar:nth-child(3){ transform: translateY(8px); }

/* Burger Button – gleiche Farben wie Nav-Buttons */
.jra-nav__burger {
  background: var(--jra-blue);
  color: #fff;
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}
.jra-nav__burger:hover {
  background: var(--jra-blue);
  color: var(--jra-orange);
}
.jra-nav__burger:active,
.jra-nav__burger[aria-expanded="true"] {
  background: var(--jra-orange);
  color: var(--jra-blue);
}

/* ===== Dropdown (Burger) ===== */
.jra-nav__dropdown{
  position:absolute; right:0; top: calc(100% + 10px);
  min-width:280px; max-width:min(92vw,460px);
  background: rgba(30,34,46,.98); color:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.35);
  padding:12px;
  z-index: 3001; /* über Content */
}
.jra-nav__dropdown[hidden]{ display:none !important; }

.jra-nav__list--hidden,
.jra-nav__list--legal{
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
}

.jra-nav__list--hidden .jra-nav__link,
.jra-nav__list--legal  .jra-nav__link{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height: var(--jra-btn-h) !important;
  padding: 0 14px !important;
  background: transparent !important;
  color:#fff !important;
  border-radius:10px;
  box-shadow: none !important;
  line-height:1 !important;
}
.jra-nav__list--hidden .jra-nav__link:hover,
.jra-nav__list--legal  .jra-nav__link:hover{
  background: transparent !important;
  color: var(--jra-orange) !important;
}
.jra-nav__list--hidden .jra-nav__link.is-active,
.jra-nav__list--legal  .jra-nav__link.is-active{
  background: transparent !important;
  color: var(--jra-orange) !important;
}

.jra-nav__sep{ border:0; border-top:1px solid rgba(255,255,255,.12); margin:10px 0; }

.jra-nav--lock body, .jra-nav--lock{ overflow:hidden; }
.jra-page{ padding-top: var(--jra-header-h); }

/* ===== Startseite: Hero (Text bleibt weiß) ===== */
.jra-hero{ position:relative; min-height:100svh; width:100%; overflow:hidden; }
.jra-hero__video, .jra-hero__video video{ position:absolute; inset:0; width:100%; height:100%; }
.jra-hero__video video{ object-fit:cover; }
.jra-hero__overlay{ position:absolute; inset:0; background: radial-gradient(120% 120% at 85% 10%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.75) 100%); }
.jra-hero__content{ position:relative; z-index:2; color:#fff; padding: calc(var(--jra-header-h) + 24px) 24px 24px; max-width:1200px; margin:0 auto; }
.jra-hero__title{ font-size: clamp(28px, 5vw, 56px); font-weight: 800; line-height:1.12; margin:0 0 12px 0; opacity:0; transform: translateY(10px); animation: jra-fadeUp .7s ease .2s forwards; }
.jra-hero__subtitle{ font-size: clamp(16px, 2.5vw, 22px); font-weight: 400; opacity:0; transform: translateY(10px); animation: jra-fadeUp .7s ease .35s forwards; }
@keyframes jra-fadeUp{ to{ opacity:1; transform:translateY(0); } }

/* ===== Modal / Popup ===== */
.jra-modal[hidden]{ display:none !important; }
.jra-modal{
  position: fixed; inset: 0; z-index: 2147483000;
}
.jra-modal__backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,.55);
  z-index: 2147483001;
}
.jra-modal__dialog{
  position: absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: min(900px, 92vw);
  max-height: 82vh;
  background: #fff; color:#111;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow: hidden; display:flex; flex-direction:column;
  z-index: 2147483002;
}
.jra-modal__close{
  position:absolute; right:8px; top:6px;
  width:36px; height:36px; border:0; border-radius:8px;
  background: transparent; font-size:24px; line-height:1;
  cursor:pointer;
}
.jra-modal__content{
  padding: 20px;
  overflow:auto;
}

.jra-modal__content { color:#111; }
.jra-modal__content h1,
.jra-modal__content h2,
.jra-modal__content h3 { color:#3a7cd4; margin: 0 0 .6em; }
.jra-modal__content ul { list-style: square; padding-left: 1.2em; }
.jra-modal__content li::marker { color:#3a7cd4; }

/* === FIXES === */

/* Close-Button blau / Hover orange */

.jra-modal__close {
  position:absolute;
  top:12px; right:12px;
  width:40px; height:40px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--jra-blue);
  font-size:22px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: background .2s ease, color .2s ease, transform .08s ease, box-shadow .15s ease;
  z-index:5;
}

.jra-modal__close:hover {
  background: var(--lk-orange);  /* gleiche Variable wie Leistungskatalog */
  color:#fff;
  box-shadow:0 0 0 3px #fff;
}

.jra-modal__close:active {
  transform:scale(.96);
}

.jra-modal__close:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(255,192,0,.55);
}

/* Dropdown über Content + Klickbar (unter Header) */
.jra-nav__dropdown{
  position: fixed !important;
  right: 24px !important;
  top: calc(var(--jra-header-h) + 10px) !important;
  z-index: 9999 !important;           /* unter Header, über Overlay */
}
.jra-nav{ z-index: 10000 !important; } /* Header ganz oben in der Nav-Schicht */

/* NAV-Overlay: beginnt UNTER dem Header und liegt unterhalb von Dropdown */
.jra-nav__overlay{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--jra-header-h) !important; /* Start unter Header */
  bottom: 0 !important;
  background: transparent !important;
  z-index: 9998 !important;            /* unter Dropdown & Header */
}

/* Burger garantiert klickbar */
.jra-nav__burger{
  position: relative !important;
  z-index: 10001 !important;           /* über Dropdown (9999) und Overlay (9998) */
  pointer-events: auto !important;
}

/* Page-Overlays entschärfen */
main, .jra-page{
  position: relative !important;
  z-index: 0 !important;
}
main::before, main::after,
.jra-page::before, .jra-page::after{
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Hero-Overlay neutralisieren */
.jra-hero, .jra-hero__overlay, .jra-hero__content{
  position: relative !important;
  z-index: 0 !important;
}

/* Modal immer ganz oben */
.jra-modal{ z-index: 2147483000 !important; position: fixed !important; inset: 0 !important; }
.jra-modal__backdrop{ z-index: 2147483001 !important; }
.jra-modal__dialog{ z-index: 2147483002 !important; }

/* Close-Button: Hover orange + blaue Schrift */
.jra-modal__close{
  color: var(--jra-blue) !important;
  background: transparent !important;
  transition: background .2s ease, color .2s ease;
}
.jra-modal__close:hover{
  background: var(--jra-orange) !important;
  color: var(--jra-blue) !important; /* blaues „x“ beim Hover */
}

/* NAV: Buttons exakt gleich hoch & mittig ausgerichtet */
.jra-nav__list{ align-items: center !important; }
.jra-nav__link{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;           /* gleiche Höhe */
  padding: 0 16px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* ===== NAV: Buttons optisch angleichen (nur Darstellung) ===== */
.jra-nav__list{ align-items: center !important; }

.jra-nav__link{
  height: 48px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Overlay soll niemals über dem Header liegen */
.jra-nav__overlay {
  position: fixed !important;
  top: var(--jra-header-h) !important; /* unterhalb der Nav starten */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: transparent !important;
  z-index: 2000 !important; /* unterhalb von Header und Burger */
}