/* Kontakt-Leiste am rechten Rand — Alternative zum Overlay (info_button_style = 'rail').
   Markup: #info-rail > p + ul > li > a > svg + span.

   Zwei getrennte Bewegungen, beide ausschliesslich ueber transform (PATTERNS.md: Hover
   darf keine layoutveraendernden Properties transitionen):
     1. Einblenden beim Scrollen — .visible, gesetzt von js/global/info-rail.js
     2. Ausfahren bei Hover/Fokus — --info-rail-shift auf 0

   Die Kinder (nicht der Container) werden verschoben und vom overflow des Containers
   geclippt. Dadurch ragt im Ruhezustand nichts ueber den Viewport-Rand hinaus, was sonst
   einen horizontalen Scrollbalken erzeugt. Das vertikale Padding gibt dem overflow Luft,
   damit es den Schatten oben/unten nicht abschneidet. */

#info-rail {
    --info-rail-w: 13rem;                                            /* ausgefahren */
    --info-rail-tab: 3.25rem;                                        /* Icon-Spalte, im Ruhezustand sichtbar */
    --info-rail-shift: calc(var(--info-rail-w) - var(--info-rail-tab));

    display: none;
    position: fixed;
    top: 50%;
    right: 0;
    width: var(--info-rail-w);
    padding-block: 0.75rem;
    overflow: hidden;
    z-index: 55;                                                     /* ueber #info-button/.wa-float (50), unter Cookie-/Scroll-Buttons (900) */

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(100%, -50%);
    transition: opacity var(--transition-med), visibility var(--transition-med), transform var(--transition-med);
}

@media (min-width: 79.5rem) {
    #info-rail {
        display: block;
    }
}

#info-rail.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, -50%);
}

/* Titel und Liste bilden optisch einen Block — sie werden gemeinsam verschoben.
   --transition-slow (300ms) statt -med: das Ausfahren ist eine groessere Bewegung und
   wirkt bei 200ms hektisch. Gleicher Wert wie in der Legacy-Vorlage. */
#info-rail p,
#info-rail ul {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    transform: translateX(var(--info-rail-shift));
    transition: transform var(--transition-slow), border-radius var(--transition-slow);
}

/* Der Titel wird mit verschoben und waere im Ruhezustand hinter dem Clipping-Rand —
   sichtbar blieb nur eine leere Farbflaeche. Er erscheint daher erst beim Ausfahren.
   opacity nimmt den Hintergrund mit, die Flaeche verschwindet also komplett. */
#info-rail p {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    text-align: left;
    border-bottom: 0.0625rem solid var(--color-text-inverse);
    border-radius: var(--radius) 0 0 0;
    opacity: 0;
    transition: transform var(--transition-slow), opacity var(--transition-slow);
}

@media (hover: hover) {
    #info-rail:hover p {
        opacity: 1;
    }
}

#info-rail:focus-within p {
    opacity: 1;
}

/* Ruhezustand: die Liste ist das oberste sichtbare Element (der Titel ist ausgeblendet)
   → oben gerundet. Beim Ausfahren schiebt sich der Titel darueber → oben eckig, damit
   beide nahtlos aneinander anschliessen. */
#info-rail ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: var(--shadow-lg);
}

@media (hover: hover) {
    #info-rail:hover ul {
        border-radius: 0 0 0 var(--radius);
    }
}

#info-rail:focus-within ul {
    border-radius: 0 0 0 var(--radius);
}

#info-rail li + li {
    border-top: 0.0625rem solid var(--color-text-inverse);
}

#info-rail a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;                                             /* Trefferflaeche */
    padding-right: var(--space-3);
    color: inherit;
    text-decoration: none;
    transition: background var(--transition-med);
}

/* Das SVG fuellt die Icon-Spalte; die viewBox haelt das Seitenverhaeltnis, das Icon
   sitzt dadurch mittig in der Spalte, die im Ruhezustand allein sichtbar bleibt. */
#info-rail a svg {
    flex: 0 0 var(--info-rail-tab);
    width: var(--info-rail-tab);
    height: 1.375rem;
}

/* Feste Leistenbreite trifft auf 16 Sprachen — lange Beschriftungen („Kapcsolatfelvételi
   űrlap") werden sauber gekuerzt statt hart abgeschnitten. Der volle Text steht im title
   des Links. min-width:0 ist noetig, damit Ellipsis im Flex-Item ueberhaupt greift. */
#info-rail a span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.9375rem;
}

#info-rail a:hover,
#info-rail a:focus-visible {
    background: var(--color-primary-hover);
}

/* Ausfahren: Zeigegeraete mit echtem Hover. Tastaturfokus faehrt immer aus, sonst waere
   die Leiste per Tab nicht bedienbar. */
@media (hover: hover) {
    #info-rail:hover {
        --info-rail-shift: 0rem;
    }
}

#info-rail:focus-within {
    --info-rail-shift: 0rem;
}

@media (prefers-reduced-motion: reduce) {
    #info-rail,
    #info-rail p,
    #info-rail ul,
    #info-rail a {
        transition: none;
    }
}