/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Table of Content /*
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Table of content / Travel Tips / Additional Menu -------------------------------------------------------------------------- */

.hb_table_of_content,
.hb_travel_tips,
.hb_additional_menu                     { padding: 20px 20px 30px 20px; }

.hb_travel_tips,
.hb_additional_menu                     { background-color: #9bab9a; margin-top: 30px; }

.hb_toc_headline,
.hb_tt_headline,
.hb_am_headline                         { font-size: 1.125em; text-transform: uppercase; padding: 0 0 14px; background: transparent; color: white; border: none; display: block; width: 100%; text-align: left; }

.hb_toc_headline                        { border-bottom: 1px solid #9bab9a; margin-bottom: 20px; }
.hb_tt_headline,
.hb_am_headline                         { border-bottom: 1px solid #f7f7f7; margin-bottom: 20px; }

.hb_toc_headline .icon                   { color: #9bab9a; margin-right: 12px; }
.hb_tt_headline,
.hb_am_headline                         { color: #f7f7f7; }

.hb_toc_list ul                         { margin: 0 0 0 7px; list-style: none; counter-reset:list; font-weight: 500; letter-spacing: 0.05em; }
.hb_toc_list li                         { counter-increment: list; font-size: 14px; margin-bottom: 10px; line-height: 20px; }
.hb_toc_list li a:hover                 { color: var(--ahover-color); }
.hb_toc_list li:before                  { content: counters(list, ".") " "; color: #9bab9a; margin-left: -26px; }
.hb_toc_list li:nth-child(-n+9):before  { content: '0'counters(list, ".") " "; }

.hb_toc_list li ul                      { margin: 7px 0 0 16px; }
.hb_toc_list li ul li                   { font-size: 12px; font-style: italic; position: relative; }
.hb_toc_list li ul li::before           { position: absolute; margin: 0 0 0 -36px; }
.hb_toc_list li ul li:nth-child(-n+9):before { content: counters(list, ".") " "; }

.hb_tt_list ul,
.hb_am_list ul                          { list-style: none; padding-left: 14px; margin: 0; }
.hb_tt_list li::before,
.hb_am_list li::before                  { font-family: 'heimat'; content: "\e823"; display: inline-block; height: 1em; position: relative; margin-left: -14px; }

.hb_tt_list li,
.hb_am_list li                          { font-size: 14px; margin-bottom: 10px; line-height: 20px; }
.hb_tt_list li a,
.hb_am_list li a                        { color: #f7f7f7; margin-left: 10px; }
.hb_tt_list li a:hover,
.hb_am_list li a:hover                  { color: #2c2c2c; }

.hb_table_of_content.is_closed          { padding: 20px; }

.is_closed .hb_toc_headline             { display: flex; justify-content: flex-start; align-content: center; padding-bottom: 0; margin-bottom: 0; border-bottom: none; }

.is_open .hb_toc_headline .icon,
.is_closed .hb_toc_headline .icon       { font-family: 'heimat'; }

.is_closed .hb_toc_headline .icon       { margin-right: 12px; }

.hb_toc_list                            { transition:all 1s; -webkit-transition:all 1s; -moz-transition:all 1s; }

.hb_toc_list.is_collapsed               { display: none; }

.scaled                                 { border-radius:50%; }

/* Numbering content Headline ------------------------------------------------------------------------------------------------ */

.has_table_of_content .hb_page_column { counter-reset:hl1; }
.has_table_of_content .hb_page_column h2 { margin-left: 50px; }
.has_table_of_content .hb_page_column h2::before { counter-increment: hl1; content: counters(hl1, ".", decimal-leading-zero) " "; position: absolute; margin: 0 0 0 -50px; font-size: calc(var(--h2) - 4px); font-weight: 400; color: var(--ahover-color); }


/* MOBILE -------------------------------------------------------------------------------------------------------------------- */

@media only screen and (max-width : 1024px) {

.hb_list_closed { display: none; }

.hb_toc_headline,
.hb_tt_headline,
.hb_am_headline { cursor: pointer; }

.hb_tocfh { height: 100%; }
.hb_tocfh .hb_travel_tips,
.hb_tocfh .hb_additional_menu,
.hb_tocfh .hb_stt { display: none; }

.hb_ttfh { height: 100%; }
.hb_ttfh .hb_table_of_content,
.hb_ttfh .hb_additional_menu,
.hb_ttfh .hb_stt { display: none; }

.hb_amfh { height: 100%; }
.hb_amfh .hb_table_of_content,
.hb_amfh .hb_travel_tips,
.hb_amfh .hb_stt { display: none; }

.hb_tt_list ul,
.hb_am_list ul { width: 100%; text-align: center; }

.hb_tt_list ul li,
.hb_am_list ul li { font-size: 1.125em; line-height: 1.625em; }

#toc_icon[class^="hb-"]:before,
#toc_icon[class*=" hb-"]:before,
#tt_icon[class^="hb-"]:before,
#tt_icon[class*=" hb-"]:before,
#am_icon[class^="hb-"]:before,
#am_icon[class*=" hb-"]:before { color: var(--txt-col-dm); margin-left: 0px!important; margin-right: 0; }

/* .hb_toc_list[data-state=closed] { display: none; }
.hb_toc_list[data-state=open] { display: inherit; overflow-y: auto; overscroll-behavior-y: contain; padding-top: 120px; margin-bottom: 30px; } */

.hb_stt.btt_closed { position: relative; top: 0; bottom: 0; margin-top: 0; width: 25%; flex-grow: 1; }
.hb_stt.btt_closed #stt_btn { display: flex; margin-left: 0; line-height: 0; width: 100%; height: 100%; justify-content: center; align-items: center; }
.hb_stt.btt_closed #stt_btn i[class^="hb-"]:before,
.hb_stt.btt_closed #stt_btn i[class*=" hb-"]:before { margin-left: 0px!important; margin-right: 0; }
.hb_stt.btt_closed span { display: none; }

#hb_back_to_top { position: static; }
#hb_back_to_top a span { display: none; }

}

body {
    background-color: #9bab9a !important;
}

@media screen and (min-width: 1101px) and (max-width: 1220px) {
    #sidebar {
        min-width: 350px !important;
    }

    .hb_page_column.col_content {
        max-width: 700px !important;
        padding: 0 20px !important;
    }

    .hb_table_of_content.mobile {
        display: none;
    }
}

/* Hide meta menu on desktop */
#meta_menu {
    display: none;
}

@media screen and (max-width: 1100px) {
    /* Hide desktop sidebar */
    #sidebar {
        display: none;
    }

    /* Overflow hleper if overlay is open */
    .overflow-hidden {
        overflow: hidden;
    }

    #meta_menu {
        position: relative;
        display: flex;
    }

    .meta_menu_buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9998;
        display: flex;
        background: rgb(44,44,44);
        max-height: 72px;
    }

    .meta_menu_buttons > button,
    .meta_menu_buttons > a {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        background: rgb(44,44,44);
        border: none;
        border-right: 1px dotted white;
        color: #fff;
        padding: 1.5rem 2rem;
        cursor: pointer;
    }

    .meta_menu_buttons > a:last-of-type {
        border-right: 0 !important;
    }

    .meta_menu_buttons > button > i {
        display: flex;
        font-size: 1.25rem;
        justify-content: center;
    }

    .meta_menu_buttons > button > i::before,
    .meta_menu_buttons > a > i::before {
        margin: 0 !important;
    }

    .meta_menu_buttons > button > span,
    .meta_menu_buttons > a > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .meta_menu_overlay_wrapper {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
    }

    .meta_menu_overlay {
        display: none;
        position: fixed;
        background-image: url(https://viel-unterwegs.de/wp-content/uploads/2021/03/dark-bg.jpg);
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
        padding: 7rem 2rem calc(72px + 2rem);
    }

    .meta_menu_overlay.visible {
        display: flex;
        width: 100vw;
        align-items: end;
    }

    .meta_menu_overlay .hb_travel_tips,
    .meta_menu_overlay .hb_additional_menu {
        background: transparent;
        padding: 0;
        margin: 0;
    }

    .meta_menu_overlay .hb_tt_headline,
    .meta_menu_overlay .hb_am_headline {
        border-bottom-style: dotted;
    }

    .meta_menu_overlay * {
        color: #fff;
        text-align: left!important;
    }

    .meta_menu_overlay ul                               { list-style: none; counter-reset:list; font-weight: 500; letter-spacing: 0.05em; padding-left: 0 !important; margin: 0; overflow: scroll; max-height: 70vh }
    .meta_menu_overlay li                               { position: relative; counter-increment: list; font-size: 1.125rem !important; margin-bottom: 10px; line-height: 1.4 !important; padding-left: 2rem; }
    .meta_menu_overlay li a:hover                       { color: var(--ahover-color); }
    .meta_menu_overlay li:before                        { position: absolute; left: 0; top: 0; content: counters(list, ".") " "; color: #9bab9a; font-family: Inter, Arial, sans-serif; margin-left: 0 }
    .meta_menu_overlay li:nth-child(-n+9):before        { content: '0'counters(list, ".") " "; }

    .meta_menu_overlay li ul                            { margin: 1rem 0; }
    .meta_menu_overlay li ul:last-child                 { margin-bottom: 0; }
    .meta_menu_overlay li ul li                         { font-size: 1rem !important; font-style: italic; position: relative; }
    .meta_menu_overlay li ul li::before                 { position: absolute; left: 0; top: 0; }
    .meta_menu_overlay li ul li:nth-child(-n+9):before  { content: counters(list, ".") " "; }

    .meta_menu_overlay li a                             { margin-left: 0; }

    .meta_menu_overlay_wrapper .close-button {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: transparent;
        border-top: 1px dotted #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        height: 72px;
        color: #fff;
    }

    .meta_menu_overlay_wrapper .close-button i::before {
        margin-right: 0;
    }
}