/**
 * Landleben Gestaltung: Landleben-Look, Knöpfe (v1.6)
 * Holzknopf, Stempel (B1), Pfeil im Kreis (B2), gezeichneter Unterstrich (B3),
 * Brandholz (B4), Preis-Anhänger (B5).
 *
 * Gewählt im Panel "Landleben-Effekte" > "Landleben-Look". Die Klasse darf am
 * einzelnen Knopf sitzen oder an der ganzen Knopf-Gruppe (Kadence "Buttons",
 * WordPress "Buttons"). Hat ein Knopf in einer Gruppe einen eigenen Look,
 * gilt sein eigener. Die älteren WordPress-Stile "Holzknopf", "Stempel" und
 * "Preis-Anhänger" (Knopf-Block > Stile) sehen genauso aus wie die Looks.
 *
 * Ein Maß für alle: Jeder Look ist genau --ll-knopf-h hoch (52 px, am Handy
 * 50 px), egal welche Größe in Kadence eingestellt ist. Schatten und Kanten
 * liegen außerhalb oder innerhalb dieses Kastens, nie obendrauf.
 *
 * Kadence druckt sein eigenes CSS nach diesem und schreibt Farben, Größe und
 * Abstände für jeden Knopf einzeln. Deshalb steht alles, was Kadence setzen
 * kann, mit !important. Kadence nutzt ::before für seine Hover-Fläche; die
 * Looks schalten sie ab oder übernehmen sie ganz.
 *
 * Hell oder dunkel: look.js setzt ll-auf-dunkel / ll-auf-hell an das Element
 * mit der Look-Klasse. Ohne JavaScript (und im Editor) gelten Cover-Blöcke,
 * Kadence-Zeilen mit Farbschleier und die Holzkarte als dunkel.
 */

/* ------------------------------------------------------------------
 * 1. Maße und Zeichen für alle Knöpfe
 *    (knoepfe-einheitlich.css nutzt dieselben Werte)
 * ------------------------------------------------------------------ */

:root {
	--ll-knopf-h: 52px;
	--ll-knopf-schrift: 14px;
	--ll-knopf-gewicht: 800;
	--ll-knopf-sperrung: .12em;
	--ll-knopf-innen: 28px;
	--ll-knopf-zeile: 1.2;
	--ll-knopf-luecke: .6em;
	/* Mit der Feder gezeichnet: Pfeil, kleiner Pfeil, Unterstrich (als Maske, Farbe kommt aus CSS) */
	--ll-knopf-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.2 6.3c4.6-.5 10.4-.4 18.6-.2'/%3E%3Cpath d='M14.6 1.6c1.7 1.7 3.4 3.2 5.4 4.5-2 1.2-3.8 2.7-5.3 4.4'/%3E%3C/svg%3E");
	--ll-knopf-pfeil-klein: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 8.2c3.7-.3 7.3-.3 10.8-.1'/%3E%3Cpath d='M9.7 4.3c1.2 1.3 2.4 2.5 3.8 3.8-1.4 1.1-2.6 2.3-3.7 3.6'/%3E%3C/svg%3E");
	/* Holzmaserung: lang gezogenes Rauschen, dunkle Fasern, sanfte Fasern (für helles Holz), helle Fasern */
	--ll-knopf-maser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .28' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.1 0 0 0 0 0.05 1 0 0 0 -.4'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23m)'/%3E%3C/svg%3E");
	--ll-knopf-maser-sanft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .28' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.1 0 0 0 0 0.05 .7 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23m)'/%3E%3C/svg%3E");
	--ll-knopf-maser-licht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .3' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.93 0 0 0 0 0.82 .45 0 0 0 -.28'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23m)'/%3E%3C/svg%3E");
	--ll-knopf-strich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M1.5 3.7C31 2.3 63 4.5 101 3.1S168 2.4 198.5 3.9'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	:root { --ll-knopf-h: 50px; }
}

/* ------------------------------------------------------------------
 * 2. Farben je Umgebung
 *    Hell ist der Normalfall (Werte stehen als Ersatzwert in var()).
 *    Dunkel: Foto mit Schleier, Cover, Holzkarte, oder look.js sagt es.
 * ------------------------------------------------------------------ */

:where(.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"])), .ll-look-holzkarte, .ll-look-karte-holz),
:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger).ll-auf-dunkel {
	--llk-fokus: #dcc29f;
	/* Holzknopf wird auf dunklem Grund zu frisch gespaltener, heller Kastanie */
	--llk-hz-holz: #c9a57d;
	--llk-hz-holz-an: #d9b98f;
	--llk-hz-kante: #8c6a47;
	--llk-hz-schrift: #2e231a;
	--llk-hz-licht: none;
	--llk-hz-maser: var(--ll-knopf-maser-sanft);
	--llk-hz-schatten: 0 2px 7px rgba(10, 6, 3, .45), 0 1px 0 rgba(10, 6, 3, .35);
	/* Stempel: Schatten in hellem Holz */
	--llk-st-gesicht: #fdfaf5;
	--llk-st-schatten: #c4a07a;
	/* Brandholz: feiner heller Rand, damit es sich vom dunklen Grund löst */
	--llk-bh-rand: rgba(220, 194, 159, .5);
	/* Pfeil im Kreis: rauchige Pille mit heller Schrift */
	--llk-kr-gesicht: rgba(28, 20, 13, .5);
	--llk-kr-rand: rgba(246, 238, 227, .55);
	--llk-kr-rand-an: rgba(246, 238, 227, .9);
	--llk-kr-schrift: #f6eee3;
	--llk-kr-scheibe: #dcc29f;
	--llk-kr-pfeil: #2e231a;
	--llk-kr-scheibe-an: #f6eee3;
	--llk-kr-pfeil-an: #2e231a;
	/* Unterstrich: helle Schrift, Linie in hellem Holz */
	--llk-sr-schrift: #f6eee3;
	--llk-sr-schrift-an: #ffffff;
	--llk-sr-linie: #dcc29f;
	--llk-sr-schatten: 0 1px 3px rgba(20, 12, 6, .5);
	/* Anhänger: beim Drüberfahren hell statt braun */
	--llk-ah-holz-an: #f1e4cf;
	--llk-ah-schrift-an: #2e231a;
}

/* Helle Flächen in einer dunklen Umgebung und look.js "hell": wieder Normalwerte */
.ll-look-papier, .ll-look-papier-hell, .ll-look-steckbrief, .ll-look-karte-papier, .ll-look-karte-etikett,
:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger).ll-auf-hell {
	--llk-fokus: initial;
	--llk-hz-holz: initial;
	--llk-hz-holz-an: initial;
	--llk-hz-kante: initial;
	--llk-hz-schrift: initial;
	--llk-hz-licht: initial;
	--llk-hz-maser: initial;
	--llk-hz-schatten: initial;
	--llk-st-gesicht: initial;
	--llk-st-schatten: initial;
	--llk-bh-rand: initial;
	--llk-kr-gesicht: initial;
	--llk-kr-rand: initial;
	--llk-kr-rand-an: initial;
	--llk-kr-schrift: initial;
	--llk-kr-scheibe: initial;
	--llk-kr-pfeil: initial;
	--llk-kr-scheibe-an: initial;
	--llk-kr-pfeil-an: initial;
	--llk-sr-schrift: initial;
	--llk-sr-schrift-an: initial;
	--llk-sr-linie: initial;
	--llk-sr-schatten: initial;
	--llk-ah-holz-an: initial;
	--llk-ah-schrift-an: initial;
}

/* Jeder Knopf zeigt ein anderes Stück der Maserung */
:where(.kb-buttons-wrap, .wp-block-buttons) > :nth-child(3n + 2) { --llk-maser-pos: -150px -43px; }
:where(.kb-buttons-wrap, .wp-block-buttons) > :nth-child(3n + 3) { --llk-maser-pos: -262px -78px; }

/* ------------------------------------------------------------------
 * 3. Gemeinsame Form aller sechs Looks
 * ------------------------------------------------------------------ */

:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger),
.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link,
.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link,
:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) {
	position: relative !important;
	isolation: isolate;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--ll-knopf-luecke) !important;
	box-sizing: border-box !important;
	min-height: var(--ll-knopf-h) !important;
	height: auto !important;
	/* Die Sperrung hängt auch hinter dem letzten Buchstaben: links etwas mehr, damit die Schrift mittig sitzt */
	padding: 0 calc(var(--ll-knopf-innen) - .06em) 0 calc(var(--ll-knopf-innen) + .06em) !important;
	border: 0 solid transparent !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-family: inherit !important;
	font-size: var(--ll-knopf-schrift) !important;
	font-style: normal !important;
	font-weight: var(--ll-knopf-gewicht) !important;
	letter-spacing: var(--ll-knopf-sperrung) !important;
	line-height: var(--ll-knopf-zeile) !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	text-wrap: balance;
	opacity: 1 !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Kadence-Hover-Fläche aus; Holzknopf, Kreis und Anhänger nutzen ::before selbst */
:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger)::before,
.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link::before,
.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link::before,
:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *))::before {
	display: none !important;
}

:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) .kt-btn-inner-text,
.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link .kt-btn-inner-text,
.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link .kt-btn-inner-text,
:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) .kt-btn-inner-text,
:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(.kt-btn-text, .kt-button-text),
.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link :is(.kt-btn-text, .kt-button-text),
.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link :is(.kt-btn-text, .kt-button-text),
:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) :is(.kt-btn-text, .kt-button-text),
:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) .kb-svg-icon-wrap,
.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link .kb-svg-icon-wrap,
.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link .kb-svg-icon-wrap,
:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) .kb-svg-icon-wrap {
	color: inherit !important;
	background: none !important;
	-webkit-text-fill-color: currentColor !important;
}

:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) .kb-svg-icon-wrap,
.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link .kb-svg-icon-wrap,
.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link .kb-svg-icon-wrap,
:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) .kb-svg-icon-wrap {
	display: inline-flex !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
}

:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) .kb-svg-icon-wrap svg,
.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link .kb-svg-icon-wrap svg,
.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link .kb-svg-icon-wrap svg,
:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) .kb-svg-icon-wrap svg {
	width: 1em !important;
	height: 1em !important;
}

/* ------------------------------------------------------------------
 * 4. Holzknopf: gemasertes Kastanienholz, dunkle Unterkante, Pfeil
 * ------------------------------------------------------------------ */

:is(.kb-button, .kt-button).ll-look-holzknopf,
.wp-block-button.ll-look-holzknopf > .wp-block-button__link,
.wp-block-button.is-style-ll-holzknopf > .wp-block-button__link,
:where(.ll-look-holzknopf) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) {
	padding-bottom: 3px !important; /* optische Mitte über der Unterkante */
	border-radius: 4px !important;
	background-color: var(--llk-hz-holz, #7f5f41) !important;
	background-image:
		linear-gradient(180deg, rgba(255, 244, 228, .12), rgba(255, 244, 228, 0) 42%, rgba(30, 18, 8, .1)),
		var(--llk-hz-licht, var(--ll-knopf-maser-licht)),
		var(--llk-hz-maser, var(--ll-knopf-maser)),
		var(--ll-rauschen) !important;
	background-position: 0 0, var(--llk-maser-pos, 0 0), var(--llk-maser-pos, 0 0), 0 0 !important;
	color: var(--llk-hz-schrift, #fffaf2) !important;
	box-shadow:
		inset 0 -3px 0 var(--llk-hz-kante, #4f3826),
		inset 0 1px 0 rgba(255, 244, 228, .16),
		var(--llk-hz-schatten, 0 1px 2px rgba(46, 35, 26, .2)) !important;
	transition: background-color .3s ease, box-shadow .2s ease, padding .2s ease !important;
}

:is(.kb-button, .kt-button).ll-look-holzknopf::after,
.wp-block-button.ll-look-holzknopf > .wp-block-button__link::after,
.wp-block-button.is-style-ll-holzknopf > .wp-block-button__link::after,
:where(.ll-look-holzknopf) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *))::after {
	content: "" !important;
	display: block !important;
	flex: none;
	width: 1.4em;
	height: .78em;
	margin: 0 -.1em 0 0 !important;
	position: relative;
	top: -1px; /* auf Höhe der Großbuchstaben */
	background: currentColor !important;
	-webkit-mask: var(--ll-knopf-pfeil) center / contain no-repeat;
	mask: var(--ll-knopf-pfeil) center / contain no-repeat;
	transition: translate .35s var(--ll-weich, ease) !important;
}

/* Hat der Knopf in Kadence schon ein Symbol, kommt kein zweiter Pfeil dazu */
:is(.kb-button, .kt-button).ll-look-holzknopf.kt-btn-has-svg-true::after,
.wp-block-button.ll-look-holzknopf > .wp-block-button__link.kt-btn-has-svg-true::after,
.wp-block-button.is-style-ll-holzknopf > .wp-block-button__link.kt-btn-has-svg-true::after,
:where(.ll-look-holzknopf) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)).kt-btn-has-svg-true::after {
	content: none !important;
	display: none !important;
}

:is(.kb-button, .kt-button).ll-look-holzknopf .kb-svg-icon-wrap,
.wp-block-button.ll-look-holzknopf > .wp-block-button__link .kb-svg-icon-wrap,
.wp-block-button.is-style-ll-holzknopf > .wp-block-button__link .kb-svg-icon-wrap,
:where(.ll-look-holzknopf) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) .kb-svg-icon-wrap {
	transition: translate .35s var(--ll-weich, ease) !important;
}

/* ------------------------------------------------------------------
 * 5. Stempel (B1): weißes Papier, Tintenrand, versetzter Holz-Schatten
 * ------------------------------------------------------------------ */

:is(.kb-button, .kt-button).ll-look-stempel,
.wp-block-button.ll-look-stempel > .wp-block-button__link,
.wp-block-button.is-style-ll-stempel > .wp-block-button__link,
:where(.ll-look-stempel) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) {
	border: 1.5px solid #2e231a !important;
	background-color: var(--llk-st-gesicht, #ffffff) !important;
	background-image: var(--ll-rauschen) !important;
	color: #2e231a !important;
	box-shadow: 5px 5px 0 var(--llk-st-schatten, #7f5f41) !important;
	margin-inline-end: 5px; /* Platz für den Schatten, damit der nächste Knopf nicht anstößt */
	transition: translate .18s ease, box-shadow .18s ease !important;
}

/* ------------------------------------------------------------------
 * 6. Brandholz (B4): dunkles, gemasertes Holz mit verbrannten Rändern
 * ------------------------------------------------------------------ */

:is(.kb-button, .kt-button).ll-look-brandholz,
.wp-block-button.ll-look-brandholz > .wp-block-button__link,
:where(.ll-look-brandholz) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) {
	border-radius: 3px !important;
	background-color: #4a3423 !important;
	background-image:
		radial-gradient(135% 175% at 50% 42%, transparent 46%, rgba(16, 9, 4, .62) 100%),
		var(--ll-knopf-maser-licht),
		var(--ll-knopf-maser),
		var(--ll-rauschen) !important;
	background-position: 0 0, var(--llk-maser-pos, 0 0), var(--llk-maser-pos, 0 0), 0 0 !important;
	color: #f8ecdc !important;
	box-shadow:
		inset 0 0 0 1px rgba(14, 7, 3, .55),
		inset 0 1px 0 rgba(255, 214, 170, .12),
		inset 0 -3px 0 rgba(0, 0, 0, .28),
		0 0 0 1px var(--llk-bh-rand, transparent),
		0 1px 2px rgba(46, 35, 26, .25) !important;
	transition: color .4s ease !important;
}

/* Auf Holz (Holzkarte) wäre Brandholz Holz auf Holz: tiefer verkohlt und
 * mit hellem Rand, damit der Knopf klar als Knopf zu sehen ist. */
:is(.ll-look-holzkarte, .ll-look-karte-holz) :is(.kb-button, .kt-button).ll-look-brandholz,
:is(.ll-look-holzkarte, .ll-look-karte-holz) .wp-block-button.ll-look-brandholz > .wp-block-button__link {
	background-color: #24170e !important;
	box-shadow:
		inset 0 0 0 1px rgba(14, 7, 3, .7),
		inset 0 1px 0 rgba(255, 214, 170, .14),
		inset 0 -3px 0 rgba(0, 0, 0, .35),
		0 0 0 1.5px rgba(220, 194, 159, .8),
		0 6px 14px -4px rgba(10, 6, 3, .55) !important;
}

/* Glut: warmes Licht von unten, erscheint beim Drüberfahren */
:is(.kb-button, .kt-button).ll-look-brandholz::after,
.wp-block-button.ll-look-brandholz > .wp-block-button__link::after,
:where(.ll-look-brandholz) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *))::after {
	content: "" !important;
	position: absolute !important;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(75% 95% at 50% 118%, rgba(232, 146, 70, .5), rgba(232, 146, 70, .12) 55%, transparent 78%) !important;
	opacity: 0;
	pointer-events: none;
	transition: opacity .45s ease !important;
}

/* ------------------------------------------------------------------
 * 7. Pfeil im Kreis (B2): ruhige Pille, rechts eine Scheibe mit Pfeil
 *    ::after ist die Scheibe, ::before der Pfeil darüber.
 * ------------------------------------------------------------------ */

:is(.kb-button, .kt-button).ll-look-kreis,
.wp-block-button.ll-look-kreis > .wp-block-button__link,
:where(.ll-look-kreis) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) {
	--llk-kreis: calc(var(--ll-knopf-h) - 12px);
	gap: 16px !important;
	padding: 0 5px 0 calc(24px + .06em) !important;
	border: 1px solid var(--llk-kr-rand, #d6c4aa) !important;
	border-radius: 999px !important;
	background-color: var(--llk-kr-gesicht, #ffffff) !important;
	color: var(--llk-kr-schrift, #2e231a) !important;
	transition: border-color .3s ease !important;
}

:is(.kb-button, .kt-button).ll-look-kreis .kb-svg-icon-wrap,
.wp-block-button.ll-look-kreis > .wp-block-button__link .kb-svg-icon-wrap,
:where(.ll-look-kreis) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) .kb-svg-icon-wrap {
	display: none !important;
}

:is(.kb-button, .kt-button).ll-look-kreis::after,
.wp-block-button.ll-look-kreis > .wp-block-button__link::after,
:where(.ll-look-kreis) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *))::after {
	content: "" !important;
	display: block !important;
	flex: none;
	width: var(--llk-kreis);
	height: var(--llk-kreis);
	border-radius: 50%;
	background: var(--llk-kr-scheibe, #efe6d8) !important;
	transition: background-color .3s ease !important;
}

:is(.kb-button, .kt-button).ll-look-kreis::before,
.wp-block-button.ll-look-kreis > .wp-block-button__link::before,
:where(.ll-look-kreis) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *))::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: auto !important;
	top: 50% !important;
	right: 5px !important;
	z-index: 1 !important;
	width: var(--llk-kreis) !important;
	height: var(--llk-kreis) !important;
	margin-top: calc(var(--llk-kreis) / -2);
	border-radius: 50%;
	opacity: 1 !important;
	background: var(--llk-kr-pfeil, #7f5f41) !important;
	-webkit-mask: var(--ll-knopf-pfeil-klein) 50% 50% / 17px 17px no-repeat;
	mask: var(--ll-knopf-pfeil-klein) 50% 50% / 17px 17px no-repeat;
	pointer-events: none;
	transition: background-color .3s ease !important;
}

/* ------------------------------------------------------------------
 * 8. Gezeichneter Unterstrich (B3): nur Schrift, Federstrich darunter.
 *    Gleicher 52-px-Kasten, damit die Schrift neben gefüllten Knöpfen
 *    auf einer Linie steht.
 * ------------------------------------------------------------------ */

:is(.kb-button, .kt-button).ll-look-strich,
.wp-block-button.ll-look-strich > .wp-block-button__link,
:where(.ll-look-strich) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) {
	/* Oben und unten so viel Luft, dass eine Zeile genau mittig sitzt; bei zwei Zeilen wächst der Kasten und der Strich bleibt darunter */
	padding: calc((var(--ll-knopf-h) - var(--ll-knopf-zeile) * 1em) / 2 - 1px) calc(2px - .06em) !important;
	padding-left: calc(2px + .06em) !important;
	color: var(--llk-sr-schrift, #5e4430) !important;
	text-shadow: var(--llk-sr-schatten, none) !important; /* auf Fotos etwas Halt für die helle Schrift */
	transition: color .3s ease !important;
}

:is(.kb-button, .kt-button).ll-look-strich::after,
.wp-block-button.ll-look-strich > .wp-block-button__link::after,
:where(.ll-look-strich) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *))::after {
	content: "" !important;
	position: absolute !important;
	left: 2px;
	right: 2px;
	bottom: 11px;
	height: 5px;
	background: var(--llk-sr-linie, #7f5f41) !important;
	-webkit-mask: var(--ll-knopf-strich) 0 0 / 100% 100% no-repeat;
	mask: var(--ll-knopf-strich) 0 0 / 100% 100% no-repeat;
	clip-path: inset(0 0 0 0);
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * 9. Preis-Anhänger (B5): Holzschild mit Spitze und Loch.
 *    Das Holz liegt auf ::before (mit clip-path und echtem Loch per Maske),
 *    der Knopf selbst bleibt rechteckig: so wird der Fokus-Rahmen nicht
 *    abgeschnitten.
 * ------------------------------------------------------------------ */

:is(.kb-button, .kt-button).ll-look-anhaenger,
.wp-block-button.ll-look-anhaenger > .wp-block-button__link,
.wp-block-button.is-style-ll-anhaenger > .wp-block-button__link,
:where(.ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) {
	padding: 0 calc(26px - .06em) 0 calc(38px + .06em) !important;
	overflow: visible !important;
	-webkit-clip-path: none !important;
	clip-path: none !important;
	color: #2e231a !important;
	filter: drop-shadow(0 1px 1.5px rgba(46, 35, 26, .3));
	transition: color .25s ease !important;
}

:is(.kb-button, .kt-button).ll-look-anhaenger::before,
.wp-block-button.ll-look-anhaenger > .wp-block-button__link::before,
.wp-block-button.is-style-ll-anhaenger > .wp-block-button__link::before,
:where(.ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *))::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	opacity: 1 !important;
	border-radius: 0 4px 4px 0 !important;
	background-color: #c4a07a !important;
	background-image:
		radial-gradient(circle at 21px 50%, rgba(78, 52, 30, .38) 0 5.6px, transparent 6.6px),
		linear-gradient(180deg, rgba(255, 248, 236, .18), rgba(255, 248, 236, 0) 45%, rgba(60, 38, 20, .08)),
		var(--ll-knopf-maser-sanft),
		var(--ll-rauschen) !important;
	background-position: 0 0, 0 0, var(--llk-maser-pos, 0 0), 0 0 !important;
	-webkit-clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
	clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
	-webkit-mask: radial-gradient(circle at 21px 50%, transparent 0 3.6px, #000 4.3px);
	mask: radial-gradient(circle at 21px 50%, transparent 0 3.6px, #000 4.3px);
	pointer-events: none;
	transition: background-color .25s ease !important;
}

/* ------------------------------------------------------------------
 * 10. Tastatur-Fokus: deutlicher Rahmen bei allen Looks
 * ------------------------------------------------------------------ */

:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger):focus-visible,
.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link:focus-visible,
.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link:focus-visible,
:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus-visible {
	outline: 2px solid var(--llk-fokus, #7f5f41) !important;
	outline-offset: 3px !important;
}

:is(.kb-button, .kt-button).ll-look-stempel:focus-visible,
.wp-block-button.ll-look-stempel > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-ll-stempel > .wp-block-button__link:focus-visible,
:where(.ll-look-stempel) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus-visible {
	outline-offset: 7px !important;
}

:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger):focus:not(:focus-visible),
.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link:focus:not(:focus-visible),
.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link:focus:not(:focus-visible),
:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus:not(:focus-visible) {
	outline: none !important;
}

/* Fokus zeigt denselben Zustand wie Drüberfahren (ohne Bewegung) */
:is(.kb-button, .kt-button).ll-look-holzknopf:focus-visible,
.wp-block-button.ll-look-holzknopf > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-ll-holzknopf > .wp-block-button__link:focus-visible,
:where(.ll-look-holzknopf) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus-visible { background-color: var(--llk-hz-holz-an, #6b4f36) !important; }
:is(.kb-button, .kt-button).ll-look-brandholz:focus-visible::after,
.wp-block-button.ll-look-brandholz > .wp-block-button__link:focus-visible::after,
:where(.ll-look-brandholz) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus-visible::after { opacity: 1; }
:is(.kb-button, .kt-button).ll-look-kreis:focus-visible,
.wp-block-button.ll-look-kreis > .wp-block-button__link:focus-visible,
:where(.ll-look-kreis) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus-visible { border-color: var(--llk-kr-rand-an, #b0926d) !important; }
:is(.kb-button, .kt-button).ll-look-kreis:focus-visible::after,
.wp-block-button.ll-look-kreis > .wp-block-button__link:focus-visible::after,
:where(.ll-look-kreis) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus-visible::after { background: var(--llk-kr-scheibe-an, #7f5f41) !important; }
:is(.kb-button, .kt-button).ll-look-kreis:focus-visible::before,
.wp-block-button.ll-look-kreis > .wp-block-button__link:focus-visible::before,
:where(.ll-look-kreis) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus-visible::before { background: var(--llk-kr-pfeil-an, #ffffff) !important; }
:is(.kb-button, .kt-button).ll-look-strich:focus-visible,
.wp-block-button.ll-look-strich > .wp-block-button__link:focus-visible,
:where(.ll-look-strich) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus-visible { color: var(--llk-sr-schrift-an, #3b2a1e) !important; }
:is(.kb-button, .kt-button).ll-look-anhaenger:focus-visible,
.wp-block-button.ll-look-anhaenger > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-ll-anhaenger > .wp-block-button__link:focus-visible,
:where(.ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus-visible { color: var(--llk-ah-schrift-an, #fffaf2) !important; }
:is(.kb-button, .kt-button).ll-look-anhaenger:focus-visible::before,
.wp-block-button.ll-look-anhaenger > .wp-block-button__link:focus-visible::before,
.wp-block-button.is-style-ll-anhaenger > .wp-block-button__link:focus-visible::before,
:where(.ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):focus-visible::before { background-color: var(--llk-ah-holz-an, #7f5f41) !important; }

/* ------------------------------------------------------------------
 * 11. Drüberfahren (nur mit Maus)
 * ------------------------------------------------------------------ */

@media (hover: hover) {
	:is(.kb-button, .kt-button).ll-look-holzknopf:hover,
	.wp-block-button.ll-look-holzknopf > .wp-block-button__link:hover,
	.wp-block-button.is-style-ll-holzknopf > .wp-block-button__link:hover,
	:where(.ll-look-holzknopf) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover {
		background-color: var(--llk-hz-holz-an, #6b4f36) !important;
	}

	:is(.kb-button, .kt-button).ll-look-holzknopf:hover::after,
	.wp-block-button.ll-look-holzknopf > .wp-block-button__link:hover::after,
	.wp-block-button.is-style-ll-holzknopf > .wp-block-button__link:hover::after,
	:where(.ll-look-holzknopf) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover::after,
	:is(.kb-button, .kt-button).ll-look-holzknopf:hover .kb-svg-icon-wrap.kt-btn-icon-side-right,
	.wp-block-button.ll-look-holzknopf > .wp-block-button__link:hover .kb-svg-icon-wrap.kt-btn-icon-side-right,
	.wp-block-button.is-style-ll-holzknopf > .wp-block-button__link:hover .kb-svg-icon-wrap.kt-btn-icon-side-right,
	:where(.ll-look-holzknopf) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover .kb-svg-icon-wrap.kt-btn-icon-side-right {
		translate: 4px 0;
	}

	:is(.kb-button, .kt-button).ll-look-stempel:hover,
	.wp-block-button.ll-look-stempel > .wp-block-button__link:hover,
	.wp-block-button.is-style-ll-stempel > .wp-block-button__link:hover,
	:where(.ll-look-stempel) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover {
		translate: 3px 3px;
		box-shadow: 2px 2px 0 var(--llk-st-schatten, #7f5f41) !important;
	}

	:is(.kb-button, .kt-button).ll-look-brandholz:hover,
	.wp-block-button.ll-look-brandholz > .wp-block-button__link:hover,
	:where(.ll-look-brandholz) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover {
		color: #fff5e8 !important;
	}

	:is(.kb-button, .kt-button).ll-look-brandholz:hover::after,
	.wp-block-button.ll-look-brandholz > .wp-block-button__link:hover::after,
	:where(.ll-look-brandholz) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover::after {
		opacity: 1;
	}

	:is(.kb-button, .kt-button).ll-look-kreis:hover,
	.wp-block-button.ll-look-kreis > .wp-block-button__link:hover,
	:where(.ll-look-kreis) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover {
		border-color: var(--llk-kr-rand-an, #b0926d) !important;
	}

	:is(.kb-button, .kt-button).ll-look-kreis:hover::after,
	.wp-block-button.ll-look-kreis > .wp-block-button__link:hover::after,
	:where(.ll-look-kreis) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover::after {
		background: var(--llk-kr-scheibe-an, #7f5f41) !important;
	}

	:is(.kb-button, .kt-button).ll-look-kreis:hover::before,
	.wp-block-button.ll-look-kreis > .wp-block-button__link:hover::before,
	:where(.ll-look-kreis) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover::before {
		background: var(--llk-kr-pfeil-an, #ffffff) !important;
		-webkit-animation: ll-knopf-pfeil .6s var(--ll-weich, ease) 1;
		animation: ll-knopf-pfeil .6s var(--ll-weich, ease) 1;
	}

	:is(.kb-button, .kt-button).ll-look-strich:hover,
	.wp-block-button.ll-look-strich > .wp-block-button__link:hover,
	:where(.ll-look-strich) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover {
		color: var(--llk-sr-schrift-an, #3b2a1e) !important;
	}

	:is(.kb-button, .kt-button).ll-look-strich:hover::after,
	.wp-block-button.ll-look-strich > .wp-block-button__link:hover::after,
	:where(.ll-look-strich) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover::after {
		animation: ll-knopf-strich .9s cubic-bezier(.6, 0, .25, 1) 1;
	}

	:is(.kb-button, .kt-button).ll-look-anhaenger:hover,
	.wp-block-button.ll-look-anhaenger > .wp-block-button__link:hover,
	.wp-block-button.is-style-ll-anhaenger > .wp-block-button__link:hover,
	:where(.ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover {
		color: var(--llk-ah-schrift-an, #fffaf2) !important;
	}

	:is(.kb-button, .kt-button).ll-look-anhaenger:hover::before,
	.wp-block-button.ll-look-anhaenger > .wp-block-button__link:hover::before,
	.wp-block-button.is-style-ll-anhaenger > .wp-block-button__link:hover::before,
	:where(.ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):hover::before {
		background-color: var(--llk-ah-holz-an, #7f5f41) !important;
	}
}

/* Drücken (auch am Handy), steht nach dem Drüberfahren, damit es gewinnt.
   Stempel: drückt sich ganz ein. Holzknopf: Kante wird schmal, die Schrift sinkt ein. */
:is(.kb-button, .kt-button).ll-look-stempel:active,
.wp-block-button.ll-look-stempel > .wp-block-button__link:active,
.wp-block-button.is-style-ll-stempel > .wp-block-button__link:active,
:where(.ll-look-stempel) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):active {
	translate: 5px 5px;
	box-shadow: 0 0 0 var(--llk-st-schatten, #7f5f41) !important;
}

:is(.kb-button, .kt-button).ll-look-holzknopf:active,
.wp-block-button.ll-look-holzknopf > .wp-block-button__link:active,
.wp-block-button.is-style-ll-holzknopf > .wp-block-button__link:active,
:where(.ll-look-holzknopf) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)):active {
	padding-top: 2px !important;
	padding-bottom: 1px !important;
	box-shadow:
		inset 0 -1px 0 var(--llk-hz-kante, #4f3826),
		inset 0 2px 3px rgba(30, 18, 8, .25) !important;
}

@keyframes ll-knopf-pfeil {
	0% { -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
	44% { -webkit-mask-position: calc(100% + 30px) 50%; mask-position: calc(100% + 30px) 50%; }
	45% { -webkit-mask-position: calc(0% - 30px) 50%; mask-position: calc(0% - 30px) 50%; }
	100% { -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
}

@keyframes ll-knopf-strich {
	0% { clip-path: inset(0 0 0 0); }
	36% { clip-path: inset(0 0 0 100%); }
	37% { clip-path: inset(0 100% 0 0); }
	100% { clip-path: inset(0 0 0 0); }
}

/* ------------------------------------------------------------------
 * 12. Weniger Bewegung: nichts verschiebt sich, nichts läuft
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger),
	.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link,
	.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link,
	:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)),
	:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger)::before,
	.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link::before,
	.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link::before,
	:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *))::before,
	:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger)::after,
	.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link::after,
	.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link::after,
	:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *))::after,
	:is(.kb-button, .kt-button):is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) .kb-svg-icon-wrap,
	.wp-block-button:is(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) > .wp-block-button__link .kb-svg-icon-wrap,
	.wp-block-button:is(.is-style-ll-holzknopf, .is-style-ll-stempel, .is-style-ll-anhaenger) > .wp-block-button__link .kb-svg-icon-wrap,
	:where(.ll-look-holzknopf, .ll-look-stempel, .ll-look-brandholz, .ll-look-kreis, .ll-look-strich, .ll-look-anhaenger) :is(:is(.kb-button, .kt-button), .wp-block-button__link):where(:not([class*="ll-look-"], .wp-block-button:is([class*="ll-look-"], [class*="is-style-ll-"]) > *)) .kb-svg-icon-wrap {
		transition: none !important;
		-webkit-animation: none !important;
		animation: none !important;
		translate: none !important;
	}
}

/* ------------------------------------------------------------------
 * 11. Kadence-Formulare: Senden-Knopf aus Holz, Häkchen und Fokus in
 *     Markenfarben (ohne eigene Auswahl, gilt für jedes Kadence-Formular)
 * ------------------------------------------------------------------ */

.kb-form .kb-forms-submit,
.kb-adv-form-submit-button {
	padding-bottom: 3px !important;
	border: 0 !important;
	border-radius: 4px !important;
	background-color: #7f5f41 !important;
	background-image:
		linear-gradient(180deg, rgba(255, 244, 228, .12), rgba(255, 244, 228, 0) 42%, rgba(30, 18, 8, .1)),
		var(--ll-knopf-maser-licht),
		var(--ll-knopf-maser),
		var(--ll-rauschen) !important;
	color: #fffaf2 !important;
	box-shadow:
		inset 0 -3px 0 #4f3826,
		inset 0 1px 0 rgba(255, 244, 228, .16),
		0 1px 2px rgba(46, 35, 26, .2) !important;
	transition: background-color .3s ease !important;
}

@media (hover: hover) {
	.kb-form .kb-forms-submit:hover,
	.kb-adv-form-submit-button:hover {
		background-color: #8b6a4a !important;
	}
}

.kb-form :is(.kb-forms-submit, input, textarea, select):focus-visible,
.kb-adv-form-submit-button:focus-visible {
	outline: 2px solid #5e4430 !important;
	outline-offset: 3px !important;
}

.kb-form input:is([type="checkbox"], [type="radio"]) {
	width: 20px;
	height: 20px;
	accent-color: #5e4430;
}

.kb-form .required {
	color: #7f5f41 !important;
}