/**
 * Nur /ki-webapplikationen/ (body.page-ki-webapplikationen), nur Desktop (≥993px):
 * Vertikale Guide-Stripes wie Hauptseite — durchgehend auf .kw-stripe-wrap::before (81.25 %, max 1600px).
 * Hero (.subpage-hero) liegt außerhalb des Wraps; eigene Guide-Stripes im grauen Padding-Bereich.
 */

@media (min-width: 993px) {
	body.page-ki-webapplikationen {
		--pp-stripe-line: rgba(15, 23, 42, 0.08);
		--pp-features-stripe-inset: 22px;
	}

	body.page-ki-webapplikationen .kw-stripe-wrap {
		position: relative;
	}

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

	body.page-ki-webapplikationen .kw-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 var(--pp-stripe-line);
		border-bottom: 1px solid var(--pp-stripe-line);
		background-image:
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line)),
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line));
		background-repeat: no-repeat;
		background-size: 1px 100%, 1px 100%;
		background-position: 0 0, 100% 0;
		opacity: 0.35;
	}

	/* Hero außerhalb Wrap: graue Fläche + vertikale Stripes (Header-Ende bis unteres Padding) */
	body.page-ki-webapplikationen .subpage-hero {
		position: relative;
		z-index: 1;
		background-color: #f8f9fa;
	}

	body.page-ki-webapplikationen .subpage-hero::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, var(--pp-stripe-line), var(--pp-stripe-line)),
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line));
		background-repeat: no-repeat;
		background-size: 1px 100%, 1px 100%;
		background-position: 0 0, 100% 0;
		opacity: 0.35;
	}

	body.page-ki-webapplikationen .subpage-hero > .container {
		position: relative;
		z-index: 1;
	}

	/* Hero: Container + Inner = volle Stripe-Bandbreite (erster bis letzter Vertikal) */
	body.page-ki-webapplikationen .subpage-hero .container {
		width: min(1600px, 81.25%) !important;
		max-width: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .subpage-hero-panel {
		width: 100%;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .subpage-hero-inner {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	/* Inhalts-Container = Stripe-Band (wie .page-home-stripe-wrap auf der Hauptseite) */
	body.page-ki-webapplikationen .kw-stripe-wrap .content-container,
	body.page-ki-webapplikationen .kw-stripe-wrap .container-placetel,
	body.page-ki-webapplikationen .kw-stripe-wrap > .placetel-cta-separator > .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;
	}

	/* Vollflächige Sektionen: eigene Guide-Stripes (verdecken sonst Wrap-Layer) */
	body.page-ki-webapplikationen .kw-stripe-wrap > section {
		position: relative;
	}

	body.page-ki-webapplikationen .kw-stripe-wrap > 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, var(--pp-stripe-line), var(--pp-stripe-line)),
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line));
		background-repeat: no-repeat;
		background-size: 1px 100%, 1px 100%;
		background-position: 0 0, 100% 0;
		opacity: 0.35;
	}

	/*
	 * Nur äußere Vertikalen (0 % / 100 %): ab .placetel-cta-panel-inner bis .placetel-gradient-separator.
	 * Features und Trust-Kachel: volles 5-Linien-Raster (Sektions-::before).
	 */
	body.page-ki-webapplikationen .kw-stripe-band-outer-only {
		position: relative;
		width: min(1600px, 81.25%);
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-cta-separator .placetel-cta-panel-inner.kw-stripe-band-outer-only {
		max-width: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	/* CTA-Panel: box-shadow nicht durch overflow:hidden / Padding-Maske abschneiden */
	body.page-ki-webapplikationen .placetel-cta-separator .subpage-hero-panel.placetel-cta-panel {
		overflow: visible;
		position: relative;
		z-index: 1;
	}

	body.page-ki-webapplikationen .placetel-cta-separator > .container {
		overflow: visible;
		position: relative;
		z-index: 1;
	}

	body.page-ki-webapplikationen .kw-stripe-band-outer-only > * {
		position: relative;
		z-index: 1;
	}

	body.page-ki-webapplikationen .kw-stripe-band-outer-only .container-placetel {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.page-ki-webapplikationen .kw-stripe-band-outer-only::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		pointer-events: none;
		z-index: 0;
		background-image:
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line)),
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line));
		background-repeat: no-repeat;
		background-size: 1px 100%, 1px 100%;
		background-position: 0 0, 100% 0;
		opacity: 0.35;
	}

	/* Innere Wrap-Linien (25 / 50 / 75 %) im Outer-Band ausblenden */
	body.page-ki-webapplikationen .kw-stripe-band-outer-only::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(25% - 1px);
		width: calc(50% + 2px);
		background: #ffffff;
		pointer-events: none;
		z-index: 0;
	}

	body.page-ki-webapplikationen .placetel-cta-panel-inner.kw-stripe-band-outer-only::after {
		background: transparent;
	}

	/*
	 * Social-Proof: volles Raster inkl. Sektions-Padding (oben/unten).
	 * Im Outer-Band (Logos → Separator) bleiben nur äußere Linien (::after-Maske).
	 */

	/* Keine vertikalen Guide-Stripes in diesen Sektionen */
	body.page-ki-webapplikationen .kw-stripe-wrap > .problem-solution-section::before,
	body.page-ki-webapplikationen .kw-stripe-wrap > .placetel-target-audience-section::before {
		display: none;
	}

	/*
	 * Padding-Zonen: äußere Vertikalen (0 % / 100 %) sichtbar, innere (25 / 50 / 75 %) maskieren.
	 * Sektions-::before läuft durch; ::after blendet nur die mittleren Linien im Padding aus.
	 */
	body.page-ki-webapplikationen .placetel-cta-separator::after,
	body.page-ki-webapplikationen .placetel-social-proof-section::after {
		content: "";
		position: absolute;
		left: 50%;
		width: min(1600px, 81.25%);
		transform: translateX(-50%);
		box-sizing: border-box;
		pointer-events: none;
		/* hinter Panel/Inhalt, damit box-shadow im Padding sichtbar bleibt */
		z-index: 0;
		background: linear-gradient(
			to right,
			transparent 0,
			transparent calc(25% - 1px),
			#ffffff calc(25% - 1px),
			#ffffff calc(75% + 1px),
			transparent calc(75% + 1px),
			transparent 100%
		);
	}

	body.page-ki-webapplikationen .placetel-cta-separator::after {
		bottom: 0;
		height: 60px;
	}

	body.page-ki-webapplikationen .placetel-social-proof-section::after {
		top: 0;
		height: 72px;
	}

	/*
	 * KUNDENVERTRAUEN: graue + blaue Vertikalen exakt auf erster Guide-Stripe (0 %).
	 * Nur .placetel-trust-keyfacts verschieben die Linien (Pseudo-Elemente); Badge bleibt.
	 * Keyfacts-Block bleibt horizontal bündig zum routing-badge.
	 */
	body.page-ki-webapplikationen {
		--pp-trust-card-pad-left: 40px;
		--pp-trust-line-pull: calc(-1 * var(--pp-trust-card-pad-left));
	}

	body.page-ki-webapplikationen .placetel-social-proof-section > .container-placetel:last-of-type {
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen
		.placetel-social-proof-section
		> .container-placetel:last-of-type
		> .placetel-trust-card {
		position: relative !important;
		max-width: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 40px !important;
		padding-right: 40px !important;
		box-sizing: border-box;
	}

	/* Graue Vertikale: volle Kartenhöhe auf erster Stripe (ersetzt keyfacts::before) */
	body.page-ki-webapplikationen
		.placetel-social-proof-section
		> .container-placetel:last-of-type
		> .placetel-trust-card::after {
		content: "" !important;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 2px;
		background: #e2e8f0;
		pointer-events: none;
		z-index: 0;
	}

	body.page-ki-webapplikationen
		.placetel-social-proof-section
		> .container-placetel:last-of-type
		> .placetel-trust-card
		> .placetel-trust-content {
		position: relative;
		z-index: 1;
	}

	body.page-ki-webapplikationen
		.placetel-social-proof-section
		> .container-placetel:last-of-type
		> .placetel-trust-card
		.placetel-trust-keyfacts {
		margin-top: 16px !important;
		margin-left: 0 !important;
		padding-top: 0 !important;
		padding-left: 0 !important;
		position: relative;
	}

	body.page-ki-webapplikationen
		.placetel-social-proof-section
		> .container-placetel:last-of-type
		> .placetel-trust-card
		.placetel-trust-keyfacts::before {
		content: none !important;
	}

	body.page-ki-webapplikationen
		.placetel-social-proof-section
		> .container-placetel:last-of-type
		> .placetel-trust-card
		.placetel-trust-keyfacts
		.keyfact-title::before {
		left: var(--pp-trust-line-pull) !important;
		width: 2px;
		z-index: 1;
	}

	/*
	 * Steps: Timeline + Fact-Karten (nach why-description, vor steps-next)
	 * von erstem bis letztem Vertikalen.
	 */
	body.page-ki-webapplikationen .placetel-steps-section .container-placetel > .placetel-steps-timeline,
	body.page-ki-webapplikationen .placetel-steps-section .container-placetel > .placetel-steps-facts-grid {
		max-width: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-steps-section .container-placetel,
	body.page-ki-webapplikationen .placetel-steps-section .placetel-steps-timeline {
		overflow: visible;
	}

	/*
	 * Horizontale Timeline-Linie: von erster bis letzter Vertikale
	 * (.container-placetel padding 0 30px bei ≤1530px ausgleichen).
	 */
	@media (max-width: 1530px) {
		body.page-ki-webapplikationen .placetel-steps-section .placetel-steps-track {
			left: -30px !important;
			right: -30px !important;
			width: auto !important;
		}
	}

	/* Fact-Karten: je 3px Abstand zu den Vertikalen (0 / 25 / 50 / 75 / 100 %) */
	body.page-ki-webapplikationen .placetel-steps-section .placetel-steps-facts-grid {
		gap: 0 !important;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-steps-fact-card {
		margin-left: 3px;
		margin-right: 3px;
		width: calc(100% - 6px);
		max-width: calc(100% - 6px);
		box-sizing: border-box;
	}

	/* Use-Cases: Karten-Grid von erstem bis letztem Vertikalen (volle Stripe-Bandbreite) */
	body.page-ki-webapplikationen .placetel-usecases-section .container-placetel {
		overflow: visible;
	}

	body.page-ki-webapplikationen .placetel-usecases-section .placetel-usecases-grid {
		max-width: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
		align-items: stretch !important;
	}

	/* .container-placetel padding 0 30px bei ≤1530px — Grid bündig zu äußeren Vertikalen */
	@media (max-width: 1530px) {
		body.page-ki-webapplikationen .placetel-usecases-section .placetel-usecases-grid {
			width: calc(100% + 60px) !important;
			margin-left: -30px !important;
			margin-right: -30px !important;
		}
	}

	body.page-ki-webapplikationen .placetel-usecases-section .placetel-usecase-item {
		display: flex !important;
		min-width: 0;
	}

	body.page-ki-webapplikationen .placetel-usecases-section .placetel-usecase-card {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto;
		width: 100% !important;
		height: 100% !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-usecases-section .placetel-usecase-card p {
		flex: 1 1 auto;
	}

	body.page-ki-webapplikationen .placetel-usecases-section .placetel-usecase-cta {
		margin-top: auto;
	}

	/*
	 * Wettbewerbsvorteil (≥1025px): Bild links (50–0 %), 2×2-Karten rechts (50–100 %).
	 * Bild linksbündig, Karten rechts im Stripe-Raster.
	 */
	@media (min-width: 1025px) {
		body.page-ki-webapplikationen .placetel-competitive-advantage {
			--pp-competitive-cards-row-gap: 44px;
			--pp-competitive-cards-column-gap: 20px;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-layout {
			display: grid !important;
			grid-template-columns: 25% 25% minmax(0, 50%) !important;
			grid-template-areas: none !important;
			column-gap: 0 !important;
			row-gap: 0 !important;
			align-items: start !important;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-list {
			grid-area: auto !important;
			grid-column: 3 !important;
			grid-row: 1 !important;
			display: grid !important;
			grid-template-columns: 1fr 1fr !important;
			grid-auto-rows: auto !important;
			column-gap: var(--pp-competitive-cards-column-gap) !important;
			row-gap: var(--pp-competitive-cards-row-gap) !important;
			width: 100% !important;
			max-width: none !important;
			margin: 0 !important;
			align-items: stretch !important;
			align-content: start !important;
			align-self: start !important;
			box-sizing: border-box !important;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-item {
			display: flex !important;
			min-width: 0;
			width: 100%;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-card {
			display: flex !important;
			flex-direction: column !important;
			width: 100% !important;
			max-width: none !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
			box-sizing: border-box;
		}

		/*
		 * Body erst unter .placetel-competitive-bgnum (top 18px + 7.5rem);
		 * Abstand: Karten-padding-top, Icon-Höhe und Top-margin abziehen.
		 */
		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-top {
			flex-shrink: 0;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-body {
			margin-top: calc(18px + 7.5rem + 12px - 38px - 46px - 18px) !important;
			margin-bottom: 0 !important;
			transform: none !important;
			flex: 0 0 auto;
			display: flex;
			flex-direction: column;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-card p {
			max-height: none !important;
			overflow: visible !important;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-card:hover .placetel-competitive-body,
		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-card:focus-within .placetel-competitive-body {
			transform: translateY(-6px) !important;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-card:hover,
		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-card:focus-within {
			transform: translateY(-6px);
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media {
			grid-area: auto !important;
			grid-column: 1 / 3 !important;
			grid-row: 1 !important;
			display: flex !important;
			justify-content: flex-start !important;
			align-items: flex-start !important;
			align-self: start !important;
		}

		/*
		 * Bildhöhe = Karten-Spalte (per JS); kein aspect-ratio/sticky — object-fit: cover beschneidet.
		 */
		/*
		 * AOS fade-up am Wrapper erzeugt opacity/transform → Bild wirkt weich (Subpixel/GPU).
		 * Desktop: Animation am Medien-Block aus, Größe/Alignment unverändert.
		 */
		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media,
		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media.aos-init,
		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media.aos-animate {
			opacity: 1 !important;
			transform: none !important;
			transition: none !important;
			filter: none !important;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media-frame {
			position: relative !important;
			top: auto !important;
			aspect-ratio: auto !important;
			max-width: 520px !important;
			width: 100% !important;
			overflow: hidden !important;
			box-sizing: border-box;
			isolation: isolate;
			transform: none !important;
			-webkit-font-smoothing: auto;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media::before {
			filter: none;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media-frame img {
			display: block !important;
			width: 100% !important;
			height: 100% !important;
			max-width: none !important;
			object-fit: cover !important;
			object-position: center center;
			transform: none !important;
			opacity: 1 !important;
		}
	}

	@media (min-width: 1025px) and (max-width: 1530px) {
		/* .container-placetel padding 0 30px — Layout bündig zu Sektions-Stripes */
		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-layout {
			width: calc(100% + 60px) !important;
			max-width: none !important;
			margin-left: -30px !important;
			margin-right: -30px !important;
			box-sizing: border-box;
		}
	}

	/* Gradient-Separator: volle Breite zwischen erstem und letztem Vertikalen */
	body.page-ki-webapplikationen .kw-stripe-band-outer-only .placetel-gradient-separator {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	/*
	 * FAQ: horizontale Trennlinien (summary) von erstem bis letztem Vertikalen.
	 */
	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-list {
		max-width: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-item summary {
		padding-left: 40px !important;
		padding-right: 40px !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-question {
		max-width: none !important;
		min-width: 0;
		flex: 1 1 auto;
	}

	/* Antwort-Text: links 40px, rechts bündig bis zum Aufklapp-Symbol (wie Fragezeile) */
	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-answer-inner {
		padding-left: 40px !important;
		padding-right: calc(40px + 52px + 16px) !important;
		max-width: none !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-answer-inner p {
		padding-left: 0;
		max-width: none;
	}

	/*
	 * FUNKTIONEN IM ÜBERBLICK (#features): 2-Spalten bündig zu Stripe 0 % / 50 %;
	 * Feature-Icons je 22px nach der jeweiligen Vertikalen.
	 */
	body.page-ki-webapplikationen #features .placetel-features-grid {
		max-width: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		column-gap: 0 !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen #features .placetel-feature-card {
		padding-left: var(--pp-features-stripe-inset);
		padding-right: 40px;
		box-sizing: border-box;
	}

	/* Container-Padding (≤1530px) ausgleichen, damit Linien die äußeren Vertikalen treffen */
	@media (max-width: 1530px) {
		body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-list {
			width: calc(100% + 60px) !important;
			margin-left: -30px !important;
			margin-right: -30px !important;
		}
	}
}