/* ======================================================================
   Navigation — Leiste, Flyout, Vorhang
   ----------------------------------------------------------------------
   Eigener Nachbau, Werte aus der Messung des gerenderten Zustands.

   Zwei Dinge muss man wissen, sonst ergibt die Datei keinen Sinn:

   1. Die Leiste bricht bei 833px um, NICHT bei den 734px des übrigen
      Rasters. Zwischen 735 und 833 trägt die Seite also schon das
      Tablet-Raster, die Navigation aber noch das Handy-Layout mit
      Burger. Die Innenabstände der Leiste folgen trotzdem weiter dem
      normalen Raster — deshalb dort eigene Regeln.

   2. Das Flyout ist IMMER da, nur zusammengefaltet. Die Fläche hat im
      Ruhezustand die Höhe der Leiste und einen negativen Außenabstand
      von genau dieser Höhe — sie liegt damit deckungsgleich unter der
      Leiste. Beim Öffnen wächst nur ihre Höhe.

      Deshalb steht überall visibility:hidden statt display:none: ein
      ausgeblendetes Element hat keine Maße, und ohne Maße gäbe es
      nichts zu animieren.

   Im Desktop lösen sich die Zwischenhüllen (.pf-nav-menue,
   .pf-nav-flyout, .pf-nav-menue-liste) per display:contents auf.
   Sie sind nur für das Handy da, wo das Menü eine eigene Fläche über
   der Seite bildet; oben würden sie die Menüpunkte aus dem Flex-Fluss
   der Leiste nehmen.

   Farben, Zustände und die Feinjustierung des Rasters stehen in
   portfolio.css — diese Datei liefert nur das Gerüst darunter.
   ====================================================================== */

html {
  --pf-nav-height: 44px;
  --r-globalmessage-segment-height: 0px;
  --pf-nav-segmentbar-height: 0px;
}

/* --- Der Träger ------------------------------------------------------
   all:unset macht ihn zum reinen Behälter: keine eigene Darstellung,
   nur Hülle. Übrig bleibt display:inline. */

#pf-kopf {
  all: unset;
}

/* Der Reset innerhalb der Leiste. Die ID davor ist Absicht und der
   Grund, warum weiter unten jede Regel mit #pf-nav beginnt:

   #pf-kopf h2      = 1-0-1  schlägt fremde Klassenregeln
   #pf-nav .klasse    = 1-1-0  schlägt den Reset
   .klasse               = 0-1-0  verlöre gegen ihn

   Ohne den Reset schlügen Abstandsregeln aus anderen Stylesheets in
   die Leiste durch; ohne das #pf-nav davor käme umgekehrt keine
   eigene Regel mehr an. Beides zusammen ergibt die Reihenfolge. */
#pf-kopf button,
#pf-kopf form,
#pf-kopf h2,
#pf-kopf h3,
#pf-kopf input,
#pf-kopf li,
#pf-kopf p,
#pf-kopf ul {
  margin: 0;
  padding: 0;
}
#pf-kopf button {
  background: none;
  border: 0;
  box-sizing: content-box;
  color: inherit;
  cursor: pointer;
  font: inherit;
  overflow: visible;
  vertical-align: inherit;
}
#pf-kopf button:disabled {
  cursor: default;
}

@media print {
  #pf-kopf {
    display: none;
  }
}

/* --- Die Leiste ------------------------------------------------------ */

#pf-nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9999;
  min-width: 320px;
  height: var(--pf-nav-height);
}

/* Hält im Fluss den Platz frei, den die absolut liegende Leiste nicht
   einnimmt. Auf Seiten mit .pf-nav-ueberlagert soll der Inhalt genau das
   nicht tun, sondern unter die Leiste laufen — dort fällt er weg. */
.pf-nav-platzhalter {
  height: var(--pf-nav-height);
}
.pf-nav-ueberlagert .pf-nav-platzhalter {
  display: none;
}

/* Bewusst ohne position: die Fläche steht oben im normalen Fluss.
   Bezugsrahmen für alles Absolute darin ist #pf-nav.

   Der Taktgeber des Flyouts steht hier und NICHT auf #pf-nav. Das
   ist kein Zufall: portfolio.css blendet die Farbe der Leiste mit
   var(--pf-nav-flyout-rate, 0.28s) über. Stünde die Variable
   schon auf der Leiste, wäre sie dort im Ruhezustand 0s — der
   Ersatzwert käme nie zum Zug und die Leiste schaltete hart um,
   während der Vorhang blendet. */
#pf-nav .pf-nav-flaeche {
  --pf-nav-flyout-rate: 0s;
  --pf-nav-duration-medium: 0.24s;
  z-index: 2;
  max-width: 1024px;
  height: var(--pf-nav-height);
  margin-inline: auto;
  padding: 0 22px;
  box-sizing: border-box;
}

#pf-nav .pf-nav-liste {
  display: flex;
  justify-content: space-between;
  width: auto;
  height: var(--pf-nav-height);
  /* Gleicht die seitlichen Innenabstände der Einträge aus, damit die
     äußeren Glyphen auf der Rasterkante sitzen und nicht daneben. */
  margin: 0 -8px;
  list-style: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
#pf-nav .pf-nav-liste > .pf-nav-punkt {
  height: 100%;
}

/* --- Die Punkte in der Leiste ---------------------------------------- */

#pf-nav .pf-nav-verweis {
  display: flex;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  justify-content: center;
  align-items: center;
  /* Feste Leistenhöhe statt 100%: im Handy-Menü wächst der Eintrag
     darum auf Seitenhöhe, der Link soll bei seiner Zeile bleiben. */
  height: var(--pf-nav-height);
  padding: 0 8px;
  overflow: hidden;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--pf-nav-color);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}
#pf-nav .pf-nav-verweis:hover {
  color: var(--pf-nav-color-hover);
}
#pf-nav .pf-nav-wort-huelle,
#pf-nav .pf-nav-wort {
  display: flex;
}
#pf-nav .pf-nav-wort {
  align-items: center;
}
/* Ein SVG malt mit fill, nicht mit color — ohne currentcolor bleiben
   alle Symbole schwarz, ganz gleich welche Schriftfarbe die Leiste
   gerade trägt. translateZ erzwingt eine eigene Ebene; sonst flackern
   die Glyphen beim Überblenden der Farbe. */
#pf-nav .pf-nav-verweis svg {
  fill: currentcolor;
  transform: translateZ(0);
}
#pf-nav .pf-nav-zeichen-gross,
#pf-nav .pf-nav-zeichen-klein,
#pf-nav .pf-nav-verweis-kontakt svg {
  pointer-events: none;
}
/* Das Symbol des Kontaktpunkts ragt bewusst über seine Zeile hinaus;
   ein Abschneiden wie bei den Textpunkten würde es beschneiden. */
#pf-nav .pf-nav-verweis-kontakt {
  overflow: visible;
}
#pf-nav .pf-nav-zeichen-gross {
  display: flex;
}
#pf-nav .pf-nav-zeichen-klein {
  display: none;
}

/* Der Pfeil gehört zum Handy-Menü. Oben ist er ausgeblendet, aber
   vorhanden — steps(1), weil es halb sichtbar hier nicht gibt. */
#pf-nav .pf-nav-pfeil {
  visibility: hidden;
  align-items: center;
  height: 100%;
  /* Der Pfeil ist Dekoration: Klicks sollen durch ihn hindurch auf
     den Link dahinter gehen. */
  pointer-events: none;
  transition: visibility 0.24s steps(1);
}

#pf-nav .pf-nav-zeile {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-inline-start: 0;
  height: 100%;
  list-style: none;
  cursor: default;
}
#pf-nav .pf-nav-zeile-eintrag {
  height: 100%;
  list-style: none;
}

#pf-nav .pf-nav-punkt {
  box-sizing: border-box;
}

/* Hier steckt der ganze Kniff, und er ist eine einzige Zeile:
   die Hüllen übernehmen die Darstellung ihres Elternteils.

   Oben löst sich .pf-nav-menue per display:contents auf. Über
   inherit setzt sich das durch die Hüllen fort, bis die Menüpunkte
   direkte Flex-Kinder der Leiste sind. Die Flyout-Fläche eines
   Punktes hängt dagegen unter einem gewöhnlichen Block und bleibt
   dadurch von selbst ein Block — obwohl sie dieselbe Klasse trägt.
   Ein Sonderfall dafür ist gar nicht nötig. */
#pf-nav .pf-nav-punkt.pf-nav-menue {
  display: contents;
  flex-grow: 1;
}
#pf-nav .pf-nav-flyout,
#pf-nav .pf-nav-menue-liste {
  display: inherit;
}
#pf-nav .pf-nav-menue-liste {
  justify-content: space-evenly;
}

/* Der Rückwärtsknopf gehört zur zweiten Ebene des Handy-Menüs. */
#pf-nav .pf-nav-zurueck {
  display: none;
}

/* --- Das Flyout ------------------------------------------------------
   Zusammengefaltet: Höhe wie die Leiste, um dieselbe Höhe nach oben
   verschoben. Es liegt damit deckungsgleich unter der Leiste. */

#pf-nav .pf-nav-unterflaeche {
  position: absolute;
  top: var(--pf-nav-height);
  right: 0;
  left: 0;
  height: var(--pf-nav-height);
  margin-top: calc(-1 * var(--pf-nav-height));
  overflow: hidden;
  visibility: hidden;
}
#pf-nav .pf-nav-flyout-rolle {
  margin-top: var(--pf-nav-height);
  /* Waagerecht rollbar, senkrecht nicht: eine zu lange Spaltenreihe
     soll schieben können, das Flyout selbst aber nie scrollen. */
  overflow: auto hidden;
  visibility: inherit;
}
/* Die Deckelung sitzt auf max-height, nicht auf height — und sie
   rechnet gegen die Fläche darüber. Solange die eingefaltet ist
   (Höhe der Leiste), bleibt 100% − Leistenhöhe = 0: der Behälter ist
   exakt null hoch und schneidet alles ab. Wächst die Fläche beim
   Öffnen, wächst die Deckelung im selben Zug mit. Eine feste Höhe
   müsste dafür animiert werden; so folgt sie von allein. */
@media only screen and (min-width: 834px) {
  #pf-nav .pf-nav-flyout-rolle {
    max-height: calc(100% - var(--pf-nav-height));
    overflow-y: hidden;
  }
}
#pf-nav .pf-nav-flyout-inhalt {
  display: flex;
  z-index: 2;
  max-width: 1024px;
  margin-inline: auto;
  padding: 40px 22px 84px;
  box-sizing: border-box;
  visibility: inherit;
}

/* Das Flyout der Suche ist keine Spaltenreihe, sondern ein einzelner
   Block über die volle Breite: Eingabefeld oben, Treffer darunter.
   Deshalb hier block statt flex — sonst würde das Formular zum
   schmalen Flex-Element zusammenschrumpfen. */
#pf-nav .pf-nav-suche .pf-nav-flyout-inhalt {
  display: block;
}
@media only screen and (min-width: 834px) {
  #pf-nav .pf-nav-suche .pf-nav-flyout-inhalt {
    padding-top: 32px;
    padding-bottom: 80px;
  }
}

/* Vier Spalten passen nebeneinander, die hervorgehobene darf die
   halbe Breite nehmen. Ohne Deckel zöge eine lange Überschrift die
   Spalte auf und schöbe die übrigen zusammen. */
#pf-nav .pf-nav-spalte {
  max-width: 25%;
  margin-bottom: -4px;
  padding-right: 44px;
  box-sizing: border-box;
  visibility: inherit;
}
/* Die hervorgehobene Spalte trägt größere Schrift und braucht mehr
   Luft nach rechts. */
#pf-nav .pf-nav-spalte-gross {
  max-width: 50%;
  padding-right: 88px;
}

/* Spaltentitel und Einträge starten 4px zu hoch und fahren beim
   Öffnen an ihren Platz — der Text wirkt dadurch nicht wie
   angeschaltet, sondern wie eingefahren. */
#pf-nav .pf-nav-spaltentitel {
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--pf-nav-submenu-header-color);
  visibility: inherit;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.32s, transform 0.32s;
  /* Jede Spalte startet 80ms nach der vorigen. Ohne Ersatzwert: wo
     die Nummer fehlt (Suchtreffer), ist die Rechnung ungültig und
     die Verzögerung fällt auf 0 zurück — genau richtig, dort gibt es
     nur eine Spalte. */
  transition-delay: calc(var(--pf-nav-flyout-group-number) * 0.08s + 0.08s);
}
#pf-nav .pf-nav-spaltenliste {
  margin-top: 0;
  margin-left: 0;
  list-style: none;
  visibility: inherit;
}
/* Der Abstand nach oben gehört nur dem ersten Eintrag. Die übrigen
   halten ihren Abstand über das Innenmaß ihrer Links — sonst käme
   beides zusammen und die Liste liefe auseinander. */
#pf-nav .pf-nav-spalteneintrag,
#pf-nav .pf-nav-spalteneintrag-gross {
  margin-inline: -11px;
  margin-top: 0;
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 600;
  letter-spacing: -0.01em;
  visibility: inherit;
  opacity: 0;
  transform: translateY(-4px);
}
/* Die Ausblend-Staffel. Die letzten vier Einträge einer Spalte gehen
   stufenweise schneller (0,24 → 0,18s), der Rest bleibt bei 0,24s.
   Dadurch zieht sich die Liste von unten zu, statt als Block zu
   verschwinden — das ist der Unterschied zwischen „weg" und „weg
   gegangen".

   Steht bewusst NACH der Kurzschreibweise darüber: die setzt die Dauer
   sonst wieder zurück. Fehlen die Nummern, ist die Rechnung ungültig
   und es bleibt bei den 0,24s von oben. */
#pf-nav .pf-nav-spalteneintrag:not(.pf-nav-spaltentitel),
#pf-nav .pf-nav-spalteneintrag-gross:not(.pf-nav-spaltentitel) {
  transition-property: opacity, transform;
  transition-duration: calc(0.24s - max(0,
      var(--pf-nav-flyout-item-number)
      - var(--pf-nav-flyout-item-total) + 4) * 0.02s);
}
#pf-nav .pf-nav-spalteneintrag:first-child {
  margin-top: 10px;
}
#pf-nav .pf-nav-spalteneintrag-gross {
  margin-top: 2px;
  font-family: var(--pf-schrift-display);
  font-size: 24px;
  letter-spacing: 0.009em;
}
#pf-nav .pf-nav-spalteneintrag-gross:first-child {
  margin-top: 6px;
}
#pf-nav .pf-nav-spaltenverweis {
  display: inline-block;
  margin-bottom: -6px;
  padding: 7px 11px;
  line-height: 1.33337;
  color: var(--pf-nav-color-secondary);
  text-decoration: none;
  visibility: inherit;
  cursor: pointer;
  transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}
#pf-nav .pf-nav-spaltenverweis:hover {
  color: var(--pf-nav-color-hover);
}
#pf-nav .pf-nav-spalteneintrag-gross .pf-nav-spaltenverweis {
  margin-bottom: 0;
  padding-block: 0;
  line-height: 1.16667;
}

/* --- Suchfeld -------------------------------------------------------- */

#pf-nav .pf-nav-suchfeld,
#pf-nav .pf-nav-treffer {
  visibility: inherit;
}
/* 15px breiter als der Platz: das Eingabefeld darf mit seinen
   negativen Außenabständen links und rechts hinausragen, damit die
   Lupe im Innenabstand sitzt und der Text trotzdem an der Kante
   beginnt.

   Die Maße hier und beim Löschknopf stehen in Pixeln, obwohl die
   Vorlage sie als em der Leistenschrift schreibt (40/17, 30/17,
   32/17, 38/17). Der Schriftgrad der Leiste liegt bei 17px fest,
   das Ergebnis ist also dasselbe — nur bleibt über den Umweg em in
   der letzten Stelle ein Rundungsrest von 0,008px hängen, und der
   verschiebt die Trefferliste darunter um ein ganzes Pixel. */
#pf-nav .pf-nav-suchfeld-huelle {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: calc(100% + 15px);
  height: 40px;
  visibility: inherit;
}
/* Der Rahmen des Eingabefelds ist unsichtbar; die Lupe links steht
   im Innenabstand, deshalb der negative Außenabstand darum herum. */
#pf-nav .pf-nav-suchfeld-eingabe {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  margin-inline: -30px -31px;
  padding: 1px 34px 0;
  border: 0;
  box-sizing: border-box;
  background: none;
  font-family: var(--pf-schrift-display);
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.009em;
  color: var(--pf-nav-color-secondary);
  visibility: inherit;
}
/* Das Kreuz zum Leeren ist gedämpft, nicht in Schriftfarbe: es soll
   erst auffallen, wenn im Feld etwas steht. fill wird vererbt, die
   Symbole darin brauchen also keine eigene Angabe. */
#pf-nav .pf-nav-suchfeld-loeschen {
  fill: var(--pf-nav-search-icon-fill);
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.6, 1),
              fill 0.32s cubic-bezier(0.4, 0, 0.6, 1),
              visibility 0.32s steps(1);
  display: flex;
  position: relative;
  width: 30px;
  height: 32px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  justify-content: center;
  align-items: center;
  padding-block: 2px;
  border: 0;
  background: none;
  opacity: 0;
  visibility: inherit;
}
#pf-nav .pf-nav-treffer {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 32px;
}

/* --- Burger (nur Handy) ----------------------------------------------
   48×48 ist kein Zufall, sondern die kleinste Fläche, die sich mit
   dem Daumen sicher treffen lässt. Das Symbol darin ist kleiner. */

#pf-nav .pf-nav-burger {
  display: none;
  width: 48px;
}
#pf-nav .pf-nav-burger-knopf {
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.6, 1),
              color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  opacity: 0.8;
  cursor: pointer;
}

/* --- Vorhang ---------------------------------------------------------
   Legt sich bei offenem Menü über die Seite. Eine Ebene unter der
   Navigation, damit die Leiste sichtbar bleibt. */

.pf-nav-vorhang {
  position: fixed;
  inset: 0;
  z-index: 9998;
  width: 100%;
  height: 100%;
  background: rgba(232, 232, 237, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  visibility: hidden;
  opacity: 0;
  /* Bewusst kürzer als beim Vorbild und ohne Vorlauf: der Vorhang
     gehört zum Ausblenden, nicht danach. Die Fläche darüber fährt in
     0,26–0,34s zu (nav.js rechnet die Dauer aus der Strecke); mit
     0,32s plus 80ms Vorlauf stünde der Weichzeichner danach noch bis
     zu 140ms allein da. Genau das liest sich als Hängenbleiben. */
  transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1),
              visibility 0.24s step-end;
}
.pf-kopf-dunkel .pf-nav-vorhang {
  background: rgba(0, 0, 0, 0.4);
}
/* Das Geschwister-Zeichen ist Absicht: der Vorhang liegt neben der
   Leiste, nicht in ihr — sonst läge er unter ihr und würde sie
   miteinweichen. */
/* step-start statt step-end: beim Öffnen ist der Vorhang sofort da und
   seine Deckkraft fährt hoch. Mit dem step-end der Grundregel bliebe er
   0,32s unsichtbar und erschiene dann auf einen Schlag voll — genau der
   harte Ansatz statt einer Überblendung. */
.pf-nav-flyout-offen ~ .pf-nav-vorhang {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.6, 1) 80ms,
              visibility 0.32s step-start 80ms;
}

/* --- Farbrollen ------------------------------------------------------
   Die Leiste kennt zwei Rollen. Der Normalfall ist hell — Schrift in
   Schwarz auf milchigem Weiß. Seiten mit .pf-kopf-dunkel drehen das
   um. Beides läuft über dieselben Variablen, damit die Regeln oben nur
   einmal geschrieben werden müssen und portfolio.css je Seite
   umstellen kann. */

#pf-nav {
  --pf-nav-color: rgba(0, 0, 0, 0.8);
  --pf-nav-color-secondary: #333336;
  --pf-nav-color-hover: #000000;
  --pf-nav-submenu-header-color: #6e6e73;
}
/* Das Suchfeld führt eigene Töne: seine Symbole sind eine Stufe
   zurückgenommen gegenüber der Schrift daneben. */
#pf-nav .pf-nav-suche {
  --pf-nav-search-icon-fill: #6e6e73;
  --pf-nav-search-icon-active-fill: #333336;
}
#pf-nav .pf-nav-burger-knopf {
  color: #000000;
}

.pf-kopf-dunkel #pf-nav {
  --pf-nav-color: rgba(255, 255, 255, 0.8);
  --pf-nav-color-secondary: #e8e8ed;
  --pf-nav-color-hover: #ffffff;
  --pf-nav-submenu-header-color: #86868b;
}
.pf-kopf-dunkel #pf-nav .pf-nav-suche {
  --pf-nav-search-icon-fill: #86868b;
  --pf-nav-search-icon-active-fill: #e8e8ed;
}
.pf-kopf-dunkel #pf-nav .pf-nav-burger-knopf {
  color: #fff;
}

/* Der milchige Untergrund der Leiste. Wo der Browser hinter der
   Fläche weichzeichnen kann, darf die Farbe durchsichtiger sein. */
.pf-nav-milchglas #pf-nav {
  --pf-leiste-background: rgba(250, 250, 252, 0.92);
  background: var(--pf-leiste-background);
  backdrop-filter: var(--pf-leiste-backdrop-filter);
  -webkit-backdrop-filter: var(--pf-leiste-backdrop-filter);
}
/* Die aufklappende Fläche trägt dieselbe Farbe wie die Leiste — sonst
   sähe man beim Öffnen eine Kante zwischen beiden. Nur im Desktop:
   auf dem Handy legt sich das Menü als eigene Fläche über die Seite
   und bringt seine Farbe selbst mit. */
@media only screen and (min-width: 834px) {
  .pf-nav-milchglas #pf-nav .pf-nav-unterflaeche {
    background: var(--pf-leiste-background);
  }
}
.pf-nav-milchglas.pf-kopf-dunkel #pf-nav {
  --pf-leiste-background: rgba(22, 22, 23, 0.88);
}
@supports (backdrop-filter: initial) {
  .pf-nav-milchglas #pf-nav {
    --pf-leiste-backdrop-filter: saturate(180%) blur(20px);
    --pf-leiste-background: rgba(250, 250, 252, 0.8);
  }
  .pf-nav-milchglas.pf-kopf-dunkel #pf-nav {
    --pf-leiste-background: rgba(22, 22, 23, 0.8);
  }
}

/* ---------- Tablet: schmaleres Raster, Leiste bleibt oben ---------- */
@media only screen and (max-width: 1068px) {
  #pf-nav .pf-nav-flaeche,
  #pf-nav .pf-nav-flyout-inhalt {
    max-width: 736px;
  }
}

/* ----------------------------------------------------------------------
   Handy — ab hier ist die Leiste ein Burger und das Menü eine eigene
   Fläche über der Seite. Der Umbruch liegt bei 833px.
   ---------------------------------------------------------------------- */
@media only screen and (max-width: 833px) {
  html {
    --pf-nav-height: 48px;
  }

  /* --- Die Bewegung des Handy-Menüs -------------------------------
     Ohne diese Übergänge springt beim Antippen des Burgers alles auf
     einmal ins Bild. Die Fläche blendet ihren Untergrund ein, die
     Punktzeilen fahren von oben herein, der Rückwärtsknopf kommt von
     links. Erst zusammen ergibt das eine Bewegung statt eines
     Schnitts. */
  /* Die Fläche fährt auf. Zwei Dinge sind dafür nötig:

     Erstens eine Höhe im Ruhezustand. Sie ergäbe sich auch aus top
     und bottom — aber eine Überblendung braucht auf beiden Seiten
     eine Zahl. Von "ergibt sich" nach 100vh lässt sich nicht fahren,
     das springt.

     Zweitens feste Dauern statt --pf-nav-flyout-rate. Die rechnet
     nav.js nur fürs Desktop-Flyout aus der Strecke aus; beim
     Hamburger-Menü bleibt sie auf 0s, und alles wäre sofort da. */
  #pf-nav .pf-nav-flaeche {
    height: var(--pf-nav-height);
    transition: height 0.32s cubic-bezier(0.4, 0, 0.6, 1),
                background 0.32s cubic-bezier(0.4, 0, 0.6, 1) 0.08s;
  }
  /* Die Flächen von Suche und Kontakt blenden ein statt zu erscheinen. */
  #pf-nav .pf-nav-unterflaeche {
    transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1),
                visibility 0.24s step-end;
  }
  /* Die Punktzeilen — sie tragen die Textelemente des Menüs. */
  #pf-nav .pf-nav-zeile {
    transition-property: opacity, transform, visibility;
    transition-duration: 0.24s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1),
                                cubic-bezier(0.4, 0, 0.6, 1), steps(1, start);
  }
  #pf-nav .pf-nav-punkt.pf-nav-zurueck {
    transition-property: opacity, transform, visibility;
    transition-duration: 0.24s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1),
                                cubic-bezier(0.4, 0, 0.6, 1), steps(1);
  }
  #pf-nav .pf-nav-punkt,
  #pf-nav .pf-nav-zurueck-knopf {
    transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
  }
  /* Die Spaltentitel fahren hier nicht ein — das Menü selbst schiebt
     sich schon herein, ein zweiter Einzug darin wirkt unruhig. */
  #pf-nav .pf-nav-spaltentitel,
  #pf-nav .pf-nav-spalteneintrag:not(.pf-nav-spaltentitel),
  #pf-nav .pf-nav-spalteneintrag-gross:not(.pf-nav-spaltentitel) {
    transition: all 0s;
  }

  /* Die Fläche liegt jetzt selbst absolut in der Leiste und wächst
     beim Öffnen nach unten — deshalb kein max-width mehr. */
  #pf-nav .pf-nav-flaeche {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    height: auto;
    /* Das Raster gilt weiter, auch wenn die Leiste schon umgebrochen
       ist: bis 734px 6,25 % Rand, darüber eine 692px-Spalte. */
    padding-inline: 6.25%;
    background: var(--pf-leiste-background);
  }

  /* Die Farbe trägt hier die Fläche darin, nicht die Leiste selbst:
     beim Aufklappen wächst die Fläche nach unten und nimmt ihren
     Untergrund mit. Läge er auf der Leiste, bliebe er oben stehen. */
  .pf-nav-milchglas #pf-nav {
    background: none;
  }

  #pf-nav .pf-nav-liste {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    flex: 1;
    height: auto;
    margin-inline: 0;
    box-sizing: border-box;
  }

  /* Der Burger liegt oben rechts, das Menü füllt darunter alles. */
  #pf-nav .pf-nav-burger {
    display: block;
    margin-top: 0;
  }
  #pf-nav .pf-nav-burger-knopf {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  /* Bewusst ohne right: die Fläche ist genau so breit wie ihr Knopf
     und sitzt links; mit right:0 liefe sie über die ganze Leiste und
     finge Klicks ab, die den Menüpunkten gehören. */
  #pf-nav .pf-nav-punkt.pf-nav-zurueck {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 48px;
    height: 48px;
    bottom: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(4px);
  }
  #pf-nav .pf-nav-zurueck-knopf {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--pf-nav-color-secondary);
    visibility: inherit;
  }

  /* Die Hüllen sind hier echte Elemente: sie bilden die Fläche, auf
     der die Menüpunkte untereinander stehen. */
  /* 48px ist die kleinste Fläche, die sich mit dem Daumen sicher
     treffen lässt — deshalb bekommt jeder Punkt der Leiste sie,
     unabhängig davon, wie breit sein Symbol ist. Nur der Menüblock
     ist keine Schaltfläche, sondern die Hülle darum. */
  /* Höhe nach Inhalt statt nach der Leiste: sobald das Menü
     aufklappt, wird die Liste seitenhoch — die Punkte darin sollen
     das nicht mitmachen. */
  #pf-nav .pf-nav-punkt {
    width: auto;
    height: auto;
  }
  #pf-nav .pf-nav-punkt:not(.pf-nav-menue, .pf-nav-punkt-menue, .pf-nav-zurueck) {
    width: 48px;
  }
  /* Wieder ein Listeneintrag: oben war er per contents aufgelöst. */
  #pf-nav .pf-nav-punkt.pf-nav-menue {
    display: list-item;
    position: absolute;
    visibility: hidden;
  }
  #pf-nav .pf-nav-flyout {
    display: block;
  }
  #pf-nav .pf-nav-flyout:not(.pf-nav-unterflaeche) {
    visibility: inherit;
    position: absolute;
    top: 0;
    right: 0;
    /* 2px über den unteren Rand hinaus: darunter sitzt die Kante der
       Leiste, die sonst als Linie durchscheint. */
    bottom: -2px;
    left: 0;
    padding-top: 50px;
    box-sizing: border-box;
  }
  #pf-nav .pf-nav-menue-liste {
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 84px;
    visibility: inherit;
  }
  #pf-nav .pf-nav-punkt-menue {
    opacity: 0;
    visibility: hidden;
  }

  /* Aus der Zeile wird eine Liste: die Punkte stehen untereinander
     und werden groß gesetzt, der Pfeil rückt an den rechten Rand. */
  #pf-nav .pf-nav-verweis,
  #pf-nav .pf-nav-wort-huelle,
  #pf-nav .pf-nav-pfeil {
    font-family: var(--pf-schrift-display);
    font-size: 28px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.007em;
  }
  /* Umbrechen dürfen nur die Textpunkte des Menüs — hier ist Platz
     dafür. Die Symbolpunkte oben in der Leiste behalten nowrap. */
  #pf-nav .pf-nav-zeile-verweis,
  #pf-nav .pf-nav-pfeil {
    white-space: normal;
  }
  /* Die Punkte des Menüs sind zweizeilig gesetzt und richten sich
     nach ihrem Inhalt — anders als die Symbole in der Leiste. */
  #pf-nav .pf-nav-punkt-menue .pf-nav-verweis {
    height: auto;
  }
  #pf-nav .pf-nav-zeile {
    /* Inhaltshöhe statt 100%: das Elternteil fährt beim Wechsel auf
       die zweite Ebene auf null, die Zeile selbst soll bleiben. */
    height: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
  }
  #pf-nav .pf-nav-zeile-eintrag {
    visibility: inherit;
  }
  #pf-nav .pf-nav-zeile-verweis {
    justify-content: space-between;
    align-items: flex-start;
    padding-inline: 48px;
    color: var(--pf-nav-color-secondary);
    visibility: inherit;
  }
  #pf-nav .pf-nav-wort-huelle,
  #pf-nav .pf-nav-wort {
    color: var(--pf-nav-color-secondary);
    visibility: inherit;
  }
  #pf-nav .pf-nav-zeichen-gross {
    display: none;
  }
  #pf-nav .pf-nav-zeichen-klein {
    display: flex;
  }
  /* Der Pfeil hängt in den rechten Innenabstand des Links hinein —
     daher der negative Außenabstand in genau dessen Höhe. */
  /* Feste 47px statt 100%: der Pfeil sitzt einen Punkt höher als die
     Zeile, damit seine Spitze auf der Mittellinie der Schrift liegt
     und nicht darunter. */
  #pf-nav .pf-nav-pfeil {
    display: block;
    height: 47px;
    margin-top: -1px;
    margin-right: -48px;
    padding-right: 19px;
    white-space: normal;
    transform: translateX(0);
  }
  /* Der Pfeil zeigt hier nach rechts — dasselbe Zeichen, gespiegelt. */
  #pf-nav .pf-nav-pfeil svg {
    transform: scaleX(-1);
  }
  /* Der Pfeil des Rückwärtsknopfs sitzt nicht in einem Link — die
     fill-Regel von oben greift hier also nicht. Sie gehört ans SVG
     selbst, nicht an die Hülle: fill wird vererbt, und die Hülle
     bliebe sonst mit einem Wert zurück, den sie nie braucht. */
  #pf-nav .pf-nav-pfeil-zeichen svg {
    fill: currentcolor;
  }
  #pf-nav .pf-nav-pfeil-zeichen {
    display: block;
    margin-left: -1px;
    color: var(--pf-nav-color-secondary);
    visibility: inherit;
  }

  /* Auf dem Handy zeigt nicht das eingefaltete Flyout die Spalten,
     sondern die Fläche darüber — die Flyouts der Menüpunkte fallen
     ganz weg. Der lange Selektor ist Absicht: er muss die Regel
     schlagen, die alle Flächen hier auf block stellt. Suche und
     Kontakt hängen nicht im Menü und behalten ihre. */
  #pf-nav .pf-nav-menue .pf-nav-punkt .pf-nav-flyout {
    display: none;
  }
  #pf-nav .pf-nav-unterflaeche {
    top: 0;
    bottom: auto;
    height: 100%;
    margin-top: 0;
    opacity: 0;
  }
  #pf-nav .pf-nav-flyout-rolle {
    margin-top: 0;
    padding-bottom: 84px;
    overflow: visible;
    height: auto;
  }
  #pf-nav .pf-nav-flyout-inhalt {
    flex-wrap: wrap;
    margin-inline: auto;
    padding-inline: 48px;
    padding-bottom: 0;
  }
  /* Der Deckel von oben gilt hier nicht: die Spalten stehen
     untereinander und nehmen die volle Breite. */
  #pf-nav .pf-nav-spalte,
  #pf-nav .pf-nav-spalte-gross {
    max-width: none;
  }
  #pf-nav .pf-nav-spalte {
    padding-right: 48px;
    padding-bottom: 92px;
    margin-bottom: 0;
  }
  #pf-nav .pf-nav-spalte-gross {
    flex-basis: 75%;
    margin-right: 25%;
    padding-right: 96px;
    padding-bottom: 52px;
  }
  #pf-nav .pf-nav-spalte-gross .pf-nav-spaltentitel {
    display: none;
  }
  /* Die Spaltentitel fahren hier nicht ein — das Menü selbst schiebt
     sich schon von der Seite herein. Ausgenommen sind Titel, die
     zugleich Menüeintrag sind: die gehören zur Staffel darunter. */
  #pf-nav .pf-nav-spaltentitel {
    font-size: 17px;
    line-height: 1.2353;
    letter-spacing: -0.022em;
    transform: none;
  }
  #pf-nav .pf-nav-spaltentitel:not(.pf-nav-spalteneintrag-gross) {
    opacity: 1;
  }
  /* Groß gesetzt wird hier nur die hervorgehobene Spalte. Die
     übrigen Einträge behalten die Textgröße der Seite — sonst wäre
     die Fläche nach zwei Punkten voll. */
  /* Die einfachen Einträge fallen hier auf die Textgröße der Seite
     zurück — die 12px oben sind ein Desktop-Maß. */
  #pf-nav .pf-nav-spalteneintrag {
    margin-top: 0;
    font-size: 17px;
    line-height: 1.47059;
    letter-spacing: -0.022em;
  }
  #pf-nav .pf-nav-spalteneintrag,
  #pf-nav .pf-nav-spalteneintrag-gross {
    transform: none;
  }
  #pf-nav .pf-nav-spalteneintrag:first-child {
    margin-top: 14px;
  }
  #pf-nav .pf-nav-spalteneintrag-gross {
    margin-top: 0;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0.007em;
  }
  #pf-nav .pf-nav-spalteneintrag-gross:first-child {
    margin-top: -3px;
  }
  /* max-content: der Link ist nur so breit wie seine Schrift. Sonst
     reichte seine Klickfläche über die ganze Menübreite. */
  #pf-nav .pf-nav-spaltenverweis {
    display: flex;
    align-items: center;
    max-width: max-content;
    margin-bottom: -5px;
    padding-top: 8px;
    line-height: 1.47059;
  }
  #pf-nav .pf-nav-spalteneintrag-gross .pf-nav-spaltenverweis {
    line-height: 1.14286;
  }

  #pf-nav .pf-nav-suchfeld-eingabe {
    margin-inline: -38px -33px;
    padding-inline: 42px 38px;
    padding-top: 0;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0.007em;
  }
  #pf-nav .pf-nav-suchfeld-loeschen {
    width: 32px;
    height: 38px;
    margin-left: 1px;
    padding-block: 0;
  }
  #pf-nav .pf-nav-treffer {
    margin-top: 49px;
  }
}

/* Zwischen 735 und 833 gilt für die Leiste weiterhin die 692er-Spalte
   des Tablet-Rasters, obwohl sie schon als Burger erscheint. */
@media only screen and (min-width: 735px) and (max-width: 833px) {
  #pf-nav .pf-nav-flaeche {
    padding-inline: calc((100% - 692px) / 2);
  }
}

/* Erst hier wird aus den nebeneinander liegenden Spalten des Menüs
   eine einzige Reihe untereinander — der Platz reicht sonst nicht. */
@media only screen and (max-width: 640px) {
  #pf-nav .pf-nav-flyout-inhalt {
    flex-direction: column;
  }
  #pf-nav .pf-nav-spalte,
  #pf-nav .pf-nav-spalte-gross {
    flex-basis: auto;
    margin-right: 0;
    padding-right: 0;
  }
}

/* Ab Tablet aufwärts trägt die Leiste die Wortmarken als Grafik; der
   Text daneben bleibt nur für Vorleseprogramme stehen. */
@media only screen and (min-width: 834px) {
  #pf-nav .pf-nav-wort {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(0 0 99.9% 99.9%);
  }
}

/* ======================================================================
   Der geöffnete Zustand
   ----------------------------------------------------------------------
   Bis hierher beschreibt die Datei die Leiste in Ruhe. Was folgt, gilt
   erst, wenn nav.js eine der drei Klassen setzt:

     pf-nav-menue-offen     das Handy-Menü ist ausgefahren
     pf-nav-flyout-offen    eine Fläche ist offen
     pf-nav-ebene-offen     darin ist eine zweite Ebene offen

   Im Desktop regelt portfolio.css diesen Teil; hier steht, was das
   Handy-Menü braucht. Der Aufbau ist zweistufig: erst schiebt sich die
   Liste der Punkte herein, dann ersetzt eine Unterebene sie — die
   Punkte fahren dabei auf Höhe null zusammen, statt zu verschwinden,
   damit die Fläche darunter nicht springt.
   ====================================================================== */

:root {
  --pf-nav-background-opened: #fafafc;
  --pf-nav-background-opened-dark: #161617;
}

/* Der Kontaktpunkt hat eine eigene Hülle, weil sie beim Öffnen des
   Menüs als Ganzes zurücktritt — der Link darin bleibt unangetastet. */
#pf-nav .pf-nav-kontakt-huelle {
  position: relative;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1) 80ms,
              visibility 0.24s step-start 80ms;
}

/* Offen trägt die Fläche die Farbe, nicht die Leiste. */
#pf-nav.pf-nav-flyout-offen {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- Desktop ---------- */
@media only screen and (min-width: 834px) {
  /* Hier passiert das eigentliche Aufklappen: die eingefaltete Fläche
     wird sichtbar und wächst auf die Höhe, die nav.js gemessen und in
     --pf-nav-flyout-height gelegt hat. */
  #pf-nav .pf-nav-punkt.pf-nav-punkt-offen .pf-nav-unterflaeche {
    visibility: visible;
    height: var(--pf-nav-flyout-height);
    background: var(--pf-nav-background-opened);
    transition: height var(--pf-nav-flyout-rate) cubic-bezier(0.4, 0, 0.6, 1),
                visibility var(--pf-nav-flyout-rate) step-start,
                background var(--pf-nav-flyout-rate) cubic-bezier(0.4, 0, 0.6, 1);
  }
  .pf-kopf-dunkel #pf-nav .pf-nav-punkt.pf-nav-punkt-offen .pf-nav-unterflaeche {
    background: var(--pf-nav-background-opened-dark);
  }
  /* Beim Wechsel zwischen zwei Menüpunkten fährt nur noch die Höhe —
     sichtbar ist die Fläche ja schon. */
  #pf-nav:not(.pf-nav-faehrt) .pf-nav-punkt.pf-nav-punkt-offen .pf-nav-unterflaeche {
    transition: height var(--pf-nav-flyout-rate) cubic-bezier(0.4, 0, 0.6, 1);
  }

  /* Die Staffel: jede Spalte startet etwas später als die vorige,
     innerhalb einer Spalte jeder Eintrag 20ms nach dem darüber. Die
     hervorgehobenen Spalten zählen doppelt, damit die große Spalte
     links zuerst dasteht und der Rest nachzieht. */
  #pf-nav .pf-nav-spalte {
    --pf-nav-flyout-group-delay:
      min((var(--pf-nav-flyout-elevated-group-count) * 80ms)
            + ((var(--pf-nav-flyout-group-number)
                - var(--pf-nav-flyout-elevated-group-count)) * 40ms),
          var(--pf-nav-flyout-group-number) * 80ms);
  }
  /* Der geöffnete Punkt hebt sich ab: volle Schriftfarbe statt der
     leicht zurückgenommenen der übrigen. */
  #pf-nav .pf-nav-punkt-offen .pf-nav-verweis {
    color: var(--pf-nav-color-hover);
  }
  #pf-nav .pf-nav-punkt.pf-nav-punkt-offen .pf-nav-spaltentitel {
    opacity: 1;
    transform: translateY(0);
  }
  #pf-nav .pf-nav-punkt.pf-nav-punkt-offen .pf-nav-spalteneintrag,
  #pf-nav .pf-nav-punkt.pf-nav-punkt-offen .pf-nav-spalteneintrag-gross {
    opacity: 1;
    transform: translateY(0);
    transition-duration: 0.32s;
    transition-delay: calc(var(--pf-nav-flyout-group-delay)
                           + var(--pf-nav-flyout-item-number) * 20ms + 80ms);
  }
}

@media only screen and (max-width: 833px) {
  /* Das Menü füllt den Bildschirm und rollt, wenn es länger wird. */
  #pf-nav.pf-nav-flyout-offen .pf-nav-flaeche {
    height: calc(100vh - var(--pf-leiste-preceding-element-height, 0px));
    background: var(--pf-nav-background-opened);
    overflow: hidden scroll;
    transition-delay: 0ms;
  }
  .pf-kopf-dunkel #pf-nav.pf-nav-flyout-offen .pf-nav-flaeche {
    background: var(--pf-nav-background-opened-dark);
  }
  /* Hier trägt die Fläche selbst die Farbe; ein zweiter Weichzeichner
     darunter machte das Bild nur trüb. */
  .pf-nav-flyout-offen ~ .pf-nav-vorhang {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Logo und Suche treten zurück, sobald das Menü offen ist — sie
     gehören zur Leiste, nicht zum Menü. Der Kontaktpunkt tritt als
     ganze Hülle zurück, sonst bliebe seine Fläche klickbar. Nur hier:
     im Desktop bleibt die Leiste neben dem Flyout stehen. */
  #pf-nav .pf-nav-liste > .pf-nav-punkt:not(.pf-nav-menue) .pf-nav-verweis {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1) 80ms,
                visibility 0.24s step-start 80ms;
  }
  #pf-nav.pf-nav-flyout-offen
    .pf-nav-liste > .pf-nav-punkt:not(.pf-nav-menue, .pf-nav-kontakt, .pf-nav-punkt-offen) .pf-nav-verweis,
  #pf-nav.pf-nav-flyout-offen .pf-nav-punkt:not(.pf-nav-punkt-offen) > .pf-nav-kontakt-huelle {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1),
                visibility 0.24s step-end;
  }

  #pf-nav.pf-nav-menue-offen .pf-nav-menue {
    visibility: visible;
  }
  /* Im offenen Menü ruht der Pfeil, bis der Punkt angetippt wird. */
  #pf-nav.pf-nav-menue-offen .pf-nav-pfeil {
    opacity: 0;
  }
  #pf-nav.pf-nav-menue-offen .pf-nav-zeile {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
  }
  #pf-nav.pf-nav-flyout-offen .pf-nav-punkt-menue {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  /* Zweite Ebene: der Rückwärtsknopf kommt, die Punkte der ersten
     Ebene fahren auf null zusammen. */
  #pf-nav.pf-nav-ebene-offen .pf-nav-zurueck {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(0) scale(1);
    transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1) 0.16s,
                transform 0.24s cubic-bezier(0.4, 0, 0.6, 1) 0.16s;
  }
  #pf-nav.pf-nav-ebene-offen .pf-nav-menue > .pf-nav-flyout {
    pointer-events: none;
    overflow: initial;
  }
  /* Die Punkte der ersten Ebene fahren auf null zusammen, statt zu
     verschwinden — so bleibt die Fläche darunter an ihrem Platz.
     overflow:hidden schneidet ab, was dabei überstünde. */
  #pf-nav.pf-nav-ebene-offen:not(.pf-nav-faehrt)
    .pf-nav-menue .pf-nav-punkt {
    height: 0;
  }
  #pf-nav.pf-nav-ebene-offen .pf-nav-zeile {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: none;
  }

  /* Die geöffnete Fläche selbst. */
  /* Bewusst ohne Kindzeichen: die Fläche des Kontaktpunkts hängt eine
     Ebene tiefer als die übrigen — sie sitzt in einer eigenen Hülle,
     die beim Öffnen zurücktritt. Mit ">" blieb sie unsichtbar, und
     der Kontakt-Flyout wirkte leer. */
  #pf-nav .pf-nav-punkt.pf-nav-punkt-offen .pf-nav-flyout {
    display: block;
    overflow: initial;
    visibility: visible;
    opacity: 1;
    width: 100%;
    pointer-events: auto;
    /* step-start: beim Öffnen sofort da und dann einblenden. Der
       Vorlauf lässt der Fläche darunter den ersten Moment. */
    transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1) 0.08s,
                visibility 0.24s step-start 0.08s;
  }
  #pf-nav.pf-nav-ebene-offen .pf-nav-flyout-rolle {
    padding-bottom: 0;
  }
  /* Ohne Übergang: die Fläche ist eben erst erschienen, ein Einfaden
     der Texte darin käme doppelt. */
  #pf-nav.pf-nav-ebene-offen .pf-nav-spaltentitel {
    transition: none;
  }
  #pf-nav.pf-nav-ebene-offen .pf-nav-spalteneintrag,
  #pf-nav.pf-nav-ebene-offen .pf-nav-spalteneintrag-gross {
    opacity: 1;
    transition: none;
  }
}