#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;
}