/*Basis*/
* {
    margin: 0;
}

:root {
    --color-asa: #013D75;
    --color-wanzke: #4B8510;
    --color-black: #000;
    --color-white: #fff;
    --color-sec-accente: #F2F5F0;
    --color-pr-accente: #EFF3F5;

}

em {
    font-style: normal;
    color: var(--color-wanzke);
}

.info p em {
    font-style:none;
    color:var(--color-asa);
    font-family: 'Roboto';
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

a {
    text-decoration: none;
    color: var(--color-black);
}

.Boxed {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/*fonts*/
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('/assets/fonts/roboto-v32-latin-100.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('/assets/fonts/roboto-v32-latin-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/roboto-v32-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/roboto-v32-latin-500.woff') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/roboto-v32-latin-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('/assets/fonts/roboto-v32-latin-900.woff2') format('woff2');
}

/*background*/
.bg-asa {
    background-color: var(--color-asa);
}

.bg-wanzke {
    background-color: var(--color-wanzke);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-accente {
    background-color: var(--color-sec-accente);
}

.bg-pr-accente {
    background-color: var(--color-pr-accente);
}

/*color*/
.cl-asa {
    color: var(--color-asa);
}

.cl-wanzke {
    color: var(--color-wanzke);
}

.cl-white {
    color: var(--color-white);
}

.cl-accente {
    color: var(--color-sec-accente);
}

.cl-pr-accente {
    color: var(--color-pr-accente);
}

/*Typo*/
.hl-1 {
    font-family: 'Roboto';
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    /* 67.2px */
}

.hl-2 {
    font-family: 'Roboto';
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    /* 36.4px */
}

.hl-3{
    font-family: Roboto;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.text {
    font-family: 'Roboto';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 27px */
    color: #313131;
}

@media only screen and (max-width:1060px) {
    .hl-1 {
        font-family: 'Roboto';
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        /* 67.2px */
    }
    
    .hl-3{
        font-family: Roboto;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* 28px */
    }
    
    .text {
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 24px */
        color: #313131;
    }

}

/*button*/

.Button {
    /* Layout & Box Model */
    display: inline-block;
    padding: 12px 24px;
    /* Standard Padding */
    border: 2px solid transparent;
    /* Initial kein Rahmen sichtbar */
    border-radius: 4px;
    /* Leicht abgerundete Ecken */
    text-align: center;
    cursor: pointer;

    /* Font & Text */
    font-family: 'Roboto', sans-serif;
    /* Universell anpassbare Schrift */
    font-size: 16px;
    /* Standard Schriftgröße */
    font-weight: 500;
    /* Mittlere Dicke für klare Lesbarkeit */
    line-height: 1.5;
    text-decoration: none;
    /* Entfernt standardmäßige Textunterstreichung bei Links */
    color: var(--color-white);
    /* Weißer Text als Standard */

    /* Background & Color */
    background-color: var(--color-asa);
    /* Standard-Hintergrundfarbe */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    /* Weiche Übergänge bei Hover */

    /* Box Shadow (optional) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Dezenter Schatten für visuelle Tiefe */
}

button {
    all: unset;
    display: inline-block;
    /* Optional, um den Button weiterhin als Block-Element nutzbar zu machen */
    cursor: pointer;
    /* Optional, falls du den Mauszeiger als Pointer behalten möchtest */
}

.button-green {
    padding: 12px 24px;
    background-color: var(--color-wanzke);
    color: var(--color-white);
}

.button-pdf{
    background: transparent;
    color: black;
    border: 2px solid var(--color-wanzke);
}

/*position*/
.flex {
    display: flex;
}

.flex-col-mob {
    display: flex;
    flex-direction: row;
}

.flex-center {
    display: flex;
    place-items: center;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.flex-h-center {
    display: flex;
    align-items: center;
    height: 100%;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.absolute-mob {
    position: absolute;
}

.block {
    display: block;
}

.block-dt {
    display: block;
}

.hidden-dt {
    display: none;
}

/*
@media only screen and (max-width:760px) {
    .Block_Mob {
        display: block;
    }

    .absolute-mob {
        position: static;
        display: block;
    }
}

.flex-h-center {
    display: flex;
    align-items: center;
    height: 100%;
}
*/

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    /* Optional: Abstand zwischen den Spalten */
}

.gap-80{
    gap:80px;
}

@media only screen and (max-width:1060px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
        /* Optional: Abstand zwischen den Spalten */
    }

    .hidden-dt {
        display: flex;
    }

    .block-dt {
        display: none;
    }

    .Block_Mob {
        display: block;
    }

    .absolute-mob {
        position: static;
        display: block;
    }

    .flex-col-mob {
        display: flex;
        flex-direction: column;
    }

    .hidden {
        display: none;
    }

    .Boxed {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }
    
    .gap-80{
        gap:16px;
    }
}

.fullwidth {
    width: 100vw;
}

@media only screen and (max-width:620px) {
    .imgwidth1 {
        width: 380px;
    }

    .imgwidth2 {
        width: 300px;
    }

    .imgwidth3 {
        width: 100px;
    }

    .headermargin1 {
        margin-left: 20px !important;
    }

    .headermargin2 {
        margin-right: 20px !important;
    }
}

/*width*/

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

/*hight*/
.fullheight {
    height: 100vh;
}

.h-10 {
    height: 10%;
}

.h-20 {
    height: 20%;
}

.h-30 {
    height: 30%;
}

.h-40 {
    height: 40%;
}

.h-50 {
    height: 50%;
}

.h-60 {
    height: 60%;
}

.h-70 {
    height: 70%;
}

.h-80 {
    height: 80%;
}

.h-90 {
    height: 90%;
}

.h-100 {
    height: 100%;
}

/* Allgemeines Padding */
.p-8 {
    padding: 8px;
}

.p-16 {
    padding: 16px;
}

.p-32 {
    padding: 32px;
}

.p-64 {
    padding: 64px;
}

.p-76 {
    padding: 76px;
}

.p-80 {
    padding: 80px;
}

/* Padding oben */
.pt-8 {
    padding-top: 8px;
}

.pt-16 {
    padding-top: 16px;
}

.pt-32 {
    padding-top: 32px;
}

.pt-64 {
    padding-top: 64px;
}

.pt-76 {
    padding-top: 76px;
}

.pt-80 {
    padding-top: 80px;
}

.pt-112 {
    padding-top: 112px;
}

@media only screen and (max-width:1060px) {
    .pt-112 {
        padding-top: 48px;
    }
}

/* Padding unten */
.pb-8 {
    padding-bottom: 8px;
}

.pb-16 {
    padding-bottom: 16px;
}

.pb-32 {
    padding-bottom: 32px;
}

.pb-64 {
    padding-bottom: 64px;
}

.pb-76 {
    padding-bottom: 76px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pb-112 {
    padding-bottom: 112px;
}

@media only screen and (max-width:1060px) {
    .pb-112  {
        padding-bottom: 48px;
    }
}


/* Padding links */
.pl-8 {
    padding-left: 8px;
}

.pl-16 {
    padding-left: 16px;
}

.pl-32 {
    padding-left: 32px;
}

.pl-64 {
    padding-left: 64px;
}

.pl-76 {
    padding-left: 76px;
}

.pl-80 {
    padding-left: 80px;
}

/* Padding rechts */
.pr-8 {
    padding-right: 8px;
}

.pr-16 {
    padding-right: 16px;
}

.pr-32 {
    padding-right: 32px;
}

.pr-64 {
    padding-right: 64px;
}

.pr-76 {
    padding-right: 76px;
}

.pr-80 {
    padding-right: 80px;
}

/* Allgemeines Margin */
.m-8 {
    margin: 8px;
}

.m-16 {
    margin: 16px;
}

.m-32 {
    margin: 32px;
}

.m-64 {
    margin: 64px;
}

.m-76 {
    margin: 76px;
}

.m-80 {
    margin: 80px;
}

/* Margin oben */
.mt-8 {
    margin-top: 8px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-64 {
    margin-top: 64px;
}

.mt-76 {
    margin-top: 76px;
}

.mt-80 {
    margin-top: 80px;
}

/* Margin unten */
.mb-8 {
    margin-bottom: 8px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-64 {
    margin-bottom: 64px;
}

.mb-76 {
    margin-bottom: 76px;
}

.mb-80 {
    margin-bottom: 80px;
}

/* Margin links */
.ml-8 {
    margin-left: 8px;
}

.ml-16 {
    margin-left: 16px;
}

.ml-32 {
    margin-left: 32px;
}

.ml-64 {
    margin-left: 64px;
}

.ml-76 {
    margin-left: 76px;
}

.ml-80 {
    margin-left: 80px;
}

.ml-16-d{
    margin-left:16px;
}

@media only screen and (max-width: 432px) {
    .ml-16-d {
        margin-left: 0px;
    }
}

/* Margin rechts */
.mr-8 {
    margin-right: 8px;
}

.mr-16 {
    margin-right: 16px;
}

.mr-32 {
    margin-right: 32px;
}

.mr-64 {
    margin-right: 64px;
}

.mr-76 {
    margin-right: 76px;
}

.mr-80 {
    margin-right: 80px;
}

/*Z-Index*/
.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}