/* =====================================================================
   style-titel.css ? alle Überschriften (H1?H6) von bauelemente-bau.eu
   Wird NACH /css/style.css geladen (Einbindung im Layout-Template).

   Teil 1?4: aus der style.css übernommen, Werte unverändert und in der
             Originalreihenfolge. ?Z. ?? = Zeile in der style.css.
             Da diese Datei nach der style.css lädt, gelten ab jetzt die
             Werte HIER. Änderungen an Überschriften also nur noch hier.
   Teil 5:   neue Klassen für den Überschriften-Umbau.

   Die Schriftarten selbst (@font-face für Mark, Milo, Milobold,
   Milocursiv) bleiben in der style.css, Z. 5?28.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. GRUNDSTILE ? gelten für alle Überschriften der Website
   --------------------------------------------------------------------- */

/* Z. 49 */
h1, h2, h3, h4, h5, h6, p, ul li {
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/* Z. 115 */
h1 {
	font-family: "Mark", sans-serif;
	font-size: 45px;
	line-height: 48px;
	color: #3c3c3b;
	margin: 20px 0 20px 0;
	padding: 0 0 20px;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='60.000' height='6' style='fill:%23c30b24;'/%3E%3C/svg%3E");
	background-size: 60px 6px;
	background-position: left bottom;
	background-repeat: no-repeat;
	width: 100%;
}

/* Z. 128 */
h2 {
	font-family: "Mark", sans-serif;
	font-size: 35px;
	line-height: 38px;
	color: #3c3c3b;
	margin: 0 0 20px;
	padding: 0 0 16px;
}

/* Z. 137 */
h3 {
	font-family: "Mark", sans-serif;
	font-size: 28px;
	line-height: 30px;
	margin: 0 0 19px;
	padding: 0 0 12px;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='35.000' height='4' style='fill:%23c30b24;'/%3E%3C/svg%3E");
	background-size: 35px 3px;
	background-position: left bottom;
	background-repeat: no-repeat;
	width: 100%;
}

/* Z. 149 */
h4 {
	font-family: "Milobold", sans-serif;
	font-weight: normal;
	font-size: 30px;
	line-height: 27px;
	margin: 0 0 0px;
	padding: 0 0 30px;
	background: none;
}

/* Z. 158 */
h5 {
	font-family: "Milobold", sans-serif;
	font-weight: normal;
	font-size: 17px;
	line-height: 20px;
	margin: 0 0 10px;
	padding: 0 0 7px;
	font-weight: normal;
	background: none;
}


/* ---------------------------------------------------------------------
   2. KLASSEN .h1?.h5 ? Optik einer Ebene auf einen anderen Tag legen, z. B. <h2 class="h3">
   --------------------------------------------------------------------- */

/* Z. 168 */
.h1 {
	font-family: "Mark", sans-serif;
	font-size: 45px;
	line-height: 48px;
	color: #3c3c3b;
	margin: 0 0 20px 0;
	padding: 0 0 20px;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='60.000' height='6' style='fill:%23c30b24;'/%3E%3C/svg%3E");
	background-size: 60px 6px;
	background-position: left bottom;
	background-repeat: no-repeat;
	width: 100%;
}

/* Z. 181 */
.h2 {
	font-family: "Mark", sans-serif;
	font-size: 35px;
	line-height: 38px;
	color: #3c3c3b;
	margin: 0 0 20px;
	padding: 0 0 16px;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='35.000' height='4' style='fill:%23c30b24;'/%3E%3C/svg%3E");
	background-size: 35px 4px;
	background-position: left bottom;
	background-repeat: no-repeat;
	width: 100%;
}

/* Z. 194 */
.h3 {
	font-family: "Mark", sans-serif;
	font-size: 28px;
	line-height: 30px;
	margin: 0 0 19px;
	padding: 0 0 12px;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='35.000' height='4' style='fill:%23c30b24;'/%3E%3C/svg%3E");
	background-size: 35px 3px;
	background-position: left bottom;
	background-repeat: no-repeat;
	width: 100%;
}

/* Z. 206 */
.h4 {
	font-family: "Milobold", sans-serif;
	font-weight: normal;
	font-size: 24px;
	line-height: 27px;
	margin: 20px 0 12px;
	padding: 0 0 12px;
	background: none;
}

/* Z. 215 */
.h5 {
	font-family: "Milobold", sans-serif;
	font-weight: normal;
	font-size: 17px;
	line-height: 20px;
	margin: 0 0 10px;
	padding: 0 0 7px;
	font-weight: normal;
	background: none;
}


/* ---------------------------------------------------------------------
   3. BEREICHE ? Überschriften in bestimmten Bausteinen
   --------------------------------------------------------------------- */

/* Z. 293 */
.spektrum h1, .spektrum h2, .spektrum h3, .spektrum h4, .spektrum h5 {
	font-size: 24px;
	margin-left: -10px;
	margin-bottom: 14px;
	padding-left: 10px;
	padding-bottom: 10px;
	font-family: "Mark", sans-serif;
	line-height: 27px;
	color: #3c3c3b;
	background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='35.000' height='4' style='fill:%23c30b24;'/%3E%3C/svg%3E");
	background-size: 25px 3px;
	background-position: left bottom;
	background-repeat: no-repeat;
}

/* Z. 307 ? ALT: greift nach dem Umbau nicht mehr, ersetzt durch Teil 5 */
h1.event, h2.event, h3.event, h4.event, h5.event {
	display: inline-block;
	border-bottom: 3px solid #c30b24;
	font-family: "Milobold", sans-serif;
	font-size: 17px;
	line-height: 20px;
	margin: 0 0 12px;
	padding: 0 0 1px;
	font-weight: normal;
	background: none;
}

/* Z. 857 */
.content .slider-item h4 {
	font-family: "Milo";
	font-size: 15px;
	line-height: 17px;
	color: #c30b24;
	margin: 0 0 0 30px;
	padding: 50px 0 3px;
	display: block;
}

/* Z. 866 */
.content .slider-item h1, .content .slider-item h2 {
	margin: 0 0 25px 30px;
}

/* Z. 913 */
.content .slider-item .slider-more h1 {
	background-size: 1px 6px;
	transition: background-size 0.6s ease-in-out;
}

/* Z. 917 */
.content .slider-item .slider-more h1.active {
	background-size: 60px 6px;
}

/* Z. 993 */
.content .white h5, .content .linklist {
	margin: 0;
	padding-top: 85px;
}

/* Z. 997 */
.content .linklist h5 {
	padding-top: 0;
	padding-bottom: 0;
	font-size: 15px;
}

/* Z. 1002 */
.content .linklist h4 {
	border-bottom: 2px solid #fff;
}

/* Z. 1005 */
.content .white h1, .content .white h2 {
	color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='60.000' height='6' style='fill:%2523ffffff;'/%3E%3C/svg%3E");
	background-position: left bottom;
	background-repeat: no-repeat;
}

/* Z. 1011 */
.content .white h1 {
	background-size: 60px 6px;
}

/* Z. 1014 */
.content .white h2 {
	background-size: 35px 4px;
}

/* Z. 1017 */
.content .white h1.space, .content .white h2.space {
	padding-left: 0;
	padding-right: 0;
	margin-left: 20px;
	margin-right: 20px;
}

/* Z. 1059 */
.content .newsletter h3 {
	margin: 50px 50px;
	padding: 20px 0;
	color: #fff;
	font-size: 38px;
	line-height: 42px;
	text-align: center;
	background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='60.000' height='6' style='fill:%2523ffffff;'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='60.000' height='6' style='fill:%2523ffffff;'/%3E%3C/svg%3E");
	background-position: center bottom, center top;
	background-repeat: no-repeat, no-repeat;
	background-size: 40px 4px, 40px 4px;
}

/* Z. 1071 */
.mobile .newsletter h3 {
	margin: 0 50px;
}

/* Z. 1401 ? ALT: greift nach dem Umbau nicht mehr, ersetzt durch Teil 5 */
footer h5 {
	font-family: "Mark", sans-serif;
	font-size: 20px;
	line-height: 32px;
	margin: 28px 0 24px;
	padding: 0 0 4px;
	background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='35.000' height='4' style='fill:%23c30b24;'/%3E%3C/svg%3E");
	background-size: 35px 3px;
	background-position: left bottom;
	background-repeat: no-repeat;
}

/* Z. 1528 ? ALT: greift nach dem Umbau nicht mehr, ersetzt durch Teil 5 */
.trend-content h4 {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
}

/* Z. 1582 ? ALT: greift nach dem Umbau nicht mehr, ersetzt durch Teil 5 */
.trend-content h4 {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25;
	transition: color .3s ease;
}

/* Z. 1595 ? ALT: greift nach dem Umbau nicht mehr, ersetzt durch Teil 5 */
.trend-link:hover .trend-content h4 {
	color: #fff;
}

/* Z. 1663 */
.newsletter-cta h2 {
	font-size: 2.5rem;
	margin: 0 0 12px 0;
	font-weight: 700;
}

/* Z. 1668 */
.newsletter-cta h2 span {
	font-weight: 800;
}

/* Z. 1912 */
h1 > p, h2 > p {
	padding: 0;
}

/* Z. 1913 */
h2 > a, h2 > a:hover {
	color: #3c3c3b;
	text-decoration: none;
}

/* Z. 2220 */
.news-card h2 {
	margin: .25rem 0 .25rem;
	font-size: 1.1rem;
	line-height: 1.25;
}

/* Z. 2288 */
#news-wrapper .news-hero h1 {
	margin: 0!important;
	color: #fff!important;
	text-transform: uppercase!important;
	font-weight: 800!important;
	font-size: 48px!important;
	line-height: 1.1!important;
	letter-spacing: .5px!important;
}

/* Z. 2307 */
#news-wrapper #all-news-grid .news-card h2 {
	margin: .25rem 0 .25rem!important;
	font-size: 1.1rem!important;
	line-height: 1.25!important;
}

/* Z. 2328 ? trifft aktuell kein Element (die Sidebar nutzt h4, nicht h5) */
#news-wrapper .news-sidebar .promo-card h5 {
	font-weight: 800!important;
	margin: 0 0 8px!important;
}

/* Z. 2392 */
.hero-card h2, .newsletter-cta h2 {
	color: #fff;
}

/* Z. 2404 */
.titel-rot h1 {
	margin: 0 !important;
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 48px !important;
	line-height: 1.1 !important;
	letter-spacing: .5px !important;
	padding-bottom: 10px;
}

/* Z. 2414 ? ALT: greift nach dem Umbau nicht mehr, ersetzt durch Teil 5 */
.titel-rot h4 {
	font-family: "Milo";
	font-size: 16px;
	line-height: 17px;
	color: #fff;
	padding-bottom: 3px;
	margin: 0;
	width: 100%;
}


/* ---------------------------------------------------------------------
   4. MOBILE / TABLET ? müssen NACH den Grundstilen stehen
   --------------------------------------------------------------------- */

/* Z. 1766 */
@media (max-width: 576px) {
	.newsletter-cta h2 {
		font-size: 2rem;
	}
}

/* Z. 1823 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.content .newsletter h3 {
		padding: 16px 0;
		font-size: 30px;
		line-height: 33px;
	}
	/* ALT: greift nach dem Umbau nicht mehr */
	footer h5 {
		font-size: 18px;
	}
}

/* Z. 2741 */
@media (min-width: 381px) and (max-width: 550px) {
	h1 {
		font-size: 8vw;
	}
	h2 {
		font-size: 7vw;
	}
	h2.h3 {
		font-size: 6vw;
	}
	h3 {
		font-size: 6vw;
	}
	h3.h4 {
		font-size: 7vw;
	}
}

/* Z. 2758 */
@media screen and (max-width: 380px) {
	h1 {
		font-size: 8vw;
	}
	h2 {
		font-size: 6vw;
	}
	h2.h3 {
		font-size: 6vw;
	}
	h3 {
		font-size: 5vw;
	}
	h3.h4 {
		font-size: 5vw;
	}
}


/* ---------------------------------------------------------------------
   5. NEUE KLASSEN FÜR DEN ÜBERSCHRIFTEN-UMBAU
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   5.1 Startseite ? Aufmacher + 15 Themen-Kacheln
   HTML vorher: <h4>?</h4>   nachher: <h2 class="trend-title"> bzw. <h3 class="trend-title">
   ersetzt: style.css Z. 1528 / 1582 / 1595 + <style>-Block im Modul
   --------------------------------------------------------------------- */
.trend-content .trend-title {
  font-family: 'Milobold', sans-serif;
  font-weight: normal;
  font-size: 1.15rem;
  line-height: 1;
  color: #3c3c3b;
  margin: 0;
  padding: 0 0 10px;
  width: auto;
  background: none;
  transition: color .3s ease;
}
.trend-content .trend-title a       { text-decoration: none; color: #111; }
.trend-content .trend-title a:hover { text-decoration: underline; }
.trend-link:hover .trend-content .trend-title { color: #fff; }


/* ---------------------------------------------------------------------
   5.2 Startseite ? Label ?News? im Aufmacher
   HTML vorher: <h5 class="theme">News</h5>   nachher: <span class="theme">News</span>
   --------------------------------------------------------------------- */
.trend-content .theme {
  display: block;
  position: relative;
  font-family: 'Milobold', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 20px;
  color: #c30b24;
  margin: 0 0 10px;
  padding: 4px 0 7px 10px;
}
.trend-content .theme::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 7px;
  width: 3px;
  background-color: #c30b24;
  border-radius: 2px;
}


/* ---------------------------------------------------------------------
   5.3 Startseite ? Titel unter ?Top News?
   HTML vorher: <h2 class="border-b mb-2 pb-2">   nachher: <h3 class="topnews-title border-b mb-2 pb-2">
   --------------------------------------------------------------------- */
.topnews-title {
  font-family: 'Mark', sans-serif;
  font-size: 35px;
  line-height: 38px;
  color: #3c3c3b;
  width: auto;
  background: none;
}
@media (min-width: 381px) and (max-width: 550px) {
  .topnews-title { font-size: 7vw; }
}
@media screen and (max-width: 380px) {
  .topnews-title { font-size: 6vw; }
}


/* ---------------------------------------------------------------------
   5.4 News-Kacheln (Startseite ?Alle News? + News-Liste/Archive)
   HTML Startseite: <h2 class="mb-1"> ? <h3 class="news-card__title mb-1">
   HTML News-Liste: <h2 class="mb-1"> ? <h2 class="news-card__title mb-1">
   --------------------------------------------------------------------- */
.news-card .news-card__title {
  font-family: 'Mark', sans-serif;
  font-size: 1.1rem;
  line-height: 1.25;
  color: #3c3c3b;
  margin: .25rem 0;
  padding: 0 0 16px;
  width: auto;
  background: none;
}


/* ---------------------------------------------------------------------
   5.5 Artikel ? ?Das könnte Sie auch interessieren? (3 Artikel)
   HTML vorher: <h2 class="text-left">   nachher: <h3 class="related-title text-left">
   --------------------------------------------------------------------- */
.related-title {
  font-family: 'Mark', sans-serif;
  font-size: 1.4rem;
  line-height: 38px;
  color: #3c3c3b;
  margin: 0 0 20px;
  padding: 0 0 16px;
  width: auto;
  background: none;
}


/* ---------------------------------------------------------------------
   5.6 Themengebiete ? roter Kicker über der H1
   HTML vorher: <h4>Themengebiete</h4>   nachher: <p class="kicker">Themengebiete</p>
   --------------------------------------------------------------------- */
.titel-rot .kicker {
  font-family: 'Milo', sans-serif;
  font-size: 16px;
  line-height: 17px;
  color: #fff;
  margin: 0;
  padding-bottom: 3px;
  width: 100%;
}


/* ---------------------------------------------------------------------
   5.7 Veranstaltungen ? Labels ?Datum? / ?Ort?
   HTML vorher: <h5 class="event">   nachher: <p class="event">
   --------------------------------------------------------------------- */
p.event {
  display: inline-block;
  border-bottom: 3px solid #c30b24;
  font-family: 'Milobold', sans-serif;
  font-weight: normal;
  font-size: 17px;
  line-height: 20px;
  margin: 0 0 12px;
  padding: 0 0 1px;
  background: none;
}


/* ---------------------------------------------------------------------
   5.8 News-Liste ? Sidebar
   HTML vorher: <h6 class="mb-2">News</h6>   nachher: <p class="side-card__title mb-2">News</p>
   HTML vorher: <h4 class="mb-1 text-center">Abonnent werden!</h4>
           nachher: <p class="promo-title mb-1 text-center">Abonnent werden!</p>
   --------------------------------------------------------------------- */
.side-card__title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}
.promo-title {
  font-family: 'Milobold', sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 27px;
  padding: 0 0 30px;
}


/* ---------------------------------------------------------------------
   5.9 Footer ? ?Kontakt? / ?Unternehmen?
   HTML vorher: <h5 class="footer-title">   nachher: <p class="footer-title">
   Übernimmt die Werte aus ?footer h5? (style.css Z. 1401), die sonst
   verloren gingen. Schriftgröße, Gewicht und Abstand kommen weiterhin
   aus ?.footer-title? (style.css Z. 1710) ? deshalb hier NICHT gesetzt.
   --------------------------------------------------------------------- */
footer p.footer-title {
  font-family: 'Mark', sans-serif;
  line-height: 32px;
  margin: 0;
  padding: 0 0 4px;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Crect id='ArtBoard1' x='0' y='0' width='35.000' height='4' style='fill:%23c30b24;'/%3E%3C/svg%3E");
  background-size: 35px 3px;
  background-position: left bottom;
  background-repeat: no-repeat;
}