/* ==========================================================================
   B&B Layout — Design-Vorgaben, Kopf- und Fußbereich
   PRO-Sulting
   ========================================================================== */

:root {
	/* Warme, zwei Stufen aufgehellte Skala — reines Neutralschwarz wirkte wie ein Loch. */
	--bb-bg:        #1C1816;
	--bb-bg-alt:    #25201D;
	--bb-card:      #2D2724;
	--bb-card-2:    #342D2A;
	--bb-deep:      #14100F;
	--bb-section:   #25201D;
	--bb-accent:    #c0313e;
	--bb-accent-h:  #e63946;
	--bb-gold:      #d4a843;
	--bb-text:      #f0f0f0;
	--bb-text-2:    #b6b0ad;
	--bb-muted:     #8a8280;
	--bb-line:      rgba(255,255,255,.12);
	--bb-line-2:    rgba(255,255,255,.22);
	--bb-radius:    10px;
	--bb-wrap:      1200px;
	--bb-head:      74px;
	--bb-h:         'Bebas Neue', 'Barlow Condensed', Impact, sans-serif;
	--bb-c:         'Barlow Condensed', 'Barlow', system-ui, sans-serif;
	--bb-b:         'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color-scheme: dark;
	--bb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.7 9.4 17.4 19.4 6.9'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- Grundlage */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bb-head) + 20px); }

body.bb-body,
body {
	background: var(--bb-bg);
	color: var(--bb-text);
	font-family: var(--bb-b);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
	font-family: var(--bb-h);
	font-weight: 400;
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--bb-text);
}
body h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
body h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
body h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
body h4 { font-size: 1.2rem; }
body p  { color: var(--bb-text-2); }
body a  { color: inherit; }
body a:hover { color: var(--bb-accent-h); }
img, svg, video { max-width: 100%; height: auto; }

.bb-wrap { width: 100%; max-width: var(--bb-wrap); margin: 0 auto; padding: 0 20px; }

/* Bildschirmleser-Hilfe */
.bb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------- Knöpfe */

.bb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 32px; border-radius: var(--bb-radius);
	font-family: var(--bb-c); font-size: 1rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
	border: 1px solid transparent; cursor: pointer; line-height: 1.2;
	transition: background .25s ease, transform .2s ease, box-shadow .25s ease, border-color .25s ease, color .2s ease;
}
.bb-btn--primary { background: var(--bb-accent); color: #fff; }
.bb-btn--primary:hover { background: var(--bb-accent-h); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(192,49,62,.35); }
.bb-btn--ghost { background: transparent; color: #fff; border-color: var(--bb-line-2); }
.bb-btn--ghost:hover { background: rgba(255,255,255,.06); border-color: #fff; color: #fff; transform: translateY(-2px); }
.bb-btn--sm { padding: 10px 20px; font-size: .9rem; }
.bb-btn--block { display: flex; width: 100%; }

/* Elementors Kit-CSS setzt `.elementor-kit-N a:hover{color:…}` — das ist eine Klasse
   plus Element und schlägt damit eine reine Klassenregel. Ohne das `body` davor würde
   die Beschriftung beim Überfahren rot auf rotem Grund stehen, also unsichtbar. */
body a.bb-btn--primary,
body a.bb-btn--primary:hover,
body a.bb-btn--primary:focus,
body a.bb-btn--ghost,
body a.bb-btn--ghost:hover,
body a.bb-btn--ghost:focus { color: #fff; }

/* --------------------------------------------------------------- Hinweisleiste */

.bb-topbar {
	background: var(--bb-accent); color: #fff;
	font-family: var(--bb-c); font-size: .88rem; letter-spacing: .03em;
	position: relative; z-index: 1001;
}
.bb-topbar__in { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 7px 20px; flex-wrap: wrap; text-align: center; }
.bb-topbar__tel { font-weight: 700; text-decoration: none; white-space: nowrap; }
/* `body` davor aus demselben Grund wie bei den Knöpfen: weiß auf rotem Grund halten. */
body a.bb-topbar__tel,
body a.bb-topbar__tel:hover,
body a.bb-topbar__tel:focus { color: #fff; }
.bb-topbar__tel:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Kopfbereich */

.bb-header {
	position: sticky; top: 0; z-index: 1000;
	background: rgba(20,16,15,.90);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--bb-line);
	transition: box-shadow .25s ease, background .25s ease;
}
.bb-header.is-stuck { box-shadow: 0 6px 26px rgba(0,0,0,.5); background: rgba(20,16,15,.98); }
.bb-header__in { display: flex; align-items: center; gap: 22px; min-height: var(--bb-head); }

.bb-logo { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.bb-logo__img { display: block; max-height: 46px; width: auto; }
.bb-logo__txt { font-family: var(--bb-h); font-size: 1.9rem; letter-spacing: .06em; color: #fff; }

.bb-nav { margin-left: auto; }
.bb-nav__list { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.bb-nav__list li { position: relative; }
.bb-nav__list a {
	font-family: var(--bb-c); font-size: .95rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .08em;
	color: var(--bb-text-2); text-decoration: none; padding: 6px 0; display: inline-block;
	transition: color .2s ease;
}
/* Auch hier `body` davor: gegen Elementors `.elementor-kit-N a:hover` gibt es sonst
   einen Gleichstand, den das später eingebundene Kit-CSS gewinnt — die Menüpunkte
   würden rot statt weiß. */
body .bb-nav__list a:hover,
body .bb-nav__list a:focus-visible { color: #fff; }
.bb-nav__list a::after {
	content: ''; display: block; height: 2px; width: 0; background: var(--bb-accent);
	transition: width .25s ease; margin-top: 3px;
}
/* Bewusst nur beim Überfahren: Auf dem Einseiter zeigen alle Menüpunkte auf „/",
   deshalb markiert WordPress sie ALLE als aktuelle Seite — sonst wären dauerhaft
   alle vier unterstrichen. */
.bb-nav__list a:hover::after,
.bb-nav__list a:focus-visible::after { width: 100%; }

/* Untermenü */
.bb-nav__list .sub-menu {
	position: absolute; top: 100%; left: -14px; min-width: 220px;
	background: var(--bb-card); border: 1px solid var(--bb-line); border-radius: 8px;
	padding: 8px; list-style: none; margin: 0;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.bb-nav__list li:hover > .sub-menu,
.bb-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.bb-nav__list .sub-menu a { display: block; padding: 9px 12px; border-radius: 6px; letter-spacing: .05em; }
.bb-nav__list .sub-menu a::after { display: none; }
.bb-nav__list .sub-menu a:hover { background: rgba(255,255,255,.06); }

.bb-header__act { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.bb-tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font-family: var(--bb-c); font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.bb-tel__ic { color: var(--bb-accent); display: inline-flex; }
.bb-tel:hover { color: var(--bb-accent-h); }

/* --------------------------------------------------------------- Mobiles Menü */

.bb-burger { display: none; width: 44px; height: 40px; padding: 9px 8px; background: transparent; border: 0; cursor: pointer; flex-direction: column; justify-content: space-between; }
.bb-burger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .28s ease, opacity .2s ease; }
.bb-burger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.bb-burger.is-open span:nth-child(2) { opacity: 0; }
.bb-burger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.bb-panel {
	position: fixed; inset: 0; z-index: 1100; background: var(--bb-deep);
	display: flex; flex-direction: column; padding: 18px 20px 24px;
	transform: translateX(100%); transition: transform .3s ease;
	overflow-y: auto; overscroll-behavior: contain;
}
.bb-panel[hidden] { display: none; }
.bb-panel.is-open { transform: none; }
.bb-panel__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--bb-line); }
.bb-panel__x { background: transparent; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; padding: 0 6px; cursor: pointer; }
.bb-panel__x:hover { color: var(--bb-accent-h); }
.bb-panel__nav { flex: 1 1 auto; padding: 12px 0; }
.bb-panel__list, .bb-panel__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.bb-panel__list > li { border-bottom: 1px solid var(--bb-line); }
.bb-panel__list a {
	display: block; padding: 16px 2px; text-decoration: none; color: var(--bb-text);
	font-family: var(--bb-c); font-size: 1.15rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .07em;
}
.bb-panel__list a:hover { color: var(--bb-accent-h); }
.bb-panel__list .sub-menu a { padding-left: 16px; font-size: 1rem; color: var(--bb-text-2); text-transform: none; letter-spacing: .02em; }
.bb-panel__foot { padding-top: 14px; border-top: 1px solid var(--bb-line); display: grid; gap: 12px; text-align: center; }
.bb-panel__tel { font-family: var(--bb-c); font-weight: 700; font-size: 1.15rem; color: #fff; text-decoration: none; letter-spacing: .04em; }

body.bb-noscroll { overflow: hidden; }

/* --------------------------------------------------------------- Fußbereich */

.bb-footer { background: var(--bb-deep); border-top: 1px solid var(--bb-line); margin-top: 0; }
.bb-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-top: 62px; padding-bottom: 48px; }
.bb-footer__col .bb-logo__img { max-height: 52px; }
.bb-footer__claim { color: var(--bb-muted); font-size: .95rem; margin: 16px 0 14px; max-width: 340px; }
.bb-footer__gm { display: inline-flex; align-items: center; gap: 7px; color: var(--bb-gold); text-decoration: none; font-family: var(--bb-c); font-weight: 600; letter-spacing: .04em; }
body a.bb-footer__gm,
body a.bb-footer__gm:hover,
body a.bb-footer__gm:focus { color: var(--bb-gold); }
.bb-footer__gm:hover { text-decoration: underline; }
.bb-footer__h { font-family: var(--bb-c); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--bb-accent); margin: 0 0 16px; }
.bb-footer__adr { font-style: normal; color: var(--bb-text-2); margin: 0 0 12px; line-height: 1.7; }
.bb-footer__adr strong { color: var(--bb-text); }
.bb-footer__line { margin: 0 0 7px; color: var(--bb-text-2); }
.bb-footer__line a { color: var(--bb-text-2); text-decoration: none; }
.bb-footer__line a:hover { color: var(--bb-accent-h); }
.bb-footer__line--muted { color: var(--bb-muted); }
.bb-footer__list { list-style: none; margin: 0; padding: 0; }
.bb-footer__list li { margin-bottom: 7px; }
.bb-footer__list a { color: var(--bb-text-2); text-decoration: none; }
.bb-footer__list a:hover { color: var(--bb-accent-h); }
.bb-footer__bar { border-top: 1px solid var(--bb-line); }
.bb-footer__barin { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--bb-muted); }
.bb-footer__by a { color: var(--bb-muted); text-decoration: none; }
.bb-footer__by a:hover { color: var(--bb-accent-h); }

/* --------------------------------------------------------------- Anrufleiste (mobil) */

.bb-callbar { display: none; }
@media (max-width: 767px) {
	.bb-callbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090;
		display: grid; grid-template-columns: 1fr 1fr;
		background: var(--bb-deep); border-top: 1px solid var(--bb-line);
		box-shadow: 0 -6px 24px rgba(0,0,0,.5);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.bb-callbar__a {
		display: flex; align-items: center; justify-content: center; gap: 8px;
		padding: 14px 8px; text-decoration: none;
		font-family: var(--bb-c); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
		color: #fff !important; -webkit-text-fill-color: #fff; font-size: .95rem;
	}
	.bb-callbar__a--cta { background: var(--bb-accent); }
	body { padding-bottom: 60px; }
}

/* --------------------------------------------------------------- Shortcode-Bausteine */

.bb-hours { list-style: none; margin: 0; padding: 0; }
.bb-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--bb-line); }
.bb-hours li:last-child { border-bottom: 0; }
.bb-hours span { color: var(--bb-text-2); font-family: var(--bb-c); text-transform: uppercase; letter-spacing: .06em; }
.bb-hours strong { color: var(--bb-text); font-weight: 600; }

.bb-contactlist { list-style: none; margin: 0; padding: 0; }
.bb-contactlist li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; color: var(--bb-text-2); }
.bb-contactlist a { color: var(--bb-text-2); text-decoration: none; }
.bb-contactlist a:hover { color: var(--bb-accent-h); }
.bb-contactlist__ic { color: var(--bb-accent); flex: 0 0 20px; display: inline-flex; margin-top: 3px; }

/* ==========================================================================
   Inhaltsbausteine — angesprochen über CSS-Klassen, die in Elementor am
   Container bzw. Widget vergeben sind. Wer eine neue Sektion anlegt, trägt
   dort dieselbe Klasse ein und bekommt dasselbe Aussehen.
   ========================================================================== */

/* --- Sektionen --------------------------------------------------------- */

.e-con.bb-sec {
	position: relative;
	padding-top: 88px; padding-bottom: 88px;
	background-color: var(--bb-bg);
	border-top: 1px solid rgba(255,255,255,.05);
}
.e-con.bb-sec--schmal { padding-top: 62px; padding-bottom: 62px; }

/* Lichtkegel am oberen Rand statt platter Flächenfarbe */
.e-con.bb-sec--alt {
	background-color: var(--bb-bg-alt);
	background-image: radial-gradient(70% 100% at 50% 0%, rgba(192,49,62,.085), transparent 58%);
}
.e-con.bb-sec:not(.bb-sec--hero)::before {
	content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
	width: 200px; height: 2px; pointer-events: none; z-index: 1;
	background: linear-gradient(90deg, transparent, var(--bb-accent), transparent);
}

/* Hero: das Hintergrundbild kommt aus Elementor (Sektion → Stil → Hintergrund),
   der abdunkelnde Schleier liegt darüber. Elementor erzeugt das ::before über
   `content: var(--background-overlay)` — ohne Wert entsteht es gar nicht. */
.e-con.bb-sec--hero {
	overflow: hidden;
	padding-top: 118px; padding-bottom: 112px;
	border-top: 0;
	background-size: cover; background-position: center right;
	--background-overlay: '';
}
.e-con.bb-sec--hero::before {
	content: var(--background-overlay);
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(90deg, var(--bb-bg) 14%, rgba(28,24,22,.88) 46%, rgba(28,24,22,.34) 100%),
		radial-gradient(58% 92% at 78% 16%, rgba(192,49,62,.20), transparent 62%);
}
.e-con.bb-sec--hero::after {
	content: 'B&B'; position: absolute; right: -1%; bottom: -18%; z-index: 1;
	font-family: var(--bb-h); font-size: 17rem; line-height: .8;
	color: rgba(255,255,255,.03); pointer-events: none; user-select: none;
}

/* Terminanfrage als einziger starker Akzentblock */
.e-con.bb-sec--cta {
	overflow: hidden;
	background-color: #221614;
	background-image:
		linear-gradient(135deg, #33161A 0%, rgba(34,22,20,.6) 46%, var(--bb-bg) 100%),
		repeating-linear-gradient(125deg, rgba(255,255,255,.02) 0 2px, transparent 2px 16px);
	border-top: 1px solid rgba(192,49,62,.3);
}

.e-con.bb-sec > .e-con-inner { position: relative; z-index: 2; }

/* --- Textbausteine ----------------------------------------------------- */

.bb-label {
	display: inline-block; font-family: var(--bb-c); font-size: .8rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .16em; color: var(--bb-accent);
}
.bb-akzent { color: var(--bb-accent); }
.bb-mitte, .bb-mitte p { text-align: center; }
.bb-sub p { max-width: 680px; margin-left: auto; margin-right: auto; }
.bb-lead p { font-size: 1.1rem; max-width: 640px; }
.bb-klein { font-size: .88rem; color: var(--bb-muted); }
.bb-badge {
	display: inline-block; background: rgba(192,49,62,.14); border: 1px solid rgba(192,49,62,.4);
	color: var(--bb-accent-h); font-family: var(--bb-c); font-size: .8rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .12em; padding: 6px 14px; border-radius: 999px;
}

/* --- Knöpfe (Elementor-Button-Widget) ---------------------------------- */

/* Elementor setzt die Flex-Werte an Containern ueber eigene Variablen — direkte
   Angaben wie `flex-direction` werden dadurch ueberschrieben. */
.bb-btnrow.e-con { --flex-direction: row; --flex-wrap: wrap; --align-items: flex-start; --gap: 14px; width: auto; }
.bb-b .elementor-button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 30px; border-radius: var(--bb-radius);
	font-family: var(--bb-c); font-size: 1rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	border: 1px solid transparent; line-height: 1.2;
	transition: background .25s ease, transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
body .bb-b--primary .elementor-button { background: var(--bb-accent); color: #fff; }
body .bb-b--primary .elementor-button:hover { background: var(--bb-accent-h); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(192,49,62,.35); }
body .bb-b--ghost .elementor-button { background: transparent; color: #fff; border-color: var(--bb-line-2); }
body .bb-b--ghost .elementor-button:hover { background: rgba(255,255,255,.06); border-color: #fff; color: #fff; transform: translateY(-2px); }
.bb-b--sm .elementor-button { padding: 11px 22px; font-size: .9rem; }

/* --- Raster und Karten -------------------------------------------------- */

.e-con.bb-grid { display: grid; gap: 20px; align-items: stretch; }
.e-con.bb-grid--4 { grid-template-columns: repeat(4, 1fr); }
.e-con.bb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.e-con.bb-grid--2 { grid-template-columns: repeat(2, 1fr); }

.e-con.bb-card {
	position: relative; overflow: hidden; height: 100%;
	padding: 28px 24px 24px;
	background: linear-gradient(160deg, var(--bb-card-2), var(--bb-card));
	border: 1px solid var(--bb-line); border-radius: 12px;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
	--background-overlay: '';
}
.e-con.bb-card::before {
	content: var(--background-overlay);
	position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
	background: linear-gradient(90deg, var(--bb-accent), transparent 70%); opacity: .85;
}
.e-con.bb-card:hover { transform: translateY(-4px); border-color: rgba(192,49,62,.5); box-shadow: 0 16px 38px rgba(0,0,0,.5); }

.bb-card__ic p { margin: 0; line-height: 0; }
.bb-card__ic .bb-i {
	width: 52px !important; height: 52px !important; border-radius: 12px; padding: 13px;
	background: rgba(192,49,62,.14); border: 1px solid rgba(192,49,62,.32);
	color: var(--bb-accent-h);
}
.bb-card__h .elementor-heading-title {
	font-family: var(--bb-c); font-size: 1.15rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; color: var(--bb-text);
}
.bb-card__t p { color: var(--bb-text-2); font-size: .95rem; margin: 0; }

/* --- Partner-Kacheln ---------------------------------------------------- */

.e-con.bb-partner { padding: 30px 30px 28px; }
/* Partnerlogos stehen auf einer hellen Fläche — DEKRA ist dunkelgrün und wäre
   auf dem dunklen Untergrund kaum lesbar. Gleichzeitig bleiben beide Marken so
   in ihren Originalfarben, wie es die Markenrichtlinien verlangen. */
.e-con.bb-partner__logo {
	width: auto; align-self: flex-start;
	background: #fff; border-radius: 10px;
	padding: 16px 22px; margin-bottom: 20px;
	min-width: 200px; min-height: 76px;
	--justify-content: center; --align-items: center;
	justify-content: center; align-items: center;
}
/* Feste Höhe statt max-height: so steht das Seitenverhältnis schon vor dem Laden fest
   und die Kachel springt nicht — die Bilder werden verzögert nachgeladen. */
/* `body` davor, sonst gewinnt Elementors `.elementor-widget-image img { width:100% }`. */
body .bb-partner__logo img { display: block; height: 44px; width: auto; max-width: 100%; }
body .bb-partner__logo .elementor-widget-image,
body .bb-partner__logo .elementor-widget-container { width: auto; }
.bb-marke__rolle {
	font-family: var(--bb-c); font-size: .8rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .14em; color: var(--bb-accent);
	margin: 6px 0 14px !important;
}
.e-con.bb-partner p { color: var(--bb-text-2); font-size: .96rem; }

/* --- Bild im Über-uns-Bereich ------------------------------------------- */

.bb-bild img { border-radius: 12px; border: 1px solid var(--bb-line); display: block; width: 100%; }
/* Textspalte breiter als die Bildspalte */
.e-con.bb-grid--breit { grid-template-columns: 1.25fr 1fr; align-items: center; gap: 40px; }
@media (max-width: 900px) { .e-con.bb-grid--breit { grid-template-columns: 1fr; } }

/* --- Kennzahlen-Band ---------------------------------------------------- */

.e-con.bb-stats {
	--flex-direction: row; --flex-wrap: wrap; --gap: 0; --align-items: flex-start;
	width: auto; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--bb-line);
}
.e-con.bb-stats__i { width: auto; gap: 2px; padding-right: 48px; margin-right: 48px; border-right: 1px solid var(--bb-line); }
.e-con.bb-stats__i:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.bb-stats__i p { margin: 0; }
.bb-stats__n { display: block; font-family: var(--bb-h); font-size: 2.7rem; line-height: 1; color: #fff; }
.bb-stats__n em { font-style: normal; color: var(--bb-accent); }
.bb-stats__l { font-family: var(--bb-c); font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--bb-muted); }

/* --- Merkmalsliste (Elementor-Icon-List) -------------------------------- */

/* Das Häkchen ist Elementors eigenes Listen-Symbol — so lässt es sich in der
   Oberfläche austauschen. Nur eingefärbt und in der Größe angepasst. */
.bb-feat .elementor-icon-list-items { display: grid; gap: 4px; }
.bb-feat .elementor-icon-list-item { padding: 7px 0; align-items: flex-start; }
.bb-feat .elementor-icon-list-icon { color: var(--bb-accent); margin-top: 4px; }
.bb-feat .elementor-icon-list-icon svg { width: 15px; height: 15px; fill: var(--bb-accent); }
.bb-feat .elementor-icon-list-text { color: var(--bb-text-2); padding-left: 12px; }

/* --- Häufige Fragen (Elementor-Akkordeon) ------------------------------- */

/* `body` davor, weil Elementors eigene Akkordeon-Regeln dieselbe Spezifität
   haben und später eingebunden werden. */
body .bb-faq { max-width: 880px; margin: 26px auto 0; }
body .bb-faq .elementor-accordion { border-top: 1px solid var(--bb-line); }
body .bb-faq .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--bb-line); background: transparent; }
body .bb-faq .elementor-tab-title {
	padding: 20px 2px; background: transparent; border: 0;
	font-family: var(--bb-c); font-size: 1.08rem; font-weight: 600; letter-spacing: .03em;
	/* Mindestens 48 px hoch — auf dem Handy sonst zu klein zum Treffen. */
	min-height: 48px; display: flex; align-items: center;
}
body .bb-faq .elementor-accordion-icon svg { fill: var(--bb-accent); width: 14px; height: 14px; }
body .bb-faq .elementor-tab-content { border: 0; }
body .bb-faq .elementor-tab-title a,
body .bb-faq .elementor-tab-title .elementor-accordion-title { color: var(--bb-text); }
body .bb-faq .elementor-tab-title:hover .elementor-accordion-title,
body .bb-faq .elementor-tab-title.elementor-active .elementor-accordion-title { color: var(--bb-accent-h); }
body .bb-faq .elementor-accordion-icon { color: var(--bb-accent); }
.bb-faq .elementor-tab-content { padding: 0 2px 22px; background: transparent; border: 0; color: var(--bb-text-2); }
.bb-faq .elementor-tab-content p { color: var(--bb-text-2); margin: 0; }

/* --- Anfrageformular ---------------------------------------------------- */

.bb-formular { max-width: 760px; margin: 0 auto; }

/* --- Bewertungskarten --------------------------------------------------- */

.bb-rev { background: linear-gradient(160deg, var(--bb-card-2), var(--bb-card)); border: 1px solid var(--bb-line); border-radius: var(--bb-radius); padding: 26px 24px; height: 100%; }
.bb-rev__s { color: var(--bb-gold); display: flex; gap: 2px; margin-bottom: 12px; }
.bb-rev__t { color: var(--bb-text-2); font-size: .96rem; margin: 0 0 16px; }
.bb-rev__a { font-family: var(--bb-c); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--bb-text); font-size: .9rem; }
.bb-score { display: flex; align-items: center; gap: 16px; justify-content: center; margin-bottom: 34px; flex-wrap: wrap; }
.bb-score__n { font-family: var(--bb-h); font-size: 3.2rem; line-height: 1; color: var(--bb-gold); }
.bb-score__m { color: var(--bb-muted); font-size: .92rem; }
.bb-grid { display: grid; gap: 22px; }
.bb-grid--4 { grid-template-columns: repeat(4, 1fr); }
.bb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bb-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* --- Formularfelder an die hellere Skala anpassen ------------------------ */

.bb-form input[type=text], .bb-form input[type=email], .bb-form input[type=tel],
.bb-form input[type=date], .bb-form select, .bb-form textarea { background: rgba(0,0,0,.28); }

/* --------------------------------------------------------------- Reaktionsfähig */

@media (max-width: 1024px) {
	.e-con.bb-grid--4, .bb-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.bb-footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 900px) {
	.bb-nav, .bb-header__cta { display: none; }
	.bb-burger { display: flex; }
	.bb-tel__no { display: none; }
	.bb-tel { font-size: 1.5rem; }
}
@media (max-width: 767px) {
	.bb-topbar__in { font-size: .8rem; gap: 10px; }
	.e-con.bb-grid--4, .e-con.bb-grid--3, .e-con.bb-grid--2,
	.bb-grid--4, .bb-grid--3, .bb-grid--2 { grid-template-columns: 1fr; }
	.e-con.bb-sec { padding-top: 56px; padding-bottom: 56px; }
	.e-con.bb-sec--hero { padding-top: 66px; padding-bottom: 62px; }
	.e-con.bb-sec--hero::before { background: linear-gradient(180deg, rgba(28,24,22,.86), rgba(28,24,22,.94)); }
	.e-con.bb-sec--hero::after { font-size: 9rem; bottom: -8%; }
	.e-con.bb-stats { --flex-direction: column; }
	.e-con.bb-stats__i { padding-right: 0; margin-right: 0; border-right: 0; border-bottom: 1px solid var(--bb-line); padding-bottom: 14px; margin-bottom: 14px; }
	.bb-footer__grid { grid-template-columns: 1fr; gap: 30px; padding-top: 46px; }
	.bb-footer__barin { justify-content: center; text-align: center; }
	.bb-stats__n { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}

/* ==========================================================================
   Rechtsseiten (Impressum, Datenschutz) — klar gegliedert im Raster
   ========================================================================== */

.bb-legal { max-width: 1100px; margin: 0 auto; }

.bb-legal__head { margin-bottom: 26px; }
.bb-legal__over {
	display: block; font-family: var(--bb-c); font-size: .74rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase; color: var(--bb-accent); margin-bottom: 10px;
}
.bb-legal__head h1 { margin: 0 0 10px; }
.bb-legal__meta { color: var(--bb-muted); font-size: .86rem; letter-spacing: .02em; margin: 0; }

/* Sprungmarken — bleiben beim Scrollen unter dem Kopfbereich stehen */
.bb-legal__nav {
	position: sticky; top: var(--bb-head); z-index: 50;
	border-top: 1px solid var(--bb-line); border-bottom: 1px solid var(--bb-line);
	background: rgba(10,10,10,.96);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	margin-bottom: 26px;
}
.bb-legal__navin { display: flex; overflow-x: auto; scrollbar-width: none; }
.bb-legal__navin::-webkit-scrollbar { display: none; }
.bb-legal__navin a {
	flex-shrink: 0; display: inline-block; white-space: nowrap;
	font-family: var(--bb-c); font-size: .74rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--bb-muted); text-decoration: none;
	padding: 12px 13px; border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
body .bb-legal__navin a:hover,
body .bb-legal__navin a:focus-visible { color: var(--bb-accent-h); border-bottom-color: var(--bb-accent-h); }

/* Zweispaltiges Raster aus Abschnitts-Karten */
.bb-legal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.bb-legal__sec {
	border: 1px solid var(--bb-line); border-radius: 10px; background: var(--bb-card);
	padding: 24px 26px 20px; scroll-margin-top: calc(var(--bb-head) + 70px);
	transition: border-color .2s ease;
}
.bb-legal__sec:hover { border-color: rgba(192,49,62,.42); }
.bb-legal__sec--weit { grid-column: 1 / -1; }
.bb-legal__sec h2 {
	font-family: var(--bb-c); font-size: 1.02rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .07em;
	color: var(--bb-text); margin: 0 0 14px; padding-bottom: 12px;
	border-bottom: 1px solid var(--bb-line);
}
.bb-legal__sec h3 {
	font-family: var(--bb-c); font-size: .88rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .06em; color: var(--bb-text-2); margin: 18px 0 6px;
}
.bb-legal__sec p { color: var(--bb-text-2); font-size: .93rem; margin: 0 0 12px; }
.bb-legal__sec p:last-child { margin-bottom: 0; }
.bb-legal__sec strong { color: var(--bb-text); }
.bb-legal__sec code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .86em; letter-spacing: 0; word-spacing: normal;
	background: rgba(255,255,255,.06); border-radius: 4px; padding: 1px 5px; color: var(--bb-text);
}
/* `body` davor gegen Elementors `.elementor-kit-N a` — sonst blieben die Links grau. */
body .bb-legal__sec a { color: var(--bb-accent-h); text-decoration: underline; text-underline-offset: 2px; }
body .bb-legal__sec a:hover { color: var(--bb-accent); }
.bb-legal__sec ul { list-style: none; margin: 0 0 12px; padding: 0; }
.bb-legal__sec ul li { position: relative; padding: 5px 0 5px 20px; color: var(--bb-text-2); font-size: .93rem; }
.bb-legal__sec ul li::before {
	content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px;
	border-radius: 50%; background: var(--bb-accent);
}
.bb-legal__hint {
	grid-column: 1 / -1; border: 1px dashed rgba(212,168,67,.5); border-radius: 10px;
	padding: 16px 20px; color: var(--bb-gold); font-size: .88rem;
}

@media (max-width: 860px) {
	.bb-legal__grid { grid-template-columns: 1fr; }
	.bb-legal__nav { top: 0; }
}

/* ==========================================================================
   Tiefe — Verläufe statt Flächenfarben, damit die Seite nicht als ein
   durchgehender schwarzer Block wirkt. Die Sektionen werden über ihre
   Anker-IDs angesprochen: eigene CSS-Klassen reicht Elementor am Container
   nicht durch, die IDs dagegen schon.
   ========================================================================== */

/* --- Hero ---
   Der Hintergrund kommt aus Elementor (Container → Stil → Hintergrund), damit das
   Werkstattfoto ohne Codezeile getauscht werden kann. Hier liegt nur der Schleier
   darüber: ein Verlauf, der die linke Seite abdunkelt, damit die Schrift lesbar
   bleibt, plus Lichtschein in der Akzentfarbe. */
[id="start"] {
	position: relative;
	overflow: hidden;
	background-color: var(--bb-bg);
	background-size: cover;
	background-position: center right;
	/* Elementor erzeugt das ::before an Containern über `content: var(--background-overlay)`.
	   Ohne diesen Wert bleibt die Variable leer und das Pseudo-Element entsteht gar nicht. */
	--background-overlay: '';
}
[id="start"]::before {
	content: var(--background-overlay); position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(90deg, var(--bb-bg) 16%, rgba(28,24,22,.86) 46%, rgba(28,24,22,.30) 100%),
		radial-gradient(58% 92% at 78% 16%, rgba(192,49,62,.20), transparent 62%),
		radial-gradient(90% 70% at 6% 100%, rgba(212,168,67,.06), transparent 60%);
}
[id="start"]::after {
	content: 'B&B'; position: absolute; right: -1%; bottom: -18%; z-index: 1;
	font-family: var(--bb-h); font-size: 17rem; line-height: .8;
	color: rgba(255,255,255,.03); letter-spacing: -.02em; pointer-events: none; user-select: none;
}
[id="start"] > .e-con-inner { position: relative; z-index: 2; }

/* --- Lichtkegel am oberen Rand statt platter Flächenfarbe.
   Bewusst als Attribut-Selektor statt `#id`: so bleibt die Spezifität niedrig genug,
   dass eine im Elementor gesetzte Hintergrundfarbe weiterhin gewinnt. Farbe und
   Verlauf sind getrennt notiert — wer im Elementor eine Farbe wählt, behält den
   Lichtkegel und tauscht nur den Grundton. --- */
[id="leistungen"], [id="bewertungen"], [id="faq"] {
	position: relative;
	background-color: var(--bb-bg-alt);
	background-image: radial-gradient(70% 100% at 50% 0%, rgba(192,49,62,.085), transparent 58%);
	border-top: 1px solid rgba(255,255,255,.05);
}
[id="ueber-uns"], [id="kontakt"], [id="einzugsgebiet"] {
	position: relative;
	background-color: var(--bb-bg);
	border-top: 1px solid rgba(255,255,255,.05);
}
[id="leistungen"]::before, [id="bewertungen"]::before, [id="faq"]::before,
[id="ueber-uns"]::before, [id="kontakt"]::before {
	content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
	width: 200px; height: 2px; pointer-events: none;
	background: linear-gradient(90deg, transparent, var(--bb-accent), transparent);
}

/* --- Terminanfrage als einziger starker Akzentblock: Ruhepunkt im Verlauf --- */
[id="kontaktformular"] {
	position: relative; overflow: hidden;
	background-color: #221614;
	background-image:
		linear-gradient(135deg, #33161A 0%, rgba(34,22,20,.6) 46%, var(--bb-bg) 100%),
		repeating-linear-gradient(125deg, rgba(255,255,255,.02) 0 2px, transparent 2px 16px);
	border-top: 1px solid rgba(192,49,62,.3);
}
[id="kontaktformular"] > .e-con-inner { position: relative; z-index: 2; }

/* --- Kennzahlen als Band mit Trennern --- */
.bb-stats {
	display: grid; grid-template-columns: repeat(3, max-content); gap: 0;
	margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--bb-line);
}
.bb-stats > div { padding-right: 48px; margin-right: 48px; border-right: 1px solid var(--bb-line); }
.bb-stats > div:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.bb-stats__n { font-size: 2.7rem; color: #fff; }
.bb-stats__n em { font-style: normal; color: var(--bb-accent); }

/* --- Karten: Symbolkachel, Akzentkante, Geisternummer --- */
.bb-card {
	position: relative; overflow: hidden;
	background: linear-gradient(160deg, var(--bb-card-2), var(--bb-card));
	border-radius: 12px;
}
.bb-card::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg, var(--bb-accent), transparent 70%); opacity: .85;
}
.bb-card__ic {
	width: 52px; height: 52px; border-radius: 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(192,49,62,.14); border: 1px solid rgba(192,49,62,.32);
	color: var(--bb-accent-h); margin-bottom: 18px;
}
.bb-card__nr {
	position: absolute; right: 14px; bottom: 2px; font-family: var(--bb-h);
	font-size: 3.4rem; line-height: 1; color: rgba(255,255,255,.04); pointer-events: none;
}
.bb-card:hover { transform: translateY(-4px); border-color: rgba(192,49,62,.5); box-shadow: 0 16px 38px rgba(0,0,0,.5); }

/* --- Bewertungskarten und Formularfelder an die hellere Skala anpassen --- */
.bb-rev { background: linear-gradient(160deg, var(--bb-card-2), var(--bb-card)); }
.bb-form input[type=text], .bb-form input[type=email], .bb-form input[type=tel],
.bb-form input[type=date], .bb-form select, .bb-form textarea { background: rgba(0,0,0,.28); }

@media (max-width: 767px) {
	#start::before { left: 0; opacity: .35; }
	#start::after { font-size: 9rem; bottom: -8%; }
	.bb-stats { grid-template-columns: 1fr; gap: 18px; }
	.bb-stats > div { padding-right: 0; margin-right: 0; border-right: 0;
		border-bottom: 1px solid var(--bb-line); padding-bottom: 14px; }
	.bb-stats > div:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ==========================================================================
   Bedienbarkeit auf dem Handy: Klickziele mindestens 44 px hoch.
   Gemessen waren 17 Elemente darunter — vor allem Fuß- und Kopflinks.
   ========================================================================== */

@media (max-width: 767px) {
	.bb-footer__list a,
	.bb-footer__line a,
	.bb-contactlist a {
		display: inline-flex; align-items: center; min-height: 44px;
	}
	.bb-footer__list li { margin-bottom: 0; }
	.bb-footer__line { margin-bottom: 0; }
	.bb-topbar__tel,
	.bb-tel { display: inline-flex; align-items: center; min-height: 44px; }
	.bb-footer__by a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Sprunglink ---------------------------------------------------------
   Unsichtbar, bis er den Tastaturfokus bekommt. Bewusst nicht mit
   display:none oder visibility:hidden versteckt — beides nimmt das Element
   aus der Tabreihenfolge, und dann ist der Link genau für die Leute weg,
   für die er gedacht ist. `body` davor wegen des Elementor-Kit-CSS. */
.bb-skip {
	position: absolute; left: -9999px; top: 0; z-index: 2000;
	width: 1px; height: 1px; overflow: hidden;
}
body a.bb-skip:focus {
	left: 14px; top: 14px; width: auto; height: auto; overflow: visible;
	padding: 13px 22px; background: var(--bb-accent); color: #fff;
	border-radius: 8px; text-decoration: none;
	font-family: var(--bb-c); font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em;
	box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
/* Sprungziel: nimmt keinen Platz ein und zeigt beim Anspringen keinen Rahmen. */
.bb-sprungziel { display: block; height: 0; }
.bb-sprungziel:focus { outline: none; }

/* =========================================================================
   Bewegung (bb-bewegung.js)
   Alles hier greift nur, wenn das Skript geladen ist und die Klassen setzt.
   Ist „Bewegung auf der Website" im Backend aus, wird das Skript nicht
   geladen — dann ist keine dieser Regeln wirksam.
   ========================================================================= */

/* --- Einblenden beim Scrollen -------------------------------------------
   Nur opacity und transform: beides verschiebt keine Nachbarn, der
   Layoutsprung bleibt also unverändert. Die Klassen verschwinden nach dem
   Einblenden wieder (siehe Skript), damit Hover-Effekte ungestört bleiben. */
.bb-bewegung .bb-einblenden {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
	/* Bewusst KEIN will-change: bei rund 45 Elementen legt der Browser dann schon
	   beim Laden 45 eigene Grafikebenen an. Auf dem Handy mit doppelter Pixeldichte
	   kostete das gemessen rund 100 ms Ladezeit (LCP). Für die Dauer des Übergangs
	   hebt der Browser das Element ohnehin selbst auf eine eigene Ebene. */
}
.bb-bewegung .bb-einblenden.ist-da { opacity: 1; transform: none; }
@media print {
	.bb-bewegung .bb-einblenden { opacity: 1 !important; transform: none !important; }
}

/* --- Kennzahlen im Kopfbild ---------------------------------------------
   Versteckt ab dem ersten Zeichnen (Klasse vom Einzeiler im <head>), das
   Skript zeigt sie beim Start des Zählens. Die Animation ist die Sicherung:
   Fällt das Skript aus, erscheinen die Zahlen nach 2,5 s trotzdem.
   `visibility` statt `display`, damit der Platz reserviert bleibt. */
.bb-js .bb-stats__n { visibility: hidden; animation: bbZahlSicher 0s linear 2.5s forwards; }
@keyframes bbZahlSicher { to { visibility: visible; } }
.bb-stats__n { font-variant-numeric: tabular-nums; }
/* Ziffernfeld beim Zählen: feste Breite des Endwerts, rechtsbündig — so
   bleibt das „+" dahinter stehen, statt seitlich mitzurutschen. */
.bb-stats__ziffern { display: inline-block; text-align: right; white-space: nowrap; }

/* --- Lesefortschritt unter dem Menü -------------------------------------
   Liegt genau auf der Unterkante des Kopfbereichs. Skaliert statt in der
   Breite verändert — das läuft auf der Grafikkarte und löst kein Neulayout aus. */
.bb-fortschritt {
	position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: linear-gradient(90deg, var(--bb-accent), var(--bb-accent-h));
	transform: scaleX(0); transform-origin: 0 50%;
	pointer-events: none; z-index: 2;
}

/* --- Menü: aktueller Abschnitt ------------------------------------------ */
body .bb-nav__list a.ist-aktiv { color: #fff; }
.bb-nav__list a.ist-aktiv::after { width: 100%; }
body .bb-panel__list a.ist-aktiv { color: var(--bb-accent-h); }

/* --- Leistungskarten: Symbol reagiert beim Überfahren -------------------
   Reines CSS, unabhängig vom Skript — kippt leicht und färbt sich rot. */
.bb-card__ic .bb-i {
	transition: transform .4s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease, border-color .25s ease;
}
.bb-card:hover .bb-card__ic .bb-i,
.bb-card:focus-within .bb-card__ic .bb-i {
	transform: rotate(-8deg) scale(1.08);
	background: var(--bb-accent); border-color: var(--bb-accent); color: #fff;
}

/* --- Rote Knöpfe: Lichtstreif beim Überfahren --------------------------- */
body .bb-b--primary .elementor-button,
body a.bb-btn--primary { position: relative; overflow: hidden; }
body .bb-b--primary .elementor-button::after,
body a.bb-btn--primary::after {
	content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.26), transparent);
	transform: skewX(-20deg); pointer-events: none;
	transition: left .65s ease;
}
body .bb-b--primary .elementor-button:hover::after,
body a.bb-btn--primary:hover::after { left: 125%; }

@media (prefers-reduced-motion: reduce) {
	.bb-card:hover .bb-card__ic .bb-i { transform: none; }
	body .bb-b--primary .elementor-button::after,
	body a.bb-btn--primary::after { display: none; }
}