/**
 * basement solutions – Startseite (Entwurf B)
 * Detail-Layer zur nativen Elementor-Umsetzung (Seite 432) plus Kopf/Fuß site-weit.
 *
 * WICHTIG: Hier steht KEIN Layout. Spalten, Abstände, Hintergründe, Rahmen und
 * Typografie sitzen in den Elementor-Container- und Widget-Einstellungen und
 * bleiben im Editor bearbeitbar. Diese Datei deckt nur ab, was sich über
 * Elementor-Controls nicht ausdrücken lässt: Bildzuschnitte, Chips, Marker,
 * Unterstriche, Tabellensatz, mitlaufende Marginalie, Fokus-Ringe.
 */

/* ── Grundton der Seite ────────────────────────────────────── */
/* Hello Elementor setzt den Body hell; die Seite ist durchgehend dunkel. */
body.page-id-432 {
	background: #0c0c0c;
	color-scheme: dark;
	/* Sprungmarken landen sonst unter der klebenden Kopfzeile. */
	scroll-padding-top: 96px;
}

/* ── Eyebrow: Label mit Goldkante ────────────────────────────── */
/* Elementor legt Rahmen auf den ganzen Widget-Block; die Kante soll aber genau
   so breit sein wie der Text. */
.bs-eyebrow p {
	display: inline-block;
	margin: 0;
	padding-bottom: 6px;
	border-bottom: 4px solid #f5c518;
}

/* ── Bildzuschnitte ──────────────────────────────────────── */
/* Elementor liefert Bilder in Originalproportion aus. Die Seite braucht feste
   Formate, damit die Bänder ihre Höhe halten. */
.bs-img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.bs-img--hero img {
	aspect-ratio: 16 / 6;
	object-position: 50% 44%;
}

.bs-img--svc img {
	aspect-ratio: 4 / 3;
}

.bs-img--portrait img {
	aspect-ratio: 3 / 4;
	object-position: 50% 50%;
}

/* Das Werkstattmotiv ist sehr dunkel belichtet — Helligkeit angehoben, damit es
   auf #17171b als Bild lesbar bleibt. */
.bs-img--werkbank img {
	object-position: 50% 62%;
	filter: brightness( 1.45 ) contrast( .96 );
}

.bs-img--flow img {
	object-position: 50% 32%;
}

.bs-img--founder img {
	object-position: 50% 24%;
}

.bs-img--band img {
	aspect-ratio: 20 / 7;
}

.bs-img--care img {
	aspect-ratio: 16 / 6;
	object-position: 50% 40%;
}

/* Referenz-Screenshots: oben ausgerichtet, damit die Kopfzeile der Seite zu
   sehen ist — darum geht es in der Kachel. */
.bs-img--ref img {
	aspect-ratio: 16 / 10;
	object-position: 50% 0;
}

/* Bildunterschrift des randlosen Hero-Bands auf Inhaltsbreite einrücken. */
.bs-heroshot .elementor-widget-image figcaption {
	max-width: 1240px;
	margin: 0 auto;
	padding: 10px 56px 0;
}

@media ( max-width: 1024px ) {
	.bs-img--portrait img {
		aspect-ratio: 16 / 9;
		object-position: 50% 30%;
	}

	.bs-heroshot .elementor-widget-image figcaption {
		padding: 10px 40px 0;
	}
}

@media ( max-width: 560px ) {
	.bs-img--hero img,
	.bs-img--band img,
	.bs-img--care img {
		aspect-ratio: 4 / 3;
	}

	.bs-heroshot .elementor-widget-image figcaption {
		padding: 10px 20px 0;
	}
}

/* ── Gold unterstrichene Textlinks ──────────────────────────── */
.bs-prose a,
a.bs-ilink,
.bs-way a {
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	padding-bottom: 1px;
	box-shadow: inset 0 -3px 0 #f5c518;
	transition: box-shadow .15s, color .15s;
}

.bs-prose a:hover,
a.bs-ilink:hover,
.bs-way a:hover {
	color: #0c0c0c;
	box-shadow: inset 0 -1.2em 0 #f5c518;
}

.bs-way p {
	margin: 0;
}

/* ── Schlagworte unter den Leistungen ────────────────────────── */
.bs-tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-tags li {
	padding: 5px 10px;
	border: 1px solid #7c7c86;
	color: #c2c2c9;
	letter-spacing: .04em;
}

/* ── Nummerierung im Digitalisierungs-Menü ────────────────────── */
/* Die 01–04 laufen als CSS-Zähler mit: wer im Editor eine Position verschiebt
   oder löscht, bekommt automatisch die richtige Nummer. */
.bs-acc--numbered {
	counter-reset: bs-case;
}

.bs-acc--numbered .e-n-accordion-item {
	counter-increment: bs-case;
}

.bs-acc--numbered .e-n-accordion-item-title-text::before {
	content: counter( bs-case, decimal-leading-zero );
	display: inline-block;
	width: 26px;
	margin-right: 16px;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	color: #9a9aa3;
}

.bs-acc--numbered .e-n-accordion-item[open] .e-n-accordion-item-title-text::before {
	color: #f5c518;
}

/* ── Beispielansicht BoltBack (erfundene Werte) ─────────────────── */
table.bs-demo {
	width: 100%;
	border: 1px solid #3a3a42;
	background: #1b1b1f;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

table.bs-demo caption {
	padding: 9px 14px;
	border-bottom: 1px solid #3a3a42;
	color: #9a9aa3;
	text-align: left;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

table.bs-demo th,
table.bs-demo td {
	padding: 9px 14px;
	border-bottom: 1px solid #3a3a42;
	text-align: right;
	font-size: 13px;
	font-weight: 400;
	color: #c2c2c9;
}

table.bs-demo th:first-child,
table.bs-demo td:first-child {
	text-align: left;
}

table.bs-demo thead th {
	color: #9a9aa3;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

table.bs-demo tfoot th,
table.bs-demo tfoot td {
	border-bottom: 0;
	color: #ffffff;
	font-weight: 600;
}

@media ( max-width: 560px ) {
	table.bs-demo caption,
	table.bs-demo th,
	table.bs-demo td {
		padding: 8px 10px;
		font-size: 12px;
	}
}

/* ── Referenz-Kacheln ──────────────────────────────────── */
.bs-ref {
	transition: border-color .15s;
}

.bs-ref:hover {
	border-color: #f5c518;
}

.bs-ref__go p {
	margin: 0;
}

.bs-ref__go .bs-go {
	box-shadow: inset 0 -3px 0 #f5c518;
	transition: box-shadow .15s, color .15s;
}

.bs-ref:hover .bs-ref__go .bs-go {
	color: #0c0c0c;
	box-shadow: inset 0 -1.1em 0 #f5c518;
}

.bs-ref__url p {
	margin: 0;
}

/* ── Care-Pläne ──────────────────────────────────────── */
.bs-plan__flag p {
	margin: 0;
}

.bs-plan__flag .bs-flag {
	display: inline-block;
	padding: 4px 9px;
	background: #f5c518;
	color: #0c0c0c;
}

/* Die Plan-Karten ohne Fahne behalten dieselbe Grundlinie wie die gewählte. */
.bs-plan__flag--empty {
	visibility: hidden;
}

/* Der Knopf sitzt unten bündig, egal wie lang die Liste darüber ist. */
.bs-plan .bs-plan__btn {
	margin-top: auto;
}

/* ── Mitlaufende Marginalie (FAQ) ─────────────────────────── */
@media ( min-width: 1025px ) {
	.bs-sticky {
		position: sticky;
		top: 120px;
		align-self: flex-start;
	}
}

/* ── Kopfzeile (site-weit) ──────────────────────────────── */
.bs-head {
	backdrop-filter: saturate( 1.4 ) blur( 6px );
}

.bs-brand p,
.bs-head__call p {
	margin: 0;
}

.bs-brand a,
.bs-head__call a {
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
}

/* „solutions“ trägt die Goldkante, „basement“ nicht. */
.bs-brand em {
	font-style: normal;
	box-shadow: inset 0 -6px 0 #f5c518;
}

.bs-head__call a {
	box-shadow: inset 0 -3px 0 #f5c518;
	transition: box-shadow .15s, color .15s;
}

.bs-head__call a:hover {
	color: #0c0c0c;
	box-shadow: inset 0 -1.1em 0 #f5c518;
}

/* Auf schmalen Schirmen bleibt der Knopf, die Nummer würde nur umbrechen. */
@media ( max-width: 880px ) {
	.bs-head__call {
		display: none;
	}
}

/* Unterhalb der Klapp-Grenze läuft Elementors Menü-Panel als statischer Block
   in der Kopfzeile mit — zugeklappt 0 Pixel hoch, aber rund 140 Pixel breit.
   Auf dem Handy sprengt das die Zeile. Aus dem Fluss genommen hängt es dort,
   wo es hingehört: unter der Leiste. */
@media ( max-width: 1024px ) {
	/* Bezugspunkt ist die Leiste, nicht die Knopfgruppe — sonst beginnt das Panel
	   zehn Pixel zu hoch und schneidet die Leiste an. */
	.bs-head__right,
	.bs-hauptnav {
		position: static;
	}

	.bs-hauptnav .elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		right: 0;
		min-width: 260px;
		z-index: 90;
	}
}

/* ── Fußzeile (site-weit) ───────────────────────────────── */
.bs-foot__brand {
	display: block;
	margin-bottom: 8px;
	color: #ffffff;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -.035em;
}

.bs-foot__col a {
	color: #c2c2c9;
	text-decoration: none;
	box-shadow: inset 0 -2px 0 #3a3a42;
}

.bs-foot__col a:hover {
	color: #ffffff;
	box-shadow: inset 0 -2px 0 #f5c518;
}

/* ── Zugänglichkeit ──────────────────────────────────── */
body.page-id-432 a:focus-visible,
body.page-id-432 button:focus-visible,
body.page-id-432 input:focus-visible,
body.page-id-432 select:focus-visible,
body.page-id-432 textarea:focus-visible,
body.page-id-432 .e-n-accordion-item-title:focus-visible,
.bs-head a:focus-visible,
.bs-foot a:focus-visible {
	outline: 3px solid #f5c518;
	outline-offset: 3px;
}