/*
Theme Name: Handelsblatt-Finanzen-Vergleichsportal-Theme
Theme URI: https://www.handelsblatt.com
Author: FARN Digital GmbH
Author URI: https://www.farn.de
Text Domain: hbfv-theme
Version: 1.2.0
*/

@import url('https://resources.handelsblatt.com/fonts/fonts.css');
@import url('assets/css/hb-icons.css');

/*
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: antialiased;
    text-rendering: optimizeLegibility;
    word-wrap: normal;
    font-variant-ligatures: common-ligatures;
    -webkit-font-feature-settings: "liga", "clig";
    -moz-font-feature-settings: "liga", "clig";
    font-feature-settings: "liga", "clig";
    -webkit-font-feature-settings: "liga", "lnum";
    -moz-font-feature-settings: "liga", "lnum";
    font-feature-settings: "liga", "lnum";
    -webkit-tap-highlight-color: rgba(0,0,0,0);
} */
.hmg-channelizer-content-area,
.no-channelizer {
    font-size: 18px;
}
.hmg-channelizer-content-area *,
.hmg-channelizer-content-area *::before,
.hmg-channelizer-content-area *::after,
.no-channelizer *,
.no-channelizer *::before,
.no-channelizer *::after {
    box-sizing: inherit;
}
.hmg-channelizer-content-area > div:first-child,
.no-channelizer > div:first-child {
    margin: 0;
    padding: 0;
}

.hmg-channelizer-content-area img,
.hmg-channelizer-content-area svg,
.no-channelizer img,
.no-channelizer svg {
    width: 100%;
    height: auto;
}
/* Headings */
.hmg-channelizer-content-area h1 a,
.hmg-channelizer-content-area h2 a,
.hmg-channelizer-content-area h3 a,
.hmg-channelizer-content-area h4 a,
.hmg-channelizer-content-area h5 a,
.hmg-channelizer-content-area h6 a,
.no-channelizer h1 a,
.no-channelizer h2 a,
.no-channelizer h3 a,
.no-channelizer h4 a,
.no-channelizer h5 a,
.no-channelizer h6 a {
    color:inherit;
    text-decoration: none !important;
}
.wp-block-heading.is-style-special-headline {
    font-family: 'Druk Web';
}
h1.wp-block-heading.is-style-special-headline,
h2.wp-block-heading.is-style-special-headline {
    font-size: 3.2rem;
    letter-spacing: 1px;
}
.hmg-channelizer-content-area p + .wp-block-heading,
.no-channelizer p + .wp-block-heading {
    margin-top: 4rem;
}

p + .wp-block-heading {
    margin-top: 2rem;
}

/* styles for body when channelizer is not active */
body.wp-theme-hbfv-theme {
    background-color: #f6f6f6;

    height: 100%;
}
.no-channelizer {
    max-width: 768px;
    margin-left:auto;
    margin-right: auto;
    background-color:white;
    box-sizing: border-box;
}
.no-channelizer header {
    position: sticky;
    top:0;
    z-index: 10;
    margin-bottom: 2rem;
}
.no-channelizer header::after {
    width: 96%;
    height: 1px;
    background-color: var(--wp--preset--color--shade-light);
    content: '';
    margin: 0 auto;
    display: block;
    position: absolute;
    left: 2%;
    bottom:-1px;
}
.no-channelizer header > .wp-block-group:first-child{
    justify-content: space-between;
}
.hb_custom_logo_link {
    text-align: center;
}
.hb_custom_logo,
.no-channelizer header svg#hblogo {
    max-width: 200px;
}
.no-channelizer header nav {
    margin-top: 0;
    padding:1rem;
}
.no-channelizer header nav ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap:0;
    flex-wrap: wrap;
}
.no-channelizer header nav ul li a{
    color:var(--wp--preset--color--shade-dark) !important;
    border-right: 1px solid var(--wp--preset--color--primary);
    padding-right: 0.8rem;
    padding-left: 0.8rem;;
}
.no-channelizer header nav ul li:last-child a{
    border-right: none;
    padding-right: 0;
}
.no-channelizer header nav ul li:first-child a{
    padding-left: 0;
}
.no-channelizer header nav ul li a:hover{
    color:black !important;
}
.no-channelizer footer svg#hblogo {
    height: 28px !important;
    width: auto;
}
.no-channelizer footer .has-white-color a {
    color: #fff !important;
}


/* Links */
.hmg-channelizer-content-area a,
a:where(:not(.wp-element-button)),
.no-channelizer a{
    text-decoration: none;
}
.hmg-channelizer-content-area :where(li a:where(:not(.wp-element-button))) {
    color: var(--wp--preset--color--primary);
}
.wp-block-categories-list li a:where(:not(.wp-element-button)) {
    color: black;
}
mark {
    background-color:#fce5cc !important;
}
a.eafl-link:hover {
    color: var(--theme-primary-darker);
}
ul.wp-block-list li a {
    color: var(--color-primary);
}
ul.wp-block-list li a:hover {
    color: var(--theme-primary-dark);
}

/* seperator */
hr.wp-block-separator{
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    /* max-width: 800px !important; */
}


/* widths */
.alignfull {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    margin-top: 3rem;
}
.alignwide {
   width:90%;
   margin-left:auto;
   margin-right:auto;
 }
.wp-block-cover.alignfull > .wp-block-cover__inner-container,
.wp-block-group.alignfull {
   width:100%;
 }
.entry-content > :not(.alignwide):not(.alignfull),
.wp-site-blocks > :not(.alignwide):not(.alignfull):not(.entry-content),
.wp-block-cover.alignfull > .wp-block-cover__inner-container > :not(.alignwide):not(.alignfull),
.wp-block-group.alignfull > :not(.alignwide):not(.alignfull) {
    width:90%;
    margin-left:auto;
    margin-right:auto;
}



/* paddings and margins for alignfull blocks */
.wp-block-group.alignfull.has-background,
.wp-block-cover.alignfull{
    padding:3rem 0;
}
.alignfull + * {
    margin-top: 3rem;
}
.alignfull + .alignfull,
.alignfull + footer {
    margin-top: 0 !important;
}
.entry-content > *:last-child:not(.alignfull),
.wp-site-blocks > *:last-child:not(.alignfull):not(.entry-content){
    margin-bottom: 3rem;
}

/* lists */
.hmg-channelizer-content-area ul,
.no-channelizer ul {
    padding-left: 1.5rem;
}
.hmg-channelizer-content-area ul.is-style-default,
.hmg-channelizer-content-area ul.is-style-check-list,
.no-channelizer ul.is-style-default,
.no-channelizer ul.is-style-check-list {
    list-style: none;
    margin-left: 0;
    padding: 0;
}
.hmg-channelizer-content-area ul.is-style-default li,
.hmg-channelizer-content-area ul.is-style-check-list li,
.no-channelizer ul.is-style-default li,
.no-channelizer ul.is-style-check-list li {
    padding-left: 2rem;
    margin:5px 0;
}
.hmg-channelizer-content-area ul.is-style-default li > div,
.hmg-channelizer-content-area ul.is-style-check-list li > div,
.no-channelizer ul.is-style-default li > div,
.no-channelizer ul.is-style-check-list li > div {
    display: inline-block;
}
.hmg-channelizer-content-area ul.is-style-default li:before,
.hmg-channelizer-content-area ul.is-style-check-list li:before,
.no-channelizer ul.is-style-default li:before,
.no-channelizer ul.is-style-check-list li:before {
    content: "•";
    padding-right: 10px;
    display: inline;
    margin-left: calc(-1rem - 10px);
}
.hmg-channelizer-content-area ul.is-style-check-list li:before,
.no-channelizer ul.is-style-check-list li:before {
    content: "✓";
}
/* categories lists */
.wp-block-categories-list {
    margin:0;
    padding: 0;
    list-style-type: none;
    margin-top: 2rem;
    column-count: 4;
    column-gap: 3rem;
    column-rule: 1px solid var(--wp--preset--color--shade-light);    
}
.wp-block-categories-list li {
    line-height: 1.2;
    margin-bottom:10px;
}
.wp-block-categories-list li a{
    text-decoration: none;
    font-family: 'ClassicGrotesquePro', sans-serif;
    font-size:1.1rem;
    hyphens: auto;
    line-height: 1.2 !important;
    display: inline-block;
    font-weight: normal;
}

/* buttons */
.wp-block-button.is-style-outline .wp-block-button__link:hover{
    color:var(--wp--preset--color--primary-darker) !important;
}

/* query-loop-blocks and columns */
.wp-block-query .wp-block-post-template .wp-block-post,
.wp-block-column,
.linked-query .teaser {
    position: relative;
}
.wp-block-query .wp-block-post-template .wp-block-post:not(:last-child)::after,
.wp-block-columns .wp-block-column:has(.wp-block-query:first-child):not(:last-child)::after,
.wp-block-columns .wp-block-column:has(.teaser:first-child):not(:last-child)::after,
.wp-block-columns.is-style-has-lines .wp-block-column:not(:last-child)::after,
.linked-query .teaser:not(.teaser_display_mid):not(.teaser_display_big):not(.teaser_display_bigslim):not(:last-child)::after{
    content:'';
    width:1px;
    background-color:var(--wp--preset--color--black);
    opacity: 0.1;
    height: 100%;
    right:calc(-1rem - 0.5px);
    position: absolute;
    top:0;
}
.wp-block-columns .wp-block-column:has(.wp-block-query:first-child):not(:last-child)::after,
.wp-block-columns .wp-block-column:has(.teaser:first-child):not(:last-child)::after {
    right:calc(-1.5rem - 0.5px);
}
.wp-block-query .wp-block-post-template .wp-block-post:not(:last-child)::after,
.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:has(.wp-block-query:first-child):not(:last-child)::after,
.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:has(.teaser:first-child):not(:last-child)::after,
.wp-block-columns.is-style-has-lines:not(.is-not-stacked-on-mobile) .wp-block-column:not(:last-child)::after,
.linked-query .teaser:not(.teaser_display_mid):not(.teaser_display_big):not(.teaser_display_bigslim):not(:last-child)::after{
    width:100%;
    height: 1px;
    right:auto;
    left:0;
    top:auto;
    bottom:calc(-1rem - 0.5px);
}
.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:has(.wp-block-query:first-child):not(:last-child)::after,
.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:has(.teaser:first-child):not(:last-child)::after{
    bottom:calc(-1.5rem - 0.5px);
}

/* cover-blocks */
.wp-block-cover.alignfull.has-custom-content-position {
  padding:2rem !important;
}

/* lists */
ul.is-style-default,
ul.is-style-check-list {
    list-style: none;
    margin-left: 0;
    padding: 0;
}
ul.is-style-default li,
ul.is-style-check-list li {
    padding-left: 2rem;
    margin:5px 0;
}
ul.is-style-default li > div,
ul.is-style-check-list li > div{
    display: inline-block;
}
ul.is-style-default li:before,
ul.is-style-check-list li:before {
    content: "•";
    padding-right: 10px;
    display: inline;
    margin-left: calc(-1rem - 10px);
}
ul.is-style-check-list li:before {
    content: "✓";
}

/* tables */
.wp-block-table {
    margin-top: 2rem;
}
.alignfull.wp-block-table {
    width: 90% !important;
    margin-top:2rem !important;
    margin-bottom:2rem !important;
}
.wp-block-table table{
    border: none !important;
    overflow-y: auto;
    display: block;
    width: 100%;
}
.wp-block-table table thead{
    text-align: justify;
    border: none !important;
}
.wp-block-table table td{
    vertical-align: baseline;
    border: none !important;
    min-width: 120px !important;
}
.wp-block-table table th{
    border: none !important;
    min-width: 120px !important;
    text-align: left;
}
.wp-block-table table tr{
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.wp-block-table a{
    text-decoration: none;
    color: var(--wp--preset--color--primary);
}

.wp-block-table figcaption{
    text-align: right;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    margin-top: 1rem;
}

.wp-block-group.is-style-mobile-horizontal-scroll {
    overflow-y: auto;
}

/* channelizer fixes */
#hmg-channelizer-content-area {
    width: calc(100% + 34px);
    margin-left: -17px;
    overflow: hidden !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
footer .icon-size--regular svg {
    fill:white !important;
}
app-footer,
app-header {
    font-size: 16px;
}
#footer_banner_piano {
    display: none;
}



/* media queries -------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 600px) {
    .wp-block-table table{
        display: table;
    }
    .alignfull.wp-block-table {
        width: 95% !important;
    }
}
@media only screen and (min-width: 782px) {
    /* query loop blocks and columns */
    .wp-block-query .wp-block-post-template.is-layout-grid .wp-block-post:not(:last-child)::after,
    .linked-query.display-grid .teaser:not(:last-child)::after{
        width:1px;
        height: 100%;
        right:calc(-1rem - 0.5px);
        left:auto;
        top:0;
        bottom:auto;
        content:'';
        background-color:var(--wp--preset--color--black);
        opacity: 0.1;
        position: absolute;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:has(.wp-block-query:first-child):not(:last-child)::after,
    .wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:has(.teaser:first-child):not(:last-child)::after,
    .wp-block-columns.is-style-has-lines:not(.is-not-stacked-on-mobile) .wp-block-column:not(:last-child)::after {
        width:1px;
        height: 100%;
        right:calc(-1.5rem - 0.5px);
        left:auto;
        top:0;
        bottom:auto;
    }
    .wp-block-group.is-style-mobile-horizontal-scroll {
        overflow-y:unset;
    }
    .hb_custom_logo_link {
        margin-left: 50% !important;
        transform:translate(-50%);
        display: block;
    }
}
@media only screen and (min-width: 990px) {

    /* cover-blocks */
    .wp-block-cover.alignfull.has-custom-content-position {
        padding:8rem !important;
    }

    /* paddings and margins for alignfull blocks */
    .alignfull {
        margin-top:6rem;
    }
    .wp-block-group.alignfull.has-background,
    .wp-block-cover.alignfull{
        padding:6rem 0;
    }
    .alignfull + * {
        margin-top: 6rem;
    }
    .entry-content > *:last-child:not(.alignfull),
    .wp-site-blocks > *:last-child:not(.alignfull):not(.entry-content) {
        margin-bottom:6rem;
    }
}

@media only screen and (min-width: 1024px) {
    .no-channelizer {
        max-width: 1000px;
    }
}

/* special media query for padding fix */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #hmg-channelizer-content-area {
        width: calc(100% + 68px);
        margin-left: -34px;
    }
}

/* special media query for content width plus 10vw */
@media only screen and (min-width: calc(1200px + 10vw)) {
   
}

/* special media query for mobile font sizes */
@media only screen and (max-width: 600px) {
    h1,
    h1 {
        font-size: 2rem;
        line-height: 1.1875;
    }
    h2 {
        font-size: 1.5rem;
        line-height: 1.33;
    }
    h3 {
        font-size: 1.125rem;
        line-height: 1.22;
    }
    h4 {
        font-size: 1rem;
        line-height: 1.3125;
    }
}