/**
 * Landleben Gestaltung: Landleben-Look, Trenner und Aufbau
 *
 * Trenner (Kadence "Abstandhalter/Trenner" und WordPress-Trennlinie),
 * gewählt im Panel "Landleben-Effekte" > "Landleben-Look":
 *   ll-look-zaun        D1 Gezeichneter Zaun
 *   ll-look-draht       D2 Draht mit Krampen (zeichnet sich einmal von links)
 *   ll-look-holzleiste  D3 Holzleiste
 *   ll-look-zaunlatten  Zaunlatten (wie die alte Trennlinie "Zaunlatten")
 *
 * Aufbau (Kadence-Zeile oder WordPress-Spalten), Panel "Aufbau":
 *   ll-aufbau-schritte  W5 Schritte 01, 02, 03 am Draht
 *   ll-aufbau-draht     Zeitleiste am Draht (ohne Nummern)
 *
 * Kadence druckt sein eigenes CSS nach diesem. Was Kadence pro Block setzt
 * (Höhe, Abstände, Spaltenabstand), steht hier mit !important.
 * Versteckt (zum Einzeichnen) wird nur mit .ll-js und ohne Wunsch nach
 * weniger Bewegung. Ohne JavaScript ist alles sofort fertig zu sehen.
 */

/* ==================================================================
 * 1. TRENNER
 * ================================================================== */

/* ------------------------------------------------------------------
 * Gemeinsam: Kadence-Abstandhalter zeichnet in .kt-block-spacer,
 * die eigene Linie von Kadence wird ausgeblendet.
 * ------------------------------------------------------------------ */

.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-draht, .ll-look-holzleiste, .ll-look-zaunlatten) :is(.kt-divider, .kt-divider-stripe) {
	display: none !important;
}

.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-draht, .ll-look-holzleiste, .ll-look-zaunlatten) > .kt-block-spacer {
	position: relative;
	/* Kadence setzt die Höhe pro Block; reicht sie nicht für die Zeichnung, wird es etwas höher. */
	min-height: var(--ll-t-platz, 60px);
}

.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-draht, .ll-look-holzleiste, .ll-look-zaunlatten) > .kt-block-spacer::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: var(--ll-t-h, 20px);
	translate: 0 -50%;
	pointer-events: none;
}

/* Gemeinsam: WordPress-Trennlinie (hr). Größe und Rand gehören dem Look.
 * Die doppelte Klasse (hr.ll-look-x.ll-look-x) schlägt die !important-Regeln
 * der WordPress-Stile ("Punkte": background:none!important, 0,2,0). */
hr:is(.ll-look-zaun, .ll-look-draht, .ll-look-holzleiste, .ll-look-zaunlatten) {
	display: block !important;
	box-sizing: border-box !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* Stil "Punkte" der WordPress-Trennlinie malt sonst Punkte darüber. */
hr:is(.ll-look-zaun, .ll-look-draht, .ll-look-holzleiste, .ll-look-zaunlatten)::before,
hr:is(.ll-look-zaun, .ll-look-draht, .ll-look-holzleiste, .ll-look-zaunlatten)::after {
	content: none !important;
	display: none !important;
}

/* ------------------------------------------------------------------
 * D1 Gezeichneter Zaun
 * ------------------------------------------------------------------ */

.wp-block-kadence-spacer.ll-look-zaun {
	--ll-t-h: 64px;
	--ll-t-platz: 88px;
	color: var(--ll-dunkel, #3b2a1e);
}

.wp-block-kadence-spacer.ll-look-zaun > .kt-block-spacer::before,
hr.ll-look-zaun.ll-look-zaun {
	background: currentColor !important;
	opacity: .85 !important;
	-webkit-mask: url("../img/zaun-skizze.svg") center / contain no-repeat;
	mask: url("../img/zaun-skizze.svg") center / contain no-repeat;
}

.wp-block-kadence-spacer.ll-look-zaun > .kt-block-spacer::before {
	--ll-x: -50%;
	left: 50%;
	right: auto;
	width: min(340px, 100%);
	translate: var(--ll-x) -50%;
}

hr.ll-look-zaun.ll-look-zaun {
	width: 340px !important;
	height: 64px !important;
}

hr.ll-look-zaun { color: var(--ll-dunkel, #3b2a1e); }

/* ------------------------------------------------------------------
 * D2 Draht mit Krampen: zwei verdrehte Drähte über die volle Breite
 * (gedehnt), die Krampen als eigene Ebene in fester Größe (nie gedehnt).
 * ------------------------------------------------------------------ */

.wp-block-kadence-spacer.ll-look-draht {
	--ll-t-h: 22px;
	--ll-t-platz: 44px;
	color: var(--ll-leise, #6f5f50);
}

.wp-block-kadence-spacer.ll-look-draht > .kt-block-spacer::before,
hr.ll-look-draht.ll-look-draht {
	background: currentColor !important;
	opacity: 1 !important;
	-webkit-mask:
		url("../img/trenner-krampen-reihe.svg") left center / auto 22px space no-repeat,
		url("../img/trenner-draht.svg") left center / 100% 16px no-repeat;
	mask:
		url("../img/trenner-krampen-reihe.svg") left center / auto 22px space no-repeat,
		url("../img/trenner-draht.svg") left center / 100% 16px no-repeat;
}

hr.ll-look-draht.ll-look-draht {
	width: 100% !important;
	height: 22px !important;
}

hr.ll-look-draht { color: var(--ll-leise, #6f5f50); }

/* ------------------------------------------------------------------
 * D3 Holzleiste: schmale Leiste mit Maserung längs, zwei Nagelköpfe.
 * ------------------------------------------------------------------ */

.wp-block-kadence-spacer.ll-look-holzleiste {
	--ll-t-h: 14px;
	--ll-t-platz: 40px;
}

.wp-block-kadence-spacer.ll-look-holzleiste > .kt-block-spacer::before,
hr.ll-look-holzleiste.ll-look-holzleiste {
	border-radius: 2px;
	background-color: var(--ll-holz, #c4a07a) !important;
	background-image:
		radial-gradient(circle at 16px 50%, #4a3424 0 1.5px, rgba(74, 52, 36, .35) 2.1px, rgba(74, 52, 36, 0) 2.9px),
		radial-gradient(circle at calc(100% - 16px) 50%, #4a3424 0 1.5px, rgba(74, 52, 36, .35) 2.1px, rgba(74, 52, 36, 0) 2.9px),
		url("../img/trenner-holz.svg"),
		var(--ll-rauschen),
		linear-gradient(180deg, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 58%, rgba(46, 35, 26, .2) 100%) !important;
	background-size: auto, auto, 640px 100%, auto, auto !important;
	background-repeat: no-repeat, no-repeat, repeat-x, repeat, no-repeat !important;
	background-position: 0 0 !important;
	box-shadow: 0 1px 0 rgba(46, 35, 26, .22), 0 5px 8px -6px rgba(46, 35, 26, .55) !important;
	opacity: 1 !important;
}

hr.ll-look-holzleiste.ll-look-holzleiste {
	width: 100% !important;
	height: 14px !important;
}

/* ------------------------------------------------------------------
 * Zaunlatten (aus "Stile > Zaunlatten" der Trennlinie übernommen)
 * ------------------------------------------------------------------ */

.wp-block-kadence-spacer.ll-look-zaunlatten {
	--ll-t-h: 36px;
	--ll-t-platz: 56px;
	color: var(--ll-braun, #7f5f41);
}

.wp-block-kadence-spacer.ll-look-zaunlatten > .kt-block-spacer::before,
hr.ll-look-zaunlatten.ll-look-zaunlatten {
	background: currentColor !important;
	opacity: .78 !important;
	-webkit-mask: var(--ll-zaun) center / contain no-repeat;
	mask: var(--ll-zaun) center / contain no-repeat;
}

.wp-block-kadence-spacer.ll-look-zaunlatten > .kt-block-spacer::before {
	--ll-x: -50%;
	left: 50%;
	right: auto;
	width: min(200px, 70%);
	translate: var(--ll-x) -50%;
}

hr.ll-look-zaunlatten.ll-look-zaunlatten {
	width: 200px !important;
	max-width: 70% !important;
	height: 36px !important;
}

hr.ll-look-zaunlatten { color: var(--ll-braun, #7f5f41); }

/* Zaun und Zaunlatten links oder rechts, wenn der Abstandhalter so ausgerichtet ist
 * (auch eigene Ausrichtung für Tablet und Handy aus Kadence). */
.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-zaunlatten) > .kt-block-spacer-halign-left::before {
	left: 0;
	--ll-x: 0%;
}

.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-zaunlatten) > .kt-block-spacer-halign-right::before {
	left: auto;
	right: 0;
	--ll-x: 0%;
}

@media (max-width: 1024px) {
	.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-zaunlatten) > .kt-block-spacer-thalign-center::before { left: 50%; right: auto; --ll-x: -50%; }
	.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-zaunlatten) > .kt-block-spacer-thalign-left::before { left: 0; right: auto; --ll-x: 0%; }
	.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-zaunlatten) > .kt-block-spacer-thalign-right::before { left: auto; right: 0; --ll-x: 0%; }
}

@media (max-width: 767px) {
	.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-zaunlatten) > .kt-block-spacer-malign-center::before { left: 50%; right: auto; --ll-x: -50%; }
	.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-zaunlatten) > .kt-block-spacer-malign-left::before { left: 0; right: auto; --ll-x: 0%; }
	.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-zaunlatten) > .kt-block-spacer-malign-right::before { left: auto; right: 0; --ll-x: 0%; }
}

/* Folgt direkt eine Papier-Fläche oder eine Holzleiste, steht der Zaun
 * darauf, statt in der Mitte des Abstands zu schweben. */
.wp-block-kadence-spacer:is(.ll-look-zaun, .ll-look-zaunlatten):has(+ :is(.ll-look-papier, .ll-look-papier-hell, .ll-kante-holz-oben, .is-style-ll-papier)) > .kt-block-spacer::before {
	top: auto;
	bottom: -2px;
	translate: var(--ll-x, -50%) 0;
	-webkit-mask-position: 50% 100%;
	mask-position: 50% 100%;
}

/* Eigene Farbe aus der WordPress-Trennlinie gilt (Einstellungen > Farbe). */
hr:is(.ll-look-zaun, .ll-look-zaunlatten):is(.ll-look-zaun, .ll-look-zaunlatten).has-text-color { opacity: 1 !important; }

/* ------------------------------------------------------------------
 * Trenner auf dunklem Grund (Foto, Holzkarte): helle Holzfarbe.
 * look.js setzt ll-auf-dunkel; im Editor (ohne look.js) gilt die
 * Vermutung für eindeutig dunkle Flächen, die ll-auf-hell aufhebt.
 * ------------------------------------------------------------------ */

.ll-auf-dunkel:is(.ll-look-zaun, .ll-look-draht, .ll-look-zaunlatten),
: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"]))) :is(.ll-look-zaun, .ll-look-draht, .ll-look-zaunlatten):not(.ll-auf-hell) {
	color: var(--ll-holz-hell, #dcc29f);
}

.wp-block-kadence-spacer.ll-look-zaun.ll-auf-dunkel > .kt-block-spacer::before,
hr.ll-look-zaun.ll-look-zaun.ll-auf-dunkel {
	opacity: .92 !important;
}

.wp-block-kadence-spacer.ll-look-holzleiste.ll-auf-dunkel > .kt-block-spacer::before,
hr.ll-look-holzleiste.ll-look-holzleiste.ll-auf-dunkel {
	box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 6px 10px -6px rgba(0, 0, 0, .7) !important;
}

/* ------------------------------------------------------------------
 * D2 zeichnet sich einmal von links nach rechts (gesteuert von
 * landleben.js über ll-sichtbar).
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.wp-block-kadence-spacer.ll-look-draht > .kt-block-spacer::before,
	hr.ll-look-draht {
		clip-path: inset(0 0 0 0);
		transition: clip-path 1.7s cubic-bezier(.45, .05, .25, 1);
	}

	.ll-js .wp-block-kadence-spacer.ll-look-draht:not(.ll-sichtbar) > .kt-block-spacer::before,
	.ll-js hr.ll-look-draht:not(.ll-sichtbar) {
		clip-path: inset(0 100% 0 0);
	}
}


/* ==================================================================
 * 2. AUFBAU: Spalten am Draht
 *
 * Nebeneinander: Ein Draht läuft über alle Spalten. Er liegt im Raster
 * der Kadence-Zeile über der ganzen ersten Reihe und folgt so jedem
 * Spaltenabstand. An jeder Spalte hält ihn eine Krampe, darüber steht
 * die Nummer.
 * Untereinander (wo Kadence die Spalten stapelt, z. B. am Handy): Der
 * Draht läuft links nach unten, jede Spalte trägt ihr Stück Draht von
 * der eigenen Krampe bis zur nächsten.
 * Raster (Kadence "2er-Raster" u. ä.): jede Spalte hat ihr eigenes Stück.
 *
 * Gezeichnet wird immer mit denselben Pseudo-Elementen:
 *   Zeile (Raster)::before = durchgehender Draht (nur nebeneinander)
 *   Spalte::before         = Nummer
 *   Spalte::after          = Krampe/Knoten, untereinander und im Raster
 *                            mit dem eigenen Drahtstück
 * Welche Form gilt, sagen zwei Schalter an der Zeile (0 oder 1):
 *   --ll-a-unter  (untereinander) und --ll-a-raster (mehrere Reihen).
 * Aus ihnen rechnet calc() Lage und Größe; Bild-Ebenen der Maske, die
 * gerade nicht gebraucht werden, bekommen die Größe 0 und fallen weg.
 * ================================================================== */

:is(:is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout), .wp-block-columns):is(.ll-aufbau-schritte, .ll-aufbau-draht) {
	--ll-a-draht: var(--ll-leise, #6f5f50);
	--ll-a-zahl: var(--ll-braun, #7f5f41);
	--ll-a-dauer: 1.8s;     /* nebeneinander: so lange zeichnet sich der Draht */
	--ll-a-takt: .42s;      /* untereinander und im Raster: Abstand zwischen zwei Schritten */
	--ll-a-band: 80px;      /* Platz über dem Inhalt jeder Spalte */
	--ll-a-y: 48px;         /* Mitte des Drahts in diesem Platz */
	--ll-a-gross: 32px;     /* Nummer */
	--ll-a-v-band: 46px;    /* untereinander: Platz über dem Inhalt */
	--ll-a-v-gross: 26px;   /* untereinander: Nummer */
	--ll-a-einzug: 42px;    /* untereinander: Inhalt rechts vom Draht */
	--ll-a-abstand: 48px;   /* untereinander: Abstand zwischen den Schritten */
	/* Krampe: Breite, Höhe, Abstand vom linken Rand; quer liegend (untereinander): Höhe und Lage */
	--ll-a-mw: 12px;
	--ll-a-mh: 26px;
	--ll-a-mx: 2px;
	--ll-a-mv: 26px;
	--ll-a-mq: 12px;
	--ll-a-vt: 8px;
	--ll-a-n: 3;
}

/* Zeitleiste: kleiner Platz über dem Inhalt, Knoten statt Krampe */
:is(:is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout), .wp-block-columns).ll-aufbau-draht {
	--ll-a-band: 40px;
	--ll-a-y: 14px;
	--ll-a-v-band: 0px;
	--ll-a-mw: 18px;
	--ll-a-mx: 0px;
	--ll-a-mq: 18px;
	--ll-a-vt: 12px;
}

/* Die Schalter gelten für diese Zeile (und nicht für Zeilen darin). */
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap),
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) {
	--ll-a-unter: 0;
	--ll-a-raster: 0;
	--ll-a-durchgehend: block;
}

/* Anzahl der Spalten */
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .kt-has-2-columns { --ll-a-n: 2; }
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .kt-has-4-columns { --ll-a-n: 4; }
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .kt-has-5-columns { --ll-a-n: 5; }
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .kt-has-6-columns { --ll-a-n: 6; }
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):has(> .wp-block-column:nth-child(2):last-child) { --ll-a-n: 2; }
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):has(> .wp-block-column:nth-child(4):last-child) { --ll-a-n: 4; }
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):has(> .wp-block-column:nth-child(5):last-child) { --ll-a-n: 5; }
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):has(> .wp-block-column:nth-child(6):last-child) { --ll-a-n: 6; }

/* Platz jeder Spalte (für den Takt) und die letzte Spalte */
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column,
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column { --ll-a-i: 0; --ll-a-letzte: 0; }
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column:nth-child(2 of .wp-block-kadence-column),
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column:nth-child(2) { --ll-a-i: 1; }
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column:nth-child(3 of .wp-block-kadence-column),
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column:nth-child(3) { --ll-a-i: 2; }
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column:nth-child(4 of .wp-block-kadence-column),
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column:nth-child(4) { --ll-a-i: 3; }
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column:nth-child(5 of .wp-block-kadence-column),
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column:nth-child(5) { --ll-a-i: 4; }
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column:nth-child(n + 6 of .wp-block-kadence-column),
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column:nth-child(n + 6) { --ll-a-i: 5; }
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column:nth-last-child(1 of .wp-block-kadence-column),
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column:last-child { --ll-a-letzte: 1; }

/* ------------------------------------------------------------------
 * Wann gestapelt (untereinander) und wann Raster? Genau wie Kadence:
 *  - ab 1025 px: Layout der Zeile
 *  - 768 bis 1024 px: Tablet-Layout; "wie Desktop" (inherit) nimmt das
 *    Layout der Zeile, bei 5 und 6 Spalten aber das Handy-Layout
 *  - bis 767 px: Handy-Layout (Standard "Zeile" = untereinander)
 *  - WordPress-Spalten: unter 782 px, außer "Auf Mobilgeräten nicht stapeln"
 * ------------------------------------------------------------------ */

@media (min-width: 1025px) {
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap).kt-row-layout-row {
		--ll-a-unter: 1;
	}
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap):is(.kt-row-layout-two-grid, .kt-row-layout-three-grid, .kt-row-layout-first-row, .kt-row-layout-last-row) {
		--ll-a-raster: 1;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap):is(.kt-tab-layout-row, .kt-tab-layout-inherit.kt-row-layout-row, .kt-tab-layout-inherit:is(.kt-has-5-columns, .kt-has-6-columns).kt-mobile-layout-row) {
		--ll-a-unter: 1;
	}
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap):is(.kt-tab-layout-two-grid, .kt-tab-layout-three-grid, .kt-tab-layout-first-row, .kt-tab-layout-last-row, .kt-tab-layout-inherit:not(.kt-has-5-columns, .kt-has-6-columns):is(.kt-row-layout-two-grid, .kt-row-layout-three-grid, .kt-row-layout-first-row, .kt-row-layout-last-row), .kt-tab-layout-inherit:is(.kt-has-5-columns, .kt-has-6-columns):is(.kt-mobile-layout-two-grid, .kt-mobile-layout-three-grid, .kt-mobile-layout-first-row, .kt-mobile-layout-last-row)) {
		--ll-a-raster: 1;
	}
}

@media (max-width: 767px) {
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap).kt-mobile-layout-row {
		--ll-a-unter: 1;
	}
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap):is(.kt-mobile-layout-two-grid, .kt-mobile-layout-three-grid, .kt-mobile-layout-first-row, .kt-mobile-layout-last-row) {
		--ll-a-raster: 1;
	}
}

@media (max-width: 781px) {
	.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.is-not-stacked-on-mobile) {
		--ll-a-unter: 1;
	}
}

/* ------------------------------------------------------------------
 * Zeile
 * ------------------------------------------------------------------ */

:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap),
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) {
	position: relative;
	counter-reset: ll-schritt;
}

/* Der durchgehende Draht. Als Kind des Rasters mit grid-column 1 / -1
   liegt er genau über allen Spalten der ersten Reihe, ohne den
   Innenabstand der Zeile. */
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap)::before,
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht)::before {
	content: "";
	display: var(--ll-a-durchgehend, block);
	position: absolute;
	z-index: 0;
	grid-column: 1 / -1;
	grid-row: 1;
	left: 0;
	right: 0;
	top: calc(var(--ll-a-y) - 8px);
	height: 16px;
	background-color: var(--ll-a-draht);
	-webkit-mask: url("../img/trenner-draht.svg") left center / 100% 16px no-repeat;
	mask: url("../img/trenner-draht.svg") left center / 100% 16px no-repeat;
	pointer-events: none;
}

/* WordPress-Spalten mit Hintergrundfarbe haben Innenabstand. */
.wp-block-columns.has-background:is(.ll-aufbau-schritte, .ll-aufbau-draht)::before {
	left: 2.375em;
	right: 2.375em;
	top: calc(1.25em + var(--ll-a-y) - 8px);
}

/* ------------------------------------------------------------------
 * Spalten
 * ------------------------------------------------------------------ */

:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column,
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column {
	/* 1, wenn diese Spalte ihr eigenes Drahtstück trägt */
	--ll-a-eigen: calc(var(--ll-a-unter) + var(--ll-a-raster));
	/* Einsatz beim Einzeichnen: nebeneinander, wenn der Draht hier ankommt; sonst im Takt */
	--ll-a-t: calc((1 - var(--ll-a-eigen)) * var(--ll-a-dauer) * var(--ll-a-i) / var(--ll-a-n) + var(--ll-a-eigen) * var(--ll-a-takt) * var(--ll-a-i));
	position: relative;
	counter-increment: ll-schritt;
	padding-top: calc((1 - var(--ll-a-unter)) * var(--ll-a-band) + var(--ll-a-unter) * var(--ll-a-v-band)) !important;
	/* Alle Schritte beginnen oben am Draht, auch wenn die Zeile "mittig" steht. */
	justify-content: flex-start !important;
}

.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column {
	align-self: stretch !important;
}

/* Den Abstand zum Draht gibt der Aufbau vor: das erste Element (Bild,
   Überschrift) beginnt ohne eigenen oberen Rand. */
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner) > :first-child,
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column > :first-child {
	margin-top: 0 !important;
}

/* Untereinander: Platz links für den Draht, fester Abstand zum nächsten Schritt.
   (Nur hier gesetzt, damit eigene Innenabstände der Spalten sonst bleiben.) */
@media (min-width: 1025px) {
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap).kt-row-layout-row { row-gap: 0 !important; }
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap).kt-row-layout-row > .wp-block-kadence-column {
		padding-left: var(--ll-a-einzug) !important;
		padding-bottom: calc((1 - var(--ll-a-letzte)) * var(--ll-a-abstand)) !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap):is(.kt-tab-layout-row, .kt-tab-layout-inherit.kt-row-layout-row, .kt-tab-layout-inherit:is(.kt-has-5-columns, .kt-has-6-columns).kt-mobile-layout-row) { row-gap: 0 !important; }
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap):is(.kt-tab-layout-row, .kt-tab-layout-inherit.kt-row-layout-row, .kt-tab-layout-inherit:is(.kt-has-5-columns, .kt-has-6-columns).kt-mobile-layout-row) > .wp-block-kadence-column {
		padding-left: var(--ll-a-einzug) !important;
		padding-bottom: calc((1 - var(--ll-a-letzte)) * var(--ll-a-abstand)) !important;
	}
}

@media (max-width: 767px) {
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap).kt-mobile-layout-row { row-gap: 0 !important; }
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap).kt-mobile-layout-row > .wp-block-kadence-column {
		padding-left: var(--ll-a-einzug) !important;
		padding-bottom: calc((1 - var(--ll-a-letzte)) * var(--ll-a-abstand)) !important;
	}
}

@media (max-width: 781px) {
	.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.is-not-stacked-on-mobile) { row-gap: 0 !important; }
	.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.is-not-stacked-on-mobile) > .wp-block-column {
		padding-left: var(--ll-a-einzug) !important;
		padding-bottom: calc((1 - var(--ll-a-letzte)) * var(--ll-a-abstand)) !important;
	}
}

/* Untereinander oder im Raster gibt es keinen durchgehenden Draht. */
@media (min-width: 1025px) {
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap):is(.kt-row-layout-row, .kt-row-layout-two-grid, .kt-row-layout-three-grid, .kt-row-layout-first-row, .kt-row-layout-last-row) { --ll-a-durchgehend: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap):is(.kt-tab-layout-row, .kt-tab-layout-two-grid, .kt-tab-layout-three-grid, .kt-tab-layout-first-row, .kt-tab-layout-last-row, .kt-tab-layout-inherit:is(.kt-row-layout-row, .kt-row-layout-two-grid, .kt-row-layout-three-grid, .kt-row-layout-first-row, .kt-row-layout-last-row), .kt-tab-layout-inherit:is(.kt-has-5-columns, .kt-has-6-columns):is(.kt-mobile-layout-row, .kt-mobile-layout-two-grid, .kt-mobile-layout-three-grid, .kt-mobile-layout-first-row, .kt-mobile-layout-last-row)) { --ll-a-durchgehend: none; }
}
@media (max-width: 767px) {
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap):is(.kt-mobile-layout-row, .kt-mobile-layout-two-grid, .kt-mobile-layout-three-grid, .kt-mobile-layout-first-row, .kt-mobile-layout-last-row) { --ll-a-durchgehend: none; }
}
@media (max-width: 781px) {
	.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.is-not-stacked-on-mobile) { --ll-a-durchgehend: none; }
}

/* Die Nummer: sitzt auf dem Draht, Young Serif in Braun.
   Untereinander rückt sie neben die Krampe, auf Höhe des Inhalts. */
.ll-aufbau-schritte > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column::before,
.wp-block-columns.ll-aufbau-schritte > .wp-block-column::before {
	content: counter(ll-schritt, decimal-leading-zero);
	position: absolute;
	z-index: 1;
	top: calc((1 - var(--ll-a-unter)) * (var(--ll-a-y) - 10px - var(--ll-a-gross)) + var(--ll-a-unter) * (var(--ll-a-vt) + var(--ll-a-mq) / 2 - var(--ll-a-v-gross) * .6));
	left: calc(var(--ll-a-unter) * var(--ll-a-einzug));
	margin: 0;
	font-family: var(--ll-f-titel, "Young Serif", Georgia, serif);
	font-size: calc((1 - var(--ll-a-unter)) * var(--ll-a-gross) + var(--ll-a-unter) * var(--ll-a-v-gross));
	font-weight: 400;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: .03em;
	text-transform: none;
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--ll-a-zahl);
	pointer-events: none;
}

/* Krampe oder Knoten. Vier Bild-Ebenen, davon sind immer nur die
   passenden sichtbar (die anderen haben die Größe 0):
   1 Krampe/Knoten stehend   (nebeneinander, Raster)
   2 Krampe/Knoten liegend   (untereinander)
   3 Draht senkrecht         (untereinander: bis zur nächsten Krampe)
   4 Draht waagerecht        (Raster: über die eigene Spalte) */
:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column::after,
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	right: calc((1 - var(--ll-a-raster)) * (100% - var(--ll-a-unter) * var(--ll-a-mv) - (1 - var(--ll-a-unter)) * (var(--ll-a-mx) + var(--ll-a-mw))));
	top: calc((1 - var(--ll-a-unter)) * (var(--ll-a-y) - var(--ll-a-mh) / 2) + var(--ll-a-unter) * var(--ll-a-vt));
	height: calc((1 - var(--ll-a-unter)) * var(--ll-a-mh) + var(--ll-a-unter) * ((1 - var(--ll-a-letzte)) * (100% + var(--ll-a-mq) / 2) + var(--ll-a-letzte) * var(--ll-a-mq)));
	background-color: var(--ll-a-draht);
	-webkit-mask-image: url("../img/trenner-krampe.svg"), url("../img/trenner-krampe-quer.svg"), url("../img/trenner-draht-senkrecht.svg"), url("../img/trenner-draht.svg");
	mask-image: url("../img/trenner-krampe.svg"), url("../img/trenner-krampe-quer.svg"), url("../img/trenner-draht-senkrecht.svg"), url("../img/trenner-draht.svg");
	-webkit-mask-position: var(--ll-a-mx) center, center top, center top, left center;
	mask-position: var(--ll-a-mx) center, center top, center top, left center;
	-webkit-mask-size:
		calc((1 - var(--ll-a-unter)) * var(--ll-a-mw)) calc((1 - var(--ll-a-unter)) * var(--ll-a-mh)),
		calc(var(--ll-a-unter) * var(--ll-a-mv)) calc(var(--ll-a-unter) * var(--ll-a-mq)),
		calc(var(--ll-a-unter) * 16px) calc(var(--ll-a-unter) * 240px),
		calc(var(--ll-a-raster) * 100%) calc(var(--ll-a-raster) * 16px);
	mask-size:
		calc((1 - var(--ll-a-unter)) * var(--ll-a-mw)) calc((1 - var(--ll-a-unter)) * var(--ll-a-mh)),
		calc(var(--ll-a-unter) * var(--ll-a-mv)) calc(var(--ll-a-unter) * var(--ll-a-mq)),
		calc(var(--ll-a-unter) * 16px) calc(var(--ll-a-unter) * 240px),
		calc(var(--ll-a-raster) * 100%) calc(var(--ll-a-raster) * 16px);
	-webkit-mask-repeat: no-repeat, no-repeat, repeat-y, no-repeat;
	mask-repeat: no-repeat, no-repeat, repeat-y, no-repeat;
	pointer-events: none;
}

.ll-aufbau-draht > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column::after,
.wp-block-columns.ll-aufbau-draht > .wp-block-column::after {
	-webkit-mask-image: url("../img/trenner-knoten.svg"), url("../img/trenner-knoten-quer.svg"), url("../img/trenner-draht-senkrecht.svg"), url("../img/trenner-draht.svg");
	mask-image: url("../img/trenner-knoten.svg"), url("../img/trenner-knoten-quer.svg"), url("../img/trenner-draht-senkrecht.svg"), url("../img/trenner-draht.svg");
}

/* ------------------------------------------------------------------
 * Dunkler Grund: Foto mit Farbschleier, Holzkarte.
 * look.js prüft den Grund HINTER einem Block; die Zeile selbst ist hier
 * aber der Grund. Darum zählt auch ihr eigener Schleier und ihr eigener
 * Holzkarten-Look. Papier an der Zeile ist immer hell.
 * ------------------------------------------------------------------ */

:is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout):is(.ll-aufbau-schritte, .ll-aufbau-draht):is(.ll-auf-dunkel, .ll-look-holzkarte, :has(> .kt-row-layout-overlay:where(:not([style]), [style*="background-color"], [style*="gradient"])), :has(> .kb-blocks-bg-video-container), :has(> .kb-blocks-bg-slider)):not(.ll-look-papier, .ll-look-papier-hell),
.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):is(.ll-auf-dunkel, .ll-look-holzkarte):not(.ll-look-papier, .ll-look-papier-hell),
: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"]))) :is(:is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout), .wp-block-columns):is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.ll-auf-hell, .ll-look-papier, .ll-look-papier-hell) {
	--ll-a-draht: var(--ll-holz-hell, #dcc29f);
	--ll-a-zahl: var(--ll-auf-dunkel, #f6eee3);
}

/* ------------------------------------------------------------------
 * Einzeichnen (einmal, wenn die Zeile ins Bild kommt; landleben.js
 * setzt ll-sichtbar). Nebeneinander läuft der Draht von links nach
 * rechts, an jeder Spalte setzt die Krampe, die Nummer erscheint, dann
 * der Inhalt. Untereinander und im Raster zeichnet jede Spalte ihr
 * Drahtstück nacheinander.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap)::before,
	.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht)::before {
		clip-path: inset(-4px 0 -4px 0);
		transition: clip-path var(--ll-a-dauer) cubic-bezier(.33, .15, .62, .9);
	}

	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column::after,
	.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column::after {
		clip-path: inset(-6px);
		transition:
			opacity .3s ease-out var(--ll-a-t),
			scale .55s cubic-bezier(.34, 1.56, .64, 1) var(--ll-a-t),
			clip-path calc(var(--ll-a-takt) * 1.15 + (1 - var(--ll-a-eigen)) * .3s) cubic-bezier(.4, .1, .6, 1) var(--ll-a-t);
	}

	.ll-aufbau-schritte > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column::before,
	.wp-block-columns.ll-aufbau-schritte > .wp-block-column::before {
		transition:
			opacity .7s var(--ll-weich, ease-out) calc(var(--ll-a-t) + .08s),
			translate .7s var(--ll-weich, ease-out) calc(var(--ll-a-t) + .08s);
	}

	:is(.ll-aufbau-schritte, .ll-aufbau-draht) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner),
	.wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht) > .wp-block-column > * {
		transition:
			opacity .9s var(--ll-weich, ease-out) calc(var(--ll-a-t) + .18s),
			translate .9s var(--ll-weich, ease-out) calc(var(--ll-a-t) + .18s),
			background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
	}

	/* vorher (nur mit JavaScript) */
	.ll-js :is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.ll-sichtbar) > :is(.kt-row-column-wrap, .innerblocks-wrap)::before,
	.ll-js .wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.ll-sichtbar)::before {
		clip-path: inset(-4px 100% -4px 0);
	}

	.ll-js :is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.ll-sichtbar) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column::after,
	.ll-js .wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.ll-sichtbar) > .wp-block-column::after {
		/* nebeneinander: Krampe springt klein auf; sonst zeichnet sich das Drahtstück */
		opacity: var(--ll-a-eigen);
		scale: calc(.4 + .6 * var(--ll-a-eigen));
		clip-path: inset(-6px calc(var(--ll-a-raster) * (100% + 12px) - 6px) calc(var(--ll-a-unter) * (100% + 12px) - 6px) -6px);
	}

	.ll-js .ll-aufbau-schritte:not(.ll-sichtbar) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column::before,
	.ll-js .wp-block-columns.ll-aufbau-schritte:not(.ll-sichtbar) > .wp-block-column::before {
		opacity: 0;
		translate: 0 8px;
	}

	.ll-js :is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.ll-sichtbar) > :is(.kt-row-column-wrap, .innerblocks-wrap) > .wp-block-kadence-column > :is(.kt-inside-inner-col, .kadence-inner-column-inner),
	.ll-js .wp-block-columns:is(.ll-aufbau-schritte, .ll-aufbau-draht):not(.ll-sichtbar) > .wp-block-column > * {
		opacity: 0;
		translate: 0 16px;
	}
}