/**
 * psn media — Sticky Sections (Frontend).
 *
 * Fixe, schwebende Ebene fuer einen wiederkehrenden Block. Positionierung 1:1
 * nach dem Muster des Barrierefreiheit-Widgets (Anker links/rechts + oben/mitte/
 * unten, Feinjustierung ueber CSS-Variablen, getrennt Desktop/Mobil).
 *
 * Klick-Verhalten: der Wrapper laesst Klicks durch (pointer-events:none), nur der
 * sichtbare Block-Inhalt ist bedienbar (pointer-events:auto). Die Ebene ist so
 * klein wie ihr Inhalt (fit-content), blockiert also keine Flaeche der Seite.
 */

.psn-sticky {
    position: fixed;
    z-index: 9990;
    pointer-events: none;            /* leere Bereiche klickbar durch */
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100vw - 10px);
}

.psn-sticky__inner {
    position: relative;              /* Anker fuer den Schliessen-Button */
    pointer-events: auto;            /* Block-Inhalt (Links/Buttons) bedienbar */
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}

/* ------------------------------------------------------------------
 * Anker (Position je Stufe) + Geraete-Sichtbarkeit werden ZUR LAUFZEIT als
 * Inline-CSS mit Imprezas echten Breakpoints erzeugt — siehe
 * PSN_Sticky::responsive_css(). 4 Stufen (Desktop/Laptop/Tablet/Mobil),
 * Klassen `psn-{d,l,t,m}--<anker>` (Position) bzw. `psn-off-{d,l,t,m}`
 * (auf dieser Stufe ausblenden). Media-Queries koennen keine CSS-Variablen
 * als Breakpoint-Wert aufnehmen, daher stehen diese Regeln bewusst NICHT in
 * dieser statischen Datei. Offset-Variablen: --psn-{d,l,t,m}x / -{...}y.
 * ----------------------------------------------------------------*/

/* per JS gesetzt, wenn der Besucher die Section geschlossen hat */
.psn-sticky.psn-sticky--closed { display: none !important; }

/* ------------------------------------------------------------------
 * Schliessen-Button
 * ----------------------------------------------------------------*/
.psn-sticky__close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: #1d2327;
    color: #fff;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    z-index: 2;
}
.psn-sticky__close:hover,
.psn-sticky__close:focus {
    background: #b32d2e;
    outline: none;
}

/* ------------------------------------------------------------------
 * Auto-Tooltip fuer Impreza-Iconboxen innerhalb einer Sticky Section.
 * Der Iconbox-Titel wird ausgeblendet (nur optisch — der aria-label am
 * Link bleibt fuer Screenreader erhalten) und per JS bei Hover als
 * schwebender Tooltip gezeigt. Vollautomatisch, ohne IDs; greift auf
 * jede Iconbox in .psn-sticky, auch bei mehreren Sections/Icons.
 * ----------------------------------------------------------------*/
.psn-sticky .w-iconbox .w-iconbox-title {
    display: none;
}

.psn-sticky-tooltip {
    position: fixed;
    z-index: 2147483000;
    background: #1d2327;
    color: #fff;
    padding: .3em .7em;
    border-radius: 5px;
    font-size: .9rem;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity .12s ease;
}
.psn-sticky-tooltip.is-visible {
    opacity: .97;
}

/* ------------------------------------------------------------------
 * Buendige Positionierung: den aeusseren Seiten-Innenabstand einer
 * Impreza-Section (Page-Builder-Gutter, oft 40-60px links/rechts)
 * innerhalb der schwebenden Ebene neutralisieren. Sonst schiebt dieses
 * Padding den Inhalt nach innen -> die Section sitzt nicht buendig an
 * ihrer eingestellten Position (Offset wirkt scheinbar nicht). Nur die
 * AEUSSERSTE Section (direktes Kind); verschachtelte behalten ihr Padding.
 * ----------------------------------------------------------------*/
.psn-sticky__inner > .l-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ------------------------------------------------------------------
 * Dezenter Schatten auf Impreza-Icons in einer Sticky Section — immer
 * sichtbar (hebt die Icons vom Hintergrund ab, auch bei aehnlicher
 * Farbe), bei Hover kraeftiger. `filter: drop-shadow` folgt der echten
 * Icon-Form (auch Achtecke / freigestellte SVGs), anders als box-shadow.
 * ----------------------------------------------------------------*/
.psn-sticky .w-iconbox-icon {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, .5));
    transition: filter .2s ease;
}
.psn-sticky .w-iconbox:hover .w-iconbox-icon {
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, .7));
}