@CHARSET "UTF-8";

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.mobile-grid-5, .mobile-grid-10, .mobile-grid-15, .mobile-grid-20, .mobile-grid-25, .mobile-grid-30, .mobile-grid-35, .mobile-grid-40, .mobile-grid-45, .mobile-grid-50, .mobile-grid-55, .mobile-grid-60, .mobile-grid-65, .mobile-grid-70, .mobile-grid-75, .mobile-grid-80, .mobile-grid-85, .mobile-grid-90, .mobile-grid-95, .mobile-grid-100, .mobile-grid-33, .mobile-grid-66, .grid-5, .grid-10, .grid-15, .grid-20, .grid-25, .grid-30, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100, .grid-33, .grid-66, .grid-container {
    padding-left: 20px;
    padding-right: 20px;
}

html {
    font-size: 100%;
    scroll-padding-top: var(--qui-scroll-padding);
}

.grid-parent,
.grid-container.grid-parent {
    padding-left: 0;
    padding-right: 0;
}

/* extra grid class  */
.grid-children-container {
    left: -20px;
    width: calc(100% + 40px);
}

body {
    height: 100%;
    background-color: var(--qui-colors-body-bgColor);
}

.qui-sitetypes-sitemap-block-category .control-background {
    background-color: var(--qui-colors-primary);
}

/**
 * Pace
 */
.pace .pace-progress {
    background-color: var(--qui-colors-primary);
}


/***************/
/* Page layout */
/***************/
.noSidebar--narrowContent {
    margin-left: auto;
    margin-right: auto;
    max-width: 750px;
}

@media screen and (min-width: 768px) {
    .tpl-layout-two-columns {
        display: grid;
        grid-gap: 3rem;
    }

    .tpl-layout-two-columns--rightSidebar {
        grid-template-areas: "main sidebar";
        grid-template-columns: minmax(500px, 1fr) 30%;
    }

    .tpl-layout-two-columns--leftSidebar {
        grid-template-areas: "sidebar main";
        grid-template-columns: 30% minmax(500px, 1fr);
    }
}

.tpl-layout-two-columns__main {
    grid-area: main;
}

.tpl-layout-two-columns__sidebar {
    grid-area: sidebar;
}



/** page header
 * ========================================================== */
.page-header {
    display: grid;
    padding-top: var(--qui-page-header-padding-block);
    padding-bottom: var(--qui-page-header-padding-block);
    position: relative;
    min-height: var(--qui-header-minHeight);
}

.page-header__imageWrapper {
    position: absolute;
    inset: 0;
}

.page-header__image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
    object-position: var(--qui-header-img-position, center);
}

.page-header__container {
    position: relative;
    height: 100%;
    width: 100%;
}

.page-header-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: var(--qui-header-text-pos);
}

.page-header-text__title,
.page-header-text__short {
    color: var(--qui-header-text-color);
    text-align: var(--qui-header-text-aligment);
    width: 100%;
    max-width: 50rem;
}

.page-header-text__title {
    margin-bottom: 0;
}

.page-header-text__short {
    margin-top: 1.5rem;
}

/** promo slider dots
 * ========================================================== */

.body-container .quiqqer-bricks-promoslider-wallpaper-text,
.body-container .quiqqer-bricks-promoslider-wallpaper-text__right {
    margin-top: 100px;
}

.quiqqer-bricks-promoslider-wallpaper-text-description,
.quiqqer-bricks-promoslider-wallpaper-text header {
    background: none !important;
    color: #fff !important;
}

.header-brick-area .quiqqer-bricks-promoslider-wallpaper {
    height: 100vh !important;
}

/* dots */
span.quiqqer-bricks-promoslider-wallpaper-dot {
    background: none;
    box-shadow: none;
    margin: 0 16px 0 0;
    opacity: 0.9;
    position: relative;
}

span.quiqqer-bricks-promoslider-wallpaper-dot:before {
    border: 2px solid #ddd;
    border-radius: 50%;
    content: '';
    height: 100%;
    left: -2px;
    position: absolute;
    top: -2px;
    transition: all 0.3s ease-out;
    width: 100%;
}

span.quiqqer-bricks-promoslider-wallpaper-dot:after {
    background: #ddd;
    border: 2px solid #ddd;
    border-radius: 50%;
    content: '';
    height: 100%;
    left: -2px;
    position: absolute;
    top: -2px;
    transition: all 0.3s ease-out;
    width: 100%;
}

span.quiqqer-bricks-promoslider-wallpaper-dot:hover {
    background: none;
    opacity: 0.7;
}

span.quiqqer-bricks-promoslider-wallpaper-dot-active {
    background: none;
}

span.quiqqer-bricks-promoslider-wallpaper-dot-active:after {
    transform: scale(0);
}

.quiqqer-porfolio-reference-windowShort span.quiqqer-bricks-promoslider-wallpaper-dot {
    height: 12px;
    width: 12px;
}

/* promo slider arrow */
div.quiqqer-bricks-promoslider-wallpaper-next,
div.quiqqer-bricks-promoslider-wallpaper-prev {
    color: #ddd;
    opacity: 0.9;
    text-shadow: none;
}

/** portfolio / referenzen
 * ========================================================== */

/* extra wegen den festgesetzten 33% */
section.quiqqer-portfolio-list {
    left: -10px;
    width: calc(100% + 20px);
}




/*******************/
/* Template bricks */
/*******************/
.tpl-brick {
    color: var(--qui-tpl-brick-textColor);
    background-color: var(--qui-tpl-brick-backgroundColor);
}

/*
 * Top and bottom spacing depend on place where the brick is used.
 * "Full width bricks" are using padding-top and padding-bottom.
 * This are the following brick areas:
 *   - topBanner
 *   - header
 *   - headerSuffix
 *   - footerPrefix
 *
 * "Column bricks" are using margin-top and margin-bottom
 * This are the following brick areas:
 *   - contentPrefix
 *   - contentSuffix
 *   - rightSidebar
 *   - leftSidebar
 */
.tpl-brickArea-rightSidebar__entry .tpl-brick__inner,
.tpl-brickArea-leftSidebar__entry .tpl-brick__inner,
.tpl-brickArea-contentPrefix__entry .tpl-brick__inner,
.tpl-brickArea-contentSuffix__entry .tpl-brick__inner {
    margin-top: var(--qui-tpl-spacing--top);
    margin-bottom: var(--qui-tpl-spacing--bottom);
}

.tpl-brickArea-header__entry .tpl-brick__inner,
.tpl-brickArea-headerSuffix__entry .tpl-brick__inner,
.tpl-brickArea-footerPrefix__entry .tpl-brick__inner {
    padding-top: var(--qui-tpl-spacing--top);
    padding-bottom: var(--qui-tpl-spacing--bottom);
}

/* 1. top banner has less spacing */
.tpl-brickArea-topBanner__entry .tpl-brick__inner {
    padding-top: calc(var(--qui-tpl-spacing--top) * 0.25); /* 1 */
    padding-bottom: calc(var(--qui-tpl-spacing--bottom) * 0.25); /* 1 */
}

/* brick with background image */
.tpl-brick--brickImage {
    position: relative;
}

.tpl-brick__imageBgWrapper {
    position: absolute;
    inset: 0;
}

.tpl-brick__imageBg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tpl-brick--brickImage .tpl-brick__inner {
    position: relative;
}

/* bricks separator / divider */
.tpl-brick__separator {
    text-align: center;
    position: relative;
}

.tpl-brick__separatorImage {
    display: block;
    margin-inline: auto;
    width: var(--qui-tpl-brick-separatorWidth, initial);
    height: var(--qui-tpl-brick-separatorHeight, initial);
}

/** page content
 * ========================================================== */

.tpl-presentation-row {
    padding-top: var(--qui-tpl-spacing--top);
    padding-bottom: var(--qui-tpl-spacing--bottom);
}

.content-header,
.content-body,
.content-template,
.control-template {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.control-footer {
    margin-top: 3rem;
}

.content-short:not(:last-child),
.control-content:not(:last-child),
.control-body:not(:last-child) {
    margin-bottom: 3rem;
}

.page-footer .control-content:not(:last-child) {
    margin-bottom: var(--qui-row-spacing--small);
}

.main-content:where([role="main"]) {
    margin-top: var(--qui-tpl-spacing--top);
    margin-bottom: var(--qui-tpl-spacing--bottom);
}

.control-header {
    margin-bottom: 3rem;
    text-align: center;
}

/** responsive
 **************************************************/

@media screen and (max-width: 1024px) and (min-width: 768px) {
    li.nav-button-close {
        display: block !important;
    }
}

/*********************************************************************************/
/* pagination
/*********************************************************************************/
.quiqqer-sheets-desktop {
    text-align: center;
}

.quiqqer-sheets-desktop a,
.quiqqer-sheets-desktop span {
    border-radius: 3px;
    color: #5d5d5d;
    float: none;
    margin-right: 2px !important;
    padding: 0 15px;
}

.quiqqer-sheets-desktop a:hover {
    background-color: var(--qui-colors-primary);
    border: 1px solid var(--qui-colors-primary);
    color: #fff;
}

.quiqqer-sheets-desktop .quiqqer-sheets-desktop-current {
    background: #D9D6D7;
    border: 1px solid #D9D6D7;
    border-radius: 3px;
    color: #333;
}

.quiqqer-sheets-desktop-disabled {
    border-color: #ccc !important;
    color: #ccc !important;
}

.quiqqer-pagination .quiqqer-sheets-desktop:last-child {
    margin: 40px 0;
}

.quiqqer-sheets-mobile select {
    margin-bottom: 20px;
    margin-top: 20px;
}

/*********************************************************************************/
/* gallery
/*********************************************************************************/
.quiqqer-gallery-grid-entry {
    padding: 0;
}

.quiqqer-gallery-grid .control-background {
    background: none;
}

.quiqqer-gallery-grid-entry .quiqqer-gallery-grid-entry-text {
    padding: 10px 0;
    text-align: center;
}

/*********************************************************************************/
/* contact form (site type: contact)
/*********************************************************************************/

.qui-form > fieldset {
    border: none;
    padding: 0;
}

.qui-form legend {
    background: none;
    float: none !important; /* komischer bug in chrome */
    margin-bottom: 10px;
    padding: 0;
    width: auto;
}

.qui-formfield-body {
    padding: 0;
}

.qui-formfield label {
    display: block;
    margin-bottom: 0;
}

/*********************************************************************************/
/* sitemap
/*********************************************************************************/

.qui-sitetypes-sitemap ul,
.qui-sitetypes-sitemap ol,
.qui-sitetypes-sitemap-block ul,
.qui-sitetypes-sitemap-block ol {
    list-style: none;
    padding-left: 0;
    padding-top: 10px;
    text-decoration: none;
}

.qui-sitetypes-sitemap ul a,
.qui-sitetypes-sitemap ol a,
.qui-sitetypes-sitemap-block ul a,
.qui-sitetypes-sitemap-block ol a {
    color: inherit;
    display: block;
    text-decoration: none;
}

.qui-sitetypes-sitemap ul a:hover,
.qui-sitetypes-sitemap ol a:hover,
.qui-sitetypes-sitemap-block ul a:hover,
.qui-sitetypes-sitemap-block ol a:hover,
.qui-sitetypes-sitemap-block th a:hover {
    text-decoration: underline;
}

.qui-sitetypes-sitemap ul li,
.qui-sitetypes-sitemap ol li,
.qui-sitetypes-sitemap-block ul li,
.qui-sitetypes-sitemap-block ol li {
    padding-left: 20px;
}

.qui-sitetypes-sitemap-block th {
    padding-left: 20px;
}

.qui-sitetypes-sitemap-block-category .control-background a {
    color: #fff;
    text-decoration: none;
}

.clear-fix:after {
    clear: both;
    content: '';
    display: block;
    float: none;
    font-size: 0;
    line-height: 0;
}

.qui-sitetypes-sitemap ul:first-child a:hover {
    text-decoration: underline;
}

@media all and (max-width: 767px) {
    .qui-sitetypes-sitemap-block-category {
        width: 100%;
    }
}

/*********************************************************************************/
/* site type: standard search
/* quiqqer/sitetypes:types/search
/*********************************************************************************/


/*********************************************************************************/
/* search plugin
/*********************************************************************************/

.qui-search-settings {
    overflow: visible;
}

.form-field-search {
    margin-right: 40px;
    min-width: 40%;
}

.qui-search-result form {
    display: table-cell;
}

.qui-search-result-list-entry-imagelink {
    background-size: contain;

}

.qui-search-result-list-entry-imagelink:hover {
    background: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.qui-button.qui-button--no-icon {
    font-size: 20px;
    margin-bottom: 6px;
    margin-top: 6px;
    padding: 6px 16px;
}

.qui-button.qui-button--no-icon:hover {
    color: inherit;
}

@media screen and (max-width: 767px) {
    .form-field-search {
        margin-right: 0;
        min-width: 100%;
    }
}


/*********************************************************************************/
/* search plugin - erweiterte Suche
/*********************************************************************************/
.quiqqer-search-searchinput {
    overflow: hidden;
}

.quiqqer-search-searchinput form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -10px;
    margin-right: -10px;
}

input.quiqqer-search-searchinput-input {
    flex-grow: 3;
    margin: 10px;
    min-width: auto;
}

input.quiqqer-search-searchinput-submit,
input.quiqqer-search-searchinput-submit:last-of-type {
    flex-grow: 1;
    margin: 10px;
    order: 3;
}

.qui-select.quiqqer-search-searchinput-searchfieldselect {
    cursor: pointer;
    flex-grow: 1;
    height: auto;
    margin: 10px;
    order: 2;
    padding: 0 16px;
}

.qui-select.quiqqer-search-searchinput-searchfieldselect .text {
    height: 50px;
    line-height: 50px;
}

.qui-select.quiqqer-search-searchinput-searchfieldselect .drop-icon {
    height: 50px;
}

/*********************************************************************************/
/* search site types - standard Suche
/*********************************************************************************/

.qui-search-result form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -10px;
    margin-right: -10px;
}

.qui-search-result .form-field-search {
    flex-grow: 3;
    margin: 10px;
    min-width: auto;
}

.qui-search-result input[type="submit"] {
    flex-grow: 1;
    margin: 10px;
    order: 3;
}


/*********************************************************************************/
/* search brick
/*********************************************************************************/

.quiqqer-suggestSearch-wrapper {
    width: 85%;
}

/*********************************************************************************/
/* ChildrenList
/* site type: quiqqer/tags:types/tag-search
/*********************************************************************************/

a.qui-control-list-entry-imagelink {
    border: none;
}

.quiqqer-tags-list-result-entry a {
    color: inherit;
}

/*********************************************************************************/
/* site type: types/tag-listing
/*********************************************************************************/

.quiqqer-sheets-desktop-limits a:hover {
    background: none;
    box-shadow: none;
    color: var(--qui-colors-primary);
}

.quiqqer-tags-search-pool .qui-button.qui-button--no-icon {
    font-size: 16px;
    margin: 0 5px 5px 0;
    padding: 3px 10px;
}

/*********************************************************************************/
/* site type: quiqqer/tags:types/tag-listing
/*********************************************************************************/

.content-short.qui-tags-tag-content {
    padding-top: 0;
}

/* todo @michael.daniel improve css selector */
.tpl-presentation-row a.qui-tags-tag:hover {
    border: 1px solid var(--qui-colors-primary);
    color: var(--qui-colors-primary);
}

/*********************************************************************************/
/* content message
/*********************************************************************************/

.content-message-information,
.content-message-attention,
.content-message-error,
.content-message-success {
    margin: 1em 0;
}

/*********************************************************************************/
/* breadcrumb
/*********************************************************************************/

.template-breadcrumb--appearance-default {
    border-bottom: var(--qui-border-width) var(--qui-border-style) var(--qui-tpl-breadcrumb-border-color);
}

.template-breadcrumb--appearance-pill-surface .quiqqer-core-controls-breadcrumb-container,
.template-breadcrumb--appearance-pill-border .quiqqer-core-controls-breadcrumb-container {
    padding-inline: calc(1.75 * var(--_padding-y));
}

.template-breadcrumb--appearance-subtle-surface {
    background: var(--qui-tpl-breadcrumb-subtle-surface-background);
}

.template-breadcrumb--appearance-pill-surface .quiqqer-core-controls-breadcrumb-container,
.template-breadcrumb--appearance-pill-border .quiqqer-core-controls-breadcrumb-container {
    border-radius: var(--qui-tpl-breadcrumb-pill-radius);
    margin-top: var(--qui-tpl-breadcrumb-pill-margin-top);
}

.template-breadcrumb--appearance-pill-surface .quiqqer-core-controls-breadcrumb-container {
    background: var(--qui-tpl-breadcrumb-pill-surface-background);
}

.template-breadcrumb--appearance-pill-border .quiqqer-core-controls-breadcrumb-container {
    border: var(--qui-tpl-breadcrumb-pill-border);
}

/*********************************************************************************/
/* infinite brick
/*********************************************************************************/

.quiqqer-bricks-children-infinite .button {
    float: none;
}

.quiqqer-bricks-children-infinite a,
.quiqqer-bricks-children-infinite a:hover,
.quiqqer-bricks-children-infinite a:active {
    color: #333;
    font-weight: normal;
}

.quiqqer-bricks-children-infinite-child-display {
    overflow: hidden;
}

.quiqqer-bricks-children-infinite-child-display header {
    left: 0;
}

.quiqqer-bricks-children-infinite-child-display > a img {
    bottom: 0;
    left: 0;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.quiqqer-bricks-children-infinite-child-display > a img:hover {
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-transform: none;
    transform: none;
}

/*********************************************************************************/
/* children list 3er
/*********************************************************************************/
.qui-control-childrenlist-3er-entry-image span.quiqqer-icon {
    font-size: 130px;
}