/*
 * inray Page-Blocks — Grundlayout unter dem Präfix "pb-" (Page-Block), BEM-artig.
 * hero + feature_split sind 1:1 aus dem Redesign-Mockup „manubes Startseite"
 * übernommen (Farben/Größen/Layout exakt); Schriftfamilie wird bewusst NICHT
 * gesetzt, sondern vom aktiven Theme geerbt. Die übrigen Blöcke sind rein
 * strukturell (ohne Farben/Feindesign), damit nichts mit dem Theme kollidiert.
 *
 * Redesign-Palette (aus dem Mockup):
 *   Blau #0087c8 · Blau-tief #004788 · Blau-dunkel #013b6e · Gelb #ffbd03
 *   Ink #373737 · Grau #6d6d6d
 */

/* ── Buttons (Hero/Feature) ── */
.pb-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: .95rem;
	padding: 15px 32px;
	border-radius: 100px;
	transition: transform .18s ease, box-shadow .18s ease;
	cursor: pointer;
	line-height: 1.2;
}
.pb-btn:hover {
	transform: translateY(-2px);
}
.pb-btn--yellow {
	background: #ffbd03;
	color: #1a1a1a;
	box-shadow: 0 6px 20px rgba(255, 189, 3, .35);
}
.pb-btn--yellow:hover {
	box-shadow: 0 10px 26px rgba(255, 189, 3, .45);
}
.pb-btn--ghost {
	border: 2px solid #0087c8;
	color: #0087c8;
}
.pb-btn--ghost:hover {
	background: rgba(0, 135, 200, .07);
}
.pb-btn__arr {
	transition: transform .18s ease;
}
.pb-btn:hover .pb-btn__arr,
.pb-feature-split__link:hover .pb-btn__arr {
	transform: translateX(3px);
}

/* ── Hero (Redesign-Mockup) ── */
.pb-hero {
	background: linear-gradient(180deg, #ffffff 0%, #eef3f8 55%, #e7edf3 100%);
	padding: 88px 0 96px;
}
.pb-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
	gap: 56px;
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.pb-hero__copy {
	max-width: 680px;
}
.pb-hero__eyebrow {
	display: inline-block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0087c8;
	margin-bottom: 14px;
}
.pb-hero__title {
	font-size: clamp(1.8rem, 2.9vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -.5px;
	line-height: 1.2;
	color: #013b6e;
	margin: 0;
}
.pb-hero__hl {
	color: #0087c8;
}
.pb-hero__sub {
	margin: 22px 0 36px;
	font-size: 1.1rem;
	line-height: 1.65;
	color: #6d6d6d;
}
.pb-hero__ctas {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
.pb-hero__note {
	margin-top: 22px;
	font-size: .85rem;
	color: #6d6d6d;
}
.pb-hero__media {
	position: relative;
	width: 100%;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.pb-hero__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 605px;
	object-fit: contain;
	filter: drop-shadow(0 22px 36px rgba(1, 59, 110, .22));
}
@media (max-width: 900px) {
	.pb-hero {
		padding: 56px 0 72px;
	}
	.pb-hero__grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.pb-hero__copy {
		max-width: 640px;
		margin: 0 auto;
		text-align: center;
	}
	.pb-hero__ctas {
		justify-content: center;
	}
	.pb-hero__media {
		justify-content: center;
	}
	.pb-hero__image {
		max-width: 680px;
	}
}

/* ── Feature (Text/Bild-Zeile, Redesign-Mockup) ── */
.pb-feature-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: center;
	padding: 70px 24px;
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
}
.pb-feature-split + .pb-feature-split {
	border-top: 1px solid rgba(1, 59, 110, .07);
}
/* Bild rechts: Reihenfolge tauschen (Standard = Bild links). */
.pb-feature-split--image-right .pb-feature-split__media {
	order: 2;
}
/* Bildspalte wie beim image_text-Block auf 520px deckeln, damit die
   Grafik-Kachel nicht die halbe Seitenbreite dominiert. */
.pb-feature-split__media {
	position: relative;
	width: 100%;
	max-width: 520px;
	justify-self: center;
}
/* Hinterliegender Deko-Kasten (aus dem Mockup, .f-media::before) — reines CSS,
   liegt hinter der Bild-Kachel und wird so bei jedem feature_split-Block
   automatisch wiederverwendet; das Kachel-Bild bleibt austauschbar. */
.pb-feature-split__media::before {
	content: "";
	position: absolute;
	inset: -18px -18px auto auto;
	width: 110px;
	height: 110px;
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(0, 135, 200, .14), rgba(0, 71, 136, .08));
	z-index: -1;
}
.pb-feature-split__image {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid rgba(1, 59, 110, .08);
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(1, 59, 110, .10);
}
.pb-feature-split__num {
	font-weight: 800;
	font-size: .8rem;
	color: #0087c8;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.pb-feature-split__title {
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.2;
	color: #013b6e;
	margin: 0 0 16px;
}
.pb-feature-split__text {
	color: #6d6d6d;
	line-height: 1.65;
	margin-bottom: 22px;
	max-width: 62ch;
}
.pb-feature-split__text p {
	margin: 0 0 1em;
}
.pb-feature-split__text p:last-child {
	margin-bottom: 0;
}
.pb-feature-split__link {
	font-weight: 700;
	font-size: .92rem;
	color: #0087c8;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
/* Gestapelt (Handy/Tablet): seitlich 24px Abstand zum Rand wie bei
   image_text; das Bild steht linksbündig über dem Text und wird nie breiter
   als der Fließtext (62ch — die Medien-Spalte erbt dieselbe Schriftgröße wie
   .pb-feature-split__text, 62ch ergibt also dieselbe Breite). */
@media (max-width: 900px) {
	.pb-feature-split {
		grid-template-columns: 1fr;
		gap: 34px;
		padding: 48px 24px;
	}
	.pb-feature-split--image-right .pb-feature-split__media {
		order: 0;
	}
	.pb-feature-split__media {
		max-width: min(520px, 62ch);
		justify-self: start;
	}
	/* Überschrift (und Nummer/Link) nie breiter als der Fließtext: die
	   Textspalte selbst auf 62ch begrenzen; min-width: 0 verhindert, dass
	   ein langes Wort die Grid-Spalte über den Bildschirm hinaus aufweitet,
	   lange Komposita werden stattdessen getrennt bzw. umbrochen. */
	.pb-feature-split__body {
		max-width: 62ch;
		min-width: 0;
	}
	.pb-feature-split__title {
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

.pb-feature {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.pb-feature__icon img {
	max-width: 64px;
	height: auto;
}

.pb-testimonial {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.pb-testimonial__person {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.pb-testimonial__photo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}
.pb-testimonial__meta {
	display: flex;
	flex-direction: column;
}

/* ── CTA (zentrierte Abschluss-Sektion) ──
   Nachbau der CTA-Sektion am Seitenende bestehender manubes.de-Seiten
   (z. B. /shopfloor-boards-fuer-die-produktion/): weißer Hintergrund,
   mittig, gelber Pillen-Button mit weißer Schrift. */
.pb-cta {
	padding: 96px 24px;
	text-align: center;
}
.pb-cta__inner {
	max-width: 640px;
	margin: 0 auto;
}
.pb-cta__headline {
	margin: 0 0 20px;
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.5;
	color: #373737;
	white-space: pre-line;
}
.pb-cta__text {
	margin: 0 0 32px;
	font-size: 1.05rem;
	line-height: 1.75;
	color: #6d6d6d;
}
.pb-btn--cta {
	background: #ffbd03;
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(255, 189, 3, .35);
}
.pb-btn--cta:hover {
	box-shadow: 0 10px 26px rgba(255, 189, 3, .45);
}
@media (max-width: 767px) {
	.pb-cta {
		padding: 64px 20px;
	}
}

.pb-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
}
.pb-logos__item img {
	max-height: 48px;
	width: auto;
	display: block;
}

.pb-pricing {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}
.pb-pricing__plan {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.pb-pricing__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* ── Karten-Reihe (card_grid, Redesign) ── */
/* Oben derselbe Abstand wie section_intro (64px, Handy 48px), damit
   card_grid nicht am vorherigen Baustein klebt. Folgt card_grid direkt auf
   einen section_intro (z. B. "inray als verlässlicher Partner"), entfällt
   der Abstand oben: der Intro bringt schon sein eigenes Padding unten mit,
   beide sollen optisch zusammen wirken. Unten Platz, damit card_grid dem
   nachfolgenden Baustein nicht zu dicht auf die Pelle rückt (z. B. dem
   Funktionsbereiche-Raster gefolgt von der Applikationsverwaltung). */
.pb-card-grid-section {
	padding: 64px 0 64px;
}
/* Ohne Kicker/Überschrift/Einleitung ist die Karten-Reihe meist die
   Fortsetzung des Bausteins darüber (z. B. Karten unter einem image_text,
   der schon 72px Padding unten mitbringt) — dann kein Abstand oben. */
.pb-section-intro + .pb-card-grid-section,
.pb-card-grid-section.pb-card-grid-section--no-header {
	padding-top: 0;
}
@media (max-width: 767px) {
	.pb-card-grid-section {
		padding-top: 48px;
	}
}
.pb-card-grid__header {
	max-width: 900px;
	margin: 0 auto 40px;
	padding: 0 24px;
	text-align: center;
}
.pb-card-grid__kicker {
	margin: 0 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0087c8;
}
.pb-card-grid__heading {
	margin: 0 0 16px;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1.25;
	color: #013b6e;
}
.pb-card-grid__intro {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #6d6d6d;
}
.pb-card-grid__intro p {
	margin: 0 0 1em;
}
.pb-card-grid__intro p:last-child {
	margin-bottom: 0;
}
.pb-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.pb-card {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(1, 59, 110, .10);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.pb-card__media img {
	display: block;
	width: 100%;
	height: 240px;
	object-fit: cover;
}
.pb-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 28px 28px 32px;
	text-align: center;
}
.pb-card__kicker {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #e0a400;
}
.pb-card__headline {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	color: #013b6e;
}
.pb-card__text {
	color: #6d6d6d;
	line-height: 1.65;
}
/* Button an den unteren Rand — bündig über alle Karten, auch bei
   unterschiedlich langem Text. */
.pb-card__body .pb-btn {
	margin-top: auto;
}
/* Spaltenzahl (Feld `columns`, siehe block-card_grid.php). Bei zwei Spalten
   eine schmalere Bahn, damit die Karten nicht überbreit werden. */
.pb-card-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 900px;
}
.pb-card-grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.pb-card-grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
/* Vier Spalten werden auf mittleren Breiten zu 2×2, bevor alles stapelt. */
@media (max-width: 1100px) {
	.pb-card-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 900px) {
	.pb-card-grid,
	.pb-card-grid--cols-2,
	.pb-card-grid--cols-3,
	.pb-card-grid--cols-4 {
		grid-template-columns: 1fr;
		max-width: 480px;
	}
	.pb-card-grid__header {
		margin-bottom: 32px;
	}
}

.pb-image-text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2.5rem 4.5rem;
	max-width: 1180px;
	margin: 0 auto;
	padding: 72px 24px;
	box-sizing: border-box;
}
.pb-image-text__content {
	flex: 1.15 1 380px;
	min-width: 0;
}
.pb-image-text__media--column {
	flex: 1 1 320px;
	min-width: 0;
	max-width: 520px;
}
.pb-image-text__stage {
	display: block;
}
.pb-image-text__media img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(1, 59, 110, 0.16);
}
/* image_style "plain" (Standard): kleine Bilder (z. B. Logos) nie über ihre
   Originalgröße hinaus vergrößern — nur bei Bedarf auf die verfügbare Breite
   verkleinern. Ohne das wird z. B. das "Cloud Services Made in Germany"-Logo
   (500px breit) im Tablet-Bereich auf über 700px gestreckt und wirkt
   unscharf/übermäßig gezoomt. Betrifft nicht "staged" (siehe unten): dort
   muss das Bild seine Bühne exakt ausfüllen, damit der Zuschnitt
   (object-fit: cover) funktioniert. Für großformatige Fotos/Screenshots
   (breiter als ihr Rahmen) ändert sich dadurch nichts — sie werden wie
   bisher auf die Rahmenbreite herunterskaliert. */
.pb-image-text--plain .pb-image-text__media img {
	width: auto;
	margin-inline: auto;
}
/* image_style "badge": kleine Partnerlogos fest auf ein kompaktes Maß
   begrenzen — sonst nimmt ein 500px breites Logo in der Medien-Spalte fast
   die halbe Zeile ein, auch wenn es (wie bei "plain") nicht über seine
   Originalgröße hinaus gestreckt wird. Rundung/Schatten der Basisregel
   bleiben hier bewusst erhalten (Logo auf weißer "Karte"). */
.pb-image-text--badge .pb-image-text__media img {
	width: auto;
	max-width: 240px;
	margin-inline: auto;
}
/* image_style "seal": für offizielle Prüfsiegel/Zertifizierungslogos (z. B.
   "Cloud Services Made in Germany") — die Grafik ist bereits ein fertiges,
   meist eckiges Bild (mit eigenem Rand, Symbolen nah an den Ecken). Anders
   als "badge" daher OHNE jede Veränderung: keine Rundung, kein Schatten,
   kein Zuschnitt. border-radius auf dem <img> selbst würde sonst Teile des
   Artworks an den Ecken abschneiden statt nur einen Rahmen zu runden (genau
   das Problem beim Cloud-Services-Siegel). Nur proportional auf eine
   kompakte, "übliche" Siegelgröße begrenzt — nie hochskaliert. */
.pb-image-text--seal .pb-image-text__media img {
	width: auto;
	max-width: 200px;
	margin-inline: auto;
	border-radius: 0;
	box-shadow: none;
}
/* Inline-Bild (unter 981px) nie breiter als der Fließtext darunter:
   font-size 17px nur, damit 62ch dieselbe Breite ergibt wie in
   .pb-image-text__text (wie bei .pb-image-text__head). */
.pb-image-text__media--inline {
	margin: 1.5rem 0;
	max-width: 62ch;
	font-size: 17px;
}
.pb-image-text__media--column {
	display: none;
}
/* image_style "staged" (siehe block-image_text.php): für Fotos mit viel
   Leerraum um ein schräg liegendes Objekt (Geräte-Renderings). Statt
   Kastenschatten + weißer Bildecken eine farbige Bühne — enger zugeschnitten,
   weicher Verlauf und Glow statt hartem Schatten. Betrifft nur Bausteine mit
   image_style=staged, alle anderen image_text-Vorkommen (Screenshots,
   Diagramme, Logos) bleiben unverändert bei "plain". */
.pb-image-text--staged .pb-image-text__media img {
	border-radius: 0;
	box-shadow: none;
}
.pb-image-text--staged .pb-image-text__stage {
	position: relative;
	border-radius: 20px;
	background:
		radial-gradient(circle at 30% 20%, rgba(0, 135, 200, 0.16), transparent 60%),
		linear-gradient(135deg, #eef6fb 0%, #e3eef7 100%);
	padding: 24px;
	overflow: hidden;
}
.pb-image-text--staged .pb-image-text__stage::after {
	content: "";
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 189, 3, 0.16), transparent 70%);
	bottom: -60px;
	right: -50px;
	pointer-events: none;
}
.pb-image-text--staged .pb-image-text__media--inline .pb-image-text__stage {
	padding: 16px;
}
.pb-image-text--staged .pb-image-text__stage > img {
	position: relative;
	z-index: 1;
	aspect-ratio: 16 / 11.2;
	border-radius: 14px;
	object-fit: cover;
	object-position: 46% 42%;
	transform: scale(1.22);
}
/* Folgt auf einen image_text OHNE Bild (reiner Textabschnitt) direkt ein
   weiterer image_text, addierten sich 72px unten + 72px oben zu einer großen
   Lücke (z. B. Energiemonitoring: „Definition“ → „Warum jetzt?“). Der
   zweite Block rückt deshalb so weit nach oben, dass der Abstand genau dem
   zwischen einem feature_split und einem folgenden image_text entspricht
   (feature_split unten 70px, gestapelt ≤900px nur 48px): oberer Abstand =
   normaler oberer Abstand − (72px − unterer Abstand feature_split). Die
   höhere Spezifität gewinnt auch gegen die Handy-Regel weiter unten. */
.pb-image-text--no-image + .pb-image-text {
	padding-top: 70px;
}
@media (max-width: 900px) {
	.pb-image-text--no-image + .pb-image-text {
		padding-top: 48px;
	}
}
@media (max-width: 767px) {
	.pb-image-text--no-image + .pb-image-text {
		padding-top: 38px;
	}
}
/* Bildseite: Reihenfolge tauschen statt Markup zu duplizieren. Im Markup steht
   die Textspalte zuerst, deshalb ist "Bild rechts" die natuerliche Reihenfolge
   und nur "Bild links" muss tauschen. Die frueheren Regeln setzten die
   Reihenfolge ausschliesslich fuer --image-right (und dort auf genau die
   Markup-Reihenfolge) — damit stand das Bild in JEDEM image_text-Baustein
   rechts und das Feld "Bildposition" blieb wirkungslos. Unterhalb von 981px
   stapeln die Spalten ohnehin (die Bildspalte ist dort ausgeblendet), die
   Reihenfolge wirkt also nur auf dem Desktop. */
.pb-image-text--image-left .pb-image-text__media--column {
	order: 1;
}
.pb-image-text--image-left .pb-image-text__content {
	order: 2;
}
.pb-image-text--image-right .pb-image-text__media--column {
	order: 2;
}
.pb-image-text--image-right .pb-image-text__content {
	order: 1;
}

/*
 * Farben/Fonts aus den Divi-Text/Bild-Modulen der manubes-Seite übernommen
 * (Kicker-Gelb, Schriftgrößen, Breakpoints). Layout bewusst überarbeitet:
 * Fließtext linksbündig statt zentriert, Spalten vertikal zentriert,
 * Container mit max-Breite — der zentrierte Divi-Fließtext wirkte in den
 * 50/50-Spalten unruhig.
 */
/* Kopf (Kicker + Überschrift) so breit wie der Fließtext: font-size 17px
   nur, damit 62ch hier dieselbe Breite ergibt wie in .pb-image-text__text —
   Kicker und Überschrift setzen ihre Schriftgröße selbst. */
.pb-image-text__head {
	max-width: 62ch;
	font-size: 17px;
}
.pb-image-text__kicker {
	margin: 0 0 4px;
	font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 1.8em;
	letter-spacing: 1px;
	color: #fcc100;
	text-align: left;
}
.pb-image-text__headline {
	margin: 0 0 18px;
	font-weight: 700;
	font-size: 25px; /* Divi Desktop */
	line-height: 1.4em;
	color: #000;
	text-align: left;
}
.pb-image-text__text,
.pb-image-text__quote {
	font-size: 17px;
	line-height: 1.8em;
	text-align: left;
	max-width: 62ch;
}
.pb-image-text__text p,
.pb-image-text__quote p {
	margin: 0 0 1em;
}
.pb-image-text__text p:last-child,
.pb-image-text__quote p:last-child {
	margin-bottom: 0;
}
.pb-image-text__quote {
	margin: 1.5em 0 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 4px solid #ffbd03;
	font-style: italic;
	color: #013b6e;
}
/* Blockquotes, die redaktionell IN einem Richtext-Feld stehen, sehen aus wie
   das eigene Zitat-Feld von image_text — sonst schlüge das Theme-Styling
   durch. */
.pb-feature-split__text blockquote,
.pb-section-intro__text blockquote,
.pb-card-grid__intro blockquote,
.pb-benefits__text blockquote {
	margin: 1.5em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 4px solid #ffbd03;
	font-style: italic;
	color: #013b6e;
}
/* Textlink unter der Textspalte (image_text) — gleiche Optik wie bei
   feature_split. */
.pb-image-text__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 1.5em;
	font-weight: 700;
	color: #0087c8;
	text-decoration: none;
}
.pb-image-text__link:hover {
	color: #013b6e;
}
.pb-image-text__link:hover .pb-btn__arr {
	transform: translateX(3px);
}
/* link_style "button": gelber Button in der Textspalte (wie die
   Divi-Buttons „Jetzt … erstellen" der Shopfloor-Boards-Seite). */
.pb-image-text__button {
	margin-top: 1.5em;
	text-decoration: none;
}
/* Optionales zweites Bild (image_2) unter dem ersten in der Bildspalte;
   die Spalte ist unter 981px ausgeblendet, also nur auf dem Desktop. */
.pb-image-text .pb-image-text__media img.pb-image-text__image-2 {
	display: block;
	width: 80%;
	margin: 2rem auto 0;
}

/* Fließtext-Links in den Richtext-Feldern (image_text, feature_split): in
   Markenblau mit dezenter Unterstreichung, damit interne Verweise im Text
   erkennbar sind, ohne wie ein Button zu wirken. */
.pb-image-text__text a,
.pb-image-text__quote a,
.pb-feature-split__text a {
	color: #0087c8;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(0, 135, 200, .45);
	font-weight: 600;
}
.pb-image-text__text a:hover,
.pb-image-text__quote a:hover,
.pb-feature-split__text a:hover {
	color: #013b6e;
	text-decoration-color: currentColor;
}

/* Divi-Breakpoints für die Überschrift: Tablet ≤980px, Phone ≤767px. */
@media (max-width: 980px) {
	.pb-image-text__headline {
		font-size: 24px;
	}
}
@media (max-width: 767px) {
	.pb-image-text {
		padding-top: 62px;
	}
	.pb-image-text__headline {
		font-size: 21px;
	}
}

/* Bildtausch: Divi blendet das Inline-Bild ab 981px aus und zeigt stattdessen
   die Bildspalte (unter 981px stapeln die 50/50-Spalten, Inline-Bild sichtbar). */
@media (min-width: 981px) {
	.pb-image-text__media--inline {
		display: none;
	}
	.pb-image-text__media--column {
		display: block;
	}
}

/* ── Referenzen (Kunden-Karussell, "Unsere Kunden") ── */
.pb-references {
	padding: 64px 0;
	max-width: 1180px;
	margin: 0 auto;
}
.pb-references__title {
	margin: 0 0 40px;
	text-align: center;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	color: #373737;
}
.pb-references__carousel {
	position: relative;
	padding: 0 56px; /* Platz für die Pfeile links/rechts */
}
.pb-references__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 40px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	-ms-overflow-style: none; /* IE/alt-Edge */
	scrollbar-width: none;    /* Firefox */
}
.pb-references__track::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}
.pb-references__item {
	flex: 0 0 auto;
	scroll-snap-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 220px;
	height: 150px;
}
.pb-references__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pb-references__image {
	max-width: 100%;
	max-height: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.pb-references__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #9a9a9a;
	cursor: pointer;
	transition: color .18s ease;
	z-index: 1;
}
.pb-references__nav:hover {
	color: #373737;
}
.pb-references__nav--prev {
	left: 0;
}
.pb-references__nav--next {
	right: 0;
}
.pb-references__nav.is-disabled {
	opacity: .3;
	cursor: default;
	pointer-events: none;
}
@media (max-width: 900px) {
	.pb-references {
		padding: 48px 0;
	}
	.pb-references__carousel {
		padding: 0 40px;
	}
	.pb-references__item {
		width: 160px;
		height: 120px;
	}
	.pb-references__image {
		max-height: 90px;
	}
}

/* ── Abschnitts-Einleitung (section_intro) ──
   Zentrierte Textspalte (Kicker + Überschrift + Text + Button), darunter
   optional ein Bild über die volle Blockbreite — für Abschnitte, die erst
   eingeleitet werden und dann z. B. eine Karten-Reihe tragen. */
.pb-section-intro {
	padding: 64px 0 40px;
}
.pb-section-intro__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}
.pb-section-intro--left .pb-section-intro__inner {
	text-align: left;
}
.pb-section-intro__kicker {
	margin: 0 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0087c8;
}
.pb-section-intro__headline {
	margin: 0 0 20px;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 800;
	line-height: 1.25;
	color: #013b6e;
}
.pb-section-intro__text {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #6d6d6d;
}
.pb-section-intro__text p {
	margin: 0 0 1em;
}
.pb-section-intro__text p:last-child {
	margin-bottom: 0;
}
.pb-section-intro__text a {
	color: #0087c8;
	text-decoration: none;
}
.pb-section-intro__text a:hover {
	text-decoration: underline;
}
.pb-section-intro__actions {
	margin-top: 32px;
}
.pb-section-intro__media {
	max-width: 1180px;
	margin: 40px auto 0;
	padding: 0 24px;
	text-align: center;
}
.pb-section-intro__image {
	max-width: 100%;
	height: auto;
	display: inline-block;
	border-radius: 16px;
}
@media (max-width: 767px) {
	.pb-section-intro {
		padding: 48px 0 32px;
	}
	.pb-section-intro__media {
		margin-top: 28px;
	}
}

/* ── Vorteile-Liste (benefits) ──
   Nummerierte Zeilen (Nummernkreis + Titel + Text), getrennt durch dünne
   Linien — Nachbau der Startseiten-Sektion „5 Vorteile mit manubes", dort
   mit Nummern-PNGs gelöst; hier gesetzt, damit kein Asset pro Zeile nötig
   ist. */
.pb-benefits {
	max-width: 900px;
	margin: 0 auto;
	padding: 56px 24px;
	box-sizing: border-box;
}
.pb-benefits__heading {
	margin: 0 0 16px;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1.25;
	color: #013b6e;
	text-align: center;
}
.pb-benefits__intro {
	margin: 0 auto 40px;
	max-width: 700px;
	font-size: 1.05rem;
	line-height: 1.7;
	color: #6d6d6d;
	text-align: center;
}
.pb-benefits__intro p {
	margin: 0 0 1em;
}
.pb-benefits__intro p:last-child {
	margin-bottom: 0;
}
.pb-benefits__item {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}
.pb-benefits__item + .pb-benefits__item {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid rgba(1, 59, 110, .12);
}
.pb-benefits__num {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #ffbd03;
	color: #013b6e;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 56px;
	text-align: center;
}
/* Längere Marken (Zeitspannen wie „10–13"): gleich breite Pille statt
   Kreis, gesetzt vom Template über pb-benefits--wide. */
.pb-benefits--wide .pb-benefits__num {
	flex-basis: 96px;
	width: 96px;
	border-radius: 28px;
	font-size: 1.25rem;
	white-space: nowrap;
}
.pb-benefits__body {
	flex: 1 1 auto;
	min-width: 0;
}
.pb-benefits__title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: #013b6e;
}
.pb-benefits__text {
	font-size: 1.02rem;
	line-height: 1.7;
	color: #6d6d6d;
}
.pb-benefits__text p {
	margin: 0 0 1em;
}
.pb-benefits__text p:last-child {
	margin-bottom: 0;
}
.pb-benefits__text a,
.pb-benefits__intro a {
	color: #0087c8;
	text-decoration: none;
}
.pb-benefits__text a:hover,
.pb-benefits__intro a:hover {
	text-decoration: underline;
}
@media (max-width: 767px) {
	.pb-benefits {
		padding: 40px 24px;
	}
	.pb-benefits__item {
		gap: 18px;
	}
	.pb-benefits__num {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
		font-size: 1.2rem;
		line-height: 44px;
	}
	.pb-benefits--wide .pb-benefits__num {
		flex-basis: 76px;
		width: 76px;
		border-radius: 22px;
		font-size: 1rem;
	}
}

/* ── Video (video) ──
   Natives <video> in einem 16:9-Rahmen (aspect-ratio, mit padding-top-
   Fallback für ältere Browser). Kein Drittanbieter-Embed, siehe
   block-video.php. */
.pb-video {
	padding: 56px 0;
}
.pb-video__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}
.pb-video__heading {
	margin: 0 0 16px;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	line-height: 1.25;
	color: #013b6e;
}
.pb-video__intro {
	margin-bottom: 32px;
	font-size: 1.05rem;
	line-height: 1.7;
	color: #6d6d6d;
}
.pb-video__intro p {
	margin: 0 0 1em;
}
.pb-video__intro p:last-child {
	margin-bottom: 0;
}
.pb-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: #013b6e;
	box-shadow: 0 10px 40px rgba(1, 59, 110, .18);
}
@supports not (aspect-ratio: 16 / 9) {
	.pb-video__frame {
		height: 0;
		padding-top: 56.25%;
	}
}
.pb-video__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	object-fit: cover;
}
.pb-video__caption {
	margin: 16px 0 0;
	font-size: .92rem;
	line-height: 1.6;
	color: #6d6d6d;
}
@media (max-width: 767px) {
	.pb-video {
		padding: 40px 0;
	}
	.pb-video__intro {
		margin-bottom: 24px;
	}
}

/* ── Inhaltsverzeichnis (toc) ──
   Horizontale Pillen-Leiste als eigenständige Karte (Rahmen + Schatten),
   über die volle Breite. Die Vorlage (TOC auf
   /unified-namespace-grundprinzipien-und-umsetzung/) zeigt eine schmale Box
   als Sidebar NEBEN der Textspalte — das gibt es in diesem Baustein-System
   nicht (jeder Block ist eine eigene volle Zeile), eine schmale Box wirkte
   dort isoliert mit viel Leerraum daneben. <div>/<a> statt <ul>/<li>, damit
   globale Theme-Listenstile (Bullet-Punkte) nicht hineingreifen. */
.pb-toc {
	padding: 32px 24px;
}
.pb-toc__inner {
	max-width: 1180px;
	margin: 0 auto;
}
.pb-toc__bar {
	background: #ffffff;
	border: 1px solid rgba(1, 59, 110, .10);
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(1, 59, 110, .08);
	padding: 18px 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}
.pb-toc__heading {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 100px;
	background: rgba(0, 135, 200, .1);
	color: #0087c8;
	font-weight: 800;
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.pb-toc__link {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 100px;
	background: #f6f8fa;
	color: #0087c8;
	font-weight: 700;
	font-size: .85rem;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease;
}
.pb-toc__link:hover {
	background: rgba(0, 135, 200, .12);
}
@media (max-width: 767px) {
	.pb-toc {
		padding: 24px 20px;
	}
	.pb-toc__bar {
		padding: 14px 16px;
		gap: 8px 10px;
	}
	.pb-toc__link {
		padding: 7px 14px;
		font-size: .8rem;
	}
}

/* ── HeroBlauV1 (blauer Seiten-Header der Unterseiten) ──
   Nachbildung der Header-Sektion bestehender manubes.de-Unterseiten
   (z. B. /unified-namespace-grundprinzipien-und-umsetzung/): blaue
   Vollflächen-Sektion (Hintergrundbild + blaue Überlagerung liefert das
   Template als Inline-Style), gelber Kicker, große weiße H1, weiße Subline.
   Farben aus der Redesign-Palette (Blau-dunkel #013b6e, Gelb #ffbd03). */
.pb-hero-blau {
	background: linear-gradient(135deg, #004788 0%, #013b6e 100%);
	background-size: cover;
	background-position: center;
	padding: 110px 0 130px;
}
.pb-hero-blau__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.pb-hero-blau--left .pb-hero-blau__inner {
	text-align: left;
}
.pb-hero-blau--center .pb-hero-blau__inner {
	text-align: center;
}
.pb-hero-blau__kicker {
	/* padding: 0 hebt Divis „p { padding-bottom: 1em }" auf, das sonst
	   zusätzlich zum margin eine große Lücke zur H1 erzeugt. */
	margin: 0 0 10px;
	padding: 0;
	font-weight: 800;
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	line-height: 1.4;
	color: #ffbd03;
}
.pb-hero-blau__headline {
	margin: 0 0 24px;
	padding-top: 0;
	font-weight: 800;
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	line-height: 1.15;
	color: #ffffff;
}
.pb-hero-blau__subline {
	margin: 0;
	max-width: 640px;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.9;
	color: #ffffff;
	white-space: pre-line; /* Absätze der Subline (Zeilenumbrüche) erhalten */
}
.pb-hero-blau--center .pb-hero-blau__subline {
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767px) {
	.pb-hero-blau {
		padding: 64px 0 72px;
	}
}

/* ── Weitere Informationen (verwandte Artikel) ──
   Nachbau der bestehenden Divi-Sektion „Weitere Informationen" der
   manubes-Wissensseiten: Überschrift + Einleitung, darunter Zeilen aus
   Vorschaubild (feste 240px-Spalte) und Text, getrennt durch eine dünne
   Linie. Typografie und Maße sind an der Live-Seite abgenommen
   (h2 25px/#333, h3 21px/#333, Text 17px/1.8 in #8a8a8a, Links #0087c8). */
.pb-related-info {
	max-width: 1180px;
	margin: 0 auto;
	padding: 50px 24px 30px;
	box-sizing: border-box;
	text-align: left;
}
.pb-related-info__heading {
	font-size: 25px;
	line-height: 1.4em;
	color: #333;
	margin: 0 0 5px;
}
.pb-related-info__intro {
	font-size: 17px;
	line-height: 1.8em;
	color: #8a8a8a;
	margin-bottom: 40px;
}
.pb-related-info__intro p {
	margin: 0 0 1em;
}
.pb-related-info__intro p:last-child {
	margin-bottom: 0;
}
.pb-related-info__item {
	display: flex;
	align-items: center;
	gap: 32px;
}
.pb-related-info__item + .pb-related-info__item {
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid #000;
}
.pb-related-info__media {
	flex: 0 0 240px;
	max-width: 240px;
}
.pb-related-info__media img {
	display: block;
	width: 100%;
	height: auto;
}
.pb-related-info__body {
	flex: 1 1 auto;
	min-width: 0;
}
.pb-related-info__title {
	font-size: 21px;
	line-height: 1.2em;
	color: #333;
	margin: 0 0 10px;
}
.pb-related-info__text {
	font-size: 17px;
	line-height: 1.8em;
	color: #8a8a8a;
}
.pb-related-info__text p {
	margin: 0 0 1em;
}
.pb-related-info__text p:last-child {
	margin-bottom: 0;
}
.pb-related-info__intro a,
.pb-related-info__text a {
	color: #0087c8;
	text-decoration: none;
}
.pb-related-info__intro a:hover,
.pb-related-info__text a:hover {
	text-decoration: underline;
}

/* Divi-Breakpoint: ab Tablet stapeln, Bild über dem Text. */
@media (max-width: 980px) {
	.pb-related-info__item {
		display: block;
	}
	.pb-related-info__media {
		max-width: 300px;
		margin-bottom: 20px;
	}
}

/* ── Häufige Fragen (FAQ) ──
   Ausklappbare Frage-Antwort-Paare auf Basis von <details>/<summary>, ohne
   JavaScript. Typografie wie bei den übrigen Textbausteinen (Überschrift
   25px/#333, Text 17px/1.8 in #8a8a8a). */
.pb-faq {
	max-width: 1180px;
	margin: 0 auto;
	padding: 50px 24px;
	box-sizing: border-box;
	text-align: left;
}
.pb-faq__heading {
	font-size: 25px;
	line-height: 1.4em;
	color: #333;
	margin: 0 0 5px;
}
.pb-faq__intro {
	font-size: 17px;
	line-height: 1.8em;
	color: #8a8a8a;
	margin-bottom: 30px;
}
.pb-faq__intro p {
	margin: 0 0 1em;
}
.pb-faq__intro p:last-child {
	margin-bottom: 0;
}
.pb-faq__item {
	border-bottom: 1px solid rgba(1, 59, 110, .12);
}
.pb-faq__item:first-child {
	border-top: 1px solid rgba(1, 59, 110, .12);
}
.pb-faq__question {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: #013b6e;
}
/* Das native Dreieck abschalten (WebKit braucht die eigene Regel) und durch
   ein eigenes Plus/Minus ersetzen. */
.pb-faq__question::-webkit-details-marker {
	display: none;
}
.pb-faq__question::after {
	content: "+";
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 26px;
	line-height: 1;
	font-weight: 400;
	color: #0087c8;
	transition: transform .15s ease;
}
.pb-faq__item[open] > .pb-faq__question::after {
	content: "–";
}
.pb-faq__question:hover {
	color: #0087c8;
}
.pb-faq__answer {
	padding: 0 40px 24px 0;
	font-size: 17px;
	line-height: 1.8em;
	color: #8a8a8a;
	max-width: 80ch;
}
.pb-faq__answer p {
	margin: 0 0 1em;
}
.pb-faq__answer p:last-child {
	margin-bottom: 0;
}
.pb-faq__answer a {
	color: #0087c8;
	text-decoration: none;
}
.pb-faq__answer a:hover {
	text-decoration: underline;
}
@media (max-width: 767px) {
	.pb-faq__question {
		font-size: 17px;
	}
	.pb-faq__answer {
		padding-right: 0;
	}
}

/* ── Einsatzbereiche (use_cases) ──
   Karten-Raster mit Symbol, Bereichsname, Untertitel, einem Satz und den
   „Beispielen" als Chips. Die Chips sind Links auf die jeweiligen
   Detailseiten — deshalb bewusst als Liste ausgezeichnet und nicht als
   Fließtext. Farben wie in den übrigen Bausteinen (Blau #0087c8,
   Blau-dunkel #013b6e, Grau #6d6d6d). */
.pb-use-cases {
	padding: 64px 0 56px;
}
.pb-use-cases__header {
	max-width: 900px;
	margin: 0 auto 36px;
	padding: 0 24px;
	text-align: center;
}
.pb-use-cases__kicker {
	margin: 0 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0087c8;
}
.pb-use-cases__heading {
	margin: 0 0 16px;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 800;
	line-height: 1.25;
	color: #013b6e;
}
.pb-use-cases__intro {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #6d6d6d;
}
.pb-use-cases__intro p {
	margin: 0 0 1em;
}
.pb-use-cases__intro p:last-child {
	margin-bottom: 0;
}
.pb-use-cases__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.pb-use-cases__grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.pb-uc {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #ffffff;
	border: 1px solid #dbe6f0;
	border-radius: 16px;
	padding: 24px 24px 22px;
}
.pb-uc__top {
	display: flex;
	align-items: center;
	gap: 14px;
}
.pb-uc__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #e8f4fc;
	color: #0087c8;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pb-uc__icon .pb-icon {
	width: 23px;
	height: 23px;
}
.pb-uc__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	color: #013b6e;
}
.pb-uc__subtitle {
	margin: 3px 0 0;
	font-size: .85rem;
	font-weight: 700;
	color: #0087c8;
}
.pb-uc__text {
	margin: 0;
	color: #6d6d6d;
	line-height: 1.6;
}
.pb-uc__chips {
	list-style: none;
	margin: auto 0 0;
	padding: 4px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.pb-uc__chip {
	display: inline-block;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.3;
	color: #013b6e;
	background: #f3f8fc;
	border: 1px solid #dbe6f0;
	border-radius: 999px;
	padding: 7px 14px;
	text-decoration: none;
}
a.pb-uc__chip:hover {
	background: #e8f4fc;
	border-color: #b9dcf1;
}
.pb-uc__chip--plain {
	color: #6d6d6d;
	font-weight: 400;
}
.pb-uc__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: #0087c8;
	text-decoration: none;
}
.pb-uc__link:hover {
	color: #013b6e;
}
.pb-uc__link:hover .pb-btn__arr {
	transform: translateX(3px);
}
.pb-use-cases__actions {
	margin-top: 32px;
	text-align: center;
}
@media (max-width: 1100px) {
	.pb-use-cases__grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 900px) {
	.pb-use-cases {
		padding: 48px 0 40px;
	}
	.pb-use-cases__grid,
	.pb-use-cases__grid--cols-4 {
		grid-template-columns: minmax(0, 1fr);
		max-width: 520px;
	}
}

/* ── Feature-Spotlight (feature_spotlight) ──
   Nutzen links, Produktausschnitt rechts. Zwei Farbfassungen über die
   Modifier --hell (Standard, weiß-blauer Verlauf) und --blau (dunkler
   Streifen); die Bildseite steuert --image-left/--image-right. Auf dem Handy
   steht der Text immer über dem Bild. */
.pb-spotlight {
	padding: 64px 0;
}
.pb-spotlight--hell {
	background: linear-gradient(135deg, #ffffff 0%, #eff6fc 55%, #e4eff8 100%);
}
.pb-spotlight--blau {
	background: linear-gradient(135deg, #00538f 0%, #013b6e 55%, #012c53 100%);
}
.pb-spotlight__grid {
	display: grid;
	grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
	gap: 52px;
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
/* Bild links: Reihenfolge im Markup bleibt Text → Bild (gut für
   Screenreader), nur die Spalten werden getauscht. */
.pb-spotlight--image-left .pb-spotlight__grid {
	grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
}
.pb-spotlight--image-left .pb-spotlight__copy {
	order: 2;
}
.pb-spotlight--image-left .pb-spotlight__media {
	order: 1;
}
.pb-spotlight__kicker {
	margin: 0 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0087c8;
}
.pb-spotlight__headline {
	margin: 0 0 24px;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	font-weight: 800;
	line-height: 1.2;
	color: #013b6e;
}
.pb-spotlight__accent {
	display: block;
	color: #0087c8;
}
.pb-spotlight__intro {
	margin: 0 0 24px;
	color: #6d6d6d;
	line-height: 1.7;
}
.pb-spotlight__intro p {
	margin: 0 0 1em;
}
.pb-spotlight__intro p:last-child {
	margin-bottom: 0;
}
.pb-spotlight__point {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.pb-spotlight__point + .pb-spotlight__point {
	margin-top: 20px;
}
.pb-spotlight__icon {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #e8f4fc;
	color: #0087c8;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pb-spotlight__icon .pb-icon {
	width: 22px;
	height: 22px;
}
.pb-spotlight__point-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: #013b6e;
}
.pb-spotlight__point-text {
	margin: 3px 0 0;
	color: #6d6d6d;
	line-height: 1.55;
}
.pb-spotlight__actions {
	margin-top: 30px;
}
.pb-spotlight__shot {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border: 1px solid #dbe6f0;
	border-radius: 16px;
	box-shadow: 0 14px 32px rgba(1, 59, 110, .12);
}
/* Dunkle Fassung: Texte aufhellen, Symbolflächen und Bildrahmen anpassen. */
.pb-spotlight--blau .pb-spotlight__kicker {
	color: #8fd4f5;
}
.pb-spotlight--blau .pb-spotlight__headline {
	color: #ffffff;
}
.pb-spotlight--blau .pb-spotlight__accent {
	color: #ffbd03;
}
.pb-spotlight--blau .pb-spotlight__intro,
.pb-spotlight--blau .pb-spotlight__point-text {
	color: rgba(255, 255, 255, .72);
}
.pb-spotlight--blau .pb-spotlight__point-title {
	color: #ffffff;
}
.pb-spotlight--blau .pb-spotlight__icon {
	background: rgba(143, 212, 245, .16);
	color: #8fd4f5;
}
.pb-spotlight--blau .pb-spotlight__shot {
	border-color: rgba(255, 255, 255, .22);
	box-shadow: 0 18px 40px rgba(1, 35, 64, .28);
}
@media (max-width: 900px) {
	.pb-spotlight {
		padding: 48px 0;
	}
	.pb-spotlight__grid,
	.pb-spotlight--image-left .pb-spotlight__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.pb-spotlight--image-left .pb-spotlight__copy,
	.pb-spotlight--image-left .pb-spotlight__media {
		order: initial;
	}
}

/* ── Karten-Reihe, Variante „compact" (card_grid, variant = compact) ──
   Kleines Bild links, Text linksbündig, Textlink statt Button — für
   Funktionslisten neben einem größeren Abschnitt. Die Standard-Variante
   („cards") bleibt unverändert. */
.pb-card-grid--compact {
	gap: 36px 32px;
}
.pb-card--compact {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.pb-card__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #e8f4fc;
	color: #0087c8;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pb-card__icon .pb-icon {
	width: 22px;
	height: 22px;
}
/* In der Karten-Variante steht das Symbol zentriert über dem Text. */
.pb-card--cards .pb-card__icon {
	margin: 28px auto 0;
}
.pb-card--compact .pb-card__media {
	flex: 0 0 40px;
}
.pb-card--compact .pb-card__media img {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	object-fit: contain;
	background: #f3f8fc;
	padding: 6px;
}
.pb-card--compact .pb-card__body {
	align-items: flex-start;
	text-align: left;
	gap: 6px;
	padding: 0;
}
.pb-card--compact .pb-card__headline {
	font-size: 1.05rem;
	font-weight: 700;
}
.pb-card--compact .pb-card__text {
	font-size: .95rem;
	line-height: 1.55;
}
.pb-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	font-size: .95rem;
	font-weight: 700;
	color: #0087c8;
	text-decoration: none;
}
.pb-card__link:hover {
	color: #013b6e;
}
.pb-card__link:hover .pb-btn__arr {
	transform: translateX(3px);
}

/* ── News-Teaser (news_teaser) ──
   Schmaler Streifen für ein bis drei befristete Meldungen, gedacht direkt
   unter dem Hero. Bewusst flacher als die Inhalts-Abschnitte: heller Grund,
   eine Linie nach unten, keine Karten-Schatten — der Streifen soll auffallen,
   ohne wie ein eigener Seitenabschnitt zu wirken. Welche Meldungen überhaupt
   erscheinen, entscheidet das Template über die Datumsfelder. */
.pb-news {
	background: #f3f8fc;
	border-bottom: 1px solid #dbe6f0;
	padding: 18px 0 20px;
}
.pb-news__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}
.pb-news__label {
	margin: 0 0 12px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0087c8;
}
.pb-news__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px 28px;
}
.pb-news__list--count-1 {
	grid-template-columns: minmax(0, 1fr);
}
.pb-news__list--count-2 {
	grid-template-columns: repeat(2, 1fr);
}
.pb-news__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}
.pb-news__icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #ffffff;
	border: 1px solid #dbe6f0;
	color: #0087c8;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pb-news__icon .pb-icon {
	width: 19px;
	height: 19px;
}
.pb-news__body {
	min-width: 0;
}
.pb-news__badge {
	display: inline-block;
	margin-bottom: 4px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #013b6e;
	background: #ffbd03;
	border-radius: 999px;
	padding: 3px 9px;
}
.pb-news__headline {
	margin: 0;
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.35;
	color: #013b6e;
}
.pb-news__text {
	margin: 2px 0 0;
	font-size: .88rem;
	line-height: 1.5;
	color: #6d6d6d;
}
.pb-news__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: .88rem;
	font-weight: 700;
	color: #0087c8;
	text-decoration: none;
}
.pb-news__link:hover {
	color: #013b6e;
}
.pb-news__link:hover .pb-btn__arr {
	transform: translateX(3px);
}
/* Zusatz nur für Screenreader — „öffnet in neuem Fenster". */
.pb-news__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (max-width: 900px) {
	.pb-news__list,
	.pb-news__list--count-2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* ── Vorher/Nachher-Vergleich (before_after) ──
   Zwei Bilder nebeneinander, Pfeil dazwischen; das „Nachher" sitzt auf
   einer blauen Fläche. Auf dem Handy untereinander, Pfeil nach unten. */
.pb-before-after {
	max-width: 1180px;
	margin: 0 auto;
	padding: 64px 24px;
}
.pb-before-after__head {
	max-width: 900px;
	margin: 0 auto 40px;
	text-align: center;
}
.pb-before-after__kicker {
	margin: 0 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0087c8;
}
.pb-before-after__headline {
	margin: 0 0 20px;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 800;
	line-height: 1.25;
	color: #013b6e;
}
.pb-before-after__intro {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #6d6d6d;
}
.pb-before-after__intro p {
	margin: 0 0 1em;
}
.pb-before-after__intro p:last-child {
	margin-bottom: 0;
}
.pb-before-after__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}
.pb-before-after__item {
	margin: 0;
	text-align: center;
}
.pb-before-after__frame {
	padding: 16px;
	border-radius: 16px;
	background: #f2f5f8;
}
.pb-before-after__item--after .pb-before-after__frame {
	background: linear-gradient(135deg, #013b6e 0%, #0087c8 100%);
	box-shadow: 0 16px 40px rgba(1, 59, 110, .18);
}
.pb-before-after__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}
.pb-before-after__label {
	margin-top: 16px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #6d6d6d;
}
.pb-before-after__item--after .pb-before-after__label {
	color: #013b6e;
}
.pb-before-after__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #0087c8;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
}
@media (max-width: 767px) {
	.pb-before-after {
		padding: 48px 16px;
	}
	.pb-before-after__grid {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 16px;
	}
	.pb-before-after__item {
		width: 100%;
	}
	.pb-before-after__arrow {
		transform: rotate(90deg);
	}
}

/* ── Vergleichstabelle (comparison) ──
   Echte Tabelle mit zwei Vergleichsspalten; die rechte Spalte (b) trägt den
   blauen Akzent wie das „Nachher" bei before_after. Unter 768px wird jede
   Zeile zur Karte, die Spaltenköpfe stehen dann per data-label vor den
   Werten — keine horizontale Scrollleiste. */
.pb-comparison {
	max-width: 1180px;
	margin: 0 auto;
	padding: 64px 24px;
}
.pb-comparison__head {
	max-width: 900px;
	margin: 0 auto 40px;
	text-align: center;
}
.pb-comparison__kicker {
	margin: 0 0 12px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #0087c8;
}
.pb-comparison__headline {
	margin: 0 0 20px;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 800;
	line-height: 1.25;
	color: #013b6e;
}
.pb-comparison__intro,
.pb-comparison__note {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #6d6d6d;
}
.pb-comparison__intro p,
.pb-comparison__note p {
	margin: 0 0 1em;
}
.pb-comparison__intro p:last-child,
.pb-comparison__note p:last-child {
	margin-bottom: 0;
}
/* Überschrift steht sichtbar im Kopf; die caption nur für Screenreader. */
.pb-comparison__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.pb-comparison__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	font-size: 1rem;
	line-height: 1.55;
	color: #1c1c1c;
}
.pb-comparison__table th,
.pb-comparison__table td {
	padding: 16px 20px;
	border: 0;
	border-bottom: 1px solid #e3e8ee;
	text-align: left;
	vertical-align: top;
}
.pb-comparison__corner {
	width: 24%;
}
.pb-comparison__table thead th {
	padding-top: 18px;
	padding-bottom: 18px;
	border-bottom: 2px solid #e3e8ee;
	font-size: .95rem;
	font-weight: 800;
	color: #6d6d6d;
}
.pb-comparison__table thead .pb-comparison__col--b {
	border-radius: 16px 16px 0 0;
	border-bottom-color: #0087c8;
	background: linear-gradient(135deg, #013b6e 0%, #0087c8 100%);
	color: #fff;
}
.pb-comparison__criterion {
	font-weight: 700;
	color: #013b6e;
}
.pb-comparison__cell--a {
	color: #6d6d6d;
}
.pb-comparison__cell--b {
	background: #eef6fb;
	font-weight: 600;
	color: #013b6e;
}
.pb-comparison__row:last-child .pb-comparison__cell--b {
	border-radius: 0 0 16px 16px;
}
.pb-comparison__row:last-child th,
.pb-comparison__row:last-child td {
	border-bottom: 0;
}
.pb-comparison__note {
	max-width: 900px;
	margin: 32px auto 0;
	text-align: center;
}
@media (max-width: 767px) {
	.pb-comparison {
		padding: 48px 16px;
	}
	.pb-comparison__table,
	.pb-comparison__table tbody,
	.pb-comparison__row,
	.pb-comparison__table th,
	.pb-comparison__table td {
		display: block;
		box-sizing: border-box;
		width: 100%;
	}
	.pb-comparison__table thead {
		display: none;
	}
	.pb-comparison__row {
		margin-bottom: 16px;
		overflow: hidden;
		border-radius: 16px;
		background: #f2f5f8;
	}
	.pb-comparison__table .pb-comparison__criterion {
		padding: 16px 16px 8px;
		border-bottom: 0;
		font-size: 1.05rem;
	}
	.pb-comparison__table .pb-comparison__cell {
		padding: 12px 16px;
		border-bottom: 0;
	}
	.pb-comparison__row:last-child .pb-comparison__cell--b {
		border-radius: 0;
	}
	.pb-comparison__cell::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: #6d6d6d;
	}
	.pb-comparison__cell--b {
		background: #eef6fb;
		box-shadow: inset 4px 0 0 #0087c8;
	}
	.pb-comparison__cell--b::before {
		color: #0087c8;
	}
}

/* ── Listen-Reset gegen Divi ──
   Divi gibt Listen im Seiteninhalt Aufzählungspunkte und Einzug
   (".entry-content ul { list-style-type: disc; padding: 0 0 23px 1em }",
   Spezifität 0,1,1). Die Einzelklassen unserer Listen (0,1,0) verlieren
   dagegen — sichtbar z. B. als Punkte vor den Chips in use_cases. Deshalb
   hier mit Eltern-Klasse + Element (0,2,1) zurücksetzen; das padding-top
   der jeweiligen Liste bleibt unberührt. */
.pb-use-cases ul.pb-uc__chips,
.pb-pricing ul.pb-pricing__features,
.pb-references ul.pb-references__track,
.pb-news ul.pb-news__list {
	list-style: none;
	padding-left: 0;
	padding-bottom: 0;
}
.pb-use-cases ul.pb-uc__chips > li,
.pb-pricing ul.pb-pricing__features > li,
.pb-references ul.pb-references__track > li,
.pb-news ul.pb-news__list > li {
	list-style: none;
}