/*
 * Quern — CSS additionnel.
 *
 * Uniquement ce que theme.json ne sait pas exprimer :
 *   - ombres néomorphiques des boutons pilule (.is-style-dark / .is-style-light)
 *   - nav flottante avec backdrop blur
 *   - grille de colonnes visible (overlay)
 *   - effet verre (cartes, nav)
 *   - mix-blend-mode des logos du logo cloud
 *   - redéfinition des tailles de police par breakpoint (3 maquettes fixes,
 *     pas d'échelle fluide continue)
 *
 * Tokens obligatoires : var(--wp--preset--…) / var(--wp--custom--…). Aucune valeur en dur.
 * Mobile-first. Breakpoints : 782px (≈ frame mobile 390) et 1024px (≈ frame tablette 834).
 */

/* Utilitaire d'accessibilité standard WordPress (absent par défaut d'un block theme sans classic-theme-support). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Décalage des ancres (#section) pour passer sous l'en-tête collant. */
html {
	scroll-padding-top: 90px;
}

/*
 * Tokens de grille génériques (même nom, valeur réassignée par breakpoint) —
 * utilisés aussi bien par .quern-grid-lines (traits visibles) que par
 * .quern-cols/.quern-inset (mise en page du contenu), pour qu'il soit
 * structurellement impossible que les deux divergent. Avant, chaque système
 * utilisait un calcul séparé (dégradé CSS vs grille CSS) : à certaines
 * tailles d'écran/échelles d'affichage, ils pouvaient arrondir les pixels
 * différemment (retour utilisateur du 2026-10-05 : « le fond bouge selon
 * la taille d'écran »).
 */
:root {
	/* Grain unique pour tout le site (réf. = CTA Indigo) : même opacité, même tuile, mix-blend overlay. */
	--quern-grain-opacity: 0.3;
	--quern-grain-size: 256px;
	--quern-margin: var(--wp--custom--grid--margin-desktop);
	--quern-col: var(--wp--custom--grid--col-desktop);
	--quern-gutter: var(--wp--custom--grid--gutter-desktop);
	--quern-max: var(--wp--custom--grid--max-desktop);
	--quern-cols-count: 12;
}

@media (max-width: 1024px) {
	:root {
		--quern-margin: var(--wp--custom--grid--margin-tablet);
		--quern-col: var(--wp--custom--grid--col-tablet);
		--quern-gutter: var(--wp--custom--grid--gutter-tablet);
		--quern-max: var(--wp--custom--grid--max-tablet);
		--quern-cols-count: 6;
	}
}

@media (max-width: 782px) {
	:root {
		--quern-margin: var(--wp--custom--grid--margin-mobile);
		--quern-col: var(--wp--custom--grid--col-mobile);
		--quern-gutter: var(--wp--custom--grid--gutter-mobile);
		--quern-max: var(--wp--custom--grid--max-mobile);
		--quern-cols-count: 4;
	}
}

/*
 * theme.json ajoute 20px (blockGap racine) entre chaque bloc de premier
 * niveau dans post-content, y compris entre deux sections align:full — or
 * ces sections gèrent déjà leur propre padding haut/bas. Sans cette règle,
 * deux sections se retrouvent avec un bandeau de 20px de fond de page entre
 * elles (très visible entre une section claire et une section sombre, ex.
 * CTA Indigo). On annule ce 20px uniquement autour des sections align:full ;
 * entre deux blocs de texte normaux (tapés directement, pas dans un motif),
 * le blockGap habituel reste actif.
 */
.wp-block-post-content.is-layout-constrained > .alignfull,
.wp-block-post-content.is-layout-constrained > .alignfull + * {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ *
 * Typographie — tailles par breakpoint (3 maquettes fixes : 1440/834/390)
 * theme.json ne porte que les tailles desktop ; on redéfinit ici les
 * custom properties générées par WordPress pour la tablette et le mobile.
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	:root {
		--wp--preset--font-size--display: 56px;
		--wp--preset--font-size--h-1: 44px;
		--wp--preset--font-size--h-2: 36px;
		--wp--preset--font-size--h-3: 28px;
		--wp--preset--font-size--h-4: 22px;
		--wp--preset--font-size--h-5: 18px;
		--wp--preset--font-size--lead: 18px;
		--wp--preset--font-size--h-1-light: 48px;
		--wp--preset--font-size--h-2-light: 45px;
	}
}

@media (max-width: 782px) {
	:root {
		--wp--preset--font-size--display: 40px;
		--wp--preset--font-size--h-1: 34px;
		--wp--preset--font-size--h-2: 28px;
		--wp--preset--font-size--h-3: 24px;
		--wp--preset--font-size--h-4: 20px;
		--wp--preset--font-size--lead: 17px;
		--wp--preset--font-size--h-1-light: 40px;
		--wp--preset--font-size--h-2-light: 40px;
	}
}

/*
 * Variante « Light » (Mona Sans Regular) : titres éditoriaux. Reste un
 * <h1>/<h2> sémantique, seul le poids change par rapport au style de base.
 * Ligne/lettres précises gérées par la classe de section (ex. quern-kontakt__title).
 */
.quern-text-light {
	font-weight: 400;
}

/* ------------------------------------------------------------------ *
 * Grille — lignes de colonnes visibles (signature du site)
 * UN SEUL calque pour toute la page (functions.php, hook wp_body_open),
 * pas un par section. position:absolute sur <body> (position:relative,
 * sans hauteur fixée) : s'étire automatiquement sur la hauteur réelle du
 * contenu. z-index bas — chaque section qui a son propre fond opaque
 * (CTA indigo, visuel placeholder ink…) le recouvre naturellement ; les
 * sections à fond clair n'ont PAS de background-color propre, pour que
 * ce calque reste visible à travers (cf. quern-build-brief.md : « les
 * traits traversent toute la page, derrière le contenu »).
 * ------------------------------------------------------------------ */

body {
	position: relative;
	--quern-grid-line-color: color-mix(in srgb, var(--wp--preset--color--divider) 70%, transparent);
}

/* Mode debug : ?grid-debug=1 repasse la variable de couleur en rouge plein — une seule source pour bordures + dégradé. */
body.quern-grid-debug {
	--quern-grid-line-color: red;
}

/*
 * z-index: 1, pas 0 — les halos/grain décoratifs (hero, CTA, footer) sont
 * eux-mêmes en z-index:0 et plus tardifs dans le DOM : à z-index égal, ils
 * peignaient PAR-DESSUS les lignes de grille, les rendant invisibles dans
 * ces zones colorées (bug confirmé le 2026-10-05). Les lignes doivent
 * rester au-dessus des halos, en dessous du vrai contenu (z-index: 2).
 */
.quern-grid-lines {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	max-width: var(--quern-max);
	margin-inline: auto;
}

/* En mode debug, passe au-dessus de tout (y compris les fonds opaques) pour vérifier l'alignement partout. */
body.quern-grid-debug .quern-grid-lines {
	z-index: 999;
	mix-blend-mode: difference;
}

/*
 * Chaque trait est un vrai élément positionné (pas un background-image en
 * dégradé répété) : 12 divs rendus par functions.php (quern_grid_lines()),
 * chacun avec --i réglé de 0 à 11 en ligne — un par bord gauche de colonne,
 * PAS de 13e trait de fermeture au bord droit du conteneur (retiré le
 * 2026-10-05 à la demande du client : avec 12 colonnes il n'y a que 11
 * gouttières, donc ce dernier segment était plus étroit que les autres —
 * sans ce trait, tous les segments visibles font colonne+gouttière).
 * `left` utilise EXACTEMENT le même calcul que .quern-cols/.quern-inset
 * (mêmes variables --quern-*), donc les deux systèmes ne peuvent plus
 * diverger — même moteur de layout, pas de rendu séparé « fond vs contenu »
 * (cause du bug du 2026-10-05 : « le fond bouge selon la taille d'écran »).
 */
.quern-grid-lines__line {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--quern-grid-line-color);
	left: calc(var(--quern-margin) + (var(--i) * (var(--quern-col) + var(--quern-gutter))));
}

/* 12 colonnes = 12 traits (i=0..11) ; 6 colonnes = 6 traits (i=0..5) ; 4 colonnes = 4 traits (i=0..3). */
@media (max-width: 1024px) {
	.quern-grid-lines__line:nth-child(n + 7) {
		display: none;
	}
}

@media (max-width: 782px) {
	.quern-grid-lines__line:nth-child(n + 5) {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Grille de mise en page — même rythme que l'overlay (12/6/4 colonnes).
 * .quern-cols = conteneur ; .quern-span-N = enfant occupant N colonnes
 * (desktop). Tout élément multi-colonnes du site DOIT utiliser cette
 * grille plutôt qu'un flex/pourcentage approximatif, pour tomber
 * exactement sur les lignes visibles du fond (cf. retour du 2026-10-03 :
 * "la grille du fond est la base de mise en page de tout le site").
 * ------------------------------------------------------------------ */

/*
 * padding-inline = marge de la grille (80/48/24), EXACTEMENT comme
 * .quern-grid-lines::before, pour que le bord gauche de la colonne 1 et le
 * bord droit de la dernière colonne tombent sur les mêmes traits que le
 * calque décoratif. Max-width + margin:auto = même piste de contenu.
 * (Bug corrigé le 2026-10-03 : cette marge manquait entièrement, tout le
 * contenu touchait les bords de la section au lieu d'être inséré.)
 */
/*
 * position:relative + z-index:2 : sans ça, tout contenu non positionné
 * reste en dessous de .quern-grid-lines (z-index:1) quel que soit son ordre
 * dans le DOM — les traits le recouvrent (bug confirmé le 2026-10-05 sur
 * Vorgehen/Kundenlogos/Preise, qui n'avaient pas encore cette élévation).
 * .quern-cols et .quern-inset sont les deux seuls points d'entrée de la
 * grille dans le contenu : les élever ici couvre toute section qui les
 * utilise, sans avoir à le refaire section par section.
 */
.quern-cols {
	display: grid;
	grid-template-columns: repeat(var(--quern-cols-count), 1fr);
	column-gap: var(--quern-gutter);
	max-width: var(--quern-max);
	margin-inline: auto;
	padding-inline: var(--quern-margin);
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

.quern-span-4 { grid-column: span 4; }
.quern-span-6 { grid-column: span 6; }
.quern-span-7 { grid-column: span 7; }
.quern-span-8 { grid-column: span 8; }
.quern-span-12 { grid-column: span 12; }

/*
 * Grille "nue" : mêmes colonnes/gouttière que .quern-cols mais SANS marge
 * ni max-width — pour un conteneur déjà inséré via .quern-inset (sinon la
 * marge s'applique deux fois, cf. .quern-footer__top/__bottom qui vivent
 * dans .quern-footer__inner.quern-inset — bug confirmé le 2026-10-05).
 */
.quern-grid {
	display: grid;
	grid-template-columns: repeat(var(--quern-cols-count), 1fr);
	column-gap: var(--quern-gutter);
	position: relative;
	z-index: 2;
}

/*
 * Le texte touche exactement le trait de grille (pas de décalage) — c'est le
 * BOUTON qui déborde de 12px vers la gauche par rapport au texte (cf. brief,
 * composant Pill : « bleed optique 12px à gauche »). Confirmé par le
 * retour utilisateur du 2026-10-05 avec repère dessiné sur capture.
 * .quern-text-inset n'ajoute donc plus de décalage ; .quern-btn-bleed
 * porte le décalage négatif sur le bouton.
 */
.quern-text-inset {
	margin-left: 0;
}

/* !important : dans un conteneur flex (ex. CTA), WordPress génère sa propre règle
   de marge pour les enfants directs, de même spécificité — elle l'emportait selon l'ordre. */
.quern-btn-bleed {
	margin-left: -12px !important;
}

/*
 * Même marge que .quern-cols (80/48/24) mais sans colonnes — pour les blocs
 * pleine largeur hors grille (Vorgehen, Preise/Logos : kicker+titre avant
 * la grille proprement dite).
 */
.quern-inset {
	max-width: var(--quern-max);
	margin-inline: auto;
	padding-inline: var(--quern-margin);
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

/*
 * Par défaut, en dessous de 1024px tout repasse en pleine largeur (empilé) —
 * c'est le cas de Das Problem, Leistungen (ligne numérotée), CTA à la
 * tablette comme au mobile. Mais PAS Hero/Leistungen (texte+visuel) et
 * Drei Werte/Preise (3 cartes), qui gardent leur découpe en colonnes à la
 * tablette d'après le Figma tablette (239:6375) — overrides ci-dessous,
 * plus spécifiques, appliqués après cette règle générale.
 */
@media (max-width: 1024px) {
	.quern-span-4,
	.quern-span-6,
	.quern-span-7,
	.quern-span-8 {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ *
 * Boutons — variantes pilule (cf. quern-build-brief.md §2)
 * Enregistrées dans functions.php : is-style-dark / is-style-light.
 * ------------------------------------------------------------------ */

/* Sombre : fond ink 90%, texte blanc, ombre néomorphique. */
.wp-block-button.is-style-dark > .wp-block-button__link {
	background-color: var(--wp--custom--color--pill-dark-bg);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--pill-dark);
}

/* Clair : fond blanc cassé, texte sombre, ombre douce. */
.wp-block-button.is-style-light > .wp-block-button__link {
	background-color: var(--wp--custom--color--pill-light-bg);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--custom--shadow--pill-light);
}

/* Texte seul, sans pilule : lien indigo + flèche (ex. « Mehr erfahren » des cartes M07e). */
.wp-block-button.is-style-text > .wp-block-button__link {
	padding: 0;
	background-color: transparent;
	color: var(--wp--preset--color--indigo);
	font-size: var(--wp--preset--font-size--label);
	box-shadow: none;
}

/*
 * Flèche différente des boutons pilule : le Figma (162:2164) utilise une
 * flèche horizontale « → » dédiée (arrow-right.svg, déjà en indigo), pas la
 * flèche diagonale ↗ d'arrow-up-right.svg utilisée sur les pilules — retour
 * utilisateur du 2026-10-05 (« elles montrent vers le haut », la précédente
 * correction avait réutilisé la mauvaise icône, juste recolorée).
 */
.wp-block-button.is-style-text.has-arrow > .wp-block-button__link::after {
	width: 13px;
	height: 9px;
	background: url("../icons/arrow-right.svg") no-repeat center / contain;
}

/* Flèche ↗ après le libellé (lien sortant). Classe utilitaire « has-arrow ». */
.wp-block-button.has-arrow > .wp-block-button__link {
	display: inline-flex;
	align-items: flex-start;
	gap: 2px;
}

.wp-block-button.has-arrow > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: 0.2em;
	background: url("../icons/arrow-up-right.svg") no-repeat center / contain;
}

/* ------------------------------------------------------------------ *
 * En-tête — nav flottante (sticky) en verre, cf. brief « Q/Nav — glass »
 * .quern-header = <header> généré par le template-part.
 * ------------------------------------------------------------------ */

.quern-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/*
 * Le fond flouté est porté par un ::before, PAS par .quern-header lui-même :
 * backdrop-filter sur l'en-tête « piégerait » l'overlay du menu mobile
 * (position: fixed) à l'intérieur de la barre. Le ::before, lui, ne crée pas
 * ce blocage.
 */
.quern-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--custom--color--nav-bg);
	box-shadow: var(--wp--custom--shadow--nav);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

/* Repli si le navigateur ne sait pas flouter : fond opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.quern-header::before {
		background-color: var(--wp--preset--color--paper);
	}
}

/*
 * Logo de l'en-tête : SVG du Figma, inliné par le motif quern/logo (couleurs
 * pilotées par les tokens directement dans le fichier assets/img/logo.svg).
 */
.quern-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.quern-logo svg {
	display: block;
	height: 20px;
	width: auto;
}

/*
 * Desktop : logo 15 % plus grand (20 → 23 px) et bas du logo aligné sur la
 * ligne de base du texte du menu. Le lien-logo n'ayant pas de ligne de base
 * propre (c'est un SVG), le flex prend son bord bas comme ligne de base :
 * « align-items: baseline » aligne donc le bas du logo sur la ligne de base des liens.
 */
@media (min-width: 782px) {
	.quern-logo svg {
		height: 23px;
	}

	.quern-header .quern-header__bar {
		align-items: baseline;
	}
}

/*
 * Desktop : la barre est posée sur la même grille « pleine largeur avec piste
 * de contenu » que les sections. Le logo reste calé sur la marge gauche des
 * sections (content-start) ; la barre s'étend jusqu'au bord droit de l'écran
 * (full-end) moins 70 px, où vient se caler le bouton, dans le flux.
 * La barre contient trois éléments — logo, menu, bouton — répartis avec des
 * espaces égaux (space-between) : le menu est donc centré entre les deux.
 */
@media (min-width: 782px) {
	.quern-header__inner {
		display: grid;
		grid-template-columns:
			[full-start] minmax(var(--wp--custom--grid--margin-desktop), 1fr)
			[content-start] minmax(0, 1280px)
			[content-end] minmax(var(--wp--custom--grid--margin-desktop), 1fr) [full-end];
	}

	.quern-header__bar {
		grid-column: content-start / full-end;
		padding-right: 70px;
	}
}

/*
 * Mobile : le bloc n'est plus « constrained », on remet la marge latérale de
 * la grille mobile, et on retire le groupe du bouton (masqué de toute façon)
 * pour que le burger reste bien calé à droite avec seulement logo + burger.
 */
@media (max-width: 781.98px) {
	.quern-header__inner {
		padding-left: var(--wp--custom--grid--margin-mobile);
		padding-right: var(--wp--custom--grid--margin-mobile);
	}

	/* (0,2,0) pour battre le display:flex de la classe de layout WordPress. */
	.quern-header .quern-header__actions {
		display: none;
	}
}

/* Espace entre le menu (burger) et le bouton. */
.quern-header__actions {
	gap: var(--wp--preset--spacing--20);
}

/* Le bouton de la barre ne rétrécit jamais et son libellé ne se casse pas. */
.quern-header .quern-cta {
	flex: none;
}

.quern-header .quern-cta .wp-block-button__link {
	white-space: nowrap;
}

/*
 * Sur desktop : le menu s'affiche en ligne (liens horizontaux), sans burger.
 * Le bloc reste en overlayMenu:"always" pour conserver le comportement mobile
 * validé (burger jusqu'à 782px, et non 600px comme le ferait WordPress seul) ;
 * on « déplie » donc le conteneur nous-mêmes à partir de 782px.
 */
@media (min-width: 782px) {
	/* Burger et croix masqués. */
	.quern-nav .wp-block-navigation__responsive-container-open,
	.quern-nav .wp-block-navigation__responsive-container-close {
		display: none;
	}

	/* Le conteneur (overlay plein écran sur mobile) redevient un simple bloc en ligne. */
	.quern-nav .wp-block-navigation__responsive-container {
		display: block;
		position: static;
		width: auto;
		padding: 0;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
	}

	.quern-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close,
	.quern-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
		display: block;
		position: static;
		max-width: none;
		width: auto;
	}

	.quern-nav .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 0;
	}
}

/*
 * Sur mobile : la barre ne contient que le logo + le burger (conforme au Figma).
 * Le bouton d'appel à l'action (barre) n'apparaît qu'en desktop ; sur mobile
 * il est repris à l'intérieur du menu déplié (.quern-nav__cta).
 */
@media (max-width: 781.98px) {
	.quern-header .quern-cta {
		display: none;
	}
}

/* Menu mobile ouvert : items pleine largeur, grande cible tactile, sans filet séparateur. */
.quern-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.quern-nav__cta) {
	width: 100%;
}

.quern-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.quern-nav__cta) .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--20);
	line-height: 1.4; /* plafond demandé : le texte du menu ne doit pas « respirer » plus que le corps de texte */
}

/* L'espace entre les entrées vient uniquement du padding ci-dessus, pas d'un gap flex additionnel. */
.quern-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	row-gap: 0;
}

/*
 * Dernière entrée du menu déplié : présentée comme le bouton sombre (cf. Figma).
 * Elle est masquée partout sauf dans le menu mobile ouvert.
 */
/* Spécificité (0,3,0) : bat .wp-block-navigation .wp-block-navigation-item{display:flex} du cœur,
   qui rendait l'entrée visible dès que le menu est déplié en ligne sur desktop. */
.quern-nav .wp-block-navigation-item.quern-nav__cta {
	display: none;
}

.quern-nav .wp-block-navigation__responsive-container.is-menu-open .quern-nav__cta {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
}

.quern-nav .wp-block-navigation__responsive-container.is-menu-open .quern-nav__cta .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: flex-start;
	gap: 2px;
	padding: 14px 24px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--pill-dark-bg);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--pill-dark);
}

.quern-nav .wp-block-navigation__responsive-container.is-menu-open .quern-nav__cta .wp-block-navigation-item__content::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-top: 0.2em;
	background: url("../icons/arrow-up-right.svg") no-repeat center / contain;
}

/* Coins bas arrondis + ombre douce quand l'en-tête flotte sur mobile (cf. Figma). */
@media (max-width: 781.98px) {
	.quern-header::before {
		border-bottom-left-radius: var(--wp--custom--radius--card);
		border-bottom-right-radius: var(--wp--custom--radius--card);
	}
}

/*
 * Menu mobile déplié : même traitement « flottant » que l'en-tête fermé
 * (fond translucide + flou + ombre + coins arrondis), pas un aplat opaque.
 * On ne passe pas par overlayBackgroundColor/overlayTextColor du bloc Navigation
 * car WordPress applique ces couleurs avec !important — impossible à rendre
 * translucide par-dessus. On stylise donc directement le conteneur ouvert.
 */
.quern-nav .wp-block-navigation__responsive-container.is-menu-open {
	/* !important : bat la règle cœur WordPress .is-menu-open{background-color:#fff}
	   de même spécificité, qui gagnerait sinon selon l'ordre de chargement des styles. */
	background-color: var(--wp--custom--color--nav-bg) !important;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	color: var(--wp--preset--color--ink) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.quern-nav .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--paper) !important;
	}
}

@media (max-width: 781.98px) {
	.quern-nav .wp-block-navigation__responsive-container.is-menu-open {
		border-bottom-left-radius: var(--wp--custom--radius--card);
		border-bottom-right-radius: var(--wp--custom--radius--card);
	}
}

/*
 * <header>, <main> et <footer> sont trois blocs de premier niveau dans
 * front-page.html et page.html. WordPress leur ajoute automatiquement un
 * espace de 20px entre chacun (blockGap racine du thème). On ne veut aucun
 * écart ici : le Hero doit toucher le bas de l'en-tête, et le pied de page
 * doit toucher le bas de la dernière section.
 */
.quern-header + main,
main + .quern-footer {
	margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * Pied de page — Q/Footer
 * .quern-footer = <footer> généré par le template-part.
 * ------------------------------------------------------------------ */

.quern-footer {
	position: relative;
	/* z-index 1 + fond opaque : le pied de page recouvre les traits de grille globaux (comme .quern-kontakt) — pas de lignes dans le footer. */
	z-index: 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--paper);
}

/* 3 halos « Prisme » (cf. Figma 107:1285), discrets sur le fond clair. */
/*
 * Le conteneur .quern-footer__halos est dans .quern-footer__inner (largeur max
 * 1440 centrée) : sur écran plus large, le halo s'arrêtait donc au bord de
 * cette boîte, laissant une bande de fond nue à droite. Les halos sont
 * désormais portés par .quern-footer::before (le grain est au-dessus, sur ::after) (toute la largeur du footer).
 */
.quern-footer__halos {
	display: none;
}

/* 3 halos « Prisme » (cf. Figma 107:1285), ancrés au bord droit du footer quelle que soit la largeur d'écran. */
.quern-footer::before {
	content: "";
	position: absolute;
	inset: 0 -160px -140px 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle 460px at calc(100% - 200px) 82%, color-mix(in srgb, var(--wp--custom--color--prisme-blue) 35%, transparent) 0%, transparent 100%),
		radial-gradient(circle 420px at calc(100% - 340px) 52%, color-mix(in srgb, var(--wp--custom--color--prisme-purple) 30%, transparent) 0%, transparent 100%),
		radial-gradient(circle 400px at calc(100% - 240px) 108%, color-mix(in srgb, var(--wp--custom--color--prisme-red) 25%, transparent) 0%, transparent 100%);
	filter: blur(40px);
	/* fondu en haut : pas de bord net de couleur contre la section précédente. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--wp--preset--color--ink) 180px);
	mask-image: linear-gradient(to bottom, transparent 0, var(--wp--preset--color--ink) 180px);
}

.quern-footer__inner {
	position: relative;
	z-index: 2;
	/* Figma 98:498 : logo à y=100, filet à y=392, copyright à y=414, pied à y=470 (le footer en prod faisait ~337px : tout était tassé). */
	padding-top: 100px !important;
	padding-bottom: 36px !important;
}

/* Logo : même SVG que l'en-tête, 45px de haut dans le Figma du footer. */
.quern-footer .quern-logo svg {
	height: 45px;
}

.quern-footer__top {
	row-gap: var(--wp--preset--spacing--40);
	/* du haut du logo (y=100) au filet (y=392) */
	min-height: 292px;
	align-content: start;
}

.quern-footer__tagline {
	max-width: 410px;
	color: var(--wp--preset--color--secondary);
}

/* Span 2, auto-placées après le span-6 de .quern-footer__brand : démarrent donc aux colonnes 7/9/11 (cf. commentaire PHP). */
.quern-footer__col {
	grid-column: span 2;
}

.quern-footer__links {
	gap: var(--wp--preset--spacing--10) !important;
}

.quern-footer__links a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.quern-footer__links a:hover {
	text-decoration: underline;
}

/* !important : bat la règle cœur .wp-block-separator:not(.is-style-wide){width:100px} — oubli lors de la construction du footer (retour utilisateur du 2026-10-05). */
.quern-footer__divider {
	width: 100% !important;
	border-top-color: var(--wp--preset--color--ink);
	margin: 0;
}

.quern-footer__bottom {
	align-items: center;
	margin-top: 22px !important;
}

.quern-footer__copyright {
	color: var(--wp--preset--color--secondary);
	margin: 0;
}

.quern-footer__legal {
	gap: var(--wp--preset--spacing--20);
}

.quern-footer__legal p {
	margin: 0;
}

.quern-footer__legal a {
	color: var(--wp--preset--color--ink);
}

/* Mobile : .quern-footer__top/__bottom restent des grilles (.quern-cols) mais tout repasse en pleine largeur, empilé. */
@media (max-width: 781.98px) {
	.quern-footer__brand,
	.quern-footer__col {
		grid-column: 1 / -1;
		align-self: start;
		justify-self: start;
	}

	.quern-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--10);
	}
}

/* ------------------------------------------------------------------ *
 * Startseite — Hero
 * .quern-hero = <section> du motif quern/hero.
 * ------------------------------------------------------------------ */

/*
 * Pas de background-color propre : laisse les lignes de grille (calque
 * global) visibles à travers. overflow-x:hidden (pas overflow tout court) :
 * le halo doit rester clippé à droite (sinon le "right:-12%" du halo élargit
 * toute la page de 12% — bug corrigé le 2026-10-03, visible par la barre de
 * défilement horizontale) mais peut continuer à déborder verticalement vers
 * la section suivante (cf. demande du 2026-10-03 sur le fondu du halo).
 */
.quern-hero {
	position: relative;
	overflow-x: clip;
}

/*
 * Halos décoratifs (cf. brief §5/§6 A2 ; Figma 80:472/80:473) : 2 cercles
 * flous, toujours ancrés au coin supérieur droit (bord droit, border-radius
 * 50%, "right" négatif pour déborder du cadre) quelle que soit la largeur —
 * pas des pourcentages de dégradé qui dérivent vers le centre. Statiques
 * pour l'instant (la dérive lente A2 est une animation différée).
 */
/*
 * Pas de overflow:hidden ici : le halo doit pouvoir déborder visuellement
 * sous le hero, dans le haut de la section suivante (quern-problem n'a pas
 * de fond opaque, donc le halo continue de se voir à travers) — effet de
 * fondu continu entre les deux sections plutôt qu'une coupe nette.
 *
 * max-width/margin en !important : la section est en layout "constrained"
 * (WordPress applique automatiquement max-width + margin:auto à TOUS ses
 * enfants directs pour les aligner sur la largeur de contenu) — sans ce
 * reset, le calque de halos se retrouvait lui-même limité à 1280px et centré
 * au lieu de couvrir toute la largeur de la section jusqu'au bord droit.
 */
.quern-hero__halos {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none !important;
	margin: 0 !important;
	pointer-events: none;
}

.quern-hero__halos::before,
.quern-hero__halos::after {
	content: "";
	position: absolute;
	right: -12%;
	border-radius: 50%;
	aspect-ratio: 1;
	filter: blur(90px);
}

.quern-hero__halos::before {
	top: -25%;
	width: 55%;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--indigo) 45%, transparent) 0%, transparent 80%);
}

.quern-hero__halos::after {
	top: 12%;
	right: -2%;
	width: 42%;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--violet) 40%, transparent) 0%, transparent 80%);
}

/*
 * row-gap (PAS le raccourci `gap`) : .quern-hero__row est un conteneur
 * `.quern-cols` (grille), dont le `column-gap` doit rester la vraie
 * gouttière de la grille (--quern-gutter) pour que `grid-column:9/13` (le
 * visuel) tombe exactement là où le Figma le place (vérifié : x=949.33).
 * Le raccourci `gap` écrasait ce column-gap avec 40px, décalant le visuel
 * de ~11px vers la droite (retour utilisateur du 2026-10-05).
 */
.quern-hero__row {
	position: relative;
	z-index: 2;
	align-items: flex-start;
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--40);
}

/* Texte = colonnes 1-8, visuel = colonnes 9-12 (cf. grille, même rythme que Leistungen). */
.quern-hero__content {
	grid-column: span 8;
	min-width: 0;
}

/*
 * Plus d'air avant la rangée de boutons que le reste du rythme (30px entre
 * kicker/titre/texte) — le texte respire, les CTA ne doivent pas coller.
 * Décalage -12px : le bouton déborde à gauche du texte (cf. .quern-btn-bleed
 * plus haut — confirmé par repère dessiné sur capture, 2026-10-05).
 */
.quern-hero__actions {
	margin-top: var(--wp--preset--spacing--20);
	margin-left: -12px;
}

.quern-hero__visual {
	grid-column: 9 / 13;
}

/* Tablette (6 colonnes) : texte = 4 colonnes, visuel = 2 colonnes (cf. Figma 250:2310, frame tablette). */
@media (max-width: 1024px) and (min-width: 783px) {
	.quern-hero__content {
		grid-column: span 4;
	}

	.quern-hero__visual {
		grid-column: span 2;
	}
}

@media (max-width: 782px) {
	.quern-hero__content,
	.quern-hero__visual {
		grid-column: 1 / -1;
	}
}


/*
 * Le titre du hero est un <h1> mais utilise la taille/interligne/lettres du
 * style « Display » (72/56/40 SemiBold), pas celles du style H1 — c'est ainsi
 * que le Figma le définit (annotation « Desktop/Display » sur ce calque).
 */
/*
 * Pas de max-width en px ici : le texte remplit naturellement sa colonne de
 * grille (8/12, déjà plus étroite que la page). Un max-width fixe + le
 * margin-left:12px pouvait dépasser la largeur réelle de la colonne selon
 * la largeur d'écran — et comme le hero est en overflow-x:clip (pour le
 * halo), le texte en trop était coupé net au lieu de passer à la ligne.
 */
.quern-hero__title {
	margin-top: var(--wp--preset--spacing--20);
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: var(--wp--custom--letter-spacing--display);
}

.quern-hero__lead {
	margin-left: 0 !important;
	margin-right: 0 !important;
	color: var(--wp--preset--color--secondary);
}

/*
 * Visuel hero : PLACEHOLDER tant que le rendu 3D définitif n'est pas livré
 * (cf. brief #2 — ne jamais remplacer par du faux contenu). Reprend le
 * traitement du calque « Hero visual — PLACEHOLDER » du Figma : boîte ink
 * arrondie 12px, texte du repère en paper, PAS les images de démo du calque.
 */
.quern-hero__visual {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 320px;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
	padding: var(--wp--preset--spacing--20);
}

@media (min-width: 782px) {
	.quern-hero__visual {
		min-height: 480px;
	}
}

/* ------------------------------------------------------------------ *
 * Style « Eyebrow » / « Kicker » (surtitre Fraunces Italic)
 * Enregistré dans functions.php. Un seul style sur tout le site.
 * ------------------------------------------------------------------ */

.is-style-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces-italic);
	font-style: italic;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: var(--wp--custom--line-height--eyebrow);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------------------------ *
 * Style « Légende » (is-style-caption) — Mona Sans Medium 12 MAJUSCULES.
 * Le brief retire explicitement les capitales bleues de l'ancien design.
 * ------------------------------------------------------------------ */

.is-style-caption {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--caption);
	text-transform: uppercase;
}

/* Styles de paragraphe additionnels (échelle du brief). */
.is-style-lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: var(--wp--custom--line-height--lead);
}

.is-style-small {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--small);
}

.is-style-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--label);
}

/* ------------------------------------------------------------------ *
 * M03 · Hero statement (sous-pages internes : Leistungen, Anwendungsfälle…)
 * .quern-m03 = <section> du motif quern/m03-hero-statement. Figma 99:486.
 * ------------------------------------------------------------------ */

.quern-m03 {
	position: relative;
	overflow-x: clip;
}

.quern-m03__halos {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none !important;
	margin: 0 !important;
	pointer-events: none;
}

.quern-m03__halos::before,
.quern-m03__halos::after {
	content: "";
	position: absolute;
	right: -8%;
	border-radius: 50%;
	aspect-ratio: 1;
	filter: blur(90px);
}

.quern-m03__halos::before {
	top: -30%;
	width: 57%;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--violet) 40%, transparent) 0%, transparent 80%);
}

.quern-m03__halos::after {
	top: 2%;
	right: 0%;
	width: 30%;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--custom--color--prisme-blue) 40%, transparent) 0%, transparent 80%);
}

.quern-m03__row {
	align-items: start;
}

/* Fil d'Ariane = colonnes 1-3 (vérifié Figma : largeur 302px = 3 colonnes + 2 gouttières). */
.quern-m03__breadcrumb {
	grid-column: span 3;
	margin: 0;
}

/* Titre + intro = colonnes 4-12 (vérifié Figma : x=406 = ligne de grille index 3, largeur 954px = 9 colonnes + 8 gouttières). */
.quern-m03__content {
	grid-column: 4 / 13;
	min-width: 0;
}

.quern-m03__statement {
	margin: 0;
}

.quern-m03__word-muted {
	color: var(--wp--preset--color--secondary);
}

.quern-m03__word-ghost-25 {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent);
}

.quern-m03__word-ghost-40 {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent);
}

/* Fil d'Ariane à 2 niveaux (ex. "Leistungen / Strategie & Positionierung") : le segment parent est en secondary, la page courante reste en ink (couleur par défaut du caption). */
.quern-m03__crumb-muted {
	color: var(--wp--preset--color--secondary);
}

.quern-m03__intro {
	max-width: 737px;
}

@media (max-width: 1024px) {
	.quern-m03__breadcrumb {
		grid-column: span 6;
	}

	.quern-m03__content {
		grid-column: 1 / 7;
	}
}

@media (max-width: 781.98px) {
	.quern-m03__breadcrumb,
	.quern-m03__content {
		grid-column: 1 / -1;
	}

	.quern-m03__intro {
		max-width: none;
	}
}

/* ------------------------------------------------------------------ *
 * M05 — blocs texte des sous-pages Leistungen (Für wen / Was wir tun /
 * Leistungsumfang / Ergebnis / Weiter). Socle commun : titre colonne 1
 * (cols 1-4), contenu colonne 5-12 (x=514.67 = ligne de grille index 4,
 * vérifié Figma). Chaque module ajoute son propre contenu par-dessus ce
 * socle (patterns/m05-*.php).
 * ------------------------------------------------------------------ */

.quern-m05 {
	position: relative;
}

.quern-m05__title {
	grid-column: 1 / 5;
	margin: 0;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
}

.quern-m05__content {
	grid-column: 5 / 13;
	min-width: 0;
}

/* M05 · Weiter : titre + sous-titre groupés (le sous-titre n'existe que sur ce module). */
.quern-m05__title-group {
	grid-column: 1 / 5;
}

@media (max-width: 1024px) {
	.quern-m05__title,
	.quern-m05__title-group {
		grid-column: 1 / 4;
	}

	.quern-m05__content {
		grid-column: 4 / 7;
	}
}

@media (max-width: 781.98px) {
	.quern-m05__title,
	.quern-m05__title-group,
	.quern-m05__content {
		grid-column: 1 / -1;
	}

	.quern-m05__title,
	.quern-m05__title-group {
		margin-bottom: var(--wp--preset--spacing--20);
	}
}

/* M05 · Für wen — titre + lead. */
.quern-m05__lead {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

/* M05 · Was wir tun — intro + grille 2 colonnes de bénéfices + clôture. */
.quern-m05__intro-text {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.quern-m05__benefits {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--quern-gutter);
}

@media (max-width: 781.98px) {
	.quern-m05__benefits {
		grid-template-columns: 1fr;
	}
}

.quern-m05__benefit {
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--divider);
	margin-top: 22px;
}

.quern-m05__benefit:first-child,
.quern-m05__benefit:nth-child(2) {
	margin-top: 0;
}

.quern-m05__benefit p {
	margin: 0;
	color: var(--wp--preset--color--secondary);
}

.quern-m05__outro {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--secondary);
}

/* M05 · Leistungsumfang — liste numérotée avec filets. */
.quern-m05__num-list {
	display: flex;
	flex-direction: column;
}

.quern-m05__num-item {
	display: flex;
	gap: 8px;
	padding: 22px 0;
	border-top: 1px solid var(--wp--preset--color--divider);
}

.quern-m05__num-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.quern-m05__num-item-index {
	flex: none;
	font-weight: 500;
	color: var(--wp--preset--color--indigo);
}

.quern-m05__num-item-text {
	color: var(--wp--preset--color--secondary);
}

/* M05 · Ergebnis — lead + encart exemple. */
.quern-m05__example {
	margin-top: 44px;
}

.quern-m05__example-name {
	margin: 0 0 12px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.quern-m05__example-text {
	margin: 0;
	color: var(--wp--preset--color--secondary);
}

/* M05 · Weiter — sous-titre + 2 lignes d'offres + pills de tags. */
.quern-m05__weiter-sub {
	margin: var(--wp--preset--spacing--10) 0 0;
	max-width: 302px;
	color: var(--wp--preset--color--secondary);
}

.quern-m05__offer {
	padding: 22px 0;
	border-top: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--secondary);
}

.quern-m05__offer:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.quern-m05__offer-name {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.quern-m05__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-top: 22px;
}

.quern-m05__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--secondary);
	white-space: nowrap;
	text-decoration: none;
}

.quern-m05__tag svg {
	width: 10px;
	height: 7px;
}

/* L'icône arrow-right.svg a une couleur indigo codée en dur (pensée pour le lien "Mehr erfahren") — ici le pill est neutre (bordure ink, texte secondary), la flèche doit suivre currentColor, pas rester indigo. */
.quern-m05__tag svg path {
	stroke: currentColor;
}

.quern-m05__offer {
	display: block;
	text-decoration: none;
}

/* M05 · Systeme, die wir kennen — grille de 26 logos (5 colonnes desktop). */
.quern-m05__systems-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 20px;
	row-gap: 16px;
}

.quern-m05__sys-card {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 80px;
}

.quern-m05__sys-icon {
	display: flex;
	flex: none;
	align-items: center;
}

.quern-m05__sys-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1024px) {
	.quern-m05__systems-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 781.98px) {
	.quern-m05__systems-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.quern-m05__sys-card {
		height: auto;
		padding: var(--wp--preset--spacing--10) 0;
	}
}

/* ------------------------------------------------------------------ *
 * M06 — Anwendungen (sous-pages Anwendungsfälle). Liste numérotée
 * titre+texte, filets ink (pas le gris --divider des autres listes M05 :
 * rythme plus marqué, cf. Figma 101:881).
 * ------------------------------------------------------------------ */

.quern-m06__sub {
	margin: var(--wp--preset--spacing--10) 0 0;
	max-width: 302px;
	color: var(--wp--preset--color--secondary);
}

.quern-m06__list {
	display: flex;
	flex-direction: column;
}

.quern-m06__item {
	padding: 20px 0;
	border-top: 1px solid var(--wp--preset--color--ink);
}

.quern-m06__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.quern-m06__item-num {
	display: block;
	margin-bottom: 4px;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	color: var(--wp--preset--color--indigo);
}

.quern-m06__item-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--ink);
}

.quern-m06__item-text {
	margin: 8px 0 0;
	color: var(--wp--preset--color--secondary);
}

/* M05 · Beispiel (sous-pages Anwendungsfälle) — cas concret + schéma de flux optionnel en pilules. */
.quern-m05--beispiel__item-title {
	margin: 0;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.quern-m05--beispiel__item-text {
	margin: 12px 0 0;
	color: var(--wp--preset--color--secondary);
}

.quern-m05--beispiel__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--20);
}

.quern-m05--beispiel__step {
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
	white-space: nowrap;
}

.quern-m05--beispiel__arrow {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

.quern-m05--beispiel__placeholder {
	margin-top: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
}

/* Mention légale réelle (ex. AI Act) — pas un PLACEHOLDER malgré le nom du layer Figma, cf. inc/m05-beispiel-render.php. */
.quern-m05--beispiel__note {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------------ *
 * M12 — Référenzen (sous-pages Leistungen/Anwendungsfälle). Kicker+titre
 * pleine largeur, 2 cartes en quinconce (visuel PLACEHOLDER ink+grain,
 * titre, label Ziel·Ergebnis, texte). .quern-m12 = <section> du motif
 * quern/m12-referenzen-*.
 * ------------------------------------------------------------------ */

.quern-m12__grid {
	position: relative;
	z-index: 1;
	margin-top: var(--wp--preset--spacing--40);
}

.quern-m12__ref {
	grid-column: span 6;
}

.quern-m12__ref--2 {
	margin-top: 96px;
}

.quern-m12__image {
	position: relative;
	height: 460px;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--ink);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--20);
}

.quern-m12__image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/grain.webp");
	background-size: var(--quern-grain-size);
	opacity: var(--quern-grain-opacity);
	mix-blend-mode: overlay;
	pointer-events: none;
}

.quern-m12__image-label {
	position: relative;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--paper);
	opacity: 0.6;
}

.quern-m12__ref-title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--ink);
}

.quern-m12__ref-label {
	margin: var(--wp--preset--spacing--10) 0 0;
}

.quern-m12__ref-text {
	margin: var(--wp--preset--spacing--10) 0 0;
	max-width: 520px;
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 1024px) {
	.quern-m12__ref {
		grid-column: span 3;
	}

	.quern-m12__ref--2 {
		margin-top: 48px;
	}
}

@media (max-width: 781.98px) {
	.quern-m12__ref {
		grid-column: 1 / -1;
	}

	.quern-m12__ref--2 {
		margin-top: var(--wp--preset--spacing--40);
	}

	.quern-m12__image {
		height: 320px;
	}
}

/* M05 — variante 2 colonnes de .quern-m05__num-list (pages avec 6-11 items répartis sur 2 colonnes, ex. KI & Automatisierung). */
.quern-m05__num-list--2col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--quern-gutter);
}

.quern-m05__num-list--2col .quern-m05__num-item {
	border-top: none;
}

.quern-m05__num-list--2col .quern-m05__num-item:nth-child(-n+2) {
	padding-top: 0;
}

.quern-m05__num-list--2col::before {
	content: "";
	grid-column: 1 / -1;
	border-top: 1px solid var(--wp--preset--color--divider);
}

@media (max-width: 781.98px) {
	.quern-m05__num-list--2col {
		grid-template-columns: 1fr;
	}
}

/* M05 · Daten & Vertraulichkeit réutilise .quern-m05__offer sur un <div> (pas un lien) : même mise en page, pas de soulignement à annuler. */
.quern-m05__offer-list .quern-m05__offer {
	color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------------------------ *
 * M07c — Anwendungsbereiche : variante de Vier Felder (M07e) à 3 colonnes,
 * hauteur de carte libre (pas de hauteur fixe commune), 6e carte avec lien
 * au lieu de tags. .quern-m07c = <section> du motif quern/m07c-anwendungsbereiche.
 * ------------------------------------------------------------------ */

/*
 * Mise en page = Figma 132:1915 : 3 cartes de 4 colonnes par rangée, rangées de
 * 317px puis 287px, gouttière 24px, padding 33/26,5/30 ; icône dont le BAS est
 * aligné à y=66,5 (tailles propres à chaque SVG), titre à 86,5, texte à 125,5,
 * pills à ~16px sous le texte. Les règles .quern-vierfelder__card (plus bas dans
 * le fichier) forcent span 6 / SVG 33×33 : on les surcharge par spécificité.
 */
.quern-m07c .quern-vierfelder__head {
	/* le bloc décor placé avant le head lui fait perdre le « premier enfant » : le blockGap racine ajoutait 20px au-dessus du kicker. */
	margin-top: 0;
}

.quern-m07c .quern-vierfelder__head h2 {
	max-width: 845px;
	margin: 14px 0 0;
	line-height: 1.08;
}

.quern-m07c__intro {
	margin: 9px 0 0;
	max-width: 628px;
}

.quern-m07c .quern-m07c__grid.quern-cols {
	margin-top: var(--wp--preset--spacing--50);
	row-gap: var(--quern-gutter);
}

.quern-m07c .quern-m07c__card {
	grid-column: span 4;
	box-sizing: border-box;
	min-height: 287px;
	padding: 29px 26.5px 30px;
}

.quern-m07c .quern-m07c__card:nth-child(-n + 3) {
	min-height: 317px;
}

.quern-m07c__icon {
	display: flex;
	align-items: flex-end;
	height: 37.5px;
}

.quern-m07c__icon svg {
	display: block;
	width: auto;
	height: auto;
}

.quern-m07c__card-title {
	margin: 20px 0 0;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

.quern-m07c__card-text {
	margin: 9px 0 0;
	line-height: 1.6;
	color: var(--wp--preset--color--secondary);
}

.quern-m07c__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-top: 16px;
}

.quern-m07c__tag-break {
	flex-basis: 100%;
	height: 0;
}

.quern-m07c__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 23px;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--indigo);
	text-decoration: none;
}

.quern-m07c__link svg {
	flex: none;
	width: 13px;
	height: 9px;
}

.quern-m07c__link svg path {
	stroke: currentColor;
}

/* « Cercle — Froid » (Figma 282:2925 / 282:2934) : 84,67px, la 1re posée sur le bord haut de la carte 3, la 2e sur le bord bas de la carte 4. */
.quern-m07c__orb {
	width: 85px;
	height: 85px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-sizing: border-box;
	opacity: 0.92;
}

.quern-m07c__orb--a {
	left: 1179px;
	top: calc(var(--wp--preset--spacing--70) + 232.67px);
	background-image: linear-gradient(135deg, var(--wp--preset--color--indigo) 0%, var(--wp--custom--color--prisme-purple) 71%);
	box-shadow: 0 14px 33px -10px rgba(141, 61, 145, 0.28);
}

.quern-m07c__orb--b {
	left: 311px;
	top: calc(var(--wp--preset--spacing--70) + 858.17px);
	background-image: linear-gradient(135deg, var(--wp--custom--color--prisme-blue) 0%, var(--wp--preset--color--indigo) 71%);
	box-shadow: 0 14px 33px -10px rgba(51, 48, 235, 0.28);
}

@media (max-width: 1024px) {
	.quern-m07c .quern-m07c__card {
		grid-column: span 3;
		min-height: 0;
	}

	.quern-m07c__orb {
		display: none;
	}
}

@media (max-width: 781.98px) {
	.quern-m07c .quern-m07c__card {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ *
 * M07d — Sechs Bereiche (Anwendungsfälle Hub). Fond ink, 6 cartes verre
 * sombre (bordure claire, badge, tags, lien « Zum Bereich »).
 * .quern-m07d = <section> du motif quern/m07d-sechs-bereiche. Ambiance
 * lumineuse reproduite en radial-gradient (pas les 5 ellipses Figma
 * exactes, approximation visuelle suffisante — même logique que
 * .quern-kontakt__grain pour le grain).
 * ------------------------------------------------------------------ */

.quern-m07d {
	position: relative;
	overflow: hidden;
	background-image:
		radial-gradient(ellipse 900px 600px at 85% -10%, color-mix(in srgb, var(--wp--custom--color--prisme-blue) 55%, transparent) 0%, transparent 70%),
		radial-gradient(ellipse 900px 600px at 55% -5%, color-mix(in srgb, var(--wp--preset--color--violet) 45%, transparent) 0%, transparent 70%),
		radial-gradient(ellipse 900px 600px at 70% 60%, color-mix(in srgb, var(--wp--preset--color--violet) 40%, transparent) 0%, transparent 70%),
		radial-gradient(ellipse 900px 600px at -5% 95%, color-mix(in srgb, var(--wp--custom--color--prisme-blue) 35%, transparent) 0%, transparent 70%);
	/* Module sombre : il recouvre les traits de grille globaux (z-index 3 : au-dessus des traits globaux ET des halos qui débordent d'un module clair voisin, ex. Farbfeld) — aucun trait visible sur fond ink. */
	z-index: 3;
}

.quern-m07d__grain {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../img/grain.webp");
	background-size: var(--quern-grain-size);
	background-repeat: repeat;
	opacity: var(--quern-grain-opacity);
	mix-blend-mode: overlay;
}


.quern-m07d__intro,
.quern-m07d__grid {
	position: relative;
	z-index: 1;
}

.quern-m07d__kicker {
	color: var(--wp--preset--color--paper);
}

.quern-m07d__title {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 600;
}

.quern-m07d__lead {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--paper);
	max-width: 628px;
}

.quern-m07d__grid.quern-cols {
	grid-template-columns: repeat(3, 1fr);
}

.quern-m07d__grid {
	margin-top: var(--wp--preset--spacing--40);
	row-gap: var(--quern-gutter);
}

.quern-m07d__card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--wp--custom--radius--card);
	background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 71.429%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1), inset 0 0 24px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.quern-m07d__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10);
}

.quern-m07d__icon svg {
	display: block;
}

.quern-m07d__badge {
	flex: none;
	padding: 5px 10px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.88px;
	text-transform: uppercase;
	white-space: nowrap;
}

.quern-m07d__card-title {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 700;
}

.quern-m07d__card-text {
	margin: 12px 0 0;
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
}

.quern-m07d__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--20);
}

.quern-m07d__tag {
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--paper);
	white-space: nowrap;
}

.quern-m07d__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	text-decoration: none;
}

.quern-m07d__link svg {
	width: 13px;
	height: 9px;
}

.quern-m07d__link svg path {
	stroke: var(--wp--preset--color--paper);
}

@media (max-width: 1024px) {
	.quern-m07d__grid.quern-cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781.98px) {
	.quern-m07d__grid.quern-cols {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * M16b — Download (lead magnet PDF). Carte verre pleine largeur (bordure
 * quasi blanche, backdrop-blur, reflets internes identiques à la formule
 * .quern-vierfelder__card), sphère décorative « Cercle — Mer » (même
 * technique que .quern-preise__orb, agrandie), mockup de couverture PDF.
 * .quern-m16b = <section> du motif quern/m16b-download.
 * ------------------------------------------------------------------ */

/* La sphère est DERRIÈRE la carte de verre (frère, pas enfant) et dépasse au-dessus : la carte ne doit donc plus faire overflow:hidden (retour client du 2026-10-05). */
.quern-m16b__wrap {
	position: relative;
}

.quern-m16b__card {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border: 1.5px solid rgba(255, 255, 255, 0.95);
	border-radius: var(--wp--custom--radius--card);
	background-image: linear-gradient(163deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 71.429%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 8px 20px -6px rgba(20, 20, 36, 0.1), inset 0 0 24px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.quern-m16b__sphere {
	position: absolute;
	top: -76px;
	right: 180px;
	z-index: 0;
	width: 217px;
	height: 217px;
	border-radius: 50%;
	background-image: linear-gradient(135deg, var(--wp--custom--color--prisme-blue) 0%, var(--wp--preset--color--indigo) 71%);
	box-shadow: 0 23px 48px -10px rgba(51, 48, 235, 0.28);
	pointer-events: none;
}

.quern-m16b__sphere::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 40%);
}

.quern-m16b__text {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	max-width: 628px;
}

.quern-m16b__title {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 600;
}

.quern-m16b__lead {
	margin: var(--wp--preset--spacing--10) 0 0;
	color: var(--wp--preset--color--secondary);
}

.quern-m16b__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--20);
}

.quern-m16b__field {
	display: inline-flex;
	align-items: center;
	min-width: 260px;
	height: 54px;
	padding: 0 22px;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	color: var(--wp--preset--color--secondary);
}

.quern-m16b__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0 22px;
	background-color: var(--wp--custom--color--pill-dark-bg);
	color: var(--wp--preset--color--white);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	box-shadow: var(--wp--custom--shadow--pill-dark);
	white-space: nowrap;
}

.quern-m16b__btn svg {
	width: 13px;
	height: 9px;
}

.quern-m16b__btn svg path {
	stroke: var(--wp--preset--color--white);
}

.quern-m16b__cover {
	position: relative;
	z-index: 1;
	flex: none;
	width: 236px;
	height: 312px;
	padding: 24px;
	background-color: var(--wp--preset--color--ink);
	background-image:
		radial-gradient(circle at 10% 55%, rgba(208, 65, 65, 0.55) 0%, transparent 55%),
		radial-gradient(circle at 70% 75%, rgba(56, 150, 211, 0.5) 0%, transparent 55%);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 20px 40px -12px rgba(20, 20, 36, 0.35);
	transform: rotate(3deg);
	overflow: hidden;
}

.quern-m16b__cover-brand {
	margin: 0;
	color: var(--wp--preset--color--paper);
	font-weight: 700;
}

.quern-m16b__cover-num {
	position: absolute;
	left: 24px;
	bottom: 56px;
	margin: 0;
	color: var(--wp--preset--color--paper);
	font-size: 22px;
	line-height: 1.1;
}

.quern-m16b__cover-sub {
	position: absolute;
	left: 24px;
	bottom: 24px;
	right: 24px;
	margin: 0;
	color: var(--wp--preset--color--paper);
	opacity: 0.75;
	font-family: var(--wp--preset--font-family--fraunces-italic);
	font-style: italic;
	font-size: 13px;
}

@media (max-width: 1024px) {
	.quern-m16b__card {
		flex-wrap: wrap;
	}

	.quern-m16b__sphere {
		right: 40px;
	}
}

@media (max-width: 781.98px) {
	.quern-m16b__card {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	}

	.quern-m16b__sphere {
		display: none;
	}

	.quern-m16b__cover {
		align-self: center;
	}

	.quern-m16b__field,
	.quern-m16b__btn {
		width: 100%;
		justify-content: center;
	}
}

/* ------------------------------------------------------------------ *
 * M11b — FAQ (accordéon natif <details>/<summary>, pas de JS). Nav
 * catégories = ancres de page vers chaque groupe (#slug), pas un filtre.
 * .quern-m11b = <section> du motif quern/m11b-faq-ki.
 * ------------------------------------------------------------------ */

.quern-m11b__row {
	align-items: start;
}

.quern-m11b__aside {
	grid-column: 1 / 5;
	position: sticky;
	top: 110px;
}

.quern-m11b__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 600;
}

.quern-m11b__intro {
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 342px;
	color: var(--wp--preset--color--secondary);
}

.quern-m11b__nav {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin-top: 44px;
}

.quern-m11b__nav-item {
	padding-left: 12px;
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.quern-m11b__nav-item.is-active {
	border-left-color: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.quern-m11b__nav-item:hover {
	color: var(--wp--preset--color--ink);
}

.quern-m11b__content {
	grid-column: 5 / 13;
	min-width: 0;
}

.quern-m11b__group + .quern-m11b__group {
	margin-top: 44px;
}

.quern-m11b__group-name {
	margin: 0 0 14px;
}

.quern-m11b__item {
	border-top: 1px solid var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--20) 0;
}

.quern-m11b__item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.quern-m11b__item-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	list-style: none;
}

.quern-m11b__item-q::-webkit-details-marker {
	display: none;
}

.quern-m11b__item-q::after {
	content: "+";
	flex: none;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--terracotta);
}

.quern-m11b__item[open] .quern-m11b__item-q::after {
	content: "−";
}

.quern-m11b__item-a {
	margin: var(--wp--preset--spacing--10) 0 0;
	max-width: 628px;
	line-height: 1.65;
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 1024px) {
	.quern-m11b__aside {
		grid-column: 1 / 7;
		position: static;
	}

	.quern-m11b__content {
		grid-column: 1 / 7;
		margin-top: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 781.98px) {
	.quern-m11b__aside,
	.quern-m11b__content {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ *
 * Startseite — Das Problem (M19 · Typo)
 * .quern-problem = <section> du motif quern/das-problem.
 * ------------------------------------------------------------------ */

.quern-problem {
	position: relative;
}

.quern-problem__row {
	position: relative;
	z-index: 2;
	row-gap: var(--wp--preset--spacing--40);
}

/* Titre = colonnes 1-6, texte = colonnes 7-12 (Figma : ~628px chacune). */
.quern-problem__col {
	grid-column: span 6;
	min-width: 0;
}

@media (max-width: 1024px) {
	.quern-problem__col {
		grid-column: 1 / -1;
	}
}

.quern-problem__text p {
	color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------------------------ *
 * Startseite — Drei Werte
 * .quern-werte = <section> du motif quern/benefits.
 * ------------------------------------------------------------------ */

.quern-werte {
	position: relative;
}

.quern-werte__grid {
	position: relative;
	z-index: 2;
}

/* 3 colonnes = 4 colonnes de grille chacune (Figma : 410.67px = cols 1-4 / 5-8 / 9-12). */
.quern-werte__col {
	grid-column: span 4;
}

/* Tablette (6 colonnes) : reste 3 colonnes côte à côte, 2 colonnes de grille chacune (Figma 250:2342, pas empilé). */
@media (max-width: 1024px) and (min-width: 783px) {
	.quern-werte__col {
		grid-column: span 2;
	}
}

@media (max-width: 782px) {
	.quern-werte__col {
		grid-column: 1 / -1;
	}
}

/*
 * Icônes (SVG Figma inlinés, stroke indigo figé dans le fichier) : hauteur
 * optique ~50px, proportions naturelles conservées (pas de carré forcé — les
 * 3 icônes Drei Werte ont des ratios différents dans le Figma).
 */
.quern-werte__icon svg {
	display: block;
	width: auto;
	height: auto;
	max-height: 50px;
}

/*
 * Rythme régulier entre icône → kicker → titre → ligne → texte (~16px,
 * valeur Figma : écarts de 16-18px entre ces 4 éléments, cf. node 81:475).
 * La ligne sépare le titre du texte (pas de filet en haut de colonne).
 *
 * margin-top:0 sur tous les enfants : neutralise le blockGap automatique
 * que WordPress insère entre chaque bloc de la colonne (racine du thème),
 * qui s'ajoutait à nos marges explicites et doublait les écarts.
 */
.quern-werte__col > * {
	margin-top: 0;
}

/*
 * Hauteur fixe + alignement en bas : les 3 icônes ont des hauteurs
 * naturelles très différentes (49.5 / 37.5 / 23.5px) — sans ça, le reste de
 * chaque colonne (kicker, titre, ligne, texte) se décale verticalement
 * d'une colonne à l'autre au lieu de rester aligné sur la même hauteur.
 */
.quern-werte__icon {
	display: flex;
	align-items: flex-end;
	height: 50px;
	margin-bottom: 16px;
}

.quern-werte__eyebrow {
	display: block;
	margin-bottom: 8px;
}

.quern-werte__title {
	margin: 0;
}

/* !important : bat la règle cœur .wp-block-separator:not(.is-style-wide){width:100px}. */
/* calc(...) : laisse un peu d'air avant le bord de la colonne/la ligne de grille, le trait ne va pas jusqu'au bout. */
.quern-werte__divider {
	width: calc(100% - 24px) !important;
	border-top-color: var(--wp--preset--color--divider);
	margin: 16px 0;
}

.quern-werte__text {
	max-width: 340px;
	margin: 0 !important;
	color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------------------------ *
 * Startseite — Leistungen
 * .quern-leistungen = <section> du motif quern/leistungen (ex-features).
 * ------------------------------------------------------------------ */

.quern-leistungen {
	position: relative;
}

.quern-leistungen__row {
	position: relative;
	z-index: 2;
	row-gap: var(--wp--preset--spacing--40);
}

/* Texte = colonnes 1-7 (736px, largeur exacte du Figma) ; colonne 8 laissée vide ; visuel = colonnes 9-12. */
.quern-leistungen__col {
	grid-column: span 7;
	min-width: 0;
}

.quern-leistungen__visual {
	grid-column: 9 / 13;
}

/* Tablette (6 colonnes) : texte = 4 colonnes, visuel = 2 colonnes (même rythme que le hero). */
@media (max-width: 1024px) and (min-width: 783px) {
	.quern-leistungen__col {
		grid-column: span 4;
	}

	.quern-leistungen__visual {
		grid-column: span 2;
	}
}

@media (max-width: 782px) {
	.quern-leistungen__col,
	.quern-leistungen__visual {
		grid-column: 1 / -1;
	}
}

/*
 * margin-left/right en !important : `.quern-leistungen__col` est un enfant
 * direct d'un groupe en layout "constrained", qui centre automatiquement
 * (margin:auto !important) tout enfant dont le max-width devient inférieur
 * à la largeur réelle de la colonne — d'où le texte qui se décalait vers la
 * droite au lieu de rester aligné sous le titre.
 */
.quern-leistungen__sub {
	max-width: 680px;
	margin-left: 0 !important;
	margin-right: 0 !important;
	color: var(--wp--preset--color--secondary);
}

/* !important : bat la règle cœur .wp-block-separator:not(.is-style-wide){width:100px}. */
.quern-leistungen__divider {
	width: 100% !important;
	border-top: 1px solid var(--wp--preset--color--divider);
	margin: 0;
}

.quern-leistungen__item {
	border-top: 1px solid var(--wp--preset--color--divider);
	align-items: baseline;
	gap: 68px;
}

.quern-leistungen__num {
	flex: none;
	width: 24px;
	margin: 0;
	color: var(--wp--preset--color--indigo);
}

.quern-leistungen__item-title {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--h-6);
	font-weight: 700;
}

.quern-leistungen__item-desc {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* Visuel : PLACEHOLDER tant que le rendu définitif n'est pas livré (cf. brief #2). */
.quern-leistungen__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	border: 1px dashed var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--card);
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 4%, transparent);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	padding: var(--wp--preset--spacing--20);
}

@media (min-width: 782px) {
	.quern-leistungen__visual {
		min-height: 480px;
	}
}

/* ------------------------------------------------------------------ *
 * Startseite — Vorgehen (aperçu condensé, 5 étapes)
 * .quern-vorgehen = <section> du motif quern/how-it-works.
 * ------------------------------------------------------------------ */

/* !important : bat la règle cœur .wp-block-separator:not(.is-style-wide){width:100px}. */
.quern-vorgehen__divider {
	width: 100% !important;
	border-top-color: var(--wp--preset--color--divider);
	margin: 0;
}

/*
 * Les 5 étapes occupent toute la largeur du contenu (comme le filet
 * au-dessus), réparties à écart égal — pas une rangée de colonnes figées à
 * 200px qui restait groupée à gauche au lieu de suivre toute la grille.
 */
/* !important sur display : bat .is-layout-flex{display:flex} généré par WordPress (attribut layout du bloc). */
/*
 * PAS 5 colonnes égales : vérifié contre le Figma (node 90:497, fileKey
 * 0JfG4TmXfSEiAQqKO7R1nZ), les 5 étapes sont positionnées à gauche des
 * colonnes 1/3/5/7/9 de la grille 12 colonnes de la page (chaque étape =
 * grid-column: span 2), PAS réparties en 5 fractions égales de la largeur
 * totale. `repeat(5,1fr)` espaçait les étapes trop loin les unes des
 * autres (écart cumulatif : ~43px dès l'étape 2, ~171px à l'étape 5) — bug
 * confirmé par retour utilisateur du 2026-10-05 avec captures annotées.
 * Les colonnes 11-12 restent vides (le Figma ne les utilise pas ici).
 */
.quern-vorgehen__steps {
	display: grid !important;
	grid-template-columns: repeat(var(--quern-cols-count), 1fr);
	column-gap: var(--quern-gutter);
	align-self: stretch;
	width: 100%;
	position: relative;
	z-index: 2;
}

/* Pas de border-top ici : le trait .quern-vorgehen__divider au-dessus suffit déjà (sinon doublon). */
.quern-vorgehen__step {
	min-width: 0;
	grid-column: span 2;
}

@media (max-width: 781.98px) {
	.quern-vorgehen__steps {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--20);
	}
}

.quern-vorgehen__num {
	margin: 0;
	color: var(--wp--preset--color--indigo);
	line-height: var(--wp--custom--line-height--h3);
	letter-spacing: var(--wp--custom--letter-spacing--h3);
}

.quern-vorgehen__step h6 {
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Startseite — Kundenlogos (M22)
 * .quern-logos = <section> du motif quern/logo-cloud.
 * ------------------------------------------------------------------ */

.quern-logos__caption {
	margin: 0;
}

/* Mêmes marges que la grille visible (80/48/24), pour que la rangée démarre exactement sur la 1re ligne de colonne. */
.quern-logos__row {
	max-width: var(--wp--custom--grid--max-desktop);
	margin-inline: auto;
	padding-inline: var(--wp--custom--grid--margin-desktop);
	box-sizing: border-box;
	align-items: center;
	row-gap: var(--wp--preset--spacing--20);
}

@media (max-width: 1024px) {
	.quern-logos__row {
		max-width: var(--wp--custom--grid--max-tablet);
		padding-inline: var(--wp--custom--grid--margin-tablet);
	}
}

@media (max-width: 782px) {
	.quern-logos__row {
		max-width: var(--wp--custom--grid--max-mobile);
		padding-inline: var(--wp--custom--grid--margin-mobile);
	}
}

/* 4 logos = 3 colonnes de grille chacune (col 1, 4, 7, 10 en desktop, placement automatique). */
.quern-logos__item {
	grid-column: span 3;
	height: 96px;
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
}

/* Tablette (6 colonnes) : 2 logos par ligne, 3 colonnes chacun. Mobile (4 colonnes) : 1 par ligne, pleine largeur. */
@media (max-width: 782px) {
	.quern-logos__item {
		grid-column: 1 / -1;
	}
}

/*
 * Logos monochromes (fill ink #0A0A0A dans le SVG/PNG), ink 50% (cf. Figma).
 * object-position: left (pas le centrage par défaut de `contain`) : les
 * logos étroits (ex. Völl, ratio ~2:1 dans une cellule ~4,7:1) se
 * retrouvaient centrés avec un grand vide à gauche, visuellement décalés
 * de ~75px par rapport au trait de grille de leur colonne (retour
 * utilisateur du 2026-10-05).
 */
.quern-logos__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	opacity: 0.5;
}

@media (max-width: 781.98px) {
	.quern-logos__caption {
		padding-left: 16px;
		padding-right: 16px;
		text-align: center;
	}
}

/* ------------------------------------------------------------------ *
 * Verre (Glas) — base réutilisable (Preise, futures cartes M07c/d/e)
 * .quern-glass-card = carte individuelle. glass-cards.php en est la
 * démonstration d'origine ; projektgroessen.php (Preise) la réutilise.
 * ------------------------------------------------------------------ */

.quern-glass-card {
	position: relative; /* ancre un éventuel lien étiré (::after) sur toute la carte */
	background-image: var(--wp--custom--color--glass-bg);
	border: 1px solid var(--wp--custom--color--glass-border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--glass);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	transition: transform 0.3s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}

.quern-glass-card:hover {
	transform: scale(1.02);
}

.quern-glass-card__num {
	margin: 0;
	color: var(--wp--preset--color--indigo);
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--display);
}

/* Icône monochrome dans son cadre translucide (SVG Figma inlinés, fill = currentColor). */
.quern-glass-card__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 8px;
	box-sizing: border-box;
	background-image: var(--wp--custom--color--glass-bg);
	border: 1px solid var(--wp--custom--color--glass-border);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
}

.quern-glass-card__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.quern-glass-card__title {
	line-height: 1;
}

/*
 * Lien de la carte : le bouton garde sa taille normale, mais un calque
 * invisible (::after) l'étire sur toute la carte — cliquer n'importe où sur
 * la carte suit donc ce lien. Technique du « lien étiré » (stretched link).
 */
.quern-glass-card__link .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
}

/* ------------------------------------------------------------------ *
 * Startseite — Preise
 * .quern-preise = <section> du motif quern/projektgroessen.
 * 3 cartes verre (nom, divider, 5 lignes coche + item). Aucune carte
 * mise en avant par défaut (pas de « populaire » inventé, cf. brief A11).
 * ------------------------------------------------------------------ */

/*
 * 3 colonnes. Seule la première (« Ein Prozess ») est présentée en carte
 * verre (bordée, mise en valeur comme repère de départ) ; les deux autres
 * restent du texte nu, plus ouvert (cf. Figma node 90:510 — ce n'est pas
 * un badge « populaire », juste la mise en forme réelle du design).
 */
/* Écart = gouttière exacte de la grille (24px desktop), pour tomber sur les lignes du calque derrière. */
.quern-preise__grid {
	align-items: stretch;
	position: relative;
}

/* 3 colonnes = 4 colonnes de grille chacune (même rythme que Drei Werte). */
.quern-preise__tier {
	display: flex;
	flex-direction: column;
	position: relative;
	grid-column: span 4;
}

/* Tablette (6 colonnes) : reste 3 colonnes côte à côte, 2 colonnes de grille chacune (Figma 250:2517). */
@media (max-width: 1024px) and (min-width: 783px) {
	.quern-preise__tier {
		grid-column: span 2;
	}
}

@media (max-width: 782px) {
	.quern-preise__tier {
		grid-column: 1 / -1;
	}
}

/*
 * Carte 1 (« Ein Prozess ») : retour à l'effet verre doux générique
 * (.quern-glass-card) plutôt qu'un bord ink net — le contour noir franc
 * faisait plus « boîte » que « verre » (retour utilisateur du 2026-10-03).
 * Juste le padding propre à Preise en plus de la base .quern-glass-card.
 */
.quern-preise__tier.quern-glass-card {
	padding: var(--wp--preset--spacing--30);
}

.quern-preise__tier:not(.quern-glass-card) .quern-preise__name {
	color: var(--wp--preset--color--secondary);
}

.quern-preise__name {
	margin: 0;
}

/* !important : bat la règle cœur .wp-block-separator:not(.is-style-wide){width:100px}. */
.quern-preise__divider {
	width: 100% !important;
	border-top: 1px solid var(--wp--preset--color--divider);
	margin: var(--wp--preset--spacing--20) 0 0;
}

/*
 * « Cercle — Froid » (cf. Figma 282:2976) : sphère en verre dégradé bleu→
 * indigo, posée derrière le bas de la 1re carte.
 */
.quern-preise__orb {
	position: absolute;
	left: 18%;
	bottom: -12%;
	z-index: 0;
	width: 85px;
	height: 85px;
	border-radius: 50%;
	background-image: linear-gradient(135deg, #3896d3 0%, var(--wp--preset--color--indigo) 71%);
	box-shadow: 0 14px 33px -10px rgba(51, 48, 235, 0.45);
	pointer-events: none;
}

.quern-preise__orb::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%);
}

.quern-preise__row {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	align-items: flex-start;
	padding-block: var(--wp--preset--spacing--10);
}

.quern-preise__row p {
	margin: 0;
}

.quern-preise__check {
	flex: none;
	color: var(--wp--preset--color--indigo);
}

/* ------------------------------------------------------------------ *
 * Startseite — Q/CTA Indigo
 * .quern-kontakt = <section> du motif quern/kontakt-cta.
 * Fond sombre : voile + halo derrière le texte clair (cf. brief §5).
 * ------------------------------------------------------------------ */

/*
 * Fond : dégradé diffus continu indigo → violet/rose clair vers le bas-droit
 * (PAS des cercles distincts, cf. capture Figma réelle) + grain tramé
 * (assets/img/grain.webp, mix-blend-mode overlay, comme le hero/footer).
 * Texte aligné à gauche (pas centré).
 *
 * z-index: 1 (même niveau que .quern-grid-lines) : la grille ne doit PAS du
 * tout être visible sur ce module (retour utilisateur du 2026-10-05) — pas
 * seulement passer derrière le texte comme les autres sections. À z-index
 * identique, l'élément le plus tardif dans le DOM l'emporte ; cette section
 * vient après .quern-grid-lines (insérée juste après <body>), donc son fond
 * opaque recouvre entièrement les traits, contrairement aux sections à fond
 * clair qui doivent au contraire les laisser transparaître.
 */
.quern-kontakt {
	position: relative;
	z-index: 3;
	overflow: hidden;
	/* le kicker retombait à y=140 au lieu de 120 (Figma 98:488) */
	padding-top: calc(var(--wp--preset--spacing--70) - 20px) !important;
	background-image: linear-gradient(135deg,
		var(--wp--preset--color--indigo) 0%,
		var(--wp--preset--color--indigo) 45%,
		color-mix(in srgb, var(--wp--preset--color--violet) 70%, var(--wp--preset--color--indigo)) 75%,
		color-mix(in srgb, var(--wp--preset--color--terracotta) 55%, var(--wp--preset--color--violet)) 100%);
}

.quern-kontakt__grain {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: none !important;
	margin: 0 !important;
	pointer-events: none;
	/*
	 * background-size en petit (ex. 48px) forçait le navigateur à rééchantillonner
	 * l'image source (512×512) vers une tuile minuscule, ce qui LISSE tout le bruit
	 * haute fréquence en un gris presque uniforme — le grain redevenait invisible
	 * malgré une opacité correcte. À sa résolution native, le grain reste net.
	 */
	background-image: url("../img/grain.webp");
	background-size: var(--quern-grain-size);
	background-repeat: repeat;
	opacity: var(--quern-grain-opacity);
	mix-blend-mode: overlay;
}

.quern-kontakt__inner {
	position: relative;
	z-index: 2;
	text-align: left;
	align-items: flex-start !important;
}

.quern-kontakt__kicker,
.quern-kontakt__title,
.quern-kontakt__text {
	color: var(--wp--preset--color--white);
}

.quern-kontakt__kicker {
	opacity: 0.9;
}

.quern-kontakt__title {
	max-width: 954px;
	/* Figma 98:488 : kicker→titre 14px, titre→texte 28px (le tout était collé à 0). */
	margin: 12px 0 0 !important;
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--display);
}

.quern-kontakt__text {
	max-width: 628px;
	margin: 28px 0 0 !important;
	opacity: 0.82;
}

/*
 * Halo doux directement autour du bouton (« bleed optique », cf. brief —
 * composant Q/CTA Indigo), pas un halo de fond séparé.
 */
.quern-kontakt__btn .wp-block-button.is-style-dark > .wp-block-button__link {
	box-shadow: 0 10px 24px 0 rgba(13, 10, 77, 0.45), 0 0 36px 6px color-mix(in srgb, var(--wp--preset--color--indigo) 55%, var(--wp--preset--color--white) 20%);
}

@media (max-width: 781.98px) {
	/* Pas de bleed sur mobile : le bouton passe en pleine largeur, un décalage négatif le ferait déborder à droite. */
	.quern-kontakt__btn.quern-btn-bleed {
		margin-left: 0 !important;
	}

	.quern-kontakt__btn .wp-block-button,
	.quern-kontakt__btn .wp-block-button__link {
		width: 100%;
	}

	.quern-kontakt__btn .wp-block-button__link {
		justify-content: center;
	}
}

/* ------------------------------------------------------------------ *
 * Bandeau — Bild & Text (hors périmètre Phase 1, non inséré sur une page
 * live actuellement — laissé tel quel, pas de module Figma correspondant
 * sur la nouvelle Startseite).
 * ------------------------------------------------------------------ */

.quern-media-text {
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--wp--preset--spacing--40), 1fr)
		[content-start] minmax(0, 545px)
		[content-mid] minmax(0, 545px)
		[content-end] minmax(var(--wp--preset--spacing--40), 1fr) [full-end];
	align-items: stretch;
}

.quern-media-text__media {
	grid-column: full-start / content-mid;
}

.quern-media-text__image,
.quern-media-text__image img {
	display: block;
	margin: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quern-media-text__content {
	grid-column: content-mid / content-end;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding-left: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--divider);
}

@media (max-width: 781.98px) {
	.quern-media-text {
		display: block;
	}

	.quern-media-text__image img {
		aspect-ratio: 550 / 460;
		height: auto;
	}

	.quern-media-text__content {
		padding-left: 16px;
		padding-right: 16px;
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* ------------------------------------------------------------------ *
 * Bandeau — Format-Hinweis (hors périmètre Phase 1 — appartient à la
 * future page « Projekte & Preise », pas à la Startseite).
 * ------------------------------------------------------------------ */

.quern-format__title {
	line-height: 0.9;
}

/*
 * Colonne de lecture plus étroite que la largeur de contenu, pour ne pas
 * étirer un titre + un paragraphe courts sur toute la largeur de la page —
 * SANS toucher à la largeur ni à la marge du bloc lui-même.
 */
.quern-format__title,
.quern-format__text {
	box-sizing: border-box;
	padding-right: min(max(0px, calc(100% - 620px)), 470px);
}

/* ------------------------------------------------------------------ *
 * M07e · Vier Felder (Glas hell) — sous-pages internes.
 * .quern-vierfelder = <section> du motif quern/vier-felder. Figma 162:2143.
 * ------------------------------------------------------------------ */

/*
 * margin-top:-20px !important : un écart de 20px entre .quern-m03 et
 * .quern-vierfelder persistait malgré margin-top:0 confirmé par
 * getComputedStyle des deux côtés (padding/marge/overflow tous vérifiés à
 * 0 — cause non identifiée avec certitude, probablement le blockGap racine
 * de post-content appliqué par un mécanisme non visible dans les règles
 * CSS inspectées). Compensé directement ; si ce motif est un jour
 * réutilisé après une section qui n'a pas ce même écart invisible, revérifier.
 */
.quern-vierfelder {
	position: relative;
	margin-top: -20px !important;
}

/*
 * Conteneur centré (même piste que .quern-inset/.quern-cols : max-width +
 * margin-inline:auto) pour que les orbes se positionnent en px EXACTS comme
 * le reste du site, au lieu de pourcentages approximatifs qui les plaçaient
 * ~125px trop haut/à droite (retour utilisateur du 2026-10-05). `top` inclut
 * le padding-top de la section (spacing--70 = 120px) car les coordonnées
 * Figma (81px/214px) sont relatives au haut du cadre, comme le kicker.
 */
/*
 * z-index: 1 (pas 0) : les boules doivent rester AU-DESSUS des lignes de
 * grille (.quern-grid-lines, z-index:1 aussi — tranché par l'ordre DOM, ce
 * bloc venant après dans la page) mais EN DESSOUS des cartes (.quern-cols,
 * z-index:2), pour qu'elles se glissent derrière le coin de la carte
 * « Web & Plattformen » comme dans le Figma (retour utilisateur du
 * 2026-10-05 : « derrière la grille, alors qu'elles devraient être
 * au-dessus »).
 */
.quern-vierfelder__decor {
	position: absolute;
	inset: 0;
	z-index: 1;
	max-width: var(--quern-max);
	margin-inline: auto;
	pointer-events: none;
}

/* Mêmes « Cercle — Froid » que .quern-preise__orb (assets/css/sections.css). */
.quern-vierfelder__orb {
	position: absolute;
	border-radius: 50%;
}

.quern-vierfelder__orb::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%);
}

/*
 * Coordonnées Figma exactes (162:2143), relatives au haut de la section —
 * SANS ajouter le padding-top : la section n'en a plus (cf. commentaire
 * sur .quern-vierfelder plus haut, M03/M07e sont des cadres adjacents).
 * Oubli corrigé le 2026-10-05 : ce `calc(spacing--70 + …)` datait d'avant
 * ce changement et ajoutait encore 120px en trop, décalant les boules
 * trop bas.
 */
.quern-vierfelder__orb--lg {
	left: 1076px;
	top: 81px;
	width: 217px;
	height: 217px;
	background-image: linear-gradient(135deg, var(--wp--preset--color--indigo) 0%, var(--wp--custom--color--prisme-purple) 71%);
	box-shadow: 0 23px 48px -10px rgba(141, 61, 145, 0.28);
}

.quern-vierfelder__orb--sm {
	left: 1051px;
	top: 214px;
	width: 85px;
	height: 85px;
	background-image: linear-gradient(135deg, var(--wp--custom--color--prisme-blue) 0%, var(--wp--preset--color--indigo) 71%);
	box-shadow: 0 14px 33px -10px rgba(51, 48, 235, 0.28);
}

@media (max-width: 1024px) {
	.quern-vierfelder__orb--lg,
	.quern-vierfelder__orb--sm {
		display: none;
	}
}

/*
 * Le groupe du kicker/titre est en layout "flow" (pas flex/grid) : le
 * blockGap WordPress ne s'y applique pas comme un row-gap — sans ce reset,
 * le <h2> gardait la marge par défaut du navigateur (0.83em ≈ 36px au lieu
 * des ~14px du Figma, retour utilisateur du 2026-10-05).
 */
.quern-vierfelder__head h2 {
	margin: 14px 0 0;
}

/*
 * Pas de z-index ici : .quern-cols fournit déjà position:relative;z-index:2
 * (élévation au-dessus des traits de grille) — le redéclarer à une valeur
 * différente le casserait. row-gap = --quern-gutter (24px desktop), PAS
 * spacing--20 (20px) : vérifié contre le Figma, l'écart vertical entre les
 * 2 rangées de cartes est identique à l'écart horizontal entre colonnes.
 */
.quern-vierfelder__grid {
	row-gap: var(--quern-gutter);
}

/*
 * .quern-glass-card (base partagée) est trop subtile pour ce module précis :
 * sur le fond presque blanc de la page, son dégradé plat 55%→15% blanc +
 * backdrop-blur(40px) sans rien de coloré à flouter derrière restait
 * quasi invisible (retour utilisateur du 2026-10-05 : « pas d'effet
 * verre »). On surcharge ici avec les valeurs exactes du Figma (162:2148) :
 * bordure plus opaque, ombre plus marquée, et un reflet diagonal (::before)
 * + un liseré lumineux interne (box-shadow inset) qui donnent du relief
 * même sans arrière-plan coloré.
 */
.quern-vierfelder__card {
	grid-column: span 6;
	border-width: 1.5px;
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.95);
	/*
	 * background-image réduit à 8%→2% blanc (au lieu des 55%→15% de la base
	 * .quern-glass-card) : vérifié contre le Figma (162:2148), la carte
	 * elle-même est presque transparente — tout l'effet « verre » vient du
	 * backdrop-blur(20px) qui floute ce qu'il y a derrière (fond de page,
	 * traits de grille), pas d'un fond blanc opaque. Avec le fond opaque
	 * hérité, la carte paraissait plate et les ombres internes (ci-dessous)
	 * invisibles (retour utilisateur du 2026-10-05 : « il manque les
	 * ombres internes »).
	 */
	background-image: linear-gradient(152deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 71%);
	box-shadow: 0 8px 20px rgba(20, 20, 36, 0.1), inset 0 0 24px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	overflow: hidden;
}

.quern-vierfelder__card > * {
	position: relative;
}

.quern-vierfelder__icon {
	display: inline-block;
}

.quern-vierfelder__icon svg {
	display: block;
	width: 33px;
	height: 33px;
}

/*
 * Marges explicites, PAS de blockGap : le groupe de la carte est en layout
 * "flow" (wp:group type:flow), et le blockGap WordPress ne génère aucun
 * row-gap/margin réel pour ce type de layout dans ce thème — sans ces
 * marges, tous les éléments de la carte étaient collés les uns aux autres
 * (retour utilisateur du 2026-10-05 : « ça a l'air entassé »). Valeurs
 * reprises telles quelles du Figma (162:2148), PAS uniformes.
 */
.quern-vierfelder__micro {
	margin: 18px 0 0;
}

.quern-vierfelder__title {
	margin: 9px 0 0;
}

.quern-vierfelder__text {
	margin: 9px 0 0;
	color: var(--wp--preset--color--secondary);
}

.quern-vierfelder__tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 14px;
	gap: var(--wp--preset--spacing--10) !important;
}

.quern-vierfelder__link {
	margin-top: 29px !important;
}

.quern-vierfelder__tag {
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--secondary);
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.quern-vierfelder__card {
		grid-column: span 6;
	}
}

@media (max-width: 781.98px) {
	.quern-vierfelder__card {
		grid-column: 1 / -1;
	}
}

/* ================================================================== *
 * PHASE 3 — pages légales, Vorgehen, Projekte & Preise, Über Quern,
 * Kontakt, Blog. Tout est dérivé de la grille (.quern-cols) et des
 * tokens ; coordonnées Figma notées en commentaire quand elles ont
 * dicté une valeur.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Briques partagées — pill de catégorie (.quern-tag), bouton verre
 * (.quern-glass-btn), titre M05 en <h2>.
 * ------------------------------------------------------------------ */

.quern-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	white-space: nowrap;
}

.quern-tag.is-active {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

a.quern-tag:hover {
	color: var(--wp--preset--color--ink);
}

a.quern-tag.is-active:hover {
	color: var(--wp--preset--color--paper);
}

/* Pill « verre » (M21, M18) : fond blanc translucide + blur, texte blanc. */
.quern-glass-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 26px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 45%, transparent);
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
}

.quern-glass-btn svg {
	flex: none;
	width: 13px;
	height: 9px;
}

.quern-glass-btn svg path {
	stroke: currentColor;
}

h2.quern-m05__title {
	line-height: 1.25;
	letter-spacing: 0;
}

/* M05 « titre + texte » (inc/m05-text-render.php) — Laufender Betrieb, Woher wir kommen, Womit… */
.quern-m05__stack > * {
	margin: 0;
}

.quern-m05__stack .quern-m05__lead {
	max-width: 785px;
}

.quern-m05__body {
	max-width: 628px;
	line-height: 1.65;
	color: var(--wp--preset--color--secondary);
}

.quern-m05__stack .quern-m05__lead + .quern-m05__body {
	margin-top: 80px;
}

.quern-m05__body + .quern-m05__tags {
	margin-top: var(--wp--preset--spacing--20);
}

ul.quern-m05__tags--plain {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------ *
 * Pages légales — .quern-legal (inc/m05-legal-render.php). Titre en
 * colonne 1-4 (20 medium), contenu en colonne 5-12 : filet divider en
 * tête, lignes « Label : valeur » séparées par des filets, paragraphes.
 * ------------------------------------------------------------------ */

.quern-legal__title {
	font-size: var(--wp--preset--font-size--h-5);
	line-height: 1.3;
}

.quern-legal .quern-legal__content > * {
	margin: 0;
}

.quern-legal .quern-legal__kv {
	padding: 18px 0 17px;
	border-top: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--secondary);
}

.quern-legal .quern-legal__kv strong {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.quern-legal .quern-legal__p {
	max-width: 628px;
	margin-top: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--secondary);
}

.quern-legal .quern-legal__content > .quern-legal__p:first-child {
	margin-top: 0;
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--divider);
	max-width: none;
}

.quern-legal .quern-legal__content > .quern-legal__p:first-child {
	/* le texte reste à 628px même si le filet fait toute la colonne */
	padding-right: calc(100% - 628px);
}

@media (max-width: 1024px) {
	.quern-legal .quern-legal__content > .quern-legal__p:first-child {
		padding-right: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Vorgehen — M06 « Fünf Schritte » (fond ink). Même technique que M07d :
 * halos en radial-gradient, grain, second jeu de traits de grille clairs.
 * ------------------------------------------------------------------ */

.quern-m06fs {
	position: relative;
	overflow: hidden;
	background-image:
		radial-gradient(ellipse 80% 22% at 90% 0%, color-mix(in srgb, var(--wp--custom--color--prisme-blue) 50%, transparent) 0%, transparent 70%),
		radial-gradient(ellipse 60% 18% at 0% 18%, color-mix(in srgb, var(--wp--preset--color--violet) 45%, transparent) 0%, transparent 70%),
		radial-gradient(ellipse 50% 14% at 0% 40%, color-mix(in srgb, var(--wp--custom--color--prisme-purple) 40%, transparent) 0%, transparent 70%),
		radial-gradient(ellipse 70% 14% at 95% 66%, color-mix(in srgb, var(--wp--preset--color--violet) 40%, transparent) 0%, transparent 70%),
		radial-gradient(ellipse 60% 16% at 90% 92%, color-mix(in srgb, var(--wp--custom--color--prisme-blue) 40%, transparent) 0%, transparent 70%);
	z-index: 3;
}

.quern-m06fs__grain {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../img/grain.webp");
	background-size: var(--quern-grain-size);
	background-repeat: repeat;
	opacity: var(--quern-grain-opacity);
	mix-blend-mode: overlay;
}


.quern-m06fs__row {
	align-items: start;
}

.quern-m06fs__aside {
	grid-column: 1 / 5;
	color: var(--wp--preset--color--paper);
}

.quern-m06fs__kicker {
	margin: 0;
	color: var(--wp--preset--color--paper);
}

.quern-m06fs__intro {
	max-width: 302px;
	margin: 9px 0 0;
	color: var(--wp--preset--color--paper);
}

.quern-m06fs__steps {
	grid-column: 5 / 13;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quern-m06fs__step {
	padding: 18px 0 36px;
	border-top: 1px solid var(--wp--preset--color--paper);
	color: var(--wp--preset--color--paper);
}

.quern-m06fs__step:last-child {
	border-bottom: 1px solid var(--wp--preset--color--paper);
}

.quern-m06fs__num {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
}

.quern-m06fs__step-title {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--paper);
}

.quern-m06fs__step-text {
	max-width: 628px;
	margin: 14px 0 0;
	color: var(--wp--preset--color--paper);
}

.quern-m06fs__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.quern-m06fs__tag {
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--paper);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--paper);
}

@media (max-width: 1024px) {
	.quern-m06fs__aside {
		grid-column: 1 / 7;
		margin-bottom: var(--wp--preset--spacing--40);
	}

	.quern-m06fs__steps {
		grid-column: 1 / 7;
	}
}

@media (max-width: 781.98px) {
	.quern-m06fs__aside,
	.quern-m06fs__steps {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ *
 * M21 · Farbfeld — grand champ de couleur flou (Vorgehen, Über Quern).
 * Ellipse violet/indigo sur fond paper, halos mauve (gauche) et rosé
 * (bas-gauche / droite) : approximation en radial-gradient des ~10
 * ellipses Figma (même logique que M07d).
 * ------------------------------------------------------------------ */

.quern-m21 {
	position: relative;
	/* Les halos débordent en haut/en bas sur les modules voisins (comme ceux du hero) : on ne coupe que sur les côtés. */
	overflow-x: clip;
	overflow-y: visible;
	min-height: 900px;
	padding-top: 270px;
	padding-bottom: 100px;
	box-sizing: border-box;
}

/* Stage de 1440px centré : les ellipses Figma sont posées en px à l'intérieur (certaines débordent à gauche/en haut, la section coupe). */
.quern-m21__stage {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	width: 1440px;
	height: 100%;
	margin-left: -720px !important;
	max-width: none !important;
	pointer-events: none;
}

.quern-m21__glow,
.quern-m21__voile {
	position: absolute;
}

.quern-m21__pad {
	position: absolute;
	display: block;
}

.quern-m21__pad img {
	display: block;
	max-width: none;
	width: 100%;
	height: 100%;
}

/* Calque tourné : centré sur son conteneur, comme les « flex items-center justify-center » du Figma. */
.quern-m21__glow-rot {
	position: absolute;
	left: 50%;
	top: 50%;
}

/* « Grain — couleur (masque) » : le grain n'existe que dans la zone des halos (masque alpha exporté du Figma). */
.quern-m21__grain {
	position: absolute;
	left: -571.01px;
	top: -71.92px;
	width: 2364.042px;
	height: 1027.159px;
	background-image: url("../img/grain.webp");
	background-size: var(--quern-grain-size);
	opacity: var(--quern-grain-opacity);
	mix-blend-mode: overlay;
	-webkit-mask-image: url("../img/farbfeld/grain-mask.svg");
	mask-image: url("../img/farbfeld/grain-mask.svg");
	-webkit-mask-size: 2585.125px 1296.866px;
	mask-size: 2585.125px 1296.866px;
	-webkit-mask-position: -99.385px -107.01px;
	mask-position: -99.385px -107.01px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.quern-m21__content {
	grid-column: 4 / 13;
	color: var(--wp--preset--color--white);
}

.quern-m21__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--white);
}

.quern-m21__title {
	max-width: 954px;
	margin: 14px 0 0;
	font-size: var(--wp--preset--font-size--h-2-light);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.quern-m21__text {
	max-width: 628px;
	margin: 27px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--white);
}

.quern-m21__content .quern-glass-btn {
	margin: 34px 0 0 -12px;
}

@media (max-width: 1024px) {
	.quern-m21 {
		min-height: 640px;
		padding-top: 180px;
		padding-bottom: 80px;
	}

	.quern-m21__content {
		grid-column: 1 / -1;
	}
}

@media (max-width: 781.98px) {
	.quern-m21 {
		min-height: 560px;
		padding-top: 140px;
		padding-bottom: 60px;
	}
}

/* ------------------------------------------------------------------ *
 * M05 · Dauer & Mitwirkung — deux tableaux à filets (label | valeur).
 * ------------------------------------------------------------------ */

.quern-dm__row {
	display: grid;
	/* la valeur démarre sur un trait de grille (x=840,67 = 3 colonnes + 3 gouttières après le label) */
	grid-template-columns: calc(3 * (var(--quern-col) + var(--quern-gutter))) 1fr;
	column-gap: 0;
	padding: 17px 0 16px;
	border-top: 1px solid var(--wp--preset--color--divider);
}

.quern-dm__row:last-child {
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.quern-dm__label {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.quern-dm__value {
	color: var(--wp--preset--color--secondary);
}

.quern-dm__num {
	color: var(--wp--preset--color--indigo);
}

.quern-dm__note {
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

.quern-dm__heading {
	margin: 36px 0 22px;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1024px) {
	.quern-dm__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 4px;
	}
}

/* ------------------------------------------------------------------ *
 * Projekte & Preise — M09b : 3 cartes verre (variante détaillée des
 * cartes de la Startseite, mêmes .quern-preise__*).
 * ------------------------------------------------------------------ */

.quern-preise--projekte .quern-preise__name {
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
}

.quern-preise__tier--muted .quern-preise__name {
	color: var(--wp--preset--color--secondary);
}

.quern-preise__price {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.quern-preise__tier:not(.quern-preise__tier--muted) .quern-preise__price {
	color: var(--wp--preset--color--indigo);
}

.quern-preise__desc {
	margin: 26px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}

.quern-preise--projekte .quern-preise__divider--ink {
	margin: 25px 0 0;
	border-top-color: var(--wp--preset--color--ink);
}

.quern-preise__list {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.quern-preise--projekte .quern-preise__row {
	padding-block: 0;
	margin-bottom: 12px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.quern-preise--projekte .quern-preise__check {
	font-weight: 700;
}

.quern-preise__example-label {
	margin: 25px 0 0;
	color: var(--wp--preset--color--secondary);
}

.quern-preise__example {
	margin: 3px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* Orbe Figma 282:2964 : posée sur le bord bas de la 1re carte (x=310). */
.quern-preise--projekte .quern-preise__orb {
	bottom: -55px;
}

/* M12 · Beispielprojekte — visuels à halos (assets/img/erp-flow-halos.png). */
.quern-m12__image--halos {
	background-image: url("../img/erp-flow-halos.png");
	background-size: cover;
	background-position: center;
}

.quern-m12--beispiel .quern-m12__ref--2 .quern-m12__image--halos {
	background-position: 20% 40%;
}

@media (min-width: 1025px) {
	.quern-m12--beispiel .quern-m12__ref--1 {
		grid-column: 1 / 8;
	}

	.quern-m12--beispiel .quern-m12__ref--1 .quern-m12__image {
		width: 652px;
		max-width: 100%;
	}

	.quern-m12--beispiel .quern-m12__ref--2 {
		grid-column: 8 / 13;
	}
}

/* ------------------------------------------------------------------ *
 * M18 · Hero Bild — photo plein large (Über Quern : voile sombre ;
 * Blog : voile clair). Teinte chaude + voile + halos + grain par-dessus
 * l'image ; le texte vit dans .quern-cols (z-index 2, au-dessus).
 * ------------------------------------------------------------------ */

.quern-m18 {
	position: relative;
	overflow: hidden;
	min-height: 780px;
	padding-top: 236px;
	padding-bottom: 100px;
	box-sizing: border-box;
}

.quern-m18__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quern-m18__tint,
.quern-m18__veil,
.quern-m18__halos,
.quern-m18__grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.quern-m18__tint {
	background-color: color-mix(in srgb, var(--wp--custom--color--prisme-yellow) 30%, var(--wp--custom--color--prisme-orange) 30%);
	mix-blend-mode: soft-light;
	opacity: 0.6;
}

.quern-m18--dunkel .quern-m18__veil {
	background-image: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent) 55%, color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent) 100%);
}

.quern-m18--hell .quern-m18__veil {
	background-image: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--paper) 94%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent) 50%, color-mix(in srgb, var(--wp--preset--color--paper) 0%, transparent) 100%);
}

.quern-m18__halos {
	background-image:
		radial-gradient(circle 380px at -5% -10%, color-mix(in srgb, var(--wp--preset--color--violet) 45%, transparent) 0%, transparent 100%),
		radial-gradient(circle 190px at 0% 14%, color-mix(in srgb, var(--wp--custom--color--prisme-blue) 40%, transparent) 0%, transparent 100%);
}

.quern-m18--dunkel .quern-m18__halos {
	mix-blend-mode: screen;
}

.quern-m18__grain {
	background-image: url("../img/grain.webp");
	background-size: var(--quern-grain-size);
	background-repeat: repeat;
	opacity: var(--quern-grain-opacity);
	mix-blend-mode: overlay;
}

.quern-m18__content {
	grid-column: 1 / 8;
	color: var(--wp--preset--color--paper);
}

.quern-m18--hell .quern-m18__content {
	color: var(--wp--preset--color--ink);
}

.quern-m18__eyebrow {
	margin: 0;
	color: inherit;
}

.quern-m18__title {
	max-width: 737px;
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: inherit;
}

.quern-m18__intro {
	max-width: 559px;
	margin: 20px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: inherit;
}

.quern-m18__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 31px;
	margin-top: 36px;
}

.quern-m18__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-top: 36px;
}

.quern-m18__filter .quern-tag {
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 1024px) {
	.quern-m18 {
		min-height: 640px;
		padding-top: 180px;
	}

	.quern-m18__content {
		grid-column: 1 / -1;
	}
}

@media (max-width: 781.98px) {
	.quern-m18 {
		min-height: 560px;
		padding-top: 140px;
		padding-bottom: 60px;
	}

	.quern-m18__title {
		font-size: var(--wp--preset--font-size--h-1);
	}
}

/* ------------------------------------------------------------------ *
 * M19 · Der Name — kicker + titre (col 1-6), texte + bouton (col 7-12).
 * ------------------------------------------------------------------ */

.quern-m19__row {
	align-items: start;
}

.quern-m19__head {
	grid-column: 1 / 7;
}

.quern-m19__title {
	margin: 14px 0 0;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 600;
	line-height: 1.1;
}

.quern-m19__body {
	grid-column: 7 / 13;
	margin-top: 42px;
}

.quern-m19__text {
	margin: 0;
	color: var(--wp--preset--color--secondary);
}

.quern-m19__btn {
	margin-top: 32px;
}

@media (max-width: 1024px) {
	.quern-m19__head,
	.quern-m19__body {
		grid-column: 1 / -1;
	}

	.quern-m19__body {
		margin-top: var(--wp--preset--spacing--30);
	}
}

/* ------------------------------------------------------------------ *
 * M20 · Fließtext (Werte) — halos gris froid très doux derrière.
 * ------------------------------------------------------------------ */

.quern-m20 {
	position: relative;
	/* les halos débordent sur les modules voisins (comme ceux du hero) : on ne coupe que sur les côtés */
	overflow-x: clip;
	overflow-y: visible;
}

/* Stage 1440px centré, origine = haut du contenu (le Figma place le kicker à y=0, la section a 80px de padding). */
.quern-m20__stage {
	position: absolute;
	top: var(--wp--preset--spacing--60);
	left: 50%;
	z-index: 2;
	width: 1440px;
	height: 911px;
	margin-left: -720px !important;
	max-width: none !important;
	pointer-events: none;
}

.quern-m20__light {
	position: absolute;
}

.quern-m20__light-rot {
	position: absolute;
	left: 50%;
	top: 50%;
}

.quern-m20__pad {
	position: absolute;
	display: block;
}

.quern-m20__pad img {
	display: block;
	max-width: none;
	width: 100%;
	height: 100%;
}

.quern-m20__head {
	grid-column: 1 / 5;
}

.quern-m20__title {
	margin: 14px 0 0;
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 600;
	line-height: 1.08;
}

.quern-m20__body {
	grid-column: 5 / 11;
}

.quern-m20__lead {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.quern-m20__list {
	margin-top: 118px;
}

.quern-m20__item {
	margin-bottom: 51px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--ink);
}

.quern-m20__item-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

.quern-m20__item-text {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}

.quern-m20__outro {
	margin: 7px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 1024px) {
	.quern-m20__head,
	.quern-m20__body {
		grid-column: 1 / -1;
	}

	.quern-m20__list {
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* ------------------------------------------------------------------ *
 * M10 · Team — 2 portraits 410×493 (cadrage Figma reproduit en %).
 * ------------------------------------------------------------------ */

.quern-m10__grid {
	margin-top: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--40);
}

.quern-m10__person {
	grid-column: span 4;
	margin: 0;
}

.quern-m10__photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 6;
	border-radius: var(--wp--custom--radius--card);
}

.quern-m10__img {
	position: absolute;
	max-width: none;
}

.quern-m10__img--kay {
	left: -35.96%;
	top: -16.78%;
	width: 162.19%;
	height: 167.79%;
}

.quern-m10__img--celine {
	left: -12.85%;
	top: -26.01%;
	width: 125.7%;
	height: 130.04%;
}

.quern-m10__name {
	margin: 20px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.quern-m10__role {
	margin: 10px 0 0;
	color: var(--wp--preset--color--secondary);
}

.quern-m10__bio {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 1024px) and (min-width: 782px) {
	.quern-m10__person {
		grid-column: span 3;
	}
}

@media (max-width: 781.98px) {
	.quern-m10__person {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ *
 * M15b · Kontakt — colonne info (col 1-5) + formulaire en verre
 * (col 7-12) ; orbe « Cercle — Froid » entre les deux (Figma 282:2967).
 * ------------------------------------------------------------------ */

.quern-m15b__row {
	align-items: start;
}

.quern-m15b__info {
	grid-column: 1 / 6;
}

.quern-m15b__info-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

.quern-m15b__info-lead {
	margin: 18px 0 43px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.quern-m15b__fact {
	margin: 0;
	padding: 18px 0;
	border-top: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--secondary);
}

.quern-m15b__fact + .quern-m15b__fact {
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.quern-m15b__fact strong {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

.quern-m15b__termin {
	position: relative;
	overflow: hidden;
	margin-top: 40px;
	padding: 32px 32px 32px 32px;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.quern-m15b__termin-glow {
	position: absolute;
	right: -80px;
	top: -80px;
	width: 360px;
	height: 360px;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--wp--preset--color--indigo) 70%, transparent) 0%, transparent 60%),
		radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--wp--custom--color--prisme-purple) 50%, transparent) 0%, transparent 55%);
}

.quern-m15b__termin > :not(.quern-m15b__termin-glow) {
	position: relative;
}

.quern-m15b__termin-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--wp--preset--color--paper);
}

.quern-m15b__termin-text {
	margin: 6px 0 0;
	color: var(--wp--preset--color--paper);
}

.quern-m15b__termin .wp-block-buttons {
	margin: 38px 0 0 -12px;
}

.quern-m15b__orb {
	position: absolute;
	left: 520px;
	top: 150px;
	z-index: 1;
	width: 163px;
	height: 163px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background-image: linear-gradient(135deg, var(--wp--preset--color--indigo) 0%, var(--wp--custom--color--prisme-purple) 71%);
	box-shadow: 0 19px 42px -10px rgba(141, 61, 145, 0.28);
	opacity: 0.92;
	pointer-events: none;
}

.quern-m15b__orb::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 40%);
}

.quern-m15b__form {
	position: relative;
	z-index: 2;
	grid-column: 7 / 13;
	box-sizing: border-box;
	padding: 38.5px;
	border: 1.5px solid rgba(255, 255, 255, 0.95);
	border-radius: var(--wp--custom--radius--card);
	background-image: linear-gradient(131deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 71%);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 8px 20px rgba(20, 20, 36, 0.1), inset 0 0 24px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.quern-m15b__form-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
}

.quern-m15b__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 16px;
	margin-top: 23px;
}

.quern-m15b__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.quern-m15b__field--full {
	grid-column: 1 / -1;
}

.quern-m15b__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--ink);
}

.quern-m15b__field input,
.quern-m15b__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 15px 17px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--paper);
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

.quern-m15b__field textarea {
	min-height: 140px;
	resize: vertical;
}

.quern-m15b__field input::placeholder,
.quern-m15b__field textarea::placeholder {
	color: var(--wp--preset--color--secondary);
}

.quern-m15b__field input:focus-visible,
.quern-m15b__field textarea:focus-visible,
.quern-m15b__tag input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--indigo);
	outline-offset: 2px;
}

.quern-m15b__sizes {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
}

.quern-m15b__sizes legend {
	padding: 0;
}

.quern-m15b__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin-top: 10px;
}

.quern-m15b__tag {
	position: relative;
	cursor: pointer;
}

.quern-m15b__tag input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.quern-m15b__tag span {
	display: inline-flex;
	padding: 8px 14px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--secondary);
}

.quern-m15b__tag input:checked + span {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.quern-m15b__submit {
	margin: 34px 0 0 -12px;
}

.quern-m15b__note {
	margin: 19px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}

@media (max-width: 1024px) {
	.quern-m15b__info,
	.quern-m15b__form {
		grid-column: 1 / -1;
	}

	.quern-m15b__form {
		margin-top: var(--wp--preset--spacing--40);
	}

	.quern-m15b__orb {
		display: none;
	}
}

@media (max-width: 781.98px) {
	.quern-m15b__form {
		padding: var(--wp--preset--spacing--20);
	}

	.quern-m15b__fields {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * Blog — carte d'article (.quern-blog-card), M14 (featured, grille,
 * pagination, Weiterlesen), M17 (header + corps d'article).
 * Les visuels sont des PLACEHOLDERS teintés (pastel + halos + grain).
 * ------------------------------------------------------------------ */

.quern-blog-card__img {
	--quern-tone: var(--wp--preset--color--indigo);
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 410.67 / 271;
	border-radius: var(--wp--custom--radius--card);
	background-color: color-mix(in srgb, var(--quern-tone) 20%, var(--wp--preset--color--paper));
}

.quern-blog-card__img--indigo {
	--quern-tone: var(--wp--preset--color--indigo);
}

.quern-blog-card__img--terracotta {
	--quern-tone: var(--wp--preset--color--terracotta);
}

.quern-blog-card__img--sage {
	--quern-tone: var(--wp--preset--color--sage);
}

.quern-blog-card__img--violet {
	--quern-tone: var(--wp--preset--color--violet);
}

.quern-blog-card__img::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--quern-tone) 38%, var(--wp--preset--color--paper)) 0%, transparent 52%),
		radial-gradient(circle at 72% 66%, color-mix(in srgb, var(--quern-tone) 50%, var(--wp--preset--color--white)) 0%, transparent 38%);
}

.quern-blog-card__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/grain.webp");
	background-size: var(--quern-grain-size);
	opacity: var(--quern-grain-opacity);
	mix-blend-mode: overlay;
}

.quern-blog-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	grid-column: span 4;
}

.quern-blog-card .quern-tag {
	margin-top: 20px;
}

.quern-blog-card__title {
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--h-5);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

.quern-blog-card__title a {
	color: inherit;
	text-decoration: none;
}

.quern-blog-card__text {
	margin: 10px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}

.quern-blog-card__meta {
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--secondary);
}

/* M14 · aperçu Blog */
.quern-m14__featured {
	align-items: start;
}

.quern-m14__featured-img {
	grid-column: 1 / 8;
	aspect-ratio: 736.67 / 457;
}

.quern-m14__featured-body {
	grid-column: 8 / 13;
	padding-top: 40px;
}

.quern-m14__featured-title {
	margin: 20px 0 0;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

.quern-m14__featured-text {
	margin: 20px 0 0;
	line-height: 1.6;
	color: var(--wp--preset--color--secondary);
}

.quern-m14__featured-body .quern-blog-card__meta {
	margin-top: 20px;
}

.quern-m14__more,
.quern-m14__older {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.quern-m14__more {
	margin-top: 27px;
	color: var(--wp--preset--color--indigo);
}

.quern-m14__older {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
}

.quern-m14__more svg,
.quern-m14__older svg {
	flex: none;
	width: 13px;
	height: 9px;
}

.quern-m14__older svg path {
	stroke: currentColor;
}

.quern-m14__grid {
	row-gap: 90px;
	margin-top: 128px;
}

.quern-m14__pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: calc(var(--quern-max) - 2 * var(--quern-margin));
	margin: 128px auto 0;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
	position: relative;
	z-index: 2;
	box-sizing: border-box;
}

.quern-m14--weiter .quern-m14__grid {
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 1024px) {
	.quern-m14__featured-img,
	.quern-m14__featured-body {
		grid-column: 1 / -1;
	}

	.quern-m14__featured-body {
		padding-top: var(--wp--preset--spacing--30);
	}

	.quern-m14__grid {
		margin-top: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--50);
	}

	.quern-m14__pagination {
		margin-top: var(--wp--preset--spacing--50);
		margin-inline: var(--quern-margin);
	}

	.quern-blog-card {
		grid-column: span 3;
	}
}

@media (max-width: 781.98px) {
	.quern-blog-card {
		grid-column: 1 / -1;
	}
}

/* M17 · en-tête d'article */
.quern-m17h {
	position: relative;
	overflow-x: clip;
	padding-top: 204px;
}

.quern-m17h__row {
	align-items: start;
}

.quern-m17h__breadcrumb {
	grid-column: span 3;
	margin: 10px 0 0;
}

.quern-m17h__content {
	grid-column: 4 / 13;
	min-width: 0;
}

.quern-m17h__title {
	margin: 24px 0 0;
	font-size: var(--wp--preset--font-size--h-1-light);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.quern-m17h__intro {
	max-width: 737px;
	margin: 27px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}

.quern-m17h__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 36px;
}

.quern-m17h__author img {
	flex: none;
	border-radius: 50%;
}

.quern-m17h__author-name {
	margin: 0;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.quern-m17h__author-meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

.quern-m17h__image {
	position: relative;
	z-index: 2;
	max-width: calc(var(--quern-max) - 2 * var(--quern-margin));
	margin: 42px auto 0;
	aspect-ratio: 1280 / 560;
}

/* Le visuel est centré dans la même piste que .quern-cols (marge de grille). */
@media (max-width: 1440px) {
	.quern-m17h__image {
		margin-inline: var(--quern-margin);
		width: auto;
		max-width: none;
	}
}

/* M17 · corps d'article */
.quern-m17b__row {
	align-items: start;
}

.quern-m17b__toc {
	grid-column: 1 / 4;
	position: sticky;
	top: 110px;
}

.quern-m17b__toc-title {
	margin: 0 0 22px;
	color: var(--wp--preset--color--secondary);
}

.quern-m17b__toc-item {
	display: block;
	padding: 0 0 0 12px;
	margin-bottom: 14px;
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	line-height: 1.6;
}

.quern-m17b__toc-item.is-active {
	border-left-color: var(--wp--preset--color--indigo);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.quern-m17b__article {
	grid-column: 4 / 10;
	min-width: 0;
}

.quern-m17b__article h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

.quern-m17b__article h2:not(:first-child) {
	margin-top: 56px;
}

.quern-m17b__article p {
	margin: 20px 0 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}

.quern-m17b__dash {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.quern-m17b__dash li {
	position: relative;
	margin-bottom: 20px;
	padding-left: 28px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--secondary);
}

.quern-m17b__dash li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--indigo);
}

.quern-m17b__dash li strong {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.quern-m17b__quote {
	margin: 40px 0 0;
	padding: 4px 0 4px 28px;
	border-left: 2px solid var(--wp--preset--color--indigo);
}

.quern-m17b__article .quern-m17b__quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces-italic);
	font-style: italic;
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.quern-m17b__callout {
	margin-top: 40px;
	padding: 22px 27px 26px;
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--card);
}

.quern-m17b__article .quern-m17b__callout p {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.quern-m17b__article .quern-m17b__callout p.is-style-eyebrow {
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--secondary);
}

.quern-m17b__authorbox {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 64px;
	padding: 28px 0;
	border-top: 1px solid var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.quern-m17b__authorbox img {
	flex: none;
	border-radius: 50%;
}

.quern-m17b__article .quern-m17b__authorbox p {
	margin: 0;
}

.quern-m17b__article .quern-m17b__authorbox-name {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.quern-m17b__article .quern-m17b__authorbox-bio {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.quern-m17b__toc {
		display: none;
	}

	.quern-m17b__article {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------ *
 * Grain sur les boules et les halos (retour client du 2026-10-05).
 * Figma : chaque « Cercle — Froid » porte un calque « Grain »
 * (mix-blend overlay, opacité 35 %, tuile 50 px) et les halos du hero /
 * footer sont recouverts d'un « Grain — couleur (masque) » : le grain
 * n'apparaît QUE dans la zone colorée du halo, pas sur le fond paper.
 * Même asset et même résolution native que .quern-kontakt__grain.
 * ------------------------------------------------------------------ */

/* Boules : 2e pseudo-élément (le ::before porte déjà le reflet). */
.quern-preise__orb::after,
.quern-vierfelder__orb::after,
.quern-m15b__orb::after,
.quern-m16b__sphere::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: url("../img/grain.webp");
	background-size: var(--quern-grain-size);
	opacity: var(--quern-grain-opacity);
	mix-blend-mode: overlay;
	pointer-events: none;
}

/*
 * Halos : le grain est un calque ::after de la SECTION (jamais sur le
 * conteneur des halos : un mask-image sur le conteneur découpait aussi les
 * blobs flous, et multiply les grisait). overlay = invisible sur le paper
 * nu, visible sur la couleur ; le masque ne sert qu'à limiter le grain à la
 * zone des halos. z-index 0 + dernier dans le DOM = au-dessus des halos,
 * sous la grille (1) et le contenu (2).
 */
.quern-hero::after,
.quern-m03::after,
.quern-m17h::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../img/grain.webp");
	background-size: var(--quern-grain-size);
	mix-blend-mode: overlay;
	opacity: var(--quern-grain-opacity);
	-webkit-mask-image: radial-gradient(ellipse 45% 90% at 85% 15%, var(--wp--preset--color--ink) 0%, transparent 100%);
	mask-image: radial-gradient(ellipse 45% 90% at 85% 15%, var(--wp--preset--color--ink) 0%, transparent 100%);
}

/* Footer : le blur du conteneur ne doit pas flouter le grain → calque dédié sur .quern-footer. */
.quern-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../img/grain.webp");
	background-size: var(--quern-grain-size);
	mix-blend-mode: overlay;
	opacity: var(--quern-grain-opacity);
	/* grain limité à la zone des halos (mêmes cercles que ::after) ; overlay = invisible sur le paper nu. */
	-webkit-mask-image:
		radial-gradient(circle 460px at calc(100% - 40px) 82%, var(--wp--preset--color--ink) 0%, transparent 100%),
		radial-gradient(circle 420px at calc(100% - 180px) 52%, var(--wp--preset--color--ink) 0%, transparent 100%),
		radial-gradient(circle 400px at calc(100% - 80px) 108%, var(--wp--preset--color--ink) 0%, transparent 100%);
	mask-image:
		radial-gradient(circle 460px at calc(100% - 40px) 82%, var(--wp--preset--color--ink) 0%, transparent 100%),
		radial-gradient(circle 420px at calc(100% - 180px) 52%, var(--wp--preset--color--ink) 0%, transparent 100%),
		radial-gradient(circle 400px at calc(100% - 80px) 108%, var(--wp--preset--color--ink) 0%, transparent 100%);
}

/* ------------------------------------------------------------------ *
 * Rythme vertical des 8 pages Phase 3 (retour client du 2026-10-05 :
 * « tout semble tassé par rapport au Figma »). Mesuré sur les frames :
 * 128px entre deux modules (pas 120), et 128px entre le héros photo /
 * l'image d'article et le module qui suit. Le footer et le CTA ont été
 * recalés sur le Figma plus haut (98:498 / 98:488).
 * ------------------------------------------------------------------ */

.quern-legal {
	padding-top: 64px !important;
	padding-bottom: 64px !important;
}

.quern-legal .quern-legal__kv {
	line-height: 1.5;
}

.quern-m19 {
	padding-top: 128px !important;
	padding-bottom: 48px !important;
}

.quern-m17b {
	padding-top: 128px !important;
}

@media (max-width: 1024px) {
	.quern-m19 {
		padding-top: var(--wp--preset--spacing--60) !important;
	}

	.quern-m17b {
		padding-top: var(--wp--preset--spacing--60) !important;
	}
}

/* ------------------------------------------------------------------ *
 * Retours client du 2026-10-05 (liste en 7 points).
 * ------------------------------------------------------------------ */

/*
 * Calques décoratifs plein large (photo, halos, grain, champ de couleur) :
 * ce sont des enfants DIRECTS d'une <section> en layout « constrained »,
 * donc WordPress leur applique max-width = largeur de contenu + marges
 * auto → ils étaient rognés et centrés (halo « coupé à gauche et à droite »
 * sur Unser Prinzip, photo d'Über Quern limitée au module). On les remet à
 * la pleine largeur de la section.
 */
.quern-m07d__grain,
.quern-m06fs__grain,
.quern-m18__img,
.quern-m18__tint,
.quern-m18__veil,
.quern-m18__halos,
.quern-m18__grain {
	max-width: none !important;
	margin: 0 !important;
}

.quern-m18__img {
	width: 100% !important;
}

/* La photo (Über Quern, Blog) passe SOUS la grille dans le Figma : la section recouvre les traits globaux, comme le CTA. */
.quern-m18 {
	z-index: 3;
	background-color: var(--wp--preset--color--paper);
}

/* Boutons pilule (dark / light) : flèche horizontale → (Figma), pas la diagonale ↗ des liens sortants. */
.wp-block-button.has-arrow:not(.is-style-text) > .wp-block-button__link {
	align-items: center;
	gap: 10px;
}

.wp-block-button.has-arrow:not(.is-style-text) > .wp-block-button__link::after {
	width: 13px;
	height: 9px;
	margin-top: 0;
	background: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") no-repeat center / contain;
	mask: url("../icons/arrow-right.svg") no-repeat center / contain;
}

/* FAQ : + / − et noms de catégories (colonne de droite) en indigo ; la nav de gauche garde sa propre barre. */
.quern-m11b__item-q::after {
	color: var(--wp--preset--color--indigo);
}

.quern-m11b__group-name {
	color: var(--wp--preset--color--indigo);
}

/* Nav des chapitres : barre indigo unique qui glisse vers le chapitre actif (position posée par assets/js/faq-nav.js). */
.quern-m11b__nav {
	position: relative;
}

.quern-m11b__nav::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: var(--quern-faq-bar-h, 21px);
	background-color: var(--wp--preset--color--indigo);
	transform: translateY(var(--quern-faq-bar-y, 0px));
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.quern-m11b__nav-item,
.quern-m11b__nav-item.is-active {
	border-left-color: transparent;
	transition: color 0.2s ease;
}

/* Preise : la carte survolée prend l'accent (titre ink, prix indigo), les autres — dont « Ein Prozess » — repassent en gris. */
.quern-preise--projekte .quern-preise__name,
.quern-preise--projekte .quern-preise__price {
	transition: color 0.25s ease;
}

.quern-preise--projekte .quern-preise__tier:hover .quern-preise__name,
.quern-preise--projekte .quern-preise__grid:has(.quern-preise__tier:hover) .quern-preise__tier:hover .quern-preise__name {
	color: var(--wp--preset--color--ink);
}

.quern-preise--projekte .quern-preise__tier:hover .quern-preise__price {
	color: var(--wp--preset--color--indigo);
}

.quern-preise--projekte .quern-preise__grid:has(.quern-preise__tier:hover) .quern-preise__tier:not(:hover) .quern-preise__name {
	color: var(--wp--preset--color--secondary);
}

.quern-preise--projekte .quern-preise__grid:has(.quern-preise__tier:hover) .quern-preise__tier:not(:hover) .quern-preise__price {
	color: var(--wp--preset--color--ink);
}

/* Startseite : mêmes états sur les titres de cartes. */
.quern-preise:not(.quern-preise--projekte) .quern-preise__name {
	transition: color 0.25s ease;
}

.quern-preise:not(.quern-preise--projekte) .quern-preise__tier:hover .quern-preise__name {
	color: var(--wp--preset--color--ink);
}

.quern-preise:not(.quern-preise--projekte) .quern-preise__grid:has(.quern-preise__tier:hover) .quern-preise__tier:not(:hover) .quern-preise__name {
	color: var(--wp--preset--color--secondary);
}

/* Daten & Systeme : 4 colonnes calées sur la grille (chaque colonne = 2 colonnes de grille + gouttière exacte). */
.quern-m05__systems-grid {
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--quern-gutter);
}

@media (max-width: 1024px) {
	.quern-m05__systems-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 781.98px) {
	.quern-m05__systems-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Dauer & Mitwirkung : texte des étapes sur 519px (5 colonnes), comme le Figma (434:3385). */
.quern-dm__table--steps .quern-dm__value {
	max-width: 519px;
}

/* Visuels de hero / Leistungen : image fournie → remplit le cadre (le cadre PLACEHOLDER n'est plus rendu tant qu'il n'y a pas d'image). */
.quern-hero__visual img,
.quern-leistungen__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* ================================================================== *
 * Blog DYNAMIQUE (Beiträge) — liste (Query Loop), cartes, pills de
 * catégories, modèle d'article. Remplace le contenu statique d'exemple.
 * ================================================================== */

/* Pills de catégories : bloc « Termes de l'article » et bloc « Catégories » (hero). */
.quern-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
}

.quern-tag-list .wp-block-post-terms__separator {
	display: none;
}

.quern-tag-list a,
.quern-m18__cats a {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	white-space: nowrap;
}

.quern-tag-list a:hover,
.quern-m18__cats a:hover {
	color: var(--wp--preset--color--ink);
}

.quern-m18__cats {
	margin: 0;
}

.quern-m18__cats ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.quern-m18__cats a {
	font-size: var(--wp--preset--font-size--small);
}

.quern-m18__cats .current-cat a {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* Hero Blog : la rangée de filtres suit le bloc texte, dans la même colonne. */
.quern-m18__filterrow {
	position: relative;
}

.quern-m18__filterrow .quern-m18__filter {
	grid-column: 1 / 8;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1024px) {
	.quern-m18__filterrow .quern-m18__filter {
		grid-column: 1 / -1;
	}
}

/* Liste d'articles : masquée tant qu'aucun article n'est publié. */
.quern-m14--list:not(:has(.wp-block-post)),
.quern-m14--weiter:not(:has(.wp-block-post)) {
	display: none;
}

.quern-m14__posts {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(var(--quern-cols-count), 1fr);
	column-gap: var(--quern-gutter);
	row-gap: 90px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quern-m14__posts > li {
	grid-column: span 4;
	margin: 0;
}

.quern-m14__posts .quern-blog-card {
	grid-column: auto;
}

/* Visuel de carte : teinte du placeholder ; l'image mise en avant le recouvre quand elle existe. */
.quern-blog-card__img--auto {
	--quern-tone: var(--wp--preset--color--indigo);
}

.quern-m14__posts > li:nth-child(2) .quern-blog-card__img--auto,
.quern-m14__posts > li:nth-child(7n) .quern-blog-card__img--auto {
	--quern-tone: var(--wp--preset--color--terracotta);
}

.quern-m14__posts > li:nth-child(3) .quern-blog-card__img--auto {
	--quern-tone: var(--wp--preset--color--sage);
}

.quern-m14__posts > li:nth-child(4) .quern-blog-card__img--auto {
	--quern-tone: var(--wp--preset--color--violet);
}

.quern-m14__query--weiter .quern-m14__posts > li:nth-child(1) .quern-blog-card__img--auto {
	--quern-tone: var(--wp--preset--color--terracotta);
}

.quern-m14__query--weiter .quern-m14__posts > li:nth-child(2) .quern-blog-card__img--auto {
	--quern-tone: var(--wp--preset--color--sage);
}

.quern-m14__query--weiter .quern-m14__posts > li:nth-child(3) .quern-blog-card__img--auto {
	--quern-tone: var(--wp--preset--color--violet);
}

.quern-blog-card__img .wp-block-post-featured-image,
.quern-m17h__image .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
}

.quern-blog-card__img .wp-block-post-featured-image img,
.quern-m17h__image .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto !important;
	object-fit: cover;
}

.quern-blog-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.quern-blog-card .wp-block-post-excerpt {
	margin: 10px 0 0;
}

.quern-blog-card .wp-block-post-terms {
	margin-top: 20px;
}

.quern-m14__more {
	display: none;
}

/* 1er article : à la une (visuel 7 colonnes + texte 5 colonnes). */
.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts {
	row-gap: 128px;
}

.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child {
	grid-column: 1 / -1;
}

.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .quern-blog-card {
	display: grid;
	grid-template-columns: repeat(var(--quern-cols-count), 1fr);
	grid-template-rows: repeat(5, auto) 1fr;
	column-gap: var(--quern-gutter);
	align-items: start;
}

.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .quern-blog-card__img {
	grid-column: 1 / 8;
	grid-row: 1 / 7;
	aspect-ratio: 736.67 / 457;
}

.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .quern-blog-card > :not(.quern-blog-card__img) {
	grid-column: 8 / 13;
}

.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .wp-block-post-terms {
	margin-top: 40px;
}

.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .quern-blog-card__title {
	margin-top: 20px;
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .quern-blog-card__text {
	margin-top: 20px;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
}

.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .quern-blog-card__meta {
	margin-top: 20px;
}

.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .quern-m14__more {
	display: inline-flex;
	margin-top: 27px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--indigo);
	text-decoration: none;
}

.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .quern-m14__more::after {
	content: "";
	width: 13px;
	height: 9px;
	margin-left: 8px;
	align-self: center;
	background: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") no-repeat center / contain;
	mask: url("../icons/arrow-right.svg") no-repeat center / contain;
}

/* Pagination. */
.quern-m14__pagination {
	grid-column: 1 / -1;
	margin-top: 128px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
}

.quern-m14__pagination a {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration: none;
}

.quern-m14__pagination .page-numbers.current {
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1024px) {
	.quern-m14__posts > li {
		grid-column: span 3;
	}

	.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .quern-blog-card {
		display: block;
	}

	.quern-m14__query:not(.quern-m14__query--weiter) .quern-m14__posts > li:first-child .quern-blog-card__img {
		aspect-ratio: 410.67 / 271;
	}
}

@media (max-width: 781.98px) {
	.quern-m14__posts > li {
		grid-column: 1 / -1;
	}
}

/* Modèle d'article (single.html) : en-tête dynamique. */
.quern-m17h__breadcrumb {
	gap: 6px;
	align-items: baseline;
}

.quern-m17h__crumb-terms,
.quern-m17h__crumb-terms a {
	margin: 0;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.quern-m17h__intro p {
	margin: 0;
}

.quern-m17h__content .wp-block-post-terms {
	margin-top: 0;
}

.quern-m17h__avatar {
	flex: none;
	border-radius: 50%;
}

/* Sommaire : barre indigo unique qui glisse (script assets/js/article-toc.js). */
.quern-m17b__toc-list {
	position: relative;
}

.quern-m17b__toc-list::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: var(--quern-toc-bar-h, 24px);
	background-color: var(--wp--preset--color--indigo);
	transform: translateY(var(--quern-toc-bar-y, 0px));
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.quern-m17b__toc-item,
.quern-m17b__toc-item.is-active {
	border-left-color: transparent;
}

/* Contenu rédigé dans l'éditeur : titres, paragraphes, liste à tirets, citation, encadré. */
.quern-m17b__article .wp-block-post-content > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.quern-m17b__article ul.is-style-quern-dash {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.quern-m17b__article ul.is-style-quern-dash li {
	position: relative;
	margin-bottom: 20px;
	padding-left: 28px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--secondary);
}

.quern-m17b__article ul.is-style-quern-dash li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--indigo);
}

.quern-m17b__article ul.is-style-quern-dash li strong {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.quern-m17b__article .wp-block-quote {
	margin: 40px 0 0;
	padding: 4px 0 4px 28px;
	border-left: 2px solid var(--wp--preset--color--indigo);
}

.quern-m17b__article .wp-block-quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces-italic);
	font-style: italic;
	font-size: var(--wp--preset--font-size--eyebrow);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.quern-m17b__article .is-style-quern-callout {
	margin-top: 40px;
	padding: 22px 27px 26px;
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--wp--custom--radius--card);
}

.quern-m17b__article .is-style-quern-callout p {
	margin: 0;
	color: var(--wp--preset--color--ink);
}

.quern-m17b__article .is-style-quern-callout p.is-style-eyebrow {
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--secondary);
}

/* Correctifs liste Blog : la classe du bloc « Catégories » est posée sur le <ul> lui-même ; la pagination occupe toute la largeur. */
ul.quern-m18__cats,
.quern-m18__cats ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.quern-m18__cats li {
	margin: 0;
}

.quern-m18__filter {
	align-items: center;
}

.quern-m14__query .quern-m14__pagination {
	grid-column: 1 / -1;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	justify-content: space-between;
}

/* « Alle » et les catégories forment UNE seule rangée de pills (la liste devient transparente pour le flex du parent). */
.quern-m18__filter {
	gap: var(--wp--preset--spacing--10);
}

ul.quern-m18__cats,
.quern-m18__cats ul {
	display: contents;
}