/* Einstellung Höhe Navigationsbalken */
.header-navigation-inner {height:120px;}
.diese_seite h1 {color:#fff;}
/* Sub-Navi des rechtesten Buttons nicht nach Links verschieben */
.main-navigation > ul > li.last > ul {right:auto;left:auto;}
.audio_container audio {height: 40px;}
@media only screen and (min-width:768px) {.column2 {-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:2.5em;-moz-column-gap:2.5em;column-gap:2.5em;}.column3,.column4 {-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:2.5em;-moz-column-gap:2.5em;column-gap:2.5em;}}@media only screen and (min-width:992px) {.column4 {-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:2.5em;-moz-column-gap:2.5em;column-gap:2.5em;}.column3 {-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:2.5em;-moz-column-gap:2.5em;column-gap:2.5em;}}@media only screen and (min-width:1025px) {.column4 {-webkit-column-count:4;-moz-column-count:4;column-count:4;-webkit-column-gap:2.5em;-moz-column-gap:2.5em;column-gap:2.5em;}}
/* Korrektur column2 usw. */
.main-content p,.main-content ul,.main-content ol,.main-content table,.main-content form {margin-top: 0 !important;	margin-bottom: 1em !important;}
.main-content fieldset {margin-top: 0 !important;margin-bottom: 0 !important;}
/* Navi weg, wenn mobil-Navi kommt */
@media screen and (max-width: 567px) {
.main-navigation {display:none;}
}
/* Überwschriften */
.main-content h2 {font-weight: 700 !important; line-height: 1.5 !important;}
.main-content h3 {font-weight: 700 !important; color: rgba(218, 3, 45, 1);}
/* Abstände */
.oben-unten-Footer {padding-top: 1em;padding-bottom: 0.5em;}
.oben-unten-Centered-Wrapper {padding-top: 1em;padding-bottom: 1em;}
.button-volle-breite {width: 100%;}
.button-unten-absenden {margin-bottom: 20px;margin-top:20px;}
/* Innenabstand Formular */
.links-15 {/* padding-left: 15px; */ font-size:1.1em; margin-bottom:20px;}
@media screen and (min-width: 1188px) {.links-15 {padding-right: 30px;padding-left: 30px;}}
.rechts-0 {padding-right: 0;}
@media screen and (max-width: 769px) {.rechts-0m {padding-right: 0;}}
label {font-size:1.1em;}
@media (min-width: 768px) { .col-4 {width:inherit;}}
/* Alle Radio- und Checkbox-Gruppen im Formular */
.radio_container > span, .checkbox_container > span { display: block !important;}
.explanation { padding: 0.85714em 1.35714em; line-height: normal; border: 1px solid #b2b9c4; border-bottom-color: #a4acb9; border-radius: 3px;
    font-size: 1em; color: inherit; background: #ffffff; }

/* SuchIcon top */
.header-links.-secondary a:after { color: #002A54;}
/* Rant unter Top */
.header-bar {border-bottom: 1px solid #DA032D;}
/* Footer */
.footer-brust, .footer-brust a { color: #dddddd;}
.footer-brust h3 { color: #DA032D;}
/* Pfeil-Dreieck fuer Submenu: span::after (a::after bleibt fuer Border-Animation frei) */
.main-navigation > ul > li.submenu > a > span::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    margin-left: 4px;
    margin-bottom: 1px;
}
/* Team Boxen */
.team-boxes-item p, .team-boxes-item ul, .team-boxes-item ol, .team-boxes-item table, .team-boxes-item form { margin-bottom: 0 !important;}
.team-boxes-item > ul a:after {color: #002A54 !important;}
/* =======================================================
 * Footer — Angleichung an Site1 (Canvas-Theme)
 * ======================================================= */

/* 1. Innenabstand oben + unten (Canvas: ptop70 / pbottom70) */
.page-footer .footer-brust .centered-wrapper-inner {
    padding-top: 30px;
    padding-bottom: 30px;
}
@media screen and (max-width: 599px) {
    .page-footer .footer-brust .centered-wrapper-inner {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

/* 2. h3-Ueberschriften: Border-Bottom wie Canvas (#footer .inside h4) */
.page-footer .footer-brust h3 {
    padding-bottom: 8px;
    margin-bottom: 0.75em;
    border-bottom: 1px solid rgba(218, 3, 45, 0.6);
    font-size: 1.2em;
}

/* 3. Links-Liste unter Wichtige Links: Abstaende + Dekoration */
.page-footer .footer-brust .mod_customnav ul.level_1 {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-footer .footer-brust .mod_customnav ul.level_1 a {
    text-decoration: none;
}
.page-footer .footer-brust .mod_customnav ul.level_1 a:hover {
    text-decoration: underline;
}

/* =======================================================
 * Hauptnavigation - Angleichung an Site1 (Canvas-Theme)
 * ======================================================= */

/* 1. Font-Styling der Top-Level-Menuepunkte */
.main-navigation > ul > li > a,
.main-navigation > ul > li > strong,
.main-navigation > ul > li > span.active,
.main-navigation > ul > li > span.trail,
.main-navigation > ul > li > span.forward {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 1px !important;
}

/* 2. Hover-Farbe */
.main-navigation > ul > li > a:hover,
.main-navigation > ul > li > a:focus {
    color: #DA032D !important;
}

/* 3. Aktiv/Trail-Farbe */
.main-navigation > ul > li > a.active,
.main-navigation > ul > li > a.trail,
.main-navigation > ul > li > a.forward,
.main-navigation > ul > li > strong.active,
.main-navigation > ul > li > strong.trail,
.main-navigation > ul > li > strong.forward,
.main-navigation > ul > li > span.active,
.main-navigation > ul > li > span.trail,
.main-navigation > ul > li > span.forward {
    color: #DA032D !important;
}

/* 4. Border-Animation: UNTEN statt OBEN, Farbe #DA032D */
.main-navigation > ul > li > a:after,
.main-navigation > ul > li > strong:after,
.main-navigation > ul > li > span.active:after,
.main-navigation > ul > li > span.trail:after,
.main-navigation > ul > li > span.forward:after {
    top: auto !important;
    bottom: calc(50% - 1.2em) !important;
    border-top: 2px solid #DA032D !important;
}

/* 5. Aktive/aktuelle Seite: Border dauerhaft sichtbar */
.main-navigation > ul > li > a.active:after,
.main-navigation > ul > li > a.trail:after,
.main-navigation > ul > li > a.forward:after,
.main-navigation > ul > li > strong.active:after,
.main-navigation > ul > li > strong.trail:after,
.main-navigation > ul > li > strong.forward:after,
.main-navigation > ul > li > span.active:after,
.main-navigation > ul > li > span.trail:after,
.main-navigation > ul > li > span.forward:after {
    right: calc(50% - 20px) !important;
    left: calc(50% - 20px) !important;
}


/* 6. Hover-Expansion: max. 100px Border-Breite */
.main-navigation > ul > li:hover > a:after,
.main-navigation > ul > li:hover > strong:after,
.main-navigation > ul > li:hover > span.active:after,
.main-navigation > ul > li:hover > span.trail:after,
.main-navigation > ul > li:hover > span.forward:after {
    right: calc(50% - 20px) !important;
    left: calc(50% - 20px) !important;
    transition-duration: 0.1s, 0.1s;
}

/* =======================================================
 * Tagline — Hintergrund + Seitentitel + Breadcrumb
 * ======================================================= */

/* 1. Hintergrund: dunkelblau */
.tagline {
    background-color: #002A54;
}

/* Tao-Theme legt um den Tagline-Inhalt einen centered-wrapper mit
   padding-top:24px / padding-bottom:16px → macht die Bar zu hoch.
   Gezielt auf 0 setzen damit die Bar wie Site1 (Canvas) ~49px hoch bleibt. */
.tagline .centered-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}

/* 2. Seitentitel: weiss, uppercase — 13px + 18px Padding oben/unten = 49px Gesamthöhe */
.tagline h3.page-title {
    color: #ffffff;
    text-transform: uppercase;
    margin: 0;
    padding: 18px 0;
    line-height: 13px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* 3. Breadcrumb: hellrot, vertikal zentriert in 49px-Bar
   line-height: 13px + padding 18px oben/unten = 49px (identisch h3) */
.tagline .mod_breadcrumb {
    padding: 18px 0;
    line-height: 13px;
    color: #e85c5c;
}
.tagline .mod_breadcrumb a,
.tagline .mod_breadcrumb span.last {
    color: #e85c5c;
}
.tagline .mod_breadcrumb a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* =======================================================
 * Sub-Navigation (linke Seitenleiste) — wie Site1
 * ======================================================= */

/* h3 Modul-Ueberschrift: Tao rendert die Modul-Headline als verlinktes h3
   z.B. <h3><a href="/leistungen">Leistungen</a></h3>
   Kein grauer Box-Hintergrund, roter Text wie Site1 #submenu h3 */
.mod_navigation.sub-navigation h3 {
    margin: 0 0 4px;
}
.mod_navigation.sub-navigation h3 a,
.mod_navigation.sub-navigation h3 a:hover,
.mod_navigation.sub-navigation h3 a.trail {
    background-color: transparent;
    padding: 2px 0 6px;
    color: #da032d;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: none;
}
.mod_navigation.sub-navigation h3 a::before,
.mod_navigation.sub-navigation h3 a.trail::before,
.mod_navigation.sub-navigation h3 a:hover::before {
    display: none;
}

/* Alle Links + strong (Canvas-Compat): bg + Farbe wie Site1 #submenu a */
.mod_navigation.sub-navigation a,
.mod_navigation.sub-navigation strong {
    display: block;
    position: relative;
    padding: 10px 12px;
    background-color: #f9f9f9;
    color: #002a54;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease-out;
}

/* Aktive Abschnitts-Ueberschrift: Tao/Contao 5 nutzt <span class="active submenu">
   statt <strong> — muss als Block-Element mit Padding + bg gestylt werden */
.mod_navigation.sub-navigation li.submenu > span {
    display: block;
    position: relative;
    padding: 10px 12px;
    background-color: #f9f9f9;
    color: #002a54;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

/* Roter Unterstrich-Effekt fuer Links (wie Site1 #submenu a::before) */
.mod_navigation.sub-navigation a::before,
.mod_navigation.sub-navigation strong::before {
    content: "";
    visibility: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #da032d;
    transform: scaleX(0);
    transition: 0.3s ease-in-out;
}
.mod_navigation.sub-navigation a.trail::before,
.mod_navigation.sub-navigation a:hover::before,
.mod_navigation.sub-navigation strong::before {
    visibility: visible;
    transform: scaleX(1);
}

/* Aktive Abschnitts-Ueberschrift (span): roter Unterstrich immer sichtbar */
.mod_navigation.sub-navigation li.submenu > span::before {
    content: "";
    visibility: visible;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #da032d;
    transform: scaleX(1);
}

/* Abstand zwischen Items */
.mod_navigation.sub-navigation li {
    margin-bottom: 10px;
}

/* Aktive Abschnitts-Ueberschrift auf Sektions-Ebene (z.B. /heizung): roter Text */
.mod_navigation.sub-navigation li.active.submenu > span {
    color: #da032d;
}

/* Aktive Seite auf Unterseiten-Ebene (z.B. /festbrennstoffe):
   <li class="active"><span class="active">Festbrennstoffe</span></li>
   Kein li.submenu-Parent — muss separat gestylt werden */
.mod_navigation.sub-navigation span.active,
.mod_navigation.sub-navigation strong.active {
    display: block;
    position: relative;
    padding: 10px 12px;
    background-color: #f9f9f9;
    color: #da032d;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.mod_navigation.sub-navigation span.active::before,
.mod_navigation.sub-navigation strong.active::before {
    content: "";
    visibility: visible;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #da032d;
    transform: scaleX(1);
}

/* Nicht-aktive Abschnitts-Ueberschriften (li.submenu > a): fett + navy Trennlinie
   AUSNAHME: trail-Links (z.B. "Heizung" auf /festbrennstoffe) werden rot + keine navy Linie */
.mod_navigation.sub-navigation li.submenu > a,
.mod_navigation.sub-navigation li.submenu > strong {
    font-weight: 700;
    border-bottom: 1px solid #002a54;
}
.mod_navigation.sub-navigation li.submenu.trail > a.trail {
    color: #da032d;
    border-bottom: none;
}

/* =======================================================
 * Slider (Home) — 100 % Breite, proportionale Höhe (1980×400)
 *
 * RSTS berechnet die Containerhöhe proportional zur Bildgröße
 * und setzt sie als inline-style. Kein min-height → RSTS nutzt
 * die natürliche Proportion: Breite × (400/1980) ≈ 20 % der
 * Viewportbreite. Kein Cropping.
 *
 * Beispiele:
 *   1366 px → ca. 276 px   |   1920 px → ca. 388 px
 * ======================================================= */

/* Kein min-height — RSTS setzt proportionale Höhe per inline-style */
.tagline .mod_rocksolid_slider .rsts-view,
.tagline .mod_rocksolid_slider .rsts-crop,
.tagline .mod_rocksolid_slider .rsts-slide {
    min-height: 0 !important;
}

/* Wrapper-div: normaler Fluss (kein position:absolute) */
.tagline .mod_rocksolid_slider .rsts-slide > div {
    position: static !important;
    overflow: visible !important;
}

/* Bild: volle Breite, kein centering-margin, kein Cropping */
.tagline .mod_rocksolid_slider .rsts-slide img {
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: initial !important;
}

/* =======================================================
 * content-text + media--left — Float-Containment (BFC)
 *
 * Tao-Theme: .media--left > figure { width: 56.25 % / 36 % }
 *            .media > figure img   { width: 100 % }
 * Ohne BFC läuft der Float des vorherigen Elements in das
 * nächste → Versatz. display: flow-root erstellt BFC pro
 * Element → jedes enthält seinen eigenen Float.
 * Gilt für alle Seiten: Wärmepumpen (.icon), Fördermittel, …
 * ======================================================= */
.content-text.media--left {
    display: flow-root !important;
}

/* .icon-spezifisch: figure + img auf natürliche Bildgröße (z.B. 58 px) */
.icon.media--left > figure {
    width: auto !important;
}
.icon.media--left > figure img {
    width: auto !important;
}