/* ========================================
   ADD-CUBE-HERO
======================================== */

/*
 * Bezugspunkt für die absolut
 * positionierte Divi-Row.
 */


/* ========================================
   GLOBALE VARIABLEN
======================================== */

:root {
    --add-cube-size: 170px;
    --add-cube-depth: calc(var(--add-cube-size) / 2);
    --add-cube-white: #ffffff;
    --add-cube-dark: var(--color-ink);
}


.hero-cube-section {
    position: relative;
}


/* Stack aus oberem und unterem Cube */
.add-cube-stack {
    position: relative;
    z-index: 10;

    display: flex;
    flex-direction: column;

    width: var(--add-cube-size);
}


/* 3D-Bühne eines einzelnen Cubes */
.add-cube-scene {
    position: relative;

    width: var(--add-cube-size);
    height: var(--add-cube-size);

    perspective: 2400px;
    perspective-origin: 50% 50%;
}


/* Würfelkörper */
.add-cube {
    --add-cube-rotation: 0deg;

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    transform:
        translateZ(calc(-1 * var(--add-cube-depth))) rotateY(var(--add-cube-rotation));

    transform-style: preserve-3d;
    transform-origin: 50% 50%;

    will-change: transform;
}


/* Gemeinsame Gestaltung aller Cube-Flächen */
.add-cube__face {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    box-sizing: border-box;

    background: var(--add-cube-white);
    color: var(--add-cube-dark);

    border: 1px solid rgb(17 20 24 / 9%);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    overflow: hidden;
}


/* Vertikal gedrehte Beschriftung */
.add-cube__label {
    display: block;

    width: 100%;
    padding: 0;
    box-sizing: border-box;

    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(20px,
            calc(var(--add-cube-size) * 0.17),
            30px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;

    color: inherit;
    white-space: nowrap;

    transform: rotate(-90deg);
    transform-origin: center;
}


/*
 * Oberer Cube:
 * Begriff beginnt direkt an der gemeinsamen Kante.
 */
.add-cube--words .add-cube__label {
    text-align: left;
}


/*
 * Unterer Cube:
 * add: endet direkt an der gemeinsamen Kante.
 */
.add-cube--prefix .add-cube__label {
    text-align: right;
}


/* Längere Begriffe kleiner darstellen */
.add-cube__label--small {
    font-size: clamp(15px,
            calc(var(--add-cube-size) * 0.125),
            22px);
}


/* Vorderseite */
.add-cube__face--front {
    transform:
        rotateY(0deg) translateZ(var(--add-cube-depth));
}


/* Rechte Seite */
.add-cube__face--right {
    background: #f5f5f5;

    transform:
        rotateY(90deg) translateZ(var(--add-cube-depth));
}


/* Rückseite */
.add-cube__face--back {
    background: #ffffff;

    transform:
        rotateY(180deg) translateZ(var(--add-cube-depth));
}


/* Linke Seite */
.add-cube__face--left {
    background: #ececec;

    transform:
        rotateY(-90deg) translateZ(var(--add-cube-depth));
}


/* Oberseite */
.add-cube__face--top {
    background: #fafafa;

    transform:
        rotateX(90deg) translateZ(var(--add-cube-depth));
}


/* Unterseite */
.add-cube__face--bottom {
    background: #e4e4e4;

    transform:
        rotateX(-90deg) translateZ(var(--add-cube-depth));
}




/* ========================================
   RESPONSIVE: ADD CUBES
======================================== */

/* Große Displays ab 1920px: 170px */


/* Große Laptops, beispielsweise MacBook Pro */
@media (max-width: 1919px) {
    :root {
        --add-cube-size: 145px;
    }
}


/* Normale Laptop-Displays */
@media (max-width: 1599px) {
    :root {
        --add-cube-size: 135px;
    }
}


/* Klassische Laptopbreiten wie 1366px */
@media (max-width: 1439px) {
    :root {
        --add-cube-size: 120px;
    }
}


/* Sehr kleine Laptop-Viewports */
@media (max-width: 1279px) {
    :root {
        --add-cube-size: 105px;
    }
}


/*
 * Unterhalb von 1200px und auf
 * reinen Touchgeräten ausblenden.
 */
@media (max-width: 1199px),
(hover: none) and (pointer: coarse) {
    .add-cube-row {
        display: none !important;
    }
}


/* ========================================
   REDUZIERTE BEWEGUNG
======================================== */

@media (prefers-reduced-motion: reduce) {
    .add-cube {
        transform:
            translateZ(calc(-1 * var(--add-cube-depth))) rotateY(0deg) !important;
    }
}