/* =====================================================
   NEW-EE JOBS — Chrome des Jobs-Hosts: Header, Mobilmenü,
   Login-Disclosure, Merkliste-Zähler, Footer (D-016, D-023).
   Markup: api/_utils/page-shell.js · Verhalten: assets/js/chrome.js.
   Lädt NACH editorial.css (www-geteilte Basis, dort unverändert)
   und jobs-home.css, VOR components/overlays.css (Z-Leiter).
   Höhe aus --ee-size-header (tokens.css); Header ist sticky,
   deshalb kein padding-top am Seitenkörper mehr.
   ===================================================== */

/* ===== Header ===== */
.ee-front .ee-header {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--ee-gray-200);
}
.ee-front .ee-nav { height: var(--ee-size-header); }
/* Sticky statt fixed: der Seitenkörper braucht keinen Platzhalter mehr (editorial.css setzt 72 px) */
.ee-front .ee-page-body { padding-top: 0; }
/* Anker-Ziele (#jobs, Fokusziele) landen nicht unter der Leiste */
html { scroll-padding-top: calc(var(--ee-size-header) + 1rem); }
.ee-front .ee-header.scrolled { box-shadow: 0 2px 16px rgba(24, 24, 27, 0.06); }
.ee-front .ee-logo img { height: 40px; }

.ee-front .ee-nav-link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ee-gray-600);
  padding: 0.4rem 0;
}
.ee-front .ee-nav-link:hover { color: var(--ee-gray-900); }
.ee-front .ee-nav-link[aria-current="page"] { color: var(--ee-red); }
.ee-front .ee-nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--ee-red);
}

/* „Einloggen" als ruhiger Sekundär-Button */
.ee-front .ee-nav-login__toggle {
  font-weight: 500;
  color: var(--ee-gray-700);
  background: var(--ee-white);
  border: 1px solid var(--ee-gray-200);
  border-radius: var(--ee-radius-control);
  padding: 0.5rem 1rem;
  transition: border-color var(--ee-transition), color var(--ee-transition);
}
.ee-front .ee-nav-login__toggle:hover,
.ee-front .ee-nav-login:focus-within .ee-nav-login__toggle {
  color: var(--ee-gray-900);
  border-color: var(--ee-gray-300);
}

.ee-front .ee-nav-cta,
.ee-front .ee-nav-link.ee-nav-cta {
  background: var(--ee-red);
  color: var(--ee-white);
  font-weight: 600;
  border-radius: var(--ee-radius-control);
  padding: 0.55rem 1.15rem;
  transition: background var(--ee-transition), transform var(--ee-transition);
}
.ee-front .ee-nav-cta:hover { background: var(--ee-red-hover); color: var(--ee-white); }
.ee-front .ee-nav-cta:active { transform: scale(0.98); }
.ee-front .ee-nav-cta::after { content: none; }

/* Merkliste-Zähler in Nav und Mobilmenü (chrome.js füllt [data-merkliste-count]) */
.ee-front .ee-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--ee-red);
  color: var(--ee-white);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.ee-front .ee-nav-count[hidden] { display: none; }

/* Login als Disclosure: öffnet nur per Klick/Enter (chrome.js), nicht bei Hover
   oder Fokus (1.4.13); editorial.css blendet das Menü per Hover ein – hier
   steuert allein das hidden-Attribut. */
.ee-front .ee-nav-login::after { content: none; }
.ee-front .ee-nav-login__menu { opacity: 1; visibility: visible; transform: none; transition: none; }
.ee-front .ee-nav-login__menu[hidden] { display: none; }
.ee-front .ee-nav-login:hover .ee-nav-login__toggle svg,
.ee-front .ee-nav-login:focus-within .ee-nav-login__toggle svg { transform: none; }
.ee-front .ee-nav-login__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ee-front .ee-nav-login__toggle[aria-expanded="true"] { color: var(--ee-gray-900); border-color: var(--ee-gray-300); }

/* Hamburger: 44 × 44 Zielfläche, Striche bleiben am rechten Rand ausgerichtet */
.ee-front .ee-hamburger {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: -10px;
  border-radius: var(--ee-radius-control);
}

/* Mobilmenü als Panel unter der Leiste: der Header ist sticky, das Menü
   überlagert den Inhalt statt ihn zu verschieben; 44-px-Zeilen */
.ee-front .ee-mobile-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100dvh - var(--ee-size-header));
  overflow: auto;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.13);
}
.ee-front .ee-mobile-link { display: block; padding: 0.5rem 0; margin: -0.5rem 0; }

/* ===== Footer (hell) ===== */
.ee-front .ee-footer { background: var(--ee-gray-50); border-top: 1px solid var(--ee-gray-200); color: var(--ee-gray-600); }
.ee-front .ee-footer-inner { background: none; padding: 3.5rem 0 0; }
.ee-front .ee-footer-tagline { color: var(--ee-gray-500); font-style: normal; font-family: var(--ee-sans); }
.ee-front .ee-footer-sub { color: var(--ee-gray-400); }
.ee-front .ee-footer-col h4 {
  color: var(--ee-gray-900);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.ee-front .ee-footer-links a { color: var(--ee-gray-500); font-size: 0.9rem; }
.ee-front .ee-footer-links a:hover { color: var(--ee-red); }
.ee-front .ee-footer-bottom {
  border-top: 1px solid var(--ee-gray-200);
  color: var(--ee-gray-400);
  margin-top: 3rem;
  padding: 1.5rem 0 2rem;
}
.ee-front .ee-footer-legal a { color: var(--ee-gray-500); }
.ee-front .ee-footer-legal a:hover { color: var(--ee-red); }
/* Textlinks im Footer: vertikales Padding am Inline-Element = 24-px-Zielfläche, Zeilenumbruch bleibt */
.ee-front .ee-footer-links a,
.ee-front .ee-footer-sub a { padding: 0.25rem 0; }
/* Legal-Links sind Flex-Items (blockifiziert): negative Ränder gleichen das Padding aus */
.ee-front .ee-footer-legal a { padding: 0.25rem 0; margin: -0.25rem 0; }