/* ==========================================================================
   RH BOXES
   Eigene Teaserbox-Varianten für RockSolid TAO / Contao

   Klassen:
   .rh-box1   = Bild oben, Text unten
   .rh-box2-l = Bild links, Text rechts
   .rh-box2-r = Text links, Bild rechts

   Hintergrundfarbe:
   --rh-box-bg je Box-Variante

   Gemeinsame H3-Grösse:
   --rh-box-h3-size

   Die Variablen können über zusätzliche Klassen in custom.css überschrieben
   werden, z. B.:

   .rh-bg-lila { --rh-box-bg: #dcdcea; }

   Die Klassen werden am gesamten TAO-Inhaltselement "Boxen" vergeben.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLEN / STANDARDFARBEN
   ========================================================================== */

/* Gemeinsame H3-Grösse für alle drei RH-Boxen */
.rh-box1,
.rh-box2-l,
.rh-box2-r {
    --rh-box-h3-size: 1.55rem;
}

/* Hintergrundfarbe Box 1 */
.rh-box1 {
    --rh-box-bg: #dcdcea;
}

/* Hintergrundfarbe Box 2 – Bild links */
.rh-box2-l {
    --rh-box-bg: #b8ceed;
}

/* Hintergrundfarbe Box 2 – Bild rechts */
.rh-box2-r {
    --rh-box-bg: #b8ceed;
}


/* ==========================================================================
   2. GEMEINSAME GRUNDEINSTELLUNGEN
   ========================================================================== */

.rh-box1 .teaser-boxes-item,
.rh-box2-l .teaser-boxes-item,
.rh-box2-r .teaser-boxes-item {
    position: relative;
    overflow: hidden;
    color: inherit;
    border: 0;
    border-radius: 0;
    outline: none;
    background-color: var(--rh-box-bg);
    box-shadow: none;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.rh-box1 .teaser-boxes-item:hover,
.rh-box2-l .teaser-boxes-item:hover,
.rh-box2-r .teaser-boxes-item:hover {
    z-index: 1;
    transform: scale(1.01);
    box-shadow: 5px 8px 24px rgba(40, 66, 88, 0.16);
}


/* ==========================================================================
   3. RH BOX 1
   Bild oben, Textfläche darunter
   ========================================================================== */

.rh-box1 .teaser-boxes-item .image-wrapper {
    margin: 0;
    border-radius: 0;
    background: transparent;
}

.rh-box1 .teaser-boxes-item .image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}

.rh-box1 .teaser-boxes-item h3 {
    margin: 0;
    padding: 36px 42px 0;
    font-size: var(--rh-box-h3-size);
    color: var(--ty-color-h3, var(--ty-color-heading));
}

.rh-box1 .teaser-boxes-item .teaser-boxes-item-text {
    padding: 18px 42px 0;
    color: var(--ty-color-text);
}

.rh-box1 .teaser-boxes-item .teaser-boxes-item-text > :first-child {
    margin-top: 0;
}

.rh-box1 .teaser-boxes-item .teaser-boxes-item-text > :last-child {
    margin-bottom: 0;
}

.rh-box1 .teaser-boxes-item > a.button {
    margin: 28px 42px 40px;
}

/* Backend-Variante „Link“ */

.rh-box1 .teaser-boxes-item > a:not(.button):not(.image-wrapper) {
    display: inline-block;

    margin: 28px 42px 40px;
    padding: 0 0 var(--rh-iconbox-link-border-gap);

    border: 0;
    border-bottom:
        var(--rh-iconbox-link-border-width)
        solid
        currentColor;

    color: var(--rh-iconbox-link-color);

    font-family: inherit;
    font-size: inherit;
    font-weight: var(--rh-iconbox-link-weight);
    line-height: inherit;
    letter-spacing: var(--rh-iconbox-link-letter-spacing);
    text-transform: var(--rh-iconbox-link-transform);

    text-decoration: none;
    text-shadow: none;

    background: transparent;
    background-image: none;
    box-shadow: none;

    transition:
        color var(--rh-btn-speed) ease,
        border-color var(--rh-btn-speed) ease;
}

.rh-box1 .teaser-boxes-item:hover > a:not(.button):not(.image-wrapper),
.rh-box1 .teaser-boxes-item > a:not(.button):not(.image-wrapper):focus {
    color: var(--rh-iconbox-link-hover-color);
    text-decoration: none;
}


/* ==========================================================================
   4. RH BOX 2
   Bild und Text nebeneinander
   ========================================================================== */

.rh-box2-l .teaser-boxes-item,
.rh-box2-r .teaser-boxes-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
}


/* Bild links */

.rh-box2-l .teaser-boxes-item .image-wrapper {
    grid-column: 1;
    grid-row: 1 / 4;
}

.rh-box2-l .teaser-boxes-item h3,
.rh-box2-l .teaser-boxes-item .teaser-boxes-item-text,
.rh-box2-l .teaser-boxes-item > a.button,
.rh-box2-l .teaser-boxes-item > a:not(.button):not(.image-wrapper) {
    grid-column: 2;
}


/* Bild rechts */

.rh-box2-r .teaser-boxes-item .image-wrapper {
    grid-column: 2;
    grid-row: 1 / 4;
}

.rh-box2-r .teaser-boxes-item h3,
.rh-box2-r .teaser-boxes-item .teaser-boxes-item-text,
.rh-box2-r .teaser-boxes-item > a.button,
.rh-box2-r .teaser-boxes-item > a:not(.button):not(.image-wrapper) {
    grid-column: 1;
}


/* Bild */

.rh-box2-l .teaser-boxes-item .image-wrapper,
.rh-box2-r .teaser-boxes-item .image-wrapper {
    align-self: stretch;
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
}

.rh-box2-l .teaser-boxes-item .image-wrapper img,
.rh-box2-r .teaser-boxes-item .image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Überschrift */

.rh-box2-l .teaser-boxes-item h3,
.rh-box2-r .teaser-boxes-item h3 {
    grid-row: 1;
    margin: 0;
    padding: 38px 42px 0;
    font-size: var(--rh-box-h3-size);
    color: var(--ty-color-h3, var(--ty-color-heading));
}


/* Text */

.rh-box2-l .teaser-boxes-item .teaser-boxes-item-text,
.rh-box2-r .teaser-boxes-item .teaser-boxes-item-text {
    grid-row: 2;
    padding: 16px 42px 0;
    color: var(--ty-color-text);
}

.rh-box2-l .teaser-boxes-item .teaser-boxes-item-text > :first-child,
.rh-box2-r .teaser-boxes-item .teaser-boxes-item-text > :first-child {
    margin-top: 0;
}

.rh-box2-l .teaser-boxes-item .teaser-boxes-item-text > :last-child,
.rh-box2-r .teaser-boxes-item .teaser-boxes-item-text > :last-child {
    margin-bottom: 0;
}


/* Button */

.rh-box2-l .teaser-boxes-item > a.button,
.rh-box2-r .teaser-boxes-item > a.button {
    grid-row: 3;
    justify-self: start;
    margin: 24px 42px 36px;
}

/* Backend-Variante „Link“ */

.rh-box2-l .teaser-boxes-item > a:not(.button):not(.image-wrapper),
.rh-box2-r .teaser-boxes-item > a:not(.button):not(.image-wrapper) {
    grid-row: 3;

    justify-self: start;

    display: inline-block;

    margin: 24px 42px 36px;
    padding: 0 0 var(--rh-iconbox-link-border-gap);

    border: 0;
    border-bottom:
        var(--rh-iconbox-link-border-width)
        solid
        currentColor;

    color: var(--rh-iconbox-link-color);

    font-family: inherit;
    font-size: inherit;
    font-weight: var(--rh-iconbox-link-weight);
    line-height: inherit;
    letter-spacing: var(--rh-iconbox-link-letter-spacing);
    text-transform: var(--rh-iconbox-link-transform);

    text-decoration: none;
    text-shadow: none;

    background: transparent;
    background-image: none;
    box-shadow: none;

    transition:
        color var(--rh-btn-speed) ease,
        border-color var(--rh-btn-speed) ease;
}

.rh-box2-l .teaser-boxes-item:hover > a:not(.button):not(.image-wrapper),
.rh-box2-r .teaser-boxes-item:hover > a:not(.button):not(.image-wrapper),
.rh-box2-l .teaser-boxes-item > a:not(.button):not(.image-wrapper):focus,
.rh-box2-r .teaser-boxes-item > a:not(.button):not(.image-wrapper):focus {
    color: var(--rh-iconbox-link-hover-color);
    text-decoration: none;
}


/* ==========================================================================
   5. MOBILE BIS 599 PX
   ========================================================================== */

@media screen and (max-width: 599px) {

    .rh-box1 .teaser-boxes-item h3 {
        padding: 24px 24px 0;
    }

    .rh-box1 .teaser-boxes-item .teaser-boxes-item-text {
        padding: 12px 24px 0;
    }

    .rh-box1 .teaser-boxes-item > a.button,
    .rh-box1 .teaser-boxes-item > a:not(.button):not(.image-wrapper) {
        margin: 20px 24px 26px;
    }

    .rh-box2-l .teaser-boxes-item,
    .rh-box2-r .teaser-boxes-item {
        display: block;
    }

    .rh-box2-l .teaser-boxes-item .image-wrapper,
    .rh-box2-r .teaser-boxes-item .image-wrapper {
        width: 100%;
    }

    .rh-box2-l .teaser-boxes-item .image-wrapper img,
    .rh-box2-r .teaser-boxes-item .image-wrapper img {
        width: 100%;
        height: auto;
        object-fit: initial;
    }

    .rh-box2-l .teaser-boxes-item h3,
    .rh-box2-r .teaser-boxes-item h3 {
        padding: 24px 24px 0;
    }

    .rh-box2-l .teaser-boxes-item .teaser-boxes-item-text,
    .rh-box2-r .teaser-boxes-item .teaser-boxes-item-text {
        padding: 12px 24px 0;
    }

    .rh-box2-l .teaser-boxes-item > a.button,
    .rh-box2-r .teaser-boxes-item > a.button,
    .rh-box2-l .teaser-boxes-item > a:not(.button):not(.image-wrapper),
    .rh-box2-r .teaser-boxes-item > a:not(.button):not(.image-wrapper) {
        margin: 20px 24px 26px;
    }

    .rh-box1 .teaser-boxes-item:hover,
    .rh-box2-l .teaser-boxes-item:hover,
    .rh-box2-r .teaser-boxes-item:hover {
        transform: none;
    }

}