/* Erstes Licht – Kopfzeile und Hauptmenü genau wie auf der Website (seit V13, 6.11.2026).
   GEBAUT von werkzeuge/kopfzeile_aus_website.py aus /assets/css/site.css – hier nichts von Hand ändern,
   sondern in site.css der Website und das Skript neu laufen lassen. Die Farben der Website gelten nur in der Kopfzeile. */
@font-face { font-family: "LoraSite"; src: url("../assets/fonts/lora-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
.site-header {
  --night: #021a3c; --deep: #03234e; --royal: #074c91; --gold: #e7c376; --gold-hi: #f5d791; --gold-lo: #c9a152;
  --cream: #f3eedf; --mist: #c9c2ad; --line: rgba(231, 195, 118, .32); --veil: rgba(2, 26, 60, .86);
  --wide: 70rem; --gutter-l: max(16px, env(safe-area-inset-left, 0px)); --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  font-family: "LoraSite", "Lora", Georgia, serif; font-size: clamp(1.06rem, 1rem + .28vw, 1.19rem); line-height: 1.68; color: var(--cream);
}
.site-header ul { margin: 0; }
.site-header button { font: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding-left: var(--gutter-l); padding-right: var(--gutter-r); transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; }
.site-header.is-solid { background: var(--veil); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.site-header__inner { max-width: var(--wide); margin-inline: auto; display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--gold); text-decoration: none; font-weight: 600; letter-spacing: .01em; font-size: 1.02rem; white-space: nowrap; margin-right: auto; }
.brand img { width: 30px; height: 30px; }
.brand span { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.site-header.is-solid .brand span, .site-header--static .brand span { opacity: 1; transform: none; }
.nav { display: flex; align-items: center; gap: .3rem; }
.nav a { color: var(--cream); text-decoration: none; font-size: .95rem; padding: .4rem .7rem; border-radius: 999px; transition: color .2s ease, background-color .2s ease; }
.nav a:hover { color: var(--gold-hi); background: rgba(231, 195, 118, .08); }
.nav .nav__lang { border: 1px solid var(--line); color: var(--gold); font-size: .8rem; letter-spacing: .14em; font-weight: 600; padding: .32rem .7rem; }
@media (max-width: 680px) {
  .nav a.nav__opt { display: none; }
}
@media (max-width: 540px) {
  .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .brand span { transition: none; }
}
.langswitch { display: inline-flex; align-items: center; gap: .15rem; padding: .2rem .35rem .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(2, 26, 60, .35); font-size: .82rem; font-weight: 600; letter-spacing: .12em; }
.langswitch__globe { width: 1rem; height: 1rem; color: var(--gold); margin-right: .2rem; flex: none; }
.langswitch > span { color: var(--line); padding: 0 .05rem; }
.langswitch a { padding: .28rem .5rem; border-radius: 999px; color: var(--cream); text-decoration: none; line-height: 1; }
.nav .langswitch a { font-size: .82rem; padding: .28rem .5rem; }
.langswitch a[href]:hover { color: var(--gold-hi); background: rgba(231, 195, 118, .1); }
.langswitch a[aria-current] { background: var(--gold); color: var(--night); cursor: default; }
.nav .langswitch a[aria-current]:hover { background: var(--gold); color: var(--night); }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; }
.nav__list a { display: inline-block; white-space: nowrap; }
.nav__list a[aria-current="page"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold-lo); border-radius: 6px 6px 0 0; }
.nav__list a.nav__cta { border: 1px solid var(--gold-lo); color: var(--gold); margin-left: .35rem; }
.nav__list a.nav__cta:hover { background: var(--gold); color: var(--night); }
.site-header__inner > .langswitch { flex: none; }
.nav-toggle { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: rgba(2, 26, 60, .35); color: var(--gold); display: inline-grid; place-items: center; }
.nav-toggle[hidden] { display: none; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.1rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-open .nav-toggle__bars { background: transparent; }
.nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1121px) {
  .nav-toggle { display: none !important; }
  .brand span { display: none; }
}
@media (max-width: 1120px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-header__inner > .nav { order: 3; flex-basis: 100%; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .3rem 0 .9rem; }
  .nav__list a { display: block; padding: .75rem .4rem; border-radius: 8px; font-size: 1.05rem; }
  .nav__list li + li { border-top: 1px solid rgba(231, 195, 118, .14); }
  .nav__list a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); border-radius: 0 8px 8px 0; padding-left: .9rem; }
  .nav__list a.nav__cta { margin: .6rem 0 0; text-align: center; border-radius: 999px; }
  .nav__list li:last-child { border-top: 0; }
  .has-navjs .site-header__inner > .nav { display: none; }
  .has-navjs.nav-open .site-header__inner > .nav { display: block; }
  .nav-open .site-header { background: var(--veil); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
  .nav-open .site-header .brand span { opacity: 1; transform: none; }
}
@media (max-width: 420px) {
  .site-header__inner { gap: .5rem; }
  .langswitch__globe { display: none; }
}
.nav__sub { list-style: none; margin: 0; padding: 0; }
.nav__sub a { display: block; }
.nav__list a[aria-current="true"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold-lo); border-radius: 6px 6px 0 0; }
@media (max-width: 1120px) {
  .nav__list a[aria-current="true"] { box-shadow: inset 3px 0 0 var(--gold-lo); border-radius: 0 8px 8px 0; padding-left: .9rem; }
}
@media (min-width: 1121px) {
  .nav__item--sub { position: relative; }
  .nav__item--sub > a::after { content: ""; display: inline-block; width: .38em; height: .38em; margin: 0 0 .18em .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
  .nav__sub { position: absolute; top: 100%; left: 50%; z-index: 60; min-width: 100%; padding: .45rem; margin-top: .45rem; background: #041b3d; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
  .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
  .nav__item--sub:hover > .nav__sub, .nav__item--sub:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .nav__list .nav__sub a { padding: .55rem .95rem; border-radius: 8px; font-size: .92rem; text-align: center; }
  .nav__list .nav__sub a[aria-current="page"] { box-shadow: none; border-radius: 8px; background: rgba(231, 195, 118, .12); color: var(--gold); }
}
@media (max-width: 1120px) {
  .nav__sub { padding: 0 0 .35rem 1rem; }
  .nav__list .nav__sub li + li { border-top: 0; }
  .nav__list .nav__sub a { padding: .5rem .4rem .5rem .9rem; font-size: .95rem; color: var(--mist); border-left: 1px solid var(--line); border-radius: 0 8px 8px 0; }
  .nav__list .nav__sub a[aria-current="page"] { color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); border-left-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__sub { transition: none; }
}
@media (min-width: 1121px) {
  .nav a { padding: .4rem .6rem; }
}
@media (min-width: 1121px) and (max-width: 1260px) {
  .site-header__inner { gap: .6rem; }
  .nav__list { gap: 0; }
  .nav a { font-size: .9rem; padding: .4rem .5rem; }
  .nav__list a.nav__cta { margin-left: .2rem; }
  .langswitch__globe { display: none; }
}
@media (max-width: 1120px) {
  .has-navjs.nav-open .site-header__inner > .nav { max-height: calc(100vh - 3.6rem - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 3.6rem - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Nur in der App ---------- */
/* Sprachwahl: in der App Knöpfe statt Links, sonst wie auf der Website */
.langswitch button { padding: .28rem .5rem; border-radius: 999px; color: var(--cream); background: none; border: 0; cursor: pointer; line-height: 1; font-size: .82rem; font-weight: 600; letter-spacing: .12em; }
.langswitch button:hover { color: var(--gold-hi); background: rgba(231, 195, 118, .1); }
.langswitch button[aria-current] { background: var(--gold); color: var(--night); cursor: default; }
/* Die App läuft auf dem Handy auch bildschirmfüllend (unter der Statusleiste): Kopfzeile beginnt darunter */
.site-header { top: 0; padding-top: env(safe-area-inset-top, 0px); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: #e7c376; color: #021a3c; padding: .6em 1em; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }