/*
Dittmar Dacheindeckungen GmbH
creation Date: 2026-08-10
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

.resp_only{
	display: none;
}
.reg_only{
	display: initial;
	display: inherit;
}

.section_bg.__reg{
	display: block;
}
.section_bg.__res{
	display: none;
}

@media (max-width: 1800px){
}

@media (max-width: 1410px){
	
}

@media (max-width: 1320px){
	.resp_only{
		display: initial;
		display: inherit;
	}
	.reg_only,
	.noRes{
		display: none;
	}
	.noReg{
		display: none;
	}
	.resp_center{
		text-align: center;
	}
	
	._resFull,
	.flexbox._resFull{
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
	}

	.resOrder_1{
		order: 1;
	}
	.resOrder_2{
		order: 2;
	}
	.resOrder_3{
		order: 3;
	}
	
	#top_spacer{
		height: 0px;
	}
	
	.ddm_modal_close{
		top: 5px;
		right: 5px;
	}
	
	.auflieger_flexbox{
		width: 100%;
	}

	/* SEITEN-INTRO */
	.page_intro{
		padding-top: 210px;
		padding-bottom: 100px;
	}
	.page_intro_title{
		font-size: 52px;
		line-height: 60px;
	}
	.page_intro_subtitle{
		font-size: 31px;
		line-height: 39px;
	}
	p.page_intro_body{
		margin-top: 44px;
		font-size: 19px;
		line-height: 30px;
	}
	.page_intro_roof{
		left: -108px;
		bottom: -38px;
		width: 240px;
	}

	/* CONTENT HOME - KOPFBILD */
	.intro_inner{
		padding-top: 22vh;
		padding-bottom: 10vh;
	}
	.intro_title{
		font-size: 64px;
		line-height: 72px;
	}
	.intro_subtitle{
		font-size: 44px;
		line-height: 52px;
	}
	.intro_text{
		max-width: 430px;
		font-size: 21px;
		line-height: 32px;
	}
	.intro_foot .ddm_btn{
		margin-top: 38px;
	}

	/* CONTENT HOME */
	.ddm_headline{
		margin-bottom: 60px;
	}
	.home_tilegrid + .ddm_headline{
		margin-top: 100px;
	}
	.home_tilegrid._cols3,
	.home_tilegrid._cols4{
		grid-template-columns: repeat(2, 1fr);
	}
	.home_contactbox{
		width: 100%;
		min-height: 0px;
		margin-top: 40px;
		padding: 38px 34px 34px 34px;
	}
	.home_contactbox_text{
		font-size: 23px;
		line-height: 34px;
	}
	.ddm_projects_inner{
		min-height: 560px;
		padding: 44px;
	}
	.ddm_projects_title{
		font-size: 56px;
		line-height: 64px;
	}
	.counter_digit{
		width: 52px;
		height: 70px;
		font-size: 38px;
		line-height: 46px;
	}
	.ddm_counter_digits{
		min-height: 70px;
	}

	/* LEISTUNGSSEITEN */
	p.ddm_lead{
		font-size: 19px;
		line-height: 30px;
	}
	.ddm_featcard{
		padding: 38px 34px 34px 34px;
	}
	.ddm_featcard_title{
		font-size: 26px;
		line-height: 34px;
	}
	.ddm_featlist{
		margin-top: 28px;
	}
	.ddm_featcard .ddm_btn{
		margin-top: 36px;
	}
	.leistung_text{
		padding-top: 38px;
	}
	.leistung_text_title{
		font-size: 21px;
		line-height: 29px;
	}

	/* GUT ZU WISSEN - DACHTYPEN */
	.dachtyp + .dachtyp{
		margin-top: 110px;
	}
	.dachtyp_text{
		padding-top: 26px;
	}
	.dachtyp_title{
		font-size: 40px;
		line-height: 48px;
	}
	.dachtyp_claim{
		font-size: 31px;
		line-height: 39px;
	}
	.ddm_cardactions{
		margin-top: 20px;
	}

	/* GUT ZU WISSEN - SCHICHTEN-SLIDER */
	.ddm_stepslider_slide{
		gap: 34px;
	}
	.ddm_stepslider_num{
		font-size: 150px;
		line-height: 150px;
	}
	.ddm_stepslider_title{
		font-size: 34px;
		line-height: 42px;
	}
	.ddm_stepslider_body{
		width: 520px;
	}
	.ddm_stepslider_chevron{
		width: 22px;
		height: 40px;
	}

	/* EINBETTUNG MIT EINWILLIGUNG */
	.ddm_embed_notice{
		padding: 38px 34px 34px 34px;
	}
	.ddm_embed_notice_title{
		font-size: 26px;
		line-height: 34px;
	}
	.ddm_embed_notice .ddm_btn{
		margin-top: 28px;
	}

	/* ZEITLEISTE */
	.ddm_timeline_year{
		font-size: 38px;
		line-height: 46px;
	}
	.ddm_timeline_item{
		--ddm_timeline_gap: 28px;
		flex-basis: 280px;
	}

	/* ZERTIFIKATE - SIEGELRASTER */
	.ddm_badgegrid{
		gap: 20px;
		margin-top: 50px;
	}
	.ddm_badge{
		padding: 28px 22px 26px 22px;
	}
	.ddm_badge_media{
		height: 90px;
		margin-bottom: 22px;
	}
	.ddm_badge_title{
		font-size: 18px;
		line-height: 26px;
	}

	/* DOWNLOADS */
	.ddm_downloads{
		margin-top: 50px;
	}
	.ddm_download{
		gap: 20px;
		padding: 22px 24px 22px 24px;
	}
	.ddm_download_title{
		font-size: 18px;
		line-height: 26px;
	}

	/* MATERIALIEN - KARTENRASTER */
	.material_grid{
		gap: 24px;
		margin-top: 50px;
	}
	.material_body{
		padding: 28px 30px 28px 30px;
	}
	.material_title{
		font-size: 22px;
		line-height: 30px;
	}
	.material_notes{
		padding-top: 22px;
	}

	/* GUT ZU WISSEN - WARUM DIE LEGETECHNIK ENTSCHEIDEND IST */
	.legetechnik_why_title{
		font-size: 38px;
		line-height: 46px;
	}
	.legetechnik_why p.ddm_lead{
		margin-top: 26px;
	}
	.legetechnik_why_points{
		margin-top: 38px;
	}
	.ddm_conclusion{
		margin-top: 48px;
		padding: 28px 32px 30px 32px;
	}

	/* VORTEILSBLASEN */
	p.ddm_bubbles_label,
	p.ddm_bubbles_text{
		font-size: 19px;
		line-height: 28px;
	}
	.ddm_bubblelist li{
		padding: 10px 22px 11px 38px;
		font-size: 15px;
		line-height: 22px;
	}
	.ddm_bubblelist li::before{
		left: 22px;
		top: 10px;
	}

	/* REFERENZEN & BERATUNG */
	.ddm_teasercard{
		padding: 34px 30px 30px 30px;
	}
	.ddm_teasercard_title{
		font-size: 24px;
		line-height: 32px;
	}
	p.ddm_teasercard_text{
		margin-top: 24px;
	}
	.ddm_teasercard .ddm_btn{
		margin-top: 32px;
	}
	/* Neben der Reihe wird der Platz knapp - der Hinweiskasten rueckt naeher an
	   sie heran, bevor er weiter unten ganz aus der Ueberlagerung faellt. */
	.ddm_teasernote{
		left: -150px;
		top: -84px;
		width: 220px;
	}
}

@media (max-width: 1230px){
	/* HINWEISKASTEN - kein Platz mehr neben der Reihe, also als eigener Block
	   darueber. Er steht im Raster vor den Karten und bleibt damit dort, wo ihn
	   die Vorlage zeigt: vor der Anschrift. */
	.ddm_teasernote{
		position: static;
		grid-column: 1 / -1;
		width: 100%;
		max-width: 520px;
		margin: 0px auto 10px auto;
	}
}

@media (max-width: 1100px){
}

@media (max-width: 1100px){
}

@media (max-width: 860px){
	h1,
	h2.title,
	.alt_headlines h1,
  .alt_headlines h2.title{
		font-size: 38px;
		line-height: 46px;
	}
	h2,
	.alt_headlines h2{
		font-size: 30px;
		line-height: 38px;
	}
	h3,
	.alt_headlines h3{
		line-height: 34px;
		font-size: 26px;
	}
	h4{
		font-size: 23px;
		line-height: 30px;
	}
	h5{
		font-size: 20px;
		line-height: 28px;
	}
	h6{
		font-size: 18px;
	}

	.resp_center_800{
		text-align: center;
	}
	.resFull_800,
	.flexbox.resFull_800{
		width: 100%;
	}

	.resOrder800_1{
		order: 1;
	}
	.resOrder800_2{
		order: 2;
	}
	
	.font_l,
	.font_l p,
	.font_l .contstyles li{
		font-size: 18px;
		line-height: 26px;
	}
	
	.res80_800,
	.flexbox.res80_800{
		width: 80%;
	}

	/* SEITEN-INTRO - Bild unter den Text, weiterhin bis an den Fensterrand */
	.page_intro{
		padding-top: 150px;
		padding-bottom: 80px;
	}
	.page_intro_inner{
		display: block;
	}
	.page_intro_text{
		width: 100%;
		padding-right: 0px;
	}
	.page_intro_title{
		font-size: 40px;
		line-height: 48px;
	}
	.page_intro_subtitle{
		font-size: 25px;
		line-height: 33px;
	}
	p.page_intro_body{
		margin-top: 34px;
		font-size: 18px;
		line-height: 28px;
	}
	.page_intro_actions{
		margin-top: 30px;
	}
	.page_intro_media{
		width: calc(100% + (100vw - 100%) / 2);
		margin-top: 56px;
		margin-right: calc((100% - 100vw) / 2);
		aspect-ratio: 4 / 3;
	}
	/* Buendig zur Containerkante, damit die Dachspitze auf schmalen Geraeten
	   nicht am Fensterrand abgeschnitten wird. */
	.page_intro_roof{
		left: 0px;
		bottom: -26px;
		width: 150px;
	}
	.page_intro._animAct .page_intro_media{
		transition-delay: 260ms;
	}

	/* CONTENT KONTAKT */
	.kontakt_card,
	.kontakt_form{
		width: 100%;
	}
	.kontakt_form{
		margin-top: 44px;
	}
	.kontakt_card{
		padding: 34px 26px 38px 26px;
	}
	p.kontakt_card_lead{
		font-size: 21px;
		line-height: 31px;
	}
	p.kontakt_card_contact{
		margin-top: 28px;
		font-size: 20px;
		line-height: 30px;
	}
	p.kontakt_card_address{
		margin-top: 28px;
	}

	/* CONTENT HOME - KOPFBILD
	   Auf dem Telefon bewusst kuerzer als das Fenster, damit die folgende
	   Sektion angeschnitten sichtbar bleibt und zum Weiterscrollen einlaedt. */
	.intro_block,
	.intro_inner{
		min-height: 85vh;
		min-height: 85svh;
	}
	.intro_inner{
		padding-top: 20vh;
		padding-bottom: 60px;
	}
	.intro_title{
		font-size: 42px;
		line-height: 50px;
	}
	.intro_subtitle{
		font-size: 30px;
		line-height: 38px;
	}
	.intro_text{
		max-width: 100%;
		font-size: 18px;
		line-height: 28px;
	}
	.intro_foot .ddm_btn{
		margin-top: 30px;
	}

	/* CONTENT HOME */
	.ddm_headline{
		line-height: 40px;
		margin-bottom: 45px;
	}
	.home_tilegrid + .ddm_headline{
		margin-top: 70px;
	}
	/* gleiche Spezifitaet wie die 1320px-Regeln, gewinnt ueber die Quellreihenfolge */
	.home_tilegrid._cols3,
	.home_tilegrid._cols4{
		grid-template-columns: 1fr;
	}
	.home_contactbox{
		margin-top: 10px;
		padding: 32px 26px 28px 26px;
	}
	.home_contactbox_text{
		max-width: 100%;
		font-size: 21px;
		line-height: 31px;
	}
	.ddm_projects{
		border-radius: 16px;
	}
	.ddm_projects_inner{
		min-height: 0px;
		padding: 34px 26px 34px 26px;
	}
	.ddm_projects_title{
		font-size: 38px;
		line-height: 46px;
	}
	.ddm_counter{
		width: 100%;
		margin-top: 34px;
		text-align: left;
	}
	.ddm_counter_digits{
		justify-content: flex-start;
		min-height: 60px;
	}
	.ddm_projects_cta{
		margin-top: 40px;
	}
	.counter_digit{
		width: 44px;
		height: 60px;
		font-size: 32px;
		line-height: 38px;
	}
	.counter_sep{
		font-size: 32px;
		line-height: 32px;
		padding-bottom: 6px;
	}

	/* LEISTUNGSSEITEN - Kasten und Fliesstext untereinander */
	p.ddm_lead{
		font-size: 18px;
		line-height: 28px;
	}
	.ddm_featcard{
		padding: 30px 26px 28px 26px;
	}
	.ddm_featcard_title{
		font-size: 22px;
		line-height: 30px;
	}
	.ddm_featlist{
		margin-top: 24px;
	}
	.ddm_featcard .ddm_btn{
		margin-top: 30px;
	}
	/* Der Abstand zum Kasten daruber, nicht mehr die Ausrichtung auf dessen Inhalt */
	.leistung_text{
		padding-top: 34px;
	}
	.leistung_text_title{
		font-size: 19px;
		line-height: 27px;
	}
	p.ddm_lead._follow{
		margin-top: 18px;
	}

	/* GUT ZU WISSEN - DACHTYPEN - untereinander, der Kasten folgt dem Text und
	   die Ausrichtung auf dessen Ueberschrift entfaellt */
	.dachtyp + .dachtyp{
		margin-top: 70px;
	}
	.dachtyp_text{
		padding-top: 0px;
	}
	.dachtyp_title{
		font-size: 32px;
		line-height: 40px;
	}
	.dachtyp_claim{
		font-size: 25px;
		line-height: 33px;
	}
	.dachtyp_text p{
		margin-top: 20px;
	}
	.dachtyp_aside{
		margin-top: 34px;
	}

	/* GUT ZU WISSEN - SCHICHTEN-SLIDER
	   Ziffer ueber den Text, damit fuer die Zeile Platz bleibt; die Pfeile
	   ruecken dicht an das Fenster. */
	.ddm_stepslider{
		gap: 6px;
		margin-top: 40px;
	}
	.ddm_stepslider_slide{
		flex-flow: column nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0px;
		padding: 0px 6px;
	}
	.ddm_stepslider_num{
		font-size: 96px;
		line-height: 100px;
	}
	.ddm_stepslider_body{
		width: 100%;
	}
	.ddm_stepslider_title{
		font-size: 26px;
		line-height: 34px;
	}
	p.ddm_stepslider_text{
		margin-top: 14px;
	}
	.ddm_stepslider_nav{
		padding: 6px 2px;
	}
	.ddm_stepslider_chevron{
		width: 16px;
		height: 30px;
	}

	/* EINBETTUNG MIT EINWILLIGUNG */
	.ddm_embed_notice{
		padding: 30px 26px 28px 26px;
	}
	.ddm_embed_notice_title{
		font-size: 22px;
		line-height: 30px;
	}
	p.ddm_embed_notice_text{
		margin-top: 18px;
	}
	.ddm_embed_notice .ddm_btn{
		margin-top: 24px;
	}

	/* ZEITLEISTE - schmalere Eintraege, sonst passt kaum einer ins Bild */
	.ddm_timeline{
		margin-top: 34px;
	}
	.ddm_timeline_year{
		font-size: 32px;
		line-height: 40px;
	}
	.ddm_timeline_item{
		--ddm_timeline_gap: 22px;
		flex-basis: 240px;
	}
	.ddm_timeline_title{
		font-size: 19px;
		line-height: 27px;
	}

	/* Kurze Punkte bleiben auf dem Telefon einspaltig */
	.ddm_featlist._cols2{
		-webkit-columns: 1;
		-moz-columns: 1;
		columns: 1;
	}

	/* ZERTIFIKATE - SIEGELRASTER, zwei Spalten statt vier */
	.ddm_badgegrid{
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		margin-top: 40px;
	}
	.ddm_badge_media{
		height: 80px;
	}

	/* DOWNLOADS - der Knopf rutscht unter den Namen */
	.ddm_downloads{
		margin-top: 40px;
	}
	.ddm_download{
		flex-flow: row wrap;
		gap: 18px;
		padding: 22px 22px 24px 22px;
	}
	.ddm_download_body{
		flex: 1 1 60%;
	}
	.ddm_download_action{
		flex: 0 0 auto;
		margin-left: 60px;
	}
	.ddm_download:hover{
		transform: none;
	}

	/* MATERIALIEN - KARTENRASTER, untereinander */
	.material_grid{
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 40px;
	}
	.material_body{
		padding: 26px 26px 26px 26px;
	}
	.material_title{
		font-size: 21px;
		line-height: 29px;
	}

	/* GUT ZU WISSEN - WARUM DIE LEGETECHNIK ENTSCHEIDEND IST */
	.legetechnik_why_title{
		font-size: 30px;
		line-height: 38px;
	}
	.legetechnik_why p.ddm_lead{
		margin-top: 22px;
	}
	.legetechnik_why_points{
		margin-top: 30px;
	}
	.ddm_conclusion{
		margin-top: 38px;
		padding: 26px 26px 28px 26px;
	}

	/* VORTEILSBLASEN - einspaltig. Der Versatz faellt weg: in der schmalen
	   Spalte reichen die Blasen ohnehin fast bis an beide Raender, dort wirkt
	   er nicht mehr locker, sondern nur noch schief. */
	.ddm_bubbles_intro{
		margin-bottom: 34px;
	}
	.ddm_bubblelist li{
		-webkit-transform: none;
		transform: none;
	}

	/* REFERENZEN & BERATUNG - untereinander, der Versatz entfaellt */
	.ddm_teaserrow{
		grid-template-columns: 1fr;
	}
	.ddm_teasercard + .ddm_teasercard{
		margin-top: 0px;
	}
	.ddm_teasercard{
		padding: 30px 26px 28px 26px;
	}
	.ddm_teasernote{
		max-width: 100%;
		margin-bottom: 0px;
	}
}

@media (max-width: 600px){
}

@media (max-width: 500px){
}