/*
 * Alienhunter – Kopf- und Fußbereich passend zur Jobbörse (Kind-Template von Cassiopeia).
 * Eigene Anpassungen am besten unten anhängen.
 */
@font-face { font-family: "Bricolage Grotesque"; src: url("../../../../com_jobboard/fonts/BricolageGrotesque-Variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../../../../com_jobboard/fonts/InstrumentSans-Variable.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../../../../com_jobboard/fonts/JetBrainsMono-Variable.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }

:root {
  --cassiopeia-color-primary: #0c1230;
  --cassiopeia-color-link: #c4520a;
  --cassiopeia-color-hover: #ff7a1a;
}
body.site { background: #f5f6fb; font-family: "Instrument Sans", "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.container-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 18, 48, .86) !important;
  background-image: none !important;
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: none;
}
.container-header .grid-child { max-width: 1200px; }
.container-header .navbar-brand { padding-block: 10px; }
.container-header .brand-logo { color: #fff; font: 800 1.35rem/1 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -.03em; text-decoration: none; }
.container-header .site-description { color: #ff7a1a; font: 500 .7rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }

.container-header .container-nav { padding-block: 6px; }
.container-header .mod-menu { gap: 2px; }
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  position: relative; color: #c9cff0; font-weight: 600; font-size: .92rem;
  padding: .7em .95em; border-radius: 999px; text-decoration: none;
  transition: color .2s, background .2s;
}
.container-header .mod-menu > li > a::after {
  content: ""; position: absolute; left: .95em; right: .95em; bottom: .35em; height: 2px; border-radius: 2px;
  background: #ff7a1a; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a { color: #fff; background: rgba(255, 255, 255, .06); }
.container-header .mod-menu > li > a:hover::after,
.container-header .mod-menu > li.active > a::after { transform: scaleX(1); }
.container-header .navbar-toggler { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* Komponente randlos unter dem Kopf */
.site-grid .com-jobboard, .site-grid > .grid-child.container-component { min-width: 0; }

.container-footer { background: #0c1230 !important; background-image: none !important; color: #a9b1d9; }
.container-footer a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .container-header .mod-menu > li > a::after { transition: none; }
}

/* Startseite der Jobbörse: Hero direkt unter dem Kopf, ohne Abstand */
.site-grid:has(.jb-hero) { row-gap: 0; }
.com-jobboard.view-start .site-grid, .com-jobboard .container-component { padding-top: 0; }

/* Bewerbungs-Generator im Jobbörse-Design */
.jb-generator .bg-generator__heading { display: none; }
.jb-generator .bg-generator__intro { color: var(--jb-muted); max-width: 70ch; }
.jb-generator .bg-step, .jb-generator .bg-result { border: 1px solid var(--jb-line); border-radius: var(--jb-r-l); box-shadow: var(--jb-shadow); overflow: hidden; }
.jb-generator .bg-step .card-body, .jb-generator .bg-result .card-body { padding: clamp(18px, 3vw, 28px); }
.jb-generator .bg-step__title { font-family: var(--jb-display); font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; gap: 12px; }
.jb-generator .bg-step__no { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--jb-ink); color: #fff; font: 800 1rem/1 var(--jb-display); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jb-signal) 30%, transparent); }
.jb-generator .form-control, .jb-generator .form-select { border-radius: 12px; border: 1.5px solid var(--jb-line); background-color: var(--jb-paper); min-height: 48px; }
.jb-generator .form-control:focus, .jb-generator .form-select:focus { border-color: var(--jb-signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--jb-signal) 18%, transparent); background-color: #fff; }
.jb-generator .btn-primary { background: var(--jb-signal); border-color: var(--jb-signal); color: #1a0d00; border-radius: 999px; font-weight: 600; padding: .8em 1.4em; }
.jb-generator .btn-primary:hover { background: #ff8e3c; border-color: #ff8e3c; color: #1a0d00; }
.jb-generator .btn-outline-primary, .jb-generator .btn-outline-secondary { border-radius: 999px; }

/* Dropdown-Menü (Cassiopeia „collapse-metismenu“) im dunklen Kopf */
.container-header .metismenu.mod-menu .metismenu-item { padding: 0; font-size: 1rem; }
.container-header .metismenu.mod-menu .metismenu-item > a:hover,
.container-header .metismenu.mod-menu .metismenu-item.active > a { text-decoration: none; }
.container-header .metismenu .mm-toggler { color: #c9cff0; background: transparent; border: 0; padding: .4em .5em; }
.container-header .metismenu .mm-toggler:hover { color: #fff; }
.container-header .metismenu.mod-menu .mm-collapse {
  background: rgba(12, 18, 48, .97); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
  padding: 6px; min-width: 14rem; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .6);
}
.container-header .metismenu.mod-menu .mm-collapse > li { padding: 0; }
.container-header .metismenu.mod-menu .mm-collapse a {
  display: block; width: 100%; padding: .65em .95em; border-radius: 10px; color: #c9cff0;
  font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap;
}
.container-header .metismenu.mod-menu .mm-collapse a::after { content: none; }
.container-header .metismenu.mod-menu .mm-collapse a:hover,
.container-header .metismenu.mod-menu .mm-collapse .active > a { background: rgba(255, 255, 255, .08); color: #fff; }
.container-header .navbar-toggler { color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; }
@media (max-width: 991.98px) {
  .container-header .metismenu.mod-menu .mm-collapse { position: static; box-shadow: none; background: rgba(255, 255, 255, .04); }
}

/* Logo im Kopfbereich */
.container-header .brand-logo img { display: block; height: 48px; width: auto; max-width: 70vw; }
.container-header .brand-logo:hover img { filter: drop-shadow(0 0 12px rgba(62, 230, 193, .35)); }
@media (max-width: 640px) { .container-header .brand-logo img { height: 38px; } }

/* Anmelden / Abmelden als Button rechts im Menü */
.container-header .mod-menu > li:has(> a.jb-menu-btn) { margin-left: auto; }
.container-header .mod-menu > li:has(> a.jb-menu-btn) ~ li:has(> a.jb-menu-btn) { margin-left: 0; }
.container-header .mod-menu > li > a.jb-menu-btn {
  display: inline-flex; align-items: center; gap: .5em; padding: .65em 1.3em; border-radius: 999px;
  background: #ff7a1a; color: #1a0d00; font-weight: 700; box-shadow: 0 8px 22px -10px rgba(255, 122, 26, .9);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, background .25s;
}
.container-header .mod-menu > li > a.jb-menu-btn::before {
  content: ""; width: 1em; height: 1em; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.container-header .mod-menu > li > a.jb-menu-btn::after { content: none; }
.container-header .mod-menu > li > a.jb-menu-btn:hover { background: #ff8e3c; color: #1a0d00; transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(255, 122, 26, 1); }
.container-header .mod-menu > li > a.jb-menu-btn--ghost { background: transparent; color: #eef1ff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.container-header .mod-menu > li > a.jb-menu-btn--ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.container-header .mod-menu > li > a.jb-menu-btn--ghost::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11'/%3E%3C/svg%3E");
}
@media (max-width: 991.98px) {
  .container-header .mod-menu > li:has(> a.jb-menu-btn) { margin-left: 0; margin-top: 8px; }
}
@media (min-width: 992px) {
  .container-header .container-nav > nav.navbar,
  .container-header .container-nav .navbar-collapse { flex: 1 1 auto; }
  .container-header .container-nav .mod-menu { width: 100%; align-items: center; }
}