/*
 * Landleben Gestaltung: Rustikal (v1.3)
 * R1 Zaunhöhe · R2 Holz altert · R3 Brandsiegel · R4 Papier-Flächen · R5 Zaunrechner im Stempel-Look
 */

/* ------------------------------------------------------------------
 * R1 Zaunhöhe zum Anfassen
 * ------------------------------------------------------------------ */

.ll-zaunhoehe {
	/* Richtet sich nach dem Platz, den es bekommt (auch in einer schmalen Spalte). */
	container-type: inline-size;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 18px;
	max-width: 560px;
	margin: 20px auto;
	text-align: left;
	color: var(--ll-tief, #3b2a1e);
}

.ll-zaunhoehe-titel {
	flex: 1 0 100%;
	margin: 0 0 -6px;
	font-family: var(--ll-f-hand);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--ll-braun);
}

.ll-zaunhoehe-bild { display: block; flex: 1 1 280px; min-width: 0; height: auto; }

.ll-zaunhoehe--weich .ll-zaunhoehe-latten,
.ll-zaunhoehe--weich .ll-zaunhoehe-riegel,
.ll-zaunhoehe--weich .ll-zaunhoehe-mass { transition: d .6s var(--ll-weich); }

.ll-zaunhoehe-zahl {
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	fill: var(--ll-braun);
}

.ll-zaunhoehe-mensch {
	font-family: var(--ll-f-hand);
	font-size: 18px;
	font-weight: 600;
	fill: var(--ll-braun);
}

.ll-zaunhoehe-wahl { display: grid; flex: 0 0 auto; gap: 8px; }

.ll-zaunhoehe-wahl button {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--ll-knopf-h, 52px); /* gleich hoch wie alle Knöpfe */
	padding: 0 16px;
	border: 1.5px solid var(--ll-tinte);
	border-radius: 0;
	background: var(--ll-papier);
	color: var(--ll-tinte);
	font-family: inherit;
	font-size: var(--ll-knopf-schrift, 14px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--ll-knopf-sperrung, .12em);
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s, color .2s, box-shadow .2s;
}

.ll-zaunhoehe-wahl button[aria-pressed="true"] {
	background: var(--ll-braun);
	border-color: var(--ll-braun);
	color: #fff;
	box-shadow: 4px 4px 0 var(--ll-holz);
}

.ll-zaunhoehe-wahl button:focus-visible { outline: 2px solid var(--ll-braun); outline-offset: 2px; }

.ll-zaunhoehe-hinweis { max-width: 18ch; font-size: 12px; line-height: 1.4; color: var(--ll-leise); }

/* In einer eigenen, einspaltigen Zeile darf die Zeichnung größer werden. */
.kt-has-1-columns .ll-zaunhoehe,
.ll-look-papier-hell > .kt-inside-inner-col > .ll-zaunhoehe { max-width: 680px; }

.ll-shop-zaunhoehe { max-width: 560px; margin: 0 auto 28px; }
.ll-shop-zaunhoehe .ll-zaunhoehe { margin-inline: auto; }

/* Schmal (Handy oder schmale Spalte): Knöpfe als Reihe unter der Zeichnung. */
@container (max-width: 460px) {
	.ll-zaunhoehe-wahl { flex: 1 0 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ll-zaunhoehe-wahl button { justify-content: center; padding: 0 8px; text-align: center; }
	.ll-zaunhoehe-hinweis { grid-column: 1 / -1; max-width: none; }
	/* Die Zeichnung wird kleiner: Beschriftung mitwachsen lassen, damit sie lesbar bleibt */
	.ll-zaunhoehe-zahl { font-size: 15px; }
	.ll-zaunhoehe-mensch { font-size: 22px; }
}

/* ------------------------------------------------------------------
 * R2 Holz altert: links frisch, rechts silbergrau (gerechnet oder zwei Fotos)
 * ------------------------------------------------------------------ */

.ll-alterung {
	position: relative;
	width: 100%;
	max-width: 620px;
	aspect-ratio: 3 / 2;
	margin: 16px 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--ll-linie);
	--ll-pos: 55%;
	touch-action: pan-y;
}

.ll-alterung img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.ll-alterung-alt { clip-path: inset(0 0 0 var(--ll-pos)); }
.ll-alterung:not(.ll-alterung--fotos) .ll-alterung-alt { filter: saturate(.15) brightness(1.08) contrast(.95); }

.ll-alterung-griff {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ll-pos);
	width: 2px;
	margin-left: -1px;
	background: #fff;
	pointer-events: none;
}

.ll-alterung-griff::after {
	content: "‹ ›";
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	translate: -50% -50%;
	border-radius: 50%;
	background: #fff;
	color: var(--ll-tief, #3b2a1e);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.ll-alterung input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: none;
}

.ll-alterung input[type="range"]:focus-visible + .ll-alterung-griff::after,
.ll-alterung:focus-within .ll-alterung-griff::after { outline: 2px solid var(--ll-braun); outline-offset: 2px; }

.ll-alterung-lab {
	position: absolute;
	top: 10px;
	padding: 3px 8px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .14em;
	text-transform: uppercase;
	pointer-events: none;
}

.ll-alterung-lab--links { left: 10px; }
.ll-alterung-lab--rechts { right: 10px; }

.ll-alterung-text { max-width: 620px; margin: 8px 0 0; font-size: 14px; color: var(--ll-leise); }

.ll-produkt-alterung { max-width: 620px; margin: 28px 0; }
.ll-produkt-alterung .ll-kick { margin-bottom: 4px; }

/* ------------------------------------------------------------------
 * R3 Brandsiegel
 * ------------------------------------------------------------------ */

.ll-siegel {
	display: inline-block;
	width: var(--ll-siegel-gr, 130px);
	max-width: 100%;
	height: auto;
	aspect-ratio: 1;
	color: var(--ll-tief, #3b2a1e);
	text-decoration: none;
	line-height: 0;
	mix-blend-mode: multiply;
}

.ll-siegel svg { width: 100%; height: 100%; overflow: visible; }

.ll-siegel-ring { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .9; }
.ll-siegel-ring--innen { stroke-dasharray: 3 3; }

.ll-siegel text {
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .18em;
	fill: currentColor;
}

.ll-siegel-mitte { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

.ll-siegel-dreh { transform-origin: 60px 60px; transition: rotate 1.2s var(--ll-weich); }

@media (hover: hover) {
	.ll-siegel:hover .ll-siegel-dreh { rotate: 40deg; }
}

/* Auf Bildern: wie in dunkles Holz gebrannt */
.ll-siegel-ecke {
	display: inline-block;
	margin: 6px 0 12px;
}

.ll-siegel-ecke.ist-angeheftet {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	margin: 0;
	pointer-events: none;
}

.ll-siegel-ecke.ist-angeheftet .ll-siegel {
	pointer-events: auto;
	color: #fff;
	mix-blend-mode: normal;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
	opacity: .92;
}

.woocommerce-product-gallery { position: relative; }

/* ------------------------------------------------------------------
 * R4 Papier statt grüner Verläufe
 * ------------------------------------------------------------------ */

.is-style-ll-papier.alignfull,
.is-style-ll-papier-holzkante.alignfull { border-radius: 0; }

/* Etwas genauer benannt, damit Theme-Regeln wie „.wp-block-group { padding: 0 }“ den Abstand nicht wegnehmen. */
.wp-block-group.is-style-ll-papier-holzkante,
.wp-block-column.is-style-ll-papier-holzkante,
.wp-block-columns.is-style-ll-papier-holzkante,
.is-style-ll-papier-holzkante {
	background-color: var(--ll-sanft, #efe6d8);
	background-image: var(--ll-rauschen);
	border-top: 8px solid var(--ll-holz);
	border-radius: 3px;
	padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
}

.wp-block-columns.is-style-ll-papier-holzkante { padding: clamp(20px, 3vw, 36px); }

/* Titelbild (Cover) als Papier: das Bild verschwindet, der Inhalt bleibt */
.wp-block-cover.is-style-ll-papier,
.wp-block-cover.is-style-ll-papier-holzkante {
	min-height: 0;
	color: var(--ll-tinte);
	background-color: var(--ll-sanft, #efe6d8) !important;
	background-image: var(--ll-rauschen);
}

.wp-block-cover.is-style-ll-papier-holzkante { border-top: 8px solid var(--ll-holz); }

.wp-block-cover.is-style-ll-papier .wp-block-cover__image-background,
.wp-block-cover.is-style-ll-papier .wp-block-cover__background,
.wp-block-cover.is-style-ll-papier-holzkante .wp-block-cover__image-background,
.wp-block-cover.is-style-ll-papier-holzkante .wp-block-cover__background { display: none; }

.wp-block-cover.is-style-ll-papier .wp-block-cover__inner-container,
.wp-block-cover.is-style-ll-papier-holzkante .wp-block-cover__inner-container { color: inherit; }

.wp-block-cover.is-style-ll-papier :where(h1, h2, h3, h4, p, li),
.wp-block-cover.is-style-ll-papier-holzkante :where(h1, h2, h3, h4, p, li) { color: inherit; }

/* ------------------------------------------------------------------
 * R5 Zaunrechner im Stempel-Look
 * ------------------------------------------------------------------ */

.ll-rechner {
	position: relative;
	border: 1.5px solid var(--ll-tinte) !important;
	border-radius: 0 !important;
	background-color: var(--ll-papier) !important;
	background-image: var(--ll-rauschen);
	box-shadow: 6px 6px 0 var(--ll-holz) !important;
}

.ll-rechner-kopf {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	text-align: left !important;
}

/* Zeichnung links: der gezeichnete Zaun */
.ll-rechner-kopf::before {
	content: "";
	grid-row: 1 / span 3;
	width: 44px;
	height: 44px;
	background: var(--ll-tinte);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 34V12l2-4 2 4v22M18 34V10l2-4 2 4v24M30 34V12l2-4 2 4v22M3 20h34M3 27h34'/%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 40 40' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 34V12l2-4 2 4v22M18 34V10l2-4 2 4v24M30 34V12l2-4 2 4v22M3 20h34M3 27h34'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ll-rechner-kopf > * { grid-column: 2; }
.ll-rechner-kopf .ll-shop-kicker { max-width: none; margin-inline: 0; justify-content: flex-start; }
.ll-rechner-kopf .ll-shop-kicker::before { display: none; }
.ll-rechner-kopf .ll-shop-kicker::after { flex: 0 0 40px; }
.ll-rechner-titel { font-family: var(--ll-f-titel); font-weight: 400; }

.ll-rechner-hoehe { margin: 6px 0 14px; }
.ll-rechner-hoehe .ll-zaunhoehe { max-width: none; margin: 0; }

.ll-rechner-ergebnis {
	border-top: 1px dotted var(--ll-linie);
	border-bottom: 1px dotted var(--ll-linie);
}

.ll-rechner-zahl strong { font-family: var(--ll-f-titel); font-weight: 400; }

/* Die Summe in Handschrift */
.ll-rechner-zahl--summe strong {
	font-family: var(--ll-f-hand) !important;
	font-size: clamp(30px, 4vw, 40px) !important;
	font-weight: 600 !important;
	color: #fff !important; /* steht auf braunem Grund, Braun wäre unsichtbar */
}

@media (min-width: 900px) {
	.ll-rechner-hoehe + .ll-rechner-felder { margin-top: 0; }
}

@media (max-width: 600px) {
	.ll-rechner { box-shadow: 4px 4px 0 var(--ll-holz) !important; }
	.ll-rechner-kopf { grid-template-columns: minmax(0, 1fr); }
	.ll-rechner-kopf::before { display: none; }
	.ll-rechner-kopf > * { grid-column: 1; }
}

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

@media (prefers-reduced-motion: reduce) {
	.ll-zaunhoehe-latten, .ll-zaunhoehe-riegel, .ll-zaunhoehe-mass { transition: none !important; }
	.ll-siegel-dreh { transition: none !important; }
	.ll-siegel:hover .ll-siegel-dreh { rotate: 0deg !important; }
}