#app .tile>img[src*="/img/zusatzleistungen"] {
    height:0;
    overflow:hidden
}
#app .icon .icon-image.zusatzleistungen {
    display:block;
    border-radius:100%;
    overflow:hidden;
    padding:30px;
    background:var(--app-color-accent);
    background:#ff8c00
}
body {
    --app-color-text:#222;
    --app-color-light:#b7b5b6;
    --app-color-accent:#8ab82c;
    --app-color-accent-active:#6aa80c;
    --app-color-superlight:#fff;
    padding:0;
    margin:0;
    background:#efefef
}
body #app {
    font-family:Avenir,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:var(--app-color-text);
    min-height:100vh;
    display:flex;
    flex-direction:column
}
#app {
    text-align:center;
    font-size:20px;
    line-height:1.4
}
@media (max-width:599px) {
    #app {
        font-size:18px
    }
}
#app a {
    color:var(--app-color-accent)
}
#app h1 {
    color:var(--app-color-light);
    margin:0 0 2rem
}
#app h1,
#app h2 {
    font-size:2rem;
    font-weight:400;
    padding:0 1rem
}
#app h2 {
    margin-bottom:2rem
}
#app h4 {
    font-weight:400;
    margin-bottom:1rem
}
@media (max-width:599px) {
    #app h1,
    #app h2 {
        font-size:1.6rem;
        padding:0
    }
}
#app .appointments {
    flex:1;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:400px;
    padding-top:70px;
    width:1000px;
    margin:0 auto;
    max-width:calc(100% - 2rem)
}
#app .appointments>div {
    width:100%
}
#app .appointments>div[data-view=grippeschutzimpfung][data-scope=STANDARD],
#app .appointments>div[data-view=impfungenstandard],
#app .appointments>div[data-view=zusatzleistungen] {
    display:flex;
    flex-direction:row-reverse
}
#app .appointments>div[data-view=impfungenstandard] {
    justify-content:center;
    flex-flow:row;
    flex-wrap:wrap
}
#app .appointments>div[data-view=impfungenstandard]>:first-child {
    order:5
}
#app .appointments>div[data-view=impfungenstandard]>:first-child+* {
    order:20
}
#app .appointments>div[data-view=impfungenstandard]>:first-child+*+* {
    order:10
}
#app .debug {
    margin-top:100px
}
#app .debug * {
    color:#ccc
}
#app .path, #calendar .path {
    margin-bottom:20px;
    color:#555
}
#app .path a,#calendar .path a {
    color:var(--app-color-light);
    text-decoration:none;
    transition:color .1s ease
}
#app .path a:hover,  #calendar .path a:hover{
    color:var(--app-color-text)
}
#app .path span, #calendar .path span  {
    max-width:250px;
    text-overflow:ellipsis;
    overflow:hidden;
    font-size:.95em;
    white-space:nowrap;
    display:inline-block;
    padding:.45rem .7rem .2rem;
    border-radius:3px;
    margin:0 5px
}
#app .path span:last-child:not(.back), #calendar .path span:last-child:not(.back) {
    display:none
}
#app .path span:last-child.back, #calendar .path span:last-child:not(.back) {
    font-size:.85em;
    color:var(--app-color-light);
    margin-top:1rem
}
#app .path span:not(.path__item), #calendar .path span:not(.path__item)  {
    background:none;
    padding:0;
    font-size:1.3em;
    margin:0 2px 0 3px
}
#app .path span.path__item.back, #calendar .path span.path__item.back  {
    background:var(--app-color-superlight);
    border-radius:30px;
    line-height:1;
    padding:.45rem .7rem;
    transition:all .15s ease
}
#app .path span.path__item.back:hover, #calendar .path span.path__item.back:hover {
    cursor:pointer;
    background:var(--app-color-accent);
    color:var(--app-color-superlight)
}
#app .calendar {
    width:790px;
    max-width:100%;
    display:flex;
    margin:0 auto;
    text-align:left
}
@media (max-width:599px) {
    #app .calendar {
        flex-direction:column;
        padding:0;
        box-sizing:border-box
    }
}
#app .calendar__dates {
    width:345px
}
@media (max-width:599px) {
    #app .calendar__dates {
        width:300px;
        margin:0 auto
    }
}
#app .calendar__dates h4 {
    display:inline-block;
    margin-right:1rem;
    color:var(--app-color-light)
}
#app .calendar__dates h4.is-active {
    color:var(--app-color-text)
}
#app .calendar__dates h4:not(.is-active) {
    cursor:pointer
}
#app .calendar__dates h4+h4+h4~h4,
#app .calendar__month:not(.is-active) {
    display:none
}
#app .calendar__times {
    flex:1;
    padding-left:2rem
}
@media (max-width:599px) {
    #app .calendar__times {
        width:100%;
        padding:1.5rem 0 0;
        margin:0 auto
    }
}
#app .calendar__times .Spinner {
    padding:50px 100px
}
#app .calendar .day {
    display:inline-flex;
    font-size:.85em;
    width:40px;
    height:36px;
    padding-top:4px;
    align-items:center;
    justify-content:center;
    margin:0 6px 6px 0;
    background:var(--app-color-superlight);
    line-height:1;
    border-radius:100px;
    text-decoration:none;
    color:var(--app-color-text);
    border:1px solid transparent;
    transition:all .1s ease
}
@media (max-width:599px) {
    #app .calendar .day {
        margin:0 2px 2px 0;
        width:38px;
        height:34px
    }
}
#app .day.is-name {
    background:none!important;
    height:auto;
    color:var(--app-color-light);
    font-size:.7em
}
#app .day.is-filler {
    visibility:hidden
}
#app .calendar .day:not(.is-unavailable):not(.is-active):hover {
    color:var(--app-color-accent)
}
#app .calendar .day:not(.is-unavailable):not(.is-active).is-today {
    color:var(--app-color-text)
}
#app .calendar .day.is-today {
    font-weight:700;
    border:1px solid var(--app-color-accent)
}
#app .calendar .day.is-unavailable {
    color:var(--app-color-light)
}
#app .calendar .day.is-active {
    background:var(--app-color-accent);
    color:var(--app-color-superlight)
}
#app .calendar .time {
    display:inline-block;
    padding:.9rem 1.2rem .7rem;
    margin:0 .6rem .6rem 0;
    background:var(--app-color-superlight);
    line-height:1;
    border-radius:5px;
    text-decoration:none;
    color:var(--app-color-text);
    transition:color .1s ease
}
#app .calendar .time:hover {
    color:var(--app-color-accent)
}
@media (max-width:599px) {
    #app .calendar .time {
        font-size:.9em;
        padding:.9rem 1rem .7rem
    }
}
#app .start {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-gap:4rem
}
@media (max-width:781px) {
    #app .start {
        grid-template-columns:1fr 1fr;
        grid-gap:2rem
    }
}
@media (max-width:399px) {
    #app .start {
        grid-template-columns:1fr;
        grid-gap:2rem
    }
}
#app .icon {
    min-width:100%;
    text-align:center;
    color:var(--app-color-accent);
    text-decoration:none;
    border-radius:4px;
    line-height:1.2;
    transition:all .2s ease
}
@media (min-width:1000px) {
    #app .icon:hover {
        transform:scale(1.05)
    }
}
#app .icon .icon-image.impfung-nurtingen,
#app .icon .icon-image.impfungen {
    display:block;
    border-radius:100%;
    overflow:hidden;
    padding:30px;
    background:var(--app-color-accent)
}
#app .icon.icon--impfung-nurtingen {
    order:10
}
#app .icon .title {
    display:inline-block;
    padding:1rem 0 .2rem;
    transition:all .1s ease
}
#app .icon .title-title {
    line-height:1.4
}
#app .icon:hover .title-title {
    border-bottom:2px solid var(--app-color-accent)
}
#app .tile {
    position:relative;
    display:inline-flex;
    flex-direction:column;
    width:calc(49% - 2rem);
    overflow:hidden;
    margin-bottom:2rem;
    text-align:left;
    color:var(--app-color-accent);
    box-shadow:1px 1px 6px #ddd;
    text-decoration:none;
    border-radius:4px;
    margin:0 1rem 2rem;
    line-height:1.2;
    transition:all .1s ease;
    background:#fff
}
#app .tile.tile--priced {
    width:100%!important;
    margin-bottom:0!important
}
#app .tile img {
    height:290px
}
#app .tile .price {
    background:var(--app-color-accent);
    color:#fff;
    font-size:.76em;
    font-weight:700;
    display:inline-block;
    padding:2px 5px 3px;
    border-radius:4px;
    margin-left:.25em;
    margin-right:-6px;
    float:right;
    white-space:nowrap
}
@media (max-width:599px) {
    #app .tile img {
        height:210px
    }
}
@media (max-width:999px) {
    #app .tile {
        width:calc(49% - 1.5rem);
        margin:0 .75rem 1.5rem
    }
}
@media (max-width:599px) {
    #app .tile {
        width:calc(100% - 1.5rem)
    }
}
#app .tile:hover {
    box-shadow:1px 1px 10px #ddd;
    background-color:var(--app-color-accent);
    color:var(--app-color-superlight)
}
#app .tile:hover .price {
    background:#fff;
    color:var(--app-color-accent)
}
#app .tile .title {
    padding:1rem;
    font-style:normal;
    margin-bottom:2px
}
#app .tile .text,
#app .tile .title {
    display:block;
    transition:all .1s ease
}

#app .tile--person .title {
    min-height: 72px;
}

#app .tile .title {
    display:block;
    transition:all .1s ease
}
#app .tile .text {
    padding:0 1rem 1rem;
    font-size:.85em;
    color:var(--app-color-light);
    position:relative
}
#app .tile .title .text {
    padding:0;
    font-weight:400;
    color:var(--app-color-light);
    margin-top:.5em;
    font-size:1rem
}
#app .tile .title .text * {
    margin:0;
    font-size:1rem
}
#app .tile:hover .title .text {
    color:var(--app-color-superlight)
}
#app .tile .title .text:empty {
    display:none
}
#app .tile:hover * {
    color:var(--app-color-superlight)
}
#app .tile .text span {
    position:absolute;
    right:1rem;
    bottom:.5rem;
    float:right;
    font-size:20px;
    transition:right .4s ease
}
#app .tile:hover .text span {
    right:.7rem
}
#app .tile img {
    max-width:100%;
    -o-object-fit:cover;
    object-fit:cover;
    height:270px;
    width:100%;
    -o-object-position:top;
    object-position:top
}
#app .tile.disabled {
    pointer-events:none;
    opacity:.41
}
#app .tile--person {
    display:inline-flex;
    flex-direction:column;
    width:calc(24% - 2rem);
    overflow:hidden;
    text-align:left;
    color:var(--app-color-accent);
    box-shadow:1px 1px 6px #ddd;
    text-decoration:none;
    border-radius:4px;
    line-height:1.2;
    transition:all .1s ease;
    border-radius:5px;
    font-size:.85em;
    background-size:cover;
    text-overflow:clip;
    white-space:normal;
    color:var(--app-color-text)
}
@media (max-width:799px) {
    #app .tile--person {
        width:calc(33.33333% - 1.5rem)
    }
}
@media (max-width:599px) {
    #app .tile--person {
        width:calc(49% - 1.5rem)
    }
}
@media (max-width:399px) {
    #app .tile--person img {
        height:200px
    }
}
#app .tile--person .text {
    display:block;
    padding-top:.2rem
}
#app .tile--person:hover {
    background-color:none
}
#app form {
    text-align:left;
    width:400px;
    max-width:calc(100% - 2rem);
    margin:2rem auto 0;
    padding:0 1rem
}
@media (max-width:599px) {
    #app form {
        padding:0;
        max-width:100%
    }
}
#app .submit, #app .cancel {
    box-sizing:border-box;
    display:inline-block;
    background:var(--app-color-accent);
    color:var(--app-color-superlight);
    padding:.8rem 1.3rem .9rem;
    border-radius:5px;
    text-decoration:none;
    font-size:.85em;
    width:100%;
    border:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    white-space:nowrap;
    text-align:center;
    line-height:1
}
#app .submit--paid,
#app .submit--paypal {
    margin-bottom:.5em!important;
    background:var(--app-color-accent);
    width:auto
}
#app .submit--paid {
    opacity:.71;
    pointer-events:none
}
#app .submit--paypal:hover {
    background:#008cce!important
}
#app #paypal-button-container {
    display:none;
    width:500px;
    max-width:100%;
    margin:0 auto
}
#app #user-has-confirmend-payment-refund+#paypal-button-container {
    display:block
}
#app a.submit {
    padding-bottom:.7em;
    margin:.5em 0 0
}
#app .submit[disabled]:not([disabled=false]) {
    opacity:.41;
    cursor:not-allowed
}
#app .submit:hover {
    background:var(--app-color-accent-active)
}
#app input[type=date],
#app input[type=text] {
    display:inline-block;
    width:100%;
    box-sizing:border-box;
    padding:.8rem 1.3rem;
    border:none;
    font-size:.85em;
    border-radius:7px;
    background:var(--app-color-superlight)
}
#app input.is-valid {
    color:green!important
}
#app input.is-invalid {
    color:red!important
}
#app input[type=text][data-disabled] {
    color:green!important;
    opacity:.61;
    pointer-events:none
}
#app input[type=date] {
    background:var(--app-color-accent);
    color:var(--app-color-superlight)
}
#app input[type=date]:active,
#app input[type=date]:focus,
#app input[type=text]:active,
#app input[type=text]:focus {
    border:none;
    outline:none
}
#app label {
    font-size:.85em;
    text-align:left;
    display:block;
    padding-left:1.6rem;
    position:relative;
    margin-bottom:.8rem
}
#app label [type=checkbox] {
    position:absolute;
    left:0;
    top:0
}
#app .booking small {
    font-size:.7em;
    display:block
}
#app .booking__card {
    padding:1rem;
    border:3px solid var(--app-color-accent);
    border-radius:4px;
    max-width:700px;
    width:calc(100% - 2rem);
    margin:0 auto;
    box-sizing:border-box
}
@media (max-width:599px) {
    #app .booking__card {
        max-width:100%
    }
}
#app .booking__card .success {
    font-size:4rem;
    line-height:1;
    color:var(--app-color-accent)
}
#app .booking__card .error {
    color:red
}
#app .booking__card .error-icon {
    font-size:4rem;
    line-height:1
}
#app .popup {
    position:absolute;
    left:0;
    right:0;
    top:70px;
    bottom:0;
    padding-top:100px;
    padding-left:10px;
    padding-right:10px;
    background:hsla(0,0%,100%,.95);
    box-sizing:border-box;
    display:flex;
    align-items:center;
    flex-direction:column
}
@media (max-width:781px) {
    #app .popup {
        padding-top:30px
    }
}
#app .popup p:last-child {
    display:flex;
    align-items:center;
    gap:1rem
}
#app .popup h2 {
    margin-bottom:1rem
}
#app .popup h3 {
    margin-bottom:.5rem
}
#app header.template-header-bar {
    height:110px;
    background:#fff;
    z-index:50;
    font-size:clamp(14px,1.5vw,17px);
    box-shadow:0 6px 4px rgba(0,0,0,.25)
}
#app header.template-header-bar .container {
    display:grid;
    grid-template-columns:280px auto;
    height:110px;
    max-width:1220px;
    box-sizing:content-box;
    margin-left:auto;
    margin-right:auto;
    padding-left:30px;
    padding-right:30px
}
@media (min-width:1000px) {
    #app header.template-header-bar .container {
        grid-template-columns:307.5px auto
    }
}
@media (max-width:1199px) and (min-width:1000px) {
    #app header.template-header-bar .container {
        grid-template-columns:246px auto
    }
}
#app header.template-header-bar .template-header-bar__logo {
    display:flex;
    align-self:center
}
#app header.template-header-bar .template-header-bar__logo a,
#app header.template-header-bar .template-header-bar__logo a img {
    display:block;
    width:100%
}
#app header.template-header-bar .template-header-bar__menu {
    display:flex;
    justify-self:flex-end;
    align-self:center;
    margin-bottom:-1.53rem;
    margin-left:50px
}
@media (max-width:781px) {
    #app header.template-header-bar {
        height:auto
    }
    #app header.template-header-bar .container {
        display:flex;
        flex-direction:column;
        padding:0 15px 10px;
        height:auto
    }
    #app header.template-header-bar .template-header-bar__logo {
        width:200px;
        align-self:flex-start;
        margin:15px 0 10px
    }
    #app header.template-header-bar .template-header-bar__menu {
        align-self:flex-end;
        margin:0
    }
    #app header.template-header-bar .template-header-bar__menu p {
        margin:0
    }
}
#app .payment-headline {
    border-bottom:3px solid var(--app-color-accent);
    color:var(--app-color-accent);
    margin-bottom:60px;
    display:inline-block;
    padding:2px;
    position:relative
}
#app .payment-headline:after {
    content:"›";
    position:absolute;
    left:50%;
    bottom:-34px;
    font-size:1.7rem;
    line-height:1;
    transform:rotate(90deg)
}
#app footer.template-footer {
    margin-top:50px;
    background:#e7e7e7;
    padding:20px 30px
}
#app footer.template-footer .container {
    justify-content:space-between;
    display:flex;
    flex-direction:row;
    max-width:1220px;
    box-sizing:content-box;
    margin-left:auto;
    margin-right:auto
}
#app footer.template-footer * {
    font-size:.96rem
}
#app footer.template-footer a {
    margin-left:20px;
    text-decoration:none
}
#app footer.template-footer a:hover {
    text-decoration:underline
}
@media (max-width:781px) {
    #app footer.template-footer {
        padding-left:15px;
        padding-right:15px
    }
    #app footer.template-footer .container {
        flex-direction:column
    }
    #app footer.template-footer .template-footer__menu {
        display:flex;
        flex-wrap:wrap;
        justify-content:center
    }
    #app footer.template-footer .template-footer__menu a {
        margin-top:.5rem
    }
    body #app .eyecatcher {
        top:130px
    }
}
#app .eyecatcher {
    display:flex;
    padding:.1em .7em;
    border-radius:12px;
    background:#ff8c00;
    color:#fff;
    justify-content:center;
    align-items:center;
    width:300px;
    position:absolute;
    top:100px;
    right:0;
    font-size:.8em
}
#app .eyecatcher a {
    color:inherit
}
.Spinner {
    display:inline-block;
    position:relative;
    width:80px!important;
    height:80px!important;
    padding:100px;
    margin:0 auto
}
.Spinner div {
    animation:Spinner 1.2s cubic-bezier(.5,0,.5,1) infinite;
    transform-origin:40px 40px
}
.Spinner div:after {
    content:" ";
    display:block;
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--app-color-accent);
    margin:-4px 0 0 -4px
}
.Spinner div:first-child {
    animation-delay:-36ms
}
.Spinner div:first-child:after {
    top:63px;
    left:63px
}
.Spinner div:nth-child(2) {
    animation-delay:-72ms
}
.Spinner div:nth-child(2):after {
    top:68px;
    left:56px
}
.Spinner div:nth-child(3) {
    animation-delay:-.108s
}
.Spinner div:nth-child(3):after {
    top:71px;
    left:48px
}
.Spinner div:nth-child(4) {
    animation-delay:-.144s
}
.Spinner div:nth-child(4):after {
    top:72px;
    left:40px
}
.Spinner div:nth-child(5) {
    animation-delay:-.18s
}
.Spinner div:nth-child(5):after {
    top:71px;
    left:32px
}
.Spinner div:nth-child(6) {
    animation-delay:-.216s
}
.Spinner div:nth-child(6):after {
    top:68px;
    left:24px
}
.Spinner div:nth-child(7) {
    animation-delay:-.252s
}
.Spinner div:nth-child(7):after {
    top:63px;
    left:17px
}
.Spinner div:nth-child(8) {
    animation-delay:-.288s
}
.Spinner div:nth-child(8):after {
    top:56px;
    left:12px
}
@keyframes Spinner {
    0% {
        transform:rotate(0deg)
    }
    to {
        transform:rotate(1turn)
    }
}

#ensuite-booking-submit {
    margin-top: 20px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}