* ******************definition der schriftart************************** */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 900;		/*schriftdicke ist variabel*/
    font-display: swap;
    src: url("../fonts/jost/Jost-VariableFont_wght.woff2") format("woff2");
}

@font-face {
    font-family: "Jost";
    font-style: italic;
    font-weight: 100 900;		/*schriftdicke ist variabel*/
    font-display: swap;
    src: url("../fonts/jost/Jost-Italic-VariableFont_wght.woff2") format("woff2");
}

/*Reset*/
* {					
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /*font-size: 100%;*/
	/*font-family: 'Audiowide', sans-serif;*/	/* ganze site verwendet die importierte schriftart*/
	font-size: 100%;
    font-family: 'Jost', sans-serif;
	font-style: italic;
}

/** Breakpoints */

/** 1200px oder schmaler */
@media (max-width: 75em) {
    
}
/** 992px oder schmaler */
@media (max-width: 62em) {
    
}
/** 768px oder schmaler */
@media (max-width: 48em) {
    
}
/** 576px oder schmaler */
@media (max-width: 36em) {
    
}
.container {
	max-width: 75rem;		/* 1rem = 16px --> 75 * 16 = 1.200px*/
	margin: 0px auto;	/* mittig zentriert*/
}

.header {
    height: 100vh;
	background-color:linear-gradient(#39395e), (#7d7def);
	background-color:#000180;
	min-height: calc(13rem + 32vw);     /* CALC ersetzt die media-querys! 13+16px=208px + 370px = 580px, je nach monitorhöhe */
	position: relative;
    overflow:auto;
	animation:  code-fly-in 10s ease-in-out 0s 1 both,
		        welcome-content 5s ease-in-out 0s 1 both;
}

/** 1200px oder schmaler */
@media (max-width: 75em) {
    .header {
        height: calc(18rem + 32vw); 
    }
}

@keyframes code-fly-in {
	0% {
	    background-image:  url("../images/Code-Picture.jpg"); 
		background-size: cover;
		opacity: 0.3;
	}
	80% {
		background-image:  linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("../images/heide_02.jpg");
		opacity: 0.4;
	}
	90% {
		background-image:  linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("../images/heide_02.jpg");
		opacity: 0.8;
	}
	100% {
		background-image:  linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url("../images/heide_02.jpg");
		background-size: cover;
		opacity: 0.9;
	}	
}
@keyframes welcome-content {
	0% {
		background-size: cover;
		opacity: 0;
	}
	100% {
		height: 100vh;
		background-size: cover;
		opacity: 1.0;
		color: white;
		background-position: center;
		text-shadow: 0 0 0.5rem black;				/* erhöht d. kontrast, schrift ist besser lesbar */
	}
}
.navigation__list-item {						/* styling der navigationsleiste */
	list-style-type: none;
	display: block;
	float: left;								/* elemente umfließen einander */
}
.navigation__list-item-picture {				/* Porträt-Bild */
	position: absolute;
	margin-top: 3.5rem;
	margin-left: 3rem;
	margin-right: 1rem;
	margin-bottom: 0.5rem;
	border-style: solid;
	border-width: 2px;
	border-color: white;
	border-radius: 5px;
}

@media (max-width: 56em) {                      /* blendet das Porträt-Bild ab < 970px aus */
    .navigation__list-item-picture{
        display: none;
	}
}
.navigation__list-item--menu {
	float: right;
	font-size: 3rem;
}
.navigation__list-item-link {
	color: white;
	text-decoration: none;
	padding: 0.5rem 0.25rem 0.25rem 0.25rem;	/* definiert die anklickbare fläche */
	margin-top: 2rem;
	margin-left: 2rem;
	margin-right: 2rem;	
	display: block;
	text-shadow: 0 0 0.5rem black;				/* erhöht d. kontrast, schrift ist besser lesbar */
}
.navigation__list-item-link:hover {
	 border-bottom: 0.15rem solid rgb(0, 226, 156);
	/*opacity: 0.75;*/
}
.navigation__list-item--menu .navigation__list-item-link {
	margin-top: 0.4rem;					    	/* rückt den menu-button dichter a.d. ob. rand, ausrichten üb. d. WebInspector */
	 
}
.navigation__list-item--menu .navigation__list-item-link:hover {
	 border-bottom: none;						/* hovern, der menu-button wird nicht unterstrichen */
	 color: rgb(200, 200, 200);
}
.navigation__list-item-link--logo {
	margin-top: 2rem;							/* rückt das logo dichter a.d. ob. rand */
}
.navigation__list-item-link--logo:hover {		/* logo - styling */
	border-bottom: none;
    color: rgb(200, 200, 200);
}
.navigation__list-item-logo {
	width: 4rem;
	height: 4rem;
}
.navigation__list-item-logo {
    fill: currentColor;				/* "currentColor" verwendet die aktuelle schriftfarbe SEHR INTERESSANT!!! */
}

.header__heading-container {
	clear: both;					/* dieses element soll die anderen nicht mehr umfließen */
}

.header__heading-main {
	font-weight: 700;				/* Abschnitt 07 */
	padding-top: 3rem;
    line-height: 92%;				/* zeilenabstand der überschrift */
	font-size: 7rem;
	text-align: center;				/* text ist mittig ausgerichtet */
	color:white;
	text-transform: uppercase;		/* wandelt den text in großbuchstaben um */
	/* text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); */
	text-shadow: 0px 0px 10px yellow;
	
	animation-name: header__heading-main-font-weight;	/*animation der überschrift*/
    animation-delay: 0.75s;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

@keyframes header__heading-main-font-weight {			/*animation der überschrift*/
    0% {
        opacity: 0;
        font-weight: 100;
    }
    100% {
        opacity: 1;
        font-weight: 700;
    }
}

@media (max-width: 62em) {          /* verkleinert die überschrift ab width: 992px */
    .header__heading-main {
        font-size: 6rem;
    }
}
@media (max-width: 58em) {          /* verkleinert die überschrift ab width: 930px */
    .header__heading-main {
        font-size: 5rem;
    }
}
@media (max-width: 56em) {          /* verkleinert die überschrift ab width: 896px */
    .header__heading-main {
        font-size: 4rem;
    }
}
@media (max-width: 51em) {          /* verkleinert die überschrift ab width: 820px */
    .header__heading-main {
        font-size: 3rem;
    }
}
@media (max-width: 47em) {          /* verkleinert die überschrift ab width: 760px */
    .header__heading-main {
        font-size: 2rem;
    }
}
@media (max-width: 43em) {          /* verkleinert die überschrift ab width: 700px */
    .header__heading-main {
        font-size: 1rem;
		/* text-align: left;
		margin-left: 8em; */
    }
}

.header__heading-sub {
	margin-top: 1rem;
    font-size: 1.5rem;
    letter-spacing: 0.25rem;		/* abstand der buchstaben in einer zeile */
    text-align: center;
    color: white;
    text-transform: uppercase;		/* wandelt den text in großbuchstaben um */
    /* text-shadow: 0 0 0.5rem black; */	/* erhöht den kontrast */
	text-shadow: 0px 0px 10px yellow;
	animation-name: header__heading-sub-font-weight;	/*animation der überschrift*/
    animation-delay: 1s;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

@keyframes header__heading-sub-font-weight {			/*animation der überschrift*/
    0% {
        opacity: 0;
        font-weight: 100;
    }
    100% {
        opacity: 1;
        font-weight: 500;
    }
}

@media (max-width: 62em) {          /* verkleinert die überschrift ab width: 992px */
    .header__heading-sub {
        font-size: 1.4rem;
    }
}
@media (max-width: 58em) {          /* verkleinert die überschrift ab width: 930px */
    .header__heading-sub {
        font-size: 1.3rem;
    }
}
@media (max-width: 56em) {          /* verkleinert die überschrift ab width: 896px */
    .header__heading-sub {
        font-size: 1.2rem;
    }
}
@media (max-width: 51em) {          /* verkleinert die überschrift ab width: 820px */
    .header__heading-sub {
        font-size: 0.8rem;
    }
}
@media (max-width: 47em) {          /* verkleinert die überschrift ab width: 760px */
    .header__heading-sub {
        font-size: 0.7rem;
    }
}
@media (max-width: 43em) {          /* verkleinert die überschrift ab width: 700px */
    .header__heading-sub {
        font-size: 0.7rem;
		/* text-align: left;
		margin-left: 8em; */
    }
}

.header__welcome-content {
	margin-top: 1.5rem;
	margin-right: 1rem;
	margin-left: 3rem;
	font-size: 1rem;
    letter-spacing: 0.10rem;		/* abstand der buchstaben in einer zeile */
    text-align:left;
    color: white;
   /*  text-shadow: 0 0 0.9rem black; */	/* erhöht den kontrast */
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
	position: relative;
}

.header__welcome-content-a {
	color: red;
}

@media (max-width: 48em) {
    .header__welcome-content {
        font-size: 0.8rem;
    }
} 

.main-footer {
	color:blanchedalmond;
	margin-bottom: 5rem;
}

a {
	text-decoration: none;
	color:aqua;
}

a:hover {
	text-decoration: none;
	color:red;
	/* font-size: 1.1rem; */
}