/*
 * Landleben Gestaltung: Designer-Look (v1.2)
 * Kürzel aus dem Musterbuch stehen jeweils dabei.
 * Schriften liegen im Plugin (keine Verbindung zu Google, DSGVO-freundlich).
 */

@font-face {
	font-family: "Young Serif";
	src: url("../fonts/young-serif.woff2") format("woff2");
	/* Ein Schnitt für alle Stärken: so malt der Browser kein künstliches Fett. */
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Caveat";
	src: url("../fonts/caveat-600.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--ll-f-titel: "Young Serif", Georgia, "Times New Roman", serif;
	--ll-f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
	--ll-leise: #6f5f50;
	--ll-tinte: #2e231a;
}

/* ------------------------------------------------------------------
 * T2 Kicker mit Linien
 * ------------------------------------------------------------------ */

p.is-style-ll-kicker,
.ll-shop-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: .4em;
	color: var(--ll-braun);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .3em;
	text-transform: uppercase;
}

p.is-style-ll-kicker::before,
p.is-style-ll-kicker::after,
.ll-shop-kicker::before,
.ll-shop-kicker::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .5;
}

/* Linksbündig: nur eine Linie rechts, kurz. */
p.is-style-ll-kicker:not(.has-text-align-center):not(.has-text-align-right)::before { display: none; }
p.is-style-ll-kicker:not(.has-text-align-center):not(.has-text-align-right)::after { flex: 0 0 48px; }
p.is-style-ll-kicker.has-text-align-right::after { display: none; }

.ll-shop-kicker { justify-content: center; width: 100%; max-width: 420px; margin-inline: auto; }
.ll-shop-kopf--bild .ll-shop-kicker { color: rgba(255, 255, 255, .85); }

/* ------------------------------------------------------------------
 * T3 Handschrift
 * ------------------------------------------------------------------ */

p.is-style-ll-handschrift {
	font-family: var(--ll-f-hand);
	font-size: 1.6em;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ll-braun);
	rotate: -2deg;
}

/* Bild mit Handschrift-Notiz: die Bildunterschrift steht als Notiz am Bild. */
.wp-block-image.is-style-ll-notiz {
	position: relative;
	padding-bottom: 22px;
}

.wp-block-image.is-style-ll-notiz figcaption {
	position: absolute;
	right: -6px;
	bottom: 0;
	max-width: 80%;
	margin: 0;
	padding: 2px 12px;
	background: var(--ll-papier);
	color: var(--ll-braun);
	font-family: var(--ll-f-hand);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 600;
	line-height: 1.1;
	text-align: right;
	rotate: -4deg;
}

.wp-block-image.is-style-ll-notiz figcaption::before {
	content: "";
	position: absolute;
	left: -38px;
	top: -30px;
	width: 40px;
	height: 36px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 40' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M44 36C30 34 14 26 6 6'/%3E%3Cpath d='M2 12 6 5l7 3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 40' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M44 36C30 34 14 26 6 6'/%3E%3Cpath d='M2 12 6 5l7 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------------------------
 * T4 Große Zahlen
 * ------------------------------------------------------------------ */

.is-style-ll-zahl,
.is-style-ll-zahl-voll {
	margin-bottom: .1em;
	font-family: var(--ll-f-titel) !important;
	font-size: clamp(56px, 9vw, 104px) !important;
	font-weight: 400 !important;
	line-height: .95 !important;
	font-variant-numeric: lining-nums;
}

.is-style-ll-zahl {
	color: transparent !important;
	-webkit-text-stroke: 1.5px var(--ll-braun);
}

.is-style-ll-zahl-voll { color: var(--ll-braun); }

.ll-zahl-text {
	margin-top: 0;
	color: var(--ll-leise);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------
 * B1 Stempel und B5 Preis-Anhänger (Buttons im Editor)
 * ------------------------------------------------------------------ */

.wp-block-button.is-style-ll-stempel .wp-block-button__link {
	padding: 15px 26px;
	border: 1.5px solid var(--ll-tinte);
	border-radius: 0;
	background: #fff;
	color: var(--ll-tinte);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	box-shadow: 5px 5px 0 var(--ll-braun);
	transition: translate .18s, box-shadow .18s;
}

.wp-block-button.is-style-ll-anhaenger .wp-block-button__link {
	position: relative;
	padding: 13px 22px 13px 36px;
	border: 0;
	border-radius: 0;
	background: var(--ll-holz);
	color: var(--ll-tinte);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
	transition: background-color .2s, color .2s;
}

.wp-block-button.is-style-ll-anhaenger .wp-block-button__link::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--ll-papier);
}

@media (hover: hover) {
	.wp-block-button.is-style-ll-stempel .wp-block-button__link:hover {
		translate: 3px 3px;
		box-shadow: 2px 2px 0 var(--ll-braun);
	}

	.wp-block-button.is-style-ll-anhaenger .wp-block-button__link:hover {
		background: var(--ll-braun);
		color: #fff;
	}
}

.wp-block-button.is-style-ll-stempel .wp-block-button__link:active {
	translate: 5px 5px;
	box-shadow: 0 0 0 var(--ll-braun);
}

/* ------------------------------------------------------------------
 * B1 / B5 auch im Shop (Einstellung "Shop-Knöpfe im Landleben-Look")
 * Haupt-Knöpfe: Stempel. Knöpfe auf Produktkarten: Anhänger.
 * ------------------------------------------------------------------ */

body.ll-shop-knoepfe .single_add_to_cart_button,
body.ll-shop-knoepfe .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.ll-shop-knoepfe #place_order,
body.ll-shop-knoepfe .wc-block-cart__submit-button,
body.ll-shop-knoepfe .wc-block-components-checkout-place-order-button,
body.ll-shop-knoepfe .button.ll-anfrage-knopf,
body.ll-shop-knoepfe .ll-rechner .button.ll-rechner-knopf,
body.ll-shop-knoepfe .ll-kaufleiste .button {
	/* gleiche Maße wie alle anderen Knöpfe (Tokens aus look-knopf.css) */
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: var(--ll-knopf-h, 52px) !important;
	padding: 0 var(--ll-knopf-innen, 28px) !important;
	font-size: var(--ll-knopf-schrift, 14px) !important;
	line-height: var(--ll-knopf-zeile, 1.2) !important;
	border: 1.5px solid var(--ll-tinte) !important;
	border-radius: 0 !important;
	background: #fff !important;
	background-image: none !important;
	color: var(--ll-tinte) !important;
	font-weight: 800 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	box-shadow: 5px 5px 0 var(--ll-braun) !important;
	transition: translate .18s, box-shadow .18s !important;
}

body.ll-shop-knoepfe .ll-kaufleiste .button {
	min-height: 44px !important;
	padding: 0 18px !important;
	font-size: 13px !important;
	box-shadow: 3px 3px 0 var(--ll-braun) !important;
}

@media (hover: hover) {
	body.ll-shop-knoepfe .single_add_to_cart_button:hover:not(:disabled):not(.disabled),
	body.ll-shop-knoepfe .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
	body.ll-shop-knoepfe #place_order:hover,
	body.ll-shop-knoepfe .wc-block-cart__submit-button:hover,
	body.ll-shop-knoepfe .wc-block-components-checkout-place-order-button:hover,
	body.ll-shop-knoepfe .button.ll-anfrage-knopf:hover,
	body.ll-shop-knoepfe .ll-rechner .button.ll-rechner-knopf:hover:not(:disabled) {
		translate: 3px 3px;
		box-shadow: 2px 2px 0 var(--ll-braun) !important;
	}
}

body.ll-shop-knoepfe .single_add_to_cart_button:is(:disabled, .disabled),
body.ll-shop-knoepfe .ll-rechner .button.ll-rechner-knopf:disabled {
	opacity: .45 !important;
	box-shadow: none !important;
}

/* Produktkarten: Knopf als Holz-Anhänger */
body.ll-shop-knoepfe ul.products li.product .button,
body.ll-shop-knoepfe .wc-block-grid__product .wp-block-button__link,
body.ll-shop-knoepfe .wc-block-components-product-button .wp-block-button__link {
	position: relative;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	min-height: 44px !important;
	padding: 0 18px 0 32px !important;
	line-height: 1.2 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--ll-holz) !important;
	background-image: none !important;
	color: var(--ll-tinte) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
	transition: background-color .2s, color .2s !important;
}

body.ll-shop-knoepfe ul.products li.product .button::before,
body.ll-shop-knoepfe .wc-block-grid__product .wp-block-button__link::before,
body.ll-shop-knoepfe .wc-block-components-product-button .wp-block-button__link::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--ll-papier);
}

@media (hover: hover) {
	body.ll-shop-knoepfe ul.products li.product .button:hover,
	body.ll-shop-knoepfe .wc-block-grid__product .wp-block-button__link:hover,
	body.ll-shop-knoepfe .wc-block-components-product-button .wp-block-button__link:hover {
		background: var(--ll-braun) !important;
		color: #fff !important;
	}
}

/* ------------------------------------------------------------------
 * I1 Bogen-Fenster
 * ------------------------------------------------------------------ */

.wp-block-image.is-style-ll-bogen img {
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: cover;
	border-radius: 999px 999px 0 0;
}

/* ------------------------------------------------------------------
 * I2 Foto-Collage (Galerie)
 * ------------------------------------------------------------------ */

.wp-block-gallery.is-style-ll-collage {
	padding: 12px 6px 18px;
}

.wp-block-gallery.is-style-ll-collage figure.wp-block-image {
	position: relative;
	padding: 8px 8px 30px;
	background: #fff;
	box-shadow: 0 14px 28px -14px rgba(46, 35, 26, .55), 0 1px 3px rgba(46, 35, 26, .12);
	rotate: -3deg;
	transition: rotate .4s var(--ll-weich), scale .4s var(--ll-weich);
}

.wp-block-gallery.is-style-ll-collage figure.wp-block-image:nth-child(3n+2) { rotate: 2.5deg; translate: 0 -8px; }
.wp-block-gallery.is-style-ll-collage figure.wp-block-image:nth-child(3n) { rotate: -1.5deg; translate: 0 10px; }

.wp-block-gallery.is-style-ll-collage figure.wp-block-image img {
	border-radius: 0;
}

/* Bildunterschrift als Handschrift unter dem Foto statt als dunkler Verlauf */
.wp-block-gallery.is-style-ll-collage figure.wp-block-image figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	max-height: none;
	margin: 0;
	padding: 0 8px;
	overflow: hidden;
	background: none !important;
	color: #5c4330 !important;
	font-family: var(--ll-f-hand);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-shadow: none;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wp-block-gallery.is-style-ll-collage figure.wp-block-image::before { display: none !important; }

@media (hover: hover) {
	.wp-block-gallery.is-style-ll-collage figure.wp-block-image:hover {
		z-index: 2;
		rotate: 0deg;
		scale: 1.04;
	}
}

/* ------------------------------------------------------------------
 * I3 Maßlinie unter dem Bild (die Bildunterschrift ist das Maß)
 * ------------------------------------------------------------------ */

.wp-block-image.is-style-ll-masslinie figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	color: var(--ll-braun);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
}

.wp-block-image.is-style-ll-masslinie figcaption::before,
.wp-block-image.is-style-ll-masslinie figcaption::after {
	content: "";
	flex: 1;
	min-width: 24px;
	height: 12px;
	background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

.wp-block-image.is-style-ll-masslinie figcaption::before { border-left: 1px solid currentColor; }
.wp-block-image.is-style-ll-masslinie figcaption::after { border-right: 1px solid currentColor; }

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

hr.wp-block-separator.is-style-ll-zaun-skizze {
	width: 340px !important;
	max-width: 100%;
	height: 64px;
	margin-left: auto;
	margin-right: auto;
	border: 0 !important;
	background: currentColor !important;
	color: var(--ll-dunkel);
	opacity: .85;
	-webkit-mask: url("../img/zaun-skizze.svg") center / contain no-repeat;
	mask: url("../img/zaun-skizze.svg") center / contain no-repeat;
}

hr.wp-block-separator.is-style-ll-zaun-skizze.has-text-color { opacity: 1; }

/* ------------------------------------------------------------------
 * D4 Laufband
 * Ohne JavaScript steht die Zeile still. Das Skript verdoppelt den Text
 * und lässt ihn langsam laufen (nicht bei "Bewegung reduzieren").
 * ------------------------------------------------------------------ */

p.is-style-ll-laufband {
	position: relative;
	margin-left: 0;
	margin-right: 0;
	padding: 12px 0;
	overflow: hidden;
	border-block: 1px solid var(--ll-braun);
	color: var(--ll-braun);
	font-family: var(--ll-f-titel);
	font-size: clamp(17px, 1.8vw, 21px);
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}

p.is-style-ll-laufband.ll-laufband-an {
	text-overflow: clip;
	text-align: left;
}

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

.ll-laufband-band > span { padding-right: 1.4em; }

/* Text für Vorleseprogramme (unsichtbar) */
.ll-nur-vorlesen {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

p.is-style-ll-laufband:hover .ll-laufband-band { animation-play-state: paused; }

@keyframes ll-laufband {
	to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------
 * W1 Holz-Steckbrief (Gruppe) und Produkt-Eigenschaften im Shop
 * ------------------------------------------------------------------ */

.is-style-ll-steckbrief {
	max-width: 420px;
	padding: 22px 22px 14px !important;
	border: 1px solid var(--ll-tinte);
	background: #fff;
	color: var(--ll-tinte);
	box-shadow: 6px 6px 0 var(--ll-holz);
}

.is-style-ll-steckbrief > * { max-width: none !important; }

.is-style-ll-steckbrief .ll-steckbrief-kicker {
	margin: 0;
	color: var(--ll-braun);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .26em;
	text-transform: uppercase;
}

.is-style-ll-steckbrief :is(h2, h3, h4) {
	margin: 4px 0 12px !important;
	padding-bottom: 12px;
	border-bottom: 3px double var(--ll-tinte);
	font-size: 26px;
	line-height: 1.15;
}

.is-style-ll-steckbrief .wp-block-table { margin: 0; }

.is-style-ll-steckbrief .wp-block-table table,
.ll-steckbrief-attribute .woocommerce-product-attributes {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.is-style-ll-steckbrief .wp-block-table :is(td, th),
.ll-steckbrief-attribute .woocommerce-product-attributes :is(td, th) {
	padding: 7px 0 !important;
	border: 0 !important;
	border-bottom: 1px dotted var(--ll-linie) !important;
	background: none !important;
	vertical-align: top;
}

.is-style-ll-steckbrief .wp-block-table td:first-child,
.ll-steckbrief-attribute .woocommerce-product-attributes th {
	padding-right: 18px !important;
	color: var(--ll-leise);
	font-weight: 400;
	text-align: left;
}

.is-style-ll-steckbrief .wp-block-table td:last-child,
.ll-steckbrief-attribute .woocommerce-product-attributes td {
	font-weight: 700;
	font-style: normal;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.is-style-ll-steckbrief .wp-block-table tr:last-child td { border-bottom: 0 !important; }

.ll-steckbrief-attribute .woocommerce-product-attributes td p { margin: 0; }

.ll-steckbrief-attribute .woocommerce-product-attributes {
	max-width: 520px;
	margin: 6px 0 12px !important;
	border: 1px solid var(--ll-tinte) !important;
	border-top-width: 4px !important;
	border-top-style: double !important;
	background: #fff;
	box-shadow: 6px 6px 0 var(--ll-holz);
}

.ll-steckbrief-attribute .woocommerce-product-attributes :is(td, th) { padding: 9px 18px !important; }
.ll-steckbrief-attribute .woocommerce-product-attributes tr:last-child :is(td, th) { border-bottom: 0 !important; }

/* ------------------------------------------------------------------
 * W3 Ladenschild mit Öffnungszeiten
 * ------------------------------------------------------------------ */

.ll-ladenschild {
	position: relative;
	max-width: 360px;
	margin: 30px auto 24px;
	padding: 26px 26px 18px;
	border-radius: 4px;
	background-color: #3d2b1d;
	background-image:
		var(--ll-rauschen),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 11px);
	color: #f6eadb;
	box-shadow: 0 20px 34px -22px rgba(0, 0, 0, .8);
}

/* zwei Seile, an denen das Schild hängt */
.ll-ladenschild::before,
.ll-ladenschild::after {
	content: "";
	position: absolute;
	top: -26px;
	width: 2px;
	height: 26px;
	background: #8a7968;
}

.ll-ladenschild::before { left: 26%; }
.ll-ladenschild::after { right: 26%; }

.ll-ladenschild p { margin: 0; }

.ll-laden-titel {
	font-family: var(--ll-f-titel);
	font-size: 24px;
	line-height: 1.2;
	text-align: center;
	color: #f6eadb;
}

.ll-laden-status {
	margin-bottom: 14px !important;
	font-family: var(--ll-f-hand);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: #e5c49c;
}

ul.ll-laden-zeiten {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

ul.ll-laden-zeiten li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px dashed rgba(246, 234, 219, .2);
	font-variant-numeric: tabular-nums;
}

ul.ll-laden-zeiten li:last-child { border-bottom: 0; }
ul.ll-laden-zeiten li span:last-child { text-align: right; }

ul.ll-laden-zeiten li.ist-heute {
	color: #ffd9a8;
	font-weight: 800;
}

ul.ll-laden-zeiten li.ist-heute span:first-child::after {
	content: " · heute";
	font-size: 12px;
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * W4 Caro berät dich
 * ------------------------------------------------------------------ */

.ll-beratung {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	max-width: 460px;
	margin: 22px auto;
	text-align: left;
}

.ll-beratung--ohne-bild { grid-template-columns: minmax(0, 1fr); }

.ll-beratung img {
	width: 96px;
	height: 124px;
	object-fit: cover;
	border-radius: 999px 999px 0 0;
	filter: grayscale(1) contrast(1.05);
}

.ll-beratung-text p { margin: 4px 0 8px; color: var(--ll-leise); font-size: 14px; line-height: 1.5; }

.ll-beratung-text p.ll-beratung-name {
	margin: 0;
	color: var(--ll-braun);
	font-family: var(--ll-f-hand);
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
}

.ll-beratung-tel {
	position: relative;
	color: var(--ll-tinte) !important;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	border-bottom: 1.5px solid var(--ll-holz);
}

/* Größere Fläche zum Antippen, ohne das Bild zu verändern */
.ll-beratung-tel::before {
	content: "";
	position: absolute;
	inset: -12px -10px;
}

/* ------------------------------------------------------------------
 * Handy
 * ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.wp-block-image.is-style-ll-notiz figcaption { right: 0; }
	.wp-block-image.is-style-ll-notiz figcaption::before { display: none; }
	.is-style-ll-steckbrief { box-shadow: 4px 4px 0 var(--ll-holz); }
	.ll-steckbrief-attribute .woocommerce-product-attributes { box-shadow: 4px 4px 0 var(--ll-holz); }
	.ll-steckbrief-attribute .woocommerce-product-attributes :is(td, th) { padding: 8px 12px !important; }
}

/* ------------------------------------------------------------------
 * Bewegung reduzieren
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.ll-laufband-band { animation: none !important; }
	.wp-block-gallery.is-style-ll-collage figure.wp-block-image,
	.wp-block-button.is-style-ll-stempel .wp-block-button__link,
	body.ll-shop-knoepfe .button { transition: none !important; }
	.wp-block-gallery.is-style-ll-collage figure.wp-block-image:hover { scale: 1 !important; }
}