@import url('https://fonts.googleapis.com/css2?family=Glory&family=Noticia+Text:wght@700&display=swap');
	
	*{
		box-sizing:border-box;
		margin:0;
		padding:0;
	}
	
	html {
		overflow-x: hidden;
	}
	
	
	body, input {
		font-family: 'Glory', sans-serif;
		padding:2rem;
	}
	input {
		border:1px solid gray;
	}
	
		
	h1 {
		font-size:4rem;
		margin-top:8rem;
		background:rgba(255,255,255,0.8);
		font-family: 'Noticia Text', serif;
		font-weight:700;
	}
	h2 {
		font-family: 'Noticia Text', serif;
		font-size:2rem;
		font-weight:normal;
		color:darkslategray;
		margin:0rem 0rem;
		background:rgba(255,255,255,0.8);
	}


	a:link {
		color:darkslategray;
		transition:all ease-in-out 0.3s;
		text-decoration: none;
	}
	a:visited {
		color:darkslategray;
	}
	a:hover {
		color:black;
		transition:all ease-in-out 0.3s;
	}
	a:active {
		color:darkslategray;
	}
	
	
	.fasmall {
	font-size:1rem;	
	}
	
	.oneproject {
		display:flex;
		border-radius:5px;
		justify-content: space-between;
	}

	.oneproject_infos h2{
		border-radius:5px;
		border:1px solid black;
		padding:1rem;
		margin-bottom:1rem;
}
	.oneproject_infos{
		border-radius:5px;
		width:36%;
		border:1px solid black;
		padding:2rem 3rem;

	}


	.oneproject_infos_bild,.oneproject_notes_bild {
		width:100%;
		transition:all ease-in-out 0.5s;
	}
	.oneproject_infos_bild:hover , .oneproject_notes_bild:hover {
		opacity:0.7;
		transition:all ease-in-out 0.3s;
	}



	.oneproject_notes{
		border-radius:5px;
		border:1px solid black;
		width:60%;
		padding:2rem 3rem;
	}
.oneproject_notes h2{
		border-radius:5px;
		border:1px solid black;
		padding:1rem;
		margin-bottom:1rem;
}
	.projektlist {
		border:1px solid black;
		border-radius:5px;
		padding:2rem 3rem;
		margin-bottom:1rem;
	}

	.fadeout{
		padding:1rem;
		background:lightgray;
		animation:fadeout 3s ease-in-out;
		animation-fill-mode: forwards;
	}

	@keyframes fadeout{
		70%{
			opacity:1;
		}
		100%{
			opacity:0;
			display:none;
		}
	}

	.projektlist a {
		background:darkslategray;
		color:white;
		border:1px solid black;
		border-radius:5px;
		padding:0.5rem 1rem;
		margin:1rem;
		transition:all ease-in-out 0.6s;
	}
	.projektlist a:hover {
		background:white;
		color:darkslategray;
		transition:all ease-in-out 0.4s;
	}

	.formentry{
		position:fixed;
		top:2rem;
		left:10%;
		right:10%;
		padding:3rem;
		border-radius:5px;
		width:500px;
		z-index:66;
		background:white;
			border:2px solid black;
		box-shadow:0px 0px 5px 8px rgba(22,22,22,0.8);
	}
	
	/* =============================================== */
	/* LAYOUT */
	/* =============================================== */
	
	#container {
		position: relative;
	}
	


	#links {
		height:100vh;
		min-height:100vh;
		background-color:black;
		background-image:url(bilder/holliger_visualisierung2.jpg);
		background-size:cover;
		background-position: center;
		width:25%;
		position:fixed;
		
	}
	#links a{
		display:block;
		color:white;
		opacity:1;
	}
	#links a:hover{
		color:black;
		opacity:0.7;
	}

	#links li {
		display:block;
		padding:1rem 3rem;
		font-size:1.4rem;
		margin-left:0;
		list-style-type:none;
	}

fieldset {
	padding:1rem;
	margin-bottom:1rem;
	border-radius:5px;
	border:1px solid lightgray;
}
legend {
	padding:0.3rem 1rem;
	margin-left:0rem;
	font-size:0.9rem;
	border-radius:5px;
	background:lightgray;
	color:darkslategray;
}
	.animate_start_links {
		left:0;
		top:0;
		opacity:0;
		/* animationen */
		animation-name: links_reinfahren;
		animation-duration: 3s;
		animation-delay: 0s;
		animation-fill-mode: forwards;
	}

	



	@keyframes links_reinfahren {
		0%   {opacity:0; width:100%; }
		80%   {opacity:1; width:100%; }
		100% {opacity:1; width:20%; }
		/**/
	}
	
	
	#rechts {
		position:absolute;
		left:25%;
		top:0;
		min-height:100vh;
		background:rgba(255,255,255,1);
		font-size:1.4rem;
		padding:5rem;
	}
	

	#eintragneu, #eintrageditieren {
		display:none;
		position:absolute;
		top:1rem;
		right:1rem;
		z-index:22;
		background:white;
	}



	.animate_start_rechts {
		opacity:0;
		/* animationen */
		animation-name: rechts_reinfahren;
		animation-duration: 2s;
		animation-delay: 3s;
		animation-fill-mode: forwards;
	}
	@keyframes rechts_reinfahren {
		0%   { opacity:0; }
		100% { opacity:1; }
	}



	
	input, select, textarea {
		background:rgba(222,222,222,0.8);
		padding:0.4rem;
		font-size:1.4rem;
		margin:0.5rem 0rem;
		width:100%;
	}
	


	
	#rechts h1 {
		margin:1rem 0rem;
	}
	#rechts h2 {
		margin:1rem 0rem;
		padding:2rem;
	}
	#rechts h3 {
	}


	#rechts h3 {
		font-size:1.5rem;
		font-weight:normal;
		color:darkslategray;
		background:rgba(255,255,255,0.8);
        transition:ease 0.4s all;
		margin:0rem 0rem;
		padding:0.5rem 0rem;
	}
	#rechts h3:hover {
		color:white;
		background:darkslategray;
        transition:ease 0.3s all;
	}



	#rechts section {
		min-height: 100vh;
		height:100%;
		width:100%;
		min-width:100%;
		padding:1rem;
	}
	
	article {
		margin:1rem 0rem;
		background:rgba(255,255,255,1);
		display:flex;
		padding:1rem;
		justify-content:space-between;
		flex-grow:1;
		grid-gap:0.5rem;
		min-height:180px;
		
		position:relative;
	}

	  .article_bild_container  {
        border:1px solid darkslategray;
        border-radius:3px;
		height:180px;
        width:33%;
         /* damit absolute funktioniert */
        position:relative;
        overflow:hidden; /* damit ausserhalb weg ist */
		cursor:pointer;
    }

	.article_bild_container a {
        border:1px solid pink;
        object-fit:cover;
        width:100%;
        height:100%;
		display:block;
	}

   .article_bild {
        /* bilder nehmen volle groesse des bildercontainers an */
        transition:ease 0.6s all;
        object-fit:cover;
        width:100%;
        height:100%;
    }
    .article_bild_container img:hover {
        opacity:0.8;
        transition:ease 0.4s all;
        transform:scale(1.1);
    }
	.article_inhalt  {
        border-bottom:1px dashed darkslategray;
        border-top:1px dashed darkslategray;
		width:67%;
		font-size:1rem;
    }
	.article_inhalt h3  {
		margin:0;
		line-height:1.3rem;
		font-size:1.3rem;
    }

	.editicons {	
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:center;
		font-size:0.8rem;
		position:absolute;
		top:0;
		right:0;
		background:rgba(255,255,255,0.95);
	}
	.editicons hr {
		padding:0.1rem;
		width:100%;
	}
	.editicons .fas {
		font-size:0.8rem;
		padding:0.4rem;
		border:1px solid gray;
		border-radius:5px;
		margin:0.5rem;
	}

    audio {
		filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
		width: 400px;
		height:30px;
		margin-top:1rem;
	}

	#links, #rechts {
		/*transition:all ease-in-out 0.5s;*/
	}

	
	#rechts form {
		margin:0rem 5rem;
		background:rgba(222,222,222,0.4);
		padding:2rem;
		max-width:70%;
	}
	
	
	/* =============================================== */
	/* SECTIONS */
	/* =============================================== */
	

	
	
	/*
	@media screen and (max-width: 992px) {
		
		
		#links {
			width:30%;
			transition:all ease-in-out 0.5s;
		}
		#rechts {
			left:30%;
			width:70%;
			transition:all ease-in-out 0.5s;
			text-align:left;
		}
		
		#links:hover  {
			width:60%;
		}
		#links:hover  {
		}
		#links:hover + #rechts  {
			transition:all ease-in-out 0.5s;
			width:40%;
			left:60%;
			opacity:0.7;
		}
		
		
		#rechts section {
			padding:1rem;
		}
		
		
	}
	
	*/