html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* fonts */

h1,
h2,
h3,
h4 {
    font-family: "Open Sans", sans-serif;
}

p,
ul,
ol,
li,
a,
span,
td {
    font-family: "Roboto", sans-serif;
}

/* font-size */
p,
li {
    font-size: calc(13px + (16 - 13) * ((100vw - 280px) / (1600 - 280)));
}

h1 {
    font-size: calc(24px + (30 - 24) * ((100vw - 280px) / (1600 - 280)));
}

h2 {
    font-size: calc(22px + (28 - 22) * ((100vw - 280px) / (1600 - 280)));
}

h3 {
    font-size: calc(16px + (22 - 16) * ((100vw - 280px) / (1600 - 280)));
    padding-bottom: calc(4px + (8 - 4) * ((100vw - 280px) / (1600 - 280)));
}

/* line-height */

p {
    line-height: calc(18px + (26 - 18) * ((100vw - 280px) / (1600 - 280)));
}

li {
    line-height: calc(17px + (25 - 17) * ((100vw - 280px) / (1600 - 280)));
}

h1 {
    line-height: calc(32px + (38 - 32) * ((100vw - 280px) / (1600 - 280)));
}

h2 {
    line-height: calc(30px + (36 - 30) * ((100vw - 280px) / (1600 - 280)));
}

h3 {
    line-height: calc(22px + (28 - 22) * ((100vw - 280px) / (1600 - 280)));
}

/* Sonstige */

hr {
    width: 33%;
    margin: 0 auto;
}

article li {
    padding-bottom: 0.4vw;
}

a {
    text-decoration: none;
}

p > a {
    color: #940000;
}

p > a:hover {
    text-decoration: underline;
}


/* Unterstrichene Überschriften */

.underline {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 15'%3E%3Crect x='0' y='4' width='80' height='3' fill='%23940000'/%3E%3Crect x='0' y='12' width='40' height='3' fill='%23e7ce79'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 133px 16px;
    padding-bottom: 20px;
}

.mg-underline {
    margin-bottom: 30px;
}


/* Colors */

.midblue {
    color: #304b73;
}

/* Header Logo */

#logo {
    display: flex;
    width: 98vw;
    padding: 1.2vw;
}

#logo > a {
    flex-grow: 2;
}


/* contact */

.contact-icon {
    display: grid;
    justify-items: center;
    height: 70px;
    font-weight: bold;
    font-size: 14px;
    color: #304b73;
}

.contact {
    display: flex;
    justify-content: space-around;
    gap: 2%;
    align-self: center;
    flex-grow: 1;
}

.contact > div {
    text-align: center;
}

.contact > div > p {
    font-size: 90%;
    font-weight: bold;
    line-height: 1.4;
}

/* img */

.cut {
    height: 100%;
    object-fit: cover;
}

/* Header Nav */
nav {
    display: flex;
    justify-content: space-between;
    border-top: 4px solid #940000;
    background-color: #a0b7d9;
    border-bottom: 20px solid #d4e6ff;
    position: sticky;
    top: 0;
    }

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 1.3rem;
    position: relative;
}

#nav-menu {
    display: flex;
    margin-right: 3vw;
    padding-left: 2vw;
}

#nav-menu > li {
    display: inline-flex;
    list-style-type: none;
}

#nav-menu > li > a {
    color: #304b73;
    padding: calc(15px + (18 - 15) * ((100vw - 320px) / (1600 - 280))) calc(18px + (22 - 18) * ((100vw - 320px) / (1600 - 280)));
    font-weight: 600;
}

#nav-menu > li > a:hover {
    background-color: #304b73;
    color: #fff;
}

#nav-menu > li > a[aria-current="page"] {
    background-color: #304b73;
    color: #fff;
}


/* === HAMBURGER-MENÜ STYLES === */

/* Hamburger-Icon Linien */
.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background-color: #304b73;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
}

/* Hamburger-Icon Animation beim Aktivieren */
.menu-active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 7px);
}

.menu-active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.menu-active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -7px);
}


/* buttons */

a.btn-blue {
    color: #e7ce79;
    padding: 11px 22px;
    background-color: #304b73;
    width: max-content;
    border-radius: 3px;
    font-weight: bold;
}

/* colors */
.bg-lightblue {
    background-color: #d4e6ff;
}

.bg-beige {
    background-color: #f4f4f2;
}

/* main */

.main-pd {
    padding: 6% 0;
}

.full-content {
    padding: 6% 0;
}

.full-content-top {
    padding-top: 6%;
}

/* sections & articles */

.max-width-1 {
    grid-template-columns: 1fr;
    max-width: 1140px;
    margin: 0 auto;
}

.max-width-2 {
    grid-template-columns: 1fr 1fr;
    max-width: 1140px;
    margin: 0 auto;
}

section,
article {
    display: grid;
}

.sec-center {
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    max-width: 1150px;
    gap: 30px;
}

.sec-center-small {
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    max-width: 1150px;
    padding-left: 2%;
    padding-right: 2%;
}

.column {
    flex-direction: column;
}

.center {
    justify-content: center;
}

.hl-top {
    padding-top: calc(1.5vw + (2.5 - 1.5) * ((100vw - 280px) / (1600 - 280)));
}

.hl-bottom {
    padding-bottom: calc(1.5vw + (2.5 - 1.5) * ((100vw - 280px) / (1600 - 280)));
}

.hl-top-small {
    padding-top: calc(0.5vw + (1.5 - 0.5) * ((100vw - 280px) / (1600 - 280)));
}

.hl-bottom-small {
    padding-bottom: calc(0.5vw + (1.5 - 0.5) * ((100vw - 280px) / (1600 - 280)));
}

.pd-left {
    padding-left: calc(3.2vw + (5.2 - 3.2) * ((100vw - 280px) / (1600 - 280)));
}

.sec-pd-lefrig-4 {
    padding-left: 4vw;
    padding-right: 4vw;
}

.sec-top {
    padding-top: calc(5vw + (10 - 5) * ((100vw - 280px) / (1600 - 280)));
}

.sec-bottom {
    padding-bottom: calc(5vw + (10 - 5) * ((100vw - 280px) / (1600 - 280)));
}

.sec-bottom-small {
    padding-bottom: calc(3vw + (6 - 3) * ((100vw - 280px) / (1600 - 280)));
}

.sec-top-small {
    padding-top: calc(3vw + (6 - 3) * ((100vw - 280px) / (1600 - 280)));
}

.kachel {
    align-content: center;
    padding: 2.2rem;
    background-color: #f4f4f2;
    gap: 1.5rem;
}

.col-1-550 {
    columns: 1;
    align-content: start;
    max-width: 550px;
    margin: 0 auto;
}

.col-1-750 {
    columns: 1;
    align-content: start;
    max-width: 750px;
    margin: 0 auto;
}

.col-2 {
    display: block;
    columns: 2;
    column-gap: 50px;
}

.grid-2fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-3fr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-2-1fr {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.gap-1 {
    gap: 1vw;
}

/* footer */

footer {
    background-color: #304b73;
    width: 100vw;
    padding: 10px 1.6vw;
}

footer > p {
    text-align: right;
}

footer > p > a {
    color: #fff;
}

footer > p > a:nth-child(2) {
    margin-left: 16px;
}


@media (max-width: 1000px) {

    #logo {
        width: 100vw;
    }

    .contact {
        flex-direction: column;
        align-items: end;
    }

    .contact > div {
        text-align: left;
        display: inline-flex;
    }

    .contact-icon {
        grid-template-columns: 1fr 5fr;
        align-items: center;
        justify-items: start;
        height: auto;
    }

    .contact-svg {
        margin-right: 8px;
        margin-bottom: 7px;
        width: 30px;
    }

    .midblue {
        align-self: center;
    }

    .contact > div > p {
        font-size: 75%;
    }

    #logo > a > img {
        max-width: 400px;
    }
}

@media (min-width: 651px) {

    .contact-mobile {
        display: none;
    }

    .break {
    -webkit-column-break-before: always;
    -moz-column-break-before: always;
    break-before: always;
    break-before: column;
    }
}


@media (max-width: 650px) {

    #logo {
        margin: 0 auto;
        text-align: center;
    }

    .contact-icon {
        grid-template-columns: 1fr 11fr;
        font-weight: normal;
        font-size: 12px;
    }

    .menu-toggle {
        display: block;
    }

    .mg-underline {
        margin-bottom: 20px;
    }

    .top-nav {
        height: 110px;
        align-items: center;
        padding: 8px;
    }

    .menu-toggle {
        height: max-content;
        align-self: center;
    }

    #nav-menu {
        position: fixed;
        top: 86px;
        right: -100%;
        width: 210px;
        height: max-content;
        background-color: #304b73;
        flex-direction: column;
        transition: right 0.3s ease-in-out;
        z-index: 2;
        margin-right: 0;
        padding: 3%;
    }

    #nav-menu.menu-open {
        right: 0;
    }

    #nav-menu > li {
        display: block;
        text-align: center;
        margin: 4px 0;
    }

    #nav-menu > li > a {
        display: block;
        color: #fff;
        font-size: 16px;
        padding: 16px 0;
        border-radius: 2px;
        transition: background-color 0.3s ease;
    }

    #nav-menu > li > a[aria-current="page"] {
        background-color: #536e95;
    }

    #nav-menu > li > a:hover {
        background-color: #536e95;
    }

    .kachel {
        padding: 1.2rem;
    }

    .contact-mobile {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

    .contact-mobile > div {
        display: inline-flex;
        align-items: center;
        height: 25px;
    }

    .contact-mobile > div > .midblue {
        line-height: 1.25;
    }

    .contact2-svg {
        width: 22px;
        margin-right: 4px;
    }

    .sec-center,
    .max-width-2 {
        grid-template-columns: 1fr;
    }

    .contact {
        display: none;
    }

    #logo > a > img {
        max-width: 100%;
    }

    .cut {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .cut-small {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .revert > .cut {
        order: 2;
    }

    .col-2 {
        columns: 1;
    }

    .underline::before {
        bottom: max(3px, 2px);
    }

    .neue-spalte {
        margin-top: 3vw;
    }
}