/*
 * UHC Laupen — Global Typography
 */

/* Webfonts are self-hosted — see assets/css/fonts.css (enqueued first). */

/* Safety net against any element accidentally overflowing the viewport width. */
body {
	overflow-x: hidden;
	/* Site-wide body font: Noto Sans ExtraCondensed. Elements that
	   inherit the browser/system default (e.g. table cells, cover text)
	   now get the correct font everywhere. */
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
}

/*
 * Hide the native scrollbar — replaced by the custom overlay scrollbar
 * (assets/css/scrollbar.css + assets/js/scrollbar.js). The native bar
 * took layout space, so 100vw-based full-bleed (.alignfull) elements were
 * ~17px wider than the visible viewport and their left/right edges were
 * clipped off-screen. With no layout scrollbar, 100vw matches the visible
 * width exactly.
 */
html {
	scrollbar-width: none; /* Firefox, Chrome 121+, Edge */
	-ms-overflow-style: none;
}

html::-webkit-scrollbar {
	display: none; /* Safari, older Chrome */
}

/*
 * .section-title / h2 — the large League Gothic section heading used at
 * the top of major page sections. Applies to ALL h2 elements globally;
 * components that need a different look (e.g. .footer-column__title,
 * .post-entry__title) override it explicitly.
 */
h2,
.section-title {
	/*
	 * block + fit-content (NOT inline-block): the top/bottom lines hug
	 * the text, but the heading stays a block-level box — constrained
	 * layouts (e.g. cover block inner container) position children via
	 * auto margins, which compute to 0 on inline-blocks and would let
	 * the heading escape the container's content width.
	 */
	display: block;
	width: fit-content;
	max-width: 100%;
	font-family: 'League Gothic', sans-serif;
	font-size: 69px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.05;
	/* 0.13em = 9px at the 69px reference size — em so the lines scale
	   with whatever font size the heading actually has (incl. fluid) */
	border-top: 0.13em solid #000;
	border-bottom: 0.13em solid #000;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 0;
	margin-bottom: 74px;
}

/*
 * Inside core constrained layouts (cover/group inner containers), WordPress
 * gives every child `max-width: <content width>` plus centering auto
 * margins (!important). A fit-content heading would shrink and drift to
 * the horizontal center instead of aligning with its sibling content.
 * Spanning the full column keeps headings aligned and inside the
 * container's content width (the core max-width still caps the box).
 *
 * Exception: when the container has an explicit content justification
 * (e.g. a group set to "Justify left"), core emits the matching margins
 * (left → margin-left: 0 !important) — keep the heading at fit-content
 * there so the top/bottom lines hug the text and follow the justification.
 */
.is-layout-constrained:not(.is-content-justification-left):not(.is-content-justification-center):not(.is-content-justification-right) > h2,
.is-layout-constrained:not(.is-content-justification-left):not(.is-content-justification-center):not(.is-content-justification-right) > .section-title {
	width: 100%;
}

/*
 * h3 — smaller League Gothic heading, no top/bottom lines. Same look as
 * the team-overview category titles (League Gothic 46px, 20px below).
 */
h3 {
	font-family: 'League Gothic', sans-serif;
	font-size: 46px;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1.05;
	margin-top: 0;
	margin-bottom: 20px;
}

/*
 * Base heading defaults — League Gothic but at a sane size.
 * Individual templates override where needed.
 */
h1, h2, h3, h4, h5, h6 {
	font-family: 'League Gothic', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 0;
}

/*
 * h1 — the big page heading, matching the hero site title styling:
 * League Gothic, 146px on desktop. Components with their own fluid
 * size (e.g. .hero-section__title) override this.
 */
h1 {
	font-family: 'League Gothic', sans-serif;
	font-size: 146px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
}

/* ── Responsive heading sizes — same families/weights, smaller sizes ── */
@media ( max-width: 1024px ) {
	h1 {
		font-size: 96px;
	}
}

@media ( max-width: 768px ) {
	h1 {
		font-size: 64px;
	}

	h2,
	.section-title {
		font-size: 44px;
		/* border widths follow the font size via the base em value */
		padding-top: 6px;
		padding-bottom: 6px;
		margin-bottom: 40px;
	}

	h3 {
		font-size: 32px;
	}
}

/* ── Laptop (769–1600px): tighter, RELATIVE heading margins + smaller
   body copy. em values scale with each heading's own font size; mobile
   (≤768) and widescreen (>1600) keep their original spacing. ── */
@media ( min-width: 769px ) and ( max-width: 1600px ) {
	h2,
	.section-title {
		margin-bottom: 0.75em; /* ≈52px at 69px, was 74px */
	}

	h3 {
		margin-bottom: 0.35em; /* ≈16px at 46px, was 20px */
	}

	h1,
	h4,
	h5,
	h6 {
		margin-bottom: 0.4em;
	}
}

/* Front page "Über uns" intro paragraph (below the image): readable
   measure at every viewport. !important beats the constrained-layout
   child max-width WordPress emits inline. */
.front-intro-text {
	max-width: 953px !important;
}

/* ── Classic site footer ─────────────────────────────────────────────── */

.site-footer {
	background: #E9E9E9;
	color: #000;
	padding: clamp( 56px, 5.2vw, 100px ) 0; /* 100px @ 1920, fluid below */
}

.site-footer__inner {
	max-width: 1640px;
	margin: 0 auto;
	/* same horizontal inset as the fixed menu button (menu.css), so the
	   footer content lines up with it */
	padding: 0 clamp( 36px, 4.375vw, 84px );
}

/*
 * Footer typography overrides.
 * Selectors are scoped through .site-footer .wp-block-uhc-laupen-footer-columns
 * (higher specificity than the block's own .wp-block-uhc-laupen-footer-columns
 * single-class rules) so these always win regardless of stylesheet load order.
 */

/* Headings — League Gothic, 46px @ 1920 (46 / 1920 = 2.4vw), fluid below
   so the five columns keep fitting side by side on 13" laptops */
.site-footer .wp-block-uhc-laupen-footer-columns .footer-column__title {
	font-family: 'League Gothic', sans-serif !important;
	font-size: clamp( 30px, 2.4vw, 46px ) !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #000 !important;
	margin: 0 0 clamp( 14px, 1.15vw, 22px ) !important;
}

/* Body text — Noto Sans ExtraCondensed, 27px @ 1920 (1.41vw), fluid below */
.site-footer .wp-block-uhc-laupen-footer-columns .footer-column__text p,
.site-footer .wp-block-uhc-laupen-footer-columns .footer-column__list li,
.site-footer .wp-block-uhc-laupen-footer-columns .footer-column__empty {
	font-family: 'Noto Sans', sans-serif !important;
	font-stretch: extra-condensed;
	font-size: clamp( 17px, 1.41vw, 27px ) !important;
	color: #000 !important;
}

.site-footer .wp-block-uhc-laupen-footer-columns .footer-column__text a,
.site-footer .wp-block-uhc-laupen-footer-columns .footer-column__list a {
	color: #000 !important;
}

/* Rechtliches legal row links — same fluid curve as the column body text */
.site-footer__legal ul li a {
	font-family: 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	font-size: clamp( 17px, 1.41vw, 27px );
	color: #000;
}

/*
 * Social icons in the footer: no background, capped at max-width 52px
 * OR max-height 50px (whichever constraint is hit first), 22px gap,
 * single row, icons sized to content rather than stretched.
 */
.site-footer .wp-block-uhc-laupen-footer-columns .footer-social-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 22px;
}

.site-footer .wp-block-uhc-laupen-footer-columns .footer-social-list__item {
	flex: 0 0 auto;
}

.site-footer .wp-block-uhc-laupen-footer-columns .footer-social-list__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border-radius: 0;
	width: auto;
	height: auto;
}

.site-footer .wp-block-uhc-laupen-footer-columns .footer-social-list__item a:hover,
.site-footer .wp-block-uhc-laupen-footer-columns .footer-social-list__item a:focus {
	background: none;
	opacity: 0.7;
}

/*
 * The icon itself: starts at its natural viewBox size (24px), then
 * max-width 52px / max-height 50px clamp it down if ever needed.
 * SVGs with no intrinsic size resolve "auto" to 0, so we must give
 * them a real starting width/height for max-width/max-height to work.
 */
.site-footer .wp-block-uhc-laupen-footer-columns .footer-social-list__item svg {
	/* 50px @ 1920 (2.6vw), fluid below */
	width: clamp( 36px, 2.6vw, 50px );
	height: clamp( 36px, 2.6vw, 50px );
	max-width: 52px;
	max-height: 50px;
	fill: #000;
}

/* ── Footer mobile typography ─────────────────────────────────────────── */
@media ( max-width: 768px ) {
	/* 100px top padding, 50px bottom */
	.site-footer {
		padding: 100px 0 50px;
	}

	.site-footer__inner {
		padding: 0 6.667vw;
	}

	/* Column headings stay stacked — 36px, no bottom margin */
	.site-footer .wp-block-uhc-laupen-footer-columns .footer-column__title {
		font-size: 36px !important;
		margin: 0 !important;
	}

	/* Body text — 16px, no margins */
	.site-footer .wp-block-uhc-laupen-footer-columns .footer-column__text p,
	.site-footer .wp-block-uhc-laupen-footer-columns .footer-column__list li,
	.site-footer .wp-block-uhc-laupen-footer-columns .footer-column__empty {
		font-size: 16px !important;
		margin: 0;
	}

	/* Legal links row */
	.site-footer__legal {
		margin-bottom: 50px;
	}

	/* Social icons — max 40px at a 390px viewport, fluid (40/390 = 10.256vw) */
	.site-footer .wp-block-uhc-laupen-footer-columns .footer-social-list__item svg {
		width: 10.256vw;
		height: 10.256vw;
		max-width: 40px;
		max-height: 40px;
	}

	/* Legal links row ("Rechtliches") — 16px */
	.site-footer__legal ul li a {
		font-size: 16px;
	}

	.site-footer__legal ul li:not(:last-child)::after {
		font-size: 16px;
		margin: 0 8px;
	}
}

/* ── Logo row — fixed width, 300px on all sizes ───────────────────────── */
.site-footer__logo-row {
	margin-bottom: 82px;
}

.site-footer__logo {
	width: 300px;
	max-width: 100%;
	height: auto;
	display: block;
}

/* ── Legal links row ("Rechtliches") ──────────────────────────────────── */
.site-footer__legal {
	margin-top: 100px;
}

.site-footer__legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.site-footer__legal ul li {
	display: flex;
	align-items: center;
}

.site-footer__legal ul li a {
	text-decoration: none;
}

.site-footer__legal ul li a:hover,
.site-footer__legal ul li a:focus {
	text-decoration: underline;
}

/* Separator "|" between legal menu items */
.site-footer__legal ul li:not(:last-child)::after {
	content: '|';
	font-family: 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	font-size: 27px;
	color: #000;
	margin: 0 12px;
}



/* ── Content container ───────────────────────────────────────────────── */

/*
 * .site-main is the outermost wrapper in all PHP templates.
 * .content-container adds padding for page content areas.
 * Both constrain to 1640px.
 *
 * We also override WordPress block layout so theme.json contentSize
 * does not create a narrower inner container inside our pages.
 */

.site-main,
.content-container {
	max-width: 1640px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
}

.content-container {
	padding: 0 40px;
}

/*
 * Laptop (1025–1600px): the full 1640px content column feels overwhelming
 * on smaller screens — cap page content at 80% of the viewport, centered.
 * Full-width elements (hero, .alignfull covers) are unaffected: they break
 * out with the viewport-anchored 100vw technique further below.
 */
@media ( min-width: 1025px ) and ( max-width: 1600px ) {
	.content-container {
		max-width: 80vw;
	}
}

/*
 * Mobile content gutter: 26px at a 390px viewport, fluid in proportion
 * (26 / 390 * 100 = 6.667vw). Used by all content wrappers below 769px.
 */
@media ( max-width: 768px ) {
	.content-container {
		padding: 0 6.667vw;
	}

	/* Core cover blocks bring their own default side padding (~20px) —
	   align them with the fluid content gutter instead. 100px top/bottom,
	   and no min-height (overrides the editor's inline min-height). */
	.wp-block-cover,
	.wp-block-cover-image {
		padding: 100px 6.667vw;
		min-height: 0 !important;
	}
}

/*
 * Blocks from the_content() that sit directly in .site-main
 * (not wrapped in .content-container) get horizontal padding
 * so they don't touch the screen edges.
 */
.site-main > .wp-block,
.site-main > p,
.site-main > h1,
.site-main > h2,
.site-main > h3,
.site-main > ul,
.site-main > ol,
.site-main > table {
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
}

@media ( max-width: 768px ) {
	.site-main > .wp-block,
	.site-main > p,
	.site-main > h1,
	.site-main > h2,
	.site-main > h3,
	.site-main > ul,
	.site-main > ol,
	.site-main > table {
		padding-left: 6.667vw;
		padding-right: 6.667vw;
	}
}

/*
 * Override WordPress block layout constraints on the post-content
 * wrappers, which otherwise apply their own max-width from theme.json.
 *
 * Deliberately NOT applied to .is-layout-constrained in general: nested
 * constrained containers (e.g. a group inside a cover) receive their
 * max-width from the PARENT layout (".wp-container-x > *") — stripping
 * it would let them span the full parent width and break the content
 * column (headings/groups escaping the cover's content width).
 */
.wp-block-post-content,
.entry-content {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * Restore full/wide aligned block breakout.
 *
 * Standard full-bleed technique: since these elements sit inside
 * .content-container (max-width: 1640px, centered), a simple
 * calc(50% - 50vw) margin does not work correctly because the 50%
 * resolves against the element's own (already narrow) box, not the
 * viewport. left: 50% + margin-left: -50vw is the reliable fix —
 * it anchors the element's left edge to the viewport's horizontal
 * center regardless of how deeply nested the element is.
 */
.site-main .alignfull,
.content-container .alignfull {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	box-sizing: border-box;
}

.site-main .alignwide,
.content-container .alignwide {
	max-width: 1920px !important;
}

/* ── Basic post/page typography ──────────────────────────────────────── */

/* Page titles inherit the global h1 look (146px League Gothic). */
.page-title {
	margin-bottom: 32px;
	border: none;
	padding: 0;
}

/*
 * Single post container — 950px wide, centered.
 * Image renders edge-to-edge within this container (before the title),
 * while the title/meta/content sit in a slightly narrower text column
 * for readability, matching the reference layout.
 */
.post-container {
	max-width: 950px;
	margin: 0 auto;
	padding: 48px 40px;
	box-sizing: border-box;
}

.post-thumbnail {
	margin: 0 0 32px;
}

.post-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
}

/* Text column — slightly narrower than the image/container for readability. */
.post-title,
.post-meta,
.post-content {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.post-title {
	font-family: 'League Gothic', sans-serif;
	font-size: 46px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #000;
	margin-top: 0;
	margin-bottom: 16px;
	border: none;
	padding: 0;
}

/*
 * Same typography as a normal paragraph in the post content — font size
 * and family are simply inherited (body sets them), so the date always
 * matches the running text.
 */
.post-meta {
	color: #000;
	margin-bottom: 24px;
	display: flex;
	gap: 16px;
}

.post-meta--bottom {
	margin-top: 32px;
	margin-bottom: 0;
	padding-top: 24px;
	border-top: 1px solid rgba( 0, 0, 0, 0.1 );
}

/* ── Own club highlighted in every Swiss Unihockey table ─────────────── */

/* The whole row of our own team gets a subtle tint — no bold text. */
tr.is-own-team td,
td.is-own-team {
	background-color: rgba( 0, 0, 0, 0.05 );
	font-weight: inherit;
}

/* ── "Zurück" button at the end of a post ────────────────────────────── */

.post-back {
	display: inline-block;
	max-width: 800px;
	margin: 48px auto 0;
	background: #000;
	color: #fff !important;
	font-family: 'League Gothic', sans-serif;
	font-size: 36px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1;
	text-decoration: none !important;
	padding: 36px 27px;
	transition: background 0.2s ease, color 0.2s ease;
}

.post-back:hover,
.post-back:focus {
	background: #DEDC00;
	color: #000 !important;
}

.post-back:focus-visible {
	outline: 3px solid #DEDC00;
	outline-offset: 3px;
}

/* Aligned with the post text column. */
.post-back-wrap {
	max-width: 800px;
	margin: 0 auto;
}

@media ( max-width: 768px ) {
	.post-back {
		font-size: 31px;
		padding: 21px 16px;
		margin-top: 32px;
	}
}

.post-entry {
	border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
	padding-bottom: 32px;
	margin-bottom: 32px;
}

.post-entry__title {
	font-size: 1.8rem;
	border: none;
	padding: 0;
	margin-bottom: 8px;
}

.post-entry__title a {
	color: #000;
	text-decoration: none;
}

.post-entry__title a:hover {
	text-decoration: underline;
}

.post-entry__meta {
	font-size: 0.85rem;
	color: #666;
	margin-bottom: 12px;
}

/* ── Content pages (imported/standard pages) ─────────────────────────── */

/*
 * Plain content pages. Headings use the global h2/h3 styles; body copy
 * is Noto Sans ExtraCondensed 27px like the rest of the site.
 */
.page-content p,
.page-content ul,
.page-content ol {
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	font-size: 27px;
	line-height: 1.4;
	color: #000;
}

/* Laptop (769–1600px): body copy 27px → 22px. Placed AFTER the base rule
   above — equal specificity, so source order decides. */
@media ( min-width: 769px ) and ( max-width: 1600px ) {
	.page-content p,
	.page-content ul,
	.page-content ol {
		font-size: 22px;
	}
}

/* Any image in page content stays within the viewport. */
.page-content img {
	max-width: 100%;
	height: auto;
}

.page-content a {
	color: #000;
	text-decoration: underline;
}

.page-content a:hover {
	text-decoration: none;
}

.page-content ul,
.page-content ol {
	padding-left: 1.2em;
}

/* Buttons (imported call-to-action links) — black box, League Gothic. */
.content-button {
	display: inline-block;
	background: #000;
	color: #fff !important;
	font-family: 'League Gothic', sans-serif;
	font-size: 27px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none !important;
	line-height: 1;
	padding: 14px 24px;
	/* Same timing as the ZURÜCK button (.post-back) above. */
	transition: background 0.2s ease, color 0.2s ease;
}

.content-button:hover,
.content-button:focus {
	background: #DEDC00;
	color: #000 !important;
}

/* ── Core button block ────────────────────────────────────────────────
   The Gutenberg button wears the same clothes as .content-button above.
   Its base look is defined as the "button" element in theme.json, so the
   block editor shows it too; what theme.json cannot express lives here:
   the phone size, and the outline variation. */
@media ( max-width: 768px ) {

	.wp-block-button__link,
	.wp-element-button {
		font-size: 22px;
		padding: 12px 20px;
	}
}

/* Outline variation: the same box drawn rather than filled, turning solid
   yellow on hover like every other button. The 2px border is taken out of
   the padding so both variations occupy the same space. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: #000;
	border: 2px solid currentColor;
	padding: 12px 22px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: #DEDC00;
	border-color: #DEDC00;
	color: #000;
}

@media ( max-width: 768px ) {

	.wp-block-button.is-style-outline > .wp-block-button__link {
		padding: 10px 18px;
	}
}

/* ── Small button ─────────────────────────────────────────────────────
   The .content-button box one size down (22px instead of 27px), for
   controls rather than call-to-action links: the tab rows above the
   standings and the upcoming games, the hero's "Mehr" link and the
   hero's slider arrows. Defined here, not per block, because four
   places share it.

   .small-button          black box, white type — a plain action
   .small-button--tab     light grey until .is-active makes it black
   .small-button--icon    square, for an icon instead of a label       */
.small-button {
	/* Reset every browser default a <button> brings along. */
	appearance: none;
	-webkit-appearance: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #000;
	color: #fff !important;
	font-family: 'League Gothic', sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none !important;
	padding: 10px 18px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.small-button:hover,
.small-button:focus-visible,
a:hover > .small-button,
a:focus-visible > .small-button {
	background: #DEDC00;
	color: #000 !important;
}

.small-button:focus {
	outline: none;
	box-shadow: none;
}

.small-button:focus-visible {
	outline: 2px solid #DEDC00;
	outline-offset: 2px;
}

/* Tab variant: grey while inactive, the black button when selected. */
.small-button--tab {
	background: #E9E9E9;
	color: #000 !important;
}

.small-button--tab.is-active {
	background: #000;
	color: #fff !important;
}

.small-button--tab.is-active:hover,
.small-button--tab.is-active:focus-visible {
	background: #DEDC00;
	color: #000 !important;
}

/* Icon variant: square box, no label, so the padding is symmetric. */
.small-button--icon {
	padding: 0;
	width: 34px;
	height: 34px;
	justify-content: center;
	gap: 0;
	line-height: 0;
}

@media ( max-width: 768px ) {

	.small-button {
		font-size: 18px;
		padding: 8px 14px;
	}

	.small-button--icon {
		padding: 0;
		width: 30px;
		height: 30px;
	}
}

/* Tables — same look as the API tables. */
.content-table {
	width: 100%;
	border-collapse: collapse;
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	font-size: 20px;
	margin: 24px 0;
}

.content-table th {
	font-family: 'League Gothic', sans-serif;
	font-size: 30px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
	padding: 0 10px;
	/* 0.3em = 9px at the 30px reference size — scales with the header font */
	border-bottom: 0.3em solid #000;
}

.content-table td {
	padding: 8px 10px;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
	vertical-align: top;
}

.content-table tr:last-child td {
	border-bottom: none;
}

/*
 * Fact tables (e.g. player details): no column headers — the first column
 * holds the labels and uses the same League Gothic look as a table head,
 * anchored by the site's thick black rule on top.
 */
.content-table--facts {
	border-top: 9px solid #000;
	max-width: 640px;
}

.content-table--facts th {
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
	white-space: nowrap;
	width: 1%;
	padding-right: 40px;
}

.content-table--facts tr:last-child th,
.content-table--facts tr:last-child td {
	border-bottom: none;
}

@media ( max-width: 768px ) {
	.content-table--facts {
		border-top-width: 6px;
	}

	.content-table--facts th {
		padding-right: 24px;
		/* Long labels ("Persönlicher Sponsor") must wrap on narrow
		   screens, otherwise the table pushes the page sideways. */
		white-space: normal;
		width: auto;
	}
}

/* Images and embeds. */
.content-image {
	margin: 32px 0;
}

.content-image img {
	max-width: 100%;
	height: auto;
	display: block;
}

.content-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 32px 0;
}

.content-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.page-content .page-title,
main .page-content h1 {
	overflow-wrap: break-word;
}

@media ( max-width: 768px ) {
	.page-content p,
	.page-content ul,
	.page-content ol {
		font-size: 18px;
	}

	/*
	 * German compounds ("Generalversammlung", "Sponsoringkonzept",
	 * "Ausrüstungspartner") are wider than a phone column, so headings either
	 * overflow or snap mid-syllable. hyphens:auto lets the browser insert a
	 * real hyphen at a valid break point instead.
	 *
	 * -webkit-hyphens is required for Safari, which ignores the unprefixed
	 * property. Hyphenation also needs a language on <html>; header.php emits
	 * lang="de-CH" via language_attributes(), so the German dictionary applies.
	 *
	 * hyphenate-limit-chars keeps the fragments readable: only words of 8+
	 * characters break, and never with fewer than 4 letters either side.
	 * Browsers that don't support it simply use their own defaults.
	 */
	h1,
	h2,
	h3,
	h4,
	.page-title,
	.section-title,
	.wp-block-heading,
	.team-hero__name,
	.player-group__heading,
	.teams-overview__group-title {
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
		-webkit-hyphenate-limit-before: 4;
		-webkit-hyphenate-limit-after: 4;
		hyphenate-limit-chars: 8 4 4;
	}

	.content-button {
		font-size: 22px;
		padding: 12px 20px;
	}

	.content-table {
		font-size: 16px;
		display: block;
		overflow-x: auto; /* wide tables scroll instead of breaking layout */
	}

	.content-table th {
		font-size: 21px; /* border follows via the base 0.3em value */
	}
}

/* Space above/below plain page content. */
.page-content {
	padding-top: 60px;
	padding-bottom: 120px;
}

@media ( max-width: 768px ) {
	.page-content {
		padding-top: 32px;
		padding-bottom: 72px;
	}
}

/* Page title gets breathing room from the very top of the page. */
.content-container > article > .page-title,
.page-title {
	padding-top: 135px;
}

/* Laptop (1025–1600px): the title starts at exactly the menu button's
   top offset (menu.css). The 0.135em subtraction compensates League
   Gothic's built-in gap above the cap height (see hero title), so the
   GLYPHS align with the button, not just the text box. */
@media ( min-width: 1025px ) and ( max-width: 1600px ) {
	.content-container > article > .page-title,
	.page-title {
		padding-top: calc( clamp( 40px, 5vw, 96px ) - 0.135em );
	}
}

@media ( max-width: 768px ) {
	.page-title {
		padding-top: 100px;
	}
}

/* ── Clubgeschichte / Vorstand components ────────────────────────────── */

/*
 * Stat blocks ("Aktuell"): three white cards with the site's soft drop
 * shadow, a yellow baseline accent and a big League Gothic number.
 */
.stats-row {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 32px;
	margin: 0 0 74px;
}

.stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #fff;
	box-shadow: 0 3px 99px rgba( 91, 91, 91, 0.21 );
	border-bottom: 9px solid #DEDC00;
	padding: 48px 24px 40px;
}

.stat__number {
	font-family: 'League Gothic', sans-serif;
	font-size: 96px;
	font-weight: 400;
	line-height: 1;
}

.stat__label {
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	font-size: 27px;
	line-height: 1.3;
	margin-top: 8px;
}

/* Erfolge: year + achievement rows — centered, shrink-to-fit. */
.erfolge-list {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 74px;
}

.erfolge-item {
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 10px 0;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}

.erfolge-item:last-child {
	border-bottom: none;
}

.erfolge-item__year {
	font-family: 'League Gothic', sans-serif;
	font-size: 46px;
	font-weight: 400;
	line-height: 1;
	flex: 0 0 110px;
}

.erfolge-item__text {
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	font-size: 27px;
	line-height: 1.3;
}

/* Founders list — centered names. */
.page-content .founders-list {
	text-align: center;
}

/* Email link on person cards (Vorstand) — right below the name. */
.player-card__email {
	display: block;
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	font-size: 15px;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.7 );
	margin-top: 4px;
	position: relative;
	z-index: 2;
}

.player-card__email:hover {
	text-decoration: underline;
}

/* Card grids inside page content get extra room below. */
.page-content .player-grid {
	margin-bottom: 74px;
}

/* Logo section: the two historic logos side by side. */
.logo-row {
	display: flex;
	align-items: center;
	gap: 48px;
	flex-wrap: wrap;
	margin: 32px 0 74px;
}

.logo-row .content-image {
	margin: 0;
	flex: 0 1 auto;
}

.logo-row .content-image img {
	max-height: 200px;
	width: auto;
}

/* Vorteil rows (Mitgliedervorteile): partner logo/address left, offer right. */
.vorteil-row {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 32px 64px;
	align-items: start;
	margin: 0 0 74px;
}

.vorteil-row .content-image {
	margin: 0 0 16px;
}

.vorteil-row .content-image img {
	max-width: 100%;
	max-height: 160px;
	width: auto;
}

@media ( max-width: 768px ) {
	.vorteil-row {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 48px;
	}
}

/* Sponsor tier sections (Unsere Sponsoren): 56px after each section
   (50px + 12%, matching the increased spacing between the logos). */
.sponsor-tier {
	padding-bottom: 56px;
}

/*
 * Gold / Bronze / Ausrüstungspartner logos. These sit in plain Image blocks
 * rather than the square grid, so they are sized as a share of the content
 * width: 40% on wide viewports, stepping up on narrower ones where 40% would
 * leave the logo too small to read.
 *
 * width (not max-width) on purpose: the source files range from ~60px to
 * ~1000px wide, so a cap alone left the small ones tiny next to the large
 * ones. Fixing the width renders every logo at the same size; height stays
 * auto so each keeps its own aspect ratio.
 */
.page-id-299 .page-content .sponsor-tier .wp-block-image img {
	width: 40%;
	max-width: 40%;
	height: auto;
}

@media ( max-width: 1200px ) {
	.page-id-299 .page-content .sponsor-tier .wp-block-image img {
		width: 55%;
		max-width: 55%;
	}
}

@media ( max-width: 900px ) {
	.page-id-299 .page-content .sponsor-tier .wp-block-image img {
		width: 70%;
		max-width: 70%;
	}
}

@media ( max-width: 600px ) {
	.page-id-299 .page-content .sponsor-tier .wp-block-image img {
		width: 85%;
		max-width: 85%;
	}
}

/*
 * Square-ish logos (Axanova) look far larger than the wide banner logos at the
 * same width, because width alone does not equalise area. This modifier — add
 * "sponsor-logo--square" to the image block's Additional CSS class — renders
 * them at 25%, scaled proportionally on the smaller breakpoints.
 */
.page-id-299 .page-content .sponsor-tier .wp-block-image.sponsor-logo--square img {
	width: 25%;
	max-width: 25%;
}

@media ( max-width: 1200px ) {
	.page-id-299 .page-content .sponsor-tier .wp-block-image.sponsor-logo--square img {
		width: 34%;
		max-width: 34%;
	}
}

@media ( max-width: 900px ) {
	.page-id-299 .page-content .sponsor-tier .wp-block-image.sponsor-logo--square img {
		width: 44%;
		max-width: 44%;
	}
}

@media ( max-width: 600px ) {
	.page-id-299 .page-content .sponsor-tier .wp-block-image.sponsor-logo--square img {
		width: 53%;
		max-width: 53%;
	}
}

/*
 * Vertical rhythm between the individual tier logos — 32px + 12% ≈ 36px.
 *
 * width:100% is what makes the 40% above mean "40% of the content column".
 * A wp-block-image figure shrink-to-fits its image, so without this the
 * percentage resolved against each logo's own intrinsic width and every logo
 * ended up a different size again.
 */
.page-id-299 .page-content .sponsor-tier .wp-block-image {
	display: block;
	width: 100%;
	margin-top: 36px;
	margin-bottom: 36px;
}

/*
 * Most tier logos are wrapped in a link. An <a> is inline, so it shrink-fits
 * the image and the 40% would resolve against the logo's own width again —
 * making it a block gives every image the same containing block.
 */
.page-id-299 .page-content .sponsor-tier .wp-block-image > a {
	display: block;
	width: 100%;
}

/* "Weitere Sponsoren": 3 columns of 1:1 boxes with centered logos. */
.sponsor-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 27px; /* 24px + 12% */
}

.page-content .sponsor-grid__item {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #fff;
	box-shadow: 0 3px 40px rgba( 91, 91, 91, 0.16 );
	box-sizing: border-box;
	/*
	 * Grid items are min-height:auto by default, which lets tall content
	 * override the aspect ratio. Pinning both axes to 0 keeps every tile
	 * square no matter what the logo's intrinsic size is.
	 */
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

/*
 * The logo lives in an out-of-flow wrapper rather than a height:100% flex
 * child. Safari does not treat an aspect-ratio height as definite, so
 * `height: 100%` on the old <a> collapsed to auto: the anchor sized itself
 * to the image and stretched the tile, which is why only the *linked*
 * sponsors were taller. inset:0 gives a definite used height and takes the
 * content out of flow, so it can never resize the tile again.
 */
.page-content .sponsor-grid__link {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

/*
 * Three classes so this still outranks the page-wide
 * `.page-id-299 .page-content img` centering rule further down.
 */
.page-content .sponsor-grid .sponsor-grid__link img {
	max-width: 80%;
	max-height: 70%;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0;
}

@media ( max-width: 600px ) {
	.sponsor-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: 18px; /* 16px + 12% */
	}
}

/* Sponsor logo listing (Unsere Sponsoren): centered, max 60% width. */
.page-id-299 .page-content img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 60%;
}

.page-id-299 .page-content .content-image,
.page-id-299 .page-content p {
	text-align: center;
}

/* Fee tables (Finanzreglement): amounts right-aligned, compact width. */
.content-table--fees {
	max-width: 760px;
}

/*
 * .content-table__amount is the hand-written markup; .has-text-align-right is
 * what the core Table block produces for the same column since the pages were
 * rebuilt as blocks. Both are kept so old and new markup look identical.
 */
.content-table--fees .content-table__amount,
.content-table--fees .has-text-align-right {
	text-align: right;
	white-space: nowrap;
}

/*
 * Core's layout support adds auto margins, a max-width and block gaps to the
 * direct children of a Group block. The wrappers below do their own spacing
 * with flex/grid gap, so those are neutralised here. The .page-content prefix
 * gives two classes, which outranks core's single-class .wp-container-* rules.
 */
.page-content .logo-row > *,
.page-content .vorteil-row > *,
.page-content .vorteil-row__left > *,
.page-content .vorteil-row__right > * {
	margin-block-start: 0;
	max-width: none;
}

/* Group blocks are plain wrappers here — no inherited block spacing. */
.page-content .wp-block-group.logo-row,
.page-content .wp-block-group.vorteil-row {
	margin-block-start: 0;
}

@media ( max-width: 900px ) {
	.stats-row {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 48px;
	}

	.stat {
		padding: 32px 20px 28px;
		border-bottom-width: 6px;
	}

	.stat__number {
		font-size: 64px;
	}

	.stat__label {
		font-size: 20px;
	}
}

@media ( max-width: 768px ) {
	.erfolge-item {
		gap: 16px;
	}

	.erfolge-item__year {
		font-size: 32px;
		flex-basis: 72px;
	}

	.erfolge-item__text {
		font-size: 18px;
	}

	.logo-row {
		gap: 24px;
		margin-bottom: 48px;
	}

	.logo-row .content-image img {
		max-height: 120px;
	}
}

/* ── Ninja Forms (Kontakt) — site-wide form styling ──────────────────── */

/* Lead line above team contact forms: 46px League Gothic. */
.team-contact__lead {
	font-family: 'League Gothic', sans-serif;
	font-size: 46px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin: 0 0 48px;
}

/* The form's own title and the "* required" note are redundant here. */
.nf-form-cont .nf-form-title,
.nf-form-cont .nf-form-fields-required {
	display: none;
}

/* Two-column field grid: Vorname | Nachname, everything else full width.
   NF renders custom elements: .nf-form-content > nf-fields-wrap > nf-field. */
.nf-form-content {
	padding: 0;
}

.nf-form-content nf-fields-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17px;
	width: 100%;
}

.nf-form-content nf-field {
	display: block;
	grid-column: span 2;
}

.nf-form-content nf-field:has( .firstname-container ),
.nf-form-content nf-field:has( .lastname-container ) {
	grid-column: span 1;
}

.nf-form-content .nf-field-container {
	margin: 0;
}

/* Fields: #D2D2D2 boxes, no borders, label as inner placeholder. */
.nf-form-content .nf-field-label {
	display: none;
}

/* The anti-spam question must stay visible above its field. */
.nf-form-content .spam-container .nf-field-label {
	display: block;
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-size: 18px;
	margin-bottom: 6px;
}

.nf-form-content input[type='text'],
.nf-form-content input[type='email'],
.nf-form-content input[type='tel'],
.nf-form-content textarea {
	width: 100%;
	background: #D2D2D2;
	border: none;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	padding: 28px 30px;
	box-sizing: border-box;
	font-family: 'League Gothic', sans-serif;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: #000;
}

.nf-form-content textarea {
	min-height: 340px;
	resize: vertical;
}

.nf-form-content input::placeholder,
.nf-form-content textarea::placeholder {
	color: rgba( 0, 0, 0, 0.24 );
	text-transform: uppercase;
	opacity: 1;
}

/* SENDEN — same styling as the MENÜ button. */
.nf-form-content input[type='button'],
.nf-form-content input[type='submit'],
.nf-form-content .nf-element[type='button'] {
	background: #000;
	color: #fff;
	border: none;
	border-radius: 0;
	cursor: pointer;
	font-family: 'League Gothic', sans-serif;
	font-size: 36px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 36px 27px;
	width: auto;
	margin-top: 24px;
	transition: background 0.2s ease, color 0.2s ease;
}

.nf-form-content input[type='button']:hover,
.nf-form-content .nf-element[type='button']:hover {
	background: #DEDC00;
	color: #000;
}

.nf-form-content .submit-container {
	justify-self: start;
}

/* ── WPForms — same look as the Ninja Forms rules above ───────────────────
   The team contact forms now run on WPForms. Every value below is copied
   from the Ninja Forms block so the two render identically while the
   remaining upload form is still on Ninja Forms. */

/* WPForms' own stylesheet is fairly opinionated, so a few resets first. */
.wpforms-container {
	margin: 0;
	max-width: none;
}

.wpforms-container .wpforms-title,
.wpforms-container .wpforms-description,
.wpforms-container .wpforms-required-label {
	display: none;
}

/* Two-column field grid: Vorname | Nachname, everything else full width. */
.wpforms-container .wpforms-field-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17px;
	width: 100%;
}

.wpforms-container .wpforms-field {
	grid-column: span 2;
	padding: 0;
	margin: 0;
}

/* The Name field renders its two halves in .wpforms-field-row — turning that
   into the same grid keeps Vorname/Nachname side by side with one gap value. */
.wpforms-container .wpforms-field-name .wpforms-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17px;
	max-width: none;
}

.wpforms-container .wpforms-field-name .wpforms-field-row-block {
	width: auto;
	float: none;
	padding: 0;
	margin: 0;
}

/* Labels are hidden — the placeholder carries the field name. */
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel {
	display: none;
}

/* …except the anti-spam question, which has to stay readable. It picks up
   the shared label styling further down (League Gothic, black). */
.wpforms-container .uhc-antispam .wpforms-field-label {
	display: block;
}

.wpforms-container input[type='text'],
.wpforms-container input[type='email'],
.wpforms-container input[type='tel'],
.wpforms-container textarea {
	width: 100%;
	max-width: none;
	background: #D2D2D2;
	border: none;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	padding: 28px 30px;
	box-sizing: border-box;
	font-family: 'League Gothic', sans-serif;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: #000;
	height: auto;
}

.wpforms-container textarea {
	min-height: 340px;
	resize: vertical;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
	color: rgba( 0, 0, 0, 0.24 );
	text-transform: uppercase;
	opacity: 1;
}

/* SENDEN — same styling as the MENÜ button. */
.wpforms-container .wpforms-submit-container {
	grid-column: span 2;
	padding: 0;
	text-align: left;
}

.wpforms-container button[type='submit'],
.wpforms-container .wpforms-submit {
	background: #000;
	color: #fff;
	border: none;
	border-radius: 0;
	cursor: pointer;
	font-family: 'League Gothic', sans-serif;
	font-size: 36px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 36px 27px;
	width: auto;
	margin-top: 24px;
	transition: background 0.2s ease, color 0.2s ease;
}

.wpforms-container button[type='submit']:hover,
.wpforms-container .wpforms-submit:hover {
	background: #DEDC00;
	color: #000;
}

/* ── Richer field types (Clubanmeldung) ───────────────────────────────────
   The contact forms only use text/email/textarea. The Clubanmeldung adds
   selects, radios, checkboxes, address, date and file upload — all styled to
   the same #D2D2D2 box language as the inputs above. */

/* Section headings inside the form (Content fields). */
.wpforms-container .uhc-form-section {
	font-family: 'League Gothic', sans-serif;
	font-size: 36px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 24px 0 4px;
	border-top: 0.13em solid #000;
	padding-top: 12px;
}

.wpforms-container .wpforms-field-content {
	grid-column: span 2;
}

/*
 * Every field whose control can hold text carries its label as a placeholder
 * instead (see the form's field settings), so the label itself is hidden —
 * the same treatment Vorname/Nachname already had on the contact forms.
 *
 * Radio groups, the consent checkbox and the upload drop zone have no input
 * to place a placeholder in, so those keep a visible label.
 */
.wpforms-container .wpforms-field-radio > .wpforms-field-label,
.wpforms-container .wpforms-field-checkbox > .wpforms-field-label,
.wpforms-container .wpforms-field-file-upload > .wpforms-field-label {
	display: block;
}

/*
 * A visible label reads as the field's own placeholder would — same League
 * Gothic, size, tracking and caps as the text inside the boxes — only in full
 * black instead of the placeholder's 24% grey, so it sits a step above them
 * in the hierarchy. The values are kept in sync with the input rule above.
 */
.wpforms-container .wpforms-field-label {
	font-family: 'League Gothic', sans-serif;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #000;
	margin: 0 0 6px;
}

/* The required asterisk inherits the label; no extra colour. */
.wpforms-container .wpforms-required-label {
	color: inherit;
	text-decoration: none;
}

.wpforms-container .wpforms-field-description {
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-size: 16px;
	opacity: 0.7;
	margin-top: 6px;
}

.wpforms-container select,
.wpforms-container input[type='date'],
.wpforms-container input[type='number'],
.wpforms-container input[type='url'] {
	width: 100%;
	max-width: none;
	background: #D2D2D2;
	border: none;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	padding: 28px 30px;
	box-sizing: border-box;
	font-family: 'League Gothic', sans-serif;
	font-size: 24px;
	letter-spacing: 0.04em;
	color: #000;
	height: auto;
	appearance: none;
	-webkit-appearance: none;
	/*
	 * The site's own ">" arrow (same path as the fullscreen menu's accordion
	 * chevron in assets/css/menu.css), turned 90° clockwise so it points
	 * down like a dropdown, and in black rather than the menu's yellow.
	 *
	 * rotate(270) is the menu's rotate(180) plus the extra quarter turn;
	 * the translate re-seats the glyph at 0,0 and the viewBox swaps to
	 * 22.251 × 13.095 because the arrow is now wider than it is tall.
	 * Result: tip at the bottom centre of its box.
	 */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22.251" height="13.095" viewBox="0 0 22.251 13.095"><path d="M22.095,4.969,20.126,3,9,14.126,20.126,25.251l1.969-1.969-9.156-9.156Z" transform="translate(-3 22.095) rotate(270)" fill="%23000000"/></svg>');
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 22px 13px;
	padding-right: 60px;
}

.wpforms-container input[type='date'] {
	background-image: none;
	padding-right: 30px;
}

/*
 * Address sub-rows. Flex rather than a fixed two-column grid: WPForms puts
 * Strasse and Adresszusatz alone in their own row and only pairs up
 * Ort/Kanton and PLZ/Land. With flex:1 a lone field fills the whole row,
 * while a pair still splits it evenly — a 1fr 1fr grid left the single
 * fields stranded at half width.
 */
.wpforms-container .wpforms-field-address .wpforms-field-row {
	display: flex;
	gap: 17px;
	max-width: none;
	margin-bottom: 17px;
}

.wpforms-container .wpforms-field-address .wpforms-field-row > * {
	flex: 1 1 0;
	min-width: 0; /* let the inputs shrink rather than overflow the row */
	width: auto;
	float: none;
	padding: 0;
	margin: 0;
}

/* Radios + checkboxes as plain stacked options. */
.wpforms-container ul.wpforms-field-required-items,
.wpforms-container .wpforms-field-radio ul,
.wpforms-container .wpforms-field-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*
 * 6px above and below each option: the same value as the label's bottom
 * margin, and 0.3× the 20px option text — so the rows breathe and get a
 * taller tap target without introducing a spacing value the form does not
 * already use elsewhere.
 */
.wpforms-container .wpforms-field-radio li,
.wpforms-container .wpforms-field-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 6px 0;
}

.wpforms-container .wpforms-field-radio input,
.wpforms-container .wpforms-field-checkbox input {
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: #DEDC00;
	flex-shrink: 0;
}

/* The individual option labels — scoped to the list so this does not also
   capture the field's own .wpforms-field-label, which is styled below. */
.wpforms-container .wpforms-field-radio li label,
.wpforms-container .wpforms-field-checkbox li label {
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-stretch: extra-condensed;
	font-size: 20px;
	line-height: 1.35;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}

/* Two-up radio groups (Geschlecht, unter 18). */
.wpforms-container .wpforms-list-2-columns ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px 32px;
}

/*
 * File upload. The visible drop zone is .dz-message *inside* .wpforms-uploader,
 * so the outer element is stripped back to a plain block and the inner one
 * carries the look — otherwise you get two nested dashed boxes and the inner
 * one only shrink-wraps its text instead of filling the field.
 */
.wpforms-container .wpforms-field-file-upload .wpforms-uploader {
	display: block;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	min-height: 0;
}

.wpforms-container .wpforms-field-file-upload .dz-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	background: #D2D2D2;
	border: 2px dashed rgba( 0, 0, 0, 0.28 );
	border-radius: 0;
	padding: 40px 30px;
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-size: 20px;
	color: rgba( 0, 0, 0, 0.6 );
	text-align: center;
	cursor: pointer;
}

.wpforms-container .wpforms-field-file-upload input[type='file'] {
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-size: 18px;
	background: #D2D2D2;
	padding: 24px 30px;
	width: 100%;
	box-sizing: border-box;
	border: none;
}

/* Errors + confirmation in the site's own typography. */
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error {
	color: #c00;
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-style: normal;
	font-size: 16px;
	margin-top: 6px;
	display: block;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error {
	border: 2px solid #c00;
}

.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	background: #DEDC00;
	border: none;
	border-radius: 0;
	color: #000;
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
	font-size: 20px;
	padding: 24px 30px;
	margin: 0;
}

.wpforms-confirmation-container-full p {
	margin: 0;
}

@media ( max-width: 768px ) {
	.wpforms-container .wpforms-field-container,
	.wpforms-container .wpforms-field-name .wpforms-field-row {
		grid-template-columns: 1fr;
	}

	/* Ort/Kanton and PLZ/Land stack too — side by side they are ~154px wide
	   here, too narrow for their own placeholders. */
	.wpforms-container .wpforms-field-address .wpforms-field-row {
		flex-direction: column;
		gap: 17px;
	}

	.wpforms-container input[type='text'],
	.wpforms-container input[type='email'],
	.wpforms-container textarea,
	.wpforms-container select {
		padding: 20px 20px;
		font-size: 20px;
	}

	/* Labels follow the inputs down so they still read as placeholders. */
	.wpforms-container .wpforms-field-label {
		font-size: 20px;
	}

	.wpforms-container select {
		padding-right: 50px;
	}

	.wpforms-container textarea {
		min-height: 220px;
	}

	.wpforms-container button[type='submit'],
	.wpforms-container .wpforms-submit {
		font-size: 31px;
		padding: 21px 16px;
	}
}

/* Error styling stays readable inside the design. */
.nf-form-cont .nf-error-msg,
.nf-form-cont .ninja-forms-req-symbol {
	color: #c00;
	font-family: 'Noto Sans ExtraCondensed', 'Noto Sans', sans-serif;
}

.nf-form-cont .nf-error .nf-element {
	border: 2px solid #c00 !important;
}

/* Team contact section: centered column like the design. */
.team-contact__inner {
	max-width: 1140px;
	margin: 0 auto;
}

@media ( max-width: 768px ) {
	.team-contact__lead {
		font-size: 28px;
		margin-bottom: 32px;
	}

	.nf-form-content {
		grid-template-columns: 1fr;
	}

	.nf-form-content .firstname-container,
	.nf-form-content .lastname-container {
		grid-column: span 2;
	}

	.nf-form-content input[type='text'],
	.nf-form-content input[type='email'],
	.nf-form-content textarea {
		padding: 20px 20px;
		font-size: 20px;
	}

	.nf-form-content textarea {
		min-height: 220px;
	}

	.nf-form-content input[type='button'],
	.nf-form-content .nf-element[type='button'] {
		font-size: 31px;
		padding: 21px 16px;
	}
}

/* ── Neutralize FSE wp-site-blocks wrapper if it still appears ───────── */
/*
 * If WordPress still outputs <div class="wp-site-blocks"> due to
 * database-saved FSE templates, this ensures it has no layout effect.
 */
.wp-site-blocks {
	display: contents; /* Makes the div invisible to layout — children behave as if it doesn't exist */
}

/* ── Sponsors section ──────────────────────────────────────────────────── */

.sponsors-section {
	background-color: #DEDC00;
	width: 100%;
}

.sponsors-section__inner {
	/* Full-width — no max-width cap, so logos get more space and appear bigger. */
	width: 100%;
	margin: 0 auto;
	padding: 220px 40px;
	box-sizing: border-box;
}

/*
 * 5 logos per row, wrapping to a second row when more are added.
 * Each item fills the available column space evenly (same pattern
 * as the footer social icons), capped by max-height 145px / max-width
 * 394px — whichever constraint is hit first, since logos keep their
 * natural aspect ratio via object-fit: contain.
 */
.sponsors-row {
	display: flex;
	flex-wrap: wrap;
	gap: 100px;
	width: 100%;
}

.sponsors-row__item {
	flex: 1 1 calc( 20% - 80px ); /* 5 per row, accounting for the 100px gap */
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
}

.sponsors-row__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.sponsors-row__logo {
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 145px;
	object-fit: contain;
}

@media ( max-width: 900px ) {
	.sponsors-row {
		gap: 48px;
	}

	.sponsors-row__item {
		flex: 1 1 calc( 33.333% - 32px ); /* 3 per row on tablets */
	}
}

@media ( max-width: 600px ) {
	.sponsors-row {
		gap: 62px;
	}

	.sponsors-row__item {
		flex: 1 1 calc( 50% - 16px ); /* 2 per row on mobile */
	}

	.sponsors-section__inner {
		padding: 100px 6.667vw;
	}
}

/* ── Floorball API blocks (home page) ──────────────────────────────────────
 * Home order is: hero → next-game (upcoming games) → standings (statistics).
 * Each game sits in a grey box; the whole API region gets 200px top/bottom
 * padding, with 120px between the upcoming games and the statistics.
 * These block classes only ever render on the home page. */

.wp-block-uhc-laupen-next-game .next-game__matchup {
	/* White box with a soft drop shadow instead of the grey fill. */
	background-color: #fff;
	box-shadow: 0 3px 99px rgba( 91, 91, 91, 0.21 );
	padding: 32px 24px;
	box-sizing: border-box;
}

/*
 * API data region spacing (home): 100px between the sections and
 * 100px after the last one. Page order: standings → next-game.
 */
.wp-block-uhc-laupen-next-game {
	padding-top: 0;
	padding-bottom: 100px; /* spacing below "Nächste Spiele" */
}

.wp-block-uhc-laupen-standings {
	margin-top: 100px;
	padding-bottom: 100px; /* gap to the next-game section below */
}

@media ( max-width: 768px ) {
	.wp-block-uhc-laupen-next-game {
		padding-top: 0;
		padding-bottom: 100px; /* spacing before the sponsors section */
	}
	.wp-block-uhc-laupen-standings {
		margin-top: 72px;
		padding-bottom: 96px;
	}
}