/* Sämtliche eigenen CSS-Anpassungen werden hier ergänzt. */

/* Über uns: echter Fotokopf und kompakte Einblicke im vorhandenen Bexon-Aufbau. */
.tj-page-header.na-about-header {
  background-blend-mode: normal;
  background-position: 50% 78%;
}

.na-about-header .page-header-overlay {
  background: rgba(6, 20, 32, 0.5);
  opacity: 1;
}

.na-about-header .tj-page-link {
  background: rgba(6, 20, 32, 0.55);
}

.na-about-header .tj-page-title {
  font-size: clamp(38px, 5vw, 60px);
}

.na-about-page [id] {
  scroll-margin-top: 130px;
}

.na-about-page .choose-box .title,
.na-about-page .mission-vision-box .title,
.na-about-page .team-item .title {
  font-size: var(--tj-fs-h4);
  line-height: 1.333;
}

.na-about-page .about-img-area {
  height: auto;
}

.na-about-page .about-img,
.na-about-page .testimonial-img {
  aspect-ratio: 4 / 3;
}

.na-about-page .about-img img,
.na-about-page .testimonial-img img {
  height: 100%;
  object-fit: cover;
}

.na-about-page .na-about-company-photo {
  object-position: 50% 42%;
}

.na-about-page .testimonial-img::after {
  display: none;
}

.na-about-page .na-about-reference {
  width: 100%;
  border-radius: 10px;
}

.na-about-page .na-about-reference img {
  max-width: 180px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.na-about-page .na-about-reference-link {
  margin-top: 24px;
  margin-bottom: 0;
}

.na-about-page .na-about-quality-cards {
  display: grid;
  gap: 20px;
}

.na-about-page .team-item {
  margin-bottom: 0;
}

.na-about-page .team-img-inner {
  aspect-ratio: 3 / 2;
}

.na-about-page .team-img img {
  height: 100%;
  object-fit: cover;
}

.na-about-page .na-about-development-image {
  object-position: 60% 60%;
}

.na-about-page .na-about-data-image {
  object-position: 50% 60%;
}

.na-about-page .na-about-collaboration-image {
  object-position: 50% 36%;
}

.na-about-page .team-item .title {
  width: 100%;
}

.na-about-page .team-item .designation {
  margin-top: 6px;
  line-height: 1.4;
}

.na-about-page .team-item:hover .team-img img {
  transform: none;
}

.na-about-page .team-item .team-img::before {
  display: none;
}

@media (min-width: 1600px) {
  .tj-page-header.na-about-header {
    background-position: 50% 75%;
  }
}

@media (max-width: 767px) {
  .tj-page-header.na-about-header {
    background-position: 50% 60%;
  }

  .na-about-page .choose-box .title,
  .na-about-page .mission-vision-box .title,
  .na-about-page .team-item .title {
    font-size: 20px;
  }
}

/* Teamfoto im Kontaktseiten-Header mit natürlichen Farben und lesbarer Schrift. */
.tj-page-header.na-contact-header {
  background-blend-mode: normal;
  background-position: center;
}

.na-contact-header .page-header-overlay {
  background: rgba(6, 20, 32, 0.5);
  opacity: 1;
}

.na-contact-header .tj-page-link {
  background: rgba(6, 20, 32, 0.55);
}

@media (min-width: 1600px) {
  .tj-page-header.na-contact-header {
    background-position: 50% 38%;
  }
}

@media (max-width: 1199px) {
  .tj-page-header.na-contact-header {
    background-position: 50% 42%;
  }
}

/* Blog-Fotokopf und datumslose Produktvorschauen im vorhandenen Listenlayout. */
.tj-page-header.na-blog-header {
  background-blend-mode: normal;
  background-position: 50% 36%;
}

.na-blog-header .page-header-overlay {
  background: rgba(6, 20, 32, 0.5);
  opacity: 1;
}

.na-blog-header .tj-page-link {
  background: rgba(6, 20, 32, 0.55);
}

.na-blog-header .tj-page-title {
  font-size: clamp(38px, 5vw, 60px);
}

.na-blog-page .blog-item {
  scroll-margin-top: 130px;
}

/* Startseite: dieselben Beispielbeiträge wie im Blog, im bestehenden Kartenlayout. */
.na-home-blog .blog-item {
  display: flex;
  flex-direction: column;
}

.na-home-blog .blog-thumb {
  min-height: 0;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
}

.na-home-blog .blog-thumb > a {
  display: block;
  height: 100%;
}

.na-home-blog .blog-thumb img {
  display: block;
  min-height: 0;
  height: 100%;
  object-fit: cover;
}

.na-home-blog .blog-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: auto;
}

.na-home-blog .blog-content .text-btn {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 15px;
}

.na-blog-page .blog-thumb {
  min-height: 0;
  /* Originale Blogbilder der Bexon-Listenansicht: 870 × 450 px. */
  aspect-ratio: 870 / 450;
}

.na-blog-page .blog-thumb::before {
  display: none;
}

.na-blog-page .blog-thumb img {
  min-height: 0;
  height: 100%;
  object-fit: cover;
}

.na-blog-page .blog-content .title {
  font-size: var(--tj-fs-h3);
  line-height: 1.25;
}

.na-blog-page .blog-item:hover .blog-thumb img {
  transform: none;
}

.na-blog-page .na-blog-aela-image,
.na-home-blog .na-blog-aela-image,
.na-blog-page .na-blog-netbee-image,
.na-home-blog .na-blog-netbee-image {
  object-position: 50% 50%;
}

.na-blog-page .blog-post-wrapper .na-blog-netbee-image {
  object-position: 50% 62%;
}

.na-blog-page .na-blog-category {
  display: inline-flex;
  padding: 2px 7px 4px;
  border: 1px solid var(--tj-color-border-1);
  border-radius: 4px;
  font-weight: var(--tj-fw-medium);
  line-height: 1.2;
}

.na-blog-page .blog-content .desc,
.na-blog-page .na-blog-topic-intro {
  margin-bottom: 0;
}

.na-blog-page .tj-sidebar-widget .widget-title {
  font-size: 24px;
  line-height: 1.25;
}

.na-blog-page .tj-recent-posts .post-thumb a {
  height: 100%;
}

@media (min-width: 768px) and (max-width: 991px) {
  .na-blog-page .blog-content .title {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .na-blog-page .blog-content .title {
    font-size: 25px;
  }
}

@media (min-width: 1600px) {
  .tj-page-header.na-blog-header {
    background-position: 50% 28%;
  }
}

/* Ruhiger Seitenwechsel: 250 ms ausblenden, 400 ms weich einblenden. */
.na-page-fade body {
  animation: na-page-enter 400ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.na-page-fade.na-page-leaving body {
  animation: none;
  opacity: 0;
  pointer-events: none;
}

@keyframes na-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .na-page-fade body,
  .na-page-fade.na-page-leaving body {
    animation: none;
    transition: none;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Vorhandene blaue Partikel hinter Home-Inhalten und in der Bahn-Hero-Textkarte. */
.h10-hero > .na-hero-particles,
.h6-hero .banner-left-box > .na-hero-particles {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.h10-hero > .container,
.h10-hero > .container-fluid {
  position: relative;
  z-index: 1;
}

.h6-hero .banner-left-box > .banner-content {
  z-index: 1;
}

/* Die Bahn-Hero-H1 übernimmt ausschließlich die vorhandenen h2-Schriftgrößen aus main.css. */
.h6-hero .banner-title {
  font-size: var(--tj-fs-h2);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .h6-hero .banner-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h6-hero .banner-title {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  .h6-hero .banner-title {
    font-size: 30px;
  }
}

/* Deutsche Untermenüpunkte lesbar halten und auch per Tastatur öffnen. */
@media (min-width: 992px) {
  .mainmenu > ul > li > .sub-menu:not(.mega-menu) {
    width: 280px;
  }

  .mainmenu > ul > li > .sub-menu:not(.mega-menu) > li > a {
    line-height: 1.35;
  }

  .mainmenu > ul > li:focus-within > .sub-menu:not(.mega-menu) {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
    pointer-events: auto;
  }
}

/* Bexon-Megamenü mit drei gleichmäßigen Lösungsspalten. */
.mainmenu ul > li > .na-solutions-menu .mega-menu-pages-single,
.mainmenu ul > li > .na-solutions-menu .mega-menu-pages-single:last-child,
.mobile_menu ul > li > .na-solutions-menu .mega-menu-pages-single,
.mobile_menu ul > li > .na-solutions-menu .mega-menu-pages-single:last-child {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 26px 30px 20px;
}

.mainmenu ul > li > .na-solutions-menu .mega-menu-pages-single:not(:first-child),
.mobile_menu ul > li > .na-solutions-menu .mega-menu-pages-single:not(:first-child) {
  border-inline-start: 1px solid var(--tj-color-border-1);
}

.mainmenu ul > li > .na-solutions-menu .mega-menu-list a,
.hamburger_menu .mean-container .mean-nav ul li .na-solutions-menu .mega-menu-list a:not(.tj-primary-btn) {
  display: block;
  line-height: 1.35;
  text-transform: none;
}

.na-solutions-menu .na-solution-product {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--tj-color-text-body-3);
}

.na-solutions-menu .na-solution-media,
.na-solutions-menu .na-solution-image {
  display: none;
}

@media (min-width: 992px) {
  .mainmenu ul > li > .na-solutions-menu .mega-menu-pages-single,
  .mainmenu ul > li > .na-solutions-menu .mega-menu-pages-single:last-child {
    padding: 26px 22px 20px;
  }

  .mainmenu ul > li > .na-solutions-menu .mega-menu-title {
    margin-inline: 14px;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.25;
  }

  .mainmenu ul > li > .na-solutions-menu .mega-menu-title::before {
    background-color: var(--tj-color-theme-primary);
  }

  /* Die ganze Lösung ist ein Link; beim Hover verschiebt sich kein Inhalt. */
  .mainmenu ul > li > .na-solutions-menu .mega-menu-list .na-solution-link,
  .mainmenu ul > li > .na-solutions-menu .mega-menu-list .na-solution-link:hover,
  .mainmenu ul > li > .na-solutions-menu .mega-menu-list .na-solution-link.active {
    padding: 14px;
    border: 1px solid transparent;
    border-radius: 12px;
  }

  .mainmenu ul > li > .na-solutions-menu .mega-menu-list .na-solution-link {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .mainmenu ul > li > .na-solutions-menu .mega-menu-list .na-solution-link:hover,
  .mainmenu ul > li > .na-solutions-menu .mega-menu-list .na-solution-link:focus-visible {
    background-color: rgba(var(--na-color-primary-rgb), 0.045);
    border-color: rgba(var(--na-color-primary-rgb), 0.2);
    color: var(--tj-color-theme-primary);
  }

  .mainmenu ul > li > .na-solutions-menu .mega-menu-list .na-solution-link:focus-visible {
    outline: 2px solid var(--tj-color-theme-primary);
    outline-offset: 3px;
  }

  /* Zwei Textzeilen passen auch am schmalen Desktop; die Fotos beginnen bündig. */
  .na-solutions-menu .na-solution-copy {
    display: block;
    min-height: 78px;
  }

  .na-solutions-menu .na-solution-title {
    display: block;
    font-size: 18px;
    line-height: 1.35;
  }

  .na-solutions-menu .na-solution-product {
    margin-top: 8px;
    line-height: 1.35;
  }

  .na-solutions-menu .na-solution-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 14px;
    border-radius: 8px;
    overflow: hidden;
  }

  .na-solutions-menu .na-solution-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .na-solutions-menu .na-solution-link:hover .na-solution-image,
  .na-solutions-menu .na-solution-link:focus-visible .na-solution-image {
    transform: scale(1.035);
  }

  .mainmenu > ul > li:focus-within > .na-solutions-menu {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1) translateX(-50%);
    pointer-events: auto;
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .mainmenu ul > li > .na-solutions-menu .mega-menu-list .na-solution-link,
  .na-solutions-menu .na-solution-image {
    transition: none;
  }

  .na-solutions-menu .na-solution-link:hover .na-solution-image,
  .na-solutions-menu .na-solution-link:focus-visible .na-solution-image {
    transform: none;
  }
}

@media (max-width: 991px) {
  .mobile_menu ul > li > .na-solutions-menu .mega-menu-pages-single,
  .mobile_menu ul > li > .na-solutions-menu .mega-menu-pages-single:last-child {
    width: 100%;
    padding: 20px 0;
    border-inline-start: 0;
  }

  .mobile_menu ul > li > .na-solutions-menu .mega-menu-pages-single:not(:first-child) {
    border-inline-start: 0;
  }

  .na-solutions-menu .na-solution-product {
    color: var(--tj-color-text-body-2);
  }
}

/* Der längere Vertriebsbutton passt auch am schmalen Desktop in den Header. */
@media (min-width: 992px) and (max-width: 1199px) {
  .header-area .mainmenu > ul {
    column-gap: 12px;
  }

  .header-right-item .tj-primary-btn {
    font-size: 14px;
    padding-inline-start: 18px;
  }
}

/* DIN Pro Regular wird als CI-Hausschrift ausschließlich lokal geladen. */
@font-face {
  font-family: "DIN Regular";
  src: url("../fonts/din-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Blaue Markenpalette: Abstufungen behalten ihre bisherige Helligkeit. */
:root {
  --tj-ff-body: "DIN Regular", Arial, sans-serif;
  --tj-ff-heading: "DIN Regular", Arial, sans-serif;
  --tj-ff-fontawesome: "Font Awesome 7 Pro";

  --na-color-primary-rgb: 0, 142, 193;
  --na-color-dark-rgb: 12, 27, 33;

  --tj-color-heading-primary: #0c1b21;
  --tj-color-text-body: #364b52;
  --tj-color-text-body-2: #a9b4b8;
  --tj-color-text-body-3: #67757a;
  --tj-color-text-body-4: #18272c;

  --tj-color-theme-primary: #008ec1;
  --tj-color-theme-bg: #d8e2e5;
  --tj-color-theme-bg-2: #cedbe0;
  --tj-color-theme-bg-3: #202c30;
  --tj-color-theme-dark: #0c1b21;
  --tj-color-theme-dark-2: #18272c;
  --tj-color-theme-dark-3: #364b52;
  --tj-color-theme-dark-4: #67757a;
  --tj-color-theme-dark-5: #67757a;

  --tj-color-grey-1: #eceff0;
  --tj-color-grey-2: #a9b4b8;
  --tj-color-border-1: #c9cfd1;
  --tj-color-border-2: #313a3d;
  --tj-color-border-5: rgba(var(--na-color-primary-rgb), 0.1490196078);
}

/* Fest hinterlegte Template-Farben folgen ebenfalls der Markenpalette. */
.header-bottom {
  border-bottom-color: var(--tj-color-border-1);
}

.mainmenu ul > li > .mega-menu-service-single .mega-menu-service-icon,
.mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-icon,
.service-item .service-icon {
  background-image: linear-gradient(-45deg, rgba(var(--na-color-primary-rgb), 0.3) 0%, rgba(var(--na-color-primary-rgb), 0) 50%, rgba(var(--na-color-primary-rgb), 0.3) 100%);
}

.service-item .service-icon {
  border-color: rgba(var(--na-color-primary-rgb), 0.15);
}

.social-links ul li a {
  background-color: rgba(var(--na-color-dark-rgb), 0.3);
}

.search-popup-overlay {
  background-color: rgba(var(--na-color-dark-rgb), 0.01);
}

.client-content .client-text::after {
  border-bottom-color: rgba(var(--na-color-dark-rgb), 0.2);
}

.testimonial-wrapper-2 .slider-prev,
.testimonial-wrapper-2 .slider-next {
  background-color: var(--tj-color-grey-1);
}

.blog-item.style-3 .blog-thumb::before {
  background-image: linear-gradient(0deg, rgb(var(--na-color-dark-rgb)) 0%, rgba(var(--na-color-dark-rgb), 0) 100%);
}

.gallery::before {
  background-color: rgba(var(--na-color-dark-rgb), 0.4);
}

/* Farbübergänge und Overlays der weiteren Template-Varianten. */
.tj-slider-item,
.h7-hero-item,
.h8-hero-item,
.h9-hero-item {
  background-color: var(--tj-color-theme-dark);
}

.tj-slider-item::after,
.h7-hero-item::after,
.h8-hero-item::after,
.h9-hero-item::after {
  background-image: linear-gradient(90deg, rgb(var(--na-color-dark-rgb)) 20%, rgba(var(--na-color-dark-rgb), 0.4) 60%, rgba(var(--na-color-dark-rgb), 0.1) 100%);
}

.h4-banner-section .banner-img-area .banner-img::before {
  background-image: linear-gradient(90deg, rgb(var(--na-color-dark-rgb)) 0%, rgba(var(--na-color-dark-rgb), 0.4) 50%, rgba(var(--na-color-dark-rgb), 0) 100%);
}

.h5-banner-section .banner-bg::before {
  background-image: linear-gradient(-109deg, rgba(var(--na-color-dark-rgb), 0.95) 20%, rgba(var(--na-color-dark-rgb), 0.2) 40%, rgba(var(--na-color-dark-rgb), 0.95) 70%);
}

.h5-client-item .client-logo::after {
  background-color: rgba(var(--na-color-primary-rgb), 0.6);
}

.h5-client-item .client-logo:hover {
  background-color: rgba(var(--na-color-primary-rgb), 0.7);
}

.h5-working-process-item .process-step {
  background-image: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, rgba(var(--na-color-primary-rgb), 0) 116.09%);
}

.h6-project-item-inner::after {
  background-color: rgba(var(--na-color-dark-rgb), 0.5);
}

.h7-hero-content .h7-hero-title span:has(img) img,
.h8-hero-content .h8-hero-title span:has(img) img {
  background-image: linear-gradient(135deg, rgba(var(--na-color-primary-rgb), 0.3) 0%, rgba(var(--na-color-primary-rgb), 0) 50%, rgba(var(--na-color-primary-rgb), 0.3) 100%);
}

.tj-footer-section.h9-footer .h9-footer-copyright {
  border-color: rgba(49, 58, 61, 0.3);
}

.h9-about-funfact:not(.h10-about-funfact) {
  border-top-color: rgba(var(--na-color-dark-rgb), 0.2);
  border-bottom-color: rgba(var(--na-color-dark-rgb), 0.2);
}

.h9-about-funfact .countup-item:not(:first-child)::after {
  -webkit-border-end-color: rgba(var(--na-color-dark-rgb), 0.2);
  border-inline-end-color: rgba(var(--na-color-dark-rgb), 0.2);
}

@media (max-width: 575px) {
  .h9-about-funfact .countup-item:not(:first-child)::after {
    border-top-color: rgba(var(--na-color-dark-rgb), 0.2);
  }
}

.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-thumb::before {
  background-image: linear-gradient(180deg, rgba(var(--na-color-dark-rgb), 0) 0%, var(--tj-color-theme-dark) 100%);
}

/* Original-SVGs bleiben unverändert und werden mit CSS blau eingefärbt. */
img[src*="/shape/h7-testimonial-shape-blur.svg"],
img[src*="/shape/h10-footer-shape-blur-2.svg"],
.global-map-img > img[src*="/bg/map.svg"] {
  -webkit-filter: hue-rotate(16deg) saturate(1.94169) brightness(0.94874);
  filter: hue-rotate(16deg) saturate(1.94169) brightness(0.94874);
}

@-webkit-keyframes pulse3 {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--na-color-primary-rgb), 0.4);
    box-shadow: 0 0 0 0 rgba(var(--na-color-primary-rgb), 0.4);
  }
  100% {
    -webkit-box-shadow: 0 0 0 8px rgba(var(--na-color-primary-rgb), 0);
    box-shadow: 0 0 0 8px rgba(var(--na-color-primary-rgb), 0);
  }
}

@keyframes pulse3 {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(var(--na-color-primary-rgb), 0.4);
    box-shadow: 0 0 0 0 rgba(var(--na-color-primary-rgb), 0.4);
  }
  100% {
    -webkit-box-shadow: 0 0 0 8px rgba(var(--na-color-primary-rgb), 0);
    box-shadow: 0 0 0 8px rgba(var(--na-color-primary-rgb), 0);
  }
}

/* Lange deutsche Wörter in der Startseitenüberschrift lesbar umbrechen. */
.h10-hero .banner-title {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.h10-hero .banner-title [lang="en"] {
  -webkit-hyphens: none;
  hyphens: none;
  white-space: nowrap;
}

/* Moderat größere Startseitenüberschrift mit vier Zeilen am Desktop. */
@media (min-width: 992px) {
  .h10-hero .banner-content-2 .banner-title {
    font-size: 54px;
    line-height: 1.12;
    -webkit-hyphens: none;
    hyphens: none;
  }

}

@media (min-width: 992px) and (max-width: 1199px) {
  .h10-hero .banner-content-2 .banner-title {
    font-size: 40px;
  }
}

/* Logo im dunklen Seitenmenü größer und vollständig weiß darstellen. */
.hamburger_logo {
  width: 170px;
  max-width: calc(100% - 50px);
}

.hamburger_logo .mobile_logo {
  max-width: 100%;
}

.hamburger_logo .mobile_logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

/* Das vollständige Firmenlogo steht über dem Einleitungstext. */
.h10-hero-award-wrapper .na-hero-logo {
  width: 70%;
  margin-bottom: 30px;
}

.h10-hero-award-wrapper .na-hero-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.h10-hero-award-wrapper .na-hero-logo + .h6-hero-history {
  margin-top: 0;
}

@media (min-width: 768px) and (max-width: 1399px) {
  .h10-hero-award-wrapper .na-hero-logo {
    margin-bottom: 20px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .h10-hero-award-wrapper {
    display: block;
  }
}

@media (max-width: 767px) {
  .h10-hero-award-wrapper .na-hero-logo {
    margin-bottom: 16px;
  }
}

/* Logo und Einleitungstext am Desktop gemeinsam in der linken Spalte zentrieren. */
@media (min-width: 992px) {
  .h10-hero-award-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}

/* Die Startgröße entspricht der Scrollanimation, auch vor deren Initialisierung. */
.h10-hero .h10-hero-banner.zoom-on-scroll {
  transform: scale(0.74);
  transform-origin: top center;
}

/* Videohöhe reservieren, bevor die Metadaten geladen sind; mobile Template-Höhen bleiben bestehen. */
@media (min-width: 992px) {
  .h10-hero .h10-hero-banner {
    aspect-ratio: 16 / 9;
  }
}

/* Vorhandenen Template-Play-Button über dem Firmenfilm verwenden. */
.h10-hero-banner-video {
  position: relative;
}

.h10-hero .h10-hero-banner-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  z-index: 0;
}

.h10-hero-banner-video .na-hero-play {
  width: 90px;
  height: 90px;
  color: var(--tj-color-theme-primary);
  background: var(--tj-color-common-white);
  border: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.h10-hero-banner-video .na-hero-play span {
  font-size: 24px;
}

.h10-hero-banner-video .na-hero-play:focus-visible {
  outline: 3px solid var(--tj-color-theme-primary);
  outline-offset: 5px;
}

.na-hero-video-modal .vbox-close:focus-visible {
  outline: 2px solid var(--tj-color-common-white);
  outline-offset: -2px;
  opacity: 1;
}

/* Absätze in den Lösungskarten mit sichtbarem Abstand trennen. */
.tj-service-section-5 .service-content .desc + .desc {
  margin-top: 16px;
}

/* Den Textblock in Lösungskarten ohne Icon vertikal zentrieren. */
.tj-service-section-5 .service-content-area > .service-content:only-child {
  margin-block: auto;
}

/* Bilder der Lösungskarten am Desktop über die gesamte Kartenhöhe strecken. */
@media (min-width: 992px) {
  .tj-service-section-5 .service-item.style-5 .service-img {
    position: relative;
    align-self: stretch;
    height: auto;
    min-height: 605px;
  }

  .tj-service-section-5 .service-item.style-5 .service-img img {
    position: absolute;
    inset: 0;
    display: block;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .tj-service-section-5 .service-item.style-5 .service-img {
    min-height: 560px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .tj-service-section-5 .service-item.style-5 .service-img {
    min-height: 590px;
  }
}

@media (max-width: 575px) {
  .h10-hero-banner-video .na-hero-play {
    width: 70px;
    height: 70px;
  }
}

/* Das CTA-Foto im ursprünglichen Templateformat anzeigen. */
.tj-cta-section .cta-img {
  position: relative;
  aspect-ratio: 657 / 338;
}

.tj-cta-section .cta-img img {
  position: absolute;
  inset: 0;
}

/* Das Lösungslabel verwendet dieselbe Textfarbe wie News & Blog. */
#loesungen .sub-title {
  color: var(--tj-color-heading-primary);
}

/* Die Home-CTA nutzt die responsive Schriftgröße der News-H2. */
@media (min-width: 992px) {
  .tj-cta-section .na-cta-first-line {
    white-space: nowrap;
  }
}

#loesungen ~ .tj-cta-section .cta-content .title,
.tj-cta-section.na-home-cta .cta-content .title {
  font-size: var(--tj-fs-h2);
}

@media (min-width: 1200px) and (max-width: 1399px) {
  #loesungen ~ .tj-cta-section .cta-content .title,
  .tj-cta-section.na-home-cta .cta-content .title {
    font-size: var(--tj-fs-h2);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #loesungen ~ .tj-cta-section .cta-content .title,
  .tj-cta-section.na-home-cta .cta-content .title {
    font-size: 40px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #loesungen ~ .tj-cta-section .cta-content .title,
  .tj-cta-section.na-home-cta .cta-content .title {
    font-size: 40px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #loesungen ~ .tj-cta-section .cta-content .title,
  .tj-cta-section.na-home-cta .cta-content .title {
    font-size: 36px;
  }
}

@media (max-width: 575px) {
  #loesungen ~ .tj-cta-section .cta-content .title,
  .tj-cta-section.na-home-cta .cta-content .title {
    font-size: 30px;
  }
}

/* ForceBEE-Karten: Text bleibt gepolstert, Fotos schließen bündig am Kartenrand ab. */
#forcebee-ablauf .h5-working-process-item {
  --na-process-text-inline: 28px;
  --na-process-text-top: 25px;
  padding: 0;
}

#forcebee-ablauf .process-content .title {
  padding: var(--na-process-text-top) var(--na-process-text-inline) 0;
}

#forcebee-ablauf .process-content .desc {
  padding-inline: var(--na-process-text-inline);
}

/* Große Schrittzahlen vorläufig ausblenden. Zum Wiederanzeigen diese Regel entfernen; das Markup bleibt erhalten. */
#forcebee-ablauf .process-step {
  display: none;
}

/* Die Bildlinks öffnen die vorhandene Galerie und schließen bündig am Kartenrand ab. */
#forcebee-ablauf .na-process-image-link {
  display: block;
  width: 100%;
  margin-top: 24px;
  flex-shrink: 0;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  cursor: zoom-in;
}

#forcebee-ablauf .na-process-image-link:focus-visible {
  outline: 2px solid var(--tj-color-common-white);
  outline-offset: -4px;
}

/* Einheitliches Fotoformat, nur die unteren Kartenecken sind abgerundet. */
#forcebee-ablauf .na-process-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0 0 10px 10px;
  margin-top: 0;
}

/* Automatisch Schritt 1 bis 4 hervorheben: drei Sekunden je Karte, zwölf Sekunden je Runde.
   Nur Pseudo-Elemente und Schritt-Pills animieren, damit die WOW-Einstiegsanimation erhalten bleibt. */
#forcebee-ablauf .h5-working-process-item {
  --na-process-cycle-delay: 0s;
  --na-process-line-height: 60px;
}

#forcebee-ablauf .col-lg-3:nth-child(2) .h5-working-process-item {
  --na-process-cycle-delay: -9s;
}

#forcebee-ablauf .col-lg-3:nth-child(3) .h5-working-process-item {
  --na-process-cycle-delay: -6s;
}

#forcebee-ablauf .col-lg-3:nth-child(4) .h5-working-process-item {
  --na-process-cycle-delay: -3s;
}

#forcebee-ablauf .h5-working-process-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px dashed rgba(var(--na-color-primary-rgb), 0.65);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  animation-name: na-forcebee-step-highlight;
}

/* Die bisherigen Hover-Farben und Linien werden ausschließlich vom Zyklus gesteuert. */
#forcebee-ablauf .h5-working-process-indicator {
  border-color: var(--tj-color-border-2);
  transition: none;
  animation-name: na-forcebee-step-border;
}

#forcebee-ablauf .h5-working-process-indicator::after {
  height: var(--na-process-line-height);
  border-color: var(--tj-color-theme-primary);
  opacity: 0;
  transition: none;
  animation-name: na-forcebee-step-highlight;
}

#forcebee-ablauf .h5-working-process-item::before,
#forcebee-ablauf .h5-working-process-indicator,
#forcebee-ablauf .h5-working-process-indicator::after {
  animation-duration: 12s;
  animation-delay: var(--na-process-cycle-delay);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes na-forcebee-step-highlight {
  0%, 25%, 100% { opacity: 0; }
  2%, 23% { opacity: 1; }
}

@keyframes na-forcebee-step-border {
  0%, 25%, 100% { border-color: var(--tj-color-border-2); }
  2%, 23% { border-color: var(--tj-color-theme-primary); }
}

@media (max-width: 767px) {
  #forcebee-ablauf .h5-working-process-item {
    --na-process-line-height: 30px;
  }
}

/* Bei reduzierter Bewegung bleibt Schritt 1 statisch hervorgehoben. */
@media (prefers-reduced-motion: reduce) {
  #forcebee-ablauf .h5-working-process-item::before,
  #forcebee-ablauf .h5-working-process-indicator,
  #forcebee-ablauf .h5-working-process-indicator::after {
    animation: none;
  }

  #forcebee-ablauf .col-lg-3:first-child .h5-working-process-item::before,
  #forcebee-ablauf .col-lg-3:first-child .h5-working-process-indicator::after {
    opacity: 1;
  }

  #forcebee-ablauf .col-lg-3:first-child .h5-working-process-indicator {
    border-color: var(--tj-color-theme-primary);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #forcebee-ablauf .h5-working-process-item {
    --na-process-text-inline: 20px;
    --na-process-text-top: 35px;
  }
}

@media (max-width: 991px) {
  #forcebee-ablauf .h5-working-process-item {
    --na-process-text-inline: 15px;
    --na-process-text-top: 35px;
  }
}

/* Die BrakeBEE-Marke im originalen Prozess-Badge behält ihre Schreibweise. */
#brakebee-ablauf .sub-title {
  text-transform: none;
}

#brakebee-ablauf .sub-title .fa-bee {
  font-size: 16px;
}

#brakebee-ablauf .sec-heading .sec-title span {
  color: var(--tj-color-theme-primary);
}

#brakebee-ablauf .content-wrap > .desc {
  margin-bottom: 0;
}

/* Transparentes Tablet-Motiv unter der Einleitung vollständig zeigen. */
#brakebee-ablauf .na-brakebee-image {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
}

/* Einzelne BrakeBEE-Messwagenkarte im statischen Layout der Home-Lösungskarten. */
#brakebee-messwagen {
  margin-top: 60px;
}

#brakebee-messwagen .service-content-area,
#brakebee-messwagen .service-img {
  width: 50%;
}

#brakebee-messwagen .service-content,
#brakebee-messwagen .service-img {
  max-width: none;
}

#brakebee-messwagen .list-items {
  margin: 0;
  padding: 0;
}

#brakebee-messwagen .list-items li {
  color: var(--tj-color-text-body-2);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 10px;
}

#brakebee-messwagen .list-items li:last-child {
  margin-bottom: 0;
}

#brakebee-messwagen .list-items li i {
  flex-shrink: 0;
}

#brakebee-messwagen .na-messwagen-features-title {
  color: var(--tj-color-common-white);
  font-size: 20px;
  font-weight: var(--tj-fw-medium);
  line-height: 1.3;
  margin: 28px 0 16px;
}

@media (max-width: 991px) {
  #brakebee-messwagen {
    margin-top: 40px;
  }

  #brakebee-messwagen .service-content-area,
  #brakebee-messwagen .service-img {
    width: 100%;
  }

  #brakebee-messwagen .service-img,
  #brakebee-messwagen .service-img img {
    display: block;
    height: auto;
  }
}

/* Gemeinsame Produktübersicht: einheitliche Bildflächen und ruhige Textgrößen. */
#forcebee-produkte .na-product-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}

#forcebee-produkte .na-product-title {
  font-size: 24px;
  line-height: 1.3;
  margin: 24px 0 18px;
}

#forcebee-produkte .na-product-subtitle {
  font-size: 20px;
  line-height: 1.3;
  margin: 28px 0 16px;
}

#forcebee-produkte .na-product p,
#forcebee-produkte .list-items li {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

#forcebee-produkte .na-product p {
  margin-bottom: 18px;
}

#forcebee-produkte .list-items {
  margin: 0;
  padding: 0;
}

#forcebee-produkte .list-items li {
  margin-bottom: 10px;
}

#forcebee-produkte .list-items li:last-child {
  margin-bottom: 0;
}

#forcebee-produkte .list-items li i {
  flex-shrink: 0;
}

#forcebee-produkte .na-product-feature-label,
#forcebee-produkte .na-product-feature-desc {
  display: block;
}

#forcebee-produkte .na-product-feature-label {
  color: var(--tj-color-heading-primary);
}

#forcebee-produkte .na-product-feature-desc {
  margin-top: 4px;
}

#forcebee-produkte .na-product-features li {
  margin-bottom: 18px;
}

/* Fotos der Bahn-Fotoreihe gleich hoch in ihren natürlichen Hoch-/Querformaten zeigen. */
#forcebee-fotoreihe {
  padding-block: 20px;
}

#forcebee-fotoreihe .swiper-slide {
  width: auto;
}

#forcebee-fotoreihe .image-box img {
  display: block;
  width: auto;
  height: 320px;
  max-width: none;
}

@media (max-width: 767px) {
  #forcebee-fotoreihe {
    padding-block: 15px;
  }

  #forcebee-fotoreihe .image-box img {
    height: 220px;
  }
}

/* Vorhandene Sliderpfeile auf die Mitte der Fotozeile legen. */
#forcebee-fotoreihe .slider-navigation {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#forcebee-fotoreihe .slider-prev,
#forcebee-fotoreihe .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--tj-color-common-white);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
}

#forcebee-fotoreihe .slider-prev {
  left: 12px;
}

#forcebee-fotoreihe .slider-next {
  right: 12px;
}

#forcebee-fotoreihe .slider-prev:hover,
#forcebee-fotoreihe .slider-next:hover {
  background-color: var(--tj-color-theme-primary);
}

/* Vorhandenes NET-Icon dezent hinter der rechten Textspalte platzieren. */
#forcebee-paradigmenwechsel::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  background: url("../images/logos/Logo_NET_Automation-icon.svg") no-repeat right bottom / contain;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

#forcebee-paradigmenwechsel > .container {
  position: relative;
  z-index: 1;
}

/* SVG-Kundenlogos im bestehenden laufenden Logo-Slider. */
#kundenlogos .client-slider-1::before,
#kundenlogos .client-slider-1::after {
  pointer-events: none;
}

#kundenlogos .client-logo img {
  display: block;
  width: auto;
  height: 38px;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
}

@media (max-width: 575px) {
  #kundenlogos .client-logo img {
    height: 34px;
    max-width: 150px;
  }
}

/* Referenzen im Clients-Feedback-Layout: vollständige Texte und bündige Kartenfüße. */
#referenzen .sec-heading-wrap {
  padding-top: 0;
}

#referenzen .testimonial-wrapper {
  margin-inline-end: 0;
}

#referenzen .testimonial-slider > .swiper-wrapper {
  align-items: stretch;
}

#referenzen .testimonial-slider .swiper-slide {
  height: auto;
}

#referenzen .testimonial-item {
  display: flex;
  flex-direction: column;
}

#referenzen .desc p + p,
#referenzen .desc ol {
  margin-top: 18px;
}

#referenzen .desc ol {
  padding-left: 22px;
  margin-bottom: 0;
}

#referenzen .desc li + li {
  margin-top: 12px;
}

#referenzen .testimonial-author {
  gap: 20px;
  margin-top: auto;
}

#referenzen .testimonial-author .title {
  font-size: 24px;
  line-height: 1.25;
}

#referenzen .na-reference-logo {
  display: block;
  width: auto;
  height: 38px;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1);
  opacity: 0.65;
}

#referenzen .text-btn {
  font-size: 16px;
}

@media (max-width: 575px) {
  #referenzen .na-reference-logo {
    height: 34px;
    max-width: 156px;
  }

  #referenzen .text-btn {
    font-size: 14px;
  }

  #referenzen .text-btn .btn-text span {
    white-space: nowrap;
  }
}

@media (max-width: 991px) {
  #forcebee-paradigmenwechsel::before {
    width: 80%;
    height: 45%;
  }
}

/* Das Hochformatfoto bleibt im bestehenden Rahmen der Download-Bildkarte. */
#downloads .faq-img {
  aspect-ratio: 585 / 629;
}

#downloads .faq-img .title {
  max-width: calc(100% - 60px);
  font-size: 40px;
  line-height: 1.15;
}

/* Kompakte Downloadzeilen im FAQ-Bildlayout, ohne Accordion. */
#downloads .na-download-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

#downloads .na-download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 24px;
  border-radius: 10px;
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-heading-primary);
  font-size: 18px;
  font-weight: var(--tj-fw-sbold);
  line-height: 28px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#downloads .na-download-row:hover,
#downloads .na-download-row:focus-visible {
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
}

#downloads .na-download-row:focus-visible {
  outline: 2px solid var(--tj-color-theme-dark);
  outline-offset: 3px;
}

#downloads .na-download-icon {
  position: relative;
  flex: 0 0 24px;
  height: 24px;
  color: var(--tj-color-theme-primary);
  font-size: 22px;
  transition: color 0.2s ease;
}

#downloads .na-download-icon i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#downloads .na-download-arrow {
  opacity: 0;
  transform: translateY(-4px);
}

#downloads .na-download-row:hover .na-download-icon,
#downloads .na-download-row:focus-visible .na-download-icon {
  color: var(--tj-color-common-white);
}

#downloads .na-download-row:hover .na-download-file,
#downloads .na-download-row:focus-visible .na-download-file {
  opacity: 0;
  transform: translateY(4px);
}

#downloads .na-download-row:hover .na-download-arrow,
#downloads .na-download-row:focus-visible .na-download-arrow {
  opacity: 1;
  transform: translateY(0);
}

#downloads .na-download-cta {
  margin-top: 24px;
}

@media (min-width: 992px) {
  #downloads .na-download-column {
    display: flex;
    flex-direction: column;
  }

  #downloads .na-download-cta {
    display: flex;
    flex: 1;
    align-items: center;
    margin-top: 0;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #downloads .na-download-list {
    gap: 6px;
  }

  #downloads .na-download-row {
    min-height: 56px;
    padding-block: 14px;
  }

  #downloads .faq-img .title {
    font-size: 36px;
  }
}

@media (max-width: 991px) {
  #downloads .na-download-list {
    margin-top: 40px;
  }
}

@media (max-width: 575px) {
  #downloads .faq-img .title {
    top: 24px;
    inset-inline-start: 24px;
    max-width: calc(100% - 48px);
    font-size: 28px;
  }

  #downloads .na-download-row {
    padding-inline: 20px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #downloads .na-download-row,
  #downloads .na-download-icon,
  #downloads .na-download-icon i {
    transition: none;
  }
}

/* In der Bahnalternative stehen Einleitung und Überschrift gemeinsam rechts. */
.na-bahn-alternative-hero .h6-hero-history {
  max-width: none;
  margin-top: 24px;
}

.na-bahn-alternative-hero .na-hero-logo {
  margin-bottom: 0;
}

/* Zweite Bahnalternative: Einstieg aus index.html mit dunkler Textfläche und Video. */
.na-bahn-alternative-2-hero .banner-left-box {
  padding: 64px 48px 64px 70px;
}

.na-bahn-alternative-2-hero .banner-content {
  max-width: 590px;
  padding: 0;
}

.na-bahn-alternative-2-hero .banner-title {
  font-size: clamp(40px, 3.6vw, 60px);
  font-weight: var(--tj-fw-regular);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.na-bahn-alternative-2-hero .banner-title span {
  display: block;
  font-weight: inherit;
}

.na-bahn-alternative-2-hero .na-hero-subheading {
  max-width: 480px;
  margin: 0;
  color: var(--tj-color-common-white);
  font-size: 22px;
  line-height: 1.4;
}

.na-bahn-alternative-2-hero .banner-desc-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: none;
  margin: 28px 0;
  padding-block: 24px;
}

.na-bahn-alternative-2-hero .na-hero-intro {
  margin: 0;
  color: var(--tj-color-common-white);
  font-size: 24px;
  font-weight: var(--tj-fw-medium);
  line-height: 1.35;
}

.na-bahn-alternative-2-hero .banner-desc-area .banner-desc {
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.6;
}

.na-bahn-alternative-2-hero .na-hero-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.na-bahn-alternative-2-hero .na-hero-play {
  width: 90px;
  height: 90px;
  color: var(--tj-color-theme-primary);
  background: var(--tj-color-common-white);
  border: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.na-bahn-alternative-2-hero .na-hero-play span {
  font-size: 24px;
}

.na-bahn-alternative-2-hero .na-hero-play:focus-visible {
  outline: 3px solid var(--tj-color-theme-primary);
  outline-offset: 5px;
}

.na-bahn-alternative-2-hero .na-hero-logo-card {
  display: grid;
  min-height: 235px;
  place-items: center;
}

.na-bahn-alternative-2-hero .na-hero-logo-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (min-width: 992px) and (max-width: 1399px) {
  .na-bahn-alternative-2-hero .banner-left-box {
    padding: 52px 36px 52px 50px;
  }

  .na-bahn-alternative-2-hero .na-hero-subheading {
    font-size: 20px;
  }

  .na-bahn-alternative-2-hero .banner-desc-area .banner-desc {
    font-size: 16px;
  }
}

@media (max-width: 991px) {
  .na-bahn-alternative-2-hero .banner-area {
    min-height: 0;
  }

  .na-bahn-alternative-2-hero .banner-left-box {
    padding: 48px 32px;
  }

  .na-bahn-alternative-2-hero .banner-content {
    max-width: 720px;
    margin: 0 auto;
  }

  .na-bahn-alternative-2-hero .banner-title {
    font-size: 44px;
  }

  .na-bahn-alternative-2-hero .banner-right-box {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .na-bahn-alternative-2-hero .banner-scroll {
    display: none;
  }
}

@media (max-width: 575px) {
  .na-bahn-alternative-2-hero .banner-left-box {
    padding: 36px 24px;
  }

  .na-bahn-alternative-2-hero .banner-title {
    font-size: clamp(28px, 7.5vw, 38px);
  }

  .na-bahn-alternative-2-hero .na-hero-subheading {
    font-size: 18px;
  }

  .na-bahn-alternative-2-hero .na-hero-intro {
    font-size: 21px;
  }

  .na-bahn-alternative-2-hero .banner-desc-area {
    margin-block: 24px;
    padding-block: 20px;
  }

  .na-bahn-alternative-2-hero .banner-desc-area .banner-desc {
    font-size: 16px;
  }

  .na-bahn-alternative-2-hero .banner-right-box {
    aspect-ratio: 1 / 1;
  }

  .na-bahn-alternative-2-hero .banner-right-box .box-area {
    max-width: 165px;
  }

  .na-bahn-alternative-2-hero .na-hero-logo-card {
    min-height: 150px;
    padding: 20px 16px;
  }

  .na-bahn-alternative-2-hero .na-hero-play {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 359px) {
  .na-bahn-alternative-2-hero .na-hero-play {
    top: 35%;
    left: 65%;
  }
}