/**
 * Startseite – Leistungs-Kacheln (#leistungen) im Look der KI-Seiten:
 * Kopf = Foto unter dem Farbverlauf der jeweiligen Kachel, mit Pixel-Deko + Icon im Glas-Kreis (wie .kb-baustein-hero__visual auf /ki-beratung/),
 * Textbereich = heller Hauch der Kachelfarbe, nach unten zu Weiß auslaufend.
 * ID-Selektor nötig: services-section-update.css setzt Farben pro Kachel mit nth-child-Selektoren und !important.
 */

/* Farben + Pixel-Ecke pro Kachel */
body.page-home #leistungen .services-blocks .block.tile-azure {
	--c1: #0dadea;
	--c2: #4dc5df;
	--o1: rgba(13, 173, 234, 0.88);
	--o2: rgba(77, 197, 223, 0.8);
	--soft: rgba(13, 173, 234, 0.2);
	--tile-icon: url("/img/icons/azurecloud-white.png");
	--tile-photo: url("/img/Menue/Microsoft-Azure-Metricsiro.webp");
	--px-corner: left top;
	--pixels:
		var(--p1) left 1px top 1px / 13px 13px no-repeat,
		var(--p1) left 15px top 1px / 13px 13px no-repeat,
		var(--p1) left 1px top 15px / 13px 13px no-repeat,
		var(--p2) left 29px top 1px / 13px 13px no-repeat,
		var(--p2) left 15px top 15px / 13px 13px no-repeat,
		var(--p2) left 1px top 29px / 13px 13px no-repeat,
		var(--p3) left 43px top 1px / 13px 13px no-repeat,
		var(--p3) left 29px top 15px / 13px 13px no-repeat,
		var(--p3) left 15px top 29px / 13px 13px no-repeat,
		var(--p3) left 1px top 43px / 13px 13px no-repeat,
		var(--p3) left 71px top 1px / 13px 13px no-repeat,
		var(--p3) left 1px top 71px / 13px 13px no-repeat;
}

body.page-home #leistungen .services-blocks .block.tile-infra {
	--c1: #00a99d;
	--c2: #00c9b8;
	--o1: rgba(0, 169, 157, 0.88);
	--o2: rgba(0, 201, 184, 0.8);
	--soft: rgba(0, 169, 157, 0.2);
	--tile-icon: url("/img/icons/server-white.svg");
	--tile-photo: url("/img/Menue/DSC002311.webp");
	--px-corner: right bottom;
	--pixels:
		var(--p1) right 0 bottom 0 / 13px 13px no-repeat,
		var(--p1) right 0 bottom 14px / 13px 13px no-repeat,
		var(--p2) right 14px bottom 0 / 13px 13px no-repeat,
		var(--p2) right 0 bottom 28px / 13px 13px no-repeat,
		var(--p2) right 28px bottom 0 / 13px 13px no-repeat,
		var(--p3) right 14px bottom 28px / 13px 13px no-repeat,
		var(--p3) right 42px bottom 0 / 13px 13px no-repeat,
		var(--p3) right 0 bottom 56px / 13px 13px no-repeat,
		var(--p3) right 28px bottom 14px / 13px 13px no-repeat;
}

body.page-home #leistungen .services-blocks .block.tile-security {
	--c1: #c65a6f;
	--c2: #e97a8f;
	--o1: rgba(198, 90, 111, 0.88);
	--o2: rgba(233, 122, 143, 0.8);
	--soft: rgba(198, 90, 111, 0.2);
	--tile-icon: url("/img/icons/itsecurity-white.svg");
	--tile-photo: url("/img/Menue/slider-datenschutz1.webp");
	--px-corner: right top;
	--pixels:
		var(--p1) right 0 top 1px / 13px 13px no-repeat,
		var(--p2) right 14px top 1px / 13px 13px no-repeat,
		var(--p2) right 0 top 15px / 13px 13px no-repeat,
		var(--p1) right 14px top 15px / 13px 13px no-repeat,
		var(--p3) right 28px top 1px / 13px 13px no-repeat,
		var(--p3) right 0 top 29px / 13px 13px no-repeat,
		var(--p3) right 42px top 15px / 13px 13px no-repeat,
		var(--p3) right 28px top 29px / 13px 13px no-repeat;
}

body.page-home #leistungen .services-blocks .block.tile-workplace {
	--c1: #00a0c8;
	--c2: #0088a2;
	--o1: rgba(0, 160, 200, 0.88);
	--o2: rgba(0, 136, 162, 0.82);
	--soft: rgba(0, 136, 162, 0.2);
	--tile-icon: url("/img/icons/modernworkplace-white.svg");
	--tile-photo: url("/img/Menue/digital-workplace-slider.webp");
	--tile-photo-pos: left center;
	--px-corner: left top;
	--pixels:
		var(--p2) left 1px top 1px / 13px 13px no-repeat,
		var(--p1) left 15px top 1px / 13px 13px no-repeat,
		var(--p2) left 29px top 1px / 13px 13px no-repeat,
		var(--p1) left 1px top 15px / 13px 13px no-repeat,
		var(--p3) left 15px top 15px / 13px 13px no-repeat,
		var(--p2) left 1px top 29px / 13px 13px no-repeat,
		var(--p3) left 57px top 1px / 13px 13px no-repeat,
		var(--p3) left 43px top 15px / 13px 13px no-repeat,
		var(--p3) left 1px top 57px / 13px 13px no-repeat;
}

body.page-home #leistungen .services-blocks .block.tile-ki {
	--c1: #2463eb;
	--c2: #199afb;
	--o1: rgba(16, 94, 251, 0.88);
	--o2: rgba(25, 154, 251, 0.8);
	--soft: rgba(36, 99, 235, 0.2);
	--tile-icon: url("/img/icons/openai-white.png");
	--tile-photo: url("/img/placetel-voip-ki-2.webp");
	--tile-photo-pos: 62% 42%;
	--tile-photo-bg: #ffffff;
	--photo-cover: 76%;
	--px-corner: left bottom;
	--pixels:
		var(--p1) left 1px bottom 0 / 13px 13px no-repeat,
		var(--p1) left 15px bottom 0 / 13px 13px no-repeat,
		var(--p2) left 29px bottom 0 / 13px 13px no-repeat,
		var(--p2) left 1px bottom 14px / 13px 13px no-repeat,
		var(--p1) left 15px bottom 14px / 13px 13px no-repeat,
		var(--p3) left 43px bottom 0 / 13px 13px no-repeat,
		var(--p3) left 29px bottom 14px / 13px 13px no-repeat,
		var(--p3) left 1px bottom 28px / 13px 13px no-repeat,
		var(--p3) left 15px bottom 42px / 13px 13px no-repeat,
		var(--p3) left 57px bottom 14px / 13px 13px no-repeat;
}

body.page-home #leistungen .services-blocks .block.tile-digital {
	--c1: #9c91df;
	--c2: #bdb5eb;
	--o1: rgba(156, 145, 223, 0.9);
	--o2: rgba(189, 181, 235, 0.82);
	--soft: rgba(156, 145, 223, 0.22);
	--tile-icon: url("/img/icons/process.svg");
	--tile-photo: url("/img/Menue/process-leistung.webp");
	--tile-photo-size: auto 100%;
	--tile-photo-pos: left center;
	--tile-photo-bg: #a290e6;
	--px-corner: right top;
	--pixels:
		var(--p1) right 0 top 1px / 13px 13px no-repeat,
		var(--p2) right 14px top 1px / 13px 13px no-repeat,
		var(--p1) right 0 top 15px / 13px 13px no-repeat,
		var(--p2) right 14px top 15px / 13px 13px no-repeat,
		var(--p3) right 28px top 1px / 13px 13px no-repeat,
		var(--p2) right 0 top 29px / 13px 13px no-repeat,
		var(--p3) right 28px top 29px / 13px 13px no-repeat,
		var(--p3) right 42px top 15px / 13px 13px no-repeat,
		var(--p3) right 14px top 43px / 13px 13px no-repeat;
}

/* Kachel */
body.page-home #leistungen .services-blocks .block {
	background: #ffffff !important;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 5px;
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
	transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.35s ease;
}

body.page-home #leistungen .services-blocks .block:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 22px 44px var(--soft) !important;
}

/* Kopf: Foto + Verlauf + Icon */
body.page-home #leistungen .services-blocks .block .icon {
	position: relative;
	overflow: hidden;
	background:
		var(--tile-icon) center / 52px auto no-repeat,
		linear-gradient(135deg, var(--o1) 0%, var(--o2) 100%),
		var(--tile-photo) var(--tile-photo-pos, center) / cover no-repeat !important;
}

/* Pixel-Deko: Raster + aufgelöste Pixel in einer Ecke (Ecke/Form je Kachel). Raster ist an derselben Ecke verankert wie --pixels, Zellen 14px. */
body.page-home #leistungen .services-blocks .block {
	--p1: linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.58));
	--p2: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.38));
	--p3: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
}

body.page-home #leistungen .services-blocks .block .icon::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		var(--pixels),
		linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px) var(--px-corner) / 14px 14px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px) var(--px-corner) / 14px 14px;
	-webkit-mask-image: radial-gradient(circle at var(--px-corner), #000 0, #000 60px, rgba(0, 0, 0, 0.6) 120px, transparent 230px);
	mask-image: radial-gradient(circle at var(--px-corner), #000 0, #000 60px, rgba(0, 0, 0, 0.6) 120px, transparent 230px);
	opacity: 0.9;
	transition: opacity 0.35s ease;
}

body.page-home #leistungen .services-blocks .block:hover .icon::before {
	opacity: 1;
}

/* Glas-Kreis hinter dem Icon (halbtransparent, Icon bleibt sichtbar) */
body.page-home #leistungen .services-blocks .block .icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 108px;
	height: 108px;
	margin: -54px 0 0 -54px;
	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);
	box-sizing: border-box;
	pointer-events: none;
	transition: transform 0.35s ease;
}

body.page-home #leistungen .services-blocks .block:hover .icon::after {
	transform: scale(1.08);
}

/* Textbereich */
body.page-home #leistungen .services-blocks .block .info {
	background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 9%, #ffffff) 0%, #ffffff 65%) !important;
	padding-bottom: 112px;
}

body.page-home #leistungen .services-blocks .block .info h3 {
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: #0f172a !important;
	color: #0f172a !important;
	font-weight: 600;
}

body.page-home #leistungen .services-blocks .block .service-subtitle {
	color: #64748b;
}

/* Kategorie im Code-Kommentar-Look: „// Sicherheit & Compliance“ */
body.page-home #leistungen .services-blocks .block .service-category {
	margin-bottom: 18px;
	color: #475569 !important;
	font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

body.page-home #leistungen .services-blocks .block .service-category::before {
	content: "// ";
	color: var(--c1);
	font-weight: 700;
}

body.page-home #leistungen .services-blocks .block .service-description {
	color: #475569;
}

/* „Mehr erfahren“: immer sichtbar als weißer Button */
body.page-home #leistungen .services-blocks .block .service-more {
	bottom: 36px;
	padding: 11px 20px;
	border-radius: 5px;
	background: #ffffff !important;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
	color: var(--c1) !important;
	white-space: nowrap;
	opacity: 1;
	transform: translateX(-50%);
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

body.page-home #leistungen .services-blocks .block:hover .service-more {
	background: var(--c1) !important;
	box-shadow: 0 10px 22px var(--soft);
	color: #ffffff !important;
	transform: translateX(-50%) translateY(-2px);
}

/* Linie unten im Kachel-Verlauf */
body.page-home #leistungen .services-blocks .block .info .line {
	height: 4px !important;
	background: linear-gradient(90deg, var(--c1) 0%, var(--c2) 100%) !important;
}

@media screen and (max-width: 799px) {
	body.page-home #leistungen .services-blocks .block .icon {
		background-size: 44px auto, 100% 100%, cover !important;
	}

	body.page-home #leistungen .services-blocks .block .icon::after {
		width: 88px;
		height: 88px;
		margin: -44px 0 0 -44px;
	}

	body.page-home #leistungen .services-blocks .block .info {
		padding-bottom: 28px;
	}

	body.page-home #leistungen .services-blocks .block .service-more {
		margin-top: 8px;
		transform: none !important;
	}

	body.page-home #leistungen .services-blocks .block:hover .service-more {
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-home #leistungen .services-blocks .block,
	body.page-home #leistungen .services-blocks .block .icon::before,
	body.page-home #leistungen .services-blocks .block .icon::after,
	body.page-home #leistungen .services-blocks .block .service-more {
		transition: none;
	}

	body.page-home #leistungen .services-blocks .block:hover {
		transform: none !important;
	}
}

/* Kopf: Foto scheint schwach durch die Kachelfarbe (--photo-cover = Deckkraft der Farbe), Lichtschein hinter dem Glas-Kreis; grauer Textbereich mit Farbkante statt Linie */
body.page-home #leistungen .services-blocks .block.tile-glow .icon {
	background:
		var(--tile-icon) center / 52px auto no-repeat,
		radial-gradient(ellipse 50% 65% at 50% 50%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%),
		radial-gradient(ellipse 120% 140% at 50% 50%, color-mix(in srgb, var(--c1) var(--photo-cover, 84%), transparent) 0%, color-mix(in srgb, var(--c2) var(--photo-cover, 84%), transparent) 55%, color-mix(in srgb, color-mix(in srgb, var(--c2) 78%, #0f172a) var(--photo-cover, 84%), transparent) 100%),
		var(--tile-photo) var(--tile-photo-pos, center) / var(--tile-photo-size, cover) no-repeat var(--tile-photo-bg, #0f172a) !important;
}

body.page-home #leistungen .services-blocks .block.tile-glow .info {
	border-top: 3px solid var(--c1);
	background: #f3f6f9 !important;
}

body.page-home #leistungen .services-blocks .block.tile-glow .info .line {
	display: none;
}

@media screen and (max-width: 799px) {
	body.page-home #leistungen .services-blocks .block.tile-glow .icon {
		background-size: 44px auto, 100% 100%, 100% 100%, var(--tile-photo-size, cover) !important;
	}
}