/**
 * Willkommensrabatt – gemeinsame Optik aller Offer-Module.
 *
 * Immer geladen (Frontend und Block-Editor), weil die Klassen von vier Stellen
 * genutzt werden: Rechner-Badge (Template, Link mit pos=vr-badge), Inline-Badge
 * (Synced Pattern, Link), Karte (Synced Pattern, Block-Style) und Fussnote (Modul).
 * Eine Quelle fuer die Optik, alle Groessen in rem (Design-Plan 10.09.2026).
 *
 * Markup des Badges (LMS_Offer::badge_html(), identisch fuer Rechner + Pattern):
 *   <a class="lms-offer-badge lms-offer-teaser">
 *     <span class="lms-offer-badge__kicker">Neu bei LetMeShip?</span>
 *     <span class="lms-offer-badge__copy"><strong>20 %*</strong> auf ... <strong>4 Wochen</strong></span>
 *     <span class="lms-offer-badge__chevron" aria-hidden="true"></span>
 *   </a>
 *
 * Rahmen: 2 px gestrichelt mit fester Strichlaenge 8 px. CSS border:dashed
 * laesst die Strichlaenge nicht steuern, deshalb ein SVG-Hintergrund. Der
 * Rect ist 100 % gross mit 4 px Strich; die aeussere Haelfte wird vom
 * SVG-Viewport abgeschnitten, sichtbar bleiben 2 px innen. Der Element-
 * Radius clippt den Hintergrund an den Ecken.
 *
 * @package LMS_Custom @since 1.4.9 (Neubau 1.5.0)
 */

:root{
	--lms-offer-bg:#FFFCF3;
	--lms-offer-line:#E9B935;
	--lms-offer-ink:#08205E;
	--lms-offer-accent:var(--wp--preset--color--hover-state,#2854F2);
	--lms-offer-muted:#717060;
	--lms-offer-radius:.5rem;
	--lms-offer-width:61.25rem;
	--lms-offer-frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='8' fill='none' stroke='%23E9B935' stroke-width='4' stroke-dasharray='8 8'/%3E%3C/svg%3E");
	--lms-offer-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M9.75 5.75044V19.7504M9.75 5.75044C9.38828 4.25984 8.76545 2.9855 7.96274 2.0936C7.16003 1.2017 6.21469 0.73363 5.25 0.750437C4.58696 0.750437 3.95107 1.01383 3.48223 1.48267C3.01339 1.95151 2.75 2.5874 2.75 3.25044C2.75 3.91348 3.01339 4.54936 3.48223 5.0182C3.95107 5.48705 4.58696 5.75044 5.25 5.75044M9.75 5.75044C10.1117 4.25984 10.7346 2.9855 11.5373 2.0936C12.34 1.2017 13.2853 0.73363 14.25 0.750437C14.913 0.750437 15.5489 1.01383 16.0178 1.48267C16.4866 1.95151 16.75 2.5874 16.75 3.25044C16.75 3.91348 16.4866 4.54936 16.0178 5.0182C15.5489 5.48705 14.913 5.75044 14.25 5.75044M17.75 9.75044V17.7504C17.75 18.2809 17.5393 18.7896 17.1642 19.1646C16.7891 19.5397 16.2804 19.7504 15.75 19.7504H3.75C3.21957 19.7504 2.71086 19.5397 2.33579 19.1646C1.96071 18.7896 1.75 18.2809 1.75 17.7504V9.75044M17.75 9.75044C18.3023 9.75044 18.75 9.30272 18.75 8.75044V6.75044C18.75 6.19815 18.3023 5.75044 17.75 5.75044H1.75C1.19772 5.75044 0.75 6.19815 0.75 6.75044V8.75044C0.75 9.30272 1.19772 9.75044 1.75 9.75044M17.75 9.75044H1.75' stroke='%2308205E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--lms-offer-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='834 25.5 8 14' fill='none'%3E%3Cpath d='M835 38.5L841 32.5L835 26.5' stroke='%2308205E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--lms-offer-doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='26' viewBox='0 0 31 26' fill='none'%3E%3Cpath d='M13.0482 21.8121C12.7672 20.9433 11.7878 20.6951 6.97614 20.4131C2.44069 20.1163 0.482915 20.3181 0.183384 21.1296C-0.0534307 21.7874 2.12913 22.2806 6.75916 22.6961C11.0849 23.0394 13.3432 22.7243 13.0482 21.8121Z' fill='%23E9B935'/%3E%3Cpath d='M18.7329 15.0649C17.8478 12.3282 11.7567 7.39504 9.8167 7.82571C8.76807 8.0585 9.30092 9.01105 12.7085 12.7708C15.6048 15.9922 17.0852 16.9206 18.6057 16.583C18.9203 16.5132 18.9717 15.8034 18.7329 15.0649Z' fill='%23E9B935'/%3E%3Cpath d='M29.7924 11.496C29.9515 10.2502 25.8158 1.11166 24.8186 0.634663C23.2231 -0.128539 23.3375 1.61529 25.1516 6.00811C26.0675 8.31893 27.1688 10.6817 27.5752 11.2433C28.4826 12.4852 29.6577 12.6434 29.7924 11.496Z' fill='%23E9B935'/%3E%3C/svg%3E");
}

/* ── Gemeinsame Flaeche + Rahmen (Badge und Karte) ────────────────────── */
.lms-offer-badge,.lms-offer-card,.is-style-lms-offer-card{
	background:var(--lms-offer-bg) var(--lms-offer-frame) 0 0/100% 100% no-repeat!important;
	border:0!important;
	border-radius:var(--lms-offer-radius)!important;
	color:var(--lms-offer-ink);
}

/* ── Badge ────────────────────────────────────────────────────────────── */
.lms-offer-badge{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	column-gap:1rem;
	row-gap:.25rem;
	box-sizing:border-box;
	min-height:4.0625rem;
	padding:.75rem 3rem .75rem 1.125rem;
	font-size:1.125rem;
	line-height:1.4;
	text-decoration:none;
}
a.lms-offer-badge,a.lms-offer-badge:hover,a.lms-offer-badge:focus{color:var(--lms-offer-ink);text-decoration:none}
a.lms-offer-badge:focus-visible{outline:.125rem solid var(--lms-offer-ink);outline-offset:.125rem}

/* Kicker: Icon + "Neu bei LetMeShip?", Link-Optik, bricht nie intern um. */
.lms-offer-badge__kicker{
	display:inline-flex;
	align-items:center;
	gap:.5rem;
	white-space:nowrap;
	text-decoration:underline;
	text-decoration-thickness:.0875rem;
	text-underline-offset:.1875rem;
}
.lms-offer-badge__kicker::before{content:"";flex-shrink:0;width:1.25rem;height:1.3125rem;background:var(--lms-offer-icon) center/contain no-repeat}
a.lms-offer-badge:hover .lms-offer-badge__kicker{text-decoration-thickness:.125rem}

/* Copy: bricht bei Platzmangel als Ganzes in die zweite Zeile (flex-basis),
   Text darin darf umbrechen. Zahlen in Akzentfarbe, Gewicht normal. */
.lms-offer-badge__copy{flex:1 1 15rem;min-width:0}
/* !important: das Theme setzt strong ueber ":not(#wpadminbar) ... strong" mit ID-Spezifitaet. */
.lms-offer-badge__copy strong{font-weight:500!important;color:var(--lms-offer-accent)}

/* Chevron rechts, vertikal mittig ueber alle Zeilen. */
.lms-offer-badge__chevron{position:absolute;right:1.5rem;top:50%;width:.5rem;height:.875rem;transform:translateY(-50%);background:var(--lms-offer-chevron) center/contain no-repeat;transition:transform .2s ease-out}
/* Hover/Fokus auf dem Link: Chevron rueckt dezent 3 px nach rechts (nur wenn Bewegung erlaubt). */
@media(prefers-reduced-motion:no-preference){
	a.lms-offer-badge:hover .lms-offer-badge__chevron,a.lms-offer-badge:focus-visible .lms-offer-badge__chevron{transform:translate(.1875rem,-50%)}
}

/* ── Karte (unter dem Hero) ───────────────────────────────────────────── */
/* Aufbau (Korrektur 10.09.): section.content-block (Theme-Abstand oben/unten,
   Content-Spalte 84 rem = 1344 px) > .content > Karte (Rahmen, volle Breite der
   Content-Spalte) > .lms-offer-card__content (Rechnerbreite 61,25 rem, mittig).
   Der Injektions-Slot des Plugins darf nichts begrenzen - das tut die Section. */
div.lms-offer-card-slot.lms-offer-card-slot{max-width:none;margin:0;padding:0}
/* Theme zentriert Kinder von .content per align-items:center - die Karte muss trotzdem die volle Breite nehmen. */
.wp-block-group.lms-offer-card,.wp-block-group.is-style-lms-offer-card{box-sizing:border-box;width:100%;max-width:100%;margin-left:auto;margin-right:auto;padding:2.25rem 1.5rem}
.lms-offer-card__content{box-sizing:border-box;width:100%;max-width:var(--lms-offer-width);margin:0 auto}
.lms-offer-card .row,.is-style-lms-offer-card .row{align-items:center}
.lms-offer-card .is-style-tagline,.is-style-lms-offer-card .is-style-tagline{color:var(--lms-offer-ink)!important;font-size:1.125rem}
.lms-offer-card .is-style-headline,.is-style-lms-offer-card .is-style-headline{color:var(--lms-offer-ink)!important;font-size:2.125rem;line-height:1.2;margin:.25rem 0 0}
.lms-offer-card .is-style-headline strong,.is-style-lms-offer-card .is-style-headline strong{font-weight:700!important;color:var(--lms-offer-accent)}
/* Rechte Spalte: Button und Zusatzzeile mittig. */
.lms-offer-card .wp-block-column.image,.is-style-lms-offer-card .wp-block-column.image{text-align:center}
.lms-offer-card .wp-block-column.image .wp-block-buttons,.is-style-lms-offer-card .wp-block-column.image .wp-block-buttons{justify-content:center}
/* Doodle klebt oben links an der Button-Ecke (WP-Core: .wp-block-button ist position:relative). */
.lms-offer-card .wp-block-button,.is-style-lms-offer-card .wp-block-button{position:relative}
.lms-offer-card .wp-block-button::before,.is-style-lms-offer-card .wp-block-button::before{content:"";position:absolute;left:-1.125rem;top:-1.25rem;width:1.9375rem;height:1.625rem;background:var(--lms-offer-doodle) center/contain no-repeat;pointer-events:none;transform-origin:70% 80%;animation:lms-offer-doodle-nudge 8s ease-in-out infinite}
/* Wackeln alle 8 s, davon rund 0,7 s Bewegung - der Rest der Schleife steht still.
   Drehpunkt unten rechts, damit es aussieht, als stupse das Doodle die Button-Ecke an. */
@keyframes lms-offer-doodle-nudge{
	0%,100%{transform:rotate(0) scale(1)}
	2%{transform:rotate(-9deg) scale(1.1)}
	4.5%{transform:rotate(7deg) scale(1.08)}
	7%{transform:rotate(-4deg) scale(1.03)}
	9%{transform:rotate(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
	.lms-offer-card .wp-block-button::before,.is-style-lms-offer-card .wp-block-button::before{animation:none}
}
.lms-offer-card .wp-block-button a.wp-block-button__link,.is-style-lms-offer-card .wp-block-button a.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;border:.125rem solid var(--lms-offer-line);background:#fff;color:var(--lms-offer-ink);font-size:1.125rem;font-weight:600}
.lms-offer-card .wp-block-button__link::before,.is-style-lms-offer-card .wp-block-button__link::before{content:"";flex-shrink:0;width:1.5rem;height:1.5rem;background:var(--lms-offer-icon) center/contain no-repeat}
.lms-offer-card .is-style-copy-small,.is-style-lms-offer-card .is-style-copy-small{color:var(--lms-offer-ink)!important;text-align:center;margin-top:.5rem}
@media(max-width:781px){
	.lms-offer-card .wp-block-column.image,.is-style-lms-offer-card .wp-block-column.image{margin-top:1rem}
	.lms-offer-card .wp-block-button,.is-style-lms-offer-card .wp-block-button{width:100%}
	.lms-offer-card .wp-block-button__link,.is-style-lms-offer-card .wp-block-button__link{width:100%}
	.lms-offer-card .is-style-headline,.is-style-lms-offer-card .is-style-headline{font-size:1.75rem}
}

/* ── Fussnote ─────────────────────────────────────────────────────────── */
/* Abstand in der Theme-Staffel der Sections: 2 rem / 3 rem / 4,5 rem. */
/* Doppelte Klasse = Spezifitaet (0,2,0): das Theme stylt p ueber .prose/.entry-content mit (0,1,0)-(0,1,1). */
p.lms-offer-footnote.lms-offer-footnote{max-width:var(--lms-offer-width);margin:2rem auto;font-size:.9375rem;line-height:1.5;text-align:center;color:var(--lms-offer-muted)}
p.lms-offer-footnote.lms-offer-footnote a{color:inherit;text-decoration:underline}
@media(min-width:768px){p.lms-offer-footnote.lms-offer-footnote{margin:3rem auto}}
@media(min-width:1400px){p.lms-offer-footnote.lms-offer-footnote{margin:4.5rem auto}}

/* ── Ausgleichsregeln (Schalter A: Altcodes ausgeblendet) ─────────────── */
/* Nur im DE-Zweig bei aktivem Schalter A: LMS_Offer::body_class() setzt
   body.lms-offer-legacy-hidden. /at/, /ch/, /fr/ zeigen weiter ihren Stripe. */
/* Ohne den 10-%-Stripe wirkt der Hero-Text zu schmal; Breite angleichen. */
.lms-offer-legacy-hidden .subpage-head.banner .content .copy{max-width:56.25rem}
.lms-offer-legacy-hidden .lms-price{font-weight:500}
/* Nach dem Rechner folgt kein Stripe mehr; die CTA-Gruppe rueckt nach. */
.lms-offer-legacy-hidden .lms-vr ~ .lms-cta-g{margin-top:0!important}