/* ============================================================================
   262-php-18-to-top — „Nach oben"

   Alle Farben und Groessen aus assets/css/01-type-color.css. Kein eigener
   Farbwert, kein eigener Radius — die Website ist eckig (--radius: 0), und
   dieser Knopf ist keine Ausnahme.
   ========================================================================== */

.x262-totop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 150;      /* ueber dem Inhalt, unter der Navigation (200) */

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;

    background: var(--brand-strong);
    color: #fff;
    border: 1px solid var(--brand-strong);
    border-radius: var(--radius);
    text-decoration: none;

    /* Eingeblendet wird mit Deckkraft statt display: so bleibt der Platz
       ruhig und der Wechsel ist nicht abrupt. Das [hidden] darunter nimmt
       ihn trotzdem ganz aus dem Weg, wenn er nicht gebraucht wird. */
    opacity: 0;
    transform: translateY(.4rem);
    transition: opacity .18s ease, transform .18s ease, background-color .14s ease;
}

/* Sichtbar, sobald das Skript weit genug gescrollt sieht. */
.x262-totop.is-on { opacity: 1; transform: none; }

.x262-totop:hover  { background: var(--green-800); border-color: var(--green-800); }
.x262-totop:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.x262-totop__icon { display: block; }
.x262-totop__icon svg { display: block; width: 1.25rem; height: 1.25rem; }

/* Der Text ist da — nur nicht zu sehen. Ein Knopf, dessen einziger Inhalt
   ein Pfeil ist, heisst fuer eine Vorlesehilfe "Link". */
.x262-totop__srtext {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .x262-totop { transition: none; transform: none; }
}

/* Beim Drucken hat ein Sprungknopf nichts verloren. */
@media print {
    .x262-totop { display: none; }
}