/* Patientenpanel — Frageblock.
   Mobil zuerst: 70 % der Besucher lesen auf dem Smartphone, die Antwort muss
   mit dem Daumen erreichbar sein. Mindesthöhe 44 px je Fläche. */

.pp-frage {
	margin: 2.2em 0;
}

.pp-frage:empty {
	margin: 0;
}

.pp-box {
	border: 1px solid #d5dedd;
	border-left: 3px solid #0e6b62;
	background: #f7faf9;
	padding: 1.1em 1.2em 1.2em;
	max-width: 44em;
}

.pp-frage-text {
	font-size: 1.08em;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 .85em;
	color: #12201f;
}

.pp-optionen {
	display: flex;
	flex-direction: column;
	gap: .5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-option {
	display: block;
	width: 100%;
	min-height: 44px;
	text-align: left;
	padding: .65em .9em;
	font: inherit;
	font-size: .97em;
	line-height: 1.3;
	color: #12201f;
	background: #fff;
	border: 1px solid #b7c6c4;
	border-radius: 3px;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}

.pp-option:hover,
.pp-option:focus-visible {
	background: #e9f2f0;
	border-color: #0e6b62;
}

.pp-option:focus-visible {
	outline: 2px solid #0e6b62;
	outline-offset: 2px;
}

.pp-option[aria-pressed="true"] {
	background: #d8ebe8;
	border-color: #0e6b62;
	font-weight: 600;
}

.pp-senden {
	margin-top: .8em;
	min-height: 44px;
	padding: .6em 1.4em;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: #0e6b62;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

.pp-senden[disabled] {
	opacity: .45;
	cursor: default;
}

/* Schieberegler */
.pp-regler-wert {
	font-size: 1.7em;
	font-weight: 600;
	color: #0e6b62;
	margin: .2em 0 .35em;
	font-variant-numeric: tabular-nums;
}

.pp-regler {
	width: 100%;
	height: 44px;
	accent-color: #0e6b62;
	cursor: pointer;
}

.pp-regler-enden {
	display: flex;
	justify-content: space-between;
	font-size: .8em;
	color: #5a6b6a;
	margin-top: -.3em;
}

/* Ergebnis */
.pp-frage-klein {
	font-size: .95em;
	margin: .9em 0 .5em;
}

.pp-abstimmende {
	font-size: 1.15em;
	margin: 0 0 .8em;
	color: #12201f;
}
.pp-abstimmende b {
	font-size: 1.6em;
	color: #0e6b62;
	font-variant-numeric: tabular-nums;
	margin-right: .15em;
}
.pp-ergebnis-titel {
	font-size: .92em;
	color: #3d5250;
	margin: 0 0 .7em;
}

.pp-zeile {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	font-size: .9em;
	line-height: 1.3;
	margin-bottom: .15em;
}

.pp-zeile b {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.pp-zeile.pp-meine {
	font-weight: 600;
	color: #0e6b62;
}

.pp-balken {
	position: relative;
	height: 8px;
	background: #e3ebe9;
	border-radius: 2px;
	margin-bottom: .75em;
	overflow: hidden;
}

.pp-balken i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: #8fb8b3;
	border-radius: 2px;
}

.pp-balken.pp-meine i {
	background: #0e6b62;
}

.pp-n {
	font-size: .8em;
	color: #667977;
	margin: .5em 0 0;
}

.pp-fehler {
	font-size: .9em;
	color: #8a2b20;
	margin: .6em 0 0;
}

@media (prefers-color-scheme: dark) {
	.pp-box { background: #17201f; border-color: #2a3735; border-left-color: #57c2b4; }
	.pp-frage-text { color: #e7eeed; }
	.pp-option { background: #1d2827; color: #e7eeed; border-color: #3c4c4a; }
	.pp-option:hover, .pp-option:focus-visible { background: #22302e; border-color: #57c2b4; }
	.pp-option[aria-pressed="true"] { background: #1b3936; border-color: #57c2b4; }
	.pp-senden { background: #0e6b62; }
	.pp-regler-wert, .pp-zeile.pp-meine, .pp-abstimmende b { color: #57c2b4; }
	.pp-abstimmende { color: #e7eeed; }
	.pp-ergebnis-titel { color: #b3c3c1; }
	.pp-balken { background: #2a3735; }
	.pp-balken i { background: #3f6f69; }
	.pp-balken.pp-meine i { background: #57c2b4; }
	.pp-n, .pp-regler-enden { color: #849694; }
}

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

/* Regler vor der ersten Berührung: kein Wert, kein Anker. */
.pp-regler-wert.pp-regler-leer {
	font-size: 1em;
	font-weight: 400;
	color: #5a6b6a;
}
@media (prefers-color-scheme: dark) {
	.pp-regler-wert.pp-regler-leer { color: #849694; }
}