:root {
    --fc-container-width: 1600px;
    --fc-container-padding: 30px;
}

.container {
	width: calc(100% - (2 * var(--fc-container-padding)));
	margin: 0 auto;
    padding: 0 var(--fc-container-padding);
}
@media (min-width: 1674px) {
    .container {
        width: var(--fc-container-width);
    }
}

.fcb-section .fcb-columns {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
.fcb-section .fcb-columns[data-elements-count='2'] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fcb-section .fcb-columns[data-elements-count='2'][data-distribution='1/3 2/3'] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fcb-section .fcb-columns[data-elements-count='2'][data-distribution='1/3 2/3'] > .fcb-column:nth-child(2) {
	grid-column: 2 / span 2;
}
.fcb-section .fcb-columns[data-elements-count='2'][data-distribution='2/3 1/3'] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fcb-section .fcb-columns[data-elements-count='2'][data-distribution='2/3 1/3'] > .fcb-column:nth-child(1) {
	grid-column: 1 / span 2;
}
.fcb-section .fcb-columns[data-elements-count='2'][data-distribution='1/4 3/4'] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fcb-section .fcb-columns[data-elements-count='2'][data-distribution='1/4 3/4'] > .fcb-column:nth-child(2) {
	grid-column: 2 / span 3;
}
.fcb-section .fcb-columns[data-elements-count='2'][data-distribution='3/4 1/4'] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fcb-section .fcb-columns[data-elements-count='2'][data-distribution='3/4 1/4'] > .fcb-column:nth-child(1) {
	grid-column: 1 / span 3;
}
.fcb-section .fcb-columns[data-elements-count='3'] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fcb-section .fcb-columns[data-elements-count='3'][data-distribution='1/5 3/5 1/5'] {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.fcb-section .fcb-columns[data-elements-count='3'][data-distribution='1/5 3/5 1/5'] > .fcb-column:nth-child(2) {
	grid-column: 2 / span 3;
}
.fcb-section .fcb-columns[data-elements-count='4'] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fcb-section .fcb-columns[data-elements-count='5'] {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Legacy: card rows made with the former editor format "Als Karte darstellen" - no menu entry;
   revisions still carry such cards, so a restored revision brings them back. A text block that
   holds a card fills its grid cell, so all cards of a row share the row height. */
.fcb-section .fcb-column:has(> .post_content_block > .content-card) {
	display: flex;
	flex-direction: column;
}
.fcb-section .fcb-column > .post_content_block:has(> .content-card) {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.fcb-section .fcb-column > .post_content_block > .content-card {
	flex: 1 0 auto;
}

/* Seven cards in two sub-segments - a 4-card row followed by a 3-card row - read as ONE grid of
   three per row: 3 + 3 + 1, the lone last card centred. At most three per row is the operator's
   rule; the centred remainder is the project's own for every card grid (.content-cards below does
   the same) and works this way: six tracks, every card spans two of them. Six tracks with the same gap are
   arithmetically the same card width and the same card position as three - (W - 2g)/3 either way -
   and the half tracks are what let the lone card start half a card off centre, at track 3.
   The PARENT column has to be the grid: a card cannot move from one grid container into another,
   so styling the two row boxes would give 3 + 1 + 3, with the fourth card alone under the first
   row. Both sub-segments and both row boxes therefore dissolve with display: contents. That costs
   nothing here - a sub-segment box carries only its margin, since background, padding and anchor
   classes reach a level-1 section alone (includes/common_fields/common_fields.php) - and the grid's
   own gap replaces that margin, which is why the margin is zeroed and given back at 1281px, where
   a sub-segment is 60px apart instead of 30px.
   grid-column: auto / span 2 and not the one-value shorthand: "grid-column: span 2" sets the END to
   auto, so the card that is later given a start line would span a single track.
   Measured 2026-09-18 on /de/ and /de/fct-swiss/leistungen/, the only two addresses with this
   shape: below 1025px the flex fallback further down keeps two cards per row and one from 768px,
   unchanged. */
@media (min-width: 1025px) {
	:is(#page-content, #flexible-content) .fcb-column:has(> .fcb-subsection > .fcb-columns[data-elements-count='4'] .content-card):has(> .fcb-subsection > .fcb-columns[data-elements-count='3'] .content-card) {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 30px;
	}
	:is(#page-content, #flexible-content) .fcb-column:has(> .fcb-subsection > .fcb-columns[data-elements-count='4'] .content-card):has(> .fcb-subsection > .fcb-columns[data-elements-count='3'] .content-card) > * {
		grid-column: 1 / -1;
		margin-bottom: 0;
	}
	:is(#page-content, #flexible-content) .fcb-column:has(> .fcb-subsection > .fcb-columns[data-elements-count='4'] .content-card):has(> .fcb-subsection > .fcb-columns[data-elements-count='3'] .content-card) > .fcb-subsection:has(> .fcb-columns .content-card),
	:is(#page-content, #flexible-content) .fcb-column:has(> .fcb-subsection > .fcb-columns[data-elements-count='4'] .content-card):has(> .fcb-subsection > .fcb-columns[data-elements-count='3'] .content-card) > .fcb-subsection > .fcb-columns:has(.content-card) {
		display: contents;
	}
	:is(#page-content, #flexible-content) .fcb-column:has(> .fcb-subsection > .fcb-columns[data-elements-count='4'] .content-card):has(> .fcb-subsection > .fcb-columns[data-elements-count='3'] .content-card) > .fcb-subsection > .fcb-columns > .fcb-column {
		grid-column: auto / span 2;
	}
	/* The seventh card is the whole last row: 3 - 1 + 1 = track 3 in half tracks. */
	:is(#page-content, #flexible-content) .fcb-column:has(> .fcb-subsection > .fcb-columns[data-elements-count='4'] .content-card):has(> .fcb-subsection > .fcb-columns[data-elements-count='3'] .content-card) > .fcb-subsection > .fcb-columns[data-elements-count='3'] > .fcb-column:last-child {
		grid-column-start: 3;
	}
}

@media (min-width: 1281px) {
	:is(#page-content, #flexible-content) .fcb-column:has(> .fcb-subsection > .fcb-columns[data-elements-count='4'] .content-card):has(> .fcb-subsection > .fcb-columns[data-elements-count='3'] .content-card) > * {
		margin-bottom: 30px;
	}
}

@media (min-width: 1025px) {
	:is(#page-content, #flexible-content) :is(.sub-section, .deep-section):last-child {
		margin-bottom: 0;
	}
	:is(#page-content, #flexible-content) :is(.sub-section, .deep-section) {
		margin-bottom: 30px;
	}
	:is(#page-content, #flexible-content) .post_content_block > :first-child {
		margin-top: 0;
	}
	:is(#page-content, #flexible-content) .post_content_block > :last-child {
		margin-bottom: 0;
	}
}
@media (min-width: 769px) {
	:is(#page-content, #flexible-content) :is(.sub-section, .deep-section):has(.fcb-columns[data-elements-count='2'][data-distribution='1/2 1/2']):last-child {
		margin-bottom: 0;
	}
	:is(#page-content, #flexible-content) :is(.sub-section, .deep-section):has(.fcb-columns[data-elements-count='2'][data-distribution='1/2 1/2']) {
		margin-bottom: 30px;
	}
	:is(#page-content, #flexible-content) .fcb-section .fcb-columns[data-elements-count='2'][data-distribution='1/2 1/2'] .post_content_block > :first-child {
		margin-top: 0;
	}
	:is(#page-content, #flexible-content) .fcb-section .fcb-columns[data-elements-count='2'][data-distribution='1/2 1/2'] .post_content_block > :last-child {
		margin-bottom: 0;
	}
}

@media (min-width: 1281px) {
	:is(#page-content, #flexible-content) :is(.sub-section, .deep-section) {
		margin-bottom: 60px;
	}
}

@media (max-width: 1024px) {
	.fcb-section .fcb-columns {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
		grid-gap: 0;
	}
	.fcb-section .fcb-columns .fcb-column {
		grid-column: auto !important;
	}

	.fcb-section .fcb-columns[data-elements-count='4'],
	.fcb-section .fcb-columns[data-elements-count='2'][data-distribution='1/2 1/2'] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-gap: 30px;
	}


	/* Card rows: two cards per row, a lone last card centred. Flex instead of the grid above, and
	   the row spacing that sub-segments lack below 1025px. */
	.fcb-section .fcb-columns:is([data-elements-count='3'], [data-elements-count='4']):has(> .fcb-column > .post_content_block > .content-card) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 30px;
	}
	.fcb-section .fcb-columns:is([data-elements-count='3'], [data-elements-count='4']):has(> .fcb-column > .post_content_block > .content-card) > .fcb-column {
		flex: 0 0 calc((100% - 30px) / 2);
		min-width: 0;
	}
	.fcb-subsection:has(> .fcb-columns > .fcb-column > .post_content_block > .content-card):not(:last-child) {
		margin-bottom: 30px;
	}
}

@media (max-width: 768px) {

	.fcb-section .fcb-columns[data-elements-count='4'],
	.fcb-section .fcb-columns[data-elements-count='2'][data-distribution='1/2 1/2'] {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
		grid-gap: 0;
	}

	.fcb-section .fcb-columns:is([data-elements-count='3'], [data-elements-count='4']):has(> .fcb-column > .post_content_block > .content-card) > .fcb-column {
		flex-basis: 100%;
	}

	.fcb-subsection .fcb-columns:has(.mobile-reverse) .fcb-column:last-child {
		order: 1;
	}
	.fcb-subsection .fcb-columns:has(.mobile-reverse) .fcb-column:first-child {
		order: 2;
	}
}

/* Content-cards block: the grid the editor's own card rows get from their column layout, but owned
   by one block instead of one text editor per column. The cards themselves are unchanged markup
   (rte.css), so only their arrangement lives here.
   Grid and not flex: a grid item stretches to its row, which is what makes every card of a row the
   same height without a single explicit height.
   Twice as many tracks as cards per row, every card spanning two of them: (W - 2g)/3 is the same
   card width and the same card position either way, and the half tracks are what let an incomplete
   last row start half a card off centre. The start line of that row is 'per row - remainder + 1'
   in half tracks - 3 for one card left over of three, 2 for two of three or one of two.
   grid-column: auto / span 2 and not the one-value shorthand: "grid-column: span 2" sets the END
   to auto, so a card that is later given a start line would span a single track.
   The incomplete last row centred is an operator decision; so is four per row as a choice of the
   block, for a group that would otherwise leave a lone fourth card (/de/fct-swiss/leistungen/).
   Three per row is the BASE and two per row is the exception, because that is the default the ACF
   field and the template both carry (includes/common_fields/common_fields.php, cards_per_row, and
   template-parts/block/content_cards.php with its ?? '3'). A block whose data-cards-per-row is
   absent or an empty string - which the template's ?? cannot catch, it only answers null - would
   otherwise get two per row from the CSS and three from everything else. Hence :not([...='2']) on
   the three-per-row start lines, and four per row is excluded there too because its own start
   lines exist only from 1025px. Every rule that overrides those lines carries the same :not(), so
   the overriding order inside the media queries below holds. */
.content-cards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 30px;
}

.content-cards > .content-card {
	grid-column: auto / span 2;
}

.content-cards[data-cards-per-row='2'] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.content-cards:not([data-cards-per-row='2'], [data-cards-per-row='4']) > .content-card:nth-child(3n + 1):last-child {
	grid-column-start: 3;
}

.content-cards:not([data-cards-per-row='2'], [data-cards-per-row='4']) > .content-card:nth-child(3n + 1):nth-last-child(2) {
	grid-column-start: 2;
}

.content-cards[data-cards-per-row='2'] > .content-card:nth-child(2n + 1):last-child {
	grid-column-start: 2;
}

/* Four per row: eight tracks, a card spans two, an incomplete last row starts at
   '4 - remainder + 1'. A three-per-row group standing right after a four-per-row group takes the
   same eight tracks, so its cards keep the four-card width and sit centred under the row above
   instead of growing to a third. Only from 1025px; below, the two-per-row rules apply to both. */
@media (min-width: 1025px) {
	.content-cards[data-cards-per-row='4'],
	.fcb-subsection:has(.content-cards[data-cards-per-row='4']) + .fcb-subsection .content-cards:not([data-cards-per-row='2'], [data-cards-per-row='4']) {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.content-cards[data-cards-per-row='4'] > .content-card:nth-child(4n + 1):last-child {
		grid-column-start: 4;
	}

	.content-cards[data-cards-per-row='4'] > .content-card:nth-child(4n + 1):nth-last-child(2) {
		grid-column-start: 3;
	}

	.content-cards[data-cards-per-row='4'] > .content-card:nth-child(4n + 1):nth-last-child(3) {
		grid-column-start: 2;
	}

	.fcb-subsection:has(.content-cards[data-cards-per-row='4']) + .fcb-subsection .content-cards:not([data-cards-per-row='2'], [data-cards-per-row='4']) > .content-card:first-child:nth-last-child(3) {
		grid-column-start: 2;
	}
}

/* Two per row whatever the setting, the same width at which the editor's card rows fall back.
   The three-per-row start lines are overridden rather than reset, because a reset rule of the same
   specificity would otherwise win over the two-per-row rule for a card that matches both. */
@media (max-width: 1024px) {
	.content-cards,
	.content-cards[data-cards-per-row='2'] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.content-cards:not([data-cards-per-row='2'], [data-cards-per-row='4']) > .content-card:nth-child(3n + 1):last-child,
	.content-cards:not([data-cards-per-row='2'], [data-cards-per-row='4']) > .content-card:nth-child(3n + 1):nth-last-child(2) {
		grid-column-start: auto;
	}

	.content-cards:not([data-cards-per-row='2'], [data-cards-per-row='4']) > .content-card:nth-child(2n + 1):last-child,
	.content-cards[data-cards-per-row='2'] > .content-card:nth-child(2n + 1):last-child {
		grid-column-start: 2;
	}
}

@media (max-width: 768px) {
	.content-cards,
	.content-cards[data-cards-per-row='2'] {
		grid-template-columns: minmax(0, 1fr);
	}

	.content-cards > .content-card {
		grid-column: auto;
	}

	.content-cards:not([data-cards-per-row='2'], [data-cards-per-row='4']) > .content-card:nth-child(3n + 1):last-child,
	.content-cards:not([data-cards-per-row='2'], [data-cards-per-row='4']) > .content-card:nth-child(3n + 1):nth-last-child(2),
	.content-cards:not([data-cards-per-row='2'], [data-cards-per-row='4']) > .content-card:nth-child(2n + 1):last-child,
	.content-cards[data-cards-per-row='2'] > .content-card:nth-child(2n + 1):last-child {
		grid-column-start: auto;
	}
}