/* ------------------------ 
	FontFamily
	------------------------ */
    body {
        font-family: 'Roboto_Regular','Helvetica','Arial',sans-serif;
        font-optical-sizing: auto;
        font-variation-settings: "wdth" 100;
        font-variant-ligatures: common-ligatures;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .r_bold, bold {font-family: 'Roboto_Bold',sans-serif; }
    .r_medium, medium {font-family: 'Roboto_Medium',sans-serif; }
    .r_reg, regular {font-family: 'Roboto_Regular','Helvetica','Arial',sans-serif;}
    .r_light, light {font-family: 'Roboto_Light',sans-serif; }

    #intro H1.large {font-family: 'Roboto_Light',sans-serif;}

    /*a.but.small.link p { 
        font-family: 'Roboto_Regular','Helvetica','Arial',sans-serif;;
        text-decoration: underline; 
    } */

    #intro :is(H1, H2, H3),
    header nav li a {font-family: 'Roboto_Medium',sans-serif;}
   
    b, strong,
    /*a.but p {font-family: 'Roboto_Bold',sans-serif;}*/
    a.but:not(.teaser-link) p {font-family: 'Roboto_Bold',sans-serif;}

    #post H1, H2, H3, H4, H5, H6 {font-weight: 200;}

    .r_medium, medium,
    .r_light, light {font-weight: 400;}
    .em, italic {font-style: italic;}

    #intro H1.large,
    #intro :is(H1, H2, H3),
    header nav li a,
    a.but p,
    b, strong {font-weight: 400;}

    /* ------------------------ 
	FontSize
	------------------------ */
    /* ---- header / footer  ---- */
    header #additional a p { font-size: 12px; }
    header nav li a,
    footer p,
    footer a { font-size: 14px; }
    footer p,
    footer a { line-height: 150%;}

    /* ---- all for all  ---- */
    /*H6, p, 
    a.but.big p, 
    section ul li, 
    section ol li, 
    .editor td { font-size: 16px; }

    p.small, 
    a.but.small p, 
    .tertiary { font-size: 14px; } 

    p.moresmall { font-size: 12px; }
    p.verysmall { font-size: 10px; } */

    
    /*line-height*/
    H1.large, H2.large {line-height: 115%; }
    H1, H2, H3, H4  { line-height: 130%;} 
    p, H5, H6,
    .editor td { line-height: 150%;}
    p.small { line-height: 150%;} 
    p.divider { line-height: 100%;} 
    .breadcrumb span,
    .breadcrumb a { line-height: 150%;} 
 
    /* ------------------------ 
	padding / margin
	------------------------ */
    h1, h2, h3, h4, h5, h6, p { margin: 0;}
    
    h1, h2 { padding-bottom: 2rem; }
    h3, #intro h4 { padding-bottom: 1.5rem; }
    p { padding-bottom: 1rem; }
    section ul, 
    section ol { padding-bottom: 1rem; }
    h4, h5 {padding-bottom: 1rem;}
    h6 {padding-bottom: .5rem;}

    #modulintro :is(h2, h3) {padding-bottom: 1rem;}

    /* copy button->yes/no */
    #copy:has(> h2.headline + .button) .headline {
        padding-bottom: .5rem;
    }
    .contentbox:not(:has(.button)) > p:last-of-type,
    .contentbox:not(:has(.button)) > ul:last-of-type,
    #contentbox:not(:has(.button)) > p:last-of-type,

    #copy:not(:has(.button)) > p:last-of-type,
    #copy:not(:has(.button)) > ul:last-of-type,
    #copy:not(:has(.button)) > #listbox:last-of-type ul {
        padding-bottom: 0;
    }
    
    #author #contentbox:not(:has(.button)) > p:last-of-type,
    #hp-article #copysingle #copy:not(:has(.button)) > p:last-of-type{
        padding-bottom: 1rem;
    }
   
    
    p.iconbox.top {
      padding-bottom: 1rem !important;
    }
    
    /* button repeat */
    .button a.but,
    .row > a.but { 
        display: inline-block; 
        margin: .5rem 2rem 1rem 0;
    }

    @media only screen and (max-width: 850px) {
        .button a.but, 
        .row > a.but {margin: .5rem auto;}
    }

    /* button no-repeat */
    /*.button a.but:only-of-type,
    .row > a.but:only-of-type {margin: .5rem 0 0;}*/
   
    
    /* ---- LetterSpaching ---- */
    header nav li a { letter-spacing: .5px; text-decoration: none; }
    
    /* ---- TextTransform ---- */
    a.but p { text-transform: uppercase; }
    a.but.lowercase p { text-transform: none;}

    /*teaser-link*/
    a.teaser-link { 
        display: block; 
        margin-top: .5rem; 
        font-size: .9rem; 
        line-height: 1rem;
    }
    a.teaser-link:hover { opacity: .8; }
    
    /* ---- ul / li ---- */
    section ol,
    section ul.dot { padding-left: 1rem; }

    section ul li,
    section ol li { 
        padding-bottom: .35rem; 
        line-height: 150%;
        position: relative; 
    }
    
    /*editor*/
    section ul.dot > li,
    section ul.dot ul li { 
        position: relative; 
        padding-left: 1rem; 
    }
    
    /*dot square black*/
    section ul.dot > li {
        list-style: square;
        color: #393A42;
        padding-left: 0; 
    }

    /* list editor */
    .editor ul {margin-left: 1.25rem;}
    .editor ul > li, 
    .editor ul {
        list-style: disc;
        color: #393A42;
    }
    .editor ul > li:first-child:last-child:has(> ul) {
      list-style: none;
    }
    
    

    /* check-list*/
    ul.check li,
    ul.check > li { 
        margin-left: 32px; 
        padding-left: 0; 
    }
    ul.check li:before,
    ul.check > li:before { 
        content: url("../img/svg/icon/check-icon.svg");
        position: absolute;
        top: 0px;
        left: -32px; 
        width: 10px; 
        height: 10px;
    }
    
    /* ---- link ---- */
    #textbox p a,
    .editor a,
    .contentbox p a,
    .copybox p a { 
      text-decoration: underline; 
      color: #f0aa00; 
    }
    .editor a.secondary { color: #393A42; }
    .editor a.tertiary { color: #757575; }
    .editor a:hover { opacity: .7;}

    /* ---- table ---- */
    .editor table { 
        width: 100%; 
        border: 1px solid #bbb; 
        margin-bottom: 2rem;
    }
    .editor td { 
      padding: 20px;
      vertical-align: top;
      border-right: 1px solid #bbb;
    }
    .editor td:last-child { 
      border-right: 0px;
    }

    /* ---- blockquote ---- */
    blockquote {
        font-style: italic;              
        display: inline-block; 
        margin-left: 1rem; 
        position: relative; 
    }
    blockquote:before,
    blockquote:after {
        font-size: 2em;
        position: absolute;
        top: .3rem;
        color: #f0aa00;
        display: inline-block;
    }
    blockquote::before {
        content: "“"; 
        left: -1.3rem;
    }
    blockquote::after {
        content: "”";    
        right: -.9rem;
    }