.frame-type-atomicplan_logoshowcase atomic-slider{
	--plces-lsc-height: var(--plces-logoshowcase-height,300px);
	height: calc(var(--plces-lsc-height) + 50px);
	--atomic-slider-responsive-cols-gap: 20px;
}
.frame-type-atomicplan_logoshowcase [asrc-container]{
	padding: 0 50px;
}
.frame-type-atomicplan_logoshowcase .asrc-slide,
.frame-type-atomicplan_logoshowcase .pl-card-content{
	display:flex;
	align-items: center;
	position: relative;
	background: #eee;
	width: 100%;
	height: var(--plces-lsc-height);
	padding: 20px;
}
.frame-type-atomicplan_logoshowcase .pl-card-content a{
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
}
.frame-type-atomicplan_logoshowcase .pl-card-content picture,
.frame-type-atomicplan_logoshowcase .pl-card-content picture img{
	object-fit: contain;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* ============================================================
   Layout-Variante „Raster" (Kern-Feld layout = grid)
   ------------------------------------------------------------
   Statisches, responsives Raster statt Slider. Alles hier ist reines
   INNEN-Layout des Blocks:
     - KEIN Sektions-Hintergrund, KEIN Sektions-Padding, KEINE Container-
       Breite (die kommen ausschliesslich aus dem generischen Frame:
       background_color_class, frame_layout_inner_*, .frame-container).
     - Spaltenzahl kommt als CSS-Variable aus der FlexForm-Option
       (settings.gridColumns), nicht aus dem CSS.
   Responsive ueber CONTAINER-Queries (Skill css § 2), damit das Raster auch
   in Spalten-Containern richtig umbricht.
   ============================================================ */
.frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc {
    container-type: inline-size;
    /* Derselbe Hoehen-Slot wie beim Slider — Theme-Skins pflegen nur
       --plces-logoshowcase-height. */
    --plces-lsc-height: var(--plces-logoshowcase-height, 300px);
}

.frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid {
    display: grid;
    gap: var(--plces-lsc-gap, 20px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

@container (min-width: 480px) {
    .frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid {
        grid-template-columns: repeat(var(--plces-lsc-cols-sm, 3), minmax(0, 1fr));
    }
}

@container (min-width: 760px) {
    .frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid {
        grid-template-columns: repeat(var(--plces-lsc-cols, 4), minmax(0, 1fr));
    }
}

/* Gleiche Kachelhoehe fuer alle Logos — Hoehe ueber denselben Slot wie beim
   Slider (--plces-logoshowcase-height), damit Theme-Skins nur EINEN Wert
   pflegen. */
.frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--plces-lsc-height, var(--plces-logoshowcase-height, 300px));
    padding: var(--plces-lsc-tile-padding, 20px);
    text-decoration: none;
}

/* Das Slider-CSS zieht das <picture> absolut ueber die ganze Kachel (und damit
   ueber deren Polsterung hinweg). Im Raster soll das Logo INNERHALB der
   Polsterung stehen — hoehere Spezifitaet, deshalb hier zurueckgesetzt. */
.frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid__tile picture,
.frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid__tile picture img,
.frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid__tile img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Logos gedaempft, bei Hover in Farbe. Ueber Variablen, damit ein Theme-Skin
   den Effekt abschalten oder verstaerken kann. */
.frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid__tile img {
    filter: grayscale(var(--plces-lsc-grayscale, 1));
    opacity: var(--plces-lsc-opacity, .72);
    transition: filter .25s ease, opacity .25s ease;
}

.frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid__tile:hover img,
.frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid__tile:focus-visible img {
    filter: grayscale(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .frame-type-atomicplan_logoshowcase.frame-layout-grid .plces-lsc-grid__tile img {
        transition: none;
    }
}