/**
 * Bürostühle (/buerostuehle/), OpenProject #2031.
 *
 * Nur Bausteine, die Elementor nicht selbst gestaltet: Einstieg, Leistungsband, Sprungnavigation, Hinweiskästen,
 * Tabellen, Fragen, Bildformate in Karten, Listen, Kontakt und Quellen. Farben und Schrift aus dem Elementor-Kit wie
 * auf /hag-buerostuehle/ und /vela-trippelstuhl/: Akzent #697787, Creme #F5F3F1, Salbei #D5D9DE, DM Sans.
 * Alle Regeln hängen an .ps-bs, nichts wirkt außerhalb der Seite.
 */

.ps-bs {
	--ps-akzent: var(--e-global-color-accent, #697787);
	--ps-creme: var(--e-global-color-secondary, #F5F3F1);
	--ps-salbei: #D5D9DE;
	--ps-linie: #C9CED4;
	--ps-stein: #DEDBD1;
	/* Kleine Schrift auf hellem Grund: Akzent schafft auf Creme nur 4,1 : 1, Schiefer 5,3 bis 7,5 : 1 */
	--ps-schiefer: #4A5663;
}

/* Sprungziele liegen nicht unter dem fixierten Header (Header-Höhe wie in footer-sitemap.css) */
.ps-bs [id] {
	scroll-margin-top: 110px;
}

.ps-bs .elementor-widget-text-editor p:last-child,
.ps-bs .elementor-widget-text-editor ul:last-child,
.ps-bs .elementor-widget-text-editor ol:last-child,
.ps-bs .elementor-widget-text-editor dl:last-child {
	margin-bottom: 0;
}

.ps-bs .ps-eyebrow p {
	margin: 0;
}

/* HTML-Widgets erben sonst nur die Kit-Grundschrift (500), Fließtext auf der Website ist 300 */
.ps-bs .elementor-widget-html {
	font-family: "DM Sans", sans-serif;
	font-weight: 300;
	color: #000;
}

.ps-bs a:focus-visible,
.ps-bs summary:focus-visible,
.ps-bs .ps-tabelle:focus-visible {
	outline: 2px solid var(--ps-akzent);
	outline-offset: 3px;
}

/* ---------- Textlinks (Kit setzt 18 px und Akzent, auf Creme unter 4,5 : 1) ---------- */

.ps-bs .elementor-widget-text-editor a,
.ps-bs .elementor-widget-html a,
.ps-bs .widget-image-caption a {
	color: #000;
	font-size: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
}

.ps-bs .elementor-widget-text-editor a:hover,
.ps-bs .elementor-widget-html a:hover,
.ps-bs .widget-image-caption a:hover {
	color: var(--ps-schiefer);
}

.ps-bs .ps-klein a,
.ps-bs .widget-image-caption a {
	font-weight: 400;
}

.ps-bs .ps-textlink a {
	font-weight: 600;
}

.ps-bs .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ps-bs strong,
.ps-bs b {
	font-weight: 600;
}

/* ---------- Einstieg ---------- */

.ps-bs .ps-zurueck {
	margin: 0;
	font-size: 14px;
}

.ps-bs .ps-lead p {
	color: #000;
}

.ps-bs .ps-hero-bild figure {
	margin: 0;
}

.ps-bs .ps-hero-bild img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: 600px;
	border-radius: 10px;
	object-fit: cover;
	object-position: 62% center;
}

.ps-bs .ps-hero-bild figcaption {
	margin-top: 10px;
	color: var(--ps-schiefer);
	font-size: 13px;
	line-height: 1.5;
	text-align: right;
}

@media (max-width: 767px) {
	.ps-bs .ps-hero-bild img {
		aspect-ratio: 4 / 3;
	}

	.ps-bs .ps-hero-bild figcaption {
		text-align: left;
	}
}

/* ---------- Leistungsband ---------- */

.ps-bs .ps-band {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #000;
}

.ps-bs .ps-band strong {
	display: block;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.ps-bs .ps-band span {
	display: block;
	color: var(--ps-schiefer);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
}

@media (max-width: 1024px) {
	.ps-bs .ps-band {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Kurzüberblick und Sprungnavigation ---------- */

.ps-bs .ps-ueberblick ul {
	margin: 0;
	padding-left: 20px;
}

.ps-bs .ps-ueberblick li + li {
	margin-top: 6px;
}

.ps-bs .ps-sprungnav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	padding: 22px 0;
	border-top: 1px solid var(--ps-linie);
	border-bottom: 1px solid var(--ps-linie);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

.ps-bs .elementor-widget-html .ps-sprungnav a {
	color: #000;
	font-weight: 400;
	text-decoration: none;
}

.ps-bs .elementor-widget-html .ps-sprungnav a:hover,
.ps-bs .elementor-widget-html .ps-sprungnav a:focus-visible {
	color: var(--ps-schiefer);
	text-decoration: underline;
	text-underline-offset: .3em;
}

/* ---------- Kopfzeilen, Kapitel und Kennzeichnungen ---------- */

.ps-bs .ps-kopf-text p {
	color: var(--ps-schiefer);
}

.ps-bs .ps-kapitel {
	margin-top: 32px;
}

.ps-bs .ps-label p {
	margin: 0;
}

/* Kartennummer 1, 2, 3 mit Linie wie in der Vorlage */
.ps-bs .ps-nummer p {
	display: inline-block;
	min-width: 28px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--ps-akzent);
}

/* Bewegungsprinzipien: farbiger Balken über der Überschrift (::before am Container belegt Elementor) */
.ps-bs .ps-mode-card > .elementor-widget-heading:first-child .elementor-heading-title::before {
	content: "";
	display: block;
	width: 72px;
	height: 3px;
	margin-bottom: 18px;
	background: var(--ps-akzent);
}

.ps-bs .ps-mode-card.ps-stabil > .elementor-widget-heading:first-child .elementor-heading-title::before {
	background: #A39E8F;
}

/* Hersteller: Zusatz in der Überschrift */
.ps-bs .ps-brand-card .elementor-heading-title span {
	display: block;
	margin-top: 6px;
	color: var(--ps-schiefer);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
}

/* ---------- Hinweise ---------- */

.ps-bs .ps-hinweis-titel {
	margin-bottom: 6px;
	color: #000;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

.ps-bs .ps-hinweis {
	margin: 0;
	padding: 18px 22px;
	border-left: 3px solid var(--ps-akzent);
	background: var(--ps-creme);
	color: #000;
	line-height: 1.6;
}

.ps-bs--sitzsysteme .ps-hinweis,
.ps-bs--besondere-anforderungen .ps-hinweis,
.ps-bs--24-stunden-stuhl-auswahl .ps-hinweis,
.ps-bs--buerostuhl-zuschuss-kostenuebernahme .ps-hinweis {
	background: #fff;
}

.ps-bs .ps-warnung {
	position: relative;
	margin: 0;
	padding: 16px 18px 16px 54px;
	border: 1px solid var(--ps-linie);
	border-radius: 8px;
	background: var(--ps-creme);
	font-size: 16px;
	line-height: 1.55;
}

.ps-bs .ps-warnung::before {
	content: "i";
	position: absolute;
	top: 16px;
	left: 18px;
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	border: 1px solid #000;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.ps-bs .ps-caveat p {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--ps-linie);
	color: var(--ps-schiefer);
	font-size: 15px;
	line-height: 1.55;
}

.ps-bs .ps-procon {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ps-bs .ps-procon p {
	margin: 0;
	color: var(--ps-schiefer);
	font-size: 15px;
	line-height: 1.5;
}

.ps-bs .ps-procon .ps-pc-titel {
	margin-bottom: 4px;
	color: #000;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.ps-bs .ps-procon {
		grid-template-columns: 1fr;
	}
}

.ps-bs .ps-balance {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 14px;
	align-items: center;
	color: var(--ps-schiefer);
	font-size: 15px;
	font-weight: 600;
}

.ps-bs .ps-balance-linie {
	height: 6px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--ps-akzent), var(--ps-stein));
}

/* ---------- Listen ---------- */

.ps-bs .ps-haken {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
}

.ps-bs .ps-haken li {
	position: relative;
	padding-left: 26px;
}

.ps-bs .ps-haken li + li {
	margin-top: 8px;
}

.ps-bs .ps-haken li::before {
	content: "";
	position: absolute;
	top: .55em;
	left: 2px;
	width: 10px;
	height: 5px;
	border-bottom: 2px solid var(--ps-akzent);
	border-left: 2px solid var(--ps-akzent);
	transform: rotate(-45deg);
}

.ps-bs .ps-schritte {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
	counter-reset: ps-liste;
}

.ps-bs .ps-schritte li {
	position: relative;
	padding: 16px 0 16px 52px;
	border-top: 1px solid var(--ps-linie);
	counter-increment: ps-liste;
}

.ps-bs .ps-schritte li:last-child {
	border-bottom: 1px solid var(--ps-linie);
}

.ps-bs .ps-schritte li::before {
	content: counter(ps-liste, decimal-leading-zero);
	position: absolute;
	top: 19px;
	left: 0;
	color: var(--ps-schiefer);
	font-size: 15px;
	font-weight: 700;
}

.ps-bs .ps-achsen {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	margin: 0 0 1em;
}

.ps-bs .ps-achsen dt {
	font-weight: 700;
}

.ps-bs .ps-achsen dd {
	margin: 0;
	color: var(--ps-schiefer);
}

/* ---------- Tabellen ---------- */

.ps-bs .ps-tabelle {
	/* Bezugspunkt für die versteckten Screenreader-Texte, sonst verbreitern sie die Seite */
	position: relative;
	overflow-x: auto;
	border: 1px solid var(--ps-linie);
	border-radius: 8px;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.ps-bs .ps-tabelle table {
	width: 100%;
	min-width: 760px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.ps-bs .ps-modelltabelle table {
	min-width: 900px;
}

.ps-bs .ps-tabelle caption {
	padding: 16px 20px;
	background: var(--ps-creme);
	color: #000;
	font-size: 16px;
	font-weight: 600;
	text-align: left;
}

.ps-bs .ps-tabelle th,
.ps-bs .ps-tabelle td {
	padding: 16px 20px;
	border: 0;
	border-top: 1px solid var(--ps-linie);
	background: transparent;
	color: #000;
	text-align: left;
	vertical-align: top;
}

.ps-bs .ps-tabelle thead th {
	background: var(--ps-salbei);
	font-size: 14px;
	font-weight: 700;
}

.ps-bs .ps-tabelle tbody th {
	min-width: 170px;
	background: #FAFAF9;
	font-weight: 600;
}

.ps-bs .ps-tabelle tbody tr:hover > td,
.ps-bs .ps-tabelle tbody tr:nth-child(odd) > td {
	background: transparent;
}

.ps-bs .ps-tabelle a {
	font-weight: 600;
}

.ps-bs .ps-scroll-hinweis {
	display: none;
}

@media (max-width: 1024px) {
	.ps-bs .ps-scroll-hinweis {
		display: block;
	}
}

/* ---------- Fragen ---------- */

.ps-bs .ps-faq-liste {
	max-width: 940px;
}

.ps-bs .ps-faq + .ps-faq,
.ps-bs .ps-faq-liste > .elementor-element + .elementor-element {
	margin-top: 0;
}

.ps-bs .ps-faq .ps-frage:first-child {
	border-top: 1px solid var(--ps-linie);
}

.ps-bs .ps-frage {
	border-bottom: 1px solid var(--ps-linie);
}

.ps-bs .ps-frage summary,
.ps-bs .ps-quellen summary {
	display: flex;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-start;
	padding: 18px 4px 18px 0;
	color: #000;
	font-family: "DM Sans", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.ps-bs .ps-frage summary::-webkit-details-marker,
.ps-bs .ps-quellen summary::-webkit-details-marker {
	display: none;
}

.ps-bs .ps-frage summary::after,
.ps-bs .ps-quellen summary::after {
	content: "+";
	content: "+" / "";
	flex: 0 0 auto;
	color: var(--ps-akzent);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.1;
}

.ps-bs .ps-frage[open] summary::after,
.ps-bs .ps-quellen[open] summary::after {
	content: "\2212";
	content: "\2212" / "";
}

.ps-bs .ps-frage summary:hover,
.ps-bs .ps-frage[open] summary {
	color: var(--ps-schiefer);
}

.ps-bs .ps-antwort {
	padding: 0 40px 22px 0;
	font-size: 17px;
	line-height: 1.6;
}

.ps-bs .ps-antwort p,
.ps-bs .ps-antwort ul {
	margin: 0 0 10px;
}

.ps-bs .ps-antwort > :last-child {
	margin-bottom: 0;
}

.ps-bs .ps-antwort ul {
	padding-left: 22px;
}

.ps-bs .ps-antwort li + li {
	margin-top: 6px;
}

.ps-bs .ps-antwort .ps-quelle {
	color: var(--ps-schiefer);
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.ps-bs .ps-faq-hinweis p {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--ps-linie);
	color: var(--ps-schiefer);
	font-size: 16px;
}

@media (max-width: 767px) {
	.ps-bs .ps-frage summary {
		font-size: 17px;
	}

	.ps-bs .ps-antwort {
		padding-right: 0;
	}
}

/* ---------- Bilder ---------- */

.ps-bs .elementor-widget-image figure.wp-caption {
	margin: 0;
}

.ps-bs .elementor-widget-image .widget-image-caption {
	margin: 0;
	padding: 12px 2px 0;
	color: var(--ps-schiefer);
	font-size: 14px;
	font-style: normal;
	line-height: 1.55;
	text-align: left;
}

.ps-bs .widget-image-caption strong {
	display: block;
	margin-bottom: 4px;
	color: #000;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.ps-bs .widget-image-caption span {
	display: block;
}

/* Funktions- und Detailbilder: einheitliche Fläche, ganzes Motiv sichtbar */
.ps-bs .ps-detail-bild img,
.ps-bs .ps-paar-bild img,
.ps-bs .ps-anwendung-bild img,
.ps-bs .ps-hersteller-bild img {
	display: block;
	width: 100%;
	border: 1px solid var(--ps-linie);
	border-radius: 8px;
	background: #fff;
	object-fit: contain;
}

.ps-bs .ps-detail-bild img {
	height: 300px;
}

.ps-bs .ps-detail-mode img {
	height: 320px;
}

.ps-bs .ps-detail-dark img {
	background: #000;
}

.ps-bs .ps-polster-bild img,
.ps-bs .ps-paar-bild img {
	height: 200px;
}

.ps-bs .ps-detail-boxspring img {
	object-fit: cover;
	object-position: center 54%;
}

.ps-bs .ps-anwendung-bild img {
	height: auto;
	aspect-ratio: 3 / 2;
	padding: 12px;
}

.ps-bs .ps-raster--application-gallery > .elementor-element:first-child img {
	padding: 0;
	object-fit: cover;
}

.ps-bs .ps-hersteller-bild a {
	display: block;
}

.ps-bs .ps-hersteller-bild img {
	height: 250px;
	padding: 10px;
	border: 0;
	transition: transform .2s ease;
}

.ps-bs .ps-hersteller-bild a:hover img {
	transform: scale(1.025);
}

.ps-bs .ps-hersteller-bild .widget-image-caption {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--ps-linie);
	font-size: 13px;
}

.ps-bs .ps-hersteller-bild .widget-image-caption strong {
	font-size: 14px;
	font-weight: 500;
}

.ps-bs .ps-paar-text p {
	margin: 0;
	font-size: 14px;
}

.ps-bs .ps-paar-text strong {
	display: block;
	color: #000;
}

@media (max-width: 767px) {
	.ps-bs .ps-detail-bild img,
	.ps-bs .ps-detail-mode img {
		height: 260px;
	}

	.ps-bs .ps-polster-bild img {
		height: 220px;
	}

	.ps-bs .ps-hersteller-bild img {
		height: 260px;
	}
}

/* Arbeitsstuhl Bimos NEON: Bild neben Erläuterung */
.ps-bs .ps-arbeitsstuhl {
	border-left: 3px solid var(--ps-akzent);
	background: var(--ps-creme);
}

.ps-bs .ps-arbeitsstuhl-bild img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ps-bs .ps-figur-text p {
	margin: 0 0 8px;
	color: var(--ps-schiefer);
	font-size: 16px;
	line-height: 1.55;
}

.ps-bs .ps-figur-text .ps-figur-titel {
	color: #000;
	font-size: 19px;
	font-weight: 600;
}

.ps-bs .ps-figur-text .ps-figur-quelle {
	margin: 0;
	font-size: 13px;
}

/* ---------- Berater ---------- */

.ps-bs .ps-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	object-fit: cover;
	object-position: 50% 28%;
}

.ps-bs .ps-zitat {
	margin: 0 0 14px;
	color: #000;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.35;
}

@media (max-width: 767px) {
	.ps-bs .ps-zitat {
		font-size: 21px;
	}
}

/* ---------- Kontakt ---------- */

.ps-bs .ps-adresse p {
	margin: 0 0 12px;
	line-height: 1.7;
}

.ps-bs .ps-adresse a {
	font-weight: 600;
}

/* ---------- Quellen und Bildnachweise ---------- */

.ps-bs .ps-quellen {
	border-bottom: 1px solid var(--ps-linie);
}

.ps-bs .ps-quellen:first-child {
	border-top: 1px solid var(--ps-linie);
}

.ps-bs .ps-quellen summary {
	font-size: 16px;
}

.ps-bs .ps-quellen p {
	margin: 0 0 14px;
	color: var(--ps-schiefer);
	font-size: 15px;
	line-height: 1.55;
}

.ps-bs .ps-quellenliste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px 28px;
	margin: 0 0 18px;
	padding-left: 18px;
	color: var(--ps-schiefer);
	font-size: 14px;
	line-height: 1.5;
}

.ps-bs .ps-quellenliste a {
	overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
	.ps-bs .ps-quellenliste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ps-bs .ps-quellenliste {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ps-bs .ps-hersteller-bild img {
		transition: none;
	}

	.ps-bs .ps-hersteller-bild a:hover img {
		transform: none;
	}
}
