/**
 * DDC-Entwicklungsraster
 *
 * Vorgabe:
 * - 12 Spalten
 * - Spaltenbreite: 98 px
 * - Abstand: 24 px
 * - Rasterbreite: 1.440 px
 * - bei 1.920 px Viewport: 240 px Außenrand je Seite
 * - bei 2.160 px Viewport: 360 px Außenrand je Seite
 */

body.hwt-grid-visible:not(.hwt-grid-hidden)::before {
    content: "";
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 2147483647;
    width: min(1440px, 100vw);
    height: 100vh;
    height: 100dvh;
    pointer-events: none;
    transform: translateX(-50%);
    background-image: repeating-linear-gradient(
        to right,
        rgba(45, 201, 168, 0.34) 0,
        rgba(45, 201, 168, 0.34) 98px,
        rgba(92, 0, 65, 0.24) 98px,
        rgba(92, 0, 65, 0.24) 122px
    );
}

/**
 * Unterhalb von 1.440 px wird das Raster proportional verkleinert,
 * damit weiterhin alle 12 Spalten sichtbar bleiben.
 */
@media (max-width: 1439px) {
    body.hwt-grid-visible:not(.hwt-grid-hidden)::before {
        width: 1440px;
        transform: translateX(-50%) scaleX(calc(100vw / 1440));
        transform-origin: center top;
    }
}

@media print {
    body.hwt-grid-visible:not(.hwt-grid-hidden)::before {
        display: none;
    }
}