.itc-frontend-container {
    max-width: var(--itc-max-w);
    margin: 20px auto;
}

.itc-iframe-wrapper {
    width: 100%;
    height: var(--itc-h);
}

.itc-main-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Slider-Logik */
.itc-slider-wrapper {
    width: 100%;
    position: relative;
}

/* Die Pfeil-Buttons */
button.itc-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    font-size: 48px;
    line-height: 1;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #ccc;
}

button.itc-slider-arrow:hover, button.itc-slider-arrow:focus {
    background: rgb(0 0 0 / 60%);
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
    color: rgb(255 255 255 / 100%);
}

.itc-slider-arrow.prev { left: -20px; }
.itc-slider-arrow.next { right: -20px; }

/* Auf kleinen Bildschirmen Pfeile verstecken (Wischen ist dort besser) */
@media (max-width: 768px) {
    .itc-slider-arrow { display: none; }
}

/* Verhindert, dass die Pfeile bei sehr schmalen Containern abgeschnitten werden */
@media (min-width: 769px) {
    .itc-slider-wrapper { padding: 0 25px; }
}

.itc-slider-inner {
    display: flex;
    flex-wrap: nowrap; /* WICHTIG: Verhindert, dass Bilder in die nächste Zeile springen */
    overflow-x: auto;  /* Erlaubt horizontales Scrollen */
    overflow-y: hidden;
    gap: var(--itc-gap);
    padding-bottom: 15px; /* Platz für die Scrollbar, falls gewünscht */
    
    /* Sanftes Scrollen auf Handys */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.itc-thumb-item {
    /* Die magische Formel gegen Anschnitt */
    flex: 0 0 calc((100% - (var(--itc-count) - 1) * var(--itc-gap)) / var(--itc-count));
    min-width: var(--itc-min-w);
    scroll-snap-align: start;
    cursor: pointer;
    padding: 4px;
}

.itc-thumb-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.itc-thumb-label {
    display: block;
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
}

/* Aktives Thumbnail */
.itc-thumb-item.is-active img {
    outline: 3px solid #2271b1;
}

/* Layout: Sidebar Links/Rechts */
.itc-frontend-container.style-left,
.itc-frontend-container.style-right {
    display: flex;
    gap: 15px; /* Abstand zwischen iFrame und Sidebar */
    align-items: flex-start;
    height: var(--itc-h); /* Der gesamte Container bekommt die eingestellte Höhe */
}

/* Sidebar Links: Wir drehen die Reihenfolge um */
.itc-frontend-container.style-left {
    flex-direction: row-reverse;
}

/* Das iFrame nimmt in der Sidebar den restlichen Platz ein */
.style-left .itc-iframe-wrapper,
.style-right .itc-iframe-wrapper {
    flex: 1;
    height: 100%;
}

/* Der Slider-Bereich in der Sidebar */
.style-left .itc-slider-wrapper,
.style-right .itc-slider-wrapper {
    width: 250px; /* Breite der Sidebar - kannst du auch über Settings lösen */
    height: 100%;
    overflow: hidden;
}

/* Das Herzstück: Umschalten auf vertikales Scrollen */
.style-left .itc-slider-inner,
.style-right .itc-slider-inner {
    display: flex;
    flex-direction: column; /* Bilder UNTEREINANDER */
    overflow-y: auto;       /* Vertikales Scrollen AKTIVIEREN */
    overflow-x: hidden;      /* Horizontales Scrollen DEAKTIVIEREN */
    height: 100%;
    gap: 10px;
    scroll-snap-type: y mandatory; /* Einrasten beim vertikalen Scrollen */
}

/* Thumbnails in der Sidebar */
.style-left .itc-thumb-item,
.style-right .itc-thumb-item {
    flex: 0 0 auto; /* Keine Breiten-Berechnung wie im horizontalen Modus */
    width: 100%;    /* Nutze die volle Breite der Sidebar */
    scroll-snap-align: start;
}

.style-left .itc-thumb-item img,
.style-right .itc-thumb-item img {
    width: 100%;
    height: auto;
}

.itc-slider-inner::-webkit-scrollbar {
    display: none; /* Versteckt die Scrollbar in Chrome/Safari/Edge */
}
.itc-slider-inner {
    -ms-overflow-style: none;  /* IE und Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Container-Begrenzung für das Grid-Layout */
.itc-frontend-container.style-grid {
    max-width: 1200px;
    margin: 20px auto;
}

/* Der Bereich unter dem iFrame */
.style-grid .itc-slider-wrapper {
    padding-top: 1.5rem;
}

/* Wir schalten von Flex auf Grid um */
.style-grid .itc-slider-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    
    /* Wichtig: Wir deaktivieren das Slider-Verhalten für das Grid */
    overflow-x: visible; 
    scroll-snap-type: none;
}

/* Positionierung für vertikale Pfeile in der Sidebar */
.style-left .itc-slider-arrow.up,
.style-right .itc-slider-arrow.up {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 48px;
}

.style-left .itc-slider-arrow.down,
.style-right .itc-slider-arrow.down {
    bottom: 10px;
    top: auto; /* Überschreibt das top: 50% der Standard-Pfeile */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 48px;
}

/* Sidebar Styling Anpassung */
.style-left .itc-slider-wrapper,
.style-right .itc-slider-wrapper {
    padding: 40px 0; /* Platz schaffen für die Pfeile oben und unten */
}

/* Versteckte Kacheln initial ausblenden */
.itc-grid-hidden {
    display: none !important;
}

/* Button Styling */
.itc-load-more-wrapper {
    text-align: center;
    margin-top: 30px;
    width: 100%;
}

button.itc-load-more-btn {
    padding: 10px 25px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

button.itc-load-more-btn:hover {
    background: #135e96;
}

/* Wir begrenzen die Spalten auf maximal 4, wenn genug Platz ist */
@media (min-width: 900px) {
    .style-grid .itc-slider-inner {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Korrektur für die Thumbnails im Grid-Modus */
.style-grid .itc-thumb-item {
    flex: none;      /* Deaktiviert die Flex-Berechnung vom Slider */
    width: 100%;     /* Nutzt die volle Breite der Grid-Zelle */
    min-width: 0;    /* Verhindert das Aufblähen des Grids */
}

.style-grid .itc-thumb-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Optional: Macht alle Kacheln gleich hoch */
    object-fit: cover;
    border-radius: 6px;
    transition: transform 0.2s ease-in-out;
}

.style-grid .itc-thumb-item:hover img {
    transform: scale(1.03); /* Kleiner Hover-Effekt für die Kacheln */
}

@media (max-width: 768px) {
    .itc-frontend-container.style-left,
    .itc-frontend-container.style-right {
        flex-direction: column; /* Stapelt iFrame und Slider wieder untereinander */
        height: auto;
    }
    
    .style-left .itc-slider-wrapper,
    .style-right .itc-slider-wrapper {
        width: 100%;
        height: auto;
    }

    .style-left .itc-slider-inner,
    .style-right .itc-slider-inner {
        flex-direction: row; /* Zurück zu horizontal auf Mobile */
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/** Extra Style REWE Henke **/
.itc-frontend-container {
	display: flex;
	flex-direction: column;
	gap: 7rem;
}
iframe.itc-main-iframe, .itc-thumb-item {
	border: 2px solid #e6e3e0;
	padding: 10px;
	border-radius: 10px;
}
.itc-thumb-label {
	font-size: 1.953rem;
	font-weight: 500;
}
button.itc-slider-arrow {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 5px;
}
button.itc-slider-arrow span {
	color: #000;
}
button.itc-slider-arrow:hover, button.itc-slider-arrow:focus {
	background: none;
	box-shadow: none;
	color: #000;
}