/* ==========================================================================
   Abschnitts-Navigation — Punktleiste am rechten Rand
   ==========================================================================
   Zentral fuer alle Produkte. Gehoert zu seiten-navigation.js.

   Warum es das gibt
   -----------------
   Die Produktstartseiten sind lang: DiKita rund 10.000px, also dreizehn
   Bildschirmlaengen. Die Navigation fuehrt ausschliesslich zu prodocs.app -
   es gab keinen Weg zu Funktionen, Preisen oder Datenschutz ausser blindem
   Scrollen. Rueckmeldung aus dem Team: "man verliert sich auf der Seite".

   Warum diese Loesung
   -------------------
   Verworfen wurden vorher: eine Chip-Leiste unter der Navigation ("oben eine
   Leiste, dann links noch eine"), ein Zurueck/Weiter-Pager am Seitenende und
   eine Aufklapp-Liste, die als weisser Kasten auf dem Hero-Foto lag. Die
   Punktleiste liegt nie ueber Inhalt, braucht keinen Klick zum Oeffnen und
   zeigt nebenbei, wie viel Seite noch kommt.

   Wie eine Seite mitmacht
   -----------------------
       <section id="preise" data-menu="Preise">

   Mehr nicht. Siehe seiten-navigation.js.

   Warum ein Wurzelverzeichnis-Pfad
   --------------------------------
   Eingebunden wird absolut als /seiten-navigation.css. Die Weiterleitungs-
   regel in der .htaccess schreibt nur um, was im Produktordner existiert -
   diese Datei nicht, sie faellt also auf das Wurzelverzeichnis zurueck und
   gilt damit fuer dikita.app, digifiles.app und prodocs.app zugleich.
   ========================================================================== */

.dot-rail {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;

    /* Unsichtbar, bis man sie braucht. Sichtbar wird sie beim Scrollen und
       sobald die Maus in den rechten Randbereich kommt - siehe die Klasse
       is-visible in seiten-navigation.js. So liegt im Ruhezustand nichts
       am Bildrand herum, und wer die Leiste benutzen will, findet sie. */
    opacity: 0;
    pointer-events: none;

    /* Erscheinen und Verschwinden bewusst unterschiedlich schnell:
       Beim Auftauchen soll die Leiste sofort da sein - man scrollt gerade und
       braucht die Orientierung. Beim Verschwinden darf sie sich Zeit lassen;
       ein langsames Ausblenden wirkt ruhig, ein schnelles wie ein Wegschnappen.
       Dieser Wert gilt fuer das AUSblenden (Klasse wird entfernt). */
    transition: opacity 1.1s ease-out;
}

.dot-rail.is-visible {
    opacity: 1;
    pointer-events: auto;
    /* ... und dieser fuer das EINblenden. */
    transition: opacity 0.25s ease-in;
}

.dot-rail__item {
    position: relative;
    display: flex;
    align-items: center;
}

.dot-rail__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(26, 35, 58, 0.22);
    border: 0;
    padding: 0;
    cursor: pointer;
    display: block;
    /* Weiches Ueberblenden beim Abschnittswechsel: der alte Punkt
       verblasst, waehrend der neue aufleuchtet - kein harter Sprung. */
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.35s ease,
                box-shadow 0.35s ease;
}

.dot-rail__item:hover .dot-rail__dot {
    background: rgba(26, 35, 58, 0.45);
    transform: scale(1.25);
}

.dot-rail__item.is-current .dot-rail__dot {
    background: #e0a04f;
    transform: scale(1.5);
    box-shadow: 0 0 0 4px rgba(224, 160, 79, 0.18);
}

/* Der Name erscheint am Desktop beim Darueberfahren. */
.dot-rail__label {
    position: absolute;
    right: 22px;
    white-space: nowrap;
    background: #17233a;
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 7px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.dot-rail__item:hover .dot-rail__label {
    opacity: 1;
    transform: translateX(0);
}

/* --- Telefone -------------------------------------------------------------
   Hier gibt es die Leiste NICHT. Zwei Gruende, beide aus der Praxis:

   1. Am rechten Rand wischt man. Die Tippziele muessten 40px breit sein,
      damit ein Finger sie trifft - damit laegen sie genau dort, wo die
      Wischgesten stattfinden, und faengen sie ab.
   2. Auf einem Touchgeraet feuert das Scroll-Ereignis fast ununterbrochen.
      Die Leiste waere dadurch praktisch immer sichtbar, und das Namensschild
      des aktuellen Abschnitts stuende dauerhaft ueber dem Text. Auf einem
      kleinen Bildschirm stoert das mehr, als es hilft.

   Stattdessen stehen die Abschnitte im aufklappbaren Menue - dort ist Platz,
   es verdeckt nichts, und es ist die Form, die man auf dem Telefon erwartet.
   Siehe den Abschnitt "Telefone" in seiten-navigation.js.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    .dot-rail { display: none; }
}

/* --- Abschnitte im aufklappbaren Menue (nur Telefone) --------------------- */

.sn-menu-head {
    display: block;
    padding: 10px 0 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}

.sn-menu-link--section { padding-left: 14px; position: relative; }

.sn-menu-link--section.is-current { font-weight: 700; }

.sn-menu-link--section.is-current::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e0a04f;
}

/* Sehr niedrige Fenster: die Leiste wuerde sonst ueber den Rand hinauslaufen. */
@media (max-height: 420px) {
    .dot-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dot-rail,
    .dot-rail__dot,
    .dot-rail__label { transition: none; }
}