/* ===============================
   Responsive Optimierung
   =============================== */

/* Trennung für Mobile */
@media (max-width: 767px) {
  h1,
  .hero-title,
  .hero-title-main,
  .hero-title-sub {
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
  }
}

/* Button Telefon-Nummer auf Mobile anzeigen */
.header-phone-mobile {
  display: none;
}

@media (max-width: 1024px) {
  .header-phone-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #EF3445;
    z-index: 10;
  }

  .header-phone-mobile:hover,
  .header-phone-mobile:focus {
    background: #d62a3a;
  }
}



/* ===============================
   H1 Titel zweizeilig gestalten
   =============================== */

/* Für Desktop */

.hero-title {
  margin: 0;
  color: #fff;
}

.hero-title-main,
.hero-title-sub {
  display: block;
}

.hero-title-main {
  font-size: 45px;
  line-height: 1.15;
  font-weight: 700;
}

.hero-title-sub {
  display: block;
  margin-top: 10px;

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

/* Für Mobile */

@media (max-width: 767px) {

  .hero-title-main {
    font-size: 25px;
  }

  .hero-title-sub {
  display: block;
  margin-top: 3px;
  
  font-size: 14px;
  line-height: 1.5;
}

}

/* ===============================
  Links im Lauftext: Rot und unterstrichen
   =============================== */

/* Textlinks nur im normalen Grundtext */
#container .ce_text p a,
#container .ce_text li a {
  color: #EF3445 !important;
  text-decoration: none !important;

}

/* Hover */
#container .ce_text p a:hover,
#container .ce_text li a:hover {
  color: #EF3445 !important;
  border-bottom: 1px solid #EF3445 !important;
  padding-bottom: 0.1px;
}




/* ===============================
  Hersteller - Text-Bild-Leiste Bilder contain statt cover
   =============================== */

/* Text-Bild-Leiste: Bild vollständig anzeigen */
.ce_text_image_bar .imagebox {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}


/* ===============================
  Lead-Text
   =============================== */
.ce_text p.lead,
.content-text p.lead {
  font-size: 1.375rem;
  line-height: 1.45;
}




/* ===============================
   Nachrichten
   =============================== */

/* Nachrichten-/Fachbeiträge-Boxen gleich hoch */
.mod_portfoliolist_v7 .item-inside {
    min-height: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

/* Inhaltsbereich */
.mod_portfoliolist_v7 .info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Platz für maximal ca. 3 Titelzeilen reservieren */
.mod_portfoliolist_v7 .title {
    min-height: 4.2em;
}

/* Weiterlesen immer nach unten */
.mod_portfoliolist_v7 .item-bottom {
    margin-top: auto;
}

/* Kommentar-Zähler komplett ausblenden */
.comments {
    display: none !important;
}

/* Info-Balken NUR auf der Detailseite (Nachrichtenleser) ausblenden */
.mod_newsreader .info {
    display: none !important;
}

/* Datum in den Nachrichten-/Portfolio-Boxen ausblenden */
.mod_portfoliolist_v7 .item-bottom time,
.mod_portfoliolist_v7 .item-bottom .date,
.mod_portfoliolist_v7 .item-bottom .news-date {
    display: none !important;
}


/* ===============================
   Projekte auf Startseite – Vorschau beim Hover nicht abschneiden
   =============================== */

/* Teaser auf 4 Zeilen kürzen, mit "…" am Ende */
.ce_swiper-slider-start .mod_portfoliolist_v7 .teaser p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

/* Box darf beim Hover nach unten wachsen */
.ce_swiper-slider-start .mod_portfoliolist_v7 .item:hover {
    overflow: visible !important;
}
.ce_swiper-slider-start .mod_portfoliolist_v7 .item:hover .item-inside {
    background: #fff;
}

/* Projekte-Slider schneidet nicht mehr ab (Schatten links/rechts/unten sichtbar).
   Partner-Logo-Slider ausgenommen, der muss seitlich abschneiden. */
.ce_swiper-slider-start:not(.partner-logos) {
    overflow: visible !important;
}



/* ===============================
   Akkordeon
   =============================== */

/* Akkordeon weisser Hintergrund */
.content-accordion .handorgel__content,
.content-accordion .handorgel__content__inner,
.content-accordion .content-text {
    background: #fff;
}

/* Platz für Plus/Minus rechts */
.content-accordion .handorgel__header__button {
    position: relative;
    padding-right: 45px;
}

/* Plus bei geschlossenem Akkordeon */
.content-accordion .handorgel__header__button::after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #c00;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}

/* Minus bei geöffnetem Akkordeon */
.content-accordion .handorgel__header__button[aria-expanded="true"]::after {
    content: "−";
}



/* ===============================
   Floating Button 
   =============================== */

/* Floating Button Dario */
.floating-button-meineheizung {
    position: fixed;
    bottom: 55px;
    right: 35px;
    width: 175px;
    height: 175px;
    background-color: #ef3445;
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 8px;
    padding-bottom: 15px;
    line-height: 1.2;
    z-index: 9999; /* Stellt sicher, dass der Button ganz vorne bleibt */
    transform: rotate(0deg);
}

.floating-button-meineheizung img {
    width: 100px; /* Größe des Icons anpassen */
    height: auto;
     margin-top: -65px;   /* Portrait schaut oben aus dem Kreis */
    margin-bottom: 5px;  /* Abstand zur Schrift */
}

.floating-button-meineheizung:hover {
    background-color: #db2a3a;
    transform: scale(1.1);
}


/* ===============================
   Formsly Formulare
   =============================== */

/* Formsly-Formulare ohne Schatten */
#formsly-embed {
    box-shadow: none !important;
}

/* Formsly-Formular Footer mit weissem Hintergrund */
.sticky.bottom-0.z-10 {
    background-color: #ffffff !important;
}

/* ==========================================
   Partner-Logos Slider
   ========================================== */

/* 1. Äußerer Behälter als Anker für die Pfeile */
.ce_swiper-slider-start.partner-logos {
    position: relative !important;
}

/* 2. Swiper-Container verkleinern -> Zwingt Swiper JS, die Logos weiter innen zu berechnen */
.ce_swiper-slider-start.partner-logos .swiper-container {
    width: calc(100% - 200px) !important; /* HIER ABSTAND STEUERN: z.B. 240px für noch mehr Abstand */
    margin: 0 auto !important;
    position: static !important;          /* Wichtig, damit die Pfeile sich am Haupt-Element orientieren */
    overflow: hidden !important;
}

/* 3. Logos vertikal & horizontal zentrieren */
.ce_swiper-slider-start.partner-logos .swiper-slide {
    display: flex !important;
    align-items: center !important;     /* Vertikal einmitten */
    justify-content: center !important; /* Horizontal einmitten */
    height: auto !important;
}

/* 4. Logogrößen begrenzen */
.ce_swiper-slider-start.partner-logos .swiper-slide img {
    max-height: 80px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 5. Pfeile ganz außen an den Rändern fixieren */
.ce_swiper-slider-start.partner-logos .swiper-button-prev {
    left: 15px !important;
    right: auto !important;
}

.ce_swiper-slider-start.partner-logos .swiper-button-next {
    right: 15px !important;
    left: auto !important;
}



/* ===============================
   FAQ Akkordeon
   =============================== */


   /* FAQ Akkordeon */
 
.faq-item {
    border-bottom: 1px solid #ddd;
}


.faq-question {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;
    border:0;
    background:none;
    cursor:pointer;
    font-size:1.1rem;
    text-align:left;
}

.faq-question {
    border: 1px solid transparent !important;
    outline: none;
    box-shadow: none;
}

.faq-question:hover,
.faq-question:focus,
.faq-question:active {
    border-color: transparent !important;
    outline: none;
    box-shadow: none;
}


.faq-answer {
    height: 0;
    overflow: hidden;
    transition: height .3s ease;
}
/* Abstand nach unten kommt jetzt von innen, nicht von padding */
.faq-answer > *:last-child {
    margin-bottom: 20px;
}



.faq-question:hover {
    color: #EF3445;
    border-color: transparent;
}


.faq-item.active .faq-question {
    font-weight: 700;
    color: #EF3445;
}


.faq-icon {
    font-size: 24px;
    color: #EF3445;
    transition: transform .2s ease;
    flex-shrink: 0;
}



.faq-item.active .faq-icon {
    transform:rotate(45deg);
}
 
 
 .faq-question {
    color: #333;                       /* Standard-Grau statt iOS-Blau */
    font-family: inherit;              /* Button übernimmt die Seitenschrift */
    -webkit-appearance: none;          /* iOS-Button-Styling entfernen */
    appearance: none;
    -webkit-tap-highlight-color: transparent; /* kein blauer/grauer Tipp-Blitz */
}


/* ===============================
   Glossary
   =============================== */ 
 
  /* Glossar-Titel rot */
.glossary h4 {
    color: #e43440 !important;
}


/* ===============================
   Glossar A–Z Navigation
   =============================== */

.glossary-nav .grouplist ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* einzelne Buchstaben */
.glossary-nav .grouplist li {
  margin: 0;
  padding: 0;
}

/* verfügbare / anklickbare Buchstaben */
.glossary-nav .grouplist a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  background: #EF3445;
  color: #fff !important;

  border: 1px solid #EF3445;
  border-radius: 2px;

  text-decoration: none !important;
  font-weight: 600;
  line-height: 1;

  transition: background-color 0.2s ease;
}

/* Hover: etwas helleres Rot */
.glossary-nav .grouplist a:hover {
  background: #f45a68;
  color: #fff !important;
  border-color: #f45a68;
}

/* nicht verfügbare Buchstaben */
.glossary-nav .grouplist li:not(:has(a)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  color: #999;
  border: 1px solid #fff;
  border-radius: 2px;

  line-height: 1;
}
.glossary-nav,
.glossary-nav .grouplist,
.glossary-nav .grouplist ul {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
.glossary-nav .grouplist {
  margin-bottom: 45px !important;
}


/* ===============================
   Glossary Vorschau-Liste
   =============================== */ 

.glossary .group .letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  background: #EF3445;
  color: #fff;

  font-weight: 600;
  line-height: 1;
  border-radius: 2px;

  margin-bottom: 12px;
}


/* ===============================
   Glossary Titel und "Weiterlesen" ohne Abstand zum Vorschautext
   =============================== */ 

/* Titel direkt an Vorschautext */
.glossary .layout_short h4 {
  margin-bottom: 0 !important;
}

.glossary .layout_short .ce_text,
.glossary .layout_short .ce_text p {
  margin-top: 0 !important;
}

/* Vorschautext direkt an Weiterlesen */
.glossary .layout_short .ce_text p {
  margin-bottom: 0 !important;
}

.glossary .layout_short p.more {
  margin-top: 3px !important;
  line-height: 1.2 !important;
}

.glossary .layout_short p.more a {
  line-height: 1.2 !important;
}

/* Abstand zum Buchstaben */
.glossary .group + .group {
  margin-top: 28px;
}

/* ===============================
   Glossary A-Z Navigation MOBILE
   =============================== */ 

@media (max-width: 767px) {
  .glossary-nav .grouplist ul {
    gap: 4px;
  }

  .glossary-nav .grouplist a,
  .glossary-nav .grouplist li:not(:has(a)) {
    width: 27px;
    height: 27px;
    font-size: 14px;
  }
}

/* ===============================
   Glossar Detailseite – Typografie
   =============================== */

/* Glossarbegriff, z. B. Aussenaufstellung */
#container .layout_full > h1 {
  font-size: 45px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* Zwischenüberschriften im Glossartext */
#container .layout_full .ce_text h2 {
  font-size: 22px !important;
  line-height: 1.3!important;
  font-weight: 400 !important;
  margin-top: 40px !important;
}



/* ===============================
   CTA-Box mti Verlauf rot
   =============================== */

.verlaufbox-rot {

  /* Der eigentliche Verlauf */
  background: linear-gradient(to bottom, #EF3445, #7a0617);
}

  /* Button-Link ohne Rahmen in Verlaufsboxen */
.ce_hyperlink a,
a.btn {
    border: none;
    outline: none;
}


/* ===============================
   Text-Grössen
   =============================== */

.absatz-header {
  font-size: 60px !important; /* Falls Größe auch überschrieben wird */
  line-height: 1.7 !important; 
}

.lead-text {
  font-size: 30px !important; /* Falls Größe auch überschrieben wird */
  line-height: 1.5 !important; 
}


/* ===============================
   Scroll-Verhalten
   =============================== */

html {
  scroll-behavior: smooth;
}



/* ===============================
   Schrift
   =============================== */

/* NunitoSans_10pt-Black */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'NunitoSans_10pt';
  font-style: black;
  font-weight: 900;
  src: url('../../meineheizung/fonts/NunitoSans_10pt-Black.ttf') format('truetype'); /* Für alle modernen Browser */
}

/* NunitoSans_10pt-ExtraBold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'NunitoSans_10pt';
  font-style: extrabold;
  font-weight: 800;
  src: url('../../meineheizung/fonts/NunitoSans_10pt-ExtraBold.ttf') format('truetype'); /* Für alle modernen Browser */
}

/* NunitoSans_10pt-Bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'NunitoSans_10pt';
  font-style: bold;
  font-weight: 700;
  src: url('../../meineheizung/fonts/NunitoSans_10pt-Bold.ttf') format('truetype'); /* Für alle modernen Browser */
}

/* NunitoSans_10pt-Regular */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'NunitoSans_10pt';
  font-style: regular;
  font-weight: 400;
  src: url('../../meineheizung/fonts/NunitoSans_10pt-Regular.ttf') format('truetype'); /* Für alle modernen Browser */
}



/* ===============================
   Formular (alt)
   =============================== */

/* Formular */
.form fieldset {
        border: 0px solid rgba(0, 0, 0, 0);
    }

.form.style5 textarea {
    border-radius: 0px !important;
}

.form.style5 input {
    border-radius: 0px !important;
}

.button.submit,
input[type="submit"],
button[type="submit"] {
    border-radius: 0px !important;
}

@media only screen and (max-width: 767px) {
    .column[class*="col_"]:not([class*="_m"]), 
    .autogrid_grid .column:not([class*="_m"]) {
        margin-bottom: 0px !important;
    }
}



/* =============================================================================
 * Aufzählungen
 * ========================================================================== */
.ce_text ul, .ce_text ol,
.ce_list:not(.hasIcon) ul, .ce_list:not(.hasIcon) ol {
    padding-left: 0;
    margin-left: 0;
}

/* Desktop */
@media only screen and (min-width: 1201px) {
  .ce_text ul li, .ce_list ul li {
    margin: 0 0 10px 0;
    padding: 2px 0 2px 35px;          /* extra Platz oben/unten + Einzug links */
    list-style: none;
    line-height: 1.4;
    background-image: url("/files/meineheizung/icons/ok.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 23px 23px;       /* feste Größe */
  }
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .ce_text ul li, .ce_list ul li {
    margin: 0 0 8px 0;
    padding: 2px 0 2px 35px;          /* gleiche Anpassung wie Desktop */
    list-style: none;
    line-height: 1.4;
    background-image: url("/files/meineheizung/icons/ok.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 23px 23px;       /* feste Größe */
  }
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .ce_text ul li, .ce_list ul li {
    margin: 0 0 6px 0;
    padding: 2px 0 2px 35px;          /* gleiche Anpassung wie Desktop */
    list-style: none;
    line-height: 1.4;
    background-image: url("/files/meineheizung/icons/ok.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 23px 23px;       /* feste Größe */
  }

  .ce_gallery ul.flex-gallery li {
    flex: 0 0 calc(100% / 3) !important;
  }
}



/* ===============================
   Contao Glossary A-Z Navigation – Rot/Weiß
   =============================== */

/* Container der Buchstabenliste */
.glossary-filter {
  display: flex;               /* horizontale Ausrichtung */
  justify-content: center;     /* zentrieren */
  flex-wrap: wrap;             /* Zeilenumbruch bei zu viel Platz */
  gap: 5px;                    /* Abstand zwischen Buchstaben */
  padding: 10px 0;             /* Abstand oben/unten */
  list-style: none;            /* keine Aufzählungszeichen */
  margin: 0 0 20px 0;          /* Abstand nach der Buchstabenliste */
}

/* Einzelne Buchstaben */
.glossary-filter li {
  display: inline-block;
}

.glossary-filter li a {
  display: block;
  padding: 5px 10px;           /* innerer Abstand */
  text-decoration: none;        /* kein Unterstrich */
  border: 1px solid #f7f7f7;    /* grauer Rahmen */
  border-radius: 3px;           /* abgerundete Ecken */
  background-color: #f7f7f7;    /* grauer Feld */
  color: #000000;               /* weiße Schrift */
  font-weight: bold;            /* Buchstaben fett */
  transition: all 0.3s ease;    /* sanfte Animation beim Hover */
}

/* Hover-Effekt */
.glossary-filter li a:hover {
  background-color: #e43440;   /*  Rot beim Hover */
  border-color: #e43440;
  color: #ffffff;
}

/* Aktiver Buchstabe */
.glossary-filter li.active a {
  background-color: #e43440;   /* Rot für aktiven Buchstaben */
  border-color: #e43440;
  color: #ffffff;
}




/* Schritt-für-Schritt Ablauf */
.ablauf-wrapper {
  position: relative;
  padding-left: 60px;
}

.ablauf-wrapper::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  border-left: 2px dashed #ddd;
}

.ablauf-item {
  position: relative;
  margin-bottom: 40px;
}

.ablauf-item::before {
  content: attr(data-step);
  position: absolute;
  left: -60px;
  top: 0;
  width: 40px;
  height: 40px;
  background: #eee;
  color: #999;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
}

/* Aktiver Schritt */
.ablauf-item.active::before {
  background: #e6332a;
  color: white;
}

.ablauf-item.active {
  border-left: 2px solid #e6332a;
  padding-left: 20px;
}

/* ===============================
   Aufzählzeichen
   =============================== */

/* OK-Aufzählungszeichen bei bestimmten Elementen deaktivieren */
.no-ok ul {
  padding-left: 22px !important;
}

.no-ok ul li {
  background-image: none !important;
  padding-left: 0 !important;
  list-style: disc !important;
}


/* Normale runde Bullet-Points */
.bullet-points ul {
  padding-left: 22px !important;
}

.bullet-points ul li {
  background-image: none !important;
  padding-left: 0 !important;
  list-style: disc !important;
}


/* Rote runde Bullet-Points */
.red-bullets ul {
  padding-left: 22px !important;
}

.red-bullets ul li {
  background-image: none !important;
  padding-left: 0 !important;
  list-style: disc !important;
}

.red-bullets ul li::marker {
  color: #EF3445;
}