* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --red: #D9000D;
    --lightred: #FEAEB3;
    --yellow: #FFBF00;
    --lightyellow: #F9E6AB;
    --grey: #CCCCCC;

    --title: 40px;
    --head: 34px;
    --sub: 24px;
    --copy: 16px;
}
@font-face {
    font-family: Telegraf;
    src: url(Telegraf_Regular_.woff);
}
/* ### - A - ### */
/* ### - B - ### */
body {
    font-family: Telegraf, sans-serif;
}
.bgyellow {background-color: var(--lightyellow);}
.bgred {background-color: var(--lightred);}
.bggrey {background-color: var(--grey);}
/* ### - C - ### */
.content-grid {
    grid-column: 1/7;
    grid-gap: 10px;
}
/* ### - D - ### */
/* ### - E - ### */
/* ### - F - ### */
form {
    display: flex;
    flex-direction: column;
    gap:20px;
}
form input[type="text"],
form input[type="email"],
form textarea {
    padding: 10px;
    font-family: Telegraf, sans-serif;
    font-size: var(--copy);
    border: 1px solid black;
}
form textarea {min-height: 250px;}
form input[type="submit"] {
    border: none;
    background-color: white;
    cursor: pointer;
    font-family: Telegraf, sans-serif;
    font-size: var(--copy);
    align-self: end;
}
footer {
    grid-column: 1/7;
    grid-row-start: 3;
    grid-row-gap: 20px;
    font-size: 14px;
}
footer p {
    font-size: 14px;
}
footer div {
    grid-column: span 6;
}
footer a {
    color: black;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}
footer li {
    list-style-type: none;
}
/* ### - G - ### */
.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
/* ### - H - ### */
html {scroll-behavior: smooth;}
.honeypot {
    position: absolute;
    left: -9999px;
}
header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--lightyellow);
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100vw;
    transition: 0.2s;
}
header.hidden {
    transform: translateY(-100px);
}
header .logo {
    grid-column: 2/3;
}
header .menu-button {
    color: white;
    background-color: black;
    padding: 10px;
    text-decoration: none;
    width: max-content;
    height: max-content;
    display: inline-block;
    justify-self: end;
}
h1, h2, h3 {
    font-weight: normal;
    grid-column: 1/7;
}
h1 {font-size: var(--title);}
h2 {font-size: var(--head);}
h3 {font-size: var(--sub);}
.half {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
}
.half section {
    grid-row: 1/3;
    grid-column: 1/2;
}
/* ### - I - ### */
img {display: block;}
/* ### - J - ### */
/* ### - K - ### */
.kontakt-cta {
    grid-column: 1/7;
}
.kontakt-btn {
    color: black;
    text-decoration: none;
    padding: 10px;
    border: 1px solid black;
    display: inline-block;
}
.kontakt-btn:hover {
    text-decoration: underline;
}
.kontakt {
    grid-column: span 6;
    background-color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.kontakt div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kontakt-daten p {
    font-size: var(--sub)!important;
}
#kontakt img {
    height: 50px;
    width: auto;
    align-self: baseline;
}
/* ### - L - ### */
.link {
    color: black;
    text-decoration: none;
    display: flex;
}
.link::after {
    content: url(pfeil.svg);
    margin-left: 10px;
}
.link:hover {
    text-decoration: underline;
}
.languages ul {
    display: flex;
    gap: 5px;
    list-style-type: none;
    font-size: 14px;
}
.languages a {
    color: black;
    text-decoration: none;
}
.languages a:hover {
    text-decoration: underline;
}
.languages li.active {
    text-decoration: underline;
}
.leistung-box {
    grid-column: span 6;
    background-color: white;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content  1fr max-content;
    grid-row-gap: 30px;
    font-size: var(--copy);
}
.leistung-box img {
    height: 50px;
    width: auto;
}
.leistung-cta {
    grid-column: 1/2;
}
.leistung-text ul {
    list-style-type: none;
}
.leistung-text li {
    border-top: 1px solid black;
    padding: 5px 0;
}
.leistung-text li:last-of-type {
    border-bottom: 1px solid black;
}
/* ### - M - ### */
.menu {
    background-color: black;
    padding: 20px;
    width: max-content;
    font-size: var(--title);
    position: fixed;
    top: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr;
    transform: translateY(-500px);
    transition: 0.4s;
}
.menu a {
    color: white;
    text-decoration: none;
}
.menu a:hover {
    text-decoration: underline;
}
.menu ul {
    list-style-type: none;
}
.menu-close {
    justify-self: end;
}
.menu-close img {
    height: 30px;
    transform: rotate(45deg);
}
/* ### - N - ### */
/* ### - O - ### */
/* ### - P - ### */
p {
    font-size: var(--copy);
    margin-bottom: var(--copy);
}
p:last-of-type {
    margin-bottom: 0;
}
/* ### - Q - ### */
/* ### - R - ### */
/* ### - S - ### */
section {
    padding: 50px 10px;
    grid-row-gap: 50px;
}
section img {
    width: 100%;
}
.span-3 {
    grid-column: span 6;
}
.span-4 {
    grid-column: 1/7;
}
.start {
    grid-column: span 6;
    background-color: var(--lightred);
    padding: 20px;
}
.start span {
    font-size: var(--title);
}
.start p {
    font-size: var(--sub);
}
/* ### - T - ### */
.text-block {
    grid-column: 1/7;
}
.text-block ul {
    font-size: var(--copy);
    margin-left: var(--copy);
    margin-bottom: var(--copy);
}
.text-block img {
    margin-bottom: var(--copy);
}
.team-box {
    grid-column: span 6;
    background-color: white;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 20px;
}
.team-box img {
    border-radius: 50%;
    grid-column: 1/2;
}
.team-box div {
    align-self: center;
}
.team-box p:first-of-type {
    margin-bottom: 10px;
}
.title {
    padding-top: 100px;
}
/* ### - U - ### */
/* ### - V - ### */
/* ### - W - ### */
/* ### - X - ### */
/* ### - Y - ### */
/* ### - Z - ### */

@media (min-width: 750px) {
    :root {    
        --title: 60px;
        --head: 38px;
        --sub: 24px;
        --copy: 16px;
    }
    header {
        padding: 20px;
    }
    .kontakt-cta {grid-column: span 1;}
    .half .text-block {
        grid-column: 1/4;
        grid-row: 2/3;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }
    .half .span-4 {
        grid-column: 4/7;
        grid-row: 1/3;
    }
    section {padding: 50px 20px;}
    .content-grid {
        grid-gap: 20px;
    }
    .leistung-box {
        grid-column: span 3;
    }
    .start {
        grid-column: span 2;
    }
    .team-box {
        grid-column: span 3;
    }
    .text-block {
        grid-column: 1/4;
    }
    .text-block.default {
        grid-column: 2/6!important;
    }
    .kontakt {
        grid-column: span 3;
    }
    .span-3 {
        grid-column: span 3;
    }
    footer {
        grid-column: 4/7;
        grid-row-start: 1;
        grid-row-gap: 50px;
    }
    footer div {
        grid-column: span 3;
        display: grid;
    }
}

@media (min-width: 1000px) {
    header {
        padding: 10px 40px;
    }
    .menu {padding: 40px;}
    section {padding: 50px 40px;}   
    .half .span-3 {
        grid-row: 1/3;
    }
    footer {grid-row: 2/3;} 
}

@media (min-width: 1350px) {
    :root {    
        --title: 60px;
        --head: 48px;
        --sub: 36px;
        --copy: 20px;
    }
    .logo {
        display: flex;
        justify-content: center;
    }
    .logo img {width: 50%;}
    section {
        padding: 70px 70px;
    }
    .content-grid {
        grid-gap: 40px;
    }
    .team-box {
        grid-column: span 2;
    }
    .leistung-box,
    .team-box,
    .start,
    .kontakt {
        padding: 50px;
    }
    .half .text-block {
        grid-column: 1/3;
    }
    .half .span-4 {
        grid-column: 3/7;
    }
    .kontakt-btn {
        padding: 20px 60px;
    }
    header .menu-button img {
        height: 25px;
    }
    .leistung-text li {
        padding: 10px 0;
        }
    .leistung-box img {
        height: 70px;
    }
    #kontakt img {
        height: 70px;
    }
}

@media (min-width: 1650px) {
    :root {    
        --title: 90px;
        --head: 70px;
        --sub: 40px;
        --copy: 20px;
    }
    section {
        padding: 100px;
    }
    header {
        padding: 20px 100px;
    }
    .leistung-box {
        grid-column: span 2;
    }
    .menu {
        font-size: var(--head);
    }
    .kontakt {gap: 50px}
    .kontakt div {gap: 20px;}
    .half .span-3 {grid-row: 1/3;}
}

@media (min-width: 2000px) {
    :root {    
        --title: 90px;
        --head: 70px;
        --sub: 40px;
        --copy: 20px;
    }
    section {
        padding: 150px;
    }
    header {
        padding: 20px 150px;
    }
    .leistung-box,
    .team-box,
    .start,
    .kontakt {
        padding: 60px;
    }
    .team-box {grid-gap: 40px;}
    .content-grid { grid-gap: 40px;}
    footer {font-size: 16px;}
    footer p {font-size: 16px;}
}