/* =========================================================================
   Keppler GmbH Metallbau & Schlosserei
   Statisches Stylesheet – Werte 1:1 übernommen aus
   template.css / custom.css / SP-Page-Builder-Inline-CSS der Joomla-Seite
   ========================================================================= */

/* ---------- 1. Schriften (selbst gehostet) ---------- */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/lato/lato-v23-latin-ext_latin-300.woff2') format('woff2'),
       url('/assets/fonts/lato/lato-v23-latin-ext_latin-300.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lato/lato-v23-latin-ext_latin-regular.woff2') format('woff2'),
       url('/assets/fonts/lato/lato-v23-latin-ext_latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/lato/lato-v23-latin-ext_latin-700.woff2') format('woff2'),
       url('/assets/fonts/lato/lato-v23-latin-ext_latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/lato/lato-v23-latin-ext_latin-900.woff2') format('woff2'),
       url('/assets/fonts/lato/lato-v23-latin-ext_latin-900.woff') format('woff');
}

/* Icons: nur die beiden tatsächlich genutzten Font-Awesome-6-Glyphen */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('/assets/fonts/fontawesome/fa-solid-900.woff2') format('woff2');
}
.fa-icon {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.fa-angles-right::before { content: "\f101"; }
.fa-comment-dots::before { content: "\f4ad"; }


/* ---------- 2. Grundwerte ---------- */

:root {
  --rot:        #E30613;
  --dunkel:     #1D1D1B;
  --grau-hell:  #F3F3F3;
  --weiss:      #ffffff;
  --text:       #1D1D1B;
  --projekt-text: #303030;
  --header-hoehe: 100px;
  --font: 'Lato', sans-serif;
  --schatten-karte: 6px 6px 35px 0px rgba(0, 0, 0, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-hoehe);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--weiss);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--rot);
  text-decoration: none;
  transition: color 400ms;
}
a:hover, a:focus, a:active { color: var(--projekt-text); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  line-height: 1.5;
  margin: 0;
}
h1 { font-size: 50px; font-weight: 700; }
h2 { font-size: 40px; font-weight: 700; }
h3 { font-size: 35px; font-weight: 500; }
h4 { font-size: 30px; font-weight: 700; }
h5 { font-size: 25px; font-weight: 700; }
h6 { font-size: 20px; font-weight: 700; }

address { font-style: normal; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10002;
  background: var(--rot);
  color: #fff;
  padding: 12px 20px;
  font-size: 15px;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }


/* ---------- 3. Raster ---------- */

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 15px;
}
@media (max-width: 1399.98px) { .container { max-width: 1140px; } }
@media (max-width: 1199.98px) { .container { max-width: 960px; } }
@media (max-width: 991.98px)  { .container { max-width: 720px; } }
@media (max-width: 767.98px)  { .container { max-width: 540px; } }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}
.col {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 576px) {
  .col-sm-1  { width: 8.333333%; }
  .col-sm-2  { width: 16.666667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.333333%; }
  .col-sm-5  { width: 41.666667%; }
  .col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.333333%; }
  .col-sm-8  { width: 66.666667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.333333%; }
  .col-sm-11 { width: 91.666667%; }
  .col-sm-12 { width: 100%; }
}
@media (min-width: 768px) {
  .col-md-1  { width: 8.333333%; }
  .col-md-2  { width: 16.666667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.333333%; }
  .col-md-5  { width: 41.666667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.333333%; }
  .col-md-8  { width: 66.666667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.333333%; }
  .col-md-11 { width: 91.666667%; }
  .col-md-12 { width: 100%; }
}

/* flow-root verhindert, dass Aussenabstaende von Kindelementen aus der
   Sektion herauslaufen. Ohne das rutscht der 20px-Abstand unter der
   Ueberschrift "Leistungen" zwischen die Sektionen und zeigt dort den
   weissen Seitenhintergrund. Im Page Builder passiert das nicht, weil
   dessen Reihen Flex-Container sind. */
.sppb-section {
  position: relative;
  display: flow-root;
}


/* ---------- 4. Kopfbereich ---------- */

#sp-header {
  position: relative;
  z-index: 99;
  height: var(--header-hoehe);
  width: 100%;
  background: var(--weiss);
  border-bottom: 4px solid var(--rot);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1);
}

/* Mitscrollender Kopfbereich, wie im Original (Helix Ultimate Sticky Header).
   .kopf-platzhalter haelt die Hoehe frei, damit der Inhalt nicht springt. */
.kopf-platzhalter { height: 0; }
body.kopf-fixiert .kopf-platzhalter { height: calc(var(--header-hoehe) + 4px); }

#sp-header.header-sticky {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  animation: spFadeInDown .5s;
}

@keyframes spFadeInDown {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #sp-header.header-sticky { animation: none; }
}
#sp-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--header-hoehe);
  position: relative;
}

/* Logo nur mobil links */
.logo-mobil { display: none; margin-right: auto; }
.logo-mobil img { height: 50px; width: auto; }

.hauptnavigation { display: flex; align-items: center; width: 100%; }

/* Menü zentriert (custom.css) */
.sp-megamenu-parent {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  z-index: 99;
  position: relative;
}
.sp-megamenu-parent > li {
  display: inline-block;
  position: relative;
  padding: 0;
}
.sp-megamenu-parent > li > a {
  display: inline-block;
  padding: 0 15px;
  line-height: var(--header-hoehe);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  color: var(--dunkel);
  text-decoration: none;
  position: relative;
}
.sp-megamenu-parent > li:last-child > a { padding: 0 15px 0 15px; }
.sp-megamenu-parent > li.active > a { font-weight: 300; color: var(--dunkel); }
.sp-megamenu-parent > li:hover > a   { color: var(--dunkel); }

/* Kreis-Marker bei Hover / aktiv */
.sp-megamenu-parent > li.active > a::before,
.sp-megamenu-parent > li:hover > a::before {
  content: " ";
  background-image: url(/images/2021/03/12/kreis.svg);
  background-repeat: no-repeat;
  background-size: 75%;
  background-position: 0% 52%;
  width: 50px;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  pointer-events: none;
}
.sp-megamenu-parent > li.menu-logo.active > a::before,
.sp-megamenu-parent > li.menu-logo:hover > a::before { display: none; }

/* Logo als Menüpunkt */
.menu-logo > a { padding: 0 15px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; height: var(--header-hoehe); }
.menu-logo img { display: inline-block; width: 180px; height: auto; }

/* Dropdown */
.sp-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  margin: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.sp-megamenu-parent > li.sp-has-child:hover > .sp-dropdown,
.sp-megamenu-parent > li.sp-has-child:focus-within > .sp-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sp-dropdown-inner {
  background: var(--weiss);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .2);
  padding: 20px;
  text-align: left;
}
.sp-dropdown-items { list-style: none; padding: 0; margin: 0; }
.sp-dropdown-items > li { display: block; padding: 0; }
.sp-dropdown-items > li > a {
  display: inline-block;
  padding: 8px 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  color: var(--dunkel);
}
.sp-dropdown-items > li > a:hover { color: var(--dunkel); }

/* Burger */
.offcanvas-toggler {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  height: 60px;
  cursor: pointer;
}
.burger-icon { width: 25px; display: block; }
.burger-icon > span {
  display: block;
  height: 2px;
  background-color: #000;
  margin: 5px 0;
  transition: background-color .3s ease-in, opacity .3s ease-in, transform .3s ease-in;
}
.offcanvas-active .burger-icon > span:nth-child(1) { transform: translate(0, 8px) rotate(-45deg); }
.offcanvas-active .burger-icon > span:nth-child(2) { opacity: 0; }
.offcanvas-active .burger-icon > span:nth-child(3) { transform: translate(0, -5px) rotate(45deg); }


/* ---------- 5. Offcanvas ---------- */

.offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: .4s;
  z-index: 9999;
}
.offcanvas-active .offcanvas-overlay { opacity: 1; visibility: visible; }

.offcanvas-menu {
  position: fixed;
  top: 60px;
  right: -300px;
  width: 300px;
  height: 100%;
  background: var(--weiss);
  transition: right .4s;
  z-index: 10000;
}
.offcanvas-active .offcanvas-menu { right: 0; }

.offcanvas-inner {
  padding: 25px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.offcanvas-menu ul.menu, .offcanvas-menu ul.menu ul {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
  display: flex;
  flex-direction: column;
}
.offcanvas-menu ul.menu > li { position: relative; display: block; }
.offcanvas-menu ul.menu > li > a {
  display: block;
  font-size: 18px;
  padding: 10px 0;
  line-height: 18px;
  color: var(--dunkel);
  opacity: .7;
  transition: .3s;
}
.offcanvas-menu ul.menu > li > a:hover { opacity: 1; }
.offcanvas-menu .menu-child { display: none; margin-left: 10px; }
.offcanvas-menu .menu-parent.is-open > .menu-child { display: flex; }
.offcanvas-menu .menu-child > li > a {
  display: block;
  font-size: 15px;
  padding: 4px 0;
  line-height: 18px;
  font-weight: 400;
  color: var(--dunkel);
  opacity: .7;
}
.offcanvas-menu .menu-child > li > a:hover { opacity: 1; }

.menu-toggler {
  position: absolute;
  top: 8px;
  right: -10px;
  width: 40px;
  height: 30px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.menu-toggler::after {
  content: "\f107";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #252525;
  display: block;
}
.menu-parent.is-open > .menu-toggler::after { content: "\f106"; }


/* ---------- 6. Hero-Slider (1920 × 800, „fit") ---------- */

.hero-section { padding: 0; }

.hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 800;
  max-height: 800px;
  overflow: hidden;
  background: var(--dunkel);
}
/* Waagerecht gleitende Spur, wie im Original (Smart Slider: horizontal) */
.hero-track {
  position: absolute;
  inset: 0;
  display: flex;
  will-change: transform;
}
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
}
.hero-slide picture, .hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Textposition wie im Original (Smart Slider):
   Inhaltsbereich auf 1600px begrenzt und mittig, der Textblock darin
   linksbuendig (inneralign "left"), senkrecht mittig (align-self "center"),
   die beiden Zeilen untereinander zentriert (col inneralign "center"). */
.hero-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.hero-limiter {
  width: 100%;
  max-width: 1600px;
  display: flex;
  justify-content: flex-start;
  padding: 0 10px;
}
.hero-textblock {
  text-align: center;
  padding: 10px;
}

.hero-title {
  display: inline-block;
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 50px);
  line-height: 1.5;
  color: var(--weiss);
  background: var(--rot);
  padding: 0 20px;
  white-space: nowrap;
}
.hero-subtitle {
  margin: 5px 0 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(21px, 2.24vw, 43px);
  line-height: 1.5;
  color: var(--weiss);
  white-space: nowrap;
}

/* Pfeile */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 18;
  line-height: 0;
}
.hero-arrow-prev { left: 15px; }
.hero-arrow-next { right: 15px; }
.hero-arrow svg { transition: opacity .3s; }
.hero-arrow:hover svg { opacity: .5; }

/* Punkte */
.hero-bullets {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 14;
}
.hero-bullet {
  width: 10px;
  height: 10px;
  margin: 4px;
  padding: 0;
  border: 0;
  border-radius: 50px;
  background: rgba(255, 255, 255, .8);
  cursor: pointer;
  transition: background .3s, border .3s;
}
.hero-bullet.is-active,
.hero-bullet.active,
.hero-bullet:hover,
.hero-bullet:focus {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, 1);
}


/* ---------- 7. Trennformen ---------- */

.trenner {
  padding-bottom: 150px;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 50% 0;
  background-size: 101%;
}
.trenner-rot {
  background-color: var(--grau-hell);
  background-image: url("/images/2021/03/10/bg-red.svg");
}
.trenner-weiss-1 {
  background-color: var(--grau-hell);
  background-image: url("/images/2021/03/11/bg-white.svg");
}
.trenner-grau {
  background-image: url("/images/2021/03/12/grey.svg");
  z-index: 2;
}
.trenner-weiss-2 {
  background-color: rgba(255, 255, 255, 0);
  background-image: url("/images/2021/03/11/bg-white.svg");
  z-index: 2;
}


/* ---------- 8. Willkommen ---------- */

.sektion-willkommen {
  background-color: var(--grau-hell);
  padding: 50px 0;
}
.titel-rot   { color: var(--rot); margin-bottom: 20px; font-size: 50px; font-weight: 700; }
.titel-links { text-align: left; }
.titel-mittig{ text-align: center; }
.rot { color: var(--rot); }

.textblock { text-align: left; }
.sektion-willkommen .textblock { margin-bottom: 30px; }

.bild-mittig { text-align: center; }
.bild-mittig img { display: inline-block; }


/* ---------- 9. Leistungen ---------- */

.sektion-leistungen-titel {
  background-color: var(--grau-hell);
  padding: 50px 0 0;
}

/* Zwei Hintergrundebenen: die Deko-Grafik wird eingepasst, der Verlauf muss
   dagegen immer die ganze Flaeche fuellen. Ohne die getrennten Angaben wirkt
   "contain" auch auf den Verlauf - dann bleibt oberhalb der weissen Karte ein
   weisser Streifen stehen. */
.leistungen-bg {
  padding: 100px 0;
  background-color: var(--grau-hell);
  background-image: url(/images/2021/03/12/bg-leistungen.svg),
                    linear-gradient(180deg, var(--grau-hell) 50%, var(--weiss) 50%);
  background-repeat: no-repeat, no-repeat;
  background-size: contain, 100% 100%;
  background-position: 60% 50%, 0 0;
  background-attachment: scroll, scroll;
}

.karte-weiss {
  background-color: var(--weiss);
  box-shadow: var(--schatten-karte);
  border-radius: 25px;
  padding: 30px;
}

.leistungen-grid { row-gap: 30px; }

.leistung-kachel {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  color: var(--weiss);
  text-align: center;
}
.leistung-kachel:hover, .leistung-kachel:focus, .leistung-kachel:active { color: var(--rot); }

.kachel-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .5);
  mix-blend-mode: normal;
}
.kachel-titel {
  position: relative;
  margin: 0;
  padding: 140px 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
  transform-origin: 50% 50%;
}
.kachel-titel .fa-icon {
  display: inherit;
  font-size: 20px;
  -webkit-text-fill-color: var(--weiss);
}

.kachel-zaeune {
  background-image: url(/images/2024/09/04/bild-6.jpg);
  background-image: image-set(url(/images/2024/09/04/bild-6.webp) type("image/webp"),
                              url(/images/2024/09/04/bild-6.jpg)  type("image/jpeg"));
}
.kachel-tore {
  background-image: url(/images/2024/09/04/bild-1.jpg);
  background-image: image-set(url(/images/2024/09/04/bild-1.webp) type("image/webp"),
                              url(/images/2024/09/04/bild-1.jpg)  type("image/jpeg"));
}
.kachel-steinkoerbe {
  background-image: url(/images/2024/09/04/bild-33.jpg);
  background-image: image-set(url(/images/2024/09/04/bild-33.webp) type("image/webp"),
                              url(/images/2024/09/04/bild-33.jpg)  type("image/jpeg"));
}
.kachel-schranken {
  background-image: url(/images/2021/03/11/schranken.jpg);
  background-image: image-set(url(/images/2021/03/11/schranken.webp) type("image/webp"),
                              url(/images/2021/03/11/schranken.jpg)  type("image/jpeg"));
}
.kachel-drehkreuze {
  background-image: url(/images/leistungen/drehkreuze/drehkreuze-6.jpg);
  background-image: image-set(url(/images/leistungen/drehkreuze/drehkreuze-6.webp) type("image/webp"),
                              url(/images/leistungen/drehkreuze/drehkreuze-6.jpg)  type("image/jpeg"));
}
.kachel-hochwasserschutz { background-color: #161614; }


/* ---------- 10. Handlungsaufforderungen ---------- */

.sektion-cta-1 {
  background-color: var(--grau-hell);
  padding: 50px 0;
}
.cta-icon { text-align: center; }
.cta-icon-inner {
  display: inline-block;
  height: 96px;
  width: 96px;
  color: var(--rot);
}
.cta-icon-inner .fa-icon {
  line-height: 96px;
  font-size: 46px;
  transition: transform .3s ease;
}
.cta-icon a:hover .fa-icon { transform: scale(1.15); }

.cta-text {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dunkel);
  text-align: center;
}
.cta-text-abstand { margin-bottom: 30px; }

.sektion-cta-2 {
  background-color: var(--grau-hell);
  padding: 150px 0;
}
.karte-cta { text-align: center; }

.button-wrapper { text-align: center; }
.btn {
  display: inline-block;
  border: 0;
  border-radius: 100px;
  padding: 14px 32px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.btn-rot { background-color: var(--rot); color: var(--weiss); }
.btn-rot:hover, .btn-rot:focus, .btn-rot:active { background-color: var(--dunkel); color: var(--weiss); }
.btn .fa-icon { margin-left: 6px; font-size: .9em; }


/* ---------- 11. Projekte ---------- */

.sektion-projekte-titel { padding: 150px 0 50px; }

.sektion-projekte {
  padding: 50px 0 75px;
  background-image: url("/images/2021/03/12/rechteck-grey.svg");
  background-repeat: no-repeat;
  background-size: inherit;
  background-attachment: scroll;
  background-position: 79% 100%;
}

.projekt-karte {
  display: flex;
  align-items: stretch;
  background: var(--weiss);
  border-radius: 30px;
  box-shadow: var(--schatten-karte);
  overflow: hidden;
}
.projekt-bild { width: 50%; }
.projekt-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.projekt-text {
  width: 50%;
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: var(--projekt-text);
}
.projekt-titel {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--projekt-text);
  margin: 0 0 20px;
}
.projekt-text p { font-size: 16px; font-weight: 400; line-height: 1.5; }


/* ---------- 12. Fußbereich ---------- */

#sp-bottom {
  background: var(--dunkel);
  color: var(--weiss);
  border-top: 4px solid var(--rot);
  padding: 60px 0 30px;
  font-size: 14px;
  line-height: 1.6;
}
#sp-bottom a { color: var(--weiss); }
#sp-bottom a:hover, #sp-bottom a:focus { color: var(--rot); }

.kontakt-bereich { padding: 50px 0; }

.footer-logo { text-align: center; margin-bottom: 30px; }
.footer-logo img { display: inline-block; }

.titel-klein {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 20px;
  text-align: left;
  color: var(--weiss);
}

/* Kreis-Marker vor Überschrift */
.kreis { position: relative; }
.kreis::before {
  content: " ";
  background-image: url(/images/2021/03/12/kreis.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0% 50%;
  width: 50px;
  height: 45px;
  display: block;
  position: absolute;
  left: -20px;
  top: -10px;
  pointer-events: none;
}

#sp-bottom .textblock { margin-bottom: 30px; }

#sp-footer {
  background: var(--dunkel);
  color: var(--weiss);
  font-size: 14px;
  padding: 0;
}
#sp-footer .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
  gap: 15px;
}
#sp-footer a { color: var(--weiss); }
#sp-footer a:hover { color: var(--rot); }
#sp-footer .footer-menue { text-align: right; }
#sp-footer ul.menu {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0 -10px;
}
#sp-footer ul.menu li { display: inline-block; margin: 0 10px; }
#sp-footer ul.menu li a { display: block; }


/* =========================================================================
   Haltepunkte – Werte aus custom.css
   ========================================================================= */

@media only screen and (max-width: 1199.98px) {
  .kachel-titel { padding: 130px 0; }
}

/* Tablet */
@media only screen and (max-width: 991.98px) {
  :root { --header-hoehe: 60px; }

  h1, .titel-rot { font-size: 45px; }
  h2 { font-size: 35px; }
  h4, .kachel-titel { font-size: 25px; }
  .projekt-titel { font-size: 35px; }

  #sp-header { height: 60px; }
  #sp-header .header-inner { height: 60px; }

  .logo-mobil { display: block; }
  .sp-megamenu-parent { display: none; }
  .offcanvas-toggler { display: block; }

  .hero-arrow { display: none; }

  .leistungen-bg { background-size: 50%, 100% 100%; }

  #sp-footer .footer-inner { flex-direction: column; align-items: flex-start; }
  #sp-footer .footer-menue { text-align: left; }

  .projekt-karte { flex-direction: column; }
  .projekt-bild, .projekt-text { width: 100%; }
  .projekt-bild img { aspect-ratio: 3 / 2; height: auto; }
  .projekt-text { padding: 30px 20px; }
}

/* Großes Smartphone */
@media only screen and (max-width: 767.98px) {
  h2 { font-size: 25px; }
  .projekt-titel { font-size: 28px; }

  .sektion-projekte-titel { padding: 100px 0 30px; }
  .sektion-cta-2 { padding: 100px 0; }
  .leistungen-bg { padding: 60px 0; }
  .karte-weiss { padding: 20px; }
  .kachel-titel { padding: 100px 0; }
}

/* Kleines Smartphone */
@media only screen and (max-width: 575.98px) {
  :root { --header-hoehe: 50px; }

  h2 { font-size: 20px; }
  .titel-rot { font-size: 32px; }
  .projekt-titel { font-size: 24px; }

  #sp-header { height: 50px; }
  #sp-header .header-inner { height: 50px; }
  .logo-mobil img { height: 34px; }

  .offcanvas-menu { top: 50px; }
  .offcanvas-inner { max-height: calc(100vh - 50px); }

  .trenner { padding-bottom: 80px; }
  .kachel-titel { padding: 80px 0; }
}

/* Bewegungsreduzierung respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-slide { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  #sp-header, .offcanvas-menu, .offcanvas-overlay, .hero-slider, .trenner { display: none !important; }
  body { color: #000; }
}


/* =========================================================================
   Unterseiten
   ========================================================================= */

.brotkrumen {
  background: var(--grau-hell);
  padding: 14px 0 0;
  font-size: 14px;
}
.brotkrumen ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.brotkrumen li { color: var(--text); opacity: .75; }
.brotkrumen li + li::before { content: "›"; margin-right: 8px; }
.brotkrumen a { color: var(--text); }
.brotkrumen a:hover { color: var(--rot); }

.inhaltsseite .seitentitel { margin-bottom: 20px; }
.titel-rechts { text-align: right; }

.inhaltsseite .textblock h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 32px 0 10px;
}
.inhaltsseite .textblock h4:first-child { margin-top: 0; }
.inhaltsseite .textblock h3 { font-size: 25px; margin: 36px 0 12px; }
.inhaltsseite .textblock p { margin: 0 0 1rem; }
.inhaltsseite .textblock ul,
.inhaltsseite .textblock ol { margin: 0 0 1rem; padding-left: 22px; }
.inhaltsseite .textblock li { margin-bottom: 6px; }
.inhaltsseite .textblock a { word-break: break-word; }
.textblock-mittig { text-align: center; }
.textblock-rechts { text-align: right; }

@media only screen and (max-width: 991.98px) {
  .inhaltsseite { padding: 90px 0 60px !important; }
}
@media only screen and (max-width: 575.98px) {
  .inhaltsseite { padding: 60px 0 40px !important; }
  .inhaltsseite .textblock h4 { font-size: 18px; }
}


/* =========================================================================
   Page-Builder-Bausteine der Unterseiten
   ========================================================================= */

.sppb-section.sppb-nested { padding: 0; }
.sppb-container-inner { width: 100%; }
.sppb-addon-wrapper { position: relative; }
.sppb-addon-title { margin: 0; }
.sppb-addon-header { position: relative; }
.sppb-img-responsive { max-width: 100%; height: auto; }
.sppb-addon-single-image-container img { display: inline-block; }

.sppb-addon-text-block ul,
.sppb-addon-text-block ol { margin: 0 0 1rem; padding-left: 22px; }
.sppb-addon-text-block li { margin-bottom: 6px; }
.sppb-addon-text-block h2,
.sppb-addon-text-block h3,
.sppb-addon-text-block h4 { margin: 28px 0 10px; }
.sppb-addon-text-block h4 { font-size: 20px; }
.sppb-addon-text-block > *:first-child { margin-top: 0; }
.sppb-addon-text-block img { border-radius: 15px; margin: 10px 0; }

/* --- Karussell (Maße aus sppagebuilder.css + custom.css) --- */

.sppb-carousel { position: relative; }
.sppb-carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 15px;
}
.sppb-carousel-spur {
  display: flex;
  height: 100%;
  will-change: transform;
}
.sppb-carousel-spur > .sppb-item {
  padding: 0;
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
}
.sppb-carousel-spur > .sppb-item > picture,
.sppb-carousel-spur > .sppb-item > picture > img,
.sppb-carousel-spur > .sppb-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  line-height: 1;
  display: block;
}

/* Pfeile identisch zum Slider auf der Startseite */
.sppb-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  z-index: 18;
}
.sppb-carousel-control.left  { left: 15px; }
.sppb-carousel-control.right { right: 15px; }
.sppb-carousel-control svg { transition: opacity .3s; }
.sppb-carousel-control:hover svg,
.sppb-carousel-control:focus svg { opacity: .5; }

.sppb-carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  justify-content: center;
  gap: 2px;
  padding: 0;
  margin: 0;
}
.sppb-carousel-indicators .sppb-dot {
  width: 10px;
  height: 10px;
  margin: 1px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 10px;
  background-color: transparent;
  cursor: pointer;
  transition: .2s;
}
.sppb-carousel-indicators .sppb-dot.active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #fff;
}

/* --- Projekt-/Artikelslider (ersetzt die doppelten Smart Slider) --- */

.projekt-slider { position: relative; }
.projekt-fenster { overflow: hidden; border-radius: 30px; }
.projekt-spur {
  display: flex;
  will-change: transform;
}
.projekt-spur > .projekt-karte {
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  border-radius: 0;
  box-shadow: none;
}
.projekt-einzel .projekt-karte { display: flex; }

.projekt-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(29, 29, 27, .45);
  border-radius: 100px;
  padding: 4px;
  line-height: 0;
  cursor: pointer;
  z-index: 18;
}
.projekt-pfeil.links  { left: 15px; }
.projekt-pfeil.rechts { right: 15px; }
.projekt-pfeil svg { transition: opacity .3s; }
.projekt-pfeil:hover svg,
.projekt-pfeil:focus svg { opacity: .5; }

.projekt-punkte {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.projekt-punkt {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--dunkel);
  border-radius: 50px;
  background: transparent;
  cursor: pointer;
}
.projekt-punkt.active { background: var(--rot); border-color: var(--rot); }

.projekt-detail { margin-top: 10px; }
.projekt-detail .projekt-text { text-align: left; padding: 30px; }

/* --- Video mit Einwilligung --- */

.video-einwilligung {
  background: var(--dunkel);
  color: #fff;
  border-radius: 15px;
  padding: 40px 30px;
  text-align: center;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.video-einwilligung p { max-width: 42ch; margin: 0; }
.video-einwilligung iframe,
.imagefilm {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 15px;
  display: block;
  background: #000;
  object-fit: cover;
}


@media only screen and (max-width: 991.98px) {
  .projekt-pfeil.links  { left: 4px; }
  .projekt-pfeil.rechts { right: 4px; }
  .projekt-detail .projekt-text { padding: 24px 18px; }
}


/* Verschachtelte Reihen: Inhalt oben ausgerichtet (wie auf der Live-Seite),
   30px Abstand zwischen umgebrochenen Reihen - derselbe Wert wie der
   Spaltenabstand und wie bei den Leistungskacheln der Startseite. */
.sppb-nested > .sppb-container-inner > .row {
  align-items: flex-start;
  row-gap: 30px;
}
.sppb-nested > .sppb-container-inner > .row > .col > .sppb-addon-wrapper:last-child { margin-bottom: 0; }


/* Karussell: feste Bildflaeche nach dem ersten Bild, damit die Hoehe
   beim Wechseln nicht springt (wie die fixe Item-Hoehe im Page Builder) */



/* Offcanvas bleibt auch bei fixiertem Kopf direkt unter dem Kopfbereich */
body.kopf-fixiert .offcanvas-menu { top: var(--header-hoehe); }
body.kopf-fixiert .offcanvas-inner { max-height: calc(100vh - var(--header-hoehe)); }


/* Aufklapp-Häkchen an den Menüpunkten mit Untermenü.
   Hinweis: eine Ergänzung - die Live-Seite zeigt hier kein Zeichen,
   Helix Ultimate setzt es nur im Modal-Menü-Layout. */
.sp-megamenu-parent > li.sp-has-child > a::after {
  content: "\f107";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  margin-left: 7px;
  display: inline-block;
  vertical-align: middle;
  transition: transform .3s ease;
}
.sp-megamenu-parent > li.sp-has-child:hover > a::after,
.sp-megamenu-parent > li.sp-has-child:focus-within > a::after {
  transform: rotate(-180deg);
}


/* Footer-Logo als Link */
.footer-logo-link { display: inline-block; }
.footer-logo-link img { transition: opacity .3s ease; }
.footer-logo-link:hover img,
.footer-logo-link:focus img { opacity: .75; }