/****************************************************************************
 * Basics
 *
 * font-family: 'PilcrowRounded-Medium'; 500
 * font-family: 'PilcrowRounded-Bold'; 700
 *
 * font-family: 'Satoshi-Medium'; 500
 ****************************************************************************/
body {
    font-family: 'Satoshi-Medium';
    font-weight: 500;
    line-height: 1.2;
    color: #000000;
}
p,ul { line-height: 1.2; }

/****************************************************************************
 * Headlines
 ****************************************************************************/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    /*font-family: 'PilcrowRounded-Bold';*/
    font-family: 'Maga';
    font-weight: 700; font-style: normal; line-height: 1;
    color: inherit; letter-spacing: 0.0625rem;
}



/****************************************************************************
 * Font Sizes
 ****************************************************************************/
.h1, h1 {font-size:3em; letter-spacing: 0;}
.h2, h2 {font-size:3em; letter-spacing: 0;}
.h3, h3 {font-size:1.6em;}
.h4, h4 {font-size:1.375em;}
.h5, h5 {font-size:1.25em;}
.h6, h6 {font-size:1.125em;}
.wrapper,.copyright,.info_banner { font-size: 1.125rem;}

@media screen and (min-width:40em){
    .h1, h1 {font-size:3.375em;}
    .h2, h2 {font-size:3.375em;}
}

@media screen and (min-width:64em){
    .wrapper,.copyright,.info_banner { font-size: 1.25rem;}
}


/****************************************************************************
 * Special
 ****************************************************************************/
blockquote > p:not(:last-child),
blockquote > p:first-child,
.medium {
    /*font-family: 'PilcrowRounded-Medium';*/
    font-family: 'Satoshi-Regular';
    font-weight: 400;
    letter-spacing: 0.0625rem
}
.h1.medium, h1.medium {font-size:2.375em; line-height: 1.3;}
.h2.medium, h2.medium {font-size:2.375em; line-height: 1.3;}

blockquote > p:not(:last-child),
blockquote > p:first-child {
    font-size:1.625em; line-height: 1.3;
}

@media screen and (min-width:40em){
    .h1.medium, h1.medium {font-size:2.75em;}
    .h2.medium, h2.medium {font-size:2.75em;}

    blockquote > p:not(:last-child),
    blockquote > p:first-child {
        font-size:1.875em;
    }
}

@media screen and (min-width:64em){
    blockquote > p:not(:last-child),
    blockquote > p:first-child {
        font-size:2.25em;
    }
}


.tabular {
    font-variant-numeric: tabular-nums;
}


/****************************************************************************
 * Margin & Paddings
 * 
 * Bsp Comco-Epp: Achten auf sehr genaue Umsetzung. Abstände müssen genau
 * definiert werden. Daher keine EM-Angaben, sondern fixe größen! 
 ****************************************************************************/
.h1, h1, .h2, h2, ul { margin-bottom: 2.25rem;}
.h3, .h4, .h5, .h6, h3, h4, h5, h6, p { margin-bottom: 1.125rem;}

h1:not(:first-child), .h2:not(:first-child), 
h1:not(:first-child), h2:not(:first-child) {
    margin-top: 4.5rem;
}
.h3:not(:first-child), .h4:not(:first-child), .h5:not(:first-child), .h6:not(:first-child), 
h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child) {
    margin-top: 2.25rem;
}

.button-group:not(:first-child) { margin-top: 1.75rem;}


@media screen and (min-width:64em){
    .h1, h1, .h2, h2, ul{ margin-bottom: 2.5rem;}
    .h3, .h4, .h5, .h6, h3, h4, h5, h6 { margin-bottom: 1.25rem;}

    h1:not(:first-child), .h2:not(:first-child), 
    h1:not(:first-child), h2:not(:first-child) {
        margin-top: 5rem;
    }
    .h3:not(:first-child), .h4:not(:first-child), .h5:not(:first-child), .h6:not(:first-child), 
    h3:not(:first-child), h4:not(:first-child), h5:not(:first-child), h6:not(:first-child) {
        margin-top: 2.5rem;
    }
    .button-group:not(:first-child) { margin-top: 1.875rem;}
}


/****************************************************************************
 * Content_title
 ****************************************************************************/
.content_title p + *:not(p) {
    margin-top: 0;
}


/****************************************************************************
 * Small text
 *
 * del
 * ul del
 * content_title > p
 ****************************************************************************/
del {
    text-decoration: none;
}
del,
.content_title > p {
    font-size: 0.75em;
}

ul.small_text {
    font-size: 0.75em;
}
ul.small_text del {
    font-size: 1em;
}

/****************************************************************************
 * ul li
 ****************************************************************************/
li {
    margin-bottom: 1em;
}
li > ul, li > ol {
    margin-top: 1em;
}


/****************************************************************************
 * Blockquote
 ****************************************************************************/
blockquote > *:last-child:not(:first-child){
    color: #ffcc00;
}