/**
 * Kijuju – Startseiten-Hauptbereich
 *
 * Erwartete Blockstruktur:
 *
 * .kijuju-home-section
 * └── .kijuju-home-content
 *     └── .kijuju-home-grid
 *         ├── .kijuju-home-main
 *         │   └── .kijuju-card.kijuju-intro-card
 *         └── .kijuju-home-steps
 *             └── .kijuju-steps-card
 *                 ├── .kijuju-steps-card__title
 *                 └── .kijuju-steps-list
 *                     └── details.kijuju-step
 */


/* =========================================================
   Designvariablen
   ========================================================= */

:root {
	--kijuju-home-paper: #f7f5f0;
	--kijuju-home-card: #ffffff;
	--kijuju-home-text: #101b24;
	--kijuju-home-muted: #47535d;
	--kijuju-home-border: #d8d6d0;
	--kijuju-home-divider: #aeb3b5;
	--kijuju-home-dark: #102733;
	--kijuju-home-pink: #ec1e64;
	--kijuju-home-turquoise: #18d8ad;
	--kijuju-home-shadow: 0 12px 30px rgb(16 39 51 / 7%);
	--kijuju-home-ui-font:
		"Segoe UI",
		"Noto Sans",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;
}


/* =========================================================
   Vollbreiter Startseitenbereich
   ========================================================= */

.kijuju-home-section {
	width: 100vw;
	max-width: none;
	margin: 0 0 0 calc(50% - 50vw);
	padding: clamp(42px, 5vw, 76px) 0 clamp(54px, 6vw, 92px);

	color: var(--kijuju-home-text);
	background: var(--kijuju-home-paper);
}

.kijuju-home-content {
	width: min(1280px, 90vw);
	max-width: none;
	margin-inline: auto;
}


/* Gutenberg-Abstände zurücksetzen */

.kijuju-home-section,
.kijuju-home-content,
.kijuju-home-grid,
.kijuju-home-main,
.kijuju-home-steps,
.kijuju-card,
.kijuju-steps-card,
.kijuju-steps-list {
	margin-block-start: 0;
	margin-block-end: 0;
}


/* =========================================================
   Zweispalten-Grundgerüst
   ========================================================= */

.kijuju-home-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 55fr) minmax(360px, 45fr);
	grid-template-areas:
		"intro steps"
		"main  steps";

	/*
	 * Die erste Zeile richtet sich ausschließlich nach der Höhe
	 * des Introbereichs. Die zweite Zeile nimmt die restliche,
	 * durch das hohe Akkordeon benötigte Höhe auf.
	 *
	 * Dadurch beginnt das Antragsformular direkt unter dem
	 * Introtext, statt erst unterhalb des gesamten Akkordeons.
	 */
	grid-template-rows: max-content minmax(0, 1fr);

	column-gap: 0;
	row-gap: clamp(26px, 2.8vw, 40px);
	align-items: start;
}

/*
 * Die drei direkten Kinder des Grids werden auf Desktop in zwei
 * Spalten verteilt. Im HTML bleibt dabei bereits die gewünschte
 * mobile Reihenfolge erhalten:
 * Intro → Akkordeon → weitere Inhalte links.
 */
.kijuju-intro-card {
	grid-area: intro;
	min-width: 0;
	padding-right: clamp(34px, 4.5vw, 68px);
}

.kijuju-home-steps {
	grid-area: steps;
	align-self: stretch;
	min-width: 0;
	padding-left: clamp(34px, 4.5vw, 68px);
	border-left: 1px solid var(--kijuju-home-divider);
}

.kijuju-home-main {
	grid-area: main;

	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3vw, 44px);

	width: 100%;
	max-width: none;
	min-width: 0;
	padding-right: clamp(34px, 4.5vw, 68px);
}

/* Gutenberg-Blockabstände zwischen den direkten Grid-Kindern neutralisieren. */
.kijuju-home-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/*
 * Die Karte sitzt nun bereits in der zweiten Grid-Zeile.
 * Der Abstand wird daher vom Grid geregelt und nicht zusätzlich
 * über margin-top verdoppelt.
 */
.kijuju-home-main .kijuju-application-card {
	width: 100%;
	max-width: none;
	margin-top: 0 !important;
}

/*
 * Explizite Grid-Platzierung innerhalb der Antragskarte.
 * Dadurch bleibt der Text auch dann in der breiten zweiten
 * Spalte, wenn Gutenberg die leere Icon-Gruppe vorübergehend
 * nicht rendert.
 */
.kijuju-application-card__icon {
	grid-column: 1;
	grid-row: 1;
}

.kijuju-application-card__content {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
}


/* =========================================================
   Linker Introbereich
   ========================================================= */

.kijuju-intro-card {
	position: relative;

	max-width: 650px;
	padding: 0;

	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.kijuju-card__title,
.kijuju-steps-card__title {
	margin: 0;

	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Noto Sans",
		Helvetica,
		Arial,
		sans-serif;

	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.035em;

	color: var(--kijuju-home-dark);
}

.kijuju-card__title {
	position: relative;

	max-width: 600px;
	padding-left: clamp(72px, 7vw, 98px);

	font-size: clamp(1.85rem, 3vw, 3.05rem);
	text-transform: uppercase;
}


/* Organischer Pinsel-Pfeil vor der Überschrift */

.kijuju-card__title::before {
	position: absolute;
	top: clamp(-4px, -0.2vw, 0px);
	left: 0;

	width: clamp(58px, 6vw, 84px);
	height: clamp(44px, 4.8vw, 68px);

	content: "";

	background-image:
		url("../images/content/content-arrow.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	pointer-events: none;
}

/*
 * Die bisher aus CSS-Linien gebaute zweite Pfeilebene
 * wird nicht mehr benötigt.
 */
.kijuju-card__title::after {
	content: none;
}

.kijuju-card__text {
	max-width: 610px;
	margin: clamp(22px, 2.5vw, 34px) 0 0 !important;

	font-size: clamp(1rem, 1.15vw, 1.125rem);
	font-weight: 450;
	line-height: 1.65;

	color: var(--kijuju-home-text);
}


/* =========================================================
   Rechte Überschrift
   ========================================================= */

.kijuju-steps-card__title {
	position: relative;

	width: fit-content;
	margin-bottom: clamp(24px, 3vw, 38px);

	font-size: clamp(1.8rem, 2.7vw, 2.75rem);
}

.kijuju-steps-card__title::after {
	display: block;

	width: 62%;
	height: clamp(10px, 1vw, 15px);
	margin-top: 5px;

	content: "";

	background-image:
		url("../images/content/content-line.webp");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 100% 100%;

	pointer-events: none;
}


/* =========================================================
   Akkordeon-Liste
   ========================================================= */

.kijuju-steps-list {
	display: flex;
	flex-direction: column;
	gap: clamp(13px, 1.5vw, 19px);

	counter-reset: kijuju-step;
}

.kijuju-step {
	--wp--style--block-gap: 0;
	--kijuju-step-padding-x: clamp(18px, 2vw, 26px);
	--kijuju-step-number-size: clamp(40px, 4vw, 52px);
	--kijuju-step-icon-size: clamp(50px, 4.5vw, 60px);
	--kijuju-step-inner-gap: clamp(14px, 1.5vw, 18px);
	--kijuju-step-icon-image: none;

	position: relative;
	counter-increment: kijuju-step;

	margin: 0 !important;
	padding: 0;

	background: var(--kijuju-home-card);
	border: 1px solid var(--kijuju-home-border);
	border-radius: 5px;
	box-shadow: 0 4px 16px rgb(16 39 51 / 3%);

	overflow: hidden;
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}


/* Icons der sechs Schritte */

.kijuju-step--group {
	--kijuju-step-icon-image:
		url("../images/accordion/accordion-group.png");
}

.kijuju-step--idea {
	--kijuju-step-icon-image:
		url("../images/accordion/accordion-bulb.png");
}

.kijuju-step--document {
	--kijuju-step-icon-image:
		url("../images/accordion/accordion-file.png");
}

.kijuju-step--jury {
	--kijuju-step-icon-image:
		url("../images/accordion/accordion-group-move.png");
	--kijuju-step-icon-size: clamp(56px, 5vw, 66px);
}

.kijuju-step--public {
	--kijuju-step-icon-image:
		url("../images/accordion/accordion-megaphone.png");
	--kijuju-step-icon-size: clamp(56px, 5vw, 66px);
}

.kijuju-step--launch {
	--kijuju-step-icon-image:
		url("../images/accordion/accordion-rocket.png");
}

.kijuju-step--report {
	--kijuju-step-icon-image:
		url("../images/accordion/accordion-report.png");
}

.kijuju-step:hover {
	border-color: rgb(16 39 51 / 28%);
	box-shadow: var(--kijuju-home-shadow);
}

.kijuju-step[open] {
	border-color: rgb(24 216 173 / 70%);
	box-shadow: var(--kijuju-home-shadow);
}


/* =========================================================
   Akkordeon-Kopfzeile
   ========================================================= */

.kijuju-step > summary {
	position: relative;

	display: grid;
	grid-template-columns:
		var(--kijuju-step-number-size)
		minmax(0, 1fr);
	column-gap:
		calc(
			var(--kijuju-step-icon-size)
			+ var(--kijuju-step-inner-gap)
			+ var(--kijuju-step-inner-gap)
		);
	align-items: center;
	align-content: center;

	box-sizing: border-box;
	min-height: clamp(96px, 7vw, 110px);
	margin: 0 !important;
	padding:
		clamp(16px, 1.8vw, 22px)
		calc(var(--kijuju-step-padding-x) + 34px)
		clamp(16px, 1.8vw, 22px)
		var(--kijuju-step-padding-x);

	background-image: var(--kijuju-step-icon-image);
	background-repeat: no-repeat;
	background-position:
		left calc(
			var(--kijuju-step-padding-x)
			+ var(--kijuju-step-number-size)
			+ var(--kijuju-step-inner-gap)
		)
		center;
	background-size: var(--kijuju-step-icon-size) auto;

	font-family: var(--kijuju-home-ui-font);
	font-size: clamp(1rem, 1.08vw, 1.1rem);
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.01em;

	color: var(--kijuju-home-text);

	cursor: pointer;
	list-style: none;
}

.kijuju-step > summary::-webkit-details-marker {
	display: none;
}


/* Nummernkreis */

.kijuju-step > summary::before {
	align-self: center;

	display: grid;
	place-items: center;

	width: var(--kijuju-step-number-size);
	aspect-ratio: 1;

	content: counter(kijuju-step);

	font-size: clamp(1.05rem, 1.4vw, 1.35rem);
	font-weight: 900;
	line-height: 1;

	color: #ffffff;
	background: var(--kijuju-home-turquoise);
	border-radius: 50%;
}


/* Wechselnde Akzentfarbe wie im Entwurf */

.kijuju-step:nth-child(even) > summary::before {
	background: var(--kijuju-home-pink);
}


/* Eigener Chevron */

.kijuju-step > summary::after {
	position: absolute;
	top: 50%;
	right: var(--kijuju-step-padding-x);

	width: 12px;
	height: 12px;

	content: "";

	border-right: 3px solid var(--kijuju-home-dark);
	border-bottom: 3px solid var(--kijuju-home-dark);

	transform: translateY(-65%) rotate(45deg);
	transition: transform 160ms ease;
}

.kijuju-step[open] > summary::after {
	transform: translateY(-35%) rotate(225deg);
}


/* Tastaturfokus */

.kijuju-step > summary:focus-visible {
	outline: 3px solid var(--kijuju-home-pink);
	outline-offset: -3px;
}


/* =========================================================
   Geöffneter Akkordeon-Inhalt
   ========================================================= */

.kijuju-step > :not(summary) {
	margin: 0 !important;
	margin-block-start: 0 !important;
	padding-right: calc(var(--kijuju-step-padding-x) + 34px);
	padding-left:
		calc(
			var(--kijuju-step-padding-x)
			+ var(--kijuju-step-number-size)
			+ var(--kijuju-step-icon-size)
			+ var(--kijuju-step-inner-gap)
			+ var(--kijuju-step-inner-gap)
		);
}

.kijuju-step > p {
	margin-top: 0 !important;
	padding-top: 0;
	padding-bottom: clamp(16px, 1.8vw, 22px);

	font-family: var(--kijuju-home-ui-font);
	font-size: 0.975rem;
	font-weight: 400;
	line-height: 1.62;

	color: var(--kijuju-home-muted);
}

.kijuju-step[open] > summary {
	/*
	 * Im geöffneten Zustand bleiben Höhe und Innenabstände
	 * identisch mit der geschlossenen Kopfzeile. Dadurch
	 * behalten Nummer, Icon, Kurztext und Chevron exakt
	 * dieselbe vertikale Position.
	 */
	min-height: clamp(96px, 7vw, 110px);
	padding:
		clamp(16px, 1.8vw, 22px)
		calc(var(--kijuju-step-padding-x) + 34px)
		clamp(16px, 1.8vw, 22px)
		var(--kijuju-step-padding-x);
}

/*
 * WordPress' Flow-Layout kann zwischen summary und dem ersten
 * Inhaltsblock zusätzlichen Blockabstand erzeugen. Diese Regel
 * hebt ihn gezielt auf.
 */
.kijuju-step > summary + * {
	margin-block-start: 0 !important;
}

/*
 * Der Beschreibungstext rückt nur optisch etwas näher an die
 * Kopfzeile heran. Die Position der Kopfzeile selbst bleibt
 * dabei vollständig unverändert.
 */
.kijuju-step[open] > summary + * {
	margin-top: clamp(-10px, -0.7vw, -6px) !important;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 999px) {

	.kijuju-home-content {
		width: min(92vw, 1280px);
	}

	.kijuju-home-grid {
		grid-template-columns: minmax(0, 52fr) minmax(330px, 48fr);
	}

	.kijuju-intro-card,
	.kijuju-home-main {
		padding-right: 30px;
	}

	.kijuju-home-steps {
		padding-left: 30px;
	}

	.kijuju-card__title {
		padding-left: 76px;
		font-size: clamp(1.65rem, 3.3vw, 2.45rem);
	}

	.kijuju-card__title::before {
		width: 66px;
		height: 54px;
	}
}


/* =========================================================
   Mobil und schmale Tablets
   ========================================================= */

@media (max-width: 820px) {

	.kijuju-home-section {
		padding-top: 40px;
		padding-bottom: 62px;
	}

	.kijuju-home-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"intro"
			"steps"
			"main";
		grid-template-rows: auto;
		row-gap: 0;
	}

	.kijuju-intro-card,
	.kijuju-home-main,
	.kijuju-home-steps {
		padding-right: 0;
		padding-left: 0;
	}

	.kijuju-home-steps {
		margin-top: clamp(38px, 6vw, 52px) !important;
		padding-top: clamp(38px, 6vw, 52px);
		border-top: 1px solid var(--kijuju-home-divider);
		border-left: 0;
	}

	.kijuju-home-main {
		margin-top: clamp(42px, 7vw, 60px) !important;
	}

	.kijuju-intro-card,
	.kijuju-card__text {
		max-width: none;
	}

	.kijuju-card__title {
		max-width: 680px;
	}

	.kijuju-steps-card__title {
		margin-bottom: 28px;
	}
}


/* =========================================================
   Kleine Mobilgeräte
   ========================================================= */

@media (max-width: 520px) {

	.kijuju-home-content {
		width: calc(100% - 30px);
	}

	.kijuju-card__title {
		padding-left: 58px;

		font-size: clamp(1.45rem, 8vw, 2rem);
	}

	.kijuju-card__title::before {
		top: 0;
		width: 48px;
		height: 40px;
	}

	.kijuju-steps-card__title::after {
		width: 66%;
		height: 11px;
	}

	.kijuju-steps-card__title {
		font-size: clamp(1.55rem, 8vw, 2.1rem);
	}

	.kijuju-step {
		--kijuju-step-padding-x: 14px;
		--kijuju-step-number-size: 38px;
		--kijuju-step-icon-size: 44px;
		--kijuju-step-inner-gap: 11px;
	}

	.kijuju-step--jury,
	.kijuju-step--public {
		--kijuju-step-icon-size: 48px;
	}

	.kijuju-step > summary {
		min-height: 84px;
		padding:
			14px
			48px
			14px
			var(--kijuju-step-padding-x);

		font-size: 1rem;
		line-height: 1.3;
	}

	.kijuju-step[open] > summary {
		/*
		 * Auch mobil bleibt die Kopfzeile beim Öffnen
		 * unverändert positioniert.
		 */
		min-height: 84px;
		padding:
			14px
			48px
			14px
			var(--kijuju-step-padding-x);
	}


}


/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kijuju-step,
	.kijuju-step > summary::after {
		transition: none;
	}
}

/* =========================================================
   Antragsformular-Karte
   ========================================================= */

.kijuju-application-card {
	--kijuju-application-cut: 18px;

	position: relative;

	display: grid !important;
	grid-template-columns: clamp(58px, 6vw, 78px) minmax(0, 1fr);
	gap: clamp(18px, 2.2vw, 28px);
	align-items: center;

	margin-top: clamp(36px, 4vw, 56px) !important;
	padding:
		clamp(22px, 2.5vw, 32px)
		clamp(24px, 3vw, 38px);

	color: var(--kijuju-home-dark);
	background:
		linear-gradient(
			135deg,
			#80eed9 0%,
			#61e4c3 100%
		);

	border: 3px solid var(--kijuju-home-dark);
	border-radius: 0;

	clip-path:
		polygon(
			0 0,
			calc(100% - var(--kijuju-application-cut)) 0,
			100% var(--kijuju-application-cut),
			100% calc(100% - var(--kijuju-application-cut)),
			calc(100% - var(--kijuju-application-cut)) 100%,
			0 100%
		);

	filter:
		drop-shadow(7px 8px 0 var(--kijuju-home-dark));
}


/* Gutenberg-Abstände innerhalb der Karte neutralisieren */

.kijuju-application-card > *,
.kijuju-application-card__content > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}


/* =========================================================
   Icon
   ========================================================= */

.kijuju-application-card__icon {
	width: 100%;
	min-height: clamp(78px, 7.5vw, 98px);

	background-image:
		url("../images/content/content-application.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto clamp(76px, 7vw, 94px);
}


/* =========================================================
   Inhalt
   ========================================================= */

.kijuju-application-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;

	min-width: 0;
}

.kijuju-application-card__title {
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Noto Sans",
		Helvetica,
		Arial,
		sans-serif;

	font-size: clamp(1.45rem, 2.2vw, 2rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-transform: uppercase;

	color: var(--kijuju-home-dark);
}

.kijuju-application-card__text {
	font-family: var(--kijuju-home-ui-font);
	font-size: clamp(0.98rem, 1.1vw, 1.1rem);
	font-weight: 450;
	line-height: 1.5;

	color: var(--kijuju-home-dark);
}


/* =========================================================
   Button
   ========================================================= */

.kijuju-application-card .wp-block-buttons {
	justify-content: flex-start;

	margin-top: 9px !important;
}

.kijuju-application-card__button .wp-block-button__link {
	display: inline-flex;
	gap: 14px;
	align-items: center;

	padding: 0.72em 1.1em;

	font-family: var(--kijuju-home-ui-font);
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;

	color: #ffffff;
	background: var(--kijuju-home-dark);

	border: 2px solid var(--kijuju-home-dark);
	border-radius: 0;

	transition:
		transform 150ms ease,
		background-color 150ms ease,
		color 150ms ease;
}

.kijuju-application-card__button .wp-block-button__link::after {
	content: "→";

	font-size: 1.35em;
	font-weight: 500;
	line-height: 0.8;
}

.kijuju-application-card__button .wp-block-button__link:hover {
	color: var(--kijuju-home-dark);
	background: #ffffff;

	transform: translateX(3px);
}

.kijuju-application-card__button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--kijuju-home-pink);
	outline-offset: 4px;
}


/* =========================================================
   Mobile Darstellung
   ========================================================= */

@media (max-width: 520px) {

	.kijuju-application-card {
		--kijuju-application-cut: 14px;

		grid-template-columns: 50px minmax(0, 1fr);
		gap: 15px;

		padding: 20px 18px;

		filter:
			drop-shadow(5px 6px 0 var(--kijuju-home-dark));
	}

	.kijuju-application-card__icon {
		min-height: 66px;
		background-size: auto 64px;
	}

	.kijuju-application-card__title {
		font-size: 1.4rem;
	}

	.kijuju-application-card__button .wp-block-button__link {
		padding: 0.72em 0.9em;

		font-size: 0.92rem;
	}
}


/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kijuju-application-card__button .wp-block-button__link {
		transition: none;
	}
}

/* =========================================================
   Antragsformular-Karte: kräftiger Rahmen und Versatz
   ========================================================= */

.kijuju-application-card {
	/*
	 * Schwarze äußere Grundform.
	 * Die vorhandene polygonale Form bleibt erhalten.
	 */
	background: var(--kijuju-home-dark);
	border: 0;

	/*
	 * Deutlich sichtbarer schwarzer Versatz nach rechts
	 * und unten wie im Designentwurf.
	 */
	filter:
		drop-shadow(
			8px
			10px
			0
			var(--kijuju-home-dark)
		);

	isolation: isolate;
}


/*
 * Türkise Innenfläche.
 *
 * Durch den Abstand von 3 px bleibt rundherum ein echter
 * schwarzer Rahmen sichtbar – auch an den schrägen Ecken.
 */
.kijuju-application-card::before {
	--kijuju-application-inner-cut:
		calc(var(--kijuju-application-cut) - 3px);

	position: absolute;
	z-index: 0;
	inset: 3px;

	content: "";

	background:
		linear-gradient(
			135deg,
			#80eed9 0%,
			#61e4c3 100%
		);

	clip-path:
		polygon(
			0 0,
			calc(100% - var(--kijuju-application-inner-cut)) 0,
			100% var(--kijuju-application-inner-cut),
			100% calc(100% - var(--kijuju-application-inner-cut)),
			calc(100% - var(--kijuju-application-inner-cut)) 100%,
			0 100%
		);

	pointer-events: none;
}


/*
 * Inhalt oberhalb der eingefügten Innenfläche halten.
 */
.kijuju-application-card > * {
	position: relative;
	z-index: 1;
}


/* =========================================================
   Mobile Anpassung
   ========================================================= */

@media (max-width: 520px) {

	.kijuju-application-card {
		filter:
			drop-shadow(
				6px
				7px
				0
				var(--kijuju-home-dark)
			);
	}

	.kijuju-application-card::before {
		--kijuju-application-inner-cut:
			calc(var(--kijuju-application-cut) - 2px);

		inset: 2px;
	}
}

/* =========================================================
   Antragsformular-Karte: versetzter schwarzer Rahmen
   ========================================================= */

/*
 * Der Versatz wird jetzt als echte schwarze Form hinter der
 * Karte aufgebaut. Das ist zuverlässiger als drop-shadow in
 * Kombination mit clip-path.
 */
.kijuju-application-card {
	--kijuju-application-frame-left: 0;
	--kijuju-application-frame-bottom: -10px;
	--kijuju-application-frame-right: -6px;

	background: transparent;
	border: 0;
	clip-path: none;
	filter: none;
	overflow: visible;
	isolation: isolate;
}

/*
 * Schwarze Grundform hinter der Karte.
 * Links und unten ragt sie sichtbar über die türkisfarbene
 * Fläche hinaus.
 */
.kijuju-application-card::after {
	position: absolute;
	z-index: 0;
	inset:
		0
		var(--kijuju-application-frame-right)
		var(--kijuju-application-frame-bottom)
		var(--kijuju-application-frame-left);

	content: "";

	background: var(--kijuju-home-dark);

	clip-path:
		polygon(
			0 0,
			calc(100% - var(--kijuju-application-cut)) 0,
			100% var(--kijuju-application-cut),
			100% calc(100% - var(--kijuju-application-cut)),
			calc(100% - var(--kijuju-application-cut)) 100%,
			0 100%
		);

	pointer-events: none;
}

/*
 * Türkise Vorderfläche. Sie liegt innerhalb der ursprünglichen
 * Kartengröße und lässt rundherum einen schmalen schwarzen Rand.
 */
.kijuju-application-card::before {
	--kijuju-application-inner-cut:
		calc(var(--kijuju-application-cut) - 3px);

	position: absolute;
	z-index: 1;
	inset: 3px;

	content: "";

	background:
		linear-gradient(
			135deg,
			#80eed9 0%,
			#61e4c3 100%
		);

	clip-path:
		polygon(
			0 0,
			calc(100% - var(--kijuju-application-inner-cut)) 0,
			100% var(--kijuju-application-inner-cut),
			100% calc(100% - var(--kijuju-application-inner-cut)),
			calc(100% - var(--kijuju-application-inner-cut)) 100%,
			0 100%
		);

	pointer-events: none;
}

.kijuju-application-card > * {
	position: relative;
	z-index: 2;
}

@media (max-width: 520px) {

	.kijuju-application-card {
		--kijuju-application-frame-left: 0;
		--kijuju-application-frame-right: -4px;
		--kijuju-application-frame-bottom: -7px;
	}

	.kijuju-application-card::before {
		--kijuju-application-inner-cut:
			calc(var(--kijuju-application-cut) - 2px);

		inset: 2px;
	}
}

/* =========================================================
   Antragsformular-Icon: robuste Einbindung
   ========================================================= */

/*
 * Das Icon wird an den Inhaltsblock gebunden. Dadurch bleibt es
 * sichtbar, auch wenn Gutenberg die leere Icon-Gruppe beim
 * Verschieben oder Speichern nicht ausgibt.
 */
.kijuju-application-card {
	--kijuju-application-icon-column: clamp(58px, 6vw, 78px);
	--kijuju-application-icon-gap: clamp(18px, 2.2vw, 28px);

	grid-template-columns:
		var(--kijuju-application-icon-column)
		minmax(0, 1fr);

	gap: var(--kijuju-application-icon-gap);
}

/* Eine vorhandene leere Icon-Gruppe bleibt nur als Grid-Platzhalter. */
.kijuju-application-card__icon {
	background-image: none;
}

.kijuju-application-card__content {
	position: relative;
}

.kijuju-application-card__content::before {
	position: absolute;
	top: 50%;
	left:
		calc(
			-1 * (
				var(--kijuju-application-icon-column)
				+ var(--kijuju-application-icon-gap)
			)
		);

	width: var(--kijuju-application-icon-column);
	height: clamp(78px, 7.5vw, 98px);

	content: "";

	background-image:
		url("../images/content/content-application.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto clamp(76px, 7vw, 94px);

	transform: translateY(-50%);

	pointer-events: none;
}

@media (max-width: 520px) {

	.kijuju-application-card {
		--kijuju-application-icon-column: 50px;
		--kijuju-application-icon-gap: 15px;
	}

	.kijuju-application-card__content::before {
		height: 66px;
		background-size: auto 64px;
	}
}

/* =========================================================
   Terminkalender auf der Startseite
   ========================================================= */

.kijuju-events-card {
	--kijuju-events-accent: var(--kijuju-home-pink);
	--kijuju-events-border: #d2d3d1;

	position: relative;

	width: 100%;
	max-width: none;
	padding: clamp(20px, 2.5vw, 30px);

	background: rgb(255 255 255 / 58%);
	border: 1px solid var(--kijuju-events-border);
	border-radius: 5px;
	box-shadow: 0 4px 16px rgb(16 39 51 / 3%);
}


/* Gutenberg-Abstände innerhalb des Kalenderblocks neutralisieren */

.kijuju-events-card > *,
.kijuju-events-card .tribe-compatibility-container,
.kijuju-events-card .tribe-common,
.kijuju-events-card .tribe-events-widget-events-list {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}


/* =========================================================
   Überschrift mit dekorativem Kalender-Icon
   ========================================================= */

.kijuju-events-card__title {
	display: flex;
	gap: 14px;
	align-items: center;

	margin: 0 0 clamp(20px, 2.4vw, 28px) !important;

	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Noto Sans",
		Helvetica,
		Arial,
		sans-serif;

	font-size: clamp(1.45rem, 2.2vw, 1.9rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-transform: uppercase;

	color: var(--kijuju-home-dark);
}

.kijuju-events-card__title::before {
	flex: 0 0 auto;

	width: clamp(38px, 3.4vw, 46px);
	height: clamp(38px, 3.4vw, 46px);

	content: "";

	background-image:
		url("../images/content/content-calendar.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	pointer-events: none;
}


/* =========================================================
   Plugin-Grundlayout zurücksetzen
   ========================================================= */

.kijuju-events-card .tribe-common,
.kijuju-events-card .tribe-events-widget-events-list {
	padding: 0 !important;

	font-family: var(--kijuju-home-ui-font) !important;

	color: var(--kijuju-home-text);
	background: transparent !important;
}

.kijuju-events-card .tribe-events-widget-events-list__events {
	display: flex;
	flex-direction: column;

	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   Einzelne Terminzeilen
   ========================================================= */

.kijuju-events-card .tribe-events-widget-events-list__event-row {
	display: grid !important;
	grid-template-columns: clamp(64px, 7vw, 86px) minmax(0, 1fr);
	gap: clamp(14px, 2vw, 24px);
	align-items: center;

	margin: 0 !important;
	padding: clamp(14px, 1.8vw, 20px) 0 !important;

	border-bottom: 1px solid var(--kijuju-events-border);
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-row:first-child {
	padding-top: 0 !important;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-row:last-child {
	border-bottom: 0;
}


/* =========================================================
   Datumsblock
   ========================================================= */

.kijuju-events-card
	.tribe-events-widget-events-list__event-date-tag {
	width: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-date-tag-datetime {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	height: auto !important;

	font-family: var(--kijuju-home-ui-font) !important;
	text-align: left;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-date-tag-month {
	margin: 0 0 2px !important;

	font-size: 0.78rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;

	color: var(--kijuju-events-accent) !important;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-date-tag-daynum {
	margin: 0 !important;

	font-size: clamp(1.7rem, 2.6vw, 2.25rem) !important;
	font-weight: 900 !important;
	line-height: 1 !important;

	color: var(--kijuju-home-dark) !important;
}


/* =========================================================
   Terminbeschreibung
   ========================================================= */

.kijuju-events-card
	.tribe-events-widget-events-list__event-wrapper {
	width: auto !important;
	min-width: 0 !important;
	padding: 0 !important;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event {
	margin: 0 !important;
	padding: 0 !important;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-details,
.kijuju-events-card
	.tribe-events-widget-events-list__event-header {
	margin: 0 !important;
	padding: 0 !important;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-datetime-wrapper {
	margin: 0 0 4px !important;

	font-family: var(--kijuju-home-ui-font) !important;
	font-size: 0.85rem !important;
	font-weight: 650 !important;
	line-height: 1.35 !important;

	color: var(--kijuju-events-accent) !important;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-datetime {
	color: inherit !important;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-title {
	margin: 0 !important;

	font-family: var(--kijuju-home-ui-font) !important;
	font-size: clamp(0.98rem, 1.15vw, 1.08rem) !important;
	font-weight: 650 !important;
	line-height: 1.4 !important;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-title-link {
	color: var(--kijuju-home-dark) !important;
	text-decoration: none !important;

	transition: color 150ms ease;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-title-link:hover {
	color: var(--kijuju-events-accent) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px;
}

.kijuju-events-card
	.tribe-events-widget-events-list__event-title-link:focus-visible {
	outline: 3px solid var(--kijuju-events-accent);
	outline-offset: 4px;
}


/* =========================================================
   Link zur vollständigen Terminübersicht
   ========================================================= */

.kijuju-events-card
	.tribe-events-widget-events-list__view-more {
	margin: clamp(18px, 2vw, 24px) 0 0 !important;
	padding: 0 !important;
}

.kijuju-events-card
	.tribe-events-widget-events-list__view-more-link {
	display: inline-flex;
	gap: 12px;
	align-items: center;

	padding: 0.72em 1em;

	font-family: var(--kijuju-home-ui-font) !important;
	font-size: 0.95rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none !important;

	color: #ffffff !important;
	background: var(--kijuju-home-dark);

	border: 2px solid var(--kijuju-home-dark);
	border-radius: 0;

	transition:
		color 150ms ease,
		background-color 150ms ease,
		transform 150ms ease;
}

.kijuju-events-card
	.tribe-events-widget-events-list__view-more-link::after {
	content: "→";

	font-size: 1.25em;
	font-weight: 500;
	line-height: 0.8;
}

.kijuju-events-card
	.tribe-events-widget-events-list__view-more-link:hover {
	color: var(--kijuju-home-dark) !important;
	background: #ffffff;

	transform: translateX(3px);
}

.kijuju-events-card
	.tribe-events-widget-events-list__view-more-link:focus-visible {
	outline: 3px solid var(--kijuju-events-accent);
	outline-offset: 4px;
}


/* =========================================================
   Meldung bei fehlenden zukünftigen Terminen
   ========================================================= */

.kijuju-events-card
	.tribe-events-header__messages {
	margin: 0 !important;
}

.kijuju-events-card
	.tribe-events-c-messages__message {
	display: flex;
	gap: 12px;
	align-items: center;

	margin: 0 !important;
	padding: 16px 18px !important;

	font-family: var(--kijuju-home-ui-font) !important;
	font-size: 0.98rem !important;
	line-height: 1.5 !important;

	color: var(--kijuju-home-text) !important;
	background: #ffffff !important;

	border: 1px solid var(--kijuju-events-border) !important;
	border-radius: 4px !important;
}

.kijuju-events-card
	.tribe-events-c-messages__message-icon-svg {
	flex: 0 0 auto;

	width: 24px !important;
	height: 24px !important;

	color: var(--kijuju-events-accent) !important;
	fill: none !important;
	stroke: currentColor !important;
}


/* =========================================================
   Mobile Darstellung
   ========================================================= */

@media (max-width: 520px) {

	.kijuju-events-card {
		padding: 18px 16px;
	}

	.kijuju-events-card__title {
		gap: 11px;
		font-size: 1.4rem;
	}

	.kijuju-events-card__title::before {
		width: 34px;
		height: 34px;
	}

	.kijuju-events-card
		.tribe-events-widget-events-list__event-row {
		grid-template-columns: 54px minmax(0, 1fr);
		gap: 12px;
	}

	.kijuju-events-card
		.tribe-events-widget-events-list__event-date-tag-daynum {
		font-size: 1.75rem !important;
	}
}


/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kijuju-events-card
		.tribe-events-widget-events-list__event-title-link,
	.kijuju-events-card
		.tribe-events-widget-events-list__view-more-link {
		transition: none;
	}
}

/* =========================================================
   Vergangene Projekte auf der Startseite
   ========================================================= */

.kijuju-projects-card {
	--kijuju-projects-border: #d2d3d1;

	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0;
}


/* Gutenberg-Abstände zurücksetzen */

.kijuju-projects-card > *,
.kijuju-projects-query,
.kijuju-projects-query .wp-block-post-template,
.kijuju-project-card > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}


/* =========================================================
   Überschrift und Einführung
   ========================================================= */

.kijuju-projects-card__title {
	display: flex;
	gap: 14px;
	align-items: center;

	margin: 0 0 8px !important;

	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Noto Sans",
		Helvetica,
		Arial,
		sans-serif;

	font-size: clamp(1.45rem, 2.2vw, 1.9rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-transform: uppercase;

	color: var(--kijuju-home-dark);
}


/*
 * Dekoratives Bild-/Galerie-Icon.
 * Es wird ausschließlich per CSS erzeugt und benötigt daher
 * keinen zusätzlichen Gutenberg-Bildblock.
 */
.kijuju-projects-card__title::before {
	flex: 0 0 auto;

	width: clamp(38px, 3.2vw, 46px);
	height: clamp(32px, 2.8vw, 40px);

	content: "";

	background-image:
		url("../images/content/content-projects.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	pointer-events: none;
}

.kijuju-projects-card__intro {
	max-width: 620px;
	margin: 0 0 clamp(18px, 2vw, 26px) !important;

	font-family: var(--kijuju-home-ui-font);
	font-size: clamp(0.96rem, 1.05vw, 1.05rem);
	font-weight: 450;
	line-height: 1.55;

	color: var(--kijuju-home-text);
}


/* =========================================================
   Query Loop und Raster
   ========================================================= */

.kijuju-projects-query {
	width: 100%;
	max-width: none;
	padding: 0;
}

.kijuju-projects-query .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(10px, 1.2vw, 16px) !important;

	width: 100%;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;

	list-style: none;
}

.kijuju-projects-query .wp-block-post {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   Einzelne Projektkarte
   ========================================================= */

.kijuju-project-card {
	position: relative;

	display: flex;
	flex-direction: column;

	min-width: 0;
	height: 100%;
	margin: 0 !important;
	padding: 0;

	background: #ffffff;
	border: 1px solid var(--kijuju-projects-border);
	border-radius: 4px;
	box-shadow: 0 4px 14px rgb(16 39 51 / 4%);

	overflow: hidden;
	transition:
		border-color 150ms ease,
		box-shadow 150ms ease,
		transform 150ms ease;
}

.kijuju-project-card:hover {
	border-color: rgb(16 39 51 / 38%);
	box-shadow: 0 10px 24px rgb(16 39 51 / 10%);

	transform: translateY(-2px);
}


/* =========================================================
   Beitragsbild
   ========================================================= */

.kijuju-project-card__image {
	order: 1;

	width: 100%;
	max-width: none;
	margin: 0 !important;

	aspect-ratio: 16 / 10;

	background: #dde2e3;
	overflow: hidden;
}

.kijuju-project-card__image a {
	display: block;

	width: 100%;
	height: 100%;
}

.kijuju-project-card__image img {
	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover !important;
	object-position: center;
	transition: transform 250ms ease;
}

.kijuju-project-card:hover .kijuju-project-card__image img {
	transform: scale(1.035);
}


/*
 * Platzhalter für Projekte ohne Beitragsbild.
 * Die WordPress-Klasse .has-post-thumbnail fehlt in diesem Fall.
 */
.kijuju-projects-query
	.wp-block-post:not(.has-post-thumbnail)
	.kijuju-project-card::before {
	order: 1;

	display: block;

	width: 100%;
	aspect-ratio: 16 / 10;

	content: "";

	background:
		radial-gradient(
			circle at 72% 27%,
			rgb(16 39 51 / 50%) 0 8px,
			transparent 8.5px
		),
		linear-gradient(
			145deg,
			transparent 0 43%,
			rgb(16 39 51 / 36%) 44% 52%,
			transparent 53%
		),
		linear-gradient(
			35deg,
			transparent 0 45%,
			rgb(16 39 51 / 26%) 46% 54%,
			transparent 55%
		),
		linear-gradient(
			135deg,
			#d8f5ee,
			#e8e4ef
		);
}


/* =========================================================
   Projekttitel
   ========================================================= */

.kijuju-project-card__title {
	order: 2;

	margin: 0 !important;
	padding: 11px 12px 12px;

	font-family: var(--kijuju-home-ui-font);
	font-size: clamp(0.84rem, 0.95vw, 0.98rem);
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: -0.01em;

	color: var(--kijuju-home-dark);
}

.kijuju-project-card__title a {
	color: inherit;
	text-decoration: none;

	transition: color 150ms ease;
}

.kijuju-project-card__title a:hover {
	color: var(--kijuju-home-pink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.kijuju-project-card__title a:focus-visible,
.kijuju-project-card__image a:focus-visible {
	outline: 3px solid var(--kijuju-home-pink);
	outline-offset: -3px;
}


/*
 * Auf der Startseite bleibt die Projektübersicht bewusst kompakt.
 * Der vollständige Beschreibungstext steht auf der Projektseite.
 */
.kijuju-project-card__excerpt {
	display: none;
}


/* =========================================================
   Link zur vollständigen Projektübersicht
   ========================================================= */

.kijuju-projects-card .wp-block-buttons {
	justify-content: flex-start;

	margin: clamp(16px, 1.8vw, 22px) 0 0 !important;
}

.kijuju-projects-card__button .wp-block-button__link {
	display: inline-flex;
	gap: 12px;
	align-items: center;

	padding: 0.72em 1em;

	font-family: var(--kijuju-home-ui-font);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;

	color: #ffffff;
	background: var(--kijuju-home-dark);

	border: 2px solid var(--kijuju-home-dark);
	border-radius: 0;

	transition:
		color 150ms ease,
		background-color 150ms ease,
		transform 150ms ease;
}

.kijuju-projects-card__button .wp-block-button__link::after {
	content: "→";

	font-size: 1.25em;
	font-weight: 500;
	line-height: 0.8;
}

.kijuju-projects-card__button .wp-block-button__link:hover {
	color: var(--kijuju-home-dark);
	background: #ffffff;

	transform: translateX(3px);
}

.kijuju-projects-card__button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--kijuju-home-pink);
	outline-offset: 4px;
}


/* =========================================================
   Responsive Darstellung
   ========================================================= */

@media (max-width: 1180px) {

	.kijuju-projects-query .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px !important;
	}

	.kijuju-project-card__title {
		font-size: 0.98rem;
	}
}

@media (max-width: 820px) {

	/*
	 * Sobald der Hauptinhalt einspaltig wird, kann die
	 * Projektübersicht weiterhin zwei Karten nebeneinander zeigen.
	 */
	.kijuju-projects-query .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {

	.kijuju-projects-card__title {
		gap: 11px;
		font-size: 1.4rem;
	}

	.kijuju-projects-card__title::before {
		width: 36px;
		height: 31px;
	}

	.kijuju-projects-query .wp-block-post-template {
		gap: 12px !important;
	}

	.kijuju-project-card__title {
		padding: 9px 10px 10px;
		font-size: 0.9rem;
	}
}

@media (max-width: 380px) {

	.kijuju-projects-query .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}


/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kijuju-project-card,
	.kijuju-project-card__image img,
	.kijuju-project-card__title a,
	.kijuju-projects-card__button .wp-block-button__link {
		transition: none;
	}
}

/* =========================================================
   Noch-Fragen-Karte auf der Startseite
   ========================================================= */

.kijuju-questions-card {
	--kijuju-questions-accent: var(--kijuju-home-pink);
	--kijuju-questions-border: var(--kijuju-home-dark);
	--kijuju-questions-icon-size: clamp(72px, 7vw, 94px);
	--kijuju-questions-gap: clamp(18px, 2.4vw, 30px);

	position: relative;

	display: grid !important;
	grid-template-columns:
		var(--kijuju-questions-icon-size)
		minmax(0, 1fr);
	gap: var(--kijuju-questions-gap);
	align-items: center;

	width: 100%;
	max-width: none;
	min-height: clamp(150px, 14vw, 190px);
	margin: 0 !important;
	padding:
		clamp(24px, 2.8vw, 34px)
		clamp(24px, 3vw, 38px);

	color: var(--kijuju-home-dark);
	background:
		linear-gradient(
			120deg,
			rgb(255 255 255 / 96%) 0%,
			rgb(248 247 243 / 96%) 100%
		);

	border: 2px solid var(--kijuju-questions-border);
	border-radius: 3px;
	box-shadow: 0 5px 16px rgb(16 39 51 / 5%);

	overflow: hidden;
	isolation: isolate;
}


/*
 * Dezente Papierstruktur, ohne externe Grafik.
 * Sie bleibt rein dekorativ.
 */
.kijuju-questions-card::before {
	position: absolute;
	z-index: 0;
	inset: 0;

	content: "";

	background-image:
		radial-gradient(
			circle,
			rgb(16 39 51 / 13%) 0 0.7px,
			transparent 0.9px
		);
	background-size: 18px 18px;
	opacity: 0.22;

	pointer-events: none;
}


/*
 * Schwarze Kritzelmarkierung unten rechts.
 * Die Form ist bewusst grob und dekorativ.
 */
.kijuju-questions-card::after {
	position: absolute;
	z-index: 1;
	right: clamp(-10px, -0.5vw, 0px);
	bottom: clamp(-16px, -1vw, -7px);

	width: clamp(92px, 11vw, 142px);
	height: clamp(54px, 6vw, 78px);

	content: "";

	background:
		linear-gradient(
			72deg,
			transparent 0 38%,
			var(--kijuju-home-dark) 39% 43%,
			transparent 44% 100%
		),
		linear-gradient(
			105deg,
			transparent 0 43%,
			var(--kijuju-home-dark) 44% 48%,
			transparent 49% 100%
		),
		linear-gradient(
			12deg,
			transparent 0 52%,
			var(--kijuju-home-dark) 53% 57%,
			transparent 58% 100%
		);

	transform: rotate(-5deg);
	opacity: 0.96;

	pointer-events: none;
}


/* Gutenberg-Abstände innerhalb der Karte neutralisieren */

.kijuju-questions-card > *,
.kijuju-questions-card__content > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}


/* =========================================================
   Fragezeichen-Sprechblase
   ========================================================= */

.kijuju-questions-card__icon {
	position: relative;
	z-index: 2;

	display: grid;
	place-items: center;

	width: var(--kijuju-questions-icon-size);
	aspect-ratio: 1;
}


/* Pinke Sprechblasenfläche */

.kijuju-questions-card__icon::before {
	position: absolute;
	inset: 8% 8% 18%;

	content: "";

	background: var(--kijuju-questions-accent);
	border-radius: 50% 50% 50% 44%;

	transform: rotate(-5deg);
}


/* Sprechblasenspitze */

.kijuju-questions-card__icon::after {
	position: absolute;
	right: 7%;
	bottom: 9%;

	width: 31%;
	height: 31%;

	content: "";

	background: var(--kijuju-questions-accent);

	clip-path:
		polygon(
			0 0,
			100% 34%,
			22% 100%
		);

	transform: rotate(9deg);
}


/*
 * Das Fragezeichen wird robust am Inhaltsblock ergänzt.
 * Dadurch bleibt es sichtbar, selbst wenn Gutenberg eine
 * vollständig leere Icon-Gruppe beim Speichern entfernt.
 */
.kijuju-questions-card__content::before {
	position: absolute;
	z-index: 4;
	top: 50%;
	left:
		calc(
			-1 * (
				var(--kijuju-questions-icon-size)
				+ var(--kijuju-questions-gap)
			)
		);

	display: grid;
	place-items: center;

	width: var(--kijuju-questions-icon-size);
	aspect-ratio: 1;

	content: "?";

	font-family:
		Arial,
		Helvetica,
		sans-serif;
	font-size: clamp(2.6rem, 4.5vw, 4rem);
	font-weight: 900;
	line-height: 1;

	color: #ffffff;

	transform: translateY(-55%);

	pointer-events: none;
}


/* =========================================================
   Inhalt
   ========================================================= */

.kijuju-questions-card__content {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;

	min-width: 0;
	padding-right: clamp(72px, 9vw, 118px);
}

.kijuju-questions-card__title {
	margin: 0 !important;

	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Noto Sans",
		Helvetica,
		Arial,
		sans-serif;

	font-size: clamp(1.45rem, 2.2vw, 2rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-transform: uppercase;

	color: var(--kijuju-home-dark);
}

.kijuju-questions-card__text {
	max-width: 540px;

	font-family: var(--kijuju-home-ui-font);
	font-size: clamp(0.96rem, 1.05vw, 1.05rem);
	font-weight: 450;
	line-height: 1.5;

	color: var(--kijuju-home-text);
}


/* =========================================================
   Button
   ========================================================= */

.kijuju-questions-card .wp-block-buttons {
	justify-content: flex-start;

	margin-top: 10px !important;
}

.kijuju-questions-card__button .wp-block-button__link {
	display: inline-flex;
	gap: 12px;
	align-items: center;

	padding: 0.72em 1em;

	font-family: var(--kijuju-home-ui-font);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;

	color: #ffffff;
	background: var(--kijuju-questions-accent);

	border: 2px solid var(--kijuju-questions-accent);
	border-radius: 0;

	transition:
		color 150ms ease,
		background-color 150ms ease,
		transform 150ms ease;
}

.kijuju-questions-card__button .wp-block-button__link::after {
	content: "→";

	font-size: 1.25em;
	font-weight: 500;
	line-height: 0.8;
}

.kijuju-questions-card__button .wp-block-button__link:hover {
	color: var(--kijuju-questions-accent);
	background: #ffffff;

	transform: translateX(3px);
}

.kijuju-questions-card__button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--kijuju-home-dark);
	outline-offset: 4px;
}


/* =========================================================
   Responsive Darstellung
   ========================================================= */

@media (max-width: 820px) {

	.kijuju-questions-card {
		--kijuju-questions-icon-size: 82px;

		min-height: 160px;
	}
}

@media (max-width: 520px) {

	.kijuju-questions-card {
		--kijuju-questions-icon-size: 62px;
		--kijuju-questions-gap: 14px;

		grid-template-columns:
			var(--kijuju-questions-icon-size)
			minmax(0, 1fr);

		min-height: 142px;
		padding: 20px 18px;
	}

	.kijuju-questions-card__content {
		gap: 6px;
		padding-right: 28px;
	}

	.kijuju-questions-card__content::before {
		font-size: 2.65rem;
	}

	.kijuju-questions-card__title {
		font-size: 1.4rem;
	}

	.kijuju-questions-card__text {
		font-size: 0.96rem;
	}

	.kijuju-questions-card::after {
		right: -18px;
		bottom: -13px;

		width: 82px;
		height: 48px;

		opacity: 0.72;
	}

	.kijuju-questions-card__button .wp-block-button__link {
		padding: 0.7em 0.9em;

		font-size: 0.9rem;
	}
}

@media (max-width: 390px) {

	.kijuju-questions-card {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.kijuju-questions-card__icon {
		width: 58px;
	}

	.kijuju-questions-card__content {
		padding-right: 0;
	}

	.kijuju-questions-card__content::before {
		top: calc(-1 * (58px + 12px));
		left: 0;

		width: 58px;

		font-size: 2.45rem;

		transform: translateY(0);
	}

	.kijuju-questions-card::after {
		right: -58px;
		bottom: -24px;

		display: block;

		width: 185px;

		opacity: 0.40;
	}
}


/* =========================================================
   Reduzierte Animationen
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.kijuju-questions-card__button .wp-block-button__link {
		transition: none;
	}
}

/* =========================================================
   Noch-Fragen-Karte: Bildassets
   ========================================================= */

/*
 * Die bisher per CSS gezeichnete Sprechblase und das
 * textbasierte Fragezeichen werden durch das neue WebP-Asset
 * ersetzt. Die leere Gutenberg-Gruppe bleibt nur als
 * Platzhalter für die erste Grid-Spalte erhalten.
 */
.kijuju-questions-card {
	--kijuju-questions-icon-size: clamp(78px, 7.5vw, 102px);

	grid-template-columns:
		var(--kijuju-questions-icon-size)
		minmax(0, 1fr);
}

.kijuju-questions-card__icon {
	grid-column: 1;
	grid-row: 1;

	width: var(--kijuju-questions-icon-size);
	min-height: var(--kijuju-questions-icon-size);

	background: none;
}

.kijuju-questions-card__icon::before,
.kijuju-questions-card__icon::after {
	content: none;
}


/*
 * Das Sprechblasen-Icon wird am Inhaltsblock verankert.
 * Dadurch bleibt die Darstellung stabil, selbst wenn
 * Gutenberg die leere Icon-Gruppe nicht ausgeben sollte.
 */
.kijuju-questions-card__content {
	grid-column: 2;
	grid-row: 1;
}

.kijuju-questions-card__content::before {
	position: absolute;
	z-index: 4;
	top: 50%;
	left:
		calc(
			-1 * (
				var(--kijuju-questions-icon-size)
				+ var(--kijuju-questions-gap)
			)
		);

	display: block;

	width: var(--kijuju-questions-icon-size);
	aspect-ratio: 1;

	content: "";

	background-image:
		url("../images/content/content-question.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	transform: translateY(-50%);

	pointer-events: none;
}


/*
 * Dezente Antwort-Sprechblase unten rechts.
 *
 * Das transparente PNG ersetzt die bisherige "FAQ"/Fragezeichen-
 * Dekoration. Die Grafik liegt hinter dem eigentlichen Inhalt und
 * funktioniert nur als ruhiges Wasserzeichen.
 */
.kijuju-questions-card::after {
	position: absolute;
	z-index: 1;

	right: -6px;
	bottom: -18px;

	display: block;

	width: clamp(220px, 25vw, 330px);
	height: auto;
	aspect-ratio: 3 / 2;

	content: "";

	background-image:
		url("../images/content/content-answers.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;

	transform: rotate(-2deg);
	opacity: 0.58;

	pointer-events: none;
}


/* =========================================================
   Mobile Anpassungen der Bildassets
   ========================================================= */

@media (max-width: 520px) {

	.kijuju-questions-card {
		--kijuju-questions-icon-size: 62px;
		--kijuju-questions-gap: 14px;

		grid-template-columns:
			var(--kijuju-questions-icon-size)
			minmax(0, 1fr);
	}

	.kijuju-questions-card__content {
		grid-column: 2;
		grid-row: 1;
	}

	.kijuju-questions-card__content::before {
		top: 50%;
		left:
			calc(
				-1 * (
					var(--kijuju-questions-icon-size)
					+ var(--kijuju-questions-gap)
				)
			);

		width: var(--kijuju-questions-icon-size);

		transform: translateY(-50%);
	}

	.kijuju-questions-card::after {
		right: -52px;
		bottom: -28px;

		width: 210px;
		height: auto;

		transform: rotate(-2deg);
		opacity: 0.46;
	}
}


/*
 * Auch auf sehr schmalen Displays bleibt das kompakte
 * Zweispalten-Layout bestehen. So sitzt die Sprechblase
 * weiterhin sauber links neben dem Text.
 */
@media (max-width: 390px) {

	.kijuju-questions-card {
		--kijuju-questions-icon-size: 54px;
		--kijuju-questions-gap: 12px;

		grid-template-columns:
			var(--kijuju-questions-icon-size)
			minmax(0, 1fr);
		gap: var(--kijuju-questions-gap);
	}

	.kijuju-questions-card__icon {
		width: var(--kijuju-questions-icon-size);
		min-height: var(--kijuju-questions-icon-size);
	}

	.kijuju-questions-card__content {
		grid-column: 2;
		grid-row: 1;

		padding-right: 10px;
	}

	.kijuju-questions-card__content::before {
		top: 50%;
		left:
			calc(
				-1 * (
					var(--kijuju-questions-icon-size)
					+ var(--kijuju-questions-gap)
				)
			);

		width: var(--kijuju-questions-icon-size);

		transform: translateY(-50%);
	}

	.kijuju-questions-card::after {
		right: -28px;
		bottom: -28px;

		display: block;

		width: 88px;
	}
}