/* Forest Air — Partnernetz
   ---------------------------------------------------------------------------
   Die Partnerseite: Auftakt, drei Porträts, das Verzeichnis mit der Karte
   daneben, und der Abschluss für Betriebe, die selbst Partner werden wollen.

   Drei Entscheidungen, die den Aufbau erklären:

   1  Karte und Verzeichnis stehen in EINEM Abschnitt nebeneinander. Vorher
      waren es zwei Abschnitte mit zwei Suchfeldern und derselben Liste
      zweimal. Damit der Zeiger auf einem Eintrag den Punkt auf der Karte
      treffen kann, müssen beide gleichzeitig zu sehen sein — die Kartenspalte
      bleibt deshalb beim Lesen stehen (position:sticky).

      WICHTIG: kein overflow ausser sichtbar auf .fa-pn-verzeichnis und
      .fa-pn-raster. Ein overflow:hidden auf einem Vorfahren macht die Sektion
      zum Scrollbehälter und tötet das Stehenbleiben lautlos.

   2  Kein echtes CSS-3D. Die Karte lag früher auf einer mit rotateX gekippten
      Platte. Tiefe entsteht hier in 2D: versetzte Kopien der Landmasse, ein
      Verlauf im Grund, Stäbe unter den Punkten.

   3  Auf dem Handy fällt die Weltkarte weg und die Länder bekommen eigene
      Plaketten — ein echter Kartenausschnitt je Land statt einer 350 px
      breiten Weltkarte, auf der niemand etwas erkennt.
   --------------------------------------------------------------------------- */

.fa-pn-innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.fa-pn-ober{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--salbeinebel);margin:0 0 18px;
  display:flex;align-items:center;gap:14px;
}
.fa-pn-ober::after{
  content:"";flex:0 0 auto;width:clamp(40px,6vw,110px);height:1px;
  background:linear-gradient(90deg,rgba(161,165,140,.55),transparent);
}
.fa-pn-h2{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-weight:300;font-size:clamp(28px,3.6vw,48px);line-height:1.06;
  letter-spacing:-.012em;margin:0 0 16px;color:var(--creme);
}
.fa-pn-vor{
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(15px,1.2vw,17px);line-height:1.68;
  color:rgba(245,242,235,.86);margin:0 0 30px;max-width:62ch;
}

/* ═════════════════════════════════════════════════════════════ 1 · Auftakt */
.fa-pn-auftakt{
  position:relative;background:var(--nachthimmel);
  padding:clamp(46px,7vw,96px) 0 clamp(34px,5vw,64px);
}
.fa-pn-auftakt-grund{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(78% 96% at 22% -10%, rgba(86,94,76,.42) 0%, rgba(35,35,35,0) 62%),
    radial-gradient(52% 70% at 96% 8%, rgba(161,165,140,.13) 0%, rgba(35,35,35,0) 70%);
}
/* Text links, das Bild rechts, die Sprungmarken darunter ueber beide Spalten.
   Das Bild ist kein Schmuck: es zeigt, was ein Partner eigentlich ist — ein
   Geraet, das in einem Raum steht.

   Das Foto liegt quer (3:2) und zeigt das Geraet vollstaendig, mit Rand nach
   allen Seiten. Vorher stand hier ein hochkant beschnittener Ausschnitt: der
   Kopf oben angeschnitten, das Geraet unten aus dem Bild gelaufen. Wer das
   Bild tauscht, prueft beides — ganzes Geraet, kein angeschnittener Kopf.

   Die Bildzeile steht UNTER dem Bild, nicht darauf. Auf dem Foto laege sie
   genau ueber der Geraetebeschriftung, und der Verlauf, der sie lesbar
   gemacht hat, haette sie zugedeckt. */
.fa-pn-auftakt-innen{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);
  gap:clamp(24px,4vw,56px);align-items:center;
}
.fa-pn-auftakt-text{align-self:center}
.fa-pn-auftakt-bild{margin:0;position:relative;align-self:center}
.fa-pn-auftakt-rahmen{
  display:block;position:relative;
  border:1px solid rgba(231,228,214,.14);border-radius:12px;overflow:hidden;
  background:#1A1C18;
}
.fa-pn-auftakt-bild img{
  width:100%;height:auto;display:block;
  filter:saturate(.86) brightness(.94);
}
.fa-pn-auftakt-bild figcaption{
  margin-top:13px;
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:16px;line-height:1.4;color:rgba(245,242,235,.78);
}
.fa-pn-anker{grid-column:1 / -1}
.fa-pn-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-weight:300;letter-spacing:-.012em;
  font-size:clamp(38px,5.8vw,74px);line-height:1.0;
  margin:0 0 18px;color:var(--creme);max-width:16ch;
}
.fa-pn-kursiv{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-weight:400;font-size:clamp(20px,2.3vw,29px);line-height:1.35;
  color:var(--mondlicht);margin:0 0 20px;max-width:26ch;
}
.fa-pn-lede{
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(16px,1.3vw,18px);line-height:1.66;
  color:rgba(245,242,235,.88);margin:0;max-width:56ch;
}

/* Die Zahlenreihe (26 Partner · 11 Länder · 3 Kontinente) stand hier zwischen
   Auftakt und Sprungmarken. Sie ist ersatzlos weg — deshalb tragen die
   Sprungmarken jetzt die Trennlinie, damit der Auftakt unten nicht ausfranst. */
.fa-pn-anker{
  display:flex;flex-wrap:wrap;gap:10px;
  /* Der Zeilenabstand des Rasters (gap) liegt schon ueber dieser Reihe.
     Ein zweiter grosser Aussenabstand hier hat ein Loch gerissen. */
  margin-top:clamp(8px,1.6vw,20px);padding-top:26px;
  border-top:1px solid rgba(231,228,214,.16);
}
.fa-pn-anker a{
  font-family:"Space Grotesk",sans-serif;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--creme);text-decoration:none;
  border:1px solid rgba(161,165,140,.4);border-radius:999px;padding:9px 17px;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.fa-pn-anker a:hover,.fa-pn-anker a:focus-visible{
  border-color:var(--mondlicht);background:rgba(231,220,201,.1);
}

/* Hier stand der Abschnitt "In eigenen Worten — Drei Partner, ausführlich"
   (.fa-pn-portraets mit den drei Portraetkarten). Er ist ersatzlos weg. Die
   drei Unterseiten gibt es weiter; erreichbar sind sie ueber ihre Eintraege im
   Verzeichnis, die das Feld "seite" aus _quelle/partner.json tragen und dort
   mit der Marke "Porträt" stehen. */

/* ══════════════════════════════════════════════════════════ 2 · Verzeichnis */
.fa-pn-verzeichnis{background:var(--nachthimmel);padding:clamp(48px,7vw,96px) 0}
.fa-pn-raster{
  display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);
  gap:clamp(28px,3.4vw,48px);
  /* KEIN align-items:start. Ein stehendes Feld haelt nur innerhalb seines
     Elternteils — waere die linke Spalte nur so hoch wie ihr Inhalt, bliebe
     die Karte nach 700 px zurueck und die Liste liefe allein weiter. Mit der
     Vorgabe "stretch" ist die Spalte so hoch wie die Reihe, und die Karte
     begleitet alle 26 Eintraege. */
  align-items:stretch;
}
.fa-pn-haft{
  position:sticky;top:calc(var(--kopfhoehe) + 16px);
  max-height:calc(100vh - var(--kopfhoehe) - 34px);
  overflow:auto;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:rgba(161,165,140,.4) transparent;
}
/* Karte, Überschrift und Hinweis erscheinen erst, wenn das Skript gezeichnet
   hat (Klasse fa-pn-bereit). Ohne JavaScript stünde sonst eine leere,
   umrandete Fläche mit einer Überschrift darüber, die nichts überschreibt.
   Die Einträge selbst stehen fertig im HTML und bleiben sichtbar. */
.fa-pn-kartentitel{
  display:none;
  font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--salbeinebel);margin:0 0 10px;
}
.fa-pn-bereit .fa-pn-kartentitel{display:block}

/* ------------------------------------------------------------- Weltkarte */
.fa-pn-buehne{
  display:none;
  position:relative;border:1px solid rgba(231,228,214,.13);border-radius:10px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(86,94,76,.30) 0%, rgba(24,25,22,0) 68%),
    linear-gradient(180deg,#1E201B 0%,#171815 100%);
  padding:14px 12px 16px;
}
.fa-pn-bereit .fa-pn-buehne{display:block}
/* overflow:hidden ist hier Absicht: beim Heranfahren waechst die Karte auf
   das 2,4-fache, und ohne Beschnitt lief Afrika ueber die Laenderliste
   darunter. Das SVG beschneidet dann an seinem eigenen Rand. */
.fa-pn-svg{display:block;width:100%;height:auto;overflow:hidden}
.fa-pn-zoom{transition:transform .7s var(--e-satt);transform-box:view-box;transform-origin:0 0}
body.rm .fa-pn-zoom{transition:none}

.fa-pn-dicke path{fill:#A1A58C;stroke:none}
.fa-pn-flaeche{
  fill:rgba(161,165,140,.13);stroke:rgba(161,165,140,.34);stroke-width:.5;
  transition:fill .3s ease,stroke .3s ease;
}
.fa-pn-flaeche.hat{fill:rgba(161,165,140,.26);stroke:rgba(161,165,140,.62);cursor:pointer}
.fa-pn-flaeche.an{fill:rgba(231,220,201,.34);stroke:rgba(231,220,201,.8)}
.fa-pn-flaeche.hat:hover{fill:rgba(231,220,201,.4)}
.fa-pn-flaeche:focus-visible{outline:none;stroke:var(--mondlicht);stroke-width:1.3}

/* Ein Punkt je Land. Sein Halbmesser steht als Attribut im SVG und sagt, wie
   viele Partner dort sind — deshalb wird hier NICHT an r gedreht, sondern
   skaliert: eine feste Zahl im Stilblatt wuerde alle Punkte gleich gross
   machen und die Auskunft zunichte. */
.fa-pn-stab{stroke:rgba(231,220,201,.45);stroke-width:.7}
.fa-pn-pin{cursor:pointer;transition:opacity .3s ease}
.fa-pn-pin.aus{opacity:.13;pointer-events:none}
.fa-pn-hof{fill:rgba(231,220,201,.09)}
.fa-pn-punkt{
  fill:var(--mondlicht);stroke:rgba(24,25,22,.85);stroke-width:.5;
  transform-box:fill-box;transform-origin:center;
  transition:fill .25s ease,transform .3s var(--e-satt);
}
.fa-pn-pin.nah .fa-pn-punkt,.fa-pn-pin:hover .fa-pn-punkt{fill:#fff;transform:scale(1.18)}
.fa-pn-pin.nah .fa-pn-stab{stroke:var(--mondlicht)}
/* Der eigene Fokusring: der voreingestellte legt ein Rechteck um die ganze
   Gruppe, und das sass quer ueber halb Europa. */
.fa-pn-pin:focus,.fa-pn-pin:focus-visible{outline:none}
.fa-pn-pin:focus-visible .fa-pn-punkt{stroke:var(--nachthimmel);stroke-width:1;transform:scale(1.18)}
.fa-pn-pin:focus-visible .fa-pn-ring{
  opacity:1;transform:scale(1.9);stroke:var(--mondlicht);stroke-width:1.1;animation:none;
}
.fa-pn-ring{
  fill:none;stroke:rgba(231,220,201,.6);stroke-width:.7;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.fa-pn-pin.nah .fa-pn-ring{animation:fapnPuls 1.7s ease-out infinite}
@keyframes fapnPuls{
  0%{transform:scale(1);opacity:.75}
  100%{transform:scale(2.6);opacity:0}
}
body.rm .fa-pn-pin.nah .fa-pn-ring{animation:none;opacity:.55;transform:scale(1.6)}

/* Fahne am Punkt: sagt beim Zeigen, wer dort sitzt. Sie liegt als HTML ueber
   der Karte — im SVG haengt die Schriftgroesse am Kartenmassstab und kam als
   drei Bildpunkte an. */
.fa-pn-fahne{
  position:absolute;left:0;top:0;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .18s ease;
  background:rgba(20,21,18,.95);border:1px solid rgba(231,220,201,.5);
  border-radius:5px;padding:4px 8px 3px;white-space:nowrap;
  font-family:"Space Grotesk",sans-serif;font-size:11.5px;letter-spacing:.02em;
  color:var(--creme);
}
.fa-pn-fahne.an{opacity:1}
body.rm .fa-pn-fahne{transition:none}

.fa-pn-ecke{position:absolute;width:12px;height:12px;border:1px solid rgba(161,165,140,.38);pointer-events:none}
.fa-pn-e1{left:7px;top:7px;border-right:0;border-bottom:0}
.fa-pn-e2{right:7px;top:7px;border-left:0;border-bottom:0}
.fa-pn-e3{left:7px;bottom:7px;border-right:0;border-top:0}
.fa-pn-e4{right:7px;bottom:7px;border-left:0;border-top:0}

.fa-pn-kartenhinweis{
  display:none;margin:9px 0 0;font-family:"Barlow",sans-serif;font-size:11.5px;
  color:var(--salbeinebel);
}
.fa-pn-bereit .fa-pn-kartenhinweis{display:block}

/* ---------------------------------------------------------- Länderauswahl */
/* Zwei Spalten, damit die stehende Spalte nicht laenger wird als der
   Bildschirm hoch ist — sonst bekommt sie einen eigenen Rollbalken, und
   ein Rollbalken in einem stehenden Feld ist eine Falle. */
.fa-pn-laender{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 8px;margin-top:16px;
}
.fa-pn-alle{grid-column:1 / -1}
.fa-pn-land{
  position:relative;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-radius:6px;padding:8px 11px;cursor:pointer;
  font:inherit;color:var(--creme);overflow:hidden;
  transition:background .25s ease,color .25s ease;
}
.fa-pn-land::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--anteil,0%);
  background:linear-gradient(90deg,rgba(161,165,140,.20),rgba(161,165,140,0));
  transition:opacity .25s ease;
}
.fa-pn-land > *{position:relative}
.fa-pn-land:hover{background:rgba(231,228,214,.06)}
.fa-pn-land.an{background:var(--mondlicht);color:var(--nachthimmel)}
.fa-pn-land.an::before{opacity:0}
.fa-pn-land.leer{opacity:.38;cursor:default}
.fa-pn-land-name{font-family:"Barlow",sans-serif;font-size:14px;letter-spacing:.01em}
.fa-pn-land-zahl{
  font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.1em;
  color:var(--salbeinebel);
}
.fa-pn-land.an .fa-pn-land-zahl{color:rgba(35,35,35,.72)}
.fa-pn-land:focus-visible{outline:2px solid var(--mondlicht);outline-offset:1px}
.fa-pn-plakette{display:none}

/* ------------------------------------------------------------- Werkzeuge */
.fa-pn-werkzeug{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px;
}
.fa-pn-suche{
  display:flex;align-items:center;gap:10px;flex:1 1 260px;min-width:0;
  border:1px solid rgba(161,165,140,.34);border-radius:999px;
  padding:10px 18px;color:var(--salbeinebel);
  transition:border-color .25s ease,background .25s ease;
}
.fa-pn-suche:focus-within{border-color:var(--mondlicht);background:rgba(231,228,214,.05)}
.fa-pn-suche input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:var(--creme);
  font-family:"Barlow",sans-serif;font-size:15px;
}
.fa-pn-suche input::placeholder{color:rgba(178,182,158,.9)}
.fa-pn-chips{display:flex;flex-wrap:wrap;gap:6px}
.fa-pn-chip{
  background:none;border:1px solid rgba(161,165,140,.32);border-radius:999px;
  color:var(--salbeinebel);font-family:"Space Grotesk",sans-serif;font-size:11px;
  letter-spacing:.06em;padding:7px 13px;cursor:pointer;white-space:nowrap;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.fa-pn-chip:hover{color:var(--creme);border-color:var(--salbeinebel)}
.fa-pn-chip.an{background:var(--mondlicht);color:var(--nachthimmel);border-color:var(--mondlicht)}
.fa-pn-chip:focus-visible{outline:2px solid var(--mondlicht);outline-offset:2px}
.fa-pn-zaehler{
  margin:0;font-family:"Space Grotesk",sans-serif;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--salbeinebel);
  white-space:nowrap;
}
.fa-pn-reset{
  background:none;border:0;padding:0;cursor:pointer;font-family:"Space Grotesk",sans-serif;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mondlicht);border-bottom:1px solid rgba(231,220,201,.45);
}
.fa-pn-reset:hover{border-color:var(--mondlicht)}

/* ------------------------------------------------------------- Einträge */
.fa-pn-liste{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:1px;
  background:rgba(231,228,214,.13);
  border-top:1px solid rgba(231,228,214,.13);
  border-bottom:1px solid rgba(231,228,214,.13);
}
.fa-pn-eintrag{
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:20px;
  background:var(--nachthimmel);padding:20px 18px;
  transition:background .3s ease,box-shadow .3s ease;
}
/* Teuer gelernt: ein display auf dem Element schlaegt das hidden-Attribut.
   Ohne diese Zeile filtert die Suche zwar richtig, es verschwindet aber
   nichts — die Zaehlung stimmt, das Bild nicht. */
.fa-pn-eintrag[hidden]{display:none}
.fa-pn-eintrag:focus{outline:none}
.fa-pn-eintrag.an{background:#292A26;box-shadow:inset 3px 0 0 var(--salbeinebel)}
.fa-pn-eintrag-eigen{box-shadow:inset 3px 0 0 rgba(231,220,201,.55)}
.fa-pn-eintrag-eigen.an{box-shadow:inset 3px 0 0 var(--mondlicht)}
.fa-pn-eintrag.blitz{background:#31332C}

.fa-pn-logo{
  width:92px;height:92px;border-radius:8px;background:var(--creme);
  display:grid;place-items:center;padding:9px;overflow:hidden;
}
.fa-pn-logo img{max-width:100%;max-height:74px;width:auto;object-fit:contain}
.fa-pn-kuerzel{
  font-family:"Anton","Arial Narrow",sans-serif;font-size:30px;
  color:#2F3428;letter-spacing:.03em;
}
.fa-pn-inhalt{min-width:0}
.fa-pn-ort{
  margin:0 0 6px;font-family:"Space Grotesk",sans-serif;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--salbeinebel);
}
.fa-pn-trenner{margin:0 7px}
.fa-pn-name{
  margin:0 0 8px;font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:17.5px;line-height:1.25;letter-spacing:-.008em;color:var(--creme);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.fa-pn-marke{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--nachthimmel);background:var(--mondlicht);
  border-radius:999px;padding:3px 9px 2px;font-weight:500;
}
.fa-pn-satz{
  margin:0 0 13px;font-family:"Barlow",sans-serif;font-size:14.5px;
  line-height:1.62;color:rgba(245,242,235,.84);
}
.fa-pn-wege{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;
}
.fa-pn-art{
  font-family:"Space Grotesk",sans-serif;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--salbeinebel);
  border:1px solid rgba(161,165,140,.32);border-radius:999px;padding:4px 11px 3px;
}
.fa-pn-web,.fa-pn-eigen{
  font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.08em;
  text-decoration:none;color:var(--mondlicht);
  border-bottom:1px solid rgba(231,220,201,.4);padding-bottom:2px;
  transition:border-color .25s ease;
}
.fa-pn-web:hover,.fa-pn-eigen:hover{border-color:var(--mondlicht)}
.fa-pn-eigen{color:var(--salbeidunst)}

.fa-pn-leer{margin:26px 0 0;font-family:"Barlow",sans-serif;font-size:15px;color:var(--creme)}
.fa-pn-leer b{display:block;margin-bottom:6px;font-weight:500}
.fa-pn-leer a{color:var(--mondlicht)}

/* ══════════════════════════════════════════════════════ 3 · Partner werden */
.fa-pn-werden{
  background:linear-gradient(180deg,#232323 0%,#2A2E26 100%);
  padding:clamp(52px,8vw,104px) 0;
  border-top:1px solid rgba(231,228,214,.1);
}
.fa-pn-werden-innen{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,72px);align-items:start;
}
.fa-pn-werden-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.fa-pn-zweit{
  font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:.08em;
  color:var(--creme);text-decoration:none;
  border-bottom:1px solid rgba(231,228,214,.42);padding-bottom:3px;
  transition:border-color .25s ease;
}
.fa-pn-zweit:hover{border-color:var(--creme)}
.fa-pn-schritte{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:rgba(231,228,214,.14);
  border:1px solid rgba(231,228,214,.14);border-radius:10px;overflow:hidden;
}
.fa-pn-schritte li{
  background:#262A22;padding:18px 20px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;
  align-items:baseline;
}
.fa-pn-schritt-nr{
  grid-row:span 2;font-family:"Anton","Arial Narrow",sans-serif;font-size:22px;
  color:var(--salbeinebel);line-height:1;
}
.fa-pn-schritte b{
  font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:16px;
  color:var(--creme);
}
.fa-pn-schritte li > span:last-child{
  font-family:"Barlow",sans-serif;font-size:14px;line-height:1.6;
  color:rgba(245,242,235,.82);
}

/* ══════════════════════════════════════════════════════════ Einblenden */
.fa-pn-auf{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--e-weich),transform .8s var(--e-satt)}
.fa-pn-auf.ein{opacity:1;transform:none}
body.rm .fa-pn-auf{opacity:1;transform:none;transition:none}

/* ═════════════════════════════════════════════════════════════ Schmaler */
@media (max-width:1080px){
  .fa-pn-raster{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
  .fa-pn-eintrag{grid-template-columns:76px minmax(0,1fr);gap:16px}
  .fa-pn-logo{width:76px;height:76px}
  .fa-pn-logo img{max-height:60px}
}

@media (max-width:900px){
  .fa-pn-auftakt-innen{grid-template-columns:1fr;gap:26px;align-items:start}
  .fa-pn-auftakt-bild{max-width:420px}
  .fa-pn-raster{grid-template-columns:1fr;gap:26px}
  /* Kein Stehenbleiben mehr: die Karte steht dann als eigener Block oben. */
  .fa-pn-haft{position:static;max-height:none;overflow:visible;padding-right:0}
  /* Die Weltkarte ist bei 390 px nur noch ein Grauschleier mit Punkten.
     An ihre Stelle treten die Länderplaketten — echte Kartenausschnitte. */
  .fa-pn-buehne,.fa-pn-kartenhinweis,
  .fa-pn-bereit .fa-pn-buehne,.fa-pn-bereit .fa-pn-kartenhinweis{display:none}
  .fa-pn-laender{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px;
  }
  .fa-pn-land{
    grid-template-columns:auto minmax(0,1fr) auto;
    border:1px solid rgba(161,165,140,.26);border-radius:9px;padding:9px 11px;
  }
  .fa-pn-land.an{border-color:var(--mondlicht)}
  .fa-pn-alle{grid-template-columns:1fr auto;justify-items:start}
  .fa-pn-plakette{
    display:block;width:46px;height:36px;border-radius:5px;overflow:hidden;
    background:rgba(24,25,22,.75);border:1px solid rgba(161,165,140,.18);
  }
  /* Der Anteilsbalken war neben Plakette und Rahmen eine dritte Sache im
     selben Feld. Auf dem Handy traegt die Plakette das Gewicht. */
  .fa-pn-land::before{display:none}
  .fa-pn-werden-innen{grid-template-columns:1fr}
}

@media (max-width:620px){
  .fa-pn-eintrag{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:17px 14px}
  .fa-pn-logo{width:64px;height:64px;padding:7px;border-radius:7px}
  .fa-pn-logo img{max-height:50px}
  .fa-pn-name{font-size:16.5px}
  .fa-pn-satz{font-size:14px}
  .fa-pn-anker{margin-top:6px;padding-top:22px}
  .fa-pn-werkzeug{gap:10px}
  .fa-pn-zaehler{font-size:10.5px}
  .fa-pn-laender{grid-template-columns:1fr}
  .fa-pn-schritte li{padding:15px 16px}
}

@media (max-width:400px){
  /* Bei 390 px bleiben nach 24 px Rand und 14 px Polster noch 334 px. Logo
     60 + Spalte 12 + Text 262 — der längste Wortstamm ("Natursalzwelten",
     15 Zeichen bei 16,5 px) misst 133 px und passt. Gemessen, nicht
     geschätzt: der Prüfer läuft genau bei 390 px. */
  .fa-pn-eintrag{grid-template-columns:60px minmax(0,1fr);gap:12px;padding:16px 13px}
  .fa-pn-logo{width:60px;height:60px;padding:6px}
  .fa-pn-logo img{max-height:48px}
  .fa-pn-wege{gap:8px 12px}
}

@media (prefers-reduced-motion:reduce){
  .fa-pn-auf{opacity:1;transform:none;transition:none}
  .fa-pn-zoom{transition:none}
  .fa-pn-pin.nah .fa-pn-ring{animation:none;opacity:.55;transform:scale(1.6)}
  .fa-pn-punkt{transition:none}
}

/* ═══════════════════════════════════════════════════════════ 4 · Glanz
   ===========================================================================
   Einblenden beim Scrollen, Zeigereaktionen, Tiefe. Gehoert zu
   assets/js/seitenglanz.js — dort steht die ausfuehrliche Begruendung.

   VIER REGELN, die in diesem Block ueberall gelten
   ------------------------------------------------

   1  Bewegt werden nur `opacity`, `translate` und `transform`. Alles andere
      zwingt den Browser, das Layout neu zu rechnen — bei einunddreissig
      Eintraegen sechzigmal je Sekunde.

   2  Das Einblenden benutzt `translate`, die Zeigereaktionen benutzen
      `transform`. Zwei getrennte Eigenschaften, die sich nicht ins Gehege
      kommen: eine Karte, die gerade einfliegt, kann gleichzeitig auf den
      Zeiger reagieren. (Der zweite Grund steht in seitenglanz.js, Punkt 4.)

   3  Der durchsichtige Ausgangszustand haengt an html.fa-glanz. Diese Klasse
      setzt nur das Skript. Kein Skript, kein Ausgangszustand — die Seite ist
      dann vollstaendig sichtbar, nur ohne Einblendung.

   4  Trefferflaechen werden ECHT vergroessert (min-height, padding), nie ueber
      ein negativ eingeruecktes Pseudoelement. Ein unsichtbarer Rand, der
      ueber dem Nachbarn liegt, faengt dessen Klicks ab — bei den
      Sprungmarken und den Wegen unter jedem Eintrag stehen die Ziele nur
      neun bis sechzehn Bildpunkte auseinander, das ginge zwangslaeufig schief.
   =========================================================================== */

/* ------------------------------------------------------------- Einblenden */
html.fa-glanz .gl-auf{
  opacity:0;
  translate:var(--gl-x,0px) var(--gl-y,22px);
  transition:
    opacity   .62s var(--e-weich,cubic-bezier(.22,.61,.36,1)),
    translate .80s var(--e-satt,cubic-bezier(.16,1,.3,1)),
    transform .34s var(--e-satt,cubic-bezier(.16,1,.3,1)),
    background-color .30s ease,
    border-color     .30s ease,
    box-shadow       .34s ease;
}
/* Zwei Richtungen reichen: der Kopftext kommt von links, alles andere von
   unten. Drei Richtungen wirken wie ein Karussell. */
html.fa-glanz .fa-pn-auftakt-text > .gl-auf{--gl-x:-18px;--gl-y:0px}
html.fa-glanz .fa-pn-auftakt-bild.gl-auf   {--gl-y:28px}
html.fa-glanz .fa-pn-eintrag.gl-auf        {--gl-y:15px}
html.fa-glanz .fa-pn-anker a.gl-auf,
html.fa-glanz .fa-ppt-liste li.gl-auf      {--gl-y:12px}
/* Muss NACH den Richtungen stehen: gleiche Gewichtung, die spaetere Regel
   gewinnt. Andersherum bliebe der Kopftext fuer immer 18 px links. */
html.fa-glanz .gl-auf.gl-da{opacity:1;translate:none}

html.fa-glanz body.rm .gl-auf{opacity:1;translate:none;transition:none}
@media (prefers-reduced-motion:reduce){
  html.fa-glanz .gl-auf{opacity:1;translate:none;transition:none}
}

/* ----------------------------------------------- Sprungmarken im Auftakt */
/* Lichtkante, die durchlaeuft — dieselbe Geste wie .fa-cta in motion.css.
   overflow:hidden beschneidet nur den Inhalt, nicht den eigenen Fokusring. */
.fa-pn-anker a{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;
  transition:border-color .25s ease,background .25s ease,color .25s ease,
             transform .3s var(--e-satt,ease);
}
.fa-pn-anker a::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 22%,rgba(231,220,201,.28),transparent 78%);
  transform:translateX(-130%);
}
body:not(.rm) .fa-pn-anker a:hover{transform:translateY(-2px)}
body:not(.rm) .fa-pn-anker a:hover::before,
body:not(.rm) .fa-pn-anker a:focus-visible::before{
  transform:translateX(130%);transition:transform .85s var(--e-weich,ease);
}

/* --------------------------------------------------------- Auftaktbild */
/* Kein Filterwechsel beim Zeigen: eine aufhellende Deckschicht mit
   opacity 0 -> .16 macht dasselbe sichtbar, ohne dass der Browser das Bild
   neu durchrechnen muss. */
.fa-pn-auftakt-rahmen::before,
.fa-pn-auftakt-rahmen::after{content:"";position:absolute;pointer-events:none}
.fa-pn-auftakt-rahmen::after{
  inset:0;z-index:2;opacity:0;
  background:linear-gradient(160deg,rgba(231,220,201,.30),rgba(231,220,201,0) 58%);
  transition:opacity .6s var(--e-weich,ease);
}
.fa-pn-auftakt-rahmen::before{
  top:0;bottom:0;left:0;width:46%;z-index:3;
  background:linear-gradient(104deg,transparent,rgba(255,255,255,.30) 48%,transparent);
  transform:translateX(-170%);
}
.fa-pn-auftakt-bild img{transition:transform .9s var(--e-satt,ease)}
body:not(.rm) .fa-pn-auftakt-bild:hover img{transform:scale(1.04)}
body:not(.rm) .fa-pn-auftakt-bild:hover .fa-pn-auftakt-rahmen::after{opacity:.16}
body:not(.rm) .fa-pn-auftakt-bild:hover .fa-pn-auftakt-rahmen::before{
  transform:translateX(340%);transition:transform 1.15s var(--e-weich,ease);
}
.fa-pn-auftakt-rahmen{
  transition:border-color .4s ease,box-shadow .5s ease;
  box-shadow:0 30px 70px -46px rgba(0,0,0,.95);
}
.fa-pn-auftakt-bild:hover .fa-pn-auftakt-rahmen{
  border-color:rgba(231,220,201,.34);
  box-shadow:0 38px 84px -44px rgba(0,0,0,1);
}

/* --------------------------------------------------------- Verzeichnis */
/* Eine Haarlinie ueber dem Abschnitt. Auftakt und Verzeichnis haben beide
   den Nachthimmel als Grund und liefen vorher ohne Naht ineinander. */
.fa-pn-verzeichnis::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(100% - 48px,var(--breite));height:1px;
  background:linear-gradient(90deg,rgba(231,228,214,0),rgba(231,228,214,.22) 30%,
                                   rgba(231,228,214,.22) 70%,rgba(231,228,214,0));
}
.fa-pn-buehne{box-shadow:0 24px 54px -40px rgba(0,0,0,.95)}
.fa-pn-werkzeug{padding-bottom:18px;border-bottom:1px solid rgba(231,228,214,.09)}

/* Die Liste als ein Koerper statt einunddreissig lose Zeilen: gerundete
   Ecken und ein weicher Schatten darunter.

   Das overflow:hidden rundet die Ecken des jeweils ERSTEN und LETZTEN
   sichtbaren Eintrags mit — beim Filtern wechseln die staendig, eine
   Rundung an :first-child wuerde dann an einem versteckten Eintrag haengen.
   Die Warnung im Kopf dieser Datei gilt fuer .fa-pn-verzeichnis und
   .fa-pn-raster; die Liste steht in der anderen Spalte und ist kein Vorfahre
   der stehenden Karte. */
.fa-pn-liste{
  border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px -52px rgba(0,0,0,1);
}

/* Zeigereaktion je Eintrag. KEIN Anheben: die Eintraege stehen mit einem
   Bildpunkt Abstand, der Listengrund scheint dazwischen durch — ein
   angehobener Eintrag legt dort einen hellen Spalt frei, das sieht aus wie
   ein Fehler. Stattdessen Grund, Lichtkante und ein Logo, das aufsteigt. */
.fa-pn-eintrag::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(231,220,201,0),rgba(231,220,201,.7) 42%,
                                   rgba(231,220,201,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--e-satt,ease);
}
.fa-pn-eintrag{position:relative}
.fa-pn-eintrag:hover{background:#2A2C26}
/* Der Blitz beim Treffen eines Kartenpunkts muss auch dann zu sehen sein,
   wenn der Zeiger gerade ueber dem Eintrag steht — deshalb hier noch einmal
   nach der Zeigeregel. */
.fa-pn-eintrag.blitz{background:#31332C}
body:not(.rm) .fa-pn-eintrag:hover::after,
body:not(.rm) .fa-pn-eintrag:focus-within::after{transform:scaleX(1)}
.fa-pn-logo{transition:transform .45s var(--e-satt,ease),box-shadow .45s ease}
.fa-pn-logo img{transition:transform .7s var(--e-satt,ease)}
body:not(.rm) .fa-pn-eintrag:hover .fa-pn-logo{
  transform:translateY(-3px);box-shadow:0 14px 28px -12px rgba(0,0,0,.8);
}
body:not(.rm) .fa-pn-eintrag:hover .fa-pn-logo img{transform:scale(1.05)}
.fa-pn-kuerzel{transition:color .3s ease}
.fa-pn-eintrag:hover .fa-pn-kuerzel{color:#565E4C}

/* ------------------------------------------------------ Partner werden */
.fa-pn-schritte{box-shadow:0 28px 64px -50px rgba(0,0,0,1)}
.fa-pn-schritte li{position:relative;transition:background-color .3s ease}
.fa-pn-schritte li::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(231,220,201,0),rgba(231,220,201,.6) 40%,
                                   rgba(231,220,201,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--e-satt,ease);
}
.fa-pn-schritte li:hover{background:#2C3128}
body:not(.rm) .fa-pn-schritte li:hover::after{transform:scaleX(1)}
.fa-pn-schritt-nr{transition:color .3s ease,transform .4s var(--e-satt,ease)}
body:not(.rm) .fa-pn-schritte li:hover .fa-pn-schritt-nr{
  color:var(--mondlicht);transform:translateY(-2px);
}

/* ═════════════════════════════════════ Handy: Schrift und Trefferflaechen
   Gemessen bei 390 px, nicht geschaetzt. Zwei Vorgaben:
   keine Schrift unter 11,5 px, keine Tippflaeche unter 44 px.
   Vergroessert wird ausschliesslich echt — siehe Regel 4 im Kopf. */
@media (max-width:700px){
  .fa-pn-ober        {font-size:11.5px !important;letter-spacing:.24em}
  .fa-pn-kartentitel {font-size:11.5px !important;letter-spacing:.2em}
  .fa-pn-land-zahl,
  .fa-pn-chip,
  .fa-pn-zaehler,
  .fa-pn-reset       {font-size:11.5px !important}

  .fa-pn-anker a{min-height:44px;padding:0 18px}
  .fa-pn-chip{min-height:44px;display:inline-flex;align-items:center;padding:0 15px}
  .fa-pn-land{min-height:44px}
  .fa-pn-suche{padding:0 18px}
  .fa-pn-suche input{min-height:46px}

  /* Textlinks: 44 px hoch, aber der Unterstrich bleibt an der Schrift.
     Als Rahmenlinie saesse er am Boden des Kastens, fuenfzehn Bildpunkte
     unter dem Wort, zu dem er gehoert. */
  .fa-pn-web,.fa-pn-eigen,.fa-pn-zweit,.fa-pn-reset{
    position:relative;display:inline-flex;align-items:center;
    min-height:44px;border-bottom:0;padding-bottom:0;
  }
  /* Beim Messen gefunden, nicht vermutet — und es ist derselbe Fehler, vor
     dem der Kopf dieser Datei bei .fa-pn-eintrag warnt: ein display am
     Element schlaegt das hidden-Attribut. "Zuruecksetzen" stand dadurch bei
     390 px dauerhaft neben der Zaehlung, auch ohne gesetzten Filter. */
  .fa-pn-reset[hidden]{display:none}
  .fa-pn-web::after,.fa-pn-eigen::after,.fa-pn-zweit::after,.fa-pn-reset::after{
    content:"";position:absolute;left:0;right:0;top:50%;margin-top:.66em;height:1px;
    background:rgba(231,220,201,.42);transition:background .25s ease;
  }
  .fa-pn-zweit::after{background:rgba(231,228,214,.42)}
  .fa-pn-web:hover::after,.fa-pn-eigen:hover::after,
  .fa-pn-zweit:hover::after,.fa-pn-reset:hover::after{background:var(--mondlicht)}
  /* Die Wege stehen jetzt in 44 px hohen Kaesten; die alte Zeilenluft von
     neun Bildpunkten kaeme oben drauf und risse die Zeilen auseinander. */
  .fa-pn-wege{gap:0 14px}
  .fa-pn-werkzeug{gap:6px 14px}
}

@media (prefers-reduced-motion:reduce){
  .fa-pn-anker a,.fa-pn-anker a::before,
  .fa-pn-auftakt-rahmen,.fa-pn-auftakt-rahmen::before,.fa-pn-auftakt-rahmen::after,
  .fa-pn-auftakt-bild img,.fa-pn-eintrag,.fa-pn-eintrag::after,
  .fa-pn-logo,.fa-pn-logo img,.fa-pn-schritte li,.fa-pn-schritte li::after,
  .fa-pn-schritt-nr{transition:none}
}
body.rm .fa-pn-anker a::before,
body.rm .fa-pn-auftakt-rahmen::before{display:none}