/* .frame-type-r2_tiles{} */

    /*
        Layouts:
        0: 3-Spalter (Standard)
        1: 2-Spalter
    */

    ul.tiles{
        margin:0 0 var(--gap) 0; padding:0; list-style:none;
        display:grid;
        grid-template-columns:repeat(3, calc((100% - (var(--gap) * 2)) / 3 ) ); /* calc statt 1fr , damit hypens im Safari funktioniert */
        /*grid-auto-rows:1fr; selbe Höhe für alle Zeilen */
        grid-column-gap:var(--gap); grid-row-gap:var(--gap);
        font-size:var(--font-size-s-1); line-height:var(--line-height-s-1);
    }
    ul.tiles.layout_1{ grid-template-columns:repeat(2, calc((100% - var(--gap)) / 2 ) ); }

        ul.tiles > li{ margin:0; padding:0; display:flex; }
        
            ul.tiles > li > a{
                text-decoration:none; flex:1; /* 100% Höhe */ position:relative;
                color:rgb(var(--rgb_color_value_base));
                background-color:rgb(var(--rgb_color_value_bg_light_gray));
            }
            ul.tiles.colored > li > a{ background-color:rgb(var(--rgb_color_value_bg_light_colored)); }
            .frame-class-group-bg-gray ul.tiles > li > a,
            .frame-class-group-bg-colored ul.tiles > li > a{ background-color:white; }

            ul.tiles > li > a:hover{ box-shadow:var(--box-shadow); }

                ul.tiles div.content{ padding:var(--gap); display:flow-root; }

                    ul.tiles h4{
                        /* automatische Silbentrennung: */ -webkit-locale:de; -webkit-hyphens:auto; hyphens:auto; -moz-hyphens:auto;
                        font-size:var(--font-size-2); line-height:var(--line-height-2);
                        color:rgb(var(--rgb_color_value_primary)); /*font-weight:bold; nur bei kleiner schrift */
                    }
                    ul.tiles.small_title h4{ font-size:var(--font-size-0); line-height:var(--line-height-0); font-weight:bold; }
                    ul.tiles.no_description h4{ padding-right:42px; /* Platz für Pfeil-Icon, inkl. 5px Puffer */ }

                    ul.tiles .description{ margin-top:0.5em; }
                    ul.tiles .description::after{
                        /* Platzthalter, damit Pfeil-Icon nicht auf dem Text sitzt */
                        content:""; float:right; width:42px; height:37px; /* inkl. 5px space */
                        /*background-color:yellow;*/
                    }

                ul.tiles div.arrow{ position:absolute; bottom:calc(var(--gap) + 14px); right:var(--gap); width:35px; height:2px; background-color:rgb(var(--rgb_color_value_link)); border-radius:1px; transition: width 0.2s ease; }
                .frame-class-group-default ul.tiles.colored div.arrow{ background-color:rgb(var(--rgb_color_value_primary)); }
                ul.tiles.no_description div.arrow{ bottom:50%; margin-bottom:-1px; }
                ul.tiles a:hover div.arrow{ width:55px; right:calc(var(--gap) - 10px); }
                
                    ul.tiles div.arrow.arrow::before,
                    ul.tiles div.arrow.arrow::after{ content:""; position:absolute; top:0; right:0; width:20px; height:2px; background-color:inherit; border-radius:1px; }
                    ul.tiles div.arrow.arrow::before{ transform:rotate(45deg); transform-origin: bottom right; }
                    ul.tiles div.arrow.arrow::after{ transform:rotate(-45deg); transform-origin: top right; }
                    

@media screen and (max-width:800px){
    .tiles-wrapper:not(.drag_to_scroll) ul.tiles,
    .tiles-wrapper:not(.drag_to_scroll) ul.tiles.layout_1{ grid-template-columns:repeat(2, calc((100% - var(--gap)) / 2 )); }
}
@media screen and (max-width:600px){
    /*###
	//# Drag to Scroll
	###*/

    .frame-type-r2_tiles .drag_to_scroll{
        padding-top:10px; /* für shadow */ overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; user-select:none;
        /* als Alternative zum JS Touch Scrolling: */
        -webkit-overflow-scrolling:touch; /* Für weiches Scrollen auf iOS */
        scroll-behavior:smooth; /* Optional für sanftes Scrollen */
    }
    .frame-type-r2_tiles .drag_to_scroll.dragging{ cursor:grabbing; user-select:none; }
    .frame-type-r2_tiles .drag_to_scroll > div{ min-width:800px; padding-left:5%; padding-right:5%; margin-left:0; margin-right:0; }

        /* Verhindert Textauswahl in SVGs, Bildern und ihren Containern */
        .frame-type-r2_tiles .drag_to_scroll *,
        .frame-type-r2_tiles .drag_to_scroll img,
        .frame-type-r2_tiles .drag_to_scroll svg {
            user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -webkit-touch-callout: none; /* verhindert Kontextmenü auf iOS */
            pointer-events: auto; /* wichtig, damit Dragging noch funktioniert */
        }
}
@media screen and (max-width:532px){
    .tiles-wrapper:not(.drag_to_scroll) ul.tiles,
    .tiles-wrapper:not(.drag_to_scroll) ul.tiles.layout_1{ grid-template-columns:repeat(1, 1fr); }
}