@charset "utf-8";
/* CSS Document */
 html{
	scroll-behavior: smooth;/*sanft zum Linkziel scrollen*/
}
 body {
		background-color: #dadbdf;
}
@media (prefers-color-scheme: dark) {
body {
    	background-color: #000 !important;
}
.arrow_box {
  		box-shadow: 10px 20px 15px #020202 !important;
  }
.erster_absatz,
.zweiter_absatz,
.dritter_absatz{
	 	color: #fff !important;
}
#oben .site-footer nav ul li h2,
#oben .site-footer nav ul li h3,	 
#oben .site-footer p {
    	color: #fff !important;
}
}

/*HEADER-LOGO*/
.logo {
		display: block;
		height: 108px;

		margin: 15px 0 10px 15px;
}

/*ABOUT Seite*/
.open {
		margin: 0 auto 0 auto;
}

.text{
		padding: 23px;
}

/*Bild - Bild zentrieren*/
.center{	
		display: block;
  		margin-left: auto;
  		margin-right: auto;
		margin-bottom: 50px; 		
}

/*Bild - responsive Bilder - responsives Bild auf eine maximale Größe beschränken, verwenden  max-width  mit einem Pixelwert Ihrer Wahl: */
.responsive {
		width: 100%;
		max-width: 300px;
 	 	height: auto;
		border-radius:10px;
}

/* ============================================================================================================================
== OVER SPEECH BUBBLE, EMPTY, WITH BORDER (more CSS3)
** ============================================================================================================================ */
.arrow_box {
		/*position: relative;/*Zusammenhang mit Pfeil oben*/
		/*width: 100%; /* Prozentweite der Sprechblase */
		/*max-width: calc(100% - 80px); /* Maximale Breite unter Berücksichtigung des Paddings */
		/*min-width: 80px; */
		padding: 0 40px 30px 40px;

		float: right;
		
		/*Schatten*/
		box-shadow: 10px 20px 15px silver;
		border-radius: 20px;
}
	
/*h1*/
.arrow_box h1{
		/*Titel about me*/
		color: #000;
  		font-size: 4rem; /*54px*/
  		line-height: 4.125rem;/*66px*/
 		font-family: 'Dancing Script', cursive;
  		text-align: center;		
 
		/*Kreis*/
 		 padding-top: 90px;
 		 width: 250px;
 		 height: 250px;
	
		/*Radius um Kreis*/
  		border: 1.5px solid grey;
		border-radius: 250px;
		
		/*Figur*/
		box-shadow:
		inset 130px 0 0 hsla(0,100%,100%,0.6), 
		inset 0 130px 0 hsla(0,100%,70%,0.6), 
		inset -130px 0 0 hsla(0,100%,70%,0.6), 
		inset 0 -130px 0 hsla(0,100%,100%,0.6);
			
		/* Kreis in der Mitte*/
		margin: 0 auto 0 auto;			  
}

/*Absatz p  mit Class*/
.erster_absatz{
		color: #000;
		font-size: 1.3125rem;/*21px*/
		line-height: 2.0625rem;/*33px*/
		text-align: center;		
		/*Abstand Kreis mit Erstem Absatz*/
		padding-top: 51px;			
}
.zweiter_absatz{
		color: #000;
		font-size: 1.3125rem;/*21px*/
		line-height: 2.0625rem;/*33px*/
		text-align:  center;		
}
.dritter_absatz{
		color: #000;
		font-size: 1.3125rem;/*21px*/
		line-height: 2.0625rem;/*33px*/
		text-align:  center;		
}

.text blockquote p cite{
		color:#000;	
		
}
/*SCROLL TO TOP ==> Klick nach Oben*/
#oben .open .text .arrow_box .dritter_absatz .top{   	
		color: #fff;
    	background: #f03;
    	text-decoration: none;
    	text-transform: lowercase;
    	font-size: 1.125rem; /*18px*/
    	line-height: 1.75rem;/*30px*/
		border: 2px solid #dadbdf;
		/*border-radius: 15px;*/
    	padding: 6px 12px 3px 12px ;
		   	
}
#oben .open .text .arrow_box .dritter_absatz .top:hover,
#oben .open .text .arrow_box .dritter_absatz .top:focus{   
    	color: #fff;
    	background: #000;
    	text-decoration: none;
    	text-transform: lowercase;
    	font-size: 1.125rem; /*18px*/
    	line-height: 1.75rem;/*30px*/
		border: 2px solid #dadbdf;
		/*border-radius: 15px;*/
    	padding: 6px 12px 3px 12px ;
}
/*hr ==>  Linie zwischen Content und Footer*/
hr {
		border-top-width: 0.1px;
		border-top-style: solid;
		border-top-color: #333;
		margin:199px 26px 0 26px;/*hr ==>  Linie zwischen Content und Footer-   anders als auf den anderen Seiten*/
}

@media screen and (max-width: 1260px) {
	/*ABOUT Seite*/
.open {
		margin:0 90px 0 90px;
}		
}

@media screen and (max-width: 1000px) {
  /*h1*/
.arrow_box h1{	
  		font-size: 4rem;/* 54px */
  		line-height: 4.125rem;/* 66px */
  
}
/*p*/
.text blockquote p{
    	font-size: 1.313rem;/* 21px */
    	line-height: 1.813rem;/* 27px */    	
}

/* Absatz p mit Class */
.erster_absatz,
.zweiter_absatz,
.dritter_absatz {
   	 	font-size: 1.313rem; /* 21px */
    	line-height: 1.813rem; /* 27px */
}
}

@media screen and (max-width: 945px) {	
/*ABOUT Seite*/
.open {
		margin:0 90px 0 90px;
}		
	
/*h1 */
.arrow_box h1{
		font-size:3.125rem;/*50px*/
		line-height: 3.75rem;/*60px*/    	
}
}	

@media screen and (max-width: 769px) {
/*ABOUT Seite*/
.open {
		margin:0 60px 0 60px;
}	
/*h1*/
.arrow_box h1{
		font-size:3.125rem;/*50px*/
		line-height: 3.75rem;/*60px*/    
}

/*ABOUT Seite*/
.text{
		padding: 13px;
}		
}

@media screen and (max-width: 667px) {	
/* Absatz p mit Class */
.erster_absatz,
.zweiter_absatz,
.dritter_absatz {
   	 	font-size: 1.25rem; /* 20px */
    	line-height: 1.875rem; /* 30px */
}
}

@media screen and (max-width: 545px) {	
/*ABOUT Seite*/
.open {
	margin:0 30px 0 30px;
}				
/*HEADER-LOGO*/
.logo {
		margin: 15px 0px 19px 0px;
}	
/*h1*/
.arrow_box h1{
 		font-size:3.125rem;/*50px*/
		line-height: 3.75rem;/*60px*/     

		/*Kreis*/
 		padding-top: 67px;
    	width: 200px;
    	height: 200px;

  		border: 1px solid black;
		border-radius: 200px;
		/*Figur*/
		box-shadow:
		inset 110px 0 0 hsla(0,100%,100%,0.6), 
		inset 0 110px 0 hsla(0,100%,70%,0.6), 
		inset -110px 0 0 hsla(0,100%,70%,0.6), 
		inset 0 -110px 0 hsla(0,100%,100%,0.6);
}
/* Absatz p mit Class */
.erster_absatz,
.zweiter_absatz,
.dritter_absatz {
   	 	font-size: 1.25rem; /* 20px */
    	line-height: 1.875rem; /* 30px */
}
/*ABOUT Seite*/
.text{
		padding: 13px;
}
/*Bild - Bild zentrieren*/
.center{	
		display: block;
  		margin-left: auto;
  		margin-right: auto;
		margin-bottom: 50px;  		
}

/* ============================================================================================================================
== OVER SPEECH BUBBLE, EMPTY, WITH BORDER (more CSS3)
** ============================================================================================================================ */
.arrow_box {

		padding: 0px 15px 30px 15px;
}	  
}

@media screen and (max-width: 480px) {
	
.open {
	margin:0 15px 0 15px;
}
}

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

.open {
	margin:0 15px 0 15px;
}
}

@media screen and (max-width: 360px) {
.open {
	margin:0 1px 0 1px;
}	
}

@media screen and (max-width: 300px) {
.open {
	margin:0 1px 0 1px;
}
/*h1*/
.arrow_box h1{
    	font-size: 2.75rem;/*44px*/
    	line-height: 3.75rem;/*60px*/
		
    	padding-top: 40px;
    	width: 150px;
		
    	height: 150px;

		/*Radius um Kreis*/
    	border: 1px solid black;
    	border-radius: 150px;
					
}	
}