@charset "utf-8";
/* CSS Document */
html {
    scroll-behavior: smooth; /* Bitten den Browser sanft nach oben zu Scrollen? */
}
/*BODY*/
body{	
		font: 400 15px/24px 'Lato', sans-serif;	/* Hier Zwei Werte als Fallback -im @font-face-Block → nur den reinen Familiennamen setzen*/	
		background-color:#fff;
}
/*BODY*-- schwarzer Hintergrund*/
@media (prefers-color-scheme: dark) {
body {
    	background-color: #000 !important;
}

#oben .main #wrapper_gallery h1 a{
	 	color: #fff !important;
}
#subnavigation li a{
	 	color: #fff !important;
}

#subnavigation li a:hover,
#subnavigation li a:focus {
		color: #000!important;	
}
	 
#oben .site-footer p {
    	color: #fff !important;
}
}

/*MAIN*/
.main{
		margin:0 auto 0 auto;
}
/*ASIDE*/
aside {
    	width: 21%;
    	float: left;
		margin: 174px 0 0 15px;/*siehe aside -logo 174px 0px 0px 39px;*/
	/*174px = 54px(.gallery:padding-top = 540px)+56px(h1:line height)+44px(h1:padding-top)+12px(row:_1_3: padding-top)+8px(img:padding-top)*/		
}
/*SUBNAVIGATION*/
#subnavigation{
		float: left;
		border-right-width: thin;
		border-right-style: solid;
		border-right-color: #000;		
} 
#subnavigation li {
    	list-style: none;
		margin-bottom:12px; /* Abstand zwischen den Rechtecken*/
		margin-right:6px;
}
#subnavigation li a {
		font-size: 1.313rem;/*21px;*/
		font-weight: 500;
		text-decoration: none;
		color: #000;
		display: block;
		padding: 8px 24px 6px 24px;	
}
#subnavigation li .active {
   		color:#f03;
}
#subnavigation li a:hover,
#subnavigation li a:focus {
		font-size: 1.313rem;/*21px;*/
		font-weight: 500;
		color: #000;
		background: linear-gradient(to bottom, #f66,  white);		
}

/* Querformat-Bilder */
img.img-quer{
  		aspect-ratio: 3 / 2;
 		width: 100%;
  		height: auto;
}
/* Hochformat-Bilder */
img.img-hoch {
  		aspect-ratio: 2 / 3;
  		width: 100%;
 		height: auto;
}

/*RECHTS GALLERY:*/
#wrapper_gallery{
	 	max-width: 100%; 
}
/* UNTERSEITEN  von digital_art und photography*/	
/*RECHTS GALLERY: gallery*/
 .gallery {
		margin: 0 24px 0 auto;/*siehe Hamburger*/
   	 	overflow: hidden;
   		padding-bottom: 40px;
    	padding-top: 54px;
}
/*RECHTS GALLERY: h1_Titel z.B digital art: politics oberhalb der Bildgalerie*/
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1 {
		color: #000;
		font-size: 3rem;/*48px;*/
		line-height: 3.5rem;/*56px*/
		font-family: 'Dancing Script', cursive;
		padding-top: 44px;
		font-weight: 400;
}
.main #wrapper_gallery h1 a{
	text-decoration:none;
	color:#000;
}
.main #wrapper_gallery h1 a:hover,
.main #wrapper_gallery h1 a:focus {
		font-weight: 500;
		color: #000;
		background: linear-gradient(to bottom, #f66,  white);
}
.main #wrapper_gallery h1 span {
		text-transform: lowercase;
		color: #f03;
}
.main #wrapper_gallery h1 span a{
		font-weight: 500;
		color: #ff6666;	
}
.main #wrapper_gallery h1 span a:hover,
.main #wrapper_gallery h1 span a:focus {
		background: linear-gradient(to bottom, white,  #f66);
}
/*ROW*/
.row {
    	display: flex;/*container wird flexibel*//* IE10 */
    	flex-wrap: wrap; /*Elemente sollen umbrochen werden*/
}
/*ROW--- Spalten  nebeneinander*/
.col_1_3 {
    	flex: 33.3333%;  
		max-width: 33.3333%;
   		padding: 12px 19px 12px 4px;
}
/*ROW---Bilder*/
.col_1_3 a img {
	vertical-align: middle;
	/*width: 100%;/*Bild passt sich der Breite des Viewports an! - Abstand zwischen den Bildern  oben und unten*/
	/*height:auto;/*Bild passt sich der Breite des Viewports an!*/
	display: inline-block;	
	padding: 8px 0 9px 0; 	
	margin: 7px 0 0 0;	
}
/*ROW---RECHTS GALLERY:Digital Art / Photography: Bildunterschrift */
.col_1_3 figure{
		position: relative;
 		margin: 0;
  		padding: 13px;
		margin: 8px 0 14px 0px;
  		width: 100%;	
}
.col_1_3 figure figcaption a{
		position: absolute;/*Text auf dem Bild- Zentrum*/
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);		
		padding: 145px 200px 145px 200px;/*Innenabstand des Balkens*/
		background: rgba(255,255,255,0);		
}
.col_1_3 a .nostyle a.nostyle:hover,
.col_1_3 a .nostyle a.nostyle:focus {
   	 	background-color: transparent!important;
   	 	border: none!important;
    	padding: 0!important;
    	box-shadow: none!important;
}
/*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 #fff;
		/*border-radius: 15px;*/
    	padding: 6px 12px 3px 12px ;
}
#oben .site-footer p .top:hover,
#oben .site-footer p .top:focus{   
    	background: #000;
		color: #fff;
    	text-decoration: none;
    	text-transform: lowercase;
    	font-size: 1.125rem; /*18px*/
    	line-height: 1.75rem;/*30px*/
		border: 2px solid #fff;
		/*border-radius: 15px;*/
    	padding: 6px 12px 3px 12px ;
    	
}
		
		

/*FOOTER*/
.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*/		
}
.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: 1920px) {
/*ASIDE*/	
aside {
    width: 13%;
    margin: 174px 0 0 15px;
}
}

@media screen and (max-width: 1420px) {
/*ASIDE*/	
aside {
    	width: 16%;
		margin: 174px 0 0 15px;
}
}

@media screen and (max-width: 1260px) {
/*ASIDE*/	
aside {
    width: 19%;
    margin: 174px 0 0 15px;
}
}

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

@media screen and (max-width: 945px) {	
}
		
@media screen and (max-width: 769px) {
/*ASIDE*/	
aside {
   		width: 25%;
}
/*SUBNAVIGATION*/
#subnavigation {
		float: left;
		border-right-width: thin;
		border-right-style: none;
		border-right-color: #000;		
} 
/*-RECHTS GALLERY: gallery*/
.gallery  {
   		 margin: 0 34px 0 auto;	/*siehe Hamburger*/	
}
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1 {	
		font-size: 2.875rem; /*46px*/
}
/*ROW--- Spalten  nebeneinander*/
.row .col_1_3 {
    	/*-ms-flex: 100%;/* IE10 */
    	flex: 100%;
		max-width: 100%;
   		padding: 12px 4px 12px 4px;/*Abstand zwischen den Bildern oben unten rechts und links */
}
/*SCROLL TO TOP ==> Klick nach Oben*/	
.column.full p .top {  	
    	margin-left: 40%;
}
.column.full p .top:hover,
.column.full p .top:focus {
    	margin-left: 40%;
}
}
/*Wenn das Browser-Fenster 667px oder kleiner ist, ändert sich etwas*/
@media screen and (max-width: 667px) {
/*ASIDE*/
aside {
   		width: 29%;
}
/*SUBNAVIGATION*/
#subnavigation li a {
		font-size: 1.313rem;/*21px*/
		padding: 7px 17px 5px 17px;/*Abstand zum Rand des btn*/
}
#subnavigation li a:hover,
#subnavigation li a:focus {
		font-size: 1.313rem;/*21px*/
		padding: 7px 17px 5px 17px;/*Abstand zum Rand des btn*/
}
/*RECHTS GALLERY: gallery*/
.gallery  {
   		 margin: 0 27px 0 auto;	/*siehe Hamburger*/	
}
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1 {	
		font-size: 2.5rem;/*40px*/
		padding-top: 44px;
		padding-right:27px;/*siehe Hamburger*/
}
}

/*Wenn das Browser-Fenster 545px oder kleiner ist, ändert sich etwas*/
@media screen and (max-width: 570px) {
.main #wrapper_gallery h1 {	
		font-size: 2.438rem;/*39px*/
}
}

@media screen and (max-width: 545px) {
/*ASIDE*/
 aside {
   		width: 30%;
    	margin: 156px 0 0 15px;
/*156px = 40px(.gallery:padding-top = 40px)+56px(h1:line height)+40px(h1:padding-top)+12px(row:_1_3: padding-top)+8px(img:padding-top)*/
}
/*SUBNAVIGATION*/
#subnavigation li a {
		font-size: 1.188rem;/*19px*/
		padding: 7px 17px 5px 17px;/*Abstand zum Rand des btn*/
}
#subnavigation li a:hover,
#subnavigation li a:focus {
		font-size: 1.188rem;/*19px*/
		padding: 7px 17px 5px 17px;/*Abstand zum Rand des btn*/	
}	
/*RECHTS GALLERY: gallery*/		
.gallery {
		margin: 0 27px 0 auto;
   		padding-bottom: 40px;
    	padding-top: 40px;
}	
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1 {	
		font-size:2.063rem; /*33px*/
		padding-top: 40px;
		padding-right:27px;/*siehe Hamburger*/
}
}

/*Wenn das Browser-Fenster 480px oder kleiner ist, ändert sich etwas*/
@media screen and (max-width: 480px) {
/*ASIDE*/
aside {
   		width: 30%;
    	margin: 146px 0 0 15px;
/*146px = 30px(.gallery:padding-top = 30px)+56px(h1:line height)+40px(h1:padding-top)+12px(row:_1_3: padding-top)+8px(img:padding-top)*/
}
/*SUBNAVIGATION*/
#subnavigation li a {
		font-size: 1.063rem;/*17px*/
		padding: 7px 17px 5px 17px;/*Abstand zum Rand des btn*/
}
#subnavigation li a:hover,
#subnavigation li a:focus {
		font-size: 1.063rem;/*17px*/
		padding: 7px 17px 5px 17px;/*Abstand zum Rand des btn*/
}	
/*RECHTS GALLERY: gallery*/	
.gallery {
    	margin: 0 15px 0 auto;
    	padding-bottom: 40px;
    	padding-top: 30px;
}	
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1 {	
		font-size:1.875rem; /*30px*/
		padding-top: 40px;
		padding-right:15px;/*siehe Hamburger*/
}
}

/*Wenn das Browser-Fenster 480px oder kleiner ist, ändert sich etwas*/
@media screen and (max-width: 450px) {
/*RECHTS GALLERY: gallery*/	
.gallery {
    	margin: 0 15px 0 auto;
    	padding-bottom: 40px;
    	padding-top: 30px;
}	
}

/*Wenn das Browser-Fenster 418px oder kleiner ist, ändert sich etwas*/
@media screen and (max-width: 418px) {
/*LINKS: ASIDE*/
aside {
   		width: 32%;
		float: left;
		margin: 141px 0 0 6px;
/*141px = 30px(.gallery:padding-top = 30px)+56px(h1:line height)+35px(h1:padding-top)+12px(row:_1_3: padding-top)+8px(img:padding-top)*/
}
/*SUBNAVIGATION*/
#subnavigation li {
		margin-right:4px;/* Abstand zur Linie*/
}
/*RECHTS GALLERY: gallery*/		
.gallery {
    	margin: 0 13px 0 auto;
}	
}

/*Wenn das Browser-Fenster 370px oder kleiner ist, ändert sich etwas*/
@media screen and (max-width: 370px) {
/*LINKS: ASIDE*/
aside {
   		width: 33%;
}
/*SUBNAVIGATION*/
#subnavigation li {
		margin-right:3px;/* Abstand zur Linie*/
}
/*RECHTS GALLERY: gallery*/	
.gallery {
    	margin: 0 9px 0 auto;/*siehe Hamburger*/
}	
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1{	
		font-size: 1.5625rem;/*25px*/
		padding-top: 35px;
		padding-right:9px;/*siehe Hamburger*/
}
}
/*Wenn das Browser-Fenster 370px oder kleiner ist, ändert sich etwas*/
@media screen and (max-width: 360px) {
/*LINKS: ASIDE*/
aside {
   		width: 34.5%;
		margin: 141px 0 0 5px;
/*141px = 30px(.gallery:padding-top = 30px)+56px(h1:line height)+35px(h1:padding-top)+12px(row:_1_3: padding-top)+8px(img:padding-top)*/
}
/*RECHTS GALLERY: gallery*/		
.gallery {
    	padding-bottom: 40px;
    	padding-top: 30px;
}	
}

@media screen and (max-width: 350px) {
/* ASIDE*/
.main aside {
   		width: 36%;
		margin: 129px 0 0 4px;
/*129px = 28px(.gallery:padding-top = 28px)+ 56px(h1:line height)+25px(h1:padding-top)+12px(row:_1_3: padding-top)+8px(img:padding-top)*/
}
/*RECHTS GALLERY: gallery*/	
.gallery {
    	margin: 0 5px 0 auto;/*siehe Hamburger*/
    	padding-bottom: 40px;
    	padding-top: 28px;
}	
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1 {	
		font-size: 1.4375rem;/*23px*/
		padding-top: 25px;
		padding-right:5px;/*siehe Hamburger*/
}
}
/*Wenn das Browser-Fenster 320px oder kleiner ist, ändert sich etwas*/
@media screen and (max-width: 320px) {
/* ASIDE*/
aside {
   		width: 39%;
		margin: 129px 0 0 3px;
/*129px = 28px(.gallery:padding-top = 28px)+ 56px(h1:line height)+25px(h1:padding-top)+12px(row:_1_3: padding-top)+8px(img:padding-top)*/
}
/*SUBNAVIGATION*/
#subnavigation li a {
		font-size: 1.063rem;/*17px*/
		padding: 6px 17px 5px 17px;/*Abstand zum Rand des btn*/
}
#subnavigation li a:hover,
#subnavigation li a:focus {
		font-size: 1.063rem;/*17px*/
		padding: 6px 17px 5px 17px;/*Abstand zum Rand des btn*/
}	
/*RECHTS GALLERY: gallery*/	
.gallery {
    	margin: 0 4px 0 auto;/*siehe Hamburger*/
    	padding-bottom: 40px;
    	padding-top: 28px;
}	
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1 {	
		font-size: 1.375rem;/*22px*/
		padding-top: 25px;
		padding-right:4px;/*siehe Hamburger*/
}
}

@media screen and (max-width: 300px) {
/* ASIDE*/
aside {
   		width: 42%;
}
/*RECHTS GALLERY: gallery*/	
.gallery {
    	margin: 0 3px 0 auto;/*siehe Hamburger*/
}	
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1 {	
		font-size: 1.188rem;/*19px*/
		padding-top: 25px;
		padding-right:1px;/*siehe Hamburger*/
		padding-left:134px;		
}
}

/*Wenn das Browser-Fenster 280px oder kleiner ist, ändert sich etwas*/
@media screen and (max-width: 280px){
/* ASIDE*/
aside {
		width: 42%;
 	 	margin: 101px 0 0 0;
		/*101px = -57px(.gallery:padding-top = 57px)+ 56px(h1:line height)+25px(h1:padding-top)+12px(row:_1_3: padding-top)+8px(img:padding-top)*/
}	
/*SUBNAVIGATION*/
#subnavigation li a {
		font-size: 1rem;/*16px*/
		padding: 6px 17px 5px 17px;/*Abstand zum Rand des btn*/
}

#subnavigation li a:hover,
#subnavigation li a:focus {
		font-size: 1rem;/*16px*/
		padding: 6px 17px 5px 17px;/*Abstand zum Rand des btn*/
}
/*RECHTS GALLERY: gallery*/	
.gallery {
	margin: -20px 0 0 0;
	padding-bottom: 20px;
	padding-top: 57px;
	padding-right: 6px;
	padding-left: 0px;
}
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1 {
  		font-size: 19px;
		font-size: 1.188rem;
		padding-top: 25px;
		padding-right:1px;/*siehe Hamburger*/
		padding-left:9px;
		line-height: 154%;
}
}

@media screen and (max-width: 270px){
/*LINKS: ASIDE*/
.main aside {
  		width: 43%;
}	
/*SUBNAVIGATION*/	
#subnavigation li {
	margin-right:0px;/* Abstand zur Linie*/
}
/*RECHTS GALLERY: gallery*/	
.gallery {
	margin: -50px 0 0 0;
	padding-bottom: 20px;
	padding-top: 57px;
	padding-right: 9px;
	padding-left: 26px;
}
}

@media screen and (max-width: 260px){
/*LINKS: ASIDE*/
aside {
  		width: 46%;
 	 	margin: 101px 0 0 0;
		/*101px = minus 57px(.gallery:padding-top = 57px)+ 56px(h1:line height)+25px(h1:padding-top)+12px(row:_1_3: padding-top)+8px(img:padding-top)*/
}		
/*RECHTS GALLERY: gallery*/	
.gallery {
		margin: -60px 0 0 0;
		padding-bottom: 20px;
		padding-top: 57px;
		padding-right: 6px;
		padding-left: 0px;
}	
/*BILDGALERIE: Titel oberhalb der Bildgalerie*/
.main #wrapper_gallery h1 {	
		font-size: 1.188rem; /*19px*/
		padding-top: 25px;
		padding-right:1px;/*siehe Hamburger*/
		padding-left:9px;
}
}