/*
 * Adventkalender: Galerie, Teilnehmerliste, Großansicht und Widget.
 *
 * Akzentfarbe: Einstellung im Plugin, sonst die Linkfarbe des Themes (per Skript ermittelt).
 * Ein Theme kann sie auch direkt setzen: :root { --ak-farbe: #8b1e2d; }
 */

.ak-kalender,
.ak-heute,
.ak-anm,
.ak-lightbox {
	--ak-akzent: var(--ak-farbe, #a4161a);
	--ak-gold: #c9a227;
	--ak-leise: color-mix(in srgb, currentColor 58%, transparent);
	--ak-linie: color-mix(in srgb, var(--ak-akzent) 26%, transparent);
	--ak-radius: 6px;
}

.ak-kalender {
	margin-block: 1.5em;
}

/* Hinweise */

body .ak-hinweis,
body .ak-heute__hinweis {
	margin: 0 0 1.2em;
	padding: .85em 1.1em;
	border: 0;
	border-radius: var(--ak-radius);
	background: color-mix(in srgb, var(--ak-akzent) 7%, transparent);
	line-height: 1.5;
}

.ak-hinweis::before,
.ak-heute__hinweis::before {
	content: "✦";
	margin-right: .5em;
	color: var(--ak-gold);
}

.ak-hinweis--vorschau {
	font-size: .9em;
}

/* Zierlinie mit Stern */

.ak-zierde {
	display: flex;
	align-items: center;
	gap: .9em;
	margin: 2.2em 0 .6em;
	color: var(--ak-gold);
	font-size: .95em;
	line-height: 1;
}

.ak-zierde::before,
.ak-zierde::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ak-linie) 25%, var(--ak-linie) 75%, transparent);
}

/* Galerie */

body .ak-kalender .ak-galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: 1.4em 1em;
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

@media (max-width: 480px) {
	body .ak-kalender .ak-galerie {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.1em .7em;
	}
}

body .ak-kalender .ak-kachel {
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-margin-top: 6rem;
}

.ak-kachel::before {
	content: none;
}

body .ak-kalender .ak-kachel__knopf {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--ak-radius);
	background: color-mix(in srgb, currentColor 8%, transparent);
	box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 4px 14px rgb(0 0 0 / .08);
	cursor: zoom-in;
	transition: transform .2s ease, box-shadow .2s ease;
}

.ak-kachel__knopf:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgb(0 0 0 / .14), 0 10px 24px rgb(0 0 0 / .14);
}

.ak-kachel__knopf:focus-visible {
	outline: 3px solid var(--ak-gold);
	outline-offset: -3px;
}

/* Kurze Markierung nach Klick in der Liste oder im Widget, innen liegend und ohne Überstand */
.ak-kachel--markiert .ak-kachel__knopf::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid var(--ak-gold);
	border-radius: inherit;
	pointer-events: none;
	animation: ak-markieren 2.5s ease forwards;
}

@keyframes ak-markieren {
	0%, 55% { opacity: 1; }
	100% { opacity: 0; }
}

.ak-kalender .ak-kachel__bild {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}

.ak-kachel__vorschau {
	position: absolute;
	inset: auto .4em .4em auto;
	padding: .15em .5em;
	border-radius: 999px;
	background: rgb(0 0 0 / .72);
	color: #fff;
	font-size: .72em;
	line-height: 1.5;
}

.ak-kachel__text {
	display: flex;
	flex-direction: column;
	gap: .1em;
	padding-top: .6em;
	line-height: 1.3;
}

.ak-kachel__nr {
	color: var(--ak-akzent);
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ak-kachel__nr::before,
.ak-heute__kopf::before,
.ak-lightbox__titel::before {
	content: "✦";
	margin-right: .4em;
	color: var(--ak-gold);
	letter-spacing: 0;
}

.ak-kachel__name {
	font-weight: 600;
}

.ak-kachel__adresse {
	color: var(--ak-leise);
	font-size: .9em;
}

/* Teilnehmerliste */

body .ak-kalender .ak-liste,
body .ak-kalender .ak-liste__eintraege {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .ak-kalender .ak-liste {
	margin-bottom: 1.5em;
}

body .ak-kalender .ak-liste li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.ak-liste li::before {
	content: none;
}

body .ak-kalender .ak-liste li.ak-liste__tag {
	display: grid;
	grid-template-columns: 5em minmax(0, 1fr);
	gap: 0 1em;
	padding: .95em .2em;
	border-bottom: 1px solid var(--ak-linie);
}

.ak-liste__nr {
	display: block;
	color: var(--ak-akzent);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.75em;
	line-height: 1;
	font-variant-numeric: lining-nums;
}

.ak-liste__tag--zu .ak-liste__nr {
	color: color-mix(in srgb, currentColor 28%, transparent);
}

.ak-liste__tag--heute .ak-liste__nr::after {
	content: "✦";
	margin-left: .15em;
	color: var(--ak-gold);
	font-size: .45em;
	vertical-align: super;
}

.ak-liste__wtag {
	display: block;
	margin-top: .35em;
	color: var(--ak-leise);
	font-size: .8em;
	white-space: nowrap;
}

.ak-liste__heute {
	display: block;
	margin-top: .1em;
	color: var(--ak-akzent);
	font-size: .8em;
	font-weight: 600;
}

body .ak-kalender .ak-liste li.ak-liste__eintrag + li.ak-liste__eintrag {
	margin-top: .7em;
}

body .ak-kalender .ak-liste__name {
	display: block;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none;
}

body .ak-kalender a.ak-liste__name:hover,
body .ak-kalender a.ak-liste__name:focus-visible {
	color: var(--ak-akzent);
}

a.ak-liste__name::after {
	content: " ›";
	color: var(--ak-akzent);
}

body .ak-kalender .ak-liste__tag--zu .ak-liste__name {
	color: var(--ak-leise);
	font-weight: 400;
}

.ak-liste__adresse {
	display: block;
	margin-top: .1em;
	color: var(--ak-leise);
	font-size: .9em;
}

/* Großansicht */

.ak-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #f4f1ea;
	overflow: hidden;
}

.ak-lightbox::backdrop {
	background: rgb(12 14 22 / .94);
}

.ak-lightbox[open] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	animation: ak-einblenden .2s ease;
}

@keyframes ak-einblenden {
	from { opacity: 0; }
	to { opacity: 1; }
}

.ak-lightbox__figur {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9em;
	min-width: 0;
	max-height: 100%;
	margin: 0;
	padding: 3.5em .5em 1.5em;
	box-sizing: border-box;
}

.ak-lightbox__bild {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 13em);
	max-height: calc(100dvh - 13em);
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgb(0 0 0 / .5);
	object-fit: contain;
}

.ak-lightbox__text {
	max-width: 40em;
	text-align: center;
	line-height: 1.45;
}

.ak-lightbox__titel {
	display: block;
	color: var(--ak-gold);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ak-lightbox__name {
	display: block;
	font-size: 1.2em;
	font-weight: 600;
}

.ak-lightbox__adresse,
.ak-lightbox__kurztext {
	display: block;
	opacity: .82;
}

.ak-lightbox__kurztext {
	margin-top: .4em;
	font-style: italic;
}

.ak-lightbox__karte {
	display: inline-block;
	margin-top: .4em;
	color: inherit;
	font-size: .9em;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ak-lightbox__knopf {
	display: grid;
	place-items: center;
	width: 2.8em;
	height: 2.8em;
	margin: 0 .6em;
	padding: 0;
	border: 1px solid rgb(255 255 255 / .25);
	border-radius: 50%;
	background: rgb(255 255 255 / .08);
	color: #fff;
	font: inherit;
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.ak-lightbox__knopf:hover,
.ak-lightbox__knopf:focus-visible {
	background: rgb(255 255 255 / .2);
	outline: none;
}

.ak-lightbox__knopf[hidden] {
	visibility: hidden;
	display: grid;
}

.ak-lightbox__zurueck { grid-column: 1; }
.ak-lightbox__weiter { grid-column: 3; }

.ak-lightbox__schliessen {
	position: absolute;
	top: .8em;
	right: .4em;
}

.ak-lightbox__zaehler {
	position: absolute;
	top: 1.3em;
	left: 1.2em;
	font-size: .85em;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.ak-lightbox[open] {
		grid-template-columns: 1fr;
	}

	.ak-lightbox__figur {
		grid-column: 1;
		grid-row: 1;
		padding-bottom: 5em;
	}

	.ak-lightbox__zurueck,
	.ak-lightbox__weiter {
		position: absolute;
		bottom: 1.2em;
		grid-column: auto;
	}

	.ak-lightbox__zurueck { left: 1em; }
	.ak-lightbox__weiter { right: 1em; }
}

body.ak-lightbox-offen {
	overflow: hidden;
}

/* Widget und [adventkalender_heute] */

.ak-heute__kopf {
	margin: 0 0 .55em;
	color: var(--ak-akzent);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ak-heute__kopf span {
	margin-left: .3em;
	color: var(--ak-leise);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

body .ak-heute .ak-heute__liste {
	display: grid;
	gap: .9em .6em;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .ak-heute .ak-heute__liste--mehrere {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

body .ak-heute .ak-heute__fenster {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	line-height: 1.3;
}

.ak-heute__fenster::before {
	content: none;
}

.ak-heute__bildlink {
	display: block;
	aspect-ratio: 1;
	margin-bottom: .45em;
	overflow: hidden;
	border-radius: var(--ak-radius);
	box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 4px 12px rgb(0 0 0 / .08);
}

.ak-heute__bildlink:focus-visible {
	outline: 3px solid var(--ak-gold);
	outline-offset: -3px;
}

.ak-heute .ak-heute__bild {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform .3s ease;
}

.ak-heute__bildlink:hover .ak-heute__bild {
	transform: scale(1.04);
}

.ak-heute__name {
	display: block;
	font-weight: 600;
}

.ak-heute__adresse {
	display: block;
	color: var(--ak-leise);
	font-size: .9em;
}

.ak-heute__liste--mehrere .ak-heute__fenster {
	font-size: .9em;
}

.ak-heute__mehr {
	margin: .8em 0 0;
	font-size: .92em;
}

@media (prefers-reduced-motion: reduce) {
	.ak-kachel__knopf,
	.ak-heute__bild,
	.ak-lightbox[open] {
		transition: none;
		animation: none;
	}
}

/* Anmeldeformular [adventkalender_anmeldung], Aufbau wie die Rennanmeldung */

.ak-anm {
	--ak-fehler: #b32d2e;
	--ak-ok: #1a7f37;
	--ak-feldlinie: #cfd6dc;
	max-width: 760px;
}

body .ak-anm .ak-anm__hinweis,
body .ak-anm .ak-anm__meldung {
	margin: 0 0 16px;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--ak-radius);
	background: color-mix(in srgb, var(--ak-akzent) 7%, transparent);
}

.ak-anm__hinweis::before {
	content: "✦";
	margin-right: .5em;
	color: var(--ak-gold);
}

body .ak-anm .ak-anm__meldung--fehler {
	background: #fbeeee;
	color: var(--ak-fehler);
}

body .ak-anm .ak-anm__meldung--ok {
	background: #eef8f0;
	color: var(--ak-ok);
}

.ak-anm__stand {
	margin: 0 0 14px;
	font-weight: 600;
}

.ak-anm__stand::before {
	content: "✦";
	margin-right: .45em;
	color: var(--ak-gold);
}

.ak-anm__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 18px;
	margin: 0 0 16px;
}

.ak-anm__feld {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
}

.ak-anm__feld small {
	color: var(--ak-leise);
	font-weight: 400;
}

.ak-anm__lab {
	display: block;
	font-weight: 600;
}

body .ak-anm .ak-anm__feld input,
body .ak-anm .ak-anm__feld textarea,
body .ak-anm .ak-anm__feld select {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 9px 11px;
	box-sizing: border-box;
	border: 1px solid var(--ak-feldlinie);
	border-radius: 4px;
	background: #fff;
	color: #222;
	font: inherit;
	font-size: 16px;
}

body .ak-anm .ak-anm__feld input:focus,
body .ak-anm .ak-anm__feld textarea:focus,
body .ak-anm .ak-anm__feld select:focus {
	border-color: var(--ak-akzent);
	outline: 2px solid var(--ak-akzent);
	outline-offset: 0;
}

.ak-anm__feld select option:disabled {
	color: #aaa;
}

.ak-anm__breit {
	grid-column: 1 / -1;
}

body .ak-anm .hat-fehler input,
body .ak-anm .hat-fehler textarea,
body .ak-anm .hat-fehler select {
	border-color: var(--ak-fehler);
	background: #fff8f8;
}

.ak-anm__fehler {
	color: var(--ak-fehler);
	font-size: 13px;
}

.ak-anm__info {
	margin: 4px 0 14px;
	color: var(--ak-leise);
	font-size: 13px;
}

body .ak-anm .ak-anm__senden {
	width: 100%;
	max-width: 320px;
	padding: 12px 28px;
	border: 0;
	border-radius: 4px;
	background: var(--ak-akzent);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

body .ak-anm .ak-anm__senden:hover,
body .ak-anm .ak-anm__senden:focus {
	filter: brightness(1.12);
}

.ak-anm__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 600px) {
	.ak-anm__raster {
		grid-template-columns: 1fr;
	}

	body .ak-anm .ak-anm__senden {
		max-width: none;
	}
}

.ak-liste__titel {
	margin: 0 0 .3em;
	color: var(--ak-akzent);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
}