/* ------------------------
	SEARCH
	------------------------ */	
	/*display*/
	#relevanssi #searchform label,
	#relevanssi #searchresult .entry-meta { display: none; }
	
	/* SEARCH FORM */
	#relevanssi #searchform {
        margin: auto; 
        width: 50%; 
        background: #fff;
        padding: 1rem;
        border: 0px solid #E6E6E6;
        border-radius: 1rem; 
    }
    #relevanssi #searchform div { position: relative; }
    #relevanssi #searchform input[type="submit"] {
        all: unset;
        cursor: pointer;
         
		position: absolute;
        content: "";
		top: -5px;
		left: 5px;
		
		background: url("../../img/svg/icon/icon_search_small.svg") no-repeat;
		width: 25px;
		height: 25px;
		transform-origin: 0px 0px;
        transform: scale(1.5);
        transition: .2s ease all;
	}
	#relevanssi #searchform input[type="submit"]:hover { transform: scale(1.7);}
    #relevanssi #searchform input[type="text"] { 
		all: unset;
        
        margin: auto;
        width: calc(100% - 8rem);
        margin-left: 4rem;
        font-size: 1.6rem;
        color: #393A42;
    }
    #relevanssi #searchform input[type="text"]::placeholder { text-align: center; }

    /* ------------------------ 
	HELP-CENTER OVERVIEW
	------------------------ */	
    /*topheader*/
    .hp-overview #topheader,
    .error-search #topheader {
        padding: 2rem 0 3rem; 
        margin-bottom: 3rem;
    }
    .hp-overview #topheader .title,
    .error-search #topheader .title,{
        padding: 1rem 0 2rem;
    }

    /*grid*/
    section .hc-grid {padding: 0 1rem;}

    .hp-overview .hc-grid {padding-bottom: 3rem; }
    .hp-overview .hc-grid:last-of-type {padding-left: 15px;}

    .hc-grid #flexgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    
    .hc-grid .no-p-bottom {padding-bottom: 0}
    .hc-kachel.b-radius p {padding-bottom: 1rem;}
    .hc-kachel.b-radius p br {display: none;}
    #flexgrid .hc-kachel .c-box {padding: 15px;}

    .hc-kachel#flexgrid .title {width: 100%;}
    .hc-kachel h5 { line-height: 130%; }

    /*category button = absolute*/
    /*.hc-kachel .c-box-inner {
        padding-bottom: 5rem; 
        height: 100%
    }
    .hc-kachel .category {
        position: absolute;
        left: 0px;
        bottom: 3rem; 
    }*/
    
    /*read more*/
    .hc-kachel #butbox.post {border-top: 1px solid #ddd;}
    
    /*hover*/
    /*.hc-kachel:hover .title,*/
    .hc-kachel .catbut a:hover {color: #f0aa00;}
    .hc-kachel .catbut a {text-decoration: underline;}

    /*post-weitere*/
    ul.weitere {padding-left: 1rem; }
    ul.weitere li  {padding: 0.5rem 0;}
    ul.weitere li .title {padding-bottom: 0;}
    ul.weitere li a:hover .title {opacity: .7;}
    
    /* ------------------------ 
	HELP-CENTER SEARCH + CAT RESULT + ERRROR 404
	------------------------ */	
    body.search-results article > h1 {display: none; }
    body.search-no-results #error-404 { display: block;}

    /* ------------------------ 
	HELP-ARTICLE PILLAR PAGES
	------------------------ */	
    /*box*/
    #hp-article #pillar .contain .col .box:has(ol.post-list) {
        padding: 1rem 1rem 3.2rem 1rem; 
        position: relative; 
    }

    /*button = absolute */
    #hp-article #pillar .contain .col .box:has(ol.post-list) .button { 
        padding: 0 1rem;
        position: absolute;
        left: 0px;
        bottom: .5rem; 
    }
    #hp-article #pillar .contain .col .button a.but:hover { 
        text-decoration: none;
    }
    #hp-article #pillar .contain .col .button a.but p { 
        font-family: 'Roboto_Medium',sans-serif;
    }

    /*related links*/
    #hp-article ol.post-list { padding-bottom: 1rem;}
    #hp-article a.post-link {display: block;}
    #hp-article a.post-link:hover {color: #f0aa00;}
    

    /* ------------------------ 
	HELP-ARTICLE POST
	------------------------ */	
    /* GRID for article */
    #hp-article #post > .col-9 { padding-right: 4rem;}

    /*display cat*/
    #hp-article #topheader .cat.sidebar,
    #hp-article #TopPost .cat.topheader,
    .hc-kachel .cat.topheader {display: none;}


    /* ---- TOPHEADER ----  */
    #hp-article #topheader {
        margin-top: 1rem;
        padding: 2rem 0 1.5rem;
    }

    /*padding*/
    #hp-article .inner.pad {padding: 0 1rem;}
    #hp-article #topheader H1 {padding-bottom: 1rem;}
    #hp-article #topheader #post-title {padding: 5rem 0 3rem; }

    /*cat buttons*/
    #hp-article a.but.cat {margin: .5rem .5rem 0 0; }
    #hp-article a.but p {
        text-transform: none; 
        padding: .35em .75em;
        font-family: 'Roboto_Regular',sans-serif;
    }
    #hp-article a.but.cat:hover p {
      box-shadow: none;
      color: #f0aa00;
    }

    .hc-kachel a.cat {
        border-radius: 6px;
        padding: .25em .65em;
        margin: .5rem .5rem 0 0; 
        font-size: .8rem;
        display: inline-block;
    }
    .hc-kachel a.cat:hover {
       box-shadow: none;
       color: #f0aa00;
    }

    /*breadcrumbs*/
    #hp-article #breadcrumbs p { 
        margin-top: 1rem;
    }


    /* ---- SIDEBAR ---- */
    /*TopPost*/
    #post #TopPost {padding: 0;}
    #post #TopPost .contain { 
        border-radius: 6px; 
        padding: 1rem;
    }

    #post #TopPost .contain[class*="tip"] p {padding-bottom: 1rem;}
    #post #TopPost .contain[class*="tip"] p:last-of-type {padding-bottom: 0;}

    #post #TopPost .contain:not([class*="pcv-bg-"]) {
        border: 1px solid #ddd; 
        margin: 1rem 0; 
    }

    /* headline */
    #post #TopPost .headline { padding-bottom: .5rem; }
    #post #TopPost .headline .icon {
        font-size: 2rem; 
        vertical-align: bottom;
    }

    /* list */
    #post #TopPost ul > li {position: relative; }
    #post #TopPost ul > li:before {
        content: '';           
        position: absolute;
        left: 0;
        top: 0.5rem;         
        width: 0.4rem;
        height: 0.4rem;
        background-color: #393A42;  
        border-radius: 50%;  
    }
    #post #TopPost ul > li a { 
        width: 100%; 
        padding-left: 1rem;
    }
    #post #TopPost ul > li a:hover {text-decoration: none;}
    #post #TopPost .cat.sidebar { padding-left: 1rem;}
    
    /*cat-list*/
    #post #TopPost .cat { min-width: 0; }
    #post #TopPost .cat-list {
        display: block;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /*icons sidebar*/
    #hp-article #sidebar .c-icon:before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
       
        margin: 0 7px -4px 0;
        transform: scale(1.3);
        
        background: black;
        /*background: #f0aa00;*/
        mask-size: contain;
        
        /*background-size: contain;
        background-repeat: no-repeat;*/
    }
    
    #AnchorMenu .headline:before {
        -webkit-mask: url("../../icons/list-icon.svg") no-repeat center;
        mask: url("../../icons/list-icon.svg") no-repeat center;
    }
    #tipp .headline:before {
        -webkit-mask: url("../../icons/info-circle-icon.svg") no-repeat center;
        mask: url("../../icons/info-circle-icon.svg") no-repeat center;
    }
    /*#AnchorMenu .c-icon:before {
        background-image: url("../../icons/sidebar/list-icon-black.svg");
    }
    #tipp .c-icon:before {
        background-image: url("../../icons/sidebar/info-circle-icon-black.svg");  
    }*/

    /* socialbox */
    #SocialBox {padding-top: 0px;}


    /* ---- SECTION ---- */
    #hp-article #post .inner.col-10 {
        width: 100%;
        max-width: none;
    }
   
    /*2er / 3er-Grid*/
    #hp-article #post .inner.col-10 #copysingle.col-4,
    #hp-article #post #textbox .contain.row > .col.left-right { padding: 15px;}

    /* ---- HP GLOBAL ---- */
    /*padding*/
    /*#hp-article #textbox .box {padding: 15px; }
    #hp-article #textbox #copysingle {padding: 0 0 2rem;}*/
    /*#hp-article #textbox #copysingle:has(.box > #copy > :is(h1, h2):last-of-type) {padding-bottom: 0;}*/
   
    /*divider*/
    #hp-article #textbox #copysingle .divider-inline {padding: 15px;}
    /*#hp-article #textbox #copysingle .divider-inline:last-child {padding-bottom: 0;}*/

    /*bg-color*/
    /*#hp-article section#textbox .box.background,
    #hp-article section#textbox .box.outline {padding: 1.5rem 1rem;}*/
    
    /*list*/
    #hp-article ul.dot > li,
    #hp-article .editor ul > li {list-style: disc;}
    
    /*br*/
    #hp-article .editor p:has(> br:only-child) {padding-bottom: 0; }
    /*bu*/
    #hp-article #copy p.bu {padding-bottom: 0;}
    #hp-article section#textbox .contain .bu {padding: 1.5rem 0 0;}

    /*image*/
    #hp-article section#textbox #copysingle .img-outer {padding-top: 1rem;}


    /* ---- MODUL TEXTBOX ---- */
    #hp-article section#textbox .intro {padding: 0 15px;}
    #hp-article section#textbox .box .headline {padding-bottom: 1rem;}
    #hp-article section#textbox:last-of-type {margin-bottom: 0;}

    /*intro.button*/
    #hp-article section .but_repeat.intro {padding-top: 1rem;}
    

    /* ---- VIDEO ---- */
    #hp-article section#video .videobox.col {padding: 15px 0px; }

    /*img + video*/
    #hp-article section#textbox .img-wrap {
        /*max-width: 700px;*/
        object-fit: contain;
    }
    /*video*/
    #hp-article section#textbox .img-contain .video-wrap { margin: auto;}
    #hp-article section#textbox .wp-video {
        aspect-ratio: 16 / 9;
    }
    #hp-article section#textbox .wp-video .mejs-container {
        width: 100% !important;
        height: 100% !important;
    }

    /*------ COPY SINGLE COLORBOX (codeexample) ------ 
    tablebox */
    #copysingle #tablebox > * {margin-bottom: 3rem;}
    #copysingle #tablebox:last-child > * {margin-bottom: 0;}

    #copysingle #tablebox ul { 
        border: 1px solid #ddd; 
        border-radius: 6px;
    }
    #copysingle #tablebox ul li {
        border-bottom: 1px solid #ddd;
        padding-bottom: 0;
    }
    #copysingle #tablebox ul li:first-child {background: #eff1f2;}
    #copysingle #tablebox ul li:last-child {border-bottom: none;}
    #copysingle #tablebox ul li div.second {border-left: 1px solid #ddd !important;}

    #copysingle #tablebox ul li div {
        font-size: 1.05rem;
        line-height: 1.45rem;  
    }
    
    /* listbox*/
    #copysingle .copylist {
        background: #eff1f2;
        padding: 1rem;
        border-radius: 6px;
        position: relative; 
    }
    #copysingle .copylist:before {
        content: '';
        position: absolute;
        left: 0px;
        top: 0px;
        width: 3rem;
        height: 100%;
        background: rgba(128, 128, 128, .3); 
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    #copysingle .copylist p {
        vertical-align: top;
        font-size: 0.9rem;
        line-height: 1.25rem;
    }
    #copysingle .copylist p:last-of-type, 
    #copysingle .copylist .editor > :last-child:is(p) {
      padding-bottom: 0 !important;
    }
    #copysingle .copylist p .num {
        width: 4rem; 
        display: inline-block;
        user-select: none;
        -webkit-user-select: none; 
        -ms-user-select: none; 
    }

    /* ---- COPY/IMG ---- */
    #hp-article #post #copyimg .box,
    #hp-article #post #copyimg .box.gridbox{
        width: 100%;
        margin-left: 0;
    }
    

    /* ---- BLOGFOOTER ---- */
    #hp-article section#blogfooter {padding: 0;}
    #hp-article section#blogfooter #author {padding: 1rem 0;}
    
    /* -------- VOTE ICON -------- */
    #hp-article #post button.vote {
        cursor: pointer;
        border: none;
        background: none;
        padding: 0 5px;
        font-size: 1.5rem;
    }

    /* -------- ANCHOR -------- */
    /*title, font*/
    #AnchorMenu a.title,
    #AnchorMenu ul > li { 
        font-size: .9rem;
        line-height: 140%;
    }
    
    #hp-article #AnchorMenu ul > li {
        padding: .3rem 0;
    }
    #hp-article #AnchorMenu ul > li:last-of-type {
        padding-bottom: 0;
    }
    #hp-article #AnchorMenu ul > li:before { display: none; }
    #hp-article #AnchorMenu ul > li a {
        color: #757575; 
        text-decoration: underline;
        padding-left: 0;
    }
    #hp-article #AnchorMenu ul > li:hover a {
        color: #ffb80b;
        /*text-decoration: none;*/
    }
    
    /* anchor icon on headline*/
    html {scroll-behavior: smooth;}
    #hp-article :is(H1[id], H2[id], H3[id]) { 
        scroll-margin-top: 1rem;
        position: relative;
    }
    #hp-article .copy-anchor {
        padding-left: 2px;
        opacity: 0;
        cursor: pointer;
    }
    #hp-article .copy-anchor img {
        height: 16px !important;
        width: 16px  !important;
    }
    #hp-article :is(H1[id], H2[id], H3[id]):hover:not(.intro *) .copy-anchor { 
        opacity: 1;
    }