/* Forest Air — Partnerportal
   ==========================================================================
   Zwei Dinge in einer Datei:

     1. die Seite  partnerportal.html          (.fa-pp-*)
     2. der Anreisser auf Start/Produkte/Partner (.fa-ppt-*)

   Beides liegt zusammen, weil der Anreisser dieselben Tokens und dieselbe
   Kartenform benutzt. Zwei Dateien waeren zwei Ladezeiten fuer 3 KB.

   Farbregel aus forest-air-brand, hier streng eingehalten:
     dunkler Grund -> Text Creme, Nebentext Salbeinebel (#A1A58C)
     heller Grund  -> Text Nachthimmel, Nebentext Forest (#565E4C)
   Auf dieser Seite ist ALLES dunkel, bis auf den Formularkasten. Der ist
   bewusst hell: ein Formular auf hellem Grund wird nachweislich haeufiger
   ausgefuellt, und es hebt den einen Schritt heraus, um den es hier geht.

   Diese Datei wird NICHT vom Generator erzeugt — sie darf von Hand
   bearbeitet werden.
   ========================================================================== */

/* ---------------------------------------------------------------- Grundmaße */
.fa-pp-innen{ max-width: var(--breite); margin: 0 auto; padding: clamp(52px,7vw,96px) var(--rand); }

.fa-pp-ober{
  font-family:"Space Grotesk",sans-serif; font-size:10.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--salbeinebel); margin:0 0 14px;
  display:flex; align-items:center; gap:14px;
}
.fa-pp-ober::after{
  content:""; flex:0 0 auto; width:clamp(40px,6vw,110px); height:1px;
  background:linear-gradient(90deg,rgba(161,165,140,.55),transparent);
}
/* GRÖSSE DER ÜBERSCHRIFTEN — am 15.08. angeglichen.
   Vorher: h1 clamp(30px,4.4vw,52px) auf 19ch, h2 clamp(25px,3.3vw,40px)
   auf 20ch. Der Rest der Seite arbeitet mit clamp(32px,4.6vw,58px) bis
   clamp(38px,5.4vw,64px) und negativer Laufweite. Diese Seite war
   dadurch sichtbar kleiner gesetzt als jede andere — sie sah aus wie
   ein Unterdokument, nicht wie eine Hauptseite. Die 20ch haben die
   Zeilen zusätzlich in eine schmale Säule gezwängt, obwohl rechts
   daneben die halbe Sektion leer stand. */
.fa-pp-innen h2{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif; font-weight:300;
  font-size:clamp(28px,3.9vw,50px); line-height:1.06; letter-spacing:-.018em;
  margin:0 0 18px; max-width:26ch; color:var(--creme);
}
.fa-pp-vorsatz{ color:var(--salbeinebel); line-height:1.75; max-width:60ch; margin:0 0 34px; font-size:15.5px; }

/* -------------------------------------------------------------------- Kopf */
.fa-pp-kopf{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(86,94,76,.30) 0%, transparent 55%),
    radial-gradient(110% 130% at 12% 0%, #2b2b2b 0%, var(--nachthimmel) 58%);
  border-bottom:1px solid rgba(231,228,214,.08);
}
/* Das Kopfbild liegt HINTER dem Text und wird stark abgedunkelt.
   Die Verläufe darüber sind keine Zier: ohne sie steht Creme-Schrift
   stellenweise auf einem hellen Reflex des Gehäuses, und der Kontrast
   fällt unter das, was lesbar ist. Gemessen an drei Stellen. */
.fa-pp-kopf-grund{ position:absolute; inset:0; z-index:-1; }
.fa-pp-kopf-grund img{
  width:100%; height:100%; object-fit:cover; object-position:58% 45%;
  opacity:.52; filter:saturate(.72) contrast(1.06);
}
.fa-pp-kopf-grund::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(26,28,24,.95) 0%, rgba(26,28,24,.84) 40%,
                    rgba(26,28,24,.40) 74%, rgba(26,28,24,.58) 100%),
    linear-gradient(180deg, rgba(26,28,24,.50) 0%, transparent 32%,
                    rgba(26,28,24,.68) 100%);
}
/* AUFBAU DES KOPFES — zweiter Anlauf, 15.08.
   ------------------------------------------------------------------
   Erster Anlauf: Text links, Login rechts, beide gleich hoch. Die
   Überschrift hatte damit nur zwei Drittel der Breite und musste klein
   bleiben — sie war die kleinste Hauptüberschrift der ganzen Seite.

   Jetzt: Marker und Überschrift laufen über die volle Breite, darunter
   erst teilt sich die Zeile in Fließtext links und Login rechts. Die
   Überschrift bekommt damit 1200 statt 780 Bildpunkte und darf so groß
   werden wie die Seitenköpfe überall sonst (.fa-pf-titel, bis 78 px).
   Der Login bleibt trotzdem oben und ohne Scrollen sichtbar. */
.fa-pp-kopf-innen{
  max-width:var(--breite); margin:0 auto;
  padding:clamp(46px,6vw,88px) 24px clamp(38px,4.6vw,60px);
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(292px,.62fr);
  column-gap:clamp(28px,4.5vw,72px); row-gap:clamp(22px,3vw,38px);
  align-items:start;
}
.fa-pp-marker, .fa-pp-kopf h1{ grid-column:1 / -1; }

/* Der Marker „Partnerportal“. Vorher eine 10,5-px-Zeile, die neben
   einer großen Überschrift verschwand. Jetzt mit Punkt, Rahmen und
   Sperrung — er soll benennen, wo man ist, nicht sich verstecken. */
.fa-pp-marker{
  display:inline-flex; align-items:center; gap:11px; width:fit-content;
  margin:0 0 clamp(16px,2vw,26px);
  font-family:"Space Grotesk",sans-serif; font-size:11.5px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--mondlicht);
  padding:7px 16px 7px 13px; border-radius:999px;
  border:1px solid rgba(231,220,201,.22);
  background:rgba(245,242,235,.05);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.fa-pp-marker i{
  width:6px; height:6px; border-radius:50%; background:var(--mondlicht);
  box-shadow:0 0 0 4px rgba(231,220,201,.14); flex:0 0 auto;
}

/* Maß wie .fa-pf-titel (clamp(40px,6.2vw,78px)) — das ist der Kopf,
   den jede andere Unterseite trägt. Etwas engere Laufweite, weil die
   Zeile hier lang ist und Space Grotesk Light in dieser Größe sonst
   auseinanderfällt. */
.fa-pp-kopf h1{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif; font-weight:300;
  font-size:clamp(38px,6.2vw,78px); line-height:.97; letter-spacing:-.032em;
  margin:0; max-width:20ch; color:var(--creme);
  text-wrap:balance;
}
.fa-pp-vor{ color:var(--salbeinebel); line-height:1.78; max-width:54ch; margin:0 0 26px; font-size:15.5px; }

/* ------------------------------------------------------------ Partner-Login
   Der Kasten sitzt oben rechts im Kopf, weil genau dort danach gesucht
   wird. Er ist der einzige helle Block auf dunklem Grund und dadurch
   sofort auffindbar, ohne dass er dem Hauptknopf die Rolle wegnimmt:
   „Zugang beantragen“ ist gefüllt, der Login trägt Rahmen. */
.fa-pp-login{
  position:relative;
  border:1px solid rgba(231,220,201,.24); border-radius:14px;
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px);
  background:
    linear-gradient(165deg, rgba(245,242,235,.085) 0%, rgba(245,242,235,.028) 100%);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  box-shadow:0 22px 54px rgba(0,0,0,.34);
}
/* Ein schmaler Lichtsaum an der Oberkante — dieselbe Geste wie beim
   Portalknopf im Kopf der Seite, damit beides zusammengehört. */
.fa-pp-login::before{
  content:""; position:absolute; inset:0 0 auto; height:1px; border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,transparent,rgba(231,220,201,.6),transparent);
}
.fa-pl-ober{
  margin:0 0 8px; font-family:"Space Grotesk",sans-serif; font-size:10px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--salbeinebel);
}
.fa-pl-titel{
  font-family:"Space Grotesk",sans-serif; font-weight:300;
  font-size:clamp(21px,2.1vw,27px); line-height:1.12; letter-spacing:-.012em;
  margin:0 0 12px; color:var(--creme);
}
.fa-pl-text{ margin:0 0 20px; font-size:14px; line-height:1.68; color:var(--salbeinebel); }
.fa-pl-knopf{
  display:inline-flex; align-items:center; gap:10px; width:100%;
  justify-content:center; box-sizing:border-box;
  padding:14px 22px; border-radius:999px; text-decoration:none;
  font-size:14.5px; letter-spacing:.02em;
  color:var(--nachthimmel); background:var(--mondlicht);
  border:1px solid var(--mondlicht);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.fa-pl-knopf svg{ transition:transform .25s ease; }
.fa-pl-knopf:hover{
  transform:translateY(-1px); background:var(--creme);
  box-shadow:0 12px 28px rgba(0,0,0,.36);
}
.fa-pl-knopf:hover svg{ transform:translateX(3px); }
.fa-pl-hilfe{ margin:13px 0 0; font-size:13px; text-align:center; }
.fa-pl-hilfe a{ color:var(--salbeinebel); text-decoration:none; border-bottom:1px solid rgba(161,165,140,.4); padding-bottom:1px; }
.fa-pl-hilfe a:hover{ color:var(--mondlicht); border-color:var(--mondlicht); }
.fa-pl-fuss{
  margin:18px 0 0; padding-top:15px; font-size:12.5px; line-height:1.6;
  color:rgba(161,165,140,.78); border-top:1px solid rgba(231,228,214,.12);
}

/* --------------------------------------------------- Drei Fakten am Fuß des
   Kopfes. Eine Zeile statt eines Absatzes: „kein Einstiegsgeld“ ist die
   Frage Nummer eins, und sie soll beantwortet sein, bevor jemand
   überhaupt scrollt. */
.fa-pp-fakten{
  list-style:none; margin:0 auto; padding:0 24px clamp(30px,3.6vw,48px);
  max-width:var(--breite);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,30px);
}
.fa-pp-fakten li{
  padding-top:15px; border-top:1px solid rgba(231,228,214,.16);
}
.fa-pp-fakten b{
  display:block; font-family:"Space Grotesk",sans-serif; font-weight:400;
  font-size:15.5px; letter-spacing:-.005em; color:var(--mondlicht); margin-bottom:5px;
}
.fa-pp-fakten span{ font-size:13px; line-height:1.55; color:var(--salbeinebel); }

/* Das Schildchen „Zugang auf Anfrage“. Es sagt in drei Worten, was die Seite
   sonst zweimal erklaeren muesste: hier kommt man nicht einfach rein. */
/* Eigene Zeile. Nebeneinander mit dem Knopf sah es aus wie zwei
   Schaltflächen, von denen eine nicht reagiert — das Schildchen ist aber
   eine Aussage, kein Knopf. */
/* OHNE Rahmen — der Marker „Partnerportal“ drei Zeilen weiter oben ist
   jetzt eine Pille, und zwei fast gleiche Pillen im selben Blickfeld
   sehen aus wie zwei Schaltflächen, von denen eine nicht reagiert.
   Der Marker sagt, wo man ist; das hier sagt, wie man hineinkommt —
   zwei verschiedene Dinge, also zwei verschiedene Formen. */
.fa-pp-marke{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 24px; clear:both;
  padding:0; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mondlicht);
}
.fa-pp-kopf-tat{ margin:0; }
.fa-pp-kopf-tat .fa-cta{ display:inline-block; padding:13px 26px; font-size:14px; }
.fa-pp-marke span{
  width:7px; height:7px; border-radius:50%; background:var(--salbeinebel);
  box-shadow:0 0 0 4px rgba(161,165,140,.16);
}

/* --------------------------------------------------------- Was drin liegt
   Vorher: vier schmale Spalten nebeneinander, jede rund 230 px breit, mit
   Text in 14,5 px. Auf 1440 px waren das vier Textsäulen von je 22
   Zeichen Breite — unter der Grenze, ab der Fließtext angenehm zu lesen
   ist. Jetzt zwei mal zwei Karten links, ein hohes Bild rechts. */
/* Foto als HINTERGRUND, nicht als Bild im Text. Ein stehendes Foto
   neben Karten ist ein Gegenstand, den man anschaut; ein abgedunkelter
   Grund ist eine Stimmung, in der man liest. Gleiches Motiv wie im
   Kopf, damit die Seite eine Handschrift behält. */
.fa-pp-was{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--nachthimmel);
}
.fa-pp-was-grund{ position:absolute; inset:0; z-index:-1; }
.fa-pp-was-grund img{
  width:100%; height:100%; object-fit:cover; object-position:70% 40%;
  opacity:.34; filter:saturate(.6) contrast(1.04);
}
/* Der Verlauf ist Pflicht, keine Zier: die Karten sind halbdurch-
   sichtig, und ohne die Abdunklung steht Nebentext in Salbeinebel
   stellenweise auf einem hellen Reflex der Frontplatte. */
.fa-pp-was-grund::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(260deg, rgba(26,28,24,.86) 0%, rgba(26,28,24,.93) 46%,
                    rgba(26,28,24,.97) 100%),
    linear-gradient(180deg, rgba(26,28,24,.85) 0%, transparent 26%,
                    transparent 74%, rgba(26,28,24,.85) 100%);
}
.fa-pp-was-innen{ position:relative; }
.fa-pp-was-innen h2{ max-width:22ch; }
/* Zwei mal zwei, nicht vier nebeneinander. Vier Spalten auf 1200 px
   sind 276 px je Karte, also rund 26 Zeichen Zeilenbreite — darunter
   liest sich Fließtext nicht mehr, er wird buchstabiert. Zwei Spalten
   ergeben 590 px, und der Abschnitt bekommt Ruhe statt Rhythmus. */
.fa-pp-karten{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
@media (max-width:720px){
  .fa-pp-karten{ grid-template-columns:1fr; }
}
.fa-pp-karte{
  position:relative; overflow:hidden;
  border:1px solid rgba(231,228,214,.13); border-radius:12px;
  padding:24px 22px; background:rgba(245,242,235,.028);
  transition:border-color .28s ease, background .28s ease, transform .28s ease;
}
.fa-pp-karte:hover{ border-color:rgba(231,220,201,.34); background:rgba(245,242,235,.05); transform:translateY(-2px); }
/* Die Nummer stand vorher als großes Zeichen mitten im Text und hat auf
   der schmalen Karte mit der Überschrift überlappt. Jetzt liegt sie
   hinter der Ecke und tritt beim Überfahren hervor. */
.fa-pp-k-nr{
  position:absolute; top:-6px; right:10px; pointer-events:none;
  font-family:"Space Grotesk",sans-serif; font-weight:300;
  font-size:58px; line-height:1; color:rgba(231,220,201,.075);
  transition:color .3s ease;
}
.fa-pp-karte:hover .fa-pp-k-nr{ color:rgba(231,220,201,.15); }
.fa-pp-karte h3{
  position:relative; font-family:"Space Grotesk",sans-serif; font-weight:400;
  font-size:17.5px; margin:0 0 10px; color:var(--mondlicht); line-height:1.28;
  padding-right:34px;
}
.fa-pp-karte p{ margin:0; font-size:14.5px; line-height:1.7; color:var(--salbeinebel); }

/* .fa-pp-was-bild stand hier — das stehende Foto neben den Karten.
   Am 15.08. entfernt; das Motiv liegt jetzt als Grund hinter dem
   Abschnitt. Wer es zurückholt: dann bitte OHNE den Hintergrund,
   sonst steht dasselbe Bild zweimal übereinander. */

/* Auf dem Grund werden die Karten etwas fester, sonst verschwimmen
   sie mit dem Foto darunter. */
.fa-pp-was .fa-pp-karte{
  background:rgba(20,22,18,.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border-color:rgba(231,228,214,.16);
}
.fa-pp-was .fa-pp-karte:hover{ background:rgba(24,26,22,.74); }

/* ---------------------------------------------------------------- Drei Wege */
.fa-pp-wege{ background:linear-gradient(180deg,#1e201c 0%,var(--nachthimmel) 100%); }
.fa-pp-weglist{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:20px;
}
.fa-pp-weg{
  display:flex; flex-direction:column;
  border:1px solid rgba(231,228,214,.15); border-radius:12px; padding:28px 24px;
  background:rgba(35,35,35,.55);
}
.fa-pp-weg-marke{
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--salbeinebel); margin:0 0 12px;
}
.fa-pp-weg h3{
  font-family:"Space Grotesk",sans-serif; font-weight:300; font-size:23px;
  margin:0 0 12px; color:var(--creme); line-height:1.2;
}
.fa-pp-weg-text{ margin:0 0 18px; font-size:14.5px; line-height:1.72; color:var(--salbeinebel); }
.fa-pp-weg ul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; }
.fa-pp-weg ul li{
  position:relative; padding-left:20px; font-size:13.5px; line-height:1.6;
  color:rgba(245,242,235,.86);
}
.fa-pp-weg ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:1px; background:var(--salbeinebel);
}
/* Der Knopf sitzt unten buendig, damit drei unterschiedlich lange Karten
   nicht drei unterschiedlich hohe Knopfreihen ergeben. */
.fa-pp-weg .fa-zweit{ margin-top:auto; align-self:flex-start; background:none; border:0;
  border-bottom:1px solid rgba(231,228,214,.35); cursor:pointer; font:inherit;
  font-size:13.5px; letter-spacing:.05em; color:var(--creme); padding:0 0 3px; }
.fa-pp-weg .fa-zweit:hover{ border-color:var(--mondlicht); color:var(--mondlicht); }

/* ------------------------------------------------------------------ Ablauf
   Vier Kästchen mit einem Strich obendrüber waren vier Aussagen. Eine
   Abfolge sind sie erst, wenn man sieht, dass sie zusammenhängen —
   deshalb ein durchgehender Faden mit einem Knoten je Schritt. */
.fa-pp-ablauf{ background:var(--nachthimmel); }
.fa-pp-schritte{
  position:relative; list-style:none; margin:0; padding:0; counter-reset:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(20px,2.6vw,34px);
}
/* Der Faden liegt auf der Oberkante der Kästen. Er endet vor dem letzten
   Knoten statt ins Leere zu laufen. */
.fa-pp-schritte::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    rgba(231,220,201,.42) 0%, rgba(231,220,201,.22) 62%, transparent 100%);
}
.fa-pp-schritte li{
  position:relative; padding-top:26px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fa-pp-schritte li:hover{ transform:translateY(-3px); }
/* Der Knoten. Er sitzt genau auf dem Faden. */
.fa-pp-schritte li::before{
  content:""; position:absolute; left:0; top:-4px; width:9px; height:9px;
  border-radius:50%; background:var(--nachthimmel);
  border:1px solid rgba(231,220,201,.55);
  transition:background .3s ease, box-shadow .3s ease;
}
.fa-pp-schritte li:hover::before{
  background:var(--mondlicht); box-shadow:0 0 0 5px rgba(231,220,201,.13);
}
.fa-pp-nr{
  display:block; font-family:"Space Grotesk",sans-serif; font-size:12px;
  letter-spacing:.24em; color:var(--salbeinebel); margin-bottom:10px;
}
.fa-pp-schritte h3{
  font-family:"Space Grotesk",sans-serif; font-weight:400; font-size:17px;
  margin:0 0 9px; color:var(--mondlicht);
}
.fa-pp-schritte p{ margin:0; font-size:14.5px; line-height:1.7; color:var(--salbeinebel); }

/* ---------------------------------------------------------------- Formular */
.fa-pp-form{ background:var(--creme); color:var(--nachthimmel); }
.fa-pp-form .fa-pp-ober{ color:var(--forest); }
.fa-pp-form .fa-pp-ober::after{ background:linear-gradient(90deg,rgba(86,94,76,.55),transparent); }
.fa-pp-form h2{ color:var(--nachthimmel); }
.fa-pp-form .fa-pp-vorsatz{ color:var(--forest); }

.fa-pp-formular{ display:grid; gap:18px; max-width:840px; }
/* Gemessen und gefunden: nach dem Absenden blieb das Formular stehen.
   display:grid aus der Zeile darüber gewinnt gegen die eingebaute Regel
   [hidden]{display:none} des Browsers — das hidden-Attribut allein reicht
   bei jedem Element mit eigener display-Angabe NICHT. */
.fa-pp-formular[hidden]{ display:none; }
.fa-pp-reihe{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fa-pp-feld{ display:grid; gap:7px; }
.fa-pp-feld > span{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--forest);
}
.fa-pp-feld > span i{ font-style:normal; color:#8a5a3c; }
.fa-pp-feld input,
.fa-pp-feld select,
.fa-pp-feld textarea{
  font:inherit; font-size:15px; color:var(--nachthimmel);
  background:#fff; border:1px solid var(--salbeidunst); border-radius:7px;
  padding:12px 14px; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.fa-pp-feld textarea{ resize:vertical; min-height:120px; line-height:1.65; }
.fa-pp-feld input:focus,
.fa-pp-feld select:focus,
.fa-pp-feld textarea:focus{
  outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(86,94,76,.16);
}
/* Fehlerhafte Felder werden erst nach dem ersten Absendeversuch markiert.
   Vorher rot zu faerben, waehrend jemand noch tippt, ist eine Zurechtweisung
   fuer etwas, das noch gar nicht passiert ist. */
.fa-pp-formular.geprueft :invalid{ border-color:#a4553a; }

.fa-pp-zustimmung{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.65; color:var(--forest); }
.fa-pp-zustimmung input{ margin-top:3px; width:17px; height:17px; accent-color:var(--forest); flex:0 0 auto; }
.fa-pp-zustimmung a{ color:var(--forest); }

.fa-pp-absenden{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px; }
.fa-pp-absenden .fa-cta{
  background:var(--nachthimmel); color:var(--creme); border:0; cursor:pointer;
  font:inherit; font-size:14px; letter-spacing:.06em; padding:13px 26px; border-radius:999px;
}
.fa-pp-absenden .fa-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(35,35,35,.22); }
.fa-pp-absenden .fa-cta[disabled]{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.fa-pp-hinweis{ margin:0; font-size:12.5px; line-height:1.6; color:#6d7263; max-width:44ch; }

.fa-pp-melde{
  margin:0; padding:14px 16px; border-radius:8px; font-size:14.5px; line-height:1.6;
  background:#fbeee7; border:1px solid #e3c3ae; color:#7a3f22;
}
.fa-pp-melde a{ color:#7a3f22; }

.fa-pp-gut{
  border:1px solid var(--salbeidunst); border-left:3px solid var(--forest);
  border-radius:0 8px 8px 0; padding:26px 26px; background:#fff; max-width:640px;
}
.fa-pp-gut h3{ font-family:"Space Grotesk",sans-serif; font-weight:400; font-size:21px; margin:0 0 10px; }
.fa-pp-gut p{ margin:0; font-size:15px; line-height:1.72; color:var(--forest); }

/* Honigfalle. display:none waere erkennbar; so steht sie ausserhalb des
   Bildes und bleibt fuer einfache Ausfuellroboter attraktiv. */
.fa-pp-falle{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ------------------------------------------------------- Was es nicht ist */
.fa-pp-klar{ background:var(--nachthimmel); border-top:1px solid rgba(231,228,214,.10); }
.fa-pp-klarliste{ list-style:none; margin:0; padding:0; display:grid; gap:16px; max-width:74ch; }
.fa-pp-klarliste li{
  position:relative; padding-left:26px; font-size:15px; line-height:1.78; color:var(--salbeinebel);
}
.fa-pp-klarliste li::before{
  content:""; position:absolute; left:0; top:.78em; width:13px; height:1px; background:var(--forest);
}

/* ========================================================================
   Anreisser auf Start-, Produkt- und Partnerseite
   ======================================================================== */
.fa-ppt{
  background:
    radial-gradient(90% 160% at 100% 50%, rgba(86,94,76,.26) 0%, transparent 60%),
    #1e201c;
  border-top:1px solid rgba(231,228,214,.10);
  border-bottom:1px solid rgba(231,228,214,.10);
}
.fa-ppt-innen{
  max-width:var(--breite); margin:0 auto; padding:clamp(46px,6vw,80px) var(--rand);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center;
}
.fa-ppt-ober{
  font-family:"Space Grotesk",sans-serif; font-size:10.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--salbeinebel); margin:0 0 13px;
}
.fa-ppt-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif; font-weight:300;
  font-size:clamp(24px,3.1vw,36px); line-height:1.16; margin:0 0 14px; max-width:18ch;
}
.fa-ppt-titel em{ font-style:italic; color:var(--mondlicht); }
.fa-ppt-satz{ margin:0 0 26px; font-size:15px; line-height:1.75; color:var(--salbeinebel); max-width:52ch; }
.fa-ppt-tat{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }

.fa-ppt-liste{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.fa-ppt-liste li{
  position:relative; padding:13px 16px 13px 34px;
  border:1px solid rgba(231,228,214,.13); border-radius:8px;
  background:rgba(245,242,235,.03);
}
.fa-ppt-liste li::before{
  content:""; position:absolute; left:15px; top:1.28em; width:9px; height:1px;
  background:var(--salbeinebel);
}
.fa-ppt-liste b{ font-weight:400; font-size:14px; color:rgba(245,242,235,.9); letter-spacing:.01em; }

/* ----------------------------------------------------------------- Schmal */
@media (max-width:900px){
  .fa-ppt-innen{ grid-template-columns:1fr; gap:30px; }
  .fa-ppt-titel{ max-width:none; }
}
@media (max-width:700px){
  /* Zwei Spalten auf 390 px ergeben Felder von rund 160 px — darin steht
     „info@…“ nicht mehr lesbar. Ab hier untereinander. */
  .fa-pp-reihe{ grid-template-columns:1fr; gap:16px; }
  .fa-pp-innen{ padding:clamp(42px,9vw,64px) var(--rand); }
  .fa-pp-kopf-innen{ padding:clamp(44px,10vw,72px) var(--rand); }
  .fa-pp-weg{ padding:24px 20px; }
  .fa-pp-absenden{ gap:14px; }
  .fa-pp-absenden .fa-cta{ width:100%; text-align:center; }
  /* Tippflaeche: die Kaestchen waren 17 px, eine Fingerkuppe ist rund 44.
     Sichtbar bleibt das Kaestchen klein, treffbar wird die ganze Zeile. */
  .fa-pp-zustimmung{ padding:8px 0; }
  .fa-pp-zustimmung input{ width:22px; height:22px; }
}

/* Dieselben zwei Regeln, die im Mobil-Block von rahmen.css für die ganze
   Seite gelten — hier für die Klassen dieser Datei nachgezogen.
   Gemessen bei 390 px: die Oberzeilen standen auf 10,5 px, der Link in der
   Einwilligung war 136 x 16 px gross. Eine Fingerkuppe ist rund 9 mm breit,
   also etwa 44 Bildpunkte. Die SICHTBARE Groesse bleibt, vergroessert wird
   nur die treffbare Flaeche. */
@media (max-width:700px){
  .fa-pp-ober,
  .fa-ppt-ober,
  .fa-pp-weg-marke{ font-size:11.5px; letter-spacing:.26em; }
  .fa-pp-nr{ font-size:12.5px; }

  .fa-pp-zustimmung a{ position:relative; display:inline-block; padding:6px 0; }
  .fa-pp-zustimmung a::after{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:max(100%,44px); height:max(100%,44px); border-radius:8px;
  }
  .fa-pp-weg .fa-zweit{ padding:10px 0; }
}

@media (prefers-reduced-motion:reduce){
  .fa-pp-karte{ transition:none; }
  .fa-pp-karte:hover{ transform:none; }
}

/* ==========================================================================
   Portal-Vorschau — das nachgebaute Affiliate-Dashboard
   --------------------------------------------------------------------------
   Nachgebaut statt fotografiert: scharf auf jedem Schirm, übersetzbar, ein
   paar Kilobyte statt ein paar hundert, und es zeigt keine echten Kunden.

   Der Browserrahmen ist bewusst schlicht (drei Punkte, eine Adresszeile).
   Ein detailgetreu nachgebautes Fenster mit Zurück-Pfeilen und Lesezeichen
   lenkt vom Inhalt ab und sieht auf jedem System falsch aus.
   ========================================================================== */
.fa-pv{ background:linear-gradient(180deg,var(--nachthimmel) 0%,#1c1e1a 100%); }

.pv-rahmen{
  margin:0; border-radius:14px; overflow:hidden;
  border:1px solid rgba(231,228,214,.16);
  background:#15171400;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.3);
  opacity:0; transform:translateY(18px) scale(.985);
  transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.pv-rahmen.sichtbar{ opacity:1; transform:none; }

.pv-fenster{
  display:flex; align-items:center; gap:14px;
  padding:11px 16px; background:#1a1c19;
  border-bottom:1px solid rgba(231,228,214,.10);
}
.pv-ampel{ display:flex; gap:6px; flex:0 0 auto; }
.pv-ampel i{ width:9px; height:9px; border-radius:50%; background:rgba(231,228,214,.22); }
.pv-adresse{
  font-size:11.5px; letter-spacing:.06em; color:rgba(161,165,140,.75);
  background:rgba(0,0,0,.25); border-radius:999px; padding:4px 14px;
}

.pv-schirm{ background:#0f110e; padding:0; min-height:392px; }

/* --- Kopfleiste des Dashboards ------------------------------------------ */
.pv-leiste{
  display:flex; align-items:center; gap:6px;
  padding:12px 18px; border-bottom:1px solid rgba(231,228,214,.09);
  background:rgba(245,242,235,.02);
}
.pv-marke{
  font-family:"Anton","Arial Narrow",sans-serif; letter-spacing:.13em;
  font-size:13px; color:var(--creme); margin-right:16px; flex:0 0 auto;
}
.pv-leiste button{
  background:none; border:0; cursor:pointer; font:inherit;
  font-size:12.5px; letter-spacing:.04em; color:rgba(161,165,140,.9);
  padding:7px 13px; border-radius:999px;
  transition:background .25s ease, color .25s ease;
}
.pv-leiste button:hover{ color:var(--creme); }
.pv-leiste button[aria-selected="true"]{ background:rgba(231,220,201,.13); color:var(--mondlicht); }
.pv-nutzer{
  margin-left:auto; flex:0 0 auto;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--forest); color:var(--creme);
  font-size:11px; letter-spacing:.06em;
}

.pv-blatt{ padding:22px 18px 26px; }

/* --- Kennzahlen ---------------------------------------------------------- */
.pv-kacheln{
  list-style:none; margin:0 0 20px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px;
}
.pv-kachel{
  border:1px solid rgba(231,228,214,.10); border-radius:10px;
  padding:15px 16px; background:rgba(245,242,235,.028);
}
.pv-k-titel{
  display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(161,165,140,.8); margin-bottom:9px;
}
.pv-k-zahl{ display:flex; align-items:baseline; gap:3px; }
.pv-k-zahl i{ font-style:normal; font-size:15px; color:var(--salbeinebel); }
.pv-k-zahl b{
  font-family:"Space Grotesk",sans-serif; font-weight:300;
  font-size:clamp(22px,3vw,28px); line-height:1; color:var(--mondlicht);
  /* Feste Ziffernbreite: sonst zappelt die Zahl beim Hochzählen, weil 1
     schmaler ist als 8. */
  font-variant-numeric:tabular-nums;
}
.pv-k-unter{ display:block; margin-top:8px; font-size:11.5px; color:rgba(161,165,140,.7); }

/* --- Verlaufsbalken ------------------------------------------------------ */
.pv-verlauf{
  border:1px solid rgba(231,228,214,.10); border-radius:10px;
  padding:15px 16px 12px; background:rgba(245,242,235,.02);
}
.pv-v-kopf{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(161,165,140,.8); margin-bottom:14px;
}
.pv-v-jahr{ letter-spacing:.08em; }
/* 74 px waren zu wenig: der niedrigste Balken steht auf 34 %, der höchste
   auf 92 % — bei 74 px sind das 25 gegen 68 Pixel, und aus zwei Metern
   Abstand sieht das aus wie eine gerade Linie. Bei 112 px liest man den
   Verlauf. */
/* Drei waagerechte Hilfslinien hinter den Balken. Ohne sie schwebt der
   Verlauf im Nichts, und zwei Monate lassen sich nicht vergleichen. */
.pv-balken{
  position:relative; display:flex; align-items:flex-end; gap:8px;
  height:124px; padding-bottom:19px;
}
.pv-balken::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:19px;
  pointer-events:none;
  background:linear-gradient(to top, rgba(231,228,214,.085) 0 1px, transparent 1px)
             0 0/100% 33.34% repeat-y;
}
/* WICHTIG: der Balken selbst ist ::before, nicht das span.
   Erster Anlauf war scaleY(0) direkt auf dem span — dann wird das
   Monatskürzel darin mitgestaucht und zieht sich beim Einlaufen wie
   Kaugummi. Das span ist jetzt nur noch die volle Spalte; darin wächst
   der Strich, und das Kürzel hängt unbewegt darunter. */
.pv-balken span{
  position:relative; flex:1; height:100%;
  display:flex; align-items:flex-end;
}
.pv-balken span::before{
  content:""; display:block; width:100%; height:var(--h);
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,rgba(231,220,201,.55),rgba(86,94,76,.42));
  transform-origin:bottom; transform:scaleY(0);
}
/* Der laufende Monat hebt sich ab — sonst sind es acht gleich wichtige
   Striche und das Auge findet keinen Halt. */
.pv-b-jetzt::before{
  background:linear-gradient(180deg,var(--mondlicht),rgba(161,165,140,.6));
  box-shadow:0 0 22px rgba(231,220,201,.22);
}
.pv-balken span i{
  position:absolute; left:50%; bottom:-19px; transform:translateX(-50%);
  font-style:normal; font-size:9.5px; letter-spacing:.08em;
  color:rgba(161,165,140,.62); white-space:nowrap;
}
.pv-b-jetzt i{ color:var(--mondlicht); }
.laeuft .pv-balken span::before{ animation:pv-wachsen .7s cubic-bezier(.2,.8,.3,1) var(--verzug) forwards; }
@keyframes pv-wachsen{ to{ transform:scaleY(1); } }

/* Fußzeile unter Tabelle und Dateiliste. */
.pv-t-fuss{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  margin:16px 0 0; padding-top:13px; flex-wrap:wrap;
  border-top:1px solid rgba(231,228,214,.08);
  font-size:11.5px; line-height:1.6; color:rgba(161,165,140,.72);
}
.pv-t-mehr{ color:var(--mondlicht); white-space:nowrap; }

/* --- Verkaufstabelle ----------------------------------------------------- */
.pv-tabelle{ width:100%; border-collapse:collapse; font-size:13px; }
.pv-tabelle th{
  text-align:left; font-weight:400; padding:0 10px 11px 0;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(161,165,140,.8); border-bottom:1px solid rgba(231,228,214,.10);
}
.pv-tabelle td{
  padding:13px 10px 13px 0; color:rgba(245,242,235,.85);
  border-bottom:1px solid rgba(231,228,214,.06);
}
.pv-tabelle tbody tr{ opacity:0; transform:translateY(6px); }
.laeuft .pv-tabelle tbody tr{ animation:pv-rein .5s ease var(--verzug) forwards; }
@keyframes pv-rein{ to{ opacity:1; transform:none; } }
.pv-weg{
  display:inline-block; font-size:11px; letter-spacing:.04em;
  border:1px solid rgba(161,165,140,.35); border-radius:999px; padding:3px 10px;
  color:var(--salbeinebel);
}
.pv-geld{ text-align:right; color:var(--mondlicht) !important; font-variant-numeric:tabular-nums; }

/* --- Unterlagen ---------------------------------------------------------- */
.pv-dateien{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.pv-dateien li{
  display:flex; align-items:center; gap:13px;
  border:1px solid rgba(231,228,214,.10); border-radius:9px;
  padding:13px 15px; background:rgba(245,242,235,.025);
  opacity:0; transform:translateY(6px);
}
.laeuft .pv-dateien li{ animation:pv-rein .5s ease forwards; }
.laeuft .pv-dateien li:nth-child(2){ animation-delay:70ms; }
.laeuft .pv-dateien li:nth-child(3){ animation-delay:140ms; }
.laeuft .pv-dateien li:nth-child(4){ animation-delay:210ms; }
.pv-d-symbol{
  flex:0 0 auto; width:26px; height:32px; border-radius:3px;
  background:linear-gradient(160deg,rgba(231,220,201,.28),rgba(86,94,76,.35));
  position:relative;
}
.pv-d-symbol::after{
  content:""; position:absolute; right:0; top:0; border-width:0 9px 9px 0;
  border-style:solid; border-color:transparent #0f110e transparent transparent;
}
.pv-d-name{ font-size:13.5px; color:rgba(245,242,235,.9); }
.pv-d-groesse{ margin-left:auto; font-size:11.5px; color:rgba(161,165,140,.7); }
.pv-d-tat{
  flex:0 0 auto; font-size:11.5px; letter-spacing:.06em; color:var(--nachthimmel);
  background:var(--mondlicht); border-radius:999px; padding:5px 13px;
}

.pv-hinweis{
  margin:16px 0 0; font-size:12px; letter-spacing:.04em;
  color:rgba(161,165,140,.72);
}
.pv-hinweis::before{
  content:""; display:inline-block; width:14px; height:1px; margin-right:9px;
  vertical-align:middle; background:rgba(161,165,140,.5);
}

/* Der Provisionsrechner stand hier. Entfernt am 14.08. — Konditionen
   gehoeren nicht auf die oeffentliche Seite. */

/* ==========================================================================
   FAQ
   ========================================================================== */
.fa-pf{ background:var(--nachthimmel); }
.pf-liste{ max-width:820px; border-top:1px solid rgba(231,228,214,.12); }
.pf-punkt{ border-bottom:1px solid rgba(231,228,214,.12); }
.pf-punkt summary{
  list-style:none; cursor:pointer; position:relative;
  padding:20px 46px 20px 0;
  font-family:"Space Grotesk",sans-serif; font-size:16.5px; line-height:1.45;
  color:var(--creme);
  transition:color .25s ease;
}
.pf-punkt summary::-webkit-details-marker{ display:none; }
.pf-punkt summary:hover{ color:var(--mondlicht); }
.pf-punkt summary:focus-visible{ outline:2px solid var(--mondlicht); outline-offset:4px; border-radius:4px; }
/* Plus, das beim Öffnen zum Minus wird — zwei Striche, einer dreht sich. */
.pf-kreuz{ position:absolute; right:6px; top:50%; width:15px; height:15px; margin-top:-7px; }
.pf-kreuz::before,
.pf-kreuz::after{
  content:""; position:absolute; left:0; top:7px; width:15px; height:1.5px;
  background:var(--salbeinebel); transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.pf-kreuz::after{ transform:rotate(90deg); }
.pf-punkt[open] .pf-kreuz::after{ transform:rotate(0); }
.pf-punkt[open] summary{ color:var(--mondlicht); }
.pf-antwort{ padding:0 46px 22px 0; }
.pf-antwort p{ margin:0; font-size:15.5px; line-height:1.78; color:var(--salbeinebel); max-width:66ch; }

/* ------------------------------------------------------------------ Schmal */
@media (max-width:700px){
  .pv-schirm{ min-height:0; }
  .pv-blatt{ padding:18px 14px 22px; }
  .pv-leiste{ padding:11px 12px; gap:3px; overflow-x:auto; }
  .pv-leiste::-webkit-scrollbar{ display:none; }
  .pv-marke{ margin-right:8px; }
  .pv-nutzer{ display:none; }
  .pv-k-titel,
  .pv-tabelle th{ font-size:11.5px; letter-spacing:.12em; }
  .pv-k-unter,
  .pv-d-groesse{ font-size:12px; }
  .pv-adresse{ font-size:12px; }
  /* Die Tabelle bricht auf 390 px nicht sinnvoll um. Seitlich schiebbar,
     am Rand angeschnitten, damit man sieht, dass es weitergeht. */
  .pv-blatt[data-pv-blatt="verkaeufe"]{ overflow-x:auto; }
  .pv-tabelle{ min-width:430px; }
  .pf-punkt summary{ font-size:16px; padding-right:38px; }
  .pf-antwort{ padding-right:0; }
}

@media (prefers-reduced-motion:reduce){
  .pv-rahmen{ opacity:1; transform:none; transition:none; }
  /* Endzustand zeigen, nicht nichts: der Balken steht auf seiner Höhe,
     er wächst nur nicht hinein. */
  .pv-balken span::before{ transform:none; animation:none; }
  .pv-tabelle tbody tr,
  .pv-dateien li{ opacity:1; transform:none; animation:none; }
}

/* ==========================================================================
   Ausbau 14.08. — Scroll-Inszenierung, Bilder, stärkeres HUD
   --------------------------------------------------------------------------
   Drei Grundsätze, damit daraus kein Jahrmarkt wird:

   1. BEWEGUNG NUR EINMAL. Was eingeblendet ist, bleibt eingeblendet. Ein
      Block, der beim Zurückscrollen erneut einfliegt, wirkt nervös und
      kostet auf schwachen Geräten Rechenzeit.
   2. NUR TRANSFORM UND OPACITY. Beides bewegt der Browser auf der
      Grafikkarte. Alles andere (top, height, margin) zwingt ihn, das
      Seitenlayout neu zu rechnen — bei jedem Bild, sechzigmal je Sekunde.
   3. OHNE JAVASCRIPT IST ALLES SICHTBAR. Die Startwerte greifen erst,
      wenn das Skript die Klasse fa-auf-an am <html> gesetzt hat. Fällt
      das Skript aus, sieht man die Seite ganz normal — statt einer
      Sammlung unsichtbarer Kästen.
   ========================================================================== */
.fa-auf-an [data-auf]{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1) var(--verzug,0ms),
             transform .8s cubic-bezier(.2,.7,.3,1) var(--verzug,0ms);
}
.fa-auf-an [data-auf].sichtbar{ opacity:1; transform:none; }

/* --- Die vier Karten: Nummer und deutlicheres Anfassen ------------------- */
.fa-pp-karte{ position:relative; overflow:hidden; }
.fa-pp-k-nr{
  position:absolute; right:14px; top:10px;
  font-family:"Space Grotesk",sans-serif; font-weight:300; font-size:44px;
  line-height:1; color:rgba(231,220,201,.07); letter-spacing:-.03em;
  transition:color .35s ease;
}
.fa-pp-karte:hover .fa-pp-k-nr{ color:rgba(231,220,201,.14); }
/* Ein Lichtstreifen, der beim Überfahren von links durchläuft. Kein
   Glitzern — eine einzelne, langsame Kante. */
.fa-pp-karte::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(231,220,201,.07) 50%,transparent 62%);
  transform:translateX(-120%); transition:transform .9s cubic-bezier(.2,.7,.3,1);
}
.fa-pp-karte:hover::after{ transform:translateX(120%); }

/* --- Die drei Wege bekommen ein Gesicht ---------------------------------- */
.fa-pp-weg{ padding:0; overflow:hidden; }
.fa-pp-weg-bild{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:#181a16;
}
.fa-pp-weg-bild img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* Leicht entsättigt und abgedunkelt, damit drei Fotos aus drei
     Aufnahmesituationen wie eine Reihe wirken und der Text darunter die
     Hauptrolle behält. Beim Überfahren kommt die Farbe zurück. */
  filter:grayscale(.35) brightness(.72) contrast(1.05);
  transform:scale(1.02);
  transition:filter .6s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
.fa-pp-weg:hover .fa-pp-weg-bild img{
  filter:grayscale(0) brightness(.9) contrast(1);
  transform:scale(1.07);
}
/* Verlauf nach unten, damit die Kante zum Text nicht hart abschneidet. */
.fa-pp-weg-bild::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 30%,rgba(35,35,35,.55) 78%,rgba(35,35,35,.92) 100%);
}
.fa-pp-weg-inhalt{ padding:24px 24px 28px; display:flex; flex-direction:column; flex:1; }
.fa-pp-weg{
  transition:border-color .35s ease, transform .5s cubic-bezier(.2,.7,.3,1),
             box-shadow .45s ease;
}
.fa-pp-weg:hover{
  border-color:rgba(231,220,201,.4); transform:translateY(-4px);
  box-shadow:0 28px 60px -34px rgba(0,0,0,.9);
}

/* --- Die Ablaufschritte: Linie, die mitwächst ---------------------------- */
.fa-pp-schritte li{ overflow:visible; }
.fa-pp-schritte li::after{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:var(--mondlicht);
  transition:width 1.1s cubic-bezier(.2,.7,.3,1) var(--verzug,0ms);
}
.fa-pp-schritte li.sichtbar::after{ width:100%; }

/* --- HUD: die Bühne größer und mit Raster ------------------------------- */
/* Der Dashboard-Nachbau darf breiter sein als der Fließtext — er ist
   ein Bild, kein Absatz. Die ÜBERSCHRIFT darf es nicht: sie stand
   dadurch 60 px links von jeder anderen Überschrift der Seite, und
   beim Scrollen sieht man den Sprung (gemessen 15.08.).
   Also: Text bleibt in der Spalte, nur der Rahmen wächst. */
.fa-pv .fa-pp-innen{ max-width:var(--breite); }
.fa-pv .pv-rahmen{
  width:min(1320px, calc(100vw - 2 * var(--rand)));
  margin-inline:calc((100% - min(1320px, 100vw - 2 * var(--rand))) / 2);
}
/* Gemessen am 15.08.: das höchste Blatt („Unterlagen“) ist 358 px hoch,
   die Reiterleiste 46 — zusammen 404. Bei 456 blieb unter jedem Reiter
   ein handgroßes schwarzes Feld stehen, und der Nachbau sah aus wie ein
   Kasten, dem der Inhalt ausgegangen ist. Das Maß muss trotzdem fest
   sein, sonst springt die Höhe beim Reiterwechsel. */
.pv-schirm{ min-height:412px; position:relative; }
/* Ein sehr leises Raster hinter dem Dashboard. Es macht die Fläche zu
   einem Gerät statt zu einem Kasten — und ist schwach genug, dass man es
   erst bemerkt, wenn man danach sucht. */
.pv-schirm::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(231,220,201,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,220,201,.028) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
}
.pv-blatt{ position:relative; z-index:1; }
/* Ein Lichtschein oben, wie von einem eingeschalteten Bildschirm. */
.pv-rahmen::before{
  content:""; position:absolute; left:50%; top:-2px; width:62%; height:120px;
  transform:translateX(-50%); pointer-events:none; z-index:2;
  background:radial-gradient(ellipse at 50% 0%, rgba(231,220,201,.13) 0%, transparent 70%);
}
.pv-rahmen{ position:relative; }
.pv-kachel{ position:relative; overflow:hidden; }
.pv-kachel::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--mondlicht),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
}
.sichtbar .pv-kachel::after,
.pv-rahmen.sichtbar .pv-kachel::after{ transform:scaleX(1); }
.pv-kachel:nth-child(2)::after{ transition-delay:.1s; }
.pv-kachel:nth-child(3)::after{ transition-delay:.2s; }
.pv-kachel:nth-child(4)::after{ transition-delay:.3s; }

/* --- FAQ: die Zeile hebt sich beim Überfahren --------------------------- */
.pf-punkt{ position:relative; transition:background .3s ease; }
.pf-punkt::before{
  content:""; position:absolute; left:-16px; right:-16px; top:0; bottom:0;
  background:rgba(245,242,235,.03); border-radius:8px;
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.pf-punkt:hover::before,
.pf-punkt[open]::before{ opacity:1; }
.pf-punkt summary{ position:relative; z-index:1; }
.pf-antwort{ position:relative; z-index:1; }

@media (max-width:700px){
  .fa-pp-weg-inhalt{ padding:20px 20px 24px; }
  .fa-pp-weg-bild{ aspect-ratio:16/9; }
  .fa-pp-k-nr{ font-size:38px; top:-2px; right:8px; }
  .pv-schirm{ min-height:0; }
}

/* ======================================================================
   Kopf, Login, Fakten und Bildseite auf schmalen Fenstern
   ---------------------------------------------------------------------
   Der Umbruchpunkt liegt bei 1000 px, nicht bei 900: darunter wird die
   rechte Spalte des Kopfes schmaler als 300 px, und dann bricht die
   Beschriftung des Login-Knopfs auf zwei Zeilen um.
   ====================================================================== */
@media (max-width:1000px){
  .fa-pp-kopf-innen{ grid-template-columns:1fr; row-gap:28px; }
  .fa-pp-kopf h1{ max-width:none; font-size:clamp(38px,7.4vw,64px); }
  .fa-pp-login{ max-width:560px; }
}
@media (max-width:760px){
  /* Drei Fakten nebeneinander ergeben auf 390 px Spalten von 108 px —
     „Kein Einstiegsgeld“ bricht dort dreimal um. Untereinander. */
  .fa-pp-fakten{ grid-template-columns:1fr; gap:0; }
  .fa-pp-fakten li{ padding:12px 0; border-top:1px solid rgba(231,228,214,.13); }
  .fa-pp-fakten li:first-child{ border-top-color:rgba(231,228,214,.16); }
  .fa-pp-fakten b{ margin-bottom:3px; }
}
@media (max-width:700px){
  .fa-pp-kopf-innen{ padding:clamp(40px,9vw,64px) 20px 30px; }
  .fa-pp-fakten{ padding:0 20px 30px; }
  .fa-pp-login{ padding:22px 20px; }
  /* Tippfläche: der Hilfe-Link war 132 x 17 px. Über min-height statt
     über Polster gerechnet — siehe dieselbe Stelle in rahmen.css. */
  .fa-pl-hilfe a{
    display:inline-flex; align-items:center; min-height:44px; padding:0 6px;
  }
  .fa-pp-schritte{ gap:0; }
  /* Untereinander wird aus dem waagerechten Faden ein senkrechter. */
  .fa-pp-schritte::before{
    left:4px; right:auto; top:0; bottom:34px; width:1px; height:auto;
    background:linear-gradient(180deg,
      rgba(231,220,201,.42) 0%, rgba(231,220,201,.2) 70%, transparent 100%);
  }
  .fa-pp-schritte li{ padding:22px 0 22px 26px; }
  .fa-pp-schritte li::before{ top:24px; }
  .fa-pp-schritte li:hover{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  /* Kein Verstecken, kein Einblenden, keine Kanten, die durchlaufen. */
  .fa-auf-an [data-auf]{ opacity:1; transform:none; transition:none; }
  .fa-pp-karte::after,
  .fa-pp-schritte li::after{ display:none; }
  .fa-pp-weg,
  .fa-pp-weg-bild img{ transition:none; }
  .fa-pp-weg:hover{ transform:none; }
  .fa-pp-weg:hover .fa-pp-weg-bild img{ transform:scale(1.02); }
  .pv-kachel::after{ transform:scaleX(1); transition:none; }
}