* {box-sizing: border-box;}

html {height: 100%;scroll-behavior: smooth;}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-size:24px;
    line-height:2rem;
    color: #555;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

@media screen and (min-width:1281px) {
    body {font-size:1.5rem;}
}

@media screen and (max-width:1280px) {
    body {font-size:1.35rem;}
    h1 {font-size:2.25rem;}
}

@media screen and (max-width:1010px) {
    body {font-size:1.25rem;}
    h1 {font-size:2rem;}
}

@media screen and (max-width:600px) {
    body {font-size:1.15rem;}
    h1 {font-size:1.85rem;}
}

/* Einbetten der Schrift */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 100;
    src: local(''), url(fonts/lato-v17-latin-100.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 100;
    src: local(''), url(fonts/lato-v17-latin-100italic.woff2) format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: local(''), url(fonts/lato-v17-latin-300.woff2) format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 300;
    src: local(''), url(fonts/lato-v17-latin-300italic.woff2) format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local(''), url(fonts/lato-v17-latin-regular.woff2) format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local(''), url(fonts/lato-v17-latin-italic.woff2) format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 700;
    src: local(''), url(fonts/lato-v17-latin-700italic.woff2) format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local(''), url(fonts/lato-v17-latin-700.woff2) format('woff2');
    font-display: swap
}


/* STARTSEITE */ /* STARTSEITE */ /* STARTSEITE */
/* main 1 */
/* main 1 */

.main1 {
    width:100%;
    max-width:1400px;
    margin:0 auto;
}

.bildunterschriften {
    font-size:0.75rem;
    font-style: oblique;
    font-weight:300;
}

.ueberschrift {
    border-left:6px dotted #BF0055;
    color:#1b4471;
    padding: 10px 10px 10px 20px;
    font-weight: 300;
    margin: auto 0 0 0;
}

a.mainlink {
    color:#1B4471;
    text-decoration: none;
    border-bottom:0.5px dashed #BF0055;
}

a.mainlink:hover {
    color:#BF0055;
    border-bottom:0;
}

.startbild {
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

/* main 2 */
/* main 2 */

.main2 {
    width:100%;
    padding:25px;
    background-color:#E9E9E9;
}

@media screen and (max-width:1399px) {
    .laptopbox {width:85%;margin:0 auto;}
}
@media screen and (max-width:1010px) {
    .laptopbox {width:92.5%%}
}
@media screen and (max-width:800px) {
    .laptopbox {width:100%}
}

@media screen and (max-width:500px) {
    .main2 {padding:15px;}
}

.teaser {
    max-width:1400px;
    font-size:1.75rem;
    color:#1B4471;
    margin:0 auto;
    padding:25px;
}
.teaser h1 {font-weight:400;color:#BF0055}

@media screen and (max-width:1010px) {
    .teaser {font-size:1.5rem;}
}

@media screen and (max-width:500px) {
    .teaser {font-size:1.35rem;}
}

.main-flexbox {
    width:100%;
    max-width:1400px;
    margin:0 auto;
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: space-between;
}

.main-item {
    width:48.5%;
    background-color:#fff;
    padding:25px;
    display:flex;
    flex-direction: column;
    margin:25px auto;
} 

.main-item p {
    color:#1B4471;
    font-weight: 300;
    flex:1 0 auto;
}

@media screen and (max-width:1010px) {
    .main-item {width:100%;}
}

@media screen and (max-width:500px) {
    .main-item {margin:15px auto;}
}

.strtbtn {
    background: linear-gradient(180deg, rgba(245,245,245,1) 50%, rgba(213,213,213,1) 100%);
    padding:10px;
    border:0.5px solid #1b4471;
    border-radius: 3px;
    font-size:1.15rem;
    text-decoration:none;
    color:#1B4471;
    text-align: center;
}

.strtbtn:hover {
    background: #1B4471;
    color:whitesmoke;
}

.btn_index {margin:10px 0;}

.erfolgsbild {
    max-width:100%;
    height:auto;
    float:left;
}

.trenner {
    display:none;
}

@media screen and (max-width:500px) {
    .erfolgsbild {float:none;}
    .trenner {display:block;}
}

.foerder {
    width:100%;
    max-width:1400px;
    background:#fff;
    color:#333;
    font-weight:300;
    font-size:1rem;
    margin:25px auto;
    padding:25px;
}

a.modullink {
    font-weight:300;
    text-decoration:none;
    color:#BF0055;
}
a.modullink:visited  {
    font-weight:300;
    text-decoration:none;
    color:#BF0055;
}
a.modullink:hover {
    color:#1B4471;
}

.main3 {
    width:100%;
    padding:40px 20px;
    background-color:#FFFFFF;
}