/*
 * Geteilte Bauteile.
 *
 * Alles, was in mehr als einem Block vorkommt: Knopf, Dachzeile,
 * Abschnittsrahmen, Kleingedrucktes, Chip, Haken. Die Bloecke bringen nur noch
 * mit, was ihnen allein gehoert.
 *
 * Herkunft der Werte: template-meisterq-landingpage-v3.php.
 */

/* ---------------------------------------------------------- Abschnitt -- */

/*
 * Jeder Block sitzt in einem .mq-section. Die Flaechenvariante entscheidet
 * ueber Grund- und Textfarbe, der Rest bleibt gleich.
 */
.mq-section {
	position: relative;
	padding: 96px var(--mq-gut);
	font-family: var(--mq-font);
	font-weight: 350;
}

.mq-section--dark {
	background: var(--mq-dark);
	color: #fff;
}

.mq-section--light {
	background: #fff;
	color: var(--mq-dark);
}

.mq-section--beige {
	background: var(--mq-beige);
	color: var(--mq-ink);
}

/* Auf Teal steht dunkler Text - Weiss kaeme nur auf 2,98:1. */
.mq-section--teal {
	background: var(--mq-teal);
	color: var(--mq-dark);
}

.mq-section--flush {
	padding-top: 0;
	padding-bottom: 0;
}

/* Innenbreite fuer Bloecke, die nicht randlos laufen. */
.mq-wrap {
	max-width: 1024px;
	margin: 0 auto;
}

/* ------------------------------------------------------------- Kopf --- */

.mq-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 48px;
}

.mq-head--center {
	align-items: center;
	text-align: center;
}

/*
 * Dachzeilen tragen den Teal-Akzent. Kleine Flaeche, aber sie kommen in jedem
 * Abschnitt vor - zusammen ein ruhiger roter Faden.
 */
.mq-roof {
	margin: 0;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 350;
	color: var(--mq-teal-deep);
}

/*
 * Auf dunklem Grund braucht die Rubrik den helleren Ton. Die Spalte eines
 * Zweispalters zaehlt dabei genauso als dunkler Grund wie eine ganze Sektion -
 * sonst faellt jede Regel hier aus, sobald ein Block in einer Spalte steht.
 */
.mq-section--dark .mq-roof,
.mq-split-col--dark .mq-roof,
.mq-split--bg-dark .mq-roof {
	color: var(--mq-teal-bright);
}

.mq-heading {
	margin: 0;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	font-size: 42px;
}

.mq-heading--xl {
	font-size: 54px;
	line-height: 1.1;
}

.mq-lead {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	max-width: 640px;
}

.mq-prose p {
	margin: 0 0 16px;
	line-height: 1.7;
	font-size: 16px;
}

.mq-prose p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ Knopf --- */

.mq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-width: 155px;
	min-height: 56px;
	padding: 16px;
	border-radius: 8px;
	font-family: var(--mq-font);
	font-size: 16px;
	line-height: 1.35;
	font-weight: 350;
	white-space: nowrap;
	text-decoration: none;
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mq-btn:hover {
	transform: translateY(-1px);
}

/*
 * Gelb bleibt der Handlung vorbehalten. Das ist die tragende Regel des
 * Farbsystems: Teal taucht nirgends als Knopf auf, also ist umgekehrt jede
 * gelbe Flaeche verlaesslich eine Handlung.
 */
.mq-btn--primary {
	background: var(--mq-yellow);
	color: var(--mq-dark);
}

.mq-btn--primary:hover,
.mq-btn--primary:focus-visible {
	background: var(--mq-yellow-hover);
	color: var(--mq-dark);
}

.mq-btn--ghost {
	border: 1px solid #fff;
	color: #fff;
}

.mq-btn--ghost:hover {
	background: #fff;
	color: var(--mq-dark);
}

.mq-btn--outline {
	border: 1px solid var(--mq-ink);
	color: #342f2f;
	min-height: 48px;
}

.mq-btn--outline:hover {
	background: var(--mq-ink);
	color: #fff;
}

.mq-btn--dark {
	background: var(--mq-dark);
	color: #fff;
	min-height: 48px;
}

.mq-btn--dark:hover {
	background: #2c0a3c;
	color: #fff;
}

.mq-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

/* ----------------------------------------------------- Kleinkram ----- */

.mq-fine {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--mq-muted);
}

.mq-section--dark .mq-fine,
.mq-split-col--dark .mq-fine,
.mq-split--bg-dark .mq-fine {
	color: rgba(255, 255, 255, 0.66);
}

/*
 * Chip: kleine, runde Schaltflaeche. Grundform ist weiss mit haarfeiner
 * Kontur - Gelb bleibt dem Hauptknopf vorbehalten. Wo ein Chip die einzige
 * Handlungsmoeglichkeit ist (Chatfragen), traegt er ausnahmsweise Gelb; das
 * regelt der jeweilige Block.
 */
.mq-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border: 0;
	border-radius: 99px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--mq-hair);
	color: var(--mq-dark);
	font-family: var(--mq-font);
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s;
}

.mq-chip:hover {
	background: var(--mq-teal-tint);
}

.mq-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mq-yellow);
	color: var(--mq-dark);
	flex: none;
}

.mq-icon {
	flex: none;
}

.mq-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ Fokus -- */

/*
 * --mq-teal-deep nimmt auf Weiss (5,4:1) und auf dem Lila (3,7:1) die
 * Schwelle - deshalb ueberall derselbe Ring statt zwei Sonderregeln.
 */
.mq-section a:focus-visible,
.mq-section button:focus-visible,
.mq-section input:focus-visible,
.mq-section select:focus-visible {
	outline: 2px solid var(--mq-teal-deep);
	outline-offset: 3px;
}

/* Auf Teal und Gelb waere ein Teal-Ring unsichtbar. */
.mq-section--teal :focus-visible,
.mq-split-col--teal :focus-visible {
	outline-color: var(--mq-dark);
}

/* Fokusring gilt auch fuer Bloecke, die in einer Spalte statt in einer Sektion stehen. */
.mq-split-col a:focus-visible,
.mq-split-col button:focus-visible,
.mq-split-col input:focus-visible,
.mq-split-col select:focus-visible {
	outline: 2px solid var(--mq-teal-deep);
	outline-offset: 3px;
}

/* -------------------------------------------------------- Umbrueche -- */

@media (max-width: 900px) {
	.mq-section {
		padding: 64px var(--mq-gut);
	}

	.mq-heading,
	.mq-heading--xl {
		font-size: 32px;
		line-height: 1.2;
	}

	.mq-head {
		margin-bottom: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mq-btn {
		transition: none;
	}

	.mq-btn:hover {
		transform: none;
	}
}

/*
 * Gelbe Flaeche. Ausnahme von der Regel "Gelb nur fuer Handlung": als ganze
 * Sektionsflaeche traegt Gelb den Blick, ohne mit einem Knopf verwechselt zu
 * werden - dafuer ist sie zu gross. Innerhalb einer gelben Flaeche darf dann
 * aber kein gelber Knopf stehen.
 */
.mq-section--yellow {
	background: var(--mq-yellow);
	color: var(--mq-dark);
}

.mq-section--yellow .mq-roof {
	color: rgba(25, 0, 35, 0.72);
}

/* Auf Gelb ist ein Teal-Fokusring zu schwach - dort dunkel. */
.mq-section--yellow :focus-visible {
	outline-color: var(--mq-dark);
}

/*
 * Hervorhebung im Fliesstext. Gelb ist sonst der Handlung vorbehalten - auf
 * der dunklen Stage ist es aber der hellste verfuegbare Ton (14,5:1) und
 * traegt dort den Nutzen. Auf hellem Grund waere es unlesbar, deshalb der
 * dunkle Teal-Ton.
 */
.mq-hl {
	color: var(--mq-teal-deep);
}

.mq-section--dark .mq-hl,
.mq-split-col--dark .mq-hl,
.mq-split--bg-dark .mq-hl {
	color: var(--mq-yellow);
}