/*
 * Ablauf erklären: Schalter unten rechts blendet zu jeder Section eine Notiz ein,
 * welche Frage des Besuchers sie beantwortet und welche Aufgabe sie hat.
 * Nur für Besprechungen mit dem Team, ohne JavaScript (Checkbox + Label).
 * Butter kommt aus den Versatz-Icons und steht bewusst außerhalb der Seitenfarben,
 * damit eine Notiz nie wie Inhalt aussieht.
 */

:root {
	--butter: #f5cb6e;
}

/* Schalter: Checkbox unsichtbar, aber per Tastatur erreichbar; das Label ist der Knopf */

.ablauf__schalter {
	position: fixed;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ablauf__knopf {
	position: fixed;
	right: clamp(1rem, 2.5vw, 1.75rem);
	bottom: clamp(1rem, 2.5vw, 1.75rem);
	z-index: 30;
	display: inline-flex;
	gap: 0.625rem;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	border-radius: var(--radius);
	background: var(--wald);
	box-shadow: 0 0.5rem 1.5rem rgb(17 42 40 / 0.18);
	color: var(--weiss);
	font-family: var(--schrift-titel);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
}

.ablauf__knopf::before {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--butter);
}

.ablauf__knopf:hover {
	background: var(--wald-80);
}

.ablauf__aus {
	display: none;
}

.ablauf__schalter:checked + .ablauf__knopf {
	background: var(--butter);
	color: var(--wald);
}

.ablauf__schalter:checked + .ablauf__knopf::before {
	background: var(--wald);
}

.ablauf__schalter:checked + .ablauf__knopf .ablauf__an {
	display: none;
}

.ablauf__schalter:checked + .ablauf__knopf .ablauf__aus {
	display: inline;
}

.ablauf__schalter:focus-visible + .ablauf__knopf {
	outline: 0.1875rem solid var(--wald);
	outline-offset: 0.1875rem;
	box-shadow: 0 0 0 0.375rem var(--weiss), 0 0.5rem 1.5rem rgb(17 42 40 / 0.18);
}

/* Notizen: im Fluss oben in jeder Section, über die volle Rahmenbreite */

.notiz {
	display: none;
	grid-column: 1 / -1;
	width: 100%;
	max-width: var(--rahmen);
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	padding-inline: var(--rand);
}

.ablauf__schalter:checked ~ main .notiz {
	display: block;
}

.ablauf__schalter:checked ~ main > section {
	outline: 0.125rem dashed var(--butter);
	outline-offset: -0.375rem;
}

.notiz__innen {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.25rem 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	background: var(--butter);
	color: var(--wald);
	font-size: 1rem;
	line-height: 1.45;
}

.notiz__nr {
	grid-row: span 3;
	font-family: var(--schrift-titel);
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.notiz p {
	max-width: none;
	margin: 0;
	color: inherit;
	font-size: inherit;
}

.notiz .notiz__rolle {
	font-family: var(--schrift-titel);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.notiz__frage {
	font-family: var(--schrift-titel);
	font-weight: 600;
}

.notiz__frage strong {
	font-weight: 700;
}

/* Sections ohne eigenen Innenabstand oben: die Notiz bekommt ihn selbst */

.lage .notiz {
	margin-bottom: 0;
	padding-block: clamp(1.5rem, 3vw, 2rem);
}

.ablauf__schalter:checked ~ main .lage {
	grid-template-rows: auto 1fr;
}

.ablauf__schalter:checked ~ main .lage .lage__bild {
	grid-row: 2;
}

@media (max-width: 56rem) {
	.ablauf__schalter:checked ~ main .lage {
		grid-template-rows: none;
	}

	.ablauf__schalter:checked ~ main .lage .lage__bild {
		grid-row: auto;
	}

	.lage .notiz {
		order: -2;
	}

	.notiz__innen {
		grid-template-columns: minmax(0, 1fr);
	}

	.notiz__nr {
		grid-row: auto;
		font-size: 1.125rem;
	}

	.notiz .notiz__rolle {
		font-size: 1.25rem;
	}
}

@media print {
	.ablauf__knopf {
		display: none;
	}
}