:root {
  --nav-bg-height: calc(20em + calc(2em + 3em + 2.5em + 3em));
  --cubic-default: cubic-bezier(0.525, 0, 0, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.450s;
}

.nav-link {
  color: inherit;
  text-decoration: none;
}

.nav a:focus-visible, .nav button:focus-visible {
  outline: 1px solid var(--dark-blue);
}

/* ———— PROGRESSIVE BLUR HINTER DER NAV ————
   Technik von Osmo Supply: fünf backdrop-filter-Layer, je per linear-gradient-Maske auf einen
   Ausschnitt reduziert, sodass der Blur graduell zunimmt statt hart abzuschneiden. Das Original
   ist für eine unten liegende Bar gebaut (stärkster Blur nah an der unteren Kante); hier
   vertikal gespiegelt für unsere oben fixierte Nav — jeder Maskenwert x wurde durch (100 - x)
   ersetzt, sodass der stärkste Blur (is--5) an der oberen Kante liegt und Richtung Hero-Bild
   ausläuft. z-index 0 hält den Blur hinter .nav-container (z-index 1); pointer-events: none
   lässt Klicks/Scroll unter der Nav ungehindert durch. */
.nav-progressive-blur {
  z-index: 0;
  pointer-events: none;
  isolation: isolate;
  contain: paint;
  width: 100%;
  height: 18em;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
}

.nav-progressive-blur__layer {
  width: 100%;
  height: 100%;
  position: absolute;
}

.nav-progressive-blur__layer.is--1 {
  -webkit-backdrop-filter: blur(.09375em);
  backdrop-filter: blur(.09375em);
  -webkit-mask: linear-gradient(#0000 12.5%, #000 25% 37.5%, #0000 50%);
  mask: linear-gradient(#0000 12.5%, #000 25% 37.5%, #0000 50%);
}

.nav-progressive-blur__layer.is--2 {
  -webkit-backdrop-filter: blur(.1875em);
  backdrop-filter: blur(.1875em);
  -webkit-mask: linear-gradient(#0000 0%, #000 12.5% 25%, #0000 37.5%);
  mask: linear-gradient(#0000 0%, #000 12.5% 25%, #0000 37.5%);
}

.nav-progressive-blur__layer.is--3 {
  -webkit-backdrop-filter: blur(.375em);
  backdrop-filter: blur(.375em);
  -webkit-mask: linear-gradient(#000 0% 12.5%, #0000 25%);
  mask: linear-gradient(#000 0% 12.5%, #0000 25%);
}

.nav-progressive-blur__layer.is--4 {
  -webkit-backdrop-filter: blur(.75em);
  backdrop-filter: blur(.75em);
  -webkit-mask: linear-gradient(#000 0% 8%, #0000 18%);
  mask: linear-gradient(#000 0% 8%, #0000 18%);
}

.nav-progressive-blur__layer.is--5 {
  -webkit-backdrop-filter: blur(1.5em);
  backdrop-filter: blur(1.5em);
  -webkit-mask: linear-gradient(#000 0%, #0000 12%);
  mask: linear-gradient(#000 0%, #0000 12%);
}

/* Zusätzliche Abdunklung Richtung Schwarz, oben am stärksten und zur Nav-Unterkante hin
   auslaufend — glatter Verlauf statt gemaskter Layer, damit kein Banding an den Übergängen
   der fünf Blur-Layer entsteht. Alpha-Wert hier ist der Regler für "wie dunkel". */
.nav-progressive-blur__scrim {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 100%);
}

.nav {
  z-index: 100;
  color: var(--white);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: color var(--duration-fast) var(--cubic-default);
}

.nav-inner {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 1.1em;
  display: flex;
  position: relative;
}

.nav-container {
  z-index: 1;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3em;
  padding-right: 3em;
  position: relative;
}

.nav-end {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
}

.nav-end__actions {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  align-items: stretch;
  display: flex;
}

/* Mobil zieht der Sprachswitch + CTA aus der Top-Bar (dort zu eng neben Logo + Burger) ins
   aufklappende Menü um — zweites Markup statt CSS-Umsortierung, da .nav-center/.nav-end
   getrennte Flex-Container sind. */
.nav-center__actions {
  display: none;
}

/* Sprachswitcher-Kopie direkt unter der Linkliste (nur mobil sichtbar) — die Top-Bar-Kopie
   in .nav-end__actions bleibt für Desktop unverändert bestehen, s. buildActions() in nav.ts. */
.nav-center__lang-mobile {
  display: none;
}

.nav-center__list {
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.nav-link {
  grid-column-gap: .375em;
  grid-row-gap: .375em;
  background-color: #0000;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  padding: .75em 1.25em;
  display: flex;
}

.nav-link__label {
  font-size: 1.1em;
  line-height: 1;
  position: relative;
}

.nav-link__dropdown-icon {
  width: .875em;
}

.nav-dropdown {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  width: 100%;
  padding-top: 2.5em;
  padding-bottom: 3em;
  position: fixed;
  left: 0;
  right: 0;
  transition: all var(--duration-fast) ease, transform var(--duration-normal) var(--cubic-default);
}

.nav-dropdown.visible {
  opacity: 100;
  pointer-events: auto;
  visibility: visible;
}

.nav-bg {
  z-index: 0;
  background-color: var(--white);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  width: 100%;
  height: 0;
  position: absolute;
  inset: 0% 0% auto;
  transition: height var(--duration-normal) var(--cubic-default);
}

.nav-dropdown__content {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  width: 100%;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.nav-dropdown__content-li {
  flex: 1;
}

.nav-dropdown__link {
  color: var(--white);
  background-color: var(--dark-blue);
  border-radius: 0;
  flex-flow: column;
  flex: 1;
  justify-content: flex-end;
  align-items: stretch;
  height: 20em;
  padding: 1.25em 1.5em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.nav-dropdown__link-bg {
  z-index: 0;
  position: absolute;
  inset: 0;
}

.nav-dropdown__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.625, .05, 0, 1);
}

.nav-dropdown__link:hover .nav-dropdown__img,
.nav-dropdown__link:focus-visible .nav-dropdown__img {
  transform: scale(1.06);
}

.nav-dropdown__img-overlay {
  z-index: 0;
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(30, 38, 46, .85) 0%, rgba(30, 38, 46, .1) 65%, rgba(30, 38, 46, 0) 100%);
}

.nav-dropdown__link-inner {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.nav-dropdown__link-label {
  font-size: 1.1em;
  transition: transform .2s cubic-bezier(.625, .05, 0, 1);
}

.nav-dropdown__link-bubble {
  color: var(--white);
  background-color: var(--dark-blue);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  padding: .25em;
  transition: transform .2s cubic-bezier(.625, .05, 0, 1);
  display: flex;
}

.nav-dropdown__link-bubble .icon {
  width: 100%;
  height: 100%;
}

.page-bg {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background-color: #0000004d;
  width: 100%;
  height: 100vh;
  position: absolute;
  inset: 0% 0% auto;
  transition: opacity var(--duration-fast) var(--cubic-default);
}

.menu-button {
  grid-column-gap: .25em;
  grid-row-gap: .25em;
  background-color: var(--white);
  border: none;
  border-radius: 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  padding: .75em;
  display: none;
  cursor: pointer;
}

[data-menu-status="open"] .menu-button {
  background-color: var(--light-grey);
}

.menu-button__line {
  background-color: var(--dark-blue);
  width: 100%;
  height: 1px;
}

/* ———— SHOW DROPDOWN ————
   Einzige Quelle für "Dropdown offen" ist das von nav.js verwaltete
   data-dropdown-toggle="open"-Attribut (wird sowohl bei Klick als auch bei mouseenter
   gesetzt) — nicht mehr :hover/:focus-within direkt auf CSS-Ebene. Der vorherige
   Doppel-Mechanismus lief auseinander: nav.js verschiebt den Fokus beim Öffnen auf den
   ersten Link *im* Dropdown-Panel (nicht auf den Toggle-Button selbst), und Safari
   fokussiert Buttons bei Klick ohnehin nicht automatisch — dadurch griff die
   :focus-within-Erkennung auf dem Toggle nie zuverlässig, obwohl der Zustand laut JS
   korrekt "offen" war. */
[data-dropdown-toggle="open"] + .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ———— STYLING WHEN DROPDOWN IS OPEN (flach statt verschachtelt — s. Gotcha in CLAUDE.md) ———— */
body:has([data-dropdown-toggle="open"]) .nav-bg {
  height: var(--nav-bg-height);
}
body:has([data-dropdown-toggle="open"]) .page-bg {
  opacity: 1;
}
body:has([data-dropdown-toggle="open"]) .nav {
  color: var(--dark-blue);
}
body:has([data-dropdown-toggle="open"]) .lang-dropdown_toggle {
  color: var(--dark-blue);
}
/* .navbar1_logo-link trägt in svkontorhamburg.webflow.css ein eigenes hartes
   color: var(--white) — das überschreibt das von .nav geerbte color sonst, weil eine
   explizite Deklaration am Element selbst immer vor vererbtem Wert vom Vorfahren
   gewinnt (unabhängig von Spezifität der Vorfahren-Regel). Ohne diese Zeile bliebe
   das Logo (jetzt inline SVG mit fill="currentColor") beim geöffneten Dropdown weiß. */
body:has([data-dropdown-toggle="open"]) .navbar1_logo-link {
  color: var(--dark-blue);
}
/* .nav-link { color: inherit } (oben) erbt nur von seinem DIREKTEN Elternelement — dem <li> in
   .nav-center__list, nicht von .nav weiter oben. svkontorhamburg.webflow.css setzt aber global
   `li { color: #ffffffe6 }`, eine eigene explizite Deklaration auf dem <li> selbst. Eine explizite
   Deklaration bricht die Vererbungskette an genau der Stelle, egal wie das CSS weiter oben (auf
   .nav) aussieht — "inherit" kopiert dann einfach das (falsche, weiße) li-Color. Deshalb blieben
   Über-uns/Leistungen/Glossar/Kontakt beim offenen Dropdown weiß, obwohl .nav korrekt auf
   dark-blue wechselt. Fix: .nav-link direkt ansprechen statt auf die Vererbungskette zu vertrauen
   — exakt dasselbe Muster wie oben bei .navbar1_logo-link/.lang-dropdown_toggle. */
body:has([data-dropdown-toggle="open"]) .nav-link {
  color: var(--dark-blue);
}

/* ———— DROPDOWN TOGGLE ———— */
.nav-link__dropdown-icon {
  transition: transform var(--duration-normal) var(--cubic-default);
}
[data-dropdown-toggle] {
  transition: background-color var(--duration-fast) var(--cubic-default);
}

/* ———— SPRACH-DROPDOWN: HOVER-ÖFFNEN MIT ANIMATION ————
   Zeigt/versteckt über opacity/visibility/pointer-events statt dem hidden-Attribut
   (das würde display:none erzwingen und jede Transition verhindern) — analog zum
   .nav-dropdown-Muster weiter unten in dieser Datei. */
.lang-dropdown_content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.375em);
  transition: opacity var(--duration-fast) var(--cubic-default),
    transform var(--duration-fast) var(--cubic-default),
    visibility var(--duration-fast);
}
.lang-dropdown_wrap.is-open .lang-dropdown_content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* ———— DESKTOP: DROPDOWN OFFEN ———— */
@media screen and (min-width: 992px) {
  [data-dropdown-toggle="open"] .nav-link__dropdown-icon {
    transform: rotate(180deg);
  }
  [data-dropdown-toggle="open"] {
    background-color: var(--light-grey);
  }
}

/* ————  DROPDOWN CONTENT LIST ITEMS ———— */
.nav-dropdown__content-li {
  transition: all var(--duration-normal) var(--cubic-default);
  transition-delay: 0.18s;
  opacity: 0;
  transform: translate(4em, 0px);
}

.nav-dropdown__content-li:nth-child(2) { transition-delay: 0.24s; }
.nav-dropdown__content-li:nth-child(3) { transition-delay: 0.3s; }
.nav-dropdown__content-li:nth-child(4) { transition-delay: 0.36s; }
.nav-dropdown__content-li:nth-child(5) { transition-delay: 0.44s; }
[data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__content-li {
  opacity: 1;
  transform: translate(0em, 0px);
}

/* ———— DROPDOWN LINKS ———— (Hover-Feedback: Bild-Zoom, s. .nav-dropdown__img:hover oben) */

/* ———— NAV LINKS ———— */
a.nav-link .nav-link__label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--duration-normal) var(--cubic-default);
  transform: scale(0, 1);
  transform-origin: right center;
}

a.nav-link:hover .nav-link__label::after,
a.nav-link:focus-visible .nav-link__label::after {
  transform: scale(1, 1);
  transform-origin: left center;
}

@media screen and (max-width: 991px) {
  .nav-container {
  padding-left: 2.5%;
  padding-right: 2.5%;
}

  .nav-link {
    padding-left: 1em;
    padding-right: 1em;
  }

  .nav-link__label {
    font-size: 1em;
  }

  .navbar1_logo-link {
    z-index: 1;
    position: relative;
  }

  .nav-end {
    z-index: 2;
    position: relative;
  }

  .nav-end__actions {
    display: none;
  }

  /* Sprachswitcher unter dem letzten Menü-Link — Teil der scrollenden Liste (bleibt beim
     Scrollen direkt unter "Kontakt"), deshalb kein eigener margin-top wie beim Footer-Block
     unten. Schriftgröße bewusst identisch zu .nav-link__label (2em, s. dort), auf
     .lang-dropdown_code statt dem Wrap gesetzt, weil svkontorhamburg.webflow.css dort einen
     eigenen festen font-size-Wert (.875rem) setzt, der sonst gewinnen würde. */
  .nav-center__lang-mobile {
    justify-content: center;
    padding: 1em 1.25em 0;
    display: flex;
  }

  .nav-center__lang-mobile .lang-dropdown_wrap {
    height: auto;
  }

  .nav-center__lang-mobile .lang-dropdown_code {
    font-size: 2em;
  }

  /* Kontaktdaten + Rechtliches sind ein normaler Flex-Block am Ende des Panels, der mit der
     Linkliste zusammen scrollt (s. .nav-center overflow-y unten) — margin-top trennt ihn
     sichtbar vom Sprachswitcher/der Liste darüber. In dieser Basis-Variante (992–480px, Bar
     oben) braucht der untere Rand keine Reserve; erst ab 479px (Bar unten) wird hier per
     Override zusätzlich Platz für die dann dort fixierte Logo+Button-Bar reserviert. */
  .nav-center__actions {
    flex: 0 0 auto;
    flex-flow: column;
    align-items: center;
    gap: 1.25em;
    margin-top: 1.5em;
    padding: 1.5em 0 2em;
    display: flex;
  }

  .nav-center__footer-contact,
  .nav-center__footer-legal {
    flex-flow: column;
    align-items: center;
    gap: .5em;
    display: flex;
  }

  .nav-center__footer-link,
  .nav-center__footer-legal-link {
    color: inherit;
    text-decoration: none;
  }

  .nav-center__footer-link {
    font-size: 1.1em;
  }

  .nav-center__footer-legal-link {
    font-size: .875em;
    opacity: .7;
  }

  .nav-center__footer-link:hover,
  .nav-center__footer-legal-link:hover {
    text-decoration: underline;
  }

  /* Panel als Flex-Column geführt und als 100vh-Overlay von .nav-inner nach unten
     ausgeklappt (top:0, weil die Bar in dieser Basis-Variante oben sitzt). Der
     479px-Breakpoint kippt Bar + Panel per Override auf bottom-anchored um, s. dort.
     overflow-y: auto sitzt hier am Panel selbst statt an .nav-center__list — Liste und
     Fußzeile (Kontakt/Rechtliches) scrollen dadurch als ein zusammenhängender Block.
     Vorherige Variante ließ nur die Liste intern scrollen und hielt die Fußzeile per
     flex außerhalb des Scrollbereichs fix im Bild; bei kurzem Viewport oder
     aufgeklapptem Leistungen-Dropdown quetschte das die Liste (min-height:0) bis
     Linkliste-Inhalt hinter der Fußzeile verschwand, statt normal weiterzuscrollen. */
  .nav-center {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-flow: column;
    height: 100vh;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: -1.25em;
    right: -1.25em;
    transform: translate(0, -1em);
  }

  /* padding-top reserviert Platz für die fix oben sitzende Logo+Button-Bar, damit die
     Liste nicht darunter/dahinter startet (s. .nav-center__actions oben für das
     Gegenstück am unteren Rand ab 479px). flex: 0 0 auto statt 1 1 auto/min-height:0 —
     die Liste bekommt ihre natürliche Höhe, das Scrollen übernimmt jetzt .nav-center
     als Ganzes (s. Kommentar dort). */
  .nav-center__list {
    flex: 0 0 auto;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 8em;
  }

  .nav-link {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1em 1.25em;
  }

  .nav-link__label {
    font-size: 2em;
  }

  .nav-dropdown {
    opacity: 100;
    pointer-events: auto;
    visibility: visible;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    inset: auto;
  }

  .nav-dropdown__overflow {
    grid-template-rows: 0fr;
    width: 100%;
    display: grid;
    position: relative;
    overflow: hidden;
  }

  .nav-dropdown__overflow-inner {
    flex-flow: column;
    width: 100%;
    height: 1000000%;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .nav-dropdown__content {
    grid-gap: .75em;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 1em;
    padding-bottom: 1em;
    display: grid;
  }

  .nav-dropdown__link {
    aspect-ratio: 1;
    height: auto;
    padding: 1em;
  }

  .nav-dropdown__link-label {
    font-size: 1.1em;
  }

  .sm--hide {
    display: none;
  }

  .menu-button {
    display: flex;
  }

  :root {
    --nav-bg-height: 100vh;
  }
  .nav-dropdown__overflow {
    transition: grid-template-rows var(--duration-normal) var(--cubic-default);
  }
  .nav-center {
    transition: all var(--duration-normal) var(--cubic-default), opacity var(--duration-fast) var(--cubic-default);
  }
  .menu-button__line {
    transition: all var(--duration-normal) var(--cubic-default);
  }
  /* ———— STYLES WHEN MENU IS OPEN (flach statt verschachtelt — s. Gotcha in CLAUDE.md) ———— */
  [data-menu-status="open"] {
    color: var(--dark-blue);
  }
  [data-menu-status="open"] .menu-button__line:nth-of-type(1) {
    transform: translate(0px, 0.125em) rotate(135deg);
  }
  [data-menu-status="open"] .menu-button__line:nth-of-type(2) {
    transform: translate(0px, -0.175em) rotate(-135deg);
  }
  [data-menu-status="open"] .nav-bg {
    height: var(--nav-bg-height);
  }
  [data-menu-status="open"] .page-bg {
    opacity: 1;
  }
  [data-menu-status="open"] .lang-dropdown_toggle {
    color: var(--dark-blue);
  }
  /* Gleicher Grund wie bei body:has([data-dropdown-toggle="open"]) .nav-link weiter oben:
     .nav-link/.navbar1_logo-link erben "color" nur vom eigenen Elternelement (<li> bzw. <a>),
     und li { color: #ffffffe6 } in svkontorhamburg.webflow.css bricht die Kette zu [data-menu-
     status="open"]'s dark-blue. Ohne diese beiden Zeilen bleiben Logo und Menülinks im
     aufgeklappten mobilen Menü weiß. */
  [data-menu-status="open"] .nav-link {
    color: var(--dark-blue);
  }
  [data-menu-status="open"] .navbar1_logo-link {
    color: var(--dark-blue);
  }
  [data-menu-status="open"] .nav-center {
    opacity: 1;
    visibility: visible;
    transform: translate(0px, 0em);
    transition-delay: 0.1s;
  }
  [data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__overflow {
    grid-template-rows: 1fr;
  }
  [data-dropdown-toggle="open"] + .nav-dropdown .nav-dropdown__content-li {
    opacity: 1;
    transform: translate(0em, 0px);
  }
  [data-dropdown-toggle="open"] .nav-link__dropdown-icon {
    transform: rotate(180deg);
  }
}

@media screen and (max-width: 479px) {
  .nav-dropdown__content {
    grid-template-columns: 1fr;
  }

  .nav-dropdown__link {
    aspect-ratio: auto;
    height: 8em;
    padding: .75em;
  }

  .nav-dropdown__link-label {
    font-size: 1em;
  }

  .xs--hide {
    display: none;
  }

  /* position: fixed (statt absolute) verankert am Viewport-Rand statt an .nav-inner/
     .nav-container, deren Padding den Button sonst einrücken würde — kein Transform/
     Filter/Contain auf einem Vorfahren, das einen eigenen Containing Block aufspannt. */
  .menu-button {
    width: 3rem;
    height: 3rem;
    position: fixed;
    right: 0;
    bottom: 0;
  }

  /* ———— NAV AM UNTEREN BILDSCHIRMRAND (HANDY) ————
     Ab hier (479px und schmaler) kippt die Bar von oben auf unten — Logo + Menu-Button
     sitzen fix am unteren statt oberen Rand, Progressive Blur/Panel-Hintergrund/
     Menü-Overlay werden entsprechend gespiegelt: alles wächst jetzt von unten nach
     oben statt von oben nach unten. Baseline (992–480px) bleibt oben-verankert. */
  .nav {
    top: auto;
    bottom: 0;
  }

  .nav-inner {
  padding-top: 0;
  padding-bottom: .5em;
}

  /* Blur/Scrim liefen in der Baseline stärker am oberen Rand aus (Richtung Hero); hier
     am unteren. `to top` kehrt die Gradient-Richtung um, ohne dass die einzelnen
     Prozentwerte der Maskenlayer neu berechnet werden müssen (reiner Vertikal-Spiegel). */
  .nav-progressive-blur {
    top: auto;
    bottom: 0;
    height: 12em;
  }

  .nav-progressive-blur__layer.is--1 {
    -webkit-mask: linear-gradient(to top, #0000 12.5%, #000 25% 37.5%, #0000 50%);
    mask: linear-gradient(to top, #0000 12.5%, #000 25% 37.5%, #0000 50%);
  }

  .nav-progressive-blur__layer.is--2 {
    -webkit-mask: linear-gradient(to top, #0000 0%, #000 12.5% 25%, #0000 37.5%);
    mask: linear-gradient(to top, #0000 0%, #000 12.5% 25%, #0000 37.5%);
  }

  .nav-progressive-blur__layer.is--3 {
    -webkit-mask: linear-gradient(to top, #000 0% 12.5%, #0000 25%);
    mask: linear-gradient(to top, #000 0% 12.5%, #0000 25%);
  }

  .nav-progressive-blur__layer.is--4 {
    -webkit-mask: linear-gradient(to top, #000 0% 8%, #0000 18%);
    mask: linear-gradient(to top, #000 0% 8%, #0000 18%);
  }

  .nav-progressive-blur__layer.is--5 {
    -webkit-mask: linear-gradient(to top, #000 0%, #0000 12%);
    mask: linear-gradient(to top, #000 0%, #0000 12%);
  }

  .nav-progressive-blur__scrim {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 100%);
  }

  .nav-bg {
    inset: auto 0% 0%;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    height: 0;
  }

  /* Wie .nav-bg: an .nav-container's Bottom-Kante verankert statt Top, da die
     Nav-Box (und damit ihre Bottom-Kante) jetzt am unteren Bildschirmrand sitzt. */
  .page-bg {
    inset: auto 0% 0%;
  }

  /* Panel kippt von oben- auf bottom-anchored, s. Baseline-Kommentar bei .nav-center. */
  .nav-center {
    top: auto;
    bottom: 0;
    transform: translate(0, 1em);
  }

  /* Baseline reserviert 8em oben (Bar sitzt dort); hier sitzt die Bar unten, also
     zurück auf reine Abstands-Optik oben und Reserve unten (s. .nav-center__actions). */
  .nav-center__list {
    padding-top: 2em;
  }

  .nav-center__actions {
    padding-bottom: 8em;
  }
}