/**
 * Nur /Power Platform/ (body.page-ki-webapplikationen), nur Mobile (max-width: 992px):
 * Gleiches Guide-Stripe-Raster wie Hauptseite — äußere Vertikalen mit 15px Rand.
 *
 * Desktop: page-pp-stripe-guides-desktop.css (≥993px)
 */

@media (max-width: 992px) {
	body.page-ki-webapplikationen {
		--pp-stripe-gutter: 15px;
		--pp-stripe-w: calc(100% - 2 * var(--pp-stripe-gutter));
		--pp-stripe-line: rgba(15, 23, 42, 0.028);
	}

	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: var(--pp-stripe-gutter);
		width: var(--pp-stripe-w);
		transform: none;
		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)),
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line)),
			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%, 1px 100%, 1px 100%, 1px 100%;
		background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
	}

	body.page-ki-webapplikationen .subpage-hero {
		position: relative;
		z-index: 1;
		background-color: #f8f9fa;
		padding-left: var(--pp-stripe-gutter) !important;
		padding-right: var(--pp-stripe-gutter) !important;
		box-sizing: border-box;
	}

	/* Hero (oberer Bereich): vertikale Stripes wie Desktop, Mobile-Raster */
	body.page-ki-webapplikationen .subpage-hero::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--pp-stripe-gutter);
		width: var(--pp-stripe-w);
		transform: none;
		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)),
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line)),
			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%, 1px 100%, 1px 100%, 1px 100%;
		background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
	}

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

	body.page-ki-webapplikationen .subpage-hero .container {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !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;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box;
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-areas:
			"headline"
			"text"
			"scroll";
		gap: 20px;
	}

	/* Inhalte: volle Breite zwischen linkem und rechtem Padding */
	body.page-ki-webapplikationen .subpage-hero-inner > .subpage-hero-header,
	body.page-ki-webapplikationen .subpage-hero-inner > .subpage-hero-copy,
	body.page-ki-webapplikationen .subpage-hero-inner > .scroll-indicator {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .subpage-hero-inner > .subpage-hero-header {
		display: block !important;
		min-width: 0 !important;
	}
	body.page-ki-webapplikationen .subpage-hero .subpage-hero-kicker-wrapper {
		display: flex !important;
	}

	/* Kicker → H1: etwas mehr Abstand (~15px) */
	body.page-ki-webapplikationen .subpage-hero-header .subpage-hero-kicker-wrapper,
	body.page-ki-webapplikationen .subpage-hero-header > .subpage-hero-kicker {
		margin-bottom: 15px !important;
	}

	body.page-ki-webapplikationen .subpage-hero-inner .subpage-hero-header h1 {
		font-size: 30px !important;
	}

	body.page-ki-webapplikationen .subpage-hero .subpage-hero-teaser {
		display: block !important;
		max-width: none !important;
		line-height: 1.65 !important;
	}

	body.page-ki-webapplikationen .subpage-hero-header .subpage-hero-meta-badges {
		display: flex !important;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin-top: 18px !important;
		box-sizing: border-box;
		align-items: stretch !important;
	}

	body.page-ki-webapplikationen .subpage-hero .subpage-hero-meta-badges {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/*
	 * Hero Mobile: Dashboard-Demo ausblenden;
	 * Meta-Badges bleiben sichtbar (Overrides aus placetel-voip-ki-critical.css).
	 */
	body.page-ki-webapplikationen .subpage-hero .subpage-hero-copy {
		line-height: normal !important;
		display: flex !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		align-self: start !important;
		width: 100%;
		max-width: 100%;
		overflow: visible;
		padding-top: 0 !important;
	}

	body.page-ki-webapplikationen .subpage-hero .kw-dashboard-demo {
		display: none !important;
	}

	body.page-ki-webapplikationen .subpage-hero .subpage-hero-meta-badges .subpage-hero-meta-row:nth-child(n+2) {
		display: flex !important;
	}

	body.page-ki-webapplikationen .subpage-hero .subpage-hero-meta-badges .subpage-hero-meta-row:first-child .subpage-hero-meta-badge:nth-child(n+3) {
		display: inline-flex !important;
	}

	body.page-ki-webapplikationen .subpage-hero .subpage-hero-meta-row {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		align-items: flex-start !important;
		gap: 12px 16px !important;
	}

	/*
	 * Meta-Badges: bei Platzmangel umbrechen (nicht über rechtem Hero-Padding hinaus).
	 */
	body.page-ki-webapplikationen .subpage-hero .subpage-hero-meta-badges .subpage-hero-meta-badge.routing-badge {
		white-space: normal !important;
		max-width: 100% !important;
		flex: 0 1 auto !important;
		box-sizing: border-box !important;
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/*
	 * Mobile: blauer Marker vor Überschriften-/Kicker-Elementen,
	 * exakt auf der ersten vertikalen Stripe-Linie.
	 */
	body.page-ki-webapplikationen .routing-intro-main-title,
	body.page-ki-webapplikationen .placetel-features-header > .routing-badge,
	body.page-ki-webapplikationen .placetel-logos-badge-wrapper > .routing-badge,
	body.page-ki-webapplikationen .placetel-trust-text > .routing-badge,
	body.page-ki-webapplikationen .placetel-benefits-header > .routing-badge,
	body.page-ki-webapplikationen .placetel-target-header > .routing-badge,
	body.page-ki-webapplikationen .placetel-usecases-header > .routing-badge,
	body.page-ki-webapplikationen .placetel-steps-header > .routing-badge,
	body.page-ki-webapplikationen .placetel-faq-boost-header > .routing-badge {
		position: relative;
	}

	body.page-ki-webapplikationen .routing-intro-main-title::after,
	body.page-ki-webapplikationen .placetel-features-header > .routing-badge::after,
	body.page-ki-webapplikationen .placetel-logos-badge-wrapper > .routing-badge::after,
	body.page-ki-webapplikationen .placetel-trust-text > .routing-badge::after,
	body.page-ki-webapplikationen .placetel-benefits-header > .routing-badge::after,
	body.page-ki-webapplikationen .placetel-target-header > .routing-badge::after,
	body.page-ki-webapplikationen .placetel-usecases-header > .routing-badge::after,
	body.page-ki-webapplikationen .placetel-steps-header > .routing-badge::after,
	body.page-ki-webapplikationen .placetel-faq-boost-header > .routing-badge::after {
		content: "";
		position: absolute;
		left: -16px;
		top: 0;
		height: 100%;
		width: 2px;
		background: linear-gradient(135deg, #0088a2 0%, #6ed2ec 100%);
		pointer-events: none;
		z-index: 1;
	}

	body.page-ki-webapplikationen .kw-stripe-wrap .content-container,
	body.page-ki-webapplikationen .kw-stripe-wrap .container-placetel {
		width: var(--pp-stripe-w) !important;
		max-width: none !important;
		margin-left: var(--pp-stripe-gutter) !important;
		margin-right: var(--pp-stripe-gutter) !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	/*
	 * CTA-Panel (subpage-hero-panel.placetel-cta-panel): volle Breite erster–letzter Vertikal.
	 * Kein Container-Padding – das Panel selbst reicht bis zu den äußeren Stripes.
	 */
	body.page-ki-webapplikationen .kw-stripe-wrap > .placetel-cta-separator {
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .kw-stripe-wrap > .placetel-cta-separator > .container {
		width: var(--pp-stripe-w) !important;
		max-width: none !important;
		margin-left: var(--pp-stripe-gutter) !important;
		margin-right: var(--pp-stripe-gutter) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

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

	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: var(--pp-stripe-gutter);
		width: var(--pp-stripe-w);
		transform: none;
		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)),
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line)),
			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%, 1px 100%, 1px 100%, 1px 100%;
		background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
	}

	body.page-ki-webapplikationen .kw-stripe-band-outer-only {
		position: relative;
		width: var(--pp-stripe-w);
		margin-left: var(--pp-stripe-gutter);
		margin-right: var(--pp-stripe-gutter);
		box-sizing: border-box;
	}

	/*
	 * CTA-Panel-Inner: kein zweites Gutter (Container ist bereits am Stripe-Raster).
	 * Sonst verschieben sich die ::before-Vertikalen (0 % / 100 %) um je 15px.
	 */
	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;
	}

	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;
	}

	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;
	}

	/* CTA-Panel-Inner: auf Mobile alle vertikalen Stripes anzeigen */
	body.page-ki-webapplikationen .placetel-cta-panel-inner.kw-stripe-band-outer-only::before {
		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)),
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line)),
			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%, 1px 100%, 1px 100%, 1px 100%;
		background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
	}

	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;
	}

	/* Zielgruppe: nur erster und letzter Vertikal-Stripe */
	body.page-ki-webapplikationen .kw-stripe-wrap > .placetel-target-audience-section::before {
		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;
	}

	/* Zielgruppe-Carousel: erste Karte bündig mit erstem Vertikal-Stripe (15px) */
	body.page-ki-webapplikationen .kw-stripe-wrap > .placetel-target-audience-section .placetel-target-carousel-container {
		padding-left: var(--pp-stripe-gutter) !important;
		padding-right: var(--pp-stripe-gutter) !important;
		scroll-padding-left: var(--pp-stripe-gutter);
		scroll-padding-right: var(--pp-stripe-gutter);
	}

	/*
	 * Warum PrivateGPT: Problem-Karten + Lösungs-Detail erster–letzter Vertikal
	 * (content-container-Padding 16px ausgleichen).
	 */
	body.page-ki-webapplikationen .problem-solution-section .problem-card.it-service-card,
	body.page-ki-webapplikationen .problem-solution-section .solution-detail {
		width: calc(100% + 32px) !important;
		max-width: none !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		box-sizing: border-box;
	}

	/* Steps: Timeline bis zu den äußeren Vertikalen (Container-Padding 16px ausgleichen) */
	body.page-ki-webapplikationen .placetel-steps-section .container-placetel > .placetel-steps-timeline {
		max-width: none !important;
		width: calc(100% + 32px) !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		box-sizing: border-box;
		position: relative;
	}

	/*
	 * Vertikale Timeline (wie Desktop, aber hoch):
	 * Linie auf Höhe der Kreis-Mitte, hinter den Fact-Karten.
	 * Fortschritt weiter über --progress (gesetzt von goToStep).
	 */
	body.page-ki-webapplikationen .placetel-steps-section .placetel-steps-track {
		display: block !important;
		position: absolute;
		top: var(--pp-steps-track-top, 46px);
		bottom: auto;
		left: 46px;
		right: auto;
		width: 2px;
		height: var(--pp-steps-track-height, auto);
		transform: translateX(-50%);
		background: rgba(148, 163, 184, 0.35);
		z-index: 0;
		pointer-events: none;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-steps-track::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 2px;
		height: var(--progress, 0%);
		background: linear-gradient(180deg, #00a0c8 0%, rgb(103, 136, 255) 100%);
	}

	/* Jeder Step-Node: volle Breite erster–letzter Vertikal */
	body.page-ki-webapplikationen .placetel-steps-section .placetel-steps-nodes {
		position: relative;
		z-index: 1;
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-node {
		width: 100% !important;
		max-width: none !important;
		padding-left: 0 !important;
		box-sizing: border-box;
		display: grid !important;
		grid-template-columns: 92px minmax(0, 1fr) !important;
		grid-template-areas:
			"circle meta"
			"fact fact" !important;
		column-gap: 16px !important;
		row-gap: 0 !important;
		align-items: center !important;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-node > .placetel-step-circle {
		grid-area: circle !important;
		margin: 0 !important;
		position: relative;
		z-index: 2;
		align-self: center !important;
	}

	/* Kreis-Abhaken wie Desktop: is-done / is-active / is-upcoming */
	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-circle svg {
		display: none;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-node.is-done .placetel-step-circle {
		background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 55%, #6788ff 100%);
		border: 0;
		color: #ffffff;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-node.is-done .placetel-step-circle svg {
		display: block;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-node.is-done .placetel-step-circle-number {
		display: none;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-node.is-active .placetel-step-circle {
		background: #f8f9fa;
		border: 2px solid rgba(59, 130, 246, 0.9);
		color: rgba(59, 130, 246, 0.95);
		box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-node.is-upcoming .placetel-step-circle {
		background: #ffffff;
		border: 1px solid rgba(203, 213, 225, 0.7);
		color: rgba(148, 163, 184, 0.75);
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-node > .placetel-step-meta {
		grid-area: meta !important;
		align-self: center !important;
		margin: 0 !important;
		max-width: none !important;
		min-height: 0 !important;
		padding: 0 var(--pp-stripe-gutter) 0 0 !important;
		justify-content: center !important;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-meta .placetel-step-label {
		justify-content: flex-start !important;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-meta p {
		min-height: 0 !important;
	}

	/* Fact-Karten direkt unter dem jeweiligen Step (originales Grid ausgeblendet) */
	body.page-ki-webapplikationen .placetel-steps-section .container-placetel > .placetel-steps-facts-grid {
		display: none !important;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-step-node > .placetel-steps-fact-card {
		grid-area: fact !important;
		align-self: start !important;
		width: calc(100% - 6px) !important;
		max-width: calc(100% - 6px) !important;
		margin: 18px 3px 22px !important;
		box-sizing: border-box !important;
		position: relative;
		z-index: 1;
	}

	/* Ausgrauen wie Desktop, bis is-revealed */
	body.page-ki-webapplikationen .placetel-steps-section .placetel-steps-fact-body {
		opacity: 0.45 !important;
		filter: blur(2.2px) !important;
		transition: opacity 220ms ease, filter 220ms ease !important;
	}

	body.page-ki-webapplikationen .placetel-steps-section .placetel-steps-fact-card.is-revealed .placetel-steps-fact-body {
		opacity: 1 !important;
		filter: blur(0) !important;
	}

	/* Use-Cases: Grid bis zu den äußeren Vertikalen (Container-Padding ausgleichen) */
	body.page-ki-webapplikationen .placetel-usecases-section .placetel-usecases-grid {
		max-width: none !important;
		width: calc(100% + 32px) !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		box-sizing: border-box;
	}

	/*
	 * Mobile: Vertikalen auch im unteren Padding von .placetel-cta-separator
	 * und im oberen Padding von .placetel-social-proof-section (keine Ausblendung).
	 * Desktop behält die Übergangs-Masken in page-pp-stripe-guides-desktop.css.
	 */

	/*
	 * Trust-Kachel: Karte volle Viewport-Breite; Inhalt + Stripes im Stripe-Band
	 * (erster bis letzter Vertikal). Nur direktes .container-placetel.
	 */
	body.page-ki-webapplikationen .placetel-social-proof-section > .container-placetel {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

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

	/* 5-Linien-Raster im Stripe-Band (bündig mit Seitenraster) */
	body.page-ki-webapplikationen .placetel-social-proof-section > .container-placetel > .placetel-trust-card::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--pp-stripe-gutter);
		width: var(--pp-stripe-w);
		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)),
			linear-gradient(to bottom, var(--pp-stripe-line), var(--pp-stripe-line)),
			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%, 1px 100%, 1px 100%, 1px 100%;
		background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
	}

	/* Horizontale Stripe am Ende des unteren Karten-Paddings (erster–letzter Vertikal) */
	body.page-ki-webapplikationen .placetel-social-proof-section > .container-placetel > .placetel-trust-card::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: var(--pp-stripe-gutter);
		width: var(--pp-stripe-w);
		height: 1px;
		background: var(--pp-stripe-line);
		pointer-events: none;
		z-index: 2;
	}

	/* Inhalt: Breite erster–letzter Vertikal (kein zusätzliches Seiten-Padding) */
	body.page-ki-webapplikationen .placetel-social-proof-section > .container-placetel > .placetel-trust-card > .placetel-trust-content {
		position: relative;
		z-index: 1;
		width: var(--pp-stripe-w) !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box;
	}

	/* KUNDENVERTRAUEN-Badge: 15px Abstand ab erster Vertikaler */
	body.page-ki-webapplikationen .placetel-social-proof-section > .container-placetel > .placetel-trust-card .placetel-trust-text > .routing-badge {
		margin-left: var(--pp-stripe-gutter) !important;
	}

	/*
	 * Kundenvertrauen: jedes keyfact-security-item in einer Stripe-Spalte
	 * (zwischen zwei vertikalen Linien des 5-Stripe-Rasters).
	 */
	body.page-ki-webapplikationen .placetel-social-proof-section .placetel-trust-keyfacts .keyfact-item:has(.keyfact-security-items) {
		padding-left: 0;
	}

	body.page-ki-webapplikationen .placetel-social-proof-section .placetel-trust-keyfacts .keyfact-security-items {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: stretch;
		width: calc(100% + 18px);
		max-width: none;
		margin-left: -18px;
		margin-right: 0;
		gap: 0;
		flex-wrap: nowrap;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-social-proof-section .placetel-trust-keyfacts .keyfact-security-item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 0 5px;
		font-size: clamp(10px, 2.6vw, 13px);
		line-height: 1.35;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-social-proof-section .placetel-trust-keyfacts .keyfact-security-item:first-child {
		padding-left: 5px;
	}

	body.page-ki-webapplikationen .placetel-social-proof-section .placetel-trust-keyfacts .keyfact-security-item:not(:last-child)::after {
		display: none;
	}

	/*
	 * Logos „Diese Unternehmen vertrauen Metricsiro“:
	 * Kreuz-Trennlinien erster–letzter Vertikal, klare Enden.
	 */
	body.page-ki-webapplikationen .placetel-social-proof-section .placetel-logos-row {
		width: calc(100% + 32px) !important;
		max-width: none !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		box-sizing: border-box;
		position: relative;
		overflow: visible;
	}

	body.page-ki-webapplikationen .placetel-social-proof-section .placetel-logo-item-static {
		border: none !important;
	}

	body.page-ki-webapplikationen .placetel-social-proof-section .placetel-logos-row::before {
		content: "" !important;
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		width: 100%;
		height: 1px;
		transform: translateY(-50%);
		background: rgba(15, 23, 42, 0.1);
		z-index: 1;
		pointer-events: none;
	}

	body.page-ki-webapplikationen .placetel-social-proof-section .placetel-logos-row::after {
		content: "" !important;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 1px;
		height: auto;
		transform: translateX(-50%);
		background: rgba(15, 23, 42, 0.1);
		z-index: 1;
		pointer-events: none;
	}

	/*
	 * Wettbewerbsvorteil: Bild + Karten von erster bis letzter Stripe-Vertikale
	 * (Container-Padding 16px ausgleichen).
	 */
	body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media {
		width: calc(100% + 32px) !important;
		max-width: none !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media-frame {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media-frame img {
		width: 100% !important;
		max-width: none !important;
	}

	/*
	 * Wettbewerbsvorteil Mobile (≤992px): wie Placetel VoIP-KI / Stripe-Raster —
	 * einspaltig, Bild 16:10 über volle Stripe-Breite.
	 */
	@media (max-width: 992px) {
		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-layout {
			grid-template-columns: 1fr !important;
			gap: 34px !important;
		}

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-media-frame {
			position: relative !important;
			top: auto !important;
			aspect-ratio: 16 / 10 !important;
			max-width: 100% !important;
			width: 100% !important;
			height: auto !important;
		}

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

		body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-list {
			grid-template-columns: 1fr !important;
			align-self: stretch !important;
		}
	}

	body.page-ki-webapplikationen .placetel-competitive-advantage .placetel-competitive-card {
		width: calc(100% + 32px) !important;
		max-width: none !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		box-sizing: border-box;
	}

	/*
	 * FAQ „Alles, was Sie wissen müssen“:
	 * Alle Inhalte innerhalb des container-placetel (linkes–rechtes Padding).
	 */
	body.page-ki-webapplikationen .placetel-faq-boost-section .container-placetel > .placetel-faq-boost-header {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-list {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
		border-top: none !important;
		position: relative;
	}

	/* Nur Trennlinien: erste–letzte Stripe-Vertikale (Summary unverändert) */
	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-list::before {
		content: "";
		position: absolute;
		top: 0;
		left: -16px;
		width: calc(100% + 32px);
		height: 1px;
		background: rgba(15, 23, 42, 0.1);
		pointer-events: none;
	}

	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-item {
		border-bottom: none !important;
	}

	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-item::after {
		content: "";
		position: absolute;
		left: -16px;
		bottom: 0;
		width: calc(100% + 32px);
		height: 1px;
		background: rgba(15, 23, 42, 0.1);
		pointer-events: none;
	}

	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-item summary {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.page-ki-webapplikationen .placetel-faq-boost-section .placetel-faq-boost-answer-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/*
	 * Funktionen im Überblick (#features): wie Lösung auf /power-platform/success-story/
	 * — Icon + Überschrift Zeile 1, +/- rechts vor Container-Padding, p ab Icon-Vertikale.
	 */
	body.page-ki-webapplikationen #features .placetel-features-grid {
		max-width: 100% !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.page-ki-webapplikationen #features .placetel-feature-card {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
	}

	body.page-ki-webapplikationen #features .placetel-feature-icon {
		grid-column: 1;
		grid-row: 1;
		align-self: flex-start;
		z-index: 1;
	}

	body.page-ki-webapplikationen #features .placetel-feature-content {
		display: contents;
	}

	body.page-ki-webapplikationen #features .placetel-feature-header {
		grid-column: 1 / -1;
		grid-row: 1;
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr) 28px;
		column-gap: 16px;
		align-items: center;
		min-height: 48px;
		min-width: 0;
		cursor: pointer;
		user-select: none;
	}

	body.page-ki-webapplikationen #features .placetel-feature-header h3 {
		grid-column: 2;
		margin: 0;
		min-width: 0;
		font-size: 1.1rem;
		line-height: 1.4;
	}

	body.page-ki-webapplikationen #features .placetel-feature-toggle {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		flex-shrink: 0;
	}

	body.page-ki-webapplikationen #features .placetel-feature-answer {
		grid-column: 1 / -1;
		grid-row: 2;
		min-width: 0;
	}

	body.page-ki-webapplikationen #features .placetel-feature-answer p {
		margin: 0;
	}
}

@media (max-width: 640px) {
	/* Steps-Timeline: 16px Container-Padding (Stripe-CSS), nicht 35px */
	body.page-ki-webapplikationen .placetel-steps-section .container-placetel > .placetel-steps-timeline {
		width: calc(100% + 32px) !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
	}

	body.page-ki-webapplikationen .placetel-usecases-section .placetel-usecases-grid {
		width: calc(100% + 70px) !important;
		margin-left: -35px !important;
		margin-right: -35px !important;
	}
}