/*
 * Terminbanner [vp_banner]
 *
 * Wird von Frontend\BannerShortcode angemeldet und nur geladen, wenn gerade
 * ein Banner erscheint. Die Akzentfarbe kommt als --vp-accent aus dem
 * Termintyp. Bewusst unabhängig von events.css: Auf der Startseite steht
 * meist keine Terminliste.
 */

.vp-banners { display: grid; gap: 16px; margin: 0 0 24px; font-family: inherit; }

.vp-banner {
	--vp-accent: #3B82F6;
	display: flex; flex-wrap: wrap; align-items: stretch;
	background: #fff; color: #111827;
	border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden;
	box-shadow: 0 1px 2px rgba(17,24,39,.05);
	text-decoration: none !important;
	transition: box-shadow .15s, transform .15s;
}
a.vp-banner:hover { box-shadow: 0 8px 24px rgba(17,24,39,.12); transform: translateY(-1px); color: #111827; }
a.vp-banner:focus-visible { outline: 3px solid var(--vp-accent); outline-offset: 2px; }

/* Bildseite: Titelbild, sonst Farbfläche des Termintyps. */
.vp-banner__media {
	position: relative; flex: 1 1 240px; min-height: 180px;
	background-color: var(--vp-accent); background-size: cover; background-position: center;
}
.vp-banner.has-image .vp-banner__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%);
}
.vp-banner__date {
	position: absolute; top: 16px; left: 18px; z-index: 1;
	display: flex; flex-direction: column; align-items: flex-start; line-height: 1;
	color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.vp-banner__day { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; }
.vp-banner__month { margin-top: 4px; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.vp-banner__date.is-span .vp-banner__day { font-size: 1.8rem; }

/* Textseite */
.vp-banner__body {
	flex: 2 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
	padding: 20px 24px 22px;
	border-left: 5px solid var(--vp-accent);
}
.vp-banner__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.vp-banner__countdown { padding: 3px 9px; border-radius: 999px; background: var(--vp-accent); color: #fff; }
.vp-banner__type { color: var(--vp-accent); }
.vp-banner__title { font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: #111827; }
.vp-banner__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .92rem; color: #4b5563; }
.vp-banner__metaitem { display: inline-flex; align-items: center; gap: 6px; }
.vp-banner__text { font-size: .95rem; line-height: 1.5; color: #374151; }
.vp-banner__button {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
	padding: 10px 18px; border-radius: 10px;
	background: var(--vp-accent); color: #fff; font-weight: 700; font-size: .95rem;
}
a.vp-banner:hover .vp-banner__button { filter: brightness(1.08); }

.vp-banner .vp-icon { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.vp-banner__button .vp-icon { transition: transform .15s; }
a.vp-banner:hover .vp-banner__button .vp-icon { transform: translateX(3px); }

/* Schmal: Bild oben, Text darunter – die Akzentlinie wandert nach oben. */
@media (max-width: 600px) {
	.vp-banner__media { min-height: 150px; }
	.vp-banner__body { border-left: 0; border-top: 5px solid var(--vp-accent); padding: 16px 18px 18px; }
	.vp-banner__title { font-size: 1.3rem; }
	.vp-banner__button { align-self: stretch; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.vp-banner, .vp-banner__button .vp-icon { transition: none; }
	a.vp-banner:hover { transform: none; }
}