/*
 * 5.4 Kennst du das?, 5.5 Umdeutung (Post), 5.10 Budget, 5.11 FAQ.
 * Werte „Handy · Desktop“ aus DESIGN.md.
 */

/* ---------- Kennst du das? ---------- */

.hk-kennst {
	padding: 56px 16px 64px;
}

.hk-kennst-raster {
	display: flex;
	flex-direction: column;
}

/* Handy: Satz 1, drei Zeilen, Satz 2, Button. */
.hk-kennst-links,
.hk-kennst-rechts {
	display: contents;
}

.hk-kennst-satz {
	order: 1;
	margin-bottom: 32px;
	font-size: 19px;
	line-height: 1.6;
}

.hk-drei-zeilen {
	order: 2;
	color: var(--wp--preset--color--cobalt);
	font-family: var(--wp--preset--font-family--tan-nimbus);
	font-size: 36px;
	line-height: 1.45;
}

.hk-kennst-satz.hk-kennst-satz-2 {
	order: 3;
	margin: 40px 0 0;
}

.hk-kennst-buttons {
	order: 4;
	justify-content: center;
	margin: 36px 0 0;
}

.hk-kennst-buttons .wp-block-button__link.wp-element-button {
	min-height: 46px;
	padding: 0 26px;
	font-size: 15px;
}

/* „Post: fehlt.“ (im Editor „Hervorheben“): pinker Unterstrich. */
.hk-drei-zeilen mark {
	padding: 0;
	background: none !important;
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--wp--preset--color--pink);
	text-decoration-thickness: 6px;
	text-underline-offset: 0.12em;
	text-decoration-skip-ink: none;
}

/* ---------- Umdeutung (Post) ---------- */

.hk-post {
	padding: 40px 0 48px;
}

.hk-post-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px 10px;
}

.hk-post-kopf .hk-mit-avatar {
	--hk-avatar: 32px;
	font-size: 14px;
}

.hk-post-mehr {
	color: var(--wp--preset--color--ink);
	font-weight: 900;
	letter-spacing: 2px;
}

.hk-post-bild {
	margin: 0;
}

.hk-post-bild img {
	width: 100%;
	aspect-ratio: 390 / 488;
	object-fit: cover;
	object-position: center;
}

.hk-post-leiste {
	display: flex;
	gap: 16px;
	padding: 10px 16px 6px;
	color: var(--wp--preset--color--ink);
	--hk-icon: 24px;
}

.hk-post-leiste .hk-i-merken {
	margin-left: auto;
}

.hk-i-herz {
	--hk-maske: url("../icons/icon_herz.svg");
}

.hk-i-kommentar {
	--hk-maske: url("../icons/icon_kommentar.svg");
}

.hk-i-senden {
	--hk-maske: url("../icons/icon_senden.svg");
}

.hk-i-merken {
	--hk-maske: url("../icons/icon_merken.svg");
}

.hk-post-text {
	padding: 0 16px;
	font-size: 16px;
	line-height: 1.55;
}

.hk-post-text > p:first-child {
	margin-bottom: 10px;
}

/* ---------- Ehrlich zum Budget ---------- */

.hk-budget {
	padding: 8px 16px 64px;
}

.hk-budget-karte {
	padding: 28px 24px;
	border-radius: var(--wp--custom--radius--karte);
}

.hk-budget-karte > :is(h1, h2) {
	margin-bottom: 16px;
	font-size: 30px;
	line-height: 1.18;
}

.hk-budget-karte > p {
	font-size: 17px;
	line-height: 1.6;
}

/* ---------- FAQ ---------- */

.hk-faq {
	padding: 0 16px 64px;
}

.hk-faq > :is(h1, h2) {
	margin-bottom: 16px;
	font-size: 30px;
	line-height: 1.18;
}

.hk-faq-liste {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.hk-faq-frage {
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.hk-faq-frage > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	padding: 14px 0;
	color: var(--wp--preset--color--ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.hk-faq-frage > summary::-webkit-details-marker {
	display: none;
}

.hk-faq-frage > summary:focus-visible {
	outline-offset: 2px;
}

/* Kreis 32 px cobalt mit weißem Plus, offen Minus (nur Deko). */
.hk-faq-frage > summary::after {
	content: "+" / "";
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--cobalt);
	color: var(--wp--preset--color--white);
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
}

.hk-faq-frage[open] > summary::after {
	content: "−" / "";
}

.hk-faq-frage > :not(summary) {
	max-width: 68ch;
	padding-bottom: 18px;
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- Desktop ab 700 px ---------- */

@media (min-width: 700px) {
	.hk-kennst {
		padding: 96px max(24px, calc((100% - 1152px) / 2));
	}

	/* Fallback bis 860 px: Desktop-Aufbau untereinander. */
	.hk-kennst-links,
	.hk-kennst-rechts {
		display: block;
	}

	.hk-kennst-satz {
		margin-bottom: 28px;
		font-size: 21px;
	}

	.hk-kennst-satz.hk-kennst-satz-2 {
		margin: 0;
	}

	.hk-kennst-buttons {
		justify-content: flex-start;
		margin-top: 36px;
	}

	.hk-kennst-buttons .wp-block-button__link.wp-element-button {
		min-height: 50px;
		padding: 0 30px;
		font-size: 16px;
	}

	.hk-kennst-rechts {
		margin-top: 40px;
	}

	.hk-drei-zeilen {
		font-size: clamp(40px, 4.4vw, 56px);
	}

	.hk-drei-zeilen mark {
		text-decoration-thickness: 7px;
	}

	.hk-post {
		padding: 96px 24px;
	}

	.hk-post-karte {
		max-width: 900px;
		margin-inline: auto;
		overflow: hidden;
		border: 1px solid var(--wp--preset--color--hairline);
		border-radius: var(--wp--custom--radius--karte);
		background-color: var(--wp--preset--color--white);
	}

	.hk-post-kopf {
		padding: 14px 20px;
		border-bottom: 1px solid var(--wp--preset--color--hairline);
	}

	.hk-post-kopf .hk-mit-avatar {
		--hk-avatar: 36px;
		font-size: 15px;
	}

	.hk-post-bild img {
		aspect-ratio: 4 / 5;
	}

	.hk-post-leiste {
		gap: 18px;
		padding: 14px 20px;
		border-top: 1px solid var(--wp--preset--color--hairline);
		--hk-icon: 26px;
	}

	.hk-post-text {
		padding: 24px 28px;
		font-size: 19px;
		line-height: 1.6;
	}

	.hk-post-text > p:first-child {
		margin-bottom: 16px;
	}

	.hk-budget {
		padding: 0 max(24px, calc((100% - 1152px) / 2)) 72px;
	}

	.hk-budget-karte {
		padding: 48px 56px;
	}

	.hk-budget-karte > :is(h1, h2) {
		font-size: 44px;
	}

	.hk-budget-karte > p {
		font-size: 19px;
	}

	.hk-faq {
		max-width: 880px;
		margin-inline: auto;
		padding: 0 24px 72px;
	}

	.hk-faq > :is(h1, h2) {
		margin-bottom: 24px;
		font-size: 44px;
	}

	.hk-faq-frage > summary {
		font-size: 19px;
	}

	.hk-faq-frage > :not(summary) {
		font-size: 18px;
	}
}

/* Zweispaltig erst ab 861 px. */
@media (min-width: 861px) {
	.hk-kennst-raster {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 64px;
		align-items: center;
	}

	.hk-kennst-rechts {
		margin-top: 0;
	}

	.hk-post-karte {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			"bild kopf"
			"bild text"
			"bild leiste";
	}

	.hk-post-kopf {
		grid-area: kopf;
	}

	.hk-post-bild {
		grid-area: bild;
	}

	.hk-post-bild img {
		height: 100%;
	}

	.hk-post-text {
		grid-area: text;
	}

	.hk-post-leiste {
		grid-area: leiste;
	}

	.hk-budget-karte {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
		gap: 48px;
		align-items: start;
	}

	.hk-budget-karte > :is(h1, h2) {
		margin-bottom: 0;
	}
}

/* ---------- Impressum und Datenschutz ---------- */

.hk-rechtstext {
	box-sizing: border-box;
	max-width: 880px;
	margin-inline: auto;
	padding: 56px 16px 64px;
}

.hk-rechtstext > :is(h1, h2) {
	margin-bottom: 16px;
	font-size: 32px;
	line-height: 1.18;
}

.hk-rechtstext > :is(h2, h3) {
	margin-top: 32px;
}

.hk-rechtstext > p + p {
	margin-top: 12px;
}

@media (min-width: 700px) {
	.hk-rechtstext {
		padding: 96px 24px 112px;
	}

	.hk-rechtstext > h1 {
		margin-bottom: 24px;
		font-size: 48px;
	}
}