/* ─────────────────────────────────────────────────────────────
   egON skin: TOPBAR — chrome/layout only (faithful to the redesign).
   Palette/tokens from the shared base (colors_and_type.css,
   components.css) + per-mandant mandant.css. Ships no brand hex.
   Loaded after the base layers; wins by order for .egon-* rules.
   The user pill + Mitarbeiter group use Bootstrap dropdown JS.
   ───────────────────────────────────────────────────────────── */

.egon-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-subtle); }
.egon-rail  { width: 100%; max-width: 1188px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }

/* ── logo rail ─────────────────────────────────────────────── */
.egon-topbar { background: var(--bg-base); }
.egon-topbar__inner { display: flex; align-items: center; gap: 16px; height: 85px; }
.egon-logo {
  display: block; flex: none; width: 200px; height: var(--ci-logo-h, 32px);
  background: var(--ci-logo) left center / contain no-repeat;
  text-indent: -9999px; overflow: hidden;
}
.egon-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Kontakt icon button */
.egon-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--border-base); border-radius: var(--radius-md);
  background: var(--bg-base); color: var(--fg-subtle); text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.egon-icon-btn:hover { background: var(--bg-highlight); border-color: var(--border-interactive); color: var(--fg-interactive); text-decoration: none; }

/* ── user pill ─────────────────────────────────────────────── */
.egon-user { position: relative; }
.egon-user__pill {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 4px;
  border: 1px solid var(--border-base); border-radius: var(--radius-full);
  background: var(--bg-base); cursor: pointer; transition: background-color 120ms ease;
}
.egon-user__pill:hover,
.egon-user.open .egon-user__pill,               /* BS3 opens the .dropdown parent */
.egon-user__pill.show,                          /* BS5 opens the toggle */
.egon-user__pill[aria-expanded="true"] { background: var(--bg-subtle-hover); }
.egon-user__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: var(--radius-full);
  background: var(--brand-2); color: var(--fg-on-color);
  font: var(--fw-medium) 11px/1 var(--ci-font, var(--font-sans)); letter-spacing: .02em;
}
.egon-user__name { font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-base); }
.egon-user__rid  { font: var(--fw-regular) 12px/1 var(--font-sans); color: var(--fg-muted); }
.egon-user__pill .caret { color: var(--fg-muted); margin-left: 2px; }

/* user dropdown (Bootstrap .dropdown-menu, restyled) */
.egon-user__menu {
  padding: 6px; min-width: 232px; border: 1px solid var(--border-base); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-flyout); background: var(--bg-base);
}
.egon-user__menu > li > a, .egon-user__menu > li > .egon-user__logout {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md);
  font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); text-decoration: none;
}
.egon-user__menu > li > a .fa { color: var(--fg-subtle); width: 16px; text-align: center; }
.egon-user__menu > li > a:hover { background: var(--bg-highlight); color: var(--fg-interactive); }
.egon-user__menu > li > a:hover .fa { color: var(--fg-interactive); }
.egon-user__menu .divider { height: 1px; margin: 4px 0; overflow: hidden; background: var(--border-base); }
.egon-user__logout, .egon-user__logout .fa { color: var(--fg-error) !important; }
.egon-user__logout:hover { background: var(--tag-red-bg); }

/* ── main nav bar (secondary color) ────────────────────────── */
.egon-nav { background: var(--brand-2); }
.egon-nav .egon-rail { display: flex; align-items: stretch; }
.egon-nav__list { flex: 1 1 auto; display: flex; align-items: stretch; gap: 2px; }
.egon-nav__group { position: relative; display: flex; margin-left: auto; }

.egon-nav__link {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 11px; white-space: nowrap;
  font: var(--fw-regular) 13px/1 var(--font-sans); color: var(--nav-fg); text-decoration: none;
  background-image: linear-gradient(var(--nav-fg-active), var(--nav-fg-active));
  background-repeat: no-repeat; background-position: left bottom; background-size: 0 2px;
  transition: background-size 150ms ease, color 120ms ease;
  border: 0; cursor: pointer;
}
.egon-nav__link:hover, .egon-nav__link:focus { background-size: 100% 2px; color: var(--nav-fg-active); text-decoration: none; }
.egon-nav__link--active { color: var(--nav-fg-active); font-weight: var(--fw-medium); box-shadow: inset 0 -4px 0 0 var(--nav-fg-active); }
.egon-nav__link .caret { margin-left: 2px; }
.egon-nav__icon { flex: none; }

/* Mitarbeiter flyout (Bootstrap .dropdown-menu, restyled) */
.egon-nav__flyout {
  padding: 6px; min-width: 230px; border: 1px solid var(--border-base); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-flyout); background: var(--bg-base);
}
.egon-nav__flyout-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md);
  font: var(--fw-regular) 13px/20px var(--font-sans); color: var(--fg-base); text-decoration: none;
}
.egon-nav__flyout-link .egon-nav__icon { color: var(--fg-subtle); width: 16px; text-align: center; }
.egon-nav__flyout-link:hover { background: var(--bg-subtle-hover); color: var(--fg-base); text-decoration: none; }

/* ── content + footer ──────────────────────────────────────── */
.egon-content { flex: 1 0 auto; padding: 32px 0 56px; }
.egon-footer { background: var(--brand-2); color: var(--nav-fg); }
.egon-footer__inner {
	display: flex; align-items: center; flex-wrap: wrap; gap: 24px; padding: 20px 40px;
}
.egon-footer a { color: var(--nav-fg); text-decoration: none; }
.egon-footer a:hover { color: var(--nav-fg-active); text-decoration: underline; }
.egon-footer .col-footer {
	/* Each top-level footer-nav page renders as its own <ul> (TypoScript
	   HMENU, one wrapItemAndSub per item) -- col-sm-4 is a leftover BS3
	   grid class from before this became a flex row; at a real 33% width
	   each, 3 of them plus the container's own gap add up to more than
	   100%, so flex-wrap silently stacked them into a tall column instead
	   of the reference's single inline row. Content-sized, not grid-sized,
	   in this flex context. */
	list-style: none; padding: 0; margin: 0; width: auto; flex: 0 0 auto;
	display: flex; align-items: center; gap: 24px;
}
.egon-footer .col-footer > li { list-style: none; }
.egon-footer__copyright {
	order: -1; margin-right: auto; font: var(--fw-regular) 13px/1.4 var(--font-sans); opacity: .85; white-space: nowrap;
}

/* ── responsive ────────────────────────────────────────────── */
/* Nav wrap needs to start at 1023px, not 767px: between 768–1023px
   (tablet) .egon-nav__list has no wrap and no scroll fallback, so it
   overflows the rail and clips the trailing "Mitarbeiter" item off
   the edge of the screen. */
@media (max-width: 1023px) {
  .egon-nav .egon-rail { flex-wrap: wrap; }
  .egon-nav__list { flex-wrap: wrap; }
  .egon-nav__group { margin-left: 0; }
}
@media (max-width: 767px) {
  .egon-topbar__inner { height: auto; padding: 12px 0; flex-wrap: wrap; }
  .egon-rail { padding: 0 16px; }
}