/* Kopfzeile – identisch für Website und App (App lädt diese Datei zusätzlich; Website nutzt site.css + Sprach-Dropdown von hier) */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-paper); border-bottom: var(--rule); }
.site-header__bar { max-width: var(--container); margin: 0 auto; padding: 1.125rem var(--gutter); display: flex; align-items: center; gap: var(--space-xl); }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--color-navy); flex: none; }
.brand__mark { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: var(--color-navy); display: grid; place-items: center; }
.brand__mark svg { width: 1.375rem; height: 1.375rem; stroke: var(--color-on-navy-strong); }
.brand__name { font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.01em; white-space: nowrap; }
.mainnav { flex: 1; display: flex; justify-content: center; }
.mainnav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.75rem; }
.mainnav__link { font-weight: 600; font-size: var(--text-sm); text-decoration: none; color: var(--color-navy); white-space: nowrap; background: none; border: 0; padding: var(--space-xs) 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 0.25rem; }
.mainnav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-accent); }
.mainnav__link:hover { color: var(--color-navy-hover); }
.dropdown { position: relative; }
.dropdown__caret { width: 0.75rem; height: 0.75rem; transition: transform var(--dur-base) var(--ease-out); }
.dropdown[data-open] .dropdown__caret { transform: rotate(180deg); }
.dropdown__panel { position: absolute; top: calc(100% + 0.5rem); left: 50%; translate: -50% 0; min-width: 15rem; background: var(--color-paper); border: var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: var(--space-xs); list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); }
.dropdown[data-open] .dropdown__panel { opacity: 1; visibility: visible; transform: none; }
.dropdown__panel a { display: block; padding: 0.625rem 0.875rem; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.dropdown__panel a:hover, .dropdown__panel a:focus-visible { background: var(--color-paper-2); }
.header-actions { display: flex; align-items: center; gap: var(--space-lg); flex: none; }
.langs { display: flex; gap: 0.625rem; font-size: var(--text-xs); font-weight: 700; }
.langs a { text-decoration: none; color: var(--color-muted); padding: 0.125rem; }
.langs a[aria-current="true"] { color: var(--color-navy); box-shadow: inset 0 -2px 0 var(--color-accent); }
.header-login { font-weight: 600; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.menu-btn { display: none; margin-left: auto; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); border: var(--rule); background: var(--color-paper); color: var(--color-navy); cursor: pointer; place-items: center; }
.menu-btn svg { width: 1.375rem; height: 1.375rem; }
@media (max-width: 75rem) {
  .site-header__bar { flex-wrap: wrap; gap: var(--space-md); }
  .menu-btn { display: grid; }
  .mainnav, .header-actions { display: none; width: 100%; }
  .site-header[data-open] .mainnav, .site-header[data-open] .header-actions { display: flex; }
  .site-header[data-open] .site-header__bar { padding-bottom: var(--space-lg); }
  .mainnav { justify-content: flex-start; }
  .mainnav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .mainnav__list > li { border-bottom: var(--rule); }
  .mainnav__link { width: 100%; padding: 0.875rem 0; font-size: var(--text-base); justify-content: space-between; }
  .dropdown__panel { position: static; translate: none; transform: none; box-shadow: none; border: 0; padding: 0 0 var(--space-sm) var(--space-md); display: none; opacity: 1; visibility: visible; min-width: 0; }
  .dropdown[data-open] .dropdown__panel { display: block; }
  .header-actions { justify-content: space-between; flex-wrap: wrap; padding-top: var(--space-sm); }
}
.brand__logo { display: block; height: 2.75rem; width: auto; }
.site-footer__logo { display: block; height: 3rem; width: auto; margin-bottom: var(--space-md); }
@media (max-width: 40rem) { .brand__logo { height: 2.25rem; } }
.mainnav__list { gap: 1.25rem; }
@media (max-width: 86rem) and (min-width: 75.01rem) { .mainnav__list { gap: 0.875rem; } .mainnav__link { font-size: 0.875rem; } }

/* Sprachwahl: Dropdown mit Flaggen */
.lang-dd { position: relative; }
.lang-dd > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.5rem; border: var(--rule); border-radius: var(--radius-pill); background: var(--color-paper); cursor: pointer; }
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd > summary:hover { border-color: var(--color-navy); }
.lang-dd > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lang-dd .flag { display: block; width: 1.375rem; height: 0.9375rem; border-radius: 0.1875rem; box-shadow: 0 0 0 1px var(--color-line); }
.lang-dd__caret { width: 0.75rem; height: 0.75rem; color: var(--color-muted); transition: transform var(--dur-base) var(--ease-out); }
.lang-dd[open] .lang-dd__caret { transform: rotate(180deg); }
.lang-dd__menu { position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 60; list-style: none; margin: 0; padding: 0.375rem; display: grid; gap: 0.125rem; background: var(--color-paper); border: var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
.lang-dd__menu a { display: grid; place-items: center; padding: 0.5rem 0.625rem; border-radius: var(--radius-sm); }
.lang-dd__menu a:hover, .lang-dd__menu a:focus-visible { background: var(--color-paper-2); outline: none; }
.lang-dd__menu a[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .lang-dd__caret { transition: none; } }