/* Branchenseiten – gemeinsame Abschnitte für Maschinenbau und Smart City
   Figma: 🏭 Maschinen- und Anlagenbau (12034:10440), 🏙️ Smart City (12034:10746)
   Partials: src/_includes/partials/branche-*.njk – Seiten laden ["branchen", "<seite>"] */

/* Hero: zentrierter Text (706), Illustration 1218 × 618. Die Logoleiste liegt unten links über der Illustration. */
.br-hero { padding-top: 32px; }
.br-hero__inner { width: min(1218px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.br-hero__text { max-width: 706px; margin-inline: auto; text-align: center; display: grid; justify-items: center; }
.br-hero__text h1 { max-width: 660px; }
.br-hero__lead { max-width: 606px; margin-top: 12px; }
.br-hero__text .btn-row { margin-top: 40px; }
.br-hero__media { margin-top: 16px; }
.br-hero__media img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto;
  /* Höhe an das Browserfenster gekoppelt, damit die Logoleiste darunter noch ohne Scrollen sichtbar ist
     (Text und Buttons darüber brauchen auf dem Desktop rund 600 px); höchstens 520 px, mindestens 180 px */
  max-height: clamp(180px, calc(100vh - 700px), 520px); max-height: clamp(180px, calc(100svh - 700px), 520px); }
.br-logos { position: relative; } /* früher mit negativem Abstand ins große Hero-Bild gezogen; seit das Bild kleiner ist, steht die Leiste darunter */

/* Technologie-Logos (Smart City „Wir arbeiten mit:“) gedämpft in Graustufen */
.br-tech .logo-strip__logos img { width: 180px; height: 36px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s ease, opacity .2s ease; }
.br-tech .logo-strip__logos img:hover { filter: none; opacity: 1; }
.br-tech .logo-strip__logos img.br-tech__breit { height: 30px; }

@media (max-width: 1279px) {
  .br-logos:not(.br-tech) .logo-strip__logos { justify-content: flex-start; gap: 40px; }
  .br-tech .logo-strip__logos img { width: 140px; height: 32px; }
  .br-tech .logo-strip__logos img.br-tech__breit { height: 26px; }
}
@media (max-width: 991px) {
  .br-hero { padding-top: 40px; }
  .br-logos { margin-top: 0; }
  .br-tech .logo-strip__logos img { width: 120px; height: 32px; }
}
@media (max-width: 767px) {
  .br-hero__text .btn-row { margin-top: 32px; }
  .br-hero__media { margin-top: 24px; }
}

/* Karussell „Bausteine“: Karten 804 × 800, Spur läuft bis an den rechten Fensterrand */
.br-bausteine { padding: 200px 0 132px; overflow-x: clip; }
.br-bausteine__head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.br-bausteine__title { max-width: 777px; }
.br-arrows { display: flex; gap: 24px; flex: none; margin-right: 2px; }
.br-arrow {
  width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.665px solid var(--ink); color: var(--ink); background: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.br-arrow--next { background: var(--ink); color: var(--white); }
.br-arrow:hover { background: var(--cyan); border-color: var(--cyan); color: var(--white); }
.br-arrow svg { width: 28px; height: 28px; }
/* Spur: rechts bis an den Fensterrand; der Innenabstand rechts erlaubt, dass auch die letzte Karte
   am Anfang einrastet – so springt „zurück“ immer genau eine Karte. */
.br-bausteine { --karte: 804px; }
.br-bausteine__track {
  display: flex; gap: 28px; margin-top: 40px;
  margin-right: calc((100% - 100vw) / 2);
  padding-right: calc(100% - var(--karte) + (100vw - 100%) / 2);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.br-bausteine__track::-webkit-scrollbar { display: none; }
.br-bausteine__track:focus-visible { outline-offset: 4px; }
.br-baustein {
  flex: 0 0 var(--karte); min-width: 0; min-height: 800px; scroll-snap-align: start;
  background: var(--grey-50); padding: 64px 100px 80px;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
}
.br-baustein__bild { width: min(601px, 100%); height: auto; aspect-ratio: 601 / 437; object-fit: contain; }
.br-baustein__text { display: grid; gap: 12px; width: 602px; max-width: 100%; }
.br-bausteine__button { margin-top: 49px; }
@media (prefers-reduced-motion: reduce) { .br-bausteine__track { scroll-behavior: auto; } }
@media (max-width: 991px) {
  .br-bausteine { padding: 104px 0; }
  .br-bausteine { --karte: min(640px, calc(100vw - 2 * var(--gutter) - 48px)); }
  .br-baustein { min-height: 0; padding: 40px 32px 48px; gap: 32px; }
}
@media (max-width: 767px) {
  .br-bausteine { padding: 80px 0; }
  .br-bausteine__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .br-arrows { gap: 14px; }
  .br-arrow { width: 52px; height: 52px; }
  .br-bausteine__track { gap: 16px; margin-top: 32px; }
  .br-baustein { padding: 28px 20px 32px; gap: 24px; }
  .br-bausteine__button { margin-top: 32px; }
}

/* Vier Schritte: links Intro + Figur (493), rechts versetzte Karten (2 × 335) */
.br-prozess { padding-block: 132px; }
.br-prozess__inner {
  width: min(1203px, 100% - 2 * var(--gutter)); margin-inline: auto;
  display: grid; grid-template-columns: 493px 700px; gap: 10px; align-items: center;
}
.br-prozess__left { display: flex; flex-direction: column; gap: 230px; }
.br-prozess__intro { display: grid; gap: 12px; justify-items: start; }
.br-prozess__intro h2 { max-width: 451px; }
.br-prozess__intro .btn { margin-top: 20px; }
.br-prozess__figur { width: 492px; max-width: 100%; height: auto; }
.br-prozess__grid {
  display: grid; grid-template-columns: 335px 335px; justify-content: space-between;
  grid-template-rows: 322px 32px 96px 33px 322px; margin: 0;
}
.br-prozess__card { padding: 40px; min-height: 0; }
.br-prozess__card--1 { grid-area: 1 / 1 / 2 / 2; }
.br-prozess__card--2 { grid-area: 1 / 2 / 4 / 3; }
.br-prozess__card--3 { grid-area: 3 / 1 / 6 / 2; }
.br-prozess__card--4 { grid-area: 5 / 2 / 6 / 3; }
.br-prozess__card .process-card__text { max-width: 248px; }
@media (min-width: 768px) { .br-prozess__card .process-card__number { left: calc(100% - 158px); right: auto; bottom: -57px; } }
@media (max-width: 1279px) {
  .br-prozess__inner { grid-template-columns: 1fr 1.4fr; gap: 40px; }
  .br-prozess__left { gap: 64px; }
  .br-prozess__grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 24px; }
  .br-prozess__card--1, .br-prozess__card--2, .br-prozess__card--3, .br-prozess__card--4 { grid-area: auto; min-height: 340px; }
}
@media (max-width: 991px) {
  .br-prozess { padding-block: 104px; }
  .br-prozess__inner { grid-template-columns: 1fr; gap: 48px; }
  .br-prozess__left { gap: 40px; }
}
@media (max-width: 767px) {
  .br-prozess { padding-block: 80px; }
  .br-prozess__grid { grid-template-columns: 1fr; gap: 16px; }
  .br-prozess__card--1, .br-prozess__card--2, .br-prozess__card--3, .br-prozess__card--4 { min-height: 280px; padding: 32px 24px; }
}

/* Schwarze CTA-Box (1220 × 560), Illustration rechts bündig */
.br-cta { padding-block: 100px; }
.br-cta__box {
  background: var(--ink); color: var(--white); overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-left: 73px;
}
.br-cta__text { width: 463px; flex: none; display: grid; justify-items: start; }
.br-cta__text p { color: var(--grey-100); margin-top: 16px; }
.br-cta__text .btn { margin-top: 40px; }
.br-cta__bild { width: 560px; height: 560px; flex: none; }
@media (max-width: 1279px) {
  .br-cta__box { padding-left: 56px; }
  .br-cta__text { width: auto; flex: 1; }
  .br-cta__bild { width: 46%; height: auto; }
}
@media (max-width: 991px) { .br-cta { padding-block: 64px; } }
@media (max-width: 767px) {
  .br-cta__box { flex-direction: column; align-items: stretch; padding: 48px 0 0; gap: 32px; }
  .br-cta__text { padding-inline: 24px; }
  .br-cta__bild { width: 100%; }
}

/* Drei versetzte Feature-Karten (388), dritte Karte schwarz */
.br-features { padding-block: 132px; }
.br-features__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: -24px; }
.br-features__intro { display: grid; gap: 16px; max-width: 599px; }
.br-features__intro p { color: var(--grey-600); font-weight: 700; max-width: 492px; }
.br-features__head .btn { margin-top: 24px; flex: none; }
.br-features__cards { display: grid; grid-template-columns: repeat(3, 388px); justify-content: space-between; align-items: start; }
@media (min-width: 1280px) { .br-features__cards { height: 482px; } } /* wie Figma: feste Höhe, die erste Karte ragt in den unteren Abstand */
.br-features__card { gap: 80px; }
.br-features__card:nth-child(1) { margin-top: 80px; }
.br-features__card:nth-child(2) { margin-top: 40px; }
.br-features__card p { font-weight: 700; }
.br-features__card.feature-card--dark { min-height: 402px; justify-content: flex-end; }
@media (max-width: 1279px) {
  .br-features__cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 991px) {
  .br-features { padding-block: 104px; }
  .br-features__head { flex-direction: column; margin-bottom: 40px; }
  .br-features__head .btn { margin-top: 0; }
  .br-features__cards { grid-template-columns: 1fr 1fr; }
  .br-features__card:nth-child(n) { margin-top: 0; }
  .br-features__card.feature-card--dark { min-height: 0; grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .br-features { padding-block: 80px; }
  .br-features__cards { grid-template-columns: 1fr; gap: 16px; }
  .br-features__card { gap: 40px; }
}

/* Breite schwarze Referenz-Karten (1220 × 411), Illustration rechts */
.br-referenzen { padding-block: 132px; }
.br-referenzen__title { max-width: 796px; margin: 0 auto 40px; }
.br-referenzen__list { display: grid; gap: 40px; }
.br-referenz {
  position: relative; overflow: hidden; background: var(--ink); color: var(--white);
  min-height: 411px; padding: 66px 48px 46px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 64px;
}
.br-referenz__bild { position: absolute; top: 0; right: 0; width: 596px; height: 411px; object-fit: cover; transition: transform .35s ease; }
.br-referenz:hover .br-referenz__bild { transform: scale(1.02); }
.br-referenz__text { position: relative; display: grid; gap: 11px; max-width: 482px; }
.br-referenz__teaser { color: var(--grey-100); }
.br-referenz__logo { position: relative; height: 30px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.br-referenz__wortmarke { position: relative; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.br-referenz__arrow { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; color: var(--white); z-index: 1; transition: color .2s ease; }
.br-referenz__arrow svg { width: 100%; height: 100%; }
.br-referenz__arrow path { stroke-width: 1.9; }
.br-referenz:hover .br-referenz__arrow { color: var(--cyan); }
.br-referenzen__buttons { margin-top: 48px; }
@media (max-width: 1279px) {
  .br-referenz__bild { width: 46%; }
  .br-referenz__text { max-width: 48%; }
}
@media (max-width: 991px) {
  .br-referenzen { padding-block: 104px; }
  .br-referenz { min-height: 0; padding: 0 0 40px; gap: 32px; }
  .br-referenz__bild { position: static; width: 100%; height: auto; aspect-ratio: 596 / 411; order: -1; }
  .br-referenz__text { max-width: none; padding-inline: 32px; }
  .br-referenz__logo, .br-referenz__wortmarke { margin-left: 32px; }
  .br-referenz__arrow { background: var(--ink); padding: 6px; width: 44px; height: 44px; top: 16px; right: 16px; }
}
@media (max-width: 767px) {
  .br-referenzen { padding-block: 80px; }
  .br-referenzen__list { gap: 24px; }
  .br-referenz__text { padding-inline: 20px; }
  .br-referenz__logo, .br-referenz__wortmarke { margin-left: 20px; }
}

/* Kundenstimmen: Avatar 595 × 591 mit überlappender Zitatkarte, Text rechts (422) */
.br-stimmen { padding-block: 100px; }
.br-stimmen__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.br-stimmen__slider { width: 596px; flex: none; order: -1; }
.br-stimme { position: relative; margin: 0; }
.br-stimme[hidden] { display: none; }
.br-stimme__avatar { width: 595px; height: 591px; background: var(--ink); overflow: hidden; }
.br-stimme__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.br-stimme__avatar--initialen { display: flex; align-items: flex-start; justify-content: flex-start; padding: 64px 0 0 72px; color: var(--white); font-size: 200px; line-height: 1; font-weight: 700; }
.br-stimme__card {
  position: absolute; right: -48px; bottom: -55px; width: 502px;
  background: var(--grey-50); padding: 67px 48px 67px 56px; display: grid; gap: 19px;
}
.br-stimme__zitat { color: var(--grey-600); }
.br-stimme__info { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.br-stimme__info .slider-arrows { margin-left: auto; } /* Pfeile bleiben beim Blättern an derselben Stelle */
.br-stimme__autor { display: grid; gap: 2px; }
.br-stimme__name { font-size: var(--fs-display-4); line-height: 38px; font-weight: 700; }
.br-stimme__firma { font-size: 18px; line-height: 20px; color: var(--grey-500); }
.br-stimmen__text { width: 422px; flex: none; display: grid; justify-items: start; }
.br-stimmen__text p { margin-top: 14px; }
.br-stimmen__text .btn { margin-top: 32px; }
@media (max-width: 1279px) {
  .br-stimmen__slider { width: 52%; }
  .br-stimme__avatar { width: 100%; height: auto; aspect-ratio: 595 / 591; }
  .br-stimme__card { right: -32px; width: 85%; padding: 40px 32px; }
  .br-stimmen__text { width: auto; flex: 1; }
}
@media (max-width: 991px) {
  .br-stimmen { padding-block: 104px; }
  .br-stimmen__inner { flex-direction: column; align-items: stretch; gap: 40px; }
  .br-stimmen__slider { width: 100%; order: 0; }
  .br-stimme__avatar { width: min(100%, 480px); }
  .br-stimme__card { position: relative; right: auto; bottom: auto; width: auto; margin: -96px 0 0 min(25%, 140px); }
  /* Folien übereinander, alle gleich hoch: Name und Pfeile stehen beim Blättern still */
  .br-stimmen__slider { display: grid; }
  .br-stimme { grid-area: 1 / 1; display: flex; flex-direction: column; }
  .br-stimme[hidden] { display: flex !important; visibility: hidden; }
  .br-stimme__card { flex: 1; display: flex; flex-direction: column; }
  .br-stimme__info { margin-top: auto; }
}
@media (max-width: 767px) {
  .br-stimmen { padding-block: 80px; }
  .br-stimme__avatar { width: 88%; }
  .br-stimme__avatar--initialen { font-size: 120px; padding: 40px 0 0 40px; }
  .br-stimme__card { margin: -64px 0 0 12%; padding: 32px 24px; }
  .br-stimme__info { flex-direction: column; align-items: flex-start; gap: 20px; }
}