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

    Generelle Einstellungen
    ToDo: Projektspezifische definitionen entfernen, bzw. auslagern

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

.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;
    }
}
/***********************************************************************************************************************

    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% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
}
[data-ce-columns="3"] .ce-row > .ce-column {
    width: calc(33.333% - 1rem) !important;
    max-width: calc(33.333% - 1rem) !important;
}
[data-ce-columns="4"] .ce-row > .ce-column {
    width: calc(25% - 1rem) !important;
    max-width: calc(25% - 1rem) !important;
}
[data-ce-columns="5"] .ce-row > .ce-column {
    width: calc(20% - 1rem) !important;
    max-width: calc(20% - 1rem) !important;
}
[data-ce-columns="6"] .ce-row > .ce-column {
    width: calc(16.666% - 1rem) !important;
    max-width: calc(16.666% - 1rem) !important;
}
[data-ce-columns="7"] .ce-row > .ce-column {
    width: calc(14.2857% - 1rem) !important;
    max-width: calc(14.2857% - 1rem) !important;
}
[data-ce-columns="8"] .ce-row > .ce-column {
    width: calc(12.5% - 1rem) !important;
    max-width: calc(12.5% - 1rem) !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;
}


/* Accordeon Überschriften */

.accordion-item header {
    display: none;
}

/* Abstände Bild zu Text anpassen */

.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery {
    margin-bottom: 1rem;
}
.ce-image .ce-gallery { margin-bottom: 0; }
.ce-intext.ce-right .ce-gallery { margin-left: 1.5rem; }
.ce-intext.ce-left .ce-gallery { margin-right: 1.5rem; }
.ce-below .ce-gallery { margin-top: 1rem; }

.ce-column { margin-right: 1rem; }
.ce-column:last-child { margin-right: 0; }