/**
 * HU Gradient Elements - Frontend Stylesheet
 *
 * Standalone-Geschwister-Canvas-Architektur.
 * WICHTIG: Keinerlei overflow-Regeln auf Dokumentenebene (html, body)!
 */

/* 1. Standalone Geschwister-Canvas unmittelbar vor dem Gruppenblock */
.hu-ge-canvas.hu-ge-canvas--standalone {
    position: relative;
    display: block;
    height: 0;
    min-height: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border: none;
    /* Vertikal sichtbar (ragt über Blockgrenzen), horizontal auf Canvas-Breite geclippt (verhindert horizontalen Scrollbalken autark) */
    overflow-x: clip;
    overflow-y: visible;
    pointer-events: none;
    z-index: -1;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* 2. Einzelnes Gradient-Element */
.hu-ge-element {
    position: absolute;
    width: var(--hu-ge-width, 800px);
    height: var(--hu-ge-height, 600px);
    aspect-ratio: var(--hu-ge-aspect-ratio, auto);
    z-index: var(--hu-ge-z-index, -1);
    pointer-events: none;
    user-select: none;
    display: block;
}

/* Bild innerhalb des Gradient-Elements (rein dekorativ) */
.hu-ge-element .hu-ge-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 3. Positionierungsvarianten */

/* Links am Rand verankert */
.hu-ge-element--left {
    left: 0;
    top: 0;
    transform: translate(
        calc(var(--hu-ge-offset-left, 0px) - var(--hu-ge-offset-right, 0px)),
        calc(var(--hu-ge-offset-top, 0px) - var(--hu-ge-offset-bottom, 0px))
    );
}

/* Rechts am Rand verankert */
.hu-ge-element--right {
    right: 0;
    top: 0;
    transform: translate(
        calc(var(--hu-ge-offset-left, 0px) - var(--hu-ge-offset-right, 0px)),
        calc(var(--hu-ge-offset-top, 0px) - var(--hu-ge-offset-bottom, 0px))
    );
}

/* Mittig zentriert */
.hu-ge-element--center {
    left: 50%;
    top: 0;
    transform: translate(
        calc(-50% + var(--hu-ge-offset-left, 0px) - var(--hu-ge-offset-right, 0px)),
        calc(var(--hu-ge-offset-top, 0px) - var(--hu-ge-offset-bottom, 0px))
    );
}

/* WCAG 2.2 AA: Respektierung reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
    .hu-ge-element {
        transition: none !important;
        animation: none !important;
    }
}

.hu-ge-canvas.hu-ge-canvas--standalone ~ *:not(.hu-ge-canvas.hu-ge-canvas--standalone) {
    position: relative;
}