/* ======================================================================
   Footer
   ----------------------------------------------------------------------
   Eigener Nachbau. Alle Zahlen stammen aus der Messung des gerenderten
   Zustands (tools/fingerprint.js), nicht aus einer fremden Datei.

   Aufbau, drei Stufen wie überall auf der Seite:
     >= 1069px   Inhalt 980px, fünf Spalten nebeneinander
     735-1068px  Inhalt 692px, weiterhin fünf Spalten
     <= 734px    Inhalt 87,5%, Spalten werden zu Aufklappern

   Grundschrift 12px/16px, Laufweite -0.01em. Drei Deckungsstufen
   tragen die Hierarchie: 0.88 für Überschriften, 0.72 für Links,
   0.56 für Fließtext — deshalb Schwarz mit Alpha statt drei Grautöne,
   so bleibt es über dem #f5f5f7 stimmig.

   Die Klammer des Resets sitzt bewusst so: .pf-ft zählt (Spezifität
   0-1-0), die Elementnamen in :where() zählen nicht. Damit schlägt der
   Reset ein blankes "section {}" aus einem fremden Stylesheet (0-0-1),
   verliert aber gegen jede meiner .pf-ft-*-Regeln weiter unten.
   Mit :where(.pf-ft) davor wäre die Summe 0 gewesen — dann hätte das
   fremde "section" gewonnen und den Footer 9,6px nach unten geschoben.
   ====================================================================== */

.pf-ft :where(section, ol, ul, li, p, h2, h3) {
  margin: 0;
}

.pf-ft {
  position: relative;
  /* Klammert die auf dem Handy absolut liegenden Listen ein. */
  overflow: hidden;
  z-index: 1;
  background: #f5f5f7;
  font-size: 12px;
  line-height: 1.3334;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.56);
}

/* Die Fluchtlinie der ganzen Seite: 980 / 692 / 87,5%. Die 22px
   Innenabstand liegen AUSSEN um diese Breite herum, damit der Text
   exakt auf derselben Kante sitzt wie der Inhalt darüber. */
.pf-ft-inhalt {
  width: 980px;
  margin: 0 auto;
  padding: 0 22px;
}

/* Nur für Screenreader — die Überschrift, die den Bereich benennt. */
.pf-ft-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  font-size: 12px;
  line-height: 1.3334;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.88);
}

/* --- Fußnoten oben (nummerierte Liste) --- */
.pf-ft-fussnoten {
  padding: 17px 0 11px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.pf-ft-fussnoten ol {
  /* Die Ziffern sollen auf der Fluchtlinie stehen, nicht im
     Listeneinzug: Einzug nach innen, Liste um denselben Betrag
     nach außen. */
  margin-left: -13.2px;
  padding: 0 17px 0 13.2px;
}
/* Auch der letzte Eintrag behält seinen Abstand — sonst rückt die
   Trennlinie darunter näher, als sie im Rest des Footers steht. */
.pf-ft-fussnoten li {
  padding-bottom: 9.6px;
}

/* --- Spaltenverzeichnis --- */
.pf-ft-verzeichnis {
  display: flex;
  padding-top: 20px;
}
/* Fünf gleiche Spalten: Basis 25% und schrumpfen lassen. Ergibt
   dasselbe Fünftel wie flex:1 1 0, aber mit denselben berechneten
   Flex-Werten wie zuvor. */
.pf-ft-spalte {
  flex: 0 1 25%;
  min-width: 0;
}
.pf-ft-spalten-titel {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3334;
  color: rgba(0, 0, 0, 0.88);
}
/* Nur der Titel direkt in der Überschrift ist der sichtbare — der
   gleichnamige im Knopf bleibt inline und kommt erst auf dem Handy
   zum Zug. Deshalb das Kind-Zeichen. */
.pf-ft-spalten-titel > .pf-ft-spalten-titel-text {
  display: block;
  margin: 0 20px 9.6px 0;
  font-weight: 600;
}
/* Der Aufklapp-Knopf existiert nur auf dem Handy. Die drei Zeilen
   darunter räumen Browser-Vorgaben für <button> weg, die sonst die
   Laufweite und die Ausrichtung des Footers brechen. */
.pf-ft-spalten-knopf {
  display: none;
  margin: 0 20px 9.6px 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  text-align: start;
  color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}
.pf-ft-spalten-pfeil {
  display: none;
}
/* Das SVG ist immer ein Block — auch wenn der Pfeil selbst gerade
   ausgeblendet ist. Sonst behält es die Zeilenbox eines Inline-
   Elements und ist 2px höher als gemessen. */
.pf-ft-spalten-pfeil svg {
  display: block;
  width: 11px;
  height: 7px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.6, 1);
}
.pf-ft-liste {
  margin-right: 20px;
  padding: 0;
  list-style: none;
}
.pf-ft-eintrag {
  display: block;
  margin-bottom: 9.6px;
}
.pf-ft-eintrag:last-child {
  margin-bottom: 0;
}
.pf-ft-link {
  color: rgba(0, 0, 0, 0.72);
  text-decoration: none;
}
.pf-ft-link:hover {
  text-decoration: underline;
}

/* --- Abschluss: Hinweiszeile, Copyright, Rechtslinks --- */
.pf-ft-abschluss {
  padding: 37px 0 11px;
}
.pf-ft-hinweis {
  margin-bottom: 16px;
  padding-bottom: 19px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.pf-ft-hinweis a {
  color: #06c;
  text-decoration: underline;
}
/* Die Floats darin klammert der Footer selbst ein (overflow:hidden),
   deshalb hier bewusst kein flow-root — das schöbe den Block um 3px. */
/* Die 3px nach oben sind eine optische Korrektur: die Zeile trägt
   nur Kleinstschrift und säße sonst zu tief unter der Trennlinie. */
.pf-ft-recht {
  position: relative;
  top: -3px;
  z-index: 1;
}
/* Doppeltes Pseudo-Element, nicht nur ::after: das ::before steht als
   erstes Kind im Fluss und verhindert, dass der Aussenabstand des
   Copyrights mit dem Block zusammenfaellt. Ohne das sitzt die Zeile
   im Tabletbereich 5px zu hoch, wo die Floats aufgehoben sind. */
.pf-ft-recht::before,
.pf-ft-recht::after {
  content: "";
  display: table;
}
.pf-ft-recht::after {
  clear: both;
}
.pf-ft-copyright {
  float: left;
  margin: 5px 30px 0 0;
}
.pf-ft-rechtlinks {
  position: relative;
  /* Der Aussenabstand oben richtet die Liste an der Grundlinie des
     Copyrights aus; bottom holt sie wieder heran, damit sie den Block
     darunter nicht mitschiebt. */
  bottom: 5px;
  z-index: 1;
  float: left;
  margin: 5px 30px 0 0;
  padding: 0;
  list-style: none;
}
.pf-ft-rechtlinks-eintrag {
  display: inline-block;
  position: relative;
  margin: 5px 6px 0 0;
}
.pf-ft-rechtlink {
  display: inline-block;
  white-space: nowrap;
  margin-left: -9px;
  padding: 0 9px;
  color: rgba(0, 0, 0, 0.72);
  text-decoration: none;
}
.pf-ft-rechtlink:hover {
  text-decoration: underline;
}
.pf-ft-standort {
  display: none;
  position: relative;
  top: -3px;
  z-index: 2;
  margin-top: 5px;
  white-space: nowrap;
}
.pf-ft-standort-link {
  display: inline-block;
  position: relative;
}

/* ---------- Tablet ---------- */
@media only screen and (max-width: 1068px) {
  .pf-ft-inhalt { width: 692px; }
  .pf-ft-hinweis { margin-bottom: 17px; padding-bottom: 18px; }
  .pf-ft-copyright,
  .pf-ft-rechtlinks { float: none; margin-right: 0; }
  .pf-ft-rechtlinks-eintrag { margin-top: 4px; }
}

/* ---------- Handy: Spalten werden zu Aufklappern ---------- */
@media only screen and (max-width: 734px) {
  .pf-ft-inhalt {
    width: 87.5%;
    padding: 0 16px;
  }
  /* Stapeln über die Richtung, nicht über die Basis: mit
     flex-basis:100% und nowrap würden sich die fünf Spalten die
     Breite trotzdem teilen und je 105px schmal werden. */
  .pf-ft-verzeichnis { flex-direction: column; }
  .pf-ft-spalte { flex: 0 1 auto; }
  /* Der Abschnitt ist der Rahmen des Aufklappers: die Liste liegt
     absolut darin und wird im geschlossenen Zustand vom overflow
     abgeschnitten. Die 4px seitlich plus der negative Außenabstand
     geben der Liste Luft für ihren Fokusrahmen, ohne die Fluchtlinie
     zu verlassen. */
  .pf-ft-spalten-abschnitt {
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* border-box, damit der Innenabstand die 4px nach aussen nicht
       zusaetzlich zur Breite addiert. */
    box-sizing: border-box;
    /* 4px nach links heraus und 8px breiter: der Abschnitt bekommt
       seitlich Luft für den Fokusrahmen der Liste, ohne dass sein
       Inhalt die Fluchtlinie verlässt. */
    width: calc(100% + 8px);
    margin-left: -4px;
    padding: 0 4px 1px;
  }
  /* Auf dem Handy trägt der Knopf den Titel — der reine Text
     verschwindet, sonst stünde die Beschriftung doppelt da. */
  .pf-ft-spalten-titel > .pf-ft-spalten-titel-text { display: none; }
  .pf-ft-spalten-knopf {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    /* Bewusst NICHT groesser oder fetter als der Fliesstext: die
       Zeile wirkt ueber ihre Trefferflaeche, nicht ueber Gewicht. */
    font-weight: 400;
    /* Eigener Grund, damit die dahinterliegende geschlossene Liste
       nicht durchscheint. */
    background: #f5f5f7;
  }
  /* Der Pfeil schwimmt nach rechts statt absolut zu liegen: so
     bleibt er im Fluss des Knopfes und richtet sich an dessen
     Zeile aus, ohne feste Werte. */
  .pf-ft-spalten-pfeil {
    display: flex;
    align-items: center;
    justify-content: center;
    float: inline-end;
    /* Eigene Schriftgroesse: das SVG erbt sonst die 12px des Footers
       und die Zeilenbox faellt anders aus. */
    font-size: 14px;
    margin-top: 5px;
    pointer-events: none;
  }
  /* Geschlossen: aus dem Fluss genommen und hinter den Knopf gelegt.
     Kein display:none — sonst wäre kein Übergang möglich und der
     Abschnitt könnte seine Höhe nicht messen. */
  /* Geschlossen: die Liste sitzt direkt unter dem Kopf (top:100% =
     dessen Höhe), wird per transform dahinter gezogen und vom
     overflow des Abschnitts abgeschnitten. Kein display:none — so
     kann sie beim Öffnen herausfahren statt zu erscheinen. */
  .pf-ft-liste {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    visibility: hidden;
    overflow: hidden;
    z-index: -1;
    margin: 0;
    padding: 5px 0 16px;
    transform: translateY(-100px);
    /* NUR transform ueberblenden. Mit visibility im Uebergang bleibt
       die Liste nach dem Seitenstart 0,3s sichtbar: die Klasse no-js
       faellt weg, der Wechsel sichtbar->unsichtbar laeuft dann als
       Transition mit step-end, und wie lange das dauert haengt daran,
       wann page.js drankommt. Das ist nicht reproduzierbar. */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
  }
  .pf-ft-offen .pf-ft-liste {
    position: static;
    visibility: visible;
    z-index: auto;
    transform: none;
  }
  .pf-ft-offen .pf-ft-spalten-pfeil svg { transform: rotate(180deg); }
  .pf-ft-eintrag {
    margin: 0;
  }
  /* Die 28px Zeilenhöhe kommen aus dem Innenabstand des Links —
     so ist die ganze Zeile antippbar, nicht nur der Text. */
  .pf-ft-link {
    display: block;
    padding: 6px 14px;
  }

  .pf-ft-abschluss { padding: 17px 0 9px; }
  /* Die Standortzeile bekommt auf dem Handy etwas Luft nach oben —
     sie steht dort allein, nicht neben dem Copyright. */
  .pf-ft-standort { padding-top: 4px; }
  /* Copyright und Rechtslinks stehen auf dem Handy untereinander
     statt nebeneinander — sie brauchen Abstand zur Zeile darueber. */
  .pf-ft-recht { padding-top: 12px; }
  /* Auf dem Handy wieder die 5px des Desktops statt der 4 aus dem
     Tabletbereich — die Zeile steht hier unter dem Copyright. */
  .pf-ft-rechtlinks-eintrag { margin-top: 5px; }
  /* Auf dem Handy ohne Trennlinie: die Aufklapper darueber bringen
     schon genug Kanten mit. */
  .pf-ft-hinweis {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 0;
  }
  /* Erst hier ist der Pfeil sichtbar — sein Pfad braucht dann die
     Blockdarstellung, damit die Zeilenbox nicht mitzaehlt. */
  .pf-ft-spalten-pfeil path { display: block; }
  .pf-ft-standort { display: block; }

  /* Ohne JavaScript bleiben alle Abschnitte offen — sonst wäre der
     Footer auf dem Handy nicht benutzbar. Die Klasse nimmt page.js
     beim Start herunter. */
  .no-js .pf-ft-liste {
    position: static;
    visibility: visible;
    z-index: auto;
  }
  .no-js .pf-ft-spalten-knopf { pointer-events: none; }
  .no-js .pf-ft-spalten-pfeil { display: none; }
}