/*
 * HS Responsive Stage
 * Frontend Basis
 */

.hsrs-active {
    --hsrs-stage-w: 100vw;
    --hsrs-stage-h: 100vh;
    --hsrs-vw: 1vw;
    --hsrs-vh: 1vh;
    --hsrs-scale: 1;
}

.hsrs-active body {
    overflow-x: clip !important;
}

/*
 * Der eigentliche Stage-Selector kommt aus dem Plugin.
 * Die JS-Variablen werden global gesetzt; generische Eigenschaften
 * greifen über :has() nicht zuverlässig genug in allen Browsern,
 * deshalb wird der Wrapper zusätzlich via Attribut-agnostischem
 * Klassenmuster nicht hart codiert. Die Kernbreite übernimmt JS/CSS
 * über die Standardklasse und Inline-Konfiguration.
 */

/* Standardfall */
.hsrs-active .desktop-wrapper {
    width: var(--hsrs-stage-w) !important;
    max-width: var(--hsrs-stage-w) !important;
    margin-inline: auto !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.hsrs-active .desktop-wrapper .e-con {
    box-sizing: border-box !important;
}

/*
 * Full bleed:
 * läuft aus der mittigen Stage wieder auf echte 100vw.
 */
.hsrs-active .hsrs-fullbleed {
    width: 100vw !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* Opt-out */
.hsrs-active .hsrs-ignore,
.hsrs-active .hsrs-ignore * {
    --hsrs-scale: 1;
}

.hsrs-debug .desktop-wrapper {
    outline: 2px dashed #ff2d55 !important;
    outline-offset: -2px !important;
}

.hsrs-debug .hsrs-fullbleed {
    outline: 2px dashed #00a3ff !important;
    outline-offset: -2px !important;
}