/* =========================================================
   HAGEDORN TYPOGRAFIE
   Radio Canada Big für sämtliche Elemente
   ========================================================= */

:root {
    --font-main: "Radio Canada Big", Arial, Helvetica, sans-serif;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --text-color: #000;
}


/* =========================================================
   GRUNDEINSTELLUNGEN
   ========================================================= */

html {
    font-size: 16px;
}

body {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: var(--weight-regular);
    line-height: 1.5;
    color: var(--text-color);

    font-optical-sizing: auto;
    font-style: normal;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Helix/Joomla-Elemente ebenfalls überschreiben */
body *,
input,
textarea,
select,
button {
    font-family: var(--font-main);
}


/* =========================================================
   FLIESSTEXT
   ========================================================= */

p,
li,
td,
th,
label,
input,
textarea,
select {
   font-size: 18px;
  font-weight: var(--weight-regular);
  line-height: 35px;
  letter-spacing: 0.4px;
}

p {
    margin-top: 0;
    margin-bottom: 20px;
}

small,
.small {
    font-size: 13px;
    font-weight: var(--weight-regular);
    line-height: 1.45;
}

strong,
b {
    font-weight: var(--weight-bold);
}


/* =========================================================
   ÜBERSCHRIFTEN
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: 0;
    color: var(--text-color);

    font-family: var(--font-main);
    font-style: normal;
    line-height: 1.08;
	letter-spacing: 0.4px !important;
}

h1,
.h1 {
   margin-bottom: 28px;
  font-size: 40px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.4px;
  line-height: 40px;
}

h2,
.h2 {
    margin-bottom: 24px;

    font-size: 48px;
    font-weight: var(--weight-bold);
    letter-spacing: -0.03em;
}

h3,
.h3 {
    margin-bottom: 18px;

    font-size: 34px;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
}

h4,
.h4 {
    margin-bottom: 14px;

    font-size: 26px;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.015em;
}

h5,
.h5 {
    margin-bottom: 12px;

    font-size: 20px;
    font-weight: var(--weight-semibold);
}

h6,
.h6 {
    margin-bottom: 10px;

    font-size: 16px;
    font-weight: var(--weight-bold);
    line-height: 1.25;
}


/* =========================================================
   EINLEITUNG / LEAD-TEXT
   ========================================================= */

.lead,
.intro-text,
.article-introtext {
    font-size: 22px;
    font-weight: var(--weight-regular);
    line-height: 1.45;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    font-family: var(--font-main);
    font-weight: inherit;
    color: inherit;
}

p a,
.article-details a {
    font-weight: var(--weight-semibold);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    font-size: 15px;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: 0;
}


/* =========================================================
   HAUPTNAVIGATION
   ========================================================= */

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
}


/* =========================================================
   MODAL-MENÜ
   ========================================================= */

/* Spaltenüberschriften */
#modal-menu .sp-group-title {
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: var(--weight-bold);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

/* Einzelne Menüpunkte */
#modal-menu .sp-mega-group-child .sp-menu-item > a {
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: var(--weight-regular);
    line-height: 1.4;
}

/* Aktiver Menüpunkt und Hover */
#modal-menu .sp-mega-group-child .sp-menu-item > a:hover,
#modal-menu .sp-mega-group-child .current-item > a,
#modal-menu .sp-mega-group-child .active > a {
    font-weight: var(--weight-bold);
}

/* Kontaktangaben */
#modal-menu .sp-contact-info,
#modal-menu .sp-contact-info a {
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: var(--weight-regular);
    line-height: 1.4;
}


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

#sp-footer,
#sp-bottom {
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: var(--weight-regular);
    line-height: 1.45;
}

#sp-footer h1,
#sp-footer h2,
#sp-footer h3,
#sp-footer h4,
#sp-footer h5,
#sp-footer h6,
#sp-bottom h1,
#sp-bottom h2,
#sp-bottom h3,
#sp-bottom h4,
#sp-bottom h5,
#sp-bottom h6 {
    font-size: 15px;
    font-weight: var(--weight-bold);
    line-height: 1.2;
}


/* =========================================================
   FORMULARE
   ========================================================= */

input,
textarea,
select {
    font-size: 16px;
    font-weight: var(--weight-regular);
}

input::placeholder,
textarea::placeholder {
    font-family: var(--font-main);
    font-weight: var(--weight-regular);
    opacity: 0.65;
}


/* =========================================================
   BREADCRUMBS / META-INFORMATIONEN
   ========================================================= */

.breadcrumb,
.breadcrumb-item,
.article-info,
.article-info dd,
.article-info span {
    font-size: 13px;
    font-weight: var(--weight-regular);
    line-height: 1.4;
}


/* =========================================================
   TABELLEN
   ========================================================= */

table th {
    font-size: 15px;
    font-weight: var(--weight-bold);
}

table td {
    font-size: 15px;
    font-weight: var(--weight-regular);
}

#sp-header {
	background: #FDC600;
}

.header-modules .mod-finder, .header-modules .sp-sign-in {
	display: none !important;
}

.burger-icon {
  width: 30px;
  cursor: pointer;
}

.burger-icon > span {
  height: 6px;
}

#modal-menu-toggler.active .burger-icon > span:nth-child(3) {
  transform: translate(0, -12px) rotate(45deg);
}

#modal-menu-toggler.active .burger-icon > span:nth-child(1) {
  transform: translate(0, 10px) rotate(-45deg);
}

/* =========================================================
   HAGEDORN MODAL-MENÜ – DESKTOP
   ========================================================= */

#modal-menu {
    position: fixed;
    inset: 0;
    z-index: 99999;

    width: 100%;
    height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;

    background:
        linear-gradient(
            rgba(255, 204, 0, 0.88),
            rgba(255, 204, 0, 0.88)
        ),
        url("/images/menu-background.jpg") center center / cover no-repeat;

    color: #000;
}


/* =========================================================
   MODAL EIN- UND AUSBLENDEN
   ========================================================= */

#modal-menu.modal-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

#modal-menu.modal-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   MODAL-INHALT OBEN AUSRICHTEN
   ========================================================= */

#modal-menu .modal-menu-inner {
    position: relative;

    /*
     * Helix zentriert diesen Bereich teilweise per Flexbox.
     * Deshalb display:block und die Ausrichtung überschreiben.
     */
    display: block !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 100%;
    min-height: 100%;
    height: auto !important;

    margin: 0 !important;

    /*
     * Oben bündig mit der Container-Oberkante.
     * Für etwas Abstand beispielsweise 30px 0 50px verwenden.
     */
    padding: 0 0 50px !important;

    background: transparent;
    transform: none !important;
}


/* =========================================================
   CONTAINER
   ========================================================= */

#modal-menu .container {
    position: relative;

    width: min(100% - 60px, 1200px);
    max-width: 1200px;

    margin: 0 auto !important;
    padding: 0 !important;
}


/* =========================================================
   HELIX-AUFTEILUNG AUFHEBEN
   ========================================================= */

#modal-menu .modal-menu-inner > .container > .row {
    display: block !important;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}

#modal-menu .modal-menu-inner > .container > .row > .col-sm-7 {
    display: block !important;
    float: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Alten rechten Helix-Bereich mit Suche,
 * Kontaktdaten und Social Icons ausblenden.
 */
#modal-menu .modal-menu-inner > .container > .row > .col-sm-5 {
    display: none !important;
}


/* =========================================================
   NAVIGATION ÜBER GANZE BREITE
   ========================================================= */

#modal-menu .sp-megamenu-wrapper {
    display: block !important;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}

#modal-menu .sp-megamenu-parent {
    display: block !important;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}


/* Leeres oberstes Helix-Element */

#modal-menu .sp-megamenu-parent > .sp-menu-item {
    position: static !important;

    display: block !important;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}


/* Leeren Heading-Span entfernen */

#modal-menu
.sp-megamenu-parent
> .sp-menu-item
> .sp-menu-heading {
    display: none !important;
}


/* =========================================================
   DROPDOWN NUR BEI GEÖFFNETEM MODAL ANZEIGEN
   ========================================================= */

#modal-menu.modal-menu.active
.sp-dropdown.sp-dropdown-main {
    position: static !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* Helix-Dropdown-Innenabstände entfernen */

#modal-menu .sp-dropdown-inner {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}


/* =========================================================
   VIER MENÜSPALTEN
   ========================================================= */

#modal-menu .sp-dropdown-inner > .row {
    display: grid !important;

    /*
     * Neu vier gleich breite Spalten.
     */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;

    gap: 45px;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}


/* Bootstrap-Spalten überschreiben */

#modal-menu
.sp-dropdown-inner
> .row
> [class*="col-"] {
    display: block !important;
    float: none !important;
    flex: none !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   LISTEN
   ========================================================= */

#modal-menu ul {
    list-style: none;
}

#modal-menu .sp-mega-group,
#modal-menu .sp-mega-group-child,
#modal-menu .sp-dropdown-items {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   HAUPTÜBERSCHRIFTEN
   ========================================================= */

#modal-menu .sp-group-title {
    display: block;

    margin: 0 0 18px;
    padding: 0 !important;

    font-family: "Radio Canada Big", Arial, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;

    color: #000 !important;
    text-decoration: none;

    background: transparent !important;
}


/* =========================================================
   UNTERMENÜPUNKTE
   ========================================================= */

#modal-menu
.sp-mega-group-child
> .sp-menu-item {
    display: block;

    margin: 0 0 10px;
    padding: 0;
}

#modal-menu
.sp-mega-group-child
> .sp-menu-item
> a {
    position: relative;

    display: inline-block;

    margin: 0;
    padding: 0 !important;

    font-family: "Radio Canada Big", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;

    color: #000 !important;
    text-decoration: none;

    background: transparent !important;

    transition: opacity 0.2s ease;
}

#modal-menu
.sp-mega-group-child
> .sp-menu-item
> a:hover {
    opacity: 0.55;
}


/* =========================================================
   AKTIVER MENÜPUNKT
   ========================================================= */

#modal-menu
.sp-mega-group-child
> .sp-menu-item.active
> a,

#modal-menu
.sp-mega-group-child
> .sp-menu-item.current-item
> a {
    padding-left: 0px !important;

    font-weight: 700 !important;
	color: white !important;
}

#modal-menu
.sp-mega-group-child
> .sp-menu-item.active
> a::before,

#modal-menu
.sp-mega-group-child
> .sp-menu-item.current-item
> a::before {
    content: "›";

    position: absolute;
    top: -1px;
    left: 0;

    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   HELIX-PFEILE UND VERSCHACHTELTE DROPDOWNS AUSBLENDEN
   ========================================================= */

#modal-menu .menu-toggler,
#modal-menu .sp-menu-badge,
#modal-menu .sp-dropdown-items .sp-dropdown {
    display: none !important;
}
/* =========================================================
   KONTAKTBEREICH – GLEICHE SPALTEN WIE DAS MENÜ
   ========================================================= */

#modal-menu .modal-contact-footer {
    display: grid;

    /* Exakt dieselbe Aufteilung wie oben im Menü */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 45px !important;
    align-items: start;

    width: 100%;

    margin-top: 45px;
    padding-top: 30px;

    border-top: 1px solid black;
}

#modal-menu .modal-contact-column {
    width: 100%;
    min-width: 0;

    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
}

#modal-menu .modal-contact-column strong {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
}

#modal-menu .modal-contact-column a {
    color: #000;
    text-decoration: none;
}

#modal-menu .modal-contact-column a:hover {
    text-decoration: underline;
}

/* Social Icons beginnen bündig an der vierten Spalte */
#modal-menu .modal-socials {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    gap: 20px;

    padding-top: 2px;
}

#modal-menu .modal-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #000;
    font-size: 15px;
    text-decoration: none;

    transition: opacity 0.2s ease;
}

#modal-menu .modal-socials a:hover {
    opacity: 0.55;
}

/* =========================================================
   EIGENER KONTAKTBEREICH UNTEN
   ========================================================= */

#modal-menu .modal-contact-footer {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr))
        auto;

    gap: 40px;
    align-items: start;

    margin-top: 45px;
    padding-top: 50px;

    border-top: 1px solid rgba(0, 0, 0, 0.5);
}

#modal-menu .modal-contact-column {
    font-family: "Radio Canada Big", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
}

#modal-menu .modal-contact-column strong {
    display: block;

    margin-bottom: 7px;

    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
}

#modal-menu .modal-contact-column a {
    color: #000;
    text-decoration: none;
}

#modal-menu .modal-contact-column a:hover {
    text-decoration: underline;
}


/* =========================================================
   SOCIAL ICONS
   ========================================================= */

#modal-menu .modal-socials {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 20px;

    padding-top: 2px;
}

#modal-menu .modal-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #000;
    font-size: 22px;
    text-decoration: none;

    transition: opacity 0.2s ease;
}

#modal-menu .modal-socials a:hover {
    opacity: 0.55;
}

#modal-menu {
	margin-top: 159px;
}


#modal-menu .modal-menu-inner > .container {
	align-items: unset !important;
margin-top: 50px !important;
}

/* Haupttitel der Menüspalten */
#modal-menu.modal-menu
ul.sp-megamenu-parent
.sp-dropdown
.sp-dropdown-inner
ul.sp-mega-group
> li.item-header
> a.sp-group-title {
    font-family: "Radio Canada Big", Arial, sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.4px !important;
    color: #000 !important;
	text-transform: none;
}


/* Normale Untermenüpunkte */
#modal-menu.modal-menu
ul.sp-megamenu-parent
.sp-dropdown
.sp-dropdown-inner
ul.sp-mega-group-child
> li.sp-menu-item
> a {
    font-family: "Radio Canada Big", Arial, sans-serif !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 35px !important;
}
/*
#modal-menu .sp-dropdown {
	border-bottom: 1px solid black !important;
}*/
/*
#modal-menu.modal-menu.active .sp-dropdown.sp-dropdown-main {
	border-bottom: 1px solid black !important;
}*/

#modal-menu .sp-mega-group-child > .sp-menu-item.active > a::before, #modal-menu .sp-mega-group-child > .sp-menu-item.current-item > a::before {
	display: none;
}

ul.social-icons, .article-ratings-social-share {
	display: none !important;
}

#sp-footer {
  background: #FDC600;
  color: black;
}

.startseite header {
	background: transparent !important;
	box-shadow: none !important;
}

.startseite #sp-slideshow-top {
	margin-top: -159px;
}

.startseite .burger-icon > span {
	background-color: #FDC600;
}

.startseite #sp-main-body .container {
	max-width: 900px;
}

#sp-main-body {
  padding: 150px 0 !important;
}

#sp-slideshow-top {
    position: relative;
    overflow: visible;
}

#sp-slideshow-top::after {
    content: "";
    position: absolute;

    width: 128px;
    height: 128px;

    right: 10%;
    bottom: -30px;

    background-image: url('/images/rechter-winkel-rechts.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    z-index: 20;
    pointer-events: none;
}

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

.hagedorn-footer {
    width: 100%;
    color: #000;

    font-family: "Radio Canada Big", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

.hagedorn-footer-inner {

    margin: 0 auto;
}


/* =========================================================
   LOGO + SOCIALS
   ========================================================= */

.footer-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 45px;
}

.footer-logo {
    display: block;
}

.footer-logo img {
    display: block;

    width: 155px;
    height: auto;
}

.footer-socials {
    display: flex;
    align-items: center;

    gap: 28px;

    padding-top: 10px;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #000 !important;

    font-size: 18px;

    text-decoration: none;

    transition: opacity 0.2s ease;
}

.footer-socials a:hover {
    opacity: 0.5;
}


/* =========================================================
   HAUPTBEREICH
   ========================================================= */

.footer-main {
    display: grid;

    /*
     * Intro ist breiter.
     * Danach fünf Navigationsspalten.
     */
    grid-template-columns:
        2.2fr
        0.9fr
        0.9fr
        1fr
        0.9fr
        0.9fr;

    gap: 45px;

    align-items: start;
}


/* =========================================================
   INTROTEXT
   ========================================================= */

.footer-intro {
    padding-right: 20px;
}

.footer-intro p {
    margin: 0;

    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
color: #1F384C;
}


/* =========================================================
   MENÜSPALTEN
   ========================================================= */

.footer-menu-column {
    min-width: 0;
}

.footer-menu-column > strong {
    display: block;

    margin-bottom: 16px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.footer-menu-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

/*
 * Erste Spalte "Aktuelles / Kontakt / Kundenportal"
 * hat im Screenshot keine separate Überschrift.
 */
.footer-menu-column ul li {
    margin: 0 0 0px;
    padding: 0;
}

.footer-menu-column ul li a {
    color: #000 !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-menu-column ul li a:hover {
    opacity: 0.5;
}


/*
 * Die drei Links Aktuelles/Kontakt/Kundenportal
 * sind fett.
 */
.footer-intro + .footer-menu-column ul li a {
    font-weight: 700;
}


/* =========================================================
   UNTERER BEREICH
   ========================================================= */

.footer-bottom {
    display: grid;

    /*
     * Vier Standortspalten,
     * danach flexibler Platz für Impressum/Datenschutz.
     */
    grid-template-columns:
        1fr
        1.25fr
        0.85fr
        1.55fr
        auto;

    gap: 35px;

    align-items: start;

    margin-top: 45px;
    padding-top: 35px;

    border-top: 1px solid rgba(0, 0, 0, 0.55);
}


/* =========================================================
   STANDORTE
   ========================================================= */

.footer-location {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.footer-location strong {
    display: block;

    margin-bottom: 10px;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
}

.footer-location span,
.footer-location > a {
    display: block;
}

.footer-location a {
    color: #000 !important;
    text-decoration: none;
}

.footer-location a:hover {
    text-decoration: underline;
}


/* =========================================================
   IMPRESSUM / DATENSCHUTZ
   ========================================================= */

.footer-legal {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;

    gap: 40px;

    padding-top: 10px;

    white-space: nowrap;
}

.footer-legal a {
    color: #000 !important;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  line-height: 24px;
}

.footer-legal a:hover {
    text-decoration: underline;
}

#sp-footer .container {
	padding-top: 30px;
}

#sp-footer .container-inner {
  border-top: none !important;
}

.footer-menu-column strong, div.footer-menu-column:nth-child(2) a {
	font-family: Radio Canada Big;
font-weight: 700;
font-style: Bold;
font-size: 18px;
line-height: 24px;
letter-spacing: 0.4px;

}

.footer-bottom strong {
	font-family: Radio Canada Big;
font-weight: 700;
font-style: Bold;
font-size: 18px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0.4px;

}

/* =========================================================
   KOMPETENZEN
   ========================================================= */

.competence-section {
    color: #000;
}

.competence-section .container {
    width: min(100% - 60px, 1200px);
    max-width: 1200px;

    margin: 0 auto;
    padding: 0;
}


/* =========================================================
   HEAD
   ========================================================= */

.competence-head {
    margin-bottom: 55px;
}

.competence-kicker {
    font-family: Radio Canada Big;
font-weight: 400;
font-style: Regular;
font-size: 20px;
leading-trim: NONE;
line-height: 80px;
letter-spacing: 0.4px;
margin-bottom: 12px;
}

.competence-head h2 {
   font-family: Radio Canada Big;
font-weight: 700;
font-style: Bold;
font-size: 60px !important;
leading-trim: NONE;
line-height: 60px  !important;
letter-spacing: 0.4px  !important;
margin: 0;
}


/* =========================================================
   GRID
   ========================================================= */

.competence-grid {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 0px;
}


/* =========================================================
   KACHEL
   ========================================================= */

.competence-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 220px;

    padding: 30px 20px;

    overflow: hidden;

    color: #000 !important;
    text-align: center;
    text-decoration: none !important;

    background: transparent;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* Hintergrundbild */
.competence-card::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background-image: var(--card-bg);
    background-size: cover;
    background-position: center;

    opacity: 0;

    transform: scale(1.04);

    transition:
        opacity 0.35s ease,
        transform 0.5s ease;
}


/* optional dunkler Overlay fürs Bild */
.competence-card::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background: rgba(0, 0, 0, 0.25);

    opacity: 0;

    transition: opacity 0.35s ease;
}


/* =========================================================
   ICON
   ========================================================= */

.competence-card img {
    position: relative;
    z-index: 2;

    display: block;

    width: 70px;
    height: 70px;

    margin-bottom: 24px;

    object-fit: contain;

    transition:
        filter 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   TITEL
   ========================================================= */

.competence-card span {
    position: relative;
    z-index: 2;

    font-family: "Radio Canada Big", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;

    transition: color 0.3s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.competence-card:hover::before {
    opacity: 1;
    transform: scale(1);
}

.competence-card:hover::after {
    opacity: 1;
}

.competence-card:hover {
    color: #fff !important;
}

.competence-card:hover span {
    color: #fff;
}


/*
 * Schwarzes SVG/PNG-Icon wird weiss.
 * Funktioniert ideal bei einfarbigen schwarzen Icons.
 */
.competence-card:hover img {
    filter: brightness(0) invert(1);
}

#sp-bottom {
	margin-bottom: 50px;
	background: #fdc600;
}

#sp-bottom {
	padding: 60px 0 80px;
}

/* =========================================================
   STACK GRID
   ========================================================= */

.hagedorn-stack-grid {
    padding: 100px 0 0px;
	margin-bottom: 100px;
}

.hagedorn-stack-grid .stack-grid-inner {
    width: min(100% - 60px, 1200px);
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   REIHEN
   ========================================================= */

.hagedorn-stack-grid .stack-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    position: relative;
}

.hagedorn-stack-grid .stack-row + .stack-row {
    margin-top: 110px;
}


/* =========================================================
   BILD
   ========================================================= */

.hagedorn-stack-grid .stack-media {
    position: relative;
    z-index: 1;
}

.hagedorn-stack-grid .stack-media > img:first-child {
    display: block;
    width: 100%;
    height: 560px;
    object-fit: cover;
}


/* =========================================================
   GELBER WINKEL
   ========================================================= */

.hagedorn-stack-grid .stack-corner {
    position: absolute;
    width: 128px;
    height: 128px;
    object-fit: contain;
    z-index: 3;
}

.hagedorn-stack-grid .stack-corner-left {
    left: 25px;
    bottom: -30px;
}

.hagedorn-stack-grid .stack-corner-right {
    right: 25px;
    bottom: -30px;
}


/* =========================================================
   CONTENT BOX
   ========================================================= */

.hagedorn-stack-grid .stack-content {
    position: relative;
    z-index: 2;

    background: #dfe5e5;

    min-height: 360px;
    padding: 70px 58px 92px;
}

.hagedorn-stack-grid .stack-content h3 {
    margin: 0 0 28px;
    font-family: "Radio Canada Big", Arial, sans-serif;
    font-size: 40px;
    line-height: 40px;
    font-weight: 700;
    color: #000;
}

.hagedorn-stack-grid .stack-content p {
    max-width: 320px;
    margin: 0;
    font-family: "Radio Canada Big", Arial, sans-serif;
    font-size: 18px;
    line-height: 35px;
	letter-spacing: 0.4px;
    font-weight: 400;
    color: #24384c;
}


/* =========================================================
   BUTTON
   ========================================================= */

.hagedorn-stack-grid .stack-button {
    position: absolute;
    bottom: 0;
    transform: translateY(50%);

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    min-width: 190px;
    padding: 20px 18px 18px 25px;

    background: #000;
    color: #fff !important;
    text-decoration: none !important;

    font-size: 20px;
  line-height: 24px;
  font-weight: 500;
}

.hagedorn-stack-grid .stack-button span {
    display: block;
}

.hagedorn-stack-grid .stack-button img {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
	margin-bottom: -8px;
}

.hagedorn-stack-grid .stack-button:hover {
    opacity: 0.85;
}


/* =========================================================
   ÜBERLAPPUNG / VERSATZ
   ========================================================= */

/* Oben: Box beginnt direkt nach dem Bild */
.hagedorn-stack-grid .stack-row-1 .stack-content {
    width: 100%;
    max-width: 465px;
    justify-self: start;
}

/* Unten: Box endet direkt am Bild */
.hagedorn-stack-grid .stack-row-2 .stack-content {
    width: 100%;
    max-width: 465px;
    justify-self: end;
}

.hagedorn-stack-grid .stack-row-2 .stack-media {
    z-index: 1;
}

.hagedorn-stack-grid .stack-row-2 .stack-content {
    z-index: 2;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {
    .hagedorn-stack-grid {
        padding: 70px 0 90px;
    }

    .hagedorn-stack-grid .stack-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hagedorn-stack-grid .stack-row + .stack-row {
        margin-top: 70px;
    }

    .hagedorn-stack-grid .stack-row-1 .stack-content,
    .hagedorn-stack-grid .stack-row-2 .stack-content {
        margin-left: 0;
        margin-right: 0;
    }

    .hagedorn-stack-grid .stack-row-2 .stack-content {
        order: 2;
    }

    .hagedorn-stack-grid .stack-row-2 .stack-media {
        order: 1;
    }

    .hagedorn-stack-grid .stack-media > img:first-child {
        height: 380px;
    }

    .hagedorn-stack-grid .stack-content {
        min-height: auto;
        padding: 45px 30px 90px;
    }

    .hagedorn-stack-grid .stack-content h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .hagedorn-stack-grid .stack-button {
        left: 30px;
    }

    .hagedorn-stack-grid .stack-corner {
        width: 58px;
        height: 58px;
    }
}

div.stack-content:nth-child(2) > a:nth-child(3) {
  right: 0px;
  bottom: 31px;
}


div.stack-content:nth-child(1) > a:nth-child(3) {
  left: 0px !important;
  bottom: 31px;
}

/* =========================================================
   INSIGHTS SLIDER
   ========================================================= */

.insights-slider {
    position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 2 / 1;
  overflow: visible;
}


/* =========================================================
   SLIDES
   ========================================================= */

.insight-slide {
    position: absolute;
    inset: 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    opacity: 0;
    visibility: hidden;

    transform: translateY(0px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        visibility 0.7s ease;

    pointer-events: none;
}

.insight-slide.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================================
   BILD
   ========================================================= */

.insight-image {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.insight-image > img:first-child {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   GELBER WINKEL
   ========================================================= */

.insight-image .insight-corner {
    position: absolute;

    z-index: 5;

    width: 128px;
    height: 128px;

    object-fit: contain;

    pointer-events: none;
}


/* Bild links */
.insight-slide.image-left .insight-corner {
    left: 25px;
    bottom: -30px;
}


/* Bild rechts */
.insight-slide.image-right .insight-corner {
    right: 25px;
    bottom: -30px;

    /* falls dein SVG ein linker Winkel ist */
    transform: scaleX(-1);
}


/* =========================================================
   GELBE CONTENT-FLÄCHE
   ========================================================= */

.insight-content {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px;

    background: #ffcc00;

    color: #000;

    text-align: center;
}

.insight-content > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================================
   INSIGHTS TYPOGRAFIE
   ========================================================= */

.insight-overline,
.insight-title {
    display: block;

    font-family: "Radio Canada Big", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-style: normal;

    font-size: 40px !important;
    line-height: 40px !important;
    letter-spacing: 0.4px;

    text-align: center;

    margin: 0;
}


/* Grosse Zahl */

.insight-number {
    display: block;

    font-family: "Radio Canada Big", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-style: normal;

    font-size: 130px !important;
    line-height: 120px !important;
    letter-spacing: 0.4px;

    text-align: center;

    margin: 0;
}


/* Abstände zwischen den drei Zeilen */

.insight-overline {
    margin-bottom: 4px;
}

.insight-number + .insight-title {
    margin-top: 5px;
}


/* =========================================================
   ICON-SLIDES
   ========================================================= */

.insight-icon {
    display: block;

    width: 75px;
    height: 75px;

    margin: 18px auto 10px;

    object-fit: contain;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    .insights-slider {
        aspect-ratio: auto;
        height: 500px;
    }

    .insight-slide {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    /*
     * Auch bei image-right auf Mobile:
     * Bild zuerst, Text danach.
     */
    .insight-slide.image-right .insight-image {
        order: 1;
    }

    .insight-slide.image-right .insight-content {
        order: 2;
    }

    .insight-number {
        font-size: 64px;
    }

    .insight-title {
        font-size: 19px;
    }

    .insight-overline {
        font-size: 17px;
    }
}

.insights-slider {
	margin: 0 auto;
}

#sp-bottom-3 {
	padding-top: 150px;
  padding-bottom: 150px;
}

/* NEWS */
/* =========================================================
   HAGEDORN NEWS FLOW
   ========================================================= */

.hagedorn-news {
    --hnews-yellow: #ffcc00;
    --hnews-text: #000;
    --hnews-muted: #24384c;
    --hnews-gap: 60px;
	
    width: 100%;

    color: var(--hnews-text);

    font-family: "Radio Canada Big", Arial, sans-serif;
}


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

.hnews-head {
    display: grid;

    grid-template-columns:
        minmax(250px, 0.85fr)
        minmax(420px, 1.35fr);

    align-items: start;

    column-gap: 80px;

    margin-bottom: 90px;
}


/* =========================================================
   TITEL LINKS
   ========================================================= */

.hnews-title-block {
    min-width: 0;
}


/* Kicker */

.hnews-kicker {
    margin: 0 0 0px;
  color: #000;
  font-family: Radio Canada Big;
  font-weight: 400;
  font-size: 20px;
  line-height: 80px;
  letter-spacing: 0.4px;
}


/* Haupttitel */

.hnews-heading {
    margin: 0 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 60px !important;
  line-height: 60px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  color: #000 !important;
}


/* =========================================================
   RECHTER NAVIGATIONSBEREICH
   ========================================================= */

.hnews-navigation {
	position: relative;
  bottom: -50px;
    display: grid;

    /*
     * Filter links,
     * Alle News ganz rechts.
     */
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: start;

    column-gap: 65px;

    padding-top: 32px;
}


/* =========================================================
   FILTER
   ========================================================= */

.hnews-filters {
    display: grid;

    /*
     * Wie im Screenshot:
     *
     * Aktuelle Baustellen    Events
     * Projektfortschritten   Jobs & Lernende
     */
    grid-template-columns:
        repeat(2, minmax(130px, 1fr));

    column-gap: 50px;
    row-gap: 8px;

    align-items: start;
}


/* Filterbutton */

.hnews-filter {
    appearance: none;

    position: relative;

    display: flex;
    align-items: center;

    width: max-content;

    border: 0;
    border-radius: 0;

    margin: 0;
    padding: 0;

    background: transparent;

    font-family: "Radio Canada Big", Arial, sans-serif !important;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;

    color: #000;

    text-align: left;

    cursor: pointer;

    transition: opacity 0.2s ease;
}


/* Alte Underline entfernen */

.hnews-filter::after {
    display: none !important;
}


/* Hover */

.hnews-filter:hover {
    opacity: 0.55;
}


/* Aktiver Filter */

.hnews-filter.is-active {
    font-weight: 700;
}


/*
 * Kleiner Pfeil VOR aktivem Filter
 * wie im Screenshot
 */

.hnews-filter.is-active::before {
    content: "›";

    display: inline-block;

    margin-right: 7px;

    font-size: 16px;
    line-height: 1;

    font-weight: 700;
}


/* =========================================================
   ALLE NEWS
   ========================================================= */

.hnews-all-link {
    white-space: nowrap;
  color: #000 !important;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.4px;
  text-align: right;
}


.hnews-all-link:hover {
    opacity: 0.55;
}


/* Gelber Pfeil */

.hnews-all-arrow {
   display: inline-block;
  color: #ffcc00;
  font-size: 31px;
  font-weight: 400;
  transition: transform 0.2s ease;
  bottom: -3px;
  position: relative;
  right: -20px;
}


.hnews-all-link:hover .hnews-all-arrow {
    transform:
        translate(4px, -1px);
}


/* Filter Button */

.hnews-filter {
    appearance: none;
  position: relative;
  border: 0;
  border-radius: 0;
  padding: 0 0 7px;
  background: transparent;
  color: #1F384C;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 20px;
  line-height: 20px;
  font-weight: 400;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.hnews-filter.is-active::before {
	display: none;
}

.hnews-filter.is-active {
  font-weight: 700;
  color: black;
}

button.hnews-filter:nth-child(1) {
	display: none;
}


/* Unterstrich */

.hnews-filter::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: #000;

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform 0.25s ease;
}


.hnews-filter:hover {
    opacity: 0.55;
}


.hnews-filter.is-active::after {
    transform: scaleX(1);
}


.hnews-filter:disabled {
    cursor: default;
}


/* =========================================================
   HORIZONTALER NEWS FLOW
   ========================================================= */

.hnews-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;

    /*
     * Genau 3 Cards innerhalb der normalen Contentbreite.
     */
    grid-auto-columns:
        calc(
            (var(--hnews-content-width) - (var(--hnews-gap) * 2))
            / 3
        );

    gap: var(--hnews-gap);

    /*
     * Scroller selbst über die gesamte Bildschirmbreite.
     */
    width: 100vw;

    /*
     * Von seiner eigentlichen Position zurück
     * bis ganz an den linken Bildschirmrand.
     */
    margin-left:
        calc(var(--hnews-screen-offset) * -1);

    margin-right: 0;

    /*
     * Erste Card beginnt trotzdem exakt dort,
     * wo auch der Titel beginnt.
     */
    padding-left: var(--hnews-screen-offset);

    /*
     * Rechts etwas Luft nach der letzten Card.
     */
    padding-right: var(--hnews-screen-offset);

    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: none !important;
    scroll-behavior: auto !important;

    scrollbar-width: none;

    cursor: grab;

    user-select: none;
    -webkit-user-select: none;

    touch-action: pan-x pan-y;

    overscroll-behavior-x: contain;
}

.hnews-grid::-webkit-scrollbar {
    display: none;
}


/* Während Drag */

.hnews-grid.is-dragging {
    cursor: grabbing;
}


/* =========================================================
   BILDER NICHT NATIV DRAGBAR
   ========================================================= */

.hnews-grid img {
    -webkit-user-drag: none;
    user-drag: none;

    user-select: none;
    -webkit-user-select: none;

    pointer-events: none;
}


/*
 * Link selbst bleibt natürlich anklickbar.
 * Pointer Events vom Bild landen dadurch auf der Card / dem Link.
 */
.hnews-card__link {
    cursor: inherit;
}


/* Optional: während Drag Text/Links nicht markieren */

.hnews-grid.is-dragging,
.hnews-grid.is-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
}


.hnews-grid::-webkit-scrollbar {
    display: none;
}


.hnews-grid.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}


.hagedorn-news.is-loading .hnews-grid {
    opacity: 0.35;

    pointer-events: none;
}


/* =========================================================
   CARD
   ========================================================= */

.hnews-card {
    min-width: 0;

    margin: 0;

    background: transparent;

    scroll-snap-align: start;
}


/* Link */

.hnews-card__link {
    display: flex;

    height: 100%;

    flex-direction: column;

    color: #000 !important;

    text-decoration: none !important;
}


/* =========================================================
   BILD
   ========================================================= */

.hnews-card__media {
    position: relative;

    width: 100%;

    /*
     * Im Layout ungefähr quadratisch.
     */
    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #dfe5e5;
}


.hnews-card__media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.001);

    transition: transform 0.5s ease;
}


.hnews-card:hover
.hnews-card__media img {
    transform: scale(1.035);
}


/* =========================================================
   TEXTBEREICH
   ========================================================= */

.hnews-card__body {
    display: flex;

    flex: 1 1 auto;
    flex-direction: column;

    /*
     * Kein klassischer Card-Look mehr.
     * Text direkt unter dem Bild.
     */
    padding: 20px 0 0;
}


/* Datum / Kategorie im Ziel-Layout nicht sichtbar */

.hnews-card__meta {
    display: none !important;
}


/* =========================================================
   TITEL
   ========================================================= */

.hnews-card__title {
    margin: 0 0 13px !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 25px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  color: #000 !important;
}


/* =========================================================
   INTRO
   ========================================================= */

.hnews-card__intro {
   display: -webkit-box;
  overflow: hidden;
  margin: 0 0 25px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--hnews-muted);
  font-family: Radio Canada Big;
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0.4px;
}


/* =========================================================
   MEHR LESEN
   ========================================================= */

.hnews-card__more {
    display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 13px;
  margin-top: auto;
  padding-top: 10px;
  color: #000;
  font-family: Radio Canada Big;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.4px;
  text-align: right;
}


/* Gelber Pfeil */

.hnews-card__more > span {
    display: inline-block;

    color: var(--hnews-yellow);

    font-size: 27px;
    line-height: 0.7;

    font-weight: 400;

    transform: translateY(-1px);

    transition: transform 0.2s ease;
}


.hnews-card:hover
.hnews-card__more > span {
    transform:
        translate(5px, -1px);
}


/* =========================================================
   LOAD MORE KOMPLETT AUSBLENDEN
   ========================================================= */

.hnews-actions,
.hnews-loadmore {
    display: none !important;
}


/* =========================================================
   EMPTY
   ========================================================= */

.hnews-empty {
    margin: 0;

    padding: 30px 0;

    font-size: 15px;

    grid-column: auto;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .hnews-head {
        grid-template-columns: 1fr;

        gap: 28px;

        margin-bottom: 40px;
    }


    .hnews-heading {
        font-size: 42px !important;
    }


    .hnews-filters {
        gap: 12px 24px;
    }


    /*
     * Tablet: zwei Cards sichtbar.
     */
    .hnews-grid {
        grid-auto-columns:
            calc(
                (100% - var(--hnews-gap))
                / 2
            );
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .hnews-heading {
        font-size: 36px !important;
    }


    .hnews-filters {
        flex-wrap: nowrap;

        width: 100%;

        overflow-x: auto;

        padding-bottom: 4px;

        scrollbar-width: none;
    }


    .hnews-filters::-webkit-scrollbar {
        display: none;
    }


    /*
     * Mobile: eine Card + kleiner Ausblick
     * auf die nächste.
     */
    .hnews-grid {
        --hnews-gap: 18px;

        grid-auto-columns: 86%;
    }


    .hnews-card__title {
        font-size: 19px !important;
    }
}

#sp-news {
	background: #E5EDED;
  	padding-top: 100px;
  	padding-bottom: 100px;
}

#sp-footer {
	padding-bottom: 50px;
}

/* =========================================================
   TESTIMONIALS / KUNDEN
   ========================================================= */

.client-widget {
    width: min(100% - 60px, 1200px);
    max-width: 1200px;

    margin: 0 auto;
    padding: 100px 0;

    font-family: "Radio Canada Big", Arial, sans-serif;

    color: #000;
}


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

.client-widget-head {
    margin-bottom: 55px;
}

.client-widget-kicker {
    margin-bottom: 0px;
  color: #24384c;
  font-family: Radio Canada Big;
  font-weight: 400;
  font-size: 20px;
  line-height: 80px;
  letter-spacing: 0.4px;
}

.client-widget-head h2 {
   margin: 0;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #000 !important;
  font-size: 60px;
  line-height: 60px;
  letter-spacing: 0.4px;
}


/* =========================================================
   GESAMT-LAYOUT
   ========================================================= */

.client-widget-body {
    display: grid;

    /*
     * Linker Block relativ schmal,
     * rechter Bildbereich deutlich grösser.
     */
    grid-template-columns:
        330px
        minmax(0, 1fr);

    align-items: start;

    position: relative;
}


/* =========================================================
   LINKE BOX
   ========================================================= */

.client-widget-nav {
    position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  margin-top: 55px;
  min-height: 420px;
  background: #dfe7e8;
}


/*
 * Die rechte Seite der Box läuft etwas unter das Bild.
 */
.client-widget-nav {
    margin-right: -70px;
	bottom: -70px;
}


.client-widget-nav-inner {
    padding: 58px 50px 95px;
}


.client-widget-nav h3 {
   margin: 0 0 25px;
  color: #000 !important;
  font-family: Radio Canada Big;
  font-weight: 700;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0.4px;
}


/* =========================================================
   AUSWAHL
   ========================================================= */

.client-widget-tabs {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}


.client-widget-tab {
    appearance: none;
  position: relative;
  display: block;
  border: 0;
  margin: 0;
  padding: 0 0 0 13px;
  background: transparent;
  font-family: "Radio Canada Big", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
  text-align: left;
  transition: color 0.2s ease, transform 0.2s ease;
	color: #1F384C !important;
}


/* kleiner Punkt links */

.client-widget-tab::before {
    content: "•";

    position: absolute;

    top: 0;
    left: 0;

    color: currentColor;
}


.client-widget-tab:hover {
    color: #000;
}


.client-widget-tab.is-active {
    color: #87A2B8 !important;
}


/* =========================================================
   OFFERTE BUTTON
   ========================================================= */

.client-widget-button {
    position: absolute;

    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 210px;

    padding: 18px 18px 17px 22px;

    background: #000;

    color: #fff !important;

  font-size: 19px;
  font-weight: 700;
  line-height: 24px;

    text-decoration: none !important;

    transition: 0.2s ease;
}


/* gelber Winkel rechts */

.client-widget-button-corner {
    display: block;

    width: 14px;
    height: 14px;

    border-right: 3px solid #ffcc00;
    border-bottom: 3px solid #ffcc00;
}


/* =========================================================
   RECORD-BEREICH
   ========================================================= */

.client-widget-records {
    position: relative;
    z-index: 3;

    min-width: 0;

    /*
     * Dadurch liegen alle Records exakt übereinander.
     */
    display: grid;
}


.client-widget-record {
    grid-area: 1 / 1;

    position: relative;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(10px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0.35s ease;
}


.client-widget-record.is-active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}


/* =========================================================
   BILD
   ========================================================= */

.client-widget-image {
    width: 100%;

    aspect-ratio: 1.9 / 1;

    overflow: hidden;

    background: #ddd;
}


.client-widget-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.015);

    transition: transform 0.6s ease;
}


.client-widget-record.is-active
.client-widget-image img {
    transform: scale(1);
}


/* =========================================================
   ZITAT
   ========================================================= */

.client-widget-testimonial {
    /*
     * Im Screenshot beginnt das Zitat deutlich
     * eingerückt unterhalb des Bildes.
     */
    max-width: 600px;

    margin-left: 130px;

    padding-top: 32px;
}


.client-widget-testimonial blockquote {
   margin: 0 0 15px;
  font-family: "Radio Canada Big", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 31px;
  color: #24384c;
}


.client-widget-author {
    font-family: "Radio Canada Big", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #24384c;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .client-widget-body {
        grid-template-columns: 1fr;
    }


    .client-widget-nav {
        margin-top: 0;
        margin-right: 0;

        min-height: 0;
    }


    .client-widget-nav-inner {
        padding: 40px 30px 85px;
    }


    .client-widget-records {
        margin-top: 30px;
    }


    .client-widget-testimonial {
        margin-left: 0;

        padding-top: 25px;
    }


    .client-widget-head h2 {
        font-size: 40px !important;
    }
}


#modal-menu-toggler .burger-icon span {
    transition: transform 0.3s ease;
}

body:not(.modal-menu-active) #modal-menu-toggler:hover .burger-icon span:nth-child(1) {
    transform: translateX(4px);
}

body:not(.modal-menu-active) #modal-menu-toggler:hover .burger-icon span:nth-child(2) {
    transform: translateX(-12px);
}

body:not(.modal-menu-active) #modal-menu-toggler:hover .burger-icon span:nth-child(3) {
    transform: translateX(11px);
}

/* =========================================================
   BUTTON HOVER
   ========================================================= */

.client-widget-button:hover,
.stack-button:hover {
    background: #fdc600;
}

.client-widget-button:hover span,
.stack-button:hover span {
    color: #000 !important;
}


/* =========================================================
   CLIENT BUTTON – CSS WINKEL
   ========================================================= */

.client-widget-button-corner {
    display: block;

    width: 14px;
    height: 14px;

    border-right: 3px solid #ffcc00;
    border-bottom: 3px solid #ffcc00;

    transform: rotate(0deg);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}

.client-widget-button:hover .client-widget-button-corner {
    transform: rotate(-45deg);

    border-right-color: #000;
    border-bottom-color: #000;
}


/* =========================================================
   STACK BUTTON – SVG IMG
   ========================================================= */

.stack-button img {
    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.stack-button:hover img {
    transform: rotate(-45deg);

    /*
     * Dein gelbes SVG wird schwarz.
     */
    filter: brightness(0);
}

.stack-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

.stack-button img {
    display: block;

    width: 18px;
    height: 18px;

    margin: 0 !important;
    flex: 0 0 18px;

    align-self: center;

    transform-origin: center center;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.stack-button:hover img {
    transform: rotate(-45deg);

    filter: brightness(0);
}

/* =========================================================
   GEMEINSAMER FULLSCREEN-HINTERGRUND
   ========================================================= */

.hagedorn-menu-background {
    position: fixed;

    inset: 0;

    z-index: 99980;

    width: 100vw;
    height: 100vh;

    background:
        linear-gradient(
            rgba(255, 204, 0, 0.88),
            rgba(255, 204, 0, 0.88)
        ),
        url("/images/menu-background.jpg")
        center center / cover no-repeat;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* Wenn Menü offen */

body.hagedorn-menu-open
.hagedorn-menu-background {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   HEADER DARÜBERLEGEN
   ========================================================= */

body.hagedorn-menu-open #sp-header {
    position: relative;

    z-index: 99990 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
}


/* Helix legt teilweise Backgrounds auf innere Bereiche */

body.hagedorn-menu-open #sp-header .container,
body.hagedorn-menu-open #sp-header .container-fluid,
body.hagedorn-menu-open #sp-header .row,
body.hagedorn-menu-open #sp-header .sp-column {
    background: transparent !important;
}


/* =========================================================
   MODAL EBENFALLS TRANSPARENT
   ========================================================= */

body.hagedorn-menu-open #modal-menu {
    z-index: 99991 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}


body.hagedorn-menu-open
#modal-menu .modal-menu-inner {
    background: transparent !important;
}


/* Falls Dropdown selbst eine Fläche bekommt */

body.hagedorn-menu-open
#modal-menu .sp-dropdown,

body.hagedorn-menu-open
#modal-menu .sp-dropdown-inner {
    background: transparent !important;
}

#sp-header {
    background: linear-gradient(
        0deg,
        rgba(217, 217, 217, 0) 0%,
        rgba(255, 255, 255, 0.41) 100%
    ) !important;
}

.referenzen #sp-slideshow-top {
	margin-top: -159px;
}

.referenzen #sp-main-body {
	padding-top: 0px !important;
}

#sp-header {
	box-shadow: none !important;
}

#sp-scroll-up {
	display: none !important;
}

.hreferences-filter {
  font-size: 18px !important;
}

.hreferences-kicker {
  margin-bottom: 14px;
  font-size: 20px !important;
}

.hreferences-heading {
	font-size: 60px !important;
}

.hreferences-filter.is-active::before {
  content: "›";
  position: absolute;
  top: 4px !important;
  left: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.hreferences-search__icon::after {
  content: "";
  position: absolute;
  right: -8px !important;
  bottom: 0px!important;
  width: 9px;
  height: 3px;
  background: #fdc600;
  transform: rotate(45deg);
  transform-origin: left center;
}

.hreferences-current-category {
  font-size: 30px !important;
  font-weight: 700;
  line-height: 1.2;
}

.hreference-item__date {
  font-size: 18px !important;
  font-weight: 400;
  line-height: 30px !important;
}

.hreference-item__title {
  max-width: 490px !important;
  margin: 0 0 6px !important;
  color: #000 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 45px !important;
  font-weight: 700 !important;
  line-height: 0.96 !important;
  letter-spacing: 0.4px !important;
}

.hreference-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48%;
  align-items: stretch;
  height: 200px;
  min-height: 132px;
  border-bottom: 0;
  color: #000 !important;
  text-decoration: none !important;
  overflow: hidden;
  transition: height 0.34s cubic-bezier(.4, 0, .2, 1);
}

.hreference-item:hover {
  height: 250px;
}

.hreference-item__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(calc(50% - 60px) 0 calc(50% - 41px) 0);
  transform: scale(1.001);
  transform-origin: center center;
  transition: clip-path 0.25s cubic-bezier(.4, 0, .2, 1), transform 0.10s ease;
}

.referenz-detail #sp-header {
	background: #fdc600 !important;
}

.referenz-detail #sp-main-body {
	padding-top: 150px !important;
}

.referenz-detail #sp-slideshow-top {
	display: none !important;
}

.reference-detail-corner {
  position: absolute;
  right: 68px;
  bottom: -26px;
  width: 128px;
  height: 128px;
  border-right: 26px solid #fdc600;
  border-bottom: 26px solid #fdc600;
  pointer-events: none;
}

.reference-compare-section {
	margin-top: 150px;
}

.reference-detail-top {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 84px;
  align-items: start;
  margin-bottom: 92px;
}

.hagedorn-reference-detail .reference-detail-title {
  margin: 0 0 10px !important;
  max-width: 420px;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 50px !important;
  line-height: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: #000 !important;
}

.reference-detail-period {
  font-size: 17px !important;
  line-height: 30px !important;
  font-weight: 400 !important;
  color: #1F384C;
}

.reference-detail-description {
  max-width: 405px;
  margin: 34px 0 26px;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #24384c;
}

.reference-detail-meta-row dt, .reference-detail-meta-row dd {
  margin: 0 !important;
  padding: 0;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.38 !important;
  color: #24384c !important;
}

.reference-detail-navigation a {
  color: #000 !important;
  text-decoration: none !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.reference-nav-arrow {
  font-size: 28px;
  line-height: 0.7;
  font-weight: 400;
  margin-top: -3px;
}

.reference-search-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: none !important;
}

.referenz-detail .burger-icon > span {
  background-color: black !important;
}

.offene-stellen #sp-slideshow-top {
	margin-top: -159px;
}

.lehrstellen-content {
    max-width: 900px;
    font-family: "Radio Canada Big", Arial, sans-serif;
    color: #173044;
}

.lehrstellen-kicker {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #000;
}

.lehrstellen-content h2 {
    margin: 0 0 28px;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: #000;
}

.lehrstellen-content p {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.6;
}

.lehrstellen-content ul {
    margin: 0;
    padding-left: 18px;
}

.lehrstellen-content li {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.5;
}

.offene-stellen #sp-bottom {
	background: #E5EDED;
}

.hagedorn-apprenticeships {
  width: 100%;
  padding: 0px;
  background: #E5EDED;
  box-sizing: border-box;
  font-family: "Radio Canada Big", Arial, sans-serif;
  color: var(--hagedorn-text);
}

.offene-stellen #sp-main-body {
  padding: 100px 0 !important;
}

.lehrstellen-kicker {
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 400;
  color: #000;
  line-height: 80px;
}

.lehrstellen-content h2 {
  margin: 0 0 28px;
  font-size: 40px;
  line-height: 40px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.4px;
}

.lehrstellen-content p {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 35px;
}

.offene-stellen #sp-bottom {
  padding: 100px 0 100px;
}

.hagedorn-apprenticeships__heading {
  padding: 0;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 60px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  color: #000 !important;
  text-align: center;
  margin-bottom: 70px !important;
}

.hagedorn-apprenticeships__title {
  margin: 0 0 16px !important;
  max-width: unset;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 40px !important;
  line-height: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  color: #000 !important;
}


.hagedorn-apprenticeships__intro {
  margin: 0 !important;
  max-width: 570px;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  color: #1F384C;
}

.hagedorn-apprenticeships__more {
  white-space: nowrap;
  font-size: 19px;
  line-height: 1;
  font-weight: 700;
}

.hagedorn-apprenticeships__note {
  max-width: 780px;
  margin: 58px 0 0 60px;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  color: #1c3445;
	letter-spacing: 0.4px;
}

/* =========================================================
   CAREER HERO
   ========================================================= */

.career-hero {
    position: relative;

    width: 100%;
    min-height: 670px;

    overflow: visible;

    font-family: "Radio Canada Big", Arial, sans-serif;

    background: #000;
}


/* =========================================================
   VIDEO
   ========================================================= */

.career-hero-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}


/* leichte Abdunklung */

.career-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.38) 0%,
            rgba(0, 0, 0, 0.08) 65%,
            rgba(0, 0, 0, 0.12) 100%
        );
}


/* =========================================================
   INNER CONTAINER
   ========================================================= */

.career-hero-container {
    position: relative;

    z-index: 2;

    width: min(100% - 60px, 1200px);
    max-width: 1200px;

    min-height: 670px;

    margin: 0 auto;
}


/* =========================================================
   TITEL
   ========================================================= */

.career-hero-content {
    padding-top: 58px;

    color: #fff;
}


.career-hero-kicker {
    margin-bottom: 18px;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}


.career-hero-content h2 {
    margin: 0 !important;

    font-family: "Radio Canada Big", Arial, sans-serif !important;

    font-size: 52px !important;
    line-height: 0.95 !important;
    font-weight: 700 !important;

    letter-spacing: -0.8px;

    color: #fff !important;
}


/* =========================================================
   LINKS UNTEN
   ========================================================= */

.career-hero-links {
    position: absolute;

    left: 0;
    bottom: 42px;

    display: flex;

    gap: 22px;
}


.career-outline-button {
    display: flex;

    align-items: center;

    width: 220px;
    min-height: 64px;

    padding: 10px 25px;

    border: 1px solid #fdc600;

    font-size: 16px;
    line-height: 1.05;
    font-weight: 700;

    color: #fdc600 !important;

    text-decoration: none !important;

    background: rgba(0, 0, 0, 0.15);

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


.career-outline-button:hover {
    background: #fdc600;

    color: #000 !important;
}


/* =========================================================
   BEWERBUNGSBOX
   ========================================================= */

.career-apply {
    position: absolute;

    right: 0;
    bottom: -58px;

    width: 315px;

    padding: 31px 32px 25px;

    background: #fdc600;

    color: #000;
}


.career-apply h3 {
    margin: 0 0 24px !important;

    font-family: "Radio Canada Big", Arial, sans-serif !important;

    font-size: 24px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;

    color: #000 !important;
}


/* =========================================================
   FORM
   ========================================================= */

.career-field {
    position: relative;

    border-bottom: 1px solid rgba(0, 0, 0, 0.55);
}


.career-field input,
.career-field select {
    display: block;

    width: 100%;
    height: 40px;

    padding: 0;

    border: 0;
    outline: 0;

    border-radius: 0;

    background: transparent;

    font-family: "Radio Canada Big", Arial, sans-serif;

    font-size: 12px;
    font-weight: 400;

    color: #000;
}


.career-field input::placeholder {
    color: #000;

    opacity: 1;
}


.career-field select {
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
}


/* eigener Select-Pfeil */

.career-field-select::after {
    content: "";

    position: absolute;

    right: 3px;
    top: 50%;

    width: 7px;
    height: 7px;

    border-right: 1.5px solid #000;
    border-bottom: 1.5px solid #000;

    transform:
        translateY(-70%)
        rotate(45deg);

    pointer-events: none;
}


/* =========================================================
   SENDEN
   ========================================================= */

.career-submit {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 20px;

    width: 100%;

    margin-top: 28px;
    padding: 0;

    border: 0;

    background: transparent;

    font-family: "Radio Canada Big", Arial, sans-serif;

    font-size: 14px;
    line-height: 1.05;
    font-weight: 700;

    color: #000;

    text-align: right;

    cursor: pointer;
}


.career-submit-arrow {
    display: block;

    font-size: 38px;
    line-height: 0.7;

    font-weight: 400;

    transition:
        transform 0.25s ease;
}


.career-submit:hover .career-submit-arrow {
    transform: translateX(5px);
}


/* =========================================================
   CAREER HERO
   ========================================================= */

.career-hero {
    position: relative;
    width: 100%;
    height: 465px;
    overflow: visible;

    font-family: "Radio Canada Big", Arial, sans-serif;

    background: #000;
}


/* VIDEO */

.career-hero-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;
}


/* leichte Abdunklung */

.career-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(0, 0, 0, 0.18);
}


/* =========================================================
   CONTENT CONTAINER
   ========================================================= */

.career-hero-container {
    position: relative;
    z-index: 2;

    width: min(100% - 120px, 1200px);
    height: 100%;

    margin: 0 auto;
}


/* =========================================================
   TITEL
   ========================================================= */

.career-hero-content {
    padding-top: 38px;
    color: #fff;
}


.career-hero-kicker {
    margin-bottom: 13px;

    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
}


.career-hero-content h2 {
    margin: 0 !important;

    font-family: "Radio Canada Big", Arial, sans-serif !important;
    font-size: 36px !important;
    line-height: 0.98 !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px;

    color: #fff !important;
}


/* =========================================================
   BUTTONS LINKS UNTEN
   ========================================================= */

.career-hero-links {
    position: absolute;

    left: 0;
    bottom: 30px;

    display: flex;
    gap: 14px;
}


.career-outline-button {
    display: flex;
    align-items: center;

    width: 155px;
    height: 46px;

    padding: 0 18px;
    box-sizing: border-box;

    border: 1px solid #fdc600;

    background: rgba(0, 0, 0, 0.18);

    font-size: 13px;
    line-height: 1.05;
    font-weight: 700;

    color: #fdc600 !important;
    text-decoration: none !important;

    transition:
        background-color .25s ease,
        color .25s ease;
}


.career-outline-button:hover {
    background: #fdc600;
    color: #000 !important;
}


/* =========================================================
   BEWERBUNGSBOX
   ========================================================= */

.career-apply {
    position: absolute;

    right: 0;
    bottom: -40px;

    width: 215px;

    padding: 20px 22px 17px;

    box-sizing: border-box;

    background: #fdc600;
    color: #000;
}


.career-apply h3 {
    margin: 0 0 13px !important;

    font-family: "Radio Canada Big", Arial, sans-serif !important;

    font-size: 17px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;

    color: #000 !important;
}


/* =========================================================
   FORMULAR
   Template-Styles bewusst überschreiben
   ========================================================= */

.career-apply-form {
    margin: 0;
}


.career-field {
    position: relative;

    height: 27px;

    border-bottom: 1px solid rgba(0, 0, 0, .55);
}


.career-field input,
.career-field select {
    display: block !important;

    width: 100% !important;
    height: 27px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;

    background: transparent !important;
    background-color: transparent !important;

    font-family: "Radio Canada Big", Arial, sans-serif !important;

    font-size: 10px !important;
    line-height: 27px !important;
    font-weight: 400 !important;

    color: #000 !important;
}


.career-field input::placeholder {
    color: #000 !important;
    opacity: 1 !important;
}


.career-field select {
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
}


/* Select Pfeil */

.career-field-select::after {
    content: "";

    position: absolute;

    top: 9px;
    right: 2px;

    width: 5px;
    height: 5px;

    border-right: 1px solid #000;
    border-bottom: 1px solid #000;

    transform: rotate(45deg);

    pointer-events: none;
}


/* =========================================================
   SEND BUTTON
   ========================================================= */

.career-submit {
    display: flex !important;

    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    width: 100% !important;

    margin: 15px 0 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    font-family: "Radio Canada Big", Arial, sans-serif !important;

    font-size: 10px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;

    color: #000 !important;

    text-align: right;

    cursor: pointer;
}


.career-submit:hover {
    background: transparent !important;
    color: #000 !important;
}


.career-submit-arrow {
    display: block;

    font-size: 28px;
    line-height: .7;

    transition: transform .25s ease;
}


.career-submit:hover .career-submit-arrow {
    transform: translateX(4px);
}


/* =========================================================
   WICHTIG:
   Bereich NACH Hero weiss lassen
   ========================================================= */

.career-hero + * {
    background: #fff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .career-hero {
        height: 620px;
        overflow: hidden;
    }

    .career-hero-container {
        width: calc(100% - 40px);
    }

    .career-hero-content h2 {
        font-size: 34px !important;
    }

    .career-hero-links {
        right: 0;
        bottom: 245px;

        flex-direction: column;
    }

    .career-outline-button {
        width: 100%;
    }

    .career-apply {
        left: 0;
        right: 0;
        bottom: 20px;

        width: 100%;
    }

}

#sp-lehrstellen-slide {
	margin-bottom: 100px;
}

.offene-stellen #sp-bottom {
	margin-bottom: 0px !important;
}

.career-apply .career-field input[type="text"],
.career-apply .career-field input[type="email"],
.career-apply .career-field input[type="tel"],
.career-apply .career-field select {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    height: 27px !important;
    font-size: 10px !important;
    line-height: 27px !important;
}

/* =========================================================
   SPECIAL SERVICES
   ========================================================= */

.special-services {
    --services-offset: max(30px, calc((100vw - 1200px) / 2));

    position: relative;

    padding: 68px 0 72px;

    overflow: hidden;

    background: #e4edef;

    font-family: "Radio Canada Big", Arial, sans-serif;
}


/* =========================================================
   HEAD
   ========================================================= */

.special-services-head {
    width: min(100% - 60px, 1200px);
    max-width: 1200px;

    margin: 0 auto 48px;
}


.special-services-kicker {
    margin-bottom: 14px;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;

    color: #000;
}


.special-services h2 {
    margin: 0 !important;

    font-family: "Radio Canada Big", Arial, sans-serif !important;

    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    letter-spacing: -0.4px;

    color: #000 !important;
}


/* =========================================================
   SCROLLER
   ========================================================= */

.special-services-scroller {
    display: flex;

    align-items: flex-start;

    gap: 70px;

    width: 100vw;

    padding-left: var(--services-offset);
    padding-right: 80px;

    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    cursor: grab;

    user-select: none;
    -webkit-user-select: none;

    touch-action: pan-x pan-y;

    overscroll-behavior-x: contain;

    scroll-behavior: auto;
}


.special-services-scroller::-webkit-scrollbar {
    display: none;
}


.special-services-scroller.is-dragging {
    cursor: grabbing;
}


/* =========================================================
   ITEMS
   ========================================================= */

.special-service-item {
    flex: 0 0 92px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: #000 !important;

    text-decoration: none !important;

    cursor: pointer;
}


.special-service-item img {
    display: block;

    width: 43px;
    height: 43px;

    object-fit: contain;

    pointer-events: none;

    -webkit-user-drag: none;
    user-select: none;

    transition:
        transform .25s ease;
}


.special-service-item span {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 700;

    text-align: center;

    white-space: nowrap;
}


/* kleiner Hover */

.special-service-item:hover img {
    transform: translateY(-4px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .special-services {
        --services-offset: 20px;

        padding: 50px 0;
    }


    .special-services-head {
        width: calc(100% - 40px);

        margin-bottom: 38px;
    }


    .special-services h2 {
        font-size: 30px !important;
    }


    .special-services-scroller {
        gap: 42px;

        padding-right: 40px;
    }

}

.spezialdienstleistungen #sp-main-body {
	display: none;
}

.spezialdienstleistungen #sp-slideshow-top::after {
	display: none;
}

.career-hero-kicker {
  margin-bottom: 13px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}

.career-hero-content h2 {
  margin: 0 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 60px !important;
  line-height: 60px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  color: #fff !important;
}

.career-outline-button {
  display: flex;
  align-items: center;
  width: 232px;
  height: 56px;
  padding: 10px 16px 11px 22px;
  box-sizing: border-box;
  border: 1px solid #fdc600;
  background: rgba(0, 0, 0, 0.18);
  font-size: 20px;
  line-height: 1.05;
  font-weight: 700;
  color: #fdc600 !important;
  text-decoration: none !important;
  transition: background-color .25s ease, color .25s ease;
  max-height: unset;
}

.career-apply {
  position: absolute;
  right: 0;
  bottom: -40px;
  width: 250px;
  padding: 20px 22px 17px;
  box-sizing: border-box;
  background: #fdc600;
  color: #000;
}

.career-apply h3 {
  margin: 0 0 13px !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #1F384C !important;
}

.career-apply .career-field input[type="text"], .career-apply .career-field input[type="email"], .career-apply .career-field input[type="tel"], .career-apply .career-field select {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 27px !important;
  font-size: 14px !important;
  line-height: 27px !important;
}

.career-submit {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100% !important;
  margin: 15px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 19px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-align: right;
  cursor: pointer;
}

.team #sp-slideshow-top::after {
	display: none !important;
}

.team #sp-main-body {
	padding-top: 0px !important;
}

.hteam-kicker {
  margin-bottom: 14px;
  font-size: 20px;
  line-height: 30px;;
  font-weight: 400;
}

.hteam-heading {
  margin: 0 !important;
  color: #000 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 50px !important;
  line-height: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
}

.hteam-filter {
  appearance: none;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #304858 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease;
}

.hteam-filter.is-active::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0px;
  color: #000;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
}

.hagedorn-team {
  width: unset;
  max-width: unset;
  margin: 0 auto;
  padding: 85px 0 110px;
  color: #000;
  font-family: "Radio Canada Big", Arial, sans-serif;
}

.hteam-card__media::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -10px;
  width: 48px;
  height: 48px;
  border-right: 10px solid #fdc600;
  border-bottom: 10px solid #fdc600;
  box-sizing: border-box;
  pointer-events: none;
}

.hteam-card:hover .hteam-card__media img {
  transform: none;
}

.spezialdienstleistungen #sp-bottom {
	background: #E5EDED;
}

.special-services-kicker {
  margin-bottom: 14px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #000;
}

.special-services h2 {
  margin: 0 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 50px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  color: #000 !important;
}

.services-detail-list {
    width: min(100% - 60px, 1200px);
    max-width: 1200px;

    margin: 0 auto;

    font-family: "Radio Canada Big", Arial, sans-serif;
}

.service-detail-item {
    padding: 55px 0 28px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}

.service-detail-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 25px;
}

.service-detail-head h2 {
    margin: 0 !important;

    font-family: "Radio Canada Big", Arial, sans-serif !important;

    font-size: 31px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    color: #000 !important;
}

.service-detail-icon {
    width: 48px;
    height: 48px;

    object-fit: contain;
}

.service-detail-text {
    max-width: 1000px;

    margin-bottom: 34px;

    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;

    color: #173044;
}

.service-detail-image {
    width: 100%;

    overflow: hidden;
}

.service-detail-image img {
    display: block;

    width: 100%;
    height: 520px;

    object-fit: cover;

    transition: transform .4s ease;
}

.service-detail-item:hover .service-detail-image img {
    transform: scale(1.015);
}

.service-detail-footer {
    display: flex;

    justify-content: flex-end;

    padding-top: 20px;
}

.service-detail-link {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    font-size: 14px;
    line-height: 1.1;
    font-weight: 700;

    text-align: right;

    color: #000 !important;

    text-decoration: none !important;
}

.service-detail-arrow {
    color: #fdc600;

    font-size: 34px;
    line-height: .7;

    transition:
        transform .25s ease;
}

.service-detail-link:hover .service-detail-arrow {
    transform: translateX(5px);
}

@media (max-width: 767px) {

    .services-detail-list {
        width: calc(100% - 40px);
    }

    .service-detail-item {
        padding-top: 40px;
    }

    .service-detail-head h2 {
        font-size: 27px !important;
    }

    .service-detail-text {
        font-size: 14px;
    }

    .service-detail-image img {
        height: 280px;
    }

}

.service-detail-head h2 {
  margin: 0 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 40px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #000 !important;
  letter-spacing: 0.4px;
}

.service-detail-text {
  max-width: 1000px;
  margin-bottom: 34px;
  font-size: 18px;
  line-height: 35px;
  font-weight: 400;
  color: #173044;
}

.service-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: 19px;
  line-height: 1.1;
  font-weight: 700;
  text-align: right;
  color: #000 !important;
  text-decoration: none !important;
}

.service-detail-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 30px;
  padding-bottom: 5px;
}

/*
.spezialdienstleistungen #sp-header, .team #sp-header {
	background: #fdc600 !important;
}*/

.hnews-filters {
	display: none;
}

.hteam-card__contact-link {
  color: #263e50 !important;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 400;
  text-decoration: none !important;
}

.hteam-group__title {
  margin: 0 0 28px !important;
  color: #000 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 35px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
}

.hteam-card__role {
  color: #263e50;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 400;
}

.hteam-card__role {
  color: #263e50;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 400;
  margin-bottom: 15px;
  letter-spacing: 0.4px;
}

.hteam-card__name {
  margin: 0 0 5px !important;
  color: #000 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 24px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
}

body {
	letter-spacing: 0.4px !important;
}

.sp-menu-heading {
	font-family: Radio Canada Big;
font-weight: 700 !important;
font-style: Bold;
font-size: 40px !important;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0.4px !important;

}


.career-apply, .career-hero-links {
	display: none;
}

/* =========================================================
   HAGEDORN FOOTER RESPONSIVE
   OHNE BORDERS
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .hagedorn-footer-inner {
        width: calc(100% - 60px);
    }

    .footer-topbar {
        gap: 30px;
    }

    .footer-main {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 50px;
        row-gap: 40px;
    }

    .footer-intro {
        grid-column: 1 / -1;

        max-width: 650px;
    }

    .footer-menu-column {
        min-width: 0;
    }

    .footer-bottom {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 50px;
        row-gap: 30px;
    }

    .footer-legal {
        grid-column: 1 / -1;

        justify-content: flex-start;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hagedorn-footer-inner {
        width: calc(100% - 40px);
    }


    /* TOP */

    .footer-topbar {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }

    .footer-logo {
        max-width: 180px;
    }

    .footer-socials {
        justify-content: flex-start;
    }


    /* MAIN */

    .footer-main {
        display: grid;

        grid-template-columns: 1fr;

        gap: 35px;
    }

    .footer-intro {
        grid-column: auto;

        margin-bottom: 10px;
    }

    .footer-menu-column {
        padding: 0;
    }

    .footer-menu-column h3,
    .footer-menu-column h4 {
        margin-bottom: 13px !important;

        font-size: 18px !important;
    }

    .footer-menu-column ul {
        margin: 0;
        padding: 0;

        list-style: none;
    }

    .footer-menu-column li {
        margin-bottom: 8px;
    }


    /* BOTTOM */

    .footer-bottom {
        display: grid;

        grid-template-columns: 1fr;

        gap: 28px;

        padding-top: 40px;
    }

    .footer-location {
        padding: 0;
    }

    .footer-legal {
        grid-column: auto;

        display: flex;

        flex-wrap: wrap;

        justify-content: flex-start;

        gap: 15px 25px;

        padding-top: 10px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hagedorn-footer-inner {
        width: calc(100% - 30px);
    }

    .footer-logo {
        max-width: 150px;
    }

    .footer-intro {
        font-size: 14px;
        line-height: 1.55;
    }

    .footer-menu-column a,
    .footer-location,
    .footer-legal a {
        font-size: 14px;
    }

    .footer-socials {
        gap: 12px;
    }

}

/* Desktop */
.footer-accordion-toggle {
    display: flex;
    align-items: center;

    width: 100%;

    margin: 0 0 15px;
    padding: 0;

    border: 0;

    background: transparent;

    font-family: "Radio Canada Big", Arial, sans-serif;

    font-size: 16px;
    font-weight: 700;

    color: #000;

    text-align: left;

    cursor: default;
}

.footer-accordion-arrow {
    display: none;
}

.footer-accordion-content {
    display: block;
}

.footer-socials, div.footer-menu-column:nth-child(2) > h3:nth-child(1) {
	display: none !important;
}


div.footer-menu-column:nth-child(2) {
  margin-top: -7px;
}

.footer-accordion-toggle {
	font-family: Radio Canada Big;
  font-weight: 700;
  font-style: Bold;
  font-size: 18px !important;
  line-height: 24px;
  letter-spacing: 0.4px;
}

@media screen and (max-width: 991px) {
	#sp-slideshow-top {
  margin-top: -60px !important;
}
}

@media (max-width: 991px) {
  #sp-header {
    height: 60px;
    padding-top: 16px;
  }
}

/* =========================================================
   MOBILE FULLSCREEN OFFCANVAS
   ========================================================= */

@media (max-width: 991px) {

    .offcanvas-menu {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: 100vw !important;
        max-width: none !important;

        height: 100dvh !important;
        min-height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 999999 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background:
            linear-gradient(
                rgba(253, 198, 0, .9),
                rgba(253, 198, 0, .9)
            ),
            url("/images/menu-background.jpg")
            center center / cover no-repeat
            !important;


        /* geschlossen: RECHTS ausserhalb */
        transform:
            translate3d(100%, 0, 0)
            !important;

        visibility: hidden;

        pointer-events: none;

        transition:
            transform .42s cubic-bezier(.4, 0, .2, 1),
            visibility 0s linear .42s
            !important;
    }


    /* geöffnet */

    body.offcanvas-active .offcanvas-menu,
    .offcanvas-menu.active,
    .offcanvas-menu.show {

        transform:
            translate3d(0, 0, 0)
            !important;

        visibility: visible;

        pointer-events: auto;

        transition:
            transform .42s cubic-bezier(.4, 0, .2, 1),
            visibility 0s
            !important;
    }


    body.offcanvas-active {
        overflow: hidden;
    }


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

    .offcanvas-menu
    > .d-flex.align-items-center {

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: calc(100% - 40px);

        margin: 0 auto;

        padding: 22px 0 !important;
    }


    .offcanvas-hagedorn-logo {
        display: block;

        width: 145px;
    }


    .offcanvas-hagedorn-logo img {
        display: block;

        width: 100%;
        height: auto;
    }


    /* =====================================================
       CLOSE X
       ===================================================== */

    .offcanvas-menu .close-offcanvas {
        position: relative;

        display: flex !important;

        align-items: center;
        justify-content: center;

        width: 35px;
        height: 35px;

        margin: 0 !important;
        padding: 0 !important;
    }


    .offcanvas-menu
    .close-offcanvas
    .burger-icon {

        position: relative;

        width: 30px;
        height: 30px;
		margin-top: -50px;
    }


    .offcanvas-menu
    .close-offcanvas
    .burger-icon span {

        position: absolute;

        top: 13px;
        left: 1px;

        display: block;

        width: 27px;
        height: 4px;

        margin: 0 !important;

        background: #000 !important;
    }


    .offcanvas-menu
    .close-offcanvas
    .burger-icon span:nth-child(1) {

        transform:
            rotate(45deg) !important;
    }


    .offcanvas-menu
    .close-offcanvas
    .burger-icon span:nth-child(2) {

        opacity: 0 !important;
    }


    .offcanvas-menu
    .close-offcanvas
    .burger-icon span:nth-child(3) {

        transform:
            rotate(-45deg) !important;
    }


    /* =====================================================
       INNER
       ===================================================== */

    .offcanvas-menu .offcanvas-inner {
        width: calc(100% - 40px);

        margin: 0 auto;

        padding:
            35px 0 60px !important;
    }


    .offcanvas-menu .header-modules {
        display: none !important;
    }


    .offcanvas-menu .sp-module {
        margin: 0 !important;
        padding: 0 !important;
    }


    .offcanvas-menu .sp-module-title {
        display: none !important;
    }


    /* =====================================================
       ROOT MENU
       ===================================================== */

    .offcanvas-menu .mod-menu {
        display: block !important;

        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    .offcanvas-menu .mod-menu > li {
        display: block !important;

        width: 100%;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       HAUPTPUNKT
       ===================================================== */

    .offcanvas-menu
    .mod-menu
    > li
    > a,

    .offcanvas-menu
    .mod-menu
    > li
    > .mod-menu__heading {

        display: flex !important;
		opacity: 1 !important;

        align-items: center;
        justify-content: space-between;

        width: 100%;

        box-sizing: border-box;

        margin: 0 !important;

        padding: 15px 3px 15px 0 !important;

        font-family:
            "Radio Canada Big",
            Arial,
            sans-serif !important;

        font-size: 26px !important;
        line-height: 1 !important;

        font-weight: 700 !important;

        color: #000 !important;

        text-decoration: none !important;

        cursor: pointer;
    }


    /* =====================================================
       SCHWARZER RECHTER WINKEL
       ===================================================== */

    .offcanvas-accordion-icon {
        display: block;
    flex: 0 0 13px;
    width: 15px;
    height: 15px;
    margin-left: 20px;
    margin-right: 3px;
    border-right: 4px solid #000;
    border-bottom: 4px solid #000;
    box-sizing: border-box;
    transform: rotate(-45deg);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    }


    /*
     * OPEN:
     * Winkel dreht nach unten
     */

    .offcanvas-accordion-item.is-open
    > a
    > .offcanvas-accordion-icon,

    .offcanvas-accordion-item.is-open
    > .mod-menu__heading
    > .offcanvas-accordion-icon {

        transform:
            rotate(45deg);
    }


    /* =====================================================
       SUBMENU
       ===================================================== */

    .offcanvas-menu
    .offcanvas-accordion-item
    > .menu-child {

        display: block !important;

        width: 100%;

        max-height: 0;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden;

        opacity: 0;

        list-style: none !important;

        transition:
            max-height .4s cubic-bezier(.4, 0, .2, 1),
            opacity .25s ease
            !important;
    }


    .offcanvas-menu
    .offcanvas-accordion-item.is-open
    > .menu-child {

        opacity: 1;
    }


    /* =====================================================
       SUBMENU LINKS
       ===================================================== */

    .offcanvas-menu
    .menu-child
    > li {

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .offcanvas-menu
    .menu-child
    > li
    > a,

    .offcanvas-menu
    .menu-child
    > li
    > .mod-menu__heading {

        display: block !important;

        width: 100%;

        padding:
            7px 0 !important;

        font-family:
            "Radio Canada Big",
            Arial,
            sans-serif !important;

        font-size: 18px !important;
        line-height: 1.25 !important;

        font-weight: 400 !important;

        color: #000 !important;

        text-decoration: none !important;
    }


    .offcanvas-menu
    .offcanvas-accordion-item.is-open
    > .menu-child
    > li:first-child {

        padding-top:
            4px !important;
    }


    .offcanvas-menu
    .offcanvas-accordion-item.is-open
    > .menu-child
    > li:last-child {

        padding-bottom:
            18px !important;
    }

}


/* =========================================================
   DESKTOP: OFFCANVAS NICHT ANZEIGEN
   ========================================================= */

@media (min-width: 992px) {

    .offcanvas-menu {
        visibility: hidden !important;
        pointer-events: none !important;
    }

}

body.ltr #offcanvas-toggler.offcanvas-toggler-right {
  padding-right: 10px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .competence-section {
        padding: 70px 0;
    }

    .competence-section > .container {
        width: calc(100% - 60px);
    }

    .competence-head {
        margin-bottom: 40px;
    }

    .competence-head h2 {
        font-size: 38px !important;
        line-height: 1 !important;
    }

    .competence-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .competence-section {
        padding: 55px 0;
    }

    .competence-section > .container {
        width: calc(100% - 40px);
        padding-left: 0;
        padding-right: 0;
    }

    .competence-head {
        margin-bottom: 32px;
    }

    .competence-kicker {
        font-size: 13px;
    }

    .competence-head h2 {
        font-size: 32px !important;
        line-height: 1.05 !important;
    }

    .competence-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .competence-card {
        min-height: 180px;
    }

    .competence-card img {
        width: 46px;
        height: 46px;
    }

    .competence-card span {
        font-size: 16px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .competence-grid {
        grid-template-columns: 1fr !important;
    }

    .competence-card {
        min-height: 150px;
    }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .hagedorn-stack-grid {
        padding: 70px 0;
    }

    .stack-grid-inner {
        width: calc(100% - 60px);
        margin: 0 auto;
    }

    .stack-row {
        grid-template-columns: 1fr 1fr;
    }

    .stack-media {
        min-height: 360px;
    }

    .stack-content {
        max-width: none !important;
        width: 100% !important;

        padding: 45px 40px;
    }

    .stack-content h3 {
        font-size: 30px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hagedorn-stack-grid {
        padding: 50px 0;
    }

    .stack-grid-inner {
        width: calc(100% - 40px);
    }


    /* beide Reihen einspaltig */

    .stack-row {
        display: flex !important;
        flex-direction: column !important;

        width: 100%;
    }


    /* Bild immer zuerst */

    .stack-row-1 .stack-media,
    .stack-row-2 .stack-media {
        order: 1;

        width: 100%;
    }

    .stack-row-1 .stack-content,
    .stack-row-2 .stack-content {
        order: 2;

        width: 100% !important;
        max-width: none !important;

        justify-self: auto !important;
    }


    /* Bild */

    .stack-media {
        height: 300px;
        min-height: 0;
    }

    .stack-media > img:first-child {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* Content */

    .stack-content {
        padding: 35px 30px 40px;
    }

    .stack-content h3 {
        margin-bottom: 18px !important;

        font-size: 28px !important;
        line-height: 1.05 !important;
    }

    .stack-content p {
        margin-bottom: 28px;

        font-size: 14px;
        line-height: 1.6;
    }


    /* gelber grosser Winkel etwas kleiner */

    .stack-corner {
        width: 65px;
        height: 65px;
    }


    /* Abstand zwischen den beiden Blöcken */

    .stack-row + .stack-row {
        margin-top: 55px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .stack-grid-inner {
        width: calc(100% - 30px);
    }

    .stack-media {
        height: 240px;
    }

    .stack-content {
        padding: 30px 22px 35px;
    }

    .stack-content h3 {
        font-size: 25px !important;
    }

    .stack-button {
        width: 100%;
        box-sizing: border-box;
    }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .hnews-head {
        grid-template-columns: 1fr !important;
        row-gap: 35px;
        margin-bottom: 45px;
    }

    .hnews-heading {
        font-size: 40px !important;
        line-height: 1 !important;
    }

    .hnews-navigation {
        grid-template-columns: 1fr auto;
        padding-top: 0;
        column-gap: 40px;
    }

    .hnews-filters {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        column-gap: 35px;
    }

    /* 2 Cards sichtbar */
    .hnews-grid {
        grid-auto-columns:
            calc((var(--hnews-content-width) - var(--hnews-gap)) / 2)
            !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hagedorn-news {
        --hnews-gap: 15px;
    }

    .hnews-head {
        display: block !important;
        margin-bottom: 35px;
    }

    .hnews-title-block {
        margin-bottom: 30px;
    }

    .hnews-kicker {
        font-size: 16px;
    margin-bottom: 7px;
    line-height: 60px;
    }

    .hnews-heading {
        font-size: 32px !important;
        line-height: 1 !important;
    }


    /* Filter untereinander */

    .hnews-navigation {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;

        padding-top: 0;
    }

    .hnews-filters {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: 100%;

        column-gap: 25px;
        row-gap: 10px;
    }

    .hnews-filter {
        font-size: 13px;
        text-align: left;
    }

    .hnews-all-link {
        font-size: 13px;
    }


    /* =====================================================
       HORIZONTAL CARDS
       ca. 1.15 Cards sichtbar
       ===================================================== */

    .hnews-grid {
        grid-auto-columns: 84vw !important;

        gap: 15px !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        margin-left: -20px !important;

        width: 100vw !important;
    }


    .hnews-card {
        min-width: 0;
    }

    .hnews-card__media {
        height: 240px;
        overflow: hidden;
    }

    .hnews-card__media img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .hnews-card__body {
        padding-top: 20px;
    }

    .hnews-card__title {
        font-size: 22px !important;
        line-height: 1.05 !important;
    }

    .hnews-card__intro {
        font-size: 14px;
        line-height: 1.5;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hnews-heading {
        font-size: 38px !important;
    }

    .hnews-filters {
        grid-template-columns: 1fr 1fr;
        column-gap: 15px;
    }

    .hnews-grid {
        grid-auto-columns: 86vw !important;
    }

    .hnews-card__media {
        height: 210px;
    }

    .hnews-card__title {
        font-size: 20px !important;
    }

}


@media (max-width: 991px) {

	#sp-main-body {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
	
	#sp-slideshow-top::after {
  content: "";
  position: absolute;
  width: 75px;
  height: 128px;
  right: 10%;
  bottom: -43px;
  background-image: url('/images/rechter-winkel-rechts.svg');
  background-repeat: no-repeat;
  background-position: center;

  background-size: contain;
  z-index: 20;
  pointer-events: none;
}
	
	.startseite #sp-bottom {
		padding: 0px !important;
	}
	
	.hagedorn-stack-grid .stack-button {
		position: unset !important;
		
	}
	
	.hagedorn-stack-grid .stack-button img, .hagedorn-stack-grid .stack-corner-left, .hagedorn-stack-grid .stack-corner-right {
		display: none;
	}
	
	.hnews-filters {
		display: none;
	}
	
	#sp-news {
		padding-top: 30px;
		padding-bottom: 80px;
	}
	
	.hagedorn-stack-grid {
  margin-bottom: 50px;
}
	.hnews-navigation {
	display: none;	
}
	
	.hnews-head {
		margin-bottom: 0px;
	}
	
.hnews-title-block {
    margin-bottom: 5px;
  }

}

@media (max-width: 991px) {
  #sp-header {
    height: 90px !important;
    padding-top: 16px;
  }
	
	.service-detail-head h2 {
  margin: 0 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 33px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #000 !important;
  letter-spacing: 0.4px;
}
	
	.service-detail-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
	
	#mod-custom223 {
		margin-top: 30px;
	}
	
	.special-services h2 {
  margin: 0 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 38px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  color: #000 !important;
}
	
	.spezialdienstleistungen #sp-bottom {
	padding-bottom: 0px;
	}
	
	.special-services-kicker {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  color: #000;
}
	
	.spezialdienstleistungen #sp-bottom2 {
	margin-bottom: 50px;
}
.hreferences-heading {
  font-size: 36px !important;
}
	
.hreferences-kicker {
  margin-bottom: 14px;
  font-size: 16px !important;
}	
	
	
	
	
}

@media screen and (max-width: 991px) {
  #sp-slideshow-top {
    margin-top: -90px !important;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .hreferences-list {
        width: 100%;
    }

    .hreference-item {
        grid-template-columns:
            minmax(0, 1fr)
            42% !important;

        min-height: 120px;
    }

    .hreference-item__content {
        padding: 22px 20px !important;
    }

    .hreference-item__title {
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .hreference-item__date {
        font-size: 11px;
    }

    .hreference-item__media {
        min-height: 120px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hreferences-list {
        width: 100%;
    }

    .hreference-item {
        display: flex !important;
        flex-direction: column;

        min-height: 0;

        margin-bottom: 22px;

        overflow: hidden;
    }

    .hreference-item__content {
        order: 2;

        padding: 20px 18px 24px !important;
    }

    .hreference-item__media {
        order: 1;

        width: 100%;
        height: 210px !important;
        min-height: 0 !important;
    }

    .hreference-item__media img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .hreference-item__title {
        margin-bottom: 7px !important;

        font-size: 21px !important;
        line-height: 1.05 !important;
    }

    .hreference-item__date {
        font-size: 11px;
        line-height: 1.3;
    }


    /* Hover auf Touch nicht aufblasen */

    .hreference-item:hover {
        min-height: 0 !important;
    }

    .hreference-item:hover .hreference-item__media {
        height: 210px !important;
    }

    .hreference-item:hover .hreference-item__media img {
        transform: none !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hreference-item {
        margin-bottom: 18px;
    }

    .hreference-item__media {
        height: 180px !important;
    }

    .hreference-item:hover .hreference-item__media {
        height: 180px !important;
    }

    .hreference-item__content {
        padding: 17px 15px 20px !important;
    }

    .hreference-item__title {
        font-size: 19px !important;
    }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .reference-detail-inner {
        width: calc(100% - 60px);
        margin: 0 auto;
    }

    .reference-detail-top {
        grid-template-columns: 42% 58% !important;
        gap: 40px !important;
    }

    .reference-detail-title {
        font-size: 34px !important;
        line-height: 1 !important;
    }

    .reference-detail-hero {
        width: 100%;
    }

    .reference-detail-hero img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .reference-detail-inner {
        width: calc(100% - 40px);
        margin: 0 auto;
    }


    /* Bild GANZ OBEN */

    .reference-detail-top {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .reference-detail-hero {
        order: 1;

        width: 100%;
        margin-bottom: 42px;
    }

    .reference-detail-info {
        order: 2;
    }


    .reference-detail-hero img {
        display: block;

        width: 100%;
        height: 300px;

        object-fit: cover;
    }


    /* gelber Winkel */

    .reference-detail-corner {
        width: 55px;
        height: 55px;
    }


    /* Titel */

    .reference-detail-title {
        margin-bottom: 10px !important;

        font-size: 30px !important;
        line-height: 1 !important;
    }

    .reference-detail-period {
        margin-bottom: 28px;

        font-size: 12px;
    }

    .reference-detail-description {
        margin-bottom: 30px;

        font-size: 14px;
        line-height: 1.5;
    }


    /* Projektdaten */

    .reference-detail-meta {
        margin: 0;
    }

    .reference-detail-meta-row {
        display: grid !important;

        grid-template-columns: 135px minmax(0, 1fr);

        gap: 15px;

        margin-bottom: 13px;
    }

    .reference-detail-meta-row dt,
    .reference-detail-meta-row dd {
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
    }


    /* =====================================================
       NAVIGATION UNTEN
       ===================================================== */

    .reference-detail-navigation {
        display: grid !important;

        grid-template-columns: 1fr 1fr;

        gap: 15px;

        margin-top: 55px;
    }

    .reference-nav-back {
        grid-column: 1;
    }

    .reference-nav-next {
        grid-column: 2;

        justify-self: end;
    }

    .reference-search-wrap {
        grid-column: 1 / -1;
        grid-row: 1;

        width: 100%;

        margin-bottom: 15px;
    }

    .reference-nav-search {
        width: 100% !important;
    }

    .reference-search-dropdown {
        width: 100% !important;
        max-width: none !important;

        left: 0 !important;
        right: auto !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .reference-detail-inner {
        width: calc(100% - 30px);
    }

    .reference-detail-hero img {
        height: 245px;
    }

    .reference-detail-title {
        font-size: 27px !important;
    }

    .reference-detail-meta-row {
        grid-template-columns: 115px minmax(0, 1fr);
        gap: 10px;
    }

    .reference-detail-meta-row dt,
    .reference-detail-meta-row dd {
        font-size: 12px;
    }

}

@media (max-width: 767px) {

    /* =====================================================
       PROJEKTDATEN
       Kein Ineinanderlaufen mehr
       ===================================================== */

    .reference-detail-meta-row {
        display: grid !important;

        grid-template-columns:
            minmax(0, 44%)
            minmax(0, 56%) !important;

        column-gap: 14px !important;

        width: 100%;

        margin-bottom: 16px;
    }

    .reference-detail-meta-row dt,
    .reference-detail-meta-row dd {
        min-width: 0;

        margin: 0 !important;

        font-size: 13px;
        line-height: 1.35;

        white-space: normal !important;

        overflow-wrap: break-word;
    }

    .reference-detail-meta-row dt {
        font-weight: 700;
    }

    .reference-meta-values,
    .reference-meta-primary,
    .reference-meta-extra {
        min-width: 0;
        max-width: 100%;
    }


    /* =====================================================
       NAVIGATION
       Suche oben, Zurück + Nächstes auf gleicher Höhe
       ===================================================== */

    .reference-detail-navigation {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto
            auto !important;

        column-gap: 25px;
        row-gap: 30px;

        align-items: center;

        width: 100%;

        margin-top: 55px;
    }


    /* Suche über komplette Breite */

    .reference-search-wrap {
        position: relative;

        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        width: 100%;

        margin: 0 !important;
    }

    .reference-nav-search {
        width: 100% !important;
        min-height: 50px;

        margin: 0 !important;
    }


    /* Zurück links */

    .reference-nav-back {
        grid-column: 1 !important;
        grid-row: 2 !important;

        display: flex !important;

        align-items: center;

        justify-self: start;

        margin: 0 !important;

        line-height: 1.05;
    }


    /* Nächstes rechts */

    .reference-nav-next {
        grid-column: 2 !important;
        grid-row: 2 !important;

        display: flex !important;

        align-items: center;
        justify-content: flex-end;

        justify-self: end;

        margin: 0 !important;

        line-height: 1.05;

        text-align: right;
    }


    .reference-nav-back > span:last-child,
    .reference-nav-next > span:not(.reference-nav-arrow) {
        max-width: 110px;
    }


    /* =====================================================
       SEARCH DROPDOWN
       auf Bildschirmbreite zentrieren
       ===================================================== */

    .reference-search-wrap {
        position: relative;
    }

    .reference-search-dropdown {
        position: absolute !important;

        top: auto !important;
        bottom: calc(100% + 10px) !important;

        left: 50% !important;
        right: auto !important;

        width: calc(100vw - 30px) !important;
        max-width: 430px !important;

        transform: translateX(-50%) !important;

        box-sizing: border-box;

        z-index: 99999;
    }

    .reference-search-input-wrap {
        width: 100%;
        box-sizing: border-box;
    }


    /* Template-Input-Regeln überschreiben */

    .reference-search-input {
        width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 !important;

        padding: 12px 42px 12px 15px !important;

        border-radius: 0 !important;

        font-size: 14px !important;
    }


    .reference-search-results {
        width: 100%;

        max-height: 300px;

        overflow-y: auto;
    }


    .reference-search-result {
        display: block;

        width: 100%;

        box-sizing: border-box;

        padding: 11px 15px;

        font-size: 13px;
        line-height: 1.25;

        white-space: normal;

        overflow-wrap: break-word;
    }

}

@media screen and (max-width: 991px) {
	.hreference-item__date {
  font-size: 16px !important;
  font-weight: 400;
  line-height: 30px !important;
}
	
	 .reference-detail-corner {
    width: 55px;
    height: 55px;
    display: none;
  }
	
	.reference-detail-hero {
	aspect-ratio: unset !important;
		margin-bottom: 20px;
}
	
	.hagedorn-reference-detail .reference-detail-title {
  margin: 0 0 10px !important;
  max-width: 420px;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 40px !important;
  line-height: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: #000 !important;
}
	
	.team #sp-main-body {
  padding-top: 20px !important;
}
	
	.hteam-heading {
  margin: 0 !important;
  color: #000 !important;
  font-family: "Radio Canada Big", Arial, sans-serif !important;
  font-size: 38px !important;
  line-height: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px;
}
	
	.hteam-kicker {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}
	
	.offene-stellen #sp-main-body {
  padding-top: 30px !important;
  padding-bottom: 60px !important;
}
	.lehrstellen-kicker {
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  line-height: 40px;
}
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .hagedorn-apprenticeships__inner {
        width: calc(100% - 60px);
        margin: 0 auto;
    }

    .hagedorn-apprenticeships__heading {
        font-size: 32px !important;
        line-height: 1.05 !important;
        text-align: center;
    }

    .hagedorn-apprenticeships__cards {
        gap: 18px;
    }

    .hagedorn-apprenticeships__card {
        padding: 22px 24px;
    }

    .hagedorn-apprenticeships__title {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }

    .hagedorn-apprenticeships__intro {
        font-size: 13px;
        line-height: 1.45;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hagedorn-apprenticeships {
        padding: 50px 0;
    }

    .hagedorn-apprenticeships__inner {
        width: calc(100% - 40px);
        margin: 0 auto;
    }

    .hagedorn-apprenticeships__group {
        margin-bottom: 45px;
    }

    .hagedorn-apprenticeships__heading {
        margin-bottom: 50px !important;

        font-size: 28px !important;
        line-height: 1.05 !important;
        text-align: left;
    }

    .hagedorn-apprenticeships__cards {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
    }

    .hagedorn-apprenticeships__card {
        display: flex !important;
        flex-direction: column;

        align-items: stretch;

        gap: 18px;

        padding: 20px 18px 18px;

        box-sizing: border-box;
    }

    .hagedorn-apprenticeships__card-main {
        width: 100%;
    }

    .hagedorn-apprenticeships__title {
        margin-bottom: 10px !important;

        font-size: 20px !important;
        line-height: 1.08 !important;
    }

    .hagedorn-apprenticeships__intro {
        margin: 0;

        font-size: 13px;
        line-height: 1.45;
    }

    .hagedorn-apprenticeships__more {
        display: flex;

        align-items: center;
        justify-content: flex-end;

        gap: 12px;

        width: 100%;
    }

    .hagedorn-apprenticeships__more span:first-child {
        font-size: 13px;
        font-weight: 700;
    }

    .hagedorn-apprenticeships__note {
        margin-top: 35px;

        font-size: 16px;
        line-height: 1.55;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hagedorn-apprenticeships__inner {
        width: calc(100% - 30px);
    }

    .hagedorn-apprenticeships__heading {
        font-size: 28px !important;
    }

    .hagedorn-apprenticeships__card {
        padding: 18px 16px 16px;
    }

    .hagedorn-apprenticeships__title {
        font-size: 18px !important;
    }

    .hagedorn-apprenticeships__intro {
        font-size: 15px;
    }

}

@media screen and (max-width: 991px) {
	.offene-stellen #sp-bottom {
  padding: 20px 0 0px;
}
	
	.hagedorn-apprenticeships__note {
		margin: 0px !important;
	}
	
	.lehrstellen-content p {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 35px;
}
	
	.career-hero-kicker {
  margin-bottom: 13px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
}
}

/* =========================================
   HAGEDORN – GELBE BILDECKEN ENTFERNEN
   ========================================= */

/* Referenz-Detailansicht */
.reference-detail-corner,

/* Stack-Grid */
.stack-corner,
.stack-corner-left,
.stack-corner-right,

/* Weitere Bild-Widgets */
.insight-corner {
    display: none !important;
}

/* Team-Grid: per CSS erzeugter Winkel */
.hteam-card__media::after {
    content: none !important;
    display: none !important;
}

/* Stack-Grid: Winkel als SVG */
.stack-media > img[src*="rechter-winkel"] {
    display: none !important;
}

#sp-slideshow-top::after {
	display: none !important;
}

/* Tablet: 3 Karten nebeneinander */
@media (min-width: 768px) and (max-width: 991px) {
    .competence-section .competence-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px;
    }
}

/* Mobile: 2 Karten nebeneinander */
@media (max-width: 767px) {
    .competence-section .competence-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    .competence-section .competence-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        box-sizing: border-box;
        padding: 18px 12px;
    }

    .competence-section .competence-card img {
        max-width: 55px;
        height: auto;
    }

    .competence-section .competence-card span {
        font-size: 15px;
        overflow-wrap: break-word;
    }
}

/* Desktop: alle 6 Karten nebeneinander */
@media (min-width: 992px) {
    .competence-section .competence-grid {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .competence-section .competence-card {
        width: 100% !important;
        min-width: 0;
        max-width: none !important;
        box-sizing: border-box;
        padding: 20px 12px;
    }

    .competence-section .competence-card span {
        font-size: 16px;
        overflow-wrap: anywhere;
    }
}


/* HAGEDORN – UNTERNEHMENSSEITE */

.blogueber-uns .article-header {
    display: none;
}

.hagedorn-company {
    --hc-yellow: #fdc600;
    /*max-width: 1200px;*/
    margin: 0 auto;
    /*padding: 70px 0 100px;*/
    font-family: "Radio Canada Big", sans-serif;
    color: #111;
}

.hagedorn-company * {
    box-sizing: border-box;
}

.hagedorn-company h1,
.hagedorn-company h2,
.hagedorn-company h3 {
    font-weight: 700;
    color: #111;
    line-height: 1.06;
}

.hagedorn-company p {
    font-size: 16px;
    line-height: 1.65;
}

.hc-kicker {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* INTRO */

.hc-intro {
    max-width: 850px;
    padding-bottom: 80px;
}

.hc-intro h1 {
    max-width: 800px;
    margin: 0 0 30px;
    font-size: clamp(38px, 5vw, 66px);
}

.hc-intro p {
    max-width: 750px;
}

.hc-intro .hc-lead {
    font-size: 23px;
    line-height: 1.45;
    font-weight: 500;
}

/* KENNZAHLEN */

.hc-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-bottom: 130px;
}

.hc-stat {
    padding: 30px 10px 25px 0;
    border-top: 5px solid var(--hc-yellow);
}

.hc-stat strong {
    display: block;
    margin-bottom: 10px;
    font-size: clamp(55px, 6vw, 85px);
    line-height: 1;
    font-weight: 700;
}

.hc-stat span {
    font-size: 17px;
}

/* STANDARDABSCHNITTE */

.hc-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 85px;
    align-items: center;
    margin-bottom: 140px;
}

.hc-section h2,
.hc-culture h2,
.hc-associations h2,
.hc-locations h2 {
    margin: 0 0 30px;
    font-size: clamp(32px, 3.5vw, 48px);
}

.hc-section-content p {
    max-width: 500px;
}

.hc-section-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* LINKS MIT HAGEDORN-LINIE */

.hc-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 25px;
    padding: 13px 0;
    border-bottom: 4px solid var(--hc-yellow);
    color: #111 !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: gap .25s ease;
}

.hc-link:hover {
    gap: 45px;
}

.hc-link span {
    font-size: 22px;
    line-height: 1;
}

/* UNTERNEHMENSKULTUR */

.hc-culture {
    margin-bottom: 140px;
    padding: 85px 75px;
    background: #f3f3f3;
}

.hc-culture-inner {
    max-width: 760px;
}

.hc-culture-inner p {
    max-width: 680px;
}

/* QUALITÄT */

.hc-quality {
    align-items: start;
}

.hc-quality-details {
    border-top: 5px solid var(--hc-yellow);
}

.hc-quality-details > div {
    padding: 25px 0;
    border-bottom: 1px solid #d5d5d5;
}

.hc-quality-details span {
    display: block;
    margin-bottom: 12px;
    color: #777;
    font-size: 13px;
}

.hc-quality-details h3 {
    margin: 0 0 8px;
    font-size: 23px;
}

.hc-quality-details p {
    margin: 0;
    font-size: 14px;
}

/* VERBÄNDE */

.hc-associations {
    margin-bottom: 140px;
}

.hc-associations > p {
    max-width: 650px;
    margin-bottom: 40px;
}

.hc-association-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #ddd;
    border: 1px solid #ddd;
}

.hc-association-grid > div {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 115px;
    padding: 25px;
    background: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}

/* STANDORTE */

.hc-location-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    margin-top: 45px;
}

.hc-location {
    min-height: 220px;
    padding: 30px;
    background: #f3f3f3;
    border-top: 5px solid var(--hc-yellow);
}

.hc-location > span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.hc-location h3 {
    margin: 30px 0 12px;
    font-size: 25px;
}

.hc-location p {
    margin: 0;
    font-size: 14px;
}

/* TABLET */

@media (max-width: 991px) {
    .hagedorn-company {
        padding: 55px 20px 80px;
    }

    .hc-section {
        gap: 40px;
        margin-bottom: 100px;
    }

    .hc-culture {
        padding: 60px 45px;
        margin-bottom: 100px;
    }

    .hc-stats,
    .hc-associations {
        margin-bottom: 100px;
    }

    .hc-location-grid {
        gap: 15px;
    }

    .hc-location {
        padding: 22px;
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .hagedorn-company {
        padding: 35px 5px 65px;
    }

    .hc-intro {
        padding-bottom: 45px;
    }

    .hc-intro h1 {
        font-size: 37px;
        margin-bottom: 22px;
    }

    .hc-intro .hc-lead {
        font-size: 19px;
    }

    .hagedorn-company p {
        font-size: 14px;
    }

    .hc-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 15px;
        margin-bottom: 75px;
    }

    .hc-stat strong {
        font-size: 54px;
    }

    .hc-stat span {
        font-size: 13px;
    }

    .hc-section {
        display: flex;
        flex-direction: column;
        gap: 35px;
        margin-bottom: 85px;
    }

    .hc-section-content,
    .hc-section-media {
        width: 100%;
    }

    .hc-section h2,
    .hc-culture h2,
    .hc-associations h2,
    .hc-locations h2 {
        font-size: 31px;
    }

    .hc-section-media img {
        aspect-ratio: 4 / 3;
    }

    .hc-culture {
        margin-bottom: 85px;
        padding: 40px 25px;
    }

    .hc-associations {
        margin-bottom: 85px;
    }

    .hc-association-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hc-association-grid > div {
        min-height: 95px;
        padding: 15px;
        font-size: 12px;
    }

    .hc-location-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hc-location {
        min-height: auto;
        padding: 25px;
    }

    .hc-location h3 {
        margin-top: 20px;
    }
}

/* Unternehmensseite – Links */

.hagedorn-company .hc-link {
    display: inline-block;
    padding: 12px 0;
    margin-top: 25px;

    color: #111 !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;

    border-bottom: 4px solid #fdc600;

    transition: none !important;
    transform: none !important;
}

.hagedorn-company .hc-link:hover {
    color: #111 !important;
    transform: none !important;
    gap: 0 !important;
}

/* Pfeile ausblenden */
.hagedorn-company .hc-link > span {
    display: none !important;
}


/* =========================================
   HAGEDORN – GESCHICHTE / TIMELINE
   ========================================= */

.hh-page {
    --hh-yellow: #fdc600;
    font-family: "Radio Canada Big", sans-serif;
}

/* Bestehenden Joomla-Titel aufwerten */

.hh-page .article-header {
    max-width: 1200px;
    margin: 70px auto 85px;
}

.hh-page .article-header h1 {
    margin: 0 0 28px;
    color: #111;
    font-size: clamp(46px, 6vw, 82px);
    font-weight: 700;
    line-height: 1;
}

.hh-page .hh-intro {
    max-width: 720px;
}

.hh-page .hh-kicker {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hh-page .hh-intro p {
    margin: 0;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.45;
}

/* Nicht benötigte Joomla-Elemente */

.hh-page .article-ratings-social-share {
    display: none !important;
}

.hh-page [itemprop="articleBody"] > p:empty {
    display: none;
}

/* Hauptcontainer */

.hh-page .hh-history {
    max-width: 1200px;
    margin: 0 auto;
}

.hh-page .hh-timeline {
    position: relative;
    padding-bottom: 30px;
}

/* Durchgehende Mittellinie */

.hh-page .hh-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #e5e5e5;
    transform: translateX(-50%);
}

/* Alte Trennlinien entfernen */

.hh-page .hh-timeline > .uk-grid-divider {
    display: none !important;
}

/* Timeline-Einträge */

.hh-page .hh-step {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 90px;

    width: 100%;
    margin: 0 0 75px !important;
    padding: 0 !important;
}

/* Punkt auf der Mittellinie */

.hh-page .hh-step::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 14px;
    height: 14px;

    background: var(--hh-yellow);
    border: 5px solid #fff;
    border-radius: 50%;

    box-sizing: content-box;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* UIkit-Spalten zurücksetzen */

.hh-page .hh-step > .hh-media,
.hh-page .hh-step > .hh-copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* Abwechselnde Anordnung */

.hh-page .hh-step > .hh-media {
    order: 0 !important;
}

.hh-page .hh-step > .hh-copy {
    order: 1 !important;
}

.hh-page .hh-step--reverse > .hh-copy {
    order: 0 !important;
}

.hh-page .hh-step--reverse > .hh-media {
    order: 1 !important;
}

/* Bilder */

.hh-page .hh-media .uk-inline-clip {
    display: block;
    width: 100%;
    overflow: hidden;
}

.hh-page .hh-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;

    object-fit: cover;

    transform: none !important;
    transition: none !important;
}

/* Altes Overlay und Plus-Symbol entfernen */

.hh-page .hh-media .uk-overlay-primary,
.hh-page .hh-media .uk-overlay-icon {
    display: none !important;
}

/* Bild bleibt auch beim Hover unverändert */

.hh-page .hh-media:hover img,
.hh-page .hh-media .uk-transition-scale-up {
    transform: none !important;
}

/* Textbereich */

.hh-page .hh-copy .uk-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 280px;
    padding: 35px 0 !important;
}

.hh-page .hh-copy h3.uk-h3 {
    margin: 0 0 18px;

    color: #111;
    font-size: clamp(50px, 6vw, 86px);
    font-weight: 700;
    line-height: 1;
}

/* Kurze gelbe Linie unter der Jahreszahl */

.hh-page .hh-copy h3.uk-h3::after {
    content: "";
    display: block;

    width: 58px;
    height: 5px;
    margin-top: 20px;

    background: var(--hh-yellow);
}

.hh-page .hh-copy .uk-margin {
    margin-top: 0 !important;
}

.hh-page .hh-copy .uk-margin h3 {
    margin: 0 0 16px;

    color: #111;
    font-size: clamp(22px, 2.4vw, 31px);
    font-weight: 700;
    line-height: 1.15;
}

.hh-page .hh-copy .uk-margin p {
    max-width: 470px;
    margin: 0 0 12px;

    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

/* Dezente Animation – kein Hover-Zoom */

@media (prefers-reduced-motion: no-preference) {

    .hh-page.hh-animate .hh-step {
        opacity: 0;
        transform: translateY(25px);
        transition:
            opacity .6s ease,
            transform .6s ease;
    }

    .hh-page.hh-animate .hh-step.hh-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .hh-page .article-header {
        margin: 50px auto 65px;
    }

    .hh-page .hh-step {
        gap: 55px;
        margin-bottom: 60px !important;
    }

    .hh-page .hh-copy .uk-panel {
        min-height: 220px;
        padding: 20px 0 !important;
    }

    .hh-page .hh-copy h3.uk-h3 {
        font-size: 59px;
    }

    .hh-page .hh-copy .uk-margin p {
        font-size: 14px;
    }
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .hh-page .article-header {
        margin: 35px auto 50px;
    }

    .hh-page .article-header h1 {
        font-size: 43px;
    }

    .hh-page .hh-intro p {
        font-size: 17px;
    }

    /* Linie links statt in der Mitte */

    .hh-page .hh-timeline::before {
        left: 12px;
        transform: none;
    }

    .hh-page .hh-step {
        display: flex !important;
        flex-direction: column;

        align-items: stretch;
        gap: 20px;

        margin-bottom: 55px !important;
        padding-left: 38px !important;
    }

    .hh-page .hh-step::before {
        top: 15px;
        left: 13px;
        transform: translate(-50%, 0);
    }

    /* Immer Bild vor Text */

    .hh-page .hh-step > .hh-media,
    .hh-page .hh-step--reverse > .hh-media {
        order: 0 !important;
    }

    .hh-page .hh-step > .hh-copy,
    .hh-page .hh-step--reverse > .hh-copy {
        order: 1 !important;
    }

    .hh-page .hh-media img {
        aspect-ratio: 16 / 10;
    }

    .hh-page .hh-copy .uk-panel {
        min-height: 0;
        padding: 0 !important;
    }

    .hh-page .hh-copy h3.uk-h3 {
        margin-bottom: 15px;
        font-size: 54px;
    }

    .hh-page .hh-copy h3.uk-h3::after {
        width: 45px;
        height: 4px;
        margin-top: 15px;
    }

    .hh-page .hh-copy .uk-margin h3 {
        font-size: 23px;
    }

    .hh-page .hh-copy .uk-margin p {
        font-size: 14px;
        line-height: 1.55;
    }
}

.career-hero, #sp-lehrstellen-slide {
	display: none !important;
}

.sp-scroll-up  {
	display: none !important;
}

/* =========================================================
   HAGEDORN – NACHHALTIGKEIT
   ========================================================= */

.hagedorn-sustainability-page {
    --hs-yellow: #fdc600;
    font-family: "Radio Canada Big", sans-serif;
}

.hagedorn-sustainability-page #sp-component {
    max-width: 1200px;
    margin: 0 auto;
}

.hagedorn-sustainability-page .article-header {
    margin-bottom: 35px;
}

.hagedorn-sustainability-page .article-header h2 {
    max-width: 850px;
    margin: 0;

    color: #111;

    font-size: clamp(38px, 5vw, 62px);
    font-weight: 700;
    line-height: 1.02;
}

.hagedorn-sustainability-page .hs-kicker {
    margin-bottom: 16px;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.hagedorn-sustainability-page p {
    color: #252525;

    font-size: 16px;
    line-height: 1.65;
}


/* =========================================================
   SOLAR / EINSTIEG
   ========================================================= */



.hagedorn-sustainability-page .hs-lead {
    max-width: 760px;

    margin: 0 0 55px !important;

    font-size: 21px;
    line-height: 1.5;
}


/* altes Widgetkit Grid überschreiben */

.hagedorn-sustainability-page .hs-solar-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 25px !important;

    margin: 0 !important;
}

.hagedorn-sustainability-page
.hs-solar-grid::before {
    display: none !important;
}


/* Karten */

.hagedorn-sustainability-page
.hs-solar-card {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.hagedorn-sustainability-page
.hs-solar-card > .uk-panel {
    display: flex;
    flex-direction: column;

    height: 100%;

    background: #f3f3f3;
}


/* Bild */

.hagedorn-sustainability-page
.hs-solar-card .uk-text-center {
    margin: 0 !important;

    overflow: hidden;
}

.hagedorn-sustainability-page
.hs-solar-card img {
    display: block;

    width: 100%;
    height: 240px;

    object-fit: cover;

    transform: none !important;
    transition: none !important;
}


/* kein Zoom / Overlay */

.hagedorn-sustainability-page
.hs-solar-card:hover img {
    transform: none !important;
}


/* Karteninhalt */

.hagedorn-sustainability-page
.hs-solar-card .uk-panel > h3,
.hagedorn-sustainability-page
.hs-solar-card .uk-panel > .uk-margin,
.hagedorn-sustainability-page
.hs-solar-card .uk-panel > p {
    margin-left: 25px !important;
    margin-right: 25px !important;
}

.hagedorn-sustainability-page
.hs-solar-card h3.uk-h3 {
    margin-top: 28px !important;
    margin-bottom: 8px !important;

    font-size: 25px;
    font-weight: 700;
}

.hagedorn-sustainability-page
.hs-solar-card h3 a {
    color: #111 !important;
    text-decoration: none !important;
}

.hagedorn-sustainability-page
.hs-solar-card h4 {
    margin: 0 0 15px;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
}

.hagedorn-sustainability-page
.hs-solar-card .uk-margin p {
    font-size: 13px;
    line-height: 1.65;
}


/* Detailansicht Button wie Hagedorn-Link */

.hagedorn-sustainability-page
.hs-solar-card .uk-button {
    display: inline-block;

    min-height: 0;

    margin-bottom: 25px;
    padding: 10px 0 !important;

    border: 0 !important;
    border-bottom: 4px solid var(--hs-yellow) !important;

    background: transparent !important;

    color: #111 !important;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.2;

    text-transform: none;

    transition: none !important;
    transform: none !important;
}

.hagedorn-sustainability-page
.hs-solar-card .uk-button:hover {
    background: transparent !important;

    color: #111 !important;

    transform: none !important;
}

.hagedorn-sustainability-page
.hs-solar-card .uk-button i {
    display: none;
}


/* =========================================================
   QUALITÄT
   ========================================================= */

.hagedorn-sustainability-page
.hs-quality {
    margin-top: 20px;
    padding: 100px 0 110px;

    border-top: 1px solid #ddd;
}

.hagedorn-sustainability-page
.hs-quality .article-introtext > p {
    max-width: 850px;
}

.hagedorn-sustainability-page
.hs-quality .article-introtext > p:first-child {
    margin-top: 0;

    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
}


/* alte HR entfernen */

.hagedorn-sustainability-page
.hs-quality hr {
    margin: 75px 0 55px;

    border: 0;
    border-top: 1px solid #ddd;
}


/* Zwischenüberschriften */

.hagedorn-sustainability-page
.hs-quality .article-introtext > h3 {
    margin: 70px 0 30px;

    font-size: clamp(27px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.1;
}


/* =========================================================
   ZERTIFIKAT-BLÖCKE
   ========================================================= */

.hagedorn-sustainability-page
.hs-cert-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(260px, .55fr);

    gap: 60px;

    align-items: start;

    margin: 0 0 80px !important;
    padding: 35px 0 0;

    border-top: 5px solid var(--hs-yellow);
}


/* UIkit Breiten eliminieren */

.hagedorn-sustainability-page
.hs-cert-row > div {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Listen */

.hagedorn-sustainability-page
.hs-quality ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.hagedorn-sustainability-page
.hs-quality li {
    position: relative;

    margin-bottom: 22px;
    padding-left: 22px;

    font-size: 15px;
    line-height: 1.55;
}

.hagedorn-sustainability-page
.hs-quality li::before {
    content: "";

    position: absolute;

    top: 8px;
    left: 0;

    width: 8px;
    height: 8px;

    background: var(--hs-yellow);
}

.hagedorn-sustainability-page
.hs-quality li strong {
    font-size: 17px;
}


/* Zertifikatsbilder */

.hagedorn-sustainability-page
.hs-cert-row .uk-scope {
    width: 100%;
}

.hagedorn-sustainability-page
.hs-cert-row .uk-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px !important;

    margin: 0 !important;
}

.hagedorn-sustainability-page
.hs-cert-row .uk-grid > div {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.hagedorn-sustainability-page
.hs-cert-row img {
    display: block;

    width: 100%;
    height: auto;

    transform: none !important;
    transition: none !important;
}


/* Plus-Overlay entfernen */

.hagedorn-sustainability-page
.hs-cert-row .uk-overlay-primary,
.hagedorn-sustainability-page
.hs-cert-row .uk-overlay-icon {
    display: none !important;
}


/* Bild darf weiterhin klickbar bleiben */

.hagedorn-sustainability-page
.hs-cert-row .uk-position-cover {
    display: block;
}


/* Links */

.hagedorn-sustainability-page
.hs-quality a:not(.uk-position-cover) {
    color: #111;
    font-weight: 700;

    text-decoration-color: var(--hs-yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .hagedorn-sustainability-page
    .hs-solar {
        padding: 60px 0 90px;
    }

    .hagedorn-sustainability-page
    .hs-solar-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .hagedorn-sustainability-page
    .hs-cert-row {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(220px, .8fr);

        gap: 35px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hagedorn-sustainability-page
    .article-header h2 {
        font-size: 36px;
    }

    .hagedorn-sustainability-page
    .hs-solar {
        padding: 40px 0 65px;
    }

    .hagedorn-sustainability-page
    .hs-lead {
        margin-bottom: 35px !important;

        font-size: 17px;
    }

    .hagedorn-sustainability-page
    .hs-solar-grid {
        grid-template-columns: 1fr;

        gap: 18px !important;
    }

    .hagedorn-sustainability-page
    .hs-solar-card img {
        height: 220px;
    }

    .hagedorn-sustainability-page
    .hs-quality {
        padding: 70px 0;
    }

    .hagedorn-sustainability-page
    .hs-quality .article-introtext > p:first-child {
        font-size: 17px;
    }

    .hagedorn-sustainability-page
    .hs-cert-row {
        display: flex !important;

        flex-direction: column;

        gap: 30px;

        margin-bottom: 60px !important;
        padding-top: 25px;
    }

    .hagedorn-sustainability-page
    .hs-cert-row .uk-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .hagedorn-sustainability-page
    .hs-quality li {
        font-size: 14px;
    }

}

/* =========================================
   NACHHALTIGKEIT – FEINSCHLIFF
   ganz unten in custom.css
   ========================================= */

/* Haupttitel deutlich grösser */
.hagedorn-sustainability-page .article-header h2 {
    font-size: clamp(48px, 6vw, 70px) !important;
    line-height: 0.98 !important;
    max-width: 980px;
}

/* Mobile trotzdem kräftig */
@media (max-width: 767px) {
    .hagedorn-sustainability-page .article-header h2 {
        font-size: 42px !important;
        line-height: 1 !important;
    }
}


/* ALLE grauen Trennlinien/Borders entfernen */
.hagedorn-sustainability-page .hs-quality,
.hagedorn-sustainability-page .hs-cert-row,
.hagedorn-sustainability-page .uk-grid-trennlinie,
.hagedorn-sustainability-page .uk-grid-divider,
.hagedorn-sustainability-page .uk-panel,
.hagedorn-sustainability-page .hs-solar-card > .uk-panel {
    border: 0 !important;
    box-shadow: none !important;
}


/* UIkit erzeugt teilweise Borders über Pseudoelemente */
.hagedorn-sustainability-page .uk-grid-trennlinie > *,
.hagedorn-sustainability-page .uk-grid-divider > * {
    border: 0 !important;
}

.hagedorn-sustainability-page .uk-grid-trennlinie > *::before,
.hagedorn-sustainability-page .uk-grid-divider > *::before {
    display: none !important;
    content: none !important;
}


/* Zertifikatsblöcke:
   nur noch gelbe Linie oben */
.hagedorn-sustainability-page .hs-cert-row {
    border-top: 5px solid #fdc600 !important;
}


/* Solarkarten ohne Rahmen */
.hagedorn-sustainability-page .hs-solar-card,
.hagedorn-sustainability-page .hs-solar-card > .uk-panel {
    outline: 0 !important;
    border-radius: 0 !important;
}

.article-list .article {
	border: none !important;
}


/* =========================================
   HAGEDORN – VIDEOS & EINBLICKE
   ========================================= */

.blogvideos.hv-gallery {
    max-width: 1200px;
    margin: 70px auto 110px;
    font-family: "Radio Canada Big", sans-serif;
}

/* Drei Spalten auf Desktop */

.blogvideos.hv-gallery .article-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px 25px;
    margin: 0 !important;
}

/* Joomla-Rows und -Spalten zurücksetzen */

.blogvideos.hv-gallery .article-list > .row {
    display: block !important;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.blogvideos.hv-gallery
.article-list > .row > .col-lg-12 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Karten ohne Rahmen oder Hintergrund */

.blogvideos.hv-gallery .article {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.blogvideos.hv-gallery .article-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Video vor dem Titel anzeigen */

.blogvideos.hv-gallery .article-introtext {
    order: 1;
    width: 100%;
}

.blogvideos.hv-gallery .article-header {
    order: 2;
    margin: 0 !important;
    padding: 22px 0 0 !important;
}

/* Titel */

.blogvideos.hv-gallery .article-header h2 {
    margin: 0 !important;

    color: #111 !important;
    font-size: 23px !important;
    font-weight: 700;
    line-height: 1.15;
}

/* Hagedorn-Linie */

.blogvideos.hv-gallery .article-header h2::before {
    content: "";
    display: block;

    width: 45px;
    height: 4px;
    margin-bottom: 17px;

    background: #fdc600;
}

/* Video-Container */

.blogvideos.hv-gallery .hv-media {
    position: relative;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}

/* Vorschaubild */

.blogvideos.hv-gallery .hv-video-trigger {
    position: relative;
    display: block;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    border: none;
    border-radius: 0;
    background: #111;

    cursor: pointer;
}

.blogvideos.hv-gallery .hv-video-trigger img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: none !important;
    transition: none !important;
}

/* Schwarzer Play-Button */

.blogvideos.hv-gallery .hv-play {
    position: absolute;
    top: 50%;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    border-radius: 50%;
    background: #111;

    transform: translate(-50%, -50%);
    transition: background .2s ease;
}

.blogvideos.hv-gallery .hv-play::after {
    content: "";

    width: 0;
    height: 0;
    margin-left: 4px;

    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 17px solid #fdc600;
}

/* Keine Bildvergrösserung beim Hover */

.blogvideos.hv-gallery
.hv-video-trigger:hover .hv-play {
    background: #fdc600;
}

.blogvideos.hv-gallery
.hv-video-trigger:hover .hv-play::after {
    border-left-color: #111;
}

.blogvideos.hv-gallery
.hv-video-trigger:focus-visible {
    outline: 3px solid #fdc600;
    outline-offset: 4px;
}

/* Eingebetteter YouTube-Player */

.blogvideos.hv-gallery .hv-media iframe,
.blogvideos.hv-gallery .article-introtext iframe {
    display: block;

    width: 100% !important;
    height: 100% !important;

    aspect-ratio: 16 / 9;
    border: 0 !important;
}

/* =========================================
   TABLET – 2 SPALTEN
   ========================================= */

@media (max-width: 991px) {

    .blogvideos.hv-gallery {
        margin: 50px auto 85px;
    }

    .blogvideos.hv-gallery .article-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 40px 20px;
    }

    .blogvideos.hv-gallery .article-header h2 {
        font-size: 21px !important;
    }

}

/* =========================================
   MOBILE – 1 SPALTE
   ========================================= */

@media (max-width: 767px) {

    .blogvideos.hv-gallery {
        margin: 35px auto 70px;
    }

    .blogvideos.hv-gallery .article-list {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .blogvideos.hv-gallery .article-header {
        padding-top: 18px !important;
    }

    .blogvideos.hv-gallery .article-header h2 {
        font-size: 23px !important;
    }

    .blogvideos.hv-gallery .hv-play {
        width: 55px;
        height: 55px;
    }

}

.hv-page-header {
	margin-bottom: 50px;
}


/* =========================================
   HAGEDORN – DOKUMENTE
   Passend zum vorhandenen JavaScript
   ========================================= */

.download-hagedorn.hd-ready {
    --hd-yellow: #fdc600;

    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 0 110px;

    font-family: "Radio Canada Big", sans-serif;
    color: #111;
}

.download-hagedorn.hd-ready *,
.download-hagedorn.hd-ready *::before,
.download-hagedorn.hd-ready *::after {
    box-sizing: border-box;
}


/* =========================================
   SEITENKOPF
   ========================================= */

.download-hagedorn .hd-page-header {
    max-width: 850px;
    margin: 0 0 65px;
}

.download-hagedorn .hd-kicker {
    display: block;
    margin-bottom: 18px;

    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.download-hagedorn .hd-page-header h1 {
    margin: 0 0 24px !important;

    color: #111 !important;
    font-size: clamp(48px, 6vw, 78px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.download-hagedorn .hd-page-header p {
    max-width: 650px;
    margin: 0;

    font-size: 20px;
    line-height: 1.5;
}


/* =========================================
   KATEGORIEN-NAVIGATION
   ========================================= */

.download-hagedorn .hd-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0 0 90px;
}

.download-hagedorn .hd-navigation a {
    display: inline-flex;
    align-items: center;

    min-height: 43px;
    padding: 10px 17px;

    border: 1px solid #111;
    border-radius: 0;

    background: transparent;
    color: #111 !important;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;

    transition:
        background .2s ease,
        color .2s ease;
}

.download-hagedorn .hd-navigation a:hover,
.download-hagedorn .hd-navigation a:focus-visible {
    border-color: #111;
    background: #111;
    color: #fff !important;
}


/* =========================================
   DOKUMENTKATEGORIEN
   ========================================= */

.download-hagedorn .hd-section {
    margin: 0 0 90px;
    scroll-margin-top: 120px;
}

.download-hagedorn .hd-section-title {
    display: block;

    margin: 0 0 35px !important;
    padding: 0 !important;

    color: #111 !important;
    font-size: clamp(30px, 3.5vw, 44px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

/* Typische Hagedorn-Linie */

.download-hagedorn .hd-section-title::after {
    content: "";
    display: block;

    width: 60px;
    height: 5px;
    margin-top: 20px;

    background: var(--hd-yellow);
}


/* =========================================
   DOKUMENTLISTE
   ========================================= */

.download-hagedorn .hd-document-grid {
    display: flex;
    flex-direction: column;
    gap: 0;

    width: 100%;
}


/* Äussere UIkit-Grids zurücksetzen */

.download-hagedorn .hd-document {
    display: block !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.download-hagedorn .hd-document::before,
.download-hagedorn .hd-document::after {
    display: none !important;
    content: none !important;
}

.download-hagedorn .hd-document > div {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Einzelne Dokumentzeile */

.download-hagedorn .hd-document .uk-panel-box {
    display: grid !important;

    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 22px;

    width: 100%;
    min-height: 96px;

    margin: 0 !important;
    padding: 22px 0 !important;

    border: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}

.download-hagedorn
.hd-document:first-child .uk-panel-box {
    border-top: 1px solid #e5e5e5 !important;
}


/* =========================================
   DATEITYP-SYMBOL
   ========================================= */

.download-hagedorn .hd-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    background: #f2f2f2;
    color: #111;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}


/* =========================================
   DOKUMENTTITEL UND DOWNLOAD
   ========================================= */

.download-hagedorn .hd-document .uk-nbfc {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: center;
    gap: 25px;

    width: 100%;
    min-width: 0;
    overflow: visible !important;
}

.download-hagedorn .hd-document .uk-panel-title {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;

    color: #111 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.download-hagedorn .hd-document .uk-panel-title a {
    color: #111 !important;
    text-decoration: none !important;
}

.download-hagedorn .hd-document .uk-panel-title a:hover {
    color: #111 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--hd-yellow) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px;
}


/* Download-Link rechts */

.download-hagedorn .hd-document .uk-nbfc > .uk-margin {
    margin: 0 !important;
    padding: 0 !important;
}

.download-hagedorn .hd-document .uk-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-width: 130px;
    min-height: 43px;

    margin: 0 !important;
    padding: 10px 0 !important;

    border: 0 !important;
    border-bottom: 4px solid var(--hd-yellow) !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #111 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;

    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.download-hagedorn .hd-document .uk-button:hover,
.download-hagedorn .hd-document .uk-button:focus {
    background: transparent !important;
    color: #111 !important;
    transform: none !important;
}


/* =========================================
   ALTE UIKIT-RAHMEN ENTFERNEN
   ========================================= */

.download-hagedorn.hd-ready .uk-grid-divider,
.download-hagedorn.hd-ready .uk-panel,
.download-hagedorn.hd-ready .uk-panel-box {
    box-shadow: none !important;
}

.download-hagedorn.hd-ready .uk-grid-divider::before,
.download-hagedorn.hd-ready .uk-grid-divider > *::before {
    display: none !important;
    content: none !important;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .download-hagedorn.hd-ready {
        padding: 55px 0 85px;
    }

    .download-hagedorn .hd-navigation {
        margin-bottom: 70px;
    }

    .download-hagedorn .hd-section {
        margin-bottom: 75px;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .download-hagedorn.hd-ready {
        padding: 40px 0 70px;
    }

    .download-hagedorn .hd-page-header {
        margin-bottom: 38px;
    }

    .download-hagedorn .hd-page-header h1 {
        font-size: 42px !important;
    }

    .download-hagedorn .hd-page-header p {
        font-size: 16px;
    }

    .download-hagedorn .hd-navigation {
        gap: 8px;
        margin-bottom: 55px;
    }

    .download-hagedorn .hd-navigation a {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 12px;
    }

    .download-hagedorn .hd-section {
        margin-bottom: 60px;
        scroll-margin-top: 85px;
    }

    .download-hagedorn .hd-section-title {
        margin-bottom: 25px !important;
        font-size: 30px !important;
    }

    .download-hagedorn .hd-document .uk-panel-box {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 13px;
        padding: 18px 0 !important;
    }

    .download-hagedorn .hd-file-icon {
        width: 36px;
        height: 36px;
        font-size: 9px;
    }

    .download-hagedorn .hd-document .uk-nbfc {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .download-hagedorn .hd-document .uk-panel-title {
        font-size: 15px !important;
    }

    .download-hagedorn .hd-document .uk-button {
        justify-content: flex-start;
        min-width: auto;
        min-height: 32px;
        padding: 6px 0 !important;
        font-size: 12px !important;
    }

}

.special-services-scroller {
	display: none;
}


/* Kundenportal standardmässig ausblenden */

#sp-header .header-modules .hagedorn-portal-link {
    display: none;
}

/* Nur bei geöffnetem Desktop-Menü */

@media (min-width: 992px) {

    body.hagedorn-menu-open
    #sp-header .header-modules {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;
    }

    /* Suche und bisherigen Login ausblenden */

    body.hagedorn-menu-open
    #sp-header .header-modules > .sp-module {
        display: none !important;
    }

    /* Kundenportal anzeigen */

    body.hagedorn-menu-open
    #sp-header .header-modules .hagedorn-portal-link {
        display: inline-flex !important;
        align-items: center;

        margin-right: 22px;
        padding: 10px 0;

        color: #111 !important;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none !important;

        border-bottom: 4px solid #fdc600;

        white-space: nowrap;
        transition: none !important;
        transform: none !important;
		margin-bottom: -3px;
    }

}



/* =========================================
   HAGEDORN – AKTUELLES
   ========================================= */

.blognews.hn-ready {
    --hn-yellow: #fdc600;

    max-width: 1200px;
    margin: 70px auto 100px;

    font-family: "Radio Canada Big", sans-serif;
    color: #111;
}

.blognews.hn-ready *,
.blognews.hn-ready *::before,
.blognews.hn-ready *::after {
    box-sizing: border-box;
}


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

.blognews .hn-page-header {
    margin: 0 0 65px;
}

.blognews .hn-kicker {
    display: block;
    margin-bottom: 18px;

    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.blognews .hn-page-header h1 {
    margin: 0 !important;

    color: #111 !important;
    font-size: clamp(48px, 6vw, 78px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}


/* =========================================
   NEWS-GRID
   ========================================= */

.blognews.hn-ready .article-list {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 55px 26px !important;

    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}


/* Joomla-Rows zurücksetzen */

.blognews.hn-ready .article-list > .row {
    display: block !important;

    width: 100%;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;
}

.blognews.hn-ready
.article-list > .row > .col-lg-12 {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================
   NEWS-KARTEN
   ========================================= */

.blognews.hn-ready .article-list .article {
    display: flex !important;
    flex-direction: column;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
}


/* =========================================
   BILDER
   ========================================= */

.blognews.hn-ready .article-intro-image {
    float: none !important;
    display: block;

    width: 100% !important;

    margin: 0 0 22px !important;
    padding: 0 !important;

    overflow: hidden;
}

.blognews.hn-ready .hn-image-link {
    display: block;
    width: 100%;
    overflow: hidden;
}

.blognews.hn-ready .article-intro-image img {
    display: block;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;

    object-fit: cover;
    object-position: center;

    border-radius: 0 !important;

    transform: none !important;
    transition: none !important;
}

/* Kein Vergrösserungseffekt */

.blognews.hn-ready
.article-intro-image:hover img {
    transform: none !important;
}


/* =========================================
   KARTENINHALT
   ========================================= */

.blognews.hn-ready .article-body {
    display: flex;
    flex-direction: column;
    flex: 1;

    width: 100%;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}


/* Datum zuerst */

.blognews.hn-ready .article-info {
    order: 1;

    margin: 0 0 14px !important;
    padding: 0 !important;

    color: #666;
    font-size: 12px;
    font-weight: 500;

    border: 0 !important;
}

.blognews.hn-ready .article-info time {
    color: #666 !important;
    font-size: 12px;
}


/* Beitragstitel */

.blognews.hn-ready .article-header {
    order: 2;

    margin: 0 0 15px !important;
    padding: 0 !important;
}

.blognews.hn-ready .article-header h2 {
    margin: 0 !important;

    color: #111 !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.blognews.hn-ready .article-header h2 a {
    color: #111 !important;
    text-decoration: none !important;

    transition: none !important;
}


/* Kurzbeschreibung */

.blognews.hn-ready .article-introtext {
    display: flex;
    flex-direction: column;
    flex: 1;
    order: 3;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;
}

.blognews.hn-ready .article-introtext > p {
    flex: 1;

    margin: 0 0 24px !important;

    color: #333;
    font-size: 15px;
    line-height: 1.6;
}


/* =========================================
   WEITERLESEN
   ========================================= */

.blognews.hn-ready .readmore {
    margin: auto 0 0 !important;
    padding: 0 !important;
}

.blognews.hn-ready .readmore a {
    display: inline-block;

    min-height: 0;
    margin: 0;
    padding: 10px 0 !important;

    border: 0 !important;
    border-bottom: 4px solid var(--hn-yellow) !important;
    border-radius: 0 !important;

    background: transparent !important;
    color: #111 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;

    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.blognews.hn-ready .readmore a:hover {
    background: transparent !important;
    color: #111 !important;

    transform: none !important;
}


/* =========================================
   WEITERE ARTIKEL
   ========================================= */

.blognews.hn-ready .items-more {
    margin: 85px 0 45px;
    padding-top: 35px;

    border-top: 1px solid #e5e5e5;
}

.blognews.hn-ready .com-content-blog__links {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px 35px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.blognews.hn-ready
.com-content-blog__link a {
    display: inline-block;

    padding: 7px 0;

    color: #111 !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
}

.blognews.hn-ready
.com-content-blog__link a:hover {
    text-decoration: underline !important;
    text-decoration-color: var(--hn-yellow) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 5px;
}


/* =========================================
   PAGINATION
   ========================================= */

.blognews.hn-ready
.com-content-category-blog__navigation {
    margin-top: 60px;
}

.blognews.hn-ready .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: 0 !important;
    padding: 0;
}

.blognews.hn-ready .pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 43px;
    min-height: 43px;

    padding: 8px 12px;

    border: 1px solid #ddd !important;
    border-radius: 0 !important;

    background: #fff !important;
    color: #111 !important;

    font-size: 14px;
    font-weight: 700;

    box-shadow: none !important;
}

.blognews.hn-ready
.pagination .page-item.active .page-link {
    border-color: var(--hn-yellow) !important;
    background: var(--hn-yellow) !important;
}

.blognews.hn-ready
.pagination .page-item:not(.disabled):not(.active)
.page-link:hover {
    border-color: #111 !important;
    background: #111 !important;
    color: #fff !important;
}

.blognews.hn-ready
.pagination .page-item.disabled .page-link {
    opacity: .35;
}

.blognews.hn-ready
.com-content-category-blog__counter {
    color: #666;
    font-size: 13px;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 991px) {

    .blognews.hn-ready {
        margin: 50px auto 85px;
    }

    .blognews.hn-ready .article-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 45px 20px !important;
    }

    .blognews.hn-ready
    .article-header h2 {
        font-size: 23px !important;
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .blognews.hn-ready {
        margin: 35px auto 70px;
    }

    .blognews .hn-page-header {
        margin-bottom: 40px;
    }

    .blognews .hn-page-header h1 {
        font-size: 42px !important;
    }

    .blognews.hn-ready .article-list {
        grid-template-columns: 1fr !important;
        gap: 45px !important;
    }

    .blognews.hn-ready .article-intro-image {
        margin-bottom: 18px !important;
    }

    .blognews.hn-ready .article-header h2 {
        font-size: 24px !important;
    }

    .blognews.hn-ready .article-introtext > p {
        font-size: 14px;
        margin-bottom: 18px !important;
    }

    .blognews.hn-ready .items-more {
        margin-top: 60px;
    }

    .blognews.hn-ready
    .com-content-blog__links {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .blognews.hn-ready
    .com-content-category-blog__navigation {
        margin-top: 40px;
    }

    .blognews.hn-ready .pagination {
        gap: 5px;
    }

    .blognews.hn-ready
    .pagination .page-link {
        min-width: 36px;
        min-height: 36px;
        padding: 6px;
        font-size: 12px;
    }

}


/* =========================================
   AKTUELLES – PAGINATION / FEINSCHLIFF
   ========================================= */

/* Vier zusätzliche News-Links entfernen */
.blognews .items-more {
    display: none !important;
}

/* Gesamte Pagination zentrieren */
.blognews .com-content-category-blog__navigation {
    display: flex !important;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 22px;

    width: 100%;
    margin: 70px auto 0 !important;
    padding: 0 !important;
}

/* Joomla-Container */
.blognews .com-content-category-blog__pagination {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Seitenzahlen und Pfeile */
.blognews .pagination {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;

    list-style: none;
}

.blognews .pagination .page-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Schlichte Pagination-Buttons */
.blognews .pagination .page-link {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;

    color: #111 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    box-shadow: none !important;
    transition: none !important;
}

/* Aktuelle Seite */
.blognews .pagination .page-item.active .page-link {
    background: #fdc600 !important;
    color: #111 !important;
    font-weight: 700 !important;
}

/* Hover: gelbe Hervorhebung */
.blognews .pagination .page-item:not(.disabled):not(.active)
.page-link:hover {
    background: #fdc600 !important;
    color: #111 !important;
}

/* Deaktivierte Pfeile */
.blognews .pagination .page-item.disabled .page-link {
    color: #bbb !important;
    opacity: .4;
}

/* Seitenzähler unterhalb */
.blognews .com-content-category-blog__counter {
    float: none !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #777;
    font-size: 13px;
    line-height: 1.4;
    text-align: center !important;
}

/* Mobile */
@media (max-width: 767px) {
    .blognews .com-content-category-blog__navigation {
        gap: 16px;
        margin-top: 45px !important;
    }

    .blognews .pagination {
        gap: 3px;
    }

    .blognews .pagination .page-link {
        width: 32px;
        height: 36px;
        font-size: 12px !important;
    }
}

body.hagedorn-menu-open #sp-header, body.hagedorn-menu-open #modal-menu .modal-menu-inner {
	background: white !important;
}





/* Gelbe Hover-Linie im Mega-Menü */

#modal-menu .sp-mega-group-child .sp-menu-item > a {
    position: relative;
    display: inline-block;
    width: fit-content;
    padding-bottom: 5px;
    text-decoration: none !important;
}

/* Linie zunächst unsichtbar */
#modal-menu .sp-mega-group-child .sp-menu-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #fdc600;

    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

/* Von links nach rechts einblenden */
#modal-menu .sp-mega-group-child .sp-menu-item > a:hover::after,
#modal-menu .sp-mega-group-child .sp-menu-item > a:focus-visible::after {
    transform: scaleX(1);
}

/* Beim Verlassen nach links zurückziehen */
#modal-menu .sp-mega-group-child .sp-menu-item > a:not(:hover)::after {
    transform-origin: right center;
}

@media (prefers-reduced-motion: reduce) {
    #modal-menu .sp-mega-group-child .sp-menu-item > a::after {
        transition: none;
    }
}

/* Untermenüpunkte beim Hover nicht ausgrauen */

#modal-menu .sp-mega-group-child .sp-menu-item > a,
#modal-menu .sp-mega-group-child .sp-menu-item > a:hover,
#modal-menu .sp-mega-group-child .sp-menu-item > a:focus {
    color: #111 !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Auch andere Menüpunkte beim Hover nicht abdunkeln */
#modal-menu .sp-mega-group-child:hover .sp-menu-item > a {
    opacity: 1 !important;
}

.articles-leading {margin-bottom: 100px;}

.hagedorn-sustainability-page .hs-quality .article-introtext > p {
	max-width: unset !important;
}

.offcanvas-menu {
	background: white !important;
}


/* Jubiläumssignet rechts unten an der Slideshow */

#sp-slideshow-top {
    position: relative;
    overflow: visible !important;
}

#sp-slideshow-top .hagedorn-hero-badge {
  position: absolute;
  right: 10%;
  bottom: -95px;
  width: 100px;
  height: auto;
  z-index: 20;
  pointer-events: none;
}

/* Mobile */

@media (max-width: 767px) {
  #sp-slideshow-top .hagedorn-hero-badge {
    right: 25px;
    bottom: -59px;
    width: 62px;
  }
}