.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 50;
  padding: .7rem 1rem;
  background: var(--hell); color: var(--ink);
  font: 600 var(--s2) / 1 var(--sans);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .3s var(--expo);
}
.skip-link:focus-visible { transform: none; outline: 2px solid var(--volt); outline-offset: 2px; }

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: .8rem var(--rand) .75rem;
  border-bottom: 1px solid var(--linie);
  color: var(--hell);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.kopf .logo {
  font: 700 var(--s3) / 1 var(--sans);
  letter-spacing: -.045em;
  color: var(--hell);
  text-decoration: none;
  padding: .35rem 0;
}
.kopf .logo:hover { color: var(--volt); }
.kopf .logo:focus-visible { outline: 2px solid var(--volt); outline-offset: 4px; }
.kopf .logo:active { color: var(--schild); }
.kopf .kopf-ort { margin: 0 auto 0 0; white-space: nowrap; }


.kopf-nav ul { display: flex; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.kopf-nav a {
  position: relative;
  display: inline-block;
  padding: .55rem 0;
  font: 500 var(--s1) / 1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--schild);
  text-decoration: none;
}
.kopf-nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--expo);
}
.kopf-nav a:hover, .kopf-nav a:focus-visible, .kopf-nav a[aria-current="page"] { color: var(--hell); }
.kopf-nav a:hover::after, .kopf-nav a:focus-visible::after, .kopf-nav a[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}
.kopf-nav a[aria-current="page"]::after { background: var(--volt); height: 2px; }
.kopf-nav a:focus-visible { outline: 2px solid var(--volt); outline-offset: 4px; }
.kopf-nav a:active { color: var(--volt); }


.kopf-menue {
  display: none;
  align-items: center;
  gap: .55rem;
  min-height: 2.25rem;
  padding: .45rem .7rem;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--hell);
  font: 500 var(--s1) / 1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative; isolation: isolate;
}

.kopf-menue::before, .ruhe-schalter::before {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  background: var(--volt);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .45s var(--expo);
}
.kopf-menue-zeichen { position: relative; width: 14px; height: 9px; }
.kopf-menue-zeichen i {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor;
  transition: transform .5s var(--expo);
}
.kopf-menue-zeichen i:first-child { top: 0; }
.kopf-menue-zeichen i:last-child { bottom: 0; }
.kopf-menue[aria-expanded="true"] .kopf-menue-zeichen i:first-child { transform: translateY(3.75px) rotate(45deg); }
.kopf-menue[aria-expanded="true"] .kopf-menue-zeichen i:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.kopf-menue:hover, .kopf-menue:focus-visible, .kopf-menue:active, .kopf-menue[aria-expanded="true"] { color: var(--ink); }
.kopf-menue:hover::before, .kopf-menue:focus-visible::before { transform: scaleY(1); }
.kopf-menue:focus-visible { outline: 2px solid var(--hell); outline-offset: 3px; }
.kopf-menue:active::before, .kopf-menue[aria-expanded="true"]::before { background: var(--hell); transform: scaleY(1); }


.ruhe-schalter {
  min-height: 2.25rem;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--schild);
  padding: .5rem .8rem;
  white-space: nowrap;
  cursor: pointer;
  position: relative; isolation: isolate;
}
.ruhe-schalter:hover, .ruhe-schalter:focus-visible, .ruhe-schalter:active, html.ruhe .ruhe-schalter { color: var(--ink); }
.ruhe-schalter:hover::before, .ruhe-schalter:focus-visible::before { transform: scaleY(1); }
.ruhe-schalter:focus-visible { outline: 2px solid var(--hell); outline-offset: 3px; }
.ruhe-schalter:active::before { background: var(--hell); transform: scaleY(1); }
html.ruhe .ruhe-schalter::before { background: var(--schild); transform: scaleY(1); }
html.ruhe .ruhe-schalter:hover::before, html.ruhe .ruhe-schalter:focus-visible::before { background: var(--volt); }


@media (max-width: 1279.98px) {
  .kopf .kopf-ort { display: none; }
  .kopf .logo { margin-right: auto; }
  .kopf-nav ul { gap: 1.25rem; }
}


@media (max-width: 1023.98px) {
  .kopf { gap: .7rem; }
  .kopf-menue { display: inline-flex; }
  .kopf-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: calc(100dvh - var(--kopf-h, 3.6rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.2rem var(--rand) 2.5rem;
    background: var(--ink);
    border-bottom: 1px solid var(--linie);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1);
  }
  .kopf.offen .kopf-nav, .kopf.schliesst .kopf-nav { visibility: visible; }
  .kopf.offen .kopf-nav { clip-path: inset(0 0 0 0); }
  .kopf::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1px;
    background: var(--hell); pointer-events: none;
    opacity: 0;
    transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .15s linear 1s;
  }
  .kopf.offen::after {
    opacity: 1;
    transform: translateY(calc(100dvh - var(--kopf-h, 3.6rem) - 1px));
    transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity 0s;
  }
  .kopf-nav ul { display: block; counter-reset: port; }
  .kopf-nav li { border-top: 1px solid var(--linie); counter-increment: port; }
  .kopf-nav li:last-child { border-bottom: 1px solid var(--linie); }
  
  .kopf-nav a {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    width: 100%;
    padding: 1.15rem 0;
    font: 600 clamp(1.7rem, 7vw, 2.6rem) / 1.05 var(--sans);
    letter-spacing: -.03em;
    text-transform: none;
    color: var(--hell);
    opacity: 0;
    transform: translateY(.6rem);
    transition: opacity .5s var(--expo), transform .8s var(--expo);
  }
  .kopf-nav a::before {
    content: counter(port, decimal-leading-zero);
    font: 500 var(--s1) / 1 var(--mono);
    letter-spacing: .1em;
    color: var(--grau);
  }
  .kopf-nav a::after { bottom: 0; }
  .kopf.offen .kopf-nav a { opacity: 1; transform: none; }
  .kopf.offen .kopf-nav li:nth-child(2) a { transition-delay: .05s; }
  .kopf.offen .kopf-nav li:nth-child(3) a { transition-delay: .1s; }
  .kopf.offen .kopf-nav li:nth-child(4) a { transition-delay: .15s; }
  .kopf.offen .kopf-nav li:nth-child(5) a { transition-delay: .2s; }
  .kopf-nav a:hover, .kopf-nav a:focus-visible { color: var(--volt); }
  .kopf-nav a[aria-current="page"]::before { color: var(--volt); }
  .kopf-nav a:focus-visible { outline-offset: -2px; }
  html.kopf-offen { overflow: hidden; }
}

@media (max-width: 520px) {
  .kopf { gap: .45rem; padding: .6rem var(--rand); }
  
  .kopf .kopf-menue, .kopf .ruhe-schalter { padding: .45rem .55rem; font-size: 11px; letter-spacing: .04em; }
  .kopf-menue-text { font-size: 11px; }
  
  .kopf .ruhe-schalter { font-size: 0; }
  .kopf .ruhe-schalter::after { content: 'Pause'; font-size: 11px; }
  html.ruhe .kopf .ruhe-schalter::after { content: 'Weiter'; }
}

@media (max-width: 400px) {
  .kopf-menue-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kopf-menue { min-width: 2.25rem; justify-content: center; }
}


@media (prefers-reduced-motion: reduce) {
  .kopf-nav, .kopf-nav a, .kopf-menue-zeichen i, .kopf-nav a::after, .skip-link,
  .kopf-menue::before, .ruhe-schalter::before, .kopf::after { transition: none !important; }
}
html.ruhe .kopf-nav, html.ruhe .kopf-nav a, html.ruhe .kopf-menue-zeichen i, html.ruhe .kopf-nav a::after,
html.ruhe .kopf-menue::before, html.ruhe .ruhe-schalter::before, html.ruhe .kopf::after { transition: none !important; }