/* ======================================== Grundformatierung ============== */
* {
margin: 0;
padding: 0;
font-family: 'Cairo', sans-serif;
font-size: 1em;
box-sizing: border-box;
}

html {
font-size: 0.625em;
}

@font-face {
font-family: "Cairo";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(./fonts/cairo-v9-latin-600.woff2);
src: url(./fonts/cairo-v9-latin-600.woff);
}

body {
font-family: 'Cairo', sans-serif;
font-size: 1.6rem;
margin: 0.8rem;
display: flex;
flex-direction: column;
}

a:link {
color: white;
text-decoration: none;
padding: 0.2rem;
}

a:visited {
color: white;
}

a:hover {
background-color: white;
color: blue;
border-color: white;
border-radius: 0.3rem;
}

#aktiv a {
background-color: white;
color: blue;
border-color: white;
border-radius: 0.3rem;
}

main>section>form {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 2.0rem;
min-width: 60.0rem;
font-size: 1.8rem;
}

main>section>form>input, main>section>form>textarea, main>section>form>button {
font-family: 'Cairo', sans-serif;
font-size: 1.6rem;
border-color: blue;
border-width: 0.3rem;
border-style: solid;
border-radius: 0.3rem;
resize: none;
margin-bottom: 1.5rem;
padding-left: 1rem;
padding-right: 1rem;
}

form>textarea {
min-height: 20.0rem;
}

h1 {
align-self: center;
font-size: 3.2rem;
text-decoration: underline blue;
/* scroll-margin-top: 100px; */

}
/* ======================================== Grundformatierung Ende ==== */

/* ======================================== Header ==================== */
header {
/* border: yellow 3px solid; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: space-between;
line-height: 3.4rem;
}

header>img, header>ul {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}

header>img {
width: auto;
height: 10rem;
}

header>ul>li {
font-size: 1.8rem;
}

header>ul>li::first-letter {
font-size: 2.8rem;
color: blue;
font-weight: bold;
}
/* ======================================== Header Ende =============== */

/* ======================================== Navigation ================ */
nav {
background: blue;
color: white;
border-radius: 0.3rem;
padding: 0.8rem;
}

nav>ul {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap-reverse;
justify-content: flex-start;
list-style-type: none;
}

nav>ul>li {
margin-right: 1.2rem;
}

nav>ul>form>input {
font-family: 'Cairo', sans-serif;
font-size: 1.6rem;
border: 0;
}

nav>ul>form {
margin-left: auto;
font-family: 'Cairo', sans-serif;
font-size: 1.6rem;
}

nav>ul>form>button {
font-family: 'Cairo', sans-serif;
font-size: 1.6rem;
background: white;
border: 0;
border-radius: 0.7rem;
color: blue;
padding: 0rem 1.6rem;
}
/* ======================================== Navigation Ende =============== */

/* ======================================== Main ========================== */
main {
flex: 1;
min-height: 80rem;
scroll-margin-top: 30rem;
}

section {
display: flex;
flex-wrap: wrap;
justify-content: center;
/* border: yellow 3px solid; */
}

figure {
padding: 0.8rem;
margin: 0rem;
/* border: yellow 3px solid; */
}

figure>img {
border: blue 0.3rem solid;
width: 22.5rem;
height: 20.0rem;
object-fit: cover;
}

figcaption {
margin: 0rem;
padding: 0rem;
}

main h3, main p {
text-align: center;
}

#anfangStartseite img {
border: blue 0.3rem solid;
max-width: 40%;
height: auto;
object-fit: cover;
margin-top: 5rem;
}
/* ======================================== Main Ende ====================== */

/* ======================================== Footer ========================= */
footer {
display: flex;
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
/* border: yellow 3px solid; */
}

footer>ul {
/* border: red 3px solid; */
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
background-color: blue;
padding: 0.8rem;
border-radius: 0.3rem;
}

footer>a {
align-self: flex-end;
margin-bottom: 0.5rem;
background-color: blue;
border-radius: 0.3rem;
margin: 0.3rem;
}

footer>a:link {
padding: 0.3rem;
}

footer>a:hover {
background-color: white;
color: blue;
border: blue 1px solid;
border-radius: 0.3rem;
}

footer ul li {
list-style-type: none;
margin: 0.3rem;
}
/* ======================================== Footer Ende =================== */

/* ======================================== Mobile ======================== */
@media only screen and (max-width:60rem)
{

header {
flex-direction: column;
align-content: center;
align-items: center;
}

nav {
background-color: white;
}

nav>ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
align-items: stretch;
justify-content: center;
align-content: space-around;
/* align-content: space-between; */
}

nav>ul>li {
border-radius: 0.8rem;
border-style: solid;
border-width: 0.1rem;
font-size: 1.6rem;
margin: 0.2rem;
text-align: center;
background-color: blue;
padding: 0.2rem;
}

nav>ul>form {
visibility: hidden;
}

#anfangStartseite img {
max-width: 100%;
height: auto;
}

a:link {
color: white;
text-decoration: none;
padding: 0.0rem;
padding-right: 0.3rem;
padding-left: 0.3rem;
}

a:active {
background-color: white;
color: blue;
border-color: white;
border-radius: 0.3rem;
}

a:hover {
background-color: white;
color: blue;
border-color: white;
border-radius: 0.3rem;
}

main {
scroll-margin-top: 5.5rem;
}

}
/* ======================================== Mobile Ende =================== */

main>section {
flex-direction: column;
align-items: center;
}

main>section>form {
min-width: 0rem;
align-items: stretch;
}

/* h1 {
scroll-margin-top: 0rem;
} */


a:link {
color: blue;
text-decoration: none;
padding: 0.2rem;
}

a:visited {
color: blue;
}

a:hover {
background-color: white;
color: blue;
border-color: white;
border-radius: 0.3rem;
}

#aktiv a {
background-color: white;
color: blue;
border-color: white;
border-radius: 0.3rem;
}