/*
 * Pflegegradrechner — Frontend-Styles
 *
 * Nutzt bewusst die vorhandenen Bricks-Theme-Variablen der Website
 * (--c-*, --space-*, --radius-*, --text-*) mit hart codierten Fallback-
 * werten, damit das Widget auch außerhalb einer Bricks-Seite lesbar
 * bleibt. Neue Klassen sind auf ein Minimum beschränkt und mit "pgr-"
 * präfixiert, um Kollisionen mit Theme-Klassen zu vermeiden.
 */

.pgr-calculator {
	--pgr-primary: var(--c-primary, hsl(49, 98%, 81%));
	--pgr-secondary: var(--c-secondary, hsl(47, 61%, 64%));
	--pgr-text: var(--c-text, hsl(0, 0%, 16%));
	--pgr-headline: var(--c-headline, hsl(0, 0%, 16%));
	--pgr-light: var(--c-light, hsl(60, 43%, 97%));
	--pgr-body: var(--cb-body, #fff);
	--pgr-space-2xs: var(--space-2xs, 0.9rem);
	--pgr-space-xs: var(--space-xs, 1.2rem);
	--pgr-space-s: var(--space-s, 1.6rem);
	--pgr-space-m: var(--space-m, 2.2rem);
	--pgr-space-l: var(--space-l, 3rem);
	--pgr-radius-s: var(--radius-s, 0.8rem);
	--pgr-radius-m: var(--radius-m, 1.2rem);
	--pgr-radius-l: var(--radius-l, 2rem);
	--pgr-radius-full: var(--radius-full, 999rem);
	--pgr-shadow: var(--box-shadow-primary, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px, rgba(0, 0, 0, 0.24) 0px 1px 2px 0px);
	--pgr-card-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
	--pgr-border: var(--border-1, 1px);

	/*
	 * 810px als Vorgabe — die Breite der Inhaltsspalte dieser Website
	 * (gemessen an .timeline-brussels__row auf /dienstleistungen/). Damit
	 * steht der Rechner auf einer Linie mit dem übrigen Seiteninhalt, statt
	 * mit einer eigenen Zahl daneben zu liegen. Bewusst schmaler als die
	 * volle Seitenbreite: Fragen und Formularfelder lesen sich in einer
	 * begrenzten Spalte deutlich besser.
	 *
	 * Über das Shortcode-Attribut width="…" je Platzierung änderbar.
	 */
	max-width: var(--pgr-max-width, 810px);
	margin-top: var(--pgr-space-l);
	margin-bottom: var(--pgr-space-l);
	margin-inline: auto;
	color: var(--pgr-text);
	font-family: inherit;
}

.pgr-calculator * {
	box-sizing: border-box;
}

/*
 * Durchgängige Fokus-Sichtbarkeit. Vorher hatte der gesamte Rechner keine
 * einzige :focus-Regel — wer per Tastatur bedient (und der Rechner wirbt
 * ausdrücklich mit "oder mit ENTER"), sah nicht, wo er sich befindet.
 * :focus-visible zeigt den Ring nur bei Tastaturbedienung, nicht bei
 * Mausklicks.
 */
.pgr-calculator :focus-visible {
	outline: 3px solid var(--pgr-headline);
	outline-offset: 2px;
	border-radius: var(--pgr-radius-s);
}

/* Bei reduzierter Bewegung keine Höhen-/Breiten-Animationen. */
@media (prefers-reduced-motion: reduce) {
	.pgr-calculator *,
	.pgr-calculator *::before,
	.pgr-calculator *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/*
 * Mit [pflegegrad_rechner background="#..."] bekommt der Container eine
 * eigene Fläche (--pgr-surface). Damit die Karte darauf nicht "verschwindet",
 * wenn jemand exakt die Kartenfarbe wählt, wird sie hier aus der
 * Containerfarbe Richtung Weiß aufgehellt statt fest gesetzt: bei getönten
 * Flächen entsteht der Kontrast über die Helligkeit, bei (fast) weißen
 * Flächen tragen zusätzlich Rahmen und Schatten der Karte.
 */
.pgr-calculator--boxed {
	background: var(--pgr-surface);
	border-radius: var(--pgr-radius-l);
	padding: var(--pgr-space-m);
}

@media (min-width: 640px) {
	.pgr-calculator--boxed {
		padding: var(--pgr-space-l);
	}
}

.pgr-calculator--boxed .pgr-card {
	background: color-mix(in srgb, var(--pgr-surface) 55%, #fff);
	border-color: color-mix(in srgb, var(--pgr-surface) 55%, hsla(0, 0%, 16%, 0.35));
}

.pgr-noscript {
	padding: var(--pgr-space-m);
	background: var(--pgr-light);
	border-radius: var(--pgr-radius-m);
	text-align: center;
}

/* ---------- Card shell shared by quiz + result ---------- */

.pgr-card {
	background: var(--pgr-light);
	border: var(--pgr-border) solid color-mix(in srgb, var(--pgr-secondary) 35%, transparent);
	border-radius: var(--pgr-radius-l);
	box-shadow: var(--pgr-card-shadow);
	padding: var(--pgr-space-m);
}

@media (min-width: 640px) {
	.pgr-card {
		padding: var(--pgr-space-l);
	}
}

/* ---------- Intro screen ---------- */

.pgr-intro {
	text-align: center;
}

.pgr-intro__eyebrow {
	display: inline-block;
	background: var(--pgr-secondary);
	color: var(--pgr-headline);
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35em 0.9em;
	border-radius: var(--pgr-radius-full);
	margin-bottom: var(--pgr-space-s);
}

.pgr-intro__title {
	font-size: var(--text-l, 1.8rem);
	font-weight: 500;
	color: var(--pgr-headline);
	margin: 0 0 var(--pgr-space-2xs);
}

.pgr-intro__lead {
	color: hsla(0, 0%, 16%, 0.75);
	max-width: 46ch;
	margin: 0 auto var(--pgr-space-m);
}

.pgr-intro__facts {
	display: flex;
	justify-content: center;
	gap: var(--pgr-space-m);
	flex-wrap: wrap;
	margin-bottom: var(--pgr-space-m);
}

.pgr-intro__fact strong {
	display: block;
	font-size: var(--text-m, 1.6rem);
	color: var(--pgr-headline);
}

.pgr-intro__fact span {
	font-size: 0.85em;
	color: hsla(0, 0%, 16%, 0.6);
}

.pgr-skip {
	display: block;
	margin-top: var(--pgr-space-xs);
	font-size: 0.9em;
	color: hsla(0, 0%, 16%, 0.55);
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
}

/* ---------- Progress ---------- */

.pgr-progress {
	display: flex;
	align-items: center;
	gap: var(--pgr-space-2xs);
	margin-top: var(--pgr-space-m);
	font-size: 0.85em;
	color: hsla(0, 0%, 16%, 0.6);
}

.pgr-progress__bar {
	flex: 1;
	height: 6px;
	background: hsla(0, 0%, 16%, 0.1);
	border-radius: var(--pgr-radius-full);
	overflow: hidden;
}

/*
 * display:block ist hier zwingend, nicht kosmetisch: Der Fill ist ein
 * <span> und damit standardmäßig inline — auf inline-Elementen wirken
 * width/height nicht, das Element wurde mit 0x0 Pixeln gerendert und der
 * Fortschrittsbalken blieb in jedem Schritt leer.
 */
.pgr-progress__fill {
	display: block;
	height: 100%;
	background: var(--pgr-secondary);
	border-radius: inherit;
	transition: width 0.3s ease;
}

/* ---------- Question step ---------- */

/*
 * Hinweis beim Wiedereinstieg in einen gespeicherten Zwischenstand.
 * Bewusst ruhig gehalten (kein Warn-Rot), da es sich um eine Hilfe
 * handelt und nicht um einen Fehler.
 */
.pgr-resume {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--pgr-space-2xs);
	background: color-mix(in srgb, var(--pgr-primary) 30%, var(--pgr-body));
	border-radius: var(--pgr-radius-m);
	padding: var(--pgr-space-2xs) var(--pgr-space-s);
	margin-bottom: var(--pgr-space-s);
	font-size: 0.9em;
}

.pgr-resume__text {
	flex: 1 1 auto;
}

.pgr-resume__reset {
	flex: 0 0 auto;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--pgr-headline);
	text-decoration: underline;
	cursor: pointer;
}

/*
 * Padding statt nackter Textlink: Als reiner Text war das Touch-Ziel nur
 * 19 px hoch. Der negative Rand hält die Optik unverändert, während die
 * treffbare Fläche auf 44 px wächst.
 */
.pgr-step__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 44px;
	background: none;
	border: none;
	color: var(--pgr-headline);
	font-size: 0.9em;
	cursor: pointer;
	padding: 0 0.6em 0 0;
	margin: 0 0 var(--pgr-space-2xs) -0.1em;
	border-radius: var(--pgr-radius-s);
}

.pgr-step__back:hover {
	text-decoration: underline;
}

.pgr-question {
	font-size: var(--text-l, 1.8rem);
	font-weight: 500;
	color: var(--pgr-headline);
	line-height: 1.25;
	margin: 0 0 var(--pgr-space-2xs);
}

.pgr-question__description {
	color: hsla(0, 0%, 16%, 0.65);
	margin: 0 0 var(--pgr-space-m);
}

.pgr-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pgr-space-2xs);
	margin-bottom: var(--pgr-space-m);
}

.pgr-options--list {
	grid-template-columns: 1fr;
}

@media (max-width: 520px) {
	.pgr-options:not(.pgr-options--list) {
		grid-template-columns: 1fr;
	}

	.pgr-options:not(.pgr-options--list) .pgr-option {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
		padding: var(--pgr-space-2xs) var(--pgr-space-s);
	}

	.pgr-options:not(.pgr-options--list) .pgr-option__icon {
		width: 2.1em;
		height: 2.1em;
	}

	.pgr-options:not(.pgr-options--list) .pgr-option__radio {
		position: static;
		margin-left: auto;
	}
}

.pgr-option {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pgr-space-2xs);
	padding: var(--pgr-space-s) var(--pgr-space-2xs);
	border: 2px solid hsla(0, 0%, 16%, 0.12);
	border-radius: var(--pgr-radius-m);
	background: var(--pgr-body);
	cursor: pointer;
	font: inherit;
	color: var(--pgr-text);
	text-align: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pgr-options--list .pgr-option {
	flex-direction: row;
	justify-content: flex-start;
	text-align: left;
	padding: var(--pgr-space-2xs) var(--pgr-space-s);
}

.pgr-option:hover {
	border-color: var(--pgr-secondary);
}

.pgr-option.is-selected {
	border-color: var(--pgr-secondary);
	background: color-mix(in srgb, var(--pgr-primary) 35%, var(--pgr-body));
}

.pgr-option__icon {
	width: 2.9em;
	height: 2.9em;
	flex-shrink: 0;
}

.pgr-option__radio {
	position: absolute;
	top: 0.8em;
	right: 0.8em;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	border: 2px solid hsla(0, 0%, 16%, 0.25);
}

.pgr-options--list .pgr-option__radio {
	position: static;
	margin-left: auto;
}

.pgr-option.is-selected .pgr-option__radio {
	border-color: var(--pgr-secondary);
	background: radial-gradient(circle, var(--pgr-secondary) 45%, transparent 50%);
}

.pgr-option__label {
	font-weight: 500;
}

/* ---------- Buttons & nav ---------- */

.pgr-actions {
	display: flex;
	align-items: center;
	gap: var(--pgr-space-2xs);
}

.pgr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font: inherit;
	/*
	 * Maße bewusst identisch zu den Theme-Buttons der Website
	 * (.bricks-button): Schriftgewicht 400, Zeilenhöhe 1.4, Polsterung
	 * 0.7778em/1.5556em — das ergibt dieselbe Höhe von 57px.
	 *
	 * Die Zeilenhöhe ist der entscheidende Wert: Ohne sie erbten die
	 * Buttons die 1.7 des Fließtextes und wurden dadurch 6px höher als
	 * jeder andere Button der Seite.
	 */
	font-weight: 400;
	line-height: 1.4;
	padding: 0.7778em 1.5556em;
	border-radius: var(--pgr-radius-full);
	border: var(--pgr-border) solid var(--pgr-secondary);
	background: var(--pgr-secondary);
	color: var(--pgr-headline);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s linear;
}

.pgr-btn:hover {
	filter: brightness(0.95);
}

.pgr-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pgr-btn--outline {
	background: transparent;
	color: var(--pgr-text);
	border-color: hsla(0, 0%, 16%, 0.3);
}

.pgr-hint {
	font-size: 0.85em;
	color: hsla(0, 0%, 16%, 0.5);
}

/* ---------- Result ---------- */

.pgr-result__header {
	margin-bottom: var(--pgr-space-m);
}

.pgr-result__title {
	font-size: var(--text-l, 1.8rem);
	font-weight: 500;
	color: var(--pgr-headline);
	margin: 0 0 var(--pgr-space-2xs);
}

.pgr-result__lead {
	color: hsla(0, 0%, 16%, 0.7);
	margin: 0;
}

.pgr-result-card {
	background: var(--pgr-body);
	border-radius: var(--pgr-radius-m);
	padding: var(--pgr-space-m);
	margin-bottom: var(--pgr-space-m);
}

.pgr-result-card__level {
	font-size: var(--text-xl, 2.2rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--pgr-headline);
	margin: 0;
}

/*
 * Die Punktzahl ist die zweitwichtigste Information nach dem Pflegegrad
 * und stand vorher in normaler Fließtextgröße. Etwas größer und mit
 * hervorgehobener Zahl wird sie auf einen Blick erfassbar.
 */
.pgr-result-card__score {
	font-size: 1.05em;
	color: hsla(0, 0%, 16%, 0.7);
	margin: var(--pgr-space-3xs, 0.3rem) 0 var(--pgr-space-s);
}

.pgr-result-card__score strong {
	font-weight: 700;
	color: var(--pgr-headline);
}

.pgr-result-card__budget {
	font-weight: 600;
	flex-basis: 100%;
}

.pgr-tags {
	display: flex;
	gap: var(--pgr-space-2xs);
	flex-wrap: wrap;
	margin-top: var(--pgr-space-s);
}

/* ---------- Result scale ("Strahl") ---------- */

/*
 * Seitliches Einrücken, damit Marker und Punktzahl bei 0 und 100 Punkten
 * nicht über den Kartenrand hinausragen (der Marker ist über der Skala
 * zentriert, die Zahl darüber noch breiter).
 */
.pgr-scale {
	padding-top: 1.6em;
	padding-inline: 16px;
}

.pgr-scale__track {
	position: relative;
	display: flex;
	height: 0.9rem;
	border-radius: var(--pgr-radius-full);
	overflow: visible;
}

.pgr-scale__segment {
	position: relative;
	height: 100%;
	background: hsla(0, 0%, 16%, 0.1);
}

.pgr-scale__segment:first-child {
	border-top-left-radius: var(--pgr-radius-full);
	border-bottom-left-radius: var(--pgr-radius-full);
}

.pgr-scale__segment:last-child {
	border-top-right-radius: var(--pgr-radius-full);
	border-bottom-right-radius: var(--pgr-radius-full);
}

.pgr-scale__segment + .pgr-scale__segment {
	margin-left: 2px;
}

.pgr-scale__segment--active {
	background: var(--pgr-secondary);
}

.pgr-scale__segment-label {
	position: absolute;
	bottom: -1.5em;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.75em;
	color: hsla(0, 0%, 16%, 0.5);
}

.pgr-scale__segment--active .pgr-scale__segment-label {
	color: var(--pgr-headline);
	font-weight: 700;
}

.pgr-scale__marker {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--pgr-headline);
	border: 2px solid var(--pgr-body);
	box-shadow: 0 0 0 1px hsla(0, 0%, 16%, 0.2);
}

.pgr-scale__marker-value {
	position: absolute;
	bottom: 1.4em;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.8em;
	font-weight: 700;
	color: var(--pgr-headline);
	white-space: nowrap;
}

.pgr-tag {
	font-size: 0.8em;
	padding: 0.3em 0.8em;
	border-radius: var(--pgr-radius-full);
	background: hsla(0, 0%, 100%, 0.7);
}

.pgr-tag--warn {
	background: hsl(30, 90%, 92%);
	color: hsl(25, 70%, 35%);
}

.pgr-tag--good {
	background: hsl(140, 45%, 92%);
	color: hsl(140, 45%, 28%);
}

/* ---------- Website-weiter CTA-Block ([pflegegrad_cta]) ---------- */

/*
 * Optisch am bestehenden Kontakt-Element der Startseite (.cta-madrid)
 * ausgerichtet: getönte Karte mit großem Radius, große Überschrift,
 * Pill-Button mit dünner Kontur.
 *
 * Der Block steht bewusst NICHT in einer Bricks-Sektion, sondern wird
 * unter Blogartikeln und in beliebigen Inhalten platziert. Deshalb bringt
 * er eigene vertikale Abstände mit — sonst klebt er am umgebenden Text.
 * isolation + display:flow-root verhindern, dass die Ränder mit denen des
 * Nachbarelements kollabieren und der Abstand je nach Umgebung anders
 * ausfällt.
 */
.pgr-ctablock {
	/*
	 * Helle Fläche als Standard, nicht die Primärfarbe: Die Überschrift
	 * nutzt die Theme-Hervorhebung (goldenes Wort mit Unterstreichung). Auf
	 * goldenem Grund sinkt deren Kontrast auf 1,49:1 und die Betonung
	 * verschwindet — auf der hellen Fläche liegt sie bei 1,69:1 und damit
	 * auf demselben Wert wie in den übrigen Abschnitten der Website. Über
	 * background="--c-primary" lässt sich weiterhin die goldene Karte
	 * wählen, dann sollte highlight="" gesetzt werden.
	 */
	--pgr-cta-surface: var(--c-light, hsl(60, 43%, 97%));
	--pgr-cta-ink: var(--c-headline, hsl(0, 0%, 16%));

	display: flow-root;
	box-sizing: border-box;
	/*
	 * An der Inhaltsbreite der Website ausrichten (--page-width, hier
	 * 1366px). Mit einem eigenen Zahlenwert saß der Block sichtbar schmaler
	 * als die Abschnitte darüber und darunter — die Kanten liefen nicht auf
	 * einer Linie. Der Rückfallwert greift nur, wenn das Theme die Variable
	 * nicht setzt.
	 */
	max-width: var(--page-width, 1100px);
	/*
	 * Längenangaben bewusst in px/ch statt rem: Das Theme setzt eine
	 * verkleinerte Root-Schriftgröße (1rem ≈ 10,4px), wodurch rem-Werte hier
	 * auf etwa zwei Drittel schrumpfen — die Textspalte war dadurch nur
	 * 458 px statt der beabsichtigten Breite. px und ch sind davon unabhängig.
	 */
	margin: clamp(32px, 6vw, 64px) auto;
	padding: clamp(24px, 4vw, 56px);
	background: var(--pgr-cta-surface);
	border-radius: var(--radius-l, 2rem);
	color: var(--pgr-cta-ink);
}

.pgr-ctablock * {
	box-sizing: border-box;
}

/* ch hält die Textspalte bei gut lesbarer Zeilenlänge. */
.pgr-ctablock__inner {
	max-width: 62ch;
}

/*
 * Mit Foto des Ansprechpartners: zweispaltig, Bild rechts. Die Textspalte
 * behält Vorrang (1fr vs. feste Bildbreite), damit die Aussage nicht
 * gequetscht wird. Unterhalb von 700px verfügbarer Breite fällt der Block
 * auf eine Spalte zurück — dazu unten mehr.
 */
.pgr-ctablock--with-media {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: clamp(20px, 3vw, 40px);
}

.pgr-ctablock--with-media .pgr-ctablock__inner {
	min-width: 0;
}

.pgr-ctablock__media {
	align-self: end;
	justify-self: end;
	width: clamp(150px, 22vw, 260px);
	margin-bottom: calc(-1 * clamp(24px, 4vw, 56px));
}

/*
 * Das Bild sitzt bündig auf der Unterkante der Karte (wie im Kontakt-
 * Element der Startseite) und ist unten mit demselben Radius beschnitten,
 * damit es nicht über die abgerundete Ecke hinausragt.
 */
.pgr-ctablock__media img {
	display: block;
	width: 100%;
	height: auto;
	border-bottom-left-radius: var(--radius-l, 2rem);
	border-bottom-right-radius: var(--radius-l, 2rem);
}

/*
 * Auf schmalen Breiten wird das Foto ausgeblendet statt verkleinert: Ein
 * auf Briefmarkengröße geschrumpftes Porträt bringt keinen Vertrauens-
 * gewinn, kostet aber Ladezeit und drängt die eigentliche Handlungs-
 * aufforderung nach unten.
 */
@media (max-width: 700px) {
	.pgr-ctablock--with-media {
		display: flow-root;
	}

	.pgr-ctablock__media {
		display: none;
	}
}

/*
 * Überschrift und Eyebrow tragen die Theme-Klassen (.brxe-heading,
 * .tagline) und holen sich Schriftgröße, Farbe, den goldenen Punkt und die
 * gezeichnete Unterstreichung von dort. Hier werden deshalb bewusst NUR
 * die Abstände gesetzt — würde das Plugin zusätzlich font-size oder color
 * definieren, liefen die Blöcke bei einer Theme-Anpassung auseinander.
 */
/*
 * Abstände an der bestehenden Sektion der Website ausgemessen und
 * übernommen (Eyebrow → Überschrift 25 px, Überschrift → Text 28 px),
 * damit der Block im gleichen Rhythmus steht wie die übrigen Abschnitte.
 */
.pgr-ctablock__eyebrow {
	margin: 0 0 25px;
}

.pgr-ctablock__title {
	margin: 0 0 28px;
}

.pgr-ctablock__intro {
	font-size: 1.02em;
	line-height: 1.55;
	margin: 0 0 24px;
	color: color-mix(in srgb, var(--pgr-cta-ink) 82%, transparent);
}

.pgr-ctablock__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/*
 * Beide Aktionen mit identischer Höhe und großzügigem Touch-Ziel — der
 * Block erscheint auch unter Blogartikeln, wo mobil gelesen wird.
 */
/*
 * Farben, Polsterung und Radius der Schaltflächen kommen vollständig aus
 * den Theme-Klassen (button--primary / button--secondary). Hier steht
 * bewusst nur, was das Theme nicht regelt: die Ausrichtung des Telefon-
 * Icons neben der Beschriftung.
 */
.pgr-ctablock__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.pgr-ctablock__phone svg {
	flex-shrink: 0;
}

.pgr-ctablock__contact {
	margin: 20px 0 0;
	font-size: 0.9em;
	color: color-mix(in srgb, var(--pgr-cta-ink) 65%, transparent);
}

.pgr-ctablock :focus-visible {
	outline: 3px solid var(--pgr-cta-ink);
	outline-offset: 3px;
}

/*
 * Auf schmalen Displays beide Aktionen über die volle Breite: große,
 * sicher treffbare Flächen sind hier wichtiger als eine kompakte Zeile.
 */
@media (max-width: 520px) {
	.pgr-ctablock__actions {
		flex-direction: column;
		align-items: stretch;
	}
}


/* ---------- Kontaktzeile (im gesamten Verlauf sichtbar) ---------- */

/*
 * Gemeinsame Hülle für Karte + Kontaktzeile. Sie allein trägt Rahmen,
 * Radius und Schatten; die Kinder legen ihre eigenen ab. overflow:hidden
 * beschneidet sie auf die Rundung, sodass an der Nahtstelle keine Kante
 * entstehen kann.
 */
.pgr-shell {
	background: var(--pgr-light);
	border: var(--pgr-border) solid color-mix(in srgb, var(--pgr-secondary) 35%, transparent);
	border-radius: var(--pgr-radius-l);
	box-shadow: var(--pgr-card-shadow);
	overflow: hidden;
}

.pgr-shell > .pgr-card {
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.pgr-contactbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pgr-space-2xs) var(--pgr-space-s);
	padding: var(--pgr-space-xs) var(--pgr-space-m);
	background: color-mix(in srgb, var(--pgr-primary) 26%, var(--pgr-body));
	/* Nur eine Haarlinie als Trennung — der Rahmen kommt von der Hülle. */
	border-top: var(--pgr-border) solid color-mix(in srgb, var(--pgr-secondary) 35%, transparent);
}

@media (min-width: 640px) {
	.pgr-contactbar {
		padding-inline: var(--pgr-space-l);
	}
}

/*
 * flex-basis bewusst klein: Mit `auto` beansprucht der Text seine volle
 * Inhaltsbreite, schiebt den Anruf-Button in die nächste Zeile und lässt
 * rechts daneben Platz ungenutzt. So schrumpft der Text stattdessen und
 * bricht bei Bedarf intern um — der Button bleibt rechts in derselben Zeile.
 */
.pgr-contactbar__text {
	flex: 1 1 16rem;
	min-width: 0;
	margin: 0;
	font-size: 0.95em;
	line-height: 1.45;
	color: hsla(0, 0%, 16%, 0.7);
}

.pgr-contactbar__name {
	color: var(--pgr-headline);
	font-weight: 600;
}

.pgr-contactbar__hours {
	color: hsla(0, 0%, 16%, 0.55);
	white-space: nowrap;
}

/*
 * Anruf-Ziel bewusst großzügig: Die Zielgruppe bedient das Gerät oft mit
 * eingeschränkter Feinmotorik, daher deutlich über der 44px-Mindestgröße.
 */
/* Gleiche Maße wie .pgr-btn und die Theme-Buttons — siehe dort. */
.pgr-contactbar__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.7778em 1.5556em;
	border-radius: var(--pgr-radius-full);
	border: var(--pgr-border) solid var(--pgr-secondary);
	background: var(--pgr-secondary);
	color: var(--pgr-headline);
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.pgr-contactbar__phone:hover,
.pgr-contactbar__phone:focus-visible {
	filter: brightness(0.95);
	color: var(--pgr-headline);
}

.pgr-contactbar__phone svg {
	flex-shrink: 0;
}

@media (max-width: 520px) {
	.pgr-contactbar {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.pgr-contactbar__phone {
		justify-content: center;
	}

	/* Umbruch vor der Uhrzeit statt mitten im Namen. */
	.pgr-contactbar__hours {
		display: block;
	}

	.pgr-contactbar__hours [aria-hidden] {
		display: none;
	}
}

/* ---------- Rückruf-Formular ---------- */

.pgr-form__title {
	font-size: var(--text-m, 1.6rem);
	font-weight: 500;
	color: var(--pgr-headline);
	margin: 0 0 var(--pgr-space-2xs);
}

.pgr-form__intro {
	color: hsla(0, 0%, 16%, 0.7);
	margin: 0 0 var(--pgr-space-s);
}

.pgr-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pgr-space-xs);
}

@media (max-width: 520px) {
	.pgr-form__row {
		grid-template-columns: 1fr;
	}
}

.pgr-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin-bottom: var(--pgr-space-xs);
}

.pgr-form__field label {
	font-weight: 500;
	color: var(--pgr-headline);
}

.pgr-form__field input,
.pgr-form__field textarea {
	font: inherit;
	color: var(--pgr-text);
	padding: 0.7em 0.9em;
	min-height: 48px;
	border: 2px solid hsla(0, 0%, 16%, 0.18);
	border-radius: var(--pgr-radius-s);
	background: var(--pgr-body);
	width: 100%;
}

.pgr-form__field textarea {
	resize: vertical;
}

.pgr-form__field input:focus-visible,
.pgr-form__field textarea:focus-visible {
	outline: none;
	border-color: var(--pgr-secondary);
}

.pgr-form__hint,
.pgr-form__note {
	font-size: 0.85em;
	color: hsla(0, 0%, 16%, 0.6);
	margin: -0.4em 0 var(--pgr-space-s);
}

/*
 * Pflichtfeld-Stern. Bewusst in der Textfarbe statt in Rot: Rot signalisiert
 * einen Fehler, hier geht es nur um eine Kennzeichnung.
 */
.pgr-req {
	color: var(--pgr-headline);
	font-weight: 700;
}

.pgr-form__legend {
	font-size: 0.85em;
	color: hsla(0, 0%, 16%, 0.6);
	margin: 0 0 var(--pgr-space-s);
}

.pgr-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	font-size: 0.9em;
	line-height: 1.45;
	margin-bottom: var(--pgr-space-2xs);
	cursor: pointer;
}

/*
 * Bewusst größer als die Browser-Vorgabe: Die Einwilligung ist das
 * rechtlich entscheidende Bedienelement und wird von der Zielgruppe oft
 * auf dem Handy mit eingeschränkter Feinmotorik bedient. Die umgebende
 * <label> macht zusätzlich den gesamten Text anklickbar.
 */
.pgr-form__consent input {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin-top: 0.05em;
	accent-color: var(--pgr-secondary);
}

.pgr-form__note {
	margin-top: 0;
}

.pgr-form__status {
	margin: var(--pgr-space-2xs) 0 0;
	font-size: 0.9em;
	min-height: 1.2em;
}

.pgr-form__status.is-error {
	color: hsl(4, 62%, 40%);
	font-weight: 500;
}

.pgr-form__success {
	margin: 0;
	padding: var(--pgr-space-s);
	background: hsl(140, 45%, 94%);
	color: hsl(140, 45%, 25%);
	border-radius: var(--pgr-radius-m);
	font-weight: 500;
	text-align: center;
}

/*
 * Honeypot: muss für Bots im DOM und ausfüllbar sein, für Menschen aber
 * unsichtbar — daher aus dem Sichtbereich schieben statt display:none.
 */
.pgr-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Module accordion ---------- */

/*
 * Abschnitte innerhalb der einen Ergebnis-Karte. Getrennt durch eine feine
 * Linie statt durch eine neue Kachel — der Zusammenhang bleibt sichtbar.
 */
.pgr-section {
	margin-top: var(--pgr-space-l);
	padding-top: var(--pgr-space-l);
	border-top: var(--pgr-border) solid hsla(0, 0%, 16%, 0.12);
}

.pgr-section__title {
	font-size: var(--text-m, 1.6rem);
	font-weight: 500;
	color: var(--pgr-headline);
	margin: 0 0 var(--pgr-space-2xs);
}

.pgr-section__hint {
	color: hsla(0, 0%, 16%, 0.6);
	font-size: 0.9em;
	margin: 0 0 var(--pgr-space-s);
}

.pgr-module {
	border-top: var(--pgr-border) solid hsla(0, 0%, 16%, 0.1);
}

/*
 * Kein Abschluss-Rahmen am letzten Modul: Darunter folgt die nächste
 * Sektion mit eigener Trennlinie — beide zusammen ergaben zwei fast
 * gleiche Linien mit einem Spalt dazwischen.
 */

/*
 * Die Zeile ist anklickbar und ändert die Angaben — das muss man ihr
 * ansehen. Vorher stand rechts nur ein kleiner Chevron, der als Zierde
 * gelesen wurde. Jetzt zusätzlich eine Beschriftung ("Anpassen") und ein
 * Hover-Zustand über die volle Zeile.
 */
.pgr-module__summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 0.35em;
	gap: var(--pgr-space-2xs);
	width: 100%;
	background: none;
	border: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
	padding: var(--pgr-space-s) var(--pgr-space-2xs);
	margin-inline: calc(-1 * var(--pgr-space-2xs));
	border-radius: var(--pgr-radius-s);
	color: var(--pgr-headline);
	font-weight: 500;
	transition: background-color 0.15s ease;
}

.pgr-module__summary:hover {
	background: color-mix(in srgb, var(--pgr-primary) 22%, transparent);
}

/*
 * flex-basis statt "auto": Unterschreitet der Platz diese Breite, rutschen
 * Punkte und "Anpassen" in eine zweite Zeile, statt den Bereichsnamen auf
 * wenige Pixel zusammenzudrücken — bei langen Namen überlagerten sich
 * sonst Text und Punktzahl.
 *
 * Bewusst über flex-wrap gelöst und nicht über eine Media Query: Der
 * Rechner kann auch auf einem breiten Bildschirm in einer schmalen Spalte
 * stehen, wo eine Abfrage der Bildschirmbreite nicht greifen würde.
 */
.pgr-module__name {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	flex: 1 1 15rem;
	min-width: 0;
	padding-right: var(--pgr-space-2xs);
}

.pgr-module__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	flex: 0 0 auto;
	font-size: 0.82em;
	font-weight: 400;
	color: hsla(0, 0%, 16%, 0.6);
	white-space: nowrap;
}

.pgr-module__summary:hover .pgr-module__toggle {
	color: var(--pgr-headline);
}

/* Beim Umbruch die Bedienelemente rechts ausrichten. */
.pgr-module__toggle {
	margin-left: auto;
}

.pgr-module__score {
	font-weight: 700;
	flex: 0 0 auto;
	white-space: nowrap;
}

.pgr-module__score small {
	font-weight: 400;
	color: hsla(0, 0%, 16%, 0.55);
}

/*
 * Der Bereich (kognitiv oder Verhalten), der nach § 15 SGB XI nicht in die
 * Gesamtpunktzahl einfließt: Punkte bleiben sichtbar, werden aber optisch
 * zurückgenommen, damit die Summenbildung nachvollziehbar bleibt.
 */
.pgr-module__note {
	font-size: 0.78em;
	font-weight: 400;
	line-height: 1.3;
	color: hsla(0, 0%, 16%, 0.55);
}

.pgr-module__score--muted {
	color: hsla(0, 0%, 16%, 0.4);
}

.pgr-module-bar {
	height: 8px;
	background: hsla(0, 0%, 16%, 0.1);
	border-radius: var(--pgr-radius-full);
	overflow: hidden;
	margin-bottom: var(--pgr-space-2xs);
}

.pgr-module-bar__fill {
	height: 100%;
	background: var(--pgr-secondary);
	transition: width 0.25s ease;
}

.pgr-module__body {
	padding-bottom: var(--pgr-space-s);
	display: none;
}

.pgr-module.is-open .pgr-module__body {
	display: block;
}

.pgr-module.is-open .pgr-module__summary svg {
	transform: rotate(180deg);
}

.pgr-item {
	margin-bottom: var(--pgr-space-2xs);
}

.pgr-item__label {
	font-size: 0.9em;
	margin-bottom: 0.4em;
	color: hsla(0, 0%, 16%, 0.75);
}

.pgr-item__levels {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.4em;
}

@media (max-width: 520px) {
	.pgr-item__levels {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * min-height statt reinem Padding: Bei kurzen Beschriftungen
 * ("selbstständig") schrumpften die Schaltflächen auf 35 px und lagen
 * damit unter der 44-px-Grenze für zuverlässig treffbare Touch-Ziele —
 * bei dieser Zielgruppe der kritischste Wert im ganzen Formular.
 */
.pgr-item__level {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-size: 0.78em;
	padding: 0.6em 0.5em;
	border: 2px solid hsla(0, 0%, 16%, 0.12);
	border-radius: var(--pgr-radius-s);
	background: var(--pgr-body);
	color: var(--pgr-text);
	cursor: pointer;
	text-align: center;
	line-height: 1.25;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pgr-item__level:hover {
	border-color: color-mix(in srgb, var(--pgr-secondary) 60%, transparent);
}

.pgr-item__level.is-selected {
	border-color: var(--pgr-secondary);
	background: color-mix(in srgb, var(--pgr-primary) 35%, var(--pgr-body));
	font-weight: 600;
}

/* ---------- Budget table ---------- */

.pgr-budget__tabs {
	display: flex;
	gap: 0.4em;
	margin-bottom: var(--pgr-space-s);
	flex-wrap: wrap;
}

/*
 * Umschalter, kein Handlungsbutton — deshalb bewusst kompakter als die
 * 57px der Aktionsbuttons. Die Zeilenhöhe ist explizit gesetzt: Vorher
 * erbten die Tabs die 1.7 des Fließtextes, wodurch ihre Höhe eher zufällig
 * zustande kam als gewählt.
 */
.pgr-budget__tab {
	padding: 0.5em 1em;
	border-radius: var(--pgr-radius-full);
	border: 2px solid hsla(0, 0%, 16%, 0.15);
	background: var(--pgr-body);
	cursor: pointer;
	font: inherit;
	line-height: 1.4;
}

.pgr-budget__tab.is-active {
	border-color: var(--pgr-secondary);
	background: var(--pgr-secondary);
	font-weight: 600;
}

.pgr-budget__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pgr-space-2xs);
	margin-bottom: var(--pgr-space-2xs);
}

.pgr-budget__item {
	background: var(--pgr-body);
	border: var(--pgr-border) solid hsla(0, 0%, 16%, 0.1);
	border-radius: var(--pgr-radius-s);
	padding: var(--pgr-space-2xs);
}

.pgr-budget__item-label {
	font-size: 0.8em;
	color: hsla(0, 0%, 16%, 0.6);
}

.pgr-budget__item-value {
	font-size: 1.1em;
	font-weight: 600;
}

.pgr-budget__item-value small {
	font-weight: 400;
	font-size: 0.7em;
	color: hsla(0, 0%, 16%, 0.55);
}

.pgr-budget__list {
	background: var(--pgr-body);
	border: var(--pgr-border) solid hsla(0, 0%, 16%, 0.1);
	border-radius: var(--pgr-radius-s);
	overflow: hidden;
}

.pgr-budget__row {
	display: flex;
	justify-content: space-between;
	padding: 0.7em var(--pgr-space-2xs);
	font-size: 0.9em;
}

.pgr-budget__row:not(:last-child) {
	border-bottom: var(--pgr-border) solid hsla(0, 0%, 16%, 0.08);
}

/* ---------- Disclaimer ---------- */

.pgr-disclaimer {
	margin-top: var(--pgr-space-l);
	padding: var(--pgr-space-s);
	border-radius: var(--pgr-radius-s);
	background: var(--pgr-body);
	font-size: 0.82em;
	line-height: 1.5;
	color: hsla(0, 0%, 16%, 0.65);
}

/* ---------- CTA / result actions ---------- */

/*
 * Werkzeugleiste für das Ergebnis-Dokument, klar abgesetzt von der
 * Haupthandlung darüber.
 *
 * Vorher trugen "Rückruf anfordern" und "Als PDF herunterladen" dieselbe
 * gefüllte Optik — zwei gleich starke Buttons direkt untereinander, ohne
 * erkennbare Zuordnung. Jetzt gibt es eine Rangfolge: gefüllt = die
 * eigentliche Handlung (Rückruf), Kontur = Dokumentaktion, stiller
 * Textbutton = Abbruch/Neustart. Die Linie darüber trennt beide Bereiche,
 * ohne eine weitere Kachel einzuführen.
 */
.pgr-result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pgr-space-2xs);
	margin-top: var(--pgr-space-l);
	padding-top: var(--pgr-space-s);
	border-top: var(--pgr-border) solid hsla(0, 0%, 16%, 0.12);
}

/* Stiller Textbutton — vorhanden, aber ohne Anspruch auf Aufmerksamkeit. */
.pgr-btn--quiet {
	background: none;
	border-color: transparent;
	color: hsla(0, 0%, 16%, 0.65);
	text-decoration: underline;
	padding-inline: var(--pgr-space-xs);
}

.pgr-btn--quiet:hover {
	color: var(--pgr-headline);
	filter: none;
}

/* ---------- Print / PDF export ----------
 * Statt visibility:hidden auf die ganze restliche Seite zu setzen (das
 * verursacht leere Druckseiten, weil ausgeblendete Elemente weiterhin
 * Höhe im Layout beanspruchen), klont pgr-app.js beim Download den
 * Ergebnis-Inhalt in #pgr-print-root, ein direktes Kind von <body>.
 * Damit reicht ein einzelnes display:none auf allen ANDEREN
 * body-Kindern, um zuverlässig nur den Rechner zu drucken — unabhängig
 * davon, wie das Theme/der Page-Builder die Seite drumherum aufbaut.
 */

#pgr-print-root {
	display: none;
}

@media print {
	body > *:not(#pgr-print-root) {
		display: none !important;
	}

	#pgr-print-root {
		display: block !important;
	}

	#pgr-print-root .pgr-calculator {
		max-width: none;
	}

	#pgr-print-root .pgr-step,
	#pgr-print-root .pgr-progress,
	#pgr-print-root .pgr-result-actions,
	#pgr-print-root .pgr-budget__tabs,
	#pgr-print-root .pgr-form,
	#pgr-print-root .pgr-resume,
	#pgr-print-root .pgr-result__header,
	#pgr-print-root .pgr-module__summary svg {
		display: none !important;
	}

	/* ---- Dokumentkopf ---- */

	.pgr-print-head {
		margin-bottom: 10mm;
		padding-bottom: 4mm;
		border-bottom: 2px solid #282828;
	}

	.pgr-print-head__row {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 8mm;
	}

	.pgr-print-head__title {
		font-size: 15pt;
		font-weight: 700;
	}

	.pgr-print-head__date {
		font-size: 9pt;
		color: #555;
	}

	.pgr-print-head__result {
		margin: 2mm 0 0;
		font-size: 12pt;
	}

	.pgr-print-head__result strong {
		font-size: 15pt;
	}

	.pgr-print-head__contact {
		margin: 1mm 0 0;
		font-size: 9pt;
		color: #555;
	}

	/*
	 * Seitenumbrüche: Überschriften dürfen nicht allein am Seitenfuß
	 * stehen, und ein Modul soll nicht mitten in der Kriterienliste
	 * umbrechen. Ohne diese Regeln riss der Ausdruck an beliebiger Stelle —
	 * das war der wesentliche Grund, warum er wie ein Bildschirmabzug wirkte.
	 */
	#pgr-print-root .pgr-section {
		margin-top: 8mm;
		padding-top: 4mm;
		border-top: 1px solid #999;
		page-break-before: auto;
		break-before: auto;
	}

	#pgr-print-root .pgr-section__title {
		font-size: 12pt;
		page-break-after: avoid;
		break-after: avoid;
	}

	/*
	 * Bedienhinweise gehören nicht ins PDF: "Passen Sie einzelne Angaben
	 * an …" und "Vergleichen Sie verschiedene Pflegegrade" beziehen sich
	 * auf Elemente, die im Ausdruck gar nicht existieren.
	 */
	#pgr-print-root .pgr-section__hint,
	#pgr-print-root .pgr-result__lead {
		display: none !important;
	}

	#pgr-print-root .pgr-module__summary {
		page-break-after: avoid;
		break-after: avoid;
		padding: 2mm 0;
		font-size: 11pt;
	}

	#pgr-print-root .pgr-module-bar {
		display: none;
	}

	/*
	 * Die Kontaktzeile bleibt im PDF bewusst erhalten: Der Ausdruck wird
	 * oft an Angehörige weitergegeben oder zum Beratungstermin
	 * mitgenommen — dann soll die Telefonnummer daraufstehen.
	 */
	#pgr-print-root .pgr-contactbar {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	#pgr-print-root .pgr-card {
		box-shadow: none;
		border: none;
	}

	#pgr-print-root .pgr-module__body {
		display: block !important;
	}

	/*
	 * Browser entfernen beim Drucken standardmäßig Hintergrundfarben
	 * (print-color-adjust: economy). Ohne diese Ausnahme wären im PDF
	 * genau die Elemente unsichtbar, die die Aussage tragen: die
	 * Pflegegrad-Skala, die Markierung der gewählten Stufe und die
	 * Abstands-Tags. Alle vier Stufen-Buttons sähen dann identisch aus.
	 */
	#pgr-print-root,
	#pgr-print-root * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/*
	 * Im PDF ist die Auswahl ein Ergebnis, kein Bedienelement: statt aller
	 * vier Stufen-Buttons je Kriterium (196 Buttons ≈ 6 A4-Seiten) wird nur
	 * die tatsächlich gewählte Stufe als Text gedruckt.
	 */
	#pgr-print-root .pgr-item__level:not(.is-selected) {
		display: none !important;
	}

	/*
	 * Kriterienzeilen als Tabelle mit Führungslinie: links das Kriterium,
	 * rechts die gewählte Stufe. Deutlich besser lesbar als zwei lose
	 * Textblöcke und der Grund, warum der Ausdruck jetzt wie ein Dokument
	 * und nicht wie eine Bildschirmkopie aussieht.
	 */
	#pgr-print-root .pgr-item {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 4mm;
		/* Bildschirm-Abstand zurücksetzen — auf Papier wirkt die Liste
		   sonst zerrissen und braucht unnötig viele Seiten. */
		margin: 0;
		padding: 1.4mm 0;
		border-bottom: 1px dotted #bbb;
		font-size: 10pt;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	#pgr-print-root .pgr-item__label {
		margin: 0;
		font-size: inherit;
		color: #000;
	}

	#pgr-print-root .pgr-module__body {
		padding-bottom: 3mm;
	}

	#pgr-print-root .pgr-result-card {
		margin-bottom: 4mm;
		padding: 4mm;
	}

	#pgr-print-root .pgr-item__levels {
		display: block;
		flex: 0 0 auto;
	}

	#pgr-print-root .pgr-item__level.is-selected {
		border: none;
		background: none;
		padding: 0;
		font-weight: 700;
	}

	#pgr-print-root .pgr-module {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	#pgr-print-root .pgr-result-card,
	#pgr-print-root .pgr-budget__panel {
		page-break-inside: avoid;
		break-inside: avoid;
	}
}

@page {
	margin: 15mm;
}