.home,
.home-child {
  position: relative;
  overflow: hidden;
}
.home {
  width: 100%;
  background-color: var(--color-gray-100);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  isolation: isolate;
  gap: 3.437rem;
  line-height: normal;
  letter-spacing: normal;
}
.home-child {
  align-self: stretch;
  max-width: 100%;
  max-height: 100%;
  z-index: 2;
  flex-shrink: 0;
}
.guessing,
.unused-list {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.unused-list {
  align-self: stretch;
  justify-content: flex-end;
  padding: var(--padding-0) 3.937rem 5.087rem 4.25rem;
  box-sizing: border-box;
  flex-shrink: 0;
}
.guessing {
  flex: 1;
  justify-content: space-between;
  gap: var(--gap-20);
}
.guessing-child {
  height: 4.725rem;
  width: 4.725rem;
  position: relative;
  object-fit: contain;
  flex-shrink: 0;
  z-index: 2;
}
.frame-child,
.rectangle-parent {
  width: 4.725rem;
  border-radius: var(--br-50);
  background-color: var(--color-white);
  flex-shrink: 0;
}
.rectangle-parent {
  display: flex;
  align-items: flex-start;
  padding: 1.631rem var(--padding-20) 1.718rem;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 4;
}
.frame-child {
  height: 4.725rem;
  position: relative;
  display: none;
}
.iconnavigationarrow-downward {
  cursor: pointer;
  border: 0;
  padding: var(--padding-01);
  background-color: transparent;
  height: var(--height-22);
  width: 2.063rem;
  position: relative;
  object-fit: contain;
  z-index: 1;
  flex-shrink: 0;
}
.frame-parent,
.home-inner {
  display: flex;
  max-width: 100%;
}
.home-inner {
  width: 118.875rem;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20) 9.062rem;
  box-sizing: border-box;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-22);
  color: var(--color-white);
  font-family: var(--font-figtree);
}
.frame-parent {
  width: 92.594rem;
  flex-direction: column;
  align-items: flex-end;
  gap: 3.875rem;
}
.frame-wrapper {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) 1.062rem var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
}
.frame-group {
  flex: 1;
  flex-direction: column;
  gap: var(--gap-24);
}
.frame-container,
.frame-group,
.jahr-2024-parent {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.frame-container {
  width: 44rem;
  padding: var(--padding-0) var(--padding-40);
  box-sizing: border-box;
}
.jahr-2024-parent {
  flex: 1;
  gap: 0.562rem;
}
.jahr-2024 {
  width: 8.313rem;
  position: relative;
  line-height: var(--lh-22);
  text-transform: capitalize;
  display: inline-block;
  flex-shrink: 0;
  z-index: 2;
}
.jahr {
  margin-block-start: 0;
  margin-block-end: 6px;
  font-weight: 900;
}
.p {
  margin: 0;
  font-weight: 300;
}
.projekt-privathaus-mhlbach-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.062rem var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  min-width: 19.563rem;
  max-width: 100%;
}
.projekt-privathaus-mhlbach-container {
  align-self: stretch;
  position: relative;
  line-height: var(--lh-22);
  text-transform: capitalize;
  z-index: 2;
}
.solarzaun {
  margin: 0;
  align-self: stretch;
  height: 19.188rem;
  position: relative;
  font-size: 15rem;
  text-transform: uppercase;
  font-weight: 800;
  font-family: var(--font-din-2014);
  display: inline-block;
  flex-shrink: 0;
  z-index: 4;
}
.content {
  width: 91.375rem;
  height: var(--height-720);
  display: flex;
  align-items: flex-end;
  padding: var(--padding-0) 8.281rem 7.187rem;
  box-sizing: border-box;
  gap: var(--gap-100);
}
.frame-section,
.tagline-parent {
  width: var(--width-667);
  flex-direction: column;
}
.frame-section {
  height: 29.063rem;
  display: flex;
  align-items: flex-start;
  gap: 3.187rem;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-18);
  color: var(--color-deepskyblue);
  font-family: var(--font-figtree);
}
.tagline-parent {
  height: 24.5rem;
  gap: 1.687rem;
}
.line-wrapper,
.tagline,
.tagline-parent {
  display: flex;
  align-items: flex-start;
}
.tagline {
  width: 23.188rem;
  height: var(--height-22);
  gap: var(--gap-24);
}
.line-wrapper {
  height: var(--height-12);
  width: var(--width-72);
  flex-direction: column;
  padding: var(--padding-10) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  z-index: 2;
  flex-shrink: 0;
}
.line,
.produktportfolio {
  position: relative;
  flex-shrink: 0;
}
.line {
  width: var(--width-72);
  height: var(--height-2);
  background-color: var(--color-deepskyblue);
}
.produktportfolio {
  height: var(--height-22);
  width: 17.563rem;
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  display: inline-block;
  z-index: 1;
}
.product-info-parent {
  width: var(--width-667);
  height: 21.438rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-19);
  font-size: 15rem;
  color: var(--color-gray-400);
  font-family: var(--font-din-2014);
}
.product-info {
  width: var(--width-653);
  height: 10.25rem;
  display: flex;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
}
.equipment {
  margin: 0 !important;
  height: 15rem;
  width: 16.813rem;
  position: absolute;
  top: -9.437rem;
  left: -8.281rem;
  font-size: inherit;
  line-height: 15rem;
  font-weight: 800;
  font-family: inherit;
  display: inline-block;
  z-index: 0;
  flex-shrink: 0;
}
.balkone-tore-gelnder,
.dh-metall-bietet {
  position: relative;
  color: var(--color-white);
  display: inline-block;
}
.balkone-tore-gelnder {
  margin: 0;
  height: 10.25rem;
  width: var(--width-653);
  font-size: var(--fs-64);
  font-weight: 800;
  font-family: inherit;
  z-index: 1;
  flex-shrink: 0;
}
.dh-metall-bietet {
  width: var(--width-667);
  height: 10rem;
  font-size: var(--fs-18);
  line-height: var(--lh-32);
  font-family: var(--font-figtree);
}
.call-to-action,
.call-to-action-wrapper {
  height: var(--height-22);
  display: flex;
  align-items: flex-start;
}
.call-to-action-wrapper {
  width: 16.063rem;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-40);
  box-sizing: border-box;
}
.call-to-action {
  width: 13.563rem;
  position: relative;
  isolation: isolate;
}
.overlay-rect {
  cursor: pointer;
  border: var(--border-1);
  padding: var(--padding-01);
  background-color: var(--color-gainsboro-300);
  height: var(--height-56);
  width: 19rem;
  position: absolute;
  margin: 0 !important;
  top: calc(50% - 28px);
  left: -2.75rem;
  border-radius: var(--br-50);
  box-sizing: border-box;
  z-index: 0;
  flex-shrink: 0;
}
.equipment2,
.more {
  height: var(--height-22);
}
.more {
  width: 13.563rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  z-index: 1;
  flex-shrink: 0;
}
.equipment2 {
  width: 11.188rem;
  position: relative;
  display: inline-block;
}
.button-icon {
  height: var(--height-19);
  width: var(--width-24);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-3) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.iconnavigationarrow-downward2 {
  width: var(--width-24);
  height: var(--height-16);
  position: relative;
  object-fit: contain;
}
.adobestock-1707481416-1-icon {
  margin-bottom: -7.375rem;
  width: 35.188rem;
  position: relative;
  border-radius: var(--br-50);
  max-height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
.background-rect,
.img-20230810-wa0007-1-parent {
  width: 100%;
  margin: 0 !important;
  position: absolute;
  left: 0;
  flex-shrink: 0;
}
.background-rect {
  height: 58.688rem;
  top: 0;
  right: 0;
  background-color: var(--color-gainsboro-200);
}
.img-20230810-wa0007-1-parent {
  top: -22.5rem;
  display: flex;
  align-items: flex-start;
  isolation: isolate;
  max-width: 100%;
}
.img-20230810-wa0007-1-icon {
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}
.frame-header {
  width: auto !important;
  margin: 0 auto !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 120rem;
  padding: 1rem 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-20);
  text-align: right;
  font-size: 1rem;
  color: var(--color-white);
  font-family: var(--font-figtree);
  background: rgba(14, 23, 41, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1030;
  isolation: isolate;
  box-sizing: border-box;
}
.image-1-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) 0.125rem;
}
.image-1-icon {
  align-self: stretch;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 3;
}
.menu-elements {
  width: 8.563rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.men {
  flex: 1;
  position: relative;
  line-height: var(--lh-22);
  text-transform: uppercase;
  cursor: pointer;
  z-index: 3;
}
.menu-elements-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5rem var(--padding-0) var(--padding-0);
}
.line-parent {
  width: 1.938rem;
  height: 0.5rem;
  position: relative;
  cursor: pointer;
  z-index: 3;
}
.frame-inner,
.frame-item {
  position: absolute;
  left: 0;
  border-top: 2px solid var(--color-white);
  box-sizing: border-box;
  width: 2.063rem;
  height: var(--height-2);
}
.frame-item {
  top: 0;
}
.frame-inner {
  top: 0.5rem;
}
.content-wrapper {
  width: 117.656rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20) 9.062rem;
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
}
.content2 {
  height: var(--height-720);
  width: 91.375rem;
  display: flex;
  align-items: flex-end;
  position: relative;
  isolation: isolate;
  gap: 16.531rem;
}
.side-rect-icon,
.side-rect-parent {
  height: var(--height-720);
  width: 35.375rem;
  z-index: 0;
}
.side-rect-parent {
  margin: 0 !important;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  isolation: isolate;
}
.side-rect-icon {
  position: relative;
  border-radius: var(--br-50);
  object-fit: cover;
}
.frame-div {
  height: 6.181rem;
  width: 13.063rem;
  margin: 0 !important;
  position: absolute;
  bottom: 3.506rem;
  left: 3.594rem;
  display: flex;
  align-items: flex-start;
  gap: 1.318rem;
  z-index: 1;
}
.group-icon {
  height: 6.181rem;
  width: 6.181rem;
  position: relative;
  flex-shrink: 0;
}
.image-placeholder {
  height: 5.744rem;
  width: 5.563rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.181rem var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.din-1-icon,
.side-rect-two {
  position: relative;
  flex-shrink: 0;
}
.din-1-icon {
  width: 5.563rem;
  height: 5.563rem;
}
.side-rect-two {
  height: var(--height-720);
  width: 35.375rem;
  border-radius: var(--br-50);
  z-index: 1;
}
.company-info {
  height: 37.5rem;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) 6.75rem;
  box-sizing: border-box;
  z-index: 2;
  text-align: left;
  font-size: var(--fs-18);
  color: var(--color-deepskyblue);
  font-family: var(--font-figtree);
}
.company-info,
.info-container,
.tagline-group {
  width: var(--width-632);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.info-container {
  height: 30.75rem;
  gap: 4.437rem;
  flex-shrink: 0;
}
.tagline-group {
  height: 24.938rem;
  gap: 1.687rem;
}
.das-ist-dh,
.tagline2 {
  height: var(--height-22);
}
.tagline2 {
  width: 22.625rem;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-24);
  z-index: 2;
}
.das-ist-dh {
  width: 17rem;
  position: relative;
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.equipment-parent {
  width: var(--width-632);
  height: 10.188rem;
  display: flex;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
  z-index: 3;
  font-size: 15rem;
  color: var(--color-gray-400);
  font-family: var(--font-din-2014);
}
.equipment3 {
  margin: 0 !important;
  height: 15rem;
  width: 16.813rem;
  position: absolute;
  top: -8.187rem;
  left: -9.406rem;
  font-size: inherit;
  line-height: 15rem;
  font-weight: 800;
  font-family: inherit;
  display: inline-block;
  z-index: 0;
  flex-shrink: 0;
}
.in-unserem-meisterbetrieb,
.schlosserei-von-meisterhand {
  width: var(--width-632);
  position: relative;
  color: var(--color-white);
  display: inline-block;
  z-index: 1;
}
.schlosserei-von-meisterhand {
  margin: 0;
  height: 10.188rem;
  font-size: var(--fs-64);
  font-weight: 800;
  font-family: inherit;
  flex-shrink: 0;
}
.in-unserem-meisterbetrieb {
  height: 10rem;
  line-height: var(--lh-32);
}
.button-area,
.button-area-wrapper {
  height: var(--height-22);
  display: flex;
  align-items: flex-start;
}
.button-area-wrapper {
  width: 17.438rem;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) 2.625rem;
  box-sizing: border-box;
}
.button-area {
  width: 14.813rem;
  gap: 0.562rem;
}
.equipment-group,
.equipment4 {
  height: var(--height-22);
  width: 12.75rem;
  position: relative;
}
.equipment-group {
  display: flex;
  align-items: flex-start;
  isolation: isolate;
}
.equipment4 {
  display: inline-block;
  z-index: 0;
  flex-shrink: 0;
}
.content-child,
.rectangle-button {
  position: absolute;
  margin: 0 !important;
  border-radius: var(--br-50);
}
.rectangle-button {
  cursor: pointer;
  border: var(--border-1);
  padding: var(--padding-01);
  background-color: var(--color-gainsboro-300);
  height: var(--height-56);
  width: 19.688rem;
  top: calc(50% - 28px);
  right: -4.312rem;
  box-sizing: border-box;
  z-index: 1;
  flex-shrink: 0;
}
.content-child {
  height: 100%;
  width: 35.375rem;
  top: 0;
  bottom: 0;
  left: 0.031rem;
  max-height: 100%;
  z-index: 3;
}
.home-item,
.rectangle-icon {
  width: 80.438rem;
  height: 42.563rem;
  position: absolute;
  margin: 0 !important;
  top: 40.688rem;
  right: -23.75rem;
  z-index: 2;
  flex-shrink: 0;
}
.rectangle-icon {
  width: 56rem;
  height: 29.875rem;
  top: 37.625rem;
  right: -16.937rem;
  z-index: 3;
}
.content-container {
  width: 118.906rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-0) 4.75rem var(--padding-20);
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-parent2,
.title-container-parent {
  width: var(--width-667);
  flex-direction: column;
}
.frame-parent2 {
  height: 29.063rem;
  display: flex;
  align-items: flex-start;
  gap: 5.187rem;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-18);
  color: var(--color-deepskyblue);
  font-family: var(--font-figtree);
}
.title-container-parent {
  height: 22.5rem;
  gap: var(--gap-19);
}
.tagline3,
.title-container,
.title-container-parent {
  display: flex;
  align-items: flex-start;
}
.title-container {
  width: var(--width-653);
  height: 13.313rem;
  flex-direction: column;
  gap: 1.687rem;
}
.tagline3 {
  width: 21.313rem;
  height: var(--height-22);
  gap: var(--gap-24);
}
.where-you-go {
  height: var(--height-22);
  width: 15.688rem;
  position: relative;
  letter-spacing: var(--ls-6);
  text-transform: uppercase;
  display: inline-block;
  flex-shrink: 0;
  z-index: 1;
}
.info-detail {
  width: var(--width-653);
  height: 10.25rem;
  display: flex;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
  font-size: 15rem;
  color: var(--color-gray-400);
  font-family: var(--font-din-2014);
}
.to-start-print {
  width: var(--width-667);
  height: 8rem;
  position: relative;
  line-height: var(--lh-32);
  color: var(--color-white);
  display: inline-block;
}
.equipment6,
.more2 {
  height: var(--height-22);
}
.more2 {
  width: 13.563rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  z-index: 1;
  flex-shrink: 0;
}
.equipment6 {
  width: 11.563rem;
  position: relative;
  display: inline-block;
}
.frame-main {
  align-self: stretch;
  height: 159.25rem;
  position: relative;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-18);
  color: var(--color-darkslateblue);
  font-family: var(--font-figtree);
}
.rectangle-group {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-white);
  width: 100%;
  height: 80.25rem;
}
.gut-zu-wissen,
.rectangle-div {
  position: absolute;
  flex-shrink: 0;
}
.rectangle-div {
  top: 0;
  left: 0;
  background-color: var(--color-white);
  width: 100%;
  height: 100%;
  display: none;
}
.gut-zu-wissen {
  margin: 0;
  top: 6.75rem;
  left: 7.813rem;
  font-size: var(--fs-100);
  text-transform: uppercase;
  font-weight: 800;
  font-family: var(--font-din-2014);
  display: flex;
  align-items: center;
  width: 91.5rem;
  height: 12rem;
  z-index: 1;
}
.bei-der-planung-container {
  position: absolute;
  top: 18.688rem;
  left: 8.125rem;
  line-height: var(--lh-32);
  display: inline-block;
  width: var(--width-667);
  z-index: 2;
  flex-shrink: 0;
}
.component-1 {
  position: absolute;
  top: 40.438rem;
  left: 7rem;
  border-radius: var(--br-5);
  width: 45.688rem;
  height: 24.188rem;
  overflow: hidden;
  z-index: 1;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-18);
  color: var(--color-darkslateblue);
  font-family: var(--font-figtree);
}
.eigenschaft-1standard {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 43.188rem;
  height: var(--height-72);
}
.eigenschaft-1standard-inner,
.frame-child2 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.frame-child2 {
  border-radius: var(--br-15);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-300);
  box-sizing: border-box;
}
.welche-zaunarten-gibt {
  position: absolute;
  width: 96.53%;
  top: 27.78%;
  left: 3.47%;
  line-height: var(--lh-32);
  display: flex;
  align-items: center;
  z-index: 1;
}
.eigenschaft-1standard-child {
  cursor: pointer;
  border: 0;
  padding: var(--padding-01);
  background-color: transparent;
  position: absolute;
  height: 34.72%;
  width: 3.62%;
  top: 31.94%;
  right: 4.49%;
  bottom: 33.33%;
  left: 91.9%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 1;
}
.eigenschaft-1variante2,
.eigenschaft-1variante3,
.eigenschaft-1variante4 {
  position: absolute;
  top: 7rem;
  left: 1.25rem;
  width: 43.188rem;
  height: var(--height-72);
}
.eigenschaft-1variante3,
.eigenschaft-1variante4 {
  top: 12.75rem;
}
.eigenschaft-1variante4 {
  top: 18.5rem;
}
.gelnder-balkone,
.tore {
  top: 35.25rem;
  line-height: var(--lh-32);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  height: var(--height-48);
  z-index: 1;
}
.tore {
  position: absolute;
  left: 19.5rem;
  width: 5.438rem;
  flex-shrink: 0;
}
.gelnder-balkone {
  left: 25.813rem;
  width: 17.625rem;
}
.fence-area,
.gelnder-balkone,
.solarzaun2 {
  position: absolute;
  flex-shrink: 0;
}
.solarzaun2 {
  top: 35.25rem;
  left: 41.813rem;
  line-height: var(--lh-32);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  width: 17.625rem;
  height: var(--height-48);
  z-index: 2;
}
.fence-area {
  top: 34.875rem;
  left: 8.125rem;
  width: 17.125rem;
  height: 3.375rem;
}
.background-area {
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 7px 7px 0 0;
  background-color: var(--color-gray-200);
  width: 8rem;
  z-index: 1;
}
.background-area,
.line-div,
.zune {
  position: absolute;
}
.zune {
  top: 0.375rem;
  left: 2.063rem;
  line-height: var(--lh-32);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  width: 15.063rem;
  height: var(--height-48);
  z-index: 2;
}
.line-div {
  top: 38.25rem;
  left: 8.125rem;
  border-top: 1px solid var(--color-gainsboro-100);
  box-sizing: border-box;
  width: 43.375rem;
  height: 0.063rem;
  z-index: 3;
  flex-shrink: 0;
}
.fence-background-parent {
  position: absolute;
  top: -0.125rem;
  left: 55.063rem;
  width: 64.938rem;
  height: 80.375rem;
  flex-shrink: 0;
}
.fence-background-icon {
  position: absolute;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 5rem;
  max-height: 100%;
  width: 59.938rem;
  object-fit: cover;
  z-index: 2;
}
.ellipse-parent {
  position: absolute;
  top: 7.188rem;
  left: 0;
  width: 10.5rem;
  height: 10.5rem;
}
.ellipse-div {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: var(--color-deepskyblue);
  width: 100%;
  height: 100%;
  z-index: 3;
}
.frame-child6 {
  position: absolute;
  top: 2.938rem;
  left: 2.75rem;
  width: 4.625rem;
  height: 4.625rem;
  z-index: 4;
}
.download-link {
  cursor: pointer;
  border: var(--border-1);
  padding: var(--padding-01);
  background-color: var(--color-gainsboro-300);
  position: absolute;
  top: 68.063rem;
  left: 8.125rem;
  border-radius: var(--br-50);
  box-sizing: border-box;
  width: 19.688rem;
  height: var(--height-56);
  white-space: nowrap;
  z-index: 1;
  flex-shrink: 0;
}
.download-link-child,
.download-link:hover,
.link-button:hover {
  background-color: var(--color-silver);
  border: 1px solid var(--color-steelblue);
  box-sizing: border-box;
}
.download-link-child {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--br-50);
  background-color: var(--color-gainsboro-300);
  border: var(--border-1);
  width: 100%;
  height: 100%;
  display: none;
}
.equipment7 {
  position: absolute;
  top: 1.063rem;
  left: 2.75rem;
  font-size: var(--fs-18);
  font-family: var(--font-figtree);
  color: var(--color-deepskyblue);
  text-align: left;
  z-index: 2;
}
.iconnavigationarrow-downward5 {
  position: absolute;
  top: 1.25rem;
  left: 16.063rem;
  width: var(--width-24);
  height: var(--height-16);
  object-fit: contain;
  z-index: 2;
}
.frame-child7,
.rectangle-parent5 {
  position: absolute;
  left: 0;
  background-color: var(--color-white);
  width: 100%;
}
.rectangle-parent5 {
  top: 80.125rem;
  height: 76.438rem;
  z-index: 1;
  font-size: var(--fs-100);
  font-family: var(--font-din-2014);
}
.frame-child7 {
  top: 0;
  height: 100%;
  display: none;
}
.solar-area,
.solar-background-icon {
  position: absolute;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  width: 65.25rem;
}
.solar-background-icon {
  max-height: 100%;
  width: 60.063rem;
  object-fit: cover;
  z-index: 3;
}
.solar-decorative {
  position: absolute;
  top: 9.938rem;
  left: 54.75rem;
  width: 10.5rem;
  height: 10.5rem;
}
.solar-decorative-child {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: var(--color-deepskyblue);
  width: 100%;
  height: 100%;
  z-index: 4;
}
.solar-decorative-item {
  position: absolute;
  top: 2.688rem;
  left: 2.688rem;
  width: 5.125rem;
  height: 5.125rem;
  z-index: 5;
}
.solarzaun3 {
  margin: 0;
  position: absolute;
  top: 9.813rem;
  left: 68.313rem;
  font-size: inherit;
  text-transform: uppercase;
  font-weight: 800;
  font-family: inherit;
  display: flex;
  align-items: center;
  z-index: 2;
}
.nicht-nur-grundstcksbegrenzun-container {
  position: absolute;
  top: 21.813rem;
  left: 68.438rem;
  line-height: var(--lh-32);
  display: inline-block;
  width: var(--width-667);
  z-index: 2;
  font-size: var(--fs-18);
  font-family: var(--font-figtree);
}
.nicht-nur-grundstcksbegrenzun {
  font-family: var(--font-figtree);
}
.anstatt-nur-als {
  font-size: var(--fs-24);
}
.eigenschaft-1standard-parent {
  position: absolute;
  top: 41.938rem;
  left: 67.188rem;
  border-radius: var(--br-5);
  width: 41.938rem;
  height: 15.75rem;
  overflow: hidden;
  z-index: 2;
  text-align: left;
  font-size: var(--fs-18);
  color: var(--color-darkslateblue);
  font-family: var(--font-figtree);
}
.eigenschaft-1standard2 {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 25rem;
  height: 2.375rem;
}
.check-mark-1-icon {
  position: absolute;
  width: 6.25%;
  top: calc(50% - 13px);
  right: 93.75%;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  height: 1.563rem;
  flex-shrink: 0;
}
.design-trifft-nutzen-container {
  position: absolute;
  top: 0;
  left: 9.25%;
  line-height: var(--lh-32);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.design-trifft-nutzen-container2 {
  width: 100%;
}
.sichtschutz-und-energieversorg {
  font-weight: 300;
}
.eigenschaft-1variante22,
.eigenschaft-1variante32,
.eigenschaft-1variante42 {
  position: absolute;
  top: 4.875rem;
  left: 1.25rem;
  width: 25rem;
  height: 2.375rem;
}
.eigenschaft-1variante32,
.eigenschaft-1variante42 {
  top: 8.5rem;
}
.eigenschaft-1variante42 {
  top: 12.125rem;
}
.link-button {
  cursor: pointer;
  border: var(--border-1);
  padding: var(--padding-01);
  background-color: var(--color-gainsboro-300);
  position: absolute;
  top: 60.875rem;
  left: 68.313rem;
  border-radius: var(--br-50);
  box-sizing: border-box;
  width: 19.688rem;
  height: var(--height-56);
  white-space: nowrap;
  z-index: 2;
}
.equipment8 {
  position: absolute;
  top: 1.063rem;
  left: 2.75rem;
  font-size: var(--fs-18);
  font-family: var(--font-figtree);
  color: var(--color-deepskyblue);
  text-align: left;
  z-index: 3;
}
.iconnavigationarrow-downward6 {
  position: absolute;
  top: 1.25rem;
  left: 16.063rem;
  width: var(--width-24);
  height: var(--height-16);
  object-fit: contain;
  z-index: 3;
}
.inner-content-parent {
  align-self: stretch;
  flex-direction: column;
  gap: 5.125rem;
  flex-shrink: 0;
}
.image-3-parent,
.inner-content,
.inner-content-parent {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.inner-content {
  align-self: stretch;
  justify-content: center;
  padding: var(--padding-0) 1.312rem var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-deepskyblue);
  font-family: var(--font-figtree);
}
.image-3-parent {
  width: 91.313rem;
  position: relative;
  isolation: isolate;
}
.image-3-icon {
  width: 11.813rem;
  position: absolute;
  margin: 0 !important;
  top: -1.25rem;
  left: 0;
  max-height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
.dh-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-24);
  max-width: 100%;
  flex-shrink: 0;
}
.product-metadata {
  width: 26.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
}
.produkte {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: var(--lh-32);
  font-weight: 700;
  font-family: inherit;
}
.navigation-content {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) 0.875rem var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
  font-size: var(--fs-18);
  color: var(--color-white);
}
.inner-navigation-parent {
  flex: 1;
  flex-direction: column;
  gap: var(--gap-15);
}
.inner-navigation,
.inner-navigation-parent,
.navigation-info {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}
.inner-navigation {
  align-self: stretch;
  justify-content: space-between;
  gap: var(--gap-20);
}
.navigation-info {
  width: 21.813rem;
  flex-direction: column;
  padding: 0.687rem var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.urreiting-89-5600-container {
  align-self: stretch;
  position: relative;
}
.span {
  line-height: false;
}
.t {
  line-height: var(--lh-32);
}
.m,
.span3 {
  font-family: var(--font-figtree);
}
.span3 {
  font-weight: 300;
}
.m {
  white-space: pre-wrap;
}
.balkone-parent,
.link-container {
  display: flex;
  align-items: flex-start;
}
.link-container {
  gap: 9.437rem;
  max-width: 100%;
}
.balkone-parent {
  flex-direction: column;
  gap: var(--gap-16);
}
.balkone,
.tore2 {
  position: relative;
  line-height: var(--lh-32);
}
.tore2 {
  font-weight: 500;
}
.ber-uns-parent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-16);
  min-width: 7.5rem;
}
.visual-elements {
  width: 86.375rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-20);
  max-width: 100%;
}
.inner-graphics {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) 0.443rem;
}
.din-layout {
  display: flex;
  align-items: flex-end;
  gap: 0.756rem;
}
.din-layout-child {
  height: 3.681rem;
  width: 3.681rem;
  position: relative;
  flex-shrink: 0;
}
.document-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) 0.181rem;
}
.din-1-icon2 {
  width: 3.313rem;
  height: 3.313rem;
  position: relative;
  flex-shrink: 0;
}
.action-buttons {
  display: flex;
  align-items: flex-start;
  gap: 9.125rem;
  max-width: 100%;
}
.frame-child8,
.rectangle-parent6 {
  background-color: var(--color-white);
  max-width: 100%;
}
.rectangle-parent6 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.875rem 14.375rem 1.812rem 14.437rem;
  box-sizing: border-box;
  gap: var(--gap-20);
  text-align: right;
  font-size: 0.875rem;
  color: var(--color-darkslateblue);
  font-family: var(--font-figtree);
}
.frame-child8 {
  height: 7.813rem;
  width: 120rem;
  position: relative;
  display: none;
  flex-shrink: 0;
}
.inner-images {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2.562rem;
  max-width: 100%;
  flex-shrink: 0;
}
.image-5-icon {
  width: 9.375rem;
  position: relative;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}
.right-image {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.062rem var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  min-width: 6.438rem;
}
.image-4-icon {
  align-self: stretch;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
}
.alle-rechte-vorbehalten-made-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.062rem var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  max-width: 100%;
  flex-shrink: 0;
}
.alle-rechte-vorbehalten-container {
  position: relative;
  line-height: var(--lh-32);
  z-index: 1;
}
.span4 {
  font-weight: 500;
}
@media screen and (max-width: 1225px) {
  .home-inner {
    padding-bottom: 5.875rem;
    box-sizing: border-box;
  }
  .rectangle-parent6 {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media screen and (max-width: 1050px) {
  .unused-list {
    padding-left: 2.125rem;
    padding-right: 1.938rem;
    box-sizing: border-box;
  }
  .content-container,
  .content-wrapper {
    padding-bottom: 5.875rem;
    box-sizing: border-box;
  }
  .content-container {
    padding-bottom: 3.063rem;
  }
  .inner-content-parent {
    gap: 2.563rem;
  }
  .inner-navigation {
    flex-wrap: wrap;
  }
  .rectangle-parent6 {
    padding-left: 7.188rem;
    padding-right: 7.188rem;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 750px) {
  .home {
    gap: 1.688rem;
  }
  .home-inner {
    padding-bottom: 3.813rem;
    box-sizing: border-box;
  }
  .frame-parent {
    gap: 1.938rem;
  }
  .jahr-2024-parent {
    flex-wrap: wrap;
  }
  .solarzaun {
    font-size: 6rem;
  }
  .gut-zu-wissen,
  .solarzaun3 {
    font-size: 3.125rem;
  }
  .inner-content-parent {
    gap: var(--gap-20);
  }
  .visual-elements {
    flex-wrap: wrap;
  }
  .rectangle-parent6 {
    padding-left: 3.563rem;
    padding-right: 3.563rem;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 450px) {
  .guessing {
    flex-wrap: wrap;
  }
  .frame-parent {
    gap: var(--gap-15);
  }
  .jahr-2024,
  .projekt-privathaus-mhlbach-container {
    font-size: var(--fs-18);
    line-height: var(--lh-18);
  }
  .solarzaun {
    font-size: 3.75rem;
  }
  .content-container,
  .content-wrapper {
    padding-bottom: 3.813rem;
    box-sizing: border-box;
  }
  .content-container {
    padding-bottom: 2rem;
  }
  .gut-zu-wissen,
  .solarzaun3 {
    font-size: var(--fs-30);
  }
  .product-metadata {
    flex-wrap: wrap;
  }
  .produkte {
    font-size: var(--fs-19);
    line-height: var(--lh-26);
  }
  .link-container {
    gap: 4.688rem;
    flex-wrap: wrap;
  }
  .action-buttons {
    gap: 4.563rem;
    flex-wrap: wrap;
  }
  .inner-images {
    gap: var(--gap-20);
    flex-wrap: wrap;
  }
}

/* ============================================================
   RESPONSIVE OVERRIDES  <  1200px
   Locofy output uses fixed rem widths matching the 1920px Figma
   frame. Below 1200px we stop the proportional scaling (see
   global.css) and explicitly re-layout:
     • main containers go full-width
     • two-col image+text sections stack vertically (image on top)
     • images become full-width inside their stacks
     • buttons stay tappable (≥ 44px) and don't overflow
     • fixed header collapses padding on narrow widths
   ============================================================ */
@media (max-width: 1199px) {

  /* Reset any explicit frame-sized widths on the major containers */
  .home,
  .home-inner,
  .frame-parent,
  .frame-wrapper,
  .frame-group,
  .frame-container,
  .content,
  .content2,
  .content-wrapper,
  .content-container,
  .tagline-parent,
  .product-info-parent,
  .img-20230810-wa0007-1-parent,
  .image-3-parent,
  .background-rect,
  .side-rect-parent,
  .info-container,
  .tagline-group,
  .unused-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box;
  }

  /* Two-col image+text sections: stack vertically, image on top */
  .content,
  .content2,
  .content-wrapper,
  .content-container,
  .image-3-parent,
  .side-rect-parent,
  .info-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Image sits above text in stacked view */
  .content > img,
  .content2 > img,
  .content-wrapper > img,
  .content-container > img,
  .adobestock-1707481416-1-icon,
  .img-20230810-wa0007-1-icon,
  .side-rect-icon,
  .image-placeholder,
  .side-rect-two {
    order: -1;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  /* Text side takes full width under the image */
  .frame-section,
  .tagline-group,
  .tagline-parent,
  .product-info,
  .dh-metall-bietet {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Disable absolute-positioning on elements that were hard-pinned
     to Figma coords (they have to flow naturally at narrow widths) */
  .img-20230810-wa0007-1-parent,
  .background-rect,
  .home-child {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* Buttons: always tappable, never clipped, wrap instead of overflow */
  .call-to-action,
  .call-to-action-wrapper,
  .button-area,
  .button-area-wrapper,
  .more,
  .more2 {
    width: auto !important;
    max-width: 100% !important;
    min-height: 44px !important;
    white-space: normal !important;
    padding: 0.75rem 1.5rem !important;
    box-sizing: border-box;
  }

  /* Hero headline: keep readable proportion, don't overflow */
  .solarzaun,
  .solarzaun3,
  .gut-zu-wissen,
  .balkone-tore-gelnder,
  .schlosserei-von-meisterhand {
    font-size: clamp(2rem, 7vw, 4.5rem) !important;
    line-height: 1.1 !important;
    word-break: break-word;
  }

  /* Fixed header: tighter padding on narrow widths so logo + menu fit */
  .frame-header {
    padding: 0.75rem 1.25rem !important;
  }

  /* Safety net: no element can push horizontal scroll */
  .home img,
  .home section,
  .home div {
    max-width: 100% !important;
  }
}

/* Below 600px (phones): further tighten + single-column grids */
@media (max-width: 599px) {
  .frame-header {
    padding: 0.5rem 1rem !important;
  }
  .solarzaun,
  .solarzaun3,
  .gut-zu-wissen {
    font-size: clamp(1.75rem, 9vw, 3rem) !important;
  }
  /* FAQ tabs / columns stack on phone */
  .inner-navigation,
  .inner-images,
  .visual-elements,
  .product-metadata,
  .jahr-2024-parent {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
}