/**
 * LILO Extras Blocks – eigene Block-Styles (getrennt vom Theme).
 * Nutzt Theme-Tokens (--lilo-*) wo vorhanden, mit Fallbacks.
 */

/* ============================================================
   Responsive: Block-Inhalt auf Lesebreite begrenzen + zentrieren.
   Die farbige Fläche (.lilo-surface) bleibt full-width, der Inhalt darin
   wird auf --lilo-maxw begrenzt. Banner + Typo-Band bleiben full-bleed.
   ============================================================ */
.lilo-surface > * {
	max-width: var(--lilo-maxw, 1200px);
	/* !important, weil einige Block-Roots (z. B. .lilo-events) selbst margin:0 setzen (gleiche Spezifität) */
	margin-inline: auto !important;
}
.lilo-surface > .lilo-banner,
.lilo-surface > .lilo-typo-band {
	max-width: none;
}

/* Lange Wörter in Display-Überschriften nicht über den Rand laufen lassen (Mobile).
   min-width:0 + max-width:100% zwingen das Flex-Item auf Container-Breite, damit break-word greift. */
.lilo-cta__title,
.lilo-panel__title,
.lilo-seal__title {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ============================================================
   Flächen-Varianten (Marken-Palette + Auto-Kontrast) — Vorbild Seal-Hero.
   Jeder Flächen-Block wird in <div class="lilo-surface"> gewrappt.
   ============================================================ */
.lilo-surface {
	background: var(--surface, transparent);
	color: var(--lilo-black, #000);
}
.lilo-surface--plain {
	background: transparent;
}
.lilo-surface--ondark {
	color: var(--lilo-white, #fff);
}

/* Preise: Sub-Elemente je nach Fläche lesbar */
.lilo-surface:not(.lilo-surface--ondark) .lilo-prices__note {
	color: var(--lilo-black-2, #505050);
}
.lilo-surface--ondark .lilo-prices__note {
	color: rgba(255, 255, 255, 0.72);
}

/* Event-Liste: Ränder + gedämpfte Meta auf dunkler Fläche lesbar (Titel/Datum erben) */
.lilo-surface--ondark .lilo-event {
	border-color: rgba(255, 255, 255, 0.22);
}
.lilo-surface--ondark .lilo-event__meta {
	color: rgba(255, 255, 255, 0.7);
}

/* Feature-Liste setzt Titel + Items explizit schwarz → auf dunkler Fläche weiß */
.lilo-surface--ondark .lilo-features__title,
.lilo-surface--ondark .lilo-features__list li {
	color: var(--lilo-white, #fff);
}

/* Split-Eyebrow (gedämpft) auf dunkler Fläche */
.lilo-surface--ondark .lilo-split__eyebrow {
	color: rgba(255, 255, 255, 0.7);
}

/* Button-Block: dunkler Button auf dunkler Fläche → hell */
.lilo-surface--ondark .lilo-blk-button .lilo-btn--dark {
	background: var(--lilo-yellow, #ffcd00);
	color: var(--lilo-black, #000);
}

/* Banner: Basis-Hintergrund/Farbe neutralisieren → Palette-Fläche steuert */
.lilo-surface .lilo-banner {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

/* Typo-Band: setzt selbst color:black → auf dunkler Fläche weiß (normal + Outline-Kontur) */
.lilo-surface--ondark .lilo-typo-scroll {
	color: var(--lilo-white, #fff);
}
.lilo-surface--ondark .lilo-typo-scroll .lilo-typo-outline {
	color: transparent;
	-webkit-text-stroke-color: var(--lilo-white, #fff);
}

/* CTA: fixes Gelb neutralisieren; Button auf dunkler Fläche hell */
.lilo-surface .lilo-cta {
	background: transparent;
}
.lilo-surface--ondark .lilo-cta .lilo-btn--dark {
	background: var(--lilo-yellow, #ffcd00);
	color: var(--lilo-black, #000);
}
.lilo-surface--ondark .lilo-cta .lilo-btn--dark:hover {
	background: var(--lilo-white, #fff);
}

/* Panel: vollflächig in Palette-Farbe (Zweifarb-Band würde bei dunkler Fläche brechen) */
.lilo-panel-surface {
	background: var(--surface, var(--lilo-yellow, #ffcd00));
}
.lilo-panel-surface .lilo-panel::before {
	display: none;
}
/* .lilo-panel setzt selbst color:black → auf dunkler Fläche überschreiben (Titel/Subtitle erben) */
.lilo-panel-surface--ondark .lilo-panel {
	color: var(--lilo-white, #fff);
}

/* ============================================================
   Seal-Hero: Bild oben, Farbfläche unten, Emblem exakt auf der Naht.
   Geometrie aus der Emblem-Vermessung: Disc-Ø = 94% der Emblem-Höhe,
   Emblem straddelt die Naht 34% (oben) / 66% (unten).
   ============================================================ */
.lilo-seal {
	--seal-toph: clamp(180px, 40vw, 360px); /* Höhe der Bildzone */
	--seal-size: clamp(116px, 22vw, 176px); /* Höhe des Emblems */
	position: relative;
	background: var(--seal-color, var(--lilo-yellow, #ffcd00));
}

.lilo-seal__top {
	height: var(--seal-toph);
	overflow: hidden;
}
/* .lilo-seal-Präfix erhöht die Spezifität über den Theme-Editor-Style
   (.editor-styles-wrapper img { height:auto }), sonst rendert das Bild im Editor in Naturgröße. */
.lilo-seal .lilo-seal__top img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lilo-seal__body {
	background: var(--seal-color, var(--lilo-yellow, #ffcd00));
	text-align: center;
	/* Platz für den 66% überhängenden Emblem-Teil + großzügiger Abstand zum Text */
	padding: calc(var(--seal-size) * 0.64 + clamp(1.5rem, 4vw, 2.5rem)) clamp(1.25rem, 5vw, 2rem) clamp(2.5rem, 6vw, 3.75rem);
}

.lilo-seal__title {
	margin: 0 auto;
	max-width: 15em;
	font-family: var(--lilo-font, inherit);
	font-size: var(--lilo-fs-h1, clamp(2.25rem, 1.5rem + 3.6vw, 4.2rem));
	font-weight: var(--lilo-fw-regular, 400);
	line-height: var(--lilo-lh-heading, 1.2);
	color: var(--lilo-black, #000);
}
.lilo-seal__subtitle {
	margin: 1rem auto 0;
	max-width: 34em;
	font-size: var(--lilo-fs-lead, clamp(1.1rem, 1rem + 0.45vw, 1.35rem));
	line-height: 1.5;
	color: var(--lilo-black, #000);
}
.lilo-seal__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 1.75rem;
}

/* Emblem auf der Naht: 34% oben ins Bild, 66% in die Fläche */
.lilo-seal__emblem {
	position: absolute;
	left: 50%;
	top: var(--seal-toph);
	transform: translate(-50%, var(--seal-seam, -36%)); /* Naht an der Unterkante der „— LILO —"-Linie; per Block justierbar */
	height: var(--seal-size);
	z-index: 3;
	display: block;
	pointer-events: none;
}
.lilo-seal .lilo-seal__mark {
	position: relative;
	z-index: 2;
	height: var(--seal-size);
	width: auto;
	max-width: none;
	display: block;
}
/* farbiger Kreis hinter dem Emblem = Flächenfarbe, großzügig hinter dem Ring, zentriert */
.lilo-seal__disc {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: calc(var(--seal-size) * var(--seal-disc, 0.94));
	height: calc(var(--seal-size) * var(--seal-disc, 0.94));
	aspect-ratio: 1 / 1; /* im Editor erzwingt das den Kreis (span wird sonst verzerrt) */
	transform: translate(-50%, calc(-50% + var(--seal-disc-y, 0%)));
	background: var(--seal-color, var(--lilo-yellow, #ffcd00));
	border-radius: 50%;
}

/* Dunkle Fläche: helle Schrift + helle Outline-Buttons */
.lilo-seal--ondark .lilo-seal__title,
.lilo-seal--ondark .lilo-seal__subtitle {
	color: var(--lilo-white, #fff);
}
.lilo-seal--ondark .lilo-btn--ghost {
	color: var(--lilo-white, #fff);
	border-color: var(--lilo-white, #fff);
}
.lilo-seal--ondark .lilo-btn--ghost:hover {
	background: var(--lilo-white, #fff);
	color: var(--lilo-black, #000);
}