/* ==========================================================================
   Unterstützen, Neugestaltung 2026 (Pattern helfen-helfen/seite-unterstuetzen-v2)
   Quelle: docs/handoff/passivmitglieder-seite/design/Passivmitglieder-Seite.dc.html
   Nur auf /unterstuetzen/ und /unterstuetzen-vorschau/ geladen, und nur mit
   dem neuen Pattern (functions.php).

   Bewegung und Reaktion wie /mitmachen/ und /verbuendete/, siehe
   docs/handoff/ERGAENZUNG-BEWEGUNG-UND-REAKTION.md. Keine eigenen Effekte.
   ========================================================================== */

.pm2 {
	--pm2-seite: var(--wp--preset--color--weiss, #FFFFFF);
	--pm2-soft: var(--wp--preset--color--ci-blau-05, #F3F4FB);
	--pm2-karte: var(--wp--preset--color--ci-blau-10, #E8EAF6);
	--pm2-text: var(--wp--preset--color--ci-blau, #2A3287);
	--pm2-text-2: var(--wp--preset--color--text-hell, #3F4894);
	--pm2-leise: var(--wp--preset--color--text-leise, #5A62A0);
	--pm2-linie: var(--wp--preset--color--ci-blau-10, #E8EAF6);
	--pm2-linie-2: #C9CDEA;
	--pm2-primaer: var(--wp--preset--color--ci-blau, #2A3287);
	--pm2-primaer-hover: var(--wp--preset--color--ci-blau-90, #444DA0);
	--pm2-blass: var(--wp--preset--color--ci-blau-30, #BEC7F0);
	--pm2-fehler: #B42318;
	--pm2-ease: cubic-bezier(0.22, 1, 0.36, 1);

	background: var(--pm2-seite);
	color: var(--pm2-text);
}

.page-content.pm2 { max-width: none; width: auto; }

:where(.pm2) :where(*),
:where(.pm2) :where(*)::before,
:where(.pm2) :where(*)::after { box-sizing: border-box; }

.pm2 [id] { scroll-margin-top: 96px; }
.pm2 [hidden] { display: none !important; }

.pm2 :focus-visible { outline: 3px solid #6B75BD; outline-offset: 3px; border-radius: 8px; }
.pm2 .pm2-rechte :focus-visible { outline-color: #FFFFFF; }

/* Textlinks: Unterstreichung rueckt bei Hover und Fokus nach unten. */
.pm2 p a,
.pm2-textlink {
	color: var(--pm2-primaer);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: text-underline-offset .2s, text-decoration-thickness .2s;
}
.pm2 p a:hover,
.pm2 p a:focus-visible,
.pm2-textlink:hover,
.pm2-textlink:focus-visible { text-underline-offset: 5px; text-decoration-thickness: 2px; }
.pm2-textlink { align-self: flex-start; font-size: 16px; font-weight: 700; }

/* ── Raster und Typografie ───────────────────────────────────────────── */
.pm2 section {
	position: relative;
	padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 32px);
	background: var(--pm2-seite);
}
.pm2-wrap { max-width: 1280px; margin: 0 auto; }
.pm2-stapel { display: flex; flex-direction: column; }
.pm2-stapel--24 { gap: 24px; }
.pm2-stapel--28 { gap: 28px; }
.pm2-stapel--40 { gap: 40px; }

.pm2-zweispaltig {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 40px 64px;
	align-items: start;
}
.pm2-zweispaltig--faq { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.pm2-kopf { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.pm2-kopf--eng { gap: 10px; max-width: none; }

.pm2-eyebrow { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pm2-leise); }
.pm2-eyebrow--hell { color: var(--pm2-blass); }

.pm2-h1 {
	margin: 0;
	max-width: 980px;
	font-size: clamp(34px, 5.6vw, 76px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--pm2-text);
	text-wrap: balance;
	outline: none;
}
.pm2-h1--klein { font-size: clamp(30px, 4vw, 48px); }
.pm2-h2 { margin: 0; font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.15; color: var(--pm2-text); text-wrap: balance; }
.pm2-h2--hell { color: #FFFFFF; }
.pm2-h3 { margin: 0; max-width: 720px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; line-height: 1.3; color: var(--pm2-text); }
.pm2-lead { margin: 0; font-size: 18px; line-height: 1.65; color: var(--pm2-text-2); text-wrap: pretty; }
.pm2-lead--hero { max-width: 620px; }
@media (max-width: 640px) { .pm2-lead br { display: none; } }

/* ── Knoepfe ─────────────────────────────────────────────────────────── */
.pm2-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }
.pm2-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.875rem 2rem;
	border-radius: 8px;
	border: 2px solid var(--pm2-primaer);
	background: var(--pm2-primaer);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.pm2-knopf:hover,
.pm2-knopf:focus-visible { background: var(--pm2-primaer-hover); border-color: var(--pm2-primaer-hover); color: #FFFFFF; }
.pm2-knopf--rand,
.pm2-knopf--weiss { background: #FFFFFF; color: var(--pm2-primaer); }
.pm2-knopf--rand { background: transparent; }
.pm2-knopf--rand:hover,
.pm2-knopf--rand:focus-visible,
.pm2-knopf--weiss:hover,
.pm2-knopf--weiss:focus-visible { background: var(--pm2-soft); border-color: var(--pm2-primaer); color: var(--pm2-primaer); }
.pm2-knopf--form { flex: 0 0 auto; white-space: normal; text-wrap: balance; }
.pm2-knopf[disabled] { opacity: .7; cursor: progress; }

/* PULS: dieselben Keyframes wie auf /verbuendete/ (wf-43). Dort steht der
   Knopf auf dunklem Grund und der Ring ist weiss; hier auf weissem Grund,
   deshalb ein CI-blauer Ring. Nach dem Klick ruhig (.ist-ruhig). */
.pm2-puls {
	--pm2-puls-ring: rgba(42, 50, 135, 0.45);
	animation: hhsPuls 2s ease-out infinite;
}
.pm2-puls.ist-ruhig { animation: none; }
@keyframes hhsPuls {
	0%   { box-shadow: 0 0 0 0 var(--pm2-puls-ring, rgba(255, 255, 255, 0.7)), 0 8px 24px rgba(0, 0, 0, 0.25); }
	70%  { box-shadow: 0 0 0 16px rgba(42, 50, 135, 0), 0 8px 24px rgba(0, 0, 0, 0.25); }
	100% { box-shadow: 0 0 0 0 rgba(42, 50, 135, 0), 0 8px 24px rgba(0, 0, 0, 0.25); }
}

/* ── KARTEN-REAKTION, wie /verbuendete/ und die Startseite ────────────
   Anheben, Schatten, Linie unten zieht in CI-Blau von links auf, Pfeil
   rueckt nach rechts. Nur mit Maus; Link-Karten auch beim Tastaturfokus.
   Gewaehlte Auswahlkarten behalten die Linie. */
.pm2-karte {
	position: relative;
	overflow: hidden;
	transition: transform .35s var(--pm2-ease), box-shadow .35s var(--pm2-ease), border-color .2s, background-color .2s;
}
.pm2-karte::before,
.pm2-karte::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	max-width: none;
	height: 4px;
	pointer-events: none;
}
.pm2-karte::before { background: var(--pm2-linie); }
.pm2-karte::after {
	background: var(--pm2-primaer);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s var(--pm2-ease);
}
.pm2-karte[aria-checked="true"]::after { transform: scaleX(1); }
.pm2-pfeil { display: inline-block; transition: transform .35s var(--pm2-ease); }
a.pm2-karte:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(42, 50, 135, 0.16), 0 0 0 3px #6B75BD;
	outline: none;
}
a.pm2-karte:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
	.pm2-karte:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(42, 50, 135, 0.16); }
	.pm2-karte:hover::after { transform: scaleX(1); }
	.pm2-karte:hover .pm2-pfeil { transform: translateX(4px); }
	.pm2-karte[aria-checked="false"]:hover { border-color: var(--pm2-primaer); }
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.pm2 .pm2-hero,
.pm2 .pm2-bestaetigung {
	padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 32px);
	border-bottom: 1px solid var(--pm2-linie);
}
.pm2-haken {
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--pm2-primaer);
	color: #FFFFFF;
	font-size: 26px;
	font-weight: 700;
}

/* ── Wofuer ──────────────────────────────────────────────────────────── */
.pm2 .pm2-wofuer { background: var(--pm2-soft); }
.pm2-projekte { display: flex; flex-direction: column; gap: 12px; }
.pm2-projekt {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px 22px;
	border-radius: 14px;
	background: #FFFFFF;
	text-decoration: none;
}
.pm2-projekt__text { display: flex; flex-direction: column; gap: 4px; }
.pm2-projekt__tag { font-size: 14px; font-weight: 600; color: var(--pm2-leise); }
.pm2-projekt__titel { font-size: 18px; font-weight: 800; color: var(--pm2-text); }
.pm2-projekt__titel .immerda { font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.pm2-projekt__satz { font-size: 15px; line-height: 1.55; color: var(--pm2-text-2); }
.pm2-projekt > .pm2-pfeil { flex: 0 0 auto; font-size: 18px; font-weight: 700; color: var(--pm2-primaer); }

/* ── Rechte (dunkel) ─────────────────────────────────────────────────── */
.pm2 .pm2-rechte { background: linear-gradient(160deg, #2A3287 0%, #1E2668 60%, #151B4A 100%); color: #FFFFFF; }
.pm2-rechte__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(270px, calc((100% - 24px) / 3))), 1fr));
	gap: 12px;
	align-items: start;
}
.pm2-recht { border-radius: 12px; background: rgba(255, 255, 255, 0.08); }
.pm2-recht__kopf {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding: 12px 18px;
	background: none;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: #FFFFFF;
	transition: background-color .2s;
}
.pm2-recht__kopf:hover { background: rgba(255, 255, 255, 0.08); }
.pm2-recht__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
}
.pm2-recht__titel { flex: 1; font-size: 17px; font-weight: 700; line-height: 1.3; }
.pm2-zeichen { flex: 0 0 auto; font-size: 22px; line-height: 1; }
.pm2-recht .pm2-zeichen { color: var(--pm2-blass); }
.pm2-recht__text { margin: 0; padding: 0 18px 18px 72px; font-size: 15px; line-height: 1.6; color: var(--pm2-blass); text-wrap: pretty; }

/* ── Beitritt ────────────────────────────────────────────────────────── */
.pm2 .pm2-beitritt { background: var(--pm2-soft); }
.pm2-anker { position: absolute; top: 0; }

.pm2-seite { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 960px) {
	.pm2-seite { position: sticky; top: 96px; }
}
.pm2-auswahl {
	display: none;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
	padding: 24px;
	border-radius: 16px;
	background: linear-gradient(160deg, #2A3287 0%, #1E2668 100%);
	color: #FFFFFF;
}
@media (min-width: 960px) { .pm2-auswahl { display: flex; } }
.pm2-auswahl__titel { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pm2-blass); }
.pm2-auswahl__art { font-size: 22px; font-weight: 800; }
.pm2-auswahl__beitrag { font-size: 17px; font-weight: 600; }
.pm2-hinweise { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pm2-hinweise li { display: flex; gap: 12px; align-items: center; font-size: 16px; color: var(--pm2-text); }
.pm2-hinweise li > span {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
}

.pm2-formkarte {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
	padding: clamp(20px, 3.5vw, 40px);
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 0 18px 40px rgba(42, 50, 135, 0.10);
	scroll-margin-top: 88px;
}
.pm2-form { display: flex; flex-direction: column; gap: 22px; }
.pm2-form__kopf { display: flex; flex-direction: column; gap: 10px; }
.pm2-form__schritt { font-size: 14px; font-weight: 600; color: var(--pm2-leise); outline: none; }
.pm2-balken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pm2-balken span { height: 4px; border-radius: 2px; background: var(--pm2-linie); transition: background-color .3s; }
.pm2-balken span.ist-an { background: var(--pm2-primaer); }

.pm2-schritt { display: flex; flex-direction: column; gap: 22px; }
.pm2-gruppe { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pm2-gruppe legend { margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 700; color: var(--pm2-text); }
.pm2-zusatz { font-weight: 400; color: var(--pm2-leise); }

.pm2-punkt {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	border: 2px solid var(--pm2-primaer);
	background: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pm2-punkt::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: transparent; }
[aria-checked="true"] > .pm2-punkt::after,
[aria-checked="true"] .pm2-art__kopf .pm2-punkt::after { background: var(--pm2-primaer); }

/* Arten: gleich aufgebaut, die «Als …»-Zeile reserviert zwei Zeilen, damit
   Titel und Preis beider Karten auf gleicher Hoehe stehen. */
.pm2-arten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.pm2-art {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px;
	border-radius: 12px;
	border: 2px solid var(--pm2-linie-2);
	background: #FFFFFF;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	color: var(--pm2-text);
}
.pm2-art[aria-checked="true"],
.pm2-kategorie[aria-checked="true"] { border-color: var(--pm2-primaer); background: var(--pm2-soft); }
.pm2-art__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: calc(2 * 1.4em); font-size: 13px; line-height: 1.4; }
.pm2-art__fuer { font-weight: 600; color: var(--pm2-leise); }
.pm2-art__titel { font-size: 19px; font-weight: 800; }
.pm2-art__preis { font-size: 16px; font-weight: 700; }
.pm2-art__text { font-size: 14px; line-height: 1.5; color: var(--pm2-text-2); }

.pm2-kategorien { display: flex; flex-direction: column; gap: 8px; }
.pm2-kategorie {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1.5px solid var(--pm2-linie-2);
	background: #FFFFFF;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	color: var(--pm2-text);
}
.pm2-kategorie > .pm2-punkt { margin-top: 2px; }
.pm2-kategorie__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm2-kategorie__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.pm2-kategorie__titel { font-size: 16px; font-weight: 700; }
.pm2-kategorie__betrag { font-size: 16px; font-weight: 800; white-space: nowrap; }
.pm2-kategorie__satz { font-size: 14px; line-height: 1.5; color: var(--pm2-text-2); }

/* Felder: 6er-Raster. Ist die Karte schmaler als 460 px, gehen alle Felder
   auf volle Breite, ausser PLZ und Ort; die Knoepfe fuellen die Breite. */
.pm2-felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pm2-feld { min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--pm2-text); }
.pm2-feld--2 { grid-column: span 2; }
.pm2-feld--3 { grid-column: span 3; }
.pm2-feld--4 { grid-column: span 4; }
.pm2-feld--6 { grid-column: span 6; }
@container (max-width: 459px) {
	.pm2-feld--3,
	.pm2-feld--6 { grid-column: span 6; }
	.pm2-form__knoepfe { flex: 1 1 100%; }
	.pm2-knopf--form { flex: 1 1 auto; padding-inline: 1.25rem; }
}
.pm2-zwischentitel { grid-column: 1 / -1; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--pm2-linie); font-size: 15px; font-weight: 700; color: var(--pm2-text); }

.pm2-form input[type="text"],
.pm2-form input[type="email"],
.pm2-form input[type="tel"],
.pm2-form input[type="date"],
.pm2-form select,
.pm2-form textarea {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 0 14px;
	border: 1.5px solid var(--pm2-linie-2);
	border-radius: 8px;
	background: #FFFFFF;
	font-family: inherit;
	font-size: 16px;
	color: var(--pm2-text);
}
.pm2-form select { padding: 0 12px; }
.pm2-form textarea { padding: 12px 14px; resize: vertical; }
/* Spezifischer als die Feldregeln oben (input[type=…] zaehlt mit),
   sonst blieb der Rahmen bei Textfeldern grau. */
.pm2-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--pm2-fehler); }
.pm2-hinweis { font-size: 13px; font-weight: 400; color: var(--pm2-leise); }
.pm2-fehler { font-size: 13px; font-weight: 600; color: var(--pm2-fehler); outline: none; }
.pm2-fehler--gesamt { margin: 0; font-size: 15px; }

.pm2-pruefen { display: flex; flex-direction: column; gap: 12px; }
.pm2-pruefen__titel { font-size: 15px; font-weight: 700; color: var(--pm2-text); }
.pm2-pruefen__liste { display: flex; flex-direction: column; border: 1px solid var(--pm2-linie); border-radius: 12px; }
.pm2-pruefen__gruppe { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.pm2-pruefen__gruppe + .pm2-pruefen__gruppe { border-top: 1px solid var(--pm2-linie); }
.pm2-pruefen__zeilen { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm2-pruefen__name { font-size: 13px; font-weight: 600; color: var(--pm2-leise); }
.pm2-pruefen__zeile { font-size: 15px; line-height: 1.5; color: var(--pm2-text); overflow-wrap: anywhere; }
.pm2-aendern {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--pm2-primaer);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: text-underline-offset .2s, color .2s;
}
.pm2-aendern:hover,
.pm2-aendern:focus-visible { color: var(--pm2-primaer-hover); text-underline-offset: 5px; text-decoration-thickness: 2px; }

.pm2-einverstanden { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--pm2-text); cursor: pointer; }
.pm2-einverstanden input { margin: 3px 0 0; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--pm2-primaer); }
.pm2-einverstanden strong { font-weight: 700; }
.pm2-einverstanden + .pm2-fehler { margin-top: -12px; }
.pm2-einverstanden a { color: var(--pm2-primaer); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Telefon: Vorwahl und Nummer nebeneinander, schmal untereinander. */
.pm2-telefon { display: flex; align-items: stretch; gap: 8px; }
.pm2-form .pm2-telefon__wahl { flex: 0 0 auto; width: auto; max-width: 11rem; }
.pm2-telefon input { flex: 1 1 auto; }
@container (max-width: 459px) {
	.pm2-telefon { flex-wrap: wrap; }
	.pm2-form .pm2-telefon__wahl { max-width: none; width: 100%; }
}

.pm2-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pm2-form__fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 18px;
	border-top: 1px solid var(--pm2-linie);
}
.pm2-jahresbeitrag { display: flex; flex-direction: column; gap: 2px; }
.pm2-jahresbeitrag > span { font-size: 14px; color: var(--pm2-leise); }
.pm2-jahresbeitrag > strong { font-size: 20px; font-weight: 800; color: var(--pm2-text); }
.pm2-form__knoepfe { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 10px; flex-wrap: wrap; }

.pm2-erfolg { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.pm2-erfolg__titel { margin: 0; font-size: 24px; font-weight: 800; color: var(--pm2-text); outline: none; }
.pm2-erfolg p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--pm2-text-2); overflow-wrap: anywhere; }
.pm2-erfolg strong { color: var(--pm2-text); }
.pm2-erfolg__leise { font-size: 15px !important; color: var(--pm2-leise) !important; }
.pm2-erfolg a { font-weight: 600; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.pm2-kontaktbox {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px;
	border-radius: 16px;
	background: var(--pm2-soft);
}
.pm2-kontaktbox h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--pm2-text); }
.pm2-kontaktbox p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pm2-text-2); text-wrap: pretty; }
.pm2-kontaktbox .pm2-textlink { font-size: 15px; font-weight: 600; }
.pm2-fragen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* Raster, damit data-motion-einzeln greift */
.pm2-frageblock { background: var(--pm2-soft); border-radius: 12px; }
.pm2-frageblock__kopf {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding: 14px 22px;
	background: none;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	color: var(--pm2-text);
	transition: background-color .2s;
}
.pm2-frageblock__kopf:hover { background: var(--pm2-karte); }
.pm2-frageblock__antwort { margin: 0; padding: 0 22px 20px; font-size: 16px; line-height: 1.65; color: var(--pm2-text-2); text-wrap: pretty; }

/* ── Weitere ─────────────────────────────────────────────────────────── */
.pm2 .pm2-weitere { padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 32px); background: var(--pm2-soft); }
.pm2-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.pm2-option {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px 24px;
	border-radius: 12px;
	background: #FFFFFF;
	text-decoration: none;
}
.pm2-option__wer { font-size: 14px; font-weight: 600; color: var(--pm2-leise); }
.pm2-option__titel { font-size: 17px; font-weight: 700; color: var(--pm2-text); }
.pm2-option__text { margin-bottom: 10px; font-size: 15px; line-height: 1.55; color: var(--pm2-text-2); }
.pm2-option__marke {
	margin-top: auto;
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 4px;
	background: var(--pm2-primaer);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
}

/* ── Bewegung reduzieren ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.pm2-puls { animation: none !important; }
	.pm2-karte,
	.pm2-karte::after,
	.pm2-pfeil { transition: none; }
	.pm2-karte:hover,
	a.pm2-karte:focus-visible,
	.pm2-karte:hover .pm2-pfeil { transform: none; }
}