/*
 * DMA site components.
 *
 * Shapes are square, like the logo and the site's original buttons.
 * Colour roles: the darker action green (#4a6310) carries white text (6.8:1) on
 * buttons, links and the header bar. The bright brand green (#98c21d) is used as an
 * accent: rules, markers, icons, and as text only on dark backgrounds (7.9:1 on ink).
 */
:root {
	--dma-brand: #98c21d;
	--dma-action: #4a6310;
	--dma-action-dark: #3a4e0c;
	--dma-ink: #1d201d;
	--dma-hall: #000; /* the exhibition images are cut out on pure black */
	--dma-text: #3b3936;
	--dma-muted: #585451;
	--dma-stone: #f3f0e8;
	--dma-line: #ddd8cc;
	--dma-closed: #b3261e;
	--dma-sign: #7b4b2a;
	--dma-a9: #1b4c9b;
	--dma-shadow: 0 1px 2px rgb(29 32 29 / 8%), 0 8px 24px rgb(29 32 29 / 10%);
	--dma-shadow-strong: 0 2px 4px rgb(0 0 0 / 20%), 0 24px 60px rgb(0 0 0 / 45%);
	--dma-display: "Rift", "Fira Sans Condensed", "Arial Narrow", sans-serif;
	--dma-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--dma-gutter: clamp(16px, 4vw, 40px);
	--dma-width: 1200px;
	--dma-space: clamp(48px, 6.5vw, 96px);
}

/* ---------- site-wide fixes ---------- */

/* Links inside running text must not rely on colour alone (WCAG 1.4.1). */
.elementor-widget-text-editor a:not(.dma-button):not(.elementor-button),
.elementor-widget-theme-post-content a:not(.dma-button):not(.elementor-button) {
	text-decoration: underline;
	text-underline-offset: .15em;
}

:where(a, button, input, select, textarea, summary, video):focus-visible {
	outline: 3px solid var(--dma-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #fff;
}

/* The cookie banner ran past the right edge on phones. */
@media (max-width: 600px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		box-sizing: border-box;
		max-width: calc(100vw - 16px);
		left: 8px;
		right: 8px;
		width: auto;
	}
}

/* Pre-existing contrast failures outside the new pages: WooCommerce's default olive
   price colour (#958e09, 3.4:1) and the footer menu's active item (#c8d5dc on grey). */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--dma-ink) !important;
}

.elementor-location-footer .elementor-nav-menu .elementor-item-active,
.elementor-location-footer .elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--dma-ink) !important;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- page frame ---------- */

/* Pages built from dma-section blocks run edge to edge inside the theme's boxed single-page template. */
.elementor-location-single > .e-con:has(.elementor-widget-theme-post-content .dma-section, .elementor-widget-theme-post-content .dma-hero) {
	--content-width: 100% !important;
	--padding-top: 0 !important;
	--padding-right: 0 !important;
	--padding-bottom: 0 !important;
	--padding-left: 0 !important;
}

.elementor-location-single > .e-con:has(.elementor-widget-theme-post-content .dma-section, .elementor-widget-theme-post-content .dma-hero) > .e-con-inner {
	max-width: none;
	padding: 0;
}

.e-con.dma-section {
	--padding-top: calc(var(--dma-space) / 2);
	--padding-bottom: calc(var(--dma-space) / 2);
	--padding-left: var(--dma-gutter);
	--padding-right: var(--dma-gutter);
	--content-width: var(--dma-width);
	--gap: 24px;
	--row-gap: 24px;
	font-family: var(--dma-body);
	color: var(--dma-text);
}

.e-con.dma-section:last-child {
	--padding-bottom: var(--dma-space);
}

.e-con.dma-tone {
	--padding-top: var(--dma-space);
	--padding-bottom: var(--dma-space);
}

.e-con.dma-tone + .e-con.dma-section:not(.dma-tone):not(.dma-split),
.e-con.dma-split + .e-con.dma-section:not(.dma-tone):not(.dma-split) {
	--padding-top: var(--dma-space);
}

.e-con.dma-tone--stone {
	background: var(--dma-stone);
}

.e-con.dma-tone--ink,
.e-con.dma-tone--hall {
	background: var(--dma-ink);
	color: #e9e6df;
}

.e-con.dma-tone--hall {
	background: var(--dma-hall);
}

.e-con.dma-tone--green {
	background: var(--dma-action);
	color: #fff;
}

/* A section whose only content is a shortcode that found nothing to show disappears. */
.e-con.dma-section--auto:not(:has(.dma-card, .dma-newsfeature, .dma-ntile, .dma-notice)) {
	display: none;
}

/* ---------- type ---------- */

.dma-section h2,
.dma-section-head h2,
.dma-h2 .elementor-heading-title,
.dma-section .elementor-widget-heading h2.elementor-heading-title {
	margin: 0;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	font-weight: 700;
	line-height: .98;
	text-transform: uppercase;
}

.dma-tone--ink h2,
.dma-tone--hall h2,
.dma-tone--green h2,
.dma-tone--ink .elementor-widget-heading h2.elementor-heading-title,
.dma-tone--hall .elementor-widget-heading h2.elementor-heading-title,
.dma-tone--green .elementor-widget-heading h2.elementor-heading-title {
	color: #fff;
}

.dma-page-title .elementor-heading-title {
	margin: 0;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: clamp(2.6rem, 7vw, 4.5rem);
	font-weight: 700;
	line-height: .95;
	text-transform: uppercase;
}

.e-con.dma-page-head {
	--gap: 16px;
	--row-gap: 16px;
}

/* Small label above a heading, with a short bar in the brand green. */
.dma-kicker .elementor-heading-title,
p.dma-kicker,
.dma-kicker-h .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--dma-action);
	font-family: var(--dma-display);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.1;
	text-transform: uppercase;
}

.dma-kicker .elementor-heading-title::before,
.dma-kicker-h .elementor-heading-title::before,
p.dma-kicker::before {
	content: "";
	flex: none;
	width: 32px;
	height: 4px;
	background: var(--dma-brand);
}

.dma-tone--ink .dma-kicker .elementor-heading-title,
.dma-tone--hall .dma-kicker .elementor-heading-title,
.dma-tone--green .dma-kicker .elementor-heading-title {
	color: var(--dma-brand);
}

.dma-tone--green .dma-kicker .elementor-heading-title {
	color: #fff;
}

.dma-tone--green .dma-kicker .elementor-heading-title::before {
	background: #fff;
}

.dma-lead,
.dma-lead p {
	max-width: 46rem;
	margin: 0;
	font-size: clamp(1.05rem, 1.6vw, 1.22rem);
	line-height: 1.6;
	color: var(--dma-text);
}

.dma-tone--ink .dma-lead p,
.dma-tone--hall .dma-lead p,
.dma-tone--green .dma-lead p {
	color: #e9e6df;
}

.dma-tone--green .dma-lead p {
	color: #fff;
}

.dma-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-bottom: 24px;
}

.elementor .dma-section-head a {
	font-family: var(--dma-body);
	font-size: 1rem;
	color: var(--dma-action);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* Running text set in columns, like a magazine page. */
.dma-columns p {
	margin: 0 0 1em;
	font-size: 1.05rem;
	line-height: 1.65;
	break-inside: avoid;
}

@media (min-width: 760px) {
	.dma-columns .elementor-widget-container,
	.dma-columns:not(:has(.elementor-widget-container)) {
		column-count: 2;
		column-gap: 48px;
	}
}

@media (min-width: 1100px) {
	.dma-columns .elementor-widget-container,
	.dma-columns:not(:has(.elementor-widget-container)) {
		column-count: 3;
	}
}

/* Date badge: ink with brand-green text, tilted like the site's old "Täglich geöffnet" sticker. */
.dma-badge,
.dma-card__meta,
.dma-spotlight__kicker {
	display: inline-block;
	align-self: flex-start;
	margin: 0;
	padding: .3em .7em .25em;
	background: var(--dma-ink);
	color: var(--dma-brand);
	font-family: var(--dma-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1;
	text-transform: uppercase;
}

/* ---------- buttons and links ---------- */

.elementor a.dma-button,
a.dma-button,
.elementor .dma-actions .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .75em 1.5em .7em;
	border: 2px solid var(--dma-action);
	border-radius: 0;
	background: var(--dma-action);
	color: #fff;
	font-family: var(--dma-display);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .15s, border-color .15s, color .15s;
}

/* Outlined: for onward links that should not compete with the main buttons (visitor band). */
.elementor a.dma-button--outline,
a.dma-button--outline {
	min-height: 44px;
	padding: .65em 1.1em .6em;
	border-color: var(--dma-ink);
	background: transparent;
	color: var(--dma-ink);
	font-size: 1.05rem;
}

/* Hover and focus fill them with the action green (white on it: 6.8:1). */
.elementor a.dma-button.dma-button--outline:hover,
.elementor a.dma-button.dma-button--outline:focus-visible {
	border: 2px solid var(--dma-action);
	background: var(--dma-action);
	color: #fff;
}

/* The kit's own hover style sets "border: none", which shrank buttons by 4px and made them jump. */
.elementor a.dma-button:hover,
.elementor a.dma-button:focus-visible,
.elementor .dma-actions .elementor-button:hover,
.elementor .dma-actions .elementor-button:focus-visible {
	border-style: solid;
	border-width: 2px;
	border-color: var(--dma-ink);
	background: var(--dma-ink);
	color: #fff;
}

.elementor .dma-actions .dma-button--ghost .elementor-button,
.elementor .dma-tone--ink .dma-actions .elementor-button,
.elementor .dma-tone--hall .dma-actions .elementor-button,
.elementor .dma-tone--green .dma-actions .elementor-button {
	border-color: #fff;
	background: transparent;
	color: #fff;
}

.elementor .dma-actions .dma-button--ghost .elementor-button:hover,
.elementor .dma-actions .dma-button--ghost .elementor-button:focus-visible,
.elementor .dma-tone--ink .dma-actions .elementor-button:hover,
.elementor .dma-tone--hall .dma-actions .elementor-button:hover,
.elementor .dma-tone--green .dma-actions .elementor-button:hover,
.elementor .dma-tone--ink .dma-actions .elementor-button:focus-visible,
.elementor .dma-tone--hall .dma-actions .elementor-button:focus-visible,
.elementor .dma-tone--green .dma-actions .elementor-button:focus-visible {
	border-style: solid;
	border-width: 2px;
	border-color: #fff;
	background: #fff;
	color: var(--dma-ink);
}

.e-con.dma-actions {
	--display: flex;
	--flex-direction: row;
	--flex-wrap: wrap;
	--gap: 12px;
	--row-gap: 12px;
	--column-gap: 12px;
	padding: 0 !important;
}

.dma-actions > .elementor-widget {
	margin: 0 !important;
}

.elementor a.dma-more,
a.dma-more {
	display: inline-block;
	margin-top: .25rem;
	color: var(--dma-action);
	font-family: var(--dma-body);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.dma-more::after {
	content: " →";
}

/* ---------- opening status (header bar and inline) ---------- */

.dma-status {
	display: inline-flex;
	align-items: center;
	font-family: var(--dma-body);
	line-height: 1.3;
}

.elementor .dma-status a {
	display: inline-flex;
	align-items: center;
	color: inherit;
	font: inherit;
	text-decoration: none !important;
}

.dma-status a:hover .dma-status__text {
	text-decoration: underline;
}

.dma-status__dot {
	flex: none;
	width: .62em;
	height: .62em;
	margin-right: .5em;
	border-radius: 50%;
	background: var(--dma-brand);
	box-shadow: 0 0 0 .16em var(--dma-ink);
}

.is-closed > .dma-status__dot,
.dma-status.is-closed .dma-status__dot {
	background: var(--dma-closed);
}

.dma-status--bar,
.elementor .dma-status--bar a,
.elementor .dma-status--bar .dma-status__text {
	color: #fff !important;
	font-size: .95rem;
	font-weight: 600;
}

.dma-status--bar .dma-status__dot {
	box-shadow: 0 0 0 .16em #fff;
}

.dma-status--text {
	font-weight: 600;
	color: var(--dma-ink);
}

.dma-week {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--dma-body);
}

.dma-week li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--dma-line);
	color: var(--dma-text);
}

.dma-week li:first-child {
	font-weight: 700;
	color: var(--dma-ink);
}

.dma-week li.is-closed span:last-child {
	color: var(--dma-closed);
}

/* ---------- hero ---------- */

.e-con.dma-hero {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	--row-gap: 0;
	display: grid !important;
	position: relative;
	grid-template-columns: 100%;
	grid-template-areas: "hero" "spot";
	background: var(--dma-ink);
	font-family: var(--dma-body);
}

.dma-hero > .elementor-widget-image.dma-hero__media,
.dma-hero > .e-con.dma-hero__content {
	grid-area: hero;
	width: 100%;
	min-width: 0;
}

.dma-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: min(80svh, 640px);
	max-height: 780px;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: 0;
}

.e-con.dma-hero__content {
	--padding-top: 32px;
	--padding-bottom: clamp(32px, 6vw, 80px);
	--padding-left: var(--dma-gutter);
	--padding-right: var(--dma-gutter);
	--content-width: var(--dma-width);
	--gap: 18px;
	--row-gap: 18px;
	--justify-content: flex-end;
	position: relative;
	z-index: 1;
	align-self: stretch;
	background: linear-gradient(to top, rgb(16 18 16 / 88%) 0%, rgb(16 18 16 / 68%) 40%, rgb(16 18 16 / 12%) 75%, rgb(16 18 16 / 0%) 100%);
	color: #fff;
}

.dma-hero__content > .e-con-inner {
	justify-content: flex-end;
	gap: 18px;
}

.dma-hero__title .elementor-heading-title {
	max-width: 17ch;
	margin: 0;
	color: #fff;
	font-family: var(--dma-display);
	font-size: clamp(2.6rem, 7.5vw, 5.6rem);
	font-weight: 700;
	line-height: .9;
	text-transform: uppercase;
	text-shadow: 0 2px 16px rgb(0 0 0 / 35%);
}

.dma-hero__lead,
.dma-hero__lead p {
	max-width: 36rem;
	margin: 0;
	color: #fff;
	font-size: clamp(1.1rem, 1.9vw, 1.35rem);
	line-height: 1.5;
}

/* The current Aktion: a card raised off the photo, with a brand-green edge. */
.dma-hero__spotlight {
	grid-area: spot;
	position: relative;
	z-index: 2;
	min-width: 0;
	padding: 0 var(--dma-gutter) 28px;
}

.dma-hero__spotlight:not(:has(.dma-spotlight)) {
	display: none;
}

.dma-spotlight {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 16px;
	align-items: start;
	padding: 16px;
	border-top: 6px solid var(--dma-brand);
	background: #fff;
	color: var(--dma-text);
	box-shadow: var(--dma-shadow-strong);
}

.dma-spotlight__media img {
	display: block;
	width: 104px;
	height: 104px;
	object-fit: cover;
	border-radius: 0;
}

.dma-spotlight__kicker {
	margin: 0 0 8px;
	transform: rotate(-2deg);
}

.dma-spotlight__title {
	margin: 0 0 6px;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.dma-spotlight__text {
	margin: 0 0 14px;
	font-size: .98rem;
	line-height: 1.45;
}

.elementor .dma-spotlight a.dma-button {
	min-height: 44px;
	font-size: 1.05rem;
}

@media (min-width: 1024px) {
	.e-con.dma-hero {
		grid-template-areas: "hero";
	}

	/* Sits in the photo, level with the headline block and clear of the bottom edge. */
	.dma-hero__spotlight {
		grid-area: hero;
		align-self: center;
		justify-self: end;
		width: 390px;
		margin: 48px max(var(--dma-gutter), calc((100% - var(--dma-width)) / 2)) 0 0;
		padding: 0;
	}

	.dma-spotlight {
		grid-template-columns: 1fr;
		padding: 0 0 24px;
	}

	.dma-spotlight__media img {
		width: 100%;
		height: 190px;
	}

	.dma-spotlight__body {
		padding: 0 24px;
		margin-top: -18px;
		position: relative;
	}

	.e-con.dma-hero:has(.dma-spotlight) .dma-hero__content > .e-con-inner {
		padding-right: 430px;
	}
}

/* ---------- visitor information band ---------- */

.e-con.dma-visit > .e-con-inner,
.e-con.dma-visit__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}

.e-con.dma-visit > .e-con-inner > .elementor-widget-heading {
	grid-column: 1 / -1;
}

/* Today: state, the hours in large type and a strip of the week. */
.dma-today p {
	margin: 0;
}

.dma-today__big {
	margin: 4px 0 18px !important;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: clamp(2.8rem, 5.5vw, 4.2rem);
	font-weight: 700;
	line-height: .95;
	text-transform: uppercase;
}

.dma-days__label {
	margin: 0 0 8px !important;
	color: var(--dma-muted);
	font-family: var(--dma-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* The coming days as dated tiles, so they read as real opening times rather than a weekly rule. */
.dma-days {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.dma-day {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	min-height: 96px;
	padding: 10px 12px 10px;
	border: 2px solid var(--dma-ink);
	background: #fff;
}

.dma-day__date {
	display: flex;
	align-items: baseline;
	gap: 6px;
	line-height: 1;
}

.dma-day__wd {
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.9rem;
	font-weight: 700;
	text-transform: uppercase;
}

.dma-day__dm {
	color: var(--dma-muted);
	font-size: .95rem;
	font-weight: 600;
}

.dma-day__h {
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1;
}

/* Closed days are hatched, and say so in words. */
.dma-day.is-closed {
	background: repeating-linear-gradient(-45deg, #fff 0 7px, #ede7da 7px 14px);
}

.dma-day.is-closed .dma-day__h {
	color: var(--dma-closed);
	font-family: var(--dma-body);
	font-size: 1rem;
}

/* Ticket: stub and body divided by a perforation, with notches punched out of the edge.
   The notches are cut with a mask, so the outline and the offset shadow, drawn by
   drop-shadow filters on the wrapper, follow the real shape. */
.dma-ticket-wrap {
	filter:
		drop-shadow(2px 0 0 var(--dma-ink))
		drop-shadow(-2px 0 0 var(--dma-ink))
		drop-shadow(0 2px 0 var(--dma-ink))
		drop-shadow(0 -2px 0 var(--dma-ink))
		drop-shadow(6px 6px 0 var(--dma-ink));
	margin: 2px 8px 8px 2px;
}

.dma-ticket {
	--notch: 13px;
	--stub: 64px;
	display: grid;
	grid-template-columns: var(--stub) 1fr;
	background: #fff;
	-webkit-mask:
		radial-gradient(circle var(--notch) at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
	mask:
		radial-gradient(circle var(--notch) at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle var(--notch) at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}

.dma-ticket__stub {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dma-ink);
}

/* The perforation between the notches. */
.dma-ticket__stub::after {
	content: "";
	position: absolute;
	top: calc(var(--notch) + 6px);
	bottom: calc(var(--notch) + 6px);
	right: -2px;
	border-right: 4px dotted var(--dma-stone);
}

.dma-ticket__stub span {
	color: var(--dma-brand);
	font-family: var(--dma-display);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.dma-ticket__body {
	padding: 18px 22px 20px;
}

.dma-ticket__body p {
	margin: 0;
}

.dma-ticket__title {
	margin: 0;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.dma-ticket__prices {
	margin: 8px 0 12px;
}

.dma-ticket__row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px dotted var(--dma-line);
}

.dma-ticket__row dt {
	color: var(--dma-text);
	font-size: 1.02rem;
}

.dma-ticket__row dd {
	margin: 0 0 0 auto;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.dma-ticket__note {
	color: var(--dma-muted);
	font-size: .92rem;
	line-height: 1.45;
}

/* Directions: the brown tourist sign visitors know from the motorway. */
.dma-sign p {
	margin: 0;
}

.dma-sign__board {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "picto name" "road road";
	gap: 12px 16px;
	align-items: center;
	padding: 18px 20px;
	border: 4px solid var(--dma-sign);
	outline: 3px solid #fff;
	outline-offset: -10px;
	background: var(--dma-sign);
	color: #fff;
	box-shadow: 6px 6px 0 var(--dma-ink);
}

.dma-sign__picto {
	grid-area: picto;
	width: 104px;
	height: auto;
	margin-left: 6px;
	fill: currentColor;
	color: #fff;
}

.dma-sign__name {
	grid-area: name;
	padding-right: 6px;
	color: #fff;
	font-family: var(--dma-display);
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.dma-sign__road {
	grid-area: road;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 6px 6px !important;
	padding-top: 10px;
	border-top: 2px solid rgb(255 255 255 / 70%);
	font-family: var(--dma-display);
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
}

.dma-sign__a9 {
	padding: 2px 10px 0;
	border: 2px solid #fff;
	background: var(--dma-a9);
	color: #fff;
	font-size: 1.4rem;
}

.dma-sign__address {
	margin-top: 18px !important;
	color: var(--dma-ink);
	font-weight: 700;
	font-size: 1.05rem;
}

.dma-sign__facts {
	margin-top: 4px !important;
	color: var(--dma-text);
	font-size: .95rem;
	line-height: 1.45;
}

.dma-sign__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin-top: 8px !important;
}

/* ---------- visitor board ([dma_visit]): hours, prices, directions ----------
   Three columns on one grid. Every column has the same four rows (heading, object, details,
   link) and the rows line up across the columns (subgrid), so the headings, the three objects,
   their notes and their links sit on common lines. The objects share one treatment, a 2px ink
   outline without shadow, and are stretched to the same height; one note and one link each. */

.e-con.dma-visit > .e-con-inner > .dma-visit__board {
	grid-column: 1 / -1;
}

.dma-vb {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px clamp(28px, 3.5vw, 48px);
	font-family: var(--dma-body);
}

.dma-vb__col {
	display: grid;
	grid-template-rows: auto auto auto auto;
	row-gap: 16px;
	align-content: start;
	min-width: 0;
}

@media (min-width: 700px) {
	.dma-vb {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.dma-vb {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 700px) {
	.dma-vb__col {
		grid-row: span 4;
		grid-template-rows: subgrid;
	}

	.dma-vb__object {
		min-height: 200px;
	}
}

.dma-vb p {
	margin: 0;
}

.dma-vb__head {
	margin: 0;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1;
	text-transform: uppercase;
}

.dma-vb__object {
	display: flex;
}

.dma-vb__object > * {
	flex: 1;
	min-width: 0;
}

.dma-vb__detail {
	color: var(--dma-text);
	font-size: 1rem;
	line-height: 1.45;
}

.dma-vb__detail p + p {
	margin-top: 4px;
}

.dma-vb__more {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	align-self: start;
}

/* Hours: a plaque, ink band with the state over the hours in large type. */
.dma-vb .dma-today__board {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--dma-ink);
	background: #fff;
}

.dma-vb .dma-today__main {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	padding: 16px 20px 20px;
}

.dma-vb .dma-today__big {
	margin: 0 !important;
	font-size: clamp(2.5rem, 3.6vw, 3.4rem);
}


/* The coming days as one strip, like a row of a timetable. */
.dma-vb .dma-days__label {
	margin: 0 0 6px !important;
	font-size: 1rem;
}

.dma-vb .dma-days {
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	margin: 0;
}

.dma-vb .dma-day {
	align-items: center;
	gap: 2px;
	min-height: 0;
	padding: 2px 2px 4px;
	border: 0;
	border-left: 1px solid var(--dma-line);
	background: none;
	text-align: center;
}

.dma-vb .dma-day:first-child {
	border-left: 0;
}

.dma-vb .dma-day.is-closed {
	background: none;
}

.dma-vb .dma-day__date {
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.dma-vb .dma-day__wd {
	font-size: 1.35rem;
}

.dma-vb .dma-day__dm {
	font-size: .78rem;
}

.dma-vb .dma-day__h {
	font-size: 1.1rem;
	white-space: nowrap;
}

.dma-vb .dma-day.is-closed .dma-day__h {
	font-size: .72rem;
	font-weight: 700;
}

/* Prices: the ticket fills the object row; notes and link move out below it. */
.dma-vb .dma-ticket-wrap {
	display: flex;
	margin: 2px;
	filter:
		drop-shadow(2px 0 0 var(--dma-ink))
		drop-shadow(-2px 0 0 var(--dma-ink))
		drop-shadow(0 2px 0 var(--dma-ink))
		drop-shadow(0 -2px 0 var(--dma-ink));
}

.dma-vb .dma-ticket {
	flex: 1;
}

.dma-vb .dma-ticket__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dma-vb .dma-ticket__prices {
	margin-bottom: 0;
}

.dma-vb .dma-ticket__row:last-child {
	border-bottom: 0;
}

.dma-vb .dma-ticket__note {
	color: var(--dma-text);
	font-size: 1rem;
}

/* Directions: the sign fills the object row, its content centred. */
.dma-vb .dma-sign__board {
	align-content: center;
	box-shadow: none;
}

.dma-vb .dma-sign__address {
	margin: 0 !important;
	font-size: 1rem;
}

.dma-vb .dma-sign__facts {
	margin: 0 !important;
	font-size: 1rem;
}

.dma-vb .dma-sign__routes a {
	color: var(--dma-action);
	font-weight: 700;
}

/* ---------- intro: numbers ---------- */

.e-con.dma-stats {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 28px;
	padding: 8px 0 !important;
}

.e-con.dma-stat {
	--gap: 6px;
	--row-gap: 6px;
	padding: 18px 0 0 !important;
	border-top: 5px solid var(--dma-brand);
}

.dma-stat .dma-stat__value .elementor-heading-title {
	margin: 0;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: clamp(3rem, 6vw, 4.6rem);
	font-weight: 700;
	line-height: .9;
}

.dma-stat .elementor-widget-text-editor p {
	margin: 0;
	color: var(--dma-text);
	font-size: 1.05rem;
	line-height: 1.35;
}

/* ---------- editorial split: photo half, text half ---------- */

.e-con.dma-split {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	--row-gap: 0;
	display: grid !important;
	grid-template-columns: 1fr;
	font-family: var(--dma-body);
}

.dma-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	max-height: 70svh;
	object-fit: cover;
	border-radius: 0;
}

.e-con.dma-split__body {
	--padding-top: clamp(32px, 5vw, 80px);
	--padding-bottom: clamp(40px, 5vw, 80px);
	--padding-left: var(--dma-gutter);
	--padding-right: var(--dma-gutter);
	--gap: 18px;
	--row-gap: 18px;
	--justify-content: center;
}

.dma-split__body .elementor-widget-heading h2.elementor-heading-title {
	margin: 0;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: clamp(2.6rem, 5vw, 4rem);
	font-weight: 700;
	line-height: .95;
	text-transform: uppercase;
}

.dma-split__body .elementor-widget-text-editor,
.dma-split__body .elementor-widget-text-editor p {
	max-width: 36rem;
	color: var(--dma-text);
	font-size: 1.08rem;
	line-height: 1.65;
}

.dma-split__body .elementor-widget-text-editor p {
	margin: 0 0 1em;
}

.e-con.dma-split.dma-tone--stone .dma-split__body {
	background: var(--dma-stone);
}

@media (min-width: 900px) {
	.e-con.dma-split {
		grid-template-columns: 1fr 1fr;
		min-height: 520px;
	}

	/* The photo fills its half however tall the text gets. Imagify wraps images in an inline
	   <picture>, so height: 100% cannot work; the image is positioned over the cell instead. */
	.e-con.dma-split > .dma-split__media {
		position: relative;
		min-height: 100%;
		overflow: hidden;
	}

	.e-con.dma-split > .dma-split__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100% !important;
		min-height: 0;
		max-height: none;
		object-position: 50% 50%;
	}

	.e-con.dma-split--reverse > .dma-split__media {
		order: 2;
	}

	.e-con.dma-split__body {
		--padding-left: clamp(40px, 6vw, 96px);
		--padding-right: clamp(24px, 6vw, 96px);
	}
}

/* ---------- museum hall: current exhibitions ---------- */

.e-con.dma-exhibits {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: 40px 32px;
	padding: 16px 0 8px !important;
}

.e-con.dma-exhibit {
	--gap: 0;
	--row-gap: 0;
	padding: 0 !important;
}

/* Full photos in one frame size, fading out into the hall's black at the bottom, so they read as
   objects in a dark hall rather than as images that stopped loading. */
.dma-exhibit__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 30%;
	background: var(--dma-hall);
	border-radius: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 95%);
	mask-image: linear-gradient(to bottom, #000 45%, transparent 95%);
}

/* A skeleton on black is anchored at the top: head and back stay, the legs fade out. A slab
   cut out on black is shown whole. */
.dma-exhibit__media--top img {
	object-position: 50% 15%;
}

.dma-exhibit__media--contain img {
	object-fit: contain;
}

.dma-exhibit__media--cover img {
	object-position: 50% 50%;
}

/* The exhibition poster: the ammonite, without the title above it. */
.dma-exhibit__media--poster img {
	object-position: 50% 62%;
}

/* A wide exhibition (Arapahoe): the whole cut-out across the grid, no frame or
   fade; the text beside it on wide screens. */
.e-con.dma-exhibit--wide {
	grid-column: 1 / -1;
}

.dma-exhibit__media--wide img {
	aspect-ratio: auto;
	height: auto;
	object-fit: contain;
	-webkit-mask-image: none;
	mask-image: none;
}

.dma-exhibit--wide .elementor-widget-text-editor {
	max-width: 46em;
}

/* Links in the black museum hall: the bright brand green, not the action green (too dark here). */
.elementor .dma-tone--hall .dma-exhibit a.dma-more {
	color: var(--dma-brand);
}

/* An exhibition without a full photo keeps the old page's 600×150 strip, standing on a white
   line as it did there. */
.dma-exhibit__media--strip img {
	aspect-ratio: 4 / 1;
	object-fit: cover;
	border-bottom: 2px solid #fff;
	-webkit-mask-image: none;
	mask-image: none;
}

.dma-exhibit__label .elementor-heading-title {
	margin: 16px 0 6px;
	color: var(--dma-brand);
	font-family: var(--dma-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.dma-exhibit__name .elementor-heading-title {
	margin: 0 0 8px;
	color: #fff;
	font-family: var(--dma-display);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.dma-exhibit .elementor-widget-text-editor,
.dma-exhibit .elementor-widget-text-editor p {
	margin: 0;
	color: #cfcac0;
	font-size: 1.02rem;
	line-height: 1.5;
}

.dma-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.dma-banner a {
	display: block;
	transition: transform .2s, box-shadow .2s;
}

.dma-banner a:hover {
	transform: translateY(-2px);
	box-shadow: var(--dma-shadow);
}

/* Square promotion tiles and pairs of half-width banners. */
.e-con.dma-tiles,
.e-con.dma-pair {
	display: grid !important;
	gap: clamp(16px, 2.5vw, 28px);
	padding: 0 !important;
}

.e-con.dma-tiles {
	grid-template-columns: repeat(3, 1fr);
}

.e-con.dma-pair {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

/* Two square tiles and one wide banner in a row: the banner takes two columns and is stretched to
   the tiles' height. The jobs banner's edges are a flat #f3f3f3, so the extra height is filled in
   that grey and does not show. */
@media (min-width: 700px) {
	.e-con.dma-tiles:has(> .dma-banner--wide) {
		grid-template-columns: 1fr 1fr 2fr;
	}
}

.dma-banner--wide,
.dma-banner--wide .elementor-widget-container,
.dma-banner--wide a {
	display: block;
	height: 100%;
}

.dma-banner.dma-banner--wide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #f3f3f3;
}

/* ---------- at a glance: icon list and park map ---------- */

.e-con.dma-glance {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 40px;
	padding: 0 !important;
}

.e-con.dma-iconlist {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 18px 28px;
	padding: 0 !important;
}

/* Icons centred on their text, so one-line and three-line items look equally settled. */
.dma-iconlist .elementor-icon-box-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 14px;
	text-align: left !important;
}

.dma-iconlist .elementor-icon-box-content {
	flex: 1;
	text-align: left !important;
}

.dma-iconlist .elementor-icon-box-icon {
	flex: none;
	margin: 0 !important;
}

.dma-iconlist .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 0;
	background: none;
	color: var(--dma-action) !important;
	fill: var(--dma-action) !important;
	font-size: 40px;
}

.dma-iconlist .elementor-icon svg {
	width: 40px;
	height: 40px;
	fill: var(--dma-action);
}

.dma-iconlist .elementor-icon i {
	color: var(--dma-action);
	font-size: 40px;
}

.dma-iconlist .elementor-icon-box-title:empty,
.dma-iconlist .elementor-icon-box-title:has(> span:empty) {
	display: none;
}

.dma-iconlist .elementor-icon-box-description {
	margin: 0;
	color: var(--dma-text);
	font-size: 1rem;
	line-height: 1.45;
}

.dma-iconlist .elementor-icon-box-description b,
.dma-iconlist .elementor-icon-box-description strong {
	color: var(--dma-ink);
}

.dma-map img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.dma-map figcaption,
.dma-map .widget-image-caption {
	margin-top: 8px;
	color: var(--dma-muted);
	font-size: .95rem;
	text-align: left;
}

/* On phones the map keeps a legible size and scrolls sideways; tapping opens it full size. */
@media (max-width: 899px) {
	.dma-map > a,
	.dma-map figure > a {
		display: block;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
	}

	.dma-map img {
		width: 960px;
		max-width: none !important;
	}
}



/* ---------- feature row (annual pass) ---------- */

.e-con.dma-feature {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: 0 !important;
}

.dma-feature__media img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	border-radius: 0;
	box-shadow: 10px 10px 0 var(--dma-brand);
}

.e-con.dma-feature__body {
	--gap: 16px;
	--row-gap: 16px;
	padding: 0 !important;
}

.dma-feature__body .elementor-widget-heading h3.elementor-heading-title {
	margin: 0;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: clamp(2rem, 3.6vw, 2.8rem);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.dma-feature__body .elementor-widget-text-editor p {
	max-width: 38rem;
	margin: 0 0 .8em;
	font-size: 1.05rem;
	line-height: 1.6;
}

@media (min-width: 800px) {
	.e-con.dma-feature {
		grid-template-columns: 2fr 3fr;
	}
}

/* ---------- film ---------- */

.dma-video {
	margin: 0;
	border: 2px solid #fff;
	background: #000;
}

.dma-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: #000;
}

/* ---------- contact band ---------- */

.dma-phone .elementor-heading-title,
.dma-phone .elementor-heading-title a {
	margin: 0;
	color: #fff !important;
	font-family: var(--dma-display);
	font-size: clamp(2.4rem, 6vw, 4.4rem);
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
}

.dma-phone .elementor-heading-title a:hover {
	text-decoration: underline !important;
}

/* ---------- news ---------- */

.dma-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 0 0 24px;
	padding: 14px 18px;
	border-left: 6px solid var(--dma-ink);
	background: var(--dma-stone);
	font-size: 1rem;
	line-height: 1.45;
}

.dma-notice__label {
	padding: .2em .55em .15em;
	background: var(--dma-ink);
	color: var(--dma-brand);
	font-family: var(--dma-display);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.elementor .dma-notice a {
	flex: 1 1 20rem;
	color: var(--dma-text);
	text-decoration: none;
}

.dma-notice a strong {
	color: var(--dma-ink);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.dma-news__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.dma-newsfeature {
	position: relative;
}

.dma-newsfeature__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
}

.dma-newsfeature__body {
	position: relative;
	margin: -56px 24px 0;
	padding: 20px 24px 24px;
	border: 2px solid var(--dma-ink);
	background: #fff;
}

.dma-newsfeature__title,
.dma-newslist__title {
	margin: 0 0 8px;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.dma-newslist__title {
	font-size: 1.45rem;
}

.elementor .dma-newsfeature__title a,
.elementor .dma-newslist__title a {
	color: inherit;
	font: inherit;
	text-decoration: none !important;
}

.dma-newsfeature__title a::after,
.dma-newslist__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.elementor .dma-newsfeature__title a:hover,
.elementor .dma-newslist__title a:hover,
.elementor .dma-newsfeature__title a:focus-visible,
.elementor .dma-newslist__title a:focus-visible {
	text-decoration: underline !important;
}

.dma-newsfeature p,
.dma-newslist p {
	margin: 0;
	color: var(--dma-text);
	line-height: 1.5;
}

.dma-newslist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dma-newslist {
	display: grid;
	gap: 14px;
}

.dma-newslist__item {
	position: relative;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	padding: 12px 16px 12px 12px;
	border: 2px solid var(--dma-ink);
	background: #fff;
}

.dma-newslist__item:hover,
.dma-newslist__item:focus-within,
.dma-newsfeature:hover .dma-newsfeature__body,
.dma-newsfeature:focus-within .dma-newsfeature__body {
	border-color: var(--dma-action);
}

.dma-newslist__thumb img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 0;
}

.dma-newslist__thumb:empty {
	background: var(--dma-stone);
}

@media (min-width: 900px) {
	.dma-news__grid {
		grid-template-columns: 3fr 2fr;
		align-items: start;
	}
}

/* News page: dates on the cards, and the archive of posts whose window has ended. */
.dma-card__date {
	display: block;
	margin: 0 0 6px;
	color: var(--dma-muted);
	font-size: .92rem;
	font-weight: 600;
}

.dma-news .dma-news__archive-title {
	margin: clamp(40px, 6vw, 72px) 0 24px;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.dma-cards--archive .dma-card {
	opacity: .85;
}

/* ---------- cards (Aktionen, news page) ---------- */

.dma-cards,
.e-con.dma-cards {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 24px;
}

.e-con.dma-cards {
	padding: 0 !important;
}

.dma-card,
.e-con.dma-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0 !important;
	border: 0;
	border-top: 4px solid var(--dma-ink);
	background: #fff;
}

.dma-card__media {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--dma-stone);
}

.dma-card__media:empty {
	display: none;
}

.dma-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform .4s;
}

.dma-card:has(a):hover .dma-card__media img {
	transform: scale(1.04);
}

.dma-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 0 8px;
}

.dma-card__title {
	margin: 0;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.elementor .dma-card__title a {
	color: inherit;
	font: inherit;
	text-decoration: none !important;
}

/* The heading link covers the whole card, so the card has one accessible name and one tab stop. */
.dma-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.elementor .dma-card__title a:hover,
.elementor .dma-card__title a:focus-visible {
	text-decoration: underline !important;
}

.dma-card__title a:focus-visible {
	outline: none;
	box-shadow: none;
}

.dma-card:has(.dma-card__title a:focus-visible) {
	outline: 3px solid var(--dma-ink);
	outline-offset: 4px;
}

.dma-card__text {
	margin: 0;
	color: var(--dma-text);
	font-size: 1rem;
	line-height: 1.5;
}

.dma-cards--past .dma-card {
	opacity: .8;
}

.dma-aktionen > h2 {
	margin: 0 0 24px;
}

.dma-aktionen > .dma-cards + h2 {
	margin-top: clamp(40px, 6vw, 72px);
}

/* ---------- price tables (Preise & Tickets) ---------- */

.dma-prices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 24px 40px;
	font-family: var(--dma-body);
}

.dma-prices__title {
	margin: 0 0 8px;
	padding-bottom: 8px;
	border-bottom: 4px solid var(--dma-ink);
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.8rem;
	text-transform: uppercase;
}

.dma-prices__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.dma-prices__table th,
.dma-prices__table td {
	padding: .7rem 0;
	border: 0;
	border-bottom: 1px solid var(--dma-line);
	background: none !important;
	color: var(--dma-text);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}

.dma-prices__table th {
	color: var(--dma-ink);
	font-weight: 600;
}

.dma-prices__table td {
	padding-left: 1rem;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.45rem;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.dma-prices__desc {
	display: block;
	color: var(--dma-muted);
	font-size: .92rem;
	font-weight: 400;
}

.dma-prices__note {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--dma-muted);
}

.dma-price-highlights {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dma-price-highlights li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .2rem 0;
}

.dma-price-highlights strong {
	color: var(--dma-ink);
	white-space: nowrap;
}

/* Older pages' fact lists (Besuch planen). */
.dma-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dma-facts li {
	position: relative;
	padding-left: 1.6rem;
	line-height: 1.45;
}

.dma-facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: .8rem;
	height: .8rem;
	background: var(--dma-brand);
}

/* ---------- phones ---------- */

@media (max-width: 699px) {
	/* Rows of cards and square tiles scroll sideways instead of stacking. */
	.dma-cards,
	.e-con.dma-cards,
	.e-con.dma-tiles {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 80%;
		gap: 14px;
		width: calc(100% + 2 * var(--dma-gutter)) !important;
		max-width: none !important;
		margin-inline: calc(-1 * var(--dma-gutter));
		padding: 2px var(--dma-gutter) 12px !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dma-gutter);
		scrollbar-width: thin;
	}

	.dma-cards > *,
	.e-con.dma-cards > *,
	.e-con.dma-tiles > * {
		scroll-snap-align: start;
	}

	/* The news page is a list: its cards stack. */
	.dma-news:not(.dma-news--feature) .dma-cards {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		width: auto !important;
		margin-inline: 0;
		padding: 0 !important;
		overflow: visible;
	}

	.elementor .dma-actions .elementor-button {
		min-height: 46px;
		padding: .65em 1.1em .6em;
		font-size: 1.05rem;
	}

	.e-con.dma-stats {
		grid-template-columns: 1fr 1fr;
		gap: 22px 18px;
	}

	.dma-day__wd {
		font-size: 1.6rem;
	}

	.dma-newsfeature__body {
		margin: -40px 12px 0;
		padding: 16px 18px 18px;
	}
}

/* The section heading of the visitor band is a full heading with the kicker's bar. */
.dma-section .dma-kicker-h h2.elementor-heading-title {
	color: var(--dma-ink);
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	letter-spacing: 0;
}

/* ---------- notices for visitors (Museum → Hinweise) ---------- */

/* In the visitor band a notice spans all three columns; with none current, the row disappears. */
.e-con.dma-visit > .e-con-inner > .dma-visit__notices {
	grid-column: 1 / -1;
}

.e-con.dma-visit > .e-con-inner > .dma-visit__notices:not(:has(.dma-note)) {
	display: none;
}

.dma-notes {
	display: grid;
	gap: 12px;
}

.dma-note {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 16px;
	align-items: start;
	padding: 18px 24px 16px 18px;
	border: 2px solid var(--dma-ink);
	border-left-width: 10px;
	border-left-color: var(--dma-action);
	background: #fff;
	font-family: var(--dma-body);
}

.dma-note.is-warning {
	border-left-color: #c4161c;
}

.dma-note__icon {
	width: 36px;
	height: auto;
	margin-top: 2px;
}

.dma-note__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0 0 6px;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}

.dma-note__kind {
	padding: .2em .5em .12em;
	background: var(--dma-ink);
	color: var(--dma-brand);
	font-size: .95rem;
	letter-spacing: .05em;
}

.dma-note.is-warning .dma-note__kind {
	background: #c4161c;
	color: #fff;
}

.dma-note__until {
	color: var(--dma-muted);
	font-family: var(--dma-body);
	font-size: .95rem;
	font-weight: 600;
	text-transform: none;
}

.dma-note__text p {
	max-width: 70rem;
	margin: 0 0 .4em;
	color: var(--dma-text);
	font-size: 1.02rem;
	line-height: 1.55;
}

.dma-note__link {
	margin: 2px 0 0;
}

@media (max-width: 599px) {
	.dma-note {
		grid-template-columns: 28px 1fr;
		gap: 12px;
		padding: 14px 16px 12px 12px;
	}

	.dma-note__icon {
		width: 28px;
	}

	.dma-note__title {
		font-size: 1.35rem;
	}
}

/* Focal point for cropped photos (split sections, hero): add one of these classes to the
   image widget (Elementor → Advanced → CSS classes) to keep the subject in view. */
.dma-focus-left img { object-position: 15% 50% !important; }
.dma-focus-right img { object-position: 85% 50% !important; }
.dma-focus-top img { object-position: 50% 15% !important; }
.dma-focus-bottom img { object-position: 50% 85% !important; }

/* ---------- visitor reviews ---------- */

/* A wall of quotes, not boxes: columns on wide screens, a sideways row on phones. */
.e-con.dma-reviews {
	display: block !important;
	column-count: 3;
	column-gap: 40px;
	padding: 8px 0 0 !important;
}

.dma-review {
	break-inside: avoid;
	margin: 0 0 36px !important;
	padding: 4px 0 0 22px;
	border-left: 5px solid var(--dma-brand);
}

.dma-review::before {
	content: "★★★★★";
	display: block;
	margin-bottom: 8px;
	color: var(--dma-action);
	font-size: 1.15rem;
	letter-spacing: .12em;
}

.dma-review blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-style: normal;
}

.dma-review blockquote p {
	margin: 0;
	color: var(--dma-ink);
	font-family: var(--dma-body);
	font-size: 1.12rem;
	line-height: 1.55;
}

.dma-review blockquote p::before {
	content: "„";
}

.dma-review blockquote p::after {
	content: "“";
}

:lang(en) .dma-review blockquote p::before {
	content: "“";
}

:lang(en) .dma-review blockquote p::after {
	content: "”";
}

.dma-review .dma-review__meta {
	margin: 10px 0 0;
	color: var(--dma-muted);
	font-size: .9rem;
}

@media (max-width: 999px) {
	.e-con.dma-reviews {
		column-count: 2;
	}
}

@media (max-width: 699px) {
	.e-con.dma-reviews {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: 85%;
		gap: 16px;
		column-count: auto;
		width: calc(100% + 2 * var(--dma-gutter)) !important;
		max-width: none !important;
		margin-inline: calc(-1 * var(--dma-gutter));
		padding: 2px var(--dma-gutter) 12px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dma-gutter);
	}

	.dma-review {
		margin: 0 !important;
		scroll-snap-align: start;
	}
}

/* ---------- trust bar under the hero ---------- */

.e-con.dma-trust {
	--padding-top: 26px;
	--padding-bottom: 26px;
	background: var(--dma-ink);
}

.e-con.dma-trust > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 32px;
}

.e-con.dma-trust__item {
	--gap: 2px;
	--row-gap: 2px;
	padding: 0 0 0 16px !important;
	border-left: 4px solid var(--dma-brand);
}

.dma-trust__value .elementor-heading-title {
	margin: 0;
	color: var(--dma-brand);
	font-family: var(--dma-display);
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.dma-trust__label p {
	margin: 0;
	color: #e9e6df;
	font-size: .98rem;
	line-height: 1.35;
}

@media (max-width: 799px) {
	.e-con.dma-trust > .e-con-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- audience tiles ("Wer kommt mit?") ---------- */

.e-con.dma-paths {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	padding: 0 !important;
}

.e-con.dma-path {
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 380px;
	padding: 22px 20px !important;
	overflow: hidden;
	background: var(--dma-ink);
	--gap: 6px;
	--row-gap: 6px;
}

.e-con.dma-path > .dma-path__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.e-con.dma-path > .dma-path__media img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
	transition: transform .4s;
}

.e-con.dma-path::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(16 18 16 / 92%) 0%, rgb(16 18 16 / 60%) 45%, rgb(16 18 16 / 0%) 75%);
	pointer-events: none;
}

.e-con.dma-path > .elementor-widget:not(.dma-path__media) {
	position: relative;
	z-index: 1;
}

.dma-path__title .elementor-heading-title,
.elementor .dma-path__title .elementor-heading-title a {
	margin: 0;
	color: #fff;
	font-family: var(--dma-display) !important;
	font-size: clamp(1.6rem, 2.2vw, 2rem) !important;
	overflow-wrap: break-word;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.elementor .dma-path__title a {
	color: #fff;
	text-decoration: none !important;
}

/* The heading link covers the whole tile. */
.dma-path__title a::after {
	content: "";
	position: absolute;
	inset: -400px -40px -200px;
	z-index: 2;
}

.e-con.dma-path:hover .dma-path__media img {
	transform: scale(1.04);
}

.elementor .dma-path__title a:hover,
.elementor .dma-path__title a:focus-visible {
	text-decoration: underline !important;
}

.e-con.dma-path:has(a:focus-visible) {
	outline: 3px solid var(--dma-ink);
	outline-offset: 3px;
}

.dma-path__text p {
	margin: 0;
	color: #f2efe8;
	font-size: 1rem;
	line-height: 1.45;
}

@media (max-width: 999px) {
	.e-con.dma-paths {
		grid-template-columns: 1fr 1fr;
	}

	.e-con.dma-path {
		min-height: 300px;
	}
}

@media (max-width: 499px) {
	.e-con.dma-path {
		min-height: 260px;
		padding: 16px 12px !important;
	}

	/* Long single words ("Kindergeburtstag") must fit a half-width tile without breaking. */
	.dma-path__title .elementor-heading-title,
	.elementor .dma-path__title .elementor-heading-title a {
		font-size: clamp(1.15rem, 5.4vw, 1.5rem) !important;
		overflow-wrap: normal;
		hyphens: manual;
	}

	.dma-path__text p {
		font-size: .92rem;
	}
}

/* ---------- "So läuft euer Besuch ab": numbered steps ---------- */

.e-con.dma-steps {
	display: grid !important;
	gap: 36px;
	padding: 12px 0 0 !important;
	counter-reset: dma-step;
}

.e-con.dma-step {
	position: relative;
	padding: 0 0 0 84px !important;
	--gap: 8px;
	--row-gap: 8px;
}

.e-con.dma-step p + p {
	margin-top: .7em;
}

.e-con.dma-step::before {
	counter-increment: dma-step;
	content: counter(dma-step);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--dma-ink);
	color: var(--dma-brand);
	font-family: var(--dma-display);
	font-size: 2rem;
	font-weight: 700;
}

.e-con.dma-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 27px;
	top: 64px;
	bottom: -28px;
	border-left: 2px dashed var(--dma-line);
}

.dma-step__title .elementor-heading-title {
	margin: 10px 0 0;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.e-con.dma-step .elementor-widget-text-editor,
.e-con.dma-step .elementor-widget-text-editor p {
	max-width: 46rem !important;
	color: var(--dma-text);
	font-size: 1.05rem;
	line-height: 1.6;
}

@media (max-width: 599px) {
	.e-con.dma-step {
		padding-left: 60px !important;
	}

	.e-con.dma-step::before {
		width: 44px;
		height: 44px;
		font-size: 1.6rem;
	}

	.e-con.dma-step:not(:last-child)::after {
		left: 21px;
		top: 52px;
	}
}

/* ---------- FAQ (native details/summary) ---------- */

.dma-faq {
	max-width: 56rem;
	border-bottom: 2px solid var(--dma-ink);
}

.dma-faq__item {
	border-top: 2px solid var(--dma-ink);
}

.dma-faq__q {
	position: relative;
	padding: 18px 56px 18px 0;
	color: var(--dma-ink);
	font-family: var(--dma-body);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.dma-faq__q::-webkit-details-marker {
	display: none;
}

.dma-faq__q::after {
	content: "+";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--dma-action);
	font-family: var(--dma-display);
	font-size: 2.2rem;
	line-height: 1;
}

.dma-faq__item[open] > .dma-faq__q::after {
	content: "–";
}

.dma-faq__q:hover {
	color: var(--dma-action);
}

.dma-faq__a {
	padding: 0 56px 18px 0;
}

.dma-faq__a p {
	margin: 0 0 .6em;
	color: var(--dma-text);
	font-size: 1.05rem;
	line-height: 1.6;
}

.elementor .dma-faq__a a {
	color: var(--dma-action);
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- sticky "Besuch planen" bar (phones) ---------- */

.dma-sticky {
	display: none;
}

@media (max-width: 699px) {
	.dma-sticky {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		display: flex;
		align-items: center;
		gap: 12px;
		/* Room on the right for the accessibility widget's round button. */
		padding: 10px 84px calc(10px + env(safe-area-inset-bottom)) 12px;
		border-top: 2px solid var(--dma-ink);
		background: #fff;
		box-shadow: 0 -6px 18px rgb(29 32 29 / 12%);
		transform: translateY(110%);
		transition: transform .25s ease;
	}

	.dma-sticky.is-visible {
		transform: none;
	}

	.dma-sticky .dma-status--text {
		font-size: .85rem;
		line-height: 1.25;
	}

	body.dma-sticky-on {
		padding-bottom: 72px;
	}
}

body a.dma-sticky__btn {
	flex: none;
	color: #fff !important;
	font-family: var(--dma-display) !important;
	font-size: 1.1rem !important;
	line-height: 1 !important;
	letter-spacing: .03em !important;
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: .6em 1.1em .55em;
	background: var(--dma-action);
	color: #fff;
	font-family: var(--dma-display);
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

body a.dma-sticky__btn:hover,
body a.dma-sticky__btn:focus-visible {
	background: var(--dma-ink);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.dma-sticky,
	.dma-path__media img,
	.dma-card__media img {
		transition: none !important;
	}
}

/* ---------- event takeover of the hero (Dinoween banner) ----------
   Ported from tools/dinoween/front-banner.php. Sizes are in cqi (percent of the banner's width),
   so text and artwork scale together like one picture; the portrait layout applies below 768px. */

.e-con.dma-event-section {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	--gap: 0;
	--row-gap: 0;
}

.dma-ev {
	container-type: inline-size;
}

.dma-ev__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9cqi;
	aspect-ratio: 2000 / 750;
	padding-top: 5.3cqi;
}

.dma-ev__art,
.dma-ev__art img {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: top center;
	border-radius: 0;
}

.dma-ev__stage > :not(.dma-ev__art) {
	position: relative;
	z-index: 1;
}

/* Beats the kit's h2 rules (Rift, uppercase), which are more specific than one class. */
body .dma-ev h2.dma-ev__title {
	margin: 0;
	color: #FFFCF2;
	font-family: "DMA Griffy", Griffy, fantasy !important;
	font-size: 3.8cqi;
	font-weight: 400 !important;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
	text-transform: none !important;
}

.dma-ev-row { display: block; white-space: nowrap; }
.dma-ev-happy { font-size: 1.15em; transform: translateX(-.45em); }
.dma-ev-big { font-size: 1.6em; padding-top: .45em; }
.dma-ev-l {
	display: inline-block;
	transform-origin: 50% 88%;
	font-size: calc(var(--s) * 1em);
	margin: 0 calc(-.035em + var(--m)) 0 calc(-.035em + var(--ml));
	transform: translateY(var(--y)) rotate(var(--r)) scale(.82, 1.5);
	text-shadow: .055em .045em 0 #4A1816, .035em .03em 0 #4A1816, -.012em -.012em 0 #4A1816, .012em -.012em 0 #4A1816, -.012em .012em 0 #4A1816;
}
.dma-ev-l1 { --s: 1.18; --y: -0.05em; --r: -3deg; --m: 0em; --ml: 0em; }
.dma-ev-l2 { --s: 0.9; --y: 0.04em; --r: 2deg; --m: 0em; --ml: 0em; }
.dma-ev-l3 { --s: 1; --y: 0em; --r: -2deg; --m: 0em; --ml: 0em; }
.dma-ev-l4 { --s: 0.97; --y: 0.05em; --r: 3deg; --m: 0em; --ml: 0em; }
.dma-ev-l5 { --s: 1.08; --y: -0.03em; --r: 4deg; --m: 0em; --ml: 0em; }
.dma-ev-l6 { --s: 1.05; --y: 0em; --r: -2deg; --m: 0em; --ml: 0em; }
.dma-ev-l7 { --s: 0.96; --y: 0.02em; --r: 1.5deg; --m: 0.02em; --ml: 0em; }
.dma-ev-l8 { --s: 1.05; --y: 0.05em; --r: -1deg; --m: 0em; --ml: 0em; }
.dma-ev-l9 { --s: 1.03; --y: -0.03em; --r: 0deg; --m: -0.02em; --ml: -0.05em; }
.dma-ev-l10 { --s: 1.14; --y: 0.05em; --r: 2deg; --m: 0em; --ml: -0.06em; position: relative; z-index: 1; }
.dma-ev-l11 { --s: 1; --y: -0.01em; --r: -2deg; --m: 0em; --ml: 0em; }
.dma-ev-l12 { --s: 0.93; --y: -0.05em; --r: 2.5deg; --m: 0em; --ml: 0em; }
.dma-ev-l13 { --s: 1.14; --y: 0.05em; --r: 1deg; --m: 0em; --ml: 0em; }

.dma-ev__date,
.dma-ev__cta {
	margin: 0;
	text-align: center;
}

.dma-ev__date span {
	position: relative;
	z-index: 0;
	display: inline-block;
	padding: .3em 1.4em .22em;
	color: #4A1816;
	font-family: var(--dma-display);
	font-size: 2.8cqi;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.dma-ev__date span::before,
a.dma-ev__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M16%205%20L120%202%20L262%206%20L384%203%20L397%208%20L388%2012%20L400%2017%20L390%2022%20L398%2028%20L386%2033%20L397%2039%20L388%2044%20L395%2050%20L384%2054%20L391%2058%20L268%2056%20L138%2059%20L15%2056%20L4%2052%20L13%2047%20L1%2042%20L11%2037%20L2%2031%20L12%2026%20L0%2020%20L10%2015%20L3%2010%20Z%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M16%205%20L120%202%20L262%206%20L384%203%20L397%208%20L388%2012%20L400%2017%20L390%2022%20L398%2028%20L386%2033%20L397%2039%20L388%2044%20L395%2050%20L384%2054%20L391%2058%20L268%2056%20L138%2059%20L15%2056%20L4%2052%20L13%2047%20L1%2042%20L11%2037%20L2%2031%20L12%2026%20L0%2020%20L10%2015%20L3%2010%20Z%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.dma-ev__date span::before {
	background: #FFF0CD;
}

body a.dma-ev__btn {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .55em 1.7em .47em;
	color: #FFF0CD !important;
	font-family: var(--dma-display) !important;
	font-size: 2.6cqi !important;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.1 !important;
	text-decoration: none !important;
	text-transform: uppercase;
}

a.dma-ev__btn::before {
	background: #4A1816;
	transition: background .15s;
}

a.dma-ev__btn:hover::before,
a.dma-ev__btn:focus-visible::before {
	background: #6E2A1E;
}

a.dma-ev__btn:focus-visible {
	outline: 3px solid #FFFCF2;
	outline-offset: 4px;
	box-shadow: none;
}

.dma-ev-chev {
	width: .55em;
	height: .9em;
	color: #ED7A14;
}

/* The page's h1 (the claim) stays, as a line under the banner's drips. */
.dma-ev__claim {
	padding: 4px var(--dma-gutter) 22px;
	text-align: center;
}

.dma-ev__claim h1 {
	max-width: var(--dma-width);
	margin: 0 auto;
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.dma-ev__stage {
		aspect-ratio: 941 / 1672;
		gap: 3.5cqi;
		padding-top: 38cqi;
	}

	body .dma-ev h2.dma-ev__title { font-size: 9cqi; }
	.dma-ev__date span { font-size: 5.5cqi; padding: .3em .9em .22em; }
	body a.dma-ev__btn { font-size: 5.3cqi !important; }
}

/* "Zum ersten Mal hier?": the museum-hall photo in a tall tile; keep the skeleton and the visitor in view. */
.dma-focus-hall img {
	object-position: 63% 50% !important;
}

/* Four exhibitions (production since mid-October): two by two instead of three plus one. */
@media (min-width: 760px) {
	.e-con.dma-exhibits:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- visitor band as large type, and news as photo tiles (front page since 2026-10-26) ----------
   Visit: no objects; three plain statements in large type on the stone band (a dark band ran
   into the trust bar above it and was heavy).
   News: four equal photo tiles with the headline over the photo. */

.dma-vs {
	display: grid;
	grid-template-columns: 1fr;
	font-family: var(--dma-body);
	color: var(--dma-text);
}

.dma-vs p {
	margin: 0;
}

.dma-vs__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 28px 0;
	border-top: 1px solid var(--dma-line);
}

.dma-vs__item:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 900px) {
	.dma-vs {
		grid-template-columns: repeat(3, 1fr);
	}

	.dma-vs__item,
	.dma-vs__item:first-child {
		padding: 4px clamp(20px, 3vw, 40px) 8px;
		border-top: 0;
		border-left: 1px solid var(--dma-line);
	}

	.dma-vs__item:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

.dma-vs__label {
	margin: 0 0 6px;
	color: var(--dma-action);
	font-family: var(--dma-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.dma-vs__value,
.dma-vs .dma-today__big {
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: clamp(2.4rem, 3.8vw, 3.4rem);
	font-weight: 700;
	line-height: .92;
	text-transform: uppercase;
}

.dma-vs__sub {
	color: var(--dma-ink);
	font-size: 1.1rem;
	font-weight: 600;
}

/* Hours: the state as a small line, the next opening large, the coming days as text. */
.dma-vs .dma-today__board {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dma-vs .dma-today__main {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dma-vs .dma-today__big {
	margin: 0 !important;
}

.dma-vs .dma-days__label {
	margin: 14px 0 4px !important;
	color: var(--dma-muted);
	font-size: .95rem;
}

.dma-vs .dma-days {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: 2px 18px;
	margin: 0;
}

.dma-vs .dma-day {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
}

.dma-vs .dma-day__date {
	gap: 4px;
}

.dma-vs .dma-day__wd {
	color: var(--dma-ink);
	font-size: 1.15rem;
}

.dma-vs .dma-day__dm {
	display: none;
}

.dma-vs .dma-day__h {
	color: var(--dma-text);
	font-family: var(--dma-body);
	font-size: 1rem;
	font-weight: 400;
}

.dma-vs .dma-day.is-closed .dma-day__h {
	color: var(--dma-closed);
	font-size: 1rem;
	font-weight: 600;
}

.dma-vs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 18px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.dma-vs__list strong {
	color: var(--dma-ink);
	font-family: var(--dma-display);
	font-size: 1.35rem;
}

.dma-vs__note,
.dma-vs .dma-sign__address,
.dma-vs .dma-sign__facts {
	margin: 10px 0 0 !important;
	color: var(--dma-text);
	font-size: 1rem;
	line-height: 1.45;
}

.dma-vs .dma-sign__address {
	color: var(--dma-ink);
	font-weight: 700;
}

.dma-vs .dma-sign__facts {
	margin-top: 0 !important;
}

.elementor .dma-vs .dma-sign__routes a,
.elementor .dma-vs__note a {
	color: var(--dma-action);
	font-weight: 700;
}

.dma-vs__more {
	margin-top: auto !important;
	padding-top: 16px;
}

/* News tiles. */
.dma-ntiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(12px, 2vw, 20px);
}

.dma-ntile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 380px;
	overflow: hidden;
	background: var(--dma-ink);
	color: #fff;
}

/* The WebP plugin wraps images in <picture> and moves the class onto it, so both are covered. */
.dma-ntile .dma-ntile__img,
.dma-ntile picture,
.dma-ntile picture img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform .4s ease;
}

.dma-ntile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 25%, rgb(0 0 0 / 88%) 72%);
}

.dma-ntile:hover img,
.dma-ntile:focus-within img {
	transform: scale(1.04);
}

.dma-ntile__body {
	position: relative;
	z-index: 2;
	padding: 20px;
}

.dma-ntile .dma-card__date {
	color: var(--dma-brand);
	font-family: var(--dma-display);
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.dma-ntile__title {
	margin: 0 0 8px;
	color: #fff;
	font-family: var(--dma-display);
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.elementor .dma-ntile__title a {
	color: inherit;
	font: inherit;
	text-decoration: none !important;
}

.dma-ntile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* The kit turns hovered links ink (#1d201d), which vanishes on the dark gradient: stay white,
   with a brand-green underline as the hover cue. */
.elementor .dma-ntile__title a:hover,
.elementor .dma-ntile__title a:focus-visible {
	color: #fff;
	text-decoration: underline !important;
	text-decoration-color: var(--dma-brand) !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: .12em;
}

.dma-ntile__text {
	margin: 0;
	color: #e6e2da;
	font-size: .98rem;
	line-height: 1.45;
}

@media (max-width: 699px) {
	.dma-ntiles {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 80%;
		width: calc(100% + 2 * var(--dma-gutter));
		margin-inline: calc(-1 * var(--dma-gutter));
		padding: 2px var(--dma-gutter) 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dma-gutter);
	}

	.dma-ntile {
		min-height: 340px;
		scroll-snap-align: start;
	}
}

/* ---------- Arapahoe, "ECHT. GROSS." (front page and Ausstellungen, 2026-10-26) ----------
   Borrows the look of the /echt-gross/ page: warm brown with a glow, ochre accents, cream type,
   hairlines. The whole 25 m skeleton runs across the page over a metre scale; on phones it keeps
   a readable size and scrolls sideways, so you walk along it. Small ochre text uses #c48a47
   (5.2:1 on the glow); the page's own #b07a3c (4.2:1 there) only for large type and lines. */

.e-con.dma-giant {
	--padding-top: var(--dma-space);
	--padding-bottom: var(--dma-space);
	--dma-ochre: #b07a3c;
	--dma-ochre-text: #c48a47;
	--dma-cream: #f4efe7;
	--dma-sand: #cabfb0;
	background:
		radial-gradient(ellipse 60% 70% at 70% 0%, #3a3027 0%, rgb(58 48 39 / 0%) 100%),
		#1d1916;
	color: var(--dma-sand);
}

.dma-giant__kicker .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	color: var(--dma-ochre-text);
	font-family: var(--dma-display);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.dma-giant__kicker .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 44px;
	height: 2px;
	background: var(--dma-ochre);
}

.e-con.dma-giant .dma-giant__title h2.elementor-heading-title {
	margin: 4px 0 0;
	color: var(--dma-cream);
	font-family: var(--dma-display);
	font-size: clamp(4rem, 11vw, 9.5rem);
	font-weight: 900;
	letter-spacing: .005em;
	line-height: .86;
	text-transform: uppercase;
}

.dma-giant__sub .elementor-heading-title {
	margin: 0;
	color: var(--dma-sand);
	font-family: var(--dma-display);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.dma-giant__lead p {
	max-width: 40em;
	margin: 0;
	color: var(--dma-sand);
	font-size: 1.2rem;
	line-height: 1.6;
}

.e-con.dma-giant__scale {
	--gap: 0;
	--row-gap: 0;
	padding: 16px 0 0 !important;
}

.dma-giant__skeleton img {
	display: block;
	width: 100%;
	height: auto;
}

/* The scale: one hairline, small ticks every 5 m, labels in small tracked type. */
.dma-ruler {
	position: relative;
	height: 34px;
	margin: 14px 0 0;
	border-top: 1px solid rgb(244 239 231 / 35%);
	background: repeating-linear-gradient(to right, rgb(244 239 231 / 35%) 0 1px, transparent 1px 20%) 0 0 / 100% 6px no-repeat;
}

.dma-ruler::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 6px;
	background: rgb(244 239 231 / 35%);
}

.dma-ruler span {
	position: absolute;
	top: 12px;
	transform: translateX(-50%);
	color: var(--dma-sand);
	font-size: .85rem;
	letter-spacing: .1em;
	line-height: 1;
	white-space: nowrap;
}

.dma-ruler span:first-child {
	transform: none;
}

.dma-ruler span:last-child {
	transform: translateX(-100%);
	color: var(--dma-ochre-text);
}

/* Facts: four cells between hairlines, ochre values over small tracked captions. */
.e-con.dma-giant__facts {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-top: 16px;
	padding: 0 !important;
	border-top: 1px solid rgb(244 239 231 / 10%);
	border-bottom: 1px solid rgb(244 239 231 / 10%);
}

.e-con.dma-giant__fact {
	--gap: 8px;
	--row-gap: 8px;
	padding: 28px 24px !important;
	border-left: 1px solid rgb(244 239 231 / 10%);
}

.e-con.dma-giant__fact:first-child {
	border-left: 0;
	padding-left: 0 !important;
}

.dma-giant__value .elementor-heading-title {
	margin: 0;
	color: var(--dma-ochre);
	font-family: var(--dma-display);
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	font-weight: 700;
	line-height: 1.02;
	text-transform: uppercase;
}

.dma-giant__fact .elementor-widget-text-editor p {
	margin: 0;
	color: var(--dma-sand);
	font-family: var(--dma-display);
	font-size: 1rem;
	letter-spacing: .1em;
	line-height: 1.35;
	text-transform: uppercase;
}

/* Button: cream outline, ochre fill on hover with dark text (5.0:1). */
.elementor .e-con.dma-giant .dma-actions .elementor-button {
	border: 2px solid var(--dma-cream);
	background: transparent;
	color: var(--dma-cream);
}

.elementor .e-con.dma-giant .dma-actions .elementor-button:hover,
.elementor .e-con.dma-giant .dma-actions .elementor-button:focus-visible {
	border: 2px solid var(--dma-ochre);
	background: var(--dma-ochre);
	color: #161310;
}

@media (max-width: 899px) {
	.e-con.dma-giant__facts {
		grid-template-columns: 1fr 1fr;
	}

	.e-con.dma-giant__fact:nth-child(3) {
		border-left: 0;
		padding-left: 0 !important;
	}

	.e-con.dma-giant__fact:nth-child(n + 3) {
		border-top: 1px solid rgb(244 239 231 / 10%);
	}
}

@media (max-width: 699px) {
	.e-con.dma-giant__scale {
		width: calc(100% + 2 * var(--dma-gutter)) !important;
		max-width: none !important;
		margin-inline: calc(-1 * var(--dma-gutter));
		padding: 16px var(--dma-gutter) 12px !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	/* Elementor caps widgets in a container at 100% width. */
	.e-con.dma-giant__scale > .elementor-widget {
		min-width: 760px;
		max-width: none;
	}

	.e-con.dma-giant__fact {
		padding: 20px 14px !important;
	}

	.dma-giant__fact .elementor-widget-text-editor p {
		font-size: .9rem;
		letter-spacing: .06em;
	}
}

/* ---------- Ammonite Masterpieces feature (Ausstellungen page, 2026-10-26) ----------
   Borrows the look of /ammonite-masterpieces/: black, the water surface along the top edge, the
   title in Geograph Light (registered in Elementor, loaded by the heading's own typography
   setting), and the page's teal for the button, with dark text (white on it is 2.3:1). */

.e-con.dma-ammo {
	overflow-x: clip; /* the 100vw water strip is wider than the page where scrollbars take room */
	--padding-top: 0;
	--padding-bottom: var(--dma-space);
	--dma-teal: #4cbcbb;
	background: #000;
	color: #e6e6e6;
}

/* The water surface runs edge to edge above the content, out of the boxed content width. */
.dma-ammo__water {
	width: 100vw !important;
	max-width: none !important;
	margin-inline: calc(50% - 50vw);
}

.e-con.dma-ammo .dma-ammo__water img {
	display: block;
	width: 100%;
	height: auto;
}

.e-con.dma-ammo .dma-ammo__title h2.elementor-heading-title {
	margin: clamp(24px, 4vw, 48px) 0 0;
	color: #fff;
	font-family: "Geograph Light", var(--dma-body);
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.e-con.dma-ammo__body {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 24px clamp(24px, 5vw, 64px);
	align-items: center;
	padding: 0 !important;
}

@media (min-width: 800px) {
	.e-con.dma-ammo__body {
		grid-template-columns: 5fr 6fr;
	}
}

.dma-ammo__key img {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin: 0 auto;
}

.e-con.dma-ammo__text {
	--gap: 14px;
	--row-gap: 14px;
	padding: 0 !important;
}

.dma-ammo__kicker .elementor-heading-title {
	margin: 0;
	color: var(--dma-teal);
	font-family: var(--dma-display);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.dma-ammo .elementor-widget-text-editor p {
	margin: 0 0 .8em;
	color: #e6e6e6;
	font-size: 1.15rem;
	line-height: 1.6;
}

.elementor .e-con.dma-ammo .dma-actions .elementor-button {
	border: 2px solid var(--dma-teal);
	background: var(--dma-teal);
	color: #000;
}

.elementor .e-con.dma-ammo .dma-actions .elementor-button:hover,
.elementor .e-con.dma-ammo .dma-actions .elementor-button:focus-visible {
	border: 2px solid #fff;
	background: #fff;
	color: #000;
}

/* ---------- Ausstellungen: exhibitions as rows (2026-10-26) ----------
   One row per exhibition, image and text side by side; every second row puts the image on the
   right. On phones the image always sits above its text. The elements inside are the page's own
   (moved over from its old grids), so their Elementor widths are reset here. */

.e-con.dma-xrows {
	--padding-top: clamp(40px, 6vw, 96px);
	--padding-bottom: clamp(56px, 8vw, 120px);
	--padding-left: var(--dma-gutter);
	--padding-right: var(--dma-gutter);
	--content-width: var(--dma-width);
	--gap: clamp(56px, 8vw, 112px);
	--row-gap: clamp(56px, 8vw, 112px);
	background: #000;
}

.e-con.dma-xrow {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	padding: 0 !important;
}

.e-con.dma-xrow > * {
	--width: 100%;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.e-con.dma-xrow:nth-child(even) > .elementor-widget-image {
	order: 2;
}

.dma-xrow .elementor-widget-image img {
	display: block;
	width: 100%;
	max-height: 480px;
	object-fit: contain;
}

.e-con.dma-xrow > .e-con {
	--padding-top: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--padding-right: 0;
	padding: 0 !important;
}

/* The widgets carry their own small type size (about 14px); the rows read better larger. */
.elementor .e-con.dma-xrow .elementor-widget-text-editor,
.elementor .e-con.dma-xrow .elementor-widget-text-editor p {
	font-size: 1.05rem;
	line-height: 1.6;
}

@media (max-width: 799px) {
	.e-con.dma-xrow {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.e-con.dma-xrow:nth-child(even) > .elementor-widget-image {
		order: 0;
	}
}