@charset "UTF-8";
/* =========================
   TIGONET SCSS (JOOMLA 6 BASELINE)
   Modul-Struktur mit @use (Sass 3.0-kompatibel).
   Reihenfolge der @use-Anweisungen = CSS-Kaskaden-Reihenfolge.
   ========================= */
:root {
  --bs-primary: #004f91;
  --bs-secondary: #000000;
  --bs-border-radius: 0;
  --bs-body-font-family: Barlow Condensed, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-color: #000000;
  --bs-body-bg: #ffffff;
}

/* SCSS fonts */
/* barlow-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/barlow-condensed-v13-latin-regular.woff2") format("woff2"), url("../fonts/barlow-condensed-v13-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* barlow-condensed-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/barlow-condensed-v13-latin-500.woff2") format("woff2"), url("../fonts/barlow-condensed-v13-latin-500.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* barlow-condensed-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/barlow-condensed-v13-latin-600.woff2") format("woff2"), url("../fonts/barlow-condensed-v13-latin-600.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* =========================
   BREAKPOINT MIXINS
   Nutzung in Partials: @use "../breakpoints" as *;
   ========================= */
/* Typographie SCSS */
/* =========================
   HEADLINES
   Figma-verifiziert (Node 1:2): SemiBold, uppercase, H1 115px/91.3%
   Line-Height, H2 48px/100% Line-Height. Als Element- UND Klassen-
   Selektor, damit sowohl echte h1/h2 im Artikel-Content als auch
   Custom-Field-getriebene .h1/.h2-Klassen (z. B. auf einem <p> im
   JCE-Editor) denselben Stil bekommen.

   Mobil-Fallback für h1/.h1: 115px (Desktop-Wert) ist auf schmalen
   Viewports deutlich zu groß -- bisher wurde das nur punktuell pro Block
   gefixt (.hero__title, .leistungsteaser__title, jeweils eigene BEM-Klasse
   mit eigenem font-size, gewinnt dank höherer Spezifität weiterhin gegen
   diese Regel hier). Neue Blöcke, die einfach nur die generische .h1-Klasse
   verwenden (z. B. Zeitstrahl-Titel auf Unternehmen), erben sonst ungewollt
   115px auch mobil. Generischer Fallback 2.5rem/40px ("H1 Mobil", Figma-
   Referenz aus dem Hero, Node 415:457) als sinnvoller Standard, ab md
   zurück auf die volle Desktop-Skala.
   ========================= */
h1,
.h1 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 5.99vw, 7.1875rem);
  line-height: 1;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  h1,
  .h1 {
    line-height: 0.913;
  }
}

h2,
.h2 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.5vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
}

h3,
.h3 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 2rem;
}

h4,
.h4 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
}

h5,
h6,
.h5,
.h6 {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
}

/* =========================
   FLIESSTEXT
   .text statt globalem body-Override -- _template.scss definiert body
   bereits (1rem/Barlow Condensed) und wird nach dieser Datei importiert,
   ein body-Override hier würde also wirkungslos verpuffen. .text wird
   gezielt auf Absätze innerhalb eines Blocks gesetzt.
   ========================= */
.text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
}

/* =========================
   GENERISCHE ARTIKEL (Impressum, Datenschutz, AGB, ...)
   .com-content-article__body kommt aus templates/tigonet/html/com_content/
   article/container.php -- Wrapper JEDER einzelnen Artikel-Ansicht ohne
   eigenes Block-/BEM-Layout (reiner JCE-Fließtext mit echten h1-h4).
   Die globale H1-H4-Regel oben ist fürs Marken-/Hero-Scale gebaut (h1 bis
   115px, Uppercase, margin:0 -- Abstand kommt dort aus Flex/Grid-Gap) und
   macht auf einer Textwand wie der Datenschutzerklärung keinen Sinn:
   überdimensionierte Zwischenüberschriften, erzwungene Großschreibung,
   und ohne Margin kleben Überschrift und Absatz direkt aneinander. Eigene,
   moderate Lesetext-Skala hier, Sentence-Case (kein text-transform,
   analog zu .h3 oben). Fließtext selbst kommt automatisch vom neuen
   body-font-size (siehe _template.scss), keine p-Regel hier nötig.
   ========================= */
.com-content-article__body h1 {
  font-size: 2.5rem;
  text-transform: none;
  margin: 0 0 1.5rem;
}
.com-content-article__body h2 {
  font-size: 2rem;
  text-transform: none;
  margin: 2.5rem 0 1rem;
}
.com-content-article__body h3 {
  font-size: 1.5rem;
  margin: 2rem 0 0.75rem;
}
.com-content-article__body h4 {
  font-size: 1.25rem;
  margin: 1.5rem 0 0.5rem;
}

/* =========================
   PILL-BUTTON
   Durchgängiges Muster in jedem Block (Hero, Slider, CTA, Beratung, ...).
   Eigener Klassenname .btn-pill statt der bestehenden .btn aus
   _template.scss (MasterJ6-Rest mit abweichender Geometrie/Farblogik,
   uppercase + 40px-Radius) -- Zusammenführung/Aufräumen der beiden ist
   ein separater Schritt, kein Teil dieser Typografie-Grundlage.
   ========================= */
.btn-pill, .instagram-galerie .ingallery-loadmore-btn,
.btn-pill:link,
.btn-pill:visited {
  display: inline-block;
  padding: 0.625rem 1rem;
  border-radius: 1000px;
  background-color: #004f91;
  color: #ffffff;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-pill:hover, .instagram-galerie .ingallery-loadmore-btn:hover,
.btn-pill:focus-visible,
.instagram-galerie .ingallery-loadmore-btn:focus-visible,
.btn-pill:active,
.instagram-galerie .ingallery-loadmore-btn:active {
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: none;
}

html {
  overflow-y: scroll;
  font-size: 16px;
}

body {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  background-color: #ffffff;
  overflow-x: hidden;
}

/* Standard Bilder Responsive */
.layout1 {
  display: flex;
  flex-wrap: wrap;
}
.layout1 > .block1,
.layout1 > .block2 {
  padding: 30px 0;
  min-width: 0;
  flex: 0 0 100%;
  max-width: 100%;
  display: block;
  align-items: center;
}
.layout1 > .block1 .contentblock,
.layout1 > .block2 .contentblock {
  box-sizing: content-box;
  width: calc(100% - 40px);
  max-width: 100%;
  margin: 0;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .layout1 {
    flex-wrap: nowrap;
  }
  .layout1 > .block1,
  .layout1 > .block2 {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    padding: 30px 0;
  }
  .layout1 > .block1 {
    justify-content: flex-end;
    padding-right: 70px;
  }
  .layout1 > .block1 .contentblock {
    width: 360px;
    padding-left: calc((100vw - 720px) / 2);
  }
  .layout1 > .block2 {
    justify-content: flex-start;
  }
  .layout1 > .block2 .contentblock {
    width: 360px;
    padding-right: calc((100vw - 720px) / 2);
  }
}
@media (min-width: 992px) {
  .layout1 > .block1,
  .layout1 > .block2 {
    padding: 30px 0;
  }
  .layout1 > .block1 .contentblock {
    width: 480px;
    padding-left: calc((100vw - 960px) / 2);
  }
  .layout1 > .block2 .contentblock {
    width: 480px;
    padding-right: calc((100vw - 960px) / 2);
  }
}
@media (min-width: 1200px) {
  .layout1 > .block1 .contentblock {
    width: 570px;
    padding-left: calc((100vw - 1140px) / 2);
  }
  .layout1 > .block2 .contentblock {
    width: 570px;
    padding-right: calc((100vw - 1140px) / 2);
  }
}
@media (min-width: 1400px) {
  .layout1 > .block1 .contentblock {
    width: 660px;
    padding-left: calc((100vw - 1320px) / 2);
  }
  .layout1 > .block2 .contentblock {
    width: 660px;
    padding-right: calc((100vw - 1320px) / 2);
  }
}

/* Back to Top */
.back-to-top-link {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 3rem;
  z-index: 10000;
  padding: 0;
  color: #fff;
  pointer-events: all;
  opacity: 0;
  transition: opacity 200ms ease-in;
}
.back-to-top-link.visible {
  opacity: 1;
}
.back-to-top-link i {
  font-size: 2.5rem;
  color: #000000;
  right: 2rem;
  top: -60px;
  text-shadow: 0 0 4px rgba(3, 54, 69, 0.88);
}

.abstand {
  margin-top: 75px;
  margin-bottom: 75px;
}
@media (max-width: 768px) {
  .abstand {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}

@media (max-width: 768px) {
  .flex-gap-lg.flex-gap-lg {
    gap: 1rem;
  }
}
/* =========================
   TOPBAR
   Oberste Zeile der Seite: Hauptmenü + Telefon/E-Mail-Icons.
   Figma (Desktop wie Mobil, Node 13:32 / 415:247): WEISSER
   Hintergrund, SCHWARZER Nav-Text, BLAUE Icons -- kein blauer
   Balken mit weißem Text (das war ein Fehler in der ersten Fassung).

   Mobil (< md, eigenes Figma-Frame): Kontakt-Icons links,
   Hamburger-Toggle rechts. Ab md (Bootstrap schaltet dort .offcanvas
   in offcanvas-default.php auf inline um, siehe navbar-expand-md):
   Menü links, Kontakt rechts -- Reihenfolge wird nur über flex
   "order" gedreht, gleiche Elemente, gleiches Markup.

   Icon-Größe der Kontakt-Icons folgt derselben Staffelung wie die
   Nav-Schriftgröße (siehe _navigation.scss) -- Icons sollen laut
   Vorgabe genauso groß wirken wie die Menüpunkte daneben.
   ========================= */
.topbar {
  background-color: #ffffff;
}
.topbar .container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.topbar__menu {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
}
.topbar__contact {
  order: 1;
  flex: 0 0 auto;
  display: flex;
  gap: 1.5rem;
}
.topbar__contact-item {
  display: inline-flex;
  align-items: center;
  color: #004f91;
  text-decoration: none;
}
.topbar__contact-item span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.topbar__contact-item i {
  font-size: 2rem;
}
.topbar__contact-item:hover, .topbar__contact-item:focus-visible {
  color: rgb(0, 37.3206896552, 68.5);
}

@media (min-width: 768px) {
  .topbar__menu {
    order: 1;
  }
  .topbar__contact {
    order: 2;
  }
  .topbar .container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}
@media (min-width: 992px) {
  .topbar .container {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .topbar__contact-item i {
    font-size: 2rem;
  }
}
@media (min-width: 1200px) {
  .topbar .container {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .topbar__contact-item i {
    font-size: 1.6rem;
  }
}
@media (min-width: 1400px) {
  .topbar .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .topbar__contact-item i {
    font-size: 1.875rem;
  }
}
/* =========================
   CONTAINER-LINKSRAND-FORMEL
   .hero__content (Logo, Intro-Text, CTA-Button -- Logo liegt als normales
   Flow-Element MIT drin, siehe unten) liegt NICHT in einem echten
   Bootstrap .container (Full-Bleed-Flex-Layout), soll aber optisch exakt
   am linken Innenrand eines .container ausrichten -- wie Topbar/Footer, die
   echte .container-Klassen nutzen. Ein fixer vw-Wert (frühere Fassung:
   clamp(1rem, 21.46vw, 26rem)) trifft das nur bei einer einzigen
   Referenzbreite; der echte Bootstrap-Container springt pro Breakpoint auf
   eine neue max-width und zentriert sich per margin:auto, der Linksrand
   wächst innerhalb einer Breakpoint-Bandbreite kontinuierlich mit der
   Viewport-Breite. container-inset() bildet das nach: (100vw minus
   Container-max-width) halbiert plus der halbe Bootstrap-Gutter (1.5rem/2 =
   0.75rem). Max-widths hier 1:1 aus media/vendor/bootstrap/css/bootstrap.css
   übernommen (Bootstrap-Standardwerte, im Projekt nicht überschrieben).
   ========================= */
/* =========================
   HEADER (stitle-Zeile)
   Zeile unter der Topbar: nur noch die stitle-Modulposition,
   ungenutzt bis auf Weiteres. Menü ist in die Topbar gewandert,
   Logo sitzt jetzt in .hero__content (siehe unten) -- laut Figma
   sitzt es visuell über dem Hero-Intro-Text, nicht in einer eigenen
   schmalen Kopfzeile.
   ========================= */
header .container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* =========================
   HERO
   Ein Hero pro Menüpunkt (eigenes Modul, Custom-HTML, per
   Modulzuweisung auf genau eine Seite begrenzt, Position "hero" in
   index.php direkt nach </header>). Modul liefert <section class="hero">
   direkt als Root-Element -- keine .hero-wrapper-Zwischenebene mehr. Kein
   Artikel/Blog-Item -- die drei Layout-Felder (Container/Blog-Item-Klasse/
   Content-Klasse) greifen hier NICHT, Full-Bleed-Verhalten ist daher fest
   verdrahtet.

   Logo liegt jetzt als normales Flow-Element in .hero__content (siehe
   __logo unten) statt absolut über dem Hero -- dadurch kein eigener
   Positionierungskontext/kein reserviertes Padding mehr nötig, das Logo
   erbt automatisch denselben Container-Linksrand wie Intro/Buttons.
   ========================= */
.hero {
  display: flex;
  flex-direction: column;
}
.hero__content {
  order: 1;
  padding: 1.5rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.hero__logo {
  margin-bottom: 2.375rem;
}
.hero__logo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 28.25rem;
}
.hero__intro {
  margin: 0;
  font-size: 1.25rem;
  color: #000000;
  max-width: 50ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero__media {
  order: 2;
  position: relative;
  overflow: hidden;
  aspect-ratio: 371/260;
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  mix-blend-mode: multiply;
  z-index: 2;
}
.hero__title {
  position: absolute;
  top: 34.6%;
  left: 1rem;
  right: 1rem;
  text-align: center;
  font-size: 2.5rem;
  line-height: 1.1;
  z-index: 3;
  margin: 0;
  color: #ffffff;
}

@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    align-items: center;
  }
  .hero__content {
    order: 0;
    flex: 0 0 50%;
    padding: 0 1rem;
    padding-left: calc((100vw - 720px) / 2 + 0.75rem);
  }
  .hero__media {
    flex: 1 1 50%;
    aspect-ratio: 948/822;
  }
  .hero__title {
    top: 51.7%;
    left: 11.8%;
    right: 1rem;
    text-align: left;
    font-size: clamp(2.5rem, 5.99vw, 7.1875rem);
    line-height: 1;
  }
}
@media (min-width: 992px) {
  .hero__content {
    padding-left: calc((100vw - 960px) / 2 + 0.75rem);
  }
}
@media (min-width: 1200px) {
  .hero__content {
    padding-left: calc((100vw - 1140px) / 2 + 0.75rem);
  }
}
@media (min-width: 1400px) {
  .hero__content {
    padding-left: calc((100vw - 1320px) / 2 + 0.75rem);
  }
  .hero__media {
    max-height: 822px;
  }
}
/* =========================
   HAUPTMENÜ (mod_menu, offcanvas-default.php)
   Sitzt seit dem Topbar-Umbau in .topbar__menu, NICHT mehr in
   <header> -- Selektoren daher auf .topbar umgestellt (vorher tote
   Regeln unter "header", da das Menü aus dem Header herausgelöst
   wurde, siehe index.php).

   Bootstrap-Kern übernimmt bereits das responsive Verhalten von
   navbar-expand-md + .offcanvas (Toggle-Button unter md, inline ab
   md -- echtes Mobil ist ein eigenes Figma-Frame und bleibt Hamburger,
   "bis md" meint hier die volle Inline-Nav) -- hier nur Farben/
   Typografie/den eigenen Hamburger-Look ergänzen, nicht die
   Grundmechanik nachbauen.
   ========================= */
.offcanvas-backdrop.show {
  opacity: 0;
}

.topbar {
  position: relative;
  z-index: 1050;
}
.topbar .offcanvas {
  visibility: visible;
  display: block;
  top: var(--topbar-height, 74px);
}
.topbar .offcanvas-end {
  width: 100%;
}
@media (max-width: 768px) {
  .topbar .offcanvas-body {
    padding-top: 4rem;
  }
}
.topbar .navbar {
  margin: 0;
  padding: 0;
  line-height: 2rem;
}
.topbar .nav {
  font-family: "Barlow Condensed", sans-serif;
  width: 100%;
  flex-direction: column;
  gap: 2rem;
}
.topbar .nav .nav-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.topbar .nav .nav-item a {
  flex: 1 1 auto;
  padding: 0 1rem;
  color: #000000;
  display: block;
  font-weight: 500;
  font-size: 1.5rem;
  text-decoration: none;
}
.topbar .nav .nav-item a:hover {
  color: #004f91;
  text-decoration: none;
}
.topbar .nav .nav-item.active a {
  font-weight: 600;
  color: #004f91;
}
.topbar .nav .nav-item .mod-menu__sub {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar .nav .nav-item .mod-menu__sub a {
  font-size: 1rem;
  font-weight: 500;
}
.topbar .nav .nav-item__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000000;
  cursor: pointer;
}
@media (min-width: 768px) {
  .topbar .nav .nav-item__toggle {
    display: none;
  }
}
.topbar .nav .nav-item__chevron {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.topbar .nav .nav-item.is-open .topbar .nav .nav-item__chevron {
  transform: rotate(-135deg);
}
@media (max-width: 768px) {
  .topbar .nav .nav-item .mod-menu__sub {
    display: block;
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    padding-left: 1rem;
    transition: max-height 0.3s ease, margin-top 0.3s ease;
  }
  .topbar .nav .nav-item.is-open .mod-menu__sub {
    max-height: 15rem;
    margin-top: 0.5rem;
  }
  .topbar .nav .nav-item.is-open .mod-menu__sub li {
    margin-bottom: 0.5rem;
  }
  .topbar .nav .nav-item.is-open .mod-menu__sub a {
    padding: 0.35rem 0;
  }
}
.topbar .navbar-toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 41px;
  height: 29px;
  border: 0;
  padding: 0;
  background: transparent;
}
.topbar .navbar-toggler:focus {
  box-shadow: none;
}
.topbar .icon-menu {
  display: block;
  position: relative;
  width: 41px;
  height: 7px;
  background-color: #004f91;
  transition: background-color 0.25s ease;
}
.topbar .icon-menu::before, .topbar .icon-menu::after {
  content: "";
  position: absolute;
  left: 0;
  width: 41px;
  height: 7px;
  background-color: #004f91;
  transition: transform 0.3s ease, top 0.3s ease;
}
.topbar .icon-menu::before {
  top: -11px;
}
.topbar .icon-menu::after {
  top: 11px;
}
.topbar .navbar-toggler:has(~ .offcanvas.show) .icon-menu,
.topbar .navbar-toggler:has(~ .offcanvas.showing) .icon-menu {
  background-color: transparent;
}
.topbar .navbar-toggler:has(~ .offcanvas.show) .icon-menu::before,
.topbar .navbar-toggler:has(~ .offcanvas.showing) .icon-menu::before {
  top: 0;
  transform: rotate(45deg);
}
.topbar .navbar-toggler:has(~ .offcanvas.show) .icon-menu::after,
.topbar .navbar-toggler:has(~ .offcanvas.showing) .icon-menu::after {
  top: 0;
  transform: rotate(-45deg);
}

@media (min-width: 768px) {
  .topbar .navbar-toggler {
    display: none;
  }
  .topbar .navbar {
    line-height: 1.4rem;
  }
  .topbar .nav {
    flex-direction: row;
    gap: 0;
  }
  .topbar .nav .nav-item a {
    padding: 0 1rem 0.5rem 1rem;
    display: inline-block;
    font-size: 1.1rem;
  }
  .topbar .nav .nav-item .mod-menu__sub {
    position: absolute;
    top: 100%;
    left: 1rem;
    z-index: 10;
    min-width: 12rem;
    padding: 0.75rem 0;
  }
  .topbar .nav .nav-item .mod-menu__sub li {
    display: block;
  }
  .topbar .nav .nav-item .mod-menu__sub a {
    display: block;
    padding: 0.5rem 1.25rem;
    font-size: 1.25rem;
  }
  .topbar .nav .nav-item:hover .mod-menu__sub,
  .topbar .nav .nav-item:focus-within .mod-menu__sub {
    display: block;
  }
}
@media (min-width: 992px) {
  .topbar .nav .nav-item a {
    padding: 0 1.5rem 0.5rem 1.5rem;
    font-size: 1.35rem;
  }
}
@media (min-width: 1200px) {
  .topbar .nav .nav-item a {
    padding: 0 1.75rem 0.5rem 1.75rem;
    font-size: 1.6rem;
  }
}
@media (min-width: 1400px) {
  .topbar .nav .nav-item a {
    padding: 0 2rem 0.5rem 2rem;
    font-size: 1.875rem;
  }
}
/* =========================
   FOOTER
   Eigenes Custom-HTML-Modul (Position "footer"), wird von index.php
   fest umschlossen: <footer><div class="container">{Modul}</div></footer>
   (siehe templates/tigonet/index.php). Das Modul selbst liefert nur
   .footer__top / .footer__bottom -- KEIN eigener .container-Wrapper,
   der ist schon da.

   Der blaue Vollbreiten-Hintergrund (Figma Node 125:161, #004F91)
   kann deshalb nicht auf einen Wrapper INNERHALB des Moduls sitzen
   (der wäre schon im .container eingerückt) -- er muss auf das bare
   <footer>-Element selbst, das index.php liefert.

   Layout bleibt von xxl bis md unverändert (eine Zeile: Logo /
   Adresse / Öffnungszeiten / Nav-Gruppe). Erst unterhalb md (Mobil)
   stapeln sich die vier Spalten vollbreit -- die zwei Nav-Spalten
   bleiben aber auch mobil nebeneinander (eigene innere .row, Figma-
   Mobil-Frame 415:247, Footer-Inhalt ab y=6026: Logo -> Adresse ->
   Öffnungszeiten -> Nav 2-spaltig -> Social -> Copyright).
   ========================= */
footer {
  background-color: #004f91;
  color: #ffffff;
  padding: 3rem 0;
}
footer a {
  color: #ffffff;
  text-decoration: none;
}
footer a:hover, footer a:focus-visible {
  text-decoration: underline;
}

@media (min-width: 768px) {
  footer {
    padding: 200px 0;
  }
}
/* =========================
   FOOTER-ÜBERLAPPUNG NACHHALTIGKEIT-SEITE
   Jeder Menüpunkt liefert index.php seine eigene, kleingeschriebene Klasse
   (pageclass_sfx aus den Menüpunkt-Einstellungen) auf das <footer>-Element
   -- hier "nachhaltigkeit". Der Bildstreifen auf dieser Seite (siehe
   _nachhaltigkeit.scss, Node 269:24) ragt Figma-/Screenshot-verifiziert
   exakt 251px (= halbe Item-Höhe) in den Footer hinein, dieselbe Geometrie
   wie bei .jobs-teaser auf Home (siehe _home.scss). Der Abstand hier ist
   DESHALB bewusst NICHT der normale Footer-Abstand, sondern eigens auf die
   Pfeilspitzen der Bildstreifen-Items abgestimmt: margin-top zieht den
   Footer unter die Pfeilspitzen, padding-top gleicht das wieder aus, damit
   der eigentliche Footer-Inhalt (Logo/Adresse) nicht mit den Bildern
   kollidiert. Prozentwert statt fixem px-Wert aus demselben Grund wie bei
   .jobs-teaser: Bildstreifen-Höhe skaliert über aspect-ratio mit der
   Blockbreite, ein fixer Wert würde bei jeder anderen Breite an der
   Pfeilspitze vorbeilaufen. Kein eigener z-index nötig, .bildstreifen__item
   ist bereits position:relative und liegt dadurch automatisch über diesem
   nachfolgenden, unpositionierten <footer>.
   ========================= */
footer.nachhaltigkeit {
  margin-top: -13%;
  padding-top: calc(13% + 3rem);
}
@media (min-width: 768px) {
  footer.nachhaltigkeit {
    padding-top: calc(13% + 200px);
  }
}

.footer__top {
  margin-bottom: 2rem;
}
.footer__logo img {
  display: block;
  height: auto;
  max-width: 220px;
}
@media (min-width: 768px) {
  .footer__logo img {
    max-width: 250px;
  }
}
.footer__address, .footer__hours, .footer__nav-group {
  font-size: 1.25rem;
}
.footer__address p, .footer__hours p {
  margin: 0;
}
.footer__address strong, .footer__hours strong {
  font-weight: 600;
}
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer__nav-group .row {
  display: flex;
  gap: 2.5rem;
}
.footer__nav-group .row > [class*=col-] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.footer__social {
  display: flex;
  gap: 1rem;
  order: -1;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer__social i {
  font-size: 1.5rem;
}
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1.25rem;
}
.footer__legal a {
  margin-right: 1rem;
}
@media (min-width: 768px) {
  .footer__legal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.25rem;
  }
}

/* LIST RESET */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* LISTE MIT HÄCKCHEN */
.check li {
  position: relative;
  padding-left: 1.3em;
  margin-bottom: 0.5rem;
}
.check li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  font-size: 1em;
  left: 0;
  top: 0;
}

/* LISTE MIT MINUS */
.minus li {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
}
.minus li::before {
  content: "\f068";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  font-size: 25px;
  left: 0;
  top: -5px;
}

/* LISTE MIT PFEIL (z. B. Stellenangebote/Unternehmen) */
.arrow li {
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1.5rem;
}
.arrow li::before {
  content: "\f0da";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  font-size: 20px;
  left: 0;
  top: 0;
}
.arrow li:last-child {
  margin-bottom: 0;
}

/* SOZIALE MEDIEN LISTE */
.social {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  margin-bottom: 40px;
  height: 45px;
}
.social li a {
  color: #ffffff;
}
.social li a i {
  font-size: 40px;
}

/* =========================
   BILDER-DUO (2 Vollbreite-Bilder ohne Text, kein Gap zwischen den Bildern)
   Seitenübergreifende Komponente -- taucht identisch auf Home (Werkstattbilder,
   Figma Node 376:250/251, Mobil 439:332/333) und Unternehmen (Node 376:253/259)
   auf. Artikel einfach kopieren, nur die zwei <img>-Quellen tauschen.

   CF-Setup für diesen Artikel:
     - Zentriert (Container) Ja/Nein: NEIN
     - Blog Item Zusatzklasse: "bilder-duo"
     - Content Zusatzklasse: (leer)
   Zusätzlich im Artikel "Titel anzeigen" auf NEIN (kein Overlay-Text in Figma).

   Sitzt in beiden Vorkommen (Desktop UND Mobil) exakt flush zwischen den
   Nachbarblöcken -- 0 Abstand oben/unten laut Figma. Deshalb bewusst KEIN
   $block-padding-y wie bei anderen Blöcken.

   Mobil (Figma 439:332/333): Bilder werden GESTAPELT (nicht nebeneinander),
   ebenfalls ohne Gap -- ab md wieder nebeneinander (960/673-Seitenverhältnis
   entspricht mobil 370/259, praktisch identisches Ratio, ein aspect-ratio-Wert
   reicht für beide Breakpoints).

   WICHTIG zur Verschachtelung: Die "Blog Item Zusatzklasse" landet laut
   blog.php auf dem ÄUSSEREN ".blog-item"-Wrapper, die beiden __item-Divs aus
   dem JCE-Content liegen aber eine Ebene tiefer in ".item-content" (siehe
   blog_item.php). Der Flex-Container muss deshalb ".item-content" sein,
   nicht ".bilder-duo" selbst -- sonst ist ".item-content" der einzige
   Flex-Item und die beiden Bild-Divs bleiben normale, volle Blockelemente
   (genau das hat vorher zum Stapeln auf allen Breakpoints geführt).
   ========================= */
.bilder-duo > .item-content {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .bilder-duo > .item-content {
    flex-direction: row;
  }
}

.bilder-duo__item {
  aspect-ratio: 960/673;
  overflow: hidden;
}
.bilder-duo__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .bilder-duo__item {
    flex: 1 1 50%;
  }
}

/* =========================
   TITEL-BILD-OVERLAP (Headline ragt über das Bild darunter)
   Seitenübergreifendes Muster -- taucht identisch bei Ablauf (Unternehmen,
   Figma Node 76:159/160/161) und Leistungen auf. Wird ZUSÄTZLICH zur
   jeweiligen Block-eigenen BEM-Klasse auf den Titel/Bild-Wrapper gesetzt
   (Mehrfachklasse), kein eigenständiger Block-Wrapper:

     <div class="ablauf__media titel-bild-overlap">
       <h2 class="h1 ablauf__title titel-bild-overlap__title">TITEL</h2>
       <div class="ablauf__image titel-bild-overlap__image"><img ...></div>
     </div>

   NUR ab md aktiv -- mobil liegt der Titel normal ÜBER dem Bild (kein
   Overlap, Figma zeigt dort nur eine reguläre ~16-20px Lücke).

   WICHTIG: __title braucht zwingend z-index (Stack-Kontext), weil das
   Bild im DOM danach kommt und den Overlap-Bereich sonst unabhängig von
   der Overlap-Größe einfach übermalt -- das war der eigentliche Bug bei
   der ersten Ablauf-Umsetzung, nicht die Größe des Overlap-Werts.

   Overlap-Wert 58px ist Figmas Rohmaß (Vector-Messung, an allen 3 Ablauf-
   Items identisch bestätigt) -- im Browser rendert dieselbe Titelzeile
   durch Font-Metrik/Line-Height minimal anders, im Zweifel im Browser
   gegenprüfen und den Wert unten anpassen.
   ========================= */
.titel-bild-overlap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.titel-bild-overlap__title {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0 0 1rem;
  overflow-wrap: break-word;
}
.titel-bild-overlap__image {
  width: 100%;
}
.titel-bild-overlap__image img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .titel-bild-overlap__title {
    margin-bottom: -3.625rem;
  }
}

/* Startseite / Home SCSS */
/* =========================
   LEISTUNGSTEASER (Home-Slider)
   Ein Slide = eine Leistung (Kunststoff-Fenster, Haustüren, ...).
   Markup: .leistungsteaser__stage enthält alle Slides, JS schaltet per
   .is-active zwischen ihnen um. Ohne JS bleibt Slide 1 sichtbar.

   __left bündelt Titel + __body (Text/Checkliste/Button) im Markup.
   Mobil löst sich __left per display:contents komplett auf, sodass Titel
   und __body als eigenständige Grid-Bereiche frei platziert werden können
   (Titel vor dem Bild). Ab md wird __left zur echten Flex-Spalte, wodurch
   Titel+Body zusammen NUR EINE Grid-Zeile neben __visual belegen -- kein
   Aufspannen von __visual über zwei Zeilen mehr nötig. Genau das war der
   vorherige Bug: Spannte __visual zwei separat große Zeilen (Titel-Zeile,
   Body-Zeile), hat Grid bei einem hohen Bild automatisch zusätzlichen
   Platz in eine der beiden Zeilen gepresst -- sichtbar als Lücke zwischen
   Titel und Text. Mit nur einer Zeile kann das nicht mehr passieren.

   __image bekommt ein FIXES Seitenverhältnis (aspect-ratio), abgeleitet
   vom größten Produktbild der 7 Slides (Vorbau-Rollladen, Figma Node
   293:495, Bildbox 511x669px) -- dadurch ist die Zeilenhöhe für ALLE
   Slides identisch, unabhängig vom tatsächlichen Seitenverhältnis des
   einzelnen Produktfotos. Erst dadurch dürfen Nav (__visual) und
   Titel/Text/Button-Spalte (__left, Grid-Ebene) vertikal zentriert
   werden (align-items: center), ohne dass die Nav beim Slide-Wechsel
   springt -- vorher lief hier ein flex-start-Workaround, der das
   Symptom (Springen) vermied, aber nicht der Figma-Vorgabe (Nav mittig
   auf Höhe des größten Bilds) entsprach.

   Die Pfeil/Dot-Navigation sitzt in JEDEM Slide direkt neben dem Bild
   (nur der aktive Slide ist sichtbar) -- so lässt sie sich mobil exakt
   neben das Bild setzen statt über die volle Kartenhöhe zu laufen. Das JS
   hält alle Kopien synchron.
   ========================= */
.leistungsteaser {
  padding: 3rem 0;
  background-color: #f8f8f8;
}
.leistungsteaser__slide {
  display: none;
}
.leistungsteaser__slide.is-active {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "visual" "body";
  row-gap: 1.5rem;
}
.leistungsteaser__left {
  display: contents;
}
.leistungsteaser__title {
  grid-area: title;
  margin: 0;
  color: #004f91;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  font-size: 2.5rem;
}
.leistungsteaser__visual {
  grid-area: visual;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.leistungsteaser__image {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 511/669;
  overflow: hidden;
}
.leistungsteaser__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.leistungsteaser__nav {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.leistungsteaser__arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #004f91;
  border-radius: 50%;
  background: transparent;
  color: #004f91;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.leistungsteaser__arrow:hover, .leistungsteaser__arrow:focus-visible {
  background-color: #004f91;
  color: #ffffff;
}
.leistungsteaser__dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.leistungsteaser__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 79, 145, 0.25);
  cursor: pointer;
}
.leistungsteaser__dot.is-active {
  width: 10px;
  height: 10px;
  background-color: #004f91;
}
.leistungsteaser__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.leistungsteaser__text {
  margin: 0;
  color: #000000;
  font-size: 1.25rem;
  max-width: 55ch;
}
.leistungsteaser__check {
  margin: 0;
  color: #004f91;
  font-weight: 600;
  font-size: 1.25rem;
}
.leistungsteaser__check li::before {
  color: #004f91;
}
.leistungsteaser__btn {
  align-self: center;
  margin-top: 1.875rem;
}

@media (min-width: 768px) {
  .leistungsteaser__slide.is-active {
    grid-template-columns: 45% 1fr;
    grid-template-areas: "left visual";
    column-gap: 2.5rem;
    align-items: center;
  }
  .leistungsteaser__left {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    grid-area: left;
  }
  .leistungsteaser__title {
    text-align: left;
    font-size: clamp(2.5rem, 5.99vw, 7.1875rem);
    line-height: 0.913;
  }
  .leistungsteaser__btn {
    align-self: flex-start;
  }
  .leistungsteaser__check {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 2rem;
  }
  .leistungsteaser__check li {
    display: inline-flex;
    align-items: center;
    padding-left: 1.75rem;
    margin-bottom: 0;
  }
  .leistungsteaser__check li::before {
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
  }
}
/* =========================
   VERTRAUENSLEISTE
   3x Icon + Label direkt unter dem Leistungsteaser (Erfahrung im
   Handwerk / Zuverlässigkeit / Vertrauen). Mobil untereinander, ohne
   Versatz. Ab md in einer Reihe, zusätzlich Bootstrap-Äquivalent zu
   col-11 offset-1 (12-Spalten-Raster): die Reihe rückt um 1/12 nach
   rechts ein und ist entsprechend auf 11/12 Breite begrenzt, damit sie
   nicht über den Container hinausragt. Bis xxl unverändert, daher kein
   weiterer Breakpoint-Override nötig.
   ========================= */
.vertrauensleiste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.125rem;
  padding: 1rem 0 3rem;
}
.vertrauensleiste__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.vertrauensleiste__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #004f91;
  font-size: 3rem;
}
.vertrauensleiste__label {
  margin: 0;
  color: #000000;
  font-weight: 400;
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .vertrauensleiste {
    flex-direction: row;
    justify-content: space-around;
    gap: 4rem;
    padding: 90px 0 130px;
  }
}
/* =========================
   QUALITÄTSTEASER
   EINE volle Headline oben, direkt darunter 2 Spalten (Intro-Text +
   "Unsere Produktion" links, Rest-Intro + "Sicherheitskonzept"
   rechts) -- keine separate zentrierte Intro-Sektion oberhalb der
   Spalten.

   Die Spalten selbst sind KEIN eigenes Flex-Konstrukt, sondern
   Bootstrap-Grid (.row / .col-md, unitless -- teilt sich automatisch
   50/50 auf) -- das ist die Markup-Konvention,
   die der JCE-Editor beim Einfügen von Spalten im Bootstrap-Schema
   erzeugt. Mobil untereinander, ab md nebeneinander -- Stacking kommt
   von Bootstraps eigenem .row/.col-md-* Verhalten, kein eigener
   Breakpoint-Override nötig.

   WICHTIG -- Custom-Field-Setup für diesen Artikel (statt eigenem
   Wrapper/Breiten-Handling hier im SCSS):
     - Zentrierter Container (ja/nein): JA
       -> blog_item.php (Zeile 40-42) setzt dadurch die Klasse
       "container" direkt auf div.item-content, Bootstrap übernimmt
       Zentrierung + Breite.
     - Blog Item Zusatzklasse: "qualitaetsteaser"
       -> landet auf dem äußeren .blog-item-Wrapper (blog.php,
       $getBlogItemClass), AUSSERHALB von .item-content/.container.
       .qualitaetsteaser hier liefert nur noch Hintergrund/
       Textfarbe/vertikales Padding. Horizontales Padding kommt aus
       Bootstraps eigenem .container-Gutter, daher hier bewusst kein
       horizontales Padding mehr gesetzt (sonst doppelter Abstand).
   ========================= */
.qualitaetsteaser {
  padding: 4.375rem 0;
  background-color: #004f91;
  color: #ffffff;
}
.qualitaetsteaser__title {
  margin: 0 0 3rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  font-size: 2rem;
}
.qualitaetsteaser .col-md {
  margin-bottom: 0;
}
.qualitaetsteaser .col-md h3 {
  margin: 1.875rem 0 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.25rem;
}
@media (min-width: 768px) {
  .qualitaetsteaser .col-md h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
}
.qualitaetsteaser .col-md p {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}
.qualitaetsteaser .col-md p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .qualitaetsteaser {
    padding: 6rem 0;
  }
  .qualitaetsteaser__title {
    font-size: clamp(1.6rem, 2.5vw, 3rem);
    line-height: 1;
  }
}
/* =========================
   BERATUNGSTEASER
   Text links (Headline blau, Name schwarz, Button), Bild rechts --
   mobil untereinander (Bild folgt dem Text), ab md nebeneinander via
   Bootstrap .row/.col-md (JCE-Spalten-Konvention, kein eigenes
   Flex-Konstrukt -- siehe qualitaetsteaser__column-Kommentar oben).
   Vertikales Padding kommt aus $block-padding-y/-md (siehe
   _variables.scss: Hero/Beratungsteaser/Instagram-Teaser/
   Nachhaltigkeit-Teaser/Jobs-Teaser teilen sich denselben Rhythmus).

   CF-Setup für diesen Artikel:
     - Zentriert (Container) Ja/Nein: JA
     - Blog Item Zusatzklasse: "beratungsteaser"
       -> landet auf dem äußeren .blog-item-Wrapper, liefert hier nur
       das vertikale Block-Padding.

   ÜBERLAPPUNG (Figma Node 376:229 vs. 56:10): Das Foto ragt oben in den
   Qualitätsteaser hinein -- Bildoberkante liegt 158px VOR dem Ende des
   blauen Blocks. Ab md daher negativer margin-top auf __image (zieht
   das Bild in den vorherigen Block hinein) + z-index aus der
   bestehenden Skala ($z-image-overlay, _variables.scss), damit das
   Bild sauber über dem blauen Hintergrund liegt. Mobil kein Overlap
   (Figma-Mobil-Frame: Bild sitzt dort normal nach Titel/Text/Button,
   siehe Home Mobil y=3623 vs. Button-Ende y=3598).
   ========================= */
.beratungsteaser {
  padding: 1.5rem 0 0 0;
  text-align: center;
}
.beratungsteaser .row {
  align-items: center;
}
.beratungsteaser__title {
  margin: 0 0 1rem;
  color: #004f91;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  font-size: 2rem;
}
.beratungsteaser__text {
  margin: 0 0 2.5rem;
  color: #000000;
  font-size: 1.25rem;
}
.beratungsteaser__image {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .beratungsteaser {
    padding: 200px 0 0 0;
    text-align: left;
  }
  .beratungsteaser__title {
    font-size: clamp(1.6rem, 2.5vw, 3rem);
    line-height: 1;
  }
  .beratungsteaser__image {
    position: relative;
    z-index: 2;
    margin-top: -13.875rem;
  }
}
/* =========================
   INSTAGRAM-GALERIE
   "News von Instagram" -- Titel + Plugin-Feed ([ingallery id="1"]) +
   "Mehr Laden"-Button. Die Bildkacheln selbst kommen vollständig aus dem
   Instagram-Feed-Plugin (siehe CLAUDE.md "Instagram-Feed-Plugin
   (Block-Wrapper-Überlappung)") -- hier wird NUR der Wrapper drumherum
   gestylt, nicht die Plugin-Ausgabe selbst. Plugin-eigenes Markup/Klassen
   sind bis zum ersten Live-Rendering unbekannt, daher bewusst KEIN
   Grid/Spacing auf Kind-Selektoren von __feed.

   CF-Setup für diesen Artikel:
     - Zentriert (Container) Ja/Nein: JA
     - Blog Item Zusatzklasse: "instagram-galerie"
     - Content Zusatzklasse: (leer)

   "MEHR LADEN"-BUTTON: kommt vom Plugin selbst (.ingallery-loadmore /
   .ingallery-loadmore-btn, live verifiziert 10.07.2026 -- Plugin blendet
   ihn per JS ein, sobald weitere Bilder verfügbar sind). Der früher
   vorgesehene eigene __more-Button ist ersatzlos entfallen; stattdessen
   wird der Plugin-Button unten auf .btn-pill-Optik gebracht.

   ÜBERLAPPUNG (Figma Node 33:98 Hintergrundband vs. 56:13/14/15
   Bildkacheln): Das graue Band endet mitten in den Kacheln, Kacheln +
   Button ragen unten aufs Weiß heraus. Umgesetzt nach dem JOBS-TEASER-
   MUSTER (nur umgekehrt): dieser Block bleibt komplett in normalem
   Fluss -- KEINE negative Margin im Inneren. Die frühere Lösung
   (margin-bottom:-246px auf __feed) konnte das Design strukturell nicht
   erzeugen: sie zog den Folgeblock in die Kacheln hinein, während das
   Band (= Hintergrund dieses Blog-Items) weiterhin bis unter den
   Plugin-Button reichte (QA/Screenshot 10.07.2026). Stattdessen zieht
   sich .nachhaltigkeit-teaser (weißer Hintergrund, siehe unten) per
   negativem margin-top ÜBER das untere Bandende; __feed liegt mit
   $z-block-overlap darüber, sodass Kacheln + Button auf dem Weiß stehen.

   Die Hochzieh-Beträge sind pro Breakpoint FIXE rem-Werte, bewusst NICHT
   prozentual (anders als Jobs-Teaser/Bildstreifen, die vollbreit laufen
   und daher 1:1 mit dem Viewport skalieren): die Kachelhöhe hängt hier
   an der pro Breakpoint fixen Bootstrap-Containerbreite -- Prozentwerte
   des Viewports würden innerhalb eines Breakpoint-Bereichs driften.
   Herleitung je Breakpoint: Kachelhang (42.1% der Kachelhöhe, Figma
   246/584) + Buttonzeile (80px Abstand + ~44px Button), Kachelhöhe =
   137.7% von (Containerbreite - Gutter) / 3. Werte im Browser
   feinjustierbar -- Startwerte siehe .nachhaltigkeit-teaser unten.

   Mobil (<md) vorerst OHNE Overlap: Figma-Mobil (Node 439:258/259)
   zeigt zwar auch mobil einen Overlap, aber Spaltenzahl/Kachelhöhe des
   Plugins auf Mobil sind noch nicht am Gerät gesichtet.
   ========================= */
.instagram-galerie {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #ededed;
}
.instagram-galerie__title {
  margin: 0 0 2rem;
  color: #004f91;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  font-size: clamp(1.6rem, 2.5vw, 3rem);
}
.instagram-galerie__title .fa-instagram {
  margin-left: 0.25em;
}
.instagram-galerie__feed {
  position: relative;
  z-index: 5;
}
.instagram-galerie .ingallery-loadmore {
  padding: 5rem 0 0;
}
@media (min-width: 768px) {
  .instagram-galerie {
    padding-top: 200px;
    padding-bottom: 0;
  }
}
/* =========================
   NACHHALTIGKEIT-TEASER (Text + CTA)
   Zweizeilige Headline ("Nachhaltigkeit &" / "Umweltschutz", bewusster
   Zeilenumbruch laut Figma, nicht nur Wrap-Zufall), zweizeiliger
   Fließtext, 2 Buttons nebeneinander (beide Primärblau, keine
   Sekundärvariante -- Figma Node 56:49/317:242 sind identisch gestylt).
   Titel läuft in der H1-Skala (115px), bleibt aber semantisch <h2>
   (SEO-Hierarchie, siehe CLAUDE.md) -- exakt dasselbe Muster wie
   .leistungsteaser__title weiter oben.

   CF-Setup für diesen Artikel (EIN gemeinsamer Artikel für Text+CTA UND
   Bildstreifen, siehe unten):
     - Zentriert (Container) Ja/Nein: NEIN
     - Blog Item Zusatzklasse: "nachhaltigkeit-teaser"
     - Content Zusatzklasse: (leer)

   Text+CTA und Bildstreifen brauchen unterschiedliche Breiten (Text
   zentriert/schmal, Bildstreifen vollbreit) -- statt zweier Artikel mit
   je eigenem Container-CF-Wert steckt der Text-Teil manuell in einem
   selbst gesetzten <div class="container"> im JCE-Content, während das
   CF-Feld "Zentriert" auf der Artikel-Ebene auf NEIN bleibt. Dadurch
   bleibt .bildstreifen (Geschwister-Div danach, kein Container) vollbreit,
   ohne dass der Text sein eigenes CF-Level braucht.
   ========================= */
.nachhaltigkeit-teaser {
  padding-top: 3rem;
  background-color: #ffffff;
}
.nachhaltigkeit-teaser__title {
  margin: 0 0 1.875rem;
  color: #004f91;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(3rem, 5.99vw, 7.1875rem);
  line-height: 0.913;
}
@media (min-width: 768px) {
  .nachhaltigkeit-teaser__title {
    margin-bottom: 5rem;
  }
}
.nachhaltigkeit-teaser__text {
  margin: 0 0 3.125rem;
  color: #000000;
  font-size: 1.25rem;
}
.nachhaltigkeit-teaser__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.875rem;
}

@media (min-width: 768px) {
  .nachhaltigkeit-teaser {
    margin-top: -15.5rem;
    padding-top: calc(15.5rem + 200px);
  }
}
@media (min-width: 992px) {
  .nachhaltigkeit-teaser {
    margin-top: -18.5rem;
    padding-top: calc(18.5rem + 200px);
  }
}
@media (min-width: 1200px) {
  .nachhaltigkeit-teaser {
    margin-top: -20.625rem;
    padding-top: calc(20.625rem + 200px);
  }
}
@media (min-width: 1400px) {
  .nachhaltigkeit-teaser {
    margin-top: -22.75rem;
    padding-top: calc(22.75rem + 200px);
  }
}
/* =========================
   BILDSTREIFEN (Pfeil-/Chevron-Bildkette)
   3 Bilder, ALLE mit identischer Form (Pfeilspitze rechts, Schwalbenschwanz-
   Kerbe links) -- Figma-verifiziert per Pixel-Analyse (Alpha-Kanal-Scan,
   contentsOnly-Export) der Vektor-Knoten 56:60/61/62: alle drei Bilder
   nutzen exakt dasselbe 8-Punkt-Polygon, KEINE gespiegelte/flache Variante
   für erstes oder letztes Element (ursprüngliche Annahme war falsch --
   siehe unten). Dadurch zeigt auch das erste Bild links eine Kerbe und
   das letzte Bild rechts eine freistehende Spitze -- die dabei sichtbaren
   Hintergrund-Zwipfel ("Abstand") sind Figma-Originaldesign, kein Bug.

   Polygon-Punkte (Prozent der eigenen Box, im Uhrzeigersinn ab der
   oberen Spitze): 75.36% 0 -> 100% 50% (rechte Pfeilspitze) -> 75.36% 100%
   -> 75.36% 82.37% (senkrechte Kante zurück nach oben) -> 0% 82.37%
   (waagerechte Stufe nach links) -> 15.89% 50% (Kerben-Spitze) -> 0% 17.63%
   -> 75.36% 17.63% (waagerechte Stufe zurück) -> schließt zur oberen Spitze.

   Überlappung: x-Versatz der Bilder in Figma 617px statt 686px eigener
   Breite = 69px/686px = 10.06% der EIGENEN Bildbreite (nicht 10% glatt).
   margin-left bezieht sich laut CSS-Spec auf die Breite des Containing
   Block (hier: die volle Blockbreite, nicht die eigene Item-Breite) --
   -3.593% davon entspricht bei 1920px Blockbreite exakt 69px, unabhängig
   von der durch flex:1 1 0 tatsächlich gerenderten Item-Breite.

   Generischer Name (nicht "home-bildstreifen"): Dasselbe Element taucht
   laut Analyse auch auf der künftigen Nachhaltigkeit-Seite auf (dort im
   PDF ebenfalls unterhalb der 3-Spalten-Textsektion) -- bewusst
   wiederverwendbar gehalten, auch wenn die Datei aktuell noch in
   _home.scss liegt (Auslagerung in ein eigenes Partial erst, wenn der
   Nachhaltigkeit-Seiten-Block ansteht).

   Sitzt im selben Artikel wie .nachhaltigkeit-teaser (siehe oben), als
   Geschwister-Div NACH dem manuell gesetzten <div class="container">,
   direkt in item-content -- dadurch automatisch vollbreit, da CF
   Zentriert für den ganzen Artikel auf NEIN steht.
   ========================= */
.bildstreifen {
  display: flex;
  margin-top: clamp(3.05rem, 6.3541666667vw, 7.625rem);
}
.bildstreifen__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 686/502;
  overflow: hidden;
  clip-path: polygon(75.36% 0%, 100% 50%, 75.36% 100%, 75.36% 82.37%, 0% 82.37%, 15.89% 50%, 0% 17.63%, 75.36% 17.63%);
}
.bildstreifen__item:not(:first-child) {
  margin-left: -3.593%;
  z-index: 2;
}
.bildstreifen__item:nth-child(3) {
  z-index: calc(2 + 1);
}
.bildstreifen__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   JOBS-TEASER (CTA "Wir haben offene Stellen")
   Eigener Artikel direkt nach Nachhaltigkeit-Teaser/Bildstreifen. Zentrierte
   Headline (H2-Skala) + Fließtext + ein einzelner .btn-pill, Hintergrund
   $color-surface über die volle Blockbreite (Figma Node 56:69).

   CF-Setup für diesen Artikel:
     - Zentriert (Container) Ja/Nein: JA
     - Blog Item Zusatzklasse: "jobs-teaser"
     - Content Zusatzklasse: (leer)

   ÜBERLAPPUNG (Figma Node 56:69 vs. Bildstreifen 56:60-62): Das graue
   Jobs-Rechteck beginnt bereits VOR dem Ende des Bildstreifens -- der
   Bildstreifen ragt also unten in den Jobs-Block hinein, sichtbar wird
   das graue Jobs-Grau durch die Kerbe/Zwickel der Pfeilbilder hindurch.
   Bei Figma-Referenzbreite (1920px) beginnt das Jobs-Rechteck exakt auf
   halber Bildstreifen-Höhe (5232px = 4981px Bildstreifen-Start + 251px,
   251px = 502px/2) -- die Pfeilspitze jedes Items sitzt bei genau 50%
   der Item-Höhe (siehe .bildstreifen__item clip-path oben), das graue
   Schimmern endet an der Spitze also GENAU dort, wo die Bildstreifen-
   Höhe halbiert wird.

   Damit das bei JEDER Breite (inkl. Mobile, kein Breakpoint-Unterschied
   mehr) exakt an der Pfeilspitze endet -- nicht nur bei 1920px --, darf
   der Overlap NICHT als fixer px-/rem-Wert stehen (Bildstreifen-Höhe
   skaliert über aspect-ratio mit der Blockbreite mit, ein fixer Wert
   würde bei jeder anderen Breite daneben liegen). Stattdessen als
   Prozentwert der Blockbreite (margin-top/padding-top-Prozente beziehen
   sich laut CSS-Spec auf die Breite des Containing Block, nicht dessen
   Höhe -- dieselbe Technik wie beim Bildstreifen-margin-left oben):
   rechnerisch Item-Breite (1/3 Blockbreite) × aspect-ratio (502/686) ÷ 2
   = 502/4116 = 12.196% der Blockbreite. Im Browser am Live-Ergebnis auf
   **13%** feinjustiert (deckt die minimale Differenz ab, die die
   flex:1 1 0-Verteilung + negative margin-left-Überlappung der Items
   gegenüber der reinen Rechnung erzeugt) -- 13% ist der visuell
   bestätigte, exakt an der Spitze endende Wert.

   KEIN eigener z-index nötig: die .bildstreifen__item-Elemente sind
   bereits position:relative (siehe oben) und liegen dadurch im
   Stacking automatisch über diesem normalen, unpositionierten
   Blockinhalt -- unabhängig von der DOM-Reihenfolge.
   ========================= */
.jobs-teaser {
  margin-top: -13%;
  padding-top: calc(13% + 6.25rem);
  padding-bottom: 3rem;
  background-color: #ededed;
  text-align: center;
}
.jobs-teaser__title {
  margin: 0 0 1.5rem;
  color: #004f91;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  font-size: 2rem;
}
.jobs-teaser__text {
  margin: 0;
  color: #000000;
  font-size: 1.25rem;
}
.jobs-teaser__btn {
  margin-top: 3.4375rem;
}

@media (min-width: 768px) {
  .jobs-teaser {
    padding-bottom: clamp(3rem, 5.2083333333vw, 6.25rem);
  }
  .jobs-teaser__title {
    font-size: clamp(1.6rem, 2.5vw, 3rem);
    line-height: 1;
  }
}
/* Unternehmen-Seite */
/* =========================
   ZEITSTRAHL ("Unsere Geschichte")
   Zickzack-Timeline mit 6 Meilensteinen (1971/1980/2008/2014/2015/Heute),
   abwechselnd über/unter einer durchgehenden Grundlinie (Figma Node 439:463).
   Titel+Intro-Text 2-spaltig darüber (Figma Node 72:100/72:101).

   CF-Setup für diesen Artikel:
     - Zentriert (Container) Ja/Nein: NEIN (Zickzack-Grafik läuft vollbreit,
       Titel+Text werden dafür manuell in ein <div class="container"> im
       JCE-Content gepackt -- analog zum Nachhaltigkeit-Teaser auf Home)
     - Blog Item Zusatzklasse: "zeitstrahl"
     - Content Zusatzklasse: (leer)
     - Titel anzeigen: NEIN (Titel steckt als <h2 class="h1"> im Content,
       damit die SEO-H-Hierarchie eingehalten wird -- H1 bleibt dem
       Hero-Modul vorbehalten, hier nur optisch H1-Skala über .h1)

   MOBIL (Figma Node 439:344/439:479): dieselbe Zickzack-Struktur, aber
   955px "breit" in einem 370px-Frame -- der Track ist bewusst breiter als
   der Viewport und wird horizontal gescrollt/geswiped (Sliderfunktion).
   Pfeil + Dot-Pagination (Figma Node 439:492) steuern das zusätzlich zum
   nativen Touch-Swipe. Ab md wird der Track exakt containerbreit (kein
   Scroll mehr nötig), Pfeil/Dots werden ausgeblendet.

   TECHNIK: CSS Grid mit 3 Zeilen (oben / Grundlinie / unten). Jedes Item
   spannt entweder Zeile 1+2 ("--up", Content wächst von der Grundlinie
   nach oben) oder Zeile 2+3 ("--down", Content wächst nach unten) --
   dadurch bleiben alle 6 Punkte exakt auf der Grundlinie ausgerichtet,
   UNABHÄNGIG davon, wie viele Zeilen der jeweilige Beschreibungstext
   braucht (z. B. "Heute" mit 4 Zeilen vs. "1980" mit 2 Zeilen). Zeile 1/3
   sind "auto" und wachsen automatisch mit dem jeweils längsten Content in
   dieser Zeile, Zeile 2 ist fix auf Dot-Höhe (2rem) -- so liegen die Dots
   beider Richtungen im selben schmalen Band und bleiben optisch auf einer
   Linie, unabhängig von Zeilenumbrüchen bei schmaler Spaltenbreite (z. B.
   Container md=720px / 6 Spalten = sehr wenig Platz je Eintrag).

   Dot/Text-Versatz (Figma: Text startet leicht rechts neben dem Dot statt
   direkt darüber zentriert) bewusst vereinfacht auf "Dot + Text linksbündig
   übereinander" -- gängiges, klareres Zeitstrahl-Muster, ohne den
   zusätzlichen horizontalen Versatz 1:1 nachzubauen.

   Dot-Anzahl der mobilen Pagination (6, ein Dot je Meilenstein) ist eine
   sinnvolle Annahme -- die winzige Figma-Vorschau (Node 439:492) ließ nicht
   zweifelsfrei erkennen, ob dort wirklich 6 oder weniger (gruppierte)
   Dots vorgesehen sind. Im Browser gegenprüfen.
   ========================= */
.zeitstrahl {
  background-color: #ededed;
  padding: 3rem 0;
}
.zeitstrahl__title {
  margin: 0;
  color: #004f91;
}
.zeitstrahl__intro {
  margin: 0;
  color: #000000;
  font-size: 1.25rem;
}
.zeitstrahl__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 9.375rem);
  grid-template-rows: auto 2rem auto;
  column-gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: 3.125rem;
  padding-left: 1rem;
  padding-right: calc(100% - 9.375rem);
  scrollbar-width: none;
}
.zeitstrahl__track::-webkit-scrollbar {
  display: none;
}
.zeitstrahl__baseline {
  grid-column: 1/-1;
  grid-row: 2;
  align-self: center;
  height: 3px;
  background-color: #004f91;
}
.zeitstrahl__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
}
.zeitstrahl__item--up {
  grid-row: 1/3;
  justify-content: flex-end;
}
.zeitstrahl__item--down {
  grid-row: 2/4;
  justify-content: flex-start;
}
.zeitstrahl__item:nth-of-type(1) {
  grid-column: 1;
}
.zeitstrahl__item:nth-of-type(2) {
  grid-column: 2;
}
.zeitstrahl__item:nth-of-type(3) {
  grid-column: 3;
}
.zeitstrahl__item:nth-of-type(4) {
  grid-column: 4;
}
.zeitstrahl__item:nth-of-type(5) {
  grid-column: 5;
}
.zeitstrahl__item:nth-of-type(6) {
  grid-column: 6;
}
.zeitstrahl__dot {
  align-self: flex-start;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #004f91;
}
.zeitstrahl__item--up::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 1rem;
  transform: translateX(-50%);
  width: 2px;
  background-color: #004f91;
}
.zeitstrahl__item--down::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1rem;
  bottom: 0;
  transform: translateX(-50%);
  width: 2px;
  background-color: #004f91;
}
.zeitstrahl__item--up .zeitstrahl__content {
  margin-bottom: 1rem;
}
.zeitstrahl__item--down .zeitstrahl__content {
  margin-top: 1rem;
}
.zeitstrahl__content {
  margin-left: 2rem;
}
.zeitstrahl__year {
  display: block;
  color: #004f91;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.5vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
}
.zeitstrahl__desc {
  margin: 0.5rem 0 0;
  color: #000000;
  font-size: 1.25rem;
  line-height: 1.2;
}
.zeitstrahl__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.zeitstrahl__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.zeitstrahl__dot-nav {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 79, 145, 0.25);
  cursor: pointer;
}
.zeitstrahl__dot-nav.is-active {
  width: 10px;
  height: 10px;
  background-color: #004f91;
}
.zeitstrahl__arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #004f91;
  border-radius: 50%;
  background: transparent;
  color: #004f91;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.zeitstrahl__arrow:hover, .zeitstrahl__arrow:focus-visible {
  background-color: #004f91;
  color: #ffffff;
}
@media (min-width: 768px) {
  .zeitstrahl {
    padding: 200px 0;
  }
  .zeitstrahl__track {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 1rem;
    overflow-x: visible;
    scroll-snap-type: none;
    margin-top: clamp(3.875rem, 8.0729166667vw, 9.6875rem);
    padding-left: 15vw;
    padding-right: 0;
  }
  .zeitstrahl__baseline {
    margin-left: -15vw;
  }
  .zeitstrahl__controls {
    display: none;
  }
}

/* =========================
   ABLAUF (Beratung -> Produktion -> Montage)
   1 Artikel, 3 Zeilen (jede Zeile = ein Prozessschritt), abwechselnd
   Bild/Titel links/rechts (Figma-Desktop Node 76:159/160/161: Item 1
   links, Item 2 gespiegelt rechts, Item 3 wieder links).

   CF-Setup für diesen Artikel:
     - Zentriert (Container) Ja/Nein: JA (Desktop-Frame ist 1208px breit,
       kein Full-Bleed wie beim Zeitstrahl)
     - Blog Item Zusatzklasse: "ablauf"
     - Content Zusatzklasse: (leer)
     - Titel anzeigen: NEIN (jede Zeile hat ihre eigene <h2 class="h1"> im
       Content, kein gemeinsamer Artikel-Titel nötig)

   LÜCKE IM MOBILE-FIGMA (Node 439:344): Item 1 "Beratung" ist mobil
   vollständig ausmodelliert (Titel + Foto + Zahl + Text + Button). Item 2
   "Produktion" hat im Frame nur noch Zahl + Text + Button -- Titel und Foto
   fehlen. Item 3 "Montage" fehlt mobil komplett (nur ein verwaistes Vector-
   Element weit außerhalb der Frame-Grenzen, vermutlich Design-Reste). Für
   Item 2+3 hier daher das Item-1-Muster (Titel+Foto+Zahl+Text+Button,
   alternierende Zahl-Seite wie Desktop) konsistent fortgesetzt -- im
   Browser/mit dem Kunden gegenprüfen, sobald Figma vervollständigt ist.

   Alle 3 Items einzeln in Figma geprüft (Node 76:159/160/161, jeweils mit
   Screenshot, nicht nur Item 1 stellvertretend genommen):
     - Titel ragt bei ALLEN 3 Items konsistent 58px über das Bild (Titel-
       Box endet 58px nach Bild-Start) -> nur Desktop, mobil kein Overlap
       (Figma: nur ~16px Lücke). Damit der Overlap den Titeltext nicht
       verdeckt, braucht der Titel zwingend einen höheren Stack-Kontext
       als das Bild (z-index) -- das Bild kommt im DOM NACH dem Titel und
       würde ihn sonst unabhängig vom Overlap-Wert einfach übermalen. Das
       war der eigentliche Bug in der vorherigen Fassung, nicht die Größe
       des Overlaps.
     - Zahl sitzt bei ALLEN 3 Items VERTIKAL ZENTRIERT auf dem Text+Button-
       Block (nicht an einem festen Top-Offset verankert): Item 1 ragt
       ~115px über Textanfang / ~115px unter Buttonende, Item 2 ~117px /
       ~118px, Item 3 ~128px / ~131px -- über alle 3 Items hinweg nahezu
       symmetrisch. Deshalb hier per top:50%/translateY(-50%) auf den
       Text+Button-Block zentriert statt mit einem fixen Top-Wert, der nur
       für eine bestimmte Textlänge stimmen würde.
     - Zahl sitzt horizontal auf der bild-zugewandten Seite (Item 1/3
       links, Item 2 rechts), Text/Button rücken zur Außenseite ein.
   NICHT exakt aus Figma übertragbar (dort Bild-Assets, hier echtes
   Zeichen): Breite/Höhe der Zahl-Glyphe hängt vom Font-Rendering ab, das
   ich ohne Browser-Zugriff nicht messen kann. Der Einzug von Text/Button
   ist deshalb bewusst kleiner angesetzt als Figmas 112px/104px, damit
   Text und Zahl sich sicher überlappen (Figma: Text beginnt bereits
   innerhalb der Zahl) -- ein zu großer Einzug hätte sonst je nach realer
   Glyphenbreite gar keine Überlappung mehr erzeugt. Bitte im Browser
   gegenprüfen und Einzug/Font-Size bei Bedarf nachjustieren.
   ========================= */
.ablauf__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 0;
}
.ablauf__title {
  color: #004f91;
}
.ablauf__content {
  position: relative;
  margin-top: 4rem;
}
.ablauf__content:last-child {
  margin-bottom: 2rem;
}
.ablauf__number {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 0;
  display: block;
  margin: 0;
  user-select: none;
  width: auto;
  height: 15rem;
  display: block;
  width: auto;
  height: 15rem;
}
.ablauf__text {
  position: relative;
  z-index: 1;
  margin: 0 0 1.5rem 3.5rem;
  max-width: 20rem;
  color: #000000;
  font-size: 1.25rem;
  line-height: 1.3;
}
.ablauf__cta {
  position: relative;
  z-index: 1;
  margin-left: 3.5rem;
}
.ablauf__item:nth-child(even) .ablauf__number {
  left: auto;
  right: 0;
}
.ablauf__item:nth-child(even) .ablauf__text {
  margin-left: 0;
  margin-right: 3.5rem;
}
.ablauf__item:nth-child(even) .ablauf__cta {
  margin-left: 0;
  margin-right: 3.5rem;
}
@media (min-width: 768px) {
  .ablauf__item {
    flex-direction: row;
    align-items: center;
    gap: 5.8125rem;
    padding: 4rem 0;
  }
  .ablauf__item:nth-child(even) {
    flex-direction: row-reverse;
  }
  .ablauf__media {
    flex: 0 0 45%;
  }
  .ablauf__content {
    flex: 1 1 auto;
    margin-top: 0;
  }
  .ablauf__number {
    height: 26.5rem;
  }
  .ablauf__text {
    margin: 0 0 3.125rem 4.5rem;
    max-width: 26.5rem;
  }
  .ablauf__cta {
    margin-left: 4.5rem;
  }
  .ablauf__item:nth-child(even) .ablauf__text {
    margin-left: 0;
    margin-right: 4.5rem;
  }
  .ablauf__item:nth-child(even) .ablauf__cta {
    margin-left: 0;
    margin-right: 4.5rem;
  }
  .ablauf__item:nth-child(even) .ablauf__number {
    right: 3rem;
  }
}

/* =========================
   STELLENANGEBOTE (Unternehmen)
   Zweigeteilter Block: oben blaue Vollbreite-Flaeche mit Headline +
   hervorgehobenem Job "Glaser" + Bewerben-CTA (2-spaltig ueber JCE-
   Bootstrap-Spalten, siehe CLAUDE.md), unten weisser Bereich mit 3
   weiteren, kompakten Job-Karten (ebenfalls 2-spaltig). Alles ein
   gemeinsamer Artikel (Figma Node 67:8, Bereich y=4334-6029).

   CF-Setup fuer diesen Artikel:
     - Zentriert (Container) Ja/Nein: NEIN (blaue Flaeche laeuft
       vollbreit, Text sitzt dafuer manuell in je einem
       <div class="container"> im JCE-Content -- analog zu
       Zeitstrahl/Nachhaltigkeit-Teaser)
     - Blog Item Zusatzklasse: "stellenangebote"
     - Content Zusatzklasse: (leer)
     - Titel anzeigen: NEIN (Blockheadline steckt als <h2 class="h1"> im
       Content, H1 bleibt dem Hero-Modul vorbehalten)

   JCE-Content-Struktur (vollstaendiges copy-paste-HTML im Chat):
   .stellenangebote__intro > .container > h2.h1 + h3.h2 (Jobtitel) + p
   (Datum) linksbuendig/vollbreit gestapelt, danach 3x .row.flex-gap-lg/
   col-md (Zeile 1: Beschreibung links/rechts, Zeile 2: Liste
   links/rechts, Zeile 3: "Jetzt bewerben!"+Subtext links, Kontakt
   rechts -- auf Kundenwunsch in 3 echte 2-Spalten-Zeilen aufgeteilt,
   Figma hatte das urspruenglich als 2 Spalten mit jeweils allem
   gestapelt, s. Kommentar unten). Danach .stellenangebote__jobs >
   .container > 2x .row.flex-gap-lg/col-md (3 weitere Jobs, 4. Zelle
   bewusst leer -- Figma zeigt dort keinen Inhalt, die zwei
   Werkstattbilder darunter sind ein eigener, spaeterer Block, keine
   Zelle dieses Grids).

   NOCH KEIN MOBILE-FIGMA fuer diesen Block: Das mobile Unternehmen-
   Frame (Node 439:344, Gesamthoehe 2338px) deckt nur Zeitstrahl+Ablauf
   ab, die Stellenangebote-Sektion ist dort nicht modelliert. Mobil
   faellt der Block daher auf den normalen Bootstrap-Spaltenumbruch
   zurueck (.col-md wird unter md automatisch vollbreit gestapelt) -- im
   Browser/mit dem Kunden gegenpruefen, sobald ein Mobile-Frame
   existiert.

   Alle Abstaende Figma-verifiziert (Node 67:8): Flaeche-Anfang ->
   Headline 150px, Headline -> Job-Titel 73px, Job-Titel -> Meta 19px,
   Meta -> Text 30px, Text -> Liste 46px, Listenpunkte je 24px Abstand,
   Job-Titel -> Text (weisser Bereich) 30px, Flaeche-Ende -> erste
   weisse Job-Karte 80px, Zeile 1 -> Zeile 2 (weisser Bereich) 100px.
   NICHT zweifelsfrei aus den rohen Koordinaten ablesbar: der Abstand
   "letzte Bullet -> CTA-Headline 'Jetzt bewerben!'" -- die Bounding-Box
   der Headline (Node 348:254) ueberlappt rechnerisch mit der Subzeile
   darunter (Node 348:264), vermutlich weil Figma bei 2-zeiligem Text
   die volle Zeilenhoehe inkl. Unterlaenge einrechnet. 124px hier als
   Naeherung aus dem Abstand zur letzten Bullet-Zeile uebernommen, bitte
   im Browser gegenpruefen.
   ========================= */
.stellenangebote__intro {
  padding: clamp(3.75rem, 7.8125vw, 9.375rem) 0 clamp(3rem, 6.25vw, 7.5rem);
  background-color: #004f91;
  color: #ffffff;
}
.stellenangebote__title {
  margin: 0 0 4.5625rem;
}
.stellenangebote__job-title {
  margin: 0 0 1.875rem;
}
.stellenangebote__job-title .job-suffix {
  font-size: 2rem;
  font-weight: 400;
}
.stellenangebote__meta {
  margin: 0 0 1.1875rem;
  font-weight: 600;
  font-size: 1.25rem;
}
.stellenangebote__grid {
  margin-top: 1.875rem;
}
.stellenangebote__desc {
  margin: 0 0 2.875rem;
}
.stellenangebote__cta-row {
  margin-top: clamp(3.1rem, 6.4583333333vw, 7.75rem);
}
.stellenangebote__cta-heading {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 5.21vw, 6.25rem);
  line-height: 0.913;
  text-transform: uppercase;
}
.stellenangebote__cta-sub {
  margin: 1rem 0 0;
}
.stellenangebote__contact {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.5vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
}
.stellenangebote__contact a {
  color: inherit;
  text-decoration: none;
}
.stellenangebote__contact a:hover,
.stellenangebote__contact a:focus-visible {
  text-decoration: underline;
}
.stellenangebote__jobs {
  padding: 5rem 0 clamp(3rem, 5.2083333333vw, 6.25rem);
  color: #004f91;
}
.stellenangebote__jobs .mt-jobs {
  margin-top: clamp(3rem, 5.2083333333vw, 6.25rem);
}
@media (max-width: 768px) {
  .stellenangebote__title {
    margin-bottom: 2rem;
  }
  .stellenangebote__job-title {
    margin-bottom: 1rem;
  }
  .stellenangebote__meta {
    margin-bottom: 0.75rem;
  }
  .stellenangebote__grid {
    margin-top: 1rem;
  }
  .stellenangebote__grid .col-md:not(:last-child) .stellenangebote__desc {
    margin-bottom: 0;
  }
  .stellenangebote__desc {
    margin-bottom: 1.5rem;
  }
}

/* Nachhaltigkeit-Seite */
/* =========================
   NACHHALTIGKEIT & UMWELTSCHUTZ (Intro-Text + 3 Spalten + Bildstreifen)
   EIN gemeinsamer Artikel, analog zum "Nachhaltigkeit-Teaser" auf Home
   (siehe _home.scss) -- Titel+Intro nebeneinander (Figma Node 133:98/99),
   darunter 3-spaltiger Text (Node 133:139-148), danach .bildstreifen
   (wiederverwendet aus _home.scss, identische Maße Figma-verifiziert:
   686x502px je Item, Node 269:24 vs. Home Node 56:47).

   CF-Setup für diesen Artikel:
     - Zentriert (Container) Ja/Nein: NEIN (Bildstreifen muss vollbreit
       laufen können -- Titel/Intro/3-Spalten-Text dafür manuell in
       <div class="container"> im JCE-Content, analog Home-Nachhaltigkeit-
       Teaser/Unternehmen-Zeitstrahl)
     - Blog Item Zusatzklasse: "nachhaltigkeit-seite"
     - Content Zusatzklasse: (leer)
     - Titel anzeigen: NEIN (Titel steckt als <h2 class="nachhaltigkeit-seite__title">
       im Content -- H1 bleibt dem Hero-Modul vorbehalten, analog Zeitstrahl)

   ÜBERLAPPUNG (Figma Node 269:24 vs. Footer-Start, Screenshot-verifiziert):
   Der Bildstreifen ragt exakt 251px (= halbe Item-Höhe, dieselbe Geometrie
   wie .jobs-teaser auf Home, siehe dortiger Kommentar in _home.scss) in
   den nachfolgenden FOOTER hinein. Gelöst NICHT hier, sondern auf der
   Footer-Seite selbst über die Menüpunkt-Klasse "footer.nachhaltigkeit"
   (siehe _footer.scss) -- jeder Menüpunkt liefert index.php seine eigene,
   kleingeschriebene Klasse (pageclass_sfx) auf das <footer>-Element, damit
   bleibt dieser Block hier unverändert wiederverwendbar für andere Seiten.
   ========================= */
.nachhaltigkeit-seite {
  padding-top: clamp(5rem, 10.4166666667vw, 12.5rem);
  padding-bottom: 0;
  background-color: #ededed;
}
.nachhaltigkeit-seite__title {
  margin: 0;
  color: #004f91;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 2.5rem;
  line-height: 1;
}
@media (min-width: 768px) {
  .nachhaltigkeit-seite__title {
    font-size: 90px;
    line-height: 0.913;
  }
}
.nachhaltigkeit-seite__intro {
  margin: 1.5rem 0 0;
  color: #000000;
  font-size: 1.25rem;
}
@media (min-width: 768px) {
  .nachhaltigkeit-seite__intro {
    margin-top: 0;
  }
}
.nachhaltigkeit-seite__row {
  display: flex;
  flex-wrap: wrap;
  gap: 3.125rem 3rem;
  margin-top: clamp(3.75rem, 7.8125vw, 9.375rem);
}
.nachhaltigkeit-seite__col {
  flex: 1 1 0;
  min-width: 240px;
}
.nachhaltigkeit-seite__col-title {
  margin: 0 0 1.875rem;
  color: #004f91;
  font-weight: 600;
  font-size: 2rem;
}
@media (min-width: 768px) {
  .nachhaltigkeit-seite__col-title {
    margin-bottom: 3.125rem;
  }
}
.nachhaltigkeit-seite__col-text {
  margin: 0;
  color: #000000;
  font-size: 1.25rem;
}
.nachhaltigkeit-seite .bildstreifen {
  margin-top: clamp(3.75rem, 7.8125vw, 9.375rem);
}

@media (min-width: 768px) {
  .nachhaltigkeit-seite__row {
    flex-wrap: nowrap;
  }
}
/* Leistungen-Seite */
/* Einleitung: grauer Hintergrund, 2 Spalten (Headline links, Text+Button
   rechts) -- Figma Node 125:183, alles über bestehende Klassen (.h1,
   .text, .btn-pill, .row.flex-gap-lg/.col-md), hier nur Hintergrund +
   Padding + Titelfarbe. */
.leistungen-intro {
  padding: clamp(5rem, 10.4166666667vw, 12.5rem) 0;
  background-color: #ededed;
}
.leistungen-intro .h1 {
  color: #004f91;
  letter-spacing: 0.02em;
}
.leistungen-intro .text {
  margin: 0 0 1.875rem;
}

/* =========================
   LEISTUNG (7 Produktblöcke: Kunststofffenster, Haustüren, ActivPilot
   Fenster, ActivPilot Haustüren, Vorbau-Rollladen, Außenjalousien,
   Insektenschutz -- Figma Node 90:216, y=1738-8514)
   Jeder Block = EIN eigener Artikel (kein gemeinsamer Slider wie bei Home).
   Bild auf der einen Seite läuft randlos bis zum Viewport-Rand, Text/
   Checkliste/Button auf der anderen Seite hält den Standard-Container-
   Einzug -- deshalb Zentriert=NEIN + eigenes Zwei-Spalten-Layout statt
   Bootstraps .container.

   CF-Setup pro Artikel:
     - Zentriert (Container) Ja/Nein: NEIN
     - Blog Item Zusatzklasse: "leistung" (+ "leistung--grau" bei Haustüren/
       ActivPilot Haustüren/Außenjalousien, + "leistung--farbfaecher" NUR
       bei Kunststofffenster)
     - Content Zusatzklasse: (leer), bei Haustüren/ActivPilot Haustüren/
       Außenjalousien zusätzlich "leistung--gespiegelt"
     - Titel anzeigen: NEIN (Titel steckt als <h2 class="h1"> im Content,
       H1 bleibt dem Hero-Modul vorbehalten, analog Ablauf/Zeitstrahl)

   TITEL-BILD-OVERLAP: identisches Muster wie bei Unternehmen/Ablauf
   ("Individuelle Beratung") -- .titel-bild-overlap aus _component.scss
   wird 1:1 wiederverwendet (Titel ragt ab md 58px über das Bild), siehe
   Kommentar dort für die Klassen-Kombination im Markup.

   MOBILE REIHENFOLGE: bewusst KEINE CSS-order-Tricks -- wie beim Ablauf-
   Block liegt .leistung__media (Titel+Bild) im Markup VOR .leistung__content
   (Checkliste+Text+Button), mobil einfach flex-direction:column. Dadurch
   automatisch Headline -> Bild -> Checkliste -> Text -> Button, ohne
   eigene Zahlen-/Aufzählungsdekoration (die gibt es nur beim Ablauf-Block).

   SPALTEN-MASSE (Figma-exakt, Referenzbreite 1920px): Bildspalte 836px
   (43,54%), Lücke 136px (Node 317:237 Bildende x=836 -> Node 90:309
   Checkliste-Start x=972).

   Vertikale Ausrichtung Content-Spalte: Näherung (padding-top ca. Titel-
   höhe minus Overlap), da die Checkliste in Figma nicht exakt auf
   Bild-Oberkante beginnt, sondern leicht darunter -- variiert je nach
   Zeilenumbruch des Titels (1 vs. 2 Zeilen), im Browser gegenprüfen.

   CONTENT-SPALTE = HALBE CONTAINER-BREITE, NICHT HALBE ZEILE (Fix nach
   Live-DEV-Diagnose): Ursprünglich flex:1 1 auto (Content füllt den
   kompletten Rest der Zeile) mit clamp()-padding-right als Rand-Puffer.
   Der Bild-Text-Abstand blieb dabei zwar korrekt fix bei 136px (pixel-
   genau bei 1280/1920/2560px nachgemessen), aber die Spalte selbst wuchs
   auf sehr breiten Viewports über die Figma-Breite hinaus, ohne dass der
   Rand zum Viewport-Rand entsprechend mitwuchs.

   Deshalb jetzt dasselbe Muster wie .layout1 (siehe _template.scss,
   ".block2 .contentblock"): Content-Spalte bekommt pro Breakpoint eine
   FIXE Breite = halbe Bootstrap-Containerbreite ($half-md/lg/xl/xxl,
   _variables.scss) und wird per padding-right: calc((100vw -
   $container-*) / 2) an die Kante ausgerichtet, an der auch ein normaler,
   zentrierter .container enden würde -- exakt wie ein "Container, halbe
   Breite, horizontal zentriert". flex:0 (kein Grow) verhindert, dass die
   Spalte über diese Breite hinaus mitwächst; der Rest der Zeile bleibt
   als echter, mit dem Viewport-Rand mitwachsender Abstand stehen, egal
   wie breit der Bildschirm ist.
   ========================= */
.leistung {
  padding: 3rem 0;
}
.leistung--grau {
  background-color: #ededed;
}
.leistung__row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 0.75rem;
}
.leistung__title {
  color: #004f91;
}
@media (min-width: 768px) {
  .leistung {
    padding: 3rem 0 0;
  }
  .leistung__title {
    text-align: right;
  }
}
.leistung__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-sizing: content-box;
}
.leistung__list {
  color: #004f91;
  font-weight: 600;
  font-size: 1.75rem;
}
.leistung__text {
  margin: 0;
  color: #000000;
  font-size: 1.25rem;
  max-width: 33.5rem;
}
.leistung__sub-title {
  margin: 0 0 0.5rem;
  color: #004f91;
  font-weight: 600;
  font-size: 1.25rem;
}
.leistung__sub-text {
  margin: 0;
  color: #000000;
  font-size: 1.25rem;
}
.leistung__cta {
  align-self: flex-start;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .leistung {
    padding: 200px 0 0;
  }
  .leistung__row {
    flex-direction: row;
    align-items: center;
    gap: 8.5rem;
    padding: 0;
  }
  .leistung__media {
    flex: 0 0 43.54%;
    min-width: 0;
  }
  .leistung__content {
    flex: 0 1 auto;
    min-width: 0;
    padding-top: clamp(2.8rem, 5.8333333333vw, 7rem);
    width: 360px;
    padding-right: calc((100vw - 720px) / 2);
  }
}
@media (min-width: 992px) {
  .leistung__content {
    width: 480px;
    padding-right: calc((100vw - 960px) / 2);
  }
}
@media (min-width: 1200px) {
  .leistung__content {
    width: 570px;
    padding-right: calc((100vw - 1140px) / 2);
  }
}
@media (min-width: 1400px) {
  .leistung__content {
    width: 660px;
    padding-right: calc((100vw - 1320px) / 2);
  }
}
@media (min-width: 768px) {
  .leistung--gespiegelt .leistung__row {
    flex-direction: row-reverse;
  }
}
@media (min-width: 768px) {
  .leistung--gespiegelt .leistung__title {
    text-align: left;
    padding-left: 7rem;
  }
}
@media (min-width: 768px) {
  .leistung--gespiegelt .leistung__content {
    padding-right: 0;
    padding-left: calc((100vw - 720px) / 2);
  }
}
@media (min-width: 992px) {
  .leistung--gespiegelt .leistung__content {
    padding-left: calc((100vw - 960px) / 2);
  }
}
@media (min-width: 1200px) {
  .leistung--gespiegelt .leistung__content {
    padding-left: calc((100vw - 1140px) / 2);
  }
}
@media (min-width: 1400px) {
  .leistung--gespiegelt .leistung__content {
    padding-left: calc((100vw - 1320px) / 2);
  }
}
@media (min-width: 768px) {
  .leistung--top .leistung__row {
    align-items: flex-start;
  }
}

/* =========================
   FARBFÄCHER-DEKO (nur Kunststofffenster-Block, Figma Node 317:313)
   Einmaliges Deko-Element, kein wiederkehrendes Muster -- sitzt NICHT im
   Standard-Content-Raster, sondern lose im Zwischenraum zum nächsten
   (grauen) Block, ab md per position:absolute.

   POSITION (korrigiert): sitzt auf der BLOCKGRENZE, nicht darunter --
   `top:100%` allein (frühere Fassung) hängt komplett unterhalb der
   Blockkante, User-Screenshot zeigt aber jeweils 50% der Bildhöhe ÜBER und
   50% UNTER der Grenze zum nächsten Block. `transform:translateY(-50%)`
   zieht das Bild um die halbe eigene Höhe nach oben, zentriert es damit
   exakt auf die Blockkante. Funktioniert nur sauber, weil `.leistung`
   jetzt kein eigenes Bottom-Padding mehr hat (siehe oben) -- die
   Blockkante fällt dadurch mit dem Ende des sichtbaren Contents zusammen,
   nicht mit zusätzlichem Padding-Leerraum.

   GRÖSSE (korrigiert): war reines vw-% (29.69vw Breite / -11.04vw
   Überhang), unconditional ab md -- dadurch wuchs der Farbfächer zwar
   stetig mit der Viewport-Breite mit, aber NICHT im selben Verhältnis wie
   die danebenliegende Content-Spalte (die in festen Stufen pro Breakpoint
   wächst, $half-md/lg/xl/xxl, siehe .leistung__content oben) -- wirkte
   dadurch bei md/lg proportional zu klein. Jetzt an dieselbe $half-*-
   Stufung gekoppelt, mit dem bei xxl (Figma-Referenzbreite 1920px)
   exakten Verhältnis auf jeden Breakpoint übertragen: 570px Bildbreite /
   660px halbe xxl-Containerbreite ($half-xxl) sowie 212px Überhang / 570px
   eigene Bildbreite (Node 317:313, x=1562-2132 bei 1920px). Ragt weiterhin
   bewusst über den rechten Viewport-Rand hinaus -- deshalb globales
   overflow-x:hidden auf body nötig (siehe _template.scss).

   MOBIL (korrigiert): sitzt jetzt am selben Mechanismus wie ab md -- Bild
   war zuvor via position:static + margin:0 auto zentriert und über
   negatives margin-top in den vorangehenden Content (den CTA-Button)
   reingezogen, User-Screenshot zeigt aber denselben Blockgrenzen-Straddle
   wie ab md gewünscht: ganz rechts, 50% der Bildhöhe ÜBER und 50% UNTER
   der Grenze zum nächsten Block. `position:absolute; right:0` (Anker ist
   .leistung, spannt volle Viewport-Breite, siehe __row-Padding oben, das
   NICHT für den Farbfächer gilt, da der Anker .leistung selbst ist, nicht
   .leistung__row) + `top:100%; transform:translateY(-50%)` -- exakt
   dasselbe Prinzip wie ab md, nur mit der Mobil-Größe (40%/12rem-Deckel)
   statt der $half-*-Stufung.
   ========================= */
.leistung--farbfaecher {
  position: relative;
}
@media (max-width: 768px) {
  .leistung--farbfaecher {
    padding-bottom: 9rem;
  }
}

.leistung__farbfaecher {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  transform: translateY(-50%);
  width: 40%;
  max-width: 12rem;
  aspect-ratio: 256/387;
}
.leistung__farbfaecher img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 768px) {
  .leistung__farbfaecher {
    width: 310.9090909091px;
    right: -115.6363636364px;
    max-width: none;
  }
}
@media (min-width: 992px) {
  .leistung__farbfaecher {
    width: 414.5454545455px;
    right: -154.1818181818px;
  }
}
@media (min-width: 1200px) {
  .leistung__farbfaecher {
    width: 492.2727272727px;
    right: -183.0909090909px;
  }
}
@media (min-width: 1400px) {
  .leistung__farbfaecher {
    width: 570px;
    right: -212px;
  }
}

/* =========================
   WIR BERATEN SIE GERNE (Leistungen-Variante des Beratungsteasers, Figma
   Node 125:145/147/156/157 + Bild 376:246, letzter Block vor dem Footer)
   Reuse von .beratungsteaser (siehe _home.scss) für Titel-/Namen-Stil,
   statt komplett neu zu bauen -- Modifier + neues &__contact-Element
   decken die drei Unterschiede zu Home ab:
     1. Telefon + E-Mail statt Button (Figma: exakt dieselbe H2-Textstyle
        wie der Titel -- 48px SemiBold uppercase, keine Ungenauigkeit,
        bewusst so im Design).
     2. Bild läuft in seinem natürlichen Seitenverhältnis (width:100%,
        height:auto, geerbt von der Home-Basisklasse) -- bewusst KEIN
        aspect-ratio/object-fit mehr (siehe Korrektur unten).
     3. KEIN Überlapp-Effekt -- Block steht frei über dem Footer, kein
        angrenzender Farbblock zum Reinragen (Figma: sauberer Abstand
        Bild-Unterkante 376:246 zu Footer-Start 317:256, kein Overlap).

   CF-Setup für diesen Artikel:
     - Zentriert (Container) Ja/Nein: JA (wie Home-Beratungsteaser)
     - Blog Item Zusatzklasse: "beratungsteaser beratungsteaser--kontakt"
       (Basis-Klasse liefert Titel-/Name-Stil + Grundpadding, Modifier
       hebt Home's Überlapp-Effekt/-Padding wieder auf)
     - Content Zusatzklasse: (leer)
     - Titel anzeigen: NEIN (H1 bleibt dem Hero-Modul vorbehalten, wie bei
       den anderen Leistungen-Blöcken)

   BILD-KORREKTUR (12.07.2026): Figma vermerkt hier ein Hochformat-Bild
   (448x675), live wird aber weiterhin Home's Querformat-Datei
   (team-lohmillers.png) verwendet -- das per aspect-ratio:448/675 +
   object-fit:cover erzwungene Hochformat-Cropping hat das Team-Foto
   sichtbar falsch beschnitten (User-Feedback). Statt auf die noch nicht
   angelegte Hochformat-Datei zu warten, läuft das Bild jetzt in seinem
   echten Seitenverhältnis -- keine eigene Regel mehr nötig, die
   Home-Basisklasse (width:100%, height:auto) reicht.
   ========================= */
.beratungsteaser--kontakt {
  padding: 3rem 0 0 0;
}
.beratungsteaser--kontakt .beratungsteaser__text {
  margin-bottom: 1.625rem;
}
@media (min-width: 768px) {
  .beratungsteaser--kontakt {
    padding: 3rem 0 0 0;
  }
  .beratungsteaser--kontakt .beratungsteaser__image {
    position: static;
    z-index: auto;
    margin-top: 0;
  }
}

.beratungsteaser__contact {
  display: block;
  margin: 0 0 0.625rem;
  color: #004f91;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  font-size: 1.25rem;
}
.beratungsteaser__contact:last-child {
  margin-bottom: 0;
}
.beratungsteaser__contact a {
  color: inherit;
  text-decoration: none;
}
.beratungsteaser__contact a:hover, .beratungsteaser__contact a:focus-visible {
  text-decoration: underline;
}
@media (min-width: 768px) {
  .beratungsteaser__contact {
    font-size: clamp(1.6rem, 2.5vw, 3rem);
    line-height: 1;
  }
}

/* Kontakt-Seite */
/* Kontaktinfo: grauer Streifen, 3 Spalten (Adresse / Telefon+E-Mail /
   Öffnungszeiten) -- Figma Node 133:168 ff. Icons wiederverwendet aus
   der Topbar (fa-solid fa-phone/fa-envelope), keine neuen SVGs.
   Echtes Bootstrap-Grid statt eigenem Flex-Konstrukt: leere erste Spalte
   (col-md-1) als Rand-Offset, danach 3 Inhaltsspalten -- responsive-sicher
   (skaliert mit dem Grid statt fixem px/rem-Wert) und rückt den Cluster
   kontrolliert vom linken Rand weg, ohne auf volle Container-Breite wie
   die Topbar zu spreizen. Mittlere Spalte (Telefon/E-Mail) ist kürzer als
   die beiden anderen und richtet sich am Boden aus -- über die
   Bootstrap-Utility .align-items-end direkt im Markup, keine eigene
   Regel nötig. */
.kontakt-info {
  padding: clamp(3.75rem, 7.8125vw, 9.375rem) 0;
  background-color: #ededed;
  font-size: 1.25rem;
}
.kontakt-info strong {
  color: #004f91;
}
.kontakt-info a {
  color: inherit;
  text-decoration: none;
}
.kontakt-info a:hover, .kontakt-info a:focus-visible {
  text-decoration: underline;
}
.kontakt-info i {
  color: #004f91;
  margin-right: 0.5rem;
}

/* Karte: vollbreiter OpenStreetMap-Embed via Leaflet -- Figma Node 133:201
   (dort noch Platzhalter-Bild). Echtes <iframe src=".../embed.html"> wurde
   verworfen: Joomla/JCE injiziert beim Speichern ein leeres sandbox=""
   und blockiert damit die Karte komplett -- Leaflet umgeht das, da es
   direkt in ein normales <div> rendert statt ein iframe zu brauchen.
   Marker-Icon: eigenes Inline-SVG (siehe initKontaktKarte in
   template.min.js) statt Leaflets Standard-Rot, damit die Markenfarbe
   $color-primary statt eines externen Icon-Bildes zum Einsatz kommt. */
.kontakt-karte__map {
  width: 100%;
  height: 33.875rem;
}
.kontakt-karte .leaflet-div-icon.kontakt-karte__marker {
  background: none;
  border: none;
}

img {
  max-width: 100%;
  height: auto;
}

.center {
  text-align: center;
}

.op {
  padding-left: 0;
  padding-right: 0;
}

/* Mobil ausgeblendet, ab md sichtbar */
.moff {
  display: none !important;
}
.moff span {
  display: none !important;
}
@media (min-width: 768px) {
  .moff {
    display: inline !important;
  }
  .moff span {
    display: inline !important;
  }
}

/* Mobil sichtbar, ab md ausgeblendet */
.mon {
  display: inline !important;
}
.mon span {
  display: inline !important;
}
@media (min-width: 768px) {
  .mon {
    display: none !important;
  }
  .mon span {
    display: none !important;
  }
}

/*    Breakpoints:

      @include media-breakpoint-up(sm) {}

      @include media-breakpoint-up(md) {}

      @include media-breakpoint-up(lg) {}

      @include media-breakpoint-up(xl) {}

      @include media-breakpoint-up(xxl) {}

*/

/*# sourceMappingURL=template.min.css.map */