/**
 * Dateiname: _rounded-images.css
 * Pfad: /files/eclipse-x6/css/components/
 * Erstellt: 10.09.2025
 * Letzte Änderung: 10.09.2025
 * Version: 1.00.001
 * 
 * Entwickler: Werner & Liv
 * Firma: ylem | mediendesign
 * Support: support@ylem.at
 */

/* ==========================================================================
   Rounded Image Utility Classes
   Erweiterung für Eclipse X6 Theme
   ========================================================================== */

/* Basis-Klassen für runde Ecken */
.img-rounded-10 img,
.img-rounded-10 picture img {
    border-radius: 10px;
    overflow: hidden;
}

.img-rounded-20 img,
.img-rounded-20 picture img {
    border-radius: 20px;
    overflow: hidden;
}

.img-rounded-30 img,
.img-rounded-30 picture img {
    border-radius: 30px;
    overflow: hidden;
}

.img-rounded-40 img,
.img-rounded-40 picture img {
    border-radius: 40px;
    overflow: hidden;
}

/* Alternative: Container-basierte Klassen */
.rounded-container-10 {
    border-radius: 10px;
    overflow: hidden;
}

.rounded-container-10 img,
.rounded-container-10 picture img {
    display: block;
    width: 100%;
    height: auto;
}

.rounded-container-20 {
    border-radius: 20px;
    overflow: hidden;
}

.rounded-container-20 img,
.rounded-container-20 picture img {
    display: block;
    width: 100%;
    height: auto;
}

.rounded-container-30 {
    border-radius: 30px;
    overflow: hidden;
}

.rounded-container-30 img,
.rounded-container-30 picture img {
    display: block;
    width: 100%;
    height: auto;
}

.rounded-container-40 {
    border-radius: 40px;
    overflow: hidden;
}

.rounded-container-40 img,
.rounded-container-40 picture img {
    display: block;
    width: 100%;
    height: auto;
}

/* Spezielle Klasse für figure-Container */
.figure-rounded-10 figure,
.figure-rounded-10 .image_container {
    border-radius: 10px;
    overflow: hidden;
}

.figure-rounded-20 figure,
.figure-rounded-20 .image_container {
    border-radius: 20px;
    overflow: hidden;
}

.figure-rounded-30 figure,
.figure-rounded-30 .image_container {
    border-radius: 30px;
    overflow: hidden;
}

.figure-rounded-40 figure,
.figure-rounded-40 .image_container {
    border-radius: 40px;
    overflow: hidden;
}

/* Responsive Varianten - kleinere Ecken auf Mobile */
@media (max-width: 767px) {
    .img-rounded-40 img,
    .img-rounded-40 picture img,
    .rounded-container-40,
    .figure-rounded-40 figure,
    .figure-rounded-40 .image_container {
        border-radius: 20px;
    }
    
    .img-rounded-30 img,
    .img-rounded-30 picture img,
    .rounded-container-30,
    .figure-rounded-30 figure,
    .figure-rounded-30 .image_container {
        border-radius: 15px;
    }
}