/**
 * TSV Heiligenrode – digital match-day magazine "Hallenheft" (since Theme 1.13.0).
 *
 * Loaded on the public page /hallenheft/ (incl. the release preview), on the editorial screen
 * "Hallenheft" and – since 1.13.2, when an issue is published – on the front page for the teaser
 * of the newest issue (see tsvt_mag_assets() in inc/magazine.php).
 *
 * 1. Page box: every page is an A4 box (210:297) and a size container. All sizes inside a page use
 *    cqw (1 % of the page width), so a page scales as a whole – thumbnail, phone, double page.
 *    Pages keep their paper colours in dark mode (a printed booklet does not change colour).
 * 2. Front cover, back cover, colour treatments ("tone").
 * 3. Inner pages: running head, one/two/three areas, images, page number.
 * 4. Flip book: list without JS, swipe track on phones (.is-single), double pages with page
 *    turning on wide screens (.is-spread), zoom layer.
 * 5. Archive tiles, front-page teaser (since 1.13.2), release preview panel.
 * 6. Editorial screen: live preview, page thumbnails, layout choice, area editors.
 * 7. Printing (since 1.13.6): popover "Drucken" and page selection form. The print view itself
 *    (A4 sheets, toolbar, @page rules) is styled in assets/css/magazine-print.css.
 * 8. New parts on A4 pages (since 1.14.0): text boxes, data blocks, tappable ads, home game on
 *    the cover, hints of the release preview. The reading view itself is styled in
 *    assets/css/magazine-reader.css.
 * 9. Editorial screen (since 1.14.0): "Art des Bereichs", text box buttons, preview tabs and the
 *    phone preview.
 *
 * The text of an area shrinks via the custom property --fit (set by assets/js/magazine.js, 1 … 0.72).
 */

/* =====================================================================
   1. Page box
   ===================================================================== */
.mag-page {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 210 / 297;
	container-type: inline-size;
	overflow: hidden;
	background: #ffffff;
	color: #2a2a2e;
	font-family: var(--font);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	isolation: isolate;
}
.mag-page *,
.mag-page *::before,
.mag-page *::after {
	box-sizing: border-box;
}
.mag-page h2,
.mag-page h3,
.mag-page p,
.mag-page ul,
.mag-page ol,
.mag-page figure,
.mag-page blockquote {
	margin: 0;
}

/* =====================================================================
   2. Covers
   ===================================================================== */
.mag-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background:
		radial-gradient(120% 80% at 20% 15%, #2f9a3e 0%, rgba(47, 154, 62, 0) 60%),
		linear-gradient(165deg, #1f7a2e 0%, #165f24 45%, #0d3f18 78%, #141416 100%);
}
.mag-bg__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mag-bg::before,
.mag-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Green toned photo like the printed issue: black-and-white photo coloured in club green. */
.mag-tone--gruen.has-bg .mag-bg__img {
	filter: grayscale(1) contrast(1.15) brightness(0.92);
}
.mag-tone--gruen.has-bg .mag-bg::before {
	background: #2fb43d;
	mix-blend-mode: multiply;
	opacity: 0.92;
}
.mag-tone--gruen .mag-bg::after,
.mag-tone--dunkel .mag-bg::after {
	background: linear-gradient(180deg, rgba(8, 26, 12, 0.55) 0%, rgba(8, 26, 12, 0) 34%, rgba(8, 26, 12, 0) 55%, rgba(6, 18, 9, 0.88) 100%);
}
.mag-tone--dunkel.has-bg .mag-bg::before {
	background: rgba(10, 12, 12, 0.38);
}
.mag-tone--original .mag-bg::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.78) 100%);
}

/* Without a photo: club green with fine curved lines (like the printed back cover). */
.mag-cover:not(.has-bg) .mag-bg::before,
.mag-back:not(.has-bg) .mag-bg::before {
	background:
		repeating-radial-gradient(circle at -10% 110%, rgba(255, 255, 255, 0.055) 0 0.22cqw, rgba(255, 255, 255, 0) 0.22cqw 1.7cqw);
	mix-blend-mode: normal;
	opacity: 1;
}

.mag-cover,
.mag-back {
	background: #0d3f18;
	color: #ffffff;
}
.mag-cover__issue {
	position: absolute;
	top: 5.4cqw;
	right: 5.6cqw;
	padding: 0.95cqw 2.2cqw;
	border: 0.32cqw solid rgba(255, 255, 255, 0.85);
	border-radius: 99cqw;
	font-size: 2.15cqw;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: rgba(0, 0, 0, 0.18);
}
.mag-cover__issue:empty {
	display: none;
}
/* Crest and title. Position and size come from the editorial area (since 1.13.1):
   --hx centre in % of the page width, --hy top edge in % of the page height (the page is
   141.4cqw high), --hz scale. The block is always as wide as possible around its centre without
   leaving the page, so the title fit (--fitw) keeps it inside the page. */
.mag-cover__mast {
	--hx: 50;
	--hy: 10;
	--hz: 1;
	--hw: calc(min(var(--hx), 100 - var(--hx)) * 1cqw - 5cqw);
	position: absolute;
	top: calc(var(--hy) * 1.414cqw);
	left: calc(var(--hx) * 1cqw - var(--hw));
	width: calc(var(--hw) * 2);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.mag-cover__crest {
	display: block;
	width: calc(20cqw * var(--hz));
	height: auto;
	filter: drop-shadow(0 1cqw 2.2cqw rgba(0, 0, 0, 0.45));
}
.mag-cover__title {
	margin-top: calc(4.5cqw * var(--hz));
	color: #ffffff;
	max-width: 100%;
	font-size: calc(9.4cqw * var(--hz) * var(--fitw, 1));
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: 0 0.6cqw 2.4cqw rgba(0, 0, 0, 0.45);
}
.mag-cover__sub {
	margin-top: calc(1.6cqw * var(--hz));
	font-size: calc(4.3cqw * var(--hz));
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-shadow: 0 0.5cqw 2cqw rgba(0, 0, 0, 0.4);
}
.mag-cover__foot {
	position: absolute;
	left: 6.2cqw;
	right: 5.4cqw;
	bottom: 6cqw;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3cqw;
}
.mag-cover__left {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2.4cqw;
}
.mag-cover__slogan {
	font-size: 2.25cqw;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.mag-cover__sp {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5cqw;
	padding: 0;
	list-style: none;
}
.mag-cover__sp:empty {
	display: none;
}
.mag-cover__sp li {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 8.4cqw;
	min-width: 12cqw;
	max-width: 19cqw;
	padding: 1.1cqw 1.6cqw;
	border-radius: 1.2cqw;
	background: #ffffff;
	color: #262629;
	font-size: 1.7cqw;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}
.mag-cover__sp img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.mag-cover__season {
	flex: 0 0 auto;
	display: flex;
	gap: 0.4cqw;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-style: italic;
	font-weight: 800;
	line-height: 0.92;
	text-transform: uppercase;
	text-shadow: 0 0.5cqw 2cqw rgba(0, 0, 0, 0.4);
}
.mag-cover__season[hidden] {
	display: none;
}
.mag-cover__season span {
	font-size: 4.6cqw;
}
.mag-cover__season b {
	font-size: 7.2cqw;
	font-weight: 800;
}

.mag-back__head {
	position: absolute;
	top: 15cqw;
	left: 16cqw;
	right: 10cqw;
	display: flex;
	align-items: flex-start;
	gap: 3.2cqw;
}
.mag-back__crest {
	flex: 0 0 auto;
	display: block;
	width: 12cqw;
	height: auto;
	filter: drop-shadow(0 0.8cqw 1.8cqw rgba(0, 0, 0, 0.35));
}
.mag-back__txt {
	display: flex;
	flex-direction: column;
	gap: 0.4cqw;
	padding-top: 1.2cqw;
	font-size: 2.6cqw;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.mag-back__txt b {
	font-weight: 800;
}
.mag-back__txt span {
	font-weight: 500;
}
.mag-back__copy {
	position: absolute;
	right: 7cqw;
	bottom: 6cqw;
	font-size: 1.6cqw;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
}

/* =====================================================================
   3. Inner pages
   ===================================================================== */
.mag-run {
	position: absolute;
	top: 4.6cqw;
	left: 7cqw;
	right: 7cqw;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 3cqw;
	padding-bottom: 1.2cqw;
	border-bottom: 0.28cqw solid #30bf30;
	font-size: 1.55cqw;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.mag-run b {
	color: #1b7d1b;
	font-style: italic;
	font-weight: 800;
}
.mag-run span {
	color: #6b6b72;
	font-weight: 600;
}
.mag-cols {
	position: absolute;
	top: 10.6cqw;
	bottom: 10cqw;
	left: 7cqw;
	right: 7cqw;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	grid-template-columns: minmax(0, 1fr);
	gap: 4.6cqw;
}
.mag-l2 .mag-cols {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mag-l3 .mag-cols {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3.6cqw;
}
.mag-area {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	--mag-t: 4.4cqw;
	--mag-fs: 2.3cqw;
}
.mag-l2 .mag-area {
	--mag-t: 3.5cqw;
	--mag-fs: 2.1cqw;
}
.mag-l3 .mag-area {
	--mag-t: 2.8cqw;
	--mag-fs: 1.9cqw;
}
/* Thin rule between columns. */
.mag-area + .mag-area::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -2.3cqw;
	border-left: 0.15cqw solid #e4e4e4;
}
.mag-l3 .mag-area + .mag-area::before {
	left: -1.8cqw;
}
/* Stacked areas ("untereinander", since 1.13.1): full-width rows, image left or right like on a
   full-width page, thin rule between the rows. */
.mag-rows.mag-l2 .mag-cols,
.mag-rows.mag-l3 .mag-cols {
	grid-template-columns: minmax(0, 1fr);
}
.mag-rows.mag-l2 .mag-cols {
	grid-template-rows: repeat(2, minmax(0, 1fr));
}
.mag-rows.mag-l3 .mag-cols {
	grid-template-rows: repeat(3, minmax(0, 1fr));
}
.mag-rows.mag-l2 .mag-area {
	--mag-t: 3.8cqw;
	--mag-fs: 2.2cqw;
}
.mag-rows.mag-l3 .mag-area {
	--mag-t: 3.2cqw;
	--mag-fs: 2.05cqw;
}
.mag-rows .mag-area + .mag-area::before {
	top: -2.3cqw;
	right: 0;
	bottom: auto;
	left: 0;
	border-top: 0.15cqw solid #e4e4e4;
	border-left: 0;
}
.mag-rows.mag-l3 .mag-area + .mag-area::before {
	top: -1.8cqw;
	left: 0;
}
.mag-rows .mag-area__t {
	margin-bottom: 1.6cqw;
}
.mag-rows .mag-area__img--left,
.mag-rows .mag-area__img--right {
	width: 30cqw;
	margin-bottom: 0.8cqw;
}
.mag-rows.mag-l2 .mag-area__img--left img,
.mag-rows.mag-l2 .mag-area__img--right img {
	max-height: 40cqw;
}
.mag-rows.mag-l3 .mag-area__img--left img,
.mag-rows.mag-l3 .mag-area__img--right img {
	max-height: 23cqw;
}
.mag-area__t {
	flex: 0 0 auto;
	margin-bottom: 2.2cqw;
	color: #262629;
	font-size: var(--mag-t);
	font-style: italic;
	font-weight: 800;
	line-height: 1.08;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.mag-area__t::after {
	content: '';
	display: block;
	width: 7cqw;
	height: 0.6cqw;
	margin-top: 1.4cqw;
	border-radius: 1cqw;
	background: #30bf30;
}
.mag-area__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	color: #3a3a40;
	font-size: calc(var(--mag-fs) * var(--fit, 1));
	line-height: 1.5;
	overflow-wrap: break-word;
	hyphens: auto;
}
.mag-area__text > :last-child {
	margin-bottom: 0;
}
.mag-area__text p,
.mag-area__text ul,
.mag-area__text ol,
.mag-area__text blockquote {
	margin: 0 0 0.75em;
}
.mag-area__text h2 {
	margin: 0.9em 0 0.35em;
	color: #1b7d1b;
	font-size: 1.12em;
	font-weight: 800;
	line-height: 1.2;
}
.mag-area__text h2:first-child {
	margin-top: 0;
}
.mag-area__text ul,
.mag-area__text ol {
	padding-left: 1.3em;
}
.mag-area__text li {
	margin-bottom: 0.2em;
}
.mag-area__text blockquote {
	padding-left: 0.9em;
	border-left: 0.3em solid #30bf30;
	color: #262629;
	font-style: italic;
	font-weight: 500;
}
.mag-area__text strong,
.mag-area__text b {
	color: #262629;
	font-weight: 700;
}
.mag-area__text a {
	color: #1b7d1b;
	text-decoration: underline;
}
.mag-area__img {
	overflow: hidden;
	border-radius: 1cqw;
	background: #eeeeee;
}
.mag-area__img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.mag-area__img--left,
.mag-area__img--right {
	width: 33cqw;
	margin-bottom: 1.6cqw;
}
.mag-area__img--left {
	float: left;
	margin-right: 3cqw;
}
.mag-area__img--right {
	float: right;
	margin-left: 3cqw;
}
.mag-area__img--left img,
.mag-area__img--right img {
	max-height: 60cqw;
}
.mag-area__img--top {
	flex: 0 0 auto;
	margin-bottom: 2.6cqw;
}
.mag-area__img--bottom {
	flex: 0 0 auto;
	margin-top: 2.6cqw;
}
.mag-area__img--top img,
.mag-area__img--bottom img {
	max-height: 46cqw;
}
.mag-l3 .mag-area__img--top img,
.mag-l3 .mag-area__img--bottom img {
	max-height: 38cqw;
}
/* Gaps between image and text. Two classes on purpose: ".mag-page figure { margin: 0 }" above
   would otherwise win and the text would touch the image (fixed in 1.13.1). */
.mag-area .mag-area__img--left {
	margin: 0 3cqw 1.6cqw 0;
}
.mag-area .mag-area__img--right {
	margin: 0 0 1.6cqw 3cqw;
}
.mag-area .mag-area__img--top {
	margin: 0 0 2.6cqw;
}
.mag-area .mag-area__img--bottom {
	margin: 2.6cqw 0 0;
}
.mag-rows .mag-area .mag-area__img--left,
.mag-rows .mag-area .mag-area__img--right {
	margin-bottom: 0.8cqw;
}
.mag-area .mag-area__text .mag-area__img--left,
.mag-area .mag-area__text .mag-area__img--right {
	margin-top: 0.6cqw;
}
/* Lists next to a floating image keep their bullets visible. */
.mag-area__text ul,
.mag-area__text ol {
	display: flow-root;
}
/* Two images on a full-width page (since 1.13.1): smaller above/below the text; the second side
   image sits halfway down the text (see tsvt_mag_area()). */
.mag-area.has-img2 .mag-area__img--top img,
.mag-area.has-img2 .mag-area__img--bottom img {
	max-height: 34cqw;
}
/* Image frame with zoom and position (since 1.13.4, see tsvt_mag_figure()). The frame keeps the
   size an image had before (full width or a third of the page, at most as high as before); the
   image inside is sized and placed by --ar (width/height), --z (1 = the whole image fits in) and
   --x/--y (0–1, like object-position) in container units of the frame. At zoom 1 the whole image
   is visible and the rest of the frame stays paper. Images without zoom data keep the rules above. */
.mag-area__img.is-crop {
	position: relative;
	container-type: size;
	font-size: 1cqw; /* 1 % of the page width (resolved against the page) – corner radius below. */
	background: none;
}
.mag-area__img.is-crop:not(.mag-area__img--fill) {
	aspect-ratio: var(--ar);
}
.mag-page .mag-area .mag-area__img.is-crop img {
	position: absolute;
	top: calc((100cqh - min(100cqh, 100cqw / var(--ar)) * var(--z)) * var(--y));
	left: calc((100cqw - min(100cqw, 100cqh * var(--ar)) * var(--z)) * var(--x));
	width: calc(min(100cqw, 100cqh * var(--ar)) * var(--z));
	height: calc(min(100cqh, 100cqw / var(--ar)) * var(--z));
	max-width: none;
	max-height: none;
	border-radius: 1em;
	object-fit: fill;
}
/* Same height limits as the images above, now on the frame. */
.mag-area__img--left.is-crop,
.mag-area__img--right.is-crop {
	max-height: 60cqw;
}
.mag-rows.mag-l2 .mag-area__img--left.is-crop,
.mag-rows.mag-l2 .mag-area__img--right.is-crop {
	max-height: 40cqw;
}
.mag-rows.mag-l3 .mag-area__img--left.is-crop,
.mag-rows.mag-l3 .mag-area__img--right.is-crop {
	max-height: 23cqw;
}
.mag-area__img--top.is-crop,
.mag-area__img--bottom.is-crop {
	max-height: 46cqw;
}
.mag-l3 .mag-area__img--top.is-crop,
.mag-l3 .mag-area__img--bottom.is-crop {
	max-height: 38cqw;
}
.mag-area.has-img2 .mag-area__img--top.is-crop,
.mag-area.has-img2 .mag-area__img--bottom.is-crop {
	max-height: 34cqw;
}
/* "Ganzer Bereich" (since 1.13.4): only the image, the frame is the whole area. */
.mag-area .mag-area__img--fill {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	margin: 0;
}
/* Text colours in the area text (since 1.13.1, see tsv_mag_text_colors()). */
.mag-area__text .mag-c-gruen {
	color: #1b7d1b;
}
.mag-area__text .mag-c-rot {
	color: #c62828;
}
.mag-area__text .mag-c-grau {
	color: #6b6b72;
}
.mag-area__text .mag-c-gruen strong,
.mag-area__text .mag-c-gruen b,
.mag-area__text .mag-c-rot strong,
.mag-area__text .mag-c-rot b,
.mag-area__text .mag-c-grau strong,
.mag-area__text .mag-c-grau b {
	color: inherit;
}
/* Colour swatches in the editor toolbar and the colours inside the (dark or light) editor. */
.rte__bar .rte__color {
	width: 30px;
	height: 30px;
	margin: 4px 1px;
	border: 2px solid var(--line2);
	border-radius: 50%;
}
.rte__bar .rte__color--std {
	background: linear-gradient(135deg, var(--ink) 0 50%, var(--card) 50% 100%);
}
.rte__bar .rte__color--gruen {
	background: #1b7d1b;
}
.rte__bar .rte__color--rot {
	background: #c62828;
}
.rte__bar .rte__color--grau {
	background: #8a8a92;
}
.rte__area .mag-c-gruen {
	color: var(--link);
}
.rte__area .mag-c-rot {
	color: #e5534b;
}
.rte__area .mag-c-grau {
	color: var(--muted);
}
/* Text that does not fit even at the smallest size: fade out instead of a hard cut. */
.mag-area.is-overflow .mag-area__body {
	-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
.mag-foot {
	position: absolute;
	left: 7cqw;
	right: 7cqw;
	bottom: 4.4cqw;
	display: flex;
	justify-content: flex-end;
	color: #30bf30;
	font-size: 2.3cqw;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
}
.mag-page.is-left .mag-foot {
	justify-content: flex-start;
}

/* Inner pages and blank page (since 1.13.1): light paper grain over the whole page and the
   handball court of the website very faintly behind the text, turned to portrait. Front and back
   cover keep their own background. */
.mag-inner {
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.35 0 0 0 0 0.3 0.16 0 0 0 0'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.05' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0.07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size: 30cqw 30cqw;
}
.mag-inner::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: calc(50% - 50cqw);
	left: calc(50% - 70.7cqw);
	width: 141.4cqw;
	height: 100cqw;
	background: url(../img/court.svg) center / contain no-repeat;
	opacity: 0.06;
	transform: rotate(90deg);
	pointer-events: none;
}
/* Blank page before the back cover (odd number of inner pages). */
.mag-filler {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3cqw;
}
.mag-filler__crest {
	width: 34cqw;
	height: auto;
	opacity: 0.09;
}
.mag-filler__t {
	color: #c4c4c8;
	font-size: 2.2cqw;
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* =====================================================================
   4. Flip book
   ===================================================================== */
.mag {
	position: relative;
	--pw: 520px;
	--ph: calc(var(--pw) * 1.4143);
}
/* Without JavaScript: pages one below the other. */
.mag__pages {
	display: grid;
	gap: 28px;
	justify-items: center;
}
.mag__pages > .mag-page {
	max-width: 620px;
	box-shadow: 0 24px 50px -28px rgba(20, 20, 22, 0.55), 0 0 0 1px rgba(20, 20, 22, 0.06);
}
.mag__stage[hidden],
.mag__bar[hidden],
.mag__hint[hidden] {
	display: none !important;
}

/* Measuring run of magazine.js: lay the pages out off screen at a fixed width. */
.mag.is-measuring .mag__pages {
	position: absolute;
	left: -12000px;
	top: 0;
	width: 600px;
	visibility: hidden;
}

/* Phone / narrow: one page, swipe sideways. */
.mag.is-single .mag__pages {
	display: flex;
	gap: 18px;
	justify-items: initial;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Full window width (--vw from magazine.js), so the page on a phone is as large as possible. */
	margin: 0 calc(50% - var(--vw, 100%) / 2);
	padding: 6px calc((var(--vw, 100%) - var(--pw)) / 2) 22px;
	-webkit-overflow-scrolling: touch;
}
.mag.is-single .mag__pages::-webkit-scrollbar {
	display: none;
}
.mag.is-single .mag__pages > .mag-page {
	flex: 0 0 var(--pw);
	width: var(--pw);
	max-width: none;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* Wide screens: double pages with page turning. */
.mag.is-spread .mag__pages {
	display: none;
}
.mag__stage {
	position: relative;
	display: flex;
	width: calc(var(--pw) * 2);
	height: var(--ph);
	margin: 0 auto;
	perspective: 2800px;
	transition: transform 0.7s cubic-bezier(0.3, 0.1, 0.2, 1);
}
.mag__stage.is-first {
	transform: translateX(calc(var(--pw) * -0.5));
}
.mag__stage.is-last {
	transform: translateX(calc(var(--pw) * 0.5));
}
.mag__slot {
	position: relative;
	width: var(--pw);
	height: var(--ph);
}
.mag__slot > .mag-page,
.mag__face > .mag-page {
	width: 100%;
	height: 100%;
}
.mag__slot > .mag-page {
	box-shadow: 0 30px 60px -32px rgba(20, 20, 22, 0.6);
}
.mag__slot--l > .mag-page {
	cursor: w-resize;
}
.mag__slot--r > .mag-page {
	cursor: e-resize;
}
/* Shade towards the spine. */
.mag__slot--l > .mag-page::after,
.mag__slot--r > .mag-page::after,
.mag__face > .mag-page::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 9cqw;
	pointer-events: none;
	z-index: 5;
}
.mag__slot--l > .mag-page::after,
.mag__face--l > .mag-page::after {
	right: 0;
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0));
}
.mag__slot--r > .mag-page::after,
.mag__face--r > .mag-page::after {
	left: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0));
}
.mag__leaf {
	position: absolute;
	top: 0;
	width: var(--pw);
	height: var(--ph);
	z-index: 4;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.3, 0.1, 0.2, 1);
	will-change: transform;
}
.mag__leaf--fwd {
	left: var(--pw);
	transform-origin: left center;
}
.mag__leaf--back {
	left: 0;
	transform-origin: right center;
}
.mag__leaf.is-turned.mag__leaf--fwd {
	transform: rotateY(-180deg);
}
.mag__leaf.is-turned.mag__leaf--back {
	transform: rotateY(180deg);
}
.mag__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 30px 60px -32px rgba(20, 20, 22, 0.6);
}
.mag__face--b {
	transform: rotateY(180deg);
}

.mag__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-top: 22px;
}
.mag__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--inv-bg);
	color: var(--inv-fg);
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.mag__nav:disabled {
	opacity: 0.3;
	cursor: default;
}
@media (hover: hover) {
	.mag__nav:not(:disabled):hover {
		transform: scale(1.06);
	}
}
.mag__count {
	min-width: 150px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}
.mag__zoom {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--line2);
	border-radius: 999px;
	background: var(--card);
	color: var(--ink);
	font: 600 14px/1 var(--font);
	cursor: pointer;
}
.mag__hint {
	margin-top: 10px;
	color: var(--muted);
	font-size: 13px;
	text-align: center;
}
.mag :focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

/* Zoom layer: one page at double size, move around by scrolling or with the fingers. */
.mag-zoom {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow: auto;
	overscroll-behavior: contain;
	background: rgba(14, 14, 16, 0.94);
	-webkit-overflow-scrolling: touch;
}
.mag-zoom__page {
	width: var(--zw, 1100px);
	margin: 64px auto 40px;
	padding: 0 16px;
	box-sizing: content-box;
}
.mag-zoom__page > .mag-page {
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.mag-zoom__close {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	color: #18181a;
	font: 700 14px/1 var(--font);
	cursor: pointer;
}
html.mag-zoom-open,
html.mag-zoom-open body {
	overflow: hidden;
}

/* Page bar of the zoom layer: "‹ Seite 8 von 34 ›" (since 1.13.11). */
.mag-zoom.has-nav .mag-zoom__page {
	margin-bottom: 104px;
}
.mag-zoom__bar {
	position: fixed;
	bottom: max(16px, env(safe-area-inset-bottom));
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px;
	border-radius: 999px;
	background: rgba(24, 24, 26, 0.9);
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.8);
	transform: translateX(-50%);
}
.mag-zoom__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: #18181a;
	cursor: pointer;
}
.mag-zoom__nav:disabled {
	opacity: 0.3;
	cursor: default;
}
.mag-zoom__count {
	min-width: 140px;
	padding: 0 6px;
	color: #ffffff;
	font: 700 14px/1 var(--font);
	text-align: center;
	white-space: nowrap;
}
.mag-zoom :focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}
.mag-zoom__page > .mag-page.is-new {
	animation: mag-zoom-in 0.2s ease-out;
}
@keyframes mag-zoom-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mag__leaf,
	.mag__stage {
		transition: none;
	}
	.mag-zoom__page > .mag-page.is-new {
		animation: none;
	}
}

/* =====================================================================
   5. Page "Hallenheft": issue head, archive, release preview
   ===================================================================== */
.mag-issue-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
	margin-bottom: 26px;
}
.mag-issue-head h2 {
	font-size: clamp(22px, 3vw, 30px);
}
.mag-issue-head p {
	color: var(--muted);
	font-size: 15px;
}
.mag-archive {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 28px 22px;
}
.mag-tile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--ink);
	text-decoration: none;
}
.mag-tile__page {
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 18px 36px -22px rgba(20, 20, 22, 0.6), 0 0 0 1px rgba(20, 20, 22, 0.06);
	transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.mag-tile__page .mag-page {
	pointer-events: none;
}
@media (hover: hover) {
	a.mag-tile:hover .mag-tile__page {
		transform: translateY(-4px);
		box-shadow: 0 26px 44px -22px rgba(20, 20, 22, 0.7), 0 0 0 3px var(--hl-ring);
	}
}
.mag-tile__t {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mag-tile__t b {
	font-size: 15px;
	font-weight: 700;
}
.mag-tile__t small {
	color: var(--muted);
	font-size: 13px;
}
.mag-tile.is-current .mag-tile__page {
	box-shadow: 0 0 0 3px var(--accent), 0 18px 36px -22px rgba(20, 20, 22, 0.6);
}

/* Front-page teaser of the newest issue (since 1.13.2, tsvt_mag_home_teaser()): a card like the
   activity slider – the real front cover as a slightly turned booklet on club green with the court
   lines on the left, issue data and the button on the right. */
.magteaser {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	overflow: hidden;
	border-radius: 24px;
	background: var(--card);
	border: 1px solid var(--line);
	box-shadow: var(--card-shadow);
}
.magteaser__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 44px 32px;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(120% 90% at 28% 18%, rgba(255, 255, 255, 0.1), transparent 60%),
		linear-gradient(140deg, #1b7a2a 0%, #093a17 100%);
}
.magteaser__media::before {
	content: "";
	position: absolute;
	inset: -12%;
	z-index: -1;
	background: url(../img/court.svg) center / contain no-repeat;
	filter: brightness(0) invert(1);
	opacity: 0.13;
	transform: rotate(-8deg);
}
.magteaser__book {
	position: relative;
	display: block;
	width: clamp(190px, 21vw, 250px);
	transform: rotate(-4deg);
	transition: transform 0.45s var(--ease);
}
.magteaser__sheet {
	position: absolute;
	inset: 0;
	border-radius: 3px;
	background: #f3f2ee;
	box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55);
	transform: translate(14px, 6px) rotate(7deg);
}
.magteaser__cover {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 3px;
	box-shadow:
		0 30px 50px -20px rgba(0, 0, 0, 0.65),
		0 0 0 1px rgba(0, 0, 0, 0.08);
}
.magteaser__cover .mag-page {
	pointer-events: none;
}
@media (hover: hover) {
	.magteaser:hover .magteaser__book {
		transform: rotate(-1.5deg) translateY(-6px);
	}
}
.magteaser__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 34px 36px;
}
.magteaser__title {
	font-size: clamp(24px, 3vw, 34px);
	font-style: italic;
	font-weight: 800;
	line-height: 1.1;
}
.magteaser__title a {
	color: var(--ink);
	text-decoration: none;
}
@media (hover: hover) {
	.magteaser__title a:hover {
		color: var(--link);
	}
}
.magteaser__text {
	margin: 0;
	color: var(--text2);
	font-size: 16px;
	line-height: 1.6;
}
.magteaser__meta {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
}
.magteaser__toc {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.magteaser__toc > span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.magteaser__toc ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.magteaser__toc li {
	position: relative;
	padding-left: 16px;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.magteaser__toc li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--accent);
}
.magteaser__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}
@media (max-width: 860px) {
	.magteaser {
		grid-template-columns: 1fr;
	}
	.magteaser__media {
		padding: 36px 24px 40px;
	}
	.magteaser__book {
		width: min(52vw, 220px);
	}
	.magteaser__body {
		justify-content: flex-start;
		padding: 22px 22px 26px;
	}
}
@media (max-width: 560px) {
	.magteaser__toc ul {
		grid-template-columns: 1fr;
	}
}
@media (prefers-reduced-motion: reduce) {
	.magteaser__book {
		transition: none;
	}
}

/* Release preview: panel above and below the issue. */
.mag-pv {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 30px;
	padding: 20px 24px;
	border-radius: 20px;
	background: #13401c;
	color: #ffffff;
	box-shadow: 0 24px 50px -30px rgba(10, 40, 16, 0.8);
}
.mag-pv--end {
	margin: 34px 0 0;
}
.mag-pv__t {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 380px;
}
.mag-pv__t b {
	font-size: 18px;
	font-weight: 800;
}
.mag-pv__t span {
	color: rgba(255, 255, 255, 0.86);
	font-size: 14px;
	line-height: 1.5;
}
.mag-pv__act {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.mag-pv__act form {
	margin: 0;
}
.mag-pv .btn--line {
	border-color: rgba(255, 255, 255, 0.6);
	color: #ffffff;
	background: transparent;
}
.mag-pv__msg {
	flex: 1 1 100%;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 14px;
	font-weight: 600;
}
.mag-pv__msg--bad {
	background: #fde8e8;
	color: #9b1c1c;
}
.mag-pv__check {
	flex: 1 1 100%;
	font-size: 14px;
	font-weight: 600;
}
.mag-pv__check.is-bad {
	padding: 10px 14px;
	border-radius: 12px;
	background: #fff4d6;
	color: #7a5600;
}
.mag-pv__check.is-ok::before {
	content: '✓ ';
}

/* =====================================================================
   6. Editorial screen "Hallenheft"
   ===================================================================== */
.magx-preview {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.magx-preview .mag-page {
	border-radius: 3px;
	box-shadow: 0 18px 40px -20px rgba(20, 20, 22, 0.55), 0 0 0 1px rgba(20, 20, 22, 0.08);
}
.magx-fit {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}
.magx-fit.is-ok {
	background: var(--okbg);
	color: var(--okfg);
}
.magx-fit.is-bad {
	background: var(--badbg);
	color: var(--badfg);
}
.magx-fit.is-warn {
	background: var(--warnbg);
	color: var(--warnfg);
}
.magx-fit svg {
	flex: 0 0 auto;
	margin-top: 2px;
}
/* Check mark while everything fits, warning sign otherwise. */
.magx-fit .magx-fit__warn,
.magx-fit.is-bad .magx-fit__ok,
.magx-fit.is-warn .magx-fit__ok {
	display: none;
}
.magx-fit.is-bad .magx-fit__warn,
.magx-fit.is-warn .magx-fit__warn {
	display: block;
}
.mag--editor .mag-area.is-active {
	outline: 0.45cqw solid #30bf30;
	outline-offset: 0.8cqw;
}
/* After .is-active on purpose: an area that does not fit stays red while it is being edited. */
.mag--editor .mag-area.is-overflow {
	outline: 0.5cqw dashed #d23b3b;
	outline-offset: 0.8cqw;
}
.mag--editor .mag-area.is-empty .mag-area__body::before {
	content: 'Bereich ' attr(data-n) ' ist noch leer';
	display: block;
	padding: 2cqw;
	border: 0.3cqw dashed #cfcfd4;
	border-radius: 1cqw;
	color: #9a9aa2;
	font-size: 1.8cqw;
	font-weight: 600;
	text-align: center;
}

.magx-list .rd-thumb--mag {
	width: 46px;
	height: auto;
	flex: 0 0 46px;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 0 0 1px var(--line2);
}
.magx-head-act {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.magx-pages {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 22px 18px;
	padding: 22px;
}
.magx-thumb {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.magx-thumb__page {
	display: block;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 14px 30px -18px rgba(20, 20, 22, 0.6), 0 0 0 1px rgba(20, 20, 22, 0.08);
	transition: transform 0.25s var(--ease), box-shadow 0.25s ease;
}
.magx-thumb__page .mag-page {
	pointer-events: none;
}
@media (hover: hover) {
	a.magx-thumb__page:hover {
		transform: translateY(-3px);
		box-shadow: 0 20px 36px -18px rgba(20, 20, 22, 0.7), 0 0 0 3px var(--hl-ring);
	}
}
.magx-thumb__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.magx-thumb__meta b {
	font-size: 14px;
}
.magx-thumb__meta small {
	color: var(--muted);
	font-size: 12px;
}
.magx-thumb__act {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}
.magx-thumb__act .inline-form {
	display: inline-flex;
}
.magx-thumb--fixed .magx-thumb__page {
	opacity: 0.92;
}

/* Page order in the overview (since 1.13.5): grip and page number on every inner page,
   dragging, floating save bar. Without JavaScript (no .is-sortable) the old arrows are shown. */
.magx-pages {
	position: relative;
}
.magx-grip,
.magx-pos {
	display: none;
}
.magx-pages.is-sortable .magx-grip {
	display: inline-flex;
}
.magx-pages.is-sortable .magx-pos {
	display: block;
}
.magx-pages.is-sortable .magx-thumb__label {
	display: none;
}
.magx-pages.is-sortable .magx-thumb__meta {
	flex-wrap: wrap;
	justify-content: flex-start;
}
.magx-pages.is-sortable .magx-thumb__meta small {
	flex-basis: 100%;
}
.magx-thumb {
	position: relative;
	transition: transform 0.22s var(--ease);
}
.magx-grip {
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
.rd-main .magx-pos {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	min-height: 40px;
	padding: 0 32px 0 12px;
	background-position: right 10px center;
	font-size: 15px;
	font-weight: 700;
}
.magx-pages.is-dragging {
	-webkit-user-select: none;
	user-select: none;
}
.magx-thumb.is-drag {
	z-index: 20;
	transition: none;
	cursor: grabbing;
}
.magx-thumb.is-drag .magx-grip {
	cursor: grabbing;
}
.magx-thumb.is-drag .magx-thumb__page {
	box-shadow:
		0 28px 50px -20px rgba(20, 20, 22, 0.65),
		0 0 0 3px var(--accent);
}
.magx-thumb.is-moved .magx-thumb__page {
	animation: magx-moved 1.1s ease;
}
@keyframes magx-moved {
	from {
		box-shadow: 0 0 0 5px var(--accent);
	}
}
.magx-orderbar {
	position: fixed;
	left: 50%;
	bottom: 18px;
	z-index: 70;
	transform: translateX(-50%);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	width: max-content;
	max-width: calc(100% - 32px);
	padding: 10px 12px 10px 16px;
	border-radius: 16px;
	border: 1px solid var(--greenline);
	background: var(--card);
	box-shadow: 0 18px 40px -18px rgba(20, 20, 22, 0.5);
	animation: magx-bar-in 0.25s var(--ease);
}
.magx-orderbar[hidden] {
	display: none;
}
.magx-orderbar__t {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
.magx-orderbar__act {
	display: flex;
	gap: 8px;
}
@keyframes magx-bar-in {
	from {
		opacity: 0;
		transform: translate(-50%, 12px);
	}
}
@media (hover: none) and (pointer: coarse) {
	.rd-main .magx-pos {
		font-size: 16px;
	}
}
/* Phones: two pages side by side, so that more pages fit on the screen while dragging. */
@media (max-width: 560px) {
	.magx-pages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 12px;
		padding: 14px;
	}
	.magx-pages.is-sortable .magx-thumb__meta {
		gap: 6px;
	}
	.magx-thumb__act {
		gap: 6px;
	}
	.magx-thumb__act .btn--xs {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding-inline: 6px;
	}
	.magx-thumb__act .btn--xs svg {
		display: none;
	}
	.magx-orderbar {
		width: calc(100% - 24px);
		max-width: none;
		padding: 10px 12px;
	}
	.magx-orderbar__t {
		font-size: 13px;
	}
	.magx-orderbar__act {
		width: 100%;
	}
	.magx-orderbar__act .btn {
		flex: 1 1 0;
		justify-content: center;
		padding-inline: 10px;
		font-size: 14px;
		white-space: nowrap;
	}
	.magx-orderbar__act .btn[type='submit'] {
		flex-grow: 2;
	}
	.magx-orderbar__act .btn svg {
		display: none;
	}
}
@media (max-width: 1024px) and (pointer: coarse) {
	body:has(.tabbar) .magx-orderbar {
		bottom: calc(82px + env(safe-area-inset-bottom, 0px));
	}
}
@media (prefers-reduced-motion: reduce) {
	.magx-thumb {
		transition: none;
	}
	.magx-thumb.is-moved .magx-thumb__page,
	.magx-orderbar {
		animation: none;
	}
}

.magx-add {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}
.magx-add a,
.magx-layout label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid var(--line2);
	border-radius: 16px;
	background: var(--card);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.magx-add a small,
.magx-layout label small {
	display: block;
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
}
@media (hover: hover) {
	.magx-add a:hover,
	.magx-layout label:hover {
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--hl-ring);
	}
}
.magx-layout {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.magx-layout input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.magx-layout input:checked + label {
	border-color: var(--accent);
	background: var(--greenwash);
	box-shadow: 0 0 0 3px var(--hl-ring);
}
.magx-layout input:focus-visible + label {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}
@media (max-width: 640px) {
	.magx-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Position and size of crest and title on the cover (since 1.13.1). */
.magx-head {
	display: grid;
	gap: 12px;
	margin-bottom: 14px;
}
.magx-head__row {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 56px;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 600;
}
.magx-head__row input {
	width: 100%;
	accent-color: var(--accent);
}
.magx-head__row output {
	color: var(--muted);
	font-size: 13px;
	text-align: right;
}
@media (max-width: 640px) {
	.magx-head__row {
		grid-template-columns: minmax(0, 1fr) 56px;
	}
	.magx-head__row span {
		grid-column: 1 / -1;
	}
}
.mag--editor .mag-cover__mast.is-movable {
	cursor: grab;
	touch-action: none;
	user-select: none;
	border-radius: 2cqw;
	outline: 0.35cqw dashed transparent;
	outline-offset: 1.2cqw;
	transition: outline-color 0.2s ease;
}
.mag--editor .mag-cover__mast.is-movable:hover,
.mag--editor .mag-cover__mast.is-dragging {
	outline-color: rgba(255, 255, 255, 0.75);
}
.mag--editor .mag-cover__mast.is-dragging {
	cursor: grabbing;
	transition: none;
}
.mag--editor .mag-cover__mast img {
	-webkit-user-drag: none;
	pointer-events: none;
}
/* Area images with zoom in the page editor (since 1.13.4): frame outlined, drag to move. */
.magx-preview .mag-area__img.is-crop {
	outline: 0.25cqw dashed rgba(0, 0, 0, 0.16);
	outline-offset: -0.125cqw;
}
.magx-preview .mag-area__img.is-movable {
	cursor: grab;
	touch-action: none;
	user-select: none;
}
.magx-preview .mag-area__img.is-movable:hover,
.magx-preview .mag-area__img.is-movable:focus-visible,
.magx-preview .mag-area__img.is-dragging {
	outline: 0.35cqw dashed var(--accent);
}
.magx-preview .mag-area__img.is-dragging {
	cursor: grabbing;
}
.magx-preview .mag-area__img.is-crop img {
	-webkit-user-drag: none;
	pointer-events: none;
}
.magx-preview .mag-area.is-fill:not(.has-img) {
	outline: 0.25cqw dashed rgba(0, 0, 0, 0.16);
}
/* Zoom controls of an area image. */
.magx-crop {
	display: grid;
	gap: 8px;
	flex: 1 1 100%;
}
.magx-crop[hidden] {
	display: none;
}
.magx-crop__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	font-size: 14px;
	font-weight: 600;
}
.magx-crop__row input[type='range'] {
	flex: 1 1 160px;
	min-width: 120px;
	accent-color: var(--accent);
}
.magx-crop__row output {
	min-width: 112px;
	color: var(--muted);
	font-size: 13px;
}
.magx-fillnote {
	margin: 0;
}
.magx-fillnote[hidden],
[data-magx-textfields][hidden] {
	display: none;
}
@media (min-width: 641px) {
	/* Five layouts: side by side in the first row, stacked ones below. */
	.magx-layout label[for='f-layout-2r'] {
		grid-column: 2;
	}
}
.magx-area {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--soft);
}
.magx-area[hidden] {
	display: none;
}
.magx-area__h {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}
.magx-area__h .rd-badge {
	min-width: 26px;
}
.magx-imgrow {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-start;
}
.magx-imgrow[hidden] {
	display: none;
}
.magx-imgrow .upl {
	flex: 1 1 240px;
}
.magx-imgrow .field {
	flex: 0 1 220px;
}
.magx-sponsors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}
.magx-sponsors label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 92px;
	padding: 12px 10px 10px;
	border: 1.5px solid var(--line2);
	border-radius: 14px;
	background: #ffffff;
	color: #262629;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}
.magx-sponsors img {
	max-width: 100%;
	max-height: 44px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.magx-sponsors input {
	position: absolute;
	top: 8px;
	left: 8px;
	accent-color: var(--accent);
}
.magx-sponsors label:has(input:checked) {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--hl-ring);
}
.focuspick--a4 .focuspick__frame {
	width: 220px;
	aspect-ratio: 210 / 297;
}
.magx-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
}
.magx-warn-small {
	color: var(--badfg);
	font-size: 13px;
	font-weight: 600;
}

/* =====================================================================
   7. Printing (since 1.13.6): button "Drucken" and page selection
   The popover uses the editorial popover (.spbk, details[data-pop]); the
   same form sits in the toolbar of the print view (magazine-print.css).
   ===================================================================== */
.magx-print > summary {
	list-style: none;
}
.magx-print > summary::-webkit-details-marker {
	display: none;
}
.spbk__panel.magx-print__panel {
	width: min(380px, calc(100vw - 32px));
}
.magx-print__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}
.magx-print__form .check {
	margin: 0;
	color: var(--ink);
	font-size: 14px;
}
.magx-print__form .field-input {
	min-height: 44px;
}
.magx-print__form .field-help {
	margin: 0;
}
.magx-print__err {
	margin: 0;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--badbg);
	color: var(--badfg);
	font-size: 13px;
	font-weight: 600;
}
.magx-print__err[hidden] {
	display: none;
}
.magx-print__go {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding-top: 2px;
}

/* =====================================================================
   8. New parts on A4 pages (since 1.14.0, with Plugin 1.14.0)
   Only pages that use them change: text boxes (quote, number box, info box), data blocks
   ("Bausteine"), tappable ads and the home game on the front cover.
   ===================================================================== */

/* Text boxes inside the text of an area (sizes in em: they shrink with the text). */
.mag-area__text blockquote.mag-quote {
	padding: 0.55em 0.8em 0.6em;
	border-left: 0.35em solid #30bf30;
	border-radius: 0 0.5em 0.5em 0;
	background: #f1f7f1;
	color: #18181a;
	font-size: 1.12em;
	font-style: italic;
	font-weight: 700;
	line-height: 1.35;
}
.mag-area__text blockquote.mag-quote p {
	margin: 0 0 0.3em;
}
.mag-area__text cite {
	display: block;
	color: #5f6368;
	font-size: 0.78em;
	font-style: normal;
	font-weight: 600;
}
.mag-area__text aside {
	margin: 0 0 0.75em;
}
.mag-area__text aside.mag-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr));
	gap: 0.45em;
}
.mag-area__text aside.mag-facts p {
	margin: 0;
	padding: 0.45em 0.6em 0.5em;
	border-radius: 0.5em;
	background: #f1f3f1;
	color: #45484c;
	font-size: 0.86em;
	line-height: 1.3;
}
.mag-area__text aside.mag-facts strong,
.mag-area__text aside.mag-facts b {
	display: block;
	color: #1b7d1b;
	font-size: 1.7em;
	font-style: italic;
	font-weight: 800;
	line-height: 1.1;
}
.mag-area__text aside.mag-info {
	padding: 0.55em 0.8em 0.6em;
	border: 0.1em solid #bfe5bf;
	border-radius: 0.5em;
	background: #f4fbf4;
}
.mag-area__text aside.mag-info p {
	margin: 0 0 0.4em;
}
.mag-area__text aside.mag-info > p:last-child {
	margin-bottom: 0;
}
.mag-area__text aside.mag-info > p:first-child strong:only-child,
.mag-area__text aside.mag-info > p:first-child b:only-child {
	color: #1b7d1b;
	font-size: 0.82em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Tappable ad: an invisible link over the whole area (or over an image marked as an ad). */
.mag-area__img.has-ad {
	position: relative;
}
.mag-area__ad {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 1cqw;
}
.mag-area__ad:focus-visible {
	outline: 0.5cqw solid #30bf30;
	outline-offset: 0.3cqw;
}

/* Home game on the front cover (field "Heimspiel"). */
.mag-cover__game {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0.3cqw;
	padding: 1.5cqw 2.4cqw 1.7cqw;
	border-radius: 1.4cqw;
	background: #30bf30;
	color: #18181a;
	line-height: 1.15;
}
.mag-cover__game b {
	font-size: 1.45cqw;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.mag-cover__game span {
	font-size: 2cqw;
	font-weight: 600;
}
.mag-cover__game span:first-of-type {
	font-size: 2.9cqw;
	font-style: italic;
	font-weight: 800;
}

/* Data blocks: the block fills its area, sizes follow the text size of the area. */
.mag-area.is-block .mag-area__body {
	color: #2a2a2e;
}
.mag-blk__sub {
	margin: 0 0 0.7em !important;
	color: #6b6b72;
	font-size: 0.78em;
	font-weight: 600;
}
.mag-blk .mag-tbl {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 0.86em;
	line-height: 1.25;
}
.mag-blk .mag-tbl th:nth-child(1) {
	width: 1.9em;
}
.mag-blk .mag-tbl th:nth-child(3) {
	width: 2.2em;
}
.mag-blk .mag-tbl th:nth-child(4) {
	width: 3.9em;
}
.mag-blk .mag-tbl th:nth-child(5) {
	width: 2.9em;
}
.mag-l3:not(.mag-rows) .mag-blk .mag-tbl th:nth-child(4),
.mag-l3:not(.mag-rows) .mag-blk .mag-tbl td:nth-child(4) {
	display: none;
}
.mag-blk .mag-tbl th {
	padding: 0 0.3em 0.35em;
	color: #6b6b72;
	font-size: 0.82em;
	font-weight: 600;
	text-align: left;
}
.mag-blk .mag-tbl td {
	padding: 0.32em 0.3em;
	border-top: 0.08em solid #ececec;
	overflow-wrap: break-word;
}
.mag-blk .mag-tbl td:not(:nth-child(2)),
.mag-blk .mag-tbl th:not(:nth-child(2)) {
	text-align: right;
	white-space: nowrap;
}
.mag-blk .mag-tbl td:first-child,
.mag-blk .mag-tbl th:first-child {
	text-align: left;
}
.mag-blk .mag-tbl tr.is-us td {
	border-top-color: transparent;
	background: #eaf7ea;
	color: #18181a;
	font-weight: 700;
}
.mag-blk .mag-games__h {
	margin: 0 0 0.3em;
	color: #1b7d1b;
	font-size: 0.82em;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.mag-blk .mag-games {
	margin: 0 0 0.9em;
	padding: 0;
	list-style: none;
}
.mag-blk .mag-games li {
	display: grid;
	grid-template-columns: 3.2em minmax(0, 1fr) auto;
	gap: 0.6em;
	align-items: center;
	padding: 0.35em 0;
	border-top: 0.08em solid #ececec;
	line-height: 1.25;
}
.mag-blk .mag-games--next li {
	grid-template-columns: 3.2em minmax(0, 1fr);
}
.mag-blk .mag-games__d {
	display: flex;
	flex-direction: column;
	color: #6b6b72;
	font-size: 0.82em;
}
.mag-blk .mag-games__d b {
	color: #262629;
}
.mag-blk .mag-games__m small {
	display: block;
	color: #6b6b72;
	font-size: 0.82em;
}
.mag-blk .mag-games__r {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.mag-blk .mag-games__r b {
	font-size: 1.15em;
	font-style: italic;
	font-weight: 800;
}
.mag-blk .mag-games__r i {
	padding: 0.05em 0.5em;
	border-radius: 1em;
	background: #ececee;
	color: #45484c;
	font-size: 0.72em;
	font-style: normal;
	font-weight: 700;
}
.mag-blk .mag-games__r i.is-sieg {
	background: #dff3df;
	color: #145c14;
}
.mag-blk .mag-album {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.4em;
}
.mag-l3 .mag-blk .mag-album,
.mag-l2:not(.mag-rows) .mag-blk .mag-album {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mag-blk .mag-album img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: 0.4em;
	object-fit: cover;
}
.mag-blk .mag-evs {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mag-blk .mag-evs li {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	padding: 0.5em 0.7em 0.55em;
	border: 0.08em solid #e3e5e3;
	border-radius: 0.5em;
	color: #45484c;
	font-size: 0.9em;
	line-height: 1.3;
}
.mag-blk .mag-evs b {
	color: #18181a;
	font-size: 1.08em;
}
.mag-evs__badge {
	align-self: flex-start;
	margin-bottom: 0.2em;
	padding: 0.1em 0.6em;
	border-radius: 1em;
	background: #eaf7ea;
	color: #1c7a1c;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mag-blk .mag-partners__h {
	margin: 0.2em 0 0.4em;
	color: #1b7d1b;
	font-size: 0.82em;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.mag-blk .mag-partners {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
	gap: 0.45em;
	margin-bottom: 0.7em;
}
.mag-blk .mag-partners__i {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.6em;
	padding: 0.4em 0.6em;
	border: 0.08em solid #e3e5e3;
	border-radius: 0.5em;
	color: #262629;
	font-size: 0.82em;
	font-weight: 700;
	text-align: center;
}
.mag-blk .mag-partners__i img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Hints of the release preview for the reading view (warnings only). */
.mag-hints {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 1px solid var(--line2);
	border-radius: 14px;
	background: var(--card);
	color: var(--text);
	font-size: 14px;
}
.mag-hints summary {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	color: var(--ink);
	font-weight: 700;
	cursor: pointer;
}
.mag-hints summary small {
	color: var(--muted);
	font-weight: 500;
}
.mag-hints ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0 2px;
	padding-left: 18px;
	line-height: 1.45;
}
.mag-hints a {
	color: var(--link);
	font-weight: 600;
	white-space: nowrap;
}
.mag-hints__at {
	display: block;
	margin-top: 2px;
}

/* =====================================================================
   9. Editorial screen: reading-view settings (since 1.14.0)
   Kind of an area with its fields, buttons for text boxes, data block placeholder, preview tabs
   "Heft-Seite / Handy" and the phone preview.
   ===================================================================== */
.magx-kind {
	min-width: 0;
	margin: 0;
	padding: 10px 14px 14px;
	border: 1px solid var(--line2);
	border-radius: 14px;
	background: var(--soft);
}
.magx-kind legend {
	padding: 0 6px;
	margin-left: -6px;
}
.magx-kind legend small {
	color: var(--muted);
	font-weight: 500;
}
.magx-kind [hidden],
.magx-imgrow[hidden],
[data-magx-blocknote][hidden] {
	display: none !important;
}
.magx-kind__opts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 6px;
	margin: 6px 0 8px;
}
.magx-kind__opts label {
	position: relative;
	display: block;
	min-width: 0;
}
.magx-kind__opts input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.magx-kind__opts span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 42px;
	padding: 0 6px;
	border: 1.5px solid var(--line2);
	border-radius: 10px;
	background: var(--card);
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}
.magx-kind__opts input:checked + span {
	border-color: var(--ink);
	background: var(--active);
}
.magx-kind__opts input:focus-visible + span {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.magx-kind__auto {
	margin: 0;
}
.magx-kind__f {
	margin-top: 12px;
}
.magx-kind__f > .field-help,
.magx-kind__wide {
	grid-column: 1 / -1;
	margin: 0;
}
.magx-kind__f .check {
	margin-top: 8px;
}
.rte__bar button.rte__box {
	width: auto;
	padding: 0 10px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.magx-blk-pending {
	padding: 1em;
	border: 0.15em dashed #cfd3cf;
	border-radius: 0.6em;
	color: #6b6b72;
	font-size: 0.9em;
}
.magx-pvtabs {
	display: flex;
	gap: 2px;
	width: max-content;
	margin: 0 0 12px;
	padding: 3px;
	border-radius: 999px;
	background: var(--alt-solid);
}
.magx-pvtabs button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	font: 600 13px/1 var(--font);
	cursor: pointer;
}
.magx-pvtabs button[aria-pressed='true'] {
	background: var(--ink);
	color: var(--bg);
}
[data-magx-pv-pane][hidden] {
	display: none;
}
.magx-phone {
	position: relative;
	max-height: 76vh;
	margin: 8px 0 10px;
	overflow: auto;
	border: 8px solid #18181a;
	border-radius: 30px;
	background: var(--bg);
	transition: opacity 0.2s;
}
.magx-phone.is-loading {
	opacity: 0.6;
}
.magx-phone > .mread-empty {
	padding: 24px 16px;
}
.magx-phone > .mread-phone__hints {
	margin: 10px;
}