/* ============================================================
   NO PIXELS - Schnelleinstieg als Aktionsleiste
   ------------------------------------------------------------
   Die Tischreservierung bringt einen Schnelleinstieg mit: eine
   Lasche am rechten Rand, die ein weisses Feld aufklappt. Das Feld
   ist hell, breit und verdeckt beim Oeffnen den halben Bildschirm.

   Hier wird daraus eine Aktionsleiste: eine schmale Spalte am Rand,
   ein Knopf je Eintrag, immer sichtbar. Die Beschriftung faehrt beim
   Ueberfahren aus - so bleibt die Leiste schmal und trotzdem
   verstaendlich.

   Das Plugin bleibt unangetastet. Nur die Darstellung aendert sich;
   Links, Reihenfolge und der Punkt fuer "Discord verbunden" kommen
   weiter von dort.

   Nur auf breiten Schirmen. Auf dem Handy bliebe fuer eine
   Seitenleiste kein Platz, und unten sitzt bereits die Reiterleiste
   der Liga - zwei Leisten uebereinander waeren eine zu viel.
   ============================================================ */

@media (min-width: 900px) {

  /* Die Lasche entfaellt: die Leiste selbst ist der Einstieg. */
  .np-tr-qa-sidetab .np-tr-qa-handle {
    display: none;
  }

  /*
   * Die Leiste spannt vom Kopfbereich bis ueber den FAQ-Helfer und
   * zentriert sich INNERHALB dieses Streifens.
   *
   * Nicht ueber die volle Fensterhoehe zentrieren: bei vielen
   * Eintraegen - angemeldet sind es neun statt sieben - und einem
   * niedrigen Fenster reicht die Leiste sonst nach oben in den
   * Kopfbereich hinein und verschwindet dahinter.
   */
  .np-tr-qa-sidetab {
    /* Knopfgroesse und Platz fuer die Beschriftung an einer Stelle -
       beide Werte gehoeren zusammen, siehe .np-tr-qa-links weiter
       unten. */
    --npt-qa-knopf: 44px;
    --npt-qa-label-platz: 240px;

    /*
     * Feste Breite statt shrink-to-fit: der negative Aussenabstand
     * am Knopf-Container (unten) wuerde sonst in die Breitenrechnung
     * einfliessen und die Leiste um 14px verbreitern.
     */
    width: var(--npt-qa-knopf);

    position: fixed;
    right: 14px;
    /*
     * --npt-kopf wird in header.js gemessen: der Kopf ist nicht
     * immer gleich hoch. Adminleiste, Hinweisbalken, Fensterbreite
     * und der geschrumpfte Zustand aendern ihn. Ein fester Wert lag
     * bei angemeldeten Besuchern zu weit oben - dort kommen 32px
     * Adminleiste und der Hinweisbalken dazu, und die Leiste
     * verschwand hinter dem Kopf.
     */
    top: calc(var(--npt-kopf, 150px) + 16px);
    bottom: 96px;    /* Platz fuer den FAQ-Helfer darunter */
    transform: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Unter dem Kopfbereich (9000), ueber dem Seiteninhalt. */
    z-index: 800;
    /* Die Leiste selbst faengt keine Klicks ab - nur ihre Knoepfe.
       Sonst laege ein unsichtbarer Balken ueber dem Inhalt. */
    pointer-events: none;
  }

  /*
   * Das Feld wird vom Plugin gleich vierfach versteckt: hidden im
   * Markup, dazu im CSS opacity:0, pointer-events:none und ein
   * transform, das es zur Seite schiebt. Als Leiste steht es
   * dauerhaft - deshalb muessen alle vier zurueckgenommen werden.
   * display allein genuegt nicht; das Feld bliebe unsichtbar.
   */
  .np-tr-qa-sidetab .np-tr-qa-panel,
  .np-tr-qa-sidetab .np-tr-qa-panel[hidden] {
    display: block !important;
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 6px;
    border: 1px solid var(--np-rand-hell);
    border-radius: var(--np-r-pille);
    background: color-mix(in srgb, var(--np-flaeche) 88%, transparent);
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .55);
    backdrop-filter: blur(10px);
  }

  /* Die Ueberschrift "Schnelleinstieg" braucht die Leiste nicht -
     die Symbole sagen es. Fuer Screenreader bleibt sie erhalten. */
  .np-tr-qa-sidetab .np-tr-qa-panel-head {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .np-tr-qa-sidetab .np-tr-qa-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
  }

  /* ---------- Ein Knopf je Eintrag ---------- */

  .np-tr-qa-sidetab .np-tr-qa-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--npt-qa-knopf, 44px);
    height: var(--npt-qa-knopf, 44px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--np-text-dim);
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
  }

  .np-tr-qa-sidetab .np-tr-qa-link:hover,
  .np-tr-qa-sidetab .np-tr-qa-link:focus-visible {
    background: var(--np-flaeche-hoch);
    color: var(--np-text);
  }

  .np-tr-qa-sidetab .np-tr-qa-link-icon {
    font-size: 19px;
    line-height: 1;
  }

  /*
   * Die Beschriftung faehrt links aus dem Knopf heraus. Sie bleibt
   * im Dokument stehen - nur unsichtbar -, damit Screenreader und
   * Tastaturbedienung sie weiter finden. display:none wuerde sie
   * ihnen nehmen.
   */
  .np-tr-qa-sidetab .np-tr-qa-link-label {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: .45em .8em;
    border: 1px solid var(--np-rand-hell);
    border-radius: var(--np-r-md);
    background: var(--np-flaeche-hoch);
    color: var(--np-text);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
  }

  .np-tr-qa-sidetab .np-tr-qa-link:hover .np-tr-qa-link-label,
  .np-tr-qa-sidetab .np-tr-qa-link:focus-visible .np-tr-qa-link-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  /* ---------- Zustaende ---------- */

  /* "Discord verbunden" - der Punkt sitzt als Marke am Knopf. */
  .np-tr-qa-sidetab .np-tr-qa-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--np-gruen);
    box-shadow: 0 0 0 2px var(--np-flaeche);
  }

  /* Abmelden steht fuer sich, mit einer Trennlinie darueber. */
  .np-tr-qa-sidetab .np-tr-qa-link--logout,
  .np-tr-qa-sidetab .np-tr-qa-link--abmelden {
    margin-top: 4px;
    border-top: 1px solid var(--np-rand);
    border-radius: 0 0 var(--np-r-pille) var(--np-r-pille);
  }

  .np-tr-qa-sidetab .np-tr-qa-link--logout:hover,
  .np-tr-qa-sidetab .np-tr-qa-link--abmelden:hover {
    color: #e0645c;
  }

  /*
   * Auf niedrigen Fenstern kann die Leiste laenger werden als der
   * Bildschirm hoch ist. Dann scrollt sie in sich, statt oben und
   * unten hinauszulaufen.
   */
  .np-tr-qa-sidetab .np-tr-qa-links {
    /* Passt die Leiste nicht in den Streifen, scrollt sie in sich -
       statt oben und unten hinauszulaufen. */
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;

    /*
     * Und hier der Haken daran: overflow-y macht aus dem
     * overflow-x der anderen Achse ebenfalls "auto" - so steht es
     * in der CSS-Spezifikation, sobald EINE Achse nicht mehr
     * "visible" ist. Der Container schnitt damit alles ab, was
     * seitlich herausragte.
     *
     * Herausgeragt ist genau die Beschriftung: sie sitzt bei
     * right: calc(100% + 10px), also LINKS neben dem Knopf, und
     * lag damit vollstaendig ausserhalb der 44px breiten Spalte -
     * gemessen 0 von 112 Pixeln sichtbar. Beim Ueberfahren wurde
     * sie zwar eingeblendet, aber sofort wieder weggeschnitten.
     *
     * Der Streifen wird deshalb nach links verbreitert und mit
     * einem gleich grossen negativen Aussenabstand wieder
     * zurueckgezogen: die Knoepfe bleiben, wo sie waren, die
     * Beschriftung liegt jetzt INNERHALB der Scrollbox.
     *
     * pointer-events: der verbreiterte Streifen ist unsichtbar,
     * wuerde aber Klicks auf den Seiteninhalt abfangen. Er laesst
     * sie durch; nur die Knoepfe selbst nehmen wieder welche an.
     */
    padding-left: var(--npt-qa-label-platz);
    margin-left: calc(var(--npt-qa-label-platz) * -1);
    pointer-events: none;
  }

  .np-tr-qa-sidetab .np-tr-qa-link {
    pointer-events: auto;
  }

  .np-tr-qa-sidetab .np-tr-qa-links::-webkit-scrollbar {
    display: none;
  }
}

/*
 * Wer Bewegung im Betriebssystem abbestellt hat, bekommt die
 * Beschriftung ohne Fahrt - sie erscheint einfach.
 */
@media (prefers-reduced-motion: reduce) {
  .np-tr-qa-sidetab .np-tr-qa-link-label {
    transition: opacity .01s;
    transform: translateY(-50%);
  }
  .np-tr-qa-sidetab .np-tr-qa-link:hover .np-tr-qa-link-label,
  .np-tr-qa-sidetab .np-tr-qa-link:focus-visible .np-tr-qa-link-label {
    transform: translateY(-50%);
  }
}