/* Insta & FB Feed Widget – Layouts, Social Wall, Filter, Lightbox.
 * Alle einstellbaren Werte kommen als CSS-Variablen vom Wrapper:
 * --iffw-cols, --iffw-gap, --iffw-radius, --iffw-accent, --iffw-card-bg,
 * --iffw-text, --iffw-ratio, --iffw-maxw
 */

.iffw {
	--iffw-cols: 3;
	--iffw-cols-t: 2; /* Tablet  */
	--iffw-cols-m: 1; /* Handy   */
	--iffw-gap: 16px;
	--iffw-pad: 12px;
	--iffw-radius: 14px;
	--iffw-accent: #dd2a7b;
	--iffw-card-bg: #fff;
	--iffw-text: #333;
	--iffw-ratio: 1 / 1;
	--iffw-maxw: none;
	--iffw-outer: 24px;

	position: relative;
	margin: var(--iffw-outer) 0;
	max-width: var(--iffw-maxw);
}

/* Theme-Styles neutralisieren: viele Themes legen Abstände oder Rahmen auf
   Links, Bilder und Figuren im Inhalt – das würde Lücken erzeugen, die sich
   im Plugin nicht wegstellen lassen. */
.iffw .iffw-items,
.iffw .iffw-card,
.iffw .iffw-media,
.iffw .iffw-media img {
	margin: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	float: none;
	vertical-align: top;
}

.iffw .iffw-card { text-decoration: none; }

/* Harte Absicherung für Kachel und Bild: Themes wie YOOtheme, Divi oder
   Elementor-Kits legen Regeln mit !important auf „Bild in einem Link" –
   runde Ecken, eigene Breiten, negative Positionen. Ohne diesen Block kann
   ein Beitragsbild rund und größer als seine Kachel werden und die Nachbarn
   überlagern. Die Lightbox ist hier bewusst nicht betroffen (.iffw-lb-media). */
.iffw .iffw-card {
	padding: 0 !important;
	overflow: hidden !important;
}

.iffw .iffw-media {
	position: relative !important;
	display: block !important;
	overflow: hidden !important;
	padding: 0 !important;
}

.iffw .iffw-media img {
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	position: static !important;
	inset: auto !important;
	/* ohne !important, damit der Zoom-Effekt beim Überfahren weiter geht */
	transform: none;
}

/* Alles mit hidden-Attribut bleibt unsichtbar. Ohne das überstimmen unsere
   eigenen display-Regeln (z. B. .iffw-card { display: block }) die
   Standardregel [hidden] des Browsers – dann erscheinen ausgeblendete
   Karten oder in der Lightbox Bild und Videoplayer gleichzeitig. */
.iffw [hidden] { display: none !important; }
.iffw .iffw-media img { max-width: 100%; }

/* Ausrichtung / Position */
.iffw-align-center { margin-left: auto; margin-right: auto; }
.iffw-align-right  { margin-left: auto; margin-right: 0; }
.iffw-align-left   { margin-left: 0; margin-right: auto; }

.iffw-stage {
	display: flex;
	align-items: center;
	gap: var(--iffw-gap);
	/* Das Layout reagiert auf die Breite des Feeds, nicht auf die des
	   Browserfensters – so sieht die Vorschau exakt wie die Website aus. */
	container-type: inline-size;
	container-name: iffwfeed;
}

/* ------------------------------------------------ Profil-Kopf über allem */
/* Konto einmal groß über allen Beiträgen, mit Folgen-Knopf. */

.iffw-profile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--iffw-pad) + 2px);
	margin-bottom: calc(var(--iffw-pad) + 4px);
	padding: var(--iffw-pad);
	border-radius: var(--iffw-radius);
	background: var(--iffw-card-bg);
	color: var(--iffw-text);
}

.iffw-transparent .iffw-profile,
.iffw-contentonly .iffw-profile {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

.iffw-pf-avatar {
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.iffw-pf-avatar svg { width: 28px; height: 28px; }

.iffw-pf-info {
	/* Mindestbreite, damit der Name nicht vom Knopf zerdrückt wird –
	   der Knopf rutscht dann selbst in die nächste Zeile. */
	flex: 1 1 160px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.iffw-pf-name {
	font-size: 1.15em;
	font-weight: 800;
	line-height: 1.2;
	color: var(--iffw-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.iffw-pf-name:hover { color: var(--iffw-accent); }

.iffw-pf-meta { font-size: 0.82em; opacity: 0.7; }

.iffw-follow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--iffw-accent);
	color: #fff !important;
	font-size: 0.9em;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.iffw-follow svg { width: 17px; height: 17px; }

.iffw-follow:hover {
	transform: translateY(-1px);
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.24);
	filter: brightness(1.06);
}

/* Stil des Knopfes: Netzwerk-Farben, Akzentfarbe oder nur Umriss */
.iffw-follow-brand.iffw-follow-net-instagram { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); }
.iffw-follow-brand.iffw-follow-net-facebook  { background: #1877f2; }

.iffw-follow-outline {
	background: transparent;
	border: 2px solid var(--iffw-accent);
	color: var(--iffw-accent) !important;
	box-shadow: none;
}

.iffw-follow-outline:hover {
	background: var(--iffw-accent);
	color: #fff !important;
	box-shadow: none;
}

/* Handy: Knopf über die ganze Breite unter den Namen.
   Der Profil-Kopf liegt außerhalb von .iffw-stage, deshalb hier eine
   normale Media-Query statt einer Container-Query. */
@media (max-width: 560px) {
	.iffw-follow { flex: 1 1 100%; justify-content: center; }
	/* Etwas kleiner, damit auch lange Kontonamen ganz hineinpassen */
	.iffw-pf-name { font-size: 1em; }
	.iffw-pf-avatar { flex-basis: 46px; width: 46px; height: 46px; }
	.iffw-pf-avatar svg { width: 24px; height: 24px; }
}

/* --------------------------------------------------- Filter-Tabs & Suche */

.iffw-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--iffw-pad);
	flex-wrap: wrap;
	margin-bottom: var(--iffw-pad);
}

.iffw-tabs { display: flex; gap: calc(var(--iffw-pad) * 0.7); }

.iffw-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border: 1.5px solid rgba(125, 125, 125, 0.25);
	border-radius: 999px;
	background: transparent;
	color: var(--iffw-text);
	font-size: 13.5px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.iffw-tab svg { width: 15px; height: 15px; }

.iffw-tab:hover { border-color: var(--iffw-accent); color: var(--iffw-accent); }

.iffw-tab-on {
	background: var(--iffw-accent);
	border-color: var(--iffw-accent);
	color: #fff;
}

.iffw-tab-on:hover { color: #fff; }

.iffw-search {
	flex: 0 1 240px;
	padding: 8px 14px;
	border: 1.5px solid rgba(125, 125, 125, 0.25);
	border-radius: 999px;
	background: var(--iffw-card-bg);
	color: var(--iffw-text);
	font-size: 13.5px;
	outline: none;
	transition: border-color 0.2s ease;
}

.iffw-search:focus { border-color: var(--iffw-accent); }

/* ------------------------------------------------------------------ Karte */

.iffw-card {
	display: block;
	text-decoration: none;
	color: var(--iffw-text);
	border-radius: var(--iffw-radius);
	overflow: hidden;
	background: var(--iffw-card-bg);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.iffw-shadow-soft .iffw-card   { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.iffw-shadow-strong .iffw-card { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); }

/* Transparente Kacheln: Text und Bild liegen direkt auf der Website */
.iffw-transparent .iffw-card { background: transparent; }
.iffw-transparent .iffw-card .iffw-body,
.iffw-transparent .iffw-card .iffw-head,
.iffw-transparent .iffw-card .iffw-meta { padding-left: 0; padding-right: 0; }
/* Kein grauer Lade-Platzhalter, sonst bleibt eine Fläche sichtbar */
.iffw-transparent .iffw-card .iffw-media { background: transparent; }
/* Auch beim Überfahren keine Fläche/kein Schatten erzeugen */
.iffw-transparent .iffw-card,
.iffw-transparent .iffw-card:hover { box-shadow: none; }
/* Suchfeld und Pfeile brauchen bei transparenten Kacheln eigene Flächen */
.iffw-transparent .iffw-search,
.iffw-transparent .iffw-arrow { background: rgba(255, 255, 255, 0.9); }

/* „Kein Schatten" gilt auch beim Überfahren */
.iffw-shadow-none .iffw-card,
.iffw-shadow-none .iffw-card:hover { box-shadow: none; }

/* -------------------------------------------------- Nur die Bilder ------ */
/* Reiner Bild-Feed: keine Flächen, keine Rahmen, kein Text – ein Klick
   öffnet den Original-Beitrag in einem neuen Tab. */
.iffw-contentonly .iffw-card,
.iffw-contentonly .iffw-card:hover {
	background: transparent;
	box-shadow: none;
	border: 0;
}

.iffw-contentonly .iffw-card .iffw-head,
.iffw-contentonly .iffw-card .iffw-body,
.iffw-contentonly .iffw-card .iffw-meta { display: none; }

.iffw-contentonly .iffw-card .iffw-media {
	background: transparent;
	border-radius: var(--iffw-radius);
}

.iffw-contentonly .iffw-card .iffw-media img { display: block; }

.iffw-hover-lift .iffw-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.iffw-hover-zoom .iffw-media img { transition: transform 0.35s ease; }
.iffw-hover-zoom .iffw-card:hover .iffw-media img { transform: scale(1.07); }

/* Account-Kopfzeile */
.iffw-head {
	display: flex;
	align-items: center;
	gap: calc(var(--iffw-pad) * 0.8);
	padding: var(--iffw-pad);
}

.iffw-avatar {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.iffw-avatar svg { width: 18px; height: 18px; }

.iffw-av-instagram { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); }
.iffw-av-facebook  { background: #1877f2; }

.iffw-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.iffw-user {
	font-size: 0.82em;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.iffw-date { font-size: 0.7em; opacity: 0.6; }

.iffw-net { flex: 0 0 auto; opacity: 0.75; }
.iffw-net svg { width: 16px; height: 16px; }
.iffw-net-instagram { color: #dd2a7b; }
.iffw-net-facebook  { color: #1877f2; }

.iffw-media {
	position: relative;
	display: block;
	aspect-ratio: var(--iffw-ratio);
	overflow: hidden;
	background: rgba(125, 125, 125, 0.12); /* Platzhalter, bis das Bild lädt */
}

/* Sanftes Einblenden neu sichtbarer Karten */
.iffw-card.iffw-in { animation: iffw-fade 0.35s ease; }

@keyframes iffw-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.iffw-card.iffw-in { animation: none; }
	.iffw *, .iffw *::before { transition: none !important; }
}

/* Leer-Zustand (z. B. Suche ohne Treffer) */
.iffw-empty {
	text-align: center;
	padding: 28px 12px;
	color: var(--iffw-text);
	opacity: 0.6;
	font-size: 0.95em;
}

.iffw-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.iffw-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	color: #fff;
	background: rgba(0, 0, 0, 0.25);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.iffw-body { display: block; padding: var(--iffw-pad) var(--iffw-pad) 0; }

.iffw-caption {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.85em;
	line-height: 1.45;
}

/* Likes & Kommentare */
.iffw-meta {
	display: flex;
	gap: calc(var(--iffw-pad) * 1.2);
	padding: var(--iffw-pad);
	font-size: 0.78em;
	opacity: 0.75;
}

.iffw-likes { color: #e0245e; }

/* ------------------------------------------------------------- Flow-Wall */

.iffw-layout-flow .iffw-items {
	columns: var(--iffw-cols);
	column-gap: var(--iffw-gap);
}

.iffw-layout-flow .iffw-card {
	display: inline-block;
	width: 100%;
	margin-bottom: var(--iffw-gap);
	break-inside: avoid;
}

.iffw-layout-flow .iffw-media { aspect-ratio: auto; }

/* ----------------------------------------------------------------- Slider */

.iffw-layout-slider .iffw-items {
	display: flex;
	gap: var(--iffw-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 0;
	flex: 1;
}

/* Platz für Schatten, damit er nicht abgeschnitten wird – nur wenn es
   überhaupt einen Schatten gibt. */
.iffw-shadow-soft .iffw-items,
.iffw-shadow-strong .iffw-items { padding: 6px; }

.iffw-shadow-none .iffw-items,
.iffw-transparent .iffw-items,
.iffw-contentonly .iffw-items { padding: 0; }

.iffw-layout-slider .iffw-items::-webkit-scrollbar { display: none; }

/* Breite genau nach Spalten-Einstellung: bei 4 Spalten und 5px Abstand sind
   exakt 4 Kacheln sichtbar und dazwischen liegen exakt 5px. */
.iffw-layout-slider .iffw-card {
	flex: 0 0 calc((100% - (var(--iffw-cols) - 1) * var(--iffw-gap)) / var(--iffw-cols));
	scroll-snap-align: start;
}



/* ------------------------------------------------------------------- Grid */

.iffw-layout-grid .iffw-items {
	display: grid;
	grid-template-columns: repeat(var(--iffw-cols), 1fr);
	gap: var(--iffw-gap);
	flex: 1;
}

/* ---------------------------------------------------------------- Masonry */

.iffw-layout-masonry .iffw-items {
	columns: var(--iffw-cols);
	column-gap: var(--iffw-gap);
	flex: 1;
}

.iffw-layout-masonry .iffw-card {
	display: inline-block;
	width: 100%;
	margin-bottom: var(--iffw-gap);
	break-inside: avoid;
}

.iffw-layout-masonry .iffw-media { aspect-ratio: auto; }

/* ------------------------------------------------------------------ Liste */

.iffw-layout-list .iffw-items {
	display: flex;
	flex-direction: column;
	gap: var(--iffw-gap);
	flex: 1;
}

.iffw-layout-list .iffw-card {
	display: grid;
	grid-template-columns: 180px 1fr;
	grid-template-areas: "media head" "media body" "media meta";
	align-content: center;
}

.iffw-layout-list .iffw-media { grid-area: media; aspect-ratio: var(--iffw-ratio); height: 100%; }
.iffw-layout-list .iffw-head { grid-area: head; padding-bottom: 0; }
.iffw-layout-list .iffw-body { grid-area: body; padding: calc(var(--iffw-pad) * 0.6) var(--iffw-pad) calc(var(--iffw-pad) * 0.3); }
.iffw-layout-list .iffw-meta { grid-area: meta; padding: calc(var(--iffw-pad) * 0.4) var(--iffw-pad) var(--iffw-pad); }
.iffw-layout-list .iffw-caption { -webkit-line-clamp: 4; }

/* --------------------------------------------------------------- Karussell */

.iffw-layout-carousel .iffw-items {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	flex: 1;
	min-width: 0;
}

.iffw-layout-carousel .iffw-items::-webkit-scrollbar { display: none; }

.iffw-layout-carousel .iffw-card {
	flex: 0 0 100%;
	scroll-snap-align: center;
}

.iffw-dots { text-align: center; margin-top: var(--iffw-gap); }

.iffw-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.18);
	margin: 0 4px;
	cursor: pointer;
	transition: all 0.25s ease;
}

.iffw-dot-on {
	background: var(--iffw-accent);
	width: 20px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------ Pfeile */

.iffw-arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var(--iffw-card-bg);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	color: var(--iffw-accent);
	z-index: 1;
	transition: background 0.2s ease, color 0.2s ease;
}

.iffw-arrow:hover {
	background: var(--iffw-accent);
	color: #fff;
}

/* -------------------------------------------------------------- Mehr laden */

.iffw-more {
	display: block;
	margin: calc(var(--iffw-gap) + var(--iffw-pad)) auto 0;
	padding: 10px 34px;
	border: none;
	border-radius: 999px;
	background: var(--iffw-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.iffw-more:hover { opacity: 0.88; transform: translateY(-1px); }

.iffw-sentinel { height: 1px; }

/* --------------------------------------------------------------- Lightbox */

.iffw-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 70px;
}

.iffw-lb[hidden] { display: none; }

.iffw-lb-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 12, 0.82);
	cursor: pointer;
}

.iffw-lb-box {
	position: relative;
	display: flex;
	max-width: 980px;
	max-height: 86vh;
	width: 100%;
	/* Nie transparent: sonst scheint die Website durch die Lightbox */
	background: var(--iffw-lb-bg, #fff);
	color: var(--iffw-text);
	border-radius: var(--iffw-radius);
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.iffw-lb-media {
	position: relative;
	flex: 1 1 60%;
	min-width: 0;
	min-height: 320px;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.iffw-lb-media img {
	width: 100%;
	height: 100%;
	max-height: 86vh;
	object-fit: contain;
	display: block;
}

.iffw-lb-media .iffw-play { font-size: 56px; pointer-events: none; }

.iffw-lb-media video {
	width: 100%;
	height: 100%;
	max-height: 86vh;
	object-fit: contain;
	display: block;
	background: #000;
}

/* Album-Galerie in der Lightbox */
.iffw-lb-alb {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #222;
	font-size: 14px;
	cursor: pointer;
	z-index: 1;
}

.iffw-lb-alb:hover { background: var(--iffw-accent); color: #fff; }
.iffw-lb-albprev { left: 12px; }
.iffw-lb-albnext { right: 12px; }

.iffw-lb-albdots {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 999px;
}

.iffw-lb-side {
	background: var(--iffw-lb-bg, #fff);
	flex: 1 1 40%;
	min-width: 280px;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	padding: 6px 0 16px;
	overflow-y: auto;
}

.iffw-lb-side .iffw-head { padding: 14px 18px 10px; border-bottom: 1px solid rgba(125, 125, 125, 0.15); }

.iffw-lb-caption {
	flex: 1;
	margin: 0;
	padding: 14px 18px;
	font-size: 0.9em;
	line-height: 1.55;
	white-space: pre-line;
}

.iffw-lb-side .iffw-meta { padding: 0 18px 12px; font-size: 0.85em; }

.iffw-lb-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 18px 0;
	border-top: 1px solid rgba(125, 125, 125, 0.15);
}

.iffw-lb-open {
	display: inline-block;
	padding: 9px 20px;
	border-radius: 999px;
	background: var(--iffw-accent);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.iffw-lb-share { display: inline-flex; gap: 6px; }

.iffw-lb-share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(125, 125, 125, 0.12);
	color: var(--iffw-text);
	text-decoration: none;
	font-size: 14px;
	transition: background 0.2s ease, color 0.2s ease;
}

.iffw-lb-share a:hover { background: var(--iffw-accent); color: #fff; }
.iffw-lb-share svg { width: 15px; height: 15px; }

.iffw-lb-x,
.iffw-lb-nav {
	position: relative;
	z-index: 1;
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.iffw-lb-x { position: absolute; top: 18px; right: 22px; }

.iffw-lb-x:hover,
.iffw-lb-nav:hover { background: var(--iffw-accent); }

.iffw-lb-prev { margin-right: 14px; }
.iffw-lb-next { margin-left: 14px; }

body.iffw-lb-open-body { overflow: hidden; }

/* Solange die Lightbox offen ist, die Bedienelemente des Feeds ausblenden –
   sie schimmern sonst durch den Hintergrund und man sieht zwei Pfeilpaare. */
body.iffw-lb-open-body .iffw-arrow,
body.iffw-lb-open-body .iffw-more,
body.iffw-lb-open-body .iffw-dots { visibility: hidden; }

/* ------------------------------------------------------------------ Fehler */

.iffw-error {
	padding: 12px;
	border: 1px dashed #c00;
	border-radius: 8px;
	color: #c00;
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
	.iffw-lb { padding: 16px; }
	.iffw-lb-box { flex-direction: column; max-height: 94vh; }
	/* Hochkant: Höhe aus dem Seitenverhältnis, nicht aus der Elternhöhe –
	   sonst fällt die Medienfläche auf wenige Pixel zusammen. */
	.iffw-lb-media { min-height: 0; flex: 0 0 auto; }
	.iffw-lb-media img,
	.iffw-lb-media video { width: 100%; height: auto; max-height: 52vh; }
	.iffw-lb-side { max-width: none; min-width: 0; flex: 1 1 auto; }
	.iffw-lb-nav { display: none; }
	.iffw-lb-x { top: 10px; right: 12px; }
	.iffw-lb-actions { flex-wrap: wrap; }
}

/* ------------------------------------------------- Schmale Feed-Breiten */
/* Höchstens 2 bzw. 1 Spalte – aber niemals mehr, als eingestellt ist.
   Der eingestellte Abstand bleibt dabei immer exakt erhalten. */
@container iffwfeed (max-width: 900px) {
	.iffw-layout-slider .iffw-card {
		flex-basis: calc((100% - (var(--iffw-cols-t) - 1) * var(--iffw-gap)) / var(--iffw-cols-t));
	}
	.iffw-layout-grid .iffw-items { grid-template-columns: repeat(var(--iffw-cols-t), 1fr); }
	.iffw-layout-masonry .iffw-items,
	.iffw-layout-flow .iffw-items { columns: var(--iffw-cols-t); }
}

@container iffwfeed (max-width: 560px) {
	.iffw-layout-slider .iffw-card {
		flex-basis: calc((100% - (var(--iffw-cols-m) - 1) * var(--iffw-gap)) / var(--iffw-cols-m));
	}
	.iffw-layout-grid .iffw-items { grid-template-columns: repeat(var(--iffw-cols-m), 1fr); }
	.iffw-layout-masonry .iffw-items,
	.iffw-layout-flow .iffw-items { columns: var(--iffw-cols-m); }
	.iffw-layout-list .iffw-card { grid-template-columns: 110px 1fr; }
}

/* Pfeile brauchen bei nur einer Spalte zu viel Platz */
@container iffwfeed (max-width: 420px) {
	.iffw-arrow { display: none; }
}

/* Ältere Browser ohne Container-Queries: dann eben nach Fensterbreite */
@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.iffw-layout-slider .iffw-card {
			flex-basis: calc((100% - (var(--iffw-cols-t) - 1) * var(--iffw-gap)) / var(--iffw-cols-t));
		}
		.iffw-layout-grid .iffw-items { grid-template-columns: repeat(var(--iffw-cols-t), 1fr); }
		.iffw-layout-masonry .iffw-items,
		.iffw-layout-flow .iffw-items { columns: var(--iffw-cols-t); }
	}

	@media (max-width: 600px) {
		.iffw-arrow { display: none; }
		.iffw-layout-slider .iffw-card {
			flex-basis: calc((100% - (var(--iffw-cols-m) - 1) * var(--iffw-gap)) / var(--iffw-cols-m));
		}
		.iffw-layout-grid .iffw-items { grid-template-columns: repeat(var(--iffw-cols-m), 1fr); }
		.iffw-layout-masonry .iffw-items,
		.iffw-layout-flow .iffw-items { columns: var(--iffw-cols-m); }
	}
}

@media (max-width: 600px) {
	.iffw-bar { flex-direction: column; align-items: stretch; }
	.iffw-search { flex-basis: auto; }
}