/**
 * Landleben Gestaltung: Landleben-Look, Schrift (v1.6)
 * Kicker (T2), Handschrift (T3), Pinselstrich, große Zahlen (T4),
 * Laufband (D4), Zitate, Häkchen-Liste.
 *
 * Gewählt im Panel "Landleben-Effekte" > "Landleben-Look".
 *
 * Wo Kadence die Klasse hinschreibt (echte Ausgabe von Kadence Blocks 3.7):
 * - direkt an h1-h6 / p (bzw. div/span, wenn als HTML-Tag gewählt),
 * - an den Link UM die Überschrift, wenn die Überschrift verlinkt ist
 *   (a.kb-advanced-heading-link > h2),
 * - an eine Hülle, wenn eine Enthüllungs-Animation gewählt ist
 *   (div.kadence-advanced-heading-wrapper > h2).
 * Darum greift jeder Text-Look an ":is(.look, .look > *, :has(> a.look))".
 *
 * Kadence schreibt seine Einstellungen pro Block sehr genau (bis 0,3,0) und
 * nach diesem Plugin. Was den Look ausmacht, steht deshalb mit !important.
 * Farben stehen zusätzlich mit ":not(#llt)": das hebt sie über Regeln
 * anderer Flächen-Looks, die Schriftfarben mit !important setzen. Der Look
 * besitzt seine Farbe, auch Wörter, die im Editor eingefärbt wurden
 * (mark.has-inline-color), übernehmen sie.
 *
 * Hell oder dunkel: look.js setzt ll-auf-dunkel / ll-auf-hell am Block.
 * Ohne Skript (Editor) gelten dunkle Umgebungen als dunkel: Holzkarte,
 * Cover, Kadence-Zeile mit Farbschleier. Gerechnet wird über Variablen,
 * so gewinnt immer die nächstgelegene Umgebung.
 *
 * Ausrichtung: look.js setzt ll-ausrichtung-links | -mitte | -rechts.
 */

/* ------------------------------------------------------------------
 * Farben nach Umgebung
 * Auf hellem Grund: Braun (5,8:1 auf Weiß, 4,7:1 auf Papier #efe6d8).
 * Auf dunklem Grund: kleine Schrift (Kicker, Laufband) im hellen
 * Papierton, die Linien in Holz-hell; große Schrift (Handschrift, Zahlen,
 * Häkchen) in hellem Holz. Holz-hell als Schrift erreichte auf einem Foto
 * mit 55 % Schleier nur 2,7 bis 3,7 : 1. Dazu ein weicher Schatten, der
 * auf unruhigen Fotos die Buchstaben vom Hintergrund löst.
 * ------------------------------------------------------------------ */

/* Ohne Skript: dunkle Umgebungen */
:is(.ll-look-holzkarte, .ll-look-karte-holz, .wp-block-cover:not(.is-light), :is(.kb-row-layout-wrap, .wp-block-kadence-rowlayout):has(> .kt-row-layout-overlay:where(:not([style]), [style*="background-color"], [style*="gradient"]))) {
	--llt-ton: #e8d4b4;
	--llt-klein: var(--ll-auf-dunkel, #f6eee3);
	--llt-linie: var(--ll-holz-hell, #dcc29f);
	--llt-holz: var(--ll-holz-hell, #dcc29f);
	--llt-tinte: var(--ll-auf-dunkel, #f6eee3);
	--llt-leise: rgba(246, 238, 227, .82);
	--llt-schatten: 0 1px 3px rgba(20, 14, 9, .5), 0 0 16px rgba(20, 14, 9, .28);
}

/* … und helle Flächen darin wieder hell */
:is(.ll-look-papier, .ll-look-papier-hell, .ll-look-karte-papier, .ll-look-karte-etikett, .ll-look-steckbrief) {
	--llt-ton: var(--ll-braun);
	--llt-klein: var(--ll-braun);
	--llt-linie: currentColor;
	--llt-holz: #b5926e;
	--llt-tinte: var(--ll-tinte, #2e231a);
	--llt-leise: var(--ll-leise, #6f5f50);
	--llt-schatten: none;
}

/* Mit Skript: was look.js am Block erkannt hat */
:is(.ll-look-kicker, .ll-look-handschrift, .ll-look-pinsel, .ll-look-zahl, .ll-look-zahl-voll, .ll-look-laufband, .ll-look-zitat-hand, .ll-look-haken, .is-style-ll-laufband).ll-auf-dunkel {
	--llt-ton: #e8d4b4;
	--llt-klein: var(--ll-auf-dunkel, #f6eee3);
	--llt-linie: var(--ll-holz-hell, #dcc29f);
	--llt-holz: var(--ll-holz-hell, #dcc29f);
	--llt-tinte: var(--ll-auf-dunkel, #f6eee3);
	--llt-leise: rgba(246, 238, 227, .82);
	--llt-schatten: 0 1px 3px rgba(20, 14, 9, .5), 0 0 16px rgba(20, 14, 9, .28);
}

:is(.ll-look-kicker, .ll-look-handschrift, .ll-look-pinsel, .ll-look-zahl, .ll-look-zahl-voll, .ll-look-laufband, .ll-look-zitat-hand, .ll-look-haken, .is-style-ll-laufband).ll-auf-hell {
	--llt-ton: var(--ll-braun);
	--llt-klein: var(--ll-braun);
	--llt-linie: currentColor;
	--llt-holz: #b5926e;
	--llt-tinte: var(--ll-tinte, #2e231a);
	--llt-leise: var(--ll-leise, #6f5f50);
	--llt-schatten: none;
}

/* Der Look besitzt die Farbe: alles darin (auch eingefärbte Wörter) folgt ihr. */
:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker, .ll-look-kicker > *, :has(> a.ll-look-kicker), .ll-look-handschrift, .ll-look-handschrift > *, :has(> a.ll-look-handschrift), .ll-look-zahl, .ll-look-zahl > *, :has(> a.ll-look-zahl), .ll-look-zahl-voll, .ll-look-zahl-voll > *, :has(> a.ll-look-zahl-voll), .ll-look-laufband, .ll-look-laufband > *, :has(> a.ll-look-laufband)):not(#llt) * {
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker, .ll-look-kicker > *, :has(> a.ll-look-kicker), .ll-look-handschrift, .ll-look-handschrift > *, :has(> a.ll-look-handschrift), .ll-look-zahl, .ll-look-zahl > *, :has(> a.ll-look-zahl), .ll-look-zahl-voll, .ll-look-zahl-voll > *, :has(> a.ll-look-zahl-voll), .ll-look-laufband, .ll-look-laufband > *, :has(> a.ll-look-laufband)):not(#llt) mark {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* Ein Link um die Überschrift: kein Unterstrich quer durch den Look. */
a:is(.ll-look-kicker, .ll-look-handschrift, .ll-look-pinsel, .ll-look-zahl, .ll-look-zahl-voll, .ll-look-laufband) {
	color: var(--llt-ton, var(--ll-braun));
	text-decoration: none !important;
}

/* ------------------------------------------------------------------
 * T2 Kicker mit Linie
 * Kleine gesperrte Zeile über einer Überschrift. Die Linie ist Teil der
 * Textzeile (ein leeres Stück vor dem ersten Wort, ohne Umbruchstelle).
 * So steht sie immer direkt vor dem Text: links, rechts und mittig, auch
 * ohne Skript. Mittig kommt eine zweite Linie hinter das letzte Wort.
 * ------------------------------------------------------------------ */

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker, .ll-look-kicker > *, :has(> a.ll-look-kicker)) {
	--llt-strich: 34px;
	--llt-abstand: 14px;
	--llt-sperrung: .28em;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 800 !important;
	font-style: normal !important;
	line-height: 1.6 !important;
	letter-spacing: var(--llt-sperrung) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	text-shadow: var(--llt-schatten, none) !important;
	text-wrap: balance;
	background-image: none !important;
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker, .ll-look-kicker > *, :has(> a.ll-look-kicker)):not(#llt) {
	color: var(--llt-klein, var(--ll-braun)) !important;
	-webkit-text-fill-color: currentColor !important;
}

/* Linksbündig über zwei Zeilen: die zweite Zeile beginnt unter dem Text, nicht unter der Linie. */
:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker:not(.ll-ausrichtung-mitte, .ll-ausrichtung-rechts, .has-text-align-center, .has-text-align-right), .ll-look-kicker:not(.ll-ausrichtung-mitte, .ll-ausrichtung-rechts) > *, :has(> a.ll-look-kicker:not(.ll-ausrichtung-mitte, .ll-ausrichtung-rechts))) {
	padding-left: calc(var(--llt-strich) + var(--llt-abstand)) !important;
	text-indent: calc(-1 * (var(--llt-strich) + var(--llt-abstand)));
}

/* Die Linie(n): fein, zum Text hin kräftiger, wie mit der Feder gezogen. */
:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker, .ll-look-kicker > *, :has(> a.ll-look-kicker))::before,
:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker.ll-ausrichtung-mitte, .ll-look-kicker.ll-ausrichtung-mitte > *, :has(> a.ll-look-kicker.ll-ausrichtung-mitte))::after,
:is(p, h1, h2, h3, h4, h5, h6).ll-look-kicker:is(.has-text-align-center, [style*="text-align:center"]):not(.ll-ausrichtung-links):not(.ll-ausrichtung-rechts)::after {
	/* Wortverbinder (unsichtbar): ohne Inhalt zählt Chrome die Linie beim Umbrechen nicht mit. */
	content: "\2060";
	display: inline;
	padding-left: var(--llt-strich);
	margin-right: var(--llt-abstand);
	color: var(--llt-linie, currentColor);
	background: linear-gradient(90deg, transparent, currentColor 70%) 0 50% / 100% 1px no-repeat;
	opacity: .8;
	transition: padding .45s var(--ll-weich, ease);
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker.ll-ausrichtung-mitte, .ll-look-kicker.ll-ausrichtung-mitte > *, :has(> a.ll-look-kicker.ll-ausrichtung-mitte))::after,
:is(p, h1, h2, h3, h4, h5, h6).ll-look-kicker:is(.has-text-align-center, [style*="text-align:center"]):not(.ll-ausrichtung-links):not(.ll-ausrichtung-rechts)::after {
	margin-right: 0;
	/* Die Sperrung hängt hinter dem letzten Buchstaben: abziehen, damit beide Abstände gleich sind. */
	margin-left: calc(var(--llt-abstand) - var(--llt-sperrung));
	background-image: linear-gradient(270deg, transparent, currentColor 75%);
}

/* Verlinkter Kicker: die Linie wächst beim Drüberfahren ein Stück. */
@media (hover: hover) {
	a.ll-look-kicker:hover > :is(h1, h2, h3, h4, h5, h6, p)::before,
	a.ll-look-kicker:hover > :is(h1, h2, h3, h4, h5, h6, p)::after,
	:is(h1, h2, h3, h4, h5, h6, p):has(> a.ll-look-kicker:hover)::before {
		padding-left: calc(var(--llt-strich) + 14px);
	}
}

@media (max-width: 767px) {
	:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker, .ll-look-kicker > *, :has(> a.ll-look-kicker)) {
		--llt-strich: 18px;
		--llt-abstand: 9px;
		--llt-sperrung: .19em;
		font-size: 12px !important;
	}
}

/* ------------------------------------------------------------------
 * T3 Handschrift
 * Caveat, leicht schräg. Gedreht wird um die Seite, an der der Text
 * steht, damit nichts aus der Spalte kippt.
 * ------------------------------------------------------------------ */

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-handschrift, .ll-look-handschrift > *, :has(> a.ll-look-handschrift)) {
	font-family: var(--ll-f-hand, "Caveat", cursive) !important;
	font-size: clamp(24px, 2.6vw, 32px) !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-shadow: var(--llt-schatten, none) !important;
	background-image: none !important;
	rotate: -1.6deg;
	transform-origin: 0 60%;
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-handschrift, .ll-look-handschrift > *, :has(> a.ll-look-handschrift)):not(#llt) {
	color: var(--llt-ton, var(--ll-braun)) !important;
	-webkit-text-fill-color: currentColor !important;
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-handschrift.ll-ausrichtung-mitte, .ll-look-handschrift.ll-ausrichtung-mitte > *, :has(> a.ll-look-handschrift.ll-ausrichtung-mitte)),
:is(p, h1, h2, h3, h4, h5, h6).ll-look-handschrift.has-text-align-center:not(.ll-ausrichtung-links):not(.ll-ausrichtung-rechts) {
	transform-origin: 50% 60%;
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-handschrift.ll-ausrichtung-rechts, .ll-look-handschrift.ll-ausrichtung-rechts > *, :has(> a.ll-look-handschrift.ll-ausrichtung-rechts)),
:is(p, h1, h2, h3, h4, h5, h6).ll-look-handschrift.has-text-align-right:not(.ll-ausrichtung-links):not(.ll-ausrichtung-mitte) {
	transform-origin: 100% 60%;
}

/* Verlinkte Handschrift: beim Drüberfahren ein feiner Strich darunter. */
@media (hover: hover) {
	a.ll-look-handschrift:hover > :is(h1, h2, h3, h4, h5, h6, p),
	:is(h1, h2, h3, h4, h5, h6, p) > a.ll-look-handschrift:hover {
		text-decoration: underline !important;
		text-decoration-thickness: 1px !important;
		text-underline-offset: .2em;
	}
}

a.ll-look-handschrift:focus-visible > :is(h1, h2, h3, h4, h5, h6, p) {
	text-decoration: underline !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: .2em;
}

/* ------------------------------------------------------------------
 * Pinselstrich unter der Überschrift
 * Ein trockener Pinselstrich in Holzfarbe (Maske assets/img/text-pinsel.svg).
 * Breite wächst mit der Schriftgröße, ist aber gedeckelt. Er folgt der
 * Ausrichtung; ohne Skript steht er links (Core: nach Ausrichtungs-Klasse).
 * ------------------------------------------------------------------ */

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-pinsel, .ll-look-pinsel > *, :has(> a.ll-look-pinsel)) {
	--llt-pinsel-b: clamp(72px, 3.8em, 280px);
	--llt-pinsel-h: clamp(8px, .36em, 18px);
	position: relative;
	padding-bottom: calc(var(--llt-pinsel-h) + clamp(6px, .2em, 12px)) !important;
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-pinsel, .ll-look-pinsel > *, :has(> a.ll-look-pinsel))::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: auto;
	width: var(--llt-pinsel-b);
	max-width: 100%;
	height: var(--llt-pinsel-h);
	margin: 0;
	background: var(--llt-holz, #b5926e);
	-webkit-mask: url("../img/text-pinsel.svg") 0 0 / 100% 100% no-repeat;
	mask: url("../img/text-pinsel.svg") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
	transition: width .5s var(--ll-weich, ease);
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-pinsel.ll-ausrichtung-mitte, .ll-look-pinsel.ll-ausrichtung-mitte > *, :has(> a.ll-look-pinsel.ll-ausrichtung-mitte))::after,
:is(p, h1, h2, h3, h4, h5, h6).ll-look-pinsel.has-text-align-center:not(.ll-ausrichtung-links):not(.ll-ausrichtung-rechts)::after {
	right: 0;
	margin-inline: auto;
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-pinsel.ll-ausrichtung-rechts, .ll-look-pinsel.ll-ausrichtung-rechts > *, :has(> a.ll-look-pinsel.ll-ausrichtung-rechts))::after,
:is(p, h1, h2, h3, h4, h5, h6).ll-look-pinsel.has-text-align-right:not(.ll-ausrichtung-links):not(.ll-ausrichtung-mitte)::after {
	left: auto;
	right: 0;
}

/* Verlinkte Überschrift: der Strich zieht sich beim Drüberfahren etwas länger. */
@media (hover: hover) {
	a.ll-look-pinsel:hover > :is(h1, h2, h3, h4, h5, h6, p)::after,
	:is(h1, h2, h3, h4, h5, h6, p):has(> a.ll-look-pinsel:hover)::after {
		width: calc(var(--llt-pinsel-b) * 1.18);
	}
}

/* ------------------------------------------------------------------
 * T4 Große Zahlen (Umriss und ausgefüllt), wie ein Werkstatt-Plakat
 * ------------------------------------------------------------------ */

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-zahl, .ll-look-zahl > *, :has(> a.ll-look-zahl), .ll-look-zahl-voll, .ll-look-zahl-voll > *, :has(> a.ll-look-zahl-voll)) {
	font-family: var(--ll-f-titel, "Young Serif", Georgia, serif) !important;
	margin-top: 0;
	margin-bottom: .12em;
	font-size: clamp(54px, 7.2vw, 96px) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: .95 !important;
	letter-spacing: -.01em !important;
	text-wrap: balance;
	text-transform: none !important;
	text-shadow: none !important;
	background-image: none !important;
	font-variant-numeric: lining-nums;
	font-synthesis: none;
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-zahl-voll, .ll-look-zahl-voll > *, :has(> a.ll-look-zahl-voll)):not(#llt),
:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-zahl, .ll-look-zahl > *, :has(> a.ll-look-zahl)):not(#llt) {
	color: var(--llt-ton, var(--ll-braun)) !important;
	-webkit-text-fill-color: currentColor !important;
	-webkit-text-stroke: 0;
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-zahl-voll, .ll-look-zahl-voll > *, :has(> a.ll-look-zahl-voll)) {
	text-shadow: var(--llt-schatten, none) !important;
}

/* In schmalen Spalten (3 und mehr nebeneinander) kleiner, damit „120 cm“ in
   einer Zeile bleibt. Gestapelte Spalten am Handy nutzen wieder die volle Größe. */
@media (min-width: 768px) {
	:is(.kt-has-3-columns, .wp-block-columns:has(> .wp-block-column:nth-child(3))) :is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-zahl, .ll-look-zahl > *, :has(> a.ll-look-zahl), .ll-look-zahl-voll, .ll-look-zahl-voll > *, :has(> a.ll-look-zahl-voll)) {
		font-size: clamp(50px, 5.6vw, 80px) !important;
	}

	:is(.kt-has-4-columns, .kt-has-5-columns, .kt-has-6-columns, .wp-block-columns:has(> .wp-block-column:nth-child(4))) :is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-zahl, .ll-look-zahl > *, :has(> a.ll-look-zahl), .ll-look-zahl-voll, .ll-look-zahl-voll > *, :has(> a.ll-look-zahl-voll)) {
		font-size: clamp(44px, 4.4vw, 64px) !important;
	}
}

/* Umriss nur, wo der Browser ihn zeichnen kann (sonst bliebe die Zahl unsichtbar). */
@supports (-webkit-text-stroke: 1px currentColor) {
	:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-zahl, .ll-look-zahl > *, :has(> a.ll-look-zahl)):not(#llt) {
		-webkit-text-fill-color: transparent !important;
		-webkit-text-stroke: clamp(1.25px, .017em, 1.9px) var(--llt-ton, var(--ll-braun));
	}

	:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-zahl, .ll-look-zahl > *, :has(> a.ll-look-zahl)):not(#llt) * {
		-webkit-text-fill-color: transparent !important;
	}
}

/* Die kleine Zeile darunter (design.css .ll-zahl-text) auf dunklem Grund. */
.ll-zahl-text {
	color: var(--llt-leise, var(--ll-leise, #6f5f50));
}

:is(.ll-look-zahl, .ll-look-zahl-voll).ll-auf-dunkel + .ll-zahl-text {
	color: rgba(246, 238, 227, .82);
}

/* ------------------------------------------------------------------
 * D4 Laufband
 * Ohne Skript, bei "Bewegung reduzieren" oder ausgeschalteten Effekten
 * steht die Zeile still: eine Zeile zwischen zwei feinen Linien. design.js
 * verdoppelt den Text und lässt ihn langsam laufen (ll-laufband-an).
 * Gilt auch für den alten Core-Stil is-style-ll-laufband.
 * ------------------------------------------------------------------ */

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-laufband, .ll-look-laufband > *, :has(> a.ll-look-laufband)),
p.is-style-ll-laufband {
	position: relative;
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 13px 0 !important;
	overflow: hidden !important;
	border: 0 solid !important;
	border-block-width: 1px !important;
	border-color: currentColor !important;
	border-color: color-mix(in srgb, var(--llt-linie, currentColor) 55%, transparent) !important;
	border-radius: 0 !important;
	background: none !important;
	font-family: var(--ll-f-titel, "Young Serif", Georgia, serif) !important;
	font-size: clamp(17px, 1.8vw, 21px) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.35 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	text-shadow: var(--llt-schatten, none) !important;
	text-align: center !important;
	white-space: nowrap !important;
	text-overflow: ellipsis;
	rotate: none !important;
}

:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-laufband, .ll-look-laufband > *, :has(> a.ll-look-laufband)):not(#llt),
p.is-style-ll-laufband:not(#llt) {
	color: var(--llt-klein, var(--ll-braun)) !important;
	-webkit-text-fill-color: currentColor !important;
}

/* läuft: an den Rändern weich ausblenden (die Linien bleiben stehen) */
:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))).ll-laufband-an:is(.ll-look-laufband, .is-style-ll-laufband) {
	--llt-rand: clamp(24px, 6vw, 72px);
	text-align: left !important;
	text-overflow: clip;
	-webkit-mask:
		linear-gradient(90deg, transparent, #000 var(--llt-rand), #000 calc(100% - var(--llt-rand)), transparent) 0 0 / 100% 100% no-repeat,
		linear-gradient(#000, #000) 0 0 / 100% 1px no-repeat,
		linear-gradient(#000, #000) 0 100% / 100% 1px no-repeat;
	mask:
		linear-gradient(90deg, transparent, #000 var(--llt-rand), #000 calc(100% - var(--llt-rand)), transparent) 0 0 / 100% 100% no-repeat,
		linear-gradient(#000, #000) 0 0 / 100% 1px no-repeat,
		linear-gradient(#000, #000) 0 100% / 100% 1px no-repeat;
}

:is(.ll-look-laufband, .is-style-ll-laufband) .ll-laufband-band {
	display: inline-flex;
	width: max-content;
	vertical-align: top;
	animation: ll-laufband var(--ll-laufband-dauer, 40s) linear infinite;
}

:is(.ll-look-laufband, .is-style-ll-laufband) .ll-laufband-band > span {
	padding-right: 1.4em;
}

/* Anhalten zum Lesen: Maus darauf oder Tastatur-Fokus darin. */
:is(.ll-look-laufband, .is-style-ll-laufband):is(:hover, :focus-within) .ll-laufband-band,
.ll-look-laufband:is(:hover, :focus-within) > * .ll-laufband-band {
	animation-play-state: paused;
}

/* ------------------------------------------------------------------
 * Zitat: Rustikal (core/quote, core/pullquote)
 * Papier mit Holzkante, großes Anführungszeichen in Holz, Zitat in der
 * Titelschrift, Quelle klein und gesperrt mit Linie (wie der Kicker).
 * Gilt auch für den alten Core-Stil is-style-ll-zitat.
 * ------------------------------------------------------------------ */

:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat) {
	--llt-ton: var(--ll-braun);
	--llt-klein: var(--ll-braun);
	--llt-linie: currentColor;
	--llt-holz: #b5926e;
	--llt-tinte: var(--ll-tinte, #2e231a);
	--llt-leise: var(--ll-leise, #6f5f50);
	--llt-schatten: none;
	--llt-kante: linear-gradient(90deg, #a98157 0 1px, #c4a07a 1px 3px, #b8936b 3px 4px, #c9a67f 4px 5px, #9f7a52 5px);
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	margin: 1.8em 0 !important;
	padding: 2.75em 2.1em 1.8em 2.5em !important;
	border: 0 !important;
	border-radius: 2px !important;
	background-color: var(--ll-papier, #f7f2ea) !important;
	background-image: var(--llt-kante), var(--ll-rauschen) !important;
	background-size: 6px 100%, auto !important;
	background-position: 0 0, 0 0 !important;
	background-repeat: no-repeat, repeat !important;
	box-shadow: 0 1px 2px rgba(46, 35, 26, .08), 0 18px 32px -24px rgba(46, 35, 26, .5);
	font-size: inherit !important;
	font-style: normal !important;
	quotes: none;
}

.wp-block-pullquote:is(.ll-look-zitat, .is-style-ll-zitat) {
	--llt-kante: linear-gradient(180deg, #a98157 0 1px, #c4a07a 1px 3px, #b8936b 3px 4px, #c9a67f 4px 6px, #9f7a52 6px);
	padding: 3.6em 2em 2em !important;
	background-size: 100% 7px, auto !important;
	text-align: center !important;
}

:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat):not(#llt),
:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat):not(#llt) :is(blockquote, p, em, strong, a, span, mark) {
	color: var(--ll-tinte, #2e231a) !important;
	-webkit-text-fill-color: currentColor !important;
}

.wp-block-pullquote:is(.ll-look-zitat, .is-style-ll-zitat) blockquote {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: inherit !important;
	font-style: normal !important;
}

/* großes Anführungszeichen */
:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat)::before {
	content: "\201C";
	position: absolute;
	top: .14em;
	left: .4em;
	right: auto;
	bottom: auto;
	width: auto;
	height: auto;
	margin: 0;
	font-family: var(--ll-f-titel, "Young Serif", Georgia, serif);
	font-size: 4.2em;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	color: var(--ll-holz, #c4a07a);
	opacity: .8;
	pointer-events: none;
}

.wp-block-pullquote:is(.ll-look-zitat, .is-style-ll-zitat)::before {
	top: .2em;
	left: 0;
	right: 0;
	text-align: center;
}

:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat) p {
	position: relative;
	margin: 0 0 .6em !important;
	font-family: var(--ll-f-titel, "Young Serif", Georgia, serif) !important;
	font-size: clamp(19px, 1.65vw, 22px) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	text-wrap: pretty;
}

.wp-block-pullquote:is(.ll-look-zitat, .is-style-ll-zitat) p {
	font-size: clamp(21px, 2vw, 26px) !important;
	line-height: 1.42 !important;
	text-wrap: balance;
}

:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat) p:last-of-type {
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------
 * Zitat in Handschrift: ohne Kasten, großes Caveat in Braun,
 * Quelle klein und gesperrt. Anführungszeichen setzt der Look selbst.
 * ------------------------------------------------------------------ */

:is(.wp-block-quote, .wp-block-pullquote).ll-look-zitat-hand {
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	margin: 1.6em 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-size: inherit !important;
	font-style: normal !important;
	quotes: "\201E" "\201C";
}

.wp-block-pullquote.ll-look-zitat-hand {
	padding: .4em 0 !important;
	text-align: center !important;
}

.wp-block-pullquote.ll-look-zitat-hand blockquote {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: inherit !important;
	font-style: normal !important;
}

:is(.wp-block-quote, .wp-block-pullquote).ll-look-zitat-hand p {
	margin: 0 0 .15em !important;
	font-family: var(--ll-f-hand, "Caveat", cursive) !important;
	font-size: clamp(26px, 3vw, 36px) !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-wrap: balance;
}

.wp-block-pullquote.ll-look-zitat-hand p {
	font-size: clamp(28px, 3.3vw, 40px) !important;
}

:is(.wp-block-quote, .wp-block-pullquote).ll-look-zitat-hand:not(#llt) p,
:is(.wp-block-quote, .wp-block-pullquote).ll-look-zitat-hand:not(#llt) p * {
	color: var(--llt-ton, var(--ll-braun)) !important;
	-webkit-text-fill-color: currentColor !important;
}

.ll-look-zitat-hand :is(p, cite) {
	text-shadow: var(--llt-schatten, none);
}

:is(.wp-block-quote, .wp-block-pullquote).ll-look-zitat-hand p:first-of-type::before {
	content: open-quote;
}

:is(.wp-block-quote, .wp-block-pullquote).ll-look-zitat-hand p:last-of-type::after {
	content: close-quote;
}

:is(.wp-block-quote, .wp-block-pullquote).ll-look-zitat-hand :is(p, cite) {
	rotate: -1deg;
	transform-origin: 0 50%;
}

:is(.wp-block-pullquote.ll-look-zitat-hand, .wp-block-quote.ll-look-zitat-hand.has-text-align-center) :is(p, cite) {
	transform-origin: 50% 50%;
}

/* ------------------------------------------------------------------
 * Quelle (cite) für beide Zitat-Looks: klein, gesperrt, mit Linie davor.
 * ------------------------------------------------------------------ */

:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat, .ll-look-zitat-hand) cite {
	display: block;
	margin: 1.1em 0 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	font-style: normal !important;
	line-height: 1.6 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
}

:is(.wp-block-quote, .wp-block-pullquote).ll-look-zitat-hand cite {
	margin-top: .7em !important;
}

:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat):not(#llt) cite,
:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat):not(#llt) cite * {
	color: var(--ll-braun) !important;
	-webkit-text-fill-color: currentColor !important;
}

:is(.wp-block-quote, .wp-block-pullquote).ll-look-zitat-hand:not(#llt) cite,
:is(.wp-block-quote, .wp-block-pullquote).ll-look-zitat-hand:not(#llt) cite * {
	color: var(--llt-leise, var(--ll-leise, #6f5f50)) !important;
	-webkit-text-fill-color: currentColor !important;
}

:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat, .ll-look-zitat-hand) cite::before,
.wp-block-pullquote:is(.ll-look-zitat, .is-style-ll-zitat, .ll-look-zitat-hand) cite::after {
	content: "\2060";
	display: inline;
	padding-left: 26px;
	margin-right: 12px;
	background: linear-gradient(90deg, transparent, currentColor 75%) 0 50% / 100% 1px no-repeat;
	opacity: .7;
}

.wp-block-pullquote:is(.ll-look-zitat, .is-style-ll-zitat, .ll-look-zitat-hand) cite::after {
	margin-right: 0;
	margin-left: calc(12px - .2em);
	background-image: linear-gradient(270deg, transparent, currentColor 75%);
}

/* Zitat zentriert oder rechtsbündig (core/quote): Zeichen und Linien folgen. */
.wp-block-quote:is(.ll-look-zitat, .is-style-ll-zitat).has-text-align-center {
	padding-inline: 2.3em !important;
}

.wp-block-quote:is(.ll-look-zitat, .is-style-ll-zitat).has-text-align-center::before {
	left: 0;
	right: 0;
	text-align: center;
}

.wp-block-quote:is(.ll-look-zitat, .is-style-ll-zitat).has-text-align-right::before {
	left: auto;
	right: .4em;
}

.wp-block-quote:is(.ll-look-zitat, .is-style-ll-zitat, .ll-look-zitat-hand).has-text-align-center cite::after {
	content: "\2060";
	display: inline;
	padding-left: 26px;
	margin-left: calc(12px - .2em);
	background: linear-gradient(270deg, transparent, currentColor 75%) 0 50% / 100% 1px no-repeat;
	opacity: .7;
}

/* Papier-Zitat auf dunklem Grund: tieferer Schatten */
:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat).ll-auf-dunkel {
	box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 22px 40px -22px rgba(0, 0, 0, .75);
}

@media (max-width: 767px) {
	:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat) {
		padding: 2.2em 1.3em 1.4em 1.7em !important;
	}

	.wp-block-pullquote:is(.ll-look-zitat, .is-style-ll-zitat) {
		padding: 3em 1.3em 1.6em !important;
	}

	:is(.wp-block-quote, .wp-block-pullquote):is(.ll-look-zitat, .is-style-ll-zitat)::before {
		font-size: 3.6em;
		left: .3em;
	}

	.wp-block-pullquote:is(.ll-look-zitat, .is-style-ll-zitat)::before {
		left: 0;
	}
}

/* ------------------------------------------------------------------
 * Gezeichnete Häkchen (kadence/iconlist, core/list)
 * Statt der Kadence-Symbole: mit der Feder gezogene Haken in Braun, drei
 * leicht verschiedene, damit es von Hand wirkt. Sie sitzen auf der Höhe
 * der ersten Textzeile, auch wenn ein Punkt umbricht.
 * ------------------------------------------------------------------ */

.wp-block-kadence-iconlist.ll-look-haken .kt-svg-icon-list-item-wrap,
.wp-block-kadence-iconlist.ll-look-haken .kt-svg-icon-list-item-wrap > a.kt-svg-icon-link {
	align-items: flex-start !important;
}

.wp-block-kadence-iconlist.ll-look-haken .kt-svg-icon-list-single {
	flex: 0 0 auto;
	box-sizing: content-box;
	width: 1.25em !important;
	height: 1.6em !important;
	height: 1lh !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	/* Kadence-Symbolfarbe (oft Grün) überall abschalten, auch im versteckten svg. */
	color: var(--llt-ton, var(--ll-braun)) !important;
	-webkit-text-fill-color: currentColor !important;
	background: var(--llt-ton, var(--ll-braun)) !important;
	-webkit-mask: url("../img/text-haken-1.svg") 50% 54% / 1.22em 1.22em no-repeat;
	mask: url("../img/text-haken-1.svg") 50% 54% / 1.22em 1.22em no-repeat;
}

.wp-block-kadence-iconlist.ll-look-haken .kt-svg-icon-list-single > svg {
	display: none !important;
}

.wp-block-kadence-iconlist.ll-look-haken .kt-svg-icon-list-item-wrap:nth-child(3n+2) .kt-svg-icon-list-single,
:is(ul, ol).ll-look-haken li:nth-child(3n+2)::before {
	-webkit-mask-image: url("../img/text-haken-2.svg");
	mask-image: url("../img/text-haken-2.svg");
}

.wp-block-kadence-iconlist.ll-look-haken .kt-svg-icon-list-item-wrap:nth-child(3n) .kt-svg-icon-list-single,
:is(ul, ol).ll-look-haken li:nth-child(3n)::before {
	-webkit-mask-image: url("../img/text-haken-3.svg");
	mask-image: url("../img/text-haken-3.svg");
}

:is(ul, ol).ll-look-haken {
	margin-left: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
}

:is(ul, ol).ll-look-haken :is(ul, ol) {
	padding-left: 0 !important;
	list-style: none !important;
}

:is(ul, ol).ll-look-haken li {
	position: relative;
	padding-left: 1.9em !important;
	list-style: none !important;
}

:is(ul, ol).ll-look-haken li::marker {
	content: none;
}

:is(ul, ol).ll-look-haken li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.25em;
	height: 1.6em;
	height: 1lh;
	background: var(--llt-ton, var(--ll-braun));
	-webkit-mask: url("../img/text-haken-1.svg") 50% 54% / 1.22em 1.22em no-repeat;
	mask: url("../img/text-haken-1.svg") 50% 54% / 1.22em 1.22em no-repeat;
}

/* ------------------------------------------------------------------
 * Bewegung reduzieren: nichts läuft, nichts wächst.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	:is(.ll-look-laufband, .is-style-ll-laufband) .ll-laufband-band {
		animation: none !important;
	}

	:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker, .ll-look-kicker > *, :has(> a.ll-look-kicker))::before,
	:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-kicker, .ll-look-kicker > *, :has(> a.ll-look-kicker))::after,
	:is(h1, h2, h3, h4, h5, h6, p, .kadence-advancedheading-text, .wp-block-kadence-advancedheading:where(:not(.block-editor-block-list__block))):is(.ll-look-pinsel, .ll-look-pinsel > *, :has(> a.ll-look-pinsel))::after {
		transition: none !important;
	}
}

.wp-block-kadence-advancedheading:is(.ll-look-kicker, .ll-look-laufband) > .kadence-advancedheading-text > .kb-adv-heading-inner { display: inline !important; }