/**
 * Nur Hauptseite (body.page-home), nur Desktop (≥993px):
 * Vertikale Guide-Stripes — nur äußere Vertikalen (0 % / 100 %) auf .page-home-stripe-wrap::before (81.25%, max 1600px).
 * Horizontale Linien nur oben/unten am Wrap.
 *
 * Keine vertikalen Stripes sichtbar in:
 * - .intro (Border-Box; Margin-Bereich unter dem Hero bleibt vom Wrap-Layer betroffen)
 * - .intro .container (Inhaltsspalte im Hero, mit Intro-Hintergrund abgedeckt)
 * - .cta-banner-overlay (und Banner-Bereich: solide Basis unter den Layern)
 * - .cloud-promotion-section (#f8f9fa verdeckt Wrap-Stripes → eigene Sektions-::before)
 *
 * Hinweis: .contact-cta-section liegt außerhalb von .page-home-stripe-wrap (footer.php) — dort fehlen die Wrap-Stripes;
 * auf der Hauptseite: unterhalb der Fallstudien-Sektion (::after) nur 1. und 5. Vertikale bis zum Start von .contact-cta-section (Höhe = margin-bottom der Fallstudien, vgl. case-studies-section.css).
 *
 * Zusätzliche vertikale Stripes (ohne horizontale Kanten) per Sektions-::before, wo
 * Vollflächen-/Kachel-Hintergründe den gemeinsamen Wrap-Layer verdecken:
 * .services-section (inkl. „Alle Leistungen“), .it-services-section („Digitale Transformation“),
 * .social-links-section (drei Service-Karten; erste Karte: border-left, letzte: border-right je #e3e3e3; oben/unten: Rand wie zwischen den Karten), .leistungen-tabs-section (inkl. Tab-Leiste auf 4 Stripe-Spalten),
 * .case-studies-section („Fallstudien“): Container + Layout volle Breite; im Layout-Band 25–75 % weiße Maske über den Guide-Linien (nur 1. und 5. Vertikale sichtbar).
 * .services-section > .container auf der Hauptseite: min(1600px, 81.25%), damit #services-trigger bündig mit den äußeren Guide-Vertikalen ist.
 * Zusätzlich .home-cta-compare::before („Über unser IT-Systemhaus“): vertikale Guide-Linien ohne 75 %-Linie,
 * plus horizontale Kanten oben/unten; der weiße Block würde sonst die Wrap-Stripes verdecken.
 *
 * Alte Dekolinien (#e3e3e3, Eck-Gradienten, Kachel-Rahmen, Spalten-Trenner) werden auf
 * Desktop ausgeblendet — ersetzt durch die Guide-Stripes oben.
 *
 * Intro-Service-Kacheln (.services-anchors): gleiche Breite wie der Guide-Stripe-Block
 * (min(1600px, 81.25%), zentriert), damit die vier Links von der linken bis zur rechten äußeren Vertikalen reichen.
 *
 * Block „Über unser IT-Systemhaus“ (.container-features / .home-cta-compare): Außenbreite min(1600px, 81.25%),
 * zentriert; Guide in .home-cta-compare::before (4 Vertikalen, horizontale Kanten oben/unten), Inhalt z-index darüber.
 *
 * Partners („Über 20 Jahre …“): blauer .container min(1600px, 81.25%) zentriert (äußere Vertikalen);
 * vier helle Vertikalen im Container-Hintergrund (0 / 25 / 50 / 100 %; 75 %-Linie ausgeblendet).
 *
 * „UNSERE KUNDEN“ / Leistungen-Tabs: .tab-contents volle Stripe-Breite; .tab-content-desktop volle Breite;
 * Desktop-Zeile: linker .half-block in Spalte 1+2 zentriert; rechter füllt Spalte 3, .check-list zentriert;
 * Abstand rechter Kante linker Block → 50 %-Linie = Abstand vom linken Rand des rechten Blocks bis zum ersten li (Border + padding).
 */

@media (min-width: 993px) {
	body.page-home .page-home-stripe-wrap {
		position: relative;
	}

	body.page-home .page-home-stripe-wrap > * {
		position: relative;
		z-index: 1;
	}

	body.page-home .page-home-stripe-wrap::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: min(1600px, 81.25%);
		transform: translateX(-50%);
		box-sizing: border-box;
		pointer-events: none;
		z-index: 0;
		border-top: 1px solid rgba(15, 23, 42, 0.08);
		border-bottom: 1px solid rgba(15, 23, 42, 0.08);
		background-image:
			linear-gradient(to bottom, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.08)),
			linear-gradient(to bottom, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.08));
		background-repeat: no-repeat;
		background-size: 1px 100%, 1px 100%;
		background-position: 0 0, 100% 0;
		opacity: 0.35;
	}

	/* Hero: undurchsichtige Basis unter Verlauf/Bild, damit Wrap-Stripes nicht durchscheinen */
	body.page-home .page-home-stripe-wrap > .intro {
		background-color: #0094b0;
	}

	body.page-home .page-home-stripe-wrap > .intro .container {
		position: relative;
		z-index: 2;
	}

	/* Intro: vier Service-Links = volle Breite zwischen den äußeren Guide-Vertikalen (wie .page-home-stripe-wrap::before) */
	body.page-home .intro .services.services-anchors {
		width: min(1600px, 81.25%);
		max-width: none;
	}

	body.page-home .intro .services.services-anchors li a {
		width: 100%;
		min-width: 0;
	}

	/* „Über unser IT-Systemhaus“: volle Breite zwischen den äußeren Guide-Vertikalen (wie Wrap-::before) */
	body.page-home .features-section .container-features {
		width: min(1600px, 81.25%);
		max-width: none !important;
	}

	body.page-home .features-section .home-cta-compare .container {
		width: 100%;
		max-width: 100% !important;
		position: relative;
		z-index: 2;
	}

	/* Cloud-Promo: Außenbreite wie Guide-Raster (sonst sitzt linker Akzent nicht auf äußerer Vertikale) */
	body.page-home .cloud-promotion-section {
		position: relative;
	}

	body.page-home .cloud-promotion-section > .container {
		width: min(1600px, 81.25%);
		max-width: none !important;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	/*
	 * Partners („Über 20 Jahre Erfahrung“): blauer .container = volle Stripe-Breite;
	 * Vertikalen im Verlauf (wie Mobile / m365-Partners-Block), da der Block die Wrap-Guides verdeckt.
	 */
	body.page-home .partners-section {
		position: relative;
	}

	body.page-home .partners-section > .container {
		width: min(1600px, 81.25%) !important;
		max-width: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		background-image:
			linear-gradient(to bottom, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)),
			linear-gradient(to bottom, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)),
			linear-gradient(90deg, #6ed2ec, #0088a2);
		background-repeat: no-repeat;
		background-size: 1px 100%, 1px 100%, 100% 100%;
		background-position: 0 0, 100% 0, 0 0;
	}

	body.page-home .partners-section > .container > .row.clearfix {
		position: relative;
		z-index: 1;
	}

	/*
	 * Partner-Logos: linksbündig + Container (= .logo) nur so breit wie das Logo.
	 * .logo-wrap bleibt 50 % (inline-block) — Platzierung auf Desktop unverändert.
	 */
	body.page-home .partners-section .half-block:first-child .logo-wrap {
		text-align: left !important;
	}

	body.page-home .partners-section .half-block:first-child .logo-wrap .logo,
	body.page-home .partners-section .half-block:first-child .logo-wrap .logo.aos-init,
	body.page-home .partners-section .half-block:first-child .logo-wrap .logo.aos-animate {
		display: block !important;
		width: fit-content !important;
		max-width: 100% !important;
		margin: 0 !important;
		text-align: left !important;
		line-height: 0;
	}

	body.page-home .partners-section .half-block:first-child .logo-wrap .logo img,
	body.page-home .partners-section .half-block:first-child .logo-wrap img {
		display: block !important;
		margin: 0 !important;
		width: auto !important;
		max-width: 150px !important;
		height: auto !important;
		max-height: 50px !important;
		object-fit: contain !important;
		object-position: left center !important;
	}

	body.page-home .cloud-promotion-section .cloud-promotion-content {
		max-width: none;
		width: 100%;
		box-sizing: border-box;
	}

	/* Guide-Vertikalen im Block „Über unser IT-Systemhaus“ (über #fff, unter Inhalt) */
	body.page-home .home-cta-compare {
		position: relative;
		isolation: isolate;
	}

	body.page-home .home-cta-compare::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		pointer-events: none;
		z-index: 1;
		border-top: 1px solid rgba(15, 23, 42, 0.08);
		border-bottom: 1px solid rgba(15, 23, 42, 0.08);
		/* Vertikale: nur äußere (0 % / 100 %) */
		background-image:
			linear-gradient(to bottom, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.08)),
			linear-gradient(to bottom, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.08));
		background-repeat: no-repeat;
		background-size: 1px 100%, 1px 100%;
		background-position: 0 0, 100% 0;
		opacity: 0.35;
	}

	/*
	 * Blauer Akzentstrich an der äußersten linken Guide-Vertikalen (vgl. .mission-test-subtitle::before
	 * auf modern-cloud/azure-cloud-consulting/), Farbe #0088a2.
	 */
	body.page-home .cloud-promotion-section .cloud-promotion-text > h2.subtitle {
		position: relative;
		z-index: 2;
	}

	body.page-home .cloud-promotion-section .cloud-promotion-text > h2.subtitle::before {
		content: "";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 2px;
		height: 30px;
		border-radius: 999px;
		background: #0088a2;
		pointer-events: none;
		z-index: 3;
	}

	body.page-home .cloud-promotion-section .cloud-promotion-text > h2.subtitle::before {
		/* Gleiche Bezugsbreite wie .about-v2-Subtitle (::before sitzt über linkem Rand inkl. 40px Text-Padding) */
		left: -40px;
	}

	/* CTA-Banner: solide Fläche unter Bild & Overlay (Overlay bleibt sichtbar darüber) */
	body.page-home .cta-banner-section {
		background-color: #0088a2;
	}

	/* Legacy-Linien: corner-gradient-borders + border-wrapper + Spalten-Divider (services-section-update) */
	body.page-home .corner-gradient-horizontal,
	body.page-home .corner-gradient-vertical {
		display: none !important;
	}

	body.page-home .border-wrapper {
		border: none !important;
	}

	body.page-home .intro .services.services-anchors .corner-gradient-container {
		border: none !important;
	}

	body.page-home .services-section .services-blocks .services-row-first.with-dividers .box-divider-vertical,
	body.page-home .services-section .services-blocks .services-row-second.with-dividers .box-divider-vertical {
		border-left: none !important;
		border-right: none !important;
		background-color: transparent !important;
	}

	body.page-home .services-section .services-blocks .services-row-first.with-dividers .box-divider-vertical::before,
	body.page-home .services-section .services-blocks .services-row-first.with-dividers .box-divider-vertical::after,
	body.page-home .services-section .services-blocks .services-row-second.with-dividers .box-divider-vertical::before,
	body.page-home .services-section .services-blocks .services-row-second.with-dividers .box-divider-vertical::after {
		display: none !important;
		content: none !important;
	}

	body.page-home .services-section,
	body.page-home .it-services-section,
	body.page-home .social-links-section,
	body.page-home .leistungen-tabs-section {
		position: relative;
	}

	body.page-home .case-studies-section {
		position: relative;
		overflow: visible;
	}

	body.page-home .services-section > .container {
		width: min(1600px, 81.25%);
		max-width: none !important;
		position: relative;
		z-index: 1;
	}

	/*
	 * „Alle Leistungen“: .button ohne background → 50-%-Guide-Stripe scheint im Button durch;
	 * undurchsichtige Fläche über der Linie (Hover wie global .button:hover).
	 */
	body.page-home .services-section .services-blocks > .leistungskategoriebutton.button {
		position: relative;
		z-index: 2;
		background-color: #fff;
	}

	body.page-home .services-section .services-blocks > .leistungskategoriebutton.button:hover {
		background-color: #0088a2;
	}

	body.page-home .it-services-section > .container {
		position: relative;
		z-index: 1;
	}

	body.page-home .case-studies-section > .container {
		width: min(1600px, 81.25%);
		max-width: none !important;
		position: relative;
		z-index: 1;
	}

	body.page-home .case-studies-section .head.centered {
		max-width: none;
		width: 100%;
		box-sizing: border-box;
	}

	body.page-home .case-studies-section .case-studies-layout {
		max-width: none !important;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
		position: relative;
		/* Keyfacts = Spalte 1 (0–25 %), Slider = Spalte 2 (25–100 %) → bündig mit 2. bis letztem Vertikal-Stripe */
		grid-template-columns: 25% 75%;
		gap: 0;
	}

	/*
	 * Slider-Inhalt: von der 2. Vertikalen (Spaltenanfang) bis zur äußersten rechten (100 % Layout).
	 * Karte füllt die 75 %-Spalte; .case-study-content nutzt diese Breite voll aus.
	 */
	body.page-home .case-studies-section .case-study-card .case-study-content {
		left: 0;
		right: 0;
		width: auto;
		box-sizing: border-box;
	}

	body.page-home .case-studies-section .case-study-card .case-study-text {
		left: clamp(20px, 3vw, 40px);
		right: clamp(20px, 3vw, 40px);
	}

	/* Fallstudien: keine Mittel-Maske mehr (innere Vertikalen entfallen auf Desktop) */
	body.page-home .case-studies-section .case-studies-layout::before {
		display: none;
	}

	body.page-home .case-studies-section .case-studies-layout > * {
		position: relative;
		z-index: 1;
	}

	body.page-home .leistungen-tabs-section > .container {
		width: min(1600px, 81.25%);
		max-width: none !important;
		position: relative;
		z-index: 1;
	}

	/* „Unsere Kunden“: Tab-Leiste volle Stripe-Breite, je Tab zwischen zwei Vertikalen (0/25/50/75/100 %) */
	body.page-home .leistungen-tabs-section ul.services.services-tabs {
		width: 100%;
		max-width: none !important;
		margin-left: 0;
		margin-right: 0;
		padding: 20px 0;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		box-sizing: border-box;
	}

	body.page-home .leistungen-tabs-section ul.services.services-tabs li {
		flex: unset;
		min-width: 0;
	}

	body.page-home .leistungen-tabs-section ul.services.services-tabs li a {
		width: 100%;
		box-sizing: border-box;
	}

	/* Tab-Desktop-Inhalt: zentriert zwischen den äußeren Guide-Vertikalen (Container = Stripe-Breite) */
	body.page-home .leistungen-tabs-section .tab-contents {
		max-width: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
	}

	/* Volle Stripe-Breite, damit 25 %-Raster der Guide-Linien mit der Tab-Zeile übereinstimmt */
	body.page-home .leistungen-tabs-section .tab-content-desktop {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}

	/*
	 * --tab-home-half2-outer-to-li: vom linken Außenrand des rechten .half-block (inkl. border-left) bis zum ersten <li>
	 * (= border 1px + padding). Linker Block in Spalte 1+2 zentriert, Breite so, dass links/rechts im Doppelband
	 * je derselbe Abstand entsteht → rechter Außenabstand zur 50 %-Linie = --tab-home-half2-outer-to-li.
	 */
	body.page-home .leistungen-tabs-section .tab-content-desktop .row.clearfix {
		--tab-home-half2-pad-x: clamp(10px, 2vw, 24px);
		--tab-home-half2-pad-left: 100px;
		--tab-home-half2-border-w: 1px;
		--tab-home-half2-outer-to-li: calc(var(--tab-home-half2-border-w) + var(--tab-home-half2-pad-left));
		--tab-home-half1-content-w: min(40rem, calc(100% - 2 * var(--tab-home-half2-outer-to-li)));
		--tab-home-half1-pad-x: clamp(8px, 1.5vw, 20px);
		/* Vertikaler Abstand h3 → p; rechter Block startet in der Mitte (gap / 2) */
		--tab-home-h3-gap: 20px;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: auto calc(var(--tab-home-h3-gap) / 2) auto;
		gap: 0;
		align-items: start;
	}

	/* h3 + p direkt im Zeilen-Grid; rechter Block ab Mitte des h3–p-Abstands */
	body.page-home .leistungen-tabs-section .tab-content-desktop .row.clearfix > .half-block:first-child {
		display: contents;
	}

	body.page-home .leistungen-tabs-section .tab-content-desktop .row.clearfix > .half-block:first-child h3,
	body.page-home .leistungen-tabs-section .tab-content-desktop .row.clearfix > .half-block:first-child p {
		grid-column: 1 / 3;
		justify-self: center;
		width: var(--tab-home-half1-content-w);
		max-width: 100%;
		min-width: 0;
		padding-left: var(--tab-home-half1-pad-x);
		padding-right: var(--tab-home-half1-pad-x);
		box-sizing: border-box;
		text-align: left;
	}

	body.page-home .leistungen-tabs-section .tab-content-desktop .row.clearfix > .half-block:first-child h3 {
		grid-row: 1;
		font-size: 28px;
		line-height: 1.3;
		margin-bottom: 0;
	}

	body.page-home .leistungen-tabs-section .tab-content-desktop .row.clearfix > .half-block:first-child p {
		grid-row: 3;
		margin-top: calc(var(--tab-home-h3-gap) / 2);
		font-size: 16px;
		line-height: 1.8;
	}

	body.page-home .leistungen-tabs-section .tab-content-desktop .row.clearfix > .half-block:last-child {
		grid-column: 3 / 4;
		grid-row: 2;
		justify-self: stretch;
		align-self: start;
		margin-top: -15px;
		flex: unset;
		min-width: 0;
		width: 100%;
		max-width: 100%;
		padding-left: var(--tab-home-half2-pad-left);
		padding-right: var(--tab-home-half2-pad-x);
		border-left: var(--tab-home-half2-border-w) solid #e8e8e8;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	body.page-home .leistungen-tabs-section .tab-content-desktop .row.clearfix > .half-block:last-child .check-list {
		width: fit-content;
		max-width: 100%;
		margin: 0;
		padding-top: 0;
		text-align: left;
	}

	body.page-home .leistungen-tabs-section .tab-content-desktop .row.clearfix > .half-block:last-child .check-list li {
		white-space: nowrap;
		font-size: 17px;
	}

	body.page-home .social-links-section .container-large {
		width: min(1600px, 81.25%);
		max-width: none !important;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	/* Erste Karte: linker Rand; letzte Karte: gleicher rechter Rand (#e3e3e3) */
	body.page-home .social-links-section .social-media-grid > .social-media-link.service-card:first-child {
		border-left: 1px solid #e3e3e3;
	}

	body.page-home .social-links-section .social-media-grid > .social-media-link.service-card:last-child {
		border-right: 1px solid #e3e3e3;
	}

	/* Oben/unten: gleicher Rand wie zwischen erster und zweiter Karte (rechte Trennlinie = 1px solid #e3e3e3) */
	body.page-home .social-links-section .social-media-grid > .social-media-link.service-card {
		border-top: 1px solid #e3e3e3;
		border-bottom: 1px solid #e3e3e3;
	}

	body.page-home .services-section::before,
	body.page-home .it-services-section::before,
	body.page-home .cloud-promotion-section::before,
	body.page-home .social-links-section::before,
	body.page-home .leistungen-tabs-section::before,
	body.page-home .case-studies-section::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: min(1600px, 81.25%);
		transform: translateX(-50%);
		box-sizing: border-box;
		pointer-events: none;
		z-index: 0;
		background-image:
			linear-gradient(to bottom, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.08)),
			linear-gradient(to bottom, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.08));
		background-repeat: no-repeat;
		background-size: 1px 100%, 1px 100%;
		background-position: 0 0, 100% 0;
		opacity: 0.35;
	}

	/* Weißraum unterhalb Fallstudien (außerhalb .page-home-stripe-wrap): nur äußere Guide-Vertikalen wie im Wrap */
	body.page-home .case-studies-section::after {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: min(1600px, 81.25%);
		box-sizing: border-box;
		top: 100%;
		height: 100px;
		pointer-events: none;
		z-index: 0;
		background-image:
			linear-gradient(to bottom, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.08)),
			linear-gradient(to bottom, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.08));
		background-repeat: no-repeat;
		background-size: 1px 100%, 1px 100%;
		background-position: 0 0, 100% 0;
		opacity: 0.35;
	}
}

/* Hauptseite: obere und untere horizontale Guide-Linie je Logo-Kachel (Farbe wie vertikale Trenner in .case-study-logo-item) */
body.page-home .case-studies-section .case-study-logo-item {
	box-sizing: border-box;
	border-top: 1px solid rgba(15, 23, 42, 0.1);
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

/* Hauptseite: Divider unter Fallstudien-Headline (wie "Ergebnisse aus der Praxis") über volle Stripe-Breite */
body.page-home .case-studies-section .head.centered .m365schutz-newsroom__divider.m365schutz-newsroom__divider--static {
	--m365schutz-divider-grad: linear-gradient(90deg, #635bff 0%, #ff2e7e 48%, #00d4ff 100%);
	margin: 28px 0 0;
	height: 2px;
	position: relative;
	background: rgba(15, 23, 42, 0.10);
	border-radius: 999px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	pointer-events: none;
}

body.page-home .case-studies-section .head.centered .m365schutz-newsroom__divider.m365schutz-newsroom__divider--static::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 25%;
	background: var(--m365schutz-divider-grad);
	border-radius: 999px;
	opacity: 0.9;
}