.rpgcustompages-content > *:first-child { margin-top: 0; }
.rpgcustompages-content > *:last-child { margin-bottom: 0; }

/* Der Bogen steht hier und nicht nur im Template: das Plugin legt
   rpgcustompages_page beim Aktivieren in allen Sätzen neu an und wirft die
   Mood-Fassung dabei weg. Über diese Klasse behält die Seite ihre Fläche
   auch dann, wenn nur die Plugin-Vorlage steht. */
.rpgcustompages-page {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2.2vw, 1.75rem) clamp(2rem, 4vw, 3rem);
	background-color: var(--md-scrim);
	backdrop-filter: var(--md-glass);
	-webkit-backdrop-filter: var(--md-glass);
	border: 1px solid var(--md-rule-hair);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rpgcustompages-page { background-color: var(--md-scrim-solid); }
}

/* Rechtliche Seiten */
.md-legal { counter-reset: md-legal; }
.md-legal .md-pagehead .md-lede { max-width: 88ch; }

.md-legal__s { margin-top: clamp(2rem, 4vw, 3rem); }
.md-legal__h {
	display: flex;
	align-items: baseline;
	gap: .9rem;
	margin: 0 0 1rem;
	font-family: var(--md-f-serif);
	font-weight: 700;
	font-size: var(--md-t-head);
	letter-spacing: var(--md-ls-head);
	text-transform: uppercase;
	color: var(--md-ink);
}
.md-legal__h::before {
	counter-increment: md-legal;
	content: counter(md-legal, decimal-leading-zero);
	font-family: var(--md-f-sans);
	font-weight: 400;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	color: var(--md-accent-soft);
}
.md-legal__h::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--md-rule-hair);
}

.md-legal__sub {
	margin: 1.6rem 0 .7rem;
	font-size: var(--md-t-kicker);
	font-weight: 400;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

.md-legal__s p {
	margin: 0 0 .9rem;
	max-width: 74ch;
	line-height: 1.9;
	color: var(--md-ink-dim);
}
.md-legal__s p:last-child { margin-bottom: 0; }

.md-legal__s a,
.md-legal__foot a {
	color: var(--md-ink);
	border-bottom: 1px solid var(--md-rule-hair);
	transition: color var(--md-dur) var(--md-ease), border-color var(--md-dur) var(--md-ease);
}
.md-legal__s a:hover,
.md-legal__foot a:hover { color: var(--md-ink-bright); border-bottom-color: var(--md-ink-faint); }

/* Angaben nach Gesetz */
.md-legal__d {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	gap: .6rem 1.5rem;
	margin: 0 0 .9rem;
}
.md-legal__d:last-child { margin-bottom: 0; }
.md-legal__d dt {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-legal__d dd {
	margin: 0;
	line-height: 1.8;
	color: var(--md-ink);
}

.md-legal__foot {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--md-rule-hair);
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

/* Breit: Nummer und Überschrift wandern in eine Randspalte, der Text
   bekommt die restliche Fläche. Die Haarlinie trennt dann die Abschnitte
   statt die Überschrift auszufüllen. */
@media (min-width: 60rem) {
	.md-legal__s {
		display: grid;
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
		gap: 0 clamp(2rem, 4vw, 3.5rem);
		align-items: start;
		margin-top: 0;
		padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
		border-top: 1px solid var(--md-rule-hair);
	}
	.md-legal__s + .md-legal__s { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
	.md-pagehead + .md-legal__s { padding-top: 0; border-top: 0; }
	.md-legal__h {
		grid-column: 1;
		grid-row: 1;
		display: block;
		margin: 0;
	}
	.md-legal__h::before { display: block; margin-bottom: .5rem; }
	.md-legal__h::after { content: none; }
	.md-legal__s > :not(.md-legal__h) { grid-column: 2; }
	.md-legal__s p { max-width: 88ch; }
	.md-legal__sub { margin-top: 1.8rem; }
	.md-legal__d { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.md-legal__d { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
	.md-legal__d dt { margin-top: .7rem; }
	.md-legal__d dt:first-child { margin-top: 0; }
}

/* Inselkarte */
.md-map {
	--md-map-sea: var(--md-scrim-solid);
	--md-map-land: color-mix(in srgb, var(--md-ink) 9%, var(--md-scrim-solid));
	--md-map-h: clamp(26rem, 74vh, 46rem);
}
.md-map .md-pagehead .md-lede { max-width: 88ch; }

.md-map__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: clamp(1.25rem, 2.5vw, 2rem);
	align-items: start;
}

.md-map__stage {
	position: relative;
	height: var(--md-map-h);
	background: var(--md-map-sea);
	border: 1px solid var(--md-rule-hair);
	overflow: hidden;
}
.md-map__view {
	position: absolute;
	inset: 0;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.md-map__view:focus-visible { outline: 1px solid var(--md-rule); outline-offset: -1px; }
.md-map--drag .md-map__view { cursor: grabbing; }
.md-map__view svg {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .6s var(--md-ease);
}
.md-map--ready .md-map__view svg { opacity: 1; }
.md-map__fail {
	margin: 0;
	padding: 2rem;
	font-size: var(--md-t-micro);
	color: var(--md-ink-faint);
}

.md-map__grid path {
	fill: none;
	stroke: var(--md-rule-hair);
	stroke-width: 1;
	stroke-dasharray: 2 6;
	vector-effect: non-scaling-stroke;
}
.md-map__land {
	fill: var(--md-map-land);
	stroke: var(--md-rule-soft);
	stroke-width: 1;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.md-map__land--open { stroke: none; }
.md-map__coast {
	fill: none;
	stroke: var(--md-rule-soft);
	stroke-width: 1;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.md-map__lake {
	fill: var(--md-map-sea);
	stroke: var(--md-rule-hair);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.md-map__road {
	fill: none;
	stroke: var(--md-rule);
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.md-map__road--minor { stroke: var(--md-rule-soft); stroke-width: .9; }
.md-map__road--loop { stroke: var(--md-accent-soft); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }

.md-map__water text {
	font-family: var(--md-f-serif);
	font-style: italic;
	font-size: 15px;
	letter-spacing: .14em;
	text-anchor: middle;
	fill: var(--md-ink-faint);
}

/* Punkte rechnet das Skript in Bildschirmpixel um, sie bleiben beim Zoomen
   gleich groß. Beschriftungen der Natur- und Alltagsorte erscheinen erst nah. */
.md-map__pin { cursor: pointer; outline: none; }
.md-map__ring {
	fill: transparent;
	stroke: var(--md-accent-soft);
	stroke-width: 1;
	opacity: 0;
	transition: opacity var(--md-dur) var(--md-ease);
}
.md-map__dot {
	fill: var(--md-ink);
	stroke: var(--md-map-sea);
	stroke-width: 1.5;
	transition: fill var(--md-dur) var(--md-ease);
}
.md-map__pin--ort .md-map__dot { fill: var(--md-map-sea); stroke: var(--md-ink); stroke-width: 1.2; }
.md-map__label {
	font-family: var(--md-f-sans);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	fill: var(--md-ink-dim);
	paint-order: stroke;
	stroke: var(--md-map-land);
	stroke-width: 3px;
	stroke-linejoin: round;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--md-dur) var(--md-ease);
}
.md-map__pin--ort .md-map__label { opacity: 1; fill: var(--md-ink); }
.md-map--near .md-map__label { opacity: 1; }
.md-map__pin:hover .md-map__label,
.md-map__pin--on .md-map__label { opacity: 1; fill: var(--md-ink-bright); }
.md-map__pin:hover .md-map__dot,
.md-map__pin--on .md-map__dot { fill: var(--md-accent-soft); stroke: var(--md-map-sea); }
.md-map__pin:hover .md-map__ring,
.md-map__pin--on .md-map__ring { opacity: 1; }

.md-map__north {
	position: absolute;
	top: .9rem;
	left: .9rem;
	display: grid;
	justify-items: center;
	gap: .2rem;
	font-family: var(--md-f-display);
	font-size: .95rem;
	line-height: 1;
	color: var(--md-ink-dim);
	pointer-events: none;
}
.md-map__north::after {
	content: "";
	width: 1px;
	height: 1.6rem;
	background: linear-gradient(var(--md-ink-dim), transparent);
}

.md-map__tools {
	position: absolute;
	top: .9rem;
	right: .9rem;
	display: grid;
	border: 1px solid var(--md-rule-soft);
	background: var(--md-scrim);
	backdrop-filter: var(--md-glass);
	-webkit-backdrop-filter: var(--md-glass);
}
.md-map__tool {
	appearance: none;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--md-f-sans);
	font-size: 1rem;
	line-height: 1;
	color: var(--md-ink-dim);
	cursor: pointer;
	transition: color var(--md-dur) var(--md-ease);
}
.md-map__tool + .md-map__tool { border-top: 1px solid var(--md-rule-hair); }
.md-map__tool:hover { color: var(--md-ink-bright); }
.md-map__tool--reset { font-size: .9rem; }

.md-map__scale {
	position: absolute;
	left: .9rem;
	bottom: .8rem;
	display: grid;
	gap: .3rem;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
	pointer-events: none;
}
.md-map__scalebar {
	display: block;
	height: 5px;
	border: 1px solid var(--md-ink-faint);
	border-top: 0;
}
.md-map__credit {
	position: absolute;
	right: .9rem;
	bottom: .8rem;
	margin: 0;
	font-size: .55rem;
	letter-spacing: .08em;
	color: var(--md-ink-faint);
}
.md-map__credit a { color: inherit; }
.md-map__credit a:hover { color: var(--md-ink); }

/* Seitenspalte: Filter und Ortsliste, die Liste scrollt in Kartenhöhe. */
.md-map__side {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	gap: 1rem;
	max-height: var(--md-map-h);
}
.md-map__filter { display: flex; flex-wrap: wrap; gap: .4rem; }
.md-map__cat {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .8rem;
	background: none;
	border: 1px solid var(--md-rule-hair);
	font-family: inherit;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
	cursor: pointer;
	transition: border-color var(--md-dur) var(--md-ease), color var(--md-dur) var(--md-ease);
}
.md-map__cat::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	border: 1px solid currentColor;
}
.md-map__cat[aria-pressed="true"] { border-color: var(--md-rule-soft); color: var(--md-ink); }
.md-map__cat[aria-pressed="true"]::before { background: currentColor; }
.md-map__cat:hover { color: var(--md-ink-bright); }

.md-map__list {
	position: relative;
	margin: 0;
	padding: 0 .4rem 0 0;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scroll-behavior: smooth;
}
.md-map__place { border-top: 1px solid var(--md-rule-hair); }
.md-map__place:last-child { border-bottom: 1px solid var(--md-rule-hair); }
.md-map__pn { margin: 0; font-size: inherit; font-weight: 400; }
.md-map__pick {
	appearance: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: .75rem 0;
	background: none;
	border: 0;
	font-family: var(--md-f-sans);
	font-size: var(--md-t-nav);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	text-align: left;
	color: var(--md-ink-dim);
	cursor: pointer;
	transition: color var(--md-dur) var(--md-ease);
}
.md-map__pick::after {
	content: attr(data-kind);
	flex: 0 0 auto;
	font-size: .55rem;
	letter-spacing: var(--md-ls-nav);
	color: var(--md-ink-faint);
}
.md-map__pick:hover,
.md-map__place--on .md-map__pick { color: var(--md-ink-bright); }
.md-map__place--on .md-map__pick::after { color: var(--md-accent-soft); }
.md-map__pd { display: none; padding: 0 0 1rem; }
.md-map__place--on .md-map__pd { display: block; }
.md-map__pd p {
	margin: 0 0 .7rem;
	font-size: var(--md-t-micro);
	line-height: 1.85;
	color: var(--md-ink-dim);
}
.md-map__pd p:last-child { margin-bottom: 0; }
.md-map__pd a {
	color: var(--md-ink);
	border-bottom: 1px solid var(--md-rule-hair);
}
.md-map__pd a:hover { color: var(--md-ink-bright); border-bottom-color: var(--md-ink-faint); }

@media (max-width: 60rem) {
	.md-map { --md-map-h: clamp(22rem, 62vh, 34rem); }
	.md-map__layout { grid-template-columns: minmax(0, 1fr); }
	.md-map__side { max-height: none; }
	.md-map__list { max-height: 26rem; }
}