/**
 * /it-loesungen-fuer-unternehmen/ – Hero (.home-hero); ersetzt hier page-home-hero.css, daher dieselben Klassen.
 * Geteilte Bühne: links die Botschaft auf dem Markenverlauf (#08a1c7 → #0088a2) mit Kreislinien wie auf /ki-beratung/,
 * rechts bis zum Viewport-Rand das Grau von .kb-info mit einem Kreis aus vier Vierteln
 * (je ein verlinkter Leistungsbereich mit Foto) und dem Metricsiro-Zeichen in der Mitte.
 * Darunter folgt eine schlichte Kundenlogo-Leiste.
 * Eigene Klassen statt .intro, damit die Legacy-Regeln aus style.css / page-home-stripe-guides-*.css nicht greifen.
 * Der Header (style.css) liegt fixiert darüber – daher das padding-top der Bühne.
 *
 * Inhaltsbreite exakt wie header .container (81,25 %, max. 1800px; ≤1280px volle Breite minus 15px Rand),
 * damit der Inhalt immer zwischen linker und rechter Menükante liegt. Prozent statt vw, sonst verschiebt der Scrollbalken.
 * Innerhalb dieser Breite: 45 % Botschaft (Blau) / 55 % Kreis (Grau), die Farbflächen laufen bis zum Viewport-Rand.
 * Die Logo-Leiste darunter hat dagegen die Breite des folgenden Inhalts (.container-features, siehe
 * page-home-stripe-guides-*.css): min(1600px, 81,25 %), ≤992px volle Breite minus 15px Rand.
 * --hh-container wird erst am Verwendungsort aufgelöst; die Prozente beziehen sich dort auf die volle Bühnenbreite.
 */

body.page-home .home-hero {
	--hh-container: min(81.25%, 1800px);
	--hh-content: min(1600px, 81.25%);
	--hh-split: 0.45;
	--hh-orbit-gap: 12px;

	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 0 110px;
	color: #0f172a;
}

body.page-home .home-hero *,
body.page-home .home-hero *::before,
body.page-home .home-hero *::after {
	box-sizing: border-box;
}

/* Reset mit Klassen-Spezifität (0,1,0): schlägt globale Element-Regeln, Komponentenklassen weiter unten gewinnen per Reihenfolge */
.home-hero :where(ul, li, p, h1) {
	margin: 0;
	padding: 0;
}

.home-hero :where(li) {
	display: block;
	list-style: none;
}

.home-hero :where(li)::before {
	content: none;
}

.home-hero__container {
	position: relative;
	width: var(--hh-container);
	margin: 0 auto;
}

.home-hero__container--content {
	width: var(--hh-content);
}

/* ── Bühne ── */
/* Bühne + Logo-Leiste füllen zusammen den ersten Bildschirm: die Bühne nimmt den Platz über der Leiste ein,
   der Inhalt sitzt vertikal mittig. Schrift- und Kreisgrößen bleiben davon unberührt. */
.home-hero__stage {
	position: relative;
	display: flex;
	flex: 1 0 auto;
	align-items: center;
	padding: 160px 0 90px;
	overflow: hidden;
	background: linear-gradient(135deg, #08a1c7, #0088a2);
	color: #fff;
}

.home-hero__stage::before {
	content: "";
	position: absolute;
	top: 120px;
	left: -200px;
	width: 600px;
	height: 600px;
	border: 2px solid rgba(97, 250, 238, 0.16);
	border-radius: 50%;
	pointer-events: none;
}

/* Graue Fläche rechts bis zum Rand */
.home-hero__stage::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: calc((100% - var(--hh-container)) / 2 + var(--hh-container) * var(--hh-split));
	background: #eef3f8 url("/img/Hintergrund_Partner_Logos.webp") center / cover no-repeat;
	pointer-events: none;
}

.home-hero__grid {
	z-index: 1;
	display: grid;
	grid-template-columns: calc(100% * var(--hh-split)) minmax(0, 1fr);
	align-items: center;
}

/* ── Botschaft ── */
.home-hero__copy {
	padding-right: 40px;
}

.home-hero__copy > * {
	animation: home-hero-fade-up 0.6s ease both;
}

.home-hero__copy > :nth-child(2) { animation-delay: 0.05s; }
.home-hero__copy > :nth-child(3) { animation-delay: 0.1s; }
.home-hero__copy > :nth-child(4) { animation-delay: 0.16s; }
.home-hero__copy > :nth-child(5) { animation-delay: 0.22s; }
.home-hero__copy > :nth-child(6) { animation-delay: 0.28s; }

body.page-home .home-hero .home-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.home-hero__kicker::before {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
}

body.page-home .home-hero .home-hero__title {
	color: #fff;
	font-size: clamp(2.1rem, 2.8vw, 3.6rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.home-hero__nowrap {
	white-space: nowrap;
}

/* „Ihr IT-Systemhaus aus“ / „Ulm.“ – auf Smartphones bricht der Titel natürlich um */
.home-hero__title-accent {
	color: #c9f3fb;
}

body.page-home .home-hero .home-hero__subline {
	margin-top: 24px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.4;
}

body.page-home .home-hero .home-hero__lead {
	max-width: 50ch;
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.05rem;
	line-height: 1.65;
}

/* Buttons */
.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

body.page-home .home-hero .home-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	padding: 0 24px;
	border-radius: 5px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.home-hero__btn svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	transition: transform 0.2s ease;
}

body.page-home .home-hero .home-hero__btn--primary {
	background: #fff;
	color: #0088a2;
	box-shadow: 0 10px 24px rgba(2, 6, 23, 0.16);
}

body.page-home .home-hero .home-hero__btn--primary:hover {
	color: #006f85;
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(2, 6, 23, 0.22);
}

.home-hero__btn--primary:hover svg {
	transform: translateX(3px);
}

body.page-home .home-hero .home-hero__btn--ghost {
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff;
}

body.page-home .home-hero .home-hero__btn--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.home-hero__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Vertrauenssignale */
.home-hero__proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	margin-top: 34px;
}

body.page-home .home-hero .home-hero__proof li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	line-height: 1.3;
}

.home-hero__proof strong {
	color: #fff;
	font-weight: 600;
}

.home-hero__stars {
	display: inline-flex;
	gap: 2px;
}

.home-hero__stars svg {
	width: 15px;
	height: 15px;
	fill: #ffd166;
}

/* ── Rechte Seite: Kreis aus vier Vierteln ── */
.home-hero__side {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: #0f172a;
}

/* Rechtsbündig an der rechten Menükante, ragt nicht über die Inhaltsbreite hinaus */
.home-hero__orbit {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hh-orbit-gap);
	width: min(calc(100% - 48px), 460px);
	aspect-ratio: 1;
}

.home-hero__tile {
	position: relative;
	overflow: hidden;
	background: #d7e3ec;
	animation: home-hero-tile-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.home-hero__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Die Viertel sind unterschiedlich groß und hängen jeweils an der Kreismitte */
.home-hero__tile--tl {
	--hh-tile-scale: 0.86;
	border-top-left-radius: 100%;
	transform-origin: 100% 100%;
	animation-delay: 0.1s;
}

.home-hero__tile--tr {
	--hh-tile-scale: 1;
	border-top-right-radius: 100%;
	transform-origin: 0 100%;
	animation-delay: 0.2s;
}

.home-hero__tile--bl {
	--hh-tile-scale: 1;
	border-bottom-left-radius: 100%;
	transform-origin: 100% 0;
	animation-delay: 0s;
}

.home-hero__tile--br {
	--hh-tile-scale: 0.9;
	border-bottom-right-radius: 100%;
	transform-origin: 0 0;
	animation-delay: 0.3s;
}

.home-hero__tile {
	transform: scale(var(--hh-tile-scale));
}

/* Teaser-Viertel im Look der Leistungs-Kacheln der Startseite: Foto (--tile-photo, inline) unter dem Verlauf der Bereichsfarbe.
   Inhalt sitzt nahe der Kreismitte, weil das Viertel außen abgerundet ist. */
.home-hero__tile--cloud { --c1: #0dadea; --c2: #4dc5df; }
.home-hero__tile--security { --c1: #c65a6f; --c2: #e97a8f; }
.home-hero__tile--services { --c1: #00a99d; --c2: #00c9b8; }
.home-hero__tile--ki { --c1: #2463eb; --c2: #199afb; }

body.page-home .home-hero a.home-hero__tile {
	display: flex;
	background:
		radial-gradient(ellipse 120% 140% at 50% 50%, color-mix(in srgb, var(--c1) 70%, transparent) 0%, color-mix(in srgb, var(--c2) 66%, transparent) 55%, color-mix(in srgb, color-mix(in srgb, var(--c2) 78%, #0f172a) 72%, transparent) 100%),
		var(--tile-photo) center / cover no-repeat #0f172a;
	color: #fff;
	text-decoration: none;
	transition: filter 0.25s ease;
}

body.page-home .home-hero a.home-hero__tile--tl { justify-content: flex-end; align-items: flex-end; padding: 0 24% 20% 0; }
body.page-home .home-hero a.home-hero__tile--tr { justify-content: flex-start; align-items: flex-end; padding: 0 0 20% 24%; }
body.page-home .home-hero a.home-hero__tile--bl { justify-content: flex-end; align-items: flex-start; padding: 20% 24% 0 0; }
body.page-home .home-hero a.home-hero__tile--br { justify-content: flex-start; align-items: flex-start; padding: 20% 0 0 24%; }

/* Feines Raster zur abgerundeten Außenkante hin, wie die Pixel-Deko der Leistungs-Kacheln */
.home-hero__tile::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 14px 14px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) 0 0 / 14px 14px;
	-webkit-mask-image: radial-gradient(circle at var(--px-corner), #000 0, rgba(0, 0, 0, 0.4) 60px, transparent 120px);
	mask-image: radial-gradient(circle at var(--px-corner), #000 0, rgba(0, 0, 0, 0.4) 60px, transparent 120px);
}

.home-hero__tile--tl { --px-corner: 30% 30%; }
.home-hero__tile--tr { --px-corner: 70% 30%; }
.home-hero__tile--bl { --px-corner: 30% 70%; }
.home-hero__tile--br { --px-corner: 70% 70%; }

.home-hero__tile:hover {
	filter: brightness(1.08) saturate(1.05);
}

.home-hero__tile:focus-visible {
	outline: 2px solid #0088a2;
	outline-offset: 3px;
}

.home-hero__teaser {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	max-width: 100%;
}

.home-hero__tile--tl .home-hero__teaser,
.home-hero__tile--bl .home-hero__teaser {
	align-items: flex-end;
	text-align: right;
}

.home-hero__teaser-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
	transition: transform 0.25s ease;
}

.home-hero__tile:hover .home-hero__teaser-icon {
	transform: scale(1.08);
}

.home-hero__teaser-icon svg {
	width: 21px;
	height: 21px;
}

.home-hero__teaser-label {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.25;
	text-shadow: 0 1px 8px rgba(2, 6, 23, 0.25);
}

/* Metricsiro-Zeichen in der Kreismitte */
.home-hero__core {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22%;
	aspect-ratio: 1;
	padding: 3.2%;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
	transform: translate(-50%, -50%);
	animation: home-hero-core-in 0.7s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.home-hero__core > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(135deg, #08a1c7, #0088a2);
	color: #fff;
}

.home-hero__core svg {
	width: 46%;
	height: 46%;
}

/* Standort-Kärtchen ragt links unten aus dem Kreis ins Grau (rechts wäre es über der Menükante) */
.home-hero__badge {
	position: absolute;
	bottom: 6%;
	left: -64px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 12px;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
	color: #0f172a;
	animation: home-hero-fade-up 0.6s 0.8s ease both;
}

.home-hero__badge > span:last-child {
	display: flex;
	flex-direction: column;
}

.home-hero__badge strong {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.home-hero__badge small {
	color: #64748b;
	font-size: 12.5px;
	line-height: 1.35;
}

.home-hero__badge-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, #08a1c7, #0088a2);
	color: #fff;
}

.home-hero__badge-icon svg {
	width: 19px;
	height: 19px;
}

/* ── Kundenlogos unter der Bühne ── */
.home-hero__trust {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 30px 8px;
}

.home-hero__trust-label {
	flex: 0 0 auto;
	color: #64748b;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.home-hero__trust-logos {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

body.page-home .home-hero .home-hero__trust-logos li {
	display: flex;
	align-items: center;
	min-width: 0;
}

.home-hero__trust-logos img {
	display: block;
	width: auto;
	height: 26px;
	max-width: 120px;
	object-fit: contain;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.home-hero__trust-logos img:hover {
	opacity: 1;
}

/* ── Animationen ── */
@keyframes home-hero-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@keyframes home-hero-tile-in {
	from { opacity: 0; transform: scale(calc(var(--hh-tile-scale) * 0.8)); }
	to { opacity: 1; transform: scale(var(--hh-tile-scale)); }
}

@keyframes home-hero-core-in {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-45deg); }
	to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
	.home-hero__tile,
	.home-hero__core,
	.home-hero__badge,
	.home-hero__copy > * {
		animation: none;
	}

	.home-hero__btn,
	.home-hero__btn svg,
	.home-hero__trust-logos img {
		transition: none;
	}
}

/* ── Sehr breite Bildschirme ── */
@media (min-width: 1921px) and (min-height: 1000px) {
	.home-hero__orbit {
		width: min(calc(100% - 48px), 540px);
	}
}

/* ── Laptops mit geringer Höhe ── */
@media (min-width: 993px) and (max-height: 820px) {
	.home-hero__stage {
		padding-top: 150px;
		padding-bottom: 64px;
	}

	body.page-home .home-hero .home-hero__subline {
		margin-top: 18px;
	}

	body.page-home .home-hero .home-hero__lead {
		margin-top: 10px;
		font-size: 1.02rem;
	}

	.home-hero__actions,
	.home-hero__proof {
		margin-top: 26px;
	}

	.home-hero__orbit {
		width: min(calc(100% - 48px), 400px);
	}

	.home-hero__trust {
		padding-top: 22px;
		padding-bottom: 22px;
	}
}

/* ── Kleine Laptops / Tablet quer (Burger-Menü ab ≤1280px) ── */
@media (max-width: 1280px) {
	body.page-home .home-hero {
		--hh-container: calc(100% - 30px);
	}

	.home-hero__stage {
		padding-top: 140px;
	}

	.home-hero__orbit {
		--hh-orbit-gap: 10px;
		width: min(calc(100% - 40px), 420px);
	}

	.home-hero__badge {
		left: -40px;
	}

	.home-hero__trust {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.home-hero__trust-logos {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 16px 40px;
	}
}

/* ── Tablet hochkant und kleiner: Botschaft, dann Kreis, dann Logos ── */
@media (max-width: 992px) {
	/* Gestapelt ist der Inhalt ohnehin höher als der Bildschirm – keine Mindesthöhe */
	body.page-home .home-hero {
		--hh-content: calc(100% - 30px);
		display: block;
		min-height: 0;
		margin-bottom: 80px;
	}

	.home-hero__stage {
		display: block;
		min-height: 0;
		padding: 136px 0 0;
	}

	.home-hero__stage::after {
		display: none;
	}

	.home-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.home-hero__copy {
		max-width: 640px;
		padding: 0 0 48px;
	}

	/* Graue Fläche unter der Botschaft, randlos (Container ist 100vw − 30px) */
	.home-hero__side {
		margin: 0 -15px;
		padding: 48px 15px 56px;
		justify-content: center;
		background: #eef3f8 url("/img/Hintergrund_Partner_Logos.webp") center / cover no-repeat;
	}

	.home-hero__orbit {
		width: min(100%, 420px);
	}

	.home-hero__badge {
		left: 0;
	}

	.home-hero__trust {
		padding: 26px 0 0;
	}
}

/* ── Smartphones ── */
@media (max-width: 600px) {
	.home-hero__stage {
		padding-top: 128px;
	}

	body.page-home .home-hero .home-hero__kicker {
		margin-bottom: 16px;
		font-size: 0.75rem;
	}

	body.page-home .home-hero .home-hero__title {
		font-size: clamp(2.1rem, 10vw, 2.6rem);
	}

	.home-hero__title-break {
		display: none;
	}

	body.page-home .home-hero .home-hero__subline {
		margin-top: 18px;
		font-size: 1.08rem;
	}

	body.page-home .home-hero .home-hero__lead {
		margin-top: 10px;
		font-size: 1rem;
	}

	.home-hero__actions {
		flex-direction: column;
		margin-top: 28px;
	}

	body.page-home .home-hero .home-hero__btn {
		width: 100%;
	}

	.home-hero__proof {
		gap: 10px 20px;
		margin-top: 26px;
	}

	.home-hero__copy {
		padding-bottom: 40px;
	}

	.home-hero__side {
		padding: 36px 15px 44px;
	}

	.home-hero__orbit {
		--hh-orbit-gap: 8px;
	}

	.home-hero__badge {
		bottom: -6px;
		padding: 8px 14px 8px 8px;
	}

	.home-hero__badge small {
		display: none;
	}

	.home-hero__teaser {
		gap: 8px;
	}

	.home-hero__teaser-icon {
		width: 36px;
		height: 36px;
	}

	.home-hero__teaser-icon svg {
		width: 18px;
		height: 18px;
	}

	.home-hero__teaser-label {
		font-size: 13.5px;
	}

	.home-hero__badge-icon {
		width: 30px;
		height: 30px;
	}

	.home-hero__trust {
		padding-top: 22px;
	}

	.home-hero__trust-logos {
		gap: 14px 26px;
	}

	.home-hero__trust-logos img {
		height: 22px;
		max-width: 96px;
	}
}