/* Adventsfenster: public list, map and form. */

.af-list { list-style: none; margin: 0 0 1.5em; padding: 0; }
.af-list__item {
	display: flex; flex-wrap: wrap; gap: .25em .75em;
	padding: .45em .6em; border-bottom: 1px solid rgba(0,0,0,.08);
}
.af-list__item::before {
	/* Not counter(list-item): many theme resets set li { display: block },
	   which silently stops that counter from ever incrementing and every row
	   prints "0.". The day is already on the element as data, read it instead. */
	content: attr(data-af-day) ".";
	font-weight: 700; min-width: 2.2em; color: #7a2b2b;
}
.af-list__item--free { opacity: .6; }
.af-list__address { color: #444; }
.af-list__time { font-variant-numeric: tabular-nums; }
.af-list__extras { color: #7a2b2b; display: inline-flex; align-items: center; gap: .3em; }
.af-list__item--linked { cursor: pointer; }
.af-list__item.is-active { background: #fdf3e6; border-left: 5px solid #a02c2c; padding-left: .25em; }
.afk-pin.is-active .afk-pin__dot { stroke: #1a1a1a; stroke-width: 4; }
.afk-pin.is-active { transform-box: fill-box; }

.af-map { margin: 0 0 1.5em; }
.af-map__frame { overflow-x: auto; overflow-y: hidden; border-radius: 6px; -webkit-overflow-scrolling: touch; }
.af-map__frame:focus-visible { outline: 2px solid #a02c2c; outline-offset: 2px; }
.af-map__frame > svg { width: 100%; height: auto; display: block; }
.af-map__zoom { display: flex; gap: .3em; margin-top: .4em; }
.af-map__zoom button { font: 700 1.1em/1 sans-serif; min-width: 2.2em; min-height: 2.2em; cursor: pointer; }
.af-map.is-zoomed .af-map__frame { cursor: grab; }
.af-map__credit { font-size: .75em; color: #666; margin-top: .3em; }

.afk-bg { fill: #ece7dc; }
.afk-buildings path { fill: #d8d1c2; stroke: #7a7263; stroke-width: .7; }
.afk-water path { fill: none; stroke: #5b87a8; stroke-width: 2; }
.afk-track path { fill: none; stroke: #9a9280; stroke-width: .9; stroke-dasharray: 3 4; }
.afk-minor-casing path { fill: none; stroke: #6b6456; stroke-width: 7.5; stroke-linecap: round; }
.afk-major-casing path { fill: none; stroke: #6b6456; stroke-width: 9; stroke-linecap: round; }
.afk-minor path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; }
.afk-major path { fill: none; stroke: #f4d99a; stroke-width: 6; stroke-linecap: round; }

.afk-pin { cursor: pointer; }
/* The time is carried by tone, not by hue: a filled disc against an open one.
   Colour rides along for the screen, but grey recycled newsprint keeps the
   difference readable on its own. */
.afk-pin__dot { fill: #a02c2c; stroke: #fff; stroke-width: 2.5; }
.afk-pin__label { fill: #fff; }
.afk-pin--zeit1 .afk-pin__dot { fill: #fff; stroke: #a02c2c; stroke-width: 3.5; }
.afk-pin--zeit1 .afk-pin__label { fill: #7a2020; }
.afk-pin--zeit1 .afk-pin__tray { stroke: #7a2020; }
.afk-pin--zeit2 .afk-pin__dot { fill: #1f4e79; stroke: #fff; stroke-width: 2.5; }
.afk-pin--zeit2 .afk-pin__tray { stroke: #1f4e79; }
.afk-pin--zeit2 .afk-pin__label { fill: #fff; }
.afk-pin--zeit3 .afk-pin__dot { fill: #fff; stroke: #1f4e79; stroke-width: 3.5; }
.afk-pin--zeit3 .afk-pin__label { fill: #1f4e79; }
.afk-pin__label { font: 700 13px/1 sans-serif; }
.afk-pin.is-active .afk-pin__dot,
.afk-pin:hover .afk-pin__dot,
.afk-pin:focus .afk-pin__dot { stroke: #1a1a1a; stroke-width: 4; }
.afk-pin:focus .afk-pin__dot { stroke: #1a1a1a; stroke-width: 4; }

.af-form { max-width: 34em; }
/* Fieldsets default to min-width: min-content, so the day grid would push the form past a phone's width. */
fieldset.af-field { min-width: 0; }
.af-field { display: flex; flex-direction: column; gap: .25em; margin: 0 0 1em; }
.af-field--check { flex-direction: column; gap: .5em; }
.af-field--check label { display: flex; align-items: flex-start; gap: .5em; font-weight: 400; }
.af-field--time { border: 0; padding: 0; }
.af-field--time legend { font-weight: 600; padding: 0; }
.af-time-option {
	display: inline-flex; align-items: center; gap: .4em;
	padding: .55em .9em; margin: .25em .5em .25em 0;
	border: 1px solid #6b6456; border-radius: 4px;
	font-weight: 400; cursor: pointer;
}
.af-time-option input { margin: 0; }
.af-time-option:has(:checked) { background: #fdf3e6; border-color: #a02c2c; font-weight: 600; }
.af-time-option:has(:focus-visible) { outline: 2px solid #1f4e79; outline-offset: 2px; }

.af-field--day { border: 0; padding: 0; }
.af-field--day legend { font-weight: 600; padding: 0; }
.af-day-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2.75em, 1fr));
	gap: .4em;
	max-width: 26em;
}
.af-day-option {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: 2.75em;
	border: 1px solid #6b6456; border-radius: 4px;
	font-weight: 600; cursor: pointer;
}
.af-day-option input {
	position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer;
}
.af-day-option:has(:checked) { background: #fdf3e6; border-color: #a02c2c; color: #a02c2c; }
.af-day-option:has(:focus-visible) { outline: 2px solid #1f4e79; outline-offset: 2px; }
.af-day-option.is-taken,
.af-day-option.is-past {
	border-style: dashed; color: #888; font-weight: 400;
	text-decoration: line-through; opacity: .6;
}
.af-day-option.is-taken input,
.af-day-option.is-past input,
.af-day-option.is-held input { cursor: not-allowed; }
.af-day-option.is-held { border-color: #c98a1e; color: #8a5e10; background: #fdf3e0; font-weight: 400; }
.af-day-option:has(input:disabled) { cursor: not-allowed; }
.af-field label { font-weight: 600; }
.af-field input[type="text"],
.af-field input[type="email"],
.af-field select { padding: .45em .55em; font: inherit; }
.af-hint { font-size: .85em; min-height: 1.2em; }
.af-hint--error { color: #a02c2c; }
.af-hint--ok { color: #2c7a2c; }
.af-hp { position: absolute; left: -9999px; }

.af-notice { padding: .7em 1em; border-radius: 4px; }
.af-notice--ok { background: #eaf6ea; border: 1px solid #b6dcb6; }
.af-notice--error { background: #fdecec; border: 1px solid #e6b3b3; }

@media print {
	.af-form, .af-manage, .af-map__zoom { display: none; }
	.af-list__item { break-inside: avoid; }
	/* Paper is the background; a printed area fill only muddies everything. */
	.afk-bg { fill: none; }
	.afk-buildings path { fill: none; stroke: #000; stroke-width: .7; stroke-opacity: .55; }
	.afk-water path { stroke: #000; stroke-opacity: .6; stroke-width: 1.6; stroke-dasharray: 6 3; }
	.afk-track path { stroke: #000; stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 4 3; }
	.afk-minor-casing path, .afk-major-casing path { stroke: none; }
	.afk-minor path { stroke: #000; stroke-opacity: .75; stroke-width: 2.2; }
	.afk-major path { stroke: #000; stroke-opacity: .85; stroke-width: 5; }
	.afk-labels text { fill: #000; fill-opacity: .8; }
	.afk-pin__halo circle, .afk-pin__halo rect { fill: #fff; stroke: #fff; }
	.afk-pin__dot { fill: #111; stroke: #fff; }
	.afk-pin__label { fill: #fff; }
	.afk-pin--zeit1 .afk-pin__dot { fill: #fff; stroke: #111; stroke-width: 3.5; }
	.afk-pin--zeit1 .afk-pin__label { fill: #111; }
	.afk-pin__tray { fill: #fff; stroke: #111; }
	.afk-badge path, .afk-badge rect { fill: #111; }
	.afk-leader { stroke: #111; stroke-opacity: .85; }
	.afk-anchor { fill: #111; }
	.afk-legend__panel { fill: #fff; fill-opacity: 1; stroke: #111; }
	.afk-legend__text, .afk-credit__text { fill: #111; }
	.afk-credit__panel { fill: #fff; fill-opacity: 1; }
}

.af-notice--hint { background: #fff8e6; border: 1px solid #e8d5a0; }

.af-manage { max-width: 34em; }
.af-manage h3 { margin-top: 0; }
.af-button--quiet { background: none; border: 1px solid currentColor; }

/* Street names on the base map. */
.afk-labels text { fill: #4f4838; font: 600 10px/1 sans-serif; letter-spacing: .02em; }
.afk-pin__hit { cursor: pointer; }
.af-field[hidden] { display: none; }
.af-list__item--linked:hover, .af-list__item--linked:focus-within { background: #fdf3e6; }

/* Option markers on the pins, and their key below the map. */
/* Pin and tray share one light outline, so it is never in doubt which symbol
   belongs to which pin. Symbols are dark on a light tray: 10:1 on screen and
   still 5.9:1 on grey recycled paper. */
.afk-pin__halo circle, .afk-pin__halo rect { fill: #fff; stroke: #ece7dc; stroke-width: 5; }
.afk-pin__tray { fill: #fff; stroke: #a02c2c; stroke-width: 2; }
.afk-badge path, .afk-badge rect { fill: #4a3a12; }
.afk-badge--becher path { fill: #6b2020; }

/* Key drawn inside the map. */
.afk-legend__panel { fill: #fff; fill-opacity: .88; stroke: #d8d2c6; stroke-width: 1; }
.afk-legend__text { fill: #3a352d; font: 400 13px/1 sans-serif; }
.afk-credit__panel { fill: #fff; fill-opacity: .8; }
.afk-credit__text { fill: #5c564b; font: 400 11px/1 sans-serif; }

/* Line from a moved pin back to its house. */
.afk-leader { stroke: #a02c2c; stroke-width: 1.2; stroke-dasharray: 3 2; opacity: .8; }
.afk-anchor { fill: #a02c2c; stroke: #fff; stroke-width: 1; }


/* Print style: grey recycled newsprint swallows every light tone, so the paper
   itself becomes the background and everything else is drawn in ink. */
.afk-print .afk-bg { fill: none; }
.afk-print .afk-buildings path { fill: none; stroke: #000; stroke-width: .7; stroke-opacity: .55; }
.afk-print .afk-water path { stroke: #000; stroke-opacity: .6; stroke-width: 1.6; stroke-dasharray: 6 3; }
.afk-print .afk-track path { stroke: #000; stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 4 3; }
.afk-print .afk-leader { stroke: #111; stroke-opacity: .85; }
.afk-print .afk-anchor { fill: #111; }
.afk-print .afk-pin__halo circle, .afk-print .afk-pin__halo rect { fill: #fff; stroke: #fff; }
.afk-print .afk-minor-casing path, .afk-print .afk-major-casing path { stroke: none; }
.afk-print .afk-minor path { stroke: #000; stroke-opacity: .75; stroke-width: 2.2; }
.afk-print .afk-major path { stroke: #000; stroke-opacity: .85; stroke-width: 5; }
.afk-print .afk-labels text { fill: #000; fill-opacity: .8; font-weight: 600; }
.afk-print .afk-pin__dot { fill: #111; stroke: #fff; stroke-width: 2.5; }
.afk-print .afk-pin__label { fill: #fff; }
.afk-print .afk-pin--zeit1 .afk-pin__dot { fill: #fff; stroke: #111; stroke-width: 3.5; }
.afk-print .afk-pin--zeit1 .afk-pin__label { fill: #111; }
.afk-print .afk-legend__panel { fill: #fff; fill-opacity: 1; stroke: #111; }
.afk-print .afk-legend__text, .afk-print .afk-credit__text { fill: #111; }
.afk-print .afk-credit__panel { fill: #fff; fill-opacity: 1; }
.afk-print .afk-pin__tray { fill: #fff; stroke: #111; }
.afk-print .afk-badge path, .afk-print .afk-badge rect { fill: #111; }

/* A field nobody is meant to see or fill in. Off-canvas rather than
   display:none or visibility:hidden, since those two are exactly what a
   script checks for before deciding a field is safe to skip. */
.af-field--trap {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Themes are not required to define this, and without it the label sits
   visibly on the page instead of only reaching a screen reader. */
.af-form .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}