.tx-p123onlinewerbung-pi1 {
    position: relative;
    width: 100%;
    max-width: 930px;
    box-sizing: border-box;
}
.header-fixed .tx-p123onlinewerbung-pi1 {
    width: 100%;
    max-width: 100%;
}

.tx-p123onlinewerbung-pi1 .mobile {
    display: block !important;
}
.tx-p123onlinewerbung-pi1 .desktop {
    display: none !important;
}

.tx-p123onlinewerbung-pi1 .icon span {
    display: block;
    /*background-repeat: no-repeat;*/
    /*background-size: contain;*/
    margin: 0 auto;
    color: var(--tx-p123onlinewerbung-ci-3);
}

.tx-p123onlinewerbung-pi1-wrapper {
    background: var(--body-background-color);
    -webkit-box-shadow: 0 2px 2px 0 #7998a7;
    -moz-box-shadow: 0 2px 2px 0#7998a7;
    box-shadow: 0 2px 2px 0 #7998a7;
    padding: .5em;
    box-sizing: border-box;
    overflow: hidden;
}

.header-fixed .tx-p123onlinewerbung-pi1-wrapper {
    width: 100%;
}

.header-fixed .tx-p123onlinewerbung-pi1-wrapper > .headline {
    display: none;
}

.tx-p123onlinewerbung-pi1-wrapper .headline h2 {
    font-size: 1.5em;
    margin-top: 0;
    text-align: center;
    color: var(--tx-p123onlinewerbung-ci-2);
}

.tx-p123onlinewerbung-pi1-wrapper .btnStart {
    text-align: center;
    font-size: .8em;
    margin-top: .5em;
}

.tx-p123onlinewerbung-pi1-wrapper .btnStart.hide {
    display: none;
}

.tx-p123onlinewerbung-pi1-wrapper .btnStart.show {
    display: block;
}

.header-fixed .tx-p123onlinewerbung-pi1-wrapper .btnStart {
    text-align: right;
}

.tx-p123onlinewerbung-pi1-wrapper .btnStart a {
    min-width: 10em;
}

/****** navigation-box ******/

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper {
    position: relative;
    box-sizing: border-box;
    font-size: .8em;
    margin-bottom: .7em;
    margin-top: .7em;
}

.tx-p123onlinewerbung-pi1 .navigation-box-area {
    display: block;
    margin-top: 1.5em;
}

.header-fixed .tx-p123onlinewerbung-pi1 .navigation-box-area {
    display: none;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper.flex-container {
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    margin-top: .7em;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper {
    position: relative;
    width: calc((100% / 6) - 5px);
    height: 200px;
    padding: .5em;
    box-sizing: border-box;
    cursor: pointer;
}

/*.tx-p123onlinewerbung-pi1 .navigation-wrapper .box-wrapper[data-state="inactive"] {*/
/*    transform: scale(0.97);*/
/*    margin: auto;*/
/*}*/

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-state="active"] {
    transform: scale(1.1);
    margin: auto .7em;

}
.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper.btn-select[data-state="active"] {
    background: var(--btn-select-background-to);
    background: -moz-linear-gradient(top, var(--btn-select-background-to) 0%, var(--btn-select-background-to) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, var(--btn-select-background-to)), color-stop(100%, var(--btn-select-background-to)));
    background: -webkit-linear-gradient(top, var(--btn-select-background-to) 0%, var(--btn-select-background-to) 100%);
    background: -o-linear-gradient(top, var(--btn-select-background-to) 0%, var(--btn-select-background-to) 100%);
    background: -ms-linear-gradient(top, var(--btn-select-background-to) 0%, var(--btn-select-background-to) 100%);
    background: linear-gradient(to bottom, var(--btn-select-background-to) 0%, var(--btn-select-background-to) 100%);
    background-color: var(--btn-select-background-to);
    border: 1px solid var(--btn-select-background-to);
    z-index: 3;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-state="inactive"] .box-item-overlay {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    cursor: pointer;
    z-index: 2;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-item {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .icon span {
    width: 34px;
    height: 34px;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .content,
.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .headline {
    display: block;
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .content img {
    /*width: 65px;*/
    width: 85px;
    height: auto;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .content span {
    display: block;
    width: 100%;
    line-height: 140%;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .headline h3 {
    font-size: 1em;
    font-weight: normal;
    color: var(--tx-p123onlinewerbung-ci-2);
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .headline b {
    display: inline-block;
    width: 100%;
    font-size: 1.6em;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .content {
    font-weight: bold;
    color: var(--tx-p123onlinewerbung-ci-3);
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .content span.small {
    font-size: 95%;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .button {
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .button a.csc-mailform-button {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 1.2em;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .button a.csc-mailform-button:after {
    font-size: 1.2em;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .button a.csc-mailform-button.pen-to-square:after {
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    margin-right: .5em;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="1"],
.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="2"],
.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="3"] {
    width: calc((100% / 2.5) - 5px);
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="1"] {
    order: 1;
    margin-left: -35px;
    pointer-events: auto;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="2"] {
    order: 2;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="3"] {
    order: 3;
    margin-right: -35px;
    pointer-events: auto;
}

.tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="9999"] {
    display: none;
}
/****** navigation-box ******/

/****** navigation-field ******/

.tx-p123onlinewerbung-pi1 .navigation-field-area {
    display: none;
}
.header-fixed .tx-p123onlinewerbung-pi1 .navigation-field-area {
    display: block;
}

.tx-p123onlinewerbung-pi1 .navigation-field-wrapper.flex-container {
    flex-wrap: wrap;
}

.tx-p123onlinewerbung-pi1 .field-wrapper {
    width: 100%;
    display: none;
}

.tx-p123onlinewerbung-pi1 .field-wrapper:first-child {
    margin-top: 0 !important;
}

.tx-p123onlinewerbung-pi1 .field-wrapper {
    display: block;
    margin-top: .5em;
}
.tx-p123onlinewerbung-pi1 .field-wrapper[data-state="active"] {
    display: block;
}
.tx-p123onlinewerbung-pi1 .field-wrapper[data-state="active"] ~ div {
    display: none;
}

.tx-p123onlinewerbung-pi1 .field-item .header {
    padding-left: 3px;
}

.tx-p123onlinewerbung-pi1 .field-item .header.flex-container {
    flex-wrap: nowrap;
}

.tx-p123onlinewerbung-pi1 .field-item .header .icon span {
    width: 22px;
    height: 22px;
}

.tx-p123onlinewerbung-pi1 .field-item .header .icon span.calendar-days {
    width: 16px;
}

.tx-p123onlinewerbung-pi1 .field-item .header .icon span.euro-sign {
    width: 12px;
    margin-left: 3px;
}

.tx-p123onlinewerbung-pi1 .field-item .header .headline {
    margin-left: .5em;
    font-size: 1.1em;
    color: var(--tx-p123onlinewerbung-ci-2);
}

.tx-p123onlinewerbung-pi1 .field-item .content-wrapper {
    position: relative;
    height: 34px;
    cursor: pointer;
}

.tx-p123onlinewerbung-pi1 .field-item  content-wrapper.flex-container {
    flex-wrap: nowrap;
}

.tx-p123onlinewerbung-pi1 .field-item .content-wrapper input {
    height: 100%;
    flex-grow: 1;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tx-p123onlinewerbung-pi1 .field-wrapper[data-state="active"] .field-item .content-wrapper input {
    border-top-color: var(--input-border-focus);
}

.tx-p123onlinewerbung-pi1 .field-item .content-wrapper .overlay {
    position: absolute;
    width: 100px;
    height: 30px;
    right: 48px;
    bottom: 0;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgb(255, 255, 255) 72%);
}

.tx-p123onlinewerbung-pi1 .field-item .content-wrapper .button {
    width: 48px;
    height: 100%;
}

.tx-p123onlinewerbung-pi1 .field-item .content-wrapper .button a {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
}

.tx-p123onlinewerbung-pi1 .field-item .content-wrapper .button a.csc-mailform-button.pen-to-square:after {
    display: inline-block;
    position: absolute;
    top:0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2em;
    margin: 0;
}
/****** navigation-field ******/

/****** navigation-bar-area ******/
.tx-p123onlinewerbung-pi1-wrapper .navigation-bar-area {
    margin: 2em 0 1em;
}

.tx-p123onlinewerbung-pi1 .navigation-bar-area.disable {
    display: none;
}

.tx-p123onlinewerbung-pi1 .navigation-bar-area.active {
    display: block;
}

.tx-p123onlinewerbung-pi1-wrapper .navigation-bar-wrapper.flex-container {
    flex-wrap: nowrap;
}

.tx-p123onlinewerbung-pi1-wrapper .nav-bar-icon {
    display: block;
    position: relative;
    width: calc(100% / 6);
    height: 60px;
    margin: 0 .3em;
    opacity: .5;
    cursor: pointer;
}

.tx-p123onlinewerbung-pi1-wrapper .nav-bar-icon[data-state="active"] {
    opacity: 1;
}

.tx-p123onlinewerbung-pi1-wrapper .nav-bar-icon[data-state="active"] .bar {
    background-color: var(--tx-p123onlinewerbung-ci-3);
}

.tx-p123onlinewerbung-pi1-wrapper .nav-bar-icon:hover {
    opacity: 1;
}

.tx-p123onlinewerbung-pi1-wrapper .nav-bar-icon:hover .bar {
    background-color: var(--tx-p123onlinewerbung-ci-3);
}

.tx-p123onlinewerbung-pi1-wrapper .bar-icon {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 35px;
}

.tx-p123onlinewerbung-pi1-wrapper .bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    margin-top: .8em;
    border-radius: 8px;
    border: 1px solid var(--tx-p123onlinewerbung-ci-3);
}
/****** navigation-bar-area ******/

/* 360px */
/* Galaxy Note 3 */
/* Galaxy S9/S9Plus */
/* Galaxy S10/S10Plus */
/* Galaxy S20 */
@media only screen and (min-width: 22.5em) {
}

/* 375px (374px)*/
/* iPhone 6/7/8 */
/* iPhone SE 2nd */
/* iPhone X/XS */
/* iPhone 11 Pro */
/* iPhone 12/13 mini */
@media only screen and (min-width: 23.375em) {
}

/* 384px */
/* Galaxy S20+ */

/* 390px */
/* iPhone 12/13 + Pro */
@media only screen and (min-width: 24.375em) {
}

/* 400px */
@media only screen and (min-width: 25em) {
}

/* 412px */
/* Galaxy S20 Ultra */
/* Galaxy Note 20 Ultra */

/* 414px */
/* iPhone 6/7/8 Plus*/
/* iPhone XR/11 */
/* iPhone XS Max */
/* iPhone 11 Pro Max */
/* Galaxy Note 9 */
@media only screen and (min-width: 25.875em) {
}

/* 428px */
/* iPhone 12/13 ProMaxi */
@media only screen and (min-width: 26.625em) {
}

/* 600px */
/* Nexus 7 */
@media only screen and (min-width: 37.5em) {
}

/* 648px */
@media only screen and (min-width: 40.5em) {
}

/* 768px */
@media only screen and (min-width: 48em) {
    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper {
        height: 248px;
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper {
        font-size: 1em;
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-state="active"] {
        transform: scale(1.15);
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-area {
        margin-top: 3em;
    }

    .tx-p123onlinewerbung-pi1-wrapper .navigation-bar-area {
        margin: 3em 0 2em;
    }

    .tx-p123onlinewerbung-pi1-wrapper .nav-bar-icon {
        height: 80px;
    }

    .tx-p123onlinewerbung-pi1-wrapper .bar-icon {
        height: 60px;
    }

    .tx-p123onlinewerbung-pi1-wrapper .bar {
        width: 90%;
        margin: 0 auto;
    }
}

/* 960px */
@media only screen and (min-width: 60em) {
    .tx-p123onlinewerbung-pi1 {
        width: auto;
    }

    .tx-p123onlinewerbung-pi1 .mobile {
        display: none !important;
    }

    .tx-p123onlinewerbung-pi1 .desktop {
        display: block !important;
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-area {
        margin-top: 0;
    }

    .tx-p123onlinewerbung-pi1 .navigation-bar-area.active {
        display: none !important;
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper {
        font-size: .8em;
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper {
        height: 200px;
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-state="active"] {
        transform: scale(1.1);
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-area {
        margin-top: .7em;
    }

    /****** navigation order mobile ******/
    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper .box-item-overlay {
        display: none !important;
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="1"],
    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="2"],
    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="3"] {
        width: calc((100% / 6) - 5px);
        order: unset;
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="1"] {
        margin-left: 0;
        pointer-events: auto;
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="3"] {
        margin-right: 0;
        pointer-events: auto;
    }

    .tx-p123onlinewerbung-pi1 .navigation-box-wrapper .box-wrapper[data-orderid="9999"] {
        display: block !important;
        order: unset;
    }
    /****** navigation order mobile ******/

    .tx-p123onlinewerbung-pi1-wrapper .headline h2 {
        font-size: 1.1em;
    }

    .header-fixed .tx-p123onlinewerbung-pi1-wrapper .headline {
        display: block;
    }

    .tx-p123onlinewerbung-pi1 .field-wrapper {
        display: block !important;
        width: calc((100% - (10px * 2)) / 3);
        margin-right: 10px;
        margin-top: 8px;
    }

    .tx-p123onlinewerbung-pi1 .field-wrapper:nth-child(-n +3) {
        margin-top: 0;
    }

    .tx-p123onlinewerbung-pi1 .field-wrapper:nth-child(3n) {
        margin-right: 0;
    }

    .header-fixed .tx-p123onlinewerbung-pi1-wrapper .btnStart {
        position: absolute;
        bottom: .8em;
        right: .5em;
    }
}

/* 1024px */
@media only screen and (min-width: 64em) {
}

/* 1184px */
@media only screen and (min-width: 74em) {
}

/* 1424px */
@media only screen and (min-width: 89em) {
    .tx-p123onlinewerbung-pi1 .field-wrapper {
        display: block !important;
        width: calc((100% - (10px * 4)) / 5);
        margin-right: 10px !important;
        margin-top: 0 !important;
    }

    .tx-p123onlinewerbung-pi1 .field-wrapper:last-child {
        margin-right: 0 !important;
    }

    .header-fixed .tx-p123onlinewerbung-pi1-wrapper .btnStart {
        position: relative;
        bottom: unset;
        right: unset;
    }
}