.region.region-highlighted {
    min-height: 50vh;
    display: flex;
    flex-direction:column;
    gap:2rem;
    align-items: center;
    justify-content: center;
    align-content: center;
    background: url(/sites/default/files/custom/Rechteck%2012x.png);
    background-position: right bottom;
    background-size: cover;
}


/* global */
body {
    background: white!important;
}
/* p, body a {
    font-size: 1.25em;
    line-height: 1.5em;
} */
.main-container a {
    color: #5bb56d;
}
.main-container a:hover {
    color: #3f804c;
    text-decoration:none;
}
header#page-title {
    padding-block: 3rem;
}
.antwort-option-body a {
    font-size: 20px!important;
    text-decoration: underline!important;
    color: #3c3c3c!important;
}


/* Header */
.region.region-navigation-collapsible {
    display: flex;
    justify-content: center;
}

header#navbar > div {
    padding-inline: 3rem;
}

header#navbar .region-navigation a.name.navbar-brand {
    color:#3D3D3D;
    text-decoration:none;
    font-size:22px;
    font-weight:bold;
}
section#block-dxpr-theme-sprachumschalter {
    flex-grow: 1;
}

.region.region-navigation-collapsible {
    display: flex;
    justify-content: center;
}

section#block-dxpr-theme-main-menu {
    flex-grow: 1;
}
section#block-dxpr-theme-main-menu a {
    padding-inline: 2rem;
    font-weight: bold;
    color: black;
}

.dxpr-theme-main-menu a {
    text-transform: none!important;
}

section#block-dxpr-theme-sprachumschalter a {
    font-size: .9em!important;
}

section#block-dxpr-theme-sprachumschalter li.is-active {
    display: none;
}

ul.menu.nav.navbar-nav {
    height: 100%;
    display: flex;
    flex-direction: row;
}
ul.menu.nav.navbar-nav a {
    height: auto!important;
    line-height: initial!important;
    padding-block: 25px;
}
ul.menu.nav.navbar-nav a.is-active:after {
    content: "";
    display: block;
    height: 2px;
    width: 125%;
    background: green;
    transform: translate(-10%,10px);
}
.dxpr-theme-header--top.affix ul.menu.nav.navbar-nav a.is-active:after {
    transform: translate(-10%,5px);
}

.wrap-branding {
    display: flex!important;
    flex-direction: column;
    justify-content: center;
    line-height: 25px!important;
}

/* Suchfeld */

/*Überschrift Block*/
section#block-dxpr-theme-stellensieihrefrage {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

section#block-dxpr-theme-stellensieihrefrage * {
    max-width: 60%;
    text-align: center;
    margin-inline: auto;
}

/*block title*/
section#block-dxpr-theme-stellensieihrefrage h2 {
    font-size: 58px;
    font-weight: 600;
    color: #3C3C3C!important;
}

form#search-block-form .input-group {
    background: white;
    border-radius: 50px;
    width: 60vw;
    height: 80px;
    display: grid;
    grid-template-columns: 20px auto 20px;
    flex-direction: row;
    padding-inline: 3rem;
    gap: 1rem;
}

form#search-block-form .input-group * {
    position: relative;
}

form#search-block-form .input-group .icon {
    grid-column: 1/2;
    grid-row: 1;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: flex-start;
}

form#search-block-form .input-group input#edit-keys {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    border: none;
    line-height: 1.5em;
    font-size: .95em;
}
form#search-block-form .input-group .icon i {
    line-height: 1.5em;
    background-size: contain;
}


/* zweite Seitenleiste */
/* .field.field--name-field-externe-tags * {
    color: #8f8f8f;
}
.field.field--name-field-externe-tags .field__item:hover * {
    color: #3d3d3d;
} */
.field.field--name-field-externe-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.field.field--name-field-externe-tags .field__item:after {
    content:",";
}
.field.field--name-field-externe-tags .field__item:last-child:after {
    content:"";
}
.view-aehnliche-inhalte .views-row {
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: 5px;
}

.view-aehnliche-inhalte .views-row::before {
    content: "-";
    display: inline-block;
    color: #5bb56d;
}

/* Main */
h1.page-title {
    color: #5bb56d!important;
}
.path-frontpage .main-container {
    margin-block: 5rem;
}

/*Gegenfragen*/
.gegenfrage-wrapper {

}

.gegenfrage-wrapper2 {
    padding: 2rem;
    padding-top: 0;
}

.antworten-wrapper {
    padding: 2rem;

}


/* Fragen */
h1, .html #page-title .page-title {
    padding-block: 2rem;
    font-size: 3em;
    line-height: 1.5;
}
h2.question-header,h2.block-title{
    color: #62af6c!important;
}

/*Accordion*/
.gegenfrage-wrapper button.accordion-button {
    font-size: inherit;
    position: relative;
    min-height: 50px;
    padding: 1rem 0;
}

button.accordion-button span.accordion-icon {
	width: 45px;
    height: 45px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}
button.accordion-button.collapsed span.accordion-icon{
	background-image: url('data:image/svg+xml,<svg class="btn-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="plus-circle"><path fill="%2362af6ca2" d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"></path></svg>');	
}

button.accordion-button span.accordion-icon{
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="minus-circle"><path fill="%2362af6c" d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H8a1,1,0,0,0,0,2h8a1,1,0,0,0,0-2Z"></path></svg>');
}
button.accordion-button {
    font-weight: normal;
    color: #3d3d3d!important;
    line-height: 2em;
    font-size: 24px!important;
}

button.accordion-button.collapsed {
    color: #3d3d3d!important;

}
.accordion-single {
    padding: 1rem 2rem;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}
.antwort-option-body {
    max-width: 80%;
}


/* Modal Cat Menu */

i.btn-close.uil.uil-multiply::before {
    color: #ff3737;
    font-size: 3rem;
}

i.btn-close.uil.uil-multiply {
    font-size: 3rem;
}
.btn-open-cat {
    position: fixed;
    right: 0;
    top: 50vh;
    height: 250px;
    width: 250px;
    aspect-ratio: 16/9;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    padding: 0;
    margin: 0;
    z-index: 2;
    transform: translateX(25px);
}

.btn-open-cat[lang="lang-de"]{
    background: url(/sites/default/files/custom/vzs-btn.svg);
}
.btn-open-cat[lang="lang-it"]{
    background: url(/sites/default/files/custom/vzs-btn_ita.svg);
}
.modal {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  width: 60vw;
  padding: 3rem;
  max-height: 70vh;
  left: 100%; /* initially position the modal off-screen to the right */
  position: fixed;
  top: 70%;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 15px;
  transform: translate(-50%, -70%);
  animation: fadeInRight 0.6s ease forwards; /* apply animation */
}

.modal .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal input {
  padding: 0.7rem 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1.2em;
}

.modal p {
  font-size: 0.9rem;
  color: #777;
  margin: 0.4rem 0 0.2rem;
}

.modal-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 2rem;
}
.modal-body .view-content {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    justify-items: center;
    grid-auto-rows: minmax(120px, auto);
    align-items: center;
    row-gap: 2em;
    column-gap: 2em
}

.felex.modal-header {
    /* position: absolute; */
}

/* .modal-pre {
    position: absolute;
    width: 100%;
    height: 180px;
    background: url(/sites/default/files/custom/search_background.png);
    background-position: right;
    background-size: cover;
    display: block;
    top: 0;
    left: 0;
}
 */
.modal-pre:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.3561799719887955) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.15449929971988796) 55%, rgba(0,0,0,0.36) 100%);
background: linear-gradient(0deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.36) 45%, rgba(0,0,0,0.36) 55%, rgba(0,0,0,0.05) 100%);
}

.felex.modal-header {
    z-index: 3;
}

.felex.modal-header * {
    font-size: 3em;
    color: #3c3c3c;
}

i.btn-close.uil.uil-multiply {
    cursor:pointer;
}

.modal-body .view-content a {
    font-size: 1.75em;
    color: #5BB56D;
}
.modal-body .view-content a:hover {
    font-size: 1.75em;
    color: #40814d;
}

.modal .views-row {
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    border-radius: 5px;
}

button {
  cursor: pointer;
  border: none;
  font-weight: 600;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  font-weight: 700;
  text-align: center;
  font-size: 1em;
}

.btn-open {
  position: absolute;
  bottom: 150px;
}

.btn-close {
  transform: translate(10px, -20px);
  padding: 0.5rem 0.7rem;
  background: #eee;
  border-radius: 50%;
}
section#cat-menu-modal i {
    background: none;
    box-shadow: none;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 1;
}
.modal {
  z-index: 2;
}
.hidden {
  display: none;
}

/* .modal-footer {
    height: 30%;
    background: #5BB56D;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    clip-path: polygon(0 60%, 100% 30%, 100% 100%, 0% 100%);
} */

@keyframes fadeInRight {
  from {
    left: 0%; /* animate from right */
  }
  to {
    left: 50%; /* animate to center */
  }
}
@media (max-width:1200px) {
    section#block-dxpr-theme-stellensieihrefrage * {
        max-width: 90%;
    }
    h2 {
      font-size: 22px!important;
  }
    section#block-dxpr-theme-stellensieihrefrage h2,
    h1, .html #page-title .page-title{
      font-size: 28px!important;
    }
    .gegenfrage-wrapper2 {
      padding-inline:1rem!important;
    }
    .accordion-single {
      padding: 1rem 2rem;
      padding-inline:1rem!important;
      box-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
  }
  button.accordion-button span.accordion-icon {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
    top: auto!important;
    bottom: 0px;
    transform: none!important;
    }
    form#search-block-form .input-group {
      width: 85vw!important;
      height: 60px!important;
      padding-inline: 2rem!important;
      gap: 1rem;
  }
  }
@media (max-width:1200px) {
    /* .modal {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.4rem;
        width: 850vw;
        padding: 3rem;
        max-height: 85vh;
        left: 100%; 
        position: fixed;
        top: 85%;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 15px;
        transform: translate(-50%, -85%);
        animation: fadeInRight 0.6s ease forwards;
      } */
      .btn-open-cat {
        height: 150px;
        width: 150px;
    }
      .modal {
        z-index: 3;
        flex-direction: column;
        justify-content: center;
        gap: 0.4rem;
        width: 85vw;
        padding: 0rem;
        max-height: 70vh;
        left: 100%;
        position: fixed;
        top: 57%;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 15px;
        transform: translate(-50%, -70%);
        animation: fadeInRight 0.6s ease forwards;
    }
    .felex.modal-header * {
        font-size: 1.75em;
        color: #3c3c3c;
    }
    .modal-body .view-content {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
        justify-items: center;
        grid-auto-rows: minmax(50px, auto);
        align-items: center;
        row-gap: 1em;
        column-gap: 1em;
    }
    .modal-body .view-content a {
        font-size: 1.25em;
        color: #5BB56D;
    }
    .modal-body .view-content a:hover {
        font-size: 1.3em;
        color: #40814d;
    }
}
@media (max-width: 960px){

    /* TopBar */
    section#block-dxpr-theme-stellensieihrefrage {
        display: none;
    }
    .region.region-highlighted {
        min-height: 20vh;
    }
    
    .path-frontpage section#block-dxpr-theme-stellensieihrefrage {
        display: block;
    }
    .path-frontpage .region.region-highlighted {
        min-height: 50vh;
        background-size: auto;
    }


    .btn-open-cat {
        top: 21vh;
        transform: translateX(20px);
    }
    .btn-open-cat {
        height: 120px;
        width: 120px;
    }
    .path-frontpage .btn-open-cat {
        top: 50vh;
        transform: translateX(25px);
    }
    .path-frontpage .btn-open-cat {
        height: 150px;
        width: 150px;
    }


    .modal {
        position: fixed!important;
        width: 100%;
       height: 100%;
       min-height: 100vh;
       max-height: fit-content;
       top: 0;
       bottom: 0;
       z-index: 9999;
       transform: none;
       left: 0!important;
       border-radius: 0;
    }
    header#page-title {
        padding-bottom: 0;
    }
    h1, .html #page-title .page-title {
        font-size: 26px!important;
        line-height: 30px;
        padding-top: 10%!important;
    }
    button.accordion-button {
        color: #62af6c!important;
        line-height: 1.5em;
        font-size: 18px!important;
    }
    .accordion-single {
        padding-inline: 0rem!important;
    }
    section#block-dxpr-theme-stellensieihrefrage {
        background: #ffffffbd;
        padding-block: 1rem;
    }

    /* Footer */
    .region.region-footer .flex {
        flex-direction: column-reverse;
        text-align: center;
        padding-bottom: 1.5rem!important;
        gap: 1rem;
    }
    .dxpr-theme-footer {
        height: auto!important;
        clip-path: polygon(0 30%, 100% 0%, 100% 100%, 0% 100%)!important;
    }
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    
}


/* Fragen GRID - global */
.view-am-haeufigsten-gewaehlt .view-content, 
.view-id-taxonomy_term.view-display-id-page_1 .view-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 5em;
    margin-block: 3rem;
}
.frage-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 1rem;
}

.fragen-fp * {
    text-decoration: none!important;
}

.frage-cat {
    color: #3D3D3D;
    font-size: 24px!important;
    line-height: 1.8em;
    font-weight: 600;
}

.frage-container > .frage-cat,
.frage-container > .frage-cat * {
    font-size: 13px!important;
    color: #3D3D3D!important;
    text-decoration: none;
}


.frage-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 1rem;
}

.fragen-fp * {
    text-decoration: none!important;
}

.frage-cat {
    color: #3D3D3D;
    font-size: 24px!important;
    line-height: 1.8em;
    font-weight: 600;
}

.frage-container > .frage-cat,
.frage-container > .frage-cat * {
    font-size: 16px!important;
    color: #3D3D3D!important;
    text-decoration: none;
    font-weight: 500;
}


/* custom footer */
.dxpr-theme-footer {
    background-color: #5bb56d;
    color: #ffffff;
    border-color: #ffffff;
    padding: 0;
    height: 30%;
    background: #5BB56D;
    /* position: absolute; */
    bottom: 0;
    left: 0;
    width: 100%;
    clip-path: polygon(0 60%, 100% 30%, 100% 100%, 0% 100%);
}
.region.region-footer .flex {
    display: flex;
    justify-content: space-between;
    padding-block: 3rem;
    padding-inline: 3rem;
}
footer.dxpr-theme-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
span.footer-fs-2 {
    font-size: 24px;
}



ol.node_search-results p.search-result__info, 
ol.node_search-results .search-result__snippet {
    display: none;
}
form#search-form a#edit-help-link {
    display: none;
}
section#block-dxpr-theme-content h2 {
    padding-block: 1rem;
}
ol.node_search-results p.search-result__info, 
ol.node_search-results .search-result__snippet {
    display: none;
}
form#search-form a#edit-help-link {
    display: none;
}
section#block-dxpr-theme-content h2 {
    padding-block: 1rem;
}

ol.node_search-results li {
    list-style: none;
}

ol.node_search-results li:before {
    content: "";
    /* display: inline-block; */
    background: #66b572;
    width: 15px;
    height: 15px;
    border-radius:50%;
    
}

ol.node_search-results li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

ol.node_search-results h3 {
    margin: 0;
}

@media (max-width:980px){
    .navbar-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    }
    
    header#navbar > div {
        padding-inline: 1rem;
    }
    
nav#dxpr-theme-main-menu,
nav#dxpr-theme-main-menu ul{
    background: white;
}

ul.menu.nav.navbar-nav.menu__level.menu__level--current {
    height: auto!important;
}

.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle span,
.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle span:before,
.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle span:after{
    background: #66b572!important;
}
.body--dxpr-theme-nav-mobile .dxpr-theme-header #dxpr-theme-menu-toggle.navbar-toggle--active span {
    background-color: rgba(0,0,0,0)!important;
}
}