.kopfzeile {
  pointer-events: none;
  z-index: 11;
  letter-spacing: -.0396rem;
  width: 100%;
  font: 400 1.8rem/150% Inter, sans-serif;
  transition: transform var(--dauer-12) var(--kurve-aus);
  position: fixed;
  top: 0; left: 0; right: 0;
}
@media screen and (width >= 1441px) {
  .kopfzeile { letter-spacing: -.04rem; font: 400 2rem/150% Inter, sans-serif; }
}
.kopfzeile b, .kopfzeile strong { font-weight: 600; }
.kopfzeile a { font-weight: 600; text-decoration: none; }

.kopfzeile__behaelter { z-index: 15; position: relative; }

.zum-hauptinhalt {
  z-index: 1000;
  opacity: 0;
  padding: 10px;
  position: absolute;
  top: 0; left: 0;
  transform: translateY(-100%);
}
.zum-hauptinhalt:focus { opacity: 1; transform: translateY(0); }
.zum-hauptinhalt { max-width: 100%; }
.zum-hauptinhalt .knopf__innen { white-space: normal; }

.kopfzeile__grund {
  z-index: 2;
  opacity: 0;
  will-change: transform;
  background-color: var(--farbe-weiss);
  border-bottom: 1px solid var(--farbe-flaeche);
  border-radius: 0;
  width: calc(100% + 2rem);
  height: 7rem;
  transition: border-radius var(--dauer-morph) var(--kurve-morph),
              box-shadow    var(--dauer-morph) var(--kurve-morph),
              opacity       var(--dauer-3)     var(--kurve-weich),
              transform     var(--dauer-6)     var(--kurve-aus),
              top           var(--dauer-morph) var(--kurve-morph),
              width         var(--dauer-morph) var(--kurve-morph),
              height        var(--dauer-morph) var(--kurve-morph);
  position: absolute;
  top: 1.5rem; left: 50%;
  transform: translate(-50%) translateY(-12rem);
  box-shadow: var(--schatten-kopfzeile);
}
.kopfzeile.menue-offen .kopfzeile__grund {
  opacity: 1;
  transform: translate(-50%) translateY(0);
  box-shadow: var(--schatten-kopfzeile);
  z-index: 13;
}
.kopfzeile.menue-offen .kopfzeile__raster { z-index: 14; }

@media screen and (width >= 1025px) {
  .kopfzeile__grund {
    border-radius: 0;
    width: calc(100% + 6rem);
    height: 9rem;
    top: 3.9rem;
  }
}
@media screen and (width >= 1441px) {
  .kopfzeile__grund { width: calc(100% + 8rem); height: 10rem; top: 3.45rem; }
}

.kopfzeile.ist-klebend.war-klebend .kopfzeile__grund {
  opacity: 1;
  transform: translate(-50%) translateY(0);
  pointer-events: auto;
}
.kopfzeile.ist-klebend.ist-verkleinert:not(.war-klebend):not(.menue-offen) .kopfzeile__grund { opacity: 0 !important; }
.kopfzeile.ist-klebend.ist-verkleinert:not(.menue-offen) .kopfzeile__grund { box-shadow: none !important; }

.kopfzeile.hat-untermenue .kopfzeile__grund {
  opacity: 1;
  transform: translate(-50%) translateY(0);
  border-radius: 0;
  box-shadow: var(--schatten-kopfzeile-offen);
  top: 0;
  width: var(--fenster-breite, 100%);
  height: var(--grund-hoehe, 9rem);
  pointer-events: auto;
}

.kopfzeile__raster { z-index: 3; width: 100%; position: relative; }
@media screen and (width >= 1025px) {
  .kopfzeile__raster {
    display: grid;
    grid-template-columns: repeat(var(--raster-spalten), 1fr);
    gap: var(--raster-abstand);
    padding: 0;
  }
}

.kopfzeile__inhalt {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
  padding: 2.8rem 0;
  display: flex;
}
@media screen and (width >= 1025px) {
  .kopfzeile__inhalt { grid-column: span 12 / span 12; height: 100px; padding: 8.4rem 0 4.5rem; }
}

.kopfzeile__links  { align-items: center; gap: 4rem; display: flex; pointer-events: auto; }
@media screen and (width <= 1440px) { .kopfzeile__links { gap: 2.4rem; } }

.wortmarke {
  background-color: var(--farbe-klar);
  position: relative;
  top: 0;
  transition: transform var(--dauer-8) var(--kurve-schwung),
              opacity var(--dauer-3) var(--kurve-weich);
}
@media screen and (width <= 1024px) { .wortmarke { right: -10px; } }
.wortmarke a { display: block; }

.wortmarke__bild {
  display: block;
  height: 24px;
  width: auto;
  max-width: none;
}
@media screen and (width >= 1025px) { .wortmarke__bild { height: 26px; } }
@media screen and (width >= 1441px) { .wortmarke__bild { height: 34px; } }

.navigation ul { display: flex; }
@media screen and (width <= 1024px) { .navigation { display: none; } }

.nav-punkt { align-items: center; height: 7rem; display: flex; }
@media screen and (width >= 1025px) { .nav-punkt { height: 9rem; } }
@media screen and (width >= 1441px) { .nav-punkt { height: 10rem; } }
.nav-punkt:first-child { padding-left: 0; }

.nav-link {
  pointer-events: auto;
  cursor: pointer;
  color: var(--farbe-tinte);
  text-align: right;
  background: none;
  border: 0;
  min-width: max-content;
  padding: 0;
  font-family: Inter, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.4rem;
  text-decoration: none;
  transition: transform var(--dauer-8) var(--kurve-schwung),
              opacity var(--dauer-3) var(--kurve-weich);
}
.navigation .nav-link { padding: 0 2.4rem; }
@media screen and (width <= 1440px) { .navigation .nav-link { padding: 0 2rem; } }

.navigation.ein-punkt-aktiv .nav-punkt:not(.ist-aktiv) .nav-link { opacity: .35; }
.navigation.ein-punkt-aktiv .nav-punkt:not(.ist-aktiv) .nav-link:focus { opacity: 1; }

.kopfzeile.ist-klebend.ist-verkleinert:not(.menue-offen) .nav-punkt { pointer-events: none; }
.kopfzeile.ist-klebend.ist-verkleinert:not(.menue-offen) .kopfzeile__links { pointer-events: none; }
.kopfzeile.ist-klebend.ist-verkleinert:not(.menue-offen) .wortmarke,
.kopfzeile.ist-klebend.ist-verkleinert:not(.menue-offen) .kopfzeile__links .nav-link,
.kopfzeile.ist-klebend.ist-verkleinert:not(.menue-offen) .kopfzeile__rechts .nav-link {
  transform: translateY(-13rem);
}
@media screen and (width >= 1025px) {
  .kopfzeile.ist-klebend.ist-verkleinert:not(.menue-offen) .vor-burger,
  .kopfzeile.menue-offen .vor-burger { transform: translate(-6.7rem); }
  .kopfzeile.ist-klebend.ist-verkleinert:not(.menue-offen) .burger-huelle,
  .kopfzeile.menue-offen .burger-huelle {
    transform: translateY(-50%) scale(1) !important;
  }
}

.kopfzeile__rechts {
  pointer-events: none;
  z-index: 1001;
  width: 100%;
  position: absolute;
  top: 2.4rem; left: 50%;
  transform: translate(-50%);
}
@media screen and (width >= 1025px) { .kopfzeile__rechts { top: 5.8rem; } }
@media screen and (width <= 1024px) { .kopfzeile__rechts .behaelter { width: 100%; margin: 0; } }

.kopfzeile__knoepfe {
  justify-content: flex-end;
  align-items: center;
  gap: .5rem;
  display: flex;
  position: relative;
}
@media screen and (width >= 1025px) { .kopfzeile__knoepfe { gap: 3rem; } }

.vor-burger {
  z-index: 10;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  transition: transform var(--dauer-8) var(--kurve-schwung);
  display: flex;
  position: relative;
}
@media screen and (width >= 1025px) { .vor-burger { gap: 1.5rem; } }

.kopf-knopf { pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.kopf-knopf:not(.burger) { display: none; }
@media screen and (width >= 1025px) {
  .kopf-knopf:not(.burger) { z-index: 2; display: flex; position: relative; }
  .kopf-knopf:not(.burger) .knopf__innen { padding-left: 3.2rem; padding-right: 3.2rem; }
}

.burger-huelle { transition: transform var(--dauer-8) var(--kurve-schwung); right: 0; }

.burger__kreuz { display: none; }
.kopfzeile.menue-offen .burger__striche { display: none; }
.kopfzeile.menue-offen .burger__kreuz { display: block; }
.burger-huelle .knopf__innen {
  transition: background-color var(--dauer-kurz) linear,
              transform var(--dauer-8) var(--kurve-schwung);
}
@media screen and (width <= 1024px) { .burger-huelle { transition: none; } }
@media screen and (width >= 1025px) {
  .burger-huelle {
    margin-left: -2.5rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0);
  }
}
.burger { width: 5.2rem; max-width: none; padding: 0; }
.burger .knopf__innen { padding: 0; }
.burger svg { margin-left: 0; }
@media screen and (width <= 1024px) {
  .kopfzeile:not(.menue-offen):not(.zeigt-grund) .burger .knopf__innen {
    background-color: var(--farbe-flaeche);
  }
}
.kopfzeile.menue-offen .burger .knopf__innen,
.kopfzeile.ist-klebend.ist-verkleinert:not(.zeigt-grund) .burger .knopf__innen {
  background-color: var(--farbe-tinte);
}
.kopfzeile.menue-offen .burger,
.kopfzeile.ist-klebend.ist-verkleinert:not(.zeigt-grund) .burger { color: var(--farbe-weiss); }
.kopfzeile.menue-offen .burger svg,
.kopfzeile.ist-klebend.ist-verkleinert:not(.zeigt-grund) .burger svg { fill: var(--farbe-weiss); }
@media screen and (width <= 1024px) {
  .kopfzeile.menue-offen .burger-huelle {
    transition: none;
    animation: var(--dauer-8) var(--kurve-schwung) forwards burger-erscheint;
    transform: scale(0);
  }
}
@keyframes burger-erscheint { 0% { transform: scale(0); } to { transform: scale(1); } }

.kopfzeile__schleier {
  z-index: 1;
  opacity: 0;
  width: 100%;
  height: 100vh;
  transition: opacity var(--dauer-6) var(--kurve-weich);
  position: absolute;
  top: 0; left: 0;
}
.kopfzeile.hat-untermenue .kopfzeile__schleier { pointer-events: auto; opacity: 1; }

.untermenue {
  pointer-events: none;
  opacity: 0;
  backface-visibility: hidden;
  width: 100vw;
  height: auto;
  max-height: calc(90vh - 115px);
  transition: opacity var(--dauer-blitz) linear;
  position: absolute;
  top: 100%; left: 50%;
  overflow: auto;
  transform: translate(-50%);
}
.untermenue.ist-offen { opacity: 1; pointer-events: auto; }

.untermenue__innen  { width: 100%; height: 100%; padding-top: 4rem; padding-bottom: 10rem; }
.untermenue__reihe  { gap: 1rem; width: 100%; display: flex; }
@media screen and (width >= 1441px) { .untermenue__reihe { gap: 2rem; } }

.untermenue__spalte { flex: 1; flex-direction: column; gap: 1rem; display: flex; min-width: 0; }
.untermenue__spalte--text { flex: none; width: 37.5%; padding-left: 8rem; }
@media screen and (width >= 1441px) { .untermenue__spalte--text { width: 29%; padding-left: 6rem; } }
@media screen and (width >= 1729px) { .untermenue__spalte--text { flex: 1; width: auto; } }

.nur-klein-desktop { display: none; }
@media screen and (width <= 1440px) { .nur-klein-desktop { display: flex; } }
.nur-gross-desktop { display: none; }
@media screen and (width >= 1441px) { .nur-gross-desktop { display: flex; } }

.untermenue-karte {
  opacity: 0;
  transform: scale(1.15);
  position: relative;
}
.untermenue.ist-offen .untermenue-karte {
  opacity: 1;
  transition: opacity 0s var(--kurve-ueberschwung),
              transform var(--dauer-8) 0s var(--kurve-ueberschwung);
  transform: scale(1);
}
.untermenue.ist-offen .untermenue-karte:nth-child(1) { transition-delay: calc(var(--verzug-untermenue-schritt) * 1); }
.untermenue.ist-offen .untermenue-karte:nth-child(2) { transition-delay: calc(var(--verzug-untermenue-schritt) * 2); }
.untermenue.ist-offen .untermenue-karte:nth-child(3) { transition-delay: calc(var(--verzug-untermenue-schritt) * 3); }
.untermenue.ist-offen .untermenue-karte:nth-child(4) { transition-delay: calc(var(--verzug-untermenue-schritt) * 4); }

.untermenue-karte__innen {
  border-radius: 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 3rem;
  transition: color var(--dauer-2) var(--kurve-weich),
              transform var(--dauer-4) var(--kurve-feder);
  display: flex;
  position: relative;
  overflow: hidden;
}
.untermenue-karte__innen::before {
  content: "";
  width: 100%; height: 100%;
  background: var(--karte-farbe, var(--farbe-flaeche));
  transition: background-color var(--dauer-2) var(--kurve-weich);
  position: absolute;
  top: 0; left: 0;
  z-index: -1;
}
@media (hover: hover) {
  .untermenue-karte:hover .untermenue-karte__innen { transform: scale(.96); }
  .untermenue-karte:hover .untermenue-karte__mehr::after { transform: translate(25%); }
}
.untermenue-karte--quer .untermenue-karte__innen { aspect-ratio: 280 / 200; padding: 3rem 7rem 3rem 3rem; }
.untermenue-karte--hoch .untermenue-karte__innen { aspect-ratio: 260 / 360; }
@media screen and (width >= 1441px) {
  .untermenue-karte--hoch .untermenue-karte__innen { aspect-ratio: 280 / 421; }
}
.untermenue-karte--klein .untermenue-karte__innen { height: 100%; }

.untermenue-karte--cyan    { --karte-farbe: var(--farbe-cyan-kraeftig); }
.untermenue-karte--akzent { --karte-farbe: var(--farbe-akzent-kraeftig); }
.untermenue-karte--grau    { --karte-farbe: var(--farbe-flaeche); }
.untermenue-karte--cyan .untermenue-karte__titel,
.untermenue-karte--akzent .untermenue-karte__titel { color: var(--farbe-weiss); }
.untermenue-karte--cyan .untermenue-karte__mehr,
.untermenue-karte--akzent .untermenue-karte__mehr { color: var(--farbe-weiss); }

.untermenue-karte__bild {
  flex: 1 1 auto;
  align-self: stretch;
  justify-content: center;
  align-items: center;
  min-height: 0;
  margin-bottom: .5rem;
  display: flex;
}
.untermenue-karte__bild img {
  object-fit: contain;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}

.untermenue-karte__bild--wort img { width: 100%; height: auto; max-height: 6rem; }
.untermenue-karte--hoch .untermenue-karte__bild--wort {
  margin-inline: -1rem;
  align-items: center;
}
.untermenue-karte--hoch .untermenue-karte__bild--wort img { max-height: 12rem; }

.untermenue-karte--grau .untermenue-karte__bild img {
  width: 19rem;
  height: 19rem;
  max-height: none;
}

.untermenue-karte--quer .untermenue-karte__bild--wort { flex: 0 0 auto; margin-block: -1rem -.6rem; }
.untermenue-karte--quer.untermenue-karte--grau .untermenue-karte__bild {
  margin: 0;
  position: absolute;
  top: 50%;
  right: .8rem;
  transform: translateY(-50%);
}
.untermenue-karte--quer.untermenue-karte--grau .untermenue-karte__bild img {
  width: 10rem;
  height: 10rem;
  max-height: none;
}
.untermenue-karte--quer.untermenue-karte--grau .untermenue-karte__innen:has(.untermenue-karte__bild) {
  padding-right: 11.8rem;
}

.untermenue-karte__marke {
  position: absolute;
  top: 1.4rem; left: 1.4rem;
  z-index: 1;
  padding: .4rem 1rem;
  border-radius: 0;
  background: var(--farbe-weiss);
  color: var(--farbe-text-zweit);
  font: 700 1.1rem/1.3 Inter, sans-serif;
  letter-spacing: .06rem;
  text-transform: uppercase;
}

.untermenue-karte__link     { position: absolute; inset: 0; z-index: 2; }
.untermenue-karte__titel    { letter-spacing: -.02rem; font: 600 2rem/100% Inter, sans-serif;
                              overflow-wrap: anywhere; hyphens: auto; }
.untermenue-karte__mehr     { color: var(--farbe-text-zweit); font: 400 1.6rem/150% Inter, sans-serif; }
.untermenue-karte__mehr::after {
  content: "\2192";
  margin-left: .5rem;
  transition: transform var(--dauer-3) var(--kurve-weich);
  display: inline-block;
}

.untermenue__nav-titel {
  letter-spacing: -.02rem;
  font: 600 1.8rem/150% Inter, sans-serif;
  margin-bottom: 1rem;
}
.untermenue__liste { display: flex; flex-direction: column; }
.untermenue__liste .textlink {
  color: inherit;
  letter-spacing: -.022em;
  padding: .5rem 0;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  transition: opacity var(--dauer-2) var(--kurve-weich);
  display: inline-flex;
}
.untermenue__liste .textlink:hover { opacity: .54; }
.untermenue__fuss { margin-top: 2.4rem; }
.untermenue__fuss .knopf { display: block; max-width: 100%; white-space: normal; text-align: center; }
.untermenue__fuss .knopf__innen { height: auto; min-height: 5.2rem; padding: 1.2rem 2rem; line-height: 1.3; }

.mobilmenue {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 12;
  padding-top: 14rem;
  background: var(--farbe-weiss);
  padding: 12rem 2rem 4rem;
  overflow-y: auto;
  pointer-events: auto;
}
.kopfzeile.menue-offen .mobilmenue { display: block; }
.mobilmenue > * {
  width: var(--behaelter-breite);
  margin-left: auto;
  margin-right: auto;
}

.kopfzeile.menue-offen .navigation,
.kopfzeile.menue-offen .kopfzeile__knoepfe > .nav-link,
.kopfzeile.menue-offen .vor-burger .kopf-knopf { opacity: 0; pointer-events: none; }

.mobilmenue ul { display: flex; flex-direction: column; gap: 1.2rem; }
.mobilmenue__punkt {
  font: 800 2.69rem/100% Inter, sans-serif;
  letter-spacing: -0.1rem;
  color: var(--farbe-tinte);
  display: block;
  padding: .8rem 0;
}
.mobilmenue__knoepfe { margin-top: 4rem; display: flex; flex-direction: column; gap: 1.2rem;
                       align-items: flex-start; }
@media screen and (width <= 1024px) {
  .mobilmenue__knoepfe .knopf { width: 100%; }
  .mobilmenue__knoepfe .knopf__innen { width: 100%; }
}

.seite--dunkel .wortmarke__bild {
  transition: filter var(--dauer-3) var(--kurve-weich);
}
.seite--dunkel .nav-link {
  transition: transform var(--dauer-8) var(--kurve-schwung),
              opacity var(--dauer-3) var(--kurve-weich),
              color var(--dauer-3) var(--kurve-weich);
}
.seite--dunkel .kopf-knopf .knopf__innen {
  transition: transform var(--dauer-3) var(--kurve-ueberschwung),
              color var(--dauer-3) var(--kurve-weich),
              border-color var(--dauer-3) var(--kurve-weich),
              background-color var(--dauer-3) var(--kurve-weich);
}

.seite--dunkel .kopfzeile:not(.war-klebend):not(.hat-untermenue):not(.menue-offen) .wortmarke__bild {
  filter: brightness(0) invert(1);
}
.seite--dunkel .kopfzeile:not(.war-klebend):not(.hat-untermenue):not(.menue-offen) .nav-link {
  color: var(--farbe-weiss);
}
.seite--dunkel .kopfzeile:not(.war-klebend):not(.hat-untermenue):not(.menue-offen) .vor-burger .kopf-knopf.knopf--schwarz {
  color: var(--farbe-tinte);
}
.seite--dunkel .kopfzeile:not(.war-klebend):not(.hat-untermenue):not(.menue-offen) .vor-burger .kopf-knopf.knopf--schwarz .knopf__innen {
  background-color: var(--farbe-weiss);
}
.seite--dunkel .kopfzeile:not(.war-klebend):not(.hat-untermenue):not(.menue-offen) .burger .knopf__innen {
  background-color: var(--farbe-weiss);
}
.seite--dunkel .kopfzeile:not(.war-klebend):not(.hat-untermenue):not(.menue-offen) .burger,
.seite--dunkel .kopfzeile:not(.war-klebend):not(.hat-untermenue):not(.menue-offen) .burger svg {
  fill: var(--farbe-tinte);
  color: var(--farbe-tinte);
}