/**
 * Landleben Gestaltung: Landleben-Look, Bilder (v1.6)
 * Fotorahmen, Bogen-Fenster (I1), Foto-Collage (I2), Maßlinie (I3),
 * Alt-Foto wird farbig (I4), Vorhang (I5), gerissene Kante (I6),
 * Handschrift-Notiz (T3) und weiche Ecken.
 *
 * Gewählt im Panel "Landleben-Effekte" > "Landleben-Look" (Bild, Galerie),
 * "Beim Drüberfahren" (Alt-Foto) oder "Beim Erscheinen" (Vorhang).
 * Greift an Kadence-Bild, Kadence-Galerie (Raster und Mauerwerk) und an den
 * WordPress-Blöcken Bild und Galerie.
 *
 * Kadence druckt sein eigenes CSS nach diesem und schreibt Radius, Rahmen,
 * Farben und Bildunterschriften sehr genau pro Block fest. Deshalb stehen die
 * Teile, die den Look ausmachen, mit !important.
 *
 * Kadence-Mauerwerk setzt die Bilder per Skript (absolute Lage). Gedreht und
 * verschoben wird darum nur mit rotate, translate und scale, nie mit transform,
 * und nie am Listenpunkt selbst.
 */

:root {
	--ll-bild-papier: #fffdf9;                 /* Weiß eines Fotoabzugs, ganz leicht warm */
	--ll-bild-zettel: #fdf8ee;                 /* Notizzettel */
	--ll-bild-schatten:
		0 1px 2px rgba(46, 35, 26, .10),
		0 14px 28px -14px rgba(46, 35, 26, .50);
	--ll-bild-schatten-hoch:
		0 2px 4px rgba(46, 35, 26, .10),
		0 22px 36px -16px rgba(46, 35, 26, .55);
	--ll-bild-alt: sepia(.55) saturate(.6) contrast(.95);
	--ll-bild-alt-flaeche: sepia(.55) saturate(.6);
	--ll-bild-farbig: sepia(0) saturate(1) contrast(1);
	--ll-bild-farbig-flaeche: sepia(0) saturate(1);
	--ll-bild-weich: var(--ll-weich, cubic-bezier(.22, .61, .36, 1));
}

/* Eine Bewegungs-Liste für alle Bilder mit Look, damit sich Drehen, Zoomen
   und Farbe nicht gegenseitig die Übergänge wegnehmen
   (auch "Bild sanft vergrößern" aus landleben.css). */
:is(.ll-look-fotorahmen, .ll-look-collage, .ll-hover-altfoto, .ll-hover-bildzoom, .ll-fx-vorhang) img {
	transition:
		filter .8s var(--ll-bild-weich),
		scale 1.4s var(--ll-bild-weich),
		rotate .6s var(--ll-bild-weich),
		translate .6s var(--ll-bild-weich),
		box-shadow .6s var(--ll-bild-weich);
}


/* ==================================================================
 * Fotorahmen: weißer Rand, leicht schräg, wie ein Abzug
 * ================================================================== */

/* Einzelnes Bild ohne festes Seitenverhältnis (Kadence und WordPress):
   der Rahmen sitzt am Bild selbst. */
.ll-look-fotorahmen:is(.wp-block-kadence-image, .wp-block-image) img {
	box-sizing: border-box;
	padding: clamp(7px, .9vw, 11px) !important;
	border: 0 !important;
	border-radius: 1px !important;
	background: var(--ll-bild-papier) !important;
	box-shadow: var(--ll-bild-schatten) !important;
	rotate: var(--ll-rahmen-einzel, -1.2deg);
}

/* Zwei Abzüge nebeneinander liegen nicht gleich schief: In jeder zweiten
   und in der letzten Spalte neigt sich das Foto zur anderen Seite. */
:is(.wp-block-kadence-column, .wp-block-column):is(:nth-child(even), :last-child:not(:first-child)) .ll-look-fotorahmen:is(.wp-block-kadence-image, .wp-block-image) {
	--ll-rahmen-einzel: 1deg;
}

/* Kadence mit Seitenverhältnis: der Kasten ist der Abzug, das Foto liegt
   darin. So kann "Bild sanft vergrößern" innen zoomen, der Rand bleibt. */
.ll-look-fotorahmen.wp-block-kadence-image .kb-is-ratio-image {
	border: clamp(7px, .9vw, 11px) solid var(--ll-bild-papier) !important;
	border-radius: 1px !important;
	background: var(--ll-bild-papier);
	box-shadow: var(--ll-bild-schatten);
	overflow: hidden;
	rotate: var(--ll-rahmen-einzel, -1.2deg);
	transition: rotate .6s var(--ll-bild-weich), translate .6s var(--ll-bild-weich), box-shadow .6s var(--ll-bild-weich);
}

.ll-look-fotorahmen.wp-block-kadence-image .kb-is-ratio-image img {
	padding: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	rotate: none;
}

/* Kadence-Farbschleier am Bild folgt dem Rahmen. */
.ll-look-fotorahmen.wp-block-kadence-image .kb-image-has-overlay::after { border-radius: 0 !important; }

/* Bildunterschrift: leise Zeile unter dem Abzug, mit Luft zum Schatten. */
.ll-look-fotorahmen:is(.wp-block-kadence-image, .wp-block-image) figcaption {
	margin-top: 16px !important;
	padding-inline: 4px;
	color: var(--ll-leise, #6f5f50);
	font-size: .875em;
	line-height: 1.45;
}

.ll-look-fotorahmen.ll-auf-dunkel:is(.wp-block-kadence-image, .wp-block-image) figcaption {
	color: var(--ll-holz-hell, #dcc29f);
}

/* Galerien: jeder Abzug einzeln. Der Rand ist ein echter Rand am Kadence-
   Bildkasten (der schneidet sonst ab), gedreht wird die ganze Figur samt
   Bildunterschrift. */
.wp-block-kadence-advancedgallery.ll-look-fotorahmen :is(.kb-gallery-ul, .kb-gallery-main-contain) .kadence-blocks-gallery-item .kb-gal-image-radius,
.wp-block-gallery.ll-look-fotorahmen.has-nested-images figure.wp-block-image {
	border: clamp(6px, .8vw, 10px) solid var(--ll-bild-papier) !important;
	border-radius: 1px !important;
	background: var(--ll-bild-papier) !important;
	box-shadow: var(--ll-bild-schatten) !important;
	overflow: hidden !important;
	transition: box-shadow .6s var(--ll-bild-weich);
}

.wp-block-kadence-advancedgallery.ll-look-fotorahmen :is(.kb-gallery-ul, .kb-gallery-main-contain) .kadence-blocks-gallery-item figure.kb-gallery-figure,
.wp-block-gallery.ll-look-fotorahmen.has-nested-images figure.wp-block-image {
	rotate: var(--ll-rahmen-dreh, -1.2deg);
	transition: rotate .6s var(--ll-bild-weich), translate .6s var(--ll-bild-weich), box-shadow .6s var(--ll-bild-weich);
}

.wp-block-kadence-advancedgallery.ll-look-fotorahmen .kb-gal-image-radius img,
.wp-block-gallery.ll-look-fotorahmen figure.wp-block-image img {
	border-radius: 0 !important;
}

/* Kadence "Unter dem Bild": leise Zeile unter dem Abzug statt schwarzem Balken. */
.wp-block-kadence-advancedgallery.ll-look-fotorahmen .kb-gallery-caption-style-below .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption {
	padding: 10px 4px 0 !important;
	background: none !important;
	color: var(--ll-leise, #6f5f50) !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}

.wp-block-kadence-advancedgallery.ll-look-fotorahmen.ll-auf-dunkel .kb-gallery-caption-style-below .kadence-blocks-gallery-item__caption {
	color: var(--ll-holz-hell, #dcc29f) !important;
}

/* Abwechselnd schräg, nicht ganz regelmäßig, wie hingelegt. */
.ll-look-fotorahmen :is(.kadence-blocks-gallery-item, figure.wp-block-image):nth-child(4n+1) { --ll-rahmen-dreh: -1.3deg; }
.ll-look-fotorahmen :is(.kadence-blocks-gallery-item, figure.wp-block-image):nth-child(4n+2) { --ll-rahmen-dreh: 1deg; }
.ll-look-fotorahmen :is(.kadence-blocks-gallery-item, figure.wp-block-image):nth-child(4n+3) { --ll-rahmen-dreh: -.6deg; }
.ll-look-fotorahmen :is(.kadence-blocks-gallery-item, figure.wp-block-image):nth-child(4n+4) { --ll-rahmen-dreh: 1.4deg; }

/* Gedrehte Abzüge brauchen etwas Luft, nichts schneidet sie ab. */
.wp-block-kadence-advancedgallery.ll-look-fotorahmen,
.wp-block-gallery.ll-look-fotorahmen {
	overflow: visible !important;
	padding-block: 6px;
}

/* Zusammen mit "Bild sanft vergrößern": landleben.css versteckt sonst alles,
   was übersteht, und damit Rand und Schatten. */
.ll-look-fotorahmen.ll-hover-bildzoom,
.ll-look-fotorahmen.ll-hover-bildzoom figure:not(.wp-block-image),
.wp-block-image.ll-look-fotorahmen.ll-hover-bildzoom,
.ll-look-fotorahmen.ll-hover-bildzoom > figure.wp-block-image {
	overflow: visible !important;
}

/* In Galerien zoomt nur das Foto unter der Maus, innen im Rahmen. */
.ll-look-fotorahmen.ll-hover-bildzoom:is(.wp-block-kadence-advancedgallery, .wp-block-gallery):hover img { scale: 1; }

@media (hover: hover) {
	/* Der Abzug richtet sich auf und hebt sich ein wenig. */
	.ll-look-fotorahmen:is(.wp-block-kadence-image, .wp-block-image):hover img,
	.ll-look-fotorahmen.wp-block-kadence-image:hover .kb-is-ratio-image {
		rotate: 0deg;
		box-shadow: var(--ll-bild-schatten-hoch) !important;
	}

	.ll-look-fotorahmen.wp-block-kadence-image:hover .kb-is-ratio-image img { box-shadow: none !important; }

	.ll-look-fotorahmen:is(.wp-block-kadence-image, .wp-block-image):hover img { scale: 1.015; }
	.ll-look-fotorahmen.wp-block-kadence-image:hover .kb-is-ratio-image img { scale: 1; }

	/* Mit "Bild sanft vergrößern": ohne Seitenverhältnis wird der ganze
	   Abzug etwas größer, mit Seitenverhältnis zoomt das Foto im Rahmen. */
	.ll-look-fotorahmen.ll-hover-bildzoom:is(.wp-block-kadence-image, .wp-block-image):hover img { scale: 1.035; }
	.ll-look-fotorahmen.ll-hover-bildzoom.wp-block-kadence-image:hover .kb-is-ratio-image img { scale: 1.06; }

	.wp-block-kadence-advancedgallery.ll-look-fotorahmen .kadence-blocks-gallery-item:hover figure.kb-gallery-figure,
	.wp-block-gallery.ll-look-fotorahmen figure.wp-block-image:hover {
		rotate: 0deg;
		translate: 0 -3px;
	}

	.wp-block-kadence-advancedgallery.ll-look-fotorahmen .kadence-blocks-gallery-item:hover .kb-gal-image-radius,
	.wp-block-gallery.ll-look-fotorahmen figure.wp-block-image:hover {
		box-shadow: var(--ll-bild-schatten-hoch) !important;
	}

	.ll-look-fotorahmen.ll-hover-bildzoom :is(.kadence-blocks-gallery-item, figure.wp-block-image):hover img { scale: 1.06; }
}


/* ==================================================================
 * I1 Bogen-Fenster: oben rund wie ein Gartentor, hochkant 3:4
 * ================================================================== */

.ll-look-bogen:is(.wp-block-kadence-image, .wp-block-image) img {
	display: block;
	width: 100% !important;
	max-width: min(100%, 560px) !important;
	height: auto !important;
	margin-inline: auto;
	aspect-ratio: 3 / 4 !important;
	object-fit: cover !important;
	border: 0 !important;
	border-radius: 999px 999px 0 0 !important;
}

/* Kadence mit Seitenverhältnis: der Kasten wird selbst zum Bogen. */
.ll-look-bogen.wp-block-kadence-image .kb-is-ratio-image {
	width: 100%;
	max-width: 560px;
	height: auto !important;
	margin-inline: auto;
	padding-bottom: 0 !important;
	aspect-ratio: 3 / 4;
	border-radius: 999px 999px 0 0;
	overflow: hidden;
}

.ll-look-bogen.wp-block-kadence-image .kb-is-ratio-image img {
	max-width: none !important;
	height: 100% !important; /* sonst bleibt das Foto 4:3 oben im 3:4-Kasten, darunter leerer Platz */
	aspect-ratio: auto !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

.ll-look-bogen.wp-block-kadence-image .kb-image-has-overlay::after { border-radius: 999px 999px 0 0 !important; }

/* Kadence richtet ausgerichtete Bilder als Tabelle aus: Bogen trotzdem voll. */
.ll-look-bogen.wp-block-kadence-image > figure:is(.aligncenter, .alignleft, .alignright) { width: min(100%, 560px); }

.ll-look-bogen figcaption {
	max-width: 560px;
	margin-inline: auto !important;
	text-align: center !important;
}


/* ==================================================================
 * I6 Gerissene Kante: das Bild endet unten wie abgerissenes Papier
 * ================================================================== */

.ll-look-riss {
	/* Höhe der Risszone; die Form wird nicht gestaucht, sondern behält ihr
	   Seitenverhältnis (sonst wird aus dem Riss eine Säge). */
	--ll-riss-h: clamp(12px, 1.5vw, 18px);
	--ll-riss-b: calc(var(--ll-riss-h) * 135);
}

.ll-look-riss:is(.wp-block-kadence-image, .wp-block-image) :is(img, .kb-is-ratio-image, .kb-image-has-overlay) {
	-webkit-mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--ll-riss-h) + 1px) no-repeat,
		var(--ll-riss-unten) left bottom / max(100%, var(--ll-riss-b)) var(--ll-riss-h) no-repeat;
	mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--ll-riss-h) + 1px) no-repeat,
		var(--ll-riss-unten) left bottom / max(100%, var(--ll-riss-b)) var(--ll-riss-h) no-repeat;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.ll-look-riss figcaption { margin-top: .35em !important; }


/* ==================================================================
 * T3 Handschrift-Notiz: die Bildunterschrift als Zettel mit Pfeil
 * ================================================================== */

.ll-look-notiz:is(figure.wp-block-kadence-image, figure.wp-block-image),
.ll-look-notiz.wp-block-kadence-image > figure {
	position: relative;
}

/* Platz für den Zettel, der unten rechts übersteht (nur mit Unterschrift). */
.ll-look-notiz:is(figure.wp-block-kadence-image, figure.wp-block-image):has(> figcaption),
.ll-look-notiz.wp-block-kadence-image > figure:has(> figcaption) {
	padding-bottom: clamp(16px, 1.8vw, 22px) !important;
}

.ll-look-notiz figcaption {
	position: absolute !important;
	right: clamp(10px, 5%, 32px);
	bottom: 0;
	z-index: 2;
	display: block !important;
	box-sizing: border-box;
	max-width: min(74%, 340px);
	margin: 0 !important;
	padding: .2em .75em .3em !important;
	background: none !important;
	color: var(--ll-braun-dunkel, #5e4430) !important;
	font-family: var(--ll-f-hand, "Caveat", cursive) !important;
	font-size: clamp(20px, 2vw, 25px) !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-transform: none !important;
	text-shadow: none !important;
	text-wrap: balance;
	caption-side: initial;
	rotate: -2.5deg;
}

.ll-look-notiz figcaption mark.has-inline-color { color: inherit !important; background: none !important; }

/* Der Zettel: warmes Papier mit Faser, unregelmäßig geschnitten, leiser Schatten. */
.ll-look-notiz figcaption::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 2px 9px 3px 12px / 10px 3px 11px 4px;
	background-color: var(--ll-bild-zettel);
	background-image: var(--ll-rauschen);
	box-shadow:
		0 1px 1px rgba(46, 35, 26, .10),
		0 8px 16px -8px rgba(46, 35, 26, .45);
}

/* Der gezeichnete Pfeil zeigt vom Zettel schräg ins Bild. */
.ll-look-notiz figcaption::after {
	content: "";
	position: absolute;
	left: -35px;
	top: -31px;
	width: 44px;
	height: 38px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 38' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23fffaf2' stroke-width='4.4' opacity='.8'%3E%3Cpath d='M41 35.5c-8.5-.6-21.5-5.8-30.6-25.2'/%3E%3Cpath d='M4.6 15.4 9.7 8.3l7.7 2.6'/%3E%3C/g%3E%3Cg stroke='%235e4430' stroke-width='1.7'%3E%3Cpath d='M41 35.5c-8.5-.6-21.5-5.8-30.6-25.2'/%3E%3Cpath d='M4.6 15.4 9.7 8.3l7.7 2.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}


/* ==================================================================
 * I3 Maßlinie: die Bildunterschrift als Bemaßung wie auf einer Bauzeichnung
 * ================================================================== */

.ll-look-masslinie figcaption {
	display: flex !important;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	margin: 10px 0 0 !important;
	padding: 0 !important;
	background: none !important;
	color: var(--ll-braun, #7f5f41) !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-style: normal !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	letter-spacing: .12em !important;
	text-align: center !important;
	text-transform: uppercase !important;
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
	caption-side: initial;
}

.ll-look-masslinie figcaption mark.has-inline-color { color: inherit !important; background: none !important; }

/* Linie mit Endstrich links und rechts; der Text unterbricht sie. */
.ll-look-masslinie figcaption::before,
.ll-look-masslinie figcaption::after {
	content: "";
	flex: 1 1 0;
	min-width: 22px;
	height: 13px;
	background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
	opacity: .85;
}

.ll-look-masslinie figcaption::before { border-left: 1px solid currentColor; }
.ll-look-masslinie figcaption::after { border-right: 1px solid currentColor; }

/* Auf dunklem Holz oder Foto. */
.ll-look-masslinie.ll-auf-dunkel figcaption,
:is(.ll-look-holzkarte, .wp-block-cover, :is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout):has(> .kt-row-layout-overlay:where(:not([style]), [style*="background-color"], [style*="gradient"]))) .ll-look-masslinie:not(.ll-auf-hell) figcaption {
	color: var(--ll-holz-hell, #dcc29f) !important;
}


/* ==================================================================
 * Weiche Ecken
 * ================================================================== */

.ll-look-ecken:is(.wp-block-kadence-image, .wp-block-image) :is(img, .kb-is-ratio-image, .kb-image-has-overlay),
.ll-look-ecken.wp-block-kadence-image .kb-image-has-overlay::after {
	border-radius: 14px !important;
}

.ll-look-ecken.wp-block-kadence-image :is(.kb-is-ratio-image, .kb-image-has-overlay) { overflow: hidden; }


/* ==================================================================
 * I2 Foto-Collage (Galerie): Fotos wie hingelegte Abzüge mit Handschrift
 * ================================================================== */

.wp-block-kadence-advancedgallery.ll-look-collage,
.wp-block-gallery.ll-look-collage {
	overflow: visible !important;
	padding-block: 12px;
}

/* Wie die Abzüge liegen: Drehung, kleiner Versatz und wohin sie beim
   Auffächern rutschen. */
.ll-look-collage :is(.kadence-blocks-gallery-item, figure.wp-block-image):nth-child(4n+1) { --ll-dreh: -2.4deg; --ll-hoch: 3px; --ll-weg: -5px; }
.ll-look-collage :is(.kadence-blocks-gallery-item, figure.wp-block-image):nth-child(4n+2) { --ll-dreh: 1.7deg; --ll-hoch: -4px; --ll-weg: 3px; }
.ll-look-collage :is(.kadence-blocks-gallery-item, figure.wp-block-image):nth-child(4n+3) { --ll-dreh: -1deg; --ll-hoch: 5px; --ll-weg: -3px; }
.ll-look-collage :is(.kadence-blocks-gallery-item, figure.wp-block-image):nth-child(4n+4) { --ll-dreh: 2.3deg; --ll-hoch: -2px; --ll-weg: 5px; }

/* Der Abzug: weißes Papier mit breitem unteren Rand. */
.wp-block-kadence-advancedgallery.ll-look-collage :is(.kb-gallery-ul, .kb-gallery-main-contain) .kadence-blocks-gallery-item .kb-gal-image-radius,
.wp-block-gallery.ll-look-collage.has-nested-images figure.wp-block-image {
	box-sizing: border-box;
	padding: 8px 8px 30px !important;
	border: 0 !important;
	border-radius: 1px !important;
	background: var(--ll-bild-papier) !important;
	box-shadow:
		0 1px 2px rgba(46, 35, 26, .12),
		0 14px 26px -14px rgba(46, 35, 26, .55) !important;
	overflow: hidden !important;
	transition: box-shadow .55s var(--ll-bild-weich);
}

/* Gedreht wird die ganze Figur, damit eine Kadence-Unterschrift "unter dem
   Bild" mitgeht. */
.wp-block-kadence-advancedgallery.ll-look-collage :is(.kb-gallery-ul, .kb-gallery-main-contain) .kadence-blocks-gallery-item figure.kb-gallery-figure,
.wp-block-gallery.ll-look-collage.has-nested-images figure.wp-block-image {
	position: relative;
	rotate: var(--ll-dreh, -1.5deg);
	translate: 0 var(--ll-hoch, 0);
	transition:
		rotate .55s var(--ll-bild-weich),
		translate .55s var(--ll-bild-weich),
		scale .55s var(--ll-bild-weich),
		box-shadow .55s var(--ll-bild-weich);
}

.wp-block-kadence-advancedgallery.ll-look-collage .kb-gal-image-radius img,
.wp-block-gallery.ll-look-collage figure.wp-block-image img {
	border-radius: 0 !important;
}

/* Die Bildunterschrift steht immer da: in Handschrift im weißen Streifen.
   Kadence zeigt sie sonst nur beim Drüberfahren als dunklen Verlauf. */
.wp-block-kadence-advancedgallery.ll-look-collage :is(.kb-gallery-ul, .kb-gallery-main-contain) .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption,
.wp-block-gallery.ll-look-collage.has-nested-images figure.wp-block-image figcaption {
	position: absolute !important;
	inset: auto 0 0 0 !important;
	z-index: 2;
	display: block !important;
	box-sizing: border-box;
	width: auto !important;
	height: 30px !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 10px !important;
	overflow: hidden !important;
	background: none !important;
	color: var(--ll-braun-dunkel, #5e4430) !important;
	font-family: var(--ll-f-hand, "Caveat", cursive) !important;
	font-size: 19px !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 30px !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-transform: none !important;
	text-shadow: none !important;
	white-space: nowrap;
	text-overflow: ellipsis;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	will-change: auto !important;
}

.ll-look-collage :is(.kadence-blocks-gallery-item__caption, figcaption) mark.has-inline-color { color: inherit !important; background: none !important; }

/* Kadence legt beim Drüberfahren sonst einen dunklen Schleier über das Foto. */
.wp-block-kadence-advancedgallery.ll-look-collage .kb-gallery-image-contain::after { display: none !important; }

@media (hover: hover) {
	/* Beim Drüberfahren fächern sich die Abzüge ein wenig auf ... */
	.wp-block-kadence-advancedgallery.ll-look-collage:hover figure.kb-gallery-figure,
	.wp-block-gallery.ll-look-collage:hover figure.wp-block-image {
		rotate: calc(var(--ll-dreh, -1.5deg) * 1.6);
		translate: var(--ll-weg, 0) var(--ll-hoch, 0);
	}

	/* ... und der unter der Maus richtet sich auf und kommt nach vorn. */
	.wp-block-kadence-advancedgallery.ll-look-collage .kadence-blocks-gallery-item:hover { z-index: 3; }
	.wp-block-kadence-advancedgallery.ll-look-collage .kadence-blocks-gallery-item:hover figure.kb-gallery-figure,
	.wp-block-gallery.ll-look-collage figure.wp-block-image:hover {
		z-index: 3;
		rotate: 0deg;
		translate: 0 calc(var(--ll-hoch, 0px) - 6px);
		scale: 1.03;
	}

	.wp-block-kadence-advancedgallery.ll-look-collage .kadence-blocks-gallery-item:hover .kb-gal-image-radius,
	.wp-block-gallery.ll-look-collage figure.wp-block-image:hover {
		box-shadow:
			0 2px 4px rgba(46, 35, 26, .12),
			0 24px 38px -16px rgba(46, 35, 26, .6) !important;
	}
}

@media (max-width: 767px) {
	.wp-block-kadence-advancedgallery.ll-look-collage :is(.kb-gallery-ul, .kb-gallery-main-contain) .kadence-blocks-gallery-item .kb-gal-image-radius,
	.wp-block-gallery.ll-look-collage.has-nested-images figure.wp-block-image {
		padding: 6px 6px 26px !important;
	}

	.wp-block-kadence-advancedgallery.ll-look-collage :is(.kb-gallery-ul, .kb-gallery-main-contain) .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption,
	.wp-block-gallery.ll-look-collage.has-nested-images figure.wp-block-image figcaption {
		height: 26px !important;
		padding: 0 6px !important;
		font-size: 16px !important;
		line-height: 26px !important;
	}
}


/* ==================================================================
 * I4 Altes Foto wird farbig (Effekt beim Drüberfahren, jeder Block)
 * Am Handy setzt look.js "ll-farbig", solange der Block in der Mitte ist.
 * ================================================================== */

.ll-hover-altfoto img,
.ll-hover-altfoto video,
.ll-hover-altfoto :is(.kb-blocks-bg-slider, .kb-blocks-bg-video-container) {
	filter: var(--ll-bild-alt);
}

/* Hintergrundfoto einer Kadence-Zeile, einer Kadence-Spalte oder einer
   Gruppe: eine vergilbte Kopie des Hintergrunds liegt zwischen Foto und
   Inhalt und blendet beim Drüberfahren aus. Die Schrift darüber bleibt, wie
   sie ist. Ohne Hintergrundfoto ist die Kopie leer: nichts verfärbt sich. */
:is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout).ll-hover-altfoto::before,
.wp-block-kadence-column.ll-hover-altfoto > :is(.kt-inside-inner-col, .kadence-inner-column-inner)::after,
.wp-block-group.ll-hover-altfoto::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: inherit;
	background-color: transparent !important;
	filter: var(--ll-bild-alt-flaeche);
	transition: opacity .8s var(--ll-bild-weich);
}

/* Zeile: Kadence legt Farbschleier (z-index 0) und Inhalt (1) darüber. */
:is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout).ll-hover-altfoto::before { z-index: 0; }

/* Spalte: eigene Ebene über dem Hintergrund, unter Kadence-Schleier (-1)
   und Inhalt. */
.wp-block-kadence-column.ll-hover-altfoto > :is(.kt-inside-inner-col, .kadence-inner-column-inner) { isolation: isolate; }
.wp-block-kadence-column.ll-hover-altfoto > :is(.kt-inside-inner-col, .kadence-inner-column-inner)::after { z-index: -2; }

.wp-block-group.ll-hover-altfoto { position: relative; isolation: isolate; }
.wp-block-group.ll-hover-altfoto::before { z-index: -1; }

/* Gruppe mit Kante aus "Flächen": deren Hintergrund reicht über einen
   unsichtbaren Rand, die Kopie muss genauso weit reichen. */
.wp-block-group.ll-hover-altfoto.ll-kante-riss-unten::before { bottom: calc(-1 * var(--ll-fl-riss, 0px)); }
.wp-block-group.ll-hover-altfoto.ll-kante-riss-oben::before { top: calc(-1 * var(--ll-fl-riss, 0px)); }
.wp-block-group.ll-hover-altfoto.ll-kante-gras-oben::before { top: calc(-1 * var(--ll-fl-gras, 0px)); }

/* Farbig: am Handy in der Bildschirmmitte ... */
.ll-hover-altfoto.ll-farbig img,
.ll-hover-altfoto.ll-farbig video,
.ll-hover-altfoto.ll-farbig :is(.kb-blocks-bg-slider, .kb-blocks-bg-video-container) {
	filter: var(--ll-bild-farbig);
}

:is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout).ll-hover-altfoto.ll-farbig::before,
.wp-block-kadence-column.ll-hover-altfoto.ll-farbig > :is(.kt-inside-inner-col, .kadence-inner-column-inner)::after,
.wp-block-group.ll-hover-altfoto.ll-farbig::before {
	opacity: 0;
}

/* ... und mit der Maus: Galerien Foto für Foto, alle anderen Blöcke als Ganzes. */
@media (hover: hover) {
	.ll-hover-altfoto:not(.wp-block-kadence-advancedgallery, .wp-block-gallery):hover :is(img, video, .kb-blocks-bg-slider, .kb-blocks-bg-video-container),
	.ll-hover-altfoto:is(.wp-block-kadence-advancedgallery, .wp-block-gallery) :is(.kadence-blocks-gallery-item, figure.wp-block-image):is(:hover, :focus-within) img {
		filter: var(--ll-bild-farbig);
	}

	:is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout).ll-hover-altfoto:hover::before,
	.wp-block-kadence-column.ll-hover-altfoto:hover > :is(.kt-inside-inner-col, .kadence-inner-column-inner)::after,
	.wp-block-group.ll-hover-altfoto:hover::before {
		opacity: 0;
	}
}


/* ==================================================================
 * I5 Vorhang (Effekt beim Erscheinen, jeder Block): öffnet sich einmal von
 * links nach rechts. Versteckt nur mit JavaScript und ohne "weniger
 * Bewegung"; ohne Skript ist alles sofort da.
 * ================================================================== */

@media (prefers-reduced-motion: no-preference) {
	/* Ganze Blöcke (Zeile, Spalte, Galerie, Gruppe …) */
	.ll-js .ll-fx-vorhang:not(.wp-block-kadence-image, .wp-block-image):not(.ll-sichtbar) {
		clip-path: inset(-40px 100% -40px 0);
	}

	.ll-js .ll-fx-vorhang:not(.wp-block-kadence-image, .wp-block-image).ll-sichtbar {
		animation: ll-vorhang 1.5s cubic-bezier(.62, .04, .22, 1) var(--ll-basis, 0ms) backwards;
	}

	/* Einzelbild: der Vorhang läuft genau über das Foto (nicht über die
	   leere Breite daneben), die Bildunterschrift blendet danach ein. */
	.ll-js .ll-fx-vorhang.wp-block-kadence-image:not(.ll-sichtbar) :is(.kb-is-ratio-image, .kb-image-has-overlay),
	.ll-js .ll-fx-vorhang:is(.wp-block-kadence-image, .wp-block-image):not(.ll-sichtbar) img:not(:is(.kb-is-ratio-image, .kb-image-has-overlay) img) {
		clip-path: inset(-40px 100% -40px 0);
	}

	.ll-js .ll-fx-vorhang.wp-block-kadence-image.ll-sichtbar :is(.kb-is-ratio-image, .kb-image-has-overlay),
	.ll-js .ll-fx-vorhang:is(.wp-block-kadence-image, .wp-block-image).ll-sichtbar img:not(:is(.kb-is-ratio-image, .kb-image-has-overlay) img) {
		animation: ll-vorhang 1.5s cubic-bezier(.62, .04, .22, 1) var(--ll-basis, 0ms) backwards;
	}

	.ll-js .ll-fx-vorhang:is(.wp-block-kadence-image, .wp-block-image):not(.ll-sichtbar) figcaption {
		opacity: 0;
	}

	.ll-js .ll-fx-vorhang:is(.wp-block-kadence-image, .wp-block-image).ll-sichtbar figcaption {
		animation: ll-vorhang-text .9s var(--ll-bild-weich) calc(var(--ll-basis, 0ms) + 900ms) backwards;
	}

	/* Das Foto setzt sich dabei sanft (nur wo es in einem Rahmen liegt). */
	.ll-js .ll-fx-vorhang.ll-sichtbar :is(.kb-is-ratio-image, .kb-gal-image-radius, .wp-block-cover) > img,
	.ll-js .ll-fx-vorhang.ll-sichtbar .kb-gallery-image-contain > img {
		animation: ll-vorhang-bild 1.9s var(--ll-bild-weich) var(--ll-basis, 0ms) backwards;
	}

	.ll-js .ll-fx-vorhang.ll-sichtbar.wp-block-kadence-image .kb-is-ratio-image { overflow: hidden; }
}

/* Am Ende etwas größer als der Block, damit Schatten und gedrehte
   Rahmen nicht abgeschnitten werden; danach gilt wieder "kein Zuschnitt". */
@keyframes ll-vorhang {
	from { clip-path: inset(-40px 100% -40px 0); }
	to { clip-path: inset(-40px -40px -40px -40px); }
}

@keyframes ll-vorhang-bild {
	from { scale: 1.07; }
	to { scale: 1; }
}

@keyframes ll-vorhang-text {
	from { opacity: 0; }
	to { opacity: 1; }
}


/* ==================================================================
 * Weniger Bewegung: nichts dreht, rutscht oder zoomt, Farbe wechselt sofort
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	:is(.ll-look-fotorahmen, .ll-look-collage, .ll-hover-altfoto, .ll-hover-bildzoom, .ll-fx-vorhang) img,
	.ll-look-fotorahmen :is(.kb-is-ratio-image, .kb-gal-image-radius, figure.kb-gallery-figure, figure.wp-block-image),
	.ll-look-collage :is(.kb-gal-image-radius, figure.kb-gallery-figure, figure.wp-block-image),
	:is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout).ll-hover-altfoto::before,
	.wp-block-kadence-column.ll-hover-altfoto > :is(.kt-inside-inner-col, .kadence-inner-column-inner)::after,
	.wp-block-group.ll-hover-altfoto::before {
		transition: none !important;
	}

	.ll-fx-vorhang,
	.ll-fx-vorhang :is(img, .kb-is-ratio-image, .kb-image-has-overlay, figcaption) {
		clip-path: none !important;
		animation: none !important;
	}

	/* Beim Drüberfahren bleibt alles liegen, wie es ist. */
	.ll-look-fotorahmen:is(.wp-block-kadence-image, .wp-block-image):hover img { rotate: var(--ll-rahmen-einzel, -1.2deg); scale: 1 !important; }
	.ll-look-fotorahmen.wp-block-kadence-image:hover .kb-is-ratio-image { rotate: var(--ll-rahmen-einzel, -1.2deg); }
	.ll-look-fotorahmen.wp-block-kadence-image .kb-is-ratio-image img,
	.ll-look-fotorahmen :is(.kadence-blocks-gallery-item, figure.wp-block-image):hover img { scale: 1 !important; }
	.wp-block-kadence-advancedgallery.ll-look-fotorahmen .kadence-blocks-gallery-item:hover figure.kb-gallery-figure,
	.wp-block-gallery.ll-look-fotorahmen figure.wp-block-image:hover {
		rotate: var(--ll-rahmen-dreh, -1.2deg);
		translate: none;
	}

	.wp-block-kadence-advancedgallery.ll-look-collage:hover figure.kb-gallery-figure,
	.wp-block-gallery.ll-look-collage:hover figure.wp-block-image,
	.wp-block-kadence-advancedgallery.ll-look-collage .kadence-blocks-gallery-item:hover figure.kb-gallery-figure,
	.wp-block-gallery.ll-look-collage figure.wp-block-image:hover {
		rotate: var(--ll-dreh, -1.5deg);
		translate: 0 var(--ll-hoch, 0);
		scale: 1;
	}
}