/* ===========================================================================
   viceversa.swiss · Seitenverzeichnis «Auf dieser Seite» für lange Seiten
   Angelegt 19.10.2026 — Markus: «Ich möchte eine Eigenheit der alten
   viceversa-Seite wieder aufnehmen: für die viceversa-projects.ch UND für die
   viceversa.swiss. das Seiten-Index-Verzeichnis für lange Seiten» und «die
   Pfeile bewegen sich leicht bei Mouseover, das fand ich gut.»
   Gleiche Mechanik wie auf der Plattform (viceversa-projects.ch/assets/
   seitenindex.js); das Skript daneben (seitenindex.js) baut den Block.
   Hier nur das Aussehen, in den Farben und Schriften dieser Website.
   =========================================================================== */

.vvsi-huelle { padding-block: 34px 0; }
.vvsi-box { margin: 0 0 8px; border-block: 1px solid color-mix(in srgb, var(--vv-feld) 70%, transparent);
            padding: 14px 0 12px; }
.vvsi-box summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px;
                    font-family: var(--vv-schrift-neben, inherit); font-size: 19px; color: var(--vv-rot); }
.vvsi-box summary::-webkit-details-marker { display: none; }
.vvsi-box summary::before { content: "\203A"; display: inline-block; font-size: 21px; line-height: 1;
                            transition: transform .2s ease; }
.vvsi-box[open] summary::before { transform: rotate(90deg); }
.vvsi-box summary small { font-family: inherit; font-size: 15px; color: var(--vv-text); opacity: .75; }

.vvsi { padding: 10px 0 4px 2px; }
.vvsi a { display: flex; gap: 14px; align-items: baseline; padding: 6px 0; text-decoration: none;
          color: var(--vv-text); font-size: 17px; font-weight: 300; line-height: 1.35;
          transition: color .16s ease; }
.vvsi a::before { content: "\203A"; flex: 0 0 auto; color: var(--vv-rot); font-size: 19px; line-height: 1.2;
                  display: inline-block; transition: transform .2s ease; }
/* Der Pfeil rückt beim Darüberfahren leicht nach rechts — wie auf der alten Seite. */
.vvsi a:hover::before, .vvsi a:focus-visible::before { transform: translateX(4px); }
.vvsi a:hover, .vvsi a.on { color: var(--vv-rot); }
.vvsi a.vvsi-u { padding-left: 26px; font-size: 16px; }
@media (min-width: 900px) { .vvsi { columns: 2; column-gap: 48px; } .vvsi a { break-inside: avoid; } }

/* Sprungziel: Der Titel landet unter dem schmalen Kopf, nicht dahinter. */
.vvsi-ziel { scroll-margin-top: 150px; }
@media (max-width: 767px) { .vvsi-ziel { scroll-margin-top: 110px; } }

@media (prefers-reduced-motion: reduce) {
  .vvsi a::before, .vvsi-box summary::before { transition: none; }
}
@media print { .vvsi-huelle, .vvsi-box { display: none !important; } }