/* SV Wittendorf – Terminseite als Plakat (single-svw_termin.php, svw_termin_plakat_html).
   Hochkant-Ticket: roter Kopf mit Datum, Perforation, heller Teil mit Titel und Details, schwarze Fußzeile.
   Auf dem Handy bildschirmfüllend, damit ein Screenshot direkt als Social-Media-Bild taugt. */
.svw-plakat-wrap { padding: 24px 0 56px; }
.svw-plakat {
	--pl-accent: #c8102e;
	--pl-ink: #15171c;
	--pl-card: #f4f3f0;
	--pl-page: #fff;
	max-width: 520px;
	margin: 0 auto;
	color: var(--pl-ink);
	font-family: 'Barlow', 'Open Sans', sans-serif;
}

/* Kopf */
.svw-plakat .svw-plakat__kopf {
	position: relative;
	background:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 1.6px) 0 0 / 14px 14px,
		radial-gradient(ellipse 120% 80% at 50% -20%, rgba(20,0,5,.55) 0%, rgba(20,0,5,0) 60%),
		radial-gradient(ellipse 90% 80% at 50% 80%, #d9122e 0%, #b30d27 45%, #5e0a17 100%);
	color: #fff;
	padding: 22px 28px 34px;
}
.svw-plakat .svw-plakat__kopf::after {
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -7px;
	height: 14px;
	background: radial-gradient(circle, var(--pl-card) 5px, transparent 5.5px) 50% 0 / 20px 14px repeat-x; /* Punkte in der Farbe des hellen Teils darunter */
	pointer-events: none;
}
.svw-plakat .svw-plakat__verein {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	line-height: 1;
	opacity: .95;
}
.svw-plakat .svw-plakat__verein img { width: 40px; height: auto; display: block; }
.svw-plakat .svw-plakat__verein span:first-of-type { flex: 1; }
.svw-plakat .svw-plakat__kicker { flex: none; padding: 5px 8px; border: 2px solid rgba(255,255,255,.55); font-size: 13px; font-weight: 800; }
.svw-plakat .svw-plakat__datum {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 26px;
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	line-height: 1;
}
.svw-plakat .svw-plakat__klein { font-size: 20px; font-weight: 700; text-transform: uppercase; }
.svw-plakat .svw-plakat__zahl { font-size: clamp(96px, 28vw, 136px); font-weight: 900; margin: 4px 0 6px; }
.svw-plakat--zeitraum .svw-plakat__zahl { font-size: clamp(56px, 15vw, 72px); margin: 8px 0 10px; }
.svw-plakat .svw-plakat__gross { font-size: clamp(44px, 12vw, 64px); font-weight: 900; text-transform: uppercase; margin: 4px 0 6px; overflow-wrap: anywhere; }
.svw-plakat--platzhalter .svw-plakat__kopf { background: #15171c; }

/* Inhalt */
.svw-plakat .svw-plakat__body { background: var(--pl-card); padding: 34px 28px 30px; }
.svw-plakat .svw-plakat__titel {
	margin: 0;
	padding: 0;
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 900;
	font-size: clamp(34px, 9vw, 46px);
	line-height: .95;
	text-transform: uppercase;
	color: var(--pl-ink);
	text-wrap: balance;
}
.svw-plakat .svw-plakat__hinweis {
	display: inline-block;
	margin: 14px 0 0;
	padding: 5px 10px;
	border: 2px solid #cfccc5;
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	text-transform: uppercase;
	color: #555;
}
.svw-plakat .svw-plakat__details { margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.svw-plakat .svw-plakat__details div { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 12px; align-items: baseline; }
.svw-plakat .svw-plakat__details dt {
	margin: 0;
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	color: var(--pl-accent);
}
.svw-plakat .svw-plakat__details dd { margin: 0; font-size: 17px; line-height: 1.4; color: var(--pl-ink); }
.svw-plakat .svw-plakat__text { margin: 20px 0 0; font-size: 17px; line-height: 1.5; color: #444; text-wrap: pretty; }
.svw-plakat .svw-plakat__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 14px 22px;
	background: var(--pl-accent);
	color: #fff;
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease;
}
.svw-plakat .svw-plakat__button::after {
	content: '';
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.svw-plakat .svw-plakat__button:hover, .svw-plakat .svw-plakat__button:focus { background: #a50d26; color: #fff; text-decoration: none; }

/* Fuß */
.svw-plakat .svw-plakat__fuss {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px 28px;
	background: var(--pl-ink);
	color: #fff;
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	line-height: 1;
}
.svw-plakat .svw-plakat__fuss span + span { color: #a3a7b0; }

/* Aktionen unter dem Plakat */
.svw-plakat-wrap .svw-plakat__aktionen { max-width: 520px; margin: 20px auto 0; display: flex; gap: 10px; flex-wrap: wrap; }
.svw-plakat-wrap .svw-plakat__vollbild, .svw-plakat-wrap .svw-plakat__teilen, .svw-plakat-wrap .svw-plakat__zurueck {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px;
	border: 2px solid #dedcd6;
	border-radius: 0;
	background: transparent;
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--pl-ink, #15171c);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}
.svw-plakat-wrap .svw-plakat__vollbild:hover, .svw-plakat-wrap .svw-plakat__teilen:hover, .svw-plakat-wrap .svw-plakat__zurueck:hover { border-color: #c8102e; color: #c8102e; text-decoration: none; }
.svw-plakat-wrap .svw-plakat__vollbild { border-color: #15171c; }
.svw-plakat-wrap .svw-plakat__vollbild svg, .svw-plakat-wrap .svw-plakat__teilen svg { flex: none; display: block; }
.svw-plakat-wrap .svw-plakat__teilen[hidden] { display: none; }

@media only screen and (max-width: 767px) {
	.svw-plakat-wrap { padding: 8px 0 40px; }
	.svw-plakat .svw-plakat__kopf { padding: 18px 20px 28px; }
	.svw-plakat .svw-plakat__body { padding: 28px 20px 26px; }
	.svw-plakat .svw-plakat__fuss { padding: 12px 20px; font-size: 14px; }
	.svw-plakat .svw-plakat__details dd, .svw-plakat .svw-plakat__text { font-size: 16px; }
}

/* Vollbild: nur das Plakat auf dunklem Grund, Website-Kopf und -Fuß ausgeblendet (für Screenshots) */
html.svw-plakat-vollbild, html.svw-plakat-vollbild body, html.svw-plakat-vollbild .body-wrapper { background: #0e0f12 !important; overflow: auto; }
/* Alles außer dem Pfad zum Plakat ausblenden: body > .body-wrapper > .content-wrapper > .gdlr-content */
html.svw-plakat-vollbild body > *:not(.body-wrapper) { display: none !important; }
html.svw-plakat-vollbild .body-wrapper > *:not(.content-wrapper):not(.gdlr-content) { display: none !important; }
html.svw-plakat-vollbild .content-wrapper > *:not(.gdlr-content) { display: none !important; }
html.svw-plakat-vollbild .content-wrapper, html.svw-plakat-vollbild .gdlr-content { padding: 0 !important; margin: 0 !important; background: transparent !important; }
html.svw-plakat-vollbild .svw-plakat-wrap { padding: 16px 16px 48px; box-sizing: border-box; }
html.svw-plakat-vollbild .svw-plakat { width: 100%; }
html.svw-plakat-vollbild .svw-plakat__aktionen { display: none !important; }
html.svw-plakat-vollbild .svw-plakat .svw-plakat__button, html.svw-plakat-vollbild .svw-plakat .svw-plakat__kicker { display: none !important; } /* Screenshot ohne Link-Knopf und ohne Badge „Termin“ */
html.svw-plakat-vollbild .svw-plakat .svw-plakat__body { padding-bottom: 34px; }
html.svw-plakat-vollbild .svw-plakat .svw-plakat__kopf::after { background-image: radial-gradient(circle, var(--pl-card) 5px, transparent 5.5px); }
/* Schließen: unter dem Ticket, nie darüber */
.svw-plakat-wrap .svw-plakat__schliessen {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	max-width: 520px;
	margin: 20px auto 0;
	padding: 10px 16px;
	border: 2px solid rgba(255,255,255,.35);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
html.svw-plakat-vollbild .svw-plakat-wrap { display: flex; flex-direction: column; align-items: center; }
.svw-plakat-wrap .svw-plakat__schliessen svg { flex: none; display: block; }
.svw-plakat-wrap .svw-plakat__schliessen:hover, .svw-plakat-wrap .svw-plakat__schliessen:focus { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.svw-plakat-wrap .svw-plakat__schliessen[hidden] { display: none; }
@media only screen and (max-width: 767px) {
	html.svw-plakat-vollbild .svw-plakat-wrap { padding: 12px 12px 36px; }
}