@charset "utf-8";
/* CSS Document  STARTSEITE - Eingangsbilder*/
html {
    scroll-behavior: smooth; /* Bitten den Browser sanft nach oben zu Scrollen? */
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  }

  #oben .site-footer p {
    color: #fff;
  }
}
/*  MAIN Digital art / Photography : Titel */
#oben main h1{			
			font-family: 'Lato', sans-serif;
  			font-style: normal;
  			font-weight: 500;
  			font-size: 4.5rem; 
	  		line-height: 5rem;
			text-align:center;
			margin-top: 9px;
			margin-bottom: 24px;
			letter-spacing:0.3rem;
}
#oben main h1 .big.lettre {
			font-family:'Dancing Script', cursive;
    		font-size: 8rem;
    		color: #f03; 			
}
#oben main h1 .skewed-letter {
			font-family:'Dancing Script', cursive;
    		font-size: 8rem;
    		color: #f03; 
}
/*  MAIN Digital art / Photography : Titel */
#oben main h2{			
			font-family: 'Lato', sans-serif;
  			font-style: normal;
  			font-weight: 500;
  			font-size: 2.5rem; 
			text-align:center;
			margin-top: 1px;
			margin-bottom: 60px;
}
#oben main h2::first-letter {
    		font-size: 8rem;
    		color: #f03; 
			font-family:'Dancing Script', cursive;
}
/*Text unter dem Titel*/
#oben main .row p{
			font-family: 'Lato', sans-serif;
			font-style: normal;
			font-weight: 400;
			font-size: 1.5rem;
			
			line-height: 2.75rem;
  			margin:90px 1.6px 45px 1.6px;
}
/*CONTENT- Startseite- FLEXBOX*/
.row{
  			display: flex;
  			flex-wrap: wrap;
		
			margin: 15px 100px 10px 100px;
}

/* Create four equal columns that sits next to each other */
.row .column {
			flex: 50%;/*25%;*/		
  			max-width: 50%;/*25%;*/
		
  			padding: 7px 5px;  /*Abstand  zwischen den Spalten- kein margin  sonst doppel margin!!!*/
}

.row .column.eins,
.row .column.zwei,
.row .column.drei,
.row .column.vier,
.row .column.fuenf,
.row .column.sechs,
.row .column.sieben
{
			transform:rotate(0deg);	
}
	
/*  Digital art / Photography : Titel */
.row .column img {
			margin-top: 9px;
			vertical-align: middle;		
}


/* Digital Art / Photography: Bildunterschrift */
.row .column figure{
			position: relative;
 			margin: 0;
  			padding: .1rem;/*.3em;*/
  			width: 100%;	
}
.row .column figure figcaption a{
			color: #000;
			font-family: 'Lato', sans-serif;
			font-size: 16px;
			line-height: 21px;
			font-weight: 500;
			text-decoration: none;
		
			position: absolute;/*Text auf dem Bild- Zentrum*/
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			padding: 0 13px 0 13px;/*Innenabstand des Balkens*/
		
			background: rgba(255,255,255,0.8);
		
			border: medium dotted #000;/*border: 1.9px solid #000;*/
			border-radius: 16px 16px 16px 16px;
}
.row .column figure figcaption a:hover,
.row .column figure figcaption a:focus{
			color: #000;
			font-family: 'Lato', sans-serif;
			font-size: 16px;
			line-height: 26px;
			font-weight: 500;
			background-color:#fff;
		
			padding: 0 13px 0 13px;
		
			background: rgba(255,128,128,0.7);
			border: 2.5px groove #FFF;
			border-radius: 3px;
}
/*hr ==>  Linie zwischen Content und Footer*/
#oben hr {
			border-top-color: #d9d9d9;
}
	
/*SCROLL TO TOP ==> Klick nach Oben*/
#oben .site-footer p .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 ;
}
/*FOOTER*/
#oben .site-footer p .top:hover,
#oben .site-footer p .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 ;
    	
}	
	
/*FOOTER*/
#oben .site-footer{
			color:  #060606; /*#333;*/
			margin-top:0;/*Die Anweisung margin-top:auto dr체ckt den Footer nach unten ==> hier entfernt sonst gibt es einen zu grossen Abstand*/		
}

/*Footer*/
.site-footer  p  {/*COPYRIGHT*/
			text-align:center;
			color : #000;
			font-weight : 500;
			font-size : 1rem;/*16px*/
			padding-top: 0.6rem;
			margin-top: 0.6rem;
}

/*MEDIA QUERIES*/
@media screen and (max-width: 1420px) {	
/*Index ==> CONTENT- Startseite- FLEXBOX*/
.row {
			margin: 15px 90px 10px 90px;
}
/*Digital Art */
.row .column figure figcaption a{
			font-size: 16px;
			line-height: 21px;
			font-weight: 500;
		
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			padding:0 10px 0 10px;
			
			background: rgba(255,255,255,0.8);
			border: 2.3px solid #000;
			border-radius: 3px;	
}
.row .column figure figcaption a:hover,
.row .column figure figcaption a:focus{
			font-size: 16px;
			line-height: 21px;
			font-weight: 500;	
		
			padding:0 10px 0 10px;
		
			background: rgba(255,128,128,0.7);
			border: 2.5px groove #FFF;
			border-radius: 3px;	
}
}

@media screen and (max-width: 1260px) {
/*Index ==> CONTENT- Startseite- FLEXBOX*/
.row {
			margin: 30px 80px;
}
}

@media screen and (max-width: 1000px) {
/*  MAIN Digital art / Photography : Titel */
#oben main h1{			
  			font-size: 3.5rem; 
	  		line-height: 4rem;
			margin-top: 33px;
			margin-bottom: 24px;
			letter-spacing:0.3rem;
}
#oben main h1 .big.lettre {
    		font-size: 7rem; 			
}
#oben main h1 .skewed-letter {
    		font-size: 8rem;
}
/*  MAIN Digital art / Photography : Titel */
#oben main h2{			
  			font-size: 2rem; 
			margin-top: 1px;
			margin-bottom: 50px;
}
#oben main h2::first-letter {
    		font-size: 7rem;
}
/*Text unter dem Titel*/
#oben main .row p{
			font-size: 1.5rem;

			line-height: 2.75rem;
  			margin:90px 1.6px 45px 1.6px;
}	

	
/*Index ==> CONTENT- Startseite- FLEXBOX*/
.row {
			margin: 30px 60px;
}
/* Index und Digital Art ==> Create two equal columns that sits next to each other */
.row .column {
 		
			flex-basis: 50%;		
		    flex-grow: 1;				
		   	flex-shrink:1;
				
  			max-width: 50%;
  			padding: 0 3px; /*Abstand  zwischen den Spalten- kein margin  sonst doppel margin!!!*/
}
/*Digital Art */
.row .column figure figcaption a{
			font-size: 15px;
			line-height: 20px;
			font-weight: 500;
	
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			padding: 0 9px 0 9px;
	
			background: rgba(255,255,255,0.8);
			border: 2.1px solid #000;	
}
.row .column figure figcaption a:hover,
.row .column figure figcaption a:focus{
			background: rgba(255,128,128,0.7);
			border: 2.5px groove #FFF;
			border-radius: 3px;		
}
}
	
@media screen and (max-width: 945px) {
/*Text unter dem Titel*/
#oben main .row p{
			font-size: 1.45rem;
			line-height: 2.6rem;
			margin:90px 1.6px 45px 1.6px;
}

/*Index ==> CONTENT- Startseite- FLEXBOX*/
.row {
			margin: 30px 50px;
}			
/* Index und Digital Art ==> Create 3 equal columns that sits next to each other */	
.row .column {
			flex-basis: 50%;	
		    flex-grow: 1;
		   	flex-shrink:1;
				
  			max-width: 50%;
  			padding: 0 3px; /*Abstand  zwischen den Spalten- kein margi  sonst doppel margin!!!*/
}
}

@media screen and (max-width: 769px) {
/*Text unter dem Titel*/
#oben main .row p{
			font-size: 1.35rem;
			line-height: 2.4rem;
			margin: 80px 1.6px 40px 1.6px;
}
/*Index und Digital Art ==>  FLEXBOX*/
.row {
    		margin: 30px 30px;  
}	
/* Index und Digital Art ==> Create 2 equal columns that sits next to each other */		
.row .column {
			flex-basis: 50%;				
			flex-grow: 1;
			flex-shrink:1;
				
  			max-width: 50%;
  			padding: 0 3px; /*Abstand  zwischen den Spalten- kein margi  sonst doppel margin!!!*/
}
/*Digital Art */
.row .column figure figcaption a{
			font-size: 14px;
			line-height: 18px;
			font-weight: 500;
			
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			
			padding:0 8px 0 8px;
			
			background: rgba(255,255,255,0.8);
			border: 2px solid #000;		
}
.row .column figure figcaption a:hover,
.row .column figure figcaption a:focus {
			background: rgba(255,128,128,0.7);
			border: 2px groove #FFF;
			border-radius: 3px;			
}
.site-footer  p  {/*COPYRIGHT*/
			font-size : 1rem;/*16px*/
}
}

@media screen and (max-width: 667px) {
/*  MAIN Digital art / Photography : Titel */
#oben main h1{			
  			font-size: 3.1rem; 
	  		line-height: 4rem;
			margin-top: 36px;
			margin-bottom: 17px;
			letter-spacing:0.3rem;
}
#oben main h1 .big.lettre {
    		font-size: 6rem; 			
}
#oben main h1 .skewed-letter {
    		font-size: 8rem;
}
/*  MAIN Digital art / Photography : Titel */
#oben main h2{			
  			font-size: 1.9rem; 
			margin-top: 1px;
			margin-bottom: 50px;
}
#oben main h2::first-letter {
    		font-size: 6rem;
}
/*Text unter dem Titel*/
#oben main .row p{
			font-size: 1.35rem;
			line-height: 2.5rem;
			margin: 60px 1.6px 35px 1.6px;
}
/*Index und Digital Art ==>  FLEXBOX*/
.row {
    		margin: 30px 50px;  
}
/* Index und Digital Art ==> Create 1 equal columns that sits next to each other */
.row .column {
			flex-basis: 100%;	
		    flex-grow: 1;
		   	flex-shrink:1;
				
  			max-width: 100%;
  			padding: 0 12px 0 3px; /*Abstand  zwischen den Spalten- kein margi  sonst doppel margin!!!*/
}

.row .column figure {
  			padding:0;
}
}
/*Wenn das Browser-Fenster 545px oder kleiner ist, 채ndert sich etwas*/
@media screen and (max-width: 570px) {
	/*Text unter dem Titel*/
#oben main .row p{
			font-size: 1.3rem;
			line-height: 2.4rem;
			margin:60px 1.6px 35px 1.6px;
}

/*Index und Digital Art ==>  FLEXBOX*/
.row {
    		margin: 30px 50px;  
}
/* Index und Digital Art ==> Create 1 equal columns that sits next to each other */
.row .column {
			flex-basis: 100%;	
		    flex-grow: 1;
			flex-shrink:1;
				
  			max-width: 100%;
  			padding: 0 12px 0 3px; /*Abstand  zwischen den Spalten- kein margi  sonst doppel margin!!!*/
}	
/*Digital Art */
.row .column figure figcaption a{
			font-size: 15px;
			line-height: 19px;
			font-weight: 500;
		
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			padding:0 9px 0 9px;
		
			background: rgba(255,255,255,0.8);
			border: 2px solid #000;
}
.row .column figure figcaption a:hover,
.row .column figure figcaption a:focus{
			padding:0px 9px 0px 9px;
		
			background: rgba(255,128,128,0.7);
			border: 2px groove #FFF;
			border-radius: 3px;		
}
}

@media screen and (max-width: 545px) {
/*  MAIN Digital art / Photography : Titel */
#oben main h1{			
  			font-size: 2.8rem; 
	  		line-height: 3.7rem;
			margin-top: 46px;
			margin-bottom: 17px;
			letter-spacing:0.3rem;
}
#oben main h1 .big.lettre {
    		font-size: 5.3rem; 			
}
#oben main h1 .skewed-letter {
    		font-size: 5.3rem;
}
/*  MAIN Digital art / Photography : Titel */
#oben main h2{			
  			font-size: 1.9rem; 
			margin-top: 1px;
			margin-bottom: 50px;
}
#oben main h2::first-letter {
    		font-size: 5.3rem;
}
/*Text unter dem Titel*/
#oben main .row p{
			margin: 60px 1.6px 35px 1.6px;
}			
/*Index und Digital Art ==>  FLEXBOX*/
.row {
    		margin: 30px 40px;  
}	
}

@media screen and (max-width: 480px) {
	/*Text unter dem Titel*/
#oben main .row p{
			font-size: 1.2rem;
			line-height: 2.4rem;
			margin: 50px 1.6px 25px 1.6px;
}	
	
/*Index und Digital Art ==>  FLEXBOX*/
.row {
    		margin: 30px 15px;  
}		
/* Index und Digital Art ==> Create 1 equal columns that sits next to each other */	
.row .column {
			flex-basis: 100%;	
		    flex-grow: 1;
		   	flex-shrink:1;
				
  			max-width: 100%;
  			padding: 0 12px 0 3px; /*Abstand  zwischen den Spalten- kein margi  sonst doppel margin!!!*/
}
}

@media screen and (max-width: 370px) {
/*  MAIN Digital art / Photography : Titel */
#oben main h1{			
  			font-size: 2.4rem; 
	  		line-height: 3.4rem;
			margin-top: 48px;
			margin-bottom: 17px;
			letter-spacing:0.2rem;
}
#oben main h1 .big.lettre {
    		font-size: 4.9rem; 			
}
#oben main h1 .skewed-letter {
    		font-size: 4.9rem;
}
/*  MAIN Digital art / Photography : Titel */
#oben main h2{			
  			font-size: 1.8rem; 
			margin-top: 1px;
			margin-bottom: 40px;
}
#oben main h2::first-letter {
    		font-size: 4.9rem;
}
/*Text unter dem Titel*/
#oben main .row p{
			font-size: 1.2rem;
			line-height: 2.2rem;
			margin: 45px 1.6px 25px 1.6px;
}								
/*Index und Digital Art ==>  FLEXBOX*/
.row {
    		margin: 30px 10px;  
}	
}
 
@media screen and (max-width: 300px) {	
/*  MAIN Digital art / Photography : Titel */
#oben main h1{			
  			font-size: 2rem; 
	  		line-height: 3rem;
			margin-top: 53px;
			margin-bottom: 16px;
			letter-spacing:0.2rem;
}
#oben main h1 .big.lettre {
    		font-size: 3.9rem; 			
}
#oben main h1 .skewed-letter {
    		font-size: 3.9rem;
}
/*  MAIN Digital art / Photography : Titel */
#oben main h2{			
  			font-size: 1.7rem; 
			margin-top: 1px;
			margin-bottom: 45px;
}
#oben main h2::first-letter {
    		font-size: 3.9rem;
}
/*Text unter dem Titel*/
#oben main .row p{
			font-size: 1.05rem;
			line-height: 2.2rem;
			margin: 40px 1.6px 20px 1.6px;
}
/*Index und Digital Art ==>  FLEXBOX*/
.row {
    		margin: 30px 10px;  
}		

													
}


@media screen and (max-width: 240px) {
/*  MAIN Digital art / Photography : Titel */
#oben main h1{			
  			font-size: 1.9rem; 
	  		line-height: 2.9rem;
			margin-top: 60px;
			margin-bottom: 16px;
			letter-spacing:0.2rem;
}
#oben main h1 .big.lettre {
    		font-size: 3.1rem; 			
}
#oben main h1 .skewed-letter {
    		font-size: 3.1rem;
}
/*  MAIN Digital art / Photography : Titel */
#oben main h2{			
  			font-size: 1.7rem; 
			margin-top: 1px;
			margin-bottom: 55px;
}
#oben main h2::first-letter {
    		font-size: 3.1rem;
}
/*Text unter dem Titel*/
#oben main .row p{
			font-size: 1.05rem;
			line-height: 2.2rem;
			margin: 40px 1.6px 20px 1.6px;
}										
/*Index und Digital Art ==>  FLEXBOX*/
.row {
    		margin: 30px  0 10px 0;  
}	
}