/* ------------- */
/* Grundeinstellungen */
/* ------------- */

/* base */
@charset "UTF-8";

* {
    margin: 0; /* für alle elemente außenabstände auf null (für elemente neu definieren) */
    box-sizing: border-box; /* rahmen und innenabstände innerhalb der definierten breite/höhe berechnet (wird nicht durch padding/borders vergrößert) */
}
 
html {
    /* schriftvoreinstellungen des users übernehmen */
    font-size: 100%;
    scroll-behavior: smooth; /* nach oben scrollen und nicht springen */
}
 
/* "neue" html5 elemente */
header, section, main, nav, aside, article, footer, figure, figcaption {
    display: block; /* als blockelemente beschrieben */
    padding: 0; /* keine komischen abstände */
}

main, nav, header, footer {
    padding: 4rem 10vw;
}


body {
    font-family: Arial, Helvetica, sans-serif;
    color:#e1e3eb;
    font-size: 1rem;
    line-height: 1.6;
    background-color: #0e303d;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-bottom: .75rem;
}

h1 {
    font-size: 2.6rem;
}

h2 {
    font-size: 2.15rem;
}

::selection {
    color: #e1e3eb;
    background-color: #1a779c;
}


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






/* ------------- */
/* Navigation */
/* ------------- */

nav {
    padding-top: 1rem; /* padding hier nochmal anpassen */
    padding-bottom: 1rem;
    background-color: #f0f3fbbb;
    position: fixed;
    top: 0;
    /* width: 100%; */    
    left: 0;
    right: 0;
}

/* nav ul */
/* nav div > ul */
nav ul:first-child {
    list-style: none;
    padding: 0;
}

/* nav ul li a */
/* nav [href^="html"] */
nav a[href^="html"] {
    text-decoration: none;
    color: #ad2981;
    text-transform: uppercase;
    font-weight: bold;
}

nav ul:nth-child(1) li {
    float: right;
    margin-right: 2rem;
    line-height: 40px;

}

nav > a {
    float: left; /* formular rutscht automatisch in die mitte */
}


/* form element */
input {
    border-radius: 25px;
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
}

/* alle input elemente außer type=image */
input:not(input[type="image"]) {
    background-color: white;
    border: 2px solid #283841;
}











/* ------------- */
/* Header */
/* ------------- */

header {
    background-color: #e1e3eb;
    color: #0e303d;
    min-height: 70vh;
    background-image: linear-gradient(140deg,rgba(247, 205, 18, 1) 0%, rgba(247, 205, 18, 0) 70%), url("../images/water-bg.jpeg");
    background-size: cover;
    background-attachment: fixed;
    clear: both;
}

header div {
    padding-top: 6rem;
}

header li:nth-child(-n +5) {
    list-style-image: url(../images/check-badge-svgrepo-com.svg);
}

header li:last-child {
    list-style-image: url(../images/arrow-right-svgrepo-com.svg);
}

header li {
    padding-bottom: .5rem;
}


/* Header Button */
header a {
    display: inline-block;
    background-color: #ad2981;
    color: #e1e3eb;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin-top: 1rem;
    padding: 1rem 1.5rem;
    transition: all .5s ease-out;
}

header a:hover {
    background-color: #1a779c;
    text-decoration: underline;
}









/* ------------- */
/* Main */
/* ------------- */



main > p {
    width: 45%;
}

main > p:first-of-type {
    float: left;
}

main > p ~ p {
    float: right;
}

main > table {
    clear: both;
}


p {
    padding-bottom: 2rem;
}

p::first-letter {
    font-size: 2rem;
    font-family: 'Times New Roman', Times, serif;
    color: #f7cd12;
    font-style: normal;
}

p::first-line {
    font-style: italic;
}



/* Tabelle */

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border-bottom: 2px solid #f7cd1267;
    border-top: 2px solid #f7cd1267;
    text-align: left;
    padding: .3rem .35rem;
} 

thead {
    background-color: #1a779c;
}

tr:nth-child(even) {
    background-color: #081b22;
}

tbody tr {
    transition: all .3s ease-out;
    cursor: pointer;
}

tbody tr:hover {
    background-color: #1a779c;
}

tbody td:nth-child(4) span {
    background-color: #68AB82;
    color: white;
    border-radius: 15px;
    padding: .15rem .5rem;
}










/* ------------- */
/* Aside */
/* ------------- */


aside {
    background-color: #1a779c;
    padding: .5rem;
    box-shadow: 0 0 5px rgba(100, 100, 100, .5);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    text-transform: uppercase;
    position: fixed;
    right: 0;
    top: 50vh;
}

aside:hover {
    text-decoration: underline;
    font-style: italic;
}












/* ------------- */
/* Footer */
/* ------------- */


footer {
    background-color: #e1e3eb;
    color: #0e303d;
    background-image: linear-gradient(140deg,rgba(247, 205, 18, 1) 0%, rgba(247, 205, 18, 0) 70%), url("../images/water-bg.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    gap: 2rem;
    padding: 4rem;
}

footer li:first-of-type {
    list-style: none;
    font-weight: bold;
}

footer li:nth-of-type(n + 2) {
    color: #ad2981;
    list-style-image: url(../images/drop-energy-fuel-svgrepo-com.svg);
}


footer ul li {
    list-style-position: inside;
}

footer ul {
    padding: 0;
    flex: 1;
}


footer a:only-child::after {
    content: "";
    background-image: url("../images/arrow-right-up-358-svgrepo-com.svg");
    padding: .35rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    margin-left: .35rem;
}

footer a {
    color: inherit;
    text-decoration: none;
    transition: all .25s ease-in;
}

footer a:link {
    color: #ad2981;
}

footer a:visited {
    color: #1a779c;
}

footer a:focus {
    font-style: italic;
}

footer a:hover {
    color: #ad2981;
    background-color: #e1e3eb;
    border: 1px solid #ad2981;
    padding: .25rem;
}

footer a:active {
    font-style: italic;
    text-decoration: underline;
}