/***********************************************************************************************************************

    Generelle Einstellungen
    ToDo: Projektspezifische definitionen entfernen, bzw. auslagern

***********************************************************************************************************************/

/* --- Links--------------------------------------------------------------------------------------------------------- */

.link-phone, .bg-light .link-phone,
.link-email, .bg-light .link-email,
.link-external, .bg-light .link-external,
.link-doc, .bg-light .link-doc,
.internal-link, .bg-light .internal-link {
    font-family: var(--zf);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5rem;
    /* display: block; AGENTUR-8214 */
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
    position: relative;
    margin-bottom: 30px;
    color: var(--primary);
}

.link-phone:hover,
.link-email:hover,
.link-external:hover,
.link-doc:hover,
.internal-link:hover{
    text-decoration: underline;
    text-decoration-thickness: 2px;
    opacity: 0.7;
}

.bg-secondary .link-phone, .bg-primary .link-phone,
.bg-secondary .link-email, .bg-primary .link-email,
.bg-secondary .link-external, .bg-primary .link-external,
.bg-secondary .link-doc, .bg-primary .link-doc,
.bg-secondary .internal-link, .bg-primary .internal-link {
    color: var(--white);
}
.link-phone, .link-email, .link-external, .link-doc{
    padding-left: 30px;
}
/* Link Phone Start */

.link-phone::before, .bg-light .link-phone::before {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0px;
    top: 6px;
    background-image: url('../images/link-phone-primary.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
.bg-secondary .link-phone::before, .bg-primary .link-phone::before {
    content: "";
    background-image: url('../images/link-phone-white.svg');
}
/* Link Phone End */

/* Link Email Start */
.link-email::before, .bg-light .link-email::before {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0px;
    top: 6px;
    background-image: url('../images/link-email-primary.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
.bg-secondary .link-email::before, .bg-primary .link-email::before {
    content: "";
    background-image: url('../images/link-email-white.svg');
}
/* Link Email End */


/* Link External Start */
.link-external::before, .bg-light .link-external::before {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0px;
    top: 6px;
    background-image: url('../images/link-external-primary.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
.bg-secondary .link-external::before, .bg-primary .link-external::before {
    content: "";
    background-image: url('../images/link-external-white.svg');
}
/* Link External End */


/* Link Document Start */
.link-doc::before, .bg-light .link-doc::before {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    left: 0px;
    top: 6px;
    background-image: url('../images/link-doc-primary.svg');
    background-repeat: no-repeat;
    background-size: contain;
}
.bg-secondary .link-doc::before, .bg-primary .link-doc::before {
    content: "";
    background-image: url('../images/link-doc-white.svg');
}
/* Link Document End */


.cursor-pointer {
    cursor: pointer;
}

/***********************************************************************************************************************

    Content Element
    ToDo: Projektspezifische definitionen entfernen, bzw. auslagern

***********************************************************************************************************************/

/* --- Text & Bild Element ------------------------------------------------------------------------------------------ */
@media (min-width: 992px) {
    .ce-centeredelement > .ce-bodytext,
    .ce-centeredelement > .ce-gallery {
        display: flex;
        align-items: center;

        flex: 1 0 0;
    }
    .ce-centeredelement {
        display: flex;
    }
    .ce-right .ce-gallery {
        margin-left: auto;
        order: 2;
    }
    .ce-leftt .ce-bodytext {
        margin-left: auto;
        order: 2;
    }
    .ce-bodytext > * {
        display: flex;
        flex-direction: row;
        flex: 1 1 auto;
    }
}
/*
.ce-centeredelement {
    align-items: center;
    display: flex;
}
*/
/* --- Accordeons---------------------------------------------------------------------------------------------------- */

.accordion .accordion-item{
    border-right: 0;
    border-radius: 0;
    border-left: 0;
    border-color: var(--light-blue);
}
.accordion .accordion-item:first-of-type>.accordion-header .accordion-button{
    border-radius: 0;
}
.accordion .accordion-button{
    font-family: var(--zf);
    color: #110450;
    font-size: 1.4375rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1.7rem;
    padding-bottom: 1.7rem;
    gap: 1.5rem;
}

.accordion  .accordion-button::after{
    background-image:url('../images/accordion-close.svg');
}
.accordion  .accordion-button:not(.collapsed){
    color: var(--secondary);
}
.accordion .accordion-button:not(.collapsed)::after{
    background-image:url('../images/accordion-open.svg');
    transform: rotate(0);
}
.accordion .accordion-button:focus{
    box-shadow:none;
    background-color:var(--white)
}
.accordion .accordion-button:not(.collapsed){
    box-shadow:none;
    background-color:var(--white)
}
.accordion .accordion-body{
    padding: 0;
    padding-top: 0.65rem;
    padding-bottom: 2.72rem;
}
.accordion  .accordion-body .container{
    padding: 0;
}
.accordion .accordion-body p, .accordion .accordion-body ul li{
    color: var(--primary);
    font-family: var(--zf);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.ce-accordion-body.accordion-body .container header {
    display: none;
}

/***********************************************************************************************************************

    Weitere CSS Definitionen
    ToDo: In Blöcke unterteilen
    ToDo: Weiter Grunddefinitionen hier hinderlegen

***********************************************************************************************************************/

/* Frame  */
.frame {
    display: flex;
}
/* Frame in Frame */

.frame .frame > .container {
    padding-left: 0;
    padding-right: 0;
}

/* Hintergrundfarben */

.bg-primary { background-color: var(--primary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-light { background-color: var(--light-blue) !important; }

/* Buttons - Ohne Hintergrund */

.btn.btn-outline-primary {
    border: 2px solid  var(--primary);
    background-color: transparent;
    color: var(--primary);
}
.btn.btn-outline-primary:hover {
    border: 2px solid  var(--primary);
    background-color: var(--primary);
    color: var(--white);
}
.btn.btn-outline-secondary {
    border: 2px solid  var(--secondary);
    background-color: transparent;
    color: var(--secondary);
}
.btn.btn-outline-secondary:hover {
    border: 2px solid  var(--secondary);
    background-color: var(--secondary);
    color: var(--white);
}

.btn.btn-primary {
    border: 2px solid  var(--primary);
    background-color: var(--primary);
    color: var(--white);
}
.btn.btn-primary:hover {
    border: 2px solid  var(--primary);
    background-color: transparent;
    color: var(--primary);
}
.btn.btn-secondary {
    border: 2px solid  var(--secondary);
    background-color: var(--secondary);
    color: var(--white);
}
.btn.btn-secondary:hover {
    border: 2px solid  var(--secondary);
    background-color: transparent;
    color: var(--secondary);
}

/* Automatische Silbentrennung einfügen [TYPO3-17] */
body { hyphens: auto; }

/* Width of Image Area [image_area_width] */

.image-area-width-100 { max-width: 100% !important; width: calc(100% - 0px) !important; }
.textpic-right .text-area-width-0,
.textpic-left .text-area-width-0
{ max-width: 100% !important; width: calc(100% - 0px) !important; }

.image-area-width-66 { max-width: 100% !important; width: calc(100% - 0px) !important; }
.textpic-right .text-area-width-34,
.textpic-left .text-area-width-34
{ max-width: 100% !important; width: calc(100% - 0px) !important; }

.image-area-width-50 { max-width: 100% !important; width: calc(100% - 0px) !important; }
.textpic-right .text-area-width-50,
.textpic-left .text-area-width-50
{ max-width: 100% !important; width: calc(100% - 0px) !important; }

.image-area-width-33 { max-width: 100% !important; width: calc(100% - 0px) !important; }
.textpic-right .text-area-width-67,
.textpic-left .text-area-width-67
{ max-width: 100% !important; width: calc(100% - 0px) !important; }

.image-area-width-25 { max-width: 100% !important; width: calc(100% - 0px) !important; }
.textpic-right .text-area-width-75,
.textpic-left .text-area-width-75
{ max-width: 100% !important; width: calc(100% - 0px) !important; }
/*
.image-area-width-33 { max-width: 50% !important; width: calc(50% - 0px) !important; }
.textpic-right .text-area-width-67,
.textpic-left .text-area-width-67
{ max-width: 50% !important; width: calc(50% - 0px) !important; }

.image-area-width-25 { max-width: 50% !important; width: calc(50% - 0px) !important; }
.textpic-right .text-area-width-75,
.textpic-left .text-area-width-75
{ max-width: 50% !important; width: calc(50% - 0px) !important; }
*/

.image-area-width-10 { max-width: 25% !important; width: calc(25% - 0px) !important; }
.textpic-right .text-area-width-90,
.textpic-left .text-area-width-90
{ max-width: 75% !important; width: calc(75% - 0px) !important; }

/* Small devices (landscape phones, 576px and up) */
/* @media (min-width: 576px) { ... } */

/* Medium devices (tablets, 768px and up) */
/* @media (min-width: 768px) { ... } */

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .image-area-width-100 { max-width: 100% !important; }
    .textpic-right .text-area-width-0,
    .textpic-left .text-area-width-0
    { max-width: 100% !important; width: 100% !important; }

    .image-area-width-66 { max-width: 66% !important; width: calc(66% - 0px) !important; }
    .textpic-right .text-area-width-34,
    .textpic-left .text-area-width-34
    { max-width: 34% !important; width: calc(34% - 0px) !important; }

    .image-area-width-50 { max-width: 50% !important; width: calc(50% - 0px) !important; }
    .textpic-right .text-area-width-50,
    .textpic-left .text-area-width-50
    { max-width: 50% !important; width: calc(50% - 0px) !important; }

    .image-area-width-33 { max-width: 33% !important; width: calc(33% - 0px) !important; }
    .textpic-right .text-area-width-67,
    .textpic-left .text-area-width-67
    { max-width: 67% !important; width: calc(67% - 0px) !important; }

    .image-area-width-25 { max-width: 25% !important; width: calc(25% - 0px) !important; }
    .textpic-right .text-area-width-75,
    .textpic-left .text-area-width-75
    { max-width: 75% !important; width: calc(75% - 0px) !important; }

    .image-area-width-10 { max-width: 15% !important; width: calc(15% - 0px) !important; }
    .textpic-right .text-area-width-90,
    .textpic-left .text-area-width-90
    { max-width: 85% !important; width: calc(85% - 0px) !important; }
}

/* X-Large devices (large desktops, 1200px and up) */
/* @media (min-width: 1200px) { ... } */

/* XX-Large devices (larger desktops, 1400px and up) */

@media (min-width: 1400px) {

    .image-area-width-100 { max-width: 100% !important; }
    .textpic-right .text-area-width-0,
    .textpic-left .text-area-width-0
    { max-width: 100% !important; width: 100% !important; }

    .image-area-width-66 { max-width: 66% !important; width: calc(66% - 0px) !important; }
    .textpic-right .text-area-width-34,
    .textpic-left .text-area-width-34
    { max-width: 34% !important; width: calc(34% - 0px) !important; }

    .image-area-width-50 { max-width: 50% !important; width: calc(50% - 0px) !important; }
    .textpic-right .text-area-width-50,
    .textpic-left .text-area-width-50
    { max-width: 50% !important; width: calc(50% - 0px) !important; }

    .image-area-width-33 { max-width: 33% !important; width: calc(33% - 0px) !important; }
    .textpic-right .text-area-width-67,
    .textpic-left .text-area-width-67
    { max-width: 67% !important; width: calc(67% - 0px) !important; }

    .image-area-width-25 { max-width: 25% !important; width: calc(25% - 0px) !important; }
    .textpic-right .text-area-width-75,
    .textpic-left .text-area-width-75
    { max-width: 75% !important; width: calc(75% - 0px) !important; }

    .image-area-width-10 { max-width: 10% !important; width: calc(10% - 0px) !important; }
    .textpic-right .text-area-width-90,
    .textpic-left .text-area-width-90
    { max-width: 90% !important; width: calc(90% - 0px) !important; }

}

.image-area-width-100 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-right .text-area-width-0 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-left .text-area-width-0 [data-ce-columns="1"] .ce-row > .ce-column,
.image-area-width-66 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-right .text-area-width-34 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-left .text-area-width-34 [data-ce-columns="1"] .ce-row > .ce-column,
.image-area-width-50 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-right .text-area-width-50 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-left .text-area-width-50 [data-ce-columns="1"] .ce-row > .ce-column,
.image-area-width-33 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-right .text-area-width-67 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-left .text-area-width-67 [data-ce-columns="1"] .ce-row > .ce-column,
.image-area-width-25 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-right .text-area-width-75 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-left .text-area-width-75 [data-ce-columns="1"] .ce-row > .ce-column,
.image-area-width-10 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-right .text-area-width-90 [data-ce-columns="1"] .ce-row > .ce-column,
.textpic-left .text-area-width-90 [data-ce-columns="1"] .ce-row > .ce-column,
.image-area-width-100 [data-ce-columns="1"] .ce-row > .ce-column,
[data-ce-columns="1"] .ce-row > .ce-column {
    width: calc(100%) !important;
    max-width: calc(100%) !important;
}
[data-ce-columns="2"] .ce-row > .ce-column {
    width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
}
[data-ce-columns="3"] .ce-row > .ce-column {
    width: calc(33.333% - 10px) !important;
    max-width: calc(33.333% - 10px) !important;
}
[data-ce-columns="4"] .ce-row > .ce-column {
    width: calc(25% - 10px) !important;
    max-width: calc(25% - 10px) !important;
}
[data-ce-columns="5"] .ce-row > .ce-column {
    width: calc(20% - 10px) !important;
    max-width: calc(20% - 10px) !important;
}
[data-ce-columns="6"] .ce-row > .ce-column {
    width: calc(16.666% - 10px) !important;
    max-width: calc(16.666% - 10px) !important;
}
[data-ce-columns="7"] .ce-row > .ce-column {
    width: calc(14.2857% - 10px) !important;
    max-width: calc(14.2857% - 10px) !important;
}
[data-ce-columns="8"] .ce-row > .ce-column {
    width: calc(12.5% - 10px) !important;
    max-width: calc(12.5% - 10px) !important;
}
.ce-gallery figure {
    width: 100%;
}
.ce-gallery img {
    width: 100%;
    height: auto;
}

.ce-textpic.ce-center > .ce-gallery {
    margin-right: auto !important;
    margin-left: auto !important;
}