/* =========================================================================
   LADUTI „Kauf 4, zahl 3“ L1 (body.ldc-pack) – Einstieg: assets/ldc-pdp10.css; gemeinsame Bausteine: ldc-shampoo.css.
   Eigen: „Vier Packungen. Drei bezahlt.“ (vier Kacheln + Rechnung aus echten Preisen) und die Zeitachse als dunkles Band.
   Farben: Weiß, #f5f5f7, Schwarz/Grau; Blau nur für Kaufhandlungen.
   ========================================================================= */
body.ldc-pack {
	--lq-tile: #f5f5f7;
	--lp-tile: #f5f5f7;
}

body.ldc-pack .ldc8-slide {
	background: var(--lq-tile);
}

/* Bild mit acht Flaschen: Ausschnitt am Boden ausrichten (Etiketten bleiben frei) */
@media (max-width: 767.98px) {
	body.ldc-pack .ldc8-slide--img .ldc4-slide__img {
		object-position: 50% 70%;
	}
}

body.ldc-pack .ldc5-acc__body .woocommerce-Reviews-title,
body.ldc-pack .laduti-urgency {
	display: none !important; /* Zählung aus dem Bestand bzw. Snippet 103: hier nicht anzeigen, beides unverändert */
}

.ldcq [hidden] {
	display: none !important;
}

.ldcq-row {
	border-bottom: 0;
}

.ldcq-row__amt {
	font-size: 13px;
	white-space: nowrap;
	color: var(--ldc-ink-2);
}

/* ---------- Das Angebot: vier Packungen, die vierte gratis ---------- */
.ldcq-offer {
	padding: var(--ldc-sec, 64px) var(--ldc-gutter, 20px);
	background: var(--lq-tile);
}

.ldcq-offer__in {
	display: grid;
	gap: 26px;
	max-width: 1180px;
	margin: 0 auto;
}

.ldcq-offer .ldc-eyebrow {
	margin: 0 0 10px;
}

.ldcq-offer .ldc-h2 {
	margin: 0;
}

.ldcq-packs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ldcq .ldcq-pack {
	display: grid;
	align-content: space-between;
	gap: 14px;
	min-height: 150px;
	margin: 0;
	padding: 12px 10px 12px;
	border: 0;
	border-radius: 18px;
	background: #fff;
	color: var(--ldc-ink);
}

.ldcq .ldcq-pack.is-free {
	background: var(--ldc-ink);
	color: #fff;
}

.ldcq-pack__n {
	font-size: 44px;
	line-height: 0.85;
	letter-spacing: -0.06em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.ldcq-pack__t {
	font-size: 11px;
	line-height: 1.3;
	color: var(--ldc-ink-3);
}

.ldcq-pack.is-free .ldcq-pack__t {
	color: rgba(255, 255, 255, 0.62);
}

.ldcq-pack__p {
	font-size: 12.5px;
	line-height: 1.1;
	font-weight: 650;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ldcq-pack__p strong {
	font-weight: 750;
}

.ldcq-bill {
	display: grid;
	gap: 0;
}

.ldcq-bill p {
	margin: 0;
}

.ldcq-bill__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-top: 1px solid rgba(18, 18, 18, 0.1);
	font-size: 15px;
	line-height: 1.3;
	color: var(--ldc-ink-2);
}

.ldcq-bill__row del {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-decoration-thickness: 1px;
	color: var(--ldc-ink-3);
}

.ldcq-bill__row--now {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ldc-ink);
}

.ldcq-bill__row--now strong {
	font-size: 28px;
	line-height: 1;
	letter-spacing: -0.035em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ldcq-bill .ldcq-bill__atc {
	margin-top: 10px;
}

.ldcq-bill .ldcq-bill__atc .ldc-atc__btn,
.ldcq-bill .ldcq-bill__atc button {
	width: 100%;
}

/* ---------- Zeitachse ---------- */
.ldcq-time {
	padding: 60px var(--ldc-gutter, 20px);
	background: #141414;
	color: #f5f5f7;
}

.ldcq-time__in {
	max-width: 1180px;
	margin: 0 auto;
}

.ldcq-time .ldc-eyebrow {
	margin: 0 0 10px;
	color: rgba(245, 245, 247, 0.55);
}

.ldcq-time .ldc-h2 {
	margin: 0;
	color: #f5f5f7;
}

.ldcq-time .ldc-lead {
	max-width: 30em;
	margin: 14px 0 0;
	color: rgba(245, 245, 247, 0.7);
}

.ldcq-line {
	position: relative;
	display: grid;
	gap: 30px;
	margin: 36px 0 0;
	padding: 0 0 0 30px;
	list-style: none;
}

/* Linie: mobil senkrecht, ab 1000 px waagerecht; wächst einmal beim Sichtbarwerden */
.ldcq-line::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 6px;
	width: 2px;
	border-radius: 1px;
	background: linear-gradient(180deg, #f5f5f7, rgba(245, 245, 247, 0.25));
	transform-origin: 50% 0;
}

.ldcq .ldcq-line li {
	position: relative;
	display: grid;
	gap: 5px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 15px;
	line-height: 1.45;
	color: rgba(245, 245, 247, 0.7);
}

.ldcq-line li::before {
	content: "";
	position: absolute;
	top: 3px;
	left: -30px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #f5f5f7;
	box-shadow: 0 0 0 5px #141414;
}

.ldcq-line__k {
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.045em;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #f5f5f7;
}

.ldcq-line strong {
	margin-top: 4px;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: #f5f5f7;
}

.ldcq-line li > span:last-child {
	max-width: 24em;
}

.ldcq-time__note {
	margin: 30px 0 0;
	font-size: 12.5px;
	color: rgba(245, 245, 247, 0.45);
}

/* ---------- Bewegung: einmalig beim Sichtbarwerden, nur wenn das Skript die Sektion „scharf“ gestellt hat ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ldcq-offer.is-armed .ldcq-pack {
		opacity: 0;
		transform: translateY(14px) scale(0.96);
		transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15);
		transition-delay: calc(var(--i) * 110ms);
	}

	.ldcq-offer.is-armed .ldcq-pack.is-free {
		transition-delay: 620ms;
		transition-duration: 0.6s, 0.75s;
	}

	.ldcq-offer.is-armed .ldcq-bill {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 0.6s ease 1s, transform 0.6s ease 1s;
	}

	.ldcq-offer.is-armed.is-in .ldcq-pack,
	.ldcq-offer.is-armed.is-in .ldcq-bill {
		opacity: 1;
		transform: none;
	}

	.ldcq-time.is-armed .ldcq-line::before {
		transform: scaleY(0);
		transition: transform 1.6s cubic-bezier(0.3, 0.7, 0.2, 1) 0.2s;
	}

	.ldcq-time.is-armed .ldcq-line li {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.6s ease, transform 0.6s ease;
		transition-delay: calc(0.25s + var(--i) * 0.5s);
	}

	.ldcq-time.is-armed .ldcq-line li::before {
		transform: scale(0.2);
		transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3);
		transition-delay: calc(0.25s + var(--i) * 0.5s);
	}

	.ldcq-time.is-armed.is-in .ldcq-line::before,
	.ldcq-time.is-armed.is-in .ldcq-line li,
	.ldcq-time.is-armed.is-in .ldcq-line li::before {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 690px) {
	.ldcq-packs {
		gap: 14px;
	}

	.ldcq .ldcq-pack {
		min-height: 200px;
		padding: 18px 18px 16px;
		border-radius: 24px;
	}

	.ldcq-pack__n {
		font-size: 72px;
	}

	.ldcq-pack__t {
		font-size: 13.5px;
	}

	.ldcq-pack__p {
		font-size: 16px;
	}

	.ldcq-bill .ldcq-bill__atc .ldc-atc__btn,
	.ldcq-bill .ldcq-bill__atc button {
		width: auto;
	}
}

@media (min-width: 1000px) {
	.ldcq-offer__in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
		grid-template-areas: "head packs" "bill packs";
		gap: 30px 64px;
		align-items: start;
	}

	.ldcq-offer__head {
		grid-area: head;
	}

	.ldcq-packs {
		grid-area: packs;
		align-self: stretch;
	}

	.ldcq .ldcq-pack {
		min-height: 236px;
	}

	.ldcq-pack__n {
		font-size: 96px;
	}

	.ldcq-bill {
		grid-area: bill;
		align-self: end;
	}

	.ldcq-time {
		padding: 96px var(--ldc-gutter, 20px);
	}

	.ldcq-line {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px;
		margin-top: 60px;
		padding: 34px 0 0;
	}

	.ldcq-line::before {
		top: 6px;
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: 2px;
		background: linear-gradient(90deg, #f5f5f7, rgba(245, 245, 247, 0.25));
		transform-origin: 0 50%;
	}

	.ldcq-line li::before {
		top: -34px;
		left: 0;
	}

	.ldcq-line__k {
		font-size: 44px;
	}

	.ldcq-line strong {
		font-size: 20px;
	}

	.ldcq .ldcq-line li {
		font-size: 16px;
	}
}

@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
	.ldcq-time.is-armed .ldcq-line::before {
		transform: scaleX(0);
	}
}

/* =========================================================================
   L2 (body.ldc-pack2): neue Produktinszenierung. Hauptbild = eine Packung mit viel Ruhe, „4 ד als echte Schrift
   auf dem Bild (scharf in jeder Größe); Lieferumfang = dieselbe Packung viermal als ruhiges Raster.
   ========================================================================= */
.ldcq2-x {
	position: absolute;
	top: 14px;
	left: var(--ldc-gutter, 20px);
	z-index: 1;
	display: grid;
	gap: 6px;
	margin: 0;
	pointer-events: none;
	color: var(--ldc-ink);
}

.ldcq2-x strong {
	font-size: clamp(84px, 25vw, 112px);
	line-height: 0.82;
	letter-spacing: -0.07em;
	font-weight: 800;
}

.ldcq2-x i {
	margin-left: 0.04em;
	font-style: normal;
	font-weight: 700;
}

.ldcq2-x span {
	padding-left: 3px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--ldc-ink-2);
}

@media (max-width: 767.98px) {
	/* Hauptbild am Boden ausrichten (Packung ganz, Luft oben für die Schrift); Raster vollständig zeigen */
	body.ldc-pack2 .ldcq-s0 .ldc4-slide__img {
		object-position: 50% 100%;
	}

	body.ldc-pack2 .ldcq-s2 .ldc4-slide__img {
		object-fit: contain;
	}

	body.ldc-pack2 .ldc8 .ldc8-slide {
		aspect-ratio: 1 / 0.8;
	}
}

body.ldc-pack2 .ldc8-slide {
	background: #f5f5f7;
}

body.ldc-pack2 .ldcp-final .ldcp-split__media {
	background: #f5f5f7;
}

@media (min-width: 768px) {
	.ldcq2-x {
		top: 30px;
		left: 34px;
		gap: 10px;
	}

	.ldcq2-x strong {
		font-size: clamp(150px, 15vw, 216px);
	}

	.ldcq2-x span {
		font-size: 14.5px;
	}
}

@media (max-width: 374.98px) {
	body.ldc-pack2 .ldc8 .ldc8-slide {
		aspect-ratio: 1 / 0.76;
	}
}

/* =========================================================================
   L3 (body.ldc-pack3): Produktfotografie statt Grafik. Hauptbild und Lieferumfang sind Aufnahmen mit eigenem Licht;
   die Flächenfarbe folgt dem Foto, die Ausschnitte der L2-Motive gelten hier nicht.
   ========================================================================= */
body.ldc-pack3 .ldc8-slide,
body.ldc-pack3 .ldcp-final .ldcp-split__media {
	background: #e9e7e3;
}

@media (max-width: 767.98px) {
	body.ldc-pack3 .ldcq-s0 .ldc4-slide__img {
		object-position: 50% 74%;
	}

	body.ldc-pack3 .ldcq-s2 .ldc4-slide__img {
		object-fit: cover;
		object-position: 50% 66%;
	}
}

body.ldc-pack3 .ldcp-final .ldcp-split__media img {
	object-position: 50% 70%;
}

/* =========================================================================
   L4 (body.ldc-pack4) = L3 mit den drei finalen Bildern des Nutzers. Nur Bildflächen: Reihenfolge der Galerie ist
   Hauptbild, Tropfen, Fall, Lieferumfang, Fall, Flasche; deshalb gelten die L3-Ausschnitte je Bild neu.
   Bilder werden nie verzerrt: Hauptbild als Ausschnitt, Tropfen-Motiv mobil vollständig, Abschluss im Originalformat.
   ========================================================================= */
body.ldc-pack4 .ldc8 .ldc8-slide,
body.ldc-pack4 .ldc8 .ldc8-slide .ldc4-slide__img,
body.ldc-pack4 .ldcp-final .ldcp-split__media {
	background: #f7f8fa;
}

body.ldc-pack4 .ldc8 .ldc8-slide--ba,
body.ldc-pack4 .ldc8 .ldc8-slide--ba .ldc4-slide__img {
	background: #1a1816;
}

@media (max-width: 767.98px) {
	body.ldc-pack4 .ldcq-s0 .ldc4-slide__img {
		object-position: 50% 58%;
	}

}

/* Bild 3 (Hochformat 1145 : 1374) füllt die Galeriefläche als Ausschnitt: Hand, Pipette und Flasche bleiben im Bild */
body.ldc-pack4 .ldcq-s2 .ldc4-slide__img {
	object-fit: cover;
	object-position: 50% 40%;
}

@media (max-width: 767.98px) {
	body.ldc-pack4 .ldcq-s2 .ldc4-slide__img {
		object-fit: cover;
		object-position: 50% 44%;
	}
}

/* Abschluss: Bild im eigenen Seitenverhältnis (1145 : 1374), kein Beschnitt */
body.ldc-pack4 .ldcp-final .ldcp-split__media {
	aspect-ratio: 1145 / 1374;
}

body.ldc-pack4 .ldcp-final .ldcp-split__media img {
	object-position: 50% 50%;
}

@media (min-width: 1000px) {
	body.ldc-pack4 .ldcp-final .ldcp-split {
		align-items: center;
	}

	body.ldc-pack4 .ldcp-final .ldcp-split__media {
		max-width: 520px;
		justify-self: end;
		width: 100%;
	}
}

/* ── Nur Kauf 4, zahl 3 (Produkt 103835): Flächen im freigegebenen kühlen Grau ─────────────────────────────
   Vorgabe des Nutzers 15.10.2026, wie Hair Serum und Komplett-Set. Ersetzt auf dieser Seite das alte Off-White
   #f3f2ef (--ldc-warm aus ldc-v6.css) durch #f4f4f7: Rahmen der Vorschaubilder, Fläche „68 Wirkstoffe in einer Formel“.
   Die dunkle Vorher/Nachher-Bühne (#1a1816) bleibt. Keine anderen Seiten, keine Abstände, keine Texte. */
body.postid-103835.ldc-pack4.ldc-v6 {
	--ldc-warm: #f4f4f7;
}