:root{
  --intro-bg:#484e56;
  --intro-fg:#37b5f4;
  --intro-font:"DIN 2014","Archivo Black",Impact,sans-serif;
  --intro-duration:1500ms;
  --intro-exit:800ms;
  /* War clamp(18vw,10vw,15vw) - Minimum(18vw) > Maximum(15vw), damit
     laut Spec ungueltig/undefiniert (manche Browser nehmen dann immer
     das Minimum, andere reagieren inkonsistent). Reproduzierbar auf
     echtem Mobile Chrome: das trieb die Schriftgroesse des Intro-Textes
     (ALU/TORE/...) so weit hoch, dass er nicht mehr umbrach und die
     ganze Seite horizontal ueberlief - inkl. Folgefehlern beim Header
     (window.innerWidth wurde dadurch faelschlich riesig). Reihenfolge
     jetzt korrekt (Minimum < Praeferiert < Maximum). */
  --intro-line-h:clamp(10vw,15vw,18vw);
  --dh-grey: #484E56;
}


body.open-nav {
  max-height: 100vh;
  overflow: hidden!important;
}

.text-primary {
  color: var(--intro-fg)!important;
}

.bg-primary {
  background: var(--intro-fg)!important;
}


.swiper-container .swiper-image::before {
  content:'';
  width: 100%;
  height:100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
  z-index: 2;
  left: 0;
  top: 0;
  position: absolute;
}

.swiper-overlay {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10!important;
}

.swiper-overlay h3, .swiper-overlay h4 {
  line-height: 1.75rem!important;
  font-size: 1.25rem!important;
  font-weight: 400!important;
  font-family: var(--font-figtree)!important;
}

#home-slider::after {
  content:'';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 500px;
  height: 500px;
  background: url('../../../Resources/Public/Images/dh-frame.svg') no-repeat;
  background-size: contain;
  background-position: center bottom;
  z-index: 5;
}

.frame-header .container-fluid {
  transition: all .3s ease;
  margin-top: 0;
}

.frame-header .container-fluid IMG.logo {
  position: relative;
  transition: all .3s ease;
  max-width: 180px;
}

.frame-header .icon-wrapper {
  height: 10px;
  transition: all .3s ease;
}

.nav-overlay {
  z-index: -1;
  left: 0;
  top: 0;
  opacity: 0;
  visbility: hidden;
  transition: all .3s ease;
}

.open-nav .nav-overlay {
  z-index: 5000;
  opacity: 1;
  visbility: visible;
}

.inner-nav {
  position: absolute;
  width: 50vw;
  min-width: 400px;
  max-width: 750px;
  right: -150%;
  z-index: 3;
  transition: all .5s ease;
  opactiy: 0;
}

.open-nav .inner-nav {
  right: 0;
  opacity: 1;
}

.nav-bg {
  right: -125%;
  background: rgba(0,0,0,0.7);
  z-index: 2;
}

.open-nav .nav-bg {
  right: 0;
}

.scrolling_fixed_header .container-fluid {
  /* padding-top/-bottom hier bewusst entfernt (waren 1.5em!important,
     fest, unabhängig vom Breakpoint) - dadurch wich das Innenpadding im
     weißen Scroll-Zustand vom responsiven Bootstrap-Padding (py-3/
     py-lg-5) des transparenten Zustands ab, was beim Umschalten einen
     sichtbaren Versatz von Logo/Menü erzeugte. Padding jetzt einfach von
     "container-fluid p-0 py-3 py-lg-5" geerbt -> in beiden Zuständen
     identisch, siehe layout-tweaks.css für Hintergrund/Rundung/Farben. */
  background: white!important;
  margin-top: -25px;
}

.scrolling_fixed_header .container-fluid IMG.logo {
  top: 0!important;
  max-width: 140px;
}

.scrolling_fixed_header .icon-wrapper IMG {
  margin-top: -25px!important;
}

.scrolling_fixed_header .container-fluid .nav-toggle {
  transition: all .3s ease;
  top: 0.75em!important;
  color: var(--dh-grey)!important;
}

/* Overlay */
.intro-overlay{
  position:fixed;inset:0;z-index:9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background:var(--intro-bg);
  color:var(--intro-fg);
  font-family:var(--intro-font);
  font-weight:900;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  /* upward reveal */
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--intro-exit) cubic-bezier(.77,0,.18,1);
  will-change:clip-path;
}

.intro-percent {
  width: 300px!important;
  left: 50%;
  margin-left: -150px!important;
  bottom: 3rem;
  color: white!important;
  font-family: var(--font-figtree)!important;
  font-weight: 700!important;
  font-size: 1rem!important;
}
.intro-overlay.is-done{clip-path:inset(0 0 100% 0);}

body.intro-hidden .intro-overlay{display:none;}

.intro-inner{
  width:min(90vw,90vw);
  display:flex;flex-direction:column;gap:clamp(14px,3vw,20px);

}

/* Keyword ticker */
.intro-trackbar{
  position:relative;
  height:var(--intro-line-h);
  overflow:hidden;
}
.intro-keywords{
  list-style:none;margin:0;padding:0;
  animation:intro-cycle var(--intro-duration) steps(6,end) forwards;
}
.intro-keywords li{
  height:var(--intro-line-h);
  line-height:var(--intro-line-h);
  overflow: hidden;
  /* War clamp(15vw,10vw,15vw) - Minimum=Maximum(15vw), Praeferiert(10vw)
     dazwischen wirkungslos; kombiniert mit dem --intro-line-h-Fix oben
     jetzt direkt an die (korrigierte) Zeilenhoehe gekoppelt, damit beide
     nie wieder auseinanderlaufen koennen. */
  font-size:calc(var(--intro-line-h) * 0.85)!important;
  transition: all .3s ease;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
@keyframes intro-cycle{
  0%   {transform:translateY(0)}
  100% {transform:translateY(calc(var(--intro-line-h) * -6))}
}

/* Load bar under the keywords */
.intro-loadbar{
  margin-top:clamp(10px,1.2vw,18px);
  height:2px;
  background:rgba(55,181,244,.18);
  overflow:hidden;
}
.intro-loadbar > span{
  display:block;height:100%;width:0;background:var(--intro-fg);
  animation:intro-fill var(--intro-duration) linear forwards;
}
@keyframes intro-fill{to{width:100%}}

/* Percentage */
.intro-percent{
  align-self:flex-end;
  font-size:clamp(14px,1.4vw,20px);
  letter-spacing:.18em;
  font-weight:700;
  opacity:.9;
}

/* Body gets locked while intro runs */
body.intro-active{overflow:hidden;}

/* War font-family:var(--intro-font) (DIN 2014/Archivo Black) - Leftover
   aus der Locofy-Demo-Vorlage ("delete in production", nie aufgeräumt),
   dadurch erbte die GESAMTE Seite standardmäßig die fette Intro-Anzeige-
   schrift als Fließtext. Jetzt Figtree Light, wie site-weit gewünscht -
   das Intro selbst hat sein eigenes explizites font-family
   (.intro-overlay) und bleibt davon unberührt. */
body{margin:0;font-family:var(--font-figtree, sans-serif);font-weight:300;background:#fff;color:#222;}
strong, b { font-weight: 700; }
/* .demo-hero{}, .demo-hero h1{...} und .demo-hero p{...} standen hier
   noch als Rest der Locofy-Demo-Vorlage ("delete in production", siehe
   Kommentar oben zu body{} - beim Font-Fix damals nur die body-Regel
   bereinigt, diese drei Zeilen aber übersehen). <main class="demo-hero">
   im Layout ist echtes, dauerhaftes Markup (nur der alte Klassenname
   blieb), wurde also von jedem <p> und <h1> im gesamten Seiteninhalt
   geerbt - u.a. genau das #666, das den weißen Fließtext im dunkelblauen
   Teaser überschrieben hat, weil eine direkte Regel auf dem Element
   selbst immer vor Vererbung vom Elternelement gewinnt. Ersatzlos
   entfernt statt mit höherer Spezifität dagegen anzuschreiben. */


.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;
  z-index: 1000;
  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: 100% !important;
  margin: 0 auto !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 80vw;
  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: transparent;
/*  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 {

}
.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;
  box-sizing: border-box;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-deepskyblue);
  font-family: var(--font-figtree);
}
/* .py-5 gibt dem grauen Footer-Balken oben und unten zwar dieselbe
   Padding-Deklaration (3rem), optisch wirkte der Abstand nach oben aber
   spürbar größer: das Logo trägt zusätzlich sein eigenes mt-4 (1.5rem),
   das sich zum Padding addiert, während unten nichts Vergleichbares
   dazukommt. Gemessen (getBoundingClientRect, 1600px breit): oben ca.
   94px Luft bis zum Logo, unten nur ca. 61px bis zum tiefsten sichtbaren
   Element (Button/letzter Produkte-Link). +2rem unten gleicht das an,
   ohne die geteilte .py-5-Klasse selbst anzutasten. */
.footer-bar {
  padding-bottom: 5rem !important;
}
.image-3-parent {
  width: 100%;
  max-width: 80vw;
  position: relative;
  isolation: isolate;
}
.image-3-icon {
  width: 170px;
  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;
  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%;
  /* War align-items:flex-start (siehe .balkone-parent, .link-container
     weiter oben) - dadurch endeten die beiden Spalten (PRODUKTE /
     ÜBER DH METALL) unterschiedlich hoch, seit "Objekte" die
     PRODUKTE-Liste um einen Eintrag verlängert hat. Mit stretch bekommt
     .ber-uns-parent die volle Höhe der (jetzt höheren) PRODUKTE-Spalte,
     und kann den Button per justify-content unten bündig andocken. */
  align-items: stretch;
}
.balkone-parent {
  flex-direction: column;
  /* Etwas enger als der Standard-gap-16 (1rem) - wirkt kompakter in der
     Footer-Linkliste, ohne die Klickbarkeit der Links zu beeinträchtigen. */
  gap: 0.65rem;
}
.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;
  /* War justify-content:space-between - das hat den durch align-items:
     stretch gewonnenen Extra-Platz auf ALLE Lücken verteilt (auch
     zwischen den einzelnen Menüpunkten), wodurch die Abstände hier
     größer wurden als in der PRODUKTE-Spalte daneben (dort fixes
     gap:0.65rem ohne space-between). Jetzt bleiben die Menüpunkte mit
     demselben festen gap wie links zusammen oben, und nur der Button
     bekommt unten via margin-top:auto den kompletten übrigen Platz ab -
     so bleiben die Punkt-Abstände links/rechts gleich groß, und der
     Button schließt trotzdem bündig mit der (jetzt höheren) PRODUKTE-
     Spalte ab. */
  justify-content: flex-start;
  gap: 0.65rem;
  min-width: 7.5rem;
}
.ber-uns-parent .cta-container {
  /* !important nötig, weil das mt-4 in der Markup-Klasse selbst
     !important setzt (Bootstrap-Utility) und sonst gewinnen würde. */
  margin-top: auto !important;
}
.visual-elements {
  width: 100%;
  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;
  width: 100%;
  max-width: 80vw;
  margin: 0px auto;
  align-items: center;
  justify-content: space-between;
    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: 100%;
  max-width: 130px;
  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 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

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

  .rectangle-parent6 {
    max-width: unset!important;
    width: 100%!important;
    padding-left: 1.25rem!important;
    padding-right: 1.25rem!important;
  }
}

@media (max-width: 991px) {


}

@media (max-width: 872.99px) {
  .rectangle-parent6 {
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .rectangle-parent6 IMG {
    max-width: 100px;
  }
}

/* Below 600px (phones): further tighten + single-column grids */
@media (max-width: 599px) {

  .slider-meta {
    margin-bottom: 20vh!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;
  }

  .inner-images {
    flex-direction: unset!important;
    margin-bottom: 2rem;
  }


}

@media (max-width: 480px) {

  .intro-overlay {
    height: calc(100vh - 40px);
    max-height: -webkit-fill-available!important;
  }

  #home-slider, .swiper-container  {
    height: calc(100vh - 55px)!important;
    max-height: -webkit-fill-available!important;
  }
  body.open-nav {
    max-height: 100vh;
    overflow: hidden!important;
  }

  body.open-nav .nav-overlay .inner-nav {
    min-width: 300px;
    max-width: 330px!important;
    right: 0!important;
  }

  .main-nav__link {
    font-size: 2rem!important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-white, #fff);
    text-decoration: none;
    overflow: hidden!important;
    line-height: 1.05;
    height: 1.05em!important;
  }

}

/* ==========================================================================
   Generischer Seiteninhalt (normale Inhaltsseiten wie "Über DH Metall",
   "Kontakt", Produkt-Unterseiten - siehe lib.genericMainContent in
   setup.typoscript). Anders als Startseite/Referenzen/Projektdetail gibt
   es hier kein festes Design, nur ein vernünftiger Lesetext-Rahmen für
   Standard-Elemente (Text, Überschrift, ...) und Mask-Elemente.
   ========================================================================== */
.generic-page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 9rem var(--gap-20, 1.25rem) var(--gap-100, 6.25rem);
  font-family: var(--font-figtree, sans-serif);
  line-height: 1.7;
}

.generic-page-content h1,
.generic-page-content h2,
.generic-page-content h3 {
  font-family: var(--font-din-2014, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-gray-100, #0e1729);
  line-height: 1.2;
  margin: 2rem 0 1rem;
}

.generic-page-content h1 { font-size: clamp(1.75rem, 3.3vw, 2.75rem); margin-top: 0; }
.generic-page-content h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.generic-page-content h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

.generic-page-content p {
  margin: 0 0 1.25rem;
}

.generic-page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--br-5, 5px);
}

.generic-page-content ul,
.generic-page-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}