```css
/*
 * Custom CSS für Joomla 6
 * Shaper Helix Ultimate 2.2.x
 */


/* ==================================================
   HEADER
   ================================================== */

#sp-header {
  height: 160px;
}

/*
 * Bei aktiviertem Sticky Header benötigt Helix Ultimate
 * unter Umständen dieselbe Höhe auch im Sticky-Zustand.
 */
#sp-header.header-sticky {
  height: 160px;
}


/* ==================================================
   SEITENTITEL
   ================================================== */

.page-header {
  padding-bottom: 0;
  margin-bottom: 0;
}


/* ==================================================
   LOGO UND HAUPTMENÜ
   ================================================== */

#sp-logo {
  padding-top: 4px;
}

/*
 * Die Desktop-Logogröße wird durch die Helix-Einstellung
 * beziehungsweise durch height="150" im HTML gesteuert.
 *
 * Deshalb wird die Größe hier für Desktop nicht überschrieben.
 */
#sp-header .logo a {
  display: inline-block;
}

/* Hauptmenü-Links */
#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-parent > li > span {
  font-size: 16px;
  text-transform: none;
}

/* Hauptmenü Hover */
#sp-menu .sp-megamenu-parent > li:hover > a,
#sp-menu .sp-megamenu-parent > li:hover > span {
  color: #a9b5af;
}

/* Aktiver Hauptmenüpunkt */
#sp-menu .sp-megamenu-parent > li.active > a,
#sp-menu .sp-megamenu-parent > li.active > span {
  color: #808080;
}


/* ==================================================
   DROPDOWN- UND MEGAMENÜ
   ================================================== */

/* Hintergrund und obere Linie des Dropdowns */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background-color: #ffffff;
  border-top: 3px solid #95c9ad;
}

/* Links innerhalb eines Dropdowns */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span {
  border-top: 2px solid transparent;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Dropdown-Link bei Hover und Tastaturfokus */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:focus-visible,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span:hover {
  color: #000000;
  background-color: #c7d3cc;
  border-top-color: #95c9ad;
}

/* Aktiver Menüpunkt im Dropdown */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > span {
  color: #000000;
}


/* ==================================================
   OFFCANVAS-MENÜ / MOBILES MENÜ
   ================================================== */

.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

/* Hauptpunkte: Hover, Fokus und aktiver Zustand */
.offcanvas-menu .offcanvas-inner ul.menu > li:hover > a,
.offcanvas-menu .offcanvas-inner ul.menu > li:hover > span,
.offcanvas-menu .offcanvas-inner ul.menu > li > a:focus-visible,
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu > li.active > span {
  color: #ffffff;
  background-color: #a9b5af;
}

/* Untermenüpunkte */
.offcanvas-menu .offcanvas-inner ul.menu li ul li > a:hover,
.offcanvas-menu .offcanvas-inner ul.menu li ul li > a:focus-visible,
.offcanvas-menu .offcanvas-inner ul.menu li ul li.active > a {
  color: #a9b5af;
}

/*
 * Schließen-Schaltfläche ausblenden.
 *
 * Hinweis: Das Ausblenden ist aus Gründen der Bedienbarkeit
 * und Barrierefreiheit nicht empfehlenswert.
 */
.offcanvas-menu .close-offcanvas {
  display: none;
}


/* ==================================================
   OFFCANVAS-TOGGLER / HAMBURGER-ICON
   ================================================== */

#offcanvas-toggler,
.offcanvas-toggler {
  transition: color 0.2s ease;
}

#offcanvas-toggler:hover,
#offcanvas-toggler:focus-visible,
.offcanvas-toggler:hover,
.offcanvas-toggler:focus-visible {
  color: #a9b5af;
}

#offcanvas-toggler > i,
.offcanvas-toggler > i,
#offcanvas-toggler .burger-icon,
.offcanvas-toggler .burger-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

#offcanvas-toggler:hover > i,
#offcanvas-toggler:focus-visible > i,
.offcanvas-toggler:hover > i,
.offcanvas-toggler:focus-visible > i,
#offcanvas-toggler:hover .burger-icon,
#offcanvas-toggler:focus-visible .burger-icon,
.offcanvas-toggler:hover .burger-icon,
.offcanvas-toggler:focus-visible .burger-icon {
  transform: rotate(-90deg);
}


/* ==================================================
   HAUPTINHALT
   ================================================== */

#sp-main-body {
  padding-top: 50px;
  padding-bottom: 20px;
}

article.item,
article.article-details,
.article-details {
  margin-bottom: 0;
}


/* ==================================================
   DIENSTLEISTUNGEN
   ================================================== */

#sp-dienstleistungen {
  padding-top: 50px;
  padding-bottom: 40px;
}


/* ==================================================
   FOOTER
   ================================================== */

#sp-footer {
  min-height: 215px;
}

#sp-footer1,
#sp-footer2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

#sp-footer2 {
  font-size: 16px;
}

#sp-footer a {
  font-size: 18px;
}

#sp-footermobile {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.impressum_datenschutz {
  padding-bottom: 50px;
}


/* ==================================================
   BILD-ZOOM
   ================================================== */

.imgzoom {
  overflow: hidden;
}

.imgzoom img {
  display: block;
  width: 100%;
  transform: scale(1);
  transition: transform 0.3s linear;
}

.imgzoom:hover img,
.imgzoom:focus-within img {
  transform: scale(1.1);
}


/* ==================================================
   WEITERE ANPASSUNGEN
   ================================================== */

.sp-megamenu-parent > li:last-child > a {
  padding: 0 40px 0 15px;
}

#sp-top-bar {
  padding: 0;
}

#mod-custom124 p {
  margin-top: 1rem;
}


/* ==================================================
   TABLET UND MOBIL
   Logo und Toggler nebeneinander
   ================================================== */

@media (max-width: 991.98px) {

  /*
   * Die feste Desktop-Höhe wird auf kleineren Geräten
   * aufgehoben. Der Header richtet sich nach seinem Inhalt.
   */
  #sp-header,
  #sp-header.header-sticky {
    height: auto;
    min-height: 100px;
  }

  /*
   * Bootstrap gibt #sp-logo und #sp-menu unterhalb von
   * 992 Pixeln standardmäßig jeweils die volle Breite.
   * Diese Zeile verhindert deshalb den Umbruch.
   */
  #sp-header .container-inner > .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 100px;
  }

  /*
   * Logo-Spalte erhält den verfügbaren Platz.
   */
  #sp-header #sp-logo {
    width: calc(100% - 64px);
    max-width: calc(100% - 64px);
    flex: 1 1 calc(100% - 64px);
    padding-top: 0;
    padding-right: 10px;
  }

  /*
   * Menü-Spalte enthält mobil nur den Offcanvas-Toggler.
   */
  #sp-header #sp-menu {
    width: 64px;
    max-width: 64px;
    flex: 0 0 64px;
    padding-top: 0;
    padding-left: 0;
  }

  /*
   * Beide inneren Helix-Spalten werden vertikal zentriert.
   */
  #sp-header #sp-logo > .sp-column,
  #sp-header #sp-menu > .sp-column {
    display: flex;
    align-items: center;
    min-height: 100px;
  }

  #sp-header #sp-menu > .sp-column {
    justify-content: flex-end;
  }

  /*
   * Das mobile Logo ist ein separates Bild mit der Klasse
   * .logo-image-phone. Es wird proportional verkleinert.
   */
  #sp-header .logo-image-phone {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
  }

  /*
   * Der Toggler bleibt sichtbar und wird nicht verkleinert.
   */
  #sp-header #offcanvas-toggler {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    visibility: visible;
    opacity: 1;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 10;
  }

  #sp-header #offcanvas-toggler .burger-icon {
    display: inline-block;
    visibility: visible;
    opacity: 1;
  }

  #sp-main-body {
    padding-top: 30px;
  }

  #sp-footer {
    height: auto;
    min-height: 215px;
    font-size: 16px;
  }
}


/* ==================================================
   SMARTPHONE
   ================================================== */

@media (max-width: 575.98px) {

  #sp-header,
  #sp-header.header-sticky {
    min-height: 86px;
  }

  #sp-header .container-inner > .row {
    min-height: 86px;
  }

  #sp-header #sp-logo > .sp-column,
  #sp-header #sp-menu > .sp-column {
    min-height: 86px;
  }

  /*
   * Auf sehr schmalen Geräten wird die maximale Höhe
   * des mobilen Logos etwas reduziert.
   */
  #sp-header .logo-image-phone {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 76px;
    object-fit: contain;
  }

  #sp-main-body {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #sp-dienstleistungen {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .impressum_datenschutz {
    padding-bottom: 30px;
  }
}


/* ==================================================
   REDUZIERTE BEWEGUNGEN
   ================================================== */

@media (prefers-reduced-motion: reduce) {

  .imgzoom img,
  #offcanvas-toggler > i,
  .offcanvas-toggler > i,
  #offcanvas-toggler .burger-icon,
  .offcanvas-toggler .burger-icon {
    transition: none;
  }

  .imgzoom:hover img,
  .imgzoom:focus-within img {
    transform: none;
  }
}
```