/* Site header (Change Request 4 «Header», 29 Oct 2026), markup in partials/header.php, behaviour in
   assets/js/header.js. Desktop from 900 px: sticky white bar, 76 px, 1 px line #E6E6E6, no shadow.
   Below 900 px: 64 px bar with logo and burger; the burger opens the full-screen menu (.fd).
   --dot: colour of the logo dot (.cls-1) and of the active/hover underline. Area pages set data-bereich on <html>;
   neutral pages cycle the colour (header.js), grey without JavaScript or with reduced motion. */

:root { --dot: #7A7A7A; }
html[data-bereich="treuhand"] { --dot: #2A4FB0; }
html[data-bereich="versicherungen"] { --dot: #B42B3F; }
html[data-bereich="vermoegen"] { --dot: #D9B565; }
html[data-bereich="finanzierungen"] { --dot: #8DC63F; }

/* the old theme header was fixed (style.css: body padding-top 80px); this header is sticky in the flow */
html body { padding-top: 0 !important; }

.fh-logo { display: block; width: auto; height: 34px; fill: #1A1A1A; }
.fh-logo .cls-1 { fill: var(--dot, #7A7A7A); fill-rule: evenodd; transition: fill .8s ease; }

/* ------------------------------------------------------------------ bar */
.fh {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #FFFFFF;
  border-bottom: 1px solid #E6E6E6;
  box-shadow: none;
  text-align: left;
  font-family: 'Inter', Arial, sans-serif;
}
/* resets without specificity, so component classes (also navigation.css) always win */
:where(.fh, .fd) *, :where(.fh, .fd) *::before, :where(.fh, .fd) *::after { box-sizing: border-box; }
:where(.fh, .fd) ul { list-style: none; margin: 0; padding: 0; }
:where(.fh, .fd) li { margin: 0; }
:where(.fh__lang-btn, .fh__burger, .fd__close, .fd__head) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.fh__bar {
  position: relative;
  max-width: 1240px;
  height: 76px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.fh__home { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.fh__home:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 4px; border-radius: 4px; }

/* ------------------------------------------------------------------ navigation */
.fh__nav { margin: 0 auto; }
.fh__menu { display: flex; align-items: center; gap: 34px; }
.fh__item { position: relative; display: flex; align-items: center; height: 76px; }
.fh__item--mega { position: static; }
.fh__link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.fh__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--dot, #7A7A7A);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--m-dur) var(--m-ease);
}
.fh__link:hover, .fh__link:focus-visible, .fh__link.is-active { color: #1A1A1A; }
.fh__link:hover::after, .fh__link.is-active::after, .fh__item.is-open > .fh__link::after { transform: none; }
.fh__link:focus-visible, .fh__lang-btn:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 3px; border-radius: 2px; }

/* the word opens the panel; the chevron is part of it, and the underline stays under the word */
.fh__trigger { padding-right: 18px; }
.fh__trigger::after { right: 18px; }
.fh__trigger .fh__chev { position: absolute; right: 3px; top: 50%; margin-top: -3px; }
/* thin chevron (1.5 px), not a filled triangle */
.fh__chev { display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid #777777; border-bottom: 1.5px solid #777777; transform: translateY(-2px) rotate(45deg); transition: transform var(--m-dur-s) var(--m-ease); }
.fh__item.is-open > .fh__trigger .fh__chev, .fh__lang.is-open .fh__chev { transform: translateY(1px) rotate(225deg); }

/* simple dropdowns (Über uns, language) */
.fh__dd {
  position: absolute;
  top: calc(100% - 8px);
  left: -18px;
  z-index: 70;
  min-width: 230px;
  padding: 10px 0;
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--m-dur-s) var(--m-ease), visibility 0s linear var(--m-dur-s);
}
.fh__dd::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; } /* hover bridge */
.fh__item.is-open > .fh__dd, .fh__lang.is-open > .fh__dd { visibility: visible; opacity: 1; transition-delay: 0s; }
.fh__dd a {
  display: block;
  padding: 9px 18px;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.fh__dd a:hover, .fh__dd a:focus-visible { background: #F4F4F4; color: #1A1A1A; outline: none; }
.fh__dd a.is-active { font-weight: 600; box-shadow: inset 2px 0 0 var(--dot, #7A7A7A); }

/* mega menu: below the whole bar (styles of the panel itself in navigation.css) */
.fh__item--mega.is-open > .mm-panel { visibility: visible; opacity: 1; transition-delay: 0s; }

/* ------------------------------------------------------------------ right side */
.fh__right { display: flex; align-items: center; gap: 22px; flex: none; }
.fh__lang { position: relative; display: flex; align-items: center; height: 76px; }
.fh__lang-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; color: #666666; font-size: 13px; letter-spacing: .04em; }
.fh__dd--lang { left: auto; right: -12px; min-width: 170px; }
.fh__lang-name { color: #666666; margin-left: 6px; }
.fh__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 6px;
  background: #4D4D4D;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.fh__cta:hover, .fh__cta:focus-visible { background: #1A1A1A; color: #FFFFFF; }
.fh__cta:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }
.fh__burger { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.fh__burger span { display: block; width: 22px; height: 2px; background: #1A1A1A; border-radius: 1px; }
.fh__burger:focus-visible, .fd__close:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------ mobile (below 900 px) */
@media (max-width: 899.98px) {
  .fh__bar { height: 64px; padding: 0 16px; }
  .fh-logo { height: 28px; }
  .fh__nav, .fh__lang, .fh__right .fh__cta { display: none; }
  .fh__burger { display: inline-flex; margin-right: -10px; }
}

.fd {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--m-dur) var(--m-ease);
  font-family: 'Inter', Arial, sans-serif;
  text-align: left;
}
.fd[hidden] { display: none; }
.fd.is-open { transform: none; }
@media (min-width: 900px) { .fd { display: none !important; } }
html.fd-lock, html.fd-lock body { overflow: hidden !important; }
.fd__top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 6px 0 16px; border-bottom: 1px solid #E6E6E6; flex: none; }
.fd__top .fh-logo { height: 28px; }
.fd__close { position: relative; width: 44px; height: 44px; }
.fd__close span::before, .fd__close span::after { content: ""; position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; background: #1A1A1A; border-radius: 1px; transform: rotate(45deg); }
.fd__close span::after { transform: rotate(-45deg); }
.fd__nav { padding: 8px 16px 32px; }
.fd__item { border-bottom: 1px solid #E6E6E6; }
.fd__head, .fd__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 10px 0;
  color: #1A1A1A;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
}
.fd__head::after { content: ""; width: 7px; height: 7px; margin-right: 6px; border-right: 1.5px solid #777777; border-bottom: 1.5px solid #777777; transform: translateY(-2px) rotate(45deg); transition: transform var(--m-dur-s) var(--m-ease); }
.fd__head[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.fd__head.is-active, .fd__link.is-active { box-shadow: inset 3px 0 0 var(--dot, #7A7A7A); padding-left: 12px; }
.fd__head:focus-visible, .fd__link:focus-visible, .fd a:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }
.fd__panel { padding: 0 0 14px; }
.fd__sub a { display: flex; align-items: center; min-height: 44px; padding: 8px 0 8px 14px; color: #1A1A1A; font-size: 16px; text-decoration: none; }
.fd__sub a.is-active { font-weight: 600; }
.fd__cta { display: flex; width: 100%; height: 48px; margin: 24px 0 18px; font-size: 15px; }
.fd__langs { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; color: #666666; font-size: 15px; }
.fd__langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: #4D4D4D; text-decoration: none; letter-spacing: .04em; }
.fd__langs a.is-active { color: #1A1A1A; font-weight: 700; text-decoration: underline; text-decoration-color: var(--dot, #7A7A7A); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.fd__contact { display: flex; flex-direction: column; margin: 0; }
.fd__contact a { display: inline-flex; align-items: center; min-height: 44px; color: #1A1A1A; font-size: 16px; text-decoration: none; }

/* without JavaScript the dropdowns still open on hover and on keyboard focus (with it, header.js does this) */
html:not(.fh-js) .fh__item:hover > .fh__dd, html:not(.fh-js) .fh__item:focus-within > .fh__dd,
html:not(.fh-js) .fh__lang:hover > .fh__dd, html:not(.fh-js) .fh__lang:focus-within > .fh__dd,
html:not(.fh-js) .fh__item--mega:hover > .mm-panel, html:not(.fh-js) .fh__item--mega:focus-within > .mm-panel { visibility: visible; opacity: 1; transition-delay: 0s; }

/* A6: the scroll-to-top button is hidden while the mobile menu is open */
html.fd-lock .scroll-top { display: none !important; }