/*
 * Online-PR-Seite im Aufbau der finalen GEO-Fassung (proben/final/).
 * basis.css, abschnitte.css, final.css, abfolge.css, ablauf.css und schriftwahl.css sind
 * unverändert kopiert. Hier steht nur, was die Online-PR-Inhalte zusätzlich brauchen.
 */

/* „Wann ihr uns ruft“ als Stichworte nach Comp W4 (design/.impeccable/mocks/wann-ihr-uns-ruft/).
   Die Stichworte sind echte Checkboxen. Jedes gewählte Stichwort blendet per :has() sein Thema
   in der Liste fürs Erstgespräch ein, ohne JavaScript. Ist nichts gewählt, steht ein Hinweis da. */

.stichworte {
	min-width: 0;
}

.stichworte__wahl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.stichworte__titel {
	float: left;
	width: 100%;
	margin-bottom: 0.5rem;
	padding: 0;
	color: var(--text);
	font-family: var(--schrift-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Stichwort: Breite bleibt beim Wählen gleich, damit der Umbruch der Reihe nicht springt.
   Ungewählt liegt der Platz für das Häkchen (Kästchen 0,5 rem + 0,75 rem Abstand) je zur Hälfte im
   Innenabstand links und rechts, gewählt steht links das Häkchen. Schrift und Schnitt bleiben gleich. */
.stichwort {
	--weg: 160ms cubic-bezier(0.22, 1, 0.36, 1);

	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.625rem 1.625rem;
	border: 0.0625rem solid var(--wald);
	border-radius: 999rem;
	background: var(--weiss);
	color: var(--wald);
	font-size: 1.0625rem;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color var(--weg), border-color var(--weg), padding var(--weg);
}

.stichwort:hover {
	background: var(--gruen-20);
}

.stichwort input {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Häkchen aus zwei Rändern, ungewählt ohne Breite */
.stichwort::before {
	content: "";
	flex: none;
	width: 0;
	height: 0.75rem;
	margin: -0.25rem 0 0;
	border: 0 solid var(--wald);
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
	transition: width var(--weg), margin var(--weg), opacity var(--weg), transform var(--weg);
}

/* Gewählt: olivgrüne Fläche, links das Häkchen */
.stichwort:has(input:checked) {
	padding-inline: 1rem;
	border-color: var(--gruen);
	background: var(--gruen);
}

.stichwort:has(input:checked)::before {
	width: 0.375rem;
	margin: -0.25rem 0.75rem 0 0.125rem;
	border-width: 0 0.125rem 0.125rem 0;
	opacity: 1;
	transform: rotate(45deg);
}

.stichwort:has(input:focus-visible) {
	outline: 0.1875rem solid var(--wald);
	outline-offset: 0.1875rem;
}

/* Notiz fürs Erstgespräch. Themen und Hinweis klappen auf und zu (Rasterzeile 0fr ↔ 1fr),
   statt per display hart ein- und auszuspringen. Zugeklappt sind sie unsichtbar und für
   Screenreader weg (visibility). */

.stichworte__notiz {
	--weg: 220ms cubic-bezier(0.22, 1, 0.36, 1);

	margin-top: 2rem;
	padding: 1.75rem 2rem 2rem;
	border-radius: 0.5rem;
	background: var(--hell);
}

.stichworte__notiz-titel {
	color: var(--text);
	font-family: var(--schrift-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.stichworte__themen {
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.stichworte__leer,
.thema {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	opacity: 0;
	visibility: hidden;
	transition: grid-template-rows var(--weg), margin-top var(--weg), opacity var(--weg), visibility 0s var(--weg);
}

.stichworte__leer-innen,
.thema__innen {
	min-height: 0;
	overflow: hidden;
}

.stichworte__leer {
	color: var(--text);
	font-size: 1.0625rem;
}

.thema {
	color: var(--tinte);
	font-size: 1.0625rem;
	line-height: 1.45;
}

.thema__innen {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: 0.875rem;
}

/* Olivgrüner Strich vor jedem Thema, auf Höhe der ersten Zeile */
.thema__innen::before {
	content: "";
	height: 0.125rem;
	margin-top: 0.75rem;
	background: var(--gruen);
}

.stichworte:not(:has(input:checked)) .stichworte__leer,
.stichworte:has(input[value="expertise"]:checked) .thema--expertise,
.stichworte:has(input[value="quellen"]:checked) .thema--quellen,
.stichworte:has(input[value="studie"]:checked) .thema--studie,
.stichworte:has(input[value="team"]:checked) .thema--team,
.stichworte:has(input[value="bestenlisten"]:checked) .thema--bestenlisten {
	grid-template-rows: 1fr;
	margin-top: 0.75rem;
	opacity: 1;
	visibility: visible;
	transition: grid-template-rows var(--weg), margin-top var(--weg), opacity var(--weg), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.stichwort,
	.stichwort::before,
	.stichworte__leer,
	.thema {
		transition: none;
	}
}

.stichworte__knopf {
	margin-top: 1.5rem;
}

@media (max-width: 30rem) {
	.stichworte__wahl {
		gap: 0.5rem;
	}

	.stichwort {
		padding-inline: 1.375rem;
		font-size: 1rem;
	}

	.stichwort:has(input:checked) {
		padding-inline: 0.75rem;
	}

	.stichworte__notiz {
		padding: 1.5rem 1.25rem;
	}

	.stichworte__knopf {
		width: 100%;
	}
}

/* Vorgehen: die Leistungslisten der drei Spalten beginnen auf einer Linie, egal wie lang der Text darüber ist */

@media (min-width: 56.0625rem) {
	.schritt {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
}

/* Leistungen: das Versatz-Icon der Leistung steht klein vor dem Titel, wie ein Register mit Marken */

.leistung summary {
	grid-template-columns: 2.25rem minmax(0, 1fr) auto;
	gap: 0.875rem;
}

.leistung__icon {
	width: 2.25rem;
	height: auto;
}

/* Text unter dem Titel beginnt bündig mit dem Titel, nicht unter dem Icon */

.leistung__text {
	padding-left: 3.125rem;
}

/* Noch nicht belegte Angabe, sichtbar markiert wie die offene Quelle in der Ergebniskette */

.offen {
	display: inline-block;
	padding: 0 0.375rem;
	border: 0.0625rem dashed currentColor;
	color: var(--wald);
	font-size: 0.8125rem;
	white-space: nowrap;
}

@media (max-width: 36rem) {
	.leistung__text {
		padding-left: 0;
	}
}