@media (max-width: 500px) {
  .frame-header {

    padding-left: 2.5vw !important;
    padding-right: 2.5vw !important;
  }

  .frame-header .container-fluid {
    width: 100% !important;
  }

  .frame-header .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .frame-header .row > .col-6 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .frame-header .container-fluid IMG.logo {
    max-width: 110px !important;
  }
}

.frame-header {
  background: transparent;
  border-radius: 0 0 0.6rem 0.6rem;
  padding: 0.75rem 1.5rem;
  box-sizing: border-box;
  color: var(--color-white, #fff);
  /* margin-top und padding-top wechseln beim Scroll-Zustand (siehe
     body:not(.scrolling_fixed_header) und .scrolling_fixed_header
     .frame-header weiter unten) - ohne eigene transition hier sprang der
     Header selbst hart um, während NUR sein Kind .container-fluid (das
     eine eigene transition hat) weich ein-/ausgeblendet wurde. Dadurch
     klaffte beim Hochscrollen kurz eine Lücke zwischen dem schon
     gesprungenen Header-Rahmen und dem noch nachziehenden weißen
     Hintergrund. Jetzt läuft beides synchron. */
  transition: margin-top 0.3s ease, padding-top 0.3s ease;

  transform: translateZ(0);
  will-change: transform;
  /* Deutlich höher als vorher (war 1040) - Header wurde auf echtem Mobile
     Chrome nach dem ersten Scroll teils von Seiteninhalt überlagert
     (Slider hat via Swiper eine eigene Compositing-Ebene, die bei zwei
     unabhängig geförderten Ebenen offenbar nicht immer zuverlässig nach
     z-index sortiert wird). Bewusst weiterhin unter .open-nav .nav-overlay
     (5000) und #introOverlay (9999), die sollen den Header weiterhin
     überdecken können, wenn sie aktiv sind. */
  z-index: 4500;
}


/* Der negative margin-top zieht den Header um genau sein eigenes
   Padding nach oben, damit er im transparenten Start-Zustand flächenbündig
   ÜBER dem Hero-Bild sitzt. Für Seiten ohne Hero-Bild (body.no-hero-bg,
   siehe weiter unten) ergibt das keinen Sinn - die bekommen dort ihre
   eigene, immer sichtbare Balkenoptik. */
body:not(.scrolling_fixed_header):not(.no-hero-bg) .frame-header {
  margin-top: -0.75rem;
}

.frame-header .nav-toggle {
  color: var(--color-white, #fff);
}

/* Seiten ohne dunkles Hero-Bild (Referenzen-Übersicht, generische Seiten
   wie "Über DH Metall", siehe Layouts/Default.html): eigener, dauerhaft
   sichtbarer Ruhezustand statt des transparenten Start-Zustands - ein
   hellgrauer Balken mit fester, großzügiger Höhe (gleicher Grauton wie
   die Textbild-Sektionen), Logo/Menü-Text in Dunkelblau statt Weiß.
   Bewusst NICHT dieselbe Optik wie .scrolling_fixed_header (weißer
   Hintergrund + Schatten) - der bleibt ein eigener, klar wahrnehmbarer
   Zustand, der nur beim tatsächlichen Scrollen zusätzlich einsetzt (der
   weiße Balken erscheint dann sichtbar VOR diesem grauen Grund).
   WICHTIG: nur im echten Ruhezustand (:not(.scrolling_fixed_header)) -
   ohne dieses Scoping gewann diese Regel (body.no-hero-bg .frame-header,
   Spezifität 0-2-1) gegen .scrolling_fixed_header .frame-header{padding-
   top:0} (Spezifität nur 0-2-0, da ein Element-Selektor "body" mehr
   Gewicht hat) - dadurch blieb padding-top/bottom UND der graue
   Hintergrund beim Scrollen auf den Unterseiten fälschlich bestehen,
   statt (wie auf Home) sauber auf den weißen, flachen Scroll-Zustand
   umzuschalten. Genau das war der gemeldete "komische graue
   Hintergrund"/die abweichende Höhe beim Scrollen auf den Unterseiten. */
body.no-hero-bg:not(.scrolling_fixed_header) .frame-header {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

body.no-hero-bg:not(.scrolling_fixed_header) .nav-toggle {
  color: var(--color-gray-100, #0e1729);
}

/* Der graue Balken-Hintergrund sitzt bewusst NICHT direkt auf
   .frame-header, sondern auf einem ::before-Pseudo-Element: .frame-header
   selbst bleibt bei der ererbten max-width:80vw (index.css, siehe auch
   Home) - genau dort stehen Logo/Menü-Button daher an derselben Stelle
   wie auf Home. Das ::before spannt sich davon unabhängig über die volle
   Viewport-Breite auf (left:50%+width:100vw+translateX(-50%), zentriert
   unter dem 80vw-Rahmen) und trägt NUR den Hintergrund - keine Rundungen
   nötig, ein frisches Pseudo-Element hat ohnehin border-radius:0.
   isolation:isolate auf der Basis-.frame-header-Regel (index.css) hält
   z-index:-1 innerhalb von .frame-header's eigenem Stacking-Context, statt
   hinter der eigentlichen Seite zu versinken. */
body.no-hero-bg:not(.scrolling_fixed_header) .frame-header::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #f0f0f0;
  z-index: -1;
}

.menu-toggle-label {
  display: inline-block;
  overflow: hidden;
  line-height: 1.2;
  height: 1.2em;
  vertical-align: middle;
}

.menu-toggle-label-inner {
  display: block;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.menu-toggle-label-text {
  display: block;
  line-height: 1.2;
}

.menu-toggle-label-text--in {
  color: var(--color-steelblue, #1f9cdb);
}

.nav-toggle:hover .menu-toggle-label-inner,
.nav-toggle:focus-visible .menu-toggle-label-inner {
  transform: translateY(-1.2em);
}

.nav-toggle:hover .hamburger-icon,
.nav-toggle:focus-visible .hamburger-icon {
  color: var(--color-steelblue, #1f9cdb);
}


.footer-link-roll-link {
  display: inline-block;
  overflow: hidden;
  line-height: 1.6;
  height: 1.6em;
  color: inherit;
  text-decoration: none;
}

.footer-link-roll-inner {
  display: block;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.footer-link-roll-text {
  display: block;
  line-height: 1.6;
}

.footer-link-roll-text--out {
  color: var(--color-white, #fff);
}

.footer-link-roll-text--in {
  color: var(--color-steelblue, #1f9cdb);
}

.footer-link-roll-link:hover .footer-link-roll-inner,
.footer-link-roll-link:focus-visible .footer-link-roll-inner {
  transform: translateY(-1.6em);
}

.scrolling_fixed_header .frame-header {
  padding-top: 0;
}

.scrolling_fixed_header .container-fluid {
  background: white !important;
  margin-top: 0 !important;
  border-radius: 0 0 0.6rem 0.6rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  /* Softer Schatten, damit sich der weiße Header beim Runterscrollen
     sichtbar vom Seiteninhalt abhebt statt flach aufzuliegen. */
  box-shadow: 0 0.5rem 1.5rem rgba(14, 23, 41, 0.12);
}

.scrolling_fixed_header .container-fluid IMG.logo {
  top: 0.75em;
  max-width: 140px;
}

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

.scrolling_fixed_header .container-fluid .nav-toggle {
  top: 0.75em !important;
  color: var(--color-gray-100, #0e1729) !important;
}

/* Der äußere Footer-Rahmen (.image-3-parent, max-width:80vw) lag zwar
   bereits exakt bündig mit .frame-header (beide 80vw, zentriert - per
   getBoundingClientRect verifiziert: 158/1418px bei 1576px Viewport-
   breite, identisch). Innerhalb dieses Rahmens fehlte dem Footer-Logo
   aber das Innenpadding, das der Header durch seine eigene Padding-Kette
   (.frame-header 1.5rem + .container-fluid 0.75rem + Row/Col-Gutter)
   mitbringt - dadurch stand das Footer-Logo sichtbar weiter links als
   das Header-Logo, obwohl die Rahmen selbst schon übereinstimmten. Wert
   (3.7rem) empirisch aus dem gemessenen Versatz (52px bei 14px
   Root-Schriftgröße) übernommen. Auf Mobile (<= 900px) übernimmt ohnehin
   die bestehende !important-Regel in index.css (padding-left/right:
   1.25rem, gestapeltes Layout) - hier also bewusst ohne eigene
   Media-Query. */
.image-3-parent {
  padding-left: 3.7rem;
  padding-right: 3.7rem;
}

.rectangle-parent6 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  max-width: 80vw;
  margin: 0 auto;
  /* War 0/0 (Partnerlogos/Copyright-Zeile bündig mit der 80vw-Rahmenkante
     selbst) - jetzt dasselbe Innenpadding wie .image-3-parent oben drüber,
     damit Partnerlogos links und Copyright-Zeile rechts auf derselben
     Flucht wie Header-Logo/Menü-Button und der obere Footer-Inhalt
     stehen. */
  padding-left: 3.7rem;
  padding-right: 3.7rem;
}

.alle-rechte-vorbehalten-made-wrapper {
  align-items: flex-end;
  text-align: right;
}

@media (max-width: 480px) {
  .rectangle-parent6 {
    flex-wrap: wrap !important;
    row-gap: 0.75rem;
  }

  .alle-rechte-vorbehalten-made-wrapper {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
  }

  .alle-rechte-vorbehalten-container {
    white-space: normal;
    max-width: 100%;
    word-break: break-word;
  }


}


#home-slider::after {
  width: clamp(140px, 35vmin, 500px);
  height: clamp(140px, 35vmin, 500px);
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--color-steelblue, #1f9cdb);
  background-color: var(--color-steelblue, #1f9cdb);
  /* Nochmal eine Spur kleiner als vorher (br-15 -> br-5) */
  border-radius: var(--br-5, 5px);
  padding: 0.75rem 1.5rem;
  color: var(--color-white, #fff);
  font-family: var(--font-figtree, sans-serif);
  font-weight: 700;
  font-size: var(--fs-18, 1.125rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.pill-btn:hover,
.pill-btn:focus-visible {
  background-color: var(--color-gray-100, #0e1729);
  border-color: var(--color-gray-100, #0e1729);
}

.pill-btn-label {
  display: inline-block;
  overflow: hidden;
  line-height: 1.3;
  height: 1.3em;
}

.pill-btn-label-inner {
  display: block;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.pill-btn-label-text {
  display: block;
  line-height: 1.3;
  color: var(--color-white, #fff);
}

.pill-btn:hover .pill-btn-label-inner,
.pill-btn:focus-visible .pill-btn-label-inner {
  transform: translateY(-1.3em);
}

.pill-btn--invert {
  background-color: var(--color-gray-100, #0e1729);
  border-color: var(--color-gray-100, #0e1729);
}

.pill-btn--invert:hover,
.pill-btn--invert:focus-visible {
  background-color: var(--color-white, #fff);
  border-color: var(--color-white, #fff);
}

.pill-btn--invert .pill-btn-label-text--out {
  color: var(--color-white, #fff);
}

.pill-btn--invert .pill-btn-label-text--in {
  color: var(--color-gray-100, #0e1729);
}


@media (max-width: 520px) {

}

/* "Projektanfrage"-Button im Footer (ÜBER DH METALL-Spalte): auf großen
   Displays rechtsbündig statt linksbündig wie die Menüpunkte darüber -
   .ber-uns-parent selbst bleibt align-items:flex-start (für die Menü-
   punkte gedacht), nur der Button-Container bekommt hier sein eigenes
   align-self. Bewusst nur ab 1200px (Desktop) - auf schmaleren Breiten
   bleibt der Button wie bisher linksbündig unter den Links. */
@media (min-width: 1200px) {
  .ber-uns-parent .cta-container {
    align-self: flex-end;
  }
}

/* Abstand Logo -> Adresse im Footer (.navigation-info) an den Abstand
   "PRODUKTE" -> erster Menüpunkt ("Balkone") im rechten Block angeglichen
   (30px, per getBoundingClientRect gemessen) - war vorher 3rem/42px durch
   die Bootstrap-Klasse mb-5 im Markup. Logo bleibt unverändert an seiner
   ursprünglichen Stelle im normalen Textfluss, nur der Abstand darunter
   wird angepasst. !important nötig, da .mb-5 selbst bereits
   margin-bottom:3rem!important setzt (Bootstrap-Utility). */
.navigation-info .image-3-icon {
  margin-bottom: 30px !important;
}

/* Meisterbetrieb-/DIN-Logos unten links (.din-layout): bündig mit der
   Unterkante des rechten Blocks (PRODUKTE/ÜBER DH METALL, endet beim
   Projektanfrage-Button) - .navigation-info wird dafür auf die volle
   Zeilenhöhe gestreckt (sonst hat es nur seine eigene Inhaltshöhe), und
   .din-layout bekommt margin-top:auto, um den kompletten übrigen Platz
   für sich zu beanspruchen (gleiches Prinzip wie bei .ber-uns-parent
   .cta-container weiter oben, das den Projektanfrage-Button genauso an
   die Unterkante seiner eigenen Spalte andockt). Logo/Adresse darüber
   bleiben davon unberührt - stehen weiterhin an ihrer gewohnten Stelle. */
.navigation-info {
  align-self: stretch;
}

.navigation-info .din-layout {
  margin-top: auto !important;
  /* .din-layout trägt selbst noch mb-5 (margin-bottom:3rem!important,
     Bootstrap-Utility) - ohne Override stünde es trotz margin-top:auto
     nicht wirklich bündig am Ende, sondern nochmal um 3rem nach oben
     versetzt. */
  margin-bottom: 0 !important;
}

/* Beide Logos eine Spur größer (waren 3.681rem/3.313rem). */
.din-layout-child {
  width: 4.2rem;
  height: 4.2rem;
}

.din-1-icon2 {
  width: 3.8rem;
  height: 3.8rem;
}

/* Frei platzierbares Mask-CE "Button" (Button.html) - nutzt die
   bestehende .pill-btn-Optik 1:1 (siehe Uspsection.html fuer dasselbe
   Muster), nur der Pfeil bekommt hier eine eigene, generische Klasse
   statt .usp-section-btn-arrow. */
.mask-button-arrow {
  flex: none;
  transition: transform 0.35s ease;
}

/* .pill-btn ist selbst zwar display:inline-flex (schrumpft normal auf
   die Inhaltsbreite) - sitzt der Button aber direkt als Kind in einem
   Flex-Container ohne eigenes align-items (z.B. .split-section-content,
   flex-direction:column), gewinnt per Default align-items:stretch und
   zieht ihn trotzdem auf die volle Breite der Spalte. align-self hebt
   das gezielt nur für den Button wieder auf, unabhängig davon, wo er
   eingesetzt wird. */
.mask-button {
  align-self: flex-start;
}

.mask-button:hover .mask-button-arrow,
.mask-button:focus-visible .mask-button-arrow {
  transform: translateX(3px);
}