/* ==========================================================
   INVI CAMPUS – ZIELGRUPPEN
   MASTER CSS
   ========================================================== */

.invi-targets-page {
	--tp-blue: #06038D;
	--tp-blue-dark: #04026F;
	--tp-text: #425A82;
	--tp-muted: #667085;
	--tp-border: #DCE6F3;
	--tp-soft-blue: #F4F8FF;
	--tp-soft-warm: #F8F4ED;
	--tp-white: #FFFFFF;

	--tp-width: 1200px;
	--tp-radius: 10px;

	width: 100%;

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

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   RESET
   ========================================================== */

.invi-targets-page *,
.invi-targets-page *::before,
.invi-targets-page *::after {
	box-sizing: border-box;
}

.invi-targets-page .wp-block-group,
.invi-targets-page .wp-block-columns,
.invi-targets-page .wp-block-buttons,
.invi-targets-page .wp-block-list {
	margin-block-start: 0;
	margin-block-end: 0;
}

.invi-targets-page a {
	text-decoration: none;
}

.invi-targets-page .wp-block-heading,
.invi-targets-page p,
.invi-targets-page li {
	hyphens: none;
	word-break: normal;
	overflow-wrap: normal;
}


/* ==========================================================
   ICON LIBRARY
   ========================================================== */

.invi-targets-page .invi-icon-home {
	--tp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V9l8-5 8 5v11'/%3E%3Cpath d='M8 20v-7h8v7'/%3E%3C/svg%3E");
}

.invi-targets-page .invi-icon-people {
	--tp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='8' r='3'/%3E%3Cpath d='M2.5 20v-2c0-3.1 2.4-5.5 5.5-5.5s5.5 2.4 5.5 5.5v2'/%3E%3Cpath d='M11 14.3c1.1-1.1 2.5-1.8 4.7-1.8 3.1 0 5.8 2.4 5.8 5.5v2'/%3E%3C/svg%3E");
}

.invi-targets-page .invi-icon-book {
	--tp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5c2.7-.9 5.3-.6 8.5 1.4v12c-3.2-2-5.8-2.3-8.5-1.4z'/%3E%3Cpath d='M20.5 5.5c-2.7-.9-5.3-.6-8.5 1.4v12c3.2-2 5.8-2.3 8.5-1.4z'/%3E%3C/svg%3E");
}

.invi-targets-page .invi-icon-person {
	--tp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5.5 20v-2c0-3.6 2.8-6 6.5-6s6.5 2.4 6.5 6v2'/%3E%3C/svg%3E");
}

.invi-targets-page .invi-icon-chart {
	--tp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M6 17v-5h3v5'/%3E%3Cpath d='M11 17V8h3v9'/%3E%3Cpath d='M16 17V4h3v13'/%3E%3C/svg%3E");
}

.invi-targets-page .invi-icon-entry {
	--tp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='2.5'/%3E%3Ccircle cx='6' cy='10' r='2'/%3E%3Ccircle cx='18' cy='10' r='2'/%3E%3Cpath d='M7 20v-2c0-3 2-5 5-5s5 2 5 5v2'/%3E%3Cpath d='M2.5 19v-1c0-2.4 1.5-4 3.7-4'/%3E%3Cpath d='M21.5 19v-1c0-2.4-1.5-4-3.7-4'/%3E%3C/svg%3E");
}

.invi-targets-page .invi-icon-compass {
	--tp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306038D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5 5-2Z'/%3E%3C/svg%3E");
}


/* ==========================================================
   HERO
   ========================================================== */

.invi-tp-hero {
	width: 100%;

	min-height: 300px !important;

	margin: 0 !important;

	background: #F7F9FD;
}

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

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

.invi-tp-hero .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: none !important;

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

.invi-tp-hero-inner {
	width: calc(100% - 48px) !important;
	max-width: var(--tp-width) !important;

	min-height: 300px;

	margin-left: auto !important;
	margin-right: auto !important;

	display: flex;

	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.invi-tp-kicker,
.invi-tp-eyebrow {
	margin: 0 0 10px !important;

	color: var(--tp-blue);

	font-family: Inter, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: .19em;
	text-transform: uppercase;
}

.invi-tp-hero-title {
	margin: 0 0 9px !important;

	color: var(--tp-blue);

	font-family: "Source Serif Pro", Georgia, serif;
	font-size: clamp(52px, 5vw, 72px);
	font-weight: 500;
	line-height: .95;

	letter-spacing: -.035em;
}

.invi-tp-hero-text {
	margin: 0 0 19px !important;

	color: var(--tp-blue);

	font-family: Inter, Arial, sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
}

.invi-tp-hero-buttons {
	gap: 12px !important;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.invi-targets-page .invi-tp-primary-button .wp-block-button__link,
.invi-targets-page .invi-tp-secondary-button .wp-block-button__link {
	min-width: 190px;

	padding: 12px 20px;

	border-radius: 6px;

	font-family: Inter, Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 650;

	text-align: center;

	transition:
		background .16s ease,
		transform .16s ease;
}

.invi-targets-page .invi-tp-primary-button .wp-block-button__link {
	border: 1px solid var(--tp-blue);

	background: var(--tp-blue);
	color: #FFFFFF;
}

.invi-targets-page .invi-tp-primary-button .wp-block-button__link:hover {
	background: var(--tp-blue-dark);

	transform: translateY(-1px);
}

.invi-targets-page .invi-tp-secondary-button .wp-block-button__link {
	border: 1px solid var(--tp-blue) !important;

	background: rgba(255,255,255,.78) !important;
	color: var(--tp-blue) !important;
}

.invi-targets-page .invi-tp-secondary-button .wp-block-button__link:hover {
	background: #FFFFFF !important;

	transform: translateY(-1px);
}


/* ==========================================================
   MAIN
   ========================================================== */

.invi-tp-main {
	position: relative;

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

	padding: 20px 24px 16px !important;

	background: #FFFFFF;
}

.invi-tp-container {
	width: 100% !important;
	max-width: var(--tp-width) !important;

	margin-left: auto !important;
	margin-right: auto !important;
}


/* ==========================================================
   SECTION INTRO
   ========================================================== */

.invi-tp-section-intro {
	margin-bottom: 18px !important;

	padding: 0 2px;
}

.invi-tp-section-intro .invi-tp-eyebrow {
	margin-bottom: 6px !important;
}

.invi-tp-section-intro h2 {
	max-width: 720px;

	margin: 0 !important;

	color: var(--tp-blue);

	font-family: "Source Serif Pro", Georgia, serif;
	font-size: 38px;
	font-weight: 500;
	line-height: 1;

	letter-spacing: -.025em;
}


/* ==========================================================
   TARGET GRID
   Vier gleichwertige Karten.
   ========================================================== */

.invi-tp-target-grid {
	position: relative;
	z-index: 20;

	display: grid !important;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 16px;

	margin-bottom: 25px !important;

	overflow: visible !important;
}

.invi-tp-target-slot {
	position: relative;

	min-width: 0;

	overflow: visible !important;
}


/* ==========================================================
   TARGET CARD
   ========================================================== */

.invi-tp-target {
	position: relative;

	width: 100%;

	margin: 0 !important;

	overflow: hidden;

	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);

	background: #FFFFFF;

	transition:
		border-color .16s ease,
		box-shadow .16s ease,
		transform .16s ease;
}

.invi-tp-card-blue {
	background:
		linear-gradient(
			115deg,
			#EEF5FF 0%,
			#F8FAFF 62%,
			#E8F1FF 100%
		);
}

.invi-tp-card-warm {
	background:
		linear-gradient(
			115deg,
			#FBF7EF 0%,
			#FCFAF6 62%,
			#F2EDE5 100%
		);
}

.invi-tp-target::after {
	content: "";

	position: absolute;

	right: -85px;
	bottom: -90px;

	width: 300px;
	height: 155px;

	border-radius: 50%;

	background: rgba(255,255,255,.42);

	pointer-events: none;
}


/* ==========================================================
   TARGET SUMMARY
   ========================================================== */

.invi-tp-target summary {
	position: relative;
	z-index: 2;

	display: flex;

	min-height: 92px;

	align-items: center;

	padding: 13px 64px 13px 100px;

	color: var(--tp-blue);

	cursor: pointer;

	list-style: none;
}

.invi-tp-target summary::-webkit-details-marker {
	display: none;
}

.invi-tp-target summary::before {
	content: "";

	position: absolute;

	left: 22px;
	top: 50%;

	width: 58px;
	height: 58px;

	transform: translateY(-50%);

	border-radius: 999px;

	background-color: #E2ECFF;
	background-image: var(--tp-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 31px 31px;
}

.invi-tp-card-warm summary::before {
	background-color: #EEE8DD;
}

.invi-tp-target summary::after {
	content: "+";

	position: absolute;

	right: 24px;
	top: 50%;

	transform: translateY(-54%);

	color: var(--tp-blue);

	font-family: Inter, Arial, sans-serif;
	font-size: 29px;
	font-weight: 300;
	line-height: 1;
}

.invi-tp-target[open] summary::after {
	content: "−";
}

.invi-tp-target-summary {
	display: flex;

	flex-direction: column;

	gap: 4px;

	min-width: 0;
}

.invi-tp-target-summary strong {
	color: var(--tp-blue);

	font-family: "Source Serif Pro", Georgia, serif;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.02;
}

.invi-tp-target-summary small {
	color: var(--tp-blue);

	font-family: Inter, Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
}


/* ==========================================================
   TARGET CONTENT
   ========================================================== */

.invi-tp-target-content {
	position: relative;
	z-index: 2;

	padding: 2px 25px 21px !important;

	color: var(--tp-text);

	font-family: Inter, Arial, sans-serif;
}

.invi-tp-target-content > p {
	margin: 0 0 11px !important;

	font-size: 12.75px;
	font-weight: 400;
	line-height: 1.48;
}

.invi-tp-checklist {
	margin: 2px 0 14px !important;
	padding: 0 !important;

	list-style: none;
}

.invi-tp-checklist li {
	position: relative;

	margin: 0 0 8px;

	padding-left: 34px;

	color: var(--tp-blue);

	font-family: Inter, Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.35;
}

.invi-tp-checklist li::before {
	content: "✓";

	position: absolute;

	left: 1px;
	top: -1px;

	display: grid;

	width: 20px;
	height: 20px;

	place-items: center;

	border: 1.5px solid var(--tp-blue);
	border-radius: 999px;

	color: var(--tp-blue);

	font-size: 11px;
	font-weight: 700;
}

.invi-tp-card-button .wp-block-button__link {
	padding: 9px 16px;

	border: 1px solid var(--tp-blue) !important;
	border-radius: 6px;

	background: #FFFFFF !important;
	color: var(--tp-blue) !important;

	font-family: Inter, Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
}

.invi-tp-card-button .wp-block-button__link:hover {
	background: var(--tp-blue) !important;
	color: #FFFFFF !important;
}


/* ==========================================================
   DESKTOP OVERLAY
   Karte öffnet sich, ohne das Raster zu verschieben.
   ========================================================== */

@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {

	.invi-tp-target-slot {
		height: 92px;
		min-height: 92px;
	}

	.invi-tp-target {
		height: 92px;
	}

	.invi-tp-target[open] {
		position: absolute;
		z-index: 100;

		top: 0;
		left: 0;

		width: 100%;
		height: auto;
		min-height: 285px;

		overflow: hidden;

		border-color: #B9CAE5;

		transform: translateY(-2px);

		box-shadow:
			0 18px 40px rgba(6,3,141,.13);
	}

	.invi-tp-target[open] summary {
		background: transparent;
	}

	.invi-tp-target[open] summary::before {
		background-color: #D9E7FF;
	}

	.invi-tp-card-warm[open] summary::before {
		background-color: #E7DFD1;
	}

	.invi-tp-target:not([open]):hover {
		border-color: #C3D0E3;

		transform: translateY(-1px);

		box-shadow:
			0 7px 18px rgba(6,3,141,.045);
	}
}


/* ==========================================================
   TYPISCHE ANLIEGEN
   ========================================================== */

.invi-tp-needs {
	position: relative;
	z-index: 1;

	display: grid !important;

	grid-template-columns: 28% repeat(4, 18%);

	align-items: center;

	min-height: 108px;

	margin-bottom: 16px !important;
}

.invi-tp-needs-title {
	padding-right: 30px;
}

.invi-tp-needs-title .invi-tp-eyebrow {
	margin-bottom: 5px !important;
}

.invi-tp-needs-title h2 {
	margin: 0 !important;

	color: var(--tp-blue);

	font-family: "Source Serif Pro", Georgia, serif;
	font-size: 30px;
	font-weight: 500;
	line-height: .98;

	letter-spacing: -.02em;
}

.invi-tp-need {
	position: relative;

	display: flex;

	min-height: 68px;

	align-items: center;

	padding: 6px 12px 6px 69px !important;

	border-left: 1px solid var(--tp-border);
}

.invi-tp-need::before {
	content: "";

	position: absolute;

	left: 17px;
	top: 50%;

	width: 44px;
	height: 44px;

	transform: translateY(-50%);

	border-radius: 999px;

	background-color: #E7F0FF;
	background-image: var(--tp-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 25px 25px;
}

.invi-tp-need p {
	width: 100%;

	margin: 0 !important;

	color: var(--tp-blue);

	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.38;
}


/* ==========================================================
   BOTTOM CTA
   ========================================================== */

.invi-tp-bottom-cta {
	position: relative;
	z-index: 1;

	overflow: hidden;

	min-height: 92px;

	padding: 14px 28px !important;

	border-radius: 8px;

	background:
		linear-gradient(
			110deg,
			#F5F9FF 0%,
			#EDF5FF 72%,
			#E8F2FF 100%
		);

	gap: 28px !important;
}

.invi-tp-bottom-cta::after {
	content: "";

	position: absolute;

	right: 250px;
	bottom: -82px;

	width: 310px;
	height: 150px;

	border-radius: 50%;

	background: rgba(255,255,255,.55);

	pointer-events: none;
}

.invi-tp-bottom-title,
.invi-tp-bottom-copy,
.invi-tp-bottom-buttons {
	position: relative;
	z-index: 2;
}

.invi-tp-bottom-title {
	flex: 1 1 auto;
}

.invi-tp-bottom-title .invi-tp-eyebrow {
	margin-bottom: 3px !important;
}

.invi-tp-bottom-title h2 {
	margin: 0 !important;

	color: var(--tp-blue);

	font-family: "Source Serif Pro", Georgia, serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 1;

	letter-spacing: -.02em;
}

.invi-tp-bottom-copy {
	max-width: 390px;

	margin: 0 !important;

	color: var(--tp-text);

	font-family: Inter, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.45;
}

.invi-tp-bottom-buttons {
	gap: 12px !important;
}

.invi-tp-bottom-buttons .wp-block-button__link {
	min-width: 210px !important;
}


/* ==========================================================
   CURRENT NAV
   ========================================================== */

.wp-block-navigation-item.current-menu-item > a {
	color: #06038D !important;
}

.wp-block-navigation-item.current-menu-item > a::after {
	content: "";

	display: block;

	height: 2px;

	margin-top: 5px;

	background: #06038D;
}


/* ==========================================================
   TABLET
   Normaler Dokumentfluss.
   ========================================================== */

@media (max-width: 1000px) {

	.invi-tp-target-grid {
		grid-template-columns: 1fr;
	}

	.invi-tp-target-slot {
		height: auto;
		min-height: 0;
	}

	.invi-tp-target {
		position: relative;

		height: auto;
		min-height: 0;

		overflow: hidden;
	}

	.invi-tp-target[open] {
		position: relative;

		top: auto;
		left: auto;

		width: 100%;

		transform: none;

		box-shadow: none;
	}

	.invi-tp-needs {
		grid-template-columns: 1fr 1fr;

		gap: 18px 0;
	}

	.invi-tp-needs-title {
		grid-column: 1 / -1;
	}

	.invi-tp-need:nth-child(2),
	.invi-tp-need:nth-child(4) {
		border-left: 0;
	}

	.invi-tp-bottom-cta {
		flex-wrap: wrap !important;
	}

	.invi-tp-bottom-copy {
		max-width: 520px;
	}
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 781px) {

	.invi-tp-hero {
		min-height: 500px !important;
	}

	.invi-tp-hero .wp-block-cover__image-background {
		object-position: 68% center;
	}

	.invi-tp-hero-inner {
		width: calc(100% - 32px) !important;

		min-height: 500px;
	}

	.invi-tp-hero-title {
		font-size: clamp(46px, 13vw, 62px);
	}

	.invi-tp-hero-text br {
		display: none;
	}

	.invi-tp-hero-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.invi-tp-hero-buttons .wp-block-button,
	.invi-tp-hero-buttons .wp-block-button__link {
		width: 100%;
	}

	.invi-tp-main {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.invi-tp-section-intro h2 {
		font-size: 32px;
	}

	.invi-tp-target-grid {
		gap: 12px;
	}

	.invi-tp-target summary {
		min-height: 92px;

		padding:
			12px
			48px
			12px
			81px;
	}

	.invi-tp-target summary::before {
		left: 14px;

		width: 50px;
		height: 50px;

		background-size: 27px 27px;
	}

	.invi-tp-target summary::after {
		right: 16px;

		font-size: 26px;
	}

	.invi-tp-target-summary strong {
		font-size: 22px;
	}

	.invi-tp-target-summary small {
		font-size: 12px;
	}

	.invi-tp-target-content {
		padding:
			2px
			18px
			20px !important;
	}

	.invi-tp-needs {
		grid-template-columns: 1fr;
	}

	.invi-tp-needs-title {
		padding-bottom: 8px;
	}

	.invi-tp-need {
		border-left: 0;
		border-top: 1px solid var(--tp-border);

		padding:
			14px
			12px
			14px
			65px !important;
	}

	.invi-tp-bottom-cta {
		padding: 22px !important;

		flex-wrap: wrap !important;
	}

	.invi-tp-bottom-title h2 {
		font-size: 31px;
	}

	.invi-tp-bottom-copy {
		max-width: none;
	}

	.invi-tp-bottom-buttons {
		width: 100%;

		flex-direction: column;
	}

	.invi-tp-bottom-buttons .wp-block-button,
	.invi-tp-bottom-buttons .wp-block-button__link {
		width: 100%;
	}
}