/* Beiträge „Neu im …“: Bausteine des Blocks und Klassen der Standardblöcke.
   Farben und Schriften aus theme.json, damit Dunkelmodus und Schriften passen. */
/* Abstände: Dieses CSS lädt vor dem Theme, und das Theme setzt Abstände
   im Fließtext mit gleicher Spezifität. Deshalb stehen alle äußeren
   Abstände unten im Abschnitt „Rhythmus“ mit doppelter Klasse.
   Rhythmus: Abschnitt (Rubrikzeile) 3.75rem, Bausteine darin 1.5rem,
   Überschrift an der Rubrikzeile .5rem. */
.lui-wo-kick {
	font: 600 .75rem/1.2 var(--wp--preset--font-family--mono, monospace);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--link, #bd4b00);
}
.lui-wo-free {
	display: inline-block;
	margin-left: .4em;
	padding: .2em .45em;
	border-radius: 4px;
	background: var(--wp--preset--color--tip, #3b6e47);
	color: #fff;
	font: 700 .66rem/1 var(--wp--preset--font-family--text, sans-serif);
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: .1em;
}
.lui-wo-mine .lui-wo-rub {
	display: block;
	font: 600 .7rem/1.6 var(--wp--preset--font-family--mono, monospace);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #625d55);
}
.lui-wo-mine a { font-weight: 600; }
.lui-wo-art { display: block; width: 100%; height: auto; border-radius: 8px; }
.lui-wo-anriss cite { font-size: .8rem; color: var(--wp--preset--color--muted, #625d55); font-style: normal; }
/* Gegenstück zum grünen Kasten „Komplett und kostenlos“, in Orange. */
.lui-wo-online {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1.25rem;
	padding: 1.25rem 1.375rem;
	border-left: 3px solid var(--wp--preset--color--accent, #ff6600);
	border-radius: 0 10px 10px 0;
	background: var(--wp--preset--color--surface, #f3efe8);
	font-family: var(--wp--preset--font-family--text, sans-serif);
	font-size: .95rem;
}
.lui-wo-online > b { width: 100%; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--link, #bd4b00); }
.lui-wo-online > p { width: 100%; margin: 0; color: var(--wp--preset--color--ink-2, #3a3732); }
.lui-wo-online-btn {
	display: inline-block;
	margin-top: .4rem;
	padding: .6rem 1rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent, #ff6600);
	color: var(--wp--preset--color--on-accent, #1a1a1a) !important;
	font-weight: 600;
	text-decoration: none;
}
.lui-wo-link {
	font-weight: 600;
	color: var(--wp--preset--color--ink, #1a1a1a);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--accent, #ff6600);
}
/* Kein eigener Pfeil: Das Theme markiert externe Links selbst. */

.lui-wo-ce-box, .lui-wo-r-free {
	padding: 1.25rem 1.375rem;
	border: 2px solid var(--wp--preset--color--tip, #3b6e47);
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--tip, #3b6e47) 9%, var(--wp--preset--color--bg, #faf8f4));
	font-family: var(--wp--preset--font-family--text, sans-serif);
	font-size: .95rem;
}
.lui-wo-ce-box { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
.lui-wo-ce-box > b { width: 100%; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--tip, #3b6e47); }
.lui-wo-ce-box > p { width: 100%; margin: 0; }
.lui-wo-ce-btn {
	display: inline-block;
	padding: .6rem 1rem;
	border-radius: 8px;
	background: var(--wp--preset--color--tip, #3b6e47);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
}

.lui-wo-passend {
	padding: 1.125rem 1.25rem;
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #f3efe8);
	font-family: var(--wp--preset--font-family--text, sans-serif);
}
.lui-wo-passend > b { display: block; margin-bottom: .5rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted, #625d55); }
.lui-wo-pa { display: grid; grid-template-columns: 96px 1fr; gap: .875rem; padding: .8rem 0; border-top: 1px solid var(--wp--preset--color--line, #e0d9cc); color: inherit; text-decoration: none; }
.lui-wo-pa:first-of-type { border-top: 0; padding-top: .25rem; }
.lui-wo-pa:last-child { padding-bottom: 0; }
.lui-wo-pa img { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; }
.lui-wo-pa strong { display: block; font-size: .95rem; line-height: 1.3; color: var(--wp--preset--color--ink, #1a1a1a); }
.lui-wo-pa small { display: block; margin-top: .2rem; font-size: .875rem; line-height: 1.45; color: var(--wp--preset--color--ink-2, #3a3732); }
.lui-wo-pa em { display: block; margin-top: .2rem; font-size: .78rem; font-style: normal; color: var(--wp--preset--color--muted, #625d55); }

.lui-wo-rest { font-family: var(--wp--preset--font-family--text, sans-serif); font-size: .95rem; }
.lui-wo-r-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; margin-bottom: .6rem; }
.lui-wo-r-h b { font: 700 1.125rem var(--wp--preset--font-family--brand, sans-serif); color: var(--wp--preset--color--ink, #1a1a1a); }
.lui-wo-r-h span { font-size: .8rem; color: var(--wp--preset--color--muted, #625d55); }
.lui-wo-r-row { display: flex; justify-content: space-between; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--tip, #3b6e47) 25%, transparent); }
.lui-wo-r-row a { display: block; font-weight: 600; color: var(--wp--preset--color--ink, #1a1a1a); text-decoration: none; }
.lui-wo-r-row em, .lui-wo-r-g em { font-style: normal; font-size: .8rem; color: var(--wp--preset--color--muted, #625d55); }
.lui-wo-r-row i { font-style: normal; font-size: .8rem; font-weight: 600; white-space: nowrap; color: var(--wp--preset--color--tip, #3b6e47); }
.lui-wo-r-free .lui-wo-ce-btn { margin-top: 1rem; }
.lui-wo-r-paid { padding: 1.25rem 1.375rem; border: 1px solid var(--wp--preset--color--line, #e0d9cc); border-radius: 10px; }
.lui-wo-r-g { padding: .75rem 0; border-bottom: 1px solid var(--wp--preset--color--line, #e0d9cc); line-height: 1.5; }
.lui-wo-r-g b, .lui-wo-r-dvd b { display: block; margin-bottom: .3rem; font: 600 .72rem/1.2 var(--wp--preset--font-family--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--link, #bd4b00); }
.lui-wo-r-dvd b { display: inline; margin-right: .4rem; }
.lui-wo-r-g span { display: block; }
.lui-wo-r-g span + span { margin-top: .25rem; }
.lui-wo-r-g a { color: var(--wp--preset--color--ink, #1a1a1a); text-decoration: none; }
.lui-wo-r-dvd { padding: .85rem 0 1rem; }
.lui-wo-r-preis { margin: .75rem 0 0; font-size: .85rem; color: var(--wp--preset--color--muted, #625d55); }

/* Rhythmus (doppelte Klasse, siehe oben). */
.lui-wo-kick.lui-wo-kick { margin-block: 3.75rem 0; }
.lui-wo-kick.lui-wo-kick + .wp-block-heading { margin-block-start: .5rem; }
.lui-wo-mine.lui-wo-mine { margin-block: 1.5rem 0; }
.lui-wo-mine.lui-wo-mine li + li { margin-block-start: .6rem; }
.lui-wo-grafik.lui-wo-grafik { margin-block: 1.25rem 0; }
.lui-wo-anriss.lui-wo-anriss,
.lui-wo-online.lui-wo-online,
.lui-wo-ce-box.lui-wo-ce-box,
.lui-wo-passend.lui-wo-passend,
.lui-wo-rest.lui-wo-rest { margin-block: 1.5rem 0; }
.lui-wo-r-free.lui-wo-r-free { margin-block: 0 1.25rem; }
.lui-wo-r-paid.lui-wo-r-paid { margin-block: 0; }
.lui-wo-hinweis-quelle.lui-wo-hinweis-quelle {
	margin-block: 3rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line, #e0d9cc);
	font-size: .9rem;
	color: var(--wp--preset--color--muted, #625d55);
}
@media (max-width: 600px) {
	.lui-wo-kick.lui-wo-kick { margin-block-start: 3rem; }
	.lui-wo-online, .lui-wo-ce-box, .lui-wo-r-free, .lui-wo-r-paid { padding: 1rem 1.125rem; }
}
