/*
 * Accordion (FAQ): Linie zwischen Fragen, Plus im Kreis wird zum Minus.
 * Auf- und Zugleiten (Höhe, Inhalt) steuert assets/js/view.js, hier nur Ruhezustände
 * und kurze Übergänge. Gleiche Kurve wie im Script: ease-out-quart, 280 ms.
 */

.wp-block-accordion {
	--himml-acc-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
	--himml-acc-duration: 280ms;
}

.wp-block-accordion-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: none;
}

.wp-block-accordion-item:last-child {
	border-bottom: 0;
}

.wp-block-accordion-heading {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
}

.wp-block-accordion-heading__toggle {
	gap: 20px;
	padding: 22px 0;
	/* Core schneidet mit overflow: hidden den Fokusring ab. */
	overflow: visible;
	transition: color 150ms ease;
	-webkit-tap-highlight-color: transparent;
}

/* Fokusring (Farbe aus theme.css) mit runden Ecken. */
.wp-block-accordion-heading__toggle:focus-visible {
	border-radius: var(--wp--preset--border-radius--small);
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-accordion-heading__toggle:hover {
		color: var(--wp--preset--color--blue);
	}
}

/* Plus aus zwei Balken statt Schriftzeichen: sitzt exakt mittig im Kreis.
   Das „+“ im Markup bleibt (Core-Serialisierung), ist aber ausgeblendet. */
.wp-block-accordion-heading__toggle-icon {
	position: relative;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--grey);
	color: var(--wp--preset--color--blue);
	font-size: 0;
	line-height: 0;
	transition: background-color 200ms ease, color 200ms ease, transform 150ms ease-out;
}

.wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion-heading__toggle-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	width: 12px;
	height: 2px;
	margin: auto;
	border-top: 2px solid currentColor; /* Rahmen statt Fläche: bleibt im Kontrastmodus sichtbar. */
	border-radius: 1px;
}

/* Senkrechter Balken legt sich beim Öffnen hin: aus Plus wird Minus. */
.wp-block-accordion-heading__toggle-icon::after {
	transform: rotate(90deg);
	transition: transform var(--himml-acc-duration) var(--himml-acc-ease);
}

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: none;
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--base);
}

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after {
	transform: rotate(180deg);
}

.wp-block-accordion-heading__toggle:active .wp-block-accordion-heading__toggle-icon {
	transform: scale(0.92);
}

.wp-block-accordion-panel {
	margin: 0 !important;
	padding: 0 50px 24px 0;
	color: var(--wp--preset--color--body);
	font-size: 17px;
}

/* Ohne Außenabstand am Rand: sonst ragt er beim Gleiten (overflow: hidden) mal hinein, mal heraus. */
.wp-block-accordion-panel > :first-child {
	margin-top: 0;
}

.wp-block-accordion-panel > :last-child {
	margin-bottom: 0;
}

/* Links im Antworttext: unterstrichen, Farbe allein reicht nicht (WCAG 1.4.1). */
.wp-block-accordion-panel a {
	color: var(--wp--preset--color--blue);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.wp-block-accordion-panel {
		padding-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-accordion-heading__toggle,
	.wp-block-accordion-heading__toggle-icon,
	.wp-block-accordion-heading__toggle-icon::after {
		transition: none;
	}

	.wp-block-accordion-heading__toggle:active .wp-block-accordion-heading__toggle-icon {
		transform: none;
	}
}