/*
SYNTAX CSS:

selector {
    proberty: value(s);
}

1) TAG selectors --> body,header, h1...
2) class selectors --> .class-x, .class-y, .class-z...
3) PSEUDOCLASS Selectors --> :
*/



 body {
     margin: 0;
     background-color: black;

     font-family: "ibarra-real-nova", sans-serif;
     font-weight: 400;
     font-style: normal;
 }



 .color-scheme4 h2 {
     padding: 0 0.2em;
 }



 header {
     border-bottom: solid 2px black;
     padding: 0 8em;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: black;
     background-size: cover;
     background-position: center;
     max-height: 40vh;

 }

 header h1 {
     display: flex;
     justify-content: flex-start;
 }


 h1 {
     font-size: 3.5em;
     text-align: center;
     color: white;
     text-transform: uppercase;
     margin: 0px;
     display: flex;
     justify-content: flex-start;
     margin-top: 35px;
     font-family: "gothiks-round", sans-serif;
     font-weight: 600;
     font-style: normal;
 }

 nav a {
     text-decoration: inherit;
     color: white;
     /* border-style:solid;
    border-width:1px;
    border-color:black;}
    */
     display: inline-block;
     font-size 1.5em;
 }


 nav a::after {
     content: "/";
     margin-left: 0.5em;
 }

 nav a:last-child::after {
     content: none;

 }

 nav {
     border-bottom: solid 1px white;
     padding: 14px 0 0 0;
 }

 .important {
     background-color: aqua
 }


 .current {
     background-color: black;
     color: white;
 }

 main {
     padding-top: 64px;
     padding-right: 16px;
     padding-bottom: 120px;
     padding-left: 16px;
 }

 .strich {
     border-top: solid 1px black;
     margin-bottom: 2em;
     padding: 0.5em 0;
     list-style: disc;
 }

 ul li::marker {
     color: rgb(60, 255, 208);
     /* Farbe der Punkte */
 }

 h2 {
     font-size: 2.5em;
     font-weight: normal;
     text-align: center;
     text-transform: uppercase;
     margin: 0;
     margin-bottom: 20px;
     font-family: "gothiks-round", sans-serif;
     font-weight: 600;
     font-style: normal;
 }

.highlight {
    background-color: transparent; /* Standard-Hintergrund */
    transition: background-color 0.3s ease; /* Weicher Übergang */
}

.highlight:hover {
    background-color: blue; /* Hintergrund wird blau */
    color: white; /* Optional: Textfarbe ändern */
}



 h3 {
     margin: 2em 0 1em;
     font-family: droid-sans, sans-serif;
     font-size: 2.1em;
     font-weight: 400;
     text-align: center;
     font-family: "gothiks-round", sans-serif;
     font-weight: 600;
     font-style: normal;
 }

 article {
     background-color: black;
     margin-bottom: 90px;
     margin-left: auto;
     margin-right: auto;
     padding: 30px 0px 60px 0px;
     max-width: 1100px;
     color: white;
 }

 p {
     margin: 0;
     font-size: 1.1em;
     margin-top: 1.5em;
     margin-right: 0;
     margin-bottom: 1.5em;
     margin-left 0;
     max-width: 100ch;
     margin-left: auto;
     margin-right: auto;
     padding: 2em 1em;
     line-height: 1.6em;
     border-bottom: solid 1px #9a9a9a;

     /*    border-top:solid 4px black;*/
 }

 ul {
     list-style: none;
     margin: 2em 2em 2em 2em;
     padding-left: 0;


 }

 li {
     border-top: solid 1px;
     padding: 1em 2em 3em;
     margin-bottom: 2em;
 }

 .wichtig {
     border-top: solid 4px black;
     border-bottom: solid 4px black;
     font-size: 1.8em;
     text-align: center;
     padding: 1.4em 4em 1.6em 4em;
     margin: 2em 0;

 }

 .wichtig:hover {
     background-color: rgb(60, 255, 208);
     color: blue;
     transition: 0.5s;
 }

 .wichtig1 {
     border-top: solid 4px black;
     border-bottom: solid 4px black;
     font-size: 1.8em;
     text-align: center;
     padding: 1.4em 4em 1.6em 4em;
     margin: 2em 0;

 }

 .wichtig1:hover {
     background-color: blue;
     color: rgb(60, 255, 208);
     transition: 0.5s;
 }

 .span {
     font-size: 1.8em;
     text-align: center;
     padding: 1.4em 4em 1.6em 4em;
     margin: 2em 0;
     transition: background 0.3s ease-out;
 }

 .span:hover {
     transition: 0.2s;
     background-color: rgba(11, 11, 201, 0.81);
 }

 figure {
     background-color: rgba(224, 224, 224, 0.37);
     margin: 50px 0px 50px 0px;
     padding-bottom: 20px;
 }

 figcaption {
     text-align: center;
     font-size: 0.8 em;
     margin-top: 1.5em
 }

 img {
     width: 100%
 }

 .container {
     margin: 2.5em 0;
     padding: 1em 0;
     background-color: #e5e5e5;
 }

 .item {
     margin: 0.5em;
     padding: 0.5em;
     background-color: black;
     color: white;
 }

 .display-inline .item {
     display: inline;
 }

 .display-inline-block .item {
     display: inline-block;
 }

 .display-flex .container {
     background-color: black;
     padding: 1em;
     border: solid 4px #e5e5e5;
 }

 .display-flex .item {
     background-color: white;
     color: black;
 }

 .display-flex .container {
     /* FLEXBOX-Eigenschaften:*/
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     min-height: 300px;
     align-items: center;
 }

 main a {
     color: white;
 }


 .image-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;

     margin: 0 0 2em;
     padding: 1.5em;
 }

 .green {
     color: rgb(60, 255, 208)
 }

 p a {
     text-decoration: underline;
     text-decoration-color: rgb(60, 255, 208);
 }

 p a:hover {
     color: rgb(60, 255, 208);
 }

 .image-container figure {
     flex-basis: 450px;
     flex-grow: 1;
     margin: 2px;
 }

 footer {
     padding: 20px 32px 20px 32px;
     background-color: black;
     color: white;
     font-size: 0.9em;
 }