@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../vendor/schrift/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --kopf-h:      clamp(64px, calc(46px + 2.2vw), 88px);
  --kopf-rand:   clamp(22px, 5vw, 90px);
  --kopf-tinte:  #111113;
  --kopf-linie:  #e5e5e7;
  --spalte-w:    clamp(180px, 14.5vw, 280px);
  --kopf-schrift: "Helvetica Neue", Inter, Arial, sans-serif;
  --kopf-laufweite: -.022em;
  --kopf-kurve:  cubic-bezier(.22, 1, .36, 1);
  --kopf-schub:  cubic-bezier(.16, .68, .43, .99);
}

html{ scroll-padding-top: calc(var(--kopf-h) + 16px); }

@media (max-width: 1024px), (hover: none){
  :root{ --kopf-h: 60px; }
}
@media (max-width: 560px){
  :root{ --kopf-h: 56px; }
}

.kopf{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--kopf-h);
  font-family: var(--kopf-schrift);
  color: var(--kopf-tinte);
  transition: transform .38s var(--kopf-kurve), visibility 0s;
}
.kopf__leiste{
  position: relative; z-index: 2;
  box-sizing: border-box; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--kopf-rand);
}
.kopf__leiste::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-color: rgba(255,255,255,0);
  box-shadow: 0 1px 0 rgba(0,0,0,0);
  transition: background-color .35s ease, box-shadow .35s ease,
              -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}
.kopf.ist-gescrollt .kopf__leiste::before{
  background-color: rgba(255,255,255,.64);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
          backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: 0 1px 0 rgba(0,0,0,0);
}
.kopf.ist-offen .kopf__leiste::before,
.kopf.ist-menue .kopf__leiste::before{ background-color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0); }

html.kopf-weg .kopf{
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .38s var(--kopf-kurve), visibility 0s .38s;
}

.kopf__logo{ position: relative; z-index: 1; display: block; line-height: 0; text-decoration: none; }
.kopf__logo img{
  display: block; width: auto; max-width: none;
  height: 50px;
}
@media (min-width: 1025px) and (max-width: 1279px) and (hover: hover){
  .kopf__logo img{ height: 44px; }
}
.kopf__logo:focus-visible{ outline: 2px solid var(--kopf-tinte); outline-offset: 6px; border-radius: 3px; }

.kopf__sprache{
  position: relative; z-index: 1;
  padding: 10px 0 10px 10px;
  font-size: clamp(12px, .78vw, 15px); font-weight: 500; letter-spacing: .02em;
  line-height: 1;
  color: var(--kopf-tinte);
  text-decoration: none;
  opacity: .72;
  transition: opacity .22s ease;
}
.kopf__sprache:hover{ opacity: 1; }
.kopf__sprache:focus-visible{ outline: 2px solid var(--kopf-tinte); outline-offset: 2px; border-radius: 3px; opacity: 1; }

.kopf__vorlesen{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.kopf__punkte, .kopf__unter{ margin: 0; padding: 0; list-style: none; }
.kopf__punkt, .kopf__unter a{ text-decoration: none; color: var(--kopf-tinte); }

@media (min-width: 1025px) and (hover: hover){
  .kopf__nav{
    position: absolute; top: 0; left: 50%; height: 100%;
    transform: translateX(-50%);
  }
  .kopf__punkte{ display: flex; height: 100%; }
  .kopf__eintrag{ position: relative; display: flex; height: 100%; }
  .kopf__punkt{
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 100%;
    padding: 0 1.15em;
    font-size: clamp(13px, .885vw, 17px); font-weight: 400; letter-spacing: -.01em;
    white-space: nowrap;
    opacity: .82;
    transition: padding .35s var(--kopf-kurve), opacity .22s ease;
  }
  .kopf.ist-offen .kopf__punkt{ padding: 0 var(--auf-pad, 2em); opacity: 1; }
  .kopf__punkt:hover{ opacity: 1; }
  .kopf__punkt.is-hier{ opacity: 1; font-weight: 600; }
  .kopf__punkt:focus-visible{ outline: 2px solid var(--kopf-tinte); outline-offset: -14px; border-radius: 4px; }

  .kopf__eintrag::after{
    content: ''; position: absolute; z-index: 3; left: 50%; bottom: 0;
    width: 0; height: 2px;
    background: var(--kopf-tinte);
    transition: width .35s var(--kopf-kurve), left .35s var(--kopf-kurve);
    pointer-events: none;
  }
  .kopf.ist-offen .kopf__eintrag:hover::after,
  .kopf.ist-offen .kopf__eintrag:focus-within::after{ left: 0; width: 100%; }

  .kopf__auf, .kopf__knopf{ display: none; }

  .kopf__tafel{
    position: absolute; top: 0; left: 0; right: 0; z-index: 1;
    height: 0; overflow: hidden;
    background: #fff;
    pointer-events: none;
    transition: height .4s var(--kopf-kurve), box-shadow .4s ease;
  }
  .kopf__tafel::before{
    content: ''; position: absolute; left: 0; right: 0; top: var(--kopf-h);
    height: 1px; background: var(--kopf-linie);
    opacity: 0; transition: opacity .2s ease;
  }
  .kopf.ist-offen .kopf__tafel{
    height: calc(var(--kopf-h) + var(--spalte-h, 0px));
    box-shadow: 0 30px 50px -36px rgba(0,0,0,.22);
    pointer-events: auto;
  }
  .kopf.ist-offen .kopf__tafel::before{ opacity: 1; transition-delay: .2s; }

  .kopf__spalte{
    position: absolute; top: 100%; left: 50%;
    width: max(100%, var(--spalte-w));
    min-height: var(--spalte-h, 0px);
    box-sizing: border-box;
    transform: translateX(-50%);
    border-left: 1px solid var(--kopf-linie);
    opacity: 0; visibility: hidden;
    transition: opacity .15s ease, visibility 0s linear .15s;
  }
  .kopf__eintrag:last-child .kopf__spalte{ border-right: 1px solid var(--kopf-linie); }
  .kopf.ist-offen .kopf__spalte{
    opacity: 1; visibility: visible;
    transition: opacity .35s ease .28s, visibility 0s;
  }
  .kopf__spalte::before{
    content: ''; position: absolute; inset: 0;
    background: rgba(0,0,0,.022);
    opacity: 0; transition: opacity .35s ease;
    pointer-events: none;
  }
  .kopf__eintrag:hover .kopf__spalte::before,
  .kopf__eintrag:focus-within .kopf__spalte::before{ opacity: 1; }

  .kopf__spalteninhalt{ position: relative; padding: 1.1em 0 2.3em; text-align: center; }
  .kopf__unter + .kopf__unter{ position: relative; margin-top: .75em; padding-top: .75em; }
  .kopf__unter + .kopf__unter::before{
    content: ''; position: absolute; top: 0; left: 1.6em; right: 1.6em;
    border-top: 1px solid var(--kopf-linie);
  }
  .kopf__unter a{
    display: block;
    padding: .42em .7em;
    font-size: clamp(13px, .833vw, 16px); line-height: 1.3; letter-spacing: -.01em;
    color: #3c3c40;
    transition: color .2s ease;
  }
  .kopf__unter a > span{
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat; background-position: 0 100%;
    background-size: 0% 1px;
    padding-bottom: 1px;
    transition: background-size .35s var(--kopf-kurve);
  }
  .kopf__unter a:hover{ color: var(--kopf-tinte); }
  .kopf__unter a:hover > span,
  .kopf__unter a:focus-visible > span{ background-size: 100% 1px; }
  .kopf__unter a:focus-visible{ outline: 2px solid var(--kopf-tinte); outline-offset: -2px; border-radius: 3px; }
  .kopf__unter a[aria-current="page"],
  .kopf__unter a.ist-hier{ color: var(--kopf-tinte); font-weight: 600; }
}

@media (max-width: 1024px), (hover: none){
  .kopf__logo img{ height: 40px; }
  .kopf__sprache{ margin-left: auto; padding: 12px 12px; font-size: 14px; }
  .kopf__tafel{ display: none; }

  .kopf__knopf{
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-right: -10px; padding: 0;
    border: 0; background: none; color: var(--kopf-tinte);
    cursor: pointer;
  }
  .kopf__knopf:focus-visible{ outline: 2px solid var(--kopf-tinte); outline-offset: -4px; border-radius: 6px; }
  .kopf__striche{ position: relative; display: block; width: 20px; height: 12px; }
  .kopf__striche::before,
  .kopf__striche::after{
    content: ''; position: absolute; left: 0; width: 100%; height: 1.5px;
    background: currentColor; border-radius: 1px;
    transition: transform .35s var(--kopf-kurve), top .35s var(--kopf-kurve);
  }
  .kopf__striche::before{ top: 1px; }
  .kopf__striche::after{ top: 9.5px; }
  .kopf.ist-menue .kopf__striche::before{ top: 5.25px; transform: rotate(45deg); }
  .kopf.ist-menue .kopf__striche::after{ top: 5.25px; transform: rotate(-45deg); }

  .kopf__nav{
    position: fixed; top: var(--kopf-h); left: 0; right: 0;
    height: calc(100dvh - var(--kopf-h));
    box-sizing: border-box;
    padding: 6px var(--kopf-rand) 48px;
    background: #fff;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .5s var(--kopf-schub), visibility 0s linear .5s;
  }
  .kopf.ist-menue .kopf__nav{
    transform: none; visibility: visible;
    transition: transform .5s var(--kopf-schub), visibility 0s;
  }
  html.kopf-menue-offen{ overflow: hidden; }

  .kopf__eintrag{
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    border-bottom: 1px solid var(--kopf-linie);
  }
  .kopf__punkt{
    padding: 17px 0;
    font-size: 20px; font-weight: 500; letter-spacing: -.015em;
  }
  .kopf__punkt.is-hier{ font-weight: 700; }
  .kopf__punkt:focus-visible{ outline: 2px solid var(--kopf-tinte); outline-offset: 2px; border-radius: 3px; }
  .kopf__auf{
    position: relative;
    width: 48px; height: 48px; margin-right: -14px; padding: 0;
    border: 0; background: none; color: var(--kopf-tinte); cursor: pointer;
  }
  .kopf__auf::before{
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; margin: -6px 0 0 -4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .35s var(--kopf-kurve), margin .35s var(--kopf-kurve);
  }
  .kopf__eintrag.ist-auf .kopf__auf::before{ margin-top: -2px; transform: rotate(-135deg); }
  .kopf__auf:focus-visible{ outline: 2px solid var(--kopf-tinte); outline-offset: -6px; border-radius: 6px; }

  .kopf__spalte{
    grid-column: 1 / -1;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .35s var(--kopf-kurve);
  }
  .kopf__eintrag.ist-auf .kopf__spalte{ grid-template-rows: 1fr; }
  .kopf__spalteninhalt{
    min-height: 0; overflow: hidden;
    visibility: hidden; transition: visibility 0s linear .35s;
  }
  .kopf__eintrag.ist-auf .kopf__spalteninhalt{ visibility: visible; transition: visibility 0s; }
  .kopf__unter:last-child{ padding-bottom: 14px; }
  .kopf__unter + .kopf__unter{ margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--kopf-linie); }
  .kopf__unter a{
    display: block; padding: 9px 0;
    font-size: 16px; line-height: 1.3; color: #3c3c40;
  }
  .kopf__unter a[aria-current="page"],
  .kopf__unter a.ist-hier{ color: var(--kopf-tinte); font-weight: 600; }
  .kopf__unter a:focus-visible{ outline: 2px solid var(--kopf-tinte); outline-offset: 2px; border-radius: 3px; }
}

@media (max-width: 560px){
  .kopf__logo img{ height: 38px; }
}
@media (max-width: 385px){
  .kopf__logo img{ height: 34px; }
}

@media (prefers-reduced-motion: reduce){
  .kopf, .kopf *, .kopf *::before, .kopf *::after{ transition-duration: .01ms !important; transition-delay: 0s !important; }
}

@media print{
  .kopf{ display: none !important; }
}