/* ═══════════════════════════════════════════════════════════════════
   SPRUNGNAVIGATION
   ───────────────────────────────────────────────────────────────────
   Zwei mitlaufende Pfeile am rechten Rand: nach oben an den Seitenanfang,
   nach unten ans Seitenende. Gedacht fuer lange Seiten, auf denen man
   sonst eine halbe Minute scrollt, um zurueck zur Navigation zu kommen.

   Wird von BEIDEN Seiten benutzt, der Hauptseite und dem CFO-Selbsttest.
   Deshalb eine eigene Datei und keine Regeln in style.css oder
   selbsttest.css: die beiden haben eigene Gestaltungssysteme, und
   dieselbe Sache zweimal zu pflegen geht erfahrungsgemaess schief.
   Die Farben sind in beiden Dateien identisch, deshalb stehen sie hier
   fest und nicht als Variable.

   Sitzt bewusst MITTIG am rechten Rand, nicht unten rechts: dort steht
   auf der Hauptseite der KI-Assistent (.cfab, bottom 28 / right 28), und
   sein Fenster klappt mit 320 Pixeln Breite darueber auf.

   Ohne JavaScript bleiben es gewoehnliche Sprungmarken, die funktionieren.
   Das Skript blendet nur den jeweils sinnlosen Pfeil aus.
   ═══════════════════════════════════════════════════════════════════ */

.sprungnav{
  position:fixed;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  z-index:900;              /* unter dem Assistenten (1000) und den Dialogen (1200) */
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sprungnav a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.1);
  box-shadow:0 2px 10px rgba(17,30,46,0.1);
  color:#1F3864;
  text-decoration:none;
  font-size:17px;
  line-height:1;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background 200ms ease, color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.sprungnav a:hover{
  background:#1F3864;
  color:#fff;
  border-color:#1F3864;
  transform:translateY(-1px);
}

.sprungnav a:focus-visible{
  outline:2px solid #F5A623;
  outline-offset:2px;
}

/* Am Seitenanfang ist "nach oben" sinnlos, am Ende "nach unten".
   Ausblenden statt entfernen, damit der andere Pfeil nicht springt. */
.sprungnav a[aria-hidden="true"]{
  opacity:0;
  pointer-events:none;
}

/* Auf schmalen Geraeten an den unteren Rand, nebeneinander statt
   uebereinander.

   Mittig rechts geht dort nicht: der Fliesstext laeuft bis an beide
   Raender, und die Pfeile lagen mitten im Satz. Unten links ist frei -
   der KI-Assistent sitzt unten RECHTS (.cfab, bottom 18 / right 18) -
   und der Daumen kommt gut hin. */
@media(max-width:760px){
  .sprungnav{
    top:auto;
    bottom:16px;
    right:auto;
    left:16px;
    transform:none;
    flex-direction:row;
    gap:8px;
  }
  .sprungnav a{width:36px;height:36px;font-size:15px;}
}

/* Im Ausdruck haben Knoepfe nichts verloren. */
@media print{
  .sprungnav{display:none !important;}
}