.leiste[data-balken] { --balken-h: 64px; height: var(--balken-h); padding: 0 var(--rand); align-items: center; justify-content: space-between; pointer-events: auto;
  transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.leiste[data-balken].balken-weg { transform: translateY(-100%); }
.leiste[data-balken]::before { display: none; }   
.leiste[data-balken] .leiste-grund, .leiste[data-balken] .ball, .leiste[data-balken] .ball-platz { display: none; }
.leiste[data-balken] .leiste-rechts { margin: 0; padding: 0; gap: 8px; }
.balken-grund { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: transparent; border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s; }
.leiste[data-balken].balken-hell .balken-grund { border-bottom-color: var(--linie); }
.leiste[data-balken].balken-dunkel .balken-grund { border-bottom-color: rgba(246,248,245,.14); }
html.banner-auf .leiste[data-balken] .balken-grund { background-color: transparent !important; border-bottom-color: transparent; }   
html.banner-auf .banner-logo { display: none; }                          
.leiste[data-balken] .heim { --py: 11px; --px: 8px; position: relative; display: block; line-height: 0; padding: var(--py) var(--px);
  margin: calc(-1 * var(--py)) calc(-1 * var(--px)); }
.leiste[data-balken] .heim img { height: 26px; width: auto; max-width: none; transition: opacity .15s .075s; }
.leiste[data-balken] .heim .heim-dunkel { position: absolute; left: var(--px); top: var(--py); }
.leiste[data-balken] .heim .heim-hell { opacity: 0; }
.leiste[data-balken].balken-hell .heim .heim-hell { opacity: 1; }
.leiste[data-balken].balken-hell .heim .heim-dunkel { opacity: 0; }
html.banner-auf .leiste[data-balken] .heim .heim-hell { opacity: 0; }
html.banner-auf .leiste[data-balken] .heim .heim-dunkel { opacity: 1; }
.leiste[data-balken] .heim:focus-visible { outline: 2px solid var(--akzent); outline-offset: 0; border-radius: 8px; }
.leiste[data-balken] .nav { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; }
.leiste[data-balken] .nav .ball-quelle { position: fixed; left: 0; top: 0; width: 0; height: 0; }
.leiste[data-balken] .nav .ball-quelle::before { display: none; }
.leiste[data-balken] .knopf { font-size: 14px; padding: 10px 18px; min-height: 44px; --grund: var(--schnee); color: var(--nacht);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background-color .15s .075s, color .15s .075s; }
.leiste[data-balken].balken-hell .knopf { --grund: var(--fichte-tief); color: var(--schnee); }
html.banner-auf .leiste[data-balken] .knopf { --grund: var(--schnee); color: var(--nacht); }
.leiste[data-balken] .menue-knopf { display: inline-flex; position: static; order: 2; width: auto; height: auto; min-height: 44px; margin: 0; gap: 10px;
  padding: 0 4px 0 12px; justify-content: center; align-items: center; border-radius: 999px; background: transparent; color: var(--schnee);
  clip-path: none; opacity: 1; pointer-events: auto; font-size: 15px; font-weight: 600; transition: color .15s .075s; }
.leiste[data-balken] .menue-knopf span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.leiste[data-balken].balken-hell .menue-knopf { color: var(--graphit); }
html.banner-auf .leiste[data-balken] .menue-knopf { color: var(--schnee); }
@media (max-width: 767px) {
  .leiste[data-balken] { --balken-h: 56px; }
  .leiste[data-balken] .heim img { height: 22px; }
  .leiste[data-balken] .knopf { font-size: 14px; padding: 8px 14px;
    transition: opacity .25s, visibility .25s, background-color .15s .075s, color .15s .075s; }
  .leiste[data-balken] .leiste-rechts { gap: 6px; }
  .leiste[data-balken] .menue-knopf { padding: 0 2px 0 10px; font-size: 14px; }
}
@media (max-width: 379px) {
  .leiste[data-balken] .heim { --py: 13px; }   
  .leiste[data-balken] .heim img { height: 19px; }
  .leiste[data-balken] .knopf { padding: 8px 12px; }
}
@media (max-width: 359px) {
  .leiste[data-balken] .menue-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .leiste[data-balken] .menue-knopf { min-width: 44px; padding: 0; }
}
a.fuss-wort { display: block; color: inherit; text-decoration: none; width: fit-content; max-width: none; }
a.fuss-wort:focus-visible { outline: 2px solid var(--akzent); outline-offset: 6px; border-radius: 12px; }
.fuss-heim-bild { position: relative; display: inline-block; vertical-align: -.06em; margin: 0 -.04em; height: .82em; overflow: hidden; }
.fuss-wort .fuss-heim-bild img { display: block; margin: 0; height: 100%; }
.fuss-heim-bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("/assets/bilder/logo-hell.svg") 0 0 / 100% 100% no-repeat;
          mask: url("/assets/bilder/logo-hell.svg") 0 0 / 100% 100% no-repeat;
  background: linear-gradient(68deg, transparent 0 48.4%, #ff3b30 48.8%, #ff9f0a 49.3%, #ffd60a 49.8%, #34c759 50.3%, #0a84ff 50.8%, #7d5cff 51.3%, transparent 51.6% 100%) 100% 0 / 240% 100% no-repeat;
  opacity: 0; transition: background-position 1.6s cubic-bezier(.3,.1,.3,1), opacity .25s;
}
a.fuss-wort:hover .fuss-heim-bild::after,
a.fuss-wort:focus-visible .fuss-heim-bild::after { opacity: 1; background-position: 0 0; }
html.ruhig .fuss-heim-bild::after { transition: none; }