html[lang="en"] [lang="de"], html[lang="de"] [lang="en"] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible { outline: 2px solid #A4BDF8; outline-offset: 3px; }

html { scroll-padding-top: 5rem; }

#kopf summary::-webkit-details-marker { display: none; }

#kopf, #kopf .band, #kopf a, #kopf summary, #kopf button {
  transition: background-color .25s, color .25s, border-color .25s;
}
#kopf.ist-hell,
#kopf.ist-hell .band { background: #FFFFFF; color: #181818; border-color: rgba(24, 24, 24, .12); }
#kopf.ist-hell a:not(.kontakt), #kopf.ist-hell summary { color: rgba(24, 24, 24, .72); }
#kopf.ist-hell a:not(.kontakt):hover, #kopf.ist-hell summary:hover { color: #181818; }
#kopf.ist-hell .band a, #kopf.ist-hell .band summary, #kopf.ist-hell .band details { border-color: rgba(24, 24, 24, .12); }
#kopf.ist-hell .band a:hover, #kopf.ist-hell .sprach-eintrag:hover { background: rgba(24, 24, 24, .05); }
#kopf.ist-hell .sprach-eintrag { color: rgba(24, 24, 24, .72); }
#kopf.ist-hell .sprach-eintrag[aria-pressed="true"] { color: #181818; background: rgba(24, 24, 24, .06); }
#kopf.ist-hell summary.knopf { border-color: rgba(24, 24, 24, .3); color: #181818; }
#kopf.ist-hell .kopf-dunkel { display: none; }
#kopf.ist-hell .kopf-hell { display: block; }

@keyframes kopf-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes kopf-zu  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
#kopf details[open] > .band,
#kopf details[open] > .band-innen { animation: kopf-auf .22s cubic-bezier(.2, .7, .25, 1) both; }
#kopf details.schliesst > .band,
#kopf details.schliesst > .band-innen { animation: kopf-zu .18s ease-in both; }
#kopf details[open] > .band > *,
#kopf details[open] > .band-innen > * { animation: kopf-auf .32s cubic-bezier(.2, .7, .25, 1) both; }
#kopf details[open] > .band > :nth-child(2), #kopf details[open] > .band-innen > :nth-child(2) { animation-delay: .04s; }
#kopf details[open] > .band > :nth-child(3), #kopf details[open] > .band-innen > :nth-child(3) { animation-delay: .08s; }
#kopf details[open] > .band > :nth-child(4), #kopf details[open] > .band-innen > :nth-child(4) { animation-delay: .12s; }
#kopf details[open] > .band > :nth-child(5) { animation-delay: .16s; }
#kopf details[open] > .band > :nth-child(6) { animation-delay: .20s; }
#kopf details.schliesst > .band > *, #kopf details.schliesst > .band-innen > * { animation: none; }

#kopf nav > a, #kopf nav > details > summary { position: relative; }
#kopf nav > a::after, #kopf nav > details > summary::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.2, .7, .25, 1);
}
#kopf nav > a:hover::after, #kopf nav > details > summary:hover::after,
#kopf nav > details[open] > summary::after { transform: scaleX(1); }
#kopf nav > details > summary svg { transition: transform .25s cubic-bezier(.2, .7, .25, 1); }

#kopf .kontakt, #kopf summary.knopf {
  transition: transform .18s cubic-bezier(.2, .7, .25, 1), background-color .2s, color .2s, border-color .2s;
}
#kopf .kontakt:hover, #kopf summary.knopf:hover { transform: translateY(-1px); }
#kopf .kontakt:active, #kopf summary.knopf:active { transform: translateY(0) scale(.96); }
#kopf details[open] > summary.knopf { transform: none; }

#burger .strich { transition: transform .25s cubic-bezier(.2, .7, .25, 1), opacity .18s; transform-box: fill-box; transform-origin: center; }
#burger[open] .s1 { transform: translateY(4px) rotate(45deg); }
#burger[open] .s2 { opacity: 0; transform: scaleX(.3); }
#burger[open] .s3 { transform: translateY(-4px) rotate(-45deg); }

#kopf { transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; }
#kopf.ist-hell { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .28); }
#kopf .sprach-eintrag { transition: background-color .18s, color .18s; }

.streifen { scrollbar-width: none; scroll-padding-inline: 1.5rem; }
.streifen::-webkit-scrollbar { display: none; }
.karussell-punkte { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.karussell-punkte[hidden] { display: none; }
[data-pfeile] + .karussell-punkte, [data-pfeile] + .karussell-schieber { margin-top: .75rem; }

.karussell-schieber { display: flex; gap: 3px; width: 10rem; max-width: 60%; height: 4px; margin-left: auto; margin-right: auto; }
.karussell-schieber[hidden] { display: none; }
.karussell-schieber button {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 999px;
  background: currentColor; opacity: .18; transition: opacity .25s; cursor: pointer; position: relative;
}
.karussell-schieber button::before { content: ""; position: absolute; inset: -10px 0; }
.karussell-schieber button:hover { opacity: .45; }
.karussell-schieber button.aktiv { opacity: 1; cursor: default; }
.karussell-punkte button {
  width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px;
  background: currentColor; opacity: .25; transition: opacity .2s, transform .2s;
}
.karussell-punkte button.aktiv { opacity: 1; transform: scale(1.3); }

.karussell-pfeil {
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 999px;
  border: 1px solid rgba(24, 24, 24, .2); background: #FFFFFF; color: #181818;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, background-color .2s, color .2s, opacity .2s, transform .15s;
}
.karussell-pfeil svg { width: 1rem; height: 1rem; }
.karussell-pfeil:hover { border-color: #181818; }
.karussell-pfeil:active { transform: scale(.94); }
.karussell-pfeil:focus-visible { outline: 2px solid #181818; outline-offset: 2px; }
.karussell-pfeil[disabled] { opacity: .3; pointer-events: none; }

main, footer { transition: opacity .14s ease, transform .14s ease; }
html.wechselt main, html.wechselt footer { opacity: 0; transform: translateY(6px); }

#kontakt-dialog { border: 0; padding: 0; background: transparent; max-width: min(34rem, calc(100vw - 2rem)); width: 100%; }
#kontakt-dialog::backdrop { background: rgba(24, 24, 24, .6); backdrop-filter: blur(2px); }
#kontakt-dialog[open] > div { animation: dialog-auf .22s ease-out; }
#kontakt-dialog.schliesst > div { animation: dialog-zu .16s ease-in forwards; }
#kontakt-dialog[open]::backdrop { animation: grund-auf .22s ease-out; }
#kontakt-dialog.schliesst::backdrop { animation: grund-zu .16s ease-in forwards; }
@keyframes dialog-auf { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dialog-zu { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes grund-auf { from { opacity: 0; } }
@keyframes grund-zu { to { opacity: 0; } }
#kontakt-dialog input, #kontakt-dialog textarea {
  width: 100%; border-radius: .75rem; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06);
  color: #FFFFFF; padding: .7rem .9rem; font: inherit; transition: border-color .2s, background-color .2s;
}
#kontakt-dialog input::placeholder, #kontakt-dialog textarea::placeholder { color: rgba(255, 255, 255, .4); }
#kontakt-dialog input:focus, #kontakt-dialog textarea:focus { outline: 0; border-color: #A4BDF8; background: rgba(255, 255, 255, .09); }