/**
 * Startseite – „Digitale Transformation“: Kopf (.it-services-section) + drei Service-Karten (#transformation-leistungen).
 * Look wie Leistungs-Kacheln / Kundenkarte: graue Karten (8px), Icon im Petrol-Kreis, „// 01“-Nummer, Pixel-Ecke unten rechts.
 * social-links-section.css + page-home-stripe-guides-*.css laden nach dieser Datei → Regeln hängen an der ID.
 */

/* Themen-Zeile unter dem Einleitungstext: Monospace, getrennt durch Petrol-Pixel (wie „//“ + Pixel-Motiv der Kacheln) */
body.page-home .it-services-header .transformation-pillars {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 0;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

body.page-home .it-services-header .transformation-pillars li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	color: #475569;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

body.page-home .it-services-header .transformation-pillars li + li::before {
	content: "";
	width: 6px;
	height: 6px;
	margin: 0 18px;
	background: #0088a2;
	box-shadow: 8px 0 0 rgba(0, 136, 162, 0.35);
	transform: translateX(-4px);
}

/* Karten */
body.page-home #transformation-leistungen .border-wrapper {
	border: none !important;
}

body.page-home #transformation-leistungen .corner-gradient-wrapper {
	display: none;
}

body.page-home #transformation-leistungen .social-media-grid {
	gap: 24px;
	counter-reset: transformation-card;
}

body.page-home #transformation-leistungen .social-media-grid > .social-media-link.service-card {
	--p1: linear-gradient(rgba(100, 116, 139, 0.22), rgba(100, 116, 139, 0.22));
	--p2: linear-gradient(rgba(100, 116, 139, 0.13), rgba(100, 116, 139, 0.13));
	--p3: linear-gradient(rgba(100, 116, 139, 0.06), rgba(100, 116, 139, 0.06));
	counter-increment: transformation-card;
	gap: 28px;
	padding: 36px 36px 40px;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 8px;
	/* wie .tab-content-desktop in #unsere-kunden (home-kunden-tabs.css); bläulicher Verlauf des Musters links unten wird ins Grau ausgeblendet */
	background:
		linear-gradient(to top right, #eef3f8 0%, #eef3f8 25%, rgba(238, 243, 248, 0) 65%),
		#eef3f8 url("/img/Hintergrund_Partner_Logos.webp") right top / cover no-repeat;
	box-shadow: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

body.page-home #transformation-leistungen .social-media-grid > .social-media-link.service-card:hover {
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
	transform: translateY(-4px);
}

/* Petrol-Leiste oben (statt der alten Hover-Füllung von links/rechts) */
body.page-home #transformation-leistungen .social-media-link::before {
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	width: auto;
	height: 3px;
	background: linear-gradient(90deg, #08a1c7 0%, #0088a2 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

body.page-home #transformation-leistungen .social-media-link:hover::before {
	width: auto;
	opacity: 1;
}

/* Pixel-Ecke unten rechts */
body.page-home #transformation-leistungen .social-media-link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 84px;
	height: 84px;
	pointer-events: none;
	background:
		var(--p1) right 0 bottom 0 / 13px 13px no-repeat,
		var(--p1) right 14px bottom 0 / 13px 13px no-repeat,
		var(--p1) right 0 bottom 14px / 13px 13px no-repeat,
		var(--p2) right 28px bottom 0 / 13px 13px no-repeat,
		var(--p2) right 14px bottom 14px / 13px 13px no-repeat,
		var(--p2) right 0 bottom 28px / 13px 13px no-repeat,
		var(--p3) right 42px bottom 0 / 13px 13px no-repeat,
		var(--p3) right 28px bottom 14px / 13px 13px no-repeat,
		var(--p3) right 14px bottom 28px / 13px 13px no-repeat,
		var(--p3) right 0 bottom 42px / 13px 13px no-repeat,
		var(--p3) right 70px bottom 0 / 13px 13px no-repeat,
		var(--p3) right 0 bottom 70px / 13px 13px no-repeat;
}

/* Icon im Petrol-Kreis + Nummer rechts daneben */
body.page-home #transformation-leistungen .social-media-link .service-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 4px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: linear-gradient(135deg, #08a1c7 0%, #0088a2 100%);
	box-shadow: 0 10px 24px rgba(0, 136, 162, 0.22);
	box-sizing: border-box;
}

body.page-home #transformation-leistungen .social-media-link .service-icon::before {
	content: "";
	width: 24px;
	height: 24px;
	background: var(--transformation-icon) center / contain no-repeat;
	filter: brightness(0) invert(1);
}

body.page-home #transformation-leistungen .social-media-link .beratung-icon {
	--transformation-icon: url("/img/icons/lamp-white.png");
}

body.page-home #transformation-leistungen .social-media-link .monitoring-icon {
	--transformation-icon: url("/img/icons/monitoring.svg");
}

body.page-home #transformation-leistungen .social-media-link .backup-icon {
	--transformation-icon: url("/img/icons/backup.svg");
}

body.page-home #transformation-leistungen .social-media-link .service-content::before {
	content: "// " counter(transformation-card, decimal-leading-zero);
	position: absolute;
	top: -66px;
	right: 0;
	color: #0088a2;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

body.page-home #transformation-leistungen .social-media-link .service-content {
	position: relative;
	gap: 14px;
}

body.page-home #transformation-leistungen .social-media-link h3 {
	color: #0f172a;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}

body.page-home #transformation-leistungen .social-media-link p {
	color: #475569;
	font-size: 15.5px;
	line-height: 1.7;
}

/* Link als Textlink unten statt Eck-Button */
body.page-home #transformation-leistungen .social-media-link .service-link-simple {
	position: relative;
	right: auto;
	bottom: auto;
	align-self: flex-start;
	width: auto;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #0088a2;
	font-size: 15px;
	font-weight: 600;
	overflow: visible;
}

body.page-home #transformation-leistungen .social-media-link .service-link-simple::before {
	display: none;
}

body.page-home #transformation-leistungen .social-media-link .service-link-simple svg {
	transition: transform 0.25s ease;
}

body.page-home #transformation-leistungen .social-media-link:hover .service-link-simple {
	color: #007187;
}

body.page-home #transformation-leistungen .social-media-link:hover .service-link-simple svg {
	transform: translateX(4px);
}

@media (min-width: 800px) and (max-width: 1100px) {
	body.page-home #transformation-leistungen .social-media-grid > .social-media-link.service-card {
		padding: 28px 24px 32px;
	}
}

@media (max-width: 799px) {
	body.page-home .it-services-header .transformation-pillars {
		justify-content: flex-start;
	}

	body.page-home #transformation-leistungen .social-media-grid {
		gap: 16px;
	}

	body.page-home #transformation-leistungen .social-media-grid > .social-media-link.service-card {
		padding: 28px 24px 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-home #transformation-leistungen .social-media-grid > .social-media-link.service-card,
	body.page-home #transformation-leistungen .social-media-link .service-link-simple svg {
		transition: none;
	}

	body.page-home #transformation-leistungen .social-media-grid > .social-media-link.service-card:hover,
	body.page-home #transformation-leistungen .social-media-link:hover .service-link-simple svg {
		transform: none;
	}
}