/* hind-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Hind';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/hind-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* hind-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Hind';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/hind-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*
    font-family: 'Hind', sans-serif;
 */

/* Globales Reset bzw. Basis-Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 18px;
    font-family: 'Hind', sans-serif;
    font-weight: 400;
}

body {
    background-color: #FFF;
    color: #000;
    line-height: 28px;
}

/* effects */
a,
.effect { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }


/* Container: begrenzte Breite und etwas Padding */
.container {
    overflow-x: hidden;
}

.inner { max-width: 940px; padding: 0 20px; margin: 0 auto; }
.inner-header { max-width: 1270px; padding: 0 20px; margin: 0 auto; }

.background.beige { background-color: rgba(187, 158, 133, 0.1); }

/* Kopfbereich */
.header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.header-top { display: flex; justify-content: space-between; align-items: center; }
.header .logo { width: 284px; margin-bottom: 70px; padding-top: 80px; }

.banner { position: relative; height: 444px; background-color: #000; }
.banner-text { position: absolute; top: 135px; left: 0; z-index: 60; width: 100%; }
.banner-text h1 { color: #D51317; font-weight: 700; font-size: 44px; line-height: 46px; margin-bottom: 40px; }
.banner-text h3 { color: #FFF; font-weight: 700; font-size: 30px; line-height: 46px; }

/* Hauptinhalt */
.main-content { position: relative; padding-top: 100px; }
.main-content:after { content: ''; position: absolute; bottom: -120px; right: -300px; z-index: -1; width: 872px; height: 855px; opacity: .05; background-image: url(../images/Bildmarke-COMSEC-final.svg); background-size: 872px 855px; }
.main-content h1 { font-size: 40px; line-height: 46px; margin-bottom: 50px; }
.main-content h2 { font-size: 30px; line-height: 40px; margin-bottom: 20px; }
.main-content h3 { font-size: 22px; line-height: 32px; margin-bottom: 20px; }
.main-content h4 { font-size: 20px; line-height: 30px; }
.main-content p { margin-bottom: 30px; line-height: 28px; }

.content { margin-bottom: 110px; }
.content a { color: #000; text-decoration: none; }
.content a:hover { color: #D51317; }

.content hr { height: 1px; width: 335px; background-color: rgba(0, 0, 0, .4); margin-top: 40px; margin-bottom: 60px; border: none; }

.content ul { list-style: none; }
.content ul li { position: relative; padding-left: 62px; margin-bottom: 30px; }
.content ul li:before { content: ''; display: block; position: absolute; top: -4px; left: 0; width: 34px; height: 32px; background-image: url(../images/icon-check-rot.svg); background-size: 34px 32px; background-repeat: no-repeat;  }

.call-to-action { text-align: center; padding-bottom: 120px; }
.button { display: inline-block; padding: 17px 70px 15px 70px; background-color: #D51317; color: #FFF; font-size: 20px; font-weight: 700; text-decoration: none; }
.button:hover { background-color: #B10C10; }

/* Fußbereich */
.footer { background-color: #000; color: #FFF; }

.footer-top { padding-top: 75px; }
.footer-top a { text-decoration: none; color: #FFF; }
.footer-top a:hover { color: #D51317; }
.footer-top .inner { padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.footer-top p { font-size: 18px; line-height: 34px; }
.footer-top ul { list-style: none; }
.footer-top ul li { line-height: 34px; }
.footer-logo { width: 284px; margin-bottom: 50px; }

.grid-30-30-30 { display: flex; justify-content: space-between; }

.footer-bottom { padding-top: 50px; padding-bottom: 65px; }

@media (max-width: 900px) {
    .banner-text h1 { font-size: 34px; line-height: 36px; }
    .banner-text h3 { font-size: 24px; line-height: 36px; }

    .main-content:after { content: ''; position: absolute; bottom: -60px; right: -100px; z-index: -1; width: 572px; height: 555px; opacity: .05; background-image: url(../images/Bildmarke-COMSEC-final.svg); background-size: 572px 555px; }
}


@media (max-width: 750px) {
    .header .logo { margin-bottom: 40px; padding-top: 40px; }

    .grid-30-30-30 { flex-direction: column; }
    .grid-30-30-30 .col { width: 100%; padding-left: 0; margin-bottom: 50px; }
    .grid-30-30-30 .col:last-child { margin-bottom: 0; }
    .footer-bottom { padding-top: 30px; padding-bottom: 35px; }
}

@media (max-width: 700px) {
    .banner-text { top: 100px; }
    .banner-text h1 { font-size: 35px; line-height: 46px; margin-bottom: 50px; }
    .banner-text h3 { font-size: 25px; line-height: 46px; }
}

@media (max-width: 600px) {
    .header .logo { width: 200px; }
    .main-content:after { content: ''; position: absolute; bottom: -20px; right: -50px; z-index: -1; width: 372px; height: 355px; opacity: .05; background-image: url(../images/Bildmarke-COMSEC-final.svg); background-size: 372px 355px; }
}

@media (max-width: 550px) {
    .header .logo { width: 200px; }
    .banner { height: 300px; }
    .banner-text { top: 50px; }
    .banner-text h1 { font-size: 25px; line-height: 36px; margin-bottom: 30px; }
    .banner-text h3 { font-size: 20px; line-height: 36px; }

    .main-content { padding-top: 50px; }
    .main-content h2 { font-size: 24px; line-height: 34px; }
    .content { margin-bottom: 50px; }
}

@media (max-width: 500px) {
    .header .logo { margin-bottom: 20px; padding-top: 20px; }
    .contact-button { display: none; }
}