/*
 * IT-Tecture Basiskomponenten
 *
 * Die Bildsprache der Startseite als wiederverwendbare Komponenten fuer alle
 * Unterseiten. Alle Werte stammen aus dem Seiten-Kit (builder-kit-13) und den
 * Sektionen der Startseite:
 *   Flaeche    .navigator-card ......... #111A33, radius 2rem, Schraegung
 *   Anzeige    Hero-H1 ................. --e-global-typography-primary, 700
 *   Titel      Sektions-H2 ............. --e-global-typography-secondary, 500
 *   Kartentitel  H3 der Loesungskarten . --e-global-typography-5e26247, 500
 *   Kennzahl   "20+" im Akzentblock .... wie Sektions-H2, Zeilenhoehe 1
 *   Button     Header-/Hero-CTA ........ Inter 600, radius 0.875em, 1.2em 1.7em
 *
 * Jede Komponente hat eine generische Klasse (.itt-panel, .itt-title, ...) und
 * daneben die bestehenden Hooks der Unterseiten im selben Selektor, damit es
 * nur eine Definition je Komponente gibt. Die Stellenkarten des Heyrecruit-
 * Widgets werden per JS bzw. PHP erzeugt und koennen keine eigene Klasse
 * mitbringen, deshalb stehen sie hier mit ihrem eigenen Namen.
 *
 * Groessen, Gewicht und line-height sind bewusst ueberall explizit gesetzt:
 * das Kit vererbt in Bereiche ausserhalb des Builders sonst font-size 88px und
 * font-weight 700.
 */

/* ------------------------------------------------------------------ Flaeche */

.itt-panel,
.itt-kpi,
.itt-contact,
.itt-product blockquote,
.hr-scope .hr-job {
	--itt-bevel: 2rem;
	box-sizing: border-box;
	background: #111a33;
	border: 0;
	border-radius: 2rem;
	clip-path: polygon(
		var(--itt-bevel) 0,
		100% 0,
		100% calc(100% - var(--itt-bevel)),
		calc(100% - var(--itt-bevel)) 100%,
		0 100%,
		0 var(--itt-bevel)
	);
	padding: 1.5rem 1.75rem;
	color: var(--e-global-color-text, #ffffff);
	font-family: "Lato", sans-serif;
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* Grosse Flaechen mit deutlicherer Schraegung. */
.itt-panel--lg,
.itt-contact,
.hr-scope .hr-job {
	--itt-bevel: 2.5rem;
	padding: 2rem 2.5rem;
}

.hr-scope .hr-job:hover {
	background: #16213f;
}

/* --------------------------------------------------------------- Typografie */

.itt-display,
.itt-title,
.itt-subtitle,
.itt-stat,
.itt-product h1,
.itt-product h2,
.itt-product h3,
.itt-contact__name,
.itt-kpi__label,
.itt-kpi__value,
.hr-scope h1,
.hr-scope .hr-job h2 {
	font-family: "Lato", sans-serif;
	letter-spacing: -0.02em;
	color: #fefcfb;
}

/* Seitentitel, Groesse wie die Hero-H1 der Startseite. */
.itt-display,
.itt-product h1 {
	font-size: var(--e-global-typography-primary-font-size, clamp(3.75rem, 3rem + 2.5vw, 5.5rem));
	font-weight: 700;
	line-height: 1;
}

/* Sektionsueberschrift, Groesse wie die H2 der Startseite. */
.itt-title,
.itt-product h2,
.hr-scope h1 {
	font-size: var(--e-global-typography-secondary-font-size, clamp(3rem, 2.4643rem + 1.7857vw, 4.25rem));
	font-weight: 500;
	line-height: 1.2;
}

/* Kartenueberschrift, Groesse wie die H3 der Loesungskarten. */
.itt-subtitle,
.itt-product h3,
.itt-contact__name,
.itt-kpi__label,
.hr-scope .hr-job h2 {
	font-size: var(--e-global-typography-5e26247-font-size, clamp(1.5rem, 1.3929rem + 0.3571vw, 1.75rem));
	font-weight: 500;
	line-height: 1.2;
}

/* Kennzahl, wie das "20+" im Akzentblock der Startseite. */
.itt-stat,
.itt-kpi__value {
	display: block;
	font-size: var(--e-global-typography-secondary-font-size, clamp(3rem, 2.4643rem + 1.7857vw, 4.25rem));
	font-weight: 500;
	line-height: 1;
}

/* Kleine Auszeichnungszeile ueber einer Ueberschrift. */
.itt-eyebrow,
.itt-product__reference-partner,
.itt-contact__role {
	font-family: "Inter", sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--itt-accent, var(--e-global-color-accent, #30abe1));
}

/* ------------------------------------------------------------------- Button */

.itt-btn,
.itt-product__actions .builder-button,
.hr-scope .hr-btn {
	display: inline-block;
	background: var(--e-global-color-primary, #12929d);
	border: 0;
	border-radius: 0.875em;
	color: var(--e-global-color-text, #ffffff);
	cursor: pointer;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.05em;
	padding: 1.2em 1.7em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.itt-btn:hover,
.itt-btn:focus,
.itt-product__actions .builder-button:hover,
.itt-product__actions .builder-button:focus,
.hr-scope .hr-btn:hover,
.hr-scope .hr-btn:focus {
	background: var(--itt-accent, var(--e-global-color-accent, #30abe1));
	color: var(--e-global-color-text, #ffffff);
}

/* ---------------------------------------------------------------- Mobil */

@media (max-width: 767px) {
	.itt-panel,
	.itt-kpi,
	.itt-contact,
	.itt-product blockquote,
	.hr-scope .hr-job {
		--itt-bevel: 1.5rem;
		padding: 1.5rem;
	}

	.itt-panel--lg,
	.itt-contact,
	.hr-scope .hr-job {
		--itt-bevel: 2rem;
		padding: 1.5rem;
	}

	.itt-btn,
	.itt-product__actions .builder-button,
	.hr-scope .hr-btn {
		font-size: 0.9375rem;
		white-space: normal;
	}
}