/* ==========================================================================
   Bonillo – Designsystem
   Stand: Paket 1 (Fundament, Header, Footer, Hero, Intro) – Desktop
   Mobile/Tablet folgt in einem eigenen Abschnitt am Ende.

   Inhalt
   1. Schriften
   2. Tokens
   3. Betheme neutralisieren
   4. Basis + Layout
   5. Komponenten (Label, Buttons, Ecken, Linien-Reveal)
   6. Header
   7. Footer
   8. Section 01 – Hero
   9. Section 02 – Intro
   10. Animations-Startzustände (nur mit .bo-anim)
   ========================================================================== */


/* 1. Schriften ------------------------------------------------------------
   Lokal gehostet. Dateien in assets/fonts/ (siehe README). */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-var.woff2") format("woff2-variations"),
	     url("../fonts/archivo-var.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}


/* 2. Tokens --------------------------------------------------------------- */

:root {
	/* Farben aus dem Logo */
	--bo-ink:          #231F20;  /* Logo-Schwarz */
	--bo-ink-deep:     #1E1C1D;  /* dunkle Sections */
	--bo-ink-soft:     #2A2627;  /* Footer-X */
	--bo-paper:        #ffffff;  /* Seitenhintergrund */
	--bo-white:        #FFFFFF;
	--bo-teal:         #00A998;  /* Transport – Flächen, Linien, Marker */
	--bo-teal-ink:     #00776B;  /* Transport – Text & Buttons (Kontrast) */
	--bo-teal-light:   #5CD6C8;  /* Transport – Text auf Dunkel */
	--bo-purple:       #8D198F;  /* Werkstatt – Flächen & Buttons */
	--bo-purple-light: #D77ED9;  /* Werkstatt – Text auf Dunkel */
	--bo-grey:         #5A5F66;
	--bo-grey-dark:    #3A3F46;
	--bo-line:         #D6D4CF;

	/* Typo */
	--bo-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--bo-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Layout */
	--bo-max:      1440px;
	--bo-gutter:   80px;
	--bo-gap:      24px;
	--bo-header-h: 88px;
	--bo-adminbar: 0px;     /* WordPress-Adminleiste (nur eingeloggt) */
	--bo-section:  140px;   /* vertikaler Standardabstand */

	/* Sichtbare Höhe unter dem Header = „100vh“ für Sections.
	   svh = kleinste Viewport-Höhe (verhindert Springen auf Mobilgeräten). */
	--bo-screen: calc(100vh - var(--bo-header-h) - var(--bo-adminbar));

	/* Bewegung */
	--bo-ease: cubic-bezier(.22, .61, .36, 1);
}


@supports (height: 100svh) {
	:root { --bo-screen: calc(100svh - var(--bo-header-h) - var(--bo-adminbar)); }
}
.admin-bar { --bo-adminbar: 32px; }
@media (max-width: 782px) {
	.admin-bar { --bo-adminbar: 46px; }
}


/* 3. Betheme neutralisieren ----------------------------------------------- */

/* Betheme-Header, -Subheader und -Footer ausblenden – wir nutzen eigene. */
.bo-site #Header_wrapper,
.bo-site #Header,
.bo-site #Subheader,
.bo-site #Top_bar,
.bo-site .mfn-header-tmpl,
.bo-site #Footer,
.bo-site .mfn-footer-tmpl,
.bo-site #back_to_top {
	display: none !important;
}

/* Platz für den fixierten Header */
body.bo-site {
	margin: 0;
	padding-top: var(--bo-header-h) !important;
	background: var(--bo-paper);
}
.bo-site #Wrapper,
.bo-site #Content {
	background: var(--bo-paper);
}
.bo-site #Content {
	padding-top: 0 !important;
}

/* Leere Betheme-Sections unter dem Builder-Inhalt (Seiteninhalt-Platzhalter, Pager) */
.bo-site .section.the_content.no_content,
.bo-site .section.section-page-footer {
	display: none !important;
}

/* Builder-Sections mit der Klasse „bo-raw“: Betheme-Abstände und Breiten entfernen,
   damit unsere Sections randlos und mit eigenem Raster arbeiten. */
.bo-raw.section,
.bo-raw.mcb-section {
	padding: 0 !important;
	background: none !important;
}
.bo-raw .section_wrapper,
.bo-raw .mcb-section-inner,
.bo-raw .wrap,
.bo-raw .mcb-wrap,
.bo-raw .mcb-wrap-inner,
.bo-raw .column,
.bo-raw .mcb-column,
.bo-raw .mcb-column-inner,
.bo-raw .column_attr {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}


/* 4. Basis + Layout ------------------------------------------------------- */

.bo-site {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Alle eigenen Bausteine setzen Schrift, Farbe und Abstände selbst,
   damit Betheme-Typografie nicht durchschlägt. */
.bo-header, .bo-footer, .bo-section, .bo-hero {
	font-family: var(--bo-font);
	color: var(--bo-ink);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
}
.bo-header, .bo-footer, .bo-section, .bo-hero,
.bo-header *, .bo-footer *, .bo-section *, .bo-hero * {
	box-sizing: border-box;
}
.bo-header img, .bo-footer img, .bo-section img, .bo-hero img {
	display: block;
	max-width: none;
}
.bo-header ul, .bo-footer ul, .bo-section ul, .bo-section ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bo-header li, .bo-footer li, .bo-section li {
	margin: 0;
}
.bo-header a, .bo-footer a, .bo-section a, .bo-hero a {
	text-decoration: none;
	color: inherit;
	transition: color .2s var(--bo-ease), opacity .2s var(--bo-ease), background-color .2s var(--bo-ease);
}

.bo-wrap {
	max-width: var(--bo-max);
	margin-inline: auto;
	padding-inline: var(--bo-gutter);
}
.bo-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--bo-gap);
}
/* Pfeile wie ↗ nie als Emoji darstellen (iOS/Safari) – zusätzlich steht im HTML hinter jedem ↗ ein Textstil-Zeichen (U+FE0E) */
.bo-site,
.bo-raw {
	font-variant-emoji: text;
}
.bo-section {
	position: relative;
	padding-block: var(--bo-section);
}

/* Typo-Skala */
.bo-h2 {
	margin: 0;
	font-family: var(--bo-font);
	font-size: 72px;
	line-height: 1;
	font-weight: 700;
	font-stretch: 106%;
	letter-spacing: -0.02em;
	color: inherit;
	text-transform: none;
}
.bo-h3 {
	margin: 0;
	font-family: var(--bo-font);
	font-size: 30px;
	line-height: 1.15;
	font-weight: 700;
	font-stretch: 106%;
	letter-spacing: -0.01em;
	color: inherit;
	text-transform: none;
}
.bo-lead {
	margin: 36px 0 0;
	max-width: 720px;
	font-size: 22px;
	line-height: 1.55;
	color: var(--bo-grey-dark);
}

/* Skip-Link (Barrierefreiheit) */
.bo-skip {
	position: fixed;
	left: 16px;
	top: -100px;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--bo-ink);
	color: var(--bo-white);
	font: 600 14px/1 var(--bo-font);
}
.bo-skip:focus {
	top: 16px;
}


/* 5. Komponenten ---------------------------------------------------------- */

/* Label (Monospace, z. B. „02 / Was wir tun“) */
.bo-label {
	margin: 0;
	font-family: var(--bo-mono);
	font-size: 12px;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-grey);
}
.bo-label--light {
	color: rgba(255, 255, 255, .72);
}
.bo-num {
	display: block;
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--bo-teal-ink);
}

/* Kicker mit Linie (Hero) */
.bo-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-family: var(--bo-mono);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-white);
}
.bo-kicker::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--bo-teal);
}

/* Buttons – Farbe folgt dem Thema: Transport = Türkis, Werkstatt = Lila */
.bo-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 30px;
	border: 0;
	border-radius: 0;
	font-family: var(--bo-font);
	font-size: 16px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s var(--bo-ease), color .25s var(--bo-ease);
}
.bo-btn__arrow {
	display: inline-block;
	transition: transform .3s var(--bo-ease);
}
.bo-btn:hover .bo-btn__arrow,
.bo-btn:focus-visible .bo-btn__arrow {
	transform: translateX(5px);
}
.bo-btn--transport { background: var(--bo-teal-ink); color: var(--bo-white) !important; }
.bo-btn--transport:hover { background: #005F55; }
.bo-btn--werkstatt { background: var(--bo-purple); color: var(--bo-white) !important; }
.bo-btn--werkstatt:hover { background: #721473; }
.bo-btn--dark { background: var(--bo-ink); color: var(--bo-white) !important; }
.bo-btn--dark:hover { background: #000; }
.bo-btn--sm {
	padding: 14px 18px;
	font-family: var(--bo-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Textlink mit Unterstrich */
.bo-textlink {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	font-weight: 600;
	font-size: 16px;
}
.bo-textlink--light {
	color: var(--bo-white) !important;
	border-bottom-color: rgba(255, 255, 255, .6);
}
.bo-textlink--light:hover {
	border-bottom-color: var(--bo-teal);
}

/* Logo-Ecken
   Türkis = Transport → immer oben links
   Lila   = Werkstatt → immer unten rechts
   Größe über --w (Breite; Höhe = halbe Breite). */
.bo-corner {
	position: absolute;
	z-index: 3;
	display: block;
	width: var(--w, 180px);
	height: calc(var(--w, 180px) / 2);
	pointer-events: none;
}
.bo-corner--tl {
	top: 0;
	left: 0;
	background: var(--bo-teal);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	transform-origin: 0 0;
}
.bo-corner--br {
	right: 0;
	bottom: 0;
	background: var(--bo-purple);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	transform-origin: 100% 100%;
}

/* Zeilen-Reveal: <span class="bo-line"><span>Text</span></span> */
.bo-line {
	display: block;
	overflow: hidden;
	padding-bottom: .08em;
	margin-bottom: -.08em;
}
.bo-line > span {
	display: block;
	will-change: transform;
}


/* 6. Header --------------------------------------------------------------- */

.bo-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--bo-header-h);
	background: var(--bo-white);
	border-bottom: 1px solid #E2E0DB;
	transition: box-shadow .3s var(--bo-ease);
}
.admin-bar .bo-header {
	top: 32px;
}
.bo-header.is-scrolled {
	box-shadow: 0 6px 24px rgba(35, 31, 32, .08);
}
.bo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bo-gap);
	height: 100%;
}
.bo-header__logo img {
	width: auto;
	height: 58px;
}
.bo-nav__list {
	display: flex;
	gap: 40px;
}
.bo-nav__link {
	position: relative;
	display: block;
	padding-block: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bo-ink) !important;
}
.bo-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--bo-teal);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .35s var(--bo-ease);
}
.bo-nav__link:hover::after,
.bo-nav__link.is-active::after {
	transform: scaleX(1);
}


/* 7. Footer --------------------------------------------------------------- */

.bo-footer {
	position: relative;
	overflow: hidden;
	background: var(--bo-ink-deep);
	color: var(--bo-white);
}
.bo-footer .bo-corner {
	z-index: 0;
}

/* Gekreuztes X aus dem Logo */
.bo-footer__x {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.bo-footer__x span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -10%;
	right: -10%;
	background: var(--bo-ink-soft);
}
.bo-footer__x span:first-child {
	clip-path: polygon(0 18%, 8% 18%, 100% 78%, 100% 92%, 92% 92%, 0 32%);
}
.bo-footer__x span:last-child {
	clip-path: polygon(100% 18%, 92% 18%, 0 78%, 0 92%, 8% 92%, 100% 32%);
}

.bo-footer__inner {
	position: relative;
	z-index: 1;
	padding-top: 200px;
}
.bo-footer__claim {
	margin: 28px 0 0;
	font-family: var(--bo-font);
	font-size: 75px;
	line-height: .92;
	font-weight: 800;
	font-stretch: 115%;
	letter-spacing: -0.035em;
	color: var(--bo-white);
}

.bo-footer__contacts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bo-gap);
	margin-top: 96px;
}
.bo-footer__contact {
	display: block;
	padding: 28px 28px 32px;
	background: rgba(30, 28, 29, .92);
	border-top: 3px solid var(--bo-white);
	color: var(--bo-white) !important;
}
.bo-footer__contact--werkstatt { border-top-color: var(--bo-purple-light); }
.bo-footer__contact--transport { border-top-color: var(--bo-teal); }
.bo-footer__contact:hover { background: rgba(42, 38, 39, .96); }
.bo-footer__contact-value {
	display: block;
	margin-top: 14px;
	font-size: 34px;
	line-height: 1.1;
	font-weight: 700;
	font-stretch: 106%;
}

.bo-footer__nav {
	display: grid;
	grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
	gap: 40px var(--bo-gap);
	margin-top: 96px;
	padding-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	background: rgba(30, 28, 29, .92);
}
.bo-footer__logo {
	display: inline-block;
	padding: 14px 18px;
	background: var(--bo-white);
}
.bo-footer__logo img {
	width: auto;
	height: 54px;
}
.bo-footer address {
	margin-top: 20px;
	font-style: normal;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .8);
}
.bo-footer__col-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--bo-white) !important;
}
.bo-footer__col-title::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background: var(--bo-white);
}
.bo-footer__col-title--transport::before { background: var(--bo-teal); }
.bo-footer__col-title--werkstatt::before { background: var(--bo-purple-light); }
.bo-footer__col li {
	font-size: 15px;
	line-height: 2;
}
.bo-footer__col li a {
	color: rgba(255, 255, 255, .78) !important;
}
.bo-footer__col li a:hover,
.bo-footer__col-title:hover {
	color: var(--bo-teal-light) !important;
}

.bo-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 72px;
	padding: 24px 0 40px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	background: rgba(30, 28, 29, .92);
	font-family: var(--bo-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}
.bo-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}
.bo-footer__legal a:hover {
	color: var(--bo-white) !important;
}


/* 8. Section 01 – Hero ---------------------------------------------------- */

.bo-hero {
	position: relative;
	height: var(--bo-screen);
	min-height: 640px;
	overflow: hidden;
	isolation: isolate;
	background: var(--bo-ink-deep);
	color: var(--bo-white);
}
/* Ebenen im Hero:
   1. .bo-hero__fleet – Flotten-Foto, bildfüllend im Hintergrund
   2. .bo-hero__air   – Flugzeug darüber; fährt beim Scrollen nach rechts hinaus.
      Die Ebene ist links um --bo-slant breiter als der Bildschirm. Dort sitzt die
      angeschrägte Kante (Winkel der Logo-Balken), die beim Hinausfahren sichtbar wird.
   3. .bo-hero__scrim – Abdunklung für die Lesbarkeit des Textes */
.bo-hero {
	--bo-slant: calc(var(--bo-screen) * .42);
}
.bo-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.bo-hero__fleet {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.bo-hero__air {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: calc(-1 * var(--bo-slant));
	overflow: hidden;
	clip-path: polygon(var(--bo-slant) 0%, 100% 0%, 100% 100%, 0% 100%);
	will-change: transform;
}
.bo-hero__air .bo-hero__img.bo-hero__img {
	left: var(--bo-slant);
	width: calc(100% - var(--bo-slant));
}
/* Spezifität bewusst hoch: Betheme setzt img:not([src$=".svg"]) { height:auto; max-width:100% } */
.bo-hero .bo-hero__img.bo-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}
/* Bildausschnitt Flugzeug: Fokus auf Frachtluke + Ladung (unteres Bilddrittel) */
.bo-hero .bo-hero__img--air.bo-hero__img--air {
	object-position: 35% 72%;
}
/* Flotten-Foto: Fokus auf den Sattelzug (rechte Bildhälfte) */
.bo-hero .bo-hero__img--fleet.bo-hero__img--fleet {
	object-position: 94% 50%;
}
.bo-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(24, 22, 23, .7) 0%, rgba(24, 22, 23, 0) 40%),
		linear-gradient(90deg, rgba(24, 22, 23, .86) 0%, rgba(24, 22, 23, .62) 42%, rgba(24, 22, 23, .08) 72%);
}

.bo-hero__content {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding-bottom: 130px;
}
.bo-hero__title .bo-line > span {
	white-space: nowrap; /* Zeilenumbruch ist im Markup festgelegt */
}
.bo-hero__title {
	max-width: none;
	margin: 28px 0 0;
	font-family: var(--bo-font);
	font-size: 88px;
	line-height: .98;
	font-weight: 700;
	font-stretch: 108%;
	letter-spacing: -0.02em;
	color: var(--bo-white);
	text-transform: none;
}
.bo-hero__lead {
	max-width: 520px;
	margin: 28px 0 0;
	font-size: 21px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
}
.bo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	margin-top: 40px;
}
.bo-hero__meta {
	position: absolute;
	right: var(--bo-gutter);
	bottom: 150px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	color: rgba(255, 255, 255, .85);
}
/* Breite Bildschirme: Meta am Raster ausrichten */
@media (min-width: 1440px) {
	.bo-hero__meta {
		right: calc((100vw - var(--bo-max)) / 2 + var(--bo-gutter));
	}
}


/* 9. Section 02 – Intro --------------------------------------------------- */

/* Höhe ergibt sich aus dem Inhalt (keine feste Bildschirmhöhe). */
.bo-intro {
	padding-block: var(--bo-section) 120px;
}
.bo-intro .bo-lead {
	margin-top: 32px;
}
.bo-intro__links {
	margin-top: 96px !important;
}
.bo-intro__label {
	grid-column: span 4;
	padding-top: 14px; /* optisch auf die Oberkante der Headline */
}
.bo-intro__body {
	grid-column: span 8;
}
.bo-intro .bo-h2 {
	font-size: 96px;
	line-height: .96;
	font-stretch: 108%;
}
.bo-intro__links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--bo-ink);
}
.bo-intro__item {
	padding: 32px;
	border-right: 1px solid var(--bo-line);
}
.bo-intro__item:first-child { padding-left: 0; }
.bo-intro__item:last-child  { padding-right: 0; border-right: 0; }
.bo-intro__item .bo-h3 {
	margin-top: 20px;
}
.bo-intro__item p {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--bo-grey);
}


/* 9b. Section 03 – Netzwerk (Erdkugel mit Scroll-Zoom) -------------------
   Ebenen: .bo-net__stage (volle Fläche) enthält die „Welt“ (Kugel-Foto,
   Europa-Detailbild, SVG-Linien in Kugelkoordinaten 0–2800) und darüber
   die HTML-Pins (Airports, Ziele, Fahrzeuge), die per JS positioniert werden.
   Ohne JS: Kugel mit Flugrouten statisch rechts, Text links. */

.bo-net {
	position: relative;
	overflow: hidden;
	height: var(--bo-screen);
	min-height: 640px;
	background: var(--bo-ink-deep);
	color: var(--bo-white);
	font-family: var(--bo-font);
	font-size: 16px;
	line-height: 1.5;
}
.bo-net,
.bo-net * {
	box-sizing: border-box;
}
.bo-net .bo-corner {
	z-index: 3;
}

/* Bühne */
.bo-net__stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.bo-net__world {
	position: absolute;
	top: 47%;
	left: 50%;
	height: 112%;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	transform-origin: 0 0;
	will-change: transform;
}
.bo-net.is-js .bo-net__world {
	top: 0;
	left: 0;
}
.bo-net .bo-net__globe.bo-net__globe,
.bo-net .bo-net__detail.bo-net__detail {
	position: absolute;
	display: block;
	max-width: none;
	max-height: none;
	margin: 0;
}
.bo-net .bo-net__globe.bo-net__globe {
	inset: 0;
	width: 100%;
	height: 100%;
}
.bo-net .bo-net__detail.bo-net__detail {
	opacity: 0;
}
/* Mit JS zeichnet ein Canvas Kugel, Detailbild und Linien (flüssig auch in Safari/iOS).
   Die Weltebene bleibt im HTML als Datenquelle und Fallback ohne JS. */
.bo-net__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.bo-net.is-canvas .bo-net__world {
	display: none;
}
.bo-net__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	--u: 3;                /* Kugel-Einheiten pro Bildschirm-Pixel – setzt das JS */
}
.bo-net__air path {
	fill: none;
	stroke: rgba(255, 255, 255, .85);
	stroke-width: calc(1.3px * var(--u));
	stroke-dasharray: calc(5px * var(--u)) calc(6px * var(--u));
	stroke-linecap: round;
}
.bo-net__road {
	fill: none;
	stroke: var(--bo-teal);
	stroke-width: calc(2.2px * var(--u));
	stroke-linecap: round;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
}

/* Pins (HTML, feste Größe unabhängig vom Zoom) */
.bo-net__pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: none;
}
.bo-net.is-js .bo-net__pins {
	display: block;
}
.bo-net__pin {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	opacity: 0;
}
/* Marker: Ziel = türkises Quadrat */
.bo-net__pin::before {
	content: "";
	position: absolute;
	left: -4px;
	top: -4px;
	width: 8px;
	height: 8px;
	background: var(--bo-teal);
}
/* Marker: Cargo-Airport = weißer Ring mit Punkt + Puls */
.bo-net__pin--airport::before {
	left: -8px;
	top: -8px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 3px, var(--bo-ink-deep) 3.5px 5.5px, #fff 6px);
}
.bo-net__pin--airport::after {
	content: "";
	position: absolute;
	left: -8px;
	top: -8px;
	width: 16px;
	height: 16px;
	border: 1.5px solid #fff;
	border-radius: 50%;
	animation: bo-pulse 1.8s ease-out infinite;
}
@keyframes bo-pulse {
	from { transform: scale(1); opacity: .9; }
	to   { transform: scale(3); opacity: 0; }
}
/* Beschriftung */
.bo-net__pin i {
	position: absolute;
	font-family: var(--bo-mono);
	font-style: normal;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .88);
	white-space: nowrap;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
.bo-net__pin--airport i {
	font-size: 13px;
	font-weight: 500;
	color: #fff;
}
.bo-net__pin--r i { left: 10px;  top: 0; transform: translateY(-50%); }
.bo-net__pin--l i { right: 10px; top: 0; transform: translateY(-50%); }
.bo-net__pin--t i { left: 0; bottom: 14px; transform: translateX(-50%); }
.bo-net__pin--b i { left: 0; top: 16px; transform: translateX(-50%); }

.bo-net__truck {
	position: absolute;
	left: -3px;
	top: -3px;
	width: 7px;
	height: 7px;
	background: var(--bo-white);
	opacity: 0;
}

/* Abdunklung unten für den Text */
.bo-net__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(30, 28, 29, .96) 0%, rgba(30, 28, 29, .82) 22%, rgba(30, 28, 29, 0) 48%),
		linear-gradient(180deg, rgba(30, 28, 29, .55) 0%, rgba(30, 28, 29, 0) 18%);
}

/* Section-Label oben links */
.bo-net__head {
	position: absolute;
	top: 120px;
	left: 0;
	right: 0;
	z-index: 2;
}

/* Text: unten mittig, groß, immer nur der aktive Schritt */
.bo-net__inner {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 64px;
	z-index: 2;
	text-align: center;
}
.bo-net__text {
	max-width: 1120px;
	margin-inline: auto;
}
.bo-net__steps {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.bo-net__step {
	margin: 0 0 40px !important;
	padding: 0;
}
.bo-net__num {
	display: block;
	font-family: var(--bo-mono);
	font-size: 13px;
	letter-spacing: .12em;
	color: var(--bo-teal-light);
}
.bo-net__title {
	margin: 18px 0 0;
	font-family: var(--bo-font);
	font-size: clamp(40px, 6.6vh, 72px);
	line-height: 1.02;
	font-weight: 700;
	font-stretch: 108%;
	letter-spacing: -0.02em;
	color: var(--bo-white);
	text-transform: none;
	text-wrap: balance;
}
.bo-net__desc {
	max-width: 640px;
	margin: 20px auto 0;
	font-size: clamp(17px, 2.2vh, 21px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .82);
	text-wrap: balance;
}
/* Mit JS: Schritte liegen übereinander, nur der aktive ist sichtbar */
.bo-net.is-js .bo-net__steps {
	display: grid;
}
.bo-net.is-js .bo-net__step {
	grid-area: 1 / 1;
	align-self: end;
	margin: 0 !important;
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px);
	transition: opacity .5s var(--bo-ease), transform .6s var(--bo-ease), visibility 0s linear .5s;
}
.bo-net.is-js .bo-net__step.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .55s var(--bo-ease) .1s, transform .7s var(--bo-ease) .1s, visibility 0s;
}
.bo-net.is-js .bo-net__step.is-done {
	transform: translateY(-24px);
}

/* Fortschritt: 4 Segmente */
.bo-net__progress {
	display: none;
	gap: 8px;
	justify-content: center;
	margin-top: 36px;
}
.bo-net.is-js .bo-net__progress {
	display: flex;
}
.bo-net__progress span {
	position: relative;
	display: block;
	width: 56px;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, .2);
}
.bo-net__progress span i {
	position: absolute;
	inset: 0;
	background: var(--bo-teal);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* Legende unten rechts, untereinander */
.bo-net__legend {
	position: absolute;
	right: var(--bo-gutter);
	bottom: 64px;
	z-index: 2;
	display: flex !important;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 11px;
}
.bo-net__legend li {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
}
.bo-net__key {
	display: block;
	width: 28px;
}
.bo-net__key--air { border-top: 2px dashed rgba(255, 255, 255, .8); }
.bo-net__key--road { height: 2px; background: var(--bo-teal); }
.bo-net__key--airport {
	width: 10px;
	height: 10px;
	border: 2px solid var(--bo-white);
	border-radius: 50%;
}


/* 9c. Section 04 – Bonillo in Zahlen ---------------------------------------- */

.bo-stats {
	padding-block: var(--bo-section);
}
.bo-stats__grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 56px !important;
	border-top: 1px solid var(--bo-ink);
}
.bo-stats__item {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 40px 24px 44px 0;
	border-bottom: 1px solid var(--bo-line);
}
.bo-stats__value {
	font-family: var(--bo-font);
	font-size: 84px;
	white-space: nowrap;
	line-height: 1;
	font-weight: 700;
	font-stretch: 112%;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--bo-ink);
}
.bo-stats__label {
	font-size: 17px;
	line-height: 1.4;
	color: var(--bo-grey);
}


/* 9d. Section 05 – Transport (Leistungsliste) ------------------------------ */

.bo-trans {
	padding-block: 40px var(--bo-section);
}
.bo-trans__aside {
	grid-column: span 5;
	align-self: start;
}
.bo-trans .bo-trans__h {
	margin-top: 24px !important;
	font-size: 58px;
	line-height: 1;
}
.bo-trans__lead {
	max-width: 420px;
	margin: 28px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--bo-grey-dark);
}
.bo-trans__media {
	position: relative;
	/* so hoch, dass die fixierte Spalte inkl. Button immer ganz in den Bildschirm passt */
	height: clamp(180px, calc(var(--bo-screen) - 460px), 440px);
	margin-top: 48px;
	overflow: hidden;
	background: #C9CCD0;
}
.bo-trans .bo-trans__img.bo-trans__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .7s var(--bo-ease), transform 1.2s var(--bo-ease);
}
.bo-trans .bo-trans__img.is-active {
	opacity: 1;
	transform: none;
}
.bo-trans__media .bo-corner {
	z-index: 2;
}
.bo-trans__btn {
	margin-top: 32px;
}

/* Liste rechts */
.bo-trans__list {
	grid-column: 7 / span 6;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border-top: 1px solid var(--bo-ink);
}
.bo-trans__item {
	margin: 0 !important;
	border-bottom: 1px solid var(--bo-line);
}
.bo-trans__item a {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 52px 0 56px;
	color: inherit !important;
}
.bo-trans__num {
	flex-shrink: 0;
	width: 24px;
	padding-top: 16px;
	font-family: var(--bo-mono);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--bo-teal-ink);
}
.bo-trans__body {
	flex: 1;
	min-width: 0;
}
.bo-trans__title {
	display: block;
	font-size: 46px;
	line-height: 1.02;
	font-weight: 700;
	font-stretch: 106%;
	letter-spacing: -0.02em;
	color: var(--bo-ink);
}
.bo-trans__desc {
	display: block;
	max-width: 540px;
	margin-top: 18px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--bo-grey-dark);
}
.bo-trans__tags {
	display: block;
	margin-top: 18px;
	font-family: var(--bo-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-teal-ink);
}
.bo-trans__arrow {
	flex-shrink: 0;
	padding-top: 10px;
	font-size: 28px;
	line-height: 1;
	color: var(--bo-teal-ink);
	transition: transform .35s var(--bo-ease);
}
.bo-trans__item a:hover .bo-trans__arrow {
	transform: translate(4px, -4px);
}

/* Mit JS: nur der Bereich in Bildmitte ist aktiv, die anderen grau */
.bo-trans.is-js .bo-trans__item {
	border-bottom-color: #DEDCD7;
	transition: border-color .4s var(--bo-ease);
}
.bo-trans.is-js .bo-trans__num,
.bo-trans.is-js .bo-trans__arrow,
.bo-trans.is-js .bo-trans__title {
	color: #BDBCBA;
	transition: color .4s var(--bo-ease), transform .35s var(--bo-ease);
}
/* Texte bleiben immer sichtbar (kein Springen), inaktive sind nur gedimmt */
.bo-trans.is-js .bo-trans__desc,
.bo-trans.is-js .bo-trans__tags {
	opacity: .35;
	transition: opacity .4s var(--bo-ease);
}
.bo-trans.is-js .bo-trans__item.is-active {
	border-bottom-color: var(--bo-ink);
}
.bo-trans.is-js .bo-trans__item.is-active .bo-trans__title { color: var(--bo-ink); }
.bo-trans.is-js .bo-trans__item.is-active .bo-trans__num,
.bo-trans.is-js .bo-trans__item.is-active .bo-trans__arrow { color: var(--bo-teal-ink); }
.bo-trans.is-js .bo-trans__item.is-active .bo-trans__desc,
.bo-trans.is-js .bo-trans__item.is-active .bo-trans__tags {
	opacity: 1;
}
.bo-trans.is-js .bo-trans__item a:hover .bo-trans__title { color: var(--bo-ink); }


/* 9e. Section 06 – Werkstatt (immer dunkel) -------------------------------
   Die Section hat dauerhaft einen dunklen Hintergrund. Die Tokens werden nur
   innerhalb der Section auf Hell-auf-Dunkel umgedreht (Buttons, Abschluss-Link).
   Farben der Werkstatt laufen über --w-*. */

:root {
	--bo-night: #121011;           /* Dunkel-Hintergrund (dunkler als Logo-Schwarz) */
}

.bo-shop {
	--bo-ink: #FFFFFF;
	--bo-grey: rgba(255, 255, 255, .7);
	--bo-grey-dark: rgba(255, 255, 255, .78);
	--bo-line: rgba(255, 255, 255, .2);
	--bo-teal-ink: var(--bo-teal-light);
	--w-bg: var(--bo-night);
	--w-fg: #FFFFFF;
	--w-muted: rgba(255, 255, 255, .78);
	--w-line: rgba(255, 255, 255, .22);
	--w-accent: var(--bo-purple-light);
	padding-block: var(--bo-section);
	background: var(--w-bg);
	color: var(--w-fg);
}
.bo-shop .bo-btn--dark { background: #FFFFFF; color: #231F20 !important; }
.bo-shop .bo-btn--dark:hover { background: var(--bo-teal-light); }
.bo-shop__top {
	align-items: end;
}
.bo-shop__text {
	grid-column: span 5;
}
.bo-shop .bo-label {
	color: var(--w-muted);
}
.bo-shop__h {
	margin-top: 28px !important;
	font-size: 68px;
	line-height: 1;
	color: var(--w-fg);
}
.bo-shop__lead {
	max-width: 460px;
	margin: 32px 0 0;
	font-size: 19px;
	line-height: 1.6;
	color: var(--w-muted);
}
.bo-shop__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	margin-top: 44px;
}
.bo-shop .bo-shop__phone {
	color: var(--w-fg) !important;
	font-family: var(--bo-mono);
	font-weight: 500;
	letter-spacing: .02em;
	border-bottom-color: var(--w-line);
	transition: border-color .3s var(--bo-ease);
}
.bo-shop .bo-shop__phone:hover {
	border-bottom-color: var(--w-accent);
}

/* Ein Bild, querformatig – schließt unten bündig mit dem Text ab */
.bo-shop__img {
	position: relative;
	grid-column: 7 / span 6;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}
.bo-shop .bo-shop__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 62%;
}
.bo-shop__img .bo-corner {
	z-index: 2;
}

/* Leistungen: offene Reihe mit Linien (wie Transport/Kennzahlen, keine Kacheln) */
.bo-shop__services {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bo-gap);
	margin: 96px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.bo-shop__services li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.bo-shop__services a {
	position: relative;
	display: grid !important;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 14px;
	padding: 24px 0 4px;
	border-top: 1px solid var(--w-line);
	color: var(--w-fg) !important;
}
.bo-shop__services a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	background: var(--w-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .5s var(--bo-ease);
}
.bo-shop__services a:hover::before {
	transform: scaleX(1);
}
.bo-shop__num {
	font-family: var(--bo-mono);
	font-size: 12px;
	color: var(--w-muted);
}
.bo-shop__service {
	font-size: 20px;
	line-height: 1.25;
	font-weight: 600;
}
.bo-shop__arrow {
	color: var(--w-accent);
	transition: transform .3s var(--bo-ease);
}
.bo-shop__services a:hover .bo-shop__arrow {
	transform: translateX(4px);
}

/* Abschluss-Link wie bei der Karriere (Klassen .bo-jobs__all wiederverwendet) */
.bo-shop .bo-shop__all {
	margin-top: 96px;
}

/* Großer Abschluss-Link auf Dunkel: Pfeilfläche hell, Pfeil dunkel */
.bo-shop .bo-jobs__all-icon b {
	color: var(--bo-night);
}


/* 9f. Section 07 – Karriere ------------------------------------------------ */

.bo-jobs {
	padding-block: var(--bo-section);
}
.bo-jobs__head {
	align-items: end;
}
.bo-jobs__intro {
	grid-column: span 7;
}
.bo-jobs__h {
	margin-top: 24px !important;
	font-size: 80px;
	line-height: .98;
	font-stretch: 108%;
}
.bo-jobs__aside {
	grid-column: 9 / span 4;
}
.bo-jobs__lead {
	margin: 0 0 28px;
	font-size: 19px;
	line-height: 1.55;
	color: var(--bo-grey-dark);
}
.bo-jobs__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bo-gap);
	margin-top: 64px;
}
.bo-job {
	display: block;
	color: var(--bo-ink) !important;
}
.bo-job__media {
	position: relative;
	display: block;
	height: 640px;
	overflow: hidden;
	background: #B8BCC1;
}
.bo-jobs .bo-job__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 1s var(--bo-ease);
}
.bo-job--transport .bo-job__media img { object-position: 50% 45%; }
.bo-job--werkstatt .bo-job__media img { object-position: 50% 70%; }
.bo-job:hover .bo-job__media img {
	transform: scale(1.04);
}
.bo-job__media .bo-corner {
	z-index: 2;
}
.bo-job__tag {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	padding: 8px 12px;
	background: #fff;
	font-family: var(--bo-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-ink);
}
.bo-job--werkstatt .bo-job__tag {
	left: 24px;
}
.bo-job__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 26px 0;
	border-bottom: 1px solid var(--bo-ink);
}
.bo-job__title {
	display: block;
	font-size: 30px;
	line-height: 1.15;
	font-weight: 700;
	font-stretch: 106%;
}
.bo-job__meta {
	display: block;
	margin-top: 6px;
	font-size: 16px;
	color: var(--bo-grey);
}
.bo-job__cta {
	flex-shrink: 0;
	font-weight: 600;
	white-space: nowrap;
}
.bo-job--transport .bo-job__cta { color: var(--bo-teal-ink); }
.bo-job--werkstatt .bo-job__cta { color: var(--bo-purple); }
.bo-job__cta span {
	display: inline-block;
	transition: transform .3s var(--bo-ease);
}
.bo-job:hover .bo-job__cta span {
	transform: translateX(5px);
}

/* Großer Abschluss-Link */
.bo-jobs__all {
	position: relative;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-top: 80px;
	padding-bottom: 28px;
	color: var(--bo-ink) !important;
}
.bo-jobs__all::before,
.bo-jobs__all::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--bo-ink);
}
.bo-jobs__all::after {
	background: linear-gradient(90deg, var(--bo-teal), var(--bo-purple));
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .7s var(--bo-ease);
}
.bo-jobs__all:hover::after {
	transform: scaleX(1);
}
.bo-jobs__all-title {
	display: block;
	margin-top: 16px;
	font-size: 64px;
	line-height: 1;
	font-weight: 700;
	font-stretch: 108%;
	letter-spacing: -0.02em;
}
.bo-jobs__all-icon {
	display: flex;
	flex-shrink: 0;
	align-items: stretch;
	height: 72px;
}
.bo-jobs__all-icon i {
	display: block;
	width: 36px;
}
.bo-jobs__all-icon i:first-child {
	align-self: flex-start;
	height: 36px;
	background: var(--bo-teal);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.bo-jobs__all-icon i:last-child {
	align-self: flex-end;
	height: 36px;
	background: var(--bo-purple);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.bo-jobs__all-icon b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	background: var(--bo-ink);
	color: #fff;
	font-size: 28px;
	font-weight: 400;
	transition: transform .35s var(--bo-ease);
}
.bo-jobs__all:hover .bo-jobs__all-icon b {
	transform: translate(3px, -3px);
}


/* 9g. Section 08 – Kontakt -------------------------------------------------- */

.bo-contact {
	padding-block: 20px var(--bo-section);
}
.bo-contact__h {
	margin: 24px 0 56px !important;
	font-size: 64px;
	line-height: 1.02;
}
.bo-contact__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bo-gap);
}
.bo-contact__card {
	position: relative;
	display: flex !important;
	flex-direction: column;
	gap: 18px;
	min-height: 260px;
	padding: 44px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #E2E0DB;
	color: var(--bo-ink) !important;
	transition: border-color .3s var(--bo-ease), transform .4s var(--bo-ease);
}
.bo-contact__card:hover {
	border-color: var(--bo-ink);
	transform: translateY(-4px);
}
.bo-contact__card--werkstatt .bo-label { color: var(--bo-purple); }
.bo-contact__card--transport .bo-label { color: var(--bo-teal-ink); }
.bo-contact__title {
	max-width: 420px;
	font-size: 32px;
	line-height: 1.12;
	font-weight: 700;
	font-stretch: 106%;
}
.bo-contact__cta {
	margin-top: auto;
	font-weight: 600;
}
.bo-contact__card--werkstatt .bo-contact__cta { color: var(--bo-purple); }
.bo-contact__card--transport .bo-contact__cta { color: var(--bo-teal-ink); }
.bo-contact__note {
	margin: 32px 0 0;
	font-size: 17px;
	color: var(--bo-grey);
}
.bo-contact__note .bo-textlink {
	color: var(--bo-ink) !important;
}


/* 10. Animations-Startzustände --------------------------------------------
   Greifen NUR, wenn <html> die Klasse .bo-anim trägt (gesetzt im <head>,
   nicht bei „reduzierte Bewegung“, automatisch entfernt falls GSAP fehlt).
   Ohne JS ist also immer alles sichtbar. */

.bo-anim [data-bo-hero] .bo-line > span,
.bo-anim [data-bo-lines] .bo-line > span {
	transform: translateY(105%);
}
.bo-anim [data-bo-hero-fade],
.bo-anim [data-bo-reveal],
.bo-anim [data-bo-stagger] > * {
	opacity: 0;
	transform: translateY(24px);
}
.bo-anim [data-bo-hero] .bo-hero__img--air {
	transform: scale(1.06);
}
/* Flotten-Foto startet hineingezoomt und wird beim Scrollen kleiner (Wert = FLEET_ZOOM im JS) */
.bo-anim [data-bo-hero] .bo-hero__img--fleet {
	transform: scale(1.18);
}
.bo-anim [data-bo-hero] .bo-corner {
	transform: scale(0);
}
/* Bild-Reveal per Maske: data-bo-clip */
.bo-anim [data-bo-clip] {
	clip-path: inset(0 0 100% 0);
}
.bo-anim [data-bo-clip] img {
	transform: scale(1.15);
}
/* Netzwerk: Linien starten unsichtbar (nur mit JS, .is-js setzt das Script) */
.bo-anim .bo-net.is-js .bo-net__road {
	stroke-dashoffset: 1;
}
.bo-anim .bo-net.is-js [data-bo-net-airmask] path {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
}
.bo-anim .bo-net.is-js .bo-corner {
	transform: scale(0);
}


/* ==========================================================================
   12. Unterseite Transport
   Bausteine: Seiten-Hero (.bo-phero), Profil + Zahlen (.bo-profile),
   Leistungen (.bo-svc), Kunden (.bo-clients), Fuhrpark (.bo-fleet),
   Qualität (.bo-quality), Ansprechpartner (.bo-people), Karriere-Teaser (.bo-teaser).
   Responsive-Regeln am Ende dieses Abschnitts.
   ========================================================================== */

/* Parallax-Bilder: Bild ist höher als sein Rahmen, das Script verschiebt es */
.bo-parallax {
	position: relative;
	overflow: hidden;
	background: #C9CCD0;
}
.bo-section .bo-parallax img,
.bo-phero .bo-parallax img {
	position: absolute;
	left: 0;
	top: -8%;
	width: 100%;
	height: 116%;
	max-width: none;
	object-fit: cover;
}
.bo-parallax .bo-corner { z-index: 2; }

/* Gemeinsamer Kopf: Label + H2 links, Text rechts */
.bo-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 64px;
}
.bo-head__main { flex: 1 1 560px; min-width: 0; }
.bo-head__text {
	flex: 1 1 340px;
	max-width: 460px;
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--bo-grey-dark);
}
.bo-h2--page {
	margin-top: 24px !important;
	max-width: 860px;
	font-size: 60px;
	line-height: 1.02;
}

/* --- Seiten-Hero --------------------------------------------------------- */
.bo-phero {
	position: relative;
	height: min(620px, var(--bo-screen));
	min-height: 480px;
	overflow: hidden;
	background: var(--bo-ink-deep);
	color: var(--bo-white);
	font-family: var(--bo-font);
}
.bo-phero, .bo-phero * { box-sizing: border-box; }
.bo-phero__media {
	position: absolute;
	inset: 0;
}
.bo-phero .bo-phero__media img { object-position: 80% 50%; }
.bo-phero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(24, 22, 23, .88) 0%, rgba(24, 22, 23, .6) 45%, rgba(24, 22, 23, .1) 80%);
}
.bo-phero .bo-corner { z-index: 2; }
.bo-phero__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding-bottom: 96px;
}
.bo-phero__crumbs {
	margin: 0;
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}
.bo-phero__crumbs a { color: rgba(255, 255, 255, .75) !important; }
.bo-phero__crumbs a:hover { color: var(--bo-white) !important; }
.bo-phero__title {
	max-width: 900px;
	margin: 24px 0 0;
	font-family: var(--bo-font);
	font-size: 80px;
	line-height: .98;
	font-weight: 700;
	font-stretch: 108%;
	letter-spacing: -0.02em;
	color: var(--bo-white);
	text-transform: none;
}
.bo-phero__lead {
	max-width: 560px;
	margin: 28px 0 0;
	font-size: 20px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}
.bo-phero__link { align-self: flex-start; margin-top: 36px; }

/* --- Profil + Zahlen ------------------------------------------------------- */
.bo-profile { padding-bottom: 40px; }
.bo-profile__row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 64px;
}
.bo-profile__label { flex: 1 1 260px; padding-top: 12px; }
.bo-profile__body { flex: 999 1 640px; min-width: 0; }
.bo-profile .bo-h2--page { margin-top: 0 !important; }
.bo-profile .bo-lead { max-width: 720px; margin-top: 32px; font-size: 20px; line-height: 1.6; }
.bo-stats__grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 80px !important;
}
.bo-stats__grid--4 .bo-stats__value { font-size: 72px; }

/* --- Leistungen ------------------------------------------------------------ */
.bo-svc { padding-bottom: 40px; }
.bo-svc__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px 80px;
	margin-top: 128px;
	padding-top: 48px;
	border-top: 1px solid var(--bo-ink);
}
.bo-svc__item:first-of-type { margin-top: 72px; }
.bo-svc__item--rev { flex-direction: row-reverse; }
.bo-svc__media { flex: 1.15 1 520px; min-width: 0; height: 520px; }
.bo-svc__body  { flex: 1 1 420px; min-width: 0; }
.bo-svc__num {
	display: flex;
	align-items: baseline;
	gap: 16px;
}
.bo-svc__num b {
	font-size: 96px;
	line-height: .8;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.04em;
	color: var(--bo-teal);
}
.bo-svc__num span {
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--bo-grey);
}
.bo-svc__title {
	margin: 28px 0 0;
	font-family: var(--bo-font);
	font-size: 48px;
	line-height: 1.04;
	font-weight: 700;
	font-stretch: 106%;
	letter-spacing: -0.02em;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-svc__text {
	max-width: 540px;
	margin: 20px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--bo-grey-dark);
}
.bo-svc__list {
	margin: 28px 0 0 !important;
	border-top: 1px solid var(--bo-line);
	font-size: 16px;
	font-weight: 600;
}
.bo-svc__list li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--bo-line);
}
.bo-svc__list li::before {
	content: "";
	flex: 0 0 8px;
	height: 8px;
	background: var(--bo-teal);
}
.bo-svc__tags {
	margin: 22px 0 0;
	font-family: var(--bo-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-teal-ink);
}

/* --- Kunden ---------------------------------------------------------------- */
.bo-clients { padding-bottom: 40px; }
.bo-clients__grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 64px !important;
	border-top: 1px solid var(--bo-line);
	border-left: 1px solid var(--bo-line);
}
.bo-clients__grid li {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	background: var(--bo-white);
	border-right: 1px solid var(--bo-line);
	border-bottom: 1px solid var(--bo-line);
	margin-bottom: 0 !important;
}
.bo-section .bo-clients__grid img { width: auto; max-width: 70%; }
.bo-clients__grid .is-dhl img   { height: 36px; }
.bo-clients__grid .is-ups img   { height: 74px; }
.bo-clients__grid .is-fedex img { height: 48px; }

/* --- Fuhrpark (dunkles Band) --------------------------------------------- */
.bo-fleet {
	margin-top: var(--bo-section);
	padding-block: 120px;
	background: var(--bo-ink-deep);
	color: var(--bo-white);
}
.bo-fleet__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px 72px;
}
.bo-fleet__body  { flex: 1 1 440px; min-width: 0; }
.bo-fleet__media { flex: 1 1 520px; min-width: 0; height: 560px; }
.bo-fleet .bo-h2--page { color: var(--bo-white); }
.bo-fleet__text {
	max-width: 520px;
	margin: 28px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .8);
}
.bo-fleet__facts {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin-top: 40px !important;
}
.bo-fleet__facts li {
	padding: 18px 0;
	border-top: 1px solid rgba(255, 255, 255, .2);
}
.bo-fleet__facts span {
	display: block;
	font-family: var(--bo-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-teal-light);
}
.bo-fleet__facts b {
	display: block;
	margin-top: 6px;
	font-size: 22px;
	font-weight: 700;
}
.bo-fleet__link {
	display: inline-block;
	margin-top: 40px;
	color: var(--bo-white) !important;
	border-bottom-color: var(--bo-purple-light);
}
.bo-fleet__link:hover { border-bottom-color: var(--bo-white); }

/* --- Qualität -------------------------------------------------------------- */
.bo-quality { padding-bottom: 40px; }
.bo-quality__grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bo-gap);
	margin-top: 64px !important;
}
.bo-quality__grid li {
	padding-top: 24px;
	border-top: 2px solid var(--bo-ink);
}
.bo-quality__grid h3 {
	margin: 0;
	font-family: var(--bo-font);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-quality__grid p {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--bo-grey);
}
.bo-downloads {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	margin-top: 72px;
	padding: 32px;
	background: var(--bo-white);
	border: 1px solid #E2E0DB;
}
.bo-downloads__title {
	display: block;
	margin-top: 10px;
	font-size: 20px;
	font-weight: 700;
	font-stretch: 106%;
}
.bo-downloads__head .bo-label { color: var(--bo-teal-ink); }
.bo-downloads__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}
.bo-downloads__links .bo-textlink:hover { color: var(--bo-teal-ink) !important; }

/* --- Ansprechpartner ------------------------------------------------------- */
.bo-people { padding-bottom: 40px; }
.bo-people__grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bo-gap);
	margin-top: 56px !important;
}
.bo-person {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 28px;
	background: var(--bo-white);
	border: 1px solid #E2E0DB;
}
.bo-person__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 140px;
	height: 170px;
	overflow: hidden;
	background: var(--bo-line);
	font-family: var(--bo-mono);
	font-size: 11px;
	color: var(--bo-grey);
}
.bo-section .bo-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.bo-person__body { flex: 1 1 200px; min-width: 0; }
.bo-person .bo-label { color: var(--bo-teal-ink); }
.bo-person__name {
	margin: 10px 0 0;
	font-size: 26px;
	line-height: 1.15;
	font-weight: 700;
	font-stretch: 106%;
}
.bo-person__contact {
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.8;
}
.bo-person__contact a:hover { color: var(--bo-teal-ink) !important; }

/* --- Karriere-Teaser ------------------------------------------------------- */
.bo-teaser {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	background: var(--bo-ink);
	color: var(--bo-white) !important;
}
.bo-teaser__media { display: block; flex: 1 1 360px; min-height: 360px; }
.bo-teaser .bo-teaser__media img { object-position: 50% 40%; }
.bo-teaser__body {
	flex: 2 1 420px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px;
}
.bo-teaser .bo-label { color: rgba(255, 255, 255, .7); }
.bo-teaser__title {
	display: block;
	margin-top: 16px;
	font-size: 52px;
	line-height: 1.02;
	font-weight: 700;
	font-stretch: 108%;
	letter-spacing: -0.02em;
}
.bo-teaser__text {
	display: block;
	max-width: 520px;
	margin-top: 18px;
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .8);
}
.bo-teaser .bo-btn { align-self: flex-start; margin-top: 28px; }
.bo-teaser:hover .bo-btn { background: #005F55; }
.bo-teaser:hover .bo-btn__arrow { transform: translateX(5px); }

/* --- Transport: Tablet ----------------------------------------------------- */
@media (max-width: 1100px) {
	.bo-h2--page { font-size: 48px; }
	.bo-phero__title { font-size: clamp(44px, 6.4vw, 68px); }
	.bo-stats__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bo-stats__grid--4 .bo-stats__value { font-size: 56px; }
	.bo-svc__item { gap: 40px 48px; margin-top: 96px; }
	.bo-svc__media { height: 440px; }
	.bo-svc__num b { font-size: 72px; }
	.bo-svc__title { font-size: 40px; }
	.bo-fleet__media { height: 440px; }
	.bo-quality__grid { grid-template-columns: 1fr; }
	.bo-people__grid { grid-template-columns: 1fr; }
	.bo-teaser__body { padding: 48px; }
	.bo-teaser__title { font-size: 42px; }
}

/* --- Transport: Smartphone ------------------------------------------------- */
@media (max-width: 767px) {
	.bo-h2--page { margin-top: 20px !important; font-size: 34px; }
	/* Feste Zeilenumbrüche der Desktop-Headlines aufheben: Text fließt frei */
	.bo-phero__title .bo-line, .bo-phero__title .bo-line > span,
	.bo-h2--page .bo-line, .bo-h2--page .bo-line > span,
	.bo-wshero__title .bo-line, .bo-wshero__title .bo-line > span { display: inline; }
	.bo-head__text { font-size: 17px; }
	.bo-phero { min-height: 520px; }
	.bo-phero__scrim { background: linear-gradient(0deg, rgba(24, 22, 23, .9) 0%, rgba(24, 22, 23, .55) 60%, rgba(24, 22, 23, .2) 100%); }
	.bo-phero__content { padding-bottom: 48px; }
	.bo-phero__title { margin-top: 18px; font-size: clamp(34px, 10vw, 42px); }
	.bo-phero__lead { margin-top: 20px; font-size: 17px; }
	.bo-phero__link { margin-top: 28px; }
	.bo-profile__label { flex-basis: 100%; padding-top: 0; }
	.bo-profile .bo-lead { margin-top: 20px; font-size: 17px; }
	.bo-stats__grid--4 { margin-top: 48px !important; }
	.bo-stats__grid--4 .bo-stats__value { font-size: 36px; }
	.bo-svc__item { gap: 28px; margin-top: 64px; padding-top: 32px; }
	.bo-svc__item:first-of-type { margin-top: 48px; }
	.bo-svc__media { flex-basis: 100%; height: 260px; }
	.bo-svc__body { flex-basis: 100%; }
	.bo-svc__num b { font-size: 56px; }
	.bo-svc__title { margin-top: 20px; font-size: 30px; }
	.bo-svc__text { font-size: 17px; }
	.bo-clients__grid { grid-template-columns: 1fr; margin-top: 40px !important; }
	.bo-clients__grid li { height: 120px; }
	.bo-clients__grid .is-dhl img   { height: 28px; }
	.bo-clients__grid .is-ups img   { height: 56px; }
	.bo-clients__grid .is-fedex img { height: 36px; }
	.bo-fleet { padding-block: 72px; }
	.bo-fleet__media { flex-basis: 100%; height: 280px; }
	.bo-fleet__text { font-size: 17px; }
	.bo-quality__grid { margin-top: 40px !important; }
	.bo-downloads { margin-top: 48px; padding: 24px; }
	.bo-downloads__links { flex-direction: column; }
	.bo-people__grid { margin-top: 36px !important; }
	.bo-person { padding: 20px; }
	.bo-person__photo { flex-basis: 100px; height: 124px; }
	.bo-person__name { font-size: 22px; }
	.bo-teaser__media { min-height: 260px; flex-basis: 100%; }
	.bo-teaser__body { padding: 32px 24px; }
	.bo-teaser__title { font-size: 30px; }
	.bo-teaser__text { font-size: 16px; }
}


/* ==========================================================================
   13. Unterseite Werkstatt (LKW-Werkstatt Köln)
   Bausteine: Split-Hero (.bo-wshero), Leistungen (.bo-wsvc), Fahrzeuge (.bo-wcars),
   Warum Bonillo (.bo-why), Ablauf (.bo-steps), Termin + Formular (.bo-book, .bo-form),
   FAQ (.bo-faq), Anfahrt (.bo-route), mobile Leiste (.bo-mbar).
   Wiederverwendet: .bo-head, .bo-h2--page, .bo-parallax, .bo-teaser (Abschnitt 12).
   ========================================================================== */

/* Lila Marker für Listen auf der Werkstattseite */
.bo-dotlist { margin: 0 !important; font-size: 16px; font-weight: 600; }
.bo-dotlist li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 !important;
	padding: 12px 0;
	border-top: 1px solid #E2E0DB;
}
.bo-dotlist li:last-child { border-bottom: 1px solid #E2E0DB; }
.bo-dotlist li::before {
	content: "";
	flex: 0 0 8px;
	height: 8px;
	background: var(--bo-purple);
}

/* --- Split-Hero ------------------------------------------------------------ */
.bo-wshero { padding-block: 72px 0; }
.bo-wshero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 48px 72px;
}
.bo-wshero__text {
	flex: 1.35 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 24px;
}
.bo-wshero__crumbs {
	margin: 0;
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-grey);
}
.bo-wshero__crumbs a:hover { color: var(--bo-purple) !important; }
.bo-wshero__title {
	margin: 28px 0 0;
	font-family: var(--bo-font);
	font-size: clamp(48px, 4.4vw, 64px);
	line-height: .98;
	font-weight: 700;
	font-stretch: 108%;
	letter-spacing: -0.02em;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-wshero__lead {
	max-width: 560px;
	margin: 28px 0 0;
	font-size: 20px;
	line-height: 1.55;
	color: var(--bo-grey-dark);
}
.bo-wshero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 40px;
}
.bo-phonelink {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--bo-line);
	font-family: var(--bo-mono);
	font-size: 17px;
	font-weight: 500;
	color: var(--bo-ink) !important;
	transition: border-color .3s var(--bo-ease);
}
.bo-phonelink:hover { border-bottom-color: var(--bo-purple); }
.bo-wshero__trust {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 44px 0 0 !important;
	font-size: 15px;
	font-weight: 600;
}
.bo-wshero__trust li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
}
.bo-wshero__trust li::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--bo-purple);
}
.bo-wshero__media { flex: 1 1 480px; min-width: 0; min-height: 560px; }
.bo-wshero__media img { object-position: 50% 60%; }

/* --- Leistungen ------------------------------------------------------------ */
.bo-wsvc { padding-bottom: 40px; }
.bo-wsvc__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 72px 80px;
	margin-top: 80px;
}
.bo-wsvc__item {
	padding-top: 32px;
	border-top: 1px solid var(--bo-ink);
	scroll-margin-top: 120px;
}
.bo-wsvc__num {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
}
.bo-wsvc__num b {
	font-size: 56px;
	line-height: .8;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.04em;
	color: var(--bo-purple);
}
.bo-wsvc__num span {
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--bo-grey);
}
.bo-wsvc__title {
	margin: 24px 0 0;
	font-family: var(--bo-font);
	font-size: 38px;
	line-height: 1.05;
	font-weight: 700;
	font-stretch: 106%;
	letter-spacing: -0.02em;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-wsvc__text {
	margin: 18px 0 24px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--bo-grey-dark);
}

/* --- Fahrzeuge & Marken (hellgraues Band) --------------------------------- */
.bo-wcars {
	margin-top: var(--bo-section);
	padding-block: 120px;
	background: #F4F3F0;
}
.bo-wcars__row {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 80px;
}
.bo-wcars__intro { flex: 1 1 440px; min-width: 0; }
.bo-wcars__text {
	max-width: 520px;
	margin: 28px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--bo-grey-dark);
}
.bo-wcars__lists {
	flex: 1 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.bo-wcars .bo-label { margin-bottom: 14px; color: var(--bo-purple); }
.bo-wcars__types {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0 !important;
	font-size: 20px;
	font-weight: 700;
}
.bo-wcars__types li {
	margin: 0 !important;
	padding: 16px 0;
	border-top: 1px solid var(--bo-line);
}
.bo-wcars__types li:nth-child(-n+2) { border-top-color: var(--bo-ink); }
.bo-wcars__brands {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--bo-ink);
	font-size: 34px;
	line-height: 1.35;
	font-weight: 700;
	font-stretch: 106%;
}

/* --- Warum Bonillo (dunkles Band) ---------------------------------------- */
.bo-why {
	padding-block: var(--bo-section);
	background: var(--bo-night, #121011);
	color: var(--bo-white);
}
.bo-why__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px 80px;
}
.bo-why__intro { flex: 1 1 520px; min-width: 0; }
.bo-why .bo-h2 {
	margin-top: 24px !important;
	font-size: 72px;
	line-height: 1;
	font-stretch: 108%;
	color: var(--bo-white);
}
.bo-why__text {
	max-width: 560px;
	margin: 28px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .8);
}
.bo-why__media { flex: 1 1 420px; min-width: 0; height: 440px; background: #2A2627; }
.bo-why__grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
	margin: 88px 0 0 !important;
}
.bo-why__grid li {
	margin: 0 !important;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .25);
}
.bo-why__grid li:first-child { border-top: 2px solid var(--bo-purple-light); }
.bo-why__grid h3 {
	margin: 0;
	font-family: var(--bo-font);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-white);
	text-transform: none;
}
.bo-why__grid p {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .75);
}

/* --- Ablauf ---------------------------------------------------------------- */
.bo-steps { padding-bottom: 40px; }
.bo-steps__list {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
	margin: 64px 0 0 !important;
}
.bo-steps__list li {
	margin: 0 !important;
	padding-top: 24px;
	border-top: 1px solid var(--bo-ink);
}
.bo-steps__list li:first-child { border-top: 2px solid var(--bo-purple); }
.bo-steps__list span {
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--bo-purple);
}
.bo-steps__list h3 {
	margin: 14px 0 0;
	font-family: var(--bo-font);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-steps__list p {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--bo-grey);
}

/* --- Termin + Formular ----------------------------------------------------- */
.bo-book { padding-bottom: 40px; scroll-margin-top: 80px; }
.bo-book__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--bo-gap);
	margin-top: 56px;
}
.bo-book__form {
	flex: 999 1 560px;
	min-width: 0;
	padding: 48px;
	background: #F4F3F0;
}
.bo-book__aside {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bo-gap);
}
.bo-book__card {
	padding: 28px;
	border: 1px solid #E2E0DB;
	background: var(--bo-white);
}
.bo-book__card .bo-label { color: var(--bo-purple); }
.bo-book__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 140px;
	margin-bottom: 20px;
	overflow: hidden;
	background: #E2E0DB;
	font-family: var(--bo-mono);
	font-size: 11px;
	color: var(--bo-grey);
}
.bo-section .bo-book__photo img { width: 100%; height: 100%; object-fit: cover; }
.bo-book__name {
	margin: 8px 0 0;
	font-size: 24px;
	line-height: 1.15;
	font-weight: 700;
	font-stretch: 106%;
}
.bo-book__contact { margin: 14px 0 0; font-size: 16px; line-height: 1.8; }
.bo-book__contact a:hover { color: var(--bo-purple) !important; }
.bo-hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 24px;
	margin: 14px 0 0;
	font-size: 16px;
}
.bo-hours dt { font-weight: 600; }
.bo-hours dd { margin: 0; }

/* Contact Form 7 im Bonillo-Look (Formular-Vorlage: builder-html/werkstatt/w06-cf7-formular.txt) */
.bo-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}
.bo-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--bo-ink);
}
.bo-form__field--full,
.bo-form__consent,
.bo-form__submit { grid-column: 1 / -1; }
.bo-form input[type="text"],
.bo-form input[type="email"],
.bo-form input[type="tel"],
.bo-form select,
.bo-form textarea {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0 16px;
	height: 52px;
	border: 1px solid var(--bo-line);
	border-radius: 0;
	background: var(--bo-white);
	box-shadow: none;
	font: 400 16px/1.4 var(--bo-font);
	color: var(--bo-ink);
}
.bo-form textarea { height: auto; min-height: 140px; padding: 14px 16px; resize: vertical; }
/* Auswahlfeld: eigener Pfeil (Betheme blendet den Browser-Pfeil per appearance:none aus) */
.bo-form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23231F20' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 14px 9px;
	cursor: pointer;
}
.bo-form select::-ms-expand { display: none; }
.bo-form input:focus,
.bo-form select:focus,
.bo-form textarea:focus {
	outline: 2px solid var(--bo-purple);
	outline-offset: -1px;
	border-color: var(--bo-purple);
}
/* Zusatzfelder, die nur bei einer bestimmten Auswahl erscheinen (data-bo-show, JS in bonillo-site.js) */
.bo-form__extra {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}
.bo-form__extra[hidden] { display: none !important; }
.bo-form__legend { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--bo-ink); }
/* Radios als Auswahl-Knöpfe */
.bo-form__group .wpcf7-radio,
.bo-form__group .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.bo-form__group .wpcf7-list-item { margin: 0 !important; }
.bo-form__group .wpcf7-list-item label { position: relative; display: block; margin: 0; cursor: pointer; }
.bo-form__group .wpcf7-list-item input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.bo-form__group .wpcf7-list-item-label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--bo-line);
	background: var(--bo-white);
	font-size: 15px;
	font-weight: 500;
	color: var(--bo-ink);
	transition: border-color .2s var(--bo-ease), background-color .2s var(--bo-ease), color .2s var(--bo-ease);
}
.bo-form__group .wpcf7-list-item label:hover .wpcf7-list-item-label { border-color: var(--bo-ink); }
.bo-form__group .wpcf7-list-item input:checked + .wpcf7-list-item-label {
	border-color: var(--bo-ink);
	background: var(--bo-ink);
	color: var(--bo-white);
}
.bo-form__group .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--bo-teal-ink);
	outline-offset: 2px;
}
.bo-form--general .bo-form__group .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: var(--bo-teal-ink); border-color: var(--bo-teal-ink); }
.bo-form__consent { font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--bo-grey-dark); }
.bo-form__consent .wpcf7-list-item { margin: 0; }
.bo-form__consent label { display: flex; gap: 12px; align-items: flex-start; }
.bo-form__consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--bo-purple); }
.bo-form__consent a { text-decoration: underline; }
.bo-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.bo-form .wpcf7-submit {
	padding: 18px 30px;
	border: 0;
	border-radius: 0;
	background: var(--bo-purple);
	color: var(--bo-white);
	font: 600 16px/1.2 var(--bo-font);
	cursor: pointer;
	transition: background-color .25s var(--bo-ease);
}
.bo-form .wpcf7-submit:hover { background: #721473; }
.bo-form__hint { font-size: 14px; color: var(--bo-grey); }
.bo-section .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--bo-purple); }
.bo-section .wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--bo-purple);
	font-size: 15px;
}
.bo-section .wpcf7 form.sent .wpcf7-response-output { border-color: var(--bo-teal); }
.bo-section .wpcf7-spinner { margin: 0 0 0 12px; }

/* --- FAQ ------------------------------------------------------------------- */
.bo-faq { padding-bottom: 40px; }
.bo-faq__row {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 80px;
}
.bo-faq__head { flex: 1 1 340px; min-width: 0; }
.bo-faq__list { flex: 999 1 640px; min-width: 0; border-top: 1px solid var(--bo-ink); }
.bo-faq details { border-bottom: 1px solid var(--bo-line); }
.bo-faq summary {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 0;
	list-style: none;
	cursor: pointer;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 700;
	font-stretch: 106%;
}
.bo-faq summary::-webkit-details-marker { display: none; }
.bo-faq summary::after {
	content: "+";
	flex-shrink: 0;
	font-weight: 400;
	color: var(--bo-purple);
	transition: transform .3s var(--bo-ease);
}
.bo-faq details[open] summary::after { transform: rotate(45deg); }
.bo-faq summary:hover { color: var(--bo-purple); }
.bo-faq details p {
	max-width: 720px;
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--bo-grey-dark);
}

/* --- Anfahrt --------------------------------------------------------------- */
.bo-route { padding-bottom: 40px; }
.bo-route__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-gap);
	margin-top: 32px;
}
.bo-route__map {
	flex: 999 1 560px;
	min-width: 0;
	min-height: 420px;
	background: #E2E0DB;
}
.bo-route__map iframe,
.bo-route__map ._brlbs-content-blocker,
.bo-route__map .BorlabsCookie { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
.bo-route__info {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	background: var(--bo-ink);
	color: var(--bo-white);
}
.bo-route__info h2 {
	margin: 0;
	font-family: var(--bo-font);
	font-size: 36px;
	line-height: 1.05;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-white);
	text-transform: none;
}
.bo-route__info address { margin: 0; font-style: normal; font-size: 18px; line-height: 1.6; }
.bo-route__note { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.bo-route__info .bo-textlink { align-self: flex-start; color: var(--bo-white) !important; border-bottom-color: var(--bo-purple-light); }

/* Karriere-Teaser in Lila (Werkstatt) */
.bo-teaser--werkstatt .bo-btn { background: var(--bo-purple); }
.bo-teaser--werkstatt:hover .bo-btn { background: #721473; }

/* --- Mobile Leiste (nur Smartphone) -------------------------------------------
   Ohne JS: „Termin anfragen“. Das Script setzt .is-open während der Öffnungszeiten
   (Zeiten in data-hours, Feiertage NRW werden berücksichtigt) → „Werkstatt anrufen“. */
.bo-mbar { display: none; }

/* --- Werkstatt: Tablet ----------------------------------------------------- */
@media (max-width: 1100px) {
	.bo-wshero__title { font-size: clamp(44px, 5.6vw, 60px); }
	.bo-wshero__media { min-height: 460px; }
	.bo-wsvc__grid { gap: 56px 48px; }
	.bo-wsvc__title { font-size: 32px; }
	.bo-wcars__brands { font-size: 28px; }
	.bo-why .bo-h2 { font-size: 56px; }
	.bo-why__grid,
	.bo-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bo-book__form { padding: 36px; }
}
@media (max-width: 900px) {
	.bo-wsvc__grid { grid-template-columns: 1fr; }
}

/* --- Werkstatt: Smartphone ------------------------------------------------- */
@media (max-width: 767px) {
	.bo-wshero { padding-top: 32px; }
	.bo-wshero__title { margin-top: 18px; font-size: 40px; line-height: 1; }
	.bo-wshero__lead { margin-top: 18px; font-size: 17px; }
	.bo-wshero__actions { margin-top: 28px; }
	.bo-wshero__trust { margin-top: 28px !important; flex-direction: column; }
	.bo-wshero__media { flex-basis: 100%; min-height: 300px; }
	.bo-wsvc__grid { gap: 48px; margin-top: 48px; }
	.bo-wsvc__num b { font-size: 44px; }
	.bo-wsvc__title { margin-top: 18px; font-size: 28px; }
	.bo-wsvc__text { font-size: 16px; }
	.bo-wcars { padding-block: 72px; }
	.bo-wcars__types { grid-template-columns: 1fr; font-size: 18px; }
	.bo-wcars__types li:nth-child(2) { border-top-color: var(--bo-line); }
	.bo-wcars__brands { font-size: 22px; }
	.bo-why .bo-h2 { font-size: 36px; }
	.bo-why__text { font-size: 17px; }
	.bo-why__media { flex-basis: 100%; height: 260px; }
	.bo-why__grid,
	.bo-steps__list { grid-template-columns: 1fr; margin-top: 48px !important; }
	.bo-book__row { margin-top: 36px; }
	.bo-book__form { padding: 24px 20px; }
	.bo-form { grid-template-columns: 1fr; }
	.bo-faq summary { padding: 20px 0; font-size: 18px; }
	.bo-faq details p { font-size: 16px; }
	.bo-route__map,
	.bo-route__map iframe { min-height: 300px; }
	.bo-route__info { padding: 24px; }
	.bo-route__info h2 { font-size: 28px; }

	/* Feste Leiste unten */
	.bo-mbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: block;
		padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
		background: var(--bo-white);
		border-top: 1px solid #E2E0DB;
		box-shadow: 0 -8px 24px rgba(35, 31, 32, .08);
		font-family: var(--bo-font);
	}
	.bo-mbar a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		height: 56px;
		padding: 0 20px;
		font-size: 16px;
		font-weight: 600;
		text-decoration: none;
		color: var(--bo-white) !important;
	}
	.bo-mbar__call { display: none !important; background: var(--bo-ink); }
	.bo-mbar__call span:first-child { display: flex; align-items: center; gap: 10px; }
	.bo-mbar__status {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: var(--bo-mono);
		font-size: 11px;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--bo-teal-light);
	}
	.bo-mbar__status::before {
		content: "";
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--bo-teal-light);
	}
	.bo-mbar__form { background: var(--bo-purple); }
	.bo-mbar__note {
		margin: 8px 0 0;
		font-family: var(--bo-mono);
		font-size: 11px;
		letter-spacing: .04em;
		text-align: center;
		color: var(--bo-grey);
	}
	.bo-mbar.is-open .bo-mbar__call { display: flex !important; }
	.bo-mbar.is-open .bo-mbar__form,
	.bo-mbar.is-open .bo-mbar__note { display: none; }
	body:has(.bo-mbar) { padding-bottom: 110px !important; }
	html.bo-menu-open .bo-mbar { display: none; }
}


/* ==========================================================================
   14. Unterseite Unternehmen
   Bausteine: Zahlen (.bo-ustats), Geschäftsführung (.bo-gf), Historie mit
   horizontalem Zeitstrahl (.bo-hist), Standorte (.bo-sites), Zulassungen (.bo-certs).
   Wiederverwendet: .bo-phero (Hero), .bo-stats__grid--4, .bo-jobs__all (Abschluss-Link).
   ========================================================================== */

.bo-ustats { padding-bottom: 40px; }
.bo-ustats .bo-stats__grid--4 { margin-top: 40px !important; }

/* --- Geschäftsführung ------------------------------------------------------- */
.bo-gf { padding-bottom: 40px; }
.bo-gf__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px 80px;
}
.bo-gf__photo {
	position: relative;
	flex: 1 1 380px;
	max-width: 480px;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #E2E0DB;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bo-mono);
	font-size: 12px;
	color: var(--bo-grey);
}
.bo-section .bo-gf__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bo-gf__photo .bo-corner { z-index: 2; }
.bo-gf__body { flex: 1 1 520px; min-width: 0; }
.bo-gf__quote {
	margin: 28px 0 0;
	padding: 0;
	border: 0;
	font-family: var(--bo-font);
	font-size: 25px;
	line-height: 1.5 !important;
	font-weight: 700;
	font-stretch: 106%;
	letter-spacing: -0.015em;
	font-style: normal;
	color: var(--bo-ink);
}
.bo-gf__quote::before, .bo-gf__quote::after { content: none !important; }
.bo-gf__text {
	margin: 32px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--bo-grey-dark);
}
.bo-gf__name { margin: 32px 0 0; font-size: 20px; font-weight: 700; }
.bo-gf__role { margin-top: 4px; color: var(--bo-teal-ink); }

/* --- Historie: horizontaler Zeitstrahl -------------------------------------
   Ohne JS bzw. unter 1101px: senkrechte Liste. Ab Desktop mit JS (.is-js):
   Section rastet ein, die Spur fährt beim Scrollen nach links. */
.bo-hist {
	margin-top: var(--bo-section);
	background: var(--bo-night, #121011);
	color: var(--bo-white);
	overflow: hidden;
}
.bo-hist .bo-h2--page { color: var(--bo-white); }
.bo-hist__hint {
	flex: 1 1 320px;
	max-width: 420px;
	margin: 0;
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
.bo-hist__viewport { margin-top: 72px; }
.bo-hist__track {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.bo-hist__progress { display: none; }
.bo-hist__item {
	position: relative;
	margin: 0 !important;
	padding: 0 0 48px 32px;
	border-left: 1px solid rgba(255, 255, 255, .22);
}
.bo-hist__item::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 10px;
	width: 7px;
	height: 7px;
	background: var(--bo-white);
}
.bo-hist__item--key::before { left: -6px; width: 11px; height: 11px; background: var(--bo-teal); }
.bo-hist__item--werkstatt::before { left: -6px; width: 11px; height: 11px; background: var(--bo-purple-light); }
.bo-hist__year {
	margin: 0;
	font-family: var(--bo-font);
	font-size: 56px;
	line-height: .9;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.04em;
	color: var(--bo-white);
}
.bo-hist__item--key .bo-hist__year { font-size: 72px; color: var(--bo-teal); }
.bo-hist__item--werkstatt .bo-hist__year { font-size: 72px; color: var(--bo-purple-light); }
.bo-hist__media {
	display: block;
	width: 100%;
	max-width: 420px;
	height: 220px;
	margin-top: 24px;
	overflow: hidden;
	background: #2A2627;
}
.bo-section .bo-hist__media img { width: 100%; height: 100%; object-fit: cover; }
.bo-hist__media--logo { display: flex; align-items: center; justify-content: center; background: var(--bo-white); }
.bo-section .bo-hist__media--logo img { width: 70%; height: auto; object-fit: contain; }
.bo-hist__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bo-mono);
	font-size: 12px;
	color: rgba(255, 255, 255, .6);
}
.bo-hist__title {
	margin: 20px 0 0;
	font-family: var(--bo-font);
	font-size: 21px;
	line-height: 1.25;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-white);
	text-transform: none;
}
.bo-hist__item--key .bo-hist__title,
.bo-hist__item--werkstatt .bo-hist__title { font-size: 24px; }
.bo-hist__text {
	max-width: 420px;
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .75);
}

/* Desktop mit JS: horizontale Spur, Section füllt den Bildschirm */
@media (min-width: 1101px) {
	.bo-hist.is-js {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: var(--bo-screen);
		min-height: 640px;
		padding-block: 48px;
	}
	.bo-hist.is-js .bo-h2--page { font-size: clamp(40px, 6vh, 64px); }
	.bo-hist.is-js > .bo-wrap { width: 100%; box-sizing: border-box; }
	.bo-hist.is-js .bo-hist__viewport {
		margin-top: clamp(32px, 6vh, 64px);
		padding-left: max(var(--bo-gutter), calc((100vw - var(--bo-max)) / 2 + var(--bo-gutter)));
	}
	.bo-hist.is-js .bo-hist__track {
		display: flex;
		gap: 56px;
		width: max-content;
		padding-right: 160px !important;
		border-top: 1px solid rgba(255, 255, 255, .22);
		will-change: transform;
	}
	.bo-hist.is-js .bo-hist__progress {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: -2px;
		height: 3px;
		background: var(--bo-teal);
		transform: scaleX(0);
		transform-origin: 0 50%;
	}
	.bo-hist.is-js .bo-hist__item {
		flex: 0 0 300px;
		padding: 36px 0 0;
		border-left: 0;
	}
	.bo-hist.is-js .bo-hist__item--img { flex-basis: 360px; }
	.bo-hist.is-js .bo-hist__item--key,
	.bo-hist.is-js .bo-hist__item--werkstatt { flex-basis: 380px; }
	.bo-hist.is-js .bo-hist__item::before { left: 0; top: -4px; }
	.bo-hist.is-js .bo-hist__item--key::before,
	.bo-hist.is-js .bo-hist__item--werkstatt::before { left: 0; top: -6px; }
	.bo-hist.is-js .bo-hist__media { height: clamp(140px, 22vh, 220px); }
	.bo-hist.is-js .bo-hist__year { font-size: clamp(44px, 6vh, 56px); }
	.bo-hist.is-js .bo-hist__item--key .bo-hist__year,
	.bo-hist.is-js .bo-hist__item--werkstatt .bo-hist__year { font-size: clamp(56px, 7.5vh, 72px); }
}

/* --- Standorte ------------------------------------------------------------ */
.bo-sites { padding-bottom: 40px; }
.bo-sites__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bo-gap);
	margin-top: 56px;
}
.bo-site-card { border: 1px solid #E2E0DB; background: var(--bo-white); }
.bo-site-card__media { height: 340px; }
.bo-site-card__body { padding: 32px; }
.bo-site-card .bo-label { color: var(--bo-teal-ink); }
.bo-site-card__title {
	margin: 10px 0 0;
	font-family: var(--bo-font);
	font-size: 30px;
	line-height: 1.1;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-site-card__text { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--bo-grey-dark); }
.bo-site-card address { margin: 18px 0 0; font-style: normal; font-size: 16px; line-height: 1.7; }

/* --- Zulassungen & Mitgliedschaften ---------------------------------------- */
.bo-certs { padding-bottom: 40px; }
.bo-certs__grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 var(--bo-gap);
	margin: 56px 0 0 !important;
	border-top: 1px solid var(--bo-ink);
}
.bo-certs__grid li { margin: 0 !important; padding: 24px 0; border-bottom: 1px solid var(--bo-line); }
.bo-certs__grid .bo-label { color: var(--bo-teal-ink); }
.bo-certs__grid .is-werkstatt .bo-label { color: var(--bo-purple); }
.bo-certs__grid p:last-child { margin: 8px 0 0; font-size: 19px; line-height: 1.3; font-weight: 700; }

.bo-uteaser { padding-bottom: var(--bo-section); }
.bo-uteaser .bo-jobs__all { margin-top: 0; }

/* --- Unternehmen: Tablet --------------------------------------------------- */
@media (max-width: 1100px) {
	.bo-gf__quote { font-size: 34px; }
	.bo-hist__viewport { padding-inline: var(--bo-gutter); }
	.bo-certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.bo-sites__grid { grid-template-columns: 1fr; }
}

/* --- Unternehmen: Smartphone ----------------------------------------------- */
@media (max-width: 767px) {
	.bo-gf__photo { flex-basis: 100%; }
	.bo-gf__quote { margin-top: 20px; font-size: 26px; }
	.bo-gf__text { margin-top: 20px; font-size: 17px; }
	.bo-hist__viewport { margin-top: 40px; }
	.bo-hist__year { font-size: 44px; }
	.bo-hist__item--key .bo-hist__year,
	.bo-hist__item--werkstatt .bo-hist__year { font-size: 52px; }
	.bo-hist__media { height: 200px; }
	.bo-hist__title { font-size: 19px; }
	.bo-hist__item { padding-bottom: 40px; padding-left: 24px; }
	.bo-site-card__media { height: 240px; }
	.bo-site-card__body { padding: 24px; }
	.bo-site-card__title { font-size: 26px; }
	.bo-certs__grid { grid-template-columns: 1fr; margin-top: 36px !important; }
}


/* --- Werte (TTB) – Unternehmensseite, zwischen Geschäftsführung und Historie */
.bo-values { padding-bottom: 40px; }
.bo-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 48px;
	margin-top: 64px;
}
.bo-value { --v: var(--bo-ink); padding-top: 28px; border-top: 3px solid var(--v); }
.bo-value--teal { --v: var(--bo-teal); }
.bo-value--purple { --v: var(--bo-purple); }
.bo-value__letter {
	display: block;
	font-family: var(--bo-font);
	font-size: clamp(120px, 12vw, 180px);
	line-height: .8;
	font-weight: 800;
	font-stretch: 115%;
	letter-spacing: -0.04em;
	color: var(--v);
}
.bo-value__title {
	margin: 28px 0 0;
	font-family: var(--bo-font);
	font-size: 30px;
	line-height: 1.1;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-value__body p { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--bo-grey-dark); }

@media (max-width: 1100px) {
	.bo-values__grid { gap: 32px; }
	.bo-value__title { font-size: 26px; }
}
@media (max-width: 767px) {
	.bo-values__grid { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
	.bo-value { display: flex; align-items: flex-start; gap: 20px; padding: 24px 0 28px; border-top-width: 2px; }
	.bo-value__letter { flex-shrink: 0; width: 64px; font-size: 80px; }
	.bo-value__title { margin-top: 0; font-size: 24px; }
	.bo-value__body p { margin-top: 10px; font-size: 16px; }
}


/* ==========================================================================
   15. Unterseite Kontakt
   Bausteine: Einstieg (.bo-khero), Ansprechpartner (.bo-team), Nachricht (.bo-msg,
   Formular .bo-form--general), Standorte & Anfahrt (.bo-locs, .bo-loc).
   Wiederverwendet: .bo-contact__card (Startseite), .bo-h2--page, .bo-hours, .bo-form.
   ========================================================================== */

/* --- Einstieg -------------------------------------------------------------- */
.bo-khero { padding-block: 88px 40px; }
.bo-khero__crumbs {
	margin: 0;
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-grey);
}
.bo-khero__crumbs a:hover { color: var(--bo-teal-ink) !important; }
.bo-khero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 64px;
	margin-top: 28px;
}
.bo-khero__title {
	flex: 1 1 560px;
	min-width: 0;
	margin: 0;
	font-family: var(--bo-font);
	font-size: clamp(56px, 6vw, 88px);
	line-height: .96;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.03em;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-khero__info {
	flex: 1 1 320px;
	max-width: 420px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--bo-grey-dark);
}
.bo-khero__info address { margin: 0; font-style: normal; }
.bo-khero__direct {
	margin: 16px 0 0;
	font-family: var(--bo-mono);
	font-size: 15px;
	font-weight: 500;
}
.bo-khero__direct a:hover { color: var(--bo-teal-ink) !important; }
.bo-contact__cards--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 64px;
}
.bo-contact__cards--3 .bo-contact__card { min-height: 240px; padding: 36px; }
.bo-contact__cards--3 .bo-contact__title { font-size: 26px; }

/* --- Ansprechpartner ------------------------------------------------------- */
.bo-team { padding-bottom: 40px; scroll-margin-top: var(--bo-header-h); }
.bo-team__list { margin-top: 64px; border-top: 1px solid var(--bo-ink); }
.bo-team__group {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	padding: 32px 0;
	border-bottom: 1px solid var(--bo-line);
}
.bo-team__area {
	flex: 1 1 240px;
	margin: 0;
	font-family: var(--bo-font);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-team__group--werkstatt .bo-team__area { color: var(--bo-purple); }
.bo-team__people {
	flex: 999 1 640px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.bo-team__name { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 700; }
.bo-team__person .bo-label { margin-top: 4px; font-size: 11px; }
.bo-team__contact { margin: 12px 0 0; font-size: 16px; line-height: 1.7; }
.bo-team__contact a:hover { color: var(--bo-teal-ink) !important; }
.bo-team__group--werkstatt .bo-team__contact a:hover { color: var(--bo-purple) !important; }

/* --- Nachricht ------------------------------------------------------------- */
.bo-msg { padding-bottom: 40px; }
.bo-msg__row {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 80px;
}
.bo-msg__head { flex: 1 1 340px; min-width: 0; }
.bo-msg__text {
	max-width: 400px;
	margin: 24px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--bo-grey-dark);
}
.bo-msg__form {
	flex: 999 1 640px;
	min-width: 0;
	padding: clamp(24px, 3.5vw, 48px);
	background: #F4F3F0;
}
/* Allgemeines Formular: türkis statt lila, dunkler Button */
.bo-form--general input:focus,
.bo-form--general select:focus,
.bo-form--general textarea:focus {
	outline-color: var(--bo-teal-ink);
	border-color: var(--bo-teal-ink);
}
.bo-form--general .bo-form__consent input { accent-color: var(--bo-teal-ink); }
.bo-form--general .wpcf7-submit { background: var(--bo-ink); }
.bo-form--general .wpcf7-submit:hover { background: var(--bo-teal-ink); }
.bo-msg .wpcf7-not-valid-tip { color: var(--bo-teal-ink); }
.bo-msg .wpcf7 form .wpcf7-response-output { border-color: var(--bo-ink); }

/* --- Standorte & Anfahrt --------------------------------------------------- */
.bo-locs { padding-bottom: var(--bo-section); }
.bo-locs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bo-gap);
	margin-top: 56px;
}
.bo-loc { border: 1px solid #E2E0DB; background: var(--bo-white); }
.bo-loc__map { height: 300px; background: #E2E0DB; }
.bo-loc__map iframe,
.bo-loc__map ._brlbs-content-blocker,
.bo-loc__map .BorlabsCookie { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }
.bo-loc__body {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	padding: 32px;
}
.bo-loc__main { flex: 1 1 220px; min-width: 0; }
.bo-loc .bo-label { color: var(--bo-teal-ink); }
.bo-loc__title {
	margin: 10px 0 0;
	font-family: var(--bo-font);
	font-size: 30px;
	line-height: 1.1;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-loc address { margin: 14px 0 16px; font-style: normal; font-size: 16px; line-height: 1.7; }
.bo-loc .bo-textlink:hover { color: var(--bo-teal-ink) !important; }
.bo-loc__hours { flex: 1 1 200px; margin: 0; align-content: start; font-size: 15px; }
.bo-loc__hours a:hover { color: var(--bo-teal-ink) !important; }

/* --- Kontakt: Tablet ------------------------------------------------------- */
@media (max-width: 1100px) {
	.bo-contact__cards--3 { grid-template-columns: 1fr; }
	.bo-contact__cards--3 .bo-contact__card { min-height: 0; }
	.bo-team__people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bo-locs__grid { grid-template-columns: 1fr; }
}

/* --- Kontakt: Smartphone --------------------------------------------------- */
@media (max-width: 767px) {
	.bo-khero { padding-block: 32px 24px; }
	.bo-khero__title { font-size: 44px; }
	.bo-khero__title .bo-line { display: inline; }
	.bo-khero__title .bo-line > span { display: inline; }
	.bo-khero__info { font-size: 16px; }
	.bo-contact__cards--3 { margin-top: 40px; }
	.bo-contact__cards--3 .bo-contact__card { padding: 28px 24px 32px; }
	.bo-contact__cards--3 .bo-contact__title { font-size: 24px; }
	.bo-team__list { margin-top: 36px; }
	.bo-team__group { padding: 24px 0; }
	.bo-team__area { flex-basis: 100%; font-size: 20px; }
	.bo-team__people { flex-basis: 100%; grid-template-columns: 1fr; gap: 20px; }
	.bo-msg__form { margin-inline: calc(var(--bo-gutter) * -1); padding: 24px var(--bo-gutter); }
	.bo-form--general { grid-template-columns: 1fr; }
	.bo-form__extra { grid-template-columns: 1fr; }
	.bo-locs__grid { margin-top: 36px; }
	.bo-loc__map { height: 240px; }
	.bo-loc__body { padding: 24px; }
	.bo-loc__title { font-size: 26px; }
}


/* ==========================================================================
   16. Unterseite Karriere
   Bausteine: Hero (.bo-chero), Drei Wege (.bo-ways), Benefits (.bo-perks),
   Mitarbeiterstimmen (.bo-voices), Offene Stellen (.bo-openings + Shortcode .bo-joblist),
   Kurzbewerbung (.bo-apply). Wiederverwendet: .bo-steps (Modifier --karriere),
   .bo-faq (Modifier --karriere), .bo-form--general.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.bo-chero { padding-block: 72px 0; }
.bo-chero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 48px 72px;
}
.bo-chero__text {
	flex: 1.3 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 24px;
}
.bo-chero__crumbs {
	margin: 0;
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-grey);
}
.bo-chero__crumbs a:hover { color: var(--bo-teal-ink) !important; }
.bo-chero__title {
	margin: 28px 0 0;
	font-family: var(--bo-font);
	font-size: clamp(52px, 5.4vw, 80px);
	line-height: .96;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.03em;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-chero__lead {
	max-width: 560px;
	margin: 28px 0 0;
	font-size: 20px;
	line-height: 1.55;
	color: var(--bo-grey-dark);
}
.bo-chero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 36px;
}
.bo-chero__actions .bo-textlink:hover { color: var(--bo-teal-ink) !important; }
.bo-chero__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: 600px;
	margin: 56px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--bo-line);
}
.bo-chero__facts dt {
	font-size: 34px;
	line-height: 1;
	font-weight: 700;
	font-stretch: 108%;
}
.bo-chero__facts dd {
	margin: 8px 0 0;
	font-family: var(--bo-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-grey);
}
.bo-chero__media {
	position: relative;
	flex: 1 1 380px;
	min-width: 0;
	min-height: 640px;
	overflow: hidden;
	background: #C9CCD0;
}
.bo-section .bo-chero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

/* --- Drei Wege ins Team ---------------------------------------------------- */
.bo-ways { padding-bottom: 40px; }
.bo-ways__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 48px;
	margin-top: 64px;
}
.bo-way { padding-top: 28px; border-top: 3px solid var(--bo-ink); }
.bo-way--fahren { border-top-color: var(--bo-teal); }
.bo-way--werkstatt { border-top-color: var(--bo-purple); }
.bo-way--fahren .bo-label { color: var(--bo-teal-ink); }
.bo-way--werkstatt .bo-label { color: var(--bo-purple); }
.bo-way h3 {
	margin: 12px 0 0;
	font-family: var(--bo-font);
	font-size: 28px;
	line-height: 1.15;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-way p:not(.bo-label) { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--bo-grey-dark); }

/* --- Benefits -------------------------------------------------------------- */
.bo-perks { padding-bottom: 40px; }
.bo-perks__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 32px;
	margin-top: 56px;
	border-top: 1px solid var(--bo-ink);
}
.bo-perk { padding: 28px 0 30px; border-bottom: 1px solid var(--bo-line); }
.bo-perk span { font-family: var(--bo-mono); font-size: 12px; color: var(--bo-teal-ink); }
.bo-perk h3 {
	margin: 14px 0 0;
	font-family: var(--bo-font);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-perk p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--bo-grey-dark); }

/* --- Mitarbeiterstimmen ---------------------------------------------------- */
.bo-voices {
	margin-top: 120px;
	padding-block: 120px var(--bo-section);
	background: #F4F3F0;
}
.bo-voices__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 40px;
	align-items: start;
	margin-top: 72px;
}
.bo-voice { position: relative; margin: 0; --v: var(--bo-ink); --v-text: var(--bo-grey); }
.bo-voice--fahren { --v: var(--bo-teal); --v-text: var(--bo-teal-ink); }
.bo-voice--werkstatt { --v: var(--bo-purple); --v-text: var(--bo-purple); }
.bo-voice__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #E2E0DB;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bo-section .bo-voice__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bo-voice__ph { font-family: var(--bo-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bo-grey); }
.bo-voice__badge {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	margin: 0;
	border-radius: 50%;
	background: var(--v);
	color: var(--bo-white);
	transform: rotate(8deg);
}
.bo-voice--werkstatt .bo-voice__badge { transform: rotate(-8deg); }
.bo-voice__badge span { font-family: var(--bo-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.bo-voice__badge strong { font-size: 24px; line-height: 1; font-weight: 800; font-stretch: 110%; }
.bo-voice__quote {
	position: relative;
	margin: -88px 0 0 32px;
	padding: 28px 28px 26px;
	border: 0;
	background: var(--bo-white) !important;
	font-family: var(--bo-font);
	font-style: normal;
	color: var(--bo-ink);
}
.bo-voice__quote::before {
	content: "\201C";
	display: block;
	height: 32px;
	font-size: 72px;
	line-height: .9;
	font-weight: 700;
	color: var(--v);
}
.bo-voice__quote p { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 700; font-stretch: 106%; }
.bo-voice__quote footer { margin-top: 16px; font-size: 15px; }
.bo-voice__quote footer strong { font-weight: 600; }
.bo-voice__quote footer span {
	margin-left: 8px;
	font-family: var(--bo-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--v-text);
}
.bo-voice--werkstatt .bo-voice__quote::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 64px;
	height: 32px;
	background: var(--bo-purple);
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.bo-voices__cta { margin-top: 56px; color: var(--bo-ink) !important; }
.bo-voices__cta:hover { color: var(--bo-teal-ink) !important; }

/* --- Offene Stellen (Shortcode [bo_jobs]) --------------------------------- */
.bo-openings { padding-bottom: 40px; scroll-margin-top: var(--bo-header-h); }
.bo-joblist { margin-top: 48px; }
.bo-joblist__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.bo-joblist__chip {
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--bo-line);
	border-radius: 0;
	background: var(--bo-white);
	color: var(--bo-ink);
	font: 600 15px/1 var(--bo-font);
	cursor: pointer;
	transition: border-color .2s var(--bo-ease), background-color .2s var(--bo-ease), color .2s var(--bo-ease);
}
.bo-joblist__chip span { opacity: .6; font-weight: 400; }
.bo-joblist__chip:hover { border-color: var(--bo-ink); }
.bo-joblist__chip[aria-pressed="true"] { border-color: var(--bo-ink); background: var(--bo-ink); color: var(--bo-white); }
.bo-joblist__items { margin: 0 !important; padding: 0 !important; list-style: none !important; border-top: 1px solid var(--bo-ink); }
.bo-joblist__items li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.bo-joblist__items li[hidden] { display: none !important; }
.bo-jobrow {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
	padding: 28px 0;
	border-bottom: 1px solid var(--bo-line);
	color: var(--bo-ink) !important;
}
.bo-jobrow__dot { flex-shrink: 0; width: 12px; height: 12px; background: var(--bo-ink); }
.bo-jobrow--fahren .bo-jobrow__dot { background: var(--bo-teal); }
.bo-jobrow--werkstatt .bo-jobrow__dot { background: var(--bo-purple); }
.bo-jobrow__title {
	flex: 999 1 420px;
	min-width: 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	font-stretch: 106%;
	transition: color .2s var(--bo-ease);
}
.bo-jobrow__ort { flex: 1 1 180px; font-size: 16px; color: var(--bo-grey-dark); }
.bo-jobrow__art {
	flex: 1 1 140px;
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-grey);
}
.bo-jobrow__arrow { font-size: 20px; font-weight: 600; transition: transform .3s var(--bo-ease); }
.bo-jobrow:hover .bo-jobrow__arrow { transform: translateX(5px); }
.bo-jobrow--fahren:hover .bo-jobrow__title { color: var(--bo-teal-ink); }
.bo-jobrow--werkstatt:hover .bo-jobrow__title { color: var(--bo-purple); }
.bo-joblist__empty { margin: 48px 0 0; padding: 28px 0; border-top: 1px solid var(--bo-ink); border-bottom: 1px solid var(--bo-line); font-size: 18px; }
.bo-openings__note { margin: 32px 0 0; font-size: 17px; color: var(--bo-grey); }
.bo-openings__note .bo-textlink { color: var(--bo-ink) !important; font-size: 17px; }
.bo-openings__note .bo-textlink:hover { color: var(--bo-teal-ink) !important; }

/* --- Ablauf (Modifier für .bo-steps) -------------------------------------- */
.bo-steps--karriere .bo-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
.bo-steps--karriere .bo-steps__list li:first-child { border-top: 2px solid var(--bo-teal); }
.bo-steps--karriere .bo-steps__list span {
	font-family: var(--bo-font);
	font-size: 56px;
	line-height: 1;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: 0;
	color: var(--bo-teal);
}
.bo-steps--karriere .bo-steps__list h3 { margin-top: 20px; }
.bo-steps--karriere .bo-steps__list p { font-size: 17px; color: var(--bo-grey-dark); }

/* --- Kurzbewerbung --------------------------------------------------------- */
.bo-apply { padding-bottom: 40px; scroll-margin-top: var(--bo-header-h); }
.bo-apply__row { display: flex; flex-wrap: wrap; gap: 40px 80px; }
.bo-apply__head { flex: 1 1 340px; min-width: 0; }
.bo-apply__text { max-width: 420px; margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--bo-grey-dark); }
.bo-apply__wa {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding: 16px 22px;
	border: 1px solid var(--bo-ink);
	font-weight: 600;
	color: var(--bo-ink) !important;
	transition: background-color .2s var(--bo-ease), color .2s var(--bo-ease);
}
.bo-apply__wa:hover { background: var(--bo-ink); color: var(--bo-white) !important; }
.bo-apply__contact {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--bo-line);
}
.bo-apply__photo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 104px;
	overflow: hidden;
	background: #E2E0DB;
	font-family: var(--bo-mono);
	font-size: 10px;
	color: var(--bo-grey);
}
.bo-section .bo-apply__photo img { width: 100%; height: 100%; object-fit: cover; }
.bo-apply__name { margin: 6px 0 0; font-size: 20px; font-weight: 700; }
.bo-apply__links { margin: 6px 0 0; font-size: 16px; line-height: 1.7; }
.bo-apply__links a:hover { color: var(--bo-teal-ink) !important; }
.bo-apply__form {
	flex: 999 1 640px;
	min-width: 0;
	padding: clamp(24px, 3.5vw, 48px);
	background: #F4F3F0;
}
.bo-form input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px dashed #B5B2AC;
	background: var(--bo-white);
	font: 400 15px/1.4 var(--bo-font);
	color: var(--bo-ink);
}

/* --- FAQ (Modifier) -------------------------------------------------------- */
.bo-faq--karriere { padding-bottom: var(--bo-section); }
.bo-faq--karriere summary::after { color: var(--bo-teal-ink); }
.bo-faq--karriere summary:hover { color: var(--bo-teal-ink); }

/* --- Karriere: Tablet ------------------------------------------------------ */
@media (max-width: 1100px) {
	.bo-chero__media { min-height: 520px; }
	.bo-ways__grid { grid-template-columns: 1fr; }
	.bo-perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bo-voices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bo-steps--karriere .bo-steps__list { grid-template-columns: 1fr; }
}

/* --- Karriere: Smartphone -------------------------------------------------- */
@media (max-width: 767px) {
	.bo-chero { padding-top: 32px; }
	.bo-chero__title { font-size: 44px; }
	.bo-chero__title .bo-line,
	.bo-chero__title .bo-line > span { display: inline; }
	.bo-chero__lead { font-size: 17px; }
	.bo-chero__facts { margin-top: 40px; }
	.bo-chero__facts dt { font-size: 28px; }
	.bo-chero__media { flex-basis: 100%; min-height: 0; aspect-ratio: 4 / 5; }
	.bo-ways__grid { margin-top: 36px; }
	.bo-way h3 { font-size: 24px; }
	.bo-perks__grid { grid-template-columns: 1fr; margin-top: 36px; }
	.bo-perk { padding: 20px 0 22px; }
	.bo-perk h3 { font-size: 20px; }
	.bo-voices { margin-top: 80px; padding-top: 80px; }
	.bo-voices__grid { grid-template-columns: 1fr; margin-top: 40px; }
	.bo-voice__quote { margin: -72px 0 0 20px; padding: 24px 22px 22px; }
	.bo-voice__quote p { font-size: 19px; }
	.bo-joblist { margin-top: 32px; }
	.bo-jobrow { gap: 6px 16px; padding: 22px 0; }
	.bo-jobrow__title { flex-basis: calc(100% - 60px); font-size: 20px; }
	.bo-jobrow__ort,
	.bo-jobrow__art { flex: 0 1 auto; padding-left: 28px; }
	.bo-jobrow__art { padding-left: 0; }
	.bo-jobrow__arrow { display: none; }
	.bo-steps--karriere .bo-steps__list span { font-size: 44px; }
	.bo-apply__form { margin-inline: calc(var(--bo-gutter) * -1); padding: 24px var(--bo-gutter); }
}


/* ==========================================================================
   17. Stellenanzeige (Einzelbeitrag)
   .bo-ad = Inhalt + Infokarte rechts (Desktop: mitlaufend), .bo-adbar = Bewerben-Leiste mobil.
   Farbe über den Bereich: .bo-ad--fahren (türkis) / .bo-ad--werkstatt (lila) / .bo-ad--buero.
   ========================================================================== */

.bo-ad { --ad: var(--bo-ink); --ad-text: var(--bo-ink); padding-block: 72px var(--bo-section); }
.bo-ad--fahren { --ad: var(--bo-teal); --ad-text: var(--bo-teal-ink); }
.bo-ad--werkstatt { --ad: var(--bo-purple); --ad-text: var(--bo-purple); }

.bo-ad__crumbs {
	margin: 0;
	font-family: var(--bo-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--bo-grey);
}
.bo-ad__crumbs a:hover { color: var(--ad-text) !important; }
.bo-ad__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px 80px;
	margin-top: 40px;
}
.bo-ad__main { flex: 999 1 560px; min-width: 0; max-width: 820px; }
.bo-ad__area { color: var(--ad-text); }
.bo-ad__title {
	margin: 20px 0 0;
	font-family: var(--bo-font);
	font-size: clamp(44px, 4.6vw, 68px);
	line-height: .98;
	font-weight: 800;
	font-stretch: 110%;
	letter-spacing: -0.025em;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-ad__lead { margin: 28px 0 0; font-size: 20px; line-height: 1.6; color: var(--bo-grey-dark); }

.bo-ad__block { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--bo-ink); }
.bo-ad__h {
	margin: 0;
	font-family: var(--bo-font);
	font-size: 30px;
	line-height: 1.15;
	font-weight: 700;
	font-stretch: 106%;
	letter-spacing: -0.01em;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-ad__list { margin: 24px 0 0 !important; padding: 0 !important; list-style: none !important; }
.bo-ad__list li {
	position: relative;
	margin: 0 !important;
	padding: 14px 0 14px 28px;
	border-bottom: 1px solid var(--bo-line);
	font-size: 17px;
	line-height: 1.55;
	list-style: none !important;
}
.bo-ad__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22px;
	width: 10px;
	height: 10px;
	background: var(--ad);
}
.bo-ad__perks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
	margin-top: 8px;
}
.bo-ad__perk { padding: 20px 0 22px; border-bottom: 1px solid var(--bo-line); }
.bo-ad__perk h3 {
	margin: 0;
	font-family: var(--bo-font);
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
	font-stretch: 106%;
	color: var(--bo-ink);
	text-transform: none;
}
.bo-ad__perk p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--bo-grey-dark); }
.bo-ad__apply p { margin: 20px 0 0; font-size: 17px; line-height: 1.65; color: var(--bo-grey-dark); }
.bo-ad__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
.bo-ad__actions .bo-textlink { color: var(--bo-ink) !important; }
.bo-ad__actions .bo-textlink:hover { color: var(--ad-text) !important; }

/* Infokarte */
.bo-ad__aside {
	flex: 1 1 340px;
	min-width: 0;
	position: sticky;
	top: calc(var(--bo-header-h) + var(--bo-adminbar) + 24px);
}
.bo-ad__card { border: 1px solid #E2E0DB; background: var(--bo-white); }
.bo-ad__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #C9CCD0; }
.bo-section .bo-ad__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bo-ad__card-body { padding: 28px; }
.bo-ad__facts { margin: 16px 0 0; }
.bo-ad__facts div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--bo-line);
	font-size: 15px;
}
.bo-ad__facts dt { color: var(--bo-grey); }
.bo-ad__facts dd { margin: 0; font-weight: 600; text-align: right; }
.bo-ad__cta { justify-content: space-between; width: 100%; margin-top: 24px; box-sizing: border-box; }
.bo-ad__wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 12px;
	padding: 14px 18px;
	border: 1px solid var(--bo-ink);
	font-weight: 600;
	color: var(--bo-ink) !important;
	transition: background-color .2s var(--bo-ease), color .2s var(--bo-ease);
}
.bo-ad__wa:hover { background: var(--bo-ink); color: var(--bo-white) !important; }
.bo-ad__contact { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bo-line); }
.bo-ad__name { margin: 6px 0 0; font-size: 18px; font-weight: 700; }
.bo-ad__links { margin: 4px 0 0; font-size: 15px; line-height: 1.7; }
.bo-ad__links a:hover { color: var(--ad-text) !important; }

.bo-ad__back {
	display: inline-block;
	margin-top: 64px;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	font-weight: 600;
	color: var(--bo-ink) !important;
}
.bo-ad__back:hover { color: var(--ad-text) !important; }

/* Bewerben-Leiste (nur Tablet/Smartphone) */
.bo-adbar { display: none; }

@media (max-width: 1100px) {
	.bo-ad__aside { position: static; flex-basis: 100%; }
	.bo-ad__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
	.bo-ad__media { aspect-ratio: auto; min-height: 100%; }

	.bo-adbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: block;
		padding: 12px 16px 20px;
		background: var(--bo-white);
		border-top: 1px solid #E2E0DB;
		box-shadow: 0 -8px 24px rgba(35, 31, 32, .08);
	}
	.bo-adbar .bo-btn { justify-content: space-between; width: 100%; box-sizing: border-box; }
	body:has(.bo-adbar) { padding-bottom: 96px; }
}

@media (max-width: 767px) {
	.bo-ad { padding-top: 32px; }
	.bo-ad__row { margin-top: 24px; }
	.bo-ad__title { font-size: 38px; }
	.bo-ad__title .bo-line,
	.bo-ad__title .bo-line > span { display: inline; }
	.bo-ad__lead { font-size: 17px; }
	.bo-ad__block { margin-top: 48px; }
	.bo-ad__h { font-size: 24px; }
	.bo-ad__list li { font-size: 16px; }
	.bo-ad__perks { grid-template-columns: 1fr; }
	.bo-ad__card { display: block; }
	.bo-ad__media { aspect-ratio: 4 / 3; min-height: 0; }
	.bo-ad__card-body { padding: 24px 20px; }
	.bo-ad__back { margin-top: 48px; }
}


/* ==========================================================================
   11. Tablet / Mobile
   Breakpoints: ≤ 1100px Tablet (Burger-Menü), ≤ 767px Smartphone.
   ========================================================================== */

/* Elemente nur für das mobile Menü – auf dem Desktop ausgeblendet */
.bo-burger,
.bo-nav__mobile {
	display: none;
}

/* ---------- Tablet (≤ 1100px) ---------- */
@media (max-width: 1100px) {
	:root {
		--bo-gutter: 40px;
		--bo-section: 104px;
		--bo-header-h: 76px;
	}

	/* Header + Burger-Menü */
	.bo-header__logo img { height: 48px; }
	.bo-header__cta { display: none !important; }
	.bo-burger {
		position: relative;
		z-index: 2;
		display: block;
		width: 48px;
		height: 48px;
		margin-right: -12px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.bo-burger span {
		position: absolute;
		left: 12px;
		right: 12px;
		height: 2px;
		background: var(--bo-ink);
		transition: transform .35s var(--bo-ease), top .35s var(--bo-ease);
	}
	.bo-burger span:first-child { top: 19px; }
	.bo-burger span:last-child  { top: 27px; }
	.bo-header.is-open .bo-burger span:first-child { top: 23px; transform: rotate(45deg); }
	.bo-header.is-open .bo-burger span:last-child  { top: 23px; transform: rotate(-45deg); }

	.bo-nav {
		position: fixed;
		top: calc(var(--bo-header-h) + var(--bo-adminbar));
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 40px;
		padding: 32px var(--bo-gutter) 40px;
		overflow-y: auto;
		background: var(--bo-white);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity .3s var(--bo-ease), transform .4s var(--bo-ease), visibility 0s linear .4s;
	}
	.bo-header.is-open .bo-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .3s var(--bo-ease), transform .4s var(--bo-ease), visibility 0s;
	}
	.bo-nav__list {
		flex-direction: column;
		gap: 0;
		border-top: 1px solid var(--bo-ink);
	}
	.bo-nav__list li {
		border-bottom: 1px solid var(--bo-line);
	}
	.bo-nav__link {
		padding-block: 18px;
		font-size: 30px;
		line-height: 1.1;
		font-weight: 700;
		font-stretch: 106%;
		letter-spacing: -0.01em;
	}
	.bo-nav__link::after { display: none; }
	.bo-nav__link.is-active { color: var(--bo-teal-ink) !important; }
	.bo-nav__mobile {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.bo-nav__mobile .bo-btn { margin-bottom: 8px; }
	.bo-nav__phone {
		font-family: var(--bo-mono);
		font-size: 15px;
		color: var(--bo-ink) !important;
	}
	html.bo-menu-open,
	html.bo-menu-open body {
		overflow: hidden;
	}

	/* Hero */
	.bo-hero__title { font-size: clamp(48px, 7.4vw, 72px); }
	.bo-hero__title .bo-line > span { white-space: normal; }
	.bo-hero__content { padding-bottom: 104px; }
	.bo-hero__meta { bottom: 112px; }

	/* Intro */
	.bo-intro .bo-h2 { font-size: 72px; }
	.bo-intro__label { grid-column: span 3; }
	.bo-intro__body  { grid-column: span 9; }
	.bo-intro__links { margin-top: 72px !important; }
	.bo-intro__item { padding: 28px 24px; }
	.bo-intro__item .bo-h3 { font-size: 24px; }

	/* Netzwerk: Legende nach oben rechts (unten kollidiert sie mit dem Text) */
	.bo-net__head { top: 104px; }
	.bo-net__legend { top: 104px; bottom: auto; }

	/* Zahlen */
	.bo-stats__value { font-size: clamp(44px, 6vw, 64px); white-space: normal; }

	/* Transport: einspaltig, keine fixierte Spalte */
	.bo-trans__aside,
	.bo-trans__list { grid-column: 1 / -1; }
	.bo-trans__aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bo-gap); align-items: end; }
	.bo-trans__aside > .bo-label,
	.bo-trans__aside > .bo-trans__h,
	.bo-trans__aside > .bo-trans__lead { grid-column: 1 / -1; }
	.bo-trans__media { grid-column: 1 / -1; height: 420px; }
	.bo-trans__list { margin-top: 56px !important; }
	.bo-trans__title { font-size: 40px; }

	/* Werkstatt */
	.bo-shop__h { font-size: 56px; }
	.bo-shop__text { grid-column: span 6; }
	.bo-shop__img  { grid-column: 7 / span 6; aspect-ratio: 4 / 5; }
	.bo-shop__services { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; margin-top: 72px !important; }

	/* Karriere */
	.bo-jobs__h { font-size: 64px; }
	.bo-jobs__intro { grid-column: span 7; }
	.bo-jobs__aside { grid-column: 8 / span 5; }
	.bo-job__media { height: 520px; }
	.bo-job__row { flex-direction: column; align-items: flex-start; }
	.bo-job__title { font-size: 26px; }
	.bo-jobs__all { flex-wrap: nowrap; }
	.bo-jobs__all-title { font-size: clamp(40px, 6vw, 52px); }

	/* Kontakt */
	.bo-contact__h { font-size: 52px; }
	.bo-contact__card { padding: 36px; }
	.bo-contact__title { font-size: 28px; }

	/* Footer */
	.bo-footer__inner { padding-top: 140px; }
	.bo-footer__claim { font-size: 96px; }
	.bo-footer__contact-value { font-size: 26px; }
	.bo-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bo-footer__brand { grid-column: 1 / -1; }
}

/* ---------- Tablet hochkant (≤ 900px) ---------- */
@media (max-width: 900px) {
	/* Werkstatt: Text über dem Bild */
	.bo-shop__text,
	.bo-shop__img { grid-column: 1 / -1; }
	.bo-shop__img { margin-top: 48px; aspect-ratio: 16 / 10; }
	/* Karriere: Kopf untereinander */
	.bo-jobs__intro,
	.bo-jobs__aside { grid-column: 1 / -1; }
	.bo-jobs__aside { margin-top: 28px; max-width: 520px; }
	/* Footer-Kontakte untereinander */
	.bo-footer__contacts { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Smartphone (≤ 767px) ---------- */
@media (max-width: 767px) {
	:root {
		--bo-gutter: 20px;
		--bo-gap: 16px;
		--bo-section: 80px;
		--bo-header-h: 64px;
	}

	/* Alle Raster einspaltig */
	.bo-grid > * { grid-column: 1 / -1 !important; }

	/* Logo-Ecken kleiner (Größe kommt sonst aus --w im Markup) */
	.bo-corner {
		width: calc(var(--w, 180px) * .5) !important;
		height: calc(var(--w, 180px) * .25) !important;
	}

	.bo-header__logo img { height: 40px; }
	.bo-nav__link { font-size: 26px; padding-block: 15px; }

	.bo-h2 { font-size: 40px; }
	.bo-lead { margin-top: 24px; font-size: 18px; }
	.bo-btn { padding: 16px 22px; }

	/* Hero */
	.bo-hero { min-height: 520px; --bo-slant: 45vw; }
	.bo-hero__scrim {
		background:
			linear-gradient(0deg, rgba(24, 22, 23, .9) 0%, rgba(24, 22, 23, .55) 55%, rgba(24, 22, 23, .15) 100%);
	}
	.bo-hero .bo-hero__img--fleet.bo-hero__img--fleet { object-position: 82% 50%; }
	.bo-hero__content { padding-bottom: 48px; }
	.bo-hero__title { font-size: clamp(34px, 10vw, 44px); line-height: 1.02; margin-top: 20px; }
	.bo-hero__title .bo-line > span { white-space: normal; }
	.bo-hero__lead { margin-top: 20px; font-size: 17px; }
	.bo-hero__actions { gap: 20px 24px; margin-top: 28px; }
	.bo-hero__meta { display: none; }
	.bo-kicker { font-size: 11px; }
	.bo-kicker::before { width: 28px; }

	/* Intro */
	.bo-intro { padding-bottom: 72px; }
	.bo-intro__label { padding-top: 0; margin-bottom: 20px; }
	.bo-intro .bo-h2 { font-size: 44px; }
	.bo-intro__links { grid-template-columns: 1fr; margin-top: 48px !important; }
	.bo-intro__item,
	.bo-intro__item:first-child,
	.bo-intro__item:last-child {
		padding: 24px 0;
		border-right: 0;
		border-bottom: 1px solid var(--bo-line);
	}
	.bo-intro__item .bo-h3 { margin-top: 12px; font-size: 22px; }
	.bo-intro__item p { font-size: 15px; }

	/* Netzwerk */
	.bo-net { min-height: 560px; }
	.bo-net__head { top: 40px; }
	.bo-net__inner { bottom: 36px; padding-inline: var(--bo-gutter); }
	.bo-net__title { margin-top: 12px; font-size: clamp(28px, 8.4vw, 36px); }
	.bo-net__desc { margin-top: 14px; font-size: 16px; }
	.bo-net__progress { margin-top: 24px; }
	.bo-net__progress span { width: 40px; }
	.bo-net__legend { display: none !important; }
	.bo-net__pin i { font-size: 10px; }
	.bo-net__pin--airport i { font-size: 11px; }

	/* Zahlen: zwei Spalten */
	.bo-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px !important; }
	.bo-stats__item { gap: 8px; padding: 24px 12px 26px 0; }
	.bo-stats__value { font-size: 34px; white-space: normal; }
	.bo-stats__label { font-size: 14px; }

	/* Transport */
	.bo-trans { padding-top: 24px; }
	.bo-trans__aside { display: block; }
	.bo-trans .bo-trans__h { font-size: 40px; }
	.bo-trans__lead { margin-top: 20px; font-size: 17px; }
	.bo-trans__media { height: 240px; margin-top: 32px; }
	.bo-trans__btn { margin-top: 24px; }
	.bo-trans__list { margin-top: 48px !important; }
	.bo-trans__item a { gap: 14px; padding: 32px 0 36px; }
	.bo-trans__num { width: 18px; padding-top: 9px; }
	.bo-trans__title { font-size: 28px; }
	.bo-trans__arrow { padding-top: 4px; font-size: 22px; }
	.bo-trans__desc { margin-top: 12px; font-size: 16px; }
	.bo-trans__tags { margin-top: 14px; font-size: 10px; line-height: 1.7; }

	/* Werkstatt */
	.bo-shop__h { margin-top: 20px !important; font-size: 40px; }
	.bo-shop__lead { margin-top: 20px; font-size: 17px; }
	.bo-shop__actions { gap: 20px 28px; margin-top: 28px; }
	.bo-shop__img { margin-top: 40px; aspect-ratio: 4 / 3; }
	.bo-shop__services { grid-template-columns: 1fr; row-gap: 0; margin-top: 40px !important; }
	.bo-shop__services a { padding: 18px 0 16px; }
	.bo-shop__service { font-size: 18px; }
	.bo-shop .bo-shop__all { margin-top: 56px; }

	/* Großer Abschluss-Link (Karriere + Werkstatt) */
	.bo-jobs__all { margin-top: 56px; padding-bottom: 20px; flex-wrap: nowrap; align-items: flex-end; }
	.bo-jobs__all-title { margin-top: 10px; font-size: 30px; line-height: 1.05; }
	.bo-jobs__all-icon { height: 48px; }
	.bo-jobs__all-icon i { width: 24px; }
	.bo-jobs__all-icon i:first-child,
	.bo-jobs__all-icon i:last-child { height: 24px; }
	.bo-jobs__all-icon b { width: 48px; font-size: 20px; }

	/* Karriere */
	.bo-jobs__h { font-size: 44px; }
	.bo-jobs__aside { margin-top: 24px; }
	.bo-jobs__lead { margin-bottom: 20px; font-size: 17px; }
	.bo-jobs__cards { grid-template-columns: 1fr; row-gap: 40px; margin-top: 40px; }
	.bo-job__media { height: auto; aspect-ratio: 4 / 5; }
	.bo-job__tag { left: 16px; bottom: 16px; }
	.bo-job--werkstatt .bo-job__tag { left: 16px; }
	.bo-job__row { gap: 12px; padding: 20px 0; }
	.bo-job__title { font-size: 22px; }
	.bo-job__meta { font-size: 15px; }

	/* Kontakt */
	.bo-contact { padding-top: 8px; }
	.bo-contact__h { margin: 20px 0 32px !important; font-size: 36px; }
	.bo-contact__cards { grid-template-columns: 1fr; }
	.bo-contact__card { min-height: 0; gap: 14px; padding: 28px 24px 32px; }
	.bo-contact__title { font-size: 24px; }
	.bo-contact__note { font-size: 16px; line-height: 1.8; }

	/* Footer */
	.bo-footer__inner { padding-top: 96px; }
	.bo-footer__claim { font-size: clamp(38px, 10vw, 60px); }
	.bo-footer__contacts { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; }
	.bo-footer__contact { padding: 20px 20px 22px; }
	.bo-footer__contact-value { margin-top: 10px; font-size: 22px; }
	.bo-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--bo-gap); margin-top: 56px; padding-top: 32px; }
	.bo-footer__col li { font-size: 14px; }
	.bo-footer__legal { flex-direction: column; align-items: flex-start; margin-top: 48px; padding-bottom: 32px; }
	.bo-footer__legal ul { gap: 20px; }
}