:root {
  --fc-orange: #f29100;
  --fc-charcoal: #3c3c3b;
  --fc-white: #fff;
  --fc-light: #f3f9f6;
  --fc-pale-gray: #e6e6e6;
  --fc-gray: #999;
}

body {
  margin: 0;
  color: var(--fc-charcoal);
  background: var(--fc-white);
  font-family: "Montserrat", sans-serif;
}

.subpage-legal-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding: 25px 5%; background: var(--fc-charcoal); color: white; font-size: 13px; }
.subpage-legal-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.subpage-legal-footer a:hover { color: var(--fc-orange); }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, .hero-carousel:focus-visible {
  outline: 3px solid var(--fc-orange);
  outline-offset: 5px;
}

.contact-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0 9% 0 27%;
  background: var(--fc-charcoal);
  color: var(--fc-light);
}

.brand-pattern {
  position: absolute;
  left: 0;
  top: 50%;
  width: 19.5%;
  height: 36px;
  overflow: visible;
  transform: translateY(-50%);
  stroke: var(--fc-orange);
  stroke-width: 4;
}

.contact-details { display: flex; align-items: center; gap: 20px; }
.contact-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 10px; font-weight: 300; }
.contact-item:hover { color: var(--fc-orange); }
.contact-item svg { width: 19px; height: 21px; flex-shrink: 0; fill: currentColor; }
.website-contact svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-links { display: flex; align-items: center; gap: 5px; margin-left: auto; padding-left: 24px; }
.social-icon, .social-icon img { display: block; width: 26px; height: 26px; }
.social-icon img { object-fit: contain; border-radius: 5px; }

.main-navigation { min-height: 52px; padding: 0; background: var(--fc-white); }
.navigation-content { padding: 0 4.4%; }
.navbar-brand { display: flex; align-items: center; margin: 0; padding: 0; width: 22.6%; }
.navbar-brand img { display: block; width: 143px; height: auto; }
.main-navigation .navbar-nav { gap: 22px; }
.main-navigation .navbar-nav .nav-link { padding: 15px 0; color: var(--fc-gray); font-size: 16px; line-height: 22px; font-weight: 700; }
.main-navigation a.nav-link:hover { color: var(--fc-orange); }
.main-navigation button.nav-link { border: 0; background: transparent; font-family: inherit; }
.main-navigation button.nav-link:hover, .main-navigation button.nav-link.active { color: var(--fc-orange); }
.main-navigation .dropdown-menu { border: 1px solid #eee; border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px #00000014; }
.main-navigation .dropdown-item { font-size: 14px; padding: 10px 14px; border-radius: 5px; }
.main-navigation .dropdown-item:hover, .main-navigation .dropdown-item:focus, .main-navigation .dropdown-item[aria-current="page"] { background: #fff3df; color: #a45f00; }
.navbar-toggler { padding: 5px 8px; border: 0; }

.hero {
  position: relative;
  isolation: isolate;
  height: 38.56vw;
  overflow: hidden;
}

.hero h1 {
  position: relative;
  z-index: 0;
  margin: 0;
  padding-top: .9vw;
  text-align: center;
  color: var(--fc-pale-gray);
  font-size: 5.82vw;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.hero-background {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 23.02vw;
  background: #d81b38 url("assets/hero-background.webp") center / 100% 100% no-repeat;
}

.hero-carousel { position: absolute; inset: 0; touch-action: pan-y; }
.hero-carousel .carousel-inner { position: absolute; top: 5.89vw; width: 100%; height: 29.72vw; overflow: visible; }

/* Bootstrap steuert den Wechsel; diese Positionen bilden die Staffelung der PDF ab. */
.hero-carousel .carousel-item {
  --x: 0vw;
  --y: 0vw;
  --scale: 1;
  position: absolute;
  display: block;
  float: none;
  top: 50%;
  left: 50%;
  width: 21.43vw;
  margin: 0;
  z-index: 4;
  transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) scale(var(--scale));
  transform-origin: center;
  transition: transform .65s cubic-bezier(.22, .61, .36, 1);
  box-shadow: 9px 14px 23px rgb(0 0 0 / 48%);
  will-change: transform;
}

.hero-carousel .carousel-item img { display: block; width: 100%; height: auto; aspect-ratio: 1707 / 2366; object-fit: cover; user-select: none; }
.hero-carousel [data-position="-1"] { --x: -14.05vw; --y: -1.65vw; --scale: .75; z-index: 3; }
.hero-carousel [data-position="1"] { --x: 14.05vw; --y: -1.65vw; --scale: .75; z-index: 3; }
.hero-carousel [data-position="-2"] { --x: -22.42vw; --y: -2.12vw; --scale: .625; z-index: 2; }
.hero-carousel [data-position="2"] { --x: 22.42vw; --y: -2.12vw; --scale: .625; z-index: 2; }
.hero-carousel [data-position="-3"] { --x: -27.83vw; --y: -2.23vw; --scale: .51; z-index: 1; }
.hero-carousel [data-position="3"] { --x: 27.83vw; --y: -2.23vw; --scale: .51; z-index: 1; }
.hero-carousel .carousel-item.is-wrapping { transition: none; }
.brand-home { position: absolute; left: 0; top: 0; width: 19.5%; height: 100%; }
.brand-home .brand-pattern { width: 100%; }
.hero-carousel .carousel-inner { cursor: grab; transform: translateX(var(--drag-x, 0px)); transition: transform .3s ease; }
.hero-carousel.is-dragging .carousel-inner { cursor: grabbing; transition: none; }
.hero-carousel .carousel-item { animation: hero-float 5.5s ease-in-out infinite alternate; }
.hero-carousel .carousel-item:nth-child(2n) { animation-delay: -2s; }
.hero-carousel .carousel-item:nth-child(3n) { animation-delay: -4s; }
.hero-carousel.is-dragging .carousel-item { animation-play-state: paused; }
@keyframes hero-float { from { translate: 0 3px; } to { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-carousel .carousel-item { animation: none; }
  .hero-carousel .carousel-inner { transition: none; }
}

.hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next {
  top: 16.2vw;
  bottom: auto;
  width: 5vw;
  height: 5vw;
  z-index: 5;
  opacity: 1;
}
.hero-carousel .carousel-control-prev { left: 9.8%; }
.hero-carousel .carousel-control-next { right: 9.8%; }
.carousel-arrow { display: block; width: 2.4vw; height: 2.4vw; border-top: .45vw solid white; border-right: .45vw solid white; }
.carousel-control-prev .carousel-arrow { transform: rotate(-135deg); }
.carousel-control-next .carousel-arrow { transform: rotate(45deg); }
.hero-carousel .carousel-control-prev:hover, .hero-carousel .carousel-control-next:hover { opacity: .7; }
.carousel-pause { position: absolute; right: 16px; bottom: 12px; z-index: 6; border: 0; padding: 8px 12px; background: var(--fc-charcoal); color: white; font-size: 12px; }

@media (min-width: 1600px) {
  .contact-bar { height: 4.74vw; }
  .contact-item { font-size: .77vw; }
  .contact-details { gap: 1.53vw; }
  .contact-item svg { width: 1.45vw; height: 1.6vw; }
  .main-navigation { min-height: 3.98vw; }
  .navbar-brand img { width: 10.94vw; }
  .main-navigation .navbar-nav .nav-link { font-size: 1.22vw; padding: 1.15vw 0; }
  .main-navigation .navbar-nav { gap: 1.68vw; }
}

@media (max-width: 1199.98px) {
  .contact-bar { padding-right: 4.4%; padding-left: 24%; }
  .contact-details { gap: 12px; }
  .contact-item { font-size: 9px; }
  .social-links { padding-left: 12px; }
  .main-navigation .navbar-nav { gap: 18px; }
  .main-navigation .navbar-nav .nav-link { font-size: 14px; }
}

@media (max-width: 991.98px) {
  .contact-bar { height: 50px; padding-left: 22%; }
  .website-contact { display: none; }
  .contact-details { gap: 15px; }
  .contact-item { font-size: 9px; }
  .social-links { gap: 3px; }
  .social-icon, .social-icon img { width: 23px; height: 23px; }
  .navbar-brand { width: 24%; }
  .navbar-brand img { width: 130px; }
  .main-navigation .navbar-nav { gap: 14px; }
  .main-navigation .navbar-nav .nav-link { font-size: 12px; }
}

@media (max-width: 767.98px) {
  .contact-bar { height: auto; min-height: 46px; padding: 8px 5%; }
  .brand-home, .brand-pattern, .address-contact { display: none; }
  .contact-details { gap: 16px; }
  .contact-item { font-size: 10px; }
  .contact-item svg { width: 15px; height: 17px; }
  .social-icon, .social-icon img { width: 23px; height: 23px; }
  .main-navigation { min-height: 64px; padding: 10px 0; }
  .navigation-content { padding: 0 5%; }
  .navbar-brand { width: auto; }
  .navbar-brand img { width: 154px; }
  .main-navigation .navbar-nav { gap: 0; padding-top: 12px; }
  .main-navigation .navbar-nav .nav-link { padding: 9px 0; font-size: 15px; }
  .hero { height: 103vw; min-height: 370px; }
  .hero h1 { padding: 7px 12px 0; font-size: 6.35vw; letter-spacing: -.055em; }
  .hero-background { height: 63%; background-size: auto 100%; }
  .hero-carousel .carousel-inner { top: 17vw; height: 72vw; }
  .hero-carousel .carousel-item { width: 49vw; box-shadow: 5px 10px 16px rgb(0 0 0 / 40%); }
  .hero-carousel [data-position="-1"] { --x: -22vw; --y: -2vw; --scale: .76; }
  .hero-carousel [data-position="1"] { --x: 22vw; --y: -2vw; --scale: .76; }
  .hero-carousel [data-position="-2"] { --x: -34vw; --y: -3vw; --scale: .6; }
  .hero-carousel [data-position="2"] { --x: 34vw; --y: -3vw; --scale: .6; }
  .hero-carousel [data-position="-3"] { --x: -41vw; --y: -4vw; --scale: .46; }
  .hero-carousel [data-position="3"] { --x: 41vw; --y: -4vw; --scale: .46; }
  .hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next { top: 44vw; width: 44px; height: 52px; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 35%)); }
  .hero-carousel .carousel-control-prev { left: 1%; }
  .hero-carousel .carousel-control-next { right: 1%; }
  .carousel-arrow { width: 23px; height: 23px; border-width: 4px; }
}

@media (max-width: 479.98px) {
  .contact-details { flex-wrap: wrap; gap: 4px 12px; }
  .contact-item { gap: 5px; font-size: 9px; }
  .social-links { flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel .carousel-item { transition: none; }
}

/* Leistungen */
.services {
  padding: 3.65vw 6.25vw 5.85vw;
  scroll-margin-top: 24px;
  background: var(--fc-white);
}

.services-heading h2 {
  margin: 0;
  color: var(--fc-orange);
  font-size: 3.14vw;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.055em;
}

.services-heading p {
  margin: .15vw 0 .45vw;
  font-size: 1.25vw;
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -.05em;
}

.services-ornament {
  display: block;
  width: 9vw;
  height: 1vw;
  margin: 0 auto;
  stroke: var(--fc-orange);
  stroke-width: 1.5;
}

.services-grid {
  --bs-gutter-x: 1.05vw;
  --bs-gutter-y: 3.05vw;
  margin-top: 2.35vw;
  margin-bottom: 0;
  row-gap: var(--bs-gutter-y);
}

.services-grid > .col { margin-top: 0; }
.service-card { margin: 0; text-align: center; }
.service-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 660 / 385;
  object-fit: cover;
  transform-origin: center bottom;
  transition: transform .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover img { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .service-card img { transition: none; }
}

.service-card figcaption {
  margin-top: .45vw;
  color: var(--fc-charcoal);
  font-size: 1.04vw;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.045em;
}
.service-card figcaption::after {
  content: "";
  display: block;
  width: 2.6vw;
  height: 1.5px;
  margin: .5vw auto 0;
  background: var(--fc-orange);
}

@media (max-width: 991.98px) {
  .services { padding: 48px 6.25% 64px; }
  .services-heading h2 { font-size: 36px; }
  .services-heading p { margin: 5px 0 8px; font-size: 16px; }
  .services-ornament { width: 120px; height: 14px; }
  .services-grid { --bs-gutter-x: 20px; --bs-gutter-y: 30px; margin-top: 30px; }
  .service-card figcaption { margin-top: 9px; font-size: 13px; }
  .service-card figcaption::after { width: 34px; margin-top: 8px; }
}

@media (max-width: 767.98px) {
  .services { padding: 40px 5% 48px; }
  .services-heading h2 { font-size: 32px; }
  .services-heading p { font-size: 15px; }
  .services-grid { --bs-gutter-x: 16px; --bs-gutter-y: 28px; }
  .service-card figcaption { font-size: clamp(10px, 2.8vw, 14px); }
}

/* Corporate Identity */
.corporate-identity { padding-bottom: 6vw; }
.corporate-banner { position: relative; color: var(--fc-charcoal); }
.corporate-artwork { position: relative; aspect-ratio: 1915 / 463; }
.corporate-artwork::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 92%), rgb(255 255 255 / 45%) 17%, transparent 40%);
  pointer-events: none;
}
.corporate-background { display: block; width: 100%; height: 100%; object-fit: cover; }
.corporate-copy { position: absolute; top: 14.2%; left: 4.4%; }
.corporate-copy h2 {
  margin: 0;
  font-size: 2.75vw;
  line-height: .92;
  font-weight: 700;
  letter-spacing: -.065em;
}
.corporate-copy p {
  margin: .6vw 0 0;
  color: var(--fc-orange);
  font-size: 1.46vw;
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.045em;
}
.corporate-values { margin: 0; }
.corporate-hexagon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.52%;
  height: 34.6%;
  background: var(--fc-charcoal);
  color: var(--fc-white);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  text-align: center;
  font-size: 1.46vw;
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.055em;
}
.corporate-hexagon--idea { top: 6.7%; left: 24.23%; background: #575959; }
.corporate-hexagon--colors { top: 6.7%; left: 44.5%; }
.corporate-hexagon--type { top: 31%; left: 34.65%; }
.corporate-hexagon--name { bottom: 6.7%; left: 24.23%; background: #575959; }
.corporate-hexagon--logo { bottom: 6.7%; left: 44.5%; }
.corporate-number {
  position: absolute;
  left: 4.2%;
  bottom: .2%;
  font-size: 8.4vw;
  line-height: 1;
  font-weight: 700;
}
.corporate-cta {
  position: absolute;
  left: 11.7%;
  bottom: 4.3%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: .6vw .7vw;
  border: 0;
  border-radius: .5vw;
  background: var(--fc-charcoal);
  color: var(--fc-white);
  font-size: clamp(8px, .64vw, 12px);
  font-weight: 600;
  line-height: 1.2;
}
.corporate-cta:hover, .corporate-cta:focus-visible { background: var(--fc-orange); color: var(--fc-white); }
.corporate-markers { display: flex; justify-content: center; gap: .65vw; margin-top: 1.45vw; }
.corporate-markers span { width: 1.04vw; height: 1.04vw; border-radius: 50%; background: var(--fc-charcoal); }
.corporate-markers .is-active { background: var(--fc-orange); }
.corporate-description {
  width: 82%;
  margin: 1.7vw auto 0;
  color: var(--fc-charcoal);
  text-align: center;
  font-size: clamp(20px, 1.5vw, 28px);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -.02em;
}

@media (max-width: 767.98px) {
  .corporate-identity { padding-bottom: 48px; }
  .corporate-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; background: var(--fc-light); padding-bottom: 24px; }
  .corporate-copy { position: static; order: -1; width: 100%; padding: 28px 5% 0; }
  .corporate-copy h2 { font-size: 32px; line-height: .98; }
  .corporate-copy p { margin-top: 10px; font-size: 17px; line-height: 1.1; }
  .corporate-artwork { width: 100%; }
  .corporate-hexagon { font-size: clamp(6px, 1.65vw, 12px); }
  .corporate-number { position: static; margin-left: 5%; font-size: 64px; }
  .corporate-cta { position: static; min-height: 44px; padding: 12px 16px; border-radius: 6px; font-size: 11px; }
  .corporate-markers { gap: 8px; margin-top: 20px; }
  .corporate-markers span { width: 12px; height: 12px; }
  .corporate-description { width: 90%; margin-top: 24px; font-size: 18px; line-height: 1.5; }
}

/* Produkte */
.products { padding-bottom: 5.5vw; scroll-margin-top: 24px; }
.products-heading h2 {
  margin: 0;
  color: var(--fc-orange);
  font-size: 3.14vw;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.055em;
}
.products-tagline {
  margin: .15vw 0 0;
  color: var(--fc-charcoal);
  font-size: 2.09vw;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.055em;
}
.products-subtitle, .products-note {
  font-size: 1.25vw;
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -.045em;
}
.products-subtitle { margin: .15vw 0 .45vw; }
.products-ornament {
  display: block;
  width: 9vw;
  height: 1vw;
  margin: 0 auto;
  stroke: var(--fc-orange);
  stroke-width: 1.5;
}
.products-carousel { margin-top: 2.2vw; touch-action: pan-y; }
.products-carousel .carousel-inner { width: 75%; margin: 0 auto; cursor: grab; user-select: none; transform: translateX(var(--products-drag, 0px)); transition: transform .25s ease; }
.products-carousel.is-dragging .carousel-inner { cursor: grabbing; transition: none; }
@media (prefers-reduced-motion: reduce) { .products-carousel .carousel-inner { transition: none; } }
.products-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .9vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-card { margin: 0; }
.product-card img { display: block; width: 100%; height: auto; aspect-ratio: 931 / 537; object-fit: contain; }
.product-card figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.24vw;
  padding: .45vw .25vw;
  background: var(--fc-orange);
  color: var(--fc-white);
  text-align: center;
  font-size: .94vw;
  line-height: 1.2;
  font-weight: 700;
}
.products-carousel .carousel-control-prev, .products-carousel .carousel-control-next {
  top: 0;
  bottom: auto;
  width: 5vw;
  height: 9vw;
  opacity: 1;
}
.products-carousel .carousel-control-prev { left: .8%; }
.products-carousel .carousel-control-next { right: .8%; }
.products-arrow { width: 2.4vw; height: 2.4vw; border-top: .4vw solid var(--fc-orange); border-right: .4vw solid var(--fc-orange); }
.products-carousel .carousel-control-prev .products-arrow { transform: rotate(-135deg); }
.products-carousel .carousel-control-next .products-arrow { transform: rotate(45deg); }
.products-carousel .carousel-control-prev:hover, .products-carousel .carousel-control-next:hover { opacity: .65; }
.products-carousel .carousel-indicators { position: static; margin: 1.25vw 0 0; }
.products-carousel .carousel-indicators button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(24px, 1.7vw);
  height: 32px;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 1;
}
.products-carousel .carousel-indicators button::after {
  content: "";
  width: max(10px, 1.04vw);
  height: max(10px, 1.04vw);
  border-radius: 50%;
  background: var(--fc-charcoal);
}
.products-carousel .carousel-indicators .active::after { background: var(--fc-orange); }
.products-note { margin: 1vw 0 0; }
.products-carousel:focus-visible { outline: 3px solid var(--fc-orange); outline-offset: 4px; }

@media (max-width: 991.98px) {
  .products { padding-bottom: 56px; }
  .products-heading h2 { font-size: 36px; }
  .products-tagline { margin-top: 5px; font-size: 23px; }
  .products-subtitle, .products-note { font-size: 16px; }
  .products-subtitle { margin: 5px 0 8px; }
  .products-ornament { width: 120px; height: 14px; }
  .products-carousel { margin-top: 28px; }
  .products-carousel .carousel-inner { width: 80%; }
  .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; }
  .product-card figcaption { min-height: 36px; padding: 8px 5px; font-size: 12px; }
  .products-carousel .carousel-control-prev, .products-carousel .carousel-control-next { width: 44px; height: auto; bottom: 56px; }
  .products-arrow { width: 23px; height: 23px; border-width: 4px; }
  .products-carousel .carousel-indicators { margin-top: 12px; }
  .products-carousel .carousel-indicators button { width: 32px; height: 44px; }
  .products-carousel .carousel-indicators button::after { width: 12px; height: 12px; }
  .products-note { margin: 10px 5% 0; }
}

@media (max-width: 767.98px) {
  .products { padding-bottom: 48px; }
  .products-heading { padding: 0 5%; }
  .products-heading h2 { font-size: 32px; }
  .products-tagline { font-size: 20px; }
  .products-subtitle, .products-note { font-size: 15px; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .product-card figcaption { min-height: 42px; font-size: 11px; }
  .products-carousel .carousel-control-prev { left: 0; width: 9%; }
  .products-carousel .carousel-control-next { right: 0; width: 9%; }
  .products-arrow { width: 18px; height: 18px; border-width: 3px; }
}

/* Beratung und Planung: Originalformen aus der PDF mit HTML-Beschriftung. */
.planning { padding-bottom: 5.5vw; scroll-margin-top: 24px; }
.planning-heading h2 {
  margin: 0;
  color: var(--fc-orange);
  font-size: 3.14vw;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.055em;
}
.planning-tagline { margin: .15vw 0 0; font-size: 2.09vw; line-height: 1.15; font-weight: 700; letter-spacing: -.055em; }
.planning-subtitle { margin: .15vw 0 .45vw; font-size: 1.25vw; line-height: 1.3; font-weight: 300; letter-spacing: -.045em; }
.planning-ornament { display: block; width: 9vw; height: 1vw; margin: 0 auto; stroke: var(--fc-orange); stroke-width: 1.5; }
.planning-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45vw 2.7vw;
  width: 78%;
  margin: 1.8vw auto 0;
  padding: 0;
  list-style: none;
}
.planning-step {
  position: relative;
  container-type: inline-size;
  flex: 0 0 calc((100% - 10.8vw) / 5);
  aspect-ratio: 300 / 270;
  text-align: center;
}
.planning-step:nth-child(n+6) { translate: -1vw 0; }
.planning-step > img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 270; }
.planning-step h3 {
  position: absolute;
  top: 36.7%;
  left: 0;
  display: block;
  width: 86%;
  height: 27.2%;
  margin: 0;
  padding-top: 3.8cqw;
  color: var(--fc-charcoal);
  font-size: 6.66cqw;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.05em;
}
.planning-step p {
  position: absolute;
  top: 67.4%;
  left: 5%;
  width: 76%;
  margin: 0;
  color: var(--fc-gray);
  font-size: 5cqw;
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -.025em;
  hyphens: auto;
}

.planning-step:nth-child(n+3) p { left: 0; width: 74%; }
.planning-footer { margin-top: 1.1vw; }
.planning-footer p {
  margin: 0 0 .8vw;
  color: var(--fc-charcoal);
  font-size: 1.25vw;
  line-height: 1.3;
  font-weight: 300;
  letter-spacing: -.045em;
}
.planning-cta {
  padding: .65vw 1.1vw;
  border: 0;
  border-radius: .45vw;
  background: var(--fc-charcoal);
  color: var(--fc-white);
  font-size: clamp(9px, .72vw, 13px);
  line-height: 1.2;
  font-weight: 600;
}
.planning-cta:hover, .planning-cta:focus-visible { background: var(--fc-orange); color: var(--fc-white); }

@media (max-width: 1199.98px) {
  .planning { padding-bottom: 56px; }
  .planning-heading { padding: 0 5%; }
  .planning-heading h2 { font-size: 36px; }
  .planning-tagline { margin-top: 5px; font-size: 23px; }
  .planning-subtitle { margin: 5px 0 8px; font-size: 16px; }
  .planning-ornament { width: 120px; height: 14px; }
  .planning-grid { width: 90%; gap: 12px 24px; margin-top: 28px; }
  .planning-step { flex-basis: calc((100% - 48px) / 3); }
  .planning-step:nth-child(n+6) { translate: none; }
  .planning-footer { margin-top: 20px; }
  .planning-footer p { margin-bottom: 12px; font-size: 16px; }
  .planning-cta { padding: 11px 18px; border-radius: 6px; font-size: 11px; }
}

@media (max-width: 767.98px) {
  .planning { padding-bottom: 48px; }
  .planning-heading h2 { font-size: 32px; }
  .planning-tagline { font-size: 20px; }
  .planning-subtitle { font-size: 15px; }
  .planning-grid { gap: 12px 16px; }
  .planning-step { flex-basis: calc((100% - 16px) / 2); }
}

@media (max-width: 575.98px) {
  .planning-step { flex-basis: min(100%, 320px); }
  .planning-grid { gap: 14px; }
}

/* Scharfe, einzeln aufgebaute Webdesign-Szene. */
.success { position: relative; background: #eee; }
.success-scene { position: relative; height: 41.5vw; background: radial-gradient(ellipse at 50% 15%, #ffac1c 0, #f99216 40%, #f15b21 80%); overflow: hidden; }
.success-scene::after { content: ""; position: absolute; inset: 79% 0 0; background: radial-gradient(ellipse at 50% 90%, #fff, #d0d0d0); }
.success h2#success-title { position: relative; z-index: 1; padding: 1.2vw 3% 0; margin: 0; color: #fff; text-align: center; font-size: 5.3vw; line-height: 1.1; font-weight: 700; letter-spacing: -.055em; }
.success-copy { position: absolute; left: 5.3%; top: 23%; width: 33%; z-index: 2; }
.success-copy h3 { color: #fff; font-size: 2.05vw; font-weight: 600; line-height: 1.1; letter-spacing: -.04em; margin: 0 0 .8vw; }
.success-copy p { font-size: 1.28vw; line-height: 1.3; letter-spacing: -.035em; max-width: 25vw; margin: 0; }
.success-lamps { position: absolute; top: 0; left: 41%; width: 18%; height: 25%; display: flex; justify-content: space-between; z-index: 2; pointer-events: none; }
.success-lamps span { position: relative; width: 19%; height: 100%; background: linear-gradient(#675227, #675227) center top / 1px 68% no-repeat; }
.success-lamps span::before { content: ""; position: absolute; top: 67%; left: 0; width: 100%; height: 34%; border-radius: 55% 55% 14% 14%; background: linear-gradient(125deg, #111 10%, #393939 50%, #151515 53%, #333); border-bottom: .3vw solid #fff; box-shadow: 0 .8vw 1.8vw #fff8; }
.success-lamps span::after { content: ""; position: absolute; top: 98%; left: -80%; width: 260%; height: 150%; background: linear-gradient(#fff9, #fff0); clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%); filter: blur(3px); }
.success-devices { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.success-device { position: absolute; filter: drop-shadow(0 .6vw .35vw #0003); }
.success-device-frame { position: relative; height: 100%; background: linear-gradient(125deg,#484848,#101010 45%); padding: .8vw; border: 1px solid #555; border-radius: .85vw; }
.success-device-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.success-device--desktop { left: 36%; top: 39%; width: 29%; height: 40%; }
.success-device--desktop .success-device-frame { padding: .9vw .9vw 1.8vw; border: 2px solid #b9b9b9; }
.success-device--desktop::before { content: ""; position: absolute; top: 100%; left: 40%; width: 20%; height: 23%; background: linear-gradient(#999,#ddd); clip-path: polygon(15% 0,85% 0,100% 100%,0 100%); }
.success-device--desktop::after { content: ""; position: absolute; top: 122%; left: 36%; width: 28%; height: 4%; background: linear-gradient(#eee,#999); border-radius: 10% 10% 50% 50%; }
.success-device--desktop img { object-fit: cover; }
.success-device--laptop { left: 61%; top: 60%; width: 24%; height: 35%; }
.success-device--laptop img { object-fit: cover; }
.success-device--laptop::after { content: ""; position: absolute; top: 99%; left: -8%; width: 116%; height: 5%; border-radius: 0 0 45% 45%; background: linear-gradient(90deg,#aaa,#f3f3f3 15%,#bbb 48%,#eee 85%,#888); box-shadow: 0 .25vw .3vw #0003; }
.success-device--tablet { left: 30%; top: 62%; width: 10%; height: 34%; }
.success-device--tablet .success-device-frame { border-radius: 1vw; padding: .9vw .4vw; }
.success-device--phone { left: 21%; top: 70%; width: 6%; height: 26%; z-index: 2; }
.success-device--phone .success-device-frame { padding: 1vw .25vw; border-radius: .8vw; }
.success-device--phone-landscape { left: 13%; top: 86%; width: 10%; height: 10%; }
.success-device--phone-landscape .success-device-frame { padding: .3vw .8vw; }
.success-device--phone-landscape img { object-fit: cover; object-position: center 10%; }
.success-actions { display: flex; align-items: center; gap: 2vw; padding: 1.6vw 5.3% 2vw; background: linear-gradient(#eee,#fff); }
.success-actions p { margin: 0; font-weight: 700; font-size: clamp(15px,1.45vw,27px); line-height: 1.15; letter-spacing: -.04em; }
.success-cta, .success-customers-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0; min-height: 48px; padding: 14px 20px; border: 0; border-radius: 10px; background: var(--fc-orange); color: #252525; font-size: clamp(12px,.8vw,16px); font-weight: 700; text-decoration: none; transition: background .2s,color .2s,box-shadow .2s; }
.success-customers-button { margin-left: auto; background: var(--fc-charcoal); color: #fff; }
.success-customers-button span { font-size: 24px; line-height: 1; color: #ffab29; }
.success-cta:hover,.success-customers-button:hover { background: #242424; color: #fff; box-shadow: 0 5px 18px #0002; }
.success-cta:focus-visible,.success-customers-button:focus-visible { outline: 3px solid #222; outline-offset: 4px; }
.customers-modal .modal-content { border: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 80px #0004; }
.customers-modal .modal-header { padding: 28px 32px 22px; border-bottom: 1px solid #eee; align-items: flex-start; }
.customers-eyebrow { color: #a75f00; font-size: 12px; letter-spacing: .14em; font-weight: 700; margin: 0 0 8px; }
.customers-modal .modal-title { font-size: clamp(22px,2.4vw,34px); font-weight: 700; letter-spacing: -.04em; }
.customers-modal .modal-body { padding: 24px 32px 32px; background: #f6f6f5; }
.customers-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.customers-grid li { min-width: 0; }
.customers-grid a,.customer-unlinked { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 135px; padding: 20px 16px 12px; background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; text-decoration: none; transition: transform .2s,box-shadow .2s,border-color .2s; }
.customers-grid img { width: 100%; height: 65px; object-fit: contain; }
.customers-grid a span { font-size: 11px; font-weight: 600; color: #666; }
.customers-grid a:hover,.customers-grid a:focus-visible { transform: translateY(-4px); border-color: var(--fc-orange); box-shadow: 0 8px 22px #0001; }
.customers-grid .customer-mandel a { background: #000; border-color: #000; }
.customers-grid .customer-mandel a span { color: #eee; }
.customers-modal.show .customers-grid li { animation: customer-appear .45s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--customer-order) * 45ms); }
@keyframes customer-appear { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 1000px) {
  .success-actions { flex-wrap: wrap; }
  .success-actions p { flex: 1; }
  .success-customers-button { margin-left: auto; }
  .customers-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .success-scene { height: auto; padding: 28px 5% 0; }
  .success h2#success-title { padding: 0; font-size: clamp(28px,7.5vw,44px); text-align: left; line-height: 1; overflow-wrap: anywhere; }
  .success-copy { position: relative; left: auto; top: auto; width: 100%; margin: 24px 0 0; }
  .success-copy h3 { font-size: 23px; line-height: 1.15; margin-bottom: 12px; }
  .success-copy p { font-size: 15px; line-height: 1.5; max-width: none; }
  .success-lamps { display: none; }
  .success-devices { position: relative; width: 110%; margin-left: -5%; height: 62vw; }
  .success-device--desktop { top: 9%; left: 25%; width: 46%; height: 52%; }
  .success-device--laptop { left: 56%; top: 43%; width: 39%; height: 40%; }
  .success-device--tablet { left: 19%; top: 41%; width: 17%; height: 43%; }
  .success-device--phone { left: 6%; top: 53%; width: 11%; height: 32%; }
  .success-device--phone-landscape { display: none; }
  .success-scene::after { inset: auto 0 0; height: 18vw; }
  .success-actions { padding: 0 5% 28px; gap: 18px; }
  .success-actions p { flex-basis: 100%; order: -1; font-size: 19px; }
  .success-cta,.success-customers-button { width: 100%; margin: 0; min-height: 52px; font-size: 13px; }
  .customers-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .customers-modal .modal-header { padding: 22px 18px; }
  .customers-modal .modal-body { padding: 18px; }
  .customers-grid a,.customer-unlinked { height: 115px; padding: 14px 10px 10px; }
  .customers-grid img { height: 55px; }
}
@media (prefers-reduced-motion: reduce) {
  .customers-modal.show .customers-grid li { animation: none; }
  .customers-grid a { transition: none; }
}

/* Leuchtwerbung & Montage */
.lighting { padding: 4.9vw 0 3.6vw; background: #f3f3f2; }
.lighting-content { display: grid; grid-template-columns: 46% 39%; column-gap: 12%; width: 85%; margin: 0 auto; }
.lighting-copy { display: flex; flex-direction: column; align-items: flex-end; padding: .5vw 0 1.8vw; text-align: right; }
.lighting-copy h2 {
  margin: 0;
  color: var(--fc-orange);
  font-size: 3.14vw;
  line-height: .92;
  font-weight: 700;
  letter-spacing: -.055em;
}
.lighting-tagline { margin: .6vw 0 .4vw; font-size: 2.09vw; line-height: 1.05; font-weight: 700; letter-spacing: -.055em; }
.lighting-subtitle { margin: 0 0 .45vw; font-size: 1.25vw; line-height: 1.3; font-weight: 600; letter-spacing: -.05em; }
.lighting-description { color: var(--fc-gray); font-size: 1.04vw; line-height: 1.2; font-weight: 300; letter-spacing: -.045em; }
.lighting-description p { margin: 0 0 1.25vw; }
.lighting-description p:last-child { margin-bottom: 0; }
.lighting-artwork { display: block; width: 100%; height: auto; align-self: start; }
.lighting-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 58px;
  padding: 17px 32px;
  border: 0;
  border-radius: 10px;
  background: var(--fc-orange);
  color: #252525;
  box-shadow: 0 6px 18px rgb(242 145 0 / 24%);
  font-size: clamp(16px, 1.1vw, 20px);
  line-height: 1.2;
  font-weight: 700;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.lighting-cta:hover, .lighting-cta:focus-visible { background: var(--fc-charcoal); color: var(--fc-white); box-shadow: 0 8px 22px rgb(0 0 0 / 18%); }
.lighting-cta:focus-visible { outline: 3px solid var(--fc-charcoal); outline-offset: 4px; }
.lighting .modal-title { font-size: 22px; font-weight: 700; }
.lighting-project { margin: 0; }
.lighting-project img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.lighting-project figcaption { margin-top: 10px; font-size: 14px; font-weight: 600; }

@media (max-width: 991.98px) {
  .lighting { padding: 48px 0; }
  .lighting-content { width: 90%; grid-template-columns: 52% 43%; column-gap: 5%; align-items: center; }
  .lighting-copy { padding: 0; }
  .lighting-copy h2 { font-size: 30px; }
  .lighting-tagline { margin: 12px 0 8px; font-size: 21px; }
  .lighting-subtitle { margin-bottom: 10px; font-size: 15px; }
  .lighting-description { font-size: 14px; line-height: 1.5; letter-spacing: -.025em; }
  .lighting-description p { margin-bottom: 16px; }
  .lighting-cta { margin-top: 24px; min-height: 54px; padding: 16px 26px; font-size: 16px; }
  .lighting-artwork { align-self: center; }
}

@media (max-width: 767.98px) {
  .lighting-content { grid-template-columns: 1fr; gap: 24px; }
  .lighting-copy { align-items: center; text-align: center; }
  .lighting-copy h2 { font-size: clamp(26px, 7.5vw, 36px); }
  .lighting-tagline { font-size: 22px; }
  .lighting-artwork { width: min(100%, 480px); justify-self: center; }
  .lighting .modal-title { font-size: 19px; }
}

/* Impressum aus der bereitgestellten Vorlage. */
.legal-main { min-height: 23.97vw; padding: 11.1vw 4.7% 1.8vw; background: #e3edf5 url('assets/impressum/hintergrund.webp') center top / 100% 100% no-repeat; }
.legal-main h2 { margin: 0 0 .7vw; font-size: 2.1vw; line-height: 1; font-weight: 700; letter-spacing: -.05em; }
.legal-columns { display: grid; grid-template-columns: 17.7vw 21vw; gap: 1.9vw; font-size: .9vw; line-height: 1.18; letter-spacing: -.035em; }
.legal-columns p { margin: 0 0 1vw; }
.legal-columns address { margin: 0; font-style: normal; }
.legal-columns a:hover { text-decoration: underline; }
.legal-pending { margin: 0; padding: 0; list-style: none; }
.legal-copyright { margin: 0; padding: .8vw 16px; background: var(--fc-charcoal); color: #fff; text-align: center; font-size: .7vw; line-height: 1.5; font-weight: 300; }
.footer-brand { position: relative; display: inline-block; border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.footer-brand:focus-visible { outline: 2px solid var(--fc-orange); outline-offset: 5px; border-radius: 2px; }
.footer-brand span { display: inline-block; }
.footer-brand:hover { color: #ffd39a; }
.footer-brand.is-shimmering span {
  background: linear-gradient(110deg, #fff 35%, #ffb443 46%, #fff3d6 50%, #ffb443 54%, #fff 65%) 100% 0 / 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: footer-shimmer 1.3s ease-in-out;
}
.footer-brand::after { content: ""; position: absolute; height: 2px; bottom: -3px; left: 0; right: 0; background: var(--fc-orange); transform: scaleX(0); opacity: 0; pointer-events: none; }
.footer-brand.is-shimmering::after { animation: footer-glow-line 1.3s ease-in-out; }
@keyframes footer-shimmer {
  0% { background-position: 100% 0; filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 5px #f2910066); }
  100% { background-position: 0 0; filter: drop-shadow(0 0 0 transparent); }
}
@keyframes footer-glow-line {
  0%, 100% { transform: scaleX(0); opacity: 0; }
  45%, 65% { transform: scaleX(1); opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-brand.is-shimmering span { background: none; color: #ffb443; animation: footer-brand-feedback .5s; }
  .footer-brand.is-shimmering::after { animation: none; }
  @keyframes footer-brand-feedback { from { opacity: 1; } to { opacity: 1; } }
}
@media (max-width: 767.98px) {
  .legal-main { padding: 100px 6% 30px; background-size: auto 160px; background-position: left top; }
  .legal-main h2 { font-size: 26px; margin-bottom: 18px; }
  .legal-columns { grid-template-columns: 1fr 1fr; gap: 24px; font-size: 13px; line-height: 1.5; }
  .legal-columns p { margin-bottom: 16px; }
  .legal-copyright { padding: 12px; font-size: 10px; }
}
@media (max-width: 479.98px) {
  .legal-columns { grid-template-columns: 1fr; gap: 22px; }
}

/* Über uns */
.about { padding: 5.4vw 5% 6vw; background: #fff; }
.about h2 { margin: 0 0 3vw; color: var(--fc-orange); text-align: center; font-size: 3.14vw; line-height: 1.1; font-weight: 700; letter-spacing: -.045em; }
.about-content { display: grid; grid-template-columns: 20% 1fr; gap: 5%; width: min(100%, 1000px); margin: 0 auto; align-items: start; }
.about-profile { margin: 0; text-align: center; }
.about-profile > img { display: block; width: 100%; max-width: 218px; height: auto; border-radius: 50%; margin: 0 auto 18px; }
.about-profile p { margin: 0; }
.about-brand { font-size: clamp(16px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.05em; }
.about-brand span { color: #f15a24; }
.about-name { color: var(--fc-gray); font-size: clamp(17px, 1.6vw, 24px); font-weight: 300; line-height: 1.2; }
.about-role { color: var(--fc-gray); font-size: 12px; font-weight: 300; }
.about-copy { color: var(--fc-gray); font-size: 15px; line-height: 1.45; letter-spacing: -.035em; font-weight: 400; }
.about-copy p { margin: 0 0 20px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy .about-intro { margin-bottom: 12px; font-weight: 600; }
@media (max-width: 767.98px) {
  .about { padding: 44px 6%; }
  .about h2 { font-size: 32px; margin-bottom: 30px; }
  .about-content { grid-template-columns: 1fr; gap: 28px; }
  .about-profile > img { width: 170px; margin-bottom: 12px; }
  .about-brand, .about-name { font-size: 22px; }
  .about-copy { font-size: 15px; line-height: 1.55; }
}

/* Sechs interaktive Fachbereiche nach FinalDesigns.pdf. */
.final-services { position: relative; display: grid; grid-template-columns: 46% 44%; column-gap: 6%; min-height: 37.3vw; background: #f3f9f6; }
.final-service-diagram { position: relative; aspect-ratio: 600 / 480; align-self: center; }
.final-service-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #e5e7e5; stroke-width: 2; stroke-dasharray: 8 8; }
.final-service-center { position: absolute; left: 40%; top: 38%; width: 35%; text-align: center; }
.final-service-number, .final-service-name { margin: 0; color: var(--fc-orange); font-weight: 600; line-height: 1.05; }
.final-service-number { font-size: 2.8vw; }
.final-service-name { margin-top: .25vw; font-size: 2.2vw; letter-spacing: -.04em; }
.final-service-caption { width: 70%; margin: .7vw auto 0; color: #999; font-size: .65vw; line-height: 1.2; }
.final-hex { position: absolute; width: 17%; aspect-ratio: 1.155; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%); transition: scale .2s, filter .2s; transform-origin: 0 0; }
.final-hex > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #fff; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.final-hex img { width: 57%; height: 57%; object-fit: contain; mix-blend-mode: multiply; }
.final-hex[aria-pressed="true"] { scale: 1.48; filter: drop-shadow(5px 7px 6px #0005); z-index: 1; }
.final-hex[aria-pressed="true"] > span { background: var(--fc-orange); }
.final-hex[aria-pressed="true"] img { filter: grayscale(1) invert(1) brightness(3); mix-blend-mode: screen; }
.final-hex:focus-visible { outline: 2px solid var(--fc-charcoal); outline-offset: 5px; }
.final-hex { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .final-hex[aria-pressed="false"]:hover { scale: 1.04; filter: drop-shadow(0 2px 3px #0002); }
  .final-hex[aria-pressed="true"]:hover { scale: 1.51; }
}
.final-hex-design { left: 71.33%; top: 23.33%; }
.final-hex-print { left: 84.83%; top: 52.5%; }
.final-hex-advertising { left: 71.33%; top: 81.67%; }
.final-hex-assembly { left: 44.17%; top: 81.67%; }
.final-hex-web { left: 30.67%; top: 52.5%; }
.final-hex-marketing { left: 44.17%; top: 23.33%; }
.final-service-dots { position: absolute; left: 2.8%; top: 37%; display: flex; flex-direction: column; z-index: 2; }
.final-service-dots button { width: 1.7vw; height: 1.7vw; border: 0; padding: .35vw; background: transparent; }
.final-service-dots button::after { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--fc-charcoal); }
.final-service-dots button[aria-pressed="true"]::after { background: var(--fc-orange); }
.final-service-dots button:focus-visible { outline: 2px solid var(--fc-orange); }
.final-service-copy { padding: 4.4vw 0 4vw; }
.final-service-copy h2 { margin: 0 0 .7vw; color: var(--fc-charcoal); font-size: 3.15vw; line-height: 1; font-weight: 700; letter-spacing: -.06em; }
.final-service-copy h2 > span:first-child { color: var(--fc-orange); }
.final-service-intro { min-height: 2.6vw; margin: 0; font-size: 1.25vw; line-height: 1.25; letter-spacing: -.04em; }
.final-service-rule { width: 4.8vw; height: .4vw; margin: 1.2vw 0; background: var(--fc-orange); }
.final-service-description { margin: 0 0 1.2vw; color: #999; font-size: 1.25vw; line-height: 1.25; letter-spacing: -.04em; }
.final-service-cta { padding: .55vw .8vw; border: 0; border-radius: .4vw; background: var(--fc-charcoal); color: #fff; font-size: .65vw; font-weight: 600; cursor: default; }
@media (max-width: 767.98px) {
  .final-services { grid-template-columns: 1fr; padding: 16px 5% 36px; }
  .final-service-diagram { width: 100%; max-width: 560px; justify-self: center; }
  .final-service-dots { top: 12vw; left: 5%; }
  .final-service-dots button { width: 28px; height: 28px; padding: 8px; }
  .final-service-number { font-size: 6vw; }
  .final-service-name { font-size: 4.3vw; }
  .final-service-caption { width: 90%; font-size: 1.8vw; margin-top: 8px; }
  .final-service-copy { padding: 24px 0 0; }
  .final-service-copy h2 { font-size: clamp(26px, 6.5vw, 38px); margin-bottom: 12px; }
  .final-service-intro, .final-service-description { font-size: 16px; line-height: 1.5; }
  .final-service-rule { width: 60px; height: 4px; margin: 18px 0; }
  .final-service-description { margin-bottom: 20px; }
  .final-service-cta { padding: 12px 16px; font-size: 11px; border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) { .final-hex { transition: none; } }

/* Kontaktformular neben dem Über-uns-Text wie in der PDF. */
.about-content { width: 100%; grid-template-columns: 13% 43% 35%; gap: 4.5%; }
.about-copy { font-size: 1.04vw; line-height: 1.2; }
.about-copy p { margin-bottom: 1.4vw; }
.about-copy .about-intro { margin-bottom: .8vw; }
.contact-form { padding: 1vw .7vw .8vw; border-radius: 2.3vw; background: var(--fc-light); scroll-margin-top: 24px; }
.contact-form h3 { margin: 0; padding: 0 .5vw; color: var(--fc-orange); font-size: 2.1vw; line-height: 1.05; font-weight: 700; letter-spacing: -.04em; }
.contact-form-intro { margin: 0 0 .6vw; padding: 0 .5vw; color: var(--fc-gray); font-size: .86vw; line-height: 1.2; letter-spacing: -.04em; }
.contact-form > input, .contact-form > textarea { display: block; width: 100%; margin-bottom: .9vw; padding: 1vw .8vw; border: 0; border-radius: 0; background: #fff; color: var(--fc-charcoal); font: inherit; font-size: .85vw; }
.contact-form > input { height: 2.85vw; }
.contact-form > textarea { min-height: 8vw; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--fc-charcoal); opacity: 1; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--fc-orange); outline-offset: 2px; }
.contact-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: .3vw .6vw 0; font-size: .8vw; font-weight: 600; }
.contact-confirm { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.contact-confirm input { width: 13px; height: 13px; margin: 0; accent-color: var(--fc-orange); }
.contact-form-footer button { min-width: 8.4vw; padding: .45vw 1vw; border: 0; background: var(--fc-orange); color: #fff; font: inherit; }
.contact-form-footer button:hover { background: #d98000; }
.contact-form-status { margin: 14px 6px 0; font-size: 13px; line-height: 1.5; }
.contact-form-status a { text-decoration: underline; }
.success-cta, .final-service-cta { cursor: pointer; }
@media (max-width: 991.98px) {
  .about-content { grid-template-columns: 22% 1fr; gap: 30px; }
  .about-copy { font-size: 15px; line-height: 1.45; }
  .about-copy p { margin-bottom: 20px; }
  .contact-form { grid-column: 2; padding: 18px 12px 16px; border-radius: 26px; }
  .contact-form h3 { font-size: 28px; padding: 0 5px; }
  .contact-form-intro { font-size: 12px; margin: 3px 5px 12px; }
  .contact-form > input, .contact-form > textarea { font-size: 14px; padding: 12px; margin-bottom: 12px; }
  .contact-form > input { height: 44px; }
  .contact-form > textarea { min-height: 130px; }
  .contact-form-footer { font-size: 11px; flex-wrap: wrap; }
  .contact-form-footer button { min-width: 90px; min-height: 36px; padding: 8px 16px; }
}
@media (max-width: 767.98px) {
  .about-content { grid-template-columns: 1fr; }
  .contact-form { grid-column: 1; }
}

/* Webbanner-Carousel */
.corporate-slide-image { display: block; width: 100%; height: auto; aspect-ratio: 1915 / 463; object-fit: contain; }
.corporate-image-caption {
  position: absolute;
  left: 5.7%;
  top: 48%;
  width: 43%;
  margin: 0;
  color: var(--fc-charcoal);
  font-size: clamp(10px, 1.6vw, 32px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
.corporate-captioned--webdesign .corporate-image-caption { left: 4.4%; }
.corporate-captioned--textildruck .corporate-image-caption { top: 53%; }
.corporate-captioned--briefbogen-stempel .corporate-image-caption { top: 68%; width: 52%; }
.corporate-captioned--foto-video .corporate-image-caption { left: auto; right: 7.5%; top: 66%; width: 46%; text-align: right; }
.corporate-captioned--folien .corporate-image-caption { left: 5%; top: 5%; width: 90%; text-align: center; }
#corporate-carousel .corporate-carousel-dots { position: static; flex-wrap: wrap; gap: 8px; margin: 1.45vw 40px 0; }
#corporate-carousel .corporate-carousel-dots button { width: 12px; height: 12px; margin: 0; border: 0; border-radius: 50%; background: var(--fc-charcoal); opacity: 1; }
#corporate-carousel .corporate-carousel-dots button.active { background: var(--fc-orange); }
.corporate-nav { position: absolute; top: 12.09vw; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: clamp(30px, 3.5vw, 48px); height: clamp(36px, 4vw, 54px); padding: 0 0 4px; border: 0; border-radius: 6px; background: #3c3c3bb3; color: #fff; font-size: clamp(30px, 3vw, 42px); line-height: 1; transition: background .2s; }
.corporate-nav-prev { left: 8px; }
.corporate-nav-next { right: 8px; }
.corporate-nav:hover { background: var(--fc-orange); }
@media (max-width: 767.98px) {
  #corporate-carousel .corporate-banner { display: block; padding: 0; }
  #corporate-carousel .corporate-copy { position: absolute; top: 14.2%; left: 4.4%; width: auto; padding: 0; }
  #corporate-carousel .corporate-copy h2 { font-size: 2.65vw; }
  #corporate-carousel .corporate-copy p { margin-top: .6vw; font-size: 1.45vw; }
  #corporate-carousel .corporate-number { position: absolute; margin: 0; font-size: 8vw; }
  #corporate-carousel .corporate-cta { position: absolute; min-height: 0; padding: .5vw .7vw; border-radius: .5vw; font-size: .7vw; }
  #corporate-carousel .corporate-hexagon { font-size: 1.45vw; }
}

/* Die Scrollleiste des Browserfensters in den Markenfarben. */
html { scrollbar-color: #f29100 #3c3c3b; scrollbar-width: auto; }
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-color: auto; }
  html::-webkit-scrollbar { width: 18px; height: 18px; }
  html::-webkit-scrollbar-track { background: #3c3c3b; }
  html::-webkit-scrollbar-thumb { background: #f29100; border: 4px solid #3c3c3b; border-radius: 12px; min-height: 48px; }
  html::-webkit-scrollbar-thumb:hover { background: #ffac29; }
  html::-webkit-scrollbar-thumb:active { background: #df8100; }
  html::-webkit-scrollbar-corner { background: #3c3c3b; }
}
@media (forced-colors: active) { html { scrollbar-color: auto; } }

/* Direkte Mausbewegung; nur das Einrasten wird animiert. */
.products-carousel .carousel-inner { transform: none; transition: none; overflow: hidden; }
.products-drag-rail { display: flex; width: 100%; will-change: transform; }
.product-drag-page { flex: 0 0 100%; min-width: 0; }
.hero-carousel .carousel-inner { transition: transform .65s cubic-bezier(.22,.61,.36,1); }
.hero-carousel.is-dragging .carousel-inner { transition: none; }
@media (prefers-reduced-motion: reduce) { .hero-carousel .carousel-inner { transition: none; } }

.hero-direct-drag .carousel-inner { transform: none; transition: none; }
.hero-direct-drag .carousel-item { transition: none; }
.hero-direct-drag.is-dragging .carousel-item { animation: none; }
.products-carousel.is-dragging .products-drag-rail { transition: none !important; }

#corporate-carousel .carousel-inner { touch-action: pan-y; cursor: grab; user-select: none; }
#corporate-carousel.is-dragging .carousel-inner { cursor: grabbing; }
.corporate-drag-rail { display: flex; width: 100%; align-items: flex-start; will-change: transform; }
.corporate-drag-page { position: relative; flex: 0 0 100%; min-width: 0; }
#corporate-carousel.is-dragging .corporate-drag-rail { transition: none !important; }
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }