:root {
	--kijuju-hero-dark: #102733;
	--kijuju-hero-pink: #ec1e64;
	--kijuju-hero-turquoise: #18d8ad;
	--kijuju-hero-paper: #f7f5f0;
	--kijuju-hero-white: #ffffff;
}

.home .ct-container-full[data-vertical-spacing] {
	padding-top: 0;
}

.home .entry-content {
	margin-top: 0;
}

.home .entry-content > .kijuju-hero {
	width: max(100vw, var(--kijuju-site-min-width));
	max-width: none;

	margin-top: 0;
	margin-right: 0;
	margin-left: min(
		calc(50% - 50vw),
		calc(50% - (var(--kijuju-site-min-width) / 2))
	);
}

.kijuju-hero {
	position: relative;

	display: flex;
	align-items: flex-end;

	min-height: clamp(430px, 38vw, 590px);
	padding: 0;

	overflow: hidden;
	isolation: isolate;
}

.kijuju-hero .wp-block-cover__image-background {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center 48%;
}

.kijuju-hero .wp-block-cover__background {
	z-index: 1;
	opacity: 1 !important;

	background-color: transparent !important;
	background-image:
		linear-gradient(
			90deg,
			rgb(7 20 27 / 62%) 0%,
			rgb(7 20 27 / 42%) 27%,
			rgb(7 20 27 / 13%) 49%,
			transparent 70%
		) !important;
}

.kijuju-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;

	width: 100%;
	max-width: none;
}

.kijuju-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;

	width: min(1280px, 90vw);
	max-width: none;
	min-height: inherit;
	margin-inline: auto;
	padding-top: clamp(80px, 8vw, 130px);
	padding-bottom: clamp(48px, 5vw, 72px);
}

.kijuju-hero__inner,
.kijuju-hero__claim {
	margin-block: 0;
}

.kijuju-hero__inner > *,
.kijuju-hero__claim > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.kijuju-hero__claim {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;

	width: fit-content;
	max-width: min(720px, 94%);

	transform: rotate(-1.2deg);
	transform-origin: left center;
}

.kijuju-hero__line {
	display: block;

	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 0.08em 0.3em 0.12em;

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

	font-size: clamp(2rem, 4vw, 4.15rem);
	font-weight: 900;
	line-height: 1.01;
	letter-spacing: -0.035em;
	text-transform: uppercase;

	color: var(--kijuju-hero-white);

	box-shadow: 6px 6px 0 rgb(0 0 0 / 18%);
}

.kijuju-hero__line + .kijuju-hero__line {
	margin-top: 0.045em;
}

.kijuju-hero__line--dark {
	background-color: var(--kijuju-hero-dark);
}

.kijuju-hero__line--pink {
	background-color: var(--kijuju-hero-pink);
}

.kijuju-hero__line--turquoise {
	background-color: var(--kijuju-hero-turquoise);
}

.kijuju-hero__title {
	display: inline-block;

	width: fit-content;
	max-width: min(610px, 94%);
	margin: clamp(16px, 2vw, 26px) 0 0;
	padding: 0.34em 0.52em 0.4em;

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

	font-size: clamp(1.25rem, 2vw, 1.9rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.018em;

	color: var(--kijuju-hero-white);
	background-color: rgb(5 17 23 / 84%);
}


/* =========================================================
   Organische Abrisskante als Rastergrafik
   ========================================================= */

.kijuju-hero::after {
	position: absolute;
	z-index: 4;
	right: 0;
	bottom: -1px;
	left: 0;

	height: clamp(42px, 4.3vw, 72px);

	content: "";

	background-image: url("../images/hero/hero-torn-edge.webp");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 100%;

	pointer-events: none;
}

@media (max-width: 999px) {

	.kijuju-hero {
		min-height: 540px;
	}

	.kijuju-hero .wp-block-cover__image-background {
		object-position: 58% center;
	}

	.kijuju-hero .wp-block-cover__background {
		background-image:
			linear-gradient(
				90deg,
				rgb(7 20 27 / 68%) 0%,
				rgb(7 20 27 / 45%) 39%,
				rgb(7 20 27 / 12%) 70%,
				transparent 90%
			) !important;
	}

	.kijuju-hero__inner {
		width: min(92vw, 1280px);
		padding-top: 100px;
		padding-bottom: 60px;
	}

	.kijuju-hero__claim {
		max-width: 82%;
	}

	.kijuju-hero__line {
		font-size: clamp(1.85rem, 5vw, 3.4rem);
	}
}

@media (max-width: 767px) {

	.kijuju-hero {
		min-height: 600px;
	}

	.kijuju-hero .wp-block-cover__image-background {
		object-position: 62% center;
	}

	.kijuju-hero .wp-block-cover__background {
		background-image:
			linear-gradient(
				0deg,
				rgb(7 20 27 / 78%) 0%,
				rgb(7 20 27 / 50%) 46%,
				rgb(7 20 27 / 8%) 100%
			) !important;
	}

	.kijuju-hero__inner {
		width: calc(100% - 36px);
		padding-top: 145px;
		padding-bottom: 54px;
	}

	.kijuju-hero__claim {
		max-width: 100%;

		transform: rotate(-0.6deg);
	}

	.kijuju-hero__line {
		font-size: clamp(1.55rem, 8.3vw, 2.65rem);
		box-shadow: 4px 4px 0 rgb(0 0 0 / 18%);
	}

	.kijuju-hero__title {
		max-width: 100%;
		margin-top: 17px;

		font-size: clamp(1.05rem, 4.8vw, 1.4rem);
	}
}

@media (max-width: 420px) {

	.kijuju-hero {
		min-height: 570px;
	}

	.kijuju-hero__inner {
		width: calc(100% - 28px);
		padding-bottom: 48px;
	}

	.kijuju-hero__line {
		font-size: clamp(1.35rem, 8.2vw, 2.1rem);
	}
}

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

	.kijuju-hero__claim {
		transform: none;
	}
}

.kijuju-hero,
.kijuju-hero .wp-block-cover__inner-container,
.kijuju-hero__inner,
.kijuju-hero__claim,
.kijuju-hero__line,
.kijuju-hero__title {
	text-align: left;
}

.kijuju-hero__inner.is-layout-constrained > *,
.kijuju-hero__claim.is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.kijuju-hero__claim,
.kijuju-hero__title {
	align-self: flex-start;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.kijuju-hero__line {
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* =========================================================
   Dekorative Scratches / Scribbles

   Reihenfolge der Hintergrundbilder:
   1. oben links
   2. oben rechts
   3. unten links
   4. unten rechts
   ========================================================= */

.kijuju-hero::before {
	position: absolute;
	z-index: 2;
	inset: 0;

	content: "";

	background-image:
		url("../images/hero/hero-scratch-left.webp"),
		url("../images/hero/hero-scratch-right.webp"),
		url("../images/hero/hero-scratch-left-down.webp"),
		url("../images/hero/hero-scratch-right-down.webp");

	background-repeat:
		no-repeat,
		no-repeat,
		no-repeat,
		no-repeat;

	background-position:
		left clamp(10px, 2vw, 28px) top clamp(1px, 0.1vw, 5px),
		right clamp(10px, 2vw, 28px) top clamp(10px, 1.4vw, 20px),
		left clamp(4px, 1.2vw, 18px) bottom clamp(18px, 1.7vw, 28px),
		right clamp(4px, 1.2vw, 18px) bottom clamp(20px, 2vw, 30px);

	background-size:
		clamp(110px, 11vw, 180px) auto,
		clamp(110px, 11vw, 180px) auto,
		clamp(125px, 12vw, 200px) auto,
		clamp(125px, 12vw, 200px) auto;

	pointer-events: none;
}

.kijuju-hero .wp-block-cover__inner-container,
.kijuju-hero__inner {
	position: relative;
	z-index: 3;
}

.kijuju-hero__claim {
	position: relative;
}


/*
 * Der Pfeil gehört inhaltlich zur letzten Slogan-Zeile.
 * Deshalb wird er nicht mehr relativ zur gesamten Claim-Gruppe,
 * sondern direkt an der türkisfarbenen Zeile ausgerichtet.
 */

.kijuju-hero__line--turquoise {
	position: relative;
}

.kijuju-hero__line--turquoise::after {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: calc(100% + clamp(8px, 1vw, 16px));
	right: auto;

	width: clamp(180px, 16vw, 260px);
	aspect-ratio: 718 / 258;

	content: "";

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

	transform: translateY(-50%);
	transform-origin: left center;

	pointer-events: none;
}

@media (max-width: 999px) {

	.kijuju-hero::before {
		background-position:
			left 12px top 8px,
			right 12px top 18px,
			left 6px bottom 24px,
			right 6px bottom 22px;

		background-size:
			122px auto,
			122px auto,
			132px auto,
			126px auto;
	}

	.kijuju-hero__line--turquoise::after {
		left: calc(100% + 8px);
		right: auto;

		width: 158px;
	}
}

@media (max-width: 767px) {

	/*
	 * Alle vier Scratches bleiben auch auf kleinen Displays erhalten.
	 * Sie werden lediglich kleiner und etwas näher an den Rand gesetzt,
	 * damit sie den eigentlichen Hero-Inhalt nicht überlagern.
	 */
	.kijuju-hero::before {
		opacity: 0.88;

		background-image:
			url("../images/hero/hero-scratch-left.webp"),
			url("../images/hero/hero-scratch-right.webp"),
			url("../images/hero/hero-scratch-left-down.webp"),
			url("../images/hero/hero-scratch-right-down.webp");

		background-repeat:
			no-repeat,
			no-repeat,
			no-repeat,
			no-repeat;

		background-position:
			left 6px top 5px,
			right 8px top 8px,
			left 4px bottom 20px,
			right 4px bottom 20px;

		background-size:
			82px auto,
			94px auto,
			108px auto,
			100px auto;
	}

	/*
	 * Der Pfeil wird auf kleinen Displays weiterhin ausgeblendet,
	 * damit er nicht mit Text oder Bildschirmrand kollidiert.
	 */
	.kijuju-hero__line--turquoise::after {
		display: none;
	}

	.kijuju-hero::after {
		height: clamp(34px, 8vw, 54px);

		/*
		 * Die Abrisskante füllt auch auf schmalen Displays
		 * immer die komplette Breite des Hero-Bereichs.
		 */
		background-position: center bottom;
		background-size: 100% 100%;
	}
}

@media (max-width: 420px) {

	/*
	 * Die vier Scratches werden auf sehr kleinen Displays
	 * nochmals etwas verkleinert.
	 */
	.kijuju-hero::before {
		background-size:
			70px auto,
			80px auto,
			92px auto,
			88px auto;
	}

	.kijuju-hero::after {
		height: 38px;
	}
}