/**
 * Contao-5-Markup auf Alt-Optik mappen (Stepping-Stone).
 *
 * Contao 5 rendert Kern-Inhaltselemente als Twig-Fragmente mit neuem Markup:
 *   ce_gallery + ul.cols_N      -> .content-gallery.content-gallery--cols-N > ul
 *   ce_image + .image_container -> .content-image > figure
 *   ce_text + .float_right      -> .content-text.media.media--right > figure
 * Das khg-CSS (main.css u. a.) selektiert die alten Klassen. Diese Datei
 * uebertraegt die relevanten Regeln 1:1 auf die neuen Selektoren.
 * Quelle der Werte: khg-alt/assets/css/5e7c171a7f24.css (Live-Aggregat).
 * Wird mit der Twig-Template-Konvertierung obsolet und dann geloescht.
 */

/* ===== Block-Verhalten (Abstaende!) =====
   Contao 3 gab jedem Inhaltselement class="block" -> .block{overflow:hidden}
   verhindert Margin-Collapse zwischen den Elementen. Ohne das kollabieren
   h1/p-Margins durch die div-Grenzen und alle Abstaende schrumpfen. */

[class^="content-"],
[class*=" content-"] {
    overflow: hidden;
}

/* ===== Galerie (angebote, aktivgruppen: 3-spaltig) ===== */

.content-gallery > ul {
    overflow: hidden;
    zoom: 1;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.content-gallery > ul > li {
    float: left;
    width: 31.5%;
    margin: 0.5% 1.3% 0.5% 0;
}
.content-gallery--cols-3 > ul > li:nth-child(3n+1) {
    clear: left;
    margin-left: 0;
}
.content-gallery > ul > li > figure {
    width: 100%;
}
.content-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== Einzelbild (ce_image-Ersatz) ===== */

.content-image > figure {
    position: relative;
    width: 100%;
    margin: 0.8em 0 0;
}
.content-image img {
    display: block;
    width: 100%;
    height: auto;
}
.content-image figcaption,
.content-text figcaption,
.content-gallery figcaption {
    width: auto !important;
    padding: 1em 0;
    font-size: 0.933333em;
    font-family: MiloWeb-Italique;
}

/* Rote Aufzaehlungspunkte (FontAwesome) — alt: #container .ce_text ul li:before */
#container .content-text ul li:before {
    color: #8e140b;
    display: inline-block;
    font: 0.4em/0 "FontAwesome";
    position: absolute;
    text-rendering: geometricprecision;
    list-style: none;
    content: '\f111';
    margin: 1.4em 1em 0 -3.2em;
}

/* Bilder in RockSolid-Spalten: schmaler + auf Ueberschrift ausgerichtet */
#container .ce_rs_column_start .content-image > figure {
    padding: 0 2em;
}
#container .ce_rs_column_start .content-image:first-child > figure {
    margin-top: 1.8em;
}
#container .ce_rs_column_start .accordion .content-image:first-child > figure {
    margin-top: 0;
}

/* ===== Bild-Umfluss in Textelementen ===== */

.content-text.media--right > figure {
    float: right;
    margin: 1.53846% 0 3.84615% 7.69231%;
}
.content-text.media--left > figure {
    float: left;
    margin: 3.84615% 0 1.53846% 7.69231%;
}

/* ===== Hover-Overlay auf verlinkten Bildern (Lightbox-Hinweis) ===== */

.content-image figure a,
.content-gallery figure a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.content-image figure a:before,
.content-gallery figure a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1e2022;
    opacity: 0;
    transform: translateZ(0);
    transition: opacity 0.3s;
}
.content-image figure a:after,
.content-gallery figure a:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    width: 31px;
    height: 31px;
    margin: -15px;
    background: linear-gradient(#ffffff, #ffffff) 50% 50% no-repeat,
                linear-gradient(#ffffff, #ffffff) 50% 50% no-repeat;
    background-size: 100% 1px, 1px 100%;
}
.content-image figure a:hover:before,
.content-gallery figure a:hover:before,
.content-image figure a:focus:before,
.content-gallery figure a:focus:before {
    opacity: 0.6;
}
.content-image figure a:hover:after,
.content-gallery figure a:hover:after,
.content-image figure a:focus:after,
.content-gallery figure a:focus:after {
    display: block;
}

/* ===== Responsive (wie Altbestand, Umbruch bei 599px) ===== */

@media screen and (max-width: 599px) {
    .content-gallery.content-gallery > ul > li {
        float: none;
        width: auto;
        margin-right: 0;
        margin-left: 0;
    }
    .content-text.media--right > figure,
    .content-text.media--left > figure {
        float: none !important;
        margin-left: 0;
        margin-right: 0;
        width: auto !important;
    }
}