/**
 * Landing-page sections.
 *
 * Loaded per component, not per page: every rule below belongs to a block
 * style registered in inc/landing.php, and WordPress enqueues this file only
 * when one of those styles is actually used. Nothing here is gated on a page,
 * a template or a post ID — that mistake has cost this project three times.
 *
 * Layout, stacking and spacing come from the core blocks themselves. This file
 * only supplies what core cannot: the card, the stat strip, the numbered step,
 * the logo tile, the chip and the two note boxes.
 *
 * Colours are the theme's own. --primary (#217DBB) measures 4.45:1 on white and
 * fails WCAG 1.4.3 for text, so every text and border role here uses
 * --cg--color--blue-dark (5.8:1) instead.
 */

/* ---------------------------------------------------------------------------
 * Shared tokens for the landing sections
 *
 * On `body`, not on `.wp-site-blocks`. The block editor has no .wp-site-blocks
 * — its canvas root is .editor-styles-wrapper — so tokens declared there were
 * undefined in the backend, every rule using one was dropped, and the sections
 * rendered unstyled while being correct on the front end. WordPress rewrites a
 * `body` selector in an editor stylesheet to its canvas root, so this reaches
 * both.
 *
 * For the same reason every theme token used below carries its literal as a
 * fallback: style.css is not loaded in the editor, so --cg--color--blue-dark
 * does not exist there either.
 * ------------------------------------------------------------------------ */
body {
	--cg--lp--hair: #e2eaee;
	--cg--lp--hair-strong: #cfdde6;
	--cg--lp--ink-soft: #33454f;
	--cg--lp--ink-muted: #46555f;
}

/* ---------------------------------------------------------------------------
 * Objektkarte — core/group, style "cg-object-card"
 *
 * The image is a core/image inside the group; pulling it to the card edge is
 * the only thing core cannot express, so it is the only thing done here.
 * ------------------------------------------------------------------------ */
.is-style-cg-object-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --cg--lp--hair );
	border-radius: 4px;
	background: var( --wp--preset--color--base );
}

.is-style-cg-object-card > .wp-block-image:first-child {
	margin: 0;
}

.is-style-cg-object-card > .wp-block-image:first-child img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*
 * Everything after the image gets the padding, so the picture can bleed to the
 * card edge while the text keeps its inset. `:not()` rather than a wrapper
 * group: one less level of nesting for an editor to get lost in.
 */
.is-style-cg-object-card > :not( .wp-block-image ) {
	padding-inline: 24px;
}

/*
 * The element right after the image, not `:first-of-type`.
 *
 * `:not(.wp-block-image):first-of-type` matches the first element of EVERY
 * type among the siblings — so the heading, the first paragraph and the button
 * row each got 22px of top padding, and the card's spacing came out uneven.
 * `.wp-block-image + *` names the one element that actually needs it, and the
 * second selector covers a card built without a picture.
 */
.is-style-cg-object-card > .wp-block-image + *,
.is-style-cg-object-card > :first-child:not( .wp-block-image ) {
	padding-block-start: 22px;
}

.is-style-cg-object-card > :last-child {
	margin-block-end: 0;
	padding-block-end: 24px;
}

.is-style-cg-object-card :is( h2, h3, h4 ) {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	hyphens: manual;
}

/* The service links: quiet text, not a second row of buttons. */
.is-style-cg-object-card .cg-object-services {
	font-size: 14.5px;
	line-height: 1.65;
	color: var( --cg--lp--ink-muted );
}

.is-style-cg-object-card .cg-object-services a {
	color: var( --cg--color--blue-dark, #2d6a97 );
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba( 45, 106, 151, 0.32 );
}

.is-style-cg-object-card .cg-object-services a:hover,
.is-style-cg-object-card .cg-object-services a:focus-visible {
	border-bottom-color: var( --cg--color--blue-dark, #2d6a97 );
}

/*
 * The pick button is the one framed object in the card, so it reads as the
 * action rather than as a fourth link.
 */
.is-style-cg-object-card .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Matches the 52px of every other control; 2.5.5 wants 44 as a floor. */
	min-height: 48px;
	border: 1px solid var( --cg--color--blue-dark, #2d6a97 );
	background: transparent;
	color: var( --cg--color--blue-dark, #2d6a97 );
	font-size: 14.5px;
	font-weight: 700;
}

.is-style-cg-object-card .wp-block-button__link:hover,
.is-style-cg-object-card .wp-block-button__link:focus-visible {
	background: var( --cg--color--blue-dark, #2d6a97 );
	color: var( --wp--preset--color--base );
}

/* ---------------------------------------------------------------------------
 * Zahlenstreifen — core/columns, style "cg-stats"
 * ------------------------------------------------------------------------ */
.is-style-cg-stats {
	border: 1px solid var( --cg--lp--hair );
	border-radius: 4px;
	background: var( --wp--preset--color--base );
	overflow: hidden;
}

.is-style-cg-stats > .wp-block-column {
	padding: 26px 28px;
}

.is-style-cg-stats > .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid var( --cg--lp--hair );
}

/* The first paragraph of each column is the figure. */
.is-style-cg-stats .wp-block-column > p:first-child {
	margin-block-end: 6px;
	color: var( --cg--color--blue-dark, #2d6a97 );
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1;
}

.is-style-cg-stats .wp-block-column > p + p {
	font-size: 14.5px;
	line-height: 1.5;
	color: var( --cg--lp--ink-muted );
}

@media screen and ( max-width: 781px ) {

	.is-style-cg-stats > .wp-block-column + .wp-block-column {
		border-inline-start: 0;
		border-block-start: 1px solid var( --cg--lp--hair );
	}
}

/* ---------------------------------------------------------------------------
 * Ablaufschritt — core/column, style "cg-step"
 *
 * The number is the column's first heading; core has no counter, so it comes
 * from the CSS counter of the parent row.
 * ------------------------------------------------------------------------ */
.is-style-cg-steps {
	counter-reset: cg-step;
}

.is-style-cg-steps > .wp-block-column {
	counter-increment: cg-step;
}

.is-style-cg-steps > .wp-block-column::before {
	content: counter( cg-step );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-block-end: 14px;
	border-radius: 50%;
	background: var( --cg--color--blue-dark, #2d6a97 );
	color: var( --wp--preset--color--base );
	font-size: 18px;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Logowand — core/gallery, style "cg-logos"
 *
 * The reference tiles are square exports with very different amounts of baked-in
 * whitespace. An even tile plus object-fit: contain is what makes eight or ten
 * different marks read as one row.
 * ------------------------------------------------------------------------ */
.is-style-cg-logos.wp-block-gallery {
	/*
	 * A grid, deliberately. Core lays a nested-images gallery out as flex and
	 * sizes each figure with a flex-basis derived from `columns`, which holds
	 * five across all the way down to its own 600px breakpoint — at 620px the
	 * reference marks came out 59px wide. A grid puts the column count where it
	 * can be set per breakpoint, and makes the tiles exactly equal.
	 */
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: 18px;
}

.is-style-cg-logos.wp-block-gallery.has-nested-images figure.wp-block-image:not( #individual-image ) {
	/*
	 * The `:not(#individual-image)` is not decoration — it is core's own trick,
	 * and it has to be repeated here to beat it.
	 *
	 * core/gallery sizes its figures with
	 *   .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
	 * where the ID selector puts the specificity at (1,3,1). No selector built
	 * from classes alone can win, whatever order the stylesheets load in — my
	 * four-class version lost silently and the tiles came out 38px wide inside
	 * a 200px track.
	 *
	 * width: 100% and not auto for a second reason: as a grid item with `auto`
	 * the aspect-ratio below resolves the width from the content height rather
	 * than from the track.
	 */
	flex: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: 17px 18px;
	border: 1px solid var( --cg--lp--hair );
	border-radius: 4px;
	background: var( --wp--preset--color--base );
}

.is-style-cg-logos.wp-block-gallery.has-nested-images figure.wp-block-image:not( #individual-image ) img,
.is-style-cg-logos.wp-block-gallery.is-cropped figure.wp-block-image:not( #individual-image ) img {
	/*
	 * Bound the mark, do not size it.
	 *
	 * The previous version set width and height to 100% and relied on
	 * object-fit: contain. That loses against core, which ships
	 *   .wp-block-gallery.has-nested-images figure.wp-block-image img
	 *   { height:auto; width:auto; max-width:100%!important }
	 * — and the !important cannot be out-specified. Measured on the rendered
	 * page: the Materna mark painted 162px wide inside a box where a contained
	 * square would have been 114, and every tile showed a stretched colour
	 * band where white should have been.
	 *
	 * So core's own sizing is left alone and only capped: natural size, never
	 * larger than the tile. That is how a logo wall with mixed assets is built
	 * anyway, and it needs no fight.
	 */
	max-height: 100%;
	object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * Ortsliste — core/list, style "cg-places"
 * ------------------------------------------------------------------------ */
.is-style-cg-places {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.is-style-cg-places > li {
	padding: 5px 12px;
	border: 1px solid var( --cg--lp--hair-strong );
	border-radius: 999px;
	font-size: 14.5px;
	/* Place names are not running text; breaking "Neu-stadt" looks cheap. */
	hyphens: manual;
}

/* ---------------------------------------------------------------------------
 * FAQ-Eintrag — core/group, style "cg-faq"
 *
 * Question left, answer right. A single stacked column read as a wall of text.
 * ------------------------------------------------------------------------ */
.is-style-cg-faq {
	display: grid;
	grid-template-columns: minmax( 0, 0.82fr ) minmax( 0, 1.18fr );
	gap: 40px;
	padding-block: 26px;
	border-block-start: 1px solid var( --cg--lp--hair );
}

.is-style-cg-faq :is( h2, h3, h4 ) {
	margin: 0;
	font-size: 18.5px;
	font-weight: 700;
	line-height: 1.3;
}

.is-style-cg-faq p {
	margin: 0;
	color: var( --cg--lp--ink-soft );
	font-size: 16.5px;
}

@media screen and ( max-width: 781px ) {

	.is-style-cg-faq {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* ---------------------------------------------------------------------------
 * Hinweiskasten — core/group, styles "cg-note" and "cg-panel"
 * ------------------------------------------------------------------------ */
.is-style-cg-note {
	padding: 18px 20px;
	border-inline-start: 3px solid var( --cg--color--blue-dark, #2d6a97 );
	background: rgba( 255, 255, 255, 0.55 );
}

.is-style-cg-note > :first-child {
	margin-block-start: 0;
	color: var( --cg--color--blue-dark, #2d6a97 );
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.is-style-cg-note > :last-child {
	margin-block-end: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var( --cg--lp--ink-soft );
}

.is-style-cg-panel {
	padding: 24px 26px;
	border: 1px solid var( --cg--lp--hair-strong );
	border-radius: 4px;
	background: var( --wp--preset--color--tertiary );
}

.is-style-cg-panel > :first-child {
	margin-block-start: 0;
}

.is-style-cg-panel > :last-child {
	margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
 * Vorspann — core/paragraph, style "cg-lead"
 * ------------------------------------------------------------------------ */
.is-style-cg-lead {
	/*
	 * A measure, in rem. Without it these ran the full 1228px content width —
	 * roughly 147 characters a line, about twice what stays readable.
	 * rem and not ch: ch is font-size relative, so the same value bound at 19px
	 * and did not at 17px. That trap is written down in CLAUDE.md.
	 */
	max-width: 44rem;
	font-size: 19px;
	line-height: 1.55;
	color: var( --cg--lp--ink-soft );
}

/* ---------------------------------------------------------------------------
 * Augenbraue — core/paragraph, style "cg-eyebrow"
 * ------------------------------------------------------------------------ */
.is-style-cg-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var( --cg--color--blue-dark, #2d6a97 );
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.is-style-cg-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: currentColor;
}

/* ---------------------------------------------------------------------------
 * Fakten-Marker — core/paragraph, style "cg-todo"
 *
 * Facts nobody has confirmed yet. Deliberately loud, and deliberately not a
 * colour from the palette: it must never look like part of the design.
 * ------------------------------------------------------------------------ */
.is-style-cg-todo,
.cg-todo {
	background: #fff3cd;
	border-inline-start: 3px solid #d9a400;
	padding: 10px 14px;
	color: #4a3800;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Vertical rhythm
 *
 * Two things zero the block gaps on this site, and both have to be beaten here:
 *
 *   1. The theme's own reset, `body .is-layout-flow > * + * { margin-block-start: 0 }`
 *      in style.css.
 *   2. WordPress printing `.wp-container-… > * { margin-block: 0 }` into a
 *      <style> in the head — one class of specificity, but later in the
 *      document than any stylesheet.
 *
 * So every rule below is written with at least two classes. A single-class
 * selector loses to (2) silently, which is exactly how the callback note once
 * ended up glued to the input fields with 0px above it.
 * ------------------------------------------------------------------------ */
.cg-lp-section > * + *,
.cg-lp-section .wp-block-column > * + *,
.cg-lp-hero .wp-block-column > * + * {
	margin-block-start: 22px;
}

/* Running prose is tighter than the gap between a section's parts. */
.cg-lp-section .wp-block-column > p + p {
	margin-block-start: 16px;
}

/* Eyebrow, heading and lead belong together; the block after them does not. */
.cg-lp-section > .is-style-cg-eyebrow + :is( h1, h2 ),
.cg-lp-hero .wp-block-column > .is-style-cg-eyebrow + :is( h1, h2 ) {
	margin-block-start: 14px;
}

/*
 * A measure of its own means an alignment of its own.
 *
 * WordPress's constrained layout prints this inline in the <head>:
 *   .wp-container-… > :where( :not(.alignleft):not(.alignright):not(.alignfull) )
 *   { max-width: 1250px; margin-left: auto !important; margin-right: auto !important }
 *
 * Centring in that column is right for a block that fills it and wrong for one
 * that stops at 44rem: the lead sat 273px to the right of the heading above it.
 * !important is beatable only by !important, so this matches core's declaration
 * and outspecifies it — two classes against one.
 *
 * The value is not zero, and that was the second wrong answer. The section also
 * carries the global padding, so its inner edge is 32px while the column above
 * starts at 95px — margin-left:0 put the lead a heading's width to the *left* of
 * everything else. The offset is half of whatever the column does not use, which
 * core publishes as a custom property, so the 1250 stays in theme.json where it
 * belongs. Below the content size the term goes negative and max() returns zero.
 *
 * Shortening the content box with padding instead avoids the !important but is
 * worse: max-width caps the *content* box, so the padding pushes the element
 * past the column and out of line again.
 *
 * Physical properties on purpose, the same ones core writes — a logical
 * margin-inline-start resolves to the same physical margin and only makes the
 * reader work that out.
 */
.cg-lp-section > .is-style-cg-lead,
.cg-lp-hero .is-style-cg-lead,
.wp-block-cover .is-style-cg-lead {
	/*
	 * The measure is repeated here because the same rule sets max-width at one
	 * class of specificity, and in the post editor core's layout CSS is injected
	 * after the theme's editor styles and wins the tie: the lead ran the full
	 * 1096px canvas in the backend while the front end showed 704px. Different
	 * cascade order in the two places, same declaration — so the measure needs
	 * the importance the alignment already needs.
	 */
	max-width: 44rem !important;
	margin-left: max( 0px, ( 100% - var( --wp--style--global--content-size, 1250px ) ) / 2 ) !important;
	margin-right: auto !important;
}
.cg-lp-section > :is( h1, h2 ) + .is-style-cg-lead,
.cg-lp-hero .wp-block-column > :is( h1, h2 ) + .is-style-cg-lead {
	margin-block-start: 16px;
}

.cg-lp-section > .is-style-cg-lead + * {
	margin-block-start: 38px;
}

.cg-lp-section > .wp-block-columns + *,
.cg-lp-section > .wp-block-cg-object-picker + * {
	margin-block-start: 26px;
}

/* Inside a card the spacing is tighter than between sections. */
.is-style-cg-object-card > :not( .wp-block-image ) + :not( .wp-block-image ) {
	margin-block-start: 10px;
}

.is-style-cg-object-card > :not( .wp-block-image ) + .wp-block-buttons,
.is-style-cg-object-card > .wp-block-buttons {
	/*
	 * auto, not a fixed value: the cards in a row are equal height but their
	 * text is not, so a fixed margin left the six actions on three different
	 * baselines. The card is already a flex column; this pushes the action to
	 * the bottom of whichever card it is in.
	 *
	 * The first selector exists to match the specificity of the general
	 * sibling rule above, which is (0,3,0) and otherwise wins.
	 */
	margin-block-start: auto;
	padding-block-start: 18px;
}

.is-style-cg-object-card > .wp-block-image + * {
	margin-block-start: 0;
}

/* The trust ticks and the FAQ answer need their own, because both sit inside
   a core container that zeroes them. */
.cg-lp-section .cg-trust li + li,
.cg-lp-hero .cg-trust li + li {
	margin-block-start: 13px;
}

.is-style-cg-faq :is( h2, h3, h4 ) + * {
	margin-block-start: 0;
}

.is-style-cg-panel > * + *,
.is-style-cg-note > * + * {
	margin-block-start: 9px;
}

.is-style-cg-panel .is-style-cg-places {
	margin-block-start: 14px;
}

/* ---------------------------------------------------------------------------
 * Buttons in the landing sections
 *
 * One filled action per screen: the callback form's own submit. Everything else
 * is outlined, so two primaries never compete — which is what the hero looked
 * like before.
 * ------------------------------------------------------------------------ */
.cg-lp-hero .wp-block-buttons,
.wp-block-cover .wp-block-buttons {
	gap: 12px;
}

.cg-lp-hero .wp-block-button__link,
.wp-block-cover .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border-radius: 3px;
	font-size: 16.5px;
	font-weight: 700;
}

.cg-lp-hero .is-style-outline > .wp-block-button__link {
	/*
	 * Not --cg--lp--hair-strong: that is a divider colour and measures 1.30:1
	 * against the hero's ground. The border is the only thing saying this is a
	 * control, and 1.4.11 asks for 3:1. #2d6a97 is 5.43:1 and is the colour the
	 * button's own text already uses.
	 */
	border: 1px solid var( --cg--color--blue-dark, #2d6a97 );
	background: transparent;
	color: var( --wp--preset--color--secondary );
}

/*
 * A hover has to be visible, and this one was not.
 *
 * It changed the border from #2d6a97 to #022b3a and nothing else — one pixel
 * of near-black instead of blue, on a ground of #f4f8fb. Text and fill stayed
 * put, so on the phone-number button beside the primary there was no feedback
 * at all: the state existed in the stylesheet and not on the screen.
 *
 * The fill does the work now, the way the primary next to it darkens. #dceaf4
 * against the hero's #f4f8fb is a change you cannot miss, and the near-black
 * label on it stays far above 4.5:1.
 */
.cg-lp-hero .is-style-outline > .wp-block-button__link:hover,
.cg-lp-hero .is-style-outline > .wp-block-button__link:focus-visible {
	border-color: #245678;
	background: #dceaf4;
	color: var( --wp--preset--color--secondary );
}

/* On the dark closing band the outline has to be light, not the ink colour. */
.wp-block-cover .is-style-outline > .wp-block-button__link {
	border: 1px solid rgba( 255, 255, 255, 0.45 );
	background: transparent;
	color: var( --wp--preset--color--base );
}

.wp-block-cover .wp-block-button:not( .is-style-outline ) > .wp-block-button__link {
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--secondary );
}

/*
 * Hover on the dark band. This was missing entirely, so these three buttons
 * fell through to core's own rule, which turns a button's background to
 * `contrast` — black on a near-black band, i.e. the button appeared to vanish
 * rather than respond. Both directions are defined here, and both keep the
 * text above 4.5:1 on the surface behind it.
 */
.wp-block-cover .is-style-outline > .wp-block-button__link:hover,
.wp-block-cover .is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var( --wp--preset--color--base );
	background: rgba( 255, 255, 255, 0.14 );
	color: var( --wp--preset--color--base );
}

.wp-block-cover .wp-block-button:not( .is-style-outline ) > .wp-block-button__link:hover,
.wp-block-cover .wp-block-button:not( .is-style-outline ) > .wp-block-button__link:focus-visible {
	background: #e3edf2;
	color: var( --wp--preset--color--secondary );
}

/*
 * The hero's primary. Filled, because a landing page needs one loud action per
 * screen and «Anfrage senden» is it; the phone beside it stays outlined.
 */
.cg-lp-hero .wp-block-button:not( .is-style-outline ) > .wp-block-button__link {
	background: var( --cg--color--blue-dark, #2d6a97 );
	color: var( --wp--preset--color--base );
}

.cg-lp-hero .wp-block-button:not( .is-style-outline ) > .wp-block-button__link:hover,
.cg-lp-hero .wp-block-button:not( .is-style-outline ) > .wp-block-button__link:focus-visible {
	background: #245678;
	color: var( --wp--preset--color--base );
}

/* ---------------------------------------------------------------------------
 * The hero's callback panel
 *
 * Reuses .cg-cta__panel from the theme's own front-page CTA, so the form, the
 * pill and the note all inherit styling that already exists. Only the shadow
 * and the column rhythm are new.
 * ------------------------------------------------------------------------ */
.cg-lp-hero .cg-cta__panel {
	box-shadow: 0 20px 44px -28px rgba( 2, 43, 58, 0.55 );
}

.cg-lp-hero .cg-cta__panel > * + * {
	margin-block-start: 10px;
}

.cg-lp-hero .cg-cta__panel > .cb-note {
	margin-block-start: 18px;
}

@media screen and ( max-width: 781px ) {

	/* A half-width target beside an empty half is a miss waiting to happen. */
	.is-style-cg-object-card .wp-block-button,
	.is-style-cg-object-card .wp-block-button__link,
	.cg-lp-hero .wp-block-button,
	.cg-lp-hero .wp-block-button__link,
	.wp-block-cover .wp-block-button,
	.wp-block-cover .wp-block-button__link {
		width: 100%;
	}

	.cg-lp-hero .wp-block-buttons,
	.wp-block-cover .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
}

/* The panel's first paragraph is its label, same treatment as the note box. */
.is-style-cg-panel > p:first-child {
	color: var( --cg--color--blue-dark, #2d6a97 );
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* A step's heading and its text need the gap core's container took away. */
.is-style-cg-steps .wp-block-column > * + * {
	margin-block-start: 12px;
}

/* ---------------------------------------------------------------------------
 * Footer for landing pages (parts/footer-lp.html)
 *
 * The site footer carries a full contact form. On a landing page that is a
 * fourth way to get in touch, competing with the three the page already
 * offers, placed after the closing call to action — so landing pages get this
 * one instead: the same information, no second form.
 *
 * It is deliberately NOT minimal. A footer is the one place a search engine and
 * an answer engine both look for the plain facts about a business: name,
 * address, phone, when it answers, what it does, where it works. Those are also
 * what a visitor scrolls down for. What it leaves out is a link to every page —
 * that dilutes the internal-link signal and adds exits without adding an answer.
 * ------------------------------------------------------------------------ */
.cg-lp-footer .cg-lp-footer__cols {
	gap: 40px;
}

/*
 * The negative logo, inlined so it costs no request and can take its colours
 * from the footer. currentColor paints the box and "GROUP"; the counter colour
 * paints the letters inside the box, which is why a plain CSS invert filter
 * cannot do this job — it would turn the box and its letters the same colour
 * and "CLEAN" would disappear.
 */
.cg-lp-footer .cg-lp-footer__logo {
	--cg--logo--counter: var( --wp--preset--color--secondary, #022b3a );

	max-width: 210px;
	color: var( --wp--preset--color--base );
}

.cg-lp-footer .cg-lp-footer__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.cg-lp-footer .cg-lp-footer__h {
	margin-block-end: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--base );
}

.cg-lp-footer .cg-lp-footer__h + .cg-lp-footer__list {
	margin-block-start: 0;
}

.cg-lp-footer .cg-lp-footer__claim {
	margin-block-start: 18px;
	max-width: 340px;
	font-size: 15px;
	line-height: 1.6;
	color: #a9c2ce;
}

.cg-lp-footer .cg-lp-footer__social {
	margin-block-start: 14px;
	font-size: 15px;
}

.cg-lp-footer .cg-lp-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.5;
}

.cg-lp-footer .cg-lp-footer__list li + li {
	margin-block-start: 10px;
}

/* A second block of links under a heading needs air above it. */
.cg-lp-footer .cg-lp-footer__list + .cg-lp-footer__h {
	margin-block-start: 30px;
}

/*
 * Footer links are underlined, and they are the BRIGHTEST thing in their
 * column — not the dimmest.
 *
 * They used to be #DBE6EC without an underline against #FFFFFF body text. That
 * is colour as the only distinction, which WCAG 1.4.1 does not allow, and the
 * two colours were 1.27:1 apart where technique G183 asks for 3:1 — so even as
 * a colour-only cue it failed. It was also backwards: the link was quieter than
 * the text around it.
 *
 * It matters here more than in a list of nothing but links, because the contact
 * column deliberately mixes the two: "Telefon: 0511 711 099 73" is half label,
 * half link, and "Erreichbarkeit: Mo–Fr 7–19 Uhr" is no link at all.
 */
.cg-lp-footer a {
	color: var( --wp--preset--color--base );
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.42 );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

/* Hover brings the underline to full strength — a second, non-colour cue. */
.cg-lp-footer a:hover {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.cg-lp-footer a:focus-visible {
	outline: 2px solid var( --wp--preset--color--base );
	outline-offset: 3px;
	text-decoration-color: currentColor;
}

/* Everything that is not a link steps back, so the hierarchy reads correctly. */
.cg-lp-footer .cg-lp-footer__list {
	color: #a9c2ce;
}

.cg-lp-footer .cg-lp-footer__legal {
	margin-block-start: 52px;
	padding-block-start: 22px;
	border-block-start: 1px solid rgba( 255, 255, 255, 0.14 );
	font-size: 14px;
	color: #a9c2ce;
}

.cg-lp-footer .cg-lp-footer__legal a {
	margin-inline-end: 18px;
	color: var( --wp--preset--color--base );
}

@media screen and ( max-width: 781px ) {

	.cg-lp-footer .cg-lp-footer__cols {
		gap: 34px;
	}

	.cg-lp-footer .cg-lp-footer__legal {
		margin-block-start: 34px;
	}
}

/*
 * The cookie button sits in the legal row between two links and does the same
 * kind of job, so it gets the same affordance. Measured before changing it: no
 * border, no background, no padding, no underline — an interactive control
 * rendered as plain text, which fails 1.4.11 outright and is worse than a
 * colour-only link, because there was no cue at all.
 *
 * It is a <button> and not a link on purpose (it opens a dialog), so the
 * underline is the shared cue and the focus ring is the one that matters for
 * keyboard use.
 */
.cg-lp-footer .cg-cookie-btn {
	padding: 0;
	border: 0;
	background: none;
	color: var( --wp--preset--color--base );
	font: inherit;
	text-decoration: underline;
	text-decoration-color: rgba( 255, 255, 255, 0.42 );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	cursor: pointer;
}

.cg-lp-footer .cg-cookie-btn:hover {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.cg-lp-footer .cg-cookie-btn:focus-visible {
	outline: 2px solid var( --wp--preset--color--base );
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Headline weight
 *
 * theme.json sets `elements.heading.fontWeight: 400` for the whole site, so
 * every heading on this page — including the h1 — rendered at regular weight.
 * On a landing page whose one job is to lead with a single sentence, that
 * leaves the most important line indistinguishable from the paragraph under it.
 *
 * Scoped to the landing sections rather than changed in theme.json: the weight
 * of every heading on twenty other pages is a brand decision, not a side effect
 * of this build. If it should hold site-wide, it belongs in theme.json.
 *
 * The intermediate weights below are new. Until the variable font replaced the
 * two static cuts, a declared 600 had no matching face and the browser snapped
 * it to 700 — every label on the page was a step heavier than it was written.
 * ------------------------------------------------------------------------ */
.cg-lp-hero :is( h1, h2 ),
.cg-lp-section :is( h1, h2 ),
.wp-block-cover :is( h1, h2 ),
.is-style-cg-faq :is( h2, h3, h4 ),
.is-style-cg-object-card :is( h2, h3, h4 ) {
	font-weight: 700;
	letter-spacing: -0.015em;
}

/* The h1 carries a touch more negative tracking; at 40px the default is loose. */
.cg-lp-hero h1 {
	font-weight: 700;
	letter-spacing: -0.021em;
	line-height: 1.08;
}

/* Step headings sit under a numbered circle and read as a third level. */
.is-style-cg-steps .wp-block-column :is( h2, h3, h4 ) {
	font-weight: 700;
}

/* Labels: 600 now genuinely renders at 600. */
.cg-lp-footer .cg-lp-footer__h,
.is-style-cg-eyebrow,
.is-style-cg-note > :first-child,
.is-style-cg-panel > p:first-child,
.cg-lp-section .card__k {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * The logo wall's own column count
 *
 * core/gallery drops to two columns at 600px and holds five above it, so
 * between 620 and 780px the reference marks rendered 59px wide — unreadable,
 * and the row stopped doing its job. The tiles are a fixed grid here, not
 * core's flex-basis arithmetic, so the count is set outright.
 * ------------------------------------------------------------------------ */
@media screen and ( max-width: 1024px ) {

	.is-style-cg-logos.wp-block-gallery {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

@media screen and ( max-width: 781px ) {

	.is-style-cg-logos.wp-block-gallery {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media screen and ( max-width: 520px ) {

	.is-style-cg-logos.wp-block-gallery {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* The card action spans its card from the first breakpoint, not only on a
   phone: at 1180px the two-column grid left it half as wide as its place. */
@media screen and ( max-width: 1180px ) {

	.is-style-cg-object-card .wp-block-button,
	.is-style-cg-object-card .wp-block-button__link {
		width: 100%;
	}
}

/* Four stat columns stop working before core's own 781px break: at 900px the
   figure "7–19 Uhr" wrapped and pushed one label a line down. Two columns from
   960px, which is where the measurement showed it going wrong. */
@media screen and ( max-width: 960px ) {

	.is-style-cg-stats {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.is-style-cg-stats.wp-block-columns {
		display: grid;
	}

	.is-style-cg-stats > .wp-block-column + .wp-block-column {
		border-inline-start: 0;
	}

	.is-style-cg-stats > .wp-block-column:nth-child( 2n ) {
		border-inline-start: 1px solid var( --cg--lp--hair );
	}

	.is-style-cg-stats > .wp-block-column:nth-child( n + 3 ) {
		border-block-start: 1px solid var( --cg--lp--hair );
	}
}