:root {
    --text-color: #323232;
    --link-color: #18405A;
}
html {
    scroll-behavior: smooth;
}
body { font-size: 1rem; line-height: 1.75rem; font-family: 'Source Sans 3'; color: #323232; font-weight: normal; background: #fff; margin: 0; padding: 0; }
/* Icons */
.material-icons { font-family: 'Material Icons'; font-size: 1.5rem; color: var(--text-color); }
/* Headerbereich */
.header-container { position: sticky; top: 0; background: #FFF; border-bottom: 4px solid #BEBEBE; z-index: 99; }
.header-row { display: flex; flex-direction: column; place-content: flex-start center; align-items: flex-start; }
.header { width: 100%; height: 80px; display: flex; flex-direction: row; place-content: center space-between; align-items: center; }
/* Logo */
h1.logo { font-size: 1.625rem; font-weight: bold; text-transform: uppercase; white-space: nowrap; margin: 0 0 0 -16px; padding: 0; }
h1.logo a { color: var(--text-color); text-decoration: none; }
/* Nav-Toggler*/
.mobile-nav-toggler { font-weight: 700; color: var--(link-color); border: 1px solid var(--link-color); border-radius: 5px; margin: 0; padding: 2px 8px; cursor: pointer ;}
/* Navi */
.nav { display: none; }
.nav { width: 100%; margin: 0; padding: 0; }
.nav-list { width: 100%; list-style: none; border-top: 2px solid #D7D7D7; margin: 0; padding: 0; }
.nav-item { font-size: 1.125rem; border-top: 1px solid #D7D7D7; margin: 0; padding: 0; }
.nav-item a { display: block; color: var(--text-color); padding: 6px 16px; }
.nav-item a:hover { text-decoration: none;}
.nav-item a.act { color: #FFF; background: var(--link-color); border-color: var(--link-color); }
/* Banner */
.banner { height: 300px; background: #ebebeb url(../img/Headerimage_xs.jpg) no-repeat right top; margin: 0 0 32px 0; }
.banner-h2 { font-size: 1.2rem; text-transform: uppercase; color: #FFF; margin: 0 0 0 -16px; padding: 0; }
.banner-h2-txt { display: block; width: fit-content; white-space: nowrap; background: url(../img/bg-subheader.png) no-repeat right top; padding: 16px 36px 8px 16px; }
.banner-h2-txt--row-1 { margin: 0; }
.banner-h2-txt--row-2 { margin: -4px 0 0 0; }
/* Content-sections */
.section-content { margin: 0; padding: 0 0 32px 0; }
/* scroll-margin-top for separate sections */
#leistungen { scroll-margin-top: 120px; } 
#ueber-mich { scroll-margin-top: 84px; }
#kontakt { scroll-margin-top: 84px; }
/* Container mit grauem background */
.container-grey { background: rgb(255,255,255); background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(233,233,233,1) 53%); margin: 0 0 32px 0; padding: 42px 0 32px 0; }
.container-grey--projekte { margin: 0 0 16px 0; padding: 22px 0 42px 0; }
/* Allgemeine Styles */
.headline-2 { font-size: 1.625rem; font-weight: bold; text-transform: uppercase; margin: 0 0 16px 0; padding: 0; }
.headline-3 { font-size: 1.375rem; font-weight: 700; margin: 0; padding: 12px 0 16px 0; }
.headline-3-contact { font-size: 1.375rem; font-weight: 600; padding: 0; }
.headline-4 { font-size: 1.125rem; font-weight: 700; line-height: 28px; margin: 0; padding: 0 0 16px 0; }
.headline-4-contact { font-size: 1rem; font-weight: 400; margin: 0; padding: 0 0 12px 0;}
.paragraph  { margin: 0; padding: 0 0 16px 0; }
.text-link  { color: var(--link-color); text-decoration: underline; }
/* CV-Table */
.cv-table { width: 100%; border-top: 2px solid #D7D7D7; margin: 0 0 32px 0; padding: 0; }
.cv-th { vertical-align: top; color: var(--text-color); font-weight: 600; width: 150px; border-bottom: 1px solid #D7D7D7; padding: 6px 0; }
.cv-td { vertical-align: top; border-bottom: 1px solid #D7D7D7; padding: 6px 0; }
/* Listen */
.th-list { list-style: none; margin: 0 0 16px 16px; padding: 0; }
.th-list-item { list-style-type: disc;  }
.th-list .list-item::marker { color: var(--link-color); }
/* Vortragstätigkeit */
.icon-vortragstaetigkeit { display: block; width: 62px; background: #FFF; border-radius: 50px; margin: -62px 0 0 0 !important; padding: 14px 20px 8px 20px; }
/* Experte in folgenden Normenkomitees */
.nk-list-row { margin-bottom: 32px;  }
.nk-list { margin: 0 0 0 16px; padding: 0; }
/*.Projekte */
.project { display: flex; flex-direction: column; place-content: stretch flex-start; align-items: stretch; max-width: 100%; margin: 0 0 16px 0; }
.project__img--duotech  { height: 240px; background: url(../img/project-img_duotech_xs.jpg) no-repeat center top; background-size: cover; }
.project__img--akademie { height: 240px; background: url(../img/project-img_akademie_xs.jpg) no-repeat center top; background-size: cover; }
.project__img--oenorm   { height: 240px; background: url(../img/project-img_oenorm_xs.jpg) no-repeat center top; background-size: cover; }
.project__info { background: #FFF; line-height: 28px; margin: 0; padding: 32px 32px 0 32px; }
/* Kontaktdaten */
.contact-data { display: flex; flex-direction: column; place-content: flex-start; align-items: flex-start; }
.th-business-card { display: flex; flex-direction: row; place-content: flex-start; align-items: flex-start; gap: 16px; }
.th-business-card img { width: 140px; }
.kontakt-row { display: flex; flex-direction: row; place-content: flex-start; align-items: flex-start; gap: 8px; margin: 0; }
.adress { line-height: 24px; padding: 18px 0 8px 0 !important; }
.phone { padding: 0 0 8px 0 !important; }
.phone a { text-decoration: none; color: var(--text-color); cursor: default; }
.mail { padding: 0 !important; }
.google-maps-link-row { display: flex; flex-direction: row; place-content: flex-start; align-items: flex-start; gap: 6px; margin: 0; padding: 24px 0 0 0 !important; color: var(--link-color); }
/* Footer */    
.footer { color: #FFF; background: var(--link-color);; margin: 62px 0 0 0; padding: 42px 0 0 0; }
.headline-imprint { font-size: 1.125rem; font-weight: 700; line-height: 28px; margin: 0 0 16px 0; padding: 0; } 
.footer-copyright { border-top: 1px solid #47677B; margin: 8px 0 0 0; padding: 12px 0 24px 0; }

/** -- ******************************************************* -- **/
/** -- Small devices (landscape phones, 576px and up) ******** -- **/
@media (min-width: 576px) {
    h1.logo { font-size: 1.875rem; margin-left: 0; }
    /* Banner */
    .banner { height: 320px; background: #ebebeb url(../img/Headerimage_sm.jpg) no-repeat right top; margin: 0 0 42px 0; }
    .banner-h2 { font-size: 1.3rem; margin: 0; padding: 0px 0 0 0; }
    .banner-h2-txt { padding: 16px 42px 8px 16px; }
    .banner-h2-txt--row-1 { margin: 0; }
    .banner-h2-txt--row-2 { margin: -2px 0 0 0; }
    /* Allgemeine Styles */
    .headline-2 { font-size: 1.75rem; }
    /*.Projekte */
    .project__img--duotech  { height: 260px; background: url(../img/project-img_duotech_sm.jpg) no-repeat center top; background-size: cover; }
    .project__img--akademie { height: 260px; background: url(../img/project-img_akademie_sm.jpg) no-repeat center top; background-size: cover; }
    .project__img--oenorm   { height: 260px; background: url(../img/project-img_oenorm_sm.jpg) no-repeat center top; background-size: cover; }
    /* Kontaktdaten */
    .th-business-card { gap: 32px; }
    .th-business-card img { width: 180px; }
    .adress { padding: 34px 0 8px 0 !important; }
}

/** -- ************************************** -- **/
/** -- Medium devices (tablets, 768px and up) -- **/
@media (min-width: 768px) {
    /* Banner */
    .banner { height: 400px; background: #ebebeb url(../img/Headerimage_md.jpg) no-repeat right top; }
    .banner-h2 { font-size: 1.5rem; margin: 0 0 0 -16px; padding: 150px 0 0 0; }
    .banner-h2-txt { margin: 0; padding: 16px 32px 8px 16px; }
    .banner-h2-txt--row-1 { margin: 0; }
    .banner-h2-txt--row-2 { margin: -2px 0 0 0; }
    /*.Projekte */
    .project__img--duotech  { height: 280px; background: url(../img/project-img_duotech_md.jpg) no-repeat center top; background-size: cover; }
    .project__img--akademie { height: 280px; background: url(../img/project-img_akademie_md.jpg) no-repeat center top; background-size: cover; }
    .project__img--oenorm   { height: 280px; background: url(../img/project-img_oenorm_md.jpg) no-repeat center top; background-size: cover; }
    /* Kontaktdaten */
    .contact-data { flex-direction: row; gap: 32px; }
    .th-business-card { gap: 32px; }
    .google-maps-link-row { padding: 30px 0 0 0 !important; }
    /* Footer */    
    /* Impressum-Infos */
    .footer-imprint-row { display: flex; flex-direction: row; place-content: flex-start space-between; align-items: flex-start; }
    .footer-imprint-row__block { flex: 1; }
    /* Copyright und top-link */
    .footer-copyright-row { display: flex; flex-direction: row; place-content: center space-between; align-items: center; }
    }

/** -- *************************************** -- **/
/** --  Large devices (desktops, 992px and up) -- **/
@media (min-width: 992px) {
    .header-row { height: 88px; height: 80px; display: flex; flex-direction: row; place-content: center space-between; align-items: center; }
    .mobile-nav-toggler { display: none; }
    .nav { display: block; width: auto; }
    .nav-list { list-style: none; border-top: none; display: flex; flex-direction: row; place-content: flex-start; align-items: flex-start; gap: 16px; margin: 0; padding: 0; }
    .nav-item { border: 1px solid #FFF; margin: 0; padding: 0; }
    .nav-item:hover { border: 1px solid var(--link-color); }
    .nav-item a { display: block; white-space: nowrap; color: var(--text-color); padding: 4px 16px; }
    .nav-item a:hover { text-decoration: none;}
    /* Banner */
    .banner { height: 400px; background: #ebebeb url(../img/Headerimage_lg.jpg) no-repeat right top; }
    .banner-h2 { font-size: 1.8rem; padding: 140px 0 0 0; }
    .banner-h2-txt { margin: 0; padding: 16px 52px 8px 16px; }
    .banner-h2-txt--row-1 { margin: 0; }
    .banner-h2-txt--row-2 { margin: -2px 0 0 0; }   
    /* Projekte */
    .project { display: flex; flex-direction: row; place-content: flex-start; align-items: flex-start; max-width: auto; margin: 0; }
    .project--2 { flex-direction: row-reverse; }
    .project__img--duotech  { width: 50%; height: 480px; background: url(../img/project-img_duotech_lg.jpg) no-repeat center top; background-size: cover; }
    .project__img--akademie { width: 50%; height: 480px; background: url(../img/project-img_akademie_lg.jpg) no-repeat center top; background-size: cover; }
    .project__img--oenorm   { width: 50%; height: 480px; background: url(../img/project-img_oenorm_lg.jpg) no-repeat center top; background-size: cover; }
    .project__info { width: 50%; height: 480px; }
    /* Kontaktdaten */
    .contact-data { gap: 42px; }
    .th-business-card { gap: 42px; }
    .th-business-card img { width: 200px; }
    .adress { padding: 51px 0 8px 0 !important; }
    .google-maps-link-row { padding: 47px 0 0 0 !important; }
}

/** -- *************** -- **/
/** -- (1024px and up) -- **/
@media (min-width: 1024px) {
    /* Experte in folgenden Normenkomitees */
    .nk-list-row { display: flex; flex-direction: row; place-content: flex-start; align-items: flex-start; gap: 32px; }
    .nk-list { margin: 0 0 16px 16px; padding: 0; }    
}

/** -- *************************************************** -- **/
/** -- Extra large devices (large desktops, 1200px and up) -- **/
@media (min-width: 1200px) {
    /* Banner */
    .banner { height: 460px; background: #ebebeb url(../img/Headerimage_xl.jpg) no-repeat center top; }
    .banner-h2 { font-size: 2.2rem; padding: 170px 0 0 0; }
    .banner-h2-txt { margin: 0; padding: 16px 66px 8px 16px; }
    .banner-h2-txt--row-1 { margin: 0; }
    .banner-h2-txt--row-2 { margin: -2px 0 0 0; }
    /* Projekte */
    .project { display: flex; flex-direction: row; place-content: flex-start; align-items: flex-start; max-width: auto; margin: 0; }
    .project--2 { flex-direction: row-reverse; }
    .project__img--duotech  { height: 380px; background: url(../img/project-img_duotech_xl.jpg) no-repeat center top; background-size: cover; }
    .project__img--akademie { height: 380px; background: url(../img/project-img_akademie_xl.jpg) no-repeat center top; background-size: cover; }
    .project__img--oenorm   { height: 380px; background: url(../img/project-img_oenorm_xl.jpg) no-repeat center top; background-size: cover; }
    .project__info { height: 380px; }
}