@charset "utf-8";
/* CSS Document */

body {
background-image:url(../bilder/design/hintergrund1.png);
background-position:center top;
background-repeat:repeat-y;
font-family:"Roboto Slab", Arial, sans-serif;
font-size:17px;
line-height:23px;
color:#3f3f3f;
}

.home body {
font-size:15px;
line-height:19px;
}

img {
display:block;	
}

a {
text-decoration:none;
	color:#a44588;	
}

a:hover {
	color:#732c59;	
}

#mobile_nav_trigger {
position:absolute;
display:none;	
}

#header .inside {
	max-width:1308px;
	margin:0 auto;
	padding: 1px 0 0;	

}


#logo {
	/* position: absolute; */
	/* left: 53px; */
	float: left;
	margin-left: 53px;
	position: relative;
	z-index: 100;
}


#kontaktdaten_header {
	/* right: 53px; */
	/* top: 34px; */
	text-align: right;
	color: rgb(164, 69, 136);
	font-family: WeissenhofGrotesk-Bold;
	font-size: 15px;
	line-height: 19px;
	float: right;
	margin: 20px;
}

#kontaktdaten_header h4 {
	font-size:33px;
	font-family: WeissenhofGrotesk-Bold;	
	line-height:33px;
	margin:0;
	padding:0;
}


#kontaktdaten_header img {
float:right;
margin-top:11px;	
}

#kontaktdaten_header .phone {
	font-size: 1.5em;
}

#kacheln {
	width: calc(100% - 60px); margin: auto;}
	
/*
# Spendenbutton
*/

.head--spenden{
    position: absolute;
    top: 110px;
    left: 50%;
}



.head--spenden .btn--spende {
	color: #fff;
	text-shadow: 1px 1px 4px rgb(63,15,1);

	background: rgb(164, 69, 136);
	width: 5.5em;
	height: 5.5em;
	display: table-cell;
	border-radius: 50%;
	text-align: center;
	vertical-align: middle;
	border: 4px solid white;
	box-shadow: 1px 1px 5px 0 #8e8e8e;
	line-height:1;
}


/*
# Sprachwechsler
*/

.mod_changelanguage {
	border-bottom: 1em solid rgb(164, 69, 136);
	margin-top: 1em;
	font-size: .9em;
}

.mod_changelanguage ul {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: end;
}

.mod_changelanguage li {
	padding: .5em;
	margin: .5em .25em 0;
	background: rgb(115, 44, 89);
	color: white;
}

@media screen and (min-width: 421px) {
	
	.mod_changelanguage li {
		margin: .5em 1em 0;
	}
	
}

.mod_changelanguage a {color: white; text-decoration: underline;}

.mod_changelanguage li.active {
	background: rgb(164, 69, 136);
	box-shadow: 0 0 .2em .1em #999;
}

body.lang-ls li.lang-de {display: none;}
body.lang-ls .mod_changelanguage {
	font-size: calc(1.25em * 0.61);
}

/*
# Hauptnavigation
*/

#mainnav {
	height:100px;
	background-color:#fff;
	margin-top:205px;
}

#mainnav ul.level_1 {
position:absolute;
right:53px;	
}

#mainnav ul.level_1 > li {
line-height:100px;
		font-family: WeissenhofGrotesk-Bold;	
	
}

#mainnav ul.level_1 > li > a, #mainnav ul.level_1 > li > span {
display:block;
padding:0 12px;
	color:#a44588;
	font-size:34px;
}

#mainnav ul.level_1 > li.last > a, #mainnav ul.level_1 > li.last > span {
padding-right:0;
}

#mainnav ul ul {
	background-color:#fff;
	padding-bottom:20px;
	    top: calc(100% - 9px);

}

#mainnav ul ul > li {
line-height:30px;
		font-family: inherit;	
	
}

#mainnav ul ul  > li > a, #mainnav ul ul  > li > span {
display:block;

	color:#a44588;
		font-family: WeissenhofGrotesk-Bold;
    font-size: 19px;
	line-height:20px;
	
	background-image:url(../bilder/design/arrow.png);
	background-position:12px 10px ;
	background-repeat:no-repeat;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:34px;
	padding-right:34px;

	
}


#mainnav a:hover, #mainnav a.trail, #mainnav span {
color:#732c59!important;
}



.lang-ls {
	font-size: 1.25em;
	line-height: 1.5;
}


.lang-ls #mainnav, .lang-ls #mobile_nav_trigger {display: none;}


@media screen and (min-width: 421px) {
	
	li.lang-de_ls span  {
		background-image: url(../bilder/icons/symbol_leichte-sprache.svg);
		background-size: 1.4em;
		background-repeat: no-repeat;
		padding-left: 2.2em;
		
	}
	li.lang-de span, li.lang-en span  {
	background-image: url(../bilder/icons/symbol_globus.png);
	background-size: 1.4em;
	background-repeat: no-repeat;
	padding-left: 2em;
	
}
	
}

#container 
{

max-width:1308px;
    margin: 0 auto;

}


#main  .inside {
padding:0 53px 70px;
background-color:#fff;	
}



.home #main  .inside {
padding:0;
background-color:transparent;
}


#block_introbild {
	max-width:1308px;
	margin:0 auto;
	padding:0;	
	min-height:750px;
	border-bottom:13px solid #a44588;
		position:relative;
		overflow:visible;
		background-image: url(../bilder/header/tib-introbild022017.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		

}

#block_introbild #claim {
margin:20px 53px;
max-width:460px;	
position:absolute;
	font-family: WeissenhofGrotesk-Bold;	
	font-size:65px;
	color:#fff;
	line-height:60px;
	background-color: rgb(164, 69, 136) !important;
	padding: .15em .20em .25em;
}


#scrolldown, #scrollup {
position:absolute;
bottom:-4px;
left:50%;
margin-left:-25px;	
z-index:10;
display:none;
}
	


.block_startseitenkacheln, .videoblock   {
	max-width:1208px;
	margin:0 auto;
	padding:0 53px;
	
}

.videoblock .subcolumns  {
	background-color:#fff;
}


.video_begleittext {
    padding: 30px;
    position: relative;
    z-index: 3;
    font-size: 14px;
    line-height: 20px;
}


.masonry_spalte, .startseitenkachel   {
width:33.3%;	
}

.masonry_gutter {
width:0;	
}

.startseitenkachel {
position:relative;	
background-size:cover;
background-repeat:no-repeat;
text-align:center;

}

	.block_startseitenkacheln, .videoblock {
		padding:0 2em;
		margin: auto;
	}

.startseitenkachel .inner {
padding:20px 30px;	
position:relative;
z-index:3;
font-size:14px;
line-height:20px;
}



.startseitenkachel.lila_dunkel, .startseitenkachel.lila_hell {
	color:#fff;
	background-color:#ae5995;
}


.startseitenkachel.lila_hell:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#a44588;
	background-color:rgba(164,069,136, 0.85);
	z-index:2;

}

.startseitenkachel  img {
margin:20px auto -20px auto;	
}


.startseitenkachel.weiss {
	background-color:rgba(255,255,255, 0.85);	
}

.startseitenkachel h3 {
		font-family: WeissenhofGrotesk-Bold;
		font-size:41px;	
		line-height:41px;
}

.startseitenkachel a h3  {
color:#fff;	
}


.startseitenkachel.weiss h3, .startseitenkachel.weiss a h3  {
color:#a44588;	
}

.startseitenkachel.weiss .mehrinfolink a {
color:#3f3f3f;	
}

.startseitenkachel.weiss .fliesstext {
margin-top:40px;	

}


.startseitenkachel .datum {
	font-size:16px;
	font-family: WeissenhofGrotesk-Bold;
	margin:40px 0 -20px;
}


.startseitenkachel .mehrinfolink a {
	font-family:Oswald;
	font-size:15px;
	margin:20px 0;
	display:block;
	text-transform:uppercase;
	color:#fff;
}


.startseitenkachel.weiss:after {
    content: "";
    position: absolute;
 
    left: 20px;
    right: 20px;
    bottom: 0;
    border-bottom:1px solid #ccc;
    z-index: 2;
}

.startseitenkachel.lila_dunkel:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#732c59;
	background-color:rgba(115,044,089, 0.85);
z-index:2;
}


.startseitenkachel.lila_dunkel:hover:after {
background-color:rgba(115,044,089, 1);
}

.startseitenkachel.lila_hell:hover:after {
		background-color:rgba(164,069,136, 1);
}

/*
 Listen in Texten
*/


#main ul {
  list-style-type: disc;
  margin-top: 1em;
}

#main ul li {
  margin-left: 2em;
}


#footer {
background-image:url(../bilder/design/hintergrund2.png);
background-position:center 1600px;
background-repeat:repeat-y;
position:relative;
		color:#a44588;
}

p.back {
margin-top:20px;
}

p.more a, p.back a {
	display:inline-block;
	font-size:24px;
	line-height:27px;
	background-color:#a44588;
	color:#fff;
			font-family: WeissenhofGrotesk-Bold;
			padding:10px 20px 10px 44px;
			border-radius:3px;
			background-image:url(../bilder/design/arrow_weiss.png);
			background-position:12px center  ;
			background-repeat:no-repeat;
			margin:10px 20px 10px 0;
			
}

 p.back a {
	 	background-image:url(../bilder/design/arrow_weiss_bak.png);
 }


.biglinkblock {
display:block;
border-bottom:7px solid #a44588;	
}

.biglinkblock p {
	margin-bottom:0;
}




.biglinkblock .logos {
	float:right;
	display:inline;
	vertical-align:top;
	margin-top:18px;
	text-align:right;
	margin-right:53px;

	
}

.biglinkblock .ce_image {
	display:inline-block;
	vertical-align:top;	
}

.big_footer {
	font-family: WeissenhofGrotesk-Bold;
	font-weight: normal;
	font-style: normal;
	  font-size: 65px;
	  font-size: 45px;
	color:#a44588;
	line-height:60px;
	margin-top:20px;
	margin-bottom:20px;
	margin-left:53px;
	margin-right:30px;
	display:inline-block;
	vertical-align:middle;
}




#footer .inside {

    max-width: 1308px;	
	margin:0 auto;
}

#navpunkte_footer {
	font-family: WeissenhofGrotesk-Bold;
	padding:24px 0;	
	margin-left:53px;
	font-size:15px;
}

#navpunkte_footer:before {
content:"© Trans*Inter*Beratungsstelle";
float:left;
padding-right:4px;
}



#navpunkte_footer ul li {
	display:inline-block;

}


#navpunkte_footer ul li a, #navpunkte_footer ul li span {
	display:block;


}


#navpunkte_footer ul li strong:before, #navpunkte_footer ul li span:before {
content:"|";
	color:#a44588;
	padding-right:4px;
	font-weight: normal;
}

h1 {
	font-family: WeissenhofGrotesk-Bold;
	font-weight: normal;
	font-style: normal;
	font-size:41px;
	color:#a44588;
	margin:27px 0 39px 0;
	line-height:46px;
}

.home h1 {
	font-size:65px;
	margin:40px 0;
}		

h1 + h2 {
	margin-top:-30px;	
}

h2 {
	font-family:"Roboto Slab";
	font-weight:700;
	font-size:21px;
	line-height:23px;	
	color:#a44588;
	margin-top:0;
	margin-bottom:5px;
}

.layout_full h1 + h2 {
	max-width: 600px;
}

.textblock {
	padding-right:240px;	
}

.linie-unten {
	border-bottom:3px solid #e9dcea;
	margin-bottom:20px;
	padding-bottom:20px;
}


.actionbutton a {
	display:inline-block;
	font-size:24px;
	line-height:27px;
	background-color:#a44588;
	color:#fff;
	font-family: WeissenhofGrotesk-Bold;
	padding:10px 20px 10px 44px;
	border-radius:3px;
	background-image:url(../bilder/design/arrow_weiss.png);
	background-position:12px center  ;
	background-position:12px 16px  ;
	background-repeat:no-repeat;
	margin:10px 20px 10px 0;
	font-weight:normal;
}


.biglink a {
	display:inline-block;
	font-size:24px;
	line-height:27px;
	color: #a44588;
	font-family: WeissenhofGrotesk-Bold;
	padding:10px 0;
	margin:10px 20px 10px 0;
	
}

.actionbutton a:hover, p.more a:hover , p.back a:hover {
background-color:#732c59;	
	color:#fff;
}

.pagination {
	text-align:center;	
}

.pagination li {
	display:inline-block;
	padding:0 10px;
	vertical-align:top;
	
}

.embed-container {
	position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

.subtitel {
	display:block;
	font-size:17px;
	font-weight:bold;
	color:#a44588;
	margin-bottom:17px;
	
}

.layout_latest.linie-unten.last {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}


.style_lists li ul, .style_lists #main li ol {
	margin:0 0 1.5em 1.5em;
}
.style_lists ul, .style_lists ol {
	margin:0 0 1.5em 1.2em;
}
.style_lists ul {
	list-style-type:disc;
}
.style_lists ol {
	list-style-type:decimal;
}
.style_lists ol ol {
	list-style: upper-alpha;
}

.style_lists ul li {
margin-bottom:8px;
}



@media screen and (max-width: 1180px) {
	
	.head--spenden {
		position: absolute;
		top: 33px;
		left: inherit;
		right: 99px;
	}
	.head--spenden .btn--spende {
	
		width: 4.5em;
		height: 4.5em;
		font-size: .9em;
		border: 2px solid white;
		box-shadow: 1px 1px 5px 0 #8e8e8e;
	}	
	

#logo {
	left: -20px;	
}

#kontaktdaten_header {
	right:30px;
}

#mainnav ul.level_1 {
	right:30px;	
}

#main  .inside {
	padding:0 30px 50px;

}


#block_introbild #claim {
	margin:20px 30px;
}

.block_startseitenkacheln, .videoblock {
	padding:0 30px;
	max-width: calc(100% - 60px);
}

.biglinkblock .logos {
	margin-right:30px;
}

.big_footer {
	margin-left:30px;
}

#navpunkte_footer {
	margin-left:30px;
}

.textblock {
padding-right:100px;	
}

#block_introbild {

    min-height: calc(100vh - 280px);

}

#mainnav ul {
display:none;	
}

	#mobile_nav_trigger {

top: 1em;
right: 1em;
display:block;
padding:5px;
background-color:#dcc6dd;

	}
.mod_changelanguage {
	margin-top: 8em;

}
	

	
	#mobilenav {
		font-family: WeissenhofGrotesk-Bold;
		font-size:19px;
	
	}
	
	.mm-list {
    font: inherit;
    font-size:19px;
}
	
}


@media screen and (max-width: 960px) {
		
		#main, #left, #right {float:none}
		
		/*
	# Sprachwechsler
	*/
	
	
	.mod_changelanguage {
		padding-left: 1rem;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 99;
	}
	
	
	.mod_changelanguage li {
		padding: .25em .5em;
	}
	
	
	#container {
		top: 9em;
		padding-top: 1em;
		margin-bottom: 9em;
	}
	
		
	.masonry_spalte, .startseitenkachel   {
	width:50%;	
	}
	
	.masonry_gutter {
	width:0;	
	}
	
	.block_startseitenkacheln, .videoblock {
		padding:0;
	}
	
	.videoblock .subcolumns {
	background-color:transparent;	
	}
	
	.subcolumns > div {
	display:block;
	float:none;
	width:100%;
	clear:both;
	margin-left:0!important;	
	margin-right:0!important;
	padding-left:0!important;	
	padding-right:0!important;
	}
	
	.subcolumns > div > div {
	display:block;
	float:none;
	clear:both;
	margin-left:0!important;	
	margin-right:0!important;
	padding-left:0!important;	
	padding-right:0!important;
	}
	
	.video_begleittext {
	    padding: 20px 0  30px;
	    position: relative;
	
	}
	
	.big_footer, #block_introbild #claim, .home h1 {
	
	    font-size: 41px;
	    line-height: 41px;
	
	}
	
		#header {
		background-color:#fff;	
		}
		
		#header .inside {
		padding:0;	
		}
		
	#kontaktdaten_header, #mainnav {
		display:none;	
		}
		
	
	
		
		#logo {
		position:relative;	
		width:207px;
		height:120px;
	
		}
		
			#block_introbild {
	    min-height:inherit;
		height:calc(100vh - 128px);
	    border-bottom: 8px solid #a44588;
	
	}
	
		#mobile_nav_trigger {
	
	top:20px;
	right:30px;
	display:block;
	padding:0;
	background-color:transparent;
	z-index: 100;
	
		}
		
		#scrolldown, #scrollup {
	display:block;	
	}
	
	#footer {
	    border-bottom: 8px solid #a44588;	
	}
	
	#block_introbild {
	
		border-bottom:8px solid #a44588;
	}
	
	
	
	.textblock {
	    padding-right: 0;
	}
	
	.image_container.float_left {
	margin-right:30px!important;
	margin-bottom:20px;	
	}
	
	#footer {
	text-align:center;
	}
	
	.big_footer {
	
	    margin-top: 20px;
	    margin-bottom: 8px;
		font-size:36px;
		line-height:36px;
	
	}
	
	.biglinkblock .logos {
	    float: none;
	    display: block;
	    margin-top: 0;
	    text-align: center;
	    margin-right: 30px;
		margin-left:30px;
		margin-bottom:10px;
	
		
	}
	
	.biglinkblock .logo_unten {
			margin-bottom:5px;
	}
	
	#navpunkte_footer{
	text-align:left;	
	}


}


@media screen and (max-width: 768px) 
{
	.image_container.float_left {
	margin-right:15px!important;
	margin-bottom:10px;	
	}
	#main .mod_article {max-width: calc(100% - 10px); margin: auto; width: 100%;}
	


}


@media screen and (max-width: 600px) {
	
	.masonry_spalte, .startseitenkachel   {
width:100%;	
}
.startseitenkachel {
min-height:0!important;	
}

.startseitenkachel .datum {
	margin-top:10px;
}

.masonry_gutter {
width:0;	
}




	
}

@media screen and (max-width: 520px) {
	
#logo {
	left: -20px;
	top: 1em;
	max-width: 50%;
}

#mobile_nav_trigger {
right:20px;	
}

#kontaktdaten_header {
right:20px;
}

#mainnav ul.level_1 {
right:20px;	
}

#main  .inside {
padding:0 20px 40px;

}


#block_introbild #claim {
margin:20px;
}



.biglinkblock .logos {
	margin-right:20px;
}

.big_footer {
	margin-left:20px;
}

#navpunkte_footer {
	margin-left:20px;
}

h1 {

    font-size: 32px;
    margin: 20px 0;
    line-height: 36px;

}

.home h1 {
	    margin: 30px 0;
}

h1 +h2 {
    margin-top: -10px;
}

.big_footer, #block_introbild #claim, .home h1 {
	 font-size: 28px;
	    line-height: 28px;
}


	
}

@media screen and (max-width: 460px) {

	.image_container.float_left {
		margin-right:0!important;
		margin-bottom:16px;	
		float:none;
		display:block;
		width:auto;
	}
	
	.head--spenden{
		right: 20px;
	    top: 204px;
	     z-index: 100;
	}

}




@media print {
	
	#mainnav, #mobile_nav_trigger {
		display:none;	
	}
	
	.image_container.float_left {
		width:120px;
		height:120px;
		margin-right:15px!important;
		margin-bottom:10px;	
	}
		
	.masonry_spalte, .startseitenkachel   {
		width:50%;	
	}
	
	.masonry_gutter {
		width:0;	
	}
	
		
	#logo {
		position:relative;	
		width:207px;
		height:120px;

	}
	
	#logo {
		left:20px;	
	}
	
	#mobile_nav_trigger {
		right:20px;	
	}
	
	#kontaktdaten_header {
		right:20px;
	}
	
	
	
	
	#main  .inside {
		padding:0 20px 40px;
	
	}
	
	
	#block_introbild #claim {
		margin:20px;
	}
	
	.block_startseitenkacheln, .videoblock {
		padding:0 20px;
	}
	
	.biglinkblock .logos {
		margin-right:20px;
	}
	
	.big_footer {
		margin-left:20px;
	}
	
	#navpunkte_footer {
		margin-left:20px;
	}
	
	h1 {
	
	    font-size: 32px;
	    margin: 20px 0;
	    line-height: 36px;
	
	}
	
	.big_footer, #block_introbild #claim, .home h1 {
		 font-size: 32px;
		    line-height: 32px;
	}
	
	
	
	.biglinkblock .logos {
	    float: none;
	    margin-top: 0;
	    text-align: center;
	    margin-right: 30px;
		margin-left:30px;
		margin-bottom:10px;
	
		
	}
	
	.biglinkblock .logo_unten {
			margin-bottom:5px;
	}
	
	#navpunkte_footer{
		text-align:left;	
	}
	
	#block_introbild {
	
		border-bottom:8px solid #a44588;
	}
	
	.biglinkblock {
	border-bottom:8px solid #a44588;	
	}
	
	.textblock {
	    padding-right: 0;
	}
	
	h1 +h2 {
		margin-top:-10px;	
	}

	
}