/* Kopfzeile: liegt über dem Startvideo, scrollt mit */
.kopf { position: absolute; top: 0; left: 0; right: 0; height: calc(146 * var(--e)); z-index: 20; transition: background-color .3s; }
.js .kopf { position: fixed; }
html.js { scroll-padding-top: calc(146 * var(--e)); }
.kopf.kopf-fest { background-color: var(--dunkel); }

.kopf-nav { position: absolute; left: calc(154 * var(--e)); top: calc(50% - 23.5px); }
.kopf-nav ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kopf-nav a { display: flex; align-items: center; height: 35px; padding: 0 10px; color: #fff; font-family: var(--schrift-light); font-size: 14px; text-decoration: none; letter-spacing: .02em; transition: color .2s; }
.kopf-nav a:hover, .kopf-nav a:focus-visible { color: var(--akzent); }

.sprachen { position: absolute; left: max(calc(50% + 29 * var(--e) - 100px), calc(154 * var(--e) + var(--nav-b) + 16px)); top: 50%; transform: translateY(-50%); display: flex; align-items: center; }
.sprachen a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.sprachflagge { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.sprachen a.aktiv .sprachflagge { outline: 2px solid var(--akzent); outline-offset: 3px; }
.sprachen a:hover .sprachflagge { outline: 2px solid #fff; outline-offset: 3px; }

.logo { position: absolute; left: calc(1451 * var(--e)); top: calc(19 * var(--e)); width: calc(380 * var(--e)); height: calc(107 * var(--e)); color: #fff; text-decoration: none; }
.logo-bild { position: absolute; left: 0; top: 0; width: calc(338 * var(--e)); height: 100%; }
.logo-bild svg { width: 100%; height: 100%; }
.logo-zusatz { position: absolute; left: calc(245 * var(--e)); top: calc(16 * var(--e)); display: flex; flex-direction: column; font-family: var(--schrift-book); font-size: calc(18 * var(--e)); line-height: 1.4; white-space: nowrap; }

/* Varianten je Bildschirmgrösse (Desktop zeigt nur «gross») */
.v-tablet, .v-handy, .start-welle-tablet, .start-welle-handy { display: none; }

/* Menü-Knopf (nur Tablet/Handy) und Menü-Ebene */
.menue-knopf { display: none; position: absolute; width: 35px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: space-between; }
.menue-knopf span { display: block; height: 2px; background: #fff; }
.menue-handy { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--dunkel); }
.menue-handy[hidden] { display: none; }
.menue-kopf { position: relative; height: 60px; }
.sprachen-menue { left: 7px; top: 8px; transform: none; }
.menue-schliessen { position: absolute; right: 16px; top: 8px; width: 40px; height: 40px; padding: 8px; border: 0; background: none; color: #fff; cursor: pointer; }
.menue-schliessen svg { width: 24px; height: 24px; }
.menue-logo { position: relative; display: block; width: 330px; max-width: 86vw; height: 97px; margin: 0 auto; color: #fff; text-decoration: none; }
.menue-logo .logo-bild { position: absolute; left: 0; top: 0; width: 87%; height: 100%; }
.menue-logo .logo-bild svg { width: 100%; height: 100%; }
.menue-logo .logo-zusatz { position: absolute; left: 59%; top: 24px; display: flex; flex-direction: column; font-family: var(--schrift-book); font-size: 13px; line-height: 1.4; }
.menue-handy nav ul { margin: 36px 0 0; padding: 0; list-style: none; text-align: center; }
.menue-handy nav a { display: inline-block; padding: 12px 16px; color: #fff; font-family: var(--schrift-light); font-size: 17px; letter-spacing: .02em; text-decoration: none; }
.menue-handy nav a.aktiv, .menue-handy nav a:hover { color: var(--akzent); }
body.menue-offen { overflow: hidden; }